:root { --navy:#285d81; --cream:#fff7dd; --sun:#f6d471; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
html,body { position:fixed; inset:0; width:100%; height:100%; margin:0; overflow:hidden; touch-action:none; overscroll-behavior:none; }
body { background:#a9c794; font-family:"Comic Sans MS","Segoe Print","Chalkboard SE",sans-serif; }
button,a { touch-action:none; } button { cursor:pointer; font:inherit; } button:focus-visible,a:focus-visible { outline:4px solid #ecaa54; outline-offset:4px; }
[hidden] { display:none !important; }
.frame { position:fixed; inset:0; } .stage { position:absolute; left:50%; top:50%; width:1600px; height:900px; transform-origin:center; overflow:hidden; touch-action:none; }
.definitions { position:absolute; width:0; height:0; }
.sky,.golden-sky { position:absolute; inset:0; background:linear-gradient(#abd9e8,#f3f1cf 62%); }
.golden-sky { background:linear-gradient(#f0c88f,#fff1c4 61%); opacity:0; }
.sun { position:absolute; width:104px; height:104px; left:1120px; top:100px; border-radius:50%; background:#fff0ab; box-shadow:0 0 0 22px #ffe9a240,0 0 80px #fff0aa55; }
.scenery { position:absolute; inset:0; pointer-events:none; will-change:transform; }
.scenery svg { position:absolute; overflow:visible; }
.ground { position:absolute; top:430px; bottom:0; width:100%; background:linear-gradient(#b7d69a,#93bc80 67%,#a6c685); }
.lake-water { position:absolute; top:450px; height:193px; width:100%; background:repeating-linear-gradient(0deg,#afd6ce 0 30px,#c5e1d3 32px 35px,#afd6ce 38px 55px); border-radius:50% 50% 0 0; opacity:0; }
#landmark { position:absolute; left:730px; top:202px; width:285px; height:285px; pointer-events:none; opacity:.83; }
#landmark svg { width:100%; height:100%; }
#platform { position:absolute; top:354px; left:695px; width:865px; height:330px; pointer-events:none; }
.canopy { position:absolute; top:0; left:40px; width:535px; height:80px; border-radius:60% 60% 8px 8px; background:#e1a28b; border:6px solid #b78e77; box-shadow:0 12px #f4d9af; }
.canopy::before,.canopy::after { content:""; position:absolute; top:78px; width:13px; height:219px; background:#ac9d7c; left:25px; }.canopy::after { left:auto; right:25px; }
.platform-edge { position:absolute; left:0; right:0; height:28px; bottom:0; border-radius:9px; background:#d9c4a0; border-top:10px solid #f4e4bd; }
.station-flag { position:absolute; right:65px; top:75px; height:130px; border-left:8px solid #aaa17c; }.station-flag::after { content:""; position:absolute; width:69px; height:47px; top:0; background:#edbd61; border-radius:0 20px 20px 0; }
.ballast { position:absolute; top:741px; width:100%; height:79px; background:#aeb29c; border-block:8px solid #bfc0a3; }
#sleepers { position:absolute; top:751px; height:58px; left:-80px; width:1760px; background:repeating-linear-gradient(90deg,transparent 0 48px,#9b927b 48px 65px,transparent 65px 80px); }
.rails { position:absolute; top:762px; height:32px; width:100%; border-top:7px solid #e3dfc8; border-bottom:7px solid #727e7c; box-shadow:0 5px #d3d7c0; }
#points { position:absolute; top:765px; left:720px; width:740px; height:38px; border-top:7px solid #d1d5bd; transform-origin:left; opacity:0; }
#events,#waiting { position:absolute; inset:0; pointer-events:none; }
.event,.waiter { position:absolute; width:200px; height:200px; padding:0; border:0; background:transparent; pointer-events:auto; }
.event svg,.waiter svg { width:100%; height:100%; overflow:visible; pointer-events:none; }
.event::before,.waiter::before { content:""; position:absolute; inset:10px; border:4px solid #fff5caa3; border-radius:50%; background:radial-gradient(ellipse,#fff6cf27,transparent 70%); box-shadow:0 0 22px #fff5c955; opacity:var(--glow,.6); pointer-events:none; }
.event.found::before { border-width:2px; opacity:.3; } .event.golden-event svg { width:100%; height:100%; }
.golden image { filter:sepia(1) saturate(2.3) drop-shadow(0 0 5px #ffd36a); }
.waiter { top:461px; width:160px; height:200px; } .waiter svg { padding:6px 13px; }
#train { position:absolute; left:0; top:555px; width:720px; height:235px; background:none; padding:0; border:0; transform-origin:520px 190px; }
#engine { position:absolute; width:256px; height:219px; left:463px; top:0; overflow:visible; pointer-events:none; }
.carriage { position:absolute; width:88px; height:142px; top:76px; transform-origin:50% 100%; pointer-events:none; }
.carriage .passenger { position:absolute; width:85px; height:105px; bottom:29px; left:0; object-fit:contain; transform-origin:50% 90%; }
.carriage svg { position:absolute; width:88px; height:82px; bottom:0; overflow:visible; }
.carriage.coe .passenger { bottom:20px; left:8px; transform-origin:70% 100%; }
#steam { position:absolute; inset:0; pointer-events:none; }.puff { position:absolute; left:636px; top:589px; width:39px; height:30px; border-radius:50%; background:#fff9e8; opacity:0; }
.foreground { top:802px; height:98px; background:linear-gradient(transparent,#81a96b65); }
#junction { position:absolute; top:205px; left:680px; width:540px; height:470px; }
.signpost { position:absolute; width:22px; height:442px; left:224px; top:0; border-radius:12px; background:#be9d75; box-shadow:inset -6px 0 #aa8a68; }
#arrows { position:absolute; left:0; top:0; display:flex; gap:16px; }
.route-arrow { position:absolute; width:340px; height:160px; border:0; background:#ffedbf; clip-path:polygon(0 6%,81% 6%,100% 50%,81% 94%,0 94%,7% 50%); filter:drop-shadow(0 5px 2px #9c85563d); padding:0 65px 0 45px; }
.route-arrow:nth-child(1) { top:0; left:0; background:#d5e6b6; }.route-arrow:nth-child(2) { top:156px; left:50px; background:#c6e5e0; }.route-arrow:nth-child(3) { top:312px; left:0; background:#f2d9a4; }
.route-arrow svg { height:140px; width:180px; pointer-events:none; }
#tunnelShade { position:absolute; inset:0; background:radial-gradient(ellipse at 40% 73%,#142e4210,#152d568f 75%); pointer-events:none; opacity:0; }
.tunnel-eyes { position:absolute; left:960px; top:286px; width:14px; height:20px; border-radius:50%; background:#fff0b7; box-shadow:33px 0 #fff0b7; }
.tunnel-stars { position:absolute; left:880px; top:130px; width:7px; height:7px; border-radius:50%; background:#f9eac2; box-shadow:160px 55px #f9eac2,-230px 63px #f9eac2,315px 151px #f9eac2,-400px -10px #f9eac2,53px 304px #f9eac2; }
#effects { position:absolute; inset:0; pointer-events:none; }.particle { position:absolute; width:35px; height:35px; opacity:0; }.flying-sticker { position:absolute; width:170px; height:170px; opacity:0; filter:drop-shadow(0 4px 4px #99784c33); }.party-balloon { position:absolute; width:95px; height:95px; opacity:0; }
#returnFade { position:absolute; inset:0; pointer-events:none; background:#fff3d4; opacity:0; }
.topbar { position:fixed; top:max(10px,env(safe-area-inset-top)); left:max(14px,env(safe-area-inset-left)); right:max(14px,env(safe-area-inset-right)); display:flex; justify-content:space-between; z-index:50; pointer-events:none; }
.pill,.round { pointer-events:auto; border:0; color:#fff; background:var(--navy); box-shadow:0 4px 10px #35576b29; cursor:pointer; font:inherit; }
.pill { display:grid; place-items:center; min-height:64px; min-width:64px; padding:0 22px; border-radius:999px; text-decoration:none; font-size:19px; align-self:flex-start; }
.round { flex:none; position:relative; width:64px; height:64px; padding:8px; border-radius:50%; display:grid; place-items:center; }
.round>svg { width:48px; height:48px; pointer-events:none; }.round[aria-pressed="false"]#sound::after { content:""; position:absolute; width:37px; height:3px; background:#f0bb9d; rotate:-45deg; border-radius:4px; }
.right-controls { display:flex; flex-direction:column; gap:6px; }.toot { position:fixed; bottom:max(12px,env(safe-area-inset-bottom)); right:max(14px,env(safe-area-inset-right)); width:88px; height:88px; background:var(--sun); z-index:50; }.toot>svg { width:70px; height:70px; }.toot.inviting { box-shadow:0 0 0 7px #ffecac88,0 0 0 14px #ffedb633,0 5px 15px #9a81443b; }
.round>.progress { position:absolute; inset:0; width:64px; height:64px; rotate:-90deg; fill:none; stroke:#ffedba30; stroke-width:3; }.progress #progressRing { stroke:#ffe19a; stroke-dasharray:182.213; stroke-dashoffset:182.213; stroke-linecap:round; }
#bookOverlay { position:fixed; inset:0; z-index:60; display:grid; place-items:center; background:#31506565; }
#bookCard { width:min(540px,calc(100vw - 24px)); padding:12px; border-radius:26px; background:#fff7df; box-shadow:0 12px 50px #23496740; border:3px solid #efddb5; }
.book-nav { display:flex; align-items:center; gap:8px; margin-bottom:10px; }.book-spacer { flex:1; }.place-tab { background:#c2d8a3; }.place-tab.complete { outline:4px solid #eec568; outline-offset:-3px; }.place-tab.complete::after { content:""; position:absolute; right:-3px; top:-4px; width:22px; height:22px; background:#e6b84b; clip-path:polygon(50% 0,62% 34%,100% 37%,71% 60%,80% 100%,50% 77%,18% 100%,29% 60%,0 37%,38% 34%); }
#bookGrid { display:grid; grid-template-columns:repeat(4,minmax(64px,1fr)); grid-template-rows:repeat(2,92px); gap:7px; }
.sticker-cell { position:relative; min-width:64px; min-height:64px; border:2px dashed #d9d5c0; border-radius:18px; padding:3px 9px 10px; background:#efeede; }
.sticker-cell svg { width:100%; height:72px; pointer-events:none; filter:grayscale(1) contrast(.15); opacity:.35; }.sticker-cell.found { border:2px solid #e6d6a5; background:#fffdf1; }.sticker-cell.found svg { filter:none; opacity:1; }.pips { display:flex; gap:4px; justify-content:center; position:absolute; bottom:5px; left:0; right:0; }.pips i { width:5px; height:5px; border-radius:50%; background:#c6a96b; }
#bookTabs { display:flex; justify-content:center; gap:8px; margin-top:10px; height:8px; }#bookTabs i { width:22px; height:6px; border-radius:4px; background:#d1d6bc; }#bookTabs i.current { background:#80a99d; }#bookTabs i.complete { background:#e7bd63; }
.rotate { display:none; position:fixed; inset:0; z-index:100; place-items:center; text-align:center; padding:28px; color:#fff; background:#1a2a44; font-size:clamp(20px,6vw,32px); }
@media (orientation:portrait) { .rotate { display:grid; } .frame,.topbar,.toot,#bookOverlay { display:none !important; } }
@media (prefers-reduced-motion:reduce) { .scenery { will-change:auto; }.party-balloon { display:none; } }