/* Cut Day shared layer — the OpenDesign mockup, verbatim (the OpenDesign project's index.html).
   1 layout primitives (@layer od-layout) · 2 tokens (+ the legacy names, aliased) · 3 base ·
   4 the components every screen shares: .key .chip .purse .relic .pc (THE card) .crest/.tagb/.badge .pos
   .tabbar .layer/.scrim/.sheet .banner .toast .sub-* .panel .rows/.rowc .seg .chipd .sw .mcard/.mgrid ·
   5 the legacy remainder (deleted section by section as the screens move over).
   Names, values and copy are the mockup's; app/ui.js and app/cards.js emit the markup.
   `.btn` is `.key` and `.pnl` is `.panel` (legacy spellings, one set of rules each). */
/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio.
   Put this @layer first; product CSS outside the layer always wins. */
@layer od-layout {
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }

  /* containers */
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }

  /* stacked information: each piece is its own line — never sibling inline spans */
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }

  /* media keeps its intrinsic ratio by default; never a distorted or cropped
     cover by accident. height:auto lets the ratio win over an <img height="…">
     attribute. Cropping to a uniform box is an explicit opt-in: set --od-ratio
     AND add .od-media-cover together (per the core rule, only where a crop is
     deliberate — tile thumbs, decorative fills — never on full-frame content). */
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }

  /* data text only — authored copy is rewritten to its budget instead */
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }   /* block-level reservation for a shared baseline */
  .od-nowrap  { white-space: nowrap; }           /* 数字+单位 · 价格+起 · 日期+星期 */
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; } /* CJK labels break at spaces / <wbr> first */

  /* screen skeleton (optional): bars take their own space, the middle scrolls — no padding guessed for chrome */
  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

  /* horizontal rail: the next item peeks at the edge; trailing room survives overflow */
  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }

  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
/* /OD-LAYOUT-PRIMITIVES v1 */
/* ===================== Cut Day · shape, spacing and motion tokens — every colour and every typeface lives in theme.css ===================== */
/* `--cq` is ONE percent of the nearest container's width, in the element's OWN px — what `1cqw` is. WebKit resolves `cqw`
   against the container's ON-SCREEN width under CSS `zoom` (the client's column, app/viewport.js): there `1cqw` is `zoom` times
   too wide, and `viewport.js#installColumn` sets `data-cqz` on the root after measuring it; Chromium needs no correction.
   A container's size QUERY (`@container (max-width: …)`) reads own px in both. Every card dimension is `calc(N * var(--cq))`. */
:root { --cq: 1cqw; }
:root[data-cqz] { --cq: calc(1cqw / var(--z, 1)); }
:root {
  /* the page-level stacking order, low to high (the small z-indexes inside a component stay local to it) */
  --z-app: 2; --z-cards: 5; --z-top: 6; --z-flash: 27; --z-banner: 28; --z-scene: 28; --z-layer: 30; --z-fx: 31; --z-guide: 33; --z-reveal: 35; --z-fx-page: 38; --z-toast: 40;
  --outline: 2px solid var(--ink);
  --drop: 0 4px 0 var(--ink);
  --drop-sm: 0 3px 0 var(--ink);
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 22px; --r-pill: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --cw: 64px;

  --t-fast: 150ms; --t-med: 240ms; --t-slow: 320ms; --t-exit: 180ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.55, 0, .8, .2);
  --ease-pop: cubic-bezier(.2, 1.5, .35, 1);
}
/* the reduced-motion switch in Settings (shared/prefs.js) sets html[data-motion="reduce"]; the rules below and in
   mobile.css treat it exactly like the OS query */
