@font-face {
  font-family: "Chiron GoRound TC";
  src: url("./assets/fonts/ChironGoRoundTC-subset.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

.is-trial-version .is-premium-locked {
  position: relative;
  filter: saturate(0.75) brightness(0.9);
}

.is-trial-version .is-premium-locked::after {
  content: "";
  position: absolute;
  right: 6%;
  bottom: 6%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 2px solid rgba(36, 50, 67, 0.22);
  border-radius: 999px;
  background-color: rgba(255, 247, 223, 0.94);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23243243'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='5'%20y='10'%20width='14'%20height='10'%20rx='2'/%3E%3Cpath%20d='M8%2010V7a4%204%200%200%201%208%200v3'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.35rem 1.35rem;
  pointer-events: none;
  transform-origin: center;
}

.is-trial-version .toc-vehicle-button.is-premium-locked::after {
  transform: rotate(calc(-1 * (var(--toc-tilt, 0deg) + var(--toc-layout-rotate, 0deg))));
}

.is-trial-version .activity-game-card.is-premium-locked::after {
  transform: rotate(calc(-1 * (var(--activity-card-rotate, 0deg) + var(--toc-layout-rotate, 0deg))));
}

/* Shared renderer primitives. Book-specific presentation stays in scoped book CSS. */
.reader-page-content {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.reader-image-card {
  position: relative;
  display: grid;
  max-width: min(84vw, 760px);
  max-height: 72vh;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  place-items: center;
  transform: translate(var(--layout-x, 0), var(--layout-y, 0)) scale(var(--layout-scale, 1));
}

.reader-page-image,
.reader-toc-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.reader-image-card.is-tapped {
  animation: reader-image-tap 640ms cubic-bezier(.2, .8, .2, 1);
}

.reader-toc-visual {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

@keyframes reader-image-tap {
  0%, 100% { transform: translate(var(--layout-x, 0), var(--layout-y, 0)) scale(var(--layout-scale, 1)); }
  45% { transform: translate(var(--layout-x, 0), calc(var(--layout-y, 0) - 4%)) scale(calc(var(--layout-scale, 1) * 1.08)); }
}

.reader-entry-page {
  min-height: 100dvh;
  display: grid;
  margin: 0;
  padding: 24px;
  background: #eef7ef;
  color: #233a2a;
  place-items: center;
}

.reader-entry-card {
  width: min(92vw, 560px);
  padding: clamp(28px, 6vw, 52px);
  border-radius: 32px;
  background: #fffef8;
  box-shadow: 0 20px 50px rgba(35, 58, 42, 0.16);
  text-align: center;
}

.unlock-panel {
  display: grid;
  gap: 0.85rem;
}

.unlock-panel.hidden {
  display: none;
}

.unlock-copy {
  margin: 0;
  color: #243243;
  font-size: 0.95rem;
  line-height: 1.55;
}

.purchase-link {
  display: inline-grid;
  place-items: center;
  justify-self: stretch;
  min-height: 44px;
  padding: 7px 34px 9px;
  border-radius: 999px;
  background: var(--ui-solid-bg);
  color: var(--ui-solid-fg);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}

.unlock-code-field {
  display: grid;
  gap: 0.35rem;
  color: #243243;
  font-weight: 800;
}

.unlock-code-field input {
  width: 100%;
  min-height: 2.8rem;
  box-sizing: border-box;
  border: 2px solid rgba(36, 50, 67, 0.24);
  border-radius: 0.5rem;
  padding: 0.55rem 0.7rem;
  color: #243243;
  font: inherit;
  text-transform: uppercase;
}

.unlock-status {
  min-height: 1.4em;
  margin: 0;
  color: #0057d9;
  font-weight: 800;
}

.unlock-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.unlock-actions .unlock-secondary-button,
.unlock-actions .unlock-primary-button {
  display: inline-grid;
  place-items: center;
  min-height: 58px;
  border-radius: 999px;
  font-size: 1.12rem;
  font-weight: 950;
  text-align: center;
  line-height: 1.1;
}

.unlock-actions .unlock-secondary-button {
  border-color: #f0a000;
  background: #fff7df;
  color: #243243;
}

.unlock-actions .unlock-primary-button {
  background: var(--ui-solid-bg);
  color: var(--ui-solid-fg);
}

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

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

:root {
  color-scheme: light;
  --ink: #273341;
  --berry: #ff6f91;
  --banana: #ffe978;
  --mint: #7ee6c4;
  --sky: #8fd7ff;
  --cream: #fff9dc;
  --page: #fffdf1;
  --blue: #2f86de;
  --book-bg: #ffd600;
  --page-ink: #000000;
  --page-panel: #ffffff;
  --drive-duration: 3.25s;
  --drive-brake-left: -4.8vw;
  --drive-bounce-right: 1.8vw;
  --body-spring: 1.2;
  --body-lift: -10px;
  --body-drop: 4px;
  --body-rebound: -4px;
  --body-squash-x: 0.982;
  --body-squash-y: 1.035;
  --body-stretch-x: 1.01;
  --body-stretch-y: 0.992;
  --wheel-end: -3600deg;
  --wheel-fast: -1800deg;
  --wheel-cruise: -3240deg;
  --wheel-pre-brake: -3480deg;
  --page-enter-offscreen: 160vw;
  --radius: 8px;
  --fabric-button-bg: #fff7df;
  --fabric-button-edge: #ffe6a3;
  --fabric-button-stitch: rgba(95, 67, 34, 0.34);
  --fabric-button-ink: #4e3a24;
  --fabric-button-active-bg: #2f86de;
  --fabric-button-active-edge: #8fd7ff;
  --fabric-button-active-ink: #fffdf1;
  --ui-solid-bg: #1b2bc5;
  --ui-solid-fg: #ffffff;
  --ui-button-pill: url("./assets/ui-button-pill.png");
  --ui-button-rect: url("./assets/ui-button-rect.png");
  --ui-button-nav: url("./assets/ui-button-nav.png");
  --ui-button-active: url("./assets/ui-button-active.png");
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--cream);
  color: var(--ink);
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.soft-button,
.timer-pill,
.page-count-pill,
.parent-corner-button,
.settings-gear-button,
.page-nav-button,
.editor-tab,
.primary-button,
.dialog-close,
.action-row {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 0;
  background: var(--ui-solid-bg);
  background-image: none;
  color: var(--ui-solid-fg);
  box-shadow: none;
  text-shadow: none;
  transition:
    background-color 620ms cubic-bezier(0.16, 0.82, 0.24, 1),
    color 460ms ease,
    border-color 520ms ease,
    filter 180ms ease,
    transform 180ms ease,
    opacity 180ms ease;
}

.soft-button::after,
.timer-pill::after,
.page-count-pill::after,
.parent-corner-button::after,
.settings-gear-button::after,
.page-nav-button::after,
.editor-tab::after,
.primary-button::after,
.dialog-close::after,
.action-row::after {
  content: "";
  display: none;
}

.soft-button:active,
.parent-corner-button:active,
.settings-gear-button:active,
.page-nav-button:active,
.editor-tab:active,
.primary-button:active,
.dialog-close:active,
.action-row:active {
  transform: translateY(5px);
  filter: brightness(0.92) saturate(1.06);
  box-shadow: none;
}

.app-shell,
.screen {
  width: 100%;
  min-height: 100dvh;
}

.hidden {
  display: none !important;
}

.cover-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: #f3f1ea;
  overflow: hidden;
}

.cover-screen::before {
  content: "";
  position: absolute;
  width: min(76vw, 760px);
  aspect-ratio: 1;
  border-radius: 28px;
  background: transparent;
  opacity: 0;
  filter: none;
  transform: translate3d(4vw, -3vh, -180px) rotate(8deg);
}

.parent-corner-button {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 6;
  display: grid;
  place-items: center;
  width: clamp(42px, 8.5vw, 58px);
  height: clamp(42px, 8.5vw, 58px);
  padding: 0;
  border-radius: 999px;
  background: transparent;
  color: transparent;
  font-size: 0;
  text-shadow: none;
}

.parent-corner-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 5px 5px rgba(80, 56, 30, 0.2));
}

.cover-book {
  position: relative;
  z-index: 1;
  width: min(82vw, 560px, 58dvh);
  aspect-ratio: 4 / 5;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #000000;
  cursor: pointer;
  overflow: visible;
  transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease;
  filter: drop-shadow(0 28px 28px rgba(0, 0, 0, 0.2));
  touch-action: manipulation;
}

.cover-screen.is-opening .cover-book {
  animation: open-cover 760ms cubic-bezier(0.18, 0.82, 0.3, 1) forwards;
}

.cover-screen:not(.is-opening) .cover-book {
  animation: cover-book-idle-bounce 3.8s cubic-bezier(0.34, 0, 0.22, 1) infinite;
  transform-origin: center bottom;
  will-change: transform, filter;
}

.cover-screen.is-cover-pressing:not(.is-opening) .cover-book {
  animation: cover-book-press 180ms cubic-bezier(0.16, 0.84, 0.24, 1.18) both;
  transform-origin: center bottom;
}

.cover-book:active {
  transform-origin: center bottom;
}

.cover-fallback-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  opacity: 1;
  pointer-events: none;
}

.car-image {
  display: block;
  object-fit: contain;
}

.car-image.failed {
  display: none;
}

.book-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: var(--book-bg);
  overflow: hidden;
  transition: background-color 220ms ease;
}

.book-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--incoming-book-bg, var(--book-bg));
  opacity: 0;
  pointer-events: none;
}

.book-screen.page-bg-next::before {
  animation: page-bg-sweep-next 1120ms cubic-bezier(0.22, 0.72, 0.22, 1) both;
}

.book-screen.page-bg-prev::before {
  animation: page-bg-sweep-prev 1120ms cubic-bezier(0.22, 0.72, 0.22, 1) both;
}

.book-top-bar {
  position: relative;
  z-index: 5;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.book-top-bar,
.book-top-bar button,
.book-top-bar .page-count-pill,
.book-top-bar .timer-pill {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.soft-button,
.timer-pill,
.settings-gear-button {
  min-height: 44px;
  padding: 0 15px;
  border-radius: 999px;
  font-weight: 950;
}

.timer-pill {
  display: none !important;
  align-items: center;
  margin-left: auto;
}

.settings-gear-button {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  flex: 0 0 auto;
  font-size: 1.42rem;
  line-height: 1;
}

.editor-toggle-button.is-active {
  background: var(--ui-solid-bg);
  background-image: none;
  color: var(--ui-solid-fg);
  text-shadow: none;
}

#layout-toggle-button {
  display: none !important;
}

.layout-floating-toggle {
  position: fixed;
  right: max(16px, calc(env(safe-area-inset-right) + 14px));
  bottom: max(96px, calc(env(safe-area-inset-bottom) + 84px));
  z-index: 13;
  min-width: 74px;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--ui-solid-bg);
  color: var(--ui-solid-fg);
  font-family: "Chiron GoRound TC", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 950;
  letter-spacing: 0;
  box-shadow: none;
  pointer-events: auto;
  touch-action: manipulation;
}

.layout-floating-toggle.is-active {
  filter: brightness(0.94) saturate(1.08);
}

.cover-screen:not(.hidden) ~ .book-screen .layout-floating-toggle,
.book-screen.hidden .layout-floating-toggle {
  display: none;
}

.layout-panel {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 12;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  gap: 10px;
  width: min(94vw, 1080px);
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 253, 241, 0.96);
  box-shadow: 0 18px 42px rgba(64, 92, 108, 0.2);
  transform: translateX(-50%);
}

.editor-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  min-width: 72px;
}

.editor-data-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  min-width: 72px;
}

.primary-editor-button {
  color: #14263a;
}

.editor-tab {
  min-height: 38px;
  border-radius: 12px;
  font-weight: 950;
}

.editor-tab.is-active {
  background: var(--ui-solid-bg);
  background-image: none;
  color: var(--ui-solid-fg);
  text-shadow: none;
}

.editor-control-grid {
  display: grid;
  grid-template-columns: minmax(120px, 180px) repeat(4, minmax(120px, 1fr)) auto;
  align-items: end;
  gap: 10px;
}

.motion-controls {
  grid-template-columns: repeat(5, minmax(110px, 1fr)) auto auto;
}

.garage-image-controls {
  grid-template-columns: repeat(3, minmax(130px, 1fr)) auto;
}

.layout-field {
  display: grid;
  gap: 5px;
  color: #3c5260;
  font-size: 0.82rem;
  font-weight: 950;
}

.layout-field small {
  color: #607582;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
}

.range-hints {
  display: flex;
  justify-content: space-between;
  color: #607582;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.range-hints b {
  font-weight: 950;
}

.layout-field select,
.layout-field input {
  width: 100%;
}

.layout-field select {
  min-height: 38px;
  border: 0;
  border-radius: 12px;
  padding: 0 10px;
  background: #ffffff;
  background-image: none;
  color: #344956;
  font-weight: 900;
  box-shadow: none;
}

.layout-field input {
  accent-color: #2f86de;
}

.layout-panel .soft-button,
.editor-tab {
  background: #fffdf1;
  background-image: none;
  border: 2px solid #d7e0e5;
  color: #344956;
  box-shadow: inset 0 -2px 0 rgba(64, 92, 108, 0.08);
  text-shadow: none;
}

.layout-panel .soft-button:active,
.editor-tab:active {
  transform: translateY(1px);
  filter: none;
}

.editor-toggle-button.is-active,
.editor-tab.is-active {
  background: var(--ui-solid-bg);
  background-image: none;
  border-color: var(--ui-solid-bg);
  color: var(--ui-solid-fg);
  box-shadow: none;
  text-shadow: none;
}

.layout-field select {
  background: #ffffff;
  background-image: none;
  border: 2px solid #d7e0e5;
  box-shadow: inset 0 -2px 0 rgba(64, 92, 108, 0.05);
}

.page-count-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 15px;
  border-radius: 999px;
  font-weight: 950;
}

#page-count-label {
  display: none !important;
}

.page-nav-button {
  position: fixed;
  top: 48%;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 7.2vw, 64px);
  height: clamp(92px, 13.9vw, 123px);
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 28px);
  border-radius: 999px;
  color: transparent;
  font-size: 0;
  line-height: 0;
  font-weight: 950;
  text-align: center;
}

.page-nav-button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(16px, 2.6vw, 23px);
  height: clamp(16px, 2.6vw, 23px);
  border: solid var(--ui-solid-fg);
  border-width: 0 clamp(5px, 0.78vw, 7px) clamp(5px, 0.78vw, 7px) 0;
  transform-origin: center;
  transition: border-color 460ms ease;
}

.page-nav-left::before {
  transform: translate(-42%, -50%) rotate(135deg);
}

.page-nav-right::before {
  transform: translate(-58%, -50%) rotate(-45deg);
}

.page-nav-button:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.soft-button:disabled {
  opacity: 0.48;
  pointer-events: none;
  filter: grayscale(0.18);
}

.page-nav-left {
  left: max(16px, calc(env(safe-area-inset-left) + 10px));
}

.page-nav-right {
  right: max(16px, calc(env(safe-area-inset-right) + 10px));
}

.reader-stage,
.vehicle-stage {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0 clamp(68px, 10vw, 112px);
}

.book-screen.is-toc-page .page-nav-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.book-screen.is-toc-page .page-count-pill {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.book-screen.is-toc-page .reader-stage,
.book-screen.is-toc-page .vehicle-stage {
  padding: clamp(18px, 3dvh, 36px) clamp(18px, 3.8vw, 48px);
}

.book-screen.is-toc-page .word-panel {
  display: grid;
}

.toc-page {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: grid;
  place-items: center;
  pointer-events: auto;
}

.toc-open-book {
  position: relative;
  --toc-book-extra-scale: 1;
  width: min(100%, 1060px, calc((100dvh - 158px) * 1.34));
  height: auto;
  max-height: 100%;
  aspect-ratio: 1447 / 1087;
  margin: 0 auto;
  display: grid;
  place-items: center;
  transform:
    translate(var(--toc-layout-x, 0), var(--toc-layout-y, 0))
    scale(var(--toc-layout-scale, 1))
    scale(var(--toc-book-extra-scale))
    rotate(var(--toc-layout-rotate, 0deg));
  transform-origin: center;
  transition: transform 180ms ease;
}

.toc-open-book-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.2);
  transform-origin: center;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 18px 26px rgba(32, 45, 58, 0.16));
}

.toc-playfield {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 18%;
  bottom: 32%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(6px, 1.1vw, 18px) clamp(8px, 1.4vw, 24px);
  padding: clamp(6px, 1vw, 14px) clamp(8px, 1.2vw, 18px);
  overflow: visible;
  background: transparent;
}

.toc-vehicle-button {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: clamp(112px, 11.5vw, 178px);
  padding: clamp(3px, 0.45vw, 7px);
  color: #243243;
  background: transparent;
  border: 0;
  text-align: center;
  transform:
    translate(var(--toc-layout-x, 0), var(--toc-layout-y, 0))
    scale(var(--toc-layout-scale, 1))
    rotate(calc(var(--toc-tilt, 0deg) + var(--toc-layout-rotate, 0deg)))
    translate3d(0, 0, 0);
  transition: transform 180ms ease;
}

.toc-vehicle-button:nth-child(odd) {
  --toc-tilt: -2deg;
}

.toc-vehicle-button:nth-child(3n) {
  --toc-tilt: 2deg;
}

.toc-vehicle-button:hover {
  transform:
    translate(var(--toc-layout-x, 0), var(--toc-layout-y, 0))
    scale(var(--toc-layout-scale, 1))
    rotate(calc(var(--toc-tilt, 0deg) + var(--toc-layout-rotate, 0deg)))
    translateY(-3px);
}

.toc-vehicle-button:focus-visible {
  outline: 4px solid rgba(0, 124, 190, 0.58);
  outline-offset: 6px;
}

.toc-path-a .toc-vehicle-visual {
  animation-name: toc-drive-a;
}

.toc-path-b .toc-vehicle-visual {
  animation-name: toc-drive-b;
}

.toc-path-c .toc-vehicle-visual {
  animation-name: toc-drive-c;
}

.toc-path-float .toc-vehicle-visual {
  animation-name: toc-float;
}

.toc-vehicle-visual {
  position: relative;
  --toc-sticker-edge: clamp(2px, 0.130208vw, 5px);
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  pointer-events: none;
  transform-origin: center bottom;
  transition: transform 180ms ease;
  filter:
    drop-shadow(var(--toc-sticker-edge) 0 0 #fffefa)
    drop-shadow(calc(var(--toc-sticker-edge) * -1) 0 0 #fffefa)
    drop-shadow(0 var(--toc-sticker-edge) 0 #fffefa)
    drop-shadow(0 calc(var(--toc-sticker-edge) * -1) 0 #fffefa)
    drop-shadow(0 9px 10px rgba(70, 45, 18, 0.2));
  animation-duration: var(--toc-duration);
  animation-delay: var(--toc-delay);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  will-change: transform;
}

.toc-vehicle-button:active .toc-vehicle-visual {
  transform: translateY(4px) scale(0.985);
}

.book-screen.is-toc-page.is-layout-editing .toc-vehicle-visual,
.book-screen.is-toc-page.is-layout-editing .toc-vehicle-wheel img,
.book-screen.is-toc-page.is-layout-editing .toc-helicopter-tail-rotor img,
.book-screen.is-toc-page.is-layout-editing .toc-game-icon {
  animation: none !important;
}

.toc-vehicle-part {
  position: absolute;
  display: block;
  transform: translate(-50%, -50%);
  transform-origin: center;
  aspect-ratio: 3 / 2;
  pointer-events: none;
}

.toc-vehicle-part.is-square,
.toc-vehicle-wheel,
.toc-helicopter-tail-rotor {
  aspect-ratio: 1;
}

.toc-vehicle-part img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
  pointer-events: none;
}

.toc-vehicle-wheel img {
  animation: toc-wheel-roll 2.4s linear infinite;
}

.toc-helicopter-tail-rotor img {
  animation: helicopter-tail-spin 320ms linear infinite;
}

.toc-game-button {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  width: min(100%, clamp(92px, 9.8vw, 148px));
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: transparent;
  transform:
    translate(var(--toc-layout-x, 0), var(--toc-layout-y, 0))
    scale(var(--toc-layout-scale, 1))
    rotate(calc(2deg + var(--toc-layout-rotate, 0deg)));
  transition: transform 180ms ease;
  will-change: transform;
}

.toc-game-button:focus-visible {
  outline: 4px solid rgba(255, 253, 241, 0.95);
  outline-offset: 6px;
}

.toc-game-icon {
  --toc-sticker-edge: clamp(2px, 0.130208vw, 5px);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transform-origin: 50% 70%;
  animation: toc-game-float 13s ease-in-out infinite alternate;
  filter:
    drop-shadow(var(--toc-sticker-edge) 0 0 #fffefa)
    drop-shadow(calc(var(--toc-sticker-edge) * -1) 0 0 #fffefa)
    drop-shadow(0 var(--toc-sticker-edge) 0 #fffefa)
    drop-shadow(0 calc(var(--toc-sticker-edge) * -1) 0 #fffefa)
    drop-shadow(0 9px 10px rgba(70, 45, 18, 0.2));
}

.toc-game-button:active .toc-game-icon {
  transform: translateY(3px) scale(0.985);
}

.toc-game-button.is-entering {
  pointer-events: none;
}

.toc-game-button.is-entering .toc-game-icon {
  animation: toc-game-enter 360ms cubic-bezier(0.22, 1.45, 0.44, 1) both;
}

.police-playground,
.vehicle-playground,
.placeholder-vehicle {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: clamp(14px, 2.8dvh, 34px);
}

.police-playground,
.vehicle-playground {
  isolation: isolate;
}

.speech-success-fireworks.pull-perfect-fireworks {
  left: 50%;
  top: 39%;
  z-index: 2;
  width: min(92%, 900px);
  height: min(64%, 430px);
  transform: translate(-50%, -50%);
}

.speech-success-fireworks.pull-perfect-fireworks.is-active {
  animation-duration: 2.45s;
}

.speech-success-fireworks .pull-firework-burst:nth-child(1) {
  left: 25%;
  top: 30%;
}

.speech-success-fireworks .pull-firework-burst:nth-child(2) {
  left: 52%;
  top: 14%;
}

.speech-success-fireworks .pull-firework-burst:nth-child(3) {
  left: 79%;
  top: 30%;
}

.speech-firework-launch-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(5px, 0.62vw, 9px);
  height: clamp(64px, 9vmin, 106px);
  z-index: 2;
  border-radius: 999px;
  background: #ffd447;
  opacity: 0;
  transform-origin: 50% 100%;
}

.speech-success-fireworks .pull-firework-burst:nth-child(2) .speech-firework-launch-line {
  background: #ff786f;
}

.speech-success-fireworks .pull-firework-burst:nth-child(3) .speech-firework-launch-line {
  background: #77cfff;
}

.speech-success-fireworks.is-active .pull-firework-burst:nth-child(1) .speech-firework-launch-line {
  animation: speech-firework-launch-left 650ms var(--launch-delay) cubic-bezier(0.22, 0.72, 0.24, 1) both;
}

.speech-success-fireworks.is-active .pull-firework-burst:nth-child(2) .speech-firework-launch-line {
  animation: speech-firework-launch-center 650ms var(--launch-delay) cubic-bezier(0.22, 0.72, 0.24, 1) both;
}

.speech-success-fireworks.is-active .pull-firework-burst:nth-child(3) .speech-firework-launch-line {
  animation: speech-firework-launch-right 650ms var(--launch-delay) cubic-bezier(0.22, 0.72, 0.24, 1) both;
}

.speech-success-fireworks.pull-perfect-fireworks.is-active .pull-firework-burst:nth-child(1)::before,
.speech-success-fireworks.pull-perfect-fireworks.is-active .pull-firework-burst:nth-child(1)::after,
.speech-success-fireworks.pull-perfect-fireworks.is-active .pull-firework-burst:nth-child(1) i {
  animation-delay: 650ms;
}

.speech-success-fireworks.pull-perfect-fireworks.is-active .pull-firework-burst:nth-child(2)::before,
.speech-success-fireworks.pull-perfect-fireworks.is-active .pull-firework-burst:nth-child(2)::after,
.speech-success-fireworks.pull-perfect-fireworks.is-active .pull-firework-burst:nth-child(2) i {
  animation-delay: 830ms;
}

.speech-success-fireworks.pull-perfect-fireworks.is-active .pull-firework-burst:nth-child(3)::before,
.speech-success-fireworks.pull-perfect-fireworks.is-active .pull-firework-burst:nth-child(3)::after,
.speech-success-fireworks.pull-perfect-fireworks.is-active .pull-firework-burst:nth-child(3) i {
  animation-delay: 1010ms;
}

@keyframes speech-firework-launch-left {
  0% {
    opacity: 0;
    transform: translate(82px, 210px) rotate(-17deg) scaleY(0.16);
  }
  16% {
    opacity: 1;
    transform: translate(72px, 180px) rotate(-15deg) scaleY(0.92);
  }
  76% {
    opacity: 1;
    transform: translate(16px, 34px) rotate(-7deg) scaleY(0.72);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scaleY(0.08);
  }
}

@keyframes speech-firework-launch-center {
  0% {
    opacity: 0;
    transform: translate(-50%, 238px) rotate(2deg) scaleY(0.16);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, 204px) rotate(1deg) scaleY(0.92);
  }
  76% {
    opacity: 1;
    transform: translate(-50%, 38px) rotate(-1deg) scaleY(0.72);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scaleY(0.08);
  }
}

@keyframes speech-firework-launch-right {
  0% {
    opacity: 0;
    transform: translate(-92px, 210px) rotate(17deg) scaleY(0.16);
  }
  16% {
    opacity: 1;
    transform: translate(-82px, 180px) rotate(15deg) scaleY(0.92);
  }
  76% {
    opacity: 1;
    transform: translate(-24px, 34px) rotate(7deg) scaleY(0.72);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scaleY(0.08);
  }
}

.police-playground > .car-button,
.vehicle-playground > .vehicle-card,
.police-playground > .speech-challenge,
.vehicle-playground > .speech-challenge {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .speech-success-fireworks.pull-perfect-fireworks.is-active {
    animation-duration: 920ms;
  }

  .speech-success-fireworks.pull-perfect-fireworks.is-active .pull-firework-burst::before,
  .speech-success-fireworks.pull-perfect-fireworks.is-active .pull-firework-burst::after,
  .speech-success-fireworks.pull-perfect-fireworks.is-active .pull-firework-burst i {
    animation-duration: 420ms;
  }

  .speech-success-fireworks.is-active .speech-firework-launch-line {
    animation-duration: 280ms;
  }

  .speech-success-fireworks.is-active .pull-firework-burst:nth-child(1) .speech-firework-launch-line { animation-delay: 0ms; }
  .speech-success-fireworks.is-active .pull-firework-burst:nth-child(2) .speech-firework-launch-line { animation-delay: 90ms; }
  .speech-success-fireworks.is-active .pull-firework-burst:nth-child(3) .speech-firework-launch-line { animation-delay: 180ms; }

  .speech-success-fireworks.pull-perfect-fireworks.is-active .pull-firework-burst:nth-child(1)::before,
  .speech-success-fireworks.pull-perfect-fireworks.is-active .pull-firework-burst:nth-child(1)::after,
  .speech-success-fireworks.pull-perfect-fireworks.is-active .pull-firework-burst:nth-child(1) i {
    animation-delay: 320ms;
  }

  .speech-success-fireworks.pull-perfect-fireworks.is-active .pull-firework-burst:nth-child(2)::before,
  .speech-success-fireworks.pull-perfect-fireworks.is-active .pull-firework-burst:nth-child(2)::after,
  .speech-success-fireworks.pull-perfect-fireworks.is-active .pull-firework-burst:nth-child(2) i {
    animation-delay: 410ms;
  }

  .speech-success-fireworks.pull-perfect-fireworks.is-active .pull-firework-burst:nth-child(3)::before,
  .speech-success-fireworks.pull-perfect-fireworks.is-active .pull-firework-burst:nth-child(3)::after,
  .speech-success-fireworks.pull-perfect-fireworks.is-active .pull-firework-burst:nth-child(3) i {
    animation-delay: 500ms;
  }
}

.activity-stars {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--ui-solid-bg);
  color: var(--ui-solid-fg);
  font-family: "Lilita One", "Chiron GoRound TC", system-ui, sans-serif;
  font-size: clamp(1rem, 2.2vw, 1.28rem);
  font-weight: 900;
  line-height: 1.1;
}

.activity-stars.is-pulsing {
  animation: star-badge-pop 520ms cubic-bezier(0.16, 0.9, 0.2, 1.18) both;
}

.activity-back-button,
.activity-difficulty-button,
.activity-game-card {
  border: 0;
  box-shadow: none;
  text-shadow: none;
}

.book-screen.is-activity-page .page-nav-button {
  display: none;
}

.book-screen.is-game-directory-page .activity-menu-top .activity-back-button {
  visibility: hidden;
  pointer-events: none;
}

.car-button {
  width: min(86vw, 820px, 69dvh, 645px);
  height: auto;
  aspect-ratio: 3 / 2;
  min-height: 0;
  border-radius: 34px;
  background: transparent;
  display: grid;
  place-items: center;
  overflow: visible;
}

.car-runner {
  position: relative;
  display: block;
  width: min(100%, 760px, 69dvh, 645px);
  aspect-ratio: 3 / 2;
  max-height: none;
  transform-origin: center 72%;
  transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1));
}

.car-runner::before {
  content: "";
  display: none;
}

.car-body-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 2;
  transform-origin: center 76%;
  transform: translate(var(--part-layout-x, var(--layout-x, 0)), var(--part-layout-y, var(--layout-y, 0))) scale(var(--part-layout-scale, var(--layout-scale, 1)));
}

.car-main-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

.wheel-overlay {
  position: absolute;
  z-index: 1;
  top: 74.1%;
  width: 23.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 1;
  transform: translate(-50%, -50%);
  transform-origin: center;
  pointer-events: none;
}

.wheel-overlay-left {
  left: 33.2%;
}

.wheel-overlay-right {
  left: 67.6%;
}

.wheel-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}

.car-button.is-driving-sequence .car-runner {
  animation: car-drive-loop var(--drive-duration) cubic-bezier(0.2, 0.78, 0.28, 1) both;
}

.car-button.is-driving-sequence .car-body-layer {
  animation: car-body-arch var(--drive-duration) ease-in-out both;
}

.car-button.is-driving-sequence .wheel-image {
  animation: wheel-spin var(--drive-duration) linear both;
}

.word-panel {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: clamp(6px, 1.1vw, 12px);
  padding: 0 8px 12px;
  text-align: center;
  font-weight: 950;
}

.word-panel h2 {
  margin: 0;
  font-size: clamp(3.7rem, 13vw, 7.4rem);
  line-height: 0.95;
  letter-spacing: 0;
  font-weight: 950;
  color: var(--page-ink);
  white-space: nowrap;
}

.word-panel p {
  margin: 0;
  color: var(--page-ink);
  font-size: clamp(1.55rem, 4.4vw, 2.85rem);
  line-height: 1.05;
  font-weight: 950;
  opacity: 1;
  white-space: nowrap;
}

