* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #0a0f24; }
body { font-family: "Segoe UI", system-ui, sans-serif; color: #dfe6ff; }
#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#hud { position: fixed; top: 0; left: 0; right: 0; padding: 10px 14px; display: flex; gap: 14px;
  align-items: center; pointer-events: none; text-shadow: 0 1px 4px #000; font-size: 15px; flex-wrap: wrap; }
#hud .stat { background: rgba(10, 15, 36, 0.55); border: 1px solid rgba(46, 230, 200, 0.35);
  border-radius: 8px; padding: 4px 10px; }
#hud .stat b { color: #2ee6c8; font-weight: 600; }
#detect-wrap { width: 150px; height: 10px; background: rgba(255, 255, 255, 0.12);
  border-radius: 6px; overflow: hidden; }
#hud-detect-fill { height: 100%; width: 0%; background: #2ee6c8; transition: width 0.1s linear; }
#hud-sneak { opacity: 0; color: #2ee6c8; transition: opacity 0.2s; font-size: 13px; }
#banner { position: fixed; top: 64px; left: 50%; transform: translateX(-50%);
  font-size: 20px; font-weight: 700; color: #2ee6c8; text-shadow: 0 2px 10px #000;
  opacity: 0; transition: opacity 0.4s; pointer-events: none; text-align: center; }
.overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(5, 8, 20, 0.82); backdrop-filter: blur(4px); z-index: 10; }
.panel { max-width: 520px; margin: 16px; padding: 28px 30px; border-radius: 16px; text-align: center;
  background: linear-gradient(160deg, #141b3a, #0c1128); border: 1px solid rgba(46, 230, 200, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.panel h1 { font-size: 30px; letter-spacing: 2px; color: #2ee6c8; margin-bottom: 8px; }
.panel h1.alert { color: #ff4f78; }
.panel p { margin: 8px 0; line-height: 1.5; font-size: 15px; color: #b9c4ec; }
.panel .keys { text-align: left; font-size: 14px; margin: 12px auto; max-width: 380px; }
.panel .keys div { margin: 4px 0; }
kbd { background: #232b52; border: 1px solid #3c4a82; border-radius: 5px; padding: 2px 7px;
  font-family: inherit; font-size: 13px; color: #dfe6ff; }
.bigbtn { display: inline-block; margin-top: 14px; padding: 12px 34px; font-size: 17px; font-weight: 700;
  color: #06111f; background: linear-gradient(120deg, #2ee6c8, #6ff2df); border-radius: 999px;
  border: none; cursor: pointer; box-shadow: 0 6px 22px rgba(46, 230, 200, 0.4); }
.bigbtn:active { transform: translateY(1px); }
#touch-controls { position: fixed; inset: auto 0 0 0; display: none; z-index: 9;
  pointer-events: none; }
#touch-controls .tc { position: fixed; pointer-events: auto; user-select: none;
  -webkit-user-select: none; touch-action: none; }
#dpad { left: 12px; bottom: 12px; display: grid; gap: 6px;
  grid-template-areas: ". u ." "l c r" ". d ."; }
#dpad button { width: 58px; height: 58px; border-radius: 12px; font-size: 20px; color: #dfe6ff;
  background: rgba(20, 27, 58, 0.65); border: 1px solid rgba(46, 230, 200, 0.4); }
#side-btns { right: 12px; bottom: 12px; display: grid; gap: 8px; }
#side-btns button { width: 74px; height: 58px; border-radius: 12px; font-size: 13px; color: #dfe6ff;
  background: rgba(20, 27, 58, 0.65); border: 1px solid rgba(255, 180, 94, 0.45); }
button:active { background: rgba(46, 230, 200, 0.35); }