/* Expedition UI: sculpted ice lettering, frost-trimmed plaques and compass pads. */
:root { --ui-cream:#fff2bf; --ui-navy:#0d2844; --ui-ice:#b7f4ff; }
.release-links { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:0; }
.release-links a { display:inline-flex; align-items:center; justify-content:center; min-width:88px; min-height:44px; box-sizing:border-box; padding:8px 16px; border:2px solid #a7d4d0; border-radius:14px; color:#315d69; background:#e9f8ee; font-size:13px; font-weight:800; text-decoration:none; box-shadow:0 2px 0 #c0ded6; }
.release-links a:focus-visible { outline:3px solid #277c99; outline-offset:3px; }
.release-links a:active { transform:translateY(2px); box-shadow:none; }
#btnSound { position:fixed; z-index:10; top:calc(12px + env(safe-area-inset-top,0px)); left:calc(12px + env(safe-area-inset-left,0px)); width:44px; height:44px; display:grid; place-items:center; border:2px solid #a1dae5; border-radius:50%; color:#e0fbff; background:linear-gradient(#326782,#133248); box-shadow:0 3px 0 #071b2c; cursor:pointer; }
#btnSound svg { width:25px; height:25px; }
#btnSound .sound-off,#btnSound.muted .sound-waves { display:none; }
#btnSound.muted .sound-off { display:block; }
#btnSound:focus-visible { outline:3px solid #ffdf86; outline-offset:3px; }
.overlay { background:linear-gradient(160deg,#0b203bea,#163a53e8); border:1px solid #88cbd24a; border-radius:12px; box-shadow:inset 0 0 0 6px #071c2e55,inset 0 0 70px #06182d77; }
#ovTitle { gap:9px; padding:16px 22px 20px; border:0; box-shadow:inset 0 -35px 60px #06182d99; }
#ovTitle .game-logo { width:min(84%,310px); margin:-4px 0 -8px; transform:none; font-size:0; line-height:0; filter:drop-shadow(0 5px 6px #001025aa); }
.game-logo img { display:block; width:100%; height:auto; }
#ovTitle .title-tag { color:#d6f4f8; font-size:10px; font-weight:900; letter-spacing:1.8px; margin:0 0 2px; }
#ovTitle .globe { width:220px; border-radius:50%; background:radial-gradient(ellipse,#0d2b4899 40%,transparent 72%); }
#ovTitle .globe-hint { display:flex; flex-direction:column; gap:4px; margin:0 0 4px; font-size:10px; letter-spacing:.5px; color:#c0dbe9; }
.map-label { color:#fff0b0; font-size:10px; font-weight:900; letter-spacing:1.8px; }
.ui-icon { width:24px; height:24px; flex-shrink:0; }
button.play, .menu button.play {
 appearance:none; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
 min-width:190px; min-height:66px; margin:0; padding:12px 32px 18px; border:0; border-radius:0;
 background:url('assets/ui/menu-ice.webp') center/100% 100% no-repeat; box-shadow:none;
 color:#e7fbff; font-family:'Avenir Next','Trebuchet MS',sans-serif; font-size:14px; font-weight:900;
 letter-spacing:1.2px; text-shadow:0 2px 0 #15394f; cursor:pointer;
 filter:drop-shadow(0 5px 5px #00172b88); transition:transform .12s,filter .12s;
}
button.play.primary { background-image:url('assets/ui/menu-gold.webp'); color:#593716; text-shadow:0 1px 0 #fff2b4; }
button.play:hover { filter:drop-shadow(0 6px 8px #00172b99) brightness(1.09); transform:translateY(-2px); }
button.play:active,.menu button.play:active { transform:translateY(3px); box-shadow:none; filter:brightness(.98); }
button.play:focus-visible { outline:3px solid #c6f7ff; outline-offset:3px; border-radius:8px; }
#btnStart { width:268px; min-height:76px; font-size:23px; letter-spacing:2px; }
#btnStart .ui-icon { width:28px; height:28px; }
.menu { gap:8px; width:100%; align-items:center; }
.menu button.play { min-width:0; min-height:58px; padding:10px 23px 16px; font-size:10px; gap:6px; letter-spacing:.8px; }
.menu .ui-icon { width:20px; height:20px; }
#ovTitle .menu { flex-wrap:nowrap; max-width:344px; }
#ovTitle .menu button { flex:1; }
#ovTitle .menu button.play { padding-left:8px; padding-right:8px; }
#ovTitle .credit { font-size:8px; opacity:.72; margin-top:4px; }
.big { position:relative; max-width:100%; padding:16px 24px 22px; font-family:'Avenir Next','Trebuchet MS',sans-serif;
 font-size:clamp(20px,5.5vw,30px); line-height:1.08; font-weight:1000; letter-spacing:1px; color:#f1ffff;
 -webkit-text-stroke:.5px #99e2ed; text-shadow:0 2px 0 #2986a4,0 4px 0 #123d61,0 6px 9px #001c37;
 background:linear-gradient(115deg,transparent 3%,#29667b88 4%,#22536c88 95%,transparent 96%);
 border-top:2px solid #acedef88; border-bottom:2px solid #84cbd355; transform:rotate(-1deg);
}
.big::before,.big::after { content:'✦'; position:absolute; top:50%; transform:translateY(-60%); color:#ffdf86; -webkit-text-stroke:0; font-size:14px; text-shadow:0 1px 4px #051729; }
.big::before { left:7px; }.big::after { right:7px; }
.travelflag { padding:8px 16px; background:#fff3ce15; border:1px solid #fff3ce66; border-radius:12px; transform:rotate(-5deg); font-size:44px; }
.howart,.worldmap { border:2px solid #88cbd299; border-radius:12px; box-shadow:0 6px 0 #071d30,0 9px 20px #06142166; }
.tag { color:#d2e6ed; }.keys { color:#a5cbdc; }
.pad { flex-direction:column; gap:2px; border:2px solid #c9f8ff; background:radial-gradient(circle at 35% 22%,#82d5e0,#326a84 65%,#20455f); color:#f0ffff; box-shadow:inset 0 0 0 4px #1c486766,0 5px 0 #0b2b47,0 8px 14px #061426aa; }
.pad .ui-icon { width:30px; height:30px; filter:drop-shadow(0 2px 0 #16445e); }
.pad-label { font-size:8px; line-height:1; font-weight:900; letter-spacing:1px; }
#bJump { background:radial-gradient(circle at 35% 20%,#fff5b2,#ffc757 60%,#da8830); border-color:#fff2bf; color:#654013; box-shadow:inset 0 0 0 4px #ffed9a77,0 6px 0 #976025,0 9px 15px #061426aa; }
#bJump .ui-icon { width:36px; height:36px; filter:drop-shadow(0 1px 0 #fff3c3); }
#bDash { background:radial-gradient(circle at 35% 22%,#adfff0,#3daea6 65%,#226f78); border-color:#c9fff0; color:#f0ffff; }
#bBrake { background:radial-gradient(circle at 35% 22%,#94b7ce,#426680 65%,#28465f); color:#e2f1fc; }
#bPause { width:44px; height:44px; border:2px solid #b1dee8; background:linear-gradient(#3c7590,#1a3a54); box-shadow:inset 0 0 0 3px #163b5555,0 3px 0 #071b2c; }
#bPause .ui-icon { width:19px; height:19px; }
@media(max-width:420px) {
 #ovTitle { padding:9px 10px; gap:5px; }
 #ovTitle .game-logo { width:184px; margin:-10px 0 -12px; }
 #ovTitle .title-tag { font-size:8px; letter-spacing:1.1px; }
 #ovTitle .globe { width:188px; }
 #ovTitle .globe-hint { gap:3px; font-size:9px; margin-bottom:0; }
 .map-label { font-size:8px; letter-spacing:1.1px; }
 #btnStart { width:236px; min-height:62px; font-size:19px; }
 #ovTitle .menu { max-width:338px; }
 .menu button.play { min-height:53px; padding:9px 20px 15px; font-size:9px; }
 .menu .ui-icon { width:17px; height:17px; }
 .big { padding:13px 23px 18px; font-size:22px; }
 .overlay:not(#ovTitle) { gap:12px; }
}
@media(max-width:350px) { #ovTitle { gap:3px; padding:7px 7px; } #ovTitle .game-logo { width:168px; } #ovTitle .globe { width:166px; } #btnStart { min-height:57px; width:218px; } #ovTitle .credit { margin-top:0; font-size:7px; } .menu button.play { font-size:7px; } }
@media(max-height:540px) { #ovTitle { justify-content:flex-start; } }
@media(prefers-reduced-motion:reduce) { button.play,.menu button.play { transition:none; } }
@media(max-width:350px) {
 .overlay:not(#ovTitle) { padding:12px; gap:8px; }
 .overlay:not(#ovTitle) .tag { font-size:11px; line-height:1.4; }
 .overlay:not(#ovTitle) .keys { font-size:10px; line-height:1.5; }
 .overlay:not(#ovTitle) .big { font-size:19px; padding:10px 22px 14px; }
 .overlay:not(#ovTitle) .howart { width:84%; }
 .overlay:not(#ovTitle) button.play { min-height:54px; padding-top:9px; padding-bottom:15px; font-size:12px; }
 .overlay:not(#ovTitle) .menu button.play { min-height:48px; font-size:9px; }
}

/* Generated artwork is the visible control; hit targets stay separate from art. */
#joystick { position:absolute; left:calc(18px + env(safe-area-inset-left,0px)); bottom:calc(22px + env(safe-area-inset-bottom,0px)); width:142px; height:142px; pointer-events:auto; touch-action:none; cursor:grab; }
#joystick.held { cursor:grabbing; }
#joystick:focus-visible { outline:3px solid #d1ffff; outline-offset:4px; border-radius:50%; }
#joystick img { position:absolute; pointer-events:none; user-select:none; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 5px #02152766); }
#joystick #joystickThumb { width:59%; height:59%; left:20.5%; top:20.5%; transition:transform .12s ease-out; }
#joystick.held #joystickThumb { transition:none; }
#touch .pad, #touch #bPause { background:none; border:0; box-shadow:none; padding:0; backdrop-filter:none; filter:none; }
.control-art { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; user-select:none; filter:drop-shadow(0 4px 5px #05182799); }
#touch #bDash.boosting .control-art { animation:none; filter:brightness(1.12) drop-shadow(0 0 9px #80ffe8bb); }
#touch .pad:not(.held) .control-art { animation:control-breathe 2.8s ease-in-out infinite; }
#touch #bDash:not(.held) .control-art { animation-delay:-.7s; }
#touch #bBrake:not(.held) .control-art { animation-delay:-1.4s; }
#touch #bPause .control-art { animation:pause-float 3.2s ease-in-out infinite; }
#joystick:not(.held) .stick-base { animation:stick-glow 3.4s ease-in-out infinite; }
#joystick:not(.held) #joystickThumb { animation:stick-idle 3.8s ease-in-out infinite; }
#touch .pad.held, #touch #bPause:active { background:none; box-shadow:none; transform:translateY(3px) scale(.94); }
#touch .pad.held .control-art { animation:none; filter:brightness(1.12) drop-shadow(0 1px 2px #05182788); }
@keyframes control-breathe { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-2px) scale(1.025); } }
@keyframes pause-float { 0%,100% { transform:rotate(-1deg); } 50% { transform:translateY(-2px) rotate(1deg); } }
@keyframes stick-glow { 0%,100% { filter:drop-shadow(0 4px 5px #02152766) brightness(1); } 50% { filter:drop-shadow(0 5px 9px #5edcf077) brightness(1.06); } }
@keyframes stick-idle { 0%,100% { transform:translateX(-3%); } 50% { transform:translateX(3%); } }
#touch #bPause { width:54px; height:54px; }
#touch #bJump { width:100px; height:100px; right:calc(12px + env(safe-area-inset-right,0px)); bottom:calc(62px + env(safe-area-inset-bottom,0px)); }
#touch #bDash { width:76px; height:76px; right:calc(110px + env(safe-area-inset-right,0px)); bottom:calc(101px + env(safe-area-inset-bottom,0px)); }
#touch #bBrake { width:70px; height:70px; right:calc(118px + env(safe-area-inset-right,0px)); bottom:calc(20px + env(safe-area-inset-bottom,0px)); }
@media(max-width:420px) {
 #joystick { width:126px; height:126px; left:8px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); }
 #touch #bJump { width:90px; height:90px; right:8px; bottom:calc(61px + env(safe-area-inset-bottom,0px)); }
 #touch #bDash { width:66px; height:66px; right:100px; bottom:calc(100px + env(safe-area-inset-bottom,0px)); }
 #touch #bBrake { width:64px; height:64px; right:103px; bottom:calc(24px + env(safe-area-inset-bottom,0px)); }
}
@media(max-width:350px) { #joystick { width:118px; height:118px; left:4px; } #touch #bDash { right:91px; } #touch #bBrake { right:93px; } #touch #bJump { width:82px; height:82px; right:5px; } }
@media(prefers-reduced-motion:reduce) { #joystick #joystickThumb { transition:none; } #touch .control-art,#joystick img { animation:none !important; } }

/* Let the title use the phone's full height instead of squeezing the globe
   into the gameplay canvas's 3:4 rectangle. */
#ovTitle { position:fixed; inset:0; width:min(100%,560px); margin:auto; padding:20px 16px; gap:8px; overflow-y:auto; }
#ovTitle > * { flex-shrink:0; }
#ovTitle .game-logo { width:220px; margin:-8px 0 -12px; }
#ovTitle .globe { width:min(86vw,360px,44dvh); height:auto; border-radius:0; }
#ovTitle .menu { max-width:360px; }
@media(max-width:420px) {
 #ovTitle .game-logo { width:200px; }
 #ovTitle .globe { width:min(88vw,340px,45dvh); }
}
@media(max-height:660px) {
 #ovTitle { justify-content:flex-start; gap:4px; padding:10px 12px; }
 #ovTitle .game-logo { width:160px; }
 #ovTitle .title-tag,#ovTitle .credit { display:none; }
}

/* Persistent tour progress. The list is deliberately dense enough to scan all
   ten countries while each landmark still reads as a real level. */
#ovProgress { justify-content:flex-start; padding:18px 16px; gap:10px; }
.progress-summary { width:min(100%,340px); color:#d8edf7; }
.progress-summary b { color:#ffdc69; font-size:1.15em; }
.progress-track { display:block; height:8px; margin-top:7px; overflow:hidden; border-radius:999px; background:#071c2e; box-shadow:inset 0 1px 3px #0008; }
.progress-track > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#52d7cb,#ffd45e); box-shadow:0 0 8px #80eadd88; }
.progress-list { width:min(100%,344px); flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:grid; gap:8px; padding:2px 4px 8px; text-align:left; scrollbar-width:thin; }
.progress-country { padding:9px 11px; border:1px solid #78c9da55; border-radius:11px; background:linear-gradient(145deg,#153b54dd,#0b263edd); box-shadow:inset 0 1px #bff7ff19,0 3px 7px #03132155; }
.progress-country header { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:7px; }
.progress-country strong { color:#f4ffff; font-size:13px; letter-spacing:.5px; }
.progress-country em { font-style:normal; color:#ffd968; font-size:10px; font-weight:900; }
.progress-flag { font-size:21px; filter:drop-shadow(0 2px 2px #0018); }
.progress-country ul { display:grid; gap:8px; margin:9px 0 0; padding:0; list-style:none; }
.progress-country li { display:grid; grid-template-columns:13px minmax(0,1fr) auto; align-items:start; gap:6px; color:#89aabe; font-size:11px; line-height:1.35; }
.progress-country li > span:first-child { display:block; width:13px; color:#6d8da3; font-weight:900; }
.progress-country li .stage-copy { min-width:0; font-size:11px; overflow-wrap:anywhere; }
.progress-country li .stage-stars { font-size:15px; letter-spacing:1px; line-height:1.1; }
.progress-country li .stage-copy small { font-size:9px; line-height:1.4; }
.progress-country li.done { color:#d7f8ee; }
.progress-country li.done > span:first-child { color:#267a73; }
.progress-country.locked { opacity:.48; filter:saturate(.45); }
.progress-country.locked ul { display:none; }
#ovProgress > button { flex:none; }

/* Little explorer palette: sunny, soft edges, and high-contrast reading cards. */
html,body { background:#d9f3ff; color:#26455d; }
#wrap { background:radial-gradient(circle at 50% 35%,#f5fbff 0%,#c8efff 60%,#a7dcf2 100%); }
#wrap::after { background:none; }
#game { border-radius:18px; box-shadow:0 10px 26px #528caf44; }
.overlay:not(#ovTitle) { background:linear-gradient(155deg,#fffdf1f2,#e8f9fff2); border:3px solid #fff; border-radius:26px; box-shadow:0 8px 24px #5a98ad44,inset 0 0 0 4px #b6eaf3; }
#ovTitle { background:linear-gradient(180deg,#f9ffff1c,#ffffff00 46%,#eafaff22),url('assets/title-playful.png') center/cover; box-shadow:none; }
#ovTitle .title-tag { color:#174e71; text-shadow:0 1px 2px #fff; font-size:11px; }
#ovTitle .globe { background:radial-gradient(circle,#fffdf4dd 8%,#e5f9ffbb 56%,transparent 73%); filter:drop-shadow(0 6px 9px #579fc288); }
#ovTitle .globe-hint { color:#285c73; text-shadow:0 1px 2px #fff; font-size:11px; font-weight:700; }
.map-label { color:#1f5571; text-shadow:0 1px 2px #fff; }
#ovTitle .credit { color:#28607a; text-shadow:0 1px 3px #fff; }
.overlay .tag,.overlay .keys { color:#315873; }
.overlay .keys b { color:#1d637b; }
.big { color:#277c99; -webkit-text-stroke:0; text-shadow:0 2px 0 #fff,0 4px 0 #bce4ea; background:#fff9d8; border:3px solid #fff; border-radius:999px; transform:rotate(-1deg); box-shadow:0 5px 0 #a7dce5; }
.big::before,.big::after { color:#ffb769; text-shadow:none; }
.travelflag { background:#fff9df; border:3px solid #fff; border-radius:24px; box-shadow:0 5px 0 #bee4e9; }
.howart,.worldmap { border:3px solid #fff; border-radius:20px; box-shadow:0 5px 0 #b7dfe9,0 7px 14px #75a9c744; }
button.play,.menu button.play { background-image:url('assets/ui/menu-playful-blue.png'); color:#245c78; filter:drop-shadow(0 3px 3px #4b89a755); text-shadow:0 1px 0 #fff; }
button.play.primary { background-image:url('assets/ui/menu-playful-yellow.png'); color:#795034; filter:drop-shadow(0 3px 3px #c59e6b66); }
button.play:hover { filter:brightness(1.05) drop-shadow(0 5px 5px #4b89a766); }
#btnSound { color:#275c79; background:linear-gradient(#fffdf2,#c9f2f8); border:3px solid #fff; box-shadow:0 4px 0 #8fcad9; }
#touch .control-art,#joystick img { filter:drop-shadow(0 4px 5px #5391ab77); }
#runHint { background:#fffdf2ed; border:3px solid #a6dfec; color:#285a75; box-shadow:0 5px 12px #65a6c533; }
.progress-summary { color:#315873; }
.progress-summary b { color:#dc895b; }
.progress-track { background:#c7e9ed; box-shadow:inset 0 1px 3px #7ba6b844; }
.progress-country { background:#fffdf2; border:2px solid #c5e9ed; border-radius:17px; box-shadow:0 3px 0 #b1dae2; }
.progress-country strong { color:#285b75; }
.progress-country em { color:#d5835c; }
.progress-country li { color:#688396; }
.progress-country li.done { color:#267a73; }
.progress-country.locked { opacity:.65; filter:none; }

#ovCollect { justify-content:flex-start; padding:15px 13px; gap:10px; }
#ovCollect .big { flex:none; }
#ovCollect .tag { flex:none; font-size:12px; }
.souvenir-shelf { width:100%; max-width:420px; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; display:grid; gap:9px; align-content:start; padding:3px 3px 12px; text-align:left; scrollbar-width:thin; }
.souvenir-card { display:grid; grid-template-columns:62px 1fr; align-items:center; gap:10px; min-height:79px; padding:8px; border:2px solid #c6e8e9; border-radius:18px; background:#fffefa; box-shadow:0 3px 0 #b7dde4; }
.souvenir-picture { display:grid; place-items:center; width:62px; height:62px; border-radius:15px; background:linear-gradient(145deg,#fff2ca,#d7f7eb); color:#8db8bd; font-size:30px; font-weight:900; }
.souvenir-picture img { display:block; width:55px; height:55px; object-fit:contain; }
.souvenir-card small { display:block; color:#5a92a4; font-size:10px; font-weight:900; letter-spacing:.4px; }
.souvenir-card strong { display:block; margin:2px 0; color:#27637b; font-size:14px; line-height:1.2; }
.souvenir-card p { color:#527181; font-size:11px; line-height:1.35; }
.souvenir-card.locked .souvenir-picture { background:#e9f2ee; }
#ovCollect > button { flex:none; }
@media(max-width:350px) { .souvenir-card { grid-template-columns:52px 1fr; } .souvenir-picture { width:52px; height:52px; } .souvenir-picture img { width:47px; height:47px; } }

/* A clear next step, little goals, and a gentle return to the road. */
#nextStop { display:block; min-height:18px; max-width:330px; color:#315568; font-size:12px; font-weight:800; line-height:1.4; }
#ovTravel { position:fixed; inset:0; width:min(100%,560px); height:100%; margin:auto; box-sizing:border-box; justify-content:flex-start; gap:10px; padding:max(22px,env(safe-area-inset-top)) 20px max(22px,env(safe-area-inset-bottom)); }
.travel-heading { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:auto; }
.travel-heading .travelflag { font-size:40px; line-height:1; margin:0; }
.travel-heading .big { font-size:25px; padding:9px 17px; }
#ovTravel .tag, #ovTravel .keys { margin:0; }
#ovTravel #travelInfo { font-size:13px; font-weight:800; }
#ovTravel #travelBrief { max-width:360px; font-size:12px; line-height:1.45; }
#ovTravel #travelArt { width:225px; height:90px; margin:0; }
#btnTravelBack { margin-bottom:auto; }
.stage-choices { width:min(100%,360px); display:grid; gap:7px; }
.stage-choice { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:54px; padding:9px 13px; border:2px solid #c6e2e6; border-radius:17px; color:#294b60; background:#fffef8; box-shadow:0 3px 0 #bed6dc; text-align:left; cursor:pointer; font-family:inherit; transition:background .15s,border-color .15s,transform .15s; }
.stage-choice.selected { border-color:#47a9a8; background:#e5f8ec; box-shadow:0 3px 0 #86c6bc; }
.stage-choice.complete { border-color:#b8d6d2; }
.stage-choice.selected.complete { border-color:#47a9a8; }
.stage-choice.locked { color:#657e88; background:#eef3ef; border-color:#d5e0dc; box-shadow:0 3px 0 #d0dcd8; cursor:default; }
.stage-choice:not(:disabled):active { transform:translateY(2px); box-shadow:0 1px 0 #9cc9c7; }
.stage-choice:focus-visible, button.play:focus-visible { outline:3px solid #245773; outline-offset:3px; }
.stage-copy { display:flex; flex-direction:column; gap:3px; font-weight:800; font-size:13px; line-height:1.3; }
.stage-copy small, .stage-status { display:block; font-size:10px; font-weight:600; line-height:1.35; }
.stage-stars { flex-shrink:0; font-size:18px; letter-spacing:2px; color:#bd7819; white-space:nowrap; }
.journey-goals { display:grid; gap:7px; width:min(100%,340px); box-sizing:border-box; padding:12px 14px; border-radius:20px; border:2px solid #fff; background:rgba(255,253,239,.94); box-shadow:0 3px 0 rgba(145,180,183,.18); text-align:left; }
.goal-item { display:flex; align-items:center; gap:9px; color:#385a68; font-size:12px; font-weight:700; line-height:1.35; }
.goal-mark { display:grid; place-items:center; flex-shrink:0; width:24px; height:24px; border-radius:50%; background:#e7eff0; color:#7b8f92; font-size:14px; }
.goal-copy { flex:1; }
.goal-copy small { display:block; color:#6a7c80; font-size:10px; font-weight:600; margin-top:1px; }
.goal-item.done .goal-mark { background:#d7f0dc; color:#397957; }
.goal-item.missed .goal-mark { background:#f6e5da; color:#986444; }
.goal-item.pending .goal-mark { background:#e8eff4; color:#547789; }
.result-star-summary { text-align:center; color:#bc791d; font-weight:900; font-size:26px; letter-spacing:5px; line-height:1.2; }
.record-line { text-align:center; color:#5d7581; font-size:11px; line-height:1.5; margin:3px 0 0; }
#ovPause, #ovBase { gap:10px; }
#ovPause .big { font-size:22px; }
#ovPause .menu { gap:6px; }
#ovPause .menu button.play { min-height:48px; }
#ovPause .journey-goals, #ovBase .journey-goals { width:min(100%,310px); }
.retry-tip { width:min(100%,300px); margin:0; padding:13px 16px; border-radius:18px; box-sizing:border-box; background:#fff9e4; color:#52636b; font-size:13px; font-weight:700; line-height:1.5; text-align:center; }
.retry-tip:empty { display:none; }
#resumeCountdown { position:absolute; inset:0; z-index:20; display:grid; place-items:center; border-radius:inherit; color:#315d73; font-size:92px; font-weight:900; background:rgba(230,247,249,.62); text-shadow:0 4px 0 #fff; pointer-events:auto; }
#resumeCountdown.hidden { display:none; }
@media(max-height:700px) {
  #ovTravel { gap:7px; padding-top:max(13px,env(safe-area-inset-top)); padding-bottom:max(13px,env(safe-area-inset-bottom)); }
  .travel-heading .big { font-size:22px; padding:6px 13px; }
  .travel-heading .travelflag { font-size:32px; }
  #ovTravel #travelArt { width:180px; height:72px; }
  .stage-choice { min-height:48px; padding:7px 11px; }
  #ovTravel .journey-goals { gap:4px; padding:9px 12px; }
  #ovTravel button.play { min-height:52px; }
}
@media(prefers-reduced-motion:reduce) { .stage-choice { transition:none; } }
.progress-open { display:block; width:100%; min-height:44px; margin-top:9px; padding:9px 14px; border:2px solid #a7d4d0; border-radius:14px; color:#315d69; background:#e9f8ee; font-family:inherit; font-size:12px; font-weight:800; line-height:1.3; cursor:pointer; box-shadow:0 2px 0 #c0ded6; }
.progress-open:active { transform:translateY(1px); box-shadow:0 1px 0 #c0ded6; }
.progress-open:focus-visible { outline:3px solid #245773; outline-offset:3px; }

/* Addition lives above the saved landmark result, without a timer. */
.math-overlay { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; overflow-y:auto; padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom)); background:rgba(39,78,103,.65); }
.math-overlay.hidden, #mathNext.hidden { display:none; }
.math-card { width:min(100%,420px); max-height:100%; overflow-y:auto; flex-shrink:0; box-sizing:border-box; padding:22px 20px 17px; border:4px solid white; border-radius:32px; background:#fffdf0; color:#294e62; text-align:center; box-shadow:0 7px 0 #90c1c9,0 14px 35px rgba(29,68,90,.25); }
.math-badge { color:#598b91; font-size:10px; font-weight:900; letter-spacing:1.5px; }
.math-card h2 { margin:9px 0 4px; font-size:25px; line-height:1.25; }
.math-prompt { margin:0 auto; max-width:330px; color:#557584; font-size:13px; line-height:1.45; font-weight:700; }
.math-counter { margin:10px 0 6px; color:#b87c32; font-size:13px; font-weight:900; }
.math-picture { display:flex; align-items:center; justify-content:center; gap:10px; min-height:96px; padding:9px; border-radius:20px; background:#e7f6f8; }
.math-picture > b { font-size:25px; color:#e5a24e; }
.math-group { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:5px; font-weight:900; color:#457282; }
.math-fish { font-size:21px; line-height:1.3; overflow-wrap:anywhere; }
.math-zero { font-size:28px; color:#8eb6c1; }
.math-equation { margin:12px 0; font-size:32px; font-weight:900; letter-spacing:2px; }
.math-choices { display:flex; justify-content:center; gap:12px; }
.math-answer { min-width:65px; min-height:55px; border:3px solid white; border-radius:17px; background:#d7eff6; color:#31596e; font:900 24px/1 inherit; font-family:inherit; font-size:24px; font-weight:900; box-shadow:0 4px 0 #a5cbd4; cursor:pointer; }
.math-answer.correct { background:#d9f2d8; box-shadow:0 4px 0 #a6d1aa; }
.math-answer.try-again { background:#fff0dd; box-shadow:0 4px 0 #e8c8a4; }
.math-answer:focus-visible, .math-close:focus-visible { outline:3px solid #245773; outline-offset:3px; }
.math-feedback { min-height:36px; margin:10px 0 4px; font-size:12px; font-weight:800; line-height:1.5; color:#547b73; }
#mathNext { min-height:54px; }
.math-close { display:block; margin:10px auto 0; padding:10px 18px; min-height:44px; border:0; background:transparent; color:#607e88; font:700 13px/1.3 inherit; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.math-progress { margin:0; color:#4f7984; font-size:12px; font-weight:800; }
#btnMathPractice { min-height:50px; }
@media(max-height:660px) { .math-card { padding:14px 16px 10px; } .math-card h2 { font-size:21px; } .math-picture { min-height:68px; } .math-fish { font-size:17px; } .math-equation { margin:7px 0; font-size:27px; } .math-counter { margin:5px 0; } .math-feedback { min-height:26px; margin:6px 0 0; } .math-close { margin-top:3px; } }

/* Text and decoration share one bitmap; live labels remain screen-reader names. */
button.art-button { background:var(--button-art) center / contain no-repeat!important; border:0!important; box-shadow:none!important; color:transparent!important; text-shadow:none!important; font-size:0!important; line-height:0!important; letter-spacing:0!important; padding:0!important; width:150px; height:72px; min-height:44px!important; flex:none; }
button.art-button > * { visibility:hidden; }
button.art-button.primary { width:204px; height:98px; }
#btnStart.art-button { width:204px; height:96px; }
#ovTitle .menu { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 10px; width:min(100%,314px); max-width:314px; }
#ovTitle .menu button.art-button { width:100%; height:auto; aspect-ratio:2.05; min-width:0; }
#ovPause .menu,#ovBase .menu,#ovOver .menu { flex-wrap:wrap; }
#mathClose.art-button { width:120px; height:58px; margin:6px auto 0; }
#mathNext.art-button { width:164px; height:78px; }
.progress-open.art-button { width:124px; height:60px; margin:6px auto 0; }
.stage-choice { font-family:"Avenir Next","Apple SD Gothic Neo",sans-serif; overflow-wrap:anywhere; }
.math-answer { font-family:"Avenir Next","Apple SD Gothic Neo",sans-serif; font-size:24px; line-height:1; }
@media(max-height:680px){#btnStart.art-button{width:170px;height:80px}#ovTitle .menu{max-width:270px;gap:0 8px}#mathNext.art-button{height:64px}#mathClose.art-button{height:48px}button.art-button.primary{height:78px}}
/* Long menus scroll from their top instead of clipping the logo above the viewport. */
#ovTitle { justify-content:flex-start; }