/* ==========================================================================
   Hank96 brand layer — navy and white
   ==========================================================================

   Almost all of the conversion now happens in the generator
   (scripts/build-theme.js), which rebuilds theme-hank.css / theme-sun.css /
   styles.css / tailwind.generated.css / forms-sun.css from the pristine
   upstream copies in scripts/upstream/. A fix there survives the next pull; a
   fix here does not. So this file is deliberately small, and every rule in it
   exists because the generator cannot reach the thing it is fixing.

   Load order at runtime, last wins:

     1  tailwind.generated.css        generated
     2  styles.css                    generated
     3  theme-hank.css                generated   <- removed at boot, see 6
     4  brand-hank.css                THIS FILE
     5  forms-sun.css                 generated
     6  <style> in index.html         not ours
     7  theme-sun.css                 generated, injected by js/config.js,
                                      which first deletes the <link> at 3
     8  <style id="dynamic-site-theme">  not ours — built by js/config.js from
                                      the SITE RECORD's primary/secondary/
                                      accent colours, then inline styles on
                                      individual elements

   So this file cannot out-order 6, 7 or 8; where it has to beat them it wins
   on specificity instead, and says so at each rule. 7 is generated and navy,
   so nothing here fights it.

   What is NOT fixable from CSS, and is reported rather than patched:
   js/config.js writes `style="...!important"` straight onto <body>,
   #app-header and #bottom-nav. An element's inline !important beats every
   author stylesheet; those need the site record (and one hard-coded grey in
   config.js) changed.
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1. palette                                                                  */
/* -------------------------------------------------------------------------- */
/* These mirror what the generator produces, so the page is already navy before
   the injected theme arrives and there is no flash. Change them together. */