.word-panel .word-line:first-child {
  margin: 0;
  font-size: clamp(3.7rem, 13vw, 7.4rem);
  line-height: 0.95;
  font-weight: 950;
  white-space: nowrap;
}

.word-panel .word-line:not(:first-child) {
  margin: 0;
  font-size: clamp(1.55rem, 4.4vw, 2.85rem);
  line-height: 1.05;
  font-weight: 950;
  white-space: nowrap;
}

.word-panel .word-line-zh {
  font-family: "Chiron GoRound TC", system-ui, sans-serif;
  font-weight: 900;
}

.word-panel .word-line-en {
  font-family: "Darumadrop One", system-ui, sans-serif;
  font-size: clamp(1.34rem, 3.85vw, 2.45rem);
  font-weight: 400 !important;
  line-height: 1.16;
  letter-spacing: 0.01em;
  transform: translateY(-0.12em);
}

.word-panel .word-line-ja {
  font-family: "Darumadrop One", system-ui, sans-serif;
  font-size: clamp(1.28rem, 3.65vw, 2.34rem);
  font-weight: 400 !important;
  line-height: 1.16;
  letter-spacing: 0.02em;
}

.speech-challenge {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 54px;
  align-self: start;
  margin-bottom: clamp(4px, 1.4dvh, 18px);
}

.speech-challenge-button {
  display: inline-grid;
  grid-template-columns: 28px auto;
  align-items: center;
  justify-items: center;
  gap: 10px;
  min-width: 132px;
  min-height: 50px;
  padding: 9px 17px;
  border: 0;
  border-radius: 999px;
  background: var(--ui-solid-bg);
  color: var(--ui-solid-fg);
  box-shadow: none;
  font-family: "Chiron GoRound TC", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
  white-space: normal;
}

.speech-challenge-button:disabled {
  opacity: 0.44;
}

.speech-mic-icon {
  position: relative;
  display: block;
  width: 22px;
  height: 26px;
  justify-self: center;
}

.speech-mic-icon::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 1px;
  width: 10px;
  height: 16px;
  border: 3px solid currentColor;
  border-radius: 10px;
  background: transparent;
}

.speech-mic-icon::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 12px;
  width: 16px;
  height: 12px;
  border: 3px solid currentColor;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  box-shadow: 6px 9px 0 -4px currentColor, 0 13px 0 -4px currentColor;
}

.police-speech-challenge {
  min-height: clamp(56px, 7dvh, 72px);
}

.police-speech-button {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  grid-template-columns: auto;
  align-items: center;
  justify-items: center;
  min-width: clamp(176px, 23vw, 286px);
  min-height: clamp(52px, 6.8dvh, 72px);
  padding: 8px clamp(24px, 4.2vw, 46px);
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background-color: var(--speech-button-bg, #243243);
  color: var(--speech-button-fg, #ffffff);
  font-family: "Chiron GoRound TC", system-ui, sans-serif;
  font-size: clamp(1.08rem, 2.55vw, 1.62rem);
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
  white-space: normal;
  letter-spacing: 0;
  transition:
    background-color 620ms cubic-bezier(0.16, 0.82, 0.24, 1),
    color 460ms ease,
    filter 420ms ease;
}

.police-speech-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--speech-button-sweep, #ffffff);
  transform: translateX(-105%);
}

.police-speech-button:disabled {
  opacity: 0.55;
}

.police-speech-challenge[data-status="listening"] .police-speech-button::before {
  animation: police-speech-sweep 5s linear both;
}

.police-speech-challenge[data-status="wrong"] .police-speech-button,
.police-speech-challenge[data-status="permission-error"] .police-speech-button,
.police-speech-challenge[data-status="service-error"] .police-speech-button {
  animation: speech-button-wrong 360ms ease both;
}

.police-speech-challenge[data-status="correct"] .police-speech-button {
  background-color: #27C46B;
  color: #ffffff;
}

.speech-challenge.is-color-transitioning .police-speech-button {
  transition-duration: 720ms, 560ms, 520ms;
}

.speech-challenge[data-status="listening"] .speech-challenge-button {
  animation: speech-listening-pulse 900ms ease-in-out infinite;
}

.speech-challenge[data-status="correct"] .speech-challenge-button {
  background: #27C46B;
  color: #ffffff;
}

.speech-challenge[data-status="unsupported"] .speech-challenge-button,
.speech-challenge[data-status="service-error"] .speech-challenge-button {
  grid-template-columns: auto;
}

.speech-challenge[data-status="unsupported"] .speech-mic-icon,
.speech-challenge[data-status="service-error"] .speech-mic-icon {
  display: none;
}

.speech-challenge[data-status="wrong"] .speech-challenge-button,
.speech-challenge[data-status="permission-error"] .speech-challenge-button,
.speech-challenge[data-status="service-error"] .speech-challenge-button {
  animation: speech-button-wrong 360ms ease both;
}

.book-screen[data-speech-challenge="listening"] .word-panel {
  filter: brightness(1.05);
}

.book-screen[data-speech-challenge="listening"] .word-panel .word-line {
  animation: speech-listening-words 980ms ease-in-out infinite;
}

.word-panel.speech-correct {
  animation: speech-word-correct 820ms cubic-bezier(0.16, 0.9, 0.2, 1.18) both;
}

.word-panel.speech-wrong {
  animation: speech-word-wrong 420ms ease both;
}

.book-screen.is-memory-page .word-panel {
  padding-bottom: 12px;
}

.book-screen.is-activity-page .word-panel.game-instruction-row {
  width: min(92vw, 1040px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(var(--instruction-line-count, 1), minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(10px, 2vw, 26px);
  padding: 0 10px 12px;
  pointer-events: none;
}

.book-screen.is-activity-page .word-panel.game-instruction-row[data-line-count="1"] {
  --instruction-line-count: 1;
}

.book-screen.is-activity-page .word-panel.game-instruction-row[data-line-count="2"] {
  --instruction-line-count: 2;
}

.book-screen.is-activity-page .word-panel.game-instruction-row[data-line-count="3"] {
  --instruction-line-count: 3;
}

.book-screen.is-activity-page .word-panel.game-instruction-row .word-line {
  grid-column: var(--line-slot, auto);
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
  text-align: center;
  margin: 0;
}

.book-screen.is-memory-page .word-panel .word-line:first-child,
.book-screen.is-link-page .word-panel .word-line:first-child,
.book-screen.is-find-page .word-panel .word-line:first-child {
  font-size: clamp(1.55rem, 4.8vw, 2.7rem);
  line-height: 1.02;
}

.book-screen.is-memory-page .word-panel .word-line:not(:first-child),
.book-screen.is-link-page .word-panel .word-line:not(:first-child),
.book-screen.is-find-page .word-panel .word-line:not(:first-child) {
  margin-top: 4px;
  font-size: clamp(0.92rem, 2.5vw, 1.55rem);
  line-height: 1.08;
}

.book-screen.is-activity-page .word-panel.game-instruction-row .word-line,
.book-screen.is-activity-page .word-panel.game-instruction-row .word-line:not(:first-child) {
  color: #243243;
  margin: 0;
}

.book-screen.is-activity-page .word-panel.game-instruction-row[data-line-count="1"] .word-line {
  font-size: clamp(2.1rem, 5.8vw, 3.8rem);
  line-height: 1.02;
}

.word-char {
  display: inline-block;
  transform-origin: center 78%;
  transition: color 160ms ease, text-shadow 160ms ease;
}

.word-char.is-speaking-match {
  color: #1b74e8;
  text-shadow: 0 2px 0 color-mix(in srgb, var(--page-panel) 92%, transparent);
}

.book-screen[data-vehicle-tone="fire"] .word-char.is-speaking-match,
.book-screen[data-vehicle-tone="bus"] .word-char.is-speaking-match,
.book-screen[data-vehicle-tone="ambulance"] .word-char.is-speaking-match,
.book-screen[data-vehicle-tone="gameDirectory"] .word-char.is-speaking-match,
.book-screen[data-vehicle-tone="find"] .word-char.is-speaking-match,
.book-screen[data-vehicle-tone="link"] .word-char.is-speaking-match {
  color: #ffb000;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.82),
    0 0 16px rgba(255, 176, 0, 0.38);
}

.word-char.is-speaking-pop {
  animation: speech-char-pop 360ms cubic-bezier(0.18, 0.92, 0.2, 1.22) both;
}

.placeholder-vehicle .vehicle-icon {
  font-size: min(38vw, 15rem);
}

.vehicle-card {
  position: relative;
  width: min(82vw, 760px, 69dvh, 645px);
  height: auto;
  aspect-ratio: 3 / 2;
  min-height: 0;
  border-radius: 34px;
  background: transparent;
  display: grid;
  place-items: center;
  overflow: visible;
  --main: #ffcf4d;
  --deep: #314f64;
  --soft: #fffdf1;
  --accent: #ff6f91;
}

.memory-game-page {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: max(76px, calc(env(safe-area-inset-top) + 66px)) max(62px, calc(env(safe-area-inset-right) + 54px)) max(104px, calc(env(safe-area-inset-bottom) + 88px)) max(62px, calc(env(safe-area-inset-left) + 54px));
  pointer-events: auto;
}

.activity-back-button {
  position: fixed;
  top: auto;
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px));
  left: max(18px, calc(env(safe-area-inset-left) + 14px));
  z-index: 8;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--ui-solid-bg);
  color: var(--ui-solid-fg);
  font-family: "Chiron GoRound TC", system-ui, sans-serif;
  font-size: clamp(0.92rem, 2vw, 1.1rem);
  font-weight: 900;
}

.activity-menu-page {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: max(84px, calc(env(safe-area-inset-top) + 72px)) max(82px, calc(env(safe-area-inset-right) + 70px)) max(118px, calc(env(safe-area-inset-bottom) + 96px)) max(82px, calc(env(safe-area-inset-left) + 70px));
  pointer-events: auto;
}

.activity-menu-card {
  width: min(100%, 920px);
  display: grid;
  gap: clamp(14px, 2.3vw, 22px);
  padding: clamp(16px, 2.8vw, 28px);
  border: 4px solid color-mix(in srgb, var(--page-ink) 68%, transparent);
  border-radius: 28px;
  background: color-mix(in srgb, var(--page-panel) 94%, transparent);
  color: #243243;
}

.activity-menu-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.activity-menu-top .activity-back-button {
  position: static;
  min-height: 40px;
}

.activity-menu-heading {
  display: grid;
  justify-items: center;
  gap: 2px;
  font-family: "Chiron GoRound TC", system-ui, sans-serif;
  font-weight: 900;
  line-height: 1;
}

.activity-menu-heading span {
  font-size: clamp(1.05rem, 2.4vw, 1.38rem);
}

.activity-menu-heading strong {
  font-size: clamp(2rem, 5.4vw, 4rem);
}

.activity-difficulty-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.activity-difficulty-button {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 56px;
  border: 0;
  border-radius: 18px;
  background: color-mix(in srgb, var(--ui-solid-bg) 34%, var(--page-panel));
  color: var(--page-ink);
  font-family: "Chiron GoRound TC", system-ui, sans-serif;
  font-weight: 900;
}

.activity-difficulty-button small {
  font-family: "Lilita One", system-ui, sans-serif;
  font-size: 0.9rem;
}

.activity-difficulty-button.is-active {
  background: var(--ui-solid-bg);
  color: var(--ui-solid-fg);
}

.activity-game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.9vw, 16px);
}

.activity-game-card {
  display: grid;
  grid-template-rows: minmax(92px, 1fr) auto auto;
  justify-items: center;
  gap: 8px;
  min-height: clamp(178px, 25vw, 242px);
  padding: 14px 12px 16px;
  border: 0;
  border-radius: 22px;
  background: var(--ui-solid-bg);
  color: var(--ui-solid-fg);
  box-shadow: none;
  font-family: "Chiron GoRound TC", system-ui, sans-serif;
}

.activity-game-card img {
  align-self: center;
  width: min(72%, 150px);
  max-height: 104px;
  object-fit: contain;
}

.activity-game-title {
  font-size: clamp(1.08rem, 2.5vw, 1.45rem);
  font-weight: 900;
  line-height: 1;
}

.activity-game-text {
  max-width: 14em;
  font-size: clamp(0.76rem, 1.55vw, 0.94rem);
  font-weight: 800;
  line-height: 1.18;
}

.book-screen.is-game-directory-page .activity-menu-page {
  padding: max(70px, calc(env(safe-area-inset-top) + 58px)) max(66px, calc(env(safe-area-inset-right) + 54px)) max(46px, calc(env(safe-area-inset-bottom) + 32px)) max(66px, calc(env(safe-area-inset-left) + 54px));
}

.book-screen.is-game-directory-page .word-panel {
  display: grid;
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
}

.book-screen.is-game-directory-page .activity-menu-card {
  width: min(100%, 1120px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(6px, 1.2dvh, 12px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--page-ink);
}

.book-screen.is-game-directory-page .activity-menu-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-content: center;
  width: min(480px, 52vw);
  margin: clamp(30px, 4.2vw, 50px) auto 0;
  min-width: 0;
}

.book-screen.is-game-directory-page .activity-stars {
  flex: 0 0 auto;
  min-height: clamp(44px, 5.4vw, 60px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 clamp(12px, 1.7vw, 18px);
  border-radius: 999px;
  background: #fffdf1;
  color: #243243;
  font-family: "Lilita One", "Chiron GoRound TC", system-ui, sans-serif;
  font-weight: 900;
  transform: rotate(-2deg);
}

.book-screen.is-game-directory-page .activity-difficulty-group {
  --difficulty-control-padding: clamp(7px, 0.9vw, 10px);
  --difficulty-active-index: 0;
  --difficulty-previous-index: 0;
  --difficulty-move-direction: 1;
  --difficulty-transform-origin: center;
  --menu-layout-x: 0%;
  --menu-layout-y: 0%;
  --menu-layout-scale: 1;
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: var(--difficulty-control-padding);
  border-radius: 999px;
  background: rgba(255, 253, 241, 0.68);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
  backdrop-filter: blur(10px) saturate(1.25);
  overflow: hidden;
  transform: translate(var(--menu-layout-x), var(--menu-layout-y)) scale(var(--menu-layout-scale));
  transform-origin: center;
}

.book-screen.is-game-directory-page .activity-difficulty-group::before {
  content: "";
  position: absolute;
  left: var(--difficulty-control-padding);
  top: var(--difficulty-control-padding);
  bottom: var(--difficulty-control-padding);
  z-index: 0;
  width: calc((100% - var(--difficulty-control-padding) * 2) / 3);
  border-radius: 999px;
  background: rgba(27, 43, 197, 0.82);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
  transform: translateX(calc(var(--difficulty-active-index) * 100%));
  transform-origin: var(--difficulty-transform-origin) center;
  transition: transform 365ms cubic-bezier(0.22, 0.82, 0.28, 1);
  pointer-events: none;
}

.book-screen.is-game-directory-page .activity-difficulty-group.is-bouncing::before {
  transition: none;
  animation: difficulty-indicator-bounce 575ms linear both;
}

.book-screen.is-game-directory-page .activity-difficulty-group.difficulty-active-normal {
  --difficulty-active-index: 1;
}

.book-screen.is-game-directory-page .activity-difficulty-group.difficulty-active-challenge {
  --difficulty-active-index: 2;
}

.book-screen.is-game-directory-page .activity-difficulty-button {
  position: relative;
  z-index: 1;
  min-height: clamp(52px, 5.8vw, 68px);
  display: grid;
  grid-template-rows: auto;
  place-items: center;
  gap: 0;
  padding: 0 clamp(10px, 1.5vw, 18px);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #243243;
  font-family: "Chiron GoRound TC", system-ui, sans-serif;
  font-size: clamp(0.92rem, 1.55vw, 1.08rem);
  font-weight: 900;
  line-height: 1;
  transform-origin: center;
  overflow: visible;
  transition:
    background-color 220ms ease,
    color 180ms ease,
    transform 160ms cubic-bezier(0.18, 0.9, 0.24, 1.18),
    filter 160ms ease;
}

.book-screen.is-game-directory-page .activity-difficulty-button.is-active {
  background: transparent;
  color: var(--ui-solid-fg);
  transform: none;
}

.book-screen.is-game-directory-page .activity-difficulty-button:hover {
  filter: brightness(1.04) saturate(1.04);
  transform: none;
}

.book-screen.is-game-directory-page .activity-difficulty-button:active,
.book-screen.is-game-directory-page .activity-difficulty-button.is-active:active {
  filter: brightness(0.96) saturate(1.06);
  transform: none;
}

.activity-stars-icon {
  display: inline-grid;
  place-items: center;
  width: clamp(24px, 3vw, 34px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: #ffb000;
  color: #fffdf1;
  font-size: clamp(1rem, 1.9vw, 1.36rem);
  line-height: 1;
}

.activity-stars-count {
  min-width: 1.5em;
  font-size: clamp(1.05rem, 2.1vw, 1.42rem);
  line-height: 1;
}

.activity-difficulty-medal {
  display: none;
}

.activity-difficulty-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 0.5vw, 6px);
  min-height: clamp(38px, 4.4vw, 52px);
  white-space: nowrap;
  font-size: inherit;
  overflow: visible;
}

.activity-fat-star {
  display: block;
  width: clamp(24px, 3vw, 38px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  pointer-events: none;
  overflow: visible;
  filter: none;
}

.book-screen.is-game-directory-page .activity-difficulty-button.is-active .activity-fat-star {
  filter: none;
}

.activity-difficulty-stars {
  display: none;
}

.activity-difficulty-stars i {
  display: inline-grid;
  place-items: center;
  width: clamp(14px, 1.8vw, 21px);
  aspect-ratio: 1;
  color: rgba(36, 50, 67, 0.22);
  font-family: "Lilita One", "Chiron GoRound TC", system-ui, sans-serif;
  font-size: clamp(0.86rem, 1.5vw, 1.1rem);
  font-style: normal;
  line-height: 1;
}

.activity-difficulty-stars i.is-filled {
  color: #ffb000;
}

.book-screen.is-game-directory-page .activity-difficulty-button.is-active .activity-difficulty-stars {
  background: rgba(255, 255, 255, 0.2);
}

.book-screen.is-game-directory-page .activity-difficulty-button.is-active .activity-difficulty-medal {
  background: #ffd600;
  color: #1b2bc5;
}

.book-screen.is-game-directory-page .activity-difficulty-button.is-active .activity-difficulty-stars i {
  color: rgba(255, 255, 255, 0.38);
}

.book-screen.is-game-directory-page .activity-difficulty-button.is-active .activity-difficulty-stars i.is-filled {
  color: #ffd600;
}

.book-screen.is-game-directory-page .activity-menu-heading {
  transform: translateY(2px);
}

.book-screen.is-game-directory-page .activity-menu-heading span {
  font-size: clamp(0.78rem, 1.5vw, 1rem);
}

.book-screen.is-game-directory-page .activity-menu-heading strong {
  font-size: clamp(1.28rem, 3.4vw, 2.4rem);
}

.game-book-menu {
  position: relative;
  --toc-book-extra-scale: 1;
  align-self: center;
  justify-self: center;
  width: min(100%, 1060px, calc((100dvh - 158px) * 1.34));
  aspect-ratio: 1447 / 1087;
  min-height: 0;
  margin: 0 auto;
  display: grid;
  place-items: center;
  transform:
    translate(var(--toc-layout-x, 0), var(--toc-layout-y, 0))
    scale(var(--toc-layout-scale, 1))
    scale(var(--toc-book-extra-scale))
    rotate(var(--toc-layout-rotate, 0deg));
  transform-origin: center;
  transition: transform 180ms ease;
}

.game-book-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.2);
  transform-origin: center;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 18px 26px rgba(32, 45, 58, 0.16));
}

.book-screen.is-game-directory-page .activity-game-grid {
  position: absolute;
  inset: 0;
  display: block;
}

.book-screen.is-game-directory-page .activity-game-card {
  position: absolute;
  z-index: 2;
  --menu-layout-x: 0px;
  --menu-layout-y: 0px;
  --menu-layout-scale: 1;
  --activity-card-rotate: 0deg;
  --activity-card-press-y: 0px;
  --activity-card-press-scale: 1;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: clamp(124px, 17%, 204px);
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #243243;
  font-family: "Chiron GoRound TC", system-ui, sans-serif;
  text-align: center;
  transform:
    translate(-50%, -50%)
    translate(var(--menu-layout-x), var(--menu-layout-y))
    scale(var(--menu-layout-scale))
    translateY(var(--activity-card-press-y))
    scale(var(--activity-card-press-scale))
    rotate(var(--activity-card-rotate));
  transform-origin: center;
  transition: transform 160ms ease, filter 160ms ease;
}

.book-screen.is-game-directory-page .activity-game-card-find {
  left: 22%;
  top: 22%;
  --activity-icon-motion: activity-icon-bob;
  --activity-icon-duration: 9.6s;
  --activity-icon-delay: -1.1s;
  --activity-card-rotate: -6deg;
}

.book-screen.is-game-directory-page .activity-game-card-sound {
  left: 48%;
  top: 23%;
  --activity-icon-motion: activity-icon-sway;
  --activity-icon-duration: 11.2s;
  --activity-icon-delay: -3.4s;
  --activity-card-rotate: 3deg;
}

.book-screen.is-game-directory-page .activity-game-card-memory {
  left: 25%;
  top: 58%;
  --activity-icon-motion: activity-icon-float-soft;
  --activity-icon-duration: 12.8s;
  --activity-icon-delay: -5.8s;
  --activity-card-rotate: 4deg;
}

.book-screen.is-game-directory-page .activity-game-card-pull {
  left: 48%;
  top: 45%;
  --activity-icon-motion: activity-icon-tug;
  --activity-icon-duration: 10.4s;
  --activity-icon-delay: -2.2s;
  --activity-card-rotate: -2deg;
}

.book-screen.is-game-directory-page .activity-game-card-link {
  left: 74%;
  top: 42%;
  --activity-icon-motion: activity-icon-sway-reverse;
  --activity-icon-duration: 13.6s;
  --activity-icon-delay: -7.1s;
  --activity-card-rotate: 5deg;
}

.book-screen.is-game-directory-page .activity-game-card-shadow {
  left: 58%;
  top: 67%;
  --activity-icon-motion: activity-icon-drift;
  --activity-icon-duration: 12s;
  --activity-icon-delay: -4.6s;
  --activity-card-rotate: -4deg;
}

.book-screen.is-game-directory-page .activity-game-card-parking {
  left: 76%;
  top: 68%;
  --activity-icon-motion: activity-icon-bob;
  --activity-icon-duration: 10.8s;
  --activity-icon-delay: -6.3s;
  --activity-card-rotate: 2deg;
}

.book-screen.is-game-directory-page .activity-game-card:hover {
  filter: brightness(1.03) saturate(1.04);
}

.book-screen.is-game-directory-page .activity-game-card:active {
  --activity-card-press-y: 4px;
  --activity-card-press-scale: 0.985;
}

