:root {
  --sky-top: #53b5f1;
  --sky-bottom: #8be0ff;
  --grass: #8fd65c;
  --ink: #0e2e4f;
  --ink-soft: rgba(14, 46, 79, 0.74);
  --white: rgba(255, 255, 255, 0.98);
  --glass: rgba(5, 38, 64, 0.42);
  --glass-strong: rgba(8, 49, 82, 0.62);
  --glass-border: rgba(255, 255, 255, 0.24);
  --accent: #ffcf48;
  --accent-deep: #ff8f2f;
  --danger: #ffd6b1;
  --success: #d7ffbe;
  --shadow-soft: rgba(11, 55, 90, 0.16);
  --shadow-deep: rgba(8, 40, 68, 0.28);
  --font-ui: "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: "STZhongsong", "Source Han Serif SC", "Songti SC", serif;
  --button-primary-text: #66340d;
  --button-primary-bg:
    linear-gradient(180deg, #ffe9a0 0%, #ffd45a 46%, #f4b241 100%);
  --button-primary-shadow:
    0 18px 28px rgba(228, 157, 48, 0.24),
    inset 0 2px 0 rgba(255, 255, 255, 0.38);
  --button-secondary-text: rgba(250, 248, 241, 0.96);
  --button-secondary-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
    rgba(8, 53, 83, 0.52);
  --button-secondary-border: rgba(207, 232, 247, 0.28);
  --button-secondary-shadow:
    0 18px 28px rgba(8, 40, 68, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --button-accent-text: #16384e;
  --button-accent-bg:
    linear-gradient(180deg, #d9fff7 0%, #aef2df 52%, #7fdbcf 100%);
  --button-accent-shadow:
    0 18px 28px rgba(20, 103, 108, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--font-ui);
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.4), transparent 34%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 66%, var(--grass) 100%);
  color: var(--white);
}

img {
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

[hidden] {
  display: none !important;
}

button {
  font: inherit;
}

.app-shell {
  position: relative;
  width: min(100vw, calc(100dvh * 9 / 16));
  height: min(100dvh, calc(100vw * 16 / 9));
  max-width: 100vw;
  max-height: 100dvh;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  isolation: isolate;
  container-name: app-stage;
  container-type: size;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.45), transparent 36%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 72%, var(--grass) 100%);
  box-shadow: 0 32px 72px rgba(8, 40, 68, 0.28);
}

.screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 18px, 0) scale(0.985);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease,
    filter 0.55s ease;
}

.app-shell[data-screen="opening"] .opening-screen,
.app-shell[data-screen="guide"] .guide-screen,
.app-shell[data-screen="playing"] .game-screen,
.app-shell[data-screen="completed"] .game-screen,
.app-shell[data-screen="result"] .result-screen,
.app-shell[data-screen="benefit"] .benefit-screen {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

.opening-screen,
.guide-screen,
.game-screen,
.result-screen,
.benefit-screen {
  height: 100%;
}

.opening-screen {
  cursor: default;
  isolation: isolate;
  touch-action: manipulation;
  outline: none;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.45), transparent 36%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 72%, var(--grass) 100%);
}

.opening-screen::before,
.opening-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.opening-screen::before {
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.22), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 22%);
  mix-blend-mode: screen;
}

.opening-screen::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 16%),
    linear-gradient(0deg, rgba(9, 50, 82, 0.12), transparent 18%);
  opacity: 0;
  transition: opacity 0.7s ease;
}

.opening-screen[data-phase="idle"] {
  cursor: pointer;
}

.opening-screen[data-phase="idle"]::after {
  opacity: 1;
}

.scene-surface {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: 50% 50%;
  transition:
    transform 0.8s ease,
    filter 0.8s ease,
    opacity 0.8s ease;
}

.layer,
.cloud-shell,
.title-shell,
.plane-shell,
.traveler-shell,
.camera-shell,
.butterfly-shell {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}

.bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transform: scale(1.04);
}

.cloud-shell {
  opacity: 0;
  overflow: hidden;
}

.cloud-shell-a {
  top: 9.2%;
  left: -5%;
  width: clamp(220px, 44cqw, 460px);
}

.cloud-shell-b {
  top: 25.2%;
  right: -11%;
  width: clamp(210px, 42cqw, 430px);
}

.cloud-image {
  width: 100%;
  opacity: 0.58;
  filter: drop-shadow(0 16px 28px rgba(127, 215, 255, 0.08));
}

.logo {
  top: max(22px, calc(env(safe-area-inset-top) + 14px));
  left: 5.2cqw;
  width: clamp(58px, 11cqw, 94px);
  opacity: 0;
  transform: translateY(-10px);
}

.title-shell {
  top: 8.8%;
  left: 50%;
  width: min(90cqw, 860px);
  transform: translateX(-50%) translateY(22px) scale(0.92);
  opacity: 0;
  z-index: 4;
}

.title-image {
  width: 100%;
  filter: drop-shadow(0 24px 34px rgba(18, 94, 149, 0.18));
}

.tusi {
  left: 58%;
  bottom: 15.5%;
  width: clamp(86px, 17cqw, 164px);
  opacity: 0;
  transform: translateY(42px) scale(0.98);
  filter: drop-shadow(0 20px 26px rgba(72, 52, 26, 0.14));
  z-index: 4;
}

.building {
  right: 0.8%;
  bottom: 13%;
  width: clamp(220px, 41cqw, 436px);
  opacity: 0;
  transform: translateY(46px) scale(0.985);
  filter: drop-shadow(0 34px 36px rgba(72, 52, 26, 0.2));
  z-index: 5;
}

.plane-shell {
  top: 34.8%;
  right: 8%;
  width: clamp(124px, 27cqw, 214px);
  aspect-ratio: 706 / 172;
  opacity: 0;
  overflow: hidden;
  transform: translate(36cqw, -12cqh) rotate(-12deg) scale(0.88);
  filter: drop-shadow(0 20px 20px rgba(52, 93, 126, 0.18));
  z-index: 3;
}

.plane-image {
  position: absolute;
  top: -206.23%;
  left: -181.87%;
  width: 305.95%;
  max-width: none;
}

.truck {
  left: -1.5%;
  bottom: 13%;
  width: clamp(124px, 26cqw, 236px);
  opacity: 0;
  transform: translateX(-36cqw) translateY(8px);
  filter: drop-shadow(0 28px 22px rgba(9, 33, 42, 0.14));
  z-index: 4;
}

.traveler-shell {
  left: 49.5%;
  bottom: 1.4%;
  width: clamp(270px, 56cqw, 610px);
  opacity: 0;
  transform: translateX(-50%) translateY(9cqh) scale(0.9);
  filter: drop-shadow(0 34px 44px rgba(8, 40, 68, 0.18));
  z-index: 6;
}

