.carriage-ride-launcher {
  position: fixed;
  left: 18px;
  bottom: 96px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 9px 18px 9px 14px;
  border: 2px solid #ec407a;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff0f6, #fce4ec);
  color: #6b1a3a;
  font:
    700 15px/1.2 "Comic Sans MS",
    "Trebuchet MS",
    system-ui,
    sans-serif;
  cursor: pointer;
  box-shadow:
    0 6px 14px rgba(236, 64, 122, 0.28),
    inset 0 -3px 0 rgba(236, 64, 122, 0.18);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.carriage-ride-launcher:hover {
  transform: translateY(-1px);
}

.carriage-ride-launcher-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 35%,
    #fff0f6 0%,
    #f48fb1 60%,
    #ec407a 100%
  );
  box-shadow: inset 0 -2px 0 rgba(107, 26, 58, 0.25);
  position: relative;
}

.carriage-ride-launcher-icon::after {
  content: "";
  position: absolute;
  inset: 6px 4px auto auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff9c4;
}

.hud-action-grid .carriage-ride-launcher {
  position: static;
  left: auto;
  bottom: auto;
  z-index: auto;
  display: grid;
  min-height: 54px;
  padding: 8px 9px;
  border-color: rgba(236, 64, 122, 0.32);
  border-radius: 12px;
  font:
    900 13px/1.05 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  box-shadow: 0 4px 0 rgba(236, 64, 122, 0.12);
}

.carriage-ride-modal {
  --carriage-map-duration: 70s;
  --carriage-chapter-duration: 42s;
  --carriage-map-x: 0px;
  --carriage-strip-x: 0%;
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  background: #f3c8da;
}

.carriage-ride-modal[hidden] {
  display: none;
}

body.carriage-ride-locked {
  overflow: hidden;
}

body.carriage-ride-locked .teaparty-visit-btn {
  display: none !important;
  pointer-events: none !important;
}

