/* Four encounters have distinct silhouettes, palettes and attack tells. */
.foe{--foe-light:#d8d1ca;--foe-mid:#898b9c;--foe-deep:#4e5580}
.foe-stage-0{--foe-light:#f0e5cf;--foe-mid:#baa98c;--foe-deep:#6b6680}
.foe-stage-1{--foe-light:#e5ffff;--foe-mid:#79daf1;--foe-deep:#456cce}
.foe-stage-2{--foe-light:#fff2c4;--foe-mid:#f7ad52;--foe-deep:#995083}
.foe-stage-3{--foe-light:#f4eeff;--foe-mid:#b889ed;--foe-deep:#5e64d1}
.foe .foe-body{background:radial-gradient(circle at 32% 20%,var(--foe-light),var(--foe-mid) 54%,var(--foe-deep));border-color:var(--foe-light);box-shadow:inset -9px -10px 15px #28317066,0 0 26px var(--foe-mid)}
.foe-stage-0 .foe-body{border-radius:22% 24% 38% 40%;transform:rotate(-5deg)}
.foe-stage-0 .foe-body:before,.foe-stage-0 .foe-body:after{border-radius:4px;background:#c9b89c}
.foe-stage-1 .foe-body{border-radius:50% 50% 43% 43%;opacity:.87;box-shadow:0 0 34px #9eefff}
.foe-stage-1 .foe-body:before,.foe-stage-1 .foe-body:after{border-radius:50%;background:#d2f8ff}
.foe-stage-2 .foe-body{border-radius:22%;border-width:9px;outline:3px dashed #ffcd6b;outline-offset:3px}
.foe-stage-2 .foe-body:before,.foe-stage-2 .foe-body:after{border-radius:6px;background:#f6b35c}
.foe-stage-3 .foe-body{border-radius:50% 50% 23% 23%;border-color:#c9bbff;box-shadow:inset 0 0 25px #e3baff,0 0 29px #b69fff}
.foe-stage-3 .foe-body:before,.foe-stage-3 .foe-body:after{border-radius:3px 80% 6px 80%;background:#b29cff;transform:rotate(45deg)}
.foe-emblem{position:absolute;top:4px;left:50%;transform:translateX(-50%);font-size:21px;font-weight:1000;color:#fff9df;text-shadow:0 2px 4px #29418e;opacity:.9}
.foe-power{margin-top:6px;padding:2px 8px;border:1px solid #d2e6ff;border-radius:20px;background:#183871d9;color:#edfaff;font-size:11px;font-weight:900}
.foe-stage-0 .foe-name{background:#554a65e8}.foe-stage-1 .foe-name{background:#2863a4e8}.foe-stage-2 .foe-name{background:#8f4964e8}.foe-stage-3 .foe-name{background:#604cace8}
.foe.hurt .foe-body{animation:foeHit .55s both}.foe.defeated .foe-body{opacity:.25;transform:scale(.65)}
.foe-stage-1.hurt .foe-body{filter:brightness(1.8) hue-rotate(20deg)}.foe-stage-2.hurt .foe-body{filter:brightness(1.6) saturate(1.5)}.foe-stage-3.hurt .foe-body{filter:brightness(2)}

/* The equipped item now follows Toby through each scene. */
.hero-gear{position:absolute;z-index:9;display:block;pointer-events:none;line-height:1;filter:drop-shadow(0 3px 2px #21376d);transform:rotate(-12deg);animation:gearArrive .35s ease-out both}
.hero-gear span{display:block;font-size:clamp(35px,5.5vw,68px)}
.hero-gear.gear-cap{display:none}
.hero-gear.gear-crown span{filter:drop-shadow(0 0 8px #ffe45d)}
.hero-gear.gear-wizard span{filter:drop-shadow(0 0 7px #c19dff)}
.hero-gear.gear-helmet span{filter:drop-shadow(0 0 5px #d7edff)}
.hero-gear-quest{left:calc(2% + 95px);bottom:min(42vh,346px)}
.hero-gear-day{left:calc(3% + 80px);bottom:43%}
.hero-gear-victory,.hero-gear-clear{left:calc(1% + 92px);bottom:59%}
.hero-gear-map{top:auto;bottom:167px;margin-left:48px}
@keyframes gearArrive{from{opacity:0;transform:translateY(-15px) scale(.7) rotate(-12deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(-12deg)}}
.gear-preview{position:relative;width:105px;height:125px;overflow:hidden;border:3px solid #d5aa6e;border-radius:18px;background:linear-gradient(#cceaff,#fff2c5);box-shadow:inset 0 0 12px #72bfe6aa}
.gear-preview img{position:absolute;left:9px;bottom:-35px;width:86px;height:auto}
.preview-gear{position:absolute;top:1px;left:42px;font-size:34px;line-height:1;transform:rotate(-12deg);filter:drop-shadow(0 3px 2px #254077)}
.preview-gear.gear-cap{display:none}

.stage-clear-1{background-image:linear-gradient(#184b9633,#25447766),url('./assets/echo-forest.png')}
.stage-clear-2{background-image:linear-gradient(#184b9633,#25447766),url('./assets/mechanism-room.png')}
.stage-clear-3{background-image:linear-gradient(#184b9633,#25447766),url('./assets/crystal-chamber.png')}
.victory-burst{position:absolute;inset:15% 2% auto;z-index:1;text-align:center;letter-spacing:24px;font-size:42px;color:#fff6bc;text-shadow:0 0 14px #ffcb4f;animation:burst 1.2s ease-in-out infinite alternate}
@keyframes burst{from{opacity:.35;transform:scale(.85) rotate(-5deg)}to{opacity:1;transform:scale(1.07) rotate(4deg)}}
.stage-result .result-card{animation:clearPop .55s ease-out both}
.sound-test+.sound-test{margin-top:8px}
/* Keep controls away from the child character and leave the panorama touchable. */
.map-controls{display:none}
.map-mission{top:82px;right:18px;bottom:auto;left:auto;transform:none;width:245px;min-width:0;padding:10px 14px}
.map-mission span{margin:-25px auto 1px;font-size:13px}.map-mission strong{font-size:17px}.map-mission small{font-size:10px}

@media(max-width:820px){
 .foe-power{font-size:9px;margin-top:3px}.foe-emblem{font-size:17px;top:0}
 .quest-scene .foe{right:2%;top:19%;transform:scale(.92);transform-origin:top right}
 .hero-gear span{font-size:34px}
 .hero-gear-quest{left:calc(-2% + 49px);bottom:calc(clamp(215px,30dvh,270px)*.70)}
 .hero-gear-day{left:calc(0% + 71px);bottom:73%}
 .hero-gear-victory,.hero-gear-clear{left:calc(1% + 61px);bottom:65%}
 .hero-gear-map{bottom:173px;margin-left:36px}
 .gear-preview{width:95px;height:112px}.gear-preview img{width:79px}.preview-gear{left:36px;font-size:31px}
 .victory-burst{font-size:27px;letter-spacing:10px}
 .map-mission{top:73px;right:10px;bottom:auto;left:auto;transform:none;width:178px;padding:8px 9px;border-width:3px;border-radius:13px;box-shadow:inset 0 0 0 2px #fff4d3,0 5px 0 #69455aa8,0 9px 16px #11275d77}
 .map-mission span{margin:-18px auto 1px;padding:2px 8px;font-size:10px}.map-mission strong{font-size:13px}.map-mission small{font-size:9px}
}
@media(max-width:820px) and (max-height:700px){
 .quest-scene .foe{top:16%;transform:scale(.78)}
 .hero-gear-quest{bottom:140px}.hero-gear-victory,.hero-gear-clear{bottom:65%}
}
@media(prefers-reduced-motion:reduce){.hero-gear,.victory-burst{animation:none!important}}

/* Larger illustrated guardians and a visible answer-to-impact trajectory. */
.quest-scene .foe{right:3%;top:20%;width:clamp(180px,23vw,270px);transform:none;z-index:6;filter:drop-shadow(0 9px 15px #081e55c9)}
.foe .foe-name{padding:5px 13px;border:2px solid #d5e8ff;border-radius:11px;background:#162c66eb;color:#fff5d8;font-size:15px;letter-spacing:.03em;box-shadow:0 3px 10px #071f5a}
.foe .foe-health{width:75%;height:13px;margin:5px 0 0;border-width:2px;box-shadow:0 0 8px #16306b}
.foe-art{display:block;width:100%;height:clamp(170px,26vw,300px);object-fit:contain;object-position:center;filter:drop-shadow(0 5px 15px #4cbcff66);animation:guardianBreath 2.6s ease-in-out infinite}
.foe-stage-1 .foe-art {
  scale: 1.18;
  transform-origin: right 62%;
  object-position: right 66%;
  filter: drop-shadow(0 0 8px #baf1e9a6) drop-shadow(0 5px 8px #101a50aa);
}
.foe-stage-1.defeated .foe-art { scale: 1.09; }
@media (max-width: 820px) and (max-height: 720px) {
  .foe-stage-1 .foe-art { scale: 1.12; }
}
.foe-stage-2 .foe-art{filter:drop-shadow(0 0 14px #ffc965aa)}
.foe-stage-3 .foe-art{filter:drop-shadow(0 0 16px #c994ffaa)}
.foe .foe-power{margin-top:-7px;z-index:1;padding:3px 10px;font-size:11px}
.foe.hurt .foe-art{animation:guardianHit .75s .45s both}
.foe.defeated .foe-art{animation:guardianDefeat 1s .55s both}
.foe .damage{top:37%;right:0;font-size:28px;animation:damageRise .65s .53s both}
@keyframes guardianBreath{50%{transform:translateY(-5px) scale(1.018)}}
@keyframes guardianHit{0%{transform:translateX(0) scale(1);filter:brightness(1)}24%{transform:translateX(13px) rotate(6deg) scale(.95);filter:brightness(2.3)}55%{transform:translateX(-6px) rotate(-3deg);filter:brightness(1.35)}100%{transform:translateX(0) scale(1);filter:brightness(1)}}
@keyframes guardianDefeat{0%{opacity:1;filter:brightness(1)}35%{opacity:1;filter:brightness(3);transform:scale(1.1)}100%{opacity:.22;filter:brightness(1);transform:translateY(22px) scale(.75)}}
.magic-shot{--shot:#73e8ff;position:absolute;z-index:8;left:25%;top:62%;width:24px;height:24px;border:3px solid #fff;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,var(--shot) 45%,#2d80d9 72%);box-shadow:0 0 10px 5px var(--shot),0 0 28px 8px #5bb9ff;pointer-events:none;animation:shotFlight .62s cubic-bezier(.15,.55,.3,1) both}
.magic-shot::after{content:'';position:absolute;right:15px;top:7px;width:58px;height:5px;border-radius:99px;background:linear-gradient(90deg,transparent,#efffff);filter:blur(3px)}
.stage-2 .magic-shot{--shot:#ffc568}.stage-3 .magic-shot{--shot:#bb9cff}
.shot-impact{position:absolute;z-index:9;right:20%;top:34%;width:70px;height:70px;border:4px solid #fff9c9;border-radius:50%;background:radial-gradient(circle,#fff 0,#ffed9e 20%,#5edfffaa 43%,transparent 70%);box-shadow:0 0 30px 14px #fff2a7aa;pointer-events:none;animation:impactBurst .45s .53s both}
@keyframes shotFlight{0%{left:25%;top:62%;opacity:0;transform:scale(.45)}12%{opacity:1}85%{opacity:1}100%{left:74%;top:37%;opacity:0;transform:scale(1.4)}}
@keyframes impactBurst{0%{opacity:0;transform:scale(.25)}35%{opacity:1;transform:scale(1.35)}100%{opacity:0;transform:scale(2)}}

@media(max-width:820px){
 .quest-scene .foe{right:1%;top:5%;width:175px;transform:none}
 .foe .foe-name{font-size:12px;padding:3px 8px;border-width:1px}
 .foe .foe-health{width:100px;height:9px;margin:3px 0 0}
 .foe-art{height:170px}
 .foe .foe-power{display:none}
 .quest-scene>img.scene-robot{right:37%;bottom:-3%;width:76px}
 .quest-scene .robot-bubble{display:none}
 .magic-shot{width:17px;height:17px;top:70%}
 .shot-impact{right:18%;top:35%;width:45px;height:45px}
 @keyframes shotFlight{0%{left:25%;top:70%;opacity:0;transform:scale(.45)}12%{opacity:1}85%{opacity:1}100%{left:71%;top:38%;opacity:0;transform:scale(1.4)}}
 /* Third and fourth tasks keep the controls in one phone screen. */
 .quest-layout.stage-2,.quest-layout.stage-3{overflow:hidden}
 .quest-layout.stage-3 .paper::after{content:'✦';color:#428bd5}
 .stage-2 .quest-head,.stage-3 .quest-head{padding-bottom:4px}
 .stage-2 .word-card,.stage-3 .word-card{min-height:74px;padding:5px 8px;gap:2px}
 .stage-2 .word-card .prompt-cn,.stage-3 .word-card .prompt-cn{font-size:19px}
 .stage-2 .word-card small{font-size:10px}
 .stage-2 .input-label,.stage-3 .input-label{margin:5px 0 3px;font-size:12px}
 .stage-2 .paper textarea{height:39px;min-height:39px;max-height:39px;padding:5px 8px;font-size:14px;resize:none}
 .stage-2 .tile-bar{margin-top:4px;font-size:11px}
 .stage-2 .word-tiles{margin:4px 0;padding:4px;gap:3px}
 .stage-2 .word-tile{min-width:31px;padding:4px 6px;font-size:11px;border-width:1px;border-bottom-width:2px}
 .stage-2 .input-actions,.stage-3 .input-actions{margin-top:5px;gap:4px;flex-wrap:nowrap}
 .stage-2 .input-actions .light-btn,.stage-2 .input-actions .gold-btn,.stage-3 .input-actions .light-btn,.stage-3 .input-actions .gold-btn{padding:5px 6px;font-size:11px;white-space:nowrap}
 .stage-2 .mic-status,.stage-3 .mic-status{margin:2px 0 0;min-height:14px;font-size:10px}
 .stage-3 .spell-runes{margin:5px 0;gap:3px}.stage-3 .spell-runes span{height:29px;min-width:23px;font-size:15px}
 .stage-3 .paper input[type=text]{padding:5px 7px;font-size:14px}
 .stage-3 .hint{margin-top:3px;font-size:9px;line-height:1.2}
 .quest-layout.answered.stage-2 .input-label,.quest-layout.answered.stage-2 textarea,.quest-layout.answered.stage-2 .tile-bar,.quest-layout.answered.stage-2 .word-tiles,.quest-layout.answered.stage-2 .input-actions,.quest-layout.answered.stage-2 .mic-status{display:none}
 .quest-layout.answered.stage-3 .input-label,.quest-layout.answered.stage-3 input,.quest-layout.answered.stage-3 .input-actions,.quest-layout.answered.stage-3 .mic-status,.quest-layout.answered.stage-3 .hint{display:none}
 .quest-layout.answered.stage-2 .feedback,.quest-layout.answered.stage-3 .feedback{margin-top:8px;padding:8px;font-size:12px}
 .quest-layout.answered.stage-2 .feedback p,.quest-layout.answered.stage-3 .feedback p{margin:3px 0 5px}
 .quest-layout.answered.stage-2 .feedback .gold-btn,.quest-layout.answered.stage-3 .feedback .gold-btn{padding:5px 11px;font-size:12px}
}
@media(max-width:820px) and (max-height:700px){
 .stage-2 .word-card,.stage-3 .word-card{min-height:62px}
 .stage-2 .paper textarea{height:34px;min-height:34px;max-height:34px}
}
@media(prefers-reduced-motion:reduce){.foe-art,.foe.hurt .foe-art,.foe.defeated .foe-art{animation:none!important}.magic-shot,.shot-impact{display:none!important}}

/* The installed iPhone app extends behind the status bar. Keep controls in the safe area. */
:root {
  --toby-safe-top: env(safe-area-inset-top, 0px);
  --toby-safe-right: env(safe-area-inset-right, 0px);
  --toby-safe-bottom: env(safe-area-inset-bottom, 0px);
  --toby-safe-left: env(safe-area-inset-left, 0px);
  --toby-header-height: 76px;
  --toby-view-height: calc(100dvh - var(--toby-safe-top));
}

.topbar {
  height: calc(var(--toby-header-height) + var(--toby-safe-top));
  padding-top: calc(8px + var(--toby-safe-top));
  padding-left: max(clamp(14px, 2vw, 30px), var(--toby-safe-left));
  padding-right: max(clamp(14px, 2vw, 30px), var(--toby-safe-right));
}

.topbar .hud, .topbar #settings { flex-shrink: 0; }
.topbar .identity-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings {
  top: calc(var(--toby-header-height) + var(--toby-safe-top) + 4px);
  right: calc(15px + var(--toby-safe-right));
  width: min(300px, calc(100vw - 30px - var(--toby-safe-left) - var(--toby-safe-right)));
  max-height: calc(var(--toby-view-height) - var(--toby-header-height) - var(--toby-safe-bottom) - 8px);
  overflow-y: auto;
}

.notice { bottom: calc(25px + var(--toby-safe-bottom)); }

@media (max-width: 820px) {
  :root { --toby-header-height: 65px; }

  .topbar {
    padding: calc(6px + var(--toby-safe-top)) max(8px, var(--toby-safe-right))
      6px max(8px, var(--toby-safe-left));
  }

  .topbar #settings, .topbar #shop { min-height: 44px; }
  .topbar #settings { min-width: 44px; }
}


.quest-head { align-items: center; }
.progress .replay-step { text-align: left; min-height: 44px; }
.progress .replay-step > b { flex: none; }
.progress .replay-step > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.progress .replay-step small { font-size: .78em; color: #235e34; }
.progress .replay-step:hover { border-color: #419a57; background: #d2f0cc; }
.quest-head .stage-track { flex: none; margin: 0; gap: 8px; }
.quest-head .stage-track b { width: 30px; height: 30px; }
.quest-layout .scene-chapter { top: 10px; }
.stone-gate-art, .stage-reveal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.stone-gate-art circle { mix-blend-mode: screen; }
.door-leaf-left { transform: translateX(-295px); animation: door-open-left 1.05s .35s both; }
.door-leaf-right { transform: translateX(295px); animation: door-open-right 1.05s .35s both; }
@keyframes door-open-left { from { transform: translateX(0); } to { transform: translateX(-295px); } }
@keyframes door-open-right { from { transform: translateX(0); } to { transform: translateX(295px); } }

.encounter-cleared .foe.defeated .foe-art {
  transform-origin: center 77%;
  transform: translate(-15%, 8%) rotate(-72deg) scale(.76);
  opacity: .86;
  animation: guardian-fall .72s ease-in both;
}

@keyframes guardian-fall {
  0% { transform: none; opacity: 1; }
  24% { transform: translateX(4%) rotate(8deg); }
  82% { transform: translate(-15%, 10%) rotate(-77deg) scale(.76); }
  100% { transform: translate(-15%, 8%) rotate(-72deg) scale(.76); opacity: .86; }
}

.stage-reveal-1 i {
  position: absolute;
  top: 9%;
  bottom: 3%;
  left: -10%;
  width: 74%;
  background:
    radial-gradient(ellipse at 69% 45%, #f7fffc 2%, #d4f0f3ed 30%, transparent 70%),
    radial-gradient(ellipse at 46% 66%, #e6f4ffef 4%, #b7cce7d6 31%, transparent 72%),
    radial-gradient(ellipse at 68% 77%, #b6e1f7e6 6%, #abceea99 37%, transparent 73%);
  filter: blur(4px);
  animation: mist-away-left 1.65s .4s cubic-bezier(.3,.05,.32,1) both;
}

.stage-reveal-1 i:nth-child(2) {
  left: auto;
  right: -10%;
  animation-name: mist-away-right;
}

.stage-reveal-1 i:nth-child(3) {
  inset: 57% -5% -15%;
  width: auto;
  background: radial-gradient(ellipse at 50% 43%, #f1fbfff2, #bbe0f8b3 41%, transparent 71%);
  filter: blur(6px);
  animation: mist-away-low 1.6s .54s ease-out both;
}

.stage-reveal-1::after {
  content: '';
  position: absolute;
  inset: 17% 13% 7%;
  z-index: -1;
  background: radial-gradient(ellipse at 52% 55%, #e9fff1dc, #83ffca68 23%, transparent 61%);
  mix-blend-mode: screen;
  animation: forest-light 1.2s .85s ease-out both;
}

@keyframes clear-path { from { opacity: 0; } to { opacity: 1; } }
@keyframes mist-away-left {
  0% { opacity: 1; transform: translateX(0); }
  52% { opacity: .9; transform: translate(-49%, -5%) scale(1.07); }
  100% { opacity: 0; transform: translate(-112%, -13%) scale(1.13); }
}
@keyframes mist-away-right {
  0% { opacity: 1; transform: translateX(0) scaleX(-1); }
  52% { opacity: .9; transform: translate(49%, -3%) scale(-1.07, 1.07); }
  100% { opacity: 0; transform: translate(112%, -10%) scale(-1.13, 1.13); }
}
@keyframes mist-away-low {
  0% { opacity: .86; transform: translateY(0); }
  55% { opacity: .63; transform: translate(8%, 14%); }
  100% { opacity: 0; transform: translate(25%, 55%); }
}
@keyframes forest-light {
  0% { opacity: 0; transform: scale(.6); }
  43% { opacity: 1; transform: scale(1.03); }
  100% { opacity: .38; transform: scale(1.1); }
}

.stage-reveal-2 i, .stage-reveal-3 i {
  position: absolute;
  top: 45%;
  left: 50%;
  width: min(42%, 45vh);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
}

.stage-reveal-2 i {
  border: 5px dashed #ffd972;
  box-shadow: 0 0 28px #ffa13c, inset 0 0 22px #ffc95a;
  animation: mechanism-turn 1.3s .34s both;
}

.stage-reveal-2 i:nth-child(2) { width: min(32%, 35vh); border-style: dotted; animation-direction: reverse; }
.stage-reveal-2 i:nth-child(3) { width: min(23%, 25vh); border-style: solid; }
@keyframes mechanism-turn { from { opacity: .1; transform: rotate(-85deg) scale(.82); } to { opacity: .85; transform: rotate(0) scale(1); } }

.stage-reveal-3 {
  background: radial-gradient(ellipse at 50% 44%, #fff5fdc2, #9976ff72 25%, transparent 55%);
  animation: clear-path .8s .3s both;
}

.stage-reveal-3 i {
  border: 3px solid #b8d9ff;
  box-shadow: 0 0 22px #879cff;
  animation: crystal-wave 1.25s .35s both;
}

.stage-reveal-3 i:nth-child(2) { animation-delay: .48s; }
.stage-reveal-3 i:nth-child(3) { animation-delay: .61s; }
@keyframes crystal-wave { from { opacity: .95; transform: scale(.4); } to { opacity: 0; transform: scale(1.9); } }

.quest-layout .clear-paper { display: flex; flex-direction: column; }
.clear-summary {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.clear-summary h1, .clear-summary p { margin: 0; }
.clear-summary #next-stage { min-height: 44px; }

@media (max-width: 820px) {
  html:has(.quest-layout) { background-color: #182b4b; }
  html:has(.quest-layout), body:has(.quest-layout) { overflow: hidden; }
  .quest-layout { overscroll-behavior-y: none; }
  .quest-layout .quest-scene {
    flex: 1 0 100px;
    height: auto;
    width: 100%;
  }

  .quest-layout .paper {
    flex: 0 0 auto;
    align-self: center;
    width: min(calc(100% - 8px), 510px);
    aspect-ratio: 1.06;
    height: auto;
    margin: -10px auto 3px;
    padding: 24px clamp(16px, 5vw, 30px) 20px;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .quest-layout .paper > * { flex-shrink: 0; }
  .quest-layout .paper::after { display: none; }
  .quest-layout .paper .ribbon { margin: -15px auto 7px; padding: 5px 13px; font-size: 14px; }
  .quest-layout .quest-head { padding-bottom: 4px; gap: 4px; font-size: 10px; }
  .quest-layout .quest-head .stage-track { margin: 0; gap: 5px; }
  .quest-layout .quest-head .stage-track b { width: 20px; height: 20px; font-size: 10px; border-width: 2px; }

  .quest-layout .word-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-items: center;
    min-height: 0;
    padding: 7px 8px;
    gap: 3px 8px;
    margin-top: 7px;
  }
  .quest-layout .word-card .round-audio { grid-column: 2; grid-row: 1 / 3; white-space: nowrap; }
  .quest-layout .word-card .big-word { font-size: clamp(23px, 7.7vw, 35px); line-height: 1; }
  .quest-layout .word-card .prompt-cn { font-size: clamp(15px, 4.6vw, 21px); }
  .quest-layout .word-card .large-icon { font-size: 26px; line-height: 1; }
  .quest-layout .word-card small { grid-column: 1 / -1; }
  .quest-layout .instruction { margin: 7px 0 5px; font-size: 12px; }
  .quest-layout .choices { gap: 6px; }
  .quest-layout .choice { min-height: 43px; }

  .quest-layout.answered .feedback {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 7px;
    padding: 6px 7px;
    margin-top: 8px;
    font-size: 12px;
  }

  .quest-layout.answered .feedback p { margin: 2px 0 0; }
  .quest-layout.answered .feedback #next {
    grid-column: 2;
    grid-row: 1 / 3;
    min-height: 44px;
    padding: 5px 8px;
    font-size: 12px;
    white-space: nowrap;
  }

  .quest-layout .quest-scene .foe {
    top: 8%;
    right: 2%;
    width: clamp(95px, 40vw, 180px);
    height: 86%;
  }
  .quest-layout .quest-scene .foe-art { flex: 1; min-height: 0; height: 0; }
  .quest-layout .quest-scene > img.scene-toby { height: 75%; }
  .quest-layout .quest-scene > img.scene-robot { width: clamp(48px, 16vw, 76px); right: 37%; }
  .quest-layout .hero-gear-quest { bottom: 66%; }

  .clear-summary h1 { font-size: clamp(22px, 6vw, 32px); }
  .clear-summary p { font-size: 14px; }
}

@media (max-width: 820px) and (max-height: 720px) {
  .quest-layout .paper { aspect-ratio: .92; padding-top: 21px; padding-bottom: 15px; }
  .quest-layout .scene-chapter:not(.stage-unlocked) { display: none; }
  .quest-layout .choice { min-height: 41px; }
}

@media (max-width: 350px) {
  .quest-layout .paper { aspect-ratio: .86; }
}

@media (prefers-reduced-motion: reduce) {
  .door-leaf, .stage-reveal, .stage-reveal i,
  .encounter-cleared .foe.defeated .foe-art { animation: none !important; }
  .stage-reveal-1 i, .stage-reveal-3 i { opacity: 0; }
  .stage-reveal-1::after { animation: none; opacity: .38; }
}

.map-effects {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.map-hero {
  position: absolute;
  z-index: 2;
  transform: translate(-48%, -98%);
  pointer-events: none;
}

.map-hero::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 13%;
  bottom: -2%;
  height: 10%;
  background: radial-gradient(ellipse, #392a25a8 0%, #392a2555 37%, transparent 72%);
}

.map-world .map-hero .map-toby {
  position: relative;
  left: auto;
  bottom: auto;
  display: block;
  width: auto;
  height: 100%;
  filter: none;
}

.map-hero .hero-gear-map {
  left: 41%;
  top: 0;
  bottom: auto;
  margin: 0;
}

.map-world .map-day-0 { top: 55%; }
.map-world .map-day-1 { top: 42%; }
.map-world .map-day-2,
.map-world .map-day-3 { top: 43%; }
.map-world .map-day-4 { top: 41%; }
.map-world .map-day-5 { top: 27%; }

.map-water-flow {
  opacity: .62;
  animation: waterfall-flow 1.2s linear infinite;
}
@keyframes waterfall-flow { to { transform: translateY(72px); } }

.map-cloud-drift {
  animation: map-cloud-drift var(--effect-period) var(--effect-phase) ease-in-out infinite alternate;
}
@keyframes map-cloud-drift {
  from { transform: translate(calc(var(--cloud-drift) * -.58), 1px); }
  to { transform: translate(var(--cloud-drift), -2px); }
}

.map-flag {
  transform-box: view-box;
  transform-origin: var(--flag-anchor);
  animation: map-pennant-flutter var(--effect-period) var(--effect-phase) ease-in-out infinite;
}
.map-flag-banner { animation-name: map-banner-flutter; }
@keyframes map-pennant-flutter {
  0%, 100% { transform: skewY(-3deg) scaleX(.98); }
  25% { transform: skewY(4deg) scaleX(1.01); }
  52% { transform: skewY(-1deg) scaleX(.97); }
  74% { transform: skewY(2deg); }
}
@keyframes map-banner-flutter {
  0%, 100% { transform: skewX(-2.4deg); }
  35% { transform: skewX(2.8deg) scaleY(.99); }
  66% { transform: skewX(-.6deg); }
}

.map-ship {
  transform-origin: 1350px 374px;
  animation: harbor-boat 5.8s ease-in-out infinite;
}
@keyframes harbor-boat {
  0%, 100% { transform: translate(-.8px, .7px) rotate(-.7deg); }
  46% { transform: translate(1.6px, -1.5px) rotate(.85deg); }
  70% { transform: translate(.9px, -.4px) rotate(.4deg); }
}

.map-harbor-ripples path, .map-fountain path {
  fill: none;
  stroke: url(#map-ripple-shine);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.map-harbor-ripples path { animation: harbor-ripples 3.8s ease-in-out infinite; }
.map-harbor-ripples path:nth-child(2) { animation-delay: -1.9s; }
@keyframes harbor-ripples {
  0%, 100% { opacity: .16; transform: translateX(-2px); }
  50% { opacity: .56; transform: translateX(4px); }
}
.map-fountain path {
  animation: fountain-breath 1.85s ease-in-out infinite;
}
.map-fountain path:nth-child(2) { animation-delay: -.86s; }
@keyframes fountain-breath {
  0%, 100% { opacity: .32; }
  50% { opacity: .75; transform: translateY(-1.5px); }
}
.map-crystal-lights .map-light {
  animation: crystal-bloom var(--effect-period) var(--effect-phase) ease-in-out infinite;
}
.map-light-glint { fill: none; stroke: #fffde6; stroke-width: 1.1; stroke-linecap: round; opacity: .55; }
@keyframes crystal-bloom {
  0%, 100% { opacity: .14; }
  32% { opacity: .24; }
  49% { opacity: .86; }
  66% { opacity: .28; }
}

.clear-walker {
  --walk-delay: 1.42s;
  --walk-first: translate(16%, -7%) scale(.75);
  --walk-second: translate(31%, -23%) scale(.4);
  --walk-end: translate(36%, -28%) scale(.22);
  --walk-opacity: 0;
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  transform-origin: 14% 98%;
  animation: clear-walk 1.85s var(--walk-delay) ease-in-out both;
}

.stage-1 .clear-walker {
  --walk-delay: 2.15s;
  --walk-first: translate(20%, -9%) scale(.76);
  --walk-second: translate(34%, -27%) scale(.48);
  --walk-end: translate(36%, -42%) scale(.32);
  --walk-opacity: 1;
}
.stage-2 .clear-walker {
  --walk-delay: 1.68s;
  --walk-first: translate(17%, -6%) scale(.8);
  --walk-second: translate(29%, -18%) scale(.57);
  --walk-end: translate(34%, -32%) scale(.42);
  --walk-opacity: 1;
}
.stage-3 .clear-walker {
  --walk-delay: 1.88s;
  --walk-first: translate(15%, -9%) scale(.79);
  --walk-second: translate(26%, -23%) scale(.55);
  --walk-end: translate(32%, -37%) scale(.4);
  --walk-opacity: 1;
}

.clear-walker .scene-toby {
  position: absolute;
  left: 2%;
  bottom: 0;
  height: min(49vh, 400px);
  max-width: 38%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 10px 7px #173478a8);
  animation: walking-bob .29s var(--walk-delay) ease-in-out 6;
}
@keyframes walking-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px) rotate(-1deg); }
}
@keyframes clear-walk {
  0% { transform: none; opacity: 1; }
  40% { transform: var(--walk-first); opacity: 1; }
  77% { transform: var(--walk-second); opacity: 1; }
  100% { transform: var(--walk-end); opacity: var(--walk-opacity); }
}
@media (max-width: 820px) {
  .clear-walker .scene-toby,
  .quest-layout .quest-scene > img.scene-toby {
    left: 1.5%;
    bottom: 1%;
    height: 77%;
    max-width: 34%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .map-effects { display: none; }
  .clear-walker, .clear-walker .scene-toby { animation: none; }
}

/* The map keeps a small light at each completed landmark. */
.map-landmarks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.map-node.done { box-shadow: 0 0 14px #ffe4a479, 0 5px 0 #223a66; }
.map-hero .map-robot {
  position: absolute;
  bottom: 29%;
  left: 80%;
  width: clamp(38px, 11dvh, 82px);
  height: auto;
}
.robot-starfire, .quest-scene > img.scene-robot.robot-starfire {
  filter: hue-rotate(160deg) saturate(1.5) drop-shadow(0 0 6px #ffc46a);
}

.scene-progress {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.scene-progress-1 {
  opacity: calc(.64 - var(--scene-charge) * .58);
  background:
    radial-gradient(ellipse at 42% 81%, #d5edf7 4%, #bcd5ee 19%, transparent 45%),
    radial-gradient(ellipse at 69% 67%, #d7f2fa 5%, transparent 38%);
}
.scene-progress-2 i {
  position: absolute;
  top: 52%;
  left: 50%;
  width: min(22%, 14rem);
  aspect-ratio: 1;
  border: 3px dashed #fff0a6;
  border-radius: 50%;
  box-shadow: 0 0 16px #ffca66, inset 0 0 9px #ffdc8b;
  opacity: calc(var(--scene-charge) * .9);
  transform: translate(-50%, -50%) rotate(calc(var(--scene-charge) * 210deg));
}
.scene-hit .scene-progress-2 i { animation: gear-charge .46s ease-out both; }
@keyframes gear-charge {
  from { transform: translate(-50%, -50%) rotate(calc(var(--scene-charge) * 210deg - 40deg)); }
}
.scene-progress-3 {
  opacity: var(--scene-charge);
  background: radial-gradient(ellipse at 50% 55%, #efffffdf 2%, #79edff95 14%, #7359f044 27%, transparent 47%);
  mix-blend-mode: screen;
}
.scene-hit .scene-progress-3 { animation: crystal-charge .5s ease-out; }
@keyframes crystal-charge { 45% { opacity: 1; } }

.quest-layout:not(.encounter-cleared) .foe.defeated .foe-art {
  transform-origin: center 77%;
  transform: translate(-15%, 8%) rotate(-72deg) scale(.76);
  opacity: .86;
}
.port-reading { gap: .35rem; }
.port-reading strong { font-size: clamp(16px, 2.5vw, 25px); line-height: 1.3; }
.record-words { display: flex; gap: .45rem; flex-wrap: wrap; }
.record-word {
  padding: .25rem .65rem;
  border: 1px solid #cca874;
  border-radius: .55rem;
  background: #fff6df;
  color: #4b321d;
}
.result-actions { flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .scene-hit .scene-progress-2 i,
  .scene-hit .scene-progress-3 { animation: none; }
}