/* STARLINIA map and towns */
#map-screen,#town-screen{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#bfe6ff,#eaf6ff 60%,#fff6e4)}
.mp-top{position:absolute;left:12px;top:max(10px,env(safe-area-inset-top));z-index:25}
.mp-stage-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden;overflow:clip;background:#2da9fc}
.mp-stage{position:relative;flex:0 0 auto;aspect-ratio:1779/884;width:min(100vw,calc(100vh*1779/884))}
@supports (height:100dvh){.mp-stage{width:min(100vw,calc(100dvh*1779/884))}}
.mp-stage::before,.mp-stage::after{content:"";position:absolute;left:-10%;right:-10%;pointer-events:none}
.mp-stage::before{bottom:calc(100% - 1px);height:100vh;background:radial-gradient(ellipse 22% 14% at 18% 52%,rgba(255,255,255,.75),transparent 70%),radial-gradient(ellipse 26% 16% at 52% 40%,rgba(255,255,255,.7),transparent 70%),radial-gradient(ellipse 20% 12% at 84% 58%,rgba(255,255,255,.7),transparent 70%),linear-gradient(0deg,#2da9fc 0,#8ccfff 35%,#d9efff 75%,#f3faff 100%)}
.mp-stage::after{top:calc(100% - 1px);height:100vh;background:linear-gradient(180deg,#0daffb 0,#0a95ea 30%,#0a73cf 70%,#0a5cb0 100%)}
.mp-img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 90%,transparent 100%)}
.mp-img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none;pointer-events:none}
.mp-town{position:absolute;width:clamp(56px,9%,120px);aspect-ratio:1;transform:translate(-50%,-50%);border:0;background:transparent;border-radius:50%;cursor:pointer;padding:0}
.mp-ring{position:absolute;inset:8%;border-radius:50%;border:4px solid #fff;box-shadow:0 0 0 3px var(--c),0 0 18px 4px var(--c);opacity:.0;transition:opacity .2s,transform .2s}
.mp-town:hover .mp-ring,.mp-town:focus-visible .mp-ring{opacity:1;transform:scale(1.08)}
.mp-town:focus-visible{outline:4px solid #1f6dff;outline-offset:2px}
.mp-star{position:absolute;right:6%;top:2%;width:34%;aspect-ratio:1;background:var(--c);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);filter:none}
.mp-star[hidden]{display:none}
.tw-title{position:absolute;left:50%;top:max(12px,env(safe-area-inset-top));transform:translateX(-50%);z-index:25;padding:8px 22px;border-radius:999px;background:#fff;border:3px solid #44b8ff;color:#2a5fb0;font:800 clamp(18px,3vw,26px)/1.1 "Baloo 2","Trebuchet MS",system-ui,sans-serif;box-shadow:0 6px 16px rgba(30,90,180,.25);white-space:nowrap}
.tw-scroll{position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;touch-action:pan-x}
.tw-scroll::-webkit-scrollbar{display:none}
.tw-scroll.drag{cursor:grabbing}
.tw-scroll:focus-visible{outline:4px solid #1f6dff;outline-offset:-4px}
.tw-wrap{position:relative;height:100%;aspect-ratio:2046/768;min-width:100%}
.tw-img{display:block;height:100%;width:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.tw-pan{position:absolute;top:50%;transform:translateY(-50%);z-index:25;width:52px;height:52px;border-radius:50%;border:3px solid #fff;background:linear-gradient(180deg,#44b8ff,#1f78e6);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 16px rgba(30,90,180,.35)}
.tw-pan.left{left:10px}.tw-pan.right{right:10px}.tw-pan[hidden]{display:none}
.tw-pan:focus-visible{outline:4px solid #fff;outline-offset:3px}
.tw-spot{position:absolute;transform:translate(-50%,-50%);width:clamp(52px,6vw,72px);aspect-ratio:1;border:4px solid #fff;border-radius:50%;background:var(--c);color:#fff;font:900 clamp(26px,3.4vw,36px)/1 "Baloo 2","Trebuchet MS",system-ui,sans-serif;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 6px 16px rgba(0,0,0,.35),0 0 0 4px rgba(255,255,255,.45);animation:tw-pulse 2.6s ease-in-out infinite}
.tw-spot svg{width:55%;fill:#fff;margin-left:8%}
.tw-spot.riddle{border-radius:50% 50% 50% 12%}
.tw-spot:focus-visible{outline:4px solid #1f6dff;outline-offset:3px}
@keyframes tw-pulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.09)}}
html.calm .tw-spot{animation:none}
html.calm .mp-ring{transition:none}
@media (prefers-reduced-motion:reduce){html:not(.calm-off) .tw-spot{animation:none}}
@media (max-width:700px){
  .tw-title{top:calc(max(10px,env(safe-area-inset-top)) + 62px);font-size:18px;padding:6px 16px}
  .mp-top .bk-btn{padding:8px 14px;font-size:16px}
}
@media (orientation:portrait){
  .tw-scroll{display:flex;align-items:center}
  .tw-wrap{height:62%;flex:0 0 auto}
}
@media (orientation:portrait){
  .tw-wrap{height:70%}
  .mp-stage-wrap{justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x}
  .mp-stage-wrap::-webkit-scrollbar{display:none}
  .mp-stage{flex:0 0 auto;width:auto;height:100%;max-height:none}
  .mp-town{width:84px}
  .mp-img{-webkit-mask-image:none;mask-image:none}
  .mp-stage::before,.mp-stage::after{display:none}
}
/* living towns */
.tw-canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none}
.tw-swan{position:absolute;width:3.56%;height:0;pointer-events:none;z-index:2}
.tw-swan img{position:absolute;left:0;bottom:0;width:100%;transform:translate(-50%,16%);transform-origin:50% 84%;display:block}
.tw-wake{position:absolute;left:0;top:0;width:150%;aspect-ratio:5;border-radius:50%;background:radial-gradient(closest-side,rgba(10,60,130,.28),rgba(10,60,130,0));transform:translate(-50%,-30%)}
.tw-ripple{position:absolute;aspect-ratio:3.2;border:2px solid rgba(255,255,255,.55);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(.7);opacity:0;animation:tw-rip 4.5s ease-out infinite}
.tw-ripple.r2{animation-delay:-2s}
@keyframes tw-rip{0%{transform:translate(-50%,-50%) scale(.7);opacity:.55}100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
.tw-bird{position:absolute;width:30px;height:15px;pointer-events:none;left:-4%}
.tw-bird svg{width:100%;height:100%;fill:#2b2540;opacity:.8;overflow:visible}
.tw-bird .wing{transform-origin:50% 70%;animation:tw-flap .9s ease-in-out infinite}
@keyframes tw-flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.35)}}
.pf-wheel,.pf-hub,.pf-clock{position:absolute;pointer-events:none;z-index:2;display:block}
.pf-wheel img{width:100%;height:100%;display:block}
.pf-hub{height:auto}
.pf-clock{aspect-ratio:1;overflow:visible}
.pb-fly{position:absolute;pointer-events:none;z-index:2;aspect-ratio:1;filter:drop-shadow(0 3px 2px rgba(40,20,60,.22))}
.pb-fly svg{width:100%;height:100%;display:block;overflow:visible}
.pb-drop{position:absolute;width:.22%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 4px #bfe8ff;pointer-events:none;z-index:2;opacity:0}
.wh-cable{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.wh-cover{position:absolute;height:auto;pointer-events:none;z-index:1;display:block}
.wh-cab{position:absolute;height:auto;pointer-events:none;z-index:2;display:block}
.tw-blades{position:absolute;height:auto;pointer-events:none;z-index:2;display:block}
.tw-canvas{z-index:1}.tw-swan,.tw-ripple,.tw-bird{z-index:2}.tw-spot{z-index:3}
.tw-parts{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:1}
.tw-boat{position:absolute;pointer-events:none;z-index:2;transform-origin:50% 90%}
.mp-top{display:flex;gap:10px;align-items:center}
.tw-game{display:inline-flex;align-items:center;gap:8px;background:var(--c,#3b82ff)!important;box-shadow:0 4px 0 rgba(0,0,0,.25),0 10px 18px rgba(0,0,0,.18)!important}
@media (max-width:700px){.tw-game span{display:none}.tw-game{padding:8px 12px}}
@media (max-width:480px){.mp-top{left:8px;gap:6px}.mp-top .bk-btn{font-size:13px;padding:8px 10px;min-height:44px}.tw-game{min-width:44px;padding:8px 10px}}

.fw-stand{position:absolute;height:auto;pointer-events:none;z-index:2;display:block}
.fw-wheel{position:absolute;pointer-events:none;z-index:3}
.fw-frame,.fw-cab{position:absolute;display:block;pointer-events:none;max-width:none}
.fw-frame{left:0;top:0;width:100%;height:100%}
.fw-cab{height:auto}

.ij-track{position:absolute;inset:0;pointer-events:none;z-index:2;-webkit-clip-path:polygon(46.29% 0.00%,66.99% 0.00%,66.99% 13.02%,66.50% 16.28%,65.67% 19.53%,65.28% 21.61%,64.75% 23.96%,64.65% 29.95%,64.94% 33.85%,69.63% 33.85%,69.82% 29.95%,69.73% 23.96%,69.14% 21.61%,68.60% 19.53%,67.97% 16.28%,67.53% 13.02%,67.53% 0.00%,83.30% 0.00%,83.30% 100.00%,46.29% 100.00%);clip-path:polygon(46.29% 0.00%,66.99% 0.00%,66.99% 13.02%,66.50% 16.28%,65.67% 19.53%,65.28% 21.61%,64.75% 23.96%,64.65% 29.95%,64.94% 33.85%,69.63% 33.85%,69.82% 29.95%,69.73% 23.96%,69.14% 21.61%,68.60% 19.53%,67.97% 16.28%,67.53% 13.02%,67.53% 0.00%,83.30% 0.00%,83.30% 100.00%,46.29% 100.00%)}
.ij-train{position:absolute;height:auto;display:block;max-width:none}

.ij-skate{position:absolute;pointer-events:none;z-index:2;height:auto;aspect-ratio:44/62;will-change:transform}
.ij-skate svg{display:block;width:100%;height:100%;overflow:visible;filter:saturate(.92) drop-shadow(0 1px 1px rgba(30,40,90,.35))}
.ij-skate-sh{position:absolute;pointer-events:none;z-index:1;aspect-ratio:7;border-radius:50%;background:radial-gradient(closest-side,rgba(20,50,110,.28),rgba(20,50,110,0))}
/* Starli's Little Surprise: an invisible tap area on the town's spot, and its own sparkle layer */
.tw-surprise{position:absolute;z-index:4;border:0;padding:0;background:transparent;cursor:pointer;border-radius:40%;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none}
.tw-surprise:focus-visible{outline:4px solid #1f6dff;outline-offset:2px}
.tw-surprise-fx{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}

/* Script lettering for Starli's frost "JOY": Dancing Script Bold by Impallari Type (SIL Open Font License, assets/web/fonts/DancingScript-OFL.txt), trimmed to J, O, Y */
@font-face{font-family:"JoyScript";font-weight:400;font-style:normal;font-display:block;src:url(../../../assets/web/fonts/DancingScript-Joy.woff) format("woff")}
/* After the musical surprise: a small music-note replay button and a "Read ... Story" invitation by the spot */
.tw-note,.tw-invite{position:absolute;z-index:5;transform:translate(-50%,-50%);border:3px solid #fff;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-touch-callout:none}
.tw-note{width:44px;height:44px;border-radius:50%;padding:0;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#bfe8ff 0,#4fb6ff 55%,#2a86e0 100%);box-shadow:0 4px 12px rgba(20,70,150,.4);animation:tw-note-bob 2.4s ease-in-out infinite}
.tw-note svg{width:24px;height:24px;fill:#fff;stroke:#fff;stroke-width:2.2;stroke-linejoin:round}
.tw-note svg path{fill:none}
@keyframes tw-note-bob{0%,100%{margin-top:0}50%{margin-top:-4px}}
.tw-invite{display:flex;align-items:center;gap:8px;padding:9px 16px 9px 12px;border-radius:999px;background:#fff;color:#1f6fd1;font:700 15px/1 Poppins,system-ui,sans-serif;white-space:nowrap;box-shadow:0 6px 18px rgba(20,70,150,.32),0 0 0 4px rgba(150,215,255,.55)}
.tw-invite svg{width:22px;height:22px;fill:none;stroke:#1f6fd1;stroke-width:2;stroke-linejoin:round}
.tw-invite:hover{background:#f2f9ff}
.tw-note:focus-visible,.tw-invite:focus-visible{outline:3px solid #1f6dff;outline-offset:3px}
html.calm .tw-note{animation:none}
/* Map heading and the town "Welcome to" card (her words) */
.mp-welcome{position:absolute;left:50%;top:max(12px,env(safe-area-inset-top));transform:translateX(-50%);z-index:4;margin:0;max-width:calc(100vw - 440px);text-align:center;background:rgba(255,255,255,.92);color:#5b21b6;font:700 clamp(14px,1.8vw,22px)/1.25 Poppins,system-ui,sans-serif;padding:9px 20px;border-radius:999px;box-shadow:0 3px 10px rgba(91,33,182,.2)}
@media (max-width:820px){.mp-welcome{top:calc(max(10px,env(safe-area-inset-top)) + 54px);max-width:calc(100vw - 24px);border-radius:18px;padding:7px 14px}}
.tw-about{position:absolute;left:max(12px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));z-index:20;display:flex;align-items:flex-end;gap:8px;pointer-events:none}
.tw-about>*{pointer-events:auto}
.tw-about-pin{width:46px;height:46px;flex:0 0 46px;border-radius:50%;border:3px solid #fff;background:var(--c,#9b5de5);font-size:22px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.25);padding:0}
.tw-about:not(.tucked) .tw-about-pin{display:none}
.tw-about-card{position:relative;width:min(300px,calc(100vw - 90px));background:rgba(255,255,255,.95);border-radius:18px;border:3px solid var(--c,#9b5de5);box-shadow:0 6px 16px rgba(30,20,60,.22);padding:10px 30px 11px 14px;animation:tw-about-in .4s cubic-bezier(.2,.8,.2,1)}
.tw-about.tucked .tw-about-card{display:none}
.tw-about-card h2{margin:0 0 4px;font:700 15px/1.2 Poppins,system-ui,sans-serif;color:#2a2350}
.tw-about-card p{margin:0;font:600 13px/1.45 Poppins,system-ui,sans-serif;color:#3b3363}
.tw-about-x{position:absolute;right:2px;top:2px;width:40px;height:40px;border:0;border-radius:50%;background:#f1ecff;padding:0;display:grid;place-items:center;cursor:pointer}
.tw-about-x svg{width:14px;height:14px;fill:none;stroke:#5b21b6;stroke-width:3;stroke-linecap:round}
.tw-about-pin:focus-visible,.tw-about-x:focus-visible{outline:3px solid #1f6dff;outline-offset:2px}
@keyframes tw-about-in{from{transform:translateY(16px) scale(.95);opacity:0}to{transform:none;opacity:1}}
html.calm .tw-about-card{animation:none}
.mp-rainbow{font-weight:800;letter-spacing:.02em;-webkit-text-stroke:.6px rgba(255,255,255,.6);text-shadow:0 1px 0 rgba(0,0,0,.08)}

.mp-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:40;padding:14px 26px;border-radius:999px;background:#fff;border:4px solid #44b8ff;color:#2a5fb0;font:800 22px/1.2 "Baloo 2","Trebuchet MS",system-ui,sans-serif;box-shadow:0 8px 20px rgba(30,90,180,.3)}