/* ===================== Base ===================== */
/* The ground — the mockup's `.app` background and its scanline `::after` — is `#lights` (shared/swirl.js). */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:var(--chalk);font-family:var(--ui);font-weight:600;font-size:var(--fs-body);line-height:1.5;user-select:none;touch-action:manipulation}
a{color:var(--gold)}a:hover{color:var(--wy)}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--first); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--gold); color: var(--ink); }
.od-scroll { scrollbar-width: none; }
.od-scroll::-webkit-scrollbar { display: none; }
.lbl { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.25; color: var(--dim); }
.big { font-family: var(--display); font-weight: 400; line-height: .85; letter-spacing: .01em; }
/* figures wear the pixel face (the arcade accent); names and titles stay on the display face */
.num, .purse .big, .rowc .v, .chipd b, .pc-cn b, .relic-wrap .pop, .final-hero .big, .fin-score, .fin-card-score, .rule-n, .sun-delta, .q-n, .lot-price .big { font-family: var(--num); }
.c-gold { color: var(--gold); } .c-win { color: var(--win); } .c-loss { color: var(--loss); } .c-chalk { color: var(--chalk); } .c-boss { color: var(--wp); } .c-first { color: var(--first); }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ico.sm { width: 16px; height: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* chunky outlined key — the one button family */
:is(.key,.btn) {
  --k: var(--panel-hi); --kt: var(--chalk); --kd: var(--ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 8px 14px; border: var(--outline); border-radius: var(--r-md);
  background: var(--k); color: var(--kt); box-shadow: 0 4px 0 var(--kd);
  font-family: var(--display); font-size: 22px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out);
}
:is(.key,.btn):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--kd); }
:is(.key,.btn).gold { --k: var(--gold); --kt: var(--ink); --kd: var(--gold-deep); }
:is(.key,.btn).blue { --k: var(--panel-hi); --kt: var(--wy); --kd: var(--ink); box-shadow: 0 4px 0 var(--kd), inset 0 0 0 2px var(--wy); }
:is(.key,.btn).red { --k: var(--wr); --kt: var(--ink); --kd: var(--ink); }
:is(.key,.btn).ghost { --k: color-mix(in srgb,var(--ink) 25%,transparent); }
:is(.key,.btn).wide { width: 100%; }
:is(.key,.btn).xl { min-height: 60px; font-size: 30px; }
:is(.key,.btn).icon { width: 44px; padding: 0; }
:is(.key,.btn) .sub { display: block; font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: .06em; opacity: .85; }
:is(.key,.btn) .kl { display: block; }
:is(.key,.btn)[disabled] { --k: color-mix(in srgb,var(--wy) 8%,var(--ink)); --kt: var(--faint); --kd: var(--ink); box-shadow: 0 4px 0 var(--kd), inset 0 0 0 2px var(--chalk-14); cursor: default; pointer-events: none; }
:is(.key,.btn):focus-visible { outline-offset: 3px; }
@media (hover: hover) { :is(.key,.btn):not([disabled]):hover { filter: brightness(1.1); transform: translateY(-1px); } }
:is(.key,.btn).sm { min-height: 44px; padding: 4px 10px; font-size: 18px; }
:is(.key,.btn).teal { --k: var(--wt); --kt: var(--ink); }
/* legacy .btn spellings of the variants above */
.btn.pri, .btn.big { min-height: 60px; font-size: 30px; }
.btn.grey { --k: color-mix(in srgb,var(--ink) 25%,transparent); }
.btn.green { --k: var(--wt); --kt: var(--ink); }
.btn.orange { --k: var(--orange); --kt: var(--ink); }
a.btn, a.key { text-decoration: none; }

.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 2px 12px; border: var(--outline); border-radius: var(--r-pill); background: var(--ink-35); font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.chip[disabled] { opacity: .5; cursor: default; }
.chip.aiming { background: var(--wy); color: var(--ink); }
.purse { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: var(--outline); border-radius: var(--r-md); background: var(--panel); box-shadow: var(--drop-sm); }
.purse .big { font-size: 28px; white-space: nowrap; }
.purse .big small { font-size: 18px; color: var(--dim); }
.purse .coin { width: 16px; height: 16px; border-radius: 50%; background: var(--wo); border: 2px solid var(--ink); box-shadow: inset -3px -3px 0 var(--gold-deep); flex: none; }
.relics { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.relics .lbl { margin-right: var(--s2); }
.relic-wrap { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; }
/* coach token: a chunky gold chip with its initials, like a Balatro joker badge */
.relic { width: 36px; height: 36px; display: grid; place-items: center; font-family: var(--display); font-size: 20px; line-height: 1; color: var(--ink); background: var(--rc, var(--wo)); border: 2px solid var(--ink); border-radius: var(--r-sm); box-shadow: 0 3px 0 var(--ink), inset 0 -4px 0 color-mix(in srgb,var(--ink) 22%,transparent); transition: transform var(--t-med) var(--ease-pop), filter var(--t-med) var(--ease-out); }
.relic.empty { background: transparent; border: 2px dashed color-mix(in srgb,var(--wy) 28%,transparent); box-shadow: none; color: var(--faint); font-family: var(--ui); font-size: 18px; font-weight: 700; }
.relic.lit { transform: scale(1.2) rotate(-6deg) translateY(-4px); filter: brightness(1.15); }
.relic-wrap .pop { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 0 6px; border: 2px solid var(--wp); border-radius: var(--r-sm); background: var(--ink); color: var(--wp); font-family: var(--display); font-size: 16px; line-height: 1.2; white-space: nowrap; animation: rise 900ms var(--ease-out) forwards; pointer-events: none; }
@keyframes rise { 0% { opacity: 0; transform: translate(-50%, 6px); } 20% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -10px); } }
/* ===================== THE CARD — one player card everywhere =====================
   Real card stock: 5:7, warm-white face, ink edge, inner rule, rank + position indices tabbed into two
   corners of the photo window like a playing card, the photo over its position colour, a name band.
   Everything inside is sized from the card's own width (container units), so the same markup scales
   from a 44 px thumbnail to the 168 px sheet card. */
