/* Layout: phone = one column (question, pie, answers); desktop = pie left, play panel right.
   The pixel ballpark (js/pixel-bg.js) sits behind everything. The header is styled as the stadium
   scoreboard, the pie sits straight on the field, and the text lives on small frosted-glass cards. */
:root {
  --bg: #F3F6F1; --surface: #FFFFFF; --fg: #13211A; --muted: #56685D; --line: #DAE2D8;
  --ink: #13211A; --on-ink: #FFFFFF; --empty: #E2E9E0;
  --grass: #4A9A57; --grass-2: #428E4F; --dirt: #C98B57; --chalk: #FFFFFF;
  --s1: #FF1F4B; --s2: #FF8A00; --s3: #00B39F; --s4: #2E5BFF; --s5: #A72BFF;
  --good: #1F8F4E; --mid: #C98710; --bad: #C8323F;
  --display: "Graduate", "Rockwell", Georgia, serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --glass: rgb(243 246 241 / 0.74); --glass-card: rgb(255 255 255 / 0.6); --glass-edge: rgb(255 255 255 / 0.7); --glass-line: rgb(19 33 26 / 0.14);
  --board: #16242C; --board-edge: #3E5566; --bulb: #F4C430; --board-text: #E9EEF0; --board-muted: #9DB2BE;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #0D1612; --surface: #15211B; --fg: #EAF1EC; --muted: #9BB0A3; --line: #25372D;
  --ink: #EAF1EC; --on-ink: #0D1612; --empty: #1F2F26;
  --grass: #2F6E3C; --grass-2: #2A6336; --dirt: #9C6A45; --chalk: #E8EFE9;
  --s1: #FF3D63; --s2: #FF9A1F; --s3: #12D6BC; --s4: #4A78FF; --s5: #B64DFF;
  --good: #3CC07A; --mid: #F0B53A; --bad: #FF6B76;
  --glass: rgb(13 22 18 / 0.72); --glass-card: rgb(21 33 27 / 0.6); --glass-edge: rgb(255 255 255 / 0.14); --glass-line: rgb(255 255 255 / 0.12);
  --board: #0B1218; --board-edge: #1E2B36; --bulb: #FFD44D; --board-text: #E9EEF0; --board-muted: #8DA2AE;
  color-scheme: dark } }

* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 16px; line-height: 1.45;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px) }
[hidden] { display: none !important }
button { font: inherit; color: inherit }
button:focus-visible, a:focus-visible { outline: 2px solid var(--s4); outline-offset: 2px }

.app { max-width: 1040px; margin: 0 auto; padding-inline: 16px; padding-block: 8px 24px; display: flex; flex-direction: column; gap: 12px; min-height: 100vh }

/* header */
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 2px solid var(--line) }
.icons { display: flex; gap: 6px }
.top > .icons:first-child { justify-self: start }
.top > .icons:last-child { justify-self: end }
.brand { text-align: center }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 5.4vw, 2.2rem); margin: 0; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap }
h1 a { color: inherit; text-decoration: none }
.sub { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); margin-top: 4px; letter-spacing: 0.04em }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 700; font-size: 1.05rem; display: grid; place-items: center; padding: 0 }
.icon-btn.sm { width: 32px; height: 32px; font-size: 1.2rem; line-height: 1 }
.icon-btn:disabled { opacity: 0.35; cursor: default }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }

/* game area */
.game { display: grid; gap: 12px; align-items: start; flex: 1; grid-template-areas: "q" "pie" "ctl" "res" }
.qhead { grid-area: q; display: flex; flex-direction: column; gap: 6px }
.pie-col { grid-area: pie }
.controls { grid-area: ctl; display: flex; flex-direction: column; gap: 10px }
.play-col { grid-area: res }
.pie-col { display: flex; flex-direction: column; align-items: center; gap: 6px }
.pie-note { margin: 0; color: var(--muted); font-size: 0.85rem; text-align: center }
#pie { width: 100%; max-width: min(320px, 34vh); height: auto; touch-action: none; user-select: none; -webkit-user-select: none; display: block }
.play-col { min-width: 0 }
#result { display: flex; flex-direction: column; gap: 14px }
.step { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase }
.q { font-family: var(--body); font-weight: 700; font-size: clamp(1.15rem, 3.4vw, 1.6rem); line-height: 1.2; margin: 0; text-wrap: balance }
.hint { color: var(--muted); font-size: 0.85rem; margin: 0; max-width: 60ch }

