@font-face{font-family:FutureRounded;src:url("fonts/Fredoka.ttf") format("truetype");font-weight:300 700;font-stretch:75% 125%;font-display:swap}
:root{color-scheme:light;--ink:#04343e;--teal:#1babb2;--green:#129e5e;--red:#c33e36;font-family:FutureRounded,sans-serif;font-weight:650;color:var(--ink)}
*{box-sizing:border-box}body{margin:0;background:#ddf2ed}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:disabled{cursor:default}[hidden]{display:none!important}button:focus-visible,[tabindex]:focus-visible{outline:3px solid #06343e;outline-offset:5px}.instruction:focus-visible{outline:none}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}svg{fill:none;stroke:currentColor;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}.solid{fill:currentColor;stroke:none}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* One shared scale for lettering, icons, radii and characters; short/zoomed
   viewports scroll the board instead of squeezing touch targets or text. */
.scene{position:relative;isolation:isolate;width:100%;height:100dvh;min-height:390px;min-width:640px;overflow:hidden;container-type:size;--u:min(1cqw,1.8cqh);--nav:max(44px,6 * var(--u));--radius:calc(1.8 * var(--u))}
.background,.distant-town{position:absolute;z-index:-3;pointer-events:none;background:url('assets/snack-discovery-town-tablet-activity-background-v1.png') center/cover no-repeat}
.distant-town{inset:-30px;filter:blur(10px);z-index:-3}.background{inset:0;z-index:-2;mask-image:linear-gradient(transparent 47%,#000 62%)}
.glass{position:relative;border:1.5px solid #8cd4cb;border-radius:var(--radius,16px);background:linear-gradient(120deg,#f6fff5f5,#d8eee9f2 65%,#f5f1d8f2);box-shadow:inset 0 0 0 2px #ffffffd9,0 3px 3px #21858a61;transition:box-shadow 130ms,transform 130ms}.glass::after{content:'';position:absolute;inset:2px -2px -6px;border-radius:inherit;background:linear-gradient(105deg,#16cde6b8,#17aeb681 65%,#f3d849bd);filter:blur(5px);z-index:-1;opacity:0;transition:opacity 130ms}.glass:active{transform:translateY(3px);box-shadow:inset 0 3px 4px #177a7d55,0 1px 0 #1f969a}.glass:active::after{opacity:.8}
.nav{position:absolute;display:flex;align-items:center;justify-content:center;gap:calc(.8 * var(--u));height:var(--nav);font-size:max(18px,2.45 * var(--u));padding:calc(.6 * var(--u)) calc(1.3 * var(--u));z-index:5;white-space:nowrap}.nav svg{width:calc(3.2 * var(--u));height:calc(3.2 * var(--u));min-width:24px;min-height:24px;flex:none}.back{top:3%;left:2%;width:16%}.gear{top:3%;right:2%;width:var(--nav)}.gear svg{width:80%;height:80%}.next{right:3%;bottom:6%;width:19%}.forward{transform:rotate(180deg)}
.map-progress{position:absolute;left:35%;top:7%;width:34%;height:8.3%;z-index:3}.progress-art{position:absolute;inset:0;width:100%;height:100%;stroke:none;overflow:visible;filter:drop-shadow(0 1px 2px #24aeb266)}.rounds{position:absolute;inset:0;pointer-events:none}.rounds b{position:absolute;top:64%;transform:translateX(-50%);font-size:max(12px,1.45 * var(--u));font-weight:700;line-height:1.1;white-space:nowrap;color:#073749}.rounds b:nth-child(1){left:25%}.rounds b:nth-child(2){left:55%}.rounds b:nth-child(3){left:83%}.pickup{position:absolute;left:45%;bottom:78%;width:22%;height:92%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 1px 1px #1c4d4a44)}
.instruction-group{position:absolute;left:30%;top:20%;width:46%;z-index:3}.instruction{margin:0;text-align:center;padding:calc(.8 * var(--u)) calc(1.3 * var(--u));font-size:calc(3.2 * var(--u));font-weight:700;line-height:1.08;border:1px solid #efc37c;border-radius:calc(2 * var(--u));background:linear-gradient(120deg,#fffbedf5,#fff0d8f2);box-shadow:inset 0 0 0 2px #fff8ed}.instruction-actions{display:flex;align-items:center;justify-content:center;gap:calc(1.2 * var(--u));margin-top:calc(1 * var(--u))}.hear{position:relative;width:auto;min-width:52%;font-size:max(18px,2.25 * var(--u))}.hint{margin:0;font-size:max(17px,2 * var(--u));line-height:1.1;text-align:center;padding:4px 6px;color:#234c4f}.scene[data-step=B] .instruction-group{top:19%}.scene[data-step=B] .instruction{font-size:calc(2.8 * var(--u))}.scene[data-step=B] .instruction-actions{display:grid;grid-template-columns:1fr 1.05fr}.scene[data-step=B] .hear{width:100%;padding-left:5px;padding-right:5px}
.pim{position:absolute;left:1%;top:32%;width:27%;height:52%;object-fit:contain;object-position:bottom;pointer-events:none;z-index:2}.scene[data-step=B] .pim{top:38%;height:43%}.food{position:absolute;left:30%;top:48%;width:46%;height:25%;display:flex;justify-content:center;align-items:flex-end;gap:13%;z-index:2;isolation:isolate}.food::before{content:'';position:absolute;inset:-10% -8% -2%;z-index:-1;background:radial-gradient(ellipse,#fff6b2ae,transparent 69%)}.food img{width:43%;height:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 0 7px #fff1b988)}.scene[data-step=B] .food{top:42%;height:22%}.count-cue img{animation:count-glow 700ms ease-out}.count-cue img+img{animation-delay:730ms}@keyframes count-glow{40%{filter:drop-shadow(0 0 16px #fff29a) brightness(1.12)}}
.choices{position:absolute;left:30%;width:46%;top:77%;height:18%;display:flex;justify-content:space-between;gap:7%;z-index:3}.tile{width:28.7%;height:100%;font-size:calc(9.5 * var(--u));font-weight:700;line-height:1;padding:0}.tile-press{animation:tap 140ms ease-out}@keyframes tap{45%{transform:translateY(3px) scale(.97)}}.tile:disabled{opacity:1}.feedback-icon{position:absolute;right:-10px;top:-13px;width:calc(4.6 * var(--u));height:calc(4.6 * var(--u));min-width:30px;min-height:30px;z-index:7;object-fit:contain;pointer-events:none}
/* Feedback lives on an independent, flush pseudo-edge. Hover shadows cannot
   replace it, and only the scheduled retry fade changes its opacity. */
.correct::before,.wrong::before{content:'';position:absolute;inset:-1.5px;border-radius:inherit;pointer-events:none;z-index:6;border:3px solid var(--edge);opacity:1}.correct{--edge:var(--green)}.wrong{--edge:var(--red)}.edge-pulse::before{animation:edge-flash 420ms ease-out}@keyframes edge-flash{40%{filter:brightness(1.3);box-shadow:0 0 4px var(--edge)}}.wrong-fading .wrong::before,.wrong-fading .feedback.retry,.wrong-fading .wrong .feedback-icon{opacity:0;transition:opacity 500ms}
.feedback{position:absolute;left:2%;top:21%;width:24%;min-height:calc(6 * var(--u));margin:0;padding:calc(.8 * var(--u));font-size:calc(2.3 * var(--u));font-weight:700;line-height:1.05;text-align:center;z-index:4;border-radius:calc(1.5 * var(--u));pointer-events:none;display:flex;align-items:center;justify-content:center;gap:6px}.feedback:empty{display:none}.message-icon{width:calc(3.4 * var(--u));height:calc(3.4 * var(--u));min-width:23px;min-height:23px;object-fit:contain;flex:none}.feedback.success{color:#07572d;background:linear-gradient(#e8ffeb,#adf3bbed);border:2px solid #36b86b;box-shadow:inset 0 0 0 2px #f5fff0}.feedback.retry{color:#932d26;background:linear-gradient(#fff5e9,#ffcdc4ed);border:2px solid #c94b40;box-shadow:inset 0 0 0 2px #fff2e8}
.mat{position:absolute;left:29%;top:66%;width:48%;height:17%;border:4px solid #30c0c6;border-radius:calc(3 * var(--u));background:repeating-linear-gradient(80deg,#77d8d466 0 1px,transparent 1px 4px),repeating-linear-gradient(10deg,#379ba333 0 1px,transparent 1px 5px),linear-gradient(#65cac8,#43b8be);box-shadow:inset 0 0 0 3px #a5eeea,0 4px 3px #16777b9e;display:flex;align-items:center;justify-content:center;gap:7%;z-index:3;isolation:isolate}.mat::after{content:'';position:absolute;inset:6px;border:2px dashed #c6ffeb;border-radius:inherit;pointer-events:none}.mat.correct::before,.mat.wrong::before{inset:-4px}.mat.drop-ready{box-shadow:0 0 0 4px #f3da58,inset 0 0 0 3px #fff0a9}.tray{position:absolute;left:33%;top:86%;width:37%;height:10%;min-height:44px;display:flex;align-items:center;justify-content:space-around;border:2px solid #76d1d2;border-radius:calc(2 * var(--u));background:linear-gradient(#e6fbf6,#b2dedb);box-shadow:inset 0 0 0 5px #f3fff5,0 2px 4px #208d8b99;z-index:3;padding:4px 10px}.block-button{position:relative;min-width:44px;min-height:44px;width:24%;height:96%;border:0;background:none;padding:0;touch-action:none;border-radius:10px}.block-button img{width:100%;height:100%;object-fit:contain;pointer-events:none}.block-button:active{transform:translateY(2px)}.block-button.empty{visibility:hidden}.mat .block-button{height:88%;width:21%;z-index:1}.landed{animation:landing 180ms ease-out}@keyframes landing{0%{transform:translateY(-8px) scale(1.03)}70%{transform:translateY(2px)}100%{transform:none}}.drag-ghost{position:fixed;transform:translate(-50%,-50%);z-index:90;pointer-events:none;opacity:.85;height:auto}.dragging{opacity:.35}.check{position:absolute;right:3%;top:86%;width:19%;height:10%;min-height:44px;border:0;background:none;padding:0;border-radius:calc(1.8 * var(--u));z-index:5;transition:filter 120ms,transform 120ms}.check-art{width:100%;height:100%;stroke:none;overflow:visible}.check:active{transform:translateY(3px);filter:brightness(.95)}.scene[data-step=B] .next{top:86%;bottom:auto;height:10%;min-height:44px}.matched{position:absolute;right:15%;top:69%;font-size:calc(7 * var(--u));line-height:1;color:#075b38}.celebration{position:absolute;inset:0;pointer-events:none;z-index:6}.gold-scatter{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.gold-star{fill:#efb735;stroke:#bb7e13;stroke-width:.65;paint-order:stroke fill}
dialog{color:var(--ink);font:inherit;border:2px solid #63cbd0;border-radius:25px;background:linear-gradient(140deg,#fffcf0,#e2f7f3);box-shadow:0 12px 50px #05394350;padding:22px 32px;max-width:min(90vw,440px);max-height:calc(100dvh - 24px);overflow:auto;text-align:center}dialog::backdrop{background:#123e4966;backdrop-filter:blur(5px)}dialog h2{font-size:28px;margin:0 0 18px}.setting-label{display:flex;justify-content:center;align-items:center;gap:12px;font-size:25px;margin:14px 0 9px}.setting-label svg{width:32px;height:32px}.toggle{display:flex;justify-content:center;gap:10px}.toggle button{border:2px solid #77b5b0;border-radius:12px;background:#f2fffa;min-width:90px;min-height:44px;font-size:22px;box-shadow:none!important;transform:none!important;filter:none!important}.toggle button[aria-pressed=true]{background:#0a4e55;color:#fff;border-color:#064047}.done{display:block;min-height:48px;width:100%;margin-top:18px;font-size:26px;padding:9px 18px}.rotation{position:fixed;inset:0;margin:0;max-width:none;max-height:none;width:100vw;height:100dvh;border:0;border-radius:0;background:#000;color:#fff;box-shadow:none;padding:24px}.rotation[open]{display:flex;flex-direction:column;align-items:center;justify-content:center}.rotation::backdrop{background:#000;backdrop-filter:none}.rotation h2{font-size:clamp(24px,6vw,36px);margin:5px 0}.rotate-demo svg{width:170px;height:145px;color:#dcf6ef;stroke-width:5}.phone{transform-origin:75px 62px;animation:turn-phone 3s ease-in-out infinite}.rotate-arrow{stroke:#dda838}@keyframes turn-phone{0%,15%{transform:rotate(0)}65%,90%{transform:rotate(90deg)}100%{transform:rotate(0)}}
@media(hover:hover) and (pointer:fine){.glass:not(:disabled):hover{box-shadow:inset 0 0 0 2px #fff,0 5px 3px #229da85c}.glass:not(:disabled):hover::after{opacity:1}.check:hover{filter:drop-shadow(0 3px 3px #19c9d0)}.block-button:not(:disabled):hover{filter:drop-shadow(0 3px 2px #40cbd2)}}
@media(max-height:500px) and (orientation:landscape){
.scene{--u:min(1cqw,1.8cqh)}.back,.gear{top:2%}.map-progress{top:3%;left:36%;width:32%;height:10.5%}.rounds b{font-size:12px}.pickup{height:85%;bottom:80%}
.instruction-group,.scene[data-step=B] .instruction-group{top:15%;left:30%;width:46%}.instruction,.scene[data-step=B] .instruction{font-size:calc(3.25 * var(--u));padding:4px 8px;line-height:1.02}.instruction-actions{margin-top:6px;gap:8px}.hear{height:44px;font-size:18px;padding:4px 8px}.scene[data-step=B] .hint{font-size:17px;padding:0 4px}.scene[data-step=B] .hear{font-size:18px}
.food,.scene[data-step=B] .food{top:40%;height:24%;left:30%;width:46%;gap:13%}.choices{top:70%;height:25%}.mat{top:66%;height:20%;border-width:3px}.mat.correct::before,.mat.wrong::before{inset:-3px}.mat::after{inset:4px}.tray,.check,.scene[data-step=B] .next{top:88%;height:44px}.tray{padding:1px 8px}.block-button{height:100%}.pim,.scene[data-step=B] .pim{top:34%;height:49%;width:25%;left:1%}.feedback{top:17%;left:2%;width:24%;font-size:18px;min-height:44px;padding:5px 6px}.message-icon{width:25px;height:25px}.matched{top:70%;font-size:40px}.setting-label{margin:7px 0 5px;font-size:22px}dialog{padding:14px 26px}dialog h2{margin-bottom:9px;font-size:25px}.done{margin-top:12px}.rotation{padding:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Focused review: keep pickup inside the header and a real gap above food. */
.scene[data-step=B] .feedback{top:28%}
@media(max-height:500px) and (orientation:landscape){
.map-progress{top:6.5%;height:8%}.pickup{height:72%;bottom:72%}
.instruction-group,.scene[data-step=B] .instruction-group{top:15%;width:46%}
.instruction,.scene[data-step=B] .instruction{font-size:calc(3 * var(--u));padding:3px 8px}
.instruction-actions{margin-top:5px}.scene[data-step=B] .feedback{top:17%}
}
.map-progress{height:auto;aspect-ratio:500 / 94}
@media(max-height:500px) and (orientation:landscape){
.map-progress{left:40%;top:3.3%;width:25%;height:auto}.pickup{height:60%;bottom:65%}
.instruction-group,.scene[data-step=B] .instruction-group{top:14.5%}.instruction-actions{margin-top:4px}
}
/* Clip paint without creating a hidden scroll container: focus must not pan the board. */
.scene{overflow:clip}
@media(max-height:500px) and (orientation:landscape){
.map-progress{left:40.5%;width:24%}
.instruction-group,.scene[data-step=B] .instruction-group{top:14%}
.instruction,.scene[data-step=B] .instruction{font-size:calc(2.9 * var(--u))}
.instruction-actions{margin-top:3px}
}
.instruction-actions:has(.hint[hidden]){display:flex!important}
.instruction-actions:has(.hint[hidden]) .hear{width:auto;min-width:52%}
.check{width:calc(var(--nav) * 1310 / 420);height:var(--nav);min-height:44px}
.scene[data-step=B] .next{height:var(--nav)}
/* Only the tabletop returns to sharp focus; the town stays softly blurred. */
.background{mask-image:linear-gradient(transparent 54%,#000 57%)}
/* Final founder direction: connected live bubbles and mat-centered guidance. */
.phone-tabletop{display:none}
.scene .instruction-actions{display:flex!important}
.scene[data-step=B] .hear{width:auto;min-width:52%}
.hint{position:absolute;left:29%;width:48%;top:calc(66% - 32px);height:24px;padding:0;display:flex;align-items:center;justify-content:center;font-size:calc(2 * var(--u));z-index:3}
.scene[data-step=B] .food{top:39%}
.feedback.success{--bubble-edge:#36b86b;--bubble-base:#adf3bb;background:linear-gradient(#e8ffeb,var(--bubble-base))}
.feedback.retry{--bubble-edge:#c94b40;--bubble-base:#ffcdc4;background:linear-gradient(#fff5e9,var(--bubble-base))}
.feedback:not(:empty)::after{content:'';position:absolute;left:var(--tail-x,50%);bottom:-10px;width:17px;height:17px;transform:translateX(-50%) rotate(45deg);border-right:2px solid var(--bubble-edge);border-bottom:2px solid var(--bubble-edge);border-radius:0 0 4px 0;background:var(--bubble-base);z-index:-1}
.feedback:not(:empty)::before{content:'';position:absolute;left:var(--tail-x,50%);bottom:-2px;width:18px;height:4px;transform:translateX(-50%);background:var(--bubble-base)}
@media(max-height:500px) and (orientation:landscape){
/* Clip only the real curved tabletop silhouette. No sharp town pixels leak
   through the former horizontal mask, including at the viewport corners. */
.background{display:none}.phone-tabletop{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:-2;stroke:none;pointer-events:none}
.scene{--dock-bottom:max(14px,calc(env(safe-area-inset-bottom) + 10px));--mat-height:20cqh;--mat-top:calc(100cqh - var(--dock-bottom) - 44px - 6px - var(--mat-height))}
.instruction br{display:none}.instruction,.scene[data-step=B] .instruction{font-size:calc(2.7 * var(--u));white-space:nowrap}
.food,.scene[data-step=B] .food{top:33.5%;height:22.5%}
.mat{top:var(--mat-top);height:var(--mat-height)}
.hint,.scene[data-step=B] .hint{top:calc(var(--mat-top) - 26px);height:22px;font-size:17px;padding:0}
.tray,.check,.scene[data-step=B] .next{top:auto;bottom:var(--dock-bottom);height:44px}
.matched{top:calc(var(--mat-top) + 18px)}
}
/* Final visual correction: one blurred town, physical wood only in front. */
.background{display:none!important}
.phone-tabletop{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:-2;stroke:none;pointer-events:none}
.map-progress{aspect-ratio:500 / 80}
.rounds b{top:74%}
/* Smaller visible replay control retains a 44px keyboard/touch target. */
.scene .hear{height:44px;min-height:44px;min-width:0!important;width:160px!important;max-width:100%;font-size:17px;padding:6px 10px;gap:6px;background:none;border:0;box-shadow:none!important;border-radius:12px}
.hear svg{width:22px;height:22px;min-width:22px;min-height:22px}
.hear::before{content:'';position:absolute;inset:5px 0;border:1.5px solid #8cd4cb;border-radius:10px;background:linear-gradient(120deg,#f6fff5f5,#d8eee9f2 65%,#f5f1d8f2);box-shadow:inset 0 0 0 1.5px #ffffffd9,0 2px 2px #21858a61;z-index:-1}
.hear::after{inset:8px -2px 1px}
@media(hover:hover) and (pointer:fine){.hear:hover::before{box-shadow:inset 0 0 0 1.5px #fff,0 4px 2px #229da85c}}
@media(max-height:500px) and (orientation:landscape){
.map-progress{top:5%;aspect-ratio:500 / 80}.pickup{height:72%;bottom:80%}
.rounds b{font-size:10.5px}
.instruction,.scene[data-step=B] .instruction{font-size:23px;line-height:1.04;white-space:normal;border-radius:12px;padding:3px 8px}
.instruction br{display:initial}
.instruction-actions{margin-top:0}
.scene .hear{width:120px!important;font-size:14px;padding:6px 8px}
.hear svg{width:18px;height:18px;min-width:18px;min-height:18px}
}
/* Portrait cover owns the viewport; the hidden board cannot create scrollbars.
   Landscape restores the board's existing scroll/zoom behavior automatically. */
@media(orientation:portrait){
html,body{width:100%;max-width:100vw;height:100dvh;overflow:hidden;overscroll-behavior:none}
.scene{position:fixed;inset:0;width:100%;height:100dvh;min-width:0;min-height:0}
}
/* Keep readable live labels within the compact dimensional capsule. */
.rounds b{top:65%}
@media(max-height:500px) and (orientation:landscape){
.map-progress{width:220px;left:calc(52.5% - 110px);top:5.5%}
.rounds b{top:62%;font-size:10.5px}
.instruction-group,.scene[data-step=B] .instruction-group{top:15%}
.scene .hear{width:clamp(104px,14cqw,120px)!important}
}
@media(max-height:500px) and (orientation:landscape){.scene[data-step=B] .hear{font-size:14px}}
@media(max-height:500px) and (orientation:landscape){
/* Uniform source scaling anchors the physical surface behind the food at
   different phone aspect ratios, rather than exposing a wall at the corner. */
.scene{--table-pixel:max(calc(100cqw / 1672),calc(100cqh / 941))}
.phone-tabletop{inset:auto;width:calc(var(--table-pixel) * 1672);height:calc(var(--table-pixel) * 941);left:calc((100cqw - var(--table-pixel) * 1672) / 2);top:calc(54cqh - var(--table-pixel) * 519)}
}