/* Guess the Lines — "The Board".
   A dark sportsbook board. Amber is you, green is whoever was closest, everything else stays
   quiet. Numbers are monospaced so they line up; labels are condensed caps. Indigo marks the
   night games, sky blue the ones played abroad. Behind it all: a turf field under stadium
   lights, with a little Jersey Shore sunset for GTL. */

:root {
  --bg: #0a0d12;
  --glass: rgba(10, 13, 18, 0.78);
  --panel: #121720;
  --panel-2: #0e131a;
  --raise: #19202b;
  --raise-2: #222b38;
  --hair: rgba(255, 255, 255, 0.07);
  --hair-2: rgba(255, 255, 255, 0.12);
  --hair-3: rgba(255, 255, 255, 0.22);
  --text: #f1f4f8;
  --text-2: #c7cfda;
  --muted: #8d98a8;
  --amber: #fbbf24;
  --amber-2: #fde68a;
  --amber-wash: rgba(251, 191, 36, 0.11);
  --amber-edge: rgba(251, 191, 36, 0.6);
  --on-amber: #1b1404;
  --green: #34d399;
  --green-2: #8ff0c9;
  --green-wash: rgba(52, 211, 153, 0.11);
  --green-edge: rgba(52, 211, 153, 0.62);
  --on-green: #04130c;
  --orange: #fdba74;
  --night: #c7d2fe;
  --night-wash: rgba(129, 140, 248, 0.13);
  --night-edge: rgba(129, 140, 248, 0.4);
  --abroad: #bae6fd;
  --abroad-wash: rgba(56, 189, 248, 0.12);
  --abroad-edge: rgba(56, 189, 248, 0.42);
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --pop: cubic-bezier(0.34, 1.4, 0.64, 1);
  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: transparent; /* the field below shows through */
  color: var(--text);
  font: 400 15px/1.4 var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* The field: stadium lights and a sunset glow over dark turf, yard lines every 5 "yards". */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='260' viewBox='0 0 600 260'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fbbf24'/%3E%3Cstop offset='.55' stop-color='%23fb923c'/%3E%3Cstop offset='1' stop-color='%23f472b6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='300' cy='130' r='122' fill='none' stroke='white' stroke-opacity='.07' stroke-width='4'/%3E%3Ctext x='300' y='172' text-anchor='middle' font-family='Impact,Haettenschweiler,Arial Narrow Bold,sans-serif' font-size='132' font-weight='900' letter-spacing='6' fill='url(%23g)' fill-opacity='.13'%3EGTL%3C/text%3E%3C/svg%3E") center 55% / min(92vw, 560px) auto no-repeat,
    radial-gradient(55% 34% at 14% -4%, rgba(255, 240, 200, 0.3), transparent 70%),
    radial-gradient(55% 34% at 86% -4%, rgba(255, 240, 200, 0.26), transparent 70%),
    radial-gradient(90% 45% at 100% 105%, rgba(244, 114, 182, 0.14), transparent 70%),
    radial-gradient(90% 45% at 0% 105%, rgba(251, 146, 60, 0.12), transparent 70%),
    linear-gradient(90deg, transparent 0 18px, rgba(255, 255, 255, 0.06) 18px 20px, transparent 20px calc(100% - 20px), rgba(255, 255, 255, 0.06) calc(100% - 20px) calc(100% - 18px), transparent calc(100% - 18px)),
    repeating-linear-gradient(180deg, transparent 0 110px, rgba(255, 255, 255, 0.07) 110px 112px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.012) 0 56px, transparent 56px 112px),
    linear-gradient(180deg, #0d2318 0%, #0a1912 45%, #08110d 100%);
}
button,
input { font: inherit; color: inherit; }
button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.14s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease), opacity 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
button:active:not(:disabled) { transform: scale(0.96); }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 6px; }
.mono { font-family: var(--mono); }
.dim { color: var(--muted); font-weight: 500; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg { flex: none; }

#app { max-width: 480px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }
#main { flex: 1; padding-bottom: 28px; }
#foot {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  backdrop-filter: saturate(170%) blur(18px);
  border-top: 1px solid var(--hair);
}

