@font-face{font-family:Baloo;src:url('../../kit/fonts/baloo2-pilot.ttf');font-display:swap}*{box-sizing:border-box}html,body{margin:0;color:#102b3d;font-family:Baloo,system-ui,sans-serif}body{min-height:100svh;background:#087c88 url('world.webp') center/cover fixed}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:#102b3d}header{height:44px;padding:0 12px;background:#073e35;color:white;display:flex;align-items:center;justify-content:space-between}header a{color:white;min-width:44px;min-height:44px;display:flex;align-items:center;text-decoration:none}header span{font-size:14px}main{max-width:1300px;margin:auto;padding:5px 10px}.book{font-size:12px;line-height:1.1;margin:0;background:#fff6d6;width:fit-content;padding:2px 4px}h1{font-size:24px;line-height:1.05;margin:3px 0;background:#fff6d6;width:fit-content;padding:3px 5px;max-width:100%}#world{position:relative}.guide-scene{height:139px;position:relative}#guide{position:absolute;left:-4px;top:0;width:100px;height:139px;object-fit:contain;filter:drop-shadow(0 4px 3px #102b3d66);transition:transform .2s}.happy #guide{transform:rotate(-5deg)}.bubble{position:absolute;right:0;top:5px;width:calc(100% - 98px);border:2px solid #102b3d;border-radius:16px;background:#fff2ae;padding:8px;z-index:2}#speech{font-size:17px;line-height:1.12;margin:0}#feedback{margin:5px 0 0;font-size:15px;line-height:1.15}#feedback:empty{display:none}#progress{background:#073e35;color:white;border-radius:20px;padding:1px 10px;font-size:14px;line-height:1.1;margin:0 0 2px auto;width:fit-content}.stations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;align-items:end}.station{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:110px;min-width:0;border:0;background:transparent;padding:0;touch-action:manipulation}.station img{width:100%;height:72px;object-fit:contain;filter:drop-shadow(0 5px 3px #102b3d66);pointer-events:none}.station span{background:#fff6d6;border:2px solid #102b3d;border-radius:9px;padding:4px;font-size:15px;line-height:1.1;display:block;width:100%;overflow-wrap:anywhere}.station.done span{background:#bdf5ac}.tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:8px 0}.piece{min-width:0;min-height:92px;background:#fff6d6;border:2px solid #102b3d;border-radius:12px;padding:3px;line-height:1.1;font-size:14px;touch-action:none;user-select:none}.piece img{display:block;width:100%;height:48px;object-fit:contain;pointer-events:none}.piece[aria-pressed=true]{background:#ffdb40;outline:3px solid #102b3d;outline-offset:1px}.piece:disabled{opacity:1;background:#bdf5ac}.piece:disabled img{opacity:.55}.over img{transform:translateY(-6px)}button:focus-visible,a:focus-visible{outline:3px solid white;outline-offset:2px;box-shadow:0 0 0 5px #102b3d}.ghost{position:fixed;width:90px;height:90px;object-fit:contain;pointer-events:none;z-index:40;transform:translate(-50%,-50%) rotate(-8deg)}#ending{padding:16px;background:#fff2ae;border:3px solid #102b3d;border-radius:24px;text-align:center;position:relative;margin-top:15px}#ending h2{font-size:28px;line-height:1.1;margin:0 0 10px}#ending p{font-size:19px;line-height:1.15;margin:7px 0 14px}.actions{display:flex;gap:8px;justify-content:center}.actions>*{background:#073e35;color:white;border:2px solid #102b3d;border-radius:12px;min-height:48px;padding:7px;font:18px Baloo,system-ui;text-decoration:none;display:flex;align-items:center;justify-content:center}.party{width:56px;height:56px;object-fit:contain}.skip{position:fixed;top:-100px;background:white;padding:12px;z-index:50}.skip:focus{top:0}[hidden]{display:none!important}#finish{min-height:44px;padding:5px 14px;border:2px solid #102b3d;border-radius:12px;background:#073e35;color:white;font-size:18px;display:block;margin:6px auto}.spark{position:absolute;top:0;right:0;width:35px!important;height:35px!important}.reveal .stations{grid-template-columns:repeat(2,minmax(0,1fr))}.game-prompt{background:#fff2ae;border:2px solid #102b3d;border-radius:10px;padding:7px;margin:0 0 4px;font-size:17px;line-height:1.1}.game .station[aria-pressed=true]{outline:3px solid #ffdb40}.game-token{display:block;width:65px;height:65px;object-fit:contain;margin:6px auto;touch-action:none}.game-controls{display:flex;gap:5px;justify-content:center}.game-controls button{min-height:44px;padding:5px 12px;background:#fff2ae;border:2px solid #102b3d;border-radius:10px}.many .station img{height:49px}.many .station{min-height:90px}.many .station span{font-size:14px}.many .piece{font-size:13px}.many .guide-scene{height:130px}.complete #progress{display:none}
@media(min-width:800px){main{padding:12px 20px}.book{font-size:16px}h1{font-size:36px}#world{min-height:650px}.guide-scene{position:absolute;width:30%;top:20px;height:600px}#guide{top:180px;width:100%;height:390px}.bubble{top:0;width:100%;font-size:24px}#speech{font-size:24px}#feedback{font-size:21px}#play,#ending{position:absolute;top:45px;right:0;width:66%}#progress{font-size:20px}.station{min-height:180px}.station img,.many .station img{height:140px}.station span,.many .station span{font-size:21px}.tray{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.piece,.many .piece{font-size:19px;min-height:130px}.piece img{height:85px}.many .guide-scene{height:600px}.game-prompt{font-size:24px}.game-token{height:100px;width:100px}.game-controls button{font-size:22px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.game .tray{display:block}

/* Compact outcome card: keep scene and reacting guide above the controls. */
#ending{position:fixed;top:auto;bottom:12px;left:12px;right:12px;width:auto;max-width:480px;margin:0 auto;padding:12px;background:#fff3c4;border:3px solid #102b3d;border-radius:18px;text-align:center;z-index:20;max-height:35svh}
#ending h2{font-size:17px;line-height:21px;margin:0 0 10px;font-weight:600}
#ending .actions{display:flex;flex-direction:row;justify-content:center;gap:8px}
#ending .actions>*{min-width:48px;min-height:48px;font-size:18px;line-height:22px;padding:7px 10px;background:#073e35;color:#fff;border:2px solid #102b3d;border-radius:12px;text-decoration:none;display:flex;align-items:center;justify-content:center}
#ending>img,#ending>p{display:none}
body:has(#ending:not([hidden])) #guide{position:fixed;left:28px;top:auto;bottom:calc(35svh + 24px);width:145px;height:230px;object-fit:contain;transform:rotate(-4deg)}
body:has(#ending:not([hidden])) .speech,body:has(#ending:not([hidden])) .bubble,body:has(#ending:not([hidden])) #speech{visibility:hidden}
@media(min-width:800px){body:has(#ending:not([hidden])) #guide{left:calc(50% - 330px);bottom:calc(35svh + 24px);width:260px;height:350px}}

/* Four-card match layout at narrow widths. */
@media(max-width:799px){.guide-scene{height:120px}#guide{height:100px;width:72px}.station{min-height:70px}.station img{height:33px}.tray{grid-template-columns:repeat(2,minmax(0,1fr))}.piece{min-height:80px}.piece img{height:36px}}