*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:'Courier New',monospace}

/* Scene uses 100% so it inherits parent (body) dimensions exactly — important for the
   phone-portrait rotation case where body is 100vh × 100vw. The 100svh fallback is the
   "small viewport height" — the visible viewport excluding mobile browser chrome —
   which never shifts when the URL bar shows/hides on iOS Safari / Chrome Android. */
#scene{
  position:relative;width:100%;height:100%;min-height:380px;
  overflow:hidden;cursor:default;background:#0481eb;
  image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;
}
/* Outside the phone-rotation media query, scene fills the actual viewport. svh+dvh
   ensure the size is stable on mobile chromes. */
@media not all and (orientation: portrait) and (max-width: 600px){
  /* var(--app-height) = window.innerHeight (the truly visible area, minus Safari's bars).
     Falls back to dvh/svh/vh on the rare browser where the JS var isn't set. */
  #scene{width:100vw;height:100vh;height:100svh;height:100dvh;height:var(--app-height,100dvh)}
}
/* drag disabled */

@media (min-width:661px){
  #scene{width:100vw;height:100vh;height:100svh}
}

#sky-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}
#stars{position:absolute;top:0;left:0;width:100%;height:60%;z-index:1;pointer-events:none;opacity:0}
.star{position:absolute;background:#fff;width:2px;height:2px}
.star.big{width:3px;height:3px;background:#ffe}

#celestial{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}

#sun-wrap{position:absolute;width:120px;height:120px;margin-left:-36px;margin-top:-36px;pointer-events:none}
#sun-glow-outer{position:absolute;inset:0;background:radial-gradient(circle,rgba(255,220,100,0.35) 0%,rgba(255,180,60,0.15) 35%,rgba(255,150,40,0) 65%);border-radius:50%;animation:sun-pulse 4s ease-in-out infinite}
#sun-glow-mid{position:absolute;inset:18px;background:radial-gradient(circle,rgba(255,235,140,0.6) 0%,rgba(255,200,80,0.3) 50%,rgba(255,180,40,0) 80%);border-radius:50%;animation:sun-pulse 3s ease-in-out infinite reverse}
#sun-rays{position:absolute;inset:0;animation:sun-rotate 30s linear infinite}
#sun-core{position:absolute;left:36px;top:36px;width:48px;height:48px;filter:drop-shadow(0 0 16px #ffeb78) drop-shadow(0 0 28px rgba(255,200,80,0.7))}
@keyframes sun-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.7;transform:scale(1.08)}}
@keyframes sun-rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
#moon{position:absolute;width:48px;height:48px;filter:drop-shadow(0 0 8px rgba(220,230,255,0.7)) drop-shadow(0 0 16px rgba(180,200,255,0.4))}

.plx{position:absolute;left:0;display:flex;flex-wrap:nowrap;will-change:transform,filter}
.plx img{height:100%;width:auto;display:block;flex-shrink:0;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;pointer-events:none;user-select:none;-webkit-user-drag:none}

#L-clouds{bottom:359px;height:160px;z-index:2}
#L-bgcity{bottom:89px;height:200px;z-index:3}
#L-city{bottom:106px;height:243px;z-index:4}
#L-trees{bottom:39px;height:120px;z-index:5}
#L-ground{bottom:0;height:55px;z-index:6}
#L-foreground{bottom:0;height:160px;z-index:8}
#L-extra-buildings{position:absolute;left:0;bottom:55px;width:100%;height:220px;z-index:7;pointer-events:none;overflow:visible;will-change:filter}
.bld{position:absolute;bottom:0;display:block;pointer-events:none;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}
/* Billboards/signs/benches glow warmly when spawned at night (illuminated-signage look) */
.bld-lit{filter:drop-shadow(0 0 6px rgba(255,205,90,0.9)) drop-shadow(0 0 15px rgba(255,160,40,0.5))}
#L-bg-buildings{position:absolute;left:0;bottom:55px;width:100%;height:240px;z-index:4;pointer-events:none;overflow:visible;will-change:filter}
.bgbld{position:absolute;bottom:0;display:block;pointer-events:none;opacity:0.92;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}

#city-lights{position:absolute;bottom:106px;left:0;height:243px;z-index:4;pointer-events:none;opacity:0;display:flex;flex-wrap:nowrap;will-change:transform,opacity;mix-blend-mode:screen}
#city-lights img{height:100%;width:auto;display:block;flex-shrink:0;image-rendering:pixelated;pointer-events:none}
#lamp-glows{position:absolute;bottom:0;left:0;height:160px;z-index:8;pointer-events:none;opacity:0;display:flex;flex-wrap:nowrap;will-change:transform,opacity;mix-blend-mode:screen}
/* Match the foreground tile size (height:100% → same width as the lamp-post tiles) so the glows
   sit exactly on the lamp heads. Without this the canvases stayed small and drifted out of line. */
#lamp-glows canvas{display:block;flex-shrink:0;height:100%;width:auto}

#player{
  position:absolute;left:25%;bottom:50px;
  width:43.7px;height:85px;z-index:9;pointer-events:none;
  background-image:url("data:image/png;base64,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");
  background-repeat:no-repeat;
  background-size:43.7px 85px;
  background-position:0 0;
  image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;
  transform-origin:50% 100%;will-change:bottom,transform,filter;
}
#player.face-left{transform:scaleX(-1)}

#bird-cv{position:absolute;top:0;left:0;width:100%;height:100%;z-index:7;pointer-events:none}
/* KFC advertising blimp — drifts high in the sky (same plane as birds, in front of the skyline).
   Lives in the scene (not a filtered layer) so it stays lit at night like a real ad blimp.
   A red envelope (.blimp-body) carries the real official KFC wordmark (.blimp-logo). */
.kfc-blimp{position:absolute;left:0;top:0;width:clamp(88px,13%,160px);z-index:7;pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,0.3));will-change:transform}
.kfc-blimp .blimp-body{display:block;width:100%;height:auto}
.kfc-blimp .blimp-logo{position:absolute;top:30%;left:30%;width:40%;height:auto}
#hud{position:absolute;top:14px;left:16px;z-index:50;font-size:10px;letter-spacing:3px;color:rgba(255,255,255,0.95);background:rgba(8,30,80,0.55);padding:6px 14px;border-radius:2px;pointer-events:none;text-transform:uppercase;text-shadow:1px 1px 0 rgba(0,0,0,0.6);border-left:2px solid #4ac8ff}
#hud .sub{display:block;font-size:8px;letter-spacing:2px;color:rgba(180,220,255,0.75);margin-top:2px}
#hud .time{display:inline-block;margin-left:6px;color:#ffd478;font-weight:bold}

#ctrl{position:absolute;top:14px;right:16px;z-index:50;display:flex;align-items:center;gap:14px;background:rgba(8,30,80,0.55);padding:8px 18px;border-radius:24px;border:1px solid rgba(120,200,255,0.2)}
#ctrl button{margin:0}
#ctrl button{background:rgba(74,200,255,0.18);border:1px solid rgba(120,200,255,0.4);color:#bfe8ff;font-family:'Courier New',monospace;font-size:11px;font-weight:bold;padding:3px 10px;border-radius:3px;cursor:pointer;letter-spacing:1px;transition:all 0.15s}
#ctrl button:hover{background:rgba(74,200,255,0.35);color:#fff}


