/* ============================================================================
   Chassaka — "Home Scene" theme
   ============================================================================
   Color palette extracted from the home background image
   (src/main/resources/static/images/Chassaka_Home.png), a night fantasy scene:

     · Deep midnight-navy sky & shadows   #040827-#080818
     · Violet-navy edge tones             #170d3c, #320b48
     · Torch / window gold                #f8b818, #fcc41c, #f8c818
     · Warm ember orange-red              #f84828, #fc4c2c
     · Castle pink-magenta glow           #cc146c (used as a sparing accent)
     · Muted teal undertone               #0e5266

   The theme is opt-in via  <html data-theme="castle">  and layers on top of
   app.css. It overrides the shared design tokens so every component re-themes
   automatically, then adds component styling for the explicitly requested
   surfaces: BUTTONS, the NAVBAR, and the CHAT BORDERS.
   ========================================================================== */

/* ---- 1. Design tokens -------------------------------------------------- */
html[data-theme="castle"] {
    /* Surfaces */
    --bg: #080c22;                    /* midnight navy (night sky) */
    --panel: #141730;                 /* deep violet-navy */
    --panel-border: #2b3352;          /* navy edge with a purple cast */
    --nav: #04081c;                   /* darkest navy for the app bar */

    /* Type */
    --text: #ece6f2;                  /* soft periwinkle white (moonlight) */
    --muted: #9b94ad;                 /* muted lavender-gray */
    --link-hover: #ffd489;            /* warm candle-gold link hover */

    /* Accents */
    --accent: #f2b33d;                /* torch gold — primary accent */
    --accent-hover: #d8952a;          /* deeper amber for hover/focus */
    --danger: #e05a41;                /* ember red-orange */
    --success: #4fd0be;               /* muted teal from the scene */

    /* Leaderboard podium — torch gold, moonlit silver, warm bronze */
    --lb-gold: #f8b818;
    --lb-silver: #cfd6e6;
    --lb-bronze: #c8763a;
    --lb-gold-rgb: 248, 184, 24;
    --lb-silver-rgb: 207, 214, 230;
    --lb-bronze-rgb: 200, 118, 58;

    /* Derived tokens */
    --accent-rgb: 244, 181, 63;
    --danger-rgb: 224, 90, 65;
    --overlay-rgb: 6, 10, 26;

    /* Board states */
    --selected: rgba(var(--accent-rgb), 0.55);
    --selected-edge: rgba(244, 190, 90, 0.4);
    --last-move: rgba(255, 216, 90, 0.35);
    --check: rgba(var(--danger-rgb), 0.6);

    /* Panels, surfaces & overlays */
    --input-bg: #0e1428;              /* chat log + form fields */
    --auth-bg: rgba(16, 19, 40, 0.9);
    --panel-scene-bg: rgba(16, 19, 40, 0.85);
    --toast-bg: #1b2138;
    --banner-bg: #1d2338;
    --board-frame: #060a1c;
    --block-border: rgba(43, 51, 82, 0.9);
    --guest-badge-text: #ffe9a8;
    --photo-frame-a: #2b3352;
    --photo-frame-b: #12162c;
}

/* ---- 2. BUTTONS -------------------------------------------------------- */

/* Primary action buttons are torch-gold with a dark navy label. The drop
   shadows reuse the scene's pixel-style "raised tile" look already used by
   the sound/music controls. */
html[data-theme="castle"] .btn-primary {
    --bs-btn-color: #0b1024;
    --bs-btn-hover-color: #0b1024;
    --bs-btn-active-color: #0b1024;
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: #f7c052;
    --bs-btn-hover-border-color: #f7c052;
    --bs-btn-active-bg: var(--accent-hover);
    --bs-btn-active-border-color: var(--accent-hover);
    --bs-btn-disabled-bg: var(--accent);
    --bs-btn-disabled-border-color: var(--accent);
    --bs-btn-focus-shadow-rgb: var(--accent-rgb);
    box-shadow: 0 3px 0 rgba(var(--overlay-rgb), 0.45);
}

html[data-theme="castle"] .btn-primary:active {
    box-shadow: 0 1px 0 rgba(var(--overlay-rgb), 0.45);
    transform: translateY(1px);
}

/* "Play as Guest" — ghost button outlined in torch gold */
html[data-theme="castle"] .btn-guest {
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--text);
    box-shadow: 0 3px 0 rgba(var(--overlay-rgb), 0.35);
}

html[data-theme="castle"] .btn-guest:hover,
html[data-theme="castle"] .btn-guest:focus {
    background: rgba(var(--accent-rgb), 0.15);
    border-color: var(--accent);
    color: var(--text);
}

html[data-theme="castle"] .btn-guest:active {
    box-shadow: 0 1px 0 rgba(var(--overlay-rgb), 0.35);
    transform: translateY(1px);
}

