/* ============================================================================
   CHEESE NOIR — drop-in skin for all mini-games
   ----------------------------------------------------------------------------
   Reskins every player mini-game to the dark navy + gold "cheese noir" brand
   WITHOUT changing any markup or JS-referenced IDs. Purely visual.

   HOW IT HOOKS IN
   ---------------
   Every game wrapper id ends in "GameInterface" (simonGameInterface,
   flappyGameInterface, montyGameInterface, …). The attribute selector
   [id$="GameInterface"] targets all 59 at once, so this file leaves the
   join screen, question screen, scoreboard, and lobby completely untouched.

   INSTALL
   -------
   This file REPLACES static/css/minigames-theme.css (the old indigo/purple
   theme). Swap the <link> in the player template:

       <!-- remove -->
       <link rel="stylesheet" href="/static/css/minigames-theme.css?v={{ timestamp }}">
       <!-- add -->
       <link rel="stylesheet" href="/static/css/minigames-cheese-noir.css?v={{ timestamp }}">

   Load it AFTER theme.css / Bootstrap so these overrides win.
   No HTML and no game JS needs to change.
   ============================================================================ */

:root {
  --cn-noir:      #0b0a11;   /* deepest background */
  --cn-surface-1: #1a1724;   /* card top */
  --cn-surface-2: #110e1a;   /* card bottom */
  --cn-inset:     #0d0b14;   /* displays, tracks, wells */
  --cn-gold:      #f5c542;   /* THE primary accent */
  --cn-gold-2:    #e09600;   /* gold gradient end */
  --cn-gold-deep: #b45309;
  --cn-ink:       #f4efe2;   /* primary text on dark */
  --cn-ink-dim:   #cfc7b4;   /* secondary text */
  /* Caption/metadata text (used for .text-muted + input placeholders). Lightened from the
     original #837c6d — that only hit ~4.25:1 on the navy card (below the WCAG-AA 4.5 minimum
     for small text), which is why small ".small text-muted" captions like Fold-the-Wrapper's
     recipe line read as hard-to-see. #b5ad99 is ~7.9:1 — comfortably readable, same muted feel. */
  --cn-muted:     #b5ad99;   /* metadata / captions */
  --cn-line:      rgba(245,197,66,.20);   /* gold hairline */
  --cn-line-soft: rgba(255,255,255,.07);
  --cn-ok:        #2faa6a;   /* correct (semantic only) */
  --cn-ok-2:      #1f9d63;
  --cn-err:       #d8443c;   /* wrong (semantic only) */
  --cn-err-2:     #b3322b;
}

/* ====================================================================
   1. CARD SHELL — solid navy surface, gold edge, soft inner top-light
   Replaces every game's white/coloured Bootstrap card.
   ==================================================================== */
[id$="GameInterface"] > .card,
[id$="GameInterface"] .card {
  background: linear-gradient(180deg, var(--cn-surface-1), var(--cn-surface-2)) !important;
  border: 1px solid var(--cn-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05) !important;
  overflow: hidden;
  color: var(--cn-ink);
}

/* Header: kill the bright bg-dark / bg-warning / bg-success / bg-purple bars.
   One dark header, gold title, thin gold underline. */
[id$="GameInterface"] .card-header {
  background: transparent !important;
  color: var(--cn-gold) !important;
  border: none !important;
  border-bottom: 1px solid var(--cn-line) !important;
  padding: 12px 16px !important;
  font-weight: 800;
  letter-spacing: .4px;
}
[id$="GameInterface"] .card-header h5,
[id$="GameInterface"] .card-header h6,
[id$="GameInterface"] .card-header small {
  color: var(--cn-gold) !important;
  font-weight: 800;
  margin: 0;
}
[id$="GameInterface"] .card-body { padding: 16px !important; }