.traveler-image {
  width: 100%;
}

.camera-shell {
  right: 5%;
  bottom: 18.8%;
  width: clamp(58px, 10cqw, 90px);
  opacity: 0;
  transform: translateY(18px) rotate(-8deg);
  filter: drop-shadow(0 18px 18px rgba(8, 50, 86, 0.16));
  z-index: 7;
}

.camera-image {
  width: 100%;
}

.luggage {
  right: -6.2%;
  bottom: 8.2%;
  width: clamp(164px, 33cqw, 308px);
  opacity: 0;
  transform: translate(18cqw, 11cqh) rotate(14deg) scale(0.9);
  filter: drop-shadow(0 26px 22px rgba(145, 111, 15, 0.12));
  z-index: 7;
}

.butterfly-shell {
  left: -4.5%;
  bottom: 0.8%;
  width: clamp(126px, 27cqw, 272px);
  opacity: 0;
  transform: translate(-18cqw, 12cqh) rotate(-18deg) scale(0.72);
  filter: drop-shadow(0 20px 16px rgba(92, 60, 4, 0.16));
  z-index: 8;
}

.butterfly-image {
  width: 100%;
  transform-origin: 50% 50%;
}

.hud {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.loading-copy,
.hint-copy,
.hud-pill,
.completion-pill {
  position: absolute;
  left: 50%;
  margin: 0;
  border-radius: 999px;
  color: var(--white);
  background: rgba(5, 37, 62, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 34px rgba(10, 55, 90, 0.16);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
  white-space: nowrap;
}

.loading-copy,
.hint-copy {
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 18px));
  padding: 11px 18px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
}

.loading-copy {
  opacity: 0.92;
}

.hint-copy {
  opacity: 0;
}

.opening-screen.is-ready .bg {
  animation: bg-enter 0.5s both ease-out;
}

.opening-screen.is-ready .cloud-shell-a {
  animation: fade-rise 0.8s 0.12s both ease-out;
}

.opening-screen.is-ready .cloud-shell-b {
  animation: fade-rise 0.8s 0.28s both ease-out;
}

.opening-screen.is-ready .cloud-shell-a .cloud-image {
  animation: cloud-drift-left 28s 0.7s infinite alternate linear;
}

.opening-screen.is-ready .cloud-shell-b .cloud-image {
  animation: cloud-drift-right 32s 0.7s infinite alternate linear;
}

.opening-screen.is-ready .logo {
  animation: logo-enter 0.55s 0.22s both ease-out;
}

.opening-screen.is-ready .title-shell {
  animation: title-enter 1s 0.4s both cubic-bezier(0.21, 0.95, 0.25, 1);
}

.opening-screen.is-ready .title-image {
  animation: title-breathe 5.8s 1.45s infinite ease-in-out;
}

.opening-screen.is-ready .building {
  animation: layer-lift 0.8s 1s both cubic-bezier(0.2, 0.92, 0.24, 1);
}

.opening-screen.is-ready .tusi {
  animation: layer-lift 0.7s 1.2s both cubic-bezier(0.2, 0.92, 0.24, 1);
}

.opening-screen.is-ready .plane-shell {
  animation: plane-enter 1s 1.1s both cubic-bezier(0.16, 0.86, 0.24, 1);
}

.opening-screen.is-ready .plane-image {
  animation: plane-float 6.2s 2.15s infinite ease-in-out;
}

.opening-screen.is-ready .truck {
  animation: truck-enter 0.8s 1.4s both cubic-bezier(0.16, 0.89, 0.24, 1);
}

.opening-screen.is-ready .traveler-shell {
  animation: traveler-enter 0.95s 1.52s both cubic-bezier(0.18, 0.94, 0.24, 1);
}

.opening-screen.is-ready .traveler-image {
  animation: traveler-breathe 5.6s 2.5s infinite ease-in-out;
}

.opening-screen.is-ready .butterfly-shell {
  animation: butterfly-path 1s 1.6s both cubic-bezier(0.18, 0.9, 0.28, 1);
}

.opening-screen.is-ready .butterfly-image {
  animation: butterfly-flutter 0.36s 2.4s infinite alternate ease-in-out;
}

.opening-screen.is-ready .luggage {
  animation: luggage-enter 0.7s 1.8s both cubic-bezier(0.18, 1, 0.28, 1);
}

.opening-screen.is-ready .camera-shell {
  animation: camera-enter 0.55s 2s both ease-out;
}

.opening-screen.is-ready .camera-image {
  animation: camera-sway 4.2s 2.55s infinite ease-in-out;
}

.opening-screen[data-phase="boot"] .hint-copy,
.opening-screen[data-phase="intro"] .hint-copy {
  pointer-events: none;
}

.opening-screen[data-phase="intro"] .hint-copy {
  animation: hint-in 0.65s 2.7s both ease-out, hint-pulse 2.8s 3.35s infinite ease-in-out;
}

.opening-screen[data-phase="idle"] .hint-copy {
  opacity: 1;
  animation: hint-pulse 2.8s infinite ease-in-out;
}

.opening-screen[data-phase="intro"] .loading-copy,
.opening-screen[data-phase="idle"] .loading-copy {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.guide-screen,
.game-screen {
  background: linear-gradient(180deg, rgba(2, 24, 42, 0.08), rgba(2, 24, 42, 0.2));
}

.guide-screen::before,
.guide-screen::after,
.game-screen::before,
.game-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.guide-screen::before,
.game-screen::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 24%),
    linear-gradient(0deg, rgba(5, 24, 43, 0.18), transparent 22%);
}

.guide-screen::after,
.game-screen::after {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.18), transparent 24%),
    radial-gradient(circle at 80% 18%, rgba(255, 255, 255, 0.18), transparent 28%);
  mix-blend-mode: screen;
}

.guide-scene,
.game-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.guide-bg,
.game-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.guide-cloud,
.guide-plane,
.guide-landmark,
.ambient-cloud,
.ambient-plane,
.game-foreground-grass,
.landmark-item,
.hurdle-item,
.runner-zone {
  position: absolute;
  will-change: transform, opacity;
}

.guide-cloud img,
.guide-plane img,
.guide-landmark,
.ambient-cloud img,
.ambient-plane img,
.game-foreground-grass,
.landmark-item img,
.hurdle-item img {
  width: 100%;
}

.guide-cloud-a,
.ambient-cloud-a {
  top: 6%;
  left: -12%;
  width: clamp(240px, 64cqw, 420px);
  opacity: 0.58;
}

.guide-cloud-b,
.ambient-cloud-b {
  top: 14%;
  right: -18%;
  width: clamp(220px, 56cqw, 380px);
  opacity: 0.48;
}

.guide-cloud-a,
.ambient-cloud-a {
  animation: guide-cloud-left 10s infinite alternate ease-in-out;
}

