/* Let the map and encounter backgrounds reach the bottom safe area. */
#app.quest-screen {
  position: fixed;
  inset: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.map-screen {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  height: max(100dvh, min(var(--toby-installed-height, 100dvh), calc(100dvh + var(--toby-safe-top))));
  min-height: 0;
  overflow: hidden;
}
html:has(.map-screen), body:has(.map-screen) { overflow: hidden; }
.map-screen > .topbar,
.quest-screen > .topbar { flex: none; }
.map-screen > .map-layout { flex: 1; display: flex; height: auto; min-height: 0; }
.map-screen .map-scroll { flex: 1; height: auto; align-items: stretch; }
.map-screen .map-world { width: auto; min-width: 100%; aspect-ratio: 3 / 1; }
.topbar {
  background: linear-gradient(#234780, #122e60);
  border-bottom-color: #aed5f6;
  box-shadow: none;
}
.topbar .identity-copy strong { color: #fff2bd; text-shadow: 0 1px #071d43; }
.topbar .hud-chip, .topbar .icon-btn {
  background: linear-gradient(#285c97, #193e75);
  border-color: #a6cbee;
  box-shadow: 0 2px #0b254c;
  color: #fff;
  text-shadow: none;
}
.topbar .portrait em { filter: none; }
.topbar .xp-badge { background: #142f5f; }
.quest-screen > .quest-layout {
  flex: 1;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0 auto;
  overflow: auto;
}

/* Keep the rollers the same height as the scroll grows with its contents. */
.quest-layout .paper,
.study-lesson .study-card {
  position: relative;
  isolation: isolate;
  background: none;
}
.quest-layout .paper::before,
.study-lesson .study-card::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  height: auto;
  border: solid transparent;
  border-width: 30px 32px;
  border-image: url('./assets/parchment-scroll.png') 130 100 fill stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
  pointer-events: none;
}
.quest-layout .paper {
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  overflow: visible;
}
@media (max-width: 820px) {
  .quest-screen > .quest-layout {
    overflow-x: hidden;
    overflow-y: auto;
  }
  .quest-layout .paper { padding-bottom: 34px; }
}

/* Map effects use the panorama's coordinates. */
.study-layout {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px max(12px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: linear-gradient(#102957c9, #143f81d4), url('./assets/stone-gate.png') center / cover;
}
.study-card {
  width: min(100%, 620px);
  margin: 0 auto;
  padding: clamp(16px, 4vw, 32px);
  border: 3px solid #d2a268;
  border-radius: 22px;
  background: linear-gradient(#fffdf0, #fff1ce);
  color: #503718;
  text-align: center;
  box-shadow: 0 8px 28px #101c405c;
}
.study-card h1 { margin: 14px 0 10px; font-size: clamp(21px, 5vw, 28px); }
.study-card p { margin: 10px 0; }
.study-top { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.study-steps { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 5px; padding: 0; margin: 14px 0; list-style: none; }
.study-steps li { padding: 8px 0; border-radius: 10px; background: #f1e4ca; }
.study-steps li.done { background: #e2efdf; color: #244c39; }
.study-steps li[aria-current] { background: #235689; color: white; font-weight: 700; }
.study-word { font-weight: 800; color: #173f77; font-size: clamp(30px, 9vw, 54px); overflow-wrap: anywhere; }
.study-word span:nth-of-type(even) { color: #865424; }
.study-word i { font-style: normal; color: #8a735a; margin: 0 .06em; }
.study-meaning { font-size: 21px; font-weight: 700; }
.study-example { margin: 14px 0; padding: 12px; border-radius: 12px; background: #fffdf5; line-height: 1.6; }
.study-actions,.study-tiles { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.study-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.study-meaning-options { grid-template-columns: 1fr; margin: 16px auto; max-width: 420px; }
.study-meaning-options button { text-align: left; font-size: 17px; }
.study-meaning-options .meaning-correct:disabled { opacity: 1; filter: none; background: #e0f3d9; color: #254b27; border-color: #7db278; }
.study-card button { min-height: 44px; }
.study-tiles button { min-width: 42px; padding: 6px 10px; font-size: 19px; }
.study-tiles small { display: block; font-size: 12px; line-height: 1.35; }
.study-sounds > span { min-width: 40px; padding: 5px 8px; border-radius: 8px; background: #e6edf3; color: #173f77; }
.study-sound-note { font-size: 14px; }
.study-ipa { font-size: 18px; color: #385570; }
.read-practice { margin: 16px 0; padding: 12px; border-radius: 14px; background: #fffdf5; }
.read-practice #read-status:empty { display: none; }
.read-practice #read-score { padding: 8px; color: #173f77; }
.read-practice #read-score-value { font-size: 32px; }
.read-practice #read-score small { display: block; margin-top: 4px; }
.study-meaning small { font-size: 14px; font-weight: 600; }
.study-sound-switch button[aria-pressed="true"] { background: #235689; color: #fff; }
.study-example .study-actions { margin-bottom: 0; }
.study-answer { min-height: 40px; padding: 5px; border-bottom: 2px solid #c9a572; font-size: 25px; color: #173f77; overflow-wrap: anywhere; }
.study-blend-answer { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }
.blend-slot { min-width: 1.05em; padding: 2px 5px; border-radius: 5px; background: #e6edf3; }
.blend-slot.empty { color: #806c54; background: #f2e5ce; }
.study-card input { display: block; margin: 8px auto; padding: 10px; width: min(100%, 310px); border: 1px solid #987951; border-radius: 10px; font-size: 18px; text-align: center; }
.english-keyboard {
  display: grid;
  gap: 5px;
  max-width: 520px;
  margin: 10px auto;
  padding: 7px;
  border-radius: 12px;
  background: #deebf7;
}
.english-keys { display: flex; justify-content: center; gap: 4px; }
.english-keys button {
  flex: 0 1 calc((100% - 36px) / 10);
  min-width: 0;
  min-height: 42px;
  padding: 0;
  border: 1px solid #88a9c8;
  border-radius: 6px;
  background: #fff;
  color: #173f77;
  font: 700 16px system-ui, sans-serif;
  touch-action: manipulation;
}
.english-keys button:active { background: #c6dcf1; }
.english-actions button { flex-basis: 15%; }
.english-actions button[data-english-key=" "] { flex-basis: 40%; }
.english-actions button[data-english-key="Backspace"] { flex-basis: 24%; }
.english-keyboard[hidden] { display: none; }
.typing-switch { text-align: right; }
.quest-typing.answered .typing-switch { display: none; }

@media (max-width: 820px) {
  .study-writing { display: flex; padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .study-writing .study-steps { margin: clamp(3px, 1dvh, 8px) 0; }
  .study-writing .study-steps li { padding-block: 4px; }
  .study-writing .study-card h1 { margin: 4px 0; }
  .study-writing .study-card p, .study-writing .study-actions { margin: 4px 0; }
  .study-writing .study-feedback:empty { display: none; }
  .study-writing #study-input { margin: 4px auto; padding-block: 6px; }
  .study-writing .english-keyboard, .quest-typing .english-keyboard { width: 100%; margin: 5px auto; padding: 4px; gap: 4px; }
  .study-writing .english-keys button, .quest-typing .english-keys button { min-height: clamp(29px, 5dvh, 42px); }
  .quest-typing .paper { width: min(calc(100% - 8px), 510px); padding: 12px 18px 34px; margin: -4px auto 0; }
  .quest-typing .paper::before { border-width: 18px 23px 30px; }
  .quest-typing .paper .ribbon { margin: -8px auto 4px; }
  .quest-typing .quest-scene { flex-basis: clamp(64px, calc(13dvh - 26px), 120px); }
  .quest-typing .word-card { margin-top: 3px; padding: 4px 7px; }
  .quest-typing .word-card small, .quest-typing .hint, .quest-typing .mic-status:empty { display: none; }
  .quest-typing .spell-runes { margin-block: 3px; }
  .quest-typing .input-label { margin-block: 3px; }
  .quest-typing .typing-switch .light-btn { font-size: 12px; padding: 3px 8px; }
  .quest-typing .input-actions { margin-block: 3px; }
}
.study-feedback { min-height: 1.5em; color: #69420e; }
.study-entry p { margin: 8px 0 12px; }
.test-entry { display: block; margin: 12px 0; text-align: center; text-decoration: none; }
.test-card select { display: block; margin: 8px auto; max-width: 100%; min-height: 44px; font: inherit; font-size: 16px; }
.test-card > a { display: inline-block; margin: 12px 0 0; text-decoration: none; }
.test-mode #test-menu { padding-inline: 7px; }

/* Learning uses the same scene artwork, parchment and gold controls as battle. */
.study-lesson {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px max(4px, env(safe-area-inset-right)) max(8px, var(--toby-safe-bottom)) max(4px, env(safe-area-inset-left));
  background: linear-gradient(#10295799,#102957bc),url('./assets/stone-gate.png') center/cover;
}
.study-lesson::before {
  content: '';
  flex: 1 1 0;
  max-height: min(4dvh, 36px);
}
.study-header {
  flex: none;
  width: min(calc(100% - 24px), 560px);
  color: #fff5dc;
  text-align: center;
}
.study-lesson .study-card {
  display: flex;
  flex-direction: column;
  flex: none;
  margin-top: 8px;
  width: min(100%, 610px);
  padding: 34px clamp(19px, 6vw, 40px) 40px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.study-lesson .study-steps {
  margin: 6px 0 0;
}
.study-lesson .study-steps li {
  padding: 4px 0;
  border: 1px solid #c19b69;
  border-radius: 7px;
  background: #f6e1b8;
  color: #644728;
}
.study-lesson .study-steps li.done { background: #ffe4a0; }
.study-lesson .study-steps li[aria-current] {
  border-color: #eec779;
  background: linear-gradient(#3270ac,#173d75);
  color: #fff6de;
}
.study-lesson .study-card h1 { margin: 5px 0; }
.study-lesson .study-actions,.study-lesson .study-tiles { margin: 7px 0; }
.study-lesson .study-example,.study-lesson .read-practice {
  margin: 8px 0;
  padding: 8px;
  border: 1px solid #d3b58a;
  background: #fff9e6;
}
.study-lesson .study-card p { margin-block: 5px; }
.study-lesson .study-word { line-height: 1.12; }
.study-lesson .study-headword { align-self: center; max-width: 100%; border: 0; background: transparent; padding-inline: 4px; }
.study-lesson .study-card button { min-height: 38px; padding-block: 5px; }
.study-lesson .study-sounds > span { min-width: 36px; padding: 4px 6px; background: transparent; }
.study-lesson .study-sounds small { display: block; }
.study-lesson .study-feedback:empty { display: none; }
.study-lesson .english-keyboard { width: 100%; }
.study-lesson .study-top .light-btn { min-height: 36px; padding: 5px 9px; }
.study-footer { display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.study-footer button { padding-inline: 9px; font-size: 13px; }
.study-footer [aria-pressed="true"] { background: #f8df99; color: #593715; }
.study-footer [hidden] { display: none; }
.study-lesson .study-feedback { margin-bottom: 3px; }
.study-lesson .sound-vowel { color: #8c412d; }
.study-lesson .sound-silent { color: #5e574e; }
.study-lesson .sound-consonant { color: #163e75; }
.study-lesson [data-study-sound],.study-lesson [data-study-syllable] { border-radius: 6px; }
.study-lesson .study-speaking { background: #ffdb79; color: #513009; box-shadow: 0 0 0 2px #ad6d20; }
.study-lesson .study-sounds > .study-speaking { background: #ffdb79; }
.study-lesson .study-word .study-speaking { color: #513009; }
#read-recording-indicator { color: #943523; font-weight: 700; }

@media (max-height: 820px) {
  .study-lesson { padding-top: 4px; }
  .study-lesson .study-card { padding-block: 30px 36px; }
  .study-lesson .study-top .light-btn { min-height: 34px; }
  .study-lesson .study-steps { margin-top: 4px; }
  .study-lesson .study-word { font-size: clamp(28px, 7vw, 42px); }
  .study-lesson .study-ipa { font-size: 16px; }
  .study-lesson .study-card h1 { font-size: 20px; }
  .study-lesson .study-card button { min-height: 35px; padding-block: 4px; }
  .study-lesson .english-keys button { min-height: clamp(28px, 5dvh, 38px); }
  .study-lesson .study-card .study-sounds { gap: 4px; }
  .study-lesson .study-sounds > span { min-width: 32px; padding-inline: 4px; font-size: 16px; }
  .study-lesson .study-actions,.study-lesson .study-tiles { margin-block: 4px; }
  .study-lesson .study-example,.study-lesson .read-practice { margin-block: 5px; padding: 6px; line-height: 1.4; }
  .study-lesson .study-card p { margin-block: 3px; }
  .study-writing .english-keys button { min-height: clamp(27px,4.5dvh,36px); }
}
@media (max-height: 700px) and (max-width: 820px) {
  .study-step-0 .study-card h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .study-step-0 .study-card button { min-height: 31px; }
  .study-step-0 .study-footer button { min-height: 30px; }
  .study-step-0 .study-sounds > span { padding-block: 2px; }
  .study-step-0 .study-example { font-size: 14px; }
  .study-step-0 .study-meaning { font-size: 18px; }
  .study-step-0 .study-actions,.study-step-0 .study-tiles { margin-block: 3px; }
}
@media (max-height: 660px) and (max-width: 820px) {
  .study-lesson .study-card { margin-top: 5px; }
  .study-step-0 .study-example { padding: 4px; line-height: 1.25; }
  .study-step-0 .study-top .light-btn { min-height: 30px; }
  .study-step-0 .study-card .study-actions { margin-block: 2px; }
  .study-step-0 .study-example .study-actions button { min-height: 29px; }
  .study-writing .study-card { padding-top: 25px; }
  .study-writing .study-footer { margin-top: 4px; }
}

.map-effects { overflow: hidden; }
.map-cloud-drift { animation: cloud-sailing var(--effect-period) var(--effect-phase) ease-in-out infinite alternate; }
@keyframes cloud-sailing {
  from { transform: translateX(calc(var(--cloud-drift) * -.5)); }
  to { transform: translateX(calc(var(--cloud-drift) * .5)); }
}
.map-garden-sway {
  transform-box: view-box;
  transform-origin: var(--garden-anchor);
  animation: garden-breeze var(--effect-period) var(--effect-phase) ease-in-out infinite;
}
@keyframes garden-breeze {
  0%,100% { transform: rotate(-2.5deg) skewX(-1deg); }
  40% { transform: rotate(3.4deg) skewX(2deg); }
  70% { transform: rotate(-.8deg); }
}
.map-tree-sway { animation-name: tree-breeze; }
@keyframes tree-breeze { 0%,100% { transform: skewX(-.7deg); } 50% { transform: skewX(1.1deg) translateY(-1px); } }
.map-crystal-lights .map-light {
  transform-box: fill-box;
  transform-origin: center;
  animation: crystal-radiance var(--effect-period) var(--effect-phase) ease-in-out infinite;
}
@keyframes crystal-radiance {
  0%,100% { opacity: .18; transform: scale(.78); }
  46% { opacity: 1; transform: scale(1.16); }
  64% { opacity: .55; transform: scale(.96); }
}
.map-light-glint { fill: #fffde5; stroke: #e5ffff; stroke-width: .5; opacity: 1; }
.map-star-twinkle { transform-box: fill-box; transform-origin: center; animation: star-twinkle var(--effect-period) var(--effect-phase) ease-in-out infinite; }
@keyframes star-twinkle { 0%,100% { opacity: .08; transform: scale(.35) rotate(-18deg); } 48% { opacity: 1; transform: scale(1.2) rotate(15deg); } 75% { opacity: .3; transform: scale(.6); } }
.map-water-flow { animation-duration: .85s; opacity: .95; }
.map-waterfalls { opacity: .88; }
.map-falls-streak { fill: none; stroke: #e2fcff; stroke-width: 2.1; stroke-linecap: round; stroke-dasharray: 7 22; opacity: .7; animation: falls-streak .85s linear infinite; }
@keyframes falls-streak { to { stroke-dashoffset: -58; } }
.map-harbor-ripples path { stroke-width: 2.2; animation: water-shimmer 2.7s ease-in-out infinite; }
@keyframes water-shimmer { 0%,100% { opacity: .25; transform: translate(-4px,0); } 50% { opacity: .95; transform: translate(7px,2px); } }
.map-fountain path { stroke-width: 2.3; animation: fountain-spray 1.35s ease-in-out infinite; }
@keyframes fountain-spray { 0%,100% { opacity: .5; transform: translateY(1px); } 50% { opacity: 1; transform: translateY(-4px); } }
.map-water-drop { fill: #e7ffff; animation: water-drop 1.6s var(--effect-phase) ease-in infinite; }
@keyframes water-drop { 0% { opacity: 0; transform: translateY(-10px); } 20% { opacity: .95; } 85%,100% { opacity: 0; transform: translateY(14px); } }
.map-flag { animation-duration: calc(var(--effect-period) * .75); }
@keyframes map-pennant-flutter { 0%,100% { transform: skewY(-7deg) scaleX(.97); } 30% { transform: skewY(7deg) scaleX(1.03); } 65% { transform: skewY(-3deg) scaleX(.95); } }
@keyframes map-banner-flutter { 0%,100% { transform: skewX(-4deg); } 40% { transform: skewX(4deg) scaleY(.98); } 72% { transform: skewX(-1deg); } }
@keyframes harbor-boat { 0%,100% { transform: translate(-1.5px,2px) rotate(-.9deg); } 50% { transform: translate(2.5px,-3px) rotate(1.1deg); } }
.map-petal { animation: petal-drift var(--effect-period) var(--effect-phase) linear infinite; }
@keyframes petal-drift { 0% { opacity: 0; transform: translate(-12px,-16px); } 15%,75% { opacity: .85; } 100% { opacity: 0; transform: translate(65px,38px); } }
.map-petal-shape { transform-box: fill-box; transform-origin: center; animation: petal-turn 2.5s ease-in-out infinite alternate; }
@keyframes petal-turn { to { transform: rotate(150deg) scaleX(.45); } }
.map-firefly { animation: firefly-flight var(--effect-period) var(--effect-phase) ease-in-out infinite; }
@keyframes firefly-flight { 0%,100% { opacity: 0; transform: translate(-5px,8px); } 35% { opacity: .95; transform: translate(7px,-12px); } 65% { opacity: .65; transform: translate(17px,-5px); } }
.map-bird-flock { animation: bird-crossing var(--effect-period) var(--effect-phase) linear infinite; }
@keyframes bird-crossing { 0% { opacity: 0; transform: translate(-70px,8px); } 12%,82% { opacity: .8; } 100% { opacity: 0; transform: translate(180px,-18px); } }
.map-bird-wing { fill: none; stroke: #eaffff; stroke-width: 1.7; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: bird-flap .7s ease-in-out infinite alternate; }
@keyframes bird-flap { to { transform: scaleY(.28); } }
.map-orbit { transform-box: view-box; transform-origin: var(--orbit-anchor); animation: orbit-mote 9s linear infinite; }
@keyframes orbit-mote { to { transform: rotate(360deg); } }
.map-node.current > b { animation: landmark-beacon 2.4s ease-in-out infinite; }
@keyframes landmark-beacon { 50% { filter: brightness(1.3); box-shadow: 0 0 12px #fff3a4; } }
.map-motion-paused .map-effects *, .map-motion-paused .map-node.current > b { animation-play-state: paused !important; }

/* One attack per submitted answer. All effects share the same measured hit point. */
.quest-scene .magic-shot, .quest-scene .shot-impact { animation: none; opacity: 0; }
.quest-scene .magic-shot { left: var(--shot-x); top: var(--shot-y); width: 22px; height: 22px; margin: -11px; }
.quest-scene .magic-shot::after { transform-origin: right center; transform: rotate(var(--trail-angle)); }
.quest-scene .shot-impact { left: var(--hit-x); top: var(--hit-y); right: auto; width: 60px; height: 60px; margin: -30px; }
.quest-scene.attack-running .magic-shot { animation: aimed-shot .62s linear both; }
.quest-scene.attack-running .shot-impact { animation: impactBurst .4s .62s both; }
@keyframes aimed-shot {
  0% { opacity: 0; transform: translate(0,0) scale(.45); }
  10% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--shot-dx),var(--shot-dy)) scale(1.2); }
}
.quest-scene .foe.hurt .foe-art { animation: none; }
.quest-scene.attack-running .foe.hurt .foe-art { animation: guardianHit .55s .62s both; }
.quest-scene .foe .damage { opacity: 0; animation: none; }
.quest-scene.attack-running .foe .damage { animation: damage-on-hit .65s .62s both; }
@keyframes damage-on-hit { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; } 100% { opacity: 0; transform: translateY(-45px); } }
.quest-scene .foe-health b { transition-delay: .62s; }
/* An already defeated guardian stays down when the same screen is rendered again. */
.quest-layout .foe.defeated .foe-art { animation: none; }
.encounter-cleared .foe.defeated.defeat-now .foe-art { animation: guardian-fall .72s ease-in both; }
@media (max-width: 820px) {
  /* iOS zooms focused text inputs below 16px. Keep zoom available for accessibility. */
  .quest-layout .paper input[type="text"], .quest-layout .paper textarea { font-size: 16px !important; }
  .quest-scene .magic-shot { width: 18px; height: 18px; margin: -9px; }
  .quest-scene .shot-impact { width: 46px; height: 46px; margin: -23px; }
}
.map-hero .hero-gear-map, .hero-gear {
  bottom: auto; margin: 0; height: auto; line-height: 0;
  transform: translate(-50%,-100%) rotate(-9deg);
  transform-origin: 50% 100%; animation: none; visibility: hidden;
  filter: drop-shadow(0 2px 1px #35214066);
}
.hero-gear.gear-fitted { visibility: visible; }
.hero-gear svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (prefers-reduced-motion: reduce) {
  .map-effects { display: block; }
  .map-effects *, .map-node.current > b { animation: none !important; }
  .map-clouds, .map-gardens, .map-petals, .map-fireflies, .map-birds, .map-orbits, .map-water-drop, .map-star-twinkle { display: none; }
  .map-crystal-lights .map-light { opacity: .35; }
  .map-flag, .map-ship { transform: none; }
  .quest-scene.attack-running .foe.hurt .foe-art,
  .encounter-cleared .foe.defeated.defeat-now .foe-art { animation: none !important; }
  .quest-scene .foe-health b { transition: none; }
  .quest-scene.attack-running .foe .damage { animation: none; opacity: 1; }
}