/* Default body copy + headings to ink (accent ids keep their own colour). */
[id$="GameInterface"] .card-body h1,
[id$="GameInterface"] .card-body h2,
[id$="GameInterface"] .card-body h3,
[id$="GameInterface"] .card-body h4,
[id$="GameInterface"] .card-body h5,
[id$="GameInterface"] .card-body h6,
[id$="GameInterface"] .card-body p,
[id$="GameInterface"] .lead { color: var(--cn-ink) !important; }
[id$="GameInterface"] .text-muted { color: var(--cn-muted) !important; }

/* ====================================================================
   2. BUTTONS — gold is the one primary; green/red stay semantic
   ==================================================================== */
[id$="GameInterface"] .btn {
  border-radius: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .3px;
  border: none;
}

/* PRIMARY ACTION → gold (covers btn-primary, btn-warning, .minigame-button) */
[id$="GameInterface"] .btn-primary,
[id$="GameInterface"] .btn-warning,
[id$="GameInterface"] .minigame-button {
  background: linear-gradient(135deg, var(--cn-gold), var(--cn-gold-2)) !important;
  color: #1a1206 !important;
  box-shadow: 0 6px 16px rgba(242,169,0,.32) !important;
}

/* CORRECT / GO → green (retuned deeper than Bootstrap) */
[id$="GameInterface"] .btn-success {
  background: linear-gradient(135deg, var(--cn-ok), var(--cn-ok-2)) !important;
  color: #06210f !important;
  box-shadow: 0 6px 16px rgba(31,157,99,.3) !important;
}