.carriage-sky {
  position: absolute;
  inset: 0 0 36% 0;
  background: linear-gradient(180deg, #b9def0 0%, #ffd9eb 60%, #fff3e0 100%);
}

.carriage-ride-modal.has-assets .carriage-sky {
  inset: 0;
  background: url("../data/carriage_ride/sky_backdrop.png") repeat-x center top /
    auto 100%;
}

.carriage-mountains {
  position: absolute;
  inset: 50% 0 36% 0;
  background:
    radial-gradient(ellipse at 20% 100%, #c994b8 0%, transparent 55%),
    radial-gradient(ellipse at 55% 100%, #d6a3c4 0%, transparent 50%),
    radial-gradient(ellipse at 85% 100%, #b682a8 0%, transparent 60%);
  opacity: 0.55;
  filter: blur(1px);
}

.carriage-ride-modal::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 36%;
  background: linear-gradient(180deg, #f8c5d6 0%, #f48fb1 60%, #c95b87 100%);
  z-index: 1;
}

.carriage-ride-modal.has-assets::before {
  display: none;
}

.carriage-panorama {
  position: absolute;
  inset: auto 0 22% 0;
  height: 46%;
  overflow: hidden;
  z-index: 2;
  transition: opacity 700ms ease;
}

.carriage-panorama-strip {
  display: flex;
  width: 600%;
  height: 100%;
  transform: translateX(var(--carriage-strip-x));
  transition: transform 900ms ease-in-out;
}

.carriage-ride-modal.playing[data-ride-phase="map"] .carriage-panorama-strip {
  animation: none;
}

@keyframes carriage-scroll {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-83.333%);
  }
}

.carriage-scene {
  flex: 0 0 16.6667%;
  height: 100%;
  position: relative;
}

.carriage-scene-orchard {
  background:
    radial-gradient(circle at 12% 70%, #ec407a 0 22px, transparent 24px),
    radial-gradient(circle at 30% 60%, #f48fb1 0 26px, transparent 28px),
    radial-gradient(circle at 52% 72%, #ec407a 0 22px, transparent 24px),
    radial-gradient(circle at 74% 62%, #f48fb1 0 28px, transparent 30px),
    radial-gradient(circle at 90% 70%, #ec407a 0 24px, transparent 26px),
    linear-gradient(180deg, transparent 50%, #a5d6a7 50%);
}

.carriage-scene-bridge {
  background:
    repeating-linear-gradient(90deg, #fff 0 24px, #ec407a 24px 48px) no-repeat 0
      calc(50% + 30px) / 100% 18px,
    radial-gradient(ellipse at 50% 56%, transparent 0 28%, transparent 30%),
    linear-gradient(180deg, transparent 60%, #f8bbd0 60%);
}

.carriage-scene-bridge::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 35%;
  height: 18%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: transparent;
  border-top: 6px solid #fff;
  border-left: 6px solid #fff;
  border-right: 6px solid #fff;
}

.carriage-scene-village {
  background: linear-gradient(180deg, transparent 55%, #a5d6a7 55%);
}

.carriage-scene-village::before,
.carriage-scene-village::after {
  content: "";
  position: absolute;
  bottom: 30%;
  width: 22%;
  height: 28%;
  background: #fff8e7;
  border: 3px solid #6b1a3a;
}

.carriage-scene-village::before {
  left: 18%;
  border-radius: 6px 6px 0 0;
  box-shadow:
    inset 0 -8px 0 #f48fb1,
    inset 0 8px 0 transparent;
}

.carriage-scene-village::after {
  right: 18%;
  background: #fff0f6;
  border-radius: 6px 6px 0 0;
  box-shadow: inset 0 -8px 0 #ce93d8;
}

.carriage-scene-sunflowers {
  background:
    radial-gradient(
      circle at 15% 65%,
      #ffd740 0 18px,
      #6b3a0c 0 22px,
      transparent 24px
    ),
    radial-gradient(
      circle at 35% 60%,
      #ffd740 0 20px,
      #6b3a0c 0 24px,
      transparent 26px
    ),
    radial-gradient(
      circle at 55% 68%,
      #ffd740 0 16px,
      #6b3a0c 0 20px,
      transparent 22px
    ),
    radial-gradient(
      circle at 75% 60%,
      #ffd740 0 22px,
      #6b3a0c 0 26px,
      transparent 28px
    ),
    radial-gradient(
      circle at 92% 66%,
      #ffd740 0 18px,
      #6b3a0c 0 22px,
      transparent 24px
    ),
    linear-gradient(180deg, transparent 50%, #a5d6a7 50%);
}

.carriage-scene-castle {
  background:
    radial-gradient(ellipse at 60% 38%, #f8bbd0 0 18%, transparent 20%),
    linear-gradient(180deg, transparent 60%, #a5d6a7 60%);
}

.carriage-scene-castle::before {
  content: "";
  position: absolute;
  left: 38%;
  right: 22%;
  bottom: 38%;
  height: 30%;
  background: #fff0f6;
  border: 3px solid #6b1a3a;
  border-radius: 4px 4px 0 0;
}

.carriage-scene-castle::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 60%;
  width: 10%;
  height: 18%;
  transform: translateX(-50%);
  background: #ec407a;
  border: 3px solid #6b1a3a;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -8px 0 #ec407a;
}

.carriage-ride-modal.has-assets .carriage-panorama {
  inset: 0;
  height: auto;
  background-image: url("../data/carriage_ride/kingdom_panorama_imagegen_route_v1.png");
  background-repeat: no-repeat;
  background-position: var(--carriage-map-x, 0px) bottom;
  background-size: auto 100%;
  transition:
    background-position 5.6s linear,
    opacity 700ms ease;
}

.carriage-ride-modal.has-assets .carriage-panorama-strip {
  display: none;
}

.carriage-ride-modal.has-assets.playing[data-ride-phase="map"] .carriage-panorama {
  animation: none;
}

.carriage-ride-modal.has-assets[data-ride-phase="math"] .carriage-panorama,
.carriage-ride-modal.has-assets[data-ride-phase="story"] .carriage-panorama,
.carriage-ride-modal.has-assets[data-ride-phase="complete"] .carriage-panorama {
  opacity: 0;
}

@keyframes carriage-bg-scroll {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: -4096px;
  }
}

.carriage-chapter-scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background-position: var(--carriage-chapter-position, center bottom);
  background-repeat: no-repeat;
  background-size: auto 100%;
  transform: none;
  transition:
    background-position 5.6s ease-in-out,
    opacity 900ms ease,
    transform 12s ease;
}

.carriage-ride-modal[data-ride-phase="math"] .carriage-chapter-scene,
.carriage-ride-modal[data-ride-phase="story"] .carriage-chapter-scene,
.carriage-ride-modal[data-ride-phase="complete"] .carriage-chapter-scene {
  opacity: 1;
  transform: none;
}

.carriage-ride-modal[data-ride-phase="math"] .carriage-chapter-scene {
  background-image: url("../data/carriage_ride/math_meadow_flat_v1.png");
}

.carriage-ride-modal[data-ride-phase="story"] .carriage-chapter-scene {
  background-image: url("../data/carriage_ride/story_grove_flat_v1.png");
}

.carriage-ride-modal[data-ride-phase="complete"] .carriage-chapter-scene {
  background-image: url("../data/carriage_ride/story_grove_background.png");
  background-position: center bottom;
  background-size: cover;
}

.carriage-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 30%, #fff9c4 0 2px, transparent 3px),
    radial-gradient(circle at 28% 18%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 47% 38%, #ffd740 0 2px, transparent 3px),
    radial-gradient(circle at 66% 22%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 82% 34%, #fce4ec 0 3px, transparent 4px),
    radial-gradient(circle at 91% 12%, #fff9c4 0 2px, transparent 3px);
  opacity: 0;
  transition: opacity 600ms ease;
  z-index: 4;
}

.carriage-ride-modal.has-assets .carriage-sparkles {
  background: url("../data/carriage_ride/sparkle_overlay.png") repeat;
  background-size: 512px 512px;
}

.carriage-ride-modal.playing .carriage-sparkles {
  opacity: 0.18;
  animation: carriage-sparkle 2.2s linear infinite;
}

.carriage-ride-modal.has-assets.playing[data-ride-phase="map"] .carriage-sparkles {
  opacity: 0.08;
}

@keyframes carriage-sparkle {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.04);
  }
}

.carriage-vehicle {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  width: 360px;
  height: 200px;
  z-index: 5;
  filter: drop-shadow(0 8px 18px rgba(107, 26, 58, 0.45));
}

.carriage-ride-modal[data-vehicle-layout="bridge-clear"] .carriage-vehicle {
  left: 31%;
  bottom: 6%;
}

.carriage-ride-modal[data-vehicle-layout="left-clear"] .carriage-vehicle {
  left: 28%;
  bottom: 6%;
}

.carriage-ride-modal.has-assets .carriage-vehicle {
  width: min(66vw, 585px);
  aspect-ratio: 866 / 444;
  height: auto;
  background-image: url("../data/carriage_ride/carriage_walk_2f_v3.png");
  background-position: 0% 0%;
  background-repeat: no-repeat;
  background-size: 200% 100%;
}

.carriage-ride-modal.has-assets[data-ride-phase="story"] .carriage-vehicle {
  bottom: 3%;
}

.carriage-ride-modal.has-assets[data-vehicle-layout="bridge-clear"] .carriage-vehicle,
.carriage-ride-modal.has-assets[data-vehicle-layout="left-clear"] .carriage-vehicle {
  left: 50%;
  bottom: 8%;
}

.carriage-ride-modal.has-assets .carriage-vehicle::before,
.carriage-ride-modal.has-assets .carriage-vehicle::after {
  content: "";
  position: absolute;
  z-index: 1;
  display: block;
  aspect-ratio: 1;
  border: 3px solid rgba(201, 132, 23, 0.78);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 18%, #ffeb78 19% 23%, transparent 24%),
    conic-gradient(
      from 0deg,
      transparent 0deg 13deg,
      rgba(255, 239, 103, 0.95) 14deg 21deg,
      transparent 22deg 43deg,
      rgba(255, 116, 164, 0.86) 44deg 51deg,
      transparent 52deg 73deg,
      rgba(255, 239, 103, 0.95) 74deg 81deg,
      transparent 82deg 103deg,
      rgba(255, 116, 164, 0.86) 104deg 111deg,
      transparent 112deg 133deg,
      rgba(255, 239, 103, 0.95) 134deg 141deg,
      transparent 142deg 163deg,
      rgba(255, 116, 164, 0.86) 164deg 171deg,
      transparent 172deg 193deg,
      rgba(255, 239, 103, 0.95) 194deg 201deg,
      transparent 202deg 223deg,
      rgba(255, 116, 164, 0.86) 224deg 231deg,
      transparent 232deg 253deg,
      rgba(255, 239, 103, 0.95) 254deg 261deg,
      transparent 262deg 283deg,
      rgba(255, 116, 164, 0.86) 284deg 291deg,
      transparent 292deg 313deg,
      rgba(255, 239, 103, 0.95) 314deg 321deg,
      transparent 322deg 360deg
    );
  box-shadow:
    inset 0 0 0 2px rgba(255, 244, 174, 0.72),
    inset 0 0 0 8px rgba(255, 196, 66, 0.18),
    0 0 7px rgba(255, 215, 64, 0.42);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.carriage-ride-modal.has-assets .carriage-vehicle::before {
  left: 10.8%;
  top: 76%;
  width: 12.4%;
}

.carriage-ride-modal.has-assets .carriage-vehicle::after {
  left: 43.9%;
  top: 79.2%;
  width: 10.8%;
}

.carriage-ride-modal.has-assets.playing[data-motion="moving"] .carriage-vehicle {
  animation: carriage-sprite-walk 0.72s step-end infinite;
}

.carriage-ride-modal.has-assets.playing[data-motion="moving"] .carriage-vehicle::before,
.carriage-ride-modal.has-assets.playing[data-motion="moving"] .carriage-vehicle::after {
  opacity: 0.88;
  animation: carriage-asset-wheel-spin 0.72s linear infinite;
}

.carriage-ride-modal.has-assets .carriage-vehicle > * {
  display: none;
}

.carriage-ride-modal.has-assets .carriage-vehicle > .carriage-wheel-sparkles {
  position: absolute;
  display: block;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

.carriage-ride-modal.has-assets.playing[data-motion="moving"]
  .carriage-vehicle
  > .carriage-wheel-sparkles {
  opacity: 1;
  animation: carriage-wheel-sparkle-flicker 0.72s linear infinite;
}

.carriage-ride-modal.has-assets .carriage-wheel-sparkles::before,
.carriage-ride-modal.has-assets .carriage-wheel-sparkles::after {
  content: "";
  position: absolute;
  width: 20%;
  height: 16%;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(45deg, transparent 0 47%, rgba(255, 248, 196, 0.96) 48% 52%, transparent 53% 100%) 10% 68% / 18% 18% no-repeat,
    linear-gradient(-45deg, transparent 0 47%, rgba(255, 248, 196, 0.96) 48% 52%, transparent 53% 100%) 10% 68% / 18% 18% no-repeat,
    linear-gradient(45deg, transparent 0 47%, rgba(255, 221, 87, 0.92) 48% 52%, transparent 53% 100%) 38% 28% / 14% 14% no-repeat,
    linear-gradient(-45deg, transparent 0 47%, rgba(255, 221, 87, 0.92) 48% 52%, transparent 53% 100%) 38% 28% / 14% 14% no-repeat,
    linear-gradient(45deg, transparent 0 47%, rgba(255, 237, 141, 0.9) 48% 52%, transparent 53% 100%) 68% 58% / 12% 12% no-repeat,
    linear-gradient(-45deg, transparent 0 47%, rgba(255, 237, 141, 0.9) 48% 52%, transparent 53% 100%) 68% 58% / 12% 12% no-repeat,
    radial-gradient(circle at 18% 74%, rgba(255, 249, 196, 0.98) 0 4%, transparent 5%),
    radial-gradient(circle at 50% 48%, rgba(255, 211, 64, 0.9) 0 3%, transparent 4%),
    radial-gradient(circle at 82% 76%, rgba(255, 244, 174, 0.78) 0 3%, transparent 4%);
  filter:
    drop-shadow(0 0 4px rgba(255, 235, 120, 0.95))
    drop-shadow(0 0 9px rgba(255, 193, 7, 0.68));
}

.carriage-ride-modal.has-assets .carriage-wheel-sparkles::before {
  left: 8.2%;
  top: 81.6%;
}

.carriage-ride-modal.has-assets .carriage-wheel-sparkles::after {
  left: 41.7%;
  top: 84.6%;
}

.carriage-ride-modal.playing[data-motion="moving"]:not(.has-assets)
  .carriage-vehicle {
  animation: carriage-bob 0.45s ease-in-out infinite alternate;
}

@keyframes carriage-sprite-walk {
  0%,
  49.99% {
    background-position: 0% 0%;
  }
  50%,
  100% {
    background-position: 100% 0%;
  }
}

@keyframes carriage-bob {
  from {
    transform: translateX(-50%) translateY(0);
  }
  to {
    transform: translateX(-50%) translateY(-4px);
  }
}

@keyframes carriage-map-travel {
  0% {
    transform: translateX(-60%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes carriage-asset-wheel-spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  25% {
    transform: translate(-50%, -50%) rotate(90deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  75% {
    transform: translate(-50%, -50%) rotate(270deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes carriage-wheel-sparkle-flicker {
  0%,
  100% {
    transform: translateX(0) translateY(0) scale(0.96);
    filter: brightness(1) saturate(1);
  }
  50% {
    transform: translateX(-1.8%) translateY(-1.2%) scale(1.06);
    filter: brightness(1.35) saturate(1.2);
  }
}

.carriage-body {
  position: absolute;
  left: 120px;
  bottom: 36px;
  width: 170px;
  height: 130px;
  background: radial-gradient(
    ellipse at 50% 35%,
    #fff0f6 0%,
    #f48fb1 60%,
    #ec407a 100%
  );
  border: 4px solid #6b1a3a;
  border-radius: 50% 50% 26% 26% / 60% 60% 30% 30%;
}

.carriage-roof {
  position: absolute;
  left: 50%;
  top: -22px;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  background: #ffd740;
  border: 3px solid #6b1a3a;
  border-radius: 50% 50% 0 0 / 70% 70% 0 0;
}

.carriage-roof::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  width: 4px;
  height: 12px;
  background: #6b1a3a;
}

.carriage-flag {
  position: absolute;
  left: 50%;
  top: -34px;
  transform: translateX(2px);
  width: 14px;
  height: 8px;
  background: #ec407a;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.carriage-window {
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  width: 78px;
  height: 56px;
  background: linear-gradient(180deg, #fff9e6, #fce4ec);
  border: 4px solid #6b1a3a;
  border-radius: 50% / 60%;
  overflow: hidden;
}

.carriage-princess {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
  background:
    radial-gradient(circle at 50% 30%, #ffeaa7 60%, transparent 62%),
    linear-gradient(180deg, #ec407a 0%, #ec407a 30%, #fce4ec 30%, #fce4ec 100%);
}

.carriage-princess::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  width: 22px;
  height: 8px;
  background: #ffd740;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 -3px 0 #ffd740;
}

.carriage-trim {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 6px;
  background: #ffd740;
  border-radius: 999px;
}

.carriage-trim-top {
  top: 8px;
}
.carriage-trim-bottom {
  bottom: 14px;
}

.carriage-wheel {
  position: absolute;
  bottom: 6px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff0f6;
  border: 5px solid #6b1a3a;
  box-shadow: inset 0 0 0 8px #ffd740;
}

.carriage-wheel-back {
  left: 116px;
}
.carriage-wheel-front {
  left: 218px;
}

.carriage-wheel-spokes {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #6b1a3a 0 6deg,
    transparent 6deg 84deg,
    #6b1a3a 84deg 96deg,
    transparent 96deg 174deg,
    #6b1a3a 174deg 186deg,
    transparent 186deg 264deg,
    #6b1a3a 264deg 276deg,
    transparent 276deg 354deg,
    #6b1a3a 354deg 360deg
  );
}

.carriage-ride-modal.playing[data-motion="moving"] .carriage-wheel-spokes {
  animation: carriage-wheel-spin 0.6s linear infinite;
}

@keyframes carriage-wheel-spin {
  to {
    transform: rotate(360deg);
  }
}

.carriage-horse {
  position: absolute;
  bottom: 8px;
  width: 80px;
  height: 96px;
}

.carriage-horse-back {
  left: 30px;
  z-index: 1;
}
.carriage-horse-front {
  left: 64px;
  z-index: 2;
}

.carriage-horse-body {
  position: absolute;
  bottom: 20px;
  width: 70px;
  height: 44px;
  background: #fff8f0;
  border: 3px solid #6b1a3a;
  border-radius: 50% 60% 40% 40% / 60% 70% 40% 40%;
}

.carriage-horse-head {
  position: absolute;
  left: -10px;
  bottom: 44px;
  width: 30px;
  height: 38px;
  background: #fff8f0;
  border: 3px solid #6b1a3a;
  border-radius: 60% 60% 40% 40% / 70% 70% 40% 40%;
}

.carriage-horse-head::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 18px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #6b1a3a;
}

.carriage-horse-mane {
  position: absolute;
  left: 8px;
  bottom: 50px;
  width: 24px;
  height: 18px;
  background: #ec407a;
  border-radius: 60% 60% 0 0;
}

.carriage-horse-leg {
  position: absolute;
  bottom: -4px;
  width: 8px;
  height: 26px;
  background: #fff8f0;
  border: 2px solid #6b1a3a;
  border-radius: 0 0 4px 4px;
}

.carriage-horse-leg-front {
  left: 16px;
}
.carriage-horse-leg-back {
  left: 46px;
}

.carriage-ride-modal.playing[data-motion="moving"] .carriage-horse-leg {
  animation: carriage-horse-trot 0.35s ease-in-out infinite alternate;
  transform-origin: top;
}

.carriage-ride-modal.playing[data-motion="moving"] .carriage-horse-leg-back {
  animation-delay: 0.175s;
}

@keyframes carriage-horse-trot {
  from {
    transform: rotate(-12deg);
  }
  to {
    transform: rotate(12deg);
  }
}

.carriage-challenge-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.carriage-answer-grid {
  position: absolute;
  left: 50%;
  top: clamp(86px, 14vh, 132px);
  width: min(520px, calc(100vw - 32px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  pointer-events: auto;
}

.carriage-answer-grid.has-pattern-visual {
  top: clamp(166px, 20vh, 194px);
}

.carriage-answer-grid.has-math-visual,
.carriage-answer-grid.has-bead-visual {
  top: clamp(210px, 27vh, 246px);
}

.carriage-answer-grid.has-choice-thumbnails {
  top: clamp(72px, 10vh, 94px);
  width: min(600px, calc(100vw - 32px));
  grid-template-columns: repeat(2, minmax(150px, 1fr));
}

.carriage-pattern-visual {
  position: absolute;
  left: 50%;
  top: clamp(78px, 10vh, 104px);
  z-index: 1;
  width: min(520px, calc(100vw - 32px));
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: clamp(8px, 1.4vw, 14px);
  padding: 9px 12px;
  border: 2px solid rgba(173, 45, 103, 0.5);
  border-radius: 999px;
  background: rgba(255, 240, 246, 0.82);
  box-shadow:
    0 8px 18px rgba(107, 26, 58, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  pointer-events: none;
}

.carriage-pattern-token {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(48px, 7.5vw, 66px);
  min-width: 0;
  aspect-ratio: 1.25 / 1;
  border: 3px solid rgba(107, 26, 58, 0.62);
  border-radius: 18px;
  color: #6b1a3a;
  font:
    900 clamp(12px, 1.7vw, 15px) / 1 "Comic Sans MS",
    "Trebuchet MS",
    system-ui,
    sans-serif;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 -5px 0 rgba(107, 26, 58, 0.1),
    0 4px 9px rgba(107, 26, 58, 0.14);
}

.carriage-pattern-token::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  width: 18px;
  height: 18px;
  transform: translateX(-50%) rotate(45deg);
  border: 2px solid rgba(107, 26, 58, 0.48);
  border-radius: 6px;
  background: inherit;
}

.carriage-pattern-token[data-color="red"] {
  background: linear-gradient(145deg, #ff5f91 0%, #e32960 58%, #b81546 100%);
  color: #fff9c4;
  text-shadow: 0 2px 0 rgba(107, 26, 58, 0.38);
}

.carriage-pattern-token[data-color="white"] {
  background: linear-gradient(145deg, #ffffff 0%, #fff9e7 62%, #ffd7e5 100%);
}

.carriage-pattern-token[data-color="pink"] {
  background: linear-gradient(145deg, #ffb3d4 0%, #ff69a3 65%, #e6377c 100%);
  color: #fff9c4;
  text-shadow: 0 2px 0 rgba(107, 26, 58, 0.32);
}

.carriage-pattern-token[data-color="gold"] {
  background: linear-gradient(145deg, #fff7a8 0%, #ffd740 62%, #f6a623 100%);
}

.carriage-pattern-token[data-color="unknown"] {
  background: linear-gradient(145deg, #fff9c4 0%, #ffe082 100%);
  border-style: dashed;
  font-size: clamp(20px, 3vw, 28px);
}

.carriage-math-visual {
  position: absolute;
  left: 50%;
  top: clamp(70px, 8vh, 92px);
  z-index: 1;
  width: min(700px, calc(100vw - 28px));
  height: clamp(98px, 15vh, 136px);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.carriage-math-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(107, 26, 58, 0.2));
}

.carriage-math-visual[data-layout="flower-subtraction"] {
  top: clamp(62px, 7vh, 80px);
  width: min(520px, calc(100vw - 28px));
  height: auto;
}

.carriage-math-visual[data-layout="flower-subtraction"] img {
  width: 100%;
  height: auto;
}

.carriage-math-visual[data-layout="flower-subtraction"] ~ .carriage-answer-grid.has-math-visual {
  top: clamp(302px, 43vh, 344px);
}

.carriage-math-answer-reveal {
  position: absolute;
  left: 89.5%;
  top: 48%;
  z-index: 2;
  display: grid;
  width: clamp(42px, 5.2vw, 58px);
  aspect-ratio: 1;
  place-items: center;
  transform: translate(-50%, -50%) translate(-120px, -80px) rotate(-18deg)
    scale(0.25);
  border: 3px solid #f6a623;
  border-radius: 999px;
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.95) 0 16%, transparent 17%),
    linear-gradient(145deg, #fff9c4 0%, #ffd740 58%, #f6a623 100%);
  color: #ad2d67;
  font:
    900 clamp(30px, 4.7vw, 48px) / 1 "Comic Sans MS",
    "Trebuchet MS",
    system-ui,
    sans-serif;
  opacity: 0;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.74),
    0 4px 0 rgba(107, 26, 58, 0.16);
  box-shadow:
    0 8px 16px rgba(107, 26, 58, 0.26),
    inset 0 -5px 0 rgba(173, 45, 103, 0.14);
}

.carriage-math-answer-reveal::before,
.carriage-math-answer-reveal::after {
  content: "";
  position: absolute;
  width: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ff78aa;
  box-shadow:
    16px -8px 0 #ffd740,
    -12px 12px 0 #64b5f6;
  opacity: 0;
}

.carriage-math-answer-reveal::before {
  right: 100%;
  top: 18%;
}

.carriage-math-answer-reveal::after {
  left: 100%;
  bottom: 14%;
}

.carriage-ride-modal[data-stop-state="cheer"] .carriage-math-answer-reveal {
  animation: carriage-answer-throw 760ms cubic-bezier(0.18, 0.9, 0.28, 1.26)
    forwards;
}

.carriage-ride-modal[data-stop-state="cheer"] .carriage-math-answer-reveal::before,
.carriage-ride-modal[data-stop-state="cheer"] .carriage-math-answer-reveal::after {
  animation: carriage-answer-spark 620ms ease-out 160ms forwards;
}

@keyframes carriage-answer-throw {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(-120px, -80px) rotate(-18deg)
      scale(0.25);
  }
  64% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(6px, -8px) rotate(8deg)
      scale(1.18);
  }
  82% {
    transform: translate(-50%, -50%) translate(-2px, 2px) rotate(-3deg)
      scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(1);
  }
}

@keyframes carriage-answer-spark {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.65);
  }
}

.carriage-bead-visual {
  position: absolute;
  left: 50%;
  top: clamp(76px, 9vh, 104px);
  z-index: 1;
  width: min(600px, calc(100vw - 28px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 18px);
  padding: 12px;
  border: 2px solid rgba(173, 45, 103, 0.46);
  border-radius: 24px;
  background: rgba(255, 240, 246, 0.84);
  box-shadow:
    0 8px 18px rgba(107, 26, 58, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  pointer-events: none;
}

.carriage-bead-group {
  min-width: 0;
  display: grid;
  gap: 7px;
  justify-items: center;
}

.carriage-bead-label {
  color: #6b1a3a;
  font:
    900 clamp(12px, 1.7vw, 15px) / 1 "Comic Sans MS",
    "Trebuchet MS",
    system-ui,
    sans-serif;
}

.carriage-bead-rail {
  position: relative;
  min-width: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: clamp(5px, 0.9vw, 8px);
  padding: 10px clamp(8px, 1.5vw, 12px);
  border: 3px solid rgba(107, 26, 58, 0.48);
  border-radius: 999px;
  background: linear-gradient(180deg, #fffef2 0%, #ffeaf3 100%);
  box-shadow: inset 0 -4px 0 rgba(236, 64, 122, 0.12);
}

.carriage-bead-rail::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(201, 132, 23, 0.46);
}

.carriage-bead {
  position: relative;
  z-index: 1;
  width: clamp(21px, 3.4vw, 31px);
  aspect-ratio: 1;
  border: 2px solid rgba(107, 26, 58, 0.34);
  border-radius: 50%;
  background: linear-gradient(145deg, #ffb3d4 0%, #ec407a 75%);
  box-shadow:
    inset -3px -4px 0 rgba(107, 26, 58, 0.16),
    inset 3px 3px 0 rgba(255, 255, 255, 0.45),
    0 2px 4px rgba(107, 26, 58, 0.15);
}

.carriage-bead[data-color="gold"] {
  background: linear-gradient(145deg, #fff7a8 0%, #ffd740 70%, #f6a623 100%);
}

.carriage-bead[data-color="blue"] {
  background: linear-gradient(145deg, #90caf9 0%, #1e88e5 72%, #1565c0 100%);
}

.carriage-drag-path-visual {
  position: absolute;
  left: 50%;
  top: clamp(86px, 11vh, 124px);
  z-index: 1;
  width: min(650px, calc(100vw - 28px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 1.8vw, 16px);
  padding: 14px clamp(12px, 2vw, 18px);
  border: 2px solid rgba(173, 45, 103, 0.48);
  border-radius: 28px;
  background: rgba(255, 240, 246, 0.86);
  box-shadow:
    0 8px 18px rgba(107, 26, 58, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  pointer-events: auto;
}

.carriage-drag-path-label {
  color: #6b1a3a;
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
  font:
    900 clamp(10px, 1.5vw, 12px) / 1 "Comic Sans MS",
    "Trebuchet MS",
    system-ui,
    sans-serif;
}

.carriage-drag-track {
  position: relative;
  height: 96px;
  min-width: 0;
  cursor: grab;
  touch-action: none;
}

.carriage-drag-track:active {
  cursor: grabbing;
}

.carriage-drag-track::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 50%;
  height: 18px;
  transform: translateY(-50%);
  border-radius: 999px;
  background:
    linear-gradient(90deg, #f8bbd0 0 12px, transparent 12px 24px) repeat-x,
    linear-gradient(180deg, #fff8f0 0%, #ff8bb9 100%);
  background-size:
    24px 100%,
    100% 100%;
  border: 3px solid rgba(173, 45, 103, 0.48);
  box-shadow: inset 0 -3px 0 rgba(107, 26, 58, 0.14);
}

.carriage-drag-track[data-path="arch"]::before {
  top: auto;
  bottom: 8px;
  height: 76px;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  background:
    repeating-linear-gradient(
      90deg,
      #fff8f0 0 16px,
      #ff5f91 16px 32px
    );
}

.carriage-drag-track[data-path="arch"]::after,
.carriage-drag-track[data-path="river"]::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd740, #f48fb1);
}

.carriage-drag-track[data-path="river"]::after {
  top: 50%;
  bottom: auto;
  height: 6px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #ff4081, #ffd740, #ff4081);
}

.carriage-drag-track[data-path="river"]::before {
  height: 22px;
  background:
    radial-gradient(circle at 18% 45%, rgba(255, 255, 255, 0.8) 0 3px, transparent 4px),
    radial-gradient(circle at 62% 55%, rgba(255, 255, 255, 0.68) 0 3px, transparent 4px),
    linear-gradient(180deg, #b3e5fc 0%, #4fc3f7 54%, #1e88e5 100%);
  border-color: rgba(30, 136, 229, 0.55);
}

.carriage-drag-arrow {
  position: absolute;
  left: calc(32px + ((100% - 64px) * var(--drag-progress, 0)));
  top: 50%;
  z-index: 2;
  width: 64px;
  height: 46px;
  transform: translate(-50%, calc(-50% + var(--drag-y, 0px)));
  border: 3px solid #ad2d67;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff9c4 0%, #ffd740 100%);
  box-shadow:
    0 6px 10px rgba(107, 26, 58, 0.18),
    inset 0 -4px 0 rgba(173, 45, 103, 0.16);
  cursor: grab;
  touch-action: none;
}

.carriage-drag-arrow span::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 24px;
  height: 9px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: #ec407a;
  box-shadow: inset 0 -2px 0 rgba(107, 26, 58, 0.18);
}

.carriage-drag-arrow span::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 17px solid #ec407a;
}

.carriage-drag-arrow:focus-visible {
  outline: 4px solid rgba(255, 215, 64, 0.85);
  outline-offset: 3px;
}

.carriage-drag-arrow.is-wrong {
  animation: carriage-wiggle 0.45s ease;
  border-color: #c62828;
}

.carriage-drag-arrow.is-correct {
  border-color: #2e7d32;
  background: linear-gradient(180deg, #e8f5e9 0%, #a5d6a7 100%);
}

.carriage-answer-choice {
  min-height: 52px;
  padding: 10px 14px;
  border: 3px solid #ad2d67;
  border-radius: 14px;
  background: rgba(255, 249, 196, 0.96);
  color: #6b1a3a;
  font:
    900 18px/1.08 "Comic Sans MS",
    "Trebuchet MS",
    system-ui,
    sans-serif;
  cursor: pointer;
  box-shadow:
    0 8px 18px rgba(107, 26, 58, 0.18),
    inset 0 -4px 0 rgba(236, 64, 122, 0.12);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.carriage-answer-choice:hover,
.carriage-answer-choice:focus-visible {
  transform: translateY(-2px);
  outline: 3px solid rgba(255, 215, 64, 0.8);
  outline-offset: 2px;
}

.carriage-answer-choice.is-correct {
  border-color: #2e7d32;
  background: rgba(220, 255, 225, 0.96);
}

.carriage-answer-choice.is-wrong {
  border-color: #c62828;
  background: rgba(255, 235, 238, 0.96);
}

.carriage-answer-choice.has-choice-thumb {
  display: flex;
  min-height: 146px;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  justify-content: flex-start;
  padding: 8px;
}

.carriage-choice-label {
  display: block;
  padding: 2px 4px 0;
}

.carriage-choice-thumb {
  display: block;
  width: 100%;
  height: clamp(76px, 8vw, 88px);
  border: 2px solid rgba(173, 45, 103, 0.38);
  border-radius: 10px;
  background: #b9def0;
  object-fit: cover;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.35),
    0 4px 8px rgba(107, 26, 58, 0.12);
}

.carriage-hotspot {
  position: absolute;
  min-width: 44px;
  min-height: 44px;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6b1a3a;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.carriage-hotspot-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 3px solid rgba(255, 249, 196, 0.98);
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 50%, #fff9c4 0 5px, transparent 6px),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18) 0 54%, transparent 56%);
  box-shadow:
    0 0 0 2px rgba(173, 45, 103, 0.72),
    0 0 14px rgba(255, 215, 64, 0.64);
  animation: carriage-hotspot-pulse 1.15s ease-in-out infinite alternate;
}

.carriage-hotspot-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 32px);
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(107, 26, 58, 0.84);
  color: #fff9c4;
  font:
    900 12px/1 "Comic Sans MS",
    "Trebuchet MS",
    system-ui,
    sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
}

.carriage-hotspot[data-label-position="above"] .carriage-hotspot-label {
  transform: translate(-50%, -44px);
}

.carriage-hotspot:hover .carriage-hotspot-ring,
.carriage-hotspot:focus-visible .carriage-hotspot-ring {
  border-color: #ffffff;
  box-shadow:
    0 0 0 3px #ec407a,
    0 0 18px rgba(255, 215, 64, 0.9);
}

.carriage-hotspot:focus-visible {
  outline: none;
}

.carriage-hotspot.is-correct .carriage-hotspot-ring,
.carriage-hotspot.is-found .carriage-hotspot-ring {
  border-color: rgba(220, 255, 225, 0.98);
  box-shadow:
    0 0 0 4px #2e7d32,
    0 0 30px rgba(129, 199, 132, 0.85);
  animation: none;
  transform: scale(1.02);
}

.carriage-hotspot.is-wrong .carriage-hotspot-ring {
  border-color: rgba(255, 235, 238, 0.98);
  box-shadow:
    0 0 0 4px #c62828,
    0 0 24px rgba(198, 40, 40, 0.5);
}

.carriage-hotspot:disabled,
.carriage-answer-choice:disabled {
  cursor: default;
}

.carriage-ride-modal.challenge-miss .carriage-learning {
  animation: carriage-panel-nudge 0.28s ease-in-out;
}

@keyframes carriage-hotspot-pulse {
  from {
    transform: scale(0.94);
  }
  to {
    transform: scale(1.03);
  }
}

@keyframes carriage-panel-nudge {
  0%,
  100% {
    transform: translateX(0);
  }
  35% {
    transform: translateX(-7px);
  }
  70% {
    transform: translateX(7px);
  }
}

.carriage-caption {
  position: absolute;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  z-index: 6;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(107, 26, 58, 0.85);
  color: #fff0f6;
  font:
    700 16px/1.2 "Comic Sans MS",
    "Trebuchet MS",
    system-ui,
    sans-serif;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.carriage-voice-controls {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 7;
  display: flex;
  gap: 8px;
}

.carriage-voice-toggle,
.carriage-voice-replay {
  min-height: 38px;
  padding: 7px 12px;
  border: 2px solid rgba(107, 26, 58, 0.72);
  border-radius: 999px;
  background: rgba(255, 240, 246, 0.9);
  color: #6b1a3a;
  font:
    800 12px/1 "Comic Sans MS",
    "Trebuchet MS",
    system-ui,
    sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(107, 26, 58, 0.14);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.carriage-voice-toggle[aria-pressed="false"] {
  background: rgba(255, 249, 196, 0.92);
}

.carriage-voice-replay:disabled {
  opacity: 0.55;
  cursor: default;
}

.carriage-learning {
  position: absolute;
  left: 18px;
  bottom: 24px;
  z-index: 7;
  box-sizing: border-box;
  width: min(300px, calc(100vw - 36px));
  transform: translateX(0);
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 12px;
  align-items: center;
  padding: 12px 14px;
  border: 2px solid rgba(107, 26, 58, 0.45);
  border-radius: 18px;
  background: rgba(255, 240, 246, 0.94);
  color: #6b1a3a;
  box-shadow: 0 8px 20px rgba(107, 26, 58, 0.2);
  font-family: "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
}

.carriage-learning-step {
  color: #8a2457;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.carriage-learning-concept {
  justify-self: start;
  color: #ad2d67;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.carriage-learning-prompt {
  min-width: 0;
  font-size: clamp(14px, 1.55vw, 17px);
  font-weight: 800;
  line-height: 1.18;
}

.carriage-learning-found {
  min-height: 42px;
  padding: 8px 14px;
  border: 2px solid #ec407a;
  border-radius: 999px;
  background: #fff9c4;
  color: #6b1a3a;
  font:
    800 14px/1 "Comic Sans MS",
    "Trebuchet MS",
    system-ui,
    sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.carriage-learning-found[hidden] {
  display: none;
}

.carriage-learning-found:active {
  transform: translateY(1px);
}

.carriage-close {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 7;
  min-height: 44px;
  padding: 8px 18px;
  border: 2px solid #6b1a3a;
  border-radius: 999px;
  background: #fff0f6;
  color: #6b1a3a;
  font:
    700 14px/1 "Comic Sans MS",
    "Trebuchet MS",
    system-ui,
    sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.carriage-close:hover {
  transform: translateY(-1px);
}

@media (max-width: 560px) {
  .carriage-vehicle {
    width: 240px;
    height: 140px;
    bottom: 13%;
  }
  .carriage-ride-modal[data-vehicle-layout="bridge-clear"] .carriage-vehicle {
    left: 42%;
    bottom: 11%;
  }
  .carriage-ride-modal[data-vehicle-layout="left-clear"] .carriage-vehicle {
    left: 39%;
    bottom: 11%;
  }
  .carriage-ride-modal.has-assets .carriage-vehicle {
    width: min(82vw, 360px);
    height: auto;
  }
  .carriage-ride-modal.has-assets[data-vehicle-layout="bridge-clear"] .carriage-vehicle,
  .carriage-ride-modal.has-assets[data-vehicle-layout="left-clear"] .carriage-vehicle {
    left: 50%;
    bottom: 13%;
  }
  .carriage-ride-modal.has-assets[data-ride-phase="story"] .carriage-vehicle {
    bottom: 7.5%;
  }
  .carriage-body {
    left: 80px;
    width: 120px;
    height: 90px;
    bottom: 28px;
  }
  .carriage-roof {
    width: 22px;
    height: 22px;
    top: -16px;
  }
  .carriage-window {
    width: 56px;
    height: 40px;
    top: 12px;
  }
  .carriage-princess {
    width: 26px;
    height: 26px;
  }
  .carriage-wheel {
    width: 44px;
    height: 44px;
  }
  .carriage-wheel-back {
    left: 76px;
  }
  .carriage-wheel-front {
    left: 152px;
  }
  .carriage-horse {
    width: 52px;
    height: 64px;
  }
  .carriage-horse-back {
    left: 18px;
  }
  .carriage-horse-front {
    left: 42px;
  }
  .carriage-horse-body {
    width: 50px;
    height: 30px;
    bottom: 14px;
  }
  .carriage-horse-head {
    width: 22px;
    height: 28px;
    left: -8px;
    bottom: 30px;
  }
  .carriage-horse-mane {
    width: 18px;
    height: 14px;
    left: 4px;
    bottom: 36px;
  }
  .carriage-horse-leg {
    width: 6px;
    height: 18px;
  }
  .carriage-horse-leg-front {
    left: 10px;
  }
  .carriage-horse-leg-back {
    left: 34px;
  }
  .carriage-caption {
    font-size: 14px;
    top: 14px;
  }
  .carriage-voice-controls {
    left: 10px;
    top: 62px;
    gap: 6px;
  }
  .carriage-voice-toggle,
  .carriage-voice-replay {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 11px;
  }
  .carriage-answer-grid {
    top: 108px;
    grid-template-columns: 1fr;
    gap: 8px;
    width: min(360px, calc(100vw - 24px));
  }
  .carriage-answer-grid.has-pattern-visual,
  .carriage-answer-grid.has-math-visual,
  .carriage-answer-grid.has-bead-visual {
    top: 198px;
  }
  .carriage-math-visual {
    top: 68px;
    width: min(420px, calc(100vw - 20px));
    height: 116px;
  }
  .carriage-bead-visual {
    top: 68px;
    width: min(420px, calc(100vw - 20px));
    gap: 8px;
    padding: 10px;
  }
  .carriage-bead-rail {
    gap: 4px;
    padding: 8px 6px;
  }
  .carriage-bead {
    width: 20px;
  }
  .carriage-drag-path-visual {
    top: 70px;
    width: min(420px, calc(100vw - 20px));
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px;
  }
  .carriage-drag-path-label {
    justify-self: center;
  }
  .carriage-drag-track {
    height: 82px;
    width: 100%;
  }
  .carriage-drag-arrow {
    width: 56px;
    height: 40px;
  }
  .carriage-answer-choice {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 15px;
    border-radius: 12px;
  }
  .carriage-hotspot-ring {
    border-width: 3px;
    width: 32px;
    height: 32px;
  }
  .carriage-hotspot-label {
    font-size: 10px;
    padding: 3px 7px;
    transform: translate(-50%, 26px);
  }
  .carriage-learning {
    bottom: 12px;
    grid-template-columns: 1fr;
    padding: 10px 12px;
  }
  .carriage-learning:has(.carriage-learning-found:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    align-items: end;
  }
  .carriage-learning-step {
    font-size: 10px;
  }
  .carriage-learning-concept {
    justify-self: start;
    font-size: 11px;
  }
  .carriage-learning-prompt {
    font-size: 15px;
  }
  .carriage-learning:has(.carriage-learning-found:not([hidden]))
    .carriage-learning-prompt {
    font-size: 14px;
    line-height: 1.14;
  }
  .carriage-learning-found {
    justify-self: start;
    min-height: 38px;
    font-size: 13px;
  }
  .carriage-learning:has(.carriage-learning-found:not([hidden]))
    .carriage-learning-found {
    justify-self: end;
    min-height: 36px;
    padding: 8px 14px;
  }
  .carriage-close {
    right: 10px;
    top: 10px;
  }
  .carriage-ride-launcher {
    left: 12px;
    bottom: 84px;
    min-height: 44px;
    padding: 7px 14px 7px 12px;
    font-size: 14px;
  }
}