/* Gender Wars — all visual styling lives here, driven by the variables below.
   Change the look by editing tokens; templates only use class names. */

:root {
  color-scheme: light;

  /* Ground and text: a plain white page */
  --bg: #ffffff;
  --text: #111114;
  --text-2: rgba(60, 60, 67, 0.85);      /* secondary text: ~6:1 on white */
  --text-3: rgba(60, 60, 67, 0.55);      /* placeholders, disabled */
  --line: rgba(0, 0, 0, 0.08);
  --surface: #f5f5f7;                    /* cards */
  --surface-2: #e9e9ee;                  /* tracks, chips, empty cells */
  --surface-edge: rgba(0, 0, 0, 0.05);
  --on-accent: #ffffff;                  /* text on a team-colored fill */
  --focus: #111114;

  /* Teams: fills, plus darker inks for text on white */
  --team-m: #007aff;  --team-m-rgb: 0, 122, 255;   --team-m-ink: #0060cc;
  --team-f: #ff2d55;  --team-f-rgb: 255, 45, 85;   --team-f-ink: #d70f3c;
  --team-b: #af52de;  --team-b-rgb: 175, 82, 222;  --team-b-ink: #8e35bd;
  --team-n: #34c759;  --team-n-rgb: 52, 199, 89;   --team-n-ink: #1f8a3c;
  --neutral-rgb: 17, 17, 20;

  /* Answer tiers */
  --tier-gem: linear-gradient(160deg, #5ac8fa, #007aff);
  --tier-mid: linear-gradient(160deg, #ffb340, #ff9500);
  --tier-low: #c7c7cc;
  --tier-zero: #e9e9ee;
  --danger: #d70015;

  /* Cards are flat light-gray panels. The floating tab bar and the pinned
     answer clock are frosted white so content can scroll under them. */
  --glass: var(--surface);
  --glass-edge: var(--surface-edge);
  --glass-shine: 0 0 0 transparent;
  --glass-shadow: 0 0 0 transparent;
  --bar-glass: rgba(255, 255, 255, 0.86);
  --bar-edge: rgba(0, 0, 0, 0.08);
  --bar-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  --bar-blur: blur(20px) saturate(180%);
  --timer-glass: rgba(255, 255, 255, 0.94);
  --selected-fill: rgba(0, 0, 0, 0.06);
  --toast-bg: #1c1c1e;
  --toast-text: #ffffff;

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --font-num: ui-rounded, "SF Pro Rounded", -apple-system, "Inter", sans-serif;
  --fs-display: 34px;
  --fs-title: 20px;
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-tiny: 13px;
  --fs-score: 24px;
  --fs-total: 48px;
  --fs-clock: 40px;

  /* Shape and space */
  --r-card: 22px;
  --r-tile: 22px;
  --r-pill: 999px;
  --r-chip: 12px;
  --gap: 14px;
  --pad: 18px;
  --page-x: 16px;
  --tabbar-h: 66px;
  --tap: 52px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.35;
  letter-spacing: -0.2px;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Background orbs ---------- */
.orbs { display: none; position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.orb {
  position: absolute; border-radius: 50%;
  width: calc(var(--size) * var(--scale, 1)); height: calc(var(--size) * var(--scale, 1));
  background: radial-gradient(circle at center, rgba(var(--rgb), var(--orb-strength)) 0%, rgba(var(--rgb), 0) 70%);
  transition: width 1.2s ease, height 1.2s ease;
  animation: drift 16s ease-in-out infinite;
}
.orb.f { --rgb: var(--team-f-rgb); --size: var(--orb-size); --scale: var(--orb-f-scale); left: -220px; top: -220px; }
.orb.b { --rgb: var(--team-b-rgb); --size: var(--orb-size); --scale: var(--orb-b-scale); right: -210px; top: 32vh; animation-direction: reverse; }
.orb.m { --rgb: var(--team-m-rgb); --size: var(--orb-size); --scale: var(--orb-m-scale); left: -200px; bottom: 6vh; animation-duration: 19s; }
.orb.n { --rgb: var(--team-n-rgb); --size: var(--orb-size); --scale: var(--orb-n-scale); right: -120px; bottom: -120px; animation-duration: 21s; animation-direction: reverse; }
@keyframes drift { 50% { transform: translate(16px, -12px); } }

/* ---------- Page ---------- */
.page {
  position: relative; z-index: 1;
  max-width: 520px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 28px) var(--page-x) calc(env(safe-area-inset-bottom, 0px) + var(--tabbar-h) + 48px);
  display: flex; flex-direction: column; gap: var(--gap);
}
.page.no-tabs { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 32px); }

.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 6px; }
.top .kicker { font-size: var(--fs-small); font-weight: 600; color: var(--text-2); }
.top h1 { margin: 2px 0 0; font-size: var(--fs-display); line-height: 1.05; font-weight: 800; letter-spacing: 0.2px; }
.lede { margin: 2px 6px 0; font-size: var(--fs-small); line-height: 1.4; color: var(--text-2); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--surface-edge);
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--team-f); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; transform: scale(0.8); } }