.book-screen.is-game-directory-page .activity-game-card img {
  --toc-sticker-edge: clamp(2px, 0.130208vw, 5px);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transform-origin: 50% 70%;
  animation-name: var(--activity-icon-motion, activity-icon-float-soft);
  animation-duration: var(--activity-icon-duration, 12s);
  animation-delay: var(--activity-icon-delay, 0s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  filter:
    drop-shadow(var(--toc-sticker-edge) 0 0 #fffefa)
    drop-shadow(calc(var(--toc-sticker-edge) * -1) 0 0 #fffefa)
    drop-shadow(0 var(--toc-sticker-edge) 0 #fffefa)
    drop-shadow(0 calc(var(--toc-sticker-edge) * -1) 0 #fffefa)
    drop-shadow(0 9px 10px rgba(70, 45, 18, 0.2));
}

.activity-game-ribbon {
  display: grid;
  gap: 2px;
  justify-items: center;
  width: max-content;
  max-width: min(18em, 100%);
  padding: 6px 12px 7px;
  border: 2px dashed rgba(91, 67, 33, 0.32);
  border-radius: 8px;
  background: rgba(255, 253, 241, 0.94);
  box-shadow: 0 2px 0 rgba(91, 67, 33, 0.1);
}

.book-screen.is-game-directory-page .activity-game-title {
  font-size: clamp(0.96rem, 1.9vw, 1.26rem);
  line-height: 1;
}

.book-screen.is-game-directory-page .activity-game-text {
  display: block;
  max-width: 13em;
  font-size: clamp(0.66rem, 1.15vw, 0.8rem);
  line-height: 1.15;
}

@media (max-width: 760px) {
  .book-screen.is-game-directory-page .activity-menu-page {
    padding: max(62px, calc(env(safe-area-inset-top) + 54px)) max(12px, env(safe-area-inset-right)) max(96px, calc(env(safe-area-inset-bottom) + 82px)) max(12px, env(safe-area-inset-left));
  }

  .book-screen.is-game-directory-page .activity-menu-card {
    gap: 6px;
  }

  .book-screen.is-game-directory-page .activity-menu-controls {
    flex-wrap: wrap;
    gap: 6px;
  }

  .book-screen.is-game-directory-page .activity-difficulty-group {
    width: min(100%, 340px);
  }

  .game-book-menu {
    width: min(100%, calc((100dvh - 188px) * 1.34));
  }

  .book-screen.is-game-directory-page .activity-game-card {
    width: clamp(104px, 29%, 132px);
  }

  .book-screen.is-game-directory-page .activity-game-card img {
    max-height: clamp(66px, 11dvh, 104px);
  }

  .activity-game-ribbon {
    padding: 5px 8px 6px;
  }

  .book-screen.is-game-directory-page .activity-game-title {
    font-size: clamp(0.78rem, 3.4vw, 1rem);
  }

  .book-screen.is-game-directory-page .activity-game-text {
    font-size: clamp(0.54rem, 2.15vw, 0.68rem);
    line-height: 1.08;
  }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 940px) {
  .book-screen.is-game-directory-page .activity-menu-page {
    padding: max(52px, calc(env(safe-area-inset-top) + 44px)) max(70px, calc(env(safe-area-inset-right) + 62px)) max(10px, env(safe-area-inset-bottom)) max(70px, calc(env(safe-area-inset-left) + 62px));
  }

  .book-screen.is-game-directory-page .activity-menu-heading {
    display: none;
  }

  .game-book-menu {
    width: min(100%, 740px, calc((100dvh - 102px) * 1.34));
  }

  .book-screen.is-game-directory-page .activity-game-card {
    width: clamp(96px, 18%, 140px);
  }

  .book-screen.is-game-directory-page .activity-game-card img {
    max-height: clamp(58px, 18dvh, 96px);
  }

  .book-screen.is-game-directory-page .activity-game-text {
    display: none;
  }
}

.memory-game-host {
  position: relative;
  width: min(100%, 1360px);
  height: min(80dvh, 820px);
  min-height: 330px;
}

.memory-progress {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  z-index: 9;
  display: none !important;
  align-items: center;
  gap: 0;
  pointer-events: none;
  transform: none;
  --memory-progress-bg: var(--ui-solid-bg);
  --memory-progress-fg: var(--ui-solid-fg);
  --memory-progress-radius: 5px;
  --memory-progress-gap: clamp(3px, 0.48vw, 5px);
  --memory-level-size: clamp(32px, 4.9vw, 53px);
}

.memory-progress.is-hidden {
  display: none;
}

.memory-progress-track {
  display: grid;
  grid-template-columns: repeat(5, clamp(14px, 2.5vw, 30px));
  gap: var(--memory-progress-gap);
  padding: var(--memory-progress-gap);
  padding-right: calc((var(--memory-level-size) * 0.42) + var(--memory-progress-gap));
  border-radius: var(--memory-progress-radius) 0 0 var(--memory-progress-radius);
  background: var(--memory-progress-bg);
  box-shadow: none;
  margin-right: calc(var(--memory-level-size) * -0.42);
}

.memory-progress-track span {
  height: clamp(11px, 1.8vw, 20px);
  border-radius: var(--memory-progress-radius);
  background: #d7e0e5;
  box-shadow: none;
  transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.memory-progress-track span.is-lit {
  background: #ffd600;
  box-shadow: none;
  transform: translateY(-2px);
}

.memory-level-star {
  position: relative;
  z-index: 1;
  width: var(--memory-level-size);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--memory-progress-bg);
  color: var(--memory-progress-fg);
  font-family: "Lilita One", "Chiron GoRound TC", system-ui, sans-serif;
  font-size: clamp(0.95rem, 2.5vw, 1.85rem);
  font-weight: 900;
  line-height: 1;
  box-shadow: none;
}

.memory-game-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: manipulation;
}

.memory-game-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.memory-game-error {
  border-radius: 999px;
  background: #fff7df;
  color: #243243;
  font-weight: 950;
  box-shadow: inset 0 0 0 2px rgba(95, 67, 34, 0.12);
}

.memory-game-error {
  display: inline-grid;
  place-items: center;
  min-height: 72px;
  padding: 18px 24px;
}

.link-game-page {
  position: fixed;
  inset: 0;
  z-index: 2;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: max(82px, calc(env(safe-area-inset-top) + 72px)) max(112px, calc(env(safe-area-inset-right) + 104px)) max(124px, calc(env(safe-area-inset-bottom) + 106px)) max(112px, calc(env(safe-area-inset-left) + 104px));
  pointer-events: auto;
}

.link-game-host {
  position: relative;
  width: min(100%, 1040px);
  height: min(72dvh, 720px);
  min-height: 330px;
}

.link-game-board {
  position: absolute;
  inset: 0;
  overflow: visible;
  touch-action: none;
}

.link-line-layer,
.link-card-layer {
  position: absolute;
  inset: 0;
}

.link-line-layer {
  z-index: 12;
  pointer-events: none;
}

.link-card-layer {
  z-index: 3;
}

.link-yarn-line {
  position: absolute;
  display: block;
  height: clamp(13px, 1.8vw, 21px);
  min-width: 1px;
  border-radius: 999px;
  background-image: url("./assets/yarn-line.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
  border: 0;
  transform-origin: left center;
  filter: none;
  opacity: 1;
}

.link-yarn-line.is-active {
  animation: link-yarn-flow 560ms linear infinite;
}

.link-yarn-line.is-finalized {
  animation: none;
}

.link-yarn-line.is-correct {
  animation: link-yarn-correct 560ms ease-out both;
}

.link-yarn-line.is-wrong {
  animation: link-yarn-wrong 360ms ease-in both;
}

.link-card {
  position: absolute;
  left: var(--card-x);
  top: var(--card-y);
  width: var(--card-w);
  aspect-ratio: 768 / 512;
  border: 0;
  padding: 0;
  background: transparent;
  touch-action: none;
  opacity: 0;
  transform: rotate(var(--card-rot));
  transform-origin: center;
  transform-style: preserve-3d;
  perspective: 900px;
  transition: opacity 260ms ease, transform 260ms cubic-bezier(0.18, 0.88, 0.22, 1.18);
}

.link-card.is-dealt {
  opacity: 1;
  animation: link-card-deal-in 360ms cubic-bezier(0.18, 0.9, 0.22, 1.08) both;
}

.link-card-surface {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: #fff7df;
  box-shadow:
    inset 0 0 0 2px rgba(95, 67, 34, 0.14),
    0 8px 0 rgba(64, 45, 22, 0.1);
  overflow: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 520ms cubic-bezier(0.18, 0.78, 0.24, 1), opacity 220ms ease;
}

.link-card-surface::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 18px;
  border: 2px dashed rgba(95, 67, 34, 0.16);
  pointer-events: none;
}

.link-card-shared-face {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

.link-card-shared-face::after {
  display: none;
}

.link-card-back {
  border-radius: 22px;
  overflow: hidden;
  transform: rotateY(0deg);
}

.link-card-back::after {
  display: block;
}

.link-card-front {
  transform: rotateY(180deg);
}

.link-card.is-revealed .link-card-back {
  transform: rotateY(-180deg);
}

.link-card.is-revealed .link-card-front {
  transform: rotateY(0deg);
}

.link-card-face {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.link-card-image img,
.link-card-surface > img {
  display: block;
  width: 86%;
  height: 78%;
  object-fit: contain;
}

.link-card-shared-face > .link-card-face {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.link-card-name {
  position: relative;
  z-index: 1;
  max-width: 86%;
  color: #243243;
  text-align: center;
  line-height: 0.95;
  white-space: nowrap;
}

.link-card-name-zh {
  font-family: "Chiron GoRound TC", system-ui, sans-serif;
  font-size: clamp(1.55rem, 4.1vw, 3.2rem);
  font-weight: 900;
}

.link-card-name-en,
.link-card-name-ja {
  font-family: "Darumadrop One", system-ui, sans-serif;
  font-size: clamp(1.6rem, 4vw, 3.15rem);
  font-weight: 400;
}

.link-card.is-link-source {
  z-index: 8;
  transform: rotate(var(--card-rot)) scale(1.04);
}

.link-card.is-link-target {
  z-index: 9;
  animation: link-card-target-wiggle 520ms ease-in-out infinite;
}

.link-card.is-correct {
  z-index: 11;
  animation: link-card-correct 720ms cubic-bezier(0.18, 0.9, 0.2, 1.18) both;
}

.link-card.is-wrong {
  animation: link-card-wrong 360ms ease both;
}

.link-card.is-matched {
  pointer-events: none;
  opacity: 0;
  transform: rotate(var(--card-rot)) scale(0.66);
}

.link-card-burst {
  position: absolute;
  inset: -44%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
}

.link-card.is-correct .link-card-burst {
  opacity: 1;
}

.link-card-burst::before,
.link-card-burst::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 86%;
  aspect-ratio: 1;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}

.link-card-burst::before {
  background: radial-gradient(circle, rgba(255, 235, 129, 0.62) 0 26%, rgba(255, 235, 129, 0) 68%);
}

.link-card-burst::after {
  border: clamp(7px, 1.1vw, 12px) solid rgba(255, 255, 255, 0.86);
}

.link-card.is-correct .link-card-burst::before {
  animation: link-card-success-glow 720ms ease-out both;
}

.link-card.is-correct .link-card-burst::after {
  animation: link-card-success-ring 720ms ease-out both;
}

.link-card-burst i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(20px, 3.6vw, 44px);
  aspect-ratio: 1;
  background: #ffd600;
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
  transform: translate(-50%, -50%) scale(0);
}

.link-card.is-correct .link-card-burst i {
  animation: link-card-spark 760ms ease-out both;
}

.link-card-burst i:nth-child(1) { --spark-x: -96%; --spark-y: -81%; background: #fff7df; }
.link-card-burst i:nth-child(2) { --spark-x: 99%; --spark-y: -73%; background: #ffd600; animation-delay: 40ms; }
.link-card-burst i:nth-child(3) { --spark-x: -101%; --spark-y: 75%; background: #8ad7ff; animation-delay: 80ms; }
.link-card-burst i:nth-child(4) { --spark-x: 96%; --spark-y: 86%; background: #ffb000; animation-delay: 120ms; }
.link-card-burst i:nth-child(5) { --spark-x: 0%; --spark-y: -109%; background: #ff5da2; animation-delay: 70ms; }
.link-card-burst i:nth-child(6) { --spark-x: 0%; --spark-y: 112%; background: #a8e6cf; animation-delay: 110ms; }

.find-game-page {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: max(82px, calc(env(safe-area-inset-top) + 72px)) max(112px, calc(env(safe-area-inset-right) + 104px)) max(124px, calc(env(safe-area-inset-bottom) + 106px)) max(112px, calc(env(safe-area-inset-left) + 104px));
  pointer-events: auto;
}

.find-game-card {
  width: min(100%, 1040px);
  display: grid;
  gap: clamp(14px, 2.4vw, 24px);
  justify-items: center;
}

.find-game-prompt {
  max-width: min(92vw, 760px);
  border-radius: 999px;
  background: #fff7df;
  color: #243243;
  padding: clamp(10px, 1.8vw, 18px) clamp(22px, 4vw, 42px);
  font-family: "Chiron GoRound TC", system-ui, sans-serif;
  font-size: clamp(1.6rem, 4.2vw, 3.4rem);
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
  box-shadow: inset 0 0 0 2px rgba(95, 67, 34, 0.12);
  white-space: nowrap;
}

.find-game-options {
  width: min(100%, 980px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2.4vw, 22px);
}

.find-option {
  position: relative;
  min-height: clamp(128px, 23dvh, 230px);
  border-radius: 28px;
  background: #fff7df;
  display: grid;
  place-items: center;
  padding: clamp(8px, 1.5vw, 14px);
  box-shadow: inset 0 0 0 2px rgba(95, 67, 34, 0.12), 0 10px 0 rgba(64, 45, 22, 0.08);
  transform-origin: center;
  overflow: visible;
}

.find-option-image-wrap {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.find-option-image-wrap > img,
.find-option-visual {
  display: block;
  width: min(100%, 644px);
  max-height: clamp(171px, 30.8dvh, 336px);
  object-fit: contain;
}

.find-option.is-correct {
  animation: find-correct-pop 620ms cubic-bezier(0.16, 0.9, 0.2, 1.18) both;
  box-shadow: inset 0 0 0 5px rgba(255, 214, 0, 0.8), 0 10px 0 rgba(64, 45, 22, 0.08);
}

.find-option.is-wrong {
  animation: find-wrong-shake 360ms ease both;
}

.find-option-feedback {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.55) rotate(-8deg);
}

.find-option-feedback img {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(88px, 13.5vw, 164px);
  height: auto;
  max-width: 48%;
  filter: drop-shadow(0 8px 0 rgba(64, 45, 22, 0.12));
}

.find-option-confetti {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: clamp(180px, 27vw, 330px);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.find-option-confetti::before,
.find-option-confetti::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 86%;
  aspect-ratio: 1;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}

.find-option-confetti::before {
  background: radial-gradient(circle, rgba(255, 235, 129, 0.62) 0 26%, rgba(255, 235, 129, 0) 68%);
}

.find-option-confetti::after {
  border: clamp(7px, 1.1vw, 12px) solid rgba(255, 255, 255, 0.86);
}

.find-option-feedback.is-correct.is-active .find-option-confetti::before {
  animation: link-card-success-glow 720ms ease-out both;
}

.find-option-feedback.is-correct.is-active .find-option-confetti::after {
  animation: link-card-success-ring 720ms ease-out both;
}

.find-option-confetti i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(20px, 3.6vw, 44px);
  aspect-ratio: 1;
  background: #ffd600;
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

.find-option-feedback.is-correct.is-active .find-option-confetti i {
  animation: link-card-spark 760ms ease-out both;
}

.find-option-confetti i:nth-child(1) { --spark-x: -96%; --spark-y: -81%; background: #fff7df; }
.find-option-confetti i:nth-child(2) { --spark-x: 99%; --spark-y: -73%; background: #ffd600; animation-delay: 40ms; }
.find-option-confetti i:nth-child(3) { --spark-x: -101%; --spark-y: 75%; background: #8ad7ff; animation-delay: 80ms; }
.find-option-confetti i:nth-child(4) { --spark-x: 96%; --spark-y: 86%; background: #ffb000; animation-delay: 120ms; }
.find-option-confetti i:nth-child(5) { --spark-x: 0%; --spark-y: -109%; background: #ff5da2; animation-delay: 70ms; }
.find-option-confetti i:nth-child(6) { --spark-x: 0%; --spark-y: 112%; background: #a8e6cf; animation-delay: 110ms; }

.find-option-feedback.is-correct.is-active {
  animation: find-feedback-correct 920ms cubic-bezier(0.18, 0.9, 0.2, 1.18) both;
}

.find-option-feedback.is-wrong.is-active {
  animation: find-feedback-wrong 720ms cubic-bezier(0.18, 0.9, 0.2, 1.12) both;
}

.find-game-result {
  min-height: 1.25em;
  color: #243243;
  font-family: "Chiron GoRound TC", system-ui, sans-serif;
  font-size: clamp(1.18rem, 2.9vw, 2.2rem);
  font-weight: 900;
  line-height: 1.1;
}

.find-game-result.is-correct {
  color: #145c38;
}

.find-game-result.is-wrong {
  color: #8a2f2f;
}

.sound-game-card,
.shadow-game-card {
  width: min(100%, 1040px);
}

.sound-replay-button {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(118px, 18vw, 188px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 999px;
  background: #fff7df;
  box-shadow: none;
  transform-origin: center;
  transition: transform 160ms ease, filter 160ms ease;
}

.sound-replay-button:active {
  transform: translateY(4px) scale(0.98);
}

.sound-replay-button.is-playing {
  animation: sound-button-pulse 780ms ease-in-out infinite;
}

.sound-replay-button img {
  width: 76%;
  height: 76%;
  object-fit: contain;
  filter: none;
}

.sound-countdown {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  place-items: center;
  border-radius: inherit;
  background: rgba(255, 247, 223, 0.72);
  color: #243243;
  font-family: "Chiron GoRound TC", system-ui, sans-serif;
  font-size: clamp(3rem, 7vw, 5.6rem);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.sound-replay-button.is-counting-down .sound-countdown {
  display: grid;
}

.sound-replay-button.is-counting-down img {
  opacity: 0.28;
}

.shadow-prompt {
  width: min(86vw, 600px);
  min-height: clamp(178px, 28dvh, 300px);
  display: grid;
  place-items: center;
  border-radius: 34px;
  background: #fff7df;
  box-shadow: inset 0 0 0 3px rgba(95, 67, 34, 0.12), 0 10px 0 rgba(64, 45, 22, 0.08);
  overflow: visible;
}

.shadow-prompt-frame {
  width: 96%;
  height: 96%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.shadow-prompt-image {
  display: block;
  width: min(100%, 532px);
  max-height: clamp(168px, 29.4dvh, 308px);
  object-fit: contain;
  filter: brightness(0) saturate(0) opacity(0.82);
}

.shadow-difficulty-normal .shadow-prompt-image {
  transform: scaleX(var(--shadow-flip-x, 1)) scaleY(var(--shadow-flip-y, 1)) scale(1.2);
}

.shadow-difficulty-challenge .shadow-prompt-frame {
  width: min(68%, 320px);
  aspect-ratio: 1.35;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.36);
}

.shadow-difficulty-challenge .shadow-prompt-image {
  width: 138%;
  max-height: none;
  transform: translate(var(--shadow-detail-x, 0), var(--shadow-detail-y, 0)) scale(1.72) rotate(4deg);
}

.parking-game-page {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: max(72px, calc(env(safe-area-inset-top) + 62px)) max(90px, calc(env(safe-area-inset-right) + 78px)) max(112px, calc(env(safe-area-inset-bottom) + 92px)) max(90px, calc(env(safe-area-inset-left) + 78px));
  pointer-events: auto;
}

.parking-game-card {
  position: relative;
  width: min(100%, 1040px);
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(10px, 2.1dvh, 20px);
  justify-items: center;
  min-height: 0;
}

.parking-game-prompt,
.parking-game-result {
  max-width: min(92vw, 760px);
  border-radius: 999px;
  background: #fff7df;
  color: #243243;
  padding: clamp(9px, 1.6vw, 17px) clamp(22px, 4vw, 42px);
  font-family: "Chiron GoRound TC", system-ui, sans-serif;
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
}

.parking-game-prompt {
  font-size: clamp(1.48rem, 3.8vw, 3.15rem);
}

.parking-game-result {
  --layout-x: 0%;
  --layout-y: 0%;
  --layout-scale: 1;
  position: fixed;
  left: 50%;
  bottom: max(104px, calc(var(--app-safe-bottom) + 74px));
  z-index: 6;
  transform: translate(calc(-50% + var(--layout-x)), var(--layout-y)) scale(var(--layout-scale));
  transform-origin: center;
  min-height: 1.35em;
  font-size: clamp(1.12rem, 2.7vw, 2rem);
}

.parking-game-result.is-correct {
  color: #145c38;
}

.parking-game-result.is-wrong {
  color: #8a2f2f;
}

.parking-match-board {
  position: relative;
  width: min(100%, 1040px);
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(160px, 1fr) minmax(118px, 0.72fr);
  gap: clamp(10px, 2dvh, 18px);
  align-items: stretch;
}

.parking-target-pad {
  --layout-x: 0%;
  --layout-y: 0%;
  --layout-scale: 1;
  order: 2;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: clamp(104px, 22dvh, 220px);
  display: grid;
  place-items: center;
  min-height: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
  transform: translate(var(--layout-x), var(--layout-y)) scale(var(--layout-scale));
  transform-origin: center bottom;
}

.parking-target-visual {
  --parking-drag-x: 0px;
  --parking-drag-y: 0px;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(64%, 280px);
  aspect-ratio: 1.45;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  transform-origin: center bottom;
  transform: translate(var(--parking-drag-x), var(--parking-drag-y)) scale(1);
  transition: transform 180ms cubic-bezier(0.2, 0.82, 0.24, 1.18);
}

.parking-target-visual.is-selected:not(.is-dragging) {
  transform: translate(var(--parking-drag-x), var(--parking-drag-y)) translateY(-10%) scale(1.06);
}

.parking-target-visual.is-dragging {
  cursor: grabbing;
  transition: none;
  transform: translate(var(--parking-drag-x), var(--parking-drag-y)) scale(1.08);
}

.parking-target-visual.is-entering {
  animation: parking-vehicle-enter-brake 760ms cubic-bezier(0.18, 0.88, 0.22, 1.08) both;
}

.parking-target-visual.is-attention {
  animation: parking-vehicle-attention 360ms ease both;
}

.parking-target-visual.is-parked {
  animation: parking-vehicle-parked 620ms cubic-bezier(0.18, 0.9, 0.2, 1.16) both;
}

.parking-target-visual.is-exiting {
  pointer-events: none;
  animation: parking-vehicle-exit-left 780ms cubic-bezier(0.24, 0.78, 0.2, 1) both;
}

.parking-target-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.parking-garage-grid {
  --layout-x: 0%;
  --layout-y: 0%;
  --layout-scale: 1;
  --parking-slot-width: clamp(220px, 28vw, 420px);
  --parking-garage-gap: clamp(9px, 1.8vw, 16px);
  --parking-garage-top: calc(var(--game-top-space, max(78px, calc(var(--app-safe-top) + 72px))) + clamp(8px, 1.2dvh, 16px));
  --parking-vehicle-reserve: clamp(170px, 50dvh, 600px);
  --parking-garage-available-height: max(118px, calc((100dvh - var(--parking-garage-top) - var(--parking-vehicle-reserve)) / var(--layout-scale)));
  --parking-garage-safe-width: min(calc(100vw - var(--game-left-space, 0px) - var(--game-right-space, 0px)), 1040px);
  order: 1;
  position: fixed;
  left: 50%;
  right: auto;
  top: var(--parking-garage-top);
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--parking-slot-columns, 3), minmax(0, 1fr));
  justify-content: center;
  gap: var(--parking-garage-gap);
  width: min(var(--parking-garage-safe-width), calc((var(--parking-garage-available-height) / 3 * 2 * 3) + (var(--parking-garage-gap) * 2)));
  padding: 0;
  box-sizing: border-box;
  min-height: 0;
  transform: translate(calc(-50% + var(--layout-x)), max(0px, var(--layout-y))) scale(var(--layout-scale));
  transform-origin: top center;
}

.parking-garage-grid[data-slot-count="2"] {
  width: min(var(--parking-garage-safe-width), calc((var(--parking-garage-available-height) / 3 * 2 * 2) + var(--parking-garage-gap)));
}

.parking-garage-grid[data-slot-count="3"] {
  --parking-slot-width: clamp(220px, 28vw, 420px);
  width: min(var(--parking-garage-safe-width), calc((var(--parking-garage-available-height) / 3 * 2 * 3) + (var(--parking-garage-gap) * 2)));
}

.parking-garage-grid[data-slot-count="4"] {
  --parking-slot-width: clamp(180px, 21vw, 340px);
  width: min(var(--parking-garage-safe-width), calc((var(--parking-garage-available-height) / 3 * 2 * 4) + (var(--parking-garage-gap) * 3)));
}

.parking-slot {
  --parking-garage-image-scale: var(--parking-garage-control-scale, 1);
  --parking-garage-image-position-x: var(--parking-garage-control-position-x, 50%);
  --parking-garage-image-position-y: var(--parking-garage-control-position-y, 50%);
  --parking-garage-image-offset-x: var(--parking-garage-control-offset-x, 0%);
  --parking-garage-image-offset-y: var(--parking-garage-control-offset-y, 0%);
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  min-height: clamp(150px, 31dvh, 276px);
  display: grid;
  place-items: center;
  gap: clamp(7px, 1.2dvh, 12px);
  padding: 0;
  border: 0;
  outline: 0;
  border-radius: 24px;
  background: #fff7df;
  color: #243243;
  font-family: "Chiron GoRound TC", system-ui, sans-serif;
  font-weight: 900;
  overflow: hidden;
  pointer-events: auto;
  touch-action: manipulation;
}

.parking-garage-grid .parking-slot {
  min-height: 0;
}

.parking-slot.is-correct {
  z-index: 11;
  animation: parking-slot-pop 620ms cubic-bezier(0.16, 0.9, 0.2, 1.18) both;
  background: #d9ffd8;
}

.parking-slot-burst {
  inset: -44%;
  z-index: 4;
}

.parking-slot.is-correct .parking-slot-burst {
  opacity: 1;
}

.parking-slot.is-correct .parking-slot-burst::before {
  animation: link-card-success-glow 720ms ease-out both;
}

.parking-slot.is-correct .parking-slot-burst::after {
  animation: link-card-success-ring 720ms ease-out both;
}

.parking-slot.is-correct .parking-slot-burst i {
  animation: link-card-spark 760ms ease-out both;
}

.parking-slot.is-wrong {
  animation: parking-wrong-shake 360ms ease both;
  background: #ffe1d7;
}

.parking-slot-easy {
  grid-template-rows: 1fr;
}

.parking-slot-marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.parking-slot-marker img {
  display: block;
  width: min(86%, 220px);
  max-height: clamp(70px, 13dvh, 124px);
  object-fit: contain;
  pointer-events: none;
}

.parking-slot-easy .parking-slot-marker {
  align-self: stretch;
  width: 100%;
  height: 100%;
}

.parking-slot-easy .parking-slot-marker img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

.parking-slot-easy .parking-slot-marker .parking-garage-image {
  width: calc(var(--parking-garage-image-scale) * 100%);
  height: calc(var(--parking-garage-image-scale) * 100%);
  object-fit: cover;
}

.parking-garage-marker {
  border-radius: inherit;
  overflow: hidden;
}

.parking-slot-marker .parking-garage-image {
  display: block;
  position: absolute;
  left: var(--parking-garage-image-offset-x);
  top: var(--parking-garage-image-offset-y);
  width: calc(var(--parking-garage-image-scale) * 100%);
  height: calc(var(--parking-garage-image-scale) * 100%);
  max-height: none;
  object-fit: cover;
  object-position: var(--parking-garage-image-position-x) var(--parking-garage-image-position-y);
  border-radius: inherit;
  pointer-events: none;
}

.parking-slot-shadow {
  filter: brightness(0) saturate(0) opacity(0.76);
}

.parking-slot-name {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0 clamp(7px, 1vw, 14px);
  font-size: calc(clamp(1.08rem, 2.5vw, 1.86rem) * var(--parking-name-scale, 1));
  line-height: 1.08;
  text-align: center;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  letter-spacing: 0;
}

@media (orientation: portrait) and (max-width: 560px) {
  .book-screen.is-parking-page .parking-match-board {
    grid-template-rows: minmax(250px, 1fr) minmax(104px, 0.58fr);
  }

  .book-screen.is-parking-page .parking-garage-grid {
    --parking-slot-width: min(42vw, 180px);
    --parking-vehicle-reserve: clamp(350px, 47dvh, 430px);
    grid-template-columns: repeat(2, minmax(0, var(--parking-slot-width)));
  }

  .book-screen.is-parking-page .parking-garage-grid[data-slot-count="3"],
  .book-screen.is-parking-page .parking-garage-grid[data-slot-count="4"] {
    width: min(var(--parking-garage-safe-width), calc((((var(--parking-garage-available-height) - var(--parking-garage-gap)) / 2) / 3 * 2 * 2) + var(--parking-garage-gap)));
  }

  .book-screen.is-parking-page .parking-slot {
    min-height: clamp(112px, 16dvh, 150px);
  }

  .book-screen.is-parking-page .parking-target-visual {
    width: min(70%, 230px);
  }
}

.pull-game-page {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: max(72px, calc(env(safe-area-inset-top) + 62px)) max(90px, calc(env(safe-area-inset-right) + 78px)) max(112px, calc(env(safe-area-inset-bottom) + 92px)) max(90px, calc(env(safe-area-inset-left) + 78px));
  pointer-events: auto;
}

.pull-game-card {
  --pull-power: 0%;
  --pull-tension: 0;
  --pull-resistance: 0;
  --pull-resistance-duration: 90ms;
  --pull-shake-left: 0px;
  --pull-shake-right: 0px;
  --pull-shake-mid-left: 0px;
  --pull-shake-mid-right: 0px;
  --pull-shake-up: 0px;
  --pull-shake-down: 0px;
  --pull-shake-rot-left: 0deg;
  --pull-shake-rot-right: 0deg;
  --pull-shake-rot-small: 0deg;
  --pull-target-color: #ffd600;
  --pull-perfect-color: #ff3b30;
  --pull-meter-color: #0057d9;
  --pull-bg-position-x: center;
  --pull-bg-position-y: 62%;
  --pull-road-zone-top: 52%;
  --pull-road-zone-bottom: 18%;
  --pull-vehicle-bottom: 26%;
  --pull-flag-bottom: 18%;
  width: min(100%, 1180px);
  display: grid;
  grid-template-rows: auto minmax(190px, 1fr) auto;
  gap: clamp(14px, 2.6dvh, 24px);
  align-items: center;
  justify-items: stretch;
}

.pull-power-panel {
  width: min(100%, 760px);
  justify-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0;
}

.pull-power-track {
  position: relative;
  height: clamp(22px, 4.2dvh, 38px);
  border-radius: 999px;
  background: #fff7df;
  box-shadow: inset 0 0 0 3px #fff7df;
  overflow: hidden;
}

.pull-power-fill,
.pull-power-ideal,
.pull-power-perfect {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.pull-power-fill {
  z-index: 4;
  width: var(--pull-power);
  background: var(--pull-meter-color);
  transition: width var(--pull-resistance-duration) linear;
}

.pull-power-ideal {
  z-index: 2;
  background: var(--pull-target-color);
  box-shadow: none;
}

.pull-power-perfect {
  z-index: 3;
  background: var(--pull-perfect-color);
  box-shadow: none;
}

.pull-track {
  position: relative;
  min-height: clamp(190px, 38dvh, 360px);
  border-radius: 36px;
  background-color: #9fdcff;
  background-image: url("./assets/pull-track-background.png");
  background-size: cover;
  background-position: var(--pull-bg-position-x) var(--pull-bg-position-y);
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 4px rgba(255, 247, 223, 0.76);
  overflow: hidden;
  touch-action: none;
}

.pull-track::before {
  content: none;
}

.pull-target-zone,
.pull-perfect-zone,
.pull-goal-line {
  position: absolute;
  transform: translateX(-50%);
  pointer-events: none;
}

.pull-target-zone {
  top: var(--pull-road-zone-top);
  bottom: var(--pull-road-zone-bottom);
  transform: none;
  z-index: 1;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pull-perfect-zone {
  top: var(--pull-road-zone-top);
  bottom: var(--pull-road-zone-bottom);
  transform: none;
  z-index: 3;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pull-perfect-fireworks {
  position: absolute;
  left: var(--pull-perfect-center, 50%);
  top: 39%;
  z-index: 14;
  width: min(54%, 500px);
  height: min(58%, 232px);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.pull-perfect-fireworks.is-active {
  animation: pull-fireworks-layer 1.34s ease-out both;
}

.pull-firework-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(112px, 15vw, 178px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.pull-firework-burst::before,
.pull-firework-burst::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

.pull-firework-burst::before {
  width: 42%;
  height: 42%;
  background:
    radial-gradient(circle, rgba(255, 247, 223, 0.9) 0 20%, rgba(255, 214, 0, 0.34) 38%, rgba(255, 214, 0, 0) 72%);
}

.pull-firework-burst::after {
  width: 76%;
  height: 76%;
  border: clamp(2px, 0.45vw, 5px) dashed rgba(255, 247, 223, 0.78);
}

.pull-firework-burst i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(8px, 1.15vw, 14px);
  height: clamp(26px, 4.6vw, 56px);
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--spark-rotate)) translateY(0) scaleY(0.12);
  transform-origin: 50% 100%;
  box-shadow: inset 0 0 0 2px rgba(255, 247, 223, 0.5);
}

.pull-firework-burst i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -42%;
  width: clamp(10px, 1.5vw, 20px);
  aspect-ratio: 1;
  border-radius: 45% 55% 52% 48%;
  background: inherit;
  box-shadow: inset 0 0 0 2px rgba(255, 247, 223, 0.45);
  transform: translateX(-50%) scale(0.9);
}

.pull-perfect-fireworks.is-active .pull-firework-burst::before {
  animation: pull-firework-glow 1120ms ease-out both;
}

.pull-perfect-fireworks.is-active .pull-firework-burst::after {
  animation: pull-firework-ring 1180ms ease-out both;
}

.pull-perfect-fireworks.is-active .pull-firework-burst i {
  animation: pull-firework-stitch 1080ms cubic-bezier(0.16, 0.88, 0.22, 1) both;
}

.pull-firework-burst:nth-child(1) {
  left: 28%;
  top: 52%;
}

.pull-firework-burst:nth-child(2) {
  left: 54%;
  top: 26%;
  width: clamp(128px, 17vw, 202px);
}

.pull-firework-burst:nth-child(3) {
  left: 77%;
  top: 56%;
  width: clamp(96px, 13vw, 158px);
}

.pull-firework-burst:nth-child(2)::before,
.pull-firework-burst:nth-child(2)::after,
.pull-firework-burst:nth-child(2) i {
  animation-delay: 90ms;
}

.pull-firework-burst:nth-child(3)::before,
.pull-firework-burst:nth-child(3)::after,
.pull-firework-burst:nth-child(3) i {
  animation-delay: 170ms;
}

.pull-firework-burst i:nth-child(1) { --spark-rotate: 0deg; background: #fff7df; }
.pull-firework-burst i:nth-child(2) { --spark-rotate: 45deg; background: #ffd600; }
.pull-firework-burst i:nth-child(3) { --spark-rotate: 90deg; background: #8ad7ff; }
.pull-firework-burst i:nth-child(4) { --spark-rotate: 135deg; background: #a8e6cf; }
.pull-firework-burst i:nth-child(5) { --spark-rotate: 180deg; background: #ffb000; }
.pull-firework-burst i:nth-child(6) { --spark-rotate: 225deg; background: #ff5da2; }
.pull-firework-burst i:nth-child(7) { --spark-rotate: 270deg; background: #fff7df; }
.pull-firework-burst i:nth-child(8) { --spark-rotate: 315deg; background: #ffd600; }

.pull-goal-line {
  bottom: var(--pull-flag-bottom);
  z-index: 9;
  width: clamp(70px, 8vw, 112px);
  aspect-ratio: 2 / 3;
  background-image: url("./assets/pull-goal-flag.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
}

.pull-vehicle-button {
  --pull-vehicle-x: 0px;
  --pull-wheel-ground-offset: 0%;
  position: absolute;
  left: 0;
  bottom: var(--pull-vehicle-bottom);
  z-index: 10;
  width: clamp(116px, 17vw, 210px);
  aspect-ratio: 1.55;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  touch-action: none;
  transform: translateX(var(--pull-vehicle-x)) translateY(calc(var(--pull-wheel-ground-offset) + (var(--pull-tension) * -8px)));
  transform-origin: center bottom;
  transition: transform 110ms linear, filter 160ms ease;
}

.pull-vehicle-button.is-pulling {
  filter: none;
}

.pull-vehicle-button.is-pulling .pull-vehicle-visual {
  animation: pull-resistance-shake 92ms linear infinite;
}

.pull-vehicle-button.is-launched {
  transition: none;
}

.pull-vehicle-visual {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: scale(calc(1 + var(--pull-tension) * 0.05)) rotate(calc(var(--pull-tension) * 2deg));
  transform-origin: center bottom;
}

.pull-assembled-vehicle {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.pull-assembled-vehicle .car-runner,
.pull-assembled-vehicle .split-vehicle-runner {
  width: 100%;
  pointer-events: none;
}

.pull-assembled-vehicle .car-main-image,
.pull-assembled-vehicle .split-vehicle-body,
.pull-assembled-vehicle .split-wheel-image,
.pull-assembled-vehicle .wheel-image,
.pull-assembled-vehicle .split-overlay-image {
  filter: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.pull-composite-vehicle {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform: translate(var(--pull-composite-x, 0%), var(--pull-composite-y, 0%)) scale(var(--pull-composite-scale, 1));
  transform-origin: center center;
}

.pull-composite-part {
  position: absolute;
  left: var(--part-x);
  top: var(--part-y);
  width: var(--part-size);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.pull-composite-part.is-full {
  inset: 0;
  width: 100%;
  transform: none;
}

.pull-composite-part img,
.pull-vehicle-visual > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: none;
}

.pull-composite-part.is-full img {
  width: 100%;
  height: 100%;
}

.pull-composite-wheel {
  aspect-ratio: 1;
}

.pull-composite-wheel img {
  width: 100%;
  height: 100%;
  transform-origin: center center;
}

.pull-vehicle-button.is-launched .pull-composite-wheel img {
  animation: pull-wheel-drive 260ms linear infinite;
}

.pull-vehicle-button.is-braking .pull-composite-wheel img {
  animation: pull-wheel-brake 460ms cubic-bezier(0.12, 0.72, 0.18, 1) both;
}

.pull-vehicle-button.is-launched .split-wheel-image,
.pull-vehicle-button.is-launched .wheel-image {
  animation: pull-wheel-drive 260ms linear infinite;
}

.pull-vehicle-button.is-braking .car-runner,
.pull-vehicle-button.is-braking .split-vehicle-runner {
  animation: pull-runner-brake 760ms cubic-bezier(0.2, 0.78, 0.28, 1) both;
}

.pull-vehicle-button.is-braking .car-body-layer,
.pull-vehicle-button.is-braking .split-vehicle-body-layer {
  animation: split-body-brake 760ms ease-in-out both;
}

.pull-vehicle-button.is-braking .split-wheel-image,
.pull-vehicle-button.is-braking .wheel-image {
  animation: wheel-spin-brake 760ms linear both;
}

.pull-vehicle-button.vehicle-train.is-braking .split-wheel-image {
  animation-name: train-wheel-spin-brake;
}

.pull-game-result {
  justify-self: center;
  min-height: 1.15em;
  padding: 8px 22px 10px;
  border: 0;
  border-radius: 999px;
  background: #fff7df;
  color: #243243;
  font-family: "Chiron GoRound TC", system-ui, sans-serif;
  font-size: clamp(1.24rem, 3.1vw, 2.3rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  box-shadow: none;
}

.pull-game-result.is-correct {
  color: #145c38;
}

.pull-game-result.is-wrong {
  color: #8a2f2f;
}

.memory-sparkles {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
}

.memory-sparkles.is-active {
  animation: memory-achievement-layer 1.26s ease-out both;
}

.memory-sparkles::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(120px, 18vw, 210px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid rgba(255, 247, 223, 0.78);
  background: radial-gradient(circle, rgba(255, 214, 0, 0.26), rgba(255, 214, 0, 0));
  transform: translate(-50%, -50%) scale(0);
}

.memory-sparkles::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(210px, 32vw, 380px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 5px solid rgba(255, 214, 0, 0.42);
  transform: translate(-50%, -50%) scale(0);
}

.memory-sparkles strong {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: clamp(96px, 14vw, 168px);
  aspect-ratio: 1;
  display: block;
  filter:
    drop-shadow(0 16px 30px rgba(0, 0, 0, 0.24))
    drop-shadow(0 0 24px rgba(255, 214, 0, 0.42));
  transform: translate(-50%, -50%) scale(0);
}

.memory-sparkles strong img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.memory-sparkles.is-active::before {
  animation: memory-achievement-glow 1.04s ease-out both;
}

.memory-sparkles.is-active::after {
  animation: memory-achievement-ring 1.12s ease-out both;
}

.memory-sparkles.is-active strong {
  animation: memory-achievement-badge 0.9s cubic-bezier(0.18, 0.9, 0.2, 1.18) both;
}

.memory-sparkles span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(16px, 3.2vw, 38px);
  height: clamp(10px, 2vw, 22px);
  border-radius: 6px;
  background: #ffd600;
  box-shadow: inset 0 0 0 2px rgba(255, 247, 223, 0.38);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.18));
  transform: translate(-50%, -50%) scale(0) rotate(0deg);
  --burst-x: 0px;
  --burst-y: 0px;
  --burst-rotate: 0deg;
}

.memory-sparkles.is-active span {
  animation: memory-confetti-burst 1.08s cubic-bezier(0.16, 0.88, 0.22, 1) both;
}

.memory-sparkles span:nth-of-type(1) {
  --burst-x: -34vw;
  --burst-y: -20vh;
  --burst-rotate: -42deg;
  background: #fff7df;
}

.memory-sparkles span:nth-of-type(2) {
  --burst-x: 33vw;
  --burst-y: -22vh;
  --burst-rotate: 38deg;
  background: #8ad7ff;
  animation-delay: 0.06s;
}

.memory-sparkles span:nth-of-type(3) {
  --burst-x: -25vw;
  --burst-y: 18vh;
  --burst-rotate: 76deg;
  background: #ff6b6b;
  animation-delay: 0.12s;
}

.memory-sparkles span:nth-of-type(4) {
  --burst-x: 26vw;
  --burst-y: 19vh;
  --burst-rotate: -78deg;
  background: #a8e6cf;
  animation-delay: 0.18s;
}

.memory-sparkles span:nth-of-type(5) {
  --burst-x: 0;
  --burst-y: -29vh;
  --burst-rotate: 95deg;
  background: #ffb000;
  animation-delay: 0.24s;
}

.memory-sparkles span:nth-of-type(6) {
  --burst-x: 0;
  --burst-y: 27vh;
  --burst-rotate: -102deg;
  background: #ff5da2;
  animation-delay: 0.1s;
}

.memory-sparkles span:nth-of-type(7) {
  --burst-x: -39vw;
  --burst-y: 1vh;
  --burst-rotate: 24deg;
  background: #8ad7ff;
  animation-delay: 0.16s;
}

.memory-sparkles span:nth-of-type(8) {
  --burst-x: 39vw;
  --burst-y: -1vh;
  --burst-rotate: -26deg;
  background: #fff7df;
  animation-delay: 0.22s;
}

.vehicle-card:focus,
.car-button:focus {
  outline: none;
}

.generated-vehicle-image {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 760px, 69dvh, 645px);
  aspect-ratio: 3 / 2;
  max-height: none;
  object-fit: contain;
  transform-origin: center 78%;
}

.airplane-flight-scene {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 760px, 69dvh, 645px);
  aspect-ratio: 3 / 2;
  overflow: visible;
  transform-origin: center 58%;
  transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1));
}

.airplane-image {
  z-index: 3;
  width: 100%;
  transform-origin: center 58%;
}

.flight-cloud {
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.flight-cloud img {
  display: block;
  width: 100%;
  height: auto;
}

.flight-cloud-back {
  z-index: 1;
  filter: saturate(0.92) brightness(1.03);
}

.flight-cloud-front {
  z-index: 5;
  filter: none;
}

.flight-cloud-back-large {
  top: 18%;
  width: 46%;
}

.flight-cloud-back-small {
  top: 8%;
  width: 22%;
}

.flight-cloud-front-medium {
  top: 57%;
  width: 34%;
}

.flight-cloud-front-small {
  z-index: 2;
  top: 42%;
  width: 21%;
}

.boat-sailing-scene {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 760px, 69dvh, 645px);
  aspect-ratio: 3 / 2;
  overflow: visible;
  transform-origin: center 66%;
  transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1));
}

.boat-image {
  z-index: 4;
  width: 100%;
  transform-origin: center 70%;
}

.boat-wave,
.boat-gull {
  position: absolute;
  left: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
  filter: none;
  will-change: transform, opacity;
}

.boat-wave img,
.boat-gull img {
  display: block;
  width: 100%;
  height: auto;
}

.boat-wave-back {
  z-index: 2;
  opacity: 0;
}

.boat-wave-front {
  z-index: 6;
  opacity: 0;
}

.boat-wave-back-large {
  top: 66%;
  width: 116%;
}

.boat-wave-back-small {
  top: 71%;
  width: 96%;
}

.boat-wave-front-medium {
  top: 76%;
  width: 124%;
}

.boat-wave-front-small {
  top: 82%;
  width: 102%;
}

.boat-gull {
  z-index: 7;
}

.boat-gull-high {
  top: 4%;
  width: 24%;
}

.helicopter-flight-scene {
  position: relative;
  display: grid;
  place-items: center;
  width: min(92%, 700px, 63dvh, 595px);
  aspect-ratio: 631 / 385;
  overflow: visible;
  transform-origin: center 62%;
  transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1));
}

.helicopter-runner {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 631 / 385;
  transform-origin: center 62%;
}

.helicopter-body-image {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
  transform-origin: center 62%;
}

.helicopter-body-layer {
  position: relative;
  z-index: 3;
  display: block;
  transform-origin: center 62%;
  transform: translate(var(--part-layout-x, 0), var(--part-layout-y, 0)) scale(var(--part-layout-scale, 1));
}

.helicopter-tail-rotor {
  position: absolute;
  z-index: 5;
  display: block;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transform-origin: center;
  pointer-events: none;
}

.helicopter-tail-rotor img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  transform-origin: center;
}

.split-vehicle-runner {
  position: relative;
  display: block;
  width: min(100%, 760px, 69dvh, 645px);
  aspect-ratio: 3 / 2;
  max-height: none;
  transform-origin: center 78%;
  transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1));
}

.vehicle-card:not(.has-split-wheels)::before,
.split-vehicle-runner::before {
  content: "";
  display: none;
}

.split-vehicle-body-layer {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 2;
  transform-origin: center 76%;
  transform: translate(var(--part-layout-x, 0), var(--part-layout-y, 0)) scale(var(--part-layout-scale, 1));
}

.split-vehicle-body {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.split-wheel {
  position: absolute;
  z-index: 1;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transform-origin: center;
  pointer-events: none;
}

.split-wheel-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}

.split-overlay {
  position: absolute;
  z-index: 3;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transform-origin: center;
  pointer-events: none;
}

.split-overlay-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}

.train-consist-runner {
  overflow: visible;
}

.train-consist-track {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: stretch;
  width: 400%;
  height: 100%;
  transform-origin: 12.5% 76%;
}

.train-carriage {
  position: relative;
  flex: 0 0 25%;
  height: 100%;
  aspect-ratio: 3 / 2;
}

.train-carriage-clone {
  opacity: 0;
  margin-left: -5.2%;
  pointer-events: none;
}

.train-clone-body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.train-clone-wheel {
  position: absolute;
  z-index: 1;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transform-origin: center;
  pointer-events: none;
}

.book-screen.is-layout-editing .vehicle-card,
.book-screen.is-layout-editing .car-button {
  outline: 3px dashed rgba(47, 134, 222, 0.32);
  outline-offset: 10px;
}

.book-screen.is-layout-editing [data-layout-part] {
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}

.book-screen.is-layout-editing [data-layout-part].is-layout-selected {
  outline: 3px solid rgba(47, 134, 222, 0.62);
  outline-offset: 6px;
}

.book-screen.is-layout-editing [data-layout-part]:active {
  cursor: grabbing;
}

.vehicle-card.is-tapped .vehicle-art {
  animation: vehicle-bounce 1.35s cubic-bezier(0.16, 0.82, 0.26, 1) both;
}

.vehicle-card.is-tapped .generated-vehicle-image {
  animation: vehicle-bounce 1.35s cubic-bezier(0.16, 0.82, 0.26, 1) both;
}

.vehicle-airplane.is-tapped .generated-vehicle-image {
  animation: airplane-float var(--drive-duration) cubic-bezier(0.38, 0, 0.2, 1) both;
}

.vehicle-airplane.is-tapped .flight-cloud-back-large {
  animation: fly-cloud-back var(--drive-duration) linear both;
}

.vehicle-airplane.is-tapped .flight-cloud-back-small {
  animation: fly-cloud-back calc(var(--drive-duration) * 0.88) linear 0.38s both;
}

.vehicle-airplane.is-tapped .flight-cloud-front-medium {
  animation: fly-cloud-front calc(var(--drive-duration) * 0.82) linear 0.18s both;
}

.vehicle-airplane.is-tapped .flight-cloud-front-small {
  animation: fly-cloud-front calc(var(--drive-duration) * 0.74) linear 0.72s both;
}

.vehicle-boat.is-tapped .generated-vehicle-image {
  animation: boat-float var(--drive-duration) cubic-bezier(0.38, 0, 0.2, 1) both;
}

.vehicle-boat.is-tapped .boat-wave-back-large {
  animation: sail-wave-back 6.4s linear both;
}

.vehicle-boat.is-tapped .boat-wave-back-small {
  animation: sail-wave-back 5.4s linear 0.34s both;
}

.vehicle-boat.is-tapped .boat-wave-front-medium {
  animation: sail-wave-front 5.6s linear 0.16s both;
}

.vehicle-boat.is-tapped .boat-wave-front-small {
  animation: sail-wave-front 4.9s linear 0.62s both;
}

.vehicle-boat.is-tapped .boat-gull-high {
  animation: seagull-fly var(--drive-duration) linear 0.08s both;
}

.vehicle-helicopter.is-tapped .generated-vehicle-image {
  animation: none;
}

.vehicle-helicopter.is-tapped .helicopter-runner {
  animation: helicopter-flight-loop var(--drive-duration) cubic-bezier(0.2, 0.78, 0.28, 1) both;
}

.vehicle-helicopter.is-tapped .helicopter-tail-rotor img {
  animation: helicopter-tail-spin 280ms linear infinite;
}

.vehicle-card.has-split-wheels.is-tapped .generated-vehicle-image {
  animation: none;
}

.vehicle-card.has-split-wheels.is-tapped[data-motion="drive"] .split-vehicle-runner {
  animation: split-drive-brake-loop var(--drive-duration) cubic-bezier(0.2, 0.78, 0.28, 1) both;
}

.vehicle-card.has-split-wheels.is-tapped[data-motion="drive"] .split-vehicle-body-layer {
  animation: split-body-brake var(--drive-duration) ease-in-out both;
}

.vehicle-card.has-split-wheels.is-tapped[data-motion="train"] .split-vehicle-runner {
  animation: train-runner-return var(--train-duration) cubic-bezier(0.2, 0.78, 0.28, 1) both;
}

.vehicle-card.has-split-wheels.is-tapped[data-motion="train"] .split-vehicle-body-layer {
  animation: none;
}

.vehicle-card.has-split-wheels.is-tapped[data-motion="train"] .train-consist-track {
  animation: train-consist-depart var(--train-duration) cubic-bezier(0.22, 0.68, 0.24, 1) both;
}

.vehicle-card.has-split-wheels.is-tapped[data-motion="train"] .train-carriage-clone {
  animation: train-extra-carriages var(--train-duration) linear both;
}

.vehicle-card.has-split-wheels.is-tapped[data-motion="bicycle"] .split-vehicle-runner {
  animation: split-drive-brake-loop var(--drive-duration) cubic-bezier(0.2, 0.78, 0.28, 1) both;
}

.vehicle-card.has-split-wheels.is-tapped[data-motion="bicycle"] .split-vehicle-body-layer {
  animation: split-body-brake var(--drive-duration) ease-in-out both;
}

.vehicle-card.has-split-wheels.is-tapped .split-wheel-image {
  animation: wheel-spin-brake var(--drive-duration) linear both;
}

.vehicle-card.has-split-wheels.is-tapped[data-motion="train"] .split-wheel-image {
  animation-name: train-wheel-spin-brake;
  animation-duration: var(--train-duration);
}

.vehicle-card.has-split-wheels.is-tapped[data-motion="bicycle"] .split-wheel-image {
  animation-duration: var(--drive-duration);
}

.book-screen.page-exit-next .toc-page,
.book-screen.page-exit-next .activity-menu-page,
.book-screen.page-exit-next .memory-game-host,
.book-screen.page-exit-next .link-game-host,
.book-screen.page-exit-next .find-game-card {
  animation: page-vehicle-exit-next 744ms cubic-bezier(0.3, 0, 0.72, 0.24) both;
}

.book-screen.page-exit-next .police-playground > .car-button,
.book-screen.page-exit-next .vehicle-playground > .vehicle-card {
  animation: page-vehicle-layout-exit-next 744ms cubic-bezier(0.3, 0, 0.72, 0.24) both;
}

.book-screen.page-enter-next .toc-page,
.book-screen.page-enter-next .activity-menu-page,
.book-screen.page-enter-next .memory-game-host,
.book-screen.page-enter-next .link-game-host,
.book-screen.page-enter-next .find-game-card {
  animation: page-vehicle-enter-next 1186ms cubic-bezier(0.16, 0.82, 0.24, 1) both;
}

.book-screen.page-enter-next .police-playground > .car-button,
.book-screen.page-enter-next .vehicle-playground > .vehicle-card {
  animation: page-vehicle-layout-enter-next 1186ms cubic-bezier(0.16, 0.82, 0.24, 1) both;
}

.book-screen.page-exit-prev .toc-page,
.book-screen.page-exit-prev .activity-menu-page,
.book-screen.page-exit-prev .memory-game-host,
.book-screen.page-exit-prev .link-game-host,
.book-screen.page-exit-prev .find-game-card {
  animation: page-vehicle-exit-prev 864ms cubic-bezier(0.3, 0, 0.72, 0.24) both;
}

.book-screen.page-exit-prev .police-playground > .car-button,
.book-screen.page-exit-prev .vehicle-playground > .vehicle-card {
  animation: page-vehicle-layout-exit-prev 864ms cubic-bezier(0.3, 0, 0.72, 0.24) both;
}

.book-screen.page-enter-prev .toc-page,
.book-screen.page-enter-prev .activity-menu-page,
.book-screen.page-enter-prev .memory-game-host,
.book-screen.page-enter-prev .link-game-host,
.book-screen.page-enter-prev .find-game-card {
  animation: page-vehicle-enter-prev 912ms cubic-bezier(0.16, 0.82, 0.24, 1) both;
}

.book-screen.page-enter-prev .police-playground > .car-button,
.book-screen.page-enter-prev .vehicle-playground > .vehicle-card {
  animation: page-vehicle-layout-enter-prev 912ms cubic-bezier(0.16, 0.82, 0.24, 1) both;
}

.book-screen.page-exit-next .vehicle-helicopter .helicopter-runner {
  animation: helicopter-page-exit-next 744ms cubic-bezier(0.3, 0, 0.72, 0.24) both;
}

.book-screen.page-enter-next .vehicle-helicopter .helicopter-runner {
  animation: helicopter-page-enter-next 1186ms cubic-bezier(0.16, 0.82, 0.24, 1) both;
}

.book-screen.page-exit-prev .vehicle-helicopter .helicopter-runner {
  animation: helicopter-page-exit-prev 864ms cubic-bezier(0.3, 0, 0.72, 0.24) both;
}

.book-screen.page-enter-prev .vehicle-helicopter .helicopter-runner {
  animation: helicopter-page-enter-prev 912ms cubic-bezier(0.16, 0.82, 0.24, 1) both;
}

.book-screen.page-exit-next .vehicle-helicopter .helicopter-tail-rotor img,
.book-screen.page-enter-next .vehicle-helicopter .helicopter-tail-rotor img,
.book-screen.page-exit-prev .vehicle-helicopter .helicopter-tail-rotor img,
.book-screen.page-enter-prev .vehicle-helicopter .helicopter-tail-rotor img {
  animation: helicopter-tail-spin 240ms linear infinite;
}

.book-screen.page-exit-next .word-panel {
  animation: page-copy-exit-next 624ms ease-in both;
}

.book-screen.page-enter-next .word-panel {
  animation: page-copy-enter-next 816ms cubic-bezier(0.16, 0.82, 0.24, 1) both;
}

.book-screen.page-exit-prev .word-panel {
  animation: page-copy-exit-prev 672ms ease-in both;
}

.book-screen.page-enter-prev .word-panel {
  animation: page-copy-enter-prev 816ms cubic-bezier(0.16, 0.82, 0.24, 1) both;
}

.book-screen.page-exit-next .speech-challenge,
.book-screen.page-exit-prev .speech-challenge {
  animation: speech-control-fade-out 320ms ease-in both;
}

.book-screen.page-enter-next .speech-challenge,
.book-screen.page-enter-prev .speech-challenge {
  animation: speech-control-fade-in 420ms ease-out both;
}

.book-screen.page-exit-next .wheel-image,
.book-screen.page-exit-next .split-wheel-image,
.book-screen.page-exit-prev .wheel-image,
.book-screen.page-enter-prev .wheel-image,
.book-screen.page-exit-prev .split-wheel-image,
.book-screen.page-enter-prev .split-wheel-image {
  animation: page-wheel-roll 912ms linear both;
}

.book-screen.page-enter-next .wheel-image,
.book-screen.page-enter-next .split-wheel-image {
  animation: page-wheel-roll 1186ms linear both;
}

.book-screen.page-enter-next .car-body-layer,
.book-screen.page-enter-next .split-vehicle-body-layer {
  animation: page-body-brake 1186ms ease-in-out both;
}

.book-screen.page-enter-prev .car-body-layer,
.book-screen.page-enter-prev .split-vehicle-body-layer {
  animation: page-body-brake 912ms ease-in-out both;
}

.vehicle-card.is-tapped .mini-wheel,
.vehicle-card.is-tapped .bike-wheel {
  animation: wheel-spin-small 1.35s cubic-bezier(0.16, 0.76, 0.24, 1) both;
}

.tone-red {
  --main: #ef4d4d;
  --deep: #813333;
  --accent: #ffd96a;
}

.tone-white {
  --main: #fffdf1;
  --deep: #455f70;
  --accent: #ff5d6c;
}

.tone-yellow {
  --main: #ffd85c;
  --deep: #6b512f;
  --accent: #2f86de;
}

.tone-green {
  --main: #75d68a;
  --deep: #315d49;
  --accent: #fff176;
}

.tone-sky {
  --main: #9dddff;
  --deep: #34688e;
  --accent: #ff9f6e;
}

.tone-blue {
  --main: #73bdf2;
  --deep: #285b88;
  --accent: #ffdd78;
}

.tone-mint {
  --main: #7ee6c4;
  --deep: #2d655c;
  --accent: #ff8ca3;
}

.vehicle-art {
  position: relative;
  display: block;
  width: min(92%, 660px);
  aspect-ratio: 2.35 / 1;
  transform-origin: center 78%;
}

.vehicle-cabin,
.vehicle-box,
.taxi-body,
.bus-art,
.train-art,
.plane-body,
.boat-hull {
  position: absolute;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 6px),
    var(--main);
  border: 8px solid rgba(255, 253, 241, 0.82);
}

.truck-art .vehicle-cabin {
  left: 8%;
  bottom: 22%;
  width: 34%;
  height: 46%;
  border-radius: 34% 16% 12% 12%;
}

.truck-art .vehicle-box {
  left: 36%;
  bottom: 22%;
  width: 48%;
  height: 52%;
  border-radius: 12% 18% 10% 10%;
}

.vehicle-window {
  position: absolute;
  top: 22%;
  width: 24%;
  height: 34%;
  border-radius: 8px;
  background: #2f86de;
  box-shadow: inset 0 0 0 3px rgba(255, 253, 241, 0.45);
}

.window-a {
  left: 18%;
}

.window-b {
  left: 48%;
}

.window-c {
  left: 68%;
}

.vehicle-ladder {
  position: absolute;
  left: 42%;
  top: 11%;
  width: 46%;
  height: 12%;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(107, 81, 47, 0.32) 22px 28px),
    #fff5b5;
  transform: rotate(-4deg);
}

.vehicle-light {
  position: absolute;
  left: 7%;
  bottom: 42%;
  width: 7%;
  height: 14%;
  border-radius: 999px;
  background: var(--accent);
}

.mini-wheel {
  position: absolute;
  bottom: 9%;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #ffe978 0 18%, #6b3f30 19% 54%, #2d2528 55% 100%);
  border: 5px solid rgba(255, 253, 241, 0.65);
}

.wheel-a {
  left: 20%;
}

.wheel-b {
  right: 18%;
}

.medical-cross {
  position: absolute;
  inset: 18% 36%;
}

.medical-cross::before,
.medical-cross::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 8px;
  background: #ff5d6c;
}

.medical-cross::before {
  width: 36%;
  height: 100%;
}

.medical-cross::after {
  width: 100%;
  height: 36%;
}

.bus-art {
  position: relative;
  border-radius: 20% 24% 12% 12%;
}

.bus-window-row {
  position: absolute;
  inset: 16% 15% auto;
  height: 36%;
}

.bus-door {
  position: absolute;
  right: 16%;
  bottom: 21%;
  width: 14%;
  height: 42%;
  border-radius: 9px 9px 0 0;
  background: rgba(255, 253, 241, 0.72);
}

.train-art {
  position: relative;
  border-radius: 18% 30% 16% 18%;
}

.train-nose {
  position: absolute;
  right: -3%;
  bottom: 15%;
  width: 20%;
  height: 64%;
  border-radius: 50%;
  background: rgba(255, 253, 241, 0.38);
}

.train-window-row {
  position: absolute;
  inset: 18% 18% auto;
  height: 36%;
}

.train-track {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -12%;
  height: 8%;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #6b512f 0 28px, #fffdf1 28px 38px);
}

.airplane-art {
  aspect-ratio: 2.55 / 1;
}

.plane-body {
  left: 8%;
  right: 8%;
  top: 35%;
  height: 28%;
  border-radius: 999px;
}

.plane-wing {
  position: absolute;
  left: 39%;
  top: 46%;
  width: 32%;
  height: 20%;
  border-radius: 12px 70% 14px 70%;
  background: var(--accent);
  transform: rotate(14deg);
}

.plane-tail {
  position: absolute;
  left: 10%;
  top: 20%;
  width: 17%;
  height: 26%;
  border-radius: 14px 80% 14px 14px;
  background: var(--accent);
}

.plane-window-row {
  position: absolute;
  left: 34%;
  top: 43%;
  display: flex;
  gap: 16px;
}

.plane-window-row span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2f86de;
}

.boat-art {
  aspect-ratio: 2.3 / 1;
}

.boat-hull {
  left: 12%;
  right: 10%;
  bottom: 20%;
  height: 35%;
  border-radius: 16px 16px 80px 80px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 6px),
    var(--deep);
}

.boat-cabin {
  position: absolute;
  left: 34%;
  top: 22%;
  width: 30%;
  height: 30%;
  border-radius: 18px 18px 8px 8px;
  background: var(--main);
  border: 7px solid rgba(255, 253, 241, 0.82);
}

.boat-sail {
  position: absolute;
  left: 24%;
  top: 3%;
  width: 22%;
  height: 46%;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: var(--accent);
}

.boat-art .boat-wave {
  position: absolute;
  bottom: 6%;
  height: 8%;
  border-radius: 999px;
  background: rgba(255, 253, 241, 0.72);
}

.wave-a {
  left: 16%;
  width: 28%;
}

.wave-b {
  right: 18%;
  width: 34%;
}

.bicycle-art {
  aspect-ratio: 2.15 / 1;
}

.bike-wheel {
  position: absolute;
  bottom: 8%;
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 14px solid var(--deep);
  background: radial-gradient(circle at center, #ffe978 0 10%, transparent 11% 100%);
  box-shadow: inset 0 0 0 5px rgba(255, 253, 241, 0.5);
}

.bike-wheel-a {
  left: 12%;
}

.bike-wheel-b {
  right: 12%;
}

.bike-frame {
  position: absolute;
  left: 32%;
  top: 43%;
  width: 34%;
  height: 10%;
  border-radius: 999px;
  background: var(--main);
  transform-origin: left center;
}

.frame-a {
  transform: rotate(30deg);
}

.frame-b {
  top: 52%;
  transform: rotate(-25deg);
}

.bike-seat,
.bike-bar {
  position: absolute;
  top: 31%;
  width: 16%;
  height: 8%;
  border-radius: 999px;
  background: var(--accent);
}

.bike-seat {
  left: 36%;
}

.bike-bar {
  right: 25%;
  transform: rotate(22deg);
}

.garbage-art .vehicle-box {
  border-radius: 16% 28% 14% 14%;
}

.recycle-dot {
  position: absolute;
  top: 38%;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 253, 241, 0.82);
}

.dot-a {
  left: 30%;
}

.dot-b {
  right: 30%;
}

.taxi-art .vehicle-cabin {
  left: 24%;
  top: 21%;
  width: 42%;
  height: 34%;
  border-radius: 40% 42% 8px 8px;
}

.taxi-body {
  left: 8%;
  right: 8%;
  bottom: 21%;
  height: 36%;
  border-radius: 24% 28% 14% 14%;
}

.taxi-sign {
  position: absolute;
  top: 8%;
  left: 42%;
  min-width: 16%;
  padding: 6px 10px;
  border-radius: 8px 8px 4px 4px;
  background: #fffdf1;
  color: #6b512f;
  font-size: clamp(0.9rem, 3vw, 1.55rem);
  font-weight: 950;
}

.lock-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 28px;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, #405378 0%, #778fc0 100%);
}

.night-scene {
  position: relative;
  width: min(100%, 360px);
  height: 220px;
}

.moon {
  position: absolute;
  right: 34px;
  top: 0;
  color: #ffdf75;
  font-size: 5rem;
  line-height: 1;
}

.star {
  position: absolute;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.5rem;
}

.star-a {
  left: 18px;
  top: 38px;
}

.star-b {
  left: 116px;
  top: 8px;
}

.star-c {
  right: 16px;
  top: 106px;
}

.sleeping-car {
  position: absolute;
  inset: auto 0 8px;
  margin: auto;
  width: 280px;
  opacity: 0.92;
  transform: scale(0.76);
}

.sleeping-car img {
  width: 100%;
}

.sleep-wheel {
  position: absolute;
  top: 74.1%;
  width: 23.4%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.sleep-wheel-left {
  left: 33.2%;
}

.sleep-wheel-right {
  left: 67.6%;
}

.lock-screen h2 {
  margin: 0;
  font-size: clamp(2.35rem, 10vw, 3.4rem);
  line-height: 1.05;
}

.lock-screen p {
  margin: 10px 0 24px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.3rem;
  font-weight: 900;
}

.primary-button {
  min-width: 180px;
  min-height: 58px;
  border-radius: 999px;
  background: var(--ui-solid-bg);
  background-image: none;
  color: var(--ui-solid-fg);
  padding: 0 22px;
  font-size: 1.18rem;
  font-weight: 950;
  text-shadow: none;
}

.lock-screen .primary-button {
  background: var(--ui-solid-bg);
  background-image: none;
  color: var(--ui-solid-fg);
  text-shadow: none;
}

.rest-note {
  display: block;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 900;
}

.parent-dialog {
  width: min(94vw, 520px);
  border: 0;
  border-radius: 20px;
  padding: 0;
  background: transparent;
}

.parent-dialog::backdrop {
  background: rgba(22, 31, 38, 0.36);
  backdrop-filter: blur(7px);
}

.dialog-card {
  position: relative;
  margin: 0;
  padding: 24px;
  border: 1px solid rgba(39, 51, 65, 0.08);
  border-radius: 20px;
  background: #ffffff;
  color: #243243;
  box-shadow: 0 24px 70px rgba(19, 29, 38, 0.22);
}

.dialog-close {
  position: absolute;
  top: 28px;
  right: 14px;
  z-index: 4;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #f2f5f7;
  color: #4b5c68;
  font-size: 1.35rem;
  line-height: 1;
  box-shadow: none;
  text-shadow: none;
}

.gate-panel,
.settings-panel,
.feedback-panel,
.lock-actions-panel {
  display: grid;
  justify-items: stretch;
  gap: 16px;
  padding-top: 6px;
}

.settings-panel {
  position: relative;
}

.settings-panel h2 {
  display: flex;
  align-items: center;
  min-height: 52px;
  margin-right: 250px;
  font-size: 1.38rem;
  transform: translateY(-13px);
}

.settings-panel .unlock-full-version-button {
  position: absolute;
  top: 4px;
  right: 34px;
  z-index: 1;
}

.settings-panel .safety-note {
  justify-self: center;
  width: 100%;
  text-align: center;
}

.dialog-card h2 {
  margin: 0 46px 2px 0;
  color: #1f2f3a;
  font-size: 1.55rem;
  line-height: 1.12;
  font-weight: 950;
  letter-spacing: 0;
}

.math-question {
  margin: 0;
  color: #1f2f3a;
  font-size: 2.35rem;
  font-weight: 950;
  text-align: center;
}

.math-answer {
  width: min(100%, 220px);
  height: 52px;
  justify-self: center;
  border: 1px solid #d9e2e8;
  border-radius: 12px;
  background: #f8fafb;
  color: #1f2f3a;
  text-align: center;
  font-size: 1.55rem;
  font-weight: 950;
  box-shadow: inset 0 1px 2px rgba(31, 47, 58, 0.05);
}

.gate-error {
  min-height: 20px;
  margin: 0;
  color: #a73636;
  font-weight: 900;
}

.limit-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.limit-options legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.limit-option {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  min-height: 46px;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid #dce5ea;
  border-radius: 12px;
  background: #f8fafb;
  color: #263946;
  font-size: 0.98rem;
  font-weight: 900;
}

.limit-option input {
  width: 18px;
  height: 18px;
  accent-color: #2f86de;
}

.language-settings-section {
  width: 100%;
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e0e8ed;
  border-radius: 16px;
  background: #f8fafb;
}

.settings-subtitle {
  width: 100%;
  color: #536675;
  font-size: 0.86rem;
  font-weight: 950;
  text-align: left;
  text-transform: none;
}

.interface-language-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.72fr) minmax(160px, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid #dce5ea;
  border-radius: 12px;
  background: #ffffff;
  color: #263946;
  font-size: 0.94rem;
  font-weight: 950;
}

.interface-language-row select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #d6e0e7;
  border-radius: 10px;
  background: #ffffff;
  color: #263946;
  font-weight: 900;
}

.language-toggle-grid,
.language-order-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.language-toggle-row,
.language-order-row {
  display: grid;
  align-items: center;
  gap: 7px;
  min-height: 48px;
  padding: 9px 10px;
  border: 1px solid #dce5ea;
  border-radius: 12px;
  background: #ffffff;
  color: #263946;
  font-size: 0.92rem;
  font-weight: 950;
}

.language-order-row span {
  color: #6b7b87;
  font-size: 0.78rem;
  font-weight: 900;
}

.language-toggle-row {
  grid-template-columns: 20px 1fr;
}

.language-toggle-row input {
  width: 20px;
  height: 20px;
  accent-color: #2f86de;
}

.language-order-row select {
  width: 100%;
  min-height: 36px;
  border: 1px solid #d6e0e7;
  border-radius: 10px;
  background: #ffffff;
  color: #263946;
  font-weight: 900;
}

.safety-note {
  margin: 4px 0;
  color: #657785;
  font-size: 0.88rem;
  line-height: 1.45;
  font-weight: 800;
  text-align: left;
}

.feedback-field {
  display: grid;
  gap: 8px;
  color: #536675;
  font-size: 0.9rem;
  font-weight: 950;
}

.feedback-field textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  border: 1px solid #dce5ea;
  border-radius: 14px;
  padding: 14px;
  background: #f8fafb;
  color: #263946;
  font-family: "Chiron GoRound TC", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.45;
}

.feedback-status {
  min-height: 22px;
  margin: 0;
  color: #657785;
  font-size: 0.9rem;
  line-height: 1.35;
  font-weight: 900;
}

.feedback-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 10px;
}

.report-issue-button {
  justify-content: center;
  text-align: center;
}

.safety-note {
  white-space: pre-line;
}

.action-row {
  width: 100%;
  min-height: 52px;
  border: 1px solid #dce5ea;
  border-radius: 12px;
  padding: 0 18px;
  background: #f8fafb;
  color: #263946;
  text-align: left;
  font-size: 1rem;
  font-weight: 950;
  box-shadow: none;
  text-shadow: none;
}

.unlock-full-version-button {
  display: inline-grid;
  place-items: center;
  justify-self: center;
  width: auto;
  min-width: 172px;
  min-height: 52px;
  padding: 7px 30px;
  border-radius: 999px;
  background: var(--ui-solid-bg);
  color: var(--ui-solid-fg);
  line-height: 1.12;
  text-align: center;
  font-size: 1.12rem;
}

.dialog-card .primary-button {
  justify-self: stretch;
  min-width: 0;
  min-height: 52px;
  border-radius: 999px;
  background: var(--ui-solid-bg);
  background-image: none;
  color: var(--ui-solid-fg);
  box-shadow: none;
  text-shadow: none;
  font-size: 1rem;
}

.dialog-card .primary-button:active,
.dialog-close:active,
.action-row:active {
  transform: translateY(1px);
  filter: none;
}

@keyframes open-cover {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.96);
    opacity: 0.18;
  }
}

@keyframes cover-book-idle-bounce {
  0%,
  70%,
  100% {
    transform: scale3d(1, 1, 1);
    filter: drop-shadow(0 28px 28px rgba(0, 0, 0, 0.2));
  }
  76% {
    transform: scale3d(1.012, 0.935, 1);
    filter: drop-shadow(0 22px 20px rgba(0, 0, 0, 0.22));
  }
  84% {
    transform: scale3d(0.994, 1.035, 1);
    filter: drop-shadow(0 31px 27px rgba(0, 0, 0, 0.19));
  }
  90% {
    transform: scale3d(1.004, 0.988, 1);
    filter: drop-shadow(0 30px 26px rgba(0, 0, 0, 0.2));
  }
  95% {
    transform: scale3d(0.998, 1.006, 1);
    filter: drop-shadow(0 28px 28px rgba(0, 0, 0, 0.2));
  }
}

@keyframes cover-book-press {
  0% {
    transform: scale3d(1, 1, 1);
    filter: drop-shadow(0 28px 28px rgba(0, 0, 0, 0.2));
  }
  58% {
    transform: scale3d(1.012, 0.92, 1);
    filter: drop-shadow(0 20px 18px rgba(0, 0, 0, 0.23));
  }
  100% {
    transform: scale3d(0.998, 1.012, 1);
    filter: drop-shadow(0 29px 26px rgba(0, 0, 0, 0.2));
  }
}

@keyframes page-bg-sweep-next {
  0% {
    opacity: 1;
    transform: translateX(100%);
  }
  82%,
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes page-bg-sweep-prev {
  0% {
    opacity: 1;
    transform: translateX(-100%);
  }
  82%,
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes page-vehicle-exit-next {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  22% {
    transform: translate3d(-7vw, -8px, 0) scale(1.015) rotate(-1deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(calc(var(--page-enter-offscreen) * -1), -2px, 0) scale(0.98) rotate(-2deg);
    opacity: 1;
  }
}

@keyframes page-vehicle-enter-next {
  0% {
    transform: translate3d(var(--page-enter-offscreen), 2px, 0) scale(0.98) rotate(2deg);
    opacity: 1;
  }
  68% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  80% {
    transform: translate3d(var(--drive-brake-left), 2px, 0) scale(1.012) rotate(-2deg);
    opacity: 1;
  }
  92% {
    transform: translate3d(var(--drive-bounce-right), -1px, 0) scale(0.998) rotate(1deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes page-vehicle-exit-prev {
  0% {
    transform: translate3d(0, 0, 0) scaleX(1) scaleY(1) rotate(0deg);
    opacity: 1;
  }
  24% {
    transform: translate3d(-9vw, -8px, 0) scaleX(1.015) scaleY(1.015) rotate(-1.2deg);
    opacity: 1;
  }
  42% {
    transform: translate3d(-6vw, -6px, 0) scaleX(-1) scaleY(1.015) rotate(1deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--page-enter-offscreen), -2px, 0) scaleX(-0.98) scaleY(0.98) rotate(2deg);
    opacity: 1;
  }
}

@keyframes page-vehicle-enter-prev {
  0% {
    transform: translate3d(var(--page-enter-offscreen), 2px, 0) scaleX(0.98) scaleY(0.98) rotate(2deg);
    opacity: 1;
  }
  64% {
    transform: translate3d(0, 0, 0) scaleX(1) scaleY(1) rotate(0deg);
    opacity: 1;
  }
  78% {
    transform: translate3d(var(--drive-brake-left), 2px, 0) scaleX(1.012) scaleY(1.012) rotate(-2deg);
    opacity: 1;
  }
  90% {
    transform: translate3d(var(--drive-bounce-right), -1px, 0) scaleX(0.998) scaleY(0.998) rotate(1deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) scaleX(1) scaleY(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes page-vehicle-layout-exit-next {
  0% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  22% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(-7vw, -8px, 0) scale(1.015) rotate(-1deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(calc(var(--page-enter-offscreen) * -1), -2px, 0) scale(0.98) rotate(-2deg);
    opacity: 1;
  }
}

@keyframes page-vehicle-layout-enter-next {
  0% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(var(--page-enter-offscreen), 2px, 0) scale(0.98) rotate(2deg);
    opacity: 1;
  }
  68% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  80% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(var(--drive-brake-left), 2px, 0) scale(1.012) rotate(-2deg);
    opacity: 1;
  }
  92% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(var(--drive-bounce-right), -1px, 0) scale(0.998) rotate(1deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes page-vehicle-layout-exit-prev {
  0% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(0, 0, 0) scaleX(1) scaleY(1) rotate(0deg);
    opacity: 1;
  }
  24% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(-9vw, -8px, 0) scaleX(1.015) scaleY(1.015) rotate(-1.2deg);
    opacity: 1;
  }
  42% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(-6vw, -6px, 0) scaleX(-1) scaleY(1.015) rotate(1deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(var(--page-enter-offscreen), -2px, 0) scaleX(-0.98) scaleY(0.98) rotate(2deg);
    opacity: 1;
  }
}

@keyframes page-vehicle-layout-enter-prev {
  0% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(var(--page-enter-offscreen), 2px, 0) scaleX(0.98) scaleY(0.98) rotate(2deg);
    opacity: 1;
  }
  64% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(0, 0, 0) scaleX(1) scaleY(1) rotate(0deg);
    opacity: 1;
  }
  78% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(var(--drive-brake-left), 2px, 0) scaleX(1.012) scaleY(1.012) rotate(-2deg);
    opacity: 1;
  }
  90% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(var(--drive-bounce-right), -1px, 0) scaleX(0.998) scaleY(0.998) rotate(1deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(0, 0, 0) scaleX(1) scaleY(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes helicopter-page-exit-next {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  22% {
    transform: translate3d(-8px, -22px, 0) rotate(-7deg) scale(1.012);
  }
  100% {
    transform: translate3d(-18px, -34px, 0) rotate(-9deg) scale(0.99);
  }
}

@keyframes helicopter-page-enter-next {
  0% {
    transform: translate3d(20px, -34px, 0) rotate(-8deg) scale(0.99);
  }
  62% {
    transform: translate3d(0, -18px, 0) rotate(-3deg) scale(1.006);
  }
  82% {
    transform: translate3d(var(--drive-brake-left), -10px, 0) rotate(3deg) scale(1.008);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes helicopter-page-exit-prev {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  28% {
    transform: translate3d(8px, -24px, 0) rotate(-7deg) scale(1.012);
  }
  100% {
    transform: translate3d(18px, -36px, 0) rotate(-9deg) scale(0.99);
  }
}

@keyframes helicopter-page-enter-prev {
  0% {
    transform: translate3d(-20px, -34px, 0) rotate(-8deg) scale(0.99);
  }
  60% {
    transform: translate3d(0, -18px, 0) rotate(-3deg) scale(1.006);
  }
  78% {
    transform: translate3d(var(--drive-brake-left), -10px, 0) rotate(3deg) scale(1.008);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes page-copy-exit-next {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-36vw);
    opacity: 0;
  }
}

@keyframes page-copy-enter-next {
  0% {
    transform: translateX(38vw);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes page-copy-exit-prev {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(36vw);
    opacity: 0;
  }
}

@keyframes page-copy-enter-prev {
  0% {
    transform: translateX(-38vw);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes page-wheel-roll {
  0% {
    transform: rotate(0deg);
  }
  58% {
    transform: rotate(-1080deg);
  }
  72% {
    transform: rotate(-1320deg);
  }
  82%,
  100% {
    transform: rotate(-1440deg);
  }
}

@keyframes page-body-brake {
  0%,
  62%,
  100% {
    transform: translate(var(--part-layout-x, var(--layout-x, 0)), var(--part-layout-y, var(--layout-y, 0))) scale(var(--part-layout-scale, var(--layout-scale, 1))) translateY(0) scaleX(1) scaleY(1) rotate(0deg);
  }
  78% {
    transform: translate(var(--part-layout-x, var(--layout-x, 0)), var(--part-layout-y, var(--layout-y, 0))) scale(var(--part-layout-scale, var(--layout-scale, 1))) translateY(var(--body-drop)) scaleX(var(--body-squash-x)) scaleY(var(--body-squash-y)) rotate(-1.4deg);
  }
  90% {
    transform: translate(var(--part-layout-x, var(--layout-x, 0)), var(--part-layout-y, var(--layout-y, 0))) scale(var(--part-layout-scale, var(--layout-scale, 1))) translateY(var(--body-rebound)) scaleX(var(--body-stretch-x)) scaleY(var(--body-stretch-y)) rotate(0.8deg);
  }
}

@keyframes toc-drive-a {
  0% {
    transform: translate3d(0, 0, 0) rotate(-1deg);
  }
  45% {
    transform: translate3d(calc(var(--toc-dx) * 0.58), calc(var(--toc-dy) * -0.35), 0) rotate(2deg);
  }
  100% {
    transform: translate3d(var(--toc-dx), var(--toc-dy), 0) rotate(-2deg);
  }
}

@keyframes toc-drive-b {
  0% {
    transform: translate3d(0, 0, 0) rotate(1deg);
  }
  50% {
    transform: translate3d(calc(var(--toc-dx) * 0.45), calc(var(--toc-dy) * 0.72), 0) rotate(-2deg);
  }
  100% {
    transform: translate3d(var(--toc-dx), var(--toc-dy), 0) rotate(2deg);
  }
}

@keyframes toc-drive-c {
  0% {
    transform: translate3d(0, 0, 0) rotate(-2deg);
  }
  35% {
    transform: translate3d(calc(var(--toc-dx) * 0.34), calc(var(--toc-dy) * 0.28), 0) rotate(1deg);
  }
  75% {
    transform: translate3d(calc(var(--toc-dx) * 0.78), calc(var(--toc-dy) * -0.2), 0) rotate(-1deg);
  }
  100% {
    transform: translate3d(var(--toc-dx), var(--toc-dy), 0) rotate(2deg);
  }
}

@keyframes toc-float {
  0% {
    transform: translate3d(0, 0, 0) rotate(-3deg);
  }
  50% {
    transform: translate3d(calc(var(--toc-dx) * 0.48), calc(var(--toc-dy) * 0.58 - 16px), 0) rotate(4deg);
  }
  100% {
    transform: translate3d(var(--toc-dx), var(--toc-dy), 0) rotate(-2deg);
  }
}

@keyframes toc-game-drift {
  0% {
    transform: translate3d(calc(-50% - 44px), 0, 0) rotate(-1.5deg);
  }
  100% {
    transform: translate3d(calc(-50% + 44px), -8px, 0) rotate(1.5deg);
  }
}

@keyframes toc-game-float {
  0% {
    transform: translate3d(0, 0, 0) rotate(-1.5deg);
  }
  45% {
    transform: translate3d(-10px, -7px, 0) rotate(2deg);
  }
  100% {
    transform: translate3d(9px, 5px, 0) rotate(-1deg);
  }
}

@keyframes activity-icon-bob {
  0% {
    transform: translate3d(0, 0, 0) rotate(-1deg);
  }

  38% {
    transform: translate3d(2px, -9px, 0) rotate(1.6deg);
  }

  74% {
    transform: translate3d(-3px, 2px, 0) rotate(-0.8deg);
  }

  100% {
    transform: translate3d(1px, -4px, 0) rotate(0.6deg);
  }
}

@keyframes activity-icon-sway {
  0% {
    transform: translate3d(-2px, 1px, 0) rotate(-2.4deg);
  }

  48% {
    transform: translate3d(8px, -3px, 0) rotate(2.8deg);
  }

  100% {
    transform: translate3d(-4px, 4px, 0) rotate(-1.2deg);
  }
}

@keyframes activity-icon-sway-reverse {
  0% {
    transform: translate3d(4px, 2px, 0) rotate(2.2deg);
  }

  52% {
    transform: translate3d(-8px, -4px, 0) rotate(-2.8deg);
  }

  100% {
    transform: translate3d(3px, 5px, 0) rotate(1deg);
  }
}

@keyframes activity-icon-float-soft {
  0% {
    transform: translate3d(0, 0, 0) rotate(0.8deg);
  }

  35% {
    transform: translate3d(-5px, -6px, 0) rotate(-1.4deg);
  }

  68% {
    transform: translate3d(4px, -2px, 0) rotate(1.6deg);
  }

  100% {
    transform: translate3d(2px, 5px, 0) rotate(-0.6deg);
  }
}

@keyframes activity-icon-tug {
  0% {
    transform: translate3d(-4px, 0, 0) rotate(-1.4deg) scale(1);
  }

  42% {
    transform: translate3d(7px, -2px, 0) rotate(1.2deg) scale(1.015, 0.99);
  }

  58% {
    transform: translate3d(2px, 1px, 0) rotate(-0.8deg) scale(0.99, 1.012);
  }

  100% {
    transform: translate3d(-6px, 3px, 0) rotate(0.8deg) scale(1);
  }
}

@keyframes activity-icon-drift {
  0% {
    transform: translate3d(2px, 2px, 0) rotate(-1.8deg);
  }

  46% {
    transform: translate3d(-6px, -5px, 0) rotate(1.1deg);
  }

  100% {
    transform: translate3d(7px, -1px, 0) rotate(-0.4deg);
  }
}

@keyframes toc-game-enter {
  0% {
    transform: translateY(0) scale(1);
  }
  38% {
    transform: translateY(-22px) scale(1.08, 0.94);
  }
  64% {
    transform: translateY(5px) scale(0.94, 1.08);
  }
  100% {
    transform: translateY(-2px) scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toc-vehicle-visual {
    animation: none;
  }

  .book-screen.is-game-directory-page .activity-game-card img,
  .toc-game-button,
  .toc-game-button.is-entering .toc-game-icon {
    animation: none;
  }
}

.settings-legal-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.settings-legal-links .action-row {
  min-width: 0;
  text-align: left;
  text-decoration: none;
}

@media (max-width: 520px) {
  .settings-legal-links {
    grid-template-columns: 1fr;
  }
}

/* Return-brake timing rule:
   right-side return keeps its original real-time speed; only the braking span is 30% longer.
   With the drive timeline, this makes the full animation 1.0756x longer.
   Pre-brake keyframes use old% / 1.0756. Brake keyframes use (74.8 + (old% - 74.8) * 1.3) / 1.0756.
   Keep wheel stop and body stop on the same mapped keyframes so the final still frame never jumps. */
@keyframes car-drive-loop {
  0% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  8.7% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(0, -12px, 0) scale(1.015) rotate(-1.5deg);
    opacity: 1;
  }
  17.4% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(-5vw, 0, 0) scale(1.02) rotate(0deg);
    opacity: 1;
  }
  39.1% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(-118vw, -2px, 0) scale(0.98) rotate(-1deg);
    opacity: 1;
  }
  40.3% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(-126vw, -2px, 0) scale(0.98) rotate(-1deg);
    opacity: 0;
  }
  41.1% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(122vw, 2px, 0) scale(0.98) rotate(1deg);
    opacity: 0;
  }
  43.6% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(122vw, 2px, 0) scale(0.98) rotate(1deg);
    opacity: 1;
  }
  69.5% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  78.3% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(var(--drive-brake-left), 2px, 0) scale(1.012) rotate(-2deg);
    opacity: 1;
  }
  89.1% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(var(--drive-bounce-right), -1px, 0) scale(0.998) rotate(1deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes car-body-arch {
  0%,
  100% {
    transform: translate(var(--part-layout-x, var(--layout-x, 0)), var(--part-layout-y, var(--layout-y, 0))) scale(var(--part-layout-scale, var(--layout-scale, 1))) translateY(0) scaleX(1) scaleY(1) rotate(0deg);
  }
  8.7% {
    transform: translate(var(--part-layout-x, var(--layout-x, 0)), var(--part-layout-y, var(--layout-y, 0))) scale(var(--part-layout-scale, var(--layout-scale, 1))) translateY(var(--body-lift)) scaleX(var(--body-stretch-x)) scaleY(var(--body-stretch-y)) rotate(-1deg);
  }
  18.5% {
    transform: translate(var(--part-layout-x, var(--layout-x, 0)), var(--part-layout-y, var(--layout-y, 0))) scale(var(--part-layout-scale, var(--layout-scale, 1))) translateY(2px) scaleX(0.992) scaleY(1.018) rotate(0.5deg);
  }
  37% {
    transform: translate(var(--part-layout-x, var(--layout-x, 0)), var(--part-layout-y, var(--layout-y, 0))) scale(var(--part-layout-scale, var(--layout-scale, 1))) translateY(-4px) scaleX(1.006) scaleY(0.995) rotate(-0.6deg);
  }
  67.9% {
    transform: translate(var(--part-layout-x, var(--layout-x, 0)), var(--part-layout-y, var(--layout-y, 0))) scale(var(--part-layout-scale, var(--layout-scale, 1))) translateY(-3px) scaleX(1.006) scaleY(0.996) rotate(0.4deg);
  }
  78.3% {
    transform: translate(var(--part-layout-x, var(--layout-x, 0)), var(--part-layout-y, var(--layout-y, 0))) scale(var(--part-layout-scale, var(--layout-scale, 1))) translateY(var(--body-drop)) scaleX(var(--body-squash-x)) scaleY(var(--body-squash-y)) rotate(-2deg);
  }
  89.1% {
    transform: translate(var(--part-layout-x, var(--layout-x, 0)), var(--part-layout-y, var(--layout-y, 0))) scale(var(--part-layout-scale, var(--layout-scale, 1))) translateY(var(--body-rebound)) scaleX(var(--body-stretch-x)) scaleY(var(--body-stretch-y)) rotate(1deg);
  }
}

@keyframes speech-listening-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--page-panel) 82%, transparent);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--page-panel) 0%, transparent);
  }
}

@keyframes police-speech-sweep {
  0% {
    transform: translateX(-105%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes speech-control-fade-out {
  from {
    opacity: 1;
    filter: saturate(1) brightness(1);
  }
  to {
    opacity: 0;
    filter: saturate(0.82) brightness(1.08);
  }
}

@keyframes speech-control-fade-in {
  from {
    opacity: 0;
    filter: saturate(0.82) brightness(1.08);
  }
  to {
    opacity: 1;
    filter: saturate(1) brightness(1);
  }
}

@keyframes speech-button-wrong {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-7px);
  }
  55% {
    transform: translateX(7px);
  }
  78% {
    transform: translateX(-4px);
  }
}

@keyframes speech-listening-words {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.88;
    filter: brightness(1.08);
  }
}

@keyframes speech-char-pop {
  0% {
    transform: translateY(0) scale(1);
  }
  48% {
    transform: translateY(-0.18em) scale(1.16);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes speech-word-correct {
  0% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.08) translateY(-5px);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes speech-word-wrong {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-6px);
  }
  55% {
    transform: translateX(6px);
  }
  78% {
    transform: translateX(-3px);
  }
}

@keyframes wheel-spin {
  0% {
    transform: rotate(0deg);
  }
  8.7% {
    transform: rotate(-240deg);
  }
  40.3% {
    transform: rotate(var(--wheel-fast));
  }
  41.1% {
    transform: rotate(var(--wheel-fast));
  }
  64.5% {
    transform: rotate(var(--wheel-cruise));
  }
  69.5% {
    transform: rotate(var(--wheel-pre-brake));
  }
  100% {
    transform: rotate(var(--wheel-end));
  }
}

@keyframes toc-wheel-roll {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes split-drive-brake-loop {
  0% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  8.7% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(0, -12px, 0) scale(1.015) rotate(-1.5deg);
  }
  17.4% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(-5vw, 0, 0) scale(1.02) rotate(0deg);
  }
  39.1% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(-118vw, -2px, 0) scale(0.98) rotate(-1deg);
    opacity: 1;
  }
  40.3% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(-126vw, -2px, 0) scale(0.98) rotate(-1deg);
    opacity: 0;
  }
  41.1% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(122vw, 2px, 0) scale(0.98) rotate(1deg);
    opacity: 0;
  }
  43.6% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(122vw, 2px, 0) scale(0.98) rotate(1deg);
    opacity: 1;
  }
  69.5% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  78.3% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(var(--drive-brake-left), 2px, 0) scale(1.012) rotate(-2deg);
  }
  89.1% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(var(--drive-bounce-right), -1px, 0) scale(0.998) rotate(1deg);
  }
  100% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes split-body-brake {
  0%,
  100% {
    transform: translate(var(--part-layout-x, 0), var(--part-layout-y, 0)) scale(var(--part-layout-scale, 1)) translateY(0) scaleX(1) scaleY(1) rotate(0deg);
  }
  8.7% {
    transform: translate(var(--part-layout-x, 0), var(--part-layout-y, 0)) scale(var(--part-layout-scale, 1)) translateY(var(--body-lift)) scaleX(var(--body-stretch-x)) scaleY(var(--body-stretch-y)) rotate(-1deg);
  }
  18.5% {
    transform: translate(var(--part-layout-x, 0), var(--part-layout-y, 0)) scale(var(--part-layout-scale, 1)) translateY(2px) scaleX(0.992) scaleY(1.018) rotate(0.5deg);
  }
  37% {
    transform: translate(var(--part-layout-x, 0), var(--part-layout-y, 0)) scale(var(--part-layout-scale, 1)) translateY(-4px) scaleX(1.006) scaleY(0.995) rotate(-0.6deg);
  }
  67.9% {
    transform: translate(var(--part-layout-x, 0), var(--part-layout-y, 0)) scale(var(--part-layout-scale, 1)) translateY(-3px) scaleX(1.006) scaleY(0.996) rotate(0.4deg);
  }
  78.3% {
    transform: translate(var(--part-layout-x, 0), var(--part-layout-y, 0)) scale(var(--part-layout-scale, 1)) translateY(var(--body-drop)) scaleX(var(--body-squash-x)) scaleY(var(--body-squash-y)) rotate(-2deg);
  }
  89.1% {
    transform: translate(var(--part-layout-x, 0), var(--part-layout-y, 0)) scale(var(--part-layout-scale, 1)) translateY(var(--body-rebound)) scaleX(var(--body-stretch-x)) scaleY(var(--body-stretch-y)) rotate(1deg);
  }
}

