/* © 2026 Fox and Logic. All rights reserved. */
/* ==========================================================================
   Swipe-game engine — shared design system for all "real vs. mismatched
   pairing" swipe games (chart-swipe, jersey-swipe, etc.)

   A game provides its own data + copy via config (see engine.js) and loads
   this stylesheet as-is. Per-game visual tweaks should override CSS custom
   properties from a game-level <style> block AFTER this file, not fork it.
   ========================================================================== */

:root{
  --bg:#f4ecd8;
  --surface:#fffdf7;
  --surface-2:#e9dcc0;
  --ink:#221a10;
  --ink-dim:#6e5f45;
  --accent:#b8790a;
  --accent-ink:#2b1c02;
  --good:#0e9c82;
  --bad:#c93a46;
  --line:#ddccA6;
  --shadow: 0 18px 40px -20px rgba(34,26,16,0.45);
  --font-display:'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'Space Mono', 'SFMono-Regular', Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14100a;
    --surface:#1f1810;
    --surface-2:#2a2116;
    --ink:#f6ecd9;
    --ink-dim:#b7a688;
    --accent:#ffb703;
    --accent-ink:#2b1c02;
    --good:#35d6b4;
    --bad:#ff5d6c;
    --line:#3a2f1f;
    --shadow: 0 18px 40px -18px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{
  --bg:#14100a;
  --surface:#1f1810;
  --surface-2:#2a2116;
  --ink:#f6ecd9;
  --ink-dim:#b7a688;
  --accent:#ffb703;
  --accent-ink:#2b1c02;
  --good:#35d6b4;
  --bad:#ff5d6c;
  --line:#3a2f1f;
  --shadow: 0 18px 40px -18px rgba(0,0,0,0.6);
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  min-height:100vh;
  min-height:100dvh;
  /* keep clear of the notch / home indicator (needs viewport-fit=cover) */
  padding:
    max(20px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(40px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  -webkit-tap-highlight-color:transparent;
  /* a swiped card flies off-screen: don't let it widen the page mid-swipe */
  overflow-x:clip;
  display:flex;
  justify-content:center;
  background-image:
    radial-gradient(circle at 15% 8%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 45%),
    radial-gradient(circle at 85% 92%, color-mix(in srgb, var(--good) 8%, transparent), transparent 40%);
  background-attachment:fixed;
}
/* every card the same size: the column is always full width (up to the
   stage's max), never sized by the text on the current card */
.sg-mount{width:100%; max-width:460px; min-width:0; container-type:inline-size;}
.stage{
  width:100%;
  max-width:460px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
[hidden]{display:none!important;}
/* no double-tap-to-zoom delay on anything tappable */
button, a{touch-action:manipulation;}
.btn:focus-visible, .swipe-btn:focus-visible, .tab:focus-visible, .chip:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ---------- header / brand ---------- */
.brand{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:4px 10px;
}
.brand h1{
  font-family:var(--font-display);
  font-size:clamp(2.2rem, 9vw, 2.8rem);
  letter-spacing:0.02em;
  margin:0;
  line-height:0.9;
}
.brand h1 span{color:var(--accent);}
.brand .kicker{
  font-family:var(--font-mono);
  font-size:0.62rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-dim);
  white-space:nowrap;
}

/* ---------- field groups / tab rows (region, source filters, ...) ---------- */
.field-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.section-label{
  font-family:var(--font-mono);
  font-size:0.62rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin:0 0 0 2px;
}
.tab-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.tab{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  transition:transform .15s ease, border-color .15s ease;
}
a.tab{text-decoration:none;}
#sg-mode-group{margin-bottom:4px;}
.tab.active{
  background:var(--ink);
  color:var(--bg);
  border-color:var(--ink);
}
.tab[disabled]{
  opacity:0.55;
  cursor:not-allowed;
}
.tab .soon{
  font-size:0.58rem;
  background:var(--surface-2);
  color:var(--ink-dim);
  padding:2px 6px;
  border-radius:999px;
}
.tab.active .soon{background:color-mix(in srgb, var(--bg) 30%, transparent); color:var(--bg);}

/* multi-select variant (chart/source chips) */
.chip-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.chip{
  font-family:var(--font-mono);
  font-size:0.66rem;
  letter-spacing:0.04em;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink-dim);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  transition:transform .15s ease, border-color .15s ease, color .15s ease;
}
.chip.active{
  border-color:var(--accent);
  color:var(--ink);
  background:color-mix(in srgb, var(--accent) 14%, var(--surface));
}
.chip .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--line);
}
.chip.active .dot{background:var(--accent);}
.chip.locked{cursor:default;}
.pool-stat{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.03em;
  color:var(--ink-dim);
  margin-top:2px;
}
.pool-stat b{color:var(--ink);}