.guide-cloud-b,
.ambient-cloud-b {
  animation: guide-cloud-right 12s infinite alternate ease-in-out;
}

.guide-plane,
.ambient-plane {
  top: 16%;
  right: -6%;
  width: clamp(124px, 30cqw, 210px);
  opacity: 0.94;
  filter: drop-shadow(0 20px 20px rgba(52, 93, 126, 0.16));
  animation: plane-cruise 11s infinite ease-in-out;
}

.game-foreground-grass {
  left: -2%;
  bottom: 10%;
  width: clamp(270px, 66cqw, 540px);
  z-index: 3;
  opacity: 0.96;
  filter: drop-shadow(0 14px 20px rgba(34, 75, 41, 0.14));
}

.guide-landmark {
  opacity: 0.9;
  filter: drop-shadow(0 20px 30px rgba(53, 72, 88, 0.18));
}

.guide-landmark-enshi {
  left: 6%;
  bottom: 19%;
  width: clamp(150px, 34cqw, 220px);
  animation: landmark-float 10s infinite ease-in-out;
}

.guide-landmark-tower {
  right: 18%;
  bottom: 30%;
  width: clamp(48px, 11cqw, 72px);
  opacity: 0.76;
  animation: landmark-float 8s 0.8s infinite ease-in-out;
}

.guide-landmark-dam {
  right: -3%;
  bottom: 21%;
  width: clamp(172px, 39cqw, 250px);
  opacity: 0.84;
  animation: landmark-float 12s 0.4s infinite ease-in-out;
}

.guide-dialog {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(env(safe-area-inset-top) + 10cqh);
  width: min(88cqw, 420px);
  max-height: calc(100cqh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 18px);
  padding: 22px 20px 20px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 32%),
    rgba(8, 49, 82, 0.56);
  box-shadow:
    0 22px 48px rgba(8, 40, 68, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(-50%);
}

.guide-screen[data-tone="warning"] .guide-dialog {
  background:
    linear-gradient(180deg, rgba(255, 226, 194, 0.2), transparent 34%),
    rgba(92, 54, 25, 0.68);
  border-color: rgba(255, 223, 181, 0.34);
}

.guide-dialog__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.guide-logo {
  width: clamp(48px, 12cqw, 64px);
}

.guide-theme {
  width: min(60cqw, 240px);
}

.guide-kicker {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.22em;
  color: rgba(255, 231, 171, 0.94);
  text-transform: uppercase;
}

.guide-participant {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 700;
  color: rgba(255, 244, 208, 0.98);
  text-shadow: 0 2px 12px rgba(7, 44, 79, 0.24);
}

.guide-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 7cqw, 34px);
  line-height: 1.24;
  text-wrap: balance;
}

.guide-copy {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.92);
}

.guide-status {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(244, 249, 255, 0.92);
}

.guide-screen[data-tone="warning"] .guide-status {
  background: rgba(255, 244, 224, 0.14);
  color: var(--danger);
}

.guide-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  position: relative;
  z-index: 2;
}

.guide-start {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 15px 20px;
  border: 0;
  border-radius: 999px;
  color: var(--button-primary-text);
  background: var(--button-primary-bg);
  box-shadow: var(--button-primary-shadow);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.25s ease;
}

.guide-actions .guide-start,
.guide-actions .guide-secondary,
.result-route-card > .guide-start,
.result-route-card__actions .guide-start,
.result-route-card__actions .guide-secondary,
.result-footer-actions .guide-start,
.result-footer-actions .guide-secondary,
.benefit-actions .guide-start,
.benefit-actions .guide-secondary {
  flex: 1 1 0;
  width: auto;
  margin-top: 0;
}

.guide-secondary {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 15px 20px;
  border: 1px solid var(--button-secondary-border);
  border-radius: 999px;
  color: var(--button-secondary-text);
  background: var(--button-secondary-bg);
  box-shadow: var(--button-secondary-shadow);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.guide-secondary:active {
  transform: translateY(1px) scale(0.994);
}

.guide-secondary:hover {
  border-color: rgba(224, 241, 250, 0.46);
}

.guide-start:active {
  transform: translateY(1px) scale(0.994);
}

.guide-start:disabled {
  cursor: progress;
  opacity: 0.78;
  box-shadow: 0 14px 24px rgba(228, 157, 48, 0.18);
}

.guide-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  box-shadow: 0 14px 24px rgba(8, 40, 68, 0.12);
}

.game-screen {
  filter: saturate(1.02);
}