.view { animation: fade 0.24s var(--ease) both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.demo {
  margin: 0;
  padding: 9px 20px;
  font-size: 12px;
  color: var(--amber-2);
  background: var(--amber-wash);
  border-bottom: 1px solid rgba(251, 191, 36, 0.18);
}
.demo b { font-weight: 600; letter-spacing: 0.08em; }

/* ---------- header ---------- */

.top { padding: calc(env(safe-area-inset-top) + 18px) 20px 0; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark { width: 24px; height: 24px; border-radius: 6px; }
.brand-name {
  font: 700 21px/1 var(--cond);
  letter-spacing: 0.12em;
  background: linear-gradient(90deg, var(--amber) 0%, #fb923c 55%, #f472b6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-tag { font: 600 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.hero { margin-top: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.title { margin: 0; font: 700 44px/0.9 var(--cond); letter-spacing: 0.01em; text-transform: uppercase; }
.subtitle { margin: 9px 0 0; font-size: 13.5px; color: var(--muted); }
.pager { display: flex; gap: 8px; padding-bottom: 2px; }
.pager button {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 22px;
  border: 1px solid var(--hair);
  background: var(--raise);
  color: var(--text-2);
}
.pager button:disabled { opacity: 0.28; }

.minibar {
  position: fixed;
  z-index: 6;
  top: 0;
  left: 0;
  right: 0;
  max-width: 480px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 12px) 20px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  backdrop-filter: saturate(170%) blur(18px);
  border-bottom: 1px solid var(--hair);
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.is-scrolled .minibar { transform: none; opacity: 1; }
.minibar-title { font: 700 19px/1 var(--cond); letter-spacing: 0.05em; text-transform: uppercase; }
.minibar-meta { font: 600 11px/1 var(--mono); letter-spacing: 0.08em; color: var(--muted); }

/* ---------- players ---------- */

.people { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 18px 20px 0; }
.person {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px 0 5px;
  border-radius: 18px;
  border: 1px solid var(--hair);
  background: var(--raise);
  color: var(--text-2);
  font: 600 13px/1 var(--body);
  white-space: nowrap;
}
.person .av {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--raise-2);
  color: var(--text);
  font: 700 11px/1 var(--body);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.person .ct { font: 600 11px/1 var(--mono); color: var(--muted); }
.person.is-me { background: var(--amber-wash); border-color: var(--amber-edge); color: var(--amber-2); }
.person.is-me .av { background: var(--amber); color: var(--on-amber); }
.person.is-me .ct { color: var(--amber-2); }
.person.is-locked .av { background: var(--green); color: var(--on-green); }
.person.is-ready { border-color: var(--green-edge); }
.here { font: 700 9.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }
.add {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px 0 9px;
  border-radius: 18px;
  border: 1px dashed var(--hair-3);
  background: none;
  color: var(--text-2);
  font: 600 13px/1 var(--body);
  white-space: nowrap;
}
.hint { margin: 14px 20px 0; font-size: 13px; color: var(--muted); }

/* ---------- the board ---------- */

.slot {
  margin: 0;
  padding: 24px 22px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.slot-k { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; }
.badge {
  height: 19px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 5px;
  border: 1px solid var(--night-edge);
  background: var(--night-wash);
  color: var(--night);
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge.is-abroad { border-color: var(--abroad-edge); background: var(--abroad-wash); color: var(--abroad); }
.row-tags { display: flex; gap: 6px; padding: 12px 12px 0; }
.row-tags + .row { padding-top: 8px; }
.matchup .badge { margin-left: 9px; position: relative; top: -3px; }
.panel { margin: 0 16px; background: var(--panel); border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; }
.game + .game { border-top: 1px solid var(--hair); }
.row { display: flex; align-items: center; gap: 6px; padding: 12px; }
.team {
  width: 64px;
  height: 52px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 12px;
  border: 1px solid var(--hair);
  background: var(--raise);
  color: var(--text);
}
.team b { font: 700 20px/1 var(--cond); letter-spacing: 0.04em; }
.logo { width: 28px; height: 28px; object-fit: contain; font: 700 16px/28px var(--cond); text-align: center; }
.mini-logo { width: 22px; height: 22px; margin-right: 5px; object-fit: contain; vertical-align: -4px; font-size: 0; }
.matchup i + .mini-logo { margin-left: 2px; }
.team small {
  max-width: 58px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 10px/1 var(--body);
  color: var(--muted);
  transition: color 0.2s var(--ease);
}
.team.is-fav { background: var(--amber-wash); border-color: var(--amber-edge); color: var(--amber-2); }
.team.is-fav small { color: var(--amber-2); }
.at { width: 14px; text-align: center; font-size: 11px; color: var(--muted); }
.stepper {
  margin-left: auto;
  height: 52px;
  display: flex;
  align-items: stretch;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: var(--panel-2);
  overflow: hidden;
}
.step { width: 44px; padding: 0; display: grid; place-items: center; border: 0; background: none; color: var(--text-2); }
.step:disabled { opacity: 0.25; }
.stepper.is-ro { border-color: transparent; background: none; }
.stepper.is-ro .step { display: none; }
.val {
  width: 58px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  background: none;
}
.val small { height: 10px; font: 700 9.5px/1 var(--mono); letter-spacing: 0.08em; color: var(--muted); }
.val b { font: 700 19px/1 var(--mono); color: var(--muted); }
.val.is-set small { color: var(--amber-2); }
.val.is-set b { color: var(--amber); }
.val:disabled { opacity: 1; }
.bump-a { animation: bump-a 0.28s var(--pop); }
.bump-b { animation: bump-b 0.28s var(--pop); }
@keyframes bump-a { 40% { transform: scale(1.16); } }
@keyframes bump-b { 40% { transform: scale(1.16); } }
.row-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 0 14px 12px;
  margin-top: -2px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.row-foot b { color: var(--text); }
.row-foot .good { color: var(--green); }

/* ---------- dock + tabs ---------- */

.dock { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.meter {
  position: absolute;
  left: 0;
  top: -1px;
  height: 2px;
  width: var(--p, 0%);
  background: var(--amber);
  border-radius: 0 2px 2px 0;
  transition: width 0.45s var(--ease), background-color 0.3s var(--ease);
}
.meter.is-full { background: var(--green); }
.dock-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dock-txt b { font: 700 17px/1.05 var(--mono); }
.dock-txt small { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.tabs {
  height: calc(60px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hair);
}
.dock + .tabs { border-top-color: transparent; }
.tab {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  background: none;
  color: var(--muted);
  font: 600 10.5px/1 var(--body);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.tab.is-on { color: var(--amber); }

/* ---------- buttons ---------- */

.btn {
  height: 48px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
  border: 1px solid var(--hair-2);
  background: var(--raise);
  color: var(--text);
  font: 700 17px/1 var(--cond);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.btn-primary {
  background: var(--green);
  border-color: var(--green);
  color: var(--on-green);
  box-shadow: 0 8px 22px -10px rgba(52, 211, 153, 0.7);
}
.btn-primary:disabled { background: var(--raise); border-color: var(--hair); color: var(--muted); box-shadow: none; }
.btn:disabled:not(.btn-primary) { color: var(--muted); border-color: var(--hair); background: none; }
.btn-quiet { padding: 0 14px; background: none; border-color: transparent; color: var(--text-2); }
.btn-block { width: 100%; }
.row2 { display: flex; gap: 8px; }
.row2 > .btn { flex: 1; }
.spinner {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- results ---------- */

.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; padding: 20px 16px 0; }
.tile {
  min-width: 0;
  padding: 12px 12px 11px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-radius: 16px;
  border: 1px solid var(--hair);
  background: var(--panel);
}
.tile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1.2 var(--body); color: var(--text-2); }
.tile-num { margin-top: 4px; font: 700 32px/1 var(--mono); }
.tile-cap { font-size: 11px; color: var(--muted); }
.tile.is-me .tile-name { color: var(--amber-2); }
.tile.is-win { background: var(--green-wash); border-color: var(--green-edge); }
.tile.is-win .tile-name { color: var(--green-2); }
.tag {
  align-self: flex-start;
  margin-top: 6px;
  padding: 4px 7px;
  border-radius: 6px;
  font: 700 9.5px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tag-green { background: var(--green); color: var(--on-green); }
.tag-amber { background: var(--amber); color: var(--on-amber); }
.result { padding: 12px; }
.result + .result { border-top: 1px solid var(--hair); }
.result-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.matchup { font: 700 20px/1 var(--cond); letter-spacing: 0.04em; }
.matchup i { margin: 0 3px; font-style: normal; font-weight: 600; color: var(--muted); }
.line {
  height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  border: 1px solid var(--hair-2);
  background: var(--panel-2);
}
.line small { font: 600 9.5px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.line b { font: 700 15px/1 var(--mono); }
.line.is-edited { border-style: dashed; }
.cells { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; }
.cell {
  min-width: 0;
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.035);
}
.cell-name {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 600 11.5px/1.1 var(--body);
  color: var(--muted);
}
.cell-pick { white-space: nowrap; font: 700 14px/1.1 var(--mono); }
.cell-off { font: 500 11px/1 var(--mono); color: var(--muted); }
.cell.is-me .cell-name { color: var(--amber-2); }
.cell.is-win { background: var(--green-wash); border-color: var(--green-edge); }
.cell.is-win .cell-name,
.cell.is-win .cell-off { color: var(--green-2); }
.cell.is-empty .cell-pick { color: var(--muted); }
.exact { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--green) !important; }
.flag { font: 700 9.5px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); }
.noline { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.enter { animation: rise 0.55s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.tile.enter.is-win { animation-name: rise, glow; animation-duration: 0.55s, 1.4s; }
@keyframes glow { 50% { box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18); } }

/* ---------- season ---------- */

.leader {
  margin: 20px 16px 0;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 18px;
  border: 1px solid var(--hair);
  background: var(--panel);
}
.eyebrow { font: 600 10.5px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber-2); }
.leader-name { margin-top: 8px; font: 700 34px/0.95 var(--cond); letter-spacing: 0.02em; text-transform: uppercase; }
.leader-cap { margin-top: 7px; font-size: 12.5px; color: var(--muted); }
.leader-num { font: 700 44px/1 var(--mono); color: var(--amber); text-align: right; }
.leader-unit { margin-top: 7px; font: 600 9.5px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-align: right; }
.table { margin: 10px 16px 0; overflow: hidden; border-radius: 18px; border: 1px solid var(--hair); background: var(--panel); }
.trow {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 46px 44px 42px 38px 38px;
  gap: 4px;
  align-items: center;
  padding: 12px 14px;
}
.trow + .trow { border-top: 1px solid var(--hair); }
.th { font: 600 9.5px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: right; }
.th:nth-child(-n + 2) { text-align: left; }
.td { text-align: right; font: 700 14px/1 var(--mono); }
.td-rank { font: 700 13px/1 var(--mono); color: var(--muted); }
.td-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 18px/1 var(--cond); letter-spacing: 0.04em; text-transform: uppercase; }
.td-since { display: block; margin-top: 3px; font: 500 10.5px/1 var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); }
.is-lead .td-rank,
.is-lead .td-avg { color: var(--amber); }
.is-me .td-name { color: var(--amber-2); }
.explain { margin: 0; padding: 12px 20px 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.explain b { font-weight: 600; color: var(--text-2); }
.section { margin: 0; padding: 26px 22px 9px; font: 600 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.weeks { padding: 0 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wtile {
  min-width: 0;
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: var(--panel);
}
.wtile-k { font: 600 10.5px/1 var(--mono); letter-spacing: 0.08em; color: var(--muted); }
.wtile-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 17px/1.05 var(--cond); letter-spacing: 0.05em; text-transform: uppercase; }
.wtile-score { font: 500 11px/1 var(--mono); color: var(--muted); }
.calls { padding: 8px 16px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.call { min-width: 0; padding: 12px; display: flex; flex-direction: column; gap: 5px; border-radius: 14px; border: 1px solid var(--hair); background: var(--panel); }
.call-k { display: flex; align-items: center; gap: 5px; font: 600 10.5px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; }
.call-k.good { color: var(--green-2); }
.call-k.bad { color: var(--orange); }
.call-v { font: 700 17px/1.1 var(--cond); letter-spacing: 0.04em; text-transform: uppercase; }
.call-c { font-size: 12px; line-height: 1.35; color: var(--muted); }

/* ---------- empty + loading ---------- */

.note {
  margin: 20px 16px 0;
  padding: 28px 20px;
  border-radius: 18px;
  border: 1px dashed var(--hair-2);
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.note .btn { margin-top: 16px; }
.skel {
  display: block;
  border-radius: 10px;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.035) 30%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.035) 70%);
  background-size: 240% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.skel-slot { width: 96px; height: 11px; margin: 24px 22px 9px; }
.skel-row { height: 76px; display: flex; align-items: center; gap: 6px; padding: 12px; }
.skel-row + .skel-row { border-top: 1px solid var(--hair); }
.skel-team { width: 64px; height: 52px; border-radius: 12px; }
.skel-step { width: 146px; height: 52px; margin-left: auto; border-radius: 14px; }

.landing { min-height: 100dvh; padding: calc(env(safe-area-inset-top) + 24px) 24px 32px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.landing .brand-mark { width: 56px; height: 56px; border-radius: 14px; }
.landing .title { font-size: 52px; }
.lead { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-2); }
.fine { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.noscript { padding: 24px; color: var(--text-2); }

/* ---------- the reveal deck ---------- */
/* After Go: one game per slide. The guesses come in, then (on a timer) the line card flips, the
   misses show, the closest guess lights up and the scoreboard ticks. Each slide is a fresh
   element, so the timeline replays on every Next. */

body.is-deck { overflow: hidden; }
.deck-wrap {
  --flip: 1.4s; /* the line flips */
  --after: 2.2s; /* winner, misses, scoreboard */
  position: fixed;
  inset: 0;
  z-index: 15;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(80% 45% at 50% -8%, rgba(255, 236, 179, 0.22), transparent 70%),
    radial-gradient(70% 40% at 100% 105%, rgba(244, 114, 182, 0.16), transparent 70%),
    radial-gradient(70% 40% at 0% 105%, rgba(251, 146, 60, 0.14), transparent 70%),
    #070c0a;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
}
.deck-wrap[hidden] { display: none; }
.deck-wrap.is-open { opacity: 1; transform: none; }
.deck {
  max-width: 640px;
  min-height: 100%;
  margin: 0 auto;
  padding-top: calc(env(safe-area-inset-top) + 8px);
  display: flex;
  flex-direction: column;
}
.show-top { height: 48px; padding: 0 16px 0 6px; display: flex; align-items: center; gap: 8px; }
.show-x { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 22px; background: none; color: var(--text-2); }
.show-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font: 700 15px/1 var(--cond);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}
.gtl {
  padding: 3px 7px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--amber), #fb923c 55%, #f472b6);
  color: #1b0a12;
  font: 800 13px/1 var(--cond);
  letter-spacing: 0.12em;
}
.show-count { font: 600 12px/1 var(--mono); letter-spacing: 0.06em; color: var(--muted); }
.ticks { display: flex; gap: 3px; padding: 4px 16px 0; }
.tick { flex: 1; height: 3px; border-radius: 2px; background: var(--hair-2); transition: background-color 0.35s var(--ease); }
.tick.is-done { background: var(--text-2); }
.tick.is-now { background: var(--amber); }
.score { display: flex; gap: 8px; padding: 14px 16px 0; overflow-x: auto; scrollbar-width: none; }
.sc {
  flex: 1 0 96px;
  min-width: 0;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: rgba(18, 23, 32, 0.85);
}
.sc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 16px/1 var(--cond); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); }
.sc.is-me .sc-name { color: var(--amber-2); }
.sc-num { display: inline-grid; font: 700 22px/1 var(--mono); }
.sc-num > span { grid-area: 1 / 1; text-align: right; }
.n-old { animation: num-out 0.25s var(--ease) var(--after) both; }
.n-new { color: var(--green); animation: num-in 0.5s var(--pop) calc(var(--after) + 0.1s) both; }
@keyframes num-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes num-in { from { opacity: 0; transform: translateY(10px) scale(0.6); } }

.stage { flex: 1; padding: 20px 16px 8px; display: flex; flex-direction: column; justify-content: center; gap: 16px; animation: stage-in 0.42s var(--ease) both; }
@keyframes stage-in { from { opacity: 0; transform: translateX(28px); } }
.stage-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.duel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; text-align: center; }
.duel-logo { display: block; width: clamp(88px, 27vw, 150px); height: clamp(88px, 27vw, 150px); margin: 0 auto; object-fit: contain; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.55)); font: 700 48px/1 var(--cond); text-align: center; }
.duel-team b { display: block; margin-top: 10px; font: 700 clamp(22px, 7vw, 38px)/1 var(--cond); letter-spacing: 0.05em; text-transform: uppercase; }
.duel-at { font: 600 15px/1 var(--mono); color: var(--muted); }
.tease { min-height: 14px; margin: -6px 0 0; text-align: center; font: 600 12px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); }

.guesses { display: flex; flex-direction: column; gap: 8px; }
.guess {
  position: relative;
  padding: 13px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: 'who off pick';
  align-items: center;
  column-gap: 14px;
  border-radius: 16px;
  border: 1px solid var(--hair);
  background: var(--panel);
  animation: rise 0.5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 90ms + 120ms);
}
.guess.is-win {
  animation: rise 0.5s var(--ease) calc(var(--i, 0) * 90ms + 120ms) both, win 0.45s var(--ease) var(--after) both;
}
@keyframes win { from { background: var(--panel); border-color: var(--hair); } to { background: var(--green-wash); border-color: var(--green-edge); } }
.guess-who { grid-area: who; min-width: 0; }
.guess-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 19px/1 var(--cond); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); }
.guess-pick { grid-area: pick; white-space: nowrap; font: 700 23px/1 var(--mono); }
.guess-off { grid-area: off; white-space: nowrap; font: 600 12px/1 var(--mono); letter-spacing: 0.04em; color: var(--muted); animation: fade 0.3s var(--ease) var(--after) both; }
.guess .flag { margin-top: 5px; animation: fade 0.3s var(--ease) var(--after) both; }
.guess.is-me .guess-name { color: var(--amber-2); }
.guess.is-empty .guess-pick { color: var(--muted); }
.guess.is-win .guess-name { animation: win-text 0.45s var(--ease) var(--after) both; }
.guess.is-win .guess-off { animation: fade 0.3s var(--ease) var(--after) both, win-text 0.45s var(--ease) var(--after) both; }
@keyframes win-text { from { color: var(--text-2); } to { color: var(--green-2); } }
.plus {
  position: absolute;
  top: -9px;
  right: 12px;
  padding: 4px 7px;
  border-radius: 7px;
  background: var(--green);
  color: var(--on-green);
  font: 700 12px/1 var(--mono);
  animation: pop 0.5s var(--pop) calc(var(--after) + 0.1s) both;
}
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } }

