/* T7 design system — ported from T7Project mockups (2026-07-23).
   Tokens verbatim from Mainpage.php; components namespaced `t7-`. */
:root {
    --fire-dark: #0a0000;
    --fire-red: #ff0000;
    --fire-orange: #ff4500;
    --fire-yellow: #ffd700;
    --discord-purple: #5865F2;
    --gold-light: #ffdf00;
    --gold-dark: #b8860b;
    --glass-bg: rgba(20, 0, 0, 0.45);
    --glass-border: rgba(255, 215, 0, 0.3);
    --boss-bg: rgba(25, 10, 5, 0.7);
    --boss-border: rgba(255, 100, 0, 0.3);
}

/* Moving Gradients Animation (kept for buttons) */
@keyframes t7-gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes t7-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ========================================= */
/* GLOBAL BACKGROUND SCRIM (site-wide)        */
/* ========================================= */
/* base.html renders the fixed background (`#siteBgStack` > `.site-bg-layer`
   `#siteBgLayerA/B` + `.site-bg-overlay`) on EVERY page, using
   `images/t7/background.webp` (a bright, highly-saturated fire/battle
   scene). style.css's darkening treatment for that stack (filter +
   overlay) was tuned for a more muted, generic background and is too weak
   for this asset — on content-heavy pages (e.g. Custom Pal Creator) it
   overpowers/bleeds around cards instead of sitting quietly behind them.
   Deepen it here so it reads correctly site-wide. This is CSS-only (no
   markup/JS change) so it is live on a browser refresh, no Flask restart
   needed.
   Stacking is unaffected: `#siteBgStack` stays `position: fixed; z-index: 0`
   and `.main-content` stays `position: relative` (z-index: auto) — content
   already paints above the fixed stack via normal DOM/stacking order, this
   only makes the layer/overlay themselves darker.
   The homepage's own darker glass panels (`.t7-stat-box`, `.t7-boss-status`,
   `.hero-boss-*` via `--glass-bg`/`--boss-bg`) already sit on top of this
   background with their own semi-opaque fills tuned for a bright backdrop —
   a darker ambient background only improves their contrast, it does not
   wash them out or change their own backgrounds. */
.site-bg-layer {
    /* The mockup (Mainpage.php) showed background.png at full vividness over a
       flat --fire-dark body color — NO filter at all. The old brightness(0.24)
       crushed the reddish T7 scene to ~24% (near-black). Keep only a mild
       saturate/contrast bump and a gentle brightness pull-down so the reddish
       background reads richly while glass content panels stay legible on top. */
    filter: saturate(108%) contrast(100%) brightness(0.62) !important;
}
.site-bg-overlay {
    /* Was a near-black-red 88% scrim that buried the image. Drop to a light
       warm-dark wash (~0.32) — enough to seat content panels, not a heavy
       filter. This overlay lives INSIDE #siteBgStack (z-index:0), so it sits
       BELOW #spark-canvas (z-index:0, later in tree order) — embers show over it. */
    opacity: 0.32 !important;
    background:
        linear-gradient(160deg, rgba(10, 0, 0, 0.55), rgba(20, 3, 0, 0.40) 45%, rgba(10, 0, 0, 0.55)) !important;
}

/* ========================================= */
/* CONTENT-WRAPPER TRANSPARENCY (Fix 1)       */
/* ========================================= */
/* The global page background (body) shipped a dark NAVY/BLUE gradient
   (#061019 -> #0d1824 + blue radial tints) and the shop's center-column
   wrapper (.shop-container) painted an opaque navy glass — together they hid
   the reddish T7 background behind the content column, leaving it visible only
   at the far left/right margins. Neutralize those big wrappers so the fixed T7
   background shows through the center too: body falls back to a flat
   --fire-dark (mockup behavior, no blue), and the column wrappers go
   transparent. Content PANELS/cards keep their own dark-glass fills
   (--glass-bg/--boss-bg, .item-card, hero shells) for readability — only the
   big column wrappers are cleared here. CSS-only, live on a browser refresh. */
body {
    background: var(--fire-dark) !important;
}
.main-content {
    background: transparent !important;
}
.shop-container {
    background: transparent !important;
}

/* ----------------------------------------------------------------- */
/* BG-FIX 2: per-page navy WRAPPER/HEADER backgrounds -> transparent  */
/* ----------------------------------------------------------------- */
/* Several public pages ship their OWN opaque dark-BLUE/navy wrapper or
   header band behind their center content column (e.g. the Item Market's
   `.auction-hero` header + `.auction-container` center column painted
   `rgba(18,36,50)`/`rgba(13,28,40)` navy), so the fixed reddish T7 fire
   background only showed at the far left/right margins. Neutralize those
   big WRAPPER/HEADER backgrounds to fully transparent — the EXACT same
   treatment as `.shop-container` above — so the fiery background shows
   through the header AND the center column. NO new dark-glass fill is
   added here (matching the owner's directive): only the big wrappers are
   cleared. The real content CARDS/PANELS inside each page keep their own
   dark-glass fills (`--dark-card`, `--glass-bg`, `.auction-card`,
   `.subscriber-card`, listing/modal panels, etc.) untouched, so they stay
   legible on top of the background. `!important` (these page rules are
   plain, non-important) + this sheet loading site-wide make it win over
   every page's inline `<style>` — CSS-only, live on a browser refresh.
     - .hero-section    : shop.html + custom_services.html hero bands
                          (index.html already ships it transparent)
     - .auction-hero    : Item Market header band
     - .auction-container: Item Market center column (the reported case)
     - .pal-market-hero : Pal Market header panel
     - .cpc-hero        : Custom Pal Creator header panel
     - .subscriber-hero : Subscriber Perks header panel
   (Casino hub/games, Leaderboards, and the Purchase page already use a
   transparent page wrapper with only their cards filled, so they need no
   override here.) */
.hero-section,
.auction-hero,
.auction-container,
.pal-market-hero,
.cpc-hero,
.subscriber-hero {
    background: transparent !important;
}

