:root {
    --ink: #0d2030;
    --paper: #fff8e7;
    --gull: #ffd166;
    --bad: #ef476f;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  /* Low-fi mode (weak GPUs, e.g. Tesla's in-car browser): backdrop blurs are
     the single most expensive style on a big screen — drop them wholesale. */
  .lofi .panel, .lofi .touch-btn, .lofi .skill-btn, .lofi .ghostBtn,
  .lofi #touchStick, .lofi .screen, .lofi .coming-soon-badge, .lofi .stage-arrow {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  button, .screen, #hud { touch-action: manipulation; }
  html, body {
    /* Pinned to the viewport: iOS home-screen apps otherwise keep a stray
       scroll offset (focus, rubber-band) and show a dark bar underneath. */
    position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; background: #0d2030;
    overscroll-behavior: none; -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;   /* no double-tap-to-zoom on menus/buttons */
  }
  body {
    font-family: ui-rounded, "Avenir Next", "Segoe UI", system-ui, sans-serif;
    color: var(--paper);
    -webkit-font-smoothing: antialiased;
  }
  #game { display: block; position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; }
  .fsBtn[hidden] { display: none !important; }

  /* ---------- HUD ---------- */
  #hud {
    position: fixed; inset: 0; z-index: 2; pointer-events: none;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: calc(18px + env(safe-area-inset-top)) calc(22px + env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) calc(22px + env(safe-area-inset-left));
    text-shadow: 0 2px 0 rgba(0,0,0,.35);
  }
  #hpBar {
    width: 150px; height: 9px; border-radius: 99px; margin-top: 7px;
    background: rgba(13,32,48,.55); border: 2px solid rgba(255,248,231,.3);
    overflow: hidden;
  }
  #hpFill { height: 100%; width: 100%; background: #06d6a0; transition: width .12s, background .3s; }
  #staminaBar {
    width: 150px; height: 7px; border-radius: 99px; margin-top: 4px;
    background: rgba(13,32,48,.55); border: 1px solid rgba(255,248,231,.3);
    overflow: hidden;
  }
  #staminaFill {
    height: 100%; width: 100%; background: linear-gradient(90deg,#4cc9f0,#bdeff8);
    transition: width .06s linear, filter .15s;
  }
  #staminaBar.empty #staminaFill { filter: saturate(.35) brightness(.7); }
  #poopBar {
    width: 150px; height: 7px; border-radius: 99px; margin-top: 4px;
    background: rgba(13,32,48,.55); border: 1px solid rgba(255,248,231,.3);
    overflow: hidden;
  }
  #poopFill {
    height: 100%; width: 0%; background: linear-gradient(90deg,#8a5a3c,#c9976a);
    transition: width .12s;
  }
  .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
  .panel {
    background: rgba(13,32,48,.42);
    border: 2px solid rgba(255,248,231,.22);
    border-radius: 14px;
    padding: 8px 14px;
    backdrop-filter: blur(6px);
  }
  .label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
  .value { font-size: 30px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
  #timeVal.low { color: var(--bad); animation: pulse .6s infinite; }
  @keyframes pulse { 50% { opacity: .45; } }
  #comboWrap { text-align: center; opacity: 0; transition: opacity .2s; margin-top: 26px; /* clears the top-edge minimap */ }
  #comboWrap.on { opacity: 1; }
  #comboVal { font-size: 34px; font-weight: 900; color: var(--gull); }
  #buffs { font-size: 20px; font-weight: 900; color: var(--gull); min-height: 26px; margin-top: 2px; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
  #carryBar {
    width: 190px; height: 12px; border-radius: 99px;
    background: rgba(13,32,48,.5); border: 2px solid rgba(255,248,231,.3);
    overflow: hidden; opacity: 0; transition: opacity .18s;
  }
  #carryBar.on { opacity: 1; }
  #carryFill { height: 100%; width: 0%; background: linear-gradient(90deg,#ffd166,#06d6a0); transition: width .06s linear; }
  #carryHint { font-size: 13px; font-weight: 700; text-align: center; margin-top: 5px; min-height: 18px; }
  /* the gulp bar rides above the center-bottom skill buttons */
  .bottom { align-items: flex-end; margin-bottom: 68px; }

  /* ---------- iPhone / iPad controls ---------- */
  #touchControls {
    position: fixed; z-index: 4;
    left: calc(14px + env(safe-area-inset-left));
    right: calc(14px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    display: none; align-items: flex-end; justify-content: space-between;
    pointer-events: none; touch-action: none;
  }
  /* The whole left half of the screen summons the stick under the finger. */
  #stickZone {
    position: fixed; z-index: 3; left: 0; top: 0; bottom: 0; width: 46vw;
    display: none; pointer-events: none; touch-action: none;
  }
  /* The invisible stick-summon zone belongs to touch screens only — on
     desktop it silently captured clicks and steered the gull off-camera. */
  @media (hover: none), (pointer: coarse) {
    body.game-playing #stickZone { display: block; pointer-events: auto; }
  }
  /* Tilt control mode (debug): whole screen is the dive button, stick hidden. */
  #tiltZone {
    position: fixed; z-index: 3; inset: 0;
    display: none; pointer-events: none; touch-action: none;
  }
  body.game-playing.tilt-mode #tiltZone { display: block; pointer-events: auto; }
  body.tilt-mode #stickZone, body.tilt-mode #touchStick { display: none !important; }
  #touchStick {
    position: relative; width: 170px; height: 170px; border-radius: 50%;
    pointer-events: auto; touch-action: none;
    background: rgba(13,32,48,.34); border: 2px solid rgba(255,248,231,.28);
    box-shadow: inset 0 0 24px rgba(13,32,48,.25), 0 4px 16px rgba(13,32,48,.18);
    backdrop-filter: blur(4px);
  }
  #touchStick::before, #touchStick::after {
    content: ''; position: absolute; left: 50%; top: 50%; opacity: .18; background: var(--paper);
    transform: translate(-50%,-50%); pointer-events: none;
  }
  #touchStick::before { width: 72%; height: 2px; }
  #touchStick::after { width: 2px; height: 72%; }
  #touchKnob {
    position: absolute; left: 50%; top: 50%; width: 74px; height: 74px;
    border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none;
    background: rgba(255,248,231,.82); border: 3px solid rgba(13,32,48,.2);
    box-shadow: 0 4px 12px rgba(13,32,48,.28);
  }
  #touchActions {
    /* Anchored to the viewport's right edge so the buttons never move,
       no matter where the floating joystick currently lives. */
    position: fixed;
    right: calc(14px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    display: grid; grid-auto-flow: row; gap: 10px;
    pointer-events: none; align-items: end;
  }
  .touch-btn {
    width: 68px; height: 58px; min-width: 0; padding: 0;
    pointer-events: auto; touch-action: none; border-radius: 19px;
    color: var(--paper); background: rgba(13,32,48,.62);
    border: 2px solid rgba(255,248,231,.38); box-shadow: 0 4px 0 rgba(13,32,48,.42);
    font-size: 11px; line-height: 1.05; letter-spacing: .06em;
    text-shadow: 0 1px 0 rgba(0,0,0,.35); backdrop-filter: blur(5px);
  }
  .touch-btn.boost { width: 146px; color: #bdeff8; border-color: rgba(76,201,240,.7); }
  .touch-btn.active, .touch-btn:active {
    transform: translateY(3px) scale(.96); box-shadow: 0 1px 0 rgba(13,32,48,.42);
    background: rgba(255,248,231,.24);
  }
  /* ---------- skill bar (WoW-style action buttons) ---------- */
  #skillBar {
    position: fixed; z-index: 4; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom));
    transform: translateX(-50%); display: none; gap: 12px; pointer-events: none;
  }
  body.game-playing #skillBar { display: flex; }
  .skill-btn {
    position: relative; width: 64px; height: 64px; min-width: 0; padding: 0;
    pointer-events: auto; touch-action: none; overflow: hidden;
    border-radius: 14px; border: 2px solid rgba(255,248,231,.45);
    background: linear-gradient(180deg, rgba(31,54,74,.8), rgba(13,32,48,.8));
    box-shadow: 0 3px 0 rgba(13,32,48,.5), inset 0 1px 0 rgba(255,248,231,.18);
    color: var(--paper); backdrop-filter: blur(5px);
    transition: transform .09s ease-out;
  }
  .skill-btn .skill-ico {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 30px; line-height: 1; text-shadow: 0 2px 3px rgba(0,0,0,.4);
  }
  .skill-btn .skill-name {
    position: absolute; left: 0; right: 0; bottom: 3px; font-size: 8.5px; font-weight: 900;
    letter-spacing: .08em; text-shadow: 0 1px 0 rgba(0,0,0,.5); pointer-events: none;
  }
  .skill-btn .skill-key {
    position: absolute; top: 2px; right: 4px; font-size: 8px; font-weight: 800;
    opacity: .65; letter-spacing: .05em; pointer-events: none;
  }
  /* the WoW clock-wipe: a dark conic overlay that sweeps away as the CD recovers */
  .skill-btn .skill-cd {
    position: absolute; inset: -2px; pointer-events: none; border-radius: 12px;
    background: conic-gradient(transparent 0turn, rgba(5,10,16,.8) 0turn);
    opacity: 0; transition: opacity .12s;
  }
  .skill-btn.cooling .skill-cd { opacity: 1; }
  .skill-btn .skill-cd-num {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 21px; font-weight: 900; color: #ffd166;
    text-shadow: 0 1px 3px rgba(0,0,0,.75); pointer-events: none;
    opacity: 0;
  }
  .skill-btn.cooling .skill-cd-num { opacity: 1; }
  .skill-btn.cooling .skill-ico { filter: grayscale(.65) brightness(.75); }
  /* empty = usable-but-pointless (no ammo): darker than cooling, no sweep */
  .skill-btn.empty { border-color: rgba(255,248,231,.18); box-shadow: 0 3px 0 rgba(13,32,48,.35); }
  .skill-btn.empty .skill-ico { filter: grayscale(1) brightness(.5); }
  .skill-btn.empty .skill-name { opacity: .45; }
  /* a quick outward pop on press, springing back on release */
  .skill-btn.active, .skill-btn:active { transform: scale(1.12); }
  /* keyboard/gamepad activations pop via a one-shot animation — it fires
     even while the button is cooling or empty */
  @keyframes skillPress {
    0% { transform: scale(1); }
    40% { transform: scale(1.14); }
    100% { transform: scale(1); }
  }
  .skill-btn.pop { animation: skillPress .18s ease-out; }
  /* ready flash — the golden burst when a skill comes off cooldown */
  @keyframes skillReady {
    0% { box-shadow: 0 0 0 0 rgba(255,209,102,.85), 0 3px 0 rgba(13,32,48,.5); }
    100% { box-shadow: 0 0 0 16px rgba(255,209,102,0), 0 3px 0 rgba(13,32,48,.5); }
  }
  .skill-btn.ready-flash { animation: skillReady .45s ease-out; border-color: rgba(255,209,102,.9); }

  #touchPause {
    position: fixed; z-index: 4; display: none;
    right: calc(12px + env(safe-area-inset-right));
    top: calc(68px + env(safe-area-inset-top));
    width: 46px; height: 42px; border-radius: 15px; font-size: 17px;
  }

  /* ---------- Overlays ---------- */
  .screen {
    position: fixed; inset: 0; z-index: 10; display: none;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 18px; text-align: center;
    padding: calc(30px + env(safe-area-inset-top)) calc(30px + env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) calc(30px + env(safe-area-inset-left));
    background: radial-gradient(ellipse at 50% 40%, rgba(13,32,48,.72), rgba(13,32,48,.94));
    backdrop-filter: blur(3px); overflow-y: auto; touch-action: pan-y;
  }
  .screen.on { display: flex; }
  /* Game Over crossfades in over the darkened beach instead of popping */
  @keyframes endFade { from { opacity: 0; } to { opacity: 1; } }
  #endScreen.on { animation: endFade 1.2s ease-out; }
  h1 { font-size: clamp(34px, 7vw, 68px); font-weight: 900; letter-spacing: -.02em; line-height: 1; }
  h1 .sub { display: block; font-size: .34em; letter-spacing: .3em; font-weight: 700; opacity: .65; margin-top: 10px; text-transform: uppercase; }
  .keys { display: grid; grid-template-columns: auto auto; gap: 8px 16px; font-size: 15px; opacity: .9; }
  .keys b { background: rgba(255,248,231,.14); border: 1px solid rgba(255,248,231,.3); border-radius: 7px; padding: 2px 9px; font-family: ui-monospace, monospace; }
  .keys span { text-align: left; }
  .tips { max-width: 520px; font-size: 15px; line-height: 1.6; opacity: .85; }

  /* The title screen uses its own compact layout so added control rows never
     push the title above the viewport or the launch button below it. */
  #startScreen {
    justify-content: center; text-align: center; overflow-x: hidden; overflow-y: auto; isolation: isolate;
    background: rgba(7,20,31,.48);
  }
  .start-layout {
    position: relative; z-index: 2; flex: none; width: min(1180px, 100%); margin: auto;
    display: grid; grid-template-columns: minmax(300px, 760px); justify-content: center;
    align-items: center; gap: clamp(32px, 5vw, 76px);
    pointer-events: none;
  }
  .start-layout.guide-open { grid-template-columns: minmax(300px, .82fr) minmax(540px, 1.28fr); }
  .start-layout > * { min-width: 0; }
  .start-hero { display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center; }
  .start-hero button, .start-hero .daily-board, .start-guide { pointer-events: auto; }
  .start-eyebrow { color: var(--gull); font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
  #startScreen h1 { font-size: clamp(48px, 6.2vw, 82px); line-height: .92; }
  #startScreen h1 .sub { font-size: .27em; margin-top: 16px; }
  .stage-identity { min-height: 128px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
  .stage-identity .label { color: var(--gull); font-weight: 900; opacity: .9; font-size: clamp(17px, 2.2vw, 24px); letter-spacing: .12em; }
  .stage-identity h2 { max-width: 820px; font-size: clamp(28px, 4vw, 48px); line-height: 1; text-wrap: balance; }
  .stage-identity p { max-width: min(92vw, 900px); text-wrap: balance; font-size: 14px; line-height: 1.4; opacity: .78; }
  .stage-identity.stage-changing { animation: stageIdentityIn .36s cubic-bezier(.2,.85,.32,1); }
  @keyframes stageIdentityIn {
    from { opacity: 0; transform: translateY(12px) scale(.985); filter: blur(5px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  }
  .start-objective {
    max-width: 620px; padding: 10px 16px; border-top: 3px solid var(--gull);
    border-radius: 12px; background: rgba(13,32,48,.42); backdrop-filter: blur(7px);
    font-size: 14px; line-height: 1.5; opacity: .88;
  }
  .daily-board {
    width: min(620px, 100%); padding: 8px 14px 10px; border-radius: 12px;
    background: rgba(13,32,48,.42); border-top: 3px solid var(--gull);
    text-align: left; pointer-events: auto;
  }
  .daily-board .label { margin-bottom: 6px; display: flex; justify-content: space-between; gap: 10px; }
  #dailyDate { letter-spacing: .04em; opacity: .7; text-transform: none; }
  .daily-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
  .daily-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; line-height: 1.25;
  }
  .daily-title { min-width: 0; overflow-wrap: anywhere; }
  .daily-row.done { opacity: .55; }
  .daily-row.done .daily-title { text-decoration: line-through; }
  .daily-progress { font-variant-numeric: tabular-nums; color: var(--gull); white-space: nowrap; }
  .screen .daily-stage, .daily-stage {
    padding: 2px 8px; font-size: 10px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; border-radius: 99px; box-shadow: none;
    background: rgba(255,209,102,.16); color: var(--gull);
    border: 1px solid rgba(255,209,102,.4); cursor: pointer; white-space: nowrap;
  }
  .daily-stage.any { cursor: default; opacity: .8; }
  .screen .daily-stage:hover { transform: none; box-shadow: none; border-color: var(--gull); }
  html[data-location="santa-monica"] .daily-stage[data-stage="santa-monica"],
  html[data-location="maui"] .daily-stage[data-stage="maui"],
  html[data-location="san-francisco"] .daily-stage[data-stage="san-francisco"],
  html[data-location="orlando"] .daily-stage[data-stage="orlando"] {
    background: rgba(255,209,102,.3); border-color: var(--gull);
  }
  #dailyReward {
    min-height: 20px; color: var(--gull); font-size: 15px; font-weight: 900;
    letter-spacing: .03em;
  }
  #endScreen .daily-board { width: min(520px, 92vw); }

  /* WoW-style achievement toast — sits above HUD and game-over, never steals clicks. */
  #dailyToast {
    position: fixed; z-index: 20; left: 50%;
    top: max(88px, calc(11vh + env(safe-area-inset-top)));
    width: min(440px, calc(100vw - 28px));
    display: flex; align-items: center; gap: 14px;
    padding: 11px 18px 12px 11px;
    pointer-events: none; visibility: hidden; opacity: 0;
    transform: translate(-50%, -18px) scale(.96);
    color: #f6e7c4;
    background:
      linear-gradient(180deg, #4a3418 0%, #24180c 48%, #140e08 100%);
    border: 2px solid #d4b056;
    box-shadow:
      0 0 0 1px #6a4e1c,
      inset 0 0 0 1px rgba(255, 220, 140, .28),
      inset 0 10px 18px rgba(255, 210, 120, .08),
      0 12px 32px rgba(0, 0, 0, .5);
    text-shadow: 0 1px 0 #1a1208;
  }
  #dailyToast.on { visibility: visible; opacity: 1; transform: translate(-50%, 0) scale(1); }
  #dailyToast.leaving { opacity: 0; transform: translate(-50%, -12px) scale(.98); }
  #dailyToast.on:not(.leaving) { transition: opacity .35s ease-out, transform .45s cubic-bezier(.2,.85,.3,1); }
  #dailyToast.leaving { transition: opacity .32s ease-in, transform .32s ease-in; }
  #dailyToast.set {
    border-color: #f0d070;
    box-shadow:
      0 0 0 1px #8a6a24,
      inset 0 0 0 1px rgba(255, 236, 170, .4),
      0 0 22px rgba(255, 209, 102, .35),
      0 12px 32px rgba(0, 0, 0, .5);
  }
  .daily-toast-shield {
    flex: none; width: 58px; height: 58px; border-radius: 50%;
    display: grid; place-items: center;
    background: radial-gradient(circle at 32% 28%, #fff3b0, #e0b63a 46%, #8a5e14 78%, #4a320c);
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.4),
      inset 0 -3px 0 rgba(80, 50, 10, .35),
      0 0 0 3px #1c1208,
      0 0 0 5px #d4b056;
  }
  .daily-toast-icon { font-size: 28px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
  .daily-toast-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; }
  .daily-toast-eyebrow {
    font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: #f0c44a;
  }
  .daily-toast-title {
    font-size: 18px; font-weight: 900; line-height: 1.15; color: #fff8e7;
    overflow-wrap: anywhere;
  }
  .daily-toast-reward {
    font-size: 13px; font-weight: 800; color: #ffe08a; letter-spacing: .02em;
  }
  /* The start screen's blur is pointless here (the picker paints an opaque
     backdrop over the canvas) and harmful: a backdrop-filter turns the screen
     into the containing block for its position:fixed children, so on iPadOS
     the picker was laid out against a scrolling, rotating box instead of the
     viewport — the stage art scrolled away with "How to play", or came back
     half-painted after a rotation. */
  #startScreen { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .stage-picker {
    position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: hidden;
    background-color: #235d75; transition: background-color .7s cubic-bezier(.2,.75,.25,1);
  }
  /* Stage art is painted on each carousel card (plain background-image, no
     transform / composited layer per stage) so a swipe drags the picture
     along with the page instead of crossfading a fixed backdrop. Only the
     picker's tint still tracks the selected stage. */
  html[data-location="orlando"] .stage-picker { background-color: #35634c; }
  html[data-location="san-francisco"] .stage-picker { background-color: #3a556a; }
  html[data-location="maui"] .stage-picker { background-color: #1f6f7a; }
  .coming-soon-badge {
    position: absolute; z-index: 1; left: 50%; top: clamp(54px, 12vh, 120px);
    transform: translateX(-50%) rotate(-3deg);
    padding: 10px 28px; border-radius: 999px; white-space: nowrap;
    background: rgba(13,32,48,.72); border: 2px solid var(--gull);
    color: var(--gull); font-weight: 900; letter-spacing: .22em;
    font-size: clamp(15px, 2.4vw, 24px);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  html[data-location="coming-soon"] .stage-picker { background-color: #0d2030; }
  html[data-location="coming-soon"] .start-objective { visibility: hidden; }
  html[data-location="coming-soon"] .lbBtn { display: none; }
  #startBtn:disabled { opacity: .38; cursor: default; }
  #startBtn:disabled:hover { transform: none; box-shadow: none; }
  .stage-picker-head {
    position: absolute; z-index: 3; left: 50%; bottom: calc(48px + env(safe-area-inset-bottom));
    transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
    color: var(--gull); pointer-events: none;
  }
  .stage-swipe-hint { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .72; }
  .stage-carousel-shell { position: absolute; z-index: 2; inset: 0; }
  .stage-carousel {
    position: absolute; inset: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 0;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    overscroll-behavior-inline: contain; touch-action: pan-x;
  }
  .stage-carousel::-webkit-scrollbar { display: none; }
  .stage-card {
    position: relative; width: 100%; min-width: 0; height: 100%; padding: 0;
    display: block; scroll-snap-align: center; overflow: hidden;
    color: var(--paper); border: 0; border-radius: 0;
    background: transparent center 48% / cover no-repeat;
    box-shadow: none;
  }
  .stage-card:hover, .stage-card:active { transform: none; box-shadow: none; }
  .stage-card[data-location-id="santa-monica"] { background-image: linear-gradient(rgba(7,25,38,.28), rgba(7,25,38,.28)), url('../resources/stage-bg-santa-monica.png'); }
  .stage-card[data-location-id="orlando"] { background-image: linear-gradient(rgba(7,25,38,.28), rgba(7,25,38,.28)), url('../resources/stage-bg-orlando.png'); }
  .stage-card[data-location-id="san-francisco"] { background-image: linear-gradient(rgba(7,25,38,.28), rgba(7,25,38,.28)), url('../resources/stage-bg-san-francisco.png'); background-position: center 44%; }
  .stage-card[data-location-id="maui"] { background-image: linear-gradient(rgba(7,25,38,.28), rgba(7,25,38,.28)), url('../resources/stage-bg-maui.png'); background-position: center 46%; }
  .stage-card[data-location-id="coming-soon"] { background-image: linear-gradient(rgba(7,25,38,.32), rgba(7,25,38,.32)), url('../resources/stage-bg-world-tour.png'); background-position: center 40%; }
  .stage-arrow {
    position: absolute; z-index: 4; top: 50%; transform: translateY(-50%);
    width: 46px; height: 58px; min-width: 0; padding: 0; border-radius: 17px;
    color: var(--paper); background: rgba(255,248,231,.09); border: 1px solid rgba(255,248,231,.24);
    box-shadow: none; font-size: 34px; line-height: 1; backdrop-filter: blur(7px);
  }
  #stagePrev { left: calc(18px + env(safe-area-inset-left)); }
  #stageNext { right: calc(18px + env(safe-area-inset-right)); }
  .stage-arrow:hover { transform: translateY(-50%); box-shadow: none; background: rgba(255,248,231,.15); }
  .stage-arrow:active { transform: translateY(calc(-50% + 1px)); box-shadow: none; }
  .stage-arrow:disabled { opacity: .22; cursor: default; }
  .stage-dots {
    position: absolute; z-index: 4; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
    transform: translateX(-50%); display: flex; justify-content: center; gap: 7px;
  }
  .app-version {
    position: absolute; z-index: 4; right: calc(14px + env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom));
    font-size: 10px; font-weight: 700; letter-spacing: .08em; color: rgba(255,248,231,.5); pointer-events: none;
    font-variant-numeric: tabular-nums;
  }
  .stage-dot {
    width: 8px; height: 8px; min-width: 0; padding: 0; border-radius: 50%;
    background: rgba(255,248,231,.3); box-shadow: none;
  }
  .stage-dot:hover, .stage-dot:active { transform: none; box-shadow: none; }
  .stage-dot.active { width: 22px; border-radius: 8px; background: var(--gull); }
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .start-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
  #startBtn { min-width: 190px; }
  .start-guide {
    padding: 19px 21px 20px; border: 2px solid rgba(255,248,231,.18);
    border-radius: 20px; background: rgba(13,32,48,.38); backdrop-filter: blur(7px);
    box-shadow: 0 18px 45px rgba(0,0,0,.13);
  }
  .start-guide > .label { margin-bottom: 11px; color: var(--gull); opacity: .9; }
  .start-guide .start-platform-note { margin-bottom: 12px; border-color: rgba(255,209,102,.5); background: rgba(255,209,102,.1); opacity: 1; }
  .start-guide .keys {
    grid-template-columns: 112px minmax(0,1fr); gap: 6px 13px;
    font-size: 13px; align-items: center;
  }
  .start-guide .keys b { text-align: center; white-space: nowrap; padding: 3px 7px; }
  .start-guide .keys span { line-height: 1.25; }
  .start-tips { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 14px; }
  .start-tip {
    padding: 9px 11px; border-radius: 11px; background: rgba(255,248,231,.07);
    border: 1px solid rgba(255,248,231,.1); font-size: 12px; line-height: 1.42; opacity: .82;
  }
  button {
    pointer-events: auto; font: inherit; font-weight: 800; font-size: 19px;
    color: #0d2030; background: var(--gull); border: none;
    padding: 14px 40px; border-radius: 99px; cursor: pointer;
    box-shadow: 0 5px 0 #c9a33f; transition: transform .08s, box-shadow .08s;
  }
  button:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #c9a33f; }
  button:active { transform: translateY(3px); box-shadow: 0 2px 0 #c9a33f; }
  #finalScore { font-size: 76px; font-weight: 900; color: var(--gull); line-height: 1; }
  #breakdown { font-size: 15px; opacity: .85; line-height: 1.8; }
  #best { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
  #rank { font-size: 22px; font-weight: 800; }
  #runReward {
    min-height: 24px; color: var(--gull); font-size: 16px; font-weight: 900;
    letter-spacing: .03em;
  }

  /* ---------- persistent roost upgrades ---------- */
  #upgradeScreen { z-index: 13; gap: 14px; }
  /* ---------- options ---------- */
  #optionsScreen { z-index: 13; gap: 14px; }
  #optionsScreen h1 { font-size: clamp(40px, 6vw, 64px); }
  .optGrid { width: min(760px, 96vw); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
  .optCard {
    min-width: 0; padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 12px; text-align: left;
    border-radius: 18px; background: rgba(255,248,231,.08); border: 2px solid rgba(255,248,231,.16);
    box-shadow: 0 14px 34px rgba(0,0,0,.13);
  }
  .optCard h2 { font-size: 18px; line-height: 1.1; }
  .optCard[hidden] { display: none; }
  .optSeg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .optSegBtn {
    min-width: 0; padding: 12px 10px; border-radius: 14px; font-size: 15px; font-weight: 800; line-height: 1.15;
    background: rgba(255,248,231,.08); color: var(--paper); border: 2px solid rgba(255,248,231,.22); box-shadow: none;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
  }
  .optSegBtn small { font-size: 11px; font-weight: 600; opacity: .7; letter-spacing: 0; }
  .optSegBtn:hover { transform: none; box-shadow: none; border-color: rgba(255,248,231,.5); }
  .optSegBtn[aria-checked="true"] { background: rgba(255,209,102,.18); border-color: var(--gull); color: var(--gull); }
  .optHint { min-height: 18px; font-size: 12px; opacity: .75; }
  .optHint.warn { color: var(--gull); opacity: 1; }
  .optRow { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 15px; font-weight: 700; }
  .optRow input[type=range] { width: 46%; accent-color: var(--gull); }
  .optRow input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--gull); }
  .optRow b { color: var(--gull); font-variant-numeric: tabular-nums; }
  #optionsClose { padding: 11px 38px; font-size: 17px; }
  #upgradeScreen h1 { font-size: clamp(40px, 6vw, 64px); }
  .upgradeWallet {
    display: flex; align-items: center; gap: 7px; padding: 8px 17px;
    border-radius: 99px; color: var(--gull); background: rgba(255,209,102,.12);
    border: 2px solid rgba(255,209,102,.38); font-size: 14px; text-transform: uppercase;
    letter-spacing: .1em;
  }
  .upgradeWallet strong { font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
  .shellBalance {
    min-width: 24px; padding: 2px 7px; border-radius: 99px;
    background: rgba(255,209,102,.2); color: var(--gull); font-variant-numeric: tabular-nums;
  }
  .upgradeGrid {
    width: min(1040px, 96vw); display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px;
  }
  .upgradeCard {
    min-width: 0; padding: 17px 15px 15px; display: flex; flex-direction: column; align-items: center; gap: 8px;
    border-radius: 18px; background: rgba(255,248,231,.08); border: 2px solid rgba(255,248,231,.16);
    box-shadow: 0 14px 34px rgba(0,0,0,.13);
  }
  .upgradeIcon { font-size: 35px; line-height: 1; }
  .upgradeCard h2 { font-size: 20px; line-height: 1.1; }
  .upgradeCard p { min-height: 48px; font-size: 12px; line-height: 1.35; opacity: .72; }
  .upgradePips { display: flex; gap: 4px; flex-wrap: wrap; }
  .upgradePip {
    width: 14px; height: 7px; border-radius: 99px; background: rgba(255,248,231,.14);
    border: 1px solid rgba(255,248,231,.16);
  }
  .upgradePip.on { background: var(--gull); border-color: var(--gull); }
  .upgradeEffect { min-height: 20px; color: #bdeff8; font-size: 13px; font-weight: 800; }
  .upgradeBuy {
    width: 100%; min-width: 0; margin-top: auto; padding: 10px 12px; border-radius: 12px;
    font-size: 14px; box-shadow: 0 4px 0 #c9a33f;
  }
  .upgradeBuy:disabled {
    cursor: default; color: rgba(255,248,231,.55); background: rgba(255,248,231,.1);
    box-shadow: none;
  }
  .upgradeBuy:disabled:hover { transform: none; box-shadow: none; }
  .upgradeTotals { min-height: 20px; font-size: 13px; font-weight: 800; opacity: .82; }
  .upgradeMessage { min-height: 18px; color: var(--gull); font-size: 13px; font-weight: 800; }
  #upgradeClose { padding: 11px 38px; font-size: 17px; }

  @media (max-width: 900px) {
    #startScreen { padding-top: calc(20px + env(safe-area-inset-top)); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
    .start-layout, .start-layout.guide-open { grid-template-columns: minmax(0,1fr); gap: 24px; margin: 0 auto; max-width: 680px; }
    .start-hero { align-items: center; text-align: center; gap: 13px; }
    #startScreen h1 { font-size: clamp(44px, 12vw, 68px); }
    .start-objective { max-width: 560px; }
    .start-objective { border-left: 0; border-top: 3px solid var(--gull); border-radius: 10px; }
    .daily-board { width: min(560px, 100%); }
    #startBtn { align-self: center; }
    .upgradeGrid { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 650px; }
  }
  @media (max-width: 520px) {
    #startScreen {
      padding-left: calc(16px + env(safe-area-inset-left));
      padding-right: calc(16px + env(safe-area-inset-right));
    }
    #startScreen h1 { font-size: clamp(38px, 11vw, 44px); }
    #startScreen h1, .start-objective, .daily-board { width: 100%; max-width: 100%; min-width: 0; white-space: normal; }
    #startScreen h1 { text-wrap: balance; overflow-wrap: normal; }
    .start-objective { overflow-wrap: anywhere; }
    .start-hero, .start-guide { width: 100%; min-width: 0; }
    .start-guide { padding: 14px 12px; overflow: hidden; }
    .start-guide .keys { grid-template-columns: 82px minmax(0,1fr); font-size: 10.5px; gap: 5px 7px; }
    .start-guide .keys span { min-width: 0; overflow-wrap: anywhere; }
    .start-tips { grid-template-columns: 1fr; }
    .start-tip { min-width: 0; font-size: 11px; overflow-wrap: anywhere; }
    .stage-arrow { width: 36px; height: 50px; }
    #stagePrev { left: calc(8px + env(safe-area-inset-left)); }
    #stageNext { right: calc(8px + env(safe-area-inset-right)); }
    .upgradeGrid { grid-template-columns: 1fr; width: min(360px, 94vw); }
    .upgradeCard p { min-height: 0; }
  }
  @media (max-height: 720px) {
    #startScreen { padding-top: calc(16px + env(safe-area-inset-top)); padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
    .start-layout { margin: 0 auto; }
    .start-hero { gap: 11px; }
    #startScreen h1 { font-size: clamp(42px, 5vw, 64px); }
    .start-objective { padding: 8px 12px; font-size: 12px; }
    .daily-board { padding: 6px 10px 8px; }
    .daily-row { font-size: 12px; gap: 6px; }
    .start-guide { padding: 13px 16px; }
    .start-guide .keys { gap: 4px 11px; font-size: 12px; }
    .start-tips { margin-top: 9px; gap: 6px; }
    .start-tip { padding: 6px 8px; font-size: 10.5px; }
    .stage-identity { min-height: 118px; }
    .stage-identity h2 { font-size: clamp(25px, 4vw, 36px); }
  }

  @media (hover: none), (pointer: coarse) {
    body.game-playing #touchControls { display: flex; }
    body.game-playing #touchPause { display: block; }
    /* the same skill buttons dock bottom-right above the boost bar for thumbs */
    #skillBar {
      left: auto; transform: none;
      right: calc(14px + env(safe-area-inset-right));
      bottom: calc(80px + env(safe-area-inset-bottom));
    }
    .skill-btn { width: 68px; height: 64px; }
    .skill-btn .skill-key { display: none; }
    #hud {
      padding: calc(8px + env(safe-area-inset-top)) calc(9px + env(safe-area-inset-right)) calc(154px + env(safe-area-inset-bottom)) calc(9px + env(safe-area-inset-left));
    }
    .panel { padding: 6px 9px; border-radius: 11px; }
    .value { font-size: 25px; }
    #hpBar, #staminaBar, #poopBar { width: 122px; }
    #buffs { max-width: 42vw; font-size: 15px; }
    #carryBar { width: min(190px, 44vw); }
    #carryHint { font-size: 11px; }
    .bottom { margin-bottom: 0; }   /* touch mode: skills sit right, no clash */
  }
  @media (hover: none) and (orientation: portrait), (pointer: coarse) and (orientation: portrait) {
    #touchStick { width: 150px; height: 150px; }
    #touchKnob { width: 64px; height: 64px; }
    .touch-btn { width: 62px; height: 54px; }
    .touch-btn.boost { width: 132px; }
  }
  @media (max-height: 600px) and (hover: none), (max-height: 600px) and (pointer: coarse) {
    .screen { justify-content: flex-start; gap: 10px; }
    h1 { font-size: 34px; }
    .keys { gap: 5px 10px; font-size: 12px; }
    .tips { font-size: 12px; line-height: 1.35; }
    .screen button { font-size: 16px; padding: 10px 30px; }
    .screen .stage-arrow { padding: 0; width: 32px; height: 42px; font-size: 25px; }
    .screen .stage-dot { padding: 0; width: 8px; height: 8px; }
    .screen .stage-dot.active { width: 22px; }
    /* Landscape phone: compact controls so they don't eat half the screen.
       The floating stick still grows from wherever the thumb lands. */
    /* Carry/gulp bar may sit much lower — the action buttons are on the
       right, so the bottom center is free. */
    #hud { padding-bottom: calc(50px + env(safe-area-inset-bottom)); }
    #touchStick { width: 118px; height: 118px; }
    #touchKnob { width: 52px; height: 52px; }
    .touch-btn { width: 56px; height: 46px; font-size: 11px; }
    .touch-btn.boost { width: 119px; }
    #hud .value { font-size: 21px; }
    #hpBar, #staminaBar, #poopBar { width: 110px; }
    /* Options on a landscape phone: the generic .screen button rule above
       would inflate the segmented buttons; keep the cards compact. */
    #optionsScreen { gap: 8px; padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
    #optionsScreen h1 { font-size: 26px; }
    #optionsScreen h1 .sub { margin-top: 4px; }
    #optionsScreen .label { display: none; }
    .optGrid { width: min(760px, 94vw); gap: 8px; }
    .optCard { padding: 10px 12px; gap: 8px; }
    .optCard h2 { font-size: 15px; }
    .screen .optSegBtn { padding: 8px 6px; font-size: 13px; }
    .optSegBtn small { font-size: 10px; }
    .optRow { font-size: 13px; }
    .optHint { font-size: 11px; min-height: 0; }
    .screen #optionsClose { padding: 8px 26px; font-size: 15px; }
    #optionsScreen .metaRow { margin: 0; }
  }

  @media (max-height: 600px) {
    #startScreen {
      padding-top: calc(8px + env(safe-area-inset-top));
      padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }
    #startScreen .start-hero { gap: 7px; }
    #startScreen h1 { font-size: clamp(32px, 5vw, 38px); }
    #startScreen h1 .sub { margin-top: 7px; }
    .start-objective { padding: 6px 10px; font-size: 10.5px; line-height: 1.3; }
    .daily-board { padding: 5px 8px 6px; }
    .daily-row { font-size: 10.5px; gap: 5px; }
    .screen .daily-stage, .daily-stage { font-size: 9px; padding: 1px 6px; }
    #dailyToast { width: min(360px, calc(100vw - 20px)); padding: 8px 12px 8px 8px; gap: 10px; }
    .daily-toast-shield { width: 46px; height: 46px; }
    .daily-toast-icon { font-size: 22px; }
    .daily-toast-title { font-size: 15px; }
    .stage-identity { min-height: 104px; gap: 2px; }
    .stage-identity h2 { font-size: clamp(21px, 4vw, 30px); }
    .stage-identity p { font-size: 10px; }
    .stage-picker-head { bottom: calc(31px + env(safe-area-inset-bottom)); }
    .stage-dots { bottom: calc(12px + env(safe-area-inset-bottom)); }
    #upgradeScreen { justify-content: flex-start; gap: 8px; padding-top: 12px; padding-bottom: 12px; }
    #upgradeScreen h1 { font-size: 34px; }
    .upgradeGrid { grid-template-columns: repeat(4,minmax(150px,1fr)); width: min(960px, 96vw); gap: 8px; }
    .upgradeCard { padding: 10px 9px; gap: 5px; }
    .upgradeIcon { font-size: 27px; }
    .upgradeCard h2 { font-size: 16px; }
    .upgradeCard p { min-height: 35px; font-size: 10px; }
    .upgradeBuy { padding: 7px 8px; font-size: 12px; }
  }

  /* ---------- scoreboard & sign-in ---------- */
  .metaRow {
    display: flex; gap: 10px; align-items: center; justify-content: center;
    flex-wrap: wrap; margin-top: 6px;
  }
  .ghostBtn {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; color: var(--paper);
    background: rgba(13,32,48,.34); border: 2px solid rgba(255,248,231,.3);
    padding: 8px 18px; border-radius: 99px; box-shadow: none;
    cursor: pointer; text-decoration: none;
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  }
  .ghostBtn:hover { transform: none; box-shadow: none; border-color: rgba(255,248,231,.6); background: rgba(13,32,48,.5); }
  .ghostBtn:active { transform: translateY(1px); box-shadow: none; }
  .gLogo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%; background: #fff;
    color: #4285f4; font-weight: 900; font-size: 12px;
  }
  .authAvatar { width: 20px; height: 20px; border-radius: 50%; }
  .authOut { opacity: .55; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

  #lbScreen { z-index: 12; }
  .lbStageNav { display: flex; align-items: center; justify-content: center; gap: 12px; }
  .lbStageNav .stage-arrow { position: static; transform: none; width: 34px; height: 40px; font-size: 26px; border-radius: 12px; }
  .lbStageNav .stage-arrow:hover, .lbStageNav .stage-arrow:active { transform: none; }
  #lbStage { min-width: 190px; font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
  #lbList {
    width: min(430px, 92vw); display: flex; flex-direction: column; gap: 6px;
    max-height: min(56vh, 620px); overflow-y: auto; overscroll-behavior: contain;
    padding: 3px 4px; scrollbar-width: thin;
  }
  .lbRow {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,248,231,.07); border-radius: 12px; padding: 7px 14px;
    font-size: 16px; font-weight: 700; text-align: left;
  }
  .lbRow.me { background: rgba(255,209,102,.18); outline: 2px solid rgba(255,209,102,.55); }
  .lbRank { width: 30px; text-align: center; flex: none; }
  .lbAvatar {
    width: 26px; height: 26px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,248,231,.12);
  }
  .lbName { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lbScore { color: var(--gull); font-weight: 900; }
  .lbLoading { opacity: .7; font-size: 14px; padding: 14px 0; }
  #lbMine { font-size: 14px; opacity: .85; }

  #gsiModal {
    position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 1000;
    display: flex; align-items: center; justify-content: center;
  }
  .gsiCard {
    background: #14283a; border: 1px solid rgba(255,248,231,.18); border-radius: 20px;
    padding: 32px 40px; display: flex; flex-direction: column; align-items: center; gap: 20px;
  }
  .gsiTitle { font-size: 19px; font-weight: 800; }
  .gsiCancel {
    background: none; border: none; color: rgba(255,248,231,.55);
    font-size: 14px; cursor: pointer; box-shadow: none; padding: 4px 10px;
  }
  .gsiCancel:hover, .gsiCancel:active { transform: none; box-shadow: none; }

  /* ---------- landscape prompt (phones) ---------- */
  #rotateOverlay {
    position: fixed; inset: 0; z-index: 100; background: #0d2030;
    display: none; align-items: center; justify-content: center; flex-direction: column;
    gap: 16px; text-align: center; font-size: 17px; line-height: 1.5;
  }
  #rotateOverlay .icon { font-size: 54px; }
  @media (pointer: coarse) and (orientation: portrait) and (max-width: 600px) {
    #rotateOverlay { display: flex; }
  }

  /* Double-tap zoom on any control pinched the visualViewport and cornered
     the canvas; manipulation keeps taps instant and zoom-free everywhere. */