.pc { --pcol: var(--wb); position: relative; display: block; width: 100%; aspect-ratio: 5 / 7; border-radius: var(--r-sm); container-type: inline-size; box-shadow: var(--drop); transition: transform var(--t-med) var(--ease-pop), box-shadow var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out); }
.pc-f { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: calc(4 * var(--cq)); padding: calc(6 * var(--cq)) calc(6 * var(--cq)) calc(5 * var(--cq)); border: 2px solid var(--ink); border-radius: inherit; overflow: hidden; color: var(--ink);
  background: radial-gradient(color-mix(in srgb,var(--ink) 8%,transparent) .8px, transparent 1.2px) 0 0 / 4px 4px, var(--wy); }
.pc-f::before { content: ""; position: absolute; inset: calc(2.5 * var(--cq)); border: 1px solid color-mix(in srgb,var(--ink) 30%,transparent); border-radius: var(--r-sm); pointer-events: none; }
/* the inner border reads the card's IN-GAME VALUE, not a rarity: gold `hi` (+ the foil below), blue `mid`, none below —
   the cuts are shared/card-tier.js, the attribute is set by cards.js#pcHTML */
.pc[data-tier="hi"] .pc-f::before { border: 2px solid var(--wo); }
.pc-art { position: relative; display: block; min-height: 0; border: 2px solid var(--ink); border-radius: var(--r-sm); overflow: hidden;
  background: repeating-linear-gradient(135deg, color-mix(in srgb,var(--wy) 16%,transparent) 0 3px, transparent 3px 9px), var(--pcol); }
.pc-art .pos-sprite { display: block; width: 100%; height: 100%; pointer-events: none; }   /* the position sticker (shared/pos-sprites.js) */
.pc-cn { position: absolute; z-index: 2; display: grid; justify-items: center; min-width: calc(25 * var(--cq)); padding: calc(2 * var(--cq)) calc(3 * var(--cq)) calc(3 * var(--cq)); background: var(--wy); line-height: 1; }
.pc-cn.br { right: 0; bottom: 0; border-radius: var(--r-sm) 0 0 0; box-shadow: -2px -2px 0 var(--ink); padding: calc(3 * var(--cq)) calc(3 * var(--cq)) calc(2 * var(--cq)); }
.pc-cn b { display: block; font-family: var(--display); font-weight: 400; font-size: calc(30 * var(--cq)); line-height: .8; color: var(--wb-deep); }

.pc-cn.hurt b, .pc-cn.mult b { color: var(--wr-deep); }
.pc-cn.mult b { font-size: calc(24 * var(--cq)); }
.pc[data-tier="mid"] .pc-f::before { border: 2px solid var(--wbt); }
.pc[data-tier="lo"] .pc-f::before { border: 2px solid var(--faint); }   /* owner 2026-10-05: a 2-YARDS card is grey, not blue */
.pc-flag { position: absolute; top: 0; right: 0; z-index: 2; padding: 0 4px; border-radius: 0 0 0 var(--r-sm); background: var(--ink); color: var(--wp); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; line-height: 1.4; text-transform: uppercase; }
.pc-band { display: grid; gap: calc(1 * var(--cq)); padding: 0 calc(1 * var(--cq)); position: relative; }   /* name, then the team trigram under it — the same at every size */
/* the name is one line and shrinks with its length (`--nl` = glyph count, set by cards.js#pcHTML): ~.55em per capital
   of this face, so a long "J. KAMARA-DJEDJE" gets smaller instead of a cut-off ellipsis; 10px is the floor. */
