:root{--navy:#071a3a;--cyan:#22e6ff;--pink:#ff3d9a;--yellow:#ffe23d;--ink:#000}
*{box-sizing:border-box}
body{margin:0;font-family:Fredoka,sans-serif;color:#fff;min-height:100vh;
background:radial-gradient(circle at 20% 0%,#16407a,transparent 50%),radial-gradient(circle at 90% 100%,#5a0f46,transparent 50%),var(--navy)}
header{display:flex;align-items:center;gap:14px;padding:14px 20px;flex-wrap:wrap}
h1{font-family:Bungee;margin:0;font-size:clamp(20px,4vw,38px);color:var(--yellow);text-shadow:4px 4px 0 var(--pink),7px 7px 0 #000;animation:wob 3s infinite}
@keyframes wob{50%{transform:rotate(-1.5deg)}}
.sub{margin:4px 0 0;color:var(--cyan)}
.bob{font-size:46px;animation:bob 1.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(8deg)}}
#auth-status{margin-left:auto;font-size:14px}
#auth-status a{color:var(--yellow)}
main{display:grid;grid-template-columns:300px 1fr 280px;gap:16px;padding:0 16px 16px}
@media(max-width:1000px){main{grid-template-columns:1fr}#stage{order:-1}}
.card{background:#0e2a55;border:3px solid #000;border-radius:16px;box-shadow:6px 6px 0 #000;padding:12px;margin-bottom:14px}
h2{font-family:Anton;letter-spacing:1px;margin:4px 0 8px;color:var(--cyan);font-size:18px}
.btn{font-family:Fredoka;font-weight:700;background:var(--cyan);color:#000;border:3px solid #000;border-radius:12px;padding:8px 12px;box-shadow:3px 3px 0 #000;cursor:pointer;transition:transform .08s}
.btn:active{transform:translate(3px,3px) scale(.95);box-shadow:none}
.btn.pink{background:var(--pink);color:#fff}.btn.yellow{background:var(--yellow)}
.btn.big{width:100%;font-size:18px}
body.shaky .btn{animation:shk .3s infinite}
@keyframes shk{25%{transform:translate(1px,-1px) rotate(1deg)}75%{transform:translate(-1px,1px) rotate(-1deg)}}
input:not([type=range]){font-family:Fredoka;border:3px solid #000;border-radius:10px;padding:8px;width:100%;margin:6px 0;background:#fff;color:#000}
.row{display:flex;gap:6px;align-items:center}
.row input{flex:1}
label{display:block;font-size:14px;margin:6px 0}
input[type=range]{width:100%;accent-color:var(--pink)}
.hero-row{display:flex;gap:10px;align-items:center}
#heroPreview{width:72px;height:72px;font-size:50px;display:grid;place-items:center;background:#06142c;border:3px solid #000;border-radius:12px;flex-shrink:0}
#heroPreview img{width:100%;height:100%;image-rendering:pixelated;object-fit:contain}
.presets{display:flex;flex-wrap:wrap;gap:4px}
.presets button,.grid4 button{font-size:12px;padding:5px 7px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.grid4 button{font-size:24px}
.sel{background:var(--yellow)!important;color:#000!important}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.chip{font-size:22px;background:#06142c;border:3px solid #000;border-radius:999px;padding:2px 8px;cursor:pointer;opacity:.35}
.chip.on{opacity:1;background:var(--pink)}
.premise{font-style:italic;color:var(--yellow);min-height:1.2em}
.canvas-wrap{padding:6px}
canvas{width:100%;aspect-ratio:16/9;display:block;border-radius:10px;background:#000;touch-action:none;cursor:pointer}
#board{padding-left:22px;margin:0}#board li{margin:4px 0}
.g{background:#06142c;border:2px solid #000;border-radius:10px;padding:8px;margin-bottom:6px;cursor:pointer}
.g:hover{background:#1b3f7a}.g small{color:var(--cyan)}
footer{text-align:center;padding:16px;color:#9bd}footer a{color:var(--yellow)}