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

#hud { position: fixed; top: 12px; left: 14px; right: 14px; display: flex; gap: 18px;
  align-items: center; pointer-events: none; font-weight: 700; font-size: 15px;
  text-shadow: 0 2px 6px rgba(0,0,0,.6); flex-wrap: wrap; }
#hud .stat { background: rgba(7,34,41,.72); border: 1px solid rgba(111,227,255,.28);
  border-radius: 10px; padding: 6px 12px; backdrop-filter: blur(4px); }
#hud .stat span.lbl { color: #7fd6c2; font-weight: 600; font-size: 11px; display: block; letter-spacing: .08em; }
#hud .lives { color: #ff8a7a; letter-spacing: 2px; }

#toast { position: fixed; top: 74px; left: 50%; transform: translateX(-50%);
  background: rgba(11,48,56,.88); border: 1px solid rgba(255,200,77,.5); color: #ffd98a;
  padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  opacity: 0; transition: opacity .35s; pointer-events: none; white-space: nowrap; }

.overlay { position: fixed; inset: 0; display: flex; flex-direction: column; gap: 14px;
  align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(13,60,68,.86), rgba(4,17,22,.95));
  z-index: 10; padding: 20px; }
.overlay h2 { font-size: clamp(28px, 6vw, 52px); color: #ffd166; letter-spacing: .02em; }
.overlay p { max-width: 460px; line-height: 1.55; color: #bfe8dd; font-size: 15px; }
.overlay .keys { color: #eaf6f1; }
.overlay kbd { background: #123c46; border: 1px solid #2fa08c; border-radius: 6px;
  padding: 2px 8px; font-family: inherit; font-size: 13px; }
.bigbtn { display: inline-block; background: linear-gradient(180deg, #ffd166, #f4922e);
  color: #1b2a2e; font-weight: 800; font-size: 17px; text-decoration: none;
  border: none; border-radius: 999px; padding: 13px 34px; cursor: pointer;
  box-shadow: 0 6px 22px rgba(255,180,80,.35); margin-top: 6px; }
.bigbtn:hover { transform: translateY(-2px); }

#tilt-pad { position: fixed; left: 18px; bottom: 18px; width: 116px; height: 116px;
  border-radius: 50%; background: rgba(12,52,60,.55); border: 2px solid rgba(111,227,255,.4);
  z-index: 9; touch-action: none; display: flex; align-items: center; justify-content: center; }
#tilt-knob { width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9fe8ff, #2fa08c);
  box-shadow: 0 4px 12px rgba(0,0,0,.5); pointer-events: none; }
#btn-restart { position: fixed; right: 18px; bottom: 18px; z-index: 9;
  background: rgba(12,52,60,.72); color: #9fe8ff; border: 1px solid rgba(111,227,255,.45);
  border-radius: 999px; padding: 10px 18px; font-weight: 700; font-size: 13px; cursor: pointer; }
@media (pointer: fine) { #tilt-pad { opacity: .35; } }
@media (max-width: 640px) {
  #hud { gap: 8px; font-size: 13px; }
  #tilt-pad { width: 96px; height: 96px; }
}