.pc-nm { font-weight: 800; font-size: max(10px, min(max(12px, calc(14 * var(--cq))), calc(calc(84 * var(--cq)) / (var(--nl, 8) * .55)))); line-height: 1.2; color: var(--ink); }
.pc-tm { display: block; font-size: max(10px, calc(11 * var(--cq))); font-weight: 700; letter-spacing: .08em; line-height: 1.1; color: var(--card-dim-ink); }
.pc-stamp { position: absolute; top: 44%; left: 50%; z-index: 4; transform: translate(-50%, -50%) rotate(-14deg); padding: 0 calc(5 * var(--cq)); border: 2px solid var(--wr-deep); border-radius: var(--r-xs); background: var(--wy); color: var(--wr-deep); font-family: var(--display); font-size: calc(26 * var(--cq)); line-height: 1.05; letter-spacing: .04em; box-shadow: 0 2px 0 var(--ink); }
/* the foil: an element three cards wide, its stripe in the middle, slid across the face (a transform, not a background-position repaint) */
.pc[data-tier="hi"] .pc-f::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 300%; z-index: 3; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 44%, color-mix(in srgb,var(--white) 50%,transparent) 50%, transparent 56%); transition: opacity var(--t-fast) var(--ease-out); }
@media (hover: hover) { .mcard:hover .pc[data-tier="hi"] .pc-f::after, .lot:hover .pc[data-tier="hi"] .pc-f::after { opacity: 1; animation: foil 1.6s linear infinite; } }
@container (max-width: 52px) { .pc-band { display: none; } .pc-f { grid-template-rows: minmax(0, 1fr); padding: 3px; } .pc-cn b { font-size: calc(36 * var(--cq)); } .pc-cn i { font-size: 10px; } }
@keyframes foil { from { transform: translateX(0); } to { transform: translateX(-66.667%); } }
.tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s1); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border-radius: var(--r-md); color: var(--dim); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tab[aria-current="page"] { color: var(--gold); background: color-mix(in srgb,var(--wy) 10%,transparent); }
@media (hover: hover) { .tab:hover { color: var(--chalk); } }
/* boss crest + starter tags + rule badges: self-contained SVGs */
.crest, .tagb, .badge { display: block; flex: none; }
.crest { filter: drop-shadow(0 3px 0 var(--ink)); }
.tagb { filter: drop-shadow(0 2px 0 var(--ink)); }
.badge rect { fill: var(--ink); stroke: currentColor; stroke-width: 2.5; }
.badge g { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.badge.boss { color: var(--wp); }
.badge.boss rect { fill: color-mix(in srgb,var(--wr) 16%,transparent); }
.badge.mod { color: var(--wbt); }
.badge.mod rect { fill: color-mix(in srgb,var(--wb) 16%,transparent); }
.badge.off { color: var(--faint); }
.badge.off rect { stroke-dasharray: 4 4; }
.pos { flex: none; width: 34px; height: 32px; display: grid; place-items: center; border-radius: var(--r-sm); border: 2px solid var(--ink); font-family: var(--display); font-size: 18px; color: var(--ink); background: var(--pc); }
/* ===================== overlays ===================== */
.layer { position: fixed; inset: 0; z-index: var(--z-layer); }
.layer[hidden] { display: none; }
.scrim { position: absolute; inset: 0; background: var(--ink-72); opacity: 0; transition: opacity var(--t-med) var(--ease-out); }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88%; overflow-y: auto; overscroll-behavior: contain; padding: var(--s5) var(--s4) calc(var(--sab,0px) + var(--s4)); border-top: var(--outline); border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--wg); box-shadow: 0 -4px 0 var(--sk, var(--gold)); transform: translateY(100%); transition: transform var(--t-slow) var(--ease-out); }
.layer.open .scrim { opacity: 1; }
.layer.open .sheet { transform: none; }
.layer.closing .scrim { opacity: 0; transition-duration: var(--t-exit); transition-timing-function: var(--ease-in); }
.layer.closing .sheet { transform: translateY(100%); transition-duration: 220ms; transition-timing-function: var(--ease-in); }
.sh-hd { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: var(--s3); align-items: start; margin-bottom: var(--s4); }
.sh-title { font-family: var(--display); font-weight: 400; font-size: 40px; line-height: .9; }
.sh-sub { margin-top: var(--s1); }
.sheet p { color: var(--soft); font-weight: 500; line-height: 1.55; margin-bottom: var(--s3); }
.sheet .note { font-size: var(--fs-small); }
.rows { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.rowc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3); align-items: center; min-height: 56px; padding: var(--s2) var(--s3); border: var(--outline); border-radius: var(--r-md); background: color-mix(in srgb,var(--ink) 28%,transparent); text-align: left; width: 100%; }
.rowc .t { font-weight: 700; line-height: 1.3; }
.rowc .d { font-size: var(--fs-small); color: var(--dim); font-weight: 500; line-height: 1.4; }
.rowc .v { font-family: var(--display); font-size: 26px; line-height: 1; white-space: nowrap; }
.rowc.off { opacity: .55; }
.rowc.bossrow { background: var(--ink); box-shadow: inset 0 0 0 2px var(--p-16); }
.rowc[disabled] { opacity: .5; cursor: default; }
.acts { display: grid; gap: var(--s2); }
.confirm { display: grid; gap: var(--s2); padding: var(--s3); border: 2px solid var(--wp); border-radius: var(--r-md); background: var(--ink); }
.confirm[hidden] { display: none; }
.confirm .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.final-hero { display: grid; justify-items: center; margin: var(--s2) 0 var(--s4); }
.final-hero .big { font-size: 88px; color: var(--first); text-shadow: 0 4px 0 var(--ink); }
.final-hero .lbl { margin-top: var(--s1); }
.qplays { display: grid; gap: 4px; padding: var(--s2) var(--s3) var(--s3); margin-top: -10px; border: var(--outline); border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md); background: color-mix(in srgb,var(--ink) 20%,transparent); }
.qplays[hidden] { display: none; }
.qplay { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); font-size: var(--fs-small); font-weight: 500; color: var(--soft); }
.qplay b { font-weight: 700; white-space: nowrap; }