.game-brand {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.game-logo,
.game-theme {
  position: absolute;
  will-change: transform, opacity;
}

.game-logo {
  top: max(20px, calc(env(safe-area-inset-top) + 12px));
  left: 5cqw;
  width: clamp(58px, 11cqw, 88px);
  filter: drop-shadow(0 14px 24px rgba(9, 37, 66, 0.12));
}

.game-theme {
  top: calc(env(safe-area-inset-top) + 5.6cqh);
  left: 50%;
  width: min(82cqw, 760px);
  opacity: 0.98;
  filter: drop-shadow(0 22px 30px rgba(19, 97, 152, 0.18));
  transform: translateX(-50%);
}

.landmark-track,
.hurdle-track {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.landmark-item,
.hurdle-item {
  left: 0;
  opacity: 0;
  transform: translate3d(120cqw, 0, 0);
}

.landmark-item {
  z-index: 2;
  filter: drop-shadow(0 20px 30px rgba(42, 64, 76, 0.18));
}

.hurdle-item {
  z-index: 4;
  filter: drop-shadow(0 10px 18px rgba(58, 39, 23, 0.18));
}

.hurdle-item[data-type="obstacle"] {
  z-index: 4;
  filter: drop-shadow(0 12px 18px rgba(56, 43, 30, 0.18));
}

.runner-zone {
  left: 0;
  z-index: 5;
  transform: translate3d(var(--runner-crash-x, 0px), var(--runner-crash-y, 0px), 0);
}

.runner-shadow {
  position: absolute;
  left: 50%;
  bottom: 1.5%;
  width: 54%;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(25, 38, 54, 0.26), rgba(25, 38, 54, 0.04) 76%);
  transform: translateX(-50%) scaleX(var(--shadow-scale, 1));
  transform-origin: center center;
  transition: transform 0.1s linear;
}

.runner-body {
  position: relative;
  width: 100%;
  transform-origin: 50% 100%;
  transform:
    translate3d(0, var(--jump-offset, 0px), 0)
    rotate(calc(var(--runner-tilt, 0deg) + var(--runner-extra-tilt, 0deg)));
  filter: drop-shadow(0 18px 26px rgba(12, 33, 54, 0.18));
}

.runner-body img {
  width: 100%;
}

.runner-body[data-mode="idle"] img {
  animation: runner-idle 1.8s infinite ease-in-out;
}

.runner-body[data-mode="run"] img {
  animation: runner-run 0.34s infinite alternate ease-in-out;
}

.runner-body[data-mode="jump"] img {
  animation: none;
}

.runner-body[data-mode="crash"] img {
  animation: none;
}

.runner-body[data-mode="crash"] {
  filter: drop-shadow(0 12px 20px rgba(12, 33, 54, 0.12));
}

.runner-zone,
.runner-body,
.runner-shadow,
.hurdle-item {
  will-change: transform, opacity;
}

.runner-shadow {
  opacity: var(--runner-shadow-opacity, 1);
}

.game-hud {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.hud-cluster {
  position: absolute;
  left: 50%;
  bottom: max(114px, calc(env(safe-area-inset-bottom) + 108px));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: min(86cqw, 340px);
  transform: translateX(-50%);
}

.hud-pill {
  top: max(18px, calc(env(safe-area-inset-top) + 8px));
  bottom: auto;
  width: min(54cqw, 220px);
  padding: 8px 12px;
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-align: center;
}

.mode-pill,
.stat-pill {
  margin: 0;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(5, 37, 62, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 26px rgba(10, 55, 90, 0.14);
  color: rgba(255, 255, 255, 0.94);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.06em;
  backdrop-filter: blur(10px);
}

.hud-bottom {
  position: absolute;
  left: 50%;
  bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px));
  width: min(84cqw, 332px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
  transform: translateX(-50%);
}

.volume-meter {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(5, 37, 62, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 34px rgba(10, 55, 90, 0.16);
  backdrop-filter: blur(12px);
}

.volume-meter__label {
  flex: 0 0 auto;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.86);
}

.volume-meter__track {
  position: relative;
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.volume-meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8ef3ff 0%, #ffd568 50%, #ff9d57 100%);
  transition: width 0.12s ease;
}

.boost-button {
  border: 0;
  border-radius: 999px;
  padding: 13px 18px;
  color: var(--button-accent-text);
  background: var(--button-accent-bg);
  box-shadow: var(--button-accent-shadow);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.boost-button:active,
.boost-button.is-active {
  transform: translateY(1px) scale(0.992);
  box-shadow:
    0 14px 22px rgba(20, 103, 108, 0.22),
    inset 0 2px 0 rgba(255, 255, 255, 0.42);
  filter: saturate(1.06);
}

.boost-button[hidden] {
  display: none;
}

.completion-pill {
  top: auto;
  bottom: max(120px, calc(env(safe-area-inset-bottom) + 112px));
  padding: 10px 16px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.app-shell[data-screen="completed"] .completion-pill {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.game-fail-dialog {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding:
    max(14px, calc(env(safe-area-inset-top) + 12px))
    16px
    max(14px, calc(env(safe-area-inset-bottom) + 12px));
  background: rgba(3, 24, 44, 0.34);
  backdrop-filter: blur(10px);
  pointer-events: auto;
}

.game-fail-dialog__panel {
  width: min(86cqw, 360px);
  padding: 22px 20px 20px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 34%),
    rgba(6, 43, 71, 0.76);
  box-shadow:
    0 28px 48px rgba(8, 40, 68, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px);
  animation: poster-dialog-rise 0.35s both cubic-bezier(0.16, 0.9, 0.24, 1);
}

.game-fail-dialog__kicker {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.2em;
  color: rgba(255, 226, 166, 0.96);
}

.game-fail-dialog__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 6.4cqw, 32px);
  line-height: 1.18;
  color: rgba(255, 255, 255, 0.98);
}

.game-fail-dialog__copy {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(244, 249, 255, 0.9);
}

.game-fail-dialog__actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.game-fail-dialog__actions .guide-start,
.game-fail-dialog__actions .guide-secondary {
  width: 100%;
  margin-top: 0;
}

.result-screen,
.benefit-screen {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.16), transparent 24%),
    linear-gradient(180deg, rgba(8, 39, 67, 0.22), rgba(8, 39, 67, 0.34));
}

.result-screen::before,
.benefit-screen::before,
.result-screen::after,
.benefit-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.result-screen::before,
.benefit-screen::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 18%),
    linear-gradient(0deg, rgba(9, 42, 72, 0.18), transparent 22%);
}

.result-screen::after,
.benefit-screen::after {
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.16), transparent 28%),
    radial-gradient(circle at 16% 76%, rgba(255, 255, 255, 0.12), transparent 24%);
  mix-blend-mode: screen;
}

.result-panel,
.benefit-dialog {
  position: absolute;
  left: 50%;
  width: min(92cqw, 450px);
  max-height: calc(100cqh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 36px);
  padding: 22px 20px 20px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 34%),
    rgba(7, 47, 78, 0.6);
  box-shadow:
    0 26px 52px rgba(8, 40, 68, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px);
  overflow: auto;
  transform: translateX(-50%);
  animation: panel-rise 0.7s both cubic-bezier(0.16, 0.9, 0.24, 1);
  z-index: 2;
}

.result-panel {
  top: calc(env(safe-area-inset-top) + 18px);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.result-panel::-webkit-scrollbar {
  display: none;
}

.benefit-dialog {
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
}

.result-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

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

.result-share-button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow:
    0 14px 24px rgba(228, 157, 48, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(10px);
}

.result-share-button:active {
  transform: translateY(1px);
}

.result-logo {
  width: clamp(48px, 12cqw, 62px);
}

.result-theme {
  width: min(60cqw, 240px);
}

.result-kicker,
.benefit-kicker {
  margin: 16px 0 8px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.24em;
  color: rgba(255, 230, 166, 0.96);
  text-transform: uppercase;
}

.result-title,
.benefit-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 7cqw, 36px);
  line-height: 1.18;
  text-wrap: balance;
}

.result-lead {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(244, 249, 255, 0.88);
}

.result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.result-chip {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.94);
}

.result-figure {
  margin: 18px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 26px 40px rgba(8, 40, 68, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.result-figure img {
  width: 100%;
  max-height: min(46cqh, 520px);
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center top;
}

.result-summary,
.result-share-tip,
.benefit-copy,
.benefit-hint,
.benefit-qr-caption {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.72;
  color: rgba(244, 249, 255, 0.94);
}

.result-share-tip {
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 242, 205, 0.94);
}

.result-share-tip.is-unlocked {
  background: rgba(255, 214, 116, 0.18);
  border-color: rgba(255, 214, 116, 0.34);
  color: rgba(255, 249, 234, 0.98);
}

.result-route-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.result-route-card {
  padding: 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 20px 36px rgba(8, 40, 68, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.result-route-card--primary {
  background:
    linear-gradient(180deg, rgba(255, 224, 165, 0.16), transparent 100%),
    rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 226, 168, 0.26);
}

.result-route-card__kicker {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.22em;
  color: rgba(255, 230, 166, 0.96);
  text-transform: uppercase;
}

.result-route-card__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.34;
  color: rgba(255, 255, 255, 0.98);
}

.result-route-card__copy {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.68;
  color: rgba(244, 249, 255, 0.92);
}

.result-route-card > .guide-start {
  margin-top: 16px;
  width: 100%;
}

.result-route-card__actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.benefit-copy code {
  padding: 0 4px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 243, 197, 0.94);
}