@media (hover:hover){
  .tab:not(.active):hover{transform:translateY(-1px); border-color:var(--accent);}
  .chip:not(.locked):hover{transform:translateY(-1px); border-color:var(--accent);}
}
/* bigger tap targets for fingers */
@media (pointer:coarse){
  .tab{padding:11px 14px;}
  .chip{padding:11px 14px;}
}

/* ---------- panels ---------- */
.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;
  box-shadow:var(--shadow);
}
.panel p{
  margin:0 0 14px;
  color:var(--ink-dim);
  font-size:0.92rem;
  line-height:1.5;
}
.rules{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:18px;
}
.rule{
  border:1px dashed var(--line);
  border-radius:14px;
  padding:12px 10px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.03em;
  color:var(--ink-dim);
}
.rule b{
  display:block;
  font-family:var(--font-display);
  font-size:1.4rem;
  letter-spacing:0.03em;
  color:var(--ink);
  margin-bottom:2px;
}
.rule.good b{color:var(--good);}
.rule.bad b{color:var(--bad);}

.btn{
  font-family:var(--font-mono);
  font-size:0.82rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border:none;
  border-radius:14px;
  padding:15px 18px;
  cursor:pointer;
  width:100%;
  background:var(--ink);
  color:var(--bg);
  transition:transform .12s ease, opacity .12s ease;
}
.btn:active{transform:scale(0.98);}
.btn.ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
}

/* ---------- play header ---------- */
.play-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--font-mono);
}
.track-count{font-size:0.75rem; letter-spacing:0.08em; color:var(--ink-dim); text-transform:uppercase;}
.track-count b{color:var(--ink); font-size:0.9rem;}
.live-score{
  font-size:0.8rem;
  letter-spacing:0.05em;
  background:var(--surface-2);
  border-radius:999px;
  padding:6px 12px;
  color:var(--ink);
}
.progress-track{
  height:6px;
  border-radius:999px;
  background:var(--surface-2);
  overflow:hidden;
  margin-bottom:16px;
}
.progress-fill{
  height:100%;
  background:linear-gradient(90deg, var(--accent), var(--good));
  width:0%;
  transition:width .3s ease;
}

/* ---------- card stack ---------- */
.stack{
  position:relative;
  /* one standard card size for every card and every game: full column
     width (max 460px), and tall enough for the name band plus a square
     answer area as wide as the card (100cqw + 93px: padding, band, divider).
     On short screens the card stops growing so the buttons stay visible
     (--sg-chrome: everything else on the play screen) and the square shrinks. */
  --sg-chrome:330px;
  height:max(300px, min(calc(100cqw + 93px), calc(100svh - var(--sg-chrome))));
  touch-action:none;
}
.card-next{cursor:default;}
.card{
  position:absolute;
  inset:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:16px 18px 18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  text-align:center;
  gap:0;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  cursor:grab;
  will-change:transform;
}
.card:active{cursor:grabbing;}
.card .field-label{
  font-family:var(--font-mono);
  font-size:0.62rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:2px;
}
.card .primary-value{
  font-family:var(--font-display);
  font-size:2.3rem;
  line-height:0.95;
  letter-spacing:0.01em;
  text-wrap:balance;
  overflow-wrap:anywhere;
}
.card .primary-value.long{font-size:1.75rem;}
.card .divider{
  width:36px;
  height:3px;
  background:var(--accent);
  border-radius:999px;
}
.card .secondary-value{
  font-family:var(--font-body);
  font-style:italic;
  font-weight:600;
  font-size:1.8rem;
  line-height:1.2;
  text-wrap:balance;
  overflow-wrap:anywhere;
}
.source-badge{
  align-self:center;
  font-family:var(--font-mono);
  font-size:0.6rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink-dim);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 10px;
  margin-top:4px;
}
/* ---------- picture cards (flags, outlines, jerseys…) ---------- */
/* name band: fixed height, so the name's centre is at the same place on every card */
.card .card-top{flex:0 0 76px; display:flex; align-items:center; justify-content:center; min-width:0;}
.card .divider{align-self:center; flex:0 0 auto; margin:6px 0 10px;}
/* the rest of the card holds a square, centred; the answer sits in its middle */
.card .card-bottom{flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center;
                   container-type:size;}
.card .card-square{width:min(100cqw, 100cqh); height:min(100cqw, 100cqh);
                   display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;}