/* ---------- Cards ---------- */
.card {
  border-radius: var(--r-card); padding: var(--pad);
  background: var(--glass); border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shine), var(--glass-shadow);
}
.card.list { padding-top: 6px; padding-bottom: 6px; }
.card.options { overflow: hidden; }
.card.accent { border: 1.5px solid rgba(var(--team-rgb, var(--neutral-rgb)), 0.75); }
.card h2 { margin: 0; font-size: var(--fs-title); font-weight: 700; }
.card .label { font-size: var(--fs-tiny); font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-2); }
.card p { margin: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.foot { font-size: var(--fs-small); line-height: 1.4; color: var(--text-2); margin: 8px 0 4px; }
.note { margin: 0 8px; font-size: var(--fs-small); line-height: 1.4; color: var(--text-2); }

.hero .topic { margin: 6px 0 0; font-size: var(--fs-display); line-height: 1.05; font-weight: 800; letter-spacing: -0.6px; }
.hero .by { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--fs-small); color: var(--text-2); }
.yesterday .winner { margin: 6px 0 0; font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -1px; color: var(--team-ink, var(--text)); }
.yesterday .summary { margin-top: 8px; font-size: var(--fs-small); line-height: 1.4; color: var(--text-2); }
b.team-name { color: var(--team-ink); font-weight: 700; }

/* Team identity: every element with data-team gets its colors. */
[data-team="M"] { --team-color: var(--team-m); --team-rgb: var(--team-m-rgb); --team-ink: var(--team-m-ink); }
[data-team="F"] { --team-color: var(--team-f); --team-rgb: var(--team-f-rgb); --team-ink: var(--team-f-ink); }
[data-team="B"] { --team-color: var(--team-b); --team-rgb: var(--team-b-rgb); --team-ink: var(--team-b-ink); }
[data-team="N"] { --team-color: var(--team-n); --team-rgb: var(--team-n-rgb); --team-ink: var(--team-n-ink); }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--team-color); }
.dot.sm { width: 9px; height: 9px; }

/* ---------- Rows ---------- */
.row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.row + .row { border-top: 0.5px solid var(--line); }
.row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.row .name { font-size: var(--fs-body); font-weight: 600; }
.row .sub { font-size: var(--fs-small); color: var(--text-2); }
.row .score { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-score); font-weight: 700; text-align: right; min-width: 58px; }
.badge { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; padding: 3px 8px; border-radius: var(--r-pill); color: var(--on-accent); background: var(--team-color, var(--surface-2)); }
.badge.plain { background: var(--surface-2); color: var(--text); }
.track { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin-top: 3px; }
.track span { display: block; height: 100%; width: var(--w, 0%); border-radius: 3px; background: var(--team-color); transition: width 0.6s ease; }

