/* ============================================================
   SHARED THEMED-GAMES LAYER  (theme-agnostic — reused by every theme)

   Maps the games + win modal onto semantic tokens. This file contains NO
   theme-specific colours: it is activated by .t-* classes (added on the game
   surfaces whenever ANY theme is active) and driven entirely by token VALUES
   that each theme defines at :root in its own theme.css.

   A new theme reuses ALL of this by:
     @import url("../_shared/games.css");
     :root { --gt-win: …; --gt-board: …; --pk-*: …; … }   (values only)

   Token contract (each theme should set these at :root):
     Surfaces  --gt-page --gt-ink --gt-ink-soft --gt-ink-faint
               --gt-board --gt-board-hi --gt-board-lo --gt-surface-dark
               --gt-text-on-dark --gt-card --gt-card-2
               --gt-hairline --gt-hairline-dark
     Semantic  --gt-win --gt-win-soft --gt-action --gt-on-action
               --gt-loss --gt-loss-deep
     Type/shape --gt-title-font --gt-label-font --gt-radius --gt-card-shadow
     Canvas (read by the games' JS, set at :root)
               --pk-* (pachinko) --wheel-divider/label/hub --scratch-0/1/2
   ============================================================ */

/* ---- TICKET-REVEAL GAMES — dark editorial stage ---- */
.t-reveal { background: var(--gt-board); }
.t-reveal h1, .t-reveal h2, .t-reveal h3 { font-family: var(--gt-title-font); font-weight: 500; letter-spacing: -.01em; }
.t-reveal [class*="bg-slate-800"] { background: color-mix(in srgb, var(--gt-text-on-dark) 5%, transparent); border-color: var(--gt-hairline-dark); border-radius: var(--gt-radius); }
.t-reveal [class*="bg-white/5"], .t-reveal [class*="bg-white/10"] { border-radius: var(--gt-radius); border-color: var(--gt-hairline-dark); }
.t-reveal [class*="rounded-xl"], .t-reveal [class*="rounded-2xl"], .t-reveal [class*="rounded-lg"], .t-reveal [class*="rounded-full"] { border-radius: var(--gt-radius); }
.t-reveal [class*="uppercase"], .t-reveal [class*="tracking-wide"] { font-family: var(--gt-label-font); letter-spacing: .14em; }
.t-reveal [class*="from-pink"], .t-reveal [class*="from-blue"], .t-reveal [class*="from-amber"], .t-reveal [class*="from-emerald"] {
  background-image: none; background-color: var(--gt-action); color: var(--gt-on-action); box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--gt-action) 70%, transparent);
}
.t-reveal .text-amber-400, .t-reveal .text-amber-300, .t-reveal .text-yellow-400 { color: var(--gt-win); }
.t-reveal [class*="from-amber-500"], .t-reveal [class*="from-blue-500"] { background-image: none; background-color: var(--gt-action); }

/* ---- SPIN-WHEEL decorative frame (shared by daily + reveal wheels) ----
   Structural colours of the wheel furniture (segment divider/label/hub) are
   read by wheel.js from --wheel-* at :root; these recolour the DOM frame. */
.t-reveal .wheel-frame-ring, .t-dailygame .wheel-frame-ring { background: linear-gradient(180deg, var(--gt-board-hi) 0%, var(--gt-board) 55%, var(--gt-board-lo) 100%); }
.t-reveal .wheel-inner-ring, .t-dailygame .wheel-inner-ring { background: linear-gradient(180deg, var(--gt-loss) 0%, var(--gt-action) 55%, var(--gt-loss-deep) 100%); }
.t-reveal .wheel-hub, .t-dailygame .wheel-hub { background: linear-gradient(135deg, var(--gt-board-hi) 0%, var(--gt-board) 100%); border-color: var(--gt-action); }
.t-reveal .wheel-hub::before, .t-dailygame .wheel-hub::before { border-color: var(--gt-win); }
.t-reveal .wheel-hub-icon, .t-dailygame .wheel-hub-icon { color: var(--gt-win); }
.t-reveal .wheel-pointer polygon, .t-dailygame .wheel-pointer polygon { fill: var(--gt-action); stroke: var(--gt-ink); }
.t-reveal .wheel-pointer circle, .t-dailygame .wheel-pointer circle { fill: var(--gt-win); stroke: var(--gt-action); }

