* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a1020;
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  color: #cfe3df; -webkit-user-select: none; user-select: none; }
#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; }
#ui-root { position: fixed; inset: 0; pointer-events: none; }

#hud { position: fixed; inset: 0; }
#hud-top { position: absolute; top: 10px; left: 12px; right: 12px;
  display: flex; gap: 16px; align-items: baseline; text-shadow: 0 1px 3px #000; }
#hud-lives { color: #ff6a5a; font-size: 18px; letter-spacing: 3px; }
#hud-tier { color: #7fd8c8; font-size: 13px; letter-spacing: 2px; }
#hud-score { margin-left: auto; color: #ffd27a; font-size: 16px; }
#detect-wrap { position: absolute; top: 44px; left: 12px; width: 200px; height: 10px;
  border: 1px solid #2c4050; border-radius: 6px; background: #0e1626; overflow: hidden; }
#detect-bar { width: 0%; height: 100%; opacity: 0.35; transition: width 0.1s linear; }
#detect-label { position: absolute; left: 210px; top: -3px; font-size: 10px;
  letter-spacing: 2px; color: #7fd8c8; }
#hide-badge { position: absolute; top: 62px; left: 12px; opacity: 0; transition: opacity 0.25s;
  color: #9ef7e0; font-size: 11px; letter-spacing: 3px; text-shadow: 0 0 8px #2ec4b6; }
#toast { position: absolute; top: 88px; left: 50%; transform: translateX(-50%);
  opacity: 0; transition: opacity 0.4s; font-size: 13px; color: #ffe9b8;
  background: rgba(10,16,32,0.75); padding: 7px 14px; border-radius: 8px;
  border: 1px solid #2c4050; white-space: nowrap; max-width: 92vw; text-shadow: 0 1px 2px #000; }

#touch-ui { position: fixed; inset: 0; pointer-events: none; }
#stick { position: absolute; left: 18px; bottom: 18px; width: 116px; height: 116px;
  border-radius: 50%; border: 2px solid rgba(46,196,182,0.35);
  background: rgba(13,22,36,0.45); pointer-events: auto; touch-action: none; }
#stick-nub { position: absolute; left: 50%; top: 50%; margin: -22px 0 0 -22px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(46,196,182,0.55); border: 2px solid #9ef7e0; }
.tbtn { position: absolute; right: 18px; width: 84px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  letter-spacing: 2px; color: #9ef7e0; pointer-events: auto;
  border: 2px solid rgba(46,196,182,0.4); background: rgba(13,22,36,0.55); }
#btn-run { bottom: 18px; }
#btn-sneak { bottom: 80px; }
.tbtn.on { background: rgba(46,196,182,0.5); color: #062019; }
@media (pointer: fine) { #touch-ui { display: none; } }

.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(10,16,32,0.55), rgba(4,7,14,0.92));
  pointer-events: auto; }
.screen.hidden { display: none; }
.panel { max-width: 560px; width: min(92vw, 560px); padding: 28px 30px; text-align: center;
  background: rgba(13, 21, 36, 0.92); border: 1px solid #2c4050; border-radius: 16px;
  box-shadow: 0 20px 80px rgba(0,0,0,0.6), 0 0 40px rgba(46,196,182,0.08) inset; }
.panel h1 { font-size: clamp(28px, 6vw, 44px); letter-spacing: 10px; color: #9ef7e0;
  text-shadow: 0 0 18px rgba(46,196,182,0.6); margin-bottom: 14px; }
.panel p { font-size: 13px; line-height: 1.7; color: #a8c2bd; margin-bottom: 16px; }
#ov-keys { font-size: 11px; color: #6c8a95; margin-bottom: 20px; letter-spacing: 1px; }
#ov-btn { font: inherit; font-size: 14px; letter-spacing: 3px; color: #062019;
  background: linear-gradient(180deg, #55e8d6, #2ec4b6); border: 0; padding: 14px 34px;
  border-radius: 10px; cursor: pointer; box-shadow: 0 6px 24px rgba(46,196,182,0.35); }
#ov-btn:hover { filter: brightness(1.12); }