@keyframes train-runner-return {
  0%,
  46.4% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
  47.4% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(118vw, 1px, 0) scale(0.995);
    opacity: 0;
  }
  49.2% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(118vw, 1px, 0) scale(0.995);
    opacity: 1;
  }
  57.6% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
  65.9% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(var(--drive-brake-left), 2px, 0) scale(1.006) rotate(-1deg);
    opacity: 1;
  }
  70.9% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(var(--drive-bounce-right), 0, 0) scale(0.998) rotate(0.5deg);
    opacity: 1;
  }
  75%,
  100% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(0, 0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes train-consist-depart {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
  10.4% {
    transform: translate3d(-4vw, 0, 0) scale(1.002);
  }
  40.6% {
    transform: translate3d(-255vw, -1px, 0) scale(0.995);
    opacity: 1;
  }
  45.3% {
    transform: translate3d(-285vw, -1px, 0) scale(0.995);
    opacity: 1;
  }
  46.4% {
    transform: translate3d(-285vw, -1px, 0) scale(0.995);
    opacity: 0;
  }
  48.2% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0;
  }
  50%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes train-extra-carriages {
  0% {
    opacity: 0;
  }
  5.8%,
  45.3% {
    opacity: 1;
  }
  48.2%,
  100% {
    opacity: 0;
  }
}

@keyframes wheel-spin-brake {
  0% {
    transform: rotate(0deg);
  }
  9.4% {
    transform: rotate(-240deg);
  }
  43.3% {
    transform: rotate(var(--wheel-fast));
  }
  44.2% {
    transform: rotate(var(--wheel-fast));
  }
  69.4% {
    transform: rotate(var(--wheel-cruise));
  }
  74.8% {
    transform: rotate(var(--wheel-pre-brake));
  }
  82%,
  100% {
    transform: rotate(var(--wheel-end));
  }
}

@keyframes train-wheel-spin-brake {
  0% {
    transform: rotate(0deg);
  }
  9.4% {
    transform: rotate(-240deg);
  }
  43.3% {
    transform: rotate(var(--wheel-fast));
  }
  44.2% {
    transform: rotate(var(--wheel-fast));
  }
  62% {
    transform: rotate(var(--wheel-cruise));
  }
  70.9% {
    transform: rotate(var(--wheel-pre-brake));
  }
  75%,
  100% {
    transform: rotate(var(--wheel-end));
  }
}

@keyframes vehicle-bounce {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  18% {
    transform: translate3d(0, -18px, 0) rotate(-1.4deg) scale(1.02);
  }
  42% {
    transform: translate3d(5vw, -4px, 0) rotate(1deg) scale(1.01);
  }
  70% {
    transform: translate3d(-2vw, 2px, 0) rotate(-0.6deg) scale(0.995);
  }
}

@keyframes train-drive-loop {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
  8% {
    transform: translate3d(0, -6px, 0) scale(1.006);
  }
  16% {
    transform: translate3d(-5vw, -1px, 0) scale(1.008);
    opacity: 1;
  }
  36% {
    transform: translate3d(-118vw, 0, 0) scale(0.99);
    opacity: 1;
  }
  37% {
    transform: translate3d(-126vw, 0, 0) scale(0.99);
    opacity: 0;
  }
  38% {
    transform: translate3d(122vw, 0, 0) scale(0.99);
    opacity: 0;
  }
  41% {
    transform: translate3d(122vw, 0, 0) scale(0.99);
    opacity: 1;
  }
  66% {
    transform: translate3d(12vw, 0, 0) scale(1.004);
    opacity: 1;
  }
  72% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
  80% {
    transform: translate3d(-3vw, 1px, 0) scale(1.006);
  }
  90% {
    transform: translate3d(1vw, 0, 0) scale(0.998);
  }
  96% {
    transform: translate3d(-0.25vw, 0, 0) scale(1.001);
  }
  98% {
    transform: translate3d(0.08vw, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes bicycle-ride-loop {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  8% {
    transform: translate3d(0, -10px, 0) rotate(-1.2deg) scale(1.01);
  }
  24% {
    transform: translate3d(-10vw, 0, 0) rotate(1deg) scale(1.005);
  }
  36% {
    transform: translate3d(-118vw, -2px, 0) rotate(-1deg) scale(0.99);
    opacity: 1;
  }
  37% {
    transform: translate3d(-126vw, -2px, 0) rotate(-1deg) scale(0.99);
    opacity: 0;
  }
  38% {
    transform: translate3d(122vw, 0, 0) rotate(1deg) scale(0.99);
    opacity: 0;
  }
  41% {
    transform: translate3d(122vw, 0, 0) rotate(1deg) scale(0.99);
    opacity: 1;
  }
  61.4% {
    transform: translate3d(12vw, 0, 0) rotate(0.6deg) scale(1.004);
    opacity: 1;
  }
  66.9% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  76.6% {
    transform: translate3d(-3.2vw, 1px, 0) rotate(-1.2deg) scale(1.008);
  }
  88.7% {
    transform: translate3d(1.1vw, -1px, 0) rotate(0.75deg) scale(0.998);
  }
  95.9% {
    transform: translate3d(-0.28vw, 0, 0) rotate(-0.2deg) scale(1.001);
  }
  98.4% {
    transform: translate3d(0.08vw, 0, 0) rotate(0.06deg) scale(1);
  }
}

@keyframes airplane-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  12% {
    transform: translate3d(0, -18px, 0) rotate(-1.1deg) scale(1.01);
  }
  28% {
    transform: translate3d(0, 12px, 0) rotate(1deg) scale(0.998);
  }
  44% {
    transform: translate3d(0, -15px, 0) rotate(-0.8deg) scale(1.008);
  }
  62% {
    transform: translate3d(0, 9px, 0) rotate(0.6deg) scale(1);
  }
  80% {
    transform: translate3d(0, -7px, 0) rotate(-0.35deg) scale(1.004);
  }
}

@keyframes fly-cloud-back {
  0% {
    opacity: 0;
    transform: translate3d(-95%, -50%, 0) scale(0.9);
  }
  14%,
  82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(320%, -50%, 0) scale(0.9);
  }
}

@keyframes fly-cloud-front {
  0% {
    opacity: 0;
    transform: translate3d(-120%, -50%, 0) scale(1);
  }
  12%,
  82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(360%, -50%, 0) scale(1);
  }
}

@keyframes boat-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  12% {
    transform: translate3d(0, -12px, 0) rotate(-0.8deg) scale(1.006);
  }
  28% {
    transform: translate3d(0, 9px, 0) rotate(0.65deg) scale(0.998);
  }
  46% {
    transform: translate3d(0, -10px, 0) rotate(-0.55deg) scale(1.004);
  }
  64% {
    transform: translate3d(0, 7px, 0) rotate(0.42deg) scale(1);
  }
  82% {
    transform: translate3d(0, -5px, 0) rotate(-0.25deg) scale(1.002);
  }
}

