@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url(/fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-display:swap;src:url(/fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url(/fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}

:root{
  --bg:#eceef1; --surface:#ffffff; --surface-2:#f4f5f7; --line:#d2d7dd;
  --fg:#18212b; --muted:#5a6572; --ink:#18212b; --ink-fg:#ffffff;
  --atp:#855600; --atp-bg:#fcefc6;
  --par:#17663a; --par-bg:#daf2e1;
  --fut:#1c5aa3; --fut-bg:#dce8f8;
  --frg:#74378a; --frg-bg:#eedff3;
  --warn:#ae241c; --warn-bg:#fbe2df;
  --ok:#17663a; --ok-bg:#daf2e1;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#12171d; --surface:#1b222b; --surface-2:#232c37; --line:#35414e;
    --fg:#e8edf2; --muted:#9ba8b6; --ink:#e8edf2; --ink-fg:#12171d;
    --atp:#f2c661; --atp-bg:#3a2f12;
    --par:#7fd79b; --par-bg:#163322;
    --fut:#8fbcf2; --fut-bg:#172c47;
    --frg:#d6a5e8; --frg-bg:#35203e;
    --warn:#ff9a92; --warn-bg:#45201d;
    --ok:#7fd79b; --ok-bg:#163322;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.45;-webkit-text-size-adjust:100%}
h1,h2,h3,h4,p,ol,ul,dl,dd{margin:0}
h1{font-family:var(--display);font-weight:700;font-size:2rem;line-height:1}
h2{font-family:var(--display);font-weight:700;font-size:1.45rem;line-height:1.1}
h3{font-family:var(--display);font-weight:600;font-size:1.2rem;line-height:1.15}
a{color:inherit}
.muted{color:var(--muted)}
.code{font-family:var(--display);font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.eyebrow{font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:600}
.t-ATP{--c:var(--atp);--cb:var(--atp-bg)} .t-PAR{--c:var(--par);--cb:var(--par-bg)}
.t-FUT{--c:var(--fut);--cb:var(--fut-bg)} .t-FRG{--c:var(--frg);--cb:var(--frg-bg)}

button,select,input{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--surface);border-radius:4px;padding:6px 12px;font-weight:500}
button:hover{border-color:var(--muted)}
button:disabled{opacity:.5;cursor:default}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--fut);outline-offset:2px}
button.ink{background:var(--ink);color:var(--ink-fg);border-color:var(--ink)}
button.danger{color:var(--warn)}
button.armed{background:var(--warn);color:var(--surface);border-color:var(--warn)}
button.link{border:0;background:none;color:var(--muted);text-decoration:underline;padding:6px}
select,input[type=text],input[type=number],input[type=password],input[type=search]{border:1px solid var(--line);background:var(--surface);border-radius:4px;padding:6px 8px;min-width:0}

.chip{font-family:var(--display);font-weight:700;background:var(--cb,var(--surface-2));color:var(--c,var(--muted));border-radius:3px;padding:1px 7px;white-space:nowrap}
.chip.none{border:1px dashed var(--muted);font-family:var(--body);font-weight:500;font-size:.8rem;padding:2px 7px}
.empty{color:var(--muted);font-size:.9rem}
.err{color:var(--warn)}
.box-warn{background:var(--warn-bg);color:var(--warn);border-radius:4px;padding:8px 10px;font-size:.9rem}

/* PIN */
dialog.pin{width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;color:var(--fg)}
dialog.pin::backdrop{background:var(--bg)}
.pin{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.pin form{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px;display:flex;flex-direction:column;gap:10px;width:min(100%,320px)}
.pin input{font-size:1.4rem;text-align:center;letter-spacing:.3em}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--ink-fg);padding:10px 16px;border-radius:6px;z-index:60;max-width:calc(100% - 32px);font-weight:500}
.toast.bad{background:var(--warn);color:var(--surface)}

/* lavagna (riga) */
.board{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
.board li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:6px 12px;align-items:center;padding:8px 10px;background:var(--surface-2);border-radius:4px}
.board .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.move{display:inline-flex;align-items:center;gap:6px;font-size:1.15rem;white-space:nowrap}
.age{font-size:.8rem;color:var(--muted);white-space:nowrap}
@media (max-width:520px){.board li{grid-template-columns:auto minmax(0,1fr)}.board .move,.board .age,.board button{grid-column:1/-1}}