/* The puzzle is a physical scene. Shared wooden navigation stays unchanged. */
:root{--ink:#49321f;--cream:#fff6dc;--shadow:0 8px 14px #4d351b30;--focus:#775192}
#game{background-image:url('assets/scene-landscape.webp');min-height:540px}
#adventure{height:100%;display:grid;grid-template-rows:88px 88px minmax(0,1fr) 88px}
.topline{height:auto;padding:12px 26px 0 320px;gap:12px}
.topline h1{font-size:27px;text-shadow:0 2px #fff6d9}
.topline #stars{background:#fff4d9e8;padding:7px 12px;border-radius:24px;box-shadow:0 3px 9px #4b352323}
.star{width:30px;height:30px}
.guide{height:auto;max-width:750px;width:max-content;max-width:calc(100% - 36px);gap:4px;position:relative;z-index:2}
.guide button{width:90px;height:90px}
.guide>div{min-width:0;max-width:610px;padding:13px 24px;border-radius:35% 20% 24% 35% / 40% 35% 40% 40%;background:#fff7e1;box-shadow:0 6px 14px #523c2229}
.guide h2{font-size:25px;line-height:1.15}.guide p{font-size:16px;min-height:0}.guide p:empty{display:none}
.play-area{height:100%;min-height:0;max-height:none;width:100%;max-width:1240px;padding:8px 36px;gap:26px;align-items:center}
.play-area #board{width:76%;height:100%;min-height:0;max-height:none;gap:14px;justify-content:center}
.resident{display:block;width:22%;max-width:265px;position:relative;align-self:center;flex-shrink:0}
.resident>img{height:auto;max-height:310px;filter:drop-shadow(0 9px 6px #4a341f30)}
.resident>span{font-size:24px;background:#fff2d6;display:inline-block;padding:4px 22px;border-radius:16px;box-shadow:var(--shadow)}
.resident #friends{display:none}
.actions{height:88px;gap:18px;padding:0 0 max(8px,env(safe-area-inset-bottom));z-index:3}
.small-action{background:#ffedc9;color:#604125;box-shadow:inset 0 -4px #d1ac73,0 5px 8px #49331c35}
.art-button{width:78px;height:78px}.small-action:disabled{opacity:.6}
.prop{object-fit:contain;pointer-events:none;user-select:none}
#game[data-kind='choice'] .resident,#game[data-kind='mail'] .resident{display:none}
#game[data-kind='choice'] #board,#game[data-kind='mail'] #board{width:100%}
.post-office{display:grid;grid-template-columns:1.08fr 3fr;gap:24px;width:100%;height:100%;max-height:520px;align-items:stretch}
.postmaster{position:relative;min-width:0;height:100%;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:5px}
.postmaster-bird{width:100%;height:68%;object-fit:contain;filter:drop-shadow(0 8px 8px #4c36152d)}
.postmaster .envelope{flex-shrink:0;width:85%;height:26%;max-height:135px;min-height:66px;transform:rotate(-5deg)}
.envelope,.letter{background:url('assets/prop-envelope.webp') center/112% 116% no-repeat;border:0;border-radius:5px;box-shadow:0 8px 10px #402e2230;padding:12px;display:flex;align-items:center;justify-content:center;touch-action:none}
.envelope .clues{width:100%;height:100%;gap:12px}
.clue{background:transparent;box-shadow:none;border-radius:0;width:65px;height:65px}
.clue>img{width:100%;height:100%;object-fit:contain}.clue.portrait{width:90px;height:90px}
.clue.no-roof:after{height:5px;background:#654535;box-shadow:0 1px #fff8}
.options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.mail-stop{position:relative;display:block;border:0;background:none;box-shadow:none;padding:0;min-width:0;height:100%;border-radius:24px;isolation:isolate;transition:transform .18s ease-out}
.mail-stop:active:not(:disabled){transform:translateY(3px)}
.mail-stop .mail-roof{position:absolute;width:100%;height:64%;left:0;top:4%;object-fit:contain;z-index:0;filter:drop-shadow(0 5px 4px #62451d25)}
.mail-stop .mail-bird{position:absolute;top:15%;left:5%;width:90%;height:44%;object-fit:contain;z-index:2;filter:drop-shadow(0 5px 4px #392b2133)}
.mail-stop .mail-prop{position:absolute;bottom:0;left:14%;width:72%;height:46%;object-fit:contain;z-index:3;filter:drop-shadow(0 6px 5px #5b371e35)}
.mail-emblem{position:absolute;bottom:20%;left:39%;width:22%;height:14%;z-index:4}.mail-emblem>img{width:100%;height:100%}
.mail-stop .bird-name{position:absolute;bottom:12%;left:20%;width:60%;z-index:4;font-size:20px;color:#3e2514;font-weight:600;background:#ffe8b7;border-radius:8px;padding:2px 0;text-shadow:none}
.mail-stop.selected{outline:none;background:none!important;transform:translateY(-7px)}
.mail-stop.selected:after{content:'';position:absolute;left:7%;right:7%;height:9px;bottom:-5px;background:#f3c657;border-radius:50%;box-shadow:0 5px 8px #84562240}
.mail-stop:focus-visible{outline:4px solid var(--focus);outline-offset:3px}
.mail-stop .delivered-letter{position:absolute;z-index:5;width:53%;height:19%;left:24%;bottom:29%;transform:rotate(-7deg);border-radius:4px;transition:transform .4s ease-out}
.mail-stop.delivered .delivered-letter{transform:translateY(14px) scale(.6);opacity:.85}
.letters{display:flex;flex-wrap:wrap;gap:8px;width:100%;justify-content:center;flex-shrink:0}
.letter{width:calc(50% - 5px);min-width:60px;min-height:64px;height:70px;position:relative;padding:8px}
.letter .clues{gap:4px}.letter .clue{width:30px;height:36px}.letter .mini-bird{position:absolute;right:-7px;bottom:-5px;width:40px;height:40px;filter:drop-shadow(0 2px 2px #fff)}
.letter.assigned{opacity:.6}.letter.selected{outline:3px solid #81609b;outline-offset:1px;background-image:url('assets/prop-envelope.webp')!important}
.drag-letter{position:fixed;width:110px;height:76px;z-index:800;pointer-events:none;background:url('assets/prop-envelope.webp') center/cover;border-radius:5px;filter:drop-shadow(0 8px 7px #42302244)}
.mail-stop.drop-target{outline:4px dashed #f1ca68;outline-offset:-3px}
.flight{flex:none;width:auto;height:min(100%,510px);max-width:100%;aspect-ratio:1;background:none;border-radius:0;box-shadow:none}
.flight>svg{filter:drop-shadow(0 2px 2px #fff6)}
.path-line{stroke:#fff6dc;stroke-width:1.6;stroke-dasharray:1.5 2.4}.path-line.active{stroke:#ad7549;stroke-width:2.3;stroke-dasharray:none}
.node{width:65px;height:65px;background:none;box-shadow:none;border-radius:0}.node>.prop{width:90px;height:80px;max-width:none;filter:drop-shadow(0 5px 4px #4b42232f)}
.node img:not(.prop){width:87px;height:87px;filter:drop-shadow(0 4px 3px #4136222c)}
.node.cloud,.node.goal{background:none}.node.cloud>.prop{width:100px;height:85px}
.node.sign{background:#d3a363 url('assets/prop-mailbox.webp') center 35%/135% 320%;border:3px solid #edcb8d;border-radius:50%;outline:none;box-shadow:0 5px 7px #5139213a;color:#54371e;width:62px;height:62px}
.node.gate{background:#e4c18a;border:3px solid #987349;border-radius:18px}.node.gate.visited{opacity:.45}
.node.start.visited{background:none}.flyer{width:102px;height:102px}
.slider-wrap{padding:16px;border:5px solid #ddb677;background:#bc814d url('assets/prop-mailbox.webp') center/cover;border-radius:26px;max-height:440px;height:calc(100% - 78px);box-shadow:0 12px 20px #50301c40}
.slider{background-color:#f6e7c8;background-image:linear-gradient(#bfa47a50 1px,transparent 1px),linear-gradient(90deg,#bfa47a50 1px,transparent 1px);box-shadow:inset 0 3px 8px #72552c30}
.piece,.piece.v,.piece:nth-child(3){background:#dbac74 url('assets/prop-mailbox.webp') center 35%/140% 330%;box-shadow:inset 0 3px #ffeac0,0 4px 5px #64452e40;border-radius:14px}
.piece.target{background:#fff0d0}.piece>.prop{width:80%;height:82%;max-width:110px;object-fit:contain}.piece.h:not(.target)>.prop{transform:rotate(90deg);height:115%;max-width:80px}
.piece.active-piece{outline-color:#81578e}.move-tools{position:static;flex-direction:row}.move-tools button{background:#ffebc3;box-shadow:inset 0 -4px #bf945c,0 4px 7px #64452835}
.rules{margin:0;gap:14px}.rule{padding:4px 16px;background:#fff1d9;border-radius:25px}.rule>img{width:52px;height:52px}.rule>.prop{width:55px;height:55px}
.seat-area{height:55%;min-height:135px;padding:0;gap:18px;align-items:stretch}
.seat{height:100%;width:31%;max-width:240px;background:none;border:0;border-radius:20px;box-shadow:none;isolation:isolate}
.seat .seat-nest{position:absolute;width:100%;height:40%;bottom:0;left:0;z-index:1}
.seat .seated-bird{position:absolute;width:82%;height:64%;bottom:14%;left:9%;z-index:2;filter:drop-shadow(0 4px 4px #45352635)}
.seat .roof{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;filter:drop-shadow(0 4px 3px #63422422)}
.seat.selected{background:transparent!important;outline:3px dashed #b07e38}.seat:disabled{opacity:1}.seat:not(:has(.seated-bird)):after{content:'';position:absolute;left:25%;right:25%;bottom:18%;height:28%;border:3px dashed #a07845;border-radius:50%;z-index:2}
.bird-bank button{width:105px;height:105px;background:none;box-shadow:none;border-radius:50%;filter:drop-shadow(0 6px 4px #64452730)}.bird-bank button.selected{background:#fff2d499!important}
.story-row{gap:18px}.story-card{width:32%;max-width:280px;border:7px solid #ffe9b8;border-radius:13px;box-shadow:0 7px 12px #43302144;transform:rotate(-2deg)}.story-card:nth-child(2){transform:rotate(2deg)}
.story-slots{gap:18px}.story-slot{width:32%;max-width:250px;border:3px dashed #a17b4c;background:#fff1d4d9;border-radius:12px}
.story-context img{width:140px;height:140px;border:5px solid #ffe9b8;border-radius:12px;box-shadow:0 5px 8px #48302130}
.story-context .missing{background:#fff1d5;border:3px dashed #aa824c}
.board-note{background:#fff0d5;color:#51391f;font-size:16px}
.text-button{background:#ead3a7;box-shadow:inset 0 -4px #c6a16a,0 5px 9px #45322525;color:#48301c;font-weight:600}
dialog{background:#fff3d9;box-shadow:0 18px 60px #35271d70;border:8px solid #d3a468;border-radius:32px;scrollbar-color:#c6a16a #fff3d9}
dialog h2{color:#51351d}dialog .cast{max-width:620px}.cast button{width:90px;height:100px}
.chapter-menu button{background:#f5e5c5;box-shadow:inset 0 -5px #ddc294;min-height:155px}.chapter-menu img{height:100px;width:110px}
.reward-art{width:330px;height:270px}.panel-sound{color:#604228}
.success .postmaster-bird,.success .seated-bird{animation:happy-hop .55s ease-out}
.success .guide>div{background:#ffefbb}
@keyframes happy-hop{45%{transform:translateY(-14px) rotate(-3deg)}100%{transform:none}}
#game[data-state='paused'] .actions{visibility:hidden}
@media(orientation:portrait){
 #game{background-image:url('assets/scene-portrait.webp')}
 #adventure{grid-template-rows:112px 76px minmax(0,1fr) 80px}
 .topline{padding:70px 16px 0;height:auto}.topline h1{font-size:21px}.chapter-portrait{display:none}.topline #stars{padding:4px 7px}.star{width:24px;height:24px}
 .guide{width:calc(100% - 24px);max-width:680px;margin:0 auto}.guide button{width:72px;height:72px}.guide>div{flex:initial;max-width:calc(100% - 74px);padding:10px 17px}.guide h2{font-size:22px}.guide p{font-size:14px}
 .play-area{padding:10px 22px;gap:12px;max-width:900px}.play-area #board{width:100%;gap:12px}
 .resident{display:none}
 .post-office{grid-template-columns:1fr 3fr;gap:18px;max-height:440px}.options{gap:12px}
 .mail-stop .bird-name{font-size:21px}.postmaster-bird{height:58%}.postmaster .envelope{height:22%;width:100%}
 .actions{height:80px;gap:16px}.art-button{width:72px;height:72px}
 .flight{width:min(100%,calc(100dvh - 310px));height:auto;max-height:100%;min-height:0}
 .slider-wrap{max-height:470px;max-width:calc(100% - 24px);height:calc(100% - 76px);padding:13px}.piece>.prop{max-width:110px}
 .seat-area{height:57%;max-height:320px}.rule>img{width:45px;height:45px}.rule>.prop{width:48px;height:48px}.bird-bank button{width:90px;height:90px}
 .story-context img{width:115px;height:115px}.story-row,.story-slots{gap:12px}.story-card{border-width:5px}
 .chapter-menu img{height:72px;width:85px}.chapter-menu button{min-height:115px}.reward-art{height:210px}
}
@media(max-width:600px) and (orientation:portrait){
 #adventure{grid-template-rows:106px 76px minmax(0,1fr) 76px}
 .topline{padding:69px 12px 0}.topline h1{font-size:19px}.star{width:22px;height:22px}
 .guide{width:calc(100% - 16px)}.guide button{width:60px;height:65px}.guide>div{max-width:calc(100% - 64px);padding:10px 14px}.guide h2{font-size:19px}.guide p{font-size:13px}
 .play-area{padding:5px 16px;gap:0}.play-area #board{gap:10px}
 .post-office{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px 20px;max-height:650px}.post-office .options{display:contents}
 .postmaster{gap:0}.postmaster-bird{height:62%;width:100%}.postmaster .envelope{height:34%;width:90%;min-height:48px;max-height:92px;padding:5px}
 .clue{width:39px;height:40px}.clue.portrait{width:60px;height:60px}.envelope .clues{gap:8px}
 .mail-stop .mail-roof{height:86%;top:0;object-fit:fill}.mail-stop .mail-bird{height:45%;top:16%}.mail-stop .mail-prop{height:47%;width:66%;left:17%}.mail-emblem{bottom:21%;width:19%;left:40%;height:14%}.mail-stop .bird-name{font-size:16px;bottom:8%;left:23%;width:54%;padding:0}
 .mail-stop.selected{transform:translateY(-3px)}
 .letters{gap:3px;flex-wrap:nowrap}.letter{width:33%;min-width:44px;height:50px;min-height:48px;padding:3px}.letter .clue{width:19px;height:26px}.letter .clues{gap:0}.letter .mini-bird{width:28px;height:28px;right:0;bottom:-8px}
 .actions{height:76px;gap:14px}.art-button{width:68px;height:68px}.small-action{width:54px;height:54px}
 .flight{width:min(calc(100% - 18px),calc(100dvh - 305px))}.node.sign{width:54px;height:54px}.node>.prop{width:70px;height:62px}.node img:not(.prop){width:70px;height:70px}.node.cloud>.prop{width:77px;height:65px}.flyer{width:78px;height:78px}
 .slider-wrap{padding:10px;max-height:380px;height:calc(100% - 68px)}.move-tools button{width:54px;height:54px}
 .rules{gap:5px}.rule{padding:3px 7px;gap:3px}.rule>img{width:35px;height:35px}.rule>.prop{width:38px;height:38px}.rules svg{width:24px}
 .seat-area{height:47%;min-height:135px;gap:6px}.bird-bank{gap:12px}.bird-bank button{width:78px;height:78px}
 .story-row,.story-slots{gap:8px}.story-card{width:32%;border-width:4px}.story-slot{width:32%}.story-context img{width:85px;height:85px}.board-note{font-size:13px}
 dialog{padding:14px;border-width:5px;max-width:94vw;border-radius:25px}dialog h2{font-size:24px}.chapter-menu{gap:8px}.chapter-menu button{font-size:15px;min-height:105px}.chapter-menu img{height:62px;width:75px}.chapter-menu small{font-size:12px}.text-button{font-size:16px;min-height:50px;padding:10px 16px}.cast button{width:65px;height:78px}.reward-art{height:180px;width:240px}
}
@media(max-height:680px) and (orientation:landscape){#adventure{grid-template-rows:78px 65px minmax(0,1fr) 74px}.guide button{height:66px;width:66px}.guide h2{font-size:21px}.guide>div{padding:9px 18px}.resident>img{max-height:200px}.actions{height:74px}.art-button{height:65px;width:65px}.postmaster .envelope{min-height:52px}.mail-stop .bird-name{font-size:17px}.slider-wrap{height:100%;max-width:330px}.move-tools{position:absolute;right:0;flex-direction:column}.story-context img{height:70px;width:70px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.success .piece.target{transform:translateX(15%);transition:transform .5s ease-out}.postmaster-bird{animation:soft-arrival .55s ease-out}@keyframes soft-arrival{from{opacity:.6;transform:translateY(10px)}to{opacity:1;transform:none}}

.demo-stage{height:260px;min-height:0;gap:20px;margin-bottom:12px}.demo-stage .mail-stop{width:165px;height:245px;flex-shrink:0}.demo-stage .envelope{width:160px;height:105px}.demo-stage .mail-stop.selected{transform:none}.demo-stage .mail-stop .bird-name{font-size:17px}.demo-stage .mail-stop .mail-prop{width:66%;left:17%}@media(max-height:700px){.demo-stage{height:210px}.demo-stage .mail-stop{height:205px;width:135px}.demo-stage .envelope{width:120px;height:90px}}

.topline #stars{background:#765339;box-shadow:inset 0 2px 3px #41281755,0 3px 6px #48322030}.topline h1{background:#fff2d8ed;padding:5px 14px;border-radius:12px;width:max-content}.slider-wrap,.piece,.piece.v,.piece:nth-child(3){background-size:190% 680%;background-position:50% 43%}.piece.target{background:#fff0d0}#game[data-kind='flight']{background-image:url('assets/world-landscape.webp')}@media(orientation:portrait){#game[data-kind='flight']{background-image:url('assets/world-portrait.webp')}}@media(max-width:600px){.topline h1{padding:4px 8px;font-size:17px}}

.postmaster-bird{animation:none}@media(max-width:600px){dialog:has(.chapter-menu){padding:12px}dialog:has(.chapter-menu) h2{font-size:22px;margin-bottom:8px}.chapter-menu{margin:8px 0;gap:6px}.chapter-menu button{height:96px;min-height:96px;padding:4px 6px;font-size:14px;line-height:1.05}.chapter-menu img{height:43px;width:62px}.chapter-menu small{font-size:11px;margin-top:3px}dialog:has(.chapter-menu) .panel-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px}dialog:has(.chapter-menu) .text-button{min-height:48px;padding:7px;font-size:13px}dialog:has(.chapter-menu) .panel-sound{margin:4px auto 0;min-height:48px}}

.type-order{container-type:size}.type-order .story-card,.type-order .story-slot{width:min(31%,calc((100cqh - 66px)/2));max-height:calc((100cqh - 66px)/2)}
/* Keep the guide in an instruction panel, separate from the birds in the scene. */
.guide{justify-self:start;justify-content:flex-start;margin:0 36px;width:max-content;max-width:calc(100% - 72px);padding:4px 18px 4px 5px;background:#fff7e1;border-radius:24px;gap:10px;box-shadow:0 4px 10px #523c221a}
.guide button{width:76px;height:76px;flex-shrink:0;overflow:hidden;border-radius:50%;background:#f4e8cd}
.guide button img{width:118%;height:118%;max-width:none;object-fit:contain;transform:translate(-7%,-4%)}
.guide>div{background:none;box-shadow:none;border-radius:0;padding:6px 0;max-width:600px}
.post-office{gap:40px;max-height:440px}
.options{gap:32px}
.mail-stop .mail-bird{width:76%;left:12%;height:38%;top:20%}
.mail-stop .mail-roof{width:90%;left:5%;height:60%;top:8%}
.postmaster-bird{width:86%;height:58%}
@media(orientation:portrait){.guide{margin:0 22px;max-width:calc(100% - 44px);padding-right:16px}.guide button{width:66px;height:66px}.guide>div{max-width:calc(100% - 76px)}.post-office{gap:28px}.options{gap:22px}}
@media(max-width:600px) and (orientation:portrait){.guide{margin:0 16px;max-width:calc(100% - 32px);gap:8px;border-radius:20px}.guide button{width:60px;height:60px}.guide>div{max-width:calc(100% - 68px)}.guide h2{font-size:18px}.post-office{gap:18px 30px;max-height:610px}.mail-stop .mail-roof{height:80%;top:4%;object-fit:contain}.mail-stop .mail-bird{height:39%;top:20%}.postmaster-bird{width:86%;height:58%}}
@media(max-height:680px) and (orientation:landscape){.guide button{width:54px;height:54px}.guide{margin-left:28px}.post-office{gap:28px}.options{gap:20px}}
/* Audit fixes: long instructions must wrap; props stay inside their sliding pieces. */
#adventure{grid-template-rows:88px minmax(88px,auto) minmax(0,1fr) 88px}
.guide{width:fit-content;height:auto;min-width:0}
.guide>div{flex:1;min-width:0;max-width:none}
.guide h2,.guide p{overflow-wrap:anywhere}
.piece{display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden}
.piece>.prop{width:80%;height:80%;min-height:0;min-width:0;display:block}
.piece.h:not(.target)>.prop{width:40%;height:85%;max-width:none;transform:rotate(90deg)}
@media(orientation:portrait){#adventure{grid-template-rows:112px minmax(76px,auto) minmax(0,1fr) 80px}.guide>div{max-width:none}}
@media(max-width:600px) and (orientation:portrait){#adventure{grid-template-rows:106px minmax(76px,auto) minmax(0,1fr) 76px}.guide>div{max-width:none}}
@media(max-height:680px) and (orientation:landscape){#adventure{grid-template-rows:78px minmax(65px,auto) minmax(0,1fr) 74px}}
/* Vito is already the moving actor on this board; do not duplicate him beside it. */
#game[data-kind='flight'][data-chapter='1'] .resident{display:none}
#game[data-kind='flight'][data-chapter='1'] #board{width:100%}
/* Tall phones must show the whole story composition, including Aro's face. */
@media(orientation:portrait) and (max-aspect-ratio:3/5){
 #opening{overflow:hidden;background:#bddbdd}
 #opening picture:before{content:'';position:absolute;inset:-20px;background:url('assets/opening-portrait.webp?v=lula2') center/cover;filter:blur(16px)}
 #opening picture img{position:relative;object-fit:contain}
}

.panel-volume{width:32px;height:32px;object-fit:contain}