:root {
  color-scheme: light;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: #203f34;
  background: #16372e;
  --ink: #203f34;
  --cream: #fffbee;
  --green: #24744c;
  --gold: #ffc94d;
}
* { box-sizing: border-box; }
html { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
body { position:fixed; inset:0; margin:0; width:100%; height:100vh; height:100dvh; height:var(--layout-height,100dvh); min-height:0; display:grid; place-items:center; padding:0; overflow:hidden; overscroll-behavior:none; isolation:isolate; }
/* Extend the current original illustration under the safe areas and around
   its complete 16:9 artboard. Coordinates and illustrated people stay intact. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #16372e; }
button, input { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .65; }
button:focus-visible, input:focus-visible, canvas:focus-visible { outline: 3px solid #005d96; outline-offset: 4px; }
button { transition: box-shadow .2s, background-color .2s; }
[hidden] { display: none !important; }
h1, h2, p { margin: 0; }
.stage { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; aspect-ratio:auto; overflow:hidden; container-type:inline-size; isolation:isolate; touch-action:pan-x pan-y; }
.stage.is-fullscreen { width:100%; height:100%; max-height:none; aspect-ratio:auto; }
.stage:has([data-screen-panel="forestMap"]:not([hidden])), .stage:has([data-screen-panel="qiqu"]:not([hidden])) { width:100%; height:100%; max-height:none; aspect-ratio:auto; }
.screen, .level-world { position: absolute; inset: 0; overflow: hidden; }
.backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; }
.home-screen .backdrop { object-fit: cover; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.home-portals { position: absolute; inset: 24% 6.4% 24% 2.5%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2%; }
.home-portals button { -webkit-appearance: none; appearance: none; opacity: 1; filter: none; background: rgba(255,255,255,0); border: 0; border-radius: 4cqw; }
.home-portals button:hover { box-shadow: 0 0 0 3px #fff7 inset, 0 0 35px #fff4; }
.home-portals button:focus-visible { outline: 4px solid white; outline-offset: -5px; box-shadow: 0 0 0 8px #146641 inset; }
.topbar { position: absolute; top: max(2.8%, env(safe-area-inset-top)); left: max(2.4%, env(safe-area-inset-left)); right: max(2.4%, env(safe-area-inset-right)); z-index: 10; display: flex; align-items: center; gap: 1.1cqw; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.quiet-button { min-height: 44px; border: 1px solid #fff9; border-radius: 99px; padding: .65em 1.05em; background: #fff9e9f5; color: #244b38; box-shadow: 0 3px 10px #153e3826; font-size: clamp(12px, 1.15cqw, 17px); font-weight: 700; white-space: nowrap; }
.quiet-button:hover { background: white; }
.audio-button { min-width: 94px; }
.audio-settings { position: relative; z-index: 40; color: #244b38; }
.audio-settings summary { min-height: 44px; display: grid; place-items: center; padding: .65em 1em; border: 1px solid #fff9; border-radius: 99px; background: #fff9e9f5; box-shadow: 0 3px 10px #153e3826; cursor: pointer; font-size: clamp(12px, 1.1cqw, 16px); font-weight: 700; list-style: none; white-space: nowrap; }
.audio-settings summary::-webkit-details-marker { display: none; }
.audio-settings summary::before { content: '🔊'; margin-right: .35em; }
.audio-settings[open] summary, .audio-settings summary:hover { background: white; }
.audio-settings-panel { position: absolute; top: calc(100% + 8px); right: 0; width: min(270px, 42vw); display: grid; gap: .75em; padding: 1em; border: 1px solid #e4d6ae; border-radius: 16px; background: #fffdf3f7; box-shadow: 0 8px 24px #173c302e; }
.audio-settings-panel label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55em; color: #31553c; font-size: clamp(11px, 1.05cqw, 15px); font-weight: 700; }
.audio-settings-panel input[type="range"] { width:100%; min-width:0; min-height:32px; touch-action:pan-x; accent-color:#3e9465; }
.audio-settings-panel output { min-width: 3.5em; text-align: right; color: #7d5a25; font-variant-numeric: tabular-nums; }
.page-heading { color: #153d2d; padding: .55em 1.1em; border-radius: 15px; background: #fff9ebf2; font-size: clamp(11px, 1.05cqw, 16px); }
.page-heading span { display: block; margin-bottom: 2px; }
.page-heading h1 { font-size: clamp(16px, 1.85cqw, 28px); font-weight: 800; line-height: 1.2; letter-spacing: .08em; }
.points-badge { margin-left: auto; padding: .7em 1.25em; display: grid; gap: .25em; border: 1px solid #f3d6a0; border-radius: 15px; background: #fffaeff5; color: #5a3d21; font-size: clamp(11px, 1.05cqw, 16px); }
.points-badge strong { font-size: 1.3em; }
.primary-button { border: 1px solid #ffe5a3; border-radius: 16px; background: linear-gradient(#ffdd70, #ffc447); color: #583715; font-weight: 800; min-height: 44px; padding: .8em 1.35em; font-size: clamp(14px, 1.5cqw, 22px); box-shadow: 0 3px 0 #b47530, 0 5px 14px #41281d22; white-space: nowrap; }
.primary-button:not(:disabled):hover { background: #ffe18a; }
.primary-button:not(:disabled):active { box-shadow: 0 1px 0 #b47530; }
.map-screen { background: #87c9de; }
.map-camera { position: absolute; inset: 0 0 auto; width: 100%; height: 900%; z-index: 0; transform-origin: 50% 0; transition: transform .8s cubic-bezier(.22,.8,.25,1); will-change: transform; background: #82bed0; overflow: hidden; }
.map-camera img { position: absolute; inset: 0 auto auto 13%; z-index: 1; width: 74%; height: 100%; object-fit: fill; user-select: none; mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%); }
.map-route, .route-lines, #levelLadder { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-route { z-index: 2; touch-action: none; }
.route-lines { pointer-events: none; }
.route-lines path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route-lines { overflow: visible; }
#routeShadow { stroke: #173f2c66; stroke-width: 13; opacity: .38; filter: blur(4px); }
#routePath { stroke: #5a8f51; stroke-width: 7; opacity: .56; }
#routeProgress { stroke: #f4d777; stroke-width: 5; opacity: .62; filter: drop-shadow(0 0 5px #fff3a955); }
.level-node { position: absolute; transform: translate(-50%, -50%); width: clamp(32px, 3.1cqw, 52px); height: clamp(32px, 3.1cqw, 52px); border: 0; border-radius: 50%; background: transparent; color: #fff8ca; text-shadow: 0 1px 2px #2b4b32; font-size: clamp(9px, .78cqw, 13px); font-weight: 900; z-index: 3; padding: 0; display: grid; place-items: center; transform-origin: 50% 100%; transition: transform .2s, filter .2s, box-shadow .2s; }
.level-node::before { content: ""; position: absolute; inset: 18%; border-radius: 46% 54% 48% 52%; transform: rotate(45deg); background: radial-gradient(circle at 32% 24%, #fff4bd 0 7%, transparent 8%), radial-gradient(circle at 38% 32%, #9aaf75 0 23%, #607650 44%, #304d39 75%); box-shadow: inset 3px 4px 5px #e8efab66, inset -4px -5px 5px #162f2a99, 0 3px 6px #1e3a2a99; }
.level-node::after { content: ""; position: absolute; left: 19%; right: 19%; bottom: 3%; height: 18%; border-radius: 50%; background: #1a382b66; filter: blur(3px); z-index: -1; }
.level-node.current { color: #fffbe4; }
.level-node.selected { transform: translate(-50%, -50%) scale(1.3); z-index: 4; }
.level-node.selected::before { inset: 7%; background: radial-gradient(circle, #fff9c2 0 12%, #efcf66 13% 28%, #7e9e5f 45%, #34533a 72%); box-shadow: 0 0 0 3px #fff3b7cc, 0 0 18px 6px #ffe88b99, inset 3px 4px 6px #fff6b588, inset -4px -6px 7px #19312699; animation: mapMarkerPulse 2.2s ease-in-out infinite; }
.level-node.completed::before { inset: 7% 31% 35% 53%; border-radius: 100% 0 100% 0; transform: rotate(-28deg); background: #679950; box-shadow: 0 1px 3px #19362988; }
.level-node.completed .node-marker { display: none; }
.level-node.completed .node-number { top: 50%; min-width: auto; padding: 0; border: 0; background: transparent; font-size: clamp(20px, 2.2cqw, 34px); line-height: 1; text-shadow: 0 2px 5px #57201c99, 0 0 10px #ffe79c99; transform: translate(-50%, -50%); }
.level-node .node-marker { position: relative; z-index: 1; font-size: clamp(13px, 1.25cqw, 20px); line-height: 1; color: #ffe99c; filter: drop-shadow(0 0 4px #ffe59a99); }
.level-node.current .node-marker { color: #fff8d1; }
.level-node .node-number { position: absolute; z-index: 2; left: 50%; top: calc(100% - 1px); transform: translateX(-50%); min-width: 1.9em; padding: 1px 4px; border: 1px solid #fff0b980; border-radius: 99px; background: #274638d9; color: #fff7ce; line-height: 1.1; font-variant-numeric: tabular-nums; }
.level-node .node-name { position: absolute; left: 50%; top: calc(100% + 18px); transform: translateX(-50%); max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap; font-size: .72em; line-height: 1; transition: max-width .2s, opacity .2s; }
.level-node.selected .node-name, .level-node:hover .node-name, .level-node:focus-visible .node-name { max-width: 16em; opacity: .95; }
.level-node .node-lock { position: absolute; right: -3px; bottom: 0; width: 16px; height: 16px; border-radius: 50%; background: #f8f4e6; display: grid; place-items: center; color: #46654c; border: 1px solid #e0c988; z-index: 3; }
.node-lock svg { width: 12px; height: 12px; }
.level-node.available:hover { filter: brightness(1.12) saturate(1.08); transform: translate(-50%, -50%) translateY(-3px) rotate(-1deg); }
.map-controls { position: absolute; z-index: 5; right: 3%; top: 30%; display: flex; flex-direction: column; align-items: center; gap: 8px; background: #fff9eced; border: 1px solid #fff; padding: 8px; border-radius: 22px; }
.map-controls button { min-width: 44px; min-height: 44px; border: none; border-radius: 14px; background: #e8edd7; color: #35553b; font-size: 24px; }
.map-controls span { font-size: clamp(11px, 1cqw, 15px); font-weight: 700; }
.map-controls .locate-button { background: transparent; font-size: 12px; padding: 0 5px; }
.map-caption { position: absolute; left: 3%; top: 24%; width: 20%; max-width: 240px; font-size: clamp(12px, 1.25cqw, 18px); color: #224b36; line-height: 1.7; padding: .7em .9em; border-radius: 12px; background: #fff8e9e8; }
.map-dock { position: absolute; z-index: 6; bottom: 3%; left: 15%; right: 15%; min-height: 12%; border-radius: 20px; border: 2px solid #f5e4bd; background: #fffaeef7; box-shadow: 0 6px 25px #18352c33; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 1.1cqw 1.6cqw; }
.map-dock h2 { font-size: clamp(16px, 1.8cqw, 27px); margin: .1em 0; }
.map-dock p, .map-dock > div > span { font-size: clamp(11px, 1.05cqw, 16px); color: #496346; }
.progress-pill { margin-left: auto; display: flex; align-items: baseline; gap: .4em; padding: .6em 1em; border-radius: 99px; background: #fff9ecf5; font-size: clamp(12px, 1.2cqw, 18px); color: #305f42; }
.progress-pill strong { font-size: 1.6em; }
.orb-field { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.word-orb { pointer-events: auto; }
.word-orb { position: absolute; display: grid; place-items: center; transform: translate(-50%, -50%); width: clamp(44px, 5.5cqw, 86px); aspect-ratio: 1; border-radius: 50%; border: 1.5px solid #ffffffe8; padding: 0; color: #174368; background: radial-gradient(ellipse at 32% 20%, #ffffffec 0%, #fff9 7%, #fff0 22%), radial-gradient(ellipse at 65% 75%, #ffffffa0, #fff0 42%), radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--orb-color) 40%, transparent) 30%, var(--orb-color) 76%, #fff 100%); box-shadow: inset 0 0 10px #fff, inset -4px -7px 12px var(--orb-color), 0 0 14px color-mix(in srgb, var(--orb-color) 65%, transparent); isolation: isolate; will-change: left, top, transform; animation: orbFloat 5.8s ease-in-out infinite; animation-delay: var(--orb-delay, 0s); }
.word-orb::before { content: ""; position: absolute; inset: 26% -15%; border: 1.5px solid #ffffffb0; border-radius: 50%; transform: rotate(-28deg); pointer-events: none; z-index: -1; }
.word-orb::after { content: ""; width: 4px; height: 4px; background: white; box-shadow: -22px 17px 5px white, 19px -15px 3px white; position: absolute; top: 14%; right: 9%; border-radius: 50%; pointer-events: none; }
.word-orb.revealed { background: radial-gradient(ellipse at 35% 20%, #fff 0%, #fff7 10%, #fff0 26%), radial-gradient(circle, #fffaf2ee 42%, var(--orb-color) 100%); }
.word-orb.active { outline: 2px solid #fff; outline-offset: 6px; z-index: 5; }
.word-orb .orb-word { display: block; font-family: "Trebuchet MS", Arial, sans-serif; font-weight: 800; font-size: clamp(11px, 1.25cqw, 20px); letter-spacing: -.02em; color: #17415b; text-shadow: 0 1px 0 white; }
.word-orb.revealed .orb-word { animation: wordReveal .35s ease-out; }
.word-orb.burst::before { animation: bubbleBreak .45s ease-out forwards; }
.word-prompt { position: absolute; bottom: 21%; left: 50%; transform: translateX(-50%); max-width: 85%; width: max-content; padding: .45em 1.2em; background: #fff9eff2; border: 1px solid #fff; border-radius: 99px; font-size: clamp(12px, 1.25cqw, 19px); color: #284f3e; text-align: center; font-weight: 600; pointer-events: none; }
.word-prompt strong { color: #1b5a77; font: 800 1.35em "Trebuchet MS", Arial, sans-serif; margin-right: .4em; }
.writing-dock { position: absolute; z-index: 8; bottom: 2.5%; left: 18%; width: 64%; height: 16%; min-height: 100px; max-height: 138px; background: #fffcf4; border: 2px solid #b9ddbb; border-radius: 22px; box-shadow: 0 6px 22px #315c3d33; padding: .6cqw 1.2cqw .8cqw; display: flex; flex-direction: column; }
.writing-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 34px; color: #32583f; font-size: clamp(11px, 1.05cqw, 16px); }
.writing-tools label { margin-right: auto; font-weight: 600; }
.writing-tools button { border: 0; background: transparent; color: #45654c; font-size: inherit; min-height: 32px; padding: 0 10px; border-radius: 9px; }
.mode-switch { display: flex; gap: 2px; }
.mode-switch button[aria-pressed="true"] { background: #ddeedb; color: #1c5c39; font-weight: 700; }
.writing-row { display: flex; align-items: stretch; gap: 1cqw; flex: 1; min-height: 0; }
.writing-surface { position: relative; flex: 1; min-width: 0; }
.writing-surface input { width: 100%; height: 100%; border: 0; border-radius: 6px; background: transparent; font-family: "Trebuchet MS", "Microsoft YaHei", sans-serif; font-size: clamp(20px, 2.7cqw, 42px); color: #205c42; padding: 0 12px; }
.writing-surface input::placeholder { font-family: "Microsoft YaHei", sans-serif; font-size: clamp(14px, 1.6cqw, 24px); color: #627565; opacity: 1; }
.writing-surface input:disabled { opacity: 1; }
#handwritingCanvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.ink-placeholder { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #627565; font-size: clamp(14px, 1.6cqw, 24px); pointer-events: none; }
.check-word { background: linear-gradient(#409267, #2b7850); border-color: #337850; color: #fff; box-shadow: 0 3px 0 #1e583c; min-width: 80px; align-self: center; height: 75%; padding: 0 1em; font-size: clamp(14px, 1.5cqw, 22px); }
.check-word:not(:disabled):hover { background: #37875b; }
.input-feedback { position: absolute; z-index: 12; bottom: 21%; left: 50%; transform: translateX(-50%); width: max-content; max-width: 88%; background: #fff9ed; color: #4d3926; border-radius: 12px; padding: .6em 1em; font-size: clamp(12px, 1.2cqw, 18px); box-shadow: 0 3px 12px #183c3426; }
.input-feedback:empty { display: none; }
.input-feedback { bottom: 28%; }
/* Keep the success message out of the scene's growth zone. It used to sit on
   top of the newly revealed object, making the result look missing. */
.input-feedback { top: 10%; bottom: auto; }
.level-world.is-input-error, .generic-level-world.is-input-error { animation: inputErrorShake .36s ease-out; box-shadow: inset 0 0 0 5px #dc3d3de6, inset 0 0 0 10px #ffdada8c; }
.level-world.is-input-error::after, .generic-level-world.is-input-error::after { content: ""; position: absolute; inset: 0; z-index: 50; pointer-events: none; border: 6px solid #dc3d3de6; box-shadow: inset 0 0 0 6px #ffdada8c; animation: inputErrorFrame .36s ease-out; }
.light-effects { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.light-streak { position: absolute; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: white; box-shadow: 0 0 10px #fff, 0 0 22px #ffe994, 0 0 40px #ffdb65; }
.arrival-ring { position: absolute; width: 35px; height: 12px; border: 2px solid #fff6bc; border-radius: 50%; box-shadow: 0 0 20px #fff4ac; animation: arrival 1s ease-out forwards; }
.celebration-layer { position: absolute; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; background: radial-gradient(circle at 50% 44%, #fff9d51f, transparent 36%); }
.celebration-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.celebration-card { position: absolute; top: 17%; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: .2em; min-width: min(76%, 420px); padding: 1.1em 1.6em 1.25em; color: #4d3a24; background: #fffaf0ef; border: 2px solid #ffe29b; border-radius: 22px; box-shadow: 0 10px 32px #20452f38, 0 0 32px #fff0a866; animation: celebrationCardIn .55s cubic-bezier(.2,.8,.25,1) both; text-align: center; }
.celebration-kicker { color: #ae6e20; font-size: clamp(12px, 1.2cqw, 18px); font-weight: 800; letter-spacing: .14em; }
.celebration-card strong { color: #cd7732; font-size: clamp(27px, 3.1cqw, 48px); line-height: 1.1; }
.celebration-card span:not(.celebration-kicker) { font-size: clamp(13px, 1.35cqw, 21px); font-weight: 700; }
.celebration-card small { color: #3c7251; font-size: clamp(11px, 1.1cqw, 17px); }
.completion-banner { position: absolute; z-index: 9; bottom: 6%; left: 50%; transform: translateX(-50%); text-align: center; padding: 1.5cqw 3cqw; border-radius: 24px; background: #fffaebf5; border: 2px solid #ffe2a0; box-shadow: 0 8px 30px #1b3f3433; }
.completion-banner h2 { font-size: clamp(22px, 3cqw, 42px); margin: .2em 0 .55em; white-space: nowrap; }
.completion-actions { display: flex; align-items: center; justify-content: center; gap: .7em; flex-wrap: wrap; }
.completion-banner > span { font-size: clamp(12px, 1.2cqw, 18px); }
.placeholder-screen { background: #edf3df; padding: 3%; }
.placeholder-screen > div { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); text-align: center; width: 85%; }
.placeholder-screen h1 { font-size: clamp(28px, 4cqw, 60px); margin-bottom: 15px; }
.placeholder-screen p { margin: 15px 0 25px; }
.orientation-tip { display: none; color: #fff; text-align: center; padding: 20px; font-size: 16px; }
@keyframes bubbleBreak { to { opacity: 0; transform: rotate(-28deg) scale(1.7); } }
@keyframes wordReveal { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes orbFloat { 0%,100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 4px)); } }
@keyframes arrival { from { opacity: 1; transform: translate(-50%, -50%) scale(.3); } to { opacity: 0; transform: translate(-50%, -50%) scale(3.5); } }
@keyframes celebrationCardIn { from { opacity: 0; transform: translate(-50%, -12px) scale(.92); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@media (max-height: 520px) and (orientation: landscape) {
  .topbar { top: 2%; gap: 8px; }
  .page-heading { padding: 5px 9px; }
  .page-heading span { font-size: 10px; }
  .quiet-button { min-height: 40px; padding: .55em .8em; }
  .points-badge { padding: 5px 10px; }
  .map-dock { left: 18%; right: 17%; bottom: 3%; padding: 8px 12px; min-height: 64px; }
  .map-dock > div > span { display: none; }
  .map-dock p { font-size: 10px; }
  .map-controls { top: 25%; padding: 5px; gap: 2px; border-radius: 15px; }
  .map-controls button { min-height: 38px; min-width: 40px; }
  .map-controls .locate-button { font-size: 10px; }
  .map-caption { top: 27%; width: 19%; padding: 7px; font-size: 11px; }
  .writing-dock { left: 9%; width: 82%; height: 25%; bottom: 2%; padding: 2px 10px 7px; border-radius: 17px; }
  .word-prompt { bottom: 29%; }
  .input-feedback { bottom: 39%; }
  .writing-tools { flex-basis: 30px; gap: 4px; }
  .writing-tools button { min-height: 28px; padding: 0 8px; }
  .check-word { min-height: 40px; }
  .word-orb { width: 44px; }
}
@media (orientation: portrait) { body { align-content: center; } .orientation-tip { display: block; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }


/* Real Chinese type on the cleaned illustration; no baked generated glyphs. */
.home-brand-logo { position: absolute; z-index: 3; top: 2.4%; left: 2.4%; width: 12%; max-height: 24%; object-fit: contain; height: auto; pointer-events: none; user-select: none; filter: drop-shadow(0 3px 5px #1a4e4026); }
.home-title { position: absolute; z-index: 3; top: 9%; left: 27%; right: 27%; display: grid; justify-items: center; color: #fff9e9; text-shadow: 0 3px 0 #82421f, 0 5px 6px #713b2170; pointer-events: none; }
.home-title strong { font-size: clamp(22px, 3.85cqw, 66px); line-height: 1.35; font-weight: 900; white-space: nowrap; letter-spacing: .06em; }
.home-title strong { font-size:clamp(22px,3.85vw,66px); font-size:clamp(22px,3.85cqw,66px); }
.home-title small { display:none; }
.home-portals button { position: relative; }
.portal-copy { position: absolute; inset: 0; pointer-events: none; }
.portal-copy strong { position: absolute; top: 71.2%; left: 0; right: 0; font-size: clamp(17px, 2.35cqw, 40px); color: white; text-shadow: 0 2px 1px #205e4366; font-weight: 850; line-height: 1.4; letter-spacing: .04em; white-space: nowrap; }
.portal-copy small { display:none; }
.home-portals button:nth-child(2) small { color: #553397; }
.home-portals button:nth-child(3) small { color: #975311; }
.home-portals button:nth-child(4) small { color: #155c97; }

/* The climb stays legible at the native artwork scale. */
.map-climb-hint { position: absolute; z-index: 7; top: 15%; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 8px 17px; border: 1px solid #fff9; border-radius: 18px; background: #fff9e8ee; color: #28543b; box-shadow: 0 4px 16px #163c3520; pointer-events: none; white-space: nowrap; text-align: center; }
.map-climb-hint > span { grid-row: 1 / 3; align-self: center; font-size: 24px; color: #9c6721; }
.map-climb-hint strong { font-size: clamp(12px, 1.2cqw, 18px); }
.map-climb-hint small { font-size: clamp(10px, 1cqw, 15px); color: #42613c; }
.map-dock { left: 18%; right: 18%; bottom: 2.5%; min-height: 12%; }
.map-caption { top: 29%; }
.level-node.locked { background: linear-gradient(145deg, #93b18a, #4c7255); }

/* Every raster layer shares a single immutable artboard. */
.scene-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.meadow-complete-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url("assets/scene-v5/meadow-level1-complete.webp") center / 100% 100% no-repeat; opacity: var(--meadow-progress, 0); transition: opacity 1.2s ease; }
.level-world > .scene-layer { z-index: 3; }
.scene-grow { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url("/assets/scene-v5/meadow-level1-complete.webp?v=20261029") center / 100% 100% no-repeat; transform-origin: 50% 100%; animation: sceneObjectGrow .85s cubic-bezier(.18,.8,.28,1) both; filter: drop-shadow(0 0 10px #fff2a766); }
.scene-grow-tree { mask-image: radial-gradient(ellipse 38% 56% at 10% 29%, #000 0 48%, transparent 88%); }
.scene-grow-river { mask-image: linear-gradient(115deg, transparent 0 63%, #000 76% 100%); }
.scene-grow.is-restored { animation: none; }
.meadow-reveal-pulse { position: absolute; width: clamp(34px, 4.2cqw, 84px); aspect-ratio: 1; margin: -2.1cqw 0 0 -2.1cqw; border-radius: 50%; border: 2px solid #fff9c4; box-shadow: 0 0 16px #fffbd0, 0 0 40px #ffdc66, 0 0 76px #ffb94c99; animation: meadowPulse 1.1s ease-out both; pointer-events: none; }
.meadow-reveal-pulse::after { content: ""; position: absolute; inset: -34%; border: 1px solid #fff4a4aa; border-radius: 50%; animation: meadowRay 1.1s ease-out both; }
.meadow-reveal-pulse.is-restored { display: none; }
.scene-object { position: absolute; pointer-events: none; transform-origin: 50% 100%; }
.scene-raster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; }
.scene-object.is-entering { animation: artAppear .85s ease-out both; }
.scene-tree.is-entering { animation: treeGrow 1.2s cubic-bezier(.2,.65,.25,1) both; }
.scene-effect-trigger { inset: 0; }
.scene-atmosphere { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.scene-deer .scene-raster:first-child { transform-origin: 50% 98%; animation: animalBreath 4.5s ease-in-out infinite; }
.scene-deer .animal-head { clip-path: polygon(0 0, 54% 0, 47% 39%, 32% 55%, 16% 49%); transform-origin: 25% 41%; animation: deerLook 7s ease-in-out infinite; }
.scene-rabbit .scene-raster:first-child { transform-origin: 50% 85%; animation: animalBreath 3.4s ease-in-out infinite; }
.scene-rabbit .animal-head { clip-path: polygon(37% 0, 100% 0, 100% 59%, 63% 68%); transform-origin: 65% 59%; animation: rabbitListen 5.1s ease-in-out infinite; }
.scene-butterfly .scene-raster { transform-origin: 50% 50%; animation: butterflyFlight 5s ease-in-out infinite; }
.scene-bird .scene-raster { transform-origin: 61% 65%; animation: birdPerch 4.7s ease-in-out infinite; }
.scene-fish .scene-raster { animation: fishGlide 7s ease-in-out infinite; }
.scene-boat .scene-raster { transform-origin: 50% 80%; animation: mooredBoat 4.6s ease-in-out infinite; }
.has-wind .scene-grass .scene-raster { transform-origin: 50% 100%; animation: grassBreeze 4.8s ease-in-out infinite; }
.is-revealing .word-orb { opacity: .2; transition: opacity .2s; }
.word-orb { transition: opacity .4s; }
.leave-view { position: absolute; top: 3%; left: 3%; z-index: 20; }
.is-viewing .level-world > .topbar, .is-viewing .orb-field, .is-viewing .writing-dock, .is-viewing .word-prompt, .is-viewing .input-feedback, .is-viewing .completion-banner, .is-viewing .light-effects { display: none !important; }
.completion-banner { bottom: 3%; padding: .8cqw 1.4cqw; display: flex; align-items: center; gap: 1.5cqw; border-radius: 20px; }
.completion-banner h2 { font-size: clamp(17px, 2cqw, 30px); margin: 0; }
.completion-banner > span { display: none; }
.completion-banner .primary-button { font-size: clamp(12px, 1.15cqw, 17px); padding: .7em 1em; }
@keyframes artAppear { from { opacity: 0; } to { opacity: 1; } }
@keyframes treeGrow { from { opacity: 0; clip-path: inset(100% 0 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes animalBreath { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.008); } }
@keyframes deerLook { 0%,20%,100% { transform: rotate(0); } 48%,64% { transform: rotate(1.6deg); } }
@keyframes rabbitListen { 0%,30%,100% { transform: rotate(0); } 45%,60% { transform: rotate(-1.5deg); } }
@keyframes butterflyFlight { 0%,100% { transform: translate(0,0) rotate(-3deg) scaleX(1); } 25% { transform: translate(7px,-8px) rotate(6deg) scaleX(.82); } 65% { transform: translate(15px,-2px) rotate(-5deg) scaleX(.92); } }
@keyframes birdPerch { 0%,30%,100% { transform: rotate(0); } 45% { transform: rotate(2deg) scaleY(.98); } 55% { transform: rotate(-1deg); } }
@keyframes fishGlide { 0%,100% { transform: translate(0,0); } 50% { transform: translate(10px,3px); } }
@keyframes mooredBoat { 0%,100% { transform: translateY(0) rotate(-.25deg); } 50% { transform: translateY(1.6px) rotate(.25deg); } }
@keyframes grassBreeze { 0%,100% { transform: skewX(-.12deg); } 50% { transform: skewX(.12deg); } }
@keyframes mapMarkerPulse { 0%,100% { filter: brightness(1); transform: rotate(45deg) scale(1); } 50% { filter: brightness(1.18); transform: rotate(45deg) scale(1.08); } }
@keyframes meadowPulse { from { opacity: .98; transform: scale(.28); } 45% { opacity: .84; } to { opacity: 0; transform: scale(2.4); } }
@keyframes meadowRay { from { opacity: .95; transform: scale(.3) rotate(0deg); } to { opacity: 0; transform: scale(1.25) rotate(28deg); } }
@keyframes sceneObjectGrow { from { opacity: 0; transform: translateY(4%) scale(.92); filter: brightness(1.8) drop-shadow(0 0 28px #fff4ad); } 55% { opacity: 1; filter: brightness(1.25) drop-shadow(0 0 18px #ffe88b); } to { opacity: 1; transform: translateY(0) scale(1); filter: none; } }
@keyframes inputErrorShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes inputErrorFrame { 0% { opacity: .35; } 25% { opacity: 1; } 100% { opacity: .98; } }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }

@media (max-height: 520px) and (orientation: landscape) {
  .map-climb-hint { top: 16%; padding: 5px 12px; gap: 0 6px; }
  .map-climb-hint small { font-size: 10px; }
  .map-dock { min-height: 60px; left: 21%; right: 16%; padding: 5px 12px; }
  .level-node { width: 44px; }
  .writing-dock { bottom: 2%; left: 16%; width: 68%; height: 20%; min-height: 92px; }
  .word-prompt { bottom: 29%; }
  .input-feedback { bottom: 39%; }
  .level-world .topbar { gap: 5px; }
  .level-world .quiet-button { font-size: 11px; min-height: 40px; padding: 6px 9px; }
  .page-heading h1 { font-size: 16px; }
  .writing-tools button { min-height: 32px; }
}
@media (max-width: 720px) {
  .map-climb-hint small { display: none; }
  .map-climb-hint > span { grid-row: auto; font-size: 17px; }
  .portal-copy small, .home-title small { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Home utilities stay in one quiet row above the illustrated portals. */
body .home-screen .license-home-tools { position:fixed; top:max(8px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); gap:7px; max-width:calc(var(--visible-width,100vw) - 24px); z-index:20; }
body { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
body > .orientation-tip { position:fixed; left:0; right:0; bottom:env(safe-area-inset-bottom); pointer-events:none; }
body .home-screen .license-home-tools button { min-height:44px; padding:7px 12px; font-size:13px; white-space:nowrap; }
.customer-home-tools { display:flex; align-items:center; font-family:inherit; }
.customer-home-tools button { border:1px solid #e4d8b6; border-radius:99px; background:#fffaf0f2; color:#30513b; font-weight:700; box-shadow:0 3px 10px #183e3024; }
.customer-support-dialog { position:fixed; inset:0; margin:auto; padding:28px; width:min(720px,calc(var(--visible-width,100vw) - 24px)); max-width:none; max-height:calc(var(--visible-height,100dvh) - 24px); overflow:hidden; border:2px solid #d8c598; border-radius:28px 24px 30px 22px; background:radial-gradient(ellipse at 8% 0,#f1e6bf 0,transparent 46%),#fffaf0; color:#2e4c37; box-shadow:inset 0 0 0 5px #fffdf6,0 20px 70px #17382c55; font:16px/1.7 "Microsoft YaHei","PingFang SC",system-ui,sans-serif; }
.customer-support-dialog[open] { display:grid; grid-template-columns:minmax(180px,.8fr) minmax(0,1fr); align-items:center; gap:24px; }
.customer-support-dialog::backdrop { background:#173e30b8; backdrop-filter:blur(6px); }
.customer-support-close { position:absolute; top:8px; right:8px; z-index:1; display:grid; place-items:center; width:44px; height:44px; min-width:44px; min-height:44px; padding:0; border:1px solid #dccfae; border-radius:50%; background:#fffaf0; color:#31543c; font:28px/1 system-ui,sans-serif; }
.customer-support-copy { min-width:0; }
.customer-support-eyebrow { display:block; color:#7a6a43; font-size:12px; font-weight:700; letter-spacing:.08em; }
.customer-support-copy h2 { margin:8px 0 12px; font-size:30px; line-height:1.3; }
.customer-support-copy p { margin:0 0 20px; }
.customer-support-original { display:inline-flex; align-items:center; min-height:44px; padding:6px 0; color:#416b47; font-size:14px; text-underline-offset:4px; }
.customer-support-code { min-width:0; display:grid; place-items:center; padding-top:20px; }
.customer-support-code img { display:block; width:auto; height:auto; max-width:100%; max-height:min(440px,calc(var(--visible-height,100dvh) - 100px)); object-fit:contain; border-radius:10px; background:white; user-select:auto; -webkit-user-select:auto; -webkit-touch-callout:default; }
.customer-support-dialog :focus-visible { outline:3px solid #386548; outline-offset:3px; }
@media(max-height:520px) and (orientation:landscape) {
  body .home-screen .license-home-tools { top:max(4px,env(safe-area-inset-top)); right:max(8px,env(safe-area-inset-right)); gap:4px; }
  body .home-screen .license-home-tools button { min-height:44px; padding:6px 9px; font-size:12px; }
  .customer-support-dialog { padding:16px 24px; border-radius:22px 18px 24px 18px; }
  .customer-support-dialog[open] { grid-template-columns:minmax(170px,1fr) minmax(0,1.15fr); gap:20px; }
  .customer-support-code { padding:0 20px 0 0; }
  .customer-support-code img { max-height:calc(var(--visible-height,100dvh) - 60px); }
  .customer-support-copy h2 { margin:6px 0; font-size:24px; }
  .customer-support-copy p { margin-bottom:8px; font-size:14px; }
}
@media(max-height:300px) and (orientation:landscape) {
  body .home-screen .license-home-tools { gap:3px; }
  body .home-screen .license-home-tools button { padding:4px 7px; font-size:11px; }
  .home-screen .home-title { top:19%; }
  .home-screen .home-title strong { font-size:22px; line-height:1.2; }
  .home-screen .home-title small { font-size:9px; }
  .customer-support-dialog { padding:12px 20px; }
  .customer-support-dialog[open] { gap:14px; }
  .customer-support-copy h2 { font-size:22px; }
  .customer-support-eyebrow { font-size:11px; }
}
@media(orientation:portrait) {
  .customer-support-dialog { padding:24px; }
  .customer-support-dialog[open] { grid-template-columns:minmax(0,1fr); gap:8px; text-align:center; }
  .customer-support-copy h2 { margin:5px 0; font-size:26px; }
  .customer-support-copy p { margin:5px 0; }
  .customer-support-code { padding-top:0; }
  .customer-support-code img { max-height:calc(var(--visible-height,100dvh) - 250px); }
}

/* Data-driven levels 3鈥?00 use independent generated environment plates. The
   temporary object layer is a light/material reveal, so objects belong to the
   scene while the hand-off to the finished environment remains cinematic. */
.generic-level-world { background: #8ec7c6; }
.generic-initial-art, .generic-complete-art { object-fit: fill; }
.generic-initial-art { z-index: 0; }
.generic-complete-art { z-index: 1; opacity: 0; transition: opacity 1.35s ease; }
.generic-complete-art.is-visible { opacity: 1; }
.generic-atmosphere { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, #fff8df14, transparent 45%, #173f3826); mix-blend-mode: soft-light; }
.generic-object-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; transition: opacity .9s ease; }
.generic-object-layer.is-finished { opacity: .08; }
/* Each completed word reveals a masked patch of the level's AI completion
   plate. The pixels stay inside the environment and never become stickers. */
.generic-scene-object { position: absolute; inset: 0; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; transform-origin: center; clip-path: ellipse(var(--reveal-rx) var(--reveal-ry) at var(--object-x) var(--object-y)); animation: genericSceneReveal 1s cubic-bezier(.18,.8,.25,1) both; filter: saturate(1.03) drop-shadow(0 0 12px #fff4a844); }
.generic-scene-object.is-restored { animation: none; }
.generic-scene-object.is-action-swim { animation: sceneActionSwim 2.2s ease-in-out infinite; }
.generic-scene-object.is-action-jump { animation: sceneActionJump 1.25s ease-in-out infinite; }
.generic-scene-object.is-action-walk { animation: sceneActionWalk 2.4s ease-in-out infinite; }
.generic-scene-object.is-action-fly { animation: sceneActionFly 2.1s ease-in-out infinite; }
.generic-scene-object.is-action-grow { animation: sceneActionGrow 2.4s ease-in-out infinite; }
.generic-scene-object.is-action-turn { animation: sceneActionTurn 2.2s ease-in-out infinite; }
.generic-scene-object.is-action-work { animation: sceneActionWork 1.8s ease-in-out infinite; }
.generic-level-world.motion-paused .generic-scene-object[class*="is-action-"] { animation-play-state: paused; }
.generic-word-actor { position: absolute; z-index: 3; width: clamp(44px, 7cqw, 86px); height: clamp(44px, 7cqw, 86px); display: grid; place-items: center; border-radius: 50% 50% 44% 44%; background: linear-gradient(145deg, #fff8d9, #ffd47a); border: 3px solid #fff3b2; box-shadow: 0 7px 16px #493b2350, inset 0 -7px 10px #df8c3c33; font-size: clamp(26px, 4.8cqw, 58px); transform: translate(-50%, -50%); animation: genericWordActorIn .65s cubic-bezier(.2,.85,.25,1) both; }
.generic-word-actor::after { content: attr(data-meaning); position: absolute; left: 50%; top: 100%; transform: translate(-50%, 5px); white-space: nowrap; padding: 3px 9px; border-radius: 999px; background: #fffdf2e8; color: #315c4e; font-size: clamp(10px, 1.2cqw, 15px); box-shadow: 0 3px 8px #304c3b25; }
.generic-word-actor.is-restored { animation: none; }
.scene-word-badge { position: absolute; z-index: 5; width: clamp(38px, 5cqw, 72px); height: clamp(38px, 5cqw, 72px); display: grid; place-items: center; transform: translate(-50%, -50%); border-radius: 50% 50% 44% 44%; background: linear-gradient(145deg, #fff8d9, #ffd47a); border: 2px solid #fff3b2; box-shadow: 0 5px 12px #493b2344; font-size: clamp(22px, 3.5cqw, 42px); animation: genericWordActorIn .65s cubic-bezier(.2,.85,.25,1) both; pointer-events: none; }
.scene-word-badge::after { content: attr(data-meaning); position: absolute; top: 100%; left: 50%; transform: translate(-50%, 4px); white-space: nowrap; padding: 2px 7px; border-radius: 999px; background: #fffdf0df; color: #315c4e; font-size: clamp(9px, 1cqw, 13px); }
.scene-word-badge.is-restored { animation: none; }
@keyframes genericWordActorIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.35) rotate(-12deg); } 70% { transform: translate(-50%, -50%) scale(1.12) rotate(4deg); } to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } }
.word-lesson-layer { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; pointer-events: none; padding: 5vmin; box-sizing: border-box; }
.word-lesson-layer[hidden] { display: none; }
.word-lesson-card { position: relative; display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); width: min(560px, 86vw); min-height: 128px; padding: clamp(16px, 2vw, 24px) clamp(20px, 2.5vw, 32px); box-sizing: border-box; border: 2px solid #ffe6a4; border-radius: 26px; background: linear-gradient(135deg, #fffdf5f4, #fff4dff2); box-shadow: 0 18px 55px #153f3547, inset 0 0 0 1px #ffffffaa; animation: wordLessonIn .38s cubic-bezier(.2,.9,.3,1) both; color: #254e43; }
.word-lesson-art { flex: 0 0 auto; width: clamp(62px, 9vw, 92px); height: clamp(62px, 9vw, 92px); display: grid; place-items: center; border-radius: 24px; background: linear-gradient(145deg, #ffe78d, #ffc76d); font-size: clamp(38px, 6vw, 62px); box-shadow: inset 0 -8px 14px #e98c3c33, 0 7px 14px #7a4d2330; animation: wordLessonBounce .8s ease-out both; }
.word-lesson-copy { min-width: 0; display: grid; gap: 3px; }
.word-lesson-copy > span:first-child { font-size: clamp(11px, 1.3vw, 15px); color: #b37935; letter-spacing: .08em; }
.word-lesson-copy strong { font-size: clamp(24px, 3.5vw, 38px); line-height: 1.05; color: #1d5849; }
.word-lesson-copy > span:not(:first-child) { font-size: clamp(15px, 2vw, 21px); color: #4a7464; }
.word-lesson-copy p { margin: 5px 0 0; font-size: clamp(13px, 1.6vw, 18px); line-height: 1.35; color: #315c4e; }
.word-lesson-copy small { margin-top: 3px; color: #8a6d49; font-size: clamp(11px, 1.25vw, 14px); }
.word-lesson-spark { position: absolute; right: 16px; top: 8px; color: #e9a03c; font-size: 24px; animation: wordLessonTwinkle 1.1s ease-in-out infinite; }
.word-lesson-summary { width: min(760px, 90vw); }
.word-lesson-summary .word-lesson-art { background: linear-gradient(145deg, #a8ddba, #67b49a); }
.word-lesson-summary .word-lesson-copy p { max-height: 5.2em; overflow: hidden; }
.word-lesson-video { position: relative; width: min(760px, 90vw); padding: clamp(18px, 3vw, 32px); box-sizing: border-box; border: 3px solid #ffe39a; border-radius: 30px; background: linear-gradient(145deg, #fffdf4f5, #eaf8eaf2); box-shadow: 0 24px 70px #153f3555; text-align: center; animation: wordLessonIn .42s cubic-bezier(.2,.9,.3,1) both; color: #285544; }
.word-lesson-video > strong { display: block; font-size: clamp(22px, 3.3vw, 38px); margin-bottom: 12px; }
.word-lesson-video-stage { position: relative; height: clamp(150px, 26vw, 250px); display: grid; place-items: center; overflow: hidden; border-radius: 24px; background: radial-gradient(circle at 50% 45%, #fff4bd 0 10%, #b8e3c1 11% 34%, #78b99c 35% 100%); border: 2px solid #d4efc6; }
.word-lesson-video-stage::before, .word-lesson-video-stage::after { content: ''; position: absolute; width: 45%; height: 45%; border-radius: 50%; background: #ffffff34; animation: lessonCloud 2.8s ease-in-out infinite alternate; }
.word-lesson-video-stage::before { left: 5%; top: 10%; } .word-lesson-video-stage::after { right: 4%; bottom: 8%; animation-delay: -1.2s; }
.word-lesson-video-burst { position: relative; z-index: 1; font-size: clamp(64px, 12vw, 124px); animation: wordLessonBounce .65s ease-out both; }
.word-lesson-video-stage strong, .word-lesson-video-stage span { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); white-space: nowrap; text-shadow: 0 2px 0 #fff; }
.word-lesson-video-stage strong { bottom: 28px; font-size: clamp(24px, 4vw, 44px); color: #1d5849; }
.word-lesson-video-stage span { bottom: 9px; font-size: clamp(14px, 2vw, 21px); color: #4c765f; }
.word-lesson-video-caption { min-height: 2.4em; margin: 12px auto 10px; font-size: clamp(14px, 2vw, 20px); line-height: 1.4; color: #315c4e; }
.word-lesson-video-tag { display: block; color: #8a6d49; font-size: clamp(11px, 1.3vw, 15px); }
.word-lesson-video-close { border: 0; border-radius: 999px; padding: .65em 1.4em; background: #2e8064; color: #fffdf1; font: inherit; cursor: pointer; pointer-events: auto; }
@keyframes lessonCloud { from { transform: translateX(-12px) scale(.9); opacity: .35; } to { transform: translateX(12px) scale(1.1); opacity: .75; } }
@keyframes wordLessonIn { from { opacity: 0; transform: translateY(24px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes wordLessonBounce { 0% { transform: scale(.55) rotate(-10deg); } 70% { transform: scale(1.08) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes wordLessonTwinkle { 0%,100% { opacity: .45; transform: scale(.8) rotate(0); } 50% { opacity: 1; transform: scale(1.25) rotate(18deg); } }
.word-story-film { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: #102d26b8; pointer-events: auto; animation: wordStoryFilmIn .45s ease-out both; }
.word-story-film-scene { position: absolute; inset: 4.5vh 4vw; overflow: hidden; border: 2px solid #ffe7a0; border-radius: clamp(18px, 2vw, 34px); background: linear-gradient(145deg, #8ecbb7, #315f4e); background-position: center; background-size: cover; box-shadow: 0 28px 90px #061b1688; animation: wordStoryKenBurns 8s ease-out both; }
.word-story-film-wash { position: absolute; inset: 0; background: linear-gradient(180deg, #0d332633 0%, transparent 35%, #092a2299 100%); }
.word-story-film-heading { position: absolute; left: 4%; top: 5%; padding: .55em 1em; border: 1px solid #fff5; border-radius: 999px; background: #173f38c9; color: #fff7d4; font-size: clamp(15px, 2.2cqw, 30px); font-weight: 800; letter-spacing: .04em; text-shadow: 0 2px 6px #09231e; }
.word-story-film-focus { position: absolute; left: 50%; top: 43%; display: grid; justify-items: center; gap: .08em; transform: translate(-50%, -50%); color: #fff8dc; text-align: center; text-shadow: 0 3px 12px #173b2e; animation: wordStoryFocus 1.3s ease-in-out infinite alternate; }
.word-story-film-focus strong { font-size: clamp(32px, 7cqw, 96px); line-height: 1; }
.word-story-film-focus span { font-size: clamp(17px, 2.5cqw, 32px); }
.word-story-film-caption { position: absolute; left: 8%; right: 8%; bottom: 9%; margin: 0; padding: .7em 1em; border-top: 1px solid #fff8; border-bottom: 1px solid #fff8; color: #fffdf0; font-size: clamp(15px, 2.1cqw, 28px); line-height: 1.5; text-align: center; text-shadow: 0 2px 8px #08231d; }
.word-story-film-progress { position: absolute; left: 8%; right: 8%; bottom: 4%; height: 5px; overflow: hidden; border-radius: 99px; background: #fff5; }
.word-story-film-progress::before { content: ''; display: block; width: calc(var(--story-progress, 0) * 100%); height: 100%; border-radius: inherit; background: #ffe28a; transition: width .55s ease; }
.word-story-film-close { position: absolute; right: 6%; top: 6%; border: 1px solid #fff8; border-radius: 999px; padding: .55em 1em; background: #fff8e8e8; color: #285344; font: inherit; font-weight: 800; cursor: pointer; }
@keyframes wordStoryFilmIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes wordStoryKenBurns { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes wordStoryFocus { from { opacity: .76; transform: translate(-50%, -50%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }
.generic-level-screen .word-orb { box-shadow: inset 0 0 10px #fff, inset -4px -7px 12px var(--orb-color), 0 0 16px color-mix(in srgb, var(--orb-color) 70%, transparent); }
@keyframes genericSceneReveal { from { opacity: 0; clip-path: ellipse(0% 0% at var(--object-x) var(--object-y)); transform: scale(.995); filter: brightness(1.38) saturate(1.08) drop-shadow(0 0 26px #fff4ad); } 48% { opacity: 1; clip-path: ellipse(12% 8% at var(--object-x) var(--object-y)); filter: brightness(1.16) saturate(1.04) drop-shadow(0 0 16px #ffe88b); } to { opacity: 1; clip-path: ellipse(var(--reveal-rx) var(--reveal-ry) at var(--object-x) var(--object-y)); transform: scale(1); filter: none; } }
@keyframes sceneActionSwim { 0%,100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(1.2%) translateY(-.8%); } }
@keyframes sceneActionJump { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-2.2%); } 60% { transform: translateY(0); } }
@keyframes sceneActionWalk { 0%,100% { transform: translateX(-.8%); } 50% { transform: translateX(.8%); } }
@keyframes sceneActionFly { 0%,100% { transform: translate(-.7%,.4%) rotate(-.25deg); } 50% { transform: translate(.8%,-.8%) rotate(.35deg); } }
@keyframes sceneActionGrow { 0%,100% { transform: scale(1); } 50% { transform: scale(1.015); } }
@keyframes sceneActionTurn { 0%,100% { transform: rotate(-.45deg); } 50% { transform: rotate(.45deg); } }
@keyframes sceneActionWork { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-.65%); } }

/* Level 2: the garden keeps the level 1 artboard, controls and light-orb rhythm. */
.level-world-garden { background: linear-gradient(180deg, #aee6ef 0%, #d9f3cb 60%, #a8d08b 100%); }
.garden-backdrop { z-index: 0; }
.garden-complete-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url("assets/scene-v5/garden-level2-complete.webp") center / 100% 100% no-repeat; opacity: var(--garden-progress, 0); transition: opacity 1.2s ease; }
.meadow-complete .meadow-complete-layer, .garden-complete .garden-complete-layer { opacity: 1; }
.meadow-complete .base-landscape, .garden-complete .garden-backdrop { opacity: 0; }
.garden-tint { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, #fff3c71c, #8ccf991e 78%, #5f9f5b1a); mix-blend-mode: soft-light; }
.level-world-garden .scene-layer { z-index: 3; }
.garden-grow { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url("assets/scene-v5/garden-level2-complete.webp") center / 100% 100% no-repeat; transform-origin: 50% 100%; animation: sceneObjectGrow .85s cubic-bezier(.18,.8,.28,1) both; filter: drop-shadow(0 0 10px #fff2a766); }
.garden-grow.is-restored { animation: none; }
.garden-object { position: absolute; pointer-events: none; transform-origin: 50% 100%; }
.garden-raster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; user-select: none; }
.garden-object.is-entering { animation: gardenAppear .72s cubic-bezier(.18,.8,.28,1) both; }
.garden-object.is-restored { opacity: 1; }
.garden-reveal-pulse { position: absolute; width: clamp(32px, 4cqw, 78px); aspect-ratio: 1; margin: -2cqw 0 0 -2cqw; border-radius: 50%; border: 2px solid #fff7bd; box-shadow: 0 0 18px #fff9b8, 0 0 42px #ffd96599; animation: gardenPulse 1.1s ease-out both; pointer-events: none; }
.garden-reveal-pulse.is-restored { display: none; }
.garden-effect { position: absolute; inset: 0; pointer-events: none; }
.garden-rain { overflow: hidden; background: linear-gradient(180deg, #8ec8df0d, #8ec8df16); }
.garden-rain i { position: absolute; left: var(--rain-x); top: -12%; width: 2px; height: var(--rain-length); border-radius: 99px; background: linear-gradient(#eefcff, #72b7de); opacity: .66; transform: rotate(12deg); animation: gardenRain .9s linear infinite; animation-delay: var(--rain-delay); }
.garden-sun { background: radial-gradient(circle at 50% 50%, #fffbd7 0 13%, #ffe68d 14% 31%, #ffd56c40 32% 60%, transparent 61%); opacity: .58; mix-blend-mode: screen; }
.garden-cloud { background: radial-gradient(ellipse at 50% 38%, #fff 0 10%, #f8fbffbd 11% 26%, transparent 49%); opacity: .5; }
.garden-grown .garden-stem { transform: scale(1.08); }
.garden-wet { filter: saturate(.94) brightness(1.02); }
.garden-big .garden-apple, .garden-big .garden-orange { transform: scale(1.12); }
.garden-small .garden-apple, .garden-small .garden-orange { transform: scale(.88); }
.level-world-garden .word-prompt, .level-world-garden .input-feedback { z-index: 12; }
.level-world-garden .input-feedback { bottom: 28%; }
.level-world-garden .input-feedback, .generic-level-world .input-feedback { top: 10%; bottom: auto; }
.level-world-garden .word-orb { box-shadow: inset 0 0 10px #fff, inset -4px -7px 12px var(--orb-color), 0 0 16px color-mix(in srgb, var(--orb-color) 70%, transparent); }
.level-node.available { cursor: pointer; }
.level-node.available:hover { filter: brightness(1.08); }
@keyframes gardenAppear { from { opacity: 0; transform: translateY(10px) scale(.84); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes gardenRain { from { transform: translate3d(0, -12vh, 0) rotate(12deg); } to { transform: translate3d(-7vw, 120vh, 0) rotate(12deg); } }
@keyframes gardenPulse { from { opacity: .95; transform: scale(.35); } to { opacity: 0; transform: scale(2.2); } }

/* The map is a horizontal climb. Level markers belong to the tree route and
   stay visually small, like carved knots in the trunk, rather than floating
   cards or stickers over the artwork. */
.map-screen .map-route { overflow: visible; }
.map-screen .route-lines { overflow: visible; }
.map-screen #routeShadow { stroke: #1c3e2d88; stroke-width: 16; opacity: .34; filter: blur(5px); }
.map-screen #routePath { stroke: #7f9b59; stroke-width: 8; opacity: .48; }
.map-screen #routeProgress { stroke: #f6d76c; stroke-width: 5; opacity: .72; filter: drop-shadow(0 0 6px #ffe798aa); }
.map-screen .level-node {
  width: clamp(24px, 2.65cqw, 46px);
  height: clamp(24px, 2.65cqw, 46px);
  color: #fff7cc;
  text-shadow: 0 1px 3px #17352b, 0 0 4px #17352b99;
}
.map-screen .level-node::before {
  inset: 8%;
  transform: none;
  border-radius: 50% 46% 52% 48%;
  background: radial-gradient(circle at 31% 24%, #fff4bf 0 7%, transparent 8%), radial-gradient(circle at 38% 34%, #a3b67d 0 21%, #6b8758 45%, #33513a 78%);
  box-shadow: inset 3px 4px 6px #f0f4ba66, inset -4px -5px 7px #142d2599, 0 3px 8px #183a2b99;
}
.map-screen .level-node::after {
  left: 24%; right: 24%; bottom: 0; height: 15%;
  border-radius: 50%; background: #163a2b66; filter: blur(3px);
}
.map-screen .level-node .node-marker { display: none; }
.map-screen .level-node .node-number {
  top: 50%; left: 50%;
  min-width: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent;
  color: #fff7cc; line-height: 1;
  transform: translate(-50%, -50%);
  font-size: clamp(10px, .85cqw, 14px);
}
.map-screen .level-node .node-name {
  top: calc(100% + 8px);
  font-size: clamp(10px, .76cqw, 13px);
  color: #fff9d3;
  text-shadow: 0 1px 3px #17352b, 0 0 5px #17352b99;
}
.map-screen .level-node.near-bottom .node-name { top: auto; bottom: calc(100% + 8px); }
.map-screen .level-node.near-top .node-name { top: calc(100% + 8px); }
.map-screen .level-node.selected { transform: translate(-50%, -50%) scale(1.32); }
.map-screen .level-node.selected::before {
  inset: 0;
  background: radial-gradient(circle at 34% 26%, #fffce0 0 8%, transparent 9%), radial-gradient(circle, #f6dd7a 0 18%, #92a766 39%, #426045 76%);
  box-shadow: 0 0 0 3px #fff3b7cc, 0 0 22px 8px #ffe88b99, inset 3px 4px 6px #fff6b588, inset -4px -6px 7px #19312699;
}
.map-screen .level-node.completed::before {
  inset: 8% 7% 12%;
  transform: none;
  border-radius: 48% 48% 44% 44%;
  background: radial-gradient(circle at 31% 24%, #ffb0a1 0 8%, transparent 9%), radial-gradient(circle at 40% 36%, #ff6f55 0 26%, #e43e32 58%, #a82126 100%);
  box-shadow: inset 3px 4px 6px #ffd8af88, inset -4px -6px 7px #721b2188, 0 3px 8px #66221f88;
}
.map-screen .level-node.completed::after {
  left: 53%; right: auto; top: -5%; bottom: auto;
  width: 25%; height: 30%;
  border-radius: 90% 12% 90% 12%;
  transform: rotate(-30deg);
  background: #57924e;
  filter: drop-shadow(0 1px 2px #1f4b2b99);
}
.map-screen .level-node.completed .node-number {
  color: transparent;
  font-size: 0;
}
.map-screen .level-node.completed.selected::before {
  box-shadow: 0 0 0 3px #fff3b7cc, 0 0 24px 9px #ff9d7288, inset 3px 4px 6px #ffd7b088, inset -4px -6px 7px #721b2188;
  animation: mapApplePulse 2.2s ease-in-out infinite;
}
@keyframes mapApplePulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.15) saturate(1.12); } }

@media (max-height: 520px) and (orientation: landscape) {
  .level-world-garden .word-prompt { bottom: 29%; }
  .level-world-garden .input-feedback { bottom: 39%; }
}

/* Mystery gallery background: bright storybook color, with the level art
   deliberately hidden until a level is cleared. */
.map-screen { background: linear-gradient(180deg, #56c9ea 0%, #9be4d3 44%, #f8c878 100%); }
.map-screen::before { background:
  radial-gradient(ellipse at 12% 12%, #ffffffc7 0 6%, transparent 26%),
  radial-gradient(ellipse at 86% 15%, #fff7d777 0 5%, transparent 22%),
  linear-gradient(180deg, #7ed9f533 0%, #fff5d22d 48%, #184a453b 100%); }
.map-screen::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55; background-image: radial-gradient(circle at 14% 34%, #fff8c9 0 1px, transparent 2px), radial-gradient(circle at 74% 23%, #fff8c9 0 1px, transparent 2px), radial-gradient(circle at 91% 54%, #ffffff 0 1px, transparent 2px), radial-gradient(circle at 28% 72%, #fff0a0 0 1px, transparent 2px); background-size: 17% 23%, 23% 31%, 19% 27%, 29% 33%; animation: gallerySparkle 8s ease-in-out infinite alternate; }
.level-carousel-shell, .map-hero-copy, .carousel-toolbar, .map-dock, .map-screen .topbar { z-index: 4; }
.level-card { font: inherit; text-align: left; -webkit-appearance: none; appearance: none; }
.level-card.mystery { background: #244a45; }
.level-card.mystery::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #16393212 0%, transparent 54%, #16393244 100%); pointer-events: none; }
.level-card.mystery::after { content: ""; position: absolute; inset: 0; z-index: 1; background: #18393418; pointer-events: none; }
.level-card-mystery { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; pointer-events: none; }
.level-card-mystery-glow { position: absolute; width: 30%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fffbdc 0 4%, #ffe68cbb 8%, #d9a8ff55 34%, transparent 70%); filter: blur(1px); animation: mysteryPulse 3.4s ease-in-out infinite; }
.level-card-mystery-mark { position: relative; z-index: 3; display: grid; place-items: center; width: clamp(42px, 6cqw, 82px); aspect-ratio: 1; border: 2px solid #fff7ca; border-radius: 50%; background: #244f45b8; color: #fff8ce; font-size: clamp(24px, 3.8cqw, 48px); font-weight: 900; line-height: 1; box-shadow: 0 0 0 8px #fff4b522, 0 0 26px #ffe18b55; }
.level-card-mystery-mark:empty { display: none; }
.level-card.mystery.locked .level-card-mystery-mark { filter: grayscale(.2); }
.level-card.completed .level-card-mystery { display: none; }
.level-card.completed .level-card-shade { background: linear-gradient(180deg, #081c1f12 0%, transparent 42%, #061c1dcc 100%); }
.level-card-status { letter-spacing: .02em; }
@keyframes gallerySparkle { from { opacity: .32; transform: translateY(0); } to { opacity: .7; transform: translateY(-6px); } }
@keyframes mysteryPulse { 0%,100% { transform: scale(.92); opacity: .72; } 50% { transform: scale(1.08); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .map-screen::after, .level-card-mystery-glow { animation: none; }
}

/* Horizontal level gallery: a scene corridor with one clear focal card. */
.map-screen { background: #102f32; color: #fff9e7; isolation: isolate; }
.map-screen::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, #0b252b88 0%, #123c3a20 40%, #102b2edb 100%); pointer-events: none; }
.map-ambient { position: absolute; inset: -7%; z-index: -1; background-position: center; background-size: cover; filter: blur(24px) saturate(.92) brightness(.62); opacity: .8; transform: scale(1.06); transition: background-image .55s ease, opacity .35s ease; }
.map-hero-copy { position: absolute; z-index: 3; top: 13.8%; left: 50%; width: min(76%, 820px); transform: translateX(-50%); color: #fff4d1; text-align: center; font-size: clamp(12px, 1.35cqw, 20px); line-height: 1.5; text-shadow: 0 2px 12px #061d20; pointer-events: none; }
.level-carousel-shell { position: absolute; z-index: 2; top: 20.5%; left: 3.2%; right: 3.2%; bottom: 24.5%; display: grid; grid-template-columns: minmax(44px, 5.5cqw) minmax(0, 1fr) minmax(44px, 5.5cqw); align-items: center; gap: 1.4cqw; }
.carousel-arrow { width: clamp(44px, 4.8cqw, 68px); aspect-ratio: 1; justify-self: center; border: 1px solid #fff8; border-radius: 50%; background: #fff9e6df; color: #23533f; font-size: clamp(22px, 2.5cqw, 38px); line-height: 1; box-shadow: 0 8px 24px #031b1b55; transition: transform .2s ease, background .2s ease, opacity .2s ease; }
.carousel-arrow:hover { background: #fffdf2; transform: scale(1.08); }
.carousel-arrow:active { transform: scale(.94); }
.level-carousel { --level-card-width: clamp(280px, 58cqw, 760px); width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x; }
.level-carousel::-webkit-scrollbar { display: none; }
.level-track { display: flex; align-items: center; gap: clamp(16px, 2cqw, 34px); width: max-content; min-height: 100%; padding-inline: max(18px, calc((100cqw - var(--level-card-width)) / 2)); }
.level-card { position: relative; flex: 0 0 var(--level-card-width); aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; scroll-snap-align: center; touch-action: pan-x; border: 2px solid #fff5; border-radius: clamp(18px, 2.1cqw, 34px); padding: 0; color: #fff; background: #244a45; box-shadow: 0 18px 42px #031a1e66; opacity: .5; transform: scale(.84); transform-origin: center; transition: transform .4s cubic-bezier(.2,.8,.25,1), opacity .4s ease, filter .4s ease, border-color .4s ease, box-shadow .4s ease; }
.level-card.selected { z-index: 2; border-color: #ffe59b; opacity: 1; transform: scale(1); box-shadow: 0 24px 54px #041b1c88, 0 0 0 4px #ffebad33, 0 0 48px #ffe18b2e; }
.level-card:not(.selected):hover { opacity: .76; transform: scale(.89); }
.level-card.locked { filter: saturate(.64) brightness(.72); }
.level-card.available { cursor: pointer; }
.level-card-art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: fill; user-select: none; pointer-events: none; }
.level-card-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #081c1f18 0%, transparent 42%, #061c1dcc 100%); pointer-events: none; }
.level-card-number { position: absolute; z-index: 2; top: 5.5%; left: 4%; min-width: 2.3em; padding: .22em .5em; border: 1px solid #fff9; border-radius: 99px; background: #173b38bf; color: #fff5c9; font-size: clamp(13px, 1.35cqw, 22px); font-weight: 900; letter-spacing: .08em; text-align: center; font-variant-numeric: tabular-nums; }
.level-card-status { position: absolute; z-index: 2; top: 6%; right: 4%; padding: .3em .7em; border: 1px solid #fff8; border-radius: 99px; background: #153c38c7; color: #fff7d7; font-size: clamp(10px, 1.05cqw, 16px); font-weight: 800; white-space: nowrap; }
.level-card.completed .level-card-status { background: #f1b94ddd; border-color: #fff3bd; color: #583618; }
.level-card-copy { position: absolute; z-index: 2; left: 5%; right: 5%; bottom: 6%; display: grid; gap: .25em; text-align: left; text-shadow: 0 2px 8px #05191a; }
.level-card-copy strong { color: #fff8df; font-size: clamp(20px, 2.7cqw, 42px); line-height: 1.1; letter-spacing: .06em; }
.level-card-copy small { color: #e5f1db; font-size: clamp(11px, 1.12cqw, 18px); }
.carousel-toolbar { position: absolute; z-index: 4; top: 69.3%; left: 7%; right: 7%; display: flex; align-items: center; gap: 1.4cqw; min-height: 44px; }
.carousel-toolbar .locate-button { flex: 0 0 auto; background: #fff9e9d9; }
.carousel-position { display: grid; gap: .15em; min-width: 10em; color: #fff5d2; text-shadow: 0 2px 8px #061d20; }
.carousel-position strong { font-size: clamp(13px, 1.35cqw, 20px); }
.carousel-position span { font-size: clamp(11px, 1.05cqw, 16px); color: #d9edda; }
.carousel-hint { margin-left: auto; color: #e1f0dd; font-size: clamp(10px, .95cqw, 14px); text-align: right; text-shadow: 0 2px 8px #061d20; }
.map-screen .map-dock { left: 10%; right: 10%; bottom: 2.8%; min-height: 12%; padding: 1cqw 1.5cqw; border-color: #f6e2ab; background: #fff9eaf0; }
.map-screen .map-dock h2 { color: #254a38; }
.map-screen .map-dock p, .map-screen .map-dock > div > span { color: #567052; }
.map-screen .map-dock .primary-button { min-width: 150px; }

@media (max-height: 520px) and (orientation: landscape) {
  .map-hero-copy { top: 13%; font-size: 11px; }
  .level-carousel-shell { top: 19%; left: 2%; right: 2%; bottom: 27%; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 6px; }
  .level-carousel { --level-card-width: clamp(250px, 66cqw, 620px); }
  .level-card-copy strong { font-size: clamp(16px, 2.3cqw, 28px); }
  .carousel-toolbar { top: 67%; left: 5%; right: 5%; }
  .carousel-hint { display: none; }
  .map-screen .map-dock { left: 7%; right: 7%; min-height: 14%; padding: 5px 10px; }
  .map-screen .map-dock h2 { font-size: 17px; }
  .map-screen .map-dock p { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .level-carousel { scroll-behavior: auto; }
  .level-card { transition: none; }
}
@media (max-height:520px) and (orientation:landscape) {
  .level-carousel { container-type:size; --level-card-width:min(72cqw,calc((100cqh - 14px) * 16 / 9)); }
  .level-card-copy strong { font-size:16px; }
  .level-card-mystery-mark { font-size:32px; }
}

/* Final gallery palette override: keep the map bright and storybook-like. */
.map-screen { background: linear-gradient(180deg, #56c9ea 0%, #9be4d3 44%, #f8c878 100%); }
.map-screen::before { background:
  radial-gradient(ellipse at 12% 12%, #ffffffc7 0 6%, transparent 26%),
  radial-gradient(ellipse at 86% 15%, #fff7d777 0 5%, transparent 22%),
  linear-gradient(180deg, #7ed9f533 0%, #fff5d22d 48%, #184a453b 100%); }
.map-screen::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .55; background-image: radial-gradient(circle at 14% 34%, #fff8c9 0 1px, transparent 2px), radial-gradient(circle at 74% 23%, #fff8c9 0 1px, transparent 2px), radial-gradient(circle at 91% 54%, #ffffff 0 1px, transparent 2px), radial-gradient(circle at 28% 72%, #fff0a0 0 1px, transparent 2px); background-size: 17% 23%, 23% 31%, 19% 27%, 29% 33%; animation: gallerySparkle 8s ease-in-out infinite alternate; }
.map-ambient { z-index: 0; inset: -4%; opacity: .92; filter: saturate(1.02) brightness(.92); background-image: url("/assets/map-gallery-bg-v1-lossless.webp?v=20261029"); background-position: center; background-size: cover; mix-blend-mode: normal; }
.map-screen .topbar, .map-hero-copy, .level-carousel-shell, .carousel-toolbar, .map-dock { z-index: 4; }
@media (max-height:520px) and (orientation:landscape) {
  .map-screen .page-heading h1 { font-size:14px; }
  .map-hero-copy { top:calc(2% + 48px); }
}
@media (max-height:320px) and (orientation:landscape) {
  .map-hero-copy { display:none; }
  .level-carousel-shell { top:23%; }
}

/* Card dimensions are fixed by the gallery. Skip offscreen descendants while
   retaining every level, its artwork and keyboard/scroll navigation. */
.level-card { content-visibility: auto; contain: layout style paint; }

/* Huawei's Chromium 92 has no container units. Gallery widths are measured
   when centered; the grid and touch controls need ordinary-unit fallbacks. */
@supports not (width: 1cqw) {
  .topbar { gap:8px; }
  .level-carousel-shell { grid-template-columns:44px minmax(0,1fr) 44px; gap:12px; }
  .carousel-arrow { width:44px; height:44px; font-size:28px; }
  .level-track { gap:20px; }
  .level-card-number { font-size:clamp(11px,1.35vw,20px); }
  .level-card-status { font-size:clamp(10px,1.05vw,16px); }
  .level-card-copy strong { font-size:clamp(16px,2.3vw,32px); }
  .level-card-copy small { font-size:clamp(10px,1.1vw,16px); }
  .level-card-mystery-mark { width:64px; height:64px; font-size:36px; }
  .carousel-toolbar { gap:12px; }
  .map-screen .map-dock { padding:8px 14px; }
  .word-orb { width:clamp(36px,5.5vw,86px); height:clamp(36px,5.5vw,86px); }
  .word-orb .orb-word { font-size:clamp(11px,1.25vw,20px); }
}




/* 2026-10-30 visual polish: the storybook is the viewport. Keep the art
   readable on wide desktop windows instead of shrinking a 16:9 card into a
   dark frame with blurred gutters. */
html { width:100%; height:100%; }
body { width:100%; height:100vh; height:100dvh; height:var(--layout-height,100dvh); }
body { display:grid; place-items:stretch; background:#16372e; }
.stage,
.stage.is-fullscreen,
.stage:has([data-screen-panel="forestMap"]:not([hidden])),
.stage:has([data-screen-panel="qiqu"]:not([hidden])) {
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  aspect-ratio:auto;
  border-radius:0;
  box-shadow:none;
}
.screen { border-radius:0; }
.backdrop { object-fit:fill; }
.home-screen .backdrop,
.level-screen .backdrop,
.rank-screen .rank-art { object-fit:fill; }
.screen[data-screen-panel="qiqu"] iframe { display:block; }
.customer-support-dialog { box-shadow:0 18px 46px #17382c3d; }
.customer-support-code img { display:block; max-width:100%; height:auto; }


/* Paint to every viewport edge; reserve safe areas for controls only. */
.home-portals [aria-busy="true"] { box-shadow:inset 0 0 0 3px #fff8; cursor:progress; }
.topbar button[data-screen] { touch-action:none; }
.level-world .audio-settings-panel { max-height:calc(var(--visible-height,100vh) - 80px); overflow-y:auto; }

:root{--game-safe-left:12px;--game-safe-right:12px;--game-safe-top:6px;--game-safe-bottom:6px;--game-safe-left:max(12px,env(safe-area-inset-left),var(--cutout-fallback,0px));--game-safe-right:max(12px,env(safe-area-inset-right),var(--cutout-fallback,0px));--game-safe-top:max(6px,env(safe-area-inset-top));--game-safe-bottom:max(6px,env(safe-area-inset-bottom));}
/* Artwork fills the screen; controls stay inside its usable safe area. */
.stage{width:var(--layout-width,100%);height:var(--layout-height,100%);}
.home-brand-logo{left:max(2.4%,var(--game-safe-left));}
.home-portals{left:max(2.5%,var(--game-safe-left));right:max(6.4%,var(--game-safe-right));}
body .home-screen .license-home-tools{right:var(--game-safe-right);top:var(--game-safe-top);}
.level-world .topbar,.map-screen .topbar{left:var(--game-safe-left);right:var(--game-safe-right);top:var(--game-safe-top);}

.forest-rest-note{position:fixed;z-index:100;top:calc(var(--game-safe-top,8px) + 48px);left:50%;transform:translateX(-50%);width:min(520px,85vw);display:flex;align-items:center;gap:16px;padding:14px 20px;border:2px solid #d3bd83;border-radius:20px;background:#fff8e8;color:#36543d;box-shadow:0 8px 30px #203b3822;font:14px/1.6 sans-serif}.forest-rest-note strong{font-size:18px}.forest-rest-note button{min-height:44px;white-space:nowrap;border:1px solid #abc199;border-radius:16px;background:#e6efd8;color:#36543d;padding:6px 12px}

.home-parent-entry{position:absolute;right:var(--game-safe-right,16px);bottom:var(--game-safe-bottom,12px);z-index:6;min-height:44px;padding:8px 18px;border:1px solid #e4c784;border-radius:24px;background:#fff7e6ed;color:#36513b;font:700 14px/1.3 "Microsoft YaHei",sans-serif;box-shadow:0 3px 12px #25473525;touch-action:manipulation}.home-parent-entry:disabled{opacity:.6}
@media(orientation:landscape) and (max-height:500px) and (pointer:coarse){:root{--cutout-fallback:min(64px,14vh)}}

/* The fourth portal opens a plaza; the other illustrated destinations retain
   their existing layouts and navigation. */
.hotplay-plaza{overflow-y:auto;overscroll-behavior:contain;padding:clamp(18px,3vw,42px) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));background:linear-gradient(145deg,#edf4ddf5,#fff7e8ed),url('assets/home-clean-v5.webp') center/cover;color:#254c36}
.hotplay-header,.hotplay-content{width:min(1100px,100%);margin-inline:auto}.hotplay-header{display:flex;align-items:center;gap:24px;margin-bottom:18px}.hotplay-header>.quiet-button{flex:none;background:#fffbec;border:1px solid #c5d3ab;box-shadow:0 3px 0 #b9c99b;min-height:44px}.hotplay-header>div>span{font-size:13px;letter-spacing:.12em;color:#697e52}.hotplay-header h1{font-size:clamp(28px,4vw,44px);line-height:1.3}.hotplay-intro{margin-bottom:22px;color:#5c7050;font-size:clamp(14px,1.5vw,18px)}
.hotplay-feature{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);border:2px solid #fffaf0;border-radius:28px;background:#fffaf0;box-shadow:0 16px 40px #35592b20,0 3px 0 #c6d0a3;overflow:hidden}.hotplay-scene{position:relative;min-height:350px;background:linear-gradient(#d2f0b030,#a7ce5740),url('hotplay/assets/campaign-v5/meadow-ground.webp') center/cover;isolation:isolate;overflow:hidden}.hotplay-scene::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#38622930,transparent 65%);pointer-events:none}.hotplay-scene img{position:absolute;object-fit:contain;filter:drop-shadow(0 8px 5px #2d57222b);user-select:none}.hotplay-levels{position:absolute;z-index:2;top:18px;left:18px;padding:7px 13px;border:1px solid #f3e0a7;border-radius:24px;background:#fff8df;color:#446333;font-size:13px;font-weight:700}.hotplay-house{width:39%;height:70%;left:-8%;bottom:2%}.hotplay-plant{width:42%;height:69%;left:17%;bottom:8%}.hotplay-zombie{width:24%;height:52%;right:4%;bottom:29%}.hotplay-jiangshi{width:22%;height:46%;right:19%;bottom:1%}
.hotplay-feature-copy{padding:clamp(24px,3.3vw,42px);align-self:center;min-width:0}.hotplay-subject{display:block;margin-bottom:12px;font-size:13px;color:#747942;letter-spacing:.04em}.hotplay-feature h2{font-size:clamp(28px,3.2vw,40px);line-height:1.3;margin-bottom:14px;letter-spacing:.02em}.hotplay-feature-copy>p{font-size:16px;line-height:1.9;color:#5b6b50;max-width:28em}.hotplay-play{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:52px;margin-top:28px;padding:12px 20px;border:1px solid #365f36;border-radius:14px;background:#38724a;box-shadow:0 4px 0 #254f35;color:#fff7d9;text-decoration:none;font-weight:800;font-size:17px;touch-action:manipulation}.hotplay-play:hover{background:#2e6540}.hotplay-play:active{transform:translateY(2px);box-shadow:0 2px 0 #254f35}.hotplay-play:focus-visible{outline:3px solid #b38531;outline-offset:4px}.hotplay-guide{margin-top:16px;color:#61714f;font-size:13px;line-height:1.8}.hotplay-guide summary{width:max-content;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:7px;touch-action:manipulation}.hotplay-guide summary::after{content:'＋';font-size:16px}.hotplay-guide[open] summary::after{content:'−'}.hotplay-guide p{padding-top:5px}
.hotplay-subject-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}.hotplay-subject-card{display:flex;min-height:154px;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:5px;padding:14px 13px;border:1px solid #cfdbb4;border-radius:17px;background:#fffdf3;color:#315b3d;text-decoration:none;box-shadow:0 3px 0 #d4dfbb;transition:transform .15s,box-shadow .15s,background .15s;touch-action:manipulation}.hotplay-subject-card:hover{transform:translateY(-2px);background:#fff8dc;box-shadow:0 5px 0 #c2d2a1}.hotplay-subject-card:active{transform:translateY(1px);box-shadow:0 2px 0 #c2d2a1}.hotplay-subject-card:focus-visible{outline:3px solid #b38531;outline-offset:3px}.subject-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;color:#fff9dc;font-size:22px;font-weight:900;background:#3c7d4c;box-shadow:inset 0 2px #ffffff66}.subject-math .subject-mark{background:#bc7a35}.subject-english .subject-mark{background:#6682b7}.hotplay-subject-card strong{font-size:16px;line-height:1.3}.hotplay-subject-card small{min-height:34px;color:#6d7959;font-size:11px;line-height:1.5}.subject-enter{margin-top:auto;color:#55753b;font-size:12px;font-weight:800}
/* Let the content reflow at its actual size: never shrink the whole plaza. */
.hotplay-plaza { padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); scroll-padding-block:16px; }
.hotplay-subject-card small { font-size:12px; }
.hotplay-guide summary { min-width:80px; }
@media(max-width:900px) and (orientation:landscape) {
  .hotplay-plaza { padding:12px var(--game-safe-right) max(16px,env(safe-area-inset-bottom)) var(--game-safe-left); }
  .hotplay-header { gap:16px; margin-bottom:8px; }
  .hotplay-header>div>span { font-size:12px; }
  .hotplay-header h1 { font-size:26px; }
  .hotplay-intro { font-size:14px; margin-bottom:12px; }
  .hotplay-feature { grid-template-columns:minmax(100px,.65fr) minmax(0,2fr); border-radius:20px; }
  .hotplay-scene { min-height:220px; }
  .hotplay-feature-copy { padding:14px 16px; }
  .hotplay-subject { font-size:12px; margin-bottom:5px; }
  .hotplay-feature h2 { font-size:24px; margin-bottom:6px; }
  .hotplay-feature-copy>p { font-size:14px; line-height:1.6; }
  .hotplay-subject-grid { margin-top:12px; gap:8px; }
  .hotplay-subject-card { min-height:118px; padding:10px 8px; gap:6px; }
  .subject-mark { width:32px; height:32px; font-size:19px; }
  .hotplay-subject-card strong { font-size:16px; }
  .hotplay-subject-card small,.subject-enter { font-size:12px; }
  .hotplay-subject-card small { min-height:0; }
  .hotplay-guide { margin-top:6px; font-size:14px; }
  .hotplay-levels { top:12px; left:8px; right:8px; padding:6px; font-size:12px; text-align:center; }
  .hotplay-house { width:80%; left:-22%; height:48%; bottom:5%; }
  .hotplay-plant { width:90%; left:3%; height:58%; bottom:4%; }
  .hotplay-zombie { width:52%; right:1%; height:36%; bottom:45%; }
  .hotplay-jiangshi { width:50%; right:3%; height:30%; bottom:9%; }
}
@media(max-width:650px) and (orientation:landscape) {
  .hotplay-feature { grid-template-columns:1fr; }
  .hotplay-scene { display:none; }
  .hotplay-feature-copy { padding:14px; display:flex; flex-direction:column; }
  .hotplay-feature h2 { order:1; }
  .hotplay-subject-grid { order:2; }
  .hotplay-feature-copy>p { order:3; margin-top:12px; }
  .hotplay-guide { order:4; }
  .hotplay-subject { display:none; }
  .hotplay-subject-card { min-height:112px; }
}
@media(orientation:portrait) {
  .hotplay-plaza { padding-top:max(16px,env(safe-area-inset-top)); }
  .hotplay-header { gap:14px; margin-bottom:12px; }
  .hotplay-header h1 { font-size:clamp(26px,6vw,38px); }
  .hotplay-intro { margin-bottom:16px; font-size:15px; line-height:1.6; }
  .hotplay-feature { grid-template-columns:1fr; border-radius:22px; }
  .hotplay-scene { min-height:0; height:clamp(132px,24vh,210px); }
  .hotplay-feature-copy { padding:18px; }
  .hotplay-feature h2 { font-size:28px; margin-bottom:8px; }
  .hotplay-subject { font-size:12px; margin-bottom:6px; }
  .hotplay-feature-copy>p { font-size:15px; line-height:1.65; }
  .hotplay-subject-grid { grid-template-columns:1fr; gap:10px; margin-top:16px; }
  .hotplay-subject-card { min-height:76px; display:grid; grid-template-columns:40px minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:10px; padding:12px; align-items:center; }
  .subject-mark { grid-row:1 / span 2; }
  .hotplay-subject-card strong { font-size:17px; align-self:end; }
  .hotplay-subject-card small { min-height:0; font-size:13px; align-self:start; }
  .subject-enter { grid-column:3; grid-row:1 / span 2; margin:0; font-size:12px; }
  .hotplay-guide { margin-top:10px; font-size:14px; }
}
@media(prefers-reduced-motion:reduce) { .hotplay-subject-card { transition:none; } }

/* Selection keeps its navigation in normal rows; artwork uses only the remaining space. */
.map-screen { display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:10px; padding:var(--game-safe-top) var(--game-safe-right) var(--game-safe-bottom) var(--game-safe-left); }
.map-screen .topbar { position:relative; inset:auto; min-width:0; min-height:44px; gap:10px; }
.map-screen .topbar .quiet-button { min-height:44px; min-width:44px; }
.map-screen .page-heading { background:none; color:#fff9df; padding:0; min-width:0; }
.map-screen .page-heading span { font-size:12px; }
.map-screen .page-heading h1 { font-size:clamp(18px,2.3vw,30px); letter-spacing:0; }
.map-screen .points-badge { padding:6px 12px; min-height:44px; font-size:12px; }
.map-screen .map-hero-copy { position:relative; inset:auto; width:auto; transform:none; font-size:14px; line-height:1.4; }
.map-screen .level-carousel-shell { position:relative; inset:auto; grid-template-columns:44px minmax(0,1fr) 44px; gap:8px; min-width:0; min-height:0; }
.map-screen .carousel-arrow { width:44px; height:44px; font-size:28px; }
.map-screen .level-carousel { container-type:normal; min-height:0; }
.map-screen .level-track { gap:var(--level-card-gap,16px); padding-inline:var(--level-card-padding,12px); }
.map-screen .level-card { width:var(--level-card-width,320px); height:var(--level-card-height,180px); aspect-ratio:auto; border-radius:20px; }
.map-screen .level-card-number { font-size:16px; }
.map-screen .level-card-status { font-size:12px; max-width:70%; white-space:normal; }
.map-screen .level-card-copy strong { font-size:clamp(18px,2.5vw,32px); }
.map-screen .level-card-copy small { font-size:13px; }
.map-screen .map-dock { position:relative; inset:auto; width:auto; min-height:0; padding:10px 14px; gap:12px; }
.map-screen .map-dock>div { min-width:0; }
.map-screen .map-dock h2 { font-size:18px; }
.map-screen .map-dock p,.map-screen .map-dock>div>span { font-size:13px; }
.map-screen .map-dock .primary-button { min-width:124px; flex:none; font-size:16px; min-height:44px; padding:10px 14px; }
@media(max-height:500px) and (orientation:landscape) {
  .map-screen { gap:6px; }
  .map-screen .topbar .page-heading span { display:none; }
  .map-screen .map-hero-copy { display:none; }
  .map-screen { grid-template-rows:auto minmax(0,1fr) auto; }
  .map-screen .points-badge { display:flex; align-items:center; gap:6px; padding:5px 10px; }
  .map-screen .map-dock { padding:6px 10px; }
  .map-screen .map-dock>div>span { display:none; }
  .map-screen .level-card-copy strong { font-size:18px; }
}
@media(max-width:500px) and (orientation:portrait) {
  .map-screen .topbar { flex-wrap:wrap; }
  .map-screen .page-heading { order:3; flex:1 0 100%; text-align:center; padding-top:4px; }
  .map-screen .page-heading span { display:none; }
  .map-screen .map-dock { display:grid; grid-template-columns:1fr; gap:8px; }
  .map-screen .map-dock .primary-button { width:100%; }
  .map-screen .map-hero-copy { font-size:13px; }
  .map-screen .level-carousel-shell { grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1fr) 44px; gap:10px; }
  .map-screen .level-carousel { grid-column:1 / -1; grid-row:1; }
  .map-screen #carouselPrev { grid-column:1; grid-row:2; justify-self:end; }
  .map-screen #carouselNext { grid-column:2; grid-row:2; justify-self:start; }
}