:root {
  color-scheme: dark;
  --river: #08756b;
  --river-deep: #064c48;
  --cream: #fff3d7;
  --paper: #f8e6bd;
  --ink: #153c36;
  --coral: #f05b3f;
  --orange: #f28a2e;
  --gold: #f3c64e;
  --pink: #e94d88;
  --blue: #33a9c2;
  --shadow: rgba(2, 23, 21, 0.4);
  --safe-top: max(0px, env(safe-area-inset-top, 0px));
  --safe-right: max(0px, env(safe-area-inset-right, 0px));
  --safe-bottom: max(0px, env(safe-area-inset-bottom, 0px));
  --safe-left: max(0px, env(safe-area-inset-left, 0px));
}

@font-face {
  font-family: "Fiesta Fredoka";
  src: url("./assets/fonts/Fredoka-VariableFont_wdth,wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Fiesta Lilita";
  src: url("./assets/fonts/LilitaOne-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #075f57;
  touch-action: none;
}

body,
button {
  font-family: "Avenir Next Condensed", "Trebuchet MS", sans-serif;
}

button,
a {
  -webkit-user-select: none;
  user-select: none;
}

button {
  color: inherit;
}

[hidden] {
  display: none !important;
}

.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;
}

#game-shell {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 480px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(#6dcbd2 0 44%, #d8b875 44% 100%);
}

#game-shell > .build-number {
  z-index: 70;
  right: calc(9px + var(--safe-right));
  bottom: calc(8px + var(--safe-bottom));
  display: inline-flex;
  min-width: 39px;
  min-height: 27px;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid rgba(255, 242, 188, .78);
  border-radius: 999px;
  background: rgba(5, 81, 73, .9);
  box-shadow: 0 3px 0 rgba(3, 43, 38, .58), 0 7px 18px rgba(2, 34, 30, .2);
  color: #fff4c8;
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  pointer-events: none;
}

/* Every game surface is tied to the visual viewport. This avoids mobile
   browser toolbar and overlay transitions shifting absolute descendants. */
#game-shell > * {
  position: fixed;
}

#game-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  touch-action: none;
}

#game-shell[data-pointer-lock="unlocked"] #game-canvas,
#game-shell[data-pointer-lock="fallback"] #game-canvas {
  cursor: crosshair;
}

#game-shell[data-pointer-lock="locked"] #game-canvas {
  cursor: none;
}

.world-tint,
.sun-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.world-tint {
  background:
    linear-gradient(to bottom, rgba(255, 246, 207, 0.18), transparent 28%),
    radial-gradient(circle at 50% 48%, transparent 42%, rgba(1, 29, 26, 0.24) 120%);
  mix-blend-mode: soft-light;
}

.sun-wash {
  background: radial-gradient(circle at 83% 12%, rgba(255, 241, 164, 0.34), transparent 28%);
}

.top-hud {
  position: absolute;
  z-index: 10;
  top: calc(8px + var(--safe-top));
  left: calc(10px + var(--safe-left));
  right: calc(10px + var(--safe-right));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}

.mini-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--cream);
  text-decoration: none;
  text-shadow: 0 2px 10px rgba(2, 33, 29, 0.5);
  pointer-events: auto;
}

.brand-flower {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 244, 214, 0.86);
  border-radius: 50%;
  color: var(--gold);
  background: rgba(4, 73, 65, 0.78);
  box-shadow: 0 4px 16px var(--shadow);
  font-size: 23px;
}

.mini-brand > span:last-child {
  display: grid;
  grid-template-columns: auto auto;
  line-height: 0.86;
  letter-spacing: -0.03em;
}

.mini-brand b,
.mini-brand strong {
  font-family: "Rockwell Extra Bold", "Cooper Black", Georgia, serif;
  font-size: clamp(12px, 3.8vw, 17px);
}

.mini-brand b {
  color: var(--gold);
  margin-right: 4px;
}

.mini-brand small {
  grid-column: 1 / -1;
  margin-top: 4px;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.top-readouts {
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}

.cash-chip {
  min-width: 91px;
  padding: 7px 10px 6px;
  border: 1px solid rgba(255, 241, 201, 0.72);
  border-radius: 13px;
  background: rgba(6, 67, 60, 0.84);
  box-shadow: 0 6px 18px var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  line-height: 1;
}

.cash-chip span {
  display: block;
  color: #ffd863;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.cash-chip strong {
  display: inline-block;
  margin-top: 3px;
  color: white;
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 16px;
}

.cash-chip small {
  color: rgba(255, 244, 216, 0.75);
  font-size: 8px;
}

.round-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 241, 201, 0.72);
  border-radius: 50%;
  background: rgba(6, 67, 60, 0.82);
  box-shadow: 0 5px 16px var(--shadow);
  color: var(--cream);
  font-size: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.round-button:active {
  transform: scale(0.92);
}

.round-button.needs-unlock {
  color: #173f38;
  background: var(--gold);
  animation: sound-unlock-pulse 1.15s ease-in-out infinite;
}

@keyframes sound-unlock-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(243, 198, 78, 0.62), 0 5px 16px var(--shadow); }
  50% { box-shadow: 0 0 0 8px rgba(243, 198, 78, 0), 0 5px 16px var(--shadow); }
}

.mission-card {
  position: absolute;
  z-index: 8;
  top: calc(67px + var(--safe-top));
  left: calc(11px + var(--safe-left));
  width: min(57vw, 228px);
  padding: 9px 12px 10px;
  border: 1px solid rgba(255, 244, 214, 0.58);
  border-radius: 13px 13px 18px 4px;
  background: linear-gradient(135deg, rgba(6, 73, 65, 0.91), rgba(5, 48, 44, 0.83));
  box-shadow: 0 7px 24px rgba(2, 28, 25, 0.28);
  color: white;
  pointer-events: none;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.mission-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.mission-card::before {
  content: "";
  position: absolute;
  left: 11px;
  top: -4px;
  width: 38px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
  transform: rotate(-2deg);
}

.mission-kicker {
  display: block;
  min-width: 0;
  margin-bottom: 3px;
  overflow: hidden;
  color: #ffcf58;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cleanup-counter {
  display: flex;
  align-items: baseline;
  gap: 3px;
  flex: 0 0 auto;
  min-height: 21px;
  margin: -3px -5px 1px 0;
  padding: 3px 6px 2px;
  border: 1px solid rgba(255, 216, 99, 0.34);
  border-radius: 999px;
  background: rgba(255, 244, 214, 0.1);
  color: white;
  pointer-events: auto;
}

.cleanup-counter b {
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 10px;
  line-height: 1;
}

.mission-card .cleanup-counter small {
  display: inline;
  margin: 0;
  color: #ffcf58;
  font-size: 5.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
}

.cleanup-counter:active {
  transform: scale(0.95);
}

.mission-card strong {
  display: block;
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 13px;
  line-height: 1.04;
}

.mission-card small {
  display: block;
  margin-top: 3px;
  color: rgba(255, 248, 227, 0.78);
  font-size: 8px;
  line-height: 1.2;
}

.mission-track {
  height: 3px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.cleanup-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-3px);
  transition: max-height 180ms ease, margin-top 180ms ease, opacity 140ms ease, transform 180ms ease;
}

.mission-card.expanded .cleanup-breakdown {
  max-height: 36px;
  margin-top: 7px;
  opacity: 1;
  transform: translateY(0);
}

.cleanup-breakdown span {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 4px 3px 3px;
  border: 1px solid rgba(255, 244, 214, 0.12);
  border-radius: 6px;
  background: rgba(2, 31, 28, 0.2);
  text-align: center;
}

.cleanup-breakdown b {
  overflow: hidden;
  color: rgba(255, 248, 227, 0.63);
  font-size: 5px;
  letter-spacing: 0.09em;
  text-overflow: ellipsis;
}

.cleanup-breakdown i {
  color: white;
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 9px;
  font-style: normal;
}

.mission-card.fresh-drop .cleanup-counter {
  animation: fresh-count 520ms ease both;
}

@keyframes fresh-count {
  0% { color: white; background: rgba(255, 244, 214, 0.1); transform: scale(1); }
  20%, 82% { color: #173f38; background: #ffcf58; transform: scale(1.09); }
  100% { color: white; background: rgba(255, 244, 214, 0.1); transform: scale(1); }
}

.mission-track i,
.bag-meter i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--coral));
  transition: width 240ms ease;
}

.bag-chip {
  position: absolute;
  z-index: 8;
  top: calc(67px + var(--safe-top));
  right: calc(11px + var(--safe-right));
  display: grid;
  grid-template-columns: 29px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 7px;
  width: min(34vw, 137px);
  padding: 8px 9px;
  border: 1px solid rgba(255, 245, 218, 0.75);
  border-radius: 13px 13px 5px 18px;
  background: rgba(255, 239, 202, 0.91);
  box-shadow: 0 7px 22px var(--shadow);
  color: var(--ink);
  pointer-events: none;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.bag-symbol {
  grid-row: 1 / 3;
  font-family: Georgia, serif;
  font-size: 34px;
  line-height: 0.8;
  transform: rotate(-5deg);
}

.bag-chip small {
  display: block;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.bag-chip strong {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-top: 1px;
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 17px;
}

.bag-chip strong span,
.bag-chip strong b:last-child {
  font-size: 10px;
  opacity: 0.62;
}

.bag-meter {
  grid-column: 1 / -1;
  height: 3px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(21, 60, 54, 0.15);
}

.location-ribbon {
  position: absolute;
  z-index: 5;
  top: calc(145px + var(--safe-top));
  left: 50%;
  display: flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  padding: 4px 8px;
  border-radius: 999px;
  color: rgba(255, 249, 228, 0.9);
  background: rgba(4, 47, 43, 0.48);
  box-shadow: 0 3px 12px rgba(3, 29, 26, 0.2);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.1em;
  transform: translateX(-50%);
  pointer-events: none;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.location-ribbon i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
}

.aim-layer {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 52%;
  display: grid;
  place-items: center;
  gap: 12px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.aim-label {
  padding: 4px 8px;
  border-radius: 999px;
  color: white;
  background: rgba(3, 44, 40, 0.54);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.11em;
  opacity: 0.72;
  transition: opacity 150ms ease, transform 150ms ease;
}

.aim-label:not(.is-hidden) {
  border: 2px solid rgba(255, 238, 169, 0.9);
  color: #fff8dc;
  background: rgba(173, 59, 28, 0.94);
  box-shadow: 0 7px 0 rgba(102, 42, 25, 0.72), 0 12px 24px rgba(2, 29, 26, 0.32);
  opacity: 1;
  transform: translateY(3px) scale(1.04);
}

.desktop-control-hint {
  display: none;
}

@keyframes tap-ready {
  0% { box-shadow: 0 0 0 0 rgba(255, 139, 47, 0.65); }
  100% { box-shadow: 0 0 0 14px rgba(255, 139, 47, 0); }
}

@keyframes recycle-ready {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 214, 91, 0.15), 0 0 17px rgba(255, 143, 45, 0.62); }
  50% { box-shadow: 0 0 0 10px rgba(255, 214, 91, 0.03), 0 0 28px rgba(255, 143, 45, 0.88); }
}

.context-action {
  position: absolute;
  z-index: 16;
  left: 50%;
  bottom: calc(150px + var(--safe-bottom));
  min-width: 174px;
  padding: 10px 16px 9px;
  border: 2px solid rgba(255, 244, 210, 0.92);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--coral), #d9412e);
  box-shadow: 0 8px 0 #7d2d25, 0 14px 28px var(--shadow);
  color: white;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: auto;
}

.context-action span,
.context-action small {
  display: block;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.context-action strong {
  display: block;
  margin: 2px 0;
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 17px;
}

.context-action:active {
  box-shadow: 0 3px 0 #7d2d25, 0 8px 18px var(--shadow);
  transform: translate(-50%, 5px);
}

.grab-button {
  position: absolute;
  z-index: 14;
  right: calc(24px + var(--safe-right));
  bottom: calc(24px + var(--safe-bottom));
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  width: 82px;
  height: 82px;
  padding: 6px;
  border: 2px solid rgba(255, 246, 219, 0.9);
  border-radius: 50%;
  background: linear-gradient(145deg, #ff9a3c, var(--coral));
  box-shadow: 0 7px 0 #963a2f, 0 12px 27px var(--shadow);
  color: white;
  pointer-events: auto;
  transition: filter 150ms ease, opacity 150ms ease, transform 100ms ease, visibility 150ms ease;
}

.grab-button[data-action="idle"],
.grab-button[data-action="pickup"] {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.78);
}

.move-right .grab-button {
  right: auto;
  left: calc(24px + var(--safe-left));
}

.grab-button[data-action="dump"] {
  left: 50%;
  right: auto;
  bottom: calc(43% + var(--safe-bottom));
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: 1fr;
  justify-items: start;
  gap: 9px;
  width: min(43vw, 166px);
  min-width: 142px;
  height: 78px;
  padding: 9px 14px 9px 11px;
  border-width: 3px;
  border-radius: 24px;
  background: linear-gradient(135deg, #ffd95a 0%, #f49a34 42%, #e65d2f 100%);
  box-shadow: 0 8px 0 #8f3428, 0 16px 34px rgba(50, 21, 14, 0.42), inset 0 1px 0 rgba(255, 249, 209, 0.7);
  text-align: left;
  translate: -50% 0;
}

.move-right .grab-button[data-action="dump"] {
  left: 50%;
  right: auto;
}

.grab-button[data-action="dump"] .grab-pulse {
  inset: -10px;
  border-width: 3px;
  border-radius: 30px;
}

.grab-button[data-action="dump"] .grab-hand {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  font-size: 34px;
  filter: drop-shadow(0 2px 0 rgba(111, 44, 24, 0.48));
}

.grab-button[data-action="dump"] .action-copy {
  grid-column: 2;
  grid-row: 1;
  justify-items: start;
  align-self: center;
}

.grab-button[data-action="dump"] .action-copy small {
  color: #fff6c9;
  font-size: 7.5px;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 rgba(104, 42, 23, 0.58);
}

.grab-button[data-action="dump"] .action-copy strong {
  max-width: 96px;
  color: #fff;
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 13px;
  line-height: 0.92;
  letter-spacing: 0.025em;
  text-shadow: 0 2px 0 rgba(118, 42, 24, 0.58);
}

.grab-button[data-action="shop"] {
  background: linear-gradient(145deg, #24a798, #07645d);
  box-shadow: 0 7px 0 #034d48, 0 12px 27px var(--shadow);
}

.grab-button:disabled {
  filter: saturate(0.3);
  opacity: 0.48;
}

.grab-button:not(:disabled) {
  animation: hand-ready 1.45s ease-in-out infinite;
}

.grab-button:not(:disabled) .grab-pulse {
  position: absolute;
  inset: -8px;
  border: 2px solid rgba(255, 214, 86, 0.75);
  border-radius: 50%;
  animation: pickup-pulse 1.45s ease-out infinite;
}

.grab-button:active {
  box-shadow: 0 2px 0 #963a2f, 0 7px 17px var(--shadow);
  transform: translateY(5px) scale(0.96);
}

.grab-hand {
  font-size: 28px;
  line-height: 1;
}

.action-copy {
  display: grid;
  place-items: center;
  gap: 1px;
}

.action-copy small {
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.07em;
}

.action-copy strong {
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0.04em;
}

@keyframes pickup-pulse {
  from { opacity: 0.75; transform: scale(0.82); }
  to { opacity: 0; transform: scale(1.22); }
}

@keyframes hand-ready {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.control-zone {
  position: absolute;
  z-index: 12;
  top: 34%;
  bottom: 0;
  width: 50%;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.control-zone-left {
  left: 0;
}

.control-zone-right {
  right: 0;
}

.floating-stick {
  position: absolute;
  left: 72px;
  top: calc(100% - 116px);
  width: 118px;
  height: 118px;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.74);
  transition: opacity 110ms ease, transform 110ms ease;
  pointer-events: none;
}

.control-zone[data-control="move"].active .floating-stick {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.joystick-ring {
  position: absolute;
  inset: 2px;
  border: 2px solid rgba(255, 244, 213, 0.46);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,.13) 50%, transparent 50.5%),
    linear-gradient(0deg, transparent 49.5%, rgba(255,255,255,.13) 50%, transparent 50.5%),
    rgba(3, 49, 45, 0.27);
  box-shadow: inset 0 0 24px rgba(2, 32, 29, 0.18), 0 7px 24px rgba(2, 28, 25, 0.18);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  border: 2px solid rgba(255, 250, 231, 0.77);
  border-radius: 50%;
  background: rgba(9, 94, 85, 0.76);
  box-shadow: 0 6px 18px rgba(2, 27, 24, 0.34), inset 0 3px 7px rgba(255,255,255,.16);
  transform: translate(-50%, -50%);
  transition: background 140ms ease;
}

.control-zone.active .joystick-knob {
  background: rgba(240, 91, 63, 0.86);
}

.control-hint {
  position: absolute;
  bottom: calc(31px + var(--safe-bottom));
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  color: rgba(255, 249, 230, 0.78);
  background: rgba(3, 45, 41, 0.5);
  font-weight: 900;
  opacity: 0.82;
  transition: opacity 180ms ease;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.control-zone[data-control="look"] .control-hint {
  bottom: calc(119px + var(--safe-bottom));
}

.control-zone-left .control-hint {
  left: calc(20px + var(--safe-left));
}

.control-zone-right .control-hint {
  right: calc(20px + var(--safe-right));
}

.control-hint b {
  font-size: 16px;
  line-height: 0.8;
}

.control-hint small {
  font-size: 6px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.control-zone.control-used .control-hint {
  opacity: 0.3;
}

.control-zone.control-used.active .control-hint {
  opacity: 0;
}

.swap-shortcut {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: calc(24px + var(--safe-bottom));
  display: grid;
  place-items: center;
  gap: 1px;
  width: 66px;
  padding: 5px 4px;
  border: 1px solid rgba(255, 244, 214, 0.38);
  border-radius: 11px;
  background: rgba(4, 53, 48, 0.5);
  box-shadow: 0 5px 16px rgba(2, 30, 27, 0.16);
  color: rgba(255, 247, 226, 0.82);
  transform: translateX(-50%);
  pointer-events: auto;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.swap-shortcut span {
  font-size: 18px;
  line-height: 1;
}

.swap-shortcut small {
  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.first-shift-tutorial {
  position: absolute;
  z-index: 32;
  left: 50%;
  bottom: calc(132px + var(--safe-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  width: min(82vw, 330px);
  padding: 11px 12px 10px;
  border: 2px solid rgba(255, 245, 206, 0.94);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(7, 96, 87, 0.96), rgba(4, 58, 53, 0.97));
  box-shadow: 0 7px 0 rgba(84, 43, 28, 0.7), 0 16px 34px rgba(1, 27, 24, 0.32);
  color: #fff8dc;
  transform: translateX(-50%);
  pointer-events: none;
}

.first-shift-tutorial[hidden] {
  display: none;
}

.tutorial-copy-block span {
  display: block;
  margin-bottom: 3px;
  color: #f7d75b;
  font-size: 7px;
  font-weight: 950;
  letter-spacing: 0.13em;
}

.tutorial-copy-block h2 {
  margin: 0;
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 15px;
  line-height: 1.02;
}

.tutorial-copy-block p {
  margin: 4px 0 0;
  color: rgba(255, 248, 220, 0.82);
  font-size: 9px;
  line-height: 1.23;
}

.tutorial-footer {
  display: grid;
  align-content: space-between;
  justify-items: end;
  gap: 8px;
}

.tutorial-progress {
  display: flex;
  gap: 4px;
}

.tutorial-progress i {
  width: 6px;
  height: 6px;
  border: 1px solid rgba(255, 248, 220, 0.68);
  border-radius: 50%;
}

.tutorial-progress i.active,
.tutorial-progress i.done {
  border-color: #f7d75b;
  background: #f7d75b;
}

.tutorial-progress i.active {
  box-shadow: 0 0 0 3px rgba(247, 215, 91, 0.18);
}

#tutorial-skip {
  padding: 5px 7px;
  border: 1px solid rgba(255, 248, 220, 0.34);
  border-radius: 999px;
  background: rgba(0, 37, 34, 0.34);
  color: rgba(255, 248, 220, 0.84);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.1em;
  pointer-events: auto;
}

.toast-stack {
  position: absolute;
  z-index: 40;
  left: 50%;
  top: 35%;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: min(82vw, 340px);
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  padding: 7px 11px;
  border: 1px solid rgba(255, 247, 220, 0.73);
  border-radius: 10px;
  background: rgba(5, 58, 53, 0.9);
  box-shadow: 0 7px 24px var(--shadow);
  color: white;
  font-size: 10px;
  font-weight: 800;
  animation: toast-in 2.4s both;
}

@keyframes toast-in {
  0% { opacity: 0; transform: translateY(8px) scale(.96); }
  12%, 82% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-7px); }
}

.pickup-float {
  position: absolute;
  z-index: 17;
  left: 50%;
  top: 56%;
  color: #fff4bf;
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 24px;
  text-shadow: 0 3px 12px rgba(2, 32, 29, 0.7);
  opacity: 0;
  transform: translate(-50%, 0);
  pointer-events: none;
}

.pickup-float.show {
  animation: pickup-float 650ms ease-out;
}

@keyframes pickup-float {
  0% { opacity: 0; transform: translate(-50%, 15px) scale(.78); }
  22% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -34px) scale(1.04); }
}

.ability-unlock {
  position: absolute;
  z-index: 46;
  left: 50%;
  top: 36%;
  display: grid;
  justify-items: center;
  width: min(84vw, 390px);
  padding: 14px 18px 16px;
  overflow: hidden;
  border: 2px solid #fff0bd;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% -30%, rgba(244, 203, 74, 0.48), transparent 48%),
    linear-gradient(145deg, rgba(4, 92, 82, 0.97), rgba(3, 49, 45, 0.98));
  box-shadow: 0 0 0 5px rgba(5, 86, 77, 0.46), 0 22px 70px rgba(0, 25, 23, 0.55);
  color: #fff8df;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 18px) scale(0.78) rotate(-1.5deg);
  pointer-events: none;
}

.ability-unlock::before,
.ability-unlock::after {
  content: "✦";
  position: absolute;
  top: 16px;
  color: #f4ca4b;
  font-size: 22px;
}

.ability-unlock::before { left: 18px; }
.ability-unlock::after { right: 18px; }
.ability-unlock[hidden] { display: none; }

.ability-unlock.show {
  animation: ability-unlock-card 3.35s cubic-bezier(.18,.88,.22,1) both;
}

.ability-unlock > span {
  color: #f4ca4b;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: 0.16em;
}

.ability-unlock h2 {
  margin: 5px 0 2px;
  color: #fff2be;
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: clamp(22px, 7vw, 34px);
  line-height: 0.95;
  text-shadow: 0 4px 0 #94392f, 0 10px 26px rgba(0, 0, 0, 0.28);
}

.ability-unlock p {
  margin: 5px 0 0;
  color: rgba(255, 248, 225, 0.84);
  font-size: 10px;
  font-weight: 800;
}

.ability-bag {
  position: relative;
  width: 72px;
  height: 56px;
  margin-top: 8px;
  border: 4px solid #f4ca4b;
  border-top-width: 2px;
  border-radius: 8px 8px 18px 18px;
  background: linear-gradient(145deg, #fff0bd, #e9c86f);
  box-shadow: inset 0 -7px 0 rgba(182, 78, 55, 0.17), 0 8px 18px rgba(0, 0, 0, 0.2);
  transform: rotate(-3deg);
}

.ability-bag i {
  position: absolute;
  left: 50%;
  top: -11px;
  width: 35px;
  height: 15px;
  border: 4px solid #f4ca4b;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  transform: translateX(-50%);
}

.ability-bag b {
  display: grid;
  place-items: center;
  height: 100%;
  color: #b73f31;
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 22px;
}

@keyframes ability-unlock-card {
  0% { opacity: 0; transform: translate(-50%, 18px) scale(.72) rotate(-2deg); }
  9% { opacity: 1; transform: translate(-50%, -5px) scale(1.05) rotate(.8deg); }
  15%, 82% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(-50%, -18px) scale(.94); }
}

.sheet-scrim {
  position: absolute;
  z-index: 50;
  inset: 0;
  background: rgba(1, 24, 22, 0.58);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.bottom-sheet {
  position: absolute;
  z-index: 55;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(78dvh, 690px);
  padding: 10px calc(14px + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(14px + var(--safe-left));
  overflow: auto;
  border: 2px solid #41645a;
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  background:
    linear-gradient(rgba(255,255,255,.23) 1px, transparent 1px),
    #f7e9c7;
  background-size: 100% 29px;
  box-shadow: 0 -18px 60px rgba(0, 27, 24, 0.42);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(105%);
  transition:
    transform 300ms cubic-bezier(.2,.8,.2,1),
    opacity 180ms ease,
    visibility 0s linear 300ms;
  pointer-events: none;
}

.bottom-sheet.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
  pointer-events: auto;
}

.sheet-handle {
  width: 58px;
  height: 5px;
  margin: 0 auto 11px;
  border-radius: 999px;
  background: rgba(21, 60, 54, 0.25);
}

.sheet-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sheet-header span {
  color: #bd4934;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.sheet-header h2 {
  margin: 2px 0 11px;
  font-family: "Rockwell Extra Bold", "Cooper Black", Georgia, serif;
  font-size: clamp(22px, 7vw, 34px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.sheet-close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(21, 60, 54, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
  color: var(--ink);
  font-size: 26px;
}

.shop-wallet {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 10px;
  padding: 6px 10px;
  border: 1px solid rgba(21, 60, 54, 0.2);
  border-radius: 8px;
  background: #f2cf65;
  box-shadow: 3px 3px 0 rgba(117, 72, 32, 0.18);
}

.shop-wallet span {
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.shop-wallet strong {
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 18px;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.upgrade-card {
  position: relative;
  min-height: 145px;
  padding: 12px 10px 10px;
  overflow: hidden;
  border: 1px solid rgba(21, 60, 54, 0.27);
  border-radius: 7px 16px 8px 13px;
  background: rgba(255, 250, 232, 0.78);
  box-shadow: 3px 4px 0 rgba(86, 73, 45, 0.15);
}

.upgrade-card:nth-child(2) { transform: rotate(.55deg); }
.upgrade-card:nth-child(3) { transform: rotate(-.45deg); }

.upgrade-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.upgrade-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: white;
  background: var(--river);
  font-size: 19px;
}

.upgrade-level {
  color: #bd4934;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.upgrade-card h3 {
  margin: 8px 0 3px;
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 15px;
  line-height: 1;
}

.upgrade-card p {
  min-height: 31px;
  margin: 0 0 8px;
  color: rgba(21, 60, 54, 0.73);
  font-size: 9px;
  line-height: 1.15;
}

.upgrade-buy {
  width: 100%;
  padding: 8px 6px 7px;
  border: 0;
  border-radius: 8px;
  background: var(--coral);
  box-shadow: 0 3px 0 #8c342a;
  color: white;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.07em;
}

.upgrade-buy:disabled {
  background: #a8a598;
  box-shadow: 0 3px 0 #77756d;
  opacity: 0.72;
}

.settings-sheet {
  top: max(6px, var(--safe-top));
  bottom: 0;
  display: flex;
  height: auto;
  max-height: none;
  overflow: hidden;
  flex-direction: column;
}

.settings-sheet .sheet-header,
.settings-sheet .sheet-handle,
.settings-links,
.desktop-help {
  flex: 0 0 auto;
}

.settings-content {
  display: grid;
  min-height: 0;
  overflow: hidden;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.settings-wide {
  grid-column: 1 / -1;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 58px;
  margin: 0;
  padding: 10px 11px;
  border: 1px solid rgba(21, 60, 54, 0.25);
  border-radius: 12px;
  background: rgba(255, 250, 231, 0.72);
  color: var(--ink);
  text-align: left;
}

.setting-row span,
.setting-row b,
.setting-row small {
  display: block;
}

.setting-row b {
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 14px;
}

.setting-row small {
  margin-top: 2px;
  color: rgba(21, 60, 54, 0.66);
  font-size: 9px;
}

.setting-row strong {
  flex: 0 0 auto;
  padding: 6px 8px;
  border-radius: 7px;
  color: white;
  background: var(--river);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.setting-card {
  padding: 9px 10px;
  border: 1px solid rgba(21, 60, 54, 0.25);
  border-radius: 12px;
  background: rgba(255, 250, 231, 0.72);
}

.setting-card-toggle,
.setting-card-heading,
.setting-slider-row {
  display: flex;
  align-items: center;
  width: 100%;
}

.setting-card-toggle {
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.setting-card-toggle span,
.setting-card-toggle b,
.setting-card-toggle small,
.setting-card-heading span,
.setting-card-heading b,
.setting-card-heading small,
.setting-slider-row span,
.setting-slider-row b,
.setting-slider-row small {
  display: block;
}

.setting-card-toggle b,
.setting-card-heading b,
.setting-slider-row b {
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 14px;
}

.setting-card-toggle small,
.setting-card-heading small,
.setting-slider-row small {
  margin-top: 2px;
  color: rgba(21, 60, 54, 0.66);
  font-size: 8px;
}

.setting-card-toggle strong,
.setting-card-heading output,
.setting-slider-row output {
  flex: 0 0 auto;
  min-width: 42px;
  padding: 6px 8px;
  border-radius: 7px;
  color: white;
  background: var(--river);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
}

.setting-slider-row {
  gap: 8px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(21, 60, 54, 0.14);
}

.setting-slider-row > span {
  min-width: 90px;
}

.setting-slider-row input,
.camera-distance-row input {
  width: 100%;
  min-width: 0;
  height: 22px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  touch-action: pan-x;
}

.setting-slider-row input::-webkit-slider-runnable-track,
.camera-distance-row input::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f2c950, #ef7b3d);
}

.setting-slider-row input::-moz-range-track,
.camera-distance-row input::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f2c950, #ef7b3d);
}

.setting-slider-row input::-webkit-slider-thumb,
.camera-distance-row input::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border: 2px solid #fff5d8;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--river);
  box-shadow: 0 2px 0 rgba(75, 50, 28, 0.32);
}

.setting-slider-row input::-moz-range-thumb,
.camera-distance-row input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid #fff5d8;
  border-radius: 50%;
  background: var(--river);
  box-shadow: 0 2px 0 rgba(75, 50, 28, 0.32);
}

.setting-card-heading {
  justify-content: space-between;
  gap: 10px;
}

.camera-mode-picker {
  display: grid;
  margin-top: 7px;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.camera-mode-picker button {
  min-height: 31px;
  padding: 6px;
  border: 1px solid rgba(21, 60, 54, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.34);
  color: var(--river-deep);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.camera-mode-picker button[aria-pressed="true"] {
  border-color: var(--river);
  background: var(--river);
  box-shadow: 0 3px 0 #043f3b;
  color: white;
}

.camera-distance-row {
  display: grid;
  align-items: center;
  margin-top: 5px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 7px;
  color: rgba(21, 60, 54, 0.68);
  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.settings-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.settings-quick-actions .setting-row {
  min-height: 54px;
  gap: 7px;
  padding: 8px;
}

.settings-quick-actions .setting-row b {
  font-size: 12px;
}

.settings-quick-actions .setting-row small {
  font-size: 7px;
}

.settings-links {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 2px;
}

.settings-links a {
  min-width: 88px;
  padding: 8px 12px;
  border: 1px solid rgba(21, 60, 54, 0.22);
  border-radius: 999px;
  color: var(--river-dark);
  background: rgba(255, 250, 231, 0.56);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: center;
  text-decoration: none;
}

.desktop-help {
  margin: 7px 3px 0;
  color: rgba(21, 60, 54, 0.67);
  font-size: 10px;
  line-height: 1.35;
}

@media (max-width: 699px) {
  #settings-sheet {
    top: max(3px, var(--safe-top));
    padding: 6px calc(8px + var(--safe-right)) calc(7px + var(--safe-bottom)) calc(8px + var(--safe-left));
    border-width: 1px;
    border-radius: 18px 18px 0 0;
  }

  #settings-sheet .sheet-handle {
    width: 42px;
    height: 4px;
    margin-bottom: 4px;
  }

  #settings-sheet .sheet-header {
    align-items: center;
  }

  #settings-sheet .sheet-header h2 {
    margin: 1px 0 6px;
    font-size: clamp(21px, 6.2vw, 28px);
  }

  #settings-sheet .sheet-close {
    width: 34px;
    height: 34px;
    font-size: 22px;
  }

  .settings-content {
    gap: 5px;
  }

  .setting-row {
    min-height: 50px;
    padding: 7px 9px;
  }

  .setting-row b,
  .setting-card-toggle b,
  .setting-card-heading b,
  .setting-slider-row b {
    font-size: 12px;
  }

  .setting-card {
    padding: 7px 8px;
  }

  .setting-slider-row {
    margin-top: 5px;
    padding-top: 5px;
  }

  .camera-mode-picker {
    margin-top: 5px;
  }

  .settings-quick-actions {
    gap: 5px;
  }

  .settings-quick-actions .setting-row {
    min-height: 48px;
    padding: 6px 7px;
  }

  .settings-links {
    gap: 4px;
    margin-top: 5px;
  }

  .settings-links a {
    min-width: 0;
    padding: 6px 8px;
    font-size: 6.5px;
  }

  .desktop-help {
    display: none;
  }
}

@media (max-height: 700px) {
  #settings-sheet .sheet-handle {
    display: none;
  }

  #settings-sheet .sheet-header span {
    display: none;
  }

  #settings-sheet .sheet-header h2 {
    margin-bottom: 4px;
    font-size: 20px;
  }

  #settings-sheet .sheet-close {
    width: 31px;
    height: 31px;
    font-size: 20px;
  }

  .settings-content {
    gap: 4px;
  }

  .setting-row {
    min-height: 43px;
    padding-block: 5px;
  }

  .settings-quick-actions .setting-row {
    min-height: 41px;
  }

  .settings-quick-actions .setting-row small,
  #handedness-button small {
    display: none;
  }

  .setting-card {
    padding-block: 5px;
  }

  .setting-card-toggle small,
  .setting-card-heading small,
  .setting-slider-row small {
    display: none;
  }

  .setting-slider-row {
    margin-top: 3px;
    padding-top: 3px;
  }

  .camera-mode-picker {
    margin-top: 3px;
  }

  .camera-mode-picker button {
    min-height: 27px;
    padding-block: 4px;
  }

  .camera-distance-row {
    margin-top: 2px;
  }

  .settings-links {
    margin-top: 3px;
  }
}

