:root {
  color-scheme: dark;
  --bg: #070006;
  --panel: #150012;
  --panel-2: #22001d;
  --pink: #ff4db8;
  --fuchsia: #ff00a8;
  --hot: #ff1493;
  --soft: #ff9bd8;
  --text: #fff5fb;
  --muted: #d9a9ca;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  overscroll-behavior: none;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,0,168,.22), transparent 42%),
    linear-gradient(180deg, #0d000b, #050004 70%);
}

button { font: inherit; }
.app-shell { width: min(100%, 980px); margin: 0 auto; padding: 14px 14px 24px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.brand-kicker { display: block; font-size: .7rem; font-weight: 900; letter-spacing: .19em; color: var(--soft); }
h1 { margin: 1px 0 0; font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.sound-btn { min-width: 42px; min-height: 42px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: #fff; background: rgba(78,0,63,.72); font-size: 1.15rem; cursor: pointer; touch-action: manipulation; }
.sound-btn[aria-pressed="true"] { opacity: .62; filter: grayscale(.5); }

.start-btn {
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #ff1493, #c400ff);
  box-shadow: 0 0 18px rgba(255,0,168,.34), inset 0 0 0 1px rgba(255,255,255,.14);
  cursor: pointer;
  transition: transform .14s ease, filter .14s ease;
}
.start-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.start-btn:active { transform: translateY(1px) scale(.98); }
.start-btn:disabled { cursor: wait; opacity: .68; filter: saturate(.55); transform: none; }
.start-btn.big { padding: 12px 28px; font-size: 1.05rem; }
.help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,155,216,.5);
  border-radius: 999px;
  padding: 9px 16px;
  color: #ffe4f5;
  background: linear-gradient(180deg, rgba(72,0,60,.95), rgba(31,0,27,.95));
  box-shadow: inset 0 0 14px rgba(255,0,168,.1);
  font-weight: 900;
  text-decoration: none;
  transition: transform .14s ease, filter .14s ease;
}
.help-btn:hover { filter: brightness(1.16); transform: translateY(-1px); }
.help-btn:active { transform: translateY(1px) scale(.98); }

.dev-panel {
  display: grid;
  grid-template-columns: minmax(190px, 1.5fr) auto 76px repeat(5, auto);
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  padding: 9px;
  border: 1px solid rgba(255,211,90,.48);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(66,35,0,.9), rgba(28,10,0,.94));
  box-shadow: inset 0 0 18px rgba(255,178,31,.08);
}
.dev-intro { display: flex; flex-direction: column; min-width: 0; }
.dev-intro strong { color: #ffe48d; }
.dev-intro span { color: #dcbf91; font-size: .68rem; }
.dev-toggle,.dev-level { display: flex; align-items: center; gap: 6px; color: #fff1c9; font-size: .78rem; font-weight: 850; }
.dev-toggle input { width: 20px; height: 20px; accent-color: #ffb21f; }
.dev-level { flex-direction: column; gap: 1px; }
.dev-level input { width: 68px; min-height: 32px; border: 1px solid rgba(255,255,255,.28); border-radius: 8px; color: #fff; background: #270e00; text-align: center; font-weight: 900; }
.dev-bonus-choice { display: flex; flex-direction: column; gap: 1px; color: #fff1c9; font-size: .78rem; font-weight: 850; }
.dev-bonus-choice select { min-height: 32px; max-width: 122px; border: 1px solid rgba(255,255,255,.28); border-radius: 8px; color: #fff; background: #270e00; font-weight: 800; }
.dev-panel button { min-height: 34px; border: 1px solid rgba(255,255,255,.25); border-radius: 9px; padding: 6px 9px; color: #241000; background: linear-gradient(#ffe17b,#f5a91f); font-size: .73rem; font-weight: 950; cursor: pointer; }
.dev-panel button:active { transform: translateY(1px); }
.dev-panel output { grid-column: 1 / -1; color: #ffdc82; font-size: .7rem; font-weight: 850; text-align: right; }
.dev-panel .dev-speed-status { color: #8feaff; font-variant-numeric: tabular-nums; }

.audio-lab-panel { margin: 8px 0 12px; border: 1px solid rgba(255,166,52,.48); border-radius: 12px; padding: 7px 9px 9px; background: rgba(35,4,30,.92); color: #fff3d4; }
.audio-lab-panel summary { cursor: pointer; font-size: .78rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.audio-lab-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; margin-top: 9px; }
.audio-lab-grid label { display: grid; gap: 3px; color: #ffdca0; font-size: .64rem; font-weight: 850; }
.audio-lab-grid .audio-check { display: flex; align-items: center; gap: 5px; min-height: 34px; }
.audio-lab-grid select,.audio-lab-grid input[type="range"] { width: 100%; min-width: 0; }
.audio-lab-grid select { min-height: 32px; border: 1px solid rgba(255,255,255,.24); border-radius: 7px; color: #fff; background: #310027; }
.audio-lab-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.audio-lab-actions button { min-height: 32px; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; padding: 5px 8px; color: #220016; background: linear-gradient(#ffe17b,#f5a91f); font-size: .65rem; font-weight: 900; cursor: pointer; }
.audio-lab-panel output { display: block; margin-top: 7px; color: #ffdc82; font-size: .68rem; text-align: right; }

@media (max-width: 720px) {
  .audio-lab-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .audio-lab-actions button { flex: 1 1 auto; }
}

@media (max-width: 430px) {
  .sound-btn { min-width: 36px; min-height: 36px; padding: 0; }
}

.hud { display: grid; grid-template-columns: minmax(110px, 1.4fr) repeat(5, minmax(64px, 1fr)); gap: 7px; margin-bottom: 10px; }
.hud-pair { display: contents; }
.hud-card .hud-metric-icon { display: none; }
.hud-metric-icon svg { display: block; width: 14px; height: 14px; }
.hud.bonus-hud .hud-pair {
  display: grid;
  grid-column: span 3;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.hud.bonus-hud .egg-card { display: none; }
.hud.bonus-hud .boost-state canvas { display: none; }
.hud.bonus-hud .boost-card .boost-state strong { font-weight: 900; }
.hud.bonus-hud ~ .boost-notice { display: none; }
.hud-card {
  min-width: 0;
  border: 1px solid rgba(255,77,184,.33);
  background: linear-gradient(180deg, rgba(45,0,36,.92), rgba(20,0,17,.92));
  border-radius: 14px;
  padding: 8px 10px;
  box-shadow: inset 0 0 20px rgba(255,0,168,.06);
}
.hud-card span { display: block; color: #efc7e2; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.hud-card strong { display: block; margin-top: 3px; font-size: clamp(1.05rem, 3vw, 1.45rem); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.15; }
.score-card { border-color: rgba(255,180,65,.55); }
.score-card strong { color: #ffe299; }
.lives-card strong { color: #ffa6d7; }
.distance-card strong { color: #ffd8f0; text-shadow: 0 0 10px rgba(255,0,168,.45); }
.egg-card strong { color: #ffd79c; text-shadow: 0 0 9px rgba(255,184,75,.45); }
.boost-card { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 7px 10px; }
.boost-card > span { flex: 0 0 auto; }
.boost-state { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 8px; min-height: 29px; }
.boost-state canvas { flex: 0 0 96px; width: 96px; height: 28px; }
.boost-card .boost-state strong {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: #fff1b8;
  font-size: .85rem;
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  text-shadow: 0 0 8px rgba(255,146,36,.4);
}

.boost-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 680px);
  min-height: 31px;
  margin: -2px auto 7px;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: transparent;
  font-size: .82rem;
  font-weight: 1000;
  letter-spacing: .045em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .16s ease, transform .16s ease;
}
.boost-notice.show {
  color: #fff;
  opacity: 1;
  transform: translateY(0);
  border-color: rgba(255,255,255,.24);
  background: linear-gradient(90deg, rgba(86,0,70,.94), rgba(31,0,27,.94));
  box-shadow: 0 0 14px rgba(255,0,168,.2);
}
.boost-notice.rainbow { background: linear-gradient(90deg, #b71d75, #6949b9, #167aa0); }
.boost-notice.filippo { color: #321600; background: linear-gradient(90deg, #ffb21f, #ffe16a, #ff962b); }
.boost-notice.spray { color: #002b26; background: linear-gradient(90deg, #40d3ba, #b9fff1, #35b9ac); }
.boost-notice.smart { color: #001d32; background: linear-gradient(90deg, #39a8df, #bdefff, #438be2); }
.boost-notice.annie { color: #3d1700; background: linear-gradient(90deg, #ff8a18, #ffd36b, #ff7a00); }
.boost-notice.baby { color: #3a1600; background: linear-gradient(90deg, #ff8838, #ffd089, #ff6d2d); }
.boost-notice.shower { color: #00253b; background: linear-gradient(90deg, #55bfe8, #c9f4ff, #4fa9df); }
.boost-notice.egg { color: #3b2100; background: linear-gradient(90deg, #d78a1e, #ffe1a1, #c97016); }

.game-wrap {
  position: relative;
  width: min(100%, 680px);
  margin: 0 auto;
  border-radius: 20px;
  padding: 8px;
  background: linear-gradient(135deg, rgba(255,77,184,.75), rgba(129,0,255,.55));
  box-shadow: 0 0 28px rgba(255,0,168,.28);
}

canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  background: #030003;
  border-radius: 14px;
  touch-action: pan-y;
}

.overlay {
  position: absolute;
  inset: 8px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(6,0,5,.58);
  backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: opacity .22s ease;
}
.overlay.show { opacity: 1; pointer-events: auto; }
.overlay-card {
  width: min(88%, 430px);
  padding: 22px 20px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(180deg, rgba(47,0,39,.96), rgba(16,0,14,.96));
  box-shadow: 0 0 42px rgba(255,0,168,.34);
}
.overlay-icon { font-size: 3rem; filter: drop-shadow(0 0 14px #ff00a8); animation: bob 1.7s ease-in-out infinite; }
.overlay-icon img { display: block; width: 78px; height: 78px; object-fit: contain; margin: 0 auto; }
.overlay-icon .overlay-start-logo {
  width: min(100%, 360px);
  max-width: 100%;
  height: auto;
  margin: 0 auto 14px;
  object-fit: contain;
}
.overlay-icon.result-character img { width: 104px; height: 104px; }
.overlay h2 { margin: 4px 0 8px; font-size: clamp(1.7rem, 5vw, 2.6rem); }
#overlayTitle:empty { display: none; }
.overlay .game-subtitle {
  width: fit-content;
  max-width: 100%;
  padding: 5px 12px;
  border: 1px solid rgba(255,77,184,.6);
  border-radius: 8px;
  background: #210019;
  color: #fff5fb;
  font-size: .8rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #070006;
}
.game-subtitle[hidden] { display: none; }
.overlay.instructions .overlay-icon { display: none; }
/* #46: only the PUBLIC start menu covers the viewport, like Instructions.
   This selector also overrides the later layout_theme.css .game-wrap .overlay inset.
   The Developer Lab and pause/win/loss/bonus cards retain their old layout. */
html:not([data-dev-mode="true"]) .game-wrap .overlay.language-entry-card {
  position: fixed;
  inset: 0;
  border-radius: 0;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  grid-template-rows: minmax(0, 1fr);
  z-index: 10;
}
/* Instructions are full-viewport overlays, NOT maze-frame overlays.
   layout_theme.css loads after this stylesheet and defines
   ".game-wrap .overlay { inset: 13px; border-radius: ... }".
   The extra class below makes the full-screen bounds win the cascade,
   including in mobile portrait/landscape, without changing other cards. */
.game-wrap .overlay.instructions {
  grid-template-rows: minmax(0, 1fr);
  position: fixed;
  inset: 0;
  border-radius: 0;
  padding: max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
  z-index: 10;
}
.overlay.instructions h2 {
  margin: 0 auto 12px;
  color: #fff5fb;
  font-style: normal;
  font-weight: 950;
  font-size: clamp(1.4rem, 4.8vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #070006, -1px -1px 0 #070006, 0 3px 12px rgba(255,0,168,.4);
}
.overlay.instructions h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 9px auto 0;
  border-radius: 3px;
  background: var(--pink);
  box-shadow: 0 0 10px rgba(255,0,168,.4);
}
.overlay.instructions #overlaySubtitle { margin: 0 auto 10px; font-size: .8rem; }
.overlay.instructions #overlayText {
  white-space: pre-line;
  line-height: 1.45;
  font-size: .9rem;
  padding: 12px 10px;
  border: 1px solid rgba(255,170,215,.16);
  border-radius: 12px;
  background: rgba(0,0,0,.22);
  color: #ffe7f5;
}
.overlay.instructions .overlay-card {
  padding: 20px 16px;
  max-height: 100%;
  overflow-y: auto;
  border-color: rgba(255,77,184,.65);
  background: radial-gradient(ellipse at 50% 0, rgba(255,0,168,.16), transparent 65%), linear-gradient(160deg, #290020, #10000d);
  box-shadow: 0 15px 45px rgba(0,0,0,.55), inset 0 1px rgba(255,155,216,.18);
}
.overlay.instructions .start-btn { min-height: 44px; }
.overlay p { margin: 0 auto 16px; max-width: 38ch; color: #f5c9e6; line-height: 1.45; }
/* Optional paired IT/EN Game Over share copy from badge_data.json.
   Keep the generated badge/image and the download button accessible on mobile. */
.overlay.badge-game-over .overlay-card {
  box-sizing: border-box;
  max-height: calc(100% - 14px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.overlay.badge-game-over #overlayText {
  width: min(100%, 48ch);
  max-width: 48ch;
  margin: 0 auto 12px;
  font-size: clamp(.74rem, 1.9vw, .94rem);
  line-height: 1.35;
  overflow-wrap: break-word;
}
.game-over-share-headline {
  display: block;
  color: #ff83d4;
  font-weight: 950;
  text-shadow: 0 2px 10px rgba(233, 0, 161, .28);
}
.game-over-share-invite {
  display: block;
  margin-top: 5px;
  color: #ffedf8;
  font-weight: 690;
}
@media (max-width: 560px) {
  .overlay.badge-game-over #overlayText { margin-bottom: 9px; }
}

.game-over-badge { width: min(100%, 340px); margin: -2px auto 15px; }
.game-over-badge[hidden] { display: none; }
.game-over-badge img { display: block; width: 100%; height: auto; border: 1px solid rgba(255,255,255,.28); border-radius: 14px; box-shadow: 0 7px 21px rgba(0,0,0,.35); }
.badge-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin-top: 10px;
  padding: 8px 15px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #d900a2, #790060);
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .035em;
  text-decoration: none;
  touch-action: manipulation;
}
.badge-download:hover { filter: brightness(1.15); transform: translateY(-1px); }
.badge-download:active { transform: translateY(1px); }

.controls-help { margin: 10px auto 0; text-align: center; color: var(--muted); font-size: .88rem; }
.touch-controls {
  display: none;
  grid-template-columns: 148px clamp(118px, 30vw, 154px);
  align-items: center;
  justify-content: center;
  gap: clamp(9px, 3vw, 18px);
  width: min(100%, 300px);
  margin: 12px auto 0;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  user-select: none;
  -webkit-user-select: none;
}
.touch-actions {
  grid-column: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  align-content: center;
  gap: 8px;
}
.egg-action, .pause-action, .poop-action {
  width: 68px;
  height: 68px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 16px;
  color: #fff;
  font-weight: 1000;
  font-size: 1.25rem;
  background: linear-gradient(180deg, #420038, #22001d);
  box-shadow: inset 0 0 18px rgba(255,0,168,.14), 0 4px 14px rgba(0,0,0,.35);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.egg-action {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  padding: 2px;
  border-color: rgba(255,212,123,.5);
  background: linear-gradient(180deg, #6a3b05, #2c1600);
  font-size: 1.25rem;
}
.egg-action small { font-size: .52rem; font-weight: 1000; letter-spacing: .06em; line-height: 1; }
.egg-action:active, .egg-action.pressed { background: linear-gradient(180deg, #ffae35, #9b3b00); transform: translateY(1px); }
.egg-action:disabled { opacity: .38; filter: grayscale(.7); }
.poop-action {
  display: grid; place-items: center; align-content: center; padding: 2px;
  border-color: rgba(186, 155, 128, .62);
  background: linear-gradient(180deg, #69402e, #2c1814);
  font-size: 1.25rem;
}
.poop-action small { font-size: .51rem; font-weight: 1000; line-height: 1; }
.poop-symbol { display:block; flex:0 0 28px; width:28px; height:27px; max-width:28px; max-height:27px; }
.poop-symbol img { display:block; width:100%; height:100%; object-fit:contain; }
.poop-action:active, .poop-action.pressed { background: linear-gradient(180deg, #ac7954, #573128); transform: translateY(1px); }
.poop-action:disabled { opacity: .38; filter: grayscale(.7); }
.touch-actions .pause-action { grid-column: 1 / -1; }
/* Compact inventory: intrinsic images must never grow the HUD row. */
.hud .inventory-card { min-width:0; min-height:0; align-self:stretch; display:flex; flex-direction:column; justify-content:center; gap:5px; }
.hud .inventory-card > span { display:block; line-height:1; }
.hud .inventory-items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:3px; min-width:0; }
.hud .inventory-item { display:flex; align-items:center; justify-content:center; gap:3px; min-width:0; }
.hud .inventory-icon { display:block; flex:0 0 22px; width:22px; height:22px; min-width:0; min-height:0; max-width:22px; max-height:22px; overflow:hidden; }
.hud .inventory-icon img { display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; }
.hud .inventory-item strong { display:block; flex:0 0 auto; margin:0; font-size:1.05rem; line-height:1; white-space:nowrap; text-shadow:none; }
.hud .inventory-eggs strong { color:#ffdda3; }
.hud .inventory-poops strong { color:#e9c7ae; }
.hud .inventory-item.is-empty .inventory-icon { opacity:.34; filter:grayscale(.8); }
.hud .inventory-item.is-empty strong { color:#997886; }
.boost-notice.poop { background: linear-gradient(90deg,#563022,#b77a50,#573327); color: #fff6e8; }
.pause-action {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 2px;
  border-color: rgba(120,190,255,.55);
  background: linear-gradient(180deg, #143867, #071a36);
  font-size: 1.15rem;
}
.pause-action small { font-size: .48rem; font-weight: 1000; letter-spacing: .05em; line-height: 1; }
.pause-action:active, .pause-action.pressed { background: linear-gradient(180deg, #287bd1, #0c386d); transform: translateY(1px); }
.pause-action:disabled { opacity: .38; filter: grayscale(.7); }

.pause-icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 19px;
  color: #fff;
}
.pause-icon::before,
.pause-icon::after {
  content: "";
  position: absolute;
  top: 1px;
  width: 5px;
  height: 17px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 6px rgba(130, 205, 255, .65);
}
.pause-icon::before { left: 2px; }
.pause-icon::after { right: 2px; }
.pause-icon.play::before {
  left: 3px;
  top: 1px;
  width: 0;
  height: 0;
  border-top: 8.5px solid transparent;
  border-bottom: 8.5px solid transparent;
  border-left: 14px solid currentColor;
  border-radius: 1px;
  background: transparent;
  box-shadow: none;
}
.pause-icon.play::after { display: none; }
.joystick {
  --joy-x: 0px;
  --joy-y: 0px;
  position: relative;
  grid-column: 2;
  width: clamp(118px, 30vw, 154px);
  aspect-ratio: 1;
  border: 3px solid #69717d;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #424852, #20242a 55%, #111 100%);
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.035), 0 5px 18px #000;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.joystick::before,
.joystick::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  pointer-events: none;
}
.joystick::before { left: 10%; right: 10%; top: 41%; height: 18%; }
.joystick::after { top: 10%; bottom: 10%; left: 41%; width: 18%; }
.joystick-ring {
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255,255,255,.035);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.joystick-hints {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: #aeb6c0;
  font-size: clamp(9px, 2.5vw, 12px);
  font-weight: 900;
  pointer-events: none;
}
.joystick-hints span { position: absolute; line-height: 1; }
.joystick-hints .joy-up { top: 5%; left: 50%; transform: translateX(-50%); }
.joystick-hints .joy-down { bottom: 5%; left: 50%; transform: translateX(-50%); }
.joystick-hints .joy-left { left: 5%; top: 50%; transform: translateY(-50%); }
.joystick-hints .joy-right { right: 5%; top: 50%; transform: translateY(-50%); }
.joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38%;
  aspect-ratio: 1;
  z-index: 3;
  border: 3px solid #ffb0b0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9a9a 0%, #ef2d2d 28%, #b91313 58%, #650606 100%);
  box-shadow: inset 0 0 8px rgba(255,255,255,.22), 0 4px 12px #000;
  transform: translate(calc(-50% + var(--joy-x)), calc(-50% + var(--joy-y)));
  transition: transform .14s ease-out, filter .12s ease;
  pointer-events: none;
}
.joystick.active {
  border-color: #8b95a3;
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.055), 0 5px 18px #000;
}
.joystick.active .joystick-knob { transition: none; filter: brightness(1.08); }
.joystick.swipe-feedback .joystick-knob { transition: transform .11s ease-out, filter .12s ease; }

.mobile-control-help { display: none; }
.mobile-ui .desktop-control-help { display: none; }
.mobile-ui .mobile-control-help { display: inline; }

@keyframes bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }

@media (pointer: coarse), (max-width: 900px) {
  .touch-controls { display: grid; }
  .dev-panel { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .dev-intro,.dev-panel output { grid-column: 1 / -1; }
  .dev-toggle { grid-column: span 2; }
  .dev-level { grid-column: span 2; flex-direction: row; justify-content: flex-end; }
  .dev-bonus-choice { grid-column: span 2; flex-direction: row; align-items: center; justify-content: flex-end; gap: 6px; }
}

@media (max-width: 560px) {
  .app-shell { padding: 9px 8px 16px; }
  .topbar { align-items: flex-end; }
  .top-actions { gap: 5px; }
  .start-btn, .help-btn { padding: 8px 12px; font-size: .88rem; }
  .dev-panel { gap: 5px; padding: 7px; }
  .dev-panel button { min-height: 38px; padding: 5px 4px; font-size: .64rem; }
  .boost-notice { min-height: 27px; margin-bottom: 5px; padding: 3px 8px; font-size: .67rem; }
  .game-wrap { border-radius: 14px; padding: 5px; }
  .overlay { inset: 5px; }
  .overlay-card { width: min(92%, 390px); padding: 15px 13px; }
  .overlay h2 { font-size: clamp(1.35rem, 7vw, 2rem); }
  .overlay p { margin-bottom: 10px; font-size: .88rem; }
  .game-over-badge { width: min(100%, 250px); margin-bottom: 10px; }
  .controls-help { font-size: .76rem; }
  .touch-controls { grid-template-columns: 116px clamp(100px, min(31vw, 18dvh), 138px); gap: 10px; margin-top: 6px; }
  .touch-actions { gap: 7px; }
  .egg-action, .pause-action, .poop-action { width: 54px; height: 54px; }
  .joystick { width: clamp(100px, min(31vw, 18dvh), 138px); }
}

@media (max-width: 560px), (max-width: 900px) and (pointer: coarse) {
  .hud { grid-template-columns: minmax(76px, 1fr) 40px 40px 56px 76px; gap: 3px; }
  .hud-card { padding: 5px 3px; border-radius: 8px; }
  .hud-card span { font-size: .5rem; letter-spacing: 0; white-space: nowrap; }
  .hud-card strong { font-size: .9rem; white-space: nowrap; overflow-wrap: normal; }
  .hud .inventory-card { padding: 4px 3px; gap: 3px; }
  .hud .inventory-card > span { font-size: .46rem; letter-spacing: 0; }
  .hud .inventory-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
  .hud .inventory-item { justify-content: center; width: 100%; gap: 2px; }
  .hud .inventory-icon { flex-basis: 16px; width: 16px; height: 16px; max-width: 16px; max-height: 16px; }
  .hud .level-card, .hud .lives-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .hud .level-card > span, .hud .lives-card > span { font-size: .44rem; }
  .hud .level-card strong, .hud .lives-card strong { font-size: .9rem; }
  .hud .inventory-item strong { font-size: .86rem; }
  /* Fit a formatted seven-digit score in Firefox as well as Chromium. */
  .score-card strong { font-size: clamp(.92rem, 4.4vw, 1.15rem); letter-spacing: -.035em; }
  .hud-pair {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 4px 3px;
    border: 1px solid rgba(255,77,184,.33);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(45,0,36,.92), rgba(20,0,17,.92));
    min-width: 0;
  }
  .hud-pair .hud-card { display: flex; justify-content: space-between; align-items: center; gap: 2px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  /* Compact normal-game metrics; keep translated labels for screen readers.
     Bonus stages retain their own visible text labels and wider two-column pair. */
  .hud:not(.bonus-hud) .hud-pair .hud-metric-icon { display: block; flex: 0 0 14px; font-size: .75rem; line-height: 1; text-align: center; }
  .hud:not(.bonus-hud) #candiesLabel, .hud:not(.bonus-hud) #distanceLabel {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .hud:not(.bonus-hud) .hud-pair strong { white-space: nowrap; }
  .hud.bonus-hud .hud-pair { grid-column: span 2; }
  .hud-pair strong { margin: 0; font-size: .6rem; }
  .boost-card { gap: 7px; padding: 5px 8px; }
  .boost-card > span { flex: 0 0 auto; }
  .boost-state { flex: 1 1 auto; min-width: 0; min-height: 27px; }
  .boost-card .boost-state strong { font-size: .78rem; }
}
@media (max-width: 350px) {
  /* Firefox has slightly wider numeric glyphs than Chromium at 320px:
     keep all 7 score digits and separators visible without clipping. */
  .score-card strong { font-size: clamp(.78rem, 4.1vw, .95rem); }
  .boost-card { flex-wrap: wrap; }
  .boost-card .boost-state { flex-basis: 100%; }
  .touch-controls { grid-template-columns: 102px 108px; gap: 7px; }
  .egg-action, .pause-action, .poop-action { width: 50px; height: 50px; }
  .joystick { width: 108px; }
}

/* Portrait phones: keep left-hand actions and right-hand movement clearly apart. */
@media (orientation: portrait) and (max-width: 760px) {
  .touch-controls {
    width: 100%;
    max-width: none;
    justify-content: space-between;
    column-gap: clamp(24px, 12vw, 72px);
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  .touch-actions { justify-self: start; }
  .joystick { justify-self: end; }
}


/* beta8-header-logo */
.brand {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  width: min(45vw, 230px);
  height: clamp(40px, 5.2vw, 50px);
  min-width: 0;
}
.brand-logo { display: block; width: 100%; height: 100%; }
.brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}
.footer-version {
  white-space: nowrap;
  color: var(--soft);
  font-size: .78em;
  font-weight: 900;
  letter-spacing: .08em;
}
.footer-version::before { content: " · "; color: var(--muted); letter-spacing: normal; }

@media (min-width: 561px) and (max-width: 760px) {
  .hud { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 350px) {
  .topbar { flex-wrap: wrap; gap: 5px; }
  .brand { width: 100%; height: 38px; }
  .top-actions { margin-left: auto; }
  .overlay.instructions .overlay-card { width: 96%; padding: 10px 8px; }
  .overlay.instructions #overlayText { font-size: .8rem; margin-bottom: 8px; }
  .overlay.instructions #overlaySubtitle { margin-bottom: 6px; }
}

/* Keep bonus instructions and GO reachable in a short landscape viewport,
   including systems with larger/wider default UI fonts. */
@media (max-height: 450px) {
  .overlay.instructions .overlay-card { padding: 10px 14px; }
  .overlay.instructions h2 { font-size: 1.3rem; margin-bottom: 6px; }
  .overlay.instructions h2::after { margin-top: 5px; }
  .overlay.instructions #overlaySubtitle { padding: 3px 8px; margin-bottom: 6px; font-size: .65rem; }
  .overlay.instructions #overlayText { padding: 8px 10px; margin-bottom: 10px; font-size: .8rem; line-height: 1.3; }
  .overlay.instructions .start-btn { min-height: 44px; padding: 8px 24px; font-size: 1rem; }
}

/* Issue #6: compact country flags for pre-game language selection only. */
.language-picker {display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin:10px auto 5px;color:#ffdaec;font-size:.82rem;font-weight:800;max-width:100%;}
.language-picker .language-label {white-space:nowrap;}
.language-picker .lang-flag {display:inline-flex;justify-content:center;align-items:center;
  width:54px;height:43px;padding:4px 6px;border:2px solid rgba(255,255,255,.26);
  border-radius:11px;background:rgba(26,0,24,.88);cursor:pointer;line-height:1;
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease;}
.language-picker .lang-flag svg {display:block;width:38px;height:24px;max-width:100%;
  border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.18);}
.language-picker .lang-flag:hover:not(:disabled) {border-color:#ffa3e1;transform:translateY(-1px);}
.language-picker .lang-flag.selected,.language-picker .lang-flag[aria-pressed="true"] {
  border-color:#ff34c7;background:rgba(120,0,88,.42);
  box-shadow:0 0 0 1px rgba(255,92,209,.55),0 0 16px rgba(255,0,174,.7),inset 0 0 8px rgba(255,0,174,.13);}
.language-picker .lang-flag:focus-visible {outline:3px solid #fff1a5;outline-offset:3px;}
.language-picker .lang-flag:disabled {cursor:default;}
.language-picker[hidden] {display:none!important;}
@media(max-width:460px) {.language-picker {font-size:.72rem;gap:7px;}
  .language-picker .lang-flag {width:50px;height:40px;padding:4px 5px;}}
@media(max-width:355px) {.language-picker {column-gap:6px;row-gap:7px;}
  .language-picker .language-label {flex-basis:100%;}}

/* Issue #6: stable language-entry card and left/right flag-actions layout. */
.overlay-action-row {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; gap:10px; margin-top:9px;
}
.overlay-action-row .language-picker {
  display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-start;
  flex:0 0 auto; gap:8px; margin:0; padding:0;
}
.overlay-action-row .language-label { display:none; }
.overlay-action-row #overlayBtn {
  flex:0 0 auto; min-width:98px; margin-left:auto;
}
.overlay-action-row .language-picker[hidden] + #overlayBtn {
  margin-left:auto; margin-right:auto;
}
/* This class is active ONLY on the very first menu, never on instruction,
   pause, win, loss or bonus overlays. Same card box for EN and IT. */
.overlay.language-entry-card .overlay-card {
  box-sizing:border-box;
  height: min(392px, calc(100% - 14px));
  max-height:calc(100% - 14px);
  display:flex; flex-direction:column; align-items:stretch;
  justify-content:center; overflow-y:auto;
}
@media (max-width:355px) {
  .overlay-action-row {gap:6px;}
  .overlay-action-row .language-picker {gap:6px;}
  .overlay-action-row .lang-flag {width:47px;height:39px;}
  .overlay-action-row #overlayBtn {min-width:90px;}
}

/* Issue #11: Developer-Lab-only Memory balance form and touch-safe Canvas. */
.dev-memory-panel { grid-column: 1 / -1; padding: 6px 9px; border: 1px solid rgba(255,150,211,.5); border-radius: 10px; background: rgba(44,4,39,.8); color: #ffe4f4; }
.dev-memory-panel summary { cursor: pointer; font-size: .8rem; font-weight: 850; }
.dev-memory-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(135px,1fr)); gap: 8px; padding-top: 9px; }
.dev-memory-grid label { display: grid; gap: 4px; font-size: .72rem; font-weight: 700; }
.dev-memory-grid input { width: 100%; min-width: 0; min-height: 32px; padding: 4px 6px; color: #fff; background: #270e22; border: 1px solid rgba(255,255,255,.4); border-radius: 7px; }
html.memory-bonus-active #game { touch-action: none; }

/* Food Slice finger-hit result: same finger drawing as gameplay. */
.overlay.food-slice-finger-result #overlayText { white-space: pre-line; }
.overlay.food-slice-finger-result h2 { font-size: clamp(1.35rem, 5vw, 2rem); }
.overlay-icon.food-slice-finger-icon { animation: none; filter: none; }
.overlay-icon.food-slice-finger-icon .food-slice-result-finger {
  display: block;
  width: clamp(100px, 28vw, 144px);
  height: auto;
  max-height: 144px;
  aspect-ratio: 1;
  margin: 0 auto 4px;
}
@media (max-height: 540px) {
  .overlay-icon.food-slice-finger-icon .food-slice-result-finger { width: 96px; }
}

/* beta.16: Food Slice card artwork and touch-only Canvas swipe handling. */
html.food-slice-bonus-active #game { touch-action:none; user-select:none; -webkit-user-select:none; cursor:crosshair; }
.overlay.instructions[data-instruction-kind="food_slice"] .overlay-icon { display:block; animation:none; filter:none; margin:0 auto 7px; width:min(100%,235px); }
.food-slice-card-art { position:relative; isolation:isolate; width:100%; height:110px; margin:auto; }
.food-slice-card-art::after { content:''; position:absolute; left:10%; right:7%; top:54%; height:6px; border-radius:99px; transform:rotate(-17deg); background:linear-gradient(90deg,transparent,#fc359c 25%,#fff 60%,transparent); box-shadow:0 0 16px #f526a5b8; z-index:-1; }
.food-slice-card-art picture { position:absolute; display:block; height:100%; }
.overlay .food-slice-card-art img { width:100%; height:100%; max-width:none; object-fit:contain; filter:drop-shadow(0 6px 10px #e82f8e55); }
.food-slice-card-art picture:first-child { left:38%; width:62%; z-index:2; transform:rotate(-22deg) translateY(-7px); }
.food-slice-card-art picture:last-child { left:0; width:72%; z-index:1; transform:rotate(8deg); }
@media(max-height:580px) { .overlay.instructions[data-instruction-kind="food_slice"] .food-slice-card-art { height:65px; } }

/* New Neon Arcade C Game Over card; scoped to loss only. No changes to other overlays. */
.game-wrap .overlay.badge-game-over {
  position: fixed; inset: 0; border-radius: 0; z-index: 12;
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; overscroll-behavior: contain;
  padding: max(12px, env(safe-area-inset-top)) max(9px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(9px, env(safe-area-inset-left));
  background: rgba(5, 1, 15, .88);
}
.overlay.badge-game-over .overlay-card {
  flex: 0 0 auto; width: min(96vw, 760px); max-width: none; max-height: none;
  overflow: visible; margin: auto 0; padding: 15px;
}
.overlay.badge-game-over .overlay-icon, .overlay.badge-game-over #overlayText { display: none; }
/* The classic Game Over text stays hidden, but a valid paired share caption
   from badge_data.json is made visible below the localized title. The
   data attribute is set only after successful insertion of both lines. */
.overlay.badge-game-over[data-game-over-share-id] #overlayText {
  display: block;
}

.overlay.badge-game-over #overlayTitle { margin: 0 auto 12px; font-size: clamp(1.2rem, 4vw, 1.8rem); }
.overlay.badge-game-over .game-over-badge { width: min(100%, 690px); margin: 0 auto 14px; }
.overlay.badge-game-over .game-over-badge img { display:block; width:100%; height:auto; }
.overlay.badge-game-over .badge-download[hidden] { display:none; }
.overlay.badge-game-over .badge-download { display:inline-flex; font-size: .95rem; min-height: 44px; margin-top: 12px; }
.overlay.badge-game-over .overlay-action-row { justify-content:center; }
@media (max-width:560px) {
  .overlay.badge-game-over .overlay-card { width:100%; padding: 11px 8px; }
  .overlay.badge-game-over .game-over-badge { width:100%; margin-bottom: 9px; }
}


/* Issue #9: PiccioLoot shares the boost row. The first five HUD columns
   remain unchanged; the inventory button retains its natural width. */
.boost-card .piccioloot-bar{display:flex;justify-content:flex-end;align-items:center;
  flex:0 0 auto;margin:0;min-height:0}
.piccioloot-trigger{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:28px;border:1px solid #9b649e;border-radius:9px;
  background:#29132f;color:#ffe5f6;font:800 .77rem system-ui,sans-serif;
  padding:3px 10px;cursor:pointer;touch-action:manipulation;white-space:nowrap;
}
.piccioloot-trigger strong{display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;padding:2px 5px;border-radius:20px;
  background:#492440;color:#fff;font-variant-numeric:tabular-nums}
.piccioloot-trigger:hover,.piccioloot-trigger:focus-visible{border-color:#ff92d2;outline-offset:3px}
.piccioloot-dialog{
  position:fixed;inset:0;width:min(94vw,760px);max-width:760px;
  max-height:min(82dvh,740px);overflow-y:auto;
  margin:auto;padding:clamp(14px,3vw,23px);border:2px solid #e767ae;
  border-radius:18px;color:#fff0fb;background:linear-gradient(150deg,#281436,#111a30);
  box-shadow:0 20px 90px #000b;overscroll-behavior:contain;
}
.piccioloot-dialog::backdrop{background:rgba(6,4,15,.82)}
.piccioloot-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  border-bottom:1px solid #895279;padding-bottom:10px}
.piccioloot-dialog-head h2{font-size:clamp(1.1rem,3vw,1.55rem);line-height:1.2;margin:0 0 5px}
.piccioloot-dialog-head p{font-size:.85rem;margin:0;color:#eab9da;line-height:1.3}
.piccioloot-heading-group{min-width:0;flex:1 1 auto}
.piccioloot-title-row{display:flex;align-items:center;gap:9px;margin-bottom:5px;min-width:0}
.piccioloot-title-row h2{margin:0;min-width:0;overflow-wrap:anywhere}
.piccioloot-title-icon{display:block;flex:0 0 clamp(32px,4vw,40px);width:clamp(32px,4vw,40px);height:clamp(32px,4vw,40px)}
.piccioloot-title-icon img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 5px rgba(255,77,184,.35))}
.piccioloot-close{flex:0 0 auto;border:1px solid #ff9acb;border-radius:10px;background:#59254c;
  color:#fff;padding:8px 14px;min-height:42px;font:800 .87rem system-ui;cursor:pointer}
.piccioloot-empty{text-align:center;margin:22px auto;color:#d5bbd9;font-size:.95rem}
.piccioloot-tiles{margin:16px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px}
.piccioloot-tile{min-width:0;background:var(--piccioloot-glow,#222b46);border:2px solid var(--piccioloot-border,var(--pink));border-radius:12px;
  padding:9px 7px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.piccioloot-tile picture{width:92px;height:92px;display:grid;place-items:center}
.piccioloot-tile img{width:92px;height:92px;object-fit:contain}
.piccioloot-tile .piccioloot-image-missing::after{content:'✦';color:#f6ca63;font-size:40px}
.piccioloot-tile strong{color:#f6eefb;font-size:.82rem;line-height:1.2;overflow-wrap:anywhere}
.piccioloot-tile.is-rare{border-color:#ffd35a;
  background:var(--piccioloot-rare-bg,
    radial-gradient(ellipse at 50% 28%,rgba(255,222,119,.4),transparent 72%),
    var(--piccioloot-glow,linear-gradient(145deg,#49391e,#292b3d 65%,#222b46)));
  box-shadow:0 0 12px rgba(255,211,90,.65),inset 0 0 25px rgba(255,200,65,.38),inset 0 0 7px rgba(255,239,178,.55)}
.piccioloot-tile.is-rare picture{filter:drop-shadow(0 0 7px rgba(255,211,90,.55))}
.piccioloot-tile.is-rare strong{color:#fff1bd;text-shadow:0 1px 7px rgba(255,196,61,.25)}
@media (max-width:560px), (max-width:900px) and (pointer:coarse){
  /* One row only: no separate PiccioLoot strip below the boosts.
     Long boost descriptions remain readable by horizontal swipe or keyboard. */
  .hud .boost-card{flex-wrap:nowrap;}
  .hud .boost-card .boost-state{flex:1 1 auto;min-width:0;overflow-x:auto;
    overflow-y:hidden;white-space:nowrap;scrollbar-width:none;
    overscroll-behavior-x:contain;touch-action:pan-x}
  .hud .boost-card .boost-state::-webkit-scrollbar{display:none}
  .hud .boost-card .boost-state strong{flex:0 0 auto;white-space:nowrap}
  .hud .boost-card .piccioloot-bar{flex:0 0 auto;min-height:0;margin:0}
  .piccioloot-trigger{font-size:.68rem;min-height:25px;padding:2px 8px}
  .piccioloot-tiles{grid-template-columns:repeat(auto-fill,minmax(95px,1fr));gap:7px}
  .piccioloot-tile picture,.piccioloot-tile img{width:75px;height:75px}
  .piccioloot-dialog{max-height:85dvh;width:96vw;padding:12px;border-radius:13px}
}

/* Narrow phones: keep PiccioLoot at its original button width without
   wrapping the HUD. Scale boost-icon strip proportionally; boost text can
   scroll horizontally when several boosts are active. */
@media (max-width:380px){
  /* Base canvas defaults to aspect-ratio:1/1; override it explicitly.
     Otherwise Firefox grows the 60px boost strip to a 60px-high square. */
  .hud .boost-card .boost-state canvas{
    flex:0 0 60px;width:60px;height:17.5px;aspect-ratio:96 / 28;border-radius:6px;
  }
}
@media (max-width:350px){
  .hud .boost-card .boost-state canvas{
    flex-basis:36px;width:36px;height:10.5px;border-radius:4px;
  }
  .hud .boost-card .boost-state{flex-basis:auto}
}

/* Boost HUD compact mode: every icon owns its own countdown, e.g.
   [rainbow] 5s   [hideout] 6s. Never hide the countdown behind PiccioLoot. */
.boost-card > #activeBoostLabel{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.boost-card .boost-state{min-width:0;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;
  scrollbar-width:none;overscroll-behavior-x:contain}
.boost-card .boost-state::-webkit-scrollbar{display:none}
.boost-card #activeBoost[hidden],.boost-card #boostIcons[hidden]{display:none!important}
.boost-card .boost-icons{display:flex;align-items:center;justify-content:flex-start;
  gap:9px;flex:0 0 auto;min-height:28px}
.boost-card .boost-item{display:inline-flex;align-items:center;flex:0 0 auto;gap:3px;
  white-space:nowrap;min-height:28px}
.boost-card .boost-item-icon{
  display:block;flex:0 0 25px;width:25px;height:25px;aspect-ratio:1;
  object-fit:contain;border-radius:0;background:transparent;touch-action:auto
}
.boost-card .boost-seconds{
  display:inline-block;flex:0 0 auto;color:#ffe6a2;
  font:800 .79rem/1.2 system-ui,sans-serif;letter-spacing:0;
  text-transform:none;font-variant-numeric:tabular-nums
}
.boost-card #activeBoost{flex:0 0 auto}
.boost-card .piccioloot-bar{margin-left:auto}
.piccioloot-trigger .piccioloot-brand-icon,
.piccioloot-trigger .piccioloot-brand-icon img{
  display:block;width:28px;height:28px;flex:0 0 28px;object-fit:contain
}
.piccioloot-trigger .piccioloot-brand-icon img{background:none;border-radius:0}
.piccioloot-trigger{gap:5px;padding:2px 7px}
@media (max-width:560px), (max-width:900px) and (pointer:coarse){
  .boost-card .boost-icons{gap:6px}
  .boost-card .boost-item{gap:2px}
  .boost-card .boost-item-icon{width:23px;height:23px;flex-basis:23px}
  .boost-card .boost-seconds{font-size:.72rem}
  .piccioloot-trigger .piccioloot-brand-icon,
  .piccioloot-trigger .piccioloot-brand-icon img{width:25px;height:25px;flex-basis:25px}
  .piccioloot-trigger{min-height:31px;padding:2px 6px}
}


/* Manual PiccioLoot trial controls belong only to the Developer Lab. */
#devPiccioLootPanel p { font-size: .76rem; line-height: 1.45; }
.dev-piccioloot-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.dev-piccioloot-actions button { flex: 1 1 130px; min-height: 42px; }
/* Developer Lab-only physical maze PiccioLoot trial, touch-friendly. */
.dev-piccioloot-maze-trial {margin-top:12px;padding:10px;border-radius:10px;
  border:1px solid rgba(255,226,117,.58);background:rgba(34,16,38,.86);}
.dev-piccioloot-maze-trial strong{display:block;margin-bottom:4px;
  font-size:.86rem;color:#ffe782;}
.dev-piccioloot-maze-trial p{margin:0 0 9px;font-size:.78rem;line-height:1.45;color:#f3dfef;}
#devPiccioLootMazeStatus{display:block;margin-top:8px;font-size:.79rem;color:#ffe6ac;}
/* Isolated score threshold trial: compact, responsive controls within Lab. */
.dev-piccioloot-score-trial{margin-top:10px;padding:10px;border:1px solid rgba(255,159,205,.55);
  border-radius:10px;background:rgba(28,14,45,.9);}
.dev-piccioloot-score-trial strong{display:block;margin-bottom:5px;font-size:.86rem;color:#ffaedf;}
.dev-piccioloot-score-trial p{margin:0 0 9px;font-size:.78rem;line-height:1.45;color:#f3dfef;}
.dev-piccioloot-score-rows{display:grid;gap:8px;margin-bottom:9px;}
.dev-piccioloot-score-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
  gap:8px;margin:0;padding:9px;border:1px solid rgba(255,198,230,.32);border-radius:9px;
  background:rgba(36,12,31,.56);}
.dev-piccioloot-score-fields .dev-score-remove{grid-column:1/-1;justify-self:end;min-height:36px;
  padding:5px 12px;border:1px solid rgba(255,164,190,.55);border-radius:8px;background:#492139;color:#ffdeed;}
.dev-piccioloot-score-hint{font-size:.73rem;line-height:1.4;color:#d9c3d2;}

.dev-piccioloot-score-fields label{display:grid;gap:4px;min-width:0;font-size:.73rem;font-weight:700;color:#ffe5f7;}
.dev-piccioloot-score-fields input,.dev-piccioloot-score-fields select{width:100%;min-width:0;
  min-height:38px;padding:5px 8px;color:#fff;background:#270e22;border:1px solid rgba(255,255,255,.4);border-radius:7px;}
#devPiccioLootScoreStatus{display:block;margin-top:8px;font-size:.78rem;color:#ffdfec;overflow-wrap:anywhere;}
/* Independent test-only boost combo form. No normal game HUD changes. */
.dev-piccioloot-boost-trial{margin-top:12px;padding:10px;border:1px solid rgba(142,216,255,.58);
  border-radius:10px;background:rgba(13,26,44,.9);}
.dev-piccioloot-boost-trial strong{display:block;margin-bottom:5px;font-size:.86rem;color:#9fdfff;}
.dev-piccioloot-boost-trial p{margin:0 0 9px;font-size:.78rem;line-height:1.45;color:#e1f1ff;}
#devPiccioLootBoostStatus{display:block;margin-top:8px;font-size:.78rem;color:#c4ecff;overflow-wrap:anywhere;}
/* Developer Lab route efficiency trial only. */
.dev-piccioloot-route-trial{margin-top:12px;padding:10px;border:1px solid rgba(183,245,168,.55);
  border-radius:10px;background:rgba(20,37,30,.9);}
.dev-piccioloot-route-trial strong{display:block;margin-bottom:5px;font-size:.86rem;color:#b9ffa9;}
.dev-piccioloot-route-trial p{margin:0 0 9px;font-size:.78rem;line-height:1.48;color:#e4f9e0;}
#devPiccioLootRouteStatus{display:block;margin-top:8px;font-size:.78rem;color:#d7ffd6;overflow-wrap:anywhere;}
/* Lab-only Bonus Stage streak form — same mobile-friendly layout as other trials. */
.dev-piccioloot-streak-trial{margin-top:12px;padding:10px;border:1px solid rgba(231,189,255,.55);
  border-radius:10px;background:rgba(30,18,46,.92);}
.dev-piccioloot-streak-trial strong{display:block;margin-bottom:5px;font-size:.86rem;color:#efc4ff;}
.dev-piccioloot-streak-trial p{margin:0 0 9px;font-size:.78rem;line-height:1.48;color:#f5e7ff;}
#devPiccioLootStreakStatus{display:block;margin-top:8px;font-size:.78rem;color:#f3daff;overflow-wrap:anywhere;}



#devPiccioLootStatus { white-space: normal; overflow-wrap: anywhere; }


/* Read-only official PiccioLoot policy preview; Developer Lab only. */
.dev-piccioloot-policy-preview{padding:10px;margin:9px 0 12px;border-radius:10px;
  border:1px solid rgba(204,204,237,.5);background:rgba(14,18,37,.88);}
.dev-piccioloot-policy-preview strong{display:block;font-size:.86rem;color:#f2e2ff;}
.dev-piccioloot-policy-preview p{font-size:.78rem;line-height:1.45;margin:4px 0 8px;}
#devPiccioLootPolicyStatus{display:block;white-space:pre-wrap;overflow-wrap:anywhere;
  font:inherit;font-size:.78rem;line-height:1.6;color:#ebedf5;margin:0;}

/* Issue #32: standalone PWA landscape uses side rails instead of scrolling the
 * controls below a full-width square. Only presentation changes: the Canvas
 * keeps its 680x680 coordinate system and the existing touch targets/handlers.
 * Lab panels and portrait/desktop keep their existing document flow. */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 1100px) {
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) {
    --landscape-safe-left: env(safe-area-inset-left, 0px);
    --landscape-safe-right: env(safe-area-inset-right, 0px);
    --landscape-left: clamp(112px, 15vw, 136px);
    --landscape-right: clamp(128px, 17vw, 154px);
    --landscape-board: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    --layout-frame-gap: 4px;
    --layout-frame-radius: 14px;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .app-shell {
    display: grid;
    grid-template-columns: var(--landscape-left) minmax(0, 1fr) var(--landscape-right);
    grid-template-rows: minmax(0, 1fr) 12px;
    gap: 4px;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: max(4px, env(safe-area-inset-top)) max(4px, var(--landscape-safe-right))
      max(4px, env(safe-area-inset-bottom)) max(4px, var(--landscape-safe-left));
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .topbar {
    grid-column: 1; grid-row: 1;
    align-self: start;
    flex-direction: column;
    align-items: stretch;
    gap: 4px; margin: 0;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .brand {
    width: 100%; height: 30px;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .brand-logo img { object-position: center; }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .top-actions {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .top-actions .start-btn { grid-column: 1 / -1; }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .top-actions .sound-btn { grid-column: 1; grid-row: 1; }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .top-actions .help-btn { grid-column: 2; grid-row: 1; }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .top-actions > * {
    min-width: 0; min-height: 44px; margin: 0; padding: 5px;
    font-size: .75rem; text-align: center;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud {
    grid-column: 3; grid-row: 1; align-self: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px; margin: 0;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud .hud-card {
    min-height: 0; padding: 3px; border-radius: 7px;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud .hud-card > span { font-size: .48rem; }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud .hud-card strong {
    font-size: .87rem; line-height: 1.1; margin-top: 1px;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud .score-card { grid-column: 1 / -1; }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud .score-card strong { font-size: 1rem; }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud .level-card,
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud .lives-card {
    display: flex; align-items: center; justify-content: center;
    flex-direction: row; gap: 4px;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud .hud-pair {
    grid-column: 1 / -1; display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 3px; gap: 3px;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud .hud-pair .hud-card {
    display: flex; align-items: center; justify-content: space-between;
    border: 0; padding: 0; background: none;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud .inventory-card {
    grid-column: 1 / -1; gap: 0;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud .inventory-card > span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud .inventory-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud .boost-card { gap: 3px; padding: 1px 2px; }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud .boost-state { min-height: 28px; }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud .piccioloot-trigger {
    min-height: 44px; min-width: 56px; padding: 2px;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud:not(.bonus-hud) .hud-pair .hud-metric-icon {
    display: block; flex: 0 0 14px;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud:not(.bonus-hud) #candiesLabel,
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud:not(.bonus-hud) #distanceLabel {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .game-wrap {
    grid-column: 2; grid-row: 1; align-self: center;
    width: min(100%, var(--landscape-board));
    min-width: 0; margin: 0 auto;
  }
  /* Pause/results must not be constrained by the reduced square. In a
   * 260px viewport even an invisible paused card could enlarge the document.
   * Keep its text/action reachable in a bounded full-viewport dialog. */
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .game-wrap .overlay:not(.badge-game-over) {
    position: fixed; inset: 0; border-radius: 0; z-index: 10;
    grid-template-rows: minmax(0, 1fr);
    padding: max(8px, env(safe-area-inset-top)) max(8px, var(--landscape-safe-right))
      max(8px, env(safe-area-inset-bottom)) max(8px, var(--landscape-safe-left));
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .overlay:not(.badge-game-over) .overlay-card {
    max-height: 100%; overflow-y: auto;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .touch-controls { display: contents; }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .touch-actions {
    grid-column: 1; grid-row: 1; align-self: end; justify-self: center;
    width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .touch-actions button {
    width: 100%; height: 48px; min-width: 44px; min-height: 44px;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .joystick {
    grid-column: 3; grid-row: 1; align-self: end; justify-self: center;
    width: 104px;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .boost-notice {
    grid-column: 1; grid-row: 1; align-self: center;
    width: 100%; min-height: 0; max-height: 38px;
    margin: 16px 0 0; padding: 3px; overflow-y: auto;
    font-size: .62rem; line-height: 1.2;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .controls-help {
    grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: .6rem; line-height: 12px;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .controls-help .mobile-control-help { display: none; }
}

/* Compact standalone windows can leave substantially less than 320px high.
 * Keep the existing 44px actions and a 96px joystick while compacting rails. */
@media (orientation: landscape) and (max-height: 300px) and (max-width: 1100px) {
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .brand { height: 20px; }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .topbar { gap: 2px; }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud { gap: 2px; }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud .hud-card { padding: 1px 2px; }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud .hud-card strong { font-size: .8rem; }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud .score-card strong { font-size: .9rem; }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud .score-card > span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud .hud-pair { padding: 1px 2px; }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .hud .boost-card { padding: 0 2px; }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .joystick { width: 96px; }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .touch-actions button { height: 44px; }
  html.mobile-ui.standalone-app:not([data-dev-mode="true"]) .boost-notice {
    grid-column: 2; align-self: start; margin: 4px 0 0; z-index: 2;
  }
}

/* Ordinary mobile browser tabs require portrait. The notice has no dismiss
 * action and remains readable even while browser toolbars change the height. */
html.browser-landscape-blocked,
html.browser-landscape-blocked body { overflow: hidden; overscroll-behavior: none; }
html.browser-landscape-blocked .app-shell { visibility: hidden; pointer-events: none; }
#rotationNotice[hidden] { display: none; }
#rotationNotice {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  box-sizing: border-box; overflow: auto; background: #100d20; color: #fff;
  padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  text-align: center;
}
#rotationNotice > div { max-width: 34rem; margin: auto; }
#rotationNotice h2 { font-size: clamp(1.1rem, 4vw, 1.65rem); line-height: 1.25; margin: 0 0 12px; }
#rotationNotice p { font-size: 1rem; line-height: 1.5; margin: 0; }