:root{--bg1:#0b2a1e;--bg2:#05140e;--red:#c8102e;--gold:#f2c14e;--snow:#f8fbff;--muted:#b9cfc3;--card:rgba(255,255,255,.07);
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg1:#0b2a1e;--bg2:#05140e}}
:root[data-theme="dark"]{--bg1:#0b2a1e;--bg2:#05140e}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:radial-gradient(ellipse at top,var(--bg1),var(--bg2));color:var(--snow);font-family:Georgia,'Times New Roman',serif;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow-x:hidden}
canvas{position:fixed;inset:0;pointer-events:none;z-index:0}
main{position:relative;z-index:1;width:100%;max-width:520px;padding:24px;text-align:center}
.card{background:var(--card);border:1px solid rgba(242,193,78,.45);border-radius:20px;padding:36px 26px;backdrop-filter:blur(6px);box-shadow:0 0 40px rgba(200,16,46,.25)}
.icon{font-size:56px;line-height:1}
h1{font-size:2rem;margin:.4em 0 .2em;color:var(--gold);letter-spacing:.04em}
p{color:var(--muted);line-height:1.5;margin:.4em 0}
.hint{font-size:.9rem;font-style:italic}
input{width:100%;margin-top:18px;padding:14px 16px;font:inherit;font-size:1.1rem;text-align:center;letter-spacing:.15em;text-transform:uppercase;color:var(--snow);background:rgba(0,0,0,.35);border:2px solid var(--gold);border-radius:12px;outline:none}
input:focus{box-shadow:0 0 0 4px rgba(242,193,78,.3)}
button{margin-top:14px;width:100%;padding:14px;font:inherit;font-size:1.05rem;font-weight:bold;color:#fff;background:linear-gradient(135deg,var(--red),#8f0a20);border:2px solid var(--gold);border-radius:12px;cursor:pointer}
button:hover{filter:brightness(1.15)}
.err{color:#ff8a8a;min-height:1.4em;margin-top:10px;font-size:.95rem}
.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
#home{display:none}
.count{display:flex;gap:10px;justify-content:center;margin:22px 0 10px}
.count div{background:rgba(0,0,0,.35);border:1px solid var(--gold);border-radius:12px;padding:10px 12px;min-width:68px}
.count b{display:block;font-size:1.6rem;color:var(--gold)}
.count span{font-size:.75rem;color:var(--muted);text-transform:uppercase}
.lights{display:flex;justify-content:center;gap:10px;margin-bottom:14px}
.lights i{width:12px;height:12px;border-radius:50%;animation:blink 1.6s infinite}
.lights i:nth-child(4n+1){background:#ff4d4d;color:#ff4d4d}.lights i:nth-child(4n+2){background:var(--gold);color:var(--gold);animation-delay:.4s}
.lights i:nth-child(4n+3){background:#4dff88;color:#4dff88;animation-delay:.8s}.lights i:nth-child(4n){background:#5aa9ff;color:#5aa9ff;animation-delay:1.2s}
@keyframes blink{50%{opacity:.25;box-shadow:none}0%,100%{box-shadow:0 0 10px 2px currentColor}}