.start-screen {
  position: absolute;
  z-index: 100;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 100%;
  overflow: hidden;
  padding: 12px;
  background:
    linear-gradient(to bottom, rgba(4, 45, 42, 0.04) 0 38%, rgba(4, 45, 42, 0.28) 66%, rgba(2, 28, 26, 0.72) 100%);
  color: var(--ink);
  transition: opacity 420ms ease, visibility 420ms ease;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}

.start-screen.overview-dragging {
  cursor: grabbing;
}

.start-screen.dismissed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#game-shell[data-started="false"] > :is(
  .top-hud,
  .mission-card,
  .bag-chip,
  .location-ribbon,
  .aim-layer,
  .grab-button,
  .control-zone,
  .swap-shortcut
) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-map-label {
  position: absolute;
  top: calc(17px + var(--safe-top));
  left: 50%;
  display: grid;
  justify-items: center;
  width: max-content;
  max-width: calc(100% - 28px);
  padding: 8px 13px 7px;
  border: 1px solid rgba(255, 243, 215, 0.72);
  border-radius: 999px;
  color: var(--cream);
  background: rgba(4, 67, 61, 0.76);
  box-shadow: 0 7px 24px rgba(2, 24, 22, 0.34);
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.intro-map-label {
  color: var(--cream);
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
}

.overview-hint {
  position: absolute;
  z-index: 2;
  top: calc(66px + var(--safe-top));
  left: 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 243, 215, 0.52);
  border-radius: 999px;
  color: rgba(255, 249, 225, 0.94);
  background: rgba(5, 65, 59, 0.62);
  box-shadow: 0 6px 18px rgba(2, 24, 22, 0.2);
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 7px;
  letter-spacing: 0.11em;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.overview-hint span {
  color: var(--gold);
  font-size: 12px;
}

.start-screen.overview-dragging .overview-hint {
  background: rgba(8, 91, 81, 0.82);
  transform: translateX(-50%) scale(1.04);
}

.intro-copy {
  cursor: auto;
  touch-action: manipulation;
}

.intro-map-label:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.intro-map-label span {
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 10px;
  letter-spacing: 0.1em;
}

.intro-map-label small {
  margin-top: 2px;
  color: #f8d466;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.intro-sky {
  position: relative;
  min-height: 210px;
  overflow: hidden;
  border-bottom: 5px solid #0b5d54;
  background:
    linear-gradient(170deg, transparent 0 65%, rgba(255,255,255,.17) 65.5% 67%, transparent 67.5%),
    linear-gradient(#7dd7d5 0 52%, #18867d 52% 72%, #0a645d 72% 100%);
}

.intro-sky::before,
.intro-sky::after {
  content: "";
  position: absolute;
  z-index: 3;
  bottom: 0;
  width: 46%;
  height: 43%;
  background: #ccb37c;
  box-shadow: inset 0 9px 0 #ead8ac;
}

.intro-sky::before { left: 0; clip-path: polygon(0 0, 82% 16%, 100% 100%, 0 100%); }
.intro-sky::after { right: 0; clip-path: polygon(18% 16%, 100% 0, 100% 100%, 0 100%); }

.intro-sun {
  position: absolute;
  top: 18px;
  right: 13%;
  width: 61px;
  height: 61px;
  border-radius: 50%;
  background: #ffe782;
  box-shadow: 0 0 0 12px rgba(255, 231, 130, 0.15);
}

.intro-bridge {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 35px;
  width: min(78vw, 390px);
  height: 82px;
  border: 15px solid #e0c999;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  box-shadow: inset 0 0 0 3px #6b6857, 0 -3px 0 #6b6857;
  transform: translateX(-50%);
}

.intro-bridge::before {
  content: "";
  position: absolute;
  left: 3%;
  right: 3%;
  top: -27px;
  height: 18px;
  border: 3px solid #5d5a4b;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}

.intro-boat {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 8px;
  width: 122px;
  padding: 8px 8px 6px;
  border-radius: 5px 5px 40% 40%;
  color: #fff2b9;
  background: #ef5c3d;
  box-shadow: 0 5px 0 #7b392d;
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 11px;
  text-align: center;
  transform: translateX(-50%);
}

.paper-flag {
  position: absolute;
  z-index: 7;
  top: 28px;
  width: 38px;
  height: 34px;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 75% 100%, 50% 78%, 25% 100%, 0 78%);
}

.flag-one { left: 10%; background: var(--pink); transform: rotate(-7deg); }
.flag-two { left: 28%; top: 49px; background: var(--gold); transform: rotate(4deg); }
.flag-three { right: 7%; top: 92px; background: var(--coral); transform: rotate(8deg); }

.intro-copy {
  position: relative;
  z-index: 8;
  width: min(100%, 520px);
  margin: 0 auto calc(3px + var(--safe-bottom));
  padding: 16px 16px 14px;
  border: 2px solid rgba(255, 243, 215, 0.86);
  border-radius: 24px 9px 25px 12px;
  background: rgba(248, 232, 190, 0.93);
  box-shadow: 0 18px 60px rgba(1, 27, 24, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.56);
  text-align: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.intro-drag-handle {
  display: none;
}

.eyebrow {
  color: #bd4934;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.intro-copy h1 {
  margin: 3px 0 8px;
  color: #123f39;
  font-family: "Rockwell Extra Bold", "Cooper Black", Georgia, serif;
  font-size: clamp(42px, 13vw, 62px);
  line-height: 0.7;
  letter-spacing: -0.07em;
  text-shadow: 3px 3px 0 #e3bf56;
}

.intro-copy h1 i {
  color: var(--coral);
  font-size: 0.67em;
  font-style: normal;
  letter-spacing: 0.05em;
  text-shadow: 2px 2px 0 #f6d46d;
}

.intro-copy > p {
  max-width: 430px;
  margin: 9px auto 11px;
  color: rgba(21, 60, 54, 0.77);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.28;
}

.intro-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-width: 420px;
  margin: 0 auto 11px;
}

.intro-controls-desktop {
  display: none;
}

.intro-controls > div {
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: 64px;
  padding: 6px 4px 5px;
  border: 1px solid rgba(21, 60, 54, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.28);
}

.mini-stick {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  margin-bottom: 3px;
  border: 2px solid var(--river);
  border-radius: 50%;
  color: var(--coral);
  background: rgba(8,117,107,.1);
  font-size: 15px;
}

.mini-hand {
  height: 30px;
  margin-bottom: 1px;
  font-size: 23px;
}

.mini-key,
.mini-mouse {
  display: grid;
  place-items: center;
  width: 30px;
  height: 27px;
  margin-bottom: 3px;
  border: 2px solid var(--river);
  border-radius: 7px;
  color: var(--coral);
  background: rgba(8, 117, 107, 0.1);
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: -0.03em;
}

.mini-mouse {
  border-radius: 50%;
  font-size: 18px;
}

.intro-controls b,
.intro-controls small {
  display: block;
}

.intro-controls b {
  font-size: 8px;
  letter-spacing: 0.1em;
}

.intro-controls small {
  color: rgba(21, 60, 54, 0.65);
  font-size: 8px;
}

.start-button {
  width: min(100%, 420px);
  padding: 11px 15px 10px;
  border: 2px solid #fff1c9;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--coral), #d74333);
  box-shadow: 0 6px 0 #8d342c, 0 12px 24px rgba(94, 51, 35, 0.2);
  color: white;
}

.start-button span,
.start-button small {
  display: block;
}

.start-button span {
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 18px;
}

.start-button small {
  margin-top: 2px;
  color: rgba(255, 244, 218, 0.8);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.start-button:active {
  box-shadow: 0 2px 0 #8d342c, 0 7px 16px rgba(94, 51, 35, 0.2);
  transform: translateY(4px);
}

.intro-swap {
  margin-top: 9px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: rgba(21, 60, 54, 0.68);
  font-size: 10px;
}

.intro-swap b {
  color: #b84533;
  text-decoration: underline;
}

@media (max-width: 699px) {
  .top-hud {
    top: calc(6px + var(--safe-top));
    left: calc(8px + var(--safe-left));
    right: calc(8px + var(--safe-right));
    gap: 6px;
  }

  .mini-brand {
    gap: 6px;
    padding: 4px 7px 4px 4px;
    border: 1px solid rgba(255, 244, 214, 0.66);
    border-radius: 999px;
    background: rgba(4, 65, 59, 0.9);
    box-shadow: 0 5px 18px rgba(2, 25, 23, 0.38);
  }

  .brand-flower {
    width: 34px;
    height: 34px;
    font-size: 21px;
  }

  .mini-brand b,
  .mini-brand strong {
    font-size: clamp(13px, 3.8vw, 16px);
    text-shadow: 0 2px 0 rgba(0, 38, 34, 0.56);
  }

  .mini-brand small {
    margin-top: 3px;
    font-size: 7.5px;
    letter-spacing: 0.13em;
  }

  .top-readouts {
    gap: 4px;
  }

  .cash-chip {
    min-width: 88px;
    padding: 6px 9px 7px;
    border-width: 2px;
    border-radius: 11px;
    background: rgba(4, 61, 55, 0.96);
  }

  .cash-chip span {
    font-size: 7.5px;
  }

  .cash-chip strong {
    font-size: 18px;
    text-shadow: 0 2px 0 rgba(0, 32, 29, 0.55);
  }

  .cash-chip small {
    color: #fff2ca;
    font-size: 8.5px;
    opacity: 1;
  }

  .mission-card {
    top: calc(61px + var(--safe-top));
    width: min(58vw, 230px);
    padding: 10px 11px 11px;
    border-width: 2px;
    border-color: rgba(255, 244, 214, 0.82);
    border-radius: 12px 12px 16px 4px;
    background: linear-gradient(135deg, rgba(5, 69, 62, 0.98), rgba(3, 42, 39, 0.97));
    box-shadow: 0 9px 28px rgba(1, 24, 22, 0.42);
  }

  .mission-card::before {
    left: 9px;
    width: 32px;
    height: 6px;
  }

  .mission-kicker {
    margin-bottom: 3px;
    color: #ffd458;
    font-size: 7.7px;
    letter-spacing: 0.12em;
  }

  .cleanup-counter {
    min-height: 24px;
    margin: -2px -3px 0 0;
    padding: 4px 7px 3px;
    border-color: rgba(255, 216, 99, 0.65);
    background: rgba(255, 244, 214, 0.14);
  }

  .cleanup-counter b {
    font-size: 12px;
  }

  .mission-card .cleanup-counter small {
    font-size: 6.2px;
  }

  .mission-card strong {
    font-size: 15px;
    line-height: 1.08;
    text-shadow: 0 2px 0 rgba(0, 24, 22, 0.52);
  }

  .mission-card small {
    margin-top: 4px;
    color: #fff6dc;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.26;
  }

  .mission-track {
    height: 4px;
    margin-top: 8px;
  }

  .bag-chip {
    top: calc(61px + var(--safe-top));
    grid-template-columns: 28px 1fr;
    gap: 2px 6px;
    width: min(35vw, 140px);
    padding: 9px 9px 10px;
    border-width: 2px;
    border-color: #fff7df;
    border-radius: 12px 12px 5px 16px;
    background: rgba(255, 240, 204, 0.98);
    box-shadow: 0 9px 26px rgba(2, 27, 24, 0.4);
  }

  .bag-symbol {
    font-size: 32px;
  }

  .bag-chip small {
    font-size: 7.7px;
    letter-spacing: 0.11em;
  }

  .bag-chip strong {
    font-size: 20px;
  }

  .bag-chip strong span,
  .bag-chip strong b:last-child {
    font-size: 10.5px;
    opacity: 0.74;
  }

  .bag-meter {
    height: 4px;
    margin-top: 5px;
  }

  .location-ribbon {
    top: calc(178px + var(--safe-top));
    padding: 5px 9px;
    border: 1px solid rgba(255, 244, 214, 0.36);
    color: #fff8e4;
    background: rgba(3, 45, 41, 0.82);
    box-shadow: 0 5px 16px rgba(2, 27, 24, 0.34);
    font-size: 8.5px;
    letter-spacing: 0.08em;
  }

  .mission-card.expanded ~ .location-ribbon {
    opacity: 0;
  }

  .round-button {
    width: 38px;
    height: 38px;
    border-width: 2px;
    background: rgba(4, 61, 55, 0.96);
    font-size: 18px;
  }

  .aim-label {
    padding: 6px 10px;
    border: 1px solid rgba(255, 247, 223, 0.48);
    color: #fffaf0;
    background: rgba(3, 43, 39, 0.86);
    box-shadow: 0 4px 14px rgba(2, 27, 24, 0.3);
    font-size: 9px;
    letter-spacing: 0.08em;
    opacity: 0.96;
  }

  .control-hint {
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 244, 214, 0.58);
    color: #fff9e8;
    background: rgba(3, 45, 41, 0.8);
    box-shadow: 0 5px 16px rgba(2, 27, 24, 0.3);
    opacity: 0.96;
  }

  .control-hint b {
    font-size: 19px;
  }

  .control-hint small {
    font-size: 8px;
    letter-spacing: 0.08em;
  }

  .control-zone.control-used .control-hint {
    opacity: 0.72;
  }

  .swap-shortcut {
    width: 78px;
    min-height: 53px;
    padding: 7px 6px;
    border-color: rgba(255, 244, 214, 0.72);
    background: rgba(4, 53, 48, 0.82);
    box-shadow: 0 6px 18px rgba(2, 30, 27, 0.34);
    color: #fff8df;
  }

  .swap-shortcut span {
    font-size: 20px;
  }

  .swap-shortcut small,
  .grab-button small {
    font-size: 8px;
  }

  .toast {
    padding: 9px 13px;
    border-width: 2px;
    background: rgba(4, 55, 50, 0.96);
    color: #fffdf5;
    font-size: 11.5px;
    line-height: 1.25;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0, 24, 22, 0.56);
  }

  .cleanup-breakdown b {
    font-size: 6.5px;
  }

  .cleanup-breakdown i {
    font-size: 11px;
  }

  .start-screen {
    padding: 0;
    background:
      linear-gradient(to bottom, rgba(4, 45, 42, 0.01) 0 54%, rgba(4, 45, 42, 0.17) 72%, rgba(2, 28, 26, 0.64) 100%);
  }

  .intro-map-label {
    top: calc(8px + var(--safe-top));
    max-width: calc(100% - 36px);
    padding: 5px 9px;
    border-color: rgba(255, 243, 215, 0.62);
    background: rgba(4, 67, 61, 0.68);
    box-shadow: 0 5px 18px rgba(2, 24, 22, 0.25);
  }

  .intro-map-label span {
    font-size: 7.5px;
  }

  .intro-map-label small {
    font-size: 4.7px;
  }

  .intro-copy {
    width: calc(100% - 20px);
    max-width: none;
    margin: 0 10px calc(6px + var(--safe-bottom));
    padding: 10px 9px 6px;
    border-width: 1px;
    border-radius: 20px 20px 13px 13px;
    background: rgba(249, 233, 192, 0.96);
    box-shadow: 0 -10px 42px rgba(1, 27, 24, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }

  .intro-drag-handle {
    display: block;
    width: 42px;
    height: 4px;
    margin: -4px auto 5px;
    border-radius: 999px;
    background: rgba(21, 60, 54, 0.22);
  }

  .eyebrow {
    font-size: 7px;
    letter-spacing: 0.16em;
  }

  .intro-copy h1 {
    margin: 1px 0 3px;
    font-size: clamp(32px, 9.8vw, 41px);
    line-height: 0.88;
    white-space: nowrap;
  }

  .intro-copy h1 br {
    display: none;
  }

  .intro-copy h1 i {
    margin-right: 0.2em;
    font-size: 0.58em;
    vertical-align: 0.15em;
  }

  .intro-copy > p {
    max-width: 350px;
    margin: 4px auto 6px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.015em;
    line-height: 1.18;
    white-space: nowrap;
  }

  .intro-controls {
    gap: 4px;
    margin-bottom: 6px;
  }

  .intro-controls > div {
    min-height: 42px;
    padding: 4px 3px 3px;
    border-radius: 9px;
  }

  .mini-stick {
    width: 20px;
    height: 20px;
    margin-bottom: 1px;
    font-size: 11px;
  }

  .mini-hand {
    height: 21px;
    margin-bottom: 0;
    font-size: 16px;
  }

  .intro-controls b {
    font-size: 7px;
    letter-spacing: 0.075em;
  }

  .intro-controls small {
    display: none;
  }

  .start-button {
    width: 100%;
    min-height: 49px;
    padding: 7px 13px 6px;
    border-radius: 12px;
  }

  .start-button span {
    font-size: 16px;
  }

  .intro-swap {
    min-height: 30px;
    margin-top: 2px;
    padding: 4px 4px 1px;
    font-size: 9px;
  }

}

@media (max-width: 359px) {
  .mini-brand small { display: none; }
  .mini-brand b,
  .mini-brand strong { font-size: 12px; }
  .brand-flower { width: 31px; height: 31px; }
  .cash-chip { min-width: 79px; padding-inline: 7px; }
  .round-button { width: 35px; height: 35px; }
  .mission-card { width: 58vw; }
  .bag-chip { width: 35vw; }
}

@media (max-width: 699px) and (max-height: 590px) {
  .intro-map-label small,
  .intro-copy > p {
    display: none;
  }

  .intro-copy {
    padding-top: 11px;
  }

  .intro-controls {
    margin-top: 6px;
  }
}

/* v95 family adventure system
   A 1926 movie-palace marquee meets a well-loved Fiesta sticker book. The
   game keeps its detailed River Walk world, while the interface presents one
   large next step and lets children reveal the map only when they want it. */

#game-shell {
  --ui-scale: 1;
  --v95-cream: #fff6dc;
  --v95-limestone: #ead7ad;
  --v95-teal: #075f57;
  --v95-teal-bright: #0d8f80;
  --v95-oxblood: #8e2f34;
  --v95-gold: #f4ca50;
  --v95-pink: #ec568d;
}

html,
body {
  touch-action: pinch-zoom;
}

button,
a,
input {
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 4px solid #fff8b8;
  outline-offset: 3px;
}

.mission-ribbon {
  z-index: 44;
  top: calc(10px + var(--safe-top));
  left: calc(10px + var(--safe-left));
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  width: min(590px, calc(100% - 202px - var(--safe-left) - var(--safe-right)));
  min-height: 64px;
  gap: 10px;
  align-items: center;
  padding: 8px 9px 8px 10px;
  border: 2px solid rgba(255, 242, 189, .92);
  border-radius: 20px 9px 20px 9px;
  color: var(--v95-cream);
  background:
    linear-gradient(112deg, rgba(4, 69, 62, .97), rgba(8, 105, 94, .94)),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.04) 18px 19px);
  box-shadow:
    0 5px 0 rgba(79, 43, 35, .72),
    0 14px 34px rgba(2, 28, 25, .3),
    inset 0 1px 0 rgba(255,255,255,.18);
  pointer-events: auto;
  transition: opacity 180ms ease, transform 220ms ease;
}

.mission-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 2px solid rgba(255, 244, 198, .84);
  border-radius: 50%;
  background: var(--v95-oxblood);
  box-shadow: inset 0 -4px 0 rgba(69, 16, 19, .3);
  font-size: 26px;
}

.mission-copy {
  min-width: 0;
}

.mission-copy small,
.mission-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mission-copy small {
  margin-bottom: 2px;
  color: var(--v95-gold);
  font-size: calc(11px * var(--ui-scale));
  font-weight: 760;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.mission-copy strong {
  font-size: calc(18px * var(--ui-scale));
  font-weight: 690;
  letter-spacing: -.015em;
  line-height: 1.08;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mission-progress {
  height: 6px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}

.mission-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--v95-gold), #ff8d56, var(--v95-pink));
  transition: width 360ms cubic-bezier(.2,.8,.2,1);
}

#show-me-button {
  min-width: 94px;
  min-height: 48px;
  padding: 7px 11px;
  border: 0;
  border-radius: 14px 7px 14px 7px;
  color: #123c36;
  background: var(--v95-gold);
  box-shadow: inset 0 -4px 0 rgba(166, 97, 21, .28);
  font-size: calc(12px * var(--ui-scale));
  font-weight: 800;
  cursor: pointer;
}

#show-me-button span {
  margin-right: 4px;
  color: var(--v95-oxblood);
  font-size: 17px;
}

.top-hud {
  z-index: 45;
}

.top-actions {
  display: flex;
  gap: 7px;
}

.top-actions .round-button {
  width: 52px;
  min-width: 52px;
  height: 52px;
  min-height: 52px;
  border: 2px solid rgba(255, 244, 200, .9);
  border-radius: 18px 9px 18px 9px;
  color: var(--v95-cream);
  background: rgba(5, 80, 72, .95);
  box-shadow: 0 5px 0 rgba(76, 43, 35, .72), 0 11px 22px rgba(2, 25, 22, .24);
  font-family: "Fiesta Lilita", "Fiesta Fredoka", sans-serif;
  font-size: 21px;
}

.top-actions .pause-button {
  color: #53312b;
  background: var(--v95-gold);
}

#game-shell[data-hud-details="false"] .mini-map {
  opacity: 0;
  transform: translateY(-18px) scale(.92);
  pointer-events: none;
  visibility: hidden;
}

#game-shell[data-hud-details="true"] .mini-map {
  top: 65px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
}

#game-shell[data-hud-details="true"] .mission-ribbon {
  opacity: .18;
  transform: translateY(-8px);
  pointer-events: none;
}

#game-shell[data-started="false"] .mission-ribbon,
#game-shell[data-started="false"] .top-hud,
#game-shell[data-started="reward-locked"] .mission-ribbon,
#game-shell[data-started="reward-locked"] .top-hud {
  opacity: 0;
  pointer-events: none;
}

.intro-sound-choice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: min(346px, calc(100vw - 40px));
  margin: 7px auto 0;
  padding: 5px;
  border: 1px solid rgba(255, 244, 196, .54);
  border-radius: 14px;
  background: rgba(4, 73, 66, .76);
}

.intro-sound-choice button {
  min-height: 42px;
  padding: 6px 5px;
  border: 0;
  border-radius: 10px;
  color: #fff3d0;
  background: transparent;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
}

.intro-sound-choice button[aria-pressed="true"] {
  color: #173f39;
  background: var(--v95-gold);
  box-shadow: inset 0 -3px 0 rgba(157, 92, 24, .25);
}

.sound-style-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  width: 100%;
  margin: 10px 0 4px;
}

.sound-style-picker button {
  display: grid;
  min-height: 74px;
  place-items: center;
  padding: 7px 4px;
  border: 2px solid rgba(7, 95, 87, .2);
  border-radius: 14px;
  color: var(--v95-teal);
  background: rgba(255,255,255,.52);
}

.sound-style-picker button span {
  font-size: 22px;
}

.sound-style-picker button b {
  font-size: 13px;
}

.sound-style-picker button small {
  font-size: 9px;
}

.sound-style-picker button[aria-pressed="true"] {
  border-color: var(--v95-oxblood);
  color: #fff9dc;
  background: var(--v95-oxblood);
  box-shadow: inset 0 -4px 0 rgba(69, 17, 20, .26);
}

#settings-sheet.music-only-sheet {
  width: min(520px, calc(100% - 18px));
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 18px);
  overflow-y: auto;
  touch-action: pan-y pinch-zoom;
}

#settings-sheet .settings-content {
  overflow: visible;
}

#settings-sheet .comfort-setting,
#settings-sheet .reading-setting {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 2px solid rgba(7, 95, 87, .18);
  border-radius: 18px;
  background: rgba(255, 249, 222, .88);
}

.comfort-heading,
.reading-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--v95-teal);
}

.comfort-heading > span:first-child,
.reading-heading > span:first-child {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: var(--v95-oxblood);
  font-size: 20px;
  font-weight: 800;
}

.comfort-heading span:last-child,
.reading-heading span:last-child {
  display: grid;
  gap: 2px;
}

.comfort-heading b,
.reading-heading b {
  font-size: 17px;
}

.comfort-heading small,
.reading-heading small {
  font-size: 12px;
  line-height: 1.25;
}

#comfort-mode-button {
  min-height: 48px;
  border: 0;
  border-radius: 13px;
  color: #fff7da;
  background: #53736b;
}

#comfort-mode-button[aria-pressed="true"] {
  background: var(--v95-oxblood);
}

.text-size-picker,
.language-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.language-picker {
  grid-template-columns: repeat(2, 1fr);
}

.text-size-picker button,
.language-picker button {
  min-height: 48px;
  border: 2px solid rgba(7, 95, 87, .25);
  border-radius: 12px;
  color: var(--v95-teal);
  background: #fffaf0;
  font-size: 14px;
  font-weight: 780;
}

.text-size-picker button[aria-pressed="true"],
.language-picker button[aria-pressed="true"] {
  border-color: var(--v95-oxblood);
  color: #fff9dc;
  background: var(--v95-oxblood);
}

#settings-sheet .settings-quick-actions {
  display: grid;
  gap: 8px;
}

#settings-sheet .settings-quick-actions .setting-row {
  display: flex;
  min-height: 64px;
}

.settings-links {
  display: grid;
  gap: 7px;
  padding: 12px;
}

#parent-zone-button {
  min-height: 50px;
  border: 2px solid var(--v95-gold);
  border-radius: 14px;
  color: #fff5d3;
  background: var(--v95-teal);
  font-weight: 800;
}

.v95-modal {
  z-index: 160;
  inset: 0;
  display: grid;
  place-items: center;
  padding:
    calc(14px + var(--safe-top))
    calc(14px + var(--safe-right))
    calc(14px + var(--safe-bottom))
    calc(14px + var(--safe-left));
  overflow-y: auto;
  color: var(--v95-teal);
  background:
    radial-gradient(circle at 18% 20%, rgba(244,202,80,.26), transparent 28%),
    linear-gradient(rgba(2, 50, 45, .74), rgba(35, 25, 25, .82));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  touch-action: pan-y pinch-zoom;
}

.v95-modal-card {
  position: relative;
  width: min(520px, 100%);
  padding: clamp(20px, 4vw, 32px);
  border: 3px solid #fff0b4;
  border-radius: 30px 12px 30px 12px;
  background:
    radial-gradient(circle at 90% 8%, rgba(238, 86, 141, .15), transparent 26%),
    repeating-linear-gradient(0deg, transparent 0 24px, rgba(124, 73, 45, .035) 24px 25px),
    var(--v95-cream);
  box-shadow:
    0 8px 0 var(--v95-oxblood),
    0 28px 70px rgba(0,0,0,.38);
  text-align: center;
}

.v95-card-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--v95-oxblood);
  font-size: calc(12px * var(--ui-scale));
  font-weight: 820;
  letter-spacing: .1em;
}

.v95-modal-card h2 {
  margin: 0;
  color: var(--v95-teal);
  font-family: "Fiesta Lilita", "Cooper Black", Georgia, serif;
  font-size: calc(clamp(34px, 8vw, 52px) * var(--ui-scale));
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: .98;
}

.v95-modal-card p {
  margin: 12px auto;
  max-width: 42ch;
  font-size: calc(16px * var(--ui-scale));
  font-weight: 570;
  line-height: 1.4;
}

.pause-duck {
  margin: -8px 0 5px;
  font-size: 54px;
  filter: drop-shadow(0 5px 0 rgba(142,47,52,.16));
}

.pause-actions,
.chapter-complete-actions {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.pause-actions button,
.chapter-complete-actions button,
.parent-zone-card button {
  min-height: 52px;
  padding: 10px 14px;
  border: 2px solid rgba(7, 95, 87, .24);
  border-radius: 15px 7px 15px 7px;
  color: var(--v95-teal);
  background: rgba(255,255,255,.68);
  font-size: calc(14px * var(--ui-scale));
  font-weight: 800;
}

.v95-primary {
  border-color: #064d47 !important;
  color: #fff7d8 !important;
  background: linear-gradient(#0c8b7c, #07665d) !important;
  box-shadow: inset 0 -5px 0 rgba(2, 55, 49, .35);
}

.pause-key-help {
  display: block;
  margin-top: 14px;
  color: #5d7069;
  font-size: 11px;
  font-weight: 650;
}

.postcard-art {
  position: relative;
  display: grid;
  width: 172px;
  height: 112px;
  place-items: center;
  margin: 5px auto 18px;
  overflow: hidden;
  border: 7px solid #fff;
  border-radius: 9px;
  color: #fff9db;
  background:
    linear-gradient(162deg, transparent 45%, rgba(8,117,107,.88) 46%),
    linear-gradient(#72d3d3 0 58%, #e7bc69 58%);
  box-shadow: 0 6px 0 rgba(142, 47, 52, .22), 0 12px 26px rgba(5, 58, 52, .18);
  transform: rotate(-2.5deg);
}

.postcard-art span {
  font-size: 54px;
}

.postcard-art i {
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--v95-gold);
  font-size: 24px;
  font-style: normal;
}

.v95-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 27px !important;
}

.parent-zone-card {
  text-align: left;
}

.parent-zone-card h2,
.parent-zone-card > div > .v95-card-kicker {
  text-align: center;
}

.parent-challenge {
  display: grid;
  grid-template-columns: 1fr 112px;
  gap: 10px;
  align-items: center;
  margin: 18px 0 8px;
}

.parent-challenge span {
  display: grid;
  min-height: 58px;
  place-items: center;
  border: 2px dashed var(--v95-oxblood);
  border-radius: 14px;
  color: var(--v95-oxblood);
  background: #fff;
  font-size: 25px;
  font-weight: 800;
}

.parent-challenge input {
  width: 100%;
  min-height: 58px;
  border: 2px solid var(--v95-teal);
  border-radius: 14px;
  color: var(--v95-teal);
  background: #fff;
  font-size: 24px;
  font-weight: 800;
  text-align: center;
}

.parent-privacy-summary,
.parent-links {
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(7,95,87,.08);
}

.parent-privacy-summary h3,
.parent-links h3 {
  margin: 0 0 8px;
  color: var(--v95-oxblood);
  font-size: 16px;
}

.parent-privacy-summary ul {
  margin: 0;
  padding-left: 20px;
  line-height: 1.5;
}

.parent-links {
  display: grid;
  gap: 8px;
}

.parent-links a {
  display: flex;
  min-height: 48px;
  align-items: center;
  padding: 9px 12px;
  border: 2px solid rgba(7, 95, 87, .18);
  border-radius: 12px;
  color: var(--v95-teal);
  background: #fff;
  font-weight: 750;
  text-decoration: none;
}

#leaderboard-sheet[data-board-mode="local"] .leaderboard-tabs,
#leaderboard-sheet[data-board-mode="local"] .leaderboard-board,
#leaderboard-sheet[data-board-mode="local"] .leaderboard-player-card {
  display: none;
}

#leaderboard-sheet[data-board-mode="local"] .fiesta-stat-book {
  margin-top: 4px;
}

#leaderboard-sheet[data-board-mode="local"] .leaderboard-privacy {
  font-size: 13px;
  line-height: 1.35;
}

.signal-model {
  position: relative;
  display: grid;
  width: 112px;
  height: 112px;
  place-items: center;
  margin: 0 auto 8px;
  border: 5px solid var(--v95-gold);
  border-radius: 50%;
  color: #fff8c9;
  background: var(--v95-teal);
  box-shadow: 0 0 0 8px rgba(244,202,80,.2), 0 12px 28px rgba(3, 52, 47, .3);
  font-size: 54px;
}

.launcher-reticle {
  color: var(--v95-gold);
}

.launcher-reticle > span {
  border: 0;
  border-radius: 0;
  background: currentColor;
  box-shadow: 0 0 0 7px rgba(4, 73, 66, .72), 0 0 34px currentColor;
  clip-path: polygon(50% 0%, 61% 34%, 98% 35%, 68% 56%, 79% 93%, 50% 71%, 21% 93%, 32% 56%, 2% 35%, 39% 34%);
  opacity: .86;
}

.launcher-reticle > span::before,
.launcher-reticle > span::after {
  display: none;
}

.launcher-reticle[data-locked="true"] {
  color: #67f4ad;
}

.launcher-reticle[data-locked="true"] > span {
  transform: scale(.78) rotate(18deg);
}

.upgrade-card.is-maxed,
.power-buy-band.is-maxed {
  border-color: rgba(7, 95, 87, .42);
  color: var(--v95-teal);
  background: rgba(244, 202, 80, .2);
  opacity: .78;
}

.marquee-glow {
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

.marquee-glow i {
  position: absolute;
  top: 14%;
  left: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--v95-gold);
  box-shadow: 0 0 40px 15px rgba(244,202,80,.52);
  animation: marquee-star-float 3.2s ease-in-out infinite;
}

.marquee-glow i:nth-child(2) {
  top: 28%;
  left: 22%;
  animation-delay: -.8s;
}

.marquee-glow i:nth-child(3) {
  top: 22%;
  left: 76%;
  animation-delay: -1.6s;
}