.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px }
.row { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line) }
.row.cur { border-color: var(--fg) }
.row.dim { opacity: 0.45 }
.dot { width: 14px; height: 14px; border-radius: 50% }
.lbl { min-width: 0; font-size: 0.92rem; font-weight: 500 }
#rows .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.lbl small { display: block; color: var(--muted); font-size: 0.82rem; font-weight: 400; margin-top: 2px }
.adj { display: flex; align-items: center; gap: 6px }
.adj button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; font-weight: 700; font-size: 1.05rem; padding: 0 }
.num { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: right }
.cmp { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.9rem; text-align: right; white-space: nowrap }
.cmp b { font-weight: 700 }
.ok { color: var(--good) } .meh { color: var(--mid) } .bad { color: var(--bad) }

.cta { border: 0; background: var(--ink); color: var(--on-ink); font-weight: 700; font-size: 1rem; padding: 12px 18px; border-radius: 12px; cursor: pointer; width: 100% }
.cta.ghost { background: transparent; color: var(--fg); border: 2px solid var(--line) }
.cta:disabled { opacity: 0.35; cursor: default }

/* result */
.verdict { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.outcome { font-family: var(--display); font-size: clamp(1.6rem, 5.4vw, 2.2rem); line-height: 1; text-transform: uppercase }
.acc { color: var(--muted); font-size: 0.95rem }
.acc b { color: var(--fg); font-family: var(--mono) }
.crowd { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px }
.crowd-head { font-size: 0.92rem }
#curve { width: 100%; height: auto; display: block; overflow: visible }
.crowd-note { margin: 0; color: var(--muted); font-size: 0.8rem }
.board-note { margin: 0; text-align: center; font-size: 0.9rem; color: var(--muted) }
.link { background: none; border: 0; padding: 0; color: var(--fg); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer }
.next-note { margin: 0; text-align: center; color: var(--muted); font-size: 0.88rem; font-family: var(--mono) }

.foot { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; color: var(--muted); font-size: 0.8rem; padding-top: 8px; border-top: 1px solid var(--line) }
.foot a { color: inherit }

.toast { position: fixed; left: 50%; top: calc(16px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--on-ink); padding: 10px 16px; border-radius: 10px; font-weight: 600; z-index: 20 }

/* dialogs */
dialog { border: 0; border-radius: 18px; padding: 22px; max-width: min(440px, calc(100vw - 32px)); width: 100%; background: var(--surface); color: var(--fg); box-shadow: 0 20px 60px rgb(0 0 0 / 0.3) }
dialog::backdrop { background: rgb(0 0 0 / 0.45) }
dialog h2 { font-family: var(--display); font-weight: 400; margin: 0 0 12px; font-size: 1.35rem; text-transform: uppercase }
dialog h3 { margin: 18px 0 8px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted) }
dialog p, dialog li { font-size: 0.95rem }
dialog ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px }
dialog .cta { margin-top: 16px }
.small { color: var(--muted); font-size: 0.85rem !important }
.legend { display: grid; gap: 4px; background: var(--bg); border-radius: 12px; padding: 10px 14px; margin: 12px 0 }
.legend div { display: flex; justify-content: space-between; font-size: 0.9rem }
.legend span { font-family: var(--mono); color: var(--muted) }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center }
.stat-grid div { display: flex; flex-direction: column; gap: 2px }
.stat-grid b { font-family: var(--mono); font-size: 1.4rem }
.stat-grid span { font-size: 0.72rem; color: var(--muted); line-height: 1.2 }
.bars { display: flex; flex-direction: column; gap: 6px }
.bar { display: grid; grid-template-columns: 5.5em 1fr; align-items: center; gap: 8px; font-size: 0.85rem }
.bar i { display: block; height: 22px; border-radius: 6px; background: var(--grass); color: #fff; font-style: normal; font-family: var(--mono); font-size: 0.8rem; padding: 2px 8px; min-width: 28px; text-align: right }
.bar.k i { background: var(--muted) }
.archive { list-style: none !important; padding: 0 !important; max-height: 50vh; overflow-y: auto; gap: 6px !important }
.archive button { width: 100%; display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; text-align: left }
.archive .tag { font-family: var(--mono); font-size: 0.82rem; color: var(--muted) }

/* leaderboard */
.month-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px }
.month-nav b { font-family: var(--mono); font-size: 0.95rem }
.board-acct { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 10px; background: var(--bg); border-radius: 10px; padding: 8px 12px; font-size: 0.88rem; margin-bottom: 10px }
.board { max-height: 46vh; overflow-y: auto }
.board ol { list-style: none; margin: 0; padding: 0 !important; display: flex; flex-direction: column; gap: 4px !important }
.board-head, .board li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) 4.5em 6.6em; gap: 8px; align-items: center }
.board-head { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 0 10px 4px }
.board-head span:nth-child(n+3) { text-align: right }
.board li { padding: 7px 10px; border-radius: 10px; background: var(--bg); font-size: 0.92rem }
.board li.me { outline: 2px solid var(--s4); outline-offset: -2px }
.board li.gap { display: block; background: none; text-align: center; color: var(--muted); padding: 0 }
.board .rk { font-family: var(--mono); font-weight: 700 }
.board li:nth-child(1) .rk { color: #C9A227 } .board li:nth-child(2) .rk { color: #8C99A6 } .board li:nth-child(3) .rk { color: #B87333 }
.board .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600 }
.board .pts { font-family: var(--mono); font-weight: 700; text-align: right }
.board .dy { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); text-align: right; white-space: nowrap }