/* WRONG / STOP → red */
[id$="GameInterface"] .btn-danger {
  background: linear-gradient(135deg, #f06a5d, var(--cn-err)) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(210,59,59,.3) !important;
}

/* SECONDARY → dark ghost with gold hairline (btn-info, btn-secondary, light, all outlines) */
[id$="GameInterface"] .btn-info,
[id$="GameInterface"] .btn-secondary,
[id$="GameInterface"] .btn-light,
[id$="GameInterface"] .btn-outline-primary,
[id$="GameInterface"] .btn-outline-secondary,
[id$="GameInterface"] .btn-outline-light,
[id$="GameInterface"] .btn-outline-info {
  background: rgba(255,255,255,.06) !important;
  color: var(--cn-ink) !important;
  border: 1px solid var(--cn-line) !important;
  box-shadow: none !important;
}
[id$="GameInterface"] .btn:active { transform: translateY(1px); }
[id$="GameInterface"] .btn:disabled { opacity: .5; }

/* Speed Math / numeric keypad keys → raised slate faces, white ink. Matches the trivia numeric
   pad exactly (owner 2026-07-10) so the number pad looks the same in games and mini-games; the old
   5%-white wells were too dark to read against the panel. */
[id$="GameInterface"] .numeric-key {
  background: linear-gradient(180deg, #454556, #343442) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
/* Backspace = distinct warm-brick "delete" key, same as the trivia pad. */
[id$="GameInterface"] .numeric-key.backspace {
  background: linear-gradient(180deg, #6f4a44, #513532) !important;
  border-color: rgba(255,255,255,.24) !important;
}
[id$="GameInterface"] .numeric-key.submit {
  background: linear-gradient(135deg, var(--cn-gold), var(--cn-gold-2)) !important;
  color: #1a1206 !important;
  border: none !important;
}

/* ====================================================================
   3. INPUTS, DISPLAYS, PROGRESS
   ==================================================================== */
[id$="GameInterface"] .form-control,
[id$="GameInterface"] .form-select,
[id$="GameInterface"] .numeric-display {
  background: var(--cn-inset) !important;
  border: 1px solid var(--cn-line) !important;
  color: var(--cn-ink) !important;
  border-radius: 12px !important;
}
[id$="GameInterface"] .form-control::placeholder { color: var(--cn-muted) !important; }
[id$="GameInterface"] .progress {
  background: rgba(255,255,255,.08) !important;
  border-radius: 6px !important;
}
[id$="GameInterface"] .progress-bar {
  background: linear-gradient(90deg, var(--cn-gold), var(--cn-gold-2)) !important;
  color: #1a1206 !important;
}

/* ====================================================================
   4. RANGE SLIDERS — gold thumb on a dark track (shared arcade shell:
   Falling Cheese, Breakout, Catapult, …)
   ==================================================================== */
[id$="GameInterface"] input[type="range"] {
  -webkit-appearance: none; appearance: none;
  background: transparent;
}
[id$="GameInterface"] input[type="range"]::-webkit-slider-runnable-track {
  height: 16px; border-radius: 9px;
  background: var(--cn-inset);
  border: 1px solid var(--cn-line);
}
[id$="GameInterface"] input[type="range"]::-moz-range-track {
  height: 16px; border-radius: 9px;
  background: var(--cn-inset);
  border: 1px solid var(--cn-line);
}
[id$="GameInterface"] input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 38px; height: 38px; margin-top: -12px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffe07a, var(--cn-gold) 55%, var(--cn-gold-deep));
  border: 3px solid var(--cn-noir);
  box-shadow: 0 2px 10px rgba(245,197,66,.55);
}
[id$="GameInterface"] input[type="range"]::-moz-range-thumb {
  width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffe07a, var(--cn-gold) 55%, var(--cn-gold-deep));
  border: 3px solid var(--cn-noir);
  box-shadow: 0 2px 10px rgba(245,197,66,.55);
}

/* ====================================================================
   5. CANVAS / BOARD FRAMES — retint the slate (#334155) borders to gold.
   !important beats the inline border:3px solid #334155 on each canvas.
   ==================================================================== */
[id$="GameInterface"] canvas {
  border-color: rgba(245,197,66,.30) !important;
  border-radius: 14px !important;
}

/* Round / status pills baked into headers */
[id$="GameInterface"] [id$="RoundDisplay"],
[id$="GameInterface"] [id$="TimeDisplay"],
[id$="GameInterface"] [id$="ProgressDisplay"],
[id$="GameInterface"] [id$="MoveDisplay"] {
  color: var(--cn-gold) !important;
}

/* ====================================================================
   6. FULL-SCREEN OVERLAY GAMES (snake, dots, split/steal, rps) — keep the
   fixed layout, just retint the navy background to the noir base + gold edge.
   ==================================================================== */
#snakeGameInterface,
#dotsGameInterface { background: var(--cn-noir) !important; }
#snakeGameInterface canvas,
#dotsGameInterface > div > div { border-color: rgba(245,197,66,.28) !important; }

/* Generic result line → readable on dark */
[id$="GameInterface"] [id$="Result"],
[id$="GameInterface"] [id$="Status"] { color: var(--cn-ink); }

/* ====================================================================
   7. MONTY HALL — port the door look into the noir palette. (Replaces the
   indigo-era rules that lived in the old minigames-theme.css.)
   Door anatomy from _montyDoor(): .monty-door > .monty-door-plate + .monty-door-panel
   ==================================================================== */
#montyGameInterface { background: var(--cn-noir) !important; }
#montyGameInterface .monty-door-plate {
  background: linear-gradient(180deg, var(--cn-gold), var(--cn-gold-deep)) !important;
  color: #1f2937 !important;
}
#montyGameInterface .monty-door.picked { outline-color: var(--cn-gold) !important; }
#montyGameInterface .monty-btn.stay {
  background: rgba(255,255,255,.08) !important;
  color: var(--cn-ink) !important;
  border: 1px solid var(--cn-line) !important;
}
#montyGameInterface .monty-btn.switch {
  background: linear-gradient(135deg, var(--cn-gold), var(--cn-gold-2)) !important;
  color: #1a1206 !important;
}

/* ====================================================================
   8. MINI-GAME RESULTS SCOREBOARD overlay — align to noir + gold winner row
   ==================================================================== */
