*{box-sizing:border-box}
body{margin:0}
/* Layout: referto-style ledger — filters on top, one block per partita, pronostici as rows with esito pill */
:root{
  --bg:#f3f5f2; --panel:#ffffff; --fg:#1b2420; --muted:#5d6b64; --line:#d9e0dc;
  --pitch:#1f6b47; --win:#1f8a52; --winbg:#dcf3e5; --lose:#c0392b; --losebg:#fbe2df; --nd:#7a6f5a; --ndbg:#efeadf;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif; --body:"Source Sans 3","Segoe UI",Arial,sans-serif; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111815; --panel:#18211d; --fg:#e4ece7; --muted:#9aa9a1; --line:#2a3631;
  --pitch:#4fbf86; --win:#57c98b; --winbg:#163526; --lose:#f07a6c; --losebg:#3b1d1a; --nd:#c9b98f; --ndbg:#2e2a20; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#111815; --panel:#18211d; --fg:#e4ece7; --muted:#9aa9a1; --line:#2a3631;
  --pitch:#4fbf86; --win:#57c98b; --winbg:#163526; --lose:#f07a6c; --losebg:#3b1d1a; --nd:#c9b98f; --ndbg:#2e2a20; color-scheme:dark}
body{background:transparent;color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.45}
html{background:var(--bg)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(var(--veil),var(--veil)),url("https://images.unsplash.com/photo-1487466365202-1afdb86c764e?fm=jpg&q=66&w=1600&fit=crop") center 35%/cover no-repeat}
:root{--veil:rgba(243,245,242,.74);--card:rgba(255,255,255,.82)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--veil:rgba(10,16,13,.72);--card:rgba(24,33,29,.72)}}
:root[data-theme="dark"]{--veil:rgba(10,16,13,.72);--card:rgba(24,33,29,.72)}
.wrap{max-width:980px;margin:0 auto;padding-block:20px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:grid;grid-template-columns:minmax(0,1fr);gap:18px}.wrap>*{min-width:0}
h1{font-family:var(--display);font-weight:700;font-size:clamp(28px,5vw,40px);letter-spacing:.01em;margin:0;text-wrap:balance}
.sub{color:var(--muted);margin:2px 0 0}
.stats{display:flex;flex-wrap:wrap;gap:10px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 14px;min-width:110px}
.stat b{display:block;font-family:var(--mono);font-size:22px;font-variant-numeric:tabular-nums}
.stat span{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.stat.w b{color:var(--win)} .stat.l b{color:var(--lose)}
button.stat{font:inherit;color:inherit;text-align:left;cursor:pointer}
button.stat:hover{border-color:var(--pitch)}
button.stat[aria-pressed="true"]{border-color:var(--pitch);box-shadow:inset 0 0 0 1px var(--pitch)}
button.stat:focus-visible{outline:2px solid var(--pitch);outline-offset:2px}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;position:sticky;top:env(safe-area-inset-top,0px);background:var(--bg);padding-block:8px;z-index:5;border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.seg{display:flex;border:1px solid var(--line);border-radius:6px;overflow-x:auto;max-width:100%;min-width:0;scrollbar-width:none}.seg::-webkit-scrollbar{display:none}.seg button{flex:none}
.seg button{font:600 13px var(--body);background:var(--panel);color:var(--fg);border:0;padding:7px 11px;cursor:pointer;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--pitch);color:#fff}
.seg button:focus-visible,input:focus-visible{outline:2px solid var(--pitch);outline-offset:2px}
input[type=search]{flex:1;min-width:160px;font:15px var(--body);padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--fg)}
.count{font-size:13px;color:var(--muted)}
.list{display:grid;gap:10px}
.match{background:var(--card);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.mh{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;padding:9px 12px;border-bottom:1px solid var(--line)}
.when{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.team{font-family:var(--display);font-weight:600;font-size:19px;min-width:0}
.score{font-family:var(--mono);font-size:17px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.score small{display:block;font-size:11px;color:var(--muted)}
.pick{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:6px 12px;border-top:1px dashed var(--line)}
.pick:first-of-type{border-top:0}
.pn{min-width:0}
.pn em{font-style:normal;color:var(--muted);font-size:12px;margin-left:6px}
.q{font-family:var(--mono);font-size:13px;color:var(--muted);min-width:44px;text-align:right;font-variant-numeric:tabular-nums}
.pill{font:700 12px var(--body);letter-spacing:.06em;padding:3px 8px;border-radius:999px;min-width:62px;text-align:center}
.VINTO{background:var(--winbg);color:var(--win)} .PERSO{background:var(--losebg);color:var(--lose)} .nd{background:var(--ndbg);color:var(--nd)}
.note{font-size:13px;color:var(--muted);max-width:70ch}
@media (max-width:520px){.mh{grid-template-columns:1fr auto}.when{grid-column:1/-1}.team{font-size:17px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
.tabs{display:flex;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;width:max-content;max-width:100%}
.tabs button{font:700 15px var(--display);letter-spacing:.04em;text-transform:uppercase;background:var(--panel);color:var(--fg);border:0;padding:9px 16px;cursor:pointer;border-right:1px solid var(--line)}
.tabs button:last-child{border-right:0}
.tabs button[aria-selected="true"]{background:var(--pitch);color:#fff}
.live{color:var(--lose);font-weight:700}
.live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lose);margin-right:5px;vertical-align:1px;animation:p 1.4s infinite}
@keyframes p{50%{opacity:.25}}
.CORSO{background:var(--ndbg);color:var(--nd)} .GIOCARE{background:transparent;color:var(--muted);border:1px solid var(--line)}
.upd{font-size:12px;color:var(--muted)}
.err{font-size:13px;color:var(--lose)}
.langs{float:right;margin-left:12px}
.langs button{padding:5px 10px;font-weight:700}
.lg{display:block;font:400 12px var(--body);color:var(--muted)}