/* ============================================================
   DAILY GAME — light editorial page; only the play board is the dark panel.
   The board canvas reads --pk-* (set at :root) via pachinko.js#resolveTheme().
   ============================================================ */
.t-dailygame { background: var(--gt-page); color: var(--gt-ink); }
.t-dailygame h1, .t-dailygame h2, .t-dailygame h3 { font-family: var(--gt-title-font); font-weight: var(--gt-title-weight, 500); letter-spacing: -.01em; color: var(--gt-ink); }
.t-dailygame h1 { font-style: var(--gt-title-style, italic); font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.04; }
/* Eyebrow above the title: label-font caps flanked by short accent rules */
.t-dailygame .t-eyebrow {
  display: inline-flex; align-items: center; gap: .9rem; margin: 0 0 1.1rem;
  font-family: var(--gt-label-font); font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gt-ink-faint);
}
.t-dailygame .t-eyebrow::before, .t-dailygame .t-eyebrow::after { content: ""; width: 2.2rem; height: 1.5px; background: var(--gt-action); }
/* Intro copy: widen the partial's max-w-md (too tight for longer copy), centred */
.t-dailygame .py-6 > p { max-width: 38rem; margin-left: auto; margin-right: auto; margin-bottom: 2.25rem; }
/* Header + section copy is authored white-on-dark; on the light page → ink */
.t-dailygame .text-white { color: var(--gt-ink); }
.t-dailygame :is(.text-slate-300, .text-slate-400, .text-slate-500) { color: var(--gt-ink-soft); }
/* The ONE dark panel: the play board */
.t-dailygame .t-board { background: var(--gt-board); border-color: var(--gt-hairline-dark); box-shadow: var(--gt-card-shadow); }
.t-dailygame .t-board [class*="bg-primary"] { display: none; }
/* Everything else (prize cards, pills) → light hairline paper */
.t-dailygame :is([class*="bg-white/5"], [class*="bg-white/10"]) { background: var(--gt-card); border-color: var(--gt-hairline); }
.t-dailygame [class*="bg-slate-800"]:not(.t-board), .t-dailygame [class*="bg-slate-700"] { background: var(--gt-card-2); border-color: var(--gt-hairline); }
.t-dailygame :is([class*="rounded-xl"], [class*="rounded-2xl"], [class*="rounded-lg"], [class*="rounded-full"]) { border-radius: var(--gt-radius); }
.t-dailygame :is([class*="uppercase"], [class*="tracking-wide"]) { font-family: var(--gt-label-font); letter-spacing: .14em; }
/* Status gradients → action; bright accent texts → win */
.t-dailygame :is([class*="from-emerald"], [class*="from-green"]) { background-image: none; background-color: var(--gt-action); color: var(--gt-on-action); box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--gt-action) 70%, transparent); }
.t-dailygame :is(.text-emerald-400, .text-emerald-300, .text-green-400, .text-amber-400, .text-yellow-400, .text-purple-400, .text-cyan-400, .text-pink-400) { color: var(--gt-win); }
/* ...but accent text sitting INSIDE a status pill (whose bg was just recoloured
   to --gt-action above) must read on the action colour, not the gold win colour,
   otherwise the "N spins available" badge renders gold-on-blue. */
