:root {
  --qk-bg: #3b2418;
  --ink: #3b2418;
  --cream: #fff3cf;
  --sun-gold: #f6b62e;
  --leaf: #427a45;
  --stage-safe-x: max(24px, var(--qk-safe-left));
  --stage-safe-right: max(24px, var(--qk-safe-right));
}

html,
body {
  overflow: hidden;
  background: #3b2418;
}

body {
  color: var(--ink);
  font-family: 'Fredoka', 'Arial Rounded MT Bold', sans-serif;
}

button {
  color: inherit;
  font: inherit;
}

button,
[role='slider'] {
  touch-action: none;
}

.game-screen {
  display: grid;
  min-height: 100dvh;
  background-color: #7e9c68;
  background-image: var(--stage-image, url('../assets/stage.webp'));
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  isolation: isolate;
}

.stage-lighting {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.stage-lighting img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 180ms linear;
}

.physical-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.fatal-message {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 15vw;
  background: #fff3cf;
  color: #3b2418;
  font-size: clamp(24px, 4vw, 48px);
  text-align: center;
}

.qk-hud-btn {
  filter: drop-shadow(0 7px 4px rgba(55, 31, 17, .28));
}

.qk-hud-btn:focus-visible,
.mode-card:focus-visible,
.shadow-choice:focus-visible,
.show-toy-choice:focus-visible,
.sun-handle:focus-visible,
.rail-hit:focus-visible,
.time-stop:focus-visible,
.round-control:focus-visible,
.action-button:focus-visible {
  outline: 7px solid #fff;
  outline-offset: 5px;
  filter: drop-shadow(0 0 3px #1f5d39) drop-shadow(0 7px 5px rgba(55, 31, 17, .25));
}

/* Splash --------------------------------------------------------------- */

.splash-screen {
  grid-template-rows: minmax(144px, 25dvh) auto minmax(250px, 44dvh) 1fr;
  justify-items: center;
  padding:
    max(18px, var(--qk-safe-top))
    var(--stage-safe-right)
    max(12px, var(--qk-safe-bottom))
    var(--stage-safe-x);
}

.title-lockup {
  z-index: 2;
  align-self: end;
  width: min(55vw, 660px);
  max-height: 22dvh;
  object-fit: contain;
  filter: drop-shadow(0 10px 5px rgba(53, 29, 16, .25));
  pointer-events: none;
}

.splash-kicker {
  z-index: 2;
  margin: 2px 0 5px;
  color: #6c4024;
  font-size: clamp(21px, 2.4vw, 34px);
  line-height: 1;
  letter-spacing: .01em;
  text-shadow: 0 2px 0 rgba(255, 248, 218, .9);
}

.mode-shelf {
  z-index: 3;
  display: grid;
  align-self: start;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: clamp(10px, 1.5vw, 24px);
  width: min(88vw, 1120px);
  height: min(39dvh, 390px);
}

.mode-card {
  position: relative;
  display: grid;
  min-width: 96px;
  min-height: 160px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 150ms ease, filter 150ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.mode-card .physical-base {
  filter: drop-shadow(0 9px 6px rgba(62, 38, 19, .3));
}

.mode-card:active {
  transform: translateY(6px) scale(.97);
}

.mode-card:hover {
  filter: brightness(1.04);
}

.mode-art {
  position: absolute;
  z-index: 1;
  inset: 10% 11% 31%;
  pointer-events: none;
}

.mode-art img {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
}

.mode-title {
  position: absolute;
  z-index: 2;
  right: 12%;
  bottom: 14%;
  left: 12%;
  font-size: clamp(18px, 2.2vw, 31px);
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 0 rgba(255, 248, 218, .8);
  pointer-events: none;
}

.mini-toy {
  top: 1%;
  left: 3%;
  width: 49%;
  height: 98%;
  filter: drop-shadow(0 7px 3px rgba(60, 36, 18, .2));
}

.mini-shadow {
  right: 3%;
  bottom: 8%;
  width: 50%;
  height: 76%;
  opacity: .66;
  transform: rotate(10deg) scaleY(.72);
}

.mini-track {
  top: 0;
  left: 1%;
  width: 98%;
  height: 44%;
}

.mini-sun {
  top: 4%;
  left: 8%;
  width: 30%;
  height: 48%;
  filter: drop-shadow(0 5px 2px rgba(105, 62, 23, .2));
}

.mini-shadow-long {
  right: 7%;
  bottom: 1%;
  width: 74%;
  height: 55%;
  transform: rotate(-18deg) scaleY(.55);
}

.mini-show-toy {
  right: 27%;
  bottom: 0;
  width: 45%;
  height: 73%;
}

.mini-sun-left {
  top: 18%;
  left: 0;
  width: 24%;
  height: 35%;
}

.mini-sun-middle {
  top: -2%;
  left: 38%;
  width: 24%;
  height: 35%;
}

.mini-sun-right {
  top: 18%;
  right: 0;
  left: auto;
  width: 24%;
  height: 35%;
}

.splash-toy-shelf {
  position: absolute;
  z-index: 1;
  right: 8vw;
  bottom: -5dvh;
  left: 8vw;
  height: 27dvh;
  min-height: 180px;
  pointer-events: none;
}

.splash-toy {
  position: absolute;
  bottom: 0;
  width: min(19vw, 260px);
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 13px 7px rgba(63, 37, 17, .23));
}

.splash-toy-rabbit { left: 3%; transform: rotate(-5deg); }
.splash-toy-squirrel { right: 2%; transform: rotate(5deg); }
.splash-toy-turtle { right: 23%; bottom: -4%; height: 75%; transform: rotate(-2deg); }

/* Shared play furniture ------------------------------------------------ */

.play-screen {
  grid-template-rows: minmax(104px, 13dvh) minmax(50px, auto) 1fr;
  padding:
    max(12px, var(--qk-safe-top))
    var(--stage-safe-right)
    max(10px, var(--qk-safe-bottom))
    var(--stage-safe-x);
}

.play-progress {
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, .6vw, 9px);
  min-height: 80px;
  pointer-events: none;
}

