:root{--sun:#ffb341;--hot:#ff5a36;--neon:#f4ff4f;--ink:#1a0f1f;--card:rgba(26,12,30,.78)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:#fbeedd;font-family:'JetBrains Mono',monospace;
background:radial-gradient(circle at 50% 110%,#ffcf5a 0,#ff7a3c 25%,#b2345c 55%,#3a1550 85%,#170a22 100%) fixed}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.08) 3px 4px)}
.title{font-family:'Press Start 2P';font-size:clamp(22px,5vw,44px);letter-spacing:2px;text-shadow:4px 4px 0 var(--ink)}
.acc{color:var(--neon)}
.sub{font-weight:300;opacity:.85;margin-top:8px;font-size:13px}
.pill{background:var(--ink);border:2px solid var(--neon);border-radius:999px;padding:6px 14px;font-size:11px}
.pill b{color:var(--neon)}
.card{background:var(--card);backdrop-filter:blur(6px);border:1px solid rgba(244,255,79,.25);border-radius:18px;padding:16px;
animation:rise .6s both cubic-bezier(.2,1.4,.4,1)}
@keyframes rise{from{opacity:0;transform:translateY(30px)}}
h2{font-family:'Press Start 2P';font-size:12px;margin-bottom:8px;color:var(--neon)}
.num{color:var(--hot);margin-right:6px}
.hint{font-size:11px;opacity:.7;margin-bottom:8px}
.pix{image-rendering:pixelated;border-radius:8px;background:#000;border:2px solid #000}
.btn{background:var(--neon);color:var(--ink);font-weight:700;font-size:12px;padding:7px 12px;border-radius:12px;
box-shadow:0 4px 0 #8a8f1f;transition:transform .12s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #8a8f1f}
.btn.ghost{background:transparent;color:var(--neon);border:1px solid var(--neon);box-shadow:none}
.btn.hot{background:var(--hot);color:#fff;box-shadow:0 4px 0 #8b2412}
.btn:disabled{opacity:.4}
.thumbs{display:flex;gap:6px;overflow-x:auto;margin-top:10px;padding-bottom:4px}
.thumbs div{flex:none;text-align:center;font-size:10px}
.thumbs canvas{width:48px;height:48px;image-rendering:pixelated;border-radius:4px;display:block}
.loss{background:#0d0612;border-radius:10px;border:1px solid #3a2340}
.crt{position:relative;border-radius:14px;overflow:hidden;border:3px solid #000}
.crt::after{content:"";position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 2px,transparent 2px 4px),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.55))}
.crt canvas{border:none;border-radius:0;display:block}
.hud{position:absolute;top:6px;left:8px;right:8px;display:flex;justify-content:space-between;font-family:'Press Start 2P';font-size:8px;color:var(--neon);text-shadow:1px 1px 0 #000}
.caption{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:11px;font-weight:700;text-shadow:1px 1px 0 #000}
.meter{height:10px;background:#0d0612;border-radius:6px;overflow:hidden;margin-top:4px}
#halBar{height:100%;width:0;background:linear-gradient(90deg,var(--neon),var(--hot));transition:width .2s}
.pad{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.pad button{background:#2a1530;border:1px solid var(--neon);color:var(--neon);border-radius:12px;padding:12px 0;font-size:18px;user-select:none;touch-action:none}
.pad button.on{background:var(--neon);color:var(--ink)}
input[type=range]{accent-color:var(--hot)}