.banner { position: fixed; left: 0; right: 0; top: 34%; z-index: var(--z-banner); text-align: center; padding: var(--s4) 0; pointer-events: none; opacity: 0; }
/* the lower-third strip behind every banner: an ink band ruled in the banner's colour, tilted like its title */
.banner { isolation: isolate; }
.banner::before { content: ""; position: absolute; left: -4%; right: -4%; top: 8%; bottom: 8%; z-index: -1; border-block: 3px solid var(--bc, var(--gold)); background: linear-gradient(90deg, transparent, var(--ink-90) 14% 86%, transparent); transform: rotate(-2deg); }
.banner .t { display: block; font-family: var(--display); font-size: 56px; line-height: .9; letter-spacing: .04em; text-transform: uppercase; color: var(--bc, var(--gold)); -webkit-text-stroke: 2px var(--ink); text-shadow: 0 6px 0 var(--ink); }
.banner .s { display: block; margin-top: var(--s2); font-size: var(--fs-body); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--chalk); text-shadow: 0 2px 0 var(--ink); }
.banner.show { animation: bannerin 1400ms var(--ease-out) forwards; }
@keyframes bannerin { 0% { opacity: 0; transform: scale(.6) rotate(-4deg); } 16% { opacity: 1; transform: scale(1.06) rotate(-2deg); } 26% { transform: scale(1) rotate(-2deg); } 82% { opacity: 1; transform: scale(1) rotate(-2deg); } 100% { opacity: 0; transform: scale(1) rotate(-2deg); } }
.toast { position: fixed; left: var(--s4); right: var(--s4); bottom: calc(var(--sab,0px) + 150px); z-index: var(--z-toast); padding: var(--s3) var(--s4); border: var(--outline); border-radius: var(--r-md); background: var(--chalk); color: var(--ink); box-shadow: var(--drop); font-size: var(--fs-small); font-weight: 700; line-height: 1.4; opacity: 0; transform: translateY(10px); transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out); pointer-events: none; }
.toast.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .card .in { animation: none !important; }
  .banner.show { animation: none; opacity: 1; }
}
/* the Settings switch (shared/prefs.js) does what the OS query does */
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
:root[data-motion="reduce"] .card .in { animation: none !important; }
:root[data-motion="reduce"] .banner.show { animation: none; opacity: 1; }
/* a refused control wiggles on its own (juice.js#nudge) — the screen itself only shakes for a big play, a TD, a turnover */
.nudge { animation: nudge 360ms var(--ease-out); }
@keyframes nudge { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
/* the page-level wash (juice.js#wash) */
.wash { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, var(--wc, var(--wy)) 0%, transparent 62%); mix-blend-mode: screen; pointer-events: none; }
  