#game-shell[data-comfort-mode="true"] *,
#game-shell[data-comfort-mode="true"] *::before,
#game-shell[data-comfort-mode="true"] *::after {
  scroll-behavior: auto !important;
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}

@keyframes marquee-star-float {
  0%, 100% { opacity: .45; transform: translateY(0) scale(.8); }
  50% { opacity: 1; transform: translateY(22px) scale(1.18); }
}

@media (max-width: 760px) {
  .mission-ribbon {
    grid-template-columns: 42px minmax(0, 1fr) 48px;
    width: calc(100% - 140px - var(--safe-left) - var(--safe-right));
    min-height: 58px;
    gap: 7px;
    border-radius: 17px 8px 17px 8px;
    padding: 7px;
  }

  .mission-icon {
    width: 42px;
    height: 42px;
    font-size: 23px;
  }

  .mission-copy small {
    font-size: calc(8.5px * var(--ui-scale));
  }

  .mission-copy strong {
    font-size: calc(14px * var(--ui-scale));
  }

  #show-me-button {
    min-width: 48px;
    width: 48px;
    padding: 0;
  }

  #show-me-button b {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
  }

  #show-me-button span {
    margin: 0;
    font-size: 22px;
  }

  .top-hud {
    left: auto;
  }

  .top-actions {
    gap: 5px;
  }

  .top-actions .round-button {
    display: none;
  }

  .top-actions .pause-button,
  .top-actions .hud-details-button {
    display: grid;
    width: 56px;
    min-width: 56px;
    height: 56px;
    place-items: center;
  }

  #game-shell[data-hud-details="true"] .mini-map {
    top: 62px;
    left: calc(8px + var(--safe-left));
  }

  .intro-sound-choice {
    margin-top: 4px;
  }

  .v95-modal-card {
    padding: 22px 16px;
  }
}

@media (max-width: 420px) {
  .mission-ribbon {
    width: calc(100% - 142px - var(--safe-left) - var(--safe-right));
  }

  .mission-copy strong {
    font-size: calc(13px * var(--ui-scale));
  }

  .mission-progress {
    margin-top: 4px;
  }

  .sound-style-picker button {
    min-height: 68px;
  }

  .sound-style-picker button small {
    display: none;
  }

  .parent-challenge {
    grid-template-columns: 1fr 92px;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .mission-ribbon {
    width: min(500px, calc(100% - 202px));
    min-height: 54px;
  }

  .v95-modal {
    place-items: start center;
  }

  .v95-modal-card {
    width: min(680px, 100%);
    padding: 16px 20px;
  }

  .pause-card .pause-duck {
    display: none;
  }

  .pause-actions {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mission-ribbon,
  .mission-progress i,
  .marquee-glow i {
    animation: none !important;
    transition: none !important;
  }
}

.finale-screen {
  position: absolute;
  z-index: 110;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: max(20px, var(--safe-top)) 16px max(20px, var(--safe-bottom));
  background:
    radial-gradient(circle at 50% 24%, rgba(247, 205, 76, .34), transparent 31%),
    linear-gradient(150deg, rgba(2, 38, 35, .86), rgba(2, 25, 24, .97));
  backdrop-filter: blur(9px) saturate(1.15);
  pointer-events: auto;
}

.finale-screen[hidden] {
  display: none;
}

.finale-panel {
  position: relative;
  width: min(100%, 440px);
  padding: 25px 20px 20px;
  border: 3px solid #f1c652;
  border-radius: 24px 11px 27px 14px;
  background:
    linear-gradient(145deg, rgba(255, 250, 222, .98), rgba(244, 221, 165, .98)),
    #f7e6b9;
  box-shadow: 0 9px 0 #943b2d, 0 26px 80px rgba(1, 20, 19, .62);
  color: var(--ink);
  text-align: center;
  transform: rotate(-.35deg);
}

.finale-panel::before {
  content: "FIESTA SWEEP";
  position: absolute;
  top: -12px;
  left: 50%;
  padding: 5px 13px 4px;
  border: 2px solid #f1c652;
  border-radius: 99px;
  background: #164e47;
  color: #ffe8a1;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .18em;
  transform: translateX(-50%);
}

.finale-kicker {
  display: block;
  margin-top: 4px;
  color: #b94534;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .14em;
}

.finale-panel h2 {
  margin: 7px auto 8px;
  max-width: 360px;
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: clamp(28px, 8vw, 38px);
  line-height: .95;
}

.finale-panel > p {
  max-width: 350px;
  margin: 0 auto 15px;
  color: rgba(21, 60, 54, .73);
  font-size: 12px;
  line-height: 1.35;
}

.rocket-model {
  position: relative;
  width: 62px;
  height: 116px;
  margin: 5px auto 2px;
  border-radius: 60% 60% 24% 24%;
  background: linear-gradient(90deg, #cf3f31 0 18%, #f9e8b4 18% 76%, #da4d38 76%);
  box-shadow: inset -8px 0 rgba(57, 67, 57, .12), 0 12px 22px rgba(101, 55, 35, .25);
  transform: rotate(11deg);
}

.rocket-model::before {
  content: "";
  position: absolute;
  top: -23px;
  left: 0;
  border-right: 31px solid transparent;
  border-bottom: 31px solid #f2c64d;
  border-left: 31px solid transparent;
}

.rocket-model::after {
  content: "";
  position: absolute;
  right: 17px;
  bottom: -29px;
  width: 26px;
  height: 39px;
  border-radius: 50% 50% 70% 70%;
  background: linear-gradient(#f14d37, #f5c74e 55%, transparent 56%);
  filter: drop-shadow(0 0 8px #f58a3e);
}

.rocket-model i {
  position: absolute;
  top: 31px;
  left: 17px;
  width: 27px;
  height: 27px;
  border: 5px solid #144e49;
  border-radius: 50%;
  background: #46bbca;
}

.rocket-model b {
  position: absolute;
  right: -14px;
  bottom: 6px;
  width: 24px;
  height: 35px;
  border-radius: 0 80% 10% 0;
  background: #f2c64d;
}

.finale-credit {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 10px;
  margin: 14px 0 13px;
  padding: 11px 13px;
  border: 1px dashed rgba(21, 78, 71, .42);
  border-radius: 12px;
  background: rgba(255, 255, 255, .34);
  text-align: left;
}

.finale-credit span,
.finale-credit small {
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .09em;
}

.finale-credit strong {
  grid-row: 1 / 3;
  grid-column: 2;
  color: #b84434;
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 27px;
}

.finale-credit small {
  color: rgba(21, 60, 54, .62);
}

.finale-primary {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 13px 10px;
  border: 2px solid #ffe09a;
  border-radius: 13px;
  background: #e64a37;
  box-shadow: 0 6px 0 #8e3028;
  color: white;
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 15px;
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
}

.finale-primary:disabled {
  opacity: .7;
}

.finale-fire {
  background: #164e47;
  box-shadow: 0 6px 0 #072f2b;
}

.finale-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 15px;
}

.finale-stats span {
  padding: 7px 3px;
  border: 1px solid rgba(21, 60, 54, .16);
  border-radius: 9px;
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: .06em;
}

.finale-stats b {
  display: block;
  margin-bottom: 2px;
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 15px;
}

.reward-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.reward-option {
  min-width: 0;
  padding: 10px 8px 12px;
  border: 2px solid rgba(21, 78, 71, .22);
  border-radius: 14px 8px 16px 9px;
  background: rgba(255, 255, 255, .38);
  box-shadow: 0 4px 0 rgba(21, 78, 71, .2);
  color: var(--ink);
}

.reward-option:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(21, 78, 71, .2);
}

.reward-option small,
.reward-option strong {
  display: block;
}

.reward-option small {
  margin: 7px 0 3px;
  color: #b84434;
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: .1em;
}

.reward-option strong {
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 14px;
  line-height: 1.02;
}

.reward-art {
  position: relative;
  display: grid;
  width: 92px;
  height: 94px;
  margin: 0 auto;
  place-items: center;
  font-size: 49px;
}

.margarita-art {
  border-radius: 50%;
  overflow: hidden;
  background: #075a59;
  box-shadow: 0 6px 16px rgba(68, 49, 31, .25);
}

.margarita-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.candy-art {
  width: 84px;
  height: 86px;
  border: 7px solid #f0c84f;
  border-radius: 14px 14px 24px 24px;
  background: repeating-linear-gradient(135deg, #29a9bd 0 12px, #ea4c87 12px 24px, #f4cf4e 24px 36px);
  box-shadow: 0 7px 0 #a94336;
}

.candy-art i {
  position: absolute;
  right: -7px;
  bottom: 4px;
  padding: 3px 5px;
  border-radius: 5px 0 0 5px;
  background: #164e47;
  color: #ffe8a1;
  font-size: 9px;
  font-style: normal;
  font-weight: 1000;
}

.choice-warning {
  margin-top: 14px !important;
  color: #a83e32 !important;
  font-size: 8px !important;
  font-weight: 1000;
  letter-spacing: .1em;
}

.locked-reward-icon {
  display: grid;
  width: 118px;
  height: 118px;
  margin: 10px auto 4px;
  border: 9px double #f4c94c;
  border-radius: 50%;
  background: conic-gradient(#0f7c73, #2ba7b8, #e94a86, #f2c94d, #0f7c73);
  box-shadow: 0 10px 30px rgba(42, 73, 56, .28);
  font-size: 62px;
  place-items: center;
}

.locked-reward-icon.has-product-image {
  width: 138px;
  height: 138px;
  overflow: hidden;
  border: 0;
  background: #075a59;
}

.locked-reward-icon.has-product-image img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.reward-venue {
  color: #164e47 !important;
  font-size: 10px !important;
  font-weight: 900;
  letter-spacing: .06em;
}

.reward-code {
  margin: 13px 0;
  padding: 12px;
  border: 2px dashed #164e47;
  border-radius: 12px;
  background: #fff4c9;
}

.reward-code small,
.reward-code strong,
.reward-code span {
  display: block;
}

.reward-code small,
.reward-code span {
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: .12em;
}

.reward-code strong {
  margin: 4px 0;
  color: #b84434;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 30px;
  letter-spacing: .08em;
}

.reward-map {
  background: #164e47;
  box-shadow: 0 6px 0 #073832;
}

.reward-terms {
  margin: 15px auto 0 !important;
  font-size: 8px !important;
  line-height: 1.35 !important;
}

.rocket-trail,
.boat-blast {
  position: fixed;
  z-index: 112;
  pointer-events: none;
}

.rocket-trail {
  left: 5%;
  bottom: 3%;
  width: 38px;
  height: 90px;
  border-radius: 50% 50% 20% 20%;
  background: linear-gradient(90deg, #cf3f31 0 20%, #f9e8b4 20% 75%, #db4e39 75%);
  opacity: 0;
  transform: rotate(48deg);
}

.rocket-trail::after {
  content: "";
  position: absolute;
  bottom: -64px;
  left: 8px;
  width: 23px;
  height: 78px;
  background: linear-gradient(#f3c84d, #eb4b39 48%, transparent);
  filter: blur(2px) drop-shadow(0 0 9px #f3c84d);
}

.finale-screen.launching .rocket-trail {
  animation: finale-rocket 1.15s cubic-bezier(.2,.7,.22,1) forwards;
}

.boat-blast {
  top: 23%;
  right: 13%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff0a3;
  box-shadow: 0 0 0 18px #ef9a38, 0 0 0 38px rgba(228, 64, 49, .72), 0 0 50px 56px rgba(242, 198, 74, .44);
  opacity: 0;
}

.finale-screen.boat-hit .boat-blast {
  animation: finale-blast .85s ease-out forwards;
}

@keyframes finale-rocket {
  0% { opacity: 0; translate: 0 0; scale: .7; }
  12% { opacity: 1; }
  100% { opacity: 1; translate: 76vw -72vh; scale: 1.25; }
}

@keyframes finale-blast {
  0% { opacity: 0; scale: .15; }
  25% { opacity: 1; }
  100% { opacity: 0; scale: 3.5; }
}

.rotate-note {
  display: none;
}

@media (min-width: 700px) {
  .mission-card {
    width: 260px;
  }

  .bag-chip {
    width: 150px;
  }

  .grab-button {
    right: calc(44px + var(--safe-right));
  }

  .move-right .grab-button {
    right: auto;
    left: calc(44px + var(--safe-left));
  }

  .bottom-sheet {
    left: 50%;
    right: auto;
    width: min(620px, calc(100% - 28px));
    border-radius: 26px 26px 0 0;
    transform: translate(-50%, 105%);
  }

  .bottom-sheet.open {
    transform: translate(-50%, 0);
  }

  .shop-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 900px) and (min-height: 600px) {
  .start-screen {
    align-items: center;
    justify-content: flex-end;
    padding: clamp(24px, 4vw, 58px);
    background:
      linear-gradient(90deg, transparent 0 58%, rgba(3, 40, 37, 0.04) 68%, rgba(3, 40, 37, 0.32) 100%),
      linear-gradient(to bottom, rgba(4, 45, 42, 0.02) 0 72%, rgba(2, 28, 26, 0.34) 100%);
  }

  .intro-map-label {
    top: clamp(24px, 4vw, 48px);
    right: clamp(24px, 4vw, 58px);
    left: auto;
    transform: none;
  }

  .overview-hint {
    top: clamp(24px, 4vw, 48px);
    left: clamp(24px, 4vw, 58px);
    padding: 8px 12px;
    font-size: 8px;
    transform: none;
  }

  .start-screen.overview-dragging .overview-hint {
    transform: scale(1.04);
  }

  .intro-copy {
    width: min(31vw, 360px);
    min-width: 320px;
    margin: 38px 0 0;
    padding: 15px 15px 13px;
    border-radius: 22px 8px 23px 11px;
    background: rgba(248, 232, 190, 0.9);
    box-shadow: 0 20px 64px rgba(1, 27, 24, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.58);
  }

  .intro-copy h1 {
    margin: 3px 0 6px;
    font-size: clamp(44px, 4.5vw, 56px);
  }

  .intro-copy > p {
    margin: 7px auto 9px;
    font-size: 11px;
  }

  .intro-controls {
    gap: 5px;
    margin-bottom: 9px;
  }

  .intro-controls > div {
    min-height: 56px;
    padding: 5px 3px 4px;
  }

  .mini-stick {
    width: 24px;
    height: 24px;
  }

  .mini-hand {
    height: 27px;
    font-size: 21px;
  }

  .intro-controls small {
    font-size: 7px;
  }

  .start-button {
    padding: 9px 13px 8px;
  }

  .start-button span {
    font-size: 16px;
  }

  .intro-swap {
    margin-top: 7px;
  }
}

@media (max-width: 699px) {
  #shop-sheet.fiesta-modal .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .top-hud { top: calc(5px + var(--safe-top)); }
  .mission-card { top: calc(49px + var(--safe-top)); width: 210px; }
  .bag-chip { top: calc(49px + var(--safe-top)); }
  .location-ribbon { top: calc(112px + var(--safe-top)); }
  .control-zone { top: 28%; }
  .floating-stick { width: 96px; height: 96px; }
  .joystick-knob { width: 40px; height: 40px; }
  .grab-button { bottom: calc(14px + var(--safe-bottom)); width: 64px; height: 64px; }
  .control-hint { bottom: calc(18px + var(--safe-bottom)); }
  .control-zone[data-control="look"] .control-hint { bottom: calc(88px + var(--safe-bottom)); }
  .swap-shortcut { bottom: calc(8px + var(--safe-bottom)); }
  .start-screen { align-items: center; justify-content: flex-end; padding: 8px calc(8px + var(--safe-right)) 8px 8px; }
  .intro-map-label { left: calc(18px + var(--safe-left)); transform: none; }
  .intro-copy { width: min(54%, 520px); margin: 0; padding: 11px 13px 10px; }
  .intro-copy h1 { font-size: clamp(45px, 10vw, 70px); }
  .intro-copy > p { margin: 7px auto 9px; }
  .intro-controls { margin-bottom: 9px; }
}

@media (pointer: fine) and (hover: hover) and (min-width: 700px) {
  .intro-controls-mobile {
    display: none;
  }

  .intro-controls-desktop {
    display: grid;
  }

  .intro-swap {
    display: none;
  }

  .control-zone {
    display: none;
  }

  .swap-shortcut {
    display: none;
  }

  .grab-button {
    right: 38px;
  }

  .move-right .grab-button {
    right: 38px;
    left: auto;
  }

  #game-shell[data-started="true"][data-pointer-lock="unlocked"] .desktop-control-hint,
  #game-shell[data-started="true"][data-pointer-lock="unsupported"] .desktop-control-hint {
    position: absolute;
    z-index: 24;
    left: 50%;
    bottom: 28px;
    display: grid;
    gap: 3px;
    min-width: 390px;
    padding: 12px 18px 10px;
    border: 1px solid rgba(255, 239, 194, 0.78);
    border-radius: 999px;
    color: #fff1c8;
    background: rgba(3, 50, 46, 0.88);
    box-shadow: 0 10px 34px rgba(1, 24, 22, 0.34);
    text-align: center;
    transform: translateX(-50%);
    pointer-events: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .desktop-control-hint b {
    font-family: "Rockwell Extra Bold", Georgia, serif;
    font-size: 12px;
    letter-spacing: 0.035em;
  }

  .desktop-control-hint span {
    color: rgba(255, 241, 200, 0.74);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.12em;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* v30 gameplay HUD: a quiet field instrument instead of stacked mission cards. */
.mini-map {
  position: relative;
  width: 128px;
  padding: 6px 7px 7px;
  overflow: hidden;
  border: 1px solid rgba(255, 244, 214, 0.74);
  border-radius: 10px 18px 13px 18px;
  color: #fff8df;
  background:
    radial-gradient(circle at 70% 18%, rgba(244, 202, 75, 0.12), transparent 40%),
    linear-gradient(145deg, rgba(4, 68, 61, 0.94), rgba(2, 39, 36, 0.91));
  box-shadow: 0 8px 26px rgba(1, 28, 25, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mini-map::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.08), transparent 33%);
  pointer-events: none;
}

.mini-map-topline {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.mini-map-topline span {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 1px solid rgba(255, 241, 197, 0.65);
  border-radius: 50%;
  color: #173f38;
  background: #f2c64c;
  font-size: 7px;
  box-shadow: 0 2px 8px rgba(0, 25, 23, 0.3);
}

.mini-map-canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 55px;
  overflow: hidden;
  border: 1px solid rgba(255, 244, 214, 0.14);
  border-radius: 7px 12px 7px 10px;
  background: rgba(255, 244, 214, 0.055);
}

.mini-map-street {
  fill: none;
  stroke: rgba(255, 238, 194, 0.25);
  stroke-width: 5;
  stroke-dasharray: 2 2;
}

.mini-map-water {
  fill: none;
  stroke: #18a99d;
  stroke-width: 13;
  stroke-linecap: round;
  opacity: 0.88;
}

.mini-map-bank {
  fill: none;
  stroke: rgba(255, 230, 166, 0.7);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.mini-map-bridge {
  fill: none;
  stroke: #f4ca4b;
  stroke-width: 3.2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px rgba(244, 202, 75, 0.5));
}

.mini-map-marker {
  stroke: rgba(255, 249, 228, 0.92);
  stroke-width: 1;
}

.mini-map-marker-cart { fill: #f2c64c; }
.mini-map-marker-bin { fill: #f05b3f; }

.mini-map-boat path {
  fill: #ff7357;
  stroke: #fff2c9;
  stroke-width: 0.8;
}

.mini-map-player path {
  fill: #fff7dd;
  stroke: #f2c64c;
  stroke-width: 1.2;
  filter: drop-shadow(0 0 2px rgba(242, 198, 76, 0.78));
}

.mini-map-footer {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 3px;
  margin-top: 3px;
}

.mini-map-footer > strong {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
  line-height: 1;
}

.mini-map-footer b {
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 13px;
}

.mini-map-footer small {
  color: rgba(255, 241, 201, 0.75);
  font-size: 5.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.mini-map .mission-track {
  height: 3px;
  margin: 0;
  background: rgba(255, 255, 255, 0.14);
}

.mini-map.fresh-drop .mini-map-footer b {
  animation: mini-map-count 460ms ease both;
}

@keyframes mini-map-count {
  0%, 100% { color: #fff8df; transform: scale(1); }
  35% { color: #ffd45c; transform: scale(1.08); }
}

.top-readouts {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.top-actions {
  display: flex;
  gap: 5px;
}

.player-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 4px;
  width: 150px;
}

.cash-chip {
  min-width: 0;
  padding: 6px 7px 5px;
  border: 1px solid rgba(255, 241, 201, 0.72);
  border-radius: 10px 5px 10px 12px;
  background: rgba(5, 62, 56, 0.94);
}

.cash-chip span {
  color: #ffd863;
  font-size: 6.5px;
  letter-spacing: 0.12em;
}

.cash-chip strong {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  white-space: nowrap;
}

.cash-chip.bump {
  animation: cash-chip-bump 420ms ease;
}

.cash-chip.launcher-ready {
  border-color: #ffe06b;
  background: linear-gradient(145deg, rgba(8, 85, 69, 0.98), rgba(123, 71, 20, 0.96));
  box-shadow: 0 0 0 2px rgba(255, 216, 75, 0.32), 0 8px 22px rgba(69, 38, 8, 0.34);
}

.cash-chip.launcher-ready span {
  color: #fff3a4;
  letter-spacing: 0.075em;
}

@keyframes cash-chip-bump {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.06); background: rgba(12, 112, 96, 0.98); }
}

.top-hud .bag-chip {
  position: static;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 2px;
  width: auto;
  padding: 6px 7px 5px;
  border: 1px solid rgba(255, 247, 223, 0.9);
  border-radius: 5px 10px 12px 10px;
  background: rgba(255, 240, 204, 0.96);
  box-shadow: 0 6px 18px rgba(2, 27, 24, 0.28);
}

.top-hud .bag-chip small {
  font-size: 6.5px;
  letter-spacing: 0.12em;
}

.top-hud .bag-chip strong {
  gap: 2px;
  margin-top: 2px;
  font-size: 15px;
  white-space: nowrap;
}

.top-hud .bag-chip strong span,
.top-hud .bag-chip strong b:last-child {
  font-size: 8px;
}

.top-hud .bag-meter {
  height: 3px;
  margin-top: 1px;
}

.toast-stack {
  top: calc(104px + var(--safe-top));
  right: calc(9px + var(--safe-right));
  left: auto;
  justify-items: end;
  width: min(54vw, 210px);
  transform: none;
}

.toast {
  display: none;
  max-width: 100%;
  padding: 7px 10px;
  border-width: 1px;
  border-radius: 9px 4px 9px 9px;
  background: rgba(4, 55, 50, 0.94);
  font-size: 9px;
  line-height: 1.2;
  text-align: right;
  animation: none;
}

.toast.show {
  display: block;
  animation: single-toast 2.2s both;
}

@keyframes single-toast {
  0% { opacity: 0; transform: translateX(7px) scale(.97); }
  12%, 82% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(4px); }
}

.aim-label.is-hidden {
  opacity: 0 !important;
  transform: translateY(3px);
}

.finale-upgrade-card {
  grid-column: 1 / -1;
  min-height: 126px;
  border: 2px solid rgba(190, 69, 48, 0.7);
  background:
    radial-gradient(circle at 88% 12%, rgba(244, 202, 75, 0.4), transparent 28%),
    rgba(255, 246, 216, 0.96);
}

.finale-upgrade-card[data-launcher-state="ready"] {
  border-color: #0b8b78;
  box-shadow: 0 0 0 3px rgba(11, 139, 120, 0.12), 3px 4px 0 rgba(86, 73, 45, 0.15);
}

@media (max-width: 699px) {
  .mini-map {
    width: 122px;
    padding: 5px 6px 6px;
  }

  .mini-map-canvas { height: 51px; }
  .mini-map-footer b { font-size: 14px; }
  .player-stats { width: 146px; }
  .cash-chip { padding: 5px 6px; border-width: 1px; }
  .cash-chip strong { font-size: 16px; }

  .top-hud .bag-chip {
    top: auto;
    width: auto;
    padding: 5px 6px;
    border-width: 1px;
  }

  .top-hud .bag-chip strong { font-size: 16px; }
  .top-hud .bag-chip small { font-size: 6.5px; }
  .toast { font-size: 9.5px; }
}

@media (max-width: 359px) {
  .mini-map { width: 109px; }
  .mini-map-canvas { height: 45px; }
  .player-stats { width: 132px; }
  .cash-chip strong,
  .top-hud .bag-chip strong { font-size: 14px; }
}

@media (min-width: 700px) {
  .mini-map { width: 148px; padding: 7px 8px 8px; }
  .mini-map-canvas { height: 63px; }
  .mini-map-footer b { font-size: 15px; }
  .player-stats { width: 172px; }
  .cash-chip strong,
  .top-hud .bag-chip strong { font-size: 17px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .mini-map { width: 112px; padding: 4px 5px 5px; }
  .mini-map-canvas { height: 41px; }
  .mini-map-footer b { font-size: 11px; }
  .mini-map-footer small { font-size: 5px; }
  .player-stats { width: 140px; }
  .toast-stack { top: calc(91px + var(--safe-top)); }
}

@media (prefers-reduced-motion: reduce) {
  .mini-map.fresh-drop .mini-map-footer b,
  .cash-chip.bump,
  .toast.show {
    animation: none;
  }
}

/* v44 release polish: one-screen shop, legible desktop aim, compact spoken
   tutorial captions, multiplayer radar, and the in-world launcher sequence. */
.desktop-aim-reticle {
  position: relative;
  display: none;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 248, 214, 0.96);
  border-radius: 50%;
  box-shadow: 0 1px 0 rgba(4, 45, 41, 0.9), 0 0 0 1px rgba(4, 45, 41, 0.48);
}

.desktop-aim-reticle::before,
.desktop-aim-reticle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(255, 248, 214, 0.98);
  box-shadow: 0 1px rgba(4, 45, 41, 0.82);
  transform: translate(-50%, -50%);
}

.desktop-aim-reticle::before { width: 34px; height: 2px; }
.desktop-aim-reticle::after { width: 2px; height: 34px; }

.desktop-aim-reticle i {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f3c64e;
  transform: translate(-50%, -50%);
}

.launcher-reticle {
  position: fixed;
  z-index: 45;
  left: 50%;
  top: 50%;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: #ff6e59;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.launcher-reticle > span {
  position: relative;
  display: block;
  width: 108px;
  height: 108px;
  border: 4px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(3, 42, 38, 0.72), 0 0 28px currentColor;
  transition: color 130ms ease, transform 130ms ease;
}

.launcher-reticle > span::before,
.launcher-reticle > span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.launcher-reticle > span::before { width: 142px; height: 3px; }
.launcher-reticle > span::after { width: 3px; height: 142px; }
.launcher-reticle > span i { display: none; }

.launcher-reticle b,
.launcher-reticle small {
  padding: 6px 10px 5px;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: rgba(3, 42, 38, 0.9);
  box-shadow: 0 5px 18px rgba(1, 25, 23, 0.34);
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.launcher-reticle small {
  margin-top: -6px;
  border: 0;
  color: rgba(255, 248, 220, 0.78);
  font-size: 6px;
}

.launcher-reticle[data-locked="true"] { color: #35ed9d; }
.launcher-reticle[data-locked="true"] > span { transform: scale(.82); }

.mini-map-remote {
  filter: drop-shadow(0 1px 1px rgba(0, 29, 26, 0.9));
  transition: transform 90ms linear;
}

.mini-map-remote circle {
  stroke: #fff4c9;
  stroke-width: 1.25;
}

.first-shift-tutorial {
  bottom: calc(94px + var(--safe-bottom));
  width: min(76vw, 290px);
  gap: 7px;
  padding: 7px 8px 6px;
  border-width: 1px;
  border-radius: 11px;
  box-shadow: 0 4px 0 rgba(84, 43, 28, 0.66), 0 10px 24px rgba(1, 27, 24, 0.28);
}

.tutorial-copy-block h2 { font-size: 13px; }
.tutorial-copy-block p {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 2px;
  font-size: 8px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tutorial-footer { gap: 4px; }
.tutorial-actions { display: flex; gap: 3px; pointer-events: auto; }
#tutorial-dismiss,
#tutorial-skip {
  padding: 4px 5px;
  border: 1px solid rgba(255, 248, 220, 0.34);
  border-radius: 999px;
  background: rgba(0, 37, 34, 0.34);
  color: rgba(255, 248, 220, 0.84);
  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

#game-shell[data-tutorial-voice] .first-shift-tutorial {
  width: min(72vw, 260px);
  grid-template-columns: minmax(0, 1fr) auto;
}

#game-shell[data-tutorial-voice] .tutorial-copy-block span,
#game-shell[data-tutorial-voice] .tutorial-copy-block p {
  display: none;
}

#shop-sheet {
  top: max(7px, var(--safe-top));
  bottom: 0;
  display: flex;
  height: auto;
  max-height: none;
  padding-top: 7px;
  overflow: hidden;
  flex-direction: column;
}

#shop-sheet .sheet-handle { margin-bottom: 5px; }
#shop-sheet .sheet-header { flex: 0 0 auto; align-items: center; }
#shop-sheet .sheet-header h2 {
  margin: 1px 0 5px;
  font-size: clamp(20px, 5.6vw, 31px);
}
#shop-sheet .sheet-close { width: 34px; height: 34px; font-size: 22px; }
#shop-sheet .shop-wallet { flex: 0 0 auto; margin-bottom: 6px; padding-block: 4px; }
#shop-sheet .shop-grid {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-rows: minmax(76px, .82fr) repeat(2, minmax(0, 1fr));
  gap: 6px;
  overflow: hidden;
}
#shop-sheet .upgrade-card {
  min-height: 0;
  padding: 7px 7px 6px;
  border-radius: 7px 12px 7px 10px;
}
#shop-sheet .upgrade-icon { width: 27px; height: 27px; font-size: 15px; }
#shop-sheet .upgrade-level { font-size: 5.8px; }
#shop-sheet .upgrade-card h3 { margin: 5px 0 2px; font-size: clamp(11px, 3.5vw, 15px); }
#shop-sheet .upgrade-card p {
  min-height: 0;
  margin-bottom: 5px;
  overflow: hidden;
  font-size: 7.5px;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#shop-sheet .upgrade-buy { padding: 6px 4px 5px; font-size: 6.7px; }
#shop-sheet .finale-upgrade-card { min-height: 0; }
.finale-upgrade-card[data-launcher-state="ready-to-buy"],
.finale-upgrade-card[data-launcher-state="ready-to-fire"],
.finale-upgrade-card[data-launcher-state="reward-ready"] {
  border-color: #0b8b78;
  box-shadow: 0 0 0 3px rgba(11, 139, 120, 0.12), 3px 4px 0 rgba(86, 73, 45, 0.15);
}

.finale-secondary {
  margin-top: 9px;
  border-color: #174f48;
  background: #fff0bf;
  box-shadow: 0 5px 0 #b9a36c;
  color: #174f48;
}

.reward-screenshot-note {
  margin: 10px auto 5px !important;
  color: #b74433 !important;
  font-size: 8px !important;
  font-weight: 1000;
  letter-spacing: .08em;
}

@media (hover: hover) and (pointer: fine) {
  .desktop-aim-reticle { display: block; }
  .aim-layer { top: 50%; }
  #game-shell[data-pointer-lock="unlocked"] #game-canvas,
  #game-shell[data-pointer-lock="fallback"] #game-canvas { cursor: crosshair; }

  #shop-sheet {
    width: min(820px, calc(100% - 26px));
  }
  #shop-sheet .shop-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: minmax(84px, .88fr) minmax(0, 1fr);
  }
}

@media (max-height: 610px) {
  #shop-sheet { top: max(3px, var(--safe-top)); padding-top: 4px; }
  #shop-sheet .sheet-handle { display: none; }
  #shop-sheet .sheet-header span { display: none; }
  #shop-sheet .sheet-header h2 { font-size: 18px; }
  #shop-sheet .shop-wallet { position: absolute; top: 7px; left: calc(14px + var(--safe-left)); z-index: 1; }
  #shop-sheet .sheet-header { justify-content: flex-end; min-height: 36px; }
  #shop-sheet .sheet-header > div { display: none; }
  #shop-sheet .upgrade-card h3 { font-size: 11px; }
  #shop-sheet .upgrade-card p { font-size: 6.8px; }
}

@media (max-width: 699px) {
  .launcher-reticle > span { width: 84px; height: 84px; }
  .launcher-reticle > span::before { width: 112px; }
  .launcher-reticle > span::after { height: 112px; }
  .launcher-reticle b { font-size: 8px; }
  .launcher-reticle small { font-size: 5.5px; }
}

/* Camera Lab keeps the full camera toolset in one compact deck. The live
   world stays visible above it so every adjustment is immediately legible. */
.camera-lab-launch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 32px;
  margin-top: 7px;
  padding: 6px 8px;
  border: 1px solid rgba(8, 117, 107, 0.35);
  border-radius: 8px;
  background: rgba(8, 117, 107, 0.09);
  color: var(--river-deep);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.camera-lab-launch strong {
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--river);
  color: white;
}

.camera-lab {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  gap: 7px;
}

#settings-sheet.camera-lab-active {
  top: auto;
  width: min(780px, calc(100% - 28px));
  height: min(76dvh, 580px);
  max-height: min(76dvh, 580px);
  padding: 10px calc(12px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(12px + var(--safe-left));
  border-radius: 24px 24px 0 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.21) 1px, transparent 1px),
    rgba(247, 233, 199, 0.97);
  background-size: 100% 29px;
}

#settings-sheet.camera-lab-active > .sheet-handle,
#settings-sheet.camera-lab-active > .sheet-header,
#settings-sheet.camera-lab-active > .settings-content,
#settings-sheet.camera-lab-active > .settings-links,
#settings-sheet.camera-lab-active > .desktop-help {
  display: none;
}

#settings-sheet.camera-lab-active > .camera-lab {
  display: flex;
}

