* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #0b0e24; }
body { font-family: "Segoe UI", system-ui, sans-serif; color: #e8ecff; }
#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
#hud { position: fixed; top: 10px; left: 12px; right: 12px; display: flex; gap: 14px;
  font-size: 15px; pointer-events: none; text-shadow: 0 1px 4px #000; align-items: center; }
#hud .stat { background: rgba(11,14,36,.55); border: 1px solid rgba(122,140,255,.35);
  border-radius: 10px; padding: 6px 12px; }
#hud .lives { color: #ff7d9c; letter-spacing: 3px; }
#hud .spacer { flex: 1; }
.overlay { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; background: rgba(7,9,24,.72); backdrop-filter: blur(3px);
  text-align: center; padding: 20px; z-index: 5; }
.hidden { display: none; }
h1.big { font-size: clamp(34px, 8vw, 64px); letter-spacing: .12em; color: #59e6ff;
  text-shadow: 0 0 24px rgba(89,230,255,.55); }
.tagline { color: #ffd79a; font-size: clamp(14px, 3.5vw, 19px); max-width: 460px; }
.howto { max-width: 480px; font-size: 14px; line-height: 1.7; color: #c3cbe8; background: rgba(20,25,55,.6);
  border: 1px solid rgba(122,140,255,.3); border-radius: 12px; padding: 12px 18px; text-align: left; }
.btn { display: inline-block; background: linear-gradient(135deg, #ffce7a, #ff8f5e);
  color: #221200; font-weight: 700; font-size: 18px; padding: 12px 34px; border-radius: 999px;
  border: none; cursor: pointer; text-decoration: none; box-shadow: 0 6px 24px rgba(255,160,90,.4);
  letter-spacing: .05em; }
.btn:active { transform: translateY(2px); }
#tilt-ind { position: fixed; right: 22px; top: 58px; width: 84px; height: 84px; border-radius: 50%;
  border: 1px solid rgba(122,140,255,.35); background: rgba(11,14,36,.4); pointer-events: none; z-index: 3;
  display: flex; align-items: center; justify-content: center; }
#tilt-dot { width: 14px; height: 14px; border-radius: 50%; background: #ffce7a;
  box-shadow: 0 0 10px rgba(255,206,122,.8); }
#banner { position: fixed; top: 16%; left: 50%; transform: translateX(-50%);
  font-size: clamp(18px, 4.5vw, 30px); color: #ffe9b8; text-shadow: 0 0 18px rgba(255,200,120,.7);
  opacity: 0; transition: opacity .35s; pointer-events: none; z-index: 4; white-space: nowrap; }
#banner.show { opacity: 1; }
#stick { position: fixed; left: 14px; bottom: 14px; width: 118px; height: 118px; border-radius: 50%;
  background: radial-gradient(circle, rgba(90,110,200,.28), rgba(20,26,60,.55));
  border: 2px solid rgba(122,140,255,.45); z-index: 6; touch-action: none;
  display: flex; align-items: center; justify-content: center; }
#stick-knob { width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8fdcff, #2a9fd0); box-shadow: 0 0 14px rgba(89,230,255,.6);
  pointer-events: none; }
#btn-restart { position: fixed; right: 14px; bottom: 14px; z-index: 6; font-size: 14px; padding: 10px 18px; }
#endscreen .btn { margin-top: 8px; }
#end-lines { color: #c3cbe8; font-size: 16px; line-height: 1.8; }
@media (max-width: 500px) {
  #hud { font-size: 12px; gap: 8px; }
  #stick { width: 96px; height: 96px; }
}