.result-footer-actions,
.benefit-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.result-replay-button--locked {
  box-shadow:
    0 16px 28px rgba(10, 55, 90, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.result-screen.has-poster-dialog .result-panel {
  pointer-events: none;
}

.poster-dialog {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding:
    max(12px, calc(env(safe-area-inset-top) + 10px))
    14px
    max(12px, calc(env(safe-area-inset-bottom) + 10px));
  overflow-y: auto;
  background: rgba(4, 26, 45, 0.52);
  backdrop-filter: blur(12px);
}

.poster-dialog__panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: calc(100cqh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
  margin: auto;
  overflow: auto;
  padding: 22px 16px 16px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 34%),
    rgba(7, 47, 78, 0.84);
  box-shadow:
    0 28px 48px rgba(8, 40, 68, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  animation: poster-dialog-rise 0.35s both cubic-bezier(0.16, 0.9, 0.24, 1);
}

.poster-dialog__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.96);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.poster-dialog__close:active {
  transform: scale(0.98);
}

.poster-dialog__kicker {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.22em;
  color: rgba(255, 230, 166, 0.96);
  text-transform: uppercase;
}

.poster-dialog__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 6cqw, 32px);
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.98);
  text-wrap: balance;
}

.poster-dialog__copy {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.68;
  color: rgba(244, 249, 255, 0.92);
}

