/* Theme tokens (--bg, --panel, ... ) are set at runtime by data-bridge.js
   applyTheme() from src/data/themes.js. Animation tokens (--dur-*, --ease-*)
   are injected by animation-tokens.js. Nothing here hardcodes a color or a
   duration outside those two token sources. Match-screen-only rules (the
   ADR-0010 board, diyas, setup/end screens) live in ./styles/match-temple.css
   -- imported below, kept separate so this file stays under the 500-line
   convention and the temple reskin doesn't get lost in the shared chrome. */
@import url("./styles/match-temple.css");
:root{
  /* Lane accent colors -- temple/gold palette (docs/design/art-style-bible.md):
     Yantra = oxide-red (martial), Tantra = indigo-teal (counsel), Mantra = jade
     (sacred growth). Gold (--neut) stays reserved for primary UI chrome so
     the "click this" affordance never competes with a track color. */
  --yantra-c:#c1502f;
  --tantra-c:#4fa3ac;
  --mantra-c:#6f9b57;
  /* Shared card aspect ratio (ADR-0016, card-presentation overhaul, Issue
     #22): every card surface (deck-builder/kosha .face, match hand
     .mmhcard, board .mmcell, and the enlarged card-detail viewer) scales
     off this ONE token instead of each hardcoding its own box, matching
     MMDoC's own card proportions (measured off the reference card art). */
  --card-aspect:5/7;
  /* Warm display serif for names/headings, amar-chitra-katha-in-spirit --
     Cinzel (SIL OFL, see ./fonts/OFL.txt), self-hosted as a single variable
     woff2 so there's no runtime CDN/Google Fonts request. Falls back to a
     system serif stack if the file is ever missing. Body copy stays on the
     system sans below -- Cinzel's all-caps-leaning letterforms only read
     well at display sizes (headings, card names), not paragraph text. */
  --font-display:'Cinzel',Georgia,'Times New Roman',serif;
}
@font-face{
  font-family:'Cinzel';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('./fonts/cinzel-var.woff2') format('woff2');
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#120d08}
body{font:15px/1.5 "Segoe UI",system-ui,sans-serif;color:var(--ink);overflow:hidden}
#app{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center}
.build-tag{position:fixed;bottom:6px;right:8px;z-index:9999;font-size:10px;letter-spacing:.04em;color:rgba(232,220,196,.45);font-family:monospace;pointer-events:none;user-select:none}
/* z-index:0 (not the z-index-less `position:absolute` this had before P4):
   #battlefield-layer below relies on #stage being ITS OWN CSS stacking
   context so that layer's negative z-index only reaches back behind
   #stage's other children (#screen-root), never behind #stage's own box.
   position:absolute alone does NOT establish a stacking context without an
   explicit (non-auto) z-index, and #stage carries no transform at all now
   (every screen renders at the real viewport size, see board-scale.js's
   header note) -- without z-index:0 here, #battlefield-layer's z-index:-1
   would escape past #stage entirely to #app's (position:fixed always
   creates one) stacking context instead, landing behind #stage's own
   opaque background -- not just behind #screen-root -- hiding a fully-
   correct, fully-lit 3D scene behind a flat color with zero WebGL errors
   (confirmed via a raw readPixels() taken same-tick off the canvas's own
   backing buffer, which showed correct rendered content the whole time). */
#stage{position:absolute;inset:0;width:100%;height:100%;z-index:0;background:var(--bg);overflow:hidden;
       box-shadow:0 0 60px rgba(0,0,0,.6);display:flex;flex-direction:column}
/* Battlefield seam (GitLab #32 P1, src/ui/battlefield/contract.js): a
   persistent layer mounted once by main.js, positioned behind #screen-root
   and inert to pointer events so it never intercepts a click meant for the
   real DOM board. A NEGATIVE z-index (not a positive one on #screen-root --
   confirmed by direct regression: that inverted ./top-bar.js's own
   position:absolute/z-index:auto-paints-above-static-content trick, see its
   "not display:none" comment lower in this file, and broke the quit-match
   button in tests/e2e/match-quit-and-kosha-art.spec.js) always paints
   behind every non-positioned in-flow sibling in its stacking context, so
   #screen-root and every other existing element here stays untouched. */
