/* Beaten — one narrow column; a year-by-year ledger of finish dates is the spine of the page. */
:root{
  --bg:#EDEFF3; --surface:#FFFFFF; --ink:#151821; --muted:#5D6475; --line:#D5D9E2;
  --accent:#2B4FE0; --accent-ink:#FFFFFF; --gold:#A86E00; --gold-bg:#FBEFD6; --drop:#9A3A3A; --drop-bg:#F6E3E3;
  --play:#1F7A55; --play-bg:#DDF1E7; --shadow:rgba(10,12,20,.18);
  --display:"Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#12141B; --surface:#1B1E28; --ink:#E8EBF2; --muted:#9AA1B3; --line:#2D3241;
  --accent:#7D95FF; --accent-ink:#0E1120; --gold:#F0B44A; --gold-bg:#3A2D12; --drop:#E68A8A; --drop-bg:#3A1F22;
  --play:#6BD3A3; --play-bg:#163428; --shadow:rgba(0,0,0,.5); color-scheme:dark}}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;padding-inline:16px;padding-block:24px 64px}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{opacity:.55;cursor:default}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a{color:var(--accent)}

header.top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
h1{font-family:var(--display);font-weight:800;font-size:clamp(44px,9vw,72px);line-height:.9;letter-spacing:.01em;margin:0;text-transform:uppercase}
h1 span{color:var(--accent)}
.sub{margin:6px 0 0;color:var(--muted)}
.btn{border:0;border-radius:8px;padding:10px 16px;font-weight:700;background:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.danger{background:var(--drop);color:var(--surface)}
.headActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* account menu */
.menuWrap{position:relative}
.avatar{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-weight:700;display:grid;place-items:center;overflow:hidden;padding:0}
.avatar img{width:100%;height:100%;object-fit:cover}
.menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px var(--shadow);min-width:220px;padding:6px;z-index:6;display:flex;flex-direction:column}
.menu .who{padding:8px 10px;font-size:13px;color:var(--muted);border-bottom:1px solid var(--line);margin-bottom:4px;overflow-wrap:anywhere}
.menu button,.menu a{background:none;border:0;text-align:left;padding:9px 10px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:14px}
.menu button:hover,.menu a:hover{background:var(--bg)}
.menu .danger{color:var(--drop)}

/* landing */
.landing{display:flex;flex-direction:column;gap:22px;padding-block:6vh 0}
.landing h1{font-size:clamp(64px,16vw,128px)}
.landing .lede{font-size:18px;max-width:46ch;margin:0}
.signin{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:12px;max-width:420px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.check input{margin-top:3px;width:18px;height:18px;flex:none}
.fine{font-size:13px;color:var(--muted);margin:0}
.under13{background:var(--drop-bg);color:var(--drop);border-radius:8px;padding:10px 12px;font-size:14px;margin:0}
.preview{display:flex;flex-direction:column;gap:2px;max-width:560px;opacity:.9}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.stat{background:var(--surface);padding:12px 14px;min-width:0}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.stat small{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
@media (max-width:520px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:13px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.search{flex:1 1 180px;min-width:0;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 12px}

.year{display:flex;flex-direction:column;gap:2px}
.yhead{display:flex;align-items:baseline;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:4px;margin-bottom:6px}
.yhead h2{font-family:var(--display);font-weight:800;font-size:40px;line-height:1;margin:0;font-variant-numeric:tabular-nums}
.yhead span{font-family:var(--mono);font-size:13px;color:var(--muted)}

.row{display:grid;grid-template-columns:84px 44px minmax(0,1fr) auto;gap:14px;align-items:start;padding:12px 4px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;width:100%}
.row:hover{background:var(--surface)}
@media (max-width:460px){.row{grid-template-columns:70px 36px minmax(0,1fr) auto;gap:10px}}
.cover{width:100%;aspect-ratio:3/4;border-radius:4px;background:var(--line);object-fit:cover;display:block}
.date{font-family:var(--mono);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;padding-top:2px}
.date .d{display:block;font-family:var(--display);font-size:26px;font-weight:800;line-height:1}
.date .approx{color:var(--muted);font-weight:400}
.ttl{display:block;font-weight:700;font-size:16px;overflow-wrap:anywhere}
.meta{color:var(--muted);font-size:13px;display:flex;gap:10px;flex-wrap:wrap;font-family:var(--mono)}
.note{display:block;color:var(--muted);font-size:14px;margin-top:2px;overflow-wrap:anywhere}
.right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.pill{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;border-radius:4px;padding:2px 7px;white-space:nowrap;background:var(--bg);color:var(--muted)}
.pill.beaten{background:var(--accent);color:var(--accent-ink)}
.pill.full{background:var(--gold-bg);color:var(--gold)}
.pill.dropped{background:var(--drop-bg);color:var(--drop)}
.pill.playing{background:var(--play-bg);color:var(--play)}
.score{font-family:var(--display);font-weight:800;font-size:22px;line-height:1;font-variant-numeric:tabular-nums}
.score small{font-size:13px;color:var(--muted)}

.empty{border:1px dashed var(--line);border-radius:10px;padding:28px;text-align:center;color:var(--muted)}
.notice{font-size:13px;color:var(--muted);margin:0}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;font-size:14px;z-index:20;max-width:calc(100% - 32px)}

/* sheets */
.scrim{position:fixed;inset:0;background:rgba(10,12,18,.55);display:flex;align-items:flex-end;justify-content:center;padding:16px;z-index:10}
@media (min-width:640px){.scrim{align-items:center}}
.sheet{background:var(--surface);border-radius:14px;width:100%;max-width:520px;max-height:100%;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
.sheet h3{font-family:var(--display);font-weight:800;font-size:30px;text-transform:uppercase;margin:0;line-height:1}
.sheet p{margin:0}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:420px){.grid2{grid-template-columns:1fr}}
label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);min-width:0}
label input,label select,label textarea{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:9px 10px;font-size:15px;text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink);width:100%;min-width:0}
.fieldLabel{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.statusrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.actions{display:flex;gap:8px;justify-content:space-between;flex-wrap:wrap}
.actions div{display:flex;gap:8px}
.err{color:var(--drop);font-size:13px;margin:0}
.picked{display:flex;gap:12px;align-items:center;background:var(--bg);border-radius:8px;padding:8px}
.picked img{width:40px;border-radius:4px;aspect-ratio:3/4;object-fit:cover}
.picked span{font-size:13px;color:var(--muted)}

/* autocomplete */
.ac{position:relative}
.acList{position:absolute;left:0;right:0;top:100%;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px var(--shadow);max-height:320px;overflow:auto;z-index:5;list-style:none;padding:4px;margin:4px 0 0}
.acList li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:center;padding:6px 8px;border-radius:6px;cursor:pointer}
.acList li[aria-selected="true"],.acList li:hover{background:var(--bg)}
.acList li img,.acList li .ph{width:32px;aspect-ratio:3/4;border-radius:3px;object-fit:cover;background:var(--line)}
.acList li .t{display:block;overflow-wrap:anywhere;font-size:15px}
.acList li .m{display:block;font-family:var(--mono);font-size:12px;color:var(--muted)}
.acList li.status{display:block;cursor:default;color:var(--muted);font-size:13px;background:none}

footer.foot{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}
footer.foot a{color:var(--muted)}

@media (prefers-reduced-motion:no-preference){.sheet{animation:up .18s ease-out}@keyframes up{from{transform:translateY(12px);opacity:.6}to{transform:none;opacity:1}}}

/* legal pages */
.legal{max-width:680px;margin:0 auto}
.legal h1{font-size:clamp(40px,8vw,56px)}
.legal h2{font-family:var(--display);font-weight:800;font-size:26px;text-transform:uppercase;margin:28px 0 6px}
.legal p,.legal li{max-width:65ch}
.legal .draft{background:var(--gold-bg);color:var(--gold);border-radius:8px;padding:10px 12px;font-size:14px}