#game-shell.camera-lab-open .sheet-scrim {
  background: rgba(1, 24, 22, 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.camera-lab-header {
  display: grid;
  flex: 0 0 auto;
  align-items: center;
  grid-template-columns: minmax(86px, 1fr) auto minmax(86px, 1fr);
  gap: 8px;
}

.camera-lab-header > div {
  text-align: center;
}

.camera-lab-header span {
  display: block;
  color: #bd4934;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.camera-lab-header h2 {
  margin: 0;
  font-family: "Rockwell Extra Bold", "Cooper Black", Georgia, serif;
  font-size: clamp(21px, 5vw, 31px);
  line-height: 1;
}

.camera-lab-back,
.camera-lab-header output {
  min-height: 31px;
  padding: 7px 9px;
  border: 1px solid rgba(21, 60, 54, 0.25);
  border-radius: 9px;
  background: rgba(255, 250, 231, 0.78);
  color: var(--river-deep);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.07em;
}

.camera-lab-header output {
  justify-self: end;
  text-align: center;
}

.camera-lab-modes {
  flex: 0 0 auto;
  width: min(430px, 100%);
  margin: 0 auto;
}

.camera-control-grid {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.camera-control {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 0;
  padding: 6px 8px;
  border: 1px solid rgba(21, 60, 54, 0.23);
  border-radius: 10px;
  background: rgba(255, 250, 231, 0.72);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 3px 7px;
  transition: opacity 150ms ease, filter 150ms ease;
}

.camera-control span,
.camera-control b,
.camera-control small {
  display: block;
  min-width: 0;
}

.camera-control b {
  overflow: hidden;
  font-family: "Rockwell Extra Bold", Georgia, serif;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.camera-control small {
  margin-top: 1px;
  color: rgba(21, 60, 54, 0.64);
  font-size: 6.5px;
  font-weight: 700;
}

.camera-control output {
  align-self: center;
  min-width: 48px;
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--river-deep);
  color: white;
  font-size: 7px;
  font-weight: 900;
  text-align: center;
}

.camera-control input {
  width: 100%;
  height: 20px;
  margin: 0;
  grid-column: 1 / -1;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  touch-action: pan-x;
}

.camera-control input::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f2c950, #ef7b3d);
}

.camera-control input::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f2c950, #ef7b3d);
}

.camera-control input::-webkit-slider-thumb {
  width: 19px;
  height: 19px;
  margin-top: -7px;
  border: 2px solid #fff5d8;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--river);
  box-shadow: 0 2px 0 rgba(75, 50, 28, 0.32);
}

.camera-control input::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border: 2px solid #fff5d8;
  border-radius: 50%;
  background: var(--river);
  box-shadow: 0 2px 0 rgba(75, 50, 28, 0.32);
}

.camera-control.is-disabled {
  opacity: 0.4;
  filter: saturate(0.35);
}

.camera-lab-actions {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.camera-lab-actions button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  min-height: 37px;
  padding: 6px 8px;
  border: 1px solid rgba(21, 60, 54, 0.25);
  border-radius: 9px;
  background: rgba(255, 250, 231, 0.78);
  color: var(--river-deep);
  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.camera-lab-actions strong {
  margin-left: 5px;
  padding: 4px 5px;
  border-radius: 5px;
  background: var(--river);
  color: white;
  font-size: 6px;
}

.camera-lab-actions button[aria-pressed="true"] strong {
  background: var(--coral);
}

@media (max-width: 699px) {
  #settings-sheet.camera-lab-active {
    top: auto;
    width: 100%;
    height: min(78dvh, 580px);
    max-height: min(78dvh, 580px);
    padding: 7px calc(8px + var(--safe-right)) calc(7px + var(--safe-bottom)) calc(8px + var(--safe-left));
  }

  .camera-lab {
    gap: 5px;
  }

  .camera-lab-header {
    grid-template-columns: minmax(76px, 1fr) auto minmax(76px, 1fr);
    gap: 5px;
  }

  .camera-lab-back,
  .camera-lab-header output {
    min-height: 28px;
    padding: 5px 6px;
    font-size: 6px;
  }

  .camera-lab-header h2 {
    font-size: 21px;
  }

  .camera-lab-modes button {
    min-height: 27px;
  }

  .camera-control-grid {
    gap: 4px;
  }

  .camera-control {
    padding: 4px 6px;
    gap: 1px 5px;
  }

  .camera-control b {
    font-size: 9.5px;
  }

  .camera-control output {
    min-width: 43px;
    padding: 3px 4px;
    font-size: 6px;
  }

  .camera-lab-actions {
    gap: 4px;
  }

  .camera-lab-actions button {
    min-height: 34px;
    padding: 5px 6px;
    font-size: 5.5px;
  }
}

@media (max-height: 580px) {
  #settings-sheet.camera-lab-active {
    height: calc(100dvh - var(--safe-top));
    max-height: calc(100dvh - var(--safe-top));
  }

  .camera-lab-header span,
  .camera-control small {
    display: none;
  }

  .camera-control-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
}

/* Preschool power-up board: pictures and one short action per card. */
#shop-sheet .shop-status {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  margin-bottom: 7px;
}

#shop-sheet .shop-helper {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border: 2px solid #f4ce55;
  border-radius: 12px;
  background: #07584f;
  box-shadow: 0 3px 0 #613c2d;
  color: #fff5cf;
}

#shop-sheet .shop-helper > span {
  flex: 0 0 auto;
  font-size: 23px;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .2));
}

#shop-sheet .shop-helper div,
#shop-sheet .shop-helper strong,
#shop-sheet .shop-helper small {
  display: block;
  min-width: 0;
}

#shop-sheet .shop-helper strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#shop-sheet .shop-helper small {
  margin-top: 1px;
  overflow: hidden;
  color: rgba(255, 245, 207, .82);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#shop-sheet .shop-wallet {
  display: grid;
  min-width: 96px;
  margin: 0;
  padding: 5px 9px;
  align-content: center;
  border: 2px solid rgba(21, 60, 54, .25);
  border-radius: 12px;
  background: #f4d45f;
  line-height: 1;
}

#shop-sheet .shop-wallet span { font-size: 10px; }
#shop-sheet .shop-wallet strong { margin-top: 2px; font-size: 20px; }

#shop-sheet .shop-grid {
  grid-template-rows: repeat(2, minmax(0, 1fr)) minmax(80px, .68fr);
}

#shop-sheet .kid-upgrade-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-width: 2px;
  background:
    radial-gradient(circle at 88% 10%, rgba(244, 206, 85, .28), transparent 25%),
    #fff6d9;
}

#shop-sheet .kid-upgrade-card .upgrade-icon,
#shop-sheet .kid-launcher-card .upgrade-icon {
  width: 38px;
  height: 38px;
  border: 2px solid #ffe998;
  background: #08796d;
  box-shadow: 0 3px 0 #13483f;
  font-size: 21px;
}

#shop-sheet .kid-upgrade-card .upgrade-level,
#shop-sheet .kid-launcher-card .upgrade-level {
  padding: 3px 5px;
  border-radius: 999px;
  background: #f7d966;
  color: #783c2f;
  font-size: 10px;
  letter-spacing: .06em;
}

#shop-sheet .kid-upgrade-card h3,
#shop-sheet .kid-launcher-card h3 {
  margin: 6px 0 2px;
  color: #123f39;
  font-size: clamp(14px, 4vw, 19px);
  line-height: .94;
}

#shop-sheet .upgrade-result {
  display: block;
  color: #bd4934;
  font-family: "Rockwell Extra Bold", "Cooper Black", Georgia, serif;
  font-size: clamp(9px, 2.7vw, 13px);
  line-height: 1;
}

#shop-sheet .kid-upgrade-card p,
#shop-sheet .kid-launcher-card p {
  min-height: 0;
  margin: 3px 0 5px;
  color: rgba(21, 60, 54, .72);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .06em;
  line-height: 1.05;
  white-space: normal;
}

#shop-sheet .kid-upgrade-card .upgrade-buy { margin-top: auto; }

#shop-sheet .upgrade-buy {
  min-height: 44px;
  border: 2px solid rgba(255, 255, 255, .72);
  border-radius: 11px;
  font-size: 11px;
  letter-spacing: .05em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}

#shop-sheet .upgrade-buy.can-buy {
  background: #078a72;
  box-shadow: 0 4px 0 #075248, 0 0 0 2px rgba(244, 206, 85, .5);
  color: white;
}

#shop-sheet .upgrade-buy.needs-cash {
  background: #f2be45;
  box-shadow: 0 4px 0 #b76531;
  color: #573429;
  text-shadow: none;
}

#shop-sheet .kid-launcher-card {
  display: grid;
  min-height: 0;
  grid-template-columns: auto minmax(0, 1fr) minmax(105px, .62fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 3px 8px;
  padding: 7px 8px;
  border: 2px solid #bd4934;
  background:
    radial-gradient(circle at 15% 50%, rgba(244, 206, 85, .44), transparent 30%),
    #fff0c3;
}

#shop-sheet .kid-launcher-card .upgrade-topline {
  grid-row: 1 / 3;
  align-self: center;
  flex-direction: column;
}

#shop-sheet .kid-launcher-card h3 { margin: 0; }
#shop-sheet .kid-launcher-card p { margin: 0; }
#shop-sheet .kid-launcher-card .upgrade-buy {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: stretch;
}

#shop-sheet .rocket-save-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(21, 60, 54, .14);
}

#shop-sheet .rocket-save-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f3bd42, #ef6546);
}

@media (hover: hover) and (pointer: fine) {
  #shop-sheet .shop-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) minmax(84px, .52fr);
  }

  #shop-sheet .kid-launcher-card { grid-column: 1 / -1; }
}

@media (max-width: 699px) {
  #shop-sheet {
    width: 100%;
    border-radius: 22px 22px 0 0;
  }

  #shop-sheet .sheet-header h2 { font-size: clamp(22px, 7vw, 29px); }
}

@media (max-height: 680px) {
  #shop-sheet .sheet-handle { display: none; }
  #shop-sheet .sheet-header { min-height: 31px; }
  #shop-sheet .sheet-header span { display: none; }
  #shop-sheet .sheet-header h2 { margin: 0 0 3px; font-size: 18px; }
  #shop-sheet .shop-status { margin-bottom: 4px; }
  #shop-sheet .shop-helper { padding-block: 4px; }
  #shop-sheet .shop-helper > span { font-size: 18px; }
  #shop-sheet .shop-wallet { position: static; padding-block: 4px; }
  #shop-sheet .shop-grid { gap: 4px; grid-template-rows: repeat(2, minmax(0, 1fr)) minmax(66px, .58fr); }
  #shop-sheet .kid-upgrade-card { padding: 5px; }
  #shop-sheet .kid-upgrade-card .upgrade-icon { width: 29px; height: 29px; font-size: 16px; }
  #shop-sheet .kid-upgrade-card h3 { margin-top: 3px; font-size: 12px; }
  #shop-sheet .kid-upgrade-card p { display: none; }
  #shop-sheet .upgrade-buy { min-height: 44px; padding: 5px 3px; font-size: 10.5px; }
  #shop-sheet .kid-launcher-card { padding: 4px 6px; }
  #shop-sheet .kid-launcher-card .upgrade-icon { width: 30px; height: 30px; font-size: 17px; }
  #shop-sheet .kid-launcher-card p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #shop-sheet .upgrade-buy.can-buy { animation: none; }
}

/* v51 preschool HUD and controls: large picture-first counters, one centered
   control dock, and a visible trip-to-recycle signal for every full basket. */
.top-hud {
  gap: 8px;
}

.mini-map {
  width: clamp(150px, 42vw, 180px);
  padding: 8px 9px 9px;
  border: 2px solid rgba(255, 238, 166, .92);
  border-radius: 16px 22px 18px 22px;
  box-shadow:
    0 7px 0 rgba(53, 38, 28, .38),
    0 14px 32px rgba(1, 28, 25, .38),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}

.mini-map-topline {
  gap: 7px;
  margin-bottom: 5px;
  font-size: 8px;
  letter-spacing: .11em;
}

.mini-map-topline span {
  width: 25px;
  height: 25px;
  border-width: 2px;
  font-size: 10px;
}

.mini-map-canvas {
  height: 64px;
  border-width: 2px;
}

.mini-map-marker {
  stroke-width: 2;
  filter: drop-shadow(0 0 2px rgba(255, 247, 216, .9));
}

.mini-map-footer {
  gap: 5px;
  margin-top: 6px;
}

.mini-map-footer > strong {
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
}

.mini-map-footer .kid-stat-picture {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid rgba(255, 241, 178, .72);
  border-radius: 9px;
  background: rgba(255, 255, 255, .1);
  font-size: 18px;
}

.mini-map-count {
  display: grid;
  min-width: 0;
  gap: 2px;
  line-height: .92;
}

.mini-map-footer .mini-map-count b {
  color: #fff8df;
  font-size: clamp(20px, 5.5vw, 25px);
  text-shadow: 0 2px 0 rgba(0, 29, 26, .7);
}

.mini-map-footer .mini-map-count small {
  color: #ffe477;
  font-size: 7px;
  letter-spacing: .08em;
}

.mini-map .mission-track {
  height: 6px;
  border: 1px solid rgba(255, 255, 255, .12);
}

.top-readouts {
  gap: 6px;
}

.top-actions {
  gap: 7px;
}

.top-actions .round-button {
  width: 42px;
  height: 42px;
  border-width: 2px;
  font-size: 21px;
}

.player-stats {
  width: clamp(168px, 45vw, 198px);
  gap: 6px;
  grid-template-columns: .9fr 1.1fr;
}

.cash-chip,
.top-hud .bag-chip {
  min-height: 68px;
  border-width: 2px;
  box-shadow: 0 6px 0 rgba(53, 38, 28, .32), 0 13px 25px rgba(2, 27, 24, .3);
}

.cash-chip {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 8px 7px;
  border-radius: 15px 7px 15px 18px;
}

.cash-chip > .kid-stat-picture,
.top-hud .bag-chip > .kid-stat-picture {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 2px solid rgba(255, 231, 116, .72);
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  color: inherit;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 1;
}

.kid-stat-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
  line-height: 1;
}

.cash-chip > .kid-stat-copy {
  display: grid;
  color: inherit;
  letter-spacing: 0;
}

.cash-chip .kid-stat-copy small,
.top-hud .bag-chip .kid-stat-copy small {
  display: block;
  color: #ffe477;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .09em;
  white-space: nowrap;
}

.cash-chip .kid-stat-copy strong,
.top-hud .bag-chip .kid-stat-copy strong {
  margin: 0;
  font-size: clamp(20px, 5.5vw, 26px);
  line-height: .92;
  text-shadow: 0 2px 0 rgba(0, 32, 29, .5);
}

.top-hud .bag-chip {
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: 1fr 6px;
  align-items: center;
  gap: 4px 6px;
  padding: 8px 7px 7px;
  border-radius: 7px 15px 18px 15px;
}

.top-hud .bag-chip > .kid-stat-picture {
  border-color: rgba(15, 108, 94, .28);
  background: rgba(7, 112, 99, .09);
}

.top-hud .bag-chip .kid-stat-copy small {
  color: #1c5b52;
}

.top-hud .bag-chip .kid-stat-copy strong {
  color: #113f39;
  text-shadow: none;
}

.top-hud .bag-chip .kid-stat-copy strong span,
.top-hud .bag-chip .kid-stat-copy strong b:last-child {
  font-size: 12px;
}

.top-hud .bag-meter {
  grid-column: 1 / -1;
  height: 6px;
  margin: 0;
}

.top-hud .bag-chip.is-full {
  border-color: #fff19a;
  background: linear-gradient(145deg, #ffdf67, #ff8d4d);
  animation: preschool-basket-full .8s ease-in-out infinite alternate;
}

.top-hud .bag-chip.is-full .kid-stat-copy small,
.top-hud .bag-chip.is-full .kid-stat-copy strong {
  color: #5d2d24;
}

@keyframes preschool-basket-full {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(2px) scale(1.035); }
}

.auto-walk-guide[hidden] {
  display: none;
}

.auto-walk-guide {
  position: absolute;
  z-index: 35;
  top: calc(174px + var(--safe-top));
  left: 50%;
  display: grid;
  min-width: min(88vw, 330px);
  padding: 10px 14px 9px;
  place-items: center;
  border: 3px solid #fff0a1;
  border-radius: 20px;
  color: #fff8da;
  background: linear-gradient(145deg, rgba(7, 119, 101, .98), rgba(3, 63, 57, .98));
  box-shadow: 0 6px 0 #9b4932, 0 18px 42px rgba(1, 25, 22, .42);
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.auto-walk-pictures {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 25px;
  line-height: 1;
}

.auto-walk-pictures i {
  color: #ffe06a;
  font-style: normal;
  font-size: 18px;
  animation: recycle-arrow 760ms ease-in-out infinite;
}

.auto-walk-pictures i:nth-of-type(2) { animation-delay: 110ms; }
.auto-walk-pictures i:nth-of-type(3) { animation-delay: 220ms; }

.auto-walk-bin {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  border: 2px solid #fff4bf;
  border-radius: 10px;
  background: #f15f43;
  box-shadow: 0 3px 0 #8d352b;
}

.auto-walk-guide > strong {
  margin-top: 5px;
  font-family: "Rockwell Extra Bold", "Cooper Black", Georgia, serif;
  font-size: 17px;
  letter-spacing: .025em;
}

.auto-walk-guide > small {
  margin-top: 2px;
  color: #ffe477;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .09em;
}

@keyframes recycle-arrow {
  0%, 100% { opacity: .34; transform: translateX(-3px) scale(.9); }
  50% { opacity: 1; transform: translateX(3px) scale(1.12); }
}

.control-hint {
  position: fixed;
  bottom: calc(18px + var(--safe-bottom));
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  width: 96px;
  min-height: 62px;
  padding: 7px;
  border: 2px solid rgba(255, 239, 174, .92);
  border-radius: 17px;
  color: #fff8dc;
  background: linear-gradient(145deg, rgba(6, 94, 82, .94), rgba(3, 54, 49, .94));
  box-shadow: 0 5px 0 rgba(100, 53, 38, .72), 0 11px 25px rgba(1, 26, 23, .3);
  opacity: 1;
  transform: translateX(-50%);
  transition: opacity 140ms ease, transform 140ms ease;
}

.control-zone[data-control="look"] .control-hint,
.control-zone-left .control-hint,
.control-zone-right .control-hint {
  bottom: calc(18px + var(--safe-bottom));
}

.control-zone-left .control-hint {
  right: auto;
  left: calc(50% - 92px);
}

.control-zone-right .control-hint {
  right: auto;
  left: calc(50% + 92px);
}

.control-hint > .control-picture {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 2px solid rgba(255, 227, 108, .72);
  border-radius: 10px;
  background: rgba(255, 255, 255, .11);
  font-size: 19px;
  line-height: 1;
}

.control-hint > span {
  display: grid;
  min-width: 0;
  gap: 2px;
  text-align: left;
}

.control-hint .control-title {
  color: white;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .03em;
  line-height: 1;
}

.control-hint small {
  color: #ffe477;
  font-size: 8px;
  letter-spacing: .09em;
  line-height: 1;
}

.control-zone.control-used .control-hint {
  opacity: 1;
}

.control-zone.control-used.active .control-hint,
#game-shell.touch-control-active .control-hint,
#game-shell.touch-control-active .swap-shortcut,
#game-shell.auto-walking .control-hint,
#game-shell.auto-walking .swap-shortcut {
  opacity: 0;
  transform: translateX(-50%) translateY(8px) scale(.88);
  pointer-events: none;
}

.swap-shortcut {
  bottom: calc(18px + var(--safe-bottom));
  gap: 0;
  width: 72px;
  min-height: 62px;
  padding: 6px 4px;
  border: 2px solid rgba(255, 239, 174, .92);
  border-radius: 17px;
  background: linear-gradient(145deg, #f6c54b, #ef7650);
  box-shadow: 0 5px 0 #8f3b31, 0 11px 25px rgba(1, 26, 23, .3);
  color: #173f38;
  transition: opacity 140ms ease, transform 140ms ease;
}

.swap-shortcut span {
  font-size: 22px;
}

.swap-shortcut strong {
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .04em;
  line-height: 1;
}

.swap-shortcut small {
  color: #71352b;
  font-size: 7px;
  letter-spacing: .08em;
}

#shop-sheet .kid-upgrade-card[data-upgrade-type="runner"] {
  border-color: #ef6d49;
  background:
    radial-gradient(circle at 88% 10%, rgba(244, 206, 85, .42), transparent 28%),
    linear-gradient(145deg, #fff7db, #ffe3a0);
}

@media (max-width: 359px) {
  .mini-map { width: 140px; padding: 7px; }
  .mini-map-canvas { height: 55px; }
  .player-stats { width: 158px; gap: 4px; }
  .cash-chip,
  .top-hud .bag-chip { min-height: 61px; padding: 6px 5px; }
  .cash-chip { grid-template-columns: 24px minmax(0, 1fr); }
  .top-hud .bag-chip { grid-template-columns: 24px minmax(0, 1fr); }
  .cash-chip > .kid-stat-picture,
  .top-hud .bag-chip > .kid-stat-picture { width: 24px; height: 24px; font-size: 16px; }
  .cash-chip .kid-stat-copy strong,
  .top-hud .bag-chip .kid-stat-copy strong { font-size: 18px; }
  .cash-chip .kid-stat-copy small,
  .top-hud .bag-chip .kid-stat-copy small { font-size: 6.5px; }
  .top-actions .round-button { width: 37px; height: 37px; font-size: 18px; }
  .control-hint { width: 86px; min-height: 57px; padding: 5px; grid-template-columns: 27px 1fr; }
  .control-zone-left .control-hint { left: calc(50% - 82px); }
  .control-zone-right .control-hint { left: calc(50% + 82px); }
  .control-hint > .control-picture { width: 27px; height: 27px; font-size: 16px; }
  .control-hint .control-title { font-size: 11px; }
  .swap-shortcut { width: 65px; min-height: 57px; }
  .auto-walk-guide { top: calc(162px + var(--safe-top)); min-width: min(94vw, 310px); }
}

@media (orientation: landscape) and (max-height: 520px) {
  .mini-map { width: 132px; padding: 5px 6px; }
  .mini-map-canvas { height: 42px; }
  .mini-map-topline span { width: 20px; height: 20px; }
  .mini-map-footer .kid-stat-picture { width: 24px; height: 24px; font-size: 15px; }
  .mini-map-footer .mini-map-count b { font-size: 18px; }
  .player-stats { width: 170px; }
  .cash-chip,
  .top-hud .bag-chip { min-height: 56px; padding-block: 5px; }
  .cash-chip .kid-stat-copy strong,
  .top-hud .bag-chip .kid-stat-copy strong { font-size: 19px; }
  .auto-walk-guide { top: calc(92px + var(--safe-top)); min-width: 280px; padding-block: 7px; }
  .auto-walk-pictures { font-size: 20px; }
  .auto-walk-bin { width: 31px; height: 31px; }
  .auto-walk-guide > strong { font-size: 14px; }
  .control-hint,
  .swap-shortcut { bottom: calc(8px + var(--safe-bottom)); min-height: 52px; }
}

@media (hover: hover) and (pointer: fine) and (min-width: 700px) {
  .mini-map { width: 180px; }
  .player-stats { width: 198px; }
}

@media (prefers-reduced-motion: reduce) {
  .top-hud .bag-chip.is-full,
  .auto-walk-pictures i {
    animation: none;
  }
}

/* v52 collision-safe preschool counters: pictures stay beside the labels,
   while the live numbers get a complete row and never sit beneath a sibling. */
.player-stats {
  width: clamp(176px, 47vw, 224px);
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .95fr);
}

.top-hud .cash-chip,
.top-hud .bag-chip {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 7px 7px 6px;
}

.top-hud .cash-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.top-hud .bag-chip {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 6px;
}

.top-hud .cash-chip > .kid-stat-picture,
.top-hud .bag-chip > .kid-stat-picture {
  position: absolute;
  z-index: 1;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  border-width: 1.5px;
  border-radius: 7px;
  font-size: 0;
}

.top-hud .cash-chip > .kid-stat-picture::after {
  content: "$";
  color: #ffe06a;
  font-family: "Rockwell Extra Bold", "Cooper Black", Georgia, serif;
  font-size: 15px;
  line-height: 1;
}

.top-hud .bag-chip > .kid-stat-picture::after {
  content: "▱";
  color: #126c61;
  font-family: Georgia, serif;
  font-size: 19px;
  line-height: 1;
  transform: rotate(-7deg);
}

.top-hud .cash-chip .kid-stat-copy,
.top-hud .bag-chip .kid-stat-copy {
  width: 100%;
  min-width: 0;
  align-content: center;
}

.top-hud .cash-chip .kid-stat-copy small,
.top-hud .bag-chip .kid-stat-copy small {
  min-height: 22px;
  padding-left: 27px;
  overflow: hidden;
  font-size: 7.5px;
  line-height: 22px;
  text-overflow: clip;
}

.top-hud .cash-chip .kid-stat-copy strong,
.top-hud .bag-chip .kid-stat-copy strong {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 3px;
  font-size: clamp(16px, 4.65vw, 22px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
  white-space: nowrap;
}

.top-hud .bag-chip .kid-stat-copy strong span,
.top-hud .bag-chip .kid-stat-copy strong b:last-child {
  font-size: .58em;
  letter-spacing: -.02em;
}

.top-hud .bag-chip.is-full {
  z-index: 0;
  animation: preschool-basket-full-glow .8s ease-in-out infinite alternate;
  transform: none;
}

@keyframes preschool-basket-full-glow {
  from {
    transform: none;
    box-shadow: 0 6px 0 rgba(53, 38, 28, .32), 0 13px 25px rgba(2, 27, 24, .3);
  }
  to {
    transform: none;
    box-shadow: 0 6px 0 rgba(125, 52, 35, .48), 0 0 0 4px rgba(255, 239, 119, .36), 0 16px 34px rgba(87, 42, 22, .4);
  }
}

@media (max-width: 359px) {
  .mini-map { width: 132px; }
  .player-stats { width: calc(100vw - 158px); }
  .top-hud .cash-chip,
  .top-hud .bag-chip { padding-inline: 5px; }
  .top-hud .cash-chip .kid-stat-copy strong,
  .top-hud .bag-chip .kid-stat-copy strong { font-size: 16px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .player-stats { width: min(216px, 43vw); }
}

@media (prefers-reduced-motion: reduce) {
  .top-hud .bag-chip.is-full {
    animation: none;
    transform: none;
  }
}

/* Thumb-reach layout (Joel 7/19 markup): in touch mode the MOVE and LOOK
   cards ride the side edges at resting-thumb height, and the money and basket
   chips drop to the lower corners right below them. Desktop keeps the top bar.
   Keyed off data-pointer-lock="touch" so it always matches the game's own
   touch detection (usesDesktopPointerControls), never a diverging media query. */
#game-shell[data-pointer-lock="touch"] .control-zone .control-hint,
#game-shell[data-pointer-lock="touch"] .control-zone[data-control="look"] .control-hint {
  top: 44%;
  bottom: auto;
  transform: none;
}

#game-shell[data-pointer-lock="touch"] .control-zone.control-zone-left .control-hint {
  left: calc(10px + var(--safe-left));
  right: auto;
}

#game-shell[data-pointer-lock="touch"] .control-zone.control-zone-right .control-hint {
  right: calc(10px + var(--safe-right));
  left: auto;
}

#game-shell[data-pointer-lock="touch"] .cash-chip {
  position: fixed;
  left: calc(10px + var(--safe-left));
  top: 71%;
  z-index: 13;
}

#game-shell[data-pointer-lock="touch"] .bag-chip {
  position: fixed;
  right: calc(10px + var(--safe-right));
  top: 71%;
  z-index: 13;
}


/* Arcade layer: quick shift, combo badge, golden jackpot styling. */
.start-button-shift {
  margin-top: 8px;
  background: linear-gradient(135deg, #0a7d6f, #06584f);
  box-shadow: 0 6px 0 #063f39, 0 12px 24px rgba(4, 46, 41, 0.24);
}

.combo-badge {
  position: fixed;
  right: 18px;
  top: 152px;
  z-index: 14;
  padding: 6px 12px;
  border: 2px solid #ffe37a;
  border-radius: 999px;
  background: linear-gradient(145deg, #f2a13b, #e0602f);
  color: #fff8dc;
  font-size: 19px;
  font-weight: 1000;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 0 rgba(104, 47, 25, 0.65), 0 8px 18px rgba(30, 15, 6, 0.3);
  pointer-events: none;
}

#game-shell[data-pointer-lock="touch"] .combo-badge {
  right: calc(10px + var(--safe-right));
  top: 63%;
}

.combo-badge.pop {
  animation: combo-pop 320ms ease;
}

@keyframes combo-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.32) rotate(-3deg); }
  100% { transform: scale(1); }
}

.shift-timer {
  position: fixed;
  left: 50%;
  top: calc(12px + var(--safe-top, 0px));
  z-index: 14;
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 7px 16px;
  border: 2px solid #ffe37a;
  border-radius: 14px;
  background: rgba(4, 53, 48, 0.92);
  color: #fff8dc;
  transform: translateX(-50%);
  box-shadow: 0 5px 0 rgba(3, 34, 30, 0.7), 0 10px 22px rgba(1, 26, 23, 0.3);
  pointer-events: none;
}

.shift-timer b {
  font-size: 24px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.shift-timer small {
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: 0.12em;
  color: #ffe477;
}

.shift-timer.urgent b {
  color: #ff8d6b;
}

.shift-results {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(2, 28, 25, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.shift-results[hidden] {
  display: none;
}

.shift-results-card {
  display: grid;
  place-items: center;
  gap: 6px;
  width: min(86vw, 340px);
  padding: 22px 18px 18px;
  border: 3px solid #ffe37a;
  border-radius: 22px;
  background: linear-gradient(160deg, #fdf4d8, #f6e2ae);
  color: #143f39;
  text-align: center;
  box-shadow: 0 10px 0 rgba(104, 63, 29, 0.5), 0 24px 48px rgba(1, 22, 19, 0.45);
}

.shift-stars {
  font-size: 38px;
  line-height: 1;
}

.shift-results-card h2 {
  margin: 0;
  font-size: 30px;
  letter-spacing: 0.04em;
}

.shift-results-card p {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.shift-results-card p b {
  font-size: 21px;
}

.shift-results-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  width: 100%;
  margin-top: 9px;
}

.shift-results-actions button {
  padding: 11px 8px;
  border: 2px solid #fff1c9;
  border-radius: 12px;
  font-weight: 1000;
  letter-spacing: 0.05em;
  color: white;
  cursor: pointer;
}

#shift-again {
  background: linear-gradient(135deg, var(--coral), #d74333);
  box-shadow: 0 5px 0 #8d342c;
}

#shift-continue {
  background: linear-gradient(135deg, #0a7d6f, #06584f);
  box-shadow: 0 5px 0 #063f39;
}

/* Short-landscape companion (review fix): the thumb-reach chips would stack
   onto the shrunken grab button, so landscape returns them to the top bar and
   tucks the combo badge above the button instead. */
@media (orientation: landscape) and (max-height: 520px) {
  #game-shell[data-pointer-lock="touch"] .cash-chip,
  #game-shell[data-pointer-lock="touch"] .bag-chip {
    position: static;
    top: auto;
    left: auto;
    right: auto;
  }

  #game-shell[data-pointer-lock="touch"] .combo-badge {
    top: auto;
    bottom: calc(92px + var(--safe-bottom));
  }
}

/* v60 Fiesta sticker-book shop: one short idea per card, large sentence-case
   type, illustrated SVG stickers, and unmistakable Buy / Save states. */
#shop-sheet {
  top: max(8px, var(--safe-top));
  width: min(820px, 100%);
  max-height: none;
  padding: 9px calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left));
  overflow: hidden;
  border: 2px solid #174f47;
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  background:
    radial-gradient(circle at 7% 9%, rgba(239, 101, 75, .15) 0 3px, transparent 3.5px),
    radial-gradient(circle at 92% 13%, rgba(16, 148, 131, .17) 0 4px, transparent 4.5px),
    linear-gradient(rgba(255, 255, 255, .28) 1px, transparent 1px),
    #fff3d2;
  background-size: auto, auto, 100% 32px, auto;
  box-shadow: 0 -18px 60px rgba(0, 34, 29, .44), inset 0 1px 0 rgba(255, 255, 255, .85);
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
}

#shop-sheet::before,
#shop-sheet::after {
  position: absolute;
  z-index: 0;
  top: 21px;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  content: "";
  pointer-events: none;
}

#shop-sheet::before {
  left: 42%;
  background: #14a891;
  box-shadow: -32px 13px 0 #f1c243, 43px 6px 0 #ef654b;
  rotate: -14deg;
}

#shop-sheet::after {
  right: 19%;
  background: #ef654b;
  box-shadow: 28px 15px 0 #18a78f, -43px 5px 0 #f1c243;
  rotate: 17deg;
}

#shop-sheet .sheet-handle {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 6px;
  margin-bottom: 6px;
  background: rgba(7, 95, 87, .24);
}

#shop-sheet .sheet-header {
  position: relative;
  z-index: 1;
  min-height: 55px;
  align-items: center;
  padding: 0 3px;
}