.progress-star {
  width: clamp(46px, 5.2vw, 76px);
  height: clamp(46px, 5.2vw, 76px);
  object-fit: contain;
  opacity: .28;
  filter: grayscale(.4) drop-shadow(0 4px 2px rgba(74, 39, 20, .17));
  transform: scale(.82);
  transition: transform 220ms ease, opacity 220ms ease, filter 220ms ease;
}

.progress-star.is-current {
  opacity: .48;
  filter: grayscale(.35) drop-shadow(0 4px 2px rgba(74, 39, 20, .17));
  transform: scale(.95);
}

.progress-star.is-earned {
  opacity: 1;
  filter: drop-shadow(0 5px 2px rgba(92, 50, 17, .25));
  transform: scale(1.06) rotate(-3deg);
}

.play-prompt {
  z-index: 5;
  align-self: center;
  justify-self: center;
  max-width: min(72vw, 950px);
  margin: 0;
  color: #4c2f1e;
  font-size: clamp(23px, 3.1vw, 43px);
  line-height: 1.08;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 3px 0 rgba(255, 249, 222, .95), 0 6px 8px rgba(67, 38, 19, .12);
}

.play-host,
.end-host {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 0;
}

/* Find a Shadow -------------------------------------------------------- */

.match-host {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(530px, 1.65fr);
  align-items: center;
  gap: clamp(10px, 2vw, 34px);
  width: min(92vw, 1260px);
  justify-self: center;
  padding: 0 2vw 4dvh;
}

.match-toy-zone {
  position: relative;
  align-self: stretch;
  min-height: 300px;
}

.toy-pedestal {
  position: absolute;
  right: 2%;
  bottom: 2%;
  left: 2%;
  width: 96%;
  height: 40%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 10px 5px rgba(62, 34, 18, .22));
}

