:root{
  --paper:#E6EAEE; --sheet:#F7F9FA; --ink:#13233A; --ink2:#2B3E57; --muted:#5E6E82; --line:#C6CFD8;
  --signal:#F2B705; --dnf:#C8102E; --gain:#1E8A4C; --hl:#FFF4C7;
  --cond:"Barlow Condensed","Arial Narrow",Arial,sans-serif; --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--ink2)}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
h1,h2,h3{font-family:var(--cond);font-weight:700;line-height:1.05;margin:0 0 .4em}
h1{font-size:clamp(2.2rem,6vw,3.6rem);font-style:italic;letter-spacing:-.01em}
h2{font-size:1.7rem}
h3{font-size:1.25rem;font-weight:600}
.muted{color:var(--muted)}
.small{font-size:.875rem}

/* päis */
.top{background:var(--ink);color:#fff;display:grid;grid-template-columns:auto 1fr auto;gap:.5rem 1rem;align-items:center;padding:.7rem clamp(1rem,3vw,2rem) 0}
.brand{font-family:var(--cond);font-weight:700;font-style:italic;font-size:1.5rem;color:#fff;text-decoration:none;display:flex;align-items:center;gap:.5rem}
.chev{width:22px;height:16px;background:repeating-linear-gradient(90deg,var(--signal) 0 6px,transparent 6px 9px);clip-path:polygon(0 0,70% 0,100% 50%,70% 100%,0 100%,30% 50%)}
#gameSel{justify-self:start;background:transparent;color:#fff;border:1px solid #ffffff40;border-radius:4px;padding:.3rem .5rem;font:600 .95rem var(--body)}
#gameSel option{color:var(--ink)}
.who{font-size:.9rem;color:#cfd8e3;text-align:right}
.who button{margin-left:.5rem}
nav{grid-column:1/-1;display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*clamp(1rem,3vw,2rem));padding:0 clamp(1rem,3vw,2rem)}
nav a{color:#cfd8e3;text-decoration:none;font:600 1.05rem var(--cond);padding:.55rem .8rem .5rem;border-bottom:4px solid transparent;white-space:nowrap}
nav a.on{color:#fff;border-bottom-color:var(--signal)}
nav a:hover{color:#fff}

main{max-width:1100px;margin:0 auto;padding:clamp(1rem,3vw,2rem)}
section+section{margin-top:2.5rem}

/* nupud, väljad */
button,.btn{font:600 1rem var(--cond);letter-spacing:.02em;background:var(--ink);color:#fff;border:0;border-radius:3px;padding:.55rem 1.1rem;cursor:pointer;text-decoration:none;display:inline-block}
button.ghost{background:transparent;color:inherit;border:1px solid currentColor;opacity:.85}
button.go{background:var(--signal);color:var(--ink)}
button.warn{background:var(--dnf)}
button:disabled{opacity:.45;cursor:not-allowed}
input,select,textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:3px;padding:.45rem .55rem;min-width:0}
textarea{width:100%;min-height:8rem;font-size:.92rem}
label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.2rem}
.row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:end}
.row>div{display:flex;flex-direction:column}
.grow{flex:1 1 220px}

/* järgmise etapi tahvel */
.stageboard{background:var(--ink);color:#fff;border-radius:4px;padding:clamp(1.2rem,3vw,2rem);display:grid;grid-template-columns:1fr auto;gap:1rem 2rem;align-items:end;position:relative;overflow:hidden}
.stageboard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:repeating-linear-gradient(90deg,var(--signal) 0 18px,var(--ink) 18px 36px)}
.stageboard .meta{color:#cfd8e3}
.clock{font:700 clamp(2.4rem,7vw,4.2rem)/1 var(--cond);font-variant-numeric:tabular-nums;color:var(--signal);text-align:right}
.clock small{display:block;font:500 .9rem var(--body);color:#cfd8e3;margin-top:.3rem}
@media (max-width:640px){.stageboard{grid-template-columns:1fr}.clock{text-align:left}}

/* ennustusvorm */
.pick{display:grid;grid-template-columns:7rem 1fr 6.5rem;gap:.6rem;align-items:center;padding:.65rem 0;border-bottom:1px solid var(--line)}
.pick .lbl{font:600 1.05rem var(--cond);color:var(--muted)}
.pick select{width:100%}
.posin{display:flex;gap:.3rem}
.posin input{width:3.6rem;text-align:center;font-variant-numeric:tabular-nums}
.posin button{padding:.4rem .5rem;font-size:.85rem}
.posin button.on{background:var(--dnf)}
@media (max-width:560px){.pick{grid-template-columns:1fr 6.5rem}.pick .lbl{grid-column:1/-1}}
.form-actions{display:flex;gap:1rem;align-items:center;margin-top:1.2rem;flex-wrap:wrap}
.errors{color:var(--dnf);font-weight:500}
.usage{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}
.usage span{font-size:.82rem;border:1px solid var(--line);border-radius:2px;padding:.1rem .45rem;background:var(--sheet)}
.usage span.last{border-color:var(--signal);background:var(--hl)}
.usage span.out{color:#fff;background:var(--muted);border-color:var(--muted)}

/* tabelid */
.tablewrap{overflow-x:auto;background:var(--sheet);border-radius:4px;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{padding:.5rem .6rem;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
th{font:600 .95rem var(--cond);color:var(--muted);background:var(--paper);position:sticky;top:0}
td.l,th.l{text-align:left}
tr.me td{background:var(--hl)}
tr.virt td{color:var(--muted);font-style:italic}
td.pos{font:700 1.35rem var(--cond);width:3rem;text-align:center;color:#fff;background:var(--ink2)}
tr.me td.pos{background:var(--ink2);color:#fff}
tbody tr:nth-child(1) td.pos{background:var(--signal);color:var(--ink)}
td.name{font-weight:600;text-align:left}
td.total{font:700 1.25rem var(--cond)}
.delta{font-size:.8rem;margin-left:.25rem}
.up{color:var(--gain)}.down{color:var(--dnf)}
td.best{font-weight:700;box-shadow:inset 0 -3px var(--signal)}
.dnf{color:var(--dnf);font-weight:600}
.carried{color:var(--muted)}

/* etapid */
.rallylist{display:grid;gap:0;border-top:1px solid var(--line)}
.rallylist a{display:grid;grid-template-columns:2.5rem 1fr auto;gap:.8rem;align-items:center;padding:.7rem .2rem;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.rallylist a:hover{background:var(--sheet)}
.rnd{font:700 1.4rem var(--cond);color:var(--muted);text-align:center}
.rname{font:600 1.2rem var(--cond)}
.tag{font-size:.8rem;padding:.1rem .45rem;border-radius:2px;background:var(--line)}
.tag.scored{background:var(--ink2);color:#fff}
.tag.open{background:var(--signal)}
.tag.cancelled{text-decoration:line-through}
.entry-lines{font-size:.88rem;color:var(--ink2);text-align:left;white-space:normal;min-width:16rem}
.entry-lines b{font-weight:600}
.entry-lines .x{color:var(--muted);text-decoration:line-through}

/* boonused */
.q{padding:1rem 0;border-bottom:1px solid var(--line)}
.q h3{margin-bottom:.5rem}
.checks{display:flex;flex-wrap:wrap;gap:.4rem .9rem}
.checks label{display:flex;gap:.35rem;align-items:center;color:var(--ink);font-size:.95rem}
.rankgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:.4rem}
.rankgrid div{display:flex;gap:.4rem;align-items:center}
.rankgrid span{font:700 1rem var(--cond);width:1.6rem;color:var(--muted)}

/* admin */
.subnav{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.2rem}
.subnav button{background:transparent;color:var(--ink);border:1px solid var(--line)}
.subnav button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.panel{background:var(--sheet);border:1px solid var(--line);border-radius:4px;padding:1rem 1.2rem;margin-bottom:1rem}
.linkbox{font-size:.8rem;word-break:break-all;color:var(--muted)}
.res td input{width:4.5rem;text-align:center}

/* sisselogimine */
.login{max-width:30rem;margin:8vh auto;text-align:left}
.login h1{margin-bottom:.3em}
.login .panel{margin-top:1.5rem}

#toast{position:fixed;left:50%;bottom:calc(1.2rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(150%);background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:3px;border-left:5px solid var(--signal);transition:transform .25s ease;max-width:90vw;z-index:10}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast.bad{border-left-color:var(--dnf)}
.rules{white-space:pre-line;max-width:72ch;background:var(--sheet);border:1px solid var(--line);border-radius:4px;padding:1.2rem 1.4rem;line-height:1.6}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.foot{max-width:1100px;margin:3rem auto 2rem;padding:0 clamp(1rem,3vw,2rem);font-size:.85rem;color:var(--muted)}
.foot a{color:var(--muted)}