:root{--navy:#0a0f2c;--cyan:#3ff0ff;--mag:#ff3fb4;--gold:#ffcc33}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:var(--navy);color:#e8f6ff;font-family:'VT323',monospace;touch-action:none;user-select:none}
canvas{display:block;width:100vw;height:100vh;image-rendering:pixelated}
.screen{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px;text-align:center;background:radial-gradient(ellipse at center,rgba(10,15,44,.35),rgba(10,15,44,.85));z-index:5}
.screen.show{display:flex;animation:fade .5s}
@keyframes fade{from{opacity:0;transform:scale(1.04)}}
h1{font-family:'Silkscreen';font-weight:700;line-height:1;display:flex;flex-direction:column;gap:6px;text-shadow:3px 3px 0 var(--mag),-2px -2px 0 #1f3cff}
h1 span{font-size:clamp(28px,7vw,72px)}
h1 small{font-size:clamp(14px,2.5vw,22px);color:var(--cyan);text-shadow:none}
h2{font-family:'Silkscreen';font-size:clamp(24px,5vw,44px);color:var(--cyan);text-shadow:3px 3px 0 var(--mag)}
.gold{color:var(--gold)!important}
.sub{font-size:clamp(18px,2.6vw,26px);color:#bfe;max-width:640px;font-style:italic}
.btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
button{font-family:'Silkscreen';font-size:16px;padding:12px 18px;background:var(--navy);color:var(--cyan);border:3px solid var(--cyan);box-shadow:4px 4px 0 var(--mag);cursor:pointer}
button:hover{background:var(--cyan);color:var(--navy)}
button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--mag)}
#levelPick{display:flex;gap:8px}
#levelPick button{font-size:12px;padding:6px 10px;border-color:var(--gold);color:var(--gold)}
#levelPick button:disabled{opacity:.3;cursor:not-allowed}
ul,ol{font-size:22px;text-align:left;list-style-position:inside;max-width:560px;line-height:1.4}
b{color:var(--gold);font-weight:normal}
#winStats{font-size:26px;color:var(--gold)}
#fact{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);max-width:min(560px,90vw);padding:10px 16px;background:rgba(10,15,44,.9);border:2px solid var(--gold);font-size:20px;opacity:0;transition:opacity .4s;pointer-events:none;z-index:4}
#fact.show{opacity:1}
#touch{position:fixed;bottom:34px;left:0;right:0;display:none;justify-content:space-between;padding:0 14px;z-index:3;pointer-events:none}
#touch .pad{display:flex;gap:10px;pointer-events:auto}
#touch button{width:64px;height:64px;font-size:16px;padding:0;opacity:.75;border-radius:12px}
@media (pointer:coarse){#touch{display:flex}}
#topBtns{position:fixed;top:8px;right:8px;display:flex;gap:6px;z-index:6}
#topBtns button{padding:4px 10px;font-size:14px;box-shadow:2px 2px 0 var(--mag)}
#auth-status{position:fixed;top:10px;left:50%;transform:translateX(-50%);font-size:16px;color:#8ab;z-index:6;pointer-events:none}
footer{position:fixed;bottom:6px;left:0;right:0;text-align:center;z-index:7;font-size:16px}
footer a{color:var(--gold)}