:root {
  color-scheme: dark;
  --bg: #02050d;
  --panel: #09142a;
  --cyan: #65e7ff;
  --green: #7cffb2;
  --pink: #ff5ecf;
  --yellow: #ffe66d;
  --text: #f5fbff;
  --muted: #879bb3;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; overflow: hidden; background: var(--bg); }
body {
  min-height: 100dvh;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: var(--text);
  background: radial-gradient(circle at 50% 12%, #102a50 0, #061022 34%, #02050d 72%);
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
#app { position: relative; width: min(100vw, 620px); height: 100dvh; margin: 0 auto; overflow: hidden; }
#gameWrap { position: absolute; inset: 76px 10px 154px; overflow: hidden; border: 1px solid rgba(101,231,255,.22); border-radius: 22px; background: #020711; box-shadow: 0 20px 70px rgba(0,0,0,.46), inset 0 0 0 1px rgba(255,255,255,.03); }
#game { display: block; width: 100%; height: 100%; touch-action: none; }
#hud {
  position: absolute; z-index: 5; top: calc(env(safe-area-inset-top) + 10px); left: 76px; right: 76px; height: 52px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 5px; padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: rgba(5,12,27,.76); backdrop-filter: blur(14px);
}
#hud div { min-width: 0; text-align: center; }
.hud-label { display: block; margin-bottom: 2px; color: var(--muted); font-size: 8px; letter-spacing: .12em; }
#hud strong { color: #fff; font-size: 14px; }
#combo { color: var(--yellow) !important; }
#topbar { position: absolute; z-index: 6; top: calc(env(safe-area-inset-top) + 10px); left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.icon-btn {
  width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.1); border-radius: 15px;
  color: #eafcff; text-decoration: none; background: rgba(5,12,27,.82); backdrop-filter: blur(14px); box-shadow: 0 10px 28px rgba(0,0,0,.24); pointer-events: auto; cursor: pointer;
}
#topbar > :last-child { margin-left: 6px; }
#muteBtn { margin-left: auto; }
#statusBadges { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); pointer-events: none; }
.status-badge { display: inline-flex; padding: 6px 10px; border: 1px solid rgba(101,231,255,.28); border-radius: 999px; color: #bdf6ff; background: rgba(5,18,34,.9); font-size: 9px; letter-spacing: .08em; box-shadow: 0 0 18px rgba(101,231,255,.14); }
#banner { position: absolute; z-index: 4; left: 50%; top: 16px; transform: translateX(-50%) translateY(-8px); padding: 7px 11px; border: 1px solid rgba(255,230,109,.22); border-radius: 999px; color: var(--yellow); background: rgba(4,9,20,.84); font-size: 9px; letter-spacing: .1em; opacity: 0; transition: .18s ease; pointer-events: none; white-space: nowrap; }
#banner.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#controls { position: absolute; z-index: 5; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 18px); width: 178px; height: 118px; transform: translateX(-50%); }
#controls button {
  position: absolute; width: 54px; height: 50px; display: grid; place-items: center; border: 1px solid rgba(101,231,255,.18); border-radius: 15px; color: #dcfaff; background: linear-gradient(180deg, rgba(17,39,68,.94), rgba(7,15,30,.94)); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.25); font-size: 18px;
}
#controls button:active { transform: scale(.94); background: rgba(101,231,255,.15); }
#controls .up { left: 62px; top: 0; }
#controls .left { left: 0; top: 58px; }
#controls .down { left: 62px; top: 58px; }
#controls .right { right: 0; top: 58px; }
.gesture-hint { position: absolute; z-index: 3; left: 18px; right: 18px; bottom: calc(env(safe-area-inset-bottom) + 139px); margin: 0; color: #657b94; text-align: center; font-size: 8px; line-height: 1.45; }
#overlay { position: absolute; z-index: 20; inset: 0; display: none; place-items: center; padding: 24px; background: rgba(1,4,11,.82); backdrop-filter: blur(13px); }
#overlay.visible { display: grid; }
.panel { width: min(100%, 380px); padding: 27px 24px; border: 1px solid rgba(101,231,255,.16); border-radius: 26px; background: linear-gradient(145deg, rgba(13,28,54,.98), rgba(5,10,23,.98)); box-shadow: 0 28px 80px rgba(0,0,0,.54), inset 0 1px rgba(255,255,255,.05); text-align: center; }
.eyebrow { margin: 0 0 10px; color: var(--cyan); font-size: 9px; letter-spacing: .2em; }
.panel h1 { margin: 0; font-size: clamp(47px, 14vw, 70px); line-height: .83; letter-spacing: -.08em; }
.panel h1 span { color: var(--green); text-shadow: 0 0 22px rgba(124,255,178,.34); }
#overlayText { margin: 20px auto 16px; max-width: 31ch; color: var(--muted); font-size: 11px; line-height: 1.65; }
.stats-line { margin: 12px 0 17px; color: #8094aa; font-size: 10px; letter-spacing: .12em; }
.stats-line strong { color: var(--yellow); font-size: 18px; }
.primary-btn { width: 100%; min-height: 54px; border: 0; border-radius: 15px; color: #03100b; background: linear-gradient(135deg, #7cffb2, #65e7ff); box-shadow: 0 12px 32px rgba(101,231,255,.2); font-weight: 900; letter-spacing: .13em; cursor: pointer; }
.panel .hint { margin: 14px 0 0; color: #5f738a; font-size: 8px; }
@media (min-width: 580px) {
  #gameWrap { left: 24px; right: 24px; }
  .gesture-hint { font-size: 9px; }
}