:root{--bg:#070d1f;--bg2:#0e1a3a;--card:#111f45cc;--red:#d7263d;--red2:#ff4d5e;--white:#f4f7ff;--muted:#9fb0d8;--line:#28396b}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;background:radial-gradient(ellipse at 50% -10%,#1d2f63 0%,var(--bg2) 35%,var(--bg) 75%);color:var(--white);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
.snow,.snow::before,.snow::after{position:fixed;inset:-100vh 0 0 0;pointer-events:none;z-index:0;content:"";
background-image:radial-gradient(3px 3px at 20px 30px,#fff 50%,#0000 51%),radial-gradient(2px 2px at 90px 120px,#fff 50%,#0000 51%),radial-gradient(4px 4px at 160px 60px,#ffffffd0 50%,#0000 51%),radial-gradient(2px 2px at 230px 190px,#fff 50%,#0000 51%),radial-gradient(3px 3px at 300px 100px,#ffffffb0 50%,#0000 51%);
background-size:320px 240px;animation:fall 14s linear infinite}
.snow::before{background-size:220px 200px;animation-duration:9s;opacity:.7;filter:blur(.4px)}
.snow::after{background-size:420px 330px;animation-duration:22s;opacity:.5;filter:blur(1px)}
@keyframes fall{from{transform:translate3d(0,0,0)}to{transform:translate3d(40px,100vh,0)}}
@media (prefers-reduced-motion:reduce){.snow,.snow::before,.snow::after{animation:none}}
main{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:24px 16px 64px}
header{text-align:center}
.wordmark{width:100%;max-width:520px;height:auto;display:block;margin:8px auto 0}
h1{font-size:1.6rem;margin:.2em 0;letter-spacing:.02em}
.sub{color:var(--muted);margin:0 0 8px}
.mascot{width:150px;height:auto;display:block;margin:8px auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;backdrop-filter:blur(4px);box-shadow:0 10px 40px #0008}
label{display:block;font-weight:600;margin:14px 0 4px}
input{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:#081230;color:var(--white);font-size:1rem}
input:focus{outline:2px solid var(--red2);border-color:transparent}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kid{border:1px dashed var(--line);border-radius:12px;padding:10px 12px;margin-top:12px}
.kid legend{color:var(--red2);font-weight:700;padding:0 6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button{margin-top:20px;width:100%;padding:14px;border:0;border-radius:12px;font-weight:800;font-size:1.05rem;color:#fff;cursor:pointer;
background:repeating-linear-gradient(45deg,var(--red) 0 14px,#b81d31 14px 28px)}
button:disabled{opacity:.6;cursor:wait}
.msg{margin-top:14px;font-weight:600;min-height:1.5em}.ok{color:#8ff0b0}.err{color:var(--red2)}
.hint{color:var(--muted);font-size:.9rem;margin:4px 0 0}
footer{text-align:center;color:var(--muted);font-size:.85rem;margin-top:24px}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{cursor:pointer;user-select:none;white-space:nowrap;color:var(--white);background:#0b1636;position:sticky;top:0}
th[aria-sort=ascending]::after{content:" \25B2";color:var(--red2)}th[aria-sort=descending]::after{content:" \25BC";color:var(--red2)}
td a{color:#fff;background:var(--red);border-radius:6px;padding:2px 8px;text-decoration:none;font-weight:700;margin:2px 4px 2px 0;display:inline-block;font-size:.82rem}
td a.amz{background:#2a3d78}
.wide{max-width:1100px}.scroll{overflow-x:auto}
.totals{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}.totals div{background:#0b1636;border:1px solid var(--line);border-radius:10px;padding:8px 14px}
.totals b{font-size:1.3rem;color:var(--red2)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap}.toolbar a,.toolbar button{width:auto;margin:0;padding:10px 14px;font-size:.95rem;border-radius:10px;text-decoration:none;color:#fff;font-weight:700;background:var(--red)}
.del{background:none;border:1px solid var(--line);color:var(--muted);padding:2px 8px;margin:0;width:auto;font-size:.8rem;font-weight:600}
select{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:#081230;color:var(--white);font-size:1rem}
h3{margin:20px 0 4px;font-size:1.05rem;color:var(--red2)}
.add{background:#1c2c5c;margin-top:10px;padding:10px;font-size:.95rem}
.rm{background:none;border:1px solid var(--line);color:var(--muted);width:auto;padding:4px 10px;margin-top:8px;font-size:.8rem}
.total{font-size:1.1rem;margin-top:18px}.total b{color:var(--red2);font-size:1.4rem}
.tabs{display:flex;gap:8px;margin:12px 0}.tabs button{width:auto;margin:0;padding:8px 14px;font-size:.9rem;background:#1c2c5c}.tabs button.on{background:var(--red)}
.logout{margin-top:8px}
.lights{position:fixed;top:0;left:0;right:0;height:34px;z-index:2;pointer-events:none;display:flex;justify-content:space-around;border-top:2px solid #1f3326}
.lights i{position:relative;width:9px;height:14px;margin-top:8px;border-radius:50%/60% 60% 40% 40%;background:#e63946;box-shadow:0 2px 10px 1px #e63946aa;opacity:.85;animation:twinkle 2.4s ease-in-out infinite}
.lights i:nth-child(odd){margin-top:4px}
.lights i::before{content:"";position:absolute;top:-4px;left:2px;width:5px;height:5px;border-radius:1px;background:#3a4a3f}
.lights i:nth-child(3n+2){background:#2ec27e;box-shadow:0 2px 10px 1px #2ec27eaa;animation-delay:.8s}
.lights i:nth-child(3n){background:#f6c343;box-shadow:0 2px 10px 1px #f6c343aa;animation-delay:1.6s}
.lights i:nth-child(4n){animation-duration:3.1s}.lights i:nth-child(n+13){display:none}
@media(min-width:700px){.lights i:nth-child(n+13){display:block}}
@keyframes twinkle{0%,100%{opacity:.9}50%{opacity:.35;box-shadow:none}}
@media (prefers-reduced-motion:reduce){.lights i{animation:none}}
main{padding-top:40px}.cf-turnstile{margin-top:16px;min-height:65px}