/* ========================================= */
/* TOP BAR                                    */
/* ========================================= */
.t7-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid var(--fire-red);
    box-shadow: 0 0 15px var(--fire-red);
    min-width: 0;
    overflow: hidden;
}

.t7-topbar .live-activity {
    flex-grow: 1;
    text-align: center;
    font-weight: bold;
    color: var(--fire-yellow);
    text-shadow: 0 0 10px var(--fire-orange);
    animation: t7-pulse 2s infinite;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.t7-topbar .btn-discord {
    background: linear-gradient(45deg, #4752C4, var(--discord-purple), #7289DA);
    background-size: 200% 200%;
    animation: t7-gradientMove 3s ease infinite;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 10px var(--discord-purple);
    transition: transform 0.2s;
}

.t7-topbar .btn-discord:hover {
    transform: scale(1.05);
}

/* ========================================= */
/* MARQUEE BANNER                             */
/* ========================================= */
.t7-marquee {
    width: 100%;
    overflow: hidden;
    background: rgba(20, 0, 0, 0.9);
    padding: 8px 0;
    border-bottom: 2px solid var(--gold-dark);
    min-width: 0;
}

.t7-marquee-content {
    display: inline-block;
    white-space: nowrap;
    animation: t7-marquee 20s linear infinite;
    background: linear-gradient(45deg, var(--gold-light), var(--fire-yellow), var(--gold-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    font-size: 1.1em;
}

@keyframes t7-marquee {
    0% { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
}

/* ========================================= */
/* LOGO AREAS                                 */
/* ========================================= */
/* Centered, in-flow hero logo (mockup's `.main-logo-container`). Previously
   this was `position: absolute; top: 100px; left: 20px` — a small corner
   badge that overlapped the "Live Boss Status" heading below it on
   index.html. Fixed 2026-07-23: static/in-flow + centered, matching the
   mockup's single centered column. */
.t7-logo-area {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}
.t7-logo-area img {
    max-width: 150px;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.2));
}

/* Full-width centered hero variant (landing.html wraps the hero in
   `t7-logo-area t7-logo-hero`). This compound selector (two classes)
   outranks the base `.t7-logo-area` on specificity — regardless of source
   order — and adds the extra top padding / tagline spacing the landing
   hero needs on top of the shared centered-logo base above. */
.t7-logo-area.t7-logo-hero {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px 20px;
    text-align: center;
}

/* The markup puts the `t7-main-logo` class directly on the <img> (not on a
   wrapping div), so target the element itself. `img.t7-main-logo` matches
   at (class + type) specificity — the same as `.t7-logo-area img` above —
   and wins the tie because it is declared later in the cascade, so the
   logo gets its glow/float treatment on both index.html (corner badge) and
   landing.html (full hero) instead of being capped at 150px with no glow. */
img.t7-main-logo {
    max-width: min(480px, 88vw);
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 34px var(--fire-orange));
    animation: t7-float 3.6s ease-in-out infinite;
    will-change: transform;
}

@keyframes t7-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
}

/* Scoped reduced-motion EXEMPTION for the hero logo float.
   style.css (~:5103) applies a blanket `*,*::before,*::after {
   animation-duration:0.01ms!important; animation-iteration-count:1!important }`
   under prefers-reduced-motion, which freezes this float (runs once in 0.01ms).
   Many environments (notably Windows Server / "adjust for best performance",
   where OS animations are disabled) report reduce-motion by DEFAULT, so the
   owner's intended gentle hero float never plays. This effect is small,
   decorative, and slow (16px over 3.6s), so we deliberately re-enable ONLY this
   one element. The shorthand-with-!important at (0,1,1) specificity beats the
   blanket `*` !important longhands (0,0,0). All other motion still respects
   reduce-motion. */
@media (prefers-reduced-motion: reduce) {
    img.t7-main-logo {
        animation: t7-float 3.6s ease-in-out infinite !important;
    }
}

/* ========================================= */
/* LANDING HERO CTA                           */
/* ========================================= */
.t7-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 8px;
    background: linear-gradient(45deg, var(--fire-red), var(--fire-orange), var(--fire-yellow));
    background-size: 200% 200%;
    animation: t7-gradientMove 3s ease infinite;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 0 15px var(--fire-red);
    transition: transform 0.2s;
    min-width: 0;
}

.t7-cta-primary:hover {
    transform: scale(1.05);
}

/* Base skin so `.btn-discord` also styles outside `.t7-topbar` (landing.html
   uses it directly in the hero CTA row, not inside a topbar). */