/* ===================== THE OTHER SCREENS ===================== */
.c-dim { color: var(--dim); }
.sub-hd { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); border-bottom: 2px solid var(--ink); background: color-mix(in srgb,var(--ink) 60%,transparent); }
.sub-hd.tabhd { display: flex; padding: var(--s1) var(--s4) var(--s2); min-height: 56px; }
.tabhd > .key, .tabhd > .purse { flex: none; }
.sub-title { font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 1; text-align: center; }
.tabhd .sub-title { flex: 1 1 0; min-width: 0; text-align: left; font-size: clamp(24px, 7vw, 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub-body { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s4) var(--s4) var(--s6); }
.sub-foot { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3) var(--s4) var(--s1); border-top: 2px solid var(--ink); background: color-mix(in srgb,var(--ink) 90%,transparent); }
.sub-foot .two, .confirm .two { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s2); }
.lead { color: var(--soft); font-weight: 500; line-height: 1.5; }
.note { color: var(--dim); font-weight: 500; line-height: 1.45; font-size: var(--fs-small); }
.sec-t { font-family: var(--display); font-size: 28px; line-height: 1; }
:is(.panel,.pnl) { display: grid; gap: var(--s2); padding: var(--s4); border: var(--outline); border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--drop); }
:is(.panel,.pnl).center { justify-items: center; text-align: center; }
/* the page is `user-select:none` (a tap must never start a selection), but a coach's name, a sheet's text and a rule's description are copyable */
.acct, .sheet .t, .sheet .d, .od-stat .d { -webkit-user-select: text; user-select: text; }
:is(.panel,.pnl).acct { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s3); }
:is(.panel,.pnl) .t, .rowc .t { font-weight: 700; line-height: 1.3; }
:is(.panel,.pnl) .d { font-size: var(--fs-small); color: var(--dim); font-weight: 500; }
.rowc .v small { font-size: 12px; color: var(--dim); }
.rowc.me { background: color-mix(in srgb,var(--wo) 14%,transparent); box-shadow: inset 0 0 0 2px var(--gold); }
.rowc.empty { border-style: dashed; background: transparent; }
.rows .rowc .relic { width: 40px; height: 40px; }
.lbl.gap { text-align: center; }
ol.rows { list-style: none; padding: 0; }
.steps .big { font-size: 34px; min-width: 24px; text-align: center; }
@media (hover: hover) { button.rowc:hover { background: color-mix(in srgb,var(--wy) 8%,transparent); } }

/* segmented control + chips + switch */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border: var(--outline); border-radius: var(--r-md); background: var(--ink); }
.sg { min-height: var(--ctl-sm); padding: 0 10px; border-radius: var(--r-sm); font-size: var(--fs-small); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); white-space: nowrap; text-align: center; }   /* buttons inherit start alignment (reset above), so a label sat at the left of its cell */
.sg[aria-pressed="true"] { background: var(--panel-hi); color: var(--chalk); box-shadow: inset 0 0 0 2px var(--chalk); }   /* selection = a chalk ring; gold is money and score */
.chipd { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 52px; padding: 0 14px; border: var(--outline); border-radius: var(--r-pill); background: var(--panel); color: var(--dim); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.chipd b { font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--gold); }
.chipd[aria-pressed="true"] { background: var(--chalk); color: var(--ink); }
.sw { position: relative; flex: none; width: 56px; height: 32px; border: var(--outline); border-radius: var(--r-pill); background: var(--ink); box-shadow: inset 0 0 0 2px var(--faint); }
.sw::before { content: ""; position: absolute; inset: -8px; }
.sw::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--dim); transition: transform var(--t-fast) var(--ease-out); }
.sw[aria-checked="true"] { background: var(--wt); box-shadow: none; }
.sw[aria-checked="true"]::after { transform: translateX(24px); background: var(--ink); }

/* auth */
.auth { display: flex; flex-direction: column; gap: var(--s4); padding-top: var(--s5); }
/* the logo (shared/logo.js#logoHTML): the mark (C half warm white, laces half gold) beside the wordmark (display face, the
   C and the D gold). One knob, `--logo-h` = the wordmark's size; the mark is drawn a little taller so its ball sits on the
   letters' cap height. `.logo-stack` sets the mark over the name. A colour change is theme.css's (--wo, --wy). */