:root {
    /* surface scale — the upstream slate steps moved to hue 212 */
    --hank-chrome:  #0a1420;   /* header, bottom nav, menu chrome   */
    --hank-page:    #101e2d;   /* page                              */
    --hank-card:    #142437;   /* card                              */
    --hank-raised:  #172a40;   /* raised / hovered card             */
    --hank-line:    #1e3357;   /* divider                           */

    /* emphasis scale — white and ice carry emphasis, steel is the secondary */
    --hank-white:   #ffffff;
    --hank-ice:     #c6d8ec;
    --hank-steel:   #5b8ac4;
    --hank-slate:   #8fa6c0;

    /* the volcanic blacks the base theme names */
    --vol-black:    #050a0f;
    --vol-dark:     #0a1420;
    --vol-obsidian: #0b1626;
    --vol-charcoal: #142437;
    --vol-ember:    #172a40;

    /* the two lava reds — decoration in the source, not danger */
    --lava-deep: #16233d;
    --lava-red:  #1e3357;

    /* every gold the base theme names */
    --lava-core:   #5b8ac4;
    --lava-hot:    #7ba3d4;
    --lava-orange: #a9c3de;
    --lava-bright: #c6d8ec;
    --lava-yellow: #c6d8ec;
    --lava-white:  #ffffff;

    --glow-ember:   rgba(91, 138, 196, .14);
    --glow-lava:    rgba(198, 216, 236, .22);
    --glow-fire:    rgba(91, 138, 196, .34);
    --glow-magma:   rgba(198, 216, 236, .50);
    --glow-inferno: rgba(255, 255, 255, .62);

    --border-lava:  rgba(91, 138, 196, .26);
    --border-ember: rgba(198, 216, 236, .15);
    --border-crack: rgba(91, 138, 196, .10);

    --grad-lava:          linear-gradient(135deg, #5b8ac4 0%, #c6d8ec 50%, #ffffff 100%);
    --grad-magma:         linear-gradient(135deg, #16233d 0%, #1e3357 40%, #5b8ac4 100%);
    --grad-obsidian:      linear-gradient(135deg, #050a0f 0%, #142437 50%, #0a1420 100%);
    --grad-molten-border: linear-gradient(90deg, #35558a, #5b8ac4, #c6d8ec, #5b8ac4, #35558a);

    --sun-slate-page:      #101e2d;
    --sun-slate-card:      #142437;
    --sun-slate-card-soft: #172a40;

    /* Text. Secondary and muted stay neutral on purpose: the surface is
       already blue, and tinting the type as well reads as a colour cast. */
    --text-secondary: #c8cdd6;
    --text-muted:     #8a909c;

    /* --text-accent is what ~110 `text-yellow-*` / `text-amber-*` usages
       across the JS views collapse onto, and one value for all of them is
       why every emphasised word on the site was the same pale blue. The
       full argument, and the four ranks that now split it, are at the foot
       of theme-sun.css under "THE TEXT ACCENT". Raised from #c6d8ec so that
       emphasis reads as emphasis; the demotions that give it something to
       contrast against live in that block.

       IT HAS TO BE SET HERE. The load-order note at the top of this file is
       wrong on one point: index.html already carries the #site-theme-css
       <link> at line 34, BEFORE this file at line 38, and config.js finds
       the href already correct and leaves it there rather than re-appending
       it. So theme-sun.css loads FOURTH, not last, and this file out-orders
       it for any plain :root declaration. */
    --text-accent:    #dde7f4;

    /* The ranks --text-accent splits into. Consumed by theme-sun.css. */
    --accent-money: #ffffff;   /* a figure is read, not signalled          */
    --accent-meta:  #8ba1be;   /* demoted: decoration, waiting, "View All" */
    --accent-vip:   #b79df9;   /* the VIP crown's violet, outside the panel*/
    --accent-block: #ff8a80;   /* a notice that BLOCKS the player          */
}

/* -------------------------------------------------------------------------- */
/* 2. surfaces the generator cannot reach                                      */
/* -------------------------------------------------------------------------- */
/* index.html's own <style> paints html/body/#side-menu with the upstream
   greys and !important, and it loads after this file. The only way past it is
   specificity, so each selector below is one step heavier than the one it is
   answering — html:root beats html, div#side-menu beats #side-menu. */
html:root,
html:root body,
html:root #app-layout,
html:root #scroll-content,
html:root #app-loading { background-color: var(--hank-page) !important; }

html body div#side-menu,
html body div#side-menu .side-menu-header,
html body div#side-menu .side-menu-footer {
    background-color: var(--hank-chrome) !important;
    background-image: none !important;
}
html body div#side-menu-overlay { background-color: rgba(5, 10, 15, .55) !important; }

/* Classes written as Tailwind arbitrary values inside JS template strings.
   The value IS the class name, so no token reaches them, and the Tailwind
   build never emitted a rule for them either. */
.bg-\[\#1a1a1a\]   { background-color: var(--hank-card) !important; }
.bg-\[\#2a2a2a\]   { background-color: var(--hank-raised) !important; }
.bg-\[\#111\],
.bg-\[\#0d0d0d\],
.bg-\[\#0f0010\],
.bg-\[\#03070c\]    { background-color: var(--hank-chrome) !important; }
.bg-\[\#0a0a0a\],
.bg-\[\#050505\]    { background-color: #070d16 !important; }
.border-\[\#1a1a1a\] { border-color: var(--hank-raised) !important; }
/* Black at 40% over artwork goes muddy on navy. */
.bg-black\/40       { background-color: rgba(5, 10, 15, .55) !important; }

/* The other brand's coin mark. */
#site-logo-img, .site-coin-mark { display: none !important; }

/* -------------------------------------------------------------------------- */
/* 3. the runtime palette                                                      */
/* -------------------------------------------------------------------------- */
/* js/config.js applySiteTheme() writes these onto :root at boot from the site
   record, which is still the other brand's gold. An inline custom property
   beats a stylesheet, so these need !important. When the site record is navy
   this block becomes a no-op rather than a lie — the values match. */
:root {
    --theme-bg:        #101e2d !important;
    --primary-bg:      #101e2d !important;
    --theme-primary:   #c6d8ec !important;
    --theme-secondary: #5b8ac4 !important;
    --theme-accent:    #ffffff !important;
    --gold-primary:    #c6d8ec !important;
    --gold-light:      #ffffff !important;
    --gold-dark:       #5b8ac4 !important;
    --btn-gradient: linear-gradient(135deg, #c6d8ec 0%, #e7f0fa 45%, #ffffff 100%) !important;

    /* Live feed. Deposit stays green because green means money in; withdraw
       was gold, which is the one flash colour that has to move — it becomes
       ice so it still reads as "the other one" without reading as gold. */
    --feed-withdraw-rgb:  198, 216, 236 !important;
    --feed-withdraw-text: #c6d8ec !important;
}

/* The primary call to action is the one place the brief's "white" has to be
   literal, so it is an ice-to-white fill with a navy label. The converted
   theme still carries the source's `color: #fff` on .btn-gold and loads after
   this file, hence the :root. Measured: 13.9:1 against the darkest stop. */
:root .btn-primary,
:root .btn-gold,
:root [class*="btn-grad"] { color: #0b1626 !important; }

/* -------------------------------------------------------------------------- */
/* 4. <style id="dynamic-site-theme">                                          */
/* -------------------------------------------------------------------------- */
/* js/config.js builds this sheet from the site record's primary/secondary/
   accent and appends it last, so it wins on order however navy the
   stylesheets are. Each rule below answers one of its rules and carries
   exactly one extra :root to out-specify it.

   THIS WHOLE BLOCK SHOULD BE DELETED once the site record is navy. It is here
   because the record is not ours to change and the page is otherwise gold in
   the places people look first — the active tab in the bottom nav, every
   primary button, every input focus ring. */
:root .nav-item.active-nav .nav-icon {
    color: var(--hank-ice) !important;
    text-shadow: 0 5px 15px rgba(198, 216, 236, .35) !important;
}
:root .nav-item.active-nav span { color: var(--hank-ice) !important; }
:root .nav-indicator { background: var(--hank-ice) !important; }

:root .btn-gold {
    background: var(--btn-gradient) !important;
    color: #0b1626 !important;
    border-color: rgba(255, 255, 255, .55) !important;
    box-shadow: 0 4px 15px rgba(91, 138, 196, .30) !important;
}
/* The login / SMS buttons are painted by their own injected <style> in
   js/modals.js and js/views.js, in a mid-blue with a near-black label — 4.7:1,
   the tightest figure on the site, and a second, different-looking primary
   button. Same treatment as .btn-gold so there is one primary, at 13.9:1. */
:root .s96-auth-primary,
:root .svj-auth-primary,
:root .s96-auth-code-row button,
:root .svj-auth-code-row button {
    background: var(--btn-gradient) !important;
    color: #0b1626 !important;
    box-shadow: 0 8px 16px rgba(91, 138, 196, .22) !important;
}
:root .btn-neon {
    background: linear-gradient(90deg, #5b8ac4, #c6d8ec) !important;
    box-shadow: 0 0 10px rgba(91, 138, 196, .5) !important;
}
:root .live-tab.active {
    color: var(--hank-ice) !important;
    border-color: var(--hank-ice) !important;
}
:root .custom-input:focus {
    border-color: var(--hank-ice) !important;
    box-shadow: 0 0 10px rgba(198, 216, 236, .2) !important;
}
:root .deposit-method-btn {
    background: linear-gradient(90deg, rgba(91, 138, 196, .6), rgba(198, 216, 236, .6)) !important;
    border-color: var(--hank-steel) !important;
}
:root .bonus-card-glow          { border-color: rgba(91, 138, 196, .3) !important; }
:root .bonus-card-glow.can-claim {
    border-color: rgba(198, 216, 236, .6) !important;
    box-shadow: 0 0 15px rgba(198, 216, 236, .3), 0 0 30px rgba(198, 216, 236, .1) !important;
}
:root .bonus-card-glow::before {
    background: linear-gradient(90deg, transparent 0%, rgba(198, 216, 236, .8) 25%,
                #ffffff 50%, rgba(198, 216, 236, .8) 75%, transparent 100%) !important;
    background-size: 200% 100% !important;
}
:root .hot-game-card   { border-color: rgba(91, 138, 196, .5) !important; }
:root .promo-glow-card { border-color: rgba(91, 138, 196, .3) !important; }
:root .user-card-border-gradient {
    background: conic-gradient(from 0deg, transparent 0%, transparent 45%,
                rgba(198, 216, 236, .5) 50%, rgba(255, 255, 255, .5) 55%,
                transparent 60%, transparent 100%) !important;
}
:root .user-avatar-glow {
    background: conic-gradient(from 0deg, transparent, rgba(198, 216, 236, .5),
                rgba(255, 255, 255, .5), transparent) !important;
}

/* The same function also writes inline styles onto individual elements. Where
   it wrote them WITHOUT !important, a stylesheet !important still wins, so
   those are fixed here. The three it writes WITH !important cannot be reached
   from CSS at all and are listed at the top of this file as site-record work.

   The wordmark first: js writes `color:#FFD24A` straight onto the "96", and it
   is the single most brand-defining character on the page. */
:root #app-header span.text-lg.font-bold > span,
:root #side-menu span.font-bold > span,
:root #footer-brand-text > span { color: var(--hank-ice) !important; }

/* `[class*="border-purple-500"]` gets an inline gold borderColor on every
   element that still carries the pre-brand purple utility names — the games
   search field, the loading spinners. The spinner needs its transparent side
   back, or it is a ring rather than a spinner. */
:root [class*="border-purple-500"] { border-color: rgba(91, 138, 196, .4) !important; }
:root .border-t-transparent { border-top-color: transparent !important; }

/* .text-purple-400 is written inline WITH !important, so this only catches the
   screens the loop has not run over yet — worth having, not a fix. */
:root i.text-purple-400,
:root .text-purple-400 { color: var(--hank-steel); }

/* ------------------------------------------------------------------
   Home referral strip — azure, not gold
   theme-sun.css states the rates in Salamanca's #FFD24A. Hank96's accent
   is the same blue as the rest of its chrome.
   ------------------------------------------------------------------ */
.ref-num { color: var(--lava-bright, #c6d8ec); }
.ref-tile-bg { background: rgba(108, 161, 221, 0.10); }
.ref-sub { color: var(--hank-ice, #c6d8ec); }

/* The accruing instant-rebate amount — azure, like the rest of Hank96. */
.s96-rw-accrue b { color: var(--lava-bright, #c6d8ec); }