/* Full-bleed canvas, HUD pinned top, overlays centered, touch pad pinned bottom. */
@font-face { font-family: 'Bungee'; src: url('../fonts/bungee-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --night: #171034;
  --lava: #ff6a1f;
  --gold: #ffd36b;
  --cream: #fff6e0;
  --heart: #e8242f;
  --display: 'Bungee', Impact, 'Arial Black', sans-serif;
  --ui: ui-rounded, 'SF Pro Rounded', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--night);
  color: var(--cream);
  font-family: var(--ui);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* HUD */
#hud {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) calc(env(safe-area-inset-right, 0px) + 14px) 0 calc(env(safe-area-inset-left, 0px) + 14px);
  pointer-events: none;
}
.hud-left, .hud-right {
  background: rgba(0, 0, 0, 0.32); border-radius: 12px; padding: 6px 10px;
}
.hud-right { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.lives { display: flex; gap: 4px; }
.lives svg { width: 26px; height: 26px; }
.lives .full { fill: var(--heart); }
.lives .empty { fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 2; }
.lives .bump { animation: bump 0.35s ease-out; }
@keyframes bump { 50% { transform: scale(1.35); } }
.roofs { font-family: var(--display); font-size: 20px; color: var(--gold); }
.best { opacity: 0.8; font-size: 14px; }
.mute {
  pointer-events: auto; background: none; border: 1.5px solid rgba(255,255,255,0.5); color: var(--cream);
  border-radius: 8px; width: 32px; height: 28px; font-size: 16px; cursor: pointer;
}
.mute.off { opacity: 0.45; text-decoration: line-through; }
.jet { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; font-weight: 700; color: #ffc4e4; }
.jet-bar { width: 110px; height: 10px; border-radius: 5px; background: rgba(255,255,255,0.18); overflow: hidden; }
#jet-fill { display: block; height: 100%; width: 100%; background: #ff8cc6; }
.jet.warn #jet-fill { animation: blink 0.25s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

.banner {
  position: fixed; left: 50%; top: 22%; transform: translate(-50%, 0);
  font-family: var(--display); font-size: clamp(22px, 5vw, 38px); color: var(--cream);
  text-shadow: 0 3px 0 rgba(0,0,0,0.5); pointer-events: none; opacity: 0; white-space: nowrap;
}
.banner.show { animation: pop 1.3s ease-out forwards; }
@keyframes pop {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.8); }
  15% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  25% { transform: translate(-50%, 0) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -16px); }
}

/* Title / game over / paused */
.screen {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px; gap: 10px;
  background: rgba(15, 8, 30, 0.55);
}
.screen h1 {
  font-family: var(--display); font-weight: 400; margin: 0;
  font-size: clamp(48px, 11vw, 96px); line-height: 1; color: var(--gold);
  text-shadow: 0 4px 0 #b4462e, 0 0 30px rgba(255, 140, 60, 0.45);
}
.screen h2 { font-family: var(--display); font-weight: 400; margin: 0; font-size: clamp(30px, 7vw, 52px); color: var(--lava); text-shadow: 0 3px 0 #5a1a08; }
.how { max-width: 480px; font-size: 18px; line-height: 1.4; margin: 4px 0; }
.key { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 6px; text-align: left; font-size: 16px; }
.key li { display: flex; align-items: center; gap: 10px; }
.h { width: 24px; height: 24px; flex: none; }
.h.red { fill: var(--heart); }
.h.brown { fill: #8a5a36; }
.h.pink { fill: #ff8cc6; }
.controls { font-size: 14px; opacity: 0.85; margin: 2px 0; }
.portrait-tip { display: none; font-size: 14px; color: var(--gold); margin: 0; }
@media (orientation: portrait) and (pointer: coarse) { .portrait-tip { display: block; } }
.touch-only { display: none; }
@media (pointer: coarse) { .touch-only { display: block; } .key-only { display: none; } }
.play {
  margin-top: 8px; font-family: var(--display); font-size: 26px; padding: 12px 36px; cursor: pointer;
  color: #2a1408; background: var(--gold); border: 3px solid #2a1408; border-radius: 14px;
  box-shadow: 0 5px 0 #b4462e;
}
.play:active { transform: translateY(3px); box-shadow: 0 2px 0 #b4462e; }
.record { margin: 0; font-size: 15px; color: var(--gold); min-height: 1em; }
.final { font-family: var(--display); font-size: 34px; margin: 4px 0; color: var(--cream); }
.home-link { color: var(--cream); opacity: 0.75; font-size: 14px; margin-top: 6px; }

/* Touch pad */
.pad {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 calc(env(safe-area-inset-right, 0px) + 18px) calc(env(safe-area-inset-bottom, 0px) + 16px) calc(env(safe-area-inset-left, 0px) + 18px);
  pointer-events: none;
}
.pad button {
  pointer-events: auto; touch-action: none;
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16); border: 2px solid rgba(255, 255, 255, 0.45);
  color: var(--cream); font-size: 26px; font-family: var(--ui);
}
.pad-move { display: flex; gap: 14px; }
.pad .pad-jump { width: 96px; height: 96px; font-family: var(--display); font-size: 18px; background: rgba(255, 140, 198, 0.25); }
.pad button.down { background: rgba(255, 255, 255, 0.4); }

/* Short screens (phones held sideways): tighter title card so it fits without scrolling. */
@media (max-height: 520px) {
  .screen { gap: 4px; padding: 8px 16px; justify-content: center; overflow-y: auto; }
  .screen h1 { font-size: 46px; }
  .screen h2 { font-size: 30px; }
  .how { font-size: 15px; margin: 0; }
  .key { grid-auto-flow: column; gap: 16px; font-size: 13px; margin: 2px 0; }
  .h { width: 18px; height: 18px; }
  .key li { gap: 6px; }
  .controls { font-size: 12px; margin: 0; }
  .play { font-size: 20px; padding: 8px 28px; margin-top: 4px; }
  .final { font-size: 26px; margin: 0; }
  .lives svg { width: 22px; height: 22px; }
  .pad button { width: 64px; height: 64px; }
  .pad .pad-jump { width: 84px; height: 84px; }
}