/* bakery presentation; game states and scoring remain unchanged */
.bakery-games button[data-game="bingo"]{background:#d3a367 url('assets/bingo-bakkerij/achtergrond-bakkerij.webp') center/cover;border:5px solid #c5924d}
.bakery-games button[data-game="bingo"]:before{content:"";position:absolute;inset:0 20% 10%;background:url('assets/bingo-bakkerij/gebaksdoosje-open.webp') center/contain no-repeat}
.bakery-games button[data-game="bingo"]:after{content:"";position:absolute;inset:26% 35% 35%;background:url('assets/bingo-bakkerij/aardbeientaartje.webp') center/contain no-repeat}
.bakery-games button[data-game="bingo"] span{position:relative;z-index:2}
/* 16 boxes are arranged on a wooden display tray. */
.bakery-bingo[data-bingo-view] .reef-oyster{width:100%;height:100%;max-width:none}
.bakery-bingo .reef-side{inset:3% 17% 12%;background:url('assets/bingo-bakkerij/dienblad-leeg.webp') center/100% 100% no-repeat;padding:3%;box-sizing:border-box}
.bakery-bingo .reef-oyster>img{width:100%!important;height:100%!important;max-width:none!important}
.bakery-bingo .bubble-cell>img{border-radius:7px!important;clip-path:none!important}
@media(orientation:portrait){.bakery-bingo .reef-side{inset:8% 1% 15%;padding:5%}}
.bakery-bingo{background:#f7edda;color:#214b3f}
.bakery-bingo .underwater-stage{height:calc(100dvh - 78px);min-height:450px;background:none;isolation:isolate}
.bakery-scene-bg{position:absolute;inset:0;z-index:-1;background:url('assets/bingo-bakkerij/achtergrond-bakkerij.webp') center/cover}
.bakery-bingo .underwater-stage:after{display:none}
.bakery-bingo .reef-side{inset:4% 4% 13%;transition:opacity .35s;transform:none!important}
.bakery-bingo .oyster-field{position:relative;inset:auto;width:100%;height:100%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:1% 2%;justify-items:center}
.bakery-bingo .reef-oyster,.bakery-bingo[data-bingo-view] .reef-oyster.open,.bakery-bingo[data-bingo-view] .reef-oyster.done{position:relative;left:auto;top:auto;width:100%;height:100%;max-width:220px;transform:none;filter:drop-shadow(0 3px 2px #65401c35);animation:none}
.bakery-bingo .reef-oyster img{transform:none;object-fit:contain}
.bakery-bingo .reef-oyster .oyster-pearl{left:29%;top:20%;width:42%;height:42%;transform:none;border:0;border-radius:0;box-shadow:none;background:var(--pastry) center/contain no-repeat!important;animation:none!important;clip-path:inset(0 0 18% 0)}
.bakery-bingo .reef-oyster.done .oyster-pearl{display:block}
.bakery-bingo .reef-oyster.done b{left:72%;top:74%;width:23px;background:#2a6a4d;font-size:18px}
.bakery-bingo .bubble-card{--bingo-board-size:min(58vw,calc(100dvh - 135px));width:var(--bingo-board-size);height:var(--bingo-board-size);right:2%;top:48%;padding:5%;border:0;border-radius:0;background:url('assets/bingo-bakkerij/dienblad-leeg.webp') center/100% 100% no-repeat;box-shadow:none;backdrop-filter:none;box-sizing:border-box;transition:opacity .35s;transform:translateY(-50%)!important}
.bakery-bingo[data-bingo-view="reef"] .bubble-card{visibility:hidden}
.bakery-bingo .bubble-board-4{gap:5px}
.bakery-bingo .bubble-card-title{top:-15px;background:#fff4dc;color:#315342;border-color:#c59c5a;font-size:14px}
.bakery-bingo .bubble-card-title b{color:#785014}
.bakery-bingo .bubble-cell{border:2px solid #c49a60!important;border-radius:12px;background:#fffaf0!important;box-shadow:0 2px 3px #583b1d35;animation:none!important;translate:none;rotate:none;padding:3%;opacity:1!important}
.bakery-bingo .bubble-cell:before,.bakery-bingo .bubble-cell:after,.bakery-bingo .bubble-sheen{display:none!important}
.bakery-bingo .bubble-cell img{width:100%;height:100%;padding:0;border-radius:7px;box-shadow:none;object-fit:contain;background:white;opacity:1;filter:none}
.bakery-bingo .bubble-cell.marked>img{opacity:.2}
.bakery-bingo .bubble-cell.bonus{background:#f5dfad!important}
.bakery-bingo .bubble-cell.wrong{outline:4px solid #bf5948}
.bakery-bingo .bubble-cell.winning{outline:3px solid #d5a328;filter:none}
.bakery-bingo .bubble-cell .pearl-mark{inset:5%;left:5%;top:5%;width:90%;height:90%;transform:none;border:0;border-radius:0;box-shadow:none;background:var(--pastry) center/contain no-repeat!important}
.bakery-bingo .word-pearl{left:20%;top:44%;width:25vw;height:auto;min-width:0;min-height:0;aspect-ratio:auto;padding:14px;border:2px solid #b78b4d;border-radius:18px;background:#fff8e9!important;box-shadow:0 4px 12px #573b2050;animation:none;transition:opacity .35s;transform:translate(-50%,-50%)!important}
.bakery-bingo .word-pearl .active-pastry{width:100%;max-height:28vh;object-fit:contain}
.bakery-bingo .word-pearl strong{white-space:normal;max-width:100%;color:#284d3f;text-shadow:none}
.bakery-bingo .bingo-instruction{left:50%!important;bottom:2%;transform:translateX(-50%);background:#fff7e7;color:#244b3d;border-color:#c39b5c;box-shadow:none;white-space:normal;text-align:center;max-width:90%;font-size:clamp(13px,1.4vw,20px)}
.bakery-bingo .bingo-next-oyster{position:absolute;z-index:25;left:20%;bottom:16%;transform:translateX(-50%);padding:12px 18px;background:#285c45;color:#fff8e9;border:2px solid #ddb874;border-radius:12px;font:inherit;cursor:pointer}
.bakery-flying-pastry{background:var(--pastry) center/contain no-repeat!important;box-shadow:none!important;border:0;border-radius:0}
.bakery-flying-pastry:before,.bakery-flying-pastry:after{display:none!important}
.bakery-full-win{background:#f7ecdce8;display:flex;flex-direction:column;justify-content:center;gap:10px}
.bakery-reward{width:min(65vh,80vw);text-align:center;color:#264e3f;font-size:clamp(18px,2.3vw,30px);font-weight:800}
.cake-reveal{position:relative;width:100%;aspect-ratio:1}
.reward-cake{position:absolute;width:80%;left:10%;top:25%}
.reward-dome{position:absolute;width:100%;left:0;top:0;animation:bakery-dome-lift 2.5s .8s ease-in-out forwards}
@keyframes bakery-dome-lift{to{transform:translateY(-65%);opacity:0}}
.bakery-full-win .full-card-actions{opacity:1;transform:none;animation:none}
.underwater-bingo-win.bakery-full-win{background:rgba(255,247,232,.96)!important;backdrop-filter:blur(6px);padding:20px;box-sizing:border-box;overflow:auto}
.underwater-bingo-win.bakery-full-win .bakery-reward{flex-shrink:0}
.underwater-bingo-win.bakery-full-win .full-card-actions{flex-shrink:0}
.bakery-full-win .bingo-finish-button,.bakery-bingo .bingo-finish-button{background:#285c45}
@media(orientation:portrait){
.bakery-bingo .underwater-stage{height:calc(100dvh - 90px);min-height:550px}
.bakery-bingo .reef-side{inset:9% 2% 15%}
.bakery-bingo .bubble-card{--bingo-board-size:min(96vw,55dvh);right:50%;top:60%;transform:translate(50%,-50%)!important;padding:7%}
.bakery-bingo .word-pearl{left:50%;top:13%;width:60%;padding:6px;flex-direction:row}
.bakery-bingo .word-pearl .active-pastry{width:80px;height:80px}
.bakery-bingo .bingo-next-oyster{left:50%;bottom:8%;padding:8px 14px}
.bakery-bingo .bubble-card-title{font-size:12px}
.bakery-full-win .sea-win-actions{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.bakery-bingo *{transition:none!important}.reward-dome{animation-duration:.01s;animation-delay:0s}}
.bakery-bingo[data-bingo-view] .reef-oyster{width:100%;height:100%;max-width:none}
.bakery-bingo .reef-side{inset:3% 17% 12%;background:url('assets/bingo-bakkerij/dienblad-leeg.webp') center/100% 100% no-repeat;padding:3%;box-sizing:border-box}
.bakery-bingo .reef-oyster>img{width:100%!important;height:100%!important;max-width:none!important}
.bakery-bingo .bubble-cell>img{border-radius:7px!important;clip-path:none!important}
@media(orientation:portrait){.bakery-bingo .reef-side{inset:8% 1% 15%;padding:5%}}
@media(max-width:600px){.bakery-bingo .topbar{height:auto;min-height:100px;display:flex;flex-wrap:wrap;padding:6px;gap:5px}.bakery-bingo .topbar .title{width:100%}.bakery-bingo .topbar-actions{width:100%;justify-content:space-between;gap:4px}.bakery-bingo .topbar .score{font-size:12px}.bakery-bingo .topbar-progress-stars{display:none}.bakery-bingo .underwater-stage{height:calc(100dvh - 120px);min-height:500px}}


/* Matching closed/open sprites share one footprint, inside the tray rim. */
.bakery-bingo .reef-side{inset:2% auto 11%;left:50%;width:min(90%,112vh);padding:0;transform:translateX(-50%)!important}
.bakery-bingo .oyster-field{position:absolute;inset:11% 10% 13%;width:auto;height:auto;gap:2% 3%;align-items:end}
.bakery-bingo[data-bingo-view] .reef-oyster,.bakery-bingo[data-bingo-view] .reef-oyster.open,.bakery-bingo[data-bingo-view] .reef-oyster.done{width:100%;height:100%;max-width:none;min-height:0;aspect-ratio:auto;filter:drop-shadow(0 2px 2px #65401c30)}
.bakery-bingo .reef-oyster>img{object-position:center bottom}
.bakery-bingo .reef-oyster .oyster-pearl{left:26%;top:43%;width:48%;height:30%;clip-path:none}
.bakery-bingo .reef-oyster.done .oyster-pearl{display:none!important}
.bakery-bingo .reef-oyster.done b{left:73%;top:82%;transform:translate(-50%,-50%);width:20px;font-size:15px;box-shadow:none}

/* Only the first completed line celebrates; continue clears these four cells. */
.bakery-bingo .bubble-cell.winning{outline:3px solid #d5a328;border-color:#f2b837!important;box-shadow:0 0 0 3px #fff3a3,0 0 15px #e8b93a;animation:none!important}
.bakery-bingo .bubble-cell.winning:after{content:"★";display:grid!important;place-items:center;position:absolute;inset:5px 5px auto auto;width:26px;height:26px;border-radius:50%;background:#fff4c4;color:#b87911;font-size:22px;z-index:5}

/* Boxes stand upright on a receding horizontal tray, with depth-based scale. */
.bakery-bingo .reef-side{inset:0 auto 8%;left:50%;width:min(98%,150vh);background-image:url("assets/bingo-bakkerij/dienblad-perspectief-v3.webp")}
.bakery-bingo .oyster-field{inset:0;width:100%;height:100%;display:block}
.bakery-bingo[data-bingo-view] .reef-oyster,.bakery-bingo[data-bingo-view] .reef-oyster.open,.bakery-bingo[data-bingo-view] .reef-oyster.done{position:absolute;left:var(--box-x);top:var(--box-y);width:18%;height:19%;transform:translate(-50%,-100%) scale(var(--box-scale));transform-origin:center bottom}

/* Stable, viewport-contained reward; rear glass stays behind the cake. */
.underwater-bingo-win.bakery-full-win{position:fixed;inset:0;width:100%;height:100dvh;display:flex;align-items:center;justify-content:center;gap:12px;padding:20px;overflow:hidden;isolation:isolate}
.underwater-bingo-win.bakery-full-win:before{display:none}
.underwater-bingo-win.bakery-full-win .bakery-reward{width:min(58dvh,70vw,620px);flex:0 0 auto}
.bakery-full-win .bakery-reward p{margin:0 0 12px;font-size:clamp(18px,2vw,30px)}
.bakery-full-win .cake-reveal{width:100%;aspect-ratio:1;isolation:isolate}
.bakery-full-win .reward-cake{width:80%;height:80%;left:10%;top:18%;object-fit:contain;z-index:2}
.bakery-full-win .reward-dome{width:100%;height:100%;left:0;top:0;object-fit:contain;animation:none;opacity:0}
.bakery-full-win .reward-dome-back{z-index:1}
.bakery-full-win .reward-dome-front{z-index:3;clip-path:inset(78% 0 0)}
.bakery-full-win.reward-ready .reward-dome{opacity:1;animation:bakery-dome-lift 2.8s .8s ease-in-out forwards}
.bakery-full-win .full-card-actions{position:relative;width:auto;max-width:100%;flex:0 0 auto;margin:0;flex-wrap:wrap;justify-content:center}
.bakery-full-win .bingo-finish-button{font-size:clamp(16px,2vw,26px);padding:14px 22px}
@media(prefers-reduced-motion:reduce){.bakery-full-win.reward-ready .reward-dome{animation:none;opacity:0}}

.bakery-full-win .cake-reveal{overflow:hidden;mask-image:linear-gradient(to bottom,transparent 0%,#000 6%,#000 100%)}

/* Staggered confectionery display: room for every open lid. */
.bakery-bingo .reef-side{width:min(94%,142vh)}
.bakery-bingo[data-bingo-view] .reef-oyster,
.bakery-bingo[data-bingo-view] .reef-oyster.open,
.bakery-bingo[data-bingo-view] .reef-oyster.done{height:21%;padding:0;border:0;background:transparent;filter:drop-shadow(2px 5px 3px #59341538);overflow:visible}
.bakery-bingo .reef-oyster.closed:hover{filter:drop-shadow(0 0 5px #fff5d4) drop-shadow(2px 5px 3px #59341538)}
.bakery-bingo .reef-oyster:focus-visible{outline:3px solid #285c45;outline-offset:3px;border-radius:12px}
.bakery-bingo .reef-oyster.done b{left:70%;top:88%;width:20px;height:20px;line-height:20px;border:2px solid #fff5df;box-shadow:0 2px 3px #48301925}

.bakery-bingo[data-bingo-view] .reef-oyster,.bakery-bingo[data-bingo-view] .reef-oyster.open,.bakery-bingo[data-bingo-view] .reef-oyster.done{height:19%}

/* Surprise cabinet: one stable shelf compartment for each pastry box. */
.bakery-bingo .reef-side{inset:2% auto auto;left:50%;width:min(94vw,calc((100dvh - 155px)*1.333333));height:auto;aspect-ratio:4/3;background:url('assets/bingo-bakkerij/verrassingenkast-v1.webp') center/100% 100% no-repeat;clip-path:inset(.5% round 24px);filter:drop-shadow(0 10px 15px #38231145);padding:0}
.bakery-bingo .oyster-field{position:absolute;inset:0;width:100%;height:100%;display:block}
.bakery-bingo[data-bingo-view] .reef-oyster,
.bakery-bingo[data-bingo-view] .reef-oyster.open,
.bakery-bingo[data-bingo-view] .reef-oyster.done{left:var(--box-x);top:var(--box-y);width:20.5%;height:20.5%;transform:translate(-50%,-100%);filter:drop-shadow(2px 4px 3px #45281155);padding:0;max-width:none}
.bakery-bingo .reef-oyster>img{object-fit:contain;object-position:center bottom}
.bakery-bingo .reef-oyster.done b{left:73%;top:88%}

.bakery-bingo .reef-side{clip-path:inset(1% 1.8% 1% round 20px)}
.bakery-bingo[data-bingo-view] .reef-oyster,.bakery-bingo[data-bingo-view] .reef-oyster.open,.bakery-bingo[data-bingo-view] .reef-oyster.done{height:19.5%}

/* Keep pastry coordinates in the same square as the box sprite.
   A foreground copy of the opaque front wall occludes the pastry base. */
.bakery-bingo[data-bingo-view] .reef-oyster,
.bakery-bingo[data-bingo-view] .reef-oyster.open,
.bakery-bingo[data-bingo-view] .reef-oyster.done{width:auto;aspect-ratio:1;isolation:isolate}
.bakery-bingo .reef-oyster>img{position:absolute;inset:0;z-index:0}
.bakery-bingo .reef-oyster .oyster-pearl{left:27%;top:37%;width:46%;height:32%;z-index:1;pointer-events:none;background-position:center bottom!important}
.bakery-bingo .reef-oyster>img.box-front{z-index:2;clip-path:inset(61% 0 0);pointer-events:none}
.bakery-bingo .reef-oyster.done b{z-index:3}

/* Opaque cloche: wait for decoded assets, hold, then reveal without fading through cake. */
.bakery-full-win .reward-cake{visibility:hidden}
.bakery-full-win.reward-ready .reward-cake{visibility:visible}
.bakery-full-win .reward-dome-opaque{z-index:3;clip-path:none}
.bakery-full-win.reward-ready .reward-dome-opaque{animation:bakery-opaque-reveal 3.4s 1.4s ease-in-out forwards}
@keyframes bakery-opaque-reveal{0%{transform:translateY(0);opacity:1}85%{opacity:1}100%{transform:translateY(-110%);opacity:0}}
@media(prefers-reduced-motion:reduce){.bakery-full-win.reward-ready .reward-dome-opaque{animation:bakery-opaque-reveal-still .01s 1.4s forwards;opacity:1}@keyframes bakery-opaque-reveal-still{to{opacity:0}}}

/* Rectangular bakery cells need no circular pearl safety inset. */
.underwater-bingo.bakery-bingo .bubble-cell{padding:2%}
.underwater-bingo.bakery-bingo .bubble-cell>img{width:100%!important;height:100%!important;padding:0!important;object-fit:contain!important}

/* Distinguish completed pastries from vocabulary still to find. */
.underwater-bingo.bakery-bingo .bubble-cell.marked{background:#e3f1dc!important;border:4px solid #34815b!important;box-shadow:inset 0 0 0 2px #fff9;}
.bakery-bingo .bingo-placed-badge{position:absolute;right:5px;bottom:5px;z-index:9;display:grid;place-items:center;width:clamp(22px,2vw,34px);height:clamp(22px,2vw,34px);border-radius:50%;background:#287149;color:#fff;border:2px solid white;font:bold clamp(18px,1.7vw,27px) system-ui;box-shadow:0 2px 4px #0003;pointer-events:none}
.underwater-bingo.bakery-bingo .bubble-cell.winning{border:4px solid #bc7a14!important;outline:3px solid #ffe47f;outline-offset:-7px;background:#fff0b9!important;box-shadow:inset 0 0 15px #eebd4970,0 0 10px #ffc94c!important;filter:none!important}
.underwater-bingo.bakery-bingo .bubble-cell.winning:after{content:'★';inset:5px auto auto 5px;display:grid!important;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:#fff6cb;color:#a36706;font-size:23px;text-shadow:none;box-shadow:none;animation:none;z-index:8}
.bakery-bingo .bingo-card-legend{position:absolute;left:12%;right:12%;bottom:1.2%;display:flex;justify-content:center;gap:18px;font-size:clamp(11px,1vw,17px);font-weight:700;color:#21563f;pointer-events:none}
.bakery-bingo .bubble-card-title{white-space:nowrap;background:#fff5d9;border:2px solid #b68a45;padding:5px 14px;border-radius:20px;color:#674416}