/* ============================================================================
   Diablo Zombie — site-wide overrides (2026-05-16)
   Layered on top of the Webs.com legacy CSS. Fixes the black-bar-below-content
   issue, adds responsive behaviour, hover effects, fade-in, and styles the
   tabbed video component + Community Status badge.
   ============================================================================ */

/* ---- Background fix: dark textured page so empty space below short content
   doesn't read as a flat "black void". A subtle red-tinted radial glow on top
   of near-black gives the dark gothic theme visual depth on all viewport
   heights, including 4K. The textured pattern is fixed to the viewport so it
   stays in place while the page scrolls. */
html, body {
    margin: 0;
    min-height: 100vh;
    background-color: #0a0606 !important;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(80,0,0,0.45) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(50,0,0,0.35) 0%, transparent 70%),
        linear-gradient(180deg, #0a0606 0%, #110808 40%, #0a0606 100%);
    background-attachment: fixed;
    background-size: 100% 100%;
    color: #ddd;
}
/* Force the legacy outer wrapper to fill viewport and have transparent bg
   so the body gradient shows through. Without this, content < viewport
   height leaves the body bg visible only at the bottom, which reads as a band. */
.document {
    background-color: transparent !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column;
}
.document-content-wrapper, .main-content, .pillarbox, .box-intro,
.frame--u-shadow, .frame--paper, .frame--wide-shadow {
    background-color: transparent !important;
}

/* ---- Center the home-page video element ---- */
.dz-video {
    display: block;
    margin: 18px auto;
    max-width: 720px;
    width: 100%;
    background: #000;
    border: 1px solid #333;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.6);
}
/* If the dz-video has a fallback iframe inside, center it too */
.dz-video > iframe { display: block; margin: 0 auto; width: 100%; aspect-ratio: 16/9; height: auto !important; }
/* When the dz-tabs panel contains a dz-video, give the panel some breathing room */
.dz-tab-panel .dz-video { margin: 8px auto; }
/* Discord follow card next to the Facebook plugin */
.dz-discord {
    display: block;
    background: linear-gradient(135deg, #5865F2 0%, #404EED 100%);
    color: #fff;
    text-decoration: none;
    padding: 10px 14px;
    margin: 8px auto;
    width: 300px;
    max-width: 100%;
    border-radius: 8px;
    text-align: center;
    font-family: Arial, sans-serif;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(88,101,242,0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dz-discord:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(88,101,242,0.6);
    color: #fff;
}
.dz-discord small { display: block; opacity: 0.8; font-weight: 400; margin-top: 2px; }

/* ---- Call-to-action buttons (Join server / Steam help) ---- */
.dz-cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 24px; margin: 10px 0;
    background: linear-gradient(135deg, #d12d2d 0%, #7a0000 100%);
    color: #fff !important;
    text-decoration: none !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.15rem; font-weight: 600;
    border: 1px solid #ff6363;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(120,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}
.dz-cta:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #ee3a3a 0%, #9a0000 100%);
    box-shadow: 0 6px 20px rgba(255,40,40,0.45), inset 0 1px 0 rgba(255,255,255,0.2);
    color: #fff !important;
}
.dz-cta.dz-cta-blue {
    background: linear-gradient(135deg, #2476f3 0%, #003a86 100%);
    border-color: #79b6ff;
    box-shadow: 0 4px 12px rgba(0,40,140,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
}
.dz-cta.dz-cta-blue:hover {
    background: linear-gradient(135deg, #4090ff 0%, #00499f 100%);
    box-shadow: 0 6px 20px rgba(40,120,255,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
}
.dz-cta small { font-size: 0.85rem; font-weight: 400; opacity: 0.85; }

/* ---- Live form validation (success/index.php) ---- */
.dz-form input { font-family: Arial, sans-serif; font-size: 0.95rem; padding: 8px 10px;
    border: 2px solid #333; border-radius: 4px; background: #1a1a1a; color: #eee;
    width: 100%; box-sizing: border-box; transition: border-color 0.2s ease; }
.dz-form input:focus { outline: none; border-color: #f80; }
.dz-form input.is-valid   { border-color: #4caf50; }
.dz-form input.is-invalid { border-color: #e53935; }
.dz-form .hint  { font-size: 0.82rem; margin: 4px 0 12px; min-height: 1.1em; color: #888; transition: color 0.2s ease; }
.dz-form .hint.ok   { color: #66dd6a; }
.dz-form .hint.bad  { color: #ff8080; }
.dz-form label { display: block; margin-bottom: 4px; font-weight: 600; color: #ffae00; }
.dz-form button[type=submit] {
    padding: 10px 24px; background: linear-gradient(135deg,#f80,#a04400);
    color:#000; font-weight: 700; border: none; border-radius: 6px;
    cursor: pointer; font-size: 1rem; margin-top: 8px;
}
.dz-form button[type=submit]:hover { background: linear-gradient(135deg, #ffa023, #b85500); }
.dz-form button[type=submit]:disabled { background: #555; color: #aaa; cursor: not-allowed; }
.dz-form-summary { font-size: 0.88rem; padding: 8px 12px; margin: 8px 0; border-radius: 4px; }
.dz-form-summary.ok  { background: rgba(76,175,80,0.15);  color: #8ee596; border: 1px solid #4caf50; }
.dz-form-summary.bad { background: rgba(229,57,53,0.15);  color: #ff9c9c; border: 1px solid #e53935; }
.dz-form-summary.warn{ background: rgba(255,165,0,0.15);  color: #ffd58b; border: 1px solid #f80;    }

/* ---- Force ALL gametracker banner images to a consistent 560x95 layout.
   Override Webs.com .pip / image-media container sizing that wraps them. */
img[src*="cache.gametracker.com"] {
    display: block !important;
    width: 100% !important;
    max-width: 560px !important;
    height: auto !important;
    aspect-ratio: 560 / 95;
    margin: 8px auto !important;
    object-fit: contain;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
}
/* The Webs.com `image-media__image-container` uses padding-bottom % for aspect
   ratio. When the wrapped element is a gametracker banner, suppress that. */
.image-media__image-container:has(> img[src*="cache.gametracker.com"]) {
    padding-bottom: 0 !important;
    height: auto !important;
    overflow: visible !important;
}
.pip[data-tower-id]:has(img[src*="cache.gametracker.com"]) {
    width: auto !important;
    max-width: 600px !important;
    margin: 8px auto !important;
}
/* Make the link wrapping the banner stretch to image width */
a[href*="gametracker"]:has(img[src*="cache.gametracker.com"]) {
    display: block;
    max-width: 560px;
    margin: 8px auto;
}

/* ---- Order VIP layout polish ---- */
.dz-vip-card {
    max-width: 720px;
    margin: 20px auto;
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(40,0,0,0.65), rgba(0,0,0,0.5));
    border: 1px solid rgba(255,128,0,0.35);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
}
.dz-vip-card h2 {
    margin: 0 0 6px;
    font-family: Georgia, "Times New Roman", serif;
    color: #ffae00;
    font-size: 1.6rem;
    letter-spacing: 1.5px;
    text-align: center;
    text-shadow: 0 0 12px rgba(255,128,0,0.5);
}
.dz-vip-card .subtitle { text-align:center; color:#bbb; font-size:0.95rem; margin: 0 0 18px; }
.dz-vip-perks { list-style: none; padding: 0; margin: 16px 0; }
.dz-vip-perks li {
    padding: 8px 14px;
    margin: 4px 0;
    background: rgba(255,128,0,0.07);
    border-left: 3px solid #f80;
    border-radius: 0 4px 4px 0;
    color: #ddd;
}
.dz-vip-perks li::before { content: "★ "; color: #ffae00; font-weight: 700; }

/* ---- Responsive media + content ---- */
img, video, iframe { max-width: 100%; height: auto; }
iframe[src*="youtube"], iframe[src*="youtube-nocookie"] {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto !important;
}

/* ---- Phone / tablet breakpoint ---- */
@media (max-width: 768px) {
    /* stack two-column hero (video next to text) */
    .pillarbox, .ColumnTower, .row, [class*="col-"][class*="col-"] {
        flex-direction: column !important;
        display: flex !important;
    }
    .pillar, .Column, .col, [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
    /* shrink the giant header banner */
    .header-image, .banner-image, header img, .box-header img {
        max-width: 100%;
        height: auto;
    }
    /* hide desktop nav, show hamburger */
    .desktop-nav { display: none !important; }
    .mobile-nav-toggle { display: inline-block !important; }
    .box-primary-nav { display: none; }
    .box-primary-nav.open { display: block; }
    body.menu-open .box-primary-nav { display: block !important; position: fixed; top: 0; left: 0; right: 0; background: #111; padding: 50px 20px 20px; z-index: 9999; }
    /* shrink padding */
    .container, .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ---- Hamburger toggle (hidden on desktop, visible on mobile via media query above) ---- */
.mobile-nav-toggle {
    display: none;
    position: fixed; top: 14px; right: 14px;
    width: 44px; height: 44px;
    background: rgba(0,0,0,0.7);
    border: 1px solid #f80;
    border-radius: 6px;
    cursor: pointer;
    z-index: 10000;
    color: #f80;
    font-size: 22px;
    line-height: 44px; text-align: center;
}

/* ---- Nav hover effects ---- */
nav a, .box-primary-nav a, header a {
    transition: color 0.2s ease, text-shadow 0.2s ease, background-color 0.2s ease;
}
nav a:hover, .box-primary-nav a:hover, header a:hover {
    color: #ffae00 !important;
    text-shadow: 0 0 8px rgba(255,165,0,0.7);
}

/* ---- Page fade-in ---- */
body { animation: dz-fadein 0.45s ease-out 0s both; }
@keyframes dz-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Community Status banner (nostalgic mode) ---- */
.community-status {
    background: linear-gradient(90deg, rgba(80,40,0,0.85), rgba(40,0,0,0.85));
    color: #ffd58b;
    border: 1px solid #f80;
    border-radius: 8px;
    padding: 10px 18px;
    margin: 18px auto;
    max-width: 720px;
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    box-shadow: 0 0 20px rgba(255,128,0,0.18);
}
.community-status strong { color: #ffae00; letter-spacing: 1px; }
.community-status small { display: block; color: #aaa; font-style: italic; margin-top: 4px; }

/* ---- T100 footer call-out ---- */
.t100-callout {
    display: inline-block;
    padding: 6px 14px;
    margin: 6px 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffae00;
    border: 1px solid #f80;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.t100-callout:hover {
    background: #f80;
    color: #000;
    text-shadow: 0 0 6px rgba(255,255,255,0.5);
}

/* ---- Tabbed video/text guide component ---- */
.dz-tabs {
    max-width: 720px;
    margin: 18px auto;
    background: rgba(0,0,0,0.55);
    border: 1px solid #444;
    border-radius: 8px;
    overflow: hidden;
    font-family: Arial, sans-serif;
}
.dz-tab-buttons {
    display: flex;
    background: linear-gradient(180deg, #1a1a1a, #0a0a0a);
    border-bottom: 1px solid #333;
}
.dz-tab-buttons button {
    flex: 1 1 auto;
    padding: 12px 16px;
    background: transparent;
    color: #ccc;
    border: none;
    border-right: 1px solid #333;
    cursor: pointer;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    transition: background 0.15s ease, color 0.15s ease;
}
.dz-tab-buttons button:last-child { border-right: none; }
.dz-tab-buttons button:hover { background: rgba(255,128,0,0.12); color: #fff; }
.dz-tab-buttons button.is-active {
    background: linear-gradient(180deg, rgba(255,128,0,0.25), rgba(120,40,0,0.4));
    color: #ffae00;
    box-shadow: inset 0 -3px 0 #f80;
}
.dz-tab-panels { padding: 16px; }
.dz-tab-panel { display: none; }
.dz-tab-panel.is-active { display: block; animation: dz-fadein 0.25s ease-out; }
.dz-tab-panel ol { padding-left: 22px; line-height: 1.6; }
.dz-tab-panel li { margin-bottom: 8px; }
.dz-tab-panel a { color: #ffae00; }
.dz-tab-panel .fallback {
    padding: 30px 20px; text-align: center;
    background: rgba(60,0,0,0.4); border-radius: 6px;
    color: #ddd; font-style: italic;
}

/* ---- Native HTML5 video wrapper ---- */
.dz-video {
    max-width: 720px; margin: 18px auto; display: block;
    background: #000; border: 1px solid #333; border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.6);
}

/* ---- Videos gallery (videos.html) ---- */
.dz-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}
.dz-video-card {
    background: rgba(0,0,0,0.55);
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.dz-video-card:hover {
    transform: translateY(-3px);
    border-color: #f80;
    box-shadow: 0 6px 24px rgba(255,128,0,0.25);
}
.dz-video-card .thumb {
    width: 100%; aspect-ratio: 16/9; background-size: cover; background-position: center;
}
.dz-video-card .body { padding: 12px 14px; }
.dz-video-card h3 { margin: 0 0 6px; font-size: 1.05rem; color: #ffae00; }
.dz-video-card p { margin: 0; font-size: 0.85rem; color: #bbb; line-height: 1.4; }

/* ---- gametracker "Last seen" badge ---- */
.last-seen {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 0.78rem;
    background: rgba(0,0,0,0.5);
    border: 1px solid #444;
    border-radius: 3px;
    color: #aaa;
}