.active-toy {
  position: absolute;
  z-index: 1;
  inset: 7% 8% 14%;
  width: 84%;
  height: 79%;
  object-fit: contain;
  filter: drop-shadow(0 14px 6px rgba(55, 32, 18, .24));
  animation: toy-arrive 460ms cubic-bezier(.2, .9, .2, 1.25) both;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}

.active-toy.is-dragging {
  opacity: .32;
}

.dragged-toy {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  object-fit: contain;
  transform: translate(-50%, -50%) scale(1.06);
  filter: drop-shadow(0 14px 6px rgba(55, 32, 18, .28));
}

.shadow-choice-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: clamp(8px, 1.3vw, 20px);
  min-width: 0;
}

.shadow-choice {
  position: relative;
  min-width: 96px;
  min-height: min(44dvh, 410px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.shadow-choice .physical-base {
  filter: drop-shadow(0 9px 5px rgba(61, 36, 19, .27));
}

.choice-shadow {
  --shadow-frame-width: 68;
  --shadow-frame-height: 62;
  --shadow-offset-x: 0%;
  --shadow-offset-y: 0%;
  position: absolute;
  z-index: 1;
  /* Keep the full silhouette inside the plaque's inset safe area. The
     source shadows nearly fill their canvases, so the image box needs a
     little more breathing room than the plaque frame itself. */
  top: 18%;
  left: 16%;
  width: 68%;
  height: 62%;
  object-fit: contain;
  transform: translateY(20px);
  opacity: .72;
  filter: saturate(.6) brightness(.58) contrast(1.35);
  pointer-events: none;
}

/* The tall bear and rabbit silhouettes need a little extra vertical
   breathing room; the other animal proportions already fit the plaque. */
.shadow-choice[data-choice='bear'] .choice-shadow,
.shadow-choice[data-choice='rabbit'] .choice-shadow {
  top: 21%;
  height: 56%;
}

.shadow-choice:active {
  transform: translateY(7px) scale(.96);
}

.shadow-choice.is-wrong {
  animation: gentle-wobble 520ms ease-out;
  filter: saturate(.78) brightness(.92);
}

.shadow-choice.is-hint {
  animation: hint-pulse 1000ms ease-in-out infinite;
}

.shadow-choice.is-correct {
  filter: brightness(1.12) saturate(1.13);
  transform: scale(1.05);
}

.shadow-choice.is-drop-target {
  filter: brightness(1.08) saturate(1.12) drop-shadow(0 0 8px rgba(246, 182, 46, .7));
  transform: scale(1.04);
}

/* Sun playfield -------------------------------------------------------- */

.sun-host {
  display: grid;
  grid-template-columns: minmax(170px, 25vw) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(8px, 1.5vw, 28px);
  width: min(94vw, 1420px);
  justify-self: center;
  padding: 0 1vw 3dvh;
}

.target-plaque {
  position: relative;
  align-self: center;
  width: 100%;
  height: min(46dvh, 470px);
  min-height: 280px;
  transition: transform 200ms ease, filter 200ms ease;
}

.target-plaque .physical-base {
  filter: drop-shadow(0 9px 5px rgba(65, 38, 19, .26));
}

.target-plaque.is-near {
  filter: brightness(1.08) saturate(1.07);
  transform: scale(1.03);
}

.target-caption {
  position: absolute;
  z-index: 2;
  top: 15%;
  right: 12%;
  left: 12%;
  font-size: clamp(16px, 1.8vw, 25px);
  letter-spacing: .06em;
  text-align: center;
}

.target-shadow {
  --shadow-frame-width: 58;
  --shadow-frame-height: 42;
  --shadow-angle: 0deg;
  --shadow-length: .5;
  --shadow-width: .8;
  --shadow-opacity: .6;
  --shadow-offset-x: 0%;
  --shadow-offset-y: 0%;
  --shadow-tune-angle: 0deg;
  --shadow-tune-width: 1;
  --shadow-tune-stretch: 1;
  --shadow-tune-opacity: 1;
  position: absolute;
  z-index: 1;
  right: auto;
  bottom: 32.5%;
  left: 21%;
  width: 58%;
  height: 42%;
  object-fit: contain;
  opacity: calc(var(--shadow-opacity) * var(--shadow-tune-opacity));
  filter: saturate(.5) brightness(.55) contrast(1.3);
  /* This is a contained reference card, not the live cast. Keep its
     placement inside the placard while retaining the tuned silhouette
     shape, scale, and opacity. */
  left: 13%;
  bottom: 18%;
  transform: rotate(calc(var(--shadow-angle) + var(--shadow-tune-angle))) scaleX(calc(var(--shadow-width) * var(--shadow-tune-width))) scaleY(calc(var(--shadow-length) * var(--shadow-tune-stretch)));
  transform-origin: 50% 82%;
  pointer-events: none;
}

.sun-scene {
  position: relative;
  display: grid;
  grid-template-rows: minmax(240px, 1fr) minmax(150px, 27dvh);
  min-width: 0;
  min-height: 0;
}

.sun-stage {
  position: relative;
  min-height: 260px;
}

.cast-group {
  position: absolute;
  bottom: 3%;
  width: min(35vw, 310px);
  height: min(54dvh, 401px);
}

.active-cast { bottom: -15%; left: 17%; }
.friend-cast { right: 8%; width: min(17vw, 220px); height: 58%; opacity: .88; }

.sun-toy {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 15%;
  width: 74%;
  height: 86%;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 12px 5px rgba(56, 34, 19, .25));
  pointer-events: none;
}

.cast-shadow {
  --shadow-frame-width: 74;
  --shadow-frame-height: 86;
  --shadow-angle: 0deg;
  --shadow-length: .5;
  --shadow-width: .8;
  --shadow-opacity: .6;
  --shadow-offset-x: 0%;
  --shadow-offset-y: 0%;
  --shadow-tune-angle: 0deg;
  --shadow-tune-width: 1;
  --shadow-tune-stretch: 1;
  --shadow-tune-opacity: 1;
  position: absolute;
  z-index: 1;
  bottom: calc(15% + var(--shadow-offset-y));
  left: calc(50% + var(--shadow-offset-x));
  width: 74%;
  height: 86%;
  object-fit: contain;
  opacity: calc(var(--shadow-opacity) * var(--shadow-tune-opacity));
  filter: saturate(.45) brightness(.52) contrast(1.38) blur(.2px);
  transform: rotate(calc(var(--shadow-angle) + var(--shadow-tune-angle))) scaleX(calc(var(--shadow-width) * var(--shadow-tune-width))) scaleY(calc(var(--shadow-length) * var(--shadow-tune-stretch)));
  transform-origin: 10% 82%;
  pointer-events: none;
  transition: opacity 80ms linear;
}

.friend-cast .cast-shadow { opacity: calc(var(--shadow-opacity) * .72); }

.sun-track-wrap {
  position: relative;
  align-self: end;
  width: min(100%, 980px);
  height: 100%;
  min-height: 150px;
  justify-self: center;
}

.sun-track {
  position: absolute;
  inset: 1% 2% 0;
  width: 96%;
  height: 99%;
  object-fit: contain;
  filter: drop-shadow(0 9px 5px rgba(68, 40, 20, .24));
  pointer-events: none;
}

.sun-handle {
  position: absolute;
  z-index: 8;
  width: clamp(108px, 12vw, 178px);
  height: clamp(108px, 12vw, 178px);
  min-width: 96px;
  min-height: 96px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  transform: translate(-50%, -50%);
  transition: filter 140ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.sun-handle:active {
  cursor: grabbing;
  filter: brightness(1.07) saturate(1.05);
}

.sun-handle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 4px rgba(107, 64, 20, .26));
  pointer-events: none;
}

