:root{--bg:#050808;--line:#1e3028;--text:#d8f0d8;--muted:#7a9a7a;--acc:#5ce08a;--gold:#e8d060}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,"Noto Sans KR",sans-serif;overflow:hidden;user-select:none}
#wrap{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px}
.bar{width:min(960px,100%);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;font-size:.85rem;color:var(--muted)}
.brand span{color:var(--acc);font-weight:700;letter-spacing:.12em}
.hud{display:flex;flex-wrap:wrap;gap:14px}.hud b{color:var(--gold);font-variant-numeric:tabular-nums}
#stage-box{position:relative;width:min(960px,100%);aspect-ratio:384/256;background:#000;border:2px solid var(--line);box-shadow:0 0 0 1px #000,0 20px 50px rgba(0,0,0,.55);image-rendering:pixelated}
#c{width:100%;height:100%;display:block;image-rendering:pixelated;background:#020604}
#scan{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.28) 2px 3px);opacity:.85}
#scan.off{display:none}
#overlay{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(2,6,4,.82);text-align:center;padding:16px;gap:8px}
#overlay.hidden{display:none}
#overlay h1{margin:0;font-size:clamp(1.8rem,5vw,2.5rem);color:var(--acc);letter-spacing:.14em}
#overlay .tag{color:var(--gold);margin:0;font-size:.9rem}
#overlay p{margin:0;color:var(--muted);font-size:.9rem;max-width:28rem}
#overlay .hint{color:var(--acc);font-size:.85rem}
#btn-start{margin-top:8px;padding:12px 22px;border:1px solid var(--acc);border-radius:8px;background:linear-gradient(180deg,#1a3a24,#0a1810);color:#9af0b8;font-weight:700;cursor:pointer}
#toast{position:absolute;left:50%;top:16%;transform:translateX(-50%);background:rgba(0,0,0,.85);border:1px solid var(--gold);color:var(--gold);padding:6px 14px;border-radius:6px;font-weight:700;pointer-events:none}
.chk{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
#touch{display:none;position:absolute;left:0;right:0;bottom:6px;justify-content:center;gap:8px;pointer-events:none}
#touch button{pointer-events:auto;width:56px;height:44px;border:1px solid var(--line);border-radius:8px;background:rgba(10,20,12,.8);color:var(--text);font-weight:700;cursor:pointer;touch-action:none}
@media(max-width:700px),(pointer:coarse){#touch{display:flex}}