:root { --dbg-safe-b: env(safe-area-inset-bottom, 0px); }
/* ---- debug panel (?debug=1, toggle with `) ---- */
#debugPanel {
  position: fixed; z-index: 50; top: 8px; right: 8px; width: min(1180px, calc(100vw - 16px));
  max-height: calc(100vh - 16px); overflow: auto; overscroll-behavior: contain;
  background: rgba(13,32,48,.92); color: #fff8e7; border: 1px solid rgba(255,248,231,.25);
  border-radius: 10px; padding: 10px 12px; font: 12px/1.35 ui-monospace, Menlo, monospace;
  box-shadow: 0 8px 28px rgba(0,0,0,.4); display: none; touch-action: pan-y;
}
#debugPanel.on { display: block; }
/* Sections sit side by side so nothing scrolls on a laptop; the long
   difficulty list splits itself into two columns. */
#debugPanel .dbg-body { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: flex-start; }
#debugPanel .dbg-body > div { flex: 1 1 260px; min-width: 240px; }
#debugPanel #dbg-difficulty { flex: 2 1 540px; }
#debugPanel #dbg-difficulty .dbg-cols { columns: 2; column-gap: 18px; }
#debugPanel #dbg-difficulty .dbg-cols .dbg-row { break-inside: avoid; }
#debugPanel #dbg-actions { flex-basis: 100%; }
@media (max-width: 700px) { #debugPanel #dbg-difficulty .dbg-cols { columns: 1; } }
#debugPanel h3 { margin: 10px 0 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
#debugPanel h3:first-child { margin-top: 0; }
#debugPanel .dbg-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
#debugPanel .dbg-row { display: grid; grid-template-columns: 1fr 70px 68px; gap: 6px; align-items: center; margin: 3px 0; }
#debugPanel .dbg-row label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#debugPanel input[type=range] { width: 100%; }
#debugPanel input[type=number] { width: 100%; background: rgba(255,248,231,.08); color: inherit; border: 1px solid rgba(255,248,231,.25); border-radius: 4px; padding: 2px 4px; font: inherit; }
#debugPanel .dbg-row.changed label { color: #ffd166; }
#debugPanel button { background: rgba(255,248,231,.1); color: inherit; border: 1px solid rgba(255,248,231,.3); border-radius: 6px; padding: 4px 8px; font: inherit; cursor: pointer; }
#debugPanel button.primary { background: #ffd166; color: #0d2030; border-color: #ffd166; }
#debugPanel .dbg-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
#debugPanel .dbg-note { opacity: .7; font-size: 11px; }
#debugPanel .dbg-toggle { display: flex; align-items: center; gap: 8px; margin: 4px 0; }