.t-dailygame :is([class*="from-emerald"], [class*="from-green"]) :is(.text-emerald-400, .text-emerald-300, .text-green-400, .text-amber-400, .text-yellow-400, .text-purple-400, .text-cyan-400, .text-pink-400) { color: var(--gt-on-action); }
/* Pachinko board frame + legend */
.t-dailygame .pachinko-canvas-container { border-radius: var(--gt-radius); box-shadow: none; }
.t-dailygame .pachinko-canvas { border-radius: 0; }
.t-dailygame .pachinko-legend-label { color: var(--gt-text-on-dark); }
.t-dailygame .pachinko-legend-item--loss .pachinko-legend-label { color: var(--gt-loss); }
.t-dailygame .pachinko-debug { color: var(--gt-ink-faint); }

/* ---- SCRATCH card (daily-game scratch variant) ----
   Blend the ticket into the ink board, clean title (no 3D extrude), square
   cells. Prize-coloured tiles are preserved (cell gradients come from data). */
.t-dailygame .scratch-card-wrapper { background: transparent; box-shadow: none; padding: .25rem 0 0; }
.t-dailygame .scratch-card-wrapper::before, .t-dailygame .scratch-card-wrapper::after { display: none; }
.t-dailygame .scratch-card-title { color: var(--gt-win); font-family: var(--gt-title-font); font-weight: 500; font-size: 2rem; letter-spacing: 0; text-transform: none; text-shadow: none; }
.t-dailygame .scratch-card-grid { background: color-mix(in srgb, var(--gt-text-on-dark) 4%, transparent); box-shadow: inset 0 0 0 1px var(--gt-hairline-dark); border-radius: var(--gt-radius); }
.t-dailygame .scratch-card-cell { border-radius: var(--gt-radius); }
.t-dailygame .scratch-card-status { color: var(--gt-text-on-dark); text-shadow: none; }
.t-dailygame .scratch-card-status--loser { color: var(--gt-ink-faint); }
.t-dailygame .scratch-card-status--winner { color: var(--gt-win) !important; }
.t-dailygame .scratch-card-legend-label { color: var(--gt-text-on-dark); }
.t-dailygame .scratch-card-legend-item { border-color: var(--gt-hairline-dark); }
.t-dailygame .scratch-card-blocked-cta { background: var(--gt-action); color: var(--gt-on-action); box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--gt-action) 70%, transparent); }

/* ============================================================
   WIN / REWARD MODAL — teleported to <body> via x-shopfront.modal, so keyed
   off .t-reward-modal (not .t-dailygame). Tokens live at :root, so they reach
   the teleported node. A "win" maps to --gt-win (the theme's treasure colour).
   ============================================================ */
.card-static:has(.t-reward-modal) { background: var(--gt-board); border-color: var(--gt-hairline-dark); box-shadow: 0 40px 80px -24px rgba(0,0,0,.7); }
.t-reward-modal { background: var(--gt-board); color: var(--gt-text-on-dark); --tw-ring-color: color-mix(in srgb, var(--gt-win) 50%, transparent); }
.t-reward-modal h2, .t-reward-modal h3 { font-family: var(--gt-title-font); font-weight: 500; letter-spacing: -.01em; }
.t-reward-modal :is(.text-emerald-400, .text-emerald-300, .text-green-400, .text-purple-400, .text-amber-400) { color: var(--gt-win-soft); }
.t-reward-modal [class*="bg-emerald-500/20"] { background: color-mix(in srgb, var(--gt-win) 18%, transparent); }
.t-reward-modal :is([class*="bg-emerald-500/10"], [class*="bg-purple-500/10"]) { background: color-mix(in srgb, var(--gt-win) 10%, transparent); }
.t-reward-modal [class~="bg-emerald-500"] { background-color: var(--gt-win); color: var(--gt-board); }
.t-reward-modal :is([class*="border-emerald"], [class*="border-purple"]) { border-color: color-mix(in srgb, var(--gt-win) 40%, transparent); }
.t-reward-modal :is([class*="from-emerald"], [class*="from-green"]) { background-image: none; background-color: var(--gt-win); color: var(--gt-board); }
.t-reward-modal :is([class*="bg-slate-700"], [class*="bg-slate-800"]) { background: var(--gt-surface-dark); border-color: var(--gt-hairline-dark); }