/* account */
.tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg); border-radius: 10px; padding: 3px; margin-bottom: 14px }
.tabs button { border: 0; background: none; padding: 8px; border-radius: 8px; cursor: pointer; font-weight: 600; color: var(--muted) }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--on-ink) }
#acct-form, #email-form, #del-form { display: flex; flex-direction: column; gap: 10px }
.add-email { background: var(--bg); border-radius: 12px; padding: 12px; margin-bottom: 10px }
.add-email p { margin: 0 }
dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 600 }
dialog input, #share-text { font: inherit; font-weight: 400; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); width: 100% }
dialog input:focus, #share-text:focus { outline: 2px solid var(--s4); outline-offset: 0; border-color: transparent }
#share-text { font-family: var(--mono); font-size: 0.9rem; resize: none }
#acct-form .cta, #email-form .cta, #del-form .cta { margin-top: 4px }
.form-err { margin: 0; color: var(--bad); font-size: 0.88rem; font-weight: 600 }
#acct-info p { margin-top: 0 }
.danger { margin-top: 14px; font-size: 0.9rem }
.danger summary { cursor: pointer; color: var(--muted) }
.danger-btn { background: var(--bad) !important; color: #fff !important }
dialog .cta + .cta { margin-top: 8px }

@media (max-width: 420px) {
  .icon-btn { width: 36px; height: 36px }
  .icons { gap: 4px }
  .top { gap: 6px }
}

@media (min-width: 880px) {
  .game { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "pie q" "pie ctl" "pie res"; grid-template-rows: auto auto 1fr; column-gap: 48px; row-gap: 16px; padding-top: 12px; align-content: start }
  .qhead, .controls, .play-col { align-self: start }
  .pie-col { position: sticky; top: 20px }
  #pie { max-width: 460px }
  .row { padding: 10px 12px }
}

/* ---------- the ballpark behind everything (phones and desktops) ---------- */
#bg { display: none }
body.has-bg #bg { display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1;
  object-fit: cover; object-position: 50% 62%; image-rendering: pixelated; image-rendering: crisp-edges; background: var(--bg) }