.btn-discord {
    background: linear-gradient(45deg, #4752C4, var(--discord-purple), #7289DA);
    background-size: 200% 200%;
    animation: t7-gradientMove 3s ease infinite;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 10px var(--discord-purple);
    transition: transform 0.2s;
}

.btn-discord:hover {
    transform: scale(1.05);
}

/* ========================================= */
/* SERVER-STAT GRID                           */
/* ========================================= */

/* Server-stat grid box — every card is overflow-safe. Premium glass-card
   treatment: soft ambient shadow at rest, brighter gold border + gentle
   lift on hover. Kept intentionally quiet (no continuous animation) — the
   bottom nav already lost its animated tracer for looking too busy on real
   layouts, and a KPI row is read at a glance, not stared at. */
.t7-stat-box {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 14px 16px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.t7-stat-box:hover {
    transform: translateY(-3px);
    border-color: var(--fire-yellow);
    background-color: rgba(30, 5, 0, 0.55);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 20px rgba(255, 140, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Icon + copy layout for the 4 headline stat boxes (markup in
   _t7_stat_grid.html). Additive/scoped to its own classes rather than
   `.t7-stat-box` itself, so the plain title/value boxes in the live-status
   row below (server status, players online, jackpot) — which don't use
   this icon wrapper — are completely unaffected. */
.t7-stat-icon-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    /* Icon is pulled out of flow (absolutely positioned, below) so `.t7-stat-copy`
       is the sole flex child and can span the full row width to center its
       text independent of the icon. This row is the icon's positioning
       context for "pinned to the left edge". */
    position: relative;
}
.t7-stat-icon {
    /* Icon sits in-flow on the left; the copy (flex:1) then centers the
       title/value within the space FROM the icon TO the right edge (owner
       request) — not across the full box. */
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: linear-gradient(160deg, rgba(255, 215, 0, 0.18), rgba(255, 69, 0, 0.08));
    border: 1px solid var(--glass-border);
    color: var(--gold-light);
    font-size: 1em;
    text-shadow: 0 0 10px rgba(255, 140, 0, 0.5);
}
.t7-stat-copy {
    min-width: 0;
    overflow: hidden;
    /* Fill the space to the RIGHT of the in-flow icon and center the
       title/value within it (icon -> right edge), per owner request. */
    flex: 1;
    text-align: center;
}

/* Label: small, uppercase, muted — sits above (or beside, in the live-status
   row) the value instead of competing with it. */
.t7-stat-title {
    font-size: 0.86em;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    color: rgba(235, 226, 208, 0.72);
    /* Allow long labels (e.g. "Unique World Players (30D)") to wrap instead of
       truncating with an ellipsis — the "(30D)" part drops to a second line. */
    white-space: normal;
    overflow-wrap: anywhere;
    margin-bottom: 3px;
    /* Centered across the box (this class is also used bare, without the
       `.t7-stat-copy` wrapper, by the second stat row's Servers/Players
       Online/Jackpot boxes — centering it here covers both cases). */
    text-align: center;
}

/* Value: large, bold, gold-to-fire gradient text with a subtle glow —
   the headline number the label supports. `color` is a plain-gold fallback
   for the rare browser without background-clip:text support; the same
   gradient-text technique is already used site-wide (see `.t7-marquee-content`
   above). */
.t7-stat-value {
    font-size: 1.55em;
    font-weight: 800;
    line-height: 1.15;
    color: var(--gold-light);
    background: linear-gradient(90deg, var(--gold-light), var(--fire-yellow) 55%, var(--fire-orange));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 16px rgba(255, 140, 0, 0.25);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Same reasoning as `.t7-stat-title` above — centers both the wrapped
       (icon boxes) and bare (Players Online / Jackpot) usages. */
    text-align: center;
}
.t7-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
/* Row 2 (server status / players / jackpot) previously had its own
   `max-width: 720px; margin: 14px auto 0`, narrowing it far below row 1's
   width — centered relative to itself, but visually cramped/offset next to
   the full-width row above. The mockup's row-3-cols keeps the SAME width as
   row 1 (just 3 columns instead of 4); match that here so both rows share
   identical edges instead of a narrow bar floating under a wide one. */
.t7-stat-grid.t7-stat-grid-3 { grid-template-columns: repeat(3, 1fr); }
.t7-stat-grid + .t7-stat-grid { margin-top: 14px; }
@media (max-width: 720px) { .t7-stat-grid, .t7-stat-grid.t7-stat-grid-3 { grid-template-columns: repeat(2, 1fr); } }

/* Dashboard column — mockup's `.dashboard-container` (max-width: 1200px;
   margin: 0 auto; padding: 10px 20px). Wraps the stat-grid rows in
   `_t7_stat_grid.html` and, separately, the community-ethos block + Live
   Boss Status module in index.html's content block — giving the whole
   homepage the mockup's single tidy centered column instead of each
   section picking its own width/centering. */
.t7-dashboard {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    box-sizing: border-box;
    min-width: 0;
}

/* Community Ethos block (mockup's `.community-ethos`) — centered copy +
   icon between the stat grid and the Live Boss Status module. */
.t7-community-ethos {
    text-align: center;
    max-width: 900px;
    margin: 25px auto;
    padding: 20px;
    background: rgba(10, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    border: 1px solid rgba(184, 134, 11, 0.5);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
    min-width: 0;
    overflow: hidden;
}
.t7-community-ethos p {
    font-size: 1em;
    line-height: 1.4;
    margin: 8px 0;
    color: #eee;
    text-shadow: 0 2px 4px #000;
}
.t7-ethos-icon {
    font-size: 2.2em;
    color: var(--gold-light);
    text-shadow: 0 0 15px var(--gold-dark);
    margin: 10px 0;
}

/* ========================================= */
/* LIVE BOSS STATUS SECTION                  */
/* ========================================= */
.t7-boss-status {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 15px;
    border: 1px solid var(--glass-border);
    padding: 25px;
    margin-top: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    min-width: 0;
    overflow: hidden;
}

.t7-boss-status .boss-section-header {
    text-align: center;
    margin-bottom: 20px;
}
.t7-boss-status .boss-section-header h2 {
    color: var(--fire-yellow);
    margin: 0 0 15px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 15px var(--fire-orange);
}

/* Burning Tabs */
.t7-boss-status .boss-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.t7-boss-status .boss-tab-btn {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #aaa;
    padding: 10px 25px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.t7-boss-status .boss-tab-btn:hover {
    color: #fff;
    border-color: rgba(255, 69, 0, 0.4);
    background: rgba(30, 10, 0, 0.8);
}

/* The Active "Burning" Tab Effect */
.t7-boss-status .boss-tab-btn.active {
    color: #fff;
    background: #2a0000;
    border-color: var(--fire-red);
    /* Burning Animation */
    animation: t7-burnTab 1.5s infinite alternate;
}

@keyframes t7-burnTab {
    0% {
        box-shadow: 0 0 10px var(--fire-red), inset 0 0 5px var(--fire-orange);
        text-shadow: 0 0 5px var(--fire-red);
    }
    100% {
        box-shadow: 0 0 20px var(--fire-orange), 0 0 10px var(--fire-yellow), inset 0 0 15px var(--fire-red);
        text-shadow: 0 0 10px var(--fire-yellow);
    }
}

/* Tab Content Area */
.t7-boss-status .boss-tab-content {
    display: none;
    animation: t7-fadeIn 0.4s ease;
}
.t7-boss-status .boss-tab-content.active {
    display: block;
}
@keyframes t7-fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Notification Bar */
.t7-boss-status .boss-notification {
    background: rgba(0, 0, 0, 0.5);
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 4px;
    margin: 20px 0;
    font-size: 0.9em;
    color: #aaa;
    border: 1px solid rgba(255,255,255,0.05);
    min-width: 0;
    overflow: hidden;
}
.t7-boss-status .boss-notification .count {
    background: #333;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    margin-right: 8px;
}
.t7-boss-status .boss-notification .server-name {
    color: #fff;
    margin-left: 4px;
}

/* Main Grid (Picture & Map) */
.t7-boss-status .boss-split-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
    min-width: 0;
}

.t7-boss-status .boss-panel {
    background: var(--boss-bg);
    border: 1px solid var(--boss-border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* Left Panel - Boss Picture */
.t7-boss-status .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}
.t7-boss-status .panel-server { font-size: 0.85em; font-weight: bold; color: #ccc; text-transform: uppercase; }
.t7-boss-status .boss-name-title {
    font-size: 1.8em;
    margin: 5px 0 15px 0;
    color: #fff;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.t7-boss-status .badges-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}
.t7-boss-status .badge {
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: bold;
}
.t7-boss-status .badge.raid { color: #ffaa00; border-color: rgba(255, 170, 0, 0.4); }
.t7-boss-status .badge.level { color: #fff; border-color: rgba(255, 215, 0, 0.6); }

.t7-boss-status .boss-image-wrapper {
    background: rgba(10, 15, 25, 0.6);
    border-radius: 10px;
    padding: 15px;
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,0.05);
    min-width: 0;
    overflow: hidden;
}
.t7-boss-status .img-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 0.8em;
    font-weight: bold;
    color: #aaa;
}
.t7-boss-status .img-stats-badges {
    display: flex;
    gap: 8px;
}
.t7-boss-status .stat-badge {
    background: rgba(0,0,0,0.5);
    padding: 4px 8px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
}
.t7-boss-status .stat-badge i { color: var(--fire-yellow); }

.t7-boss-status .placeholder-image {
    width: 100%;
    height: 250px;
    background: rgba(0,0,0,0.3);
    border: 1px dashed rgba(255,255,255,0.2);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #555;
    margin-bottom: 15px;
}

.t7-boss-status .img-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
    min-width: 0;
}
.t7-boss-status .img-footer-text {
    min-width: 0;
    overflow: hidden;
}
.t7-boss-status .img-footer-text h4 {
    margin: 0 0 5px 0;
    font-size: 1.1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.t7-boss-status .img-footer-text p { margin: 0; font-size: 0.8em; color: #aaa; }
.t7-boss-status .exp-badge {
    background: rgba(30, 20, 0, 0.8);
    border: 1px solid var(--gold-dark);
    color: var(--fire-yellow);
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Right Panel - Map */
.t7-boss-status .map-panel {
    padding: 0;
    overflow: hidden;
    position: relative;
    min-width: 0;
}
.t7-boss-status .map-preview-img {
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: #0a1128;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.t7-boss-status .spawn-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0,0,0,0.7);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
    border: 1px solid rgba(255,255,255,0.1);
}
.t7-boss-status .map-footer-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    box-sizing: border-box;
    min-width: 0;
}
.t7-boss-status .map-location {
    font-size: 1.2em;
    font-weight: bold;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.t7-boss-status .open-map-btn {
    color: var(--fire-yellow);
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s;
}
.t7-boss-status .open-map-btn:hover { color: #fff; }

/* Featured Items Bottom Area */
.t7-boss-status .rewards-section {
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.05);
    min-width: 0;
    overflow: hidden;
}
.t7-boss-status .rewards-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.t7-boss-status .rewards-title {
    font-size: 0.85em;
    font-weight: bold;
    color: #ccc;
    text-transform: uppercase;
}
.t7-boss-status .rewards-title span { color: #777; margin-left: 10px; font-weight: normal; text-transform: none; }
.t7-boss-status .show-more-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #ccc;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85em;
}
.t7-boss-status .show-more-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }

.t7-boss-status .items-grid {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 10px;
    min-width: 0;
}
.t7-boss-status .items-grid::-webkit-scrollbar { height: 6px; }
.t7-boss-status .items-grid::-webkit-scrollbar-thumb { background: rgba(255,69,0,0.5); border-radius: 3px; }

/* Item card — overflow-safe per repo CSS rule */
.t7-item-card {
    background: rgba(20,20,20,0.7);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    width: 130px;
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s;
    min-width: 0;
    overflow: hidden;
}
.t7-item-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.3); }
.t7-item-card .item-icon {
    width: 60px; height: 60px;
    background: rgba(0,0,0,0.5);
    border-radius: 8px;
    margin-bottom: 12px;
    display: flex; justify-content: center; align-items: center;
}
.t7-item-card .item-name {
    font-size: 0.8em;
    font-weight: bold;
    margin-bottom: 10px;
    min-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.t7-item-card .item-badges {
    display: flex; gap: 5px; width: 100%; justify-content: center;
}
.t7-item-card .ibadge {
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    font-size: 0.65em;
    padding: 3px 6px;
    border-radius: 4px;
    color: #aaa;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* ========================================= */
/* BOTTOM NAV SKIN                            */
/* Restyles (not re-layouts) .site-bottom-nav */
/* ========================================= */
.t7-nav.site-bottom-nav {
    /* `.site-bottom-nav` is the FULL-WIDTH fixed container (left:0;right:0);
       the actual nav is the centered pill `.site-bottom-nav-bar` inside it,
       which carries its own `#0d0000` background (see rule below). Painting a
       background OR a spread box-shadow here renders as a bar/band across the
       entire bottom of every page behind the centered pill. The previous
       `background: rgba(10,0,0,0.95)` + `box-shadow: 0 10px 30px
       rgba(255,0,0,0.3)` produced exactly that — a dark bar with a 30px RED
       glow. Both removed so the pill sits cleanly over the page with no
       colored band beneath it (2026-07-23). */
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

/* Keep the visible pill's own subtle, neutral elevation (no colored band). */
.t7-nav .site-bottom-nav-bar {
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* NOTE: this skin previously ported the mockup's "Animated Border Tracer"
   (`.t7-nav.site-bottom-nav::before` + `@keyframes t7-spinBorder`) — a thin
   rotating conic-gradient meant to trace the edge of the mockup's small,
   pill-shaped nav. On the real full-width `.site-bottom-nav` (100vw wide,
   auto-height) that same gradient rendered as a giant yellow/orange band
   across the bottom of every page instead of a subtle border tracer, so it
   has been removed entirely (2026-07-23). The dark-glass background +
   red box-shadow above already give the bar its on-theme look without it. */

/* Real markup (base.html ~line 851): the inner row is `.site-bottom-nav-bar`
   (id siteBottomNavBar) and each link/button is `.site-bottom-nav-item` —
   NOT `.nav-inner`/`.nav-item`, which don't exist anywhere in the DOM. */
.t7-nav .site-bottom-nav-bar {
    background: #0d0000;
}

.t7-nav .site-bottom-nav-item {
    color: #888;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 20px;
}

.t7-nav .site-bottom-nav-item i {
    color: inherit;
}

.t7-nav .site-bottom-nav-item:hover,
.t7-nav .site-bottom-nav-item.active {
    color: #fff;
    background: rgba(255, 69, 0, 0.2);
    text-shadow: 0 0 10px var(--fire-orange);
    transform: translateY(-3px);
    box-shadow: 0 -5px 15px rgba(255, 0, 0, 0.4);
}

.t7-nav .site-bottom-nav-item.active i {
    color: var(--fire-yellow);
}

/* Responsive tweaks */
@media (max-width: 1000px) {
    .t7-boss-status .boss-split-grid { grid-template-columns: 1fr; }
}

/* ================================================================= */
/* T7 skin: existing Live Boss Status module (markup/JS unchanged)   */
/*                                                                   */
/* This restyles the REAL `.hero-boss-*` classes rendered by         */
/* `dreamcoin_web/templates/_homepage_boss_section.html` and defined */
/* in `index.html`'s `extra_css` block + homepage-compact-boss.css.  */
/* We do NOT touch either of those files — this is CSS-only, purely  */
/* additive, and token-driven off the :root T7 tokens above.         */
/*                                                                   */
/* Cascade note: base.html loads this stylesheet BEFORE the page's   */
/* `extra_css` block (index.html's inline <style> + the compact-boss */
/* stylesheet), so same-specificity rules there would otherwise      */
/* shadow this one. `!important` is used on the color/background/    */
/* border properties being re-skinned (matching the existing         */
/* convention in homepage-compact-boss.css) so the T7 fire/glass      */
/* look actually wins instead of being silently overridden.          */
/* ================================================================= */

/* Section shell */
.hero-boss-status {
    background: var(--boss-bg) !important;
    border: 1px solid var(--boss-border) !important;
    min-width: 0;
    overflow: hidden;
}

.hero-boss-outer-heading h2 {
    color: var(--fire-yellow) !important;
    text-shadow: 0 0 15px var(--fire-orange);
}

/* Server tab strip (PVE | PVE2 | PVP) */
.hero-boss-server-tab {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    color: #f5e6c8 !important;
    min-width: 0;
    overflow: hidden;
}

.hero-boss-server-tab:hover {
    border-color: var(--fire-orange) !important;
    color: #fff !important;
}

.hero-boss-server-tab.is-active {
    background: linear-gradient(180deg, var(--fire-orange), var(--fire-red)) !important;
    border-color: var(--fire-yellow) !important;
    color: #fff !important;
    box-shadow: 0 0 14px var(--fire-orange);
}

.hero-boss-server-tabs-maplink {
    color: var(--fire-yellow) !important;
}

/* Boss card + variants (story / raid / upcoming / server-empty) */
.hero-boss-card,
.hero-boss-empty {
    background: var(--boss-bg) !important;
    border: 1px solid var(--boss-border) !important;
    min-width: 0;
    overflow: hidden;
}

.hero-boss-card-story {
    background: linear-gradient(180deg, rgba(255,0,0,0.16) 0%, var(--boss-bg) 100%) !important;
    border-color: var(--fire-red) !important;
}

.hero-boss-card-raid {
    background: linear-gradient(180deg, rgba(255,69,0,0.12) 0%, var(--boss-bg) 100%) !important;
    border-color: var(--boss-border) !important;
}

.hero-boss-card-upcoming {
    border-color: var(--glass-border) !important;
}

.hero-boss-card-server-empty {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
}

.hero-boss-preview-column {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    min-width: 0;
    overflow: hidden;
}

/* Badges */
.hero-boss-badge-story {
    background: rgba(255,0,0,0.18) !important;
    border-color: var(--fire-red) !important;
    color: #ffe1e1 !important;
}

.hero-boss-badge-raid {
    background: rgba(255,69,0,0.16) !important;
    border-color: var(--fire-orange) !important;
    color: var(--fire-yellow) !important;
}

.hero-boss-badge-upcoming {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
    color: var(--fire-yellow) !important;
}

/* Featured item reward showcase + chips */
.hero-boss-drop-showcase {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    min-width: 0;
    overflow: hidden;
}

.hero-boss-drop-card {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    min-width: 0;
    overflow: hidden;
}

.hero-boss-drop-thumb {
    background: var(--boss-bg) !important;
    border: 1px solid var(--boss-border) !important;
}

.hero-boss-drop-chip {
    background: rgba(255,100,0,0.12) !important;
    border: 1px solid var(--boss-border) !important;
    color: var(--fire-yellow) !important;
}

/* Minimized "next boss" preview bar (no active boss, one queued) */
.hero-boss-status-mini {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    min-width: 0;
    overflow: hidden;
}

.hero-boss-mini-bar-icon {
    background: rgba(255,69,0,0.22) !important;
    color: var(--fire-yellow) !important;
}

.hero-boss-mini-bar-countdown {
    color: var(--fire-yellow) !important;
}

.hero-boss-mini-bar-chip {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
}

/* ================================================================= */
/* GLOBAL EMBERS / SPARKS CANVAS                                     */
/* ================================================================= */
/* Full-viewport canvas that drifts glowing embers upward behind page
   content (JS in static/js/t7-sparks.js). It sits ABOVE the fixed
   background stack (#siteBgStack is z-index:0) so sparks are visible over
   the dark background, but BELOW all content/nav/ticker (main content is
   position:relative and the shell/ticker/nav carry their own higher
   z-indexes), so it can never overlap or block anything. pointer-events
   are disabled so it is purely decorative. */
#spark-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    /* z-index:0 (NOT 1): as a positioned z-index:0 element it composites in the
       root step-6 group in TREE ORDER — painted AFTER #siteBgStack (also
       z-index:0, and which contains the .site-bg-overlay scrim) so embers draw
       ABOVE the background image + overlay, but BEFORE .main-content/.footer
       (positioned, later in the DOM) so embers stay BEHIND all page content and
       nav. Final stack: bg image -> overlay -> sparks -> content.
       (z-index:1 previously put the canvas above content, painting embers over
       text; a stacking-context bump on .main-content was rejected because it
       would trap in-content modals below the fixed bottom nav.) */
    z-index: 0;
}
/* The footer is position:static by default, so it would paint in the in-flow
   (pre-step-6) phase and end up UNDER the z-index:0 spark canvas. Make it a
   positioned, z-index:auto box so tree order lifts it above the embers WITHOUT
   creating a stacking context (which would trap any high-z children). */
.footer {
    position: relative;
}
/* NOTE: no prefers-reduced-motion { display:none } here — the ambient embers
   are a deliberately gentle, decorative effect the owner wants visible. Many
   environments (e.g. Windows Server / "best performance") report reduce-motion
   by default, which would otherwise hide the canvas entirely. We scope the
   exemption to this one purely-decorative, pointer-events:none, low-particle
   drift; all other motion in the app still respects reduce-motion. The JS
   (static/js/t7-sparks.js) keeps it cheap: capped particle count, single rAF
   loop, and it pauses when the tab is hidden. */

/* ================================================================= */
/* T7 SKIN: LIVE-ACTIVITY TICKER + RECENT-DONORS MARQUEE  (Task 3)   */
/*                                                                   */
/* Restyle-only overrides of the global header ticker (blue defaults)*/
/* and donor marquee (purple defaults) defined in mobile-bottom-nav  */
/* .css. t7-theme.css loads AFTER that file, so these same/lower-     */
/* specificity rules win by source order. Content/JS/data wiring are */
/* untouched — colors/backgrounds only, all token- or rgba-driven.   */
/* ================================================================= */
.site-ticker-shell {
    background:
        linear-gradient(90deg, rgba(12, 2, 2, 0.98), rgba(24, 6, 2, 0.96) 40%, rgba(12, 2, 2, 0.98)),
        radial-gradient(circle at top left, rgba(255, 69, 0, 0.16), transparent 44%) !important;
    border-bottom: 1px solid var(--glass-border) !important;
}
.ticker-brand-link {
    color: #ffe9c7;
}
.ticker-brand-link img {
    filter: drop-shadow(0 0 12px rgba(255, 140, 0, 0.35));
}
.site-ticker-constants {
    border-left: 1px solid var(--glass-border);
}
.site-ticker-item {
    color: #f3e3c6;
}
.site-ticker-item strong {
    color: #fff3d6;
}
.site-ticker-meta {
    color: rgba(245, 227, 198, 0.7);
}
.site-ticker-dot {
    background: linear-gradient(135deg, var(--fire-red), var(--fire-orange)) !important;
    box-shadow: 0 0 12px rgba(255, 100, 0, 0.4) !important;
}

.site-donor-strip {
    background:
        linear-gradient(90deg, rgba(20, 4, 2, 0.94), rgba(30, 8, 2, 0.94) 60%, rgba(20, 4, 2, 0.94)),
        radial-gradient(circle at top left, rgba(255, 215, 0, 0.16), transparent 46%) !important;
    border-bottom: 1px solid var(--glass-border) !important;
}

/* ================================================================= */
/* T7 SKIN: MORE MENU DRAWER  (Task 4)                               */
/*                                                                   */
/* Restyle #siteMoreDrawer (and the shared .site-nav-drawer shell)   */
/* from the blue/slate + purple defaults to the T7 dark-glass +      */
/* fire/gold palette. Structure, links, and behavior are unchanged.  */
/* Loads after mobile-bottom-nav.css, so equal-specificity overrides */
/* win by source order.                                              */
/* ================================================================= */

/* Drawer shell */
.site-nav-drawer {
    background:
        radial-gradient(circle at top right, rgba(255, 69, 0, 0.14), transparent 32%),
        linear-gradient(180deg, rgba(14, 2, 2, 0.98), rgba(9, 1, 1, 0.98)) !important;
    border: 1px solid var(--glass-border) !important;
}
.site-drawer-handle-bar {
    background: rgba(255, 200, 90, 0.4);
}
.site-drawer-kicker {
    color: var(--gold-light);
}
.site-drawer-stat {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
}
.site-drawer-stat-label {
    color: rgba(245, 227, 198, 0.72);
}

/* Section titles: recolor the per-section accent hues (cyan/violet/emerald/
   rose/blue in the defaults) into the fire/gold family so every divider
   reads on-theme while staying visually distinct. */
.site-drawer-section-title { color: #f6e7c8; }
.site-drawer-section-title.is-section-account { color: var(--fire-yellow); }
.site-drawer-section-title.is-section-markets { color: var(--gold-light); }
.site-drawer-section-title.is-section-commands { color: #ffb347; }
.site-drawer-section-title.is-section-trade { color: var(--fire-orange); }
.site-drawer-section-title.is-section-profile { color: var(--gold-light); }
.site-drawer-section-title.is-section-community { color: #ff7a4d; }
.site-drawer-section-title.is-section-quick { color: var(--fire-yellow); }
.site-drawer-section-title.is-section-explore { color: var(--fire-orange); }

/* Action rows (list-style links/buttons) */
.site-more-action {
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: #f1e6d2;
}
.site-more-action:hover,
.site-more-action:focus {
    background: rgba(35, 8, 2, 0.92);
    border-color: var(--fire-orange);
    color: #fff;
}
.site-more-action-icon {
    background: linear-gradient(160deg, rgba(255, 215, 0, 0.18), rgba(255, 69, 0, 0.1));
    color: var(--gold-light);
}
.site-more-action-subtitle {
    color: rgba(240, 224, 196, 0.7);
}

/* Grid cards */
.site-more-card {
    border: 1px solid var(--glass-border);
    background:
        linear-gradient(180deg, rgba(20, 4, 2, 0.85), rgba(14, 2, 2, 0.7)),
        radial-gradient(circle at top left, rgba(255, 69, 0, 0.12), transparent 44%);
    color: #f1e6d2;
}
.site-more-card:hover,
.site-more-card:focus {
    border-color: var(--fire-orange);
    color: #fff;
}
.site-more-card i { color: var(--gold-light); }
.site-more-card span { color: rgba(240, 224, 196, 0.7); }

/* Per-section card icon accents (defaults tint these cyan/violet/emerald/
   rose). Re-tint to warm tokens to match. :where() keeps specificity at 0
   in the default file, so a plain rule here overrides it. */
.site-more-grid.is-section-trade .site-more-card i,
.site-more-grid.is-section-profile .site-more-card i,
.site-more-grid.is-section-community .site-more-card i,
.site-more-grid.is-section-explore .site-more-card i {
    color: var(--gold-light);
}

/* Balance strip cards (DC / PC / RC) — dark glass base; keep the per-type
   border accents from the default file so the three stay distinguishable. */
.site-more-balance-card {
    background: linear-gradient(180deg, rgba(20, 4, 2, 0.82), rgba(30, 8, 2, 0.6));
}

/* Command Center buttons */
.site-more-command-btn {
    background:
        linear-gradient(180deg, rgba(20, 4, 2, 0.86), rgba(14, 2, 2, 0.7)),
        radial-gradient(circle at top left, rgba(255, 69, 0, 0.12), transparent 44%) !important;
    border-color: var(--glass-border) !important;
}
.site-more-command-btn .command-btn-icon {
    background: linear-gradient(160deg, rgba(255, 215, 0, 0.16), rgba(255, 69, 0, 0.1));
}
.site-more-command-btn .command-btn-icon i {
    color: var(--gold-light);
}
.site-more-command-btn .command-btn-cooldown {
    color: rgba(240, 224, 196, 0.7);
}
.site-more-command-summary {
    border-color: var(--glass-border);
}

/* Markets: the "Item" card is already amber/fire; retint the "Pal" card
   from indigo/purple to a deep ember/crimson so both stay on-theme yet
   distinct. */
.site-more-market-card.is-pal {
    background:
        linear-gradient(160deg, rgba(60, 8, 4, 0.96), rgba(120, 20, 6, 0.82)),
        radial-gradient(circle at top left, rgba(255, 100, 0, 0.24), transparent 46%) !important;
    border-color: rgba(255, 100, 0, 0.34) !important;
}
.site-more-market-card.is-pal:hover,
.site-more-market-card.is-pal:focus {
    border-color: var(--fire-orange) !important;
}

/* ========================================================================= */
/* SITE FOOTER — T7 ember/glass restyle + fixed-bottom-nav clearance          */
/* ========================================================================= */
/* The site footer (.footer > .footer-content + .footer-bottom, rendered in
   base.html ~line 1044) was the OLD flat dark-navy block from style.css
   (`background: var(--dark-bg); border-top: 2px solid var(--primary-color)`),
   which clashed with the T7 fire theme AND sat partly UNDER the fixed
   `.site-bottom-nav`. t7-theme.css loads AFTER both style.css and
   mobile-bottom-nav.css, so these same-specificity `.footer*` rules win by
   source order — no `!important` needed on the layout properties.

   Two fixes here:
   1. OPAQUE on-theme skin. The site paints a bright fixed fire background
      (#siteBgStack) behind everything, so the footer MUST be fully opaque or
      that background bleeds through. Base fill is a solid ember gradient
      (no alpha); the warm accents (top rule, ember glow) are layered ON TOP of
      that opaque base, so nothing shows through.
   2. FIXED-NAV CLEARANCE. `.site-bottom-nav` is `position: fixed; bottom: 0`
      and its designed height (bar + status row + minimize tab + margin) is
      encoded in the responsive `--site-shell-bottom` token (110px desktop,
      96px @768, 120px @560 — see mobile-bottom-nav.css). `body` already carries
      `padding-bottom: var(--site-shell-bottom)` so general page content clears
      the nav, but the footer is the LAST element and with no extra space its
      bottom edge lands flush against the nav's top (the reported "covered by
      nav" symptom). We give the footer its OWN bottom clearance keyed to the
      SAME token (so it tracks every breakpoint automatically) plus a margin,
      letting the user scroll DOWN PAST the footer with the nav no longer
      overlapping it. This supersedes (does not stack a new conflicting value
      onto) the existing `.footer { margin-bottom }` in mobile-bottom-nav.css. */
.footer {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(255, 69, 0, 0.10), transparent 55%),
        linear-gradient(180deg, #140303 0%, #0c0100 60%, #080000 100%);
    border-top: 1px solid var(--glass-border);
    box-shadow:
        0 -1px 0 rgba(255, 69, 0, 0.25),
        0 -14px 40px rgba(0, 0, 0, 0.55);
    margin-top: 3rem;
    /* Clear the fixed bottom nav: nav-height (--site-shell-bottom) + safe area
       + breathing room, so the footer is fully visible above the nav. */
    margin-bottom: calc(var(--site-shell-bottom) + var(--site-safe-area-bottom, 0px) + 1.5rem);
}

/* Thin animated-feel gold hairline sitting on the top edge of the ember base. */
.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--gold-dark) 20%,
        var(--fire-orange) 50%,
        var(--gold-dark) 80%,
        transparent 100%);
    opacity: 0.7;
    pointer-events: none;
}

.footer .footer-content {
    min-width: 0;
    position: relative;
    z-index: 1;
}

.footer .footer-section {
    min-width: 0;
    overflow: hidden;
}

.footer .footer-section h3 {
    color: var(--fire-yellow);
    text-shadow: 0 0 12px rgba(255, 69, 0, 0.35);
}

.footer .footer-section p {
    color: rgba(240, 224, 196, 0.72);
}

.footer .footer-section a,
.footer .footer-support-section ul li a {
    color: rgba(240, 224, 196, 0.78);
    transition: color 0.2s ease, text-shadow 0.2s ease;
    word-break: break-word;
}

.footer .footer-section a:hover,
.footer .footer-support-section ul li a:hover,
.footer .footer-support-section ul li a:focus {
    color: var(--gold-light);
    text-shadow: 0 0 10px rgba(255, 69, 0, 0.4);
}

/* Bottom strip: darker opaque band with a subtle warm divider. */
.footer .footer-bottom {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
    background: #060000;
    border-top: 1px solid rgba(255, 215, 0, 0.12);
    color: rgba(226, 210, 180, 0.6);
}

.footer .footer-bottom .security-notice {
    color: var(--fire-yellow);
    opacity: 0.82;
}

.footer .footer-bottom .powered-by-notice {
    color: rgba(226, 210, 180, 0.5);
}

.footer .footer-bottom .powered-by-notice a {
    color: rgba(240, 224, 196, 0.7);
    text-decoration: none;
}

.footer .footer-bottom .powered-by-notice a:hover {
    color: var(--gold-light);
}

/* ================================================================= */
/* T7 SKIN: BOTTOM STATUS ROW (balances / daily / WTP / giveaway)     */
/*                                                                    */
/* The status row directly above the bottom nav (`#siteStatusRow`,     */
/* `.site-status-row`) and its chips (`.sr-*`) shipped the OLD navy/    */
/* slate + blue-accent palette from mobile-bottom-nav.css: a navy       */
/* gradient container, blue generic hover borders, a cyan WTP chip, a   */
/* purple PC chip, and a blue giveaway "entries" pill + focus ring.     */
/* Reskin to the T7 dark-glass fire/gold family so it matches the       */
/* already-updated bottom nav below it. t7-theme.css loads AFTER        */
/* mobile-bottom-nav.css, so these equal-specificity rules win by       */
/* source order (the media-query overrides there only touch spacing,    */
/* not color/background) — no !important needed. Restyle-only: content, */
/* links, JS hooks (ids/classes), and layout are all untouched          */
/* (colors/backgrounds only). CSS-only -> live on a browser refresh,    */
/* no Flask restart. The green balance-flash + giveaway live/entered    */
/* state colors are intentionally left as-is (success signalling).      */
/* ================================================================= */

/* Container pill: navy gradient + slate border -> ember dark-glass. */
.site-status-row {
    background:
        linear-gradient(180deg, rgba(20, 4, 2, 0.9), rgba(30, 8, 2, 0.82));
    border: 1px solid var(--glass-border);
}

/* Shared chip base + generic (blue) hover -> warm glass + fire accent. */
.sr-chip {
    background: rgba(255, 220, 150, 0.05);
    color: #f1e6d2;
}
.sr-chip:hover {
    border-color: var(--fire-orange);
    background: rgba(255, 120, 30, 0.12);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Balance/action divider: slate hairline -> warm glass-border. */
.sr-balance-chip + .sr-reminder-chip,
.sr-balance-chip + .sr-giveaway-chip {
    border-left: 1px solid var(--glass-border);
}

/* Premium (PC) chip: retint the light-purple identity toward gold so
   the three balance chips read as one warm set beside the fire nav. */
.sr-premium { color: #ffe9c7; }
.sr-premium:hover { border-color: var(--fire-orange); background: rgba(255, 120, 30, 0.12); }
.sr-premium .sr-balance-label { color: rgba(255, 233, 199, 0.6); }

/* WTP chip: cyan/blue -> ember orange. */
.sr-wtp-chip {
    border-color: var(--boss-border);
    background: rgba(255, 69, 0, 0.08);
}
.sr-wtp-chip:hover {
    border-color: var(--fire-orange);
    background: rgba(255, 69, 0, 0.16);
}
.sr-wtp-chip i { color: var(--fire-orange); }
.sr-wtp-chip span { color: var(--fire-yellow); }

/* Giveaway: blue "entries" pill + blue focus ring -> gold. */
.sr-ga-entries {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid var(--glass-border);
    color: var(--fire-yellow);
}
.sr-giveaway-btn:focus-visible {
    outline: 2px solid rgba(255, 170, 0, 0.75);
}

/* ================================================================= */
/* HOMEPAGE: fill the viewport so the footer sits below the fold      */
/* ================================================================= */
/* On the logged-in homepage the content is short, so the footer was   */
/* visible in the initial viewport. base.html tags the homepage <body> */
/* with `is-homepage` (the `index` route only). Give the homepage's    */
/* `.main-content` a MIN height that fills the viewport below the fixed */
/* header/ticker (`--site-shell-top`), so short content expands the     */
/* main area and pushes the footer below the fold — the user must       */
/* scroll to reach it, with a clear empty gap above it. Min height only:*/
/* tall pages keep their natural height and scroll normally. Scoped to  */
/* `body.is-homepage` so no other page is affected; its specificity     */
/* (0,2,1) beats index.html's inline `.main-content { min-height: auto }`. */
/* The footer's own margin-bottom nav-clearance (defined above) is       */
/* preserved. The `is-homepage` body class is a base.html markup change  */
/* -> needs a Flask restart to render; this CSS itself is live on a      */
/* browser refresh. dvh (with a vh fallback) tracks mobile browser chrome. */
/* ================================================================= */
body.is-homepage .main-content {
    min-height: calc(100vh - var(--site-shell-top));
    min-height: calc(100dvh - var(--site-shell-top));
}