#obstacles{
  position:absolute;left:0;bottom:30px;width:100%;height:40px;
  z-index:8;pointer-events:none;overflow:visible;
}
.obstacle{
  position:absolute;bottom:0;
  filter:drop-shadow(0 0 3px rgba(255,255,255,0.7)) drop-shadow(0 0 1px #000);
}
.obstacle-air{
  animation:crow-pulse 0.4s ease-in-out infinite alternate;
}
@keyframes crow-pulse{
  0%{filter:drop-shadow(0 0 3px rgba(255,60,60,0.4)) drop-shadow(0 0 1px rgba(255,255,255,0.6))}
  100%{filter:drop-shadow(0 0 8px rgba(255,40,40,0.9)) drop-shadow(0 0 4px rgba(255,200,100,0.6)) drop-shadow(0 0 2px #fff)}
}
/* First-bucket "JUMP!" teaching label — JS sets its bottom + translate3d(x) to track the bucket,
   so the animations here avoid `transform` (that would fight the JS positioning). */
#roll-warn{
  position:absolute; left:0; bottom:0; display:none; white-space:nowrap;
  padding:4px 11px; border-radius:6px;
  background:#E4002B; color:#fff;
  font-family:'Anton','Arial Narrow',Arial,sans-serif; font-weight:800;
  font-size:clamp(15px,3.4vw,22px); letter-spacing:1px; line-height:1;
  border:2px solid #fff; z-index:9; pointer-events:none; text-shadow:0 1px 0 rgba(0,0,0,0.45);
  box-shadow:0 0 8px rgba(228,0,43,0.6),0 2px 4px rgba(0,0,0,0.5);
}
#roll-warn.show{ display:block; animation:roll-warn-pop 0.4s ease-out, roll-warn-pulse 0.6s ease-in-out 0.4s infinite alternate; }
@keyframes roll-warn-pop{ from{opacity:0} to{opacity:1} }
@keyframes roll-warn-pulse{
  from{box-shadow:0 0 8px rgba(228,0,43,0.6),0 2px 4px rgba(0,0,0,0.5)}
  to{box-shadow:0 0 16px rgba(255,206,0,0.95),0 2px 4px rgba(0,0,0,0.5)}
}
/* Warning "!" for incoming air obstacles */
.obs-warning{
  position:fixed;right:16px;
  font-size:clamp(40px,12vw,64px);font-weight:900;
  color:#ff2020;line-height:1;
  font-family:'Courier New',monospace;
  z-index:200;pointer-events:none;
  text-shadow:0 0 12px rgba(255,0,0,1),0 0 30px rgba(255,0,0,0.6),0 0 4px #fff,0 0 60px rgba(255,0,0,0.3);
  animation:warn-flash 0.8s ease-out forwards;
  -webkit-text-stroke:2px #ff0000;
}
@keyframes warn-flash{
  0%{opacity:0;transform:scale(3)}
  12%{opacity:1;transform:scale(1.1)}
  20%{opacity:1;transform:scale(1)}
  30%{opacity:0.2}
  40%{opacity:1}
  50%{opacity:0.2}
  60%{opacity:1}
  70%{opacity:0.2}
  80%{opacity:1}
  100%{opacity:0;transform:scale(0.5)}
}
#game-over{
  display:none;position:fixed;inset:0;
  z-index:100;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(3px);
  font-family:'Courier New',monospace;
  color:#fff;
  align-items:center;justify-content:center;
  flex-direction:column;
  cursor:pointer;
}
.go-content{
  text-align:center;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;
  padding:20px;
}
.go-content *{pointer-events:auto}
#game-over h1{
  font-family:'Anton',sans-serif;            /* KFC display font (matches landing title) */
  font-size:clamp(42px,11vw,72px);font-weight:400;letter-spacing:4px;
  text-transform:uppercase;
  color:#E4002B;margin-bottom:16px;
  text-shadow:3px 3px 0 #8b0000,0 0 30px rgba(228,0,43,0.5);
}
.go-score{font-size:clamp(16px,5vw,24px);letter-spacing:4px;color:#ffd478;margin-bottom:8px}
.go-rank{font-size:clamp(14px,4vw,20px);letter-spacing:3px;color:#ffa800;margin-bottom:28px}
.go-buttons{display:flex;gap:14px;justify-content:center;margin-bottom:20px}
#game-over button{
  background:rgba(228,0,43,0.15);border:2px solid rgba(228,0,43,0.6);
  color:#fff;font-family:'Courier New',monospace;font-size:clamp(12px,3vw,15px);
  padding:12px 28px;border-radius:4px;cursor:pointer;letter-spacing:3px;
  text-transform:uppercase;transition:all 0.15s;pointer-events:auto;
}
#game-over button:hover{background:rgba(228,0,43,0.4);border-color:#fff}
#game-over #restart-btn{background:#E4002B;border-color:#fff}
#game-over #restart-btn:hover{background:#ff1a3d}
.go-hint{font-size:clamp(10px,2.6vw,12px);letter-spacing:2px;color:rgba(255,255,255,0.55);text-transform:uppercase;max-width:340px;line-height:1.6;margin-top:2px}
.go-hint strong{color:#ffd478;font-weight:700}

/* Pause overlay */
#pause-overlay{
  display:none;position:fixed;inset:0;
  z-index:100;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(3px);
  font-family:'Courier New',monospace;
  color:#fff;
  align-items:center;justify-content:center;
  flex-direction:column;
}
.pause-content{text-align:center;pointer-events:none}
.pause-content *{pointer-events:auto}
#pause-overlay h1{
  font-size:clamp(28px,8vw,48px);font-weight:900;letter-spacing:8px;
  margin-bottom:24px;
  text-shadow:2px 2px 0 rgba(0,0,0,0.8);
}
#resume-btn{
  background:rgba(228,0,43,0.15);border:2px solid rgba(228,0,43,0.6);
  color:#fff;font-family:'Courier New',monospace;font-size:clamp(14px,3.5vw,18px);
  padding:14px 36px;border-radius:4px;cursor:pointer;letter-spacing:5px;
  text-transform:uppercase;transition:all 0.15s;
}
#resume-btn:hover{background:#E4002B;border-color:#fff}
#resume-btn{display:block;margin:0 auto}
#pause-menu-btn{
  display:block;margin:14px auto 0;
  background:transparent;border:2px solid rgba(255,255,255,0.45);
  color:#fff;font-family:'Courier New',monospace;font-size:clamp(12px,3vw,15px);
  padding:11px 30px;border-radius:4px;cursor:pointer;letter-spacing:4px;
  text-transform:uppercase;transition:all 0.15s;
}
#pause-menu-btn:hover{background:rgba(255,255,255,0.12);border-color:#fff}
#score-hud{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:50;
  font-size:16px;letter-spacing:4px;color:#fff;
  font-family:'Courier New',monospace;
  text-shadow:1px 1px 0 rgba(0,0,0,0.6);
  pointer-events:none;
}
/* Old power bar HUD (removed — replaced by lives+coins) */
#collectibles{position:absolute;left:0;bottom:50px;width:100%;height:85px;z-index:9;pointer-events:none;overflow:visible}
.collectible{position:absolute;bottom:4px;left:0;font-size:22px;line-height:1;user-select:none;pointer-events:none;will-change:transform}
.collectible.coin{animation:coin-bob 0.9s ease-in-out infinite;filter:drop-shadow(0 0 4px rgba(255,215,0,0.6))}
/* Burger collectible — pixel-art sprite, warm glow. Movement + bob are JS-driven via
   translate3d (GPU-composited, no per-frame reflow), so no CSS keyframe transform here. */
.collectible.burger{width:26px;height:auto;image-rendering:pixelated;filter:drop-shadow(0 0 5px rgba(255,160,40,0.7))}
/* KFC bucket jackpot — bigger, with a gold + red glow so it reads as the rare, big-value pickup */
.collectible.bucket{width:38px;height:auto;image-rendering:pixelated;
  filter:drop-shadow(0 0 10px rgba(255,209,72,0.95)) drop-shadow(0 0 5px rgba(228,0,43,0.65))}
.collectible.collected{animation:coll-pop 0.25s ease-out forwards!important}
@keyframes coin-bob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.1)}}
/* Keep the collected item at its world X (set via --cx on collect) instead of letting
   the bare scale() wipe the inline translate3d and snap it to left:0 (bottom-left). */
@keyframes coll-pop{0%{transform:translate3d(var(--cx,0px),0,0) scale(1);opacity:1}100%{transform:translate3d(var(--cx,0px),0,0) scale(2);opacity:0}}