.rail-hit-zones {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.rail-hit {
  position: absolute;
  width: 96px;
  height: 96px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

/* Reveals and rewards -------------------------------------------------- */

.reveal-host,
.end-host {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(0px, 1dvh, 13px);
  padding: 0 6vw max(18px, var(--qk-safe-bottom));
}

.reveal-heading,
.end-heading {
  z-index: 3;
  margin: 0;
  color: #cf5a26;
  font-size: clamp(38px, 6vw, 82px);
  line-height: .95;
  letter-spacing: .015em;
  text-align: center;
  text-shadow: 0 4px 0 #fff2c8, 0 8px 6px rgba(70, 40, 20, .2);
}

.reveal-tableau,
.end-tableau {
  position: relative;
  width: min(52vw, 570px);
  height: min(43dvh, 430px);
}

.reveal-star,
.end-star {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 7px rgba(102, 58, 16, .25));
  animation: reward-star 620ms cubic-bezier(.2, .85, .2, 1.35) both;
}

.reveal-shadow {
  --shadow-frame-width: 58;
  --shadow-frame-height: 65;
  --shadow-angle: 0deg;
  --shadow-length: .5;
  --shadow-width: .8;
  --shadow-opacity: .6;
  --shadow-offset-x: 0%;
  --shadow-offset-y: 0%;
  --shadow-tune-angle: 0deg;
  --shadow-tune-width: 1;
  --shadow-tune-stretch: 1;
  --shadow-tune-opacity: 1;
  position: absolute;
  z-index: 1;
  left: calc(50% + var(--shadow-offset-x));
  bottom: calc(11% + var(--shadow-offset-y));
  width: 58%;
  height: 65%;
  object-fit: contain;
  opacity: calc(var(--shadow-opacity) * var(--shadow-tune-opacity));
  filter: saturate(.45) brightness(.52) contrast(1.38) blur(.2px);
  transform: rotate(calc(var(--shadow-angle) + var(--shadow-tune-angle))) scaleX(calc(var(--shadow-width) * var(--shadow-tune-width))) scaleY(calc(var(--shadow-length) * var(--shadow-tune-stretch)));
  transform-origin: 10% 82%;
  pointer-events: none;
}

.reveal-toy,
.end-toy {
  position: absolute;
  z-index: 2;
  right: 21%;
  bottom: 11%;
  width: 58%;
  height: 65%;
  object-fit: contain;
  filter: drop-shadow(0 9px 4px rgba(61, 34, 18, .25));
  animation: toy-arrive 520ms 120ms cubic-bezier(.2, .9, .2, 1.25) both;
}

.action-button {
  position: relative;
  z-index: 4;
  width: clamp(240px, 27vw, 390px);
  min-width: 96px;
  height: clamp(104px, 12vw, 150px);
  min-height: 96px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.action-button .physical-base {
  filter: drop-shadow(0 10px 5px rgba(55, 35, 18, .29));
}

.action-button span {
  position: absolute;
  z-index: 1;
  top: 40%;
  right: 12%;
  left: 12%;
  color: #fff7d8;
  font-size: clamp(21px, 2.4vw, 34px);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 3px 0 rgba(36, 83, 41, .42);
  pointer-events: none;
}

.action-button:active {
  transform: translateY(7px) scale(.97);
}

.raster-burst {
  position: absolute;
  z-index: 12;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.burst-star {
  position: absolute;
  width: clamp(32px, 5vmin, 68px);
  height: clamp(32px, 5vmin, 68px);
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 4px 2px rgba(99, 54, 17, .22));
  animation: burst-out 760ms var(--burst-delay) cubic-bezier(.13, .82, .35, 1) both;
}

/* Shadow Show ---------------------------------------------------------- */

.show-chooser-host {
  display: grid;
  place-items: center;
  padding: 1dvh 6vw 5dvh;
}

.show-toy-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  gap: clamp(10px, 3vw, 55px);
  width: min(84vw, 1040px);
  height: min(52dvh, 510px);
}

.show-toy-choice {
  position: relative;
  min-width: 96px;
  min-height: 180px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 150ms ease, filter 150ms ease;
}

.show-toy-choice:active {
  transform: translateY(7px) scale(.97);
}

.show-choice-toy {
  position: absolute;
  z-index: 2;
  inset: 0 9% 19%;
  width: 82%;
  height: 81%;
  object-fit: contain;
  filter: drop-shadow(0 13px 6px rgba(58, 33, 18, .24));
  pointer-events: none;
}

.show-host {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 31vw);
  grid-template-rows: 1fr auto;
  gap: 0 clamp(10px, 1.5vw, 25px);
  width: min(94vw, 1420px);
  justify-self: center;
  padding: 0 1vw 2dvh;
}

