* { margin: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #071426;
  font-family: "Segoe UI", system-ui, sans-serif; color: #dff3ff; }
#game-canvas { position: fixed; inset: 0; display: block; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#score-box { position: absolute; top: 14px; right: 18px; text-align: right; }
#score-box span { font-size: 30px; font-weight: 700; color: #bff7ff;
  text-shadow: 0 0 14px rgba(77,232,208,.7); }
#score-box small { display: block; letter-spacing: .3em; font-size: 10px; color: #5d88a8; }
#combo-box { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); }
#combo-box span { font-size: 22px; font-weight: 800; color: #ffc14d;
  text-shadow: 0 0 12px rgba(255,193,77,.8); transition: transform .12s; }
#judge { position: absolute; top: 31%; left: 50%; transform: translate(-50%,0);
  font-size: 40px; font-weight: 800; letter-spacing: .12em; opacity: 0;
  transition: opacity .25s, transform .25s; text-shadow: 0 0 18px currentColor; }
#health-wrap { position: absolute; top: 12px; left: 16px; width: 160px; height: 12px;
  border: 1px solid #2a5a7a; border-radius: 8px; overflow: hidden; background: #0a1f33; }
#health { height: 100%; width: 100%; border-radius: 8px; transition: width .25s; }
#progress-wrap { position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%);
  width: 240px; height: 5px; background: #0a1f33; border-radius: 4px; }
#progress { height: 100%; width: 0%; background: #4de8d0; border-radius: 4px; }
#pause-btn { position: absolute; top: 10px; left: 186px; pointer-events: auto;
  background: #10293f; color: #bff7ff; border: 1px solid #2a5a7a; border-radius: 8px;
  padding: 4px 10px; font-size: 14px; cursor: pointer; }

#touch-bar { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 14px; z-index: 6; }
.lane-btn { --lane: #fff; pointer-events: auto; width: 86px; height: 64px;
  border-radius: 16px; border: 2px solid var(--lane); cursor: pointer;
  background: rgba(10,31,51,.75); color: var(--lane); font-size: 22px; font-weight: 800;
  box-shadow: 0 0 18px rgba(0,0,0,.4), inset 0 0 14px rgba(255,255,255,.06);
  touch-action: none; user-select: none; -webkit-user-select: none; }
.lane-btn:active { background: var(--lane); color: #051018; }

#overlay { position: fixed; inset: 0; display: none; z-index: 10;
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 42%, rgba(16,52,84,.88), rgba(4,10,20,.95)); }
#overlay.show { display: flex; }
#panel { max-width: 560px; padding: 34px 30px; text-align: center;
  border: 1px solid #2a5a7a; border-radius: 20px; background: rgba(8,24,42,.85);
  box-shadow: 0 0 60px rgba(77,232,208,.15); }
#panel h1 { font-size: clamp(28px, 7vw, 44px); letter-spacing: .14em;
  background: linear-gradient(90deg, #ff5d8f, #4de8d0, #ffc14d);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
#panel .tag { color: #8fd0e8; margin: 10px 0 4px; }
#panel .how { color: #b9dcef; line-height: 1.6; font-size: 14px; margin-top: 14px; }
#panel b { color: #bff7ff; }
#panel-btn { margin-top: 22px; padding: 14px 34px; font-size: 17px; font-weight: 800;
  letter-spacing: .12em; border-radius: 40px; border: none; cursor: pointer;
  background: linear-gradient(90deg, #ff5d8f, #ffc14d); color: #14050f;
  box-shadow: 0 0 26px rgba(255,93,143,.55); }
@media (max-width: 500px) {
  .lane-btn { width: 72px; height: 56px; font-size: 18px; }
  #judge { font-size: 30px; }
  #pause-btn { left: auto; right: 16px; top: 60px; }
  #progress-wrap { bottom: 84px; width: 60vw; }
}