.logo { --logo-h: 40px; --c2: var(--wy); display: inline-flex; align-items: center; gap: calc(var(--logo-h) * .2); margin: 0; color: var(--wo); line-height: 1; font-size: inherit; }
.logo-mark { display: block; flex: none; width: calc(var(--logo-h) * 1.3); height: calc(var(--logo-h) * 1.3); filter: drop-shadow(0 calc(var(--logo-h) * .06) 0 var(--ink)); }
.logo-wm { display: block; font-family: var(--display); font-weight: 800; font-size: var(--logo-h); line-height: .78; letter-spacing: .015em; color: var(--wy); white-space: nowrap; text-shadow: 0 calc(var(--logo-h) * .06) 0 var(--ink); padding-top: .06em; }
.logo-wm b { font-weight: inherit; color: var(--wo); }
.logo-sm { --logo-h: 26px; } .logo-md { --logo-h: 40px; } .logo-lg { --logo-h: 60px; } .logo-xl { --logo-h: 96px; }
.logo-stack { flex-direction: column; gap: calc(var(--logo-h) * .12); }
.logo-stack .logo-mark { width: calc(var(--logo-h) * 1.9); height: calc(var(--logo-h) * 1.9); }
/* mini cards (draft, locker, report, keep) */
.mgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.mgrid.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.mcard { position: relative; display: block; width: 100%; text-align: left; }
.mcard[aria-pressed="true"] .pc { transform: translateY(-6px) rotate(-1.5deg); box-shadow: 0 0 0 3px var(--first), 0 8px 0 var(--ink); }
.mcard[aria-disabled="true"] .pc { filter: grayscale(.5) brightness(.6); }
.mcard.cut .pc-art .pos-sprite { filter: grayscale(.9); }
.mgrid.two-col .mcard { max-width: 152px; justify-self: center; }
.enter .mgrid .mcard { animation: cardIn 360ms var(--ease-pop) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) rotate(-5deg) scale(.9); } }
@media (hover: hover) { .mcard:not([aria-disabled="true"]):not([aria-pressed="true"]):hover .pc { transform: translateY(-4px) rotate(-1.2deg); box-shadow: 0 8px 0 var(--ink); } }
.sheet-card { width: 168px; margin: 0 auto var(--s4); perspective: 800px; }
.sheet-card .pc { animation: flipIn 380ms var(--ease-out) both; }
@keyframes flipIn { from { transform: rotateY(-100deg) scale(.9); opacity: .2; } }
.pc-w { display: block; flex: none; }

/* ===================== 5 legacy remainder — deleted section by section as the screens move over ===================== */
.lbl.red{color:var(--wp)}.lbl.gold{color:var(--gold)}
.row{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}.gap{gap:8px}
.pnl{position:relative;flex:none}
.pnl.dark{background:var(--felt2)}
.pnl.half{flex:1;text-align:center;min-width:0}
.pnl.boss{background:linear-gradient(180deg,var(--felt2) 0%,var(--felt2) 100%)}
.n{font-size:32px;line-height:1;margin-top:4px}
.tag{display:inline-block;font-family:var(--display);font-size:12px;padding:3px 9px;background:color-mix(in srgb,var(--ink) 55%,transparent);border:2px solid var(--ink);border-radius:var(--r-pill);white-space:nowrap;line-height:1.3;letter-spacing:.04em}
/* A .tag used as a real <button> (locker filter/view pills) needs a real
   tap target — bump it to 40px tall without changing the pill's look. */
.tag.tap{display:inline-flex;align-items:center;min-height:40px;padding:3px 12px}
.box{display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-size:28px;line-height:1;padding:9px 10px;min-width:70px;flex:1;color:var(--wy);text-shadow:0 2px 0 var(--ink-35);border-radius:var(--r-sm);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--wy) 30%,transparent),inset 0 -3px 0 var(--ink-35);transition:background .2s}
.box.pwr{background:var(--wb-deep)}.box.mult{background:var(--wr-deep)}.box.gold{background:linear-gradient(180deg,var(--gold),var(--gold));color:var(--ink);text-shadow:none}.box.grey{background:linear-gradient(180deg,var(--steel),var(--panel))}
.playname{font-size:20px;line-height:1.1;min-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.hint{font-size:13.5px;line-height:1.4;color:var(--soft);min-height:16px;margin-top:6px;font-weight:500}
.meter{height:10px;background:var(--ink);overflow:hidden;margin-top:10px;border-radius:var(--r-sm);box-shadow:inset 0 2px 0 color-mix(in srgb,var(--ink) 60%,transparent)}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--green));transition:width .6s cubic-bezier(.2,.9,.3,1.1)}
.disc{width:46px;height:46px;flex:none;display:grid;place-items:center;font-family:var(--display);font-size:14px;color:var(--white);border-radius:50%;box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--wy) 25%,transparent)}
.pips{display:flex;gap:6px;margin-top:10px}.pips i{flex:1;height:8px;background:var(--ink);border-radius:var(--r-sm)}.pips i.td{background:var(--gold)}.pips i.miss{background:var(--panel)}.pips i.cur{background:var(--green);animation:blink 1.4s ease-in-out infinite}