@keyframes sail-wave-back {
  0% {
    opacity: 0;
    transform: translate3d(-100%, -50%, 0) scale(0.86);
  }
  12%,
  84% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(330%, -50%, 0) scale(0.86);
  }
}

@keyframes sail-wave-front {
  0% {
    opacity: 0;
    transform: translate3d(-120%, -50%, 0) scale(1);
  }
  10%,
  84% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(360%, -50%, 0) scale(1);
  }
}

@keyframes seagull-fly {
  0% {
    opacity: 0;
    transform: translate3d(-105%, 0, 0) scale(0.62) rotate(-4deg);
  }
  10%,
  88% {
    opacity: 1;
  }
  52% {
    transform: translate3d(150%, -12px, 0) scale(0.62) rotate(3deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(430%, 4px, 0) scale(0.62) rotate(-2deg);
  }
}

@keyframes helicopter-flight-loop {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  9.3% {
    transform: translate3d(0, -40px, 0) rotate(-1deg) scale(1.006);
  }
  20.5% {
    transform: translate3d(-3vw, -58px, 0) rotate(-7deg) scale(1.01);
  }
  35.3% {
    opacity: 1;
    transform: translate3d(-125vw, -64px, 0) rotate(-8deg) scale(0.985);
  }
  36.3% {
    opacity: 0;
    transform: translate3d(-135vw, -64px, 0) rotate(-8deg) scale(0.985);
  }
  37.2% {
    opacity: 0;
    transform: translate3d(125vw, -58px, 0) rotate(-5deg) scale(0.985);
  }
  40% {
    opacity: 1;
    transform: translate3d(125vw, -58px, 0) rotate(-5deg) scale(0.985);
  }
  66.9% {
    transform: translate3d(0, -44px, 0) rotate(-2deg) scale(1);
  }
  79% {
    transform: translate3d(var(--drive-brake-left), -32px, 0) rotate(3deg) scale(1.006);
  }
  91.1% {
    transform: translate3d(var(--drive-bounce-right), -14px, 0) rotate(-1deg) scale(1.002);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes helicopter-tail-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes seagull-fly-low {
  0% {
    opacity: 0;
    transform: translate3d(-120%, 0, 0) scale(0.52) rotate(2deg);
  }
  12%,
  82% {
    opacity: 1;
  }
  50% {
    transform: translate3d(165%, 10px, 0) scale(0.52) rotate(-3deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(455%, -4px, 0) scale(0.52) rotate(2deg);
  }
}

@keyframes wheel-spin-small {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-1080deg);
  }
}

@keyframes memory-achievement-layer {
  0% {
    opacity: 0;
  }

  14%,
  78% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes memory-achievement-glow {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }

  28% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.8);
  }
}