#shop-sheet .sheet-header > div {
  display: block;
  min-width: 0;
}

#shop-sheet .sheet-header span {
  display: block;
  color: #c74d38;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1;
}

#shop-sheet .sheet-header h2 {
  margin: 3px 0 5px;
  color: #0b4f48;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: clamp(28px, 7.6vw, 46px);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .96;
}

#shop-sheet .sheet-close {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border: 2px solid rgba(7, 95, 87, .18);
  background: #fff9e6;
  box-shadow: 0 4px 0 rgba(118, 81, 42, .24), 0 8px 20px rgba(7, 62, 55, .12);
  color: #075f57;
  font-family: inherit;
  font-size: 31px;
  font-weight: 700;
}

#shop-sheet .sheet-close:active {
  translate: 0 2px;
  box-shadow: 0 2px 0 rgba(118, 81, 42, .24);
}

#shop-sheet .shop-status {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  margin: 3px 1px 10px;
}

#shop-sheet .shop-helper {
  display: grid;
  min-width: 0;
  min-height: 58px;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 11px 7px 8px;
  border: 2px solid #ffd75c;
  border-radius: 19px;
  background: linear-gradient(145deg, #08796d, #056159);
  box-shadow: 0 5px 0 #073f39, 0 9px 18px rgba(5, 72, 64, .18);
  color: #fff8db;
}

#shop-sheet .shop-helper > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: #f6c94e;
  color: #075f57;
  filter: none;
  font-size: 22px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
}

#shop-sheet .shop-helper div,
#shop-sheet .shop-helper strong,
#shop-sheet .shop-helper small {
  display: block;
  min-width: 0;
}

#shop-sheet .shop-helper strong {
  overflow: hidden;
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#shop-sheet .shop-helper small {
  margin-top: 3px;
  overflow: hidden;
  color: rgba(255, 248, 219, .86);
  font-size: clamp(11px, 2.85vw, 13px);
  font-weight: 650;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#shop-sheet .shop-wallet {
  display: grid;
  min-width: 116px;
  min-height: 58px;
  margin: 0;
  padding: 7px 12px;
  align-content: center;
  border: 2px solid #d49a28;
  border-radius: 19px;
  background: linear-gradient(145deg, #ffe16a, #f4c745);
  box-shadow: 0 5px 0 #b87824, 0 9px 18px rgba(113, 72, 26, .14);
  color: #15453e;
  line-height: 1;
}

#shop-sheet .shop-wallet span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

#shop-sheet .shop-wallet strong {
  margin-top: 4px;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: clamp(22px, 5.8vw, 28px);
  font-weight: 900;
  letter-spacing: -.04em;
}

#shop-sheet .shop-grid {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: auto;
  align-content: start;
  gap: 10px;
  padding: 2px 2px calc(8px + var(--safe-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-bottom: calc(12px + var(--safe-bottom));
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

#shop-sheet .upgrade-card,
#shop-sheet .upgrade-card:nth-child(2),
#shop-sheet .upgrade-card:nth-child(3) {
  transform: none;
}

#shop-sheet .kid-upgrade-card {
  display: flex;
  min-height: 184px;
  padding: 10px;
  overflow: visible;
  flex-direction: column;
  justify-content: flex-start;
  border: 2px solid rgba(7, 95, 87, .2);
  border-radius: 21px 24px 19px 23px;
  background:
    radial-gradient(circle at 88% 9%, rgba(244, 194, 65, .2), transparent 27%),
    linear-gradient(155deg, rgba(255, 255, 255, .92), rgba(255, 247, 220, .9));
  box-shadow: 0 6px 0 rgba(104, 78, 41, .18), 0 10px 24px rgba(31, 71, 61, .08), inset 0 0 0 1px rgba(255, 255, 255, .9);
}

#shop-sheet .kid-upgrade-card.is-ready {
  border-color: #13a083;
  box-shadow: 0 6px 0 #087063, 0 11px 24px rgba(7, 112, 99, .13), inset 0 0 0 1px rgba(255, 255, 255, .94);
}

#shop-sheet .kid-upgrade-card.is-locked {
  border-color: #c8b98f;
  background: linear-gradient(155deg, #fffaf0, #eee5ca);
}

#shop-sheet .kid-upgrade-card[data-upgrade-type="runner"] {
  border-color: #ef7456;
  background:
    radial-gradient(circle at 88% 9%, rgba(244, 194, 65, .26), transparent 28%),
    linear-gradient(150deg, #fffaf0, #ffe9c1);
}

#shop-sheet .upgrade-topline {
  display: flex;
  min-height: 54px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

#shop-sheet .kid-upgrade-card .upgrade-icon {
  display: grid;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid #fff2b1;
  border-radius: 18px 22px 17px 21px;
  background: #e9fbf2;
  box-shadow: 0 4px 0 #0a6259, 0 7px 14px rgba(5, 83, 73, .12);
  font-size: 0;
  rotate: -2deg;
}

#shop-sheet .kid-upgrade-card:nth-child(even) .upgrade-icon {
  rotate: 2deg;
}

#shop-sheet .upgrade-icon svg,
#shop-sheet .launcher-art svg {
  display: block;
  width: 48px;
  height: 48px;
}

#shop-sheet .upgrade-price {
  display: inline-flex;
  min-width: 54px;
  min-height: 33px;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  border: 2px solid #e2aa32;
  border-radius: 999px;
  background: #ffe16a;
  box-shadow: 0 3px 0 #bd7825;
  color: #17473f;
  font-size: clamp(14px, 3.9vw, 17px);
  font-weight: 900;
  line-height: 1;
}

#shop-sheet .kid-upgrade-card h3 {
  margin: 10px 0 2px;
  color: #0d4f48;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: clamp(17px, 4.8vw, 22px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .98;
}

#shop-sheet .upgrade-benefit {
  display: block;
  min-height: 31px;
  margin: 3px 0 7px;
  color: #355f58;
  font-size: clamp(13px, 3.45vw, 15px);
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.1;
  white-space: normal;
}

#shop-sheet .upgrade-result {
  display: flex;
  min-height: 27px;
  margin: 0 0 8px;
  align-items: center;
  gap: 6px;
  color: #8f4a38;
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
  font-size: clamp(13px, 3.6vw, 16px);
  font-weight: 800;
  line-height: 1;
}

#shop-sheet .upgrade-result span,
#shop-sheet .upgrade-result strong {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 4px 7px;
  border-radius: 9px;
}

#shop-sheet .upgrade-result span {
  background: #efe7cf;
  color: #5f6258;
}

#shop-sheet .upgrade-result strong {
  background: #fff0ad;
  color: #0b6f61;
}

#shop-sheet .upgrade-result b {
  color: #ef654b;
  font-size: 19px;
}

#shop-sheet .kid-upgrade-card .upgrade-buy {
  margin-top: auto;
}

#shop-sheet .upgrade-buy {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 9px 7px;
  border: 2px solid rgba(255, 255, 255, .78);
  border-radius: 15px;
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
  font-size: clamp(13px, 3.5vw, 16px);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.05;
  text-shadow: none;
}

#shop-sheet .upgrade-buy > span {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  font-size: 14px;
}

#shop-sheet .upgrade-buy strong {
  font: inherit;
}

#shop-sheet .upgrade-buy.can-buy {
  border-color: #b8f1ce;
  background: linear-gradient(145deg, #07866f, #05685d);
  box-shadow: 0 5px 0 #064a43, 0 9px 15px rgba(6, 92, 79, .18);
  color: #fff;
}

#shop-sheet .upgrade-buy.needs-cash,
#shop-sheet .upgrade-buy:disabled {
  border-color: #d0c29a;
  background: linear-gradient(145deg, #e6ddc0, #d4c9a8);
  box-shadow: 0 5px 0 #a99c77;
  color: #554f42;
  cursor: not-allowed;
  text-shadow: none;
}

#shop-sheet .upgrade-buy:disabled {
  opacity: 1;
  animation: none;
}

#shop-sheet .upgrade-buy:focus-visible,
#shop-sheet .sheet-close:focus-visible {
  outline: 4px solid #2587d8;
  outline-offset: 2px;
}

#shop-sheet .upgrade-buy.can-buy:active {
  translate: 0 3px;
  box-shadow: 0 2px 0 #064a43;
}

#shop-sheet .kid-launcher-card {
  display: grid;
  min-height: 132px;
  grid-column: 1 / -1;
  grid-template-columns: 68px minmax(0, 1fr) minmax(112px, 145px);
  grid-template-rows: 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 2px solid #ef654b;
  border-radius: 21px;
  background:
    radial-gradient(circle at 10% 50%, rgba(244, 194, 65, .35), transparent 25%),
    linear-gradient(145deg, #fff8dd, #ffe7ae);
  box-shadow: 0 6px 0 #a84938, 0 11px 24px rgba(102, 58, 37, .11);
}

#shop-sheet .launcher-art {
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  border: 2px solid #ffe574;
  border-radius: 20px 24px 19px 22px;
  background: #fff7cd;
  box-shadow: 0 4px 0 #0a6259;
  rotate: -2deg;
}

#shop-sheet .launcher-art svg {
  width: 58px;
  height: 58px;
}

#shop-sheet .launcher-copy {
  display: grid;
  min-width: 0;
  align-content: center;
}

#shop-sheet .launcher-kicker {
  color: #ba4937;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}

#shop-sheet .kid-launcher-card h3 {
  margin: 3px 0 2px;
  color: #0d4f48;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: clamp(17px, 4.6vw, 22px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1;
}

#shop-sheet .kid-launcher-card p {
  display: block;
  margin: 2px 0 7px;
  color: #4d655f;
  font-size: clamp(11.5px, 3vw, 13px);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.1;
  white-space: normal;
}

#shop-sheet .rocket-save-track {
  width: 100%;
  height: 9px;
  overflow: hidden;
  border: 1px solid rgba(7, 95, 87, .18);
  border-radius: 999px;
  background: #ded7bd;
  box-shadow: inset 0 1px 2px rgba(67, 51, 30, .15);
}

#shop-sheet .rocket-save-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #11a484, #f3c446, #ef654b);
}

#shop-sheet .rocket-progress-copy {
  display: flex;
  justify-content: space-between;
  gap: 7px;
  margin-top: 3px;
  color: #5c655d;
  font-size: 11.5px;
  line-height: 1;
}

#shop-sheet .rocket-progress-copy strong {
  color: #0a6d60;
  font-weight: 900;
}

#shop-sheet .kid-launcher-card .upgrade-buy {
  min-height: 72px;
  grid-column: 3;
  grid-row: 1;
  align-self: stretch;
}

#shop-sheet.open .kid-upgrade-card,
#shop-sheet.open .kid-launcher-card {
  animation: sticker-card-in 420ms cubic-bezier(.2, .85, .2, 1) both;
}

#shop-sheet.open .kid-upgrade-card:nth-child(2) { animation-delay: 45ms; }
#shop-sheet.open .kid-upgrade-card:nth-child(3) { animation-delay: 90ms; }
#shop-sheet.open .kid-upgrade-card:nth-child(4) { animation-delay: 135ms; }
#shop-sheet.open .kid-launcher-card { animation-delay: 180ms; }

@keyframes sticker-card-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (hover: hover) and (pointer: fine) {
  #shop-sheet .shop-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
  }

  #shop-sheet .kid-launcher-card {
    grid-column: 1 / -1;
  }
}

@media (max-height: 680px) {
  #shop-sheet {
    top: max(4px, var(--safe-top));
    padding-top: 5px;
  }

  #shop-sheet .sheet-handle {
    display: block;
    height: 5px;
    margin-bottom: 3px;
  }

  #shop-sheet .sheet-header {
    min-height: 48px;
  }

  #shop-sheet .sheet-header > div {
    display: block;
  }

  #shop-sheet .sheet-header span {
    display: block;
    font-size: 10px;
  }

  #shop-sheet .sheet-header h2 {
    margin-bottom: 2px;
    font-size: clamp(24px, 6.8vw, 34px);
  }

  #shop-sheet .sheet-close {
    width: 44px;
    height: 44px;
  }

  #shop-sheet .shop-status {
    margin-bottom: 7px;
  }

  #shop-sheet .shop-helper,
  #shop-sheet .shop-wallet {
    min-height: 54px;
  }

  #shop-sheet .shop-helper {
    padding-block: 6px;
  }

  #shop-sheet .shop-helper > span {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  #shop-sheet .kid-upgrade-card {
    min-height: 178px;
    padding: 9px;
  }

  #shop-sheet .kid-upgrade-card .upgrade-icon {
    width: 51px;
    height: 51px;
  }

  #shop-sheet .upgrade-icon svg {
    width: 44px;
    height: 44px;
  }

  #shop-sheet .kid-upgrade-card h3 {
    margin-top: 7px;
  }

  #shop-sheet .kid-upgrade-card p,
  #shop-sheet .kid-launcher-card p {
    display: block;
  }
}

@media (max-width: 350px) {
  #shop-sheet .shop-status {
    grid-template-columns: 1fr;
  }

  #shop-sheet .shop-wallet {
    min-height: 48px;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  #shop-sheet .shop-wallet strong {
    margin: 0;
  }

  #shop-sheet .shop-grid {
    grid-template-columns: 1fr;
  }

  #shop-sheet .kid-upgrade-card {
    min-height: 176px;
  }

  #shop-sheet .kid-launcher-card {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  #shop-sheet .kid-launcher-card .upgrade-buy {
    min-height: 52px;
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  #shop-sheet.open .kid-upgrade-card,
  #shop-sheet.open .kid-launcher-card,
  #shop-sheet .upgrade-buy.can-buy {
    animation: none;
  }
}

/* v67 clear-view mode: the world owns the full screen during auto-walk and recycling. */
#game-shell[data-hud-clear] > :not(#game-canvas):not(.world-tint):not(.sun-wash):not(.sr-only) {
  transition-property: opacity, visibility !important;
  transition-duration: 240ms, 0s !important;
  transition-timing-function: ease, linear !important;
}

#game-shell[data-hud-clear="auto-walk"] > :not(#game-canvas):not(.world-tint):not(.sun-wash):not(.sr-only),
#game-shell[data-hud-clear="recycle-ready"] > :not(#game-canvas):not(.world-tint):not(.sun-wash):not(.sr-only),
#game-shell[data-hud-clear="recycling"] > :not(#game-canvas):not(.world-tint):not(.sun-wash):not(.sr-only) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition-delay: 0s, 240ms !important;
}

#game-shell[data-hud-clear="restoring"] > :not(#game-canvas):not(.world-tint):not(.sun-wash):not(.sr-only) {
  transition-delay: 0s, 0s !important;
}

#game-shell[data-hud-clear="auto-walk"] > #game-canvas,
#game-shell[data-hud-clear="recycle-ready"] > #game-canvas,
#game-shell[data-hud-clear="recycling"] > #game-canvas {
  cursor: none;
}

#game-shell[data-deposit-cinematic="active"] > .world-tint {
  background:
    radial-gradient(circle at 50% 50%, transparent 34%, rgba(0, 31, 28, 0.34) 118%),
    linear-gradient(to bottom, rgba(255, 244, 183, 0.18), transparent 30%);
  mix-blend-mode: soft-light;
}

@media (prefers-reduced-motion: reduce) {
  #game-shell[data-hud-clear="auto-walk"] > :not(#game-canvas):not(.world-tint):not(.sun-wash):not(.sr-only),
  #game-shell[data-hud-clear="recycle-ready"] > :not(#game-canvas):not(.world-tint):not(.sun-wash):not(.sr-only),
  #game-shell[data-hud-clear="recycling"] > :not(#game-canvas):not(.world-tint):not(.sun-wash):not(.sr-only) {
    transition-duration: 1ms, 0s !important;
    transition-delay: 0s, 1ms !important;
  }
}

/* v68 all-in-one mini-map dashboard: swept pieces, spendable money, and basket
   capacity now share one compact top-left instrument instead of floating as
   separate bubbles around the play field. */
.mini-map {
  width: min(224px, calc(100vw - 112px));
  padding: 8px 9px 9px;
}

.mini-map-canvas {
  height: 58px;
}

.mini-map-footer {
  gap: 5px;
  margin-top: 6px;
}

.mini-map-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .95fr 1.12fr 1fr;
  overflow: hidden;
  border: 1px solid rgba(255, 236, 165, .4);
  border-radius: 12px;
  background: rgba(1, 40, 36, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.mini-map-stats > .mini-map-stat {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: 3px;
  width: auto;
  min-width: 0;
  min-height: 50px;
  margin: 0;
  padding: 6px 4px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff8df;
  line-height: 1;
}

.mini-map-stats > .mini-map-stat + .mini-map-stat {
  border-left: 1px solid rgba(255, 236, 165, .22);
}

.mini-map-stats > .cash-chip {
  background: rgba(244, 198, 75, .06);
}

.mini-map-stats > .bag-chip {
  grid-template-columns: 20px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 4px;
  background: rgba(24, 169, 157, .07);
}

.top-hud .mini-map-stats .mini-map-stat > .kid-stat-picture {
  position: static;
  z-index: auto;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid rgba(255, 238, 174, .35);
  border-radius: 7px;
  background: rgba(255, 255, 255, .08);
  color: inherit;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1;
}

.mini-map-stats .cash-chip > .kid-stat-picture::after,
.mini-map-stats .bag-chip > .kid-stat-picture::after {
  content: none;
}

.mini-map-stats .kid-stat-copy,
.mini-map-stats .mini-map-count {
  display: grid;
  width: 100%;
  min-width: 0;
  align-content: center;
  gap: 2px;
  color: inherit;
  line-height: 1;
  text-align: left;
}

.top-hud .mini-map-stats .mini-map-stat .kid-stat-copy small,
.top-hud .mini-map-stats .mini-map-stat .mini-map-count small {
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #ffe477;
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: .055em;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

.top-hud .mini-map-stats .mini-map-stat .kid-stat-copy strong,
.top-hud .mini-map-stats .mini-map-stat .mini-map-count b {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  color: #fff8df;
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
  font-size: clamp(15px, 4vw, 18px);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 29, 26, .52);
  white-space: nowrap;
}

.top-hud .mini-map-stats .bag-chip .kid-stat-copy strong {
  color: #fff8df;
  text-shadow: 0 2px 0 rgba(0, 29, 26, .52);
}

.top-hud .mini-map-stats .bag-chip .kid-stat-copy strong span,
.top-hud .mini-map-stats .bag-chip .kid-stat-copy strong b:last-child {
  font-size: .64em;
  letter-spacing: -.02em;
}

.top-hud .mini-map-stats .bag-meter {
  grid-column: 1 / -1;
  width: 100%;
  height: 4px;
  margin: 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}

.mini-map .mission-track {
  height: 6px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .12);
}

.mini-map-stats .cash-chip.launcher-ready {
  border: 0;
  border-left: 1px solid rgba(255, 236, 165, .22);
  border-radius: 0;
  background: rgba(244, 198, 75, .2);
  box-shadow: none;
}

.top-hud .mini-map-stats .bag-chip.is-full {
  z-index: auto;
  border: 0;
  border-left: 1px solid rgba(255, 236, 165, .22);
  border-radius: 0;
  background: linear-gradient(145deg, rgba(255, 218, 91, .96), rgba(242, 123, 63, .96));
  box-shadow: none;
  animation: mini-map-basket-ready 800ms ease-in-out infinite alternate;
  transform: none;
}

.top-hud .mini-map-stats .bag-chip.is-full .kid-stat-copy small,
.top-hud .mini-map-stats .bag-chip.is-full .kid-stat-copy strong {
  color: #542c22;
  text-shadow: none;
}

.mini-map-stats .cash-chip.bump {
  animation: mini-map-money-flash 420ms ease;
}

.mini-map.fresh-drop .mini-map-stats b {
  animation: none;
}

.mini-map.fresh-drop .mini-map-swept .mini-map-count b {
  animation: mini-map-count 460ms ease both;
}

@keyframes mini-map-money-flash {
  0%, 100% { background-color: rgba(244, 198, 75, .06); }
  42% { background-color: rgba(244, 198, 75, .3); }
}

@keyframes mini-map-basket-ready {
  from { filter: brightness(1); }
  to { filter: brightness(1.12); }
}

.top-readouts {
  display: block;
  pointer-events: auto;
}

#game-shell[data-pointer-lock="touch"] .mini-map .cash-chip,
#game-shell[data-pointer-lock="touch"] .mini-map .bag-chip {
  position: relative;
  inset: auto;
  z-index: auto;
  width: auto;
}

@media (max-width: 359px) {
  .mini-map {
    width: min(208px, calc(100vw - 104px));
    padding: 6px 7px 7px;
  }

  .mini-map-canvas {
    height: 50px;
  }

  .mini-map-stats > .mini-map-stat {
    grid-template-columns: 18px minmax(0, 1fr);
    min-height: 46px;
    padding-inline: 3px;
  }

  .mini-map-stats > .bag-chip {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .top-hud .mini-map-stats .mini-map-stat > .kid-stat-picture {
    width: 18px;
    height: 18px;
    font-size: 12px;
  }

  .top-hud .mini-map-stats .mini-map-stat .kid-stat-copy strong,
  .top-hud .mini-map-stats .mini-map-stat .mini-map-count b {
    font-size: 15px;
  }

  .top-actions .round-button {
    width: 37px;
    height: 37px;
    font-size: 18px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .mini-map {
    width: 208px;
    padding: 5px 6px 6px;
  }

  .mini-map-topline {
    margin-bottom: 2px;
  }

  .mini-map-topline span {
    width: 20px;
    height: 20px;
  }

  .mini-map-canvas {
    height: 38px;
  }

  .mini-map-footer {
    gap: 3px;
    margin-top: 3px;
  }

  .mini-map-stats > .mini-map-stat {
    min-height: 42px;
    padding-block: 4px;
  }

  .top-hud .mini-map-stats .mini-map-stat .kid-stat-copy strong,
  .top-hud .mini-map-stats .mini-map-stat .mini-map-count b {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-hud .mini-map-stats .bag-chip.is-full,
  .mini-map-stats .cash-chip.bump {
    animation: none;
  }
}

/* v69 Fiesta parade-poster homepage: one joyful goal, three picture steps,
   and two unmistakable ways to start. */
.start-screen {
  align-items: flex-end;
  justify-content: center;
  padding: 14px max(12px, var(--safe-right)) max(14px, var(--safe-bottom)) max(12px, var(--safe-left));
  background:
    radial-gradient(circle at 50% 34%, transparent 0 34%, rgba(3, 48, 44, .08) 63%, rgba(2, 30, 28, .5) 100%),
    linear-gradient(to bottom, rgba(19, 109, 99, .02) 0 51%, rgba(3, 45, 41, .24) 77%, rgba(2, 27, 25, .72) 100%);
}

.intro-map-label {
  top: calc(14px + var(--safe-top));
  min-height: 40px;
  padding: 9px 15px 8px;
  border: 2px solid rgba(255, 244, 208, .88);
  background: rgba(4, 83, 74, .9);
  box-shadow: 0 5px 0 rgba(3, 49, 44, .78), 0 12px 28px rgba(2, 25, 23, .25);
}

.intro-map-label span {
  color: #fff8dc;
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .035em;
}

.overview-hint {
  top: calc(66px + var(--safe-top));
  min-height: 38px;
  gap: 7px;
  padding: 7px 13px;
  border: 2px solid rgba(255, 244, 208, .78);
  color: #fff9e3;
  background: rgba(5, 77, 69, .86);
  box-shadow: 0 4px 0 rgba(2, 45, 40, .7), 0 9px 22px rgba(2, 24, 22, .2);
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .055em;
}

.overview-hint span {
  color: #fff;
  font-size: 18px;
  line-height: 1;
}

.intro-copy {
  width: min(92vw, 420px);
  max-width: none;
  margin: 0;
  padding: 24px 18px 18px;
  overflow: hidden;
  border: 4px solid #fff5d5;
  border-radius: 34px;
  background:
    radial-gradient(circle at 11% 17%, rgba(240, 91, 63, .12) 0 5px, transparent 6px),
    radial-gradient(circle at 91% 31%, rgba(51, 169, 194, .14) 0 7px, transparent 8px),
    radial-gradient(circle at 16% 75%, rgba(233, 77, 136, .11) 0 6px, transparent 7px),
    linear-gradient(145deg, #fff4cd 0%, #ffe8a8 100%);
  box-shadow:
    0 8px 0 #f2b52e,
    0 13px 0 #d94b3e,
    0 28px 70px rgba(1, 27, 24, .52),
    inset 0 2px 0 rgba(255, 255, 255, .8);
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
  animation: introPosterIn 620ms cubic-bezier(.2, .9, .23, 1.18) both;
}

.intro-copy::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: linear-gradient(90deg, #ef5441 0 16.5%, #f5c83f 16.5% 33%, #25a6bb 33% 49.5%, #e74d89 49.5% 66%, #168779 66% 82.5%, #ef7d31 82.5% 100%);
}

.intro-copy > :not(.intro-confetti) {
  position: relative;
  z-index: 2;
}

.intro-confetti {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.intro-confetti i {
  position: absolute;
  width: 7px;
  height: 16px;
  border-radius: 2px;
  background: #ef5441;
  opacity: .9;
  transform: rotate(24deg);
  animation: introPaperWiggle 3.8s ease-in-out infinite;
}

.intro-confetti i:nth-child(1) { top: 42px; left: 24px; background: #25a6bb; transform: rotate(-29deg); }
.intro-confetti i:nth-child(2) { top: 73px; right: 23px; background: #e74d89; transform: rotate(38deg); animation-delay: -.8s; }
.intro-confetti i:nth-child(3) { top: 139px; left: 17px; height: 10px; background: #ef7d31; transform: rotate(66deg); animation-delay: -1.6s; }
.intro-confetti i:nth-child(4) { top: 169px; right: 18px; height: 11px; background: #168779; transform: rotate(-62deg); animation-delay: -2.4s; }
.intro-confetti i:nth-child(5) { bottom: 105px; left: 27px; width: 9px; height: 9px; border-radius: 50%; background: #e74d89; animation-delay: -1.1s; }
.intro-confetti i:nth-child(6) { right: 29px; bottom: 77px; width: 9px; height: 9px; border-radius: 50%; background: #f3bd2e; animation-delay: -2.9s; }

.intro-kicker {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px 13px 4px;
  border: 2px solid #0b7167;
  border-radius: 999px;
  color: #fff8dd;
  background: #0b7f71;
  box-shadow: 0 3px 0 #07564f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .075em;
  line-height: 1;
}

/* v81 River Walk duck mascot: the hero identity appears before play,
   then the same toy-like duck continues in first- and third-person. */
.intro-duck-badge {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  margin: -6px 0 -5px -10px;
  overflow: hidden;
  place-items: center;
  border: 2px solid #fff7d7;
  border-radius: 50%;
  background: #fff0b5;
  box-shadow: 0 2px 0 rgba(3, 65, 58, .42);
  transform: rotate(-4deg);
  animation: introDuckHello 2.2s ease-in-out infinite;
}

.intro-duck-badge svg {
  display: block;
  width: 34px;
  height: 34px;
}

.intro-copy h1 {
  display: grid;
  justify-items: center;
  margin: 10px 0 4px;
  color: #0c5d55;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  line-height: .78;
  letter-spacing: 0;
  text-shadow: 3px 4px 0 #f4c841;
}

.intro-copy h1 i {
  color: #ec513e;
  font-size: clamp(35px, 9.5vw, 45px);
  font-style: normal;
  letter-spacing: .06em;
  line-height: .9;
  text-shadow: 2px 3px 0 #ffd768;
  transform: rotate(-2deg);
}

.intro-copy h1 strong {
  display: block;
  font-size: clamp(66px, 18vw, 84px);
  font-weight: 400;
  line-height: .84;
  transform: rotate(1deg);
}

.intro-copy > p {
  margin: 10px auto 12px;
  color: #153c36;
  font-size: clamp(18px, 4.8vw, 21px);
  font-weight: 700;
  letter-spacing: .025em;
  line-height: 1.05;
}

.intro-play-steps {
  display: grid;
  grid-template-columns: 1fr 22px 1fr 22px 1fr;
  align-items: center;
  gap: 3px;
  max-width: 330px;
  margin: 0 auto 11px;
}

.intro-play-steps > span {
  display: grid;
  justify-items: center;
  gap: 3px;
}

.intro-play-steps b {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 3px solid #fff8dc;
  border-radius: 50%;
  background: #13a38d;
  box-shadow: 0 4px 0 #087265, 0 7px 13px rgba(5, 87, 78, .16);
  font-family: system-ui, sans-serif;
  font-size: 25px;
  line-height: 1;
}

.intro-play-steps > span:nth-of-type(2) b {
  background: #ed6b3e;
  box-shadow: 0 4px 0 #b64332, 0 7px 13px rgba(120, 45, 34, .16);
}

.intro-play-steps > span:nth-of-type(3) b {
  background: #2b9fc0;
  box-shadow: 0 4px 0 #167087, 0 7px 13px rgba(18, 88, 105, .16);
}

.intro-play-steps small {
  color: #153c36;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .055em;
}

.intro-play-steps > i {
  color: #d84b3a;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  transform: translateY(-7px);
}

.intro-music-status {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 auto 11px;
  padding: 5px 12px;
  border: 2px solid rgba(12, 93, 85, .24);
  border-radius: 999px;
  color: #0a675e;
  background: rgba(255, 255, 255, .46);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .055em;
  line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.intro-music-status span {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #e74d89;
  font-size: 15px;
  line-height: 1;
}

.intro-music-status[data-state="playing"] {
  border-color: #0b8c7b;
  color: #075f56;
  background: #d8f3d4;
}

.intro-music-status[data-state="starting"] span,
.intro-music-status[data-state="playing"] span {
  animation: introMusicBounce 940ms ease-in-out infinite;
}

.intro-music-status[data-state="off"] {
  opacity: .68;
}

.intro-actions {
  display: grid;
  gap: 10px;
  width: 100%;
}

.start-button {
  width: 100%;
  min-height: 68px;
  padding: 8px 16px 7px;
  border: 3px solid #fff8df;
  border-radius: 20px;
  background: linear-gradient(180deg, #f15a43 0%, #e64135 100%);
  box-shadow: 0 7px 0 #a52f2c, 0 12px 22px rgba(100, 38, 31, .22);
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
}

.start-button span {
  display: block;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: clamp(30px, 8vw, 38px);
  font-weight: 400;
  letter-spacing: .035em;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(92, 33, 30, .36);
}

.start-button-shift {
  min-height: 52px;
  margin: 0;
  border-color: #fff8df;
  background: linear-gradient(180deg, #0f8c7c 0%, #086d63 100%);
  box-shadow: 0 6px 0 #075149, 0 10px 20px rgba(4, 67, 60, .2);
}

.start-button-shift span {
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .015em;
  text-shadow: none;
}

.start-button:focus-visible,
.intro-map-label:focus-visible {
  outline: 4px solid #4fd3e1;
  outline-offset: 4px;
}

@keyframes introPosterIn {
  from { opacity: 0; transform: translateY(38px) scale(.94) rotate(-1.2deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes introPaperWiggle {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

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

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

@media (prefers-reduced-motion: reduce) {
  .intro-duck-badge {
    animation: none;
  }
}

@media (max-width: 699px) {
  .start-screen {
    padding-inline: max(10px, var(--safe-left)) max(10px, var(--safe-right));
  }

  .intro-copy {
    width: min(92vw, 420px);
  }
}

@media (max-width: 359px) {
  .intro-copy {
    padding: 21px 13px 14px;
    border-radius: 28px;
  }

  .intro-copy h1 strong {
    font-size: 61px;
  }

  .intro-play-steps {
    grid-template-columns: 1fr 16px 1fr 16px 1fr;
  }

  .intro-play-steps > i {
    font-size: 16px;
  }
}

@media (max-height: 680px) and (orientation: portrait) {
  .intro-map-label {
    top: calc(8px + var(--safe-top));
  }

  .overview-hint {
    top: calc(57px + var(--safe-top));
  }

  .intro-copy {
    padding: 18px 15px 13px;
  }

  .intro-kicker {
    min-height: 25px;
    font-size: 11px;
  }

  .intro-duck-badge {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .intro-duck-badge svg {
    width: 30px;
    height: 30px;
  }

  .intro-copy h1 {
    margin-top: 7px;
  }

  .intro-copy h1 i {
    font-size: 31px;
  }

  .intro-copy h1 strong {
    font-size: 58px;
  }

  .intro-copy > p {
    margin: 7px auto 8px;
    font-size: 16px;
  }

  .intro-play-steps {
    margin-bottom: 7px;
  }

  .intro-play-steps b {
    width: 40px;
    height: 40px;
    font-size: 21px;
  }

  .intro-music-status {
    min-height: 28px;
    margin-bottom: 8px;
    font-size: 11px;
  }

  .start-button {
    min-height: 60px;
  }

  .start-button-shift {
    min-height: 46px;
  }
}

@media (min-width: 900px) and (min-height: 600px) {
  .start-screen {
    align-items: center;
    justify-content: flex-end;
    padding: clamp(26px, 4vw, 58px);
    background:
      linear-gradient(90deg, transparent 0 54%, rgba(2, 37, 34, .06) 65%, rgba(2, 31, 29, .46) 100%),
      radial-gradient(circle at 34% 38%, transparent 0 37%, rgba(2, 35, 32, .2) 100%);
  }

  .intro-map-label {
    right: auto;
    left: clamp(26px, 4vw, 58px);
    transform: none;
  }

  .overview-hint {
    top: calc(70px + var(--safe-top));
    left: clamp(26px, 4vw, 58px);
    transform: none;
  }

  .start-screen.overview-dragging .overview-hint {
    transform: scale(1.04);
  }

  .intro-copy {
    width: min(33vw, 390px);
    min-width: 340px;
    margin: 0;
    padding: 22px 18px 18px;
  }

  .intro-copy h1 strong {
    font-size: clamp(67px, 6.4vw, 82px);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .start-screen {
    align-items: center;
    justify-content: flex-end;
    padding: 8px calc(12px + var(--safe-right)) 8px 8px;
  }

  .intro-map-label {
    top: calc(10px + var(--safe-top));
    right: auto;
    left: calc(12px + var(--safe-left));
    transform: none;
  }

  .overview-hint {
    top: calc(61px + var(--safe-top));
    left: calc(12px + var(--safe-left));
    transform: none;
  }

  .start-screen.overview-dragging .overview-hint {
    transform: scale(1.04);
  }

  .intro-copy {
    width: min(53vw, 390px);
    margin: 0;
    padding: 16px 13px 11px;
    border-radius: 25px;
  }

  .intro-kicker,
  .intro-music-status {
    display: none;
  }

  .intro-copy h1 {
    margin: 2px 0;
  }

  .intro-copy h1 i {
    font-size: 27px;
  }

  .intro-copy h1 strong {
    font-size: 48px;
  }

  .intro-copy > p {
    margin: 5px auto 7px;
    font-size: 15px;
  }

  .intro-play-steps {
    margin-bottom: 7px;
  }

  .intro-play-steps b {
    width: 36px;
    height: 36px;
    border-width: 2px;
    font-size: 19px;
  }

  .start-button {
    min-height: 48px;
  }

  .start-button span {
    font-size: 26px;
  }

  .start-button-shift {
    min-height: 40px;
  }

  .start-button-shift span {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-copy,
  .intro-confetti i,
  .intro-music-status span {
    animation: none;
  }
}

/* v69 music-only player settings: camera and tuning controls stay preserved
   for development, while the child-facing panel does one simple job. */
#settings-sheet.music-only-sheet {
  top: auto;
  right: auto;
  bottom: 0;
  left: 50%;
  display: block;
  width: min(430px, calc(100% - 18px));
  height: auto;
  max-height: min(68dvh, 520px);
  padding: 10px 14px calc(16px + var(--safe-bottom));
  overflow: hidden;
  border: 3px solid #fff2c9;
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
  background:
    radial-gradient(circle at 14% 17%, rgba(240, 91, 63, .1) 0 7px, transparent 8px),
    radial-gradient(circle at 88% 25%, rgba(51, 169, 194, .12) 0 8px, transparent 9px),
    linear-gradient(145deg, #fff4d1 0%, #ffe5a1 100%);
  box-shadow: 0 -8px 0 #f1b72e, 0 -14px 42px rgba(1, 27, 24, .42);
  transform: translate(-50%, 110%);
}

#settings-sheet.music-only-sheet.open {
  transform: translate(-50%, 0);
}

#settings-sheet.music-only-sheet .sheet-handle {
  width: 48px;
  height: 5px;
  margin-bottom: 8px;
  background: rgba(12, 93, 85, .25);
}

#settings-sheet.music-only-sheet .sheet-header {
  align-items: center;
}

#settings-sheet.music-only-sheet .sheet-header span {
  color: #c74335;
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
}

#settings-sheet.music-only-sheet .sheet-header h2 {
  margin: 1px 0 12px;
  color: #0a665d;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: 38px;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: .95;
  text-shadow: 2px 2px 0 #f5cb46;
}

#settings-sheet.music-only-sheet .sheet-close {
  width: 48px;
  height: 48px;
  border: 3px solid #fff8df;
  background: #0b8173;
  box-shadow: 0 4px 0 #07564f;
  color: #fff;
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
  font-size: 28px;
}

#settings-sheet.music-only-sheet .settings-content {
  display: block;
  overflow: visible;
}

#settings-sheet.music-only-sheet .music-only-card {
  position: relative;
  padding: 15px;
  overflow: hidden;
  border: 3px solid #0b8173;
  border-radius: 22px;
  background: rgba(255, 252, 235, .84);
  box-shadow: 0 6px 0 rgba(7, 86, 79, .18), inset 0 2px 0 rgba(255, 255, 255, .8);
}

#settings-sheet.music-only-sheet .music-only-card::after {
  content: "♪";
  position: absolute;
  right: 14px;
  top: 4px;
  color: rgba(233, 77, 136, .11);
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: 74px;
  line-height: 1;
  pointer-events: none;
  transform: rotate(7deg);
}

#settings-sheet.music-only-sheet .music-only-hero {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

#settings-sheet.music-only-sheet .music-only-hero > span {
  display: grid;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 3px solid #fff8df;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #eb4f8b, #d93878);
  box-shadow: 0 5px 0 #a92b60;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: 31px;
  line-height: 1;
}

#settings-sheet.music-only-sheet .music-only-hero b,
#settings-sheet.music-only-sheet .music-only-hero small {
  display: block;
}

#settings-sheet.music-only-sheet .music-only-hero b {
  color: #153c36;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

#settings-sheet.music-only-sheet .music-only-hero small {
  max-width: 245px;
  margin-top: 4px;
  color: #35645b;
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.15;
}

#settings-sheet.music-only-sheet .setting-slider-row {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  grid-template-columns: 34px minmax(0, 1fr) 34px 58px;
  gap: 8px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 2px dashed rgba(11, 129, 115, .24);
}

#settings-sheet.music-only-sheet .setting-slider-row > span {
  display: grid;
  min-width: 0;
  height: 34px;
  place-items: center;
  font-family: system-ui, sans-serif;
  font-size: 22px;
  line-height: 1;
}

#settings-sheet.music-only-sheet .setting-slider-row input {
  min-height: 48px;
}

#settings-sheet.music-only-sheet .setting-slider-row input::-webkit-slider-runnable-track {
  height: 10px;
  border: 2px solid #fff8df;
  background: linear-gradient(90deg, #f3cb45, #f1783e, #e94d88);
  box-shadow: 0 2px 0 rgba(124, 62, 38, .2);
}

#settings-sheet.music-only-sheet .setting-slider-row input::-moz-range-track {
  height: 8px;
  border: 2px solid #fff8df;
  background: linear-gradient(90deg, #f3cb45, #f1783e, #e94d88);
  box-shadow: 0 2px 0 rgba(124, 62, 38, .2);
}

#settings-sheet.music-only-sheet .setting-slider-row input::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  margin-top: -12px;
  border-width: 3px;
  background: #0b8173;
  box-shadow: 0 3px 0 #07564f;
}

#settings-sheet.music-only-sheet .setting-slider-row input::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-width: 3px;
  background: #0b8173;
  box-shadow: 0 3px 0 #07564f;
}

#settings-sheet.music-only-sheet .setting-slider-row output {
  min-width: 58px;
  padding: 9px 7px 8px;
  border: 2px solid #fff8df;
  border-radius: 12px;
  background: #0b8173;
  box-shadow: 0 3px 0 #07564f;
  color: #fff;
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}

#settings-sheet.music-only-sheet .settings-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 12px 0 0;
}

#settings-sheet.music-only-sheet .grown-up-label {
  width: 100%;
  color: rgba(21, 60, 54, .6);
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-align: center;
}

#settings-sheet.music-only-sheet .settings-links a {
  min-width: 0;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid rgba(21, 60, 54, .2);
  background: rgba(255, 250, 231, .58);
  color: #315f57;
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
}