.poster-dialog__preview-shell {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.poster-dialog__frame {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 100%),
    rgba(255, 255, 255, 0.08);
  box-shadow:
    0 20px 36px rgba(8, 40, 68, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.poster-dialog__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(7, 47, 78, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 246, 218, 0.98);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.12em;
}

.poster-dialog__frame img {
  display: block;
  width: 100%;
  max-height: min(44cqh, 460px);
  height: auto;
  object-fit: contain;
  object-position: center top;
}

.poster-dialog__selected {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.poster-dialog__selected-thumb {
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.poster-dialog__selected-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.poster-dialog__selected-copy {
  min-width: 0;
}

.poster-dialog__selected-label {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: rgba(255, 230, 166, 0.96);
}

.poster-dialog__file-name {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(244, 249, 255, 0.92);
  word-break: break-all;
}

.poster-dialog__actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.poster-dialog__actions .guide-start {
  width: 100%;
  margin-top: 0;
}

.benefit-qr-shell {
  margin-top: 18px;
  padding: 18px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px dashed rgba(255, 255, 255, 0.24);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.benefit-qr-image {
  width: min(56cqw, 208px);
  aspect-ratio: 1;
  object-fit: cover;
  padding: 10px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 18px 30px rgba(8, 40, 68, 0.16),
    inset 0 0 0 1px rgba(8, 40, 68, 0.06);
}

.benefit-qr-placeholder {
  width: min(56cqw, 208px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: 24px;
  border: 2px dashed rgba(255, 255, 255, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(9, 42, 72, 0.3);
  color: rgba(255, 245, 218, 0.96);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  letter-spacing: 0.08em;
}

.benefit-qr-caption {
  margin: 0;
  font-size: 13px;
  color: rgba(244, 249, 255, 0.8);
}

.benefit-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.benefit-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.benefit-card-art {
  position: absolute;
  top: 16.0677cqh;
  left: 50%;
  width: 93.8889cqw;
  aspect-ratio: 2028 / 2169;
  transform: translateX(-50%);
  z-index: 2;
}

.benefit-card-art__image {
  display: block;
  width: 100%;
  filter: drop-shadow(0 30px 40px rgba(8, 40, 68, 0.16));
  animation: card-float 5.2s infinite ease-in-out;
}

.benefit-entry-hotspot {
  position: absolute;
  left: 5.8%;
  bottom: 5.4%;
  width: 88.1%;
  height: 14.2%;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.benefit-entry-hotspot:focus-visible {
  outline: 2px dashed rgba(255, 231, 171, 0.96);
  outline-offset: 4px;
}

.benefit-screen[data-phase="landing"] .benefit-dialog {
  display: none;
}

.benefit-screen[data-phase="detail"] .benefit-card-art {
  display: none;
}

.toast {
  position: absolute;
  left: 50%;
  bottom: max(134px, calc(env(safe-area-inset-bottom) + 124px));
  z-index: 10;
  max-width: min(64cqw, 240px);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(5, 37, 62, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 34px rgba(10, 55, 90, 0.16);
  color: rgba(255, 255, 255, 0.96);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  transform: translateX(-50%) translateY(18px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@keyframes bg-enter {
  from {
    opacity: 0;
    transform: scale(1.04);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fade-rise {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes logo-enter {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes title-enter {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(22px) scale(0.92);
  }

  70% {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px) scale(1.008);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes title-breathe {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.012);
  }
}

@keyframes layer-lift {
  from {
    opacity: 0;
    transform: translateY(42px) scale(0.985);
  }

  75% {
    opacity: 1;
    transform: translateY(-2px) scale(1.004);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes plane-enter {
  0% {
    opacity: 0;
    transform: translate3d(8cqw, 3.2cqh, 0) rotate(-3.6deg) scale(0.96);
  }

  70% {
    opacity: 1;
    transform: translate3d(-1cqw, -0.6cqh, 0) rotate(1.2deg) scale(1.01);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes plane-float {
  0% {
    transform: translate3d(0, 0, 0) rotate(-0.4deg);
  }

  50% {
    transform: translate3d(-1.4cqw, -0.8cqh, 0) rotate(0.8deg);
  }

  100% {
    transform: translate3d(-0.6cqw, 0.55cqh, 0) rotate(-0.2deg);
  }
}

@keyframes truck-enter {
  0% {
    opacity: 0;
    transform: translateX(-30cqw) translateY(8px);
  }

  70% {
    opacity: 1;
    transform: translateX(1.2cqw) translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes luggage-enter {
  0% {
    opacity: 0;
    transform: translate(16cqw, 10cqh) rotate(15deg) scale(0.92);
  }

  72% {
    opacity: 1;
    transform: translate(-0.4cqw, -1cqh) rotate(-1deg) scale(1.01);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

@keyframes camera-enter {
  from {
    opacity: 0;
    transform: translateY(18px) rotate(-8deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes camera-sway {
  0%,
  100% {
    transform: rotate(0deg) translateY(0);
  }

  50% {
    transform: rotate(-3deg) translateY(-2px);
  }
}

@keyframes butterfly-path {
  0% {
    opacity: 0;
    transform: translate(-16cqw, 10cqh) rotate(-18deg) scale(0.74);
  }

  48% {
    opacity: 1;
    transform: translate(5cqw, -4cqh) rotate(7deg) scale(0.97);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

@keyframes butterfly-flutter {
  0%,
  100% {
    transform: rotate(-4deg) scale(0.99);
  }

  50% {
    transform: rotate(4deg) scale(1.015);
  }
}

@keyframes traveler-enter {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(8cqh) scale(0.9);
  }

  68% {
    opacity: 1;
    transform: translateX(-50%) translateY(-1.2cqh) scale(1.015);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes traveler-breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-4px) scale(1.01);
  }
}

@keyframes cloud-drift-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(34px);
  }
}

@keyframes cloud-drift-right {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-40px);
  }
}

@keyframes hint-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes hint-pulse {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
    box-shadow: 0 16px 30px rgba(12, 71, 117, 0.12);
  }

  50% {
    transform: translateX(-50%) translateY(-3px);
    box-shadow: 0 18px 34px rgba(12, 71, 117, 0.16);
  }
}

@keyframes guide-cloud-left {
  0% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(18px, -1cqh, 0);
  }

  100% {
    transform: translate3d(32px, 0.6cqh, 0);
  }
}

@keyframes guide-cloud-right {
  0% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(-16px, 0.8cqh, 0);
  }

  100% {
    transform: translate3d(-30px, -0.8cqh, 0);
  }
}

@keyframes plane-cruise {
  0% {
    transform: translate3d(0, 0, 0) rotate(-2deg);
  }

  30% {
    transform: translate3d(-6cqw, -1cqh, 0) rotate(0deg);
  }

  70% {
    transform: translate3d(-12cqw, 0.8cqh, 0) rotate(2deg);
  }

  100% {
    transform: translate3d(-18cqw, -0.4cqh, 0) rotate(0deg);
  }
}

@keyframes landmark-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -6px, 0);
  }
}

@keyframes runner-idle {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

@keyframes runner-run {
  0% {
    transform: translateY(0) rotate(-1deg);
  }

  100% {
    transform: translateY(-5px) rotate(1deg);
  }
}

@keyframes panel-rise {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(16px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes poster-dialog-rise {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes card-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@container app-stage (min-width: 421px) {
  .title-shell {
    top: 8.1%;
    width: min(88cqw, 920px);
  }

  .building {
    right: 1.4%;
    bottom: 13%;
    width: clamp(250px, 40cqw, 452px);
  }

  .traveler-shell {
    bottom: 1.2%;
    width: clamp(310px, 54cqw, 640px);
  }

  .guide-dialog {
    top: calc(env(safe-area-inset-top) + 11cqh);
    padding: 24px 22px 22px;
  }

  .result-panel,
  .benefit-dialog {
    width: min(86cqw, 470px);
    padding: 24px 22px 22px;
  }

  .game-fail-dialog__panel {
    width: min(82cqw, 390px);
    padding: 24px 22px 22px;
  }
}

@container app-stage (max-width: 389px) {
  .title-shell {
    top: 10.4%;
    width: 90cqw;
  }

  .plane-shell {
    top: 36.5%;
    right: 6.5%;
    width: 30cqw;
  }

  .traveler-shell {
    left: 50%;
    bottom: 2.4%;
    width: 67cqw;
  }

  .building {
    right: 0;
    bottom: 14%;
    width: 43cqw;
  }

  .truck {
    left: -2.5%;
    bottom: 13.6%;
    width: 28cqw;
  }

  .camera-shell {
    right: 3%;
    bottom: 18.5%;
    width: 11cqw;
  }

  .luggage {
    right: -8%;
    bottom: 8.4%;
    width: 34cqw;
  }

  .butterfly-shell {
    left: -7%;
    bottom: 1.2%;
    width: 30cqw;
  }

  .guide-dialog {
    top: calc(env(safe-area-inset-top) + 8cqh);
    width: 90cqw;
    padding: 20px 18px 18px;
  }

  .guide-copy {
    font-size: 14px;
  }

  .guide-actions,
  .result-route-card__actions,
  .result-footer-actions,
  .benefit-actions,
  .poster-dialog__actions,
  .game-fail-dialog__actions {
    flex-direction: column;
  }

  .guide-actions {
    flex-direction: row;
  }

  .poster-dialog {
    padding:
      max(10px, calc(env(safe-area-inset-top) + 8px))
      10px
      max(10px, calc(env(safe-area-inset-bottom) + 8px));
  }

  .poster-dialog__panel {
    padding: 20px 14px 14px;
    border-radius: 22px;
  }

  .poster-dialog__frame img {
    max-height: min(38cqh, 360px);
  }

  .poster-dialog__selected {
    grid-template-columns: 60px 1fr;
    gap: 10px;
    padding: 10px;
  }

  .hud-cluster {
    width: 92cqw;
  }

}

@container app-stage (max-width: 480px) {
  .game-logo {
    top: max(18px, calc(env(safe-area-inset-top) + 10px));
    left: 4cqw;
    width: 14cqw;
  }

  .game-theme {
    top: calc(env(safe-area-inset-top) + 6.6cqh);
    width: 80cqw;
  }

  .ambient-cloud-a {
    top: 12.2%;
    left: -16%;
    width: 46cqw;
  }

  .ambient-cloud-b {
    top: 12%;
    right: -10%;
    width: 34cqw;
  }

  .ambient-plane {
    top: 9.8%;
    right: -2%;
    width: 34cqw;
  }

  .hud-pill {
    top: max(14px, calc(env(safe-area-inset-top) + 8px));
    bottom: auto;
    width: min(56cqw, 210px);
  }

  .hud-cluster {
    bottom: max(112px, calc(env(safe-area-inset-bottom) + 104px));
    width: 84cqw;
  }

  .game-bg {
    object-position: center 52%;
  }

  .title-shell {
    top: 9.8%;
    width: 91cqw;
  }

  .building {
    right: 0.4%;
    bottom: 13.8%;
    width: 42cqw;
  }

  .traveler-shell {
    left: 50%;
    bottom: 2%;
    width: min(66cqw, 420px);
  }

  .truck {
    left: -2%;
    bottom: 13.8%;
    width: min(28cqw, 168px);
  }

  .camera-shell {
    right: 3.8%;
    bottom: 18.6%;
    width: min(11cqw, 56px);
  }

  .luggage {
    right: -7.2%;
    bottom: 8.7%;
    width: min(34cqw, 184px);
  }

  .butterfly-shell {
    left: -6%;
    bottom: 1%;
    width: min(31cqw, 176px);
  }

}



.opening-screen .cloud-shell-a {
  top: 9%;
  left: -6%;
  width: min(40cqw, 188px);
}

.opening-screen .cloud-shell-b {
  top: 21%;
  right: -12%;
  width: min(34cqw, 160px);
}

.opening-screen .logo {
  top: max(16px, calc(env(safe-area-inset-top) + 10px));
  left: 4.9%;
  width: clamp(38px, 10.4cqw, 52px);
}

.opening-screen .title-shell {
  top: 6.4%;
  width: min(84.5cqw, 382px);
}

.opening-screen .tusi {
  left: 59%;
  bottom: 13.2%;
  width: min(16.8cqw, 76px);
  z-index: 5;
}

.opening-screen .building {
  right: -1.2%;
  bottom: 6.2%;
  width: min(47.2cqw, 214px);
  z-index: 7;
}

.opening-screen .plane-shell {
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  opacity: 1;
  overflow: visible;
  background:
    url("./h5-zi-liao/01-feng-mian-zhu-ti/fei-ji.png")
    center center / 100% auto no-repeat;
  transform-origin: 76% 40%;
  transform: translate3d(8cqw, 3.2cqh, 0) rotate(-3.6deg) scale(0.96);
  filter: drop-shadow(0 18px 22px rgba(42, 77, 111, 0.18));
  z-index: 6;
}

.opening-screen .plane-image {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  max-width: none;
  transform-origin: 76% 40%;
}

.opening-screen .truck {
  left: -5.4%;
  bottom: 4.8%;
  width: min(22.8cqw, 102px);
  transform: translateX(-30cqw) translateY(8px);
  z-index: 6;
}

.opening-screen .traveler-shell {
  left: 50%;
  bottom: -4.2%;
  width: min(79.5cqw, 360px);
  transform: translateX(-50%) translateY(8cqh) scale(0.9);
  z-index: 8;
}

.opening-screen .camera-shell {
  right: 1.8%;
  bottom: 12.8%;
  width: min(13.2cqw, 60px);
  transform: translateY(16px) rotate(-7deg);
  z-index: 9;
}

.opening-screen .luggage {
  right: -11.5%;
  bottom: 0.8%;
  width: min(35.4cqw, 160px);
  transform: translate(16cqw, 10cqh) rotate(15deg) scale(0.92);
  z-index: 9;
}

.opening-screen .butterfly-shell {
  left: -10.2%;
  bottom: -2.6%;
  width: min(31cqw, 142px);
  transform: translate(-16cqw, 10cqh) rotate(-18deg) scale(0.74);
  z-index: 10;
}
/* Layout Debug Sync Start */
/* Synced from layout debug */

/* 开屏页 */
/* 开屏 / Logo */
#opening-screen .logo {
  --layout-debug-x: 0.4;
  --layout-debug-y: 2.1;
  --layout-debug-size: 1;
  --layout-debug-rotate: 0;
}

/* 开屏 / 主题字 */
#opening-screen .title-shell {
  --layout-debug-x: 9.8;
  --layout-debug-y: 5.5;
  --layout-debug-size: 1.26;
  --layout-debug-rotate: 0;
}

/* 开屏 / 土司城 */
#opening-screen .tusi {
  --layout-debug-x: 2.9;
  --layout-debug-y: -35;
  --layout-debug-size: 1.42;
  --layout-debug-rotate: 0;
}

/* 开屏 / 建筑 */
#opening-screen .building {
  --layout-debug-x: -8.3;
  --layout-debug-y: -28.1;
  --layout-debug-size: 1.26;
  --layout-debug-rotate: 0;
}

/* 开屏 / 卡车 */
#opening-screen .truck {
  --layout-debug-x: 15;
  --layout-debug-y: -23.8;
  --layout-debug-size: 1.8;
  --layout-debug-rotate: 0;
}

/* 开屏 / 人物 */
#opening-screen .traveler-shell {
  --layout-debug-x: 15.9;
  --layout-debug-y: -20.3;
  --layout-debug-size: 1.23;
  --layout-debug-rotate: 0;
}

/* 开屏 / 相机 */
#opening-screen .camera-shell {
  --layout-debug-x: -3.1;
  --layout-debug-y: -22.1;
  --layout-debug-size: 1;
  --layout-debug-rotate: 0;
}

/* 开屏 / 行李箱 */
#opening-screen .luggage {
  --layout-debug-x: -16;
  --layout-debug-y: -24.6;
  --layout-debug-size: 1;
  --layout-debug-rotate: 0;
}

/* 开屏 / 蝴蝶 */
#opening-screen .butterfly-shell {
  --layout-debug-x: 17.6;
  --layout-debug-y: -6.5;
  --layout-debug-size: 1.23;
  --layout-debug-rotate: 0;
}

/* 引导页 */
/* 引导 / 恩施土司城 */
#guide-screen .guide-landmark-enshi {
  --layout-debug-x: 0;
  --layout-debug-y: -15.2;
  --layout-debug-size: 1;
  --layout-debug-rotate: 0;
}

/* 引导 / 龟山电视塔 */
#guide-screen .guide-landmark-tower {
  --layout-debug-x: 0;
  --layout-debug-y: -8.3;
  --layout-debug-size: 1;
  --layout-debug-rotate: 0;
}

/* 引导 / 三峡大坝 */
#guide-screen .guide-landmark-dam {
  --layout-debug-x: 0;
  --layout-debug-y: -12.6;
  --layout-debug-size: 1;
  --layout-debug-rotate: 0;
}

/* 游戏页 */
/* 游戏 / 建筑前草 */
#game-screen .game-foreground-grass {
  --layout-debug-x: 17.6;
  --layout-debug-y: -25.5;
  --layout-debug-size: 1.6;
  --layout-debug-rotate: 0;
}

/* 游戏 / 地标 / 恩施土司城 */
#game-screen .landmark-item-enshi {
  --layout-debug-x: -11.7;
  --layout-debug-y: -5.7;
  --layout-debug-size: 1.29;
  --layout-debug-rotate: 0;
}

/* 游戏 / 地标 / 龟山电视塔 */
#game-screen .landmark-item-guishan {
  --layout-debug-x: 0;
  --layout-debug-y: 2.9;
  --layout-debug-size: 1;
  --layout-debug-rotate: 0;
}

/* 游戏 / 地标 / 黄鹤楼 */
#game-screen .landmark-item-hhl {
  --layout-debug-x: 0;
  --layout-debug-y: -3.1;
  --layout-debug-size: 1;
  --layout-debug-rotate: 0;
}

/* 游戏 / 地标 / 江汉关 */
#game-screen .landmark-item-jianghanguan {
  --layout-debug-x: 0;
  --layout-debug-y: -4;
  --layout-debug-size: 1;
  --layout-debug-rotate: 0;
}