/* ── Power-ups ── */
.powerup{position:absolute;left:0;display:flex;align-items:center;justify-content:center;font-size:28px;line-height:1;user-select:none;pointer-events:none;border-radius:50%;border:3px solid #fff;z-index:25;will-change:transform}
.powerup.powerup-shield{background:radial-gradient(circle,rgba(80,180,255,0.95) 0%,rgba(30,90,200,0.7) 70%);box-shadow:0 0 18px rgba(80,180,255,0.9),inset 0 0 8px rgba(255,255,255,0.5);border-color:#a8dcff}
.powerup.powerup-magnet{background:radial-gradient(circle,rgba(255,215,80,0.95) 0%,rgba(200,140,0,0.7) 70%);box-shadow:0 0 18px rgba(255,215,80,0.9),inset 0 0 8px rgba(255,255,255,0.5);border-color:#fff5b0}
.powerup.powerup-boost{background:radial-gradient(circle,rgba(255,90,40,0.95) 0%,rgba(200,30,0,0.7) 70%);box-shadow:0 0 18px rgba(255,90,40,0.9),inset 0 0 8px rgba(255,255,255,0.5);border-color:#ffc0a0}
.powerup.collected{animation:coll-pop 0.35s ease-out forwards!important}
@keyframes powerup-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}

/* Player active-state visual feedback */
/* Shield: a curved blue energy bracket in front of the player.
   #player already has position:absolute so it acts as the positioning context for ::after. */
#player.has-shield::after{
  content:'';
  position:absolute;
  right:-22px;
  top:-12px;
  bottom:-12px;
  width:22px;
  border:5px solid rgba(140,210,255,1);
  border-left:none;
  border-radius:0 70% 70% 0 / 0 50% 50% 0;
  background:linear-gradient(90deg,transparent 0%,rgba(80,180,255,0.30) 50%,rgba(80,180,255,0.55) 100%);
  box-shadow:0 0 22px rgba(80,180,255,1),0 0 40px rgba(80,180,255,0.7),inset -6px 0 14px rgba(140,210,255,0.6);
  pointer-events:none;
  animation:shield-pulse 0.8s ease-in-out infinite;
  z-index:2;
}
#player.face-left.has-shield::after{
  /* Mirror to LEFT side when facing left */
  right:auto;
  left:-22px;
  border:5px solid rgba(140,210,255,1);
  border-right:none;
  border-radius:70% 0 0 70% / 50% 0 0 50%;
  background:linear-gradient(270deg,transparent 0%,rgba(80,180,255,0.30) 50%,rgba(80,180,255,0.55) 100%);
  box-shadow:0 0 22px rgba(80,180,255,1),0 0 40px rgba(80,180,255,0.7),inset 6px 0 14px rgba(140,210,255,0.6);
}
@keyframes shield-pulse{0%,100%{opacity:0.85;transform:scaleX(1)}50%{opacity:1;transform:scaleX(1.15)}}
/* Shield about to expire: faster, harder blink so the player sees the barrier
   is dropping. Overrides the calm shield-pulse while .shield-warning is set. */
#player.has-shield.shield-warning::after{animation:shield-warn 0.26s ease-in-out infinite}
@keyframes shield-warn{0%,100%{opacity:1;transform:scaleX(1.12);filter:saturate(1.5) brightness(1.25)}50%{opacity:0.2;transform:scaleX(0.9);filter:none}}

#player.has-boost{filter:drop-shadow(0 0 12px rgba(255,90,40,1)) drop-shadow(0 0 20px rgba(255,180,40,0.8));animation:boost-pulse 0.2s ease-in-out infinite}
@keyframes boost-pulse{0%,100%{transform:none}50%{transform:translateX(-2px)}}

/* Power-up HUD chips */
#powerup-hud{position:absolute;top:46px;left:16px;z-index:50;display:flex;gap:8px;pointer-events:none;font-family:'Courier New',monospace}
.pu-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:bold;color:#fff;padding:5px 10px;border-radius:14px;background:rgba(8,30,80,0.7);border:2px solid;letter-spacing:1px;text-shadow:1px 1px 0 rgba(0,0,0,0.7);box-shadow:0 0 10px currentColor}
.pu-chip.pu-shield{border-color:#80d0ff;color:#80d0ff}
.pu-chip.pu-magnet{border-color:#ffd848;color:#ffd848}
.pu-chip.pu-boost{border-color:#ff7040;color:#ff7040}

/* Speech bubble that pops above the runner on streaks (burger frenzy / dodge runs).
   JS positions it each frame (left = player x, bottom = above the head). Only opacity +
   the pop scale animate — position is set via left/bottom so there's no transform clash. */
#speech-bubble{
  position:absolute;left:0;bottom:0;z-index:45;
  transform:translateX(-50%);
  pointer-events:none;opacity:0;
  background:#fff;color:#101820;
  font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:1px;font-size:clamp(12px,3.2vw,18px);white-space:nowrap;
  padding:5px 14px;border-radius:14px;border:3px solid #E4002B;
  box-shadow:0 4px 14px rgba(0,0,0,0.35);
  transition:opacity 0.25s ease;
}
#speech-bubble::after{
  content:'';position:absolute;left:50%;bottom:-9px;margin-left:-8px;
  width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;
  border-top:9px solid #E4002B;
}
#speech-bubble.show{opacity:1;animation:bubble-pop 0.28s cubic-bezier(.18,.9,.32,1.4)}
@keyframes bubble-pop{0%{transform:translateX(-50%) scale(0.3)}100%{transform:translateX(-50%) scale(1)}}

/* ── Big Boss Showdown ── */
/* Boss sprite — hovers top-right; sized by % of the scene HEIGHT so it never dominates a
   short landscape phone. JS adds a gentle translateY bob; boss-defeated plays the pop. */
#boss-sprite{
  position:absolute;right:3%;top:6%;z-index:72;pointer-events:none;
  height:clamp(110px,34%,300px);width:auto;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,0.5));
  /* Stable GPU layer so the drop/bob composite smoothly (no mobile flicker) */
  will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
/* Grand entrance: the Big Boss drops down from above the screen and settles with a soft bounce.
   PURE translate (no scale) so the large art isn't resampled every frame — keeps it fluid on
   mobile. px (not vh) so it behaves identically through the 90deg body rotation. */
#boss-sprite.boss-enter{animation:boss-drop 1.6s cubic-bezier(0.3,1.12,0.5,1) both;will-change:transform,opacity}
@keyframes boss-drop{
  0%{transform:translate3d(0,-560px,0);opacity:0}
  45%{opacity:1}
  72%{transform:translate3d(0,14px,0)}
  88%{transform:translate3d(0,-6px,0)}
  100%{transform:translate3d(0,0,0);opacity:1}
}
/* Defeated: the burger flares white-hot, kicks up with a spin, then bursts away — SLOW so it reads */
#boss-sprite.boss-defeated{animation:boss-burst 1.3s ease-in forwards;z-index:71}
@keyframes boss-burst{
  0%{opacity:1;transform:scale(1) rotate(0);filter:brightness(1)}
  18%{transform:scale(1.3) rotate(-7deg);filter:brightness(2.4) saturate(1.4)}
  100%{opacity:0;transform:scale(0.32) rotate(30deg);filter:brightness(3)}
}
/* SLOW-MOTION fireball explosion centered on the boss (JS positions + sizes it). ~2.6s so the
   player can actually read the blast. */
/* Glow is baked into the gradient (no animated drop-shadow filter — that forced a full repaint
   every frame as it scaled, which glitched the background on mobile). Own GPU layer so it just
   composites over the scene. */
.boss-explosion{position:absolute;z-index:70;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#fff3c4 20%,#ffd148 38%,#ff7a00 58%,rgba(228,0,43,0.6) 76%,rgba(255,120,0,0.22) 86%,transparent 93%);
  transform:translateZ(0) scale(0.2);opacity:0;animation:boss-explode 2.6s cubic-bezier(0.15,0.7,0.25,1) forwards;
  will-change:transform,opacity;backface-visibility:hidden}
@keyframes boss-explode{
  0%{transform:translateZ(0) scale(0.2);opacity:1}
  18%{transform:translateZ(0) scale(1);opacity:1}
  55%{transform:translateZ(0) scale(1.7);opacity:0.92}
  100%{transform:translateZ(0) scale(2.35);opacity:0}
}
/* Two shockwave rings rippling slowly out of the blast */
.boss-explosion::before,.boss-explosion::after{content:'';position:absolute;inset:0;border-radius:50%;
  border:5px solid rgba(255,209,72,0.95);animation:boss-shock 2.4s cubic-bezier(0.1,0.7,0.2,1) forwards;
  will-change:transform,opacity}
.boss-explosion::after{border-color:rgba(255,122,0,0.85);animation-delay:0.45s}
@keyframes boss-shock{0%{transform:scale(0.35);opacity:0.95}100%{transform:scale(2.8);opacity:0}}
/* Food bits dripping off the boss (unique to the showdown). JS sets --dx/--dy/--rot per particle. */
.boss-drip{position:absolute;z-index:9;pointer-events:none;width:11px;height:13px;
  box-shadow:0 1px 2px rgba(0,0,0,0.35);animation:boss-drip-fall 1.2s ease-in forwards}