.show-host .sun-scene {
  grid-row: 1 / span 2;
  min-height: 0;
}

.show-host .active-cast {
  left: 35%;
  width: min(27vw, 350px);
}

.show-stop-row {
  display: grid;
  align-self: end;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.time-stop,
.round-control {
  position: relative;
  min-width: 96px;
  min-height: 96px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease;
}

.time-stop {
  height: clamp(128px, 16vw, 200px);
}

.time-stop .physical-base,
.round-control .physical-base {
  filter: drop-shadow(0 7px 4px rgba(60, 35, 18, .24));
}

.time-stop:active,
.round-control:active {
  transform: translateY(5px) scale(.96);
}

.time-sun {
  position: absolute;
  z-index: 1;
  width: 38%;
  height: 38%;
  object-fit: contain;
  pointer-events: none;
}

.time-sun-left { top: 18%; left: 14%; }
.time-sun-noon { top: 7%; left: 31%; }
.time-sun-right { top: 18%; right: 14%; }

.time-shadow {
  --shadow-frame-width: 46;
  --shadow-frame-height: 40;
  --shadow-angle: 0deg;
  --shadow-length: .5;
  --shadow-width: .8;
  --shadow-opacity: .6;
  --shadow-offset-x: 0%;
  --shadow-offset-y: 0%;
  --shadow-tune-angle: 0deg;
  --shadow-tune-width: 1;
  --shadow-tune-stretch: 1;
  --shadow-tune-opacity: 1;
  position: absolute;
  z-index: 1;
  left: calc(28% + var(--shadow-offset-x));
  bottom: calc(23% + var(--shadow-offset-y));
  width: 46%;
  height: 40%;
  object-fit: contain;
  opacity: calc(var(--shadow-opacity) * var(--shadow-tune-opacity));
  filter: brightness(.55) contrast(1.3);
  transform: rotate(calc(var(--shadow-angle) + var(--shadow-tune-angle))) scaleX(calc(var(--shadow-width) * var(--shadow-tune-width))) scaleY(calc(var(--shadow-length) * var(--shadow-tune-stretch)));
  transform-origin: 10% 82%;
  pointer-events: none;
}

.time-star {
  position: absolute;
  z-index: 3;
  top: 2%;
  right: 2%;
  width: 36%;
  height: 36%;
  object-fit: contain;
  opacity: 0;
  transform: scale(.2) rotate(-20deg);
  transition: opacity 200ms ease, transform 240ms ease;
  pointer-events: none;
}

.time-stop span {
  position: absolute;
  z-index: 3;
  right: 9%;
  bottom: 17%;
  left: 9%;
  font-size: clamp(15px, 1.45vw, 22px);
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.time-stop.is-visited {
  filter: brightness(1.08) saturate(1.08);
}

.time-stop.is-visited .time-star {
  opacity: 1;
  transform: scale(1) rotate(3deg);
}

.playback-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, .6vw, 10px);
  min-height: 110px;
}