#settings-sheet.music-only-sheet .desktop-help {
  display: none;
}

#settings-button {
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: 25px;
}

@media (max-width: 359px) {
  #settings-sheet.music-only-sheet {
    width: calc(100% - 12px);
    padding-inline: 10px;
  }

  #settings-sheet.music-only-sheet .music-only-card {
    padding: 12px 10px;
  }

  #settings-sheet.music-only-sheet .music-only-hero b {
    font-size: 21px;
  }

  #settings-sheet.music-only-sheet .music-only-hero small {
    font-size: 11px;
  }

  #settings-sheet.music-only-sheet .setting-slider-row {
    grid-template-columns: 27px minmax(0, 1fr) 27px 52px;
    gap: 5px;
  }

  #settings-sheet.music-only-sheet .setting-slider-row > span {
    font-size: 18px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  #settings-sheet.music-only-sheet {
    width: min(520px, calc(100% - 22px));
    max-height: calc(100dvh - var(--safe-top));
  }

  #settings-sheet.music-only-sheet .sheet-handle {
    display: none;
  }
}

/* v69 centered Fiesta panel system: blocking choices now read as game cards,
   not website bottom sheets. Non-blocking tutorial cues stay near the controls. */
.fiesta-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  border-bottom-width: 2px;
  border-radius: 28px;
  opacity: 0;
  visibility: hidden;
  translate: -50% -50%;
  scale: .86;
  rotate: -1deg;
  transform: none;
  transform-origin: center;
  transition:
    scale 220ms cubic-bezier(.2, .82, .2, 1),
    rotate 220ms cubic-bezier(.2, .82, .2, 1),
    opacity 150ms ease,
    visibility 0s linear 220ms;
  pointer-events: none;
}

.fiesta-modal.open {
  opacity: 1;
  visibility: visible;
  scale: 1;
  rotate: 0deg;
  animation: fiesta-modal-pop 340ms cubic-bezier(.18, .9, .22, 1) both;
  transition-delay: 0s;
  pointer-events: auto;
}

.fiesta-modal .sheet-handle {
  display: none;
}

#shop-sheet.fiesta-modal {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  display: flex;
  width: min(820px, calc(100% - 24px));
  height: min(740px, calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom)));
  max-height: none;
  padding: 13px calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left));
  overflow: hidden;
  flex-direction: column;
  border: 3px solid #174f47;
  border-radius: 30px;
  box-shadow:
    0 8px 0 rgba(111, 62, 32, .42),
    0 28px 80px rgba(0, 24, 21, .56),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  translate: -50% -50%;
  transform: none;
}

#settings-sheet.music-only-sheet.fiesta-modal {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: min(430px, calc(100% - 24px));
  height: auto;
  max-height: calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom));
  padding: 14px;
  overflow: auto;
  border: 3px solid #fff2c9;
  border-bottom: 3px solid #fff2c9;
  border-radius: 30px;
  box-shadow:
    0 8px 0 #d89928,
    0 26px 70px rgba(1, 27, 24, .54);
  translate: -50% -50%;
  transform: none;
}

#shop-sheet.fiesta-modal.open,
#settings-sheet.music-only-sheet.fiesta-modal.open {
  translate: -50% -50%;
  transform: none;
}

.fiesta-modal-scrim {
  background:
    radial-gradient(circle at 50% 45%, rgba(9, 91, 80, .12), transparent 43%),
    rgba(1, 23, 21, .64);
  backdrop-filter: blur(7px) saturate(.82);
  -webkit-backdrop-filter: blur(7px) saturate(.82);
  animation: fiesta-modal-scrim-in 180ms ease both;
}

#game-shell.camera-lab-open .fiesta-modal-scrim {
  background: rgba(1, 23, 21, .58);
  backdrop-filter: blur(7px) saturate(.82);
  -webkit-backdrop-filter: blur(7px) saturate(.82);
}

.shift-results,
.finale-screen {
  backdrop-filter: blur(7px) saturate(.82);
  -webkit-backdrop-filter: blur(7px) saturate(.82);
}

.shift-results:not([hidden]) .fiesta-modal-card,
.finale-screen:not([hidden]) .fiesta-modal-card {
  animation: fiesta-modal-card-pop 380ms cubic-bezier(.18, .9, .22, 1) both;
}

.ability-unlock.fiesta-modal-toast {
  top: 50%;
  transform: translate(-50%, -50%) scale(.78) rotate(-1.5deg);
}

@keyframes fiesta-modal-pop {
  0% {
    opacity: 0;
    scale: .8;
    rotate: -1.5deg;
  }
  68% {
    opacity: 1;
    scale: 1.025;
    rotate: .3deg;
  }
  100% {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
}

@keyframes fiesta-modal-card-pop {
  0% {
    opacity: 0;
    scale: .78;
    rotate: -1.8deg;
  }
  70% {
    opacity: 1;
    scale: 1.035;
    rotate: .35deg;
  }
  100% {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
}

@keyframes fiesta-modal-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ability-unlock-card {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 18px)) scale(.72) rotate(-2deg);
  }
  9% {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 5px)) scale(1.05) rotate(.8deg);
  }
  15%, 82% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 18px)) scale(.94);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  #shop-sheet.fiesta-modal {
    top: calc(6px + var(--safe-top));
    bottom: calc(6px + var(--safe-bottom));
    width: min(820px, calc(100% - 12px - var(--safe-left) - var(--safe-right)));
    height: auto;
    max-height: none;
    padding-top: 7px;
    border-radius: 22px;
    translate: -50% 0;
    scale: .96;
  }

  #shop-sheet.fiesta-modal.open {
    translate: -50% 0;
    scale: 1;
  }

  #settings-sheet.music-only-sheet.fiesta-modal {
    top: 50%;
    bottom: auto;
    width: min(520px, calc(100% - 22px - var(--safe-left) - var(--safe-right)));
    max-height: calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom));
    padding: 9px 12px;
    border-radius: 22px;
    translate: -50% -50%;
  }

  .finale-screen {
    place-items: start center;
  }

  .finale-panel {
    margin-block: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fiesta-modal,
  .fiesta-modal.open {
    transition: none;
  }

  .fiesta-modal.open,
  .fiesta-modal-card {
    animation: none !important;
  }
}

/* v70 Fiesta toy-box shop: cards are choices, never fake Buy buttons. One
   steady-glow primary action makes the price math and next step unmistakable. */
#shop-sheet.fiesta-modal {
  height: min(760px, calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom)));
  padding: 12px calc(12px + var(--safe-right)) calc(11px + var(--safe-bottom)) calc(12px + var(--safe-left));
  border-color: #0a5f56;
  background:
    radial-gradient(circle at 9% 8%, rgba(238, 83, 67, .18) 0 4px, transparent 4.5px),
    radial-gradient(circle at 90% 11%, rgba(37, 166, 187, .2) 0 5px, transparent 5.5px),
    radial-gradient(circle at 86% 92%, rgba(131, 83, 190, .16) 0 4px, transparent 4.5px),
    linear-gradient(rgba(255, 255, 255, .34) 1px, transparent 1px),
    #fff2c9;
  background-size: auto, auto, auto, 100% 34px, auto;
}

#shop-sheet .sheet-header {
  min-height: 52px;
  padding-inline: 3px;
}

#shop-sheet .sheet-header span {
  color: #d04937;
  font-size: 12px;
  letter-spacing: .08em;
}

#shop-sheet .sheet-header h2 {
  margin: 2px 0 3px;
  font-size: clamp(31px, 8vw, 45px);
}

#shop-sheet .shop-status {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin: 2px 1px 9px;
}

#shop-sheet .shop-helper {
  min-height: 60px;
  padding: 7px 10px 7px 8px;
  border: 2px dashed #d98a29;
  border-radius: 18px 21px 17px 20px;
  color: #563a22;
  background:
    radial-gradient(circle at 92% 18%, rgba(255, 255, 255, .7) 0 3px, transparent 3.5px),
    linear-gradient(145deg, #fff0a6, #ffd85e);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .48), 0 4px 10px rgba(113, 71, 24, .12);
}

#shop-sheet .shop-helper > span {
  width: 40px;
  height: 40px;
  color: #fff9df;
  background: #ef654b;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), 0 3px 0 #b94637;
}

#shop-sheet .shop-helper strong {
  color: #6e321e;
  font-size: clamp(15px, 4vw, 18px);
}

#shop-sheet .shop-helper small {
  overflow: visible;
  color: #65482d;
  font-size: clamp(12px, 3.1vw, 14px);
  font-weight: 700;
  line-height: 1.12;
  text-overflow: clip;
  white-space: normal;
}

#shop-sheet .shop-wallet {
  min-width: 111px;
  min-height: 60px;
  padding: 7px 11px;
  border-color: #d58f22;
  background: linear-gradient(145deg, #fff18a, #ffc83f);
  box-shadow: 0 4px 0 #b96b21, 0 8px 16px rgba(113, 72, 26, .14);
}

#shop-sheet .shop-wallet span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .055em;
}

#shop-sheet .shop-wallet strong {
  margin-top: 3px;
  font-size: clamp(24px, 6.2vw, 30px);
}

#shop-sheet .shop-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-content: start;
  gap: 9px;
  padding: 2px 3px 9px;
  scroll-padding-bottom: 10px;
}

#shop-sheet .power-choice-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 166px;
  padding: 10px;
  overflow: hidden;
  flex-direction: column;
  align-items: stretch;
  appearance: none;
  border: 3px solid #df755b;
  border-radius: 23px 20px 24px 19px;
  color: #153e38;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 255, 255, .8) 0 5px, transparent 5.5px),
    linear-gradient(150deg, #fff8e8, #ffe3d8);
  box-shadow: 0 5px 0 #b74d3b, 0 10px 20px rgba(73, 47, 35, .11);
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 120ms ease, border-color 150ms ease, box-shadow 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

#shop-sheet .power-choice-card::after {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  color: #ef654b;
  background: currentColor;
  box-shadow: -13px 7px 0 #2aa6bc, -4px 16px 0 #f3c546;
  content: "";
  rotate: 18deg;
  opacity: .72;
  pointer-events: none;
}

#shop-sheet .power-choice-card[data-upgrade-type="speed"] {
  border-color: #2ca6bd;
  background: linear-gradient(150deg, #f4fdff, #dff4ff);
  box-shadow: 0 5px 0 #16788d, 0 10px 20px rgba(24, 94, 111, .11);
}

#shop-sheet .power-choice-card[data-upgrade-type="bag"] {
  border-color: #e1a62e;
  background: linear-gradient(150deg, #fffced, #fff0ac);
  box-shadow: 0 5px 0 #ad7121, 0 10px 20px rgba(105, 75, 25, .11);
}

#shop-sheet .power-choice-card[data-upgrade-type="runner"] {
  border-color: #8d62c9;
  background: linear-gradient(150deg, #fff9ff, #eee4ff);
  box-shadow: 0 5px 0 #65419c, 0 10px 20px rgba(83, 51, 116, .11);
}

#shop-sheet .power-choice-card.is-locked {
  filter: none;
}

#shop-sheet .power-choice-card.is-selected {
  z-index: 2;
  border-color: #0a776a;
  box-shadow:
    0 5px 0 #07554d,
    0 0 0 4px #ffc536,
    0 0 26px rgba(255, 197, 54, .48);
  transform: translateY(-1px) rotate(-.35deg);
}

#shop-sheet .power-choice-card:active {
  transform: translateY(3px) scale(.975);
  box-shadow: 0 2px 0 #72503a;
}

#shop-sheet .power-choice-card:focus-visible,
#shop-sheet .shop-buy-primary:focus-visible {
  outline: 4px solid #268ed5;
  outline-offset: 3px;
}

#shop-sheet .upgrade-topline {
  min-height: 49px;
  align-items: flex-start;
}

#shop-sheet .power-choice-card .upgrade-icon {
  width: 52px;
  height: 52px;
  border: 2px solid rgba(255, 255, 255, .88);
  border-radius: 17px 21px 16px 20px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 3px 0 rgba(8, 91, 81, .72), 0 7px 13px rgba(5, 83, 73, .1);
}

#shop-sheet .power-choice-card .upgrade-icon svg {
  width: 45px;
  height: 45px;
}

#shop-sheet .power-choice-card .upgrade-price {
  z-index: 1;
  min-width: 51px;
  min-height: 31px;
  padding: 5px 7px;
  border-color: #d59722;
  background: #ffe06c;
  box-shadow: 0 3px 0 #af6720;
  font-size: clamp(15px, 4vw, 18px);
}

#shop-sheet .power-choice-card h3 {
  margin: 8px 0 2px;
  color: #0b544c;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: clamp(18px, 4.8vw, 23px);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1;
}

#shop-sheet .power-choice-card .upgrade-benefit {
  min-height: 29px;
  margin: 2px 0 6px;
  color: #385d57;
  font-size: clamp(12px, 3.15vw, 14px);
  font-weight: 700;
  line-height: 1.08;
}

#shop-sheet .power-choice-card .upgrade-result {
  min-height: 25px;
  margin: auto 0 7px;
  gap: 4px;
  font-size: clamp(12px, 3.2vw, 15px);
}

#shop-sheet .power-choice-card .upgrade-result span,
#shop-sheet .power-choice-card .upgrade-result strong {
  min-height: 24px;
  padding: 3px 6px;
  border-radius: 8px;
}

#shop-sheet .choice-state {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 4px 9px 3px;
  border: 2px solid #dc9826;
  border-radius: 999px;
  color: #75351e;
  background: #ffe478;
  box-shadow: 0 2px 0 #b76c20;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .035em;
  line-height: 1;
}

#shop-sheet .choice-state.is-locked {
  border-color: #b7a77e;
  color: #5f5745;
  background: #eee5ca;
  box-shadow: 0 2px 0 #9e916f;
}

#shop-sheet .launcher-choice-card {
  display: grid;
  min-height: 106px;
  grid-column: 1 / -1;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-color: #ef654b;
  background:
    radial-gradient(circle at 11% 50%, rgba(244, 194, 65, .34), transparent 24%),
    linear-gradient(145deg, #fff9e2, #ffe2a7);
  box-shadow: 0 5px 0 #a84938, 0 10px 22px rgba(102, 58, 37, .11);
}

#shop-sheet .launcher-choice-card .launcher-art {
  width: 60px;
  height: 60px;
}

#shop-sheet .launcher-choice-card .launcher-copy {
  min-width: 0;
}

#shop-sheet .launcher-choice-card h3 {
  margin: 2px 0;
  font-size: clamp(17px, 4.5vw, 22px);
}

#shop-sheet .launcher-choice-card p {
  margin: 1px 0 6px;
  font-size: clamp(12px, 3.1vw, 14px);
}

#shop-sheet .launcher-choice-card .choice-state {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
}

#shop-sheet .shop-choice-bar {
  position: relative;
  z-index: 4;
  display: grid;
  min-height: 88px;
  flex: 0 0 auto;
  grid-template-columns: minmax(94px, .72fr) minmax(190px, 1.28fr);
  align-items: stretch;
  gap: 9px;
  padding: 9px;
  border: 3px solid #e0a62d;
  border-radius: 22px;
  background: linear-gradient(145deg, #fff9e8, #ffe9ad);
  box-shadow: 0 5px 0 #ae6923, 0 10px 20px rgba(87, 57, 28, .14);
}

#shop-sheet .shop-choice-copy {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 2px;
  padding-left: 3px;
}

#shop-sheet .shop-choice-copy span {
  color: #c44a37;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
}

#shop-sheet .shop-choice-copy strong {
  overflow: hidden;
  color: #0b544c;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: clamp(18px, 4.8vw, 23px);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#shop-sheet .shop-choice-copy small {
  color: #5d5a48;
  font-size: clamp(11px, 2.9vw, 13px);
  font-weight: 700;
  line-height: 1.08;
}

#shop-sheet .shop-buy-primary {
  display: flex;
  width: 100%;
  min-height: 60px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 11px 7px;
  appearance: none;
  border: 3px solid #c9f7d8;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(180deg, #13a982, #08705f);
  box-shadow:
    0 6px 0 #064b42,
    0 0 0 3px rgba(255, 218, 71, .62),
    0 0 22px rgba(21, 190, 143, .35);
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
  font-size: clamp(14px, 3.7vw, 18px);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.05;
  text-align: center;
  cursor: pointer;
  animation: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#shop-sheet .shop-buy-primary > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #0a6155;
  background: #ffe16b;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6);
}

#shop-sheet .shop-buy-primary strong {
  font: inherit;
}

#shop-sheet .shop-buy-primary:active:not(:disabled) {
  translate: 0 4px;
  box-shadow: 0 2px 0 #064b42, 0 0 0 3px rgba(255, 218, 71, .62);
}

#shop-sheet .shop-buy-primary:disabled {
  border-color: #d5c9a8;
  color: #5d5645;
  background: linear-gradient(180deg, #eee5ca, #d9ceb0);
  box-shadow: 0 5px 0 #a99c77;
  cursor: not-allowed;
  opacity: 1;
}

#shop-sheet .shop-buy-primary:disabled > span {
  color: #5d5645;
  background: rgba(255, 255, 255, .42);
}

#shop-sheet.open .power-choice-card,
#shop-sheet.open .launcher-choice-card {
  animation: none !important;
}

@media (max-width: 359px) {
  #shop-sheet .shop-status {
    grid-template-columns: minmax(0, 1fr) 93px;
  }

  #shop-sheet .shop-wallet {
    min-width: 93px;
  }

  #shop-sheet .shop-grid {
    gap: 7px;
  }

  #shop-sheet .power-choice-card {
    min-height: 158px;
    padding: 8px;
  }

  #shop-sheet .shop-choice-bar {
    min-height: 126px;
    grid-template-columns: 1fr;
  }

  #shop-sheet .shop-choice-copy {
    grid-template-columns: auto 1fr;
    column-gap: 6px;
  }

  #shop-sheet .shop-choice-copy small {
    grid-column: 1 / -1;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  #shop-sheet.fiesta-modal {
    padding: 7px 9px;
  }

  #shop-sheet .sheet-header {
    min-height: 42px;
  }

  #shop-sheet .sheet-header h2 {
    font-size: 27px;
  }

  #shop-sheet .shop-status {
    position: absolute;
    z-index: 5;
    top: 7px;
    right: 57px;
    width: min(430px, 54%);
    margin: 0;
  }

  #shop-sheet .shop-helper,
  #shop-sheet .shop-wallet {
    min-height: 42px;
  }

  #shop-sheet .shop-helper {
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 4px 7px;
  }

  #shop-sheet .shop-helper > span {
    width: 30px;
    height: 30px;
    font-size: 17px;
  }

  #shop-sheet .shop-helper strong {
    font-size: 12px;
  }

  #shop-sheet .shop-helper small {
    font-size: 10px;
  }

  #shop-sheet .shop-wallet {
    min-width: 92px;
    padding: 4px 8px;
  }

  #shop-sheet .shop-wallet strong {
    font-size: 21px;
  }

  #shop-sheet .shop-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    padding-bottom: 7px;
  }

  #shop-sheet .power-choice-card {
    min-height: 132px;
    padding: 7px;
  }

  #shop-sheet .power-choice-card .upgrade-topline {
    min-height: 38px;
  }

  #shop-sheet .power-choice-card .upgrade-icon {
    width: 40px;
    height: 40px;
  }

  #shop-sheet .power-choice-card .upgrade-icon svg {
    width: 35px;
    height: 35px;
  }

  #shop-sheet .power-choice-card .upgrade-price {
    min-width: 42px;
    min-height: 26px;
    font-size: 13px;
  }

  #shop-sheet .power-choice-card h3 {
    margin-top: 5px;
    font-size: 17px;
  }

  #shop-sheet .power-choice-card .upgrade-benefit {
    display: none;
  }

  #shop-sheet .power-choice-card .upgrade-result {
    margin-block: 5px;
  }

  #shop-sheet .launcher-choice-card {
    min-height: 66px;
    grid-column: 1 / -1;
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  #shop-sheet .launcher-choice-card .launcher-art {
    width: 46px;
    height: 46px;
  }

  #shop-sheet .launcher-choice-card p,
  #shop-sheet .launcher-choice-card .rocket-progress-copy {
    display: none;
  }

  #shop-sheet .shop-choice-bar {
    min-height: 62px;
    grid-template-columns: minmax(120px, .75fr) minmax(230px, 1.25fr);
    padding: 6px;
  }

  #shop-sheet .shop-buy-primary {
    min-height: 48px;
  }
}

/* v71 Fiesta Champions: one toy-like race board, safe made-up names, and
   sticker-book stats. Motion is limited to the one-time panel entrance. */
.intro-secondary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.intro-secondary-actions .start-button {
  min-height: 58px;
  margin: 0;
  padding: 7px 8px 6px;
  border-radius: 17px;
}

.intro-secondary-actions .start-button > span {
  display: block;
  font-family: system-ui, sans-serif;
  font-size: 24px;
  line-height: 1;
}

.intro-secondary-actions .start-button > strong,
.intro-secondary-actions .start-button > small {
  display: block;
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
  line-height: 1;
}

.intro-secondary-actions .start-button > strong {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .035em;
}

.intro-secondary-actions .start-button > small {
  margin-top: 3px;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .075em;
}