@keyframes boss-drip-fall{
  0%{transform:translate(0,0) rotate(0);opacity:0}
  14%{opacity:1}
  100%{transform:translate(var(--dx,0),var(--dy,150px)) rotate(var(--rot,200deg));opacity:0}
}
/* teardrop sauces */
.drip-ketchup{background:#cf2418;border-radius:54% 46% 50% 50%/64% 64% 36% 36%}
.drip-mustard{background:#e6a91d;border-radius:54% 46% 50% 50%/64% 64% 36% 36%}
.drip-cheese{background:#ffbf3b;border-radius:2px;width:12px;height:9px}
.drip-lettuce{background:#5fa83a;border-radius:60% 40% 55% 45%;width:13px;height:8px}
.drip-sesame{background:#f0d9a0;border-radius:50%;width:7px;height:9px}
/* Boss HUD: title + survival bar + instruction, top-center, only during a showdown */
#boss-hud{
  position:absolute;top:40px;left:50%;transform:translateX(-50%);z-index:60;
  display:none;flex-direction:column;align-items:center;
  width:min(320px,72%);pointer-events:none;text-align:center;
  font-family:'Courier New',monospace;
}
#boss-hud.active{display:flex}
#boss-title{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:2px;color:#fff;
  font-size:clamp(14px,3.6vw,22px);text-transform:uppercase;
  text-shadow:2px 2px 0 #8b0000,0 0 12px rgba(228,0,43,0.8)}
#boss-bar{width:100%;height:13px;background:rgba(0,0,0,0.45);border:2px solid #fff;
  border-radius:7px;overflow:hidden;margin:5px 0 3px}
#boss-bar-fill{width:0%;height:100%;background:linear-gradient(90deg,#ffd148,#E4002B);
  border-radius:5px;transition:width 0.12s linear}
#boss-hint{font-size:clamp(9px,2.4vw,11px);letter-spacing:1px;color:#ffd478;text-transform:uppercase}

/* ── Big Boss cinematic entrance (warning → VS fight-card → fight) ── */
/* Red "danger mode" vignette — pulses while the boss is incoming and during the fight.
   Sits behind the HUD/boss so it frames the screen without washing them out. */
#boss-vignette{position:absolute;inset:0;z-index:50;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 70px 10px rgba(228,0,43,0);transition:opacity 0.4s ease}
#boss-vignette.active{opacity:1;animation:boss-vig 1.15s ease-in-out infinite}
@keyframes boss-vig{
  0%,100%{box-shadow:inset 0 0 70px 12px rgba(228,0,43,0.5)}
  50%{box-shadow:inset 0 0 130px 34px rgba(228,0,43,0.82)}
}
/* Cinematic overlay: holds the INCOMING banner, then the YOU vs BIG BOSS fight-card. Fades in/out. */
#boss-cinematic{position:absolute;inset:0;z-index:70;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  text-align:center;font-family:'Anton',sans-serif;
  opacity:0;visibility:hidden;transition:opacity 0.6s ease,visibility 0.6s;
  will-change:opacity;transform:translateZ(0)}
#boss-cinematic.active{opacity:1;visibility:visible}
/* Spotlight darken — only while the VS fight-card is on screen. Center stays lighter than the
   edges so it reads as a spotlight; deep enough that the card pops even in the daytime scene. */
#boss-cinematic.phase-vs{background:radial-gradient(circle at 50% 44%,
  rgba(0,0,0,0.34) 0%,rgba(0,0,0,0.66) 48%,rgba(0,0,0,0.9) 100%)}
/* WARNING banner */
.boss-warn{font-size:clamp(26px,8vw,58px);letter-spacing:3px;text-transform:uppercase;color:#fff;
  text-shadow:0 0 18px rgba(228,0,43,0.95),3px 3px 0 #8b0000;
  animation:boss-warn-flash 0.42s steps(1,end) infinite}