#battlefield-layer{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#screen-root{width:100%;flex:1 1 auto;overflow:auto}
.screen{padding:24px;height:100%;overflow:auto}
h1,h2,h3,h4{margin:0 0 8px;font-family:var(--font-display)}
.menu-warn{color:var(--enemy,#f87171);font-size:13px;border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:var(--panel2)}
/* Shared "i" inspect button -- base rule lives here since both the deck
   builder's .face cards and the match screen's .mmcell/.mmhcard reuse it;
   match-temple.css only carries the match-specific size overrides. */
.info-btn{position:absolute;top:5px;right:5px;width:17px;height:17px;border-radius:50%;background:var(--panel);color:var(--dim);border:1px solid var(--line);font-size:10.5px;font-weight:800;font-style:italic;font-family:Georgia,serif;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:4;transition:background var(--dur-fast,150ms),color var(--dur-fast,150ms),border-color var(--dur-fast,150ms)}
.info-btn:hover{background:var(--neut);color:#241a05;border-color:var(--neut)}
/* .preview-banner (setup-shell.js's "Choose your presiding god" banner) now
   lives in ./styles/match-temple.css alongside the rest of the match-setup
   screen it belongs to. */

/* ---- generic confirm modal (src/ui/confirm-modal.js) -- on-theme
   window.confirm() replacement, currently used by ./match-quit.js to
   confirm quitting a live match. Fixed to the true viewport (not #stage)
   so it renders above the letterbox scale transform at real size. */
.confirm-modal-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  background:rgba(10,7,4,.72);backdrop-filter:blur(2px)}
.confirm-modal-panel{max-width:360px;width:calc(100% - 48px);border-radius:14px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);padding:20px;box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 0 1px rgba(217,165,54,.25)}
.confirm-modal-panel h3{font-family:var(--font-display);margin:0 0 8px;font-size:17px}
.confirm-modal-panel p{margin:0 0 16px;font-size:13.5px;color:var(--dim)}
.confirm-modal-actions{display:flex;gap:8px;justify-content:flex-end}
.confirm-modal-actions button{cursor:pointer;border-radius:8px;padding:8px 16px;font-size:13px;border:1px solid var(--line);background:var(--panel2);color:var(--ink)}
.confirm-modal-actions button:hover{border-color:var(--faint)}
.confirm-modal-actions button.primary{border-color:var(--enemy,#f87171);background:var(--enemy,#f87171);color:#2a0f0f;font-weight:700}
.confirm-modal-actions button.primary:hover{filter:brightness(1.08);border-color:var(--enemy,#f87171)}

/* ---- menu ---- */
.menu-screen{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding-top:12px}
.title{font-size:42px;letter-spacing:.02em}
.tagline{color:var(--dim);margin:0}
.menu-screen .menu-warn{max-width:600px;margin:0 auto}
.menu-btn{padding:12px;font-size:15px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);cursor:pointer}
.menu-btn.primary{border-color:var(--neut);color:var(--neut);font-weight:700}
.menu-btn:hover{border-color:var(--faint)}

/* Tile grid — ported from the deleted tests/html-app/index.html design
   portal mock (gradient top bar using the existing lane tokens, hover lift,
   "Open →" affordance), reconciled onto this app's dark-theme tokens
   (--panel/--panel2/--line/--ink/--dim/--neut/--ally) instead of the mock's
   own tests/html-app/lib/theme.css tokens. */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;width:100%;max-width:980px;margin-top:10px;text-align:left}
.tile{display:block;width:100%;border:1px solid var(--line);border-radius:14px;background:var(--panel);
  padding:22px 22px 20px;color:var(--ink);position:relative;overflow:hidden;font:inherit;text-align:left;cursor:pointer;
  transition:border-color .15s,background .15s,transform .15s}
.tile::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--yantra-c),var(--tantra-c),var(--mantra-c))}
.tile:hover{border-color:var(--neut);background:var(--panel2);transform:translateY(-2px)}
.tile .tile-title{display:block;font-size:17px;margin:8px 0 8px;color:var(--neut)}
.tile .tile-desc{display:block;margin:0;font-size:13.5px;color:var(--dim);line-height:1.55}
.tile .go{display:inline-block;margin-top:14px;font-size:11.5px;font-weight:700;color:var(--ally);
  text-transform:uppercase;letter-spacing:.05em}
.tile .go::after{content:" →"}
.tile.dev-tile{border-style:dashed}
.tile.dev-tile::before{background:var(--neut)}
.tile.tile-disabled{cursor:not-allowed;opacity:.55}
.tile.tile-disabled::before{background:var(--faint)}
.tile.tile-disabled:hover{border-color:var(--line);background:var(--panel);transform:none}
.tile-badge{position:absolute;top:10px;right:12px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--neut);border:1px solid var(--line);border-radius:4px;padding:1px 5px;background:var(--panel2)}