.vegas { perspective: 900px; }
.vegas-card { position: relative; height: 122px; transform-style: preserve-3d; animation: flip 0.8s var(--pop) var(--flip) both; }
@keyframes flip { from { transform: rotateX(0deg); } to { transform: rotateX(-180deg); } }
.vegas-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 20px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.vegas-face small { font: 600 11px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.vegas-front { border: 1px dashed var(--hair-3); background: repeating-linear-gradient(135deg, var(--panel) 0 12px, var(--panel-2) 12px 24px); }
.vegas-front b { font: 700 46px/1 var(--mono); color: var(--muted); }
.vegas-back { transform: rotateX(180deg); border: 1px solid var(--amber-edge); background: var(--raise); box-shadow: 0 0 40px -12px rgba(251, 191, 36, 0.45); }
.vegas-back b { font: 700 clamp(40px, 12vw, 64px)/1 var(--mono); color: var(--text); }
.vegas-back.is-none { border-style: dashed; border-color: var(--hair-3); box-shadow: none; }
.vegas-back.is-none b { font: 700 30px/1 var(--cond); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.say { min-height: 24px; margin: 0; text-align: center; font: 700 22px/1.1 var(--cond); letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-2); animation: rise 0.4s var(--ease) calc(var(--after) + 0.15s) both; }
.say.is-quiet { font: 500 14px/1.4 var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); }

