:root {
  --font-geist-sans: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-geist-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --mint: #45d59c;
  --mint-light: #7df1c0;
  --ink: #f4f7f6;
  --dark: #242424;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: #101313; overflow: hidden; }

button { font: inherit; }

body {
  color: var(--ink);
  font-family: var(--font-geist-sans), "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.drive-shell {
  width: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 15%, rgba(69,213,156,.13), transparent 34%),
    #111615;
}

.drive-stage {
  width: min(100vw, 440px);
  height: min(100svh, 880px);
  min-height: 620px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #272727;
  box-shadow: 0 0 80px rgba(0,0,0,.65);
}

.drive-canvas { width: 100%; height: 100%; display: block; }
.scene-transition-shield {
  position: fixed;
  z-index: 240;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #ECD8BA;
  contain: strict;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.scene-transition-shield.cover { animation: scene-shield-cover .43s ease-out both; }
.scene-transition-shield.reveal { animation: scene-shield-reveal .54s ease-in both; }
.scene-transition-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; backface-visibility: hidden; transform: translateZ(0); }

.drive-stage::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.42), transparent 18%, transparent 68%, rgba(0,0,0,.23));
}

.drive-stage:not([data-phase="playing"]):not([data-phase="countdown"]) > .weather-layer,
.drive-stage:not([data-phase="playing"]):not([data-phase="countdown"]) > .drive-hud,
.drive-stage:not([data-phase="playing"]):not([data-phase="countdown"]) > .weather-status,
.drive-stage:not([data-phase="playing"]):not([data-phase="countdown"]) > .pickup-count,
.drive-stage:not([data-phase="playing"]):not([data-phase="countdown"]) > .steering-controls { display: none; }

.level-back-button {
  position: absolute;
  z-index: 40;
  top: max(14px, env(safe-area-inset-top));
  left: 14px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 14px;
  color: #fff;
  background: rgba(18,22,21,.72);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  backdrop-filter: blur(9px);
  cursor: pointer;
}
.level-back-button b { font-size: 22px; line-height: 1; }
.level-back-button:active { transform: scale(.94); }

.drive-hud {
  position: absolute;
  z-index: 6;
  top: max(14px, env(safe-area-inset-top));
  left: 18px;
  right: 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  pointer-events: none;
}

.timer-panel { display: flex; flex-direction: column; margin-left: 45px; }
.timer-panel small, .score-panel span { color: rgba(255,255,255,.62); font: 700 9px var(--font-geist-mono), monospace; letter-spacing: .12em; }
.timer-panel b { margin-top: 2px; font: 750 17px var(--font-geist-mono), monospace; }

.score-panel { display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.score-panel strong { font-size: 45px; line-height: .95; letter-spacing: -.055em; }
.score-panel span { margin-top: 4px; }

.history-button {
  justify-self: end;
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  background: rgba(26,28,28,.55);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 11px;
  cursor: pointer;
}
.history-button:disabled { opacity: .35; }

.weather-status {
  position: absolute;
  z-index: 6;
  top: max(82px, calc(env(safe-area-inset-top) + 70px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(255,255,255,.75);
  background: rgba(24,26,26,.42);
  backdrop-filter: blur(7px);
  font-size: 14px;
  white-space: nowrap;
}
.weather-status span { width: 6px; height: 6px; border-radius: 50%; background: var(--mint-light); box-shadow: 0 0 8px var(--mint); }
.weather-status.rain span { background: #58b8ff; box-shadow: 0 0 8px #58b8ff; }
.weather-status.snow span { background: white; box-shadow: 0 0 8px white; }
.weather-status.fog span { background: #d7d8d5; box-shadow: 0 0 8px #d7d8d5; }

.pickup-count {
  position: absolute;
  z-index: 6;
  left: 16px;
  bottom: max(28px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(16,20,20,.58);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.pickup-count img { width: 24px; height: 24px; filter: drop-shadow(0 0 7px #276fff); }
.pickup-count b { font: 750 16px var(--font-geist-mono), monospace; }

.steering-controls {
  width: 244px;
  height: 102px;
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  pointer-events: none;
}
.steering-controls button {
  height: 78px;
  border: 2px solid rgba(255,255,255,.58);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: white;
  background: rgba(9,13,12,.64);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(7px);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  pointer-events: auto;
  cursor: pointer;
  transition: transform .08s, border-color .08s, background .08s;
}
.steering-controls button b { font: 800 36px/1 var(--font-geist-sans), sans-serif; pointer-events: none; -webkit-user-select: none; user-select: none; }
.steering-controls button span { color: rgba(255,255,255,.62); font-size: 10px; font-weight: 750; pointer-events: none; -webkit-user-select: none; user-select: none; }
.steering-controls button.active,
.steering-controls button:active {
  transform: scale(.94);
  color: #173326;
  border-color: var(--mint-light);
  background: rgba(125,241,192,.94);
  box-shadow: 0 0 24px rgba(69,213,156,.3);
}
.steering-controls button.active span,
.steering-controls button:active span { color: rgba(23,51,38,.68); }
.steering-controls button:disabled { opacity: .28; cursor: default; }
.steering-controls > em { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.62); font-style: normal; font-size: 10px; white-space: nowrap; pointer-events: none; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; -webkit-user-drag: none; }

.game-overlay {
  position: absolute;
  z-index: 15;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 16%, rgba(69,213,156,.1), transparent 35%),
    #171c1b;
  backdrop-filter: blur(8px);
}

.home-card, .intro-card, .finish-card, .history-card {
  width: min(100%, 352px);
  border-radius: 29px;
  background: rgba(31,34,33,.94);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 25px 70px rgba(0,0,0,.55);
}
.home-card { padding: 25px 20px 20px; text-align: center; }
.home-level-mark { height: 42px; display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 5px; color: var(--mint-light); }
.home-level-mark span { font: 850 38px/1 var(--font-geist-mono), monospace; letter-spacing: -.08em; }
.home-level-mark i { width: 35px; height: 1px; background: linear-gradient(90deg, transparent, var(--mint), transparent); box-shadow: 0 0 12px var(--mint); }
.home-card h1 { margin: 0; font-size: 31px; line-height: 1.05; letter-spacing: -.055em; }
.home-lead { margin: 8px 0 14px; color: rgba(255,255,255,.66); font-size: 12px; }
.quest-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 13px; }
.quest-summary span { padding: 8px 2px; border-radius: 11px; color: rgba(255,255,255,.58); background: rgba(255,255,255,.045); font-size: 9px; }
.quest-summary b { color: var(--mint-light); font: 800 16px var(--font-geist-mono), monospace; }
.level-list { display: grid; gap: 8px; text-align: left; }
.level-item { width: 100%; min-height: 58px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,.07); color: white; background: rgba(255,255,255,.045); }
button.level-item { cursor: pointer; }
.level-item > b { color: rgba(255,255,255,.36); font: 800 14px var(--font-geist-mono), monospace; }
.level-item > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.level-item strong { font-size: 12px; }
.level-item small { overflow: hidden; color: rgba(255,255,255,.42); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.level-item em { padding: 4px 6px; border-radius: 999px; color: rgba(255,255,255,.38); background: rgba(255,255,255,.05); font-size: 8px; font-style: normal; white-space: nowrap; }
.level-item.current { border-color: rgba(125,241,192,.38); background: linear-gradient(100deg, rgba(69,213,156,.16), rgba(255,255,255,.045)); box-shadow: inset 3px 0 0 var(--mint); }
.level-item.current > b, .level-item.current em { color: var(--mint-light); }
.level-item.current em { background: rgba(69,213,156,.12); }
.level-item.available { border-color: rgba(255,202,145,.25); background: linear-gradient(100deg, rgba(255,170,109,.10), rgba(255,255,255,.045)); }
.level-item.available > b { color: #ffc58d; }
.level-item em.obtained { color: #8af4c4; background: rgba(69,213,156,.14); border: 1px solid rgba(125,241,192,.18); }
.level-item em.missing { color: rgba(255,255,255,.42); }
.level-item.locked { opacity: .62; }
.home-start { width: 100%; height: 48px; margin-top: 14px; border: 0; border-radius: 15px; color: #173326; background: var(--mint-light); font-weight: 850; cursor: pointer; box-shadow: 0 8px 20px rgba(69,213,156,.23); }
.home-history { margin-top: 8px; border: 0; color: rgba(255,255,255,.55); background: transparent; font-size: 10px; cursor: pointer; }
.home-note { display: block; margin-top: 8px; color: rgba(255,255,255,.3); font-size: 8px; letter-spacing: .08em; }
.intro-card, .finish-card { padding: 28px 25px 23px; text-align: center; }

.arcade-kicker { margin: 0 0 9px; color: var(--mint-light); font: 750 9px var(--font-geist-mono), monospace; letter-spacing: .14em; }
.intro-card h1 { margin: 0; font-size: 33px; line-height: 1.15; letter-spacing: -.05em; }
.intro-level-title { margin-bottom: 22px; font-size: 24px; letter-spacing: 0; }
.intro-rules { display: grid; gap: 9px; margin: 22px 0; text-align: left; }
.intro-rules span { height: 42px; display: flex; align-items: center; gap: 11px; padding: 0 12px; border-radius: 13px; color: rgba(255,255,255,.76); background: rgba(255,255,255,.055); font-size: 12px; }
.intro-rules b { width: 27px; text-align: center; color: #fff; font: 800 20px var(--font-geist-mono), monospace; }
.intro-rules span:first-child b { width: 38px; font-size: 16px; white-space: nowrap; }
.intro-rules img { width: 27px; height: 27px; filter: drop-shadow(0 0 6px #276fff); }
.intro-card > button, .finish-card > button:not(.ghost-button), .close-history {
  width: 100%; height: 49px; border: 0; border-radius: 15px; color: #173326; background: var(--mint-light); font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px rgba(69,213,156,.23);
}
.intro-card > small { display: block; margin-top: 13px; color: rgba(255,255,255,.42); font-size: 10px; letter-spacing: .12em; }

.countdown {
  position: absolute;
  z-index: 14;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: rgba(0,0,0,.12);
}
.countdown b { font-size: 100px; letter-spacing: -.08em; filter: drop-shadow(0 8px 20px rgba(0,0,0,.45)); animation: count-pop .66s both; }

.off-road-alert {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 38%;
  transform: translateX(-50%);
  padding: 9px 13px;
  border-radius: 11px;
  color: #fff;
  background: rgba(139,26,33,.84);
  border: 1px solid rgba(255,124,124,.55);
  font-size: 12px;
  font-weight: 800;
  animation: alert-pulse .55s infinite alternate;
}
.off-road-alert b, .off-road-alert span { display: block; text-align: center; }
.off-road-alert span { margin-top: 3px; color: rgba(255,255,255,.72); font-size: 9px; font-weight: 600; }

.recovery-alert {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 38%;
  transform: translateX(-50%);
  padding: 9px 13px;
  border-radius: 999px;
  color: #173326;
  background: rgba(125,241,192,.92);
  box-shadow: 0 0 22px rgba(69,213,156,.36);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
  animation: recovery-pulse .32s infinite alternate;
}

.score-flash {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 31%;
  transform: translateX(-50%);
  color: white;
  font-size: 28px;
  font-weight: 850;
  text-shadow: 0 0 14px #276fff;
  animation: score-up .52s both;
}

.finish-card h2 { margin: 0; font-size: 23px; }
.final-score { display: flex; flex-direction: column; margin: 19px 0 14px; }
.final-score span { color: rgba(255,255,255,.5); font: 700 9px var(--font-geist-mono), monospace; letter-spacing: .13em; }
.final-score strong { font-size: 62px; line-height: 1; letter-spacing: -.07em; }
.final-stats { display: flex; justify-content: center; gap: 10px; }
.final-stats span { display: flex; align-items: center; gap: 5px; padding: 7px 9px; border-radius: 999px; color: rgba(255,255,255,.72); background: rgba(255,255,255,.055); font-size: 10px; }
.final-stats img { width: 19px; height: 19px; }
.finish-card > p:not(.arcade-kicker) { margin: 17px 0; color: rgba(255,255,255,.58); font-size: 12px; line-height: 1.6; }
.finish-card > button:disabled { opacity: .36; cursor: default; box-shadow: none; }
.ghost-button { width: 100%; margin-top: 9px; border: 0; color: rgba(255,255,255,.55); background: transparent; padding: 7px; font-size: 11px; cursor: pointer; }

.reward-performance {
  height: 154px;
  position: relative;
  overflow: visible;
  margin: 16px 0 13px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 42%, rgba(39,111,255,.18), transparent 48%), rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.reward-stage-0 { background: radial-gradient(circle at 50% 42%, rgba(39,111,255,.12), transparent 48%), rgba(255,255,255,.03); }
.reward-performance > p { margin: 11px 0 5px; color: rgba(255,255,255,.48); font: 750 11px var(--font-geist-mono), monospace; letter-spacing: .12em; }
.reward-performance > em { position: absolute; left: 0; right: 0; bottom: 10px; color: rgba(255,255,255,.5); font-size: 12px; font-style: normal; }
.reward-stage-3 > em { color: #ffd4a1; animation: fade-in .2s both; }
.reward-object {
  width: 90px;
  position: absolute;
  left: 50%;
  top: 37px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  filter: drop-shadow(0 0 11px rgba(39,111,255,.75));
  animation: reward-appear .42s cubic-bezier(.2,1.4,.42,1) both;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.reward-stage-0 .reward-object { opacity: .92; animation: none; }
.reward-object img { width: 55px; height: 55px; }
.reward-object b { color: white; font-size: 11px; }
.reward-stage-2 .reward-object { animation: reward-stolen 2s cubic-bezier(.15,.78,.25,1) both; }
.reward-stage-3 .reward-object { opacity: 0; }

.cat-paw {
  width: 292px;
  height: 208px;
  position: absolute;
  z-index: 40;
  right: -314px;
  top: -28px;
  transform: translate3d(0, 0, 0) rotate(-4deg);
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.42));
  pointer-events: none;
  will-change: transform, opacity;
  contain: layout paint;
  backface-visibility: hidden;
}
.reward-stage-0 .cat-paw,
.reward-stage-1 .cat-paw { opacity: 0; }
.cat-paw img { width: 100%; height: 100%; display: block; object-fit: contain; transform: translateZ(0); backface-visibility: hidden; }
.reward-stage-2 .cat-paw { animation: paw-snatch 2s cubic-bezier(.15,.78,.25,1) both; }
.reward-stage-3 .cat-paw { opacity: 0; }

.cat-intro-overlay,
.cat-finish-overlay {
  background-color: #ead8c1 !important;
  background-image: url("/assets-1.0-v31/cat-room-bg.webp") !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  backdrop-filter: none !important;
  isolation: isolate;
}
.cat-intro-card,
.cat-finish-card {
  color: #4b382e;
  background: #fff8ee;
  border: 2px solid rgba(94,67,50,.17);
  box-shadow: 0 24px 55px rgba(73,48,34,.28);
  backdrop-filter: none;
}
.cat-intro-card { padding-top: 23px; }
.cat-intro-card h1,
.cat-finish-card h2 { color: #4b382e; }
.cat-intro-card .arcade-kicker,
.cat-finish-card .arcade-kicker { color: #3f9e83; }
 .cat-intro-card h1 { position: relative; top: -20px; }
.cat-intro-lead { position: relative; top: -20px; margin: 10px 0 2px; color: rgba(75,56,46,.65); font-size: 12px; line-height: 1.65; }
.cat-preview-row { height: 170px; display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin: 0 0 -4px; }
.cat-preview-row .cat-art { width:auto; height:170px; aspect-ratio:var(--cat-aspect); max-width:138px; margin:0; flex:0 0 auto; filter:none; }
.cat-brief-rules { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 8px 0 17px; }
.cat-brief-rules span { min-height: 54px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 3px; border-radius: 13px; color: rgba(75,56,46,.62); background: rgba(211,164,120,.11); font-size: 8px; line-height: 1.35; }
.cat-brief-rules b { color: #3f9e83; font: 850 16px var(--font-geist-mono), monospace; }
.cat-intro-card > button,
.cat-finish-card > button:not(.ghost-button) { color: #fffaf0; background: #48b99b; box-shadow: 0 8px 18px rgba(63,158,131,.25); }
.cat-intro-card > small { color: rgba(75,56,46,.46); }

.cat-game-overlay {
  position: absolute;
  z-index: 13;
  inset: 0;
  overflow: hidden;
  color: #4b382e;
  background: #ead8c1 url("/assets-1.0-v31/cat-room-bg.webp") center / cover no-repeat;
}
.cat-game-overlay::after { content: ""; position: absolute; z-index: 1; inset: auto 0 0; height: 36%; background: linear-gradient(transparent, rgba(91,67,51,.22)); pointer-events: none; }
.cat-game-topline { position: absolute; z-index: 12; top: max(16px, env(safe-area-inset-top)); left: 68px; right: 16px; height: 46px; display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; padding: 0 12px; border: 2px solid rgba(89,65,49,.13); border-radius: 15px; color: rgba(75,56,46,.65); background: rgba(255,251,241,.9); box-shadow: 0 7px 18px rgba(92,61,43,.12); font-size: 12px; font-weight: 800; }
.cat-progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(75,56,46,.11); }
.cat-progress-track i { height: 100%; display: block; border-radius: inherit; background: #4bc6a4; transition: width .3s; }
.cat-game-topline strong { min-width: 52px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; color: #315f52; font: 900 20px var(--font-geist-mono), monospace; }
.cat-game-topline strong small { color: rgba(75,56,46,.45); font-size: 8px; letter-spacing: .08em; }

.scene-cat { width: 50%; height: 330px; position: absolute; z-index: 5; top: 17%; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.level2-cat-moli { left: -1%; }
.level2-cat-kyoko { right: -1%; }
.cat-art { display:block; overflow:visible; }
.cat-art-moli.cat-art-idle{--cat-aspect:476 / 603;}
.cat-art-moli.cat-art-happy{--cat-aspect:470 / 629;}
.cat-art-kyoko.cat-art-idle{--cat-aspect:540 / 692;}
.cat-art-kyoko.cat-art-happy{--cat-aspect:482 / 643;}
.cat-art-moli.cat-art-angry{--cat-aspect:476 / 603;}
.cat-art-kyoko.cat-art-angry{--cat-aspect:540 / 692;}
/* v118: use the v56 APNG directly. Keep the current v117 layout dimensions,
   but restore a single replaced <img> so APNG SOURCE/BACKGROUND frame disposal
   controls the repaint and no JS/CSS frame stack can retain stale tail pixels. */
.scene-cat > .cat-art { width:100%; max-width:100%; height:100%; position:relative; z-index:2; object-fit:contain; object-position:center bottom; filter:none; transform-origin:50% 90%; }

.scene-cat > b { position: absolute; z-index: 4; bottom: 2px; padding: 5px 16px; border: 1px solid rgba(75,56,46,.13); border-radius: 999px; color: #604b3e; background: rgba(255,249,235,.86); font-size: 12px; line-height: 1; box-shadow: 0 5px 12px rgba(80,53,38,.12); }
.level2-cat-moli > b { bottom: 4px; transform: translateX(22px); }
.cat-speech { width: 132px; min-height: 44px; position: absolute; z-index: 8; top: 14px; display: grid; place-items: center; padding: 8px 9px; border: 2px solid #654c3c; border-radius: 17px; color: #513b30; background: #fffdf5; box-shadow: 0 7px 0 rgba(101,76,60,.12); font-size: 14px; font-weight: 750; line-height: 1.35; text-align: center; animation: bubble-pop .26s cubic-bezier(.2,1.35,.4,1) both; }
.cat-speech::after { content: ""; width: 10px; height: 10px; position: absolute; left: 50%; bottom: -7px; border-right: 2px solid #654c3c; border-bottom: 2px solid #654c3c; background: #fffdf5; transform: translateX(-50%) rotate(45deg); }
.scene-cat.eat > .cat-art { animation: cat-eat .75s ease-in-out both; }
.scene-cat.reject > .cat-art { animation: cat-reject .7s ease-in-out both; }
.scene-cat.sniff > .cat-art { animation: cat-sniff .8s ease-in-out both; }
.scene-cat.lick > .cat-art { animation: cat-lick .55s ease-in-out 2; }
.scene-cat.reject::before { content: "💢"; position: absolute; z-index: 9; top: 62px; font-size: 30px; filter: drop-shadow(0 3px 0 rgba(255,255,255,.75)); animation: anger-pop .22s cubic-bezier(.2,1.5,.4,1) both; }
.level2-cat-moli.reject::before { right: 18px; }
.level2-cat-kyoko.reject::before { left: 18px; }

.food-stage { width: 168px; height: 170px; position: absolute; z-index: 9; left: 50%; bottom: 144px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; transform: translateX(-50%); animation: food-rise .4s cubic-bezier(.2,1.3,.38,1) both; }
.food-plate { width: 112px; height: 25px; position: absolute; bottom: 64px; border: 3px solid #705b4d; border-radius: 50%; background: #eaf8f3; box-shadow: 0 7px 0 rgba(89,62,46,.15); }
.food-icon { width: 94px; height: 88px; position: relative; z-index: 2; display: block; margin-bottom: 2px; object-fit: contain; filter: drop-shadow(0 5px 2px rgba(71,48,34,.18)); }
.food-stage h2 { position: relative; z-index: 3; margin: 22px 0 0; padding: 7px 18px; border: 1px solid rgba(75,56,46,.13); border-radius: 999px; color: #4d3b31; background: rgba(255,252,242,.9); font-size: 20px; line-height: 1.1; white-space: nowrap; }
.food-stage small { margin-top: 9px; color: rgba(75,56,46,.55); font-size: 13px; line-height: 1; }
.cat-feedback { position: absolute; z-index: 15; left: 50%; bottom: 271px; transform: translateX(-50%); padding: 7px 13px; border: 2px solid rgba(255,255,255,.6); border-radius: 999px; color: white; font-size: 12px; font-weight: 850; white-space: nowrap; box-shadow: 0 8px 18px rgba(70,46,33,.2); animation: bubble-pop .2s both; }
.cat-feedback.right { background: #3fb48f; }
.cat-feedback.wrong { background: #d96f62; }
.cat-score-float { position: absolute; z-index: 16; left: 50%; bottom: 218px; font: 950 38px var(--font-geist-mono), monospace; text-shadow: 0 3px white, 2px 0 white, -2px 0 white; animation: cat-score-fly .9s ease-out both; }
.cat-score-float.right { color: #2ba780; }
.cat-score-float.wrong { color: #d95f56; }

.cat-choice-dock { position: absolute; z-index: 18; left: 12px; right: 12px; bottom: max(16px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.cat-choice-dock button { height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 2px solid #6d5748; border-radius: 18px; color: #503e33; background: #fff9e9; box-shadow: 0 7px 0 #c9a989, 0 12px 19px rgba(74,49,34,.15); cursor: pointer; touch-action: manipulation; transition: transform .08s, box-shadow .08s; }
.cat-choice-dock button.take-away { color: #503e33; background: #fff9e9; box-shadow: 0 7px 0 #c9a989, 0 12px 19px rgba(74,49,34,.15); }
.cat-choice-dock button b { font-size: 14px; }
.cat-choice-dock button:active { transform: translateY(5px); box-shadow: 0 2px 0 #c9a989; }
.cat-choice-dock button:disabled { opacity: .62; cursor: default; }

.cat-finish-card { padding: 24px 22px 21px; }
.cat-final-score { display: flex; align-items: baseline; justify-content: center; margin: 8px 0 -4px; }
.cat-final-score strong { color: #3f9e83; font: 950 52px var(--font-geist-mono), monospace; line-height: 1; }
.cat-final-score span { color: rgba(75,56,46,.45); font: 800 15px var(--font-geist-mono), monospace; }
.cat-finish-card.failed .cat-final-score strong { color: #d96f62; }
.cat-finish-duo { height: 196px; display: flex; align-items: flex-end; justify-content: center; margin: -7px 0 -11px; }
.cat-finish-duo .cat-art { width:auto; height:196px; aspect-ratio:var(--cat-aspect); margin:0 -20px; flex:0 0 auto; filter:none; }
.cat-finish-card > p:not(.arcade-kicker) { margin: 6px 0 13px; color: rgba(75,56,46,.65); }
.clue-unlocked { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0 13px; padding: 9px; border: 1px solid rgba(63,158,131,.23); border-radius: 15px; background: rgba(63,158,131,.09); }
.clue-unlocked > span { font-size: 30px; }
.clue-collectible-icon { width: 58px; height: 58px; display: block; object-fit: contain; flex: 0 0 auto; }
.clue-unlocked div { display: flex; flex-direction: column; align-items: flex-start; }
.clue-unlocked small { color: rgba(75,56,46,.44); font-size: 10px; }
.clue-unlocked b { color: #348a72; font-size: 16px; }
.cat-finish-card .ghost-button { color: rgba(75,56,46,.58); }

.level-item.level3-available { border-color: rgba(116,211,218,.26); background: linear-gradient(100deg, rgba(83,157,172,.15), rgba(255,255,255,.045)); cursor: pointer; }
.level-item.level3-available > b { color: #9cdee4; }

.level3-intro-overlay,
.level3-finish-overlay {
  background:
    radial-gradient(circle at 50% 20%, rgba(89,190,197,.22), transparent 38%),
    linear-gradient(160deg, #193841, #131f23);
}
.level3-intro-card,
.level3-finish-card {
  color: #e9f7f4;
  background: rgba(22,46,51,.92);
  border-color: rgba(146,230,225,.2);
  box-shadow: 0 25px 70px rgba(5,21,27,.55), inset 0 0 40px rgba(90,190,185,.05);
}
.level3-intro-card .arcade-kicker,
.level3-finish-card .arcade-kicker { color: #9de5d7; }
.level3-intro-card h1,
.level3-finish-card h2 { color: #f5fbfa; }
.level3-intro-lead { margin: 9px 0 18px; color: rgba(233,247,244,.68); font-size: 12px; line-height: 1.65; }
.level3-intro-card > button,
.level3-finish-card > button:not(.ghost-button) { color: #143c3e; background: #9de5d7; box-shadow: 0 8px 22px rgba(97,213,202,.25); }
.level3-intro-card > small { color: rgba(233,247,244,.45); }
.level3-dog-mark { width: 100px; height: 84px; position: relative; margin: -5px auto 4px; }
.dog-mark-head { width: 68px; height: 68px; position: absolute; left: 16px; bottom: 0; display: grid; place-items: center; border-radius: 48% 48% 44% 44%; color: #1c4f5d; background: #66bed4; font-size: 31px; font-weight: 900; box-shadow: inset 0 -8px 0 rgba(28,79,93,.08), 0 9px 18px rgba(0,0,0,.17); }
.dog-mark-ear { width: 27px; height: 55px; position: absolute; z-index: 2; top: 9px; border-radius: 50%; background: #a0a8ab; }
.dog-mark-ear.left { left: 4px; transform: rotate(18deg); }
.dog-mark-ear.right { right: 4px; transform: rotate(-18deg); }
.level3-brief-rules { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 0 0 18px; }
.level3-brief-rules span { min-height: 58px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 7px 3px; border-radius: 13px; color: rgba(233,247,244,.58); background: rgba(137,225,218,.08); font-size: 8px; }
.level3-brief-rules b { color: #a8eee1; font: 850 17px var(--font-geist-mono), monospace; }

.level3-game-overlay,
.level3-room-overlay { position: absolute; z-index: 13; inset: 0; overflow: hidden; color: #f4faf8; background: #6b9da8; }
.memory-journey { position: absolute; inset: 0; overflow: hidden; background: #77a5ad; transition: background .55s ease; }
.memory-journey::after { content: ""; position: absolute; z-index: 11; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(6,25,31,.28), transparent 25%, transparent 61%, rgba(8,24,29,.28)); }
.scene-birth { background: radial-gradient(circle at 14% 18%,#fff 0 1px,transparent 2px),radial-gradient(circle at 74% 12%,#c9eaff 0 1.5px,transparent 2.5px),radial-gradient(circle at 39% 31%,#fff4c7 0 1px,transparent 2px),radial-gradient(circle at 86% 38%,#fff 0 1px,transparent 2px),linear-gradient(#081a3b 0 58%,#142b52 58% 72%,#233d59); background-size:77px 73px,121px 103px,91px 87px,147px 131px,auto; }
.scene-school { background: linear-gradient(#8ab8b8 0 55%,#b8c79b 55%); }
.scene-beijing { background: linear-gradient(#6ea8cf 0 58%,#d9edf2 58% 69%,#8ca1a9 69%); }
.scene-cornell { background: linear-gradient(#9db8d8 0 48%,#e8eff8 48%); }
.scene-engineer { background: linear-gradient(#647987 0 58%,#8b969b 58%); }
.scene-partners { background: linear-gradient(#c4a777 0 58%,#e5cda6 58%); }
.scene-fitness { background: linear-gradient(#d1ad76 0 58%,#d7b88b 58%); }
.scene-kyoko { background: linear-gradient(#b89878 0 58%,#ddc39e 58%); }
.scene-homes { background: linear-gradient(#8eaaa0 0 57%,#cad7c5 57%); }
.scene-nordic { background: radial-gradient(circle at 50% 37%,#d7f4f4 0 10%,transparent 34%),linear-gradient(#6696b2,#c3e8e7); }
.memory-scene-panel { width: 100%; height: 100%; position: absolute; z-index: 2; inset: 0; overflow: hidden; }
.transition-covering .memory-story-card,.transition-revealing .memory-story-card { opacity:0; transform:translateY(32px); transition:opacity .24s,transform .35s ease; }
.immersive-transition { position:absolute; z-index:60; inset:-7%; overflow:hidden; pointer-events:auto; opacity:0; will-change:clip-path,transform,opacity; }
.immersive-transition i,.immersive-transition span { position:absolute; display:block; pointer-events:none; }
.immersive-transition.phase-exiting { opacity:0; }
.immersive-transition.phase-covering { animation:veil-circle-cover .68s cubic-bezier(.55,.04,.32,1) both; }
.immersive-transition.phase-revealing { animation:veil-circle-reveal .76s cubic-bezier(.22,.75,.25,1) both; }
.veil-birth { background:radial-gradient(circle at 50% 42%,#fff5b0 0 2%,#3566a3 16%,#0a1b3c 52%,#07132d 100%); }
.veil-birth i:first-child{width:7px;height:7px;left:22%;top:27%;border-radius:50%;background:#fff;box-shadow:71px 38px #fff2b0,147px -28px #d8edff,209px 91px #fff,22px 203px #d8edff,185px 252px #fff2b0;animation:memory-pulse .45s ease-in-out infinite alternate}
.veil-school { background:repeating-linear-gradient(90deg,#314b3f 0 15px,#779176 15px 24px,#4d684f 24px 38px); box-shadow:inset 0 0 0 12px #765f40; }
.veil-school.phase-covering{animation:veil-gate-cover .68s cubic-bezier(.65,.02,.35,1) both}.veil-school.phase-revealing{animation:veil-gate-reveal .76s cubic-bezier(.22,.75,.25,1) both}
.veil-beijing { background:radial-gradient(circle at 14% 78%,#fff 0 18%,transparent 19%),radial-gradient(circle at 50% 61%,#f8fdff 0 30%,transparent 31%),radial-gradient(circle at 82% 79%,#e9f6fb 0 24%,transparent 25%),linear-gradient(to top,#f8fdff 0 58%,rgba(232,247,252,.92) 59% 100%); filter:drop-shadow(0 -12px 22px rgba(82,135,157,.18)); }
.veil-beijing.phase-covering{animation:veil-cloud-cover .68s ease-out both}.veil-beijing.phase-revealing{animation:veil-cloud-reveal .76s ease-in both}
.veil-cornell { background:radial-gradient(circle at 12% 18%,#fff 0 8px,transparent 9px),radial-gradient(circle at 73% 31%,#fff 0 12px,transparent 13px),radial-gradient(circle at 38% 72%,#eef5ff 0 15px,transparent 16px),linear-gradient(155deg,#fafdff,#d8e6f6); }
.veil-cornell i{width:8px;height:25px;top:-20px;border-radius:50%;background:white;box-shadow:38px 91px #fff,77px 34px #e8f2ff,121px 167px #fff,194px 68px #e8f2ff,249px 222px #fff;animation:snow-fall .65s linear infinite}.veil-cornell i:nth-child(2){left:34%;animation-delay:-.22s}.veil-cornell i:nth-child(3){left:71%;animation-delay:-.4s}
.veil-engineer { background:repeating-linear-gradient(0deg,rgba(8,38,45,.98) 0 12px,rgba(38,213,192,.96) 13px 15px),linear-gradient(#143d45,#1e756e); box-shadow:0 0 45px #5cf0d6; }
.veil-engineer.phase-covering{animation:veil-scan-cover .68s ease-in-out both}.veil-engineer.phase-revealing{animation:veil-scan-reveal .76s ease-in-out both}
.veil-partners { background:repeating-linear-gradient(90deg,#795a3f 0 48px,#9b7651 49px 54px); box-shadow:inset 0 0 0 14px #654933; }
.veil-partners.phase-covering,.veil-homes.phase-covering{animation:veil-gate-cover .68s ease-in-out both}.veil-partners.phase-revealing,.veil-homes.phase-revealing{animation:veil-gate-reveal .76s ease-in-out both}
.veil-fitness { background:radial-gradient(circle at 50% 48%,#5b4538 0 16%,#f2a34c 17% 27%,#ffd88d 28% 31%,#d98a3e 32% 100%); }
.veil-kyoko { background:linear-gradient(132deg,#d4a16f,#b77d4e 46%,#8c5e3d 47% 50%,#c59262 51%); clip-path:polygon(0 7%,100% 0,94% 100%,5% 94%); }
.veil-kyoko.phase-covering{animation:veil-box-cover .68s ease-out both}.veil-kyoko.phase-revealing{animation:veil-box-reveal .76s ease-in both}
.veil-homes { background:linear-gradient(90deg,#4f756c 0 8%,#d5e1cf 8% 92%,#4f756c 92%); box-shadow:inset 0 0 0 15px #426058; }
.veil-nordic { background:radial-gradient(circle at 50% 43%,rgba(246,255,254,.98),rgba(174,224,225,.97) 40%,#6fa8bd 100%); backdrop-filter:blur(12px); }
.memory-background { position: absolute; z-index: 1; inset: 0; pointer-events: none; transition: transform 1.1s ease; }
.memory-background i { position: absolute; display: block; }
.memory-background i:nth-child(1) { width: 130%; height: 24%; left: -15%; top: 36%; border-radius: 50% 50% 0 0; background: rgba(52,95,93,.3); clip-path: polygon(0 100%,15% 30%,26% 70%,41% 8%,55% 65%,73% 17%,84% 61%,100% 24%,100% 100%); }
.memory-background i:nth-child(2) { width: 120%; height: 18%; left: -10%; top: 48%; border-radius: 50% 50% 0 0; background: rgba(234,242,221,.25); }
.memory-background i:nth-child(3) { width: 160%; height: 6px; left: -30%; top: 60%; border-radius: 50%; background: rgba(255,255,255,.34); }
.scene-departing .memory-background { transform: scale(1.04); }
.memory-topline { position: absolute; z-index: 20; top: max(17px, env(safe-area-inset-top)); left: 67px; right: 15px; min-height: 43px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid rgba(236,255,252,.3); border-radius: 15px; color: rgba(247,255,253,.78); background: rgba(22,52,58,.68); box-shadow: 0 8px 24px rgba(6,31,37,.18); backdrop-filter: blur(10px); font: 700 8px var(--font-geist-mono), monospace; }
.memory-topline > div { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.16); }
.memory-topline i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#9ee9db,#fff0b7); transition: width .55s; }
.memory-topline b { max-width: 108px; overflow: hidden; color: #dff8f2; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.memory-art { position: absolute; z-index: 3; inset: 0; animation: scene-focus-in .48s ease-out both; }
.scratch-preview { background:linear-gradient(145deg,#f9fbff,#b7cbe4); }
.memory-hotspot { border: 0; font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.memory-hotspot:active { transform:scale(.985); }

.memory-story-card { width: calc(100% - 28px); position: absolute; z-index: 15; left: 14px; bottom: max(15px, env(safe-area-inset-bottom)); min-height: 138px; padding: 15px 16px 14px; border: 1px solid rgba(226,255,249,.24); border-radius: 23px; background: linear-gradient(150deg, rgba(18,45,52,.91), rgba(20,33,38,.95)); box-shadow: 0 18px 45px rgba(8,22,27,.36); backdrop-filter: blur(15px); }
.memory-story-card > p { margin: 0 0 2px; color: #98e7d9; font: 750 8px var(--font-geist-mono), monospace; letter-spacing: .08em; }
.memory-story-card h2 { margin: 0; font-size: 22px; letter-spacing: -.035em; }
.memory-story-card > span { display: block; min-height: 31px; margin-top: 4px; color: rgba(241,252,249,.7); font-size: 10px; line-height: 1.5; }
.memory-story-card > small { min-height: 35px; display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 12px; color: #f7e4ad; background: rgba(255,255,255,.065); font-size: 9px; }
.memory-story-card > small i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #a8eee1; box-shadow: 0 0 0 5px rgba(168,238,225,.12); animation: memory-pulse 1.1s ease-in-out infinite alternate; }
.memory-error { position: absolute; z-index: 30; left: 50%; top: 25%; transform: translateX(-50%); padding: 9px 15px; border: 2px solid rgba(255,255,255,.66); border-radius: 999px; color: white; background: #d86561; font-size: 13px; font-weight: 900; white-space: nowrap; box-shadow: 0 10px 25px rgba(0,0,0,.25); animation: memory-error-pop .25s cubic-bezier(.2,1.4,.4,1) both; }
.memory-travel-note { position: absolute; z-index: 28; left: 50%; top: 22%; display: flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; color: #174047; background: rgba(222,251,244,.94); box-shadow: 0 8px 24px rgba(12,48,55,.25); font-size: 10px; font-weight: 850; white-space: nowrap; transform: translateX(-50%); animation: travel-note .28s both; }
.memory-travel-note i { font-style: normal; font-size: 16px; }

.memory-dog { width: 118px; height: 170px; position: absolute; z-index: 12; left: 10%; bottom: 26%; pointer-events: none; filter: drop-shadow(0 10px 7px rgba(30,53,58,.25)); transform-origin: 50% 90%; }
.memory-dog > img { width: 100%; height: 100%; position: absolute; z-index: 2; inset: 0; object-fit: contain; object-position: center bottom; }
.dog-floor-shadow { width: 74%; height: 13px; position: absolute; z-index: 1; left: 13%; bottom: 2px; border-radius: 50%; background: rgba(26,45,48,.22); filter: blur(2px); }
.dog-idle { animation: dog-idle 1.35s ease-in-out infinite; }
.dog-arriving { animation: dog-arrive .78s cubic-bezier(.2,.8,.3,1) both; }
.dog-leaving { animation: dog-leave 1.28s cubic-bezier(.36,.04,.55,1) both; }
.dog-arriving > img,.dog-leaving > img,.dog-gate > img,.dog-boarding > img { animation: dog-walk-bob .24s ease-in-out infinite alternate; }
.dog-gate { z-index: 14; animation: dog-enter-gate 1.72s cubic-bezier(.35,.05,.45,1) both; }
.dog-boarding { z-index: 14; animation: dog-board-plane 1.72s cubic-bezier(.35,.05,.45,1) both; }
.dog-bumping { left: 57%; bottom: 31%; animation: dog-bump .68s ease-in-out infinite; }
.dog-rescued { left: 23%; bottom: 36%; animation: dog-rescued .55s cubic-bezier(.2,1.3,.4,1) both; }
.dog-exercise { animation: dog-exercise-v2 .35s ease-in-out infinite alternate; }
.dog-push { left: 12%; animation: dog-push .34s ease-in-out infinite alternate; }

.constellation-stage { width:92%; height:300px; position:absolute; left:4%; top:12%; display:flex; flex-direction:column; align-items:center; gap:22px; padding:20px 10px; border:1px solid rgba(197,226,255,.18); border-radius:28px; background:radial-gradient(circle at 50% 0,rgba(92,145,220,.2),transparent 58%); box-shadow:inset 0 0 40px rgba(102,157,219,.09); }
.birthday-star { display:flex; flex-direction:column; align-items:center; color:#eaf5ff; text-align:center; }.birthday-star::before{content:"✦";margin-bottom:4px;color:#fff2a8;font-size:28px;text-shadow:0 0 17px #fff4b4;animation:memory-pulse 1.1s ease-in-out infinite alternate}.birthday-star b{font:900 15px var(--font-geist-mono),monospace;letter-spacing:.08em}.birthday-star span{margin-top:3px;color:rgba(224,240,255,.58);font-size:9px}
.constellation-grid{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.constellation-card{height:114px;position:relative;padding:9px 5px 21px;border:1px solid rgba(177,213,255,.22);border-radius:18px;color:#dcebff;background:linear-gradient(145deg,rgba(16,38,79,.84),rgba(12,24,55,.92));box-shadow:0 10px 24px rgba(0,8,29,.3);transition:transform .18s,box-shadow .18s}.constellation-card:active{transform:scale(.96)}.constellation-card svg{width:100%;height:70px;overflow:visible}.constellation-card polyline{fill:none;stroke:rgba(178,212,255,.36);stroke-width:1}.constellation-card circle{fill:#fff6c8;filter:drop-shadow(0 0 3px #fff)}.constellation-card>span{position:absolute;left:50%;bottom:7px;color:rgba(216,235,255,.62);font-size:15px;transform:translateX(-50%)}.constellation-leo{box-shadow:0 0 0 1px rgba(255,231,158,.06),0 10px 24px rgba(0,8,29,.3)}

.school-building { width: 86%; height: 290px; position: absolute; left: 7%; top: 13%; border-radius: 18px 18px 0 0; background: #d8c79f; box-shadow: inset 0 -17px 0 #b7996c,0 16px 30px rgba(39,63,58,.2); }
.school-building::before { content:""; position:absolute; left:4%; right:4%; top:-38px; height:52px; background:#5a7e68; clip-path:polygon(0 100%,12% 48%,42% 48%,50% 0,58% 48%,88% 48%,100% 100%); }
.school-sign { position:absolute; z-index:5; left:7%; right:7%; top:19px; padding:8px 3px; border-radius:7px; color:#f5ecd5; background:#527760; font-size:12px; font-weight:850; text-align:center; letter-spacing:.04em; box-shadow:0 0 20px rgba(157,232,215,.22); }
.school-gate { width:142px; height:178px; position:absolute; z-index:7; left:50%; bottom:0; overflow:visible; padding:0; border:7px solid #786344; border-bottom:0; border-radius:70px 70px 0 0; background:#173f42; transform:translateX(-50%); box-shadow:0 0 0 4px rgba(157,229,215,.22),0 0 28px rgba(157,229,215,.66); }
.school-gate > i { width:50%; position:absolute; top:0; bottom:0; border:2px solid #8b7753; background:repeating-linear-gradient(90deg,#4f6d5c 0 8px,#89a07e 8px 12px); transition:transform .72s cubic-bezier(.2,.8,.3,1); }
.school-gate > i:first-child { left:0; transform-origin:left; }.school-gate > i:nth-child(2) { right:0; transform-origin:right; }
.school-gate span { position:absolute; z-index:9; left:50%; bottom:18px; padding:5px 9px; border-radius:999px; color:#193e3e; background:#c8f3e7; font-size:9px; font-weight:850; white-space:nowrap; transform:translateX(-50%); }
.gate-open .school-gate { box-shadow:0 0 45px rgba(237,255,199,.8); }.gate-open .school-gate > i:first-child { transform:perspective(170px) rotateY(-76deg); }.gate-open .school-gate > i:nth-child(2) { transform:perspective(170px) rotateY(76deg); }.gate-open .school-gate span { opacity:0; }

.airport-stage{position:absolute;inset:9% 0 25%;overflow:hidden}.airport-stage::after{content:"CAN · 广州白云机场";position:absolute;left:16px;bottom:17px;padding:6px 10px;border-radius:999px;color:#274754;background:rgba(237,250,253,.8);font:800 8px var(--font-geist-mono),monospace;letter-spacing:.08em}.airport-cloud{position:absolute;width:120px;height:34px;border-radius:999px;background:rgba(239,251,255,.68);filter:blur(.5px)}.airport-cloud::before,.airport-cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}.airport-cloud::before{width:52px;height:52px;left:18px;bottom:0}.airport-cloud::after{width:68px;height:68px;right:8px;bottom:0}.cloud-one{left:-34px;top:19px;opacity:.7}.cloud-two{right:-42px;top:104px;opacity:.5;transform:scale(.72)}
.memory-plane{width:420px;height:150px;position:absolute;z-index:5;left:-8px;top:92px;border:4px solid #405a68;border-radius:76% 18% 26% 44%;background:linear-gradient(#f7fbfb 0 60%,#79b4c5 61% 78%,#e9f2f2 79%);box-shadow:0 19px 32px rgba(41,73,87,.28);transform:rotate(-2deg)}.memory-plane>b{position:absolute;left:105px;top:86px;color:#285366;font:900 10px var(--font-geist-mono),monospace;letter-spacing:.08em}.plane-window{width:18px;height:16px;position:absolute;top:36px;border:3px solid #416474;border-radius:45%;background:#7ec2d8;box-shadow:inset 0 0 6px rgba(236,255,255,.7)}.plane-window.one{left:145px}.plane-window.two{left:183px}.plane-window.three{left:221px}.plane-wing{width:148px;height:70px;position:absolute;z-index:-1;left:166px;bottom:-42px;border:4px solid #405a68;border-radius:12px 80% 25% 80%;background:#dbe8e9;transform:skewX(-22deg)}.plane-tail{width:78px;height:92px;position:absolute;z-index:-1;right:23px;top:-55px;border:4px solid #405a68;border-radius:70% 15% 8px 12px;background:#5796ad;transform:skewX(-13deg)}.plane-door{width:53px;height:76px;position:absolute;z-index:7;left:98px;bottom:18px;padding:0;border:3px solid #42616e;border-radius:21px 21px 8px 8px;background:#d9e7e9;box-shadow:0 0 0 0 rgba(173,242,232,.2),0 0 23px rgba(128,226,216,.64);transition:transform .7s,opacity .7s;animation:qte-glow .75s ease-in-out infinite alternate}.plane-door i{position:absolute;inset:7px;border:2px solid #63808b;border-radius:15px 15px 5px 5px}.plane-door span{position:absolute;left:50%;bottom:8px;padding:3px 5px;border-radius:999px;color:#214a52;background:#a8e9dc;font-size:8px;font-weight:900;white-space:nowrap;transform:translateX(-50%)}.plane-open .plane-door{transform:perspective(150px) rotateY(-78deg);transform-origin:left;box-shadow:none;animation:none}.plane-open .plane-door span{opacity:0}

.scratch-stage { width:82%; height:280px; position:absolute; left:9%; top:14%; overflow:hidden; border:4px solid rgba(235,255,252,.55); border-radius:34px; box-shadow:0 18px 40px rgba(25,55,68,.28),inset 0 0 28px rgba(255,255,255,.24); background:#739bb0; }
.scratch-stage > em { position:absolute; z-index:7; left:50%; bottom:13px; padding:6px 11px; border-radius:999px; color:#224b55; background:rgba(255,255,255,.86); font-size:9px; font-style:normal; font-weight:850; white-space:nowrap; transform:translateX(-50%); pointer-events:none; }
.scratch-canvas { width:100%; height:100%; position:absolute; z-index:5; inset:0; display:block; touch-action:none; cursor:grab; }.scratch-canvas:active{cursor:grabbing}.ffxiv-egg{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#e8fff9;background:radial-gradient(circle,#4c827e,#284e58)}.ffxiv-egg span{font-size:63px;color:#e6d999;text-shadow:0 0 18px #f1e8b9}.ffxiv-egg b{font-size:25px}.ffxiv-egg small{margin-top:5px;color:rgba(255,255,255,.65);font:800 9px var(--font-geist-mono),monospace;letter-spacing:.12em}

.egg-modal{position:absolute;z-index:55;inset:0;display:grid;place-items:center;padding:24px;background:rgba(7,20,37,.72);backdrop-filter:blur(9px);animation:egg-modal-in .28s both}.egg-card{width:min(86vw,335px);padding:25px 23px 22px;border:1px solid rgba(229,241,255,.34);border-radius:27px;color:#edfaff;background:linear-gradient(155deg,#234557,#152d3c);box-shadow:0 24px 65px rgba(0,8,22,.48),inset 0 0 35px rgba(158,223,215,.08);text-align:center}.egg-card>small{color:#a9e5da;font:800 8px var(--font-geist-mono),monospace;letter-spacing:.15em}.scholar-crystal{width:105px;height:105px;position:relative;display:grid;place-items:center;margin:14px auto 9px;clip-path:polygon(50% 0,91% 20%,100% 64%,70% 100%,30% 100%,0 64%,9% 20%);background:linear-gradient(145deg,#f0e3a6,#7abbb0 52%,#244e5e);filter:drop-shadow(0 0 17px rgba(196,236,207,.46))}.scholar-crystal::before{content:"";position:absolute;inset:8px;clip-path:inherit;border:1px solid rgba(255,255,255,.42);background:radial-gradient(circle,rgba(255,255,255,.22),transparent 55%)}.scholar-crystal i{position:absolute;z-index:2;color:#fff3b7;font-size:52px;font-style:normal;text-shadow:0 0 13px #fff}.scholar-crystal span{position:absolute;z-index:3;color:#214e55;font-size:23px}.egg-card h3{margin:8px 0 4px;font-size:24px}.egg-card p{margin:0;color:rgba(233,248,250,.68);font-size:11px;line-height:1.65}.egg-card button{width:100%;height:47px;margin-top:19px;border:0;border-radius:14px;color:#173e43;background:#a6eadb;font-weight:900;box-shadow:0 8px 21px rgba(75,191,170,.25)}

.computer-wall{width:92%;height:270px;position:absolute;left:4%;top:14%;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;gap:7px;padding:28px 12px 43px;border:8px solid #243b45;border-radius:20px;color:#a6ddd6;background:linear-gradient(#344a55,#233740);box-shadow:0 20px 36px rgba(19,37,45,.36),inset 0 -21px 0 #1c3038}.computer-wall::after{content:"";width:46%;height:14px;position:absolute;left:27%;bottom:-14px;border-radius:0 0 12px 12px;background:#172931}.computer-screen{height:128px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:4px solid #16282f;border-radius:9px;color:#597079;background:#101c22;box-shadow:inset 0 0 14px rgba(0,0,0,.62);transition:background .55s,color .55s,box-shadow .55s,transform .35s}.computer-screen i{width:23px;height:23px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%}.computer-screen b{font:900 8px var(--font-geist-mono),monospace}.computer-screen em{font-size:7px;font-style:normal}.computer-wall>small{position:absolute;left:50%;bottom:17px;color:rgba(209,231,232,.5);font:800 8px var(--font-geist-mono),monospace;letter-spacing:.13em;transform:translateX(-50%);white-space:nowrap}.computer-wall:not(.computers-on){animation:computer-prompt 1.1s ease-in-out infinite alternate}.computers-on .computer-screen{color:#d9fff6;background:linear-gradient(155deg,#16394a,#176b69);box-shadow:inset 0 0 20px rgba(92,235,205,.23),0 0 22px rgba(86,224,198,.34)}.computers-on .screen-0{transform:perspective(200px) rotateY(7deg)}.computers-on .screen-2{transform:perspective(200px) rotateY(-7deg)}.computers-on .computer-screen i{border-style:dashed;animation:computer-spin 1.2s linear infinite}.computers-on .screen-1{transition-delay:.14s}.computers-on .screen-2{transition-delay:.28s}

.partner-doorway{width:92%;height:320px;position:absolute;left:4%;top:13%;display:flex;align-items:flex-end;justify-content:flex-start;gap:9px;padding:0 82px 14px 7px;border-radius:110px 110px 10px 10px;background:linear-gradient(#705944,#e7c894);box-shadow:inset 0 0 0 10px #896c50,0 14px 35px rgba(80,52,34,.27)}
.green-rabbit,.moli-partner{width:116px;height:185px;position:relative;z-index:10;display:flex;align-items:flex-end;justify-content:center;padding:0 0 9px;border:0;color:#435136;background:transparent;box-shadow:none;transition:transform .55s cubic-bezier(.2,1.1,.35,1),filter .35s;animation:partner-breathe 1.5s ease-in-out infinite alternate}
.green-rabbit img{width:142px;height:194px;position:absolute;left:-13px;bottom:0;object-fit:contain;filter:drop-shadow(0 9px 7px rgba(52,65,38,.2))}
.green-rabbit b,.moli-partner b{position:relative;z-index:4;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.78);font-size:10px;box-shadow:0 4px 12px rgba(69,54,39,.12)}
.moli-partner{overflow:visible}.moli-partner img{width:136px;height:166px;position:absolute;left:-10px;bottom:0;object-fit:contain}
.partner-doorway .green-rabbit.found{z-index:16;transform:translate(43px,-6px) rotate(-7deg) scale(1.05);filter:drop-shadow(0 0 18px rgba(218,255,155,.8));animation:rabbit-rescue .62s cubic-bezier(.2,1.25,.4,1) both}
.partner-doorway .moli-partner.found{transform:translateY(-12px);filter:drop-shadow(0 0 18px rgba(222,255,174,.72))}
.partner-wall{width:82px;position:absolute;z-index:4;top:39px;right:0;bottom:0;background:repeating-linear-gradient(0deg,#7d8c91 0 32px,#67767d 32px 37px);box-shadow:-13px 0 26px rgba(32,51,59,.25)}.partner-wall i{width:100%;height:2px;position:absolute;left:0;background:rgba(255,255,255,.22)}.partner-wall i:first-child{top:23%}.partner-wall i:nth-child(2){top:52%}.partner-wall i:nth-child(3){top:78%}

.fitness-stage,.box-stage,.homes-stage{width:86%;height:350px;position:absolute;left:7%;top:13%}.fitness-ring{width:170px;height:170px;position:absolute;left:50%;top:4px;border:22px solid #ef9a45;border-radius:50%;background:rgba(255,245,209,.2);box-shadow:inset 0 0 0 5px #ffd080,0 0 26px rgba(239,154,69,.35);transform:translateX(-50%)}.fitness-ring i{width:13px;height:105px;position:absolute;left:50%;top:50%;border-radius:999px;background:#624a3b;transform-origin:50% 0;transition:transform .22s}.qte-meter{height:12px;position:absolute;left:12%;right:12%;bottom:88px;overflow:hidden;border:2px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(34,60,61,.28)}.qte-meter i{height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#96ead8,#ffe19c);transition:width .22s}.qte-controls{position:absolute;left:50%;bottom:8px;display:grid;grid-template-columns:repeat(2,78px);gap:12px;transform:translateX(-50%)}.qte-controls button{height:65px;border:3px solid rgba(255,255,255,.52);border-radius:19px;color:#e9f8f3;background:rgba(28,58,61,.72);font-size:34px;font-weight:900;box-shadow:0 7px 0 rgba(19,42,44,.5);touch-action:manipulation;transition:transform .08s,background .18s}.qte-controls button.expected{color:#19443f;background:#a9f1d7;box-shadow:0 0 0 6px rgba(169,241,215,.2),0 7px 0 #559e8c;animation:qte-glow .65s ease-in-out infinite alternate}.qte-controls button:active{transform:translateY(5px);box-shadow:none}
.box-stage{top:15%}.push-box{width:176px;height:138px;position:absolute;z-index:5;left:29%;top:49px;border:4px solid #7c573b;border-radius:6px;background:#c89562;box-shadow:inset 0 -13px 0 rgba(102,68,43,.15),0 13px 22px rgba(70,48,34,.25);transition:transform .18s}.push-box::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:4px dashed rgba(105,69,41,.45)}.push-box i{width:54%;height:16px;position:absolute;top:-13px;background:#d7aa79;border:3px solid #7c573b}.push-box i:first-child{left:-4px;transform:rotate(-8deg);transform-origin:right}.push-box i:nth-child(2){right:-4px;transform:rotate(8deg);transform-origin:left}.push-box b{position:absolute;left:50%;top:48%;padding:4px 8px;border:2px solid #8a5e3d;color:#8a5e3d;font:900 10px var(--font-geist-mono),monospace;transform:translate(-50%,-50%)}.push-box.box-open i:first-child{transform:rotate(-58deg) translateY(-12px)}.push-box.box-open i:nth-child(2){transform:rotate(58deg) translateY(-12px)}.box-kyoko{width:155px;height:180px;position:absolute;z-index:3;left:18%;top:9px;object-fit:contain;opacity:0;transform:translateY(42px) scale(.8);transition:all .65s}.box-kyoko.revealed{opacity:1;transform:translateY(-28px) scale(1)}
.homes-stage{display:flex;align-items:flex-end;justify-content:center;gap:10px;padding-bottom:44px}.home-door{position:relative;padding:0;border:4px solid #5c665a;border-bottom:0;border-radius:10px 10px 0 0;color:#36514b;background:#d8cfad;box-shadow:0 10px 18px rgba(50,68,60,.2);touch-action:manipulation}.home-door i{position:absolute;inset:12% 13% 0;border:3px solid #577067;border-bottom:0;background:#739586;transform-origin:left;transition:transform .5s}.home-door b{position:absolute;z-index:3;left:50%;top:45%;font-size:20px;transform:translate(-50%,-50%)}.home-door span{position:absolute;left:50%;bottom:-30px;font-size:8px;font-weight:800;white-space:nowrap;transform:translateX(-50%)}.home-door.door-0{width:78px;height:134px}.home-door.door-1{width:98px;height:174px}.home-door.door-2{width:118px;height:220px}.home-door.expected{box-shadow:0 0 0 6px rgba(178,245,220,.23),0 0 26px #b8f0dc}.home-door.opened i{transform:perspective(150px) rotateY(-72deg)}.home-door.opened b{opacity:.3}
.ice-stage{height:325px;top:12%;background:#356e7e}.ice-reflection{position:absolute;z-index:2;inset:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:20px;color:#d9fff9;background:radial-gradient(circle at 50% 42%,rgba(222,255,250,.55),transparent 36%),linear-gradient(#356d7c,#73b7ba)}.ice-reflection .memory-dog{position:absolute;transform:translateX(-50%) scale(.8) scaleY(-1);filter:blur(.2px);opacity:.55}.ice-reflection>b{font-size:19px}.ice-reflection>span{margin-top:3px;font-size:8px;letter-spacing:.08em}

.warm-room-world{position:absolute;inset:0;overflow:hidden;background:linear-gradient(#b88258 0 58%,#c9a174 58%);}.warm-room-world::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 65% 32%,rgba(255,232,177,.55),transparent 38%),linear-gradient(90deg,rgba(80,47,31,.18),transparent 25%)}.warm-window{width:42%;height:38%;position:absolute;right:8%;top:11%;border:10px solid #795b45;border-radius:4px;background:linear-gradient(#315b70,#ebbd82)}.warm-window::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:6px solid #795b45}.warm-window i{width:5px;height:5px;position:absolute;border-radius:50%;background:#fff7cf;box-shadow:20px 27px #fff7cf,54px 9px #fff7cf,88px 46px #fff7cf}.warm-window i:nth-child(2){left:30px;top:35px}.warm-lamp{width:46px;height:160px;position:absolute;left:12%;top:19%;border-radius:50% 50% 8px 8px;background:#f3c474;box-shadow:0 0 55px #ffd793}.warm-lamp i{width:8px;height:140px;position:absolute;left:19px;top:46px;background:#755643}.warm-rug{width:72%;height:25%;position:absolute;left:14%;bottom:7%;border-radius:50%;background:#8d6e5c}.warm-table{width:190px;height:24px;position:absolute;left:49%;bottom:30%;border:4px solid #6b4b36;background:#9b704d;transform:translateX(-50%)}.warm-table::before,.warm-table::after{content:"";width:12px;height:104px;position:absolute;top:20px;background:#6b4b36}.warm-table::before{left:20px}.warm-table::after{right:20px}.warm-cake{width:75px;height:45px;position:absolute;left:20px;bottom:20px;border:3px solid #875c54;border-radius:12px 12px 5px 5px;background:#f4c8b8}.warm-cake i{width:4px;height:29px;position:absolute;bottom:42px;background:#65aabd}.warm-cake i:first-child{left:15px}.warm-cake i:nth-child(2){left:34px}.warm-cake i:nth-child(3){left:53px}.warm-room-world .memory-dog{left:12%;bottom:17%;transform:scale(1.1)}

.room-warm-light { position: absolute; z-index: 2; inset: 0; pointer-events: none; background: radial-gradient(circle at 55% 42%, rgba(255,225,169,.3), transparent 32%), linear-gradient(to bottom, rgba(80,52,38,.08), rgba(108,64,35,.18)); mix-blend-mode: screen; }
.room-caption { width: calc(100% - 38px); position: absolute; z-index: 5; top: 78px; left: 19px; text-align: center; color: #fff9ed; filter: drop-shadow(0 2px 8px rgba(74,43,28,.36)); }
.room-caption small { color: #ffe1a7; font: 750 8px var(--font-geist-mono), monospace; letter-spacing: .12em; }
.room-caption h2 { margin: 4px 0 2px; font-size: 24px; }
.room-caption p { margin: 0; color: rgba(255,249,237,.72); font-size: 10px; }
.envelope-hotspot { width: 124px; height: 91px; position: absolute; z-index: 7; left: 58%; bottom: 27%; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; color: #fff7df; background: transparent; cursor: pointer; filter: drop-shadow(0 9px 16px rgba(80,42,22,.25)); animation: envelope-breathe 1.6s ease-in-out infinite; }
.envelope-hotspot b { padding: 4px 8px; border-radius: 999px; background: rgba(74,47,34,.6); font-size: 9px; backdrop-filter: blur(5px); }
.mini-envelope { width: 86px; height: 54px; position: relative; display: block; border: 2px solid #8e6a45; border-radius: 7px; background: #ffe5ae; box-shadow: 0 0 26px 8px rgba(255,219,135,.72); }
.mini-envelope::before,
.mini-envelope::after { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0,50% 62%,100% 0); background: #fff0c7; }
.mini-envelope::after { clip-path: polygon(0 100%,50% 42%,100% 100%); background: #eecb8c; }
.mini-envelope i { width: 19px; height: 19px; position: absolute; z-index: 3; left: 50%; top: 45%; border-radius: 50%; background: #65a5af; transform: translate(-50%,-50%); box-shadow: 0 0 0 3px rgba(255,255,255,.3); }

.letter-modal { position: absolute; z-index: 22; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(42,28,21,.58); backdrop-filter: blur(8px); }
.letter-animation-stage { width: 100%; height: 76%; position: relative; display: grid; place-items: center; perspective: 1200px; }
.letter-envelope-back { width: 278px; height: 174px; position: absolute; top: 49%; left: 50%; border: 2px solid #95724d; border-radius: 11px; background: #e5ba79; transform: translate(-50%,-50%); box-shadow: 0 18px 45px rgba(57,33,20,.36); }
.letter-envelope-back::before { content: ""; position: absolute; z-index: 3; inset: -1px; clip-path: polygon(0 0,50% 62%,100% 0); background: #ffe7b3; transform-origin: top; transition: transform .8s ease; }
.letter-envelope-front { width: 278px; height: 174px; position: absolute; z-index: 5; top: 49%; left: 50%; overflow: hidden; border: 2px solid #95724d; border-radius: 11px; transform: translate(-50%,-50%); pointer-events: none; }
.letter-envelope-front::before { content: ""; position: absolute; inset: 0; clip-path: polygon(0 100%,50% 42%,100% 100%); background: #efca8f; }
.letter-envelope-front::after { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0,0 100%,50% 42%,100% 100%,100% 0,50% 62%); background: #f7d9a6; }
.letter-envelope-front i { width: 31px; height: 31px; position: absolute; z-index: 3; left: 50%; top: 46%; border-radius: 50%; background: #5f9fa9; transform: translate(-50%,-50%); box-shadow: 0 0 0 4px rgba(255,255,255,.26); }
.birthday-letter { width: 242px; height: 298px; position: absolute; z-index: 4; top: 49%; left: 50%; overflow: hidden; padding: 27px 25px; border: 1px solid rgba(132,101,68,.24); color: #5b4638; background: linear-gradient(#fffdf4,#faefd8); box-shadow: 0 15px 35px rgba(63,38,24,.28); transform: translate(-50%,-22%) scale(.62) rotateX(64deg); transform-origin: center bottom; transition: all .85s cubic-bezier(.2,.8,.25,1); }
.birthday-letter::before,
.birthday-letter::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(108,78,52,.13); }
.birthday-letter::before { top: 33%; }
.birthday-letter::after { top: 66%; }
.birthday-letter .letter-to,
.birthday-letter .letter-body,
.birthday-letter .letter-sign { opacity: 0; transition: opacity .4s .55s; }
.letter-to { margin: 0; color: #53968e; font: 800 10px var(--font-geist-mono), monospace; letter-spacing: .1em; }
.letter-sign { margin: 25px 0 0; color: #8b6b56; font-size: 10px; text-align: right; }
.letter-stage-1 .letter-envelope-back::before { transform: rotateX(170deg); }
.letter-stage-1 .letter-envelope-front i { animation: seal-release .55s both; }
.letter-stage-2 .letter-envelope-back::before,
.letter-stage-3 .letter-envelope-back::before { transform: rotateX(170deg); }
.letter-stage-2 .birthday-letter { transform: translate(-50%,-73%) scale(.72) rotateX(15deg); }
.letter-stage-3 .letter-envelope-back,
.letter-stage-3 .letter-envelope-front { opacity: 0; transform: translate(-50%,15%) scale(.75); transition: all .5s; }
.letter-stage-3 .birthday-letter { width: min(88vw, 360px); height: min(64svh, 520px); top: 49%; overflow-y: auto; padding: 31px 27px 40px; border-radius: 4px; transform: translate(-50%,-50%) scale(1) rotateX(0); }
.letter-stage-3 .birthday-letter .letter-to,
.letter-stage-3 .birthday-letter .letter-body,
.letter-stage-3 .birthday-letter .letter-sign { opacity: 1; }
.finish-letter-button { width: min(calc(100% - 38px), 350px); height: 48px; position: absolute; z-index: 30; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); border: 0; border-radius: 15px; color: #254743; background: #a7e8d8; font-weight: 850; transform: translateX(-50%); box-shadow: 0 10px 24px rgba(45,101,90,.28); cursor: pointer; }

.level3-finish-card > p:not(.arcade-kicker) { color: rgba(233,247,244,.68); line-height: 1.65; }
.level3-finish-card .ghost-button { color: rgba(233,247,244,.58); }
.level3-clue { border-color: rgba(157,229,215,.25); background: rgba(157,229,215,.08); }
.level3-clue small { color: rgba(233,247,244,.5); }
.level3-clue b { color: #a8eee1; }
.ice-collectible { width: 110px; height: 110px; position: relative; display: grid; place-items: center; margin: 10px auto -5px; }
.ice-collectible span { z-index: 2; color: #b7fff6; font-size: 74px; text-shadow: 0 0 18px rgba(140,239,234,.75); animation: ice-float 1.8s ease-in-out infinite alternate; }
.ice-collectible i { width: 72px; height: 72px; position: absolute; border: 1px solid rgba(164,241,235,.4); border-radius: 50%; box-shadow: 0 0 30px rgba(109,224,218,.24); }

.history-card { padding: 22px; }
.history-card header { display: flex; justify-content: space-between; align-items: flex-start; }
.history-card h2 { margin: 0; font-size: 25px; }
.history-card header > button { width: 33px; height: 33px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; color: white; background: rgba(255,255,255,.06); cursor: pointer; }
.history-card ol { max-height: 330px; overflow: auto; list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 7px; }
.history-card li { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; min-height: 43px; padding: 0 10px; border-radius: 12px; background: rgba(255,255,255,.05); }
.history-card li b { font: 800 18px var(--font-geist-mono), monospace; }
.history-card li span { color: rgba(255,255,255,.62); font-size: 11px; }
.history-card li small { color: rgba(255,255,255,.36); font-size: 9px; }
.empty-history { display: grid; place-items: center; height: 160px; color: rgba(255,255,255,.42); font-size: 12px; }
.close-history { margin-top: 3px; }

/* LEVEL 3 · supplied artwork integration v22 */
.v22-journey{position:absolute;inset:0;overflow:hidden;color:#203b38;background:#c9d9ce;isolation:isolate;touch-action:none}
.v22-bg{position:absolute;z-index:0;inset:0;background-position:center;background-size:cover;transform:scale(1.012);transition:transform 1.15s cubic-bezier(.2,.7,.2,1),filter .7s;will-change:transform}
.v22-scene-1 .v22-bg{background-image:url('/assets-1.0-v31/level3/level3_scene01_bg.webp')}.v22-scene-2 .v22-bg{background-image:url('/assets-1.0-v31/level3/level3_scene02_bg.webp')}.v22-scene-3 .v22-bg{background-image:url('/assets-1.0-v31/level3/level3_scene03_bg.webp')}.v22-scene-4 .v22-bg{background-image:url('/assets-1.0-v31/level3/level3_scene04_bg.webp')}.v22-scene-5 .v22-bg{background-image:url('/assets-1.0-v31/level3/level3_scene05_bg.webp')}.v22-scene-6 .v22-bg{background-image:url('/assets-1.0-v31/level3/level3_scene06_bg.webp')}.v22-scene-7 .v22-bg{background-image:url('/assets-1.0-v31/level3/level3_scene07_bg.webp')}.v22-scene-8 .v22-bg{background-image:url('/assets-1.0-v31/level3/level3_scene08_bg.webp')}.v22-scene-9 .v22-bg{background-image:url('/assets-1.0-v31/level3/level3_scene08_bg.webp')}.v22-scene-10 .v22-bg{background-image:url('/assets-1.0-v31/level3/level3_scene09_bg.webp')}.v22-scene-11 .v22-bg{background-image:url('/assets-1.0-v31/level3/level3_scene10_bg.webp')}
.v22-journey::after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(21,38,37,.18),transparent 19%,transparent 65%,rgba(20,37,35,.25))}
.v22-progress{height:48px;position:absolute;z-index:30;top:max(13px,env(safe-area-inset-top));left:76px;right:14px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:0 13px;border:1px solid rgba(255,255,255,.52);border-radius:18px;color:#f5fffb;background:rgba(35,66,62,.73);box-shadow:0 8px 22px rgba(30,47,43,.16);backdrop-filter:blur(11px)}
.v22-progress span,.v22-progress em{font:850 9px var(--font-geist-mono),monospace;letter-spacing:.08em;font-style:normal;white-space:nowrap}.v22-progress i{height:6px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.2)}.v22-progress b{height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#8ee4d0,#ffe29f);transition:width .65s ease}
.v22-stage{position:absolute;z-index:5;inset:0}.v22-stage button{font:inherit;-webkit-tap-highlight-color:transparent}.v22-caption{position:absolute;z-index:25;left:18px;right:18px;bottom:max(20px,env(safe-area-inset-bottom));padding:17px 18px 16px;border:1px solid rgba(232,255,248,.32);border-radius:24px;color:#effaf6;background:rgba(24,51,51,.88);box-shadow:0 18px 44px rgba(30,48,45,.2);backdrop-filter:blur(14px)}
.v22-caption small{color:#8ce2d0;font:800 9px var(--font-geist-mono),monospace;letter-spacing:.08em}.v22-caption h2{margin:4px 0 5px;font-size:22px}.v22-caption p{white-space:pre-line;margin:0;color:rgba(240,252,248,.72);font-size:11px;line-height:1.55}.v22-caption em{min-height:36px;display:flex;align-items:center;gap:9px;margin-top:12px;padding:0 11px;border-radius:12px;color:rgba(240,252,248,.76);background:rgba(255,255,255,.07);font-size:10px;font-style:normal}.v22-caption em i{width:8px;height:8px;border-radius:50%;background:#94e8d7;box-shadow:0 0 0 6px rgba(148,232,215,.13);animation:v22-pulse .8s ease-in-out infinite alternate}
.v22-constellations{position:absolute;inset:8% 5% 25%;}.v22-constellations button{width:31%;height:108px;position:absolute;border:0;color:#d9eeff;background:transparent;filter:drop-shadow(0 0 7px rgba(172,222,255,.7));animation:v22-float 2s ease-in-out infinite alternate}.v22-constellations button.pisces{left:1%;top:17%}.v22-constellations button.leo{left:35%;top:4%}.v22-constellations button.scorpio{right:0;top:22%}.v22-constellations svg{width:100%;height:70px;overflow:visible}.v22-constellations polyline{fill:none;stroke:rgba(194,226,255,.65);stroke-width:1}.v22-constellations circle{fill:#fff;stroke:#9fd6ff;stroke-width:1.4}.v22-constellations button b{font-size:22px}.v22-constellations button:active{transform:scale(.94)}.v22-constellations button.leo:hover,.v22-constellations button.leo:focus-visible{filter:drop-shadow(0 0 15px #d7edff)}
.v22-dog-back{width:31%;height:38%;position:absolute;left:34.5%;bottom:0;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 9px 6px rgba(16,38,58,.28));animation:v22-dog-breathe 1.5s ease-in-out infinite alternate}
.v22-gate-stage{position:absolute;inset:0}.v22-gate{width:45%;height:31%;position:absolute;z-index:8;left:27.5%;top:42%;overflow:visible;border:0;background:transparent;filter:drop-shadow(0 0 15px rgba(255,239,146,.72))}.v22-gate span{width:50%;height:100%;position:absolute;top:0;border:3px solid #815a42;background:repeating-linear-gradient(90deg,#8a654b 0 5px,#e8c17a 5px 8px);transition:transform .8s cubic-bezier(.25,.8,.25,1)}.v22-gate span:first-child{left:0;transform-origin:left}.v22-gate span:last-child{right:0;transform-origin:right}.v22-gate-stage.open .v22-gate span:first-child{transform:perspective(160px) rotateY(82deg)}.v22-gate-stage.open .v22-gate span:last-child{transform:perspective(160px) rotateY(-82deg)}
.v22-walking-dog{width:19%;height:26%;position:absolute;z-index:10;left:40.5%;top:55%;object-fit:contain;pointer-events:none;transition:transform 1.25s ease-in,opacity .3s 1.05s;filter:drop-shadow(0 6px 4px rgba(49,67,55,.22))}.v22-gate-stage.open .v22-walking-dog{transform:translateY(-125%) scale(.48);opacity:0}.v22-beijing-gate .v22-gate{width:28%;height:18%;left:36%;top:54%}.v22-beijing-gate .v22-walking-dog{top:62%}
.v22-airport{position:absolute;inset:7% 0 25%;overflow:hidden}.v22-routes{position:absolute;z-index:5;inset:2% 2% 8%;width:96%;height:90%}.v22-routes path{fill:none;stroke:rgba(255,255,255,.92);stroke-width:.7;stroke-dasharray:2.4 2.4;vector-effect:non-scaling-stroke}.v22-routes path.chosen{stroke:#2f9fd2;stroke-width:1.4;animation:v22-route-dash .7s linear infinite}.v22-route-dot{position:absolute;z-index:8;padding:8px 12px;border:2px solid rgba(255,255,255,.86);border-radius:99px;color:#286477;background:rgba(255,255,255,.88);box-shadow:0 5px 12px rgba(60,124,151,.2);font-size:11px;font-weight:850}.v22-plane{width:42%;height:32%;position:absolute;z-index:7;left:28%;top:49%;object-fit:contain;filter:drop-shadow(0 9px 5px rgba(61,112,134,.2));transition:transform 1.25s cubic-bezier(.2,.7,.25,1),opacity .35s 1s}.v22-plane.fly{transform:translate(115%,-155%) scale(.36) rotate(-8deg);opacity:0}
.v22-cornell{position:absolute;z-index:10;inset:0;overflow:hidden;touch-action:none}.v22-snow-piece{position:absolute;z-index:10;left:-8%;width:116%;height:14%;border-radius:50%;background:#f8fbff;box-shadow:inset 0 -9px 0 rgba(187,209,226,.35),0 5px 12px rgba(87,120,142,.12);transition:transform .48s cubic-bezier(.2,.8,.2,1),opacity .38s}.v22-snow-piece.gone{opacity:0}.v22-snow-piece:nth-child(odd).gone{transform:translateX(-115%) rotate(-5deg)}.v22-snow-piece:nth-child(even).gone{transform:translateX(115%) rotate(5deg)}.snow-0{top:-3%}.snow-1{top:7%}.snow-2{top:17%}.snow-3{top:27%}.snow-4{top:37%}.snow-5{top:47%}.snow-6{top:57%}.snow-7{top:67%}.snow-8{top:77%}.snow-9{top:87%}.v22-dog-hands{position:absolute;z-index:20;left:18%;right:18%;bottom:20%;display:flex;justify-content:space-between;pointer-events:none}.v22-dog-hands i{width:64px;height:92px;border-radius:55% 55% 43% 43%;background:#72c6dd;border:4px solid #334f58;box-shadow:inset 7px -5px 0 rgba(46,143,174,.18);animation:v22-hands .75s ease-in-out infinite alternate}.v22-dog-hands i:last-child{animation-direction:alternate-reverse}.v22-discovery{position:absolute;z-index:8;border:0;box-shadow:0 8px 24px rgba(43,68,73,.2);animation:v22-pop .45s both}.v22-discovery.title{left:17%;top:50%;padding:11px 15px;border-radius:10px;color:#803f34;background:#fff2da;font-size:17px;font-weight:900}.v22-discovery.scholar{right:18%;top:57%;width:63px;height:75px;clip-path:polygon(50% 0,92% 25%,85% 82%,50% 100%,15% 82%,8% 25%);color:#fff4a9;background:linear-gradient(145deg,#d9c970,#55978c);font-size:35px}.v22-elevator-door{width:76px;height:118px;position:absolute;z-index:12;left:7%;bottom:22%;border:7px solid #353b3c;color:#c7f0e7;background:linear-gradient(90deg,#4e5658 0 47%,#222 48% 52%,#4e5658 53%);font-size:8px;font-weight:900;animation:v22-door-glow .85s ease-in-out infinite alternate}.v22-elevator-door span{position:absolute;left:50%;top:-24px;transform:translateX(-50%)}
.v22-office{position:absolute;inset:18% 4% 25%}.v22-office>img{width:94%;height:50%;position:absolute;left:3%;top:24%;object-fit:contain}.v22-screen{width:25%;height:15%;position:absolute;z-index:7;top:39%;border:0;border-radius:6px;color:#73878b;background:transparent;font-size:9px;font-weight:850}.v22-screen.s0{left:12%}.v22-screen.s1{left:37.5%}.v22-screen.s2{right:11%}.v22-screen.on{color:#d7fff4;text-shadow:0 0 10px #5ee0ca;font-size:14px}
.v22-partners{position:absolute;inset:14% 0 25%;overflow:hidden}.v22-wall{width:19%;position:absolute;right:4%;top:15%;bottom:5%;background:repeating-linear-gradient(0deg,#7f8c90 0 42px,#647278 42px 47px)}.v22-bumping-dog{width:30%;height:42%;position:absolute;z-index:5;right:12%;bottom:8%;object-fit:contain;animation:v22-bump .55s ease-in-out infinite}.v22-partners.rescued .v22-bumping-dog{animation:v22-relief .6s both}.v22-moli{width:30%;height:32%;position:absolute;left:34%;bottom:6%;object-fit:contain}.v22-rabbit{width:28%;height:43%;position:absolute;z-index:10;left:3%;bottom:5%;padding:0;border:0;background:transparent;touch-action:none;transition:transform .28s}.v22-rabbit.dragging{transition:none}.v22-rabbit img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 7px 4px rgba(52,76,53,.25))}
.v22-fitness{position:absolute;inset:15% 6% 25%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px}.v22-ring{width:155px;height:155px;border:21px solid #e67931;border-radius:50%;box-shadow:inset 0 0 0 6px #ffb55f,0 10px 22px rgba(108,71,41,.22);transition:transform .16s}.v22-ring::before,.v22-ring::after{content:"";width:36px;height:58px;position:absolute;margin-top:27px;border-radius:12px;background:#423c38}.v22-ring::before{margin-left:-33px}.v22-ring::after{margin-left:110px}.v22-ring.r1,.v22-ring.r3,.v22-ring.r5,.v22-ring.r7{transform:scale(.9) rotate(12deg)}.v22-fitness button{width:190px;height:58px;border:0;border-radius:18px;color:#163f3b;background:#9ce6d2;box-shadow:0 7px 0 #4f9b89;font-weight:900}.v22-fitness button:active{transform:translateY(5px);box-shadow:0 2px 0 #4f9b89}.v22-fitness button b{margin-left:9px}
.v22-kyoko-stage{position:absolute;inset:13% 0 25%;overflow:hidden}.v22-bag{width:48%;height:48%;position:absolute;left:26%;bottom:6%;border:0;background:transparent;animation:v22-bag-shake .55s ease-in-out infinite}.v22-bag img{width:100%;height:100%;object-fit:contain}.v22-bag.c1{animation-duration:.38s}.v22-bag.c2{animation-duration:.22s}.v22-kyoko-run{width:43%;height:43%;position:absolute;z-index:8;left:30%;bottom:9%;object-fit:contain;animation:v22-kyoko-run 1s cubic-bezier(.2,.8,.25,1) both}
.v22-homes{position:absolute;inset:12% 0 25%;overflow:hidden}.v22-house{width:58%;height:56%;position:absolute;z-index:4;right:5%;bottom:4%;object-fit:contain;transition:transform .55s cubic-bezier(.2,1.2,.3,1),opacity .25s;animation:v22-house-pop .55s both}.v22-house.stage-1{width:63%}.v22-house.stage-2{width:67%}.v22-house.stage-3{width:72%}.v22-case{width:27%;height:31%;position:absolute;z-index:9;left:3%;bottom:8%;padding:0;border:0;background:transparent;touch-action:none;transition:transform .3s}.v22-case.dragging{transition:none}.v22-case img{width:100%;height:100%;object-fit:contain}.v22-homes>small{position:absolute;left:7%;bottom:4%;padding:5px 9px;border-radius:99px;color:#eefcf7;background:rgba(30,61,57,.72);font-size:9px}
.v22-nordic{position:absolute;inset:0}.v22-reflection{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:31%;color:#e6fffb;text-shadow:0 2px 9px #2b6f76}.v22-reflection img{width:34%;height:37%;object-fit:contain;transform:scaleY(-1);opacity:.52;filter:blur(.4px)}.v22-reflection b{font-size:20px}.v22-reflection span{font-size:9px}.v22-ice-canvas{position:absolute;z-index:8;inset:0;width:100%;height:100%;touch-action:none}
.v22-modal{position:absolute;z-index:80;inset:0;display:grid;place-items:center;padding:28px;background:transparent;backdrop-filter:none}.v22-modal article{width:min(90vw,360px);min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px 30px 28px;border-radius:0;color:#4d4d49;background:url('/assets-1.0-v31/level3/level3_popup_frame.webp') center/100% 100% no-repeat;text-align:center;box-shadow:0 20px 55px rgba(85,70,57,.18);animation:v22-pop .35s both}.v22-modal small{display:block;color:#53534e;font-size:9px;font-weight:600}.v22-modal b{display:block;margin:10px 0 7px;color:#464641;font-size:26px;line-height:1.15}.v22-modal p{max-width:86%;color:#66655f;font-size:11px;line-height:1.6}.v22-modal button{width:min(68%,186px);height:44px;margin-top:12px;border:1px solid rgba(118,102,84,.28);border-radius:13px;color:#4f4942;background:rgba(255,252,246,.92);font-weight:900;box-shadow:0 8px 18px rgba(90,75,63,.08)}
.v22-transition-layer{position:absolute;z-index:70;inset:-8%;overflow:hidden;pointer-events:auto;background:#dbe7df;opacity:0}.v22-transition-cover .v22-transition-layer{animation:v22-cover .42s ease-in both}.v22-transition-reveal .v22-transition-layer{animation:v22-reveal .72s cubic-bezier(.2,.8,.2,1) both}.v22-transition-exit .v22-bg{transform:scale(1.05)}.v22-transition-layer i{width:46%;height:130%;position:absolute;top:-15%;border-radius:50%;background:#eef4ed}.v22-transition-layer i:first-child{left:-4%;transform:rotate(8deg)}.v22-transition-layer i:nth-child(2){left:28%;background:#cbded5}.v22-transition-layer i:nth-child(3){right:-5%;transform:rotate(-8deg)}.v22-transition-layer span{width:90px;height:90px;position:absolute;left:50%;top:50%;border:2px solid rgba(65,121,112,.28);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 35px rgba(238,246,241,.5)}
.v22-room-dog{width:130px;height:190px;position:absolute;left:10%;bottom:16%;object-fit:contain}.v22-room{background-image:url('/assets-1.0-v31/level3/level3_scene11_bg.webp');background-position:center;background-size:cover}.v22-room>*:not(.v22-room-dog){display:none}
@keyframes v22-pulse{to{transform:scale(1.18);box-shadow:0 0 0 8px rgba(148,232,215,.08)}}@keyframes v22-float{to{transform:translateY(-7px)}}@keyframes v22-dog-breathe{to{transform:scale(1.025) translateY(-3px)}}@keyframes v22-route-dash{to{stroke-dashoffset:-5}}@keyframes v22-hands{to{transform:translateX(48px) rotate(9deg)}}@keyframes v22-pop{from{opacity:0;transform:scale(.74)}to{opacity:1;transform:scale(1)}}@keyframes v22-door-glow{to{filter:drop-shadow(0 0 16px #a9f2e0)}}@keyframes v22-bump{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(14px) rotate(4deg)}}@keyframes v22-relief{50%{transform:translateX(-12px) rotate(-7deg)}to{transform:translateX(-22px) rotate(0)}}@keyframes v22-bag-shake{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg) translateY(-4px)}}@keyframes v22-kyoko-run{0%{opacity:0;transform:translateY(65px) scale(.7)}55%{opacity:1;transform:translateY(-35px) scale(1.06)}to{transform:translate(95px,-20px) scale(1)}}@keyframes v22-house-pop{from{opacity:.2;transform:scale(.72)}to{opacity:1;transform:scale(1)}}@keyframes v22-cover{from{opacity:0;clip-path:circle(0 at 50% 50%)}to{opacity:1;clip-path:circle(80% at 50% 50%)}}@keyframes v22-reveal{from{opacity:1;clip-path:circle(80% at 50% 50%)}to{opacity:0;clip-path:circle(0 at 50% 50%)}}
@media(max-width:380px){.v22-caption{left:12px;right:12px;padding:14px 15px}.v22-caption h2{font-size:19px}.v22-progress{left:69px;right:10px}.v22-route-dot{padding:7px 9px}.v22-dog-back{width:35%;left:32.5%}}
@media(prefers-reduced-motion:reduce){.v22-journey *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
.v22-snow-piece{pointer-events:none}.v22-discovery,.v22-elevator-door{z-index:24}

/* Level 3 v23 — render-sheet faithful layout */
.v23-prompt{position:absolute;z-index:28;left:50%;width:max-content;max-width:76%;transform:translateX(-50%);padding:9px 22px;color:#263d48;background:linear-gradient(90deg,rgba(241,250,252,.08),rgba(241,250,252,.9) 23%,rgba(241,250,252,.9) 77%,rgba(241,250,252,.08));font-size:13px;line-height:1.35;text-align:center;text-shadow:0 1px rgba(255,255,255,.7);pointer-events:none;animation:v23-prompt-in .45s ease-out both}
.v23-prompt.prompt-1{top:56%}.v23-prompt.prompt-2{top:31%}.v23-prompt.prompt-3{top:69%}.v23-prompt.prompt-4{top:79%}.v23-prompt.prompt-5{top:10%;color:#f4fbff;background:linear-gradient(90deg,rgba(37,65,79,.04),rgba(37,65,79,.72) 23%,rgba(37,65,79,.72) 77%,rgba(37,65,79,.04));text-shadow:0 1px rgba(21,49,62,.8)}.v23-prompt.prompt-6{top:67%}.v23-prompt.prompt-7,.v23-prompt.prompt-8,.v23-prompt.prompt-9,.v23-prompt.prompt-10,.v23-prompt.prompt-11{bottom:7%}
.v23-narration{position:absolute;z-index:62;left:50%;top:57%;width:min(88%,360px);min-height:168px;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translate(-50%,-50%);padding:29px 34px 26px;color:#4c4b47;background:url('/assets-1.0-v31/level3/level3_popup_frame.webp') center/100% 100% no-repeat;border:0;border-radius:0;text-align:center;box-shadow:0 16px 36px rgba(78,68,57,.14);backdrop-filter:none;pointer-events:none;animation:v23-narration-in .4s ease-out both}.v23-narration small{display:block;margin-bottom:8px;color:#55534e;font-size:9px;font-weight:650;letter-spacing:.08em}.v23-narration b{display:block;color:#44433f;font-size:20px;line-height:1.2}.v23-narration p{white-space:pre-line;margin:9px 0 0;color:#66645f;font-size:11px;line-height:1.58}

/* Scene 01 — dog and constellations occupy the render-sheet positions. */
.v22-constellations{inset:2% 3% 0}.v22-constellations button{height:102px}.v22-constellations button.pisces{left:2%;top:10%}.v22-constellations button.leo{left:35%;top:3%}.v22-constellations button.scorpio{right:1%;top:13%}.v22-dog-back{width:24%;height:29%;left:38%;bottom:-1%;filter:drop-shadow(0 7px 4px rgba(16,38,58,.2))}

/* Scene 02 / 04 — the illustrated background already contains the gate. */
.v22-gate{width:48%;height:31%;left:26%;top:39%;z-index:8;border:0;border-radius:4px;background:rgba(255,244,167,.015);filter:drop-shadow(0 0 13px rgba(255,239,146,.78));animation:v23-gate-glow 1s ease-in-out infinite alternate}.v22-gate::after{content:"";position:absolute;inset:2%;border:2px solid rgba(255,245,181,.26);border-radius:3px}.v22-gate-stage.open .v22-gate{animation:v23-gate-open .9s ease-out both}.v22-walking-dog{width:22%;height:27%;left:39%;top:68%;z-index:12}.v22-gate-stage.open .v22-walking-dog{transform:translateY(-110%) scale(.4);opacity:0}.v22-beijing-gate .v22-gate{width:22%;height:24%;left:39%;top:50%}.v22-beijing-gate .v22-walking-dog{width:17%;height:23%;left:41.5%;top:58%}.v22-beijing-gate.open .v22-walking-dog{transform:translateY(-90%) scale(.42);opacity:0}

/* Scene 03 — three dotted routes ending in simplified land masses. */
.v22-airport{inset:0;overflow:hidden}.v22-routes{inset:0;width:100%;height:100%}.v22-routes path{stroke:rgba(255,255,255,.92);stroke-width:1;stroke-dasharray:2.2 2.2}.v22-routes path.chosen{stroke:#2f8fba;stroke-width:1.6}.v22-route-dot{width:72px;height:54px;padding:0;border:0;border-radius:0;color:#315963;background:#9fc7a4;clip-path:polygon(13% 25%,35% 8%,70% 13%,93% 34%,86% 74%,61% 91%,27% 85%,5% 58%);box-shadow:none;font-size:11px;font-weight:900;filter:drop-shadow(0 5px 4px rgba(57,104,118,.18));transition:transform .2s,filter .2s}.v22-route-dot.north{background:#cbbd91;clip-path:polygon(9% 35%,27% 8%,62% 6%,92% 29%,87% 70%,58% 92%,22% 82%,4% 58%)}.v22-route-dot.plateau{background:#b8aa9a;clip-path:polygon(8% 42%,22% 14%,57% 4%,88% 24%,96% 61%,73% 89%,34% 93%,4% 68%)}.v22-route-dot:active{transform:scale(.91)}.v22-route-dot:disabled{opacity:1}.v22-plane{width:72%;height:34%;left:14%;top:49%;z-index:7}.v22-plane.fly{transform:translate(50%,-118%) scale(.25) rotate(-9deg);opacity:0}

/* Scene 05 — discoveries stay behind the snow until every strip is gone. */
.v22-discovery{z-index:24}.v22-discovery.title{left:18%;top:50%}.v22-discovery.scholar{right:18%;top:55%}.v22-elevator-door{z-index:25;left:6%;bottom:3%}

/* Scene 06 — monitor sprite matches the supplied composite sheet. */
.v22-office{inset:0}.v22-office>img{width:100%;height:auto;left:0;top:18%;object-fit:contain}.v22-screen{top:37.2%;height:13.5%;border-radius:2px;font-size:10px}.v22-screen.s0{width:29%;left:3%}.v22-screen.s1{width:34%;left:33%}.v22-screen.s2{width:29%;right:3%}.v22-screen.on{font-size:13px;color:#e9fffa;text-shadow:0 0 9px #59d6c3}

/* Airport cloud transition: flight view, then a screen-full cloud cover. */


/* Elevator transition closes completely, then opens on the next scene. */
.v23-elevator-transition{position:absolute;z-index:91;inset:0;overflow:hidden;pointer-events:auto;background:transparent}.v23-elevator-transition i{position:absolute;top:0;bottom:0;width:51%;background:linear-gradient(90deg,#8c8c8c,#b9b9b9 52%,#858585);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}.v23-elevator-transition i:first-child{left:0;transform:translateX(-100%)}.v23-elevator-transition i:nth-child(2){right:0;transform:translateX(100%) scaleX(-1)}.v22-transition-exit .v23-elevator-transition i:first-child{animation:v23-elevator-close-left .72s ease-out both}.v22-transition-exit .v23-elevator-transition i:nth-child(2){animation:v23-elevator-close-right .72s ease-out both}.v22-transition-cover .v23-elevator-transition i{transform:translateX(0)}.v22-transition-reveal .v23-elevator-transition i:first-child{animation:v23-elevator-open-left .72s ease-in-out both}.v22-transition-reveal .v23-elevator-transition i:nth-child(2){animation:v23-elevator-open-right .72s ease-in-out both}

@keyframes v23-prompt-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes v23-narration-in{from{opacity:0;transform:translate(-50%,-44%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes v23-gate-glow{to{filter:drop-shadow(0 0 24px rgba(255,241,153,.95))}}
@keyframes v23-gate-open{to{opacity:0;filter:drop-shadow(0 0 35px rgba(255,247,189,1))}}
@keyframes v23-cloud-flight-in{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}
@keyframes v23-cloud-cover-in{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}
@keyframes v23-cloud-reveal{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.12)}}
@keyframes v23-elevator-close-left{to{transform:translateX(0)}}@keyframes v23-elevator-close-right{to{transform:translateX(0) scaleX(-1)}}
@keyframes v23-elevator-open-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes v23-elevator-open-right{from{transform:translateX(0) scaleX(-1)}to{transform:translateX(100%) scaleX(-1)}}

/* Level 3 v24 — deliberate transitions and supplied cloud / snow sprites. */
.v22-transition-layer{inset:0;background:linear-gradient(180deg,#eef5f1,#d7e5de);opacity:0}
.v22-transition-layer i,.v22-transition-layer span{display:none}
.v22-transition-cover .v22-transition-layer{animation:v24-soft-cover .42s ease-in both}
.v22-transition-reveal .v22-transition-layer{animation:v24-soft-reveal .72s ease-out both}

.v22-plane{width:42%;height:19%;left:29%;top:60.5%}
.v22-plane.fly{transform:translate(77%,-255%) scale(.28) rotate(-9deg);opacity:0}
.v23-prompt.prompt-3{top:78%}

.v24-cloud-transition{position:absolute;z-index:90;inset:0;overflow:hidden;pointer-events:auto;background:transparent}
.v24-transition-cloud{position:absolute;height:auto;opacity:0;filter:drop-shadow(0 8px 9px rgba(76,133,161,.08));will-change:transform,opacity}
.v22-transition-exit .v24-transition-cloud{animation:v24-cloud-arrive .78s cubic-bezier(.18,.74,.28,1) both}
.v22-transition-cover .v24-transition-cloud{opacity:1;transform:translate3d(0,0,0) scale(1)}
.v22-transition-reveal .v24-transition-cloud{animation:v24-cloud-reveal .72s ease-out both!important;animation-delay:0s!important}
.v24-transition-cloud.cloud-0{width:78%;left:-52%;top:-11%;--dx:-35px;animation-delay:0s}.v24-transition-cloud.cloud-1{width:72%;left:33%;top:-13%;--dx:42px;animation-delay:.2s}.v24-transition-cloud.cloud-2{width:88%;left:-17%;top:2%;--dx:-30px;animation-delay:.4s}.v24-transition-cloud.cloud-3{width:75%;left:55%;top:7%;--dx:38px;animation-delay:.6s}.v24-transition-cloud.cloud-4{width:82%;left:-44%;top:17%;--dx:-44px;animation-delay:.8s}.v24-transition-cloud.cloud-5{width:90%;left:19%;top:18%;--dx:38px;animation-delay:1s}.v24-transition-cloud.cloud-6{width:74%;left:-13%;top:32%;--dx:-34px;animation-delay:1.2s}.v24-transition-cloud.cloud-7{width:88%;left:48%;top:34%;--dx:46px;animation-delay:1.4s}.v24-transition-cloud.cloud-8{width:92%;left:-51%;top:46%;--dx:-40px;animation-delay:1.6s}.v24-transition-cloud.cloud-9{width:88%;left:12%;top:48%;--dx:36px;animation-delay:1.8s}.v24-transition-cloud.cloud-10{width:76%;left:58%;top:52%;--dx:48px;animation-delay:2s}.v24-transition-cloud.cloud-11{width:88%;left:-36%;top:63%;--dx:-42px;animation-delay:2.2s}.v24-transition-cloud.cloud-12{width:94%;left:21%;top:65%;--dx:36px;animation-delay:2.4s}.v24-transition-cloud.cloud-13{width:74%;left:-17%;top:78%;--dx:-34px;animation-delay:2.6s}.v24-transition-cloud.cloud-14{width:90%;left:54%;top:77%;--dx:46px;animation-delay:2.8s}.v24-transition-cloud.cloud-15{width:91%;left:-49%;top:90%;--dx:-40px;animation-delay:3s}.v24-transition-cloud.cloud-16{width:92%;left:10%;top:89%;--dx:35px;animation-delay:3.2s}.v24-transition-cloud.cloud-17{width:73%;left:61%;top:93%;--dx:48px;animation-delay:3.4s}

.v24-snow-piece{position:absolute;z-index:18;width:108%;height:auto;pointer-events:none;object-fit:contain;filter:drop-shadow(0 8px 6px rgba(89,119,139,.16));transition:transform .56s cubic-bezier(.2,.78,.24,1),opacity .4s;will-change:transform,opacity}
.v24-snow-piece.gone{opacity:0}.v24-snow-piece:nth-of-type(odd).gone{transform:translateX(-125%) rotate(-7deg)}.v24-snow-piece:nth-of-type(even).gone{transform:translateX(125%) rotate(7deg)}
.v24-snow-piece.piece-0{width:124%;left:-35%;top:23%;transform:rotate(-3deg)}.v24-snow-piece.piece-1{width:110%;left:9%;top:30%;transform:rotate(2deg)}.v24-snow-piece.piece-2{width:126%;left:-24%;top:38%;transform:rotate(1deg)}.v24-snow-piece.piece-3{width:112%;left:4%;top:46%;transform:rotate(-3deg)}.v24-snow-piece.piece-4{width:128%;left:-31%;top:54%;transform:rotate(2deg)}.v24-snow-piece.piece-5{width:112%;left:7%;top:62%;transform:rotate(-1deg)}.v24-snow-piece.piece-6{width:125%;left:-28%;top:70%;transform:rotate(3deg)}.v24-snow-piece.piece-7{width:114%;left:2%;top:78%;transform:rotate(-2deg)}.v24-snow-piece.piece-8{width:126%;left:-31%;top:86%;transform:rotate(2deg)}.v24-snow-piece.piece-9{width:115%;left:5%;top:94%;transform:rotate(-2deg)}
.v22-discovery.title{left:18%;top:50%}.v22-discovery.scholar{right:13%;top:67%}.v22-elevator-door{left:6%;bottom:3%}

@keyframes v24-soft-cover{from{opacity:0;transform:translateY(3%)}to{opacity:1;transform:translateY(0)}}
@keyframes v24-soft-reveal{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-3%)}}
@keyframes v24-cloud-arrive{from{opacity:0;transform:translate3d(var(--dx),18px,0) scale(.72)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes v24-cloud-reveal{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.08)}}

/* v25 — exact scene comp and supplied cutout pass */
.v22-scene-11 .v22-bg{background-image:url('/assets-1.0-v31/level3/level3_scene10_bg.webp')}
.v22-room{background-image:url('/assets-1.0-v31/level3/level3_scene11_bg.webp')}
.v22-journey::after{background:linear-gradient(180deg,rgba(21,38,37,.07),transparent 20%,transparent 72%,rgba(20,37,35,.11))}
.v22-transition-exit .v22-bg{transform:scale(1.012)}
.v22-transition-layer{inset:0!important;border-radius:0!important;clip-path:none!important;background:#edf5f2!important}
.v22-transition-layer::before,.v22-transition-layer::after,.v22-transition-layer i,.v22-transition-layer span{display:none!important}

.v22-constellations{inset:0}
.v22-constellations button{height:24%;border:0;overflow:hidden;border-radius:0;background:transparent;filter:none;animation:v22-float 2.2s ease-in-out infinite alternate}
.v22-constellations button img{width:100%;height:100%;display:block;object-fit:contain;mix-blend-mode:screen;opacity:.92;filter:saturate(.7) brightness(1.16) contrast(1.08);pointer-events:none}
.v22-constellations button.virgo{width:32%;left:3%;top:9%}
.v22-constellations button.leo{width:34%;left:33%;top:2%}
.v22-constellations button.libra{width:30%;right:3%;top:13%}
.v22-constellations button.leo:focus-visible,.v22-constellations button.leo:hover{filter:drop-shadow(0 0 14px #bceaff)}
.v22-constellations button:active{transform:scale(.94)}
.v22-dog-back{width:58%;height:31%;left:21%;bottom:-1%;z-index:6}
.v23-prompt.prompt-1{top:57%}

.v22-gate{width:47%;height:31%;left:26.5%;top:40%}
.v22-walking-dog{width:60%;height:30%;left:20%;top:69%;z-index:12}
.v22-gate-stage.open .v22-walking-dog{transform:translateY(-104%) scale(.44);opacity:0}
.v23-prompt.prompt-2{top:57%}
.v22-beijing-gate .v22-gate{width:23%;height:24%;left:38.5%;top:49%}
.v22-beijing-gate .v22-walking-dog{width:49%;height:25%;left:25.5%;top:58%}
.v22-beijing-gate.open .v22-walking-dog{transform:translateY(-90%) scale(.43);opacity:0}

.v22-airport{inset:0}
.v22-routes{inset:0;width:100%;height:100%;z-index:6}
.v22-routes path{stroke-width:1.05;stroke-dasharray:2.2 2.2}
.v22-routes path.chosen{stroke:#3e98c1;stroke-width:1.55}
.v22-route-dot{width:70px;height:52px;font-size:11px}
.v22-plane{width:108%;height:auto;left:-2%;top:31%;z-index:8;object-fit:contain;transition:transform 1.5s cubic-bezier(.18,.72,.22,1),opacity .4s 1.15s}
.v22-plane.fly{transform:translate(68%,-162%) scale(.24) rotate(-8deg);opacity:0}
.v25-airport-dog{width:60%;height:31%;position:absolute;z-index:9;left:20%;bottom:-4%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 7px 4px rgba(16,38,58,.2));animation:v22-dog-breathe 1.5s ease-in-out infinite alternate}
.v23-prompt.prompt-3{top:68%}

.v22-cornell::before{content:"";position:absolute;z-index:17;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .18s}
.v22-cornell.snow-state-0::before{opacity:.22}
.v24-snow-piece{z-index:18;width:166%;max-width:none;filter:drop-shadow(0 2px 0 rgba(151,177,194,.72)) drop-shadow(0 9px 7px rgba(89,119,139,.2));transition:transform .5s cubic-bezier(.2,.78,.24,1),opacity .34s}
.v24-snow-piece.piece-0{width:176%;left:-43%;top:-17%;transform:rotate(-3deg)}
.v24-snow-piece.piece-1{width:164%;left:-5%;top:-3%;transform:rotate(2deg)}
.v24-snow-piece.piece-2{width:176%;left:-39%;top:11%;transform:rotate(1deg)}
.v24-snow-piece.piece-3{width:164%;left:-2%;top:25%;transform:rotate(-3deg)}
.v24-snow-piece.piece-4{width:178%;left:-43%;top:39%;transform:rotate(2deg)}
.v24-snow-piece.piece-5{width:164%;left:-2%;top:53%;transform:rotate(-1deg)}
.v24-snow-piece.piece-6{width:176%;left:-41%;top:67%;transform:rotate(3deg)}
.v24-snow-piece.piece-7{width:165%;left:-3%;top:81%;transform:rotate(-2deg)}
.v24-snow-piece.piece-8{width:178%;left:-43%;top:95%;transform:rotate(2deg)}
.v24-snow-piece.piece-9{width:166%;left:-3%;top:109%;transform:rotate(-2deg)}
.v24-snow-piece:nth-of-type(odd).gone{transform:translateX(-130%) rotate(-8deg)}
.v24-snow-piece:nth-of-type(even).gone{transform:translateX(130%) rotate(8deg)}
.v22-dog-hands{z-index:22;left:13%;right:13%;bottom:2%}
.v22-discovery{z-index:17}
.v22-discovery.title{left:18%;top:48%;font-size:16px}
.v22-discovery.scholar{right:8%;top:66%;width:76px;height:76px;padding:0;border:0;clip-path:none;background:transparent;box-shadow:none}
.v22-discovery.scholar img{width:100%;height:100%;display:block;object-fit:contain}
.v22-elevator-door{left:6%;bottom:3%;z-index:25}

.v22-office{inset:0}
.v22-office>img{width:106%;height:auto;left:-3%;top:18%;object-fit:contain}
.v22-screen{top:37%;height:14.4%;display:grid;place-items:center;padding:0;border-radius:1px;color:rgba(206,224,227,.58);background:rgba(9,29,36,.035);font-size:9px;line-height:1;transform:none}
.v22-screen span{opacity:.55}
.v22-screen.s0{width:30.2%;left:2.7%;clip-path:polygon(3% 0,100% 3%,100% 94%,4% 100%)}.v22-screen.s1{width:33.8%;left:33.1%;clip-path:polygon(1% 2%,99% 2%,99% 98%,1% 98%)}.v22-screen.s2{width:30.2%;right:2.7%;clip-path:polygon(0 3%,97% 0,96% 100%,0 94%)}
.v22-screen.on{color:#effffb;background:rgba(91,221,202,.2);box-shadow:inset 0 0 26px rgba(80,231,208,.34),0 0 14px rgba(80,231,208,.18);text-shadow:0 0 10px #55e0ca;font-size:15px}

.v22-bumping-dog{width:44%;height:49%;right:3%;bottom:4%}
.v22-moli{width:36%;height:35%;left:34%;bottom:5%}
.v22-rabbit{width:32%;height:46%;left:1%;bottom:3%}

.v25-wrong-tip.memory-error{width:min(62vw,280px);height:auto;position:absolute;z-index:96;left:50%;top:46%;transform:translate(-50%,-50%);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;object-fit:contain;animation:v25-wrong-pop .76s ease both}

.v24-cloud-transition{z-index:94;background:transparent}
.v24-transition-cloud{filter:drop-shadow(0 6px 8px rgba(76,133,161,.06))}
.v22-transition-exit .v24-transition-cloud{animation-duration:.68s}
.v22-transition-cover .v24-transition-cloud{animation:none!important;opacity:1!important;transform:translate3d(0,0,0) scale(1)!important}
.v22-transition-reveal .v24-transition-cloud{animation:v24-cloud-reveal .72s ease-out both!important;animation-delay:0s!important}

@keyframes v25-wrong-pop{0%{opacity:0;transform:translate(-50%,-46%) scale(.88)}16%,76%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-54%) scale(.98)}}

/* v26 — scenes 07–11 follow the supplied render sheets and cutout pack. */
.v22-scene-7 .v22-bg{background-image:url('/assets-1.0-v31/level3/level3_scene07_bg.webp')}
.v22-scene-8 .v22-bg,.v22-scene-9 .v22-bg{background-image:url('/assets-1.0-v31/level3/level3_scene08_bg.webp')}
.v22-scene-10 .v22-bg{background-image:url('/assets-1.0-v31/level3/level3_scene09_bg.webp')}
.v22-scene-11 .v22-bg{background-image:url('/assets-1.0-v31/level3/level3_scene10_bg.webp')}
.v22-room{background-image:url('/assets-1.0-v31/level3/level3_scene11_bg.webp')}

.v23-prompt.prompt-7{top:18%;bottom:auto}.v23-prompt.prompt-8{top:13%;bottom:auto}.v23-prompt.prompt-9{top:13%;bottom:auto}.v23-prompt.prompt-10{top:13%;bottom:auto}.v23-prompt.prompt-11{top:13%;bottom:auto}

.v23-prompt.prompt-4{top:75%;bottom:auto}
.v22-beijing-gate .v22-gate{width:25%;height:24%;left:37.5%;top:50%}
.v22-beijing-gate .v22-walking-dog{width:22%;height:22%;left:39%;top:54%;z-index:12}
.v22-beijing-gate.open .v22-walking-dog{transform:translateY(-86%) scale(.46);opacity:0}

.v22-plane{transition:transform 2.8s cubic-bezier(.18,.66,.2,1),opacity .55s 2.15s}
.v22-plane.fly{transform:translate(68%,-162%) scale(.24) rotate(-8deg);opacity:0}
.v26-flight-sky{position:absolute;z-index:18;inset:0;overflow:hidden;background:linear-gradient(180deg,#7dc7eb 0%,#bfe5f4 68%,#e7f4f6 100%);animation:v26-flight-sky-in .75s ease-out both}
.v26-flight-sky .sky-cloud{position:absolute;width:46%;height:auto;opacity:.64;filter:drop-shadow(0 5px 5px rgba(72,131,158,.07))}
.v26-flight-sky .sky-cloud.c1{left:-8%;top:8%}.v26-flight-sky .sky-cloud.c2{right:-10%;top:34%;transform:scale(.78)}
.v26-flight-plane{width:68%;height:auto;position:absolute;z-index:2;left:-34%;bottom:8%;object-fit:contain;filter:drop-shadow(0 9px 7px rgba(55,105,132,.2));animation:v26-flight-across 5.4s cubic-bezier(.18,.64,.26,1) both}

.v22-partners{inset:0;overflow:hidden}
.v22-partners .v22-bumping-dog{width:50%;height:30%;right:-1%;top:29%;bottom:auto;object-fit:contain;animation:v26-dog-hit .5s ease-in-out infinite}
.v22-partners.rescued .v22-bumping-dog{animation:v26-dog-relief .65s both}
.v22-partners .v22-moli{width:34%;height:27%;left:auto;right:3%;bottom:2%;object-fit:contain}
.v22-partners .v22-rabbit{width:31%;height:36%;left:4%;top:39%;bottom:auto;padding:0;border:0;background:transparent;transform:none!important;transition:transform .25s}
.v22-partners .v22-rabbit img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 7px 4px rgba(52,76,53,.18))}
.v22-partners .v22-rabbit:active{transform:scale(.94)!important}
.v22-partners.rescued .v22-rabbit{height:42%;top:34%;animation:v26-rabbit-cheer .7s both}

.v22-fitness{inset:0;display:block}
.v26-qte-time{position:absolute;z-index:7;left:50%;top:20%;transform:translateX(-50%);color:#fff;font:900 34px var(--font-geist-mono),monospace;text-shadow:0 3px 10px rgba(55,50,43,.34)}
.v26-yoga-mat{width:72%;height:auto;position:absolute;z-index:4;left:14%;top:45%;object-fit:contain;filter:drop-shadow(0 8px 7px rgba(76,53,36,.15))}
.v26-workout-ring{width:68%;height:auto;position:absolute;z-index:6;left:16%;top:28%;object-fit:contain;filter:drop-shadow(0 9px 8px rgba(64,48,57,.2));transition:transform .12s}
.v26-workout-ring.r1,.v26-workout-ring.r3,.v26-workout-ring.r5,.v26-workout-ring.r7{transform:scale(.93) rotate(-7deg)}
.v26-workout-ring.r2,.v26-workout-ring.r4,.v26-workout-ring.r6,.v26-workout-ring.r8{transform:scale(1.04) rotate(6deg)}
.v26-qte-controls{position:absolute;z-index:9;left:19%;right:19%;bottom:11%;display:flex;justify-content:space-between}
.v26-qte-controls button{width:72px;height:66px;border:0;border-radius:4px;color:#fff;background:rgba(255,255,255,.2);box-shadow:0 6px 12px rgba(73,52,37,.12);font-size:42px;font-weight:500;backdrop-filter:blur(3px)}
.v26-qte-controls button.expected{background:rgba(255,255,255,.48);box-shadow:0 0 0 4px rgba(255,255,255,.19),0 7px 15px rgba(73,52,37,.16);animation:v26-qte-pulse .5s ease-in-out infinite alternate}
.v26-qte-controls button:active{transform:translateY(4px)}
.v22-fitness>small{position:absolute;z-index:9;left:50%;bottom:5%;transform:translateX(-50%);padding:5px 12px;border-radius:99px;color:#fff;background:rgba(82,65,50,.45);font-weight:850}

.v22-kyoko-stage{inset:0;overflow:hidden}
.v22-kyoko-stage .v22-bag{width:62%;height:44%;left:19%;bottom:16%;padding:0;border:0;background:transparent}
.v22-kyoko-stage .v22-bag img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 9px rgba(68,49,35,.16))}
.v22-kyoko-stage .v22-kyoko-run{width:72%;height:48%;left:14%;bottom:12%;object-fit:contain}

.v22-homes{inset:0;overflow:hidden}
.v22-house-button{width:78%;height:54%;position:absolute;z-index:5;left:11%;top:20%;padding:0;border:0;background:transparent;filter:drop-shadow(0 10px 9px rgba(71,92,53,.13));transition:transform .22s}
.v22-house-button:enabled{animation:v26-house-ready .8s ease-in-out infinite alternate}
.v22-house-button .v22-house{width:100%;height:100%;position:static;display:block;object-fit:contain;animation:v22-house-pop .55s both}
.v22-house-button.stage-0{width:72%;left:14%}.v22-house-button.stage-1{width:69%;left:15.5%}.v22-house-button.stage-2{width:65%;left:17.5%}.v22-house-button.stage-3{width:61%;left:19.5%}
.v22-homes .v22-case{width:31%;height:29%;left:auto;right:3%;bottom:10%;padding:0;border:0;background:transparent;touch-action:none}
.v22-homes .v22-case img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 6px rgba(57,65,62,.18))}
.v22-homes>small{left:50%;bottom:4%;transform:translateX(-50%);font-size:10px}

.v22-nordic{inset:0;overflow:hidden}
.v22-reflection{inset:0;padding:0;color:#eafffb;text-shadow:0 2px 9px #2b6f76}
.v22-reflection img{position:absolute;height:32%;object-fit:contain;object-position:center bottom;opacity:.37;filter:blur(.45px);transform:scaleY(-1)}
.v22-reflection .reflection-a{width:32%;left:34%;bottom:25%;opacity:.58}
.v22-reflection .reflection-b{width:24%;left:5%;bottom:28%;opacity:.28;transform:scaleX(-1) scaleY(-1)}
.v22-reflection .reflection-c{width:24%;right:5%;bottom:28%;opacity:.28}
.v22-reflection b{position:absolute;left:0;right:0;bottom:16%;font-size:22px;text-align:center}
.v22-reflection span{position:absolute;left:0;right:0;bottom:13%;font-size:10px;text-align:center}
.v22-nordic.cleared .v22-reflection img{animation:v26-reflection-rise .7s both}

.v22-room>.v26-room-moli,.v22-room>.v26-room-rabbit,.v22-room>.v26-room-kyoko{display:block!important;position:absolute;z-index:5;object-fit:contain;filter:drop-shadow(0 8px 5px rgba(53,47,41,.14));animation:v26-room-arrive .7s ease-out both}
.v26-room-moli{width:31%;height:28%;left:10%;bottom:35%}
.v26-room-rabbit{width:24%;height:36%;left:43%;bottom:31%;animation-delay:.12s!important}
.v26-room-kyoko{width:27%;height:29%;right:4%;bottom:23%;animation-delay:.24s!important}

@keyframes v26-dog-hit{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(12px) rotate(3deg)}}
@keyframes v26-dog-relief{50%{transform:translateX(-13px) rotate(-6deg)}to{transform:translateX(-23px) rotate(0)}}
@keyframes v26-rabbit-cheer{0%{transform:scale(.82)}65%{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes v26-qte-pulse{to{transform:scale(1.08)}}
@keyframes v26-house-ready{to{transform:translateY(-5px)}}
@keyframes v26-reflection-rise{from{opacity:0;transform:translateY(18px) scaleY(-1)}to{transform:translateY(0) scaleY(-1)}}
@keyframes v26-room-arrive{from{opacity:0;transform:translateY(24px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes v26-flight-sky-in{from{opacity:0}to{opacity:1}}
@keyframes v26-flight-across{from{transform:translate(-8%,30%) scale(.92) rotate(-2deg)}to{transform:translate(205%,-145%) scale(.5) rotate(-8deg)}}

.weather-layer { position: absolute; z-index: 4; inset: 0; pointer-events: none; opacity: 0; overflow: hidden; transition: opacity .45s; }
.weather-layer.rain, .weather-layer.snow, .weather-layer.fog { opacity: 1; }
.weather-layer i { position: absolute; inset: -25%; }
.weather-layer.rain {
  background:
    radial-gradient(circle at 18% 84%, rgba(190,224,255,.12), transparent 24%),
    linear-gradient(to bottom, rgba(5,19,34,.46), rgba(25,48,65,.3));
}
.weather-layer.rain i {
  background: repeating-linear-gradient(90deg, transparent 0 20px, rgba(211,235,255,.72) 21px 22px, transparent 23px 42px);
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 58px, transparent 58px 84px);
  mask-image: repeating-linear-gradient(180deg, #000 0 58px, transparent 58px 84px);
  animation: rain-fall .46s linear infinite;
}
.weather-layer.rain i:nth-child(2) {
  opacity: .48;
  background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(178,218,249,.62) 35px 36px, transparent 37px 61px);
  -webkit-mask-image: repeating-linear-gradient(180deg, transparent 0 32px, #000 32px 116px, transparent 116px 148px);
  mask-image: repeating-linear-gradient(180deg, transparent 0 32px, #000 32px 116px, transparent 116px 148px);
  animation-duration: .68s;
}
.weather-layer.rain i:nth-child(3) { opacity: .3; animation-duration: .86s; }
.weather-layer.snow {
  background:
    radial-gradient(ellipse at 12% 18%, rgba(232,238,255,.16), transparent 28%),
    linear-gradient(to bottom, rgba(132,151,190,.54), rgba(220,224,242,.39));
}
.weather-layer.snow i {
  background-image:
    radial-gradient(ellipse, rgba(255,255,255,.96) 0 35%, rgba(245,243,255,.45) 56%, transparent 74%),
    radial-gradient(ellipse, rgba(255,255,255,.88) 0 34%, transparent 72%),
    radial-gradient(ellipse, rgba(255,255,255,.94) 0 34%, rgba(245,243,255,.38) 58%, transparent 76%),
    radial-gradient(ellipse, rgba(255,255,255,.84) 0 36%, transparent 74%),
    radial-gradient(ellipse, rgba(255,255,255,.92) 0 34%, transparent 72%),
    radial-gradient(ellipse, rgba(255,255,255,.86) 0 35%, transparent 74%);
  background-size: 66px 24px, 42px 16px, 78px 28px, 48px 18px, 58px 21px, 36px 14px;
  background-position: 7% 6%, 68% 2%, 33% 25%, 88% 34%, 15% 57%, 72% 76%;
  background-repeat: no-repeat;
  opacity: .78;
  filter: blur(1.3px);
  animation: snow-fall 1.75s linear infinite;
}
.weather-layer.snow i:nth-child(2) {
  background-image:
    radial-gradient(circle, rgba(255,255,255,.94) 0 1.6px, transparent 2.3px),
    radial-gradient(circle, rgba(244,247,255,.78) 0 1.1px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,.72) 0 1.4px, transparent 2px);
  background-size: 43px 51px, 57px 63px, 31px 39px;
  background-position: 3px 9px, 21px 31px, 12px 4px;
  background-repeat: repeat;
  opacity: .82;
  filter: none;
  animation-duration: 3.2s;
}
.weather-layer.snow i:nth-child(3) {
  background-image:
    radial-gradient(ellipse, rgba(255,255,255,.9) 0 34%, transparent 72%),
    radial-gradient(ellipse, rgba(255,255,255,.78) 0 34%, transparent 72%),
    radial-gradient(ellipse, rgba(255,255,255,.82) 0 34%, transparent 72%),
    radial-gradient(ellipse, rgba(255,255,255,.74) 0 34%, transparent 72%),
    radial-gradient(ellipse, rgba(255,255,255,.86) 0 34%, transparent 72%);
  background-size: 34px 14px, 26px 11px, 42px 17px, 30px 12px, 37px 15px;
  background-position: 21% 8%, 82% 19%, 48% 43%, 9% 72%, 74% 87%;
  background-repeat: no-repeat;
  opacity: .58;
  filter: blur(.5px);
  animation-duration: 2.55s;
}
.weather-layer.fog { background: rgba(220,229,226,.48); backdrop-filter: blur(5px); }
.weather-layer.fog i { background: radial-gradient(ellipse at center, rgba(255,255,255,.44), transparent 62%); animation: fog-drift 2.4s ease-in-out infinite alternate; }

@keyframes fade-in { from { opacity: 0; } }
@keyframes scene-shield-cover { from { opacity: 0; } to { opacity: 1; } }
@keyframes scene-shield-reveal { from { opacity: 1; } to { opacity: 0; } }
@keyframes count-pop { 0% { opacity: 0; transform: scale(1.5); } 28% { opacity: 1; transform: scale(1); } 100% { opacity: .82; } }
@keyframes alert-pulse { to { transform: translateX(-50%) scale(1.04); } }
@keyframes recovery-pulse { to { transform: translateX(-50%) scale(.97); opacity: .74; } }
@keyframes score-up { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.7); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -30px) scale(1.15); } }
@keyframes reward-appear { from { opacity: 0; transform: translateX(-50%) scale(.35) rotate(-90deg); } }
@keyframes reward-stolen { 0%, 50% { opacity: 1; transform: translateX(-50%) scale(1) rotate(0deg); } 68% { opacity: 1; transform: translateX(-8%) scale(.95) rotate(10deg); } 100% { opacity: 0; transform: translateX(180%) scale(.78) rotate(52deg); } }
@keyframes paw-snatch {
  0% { right: -332px; transform: translate3d(0,0,0) rotate(-4deg) scale(.98); }
  38% { right: -170px; transform: translate3d(0,0,0) rotate(-5deg) scale(1); }
  54% { right: -138px; transform: translate3d(0,0,0) rotate(-7deg) scale(1); }
  68% { right: -138px; transform: translate3d(0,0,0) rotate(-7deg) scale(1); }
  100% { right: -342px; transform: translate3d(0,0,0) rotate(-3deg) scale(.98); }
}
@keyframes rain-fall { to { transform: translateY(168px); } }
@keyframes snow-fall {
  from { transform: translate(-24px, -90px) rotate(-15deg); }
  to { transform: translate(48px, 150px) rotate(-15deg); }
}
@keyframes fog-drift { to { transform: translateX(12%); } }
@keyframes home-float-soft {
  0%, 100% { transform: translateY(0) rotate(5deg) scale(1); }
  50% { transform: translateY(-5px) rotate(7deg) scale(1.02); }
}
@keyframes home-clip-wiggle {
  0%, 100% { transform: rotate(10deg) translateY(0) translateX(0); }
  30% { transform: rotate(16deg) translateY(-2px) translateX(1px); }
  60% { transform: rotate(5deg) translateY(2px) translateX(-1px); }
}
@keyframes home-pen-sway {
  0%, 100% { transform: rotate(1deg) translate(0, 0); }
  35% { transform: rotate(4deg) translate(4px, -2px); }
  68% { transform: rotate(-2deg) translate(-2px, 2px); }
}
@keyframes home-envelope-bob {
  0%, 100% { transform: rotate(3deg) translateY(0); }
  50% { transform: rotate(5deg) translateY(-4px); }
}
@keyframes home-envelope-letter {
  0%, 100% { transform: rotate(5deg) translateY(0); }
  40% { transform: rotate(5deg) translateY(-5px); }
  65% { transform: rotate(5deg) translateY(-10px); }
}
@keyframes home-petal-fall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(.9); opacity: 0; }
  9% { opacity: .82; }
  76% { opacity: .74; }
  100% { transform: translate3d(-470px, 820px, 0) rotate(-420deg) scale(1.08); opacity: 0; }
}
@keyframes cat-breathe {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-5px) scaleY(1.018); }
}
@keyframes bubble-pop {
  from { opacity: 0; transform: translateY(8px) scale(.76); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cat-eat {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  30% { transform: translateY(13px) rotate(-3deg) scale(1.035); }
  58% { transform: translateY(4px) rotate(3deg) scale(1.055); }
}
@keyframes cat-reject {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-8px) rotate(-4deg); }
  55% { transform: translateX(8px) rotate(4deg); }
  80% { transform: translateX(-4px) rotate(-2deg); }
}
@keyframes cat-sniff {
  0%, 100% { transform: translateY(0) scale(1); }
  30%, 60% { transform: translateY(12px) scale(1.025); }
}
@keyframes cat-lick {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  40% { transform: translateY(14px) rotate(-4deg) scale(1.04); }
  70% { transform: translateY(8px) rotate(4deg) scale(1.02); }
}
@keyframes anger-pop {
  from { opacity: 0; transform: scale(.25) rotate(-18deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes food-rise {
  from { opacity: 0; transform: translate(-50%, 90px) scale(.7); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes cat-score-fly {
  0% { opacity: 0; transform: translate(-50%, 20px) scale(.7); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -55px) scale(1.2); }
}
@keyframes cat-celebrate {
  from { transform: translateY(1px) rotate(-2deg); }
  to { transform: translateY(-8px) rotate(2deg); }
}
@keyframes memory-card-rise {
  from { opacity: 0; transform: translateY(45px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes memory-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  55% { transform: translateX(8px); }
  78% { transform: translateX(-4px); }
}
@keyframes memory-error-pop {
  from { opacity: 0; transform: translate(-50%,18px) scale(.65); }
  to { opacity: 1; transform: translate(-50%,0) scale(1); }
}
@keyframes memory-wipe {
  0% { transform: translateY(105%) rotate(-8deg); }
  50%, 66% { transform: translateY(-18%) rotate(-8deg); }
  100% { transform: translateY(-120%) rotate(-8deg); }
}
@keyframes transition-fade {
  0%, 100% { opacity: 0; }
  20%, 80% { opacity: 1; }
}
@keyframes transition-copy {
  0%, 22%, 82%, 100% { opacity: 0; transform: translateY(12px); }
  38%, 70% { opacity: 1; transform: translateY(0); }
}
@keyframes envelope-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.035); }
}
@keyframes seal-release {
  to { opacity: 0; transform: translate(-50%,-50%) scale(1.7) rotate(25deg); }
}
@keyframes ice-float {
  to { transform: translateY(-8px) rotate(4deg); }
}
@keyframes scene-focus-in {
  from { opacity:0; transform:scale(1.035); }
  to { opacity:1; transform:scale(1); }
}
@keyframes veil-circle-cover { from{opacity:1;clip-path:circle(0 at 50% 46%)} to{opacity:1;clip-path:circle(82% at 50% 46%)} }
@keyframes veil-circle-reveal { from{opacity:1;clip-path:circle(82% at 50% 46%)} to{opacity:1;clip-path:circle(0 at 50% 46%)} }
@keyframes veil-gate-cover { from{opacity:1;clip-path:inset(0 50%)} to{opacity:1;clip-path:inset(0)} }
@keyframes veil-gate-reveal { from{opacity:1;clip-path:inset(0)} to{opacity:1;clip-path:inset(0 50%)} }
@keyframes veil-cloud-cover { from{opacity:1;transform:translateY(105%) scale(1.05)} to{opacity:1;transform:translateY(0) scale(1.08)} }
@keyframes veil-cloud-reveal { from{opacity:1;transform:translateY(0) scale(1.08)} to{opacity:1;transform:translateY(-108%) scale(1.12)} }
@keyframes veil-scan-cover { from{opacity:1;clip-path:inset(49% 0)} to{opacity:1;clip-path:inset(0)} }
@keyframes veil-scan-reveal { from{opacity:1;clip-path:inset(0)} to{opacity:1;clip-path:inset(49% 0)} }
@keyframes veil-box-cover { from{opacity:1;transform:translate(-112%,8%) rotate(-8deg)} to{opacity:1;transform:translate(0) rotate(0)} }
@keyframes veil-box-reveal { from{opacity:1;transform:translate(0) rotate(0)} to{opacity:1;transform:translate(112%,-8%) rotate(8deg)} }
@keyframes memory-pulse { to { transform: scale(1.22); opacity: .68; } }
@keyframes travel-note {
  from { opacity: 0; transform: translate(-50%, 12px) scale(.9); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes dog-idle {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
}
@keyframes dog-tail { to { transform: rotate(27deg); } }
@keyframes dog-arrive {
  from { left: -24%; transform: translateY(0); }
  to { left: 14%; transform: translateY(-2px); }
}
@keyframes dog-leave {
  0% { left: 14%; bottom:26%; transform:scale(1) translateY(0); opacity:1; }
  48% { left:36%; bottom:34%; transform:scale(.82) translateY(-6px); opacity:1; }
  100% { left:47%; bottom:47%; transform:scale(.42) translateY(0); opacity:.08; }
}
@keyframes dog-enter-gate {
  0% { left: 14%; bottom: 29%; transform: scale(1); }
  70% { left: 43%; bottom: 45%; transform: scale(.72); }
  100% { left: 43%; bottom: 51%; transform: scale(.48); opacity: .15; }
}
@keyframes dog-board-plane {
  0% { left: 10%; bottom: 26%; transform: scale(1); }
  72% { left: 25%; bottom: 43%; transform: scale(.72); }
  100% { left: 27%; bottom: 50%; transform: scale(.48); opacity: .06; }
}
@keyframes dog-walk-bob { to { transform: translateY(-5px) rotate(1.6deg); } }
@keyframes dog-rescued {
  from { left:57%; bottom:31%; transform:rotate(7deg); }
  to { left:23%; bottom:36%; transform:rotate(-4deg); }
}
@keyframes partner-breathe { from{transform:translateY(0) rotate(-1deg)} to{transform:translateY(-5px) rotate(1deg)} }
@keyframes rabbit-rescue { 0%{transform:translate(0,0) rotate(0) scale(1)} 55%{transform:translate(51px,-13px) rotate(-10deg) scale(1.09)} 100%{transform:translate(43px,-6px) rotate(-7deg) scale(1.05)} }
@keyframes dog-exercise-v2 { from { transform:rotate(-5deg) translateY(0); } to { transform:rotate(5deg) translateY(-7px); } }
@keyframes dog-step { from { transform: rotate(-25deg); } to { transform: rotate(25deg); } }
@keyframes dog-bump {
  0%,55%,100% { transform: translateX(0) rotate(0); }
  72% { transform: translateX(21px) rotate(7deg); }
  82% { transform: translateX(15px) rotate(-3deg); }
}
@keyframes dog-work-left { to { transform: rotate(58deg); } }
@keyframes dog-work-right { to { transform: rotate(-58deg); } }
@keyframes dog-push { from { transform: translateX(0) rotate(-2deg); } to { transform: translateX(8px) rotate(4deg); } }
@keyframes birth-glow { to { box-shadow: 0 0 68px rgba(143,247,224,.82); transform: translateX(-50%) scale(1.035); } }
@keyframes qte-glow { to { box-shadow: 0 0 0 9px rgba(169,241,215,.12),0 0 28px rgba(169,241,215,.7),0 7px 0 #559e8c; } }
@keyframes egg-modal-in { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } }
@keyframes computer-prompt { to { box-shadow:0 20px 36px rgba(19,37,45,.36),inset 0 -21px 0 #1c3038,0 0 30px rgba(114,231,211,.26); } }
@keyframes computer-spin { to { transform:rotate(360deg); } }

/* Third level v21 — hand-painted storybook art direction */
.memory-journey {
  color:#344c38;
  background-color:#9dbb91;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}
.memory-journey::before {
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  opacity:.2;
  background-image:radial-gradient(ellipse at 20% 30%,rgba(55,75,41,.23) 0 1px,transparent 2px),radial-gradient(ellipse at 70% 65%,rgba(255,252,218,.28) 0 1.5px,transparent 2.5px);
  background-size:19px 23px,27px 31px;
  mix-blend-mode:multiply;
}
.memory-journey::after { background:linear-gradient(to bottom,rgba(38,55,43,.13),transparent 20%,transparent 65%,rgba(47,55,38,.18)); }
.memory-background { display:none; }
.memory-art { animation:storybook-scene-in .78s cubic-bezier(.2,.9,.25,1.08) both; transform-origin:50% 88%; }
.scene-departing .memory-story-card { animation:storybook-card-out .42s ease-in .24s both; }

.memory-topline {
  border:3px solid rgba(63,82,53,.62);
  color:#445441;
  background:rgba(242,241,213,.9);
  box-shadow:0 5px 0 rgba(58,73,48,.24),0 9px 22px rgba(57,68,43,.14);
  backdrop-filter:none;
}
.memory-topline > div { background:rgba(79,99,65,.18); }
.memory-topline i { background:linear-gradient(90deg,#7ea865,#d7ba69); }
.memory-topline b { color:#46583e; }
.memory-story-card {
  border:3px solid rgba(69,88,57,.72);
  border-radius:28px 25px 30px 24px;
  color:#354832;
  background:rgba(247,243,211,.94);
  box-shadow:0 7px 0 rgba(68,84,52,.28),0 17px 34px rgba(55,63,40,.2);
  backdrop-filter:none;
  animation:storybook-card-in .68s cubic-bezier(.18,.9,.3,1.12) .18s both;
}
.memory-story-card > p { color:#728758; }
.memory-story-card > span { color:rgba(53,72,50,.72); }
.memory-story-card > small { color:#4d5e3c; background:rgba(113,143,86,.14); }
.memory-story-card > small i { background:#88ad6d; box-shadow:0 0 0 5px rgba(109,145,81,.16); }
.memory-travel-note { border:3px solid rgba(72,91,57,.5); color:#3f5137; background:#f5f0ce; box-shadow:0 5px 0 rgba(63,80,50,.22); }
.memory-error { border:3px solid #f7edcf; background:#c66b59; box-shadow:0 5px 0 rgba(91,50,39,.24); }

.constellation-stage { border:0; background:transparent; box-shadow:none; }
.birthday-star { color:#fff8d5; filter:drop-shadow(0 2px 0 rgba(44,55,58,.28)); }
.constellation-card {
  border:3px solid rgba(229,236,209,.72);
  border-radius:31px 26px 34px 25px;
  color:#f6f2c9;
  background:rgba(30,55,74,.76);
  box-shadow:0 6px 0 rgba(34,50,50,.35),0 11px 18px rgba(35,50,49,.14);
}
.constellation-card polyline { stroke:rgba(245,239,197,.6); stroke-width:2; }
.constellation-card circle { fill:#fff0a8; filter:drop-shadow(0 0 4px #fff0a8); }
.constellation-card > span { color:#f4efd0; }

.school-building { width:92%; left:4%; top:11%; height:330px; background:transparent; box-shadow:none; }
.school-building::before { display:none; }
.school-sign { left:10%; right:10%; top:0; border:3px solid #526a43; border-radius:16px 13px 15px 12px; color:#f7efd0; background:#71835b; box-shadow:0 5px 0 rgba(64,76,49,.25); }
.school-gate { bottom:7px; border:6px solid #645c43; border-bottom:0; background:rgba(51,72,58,.68); box-shadow:0 0 0 7px rgba(247,235,187,.32),0 0 25px rgba(255,237,157,.72); }
.school-gate > i { border-color:#6c654a; background:repeating-linear-gradient(90deg,#4f6652 0 9px,#82956b 9px 14px); }
.school-gate span { color:#435037; background:#f5edc5; }

.airport-stage { top:13%; }
.memory-plane { border-color:#57665b; background:linear-gradient(#f5f0d8 0 60%,#8eb0a4 61% 78%,#e9e6cf 79%); box-shadow:0 8px 0 rgba(72,84,69,.22),0 18px 30px rgba(57,75,67,.2); }
.plane-door { border-color:#59695d; background:#efe9cf; box-shadow:0 0 0 7px rgba(246,236,174,.25),0 0 22px rgba(255,234,149,.7); }
.plane-door span { color:#3d513f; background:#f4ebbd; }

.scratch-stage { border:5px solid rgba(249,244,214,.92); border-radius:36px 30px 39px 28px; box-shadow:0 7px 0 rgba(67,83,60,.25),0 18px 32px rgba(57,69,52,.2); }
.scratch-stage > em { border:2px solid rgba(70,87,58,.35); color:#41543e; background:#f6f1cf; }
.ffxiv-egg { color:#edf1d0; background:radial-gradient(circle,#6f8c74,#415e58); }
.egg-card { border:4px solid #75856a; border-radius:31px 26px 35px 24px; color:#40523d; background:#f7f1d2; box-shadow:0 8px 0 rgba(54,70,48,.28),0 24px 55px rgba(46,56,39,.35); }
.egg-card > small,.egg-card p { color:#748064; }
.egg-card button { color:#405039; background:#b8d28b; box-shadow:0 6px 0 #7f9a60; }

.computer-wall { border-color:#4f5f50; border-radius:25px 20px 28px 19px; color:#bfd3aa; background:#596b5e; box-shadow:0 7px 0 rgba(48,61,50,.32),0 18px 31px rgba(48,59,50,.24),inset 0 -21px 0 #455749; }
.computer-screen { border-color:#3e4e43; border-radius:15px 12px 17px 11px; color:#788777; background:#29392f; }
.computers-on .computer-screen { color:#eef5cf; background:linear-gradient(155deg,#49655c,#5c8a74); }

.partner-doorway { background:transparent; box-shadow:none; }
.partner-wall { border:4px solid #5e6756; border-radius:16px 0 0 8px; background:repeating-linear-gradient(0deg,#8b9580 0 32px,#727d6b 32px 38px); box-shadow:-7px 5px 0 rgba(70,76,60,.2); }
.green-rabbit b,.moli-partner b { border:2px solid rgba(74,90,56,.35); color:#46543a; background:#f5f0cf; }

.fitness-ring { border-color:#d88a4d; background:rgba(249,232,187,.28); box-shadow:inset 0 0 0 5px #efc477,0 6px 0 rgba(102,68,43,.25),0 0 24px rgba(218,138,77,.3); }
.qte-meter { border:3px solid rgba(76,91,61,.54); background:rgba(246,240,207,.48); }
.qte-meter i { background:linear-gradient(90deg,#8fba78,#e6c778); }
.qte-controls button { border:3px solid #596a50; border-radius:24px 19px 25px 18px; color:#4a5d42; background:#f3edc9; box-shadow:0 6px 0 #83916b; }
.qte-controls button.expected { color:#40533c; background:#bad690; box-shadow:0 0 0 7px rgba(230,223,155,.25),0 6px 0 #79965d; }

.push-box { border-color:#705740; border-radius:14px 10px 15px 9px; background:#c99562; box-shadow:inset 0 -13px 0 rgba(102,68,43,.12),0 7px 0 rgba(91,65,43,.22),0 15px 23px rgba(70,48,34,.18); }
.home-door { border-color:#59634f; border-radius:18px 14px 0 0; color:#3f513d; background:#e4d6ac; box-shadow:0 7px 0 rgba(73,82,61,.22),0 14px 20px rgba(50,68,60,.16); }
.home-door i { border-color:#60725c; background:#8ca27b; }

.ice-reflection { color:#edf3cf; background:radial-gradient(circle at 50% 42%,rgba(243,247,214,.44),transparent 36%),linear-gradient(rgba(65,112,116,.54),rgba(111,158,149,.72)); }
.warm-room-world { background:#b98f64 url('/assets-1.0-v31/level3/level3_scene11_bg.webp') center/cover no-repeat; }
.warm-room-world::before { opacity:.15; background-image:radial-gradient(circle,rgba(77,56,39,.24) 0 1px,transparent 2px); background-size:22px 25px; }
.warm-window,.warm-lamp,.warm-rug { opacity:.2; }

.dog-arriving { animation:storybook-character-in .86s cubic-bezier(.18,.88,.28,1.18) both; }
.dog-leaving { animation:storybook-character-out .72s cubic-bezier(.55,.02,.75,.3) both; }
.memory-dog > img { filter:saturate(.88) contrast(.96); }

@keyframes storybook-scene-in {
  0% { opacity:0; transform:translateY(86px) scale(.96); }
  68% { opacity:1; transform:translateY(-8px) scale(1.012); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes storybook-card-in {
  0% { opacity:0; transform:translateY(105%); }
  72% { opacity:1; transform:translateY(-7px); }
  100% { opacity:1; transform:translateY(0); }
}
@keyframes storybook-card-out { to { opacity:0; transform:translateY(115%); } }
@keyframes storybook-character-in {
  0% { opacity:0; left:14%; transform:translateY(125%) scale(.9); }
  68% { opacity:1; left:14%; transform:translateY(-8%) scale(1.025); }
  100% { opacity:1; left:14%; transform:translateY(0) scale(1); }
}
@keyframes storybook-character-out {
  0% { opacity:1; transform:translateY(0) scale(1); }
  100% { opacity:0; transform:translateY(125%) scale(.9); }
}

@media (max-height: 680px) {
  .steering-controls { width: 224px; height: 88px; bottom: 10px; }
  .steering-controls button { height: 66px; border-radius: 21px; }
  .pickup-count { bottom: 17px; }
  .intro-card { transform: scale(.92); }
  .home-card { transform: scale(.9); }
  .scene-cat { top: 14%; height: 285px; }
  .food-stage { bottom: 126px; transform: translateX(-50%) scale(.94); }
  .cat-feedback { bottom: 236px; }
  .cat-score-float { bottom: 190px; }
  .cat-choice-dock button { height: 66px; border-radius: 16px; }
  .cat-choice-dock button b { font-size: 13px; }
  .cat-intro-card, .cat-finish-card { transform: scale(.9); }
  .memory-story-card { min-height: 126px; padding: 11px 12px; border-radius: 20px; }
  .memory-story-card h2 { font-size: 18px; }
  .memory-story-card > span { min-height: 25px; font-size: 9px; }
  .memory-dog { bottom: 30%; transform: scale(.9); }
  .scratch-stage { height: 235px; }
  .fitness-stage,.box-stage,.homes-stage { height: 300px; }
  .birthday-letter { height: 265px; }
}

@media (min-width: 650px) {
  .drive-stage { border-radius: 28px; border: 1px solid rgba(255,255,255,.1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* v27 — final scene alignment and interaction polish */
.v22-office > img {
  width:100%;
  height:auto;
  left:0;
  top:18%;
  object-fit:contain;
}
.v22-screen {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  transform:none;
  line-height:1;
}
.v22-screen > span {
  display:block;
  width:100%;
  margin:0;
  padding:0;
  text-align:center;
  line-height:1;
  transform:none;
  opacity:.58;
}
.v22-screen.on > span { opacity:1; }
.v22-screen.s0 {
  left:3.5%;
  right:auto;
  top:36.75%;
  width:29.3%;
  height:13.65%;
  clip-path:polygon(2% 0,100% 2%,100% 94%,3% 100%);
}
.v22-screen.s1 {
  left:34.9%;
  right:auto;
  top:37.35%;
  width:30.4%;
  height:12.15%;
  clip-path:polygon(1% 1%,99% 1%,99% 99%,1% 99%);
}
.v22-screen.s2 {
  left:67.1%;
  right:auto;
  top:36.75%;
  width:29.5%;
  height:13.65%;
  clip-path:polygon(0 2%,98% 0,97% 100%,0 94%);
}

.v22-cornell::before,
.v22-cornell.snow-state-0::before { opacity:0 !important; }
.v24-snow-piece {
  opacity:.97;
  filter:
    brightness(.91)
    saturate(.72)
    drop-shadow(0 -2px 0 rgba(128,157,177,.78))
    drop-shadow(0 3px 0 rgba(111,143,166,.82))
    drop-shadow(0 10px 8px rgba(61,91,113,.22));
}
.v24-snow-piece:nth-of-type(even) {
  filter:
    brightness(.87)
    saturate(.68)
    drop-shadow(0 -2px 0 rgba(121,151,173,.8))
    drop-shadow(0 3px 0 rgba(104,137,161,.84))
    drop-shadow(0 10px 8px rgba(55,87,110,.24));
}

/* v28: smaller, brighter snow banks with visible cool-blue contours. */
.v24-snow-piece {
  max-width:none;
  opacity:.985;
  filter:
    brightness(1.04)
    saturate(.92)
    drop-shadow(0 -1px 0 rgba(178,199,214,.5))
    drop-shadow(0 3px 0 rgba(151,179,198,.58))
    drop-shadow(0 8px 7px rgba(82,111,132,.14));
}
.v24-snow-piece:nth-of-type(even) {
  filter:
    brightness(1.01)
    saturate(.9)
    drop-shadow(0 -1px 0 rgba(172,195,211,.52))
    drop-shadow(0 3px 0 rgba(144,174,195,.6))
    drop-shadow(0 8px 7px rgba(76,106,128,.15));
}
.v24-snow-piece.piece-0{width:140%;left:-28%;top:-13%;transform:rotate(-3deg)}
.v24-snow-piece.piece-1{width:126%;left:0;top:0%;transform:rotate(2deg)}
.v24-snow-piece.piece-2{width:138%;left:-24%;top:13%;transform:rotate(1deg)}
.v24-snow-piece.piece-3{width:126%;left:1%;top:26%;transform:rotate(-3deg)}
.v24-snow-piece.piece-4{width:140%;left:-27%;top:39%;transform:rotate(2deg)}
.v24-snow-piece.piece-5{width:126%;left:1%;top:52%;transform:rotate(-1deg)}
.v24-snow-piece.piece-6{width:138%;left:-25%;top:65%;transform:rotate(3deg)}
.v24-snow-piece.piece-7{width:126%;left:0;top:78%;transform:rotate(-2deg)}
.v24-snow-piece.piece-8{width:140%;left:-28%;top:91%;transform:rotate(2deg)}
.v24-snow-piece.piece-9{width:127%;left:0;top:104%;transform:rotate(-2deg)}

.v23-prompt.prompt-4 {
  top:auto;
  bottom:4.8%;
  width:72%;
  max-width:300px;
}
.v22-beijing-gate .v22-gate {
  width:43%;
  height:23%;
  left:28.5%;
  top:49%;
}
.v22-beijing-gate .v22-walking-dog {
  width:32.5%;
  height:auto;
  left:33.75%;
  top:52%;
  z-index:12;
  object-position:center bottom;
}
.v22-beijing-gate.open .v22-walking-dog {
  transform:translateY(-88%) scale(.45);
  opacity:0;
}

.v26-qte-time.counting { animation:v27-count-pop .24s ease-out both; }
@keyframes v27-count-pop {
  0% { transform:translateX(-50%) scale(1.18); opacity:.45; }
  100% { transform:translateX(-50%) scale(1); opacity:1; }
}

.v26-qte-time {
  min-width:6ch;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.v22-fitness.cooldown .v26-workout-ring {
  animation:v28-ring-cooldown .32s steps(2,end) infinite;
}
@keyframes v28-ring-cooldown {
  0% { opacity:.28; filter:grayscale(.35) brightness(.85); }
  100% { opacity:1; filter:grayscale(0) brightness(1.08); }
}

/* v28: match the supplied wall-bump composition. */
.v22-partners .v22-rabbit{width:48%;height:52%;left:2%;top:34%}
.v22-partners .v22-moli{width:34%;height:25%;right:2%;bottom:1%}

/* v28: the final apartment is deliberately the largest home in the sequence. */
.v22-house-button.stage-3{width:92%;height:70%;left:4%;top:10%}

/* v28: final family composition and envelope placement follow scene 11 render. */
.v26-room-moli{width:34%;height:30%;left:7%;bottom:31%}
.v26-room-rabbit{width:30%;height:48%;left:53%;bottom:16%}
.v26-room-kyoko{width:25%;height:28%;right:2%;bottom:5%}
.level3-room-overlay .envelope-hotspot{left:28%;bottom:10%;width:108px;height:82px}

.level3-room-overlay .warm-room-world.v22-room {
  background:#b98f64 url('/assets-1.0-v31/level3/level3_scene11_bg.webp') center/cover no-repeat;
}

/* v29 — pixel-composition pass against the supplied true render references (2026-08-12). */

/* Scene 03 airport: target render uses three plain coral route targets, not map-shaped chips. */
.v22-route-dot{
  width:12.6%!important;
  height:auto!important;
  aspect-ratio:1/1;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  clip-path:none!important;
  background:#ff6f73!important;
  color:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  font-size:0!important;
}
.v22-route-dot:nth-of-type(1){left:10.4%!important;top:13.7%!important}
.v22-route-dot:nth-of-type(2){left:66.1%!important;top:8.5%!important}
.v22-route-dot:nth-of-type(3){left:81.6%!important;top:28.7%!important}
.v23-prompt.prompt-3{top:59.5%;bottom:auto}

/* Scene 04: the supplied render keeps the instruction high and the dog large/centered at the bottom. */
.v23-prompt.prompt-4{top:18.5%!important;bottom:auto!important;width:58%;max-width:300px}
.v22-beijing-gate .v22-walking-dog{
  width:60%!important;
  height:30%!important;
  left:20%!important;
  top:69%!important;
  object-fit:contain!important;
}
.v22-beijing-gate.open .v22-walking-dog{transform:translateY(-104%) scale(.44)!important;opacity:0}

/* Scene 05 Cornell: render shows many distinct snow clumps rather than full-width horizontal bands. */
.v24-snow-piece{opacity:.995;filter:brightness(1.06) saturate(.88) drop-shadow(0 2px 0 rgba(160,188,207,.42)) drop-shadow(0 7px 6px rgba(89,119,139,.10))}
.v24-snow-piece.piece-0{width:68%;left:-12%;top:-8%;transform:rotate(-3deg)}
.v24-snow-piece.piece-1{width:58%;left:49%;top:2%;transform:rotate(2deg)}
.v24-snow-piece.piece-2{width:72%;left:-18%;top:14%;transform:rotate(1deg)}
.v24-snow-piece.piece-3{width:60%;left:45%;top:24%;transform:rotate(-3deg)}
.v24-snow-piece.piece-4{width:67%;left:-9%;top:36%;transform:rotate(2deg)}
.v24-snow-piece.piece-5{width:62%;left:42%;top:47%;transform:rotate(-1deg)}
.v24-snow-piece.piece-6{width:72%;left:-19%;top:59%;transform:rotate(3deg)}
.v24-snow-piece.piece-7{width:59%;left:48%;top:70%;transform:rotate(-2deg)}
.v24-snow-piece.piece-8{width:70%;left:-13%;top:81%;transform:rotate(2deg)}
.v24-snow-piece.piece-9{width:62%;left:43%;top:91%;transform:rotate(-2deg)}

/* Scene 06 office: position the supplied computer cutout by its actual transparent-canvas geometry. */
.v22-office>img{width:97.3%!important;height:auto!important;left:1.35%!important;top:15.5%!important;object-fit:contain!important}
.v22-screen.s0{left:3.2%;top:36.4%;width:29.6%;height:14.0%}
.v22-screen.s1{left:34.3%;top:36.9%;width:31.2%;height:13.0%}
.v22-screen.s2{left:67.0%;top:36.4%;width:29.6%;height:14.0%}

/* Scene 07 wall bump: match render1 composition. */
.v22-partners .v22-bumping-dog{
  width:50%;height:30%;right:5%;left:auto;top:34%;bottom:auto;
  object-fit:contain;
}
.v22-partners .v22-rabbit{
  width:28%;height:29%;left:7%;top:43%;bottom:auto;
}
.v22-partners .v22-rabbit img{width:100%;height:auto;object-fit:contain}
.v22-partners .v22-moli{
  width:30%;height:21%;left:50%;right:auto;top:74%;bottom:auto;
  object-fit:contain;
}
.v22-partners.rescued .v22-rabbit{width:28%;height:36%;left:7%;top:39%}

/* Scene 08 QTE / Kyoko: reduce assets to the render scale. */
.v26-qte-time{top:16.5%;font-size:34px}
.v26-yoga-mat{width:52%;left:24%;top:43%;height:auto;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(76,53,36,.10))}
.v26-workout-ring{width:40%;left:30%;top:36%;height:auto;object-fit:contain;filter:drop-shadow(0 6px 5px rgba(64,48,57,.12))}
.v26-qte-controls{left:24%;right:24%;bottom:12.5%}
.v22-kyoko-stage .v22-bag{width:42%;height:31%;left:29%;top:41.5%;bottom:auto}
.v22-kyoko-stage .v22-bag.c3{width:34%;height:26%;left:28%;top:53%;bottom:auto}
.v22-kyoko-stage .v22-kyoko-run{width:38%;height:auto;left:55%;top:42%;bottom:auto;object-fit:contain}

/* Scene 09 homes: render sequence gets taller/narrower as the homes improve; v28 stage 4 was over-enlarged. */
.v22-house-button.stage-0{width:59%;height:45%;left:11%;top:25%}
.v22-house-button.stage-1{width:52%;height:48%;left:15%;top:20%}
.v22-house-button.stage-2{width:46%;height:52%;left:15%;top:15%}
.v22-house-button.stage-3{width:52%!important;height:72%!important;left:24%!important;top:7%!important}
.v22-house-button .v22-house{width:100%;height:100%;object-fit:contain}
.v22-homes .v22-case{width:38%;height:34%;right:7%;left:auto;bottom:4%;top:auto}
.v22-homes .v22-case img{width:100%;height:100%;object-fit:contain}

/* Final warm room: render-aligned placement; warm screen blend intentionally retained per user clarification. */
.v26-room-moli{width:26%!important;height:auto!important;left:16.7%!important;right:auto!important;top:56.2%!important;bottom:auto!important;object-fit:contain!important}
.v26-room-rabbit{width:30%!important;height:48%!important;left:50.5%!important;right:auto!important;bottom:16%!important;top:auto!important}
.v26-room-kyoko{width:15%!important;height:auto!important;left:67.5%!important;right:auto!important;top:79%!important;bottom:auto!important;object-fit:contain!important}
.v26-flight-sky .sky-cloud{width:29%;opacity:.92;filter:none}
.v26-flight-sky .sky-cloud.c1{left:-4%;top:8%;transform:scale(1.05)}
.v26-flight-sky .sky-cloud.c2{right:-4%;top:10%;transform:scale(.78)}
.v26-flight-sky .sky-cloud.c3{left:8%;top:30%;transform:scale(.65)}
.v26-flight-sky .sky-cloud.c4{right:18%;top:38%;transform:scale(.82)}
.v26-flight-sky .sky-cloud.c5{left:14%;top:61%;transform:scale(1.08)}
.v26-flight-sky .sky-cloud.c6{right:-5%;top:68%;transform:scale(.72)}
.v26-flight-plane{width:46%;left:47%;bottom:54%;animation:v29-flight-across 3.8s cubic-bezier(.18,.64,.26,1) both}
@keyframes v29-flight-across{from{transform:translate(-135%,95%) scale(1.45) rotate(-2deg)}to{transform:translate(95%,-30%) scale(.65) rotate(-6deg)}}


/* v30 — user clarification: Scene 03 red circles in render are POSITION placeholders only.
   Keep the irregular destination buttons, centered on those render placeholder positions. */
.v22-route-dot{
  width:72px!important;
  height:54px!important;
  aspect-ratio:auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  color:#315963!important;
  background:#9fc7a4!important;
  clip-path:polygon(13% 25%,35% 8%,70% 13%,93% 34%,86% 74%,61% 91%,27% 85%,5% 58%)!important;
  box-shadow:none!important;
  font-size:11px!important;
  font-weight:900!important;
  filter:drop-shadow(0 5px 4px rgba(57,104,118,.18))!important;
  transform:translate(-50%,-50%);
}
.v22-route-dot.north{
  background:#cbbd91!important;
  clip-path:polygon(9% 35%,27% 8%,62% 6%,92% 29%,87% 70%,58% 92%,22% 82%,4% 58%)!important;
}
.v22-route-dot.plateau{
  background:#b8aa9a!important;
  clip-path:polygon(8% 42%,22% 14%,57% 4%,88% 24%,96% 61%,73% 89%,34% 93%,4% 68%)!important;
}
.v22-route-dot:nth-of-type(1){left:16.7%!important;top:20.0%!important}
.v22-route-dot:nth-of-type(2){left:72.4%!important;top:14.8%!important}
.v22-route-dot:nth-of-type(3){left:87.9%!important;top:35.0%!important}
.v22-route-dot:active{transform:translate(-50%,-50%) scale(.91)!important}

/* v30 — user clarification: keep the final-room warm screen filter. */
.level3-room-overlay .room-warm-light{display:block!important}

/* v32 — runtime bug-fix pass from the v31 QA guide. */
.v22-gate,
.v22-beijing-gate .v22-gate{
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  -webkit-tap-highlight-color:transparent;
}
.v22-gate::after{content:none!important}

/* Keep each destination's visual centre and SVG endpoint on the same coordinate. */
.route-hitbox{
  width:88px;height:76px;position:absolute;z-index:8;padding:0;border:0;outline:0;
  background:transparent;transform:translate(-50%,-50%);-webkit-tap-highlight-color:transparent;
}
.route-hitbox.route-shanghai{left:16.7%;top:20%}
.route-hitbox.route-beijing{left:72.4%;top:14.8%}
.route-hitbox.route-tibet{left:87.9%;top:35%}
.route-shape{
  width:72px;height:54px;position:absolute;left:50%;top:50%;display:grid;place-items:center;
  color:#315963;background:#9fc7a4;font-size:11px;font-weight:900;
  clip-path:polygon(13% 25%,35% 8%,70% 13%,93% 34%,86% 74%,61% 91%,27% 85%,5% 58%);
  filter:drop-shadow(0 5px 4px rgba(57,104,118,.18));transform:translate(-50%,-50%);
  transition:transform .18s,filter .18s;pointer-events:none;
}
.route-shape.north{background:#cbbd91;clip-path:polygon(9% 35%,27% 8%,62% 6%,92% 29%,87% 70%,58% 92%,22% 82%,4% 58%)}
.route-shape.plateau{background:#b8aa9a;clip-path:polygon(8% 42%,22% 14%,57% 4%,88% 24%,96% 61%,73% 89%,34% 93%,4% 68%)}
.route-hitbox:active .route-shape{transform:translate(-50%,-50%) scale(.91)}
.v23-prompt.prompt-3{top:64.5%!important}

/* Deterministic, overlapping Cornell snow cover. */
.v24-snow-piece{z-index:18!important;max-width:none;opacity:.995;filter:brightness(1.04) saturate(.9) drop-shadow(0 2px 1px rgba(146,173,191,.44)) drop-shadow(0 8px 7px rgba(89,119,139,.12))}
.v24-snow-piece:nth-of-type(even){filter:brightness(1.01) saturate(.88) drop-shadow(0 2px 1px rgba(139,168,189,.46)) drop-shadow(0 8px 7px rgba(82,112,133,.13))}
.v24-snow-piece.piece-0{width:82%;left:-24%;top:-11%;transform:rotate(-4deg)}
.v24-snow-piece.piece-1{width:76%;left:38%;top:-4%;transform:rotate(3deg)}
.v24-snow-piece.piece-2{width:80%;left:-8%;top:9%;transform:rotate(1deg)}
.v24-snow-piece.piece-3{width:72%;left:35%;top:19%;transform:rotate(-4deg)}
.v24-snow-piece.piece-4{width:82%;left:-22%;top:31%;transform:rotate(2deg)}
.v24-snow-piece.piece-5{width:79%;left:27%;top:42%;transform:rotate(-1deg)}
.v24-snow-piece.piece-6{width:74%;left:-7%;top:55%;transform:rotate(4deg)}
.v24-snow-piece.piece-7{width:82%;left:31%;top:65%;transform:rotate(-3deg)}
.v24-snow-piece.piece-8{width:80%;left:-25%;top:78%;transform:rotate(2deg)}
.v24-snow-piece.piece-9{width:78%;left:25%;top:88%;transform:rotate(-2deg)}
.v22-discovery{z-index:24!important}
.v22-discovery.title{animation:v22-pop .45s both,discovery-title-glow 1.15s .45s ease-in-out infinite alternate}
.v22-discovery.scholar{animation:v22-pop .45s both,discovery-crystal-glow 1.05s .45s ease-in-out infinite alternate}
@keyframes discovery-title-glow{from{transform:scale(1);filter:drop-shadow(0 0 4px rgba(255,224,120,.45))}to{transform:scale(1.06);filter:drop-shadow(0 0 15px rgba(255,224,120,.95))}}
@keyframes discovery-crystal-glow{from{transform:scale(1);filter:drop-shadow(0 0 5px rgba(132,188,255,.48))}to{transform:scale(1.06);filter:drop-shadow(0 0 16px rgba(151,128,255,.92))}}

/* Preserve transparent PNG aspect ratios in all later scenes. */
.v22-partners .v22-rabbit{height:auto!important;touch-action:none;transform:translate(var(--rabbit-x,0),var(--rabbit-y,0))!important;transition:transform .28s}
.v22-partners .v22-rabbit.dragging{transition:none}
.v22-partners .v22-rabbit:active{transform:translate(var(--rabbit-x,0),var(--rabbit-y,0))!important}
.v22-partners .v22-rabbit img{width:100%;height:auto!important;display:block;object-fit:contain!important}
.v22-partners .v22-moli{width:30%;height:auto!important;object-fit:contain!important}
.v22-partners.rescued .v22-rabbit{width:28%;height:auto!important}
.v22-kyoko-stage .v22-kyoko-run{width:44%;height:auto!important;left:30%;top:43%;bottom:auto;object-fit:contain!important}
@keyframes v22-kyoko-run{0%{opacity:0;transform:translate(-16%,28%) scale(.8)}55%{opacity:1;transform:translate(0,-13%) scale(1.05)}to{opacity:1;transform:translate(0,0) scale(1)}}
.v22-house-button .v22-house{width:100%;height:100%;object-fit:contain!important}
.v22-homes .v22-case img{width:100%;height:100%;object-fit:contain!important}
.v22-homes>small{display:none!important}

/* QTE waits for the first player input; timer, prompt and ring no longer collide. */
.v26-qte-time{top:22.5%!important;min-width:6ch;text-align:center;font-variant-numeric:tabular-nums}

/* Ice cave: scratch first, then click only the glowing yellow exit. */
.v22-ice-canvas{transition:opacity .3s ease}
.v22-nordic.cleared .v22-reflection{opacity:1}
.v31-ice-exit-hotspot{
  width:22%;height:13%;position:absolute;z-index:20;left:39%;top:24%;padding:0;
  border:0;outline:0;background:transparent;-webkit-tap-highlight-color:transparent;
}
.v31-ice-exit-hotspot::before{
  content:"";position:absolute;inset:-18%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,224,116,.58) 0%,rgba(255,218,102,.25) 38%,rgba(255,218,102,0) 72%);
  animation:ice-exit-glow 1.25s ease-in-out infinite alternate;
}
@keyframes ice-exit-glow{from{opacity:.55;transform:scale(.94);filter:drop-shadow(0 0 5px rgba(255,215,90,.45))}to{opacity:1;transform:scale(1.08);filter:drop-shadow(0 0 16px rgba(255,215,90,.9))}}

/* Final room cutouts retain their source proportions and warm screen overlay. */
.v26-room-moli{width:26%!important;height:auto!important;left:16.7%!important;right:auto!important;top:55.5%!important;bottom:auto!important;object-fit:contain!important}
.v26-room-kyoko{width:20%!important;height:auto!important;left:76%!important;right:auto!important;top:78%!important;bottom:auto!important;object-fit:contain!important}
.level3-room-overlay .envelope-hotspot{bottom:calc(10% + 10px)!important}
.level3-room-overlay .room-warm-light{display:block!important;mix-blend-mode:screen!important}

/* Letter paper starts fully clipped inside the envelope pocket. */
.letter-paper-pocket{width:274px;height:162px;position:absolute;z-index:4;left:50%;top:49%;overflow:hidden;transform:translate(-50%,-50%);transition:all .85s cubic-bezier(.2,.8,.25,1)}
.letter-paper-pocket .birthday-letter{top:100%;transform:translate(-50%,-5%) scale(.62) rotateX(64deg)}
.letter-stage-2 .letter-paper-pocket{height:360px;top:49%;overflow:visible;transform:translate(-50%,-50%)}
.letter-stage-2 .letter-paper-pocket .birthday-letter{top:50%;transform:translate(-50%,-73%) scale(.72) rotateX(15deg)}
.letter-stage-3 .letter-paper-pocket{width:100%;height:76%;top:50%;overflow:visible;transform:translate(-50%,-50%)}
.letter-stage-3 .letter-paper-pocket .birthday-letter{width:min(88vw,360px);height:min(64svh,520px);top:49%;overflow-y:auto;padding:31px 27px 40px;border-radius:4px;transform:translate(-50%,-50%) scale(1) rotateX(0)}

/* v33 — second mobile QA pass, kept strictly on top of the v32 render-aligned base. */
.v32-bg-guard{
  position:absolute;
  z-index:96;
  inset:0;
  pointer-events:auto;
  background:#edf5f2;
}

.v22-constellations button.leo.correct{
  animation:constellation-success .75s ease-out both;
}
@keyframes constellation-success{
  0%{transform:scale(1);filter:drop-shadow(0 0 5px rgba(190,232,255,.65))}
  50%{transform:scale(1.09);filter:drop-shadow(0 0 13px rgba(205,240,255,.95)) drop-shadow(0 0 25px rgba(120,198,255,.7))}
  100%{transform:scale(1.04);filter:drop-shadow(0 0 16px rgba(205,240,255,.9))}
}

/* Scene 03: restore the render-aligned aircraft height after the v32 regression. */
.v22-plane{width:108%;height:auto;left:-2%;top:31%;object-fit:contain}

/* Scene 05: overlap the irregular white silhouettes, not just their PNG boxes. */
.v24-snow-piece.piece-0{width:82%;left:-24%;top:-10%;transform:rotate(-4deg)}
.v24-snow-piece.piece-1{width:76%;left:30%;top:-2%;transform:rotate(3deg)}
.v24-snow-piece.piece-2{width:80%;left:-5%;top:7%;transform:rotate(1deg)}
.v24-snow-piece.piece-3{width:72%;left:37%;top:16%;transform:rotate(-4deg)}
.v24-snow-piece.piece-4{width:82%;left:-20%;top:26%;transform:rotate(2deg)}
.v24-snow-piece.piece-5{width:79%;left:22%;top:37%;transform:rotate(-1deg)}
.v24-snow-piece.piece-6{width:74%;left:-9%;top:48%;transform:rotate(4deg)}
.v24-snow-piece.piece-7{width:82%;left:33%;top:59%;transform:rotate(-3deg)}
.v24-snow-piece.piece-8{width:80%;left:-25%;top:71%;transform:rotate(2deg)}
.v24-snow-piece.piece-9{width:78%;left:20%;top:82%;transform:rotate(-2deg)}

.v22-screen.on>span{font-size:19px}

/* Scene 07: keep the same drag transform before and after rescue. */
.v22-partners .v22-rabbit{
  width:36%;
  height:auto!important;
  left:4%;
  top:40%;
  object-fit:contain;
}
.v22-partners.rescued .v22-rabbit{
  width:36%;
  height:auto!important;
  left:4%;
  top:40%;
}

/* Scene 09: all four houses stay mounted; changing stage only changes visibility. */
.v22-house-button.stage-2{width:58%;height:60%;left:21%;top:12%}
.v22-house-button.stage-3{width:68%!important;height:76%!important;left:16%!important;top:6%!important}
.house-stack{position:absolute;inset:0;display:block}
.v22-house-button .v22-house{
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  display:block;
  object-fit:contain!important;
  pointer-events:none;
  animation:none;
}
.v22-house-button .v22-house.cached{opacity:0;visibility:hidden}
.v22-house-button .v22-house.current{opacity:1;visibility:visible;animation:v22-house-pop .55s both}

/* The first letter frame is already inside the envelope; only stage 2 extracts it. */
.letter-stage-1 .letter-paper-pocket{
  transition:none!important;
}
.letter-stage-1 .letter-paper-pocket .birthday-letter{
  top:50%;
  transform:translate(-50%,32%) scale(.62) rotateX(64deg);
  transition:none!important;
}
.letter-stage-2 .letter-paper-pocket{
  transition:height .85s cubic-bezier(.2,.8,.25,1),top .85s cubic-bezier(.2,.8,.25,1),transform .85s cubic-bezier(.2,.8,.25,1);
}
.letter-stage-2 .letter-paper-pocket .birthday-letter{
  transition:transform .85s cubic-bezier(.2,.8,.25,1),top .85s cubic-bezier(.2,.8,.25,1);
}

/* v34 — third mobile QA pass. */

/* Destination labels remain inside the irregular route silhouettes. */
.route-shape{
  font-size:13px;
  line-height:1;
  text-align:center;
}

/* Cornell: denser irregular clumps overlap their opaque silhouettes. */
.v24-snow-piece{
  max-width:none;
  filter:brightness(1.045) saturate(.92) drop-shadow(0 2px 1px rgba(146,173,191,.38)) drop-shadow(0 7px 6px rgba(89,119,139,.10));
}
.v24-snow-piece.piece-0{width:97%;left:-17%;top:-15%;transform:rotate(-4deg)}
.v24-snow-piece.piece-1{width:93%;left:25%;top:-9%;transform:rotate(3deg)}
.v24-snow-piece.piece-2{width:98%;left:-9%;top:-3%;transform:rotate(1deg)}
.v24-snow-piece.piece-3{width:94%;left:21%;top:3%;transform:rotate(-4deg)}
.v24-snow-piece.piece-4{width:97%;left:-19%;top:9%;transform:rotate(2deg)}
.v24-snow-piece.piece-5{width:92%;left:20%;top:15%;transform:rotate(-1deg)}
.v24-snow-piece.piece-6{width:99%;left:-11%;top:21%;transform:rotate(4deg)}
.v24-snow-piece.piece-7{width:95%;left:25%;top:27%;transform:rotate(-3deg)}
.v24-snow-piece.piece-8{width:97%;left:-18%;top:33%;transform:rotate(2deg)}
.v24-snow-piece.piece-9{width:94%;left:18%;top:39%;transform:rotate(-2deg)}
.v24-snow-piece.piece-10{width:98%;left:-8%;top:45%;transform:rotate(-1deg)}
.v24-snow-piece.piece-11{width:93%;left:24%;top:51%;transform:rotate(3deg)}
.v24-snow-piece.piece-12{width:97%;left:-20%;top:57%;transform:rotate(-3deg)}
.v24-snow-piece.piece-13{width:95%;left:19%;top:63%;transform:rotate(2deg)}
.v24-snow-piece.piece-14{width:99%;left:-12%;top:69%;transform:rotate(1deg)}
.v24-snow-piece.piece-15{width:94%;left:23%;top:75%;transform:rotate(-4deg)}
.v24-snow-piece.piece-16{width:98%;left:-19%;top:81%;transform:rotate(3deg)}
.v24-snow-piece.piece-17{width:96%;left:16%;top:87%;transform:rotate(-2deg)}
.v22-discovery.scholar{animation:v22-pop .3s both}
.v22-discovery.scholar img{animation:discovery-crystal-glow 1.05s ease-in-out infinite alternate}

/* Office: move the monitor cutout and all three hit regions down together. */
.v22-office>img{
  width:97.3%!important;
  height:auto!important;
  left:1.35%!important;
  top:18.2%!important;
  object-fit:contain!important;
}
.v22-screen.s0{left:3.2%;top:39.1%;width:29.6%;height:14%}
.v22-screen.s1{left:34.3%;top:39.6%;width:31.2%;height:13%}
.v22-screen.s2{left:67%;top:39.1%;width:29.6%;height:14%}

/* Rabbit state sprites stay mounted and share one stable visual frame. */
.v22-partners .v22-rabbit,
.v22-partners.rescued .v22-rabbit{
  width:36%;
  height:21%!important;
  left:4%;
  top:40%;
}
.v22-partners .v22-rabbit .rabbit-state{
  width:auto!important;
  height:100%!important;
  position:absolute;
  left:50%;
  top:50%;
  display:block;
  object-fit:contain!important;
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
  transition:opacity .12s ease,transform .3s cubic-bezier(.2,1.15,.35,1);
  pointer-events:none;
}
.v22-partners .v22-rabbit .rabbit-state.hidden{opacity:0;visibility:hidden}
.v22-partners .v22-rabbit .rabbit-state.shown{opacity:1;visibility:visible}
.v22-partners.rescued .v22-rabbit .rabbit-happy{animation:v34-rabbit-pop .42s ease-out both}
@keyframes v34-rabbit-pop{0%{transform:translate(-50%,-50%) scale(.94)}55%{transform:translate(-50%,-50%) scale(1.06)}to{transform:translate(-50%,-50%) scale(1)}}

/* Room foreground and captions remain covered until BG + key sprites decode. */
.v34-room-bg-guard{
  position:fixed!important;
  z-index:1000!important;
  inset:0!important;
  background:#edf5f2!important;
}

/* The modal's first paint already has the paper inside the pocket. */
.letter-paper-pocket .birthday-letter,
.letter-stage-1 .letter-paper-pocket .birthday-letter{
  top:16%;
  transform:translate(-50%,0) scale(.62) rotateX(0);
  transform-origin:center top;
  transition:none!important;
}
.letter-stage-1 .letter-paper-pocket{
  transition:none!important;
}
.letter-stage-2 .letter-paper-pocket .birthday-letter{
  top:50%;
  transform:translate(-50%,-73%) scale(.72) rotateX(15deg);
  transform-origin:center bottom;
  transition:transform .85s cubic-bezier(.2,.8,.25,1),top .85s cubic-bezier(.2,.8,.25,1)!important;
}

/* v35 — keep route controls above the plane and make every wrong choice visible. */
.v22-airport .route-hitbox{z-index:14}
.v22-airport .v22-routes,
.v22-airport .v22-plane,
.v22-airport .v25-airport-dog{pointer-events:none}
.route-hitbox.wrong .route-shape{
  color:#fff7f2;
  background:#d67b72;
  animation:v35-route-wrong .34s ease-in-out 2;
  filter:drop-shadow(0 0 10px rgba(213,81,72,.72));
}
@keyframes v35-route-wrong{
  0%,100%{transform:translate(-50%,-50%)}
  35%{transform:translate(calc(-50% - 5px),-50%)}
  70%{transform:translate(calc(-50% + 5px),-50%)}
}

/* One completed horizontal gesture removes exactly one snow piece. */
.v24-snow-piece.gone{pointer-events:none}

/* The paper remains in one coordinate system: stage 2 only extracts it upward. */
.letter-paper-pocket,
.letter-stage-1 .letter-paper-pocket,
.letter-stage-2 .letter-paper-pocket{
  width:274px;
  height:162px;
  left:50%;
  top:49%;
  overflow:hidden;
  transform:translate(-50%,-50%);
  transition:none!important;
}
.letter-paper-pocket .birthday-letter,
.letter-stage-1 .letter-paper-pocket .birthday-letter{
  top:18px;
  transform:translate(-50%,0) scale(.62) rotateX(0);
  transform-origin:center top;
  transition:none!important;
}
.letter-stage-2 .letter-paper-pocket{overflow:visible}
.letter-stage-2 .letter-paper-pocket .birthday-letter{
  top:18px;
  transform:translate(-50%,-78%) scale(.72) rotateX(0);
  transform-origin:center top;
  transition:transform .85s cubic-bezier(.2,.8,.25,1)!important;
}
.letter-stage-3 .letter-paper-pocket{
  width:100%;
  height:76%;
  top:50%;
  overflow:visible;
  transform:translate(-50%,-50%);
}

/* v36 — fifth-round interaction, paint, and cross-device alignment fixes. */
.v36-stage-prerender{
  visibility:hidden!important;
  pointer-events:none!important;
}

.v22-constellations button.leo{
  width:42%;
  height:29%;
  left:30%;
  top:5%;
}
.v22-constellations button.libra{
  width:35%;
  height:34%;
  right:0;
  top:12%;
}
.v22-constellations button.wrong img{
  filter:sepia(.75) saturate(4.2) hue-rotate(320deg) brightness(1.15) drop-shadow(0 0 12px rgba(213,81,72,.92));
  animation:v36-choice-wrong .34s ease-in-out 2;
}
@keyframes v36-choice-wrong{
  0%,100%{transform:translateX(0)}
  35%{transform:translateX(-5px)}
  70%{transform:translateX(5px)}
}

.v24-snow-piece{
  height:auto!important;
  aspect-ratio:1024/683;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.v24-snow-piece.snow-a{background-image:url('/assets-1.0-v31/level3/snow1.webp')}
.v24-snow-piece.snow-b{background-image:url('/assets-1.0-v31/level3/snow2.webp')}

.v22-office{inset:0;overflow:hidden}
.v36-office-artboard{
  width:1024px;
  height:1535px;
  position:absolute;
  left:0;
  top:0;
  transform-origin:top left;
}
.v36-office-computers{
  width:747px;
  height:747px;
  position:absolute;
  left:139px;
  top:279px;
  display:block;
  object-fit:contain!important;
}
.v36-office-artboard .v22-screen{
  height:215px;
  top:600px;
  right:auto;
  border-radius:3px;
  font-size:18px;
}
.v36-office-artboard .v22-screen.s0{width:227px;left:153px;top:600px}
.v36-office-artboard .v22-screen.s1{width:239px;left:391px;top:608px;height:199px}
.v36-office-artboard .v22-screen.s2{width:227px;left:643px;top:600px}
.v36-office-artboard .v22-screen.on>span{font-size:34px!important}

.v22-partners .dog-state{
  width:50%;
  height:30%;
  position:absolute;
  z-index:5;
  right:5%;
  left:auto;
  top:34%;
  bottom:auto;
  object-fit:contain!important;
  transition:opacity .14s ease,transform .35s cubic-bezier(.2,1.15,.35,1);
}
.v22-partners .dog-state.hidden{opacity:0;visibility:hidden;animation:none}
.v22-partners .dog-state.shown{opacity:1;visibility:visible}
.v22-partners .v22-happy-dog.shown{animation:v36-dog-happy-pop .42s ease-out both}
@keyframes v36-dog-happy-pop{0%{transform:scale(.94)}55%{transform:scale(1.05)}to{transform:scale(1)}}

.v26-qte-controls button.wrong,
.v26-qte-controls button.expected.wrong{
  color:#fff7f2;
  background:#d67b72;
  box-shadow:0 0 0 6px rgba(213,81,72,.22),0 7px 0 #8f4742;
  animation:v36-fitness-wrong .34s ease-in-out 2;
}
@keyframes v36-fitness-wrong{
  0%,100%{transform:translateX(0)}
  35%{transform:translateX(-5px)}
  70%{transform:translateX(5px)}
}

.birthday-letter .letter-body{
  margin:10px 0 18px;
  white-space:pre-wrap;
  font-size:13px;
  line-height:1.72;
  text-align:left;
  opacity:0;
  transition:opacity .4s .55s;
}
.letter-stage-3 .birthday-letter .letter-body{opacity:1}

/* v37 — ordered mobile preloading and desk alignment. */
.v36-office-computers{
  top:375px;
}
.v36-office-artboard .v22-screen.s0{
  width:219px;
  height:160px;
  left:165px;
  top:628px;
}
.v36-office-artboard .v22-screen.s1{
  width:227px;
  height:154px;
  left:398px;
  top:632px;
}
.v36-office-artboard .v22-screen.s2{
  width:219px;
  height:160px;
  left:643px;
  top:628px;
}

.v22-kyoko-stage .v22-kyoko-run.cached{
  opacity:0;
  visibility:hidden;
  animation:none;
}
.v22-kyoko-stage .v22-kyoko-run.shown{
  opacity:1;
  visibility:visible;
  animation:v22-kyoko-run 1s cubic-bezier(.2,.8,.25,1) both;
}

.letter-stage-1 .letter-envelope-back::before{
  transform:rotateX(0)!important;
}
.letter-stage-1 .letter-envelope-front i{
  animation:none!important;
}
.letter-stage-2 .letter-envelope-front i{
  animation:seal-release .55s both;
}

/* v39 — fitness assets stay decoded; the letter opens on the second click. */
.v39-fitness-preload-pin{
  width:1px;
  height:1px;
  position:fixed;
  z-index:-1;
  left:0;
  top:0;
  overflow:hidden;
  opacity:.001;
  pointer-events:none;
}
.v39-fitness-preload-pin img{
  width:1px;
  height:1px;
  display:block;
  object-fit:cover;
}
.letter-open-hotspot{
  width:278px;
  height:174px;
  position:absolute;
  z-index:12;
  left:50%;
  top:49%;
  padding:0;
  border:0;
  border-radius:11px;
  color:#fff7df;
  background:transparent;
  transform:translate(-50%,-50%);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.letter-open-hotspot span{
  position:absolute;
  left:50%;
  bottom:-38px;
  padding:6px 11px;
  border-radius:999px;
  background:rgba(74,47,34,.72);
  font-size:10px;
  font-weight:850;
  white-space:nowrap;
  transform:translateX(-50%);
  animation:envelope-breathe 1.2s ease-in-out infinite;
}

/* v40 — clean letter paper and a continuous-outline walk cycle. */
.birthday-letter::before,
.birthday-letter::after{
  content:none!important;
  display:none!important;
}
.letter-stage-3 .birthday-letter{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.letter-stage-3 .birthday-letter::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

.v40-walking-dog{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:visible;
  pointer-events:none;
}
.v40-walking-dog-canvas{
  display:block;
  height:100%;
  width:auto;
  max-width:100%;
  max-height:none;
  aspect-ratio:1 / 1;
  flex:0 0 auto;
  transform-origin:50% 84%;
}
.v40-walking-dog.is-walking .v40-walking-dog-canvas{
  animation:v42-dog-weight-shift .516s ease-in-out infinite;
}
@keyframes v42-dog-weight-shift{
  0%{transform:translate(-3.5px,-1px) rotate(-2.3deg) scaleY(.985)}
  25%{transform:translate(0,-5px) rotate(0) scaleY(1.015)}
  50%{transform:translate(3.5px,-1px) rotate(2.3deg) scaleY(.985)}
  75%{transform:translate(0,-5px) rotate(0) scaleY(1.015)}
  100%{transform:translate(-3.5px,-1px) rotate(-2.3deg) scaleY(.985)}
}

@media (prefers-reduced-motion: reduce){
  .v22-gate-stage.open .v40-walking-dog{transition-duration:1.25s}
  .v40-walking-dog.is-walking .v40-walking-dog-canvas{animation:v42-dog-weight-shift .7s ease-in-out infinite}
}


/* v62: level 2 score-progress correction and level 3 layout/text refinements. */
.v23-narration small,
.v22-modal small,
.level3-intro-card .arcade-kicker,
.level3-finish-card .arcade-kicker,
.level3-clue small { font-size: 13px !important; }
.v22-modal b { font-size: 30px !important; }
.v22-modal p { font-size: 15px !important; }
.v22-modal button { font-size: 16px !important; }
.v22-house-button.stage-2 { top: calc(12% + 20px) !important; }
.v22-house-button.stage-3 { width: 84% !important; height: 84% !important; left: 8% !important; top: 5% !important; }
.room-caption { top: 74px !important; }
.room-caption h2 { margin: 0 !important; text-shadow: 0 2px 8px rgba(58, 47, 39, .72), 0 0 12px rgba(255,255,255,.18); }
.room-caption small, .room-caption p { display: none !important; }
.level3-room-overlay .envelope-hotspot { left: 21% !important; bottom: 14% !important; width: 108px !important; height: 82px !important; }
.v26-room-kyoko { width: 28% !important; height: auto !important; left: 68% !important; right: auto !important; top: 71% !important; bottom: auto !important; object-fit: contain !important; }


/* v63: keep the animated blue-dog canvas square on tall mobile Safari viewports.
   The wrapper is intentionally wider than it is tall in the school scenes;
   width:100% + max-height:100% let WebKit compress the canvas vertically.
   Size from the wrapper height instead and let flex centering preserve the
   source 1:1 raster without changing the scene placement. */
.v22-gate-stage .v40-walking-dog-canvas,
.v22-beijing-gate .v40-walking-dog-canvas {
  height:100% !important;
  width:auto !important;
  max-width:100% !important;
  max-height:none !important;
  aspect-ratio:1 / 1 !important;
}

/* v64 home screen refresh: scrapbook-style hub with selection state and reward lock logic */
.home-overlay {
  background:
    radial-gradient(circle at 50% 12%, rgba(198, 227, 235, .52), transparent 28%),
    linear-gradient(180deg, #efe3cf 0%, #f7f0e5 100%);
  backdrop-filter: none;
}
.home-card.home-scrapbook-card {
  position: relative;
  width: min(100%, 392px);
  padding: 34px 22px 24px;
  border-radius: 36px;
  background: linear-gradient(180deg, #fbf7ef 0%, #f8f3ea 100%);
  border: 1px solid rgba(187, 167, 138, .32);
  box-shadow: 0 22px 56px rgba(164, 137, 103, .2);
  overflow: visible;
  isolation: isolate;
  font-family: var(--font-geist-sans), "PingFang SC", "Microsoft YaHei", sans-serif;
}
.home-card.home-scrapbook-card::before,
.home-card.home-scrapbook-card::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 30px;
  border: 1px dashed rgba(197, 181, 153, .32);
  pointer-events: none;
}
.home-card.home-scrapbook-card::after {
  inset: auto 32px 18px auto;
  width: 104px;
  height: 118px;
  border: 0;
  border-radius: 22px 22px 24px 24px;
  background: linear-gradient(180deg, rgba(245, 233, 214, .92), rgba(241, 225, 201, .95));
  box-shadow: 0 10px 18px rgba(173, 142, 106, .14);
  transform: rotate(7deg);
  z-index: -1;
}
.home-paper-layer {
  position: absolute;
  inset: 0;
  border-radius: 36px;
  pointer-events: none;
  z-index: -2;
}
.home-paper-layer-back {
  transform: translate(8px, -10px) rotate(1.2deg);
  background: #dbe5df;
  box-shadow: 0 10px 24px rgba(158, 170, 162, .15);
}
.home-paper-layer-mid {
  transform: translate(-10px, 6px) rotate(-1.2deg);
  background: #ecdcc1;
  box-shadow: 0 10px 22px rgba(181, 154, 122, .12);
}
.home-deco-tape,
.home-deco-clip,
.home-deco-note,
.home-hydrangea {
  position: absolute;
  pointer-events: none;
}
.home-deco-tape {
  width: 78px;
  height: 18px;
  border-radius: 4px;
  opacity: .9;
  box-shadow: 0 2px 4px rgba(132, 124, 112, .12);
}
.home-deco-tape-top {
  top: -8px;
  left: 18px;
  background: repeating-linear-gradient(90deg, rgba(181, 214, 226, .92) 0 10px, rgba(226, 240, 245, .96) 10px 20px);
  transform: rotate(-7deg);
}
.home-deco-tape-left {
  top: 216px;
  left: -8px;
  background: repeating-linear-gradient(90deg, rgba(123, 191, 225, .85) 0 8px, rgba(201, 232, 244, .95) 8px 16px);
  transform: rotate(-20deg);
}
.home-deco-clip {
  top: -4px;
  right: 26px;
  width: 32px;
  height: 74px;
  border: 4px solid #b7aed6;
  border-left-width: 5px;
  border-radius: 20px;
  transform: rotate(15deg);
  opacity: .75;
}
.home-deco-note {
  top: 14px;
  right: 10px;
  width: 56px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 4px 4px 8px 4px;
  background: #f6e7bf;
  color: #bda7d3;
  font-size: 18px;
  box-shadow: 0 6px 12px rgba(173, 148, 108, .14);
}
.home-header {
  position: relative;
  padding: 6px 10px 18px;
  text-align: center;
}
.home-header h1 {
  margin: 0;
  color: #4f4436;
  font-size: 34px;
  line-height: 1.04;
  letter-spacing: .04em;
  font-weight: 900;
  font-stretch: expanded;
}
.home-card .home-lead {
  margin: 16px 0 0;
  color: #5f5445;
  font-size: 12px;
  letter-spacing: 0;
}
.home-divider {
  display: block;
  width: 176px;
  height: 10px;
  margin: 12px auto 0;
  border-bottom: 3px solid #90b6cf;
  border-radius: 999px;
  opacity: .82;
  position: relative;
}
.home-divider::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -5px;
  width: 10px;
  height: 10px;
  border: 2px solid #90b6cf;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 10px 10px 10px 0;
  transform: rotate(45deg);
}
.home-level-list {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}
.home-level-card {
  position: relative;
  width: 100%;
  min-height: 112px;
  display: grid;
  grid-template-columns: 92px 1fr 86px;
  gap: 12px;
  align-items: center;
  padding: 18px 18px 18px 20px;
  border: 1px solid rgba(199, 185, 162, .65);
  border-radius: 24px;
  background: rgba(255, 252, 246, .92);
  box-shadow: 0 8px 20px rgba(154, 136, 109, .12);
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
  font-family: inherit;
}
.home-level-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  border: 1px dashed rgba(207, 194, 173, .75);
  pointer-events: none;
}
.home-level-card:hover,
.home-level-card:active {
  transform: translateY(-1px);
}
.home-level-card.selected {
  border-color: rgba(137, 174, 180, .85);
  background: linear-gradient(180deg, #fffef9 0%, #f7f7f1 100%);
  box-shadow: 0 12px 24px rgba(148, 156, 171, .18);
}
.home-level-card.tone-mint { color: #6d9e97; }
.home-level-card.tone-teal { color: #6aaeb1; }
.home-level-card.tone-lavender { color: #7b87bf; }
.home-level-number {
  display: grid;
  place-items: center;
  align-self: stretch;
  width: 92px;
  color: currentColor;
  font-size: 58px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .01em;
  border-right: 1px solid rgba(181, 190, 182, .75);
}
.home-level-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.home-level-copy strong {
  color: #4f4335;
  font-size: 20px;
  font-weight: 800;
}
.home-level-copy small {
  color: #51473a;
  font-size: 10px;
  line-height: 1.45;
}
.home-level-copy .home-requirements {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.home-inline-reward {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(239, 243, 239, .95);
  border: 1px dashed rgba(177, 192, 189, .9);
  color: #7f8ba2;
  font-size: 12px;
  font-style: normal;
  overflow: hidden;
}
.home-inline-reward img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.home-reward-slot {
  position: relative;
  z-index: 1;
  width: 86px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  border: 1px dashed rgba(170, 196, 196, .9);
  background: linear-gradient(180deg, #f0f5ef 0%, #edf3ee 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.58), 0 6px 12px rgba(175, 164, 143, .11);
  overflow: hidden;
}
.home-level-card.tone-teal .home-reward-slot {
  background: linear-gradient(180deg, #eef6f6 0%, #ebf4f4 100%);
}
.home-level-card.tone-lavender .home-reward-slot {
  background: linear-gradient(180deg, #f3f2fb 0%, #efeff9 100%);
}
.home-reward-slot img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}
.home-reward-slot i {
  color: currentColor;
  font-size: 36px;
  font-style: normal;
  font-weight: 800;
  opacity: .92;
}
.home-reward-slot.locked {
  background: linear-gradient(180deg, #eef1fb 0%, #eceef9 100%);
}
.home-lock-icon {
  position: relative;
  width: 34px;
  height: 34px;
}
.home-lock-icon u {
  position: absolute;
  display: block;
  text-decoration: none;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid #6e8ec5;
  box-sizing: border-box;
}
.home-lock-icon u:first-child {
  top: 0;
  width: 22px;
  height: 18px;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
}
.home-lock-icon u:last-child {
  bottom: 1px;
  width: 32px;
  height: 22px;
  border-radius: 7px;
  background: rgba(110, 142, 197, .08);
}
.home-lock-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 17px;
  width: 6px;
  height: 10px;
  background: #6e8ec5;
  border-radius: 999px;
  transform: translateX(-50%);
}
.home-entry-button {
  width: 100%;
  height: 56px;
  margin-top: 18px;
  border-radius: 22px;
  border: 1px solid rgba(145, 169, 149, .78);
  background: linear-gradient(180deg, #b8d2a8 0%, #a8c690 100%);
  color: #fffdf7;
  font-size: 18px;
  font-weight: 850;
  letter-spacing: .03em;
  box-shadow: 0 10px 18px rgba(136, 162, 119, .18);
}
.home-entry-button:disabled {
  color: rgba(255,253,247,.8);
  background: linear-gradient(180deg, #c7d4c0 0%, #bccab6 100%);
  border-color: rgba(160, 171, 150, .6);
  box-shadow: none;
  cursor: not-allowed;
}
.home-hydrangea {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.84), rgba(255,255,255,0) 18%),
    radial-gradient(circle at 35% 38%, #bcd7f1 0 15%, transparent 16%),
    radial-gradient(circle at 52% 32%, #a9caee 0 15%, transparent 16%),
    radial-gradient(circle at 67% 42%, #c8c0ef 0 15%, transparent 16%),
    radial-gradient(circle at 32% 57%, #b0d5f3 0 15%, transparent 16%),
    radial-gradient(circle at 50% 56%, #c8c1ef 0 15%, transparent 16%),
    radial-gradient(circle at 68% 57%, #a6c9ec 0 15%, transparent 16%),
    radial-gradient(circle at 50% 72%, #c0b9eb 0 15%, transparent 16%);
  filter: drop-shadow(0 4px 8px rgba(142, 141, 161, .18));
}
.home-hydrangea::before,
.home-hydrangea::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 16px;
  height: 12px;
  background: #98b488;
  border-radius: 0 12px 12px 12px;
}
.home-hydrangea::before {
  left: 6px;
  transform: rotate(-16deg);
}
.home-hydrangea::after {
  right: 6px;
  transform: scaleX(-1) rotate(-16deg);
}
.home-hydrangea-a { top: 52px; right: 12px; }
.home-hydrangea-b { bottom: 18px; right: 18px; transform: scale(.88); }
@media (max-width: 420px) {
  .home-card.home-scrapbook-card { padding: 30px 18px 20px; }
  .home-header h1 { font-size: 31px; }
  .home-level-card { grid-template-columns: 82px 1fr 76px; min-height: 104px; padding: 16px; }
  .home-level-number { width: 82px; font-size: 54px; }
  .home-reward-slot { width: 76px; height: 76px; }
  .home-reward-slot img { width: 40px; height: 40px; }
}
.home-overlay {
  padding: 12px 10px;
  background: linear-gradient(180deg, #f4ede4 0%, #efe6da 100%);
}
.home-card.home-scrapbook-card {
  width: min(100%, 420px);
  padding: 22px 18px 22px;
  border-radius: 34px;
  background: linear-gradient(180deg, #eadcc6 0%, #e8dbc6 100%);
  border: none;
  box-shadow: 0 18px 36px rgba(159, 135, 106, .18);
}
.home-card.home-scrapbook-card::before {
  inset: 12px;
  border-radius: 30px;
  border: 1px dashed rgba(194, 175, 151, .38);
}
.home-card.home-scrapbook-card::after {
  display: none;
}
.home-paper-layer-back {
  background: #dfe7e3;
  transform: translate(10px, -4px) rotate(0.6deg);
  border-radius: 34px;
}
.home-paper-layer-mid {
  background: #ecdcc4;
  transform: translate(-8px, 6px) rotate(-0.65deg);
  border-radius: 34px;
}
.home-deco-tape-top {
  top: -8px;
  left: 8px;
  width: 44px;
  height: 14px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, #d7ecf9 0 7px, #c6dff2 7px 14px);
  transform: rotate(-12deg);
}
.home-deco-clip {
  top: 18px;
  right: 20px;
  width: 26px;
  height: 52px;
  border: 4px solid #b8add5;
  border-radius: 18px;
  opacity: .9;
}
.home-deco-image { position: absolute; pointer-events: none; }
.home-deco-image img { display: block; width: 100%; height: auto; }
.home-deco-tape-cut { left: 2px; top: 244px; width: 33px; }
.home-deco-note-group { right: 13px; top: 86px; width: 84px; }
.home-deco-bottom-flower { right: 14px; bottom: 4px; width: 58px; }
.home-header {
  padding: 12px 58px 18px 14px;
  text-align: center;
}
.home-header h1 {
  color: #4a3c31;
  font-size: 31px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: .045em;
}
.home-card .home-lead {
  margin-top: 12px;
  color: #534538;
  font-size: 11px;
}
.home-divider {
  width: 130px;
  height: 8px;
  margin-top: 12px;
  border-bottom: 3px solid #86accf;
}
.home-divider::after {
  right: -1px;
  width: 7px;
  height: 7px;
  border-width: 2px;
}
.home-level-list { gap: 14px; margin-top: 8px; }
.home-level-card {
  grid-template-columns: 84px 1fr 78px;
  gap: 12px;
  min-height: 92px;
  padding: 14px 14px 14px 18px;
  border-radius: 24px;
  border: 1px solid rgba(188, 196, 199, .95);
  background: rgba(252, 249, 244, .96);
  box-shadow: 0 4px 12px rgba(173, 149, 118, .08);
}
.home-level-card::before {
  inset: 10px;
  border-radius: 18px;
  border: 1px dashed rgba(195, 179, 156, .6);
}
.home-level-card.selected {
  border-color: rgba(129, 164, 185, .85);
  box-shadow: 0 0 0 2px rgba(168, 198, 217, .26), 0 7px 15px rgba(173, 149, 118, .1);
}
.home-level-number {
  width: 84px;
  font-size: 52px;
  border-right: 1px solid rgba(196, 196, 188, .9);
}
.home-level-card.tone-mint .home-level-number { color: #77a7a4; }
.home-level-card.tone-teal .home-level-number { color: #6eaeb3; }
.home-level-card.tone-lavender .home-level-number { color: #7d86c1; }
.home-level-copy strong {
  color: #493c31;
  font-size: 18px;
  line-height: 1.1;
}
.home-level-copy small {
  color: #524537;
  font-size: 10px;
  line-height: 1.45;
}
.home-requirements { max-width: 115px; }
.home-inline-reward {
  width: 16px;
  height: 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.home-inline-reward img {
  width: 16px;
  height: 16px;
}
.home-inline-reward i {
  font-size: 13px;
  color: #8a8a8a;
}
.home-reward-slot {
  width: 74px;
  height: 74px;
  border-radius: 20px;
  border: 1px dashed rgba(169, 191, 202, .95);
  background: #edf1f5;
  box-shadow: none;
}
.home-reward-slot img {
  max-width: 48px;
  max-height: 48px;
  width: auto;
  height: auto;
}
.home-reward-slot.hidden i,
.home-reward-slot.revealed i {
  font-size: 34px;
}
.home-level-card.tone-lavender .home-reward-slot img[src*='final-envelope-collectible'] {
  max-width: 52px;
  max-height: 36px;
}
.home-level-card.tone-teal .home-reward-slot,
.home-level-card.tone-lavender .home-reward-slot,
.home-level-card.tone-mint .home-reward-slot {
  background: #edf1f5;
}
.home-entry-button {
  margin-top: 18px;
  height: 54px;
  border-radius: 20px;
  background: linear-gradient(180deg, #b4cfa0 0%, #a9c591 100%);
  border: 1px solid rgba(145, 172, 129, .8);
  color: #fff;
  font-size: 17px;
  font-weight: 850;
}
.home-entry-button::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.55);
}
.home-entry-button:disabled {
  background: linear-gradient(180deg, #c5d4be 0%, #bdccb6 100%);
}
.ice-collectible {
  width: 110px;
  height: 90px;
  display: grid;
  place-items: center;
  margin: 12px auto 2px;
}
.ice-collectible img {
  width: 84px;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.12));
}
.ice-collectible span,
.ice-collectible i {
  display: none;
}
@media (max-width: 420px) {
  .home-card.home-scrapbook-card { width: min(100%, 392px); padding: 18px 16px 20px; }
  .home-header { padding: 12px 54px 16px 12px; }
  .home-header h1 { font-size: 29px; }
  .home-level-card { grid-template-columns: 78px 1fr 72px; padding: 13px 12px 13px 15px; }
  .home-level-number { width: 78px; font-size: 48px; }
  .home-reward-slot { width: 72px; height: 72px; }
  .home-entry-button { font-size: 16px; }
  .home-deco-note-group { width: 78px; right: 10px; top: 83px; }
}
.home-entry-button { position: relative; overflow: hidden; }

/* v65 / v15 home-only visual rebuild. Logic and all level scenes are unchanged. */
.home-v15-overlay {
  padding: 10px;
  background: #ECD8BA;
  backdrop-filter: none;
}
.home-card.home-scrapbook-card.home-v15-board {
  position: relative;
  width: min(calc(100vw - 20px), 410px);
  aspect-ratio: 416 / 667;
  height: auto;
  max-height: calc(100% - 4px);
  padding: 0;
  border: 0;
  border-radius: 26px;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  isolation: isolate;
  text-align: left;
  font-family: var(--font-geist-sans), "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #4a3d32;
}
.home-card.home-scrapbook-card.home-v15-board::before,
.home-card.home-scrapbook-card.home-v15-board::after,
.home-v15-board .home-paper-layer,
.home-v15-board .home-deco-tape,
.home-v15-board .home-deco-clip,
.home-v15-board .home-deco-image {
  display: none !important;
}
.home-v15-board-bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}
.home-v15-deco {
  position: absolute;
  z-index: 6;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
  transform-origin: center;
}

.home-float-soft { animation: home-float-soft 4.4s ease-in-out infinite; }
.home-clip-wiggle { animation: home-clip-wiggle 3.1s ease-in-out infinite; transform-origin: 74% 10%; }
.home-pen-sway { animation: home-pen-sway 3.8s ease-in-out infinite; transform-origin: 18% 86%; }
.home-envelope-bob { animation: home-envelope-bob 4s ease-in-out infinite; }
.home-v15-envelope-letter { display: none; }
.home-v15-petal {
  position: absolute;
  z-index: 16;
  top: -46px;
  width: 12px;
  height: 18px;
  border-radius: 70% 50% 70% 50%;
  background: linear-gradient(180deg, rgba(195, 169, 215, .95) 0%, rgba(168, 208, 239, .92) 100%);
  box-shadow: 0 2px 5px rgba(96, 91, 104, .12);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.home-v15-petal.petal-1 { right: -8px; animation: home-petal-fall 12.8s ease-in-out infinite 0s both; }
.home-v15-petal.petal-2 { right: 18px; width: 10px; height: 15px; animation: home-petal-fall 13.6s ease-in-out infinite 2.1s both; }
.home-v15-petal.petal-3 { right: 52px; width: 9px; height: 14px; animation: home-petal-fall 14.2s ease-in-out infinite 4.3s both; }
.home-v15-petal.petal-4 { right: -22px; width: 11px; height: 16px; animation: home-petal-fall 13.2s ease-in-out infinite 6.4s both; }
.home-v15-petal.petal-5 { right: 78px; width: 8px; height: 13px; animation: home-petal-fall 14.8s ease-in-out infinite 8.5s both; }
.home-v15-petal.petal-6 { right: 34px; width: 10px; height: 14px; animation: home-petal-fall 13.9s ease-in-out infinite 10.6s both; }
.home-v15-top-tape { top: 9px; left: 18px; width: 94px; transform: rotate(-7deg); }
.home-v15-top-flower { top: 59px; left: 52px; width: 52px; transform: rotate(-4deg); }
.home-v15-paperclip { top: 11px; right: 49px; width: 35px; transform: rotate(10deg); }
.home-v15-sticky-note { top: 76px; right: 18px; width: 55px; transform: rotate(-6deg); }
.home-v15-title-flower { top: 136px; right: 6px; width: 60px; transform: rotate(5deg); }

.home-v15-header {
  position: absolute;
  z-index: 4;
  top: 124px;
  left: 52px;
  right: 52px;
  padding: 0;
  text-align: center;
}
.home-v15-header h1 {
  margin: 0;
  color: #4a4036;
  font-family: "Trebuchet MS", "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .02em;
  white-space: nowrap;
}
.home-v15-subtitle {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.home-v15-subtitle img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: 0 0 auto;
}
.home-v15-board .home-lead {
  margin: 0;
  color: #5b5045;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .025em;
  white-space: nowrap;
}
.home-v15-divider {
  display: block;
  width: 160px;
  height: 14px;
  object-fit: fill;
  margin: 9px auto 0;
}

.home-v15-level-list {
  position: absolute;
  z-index: 4;
  top: 186px;
  left: 41px;
  right: 41px;
  display: grid;
  gap: 6px;
  margin: 0;
}
.home-level-card.home-v15-level-card {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 66px;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 109px;
  min-height: 0;
  padding: 17px 18px 17px 19px;
  margin: 0;
  border: 0;
  border-radius: 27px;
  background: transparent;
  box-shadow: none;
  color: #4e443a;
  overflow: visible;
  cursor: pointer;
  text-align: left;
  transform: translateZ(0);
  transition: transform .14s ease, filter .14s ease;
}
.home-level-card.home-v15-level-card::before { display: none !important; }
.home-level-card.home-v15-level-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 7px 8px;
  border: 2px solid transparent;
  border-radius: 22px;
  pointer-events: none;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.home-level-card.home-v15-level-card.selected {
  transform: none;
  box-shadow: none;
  filter: none;
}
.home-level-card.home-v15-level-card.selected .home-v15-card-base {
  filter: brightness(0.93) saturate(0.95);
}
.home-level-card.home-v15-level-card.selected::after {
  border-color: rgba(92, 84, 74, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.home-level-card.home-v15-level-card:active { transform: none; }
.home-v15-card-base {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.home-v15-card-deco {
  position: absolute;
  z-index: 5;
  display: block;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}
.home-v15-card1-tape { top: -10px; left: -12px; width: 58px; transform: rotate(-8deg); }
.home-v15-card1-flower-left { left: -15px; bottom: -10px; width: 60px; }
.home-v15-card1-flower-right { right: -14px; bottom: -10px; width: 47px; }
.home-v15-card2-tape { top: -9px; right: -17px; width: 55px; transform: rotate(18deg) scaleX(-1); }
.home-v15-card2-flower-left { left: -15px; bottom: -9px; width: 51px; transform: rotate(-4deg); }
.home-v15-card3-tape { top: -10px; left: -14px; width: 43px; transform: rotate(-12deg); }
.home-v15-card3-flower-right { right: -16px; bottom: -9px; width: 51px; transform: rotate(4deg); }

.home-v15-board .home-level-number {
  position: relative;
  z-index: 3;
  width: 70px;
  height: 58px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0;
  border-right: 1px solid rgba(174, 189, 184, .75);
  color: #6fa3a0;
  font-family: "Trebuchet MS", "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 44px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -.05em;
  transform: translateY(-1px);
}
.home-v15-board .home-level-card.tone-teal .home-level-number { color: #68a9ad; }
.home-v15-board .home-level-card.tone-lavender .home-level-number { color: #7b83bc; }
.home-v15-board .home-level-copy {
  position: relative;
  z-index: 3;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  align-self: center;
}
.home-v15-board .home-level-copy strong {
  color: #4a4036;
  font-family: "Trebuchet MS", "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}
.home-v15-board .home-level-copy small {
  color: #5d5147;
  font-size: 10.5px;
  line-height: 1.35;
  font-weight: 500;
  white-space: nowrap;
}
.home-v15-board .home-level-copy .home-requirements {
  display: flex;
  max-width: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
}
.home-v15-board .home-inline-reward {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.home-v15-board .home-inline-reward img { width: 16px; height: 16px; object-fit: contain; }
.home-v15-board .home-inline-reward i {
  color: #7f8586;
  font-size: 13px;
  line-height: 1;
  font-style: normal;
  font-weight: 800;
}

.home-v15-board .home-reward-slot {
  position: relative;
  z-index: 3;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent !important;
  box-shadow: none;
  overflow: visible;
}
.home-v15-reward-base {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
}
.home-v15-reward-icon,
.home-v15-question-icon,
.home-v15-lock-icon,
.home-v15-envelope-reward,
.home-v15-lavender-question {
  position: relative;
  z-index: 1;
}
.home-v15-board .home-v15-reward-icon {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  object-fit: contain;
}
.home-v15-board .home-v15-crown-icon { width: 35px !important; height: 35px !important; }
.home-v15-board .home-v15-question-icon {
  width: 25px !important;
  height: 39px !important;
  max-width: 25px !important;
  max-height: 39px !important;
  object-fit: contain;
}
.home-v15-board .home-v15-lock-icon {
  width: 36px !important;
  height: 44px !important;
  max-width: 36px !important;
  max-height: 44px !important;
  object-fit: contain;
}
.home-v15-board .home-v15-envelope-reward {
  width: 44px !important;
  height: 32px !important;
  max-width: 44px !important;
  max-height: 32px !important;
  object-fit: contain;
}
.home-v15-lavender-question {
  color: #777bbb;
  font-size: 34px;
  line-height: 1;
  font-weight: 760;
}

.home-entry-button.home-v15-entry-button {
  position: absolute;
  z-index: 5;
  left: 85px;
  right: 85px;
  bottom: 33px;
  width: auto;
  height: 69px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 26px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fffdf8;
  font-family: "Trebuchet MS", "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 19px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
}
.home-entry-button.home-v15-entry-button::before { display: none !important; }
.home-v15-entry-base {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.home-v15-entry-base-normal,
.home-v15-entry-base-pressed {
  transition: opacity .04s linear;
}
.home-v15-entry-base-normal { opacity: 1; }
.home-v15-entry-base-pressed { opacity: 0; }
.home-v15-entry-button:active .home-v15-entry-base-normal,
.home-v15-entry-button.pressed .home-v15-entry-base-normal { opacity: 0; }
.home-v15-entry-button:active .home-v15-entry-base-pressed,
.home-v15-entry-button.pressed .home-v15-entry-base-pressed { opacity: 1; }
.home-v15-entry-button span { position: relative; z-index: 1; transform: translateY(-1px); }
.home-v15-entry-button.pressed span { transform: translateY(0px); }
.home-entry-button.home-v15-entry-button:disabled {
  background: transparent;
  opacity: .62;
  filter: saturate(.6);
  cursor: not-allowed;
}

.home-v15-note-paper { z-index: 3; left: 18px; bottom: 8px; width: 120px; transform: rotate(-2.6deg); }
.home-v15-pen { z-index: 4; left: 4px; bottom: 4px; width: 82px; transform: rotate(1deg); }
.home-v15-button-tape { z-index: 5; left: 88px; bottom: 84px; width: 88px; transform: rotate(-10deg); }
.home-v15-button-flower { right: 77px; bottom: 10px; width: 55px; transform: rotate(4deg); }
.home-v15-envelope { right: 12px; bottom: 8px; width: 94px; transform: rotate(3deg); }

@media (max-height: 710px) {
  .home-card.home-scrapbook-card.home-v15-board {
    width: min(calc(100vw - 18px), 390px);
    max-height: calc(100% - 4px);
  }
}
@media (max-width: 420px) {
  .home-v15-overlay { padding: 6px; }
  .home-card.home-scrapbook-card.home-v15-board { width: min(calc(100vw - 12px), 404px); }
  .home-v15-header { top: 124px; left: 50px; right: 50px; }
  .home-v15-header h1 { font-size: 28px; }
  .home-v15-level-list { left: 39px; right: 39px; top: 185px; gap: 8px; }
  .home-level-card.home-v15-level-card { height: 108px; grid-template-columns: 69px minmax(0,1fr) 64px; padding-left: 19px; }
  .home-v15-board .home-level-number { width: 69px; font-size: 42px; }
  .home-v15-board .home-level-copy strong { font-size: 17px; }
  .home-v15-board .home-reward-slot { width: 64px; height: 64px; }
  .home-entry-button.home-v15-entry-button { left: 82px; right: 82px; bottom: 32px; height: 66px; font-size: 18px; }
}

/* v71 Level 3 scrapbook splash and popup cleanup */
.drive-stage[data-phase="level3-intro"] > .level-back-button { display: none; }
.v22-modal { background: transparent !important; backdrop-filter: none !important; }
.v22-modal article {
  background-image: url('/assets-1.0-v31/level3/level3_popup_frame.webp');
  box-shadow: none;
}
.v23-narration {
  background-image: url('/assets-1.0-v31/level3/level3_popup_frame.webp');
  box-shadow: none;
}
.level3-splash-overlay {
  padding: 0 !important;
  background: #ECD8BA !important;
  backdrop-filter: none !important;
  overflow: hidden;
}
.level3-splash-board {
  width: 100%; height: 100%; position: relative; overflow: hidden;
  color: #3f3c37; background: #ECD8BA;
}
.level3-splash-stack {
  position: absolute; z-index: 1; left: -7%; top: 2%; width: 114%; height: 96%;
  object-fit: fill; pointer-events: none;
}
.level3-splash-back {
  position: absolute; z-index: 18; left: 14px; top: max(18px, env(safe-area-inset-top));
  width: 62px; height: 60px; padding: 0; border: 0; background: transparent;
  filter: drop-shadow(0 5px 7px rgba(100,77,57,.15)); cursor: pointer;
}
.level3-splash-back img { width: 100%; height: 100%; object-fit: contain; }
.level3-splash-top-tape {
  position: absolute; z-index: 6; left: 47px; top: 15px; width: 78px;
  transform: rotate(6deg); pointer-events: none;
}
.level3-splash-top-flower {
  position: absolute; z-index: 7; left: 50px; top: 57px; width: 54px;
  transform: rotate(-4deg); pointer-events: none;
}
.level3-splash-panel {
  position: absolute; z-index: 3; left: 37px; right: 34px; top: 144px;
  width: calc(100% - 71px); height: 620px; object-fit: fill; pointer-events: none;
}
.level3-splash-content {
  position: absolute; z-index: 8; left: 52px; right: 50px; top: 180px; height: 540px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.level3-splash-kicker {
  height: 34px; display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 4px; color: #39918c;
}
.level3-splash-kicker img { width: 22px; height: 22px; object-fit: contain; }
.level3-splash-kicker b {
  font-family: "Trebuchet MS", "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 30px; line-height: 1; letter-spacing: .08em; font-weight: 800;
}
.level3-splash-dog {
  width: 142px; height: 108px; margin-top: 20px; object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(96,77,61,.12));
}
.level3-splash-content h1 {
  margin: 12px 0 0; color: #3f3932;
  font-family: "Trebuchet MS", "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 48px; line-height: 1.05; font-weight: 800; letter-spacing: .08em;
}
.level3-splash-underline { width: 236px; height: 23px; margin-top: 5px; object-fit: fill; }
.level3-splash-content > p {
  margin: 30px 0 0; color: #45413c; font-size: 17px; line-height: 1.72;
  font-weight: 600; letter-spacing: .02em;
}
.level3-splash-start {
  width: 292px; height: 97px; position: relative; display: grid; place-items: center;
  margin-top: 30px; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.level3-splash-start img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill;
}
.level3-splash-start span {
  position: relative; z-index: 2; color: #fffdf7;
  font-family: "Trebuchet MS", "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 27px; line-height: 1; font-weight: 800; letter-spacing: .06em;
  text-shadow: 0 2px 3px rgba(74,103,101,.26);
}
.level3-splash-start:active { transform: translateY(1px) scale(.992); }
.level3-splash-content > small {
  margin-top: 15px; color: #48443e; font-size: 14px; line-height: 1.25;
  font-weight: 600; letter-spacing: .04em;
}
.level3-splash-heart { width: 24px; height: 22px; margin-top: 8px; object-fit: contain; }
.level3-splash-note,
.level3-splash-pen,
.level3-splash-envelope {
  position: absolute; z-index: 10; height: auto; pointer-events: none;
}
.level3-splash-note { left: 2px; bottom: -3px; width: 124px; transform: rotate(-4deg); }
.level3-splash-pen { left: -7px; bottom: 2px; width: 84px; transform: rotate(-1deg); }
.level3-splash-envelope { right: 1px; bottom: -6px; width: 104px; transform: rotate(3deg); }
@media (max-width: 390px) {
  .level3-splash-panel { left: 31px; right: 28px; width: calc(100% - 59px); top: 138px; height: 596px; }
  .level3-splash-content { left: 45px; right: 43px; top: 172px; height: 520px; }
  .level3-splash-kicker b { font-size: 28px; }
  .level3-splash-dog { width: 132px; height: 101px; margin-top: 17px; }
  .level3-splash-content h1 { font-size: 44px; }
  .level3-splash-content > p { font-size: 16px; margin-top: 27px; }
  .level3-splash-start { width: 270px; height: 90px; margin-top: 27px; }
  .level3-splash-start span { font-size: 25px; }
}

/* v72 — level3 ice cave scratch → names → light sequence */
.v72-ice-cave{position:absolute;inset:0;overflow:hidden}
.v72-ice-cave .v22-ice-canvas{z-index:18}
.v72-ice-objects{position:absolute;inset:0;z-index:7;pointer-events:none}
.v72-ice-object{position:absolute;object-fit:contain;opacity:.84;filter:drop-shadow(0 8px 12px rgba(34,83,99,.18));transition:transform .28s ease, opacity .28s ease, filter .28s ease}
.v72-ice-object.dog{left:17%;top:50%;width:29%;height:24%}
.v72-ice-object.spiral{left:44%;top:48%;width:15%;height:15%;filter:drop-shadow(0 0 14px rgba(33,136,240,.24))}
.v72-ice-object.snail{left:64%;top:54%;width:18%;height:16%}
.v72-ice-object.found{opacity:1;transform:scale(1.06);filter:drop-shadow(0 0 20px rgba(233,250,255,.42));animation:v72-ice-object-found .48s ease-out both}

.v72-ice-reflection{opacity:.18;transition:opacity .36s ease}
.v72-ice-reflection.revealed{opacity:.5}
.v72-ice-cave.phase-light .v72-ice-reflection,
.v72-ice-cave.phase-names .v72-ice-reflection{opacity:.42}

.v72-ice-task-panel,
.v72-ice-light-prompt{
  position:absolute;left:50%;transform:translateX(-50%);z-index:22;
  min-width:min(82%, 330px);padding:12px 18px;border-radius:24px;
  color:#ecfbff;background:rgba(45,102,116,.36);backdrop-filter:blur(8px);
  box-shadow:0 12px 24px rgba(25,64,77,.14), inset 0 0 0 1px rgba(236,250,255,.26);
  text-align:center;pointer-events:none;
}
.v72-ice-task-panel{top:7%}
.v72-ice-light-prompt{top:8%}
.v72-ice-task-panel b,
.v72-ice-light-prompt b{display:block;font-size:18px;font-weight:900;letter-spacing:.04em}
.v72-ice-task-panel span,
.v72-ice-light-prompt span{display:block;margin-top:6px;font-size:12px;line-height:1.45;opacity:.96}

.v72-ice-found-list{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);z-index:22;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:84%;pointer-events:none}
.v72-ice-found-list span{padding:7px 12px;border-radius:999px;color:#437584;background:rgba(244,251,253,.86);box-shadow:0 5px 10px rgba(43,74,90,.08);font-size:12px;font-weight:700;opacity:.88;transition:transform .24s ease, opacity .24s ease, color .24s ease, background .24s ease}
.v72-ice-found-list span.found{color:#0a7890;background:rgba(227,253,255,.98);opacity:1;transform:translateY(-2px)}

.v72-ice-name-layer{position:absolute;inset:0;z-index:16;overflow:hidden;pointer-events:none}
.v72-ice-name-item{
  position:absolute;left:var(--left);bottom:-8%;transform:translateX(-50%) translateY(0) scale(.9);
  color:rgba(240,252,255,.96);font-weight:900;font-size:var(--size);letter-spacing:.04em;white-space:nowrap;
  opacity:0;text-shadow:0 2px 18px rgba(72,122,141,.45);
  animation:v72-ice-name-rise var(--duration) cubic-bezier(.22,.61,.36,1) var(--delay) forwards;
}
.v72-ice-name-item.focus{color:#ffffff;text-shadow:0 4px 24px rgba(87,145,168,.5),0 0 36px rgba(255,255,255,.35)}

.v31-ice-exit-hotspot{width:24%!important;height:18%!important;left:38%!important;top:34.5%!important;z-index:24!important}
.v31-ice-exit-hotspot::before{inset:-28%!important;background:radial-gradient(circle at center, rgba(255,233,135,.9) 0%, rgba(255,223,115,.48) 35%, rgba(255,223,115,.12) 60%, rgba(255,223,115,0) 78%)!important;animation:ice-exit-glow 1.55s ease-in-out infinite alternate!important}

@keyframes v72-ice-object-found{0%{transform:scale(.92);opacity:.72}60%{transform:scale(1.1)}100%{transform:scale(1.06);opacity:1}}
@keyframes v72-ice-name-rise{
  0%{opacity:0;transform:translateX(-50%) translateY(28px) scale(.88)}
  14%{opacity:.92}
  45%{opacity:1}
  80%{opacity:.88}
  100%{opacity:0;transform:translateX(-50%) translateY(-500px) scale(1.08)}
}

@media (max-width: 420px){
  .v72-ice-task-panel,
  .v72-ice-light-prompt{min-width:84%;padding:11px 16px}
  .v72-ice-task-panel b,
  .v72-ice-light-prompt b{font-size:16px}
  .v72-ice-task-panel span,
  .v72-ice-light-prompt span{font-size:11px}
  .v72-ice-found-list{bottom:6.5%;gap:6px}
  .v72-ice-found-list span{font-size:11px;padding:6px 10px}
}

/* v73 — Level 3 splash stability / typography / home alignment fixes */
.level3-splash-overlay{
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
}
.level3-splash-board{
  width:min(100vw, 440px)!important;
  height:min(100svh, 880px)!important;
  min-height:620px!important;
  flex:none!important;
  contain:layout paint style;
}
.level3-splash-stack{
  left:-7%!important;
  top:2%!important;
  width:114%!important;
  height:96%!important;
  object-fit:cover!important;
}
.level3-splash-panel{
  left:8.3%!important;
  right:auto!important;
  top:16.4%!important;
  width:83.4%!important;
  height:auto!important;
  aspect-ratio:700 / 1010!important;
  object-fit:contain!important;
}
.level3-splash-top-tape,
.level3-splash-top-flower,
.level3-splash-back,
.level3-splash-dog,
.level3-splash-underline,
.level3-splash-heart,
.level3-splash-note,
.level3-splash-envelope{
  object-fit:contain!important;
}
.level3-splash-content{
  left:11.8%!important;
  right:11.4%!important;
  top:20.45%!important;
  height:61.4%!important;
}
.level3-splash-kicker b{font-size:28px!important;}
.level3-splash-content h1{font-size:44px!important;}
.level3-splash-content > p{font-size:11px!important;line-height:1.72!important;}
.level3-splash-start{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.level3-splash-start img{object-fit:contain!important;}
.level3-splash-start span{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transform:translateY(1px)!important;
  text-align:center!important;
}
.level3-splash-pen{display:none!important;}

.v23-narration.narration-4 p,
.v23-narration.narration-5 p{transform:translateY(-5px);}

.home-entry-button.home-v15-entry-button:disabled{
  pointer-events:none!important;
}
.home-entry-button.home-v15-entry-button:disabled .home-v15-entry-base{
  transform:none!important;
}
.home-entry-button.home-v15-entry-button:disabled span{
  transform:translateY(-1px)!important;
}
.home-v15-board .home-level-number{
  margin-top:0!important;
  align-self:center!important;
  transform:none!important;
}

@media (max-width:390px){
  .level3-splash-kicker b{font-size:26px!important;}
  .level3-splash-content h1{font-size:40px!important;}
  .level3-splash-content > p{font-size:10px!important;}
}

/* v75 — Level 3 ice cave aligned to the supplied render sequence. */
.level-back-button.level3-resource-back{
  width:50px;height:50px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;overflow:visible;
}
.level-back-button.level3-resource-back img{width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(28,48,52,.18))}
.level-back-button.level3-resource-back:active{transform:scale(.96)}

.v74-ice-cave{position:absolute;inset:0;overflow:hidden}
.v74-ice-cave .v22-ice-canvas{z-index:18;transition:opacity .4s ease;touch-action:none}
.v74-ice-name-layer{position:absolute;inset:0;z-index:16;overflow:hidden;pointer-events:none}
.v74-ice-name-item{
  position:absolute;left:var(--left);top:var(--top);
  transform:translate3d(-50%,48px,0) scale(.95);
  color:rgba(255,255,255,.96);font-size:var(--size);font-weight:400;line-height:1;letter-spacing:.01em;white-space:nowrap;
  opacity:0;text-shadow:0 2px 10px rgba(39,89,105,.22);
  animation:v75-ice-name-float var(--duration) cubic-bezier(.22,.61,.36,1) var(--delay) forwards;
  will-change:transform,opacity;
}
.v74-ice-name-item.focus{font-weight:500;color:#fff;text-shadow:0 2px 16px rgba(38,92,111,.32),0 0 22px rgba(255,255,255,.22)}
@keyframes v75-ice-name-float{
  0%{opacity:0;transform:translate3d(-50%,72vh,0) scale(.9)}
  16%{opacity:.68}
  28%{opacity:1;transform:translate3d(-50%,0,0) scale(1)}
  74%{opacity:1;transform:translate3d(-50%,0,0) scale(1)}
  88%{opacity:.78;transform:translate3d(-50%,-10px,0) scale(1.01)}
  100%{opacity:0;transform:translate3d(-50%,-22px,0) scale(1.02)}
}

.v74-ice-exit-hotspot{width:25%!important;height:18%!important;left:37.5%!important;top:30.5%!important;z-index:23!important}
.v74-ice-exit-hotspot::before{inset:-24%!important}
.v74-ice-render-base{
  position:absolute;z-index:6;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center center;pointer-events:none;
}
.v74-ice-asset-preload{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.v74-ice-asset-preload img{width:1px;height:1px;display:block}
.v75-ice-scratch-label{
  position:absolute;z-index:19;left:50%;top:10.4%;transform:translateX(-50%);
  color:#f3fbfc;font-size:18px;font-weight:700;letter-spacing:.08em;pointer-events:none;
  text-shadow:0 1px 10px rgba(62,116,128,.45),0 0 18px rgba(255,255,255,.16);
}

/* v76 — Level 3 finish UI, ice-cave mask/name flow, and splash stability. */
.v75-ice-cave .v22-ice-canvas{
  opacity:1!important;
  transition:none!important;
  mix-blend-mode:normal!important;
  isolation:isolate;
  will-change:auto!important;
}

.v74-ice-name-item{
  top:auto!important;
  bottom:-12%!important;
  transform:translate3d(-50%,0,0) scale(.94);
  animation:v76-ice-name-full-rise var(--duration) cubic-bezier(.22,.61,.36,1) var(--delay) forwards!important;
}
@keyframes v76-ice-name-full-rise{
  0%{opacity:0;transform:translate3d(-50%,12vh,0) scale(.92)}
  10%{opacity:.68}
  20%{opacity:1}
  76%{opacity:1}
  90%{opacity:.72}
  100%{opacity:0;transform:translate3d(-50%,-124vh,0) scale(1.055)}
}

.v23-narration{
  aspect-ratio:360 / 168;
  min-height:168px!important;
  height:auto!important;
  box-sizing:border-box;
  flex-shrink:0;
}
.v23-narration.narration-4 p,
.v23-narration.narration-5 p,
.v23-narration.narration-8 p,
.v23-narration.narration-10 p{
  transform:translateY(-5px)!important;
}

.level3-splash-board{
  background:#ECD8BA!important;
  contain:layout paint size style!important;
}
.level3-splash-stack{display:none!important;}
.level3-splash-back{width:62px!important;height:60px!important;}
.level3-splash-top-tape{width:78px!important;height:auto!important;aspect-ratio:286 / 153;}
.level3-splash-top-flower{width:54px!important;height:auto!important;aspect-ratio:1 / 1;}
.level3-splash-panel{aspect-ratio:700 / 1010!important;}
.level3-splash-dog{aspect-ratio:132 / 101!important;}
.level3-splash-underline{aspect-ratio:236 / 23!important;}
.level3-splash-heart{aspect-ratio:24 / 22!important;}
.level3-splash-note{aspect-ratio:.72!important;}
.level3-splash-envelope{aspect-ratio:1!important;}

.level3-finish-overlay.level3-finish-v76{
  padding:10px!important;
  overflow:hidden!important;
  background:#f5f3ef!important;
  backdrop-filter:none!important;
}
.level3-finish-v76-card{
  width:min(94vw,470px)!important;
  height:auto!important;
  max-height:94svh!important;
  position:relative!important;
  overflow:visible!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  color:#472716!important;
  background:transparent!important;
  box-shadow:none!important;
}
.level3-finish-v76-panel{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  pointer-events:none;
}
.level3-finish-v76-daisy{
  position:absolute;
  z-index:4;
  top:9.6%;
  right:5.2%;
  width:19%;
  height:auto;
  object-fit:contain;
  pointer-events:none;
  transform:rotate(2deg);
  transform-origin:52% 86%;
  animation:v122-daisy-sway 3.2s ease-in-out infinite;
}
@keyframes v122-daisy-sway{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-2px) rotate(4deg)}
}
.level3-finish-v76-content{
  position:absolute;
  z-index:3;
  inset:0;
  display:block;
  color:#462718;
  text-align:center;
}
.level3-finish-v76-kicker{
  position:absolute!important;
  left:0;
  right:0;
  top:14.3%!important;
  margin:0!important;
  color:#2d68a6!important;
  font:700 clamp(10px,2.6vw,14px)/1.1 "Trebuchet MS","Avenir Next",sans-serif!important;
  letter-spacing:.14em!important;
}
.level3-finish-v76-card h2{
  position:absolute!important;
  left:0;
  right:0;
  top:19.6%!important;
  margin:0!important;
  color:#4b2816!important;
  font-family:"PingFang SC","Microsoft YaHei","Trebuchet MS",sans-serif!important;
  font-size:clamp(26px,7.2vw,38px)!important;
  font-weight:750!important;
  line-height:1.08!important;
  letter-spacing:.035em!important;
}
.level3-finish-v76-dog{
  position:absolute!important;
  left:50%;
  top:29.2%!important;
  width:31%!important;
  height:auto;
  margin:0!important;
  object-fit:contain;
  filter:drop-shadow(0 6px 7px rgba(83,60,44,.14));
  transform:translateX(-50%);
}
.level3-finish-v76-reward{
  position:absolute!important;
  left:50%;
  top:48.4%!important;
  width:76%!important;
  height:auto;
  aspect-ratio:4.1 / 1;
  margin:0!important;
  display:grid;
  place-items:center;
  transform:translateX(-50%);
}
.level3-finish-v76-reward-bg{
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
}
.level3-finish-v76-reward-content{
  position:relative;
  z-index:2;
  width:64%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8%;
  transform:translateY(-1px);
}
.level3-finish-v76-envelope{
  width:43px;
  height:43px;
  flex:0 0 43px;
  object-fit:contain;
  filter:drop-shadow(0 3px 5px rgba(99,75,51,.12));
}
.level3-finish-v76-reward-content div{
  min-width:88px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}
.level3-finish-v76-reward-content small{
  color:#513223!important;
  font-size:clamp(9px,2.35vw,11px)!important;
  line-height:1.2;
}
.level3-finish-v76-reward-content b{
  margin-top:3px;
  color:#542719!important;
  font-size:clamp(17px,4.9vw,24px)!important;
  font-weight:650;
  line-height:1;
}
.level3-finish-v76-copy{
  position:absolute!important;
  left:6%;
  right:6%;
  top:64.1%!important;
  margin:0!important;
  color:#4c2b1b!important;
  font-size:clamp(11px,3vw,15px)!important;
  line-height:1.75!important;
  font-weight:550;
  letter-spacing:.02em;
}
.level3-finish-v76-home{
  position:absolute!important;
  left:50%;
  top:73.4%!important;
  width:76%!important;
  height:auto!important;
  aspect-ratio:4.5 / 1;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  color:#175f5c!important;
  background:transparent!important;
  box-shadow:none!important;
  cursor:pointer;
  transform:translateX(-50%);
}
.level3-finish-v76-home img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
}
.level3-finish-v76-home span{
  position:relative;
  z-index:2;
  color:#17615d;
  font-size:clamp(18px,5.1vw,26px);
  font-weight:750;
  line-height:1;
  transform:translateY(-2px);
}
.level3-finish-v76-home:active{transform:translateX(-50%) scale(.988)!important;}
.level3-finish-v76-letter{
  position:absolute!important;
  left:50%;
  top:85.9%!important;
  width:auto!important;
  margin:0!important;
  padding:6px 16px!important;
  color:#2669aa!important;
  background:transparent!important;
  font-size:clamp(12px,3vw,16px)!important;
  font-weight:600;
  box-shadow:none!important;
  transform:translateX(-50%);
}

@media (max-width:420px){
  .level3-finish-v76-card{width:min(94vw,430px)!important;max-height:92svh!important;}
  .level3-finish-v76-kicker{top:14.1%!important;}
  .level3-finish-v76-card h2{top:19.5%!important;}
  .level3-finish-v76-dog{top:29.1%!important;}
  .level3-finish-v76-reward{top:48.2%!important;}
  .level3-finish-v76-copy{top:64%!important;}
  .level3-finish-v76-home{top:73.2%!important;}
  .level3-finish-v76-letter{top:85.7%!important;}
}

/* v78 — Level 3 splash readability and ice-name visibility fixes. */
.level3-splash-panel{
  top:calc(16.4% - 20px)!important;
}
.level3-splash-content{
  top:calc(20.45% - 20px)!important;
  height:64.2%!important;
}
.level3-splash-kicker b{
  font-size:24px!important;
  letter-spacing:.06em!important;
}
.level3-splash-content h1{
  font-size:34px!important;
  letter-spacing:.03em!important;
}
.level3-splash-content > p{
  margin-top:22px!important;
  color:#686961!important;
  font-size:10px!important;
  line-height:1.64!important;
  font-weight:500!important;
}
.level3-splash-start{
  width:min(76vw,288px)!important;
  min-width:244px!important;
  height:auto!important;
  aspect-ratio:292 / 97!important;
  margin-top:20px!important;
}
.level3-splash-start span{
  font-size:20px!important;
  letter-spacing:.04em!important;
  transform:translateY(0)!important;
}
.level3-splash-content > small{
  margin-top:9px!important;
  color:#6d6b67!important;
  font-size:9px!important;
  line-height:1.2!important;
  font-weight:400!important;
  letter-spacing:.01em!important;
}
@media (max-width:390px){
  .level3-splash-panel{top:calc(16.4% - 20px)!important;}
  .level3-splash-content{top:calc(20.45% - 20px)!important;height:64.5%!important;}
  .level3-splash-kicker b{font-size:22px!important;}
  .level3-splash-content h1{font-size:32px!important;}
  .level3-splash-content > p{font-size:9px!important;line-height:1.6!important;}
  .level3-splash-start{width:min(74vw,272px)!important;min-width:236px!important;}
  .level3-splash-start span{font-size:18px!important;}
  .level3-splash-content > small{font-size:8px!important;font-weight:400!important;}
}

.v74-ice-name-layer{
  z-index:20!important;
}
.v74-ice-name-item{
  color:rgba(255,255,255,.98)!important;
  font-weight:600!important;
  text-shadow:0 2px 12px rgba(35,82,95,.42),0 0 22px rgba(255,255,255,.18)!important;
  will-change:transform,opacity!important;
}
.v74-ice-name-item.focus{
  color:#fff!important;
  font-weight:700!important;
  text-shadow:0 2px 18px rgba(33,78,94,.52),0 0 28px rgba(255,255,255,.32)!important;
}

/* v79 — requested Level 3 splash, finish, and ice-name motion corrections. */
.level3-splash-kicker{
  transform:translateY(10px)!important;
}
.level3-splash-content > p{
  transform:translateY(-10px)!important;
}
.level3-splash-start span{
  transform:translateY(-6px)!important;
}
.level3-splash-hint{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:9px;
  transform:translateY(-15px);
}
.level3-splash-hint > small{
  color:#6d6b67!important;
  font-size:9px!important;
  line-height:1.2!important;
  font-weight:400!important;
  letter-spacing:.01em!important;
}
.level3-splash-hint .level3-splash-heart{
  margin-top:8px!important;
}

.level3-finish-v76-card h2{
  top:calc(19.6% + 5px)!important;
}
.level3-finish-v76-home{
  width:min(42%,172px)!important;
  min-width:150px!important;
  aspect-ratio:2.55 / 1!important;
  overflow:visible!important;
}
.level3-finish-v76-home img{
  display:none!important;
}
.level3-finish-v76-home::before{
  content:"";
  position:absolute;
  inset:0;
  border-style:solid;
  border-width:22px 56px;
  border-image-source:url('/assets-1.0-v31/level3/finish/home_button_blank.png');
  border-image-slice:58 160 fill;
  border-image-width:22px 56px;
  border-image-repeat:stretch;
  pointer-events:none;
}
.level3-finish-v76-letter{
  transform:translate(-50%,-5px)!important;
}

/* render2 is a static reference with baked-in names; the live sequence uses
   render1 plus this independently animated layer. */
.v74-ice-name-item{
  animation-name:v79-ice-name-rise!important;
  animation-timing-function:cubic-bezier(.22,.61,.36,1)!important;
  animation-duration:var(--duration)!important;
  animation-delay:var(--delay)!important;
  animation-fill-mode:both!important;
}
@keyframes v79-ice-name-rise{
  0%{opacity:0;transform:translate3d(-50%,12vh,0) scale(.92)}
  12%{opacity:.72}
  22%{opacity:1}
  72%{opacity:1}
  88%{opacity:.68}
  100%{opacity:0;transform:translate3d(-50%,-124vh,0) scale(1.055)}
}
@media (prefers-reduced-motion:reduce){
  .v74-ice-name-item{
    animation-duration:var(--duration)!important;
    animation-delay:var(--delay)!important;
  }
}
@media (max-width:420px){
  .level3-finish-v76-card h2{top:calc(19.5% + 5px)!important;}
}
@media (max-width:390px){
  .level3-splash-start span{transform:translateY(-5px)!important;}
  .level3-splash-hint > small{font-size:8px!important;}
}

/* v80 — grouped splash offset, finish ambience, and mobile ice-name fix. */
.level3-splash-intro-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:0 0 auto;
  transform:translateY(15px);
}
.level3-splash-intro-copy > p{
  margin:22px 0 0!important;
  color:#686961!important;
  font-size:10px!important;
  line-height:1.64!important;
  font-weight:500!important;
  letter-spacing:.02em;
  transform:translateY(-10px)!important;
}
.level3-finish-overlay.level3-finish-v76{
  background:#E0CFBB!important;
}
.level3-finish-petal{
  z-index:8;
}
.level3-finish-v76-card{
  z-index:3;
}
.v74-ice-name-item{
  bottom:-2%!important;
  transform:translate3d(-50%,0,0) scale(.94);
  backface-visibility:hidden;
}
@keyframes v79-ice-name-rise{
  0%{opacity:0;transform:translate3d(-50%,10vh,0) scale(.92)}
  12%{opacity:.72}
  22%{opacity:1}
  72%{opacity:1}
  88%{opacity:.68}
  100%{opacity:0;transform:translate3d(-50%,-118vh,0) scale(1.055)}
}
@media (max-width:390px){
  .level3-splash-intro-copy > p{font-size:9px!important;line-height:1.6!important;}
  .v74-ice-name-layer{inset:-1px!important;}
}

/* v81 — lighter, faster, progressively scaled ice-name sequence. */
.v74-ice-name-item,
.v74-ice-name-item.focus{
  font-family:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",sans-serif!important;
  font-weight:300!important;
}

/* v82 — immediate light prompt, stricter scratch coverage, earlier petals. */
@keyframes v79-ice-name-rise{
  0%{opacity:0;transform:translate3d(-50%,10vh,0) scale(.92)}
  12%{opacity:.72}
  22%{opacity:1}
  70%{opacity:1}
  78%{opacity:.55}
  82%{opacity:0;transform:translate3d(-50%,-118vh,0) scale(1.055)}
  100%{opacity:0;transform:translate3d(-50%,-118vh,0) scale(1.055)}
}
.home-v15-petal.petal-1{animation:home-petal-fall 12.8s ease-in-out infinite -1.2s both;}
.home-v15-petal.petal-2{animation:home-petal-fall 13.6s ease-in-out infinite .2s both;}
.home-v15-petal.petal-3{animation:home-petal-fall 14.2s ease-in-out infinite 1.4s both;}
.home-v15-petal.petal-4{animation:home-petal-fall 13.2s ease-in-out infinite 2.6s both;}
.home-v15-petal.petal-5{animation:home-petal-fall 14.8s ease-in-out infinite 3.8s both;}
.home-v15-petal.petal-6{animation:home-petal-fall 13.9s ease-in-out infinite 5s both;}

/* v83 — the final name animation event now owns the light-prompt handoff. */
@keyframes v79-ice-name-rise{
  0%{opacity:0;transform:translate3d(-50%,10vh,0) scale(.92)}
  14.6%{opacity:.72}
  26.8%{opacity:1}
  85.4%{opacity:1}
  95.1%{opacity:.55}
  100%{opacity:0;transform:translate3d(-50%,-118vh,0) scale(1.055)}
}


/* v88 — stronger blue-dog head wobble on Level 3 intro + finish. */
.level3-splash-dog{
  transform-origin:50% 60%;
  animation:level3-v88-dog-head-wobble .72s ease-in-out infinite alternate!important;
  will-change:transform;
}
.level3-finish-v76-dog{
  transform-origin:50% 60%;
  animation:level3-v88-finish-dog-head-wobble .72s ease-in-out infinite alternate!important;
  will-change:transform;
}
@keyframes level3-v88-dog-head-wobble{
  0%{transform:translateY(2px) rotate(-13deg) scale(1.01)}
  50%{transform:translateY(-2px) rotate(2deg) scale(1.035)}
  100%{transform:translateY(1px) rotate(13deg) scale(1.01)}
}
@keyframes level3-v88-finish-dog-head-wobble{
  0%{transform:translateX(-50%) translateY(2px) rotate(-13deg) scale(1.01)}
  50%{transform:translateX(-50%) translateY(-2px) rotate(2deg) scale(1.035)}
  100%{transform:translateX(-50%) translateY(1px) rotate(13deg) scale(1.01)}
}
@media (prefers-reduced-motion:reduce){
  .level3-splash-dog{animation:none!important;}
  .level3-finish-v76-dog{animation:none!important;}
}


/* v89 — audio timing polish, constellation starlight, yellow-white crystal, letter petals. */
.constellation-choice{overflow:visible!important;isolation:isolate;}
.constellation-choice img{
  position:relative;z-index:2;
  animation:v89-constellation-starlight 1.55s ease-in-out infinite alternate;
  will-change:filter,opacity;
}
.constellation-choice:nth-child(2) img{animation-delay:-.48s;}
.constellation-choice:nth-child(3) img{animation-delay:-.92s;}
.constellation-star-glints{position:absolute;inset:-10%;z-index:3;pointer-events:none;}
.constellation-star-glints i{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff,0 0 13px rgba(178,224,255,.92);animation:v89-star-glint 1.15s ease-in-out infinite;}
.constellation-star-glints i:nth-child(1){left:16%;top:24%;animation-delay:-.12s;}
.constellation-star-glints i:nth-child(2){right:13%;top:39%;width:4px;height:4px;animation-delay:-.56s;}
.constellation-star-glints i:nth-child(3){left:47%;bottom:13%;width:3px;height:3px;animation-delay:-.84s;}
@keyframes v89-constellation-starlight{
  from{filter:drop-shadow(0 0 5px rgba(185,225,255,.55));opacity:.9}
  to{filter:drop-shadow(0 0 10px rgba(230,248,255,.95)) drop-shadow(0 0 20px rgba(125,200,255,.62));opacity:1}
}
@keyframes v89-star-glint{0%,100%{opacity:.18;transform:scale(.55)}50%{opacity:1;transform:scale(1.45)}}

/* Scholar crystal: replace the old blue/purple glow with a warm yellow-white light. */
.v22-discovery.scholar img{animation:v89-scholar-yellow-white 1.05s ease-in-out infinite alternate!important;}
@keyframes v89-scholar-yellow-white{
  from{transform:scale(1);filter:drop-shadow(0 0 5px rgba(255,250,216,.62)) drop-shadow(0 0 8px rgba(255,224,112,.35))}
  to{transform:scale(1.07);filter:drop-shadow(0 0 11px rgba(255,255,245,.98)) drop-shadow(0 0 22px rgba(255,215,88,.88))}
}

/* During "再看一次信", keep the loading guard below the already-visible letter layer. */
.v34-room-bg-guard{z-index:12!important;}
.letter-modal{overflow:hidden;}
.letter-modal .letter-animation-stage{position:relative;z-index:3;}
.letter-modal .finish-letter-button{z-index:4;}
.letter-petal-field{position:absolute;z-index:2;inset:0;overflow:hidden;pointer-events:none;}
.letter-read-petal{z-index:2!important;}
.letter-read-petal.petal-1{right:-8px;animation:home-petal-fall 11.9s ease-in-out infinite -1.1s both!important;}
.letter-read-petal.petal-2{right:13%;animation:home-petal-fall 12.7s ease-in-out infinite .1s both!important;}
.letter-read-petal.petal-3{right:27%;animation:home-petal-fall 13.3s ease-in-out infinite 1.2s both!important;}
.letter-read-petal.petal-4{right:42%;animation:home-petal-fall 12.2s ease-in-out infinite 2.3s both!important;}
.letter-read-petal.petal-5{right:58%;animation:home-petal-fall 13.8s ease-in-out infinite 3.4s both!important;}
.letter-read-petal.petal-6{right:74%;animation:home-petal-fall 12.9s ease-in-out infinite 4.5s both!important;}
.letter-read-petal.petal-7{right:90%;width:9px;height:14px;animation:home-petal-fall 13.5s ease-in-out infinite 5.6s both!important;}

@media (prefers-reduced-motion:reduce){
  .constellation-choice img,.constellation-star-glints i,.v22-discovery.scholar img,.letter-read-petal{animation:none!important;}
}

/* v89.1 — keep the already-known final-home art behind the letter modal during instant replay. */
.level3-room-overlay{background:#6b9da8 url("/assets-1.0-v31/level3/level3_scene11_bg.webp") center/cover no-repeat!important;}


/* v90 — Ithaca discovery asset swap, sparkle glints, home pen unclipped, Cornell BG cleanup, office screen alignment. */
.home-v15-pen{left:10px!important;bottom:11px!important;width:84px!important;transform:rotate(1deg)!important;}

.v22-discovery.title,.v22-discovery.scholar{padding:0!important;border:0!important;clip-path:none!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;}
.v22-discovery.title{left:17%!important;top:49.5%!important;width:90px!important;height:90px!important;}
.v22-discovery.scholar{right:12%!important;top:63.5%!important;width:88px!important;height:88px!important;}
.v22-discovery.title img,.v22-discovery.scholar img{width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(34,60,74,.22));animation:none!important;}
.v22-discovery-glints{position:absolute;inset:-18%;pointer-events:none;}
.v22-discovery-glints i{position:absolute;display:block;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);background:radial-gradient(circle, rgba(255,251,221,.98) 0 46%, rgba(255,240,169,.92) 47% 68%, rgba(255,240,169,0) 69% 100%);filter:drop-shadow(0 0 8px rgba(255,240,169,.8));animation:v90-item-star 1.9s ease-in-out infinite;}
.v22-discovery-glints i:nth-child(1){width:20px;height:20px;left:6%;top:20%;animation-delay:-.22s;}
.v22-discovery-glints i:nth-child(2){width:14px;height:14px;right:10%;top:12%;animation-delay:-.82s;}
.v22-discovery-glints i:nth-child(3){width:12px;height:12px;left:24%;bottom:6%;animation-delay:-1.18s;}
.v22-discovery-glints i:nth-child(4){width:16px;height:16px;right:16%;bottom:10%;animation-delay:-1.55s;}
@keyframes v90-item-star{0%,100%{opacity:.16;transform:scale(.55) rotate(0deg)}35%{opacity:.95;transform:scale(1.08) rotate(16deg)}60%{opacity:.55;transform:scale(.78) rotate(-8deg)}}

/* Office scene: use the provided monitor art as the main visual; keep the hit areas/text aligned but remove the mismatched extra glow plate. */
.v36-office-artboard .v22-screen{background:transparent!important;box-shadow:none!important;border-radius:0!important;display:grid!important;place-items:center!important;overflow:visible!important;}
.v36-office-artboard .v22-screen.on{background:transparent!important;box-shadow:none!important;}
.v36-office-artboard .v22-screen>span{position:relative;z-index:2;display:block;padding:0 .08em;text-align:center;color:rgba(226,248,243,.76);text-shadow:0 0 5px rgba(109,224,201,.28);}
.v36-office-artboard .v22-screen.on>span{color:#f0fffb!important;text-shadow:0 0 10px rgba(89,214,195,.92),0 0 18px rgba(89,214,195,.34)!important;font-size:33px!important;}
.v36-office-artboard .v22-screen.s0{width:214px!important;height:150px!important;left:168px!important;top:635px!important;}
.v36-office-artboard .v22-screen.s1{width:222px!important;height:144px!important;left:402px!important;top:639px!important;}
.v36-office-artboard .v22-screen.s2{width:214px!important;height:150px!important;left:645px!important;top:635px!important;}

@media (prefers-reduced-motion: reduce){.v22-discovery-glints i{animation:none!important;}}

/* v92 — final bug-fix pass: Level2 anger marker, Ithaca icon sizing/breathing,
   robust ice scratch, staged light reveal, letter petals, desktop/mobile finish parity. */

/* Level 2: move only Moli's anger marker to the requested cheek/ear-side position. */
.level2-cat-moli.reject::before{right:38px!important;top:116px!important;}

/* Ithaca discoveries: Cornell badge is intentionally larger; scholar keeps sparkle + breathing. */
.v22-discovery.title{left:12%!important;top:49.5%!important;width:118px!important;height:82px!important;}
.v22-discovery.scholar img{
  animation:v92-scholar-breathe 1.18s ease-in-out infinite alternate!important;
  transform-origin:50% 55%;
  will-change:transform,filter;
}
@keyframes v92-scholar-breathe{
  from{transform:scale(.98);filter:drop-shadow(0 0 5px rgba(255,250,216,.58)) drop-shadow(0 7px 14px rgba(34,60,74,.17))}
  to{transform:scale(1.065);filter:drop-shadow(0 0 12px rgba(255,255,245,.98)) drop-shadow(0 0 21px rgba(255,218,92,.78)) drop-shadow(0 8px 18px rgba(34,60,74,.2))}
}

/* New suitcase is already cropped/resized in the package; keep its on-screen footprint balanced. */
.v22-homes .v22-case{width:34%!important;height:32%!important;right:5%!important;bottom:6%!important;}
.v22-homes .v22-case img{width:100%!important;height:100%!important;object-fit:contain!important;}

/* Final ice-cave name: rise to the middle, hold there for ~2 seconds, then fade in place. */
.v74-ice-name-item.focus{
  animation-name:v92-final-name-hold!important;
  animation-timing-function:cubic-bezier(.22,.61,.36,1)!important;
}
@keyframes v92-final-name-hold{
  0%{opacity:0;transform:translate3d(-50%,10vh,0) scale(.94)}
  34%{opacity:1;transform:translate3d(-50%,-48vh,0) scale(1.07)}
  62%{opacity:1;transform:translate3d(-50%,-48vh,0) scale(1.07)}
  100%{opacity:0;transform:translate3d(-50%,-48vh,0) scale(1.07)}
}

/* Light is no longer a hard image swap. Render3 fades over render1, then the prompt arrives 2s later. */
.v92-ice-light-render{
  position:absolute;z-index:7;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center center;pointer-events:none;
  opacity:0;animation:v92-ice-light-image-in 1.8s ease-out forwards;
}
.v92-ice-exit-hotspot{opacity:0;animation:v92-ice-hotspot-in 1.8s .1s ease-out forwards!important;}
@keyframes v92-ice-light-image-in{from{opacity:0}to{opacity:1}}
@keyframes v92-ice-hotspot-in{from{opacity:0}to{opacity:1}}
.v75-ice-light-label{
  top:13%!important;bottom:auto!important;
  font-size:13px!important;line-height:1.35!important;font-weight:400!important;letter-spacing:0!important;
}

/* Letter petals must float above the paper/envelope, never behind it. */
.letter-petal-field{z-index:6!important;}
.letter-read-petal{z-index:6!important;}
.letter-modal .finish-letter-button{z-index:7!important;}

/* Desktop must use the same mobile card metrics. Avoid viewport-width units on wide browsers. */
.level3-finish-v76-card{
  width:min(94%,390px)!important;
  max-height:92%!important;
  container-type:inline-size;
}
.level3-finish-v76-kicker{font-size:clamp(10px,2.6cqw,14px)!important;}
.level3-finish-v76-card h2{font-size:clamp(26px,7.2cqw,38px)!important;}
.level3-finish-v76-reward-content small{font-size:clamp(9px,2.35cqw,11px)!important;}
.level3-finish-v76-reward-content b{font-size:clamp(17px,4.9cqw,24px)!important;}
.level3-finish-v76-copy{font-size:clamp(11px,3cqw,15px)!important;}
.level3-finish-v76-home span{font-size:clamp(18px,5.1cqw,26px)!important;}
.level3-finish-v76-letter{font-size:clamp(12px,3cqw,16px)!important;}

@media (prefers-reduced-motion:reduce){
  .v22-discovery.scholar img{animation:none!important;}
  .v92-ice-light-render,.v92-ice-exit-hotspot{animation-duration:.01ms!important;opacity:1!important;}
}

/* v93 — replacement assets, decorative motion, autoplay attempt polish, and Level 1 BGM handoff. */

/* New vertical rabbit sprites need a taller shared frame; the drag logic remains unchanged. */
.v22-partners .v22-rabbit,
.v22-partners.rescued .v22-rabbit{
  width:34%!important;
  height:32%!important;
  left:4%!important;
  top:35%!important;
}
.v22-partners .dog-state{
  width:52%!important;
  height:34%!important;
  right:3%!important;
  top:31%!important;
}

/* Level 2 intro: +2px for rule copy and the highlighted numbers. */
.cat-brief-rules span{font-size:10px!important;}
.cat-brief-rules b{font-size:18px!important;}

/* Star field: add activity around the screen center, not only around the three choices. */
.v93-center-starlight{
  position:absolute;z-index:4;left:50%;top:42%;width:112px;height:100px;
  transform:translate(-50%,-50%);pointer-events:none;
}
.v93-center-starlight i{
  position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;
  box-shadow:0 0 7px #fff,0 0 16px rgba(162,218,255,.96);
  animation:v93-center-star 1.3s ease-in-out infinite;
}
.v93-center-starlight i:nth-child(1){left:6%;top:25%;animation-delay:-.18s;}
.v93-center-starlight i:nth-child(2){right:8%;top:12%;width:4px;height:4px;animation-delay:-.62s;}
.v93-center-starlight i:nth-child(3){left:43%;bottom:6%;width:6px;height:6px;animation-delay:-.94s;}
.v93-center-starlight i:nth-child(4){right:27%;bottom:39%;width:3px;height:3px;animation-delay:-1.12s;}
@keyframes v93-center-star{0%,100%{opacity:.14;transform:scale(.45)}48%{opacity:1;transform:scale(1.55)}72%{opacity:.45;transform:scale(.8)}}

/* One short shooting star crosses the upper-middle area every 2 seconds. */
.v93-shooting-star{
  position:absolute;z-index:4;left:77%;top:17%;width:62px;height:2px;
  border-radius:999px;pointer-events:none;opacity:0;
  transform:rotate(-35deg);transform-origin:right center;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(220,244,255,.7) 52%,#fff 100%);
  filter:drop-shadow(0 0 5px rgba(185,230,255,.92));
  animation:v93-shooting-star 2s ease-out infinite;
}
.v93-shooting-star::after{
  content:"";position:absolute;right:-3px;top:50%;width:5px;height:5px;border-radius:50%;
  background:#fff;box-shadow:0 0 8px #fff,0 0 14px rgba(173,225,255,.95);transform:translateY(-50%);
}
@keyframes v93-shooting-star{
  0%,58%{opacity:0;translate:0 0;scale:.72}
  62%{opacity:1}
  78%{opacity:.95;translate:-116px 76px;scale:1}
  86%,100%{opacity:0;translate:-154px 101px;scale:.88}
}

/* Level 3 splash decorations. */
.level3-splash-heart{animation:v93-heart-sway 1.85s ease-in-out infinite!important;transform-origin:50% 55%;}
@keyframes v93-heart-sway{0%,100%{translate:-4px 0;rotate:-8deg}50%{translate:4px -1px;rotate:8deg}}
.level3-splash-top-flower{animation:v93-splash-flower-sway 3.4s ease-in-out infinite!important;transform-origin:50% 88%;}
@keyframes v93-splash-flower-sway{0%,100%{translate:0 0;rotate:-2deg}50%{translate:1px -2px;rotate:3deg}}
.level3-splash-kicker img:first-child{animation:v93-leaf-left 3.1s ease-in-out infinite!important;transform-origin:85% 70%;}
.level3-splash-kicker img:last-child{animation:v93-leaf-right 3.1s ease-in-out infinite -.75s!important;transform-origin:15% 70%;}
@keyframes v93-leaf-left{0%,100%{rotate:-3deg;translate:0 0}50%{rotate:5deg;translate:0 -1px}}
@keyframes v93-leaf-right{0%,100%{rotate:3deg;translate:0 0}50%{rotate:-5deg;translate:0 -1px}}

/* Main page pen: animate individual transform properties so the v90 positional transform can no longer suppress it. */
.home-v15-pen.home-pen-sway{
  animation:v93-home-pen-sway 2.8s ease-in-out infinite!important;
  transform-origin:18% 86%!important;
  will-change:translate,rotate;
}
@keyframes v93-home-pen-sway{
  0%,100%{translate:0 0;rotate:-2deg}
  34%{translate:5px -3px;rotate:4deg}
  68%{translate:-3px 2px;rotate:-4deg}
}

/* Multiple hydrangeas now move independently instead of only one decorative flower bobbing. */
.home-v15-top-flower{animation:v93-hydrangea-a 3.6s ease-in-out infinite!important;transform-origin:50% 88%;}
.home-v15-title-flower{animation:v93-hydrangea-b 4s ease-in-out infinite -.9s!important;transform-origin:52% 86%;}
.home-v15-card1-flower-left{animation:v93-hydrangea-a 3.8s ease-in-out infinite -.5s!important;transform-origin:52% 88%;}
.home-v15-card1-flower-right{animation:v93-hydrangea-b 4.2s ease-in-out infinite -1.4s!important;transform-origin:50% 86%;}
.home-v15-card2-flower-left{animation:v93-hydrangea-b 3.7s ease-in-out infinite -2s!important;transform-origin:52% 88%;}
.home-v15-card3-flower-right{animation:v93-hydrangea-a 4.1s ease-in-out infinite -2.6s!important;transform-origin:48% 87%;}
.home-v15-button-flower{animation:v93-hydrangea-b 3.9s ease-in-out infinite -1.7s!important;transform-origin:50% 88%;}
@keyframes v93-hydrangea-a{0%,100%{translate:0 0;rotate:-2deg}50%{translate:1px -3px;rotate:3deg}}
@keyframes v93-hydrangea-b{0%,100%{translate:0 0;rotate:2deg}50%{translate:-1px -2px;rotate:-3deg}}

/* Guangzhou school: duplicate only the upper tree regions and sway them subtly over the static background. */
.v93-gz-tree-sway{
  position:absolute;z-index:2;inset:0;pointer-events:none;
  background:url('/assets-1.0-v31/level3/level3_scene02_bg.webp') center/cover no-repeat;
  will-change:transform;
}
.v93-gz-tree-sway.left{
  clip-path:polygon(0 0,49% 0,46% 34%,31% 39%,0 42%);
  transform-origin:10% 40%;animation:v93-tree-left 3.2s ease-in-out infinite alternate;
}
.v93-gz-tree-sway.right{
  clip-path:polygon(51% 0,100% 0,100% 43%,72% 40%,55% 34%);
  transform-origin:90% 40%;animation:v93-tree-right 3.45s ease-in-out infinite alternate;
}
@keyframes v93-tree-left{from{transform:scale(1.012) rotate(-.55deg) translateX(-1px)}to{transform:scale(1.012) rotate(1.35deg) translateX(2px)}}
@keyframes v93-tree-right{from{transform:scale(1.012) rotate(.55deg) translateX(1px)}to{transform:scale(1.012) rotate(-1.35deg) translateX(-2px)}}

@media (prefers-reduced-motion:reduce){
  .v93-center-starlight i,.v93-shooting-star,.level3-splash-heart,.level3-splash-top-flower,
  .level3-splash-kicker img,.home-v15-pen.home-pen-sway,.home-v15-top-flower,.home-v15-title-flower,
  .home-v15-card1-flower-left,.home-v15-card1-flower-right,.home-v15-card2-flower-left,
  .home-v15-card3-flower-right,.home-v15-button-flower,.v93-gz-tree-sway{animation:none!important;}
}

/* v94 — Cornell snow/elevator, discovery typography polish, office clouds, fitness/house scaling. */

/* Discovery popup refinements requested for 藤校菁英 / 学者水晶. */
.v22-modal small{position:relative;top:5px!important;}
.v22-modal b{font-size:28px!important;}
.v22-modal p{font-size:14px!important;}
.v22-modal button{font-weight:400!important;}

/* Ithaca: lightweight continuous snowfall inspired by the supplied reference video. */
.v94-cornell-snowfall{position:absolute;z-index:22;inset:-12% 0 0;overflow:hidden;pointer-events:none;}
.v94-cornell-snowfall i{
  --snow-x:50%;--snow-size:6px;--snow-dur:6s;--snow-delay:0s;--snow-drift:0px;
  position:absolute;left:var(--snow-x);top:-8%;width:var(--snow-size);height:var(--snow-size);
  border-radius:50%;background:rgba(255,255,255,.92);
  box-shadow:0 0 calc(var(--snow-size) * .8) rgba(255,255,255,.62);
  filter:blur(.15px);opacity:0;
  animation:v94-cornell-snow var(--snow-dur) linear var(--snow-delay) infinite;
  will-change:transform,opacity;
}
.v94-cornell-snowfall i:nth-child(4n){filter:blur(1px);opacity:.68;}
.v94-cornell-snowfall i:nth-child(5n){background:rgba(242,249,255,.78);}
@keyframes v94-cornell-snow{
  0%{opacity:0;transform:translate3d(0,-7vh,0) scale(.7)}
  8%{opacity:.9}
  62%{opacity:.82;transform:translate3d(var(--snow-drift),68vh,0) scale(1)}
  100%{opacity:0;transform:translate3d(var(--snow-drift),118vh,0) scale(.82)}
}

/* Replace the old CSS-drawn Cornell elevator with the supplied art, while keeping a breathing cue. */
.v22-elevator-door.v94-elevator-door{
  left:4%!important;bottom:2.5%!important;width:118px!important;height:110px!important;
  padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;color:transparent!important;overflow:visible!important;
  animation:v94-elevator-breathe 1.12s ease-in-out infinite alternate!important;
  transform-origin:50% 86%;
}
.v22-elevator-door.v94-elevator-door img{width:100%;height:100%;display:block;object-fit:contain;pointer-events:none;}
.v22-elevator-door.v94-elevator-door::before,.v22-elevator-door.v94-elevator-door::after{display:none!important;content:none!important;}
@keyframes v94-elevator-breathe{
  from{transform:scale(.985);filter:drop-shadow(0 7px 8px rgba(78,111,137,.17)) drop-shadow(0 0 3px rgba(164,220,255,.18))}
  to{transform:scale(1.055);filter:drop-shadow(0 9px 10px rgba(78,111,137,.2)) drop-shadow(0 0 15px rgba(147,213,255,.72))}
}

/* Office: add two soft cloud masses in the window and let them drift horizontally. */
.v94-office-clouds{position:absolute;z-index:1;left:23%;right:7%;top:8%;height:31%;overflow:hidden;pointer-events:none;}
.v94-office-clouds i{position:absolute;width:22%;height:9%;min-height:24px;border-radius:999px;background:rgba(255,255,255,.5);filter:blur(.4px);opacity:.72;will-change:transform;}
.v94-office-clouds i::before,.v94-office-clouds i::after{content:"";position:absolute;border-radius:50%;background:inherit;}
.v94-office-clouds i::before{width:46%;height:190%;left:13%;bottom:0;}
.v94-office-clouds i::after{width:54%;height:230%;right:7%;bottom:0;}
.v94-office-clouds i:first-child{left:8%;top:24%;animation:v94-office-cloud-a 6.8s ease-in-out infinite alternate;}
.v94-office-clouds i:last-child{right:8%;top:38%;width:19%;opacity:.6;animation:v94-office-cloud-b 7.6s ease-in-out infinite alternate;}
@keyframes v94-office-cloud-a{from{transform:translateX(-18px)}to{transform:translateX(24px)}}
@keyframes v94-office-cloud-b{from{transform:translateX(20px) scale(.9)}to{transform:translateX(-24px) scale(.9)}}

/* Fitness: enlarge both supplied assets by 20%; enlarge the countdown by 30%. */
.v26-yoga-mat{width:62.4%!important;left:18.8%!important;top:39.5%!important;}
.v26-workout-ring{width:48%!important;left:26%!important;top:32%!important;}
.v26-qte-time{font-size:44px!important;}

/* Home stage 3 (zero-based stage-2): +10% footprint and 15px lower. */
.v22-house-button.stage-2{width:63.8%!important;height:66%!important;left:18.1%!important;top:calc(12% + 35px)!important;}

@media (prefers-reduced-motion:reduce){
  .v94-cornell-snowfall i,.v22-elevator-door.v94-elevator-door,.v94-office-clouds i{animation:none!important;}
}

/* v95 — final motion/audio/letter-system pass. */

/* 1. Star scene: longer meteor trail, with the bright meteor head on the lower end. */
.v93-shooting-star{
  left:84%!important;top:9%!important;width:270px!important;height:3px!important;
  transform:rotate(-33deg)!important;transform-origin:left center!important;
  background:linear-gradient(90deg,#fff 0%,rgba(225,246,255,.9) 10%,rgba(203,237,255,.48) 48%,rgba(255,255,255,0) 100%)!important;
  animation:v95-shooting-star 2s ease-out infinite!important;
}
.v93-shooting-star::after{
  left:-5px!important;right:auto!important;width:7px!important;height:7px!important;
  box-shadow:0 0 10px #fff,0 0 20px rgba(161,220,255,.98)!important;
}
@keyframes v95-shooting-star{
  0%,54%{opacity:0;translate:0 0;scale:.82}
  58%{opacity:1}
  79%{opacity:1;translate:-255px 172px;scale:1}
  90%,100%{opacity:0;translate:-345px 232px;scale:.92}
}

/* 5. Guangzhou school: replace hard clip-path seams with feathered masks. */
.v93-gz-tree-sway{clip-path:none!important;inset:0!important;background-position:center!important;background-size:cover!important;}
.v93-gz-tree-sway.left{
  -webkit-mask-image:radial-gradient(ellipse 58% 45% at 8% 5%,#000 0 58%,rgba(0,0,0,.92) 69%,transparent 88%);
  mask-image:radial-gradient(ellipse 58% 45% at 8% 5%,#000 0 58%,rgba(0,0,0,.92) 69%,transparent 88%);
}
.v93-gz-tree-sway.right{
  -webkit-mask-image:radial-gradient(ellipse 58% 46% at 94% 5%,#000 0 58%,rgba(0,0,0,.92) 69%,transparent 88%);
  mask-image:radial-gradient(ellipse 58% 46% at 94% 5%,#000 0 58%,rgba(0,0,0,.92) 69%,transparent 88%);
}

/* 6. Beijing school: drifting clouds are clipped inside the scene. */
.v95-beijing-clouds{position:absolute;z-index:2;inset:0;overflow:hidden;pointer-events:none;}
.v95-beijing-clouds img{position:absolute;width:34%;height:auto;opacity:.58;filter:blur(.15px);will-change:transform;}
.v95-beijing-clouds img:first-child{left:-10%;top:8%;animation:v95-bj-cloud-a 8.2s ease-in-out infinite alternate;}
.v95-beijing-clouds img:last-child{right:-12%;top:24%;width:28%;opacity:.48;animation:v95-bj-cloud-b 9.3s ease-in-out infinite alternate;}
@keyframes v95-bj-cloud-a{from{transform:translateX(-12px) scale(.94)}to{transform:translateX(72px) scale(.94)}}
@keyframes v95-bj-cloud-b{from{transform:translateX(22px) scale(.78)}to{transform:translateX(-70px) scale(.78)}}

/* 7. All Level 3 narration popup top labels +5px. Only 2-line descriptions move upward 5px. */
.v23-narration small{position:relative!important;top:5px!important;}
.v23-narration.narration-1 p,
.v23-narration.narration-2 p,
.v23-narration.narration-3 p,
.v23-narration.narration-6 p,
.v23-narration.narration-7 p,
.v23-narration.narration-9 p,
.v23-narration.narration-11 p{transform:translateY(-5px)!important;}
.v23-narration.narration-4 p,
.v23-narration.narration-5 p,
.v23-narration.narration-8 p,
.v23-narration.narration-10 p{transform:none!important;}

/* 8. Fitness: move yoga mat down 20px; keyboard mapping lives in TSX. */
.v26-yoga-mat{top:calc(39.5% + 20px)!important;}

/* 9. Moving-house scene: all houses + suitcase breathe, clouds drift; house3/house4 scale targets. */
.v95-homes-clouds{position:absolute;z-index:1;inset:0 0 44% 0;overflow:hidden;pointer-events:none;}
.v95-homes-clouds img{position:absolute;width:32%;height:auto;opacity:.48;will-change:transform;}
.v95-homes-clouds img:first-child{left:-7%;top:13%;animation:v95-home-cloud-a 8.6s ease-in-out infinite alternate;}
.v95-homes-clouds img:last-child{right:-10%;top:35%;width:25%;opacity:.38;animation:v95-home-cloud-b 9.5s ease-in-out infinite alternate;}
@keyframes v95-home-cloud-a{from{transform:translateX(-18px) scale(.9)}to{transform:translateX(86px) scale(.9)}}
@keyframes v95-home-cloud-b{from{transform:translateX(20px) scale(.72)}to{transform:translateX(-82px) scale(.72)}}
.v22-house-button .v22-house.current{animation:v22-house-pop .55s both,v95-house-breathe 2.6s .55s ease-in-out infinite!important;}
.v22-house-button.stage-2 .v22-house.current{animation:v22-house-pop .55s both,v95-house3-breathe 2.6s .55s ease-in-out infinite!important;}
.v22-house-button.stage-3 .v22-house.current{animation:v22-house-pop .55s both,v95-house4-breathe 2.6s .55s ease-in-out infinite!important;}
.v22-homes .v22-case{animation:v95-case-breathe 2.35s ease-in-out infinite!important;}
.v22-homes .v22-case.dragging{animation:none!important;}
@keyframes v95-house-breathe{0%,100%{scale:1}50%{scale:1.035}}
@keyframes v95-house3-breathe{0%,100%{scale:1.15;translate:0 15px}50%{scale:1.185;translate:0 12px}}
@keyframes v95-house4-breathe{0%,100%{scale:1.10}50%{scale:1.135}}
@keyframes v95-case-breathe{0%,100%{scale:1;translate:0 0}50%{scale:1.035;translate:0 -3px}}

/* 10. Ice cave: cover baked objects, then use one clean movable layer per object. */
.v95-ice-object-cover{position:absolute;z-index:7;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;}
.v95-ice-objects{position:absolute;z-index:8;inset:0;pointer-events:none;}
.v95-ice-object{position:absolute;display:block;height:auto;object-fit:contain;will-change:translate,scale,rotate,filter;filter:drop-shadow(0 4px 6px rgba(60,103,116,.08));}
.v95-ice-object.spiral{left:7.5%;top:51.2%;width:22%;animation:v95-ice-object-a 3.1s ease-in-out infinite;}
.v95-ice-object.snail{right:5.5%;top:42.3%;width:31%;animation:v95-ice-object-b 3.35s ease-in-out infinite -.8s;}
.v95-ice-object.dog{left:29%;top:58.2%;width:43%;animation:v95-ice-object-c 3.2s ease-in-out infinite -1.45s;}
@keyframes v95-ice-object-a{0%,100%{translate:0 0;scale:1;rotate:-1deg}50%{translate:1px -3px;scale:1.025;rotate:1.5deg}}
@keyframes v95-ice-object-b{0%,100%{translate:0 0;scale:1;rotate:1deg}50%{translate:-2px -3px;scale:1.022;rotate:-1deg}}
@keyframes v95-ice-object-c{0%,100%{translate:0 0;scale:1;rotate:-.4deg}50%{translate:0 -4px;scale:1.018;rotate:.5deg}}
/* keep the gradual exit glow without re-layering an old object-filled render */
.v75-ice-cave.phase-light::after{content:"";position:absolute;z-index:7.5;left:31%;top:25%;width:38%;height:28%;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(255,237,142,.7),rgba(255,223,99,.22) 45%,transparent 72%);animation:v95-ice-light-in 1.8s ease-out forwards;}
@keyframes v95-ice-light-in{from{opacity:0;scale:.82}to{opacity:1;scale:1}}

/* 11. Final-home window snowfall + character breathing. */
.v22-room>.v95-room-window-snow{display:block!important;position:absolute;z-index:3;left:40.8%;top:11.5%;width:29.4%;height:33.2%;overflow:hidden;pointer-events:none;border-radius:48% 48% 2px 2px/22% 22% 2px 2px;}
.v95-room-window-snow i{--x:50%;--size:4px;--dur:5s;--delay:0s;--drift:0px;position:absolute;left:var(--x);top:-9%;width:var(--size);height:var(--size);border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 0 5px rgba(255,255,255,.55);opacity:0;animation:v95-room-snow var(--dur) linear var(--delay) infinite;will-change:transform,opacity;}
@keyframes v95-room-snow{0%{opacity:0;transform:translate3d(0,-10%,0) scale(.7)}8%{opacity:.9}80%{opacity:.8}100%{opacity:0;transform:translate3d(var(--drift),1180%,0) scale(1)}}
.v22-room>.v95-room-breathe{display:block!important;animation:v95-room-breathe 3s ease-in-out infinite!important;transform-origin:50% 88%;will-change:translate,scale;}
.v22-room>.v95-room-breathe.breathe-b{animation-delay:-.75s!important;}
.v22-room>.v95-room-breathe.breathe-c{animation-delay:-1.45s!important;}
@keyframes v95-room-breathe{0%,100%{translate:0 0;scale:1}50%{translate:0 -3px;scale:1.018}}

/* 12/13. Letter petals run continuously above both letters; both letters breathe gently. */
.letter-petal-field{z-index:14!important;overflow:hidden!important;}
.letter-read-petal{z-index:14!important;animation-name:v95-letter-petal-loop!important;animation-timing-function:linear!important;animation-iteration-count:infinite!important;}
.letter-read-petal.petal-1{right:0%;animation-duration:9.6s!important;animation-delay:-1s!important}.letter-read-petal.petal-2{right:9%;animation-duration:10.3s!important;animation-delay:-6.8s!important}.letter-read-petal.petal-3{right:18%;animation-duration:9.2s!important;animation-delay:-3.4s!important}.letter-read-petal.petal-4{right:28%;animation-duration:10.7s!important;animation-delay:-8.7s!important}.letter-read-petal.petal-5{right:38%;animation-duration:9.8s!important;animation-delay:-5.2s!important}.letter-read-petal.petal-6{right:48%;animation-duration:10.5s!important;animation-delay:-2.1s!important}.letter-read-petal.petal-7{right:58%;animation-duration:9.4s!important;animation-delay:-7.6s!important}.letter-read-petal.petal-8{right:68%;width:9px;height:14px;animation-duration:10.1s!important;animation-delay:-4.3s!important}.letter-read-petal.petal-9{right:78%;width:11px;height:16px;animation-duration:9.7s!important;animation-delay:-9s!important}.letter-read-petal.petal-10{right:88%;width:8px;height:13px;animation-duration:10.6s!important;animation-delay:-6s!important}.letter-read-petal.petal-11{right:96%;width:10px;height:15px;animation-duration:9.3s!important;animation-delay:-2.8s!important}.letter-read-petal.petal-12{right:34%;width:8px;height:12px;animation-duration:8.9s!important;animation-delay:-7.1s!important}
@keyframes v95-letter-petal-loop{0%{opacity:0;transform:translate3d(0,-48px,0) rotate(0deg) scale(.8)}5%{opacity:.82}92%{opacity:.72}100%{opacity:0;transform:translate3d(-470px,820px,0) rotate(-410deg) scale(1.05)}}
.letter-stage-3 .birthday-letter{overflow:hidden!important;animation:v95-letter-breathe 3.1s ease-in-out infinite!important;will-change:translate,scale;}
@keyframes v95-letter-breathe{0%,100%{translate:0 0;scale:1}50%{translate:0 -4px;scale:1.006}}

/* 3. Extracting paper sits above the envelope front so no envelope line cuts through it. */
.letter-stage-2 .letter-paper-pocket,.letter-stage-3 .letter-paper-pocket{z-index:8!important;}
.letter-stage-2 .birthday-letter,.letter-stage-3 .birthday-letter{z-index:9!important;}
.letter-envelope-front{z-index:5!important;}

/* 4/14–18. Public letter + password gate + encrypted second letter. */
.letter-scroll-mask{height:calc(100% - 32px);margin-top:8px;padding:12px 4px 30px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;white-space:pre-line;line-height:1.75;font-size:13px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 90%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 90%,transparent 100%);}
.letter-scroll-mask::-webkit-scrollbar{display:none;width:0;height:0;}
.letter-scroll-mask .letter-body{white-space:pre-line;line-height:1.75;font-size:13px;}
.letter-scroll-mask .letter-sign{margin:18px 4px 20px;}
.encrypted-read-button{display:block;width:max-content;max-width:78%;margin:18px auto 8px;padding:7px 13px;border:1px solid rgba(78,133,126,.34);border-radius:999px;color:#3f7e77;background:rgba(225,247,240,.72);font-size:11px;font-weight:600;box-shadow:0 4px 10px rgba(69,105,95,.08);}
.encrypted-letter-opening{animation:v95-encrypted-letter-open 1.75s cubic-bezier(.18,.8,.2,1) both!important;}
@keyframes v95-encrypted-letter-open{0%{opacity:0;scale:.82;translate:0 32px;filter:blur(2px)}58%{opacity:1;scale:1.018;translate:0 -3px;filter:blur(0)}100%{opacity:1;scale:1;translate:0 0;filter:blur(0)}}
.password-dialog-backdrop{position:absolute;z-index:45;inset:0;display:grid;place-items:center;padding:22px;background:rgba(28,24,21,.48);backdrop-filter:blur(6px);}
.password-dialog{width:min(82vw,320px);position:relative;padding:24px 22px 22px;border:1px solid rgba(132,101,68,.2);border-radius:24px;background:linear-gradient(180deg,#fffdf5,#f8ead4);box-shadow:0 22px 55px rgba(55,38,24,.35);text-align:center;color:#5a4738;}
.password-dialog h3{margin:0 0 8px;font-size:21px;font-weight:760;}.password-dialog p{margin:0 0 17px;font-size:13px;color:#806d5d;}.password-close{position:absolute;right:12px;top:10px;width:30px;height:30px;border:0;background:transparent;color:#917a67;font-size:22px;line-height:1;}
.password-digits{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:0 auto 18px;}.password-digits span{height:42px;display:grid;place-items:center;border:1px solid rgba(137,108,79,.26);border-radius:10px;background:#fffaf0;color:#4d4035;font-size:20px;font-weight:700;box-shadow:inset 0 1px 3px rgba(95,68,45,.05);}
.password-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}.password-keypad button{height:43px;border:1px solid rgba(107,143,133,.24);border-radius:13px;color:#355e59;background:#dff4ed;font-size:18px;font-weight:650;box-shadow:0 4px 9px rgba(58,95,87,.08);}.password-keypad button:active{scale:.94;}
.password-dialog-backdrop.error .password-dialog{animation:v95-password-error .34s ease-in-out 1;}.password-dialog-backdrop.error .password-digits span{border-color:rgba(198,86,77,.55);background:#fff0ea;}
@keyframes v95-password-error{0%,100%{translate:0 0}25%{translate:-7px 0}75%{translate:7px 0}}

/* Discovery popup sizing stays from v94; ensure popup top caption is exactly +5px. */
.v22-modal small{top:5px!important;}

@media (prefers-reduced-motion:reduce){
  .v93-shooting-star,.v95-beijing-clouds img,.v95-homes-clouds img,.v22-house-button .v22-house.current,.v22-homes .v22-case,
  .v95-ice-object,.v75-ice-cave.phase-light::after,.v95-room-window-snow i,.v22-room>.v95-room-breathe,.letter-read-petal,.letter-stage-3 .birthday-letter{animation:none!important;}
}

/* v96 — timing, scene polish, clean ice layering, window-safe snowfall, encrypted-letter handoff. */

/* 1. Meteor: trim the trail by 10% and repeat every 4 seconds. The bright head stays on the lower end. */
.v93-shooting-star{
  width:243px!important;
  animation:v96-shooting-star 4s ease-out infinite!important;
}
.v93-shooting-star::after{left:-5px!important;right:auto!important;}
@keyframes v96-shooting-star{
  0%,58%{opacity:0;translate:0 0;scale:.82}
  61%{opacity:1}
  72%{opacity:1;translate:-250px 168px;scale:1}
  80%,100%{opacity:0;translate:-340px 228px;scale:.92}
}

/* 2/3. Popup typography: move all top labels 3px upward from v95; only 3-line descriptions rise 5px. */
.v23-narration small,.v22-modal small{top:2px!important;}
.v23-narration.narration-1 p,
.v23-narration.narration-2 p,
.v23-narration.narration-3 p,
.v23-narration.narration-6 p,
.v23-narration.narration-7 p,
.v23-narration.narration-9 p,
.v23-narration.narration-11 p{transform:none!important;}
.v23-narration.narration-4 p,
.v23-narration.narration-5 p,
.v23-narration.narration-8 p,
.v23-narration.narration-10 p{transform:translateY(-5px)!important;}

/* 3. Beijing: denser drifting clouds, all hard-clipped to the scene bounds. */
.v95-beijing-clouds{overflow:hidden!important;clip-path:inset(0)!important;contain:paint;}
.v95-beijing-clouds img{position:absolute!important;height:auto!important;filter:blur(.2px)!important;will-change:transform;}
.v95-beijing-clouds img:nth-child(1){left:-8%!important;top:7%!important;width:31%!important;opacity:.56!important;animation:v96-bj-cloud-l 9s ease-in-out infinite alternate!important;}
.v95-beijing-clouds img:nth-child(2){left:16%!important;top:19%!important;width:23%!important;opacity:.39!important;animation:v96-bj-cloud-m 10.6s ease-in-out infinite alternate -2.4s!important;}
.v95-beijing-clouds img:nth-child(3){left:43%!important;top:9%!important;width:27%!important;opacity:.46!important;animation:v96-bj-cloud-r 11.2s ease-in-out infinite alternate -4.1s!important;}
.v95-beijing-clouds img:nth-child(4){right:3%!important;top:25%!important;width:20%!important;opacity:.34!important;animation:v96-bj-cloud-m 9.8s ease-in-out infinite alternate -5.6s!important;}
.v95-beijing-clouds img:nth-child(5){right:-10%!important;top:35%!important;width:29%!important;opacity:.42!important;animation:v96-bj-cloud-r 12.1s ease-in-out infinite alternate -1.7s!important;}
@keyframes v96-bj-cloud-l{from{transform:translateX(-26px) scale(.92)}to{transform:translateX(92px) scale(.92)}}
@keyframes v96-bj-cloud-m{from{transform:translateX(-38px) scale(.76)}to{transform:translateX(74px) scale(.76)}}
@keyframes v96-bj-cloud-r{from{transform:translateX(38px) scale(.84)}to{transform:translateX(-88px) scale(.84)}}

/* 4. Office window: smoothly cycle morning -> sunset -> night without touching the room walls. */
.v96-office-sky-cycle{
  position:absolute;z-index:0;left:25.4%;top:8.7%;width:66.4%;height:38.2%;
  overflow:hidden;pointer-events:none;clip-path:inset(0 round 3px);mix-blend-mode:multiply;
  animation:v96-office-day-cycle 20s ease-in-out infinite;
}
@keyframes v96-office-day-cycle{
  0%,10%,100%{background:rgba(255,245,229,0);filter:brightness(1) saturate(1)}
  32%{background:rgba(255,183,111,.22);filter:brightness(.99) saturate(1.08)}
  48%{background:rgba(244,126,82,.38);filter:brightness(.94) saturate(1.18)}
  68%{background:rgba(66,76,128,.38);filter:brightness(.84) saturate(.98)}
  84%{background:rgba(22,37,80,.56);filter:brightness(.72) saturate(.82)}
  94%{background:rgba(62,72,119,.26);filter:brightness(.88) saturate(.92)}
}

/* 5. Yoga mat: another +20% from the current visual and 15px lower. */
.v26-yoga-mat{width:74.88%!important;left:12.56%!important;top:calc(39.5% + 35px)!important;}

/* 6. House 3: move the stage up 15px from v95. */
.v22-house-button.stage-2{top:calc(12% + 20px)!important;}

/* 7. Ice cave: the clean base contains no baked objects; remove the old black cover entirely. */
.v95-ice-object-cover{display:none!important;}
.v74-ice-render-base{filter:none!important;}
.v95-ice-object{filter:drop-shadow(0 3px 5px rgba(60,103,116,.05))!important;}

/* 8. Final-home snow: split the snow into the two glass panes so it never crosses the outer or center frames. */
.v96-room-snow-panes{position:absolute;z-index:3;inset:0;display:block!important;pointer-events:none;}
.v96-room-window-snow{position:absolute;display:block;overflow:hidden;pointer-events:none;contain:paint;}
.v96-room-window-snow.pane-left{left:42.4%;top:13.2%;width:11.8%;height:30.0%;border-radius:82% 0 0 0/20% 0 0 0;}
.v96-room-window-snow.pane-right{left:56.3%;top:13.2%;width:12.1%;height:30.0%;border-radius:0 82% 0 0/0 20% 0 0;}
.v96-room-window-snow i{
  --x:50%;--size:4px;--dur:5s;--delay:0s;--drift:0px;
  position:absolute;left:var(--x);top:-9%;width:var(--size);height:var(--size);border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:0 0 5px rgba(255,255,255,.55);opacity:0;
  animation:v95-room-snow var(--dur) linear var(--delay) infinite;will-change:transform,opacity;
}

/* 10. Encrypted second letter: high-specificity open animation, then breathe after the class is removed. */
.letter-stage-3 .birthday-letter.encrypted-letter-opening{
  animation:v96-encrypted-letter-open 2.35s cubic-bezier(.18,.78,.2,1) both!important;
}
@keyframes v96-encrypted-letter-open{
  0%{opacity:0;translate:0 58px;scale:.76;filter:blur(3px)}
  42%{opacity:.95;translate:0 8px;scale:.94;filter:blur(.8px)}
  72%{opacity:1;translate:0 -6px;scale:1.02;filter:blur(0)}
  100%{opacity:1;translate:0 0;scale:1;filter:blur(0)}
}

@media (prefers-reduced-motion:reduce){
  .v93-shooting-star,.v95-beijing-clouds img,.v96-office-sky-cycle,.v96-room-window-snow i,
  .letter-stage-3 .birthday-letter.encrypted-letter-opening{animation:none!important;}
}


/* v97 — Level 1 stolen-circle / Level 2 recovery reward story. */
.home-v15-stolen-label{
  position:relative;z-index:2;display:block;max-width:54px;padding:0 2px;
  color:#8b6658;font-size:11px;line-height:1;font-weight:800;letter-spacing:-.02em;
  white-space:nowrap;text-align:center;
}
.home-reward-slot.stolen .home-v15-reward-base{filter:saturate(.72) brightness(.98);}
.clue-collectible-icons{display:flex;align-items:center;justify-content:center;gap:5px;flex:0 0 auto;}
.clue-collectible-icons .clue-collectible-icon{width:52px;height:52px;max-width:52px;max-height:52px;object-fit:contain;flex:0 0 52px;}
.clue-unlocked.with-recovered-circle{gap:9px;padding-left:8px;padding-right:8px;}
.clue-unlocked.with-recovered-circle b{font-size:14px;white-space:nowrap;}
@media (max-width:390px){
  .clue-collectible-icons .clue-collectible-icon{width:48px;height:48px;max-width:48px;max-height:48px;flex-basis:48px;}
  .clue-unlocked.with-recovered-circle b{font-size:13px;}
}


/* v98 — Level 1 settle delay, office-window tint polish, deliberate ice erase, smooth houses, letter review. */

/* Level 1 countdown may be intentionally blank during the 1.5s scene settle. */
.countdown b:empty{display:none!important;}

/* Office daylight stays safely inset from the physical frame and cycles through the requested colors in 6s. */
.v96-office-sky-cycle{
  left:26.35%!important;top:9.15%!important;width:64.75%!important;height:36.9%!important;
  border-radius:2px!important;overflow:hidden!important;clip-path:inset(1px round 2px)!important;
  mix-blend-mode:color!important;opacity:.56!important;
  animation:v98-office-day-cycle 6s ease-in-out infinite!important;
}
@keyframes v98-office-day-cycle{
  0%,12%{background:#9EF0FF;opacity:.38}
  34%,46%{background:#FE721B;opacity:.52}
  68%,82%{background:#1B1878;opacity:.58}
  100%{background:#9EF0FF;opacity:.38}
}

/* House sizes are controlled by their containers. Keep breathing close to 1x so there is no post-pop size jump. */
@keyframes v95-house3-breathe{0%,100%{scale:1;translate:0 0}50%{scale:1.028;translate:0 -2px}}
@keyframes v95-house4-breathe{0%,100%{scale:1;translate:0 0}50%{scale:1.028;translate:0 -2px}}

/* Ice objects are intentionally semi-transparent; preserve their gentle movement without creating opaque doubles. */
.v95-ice-object{opacity:.62!important;}

/* Completed Level 3 exposes a small secondary review action on its splash page. */
.level3-splash-review-letter{
  display:block;margin:8px auto 0;padding:7px 17px;border:1px solid rgba(78,119,129,.26);border-radius:999px;
  color:#4d7b82;background:rgba(250,250,239,.72);box-shadow:0 5px 12px rgba(73,102,103,.08);
  font-size:11px;font-weight:650;line-height:1.1;
}
.level3-splash-review-letter:active{transform:translateY(1px) scale(.98);}

@media (prefers-reduced-motion:reduce){.v96-office-sky-cycle{animation:none!important;background:#9EF0FF!important;opacity:.38!important;}}

/* v99 — stricter ice scratch, full-height room snow, exact office window tint, smoother encrypted letter, splash review placement. */

/* Ice scratch now requires another ~10 percentage points before success. The 2s name delay is handled in TSX. */

/* Final-home snow must travel from the top edge of each glass pane to the bottom edge. */
.v96-room-window-snow.pane-left{left:42.4%!important;top:13.0%!important;width:11.8%!important;height:30.7%!important;}
.v96-room-window-snow.pane-right{left:56.3%!important;top:13.0%!important;width:12.1%!important;height:30.7%!important;}
.v96-room-window-snow i{
  top:-7%!important;
  animation:v99-room-snow-full var(--dur) linear var(--delay) infinite!important;
}
@keyframes v99-room-snow-full{
  0%{opacity:0;top:-7%;transform:translate3d(0,0,0) scale(.72)}
  7%{opacity:.92}
  88%{opacity:.82}
  100%{opacity:0;top:103%;transform:translate3d(var(--drift),0,0) scale(1)}
}

/* Office day/night tint now lives inside the 1024x1535 transformed artboard and matches the glass itself. */
.v36-office-artboard .v96-office-sky-cycle{
  position:absolute!important;
  z-index:0!important;
  left:266px!important;
  top:132px!important;
  width:670px!important;
  height:582px!important;
  border-radius:0!important;
  overflow:hidden!important;
  clip-path:inset(0)!important;
  pointer-events:none!important;
  mix-blend-mode:color!important;
  animation:v98-office-day-cycle 6s ease-in-out infinite!important;
}

/* Encrypted letter: compositor-only transform/opacity animation, avoiding blur/filter stutter. */
.letter-stage-3 .birthday-letter.encrypted-letter-opening{
  will-change:transform,opacity!important;
  backface-visibility:hidden;
  transform-origin:50% 50%;
  animation:v99-encrypted-letter-open 2.25s cubic-bezier(.2,.78,.18,1) both!important;
}
@keyframes v99-encrypted-letter-open{
  0%{opacity:0;transform:translate3d(0,48px,0) scale(.84)}
  42%{opacity:.96;transform:translate3d(0,10px,0) scale(.955)}
  72%{opacity:1;transform:translate3d(0,-4px,0) scale(1.012)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

/* Completed Level 3: place the review button in the small bottom-right slot without moving hint/decor. */
.level3-splash-review-letter{
  position:absolute!important;
  right:3.5%!important;
  bottom:31px!important;
  width:70px!important;
  height:30px!important;
  margin:0!important;
  padding:0 6px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:9px!important;
  font-size:10px!important;
  line-height:1!important;
  white-space:nowrap!important;
  z-index:12!important;
}

@media (prefers-reduced-motion:reduce){
  .v96-room-window-snow i,.v36-office-artboard .v96-office-sky-cycle,.letter-stage-3 .birthday-letter.encrypted-letter-opening{animation:none!important;}
}


/* v100 — adaptive letter-review slot, stricter ice erase, centered encrypted-letter reveal, reliable final-room snow. */

/* Anchor the review action to the decorated white panel itself, not to viewport height. */
.level3-splash-review-anchor{
  position:absolute!important;
  z-index:14!important;
  left:8.3%!important;
  top:calc(16.4% - 20px)!important;
  width:83.4%!important;
  height:auto!important;
  aspect-ratio:700/1010!important;
  pointer-events:none!important;
}
.level3-splash-review-anchor .level3-splash-review-letter{
  position:absolute!important;
  right:12%!important;
  bottom:1%!important;
  width:70px!important;
  height:30px!important;
  margin:0!important;
  padding:0 6px!important;
  display:grid!important;
  place-items:center!important;
  pointer-events:auto!important;
  border-radius:9px!important;
  font-size:10px!important;
  line-height:1!important;
  white-space:nowrap!important;
}

/* The previous encrypted-letter keyframes overwrote translate(-50%,-50%), which could pin the paper in a corner.
   Keep the centering transform in every keyframe and animate only the local offset/scale. */
.letter-stage-3 .birthday-letter.encrypted-letter-opening{
  will-change:transform,opacity!important;
  backface-visibility:hidden!important;
  transform-origin:50% 50%!important;
  animation:v100-encrypted-letter-open 2.7s cubic-bezier(.2,.78,.18,1) both!important;
}
@keyframes v100-encrypted-letter-open{
  0%{opacity:0;transform:translate(-50%,calc(-50% + 46px)) scale(.86)}
  42%{opacity:.96;transform:translate(-50%,calc(-50% + 10px)) scale(.96)}
  72%{opacity:1;transform:translate(-50%,calc(-50% - 3px)) scale(1.01)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

/* Final room: force the two snow panes to render even while room foreground assets are finishing. */
.v22-room>.v100-room-snow-panes{
  display:block!important;
  position:absolute!important;
  z-index:4!important;
  inset:0!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:none!important;
}
.v100-room-snow-panes .v96-room-window-snow{display:block!important;visibility:visible!important;opacity:1!important;}
.v100-room-snow-panes .v96-room-window-snow i{
  display:block!important;
  visibility:visible!important;
  top:-8%!important;
  opacity:0;
  animation:v100-room-snow-full var(--dur) linear var(--delay) infinite!important;
}
@keyframes v100-room-snow-full{
  0%{opacity:0;top:-8%;transform:translateX(0) scale(.72)}
  8%{opacity:.95}
  90%{opacity:.84}
  100%{opacity:0;top:104%;transform:translateX(var(--drift)) scale(1)}
}

/* User explicitly wants continuous snow in the final room, including devices reporting reduced-motion. */
@media (prefers-reduced-motion:reduce){
  .v100-room-snow-panes .v96-room-window-snow i{animation:v100-room-snow-full var(--dur) linear var(--delay) infinite!important;}
  .letter-stage-3 .birthday-letter.encrypted-letter-opening{animation:v100-encrypted-letter-open 2.7s cubic-bezier(.2,.78,.18,1) both!important;}
}


/* v101 — final placement/timing polish, stronger room snowfall, smoother encrypted letter. */

/* Level 3 splash review: keep the button inside the decorated white panel across viewport sizes. */
.level3-splash-review-anchor .level3-splash-review-letter{
  right:15%!important;
  bottom:7%!important;
}

/* Encrypted letter: remove scale overshoot completely; only fade + vertical lift, avoiding mobile stutter. */
.letter-stage-3 .birthday-letter.encrypted-letter-opening{
  will-change:transform,opacity!important;
  backface-visibility:hidden!important;
  transform-origin:50% 50%!important;
  animation:v101-encrypted-letter-open 2.55s cubic-bezier(.2,.72,.2,1) both!important;
}
@keyframes v101-encrypted-letter-open{
  0%{opacity:0;transform:translate(-50%,calc(-50% + 34px))}
  38%{opacity:.82;transform:translate(-50%,calc(-50% + 18px))}
  72%{opacity:1;transform:translate(-50%,calc(-50% + 6px))}
  100%{opacity:1;transform:translate(-50%,-50%)}
}

/* Replace the old room-local snow panes with a viewport sibling that cannot be hidden by legacy v22-room rules. */
.v22-room>.v100-room-snow-panes{display:none!important;}
.v101-final-window-snow{
  position:absolute;z-index:4;inset:0;display:block!important;overflow:hidden;pointer-events:none;
}
.v101-room-bg-artboard{
  position:absolute;left:50%;top:0;height:100%;width:auto;aspect-ratio:2 / 3;transform:translateX(-50%);
  pointer-events:none;
}
.v101-room-snow-pane{
  position:absolute;top:11.7%;height:33.9%;display:block;overflow:hidden;pointer-events:none;contain:paint;
}
.v101-room-snow-pane.pane-left{left:40.9%;width:13.1%;border-radius:54% 0 0 0/14% 0 0 0;}
.v101-room-snow-pane.pane-right{left:56.3%;width:13.4%;border-radius:0 54% 0 0/0 14% 0 0;}
.v101-room-snow-pane i{
  --x:50%;--size:5px;--dur:5.2s;--delay:0s;--drift:0px;
  position:absolute;left:var(--x);top:-8%;width:var(--size);height:var(--size);display:block;border-radius:50%;
  background:rgba(255,255,255,.96);box-shadow:0 0 6px rgba(255,255,255,.7),0 0 10px rgba(194,228,255,.32);
  opacity:0;will-change:transform,opacity;animation:v101-room-snow var(--dur) linear var(--delay) infinite;
}
@keyframes v101-room-snow{
  0%{opacity:0;top:-8%;transform:translate3d(0,0,0) scale(.72)}
  7%{opacity:.98}
  88%{opacity:.9}
  100%{opacity:0;top:104%;transform:translate3d(var(--drift),0,0) scale(1.04)}
}
@media (max-height:660px){
  .v101-room-bg-artboard{height:auto;width:100%;top:50%;transform:translate(-50%,-50%);}
}
@media (prefers-reduced-motion:reduce){
  .v101-room-snow-pane i{animation:v101-room-snow var(--dur) linear var(--delay) infinite!important;}
  .letter-stage-3 .birthday-letter.encrypted-letter-opening{animation:v101-encrypted-letter-open 2.55s cubic-bezier(.2,.72,.2,1) both!important;}
}


/* v102 — encrypted-letter reveal without vertical/scale movement; smooth clip reveal only. */
.letter-stage-3 .birthday-letter.encrypted-letter-opening{
  transform:translate(-50%,-50%)!important;
  will-change:clip-path,opacity!important;
  backface-visibility:hidden!important;
  animation:v102-encrypted-letter-open 2.35s cubic-bezier(.22,.7,.2,1) both!important;
}
@keyframes v102-encrypted-letter-open{
  0%{opacity:0;transform:translate(-50%,-50%);clip-path:inset(46% 3% 46% 3% round 18px)}
  18%{opacity:.72;transform:translate(-50%,-50%);clip-path:inset(34% 2.5% 34% 2.5% round 15px)}
  55%{opacity:1;transform:translate(-50%,-50%);clip-path:inset(14% 1.2% 14% 1.2% round 9px)}
  100%{opacity:1;transform:translate(-50%,-50%);clip-path:inset(0 0 0 0 round 4px)}
}
@media (prefers-reduced-motion: reduce){
  .letter-stage-3 .birthday-letter.encrypted-letter-opening{animation:v102-encrypted-letter-open 1.2s linear both!important;}
}


/* v103 — one-pass encrypted-letter reveal, edge-masked ice names, faster Level 1 car. */
/* Encrypted letter: a single continuous reveal. No intermediate keyframes, scale, translate, or blur. */
.letter-stage-3 .birthday-letter.encrypted-letter-opening{
  transform:translate(-50%,-50%)!important;
  clip-path:inset(46% 2% 46% 2% round 16px);
  opacity:0;
  will-change:clip-path,opacity!important;
  backface-visibility:hidden!important;
  animation:v103-encrypted-letter-open 1.9s cubic-bezier(.2,.72,.18,1) both!important;
}
@keyframes v103-encrypted-letter-open{
  from{opacity:0;clip-path:inset(46% 2% 46% 2% round 16px);transform:translate(-50%,-50%)}
  to{opacity:1;clip-path:inset(0 0 0 0 round 4px);transform:translate(-50%,-50%)}
}

/* Ice names fade naturally at both viewport edges instead of popping in/out at the crop boundary. */
.v74-ice-name-layer{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.45) 7%,#000 14%,#000 84%,rgba(0,0,0,.45) 92%,transparent 100%)!important;
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.45) 7%,#000 14%,#000 84%,rgba(0,0,0,.45) 92%,transparent 100%)!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  -webkit-mask-size:100% 100%!important;
  mask-size:100% 100%!important;
}
@media (prefers-reduced-motion:reduce){
  .letter-stage-3 .birthday-letter.encrypted-letter-opening{animation:v103-encrypted-letter-open 1.25s linear both!important;}
}


/* EdgeOne deployment prep — test-only save-state panel. */
.zui-debug-panel{position:absolute;z-index:9999;left:max(10px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));width:min(330px,calc(100% - 20px));padding:10px;border:1px solid rgba(0,0,0,.14);border-radius:14px;background:rgba(250,247,239,.96);box-shadow:0 12px 34px rgba(0,0,0,.2);color:#3f423e;font:600 12px/1.35 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;backdrop-filter:blur(10px)}
.zui-debug-panel header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.zui-debug-panel header b{font-size:11px;letter-spacing:.12em}
.zui-debug-panel header button{width:26px;height:26px;border:0;border-radius:50%;background:rgba(0,0,0,.06);color:inherit}
.zui-debug-panel p{margin:5px 0 8px;font-weight:700}
.zui-debug-panel>div{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.zui-debug-panel>div button{min-height:34px;padding:6px 8px;border:1px solid rgba(0,0,0,.1);border-radius:9px;background:#fff;color:#3f423e;font:700 11px/1.2 inherit}
.zui-debug-panel>div button.danger{background:#fff0ed}
.zui-debug-panel small{display:block;margin-top:7px;opacity:.56;font-size:9px;word-break:break-all}

/* v110 — unified L1/L2 typography, reward sizing, cat-tail frame playback,
   dual-collectible layout, and aspect-safe Level 3 discovery popups. */
.drive-stage[data-phase="intro"],
.drive-stage[data-phase="countdown"],
.drive-stage[data-phase="playing"],
.drive-stage[data-phase="finished"],
.drive-stage[data-phase="level2-intro"],
.drive-stage[data-phase="level2-playing"],
.drive-stage[data-phase="level2-finished"]{
  font-family:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",sans-serif!important;
}

/* Level 1 finish: requested +2px on the two reward-status lines. */
.reward-performance > p{
  font-family:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",sans-serif!important;
  font-size:13px!important;
}
.reward-performance > em{
  font-family:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",sans-serif!important;
  font-size:14px!important;
}

/* Level 2: when the recovered circle is present, keep both collectibles side by side. */
.clue-unlocked .clue-collectible-icons{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  flex:0 0 auto!important;
}

/* Level 3 Cornell discovery: preserve the supplied 1000x501 popup-frame ratio. */
.v22-modal article{
  width:min(90vw,360px)!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1000 / 501!important;
  padding:17px 30px!important;
  background-size:100% 100%!important;
}
.v22-modal small{margin:0 0 5px!important;}
.v22-modal b{margin:5px 0 4px!important;}
.v22-modal p{margin:0!important;line-height:1.4!important;}
.v22-modal button{margin-top:8px!important;}


/* v116 — Level 2 tail repaint only.
   Static full-frame backgrounds replace animated WebP decoding so each tail frame
   fully repaints the cat surface. v95 sizing (116%, no max-width override) restored. */


/* v117 — Level 2 tail combined fix.
   1) Full static frames: no animated-WebP disposal/compositor residue.
   2) Only one child frame is painted at a time (display:none for all others).
   3) Gameplay art is capped to 100%, matching v95's effective Tailwind preflight
      sizing and keeping happy tails away from the overlay clipping edge.
   4) Intro/finish wrappers receive intrinsic-like aspect ratios so cats cannot
      collapse to zero width. */

/* v119 — Level 3 Cornell discovery popup final typography adjustment.
   Only the 藤校菁英 / 学者水晶 discovery modal uses .v22-modal. */
.v22-modal small{top:17px!important;}
.v22-modal b{font-size:24px!important;}

/* v120 — Level 3 Cornell discovery popup final position pass.
   Only .v22-modal (藤校菁英 / 学者水晶) is affected. */
.v22-modal small{top:12px!important;} /* v119 17px -> up 5px */
.v22-modal b{font-size:20px!important;} /* v119 24px -> -4px */
.v22-modal p{position:relative!important;top:10px!important;}
.v22-modal button{position:relative!important;top:15px!important;}

/* v121 — Level 3 Cornell discovery popup final interaction pass.
   Only .v22-modal (藤校菁英 / 学者水晶) is affected. */
.v22-modal small{top:7px!important;} /* v120 12px -> up 5px */
.v22-modal b{position:relative!important;top:6px!important;} /* title down 6px */
.v22-modal p{top:13px!important;} /* v120 10px -> down 3px */
.v22-modal button{
  transition:background-color .12s ease,box-shadow .12s ease,transform .08s ease!important;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.v22-modal button:active{
  background:rgba(218,208,195,.98)!important;
  box-shadow:0 4px 10px rgba(90,75,63,.12)!important;
  transform:translateY(1px)!important;
}


/* v122 — preserve a calm result decoration for reduced-motion users. */
@media (prefers-reduced-motion:reduce){.level3-finish-v76-daisy{animation:none!important;transform:rotate(2deg)!important;}}

.zui-debug-reopen{position:absolute;z-index:9999;left:max(10px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));min-width:58px;height:34px;padding:0 12px;border:1px solid rgba(0,0,0,.14);border-radius:999px;background:rgba(250,247,239,.94);box-shadow:0 8px 20px rgba(0,0,0,.17);color:#3f423e;font:800 10px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.12em;backdrop-filter:blur(8px)}

/* v124 — Ice cave memory echo v2.
   Continuous motion removes the mid-flight "pause" feeling, later names are
   scaled down in TS, two delayed echoes are stronger, old names return more
   visibly, and starlight particles make the cave itself feel responsive. */
.v124-ice-memory-layer{
  isolation:isolate;
  overflow:hidden!important;
}
.v124-memory-name-group{display:contents}
.v74-ice-name-item.v124-memory-name{
  top:var(--echo-top)!important;
  bottom:auto!important;
  opacity:0;
  font-family:"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",sans-serif!important;
  font-weight:300!important;
  letter-spacing:.012em!important;
  transform-origin:50% 50%;
  backface-visibility:hidden;
  animation-name:v124-ice-memory-flow!important;
  animation-duration:var(--echo-duration)!important;
  animation-delay:calc(var(--echo-delay) + var(--echo-lag))!important;
  animation-timing-function:linear!important;
  animation-fill-mode:both!important;
  will-change:transform,opacity,filter!important;
}
.v124-memory-main{
  z-index:4;
  color:rgba(255,255,255,.98)!important;
  text-shadow:0 2px 14px rgba(27,68,87,.40),0 0 22px rgba(245,255,255,.25)!important;
  --echo-alpha:.98;
  --echo-alpha-soft:.68;
  --echo-alpha-mid:.94;
  --echo-alpha-trace:.32;
  --echo-offset:0px;
  --echo-blur:0px;
}
.v124-echo-near{
  z-index:3;
  color:rgba(224,247,252,.46)!important;
  text-shadow:0 0 12px rgba(222,248,255,.18)!important;
  --echo-alpha:.39;
  --echo-alpha-soft:.22;
  --echo-alpha-mid:.34;
  --echo-alpha-trace:.13;
  --echo-offset:7px;
  --echo-blur:.38px;
}
.v124-echo-far{
  z-index:2;
  color:rgba(210,239,248,.30)!important;
  text-shadow:0 0 15px rgba(212,244,251,.14)!important;
  --echo-alpha:.25;
  --echo-alpha-soft:.14;
  --echo-alpha-mid:.22;
  --echo-alpha-trace:.085;
  --echo-offset:14px;
  --echo-blur:.82px;
}
@keyframes v124-ice-memory-flow{
  0%{
    opacity:0;
    filter:blur(calc(var(--echo-blur) + 1.15px));
    transform:translate3d(calc(-50% + var(--echo-offset) + var(--echo-drift)),20vh,0) scale(var(--echo-start-scale));
  }
  14%{
    opacity:var(--echo-alpha-soft);
    filter:blur(calc(var(--echo-blur) + .55px));
    transform:translate3d(calc(-50% + var(--echo-offset) + var(--echo-drift-mid)),8vh,0) scale(.94);
  }
  30%{
    opacity:var(--echo-alpha);
    filter:blur(var(--echo-blur));
    transform:translate3d(calc(-50% + var(--echo-offset) + var(--echo-drift-mid)),-8vh,0) scale(.985);
  }
  52%{
    opacity:var(--echo-alpha-mid);
    filter:blur(var(--echo-blur));
    transform:translate3d(calc(-50% + var(--echo-offset) + var(--echo-drift-late)),-27vh,0) scale(1.002);
  }
  72%{
    opacity:var(--echo-alpha-mid);
    transform:translate3d(calc(-50% + var(--echo-offset) + var(--echo-drift-late)),-43vh,0) scale(1.016);
  }
  86%{
    opacity:var(--echo-alpha-trace);
    filter:blur(calc(var(--echo-blur) + .22px));
    transform:translate3d(calc(-50% + var(--echo-offset) + var(--echo-drift-end)),-54vh,0) scale(1.027);
  }
  100%{
    opacity:0;
    filter:blur(calc(var(--echo-blur) + .6px));
    transform:translate3d(calc(-50% + var(--echo-offset) + var(--echo-drift-end)),-66vh,0) scale(1.04);
  }
}

/* The final name is calmer than the stream but still drifts; it never snaps into
   a fully static hold, so the emotional pause reads as intentional rather than a bug. */
.v74-ice-name-item.v124-final-focus{
  font-weight:400!important;
  animation-name:v124-final-memory-drift!important;
}
.v124-memory-main.v124-final-focus{
  color:#fff!important;
  text-shadow:0 3px 22px rgba(24,65,85,.46),0 0 34px rgba(255,255,255,.30)!important;
}
@keyframes v124-final-memory-drift{
  0%{opacity:0;filter:blur(calc(var(--echo-blur) + 1.25px));transform:translate3d(calc(-50% + var(--echo-offset)),16vh,0) scale(.91)}
  20%{opacity:var(--echo-alpha-soft);filter:blur(calc(var(--echo-blur) + .35px));transform:translate3d(calc(-50% + var(--echo-offset)),2vh,0) scale(.98)}
  38%{opacity:var(--echo-alpha);filter:blur(var(--echo-blur));transform:translate3d(calc(-50% + var(--echo-offset)),-9vh,0) scale(1.035)}
  64%{opacity:var(--echo-alpha);filter:blur(var(--echo-blur));transform:translate3d(calc(-50% + var(--echo-offset)),-14vh,0) scale(1.045)}
  82%{opacity:var(--echo-alpha-mid);transform:translate3d(calc(-50% + var(--echo-offset)),-18vh,0) scale(1.048)}
  100%{opacity:0;filter:blur(calc(var(--echo-blur) + .42px));transform:translate3d(calc(-50% + var(--echo-offset)),-23vh,0) scale(1.05)}
}

/* Persistent cave-wall traces: stronger than v123 but still subordinate to the
   active name. They gather just before the final focus and dissolve with it. */
.v124-memory-cloud{position:absolute;inset:0;z-index:1;pointer-events:none}
.v124-memory-cloud span{
  position:absolute;
  left:var(--cloud-left);
  top:var(--cloud-top);
  font:300 var(--cloud-size)/1 "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  white-space:nowrap;
  color:#effcff;
  opacity:0;
  transform:translate(-50%,-50%) scale(.98);
  filter:blur(.55px);
  text-shadow:0 0 12px rgba(224,249,255,.18);
  animation:v124-memory-cloud-return 6.6s ease-in-out var(--cloud-delay) both;
}
@keyframes v124-memory-cloud-return{
  0%,8%{opacity:0}
  24%{opacity:.075}
  48%{opacity:.14}
  72%{opacity:.105}
  100%{opacity:0}
}

/* Sparse four-point starlight. Particles twinkle and drift slowly rather than
   behaving like confetti, so they read as memory glints in the ice. */
.v124-memory-stars{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.v124-memory-stars i{
  position:absolute;
  left:var(--star-left);
  top:var(--star-top);
  width:var(--star-size);
  height:var(--star-size);
  display:block;
  opacity:0;
  background:rgba(249,255,229,.98);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  filter:drop-shadow(0 0 5px rgba(230,252,255,.95)) drop-shadow(0 0 10px rgba(177,225,244,.55));
  transform:translate3d(0,7px,0) scale(.55) rotate(0deg);
  animation:v124-memory-star var(--star-duration) ease-in-out var(--star-delay) infinite;
}
@keyframes v124-memory-star{
  0%,100%{opacity:0;transform:translate3d(0,8px,0) scale(.48) rotate(0deg)}
  18%{opacity:.24}
  42%{opacity:.9;transform:translate3d(calc(var(--star-drift) * .42),1px,0) scale(1.18) rotate(16deg)}
  67%{opacity:.42;transform:translate3d(calc(var(--star-drift) * .72),-5px,0) scale(.82) rotate(-8deg)}
  84%{opacity:.72}
  100%{opacity:0;transform:translate3d(var(--star-drift),-12px,0) scale(.55) rotate(9deg)}
}

.v75-ice-cave.phase-names .v74-ice-render-base,
.v75-ice-cave.phase-names .v95-ice-objects{
  transform-origin:50% 54%;
  animation:v124-ice-memory-push 24.8s linear both;
  will-change:transform;
}
@keyframes v124-ice-memory-push{from{transform:scale(1)}to{transform:scale(1.019)}}

@media (prefers-reduced-motion:reduce){
  .v74-ice-name-item.v124-memory-name{animation-duration:var(--echo-duration)!important}
  .v124-memory-stars i{animation:v124-memory-star calc(var(--star-duration) * 1.35) ease-in-out var(--star-delay) infinite!important}
  .v75-ice-cave.phase-names .v74-ice-render-base,
  .v75-ice-cave.phase-names .v95-ice-objects{animation:none!important}
}

/* v125 — Ice Echo V3: broader lateral drift and clearly visible full-screen starlight. */
.v124-memory-stars{z-index:1!important;inset:0!important;overflow:hidden!important;}
.v124-memory-stars i{
  min-width:3px;
  min-height:3px;
  opacity:0;
  background:#fbfff2!important;
  filter:drop-shadow(0 0 7px rgba(242,255,255,1)) drop-shadow(0 0 15px rgba(171,224,247,.92))!important;
}
.v124-memory-stars i::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:260%;height:260%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(236,252,255,.58) 0,rgba(203,239,252,.24) 34%,transparent 72%);
  filter:blur(1.4px);
}
@keyframes v124-memory-star{
  0%,100%{opacity:0;transform:translate3d(0,10px,0) scale(.56) rotate(0deg)}
  12%{opacity:.42}
  34%{opacity:1;transform:translate3d(calc(var(--star-drift) * .36),2px,0) scale(1.34) rotate(14deg)}
  58%{opacity:.68;transform:translate3d(calc(var(--star-drift) * .66),-5px,0) scale(.96) rotate(-7deg)}
  78%{opacity:.98;transform:translate3d(calc(var(--star-drift) * .86),-10px,0) scale(1.18) rotate(7deg)}
  100%{opacity:0;transform:translate3d(var(--star-drift),-18px,0) scale(.62) rotate(12deg)}
}


/* v129 — Ice Echo V4: flashback light + recurring identity question.
   A soft white beam opens the memory state, the cave breathes between recall
   pulses, and the final name is washed back into the original ice scene. */
.v129-flashback-memory{isolation:isolate!important;}
.v129-flashback-light{
  position:absolute;inset:-12%;z-index:5;pointer-events:none;opacity:0;
  background:
    radial-gradient(ellipse at 50% 18%,rgba(255,255,255,.92) 0%,rgba(248,253,255,.52) 16%,rgba(226,246,255,.20) 36%,transparent 67%),
    linear-gradient(158deg,transparent 13%,rgba(255,255,255,.30) 39%,rgba(230,247,255,.12) 52%,transparent 73%);
  filter:blur(13px);mix-blend-mode:screen;transform:scale(1.03);
  animation:v129-flashback-light-cycle 22s cubic-bezier(.33,0,.2,1) both;
}
@keyframes v129-flashback-light-cycle{
  0%{opacity:0;transform:scale(1.02) translateY(-2%)}
  3%{opacity:.20}
  7%{opacity:.48;transform:scale(1.055) translateY(0)}
  13%{opacity:.20}
  20%{opacity:.065}
  60%{opacity:.045}
  72%{opacity:.08}
  80%{opacity:.18}
  88%{opacity:.38}
  94%{opacity:.62;transform:scale(1.095) translateY(2%)}
  97%{opacity:.72}
  100%{opacity:0;transform:scale(1.12) translateY(3%)}
}
.v129-flashback-wash{
  position:absolute;inset:-2px;z-index:7;pointer-events:none;background:#fff;opacity:0;
  animation:v129-flashback-wash-cycle 22s linear both;
}
@keyframes v129-flashback-wash-cycle{
  0%{opacity:0} 5%{opacity:.035} 13%{opacity:0} 72%{opacity:0}
  84%{opacity:.035} 91%{opacity:.13} 96%{opacity:.29} 98%{opacity:.36} 100%{opacity:0}
}

/* Repeated low-contrast identity questions: a dense field of inquiry sitting
   behind the actual names, never replacing them as the visual subject. */
.v129-who-field{
  position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
  animation:v129-who-field-phase 22s linear both;
}
.v129-who-field span{
  position:absolute;left:var(--who-left);top:var(--who-top);white-space:nowrap;
  font:300 var(--who-size)/1.1 "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  letter-spacing:.12em;color:rgba(191,199,204,.78);opacity:0;
  text-shadow:0 0 8px rgba(220,236,242,.08);filter:blur(.18px);
  transform:translate3d(-50%,12px,0) scale(.97);
  animation:v129-who-drift var(--who-duration) ease-in-out var(--who-delay) both;
}
@keyframes v129-who-drift{
  0%{opacity:0;transform:translate3d(-50%,13px,0) scale(.96);filter:blur(.8px)}
  20%{opacity:.22;filter:blur(.35px)}
  43%{opacity:var(--who-alpha);transform:translate3d(calc(-50% + var(--who-drift) * .45),2px,0) scale(1);filter:blur(.1px)}
  70%{opacity:.30;transform:translate3d(calc(-50% + var(--who-drift) * .76),-7px,0) scale(1.01)}
  100%{opacity:0;transform:translate3d(calc(-50% + var(--who-drift)),-17px,0) scale(1.015);filter:blur(.7px)}
}
@keyframes v129-who-field-phase{
  0%{opacity:0} 5%{opacity:.78} 13%{opacity:1} 72%{opacity:1} 84%{opacity:.88} 93%{opacity:.34} 100%{opacity:0}
}
.v129-name-question{
  position:absolute;left:var(--question-left);top:var(--question-top);z-index:2;pointer-events:none;
  white-space:nowrap;font:300 14px/1 "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  letter-spacing:.14em;color:rgba(184,192,197,.86);opacity:0;filter:blur(.2px);
  transform:translate3d(-50%,9px,0) scale(.96);
  animation:v129-name-question-pulse var(--question-duration) ease-in-out var(--question-delay) both;
}
@keyframes v129-name-question-pulse{
  0%{opacity:0;filter:blur(.9px);transform:translate3d(-50%,10px,0) scale(.95)}
  18%{opacity:.22}
  36%{opacity:.46;filter:blur(.15px);transform:translate3d(calc(-50% + var(--question-drift) * .36),1px,0) scale(1)}
  58%{opacity:.34;transform:translate3d(calc(-50% + var(--question-drift) * .68),-6px,0) scale(1.01)}
  100%{opacity:0;filter:blur(.75px);transform:translate3d(calc(-50% + var(--question-drift)),-14px,0) scale(1.02)}
}
.v129-name-question-final{animation-duration:2.9s!important;opacity:0!important;}

/* Make the cave itself participate in the flashback instead of remaining a
   static plate underneath the typography. */
.v75-ice-cave.phase-names .v74-ice-render-base,
.v75-ice-cave.phase-names .v95-ice-objects{
  transform-origin:50% 54%;
  animation:v129-ice-memory-flashback 22s linear both!important;
  will-change:transform,filter!important;
}
@keyframes v129-ice-memory-flashback{
  0%{transform:scale(1);filter:brightness(1) saturate(1) contrast(1)}
  5%{transform:scale(1.004);filter:brightness(1.14) saturate(.86) contrast(.96)}
  12%{transform:scale(1.008);filter:brightness(1.04) saturate(.91) contrast(.98)}
  25%{transform:scale(1.012);filter:brightness(.97) saturate(.91) contrast(1.01)}
  58%{transform:scale(1.018);filter:brightness(.95) saturate(.88) contrast(1.02)}
  75%{transform:scale(1.019);filter:brightness(.98) saturate(.90) contrast(1.01)}
  88%{transform:scale(1.021);filter:brightness(1.08) saturate(.84) contrast(.98)}
  96%{transform:scale(1.022);filter:brightness(1.20) saturate(.76) contrast(.95)}
  100%{transform:scale(1.004);filter:brightness(1) saturate(1) contrast(1)}
}
.v124-memory-cloud{animation:v129-secondary-memory-fade 22s linear both;}
@keyframes v129-secondary-memory-fade{0%,72%{opacity:1}86%{opacity:.9}94%{opacity:.4}100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .v129-flashback-light,.v129-flashback-wash,.v129-who-field,.v129-who-field span,.v129-name-question{animation:none!important;}
  .v129-who-field{opacity:.45!important;}
  .v129-who-field span:nth-child(-n+10){opacity:.22!important;}
}


/* v130 — Ice Echo V5: stronger flashback threshold and visible identity chorus.
   The debug route now begins at the ice-scratch phase so the memory effect is
   experienced through the same scratch -> recall transition as normal play. */
.v129-flashback-memory{isolation:isolate!important;}
.v129-flashback-light{
  z-index:6!important;inset:-18%!important;filter:blur(8px)!important;mix-blend-mode:screen!important;
  background:
    radial-gradient(ellipse at 50% 14%,rgba(255,255,255,1) 0%,rgba(255,255,255,.90) 11%,rgba(242,251,255,.62) 25%,rgba(214,241,255,.30) 46%,transparent 72%),
    linear-gradient(160deg,transparent 6%,rgba(255,255,255,.12) 22%,rgba(255,255,255,.72) 42%,rgba(225,245,255,.28) 58%,transparent 78%)!important;
  animation:v130-flashback-light-cycle 23.73s cubic-bezier(.28,0,.18,1) both!important;
}
@keyframes v130-flashback-light-cycle{
  0%{opacity:0;transform:scale(1.01) translateY(-4%)}
  1.5%{opacity:.36}
  4.5%{opacity:.92;transform:scale(1.065) translateY(0)}
  8%{opacity:.70}
  13%{opacity:.28}
  19%{opacity:.09}
  65%{opacity:.07}
  76%{opacity:.13}
  84%{opacity:.28}
  89%{opacity:.48}
  93%{opacity:.70;transform:scale(1.10) translateY(1%)}
  96%{opacity:.91;transform:scale(1.14) translateY(2%)}
  98.4%{opacity:1;transform:scale(1.18) translateY(3%)}
  100%{opacity:0;transform:scale(1.19) translateY(3%)}
}
.v129-flashback-wash{
  z-index:8!important;background:rgba(255,255,255,1)!important;
  animation:v130-flashback-wash-cycle 23.73s ease-in-out both!important;
}
@keyframes v130-flashback-wash-cycle{
  0%{opacity:0}
  2%{opacity:.07}
  4.5%{opacity:.23}
  7%{opacity:.13}
  12%{opacity:.025}
  18%,77%{opacity:0}
  84%{opacity:.04}
  89%{opacity:.13}
  93%{opacity:.30}
  96%{opacity:.53}
  98.4%{opacity:.82}
  99.2%{opacity:.90}
  100%{opacity:0}
}
/* Identity questions are intentionally readable now: about 50% apparent
   opacity, dense and recurrent, but kept below the primary name layer. */
.v129-who-field{z-index:3!important;animation:v130-who-field-phase 23.73s linear both!important;}
.v129-who-field span{
  color:rgba(150,157,164,.98)!important;
  text-shadow:0 1px 3px rgba(255,255,255,.72),0 0 4px rgba(16,35,44,.25)!important;
  filter:blur(.06px)!important;
  animation-name:v130-who-drift!important;
  animation-timing-function:ease-in-out!important;
  animation-iteration-count:infinite!important;
}
@keyframes v130-who-drift{
  0%{opacity:0;transform:translate3d(-50%,15px,0) scale(.96)}
  16%{opacity:.34}
  36%{opacity:var(--who-alpha);transform:translate3d(calc(-50% + var(--who-drift) * .35),3px,0) scale(1)}
  63%{opacity:calc(var(--who-alpha) * .92);transform:translate3d(calc(-50% + var(--who-drift) * .68),-7px,0) scale(1.015)}
  84%{opacity:.30}
  100%{opacity:0;transform:translate3d(calc(-50% + var(--who-drift)),-20px,0) scale(1.025)}
}
@keyframes v130-who-field-phase{
  0%{opacity:0} 4%{opacity:.72} 8%{opacity:1} 76%{opacity:1} 86%{opacity:.82} 93%{opacity:.34} 97%{opacity:.10} 100%{opacity:0}
}
.v129-name-question{
  z-index:3!important;color:rgba(135,143,150,.98)!important;
  text-shadow:0 1px 3px rgba(255,255,255,.72),0 0 4px rgba(10,28,36,.24)!important;
  font-size:15px!important;
  animation-name:v130-name-question-pulse!important;
}
@keyframes v130-name-question-pulse{
  0%{opacity:0;filter:blur(.7px);transform:translate3d(-50%,11px,0) scale(.95)}
  14%{opacity:.32}
  32%{opacity:.58;filter:blur(.05px);transform:translate3d(calc(-50% + var(--question-drift) * .34),1px,0) scale(1)}
  58%{opacity:.48;transform:translate3d(calc(-50% + var(--question-drift) * .68),-7px,0) scale(1.01)}
  80%{opacity:.24}
  100%{opacity:0;filter:blur(.65px);transform:translate3d(calc(-50% + var(--question-drift)),-15px,0) scale(1.02)}
}
/* Cave itself participates more visibly: brief bleaching into memory, deepened
   middle recall, then a stronger final white-out before returning to ice. */
.v75-ice-cave.phase-names .v74-ice-render-base,
.v75-ice-cave.phase-names .v95-ice-objects{
  animation:v130-ice-memory-flashback 23.73s linear both!important;
}
@keyframes v130-ice-memory-flashback{
  0%{transform:scale(1);filter:brightness(1) saturate(1) contrast(1)}
  4.5%{transform:scale(1.007);filter:brightness(1.32) saturate(.70) contrast(.90)}
  11%{transform:scale(1.010);filter:brightness(1.10) saturate(.84) contrast(.96)}
  26%{transform:scale(1.014);filter:brightness(.96) saturate(.88) contrast(1.02)}
  62%{transform:scale(1.020);filter:brightness(.93) saturate(.84) contrast(1.03)}
  80%{transform:scale(1.022);filter:brightness(.99) saturate(.87) contrast(1.01)}
  91%{transform:scale(1.025);filter:brightness(1.20) saturate(.72) contrast(.94)}
  97%{transform:scale(1.028);filter:brightness(1.52) saturate(.42) contrast(.82)}
  99%{transform:scale(1.030);filter:brightness(1.68) saturate(.26) contrast(.76)}
  100%{transform:scale(1.004);filter:brightness(1) saturate(1) contrast(1)}
}
.v124-memory-cloud{animation:v130-secondary-memory-fade 23.73s linear both!important;}
@keyframes v130-secondary-memory-fade{0%,74%{opacity:1}86%{opacity:.95}94%{opacity:.58}98%{opacity:.12}100%{opacity:0}}


/* v131 — full-screen ice flashback handoff + accumulating identity scroll +
   whole-Level-1 mobile long-press guard. */

/* Level 1 driving is a touch-control surface. Suppress every browser selection
   affordance, including the lower-left circle counter and HUD text. */
.drive-stage[data-phase="playing"],
.drive-stage[data-phase="playing"] *{
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
  -webkit-tap-highlight-color:transparent!important;
}
.drive-stage[data-phase="playing"] img,
.drive-stage[data-phase="playing"] canvas{
  -webkit-user-drag:none!important;
}

/* Pre-mount the heavy memory DOM during scratching so the scratch -> names
   handoff does not pay a layout/mount cost at the exact transition frame. */
.v131-memory-preloaded{
  visibility:hidden;
  opacity:0;
}
.v75-ice-cave.phase-names .v131-memory-preloaded{
  visibility:visible;
  opacity:1;
}
.v75-ice-cave:not(.phase-names) .v131-memory-preloaded,
.v75-ice-cave:not(.phase-names) .v131-memory-preloaded *{
  animation-play-state:paused!important;
}
.v75-ice-cave.phase-names .v131-memory-preloaded,
.v75-ice-cave.phase-names .v131-memory-preloaded *{
  animation-play-state:running!important;
}

/* The old white wash lived inside .v74-ice-name-layer, whose top/bottom mask
   intentionally fades typography. This dedicated sibling sits outside that mask,
   so the flash now genuinely covers the full phone screen from top to bottom. */
.v131-fullscreen-flash{
  position:absolute;
  inset:-2px;
  z-index:28;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(ellipse at 50% 43%,rgba(255,255,255,1) 0%,rgba(255,255,255,.98) 38%,rgba(248,253,255,.96) 70%,rgba(242,250,255,.94) 100%),
    #fff;
  will-change:opacity,filter;
}
.v75-ice-cave.recall-prelude .v131-fullscreen-flash{
  animation:v131-recall-preflash .42s cubic-bezier(.2,.72,.18,1) both;
}
@keyframes v131-recall-preflash{
  0%{opacity:0;filter:brightness(1)}
  58%{opacity:.54;filter:brightness(1.06)}
  100%{opacity:.68;filter:brightness(1.09)}
}
.v75-ice-cave.phase-names .v131-fullscreen-flash{
  animation:v131-fullscreen-flash-cycle 23.73s cubic-bezier(.24,0,.16,1) both;
}
@keyframes v131-fullscreen-flash-cycle{
  0%{opacity:.68;filter:brightness(1.09)}
  2.2%{opacity:.80;filter:brightness(1.13)}
  5.2%{opacity:.48;filter:brightness(1.07)}
  10%{opacity:.16;filter:brightness(1.02)}
  17%{opacity:.035;filter:brightness(1)}
  77%{opacity:.025;filter:brightness(1)}
  86%{opacity:.10;filter:brightness(1.02)}
  91%{opacity:.26;filter:brightness(1.05)}
  95%{opacity:.50;filter:brightness(1.09)}
  97.7%{opacity:.76;filter:brightness(1.15)}
  99.1%{opacity:.96;filter:brightness(1.20)}
  100%{opacity:0;filter:brightness(1)}
}
/* Fade the scratched frost directly into the opening flash rather than holding
   a completed frame for three seconds. */
.v75-ice-cave.recall-prelude .v22-ice-canvas{
  opacity:0!important;
  transition:opacity .38s ease-out!important;
}
.v75-ice-cave.recall-prelude .v75-ice-scratch-label{
  opacity:0!important;
  transition:opacity .22s ease-out!important;
}

/* Identity questions now arrive progressively. Every phrase starts below the
   viewport, rises through the full cave, and keeps its existing sideways drift. */
.v129-who-field{
  inset:0!important;
  opacity:1!important;
  animation:v131-who-field-envelope 23.73s linear both!important;
}
.v129-who-field span{
  top:auto!important;
  bottom:calc(-10% - var(--who-start-offset))!important;
  animation-name:v131-who-rise!important;
  animation-timing-function:linear!important;
  animation-iteration-count:infinite!important;
  animation-fill-mode:both!important;
  will-change:transform,opacity!important;
}
@keyframes v131-who-rise{
  0%{opacity:0;transform:translate3d(-50%,0,0) scale(.96);filter:blur(.75px)}
  8%{opacity:.20;filter:blur(.30px)}
  18%{opacity:var(--who-alpha);transform:translate3d(calc(-50% + var(--who-drift) * .16),-18vh,0) scale(.99);filter:blur(.08px)}
  46%{opacity:calc(var(--who-alpha) * .94);transform:translate3d(calc(-50% + var(--who-drift) * .48),-58vh,0) scale(1.005)}
  72%{opacity:calc(var(--who-alpha) * .78);transform:translate3d(calc(-50% + var(--who-drift) * .76),-94vh,0) scale(1.015)}
  92%{opacity:.18;filter:blur(.25px)}
  100%{opacity:0;transform:translate3d(calc(-50% + var(--who-drift)),-126vh,0) scale(1.025);filter:blur(.75px)}
}
@keyframes v131-who-field-envelope{
  0%{opacity:0}
  3%{opacity:.40}
  10%{opacity:.74}
  22%{opacity:1}
  82%{opacity:1}
  90%{opacity:.72}
  96%{opacity:.22}
  100%{opacity:0}
}

/* The name-local question follows the same bottom-to-top grammar, but over a
   shorter path so it still reads as the question immediately preceding the answer. */
.v129-name-question{
  top:auto!important;
  bottom:-6%!important;
  animation-name:v131-name-question-rise!important;
}
@keyframes v131-name-question-rise{
  0%{opacity:0;filter:blur(.7px);transform:translate3d(-50%,0,0) scale(.95)}
  12%{opacity:.30}
  28%{opacity:.58;filter:blur(.05px);transform:translate3d(calc(-50% + var(--question-drift) * .28),-34px,0) scale(1)}
  58%{opacity:.47;transform:translate3d(calc(-50% + var(--question-drift) * .62),-78px,0) scale(1.01)}
  82%{opacity:.22}
  100%{opacity:0;filter:blur(.65px);transform:translate3d(calc(-50% + var(--question-drift)),-126px,0) scale(1.02)}
}

@media (prefers-reduced-motion:reduce){
  .v131-fullscreen-flash{animation:none!important;opacity:0!important;}
}


/* v132 — final-name hold + denser identity chorus. */
.v74-ice-name-item.v124-final-focus{
  animation-name:v132-final-memory-hold!important;
}
@keyframes v132-final-memory-hold{
  0%{opacity:0;filter:blur(calc(var(--echo-blur) + 1.25px));transform:translate3d(calc(-50% + var(--echo-offset)),16vh,0) scale(.91)}
  20%{opacity:var(--echo-alpha-soft);filter:blur(calc(var(--echo-blur) + .35px));transform:translate3d(calc(-50% + var(--echo-offset)),2vh,0) scale(.98)}
  38%{opacity:var(--echo-alpha);filter:blur(var(--echo-blur));transform:translate3d(calc(-50% + var(--echo-offset)),-9vh,0) scale(1.035)}
  55%{opacity:var(--echo-alpha);filter:blur(var(--echo-blur));transform:translate3d(calc(-50% + var(--echo-offset)),-13vh,0) scale(1.044)}
  78%{opacity:var(--echo-alpha);filter:blur(var(--echo-blur));transform:translate3d(calc(-50% + var(--echo-offset)),-13.8vh,0) scale(1.046)}
  88%{opacity:var(--echo-alpha-mid);filter:blur(calc(var(--echo-blur) + .08px));transform:translate3d(calc(-50% + var(--echo-offset)),-16.5vh,0) scale(1.048)}
  100%{opacity:0;filter:blur(calc(var(--echo-blur) + .48px));transform:translate3d(calc(-50% + var(--echo-offset)),-21vh,0) scale(1.05)}
}

/* Keep the closing flash bright through the added 1.5s final-name pause, then
   let it visibly dissolve back into the cave instead of snapping off. */
.v75-ice-cave.phase-names .v131-fullscreen-flash{
  animation:v132-fullscreen-flash-cycle 23.73s cubic-bezier(.24,0,.16,1) both!important;
}
@keyframes v132-fullscreen-flash-cycle{
  0%{opacity:.68;filter:brightness(1.09)}
  2.2%{opacity:.80;filter:brightness(1.13)}
  5.2%{opacity:.48;filter:brightness(1.07)}
  10%{opacity:.16;filter:brightness(1.02)}
  17%{opacity:.035;filter:brightness(1)}
  76%{opacity:.025;filter:brightness(1)}
  84%{opacity:.12;filter:brightness(1.02)}
  88%{opacity:.32;filter:brightness(1.06)}
  91.5%{opacity:.62;filter:brightness(1.11)}
  94%{opacity:.92;filter:brightness(1.18)}
  96%{opacity:.96;filter:brightness(1.20)}
  97.5%{opacity:.82;filter:brightness(1.16)}
  99%{opacity:.42;filter:brightness(1.08)}
  100%{opacity:0;filter:brightness(1)}
}

/* 70 concurrent/staggered questions = +25% versus v131. Slightly wider text
   footprint and faster accumulation produce an approximately 75%-viewport peak
   chorus while leaving the primary names readable above it. */
.v129-who-field span{
  letter-spacing:.16em!important;
}
@keyframes v131-who-field-envelope{
  0%{opacity:0}
  3%{opacity:.42}
  9%{opacity:.78}
  18%{opacity:1}
  86%{opacity:1}
  93%{opacity:.72}
  97%{opacity:.26}
  100%{opacity:0}
}


/* v133 — final answer centers in the viewport and receives one more 1.5s hold. */
.v74-ice-name-item.v124-final-focus{
  top:50%!important;
  bottom:auto!important;
  animation-name:v133-final-memory-center-hold!important;
}
@keyframes v133-final-memory-center-hold{
  0%{
    opacity:0;
    filter:blur(calc(var(--echo-blur) + 1.25px));
    transform:translate3d(calc(-50% + var(--echo-offset)),20vh,0) scale(.91);
  }
  18%{
    opacity:var(--echo-alpha-soft);
    filter:blur(calc(var(--echo-blur) + .32px));
    transform:translate3d(calc(-50% + var(--echo-offset)),4vh,0) scale(.98);
  }
  34%{
    opacity:var(--echo-alpha);
    filter:blur(var(--echo-blur));
    transform:translate3d(calc(-50% + var(--echo-offset)),-50%,0) scale(1.045);
  }
  75%{
    opacity:var(--echo-alpha);
    filter:blur(var(--echo-blur));
    transform:translate3d(calc(-50% + var(--echo-offset)),-50%,0) scale(1.045);
  }
  88%{
    opacity:var(--echo-alpha-mid);
    filter:blur(calc(var(--echo-blur) + .08px));
    transform:translate3d(calc(-50% + var(--echo-offset)),-50%,0) scale(1.05);
  }
  100%{
    opacity:0;
    filter:blur(calc(var(--echo-blur) + .52px));
    transform:translate3d(calc(-50% + var(--echo-offset)),-50%,0) scale(1.06);
  }
}

/* v133 total memory timeline = 25.70s after the extra final-name hold. Keep the
   answer centered while the closing white recall builds, then dissolve back. */
.v75-ice-cave.phase-names .v131-fullscreen-flash{
  animation:v133-fullscreen-flash-cycle 25.70s cubic-bezier(.24,0,.16,1) both!important;
}
@keyframes v133-fullscreen-flash-cycle{
  0%{opacity:.68;filter:brightness(1.09)}
  2.2%{opacity:.80;filter:brightness(1.13)}
  5.2%{opacity:.48;filter:brightness(1.07)}
  10%{opacity:.16;filter:brightness(1.02)}
  17%{opacity:.035;filter:brightness(1)}
  78%{opacity:.025;filter:brightness(1)}
  84%{opacity:.10;filter:brightness(1.02)}
  88%{opacity:.28;filter:brightness(1.05)}
  92%{opacity:.58;filter:brightness(1.10)}
  95%{opacity:.93;filter:brightness(1.18)}
  97%{opacity:.98;filter:brightness(1.21)}
  98.5%{opacity:.80;filter:brightness(1.15)}
  99.4%{opacity:.40;filter:brightness(1.07)}
  100%{opacity:0;filter:brightness(1)}
}


/* ZUI LEVEL32 1.0_v1 -------------------------------------------------------
   1) Level 2 finish cats: preserve intrinsic image proportions; do not force
      the APNG/WebP artwork through a CSS aspect-ratio box.
   2) Level 3 wall scene: Moli is now a draggable decoy and snaps back when
      released. Rabbit remains the only successful rescue target. */
.cat-finish-duo .cat-art{
  width:auto!important;
  height:196px!important;
  max-width:none!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  flex:0 0 auto!important;
}
.v22-partners .v22-moli{
  z-index:9!important;
  touch-action:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  -webkit-user-drag:none!important;
  transform:translate(var(--moli-x,0px),var(--moli-y,0px))!important;
  transition:transform .28s ease!important;
  cursor:grab;
}
.v22-partners .v22-moli.dragging{
  z-index:12!important;
  transition:none!important;
  cursor:grabbing;
}


/* ZUI LEVEL32 1.0_v3 — same-domain Visitor / ZUI private mode */
.home-v15-envelope.zui-access-trigger{
  pointer-events:auto!important;
  touch-action:manipulation;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
}
.zui-access-backdrop{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  padding:22px;
  background:rgba(26,31,29,.54);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.zui-access-dialog{
  position:relative;
  width:min(340px,calc(100vw - 32px));
  padding:28px 24px 22px;
  border:1px solid rgba(116,139,128,.28);
  border-radius:24px;
  background:#f6efe3;
  color:#3f3c36;
  box-shadow:0 18px 50px rgba(35,43,39,.24);
  text-align:center;
}
.zui-access-dialog h3{margin:3px 0 14px;font-size:21px;font-weight:650;letter-spacing:.02em}
.zui-access-kicker{margin:0;color:#5d9c8c;font-size:10px;font-weight:700;letter-spacing:.18em}
.zui-access-note{margin:0 0 16px;color:#77746c;font-size:12px;line-height:1.7}
.zui-access-dialog input{
  display:block;width:100%;box-sizing:border-box;
  margin:8px 0 10px;padding:13px 14px;
  border:1px solid rgba(106,137,124,.28);border-radius:13px;
  background:rgba(255,255,255,.72);color:#34342f;font:inherit;outline:none;
}
.zui-access-dialog input:focus{border-color:rgba(73,165,139,.72);box-shadow:0 0 0 3px rgba(73,165,139,.11)}
.zui-access-submit,.zui-access-exit{
  width:100%;margin-top:5px;padding:12px 16px;border:0;border-radius:13px;
  background:#4cc0a1;color:#18352e;font-weight:700;font-size:14px;
}
.zui-access-submit:disabled{opacity:.55}
.zui-access-exit{background:#d9e5df;color:#405049}
.zui-access-close{
  position:absolute;right:12px;top:10px;width:32px;height:32px;border:0;border-radius:50%;
  background:transparent;color:#79766f;font-size:23px;line-height:1;
}
.zui-access-error{margin:2px 0 8px;color:#a95e59;font-size:12px;line-height:1.5}
.zui-debug-panel .zui-mode-state{font-weight:700;color:#8bd7c4}

/* ZUI LEVEL32 1.0_v8 — home viewport fit + test-only device preview
   Keep the scrapbook board at one logical design size and scale the whole
   composition as a unit. This prevents short/wide Safari viewports from
   vertically squeezing the background while leaving fixed-size children at
   their original size (the overlap seen around Level 3 / pen / envelope). */
.drive-stage[data-phase="home"]{
  height:min(var(--zui-visual-height,100dvh),880px)!important;
  min-height:0!important;
}
.home-v15-overlay{
  overflow:hidden!important;
  padding-top:max(6px,env(safe-area-inset-top),var(--zui-sim-safe-top,0px))!important;
  padding-right:max(6px,env(safe-area-inset-right))!important;
  padding-bottom:max(6px,env(safe-area-inset-bottom),var(--zui-sim-safe-bottom,0px))!important;
  padding-left:max(6px,env(safe-area-inset-left))!important;
}
.home-card.home-scrapbook-card.home-v15-board{
  width:410px!important;
  height:657.452px!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  transform:scale(var(--home-fit-scale,1))!important;
  transform-origin:50% 50%!important;
  will-change:transform;
}
/* Neutralise the old width/height-specific partial resizing: v4 scales the
   entire board instead, so every decoration, button and hit area stays aligned. */
@media (max-height:710px){
  .home-card.home-scrapbook-card.home-v15-board{width:410px!important;max-height:none!important;}
}
@media (max-width:420px){
  .home-v15-overlay{padding-top:max(6px,env(safe-area-inset-top),var(--zui-sim-safe-top,0px))!important;padding-bottom:max(6px,env(safe-area-inset-bottom),var(--zui-sim-safe-bottom,0px))!important;}
  .home-card.home-scrapbook-card.home-v15-board{width:410px!important;height:657.452px!important;}
  .home-v15-header{top:124px!important;left:52px!important;right:52px!important;}
  .home-v15-header h1{font-size:29px!important;}
  .home-v15-level-list{left:41px!important;right:41px!important;top:186px!important;gap:6px!important;}
  .home-level-card.home-v15-level-card{height:109px!important;grid-template-columns:70px minmax(0,1fr) 66px!important;padding:17px 18px 17px 19px!important;}
  .home-v15-board .home-level-number{width:70px!important;font-size:44px!important;}
  .home-v15-board .home-level-copy strong{font-size:18px!important;}
  .home-v15-board .home-reward-slot{width:66px!important;height:66px!important;}
  .home-entry-button.home-v15-entry-button{left:85px!important;right:85px!important;bottom:33px!important;height:69px!important;font-size:19px!important;}
}

/* Test-only simulated device viewport panel. Production never renders it. */
.device-preview-backdrop{
  position:fixed;inset:0;z-index:180;
  display:flex;align-items:center;justify-content:center;
  padding:12px;background:rgba(16,19,18,.78);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.device-preview-dialog{
  width:min(980px,calc(100vw - 24px));height:min(94dvh,900px);
  display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px;
  padding:14px;border:1px solid rgba(255,255,255,.16);border-radius:22px;
  background:#1b201f;color:#eef5f1;box-shadow:0 24px 80px rgba(0,0,0,.5);
  overflow:hidden;
}
.device-preview-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.device-preview-dialog>header>div{display:flex;min-width:0;flex-direction:column;gap:2px;}
.device-preview-dialog>header b{font-size:16px;}
.device-preview-dialog>header small{color:rgba(255,255,255,.58);font-size:10px;}
.device-preview-dialog>header>button{
  width:34px;height:34px;border:1px solid rgba(255,255,255,.18);border-radius:11px;
  color:#fff;background:rgba(255,255,255,.07);font-size:22px;cursor:pointer;
}
.device-preview-profile-list{display:flex;gap:6px;overflow-x:auto;padding:1px 0 5px;scrollbar-width:thin;}
.device-preview-profile-list button{
  flex:0 0 auto;padding:7px 9px;border:1px solid rgba(255,255,255,.13);border-radius:999px;
  color:rgba(255,255,255,.72);background:rgba(255,255,255,.05);font-size:10px;cursor:pointer;
}
.device-preview-profile-list button.active{color:#16382c;border-color:#7df1c0;background:#7df1c0;font-weight:800;}
.device-preview-canvas{
  min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto;
  border-radius:16px;background:radial-gradient(circle at 50% 30%,rgba(125,241,192,.08),transparent 42%),#111615;
}
.device-preview-space{position:relative;flex:0 0 auto;}
.device-preview-device{
  position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;
  border:8px solid #080a0a;border-radius:38px;background:#ECD8BA;
  box-shadow:0 16px 44px rgba(0,0,0,.48);
}
.device-preview-device iframe{display:block;width:100%;height:100%;border:0;background:#ECD8BA;}
.device-preview-cutout{position:absolute;z-index:8;top:0;left:50%;pointer-events:none;background:#080a0a;transform:translateX(-50%);}
.device-preview-device.shape-notch .device-preview-cutout{width:156px;height:29px;border-radius:0 0 16px 16px;}
.device-preview-device.shape-island .device-preview-cutout{top:11px;width:112px;height:31px;border-radius:999px;}
.device-preview-device.shape-punch .device-preview-cutout{top:11px;width:20px;height:20px;border-radius:50%;}
.device-preview-note{margin:0;color:rgba(255,255,255,.52);font-size:10px;line-height:1.45;text-align:center;}
body[data-device-preview] .zui-access-backdrop{display:none!important;}


/* ZUI LEVEL32 1.0_v8 — phone centering + real browser viewport adaptation
   iPad v4 layout is intentionally left untouched. */
@media (max-width:600px){
  /* Home: centre the logical 410x657 artboard explicitly in the usable visual
     viewport. Do not rely on Grid centering of a transformed oversized child. */
  .drive-stage[data-phase="home"] .home-v15-overlay{
    display:block!important;
    position:absolute!important;
    inset:0!important;
  }
  .drive-stage[data-phase="home"] .home-card.home-scrapbook-card.home-v15-board{
    position:absolute!important;
    left:var(--home-fit-center-x,50%)!important;
    top:var(--home-fit-center-y,50%)!important;
    margin:0!important;
    transform:translate(-50%,-50%) scale(var(--home-fit-scale,1))!important;
    transform-origin:50% 50%!important;
  }

  /* Level 3 splash: use the same real visual viewport height that the home
     screen uses. The internal artwork coordinates remain the confirmed phone
     layout (figure 4); only the stage-height source changes from static svh. */
  .drive-stage[data-phase="level3-intro"]{
    height:min(var(--zui-visual-height,100dvh),880px)!important;
    min-height:0!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-overlay{
    position:absolute!important;
    inset:0!important;
    padding:0!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-board{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
  }
}

/* Device preview now has a physical-screen frame with browser chrome outside
   the iframe. This makes phone previews match real Safari screenshots instead
   of granting the webpage the entire physical screen height. */
.device-preview-device{background:#090b0b!important;}
.device-preview-device iframe{
  position:absolute!important;
  left:0!important;
  width:100%!important;
  border:0!important;
  background:#ECD8BA!important;
}


/* ZUI LEVEL32 1.0_v8 — Level 3 intro lower-cluster proportional layout
   Phone only. Home and iPad adaptations from v5/v4 are intentionally untouched.
   The decorated button, review action, hint copy and heart now use the white
   panel's width-derived coordinate system instead of flex/margin accumulation. */
@media (max-width:600px){
  .drive-stage[data-phase="level3-intro"] .level3-splash-board{
    /* Decorated panel is 83.4vw wide and has a 700:1010 native ratio. */
    --l3-panel-top:calc(16.4% - 20px);
    --l3-panel-height:120.34vw;
  }

  /* Make the content layer a board-sized coordinate surface. The top copy keeps
     the previously confirmed position; only the unstable lower controls leave
     normal flex flow. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-content{
    left:0!important;
    right:0!important;
    top:0!important;
    width:100%!important;
    height:100%!important;
    display:block!important;
    pointer-events:none!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-intro-copy{
    position:absolute!important;
    left:11.8%!important;
    right:11.4%!important;
    top:calc(20.45% - 20px)!important;
    width:auto!important;
    margin:0!important;
    pointer-events:none!important;
  }

  /* Main journey button: scale continuously with phone width. Removing the old
     236px minimum is important on 344/360/375px devices. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-start{
    position:absolute!important;
    z-index:10!important;
    left:50%!important;
    top:calc(var(--l3-panel-top) + 82.9vw)!important;
    width:min(56.8vw,244px)!important;
    min-width:0!important;
    height:auto!important;
    aspect-ratio:292 / 97!important;
    margin:0!important;
    transform:translateX(-50%)!important;
    pointer-events:auto!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-start:active{
    transform:translateX(-50%) translateY(1px) scale(.992)!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-start span{
    font-size:min(4.65vw,20px)!important;
    transform:translateY(-4px)!important;
  }

  /* Hint row and heart get their own stable slot below the main button. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint{
    position:absolute!important;
    z-index:11!important;
    left:0!important;
    right:0!important;
    top:calc(var(--l3-panel-top) + 103.8vw)!important;
    width:100%!important;
    margin:0!important;
    transform:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    pointer-events:none!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint > small{
    font-size:min(2.1vw,9px)!important;
    line-height:1.18!important;
    white-space:nowrap!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint .level3-splash-heart{
    width:min(5.6vw,24px)!important;
    height:auto!important;
    aspect-ratio:24 / 22!important;
    margin-top:min(2.7vw,12px)!important;
  }

  /* Completed-run review button occupies a panel-relative bottom-right slot and
     scales with the same phone width as the panel/main button. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-review-anchor .level3-splash-review-letter{
    right:11.5%!important;
    top:86.2%!important;
    bottom:auto!important;
    width:min(16.3vw,70px)!important;
    height:min(7vw,30px)!important;
    padding:0 min(1.4vw,6px)!important;
    border-radius:min(2.1vw,9px)!important;
    font-size:min(2.3vw,10px)!important;
  }
}

/* ZUI LEVEL32 1.0_v8 — Level 3 splash phone vertical spacing refinement.
   v5 home centering and iPad layouts are intentionally untouched.
   - iPhone 13/14 + Pro class: journey button +10px.
   - SE / Android 360 / fold-outer narrow class: create more separation between
     the intro copy and journey button while preserving the lower review/hint slots. */
@media (min-width:386px) and (max-width:400px) and (min-height:670px) and (max-height:730px){
  .drive-stage[data-phase="level3-intro"] .level3-splash-start{
    top:calc(var(--l3-panel-top) + 82.9vw + 10px)!important;
  }
}

@media (max-width:365px), (max-width:380px) and (max-height:610px){
  /* Give the copy one extra breath upward on genuinely narrow/short phones. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-intro-copy > p{
    transform:translateY(-18px)!important;
  }

  /* Narrow phones need both a slightly smaller CTA and a lower slot so it no
     longer covers the final intro sentence. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-start{
    top:calc(var(--l3-panel-top) + 82.9vw + 14px)!important;
    width:min(52vw,224px)!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-start span{
    font-size:min(4.25vw,18px)!important;
  }

  /* Keep the review action and bottom hint visually attached to the CTA after
     the CTA moves down, instead of letting the three controls compress. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-review-anchor .level3-splash-review-letter{
    top:87.8%!important;
    width:min(15.8vw,66px)!important;
    height:min(6.6vw,28px)!important;
    font-size:min(2.15vw,9px)!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint{
    top:calc(var(--l3-panel-top) + 103.8vw + 8px)!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint .level3-splash-heart{
    margin-top:min(2.3vw,10px)!important;
  }
}

/* ZUI LEVEL32 1.0_v8 — Level 3 intro device-specific final spacing pass.
   Keeps v7 home/iPad behavior intact and only refines the journey CTA on the
   requested phone classes. */

/* iPhone 13/14 Safari viewport: another +10px from v7 (20px total vs v6 base). */
@media (min-width:388px) and (max-width:391px){
  .drive-stage[data-phase="level3-intro"] .level3-splash-start{
    top:calc(var(--l3-panel-top) + 82.9vw + 20px)!important;
  }
}

/* Android 360 narrow: another +15px from v7 (29px total vs v6 base). */
@media (min-width:357px) and (max-width:363px){
  .drive-stage[data-phase="level3-intro"] .level3-splash-start{
    top:calc(var(--l3-panel-top) + 82.9vw + 29px)!important;
  }
}

/* Android 412 wide: +15px from the v6/v7 base slot. */
@media (min-width:409px) and (max-width:415px){
  .drive-stage[data-phase="level3-intro"] .level3-splash-start{
    top:calc(var(--l3-panel-top) + 82.9vw + 15px)!important;
  }
}

/* Foldable outer display: the problem is vertical crowding above the CTA rather
   than lack of room below it. Lift only the explanatory copy farther upward so
   the existing compact CTA/review/hint cluster keeps its safe bottom spacing. */
@media (max-width:350px) and (min-height:620px){
  .drive-stage[data-phase="level3-intro"] .level3-splash-intro-copy > p{
    transform:translateY(-38px)!important;
  }
}


/* ZUI LEVEL32 1.0_v10 — Level 3 intro unified mobile vertical rhythm.
   iPad layouts remain untouched. Phone layouts now use the same natural
   blue-line -> description -> CTA rhythm as the confirmed iPad portrait
   reference instead of device-specific pixel offsets. */
@media (max-width:600px){
  .drive-stage[data-phase="level3-intro"] .level3-splash-content{
    left:11.8%!important;
    right:11.4%!important;
    top:calc(var(--l3-panel-top) + 8.2vw)!important;
    width:auto!important;
    height:auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    text-align:center!important;
    pointer-events:none!important;
  }

  .drive-stage[data-phase="level3-intro"] .level3-splash-intro-copy{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    width:100%!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    flex:0 0 auto!important;
    transform:translateY(15px)!important;
    pointer-events:none!important;
  }

  /* Reset every v7/v8 per-device copy nudge. The iPad reference uses one
     continuous text rhythm, so phones now inherit exactly that rhythm. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-intro-copy > p{
    position:static!important;
    inset:auto!important;
    width:auto!important;
    margin:22px 0 0!important;
    transform:translateY(-10px)!important;
    color:#686961!important;
    font-size:clamp(8px,2.35vw,10px)!important;
    line-height:1.64!important;
    font-weight:500!important;
  }

  .drive-stage[data-phase="level3-intro"] .level3-splash-underline{
    position:static!important;
    width:min(53.6vw,236px)!important;
    height:auto!important;
    aspect-ratio:236 / 23!important;
    margin-top:min(1.15vw,5px)!important;
    transform:none!important;
  }

  /* CTA returns to normal flow, exactly like the iPad portrait layout.
     This removes every device-specific top offset from v6-v8. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-start{
    position:relative!important;
    z-index:10!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:min(66.4vw,288px)!important;
    min-width:0!important;
    height:auto!important;
    aspect-ratio:292 / 97!important;
    margin:min(4.55vw,20px) 0 0!important;
    transform:none!important;
    flex:0 0 auto!important;
    pointer-events:auto!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-start:active{
    transform:translateY(1px) scale(.992)!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-start span{
    font-size:clamp(16px,4.55vw,20px)!important;
    transform:translateY(-6px)!important;
  }

  /* Bottom hint follows the CTA in the same flow. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint{
    position:relative!important;
    z-index:11!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    margin:min(2.05vw,9px) 0 0!important;
    transform:translateY(-15px)!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    flex:0 0 auto!important;
    pointer-events:none!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint > small{
    font-size:clamp(7px,2.05vw,9px)!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint .level3-splash-heart{
    width:min(5.45vw,24px)!important;
    height:auto!important;
    aspect-ratio:24 / 22!important;
    margin-top:min(1.8vw,8px)!important;
  }

  /* Review stays anchored to the decorated white panel. Its slot no longer
     depends on the CTA's device-specific offset. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-review-anchor .level3-splash-review-letter{
    right:12%!important;
    top:auto!important;
    bottom:1%!important;
    width:min(15.9vw,70px)!important;
    height:min(6.8vw,30px)!important;
    padding:0 min(1.35vw,6px)!important;
    border-radius:min(2.05vw,9px)!important;
    font-size:clamp(7px,2.25vw,10px)!important;
  }
}

/* ZUI LEVEL32 1.0_v10 — Level 3 intro bottom cluster unified to the confirmed
   iPad portrait reference. Phone only; home and iPad layouts remain untouched.
   The bottom hint/heart and review-letter action are panel-relative, so their
   placement no longer drifts when the journey CTA or phone aspect ratio changes. */
@media (max-width:600px){
  /* The white panel is 120.34vw tall. The content surface begins 8.2vw below
     the panel top. Place the hint at the same ~85.5% panel-height rhythm seen
     on iPad portrait, independent of the CTA's normal-flow position. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint{
    position:absolute!important;
    z-index:11!important;
    left:0!important;
    right:0!important;
    top:94.7vw!important;
    bottom:auto!important;
    width:100%!important;
    margin:0!important;
    transform:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    pointer-events:none!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint > small{
    margin:0!important;
    font-size:clamp(7px,2.05vw,9px)!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint .level3-splash-heart{
    width:min(5.45vw,24px)!important;
    height:auto!important;
    aspect-ratio:24 / 22!important;
    margin-top:min(1.8vw,8px)!important;
  }

  /* Match the confirmed iPad portrait review slot: 15% from panel right and
     7% from panel bottom. v9's bottom:1% could push the control outside the
     decorated white panel on long/narrow phones. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-review-anchor .level3-splash-review-letter{
    right:15%!important;
    top:auto!important;
    bottom:7%!important;
    width:min(15.9vw,70px)!important;
    height:min(6.8vw,30px)!important;
    padding:0 min(1.35vw,6px)!important;
    border-radius:min(2.05vw,9px)!important;
    font-size:clamp(7px,2.25vw,10px)!important;
  }
}

/* ZUI LEVEL32 1.0_v11 — Level 3 intro final mobile cluster hardening.
   Use the confirmed iPad-portrait visual rhythm as the single reference.
   Phone layouts no longer let the journey CTA, bottom hint/heart and review
   action compete for the same space. Everything below the intro copy is
   assigned a stable panel-relative slot, so 344–430px phones and fold outers
   share the same proportions. iPad rules remain untouched. */
@media (max-width:600px){
  /* Journey CTA: a fixed panel-relative slot. This intentionally overrides the
     v7/v8 per-device offsets and v9 normal-flow accumulation. The decorated
     button ends before the protected bottom-information zone begins. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-start{
    position:absolute!important;
    z-index:10!important;
    left:50%!important;
    right:auto!important;
    top:70vw!important;
    bottom:auto!important;
    width:min(66.4vw,288px)!important;
    min-width:0!important;
    height:auto!important;
    aspect-ratio:292 / 97!important;
    margin:0!important;
    transform:translateX(-50%)!important;
    flex:none!important;
    pointer-events:auto!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-start:active{
    transform:translateX(-50%) translateY(1px) scale(.992)!important;
  }

  /* Protected bottom-information zone. The copy is deliberately constrained
     around the panel centre, leaving a permanent right-hand review slot. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint{
    position:absolute!important;
    z-index:11!important;
    left:0!important;
    right:0!important;
    top:94.7vw!important;
    bottom:auto!important;
    width:100%!important;
    margin:0!important;
    transform:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    pointer-events:none!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint > small{
    display:block!important;
    width:45%!important;
    max-width:142px!important;
    margin:0 auto!important;
    padding:0!important;
    color:#686961!important;
    font-size:clamp(6px,1.85vw,8px)!important;
    line-height:1.2!important;
    font-weight:400!important;
    letter-spacing:.015em!important;
    text-align:center!important;
    white-space:nowrap!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint .level3-splash-heart{
    width:min(5.0vw,22px)!important;
    height:auto!important;
    aspect-ratio:24 / 22!important;
    margin-top:min(1.8vw,8px)!important;
  }

  /* Review action uses the iPad-style lower-right slot, but is nudged slightly
     farther right and scaled continuously on phones so it can never collide
     with the centred hint copy. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-review-anchor .level3-splash-review-letter{
    right:9%!important;
    top:auto!important;
    bottom:7%!important;
    width:min(14.5vw,64px)!important;
    height:min(6.2vw,27px)!important;
    margin:0!important;
    padding:0 min(1.1vw,5px)!important;
    border-radius:min(1.9vw,8px)!important;
    font-size:clamp(6px,2.0vw,9px)!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
}

/* ZUI LEVEL32 1.0_v12 — Level 3 intro phone artboard reset.
   One coordinate system only: the decorated white panel (700×1010) is the
   reference, matching the confirmed iPad portrait spacing. Legacy phone
   flex/margin/device-specific offsets above are intentionally neutralized here. */
@media (max-width:600px){
  .drive-stage[data-phase="level3-intro"] .level3-splash-board{
    --l3p-left:8.3%;
    --l3p-top:calc(16.4% - 20px);
    --l3p-width:83.4%;
  }

  /* Make the content surface exactly coincide with the decorated white panel. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-content{
    position:absolute!important;
    z-index:8!important;
    left:var(--l3p-left)!important;
    right:auto!important;
    top:var(--l3p-top)!important;
    width:var(--l3p-width)!important;
    height:auto!important;
    aspect-ratio:700 / 1010!important;
    display:block!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    text-align:center!important;
    pointer-events:none!important;
  }

  .drive-stage[data-phase="level3-intro"] .level3-splash-intro-copy{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    display:block!important;
    transform:none!important;
    pointer-events:none!important;
  }

  /* Upper content uses stable panel-relative slots. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-kicker{
    position:absolute!important;
    left:0!important;right:0!important;top:7.2%!important;
    height:auto!important;margin:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    gap:clamp(6px,2.25vw,10px)!important;
    transform:none!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-kicker b{
    font-size:clamp(20px,5.55vw,24px)!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-kicker img{
    width:clamp(16px,4.45vw,22px)!important;height:auto!important;aspect-ratio:1!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-dog{
    position:absolute!important;
    left:50%!important;top:19.6%!important;
    width:clamp(94px,29.5vw,132px)!important;height:auto!important;
    margin:0!important;transform:translateX(-50%)!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-content h1{
    position:absolute!important;
    left:0!important;right:0!important;top:36.9%!important;
    margin:0!important;
    font-size:clamp(30px,8.0vw,36px)!important;
    line-height:1.06!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-underline{
    position:absolute!important;
    left:50%!important;top:47.7%!important;
    width:67.4%!important;max-width:236px!important;height:auto!important;
    margin:0!important;transform:translateX(-50%)!important;
  }

  /* The intro sentence gets its own protected row — it can never be covered
     by the CTA because both are panel-relative, non-overlapping slots. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-intro-copy > p{
    position:absolute!important;
    left:8%!important;right:8%!important;top:54.9%!important;
    width:auto!important;margin:0!important;padding:0!important;
    transform:none!important;
    color:#686961!important;
    font-size:clamp(7px,2.05vw,9px)!important;
    line-height:1.58!important;font-weight:500!important;
    white-space:normal!important;
  }

  /* Journey CTA. Its slot starts well below the copy and ends before the
     protected bottom-information zone. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-start{
    position:absolute!important;
    z-index:10!important;
    left:50%!important;right:auto!important;top:63.5%!important;bottom:auto!important;
    width:72.0%!important;max-width:292px!important;min-width:0!important;
    height:auto!important;aspect-ratio:292 / 97!important;
    margin:0!important;padding:0!important;
    transform:translateX(-50%)!important;
    pointer-events:auto!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-start:active{
    transform:translateX(-50%) translateY(1px) scale(.992)!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-start span{
    font-size:clamp(15px,4.15vw,20px)!important;
    transform:translateY(-5px)!important;
  }

  /* Bottom hint + heart: one fixed centre lane. This is deliberately detached
     from CTA flow and from the review-letter button. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint{
    position:absolute!important;
    z-index:11!important;
    left:0!important;right:0!important;top:84.8%!important;bottom:auto!important;
    width:100%!important;height:auto!important;
    margin:0!important;padding:0!important;transform:none!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;
    pointer-events:none!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint > small{
    display:block!important;
    width:40%!important;max-width:none!important;
    margin:0!important;padding:0!important;
    color:#686961!important;
    font-size:clamp(6px,1.72vw,8px)!important;
    line-height:1.18!important;font-weight:400!important;
    text-align:center!important;white-space:nowrap!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint .level3-splash-heart{
    width:6.2%!important;max-width:24px!important;height:auto!important;
    margin:2.4% 0 0!important;aspect-ratio:24 / 22!important;
  }

  /* Review letter: same iPad-like right-lower lane on every phone. The slot is
     kept high enough to remain inside the panel, and horizontally separate
     from the centred hint text. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-review-anchor{
    left:var(--l3p-left)!important;top:var(--l3p-top)!important;
    width:var(--l3p-width)!important;height:auto!important;aspect-ratio:700/1010!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-review-anchor .level3-splash-review-letter{
    position:absolute!important;
    right:9.0%!important;top:84.6%!important;bottom:auto!important;
    width:18.0%!important;max-width:70px!important;
    height:auto!important;aspect-ratio:70 / 30!important;
    margin:0!important;padding:0 4px!important;
    border-radius:8px!important;
    font-size:clamp(6px,1.85vw,9px)!important;
    line-height:1!important;white-space:nowrap!important;
    pointer-events:auto!important;
  }

  /* Explicitly neutralize all previous narrow/short phone overrides. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-intro-copy > p,
  .drive-stage[data-phase="level3-intro"] .level3-splash-start,
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint,
  .drive-stage[data-phase="level3-intro"] .level3-splash-review-anchor .level3-splash-review-letter{
    translate:none!important;
  }
}

/* ZUI LEVEL32 1.0_v13 — Level 3 intro: one immutable 440×880 portrait artboard on phones.
   The entire composition now scales as a single unit from the confirmed iPad portrait layout.
   No phone-specific internal coordinates are allowed to alter kicker/title/copy/CTA/hint/review spacing. */
@media (max-width:600px){
  .drive-stage[data-phase="level3-intro"] .level3-splash-overlay{
    position:absolute!important;
    inset:0!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
    background:#ECD8BA!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-board{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:440px!important;
    height:880px!important;
    min-width:440px!important;
    min-height:880px!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    transform:translate(-50%,-50%) scale(var(--l3-fit-scale,1))!important;
    transform-origin:50% 50%!important;
    flex:none!important;
    overflow:hidden!important;
  }

  /* Restore the exact accepted iPad-portrait internal geometry. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-panel{
    left:8.3%!important;
    right:auto!important;
    top:calc(16.4% - 20px)!important;
    width:83.4%!important;
    height:auto!important;
    aspect-ratio:700/1010!important;
    object-fit:contain!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-content{
    position:absolute!important;
    z-index:8!important;
    left:11.8%!important;
    right:11.4%!important;
    top:calc(20.45% - 20px)!important;
    width:auto!important;
    height:64.2%!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    text-align:center!important;
    transform:none!important;
    pointer-events:none!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-intro-copy{
    position:static!important;
    inset:auto!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    display:contents!important;
    transform:none!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-kicker{
    position:static!important;
    left:auto!important;right:auto!important;top:auto!important;
    height:34px!important;
    margin-top:4px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    transform:translateY(10px)!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-kicker b{
    font-size:24px!important;
    line-height:1!important;
    letter-spacing:.06em!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-kicker img{
    width:22px!important;height:22px!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-dog{
    position:static!important;
    left:auto!important;top:auto!important;
    width:142px!important;
    height:108px!important;
    margin-top:20px!important;
    transform:none!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-content h1{
    position:static!important;
    left:auto!important;right:auto!important;top:auto!important;
    margin:12px 0 0!important;
    font-size:34px!important;
    line-height:1.05!important;
    letter-spacing:.03em!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-underline{
    position:static!important;
    left:auto!important;top:auto!important;
    width:236px!important;
    height:23px!important;
    margin-top:5px!important;
    transform:none!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-intro-copy > p{
    position:static!important;
    left:auto!important;right:auto!important;top:auto!important;
    width:auto!important;
    margin:22px 0 0!important;
    padding:0!important;
    color:#686961!important;
    font-size:10px!important;
    line-height:1.64!important;
    font-weight:500!important;
    letter-spacing:.02em!important;
    white-space:normal!important;
    transform:translateY(-10px)!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-start{
    position:relative!important;
    z-index:10!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:288px!important;
    min-width:244px!important;
    max-width:none!important;
    height:auto!important;
    aspect-ratio:292/97!important;
    margin:20px 0 0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    transform:none!important;
    flex:none!important;
    pointer-events:auto!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-start:active{
    transform:translateY(1px) scale(.992)!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-start span{
    font-size:20px!important;
    transform:translateY(-6px)!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint{
    position:static!important;
    z-index:11!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:auto!important;
    height:auto!important;
    margin:9px 0 0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    transform:translateY(-15px)!important;
    pointer-events:none!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint > small{
    display:block!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    color:#6d6b67!important;
    font-size:9px!important;
    line-height:1.2!important;
    font-weight:400!important;
    letter-spacing:.01em!important;
    text-align:center!important;
    white-space:nowrap!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint .level3-splash-heart{
    width:24px!important;
    height:22px!important;
    margin-top:8px!important;
  }

  /* Review action uses the exact accepted iPad lower-right slot. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-review-anchor{
    position:absolute!important;
    z-index:14!important;
    left:8.3%!important;
    top:calc(16.4% - 20px)!important;
    width:83.4%!important;
    height:auto!important;
    aspect-ratio:700/1010!important;
    pointer-events:none!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-review-anchor .level3-splash-review-letter{
    position:absolute!important;
    right:15%!important;
    top:auto!important;
    bottom:7%!important;
    width:70px!important;
    height:30px!important;
    margin:0!important;
    padding:0 6px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:9px!important;
    font-size:10px!important;
    line-height:1!important;
    white-space:nowrap!important;
    transform:none!important;
    pointer-events:auto!important;
  }
}


/* ZUI LEVEL32 1.0_v14 — Level 3 intro phone horizontal centre correction.
   v13 successfully unified the phone composition, but the information layer
   ended up visually right of the accepted iPad portrait centre. Keep every
   vertical slot and every panel/decor coordinate untouched; shift only the
   information layer and its review action by one shared artboard-space offset. */
@media (max-width:600px){
  .drive-stage[data-phase="level3-intro"] .level3-splash-board{
    --l3-info-center-fix:-22px;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-content{
    transform:translateX(var(--l3-info-center-fix))!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-review-anchor{
    transform:translateX(var(--l3-info-center-fix))!important;
  }
}

/* ZUI LEVEL32 1.0_v15 — Level 3 intro deterministic phone coordinate system.
   Root-cause fix:
   - positioning and scaling are separate operations;
   - the 440x880 artboard uses top-left transform-origin and explicit JS-computed left/top;
   - all information is centred on the artboard midline (x=220), with no per-device X patch;
   - the rendered artboard is always <= visual viewport minus an 8px safety inset.
   iPad (>600px) remains completely untouched. */
@media (max-width:600px){
  .drive-stage[data-phase="level3-intro"]{
    height:min(var(--zui-visual-height,100dvh),880px)!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-overlay{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    padding:0!important;
    overflow:hidden!important;
    background:#ECD8BA!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-board{
    position:absolute!important;
    left:var(--l3-fit-left,8px)!important;
    top:var(--l3-fit-top,8px)!important;
    width:440px!important;
    height:880px!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    transform:scale(var(--l3-fit-scale,1))!important;
    transform-origin:0 0!important;
    overflow:hidden!important;
    contain:layout paint style!important;
  }

  /* Panel remains exactly centred on the 440px artboard. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-panel{
    left:36.52px!important; /* 8.3% of 440 */
    right:auto!important;
    top:124.32px!important; /* 16.4% of 880 - 20 */
    width:366.96px!important; /* 83.4% of 440 */
    height:auto!important;
    aspect-ratio:700/1010!important;
    transform:none!important;
  }

  /* One centred information surface.  No left/right asymmetry and no v14 X fix. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-content{
    position:absolute!important;
    z-index:8!important;
    left:51.04px!important; /* centred 76.8% width */
    right:auto!important;
    top:159.96px!important;
    width:337.92px!important;
    height:564.96px!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    text-align:center!important;
    transform:none!important;
    pointer-events:none!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-intro-copy{
    position:static!important;
    inset:auto!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    flex:0 0 auto!important;
    transform:translateY(15px)!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-kicker{
    position:static!important;
    inset:auto!important;
    height:34px!important;
    margin-top:4px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    transform:translateY(10px)!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-kicker b{
    font-size:24px!important;
    line-height:1!important;
    letter-spacing:.06em!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-kicker img{width:22px!important;height:22px!important;}
  .drive-stage[data-phase="level3-intro"] .level3-splash-dog{
    position:static!important;inset:auto!important;
    width:142px!important;height:108px!important;margin-top:20px!important;transform:none!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-content h1{
    position:static!important;inset:auto!important;
    margin:12px 0 0!important;font-size:34px!important;line-height:1.05!important;letter-spacing:.03em!important;transform:none!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-underline{
    position:static!important;inset:auto!important;
    width:236px!important;height:23px!important;margin-top:5px!important;transform:none!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-intro-copy > p{
    position:static!important;inset:auto!important;
    width:auto!important;margin:22px 0 0!important;padding:0!important;
    color:#686961!important;font-size:10px!important;line-height:1.64!important;font-weight:500!important;letter-spacing:.02em!important;
    white-space:normal!important;transform:translateY(-10px)!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-start{
    position:relative!important;z-index:10!important;
    inset:auto!important;width:288px!important;min-width:0!important;max-width:none!important;height:auto!important;aspect-ratio:292/97!important;
    margin:20px 0 0!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;
    transform:none!important;flex:none!important;pointer-events:auto!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-start:active{transform:translateY(1px) scale(.992)!important;}
  .drive-stage[data-phase="level3-intro"] .level3-splash-start span{font-size:20px!important;transform:translateY(-6px)!important;}
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint{
    position:static!important;z-index:11!important;inset:auto!important;width:auto!important;height:auto!important;
    margin:9px 0 0!important;padding:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;
    transform:translateY(-15px)!important;pointer-events:none!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint > small{
    display:block!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important;
    color:#6d6b67!important;font-size:9px!important;line-height:1.2!important;font-weight:400!important;letter-spacing:.01em!important;
    text-align:center!important;white-space:nowrap!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-hint .level3-splash-heart{
    width:24px!important;height:22px!important;margin-top:8px!important;transform:none!important;
  }

  /* Review control is anchored to the same centred panel, never to viewport edges. */
  .drive-stage[data-phase="level3-intro"] .level3-splash-review-anchor{
    position:absolute!important;z-index:14!important;
    left:36.52px!important;top:124.32px!important;width:366.96px!important;height:auto!important;aspect-ratio:700/1010!important;
    margin:0!important;transform:none!important;pointer-events:none!important;
  }
  .drive-stage[data-phase="level3-intro"] .level3-splash-review-anchor .level3-splash-review-letter{
    position:absolute!important;
    right:15%!important; /* exact accepted iPad portrait slot */
    top:auto!important;bottom:7%!important;
    width:70px!important;height:30px!important;margin:0!important;padding:0 6px!important;
    display:grid!important;place-items:center!important;border-radius:9px!important;font-size:10px!important;line-height:1!important;
    white-space:nowrap!important;transform:none!important;pointer-events:auto!important;
  }
}

/* Test device preview only: a true viewport centre-line for visual verification.
   It is not present in Production because body[data-device-preview] only exists
   in the test preview iframe. */
body[data-device-preview]::after{
  content:"";
  position:fixed;
  z-index:99999;
  left:50%;top:0;bottom:0;
  width:1px;
  background:rgba(255,62,135,.38);
  pointer-events:none;
}


/* ZUI LEVEL32 1.0_v17 — Level 3 intro phone dog-head animation restore.
   Preserve the v16/v15 artboard fit and every layout transform exactly as-is.
   Phone layout intentionally locks `transform:none!important`; therefore the
   wobble uses independent translate/rotate/scale longhands instead of transform. */
@media (max-width:600px){
  .drive-stage[data-phase="level3-intro"] .level3-splash-dog{
    animation:level3-v17-dog-head-wobble-mobile .72s ease-in-out infinite alternate!important;
    transform-origin:50% 60%!important;
    will-change:translate,rotate,scale;
  }
}
@keyframes level3-v17-dog-head-wobble-mobile{
  0%{translate:0 2px;rotate:-13deg;scale:1.01}
  50%{translate:0 -2px;rotate:2deg;scale:1.035}
  100%{translate:0 1px;rotate:13deg;scale:1.01}
}
@media (max-width:600px) and (prefers-reduced-motion:reduce){
  .drive-stage[data-phase="level3-intro"] .level3-splash-dog{
    animation:none!important;
    translate:none!important;
    rotate:none!important;
    scale:none!important;
  }
}


/* v18 — restore the final public-letter extraction animation and make Ithaca snow peel from the finger position. */
/* v27 — final-home public-letter animation restored to the v133 cascade. */
.v24-snow-piece.gone.gone-left{
  opacity:0;
  transform:translateX(-130%) rotate(-8deg)!important;
}
.v24-snow-piece.gone.gone-right{
  opacity:0;
  transform:translateX(130%) rotate(8deg)!important;
}


/* v21 — Level 1 iOS long-press guard + clearer finish cards. */
html, body, .drive-shell, .drive-stage, .drive-stage * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

.drive-stage[data-phase="playing"],
.drive-stage[data-phase="playing"] * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.steering-controls,
.steering-controls *,
.pickup-count,
.pickup-count * {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.final-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
}
.final-stat-card {
  display: grid;
  gap: 5px;
  padding: 10px 12px 11px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  text-align: left;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.final-stat-card small {
  color: rgba(255,255,255,.46);
  font-size: 10px;
  letter-spacing: .06em;
  font-weight: 700;
}
.final-stat-card span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  color: rgba(255,255,255,.8);
  font-size: 12px;
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.final-stat-card img {
  width: 19px;
  height: 19px;
}

/* v23 — Level 1 intro page confirmed two-column layout. */
.level1-intro-showcase {
  padding: 28px 22px 22px;
}
.level1-intro-showcase h1 {
  font-size: 34px;
  line-height: 1.14;
  letter-spacing: -.05em;
}
.level1-intro-lead {
  margin: 16px 0 20px;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  line-height: 1.45;
}
.level1-intro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 22px;
  text-align: left;
}
.level1-intro-panel {
  display: grid;
  gap: 10px;
}
.level1-intro-panel-title {
  width: fit-content;
  max-width: 100%;
  min-width: 86px;
  height: 30px;
  margin: 0 auto;
  padding: 0 16px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  color: rgba(255,255,255,.96);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  background: rgba(255,255,255,.10);
}
.level1-intro-panel-body {
  min-height: 176px;
  padding: 18px 14px;
  border-radius: 18px;
  border: none;
  background: rgba(255,255,255,.10);
  box-shadow: none;
}
.level1-intro-panel-body-control {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  text-align: center;
}
.level1-control-icon {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: rgba(255,255,255,.06);
}
.level1-control-icon b {
  color: rgba(255,255,255,.92);
  font: 700 30px/1 var(--font-geist-mono), monospace;
}
.level1-intro-panel-body-control p {
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: 12px;
  line-height: 1.35;
}
.level1-intro-panel-body-win {
  display: grid;
  align-content: center;
  gap: 22px;
}
.level1-intro-panel-body-win p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.9);
  font-size: 12px;
  line-height: 1.4;
  flex-wrap: nowrap;
}
.level1-win-line-score {
  white-space: nowrap;
}
.level1-intro-bullet {
  color: rgba(255,255,255,.74);
  font-size: 16px;
  line-height: 1;
  transform: translateY(-1px);
  flex: 0 0 auto;
}
.level1-intro-panel-body-win img {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 0 6px #276fff);
  flex: 0 0 auto;
}
.level1-intro-showcase > small {
  display: none;
}
.level1-intro-showcase > button {
  margin-top: 2px;
}
@media (max-width: 380px) {
  .level1-intro-grid {
    gap: 10px;
  }
  .level1-intro-panel-title {
    min-width: 80px;
    padding: 0 14px;
    font-size: 12px;
  }
  .level1-intro-panel-body {
    min-height: 166px;
    padding: 16px 12px;
  }
  .level1-control-icon {
    width: 76px;
    height: 76px;
    gap: 16px;
  }
  .level1-control-icon b {
    font-size: 27px;
  }
}


/* v24 — soften Level 1 intro cards and make finish stats lighter pills. */
.level1-intro-panel-title {
  background: rgba(255,255,255,.05);
}
.level1-intro-panel-body {
  background: rgba(255,255,255,.055);
}
.level1-control-icon {
  background: rgba(255,255,255,.035);
}

.final-stats {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.final-stat-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  border: none;
  border-radius: 999px;
  text-align: left;
  background: rgba(255,255,255,.04);
  box-shadow: none;
}
.final-stat-card small {
  display: none;
}
.final-stat-card span {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 0;
  color: rgba(255,255,255,.72);
  font-size: 10px;
  background: transparent;
  padding: 0;
  border-radius: 0;
  white-space: nowrap;
}
.final-stat-card img {
  width: 19px;
  height: 19px;
}


/* v25 — reduce Level 1 intro instruction surfaces to ~2% opacity. */
.level1-intro-panel-title {
  background: rgba(255,255,255,.02);
}
.level1-intro-panel-body {
  background: rgba(255,255,255,.02);
}
.level1-control-icon {
  background: rgba(255,255,255,.015);
}


/* 1.0_v27 — Ithaca scholar reveal must not depend on where the swipe started.
   The positional snow system can leave a local clump over the scholar after the global
   14-piece reveal threshold. Keep the discovered scholar above remaining snow pieces. */
.v22-cornell .v22-discovery.scholar{z-index:24!important;}


/* 1.0_v31 global/resource loading */
#zui-global-loading {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  background: rgba(250, 248, 243, .975);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .22s ease, visibility .22s step-start;
  font-family: inherit;
}
#zui-global-loading.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s step-end;
}
.zui-loading-card {
  width: min(78vw, 360px);
  padding: 24px 24px 22px;
  border: 1px solid rgba(109, 88, 67, .14);
  border-radius: 24px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 16px 44px rgba(67, 52, 39, .12);
  text-align: center;
}
.zui-loading-mark {
  width: 46px;
  height: 46px;
  margin: 0 auto 15px;
  border: 4px solid rgba(85, 157, 177, .18);
  border-top-color: rgba(85, 157, 177, .92);
  border-radius: 50%;
  animation: zui-loading-spin .85s linear infinite;
}
.zui-loading-card strong {
  display: block;
  color: #54483f;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: .02em;
}
.zui-loading-card small {
  display: block;
  min-height: 1.5em;
  margin-top: 7px;
  color: rgba(84, 72, 63, .66);
  font-size: 12px;
  line-height: 1.5;
}
.zui-loading-track {
  position: relative;
  height: 8px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(84, 72, 63, .09);
}
.zui-loading-bar {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(96, 172, 190, .86), rgba(132, 191, 165, .9));
  transition: transform .16s ease-out;
}
.zui-loading-percent {
  display: block;
  margin-top: 8px;
  color: rgba(84, 72, 63, .5);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
@keyframes zui-loading-spin { to { transform: rotate(360deg); } }


/* 1.0_v31: keep the real Home DOM resident between levels so mobile browsers do not
   recreate and re-decode all scrapbook decorations on every return. */
.home-v31-resident {
  will-change: opacity;
}
.home-v31-resident.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.home-v31-resident.is-parked {
  opacity: 0 !important;
  pointer-events: none !important;
}