.mg-scoreboard-card {
  background: linear-gradient(180deg, var(--cn-surface-1), var(--cn-surface-2)) !important;
  border: 1px solid var(--cn-line) !important;
  color: var(--cn-ink) !important;
}
.mg-scoreboard-table tbody tr.mg-row-winner { background: rgba(245,197,66,.16) !important; }
.mg-scoreboard-table tbody tr.mg-row-winner td { color: var(--cn-gold) !important; }

/* ====================================================================
   9. GRID-TAP GAMES (Whack-a-Cheese, Memory Match, tap-target grids)
   Cells are <button>/<div> with a per-game class; common ones retinted.
   ==================================================================== */
[id$="GameInterface"] .whack-hole,
[id$="GameInterface"] .tap-cell,
[id$="GameInterface"] .grid-cell {
  background: radial-gradient(circle at 40% 32%, #1c1726, #0e0b16) !important;
  border: 1px solid var(--cn-line) !important;
  box-shadow: inset 0 -8px 16px rgba(0,0,0,.4) !important;
}
[id$="GameInterface"] .memory-card {
  background: linear-gradient(135deg, var(--cn-gold), var(--cn-gold-2)) !important; /* face-down back */
  border-radius: 12px !important;
}
[id$="GameInterface"] .memory-card.flipped {
  background: linear-gradient(180deg, #211d2c, #15111d) !important;
  border: 1px solid var(--cn-line) !important;
}
[id$="GameInterface"] .memory-card.matched {
  background: linear-gradient(145deg, #34d399, var(--cn-ok-2)) !important;
  box-shadow: 0 4px 12px rgba(34,197,94,.35) !important;
}

/* ====================================================================
   10. SOCIAL / MULTI-SCREEN (Cheese Tribunal, Number Chairs, vote lists)
   Selectable rows + tally bars. Selected/your-vote = red semantic.
   ==================================================================== */
[id$="GameInterface"] .vote-option,
[id$="GameInterface"] .suspect-row {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--cn-line) !important;
  border-radius: 13px !important;
  color: var(--cn-ink) !important;
}
[id$="GameInterface"] .vote-option.selected,
[id$="GameInterface"] .suspect-row.selected {
  background: rgba(216,68,60,.16) !important;
  border-color: var(--cn-err) !important;
}
[id$="GameInterface"] .tally-bar { background: rgba(255,255,255,.06) !important; border-radius: 7px !important; }
[id$="GameInterface"] .tally-bar > .tally-fill {
  background: rgba(245,197,66,.4) !important; border-radius: 7px !important;
}
[id$="GameInterface"] .tally-bar.leader > .tally-fill {
  background: linear-gradient(90deg, #f06a5d, var(--cn-err)) !important;
}

/* ====================================================================
   11. SAFE ZONE / arena-survival — safe ring green, danger ring red dashed.
   ==================================================================== */
#safezoneGameInterface .safe-ring {
  border: 2px solid var(--cn-ok) !important;
  box-shadow: 0 0 24px rgba(47,170,106,.4) inset !important;
}
#safezoneGameInterface .danger-ring { border: 2px dashed rgba(216,68,60,.5) !important; }

/* D-pad controls shared by Snake / Safe Zone / movement games */
[id$="GameInterface"] .dpad-btn {
  background: linear-gradient(135deg, var(--cn-gold), var(--cn-gold-2)) !important;
  color: #1a1206 !important;
  border: none !important;
  box-shadow: 0 4px 0 rgba(0,0,0,.3) !important;
  border-radius: 14px !important;
}

/* ====================================================================
   12. LUCK & NERVE (Cheese Slots, Risk Race, Cheese Derby)
   ==================================================================== */
/* Slot reels — dark strip, gold payline window */
[id$="GameInterface"] .slot-reel,
[id$="GameInterface"] .reel {
  background: linear-gradient(180deg, #0d0b14, #16121f) !important;
  border: 1px solid var(--cn-line) !important;
  border-radius: 12px !important;
}
[id$="GameInterface"] .slot-payline,
[id$="GameInterface"] .payline {
  border: 2px solid rgba(245,197,66,.5) !important;
  box-shadow: 0 0 16px rgba(245,197,66,.3) inset !important;
  border-radius: 8px !important;
}
/* Push-your-luck heat meter — amber→red danger scale (override rainbow fills) */
[id$="GameInterface"] .risk-meter,
[id$="GameInterface"] .luck-meter,
[id$="GameInterface"] .multiplier-bar {
  background: linear-gradient(180deg, #d8443c 0%, #e0820f 38%, #f2a900 64%, var(--cn-ok) 100%) !important;
  border: 1px solid rgba(245,197,66,.2) !important;
}
/* "Bank it" is the safe/cash action → gold; "Push/Risk" → green go-action.
   (red stays reserved for the bust state) */
[id$="GameInterface"] .btn-bank { /* gold via .btn rules already; ensure no bootstrap green */ }

/* Race lanes — dashed track, your lane tinted gold */
[id$="GameInterface"] .race-lane,
[id$="GameInterface"] .derby-lane {
  background: rgba(255,255,255,.04) !important;
  border: 1px dashed rgba(245,197,66,.2) !important;
  border-radius: 17px !important;
}
[id$="GameInterface"] .race-lane.is-me,
[id$="GameInterface"] .derby-lane.is-me {
  background: rgba(245,197,66,.1) !important;
}

/* ====================================================================
   13. CHOICE-REFLEX (Stroop) — tappable colour/answer options
   Keep each option's own colour as its border/swatch, dark fill behind.
   ==================================================================== */
[id$="GameInterface"] .stroop-option,
[id$="GameInterface"] .choice-option {
  background: rgba(255,255,255,.05) !important;
  color: var(--cn-ink) !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  border-radius: 13px !important;
}

/* ====================================================================
   14. HEAD-TO-HEAD (Cheese Duel) + SOCIAL PICK (Number Chairs)
   ==================================================================== */
/* Mirrored duel sides — green = you/ready, red = opponent/wait */
[id$="GameInterface"] .duel-side {
  border-radius: 14px !important;
  background: rgba(47,170,106,.08) !important;
}
[id$="GameInterface"] .duel-side.opponent {
  background: rgba(216,68,60,.08) !important;
}
[id$="GameInterface"] .vs-badge {
  background: var(--cn-noir) !important;
  border: 1px solid rgba(245,197,66,.3) !important;
  color: var(--cn-gold) !important;
  border-radius: 20px !important;
}
/* Numbered "chairs" — default dark, mine = gold seat, taken keeps a colour dot */
[id$="GameInterface"] .chair {
  background: rgba(255,255,255,.06) !important;
  border: 1.5px solid rgba(245,197,66,.18) !important;
  border-radius: 14px !important;
  color: var(--cn-ink) !important;
}
[id$="GameInterface"] .chair.mine {
  background: linear-gradient(135deg, var(--cn-gold), var(--cn-gold-2)) !important;
  border: none !important;
  color: #1a1206 !important;
  box-shadow: 0 6px 16px rgba(242,169,0,.4) !important;
}
[id$="GameInterface"] .chair.taken { color: #5a5448 !important; }

/* ====================================================================
   15. CHEESE TRIBUNAL — NOW SELF-THEMED.
   The player Tribunal (templates/player/minigames/_tribunal.html) ships its own
   scoped "night-island" theme in a <style> block co-located with its markup
   (deep teal + torch-orange + cheese-gold, Cinzel headings) to mirror the big
   screen. That scoped sheet fully owns #tribunalGameInterface, so the old noir
   overrides here were intentionally REMOVED — leaving them (with !important)
   would clobber the bespoke background/buttons. Do not re-add tribunal rules
   here; edit the template's scoped <style> instead.
   ==================================================================== */