* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #0a0d1c; color: #e8ecff;
  font-family: "Avenir Next", Futura, "Trebuchet MS", system-ui, sans-serif; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hud { position: fixed; inset: 0; pointer-events: none; user-select: none; }
#top { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; gap: 10px;
  align-items: flex-start; justify-content: space-between; font-weight: 700; }
.pill { background: rgba(10,13,28,.72); border: 1px solid rgba(39,224,200,.3); border-radius: 10px;
  padding: 7px 12px; font-size: 14px; letter-spacing: .06em; }
#lives { color: #ffc46b; letter-spacing: 3px; }
#det-wrap { position: absolute; top: 52px; left: 50%; transform: translateX(-50%);
  width: min(340px, 70vw); }
#det-bar { height: 8px; border-radius: 6px; background: rgba(10,13,28,.7);
  border: 1px solid rgba(255,110,138,.35); overflow: hidden; opacity: 0; transition: opacity .25s; }
#det-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #27e0c8, #ffc46b, #ff4d6d); }
#det-label { text-align: center; font-size: 12px; letter-spacing: .18em; margin-top: 4px; color: #ff9aa9;
  text-shadow: 0 1px 6px #000; opacity: 0; transition: opacity .25s; }
#toast { position: absolute; top: 64%; left: 50%; transform: translateX(-50%); font-size: clamp(16px, 3.4vw, 24px);
  font-weight: 800; letter-spacing: .12em; color: #7cf5df; text-shadow: 0 2px 14px #000;
  opacity: 0; transition: opacity .35s; white-space: nowrap; }
#mode { position: absolute; bottom: 12px; left: 12px; font-size: 11px; color: #6fdcb0; opacity: .8;
  letter-spacing: .1em; }
.overlay { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; background: rgba(7,9,20,.82); text-align: center; padding: 20px; z-index: 5; }
.hidden { display: none; }
.overlay h1 { font-size: clamp(30px, 7vw, 58px); letter-spacing: .04em; color: #27e0c8;
  text-shadow: 0 0 34px rgba(39,224,200,.45); }
.overlay .sub { color: #ffc46b; font-weight: 700; font-size: clamp(14px, 2.6vw, 19px); max-width: 52ch; }
.overlay .keys { color: #9aa5cc; font-size: clamp(12px, 2.2vw, 15px); max-width: 54ch; }
.overlay .keys b { color: #e8ecff; }
.btn { pointer-events: auto; cursor: pointer; border: 0; border-radius: 999px; padding: 13px 36px;
  font-weight: 800; letter-spacing: .1em; font-size: 16px; color: #081016;
  background: linear-gradient(92deg, #27e0c8, #7cf5df); box-shadow: 0 8px 30px rgba(39,224,200,.35); }
.btn.alt { background: linear-gradient(92deg, #ffc46b, #ffe2a8); box-shadow: 0 8px 26px rgba(255,196,107,.3); }
/* touch controls */
#stick { position: fixed; left: 18px; bottom: 18px; width: 118px; height: 118px; border-radius: 50%;
  background: rgba(39,224,200,.12); border: 2px solid rgba(39,224,200,.35); pointer-events: auto; z-index: 4; }
#knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; background: rgba(124,245,223,.45); border: 1px solid rgba(124,245,223,.8); }
.tbtn { position: fixed; width: 92px; height: 92px; border-radius: 50%; pointer-events: auto; z-index: 4;
  border: 2px solid rgba(255,196,107,.5); background: rgba(255,196,107,.14); color: #ffd9a0;
  font-size: 12px; font-weight: 800; letter-spacing: .06em; touch-action: none; }
#b-sneak { right: 132px; bottom: 20px; } #b-sprint { right: 24px; bottom: 74px; }
body.touch #det-wrap { top: 60px; }