@keyframes memory-achievement-ring {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }

  24% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.12);
  }
}

@keyframes memory-achievement-badge {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.15) rotate(-10deg);
  }

  38% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12) rotate(4deg);
  }

  72% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.96) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.78) rotate(0deg);
  }
}

@keyframes memory-confetti-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
  }

  16% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.35) rotate(18deg);
  }

  44% {
    opacity: 1;
    transform: translate(calc(-50% + (var(--burst-x) * 0.62)), calc(-50% + (var(--burst-y) * 0.62))) scale(0.98) rotate(calc(var(--burst-rotate) * 0.55));
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(0.32) rotate(var(--burst-rotate));
  }
}

@keyframes link-yarn-flow {
  from {
    background-position-x: 0;
  }

  to {
    background-position-x: 46px;
  }
}

@keyframes link-yarn-correct {
  0% {
    opacity: 1;
    height: clamp(18px, 2.6vw, 30px);
  }

  42% {
    opacity: 1;
    height: clamp(24px, 3.3vw, 38px);
  }

  100% {
    opacity: 0;
    height: clamp(12px, 1.8vw, 20px);
  }
}

@keyframes link-yarn-wrong {
  0% {
    opacity: 0.95;
    background-position-x: 0;
  }

  100% {
    opacity: 0;
    background-position-x: -42px;
  }
}

@keyframes link-card-deal-in {
  0% {
    opacity: 0;
    transform: rotate(var(--card-rot)) translateY(18px) scale(0.92);
  }

  70% {
    opacity: 1;
    transform: rotate(var(--card-rot)) translateY(-3px) scale(1.025);
  }

  100% {
    opacity: 1;
    transform: rotate(var(--card-rot)) translateY(0) scale(1);
  }
}

@keyframes link-card-correct {
  0% {
    transform: rotate(var(--card-rot)) scale(1);
  }

  34% {
    transform: rotate(var(--card-rot)) scale(1.18);
  }

  62% {
    transform: rotate(var(--card-rot)) scale(1.06);
  }

  100% {
    transform: rotate(var(--card-rot)) scale(0.96);
  }
}

@keyframes link-card-target-wiggle {
  0%,
  100% {
    transform: rotate(var(--card-rot)) scale(1.04);
  }

  30% {
    transform: rotate(calc(var(--card-rot) - 1.2deg)) scale(1.07);
  }

  68% {
    transform: rotate(calc(var(--card-rot) + 1.2deg)) scale(1.06);
  }
}

@keyframes link-card-wrong {
  0%,
  100% {
    transform: rotate(var(--card-rot)) translateX(0);
  }

  30% {
    transform: rotate(var(--card-rot)) translateX(-8px);
  }

  64% {
    transform: rotate(var(--card-rot)) translateX(8px);
  }
}

@keyframes link-card-spark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }

  26% {
    opacity: 1;
    transform: translate(calc(-50% + var(--spark-x) * 0.5), calc(-50% + var(--spark-y) * 0.5)) scale(1.35);
  }

  58% {
    opacity: 1;
    transform: translate(calc(-50% + var(--spark-x) * 0.88), calc(-50% + var(--spark-y) * 0.88)) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(0.52);
  }
}

@keyframes link-card-success-glow {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.22);
  }

  32% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.86);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.22);
  }
}

@keyframes link-card-success-ring {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.22);
  }

  28% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes pull-fireworks-layer {
  0%,
  100% {
    opacity: 0;
  }

  12%,
  72% {
    opacity: 1;
  }
}

@keyframes pull-firework-glow {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
  }

  30% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.72);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes pull-firework-ring {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.18) rotate(0deg);
  }

  28% {
    opacity: 0.86;
  }

  64% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.94) rotate(18deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1) rotate(26deg);
  }
}

@keyframes pull-firework-stitch {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--spark-rotate)) translateY(0) scaleY(0.08);
  }

  22% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--spark-rotate)) translateY(-24%) scaleY(1.05);
  }

  58% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--spark-rotate)) translateY(-38%) scaleY(0.9);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--spark-rotate)) translateY(-48%) scaleY(0.22);
  }
}

@keyframes star-badge-pop {
  0% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.18) rotate(-2deg);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes difficulty-indicator-bounce {
  0% {
    transform:
      translateX(calc(var(--difficulty-previous-index) * 100%))
      scaleX(1);
  }

  42% {
    transform:
      translateX(calc(var(--difficulty-active-index) * 100% + var(--difficulty-move-direction) * 12px))
      scaleX(1.04);
  }

  62% {
    transform:
      translateX(calc(var(--difficulty-active-index) * 100% - var(--difficulty-move-direction) * 6px))
      scaleX(0.982);
  }

  82% {
    transform:
      translateX(calc(var(--difficulty-active-index) * 100% + var(--difficulty-move-direction) * 2px))
      scaleX(1.008);
  }

  100% {
    transform:
      translateX(calc(var(--difficulty-active-index) * 100%))
      scaleX(1);
  }
}

