html, body { overflow: hidden; touch-action: none; }
#stage { position: fixed; inset: 0; }
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#hud {
  position: absolute; top: 0; left: 0; right: 0; display: flex; gap: 10px;
  padding: 10px 14px; flex-wrap: wrap; pointer-events: none;
  font-size: 14px; color: var(--dim);
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.hud-item b { color: var(--ink); font-variant-numeric: tabular-nums; }
.hud-item.time b { color: var(--teal); }
.hud-item.time b.low { color: #ff7a5e; }
#banner {
  position: absolute; top: 18%; left: 50%; transform: translateX(-50%);
  font-size: clamp(20px, 4vw, 34px); font-weight: 800; color: var(--gold);
  letter-spacing: 1px; text-shadow: 0 2px 12px rgba(255, 200, 90, .5);
  opacity: 0; transition: opacity .25s; pointer-events: none; white-space: nowrap;
}
#banner.show { opacity: 1; }
#overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 14, 28, .72); backdrop-filter: blur(4px);
}
#overlay.hidden { display: none; }
#o-card {
  max-width: min(480px, 92vw); text-align: center; padding: 28px 26px;
  background: linear-gradient(160deg, #202a4a, #161d36);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
#o-title { font-size: clamp(26px, 6vw, 40px); letter-spacing: 3px; color: var(--gold); margin-bottom: 12px; }
#o-text { color: var(--dim); line-height: 1.6; margin-bottom: 18px; font-size: 15px; }
#o-text b { color: var(--ink); }
#o-btn {
  font: inherit; font-weight: 800; font-size: 17px; color: #101726;
  background: linear-gradient(180deg, #ffd976, #f0a93c);
  border: 0; border-radius: 999px; padding: 13px 34px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(255, 190, 80, .35);
}
#o-btn:active { transform: translateY(1px); }
.o-hint { margin-top: 14px; font-size: 12px; color: #6c7ba0; }
#dpad {
  position: absolute; right: 16px; bottom: 16px; width: 168px; height: 168px;
  display: grid; grid-template-areas: ". u ." "l . r" ". d ."; gap: 6px;
  opacity: .85;
}
#dpad button {
  width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--line);
  background: rgba(40, 52, 92, .75); color: var(--ink); font-size: 20px;
  touch-action: none; cursor: pointer;
}
#dpad button:active { background: rgba(90, 120, 190, .9); }
#pad-up { grid-area: u; justify-self: center; } #pad-down { grid-area: d; justify-self: center; }
#pad-left { grid-area: l; align-self: center; } #pad-right { grid-area: r; align-self: center; }