.round-control {
  width: clamp(96px, 9vw, 130px);
  height: clamp(96px, 9vw, 130px);
}

.control-icon {
  position: absolute;
  z-index: 1;
  inset: 24%;
  width: 52%;
  height: 52%;
  object-fit: contain;
  filter: saturate(.9) sepia(.15);
  pointer-events: none;
}

.round-control.is-flipped .control-icon { transform: scaleX(-1); }

.pause-icon {
  position: absolute;
  z-index: 2;
  inset: 20%;
  display: none;
  width: 60%;
  height: 60%;
  object-fit: contain;
  pointer-events: none;
}

.round-control.is-playing .control-icon { display: none; }
.round-control.is-playing .pause-icon { display: block; }

.show-done-slot {
  position: absolute;
  z-index: 10;
  right: 2%;
  bottom: 0;
}

.show-done-slot .action-button {
  width: clamp(220px, 24vw, 330px);
  height: clamp(98px, 10vw, 130px);
}

.show-host.is-complete .playback-controls {
  visibility: hidden;
}

/* End screen ----------------------------------------------------------- */

.end-screen {
  place-items: center;
  padding:
    max(20px, var(--qk-safe-top))
    max(24px, var(--qk-safe-right))
    max(20px, var(--qk-safe-bottom))
    max(24px, var(--qk-safe-left));
}