/* 福利页 */
/* 福利 / 背景卡片 */
#benefit-screen .benefit-card-art {
  --layout-debug-x: 0;
  --layout-debug-y: -5.7;
  --layout-debug-size: 1;
  --layout-debug-rotate: 0;
}

/* 福利 / 主卡片 */
#benefit-screen .benefit-dialog {
  --layout-debug-x: 0;
  --layout-debug-y: -15.2;
  --layout-debug-size: 1;
  --layout-debug-rotate: 0;
}
/* Layout Debug Sync End */

.layout-debug-target {
  --layout-debug-x: 0;
  --layout-debug-y: 0;
  --layout-debug-size: 1;
  --layout-debug-rotate: 0;
  translate: calc(var(--layout-debug-x) * 1cqw) calc(var(--layout-debug-y) * 1cqh);
  rotate: calc(var(--layout-debug-rotate) * 1deg);
  scale: var(--layout-debug-size);
}

.layout-debug-target.plane-shell {
  scale: 1;
  background-size: calc(var(--layout-debug-size) * 100%) auto;
}

.layout-debug-target.is-layout-debug-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.layout-debug-custom-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 12;
  width: calc(var(--layout-debug-custom-base-width, 40) * 1cqw);
  aspect-ratio: var(--layout-debug-custom-aspect-ratio, 1);
  overflow: visible;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.layout-debug-custom-layer.layout-debug-target {
  transform:
    translate(-50%, -50%)
    translate(calc(var(--layout-debug-x) * 1cqw), calc(var(--layout-debug-y) * 1cqh))
    rotate(calc(var(--layout-debug-rotate) * 1deg))
    scale(var(--layout-debug-size));
  translate: none;
  rotate: none;
  scale: none;
}