.start-button-champions {
  border-color: #fff8df;
  color: #173f39;
  background: linear-gradient(180deg, #ffe375, #f5bd35);
  box-shadow: 0 6px 0 #b66e24, 0 10px 20px rgba(88, 51, 19, .2);
}

.start-button-champions > strong,
.start-button-champions > small {
  text-shadow: none;
}

.leaderboard-modal {
  z-index: 55;
  display: flex;
  width: min(430px, calc(100% - 20px));
  height: min(780px, calc(100dvh - 20px - var(--safe-top) - var(--safe-bottom)));
  max-height: none;
  padding: 10px 10px calc(10px + var(--safe-bottom));
  overflow: hidden;
  flex-direction: column;
  border: 4px solid #fff2c5;
  border-radius: 31px;
  color: #153c36;
  background:
    radial-gradient(circle at 8% 8%, rgba(231, 77, 137, .16) 0 5px, transparent 5.5px),
    radial-gradient(circle at 93% 18%, rgba(40, 169, 191, .18) 0 7px, transparent 7.5px),
    linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px),
    linear-gradient(150deg, #fff5cf, #ffe7a6);
  background-size: auto, auto, 100% 31px, auto;
  box-shadow:
    0 8px 0 #d58a2b,
    0 26px 78px rgba(1, 25, 22, .58),
    inset 0 2px 0 rgba(255, 255, 255, .82);
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
}

.leaderboard-header {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 3px 8px 5px;
  flex: 0 0 auto;
}

.leaderboard-title-lockup {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.leaderboard-title-lockup > span {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  place-items: center;
  border: 3px solid #fff8dc;
  border-radius: 50%;
  background: linear-gradient(145deg, #f6c942, #ed8734);
  box-shadow: 0 4px 0 #ad5f29;
  font-family: system-ui, sans-serif;
  font-size: 27px;
}

.leaderboard-title-lockup small,
.leaderboard-title-lockup h2 {
  display: block;
  margin: 0;
}

.leaderboard-title-lockup small {
  color: #c94b3c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .085em;
}

.leaderboard-title-lockup h2 {
  color: #075e56;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: clamp(27px, 8vw, 35px);
  font-weight: 400;
  line-height: .95;
}

.leaderboard-close {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0 0 3px;
  border: 3px solid #0b675e;
  border-radius: 50%;
  color: #0b5f57;
  background: #fff8dc;
  box-shadow: 0 4px 0 #d49a3a;
  font-family: system-ui, sans-serif;
  font-size: 28px;
  font-weight: 700;
  cursor: pointer;
}

.leaderboard-scroll {
  min-height: 0;
  padding: 2px 2px 12px;
  overflow: auto;
  flex: 1 1 auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  touch-action: pan-y;
}

.leaderboard-player-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  min-height: 64px;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 3px solid #8a55b6;
  border-radius: 18px;
  background: linear-gradient(135deg, #f4dcff, #dfc2f1);
  box-shadow: 0 5px 0 #734098;
}

.leaderboard-player-card > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 15px;
  background: rgba(255, 255, 255, .62);
  font-family: system-ui, sans-serif;
  font-size: 29px;
}

.leaderboard-player-card small,
.leaderboard-player-card strong {
  display: block;
}

.leaderboard-player-card small {
  color: #70408e;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}

.leaderboard-player-card strong {
  overflow: hidden;
  color: #49275f;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-player-card > b {
  min-width: 45px;
  padding: 6px 7px;
  border-radius: 999px;
  color: #fff;
  background: #8a55b6;
  font-size: 11px;
  letter-spacing: .04em;
  text-align: center;
}

.leaderboard-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: 12px 0 8px;
  padding: 4px;
  border: 2px solid rgba(12, 95, 85, .22);
  border-radius: 16px;
  background: rgba(255, 255, 255, .46);
}

.leaderboard-tabs button {
  min-height: 45px;
  padding: 6px 4px;
  border: 0;
  border-radius: 11px;
  color: #0b655c;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .035em;
  cursor: pointer;
}

.leaderboard-tabs button[aria-selected="true"] {
  color: #fff8dc;
  background: #0d8173;
  box-shadow: 0 4px 0 #07574f;
}

.leaderboard-board {
  padding: 9px;
  border: 3px solid #0b7166;
  border-radius: 22px;
  background: #fff9df;
  box-shadow: 0 6px 0 rgba(8, 84, 75, .28);
}

.leaderboard-board-title {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 3px 7px;
  border-bottom: 2px dashed rgba(11, 101, 91, .23);
}

.leaderboard-board-title b,
.leaderboard-board-title small {
  display: block;
}

.leaderboard-board-title b {
  color: #0a635a;
  font-size: 14px;
}

.leaderboard-board-title small {
  margin-top: 2px;
  color: #96722c;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
}

.leaderboard-live-dot {
  padding: 5px 8px;
  border-radius: 999px;
  color: #fff;
  background: #ea5542;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}

.leaderboard-status {
  margin: 11px 0 5px;
  color: #8d6d2a;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .035em;
  text-align: center;
}

.leaderboard-list {
  display: grid;
  gap: 6px;
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
}

.leaderboard-row,
.leaderboard-you-row {
  display: grid;
  grid-template-columns: 34px 42px minmax(0, 1fr) auto;
  min-height: 60px;
  align-items: center;
  gap: 7px;
  padding: 6px 7px;
  border: 2px solid #d8c88e;
  border-radius: 15px;
  background: #fff4cc;
}

.leaderboard-row[data-rank="1"] {
  border-color: #e6a817;
  background: linear-gradient(135deg, #fff3a9, #ffdc5c);
}

.leaderboard-row[data-rank="2"] {
  border-color: #99a8b1;
  background: linear-gradient(135deg, #f8fbf4, #dfe8e5);
}

.leaderboard-row[data-rank="3"] {
  border-color: #c27c43;
  background: linear-gradient(135deg, #ffe1bd, #efbd83);
}

.leaderboard-row.is-you,
.leaderboard-you-row {
  border-color: #8b54b6;
  background: linear-gradient(135deg, #f5e2ff, #e4c8f4);
}

.leaderboard-rank {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #0d8173;
  font-size: 14px;
  font-weight: 700;
}

.leaderboard-row[data-rank="1"] .leaderboard-rank { color: #62400a; background: #fff2a1; }
.leaderboard-row[data-rank="2"] .leaderboard-rank { color: #41535b; background: #fff; }
.leaderboard-row[data-rank="3"] .leaderboard-rank { color: #713b1d; background: #ffe9d0; }

.leaderboard-mascot {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .86);
  border-radius: 13px;
  background: rgba(255, 255, 255, .55);
  font-family: system-ui, sans-serif;
  font-size: 25px;
}

.leaderboard-name {
  min-width: 0;
}

.leaderboard-name strong,
.leaderboard-name small {
  display: block;
}

.leaderboard-name strong {
  overflow: hidden;
  color: #173f39;
  font-size: 14px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-name small {
  margin-top: 4px;
  color: #7f6734;
  font-size: 9px;
  font-weight: 650;
}

.leaderboard-score {
  min-width: 46px;
  text-align: center;
}

.leaderboard-score b,
.leaderboard-score small {
  display: block;
}

.leaderboard-score b {
  color: #d7483b;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: 25px;
  font-weight: 400;
  line-height: .9;
}

.leaderboard-score small {
  margin-top: 4px;
  color: #6e5a31;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .06em;
}

.leaderboard-you-row {
  margin-top: 9px;
  box-shadow: 0 4px 0 #714195;
}

.leaderboard-empty {
  display: grid;
  min-height: 150px;
  place-items: center;
  align-content: center;
  gap: 4px;
  text-align: center;
}

.leaderboard-empty > span {
  font-family: system-ui, sans-serif;
  font-size: 44px;
}

.leaderboard-empty strong {
  color: #0b7166;
  font-size: 19px;
}

.leaderboard-empty small {
  color: #806837;
  font-size: 12px;
}

.fiesta-stat-book {
  margin-top: 12px;
  padding: 10px;
  border: 3px solid #e45180;
  border-radius: 22px;
  background: linear-gradient(145deg, #fff0f4, #ffe1ea);
  box-shadow: 0 6px 0 #b83a65;
}

.fiesta-stat-book-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

.fiesta-stat-book-title > span {
  font-family: system-ui, sans-serif;
  font-size: 31px;
}

.fiesta-stat-book-title small,
.fiesta-stat-book-title h3 {
  display: block;
  margin: 0;
}

.fiesta-stat-book-title small {
  color: #aa335b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
}

.fiesta-stat-book-title h3 {
  color: #71304b;
  font-size: 21px;
  line-height: 1;
}

.fiesta-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.fiesta-stat-sticker {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  min-height: 56px;
  align-items: center;
  gap: 6px;
  padding: 6px 7px;
  border: 2px solid rgba(151, 51, 91, .22);
  border-radius: 14px;
  background: rgba(255, 255, 255, .62);
}

.fiesta-stat-sticker > span {
  font-family: system-ui, sans-serif;
  font-size: 24px;
  text-align: center;
}

.fiesta-stat-sticker b,
.fiesta-stat-sticker small {
  display: block;
}

.fiesta-stat-sticker b {
  overflow: hidden;
  color: #70304a;
  font-size: 17px;
  line-height: 1;
  text-overflow: ellipsis;
}

.fiesta-stat-sticker small {
  margin-top: 4px;
  color: #9a4969;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .055em;
}

.leaderboard-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 13px 4px 4px;
  color: #536d62;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
}

.leaderboard-privacy span {
  font-family: system-ui, sans-serif;
  font-size: 16px;
}

.leaderboard-race-button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  min-height: 67px;
  align-items: center;
  column-gap: 7px;
  margin-top: 9px;
  padding: 7px 12px;
  border: 3px solid #fff8df;
  border-radius: 19px;
  color: #fff;
  background: linear-gradient(180deg, #ef5a43, #df4236);
  box-shadow: 0 6px 0 #9e302b;
  font-family: inherit;
  cursor: pointer;
  flex: 0 0 auto;
}

.leaderboard-race-button > span {
  grid-row: 1 / 3;
  font-family: system-ui, sans-serif;
  font-size: 31px;
}

.leaderboard-race-button strong,
.leaderboard-race-button small {
  display: block;
  text-align: left;
}

.leaderboard-race-button strong {
  align-self: end;
  font-size: 18px;
  letter-spacing: .02em;
}

.leaderboard-race-button small {
  align-self: start;
  margin-top: 3px;
  color: #ffe6b5;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .065em;
}

.leaderboard-close:focus-visible,
.leaderboard-tabs button:focus-visible,
.leaderboard-race-button:focus-visible,
.start-button-champions:focus-visible {
  outline: 4px solid #42c8dc;
  outline-offset: 3px;
}

.shift-results-card {
  width: min(92vw, 370px);
  gap: 8px;
  padding: 18px 15px 15px;
  border-width: 4px;
  border-radius: 27px;
  background:
    radial-gradient(circle at 9% 11%, rgba(231, 77, 137, .16) 0 5px, transparent 5.5px),
    linear-gradient(155deg, #fff5ce, #ffe39c);
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
}

.shift-stars {
  font-size: 42px;
}

.shift-results-kicker {
  padding: 4px 9px;
  border-radius: 999px;
  color: #fff;
  background: #0b7d70;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
}

.shift-results-card h2 {
  color: #0a635a;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  line-height: .95;
}

.shift-results-card .shift-score {
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: #c94638;
  letter-spacing: .04em;
}

.shift-results-card .shift-score b {
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: 55px;
  font-weight: 400;
  line-height: .85;
}

.shift-results-card .shift-score span {
  font-size: 15px;
  font-weight: 700;
}

.shift-result-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  width: 100%;
}

.shift-result-stats > span {
  display: grid;
  grid-template-columns: 30px 1fr;
  min-height: 55px;
  align-items: center;
  padding: 6px 8px;
  border: 2px solid rgba(11, 102, 92, .22);
  border-radius: 14px;
  background: rgba(255, 255, 255, .55);
}

.shift-result-stats i {
  grid-row: 1 / 3;
  font-family: system-ui, sans-serif;
  font-size: 23px;
  font-style: normal;
}

.shift-result-stats b {
  color: #0a655c;
  font-size: 18px;
  line-height: 1;
  text-align: left;
}

.shift-result-stats small {
  color: #8a6b2c;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: left;
}

.shift-board-status {
  min-height: 18px;
  color: #775d28;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: .025em !important;
}

.shift-results-actions {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.shift-results-actions button {
  min-height: 49px;
  padding: 8px 6px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 11px;
  touch-action: manipulation;
}

#shift-again {
  grid-column: 1 / -1;
  min-height: 56px;
  font-size: 15px;
}

#shift-champions {
  color: #563e12;
  background: linear-gradient(180deg, #ffe473, #f5c33c);
  box-shadow: 0 5px 0 #b97827;
}

#shift-continue {
  color: #0a5f57;
  background: linear-gradient(180deg, #f9f2d8, #eadcaf);
  box-shadow: 0 5px 0 #aa9361;
}

@media (max-width: 359px) {
  .leaderboard-modal {
    width: calc(100% - 12px);
    padding-inline: 7px;
    border-radius: 25px;
  }

  .leaderboard-title-lockup > span {
    width: 42px;
    height: 42px;
    font-size: 23px;
  }

  .leaderboard-title-lockup h2 {
    font-size: 27px;
  }

  .leaderboard-row,
  .leaderboard-you-row {
    grid-template-columns: 30px 36px minmax(0, 1fr) 42px;
    gap: 5px;
    padding-inline: 5px;
  }

  .leaderboard-mascot {
    width: 35px;
    height: 35px;
    font-size: 21px;
  }

  .leaderboard-name strong {
    font-size: 12px;
  }
}

@media (max-height: 680px) and (orientation: portrait) {
  .leaderboard-modal {
    height: calc(100dvh - 12px - var(--safe-top) - var(--safe-bottom));
    padding-top: 5px;
  }

  .leaderboard-header {
    min-height: 53px;
    padding-bottom: 4px;
  }

  .leaderboard-title-lockup > span {
    width: 42px;
    height: 42px;
    font-size: 23px;
  }

  .leaderboard-player-card {
    min-height: 56px;
  }

  .leaderboard-tabs {
    margin-top: 9px;
  }

  .leaderboard-tabs button {
    min-height: 39px;
  }

  .leaderboard-race-button {
    min-height: 58px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .leaderboard-modal {
    width: min(820px, calc(100% - 14px - var(--safe-left) - var(--safe-right)));
    height: calc(100dvh - 12px - var(--safe-top) - var(--safe-bottom));
    padding: 6px;
  }

  .leaderboard-scroll {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(250px, .82fr);
    align-content: start;
    gap: 8px;
  }

  .leaderboard-player-card,
  .leaderboard-tabs,
  .leaderboard-board {
    grid-column: 1;
  }

  .fiesta-stat-book,
  .leaderboard-privacy {
    grid-column: 2;
  }

  .fiesta-stat-book {
    grid-row: 1 / span 3;
    margin-top: 0;
  }

  .leaderboard-privacy {
    margin-top: 0;
  }

  .leaderboard-race-button {
    min-height: 53px;
  }

  .shift-results-card {
    grid-template-columns: 1fr 1fr;
    width: min(680px, calc(100% - 24px));
    padding: 10px 12px;
  }

  .shift-stars,
  .shift-results-kicker,
  .shift-results-card h2,
  .shift-results-card .shift-score,
  .shift-board-status {
    grid-column: 1;
  }

  .shift-result-stats,
  .shift-results-actions {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .leaderboard-modal,
  .leaderboard-modal.open,
  .shift-results-card {
    animation: none !important;
    transition: none;
  }
}

/* v72 phone opening: center the Fiesta poster in the view and make its
   silhouette lighter without shrinking any primary action below a kid-safe
   touch target. */
.intro-music-status {
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

@media (max-width: 699px) and (orientation: portrait) {
  .start-screen {
    align-items: center;
  }

  .intro-copy {
    width: min(88vw, 390px);
    padding: 20px 15px 15px;
    border-width: 3px;
    border-radius: 30px;
  }

  .intro-copy h1 {
    margin: 8px 0 3px;
  }

  .intro-copy h1 i {
    font-size: clamp(32px, 8.5vw, 40px);
  }

  .intro-copy h1 strong {
    font-size: clamp(59px, 16vw, 74px);
  }

  .intro-copy > p {
    margin: 8px auto 9px;
    font-size: clamp(16px, 4.3vw, 19px);
  }

  .intro-play-steps {
    margin-bottom: 8px;
  }

  .intro-play-steps b {
    width: 42px;
    height: 42px;
    font-size: 23px;
  }

  .intro-music-status {
    min-height: 38px;
    margin-bottom: 8px;
  }

  .intro-actions,
  .intro-secondary-actions {
    gap: 8px;
  }

  .start-button {
    min-height: 62px;
  }

  .intro-secondary-actions .start-button {
    min-height: 52px;
  }
}

@media (max-width: 699px) and (orientation: portrait) and (max-height: 680px) {
  .intro-copy {
    padding: 16px 13px 12px;
  }

  .intro-copy h1 strong {
    font-size: 56px;
  }

  .intro-music-status {
    min-height: 34px;
    margin-bottom: 6px;
  }

  .start-button {
    min-height: 58px;
  }

  .intro-secondary-actions .start-button {
    min-height: 52px;
  }
}

/* Passenger forehead-camera preview. This only exists behind ?boat-pov=1, so
   the normal game keeps its established HUD and start flow untouched. */
#game-shell[data-boat-pov] .start-screen,
#game-shell[data-boat-pov] .top-hud,
#game-shell[data-boat-pov] .combo-badge,
#game-shell[data-boat-pov] .shift-timer,
#game-shell[data-boat-pov] .shift-results,
#game-shell[data-boat-pov] .auto-walk-guide,
#game-shell[data-boat-pov] .aim-layer,
#game-shell[data-boat-pov] .launcher-reticle,
#game-shell[data-boat-pov] .desktop-control-hint,
#game-shell[data-boat-pov] .grab-button,
#game-shell[data-boat-pov] .control-zone,
#game-shell[data-boat-pov] .swap-shortcut,
#game-shell[data-boat-pov] .first-shift-tutorial,
#game-shell[data-boat-pov] .toast-stack,
#game-shell[data-boat-pov] .pickup-float,
#game-shell[data-boat-pov] .ability-unlock,
#game-shell[data-boat-pov] .bottom-sheet,
#game-shell[data-boat-pov] .leaderboard-modal,
#game-shell[data-boat-pov] .finale-screen,
#game-shell[data-boat-pov] .sheet-scrim,
#game-shell[data-boat-pov] .rotate-note,
#game-shell[data-boat-pov] > .build-number {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.boat-pov-overlay {
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding:
    calc(18px + var(--safe-top))
    calc(14px + var(--safe-right))
    calc(18px + var(--safe-bottom))
    calc(14px + var(--safe-left));
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 225, 103, .18), transparent 42%),
    linear-gradient(rgba(3, 48, 44, .18), rgba(2, 32, 29, .68));
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
}

.boat-pov-card {
  position: relative;
  width: min(430px, 100%);
  max-height: calc(100dvh - 36px - var(--safe-top) - var(--safe-bottom));
  overflow: auto;
  box-sizing: border-box;
  padding: 24px 19px 18px;
  border: 4px solid #fff0bd;
  border-radius: 31px;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, .88), transparent 24%),
    linear-gradient(145deg, #fff7d7 0%, #ffe9a6 100%);
  box-shadow:
    0 8px 0 #e74c3e,
    0 14px 0 #f4c742,
    0 24px 45px rgba(2, 35, 31, .44);
  color: #0b554e;
  text-align: center;
  scrollbar-width: none;
}

.boat-pov-card::-webkit-scrollbar {
  display: none;
}

.boat-pov-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 11px;
  border-radius: 26px 26px 0 0;
  background: linear-gradient(90deg, #ed4d42 0 20%, #f3c844 20% 40%, #25a7bd 40% 60%, #e54888 60% 80%, #0b8877 80%);
  content: "";
}

.boat-pov-camera-mark {
  position: relative;
  display: grid;
  width: 74px;
  height: 74px;
  margin: 2px auto 9px;
  place-items: center;
  border: 4px solid #fff7db;
  border-radius: 50%;
  background: linear-gradient(145deg, #0b8877, #075d55);
  box-shadow: 0 5px 0 #073f3a, 0 9px 20px rgba(7, 79, 70, .28);
  font-size: 35px;
}

.boat-pov-camera-mark i {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 14px;
  height: 14px;
  border: 3px solid #fff7d2;
  border-radius: 50%;
  background: #ef4f42;
  box-shadow: 0 0 0 4px rgba(239, 79, 66, .2);
  animation: boat-pov-pulse 1.1s ease-in-out infinite;
}

.boat-pov-kicker {
  display: inline-flex;
  margin: 5px auto 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #f1c83d;
  color: #7a3c23;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .12em;
}

.boat-pov-card h1 {
  max-width: 360px;
  margin: 0 auto 8px;
  color: #075d55;
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
  font-size: clamp(30px, 9vw, 44px);
  font-weight: 1000;
  letter-spacing: -.045em;
  line-height: .94;
  text-wrap: balance;
  text-shadow: 0 3px 0 #fff7d6;
}

.boat-pov-card > p {
  max-width: 355px;
  margin: 0 auto 14px;
  color: #215f58;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.24;
}

.boat-pov-card > p b {
  color: #e84e42;
}

.boat-pov-route {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0 auto 15px;
}

.boat-pov-route > span {
  display: grid;
  min-width: 55px;
  gap: 3px;
  place-items: center;
}

.boat-pov-route > span b {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 3px solid #fff8df;
  border-radius: 50%;
  background: #13a08b;
  box-shadow: 0 4px 0 #087064;
  font-size: 25px;
}

.boat-pov-route > span:nth-of-type(2) b { background: #ed5143; box-shadow: 0 4px 0 #a72f29; }
.boat-pov-route > span:nth-of-type(3) b { background: #28a9c1; box-shadow: 0 4px 0 #147286; }
.boat-pov-route > span:nth-of-type(4) b { background: #f2c83e; box-shadow: 0 4px 0 #b17721; }

.boat-pov-route small {
  color: #0a5c53;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .07em;
}

.boat-pov-route > i {
  color: #e94f41;
  font-size: 18px;
  font-style: normal;
  font-weight: 1000;
}

.boat-pov-start,
.boat-pov-finish-actions button {
  width: 100%;
  min-height: 61px;
  border: 3px solid #fff7d9;
  border-radius: 19px;
  background: linear-gradient(#f45a49, #e94238);
  box-shadow: 0 6px 0 #952d27, 0 9px 18px rgba(142, 43, 35, .2);
  color: #fff9dc;
  font: inherit;
  font-size: 19px;
  font-weight: 1000;
  letter-spacing: .02em;
  text-shadow: 0 2px 0 rgba(96, 27, 23, .34);
  touch-action: manipulation;
}

.boat-pov-start {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.boat-pov-start:active,
.boat-pov-finish-actions button:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #952d27;
}

.boat-pov-note {
  display: block;
  margin: 11px 0 7px;
  color: #54736d;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .07em;
}

.boat-pov-back {
  min-height: 38px;
  border: 0;
  background: transparent;
  color: #0a695f;
  font: inherit;
  font-size: 12px;
  font-weight: 1000;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.boat-pov-live {
  position: absolute;
  top: calc(9px + var(--safe-top));
  left: calc(10px + var(--safe-left));
  right: calc(10px + var(--safe-right));
  display: none;
  grid-template-columns: auto minmax(0, 1fr) 42px;
  align-items: center;
  gap: 7px;
  pointer-events: none;
}

.boat-pov-overlay[data-state="active"] {
  display: block;
  padding: 0;
  background: transparent;
  pointer-events: none;
}

.boat-pov-overlay[data-state="active"] .boat-pov-card {
  display: none;
}

.boat-pov-overlay[data-state="active"] .boat-pov-live {
  display: grid;
}

.boat-pov-rec,
.boat-pov-status,
.boat-pov-live > button {
  border: 2px solid rgba(255, 246, 208, .94);
  background: rgba(5, 77, 69, .91);
  box-shadow: 0 4px 0 rgba(2, 38, 34, .7), 0 8px 20px rgba(2, 35, 31, .24);
  color: #fff5cd;
  backdrop-filter: blur(8px);
}

.boat-pov-rec {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .06em;
}

.boat-pov-rec i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff5547;
  box-shadow: 0 0 0 4px rgba(255, 85, 71, .2);
  animation: boat-pov-pulse 1.1s ease-in-out infinite;
}

.boat-pov-status {
  display: flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  overflow: hidden;
  border-radius: 999px;
}

.boat-pov-status b {
  overflow: hidden;
  font-size: clamp(10px, 3vw, 13px);
  font-weight: 1000;
  letter-spacing: .035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boat-pov-live > button {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  font: inherit;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  pointer-events: auto;
}

.boat-pov-progress {
  grid-column: 1 / -1;
  height: 7px;
  margin: 1px 5px 0;
  overflow: hidden;
  border: 2px solid rgba(255, 246, 208, .92);
  border-radius: 999px;
  background: rgba(4, 61, 55, .72);
  box-shadow: 0 3px 9px rgba(2, 31, 28, .25);
}

.boat-pov-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f04f42, #f3c840 28%, #22a8bd 55%, #e54788 78%, #0b987f);
  transition: width .22s linear;
}

.boat-pov-overlay[data-state="complete"] {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 224, 98, .22), transparent 44%),
    linear-gradient(rgba(2, 49, 45, .36), rgba(1, 29, 27, .78));
}

.boat-pov-overlay[data-state="complete"] .boat-pov-live {
  display: none;
}

.boat-pov-finish-burst {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.boat-pov-finish-burst i {
  position: absolute;
  width: 11px;
  height: 24px;
  border-radius: 3px;
  background: #e94f42;
  transform: rotate(24deg);
}

.boat-pov-finish-burst i:nth-child(1) { top: 42px; left: 24px; background: #20a7bd; transform: rotate(-24deg); }
.boat-pov-finish-burst i:nth-child(2) { top: 84px; right: 28px; background: #e64b89; transform: rotate(34deg); }
.boat-pov-finish-burst i:nth-child(3) { top: 138px; left: 14px; background: #f1c73c; transform: rotate(62deg); }
.boat-pov-finish-burst i:nth-child(4) { top: 176px; right: 15px; background: #0b8a77; transform: rotate(-52deg); }
.boat-pov-finish-burst i:nth-child(5) { top: 25px; right: 76px; width: 13px; height: 13px; border-radius: 50%; background: #7447aa; }

.boat-pov-replay-frame {
  position: relative;
  width: min(100%, 270px);
  max-height: 43dvh;
  margin: 11px auto 15px;
  overflow: hidden;
  border: 4px solid #0b786c;
  border-radius: 21px;
  background: #063f3a;
  box-shadow: 0 6px 0 #064f48, 0 12px 22px rgba(3, 54, 49, .2);
}

.boat-pov-replay-frame video {
  display: block;
  width: 100%;
  max-height: 43dvh;
  background: #063f3a;
  object-fit: contain;
}

.boat-pov-live-only {
  display: grid;
  gap: 3px;
  margin: 12px 0 15px;
  padding: 13px;
  border: 3px solid #0c8576;
  border-radius: 18px;
  background: rgba(255, 255, 255, .48);
}

.boat-pov-live-only span { font-size: 31px; }
.boat-pov-live-only b { font-size: 16px; }
.boat-pov-live-only small { font-size: 12px; font-weight: 800; }

.boat-pov-finish-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.boat-pov-finish-actions button {
  min-height: 51px;
  padding: 7px;
  border-radius: 16px;
  font-size: 12px;
}

.boat-pov-finish-actions button:nth-child(2) {
  background: linear-gradient(#16a38e, #0b8172);
  box-shadow: 0 6px 0 #07594f, 0 9px 18px rgba(7, 89, 79, .2);
}

.boat-pov-finish-actions .boat-pov-back {
  grid-column: 1 / -1;
  min-height: 34px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #0a695f;
  text-shadow: none;
}

@keyframes boat-pov-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.78); }
}

@media (max-width: 390px), (max-height: 720px) {
  .boat-pov-card {
    padding: 18px 14px 13px;
    border-width: 3px;
    border-radius: 25px;
  }

  .boat-pov-camera-mark {
    width: 59px;
    height: 59px;
    margin-bottom: 6px;
    font-size: 28px;
  }

  .boat-pov-card h1 {
    font-size: clamp(27px, 8.5vw, 36px);
  }

  .boat-pov-card > p {
    margin-bottom: 10px;
    font-size: 14px;
  }

  .boat-pov-route {
    gap: 2px;
    margin-bottom: 11px;
  }

  .boat-pov-route > span { min-width: 48px; }
  .boat-pov-route > span b { width: 41px; height: 41px; font-size: 21px; }
  .boat-pov-route > i { font-size: 14px; }
  .boat-pov-start { min-height: 54px; font-size: 16px; }
  .boat-pov-note { margin: 8px 0 3px; font-size: 8.5px; }

  .boat-pov-replay-frame,
  .boat-pov-replay-frame video {
    max-height: 35dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .boat-pov-camera-mark i,
  .boat-pov-rec i {
    animation: none;
  }

  .boat-pov-progress i {
    transition: none;
  }
}

/* v77 power shop: one toy shelf, one selected power, and one purchase button.
   Affordability lives beside each price so no status is clipped or mistaken
   for a second Buy button. Glows are static to avoid the old flashing panel. */
#shop-sheet.fiesta-modal {
  width: min(560px, calc(100% - 18px - var(--safe-left) - var(--safe-right)));
  height: min(720px, calc(100dvh - 18px - var(--safe-top) - var(--safe-bottom)));
  padding: 10px calc(10px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(10px + var(--safe-left));
  border: 4px solid #fff0b7;
  border-radius: 30px;
  background:
    radial-gradient(circle at 8% 6%, rgba(239, 86, 72, .19) 0 5px, transparent 5.5px),
    radial-gradient(circle at 92% 9%, rgba(35, 169, 188, .18) 0 6px, transparent 6.5px),
    linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px),
    linear-gradient(155deg, #fff5cf, #ffe5a2);
  background-size: auto, auto, 100% 31px, auto;
  box-shadow:
    0 8px 0 #d58a2b,
    0 26px 70px rgba(2, 34, 29, .55),
    inset 0 2px 0 rgba(255, 255, 255, .85);
}

#shop-sheet .sheet-handle {
  display: none;
}

#shop-sheet .sheet-header {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px 6px 5px;
}

#shop-sheet .sheet-header > div:first-child {
  min-width: 0;
}

#shop-sheet .sheet-header span {
  font-size: 10px;
  letter-spacing: .09em;
}

#shop-sheet .sheet-header h2 {
  overflow: hidden;
  margin: 1px 0 0;
  font-size: clamp(28px, 7.4vw, 39px);
  line-height: .92;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#shop-sheet .shop-header-tools {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
}

#shop-sheet .shop-header-tools .shop-wallet {
  display: grid;
  min-width: 86px;
  min-height: 46px;
  padding: 5px 9px 4px;
  align-content: center;
  border: 2px solid #d58f22;
  border-radius: 15px 18px 14px 17px;
  background: linear-gradient(145deg, #fff18a, #ffc83f);
  box-shadow: 0 4px 0 #b96b21, 0 7px 14px rgba(113, 72, 26, .13);
  color: #15453e;
  line-height: 1;
}

#shop-sheet .shop-header-tools .shop-wallet span {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .045em;
}

#shop-sheet .shop-header-tools .shop-wallet strong {
  margin-top: 3px;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: clamp(20px, 5.4vw, 27px);
  font-weight: 400;
  letter-spacing: -.025em;
}

#shop-sheet .sheet-close {
  width: 46px;
  height: 46px;
  border-width: 3px;
  font-size: 27px;
}

#shop-sheet .shop-status {
  display: block;
  flex: 0 0 auto;
  margin: 0 1px 8px;
}

#shop-sheet .shop-helper {
  min-height: 49px;
  grid-template-columns: 35px minmax(0, 1fr);
  gap: 7px;
  padding: 5px 10px 5px 7px;
  border: 2px dashed #d98a29;
  border-radius: 16px 19px 15px 18px;
  background:
    radial-gradient(circle at 94% 19%, rgba(255, 255, 255, .72) 0 3px, transparent 3.5px),
    linear-gradient(145deg, #fff0a6, #ffd85e);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .46), 0 4px 0 rgba(181, 105, 31, .32);
}

#shop-sheet .shop-helper > span {
  width: 35px;
  height: 35px;
  font-size: 19px;
}

#shop-sheet .shop-helper strong {
  color: #6e321e;
  font-size: clamp(13px, 3.6vw, 17px);
  line-height: 1;
}

#shop-sheet .shop-helper small {
  margin-top: 2px;
  color: #65482d;
  font-size: clamp(10.5px, 2.75vw, 12.5px);
  font-weight: 750;
  line-height: 1.05;
  white-space: normal;
}

#shop-sheet .shop-grid {
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-content: start;
  gap: 8px;
  padding: 2px 3px 8px;
  scroll-padding-bottom: 8px;
}

#shop-sheet .power-choice-card {
  min-height: 142px;
  padding: 8px;
  border-width: 3px;
  border-radius: 20px 18px 21px 17px;
  box-shadow: 0 4px 0 #b74d3b, 0 8px 16px rgba(73, 47, 35, .1);
  transition: transform 120ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

#shop-sheet .power-choice-card[data-upgrade-type="speed"] {
  box-shadow: 0 4px 0 #16788d, 0 8px 16px rgba(24, 94, 111, .1);
}

#shop-sheet .power-choice-card[data-upgrade-type="bag"] {
  box-shadow: 0 4px 0 #ad7121, 0 8px 16px rgba(105, 75, 25, .1);
}

#shop-sheet .power-choice-card[data-upgrade-type="runner"] {
  box-shadow: 0 4px 0 #65419c, 0 8px 16px rgba(83, 51, 116, .1);
}

#shop-sheet .power-choice-card.is-selected {
  border-color: #08786b;
  box-shadow:
    0 5px 0 #07554d,
    0 0 0 4px #ffc536,
    0 0 24px rgba(255, 197, 54, .56);
  transform: translateY(-1px) rotate(-.25deg);
}

#shop-sheet .upgrade-topline {
  min-height: 44px;
  align-items: flex-start;
}

#shop-sheet .power-choice-card .upgrade-icon {
  width: 45px;
  height: 45px;
  border-radius: 15px 18px 14px 17px;
}

#shop-sheet .power-choice-card .upgrade-icon svg {
  width: 40px;
  height: 40px;
}

#shop-sheet .upgrade-card-meta {
  z-index: 1;
  display: grid;
  justify-items: end;
  gap: 4px;
}

#shop-sheet .power-choice-card .choice-state {
  min-height: 21px;
  padding: 3px 6px 2px;
  border-width: 1.5px;
  color: #fff;
  background: #0a8b73;
  box-shadow: 0 2px 0 #066153;
  font-size: clamp(8px, 2.25vw, 10px);
  letter-spacing: .02em;
}

#shop-sheet .power-choice-card .choice-state.is-locked {
  border-color: #b8aa84;
  color: #5a5447;
  background: #ece3ca;
  box-shadow: 0 2px 0 #9f9272;
}

#shop-sheet .power-choice-card .upgrade-price {
  min-width: 50px;
  min-height: 25px;
  gap: 4px;
  padding: 3px 6px;
  font-size: clamp(13px, 3.6vw, 16px);
}

#shop-sheet .power-choice-card .upgrade-price small {
  color: #8b5d1f;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .06em;
}

#shop-sheet .power-choice-card h3 {
  margin: 6px 0 1px;
  font-size: clamp(17px, 4.55vw, 21px);
}

#shop-sheet .power-choice-card .upgrade-benefit {
  min-height: 25px;
  margin: 1px 0 4px;
  font-size: clamp(11px, 2.9vw, 13px);
  line-height: 1.04;
}

#shop-sheet .power-choice-card .upgrade-result {
  min-height: 22px;
  margin: auto 0 0;
  font-size: clamp(11px, 2.85vw, 13px);
}

#shop-sheet .power-choice-card .upgrade-result span,
#shop-sheet .power-choice-card .upgrade-result strong {
  min-height: 21px;
  padding: 2px 5px;
}

#shop-sheet .launcher-choice-card {
  min-height: 88px;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 19px;
}

#shop-sheet .launcher-choice-card .launcher-art {
  width: 50px;
  height: 50px;
  border-radius: 16px 19px 15px 18px;
}

#shop-sheet .launcher-choice-card .launcher-art svg {
  width: 45px;
  height: 45px;
}

#shop-sheet .launcher-kicker {
  font-size: 9px;
}

#shop-sheet .launcher-choice-card h3 {
  margin: 1px 0;
  font-size: clamp(16px, 4.2vw, 20px);
}

#shop-sheet .launcher-choice-card p {
  margin: 1px 0 4px;
  font-size: clamp(10px, 2.7vw, 12px);
  line-height: 1.05;
}

#shop-sheet .launcher-choice-card .choice-state {
  min-height: 25px;
  padding: 4px 7px 3px;
  font-size: clamp(8px, 2.2vw, 10px);
  white-space: nowrap;
}

#shop-sheet .rocket-save-track {
  height: 7px;
}

#shop-sheet .rocket-progress-copy {
  margin-top: 2px;
  font-size: 9.5px;
}

#shop-sheet .shop-choice-bar {
  min-height: 78px;
  grid-template-columns: minmax(0, 1fr) minmax(145px, 165px);
  gap: 8px;
  padding: 8px;
  border-radius: 19px;
}

#shop-sheet .shop-choice-copy {
  gap: 1px;
  padding-left: 2px;
}

#shop-sheet .shop-choice-copy span {
  font-size: 8.5px;
}

#shop-sheet .shop-choice-copy strong {
  font-size: clamp(17px, 4.6vw, 21px);
}

#shop-sheet .shop-choice-copy small {
  padding: 3px 6px;
  border: 1px solid rgba(137, 91, 28, .2);
  border-radius: 8px;
  color: #6a4c29;
  background: rgba(255, 255, 255, .48);
  font-size: clamp(10px, 2.65vw, 12px);
  font-weight: 800;
  white-space: nowrap;
}

#shop-sheet .shop-buy-primary {
  min-height: 58px;
  padding: 7px 9px 6px;
  border-radius: 16px;
  font-size: clamp(14px, 3.7vw, 17px);
  box-shadow:
    0 6px 0 #064b42,
    0 0 0 3px rgba(255, 218, 71, .62),
    0 0 20px rgba(21, 190, 143, .42);
  animation: none;
}

#shop-sheet .shop-buy-primary > span {
  width: 28px;
  height: 28px;
}

#shop-sheet.open .power-choice-card,
#shop-sheet.open .launcher-choice-card,
#shop-sheet.open .shop-buy-primary {
  animation: none !important;
}