.end-host {
  width: min(92vw, 1180px);
  height: 92dvh;
  grid-template-rows: auto minmax(210px, 1fr) auto auto;
}

.end-tableau {
  width: min(48vw, 540px);
  height: min(44dvh, 440px);
}

.stamp-shelf {
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: clamp(1px, .8vw, 10px);
  min-height: 74px;
}

.stamp-shelf img {
  width: clamp(58px, 7vw, 92px);
  height: clamp(58px, 7vw, 92px);
  object-fit: contain;
  filter: drop-shadow(0 5px 3px rgba(84, 44, 17, .2));
  animation: reward-star 520ms cubic-bezier(.2, .85, .2, 1.3) both;
}

.end-actions {
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: clamp(8px, 2vw, 28px);
}

/* Motion --------------------------------------------------------------- */

@keyframes toy-arrive {
  from { opacity: 0; transform: translateY(30px) scale(.82) rotate(-3deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes reward-star {
  from { opacity: 0; transform: scale(.2) rotate(-24deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes burst-out {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.15) rotate(-30deg); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(.85) rotate(40deg); }
}

@keyframes gentle-wobble {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-9px) rotate(-2deg); }
  50% { transform: translateX(7px) rotate(2deg); }
  75% { transform: translateX(-3px) rotate(-1deg); }
}

@keyframes hint-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.045); filter: brightness(1.12); }
}

/* Responsive: portrait / compact tablet ------------------------------- */

@media (orientation: portrait) {
  .splash-screen {
    grid-template-rows: minmax(150px, 23dvh) auto minmax(390px, 52dvh) 1fr;
  }

  .title-lockup { width: min(72vw, 610px); }
  .mode-shelf {
    grid-template-columns: 1fr;
    gap: 2px;
    width: min(78vw, 610px);
    height: min(51dvh, 600px);
  }
  .mode-card { min-height: 124px; }
  .mode-art { inset: 9% 54% 12% 10%; }
  .mode-title { top: 42%; right: 9%; bottom: auto; left: 43%; font-size: clamp(22px, 4vw, 34px); }
  .mini-track { top: 18%; }
  .mini-show-toy { right: 21%; width: 52%; }
  .splash-toy-shelf { right: 2vw; left: 2vw; height: 20dvh; opacity: .82; }
  .splash-toy { width: 27vw; }

  .play-screen { grid-template-rows: minmax(95px, 11dvh) auto 1fr; }
  .play-prompt { max-width: 73vw; font-size: clamp(24px, 4vw, 37px); }

  .match-host {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(210px, 36%) 1fr;
    gap: 0;
    width: min(92vw, 760px);
    padding-bottom: 3dvh;
  }
  .match-toy-zone { min-height: 210px; }
  .active-toy { inset: -3% 24% 15%; width: 52%; height: 88%; }
  .toy-pedestal { right: 23%; left: 23%; width: 54%; }
  .shadow-choice { min-height: min(31dvh, 320px); }

  .sun-host {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(135px, 21dvh) 1fr;
    width: min(94vw, 790px);
  }
  .cast-group { width: min(35vw, 310px); height: min(58dvh, 520px); }
  .target-plaque { width: min(55vw, 420px); height: min(22dvh, 220px); min-height: 135px; justify-self: center; }
  .target-caption { top: 14%; }
  .target-shadow { --shadow-frame-height: 42; bottom: 32.5%; height: 42%; }
  .sun-scene { grid-template-rows: minmax(250px, 1fr) minmax(145px, 21dvh); }
  .active-cast { left: 18%; }
  .friend-cast { right: 8%; width: min(25vw, 190px); }

  .show-chooser-host { padding-bottom: 4dvh; }
  .show-toy-row { grid-template-columns: 1fr; width: min(64vw, 500px); height: min(60dvh, 660px); }
  .show-toy-choice { min-height: 160px; }
  .show-choice-toy { inset: 0 27% 13%; width: 46%; height: 87%; }
  .show-toy-choice .toy-pedestal { right: 24%; left: 24%; width: 52%; }

  .show-host {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(370px, 1fr) auto auto;
    width: min(94vw, 790px);
  }
  .show-host .sun-scene { grid-row: auto; }
  .show-host .active-cast { left: 31%; width: min(38vw, 320px); }
  .show-stop-row { width: min(74vw, 600px); justify-self: center; }
  .time-stop { height: clamp(125px, 20vw, 170px); }
  .playback-controls { min-height: 102px; }
  .show-done-slot { right: 50%; bottom: -2%; transform: translateX(50%); }

  .reveal-tableau,
  .end-tableau { width: min(68vw, 540px); }
  .end-host { width: min(92vw, 780px); }
}