.layout-debug-custom-layer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body[data-layout-debug-open="true"] .layout-debug-target[data-layout-debug-selected="true"]:not(.plane-shell) {
  outline: 2px dashed rgba(255, 228, 132, 0.95);
  outline-offset: 4px;
}

.layout-debug-reference {
  position: absolute;
  inset: 0;
  z-index: 11;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: var(--layout-reference-opacity, 0.34);
}

.layout-debug-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1001;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(5, 37, 62, 0.82);
  box-shadow: 0 18px 32px rgba(8, 40, 68, 0.22);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.layout-debug-panel {
  position: fixed;
  top: 64px;
  right: 16px;
  z-index: 1000;
  width: min(320px, calc(100vw - 32px));
  max-height: calc(100dvh - 80px);
  padding: 16px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 28%),
    rgba(6, 34, 58, 0.92);
  box-shadow: 0 28px 48px rgba(8, 40, 68, 0.26);
  color: var(--white);
  backdrop-filter: blur(16px);
}

.layout-debug-panel__header,
.layout-debug-panel__actions,
.layout-debug-check {
  display: flex;
  align-items: center;
}

.layout-debug-panel__header {
  justify-content: space-between;
  gap: 12px;
}

.layout-debug-panel__title {
  font-size: 16px;
}

.layout-debug-panel__close,
.layout-debug-action {
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.layout-debug-panel__close {
  min-height: 32px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

.layout-debug-panel__hint {
  margin: 10px 0 14px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  line-height: 1.5;
}

.layout-debug-panel__subhint {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 11px;
  line-height: 1.45;
}

.layout-debug-panel__screen {
  margin: 10px 0 0;
  color: rgba(255, 231, 171, 0.94);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.layout-debug-nav {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
}

.layout-debug-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.layout-debug-nav__meta {
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
}

.layout-debug-nav__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.layout-debug-field {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 52px;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.layout-debug-order {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 52px;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.layout-debug-priority {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 52px;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.layout-debug-order__actions {
  display: flex;
  gap: 8px;
}

.layout-debug-stack {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
}

.layout-debug-stack__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.layout-debug-stack__meta,
.layout-debug-stack__relation {
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
}

.layout-debug-stack__relation {
  margin: 8px 0 0;
  line-height: 1.45;
}

.layout-debug-stack__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  margin-top: 10px;
  overflow: auto;
}

.layout-debug-stack__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  text-align: left;
  cursor: pointer;
}

.layout-debug-stack__item.is-selected {
  border-color: rgba(255, 208, 79, 0.86);
  box-shadow: inset 0 0 0 1px rgba(255, 208, 79, 0.42);
  background: rgba(255, 208, 79, 0.14);
}

.layout-debug-stack__item.is-hidden {
  opacity: 0.55;
}

.layout-debug-stack__name {
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.layout-debug-stack__priority,
.layout-debug-stack__visibility {
  font-size: 11px;
  white-space: nowrap;
}

.layout-debug-stack__visibility {
  min-width: 22px;
  text-align: center;
  color: rgba(255, 231, 171, 0.96);
}

.layout-debug-field__label,
.layout-debug-check span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.layout-debug-field__value {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.layout-debug-select,
.layout-debug-range,
.layout-debug-export {
  width: 100%;
}

.layout-debug-select,
.layout-debug-export {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

.layout-debug-select {
  min-height: 38px;
  padding: 0 12px;
}

.layout-debug-select option {
  color: #16344b;
  background: #f7fbff;
}

.layout-debug-select option:disabled {
  color: #7f95a8;
}

.layout-debug-range {
  accent-color: #ffe37c;
}

.layout-debug-range:disabled,
.layout-debug-check input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.layout-debug-check {
  gap: 10px;
  margin-top: 14px;
}

.layout-debug-check input {
  width: 16px;
  height: 16px;
}

.layout-debug-panel__actions {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.layout-debug-panel__actions--compact {
  margin-top: 12px;
}

.layout-debug-action {
  min-height: 36px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
}

.layout-debug-action--mini {
  flex: 1 1 0;
  min-height: 32px;
  padding: 0 10px;
  font-size: 11px;
}

.layout-debug-action--nav {
  flex: 1 1 calc(50% - 8px);
  min-height: 34px;
  font-size: 11px;
}

.layout-debug-action--nav.is-active {
  background: linear-gradient(180deg, #ffe793 0%, #ffcf48 46%, #ffb83e 100%);
  color: #63330c;
}

.layout-debug-action:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.layout-debug-action--primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
}

.layout-debug-export {
  min-height: 168px;
  margin-top: 12px;
  padding: 12px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .layout-debug-toggle {
    top: auto;
    right: 12px;
    bottom: 12px;
  }

  .layout-debug-panel {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100dvh - 72px);
    padding-bottom: 20px;
  }
}

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

  .hint-copy,
  .guide-cloud-a,
  .guide-cloud-b,
  .ambient-cloud-a,
  .ambient-cloud-b,
  .guide-plane,
  .ambient-plane {
    animation: none !important;
  }
}