/* ---------- Team picker ---------- */
.teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.team-tile {
  height: 164px; padding: 16px; border-radius: var(--r-card); text-align: left;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shine), var(--glass-shadow);
}
.team-tile .top-line { display: flex; align-items: center; justify-content: space-between; }
.team-tile .dot { width: 16px; height: 16px; }
.team-tile .tname { font-size: 24px; font-weight: 800; letter-spacing: -0.4px; }
.team-tile .tsub { font-size: var(--fs-small); color: var(--text-2); }
.team-tile[aria-checked="true"] .tsub { color: var(--on-accent); }
.team-tile .check { width: 28px; height: 28px; border-radius: 50%; display: none; align-items: center; justify-content: center; background: var(--on-accent); color: var(--team-ink); }
.team-tile[aria-checked="true"] {
  background: var(--team-color);
  border: 1px solid transparent; color: var(--on-accent);
  box-shadow: 0 10px 24px rgba(var(--team-rgb), 0.3);
}
.team-tile[aria-checked="true"] .check { display: flex; }
.lock-note { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shine); font-size: var(--fs-small); color: var(--text-2); }

/* ---------- Buttons ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: var(--tap); padding: 0 20px; border-radius: var(--r-pill);
  border: none; font-size: var(--fs-body); font-weight: 700; color: var(--on-accent); text-decoration: none;
  background: linear-gradient(180deg, rgba(var(--team-rgb, var(--neutral-rgb)), 0.85), rgba(var(--team-rgb, var(--neutral-rgb)), 1));
  box-shadow: 0 6px 16px rgba(var(--team-rgb, 0, 0, 0), 0.25);
}
.btn.glass { background: var(--surface); color: var(--text); border: 1px solid var(--surface-edge); box-shadow: none; }
.btn:disabled { background: var(--surface-2); color: var(--text-3); box-shadow: none; border: 1px solid transparent; cursor: default; }
.btn-stack { display: flex; flex-direction: column; gap: 10px; }
.link-btn { background: none; border: none; color: var(--text-2); font-size: var(--fs-small); font-weight: 600; text-decoration: underline; padding: 8px; }

/* ---------- Play ---------- */
.answers { padding: 4px 0; }
.answer { display: flex; align-items: center; gap: 14px; height: 58px; padding: 0 var(--pad); }
.answer + .answer { border-top: 0.5px solid var(--line); }
.answer { scroll-margin-top: 120px; scroll-margin-bottom: 96px; } /* focused fields clear the pinned clock and tab bar */
.answer .n { width: 26px; height: 26px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-num); font-size: 14px; font-weight: 700; background: var(--surface-2); color: var(--text-2); }
.answer.filled .n { background: var(--team-color); color: var(--on-accent); }
.answer input { flex: 1; min-width: 0; border: none; background: transparent; font-size: 19px; font-weight: 500; padding: 0; outline: none; }
.answer input::placeholder { color: var(--text-3); }

/* ---------- Start card and answer clock ---------- */
.start { display: flex; flex-direction: column; gap: 10px; }
.start h2 { font-size: 26px; line-height: 1.1; font-weight: 800; letter-spacing: -0.4px; }
.start .summary { font-size: var(--fs-small); line-height: 1.4; color: var(--text-2); }
.start .summary b { color: var(--text); }
.lede-in { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--text-2); }
/* The clock stays pinned to the top while answering. --vv-top follows the visible
   area when the phone keyboard pans the page (set in app.js). Content scrolls
   under it, so it's near-opaque with the second (and last) blur layer. */
.timer {
  padding-top: 14px; padding-bottom: 16px;
  position: sticky; z-index: 5;
  top: calc(var(--vv-top, 0px) + env(safe-area-inset-top, 0px) + 8px);
  background: var(--timer-glass);
  -webkit-backdrop-filter: var(--bar-blur); backdrop-filter: var(--bar-blur);
}
.timer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.timer .label { text-transform: none; letter-spacing: 0; font-size: var(--fs-small); font-weight: 600; }
.clock { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-clock); font-weight: 800; line-height: 1; }
.timer .track { height: 8px; border-radius: 4px; }
.timer .track span { transition: width 0.2s linear; }
.timer.urgent .clock { color: var(--danger); }
.timer.urgent .track span { background: var(--danger); }
.answer input:disabled { color: var(--text-2); }