/* ---- shared card face (deck builder / kosha / hand / board / detail) ----
   ADR-0016 (Issue #22): src/ui/card-face.js#cardFaceHTML is the ONE anatomy
   renderer for every card surface -- art, cost/tier-cls chip and the
   Abhighata/Sthiti/Pratighata corner gems below all reuse the SAME .mm-cost/
   .mm-gem-N / .mm-tier-chip classes the match hand/board tiles use (see
   ./styles/match-temple.css), just scoped under `.face` here for this
   context's sizing/position. .face-art is an absolutely-positioned
   background layer (the same cardArtSrc() + onerror->.art-missing pattern
   the in-match hand/board cells use, see ./screens/match/utils.js); every
   badge is a direct `.face` child stacked over it via z-index, no
   .face-content text layer needed anymore. */
.facegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(120px,10vw,180px),1fr));gap:clamp(8px,1vw,16px);margin-top:10px}
.face{position:relative;aspect-ratio:var(--card-aspect,5/7);border-radius:10px;border:1px solid var(--line);background:var(--panel2);overflow:hidden;
      cursor:pointer;transition:transform var(--dur-fast,150ms) var(--ease-standard),border-color var(--dur-fast,150ms) var(--ease-standard)}
.face:hover{border-color:var(--face-accent,var(--faint));transform:translateY(-2px)}
.face.picked{border-color:var(--neut);box-shadow:0 0 0 1px var(--neut)}
.face.disabled{opacity:.4;cursor:not-allowed}
/* Per-god accent (card-presentation skill §2) — used for hover + same-god highlight.
   --face-accent is set inline per-card by cardFaceHTML() from src/data/god-themes.js
   (ADR-0015 Decision 1: one source of record for god colours), not hardcoded here. */
.face.god-highlight{border-color:var(--face-accent);box-shadow:0 0 0 2px var(--face-accent),0 0 18px -3px var(--face-accent);transform:translateY(-2px)}
.face.god-dim{opacity:.32;filter:saturate(.7)}
.face-art{position:absolute;inset:0;opacity:.95}
/* Light scrim only near the bottom for name legibility — art stays visible (no opaque block). */
.face-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(10,10,14,.12) 74%,rgba(10,10,14,.82) 100%)}
.face-art img{width:100%;height:100%;object-fit:cover;object-position:top center}
.face-art.art-missing{background:linear-gradient(165deg,var(--panel2),var(--panel))}
.face-art.art-missing img{display:none}
/* Name banner sits flush near the bottom edge, plain text with no plate
   (mock: .claude/scratch/card-icon-badges-mock.html's .mm-name-plain) --
   the stat badges moved to a top-right stack (match-temple.css's
   .mm-stat-badge). GitLab #32 P4 round-3 (badge-size reversal, user review):
   the stack grew back to the mock's own 48px width/54px height floor,
   which at a real kosha/pool card's measured size (~135-143px wide,
   188-200px tall, TIGHTEST at 900x600) makes the 3-badge stack ~166-174px
   tall on its own -- it now needs nearly the card's FULL height (top:2px on
   .mm-stat-stack below), leaving only a slim strip at the very bottom for
   this name. white-space:nowrap+ellipsis is load-bearing here now (was
   absent before, relying on the box just being wide enough that wrapping
   never triggered) -- confirmed by rendering that overflow-wrap:break-word
   (this rule doesn't set white-space, so the .mm-nm base rule's own
   overflow-wrap:break-word, match-temple.css, still applies) can still
   force a 2-line wrap even without a normal break opportunity, doubling
   this band's real height right when the badge stack has claimed almost
   everything else. font-size dropped 11px -> 9.5px for the same reason:
   less height per line in an now much shorter reserved band.
   right:22px (was 6px) reserves room for .qty below, ALWAYS -- not just
   when qty>0 -- so a card's name doesn't visibly shift/re-wrap the instant
   it's added to the deck (deck-builder pool only ever shows .qty once
   picked; kosha never shows it, but keeps the same inset for a consistent
   look across both 'gallery'-context screens, per team-lead direction). */
.face .mm-nm{position:absolute;left:6px;right:22px;bottom:6px;text-align:center;font-size:9.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Moved off the top-right corner (round-3): that corner is now the
   .mm-stat-stack's own column top-to-bottom (it no longer stops partway
   down like the old 32px stack did), so top:5px/right:5px would sit
   directly under/behind the stack's own badges. Bottom-right instead,
   sharing the name's own row -- the .mm-nm right-inset above already
   reserves this exact spot. */
