:root { --gold:#ffc45e; --mint:#5cf2c4; --plum:#241631; --coral:#ff7a45; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; overflow:hidden; background:#170f33;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color:#f4e9ff; }
#stage, #stage canvas { position:fixed; inset:0; width:100%; height:100%; display:block; }
.hidden { display:none !important; }

#hud { position:fixed; inset:0; pointer-events:none; z-index:5; }
#hud-top { display:flex; gap:8px; flex-wrap:wrap; padding:10px; }
.hud-chip { background:rgba(23,15,51,.72); border:1px solid rgba(255,196,94,.4);
  border-radius:10px; padding:6px 12px; font-size:14px; backdrop-filter:blur(4px); }
.hud-chip b { color:var(--gold); font-variant-numeric:tabular-nums; }
#lights .life { display:inline-block; width:12px; height:12px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 8px var(--gold); margin-left:5px; }
#lights .life.off { background:#43325c; box-shadow:none; }
#timer-chip.low b { color:#ff5a5a; }
#hud-msg { position:absolute; left:0; right:0; top:18%; text-align:center;
  font-size:clamp(18px,4vw,30px); color:var(--mint); text-shadow:0 0 18px rgba(92,242,196,.6);
  opacity:0; transition:opacity .3s; }
#hud-msg.show { opacity:1; }
#hud-hint { position:absolute; bottom:8px; left:0; right:0; text-align:center;
  font-size:12px; color:rgba(244,233,255,.55); }

.screen { position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 30%, rgba(105,64,122,.55), rgba(23,15,51,.92));
  z-index:20; }
.panel { max-width:560px; margin:16px; padding:28px 32px; text-align:center;
  background:rgba(28,18,44,.85); border:1px solid rgba(255,196,94,.35); border-radius:18px;
  box-shadow:0 10px 50px rgba(0,0,0,.5); }
.panel h1 { margin:0 0 10px; font-size:clamp(30px,7vw,52px); letter-spacing:.12em; color:var(--gold);
  text-shadow:0 0 26px rgba(255,196,94,.55); }
.tag { color:#d9c9f2; line-height:1.5; }
.gold { color:var(--gold); font-weight:600; }
.howto { text-align:left; color:#c9b8e6; line-height:1.65; font-size:14px; margin:14px 0 20px; padding-left:20px; }
.btn-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn { pointer-events:auto; cursor:pointer; display:inline-block; padding:12px 26px; font-size:17px;
  font-weight:700; letter-spacing:.04em; color:#241631; text-decoration:none;
  background:linear-gradient(135deg,#ffd27a,#ff8f3f); border:none; border-radius:12px;
  box-shadow:0 0 24px rgba(255,150,60,.5); }
.btn.ghost { background:transparent; color:var(--gold); border:2px solid rgba(255,196,94,.5); box-shadow:none; }
.btn:active { transform:translateY(1px); }

/* Touch controls */
#touch-move, #touch-jump, #touch-look { display:none; }
@media (pointer: coarse) {
  #touch-move { display:block; position:fixed; left:14px; bottom:14px; z-index:10;
    width:110px; height:110px; border-radius:50%; pointer-events:auto;
    background:rgba(255,196,94,.14); border:2px solid rgba(255,196,94,.45); touch-action:none; }
  #touch-move-knob { position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px;
    border-radius:50%; background:rgba(255,196,94,.55); pointer-events:none; }
  #touch-jump { display:block; position:fixed; right:16px; bottom:16px; z-index:10; pointer-events:auto;
    width:88px; height:88px; border-radius:50%; touch-action:none;
    background:rgba(92,242,196,.16); border:2px solid rgba(92,242,196,.5);
    color:#bff8e2; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; }
  #touch-jump.pressed { background:rgba(92,242,196,.5); }
  #touch-look { display:block; position:fixed; right:0; top:0; width:55%; height:70%; z-index:9;
    pointer-events:auto; touch-action:none; }
  #hud-hint { display:none; }
}