:root { --teal:#35e0ff; --mint:#7dfcbc; --amber:#ffb347; --ink:#0a1220; }
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; overflow: hidden; background: var(--ink);
  font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif; color: #dbe9f4; }
#c { position: fixed; inset: 0; display: block; touch-action: none; }
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud-top { position: absolute; top: 10px; left: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.chip { background: rgba(10,18,32,.72); border: 1px solid rgba(53,224,255,.35);
  border-radius: 8px; padding: 6px 12px; font-size: 13px; letter-spacing: .08em; }
.chip b { color: var(--mint); font-size: 15px; }
#detwrap { position: absolute; top: 12px; right: 14px; text-align: right; }
#detlabel { font-size: 11px; letter-spacing: .2em; color: #8fb4d1; margin-bottom: 4px; }
#detbar { width: 14px; height: 120px; margin-left: auto; border: 1px solid rgba(53,224,255,.4);
  border-radius: 7px; background: rgba(10,18,32,.7); overflow: hidden; display: flex;
  align-items: flex-end; }
#detfill { width: 100%; height: 0%; background: var(--teal); transition: height .12s linear; }
#banner { position: absolute; top: 18%; left: 50%; transform: translateX(-50%);
  font-size: clamp(18px, 4vw, 30px); letter-spacing: .12em; font-weight: 700;
  color: var(--amber); text-shadow: 0 0 18px rgba(255,179,71,.5);
  opacity: 0; transition: opacity .25s; white-space: nowrap; }
#banner.show { opacity: 1; }
#banner.red { color: #ff5544; text-shadow: 0 0 18px rgba(255,85,68,.6); }
#banner.mint { color: var(--mint); text-shadow: 0 0 18px rgba(125,252,188,.5); }

#overlay { position: fixed; inset: 0; display: none; align-items: center;
  justify-content: center; background: rgba(6,10,20,.72); z-index: 5; }
#overlay.show { display: flex; }
#panel { max-width: 520px; margin: 16px; padding: 26px 30px; text-align: center;
  background: linear-gradient(160deg, rgba(21,38,60,.95), rgba(10,18,32,.95));
  border: 1px solid rgba(53,224,255,.35); border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6); }
#ov-title { font-size: clamp(24px, 5vw, 36px); letter-spacing: .18em; color: var(--mint); }
#ov-msg { margin-top: 10px; line-height: 1.55; font-size: 14.5px; color: #b9cfe2; }
.keys { list-style: none; padding: 0; margin: 14px 0 18px; text-align: left;
  font-size: 13px; color: #9db6cc; }
.keys li { margin: 4px 0; }
.keys b { color: var(--teal); }
.big-btn { pointer-events: auto; cursor: pointer; font: inherit; font-weight: 700;
  letter-spacing: .14em; font-size: 15px; color: #06131f;
  background: linear-gradient(120deg, var(--mint), var(--teal));
  border: none; border-radius: 10px; padding: 13px 34px;
  box-shadow: 0 6px 24px rgba(53,224,255,.35); }
.big-btn:hover { filter: brightness(1.12); }

/* Touch controls: shown on coarse pointers */
#touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  #touch { display: block; }
  #joy { position: fixed; left: 16px; bottom: 20px; width: 120px; height: 120px;
    border-radius: 50%; background: rgba(53,224,255,.10);
    border: 1px solid rgba(53,224,255,.35); touch-action: none; z-index: 4; }
  #knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px;
    margin: -26px; border-radius: 50%; background: rgba(125,252,188,.35);
    border: 1px solid rgba(125,252,188,.6); }
  #look { position: fixed; right: 0; bottom: 0; width: 45%; height: 55%;
    touch-action: none; z-index: 3; }
  #sneak { position: fixed; right: 18px; bottom: 26px; width: 86px; height: 52px;
    border-radius: 26px; border: 1px solid rgba(255,179,71,.5); z-index: 4;
    background: rgba(255,179,71,.14); color: var(--amber); font: 700 13px/1 inherit;
    letter-spacing: .12em; }
  #sneak.on { background: rgba(255,179,71,.5); color: #06131f; }
}