/* Quiet neutral buttons (e.g. "Lobby") — navy panel chip */
html[data-theme="castle"] .btn-secondary {
    --bs-btn-color: var(--text);
    --bs-btn-bg: var(--panel);
    --bs-btn-border-color: var(--panel-border);
    --bs-btn-hover-bg: #1a2040;
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-border-color: var(--panel-border);
    --bs-btn-active-bg: #1a2040;
    --bs-btn-active-color: var(--text);
    --bs-btn-active-border-color: var(--panel-border);
    --bs-btn-focus-shadow-rgb: var(--accent-rgb);
}

/* Neutral outline buttons (logout, keep games, decline) */
html[data-theme="castle"] .btn-outline-light {
    --bs-btn-color: var(--muted);
    --bs-btn-border-color: #55617e;
    --bs-btn-hover-bg: rgba(var(--accent-rgb), 0.12);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-bg: rgba(var(--accent-rgb), 0.18);
    --bs-btn-active-color: var(--text);
    --bs-btn-active-border-color: var(--accent);
    --bs-btn-focus-shadow-rgb: var(--accent-rgb);
}

/* Danger outline buttons (resign) — ember red */
html[data-theme="castle"] .btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: rgba(var(--danger-rgb), 0.15);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-bg: rgba(var(--danger-rgb), 0.2);
    --bs-btn-active-color: var(--text);
    --bs-btn-active-border-color: var(--danger);
    --bs-btn-focus-shadow-rgb: var(--danger-rgb);
}
/* ---- 3. NAVBAR -------------------------------------------------------- */

html[data-theme="castle"] .app-nav {
    background: var(--nav) !important;
    /* Gold seam separating the app bar from the scene */
    border-bottom: 2px solid rgba(var(--accent-rgb), 0.55);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 18px rgba(3, 6, 24, 0.55);
}

html[data-theme="castle"] .app-nav .navbar-brand {
    color: #f8e6b8; /* candle-gold brand */
}

html[data-theme="castle"] .app-nav .nav-link {
    color: #c7bfd6; /* muted lavender */
}

html[data-theme="castle"] .app-nav .nav-link:hover,
html[data-theme="castle"] .app-nav .nav-link:focus-visible {
    color: var(--accent);
    text-decoration: none;
    box-shadow: inset 0 -2px 0 rgba(var(--accent-rgb), 0.55);
}

html[data-theme="castle"] .app-nav .nav-link.active {
    color: var(--accent);
}

/* ---- 4. CHAT BORDERS --------------------------------------------------- */

/* Chat panel frame — lit with a soft gold halo so it reads as the
   "talking by torchlight" surface of the home scene. */
html[data-theme="castle"] .chat-panel {
    border: 1px solid rgba(var(--accent-rgb), 0.5);
    box-shadow:
        0 0 0 1px rgba(var(--accent-rgb), 0.12),
        0 16px 30px rgba(6, 10, 26, 0.6);
}

html[data-theme="castle"] .chat-log {
    background: var(--input-bg);
    border: 1px solid rgba(var(--accent-rgb), 0.35);
}

html[data-theme="castle"] .chat-form .form-control {
    border-color: rgba(var(--accent-rgb), 0.45);
}

html[data-theme="castle"] .chat-form .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.25);
}

/* ---- 5. Coherence touches --------------------------------------------- */

/* Login/register cards sit directly on the home image — match its palette */
html[data-theme="castle"] .auth-card {
    background: var(--auth-bg);
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    box-shadow:
        0 0 0 1px rgba(var(--accent-rgb), 0.12),
        0 12px 40px rgba(4, 8, 26, 0.55);
}

/* Computer-difficulty selection chips highlight in torch gold */
html[data-theme="castle"] .computer-diff-option.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
    background: rgba(var(--accent-rgb), 0.12);
}

/* Guest keep-history callout */
html[data-theme="castle"] .guest-history-gate {
    border: 1px dashed rgba(var(--accent-rgb), 0.45);
    background: rgba(var(--accent-rgb), 0.08);
}

/* Focus rings seen anywhere else on the page */
html[data-theme="castle"] .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.25);
}

html[data-theme="castle"] .feedback-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.2);
}

/* In-game side overlay: status banner follows the palette */
html[data-theme="castle"] .game-banner {
    background: var(--banner-bg);
    border: 1px solid rgba(var(--accent-rgb), 0.4);
}

/* ---- 6. LEADERBOARD ---------------------------------------------------- */

/* Hall of banners (PRD §9, §18, §31): the checkerboard study keeps its night
   palette, the frame picks up the torch-gold seam and the podium sprites glow
   in the scene's metals (--lb-gold / --lb-silver / --lb-bronze above). */
html[data-theme="castle"] .leaderboard-card {
    box-shadow:
        inset 0 0 0 2px rgba(var(--accent-rgb), 0.2),
        0 2px 0 rgba(3, 6, 24, 0.65);
}

html[data-theme="castle"] .leaderboard-header {
    border-bottom-color: rgba(var(--accent-rgb), 0.42);
}

html[data-theme="castle"] .leaderboard-crest {
    filter: drop-shadow(0 2px 0 rgba(3, 6, 24, 0.7));
}

html[data-theme="castle"] .leaderboard-state {
    border-color: rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--accent-rgb), 0.05);
}

html[data-theme="castle"] .lb-row-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
}