/* The shared shell owns the screens, typography, palette and keypad. */
.routes{display:flex;gap:12px;max-width:100%}
.route-choice{font:inherit;color:var(--purple-dark);background:rgba(255,255,255,.6);border:3px solid #fff;border-radius:18px;padding:10px 14px;cursor:pointer;min-width:90px;font-size:20px;box-shadow:0 4px 0 rgba(122,67,128,.2)}
.route-choice[aria-pressed="true"]{border-color:var(--purple-dark);background:var(--key)}
.route-choice small{display:block;font-size:15px;margin-top:5px}
.saved-map{font-size:19px;color:var(--purple-dark);min-height:24px}
.stage-area{gap:8px;min-width:0}
.map-window{width:100%;overflow:hidden;flex-shrink:0;max-width:760px;border-radius:24px}
.island-map{position:relative;width:100%;height:200px;transition:transform 2.1s ease-in-out}
.island-map>svg{position:absolute;inset:0;width:100%;height:100%}
.island-map>svg path{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:5 8;opacity:.65}
.island{position:absolute;transform:translate(-50%,-65%);width:80px;height:75px}
.island img{width:100%;height:100%}
.island:nth-child(even) img{transform:scaleX(-1)}
.island b{position:absolute;right:2px;bottom:0;background:#fff;border:2px solid var(--purple);border-radius:50%;font-size:16px;width:25px;height:25px;display:grid;place-items:center;color:var(--purple-dark)}
.island.current b{background:var(--pink);color:#fff;border-color:#fff}
.island.visited b{background:var(--green);color:#fff}
#boat{position:absolute;left:5%;top:69.4%;width:78px;transform:translate(-50%,-60%);transition:left 2.1s ease-in-out,top 2.1s ease-in-out;z-index:2}
#boat img{width:100%;display:block}
#boat.boost{transition-duration:1.1s}
#boat.boost img{animation:sail-rock .3s ease-in-out infinite alternate}
@keyframes sail-rock{to{transform:rotate(-6deg)}}
.calculator-display{grid-column:1/-1;background:#fff;border-radius:12px;min-height:48px;display:grid;place-items:center;font-size:32px;color:var(--purple-dark);box-shadow:inset 0 2px 4px #0002}
.operand{display:inline-block;transform-origin:center;min-width:.8em}
.operand.counting{animation:count-pulse .36s ease-in-out infinite alternate;color:var(--pink)}
@keyframes count-pulse{to{transform:scale(1.16)}}
.help-slot{height:86px;flex-shrink:0}
#frames{display:flex;gap:8px;justify-content:center}
.frame{display:grid;grid-template-columns:repeat(5,18px);gap:3px;padding:4px;border:2px solid #fff;border-radius:8px;background:rgba(255,255,255,.4)}
.dot{width:18px;height:18px;border:1px solid var(--purple);border-radius:50%}
.dot.first{background:var(--purple)}
.dot.appeared{animation:dot-pop .2s ease-out}
@keyframes dot-pop{from{transform:scale(0)}to{transform:scale(1)}}
.dot.second{background:var(--orange)}
.dot.removed{background:var(--orange);position:relative}
.dot.removed::after{content:'×';position:absolute;inset:0;line-height:16px;color:var(--ink);font:18px/16px sans-serif}
#help-equation{font-size:19px;color:var(--purple-dark);margin-top:5px}
button:focus-visible,a:focus-visible{outline:3px solid var(--purple-dark);outline-offset:4px}
.keypad button:disabled{cursor:default;opacity:.65}
@media(max-width:639px),(orientation:portrait){
 .stage-area{gap:6px;justify-content:center;min-height:270px}
 .island-map{height:145px;width:1100px}.island{width:105px;height:95px}#boat{width:88px}
 .equation{font-size:clamp(32px,8vw,48px);margin:0}
 .feedback{min-height:34px}.feedback img{width:28px}.feedback span{font-size:22px}
 .answer-display{min-height:44px;font-size:29px;min-width:110px}
 .keypad{gap:7px;padding:10px}.keypad button{width:52px;height:43px;font-size:24px}
 .help-slot{height:86px}.visual-help{padding:3px 14px;font-size:18px}
 .game-screen{gap:6px}
}
@media(max-height:700px){
 #screen-start{gap:12px;padding-top:64px;justify-content:safe center}
 #screen-start .logo{width:130px}#screen-start .mascot{width:90px}
 #screen-start .title{font-size:30px}.route-choice{padding:7px 9px}
}
@media(orientation:landscape) and (max-height:560px){
 :root{--pad-width:220px}
 .keypad{padding:10px;gap:7px}.keypad button{width:48px;height:43px;font-size:23px}
 .island-map{height:110px}.stage-area{gap:3px;justify-content:flex-start}
 .feedback{min-height:28px}.feedback img{width:24px}.feedback span{font-size:20px}
 .equation{font-size:36px;margin:0}.answer-display{min-height:36px;font-size:26px}
 .help-slot{height:72px}
}
@media(prefers-reduced-motion:reduce){#boat{transition:none!important}.cloud{animation:none!important}.results,.feedback.show{animation:none!important}.feedback.show{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){.island-map,#boat{transition:none!important}.operand.counting,.dot.appeared,#boat.boost img{animation:none!important}}

/* The treasure glows and stars burst above the final island before results. */
.island:last-child::after{content:'✦';position:absolute;left:30%;top:5%;color:#fff5ae;font-size:28px;opacity:0;pointer-events:none;text-shadow:0 0 8px #e8912e}
.celebrating .island:last-child{z-index:3}
.celebrating .island:last-child img{animation:treasure-bounce .65s ease-in-out 3;filter:drop-shadow(0 0 10px #fff5ae)}
.celebrating .island:last-child::after{animation:treasure-stars 1s ease-out 2}
@keyframes treasure-bounce{50%{transform:translateY(-10px) rotate(5deg)}}
@keyframes treasure-stars{0%{opacity:0;transform:translateY(10px) scale(.3)}35%{opacity:1}100%{opacity:0;transform:translateY(-30px) scale(1.6);text-shadow:-25px 12px #fff5ae,28px 8px #e7b6d2,12px -15px #fff}}
@media(prefers-reduced-motion:reduce){.celebrating .island:last-child img,.celebrating .island:last-child::after{animation:none}.celebrating .island:last-child::after{opacity:1}}

@media (min-width:640px) and (orientation:landscape){
  .game-screen{max-width:900px}
}