@media (max-width: 700px) {
  .splash-kicker { font-size: 20px; }
  .mode-shelf { width: min(84vw, 600px); }
  .mode-title { font-size: 21px; }
  .progress-star { width: 44px; height: 44px; }
  .play-prompt { font-size: clamp(21px, 4.7vw, 30px); }
  .shadow-choice-row { gap: 2px; }
  .shadow-choice { min-height: 230px; }
  .choice-shadow { top: 18%; left: 16%; width: 68%; height: 62%; }
  .cast-group { width: min(56vw, 350px); height: min(54dvh, 226px); }
  .friend-cast { right: 8%; width: min(25vw, 190px); height: 58%; }
  .sun-handle { width: 108px; height: 108px; }
  .target-caption { font-size: 15px; }
  .time-stop span { font-size: 14px; }
  .end-actions { gap: 0; }
  .action-button { width: min(43vw, 300px); }
}

@media (orientation: landscape) and (max-height: 600px) {
  .splash-screen { grid-template-rows: minmax(102px, 23dvh) auto minmax(230px, 50dvh) 1fr; }
  .title-lockup { max-height: 20dvh; }
  .splash-kicker { font-size: 18px; }
  .mode-shelf { width: min(83vw, 990px); height: min(46dvh, 285px); }
  .mode-title { bottom: 13%; font-size: clamp(16px, 2.1vw, 24px); }
  .splash-toy-shelf { opacity: .72; }

  .play-screen { grid-template-rows: minmax(72px, 14dvh) minmax(38px, auto) 1fr; }
  .play-progress { min-height: 64px; }
  .progress-star { width: 42px; height: 42px; }
  .play-prompt { font-size: clamp(20px, 3vw, 29px); }
  .match-toy-zone { min-height: 220px; }
  .shadow-choice { min-height: min(39dvh, 265px); }
  .sun-stage { min-height: 175px; }
  .sun-scene { grid-template-rows: minmax(170px, 1fr) minmax(125px, 29dvh); }
  .target-plaque { min-height: 210px; height: 42dvh; }
  .show-stop-row { align-self: center; }
  .time-stop { height: 130px; }
  .playback-controls { min-height: 96px; }
  .reveal-heading,
  .end-heading { font-size: clamp(34px, 6vw, 56px); }
  .reveal-tableau,
  .end-tableau { height: min(38dvh, 250px); }
  .end-host { grid-template-rows: auto minmax(160px, 1fr) auto auto; }
  .stamp-shelf img { width: 54px; height: 54px; }
}

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