@keyframes parking-slot-pop {
  0% {
    transform: scale(1);
  }

  44% {
    transform: scale(1.035);
  }

  72% {
    transform: scale(0.992);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes parking-vehicle-parked {
  0% {
    transform: translate(var(--parking-drag-x), var(--parking-drag-y)) scale(1) rotate(0deg);
  }

  42% {
    transform: translate(var(--parking-drag-x), var(--parking-drag-y)) scale(1.035, 0.982) rotate(-1.2deg);
  }

  72% {
    transform: translate(var(--parking-drag-x), var(--parking-drag-y)) scale(0.994, 1.012) rotate(0.8deg);
  }

  100% {
    transform: translate(var(--parking-drag-x), var(--parking-drag-y)) scale(1) rotate(0deg);
  }
}

@keyframes parking-vehicle-enter-brake {
  0% {
    transform: translate(calc(var(--parking-drag-x) + 68vw), var(--parking-drag-y)) scale(1);
  }

  58% {
    transform: translate(calc(var(--parking-drag-x) - 3.2%), var(--parking-drag-y)) scale(1.02, 0.985);
  }

  78% {
    transform: translate(calc(var(--parking-drag-x) + 1.1%), var(--parking-drag-y)) scale(0.995, 1.012);
  }

  100% {
    transform: translate(var(--parking-drag-x), var(--parking-drag-y)) scale(1);
  }
}

@keyframes parking-vehicle-exit-left {
  0% {
    transform: translate(var(--parking-drag-x), var(--parking-drag-y)) scale(1) rotate(0deg);
    opacity: 1;
  }

  18% {
    transform: translate(calc(var(--parking-drag-x) - 2.6vw), calc(var(--parking-drag-y) + 1px)) scale(1.012, 0.992) rotate(-0.8deg);
    opacity: 1;
  }

  100% {
    transform: translate(calc(var(--parking-drag-x) - 82vw), calc(var(--parking-drag-y) + 1px)) scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes parking-vehicle-attention {
  0%,
  100% {
    transform: translate(var(--parking-drag-x), var(--parking-drag-y)) scale(1);
  }

  45% {
    transform: translate(var(--parking-drag-x), calc(var(--parking-drag-y) - 4%)) scale(1.035);
  }
}

@keyframes parking-wrong-shake {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  22% {
    transform: translate3d(-10px, 0, 0) rotate(-1.4deg);
  }

  48% {
    transform: translate3d(9px, 0, 0) rotate(1.2deg);
  }

  72% {
    transform: translate3d(-5px, 0, 0) rotate(-0.7deg);
  }
}

@keyframes find-correct-pop {
  0% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.08) rotate(-1deg);
  }

  72% {
    transform: scale(0.98) rotate(0.6deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes find-wrong-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  24% {
    transform: translateX(-8px) rotate(-1deg);
  }

  52% {
    transform: translateX(8px) rotate(1deg);
  }

  76% {
    transform: translateX(-4px) rotate(-0.4deg);
  }
}

@keyframes find-feedback-correct {
  0% {
    opacity: 0;
    transform: scale(0.18) rotate(-12deg);
  }

  34% {
    opacity: 1;
    transform: scale(1.16) rotate(5deg);
  }

  68% {
    opacity: 1;
    transform: scale(0.96) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.82) rotate(0deg);
  }
}

@keyframes find-feedback-wrong {
  0% {
    opacity: 0;
    transform: scale(0.22) rotate(-10deg);
  }

  24% {
    opacity: 1;
    transform: scale(1.06) rotate(-5deg);
  }

  44% {
    opacity: 1;
    transform: scale(1) rotate(5deg);
  }

  66% {
    opacity: 1;
    transform: scale(0.98) rotate(-2deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.84) rotate(0deg);
  }
}

@keyframes sound-button-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.06);
    filter: brightness(1.06);
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .cover-book {
    width: min(48vw, 430px, 78dvh);
    height: auto;
    min-height: 0;
  }

  .word-panel h2 {
    font-size: clamp(3rem, 10vw, 5rem);
  }

  .word-panel p {
    font-size: clamp(1.35rem, 3.5vw, 2.2rem);
  }

  .vehicle-card {
    width: min(72vw, 720px, 75dvh, 480px);
    height: auto;
    aspect-ratio: 3 / 2;
    min-height: 0;
  }

  .vehicle-stage {
    padding: 0 clamp(74px, 11vw, 120px);
  }

  .activity-menu-page {
    padding: max(56px, calc(env(safe-area-inset-top) + 48px)) max(80px, calc(env(safe-area-inset-right) + 68px)) max(18px, env(safe-area-inset-bottom)) max(80px, calc(env(safe-area-inset-left) + 68px));
  }

  .activity-menu-card {
    gap: 10px;
    padding: 12px;
    border-radius: 20px;
  }

  .activity-game-card {
    grid-template-rows: minmax(58px, 1fr) auto auto;
    min-height: 128px;
    padding: 8px;
  }

  .activity-game-card img {
    max-height: 62px;
  }

  .activity-game-text {
    display: none;
  }

  .activity-back-button {
    top: max(58px, calc(env(safe-area-inset-top) + 50px));
    min-height: 36px;
    padding: 0 12px;
    font-size: 0.88rem;
  }

  .find-game-page {
    padding: max(58px, calc(env(safe-area-inset-top) + 48px)) max(96px, calc(env(safe-area-inset-right) + 86px)) max(84px, calc(env(safe-area-inset-bottom) + 70px)) max(96px, calc(env(safe-area-inset-left) + 86px));
  }

  .find-game-card {
    gap: 10px;
  }

  .find-game-prompt {
    font-size: clamp(1.15rem, 3.2vw, 1.8rem);
    padding: 8px 20px;
  }

  .find-game-options {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(8px, 1.5vw, 14px);
  }

  .find-option {
    min-height: clamp(96px, 34dvh, 154px);
    border-radius: 22px;
  }

  .find-option img {
    width: 92%;
    max-height: clamp(76px, 27dvh, 128px);
  }

  .link-game-page {
    padding: max(58px, calc(env(safe-area-inset-top) + 48px)) max(96px, calc(env(safe-area-inset-right) + 86px)) max(84px, calc(env(safe-area-inset-bottom) + 70px)) max(96px, calc(env(safe-area-inset-left) + 86px));
  }

  .link-game-host {
    height: min(76dvh, 430px);
    min-height: 230px;
  }

  .link-card-surface {
    border-radius: 18px;
  }

  .link-card-name-zh {
    font-size: clamp(1.2rem, 4.4vw, 2.1rem);
  }

  .link-card-name-en,
  .link-card-name-ja {
    font-size: clamp(1.15rem, 4vw, 2rem);
  }
}

@media (max-width: 760px) {
  .book-screen {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  .book-top-bar {
    align-self: start;
    min-height: 48px;
    gap: 8px;
  }

  .soft-button,
  .timer-pill,
  .settings-gear-button {
    min-height: 42px;
    padding: 0 13px;
  }

  .settings-gear-button {
    width: 44px;
    height: 44px;
    padding: 0;
  }

  .vehicle-stage {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    padding: 0 clamp(58px, 15vw, 78px);
    place-items: center;
    pointer-events: none;
  }

  .book-screen.is-toc-page .vehicle-stage {
    padding: max(56px, calc(env(safe-area-inset-top) + 48px)) max(8px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    pointer-events: auto;
  }

  .toc-page {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .toc-open-book {
    width: min(100%, calc((100dvh - 188px) * 1.34));
  }

  .toc-playfield {
    left: 8%;
    right: 8%;
    top: 14%;
    bottom: 15%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 5px 7px;
    padding: 5px 7px;
  }

  .toc-vehicle-button {
    max-width: clamp(58px, 18vw, 106px);
    --toc-dx: 4px !important;
    --toc-dy: 0px !important;
  }

  .toc-vehicle-visual {
    width: 100%;
  }

  .toc-game-button {
    width: min(100%, clamp(58px, 16vw, 92px));
  }

  .book-screen.is-toc-page .word-panel {
    display: grid;
  }

  .activity-menu-page {
    padding: max(76px, calc(env(safe-area-inset-top) + 64px)) max(78px, calc(env(safe-area-inset-right) + 70px)) max(122px, calc(env(safe-area-inset-bottom) + 104px)) max(78px, calc(env(safe-area-inset-left) + 70px));
  }

  .activity-menu-card {
    gap: 12px;
    padding: 14px;
    border-radius: 22px;
  }

  .activity-game-grid {
    grid-template-columns: 1fr;
  }

  .activity-game-card {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: start;
    min-height: 88px;
    text-align: left;
  }

  .activity-game-card img {
    grid-row: span 2;
    width: 64px;
    max-height: 62px;
  }

  .activity-back-button {
    top: max(62px, calc(env(safe-area-inset-top) + 54px));
    left: max(12px, calc(env(safe-area-inset-left) + 8px));
    min-height: 38px;
    padding: 0 13px;
    font-size: 0.9rem;
  }

  .car-button {
    width: min(100%, 520px);
    height: auto;
    aspect-ratio: 3 / 2;
    min-height: 0;
    pointer-events: auto;
  }

  .car-runner {
    width: min(100%, 520px);
  }

  .car-main-image {
    width: 100%;
    height: 100%;
    max-height: none;
  }

  .vehicle-card {
    width: min(100%, 520px);
    pointer-events: auto;
  }

  .memory-game-page {
    padding: max(102px, calc(env(safe-area-inset-top) + 92px)) max(12px, calc(env(safe-area-inset-right) + 8px)) max(96px, calc(env(safe-area-inset-bottom) + 80px)) max(12px, calc(env(safe-area-inset-left) + 8px));
  }

  .memory-game-host {
    width: 100%;
    height: 76dvh;
    min-height: 310px;
  }

  .memory-progress-track {
    grid-template-columns: repeat(5, clamp(14px, 4.2vw, 23px));
  }

  .find-game-page {
    padding: max(78px, calc(env(safe-area-inset-top) + 66px)) max(78px, calc(env(safe-area-inset-right) + 70px)) max(126px, calc(env(safe-area-inset-bottom) + 108px)) max(78px, calc(env(safe-area-inset-left) + 70px));
  }

  .find-game-options {
    gap: clamp(10px, 3vw, 16px);
  }

  .find-option {
    min-height: clamp(116px, 20dvh, 172px);
    border-radius: 24px;
  }

  .find-option img {
    width: 92%;
    max-height: clamp(92px, 17dvh, 142px);
  }

  .link-game-page {
    padding: max(78px, calc(env(safe-area-inset-top) + 66px)) max(22px, calc(env(safe-area-inset-right) + 18px)) max(126px, calc(env(safe-area-inset-bottom) + 108px)) max(22px, calc(env(safe-area-inset-left) + 18px));
  }

  .link-game-host {
    width: 100%;
    height: min(72dvh, 580px);
    min-height: 330px;
  }

  .generated-vehicle-image,
  .split-vehicle-runner {
    width: min(100%, 520px);
  }

  .word-panel {
    align-self: end;
    gap: clamp(6px, 1.8vw, 12px);
    padding: 0 8px max(18px, env(safe-area-inset-bottom));
  }

  .word-panel h2 {
    font-size: clamp(3.4rem, 15vw, 5.8rem);
  }

  .word-panel p {
    font-size: clamp(1.5rem, 6vw, 2.35rem);
  }

  .word-panel .word-line:first-child {
    font-size: clamp(3.4rem, 15vw, 5.8rem);
  }

  .word-panel .word-line:not(:first-child) {
    font-size: clamp(1.34rem, 4.9vw, 2.15rem);
  }

  .word-panel .word-line-en,
  .word-panel .word-line-ja {
    font-size: clamp(1.22rem, 4.45vw, 1.95rem);
    line-height: 1.16;
  }

  .page-nav-button {
    top: 50%;
    width: clamp(44px, 9vw, 58px);
    height: clamp(74px, 18vw, 102px);
    transform: translateY(-50%);
  }

  .page-nav-left {
    left: max(10px, calc(env(safe-area-inset-left) + 8px));
  }

  .page-nav-right {
    right: max(10px, calc(env(safe-area-inset-right) + 8px));
  }

  .page-nav-button:active {
    transform: translateY(calc(-50% + 5px));
  }

  .layout-panel {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .editor-tabs {
    grid-template-columns: 1fr 1fr;
  }

  .editor-data-actions {
    grid-template-columns: 1fr 1fr;
  }

  .editor-control-grid,
  .motion-controls,
  .garage-image-controls {
    grid-template-columns: 1fr 1fr;
  }

  .layout-panel .soft-button {
    grid-column: span 2;
  }

  .interface-language-row {
    grid-template-columns: 1fr;
  }

  .language-toggle-grid,
  .language-order-grid {
    grid-template-columns: 1fr;
  }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 940px) {
  .book-screen {
    padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  .book-screen .vehicle-stage {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    padding: max(48px, env(safe-area-inset-top)) clamp(72px, 13vw, 112px) max(18px, env(safe-area-inset-bottom));
    place-items: center;
    pointer-events: none;
  }

  .book-screen.is-toc-page .vehicle-stage {
    padding: max(54px, env(safe-area-inset-top)) max(52px, calc(env(safe-area-inset-right) + 44px)) max(18px, env(safe-area-inset-bottom)) max(52px, calc(env(safe-area-inset-left) + 44px));
    pointer-events: auto;
  }

  .book-screen.is-toc-page .toc-page {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .book-screen.is-toc-page .toc-open-book {
    width: min(100%, 740px, calc((100dvh - 102px) * 1.34));
  }

  .book-screen.is-toc-page .toc-playfield {
    left: 8%;
    right: 8%;
    top: 14%;
    bottom: 15%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 5px 8px;
    padding: 5px 8px;
  }

  .book-screen.is-toc-page .toc-vehicle-button {
    max-width: clamp(76px, 11vw, 132px);
    --toc-dx: 3px !important;
    --toc-dy: 2px !important;
  }

  .book-screen.is-toc-page .toc-vehicle-visual {
    width: 100%;
  }

  .book-screen.is-toc-page .toc-game-button {
    width: min(100%, clamp(68px, 9.4vw, 112px));
  }

  .book-screen.is-toc-page .word-panel {
    display: flex;
  }

  .book-screen.is-toc-page .word-panel .word-line:first-child,
  .book-screen.is-toc-page .word-panel .word-line:not(:first-child) {
    margin: 0;
    font-size: clamp(0.72rem, 2.4vw, 1.08rem);
    line-height: 1;
    white-space: nowrap;
  }

  .book-screen.is-toc-page .word-panel .word-line-ja {
    font-size: clamp(0.66rem, 2.1vw, 0.98rem);
    line-height: 1.08;
  }

  .book-screen .page-nav-button {
    top: calc(env(safe-area-inset-top) + ((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 2));
    width: clamp(50px, 8.2vw, 64px);
    height: clamp(70px, 24dvh, 98px);
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
  }

  .book-screen .page-nav-left {
    left: max(22px, calc(env(safe-area-inset-left) + 14px));
  }

  .book-screen .page-nav-right {
    right: max(22px, calc(env(safe-area-inset-right) + 14px));
  }

  .book-screen .car-button,
  .book-screen .vehicle-card {
    width: min(76vw, 620px, 86dvh);
    pointer-events: auto;
  }

  .book-screen .car-runner,
  .book-screen .generated-vehicle-image,
  .book-screen .split-vehicle-runner,
  .book-screen .airplane-flight-scene,
  .book-screen .boat-sailing-scene,
  .book-screen .helicopter-flight-scene {
    width: min(100%, 620px);
  }

  .book-screen .word-panel {
    position: fixed;
    left: 50%;
    top: 50%;
    bottom: auto;
    z-index: 6;
    width: min(78vw, 620px);
    padding: 0;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    transform: translate(-50%, calc(-50% + 18px)) scale(0.96);
    transition: opacity 360ms ease, transform 360ms cubic-bezier(0.16, 0.82, 0.24, 1);
  }

  .book-screen.words-visible .word-panel,
  .book-screen.is-layout-editing .word-panel {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) scale(1);
  }

  .book-screen.is-toc-page .word-panel {
    display: grid;
  }

  .book-screen .word-panel h2,
  .book-screen .word-panel .word-line:first-child,
  .book-screen.is-memory-page .word-panel .word-line:first-child {
    font-size: clamp(2rem, 8vw, 4rem);
    line-height: 1;
  }

  .book-screen .word-panel p,
  .book-screen .word-panel .word-line:not(:first-child),
  .book-screen.is-memory-page .word-panel .word-line:not(:first-child) {
    margin-top: 0;
    font-size: clamp(1rem, 3.8vw, 1.85rem);
    line-height: 1.05;
  }

  .book-screen .word-panel .word-line-en {
    font-size: clamp(0.95rem, 3.35vw, 1.58rem);
    line-height: 1.14;
    transform: translateY(-0.1em);
  }

  .book-screen .word-panel .word-line-ja {
    font-size: clamp(0.9rem, 3.2vw, 1.5rem);
    line-height: 1.14;
  }

  .book-screen.is-memory-page .memory-game-page {
    padding: max(58px, calc(env(safe-area-inset-top) + 48px)) max(50px, calc(env(safe-area-inset-right) + 42px)) max(8px, env(safe-area-inset-bottom)) max(50px, calc(env(safe-area-inset-left) + 42px));
  }

  .book-screen.is-memory-page .memory-game-host {
    height: min(86dvh, 560px);
    min-height: 260px;
  }

  .book-screen.is-link-page .link-game-page {
    padding: max(62px, calc(env(safe-area-inset-top) + 52px)) max(76px, calc(env(safe-area-inset-right) + 68px)) max(34px, env(safe-area-inset-bottom)) max(76px, calc(env(safe-area-inset-left) + 68px));
  }

  .book-screen.is-link-page .link-game-host {
    width: min(560px, calc(100vw - 260px));
    height: min(78dvh, 450px);
    min-height: 250px;
  }

  .book-screen.is-memory-page .word-panel {
    top: auto;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: min(86vw, 720px);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: clamp(8px, 2.2vw, 18px);
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%);
  }

  .book-screen.is-memory-page .word-panel.game-instruction-row,
  .book-screen.is-link-page .word-panel.game-instruction-row,
  .book-screen.is-find-page .word-panel.game-instruction-row {
    width: min(94vw, 1040px);
    display: grid;
    grid-template-columns: repeat(var(--instruction-line-count, 1), minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: clamp(8px, 1.8vw, 20px);
  }

  .book-screen.is-link-page .word-panel {
    top: auto;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: min(86vw, 720px);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: clamp(8px, 2.2vw, 18px);
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%);
  }

  .book-screen.is-memory-page .word-panel .word-line:first-child,
  .book-screen.is-memory-page .word-panel .word-line:not(:first-child),
  .book-screen.is-link-page .word-panel .word-line:first-child,
  .book-screen.is-link-page .word-panel .word-line:not(:first-child) {
    margin: 0;
    font-size: clamp(0.72rem, 2.4vw, 1.12rem);
    line-height: 1;
    white-space: nowrap;
  }

  .book-screen.is-memory-page .word-panel .word-line-ja,
  .book-screen.is-link-page .word-panel .word-line-ja {
    font-size: clamp(0.66rem, 2.1vw, 0.98rem);
    line-height: 1.08;
  }
}

/* Toddler UI refresh: large touch targets, pure colors, and gentle feedback. */
.book-screen {
  --ui-hit-min: clamp(52px, 7.4vw, 68px);
  --ui-gap: clamp(8px, 1.4vw, 16px);
}

.book-top-bar {
  min-height: var(--ui-hit-min);
  align-items: center;
  gap: var(--ui-gap);
  padding-right: calc(var(--ui-hit-min) + var(--ui-gap));
}

.book-screen.is-activity-page .book-top-bar {
  padding-right: clamp(180px, 27vw, 270px);
}

.soft-button,
.page-count-pill,
.settings-gear-button,
.page-nav-button,
.editor-tab,
.primary-button,
.dialog-close,
.action-row,
.activity-back-button,
.activity-difficulty-button {
  min-height: var(--ui-hit-min);
  border: 0;
  border-radius: 999px;
  background: var(--ui-solid-bg);
  color: var(--ui-solid-fg);
  box-shadow: none;
  text-shadow: none;
  font-family: "Chiron GoRound TC", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
}

.soft-button,
.page-count-pill,
.primary-button,
.action-row,
.activity-back-button {
  padding-inline: clamp(18px, 3vw, 30px);
  font-size: clamp(1rem, 2vw, 1.28rem);
  line-height: 1;
}

.book-top-bar .soft-button,
.book-top-bar .page-count-pill {
  min-width: clamp(76px, 10vw, 118px);
  justify-content: center;
}

.settings-gear-button {
  width: var(--ui-hit-min);
  height: var(--ui-hit-min);
  min-width: var(--ui-hit-min);
  min-height: var(--ui-hit-min);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
}

#book-settings-button {
  position: fixed;
  top: calc(var(--app-safe-top, max(12px, env(safe-area-inset-top))) + clamp(0px, calc((var(--ui-hit-min, 52px) - var(--large-ui-min-height, var(--large-gear-size, var(--ui-hit-min, 52px)))) / 2), 14px));
  right: max(14px, env(safe-area-inset-right));
  z-index: 10;
}

.activity-back-button {
  top: auto;
  bottom: max(14px, env(safe-area-inset-bottom));
  left: auto;
  right: max(14px, env(safe-area-inset-right));
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.page-nav-button {
  width: clamp(58px, 8.4vw, 78px);
  height: clamp(88px, 13vw, 132px);
  background: var(--ui-solid-bg);
  border-radius: 999px;
}

.page-nav-left {
  left: max(16px, calc(env(safe-area-inset-left) + 12px));
}

.page-nav-right {
  right: max(16px, calc(env(safe-area-inset-right) + 12px));
}

.soft-button:hover,
.settings-gear-button:hover,
.page-nav-button:hover,
.editor-tab:hover,
.primary-button:hover,
.action-row:hover,
.activity-back-button:hover,
.activity-difficulty-button:hover {
  filter: brightness(1.06) saturate(1.04);
  transform: translateY(-1px) scale(1.015);
}

.soft-button:active,
.settings-gear-button:active,
.editor-tab:active,
.primary-button:active,
.action-row:active,
.activity-back-button:active,
.activity-difficulty-button:active {
  filter: brightness(0.94) saturate(1.05);
  transform: translateY(2px) scale(0.985);
}

.page-nav-button:active {
  filter: brightness(0.94) saturate(1.05);
  transform: translateY(2px) scale(0.985);
}

.soft-button:focus-visible,
.settings-gear-button:focus-visible,
.page-nav-button:focus-visible,
.editor-tab:focus-visible,
.primary-button:focus-visible,
.dialog-close:focus-visible,
.action-row:focus-visible,
.activity-back-button:focus-visible,
.activity-difficulty-button:focus-visible,
.speech-challenge-button:focus-visible,
.police-speech-button:focus-visible {
  outline: 4px solid rgba(255, 255, 255, 0.92);
  outline-offset: 4px;
}

.speech-challenge {
  min-height: clamp(62px, 8dvh, 82px);
  margin-bottom: clamp(8px, 1.8dvh, 22px);
}

.speech-challenge-button,
.police-speech-button {
  min-height: clamp(58px, 7.4dvh, 76px);
  min-width: clamp(230px, 34vw, 390px);
  padding: 10px clamp(26px, 4.6vw, 52px);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  font-family: "Chiron GoRound TC", system-ui, sans-serif;
  font-size: clamp(1.16rem, 2.75vw, 1.78rem);
  line-height: 1;
}

.speech-challenge-button {
  grid-template-columns: 30px auto;
  gap: 12px;
}

.police-speech-button:active,
.speech-challenge-button:active {
  filter: brightness(0.94) saturate(1.05);
  transform: translateY(2px) scale(0.985);
}

.layout-panel {
  width: min(96vw, 1160px);
  gap: 12px;
  padding: clamp(12px, 1.6vw, 18px);
  border-radius: 24px;
  background: rgba(255, 253, 241, 0.98);
  box-shadow: none;
}

.layout-panel .soft-button,
.editor-tab,
.layout-field select {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: #e8f0f3;
  color: #243243;
  box-shadow: none;
}

.editor-toggle-button.is-active,
.editor-tab.is-active,
.layout-panel .primary-editor-button {
  background: var(--ui-solid-bg);
  color: var(--ui-solid-fg);
}

.layout-field {
  color: #243243;
  font-size: 0.9rem;
}

.layout-field input[type="range"] {
  min-height: 34px;
  accent-color: var(--ui-solid-bg);
}

.activity-menu-card,
.find-option,
.find-game-prompt,
.link-card-surface,
.memory-game-error {
  box-shadow: none;
}

.find-option {
  border-radius: 32px;
}

.find-game-prompt {
  border: 0;
  background: var(--page-panel);
}

.activity-difficulty-button {
  min-height: 54px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-solid-bg) 28%, var(--page-panel));
}

.activity-difficulty-button.is-active {
  background: var(--ui-solid-bg);
  color: var(--ui-solid-fg);
}

.activity-game-card {
  border-radius: 30px;
}

.memory-progress {
  top: max(20px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
}

.memory-progress-track,
.memory-level-star {
  box-shadow: none;
}

@media (max-width: 760px) {
  .book-top-bar {
    flex-wrap: wrap;
    min-height: 0;
    gap: 8px;
    padding-right: 62px;
  }

  .book-screen.is-activity-page .book-top-bar {
    padding-right: 168px;
  }

  .book-top-bar .soft-button,
  .book-top-bar .page-count-pill {
    min-width: clamp(70px, 20vw, 100px);
    min-height: 48px;
    padding-inline: 14px;
    font-size: clamp(0.9rem, 3.9vw, 1.06rem);
  }

  .settings-gear-button {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
  }

  #book-settings-button {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
  }

  .activity-back-button {
    min-height: 48px;
    padding-inline: 14px;
    font-size: clamp(0.86rem, 3.6vw, 1rem);
    top: max(12px, env(safe-area-inset-top));
    right: calc(max(12px, env(safe-area-inset-right)) + 48px + 8px);
  }

  .speech-challenge-button,
  .police-speech-button {
    min-width: min(76vw, 320px);
  }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 940px) {
  .book-screen .page-nav-button {
    width: clamp(52px, 7.2vw, 66px);
    height: clamp(70px, 22dvh, 96px);
  }

  .speech-challenge-button,
  .police-speech-button {
    min-height: clamp(46px, 9dvh, 58px);
    min-width: clamp(190px, 28vw, 290px);
    font-size: clamp(0.96rem, 2.5vw, 1.24rem);
  }
}

.book-screen.is-game-directory-page .activity-difficulty-group {
  width: 100%;
  gap: 0;
  padding: clamp(7px, 0.9vw, 10px);
  border-radius: 999px;
  background: rgba(255, 253, 241, 0.9);
  overflow: hidden;
}

.book-screen.is-game-directory-page .activity-difficulty-button {
  min-height: clamp(52px, 5.8vw, 68px);
  display: grid;
  grid-template-rows: auto;
  place-items: center;
  gap: 0;
  padding: 0 clamp(10px, 1.5vw, 18px);
  border-radius: 999px;
  background: transparent;
  color: #243243;
  font-size: clamp(0.92rem, 1.6vw, 1.12rem);
  line-height: 1;
  overflow: visible;
}

.book-screen.is-game-directory-page .activity-difficulty-button.is-active {
  background: transparent;
  color: var(--ui-solid-fg);
  transform: none;
}

.book-screen.is-game-directory-page .activity-difficulty-button:hover {
  filter: brightness(1.04) saturate(1.04);
  transform: none;
}

.book-screen.is-game-directory-page .activity-difficulty-button:active,
.book-screen.is-game-directory-page .activity-difficulty-button.is-active:active {
  filter: brightness(0.96) saturate(1.06);
  transform: none;
}

@media (max-width: 760px) {
  .book-screen.is-game-directory-page .activity-difficulty-group {
    width: 100%;
    gap: 0;
  }

  .book-screen.is-game-directory-page .activity-difficulty-button {
    min-height: 52px;
    border-radius: 999px;
    padding-inline: 8px;
    font-size: clamp(0.82rem, 3.4vw, 1rem);
  }

  .activity-difficulty-stars {
    min-width: 4em;
    padding-inline: 6px;
  }
}

/* Compact-screen spacing fixes after the toddler button scale-up. */
@media (max-width: 760px) {
  .book-screen .page-nav-button {
    width: clamp(42px, 11vw, 48px);
    height: clamp(70px, 17vw, 82px);
  }

  .book-screen .page-nav-left {
    left: max(6px, calc(env(safe-area-inset-left) + 4px));
  }

  .book-screen .page-nav-right {
    right: max(6px, calc(env(safe-area-inset-right) + 4px));
  }

  .book-screen .car-button,
  .book-screen .vehicle-card {
    width: min(64vw, 530px, 55dvh);
  }

  .book-screen .car-runner,
  .book-screen .generated-vehicle-image,
  .book-screen .split-vehicle-runner,
  .book-screen .airplane-flight-scene,
  .book-screen .boat-sailing-scene,
  .book-screen .helicopter-flight-scene {
    width: min(100%, 560px);
  }

  .book-screen.is-game-directory-page .activity-game-card {
    width: clamp(86px, 24%, 112px);
  }

  .book-screen.is-game-directory-page .activity-game-card-find {
    left: 22%;
    top: 22%;
  }

  .book-screen.is-game-directory-page .activity-game-card-sound {
    left: 49%;
    top: 23%;
  }

  .book-screen.is-game-directory-page .activity-game-card-memory {
    left: 24%;
    top: 59%;
  }

  .book-screen.is-game-directory-page .activity-game-card-pull {
    left: 49%;
    top: 46%;
  }

  .book-screen.is-game-directory-page .activity-game-card-link {
    left: 75%;
    top: 42%;
  }

  .book-screen.is-game-directory-page .activity-game-card-shadow {
    left: 60%;
    top: 70%;
  }

  .book-screen.is-game-directory-page .activity-game-card-parking {
    left: 78%;
    top: 68%;
  }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 940px) {
  .book-screen .vehicle-stage {
    padding-top: max(76px, calc(env(safe-area-inset-top) + 66px));
    padding-bottom: max(34px, env(safe-area-inset-bottom));
  }

  .book-screen .car-button,
  .book-screen .vehicle-card {
    width: min(70vw, 560px, 72dvh);
  }

  .book-screen .car-runner,
  .book-screen .generated-vehicle-image,
  .book-screen .split-vehicle-runner,
  .book-screen .airplane-flight-scene,
  .book-screen .boat-sailing-scene,
  .book-screen .helicopter-flight-scene {
    width: min(100%, 560px);
  }
}

/* Keep all bottom vocabulary and game instruction text anchored to the screen bottom on compact landscape screens. */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 940px) {
  .book-screen .word-panel {
    left: 50%;
    top: clamp(132px, 43dvh, 178px);
    bottom: auto;
    width: min(52vw, calc(100vw - clamp(190px, 26vw, 270px)), 500px);
    padding: 0 clamp(6px, 1.5vw, 14px);
    transform: translate(-50%, -50%) scale(0.92);
  }

  .book-screen.words-visible .word-panel,
  .book-screen.is-layout-editing .word-panel {
    transform: translate(-50%, -50%) scale(1);
  }

  .book-screen .word-panel .word-line:first-child {
    font-size: clamp(1.35rem, 5.2vw, 2.5rem);
  }

  .book-screen .word-panel .word-line:not(:first-child) {
    font-size: clamp(0.78rem, 2.5vw, 1.24rem);
  }

  .book-screen .word-panel .word-line-en,
  .book-screen .word-panel .word-line-ja {
    font-size: clamp(0.74rem, 2.25vw, 1.12rem);
  }

  .book-screen.is-activity-page .word-panel.game-instruction-row {
    position: fixed;
    left: 50%;
    top: auto;
    bottom: max(clamp(6px, 1.8dvh, 14px), env(safe-area-inset-bottom));
    z-index: 7;
    width: min(94vw, 1040px);
    padding: 0 clamp(10px, 2vw, 22px);
    display: grid;
    grid-template-columns: repeat(var(--instruction-line-count, 1), minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: clamp(8px, 1.8vw, 20px);
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%);
  }

  .book-screen.is-activity-page .word-panel.game-instruction-row .word-line,
  .book-screen.is-activity-page .word-panel.game-instruction-row .word-line:not(:first-child) {
    margin: 0;
    max-width: 100%;
    font-size: clamp(0.72rem, 2.35vw, 1.12rem);
    line-height: 1.05;
    white-space: nowrap;
  }

  .book-screen.is-activity-page .word-panel.game-instruction-row .word-line-ja {
    font-size: clamp(0.66rem, 2.12vw, 1rem);
    line-height: 1.08;
  }
}

/* Cross-platform safety layer: keeps controls, art, cards, and bottom text in reserved zones. */
:root {
  --sim-safe-top: 0px;
  --sim-safe-right: 0px;
  --sim-safe-bottom: 0px;
  --sim-safe-left: 0px;
}

.cover-screen,
.book-screen {
  --app-safe-top: max(12px, env(safe-area-inset-top), var(--sim-safe-top));
  --app-safe-right: max(12px, env(safe-area-inset-right), var(--sim-safe-right));
  --app-safe-bottom: max(12px, env(safe-area-inset-bottom), var(--sim-safe-bottom));
  --app-safe-left: max(12px, env(safe-area-inset-left), var(--sim-safe-left));
  --responsive-top-reserve: calc(var(--app-safe-top) + var(--ui-hit-min, 58px) + clamp(8px, 1.6dvh, 18px));
  --responsive-bottom-reserve: calc(var(--app-safe-bottom) + clamp(78px, 12dvh, 150px));
  --responsive-left-rail: max(calc(var(--app-safe-left) + clamp(48px, 6.8vw, 88px)), clamp(64px, 8.8vw, 112px));
  --responsive-right-rail: max(calc(var(--app-safe-right) + clamp(48px, 6.8vw, 88px)), clamp(64px, 8.8vw, 112px));
  --toc-top-reserve: calc(var(--app-safe-top) + clamp(36px, 7dvh, 72px));
  --toc-bottom-reserve: calc(var(--app-safe-bottom) + clamp(44px, 8dvh, 82px));
  --vehicle-stage-top: clamp(58px, 8dvh, 96px);
  --vehicle-stage-bottom: clamp(8px, 2dvh, 34px);
  --large-vehicle-max-width: 1180px;
  --large-art-max-width: 1180px;
  --large-cover-max-width: 728px;
  --large-book-max-height: 980px;
  --large-toc-icon-min: 108px;
  --large-toc-game-min: 105px;
  --large-toc-icon-max: 237px;
  --large-toc-game-max: 216px;
  --large-toc-icon-fluid: 13.2dvh;
  --large-toc-game-fluid: 12.6dvh;
  --large-game-host-max-width: 1360px;
  --large-game-host-max-height: 860px;
  --large-find-card-max-width: 1180px;
  --large-find-options-max-width: 1120px;
  --large-bottom-text-max-width: 1120px;
  --large-ui-min-height: 44px;
  --large-ui-font-size: 1rem;
  --large-ui-pad-x: 15px;
  --large-gear-size: 48px;
  --large-gear-font-size: 1.42rem;
  --large-nav-width: 64px;
  --large-nav-height: 123px;
  --large-nav-arrow-size: 23px;
  --large-nav-arrow-stroke: 7px;
  --large-speech-min-width: 286px;
  --large-speech-min-height: 72px;
  --large-speech-font-size: 1.62rem;
  --large-directory-controls-width: 520px;
  --large-directory-card-max: 226px;
  --large-directory-icon-max: 200px;
  --large-directory-icon-height: 164px;
  --large-difficulty-min-height: 68px;
  --large-difficulty-font-size: 1.12rem;
  --large-difficulty-star-size: 38px;
  --large-find-option-min-height: 220px;
  --large-find-image-max-height: 184px;
  --large-find-image-max-width: 340px;
  --large-find-result-font-size: 2.2rem;
  --large-link-name-font-size: 3.2rem;
  --large-pull-card-max-width: 1360px;
  --large-pull-track-max-height: 430px;
  --large-pull-meter-max-width: 880px;
  --large-pull-meter-height: 42px;
  --large-pull-vehicle-width: 250px;
  --large-pull-flag-width: 132px;
  --large-pull-result-font-size: 2.45rem;
  --large-pull-gap: 28px;
  --large-confetti-size: 330px;
  --large-spark-size: 44px;
  --game-top-space: max(78px, calc(var(--app-safe-top) + var(--ui-hit-min, 58px) + 14px));
  --game-bottom-space: max(96px, calc(var(--app-safe-bottom) + clamp(62px, 9dvh, 112px)));
  --game-left-space: max(calc(var(--app-safe-left) + clamp(48px, 6.6vw, 92px)), clamp(64px, 8vw, 112px));
  --game-right-space: max(calc(var(--app-safe-right) + clamp(48px, 6.6vw, 92px)), clamp(64px, 8vw, 112px));
}

.cover-screen {
  padding: var(--app-safe-top) var(--app-safe-right) var(--app-safe-bottom) var(--app-safe-left);
}

.cover-screen .cover-book {
  width: min(92vw, var(--large-cover-max-width), 75.4dvh);
}

.parent-corner-button {
  top: var(--app-safe-top);
  right: var(--app-safe-right);
  width: var(--large-gear-size);
  height: var(--large-gear-size);
}

.book-screen {
  padding: var(--app-safe-top) var(--app-safe-right) var(--app-safe-bottom) var(--app-safe-left);
}

.book-top-bar {
  max-width: calc(100vw - var(--app-safe-left) - var(--app-safe-right));
}

#book-settings-button {
  top: calc(var(--app-safe-top) + clamp(0px, calc((var(--ui-hit-min, 52px) - var(--large-ui-min-height, var(--large-gear-size, var(--ui-hit-min, 52px)))) / 2), 14px));
  right: var(--app-safe-right);
}

.activity-back-button {
  top: auto;
  left: auto;
  right: var(--app-safe-right);
  bottom: var(--app-safe-bottom);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.page-nav-left {
  left: var(--app-safe-left);
}

.page-nav-right {
  right: var(--app-safe-right);
}

.book-screen .page-nav-left {
  left: var(--app-safe-left);
}

.book-screen .page-nav-right {
  right: var(--app-safe-right);
}

.book-screen .soft-button,
.book-screen .page-count-pill,
.book-screen .timer-pill {
  min-height: var(--large-ui-min-height);
  padding-inline: var(--large-ui-pad-x);
  font-size: var(--large-ui-font-size);
}

.book-screen .settings-gear-button {
  width: var(--large-gear-size);
  height: var(--large-gear-size);
  min-height: var(--large-gear-size);
  font-size: var(--large-gear-font-size);
}

.book-screen .page-nav-button {
  width: var(--large-nav-width);
  height: var(--large-nav-height);
}

.book-screen .page-nav-button::before {
  width: var(--large-nav-arrow-size);
  height: var(--large-nav-arrow-size);
  border-width: 0 var(--large-nav-arrow-stroke) var(--large-nav-arrow-stroke) 0;
}

.book-screen .police-speech-button {
  min-width: var(--large-speech-min-width);
  min-height: var(--large-speech-min-height);
  font-size: var(--large-speech-font-size);
}

.book-screen .speech-challenge-button {
  min-height: var(--large-speech-min-height);
  min-width: var(--large-speech-min-width);
  font-size: var(--large-speech-font-size);
}

.book-screen:not(.is-activity-page):not(.is-toc-page):not(.is-game-directory-page) .vehicle-stage {
  padding: var(--vehicle-stage-top) var(--responsive-right-rail) var(--vehicle-stage-bottom) var(--responsive-left-rail);
}

.book-screen .car-button,
.book-screen .vehicle-card {
  width: min(calc(100vw - var(--responsive-left-rail) - var(--responsive-right-rail)), var(--large-vehicle-max-width), 76dvh);
  max-width: 100%;
}

.book-screen .car-runner,
.book-screen .generated-vehicle-image,
.book-screen .split-vehicle-runner,
.book-screen .airplane-flight-scene,
.book-screen .boat-sailing-scene,
.book-screen .helicopter-flight-scene {
  width: min(100%, var(--large-art-max-width));
  max-width: 100%;
}

.book-screen.is-toc-page .vehicle-stage,
.book-screen.is-game-directory-page .vehicle-stage {
  padding: var(--toc-top-reserve) max(var(--app-safe-right), clamp(10px, 2vw, 42px)) var(--toc-bottom-reserve) max(var(--app-safe-left), clamp(10px, 2vw, 42px));
}

.book-screen.is-toc-page .toc-open-book,
.book-screen.is-game-directory-page .game-book-menu {
  width: auto;
  height: min(calc(100dvh - var(--toc-top-reserve) - var(--toc-bottom-reserve)), 74vw, var(--large-book-max-height));
  max-width: calc(100vw - var(--app-safe-left) - var(--app-safe-right) - clamp(16px, 3vw, 64px));
  max-height: calc(100dvh - var(--toc-top-reserve) - var(--toc-bottom-reserve));
}

.book-screen.is-toc-page .toc-vehicle-button {
  max-width: clamp(var(--large-toc-icon-min), var(--large-toc-icon-fluid), var(--large-toc-icon-max));
}

.book-screen.is-toc-page .toc-game-button {
  width: min(100%, clamp(var(--large-toc-game-min), var(--large-toc-game-fluid), var(--large-toc-game-max)));
}

.book-screen.is-toc-page .word-panel,
.book-screen.is-game-directory-page .word-panel,
.book-screen.is-activity-page .word-panel.game-instruction-row {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: var(--app-safe-bottom);
  z-index: 7;
  width: min(calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 24px), var(--large-bottom-text-max-width));
  padding: 0;
  transform: translateX(-50%);
}

.book-screen.is-game-directory-page.words-visible .word-panel,
.book-screen.is-game-directory-page.is-layout-editing .word-panel,
.book-screen.is-activity-page.words-visible .word-panel.game-instruction-row,
.book-screen.is-activity-page.is-layout-editing .word-panel.game-instruction-row {
  transform: translateX(-50%);
  transition: none !important;
}

.book-screen.is-game-directory-page.page-exit-next .word-panel,
.book-screen.is-game-directory-page.page-enter-next .word-panel,
.book-screen.is-game-directory-page.page-exit-prev .word-panel,
.book-screen.is-game-directory-page.page-enter-prev .word-panel,
.book-screen.is-activity-page.page-exit-next .word-panel.game-instruction-row,
.book-screen.is-activity-page.page-enter-next .word-panel.game-instruction-row,
.book-screen.is-activity-page.page-exit-prev .word-panel.game-instruction-row,
.book-screen.is-activity-page.page-enter-prev .word-panel.game-instruction-row {
  animation: none !important;
  transform: translateX(-50%);
}

.book-screen.is-toc-page .word-panel,
.book-screen.is-game-directory-page .word-panel,
.book-screen.is-activity-page .word-panel.game-instruction-row {
  bottom: calc(var(--app-safe-bottom) + 24px);
}

.book-screen.is-toc-page .word-panel .word-line:first-child,
.book-screen.is-toc-page .word-panel .word-line:not(:first-child),
.book-screen.is-game-directory-page .word-panel .word-line:first-child,
.book-screen.is-game-directory-page .word-panel .word-line:not(:first-child),
.book-screen.is-activity-page .word-panel.game-instruction-row .word-line:first-child,
.book-screen.is-activity-page .word-panel.game-instruction-row .word-line:not(:first-child) {
  font-size: clamp(1.55rem, 4.2vw, 3.35rem);
  line-height: 1;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

.book-screen.is-toc-page .word-panel .word-line:first-child,
.book-screen.is-toc-page .word-panel .word-line:not(:first-child),
.book-screen.is-game-directory-page .word-panel .word-line:first-child,
.book-screen.is-game-directory-page .word-panel .word-line:not(:first-child),
.book-screen.is-activity-page .word-panel.game-instruction-row .word-line:first-child,
.book-screen.is-activity-page .word-panel.game-instruction-row .word-line:not(:first-child) {
  --toc-text-edge: clamp(5px, calc(0.130208vw + 3px), 8px);
  color: #243243;
  -webkit-text-fill-color: #243243;
  font-size: clamp(2.18rem, 5.35vw, 4.1rem);
  -webkit-text-stroke: var(--toc-text-edge) #fffdf1;
  paint-order: stroke fill;
  text-shadow: none;
}

.book-screen.is-game-directory-page .activity-menu-page {
  padding: var(--toc-top-reserve) max(var(--app-safe-right), clamp(10px, 2vw, 42px)) var(--toc-bottom-reserve) max(var(--app-safe-left), clamp(10px, 2vw, 42px));
}

.book-screen.is-game-directory-page .activity-menu-controls {
  width: min(var(--large-directory-controls-width), calc(100vw - var(--game-left-space) - var(--game-right-space)));
  margin-top: clamp(8px, 2dvh, 28px);
}

.book-screen.is-game-directory-page .activity-game-card {
  width: min(100%, clamp(var(--large-toc-game-min), var(--large-toc-game-fluid), var(--large-toc-game-max)));
}

.book-screen.is-game-directory-page .activity-game-card img {
  width: 100%;
  max-height: none;
}

.book-screen.is-game-directory-page .activity-difficulty-button {
  min-height: var(--large-difficulty-min-height);
  font-size: var(--large-difficulty-font-size);
}

.book-screen.is-game-directory-page .activity-fat-star {
  width: var(--large-difficulty-star-size);
}

.book-screen.is-activity-page .memory-game-page,
.book-screen.is-activity-page .find-game-page,
.book-screen.is-activity-page .sound-game-page,
.book-screen.is-activity-page .pull-game-page,
.book-screen.is-activity-page .parking-game-page,
.book-screen.is-activity-page .link-game-page,
.book-screen.is-activity-page .shadow-game-page {
  padding: var(--game-top-space) var(--game-right-space) var(--game-bottom-space) var(--game-left-space);
}

.book-screen.is-memory-page .memory-game-host,
.book-screen.is-link-page .link-game-host {
  width: min(100%, var(--large-game-host-max-width));
  height: min(calc(100dvh - var(--game-top-space) - var(--game-bottom-space)), var(--large-game-host-max-height));
  min-height: clamp(260px, 42dvh, 430px);
}

.book-screen.is-find-page .find-game-card,
.book-screen.is-sound-page .find-game-card,
.book-screen.is-shadow-page .find-game-card {
  width: min(100%, var(--large-find-card-max-width));
  gap: clamp(10px, 2dvh, 22px);
}

.book-screen.is-find-page .find-game-options,
.book-screen.is-sound-page .find-game-options,
.book-screen.is-shadow-page .find-game-options {
  width: min(100%, var(--large-find-options-max-width));
  grid-template-columns: repeat(auto-fit, minmax(clamp(126px, 18vw, 240px), 1fr));
  gap: clamp(10px, 1.8vw, 20px);
}

.book-screen.is-find-page .find-option,
.book-screen.is-sound-page .find-option,
.book-screen.is-shadow-page .find-option {
  min-height: clamp(112px, 19dvh, var(--large-find-option-min-height));
}

.book-screen.is-find-page .find-option-image-wrap > img,
.book-screen.is-find-page .find-option-visual,
.book-screen.is-sound-page .find-option-image-wrap > img,
.book-screen.is-sound-page .find-option-visual,
.book-screen.is-shadow-page .find-option-image-wrap > img,
.book-screen.is-shadow-page .find-option-visual {
  width: min(100%, calc(var(--large-find-image-max-width) * 1.4));
  max-height: clamp(151px, 28dvh, calc(var(--large-find-image-max-height) * 1.4));
}

.book-screen.is-find-page .find-game-result,
.book-screen.is-sound-page .find-game-result,
.book-screen.is-shadow-page .find-game-result {
  font-size: clamp(1.18rem, 2.9vw, var(--large-find-result-font-size));
}

.book-screen.is-pull-page .pull-game-card {
  width: min(100%, var(--large-pull-card-max-width));
  grid-template-rows: auto minmax(220px, 1fr) auto;
  gap: clamp(16px, 2.7dvh, var(--large-pull-gap));
}

.book-screen.is-pull-page .pull-power-panel {
  width: min(100%, var(--large-pull-meter-max-width));
}

.book-screen.is-pull-page .pull-power-track {
  height: clamp(30px, 4.4dvh, var(--large-pull-meter-height));
}

.book-screen.is-pull-page .pull-track {
  min-height: clamp(240px, 44dvh, var(--large-pull-track-max-height));
  border-radius: clamp(36px, 3.2vw, 52px);
}

.book-screen.is-pull-page .pull-goal-line {
  width: clamp(92px, 7.2vw, var(--large-pull-flag-width));
}

.book-screen.is-pull-page .pull-vehicle-button {
  width: clamp(180px, 13vw, var(--large-pull-vehicle-width));
}

.book-screen.is-pull-page .pull-game-result {
  padding: clamp(9px, 1.2dvh, 14px) clamp(24px, 2.8vw, 42px) clamp(11px, 1.35dvh, 16px);
  font-size: clamp(1.5rem, 2.6vw, var(--large-pull-result-font-size));
}

.book-screen.is-parking-page .parking-game-card {
  width: min(100%, var(--large-game-host-max-width));
}

.book-screen.is-parking-page .parking-match-board {
  width: min(100%, var(--large-game-host-max-width));
}

.book-screen.is-parking-page .parking-slot {
  min-height: clamp(140px, 18dvh, 280px);
}

.book-screen.is-parking-page .parking-target-visual {
  width: min(62%, 360px);
}

.book-screen .find-option-confetti,
.book-screen .memory-sparkles::after {
  width: clamp(180px, 27vw, var(--large-confetti-size));
}

.book-screen .find-option-confetti i,
.book-screen .link-card-burst i {
  width: clamp(20px, 3.6vw, var(--large-spark-size));
}

.book-screen .link-card-name-zh,
.book-screen .link-card-name-en,
.book-screen .link-card-name-ja {
  font-size: clamp(1.55rem, 4vw, var(--large-link-name-font-size));
}

.book-screen.is-activity-page .word-panel.game-instruction-row {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: calc(var(--app-safe-bottom) + 24px);
  z-index: 7;
  width: min(calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 24px), var(--large-bottom-text-max-width));
  padding: 0;
  transform: translateX(-50%);
}

.book-screen.is-activity-page .word-panel.game-instruction-row[data-line-count="1"] .word-line {
  font-size: clamp(2.18rem, 5.35vw, 4.1rem);
  line-height: 1;
}

.book-screen .word-panel,
.book-screen .word-panel h2,
.book-screen .word-panel p,
.book-screen .word-panel .word-line,
.book-screen .speech-challenge-button,
.book-screen .police-speech-button,
.book-screen .activity-game-card,
.book-screen .difficulty-pill,
.book-screen .activity-back-button,
.book-screen .book-nav-button,
.book-screen .book-page-counter,
.book-screen .toc-vehicle-button,
.book-screen .toc-game-button {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

@media (max-width: 760px) {
  .book-screen {
    --responsive-top-reserve: calc(var(--app-safe-top) + 52px + 10px);
    --responsive-bottom-reserve: calc(var(--app-safe-bottom) + clamp(72px, 14dvh, 116px));
    --responsive-left-rail: max(calc(var(--app-safe-left) + 44px), clamp(50px, 13vw, 68px));
    --responsive-right-rail: max(calc(var(--app-safe-right) + 44px), clamp(50px, 13vw, 68px));
    --vehicle-stage-top: var(--responsive-top-reserve);
    --vehicle-stage-bottom: calc(var(--app-safe-bottom) + clamp(140px, 23dvh, 210px));
    --game-top-space: max(72px, calc(var(--app-safe-top) + 58px));
    --game-bottom-space: max(92px, calc(var(--app-safe-bottom) + clamp(68px, 13dvh, 112px)));
    --game-left-space: max(calc(var(--app-safe-left) + 12px), 14px);
    --game-right-space: max(calc(var(--app-safe-right) + 12px), 14px);
  }

  .book-screen.is-pull-page {
    --game-top-space: max(96px, calc(var(--app-safe-top) + 84px));
    --game-bottom-space: max(84px, calc(var(--app-safe-bottom) + 66px));
    --game-left-space: max(calc(var(--app-safe-left) + 18px), 24px);
    --game-right-space: max(calc(var(--app-safe-right) + 18px), 24px);
  }

  .book-screen.is-pull-page .pull-game-page {
    align-items: start;
    justify-items: center;
  }

  .book-screen.is-pull-page .pull-game-card {
    width: min(100%, 620px);
    grid-template-rows: auto auto auto;
    gap: clamp(14px, 2dvh, 20px);
  }

  .book-screen.is-pull-page .pull-power-panel {
    width: min(100%, 560px);
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .book-screen.is-pull-page .pull-power-track {
    height: clamp(30px, 5.1dvh, 42px);
  }

  .book-screen.is-pull-page .pull-track {
    width: 100%;
    min-height: 0;
    height: min(52dvh, calc((100vw - var(--game-left-space) - var(--game-right-space)) * 0.86), 420px);
    border-radius: clamp(24px, 7vw, 42px);
  }

  .book-screen.is-pull-page .pull-goal-line {
    width: clamp(54px, 13vw, 76px);
  }

  .book-screen.is-pull-page .pull-vehicle-button {
    width: clamp(92px, 22vw, 132px);
  }

  .book-screen .car-button,
  .book-screen .vehicle-card {
    width: min(calc(100vw - var(--responsive-left-rail) - var(--responsive-right-rail)), 560px, 60dvh);
  }

  .book-screen.is-toc-page .vehicle-stage,
  .book-screen.is-game-directory-page .vehicle-stage {
    padding: var(--responsive-top-reserve) max(var(--app-safe-right), 8px) var(--responsive-bottom-reserve) max(var(--app-safe-left), 8px);
  }

  .book-screen.is-toc-page .toc-open-book,
  .book-screen.is-game-directory-page .game-book-menu {
    width: auto;
    height: min(calc(100dvh - var(--responsive-top-reserve) - var(--responsive-bottom-reserve)), 62vw, 540px);
    max-width: calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 12px);
  }

  .book-screen.is-toc-page .toc-vehicle-button {
    max-width: clamp(54px, 17vw, 106px);
  }

  .book-screen.is-game-directory-page .activity-menu-page {
    padding: var(--responsive-top-reserve) max(var(--app-safe-right), 10px) var(--responsive-bottom-reserve) max(var(--app-safe-left), 10px);
  }

  .book-screen.is-game-directory-page .activity-menu-controls {
    width: min(340px, calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 20px));
    margin-top: 0;
  }

  .book-screen.is-game-directory-page .activity-game-card {
    width: min(100%, var(--toc-game-auto-size));
    max-width: var(--toc-game-auto-size);
  }

  .book-screen.is-find-page .find-game-options,
  .book-screen.is-sound-page .find-game-options,
  .book-screen.is-shadow-page .find-game-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-screen.is-find-page .find-option,
  .book-screen.is-sound-page .find-option,
  .book-screen.is-shadow-page .find-option {
    min-height: clamp(78px, 17dvh, 118px);
  }

  .book-screen.is-find-page .find-option-image-wrap > img,
  .book-screen.is-find-page .find-option-visual,
  .book-screen.is-sound-page .find-option-image-wrap > img,
  .book-screen.is-sound-page .find-option-visual,
  .book-screen.is-shadow-page .find-option-image-wrap > img,
  .book-screen.is-shadow-page .find-option-visual {
    max-height: clamp(80px, 20dvh, 132px);
  }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 940px) {
  .book-screen {
    --responsive-top-reserve: max(52px, calc(var(--app-safe-top) + 48px));
    --responsive-bottom-reserve: max(78px, calc(var(--app-safe-bottom) + 58px));
    --responsive-left-rail: max(calc(var(--app-safe-left) + 48px), 62px);
    --responsive-right-rail: max(calc(var(--app-safe-right) + 48px), 62px);
    --vehicle-stage-top: var(--responsive-top-reserve);
    --vehicle-stage-bottom: max(34px, calc(var(--app-safe-bottom) + 24px));
    --game-top-space: max(72px, calc(var(--app-safe-top) + 68px));
    --game-bottom-space: max(72px, calc(var(--app-safe-bottom) + 52px));
    --game-left-space: max(calc(var(--app-safe-left) + 48px), 60px);
    --game-right-space: max(calc(var(--app-safe-right) + 48px), 60px);
  }

  .book-screen .car-button,
  .book-screen .vehicle-card {
    width: min(calc(100vw - var(--responsive-left-rail) - var(--responsive-right-rail)), 620px, 72dvh);
  }

  .book-screen.words-visible .word-panel {
    top: calc(var(--app-safe-top) + ((100dvh - var(--app-safe-top) - var(--app-safe-bottom)) * 0.48));
    width: min(48vw, calc(100vw - var(--responsive-left-rail) - var(--responsive-right-rail)), 500px);
  }

  .book-screen.is-toc-page.words-visible .word-panel,
  .book-screen.is-game-directory-page.words-visible .word-panel {
    top: auto;
    bottom: calc(var(--app-safe-bottom) + 24px);
    width: min(calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 24px), var(--large-bottom-text-max-width));
  }

  .book-screen.is-toc-page .toc-open-book,
  .book-screen.is-game-directory-page .game-book-menu {
    width: auto;
    height: min(calc(100dvh - var(--toc-top-reserve) - var(--toc-bottom-reserve)), calc(64vw - 34px), 520px);
    max-width: calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 104px);
  }

  .book-screen.is-toc-page .toc-vehicle-button {
    max-width: clamp(64px, 10vw, 124px);
  }

  .book-screen.is-game-directory-page .activity-game-card {
    width: min(100%, var(--toc-game-auto-size));
    max-width: var(--toc-game-auto-size);
  }

  .book-screen.is-game-directory-page .activity-game-card-find {
    left: 23%;
    top: 24%;
  }

  .book-screen.is-game-directory-page .activity-game-card-sound {
    left: 48%;
    top: 24%;
  }

  .book-screen.is-game-directory-page .activity-game-card-memory {
    left: 27%;
    top: 66%;
  }

  .book-screen.is-game-directory-page .activity-game-card-pull {
    left: 48%;
    top: 47%;
  }

  .book-screen.is-game-directory-page .activity-game-card-link {
    left: 74%;
    top: 43%;
  }

  .book-screen.is-game-directory-page .activity-game-card-shadow {
    left: 58%;
    top: 70%;
  }

  .book-screen.is-game-directory-page .activity-game-card-parking {
    left: 78%;
    top: 68%;
  }

  .book-screen.is-memory-page .memory-game-host,
  .book-screen.is-link-page .link-game-host {
    height: min(calc(100dvh - var(--game-top-space) - var(--game-bottom-space)), 470px);
    min-height: 220px;
  }

  .book-screen.is-find-page .find-game-page,
  .book-screen.is-sound-page .find-game-page,
  .book-screen.is-shadow-page .find-game-page {
    padding-top: max(58px, calc(var(--app-safe-top) + 52px));
    padding-bottom: max(42px, calc(var(--app-safe-bottom) + 32px));
  }

  .book-screen.is-find-page .find-game-card,
  .book-screen.is-sound-page .find-game-card,
  .book-screen.is-shadow-page .find-game-card {
    gap: 8px;
  }

  .book-screen.is-find-page .find-game-options,
  .book-screen.is-sound-page .find-game-options,
  .book-screen.is-shadow-page .find-game-options {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }

  .book-screen.is-find-page .find-option,
  .book-screen.is-sound-page .find-option,
  .book-screen.is-shadow-page .find-option {
    min-height: 0;
    height: clamp(64px, 19dvh, 78px);
    border-radius: 18px;
    padding: 6px;
  }

  .book-screen.is-find-page .find-option-image-wrap > img,
  .book-screen.is-find-page .find-option-visual,
  .book-screen.is-sound-page .find-option-image-wrap > img,
  .book-screen.is-sound-page .find-option-visual,
  .book-screen.is-shadow-page .find-option-image-wrap > img,
  .book-screen.is-shadow-page .find-option-visual {
    max-height: clamp(58px, 17dvh, 70px);
  }

  .book-screen.is-shadow-page .shadow-prompt {
    width: min(48vw, 360px);
    min-height: clamp(98px, 25dvh, 124px);
    border-radius: 22px;
  }

  .book-screen.is-shadow-page .shadow-difficulty-challenge .shadow-prompt-frame {
    width: min(60%, 220px);
    border-radius: 18px;
  }

  .book-screen.is-shadow-page .shadow-prompt-image {
    max-height: clamp(88px, 22dvh, 112px);
  }

  .book-screen.is-pull-page .pull-game-card {
    grid-template-rows: auto minmax(130px, 1fr) auto;
    gap: 8px;
  }

  .book-screen.is-pull-page .pull-power-panel {
    width: min(100%, 620px);
  }

  .book-screen.is-pull-page .pull-power-track {
    height: clamp(24px, 6.5dvh, 34px);
  }

  .book-screen.is-pull-page .pull-track {
    min-height: clamp(128px, 42dvh, 210px);
    height: min(43dvh, 210px);
    border-radius: 24px;
  }

  .book-screen.is-pull-page .pull-goal-line {
    width: clamp(54px, 8vw, 76px);
  }

  .book-screen.is-pull-page .pull-vehicle-button {
    width: clamp(82px, 15vw, 128px);
  }

  .book-screen.is-pull-page .pull-game-result {
    font-size: clamp(1rem, 4dvh, 1.55rem);
  }

  .book-screen.is-parking-page .parking-game-card {
    grid-template-rows: minmax(190px, 1fr);
    gap: 8px;
  }

  .book-screen.is-parking-page .parking-match-board {
    grid-template-columns: minmax(260px, 1fr) minmax(180px, 0.78fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
  }

  .book-screen.is-parking-page .parking-slot {
    border-radius: 14px;
    min-height: clamp(96px, 25dvh, 160px);
  }

  .book-screen.is-parking-page .parking-garage-grid {
    --parking-vehicle-reserve: clamp(170px, 43dvh, 220px);
    gap: 8px;
  }

  .book-screen.is-parking-page .parking-target-visual {
    width: min(82%, 190px);
  }

  .book-screen.is-parking-page .parking-slot-marker img {
    max-height: clamp(54px, 11dvh, 86px);
  }

  .book-screen.is-parking-page .parking-slot-marker .parking-garage-image {
    width: calc(var(--parking-garage-image-scale) * 100%);
    height: calc(var(--parking-garage-image-scale) * 100%);
    max-height: none;
    object-fit: cover;
  }

  .book-screen.is-parking-page .parking-slot-easy .parking-slot-marker img {
    max-height: none;
  }

  .book-screen.is-activity-page .word-panel.game-instruction-row {
    bottom: calc(var(--app-safe-bottom) + 24px);
  }
}

@media (min-width: 2200px) and (min-height: 1200px) {
  .cover-screen,
  .book-screen {
    --large-vehicle-max-width: 1500px;
    --large-art-max-width: 1500px;
    --large-cover-max-width: 923px;
    --large-book-max-height: 1260px;
    --large-toc-icon-min: 135px;
    --large-toc-game-min: 132px;
    --large-toc-icon-max: 285px;
    --large-toc-game-max: 261px;
    --large-toc-icon-fluid: 14.4dvh;
    --large-toc-game-fluid: 13.8dvh;
    --large-game-host-max-width: 1720px;
    --large-game-host-max-height: 1080px;
    --large-find-card-max-width: 1500px;
    --large-find-options-max-width: 1420px;
    --large-bottom-text-max-width: 1440px;
    --large-ui-min-height: 56px;
    --large-ui-font-size: 1.2rem;
    --large-ui-pad-x: 21px;
    --large-gear-size: 60px;
    --large-gear-font-size: 1.75rem;
    --large-nav-width: 80px;
    --large-nav-height: 154px;
    --large-nav-arrow-size: 29px;
    --large-nav-arrow-stroke: 9px;
    --large-speech-min-width: 360px;
    --large-speech-min-height: 88px;
    --large-speech-font-size: 2rem;
    --large-directory-controls-width: 650px;
    --large-directory-card-max: 286px;
    --large-directory-icon-max: 254px;
    --large-directory-icon-height: 208px;
    --large-difficulty-min-height: 84px;
    --large-difficulty-font-size: 1.36rem;
    --large-difficulty-star-size: 48px;
    --large-find-option-min-height: 282px;
    --large-find-image-max-height: 236px;
    --large-find-image-max-width: 430px;
    --large-find-result-font-size: 2.8rem;
    --large-link-name-font-size: 4rem;
    --large-pull-card-max-width: 1720px;
    --large-pull-track-max-height: 560px;
    --large-pull-meter-max-width: 1120px;
    --large-pull-meter-height: 54px;
    --large-pull-vehicle-width: 320px;
    --large-pull-flag-width: 168px;
    --large-pull-result-font-size: 3.05rem;
    --large-pull-gap: 36px;
    --large-confetti-size: 420px;
    --large-spark-size: 56px;
  }

  .book-screen .car-button,
  .book-screen .vehicle-card {
    width: min(calc(100vw - var(--responsive-left-rail) - var(--responsive-right-rail)), 1500px, 72dvh);
  }

  .book-screen.is-toc-page .toc-open-book,
  .book-screen.is-game-directory-page .game-book-menu {
    max-width: 1680px;
  }
}

@media (min-width: 1700px) and (min-height: 920px) {
  .cover-screen,
  .book-screen {
    --responsive-top-reserve: calc(var(--app-safe-top) + clamp(70px, 5dvh, 100px));
    --responsive-bottom-reserve: calc(var(--app-safe-bottom) + clamp(118px, 10dvh, 170px));
    --responsive-left-rail: max(calc(var(--app-safe-left) + clamp(76px, 5.4vw, 120px)), clamp(92px, 7vw, 132px));
    --responsive-right-rail: max(calc(var(--app-safe-right) + clamp(76px, 5.4vw, 120px)), clamp(92px, 7vw, 132px));
    --vehicle-stage-top: clamp(74px, 7dvh, 122px);
    --vehicle-stage-bottom: clamp(18px, 3dvh, 54px);
    --large-vehicle-max-width: 1320px;
    --large-art-max-width: 1320px;
    --large-cover-max-width: 813px;
    --large-book-max-height: 1100px;
    --large-toc-icon-min: 123px;
    --large-toc-game-min: 120px;
    --large-toc-icon-max: 261px;
    --large-toc-game-max: 240px;
    --large-toc-icon-fluid: 13.8dvh;
    --large-toc-game-fluid: 13.2dvh;
    --large-game-host-max-width: 1520px;
    --large-game-host-max-height: 960px;
    --large-find-card-max-width: 1320px;
    --large-find-options-max-width: 1260px;
    --large-bottom-text-max-width: 1280px;
    --large-ui-min-height: 50px;
    --large-ui-font-size: 1.1rem;
    --large-ui-pad-x: 18px;
    --large-gear-size: 54px;
    --large-gear-font-size: 1.58rem;
    --large-nav-width: 72px;
    --large-nav-height: 138px;
    --large-nav-arrow-size: 26px;
    --large-nav-arrow-stroke: 8px;
    --large-speech-min-width: 320px;
    --large-speech-min-height: 80px;
    --large-speech-font-size: 1.8rem;
    --large-directory-controls-width: 585px;
    --large-directory-card-max: 258px;
    --large-directory-icon-max: 228px;
    --large-directory-icon-height: 186px;
    --large-difficulty-min-height: 76px;
    --large-difficulty-font-size: 1.24rem;
    --large-difficulty-star-size: 43px;
    --large-find-option-min-height: 252px;
    --large-find-image-max-height: 210px;
    --large-find-image-max-width: 386px;
    --large-find-result-font-size: 2.5rem;
    --large-link-name-font-size: 3.6rem;
    --large-pull-card-max-width: 1520px;
    --large-pull-track-max-height: 500px;
    --large-pull-meter-max-width: 990px;
    --large-pull-meter-height: 48px;
    --large-pull-vehicle-width: 285px;
    --large-pull-flag-width: 150px;
    --large-pull-result-font-size: 2.75rem;
    --large-pull-gap: 32px;
    --large-confetti-size: 374px;
    --large-spark-size: 50px;
  }

  .book-screen .word-panel .word-line:first-child {
    font-size: clamp(4.6rem, 5.4vw, 8rem);
  }

  .book-screen .word-panel .word-line:not(:first-child) {
    font-size: clamp(2rem, 2.2vw, 3.4rem);
  }

  .book-screen.is-toc-page .word-panel .word-line:first-child,
  .book-screen.is-toc-page .word-panel .word-line:not(:first-child),
  .book-screen.is-game-directory-page .word-panel .word-line:first-child,
  .book-screen.is-game-directory-page .word-panel .word-line:not(:first-child),
  .book-screen.is-activity-page .word-panel.game-instruction-row .word-line:first-child,
  .book-screen.is-activity-page .word-panel.game-instruction-row .word-line:not(:first-child) {
    font-size: clamp(2.25rem, 3.2vw, 4.6rem);
  }

  .book-screen.is-toc-page .word-panel .word-line:first-child,
  .book-screen.is-toc-page .word-panel .word-line:not(:first-child) {
    font-size: clamp(2.9rem, 4vw, 5.4rem);
  }

  .book-screen.is-activity-page .word-panel.game-instruction-row[data-line-count="1"] .word-line {
    font-size: clamp(2.25rem, 3.2vw, 4.6rem);
  }
}

@media (min-width: 2200px) and (min-height: 1200px) {
  .cover-screen,
  .book-screen {
    --responsive-top-reserve: calc(var(--app-safe-top) + clamp(82px, 5dvh, 128px));
    --responsive-bottom-reserve: calc(var(--app-safe-bottom) + clamp(132px, 9dvh, 210px));
    --responsive-left-rail: max(calc(var(--app-safe-left) + clamp(92px, 5vw, 150px)), clamp(108px, 6.4vw, 172px));
    --responsive-right-rail: max(calc(var(--app-safe-right) + clamp(92px, 5vw, 150px)), clamp(108px, 6.4vw, 172px));
    --vehicle-stage-top: clamp(88px, 6.4dvh, 148px);
    --vehicle-stage-bottom: clamp(24px, 3dvh, 72px);
    --large-vehicle-max-width: 1500px;
    --large-art-max-width: 1500px;
    --large-cover-max-width: 923px;
    --large-book-max-height: 1260px;
    --large-toc-icon-min: 135px;
    --large-toc-game-min: 132px;
    --large-toc-icon-max: 285px;
    --large-toc-game-max: 261px;
    --large-toc-icon-fluid: 14.4dvh;
    --large-toc-game-fluid: 13.8dvh;
    --large-game-host-max-width: 1720px;
    --large-game-host-max-height: 1080px;
    --large-find-card-max-width: 1500px;
    --large-find-options-max-width: 1420px;
    --large-bottom-text-max-width: 1440px;
    --large-ui-min-height: 56px;
    --large-ui-font-size: 1.2rem;
    --large-ui-pad-x: 21px;
    --large-gear-size: 60px;
    --large-gear-font-size: 1.75rem;
    --large-nav-width: 80px;
    --large-nav-height: 154px;
    --large-nav-arrow-size: 29px;
    --large-nav-arrow-stroke: 9px;
    --large-speech-min-width: 360px;
    --large-speech-min-height: 88px;
    --large-speech-font-size: 2rem;
    --large-directory-controls-width: 650px;
    --large-directory-card-max: 286px;
    --large-directory-icon-max: 254px;
    --large-directory-icon-height: 208px;
    --large-difficulty-min-height: 84px;
    --large-difficulty-font-size: 1.36rem;
    --large-difficulty-star-size: 48px;
    --large-find-option-min-height: 282px;
    --large-find-image-max-height: 236px;
    --large-find-image-max-width: 430px;
    --large-find-result-font-size: 2.8rem;
    --large-link-name-font-size: 4rem;
    --large-pull-card-max-width: 1720px;
    --large-pull-track-max-height: 560px;
    --large-pull-meter-max-width: 1120px;
    --large-pull-meter-height: 54px;
    --large-pull-vehicle-width: 320px;
    --large-pull-flag-width: 168px;
    --large-pull-result-font-size: 3.05rem;
    --large-pull-gap: 36px;
    --large-confetti-size: 420px;
    --large-spark-size: 56px;
  }
}

@media (min-width: 3000px) and (min-height: 1650px) {
  .cover-screen,
  .book-screen {
    --responsive-top-reserve: calc(var(--app-safe-top) + clamp(92px, 4.8dvh, 150px));
    --responsive-bottom-reserve: calc(var(--app-safe-bottom) + clamp(150px, 8dvh, 240px));
    --responsive-left-rail: max(calc(var(--app-safe-left) + clamp(116px, 4.8vw, 190px)), clamp(132px, 5.8vw, 220px));
    --responsive-right-rail: max(calc(var(--app-safe-right) + clamp(116px, 4.8vw, 190px)), clamp(132px, 5.8vw, 220px));
    --vehicle-stage-top: clamp(108px, 5.8dvh, 174px);
    --vehicle-stage-bottom: clamp(34px, 3.2dvh, 90px);
    --large-vehicle-max-width: 1920px;
    --large-art-max-width: 1920px;
    --large-cover-max-width: 1190px;
    --large-book-max-height: 1620px;
    --large-toc-icon-min: 162px;
    --large-toc-game-min: 158px;
    --large-toc-icon-max: 345px;
    --large-toc-game-max: 318px;
    --large-toc-icon-fluid: 15.9dvh;
    --large-toc-game-fluid: 15.15dvh;
    --large-game-host-max-width: 2240px;
    --large-game-host-max-height: 1400px;
    --large-find-card-max-width: 1920px;
    --large-find-options-max-width: 1840px;
    --large-bottom-text-max-width: 1900px;
    --large-ui-min-height: 72px;
    --large-ui-font-size: 1.54rem;
    --large-ui-pad-x: 29px;
    --large-gear-size: 78px;
    --large-gear-font-size: 2.25rem;
    --large-nav-width: 104px;
    --large-nav-height: 200px;
    --large-nav-arrow-size: 38px;
    --large-nav-arrow-stroke: 11px;
    --large-speech-min-width: 465px;
    --large-speech-min-height: 114px;
    --large-speech-font-size: 2.6rem;
    --large-directory-controls-width: 845px;
    --large-directory-card-max: 372px;
    --large-directory-icon-max: 330px;
    --large-directory-icon-height: 270px;
    --large-difficulty-min-height: 110px;
    --large-difficulty-font-size: 1.76rem;
    --large-difficulty-star-size: 62px;
    --large-find-option-min-height: 366px;
    --large-find-image-max-height: 308px;
    --large-find-image-max-width: 560px;
    --large-find-result-font-size: 3.7rem;
    --large-link-name-font-size: 5.2rem;
    --large-pull-card-max-width: 2240px;
    --large-pull-track-max-height: 720px;
    --large-pull-meter-max-width: 1460px;
    --large-pull-meter-height: 70px;
    --large-pull-vehicle-width: 420px;
    --large-pull-flag-width: 220px;
    --large-pull-result-font-size: 4.05rem;
    --large-pull-gap: 48px;
    --large-confetti-size: 545px;
    --large-spark-size: 72px;
  }

  .book-screen .word-panel .word-line:first-child {
    font-size: clamp(6.4rem, 4.8vw, 11rem);
  }

  .book-screen .word-panel .word-line:not(:first-child) {
    font-size: clamp(2.8rem, 2vw, 4.8rem);
  }

  .book-screen.is-toc-page .word-panel .word-line:first-child,
  .book-screen.is-toc-page .word-panel .word-line:not(:first-child),
  .book-screen.is-game-directory-page .word-panel .word-line:first-child,
  .book-screen.is-game-directory-page .word-panel .word-line:not(:first-child),
  .book-screen.is-activity-page .word-panel.game-instruction-row .word-line:first-child,
  .book-screen.is-activity-page .word-panel.game-instruction-row .word-line:not(:first-child) {
    font-size: clamp(3.2rem, 2.8vw, 6.2rem);
  }

  .book-screen.is-toc-page .word-panel .word-line:first-child,
  .book-screen.is-toc-page .word-panel .word-line:not(:first-child) {
    font-size: clamp(3.85rem, 3.45vw, 7rem);
  }

  .book-screen.is-activity-page .word-panel.game-instruction-row[data-line-count="1"] .word-line {
    font-size: clamp(3.2rem, 2.8vw, 6.2rem);
  }

  .book-screen .car-button,
  .book-screen .vehicle-card {
    width: min(calc(100vw - var(--responsive-left-rail) - var(--responsive-right-rail)), var(--large-vehicle-max-width), 72dvh);
  }

  .book-screen.is-toc-page .toc-open-book,
  .book-screen.is-game-directory-page .game-book-menu {
    max-width: 2240px;
  }
}

/* TOC icon sizing source of truth:
   viewport sets the base size; saved layout size only multiplies this base. */
.book-screen.is-toc-page,
.book-screen.is-game-directory-page {
  --toc-icon-auto-size: clamp(86px, 14vmin, 260px);
  --toc-game-auto-size: var(--toc-icon-auto-size);
}

.book-screen.is-toc-page {
  --toc-icon-auto-size: clamp(120.4px, 19.6vmin, 364px);
  --toc-game-auto-size: var(--toc-icon-auto-size);
}

.book-screen.is-toc-page .toc-playfield {
  left: 8%;
  right: 8%;
  top: 14%;
  bottom: 24%;
  gap: clamp(8px, 1.4vw, 22px) clamp(10px, 1.8vw, 28px);
}

.book-screen.is-toc-page .toc-vehicle-button {
  width: min(100%, var(--toc-icon-auto-size));
  max-width: var(--toc-icon-auto-size);
}

.book-screen.is-toc-page .toc-game-button {
  width: min(100%, var(--toc-game-auto-size));
  max-width: var(--toc-game-auto-size);
}

.book-screen.is-game-directory-page .activity-game-card {
  width: min(100%, var(--toc-game-auto-size));
  max-width: var(--toc-game-auto-size);
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 940px) {
  .book-screen.is-toc-page,
  .book-screen.is-game-directory-page {
    --toc-icon-auto-size: clamp(70px, 18.5vmin, 118px);
    --toc-game-auto-size: var(--toc-icon-auto-size);
  }

  .book-screen.is-toc-page {
    --toc-icon-auto-size: clamp(98px, 25.9vmin, 165.2px);
    --toc-game-auto-size: var(--toc-icon-auto-size);
  }

  .book-screen.is-toc-page .toc-open-book,
  .book-screen.is-game-directory-page .game-book-menu {
    width: auto;
    height: min(calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom) - 34px), 70vw, 430px);
    max-width: calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 20px);
  }

  .book-screen.is-toc-page .toc-playfield {
    left: 5%;
    right: 5%;
    top: 12%;
    bottom: 21%;
    gap: clamp(4px, 1.2vw, 12px) clamp(5px, 1.4vw, 14px);
  }
}