.final { justify-content: flex-start; text-align: center; }
.final .eyebrow { color: var(--green-2); }
.final-who { margin: -6px 0 0; font: 700 clamp(38px, 11vw, 64px)/0.95 var(--cond); letter-spacing: 0.02em; text-transform: uppercase; }
.final .board { padding: 0; text-align: left; }

.show-foot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
  background: linear-gradient(to top, #070c0a 70%, rgba(7, 12, 10, 0));
}
.show-foot .btn { height: 56px; }
.show-back { width: 56px; flex: none; padding: 0; }
.show-back:disabled { opacity: 0.3; }
.show-next { flex: 1; font-size: 20px; }
.deck-wait { flex: 1; margin: 0; padding: 18px 0; text-align: center; font: 600 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.btn-go { min-width: 92px; font-size: 20px; background: linear-gradient(90deg, var(--amber), #fb923c 55%, #f472b6); border-color: transparent; color: #1b0a12; box-shadow: 0 8px 24px -10px rgba(244, 114, 182, 0.7); }

/* A laptop on the TV: the line card sits beside the guesses so a game fits on a 16:9 screen. */
@media (min-width: 760px) and (min-height: 560px) {
  .deck { max-width: 1060px; }
  .stage:not(.final) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: 'meta meta' 'duel duel' 'tease tease' 'guesses vegas' 'guesses say';
    grid-template-rows: auto auto auto auto 1fr;
    align-content: center;
    gap: 16px 28px;
  }
  .stage-meta { grid-area: meta; }
  .duel { grid-area: duel; }
  .tease { grid-area: tease; }
  .guesses { grid-area: guesses; }
  .vegas { grid-area: vegas; }
  .say { grid-area: say; align-self: start; }
  .duel-logo { width: 170px; height: 170px; }
  .duel-team b { font-size: 44px; }
  .guess { padding: 16px 20px; }
  .guess-name { font-size: 24px; }
  .guess-pick { font-size: 32px; }
  .vegas-card { height: 168px; }
  .vegas-back b { font-size: 84px; }
  .say { font-size: 30px; }
}

/* ---------- sheets ---------- */

.sheet-wrap { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; justify-content: flex-end; }
.sheet-wrap[hidden] { display: none; }
.backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: rgba(3, 5, 9, 0.62);
  opacity: 0;
  transition: opacity 0.26s var(--ease);
}
.backdrop:active:not(:disabled) { transform: none; }
.sheet {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 92dvh;
  margin: 0 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 18px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-radius: 24px 24px 0 0;
  border: 1px solid var(--hair-2);
  border-bottom: 0;
  background: #141a24;
  box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, 0.6);
  transform: translateY(104%);
  transition: transform 0.36s var(--ease);
}
.sheet-wrap.is-open .backdrop { opacity: 1; }
.sheet-wrap.is-open .sheet { transform: none; }
.sheet-head { margin: 0 -18px; padding: 6px 18px 0; touch-action: none; cursor: grab; }
.grabber { width: 38px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: var(--hair-3); }
.sheet-title { margin: 0; font: 700 26px/1 var(--cond); letter-spacing: 0.03em; text-transform: uppercase; }
.sheet-sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.sheet-meta { margin: 7px 0 0; font: 600 11.5px/1 var(--mono); letter-spacing: 0.06em; color: var(--muted); }
.sheet-hint { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.seg-btn {
  height: 50px;
  border-radius: 12px;
  border: 1px solid var(--hair);
  background: var(--raise);
  font: 700 21px/1 var(--cond);
  letter-spacing: 0.05em;
}
.seg-btn.is-on { background: var(--amber-wash); border-color: var(--amber-edge); color: var(--amber-2); }
.num-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; transition: opacity 0.2s var(--ease); }
.num-grid.is-off { opacity: 0.32; }
.num { height: 46px; padding: 0; border-radius: 10px; border: 1px solid var(--hair); background: var(--panel-2); font: 700 14px/1 var(--mono); }
.num.is-key { border-color: var(--hair-3); color: var(--amber-2); }
.num.is-on { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
.name-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.name-grid .btn { font-size: 18px; }
.name-grid .btn.is-me { background: var(--amber-wash); border-color: var(--amber-edge); color: var(--amber-2); }
.form-row { display: flex; gap: 8px; }
.field,
.link-box {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--hair-2);
  background: var(--panel-2);
  font-size: 16px;
  transition: border-color 0.2s var(--ease);
}
.field:focus { outline: none; border-color: var(--amber-edge); }
.field::placeholder { color: var(--muted); }
.link-box { font: 500 12px/1 var(--mono); color: var(--text-2); }
.opt { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.025); }
.opt-k { margin: 0; display: flex; align-items: center; gap: 8px; font: 700 16px/1 var(--cond); letter-spacing: 0.08em; text-transform: uppercase; }
.opt-k svg { color: var(--amber); }

.toast {
  position: fixed;
  z-index: 30;
  left: 50%;
  top: calc(env(safe-area-inset-top) + 12px);
  max-width: calc(100% - 32px);
  padding: 11px 15px;
  border-radius: 14px;
  border: 1px solid var(--hair-2);
  background: #1c2430;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
  font-size: 13.5px;
  transform: translate(-50%, -16px);
  opacity: 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.toast[hidden] { display: none; }

@media (max-width: 370px) {
  .title { font-size: 38px; }
  .team { width: 58px; }
  .team small { max-width: 52px; }
  .val { width: 52px; }
  .step { width: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}