/* ---------- Results ---------- */
.tier { width: 34px; height: 34px; flex: none; border-radius: var(--r-chip); display: flex; align-items: center; justify-content: center; box-shadow: var(--glass-shine); }
.tier.gem { background: var(--tier-gem); }
.tier.mid { background: var(--tier-mid); }
.tier.low { background: var(--tier-low); }
.tier.zero { background: var(--tier-zero); color: var(--text-2); }
.tier.gem, .tier.mid, .tier.low { color: var(--on-accent); }
.row.zero .name { color: var(--text-2); text-decoration: line-through; }
.row.zero .score { color: var(--text-3); }
.total { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.total .big { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-total); font-weight: 800; letter-spacing: -1px; line-height: 1; }
.total .what { font-size: var(--fs-title); font-weight: 800; }

/* ---------- Vote ---------- */
.options { padding: 4px 0; }
.option {
  width: 100%; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px var(--pad);
  border: none; background: transparent; text-align: left;
}
.option + .option { border-top: 0.5px solid var(--line); }
.option .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.option .oname { font-size: 18px; font-weight: 500; }
.option .backers { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); }
.option .mine { font-size: var(--fs-tiny); font-weight: 700; color: var(--team-ink); display: none; white-space: nowrap; }
.option .radio { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1.5px solid var(--text-3); display: flex; align-items: center; justify-content: center; }
.option .radio svg { display: none; }
.option[aria-checked="true"] { background: rgba(var(--team-rgb), 0.1); }
.option[aria-checked="true"] .oname { font-weight: 700; }
.option[aria-checked="true"] .mine { display: inline; }
.option[aria-checked="true"] .radio { border: none; background: var(--team-color); color: var(--on-accent); }
.option[aria-checked="true"] .radio svg { display: block; }
.option:disabled { cursor: default; opacity: 0.6; }

/* ---------- Season ---------- */
.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.calendar .d {
  height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-size: 14px; font-weight: 700; color: var(--text-3);
  background: var(--surface-2); border: 1px solid transparent;
}
.calendar .d[data-team] { background: var(--team-color); color: var(--on-accent); border-color: transparent; }
.calendar .d.none { background: var(--tier-low); color: var(--text); }
.calendar .d.today { border: 1.5px solid var(--text); color: var(--text); animation: pulse 2s ease-in-out infinite; }
.rank { width: 22px; font-family: var(--font-num); font-size: var(--fs-body); font-weight: 700; color: var(--text-2); }
.wins { display: flex; flex-direction: column; align-items: flex-end; }
.wins .num { font-size: 28px; font-weight: 800; line-height: 1; }
.wins span:last-child { font-size: var(--fs-tiny); color: var(--text-2); }

/* ---------- Tab bar: the one blurred layer ---------- */
.tabbar {
  position: fixed; z-index: 10; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  display: flex; gap: 4px; padding: 6px; border-radius: var(--r-pill);
  background: var(--bar-glass); border: 1px solid var(--bar-edge);
  box-shadow: var(--bar-shadow);
  -webkit-backdrop-filter: var(--bar-blur); backdrop-filter: var(--bar-blur);
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 80px; padding: 8px 14px; border-radius: var(--r-pill); border: none; background: transparent;
  font-size: 12px; font-weight: 600; color: var(--text-2);
}
.tab[aria-current="page"] { color: var(--text); background: var(--selected-fill); }

/* ---------- Misc ---------- */
.turnstile { display: flex; justify-content: center; min-height: 0; }
.toast {
  position: fixed; z-index: 20; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--tabbar-h) + 36px);
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  padding: 11px 18px; border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 600;
  background: var(--toast-bg); color: var(--toast-text); border: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transition: opacity 0.2s, transform 0.2s; max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.empty { text-align: center; padding: 60px 20px; color: var(--text-2); }

/* ---------- Admin ---------- */
.admin { max-width: 860px; }
.admin table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.admin th, .admin td { text-align: left; padding: 8px 6px; border-top: 0.5px solid var(--line); }
.admin th { color: var(--text-2); font-weight: 600; }
.admin select, .admin input[type="password"], .admin input[type="file"] {
  width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--line); color: var(--text);
}
.admin .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.admin .scroll { overflow-x: auto; }
.admin label { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-small); color: var(--text-2); }
.admin .check-label { flex-direction: row; align-items: center; gap: 10px; }
.err { color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  .orb, .live-dot, .calendar .d.today { animation: none; }
  .track span, .orb, .toast { transition: none; }
}
.team-tile[aria-checked="true"] .dot { background: var(--on-accent); }