.face .qty{position:absolute;bottom:8px;right:6px;top:auto;background:var(--neut);color:#1a1400;font-weight:700;border-radius:999px;
           min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:10px}
.face-align{font-size:8.5px;padding:0 4px;border-radius:4px;margin-left:4px;text-transform:uppercase}
.align-sura{color:#9fd8b8} .align-asura{color:var(--enemy)}
/* Opt-in overlay controls (deck builder only, see card-face.js's showInfo/
   removable flags): "i" inspect sits top-left so it never collides with the
   qty badge (top-right); "−" remove sits just to its right. */
.face .info-btn{top:5px;left:5px;right:auto}
.face .face-remove-btn{position:absolute;top:5px;left:26px;width:17px;height:17px;border-radius:50%;
  background:var(--panel);color:var(--enemy);border:1px solid var(--line);font-size:12px;font-weight:800;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:4}
.face .face-remove-btn:hover{background:var(--enemy);color:#2a0f0f;border-color:var(--enemy)}

/* ---- deck builder ---- */
.presidingrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:14px}
.presidingcard{border:1px solid var(--line);border-radius:12px;background:var(--panel2);padding:12px}
.presidingcard.bonded{border-color:var(--neut)}
.presidingcard.empty{color:var(--faint);font-style:italic;font-size:12.5px}
.pname{font-weight:700;font-size:14px}
.ppath{font-size:11px;color:var(--neut)}
.dbwrap{display:grid;grid-template-columns:1fr 300px;gap:16px}
.decktray{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:14px;align-self:start}
.rule{display:flex;justify-content:space-between;font-size:12px;padding:3px 0;border-bottom:1px dashed var(--line)}
.meter{height:8px;border-radius:5px;background:#101623;border:1px solid var(--line);overflow:hidden;margin:6px 0 10px}
.meter-fill{height:100%;background:var(--neut)} .meter-fill.over{background:var(--enemy)}
.decklist{list-style:none;margin:8px 0;padding:0;font-size:12px}
.decklist li{display:flex;justify-content:space-between;padding:2px 0;border-bottom:1px solid var(--line)}
.decklist .x{color:var(--faint);cursor:pointer}
#beginBtn{width:100%;margin-top:10px;padding:11px;font-size:14px;font-weight:700;border-radius:9px;
          border:1px solid var(--neut);background:var(--neut);color:#1a1400;cursor:pointer}
#beginBtn:disabled{background:var(--panel2);color:var(--faint);border-color:var(--line);cursor:not-allowed}
.filterbar{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px}
.filterbar button{background:var(--panel2);border:1px solid var(--line);color:var(--dim);border-radius:999px;padding:3px 10px;font-size:11.5px;cursor:pointer}
.filterbar button.on{color:var(--ink);border-color:var(--neut)}

.dbwrap{grid-template-columns:1fr 300px 300px}
.deck-save-row{display:flex;gap:6px;align-items:center;margin-bottom:10px}
.deck-save-row input{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:8px 10px;font-size:13px}
.deck-save-row input:focus{outline:none;border-color:var(--neut)}
.deck-save-row button{white-space:nowrap;background:var(--panel2);border:1px solid var(--neut);color:var(--neut);
  font-weight:700;border-radius:8px;padding:8px 12px;font-size:12.5px;cursor:pointer}
.deck-save-row button:disabled{border-color:var(--line);color:var(--faint);cursor:not-allowed}
.deck-save-row .newdeck-btn{border-color:var(--line);color:var(--dim);font-weight:400}
.save-status{font-size:11px;color:var(--faint);margin-bottom:8px;display:block}
.save-status.dirty{color:var(--neut)}
.save-status.saved{color:var(--ally)}
.load-warning{font-size:11px;color:var(--enemy);border:1px solid var(--enemy);border-radius:8px;padding:6px 8px;margin-bottom:8px}
.decklist li .remove-btn{border:1px solid var(--line);background:var(--panel2);color:var(--enemy);border-radius:5px;
  width:18px;height:18px;line-height:1;font-size:12px;font-weight:800;cursor:pointer;padding:0}
.decklist li .remove-btn:hover{background:var(--enemy);color:#2a0f0f;border-color:var(--enemy)}

.saved-decks-panel{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:14px}
.saved-decks-panel h3{font-size:13px;margin-bottom:6px}
.saved-decks-panel h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--dim);margin:14px 0 6px}
.saved-decks-list,.preset-decks-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sdr,.pdr{border:1px solid var(--line);border-radius:9px;background:var(--panel2);padding:8px}
.sdr.active{border-color:var(--neut)}
.sdr-name{font-weight:700;font-size:12.5px}
.sdr-meta{display:block;font-size:10.5px;color:var(--dim);margin-top:2px}
.sdr-legal{font-weight:700;border-radius:4px;padding:0 4px;margin-left:4px}
.sdr-legal.ok{color:var(--ally)} .sdr-legal.bad{color:var(--faint)}
.sdr-actions,.pdr-actions{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.sdr-actions button,.pdr-actions button{background:var(--panel);border:1px solid var(--line);color:var(--dim);
  border-radius:6px;padding:3px 8px;font-size:10.5px;cursor:pointer}
.sdr-actions button:hover,.pdr-actions button:hover{border-color:var(--faint);color:var(--ink)}
.sdr-actions [data-testid="saved-deck-delete-confirm"]{border-color:var(--enemy);color:var(--enemy)}
.sdr-rename-form{display:flex;gap:4px;margin-top:6px}
.sdr-rename-form input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:6px;padding:4px 6px;font-size:11.5px}
.pdr-desc{font-size:10.5px;color:var(--faint);margin-top:3px;line-height:1.4}
.empty-note{color:var(--faint);font-size:11.5px;font-style:italic}

/* Match board, hand, HUD, diyas, turn banner, rules-ref, setup and end
   screens all now live in ./styles/match-temple.css. The old side-panel
   card inspector (deck-builder + match board) is gone -- openCardDetail()
   (ADR-0013) is the one canonical detail surface everywhere now. */

/* ---- kosha / katha ---- */
.kosha-screen h2, .katha-screen h2{margin-bottom:12px}

/* ---- glossing ---- */
.gl-term{border-bottom:1px dotted var(--faint)}
.gl-gloss{color:var(--dim);font-size:.9em}
.gl-more{border:none;background:var(--panel2);color:var(--dim);border-radius:999px;width:16px;height:16px;font-size:10px;cursor:pointer}

/* ---- top bar (persistent chrome, survives every screen swap) ---- */
.top-bar{display:flex;align-items:center;flex:0 0 auto;height:40px;padding:0 14px;
         border-bottom:1px solid var(--line);background:var(--panel)}
.top-bar-home{display:flex;align-items:center;gap:6px;padding:5px 12px;font-size:12.5px;
              border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);cursor:pointer}