.card-image{
  width:100%;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px 0;
}
.card-img, .card-svg{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}
.card-img{border-radius:6px; box-shadow:0 0 0 1px var(--line);}
.card-svg{width:100%;}
.card-mask{
  width:100%;
  height:100%;
  background:var(--ink);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
.toast.has-thumb{display:flex; align-items:center; gap:12px;}
.toast .toast-text{flex:1 1 auto;}
.toast-thumb{flex:0 0 auto; width:64px; height:44px; display:flex; align-items:center; justify-content:center;}
.toast-thumb .card-img, .toast-thumb .card-svg{height:100%; width:100%;}
.toast-thumb .card-img{box-shadow:0 0 0 1px var(--line); border-radius:3px;}

.stamp{
  z-index:2;
  position:absolute;
  top:34px;
  font-family:var(--font-display);
  font-size:1.8rem;
  letter-spacing:0.08em;
  padding:6px 16px;
  border-radius:10px;
  border:4px solid;
  opacity:0;
  pointer-events:none;
}
.stamp.match{right:18px; color:var(--good); border-color:var(--good); transform:rotate(-12deg);}
.stamp.mismatch{left:18px; color:var(--bad); border-color:var(--bad); transform:rotate(12deg);}

.swipe-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  margin-top:18px;
}
.swipe-btn{
  width:64px;
  height:64px;
  border-radius:50%;
  border:none;
  font-size:1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .12s ease;
}
.swipe-btn:active{transform:scale(0.92);}
.swipe-btn.no{background:var(--surface); color:var(--bad); border:2px solid var(--bad);}
.swipe-btn.yes{background:var(--surface); color:var(--good); border:2px solid var(--good);}
.swipe-hint{
  text-align:center;
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.swipe-hint .hint-pointer{display:none;}
@media (hover:hover) and (pointer:fine){
  .swipe-hint .hint-touch{display:none;}
  .swipe-hint .hint-pointer{display:inline;}
}

.toast{
  font-family:var(--font-body);
  font-size:0.85rem;
  line-height:1.4;
  padding:12px 14px;
  border-radius:12px;
  background:var(--surface-2);
  border-left:4px solid var(--line);
  min-height:62px;
  /* hidden until a swipe flashes it (engine flashToast: 1s, then fade) */
  opacity:0;
  transition:opacity .15s ease;
}
.toast.show{opacity:1; transition:none;}
.toast.ok{border-left-color:var(--good);}
.toast.no{border-left-color:var(--bad);}
.toast b{font-weight:800;}

/* ---------- end screen ---------- */
.grade{
  text-align:center;
  padding:10px 0 4px;
}
.grade .pct{
  font-family:var(--font-display);
  font-size:4.2rem;
  line-height:1;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.grade .tier{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-size:0.95rem;
  margin-top:4px;
}
.grade .tier-desc{
  color:var(--ink-dim);
  font-size:0.82rem;
  margin-top:6px;
}
.stat-row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
  margin:18px 0;
}
.stat{
  text-align:center;
  background:var(--surface-2);
  border-radius:14px;
  padding:12px 6px;
}
.stat .num{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:1.3rem;
  font-variant-numeric:tabular-nums;
}
.stat .lbl{
  font-family:var(--font-mono);
  font-size:0.6rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin-top:2px;
}
.footnote{
  font-family:var(--font-mono);
  font-size:0.68rem;
  color:var(--ink-dim);
  text-align:center;
  letter-spacing:0.02em;
}
/* short phones (iPhone SE etc.): tighten so the buttons stay on screen */
@media (max-height:700px){
  body{padding-top:max(12px, env(safe-area-inset-top));}
  .stage{gap:12px;}
  .progress-track{margin-bottom:12px;}
  .swipe-controls{margin-top:12px;}
  .swipe-btn{width:58px; height:58px;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important;}
}

/* ---------- pick-one cards (cfg.answerMode "choice") ---------- */
.sg-choice .stack{--sg-chrome:480px; height:max(190px, min(calc(100cqw + 93px), calc(100svh - var(--sg-chrome)))); touch-action:auto;}
.sg-choice .card .card-square{width:100%; height:100%;}
.sg-choice .card{cursor:default;}
/* above the card, or the card's shadow falls across the buttons */
.choice-grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px;}
.choice-grid[hidden]{display:none;}
.choice-btn{font-family:var(--font-display); font-size:2rem; line-height:1; min-height:58px; border-radius:14px; cursor:pointer;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); transition:transform .12s ease, border-color .12s ease;}
.choice-btn:active{transform:scale(0.97);}
.choice-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.choice-btn.none{grid-column:1 / -1; min-height:46px; font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-dim);}
.choice-btn.picked{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 18%, var(--surface));}
.chip[disabled]{opacity:.4; cursor:not-allowed;}
@media (hover:hover){ .choice-btn:not([disabled]):hover{border-color:var(--accent);} }
/* short phones: smaller buttons and name band, so the card keeps its picture */
@media (max-height:720px){
  .sg-choice .stack{--sg-chrome:405px;}
  .sg-choice #sg-hint{display:none;}
  .sg-choice .choice-grid{gap:8px; margin-top:10px;}
  .sg-choice .choice-btn{min-height:48px; font-size:1.7rem;}
  .sg-choice .choice-btn.none{min-height:44px; font-size:.72rem;}
  .sg-choice .card{padding:8px 14px 10px;}
  .sg-choice .card .card-top{flex-basis:50px;}
  .sg-choice .card .divider{margin:2px 0 6px;}
}