:root{--bg:#1c212b;--panel:#272e3b;--line:#3a4354;--text:#eef0e8;--muted:#a7b0c0;--gold:#ffc247;--gold-ink:#2a1d00;--ame:#a07cf0;--grass:#5fae4a;--dirt:#7a5232;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--bg:#eef0e8;--panel:#fff;--line:#c9cfbe;--text:#1c212b;--muted:#566074;--gold:#e0a21c;--ame:#6a43c9}}
:root[data-theme="dark"]{--bg:#1c212b}
html{scroll-padding-top:env(safe-area-inset-top,0px);color-scheme:dark light}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.05rem/1.6 Nunito,system-ui,sans-serif}
.px{font-family:Silkscreen,"Courier New",monospace;letter-spacing:.02em}
header{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;padding:1rem 1.25rem;border-bottom:4px solid var(--line)}
.logo{font-size:1.4rem;font-weight:700;color:var(--gold);text-decoration:none}
nav{display:flex;flex-wrap:wrap;gap:.25rem}
nav a{color:var(--muted);text-decoration:none;padding:.4rem .75rem;font-weight:700}
nav a:hover{color:var(--text)}
nav a[aria-current="page"]{color:var(--gold-ink);background:var(--gold)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--ame);outline-offset:2px}
main{max-width:860px;margin:0 auto;padding:2rem 1.25rem 4rem}
section[hidden]{display:none}
h1,h2{font-family:Silkscreen,monospace;line-height:1.15;margin:0 0 1rem}
h1{font-size:clamp(2.2rem,9vw,4.5rem);color:var(--gold);text-shadow:4px 4px 0 var(--dirt)}
h2{font-size:clamp(1.5rem,5vw,2.2rem)}
.lead{font-size:1.2rem;max-width:34rem;color:var(--muted)}
.ground{height:32px;margin:2.5rem 0;background:linear-gradient(var(--grass) 0 12px,var(--dirt) 12px);
-webkit-mask:linear-gradient(90deg,#000 0 75%,transparent 75% 80%,#000 80%);mask:linear-gradient(90deg,#000 0 75%,transparent 75% 80%,#000 80%)}
.btn{display:inline-block;font:700 1rem Silkscreen,monospace;padding:.7rem 1.1rem;background:var(--gold);color:var(--gold-ink);text-decoration:none;border:0;cursor:pointer;box-shadow:4px 4px 0 var(--dirt)}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--dirt)}
.btn.ame{background:var(--ame);color:#fff}
.row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}
.box{background:var(--panel);border:4px solid var(--line);padding:1.1rem 1.25rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.grid a.box{color:var(--text);text-decoration:none;display:block}
.grid a.box:hover{border-color:var(--gold)}
.grid b{display:block;font:700 1.1rem Silkscreen,monospace}
.grid span{color:var(--muted);font-size:.95rem}
form{display:grid;gap:1rem;max-width:380px}
label{display:grid;gap:.35rem;font-weight:700}
input{font:inherit;padding:.65rem .75rem;background:var(--bg);color:var(--text);border:3px solid var(--line)}
#msg{margin:0;color:var(--gold);min-height:1.5em}
.day{display:grid;grid-template-columns:7.5rem 1fr auto;gap:.5rem 1rem;align-items:center;margin-bottom:.75rem}
.day .d{font:700 1rem Silkscreen,monospace;color:var(--gold)}
.day .t{color:var(--muted)}
.day.off{opacity:.55}
@media (max-width:560px){.day{grid-template-columns:1fr}}
footer{text-align:center;color:var(--muted);padding:1.5rem;border-top:4px solid var(--line);font-size:.9rem}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}
form.wide{max-width:none}
.r{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem;margin-bottom:.75rem}
.box+.box,form .box{margin-bottom:1rem}
.err{color:#ff8a7a;font-weight:700}
.ok{color:var(--grass);font-weight:700}
.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}

.hero{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2rem}
.hero h1{overflow-wrap:anywhere}
.avatar{width:160px;height:160px;image-rendering:pixelated;border:4px solid var(--line);box-shadow:6px 6px 0 var(--dirt);background:var(--panel)}
.hero>div{flex:1 1 280px}

.lives{grid-column:2/4;display:grid;gap:.4rem}
.live{display:flex;justify-content:space-between;gap:1rem}
@media (max-width:560px){.lives{grid-column:auto}}