/* header = the stadium scoreboard */
body.has-bg .top { background: var(--board); color: var(--board-text); border: 3px solid var(--board-edge); border-radius: 14px;
  padding: 8px 10px; box-shadow: 0 10px 28px rgb(0 0 0 / 0.28); margin-top: 4px }
body.has-bg .top h1 { color: var(--bulb); text-shadow: 0 0 10px rgb(244 196 48 / 0.35) }
body.has-bg .top .sub { color: var(--board-muted) }
body.has-bg .top .icon-btn { background: transparent; color: var(--board-text); border-color: rgb(255 255 255 / 0.18) }
body.has-bg .top .icon-btn:hover { border-color: var(--bulb); color: var(--bulb) }

/* text sits on small frosted-glass cards; the pie sits straight on the field */
body.has-bg .qhead, body.has-bg .controls, body.has-bg #result, body.has-bg .pie-note, body.has-bg .foot {
  background: var(--glass); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.16) }
body.has-bg .qhead { border-radius: 16px; padding: 12px 14px }
body.has-bg .controls { border-radius: 16px; padding: 10px }
body.has-bg #result { border-radius: 16px; padding: 14px }
body.has-bg .pie-note { border-radius: 14px; padding: 4px 12px; color: var(--fg) }
body.has-bg .foot { border-radius: 16px; padding: 6px 16px; align-self: center; gap: 2px 14px; text-align: center; color: var(--fg); border-top-color: var(--glass-edge) }
body.has-bg .row, body.has-bg .crowd { background: var(--glass-card); border-color: var(--glass-line) }
body.has-bg .row.cur { border-color: var(--fg) }
body.has-bg .adj button { background: transparent; border-color: var(--glass-line) }
body.has-bg #pie { filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.35)) }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.has-bg .qhead, body.has-bg .controls, body.has-bg #result, body.has-bg .pie-note, body.has-bg .foot, body.has-bg .ticket { background: var(--bg) }
}
@media (min-width: 880px) {
  body.has-bg .app { padding-block: 20px 28px }
  body.has-bg .controls, body.has-bg #result { padding: 14px }
  body.has-bg .qhead { padding: 16px 18px }
}

/* ---------- front page: a game-day ticket ---------- */
#home { display: none }
.on-home #home { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  min-height: 100vh; min-height: 100svh; padding: 24px 16px }
.on-home .app { display: none }
.ticket { --stub: 76px; width: 100%; max-width: 400px; text-align: center; padding: 28px 24px 0; border-radius: 22px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--glass); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.28);
  /* notches cut out where the stub tears off */
  -webkit-mask: radial-gradient(circle 12px at 0 calc(100% - var(--stub)), #0000 97%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 12px at 100% calc(100% - var(--stub)), #0000 97%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 12px at 0 calc(100% - var(--stub)), #0000 97%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 12px at 100% calc(100% - var(--stub)), #0000 97%, #000) right / 51% 100% no-repeat }
.home-logo { width: 76px; height: 76px; filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.25)) }
.ticket h1 { font-size: clamp(2rem, 10vw, 2.8rem) }
.tagline { margin: 0; color: var(--muted); max-width: 26ch; text-wrap: balance }
.home-status { margin: 2px 0 0; font-size: 0.92rem; background: var(--glass-card); border: 1px solid var(--glass-line); border-radius: 999px; padding: 4px 12px }
.home-actions { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 10px }
.home-actions .cta { padding: 14px 18px; font-size: 1.05rem }
.home-actions .link { align-self: center; padding: 4px; font-weight: 600 }
.home-acct { margin: 0; font-size: 0.85rem; color: var(--muted); text-wrap: balance }
.stub { align-self: stretch; height: var(--stub); margin: 8px -24px 0; border-top: 2px dashed var(--glass-line);
  display: grid; grid-template-columns: 1fr 1fr; align-items: center }
.stub div { display: flex; flex-direction: column; gap: 2px }
.stub div + div { border-left: 1px solid var(--glass-line) }
.stub span { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted) }
.stub b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; text-transform: uppercase }
.home-foot { color: var(--fg); font-size: 0.8rem; background: var(--glass); border-radius: 999px; padding: 4px 12px }

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