/* Pumpkin Smash game styles. The kit ui.css loads first (tokens --rr-*, fit
   shell). One state per screen: every .screen shares one flex slot inside
   .game-scroll and only one is visible, so the shell never scrolls. Screens
   pad their sides and bottom by the --rr-inset-* tokens. */
html, body { background: #2b1a0e; }
.game-shell { -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.screen {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rr-space-3);
  text-align: center;
  padding: 16px calc(16px + var(--rr-inset-right)) calc(16px + var(--rr-inset-bottom)) calc(16px + var(--rr-inset-left));
  overflow: hidden;
}
.screen.visible { display: flex; }
.screen h1 { margin: 0; letter-spacing: 0.06em; text-transform: uppercase; color: #ffb347; }

/* ---- Stage (T245): the course canvas, the HUD and the touch controls ----
   Menu bar choice: on the stage screen the kit header is hidden so the course
   gets the full height; the in-stage
   pause button opens the Pause screen, and Home and Settings come back through
   it (P051 Decisions: full-screen play keeps its layout). Every other screen
   shows the kit header (title and hamburger, T570). Portrait only (P067): the
   controls are their own row under the canvas, so a thumb never covers the
   course. Every control is --ps-btn square (64 px, 80 px
   with Big buttons; PS_input.applyButtonSize sets it from PS_data.input) and
   shrinks only on a very narrow phone. */
.game-shell { --ps-btn: 64px; --ps-gap: 12px; }
.game-shell[data-screen="stage"] > .menu-bar { display: none; }
#stage.screen { padding: 0; gap: 0; align-items: stretch; justify-content: flex-start; position: relative; }
.stage-view { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #7ec8e3; }
#ps-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.stage-hud {
  position: absolute; left: 0; right: 0; top: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px;
  padding-left: calc(var(--rr-inset-left) + 10px);
  padding-right: calc(var(--rr-inset-right) + 10px);
  pointer-events: none;
}
.stage-hud > * { pointer-events: none; }
.stage-hud .hud-right, .stage-hud .hud-right > button { pointer-events: auto; }
.hud-left { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.hud-icon { width: 40px; height: 40px; display: block; filter: drop-shadow(0 1px 2px rgba(43, 26, 14, 0.55)); }
.hud-pips { display: flex; gap: 4px; padding-left: 2px; }
.hud-pips i { width: 9px; height: 9px; border-radius: 50%; background: rgba(43, 26, 14, 0.6); border: 2px solid #fff3d6; box-sizing: border-box; }
.hud-pips i.on { background: #ff9a2e; border-color: #fff3d6; box-shadow: 0 0 4px rgba(255, 190, 80, 0.9); }
.hud-centre { width: clamp(150px, 44vw, 320px); display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.hud-meter {
  position: relative; height: 22px; border-radius: 12px; overflow: hidden;
  background: #3a2210; border: 3px solid #fff3d6; box-sizing: border-box; box-shadow: 0 2px 4px rgba(43, 26, 14, 0.5);
}
.hud-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(#ffb347, #ff8a1c 60%, #e8700e);
  border-radius: 0 9px 9px 0; will-change: transform;
}
.hud-total {
  position: absolute; left: 8px; right: 34px; top: 0; bottom: 0; display: flex; align-items: center; justify-content: flex-start;
  font: 800 12px/1 system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px #3a2210, 0 0 3px #3a2210; letter-spacing: 0.02em;
}
.hud-gate { position: absolute; right: 2px; top: 50%; width: 26px; height: 26px; margin-top: -13px; }
.hud-meter.lit { box-shadow: 0 0 8px 2px rgba(255, 210, 60, 0.85), 0 2px 4px rgba(43, 26, 14, 0.5); border-color: #ffe27a; }
.hud-meter.pop { animation: hud-pop 0.22s ease-out; }
@keyframes hud-pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.hud-counts { display: flex; justify-content: center; gap: 10px; }
.hud-count { display: flex; align-items: center; gap: 2px; background: rgba(43, 26, 14, 0.5); border-radius: 10px; padding: 1px 6px 1px 2px; }
.hud-count canvas { width: 20px; height: 20px; display: block; }
.hud-count b { font: 800 13px/1 system-ui, sans-serif; color: #fff; min-width: 1ch; }
.hud-right { display: flex; justify-content: flex-end; align-items: flex-start; gap: 8px; }
.hud-golden { width: 32px; height: 32px; margin-top: 6px; display: block; filter: drop-shadow(0 1px 2px rgba(43, 26, 14, 0.55)); }
.stage-pause { min-width: 48px; min-height: 48px; font-size: 1.1rem; background: rgba(43, 26, 14, 0.55); }
.controls {
  position: relative; flex: none; display: flex; justify-content: space-between; align-items: flex-end;
  --ps-size: min(var(--ps-btn), calc((100vw - var(--rr-inset-left) - var(--rr-inset-right) - 56px) / 4));
  padding: 10px calc(var(--rr-inset-right) + 16px) calc(var(--rr-inset-bottom) + 10px) calc(var(--rr-inset-left) + 16px);
  background: #2b1a0e;
  /* none, not manipulation: a pan or pinch gesture makes the browser cancel the pointer, which drops a held arrow mid-jump (P040) */
  touch-action: none;
}
.pad { display: flex; align-items: flex-end; gap: var(--ps-gap); }
.ctl {
  width: var(--ps-size); height: var(--ps-size); min-width: 64px; min-height: 64px;
  border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.75);
  background: rgba(255, 140, 40, 0.78); color: #fff; font-size: 1.6rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
  -webkit-user-select: none; user-select: none; touch-action: none;
  -webkit-tap-highlight-color: transparent; font-family: inherit;
}
.ctl[hidden] { display: none; }
.ctl.down { transform: scale(0.93); background: rgba(255, 190, 80, 0.95); }
.ctl-smash { margin-bottom: 26px; background: rgba(214, 60, 40, 0.8); }
.ctl-smash canvas { display: block; pointer-events: none; }
/* The charge ring (T433): a conic fill around the Smash button, outside its edge so a thumb on the button leaves it showing. --ps-charge is 0..1, written by PS_ui. */
.ctl-smash { position: relative; }
.ctl-ring {
  position: absolute; inset: -10px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 0.08s linear;
  background: conic-gradient(#ffd23c calc(var(--ps-charge, 0) * 1turn), rgba(255, 255, 255, 0.28) 0);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)); mask-image: radial-gradient(circle closest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
}
.ctl-ring.on { opacity: 1; }
/* The aim knob (T770): a small disc on the Smash button while a Boomerang or Flare aim is held. Decorative: it never takes a touch. --ps-kx and --ps-ky are -1..1 (a finger 40 px away is 1);
   the rim is half the button less half the knob. */
.ctl-knob {
  --ps-knob: 22px; position: absolute; left: 50%; top: 50%; width: var(--ps-knob); height: var(--ps-knob); margin: calc(var(--ps-knob) / -2) 0 0 calc(var(--ps-knob) / -2);
  border-radius: 50%; pointer-events: none; opacity: 0; background: #fff3a0; border: 2px solid #8a5a10; box-shadow: 0 0 6px rgba(255, 210, 60, 0.9); box-sizing: border-box;
  transform: translate(calc(var(--ps-kx, 0) * (var(--ps-size) / 2 - var(--ps-knob) / 2 - 3px)), calc(var(--ps-ky, 0) * (var(--ps-size) / 2 - var(--ps-knob) / 2 - 3px)));
}
.ctl-knob.on { opacity: 1; }
.ctl-ring.full { background: conic-gradient(#fff3a0 0 1turn); filter: drop-shadow(0 0 5px rgba(255, 210, 60, 0.95)); }
.ctl-ring.pulse { animation: ring-pulse 0.5s ease-in-out infinite alternate; }
@keyframes ring-pulse { from { transform: scale(1); } to { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .ctl-ring.pulse { animation: none; } }
.ctl-jump { background: rgba(60, 150, 220, 0.8); }
.ctl-lift { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); background: rgba(255, 255, 255, 0.85); color: #333; }
.ctl-lift.down { transform: translateX(-50%) scale(0.93); }

/* ---- New weapon banner (T253): the weapon icon in a burst, about 1 s, no words; play never pauses ---- */
.hud-banner {
  position: absolute; left: 50%; top: calc(var(--rr-inset-top, 0px) + 84px); width: 96px; height: 96px; margin-left: -48px;
  display: none; align-items: center; justify-content: center; pointer-events: none;
}
.hud-banner.show { display: flex; animation: hud-pop 1s ease-out forwards; }
.hud-burst {
  position: absolute; inset: -14px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 226, 122, 0.95) 0 12deg, rgba(255, 226, 122, 0) 12deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 72%); mask-image: radial-gradient(circle, #000 35%, transparent 72%);
  animation: hud-spin 1s linear forwards;
}
.hud-banner::before {
  content: ""; position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 250, 220, 0.95) 30%, rgba(255, 190, 80, 0.85) 100%);
  border: 3px solid #fff3d6; box-shadow: 0 0 14px rgba(255, 210, 60, 0.9);
}
.hud-banner canvas { position: relative; width: 64px; height: 64px; }
@keyframes hud-pop { 0% { transform: scale(0.2); opacity: 0; } 15% { transform: scale(1.18); opacity: 1; } 28% { transform: scale(1); } 80% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes hud-spin { from { transform: rotate(0deg); } to { transform: rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .hud-burst { animation: none; } }

/* ---- First-play hints (T264): icons and motion only. A pulsing ring and a bobbing arrow on the button to use; Puff's happy badge on the first rescue ---- */
.ctl.hint { position: relative; animation: hint-pulse 0.9s ease-in-out infinite; border-color: #fff6b0; }
.ctl.hint::after {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 6px); margin-left: -14px; width: 0; height: 0;
  border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 22px solid #ffe44a;
  filter: drop-shadow(0 2px 0 #8a5a10) drop-shadow(0 0 4px rgba(255, 240, 130, 0.95)); animation: hint-arrow 0.9s ease-in-out infinite; pointer-events: none;
}
@keyframes hint-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(255, 244, 150, 0.95), 0 0 10px 4px rgba(255, 240, 130, 0.7); }
  50% { transform: scale(1.13); box-shadow: 0 0 0 7px rgba(255, 250, 190, 0.95), 0 0 26px 12px rgba(255, 244, 150, 0.95); }
}
@keyframes hint-arrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.ctl.hint.down { transform: scale(0.93); }
.hint-puff {
  position: absolute; left: 50%; top: 24%; width: 104px; height: 104px; margin-left: -52px; display: none; pointer-events: none;
  filter: drop-shadow(0 3px 3px rgba(43, 26, 14, 0.4));
}
.hint-puff svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hint-puff.show { display: block; animation: hint-puff-in 2.4s ease-out forwards; }
.hint-puff .hp-h { transform-box: fill-box; transform-origin: center; animation: hint-heart 0.9s ease-in-out infinite; }
.hint-puff .hp-h2 { animation-delay: 0.3s; }
.hint-puff .hp-h3 { animation-delay: 0.6s; }
@keyframes hint-puff-in { 0% { transform: scale(0.2) translateY(14px); opacity: 0; } 12% { transform: scale(1.12); opacity: 1; } 22% { transform: scale(1); } 80% { opacity: 1; } 100% { transform: scale(1) translateY(-10px); opacity: 0; } }
@keyframes hint-heart { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.25); } }
.game-shell.reduce-motion .ctl.hint, .game-shell.reduce-motion .ctl.hint::after, .game-shell.reduce-motion .hint-puff .hp-h { animation: none; }
.game-shell.reduce-motion .ctl.hint { box-shadow: 0 0 0 6px rgba(255, 250, 190, 0.95), 0 0 20px 8px rgba(255, 244, 150, 0.9); }
@media (prefers-reduced-motion: reduce) {
  .ctl.hint, .ctl.hint::after, .hint-puff .hp-h { animation: none; }
  .ctl.hint { box-shadow: 0 0 0 6px rgba(255, 250, 190, 0.95), 0 0 20px 8px rgba(255, 244, 150, 0.9); }
}