@keyframes boss-warn-flash{0%,49%{color:#fff;transform:scale(1)}50%,100%{color:#ffd148;transform:scale(1.06)}}
/* VS fight-card: YOU slams in from the left, BIG BOSS from the right, the swords pop in center */
.boss-vs{display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,28px)}
.boss-vs span{text-transform:uppercase;line-height:1;will-change:transform,opacity;backface-visibility:hidden}
.vs-you{font-size:clamp(34px,10vw,84px);color:#fff;text-shadow:3px 3px 0 #101820,0 0 16px rgba(255,255,255,0.5);
  animation:vs-from-left 0.8s cubic-bezier(0.22,1,0.36,1) both}
.vs-x{font-size:clamp(30px,8vw,64px);filter:drop-shadow(0 0 10px rgba(255,209,72,0.9));
  animation:vs-pop 0.6s 0.45s cubic-bezier(0.2,1.25,0.4,1) both}
.vs-boss{font-size:clamp(34px,10vw,84px);color:#E4002B;text-shadow:3px 3px 0 #fff,0 0 22px rgba(228,0,43,0.9);
  animation:vs-from-right 0.8s cubic-bezier(0.22,1,0.36,1) both}
/* px (not vw) so the slam-in is identical on mobile despite the 90deg body rotation */
@keyframes vs-from-left{0%{transform:translate3d(-520px,0,0) scale(1.4);opacity:0}100%{transform:translate3d(0,0,0) scale(1);opacity:1}}
@keyframes vs-from-right{0%{transform:translate3d(520px,0,0) scale(1.4);opacity:0}100%{transform:translate3d(0,0,0) scale(1);opacity:1}}
@keyframes vs-pop{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
/* Boss taunt — a comic speech bubble that pops in just after the fight-card */
.boss-taunt{position:relative;max-width:80%;background:#fff;color:#101820;font-family:'Courier New',monospace;
  font-weight:bold;font-size:clamp(12px,3.4vw,18px);letter-spacing:0.5px;padding:12px 18px;border-radius:14px;
  border:3px solid #E4002B;box-shadow:0 6px 18px rgba(0,0,0,0.45);
  animation:taunt-in 0.6s 1s ease-out both}
.boss-taunt:after{content:'';position:absolute;bottom:-12px;right:34px;
  border:7px solid transparent;border-top-color:#E4002B;border-bottom:0}
@keyframes taunt-in{0%{transform:translateY(16px) scale(0.92);opacity:0}100%{transform:none;opacity:1}}
/* VS-card instruction line, just under the taunt */
.boss-howto{font-family:'Courier New',monospace;font-weight:bold;text-transform:uppercase;letter-spacing:2px;
  color:#ffd148;font-size:clamp(11px,3vw,16px);text-shadow:0 0 10px rgba(0,0,0,0.85),1px 1px 0 #8b0000;
  animation:taunt-in 0.55s 1.35s ease-out both}

/* ── VICTORY splash (boss defeated) — celebratory gold spotlight, NOT the red danger look ── */
#boss-cinematic.phase-victory{background:radial-gradient(circle at 50% 44%,
  rgba(255,209,72,0.22) 0%,rgba(0,0,0,0.5) 62%,rgba(0,0,0,0.82) 100%)}
.boss-victory{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:2px;
  font-size:clamp(28px,9vw,68px);color:#ffd148;
  text-shadow:3px 3px 0 #8b0000,0 0 26px rgba(255,209,72,0.95);
  animation:victory-in 0.55s cubic-bezier(0.2,1.5,0.4,1) both,victory-glow 1.1s 0.55s ease-in-out infinite}
.boss-reward{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:2px;
  font-size:clamp(22px,6.5vw,46px);color:#fff;text-shadow:2px 2px 0 #b00020,0 0 16px rgba(255,255,255,0.5);
  display:flex;align-items:center;gap:10px;animation:victory-in 0.5s 0.25s cubic-bezier(0.2,1.5,0.4,1) both}
.boss-reward .life-heart{display:inline-block;font-size:1.1em;filter:drop-shadow(0 0 10px rgba(228,0,43,0.9));
  animation:heartbeat 0.85s 0.5s ease-in-out infinite}
.boss-keeprun{font-family:'Courier New',monospace;font-weight:bold;text-transform:uppercase;letter-spacing:1.5px;
  color:#ffd478;font-size:clamp(12px,3.2vw,17px);text-shadow:0 0 10px rgba(0,0,0,0.85);
  animation:taunt-in 0.4s 0.6s ease-out both}
@keyframes victory-in{0%{transform:scale(0.4);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes victory-glow{0%,100%{text-shadow:3px 3px 0 #8b0000,0 0 18px rgba(255,209,72,0.7)}
  50%{text-shadow:3px 3px 0 #8b0000,0 0 34px rgba(255,209,72,1)}}
@keyframes heartbeat{0%,100%{transform:scale(1)}15%{transform:scale(1.28)}30%{transform:scale(1)}45%{transform:scale(1.18)}}

/* Lives HUD pulse when the extra life is granted — green/gold flash so it's unmistakable */
#lives-hud.life-gain{animation:life-gain 1.6s ease-out}
@keyframes life-gain{
  0%{transform:scale(1);text-shadow:none}
  12%{transform:scale(1.45);text-shadow:0 0 16px rgba(80,255,140,0.95),0 0 26px rgba(255,209,72,0.8)}
  30%{transform:scale(1.1)}
  50%{transform:scale(1.3);text-shadow:0 0 14px rgba(80,255,140,0.9)}
  100%{transform:scale(1);text-shadow:none}
}

@keyframes player-flash{0%,100%{filter:none}33%,66%{filter:brightness(8) sepia(1) hue-rotate(-30deg) saturate(6)}}
#player.flashing{animation:player-flash 0.5s steps(1) 3}

/* ── Collision damage feedback ── */
/* Full-screen edge flash on a hit — red for damage, blue when a shield absorbs it. Edge-only so
   the center playfield stays readable. */
#damage-flash{position:absolute;inset:0;z-index:58;pointer-events:none;opacity:0}
#damage-flash.hit{background:radial-gradient(ellipse at center,transparent 38%,rgba(210,0,0,0.66) 100%);
  animation:dmg-flash 0.45s ease-out}
#damage-flash.hit-shield{background:radial-gradient(ellipse at center,transparent 42%,rgba(40,150,255,0.6) 100%);
  animation:dmg-flash 0.42s ease-out}
@keyframes dmg-flash{0%{opacity:0}16%{opacity:1}100%{opacity:0}}
/* Screen shake — gentle but noticeable. Vertical travel kept small (<=3px) and the scale-up
   overscans enough to cover it, so the shake never reveals an edge gap (no "background breaking",
   even on mobile where the rotated game's short edge is small). */
#scene.scene-shake{animation:scene-shake 0.42s ease-out}
@keyframes scene-shake{
  0%{transform:translate3d(0,0,0) scale(1)}
  18%{transform:translate3d(-5px,3px,0) scale(1.03)}
  36%{transform:translate3d(5px,-3px,0) scale(1.03)}
  54%{transform:translate3d(-4px,2px,0) scale(1.025)}
  72%{transform:translate3d(3px,-2px,0) scale(1.02)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
/* The lost life punches + shakes red in the HUD so it's clear WHAT you lost */
#lives-hud.life-loss{animation:life-loss 0.5s ease-out}
@keyframes life-loss{
  0%{transform:scale(1)}
  18%{transform:scale(1.32) translateX(-5px);text-shadow:0 0 16px rgba(255,40,40,0.95)}
  38%{transform:scale(1.16) translateX(5px)}
  58%{transform:scale(1.22) translateX(-3px);text-shadow:0 0 12px rgba(255,40,40,0.8)}
  100%{transform:scale(1);text-shadow:none}
}
#phase-overlay{display:none;position:absolute;inset:0;z-index:200;background:rgba(0,0,0,0.78);flex-direction:column;align-items:center;justify-content:center;font-family:'Courier New',monospace;color:#fff;text-align:center}
#phase-overlay.active{display:flex}
#phase-msg{font-size:13px;letter-spacing:2px;line-height:2;max-width:360px;text-shadow:1px 1px 0 rgba(0,0,0,0.8)}
#phase-msg .hl{color:#ffd478}
#phase2-btn{display:none;margin-top:22px;background:rgba(200,16,46,0.3);border:2px solid #c8102e;color:#fff;font-family:'Courier New',monospace;font-size:13px;padding:10px 28px;border-radius:4px;cursor:pointer;letter-spacing:3px;text-transform:uppercase;transition:all 0.15s}
#phase2-btn.visible{display:block}
#phase2-btn:hover{background:rgba(200,16,46,0.6)}
#phase2-scene{display:none;position:absolute;inset:0;z-index:20;background:linear-gradient(180deg,#020816 0%,#0a0420 45%,#0d0a1a 100%)}
#phase2-scene.active{display:block}
#kfc-building{position:absolute;right:80px;bottom:50px;width:260px;height:300px}
#kfc-roof{position:absolute;top:0;left:0;right:0;height:36px;background:#c8102e;border:3px solid #8b0000;image-rendering:pixelated}
#kfc-sign{position:absolute;top:6px;left:50%;transform:translateX(-50%);font-family:'Courier New',monospace;font-weight:bold;font-size:20px;color:#fff;letter-spacing:6px;text-shadow:0 0 8px #ff4444,0 0 20px #ff0000,0 0 35px #c8102e}
#kfc-stripes{position:absolute;top:36px;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,#c8102e 0,#c8102e 18px,#fff 18px,#fff 36px)}
#kfc-walls{position:absolute;top:46px;left:0;right:0;bottom:0;background:#e8e8e0;border:3px solid #aaa}
#kfc-door{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:56px;height:84px;background:#3a2010;border:3px solid #1a0e08;border-bottom:none}
#kfc-windows{position:absolute;top:16px;left:0;right:0;display:flex;justify-content:space-around;padding:0 16px}
.kfc-win{width:46px;height:46px;background:linear-gradient(135deg,#ffe082,#ffca28,#ffe082);border:3px solid #999;box-shadow:0 0 10px rgba(255,200,50,0.5)}
#enemy{position:absolute;right:220px;bottom:50px;z-index:22;width:56px;height:84px}
#phase2-hud{display:none;position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:210;background:rgba(8,30,80,0.7);padding:10px 22px;border-radius:4px;font-family:'Courier New',monospace;color:#fff;text-align:center;border:1px solid rgba(120,200,255,0.2);white-space:nowrap}
#phase2-hud.active{display:block}
#p2-inventory{font-size:12px;letter-spacing:2px;margin-bottom:5px}
.p2-bar{display:inline-block;width:80px;height:6px;background:rgba(0,0,0,0.4);border-radius:3px;border:1px solid rgba(74,200,255,0.2);overflow:hidden;vertical-align:middle;margin-left:6px}
.p2-bar-fill{height:100%;background:#c8102e;border-radius:3px}
#p2-msg{font-size:8px;letter-spacing:2px;color:rgba(180,220,255,0.55);margin-top:3px}
#play-again-btn{display:none;position:absolute;bottom:14px;right:16px;z-index:210;background:rgba(74,200,255,0.18);border:1px solid rgba(120,200,255,0.4);color:#bfe8ff;font-family:'Courier New',monospace;font-size:11px;padding:8px 18px;border-radius:3px;cursor:pointer;letter-spacing:2px;text-transform:uppercase;transition:all 0.15s}
#play-again-btn.active{display:block}
#play-again-btn:hover{background:rgba(74,200,255,0.35);color:#fff}

/* ── Instructions overlay ── */
#instructions-overlay{
  display:none;position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,0.82);
  backdrop-filter:blur(3px);
  font-family:'Courier New',monospace;color:#fff;
  align-items:center;justify-content:center;flex-direction:column;
  overflow:hidden;
}
.instr-content{
  width:100%;max-width:430px;max-height:92vh;
  padding:18px 22px 18px;
  text-align:center;
  overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:#E4002B rgba(0,0,0,0.3);
}
.instr-content::-webkit-scrollbar{width:6px}
.instr-content::-webkit-scrollbar-track{background:rgba(0,0,0,0.3)}
.instr-content::-webkit-scrollbar-thumb{background:#E4002B;border-radius:3px}
.instr-content h2{
  font-family:'Anton',sans-serif;            /* KFC display font (matches title + game-over) */
  font-size:clamp(22px,6vw,34px);font-weight:400;letter-spacing:3px;
  text-transform:uppercase;
  color:#E4002B;margin-bottom:14px;
  text-shadow:2px 2px 0 #8b0000,0 0 20px rgba(228,0,43,0.4);
}
.instr-section{
  font-size:clamp(10px,2.4vw,12px);font-weight:bold;letter-spacing:3px;
  color:#ffa800;text-transform:uppercase;
  margin:14px 0 8px;padding:6px 0;
  border-top:1px dashed rgba(255,168,0,0.4);
  border-bottom:1px dashed rgba(255,168,0,0.4);
}
.instr-row{
  display:flex;align-items:flex-start;gap:12px;
  text-align:left;margin-bottom:8px;
  background:rgba(228,0,43,0.08);
  border:1px solid rgba(228,0,43,0.2);
  border-radius:6px;padding:8px 12px;
}
.instr-icon{
  font-size:clamp(22px,5.5vw,30px);flex-shrink:0;
  width:54px;text-align:center;line-height:1.2;
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 0 4px rgba(255,255,255,0.3));
}
.instr-icon.instr-crow{font-size:clamp(20px,5vw,28px)}
.instr-text{
  font-size:clamp(10px,2.6vw,12px);line-height:1.5;
  letter-spacing:0.5px;color:rgba(255,255,255,0.85);
}
.instr-text strong{color:#fff;letter-spacing:1px}

/* Power-up rows — color-coded to match the HUD chips */
.instr-row:has(.instr-pu-shield){background:rgba(80,180,255,0.10);border-color:rgba(128,208,255,0.45)}
.instr-row:has(.instr-pu-magnet){background:rgba(255,216,72,0.10);border-color:rgba(255,216,72,0.45)}
.instr-row:has(.instr-pu-boost){background:rgba(255,112,64,0.10);border-color:rgba(255,112,64,0.45)}
.instr-pu-shield{filter:drop-shadow(0 0 6px rgba(128,208,255,0.85))}
.instr-pu-magnet{filter:drop-shadow(0 0 6px rgba(255,216,72,0.85))}
.instr-pu-boost{filter:drop-shadow(0 0 6px rgba(255,112,64,0.85))}
#instr-go-btn{
  margin-top:20px;
  background:#E4002B;border:2px solid #fff;
  color:#fff;font-family:'Courier New',monospace;
  font-size:clamp(14px,4vw,18px);font-weight:bold;
  letter-spacing:5px;padding:14px 36px;border-radius:4px;
  cursor:pointer;text-transform:uppercase;
  box-shadow:0 4px 16px rgba(228,0,43,0.4);
  transition:all 0.15s;
}
#instr-go-btn:hover{background:#ff1a3d;box-shadow:0 4px 24px rgba(228,0,43,0.6)}

/* ── KFC shop at game start ── */
#kfc-shop-start{
  position:absolute;left:-8%;bottom:10px;
  /* % of #scene (the visual play area) — consistent on desktop, iPad, and iPhone in BOTH
     the CSS-rotated-portrait and native-landscape states, unlike vw which flips with rotation. */
  width:clamp(280px,52%,480px);
  z-index:7;pointer-events:none;
  opacity:0;
  transform-origin:bottom left;
  image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;
}
#kfc-shop-start.visible{opacity:1}
#kfc-shop-start img{width:100%;height:auto;display:block}

/* ── Main-menu preview: show the player + KFC shop as part of the environment
   (behind the landing overlay) so they get the same dim treatment as the city,
   trees, etc. Toggled by screens.js. */
body.landing-preview #kfc-shop-start{
  /* Just make it visible at its normal z-index — landing's 60% dim handles the rest */
  opacity:1;
}
/* Player stays at normal z-index and opacity:1; it sits in the scene behind the
   translucent landing overlay just like every other parallax layer. */

/* ── Portrait-specific styles DISABLED ──
   The entire page is force-rotated to landscape on portrait devices via the rule
   below, so no portrait-only overrides are needed. Kept commented for history.

@media (orientation: portrait) and (max-width: 900px){
  body.landing-preview #kfc-shop-start{ bottom:-40px; }
  body.landing-preview #player{ bottom:20px; }
  body.landing-preview #L-ground,
  body.landing-preview #L-foreground{ transform:translateY(25px); }
}
*/

/* ── FORCE LANDSCAPE ON PHONES ONLY ──
   Phones (≤600px wide in portrait) get the entire page rotated 90° so they ALWAYS see
   landscape. Tablets/iPads (≥768px wide in portrait) are intentionally NOT rotated —
   they render natively well in landscape and don't need the CSS hack.
   Once mobile fullscreen + screen.orientation.lock('landscape') succeed, the phone is
   physically landscape and this rule becomes a no-op (the media query stops matching).
   This is the CSS guarantee for the brief moment before the first tap and any phone
   browser that can't honor the orientation lock API. */
@media (orientation: portrait) and (max-width: 600px){
  html{
    overflow:hidden;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
  }
  body{
    margin:0;
    padding:0;
    overflow:hidden;
    /* Body becomes a landscape-shaped rectangle anchored off the right edge of the
       portrait viewport, then rotated 90° CW around its top-left so it falls back
       into the viewport perfectly aligned. Uses svh (stable mobile viewport, ignores
       URL bar shifts) so content fits even before fullscreen is entered.
       Geometry verified across iOS Safari / Chrome Android / Samsung Internet. */
    position:fixed;
    top:0;
    /* Rotated landscape rect sized from the REAL visible viewport (innerWidth/innerHeight),
       so with Safari's bars showing the whole playfield — including the ground — stays visible.
       Width = visible portrait height (the landscape's long edge); height = portrait width. */
    left:100vw;
    left:100svw;
    left:var(--app-width,100svw);
    width:100vh;
    width:100svh;
    width:var(--app-height,100svh);
    height:100vw;
    height:100svw;
    height:var(--app-width,100svw);
    transform-origin:0 0;
    transform:rotate(90deg);
  }
}

/* ── Rotate overlay hidden (auto-landscape via JS) ── */
#rotate-overlay{display:none}

/* ── Countdown overlay ── */
#countdown-overlay{
  position:fixed;inset:0;z-index:400;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.countdown-num{
  font-family:'Courier New',monospace;
  font-size:clamp(80px,25vw,160px);font-weight:900;
  color:#fff;
  text-shadow:
    0 0 30px rgba(228,0,43,0.8),
    0 0 60px rgba(228,0,43,0.4),
    4px 4px 0 #8b0000;
  animation:count-pop 0.9s ease-out;
}
@keyframes count-pop{
  0%{transform:scale(2.5);opacity:0}
  20%{transform:scale(1);opacity:1}
  80%{transform:scale(1);opacity:1}
  100%{transform:scale(0.6);opacity:0.3}
}

/* ── Lives + coins HUD ── */
#lives-hud{display:inline-block;font-size:clamp(14px,3.5vw,18px);letter-spacing:1px;white-space:nowrap;transform-origin:left center}

/* ── Mobile adjustments (landscape forced) ── */
@media (max-height:500px){
  /* HUD top-left: tighter for small landscape screens */
  #hud{top:6px;left:8px;font-size:8px;letter-spacing:1.5px;padding:5px 10px;border-left-width:2px}
  #hud .sub{font-size:7px;letter-spacing:1px}

  /* Controls top-right: enlarge icon buttons for fat fingers */
  #ctrl{top:6px;right:8px;padding:5px 10px;gap:10px;border-radius:20px}
  #ctrl button{width:46px;height:46px;font-size:19px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center}

  /* Score */
  #score-hud{font-size:16px;letter-spacing:3px;top:10px}

  /* Game-over overlay */
  .go-buttons{gap:10px}
  #game-over button{font-size:13px;padding:12px 26px;letter-spacing:2px}
}

/* ── Desktop (tall viewport): zoomed-in skyline ── */
@media (min-width:661px) and (min-height:501px){
  #L-bgcity{height:500px;bottom:120px}
  #L-city{height:580px;bottom:140px}
  #city-lights{height:580px;bottom:140px}
  #L-bg-buildings{height:500px;bottom:80px}
  #L-extra-buildings{height:480px;bottom:80px}
  #L-trees{height:240px;bottom:52px}
  #L-foreground{height:290px}
  #L-ground{height:80px}
  #L-clouds{height:240px;bottom:550px}
  #lamp-glows{height:290px}

  #hud{font-size:13px;padding:8px 16px}
  #score-hud{font-size:20px;letter-spacing:5px}
  #ctrl{padding:10px 20px}
  #ctrl button{font-size:16px;padding:5px 12px}
}

/* ── Mobile landscape (wide but short viewport): full skyline visible ── */
@media (min-width:661px) and (max-height:500px){
  #L-bgcity{height:200px;bottom:89px}
  #L-city{height:243px;bottom:106px}
  #city-lights{height:243px;bottom:106px}
  #L-bg-buildings{height:240px;bottom:55px}
  #L-extra-buildings{height:220px;bottom:55px}
  #L-trees{height:120px;bottom:39px}
  #L-foreground{height:160px}
  #L-ground{height:55px}
  #L-clouds{height:160px;bottom:359px}
  #lamp-glows{height:160px}
}

/* ═══════════════════════════════════════════════
   SCREENS — Landing, End-run, Leaderboard, Credits
   Colonel's Classic KFC Brand Theme
   ═══════════════════════════════════════════════ */

/* ── KFC stripe divider (reusable) ── */
.kfc-stripe{
  width:100%;height:8px;
  background:repeating-linear-gradient(90deg,#E4002B 0,#E4002B 16px,#fff 16px,#fff 32px);
  border-radius:1px;
}
.kfc-stripe-thin{
  width:100%;height:4px;
  background:repeating-linear-gradient(90deg,#E4002B 0,#E4002B 10px,#fff 10px,#fff 20px);
}

/* ── Shared overlay base ── */
.screen-overlay{
  display:none;position:fixed;inset:0;z-index:500;
  background:#1a0a00;
  overflow-y:auto;overflow-x:hidden;
  font-family:'Courier New',monospace;color:#fff;
}
/* `safe center` keeps content centered when it fits but aligns to the start (instead of
   clipping the top/bottom unreachably) when it's taller than the viewport — so the logo
   and footer are never cut off, and the overlay can scroll to reveal everything. */
.screen-overlay.active{display:flex;align-items:safe center;justify-content:safe center;flex-direction:column}

/* ── LANDING PAGE ── */
#landing-screen{
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(2px);
}
.landing-content{
  width:100%;max-width:420px;padding:32px 20px 20px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.landing-logo{
  width:80px;height:80px;margin-bottom:6px;
  border-radius:50%;
  border:3px solid #E4002B;
  box-shadow:0 0 24px rgba(228,0,43,0.4);
  object-fit:cover;
  image-rendering:auto;
}
/* Colonel Sanders icon — mascot badge above the wordmark on the landing hero */
.landing-colonel{
  width:clamp(64px,15vw,104px);height:auto;margin-bottom:4px;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,0.55));
}
/* Official KFC wordmark on the landing hero (white version on the dark scene overlay) */
.landing-wordmark{
  width:clamp(96px,22vw,150px);height:auto;margin-bottom:8px;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,0.5));
}
.landing-title{
  font-family:'Anton',sans-serif;
  font-size:clamp(40px,11vw,60px);font-weight:400;letter-spacing:3px;line-height:0.95;
  color:#fff;
  text-shadow:
    3px 3px 0 #8b0000,
    0 0 30px rgba(228,0,43,0.5);
  margin-bottom:2px;
}
.landing-title-sub{
  font-family:'Anton',sans-serif;
  font-size:clamp(20px,6vw,30px);font-weight:400;letter-spacing:6px;
  color:#E4002B;
  text-shadow:1px 1px 0 #8b0000;
  margin-bottom:14px;
}
.landing-stripe-wrap{width:100%;max-width:300px;margin-bottom:16px}
.landing-prize-banner{
  background:#E4002B;
  border:2px solid #fff;
  border-radius:4px;padding:8px 26px;margin-bottom:14px;
  box-shadow:0 4px 16px rgba(228,0,43,0.4);
}
.prize-text{
  display:block;font-size:15px;font-weight:bold;letter-spacing:5px;color:#fff;
}
.prize-sub{
  display:block;font-size:9px;letter-spacing:3px;color:rgba(255,255,255,0.7);margin-top:3px;
}
.landing-attempts{
  font-size:11px;letter-spacing:3px;color:rgba(255,255,255,0.55);margin:10px 0 20px;
}
.landing-attempts span{color:#E4002B;font-weight:bold}

/* ── Menu buttons ── */
.landing-menu{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px;margin-bottom:22px}
.menu-btn{
  background:rgba(228,0,43,0.12);
  border:2px solid rgba(228,0,43,0.5);
  color:#fff;font-family:'Courier New',monospace;
  font-size:15px;font-weight:bold;letter-spacing:5px;
  padding:14px 20px;border-radius:4px;cursor:pointer;
  text-transform:uppercase;transition:all 0.2s;
}
.menu-btn:hover,.menu-btn:active{
  background:rgba(228,0,43,0.35);
  border-color:#fff;
  box-shadow:0 0 18px rgba(228,0,43,0.35);
}
.menu-btn-start{
  background:#E4002B;
  border:2px solid #fff;
  color:#fff;
  font-size:18px;padding:16px 20px;
  box-shadow:0 4px 16px rgba(228,0,43,0.4);
}
.menu-btn-start:hover{
  background:#ff1a3d;
  box-shadow:0 4px 24px rgba(228,0,43,0.6);
}
.menu-arrow{
  color:rgba(255,255,255,0.4);font-size:14px;margin:0 6px;
}

/* ── Tap to start ── */
.landing-tap{
  font-size:11px;letter-spacing:4px;color:rgba(255,255,255,0.45);
  margin-bottom:24px;
  animation:tap-blink 2s ease-in-out infinite;
}
@keyframes tap-blink{0%,100%{opacity:0.45}50%{opacity:1}}

/* ── Footer buttons ── */
.landing-footer{
  display:flex;justify-content:space-between;width:100%;
  position:relative;padding:0 4px;
}
.footer-btn{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.2);
  color:rgba(255,255,255,0.6);font-family:'Courier New',monospace;
  font-size:9px;letter-spacing:2px;padding:6px 14px;
  border-radius:3px;cursor:pointer;text-transform:uppercase;
  transition:all 0.15s;
}
.footer-btn:hover{background:rgba(228,0,43,0.2);border-color:rgba(228,0,43,0.5);color:#fff}

/* ── END RUN SCREEN ── */
#endrun-screen{
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(2px);
}
.endrun-card{
  width:100%;max-width:420px;padding:0;
  background:rgba(15,10,8,0.92);
  border:2px solid rgba(228,0,43,0.4);
  border-radius:8px;
  box-shadow:0 8px 40px rgba(0,0,0,0.6);
  overflow:hidden;
}
.endrun-header{
  background:#E4002B;
  padding:16px 24px 12px;
  text-align:center;
  border-bottom:4px solid #8b0000;
}
.endrun-title{
  font-size:18px;letter-spacing:6px;color:#fff;
  margin:0;font-weight:900;
  text-shadow:1px 1px 0 #8b0000;
}
.endrun-stripe{
  height:6px;
  background:repeating-linear-gradient(90deg,#E4002B 0,#E4002B 14px,#fff 14px,#fff 28px);
}
.endrun-body{padding:20px 24px 24px;max-height:70vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.endrun-prize-banner{
  background:rgba(228,0,43,0.15);
  border:1px solid rgba(228,0,43,0.4);border-radius:4px;
  padding:8px 20px;margin-bottom:14px;text-align:center;
}
.endrun-score{
  text-align:center;font-size:13px;letter-spacing:3px;
  color:rgba(255,255,255,0.85);margin-bottom:14px;
}
.endrun-score span{color:#E4002B;font-weight:bold;font-size:16px}
.endrun-desc{
  font-size:10px;line-height:1.7;letter-spacing:0.5px;
  color:rgba(255,255,255,0.55);text-align:center;margin-bottom:18px;
}

/* ── Form ── */
.endrun-form{display:flex;flex-direction:column;gap:10px}
.endrun-input{
  background:rgba(0,0,0,0.5);
  border:1px solid rgba(228,0,43,0.3);
  color:#fff;font-family:'Courier New',monospace;
  font-size:12px;letter-spacing:2px;
  padding:12px 14px;border-radius:4px;
  outline:none;transition:border-color 0.2s;
}
.endrun-input::placeholder{color:rgba(255,255,255,0.3);letter-spacing:2px}
.endrun-input:focus{border-color:#E4002B;box-shadow:0 0 10px rgba(228,0,43,0.25)}
.endrun-consent{
  display:flex;gap:8px;align-items:flex-start;
  font-size:9px;line-height:1.6;color:rgba(255,255,255,0.5);
  margin:4px 0;cursor:pointer;
}
.endrun-consent input[type="checkbox"]{
  margin-top:3px;flex-shrink:0;accent-color:#E4002B;
}
.endrun-link{color:#E4002B;text-decoration:underline}
.endrun-link:hover{color:#ff4466}
/* Inline validation / error feedback on the submit form (hidden until it has text) */
.endrun-msg{font-size:11px;letter-spacing:1px;line-height:1.4;min-height:0;margin:2px 0 0;text-align:center}
.endrun-msg:empty{display:none}
.endrun-msg.is-error{color:#ff8094}
.endrun-msg.is-ok{color:#7CFC9A}
.endrun-btn{
  font-family:'Courier New',monospace;font-size:13px;
  letter-spacing:3px;padding:12px 20px;border-radius:4px;
  cursor:pointer;text-transform:uppercase;transition:all 0.2s;
  border:none;
}
.endrun-btn-submit{
  background:#E4002B;
  border:2px solid #fff;
  color:#fff;
  box-shadow:0 4px 12px rgba(228,0,43,0.35);
}
.endrun-btn-submit:hover{
  background:#ff1a3d;
  box-shadow:0 4px 20px rgba(228,0,43,0.5);
}
.endrun-btn-submit:disabled{
  background:rgba(228,0,43,0.4);border-color:rgba(255,255,255,0.3);
  cursor:not-allowed;opacity:0.7;
}
.endrun-btn-skip{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.2);
  color:rgba(255,255,255,0.6);
}
.endrun-btn-skip:hover{
  background:rgba(255,255,255,0.12);color:#fff;
}

/* ── LEADERBOARD & CREDITS OVERLAYS — KFC white card + red/white stripe band ── */
.overlay-card{
  width:100%;max-width:420px;padding:0;
  background:#ffffff;
  border:3px solid #E4002B;
  border-radius:10px;text-align:center;
  box-shadow:0 10px 48px rgba(0,0,0,0.55);
  overflow:hidden;
}
/* Bold KFC red/white vertical-stripe header band */
.overlay-header{
  background:repeating-linear-gradient(90deg,#E4002B 0,#E4002B 9%,#ffffff 9%,#ffffff 18%);
  padding:18px 24px 16px;
  border-bottom:3px solid #E4002B;
  position:relative;
}
/* Title sits on a solid red plate (white outline) so it pops off the stripe band */
.overlay-title{
  display:inline-block;
  font-size:20px;letter-spacing:6px;color:#fff;
  margin:0;font-weight:900;
  background:#E4002B;
  padding:6px 18px;border-radius:4px;
  border:2px solid #fff;
  box-shadow:0 3px 10px rgba(0,0,0,0.4);
}
/* Colonel mascot badge above the title — white plate so the dark KFC line-art
   reads crisply over the red/white stripe band (matches the landing hero). */
.overlay-colonel{
  display:block;width:46px;height:46px;object-fit:contain;
  margin:0 auto 8px;background:#fff;border-radius:50%;padding:6px;
  box-shadow:0 3px 10px rgba(0,0,0,0.35);
}
.overlay-stripe{
  height:6px;
  background:repeating-linear-gradient(90deg,#E4002B 0,#E4002B 14px,#fff 14px,#fff 28px);
}
.overlay-body{padding:20px 24px 24px;max-height:70vh;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#ffffff}
.overlay-close-btn{
  margin-top:16px;
  background:#E4002B;
  border:2px solid #E4002B;
  color:#fff;font-family:'Courier New',monospace;
  font-size:12px;letter-spacing:3px;padding:10px 30px;
  border-radius:4px;cursor:pointer;text-transform:uppercase;font-weight:bold;
  transition:all 0.15s;
}
.overlay-close-btn:hover{background:#ff1a3d;border-color:#8b0000}

/* Leaderboard rows — clean white/light alternating for readability (dark text) */
.leaderboard-list{margin-bottom:10px}
.lb-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 12px;font-size:12px;letter-spacing:2px;
  color:#101820;
  border-bottom:1px solid rgba(228,0,43,0.12);
}
.lb-row:nth-child(even){background:rgba(228,0,43,0.05)}
.lb-header{
  color:#fff;font-weight:900;letter-spacing:3px;
  background:#101820;
  border-bottom:3px solid #E4002B;
}
.lb-rank{width:46px;text-align:left;font-weight:bold}
.lb-name{flex:1;text-align:left;padding-left:10px}
.lb-score{width:70px;text-align:right;color:#E4002B;font-weight:900}
/* Top-3 podium — gold / silver / bronze, readable on the white card. #1 softly glows. */
.lb-row.lb-top{font-weight:900}
.lb-row.lb-top .lb-rank{letter-spacing:0;font-weight:900}
.lb-row.lb-top1{background:rgba(212,160,23,0.15);animation:lb-gold 1.8s ease-in-out infinite}
.lb-row.lb-top1 .lb-name,.lb-row.lb-top1 .lb-score{color:#b8860b;text-shadow:0 0 9px rgba(212,160,23,0.55)}
.lb-row.lb-top2{background:rgba(120,130,142,0.12)}
.lb-row.lb-top2 .lb-name,.lb-row.lb-top2 .lb-score{color:#5f6b78}
.lb-row.lb-top3{background:rgba(176,106,44,0.12)}
.lb-row.lb-top3 .lb-name,.lb-row.lb-top3 .lb-score{color:#a05a22}
@keyframes lb-gold{0%,100%{box-shadow:inset 0 0 0 rgba(212,160,23,0)}50%{box-shadow:inset 0 0 14px rgba(212,160,23,0.4)}}

/* ── Share score screen (reuses .overlay-card / .overlay-header / .overlay-body) ── */
#share-overlay .share-card{max-width:380px}
.share-preview{display:flex;align-items:center;justify-content:center;min-height:0;margin-bottom:12px}
/* Size by svmin (the SHORT viewport side = the visual landscape height, correct even in
   the iOS CSS-rotated frame) so the square card always leaves room for the buttons. */
.share-canvas{display:block;margin:0 auto;width:auto;height:auto;
  max-width:min(300px,82vw);max-height:40vmin;max-height:40svmin;
  border-radius:10px;box-shadow:0 6px 22px rgba(0,0,0,0.35)}
.share-loading{color:#101820;font-size:13px;letter-spacing:2px;opacity:0.55;padding:36px 10px;text-align:center}
.share-desc{font-size:12px;letter-spacing:1px;color:#101820;text-align:center;margin:0 0 14px;line-height:1.5}
.share-btn{display:block;width:100%;font-family:'Courier New',monospace;font-size:14px;letter-spacing:2px;text-transform:uppercase;font-weight:bold;padding:13px;border-radius:6px;cursor:pointer;margin-bottom:10px}
.share-btn-go{background:#E4002B;border:2px solid #E4002B;color:#fff}
.share-btn-go:hover{background:#ff1a3d}
.share-btn-skip{background:#fff;border:2px solid #E4002B;color:#E4002B}
.share-btn-skip:hover{background:rgba(228,0,43,0.08)}
.share-msg{font-size:11px;letter-spacing:1px;color:#0a7d2c;text-align:center;min-height:14px;margin-top:2px}
.share-msg:empty{display:none}
.share-tip{font-size:10px;line-height:1.45;color:rgba(16,24,32,0.6);text-align:center;margin-top:6px}
.share-tip b{color:#E4002B}
/* Header row keeps its score column white */
.lb-header .lb-score{color:#fff}
.lb-placeholder{
  font-size:10px;color:rgba(255,255,255,0.35);
  letter-spacing:2px;margin-top:12px;
}

/* Credits rows */
.credits-content{margin-bottom:10px}
.credit-row{
  display:flex;justify-content:space-between;
  padding:8px 12px;font-size:10px;letter-spacing:1px;
  border-bottom:1px solid rgba(228,0,43,0.08);
}
.credit-label{color:#E4002B;font-weight:bold}
.credit-val{color:rgba(255,255,255,0.65)}
.credits-tagline{
  font-size:10px;color:rgba(255,255,255,0.4);
  letter-spacing:2px;margin-top:16px;font-style:italic;
}

/* ── Mobile screen adjustments ── */
@media (max-width:660px){
  .landing-logo{width:64px;height:64px}
  /* title sizes handled by clamp() — no fixed override needed */
  .landing-content{padding:24px 16px 16px}
  .menu-btn{font-size:13px;padding:12px 16px;letter-spacing:4px}
  .menu-btn-start{font-size:16px;padding:14px 16px}
  .endrun-card{margin:0 12px}
  .endrun-body{padding:18px 18px 20px}
  .endrun-header{padding:12px 18px 10px}
  .overlay-card{margin:0 12px}
  .overlay-body{padding:18px 18px 20px}
  .overlay-header{padding:12px 18px}
  .landing-footer{padding:0}
}

/* ── Compact layout: fit everything in a short viewport ──
   Applies to BOTH real landscape phones (short height) AND phones we CSS-rotate to
   landscape (physically portrait, so their VISUAL height = physical width ≤600px).
   Without the second selector, rotated phones kept the tall portrait padding and the
   logo + footer got clipped. */
@media (orientation:landscape) and (max-height:500px),
       (orientation:portrait) and (max-width:600px){
  /* Landing */
  .landing-content{padding:8px 16px 6px;gap:0}
  .landing-logo{width:36px;height:36px;margin-bottom:2px}
  .landing-colonel{width:44px;margin-bottom:2px}
  .landing-wordmark{width:72px;margin-bottom:3px}
  .landing-title{font-size:30px!important;letter-spacing:3px;margin-bottom:0}
  .landing-title-sub{font-size:16px!important;letter-spacing:5px;margin-bottom:4px}
  .landing-stripe-wrap{margin-bottom:4px}
  .landing-prize-banner{padding:4px 16px;margin-bottom:4px}
  .prize-text{font-size:11px;letter-spacing:3px}
  .prize-sub{font-size:7px;margin-top:1px}
  .landing-attempts{font-size:9px;margin:4px 0 6px}
  .landing-menu{gap:5px;margin-bottom:6px}
  .menu-btn{font-size:11px;padding:7px 12px;letter-spacing:3px}
  .menu-btn-start{font-size:13px;padding:8px 14px}
  .landing-tap{font-size:9px;margin-bottom:6px}
  .landing-footer{padding:0 4px}
  .footer-btn{font-size:8px;padding:4px 10px}

  /* End-run */
  .endrun-card{max-width:500px}
  .endrun-header{padding:6px 14px 4px}
  .endrun-title{font-size:14px}
  .endrun-stripe{height:4px}
  .endrun-body{padding:8px 14px 10px;max-height:none;overflow-y:visible}
  .endrun-prize-banner{padding:4px 14px;margin-bottom:6px}
  .endrun-score{font-size:11px;margin-bottom:6px}
  .endrun-desc{font-size:9px;margin-bottom:6px}
  .endrun-input{padding:6px 10px;font-size:11px}
  .endrun-consent{font-size:8px;margin:4px 0}
  .endrun-form{gap:5px}
  .endrun-btn{padding:7px 14px;font-size:11px}

  /* Leaderboard & Credits overlays */
  .overlay-card{max-width:500px}
  .overlay-header{padding:6px 14px 4px}
  .overlay-header h2{font-size:14px}
  .overlay-stripe{height:4px}
  .overlay-body{padding:8px 14px 10px;max-height:none;overflow-y:visible}
  .lb-row{padding:4px 0;font-size:10px}
  /* Cap the leaderboard list so it scrolls internally — guarantees the CLOSE button stays
     on-screen on short/landscape phones (otherwise a full 10-row list pushed it off). */
  .leaderboard-list{max-height:46svmin;overflow-y:auto;-webkit-overflow-scrolling:touch;margin-bottom:8px}
  .credits-tagline{margin-top:6px;font-size:8px}

  /* Share screen — keep the card preview + BOTH buttons fully on a short/landscape phone.
     Body scrolls (svmin) as a safety if a device is even shorter. */
  #share-overlay .overlay-body{max-height:96svmin;overflow-y:auto;padding:10px 16px 12px}
  .share-preview{margin-bottom:8px}
  .share-canvas{max-height:36svmin}
  .share-desc{font-size:9px;margin:0 0 7px;line-height:1.4}
  .share-btn{font-size:11px;padding:9px;margin-bottom:6px;letter-spacing:2px}

  /* Instructions overlay */
  .instr-content{padding:10px 16px 12px}
  .instr-content h2{font-size:18px;letter-spacing:4px;margin-bottom:8px}
  .instr-row{margin-bottom:6px;padding:6px 10px;gap:8px}
  .instr-icon{font-size:20px;width:30px}
  .instr-text{font-size:10px;line-height:1.4}
  #instr-go-btn{margin-top:8px;padding:8px 24px;font-size:13px;letter-spacing:3px}
}