@media (max-width: 350px) {
  #shop-sheet .shop-header-tools .shop-wallet {
    min-width: 74px;
    padding-inline: 6px;
  }

  #shop-sheet .shop-header-tools .shop-wallet span {
    font-size: 7px;
  }

  #shop-sheet .sheet-close {
    width: 42px;
    height: 42px;
  }

  #shop-sheet .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  #shop-sheet .power-choice-card {
    min-height: 136px;
    padding: 7px;
  }

  #shop-sheet .power-choice-card .choice-state {
    font-size: 7.5px;
  }

  #shop-sheet .shop-choice-bar {
    min-height: 104px;
    grid-template-columns: 1fr;
  }

  #shop-sheet .shop-choice-copy {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 6px;
  }

  #shop-sheet .shop-choice-copy small {
    grid-column: 1 / -1;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  #shop-sheet.fiesta-modal {
    width: min(760px, calc(100% - 16px - var(--safe-left) - var(--safe-right)));
    height: calc(100dvh - 12px - var(--safe-top) - var(--safe-bottom));
    padding: 6px calc(8px + var(--safe-right)) calc(6px + var(--safe-bottom)) calc(8px + var(--safe-left));
  }

  #shop-sheet .sheet-header {
    min-height: 40px;
    padding-bottom: 3px;
  }

  #shop-sheet .sheet-header h2 {
    font-size: 26px;
  }

  #shop-sheet .shop-header-tools .shop-wallet,
  #shop-sheet .sheet-close {
    min-height: 38px;
    height: 38px;
  }

  #shop-sheet .shop-status {
    position: absolute;
    z-index: 5;
    top: 7px;
    right: 150px;
    width: min(330px, 42%);
    margin: 0;
  }

  #shop-sheet .shop-helper {
    min-height: 38px;
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 3px 6px;
  }

  #shop-sheet .shop-helper > span {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }

  #shop-sheet .shop-helper strong {
    font-size: 11px;
  }

  #shop-sheet .shop-helper small {
    font-size: 8.5px;
  }

  #shop-sheet .shop-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding-bottom: 6px;
  }

  #shop-sheet .power-choice-card {
    min-height: 125px;
    padding: 6px;
  }

  #shop-sheet .power-choice-card .upgrade-benefit {
    display: none;
  }

  #shop-sheet .launcher-choice-card {
    min-height: 62px;
    grid-column: 1 / -1;
  }

  #shop-sheet .launcher-choice-card p,
  #shop-sheet .launcher-choice-card .rocket-progress-copy {
    display: none;
  }

  #shop-sheet .shop-choice-bar {
    min-height: 58px;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
    padding: 5px;
  }

  #shop-sheet .shop-buy-primary {
    min-height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #shop-sheet .power-choice-card,
  #shop-sheet .shop-buy-primary {
    transition: none;
  }
}

/* v79 keeps hand switching in one predictable place: the centered Settings
   card. The play view is reserved for the game, while this large toy-like
   control shows the current MOVE side before a child taps it. */
#settings-sheet.controls-settings-sheet .settings-content {
  display: grid;
  gap: 12px;
}

#settings-sheet.controls-settings-sheet .switch-hands-setting {
  position: relative;
  display: grid;
  align-items: center;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 11px;
  min-height: 86px;
  padding: 11px 12px;
  overflow: hidden;
  border: 3px solid #d74739;
  border-radius: 22px;
  background:
    radial-gradient(circle at 94% 14%, rgba(255, 255, 255, .62) 0 6px, transparent 7px),
    linear-gradient(145deg, #fff9dd, #ffd783);
  box-shadow:
    0 6px 0 #b23830,
    0 0 0 3px rgba(255, 246, 204, .76),
    0 10px 24px rgba(112, 50, 29, .2);
  color: #153c36;
  transition: translate 100ms ease, box-shadow 100ms ease;
}

#settings-sheet.controls-settings-sheet .switch-hands-setting:active {
  translate: 0 3px;
  box-shadow:
    0 3px 0 #b23830,
    0 0 0 3px rgba(255, 246, 204, .76),
    0 7px 16px rgba(112, 50, 29, .18);
}

#settings-sheet.controls-settings-sheet .switch-hands-picture {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 3px solid #fff9df;
  border-radius: 50%;
  background: #ef563f;
  box-shadow: 0 4px 0 #b7382d;
  font-family: system-ui, sans-serif;
  font-size: 28px;
  line-height: 1;
}

#settings-sheet.controls-settings-sheet .switch-hands-copy,
#settings-sheet.controls-settings-sheet .switch-hands-copy b,
#settings-sheet.controls-settings-sheet .switch-hands-copy small {
  display: block;
}

#settings-sheet.controls-settings-sheet .switch-hands-copy b {
  color: #0b665c;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: 23px;
  font-weight: 400;
  line-height: 1;
}

#settings-sheet.controls-settings-sheet .switch-hands-copy small {
  max-width: 190px;
  margin-top: 5px;
  color: #684a31;
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
}

#settings-sheet.controls-settings-sheet .switch-hands-setting > strong {
  min-width: 82px;
  padding: 10px 9px 9px;
  border: 2px solid #fff9df;
  border-radius: 13px;
  background: #0b8173;
  box-shadow: 0 3px 0 #07564f;
  color: #fff;
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .035em;
  line-height: 1.05;
  text-align: center;
}

#settings-sheet.controls-settings-sheet .switch-hands-setting:focus-visible {
  outline: 4px solid #2aa8bf;
  outline-offset: 3px;
}

@media (max-width: 359px) {
  #settings-sheet.controls-settings-sheet .sheet-header h2 {
    font-size: 31px;
  }

  #settings-sheet.controls-settings-sheet .switch-hands-setting {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 9px;
    min-height: 112px;
    padding: 9px 10px;
  }

  #settings-sheet.controls-settings-sheet .switch-hands-picture {
    width: 48px;
    height: 48px;
    font-size: 25px;
  }

  #settings-sheet.controls-settings-sheet .switch-hands-copy b {
    font-size: 21px;
  }

  #settings-sheet.controls-settings-sheet .switch-hands-setting > strong {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 36px;
    padding-block: 8px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  #settings-sheet.controls-settings-sheet .settings-content {
    grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr);
    gap: 10px;
  }

  #settings-sheet.controls-settings-sheet .music-only-card,
  #settings-sheet.controls-settings-sheet .switch-hands-setting {
    grid-column: auto;
  }
}

/* Private real-game trailer director. It never appears in ordinary play and
   keeps captions inside the phone-safe area while the canvas, real shop, and
   scripted camera cuts remain fully visible to Playwright recording. */
#game-shell[data-trailer] :is(
  .start-screen,
  .top-hud,
  .combo-badge,
  .shift-timer,
  .shift-results,
  .auto-walk-guide,
  .aim-layer,
  .launcher-reticle,
  .desktop-control-hint,
  .grab-button,
  .control-zone,
  .first-shift-tutorial,
  .toast-stack,
  .pickup-float,
  .ability-unlock,
  .leaderboard-modal,
  .finale-screen,
  .rotate-note,
  .build-number
) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#game-shell[data-trailer] .start-screen {
  display: none !important;
  transition: none !important;
}

.trailer-director {
  position: absolute;
  z-index: 120;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
}

.trailer-start-card {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 13px;
  padding:
    calc(30px + var(--safe-top))
    calc(22px + var(--safe-right))
    calc(30px + var(--safe-bottom))
    calc(22px + var(--safe-left));
  background:
    radial-gradient(circle at 50% 23%, rgba(255, 220, 78, .38), transparent 36%),
    linear-gradient(155deg, rgba(4, 91, 82, .84), rgba(2, 43, 39, .96));
  color: #fff7d8;
  text-align: center;
  pointer-events: auto;
  backdrop-filter: blur(8px) saturate(.9);
  -webkit-backdrop-filter: blur(8px) saturate(.9);
}

.trailer-start-card[hidden] {
  display: none;
}

.trailer-start-card > span {
  padding: 8px 12px 7px;
  border: 2px solid rgba(255, 246, 205, .68);
  border-radius: 999px;
  background: rgba(4, 61, 56, .74);
  color: #ffe46c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}

.trailer-start-card h1 {
  margin: 4px 0 0;
  color: #fff8dc;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: clamp(52px, 15vw, 78px);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: .88;
  text-shadow:
    4px 4px 0 #d84034,
    8px 8px 0 #eebc35,
    0 18px 36px rgba(0, 28, 25, .42);
}

.trailer-start-card p {
  max-width: 330px;
  margin: 2px 0 6px;
  color: #fff7df;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.28;
}

.trailer-start-card button {
  min-width: min(330px, 90vw);
  min-height: 66px;
  padding: 12px 22px 10px;
  border: 4px solid #fff5ce;
  border-radius: 21px;
  background: #ef523f;
  box-shadow: 0 8px 0 #9f3028, 0 17px 36px rgba(0, 24, 21, .4);
  color: #fff;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: 28px;
  letter-spacing: .035em;
}

.trailer-caption {
  --trailer-progress: 0%;
  position: absolute;
  top: calc(18px + var(--safe-top));
  left: 50%;
  display: none;
  width: min(360px, calc(100% - 28px - var(--safe-left) - var(--safe-right)));
  min-height: 66px;
  padding: 10px 16px 12px;
  overflow: hidden;
  border: 3px solid #fff4c7;
  border-radius: 20px;
  background: rgba(4, 79, 71, .9);
  box-shadow: 0 6px 0 rgba(1, 44, 40, .86), 0 12px 28px rgba(0, 26, 23, .3);
  color: #fff8df;
  text-align: center;
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.trailer-director[data-active="true"] .trailer-caption {
  display: block;
}

.trailer-director[data-state="end-card"] .trailer-caption {
  display: none;
}

.trailer-caption::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: var(--trailer-progress);
  height: 5px;
  background: #ffd54f;
  box-shadow: 0 0 12px rgba(255, 213, 79, .72);
}

.trailer-caption strong,
.trailer-caption small {
  display: block;
}

.trailer-caption strong {
  color: #ffe061;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: .035em;
  line-height: 1;
}

.trailer-caption small {
  margin-top: 4px;
  color: #fff8df;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .055em;
  line-height: 1.1;
}

.trailer-end-card {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding:
    calc(32px + var(--safe-top))
    calc(20px + var(--safe-right))
    calc(32px + var(--safe-bottom))
    calc(20px + var(--safe-left));
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 218, 67, .94) 0 6px, transparent 7px),
    radial-gradient(circle at 82% 26%, rgba(234, 73, 136, .9) 0 7px, transparent 8px),
    radial-gradient(circle at 14% 75%, rgba(42, 168, 190, .94) 0 8px, transparent 9px),
    linear-gradient(155deg, #fff0b4, #ffd264);
  color: #124a43;
  text-align: center;
}

.trailer-end-card[hidden] {
  display: none;
}

.trailer-end-card > span {
  padding: 8px 12px 7px;
  border: 2px solid #0b8173;
  border-radius: 999px;
  color: #0b6c61;
  background: rgba(255, 250, 224, .78);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}

.trailer-end-card h1 {
  margin: 7px 0 0;
  color: #087467;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: clamp(76px, 24vw, 112px);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: .76;
  text-shadow: 5px 5px 0 #f04f3d, 10px 10px 0 #fff2ba;
}

.trailer-end-card p {
  margin: 14px 0 2px;
  padding: 9px 15px 8px;
  border-radius: 999px;
  background: #ef523f;
  box-shadow: 0 5px 0 #a83228;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .08em;
}

.trailer-end-card > strong {
  margin-top: 8px;
  color: #104c45;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: clamp(25px, 8vw, 38px);
  font-weight: 400;
  line-height: 1.02;
}

@media (orientation: landscape) and (max-height: 520px) {
  .trailer-start-card {
    gap: 7px;
  }

  .trailer-start-card h1 {
    font-size: 48px;
  }

  .trailer-start-card p {
    max-width: 520px;
    font-size: 12px;
  }

  .trailer-start-card button {
    min-height: 48px;
    font-size: 22px;
  }

  .trailer-caption {
    top: calc(7px + var(--safe-top));
    min-height: 48px;
    padding: 6px 12px 8px;
  }
}

/* v82 quiet paper power cards: the icons and borders carry category color
   while one warm paper surface keeps the four choices calm and scannable. */
#shop-sheet .power-choice-card,
#shop-sheet .power-choice-card[data-upgrade-type="speed"],
#shop-sheet .power-choice-card[data-upgrade-type="bag"],
#shop-sheet .power-choice-card[data-upgrade-type="runner"] {
  background: #fffaf0;
  box-shadow:
    0 4px 0 rgba(22, 77, 69, .28),
    0 8px 16px rgba(73, 47, 35, .09);
}

#shop-sheet .power-choice-card::after {
  display: none;
}

#shop-sheet .power-choice-card.is-selected {
  background: #fffdf5;
  box-shadow:
    0 5px 0 #07554d,
    0 0 0 4px #ffc536,
    0 0 20px rgba(255, 197, 54, .38);
}

#shop-sheet .power-choice-card.is-locked {
  background: #fffaf0;
}

/* v86 mobile clarity pass: modal priority, direct-buy power cards, a smaller
   river-aware HUD, and simple size/race controls. */
.start-screen.modal-suspended {
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}

.intro-music-status {
  cursor: default;
  pointer-events: none;
}

.shift-timer-copy {
  display: grid;
  place-items: center;
  gap: 1px;
}

.shift-exit {
  position: fixed;
  top: calc(64px + var(--safe-top, 0px));
  right: calc(10px + var(--safe-right, 0px));
  display: inline-flex;
  min-width: 104px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 11px 6px;
  appearance: none;
  border: 3px solid #fff5cf;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(180deg, #ef5a43, #d74435);
  box-shadow: 0 5px 0 #8f2e27, 0 10px 20px rgba(55, 22, 18, .26);
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .025em;
  line-height: 1;
  pointer-events: auto;
  touch-action: manipulation;
}

.shift-exit span {
  font-family: system-ui, sans-serif;
  font-size: 22px;
  line-height: .7;
}

.shift-exit:active {
  translate: 0 3px;
  box-shadow: 0 2px 0 #8f2e27, 0 6px 13px rgba(55, 22, 18, .22);
}

.mini-map {
  width: min(206px, calc(100vw - 106px));
  padding: 6px 7px 7px;
}

.mini-map-canvas {
  height: 47px;
}

.mini-map-footer {
  gap: 4px;
  margin-top: 4px;
}

.mini-map-stats > .mini-map-stat {
  grid-template-columns: 18px minmax(0, 1fr);
  min-height: 44px;
  padding: 5px 3px;
}

.mini-map-stats > .bag-chip {
  grid-template-columns: 18px minmax(0, 1fr);
}

.top-hud .mini-map-stats .mini-map-stat > .kid-stat-picture {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  font-size: 12px;
}

.top-hud .mini-map-stats .mini-map-stat .kid-stat-copy strong,
.top-hud .mini-map-stats .mini-map-stat .mini-map-count b {
  font-size: clamp(14px, 3.7vw, 17px);
}

#shop-sheet.fiesta-modal {
  background: #fffaf0;
  background-image: none;
}

#shop-sheet .shop-helper {
  border-style: solid;
  border-color: #dfc994;
  background: #fffdf7;
  box-shadow: 0 3px 0 rgba(129, 93, 44, .24);
}

#shop-sheet .power-choice-card {
  min-height: 158px;
}

#shop-sheet .power-choice-card,
#shop-sheet .power-choice-card.is-locked {
  background: linear-gradient(150deg, #fff8e8, #ffdcd2);
  box-shadow: 0 4px 0 #b74d3b, 0 8px 16px rgba(73, 47, 35, .1);
}

#shop-sheet .power-choice-card[data-upgrade-type="speed"],
#shop-sheet .power-choice-card[data-upgrade-type="speed"].is-locked {
  background: linear-gradient(150deg, #f7feff, #d8f3fb);
  box-shadow: 0 4px 0 #16788d, 0 8px 16px rgba(24, 94, 111, .1);
}

#shop-sheet .power-choice-card[data-upgrade-type="bag"],
#shop-sheet .power-choice-card[data-upgrade-type="bag"].is-locked {
  background: linear-gradient(150deg, #fffdf0, #ffec9e);
  box-shadow: 0 4px 0 #ad7121, 0 8px 16px rgba(105, 75, 25, .1);
}

#shop-sheet .power-choice-card[data-upgrade-type="runner"],
#shop-sheet .power-choice-card[data-upgrade-type="runner"].is-locked {
  background: linear-gradient(150deg, #fffaff, #eadcff);
  box-shadow: 0 4px 0 #65419c, 0 8px 16px rgba(83, 51, 116, .1);
}

#shop-sheet .launcher-choice-card,
#shop-sheet .launcher-choice-card.is-locked {
  min-height: 104px;
  background: linear-gradient(145deg, #fff9e9, #ffe5ad);
}

#shop-sheet .power-buy-band {
  display: inline-flex;
  width: 100%;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 8px 5px;
  border: 2px solid #c7f2d6;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(180deg, #13a982, #08705f);
  box-shadow: 0 3px 0 #064b42;
  font-size: clamp(10px, 2.8vw, 13px);
  font-style: normal;
  font-weight: 900;
  letter-spacing: .015em;
  line-height: 1;
  text-align: center;
}

#shop-sheet .power-buy-band i {
  font-style: normal;
}

#shop-sheet .power-buy-band.is-locked {
  border-color: #e2d7b8;
  color: #585144;
  background: linear-gradient(180deg, #f2ead4, #ddd1b2);
  box-shadow: 0 3px 0 #a99c77;
}

#shop-sheet .launcher-choice-card .power-buy-band {
  grid-column: 3;
  grid-row: 1;
  width: min(122px, 26vw);
  min-height: 42px;
  margin: 0;
  padding-inline: 7px;
}

#settings-sheet.controls-settings-sheet .duck-size-setting {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 3px solid #2aa6bc;
  border-radius: 22px;
  background: #f8fdff;
  box-shadow: 0 5px 0 #16788d, 0 10px 22px rgba(24, 94, 111, .16);
}

#settings-sheet .duck-size-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

#settings-sheet .duck-size-heading > span:last-child,
#settings-sheet .duck-size-heading b,
#settings-sheet .duck-size-heading small {
  display: block;
}

#settings-sheet .duck-size-picture {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #ffe16b;
  box-shadow: 0 3px 0 #b97925;
  font-size: 25px;
}

#settings-sheet .duck-size-heading b {
  color: #0b665c;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

#settings-sheet .duck-size-heading small {
  margin-top: 4px;
  color: #53665f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
}

#settings-sheet .duck-size-setting .setting-slider-row {
  grid-template-columns: 28px minmax(0, 1fr) 28px 52px;
  gap: 6px;
}

#settings-sheet .duck-size-setting .duck-small,
#settings-sheet .duck-size-setting .duck-big {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #0b8173;
  background: #e1f6f3;
  font-family: system-ui, sans-serif;
  font-size: 14px;
}

#settings-sheet .duck-size-setting .duck-big {
  font-size: 20px;
}

/* v88 brings the only useful camera choice back to ordinary settings. The
   hidden Camera Lab remains pinned for later, while children choose between
   two picture buttons instead of reading developer-style camera controls. */
#settings-sheet.controls-settings-sheet .camera-view-setting {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 3px solid #ec8b32;
  border-radius: 22px;
  background: #fffaf0;
  box-shadow:
    0 5px 0 #b85b25,
    0 10px 22px rgba(122, 69, 29, .16);
}

#settings-sheet .camera-view-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

#settings-sheet .camera-view-heading > span:last-child,
#settings-sheet .camera-view-heading b,
#settings-sheet .camera-view-heading small {
  display: block;
}

#settings-sheet .camera-view-picture {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #ffbd55;
  box-shadow: 0 3px 0 #b85b25;
  font-family: system-ui, sans-serif;
  font-size: 24px;
}

#settings-sheet .camera-view-heading b {
  color: #0b665c;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

#settings-sheet .camera-view-heading small {
  margin-top: 4px;
  color: #68523d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
}

#settings-sheet .camera-view-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 10px;
  border-top: 2px dashed rgba(184, 91, 37, .24);
}

#settings-sheet .camera-view-picker button {
  position: relative;
  display: grid;
  align-items: center;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 7px;
  min-width: 0;
  min-height: 68px;
  padding: 8px 9px;
  border: 3px solid #e6d8b2;
  border-radius: 17px;
  background: #fff4d1;
  box-shadow: 0 4px 0 #b9a472;
  color: #174f47;
  text-align: left;
  transition:
    translate 110ms ease,
    box-shadow 110ms ease,
    background 150ms ease,
    border-color 150ms ease;
}

#settings-sheet .camera-view-picker button > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .78);
  font-family: system-ui, sans-serif;
  font-size: 20px;
  line-height: 1;
}

#settings-sheet .camera-view-picker button b,
#settings-sheet .camera-view-picker button small {
  display: block;
}

#settings-sheet .camera-view-picker button b {
  font-family: "Fiesta Lilita", "Avenir Next Rounded", "Cooper Black", Georgia, serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

#settings-sheet .camera-view-picker button small {
  margin-top: 4px;
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", "Trebuchet MS", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .035em;
  line-height: 1;
}

#settings-sheet .camera-view-picker button[aria-pressed="true"] {
  border-color: #fff9df;
  background: linear-gradient(155deg, #13a894, #08766b);
  box-shadow:
    0 5px 0 #07564f,
    0 0 0 3px rgba(42, 166, 188, .28),
    0 8px 18px rgba(7, 86, 79, .22);
  color: #fff;
}

#settings-sheet .camera-view-picker button[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: -7px;
  right: -5px;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 2px solid #fff9df;
  border-radius: 50%;
  background: #ef563f;
  box-shadow: 0 2px 0 #b7382d;
  color: #fff;
  font-family: system-ui, sans-serif;
  font-size: 13px;
  font-weight: 900;
}

#settings-sheet .camera-view-picker button:active {
  translate: 0 3px;
  box-shadow: 0 2px 0 #07564f;
}

#settings-sheet .camera-view-picker button:focus-visible {
  outline: 4px solid #2aa8bf;
  outline-offset: 3px;
}

@media (max-width: 359px) {
  .mini-map {
    width: min(194px, calc(100vw - 100px));
  }

  .shift-exit {
    min-width: 94px;
    padding-inline: 8px;
    font-size: 11px;
  }

  #shop-sheet .power-choice-card {
    min-height: 153px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .shift-exit {
    top: calc(7px + var(--safe-top));
    right: calc(64px + var(--safe-right));
    min-height: 42px;
  }

  #shop-sheet .power-choice-card {
    min-height: 143px;
  }

  #shop-sheet .launcher-choice-card {
    min-height: 68px;
  }

  #settings-sheet.controls-settings-sheet .settings-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #settings-sheet.controls-settings-sheet .duck-size-setting {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shift-exit,
  #shop-sheet .power-choice-card,
  #settings-sheet .camera-view-picker button {
    transition: none;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  #settings-sheet.controls-settings-sheet :is(
    .music-only-card,
    .duck-size-setting,
    .camera-view-setting,
    .switch-hands-setting
  ) {
    grid-column: auto;
  }
}

/* v90 readable high-score HUD: each stat keeps its picture without spending
   the horizontal space needed by five-digit totals and large baskets. */
.mini-map-stats {
  grid-template-columns: .82fr 1.1fr 1.28fr;
}

.mini-map-stats > .mini-map-stat,
.mini-map-stats > .bag-chip {
  display: block;
  padding: 5px 4px;
}

.top-hud .mini-map-stats .mini-map-stat > .kid-stat-picture {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 15px;
  height: 15px;
  border-radius: 5px;
  font-size: 10px;
  opacity: .92;
}

.mini-map-stats .kid-stat-copy,
.mini-map-stats .mini-map-count {
  position: relative;
  z-index: 1;
  justify-items: start;
  text-align: left;
}

.top-hud .mini-map-stats .mini-map-stat .kid-stat-copy small,
.top-hud .mini-map-stats .mini-map-stat .mini-map-count small {
  max-width: calc(100% - 12px);
  color: #ffe477;
  font-size: 6.8px;
  letter-spacing: .025em;
}

.top-hud .mini-map-stats .mini-map-swept .mini-map-count b {
  font-size: clamp(13px, 3.55vw, 16px);
  letter-spacing: -.045em;
}

.top-hud .mini-map-stats .cash-chip .kid-stat-copy strong {
  font-size: clamp(12px, 3.35vw, 15px);
  letter-spacing: -.05em;
}

.top-hud .mini-map-stats .bag-chip {
  padding-bottom: 10px;
}

.top-hud .mini-map-stats .bag-chip .kid-stat-copy strong {
  font-size: clamp(11px, 3.05vw, 13.5px);
  letter-spacing: -.065em;
}

.top-hud .mini-map-stats .bag-chip .bag-meter {
  position: absolute;
  right: 4px;
  bottom: 3px;
  left: 4px;
  width: auto;
}

@media (max-width: 359px) {
  .top-hud .mini-map-stats .mini-map-swept .mini-map-count b {
    font-size: 12.5px;
  }

  .top-hud .mini-map-stats .cash-chip .kid-stat-copy strong {
    font-size: 11.5px;
  }

  .top-hud .mini-map-stats .bag-chip .kid-stat-copy strong {
    font-size: 10.5px;
  }
}

/* v91 desktop direct-pointer controls: the cursor selects the paper it is
   actually over; camera movement is reserved for a deliberate right-drag. */
@media (pointer: fine) and (hover: hover) and (min-width: 700px) {
  #game-shell[data-pointer-lock="desktop-direct"] #game-canvas {
    cursor: crosshair;
  }

  #game-shell[data-pointer-lock="desktop-direct"][data-desktop-hover="confetti"] #game-canvas,
  #game-shell[data-pointer-lock="desktop-direct"][data-desktop-hover="action"] #game-canvas {
    cursor: pointer;
  }

  #game-shell[data-pointer-lock="desktop-direct"][data-desktop-look="dragging"] #game-canvas {
    cursor: grabbing;
  }

  #game-shell[data-pointer-lock="desktop-direct"] .desktop-aim-reticle {
    display: none;
  }

  #game-shell[data-pointer-lock="desktop-direct"] .aim-layer {
    position: fixed;
    top: 50%;
    left: 50%;
    gap: 0;
  }

  #game-shell[data-pointer-lock="desktop-direct"] .aim-label:not(.is-hidden) {
    max-width: 220px;
    padding: 7px 11px 6px;
    border: 2px solid rgba(255, 240, 176, .92);
    border-radius: 12px;
    background: rgba(5, 78, 69, .95);
    box-shadow: 0 4px 0 rgba(3, 48, 43, .82), 0 8px 18px rgba(2, 29, 26, .2);
    color: #fff9dd;
    font-family: "Fiesta Fredoka", "Avenir Next Rounded", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.05;
    text-align: center;
    text-transform: none;
    white-space: nowrap;
    transform: translateY(30px);
  }

  #game-shell[data-pointer-lock="desktop-direct"][data-desktop-help="new"] .desktop-control-hint {
    position: fixed;
    z-index: 24;
    left: 50%;
    bottom: 26px;
    display: grid;
    min-width: min(560px, calc(100vw - 32px));
    gap: 3px;
    padding: 11px 19px 10px;
    border: 2px solid rgba(255, 231, 126, .82);
    border-radius: 18px;
    background: rgba(4, 69, 62, .94);
    box-shadow: 0 6px 0 rgba(3, 43, 39, .8), 0 12px 28px rgba(1, 25, 22, .28);
    color: #fff4ca;
    text-align: center;
    transform: translateX(-50%);
    pointer-events: none;
  }

  #game-shell[data-pointer-lock="desktop-direct"] .desktop-control-hint b {
    font-family: "Fiesta Lilita", "Avenir Next Rounded", sans-serif;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: .01em;
    text-transform: none;
  }

  #game-shell[data-pointer-lock="desktop-direct"] .desktop-control-hint span {
    color: rgba(255, 244, 202, .84);
    font-family: "Fiesta Fredoka", "Avenir Next Rounded", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .045em;
  }

  #game-shell[data-desktop-help="used"] .desktop-control-hint {
    display: none;
  }
}

/* v92 collision-proof stat headers: each picture and label share a fixed
   first row while the live number gets the full width of the second row. */
.mini-map {
  width: min(218px, calc(100vw - 106px));
}

.mini-map-stats > .mini-map-stat,
.mini-map-stats > .bag-chip {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  grid-template-rows: 14px minmax(0, 1fr);
  align-items: center;
  gap: 1px 3px;
  padding: 5px;
}

.top-hud .mini-map-stats .bag-chip {
  padding: 5px 5px 10px;
}

.mini-map-stats .kid-stat-copy,
.mini-map-stats .mini-map-count {
  display: contents;
}

.top-hud .mini-map-stats .mini-map-stat > .kid-stat-picture {
  position: static;
  grid-column: 1;
  grid-row: 1;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  font-size: 9px;
}

.top-hud .mini-map-stats .mini-map-stat :is(
  .kid-stat-copy small,
  .mini-map-count small
) {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  font-size: 6.4px;
  letter-spacing: .015em;
  text-overflow: clip;
}

.mini-map-stats .mini-map-stat :is(
  .kid-stat-copy strong,
  .mini-map-count b
) {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: center;
  justify-self: start;
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 359px) {
  .mini-map {
    width: min(208px, calc(100vw - 104px));
  }

  .mini-map-stats > .mini-map-stat,
  .mini-map-stats > .bag-chip {
    grid-template-columns: 13px minmax(0, 1fr);
    grid-template-rows: 13px minmax(0, 1fr);
    gap: 1px 2px;
    padding-inline: 3px;
  }

  .top-hud .mini-map-stats .bag-chip {
    padding-inline: 3px;
  }

  .top-hud .mini-map-stats .mini-map-stat > .kid-stat-picture {
    width: 13px;
    height: 13px;
    font-size: 8px;
  }

  .top-hud .mini-map-stats .mini-map-stat :is(
    .kid-stat-copy small,
    .mini-map-count small
  ) {
    font-size: 6px;
    letter-spacing: 0;
  }
}

/* v93 last-piece rescue: the finish becomes a bright toy-like treasure hunt
   instead of leaving a child to scan the entire River Walk for one pixel. */
.mini-map-confetti circle {
  fill: rgba(255, 211, 79, .3);
  stroke: #fff7d8;
  stroke-width: 1.7;
  filter: drop-shadow(0 0 3px #ffcf4f);
  animation: last-confetti-map-pulse 900ms ease-in-out infinite alternate;
}

.mini-map-confetti path {
  fill: #ffcf4f;
  stroke: #d7443f;
  stroke-width: .8;
  transform-box: fill-box;
  transform-origin: center;
  animation: last-confetti-map-star 1.35s ease-in-out infinite;
}

.last-confetti-helper[hidden] {
  display: none !important;
}

.last-confetti-helper {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 43px;
  margin-top: 6px;
  padding: 5px 8px 5px 6px;
  border: 2px solid #fff2b6;
  border-radius: 13px;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 255, 255, .34), transparent 31%),
    linear-gradient(135deg, #f6c94d 0 27%, #f1793e 27% 61%, #df4a82 61% 100%);
  box-shadow:
    0 4px 0 #8d373a,
    0 7px 15px rgba(1, 29, 26, .28),
    inset 0 1px 0 rgba(255, 255, 255, .42);
  color: #fffdf0;
  text-shadow: 0 2px 0 rgba(101, 35, 40, .58);
}

.last-confetti-star {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 2px solid #fff9d6;
  border-radius: 50%;
  background: #087b6e;
  box-shadow: 0 3px 0 #07554d, 0 0 0 3px rgba(255, 244, 170, .25);
  color: #ffe26b;
  font-size: 20px;
  line-height: 1;
  animation: last-confetti-helper-star 820ms ease-in-out infinite alternate;
}

.last-confetti-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
  text-align: left;
}

.last-confetti-copy strong {
  overflow: hidden;
  font-family: "Fiesta Lilita", "Avenir Next Rounded", Georgia, serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .015em;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

.last-confetti-copy small {
  overflow: hidden;
  color: #fff7c9;
  font-family: "Fiesta Fredoka", "Avenir Next Rounded", sans-serif;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.1;
  text-overflow: clip;
  white-space: nowrap;
}

#game-shell[data-last-confetti-rescue="active"] .mini-map {
  border-color: rgba(255, 226, 107, .96);
  box-shadow:
    0 8px 26px rgba(1, 28, 25, .34),
    0 0 0 3px rgba(255, 207, 79, .2),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}

#game-shell[data-last-confetti-relocated="true"] .last-confetti-helper {
  animation: last-confetti-helper-pop 560ms cubic-bezier(.2, .9, .25, 1.25) both;
}

@keyframes last-confetti-map-pulse {
  from { opacity: .55; stroke-width: 1.2; }
  to { opacity: 1; stroke-width: 2.2; }
}

@keyframes last-confetti-map-star {
  0%, 100% { transform: rotate(-8deg) scale(.9); }
  50% { transform: rotate(8deg) scale(1.14); }
}

@keyframes last-confetti-helper-star {
  from { transform: rotate(-7deg) scale(.94); }
  to { transform: rotate(7deg) scale(1.08); }
}

@keyframes last-confetti-helper-pop {
  0% { transform: scale(.82); }
  62% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

@media (max-width: 359px) {
  .last-confetti-helper {
    grid-template-columns: 27px minmax(0, 1fr);
    gap: 5px;
    min-height: 39px;
    padding-inline: 5px;
  }

  .last-confetti-star {
    width: 27px;
    height: 27px;
    font-size: 17px;
  }

  .last-confetti-copy strong {
    font-size: 12.5px;
  }

  .last-confetti-copy small {
    font-size: 6.4px;
    letter-spacing: .08em;
  }
}