/* Draft (v0.2) — shared by both documents; each document sizes .mini itself. */
.draft-wrap{display:grid;gap:12px;width:100%;max-width:1120px;margin:0 auto}
.draft-card{position:relative;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.draft-card[disabled]{cursor:not-allowed}
.draft-card.is-full .mini{opacity:.6}
.draft-card.kept{display:grid;gap:4px;justify-items:center}
.draft-intro{max-width:720px}
/* the page-level pop-up (juice.js#pop) only: `.pop` alone is also the bump class juice.js#bump puts on boxes */
#fx>.pop{position:absolute;font-family:var(--display);font-size:18px;text-transform:uppercase;letter-spacing:.06em;padding:4px 11px;color:var(--wy);white-space:nowrap;transform:translate(-50%,-50%);border:2px solid var(--ink);border-radius:var(--r-sm);box-shadow:var(--drop-sm),inset 0 1px 0 var(--chalk-28)}
.grid.list{flex-direction:column;flex-wrap:nowrap;gap:4px}
.grid{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.scroll{overflow:auto;min-height:0;flex:1;scrollbar-width:thin}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* KAITEN LIVE ticker: a distance in px (half the doubled row, set by game.js) so
   the strip runs at one constant speed whatever its length; the fallback is
   the old half-width travel. */
@keyframes marquee-px{0%{transform:translateX(0)}100%{transform:translateX(calc(-1 * var(--mq-d, 50%)))}}
.headline{font-family:var(--display);font-size:clamp(22px,3.2vw,32px);line-height:1.08;color:var(--cream)}
input::placeholder{color:var(--faint)}
@keyframes letterIn{0%{opacity:0;transform:translateY(-70px) scale(1.5)}60%{opacity:1;transform:translateY(6px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes popIn{0%{opacity:0;transform:translateY(26px) scale(.94)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* the volume sliders (app/ui.js#volumesHTML): a label and its value over a native range — a chunky track in
   the key grammar (ink outline, the filled part gold), a 28 px thumb inside a 44 px hit row */
.vols{ display: grid; gap: var(--s2); padding: var(--s2) var(--s3) var(--s3); border: var(--outline); border-radius: var(--r-md); background: var(--ink-25); }
.volrow{ display: grid; gap: var(--s1); }
.volrow-hd{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.volrow-hd .t{ font-weight: 700; line-height: 1.3; }
.volrow-hd output{ font-size: var(--fs-h3); line-height: 1; color: var(--gold); white-space: nowrap; }
/* the generic field rule `input[type]` (mobile.css) out-specifies a bare `.vol`: it would frame the slider like a text field */
input.vol[type]{ height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.vol{ -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.vol::-webkit-slider-runnable-track{ height: 14px; border: var(--outline); border-radius: var(--r-pill); background: linear-gradient(90deg, var(--gold) var(--v, 50%), var(--ink) var(--v, 50%)); }
.vol::-moz-range-track{ height: 10px; border: var(--outline); border-radius: var(--r-pill); background: var(--ink); }
.vol::-moz-range-progress{ height: 10px; border-radius: var(--r-pill); background: var(--gold); }
.vol::-webkit-slider-thumb{ -webkit-appearance: none; width: 28px; height: 28px; margin-top: -9px; border: var(--outline); border-radius: 50%; background: var(--wy); box-shadow: var(--drop-sm); }
.vol::-moz-range-thumb{ width: 24px; height: 24px; border: var(--outline); border-radius: 50%; background: var(--wy); box-shadow: var(--drop-sm); }
.vol:focus-visible{ outline: 3px solid var(--first); outline-offset: 2px; }