@media (max-width: 760px) {
  .book-screen.is-toc-page,
  .book-screen.is-game-directory-page {
    --toc-icon-auto-size: clamp(62px, 15.4vmin, 118px);
    --toc-game-auto-size: var(--toc-icon-auto-size);
  }

  .book-screen.is-toc-page {
    --toc-icon-auto-size: clamp(86.8px, 21.56vmin, 165.2px);
    --toc-game-auto-size: var(--toc-icon-auto-size);
  }
}

@media (min-width: 1700px) and (min-height: 920px) {
  .book-screen.is-toc-page,
  .book-screen.is-game-directory-page {
    --toc-icon-auto-size: clamp(142px, 14vmin, 330px);
    --toc-game-auto-size: var(--toc-icon-auto-size);
  }

  .book-screen.is-toc-page {
    --toc-icon-auto-size: clamp(198.8px, 19.6vmin, 462px);
    --toc-game-auto-size: var(--toc-icon-auto-size);
  }
}

@media (min-width: 3000px) and (min-height: 1600px) {
  .book-screen.is-toc-page,
  .book-screen.is-game-directory-page {
    --toc-icon-auto-size: clamp(198px, 14vmin, 430px);
    --toc-game-auto-size: var(--toc-icon-auto-size);
  }

  .book-screen.is-toc-page {
    --toc-icon-auto-size: clamp(277.2px, 19.6vmin, 602px);
    --toc-game-auto-size: var(--toc-icon-auto-size);
  }
}

/* Vehicle page spacing source of truth:
   keep the speech button visually separated from the vehicle bottom. */
.book-screen:not(.is-activity-page):not(.is-toc-page):not(.is-game-directory-page) .police-playground,
.book-screen:not(.is-activity-page):not(.is-toc-page):not(.is-game-directory-page) .vehicle-playground {
  gap: clamp(32px, 6dvh, 72px);
}

.book-screen:not(.is-activity-page):not(.is-toc-page):not(.is-game-directory-page) .speech-challenge {
  transform: translateY(clamp(14px, 2.1dvh, 24px));
}

.book-screen:not(.is-activity-page):not(.is-toc-page):not(.is-game-directory-page) .police-playground:not(:has(.speech-challenge)),
.book-screen:not(.is-activity-page):not(.is-toc-page):not(.is-game-directory-page) .vehicle-playground:not(:has(.speech-challenge)) {
  gap: clamp(20px, 4dvh, 42px);
}

@keyframes pull-wheel-drive {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes pull-wheel-brake {
  0% {
    transform: rotate(0deg);
  }
  52% {
    transform: rotate(-150deg);
  }
  72% {
    transform: rotate(-132deg);
  }
  100% {
    transform: rotate(-138deg);
  }
}

@keyframes pull-resistance-shake {
  0%,
  100% {
    transform: translate3d(var(--pull-shake-left), 0, 0) scale(calc(1 + var(--pull-tension) * 0.05)) rotate(calc(var(--pull-tension) * 2deg));
  }
  25% {
    transform: translate3d(var(--pull-shake-right), var(--pull-shake-up), 0) scale(calc(1 + var(--pull-tension) * 0.05)) rotate(calc((var(--pull-tension) * 2deg) + var(--pull-shake-rot-left)));
  }
  50% {
    transform: translate3d(var(--pull-shake-mid-left), var(--pull-shake-down), 0) scale(calc(1 + var(--pull-tension) * 0.05)) rotate(calc((var(--pull-tension) * 2deg) + var(--pull-shake-rot-right)));
  }
  75% {
    transform: translate3d(var(--pull-shake-mid-right), 0, 0) scale(calc(1 + var(--pull-tension) * 0.05)) rotate(calc((var(--pull-tension) * 2deg) + var(--pull-shake-rot-small)));
  }
}

@keyframes pull-runner-brake {
  0% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  34% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(var(--drive-brake-left), 2px, 0) scale(1.012) rotate(-2deg);
  }
  68% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(var(--drive-bounce-right), -1px, 0) scale(0.998) rotate(1deg);
  }
  100% {
    transform: translate(var(--vehicle-layout-x, 0), var(--vehicle-layout-y, 0)) scale(var(--vehicle-layout-scale, 1)) translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .book-screen:not(.is-activity-page):not(.is-toc-page):not(.is-game-directory-page) .police-playground,
  .book-screen:not(.is-activity-page):not(.is-toc-page):not(.is-game-directory-page) .vehicle-playground {
    gap: clamp(26px, 8dvh, 44px);
  }

  .book-screen:not(.is-activity-page):not(.is-toc-page):not(.is-game-directory-page) .speech-challenge {
    transform: translateY(clamp(8px, 2.6dvh, 14px));
  }
}