.top-bar-home:hover:not(:disabled){border-color:var(--faint)}
.top-bar-home:disabled{opacity:.4;cursor:not-allowed}

/* ---- dev menu ---- */
.dev-menu{position:fixed;top:10px;right:10px;z-index:200}
.dev-gear{width:34px;height:34px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:var(--dim);cursor:pointer;font-size:16px}
.dev-panel{position:absolute;top:40px;right:0;width:260px;background:var(--panel);border:1px solid var(--neut);border-radius:10px;padding:10px;font-size:12px;
           /* Panel has grown taller than short viewports can show (free camera,
              pitch presets, device-preview, Match Tools row, etc.) -- clamp to
              the viewport and scroll internally so every control stays
              reachable/clickable regardless of window height (GitLab #32 UI-2). */
           max-height:calc(100dvh - 60px);overflow-y:auto;overscroll-behavior:contain}
.dev-panel h4{margin:8px 0 4px;color:var(--neut);font-size:11px;text-transform:uppercase}
.dev-row{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-bottom:4px}
.dev-row button{background:var(--panel2);border:1px solid var(--line);color:var(--dim);border-radius:6px;padding:3px 8px;font-size:11px;cursor:pointer}
/* Atmosphere theme row (GitLab #34): marks which theme is currently
   persisted/active when the panel (re)opens -- the Skin row above has no
   equivalent marker today, this is additive/local to the new row only. */
.dev-row button.active{border-color:var(--neut);color:var(--ink)}

/* ---- phone-width portrait (ADR-0010 Decision 13, same width as
   board-scale.js's NARROW_BREAKPOINT, which ./battlefield/select-battlefield.js
   reads independently to pick a portrait-appropriate battlefield) ---- */
/* Match-screen-specific narrow rules (.mmwrap, .mmcell, .diya, .setup-presets,
   ...) live in ./styles/match-temple.css's own @media block. */
@media (max-width:820px){
  .screen{padding:12px}
  .tiles{grid-template-columns:1fr}
  .dbwrap{grid-template-columns:1fr}
}