/* Only the playing surface, pieces, actions and game effects. Shared page.css stays unchanged. */
.bingo-stage{position:relative;isolation:isolate;width:100%;padding:8px 28px 6px;border-radius:22px;background:#05231b url('assets/table.webp?v=20261018-power-bingo-12') center/100% 100% no-repeat;overflow:hidden;direction:ltr;box-shadow:0 14px 28px #0005;contain:layout paint}
.draw-gallery{height:80px;display:grid;grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr);align-items:center;gap:8px;padding-inline:0}
.draw-ball{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 32% 23%,#fffef3 0,#f1e7d0 31%,#b49b68 72%,#67532e 96%);border:1px solid #f9dc98;box-shadow:inset -4px -7px 10px #4a37163b,inset 2px 3px 9px #fff9,0 9px 16px #0007;position:relative}
.draw-ball:before{content:'';position:absolute;inset:13px;border:1px solid #826b3b70;border-radius:50%}
.draw-ball strong{color:#17372c;font:700 36px/1 Georgia,serif;font-variant-numeric:tabular-nums;z-index:1}
.draw-track{display:grid;grid-template-columns:repeat(3,minmax(0,29px));justify-content:center;gap:4px;min-width:0;overflow:hidden}
.draw-track span{width:100%;min-width:0;aspect-ratio:1;height:auto;display:grid;place-items:center;border-radius:50%;background:#071a14cc;border:1px solid #bf9a5355;color:#e7d5a4;font-size:14px;font-weight:650}
.draw-track span.is-hit{border-color:#e6c877;background:#cda852;color:#10221a}
.bingo-column-head{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;height:24px;align-items:center;color:#ddc891;text-align:center;font:600 18px/1 Georgia,serif;letter-spacing:2px}
.bingo-card{width:100%;min-width:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;padding:6px 0;position:relative}
.bingo-cell{min-width:0;overflow:hidden;position:relative;aspect-ratio:1.22;display:grid;place-items:center;border-radius:11px;border:1px solid #cec2a2;box-shadow:inset 0 1px 1px #fff,0 3px 4px #0006;background:linear-gradient(145deg,#fcf5e5,#e6dcc4);color:#17352b;font:650 clamp(20px,6.5cqw,32px)/1 Georgia,serif;font-variant-numeric:tabular-nums;user-select:none;transition:background .22s,color .22s,box-shadow .22s}
.bingo-cell.is-marked{background:linear-gradient(140deg,#eed38b,#be923d);border-color:#f9de99;color:#163026;box-shadow:inset 0 1px 2px #fff8,0 3px 4px #0007}
.bingo-cell.is-marked:after{content:'✓';position:absolute;bottom:3px;right:5px;color:#254633;font:700 11px/1 system-ui}
.bingo-cell.is-joker{background:linear-gradient(140deg,#345c44,#102b22);border:1px solid #cfb36c;color:#edcd7e;gap:2px;align-content:center}
.bingo-cell.is-joker:before{content:'✦';font:400 29px/1 Georgia,serif}
.bingo-cell.is-joker span{font:650 8px/1 system-ui;letter-spacing:1px}
.bingo-cell.is-joker:after{display:none}
.bingo-frame-space{height:26px}

.bingo-actions{margin-top:2px;min-height:54px}.bingo-button-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}.bingo-button-row button{width:100%;min-width:0;height:54px;min-height:54px;margin:0;line-height:1.2;font-size:15px;padding:10px 6px;touch-action:manipulation}.bingo-button-row button:disabled{opacity:.52}.bingo-button-row #risk{border-color:#ac8a4b;background:linear-gradient(140deg,#1a2720,#111713);color:#ead39c}
.bingo-live{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bingo-ad-reserve{height:calc(62px + env(safe-area-inset-bottom));pointer-events:none}
.risk-window{position:absolute;z-index:4;left:9%;right:9%;top:45%;height:94px;display:grid;place-items:center;background:linear-gradient(145deg,#142f24,#071a14);border:1px solid #e0be6d;border-radius:15px;box-shadow:0 10px 35px #0009;color:#f5d98d;font:700 clamp(24px,7cqw,36px)/1 Georgia,serif;letter-spacing:2px}.risk-window.is-nothing{color:#f4ece0;background:#292620;border-color:#b6a890}.risk-window.is-double{color:#ffe7a9}
.bingo-ripple{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit}.bingo-ripple.burst:after{content:'';position:absolute;inset:25%;border:2px solid #f8d777;border-radius:50%;animation:bingo-wave .7s ease-out forwards}
.draw-ball.is-arriving{animation:bingo-arrive .6s cubic-bezier(.16,.85,.23,1)}.draw-ball.is-drawing{animation:bingo-roll .65s ease-in-out infinite}.risk-window.is-spinning{animation:bingo-risk .2s ease-in-out infinite alternate}
.bingo-breakdown{display:grid;gap:9px;margin:18px 0 22px}.bingo-breakdown>div{display:flex;justify-content:space-between;gap:12px;line-height:1.4}.bingo-breakdown>div:last-child{padding-top:12px;border-top:1px solid #d8b96b55;font-weight:700;color:#ebd08d}.bingo-final-score{display:block;font-size:52px;line-height:1.1;color:#edd18c;font-variant-numeric:tabular-nums}
@keyframes bingo-arrive{0%{transform:translateY(-40px) rotate(-55deg) scale(.65);opacity:0}70%{transform:translateY(3px) rotate(5deg) scale(1.03);opacity:1}100%{transform:none;opacity:1}}
@keyframes bingo-roll{0%,100%{transform:rotate(-12deg) translateY(-2px)}50%{transform:rotate(12deg) translateY(2px)}}
@keyframes bingo-mark{0%{transform:scale(.92)}55%{transform:scale(1.07)}100%{transform:none}}
@keyframes bingo-wave{0%{transform:scale(.4);opacity:.9}100%{transform:scale(4);opacity:0}}
@keyframes bingo-risk{from{transform:scale(.99)}to{transform:scale(1.015)}}
@container gf-page (max-width:370px){.bingo-stage{padding:8px 24px 6px}.bingo-card,.bingo-column-head{gap:6px}.draw-gallery{height:76px;gap:6px;padding-inline:0}.draw-track{gap:4px}.draw-track{grid-template-columns:repeat(3,minmax(0,24px))}.draw-track span{width:100%;height:auto;font-size:12px}.bingo-button-row button{font-size:14px}}
@container gf-page (min-width:600px){.bingo-stage{padding:20px 30px 14px}.draw-gallery{height:132px;grid-template-columns:1fr 110px 1fr}.draw-ball{width:106px;height:106px}.draw-ball strong{font-size:52px}.draw-track span{width:40px;height:40px;font-size:19px}.bingo-column-head{height:40px;font-size:25px}.bingo-card{gap:12px}.bingo-cell{font-size:clamp(35px,7cqw,56px);border-radius:16px}.bingo-cell.is-joker:before{font-size:42px}.bingo-cell.is-joker span{font-size:11px}.bingo-frame-space{height:40px}.bingo-actions{min-height:60px}.bingo-button-row button{min-height:58px;font-size:18px}}
.reduced-motion .draw-ball,.reduced-motion .bingo-cell,.reduced-motion .risk-window,.reduced-motion .bingo-ripple:after{animation:none!important;transition:none!important}
.preview-capture .bingo-ad-reserve{display:none}

/* Keep the enlarged tablet card inside the vertical play budget. */
@container gf-page (min-width:600px){.bingo-stage{padding:12px 36px 10px}.bingo-card,.bingo-column-head{width:min(100%,max(500px,calc(100svh - 470px)));margin-inline:auto}.draw-gallery{height:106px}.draw-ball{width:98px;height:98px}.bingo-column-head{height:32px}.bingo-frame-space{height:32px}}

/* Static glow layers animate opacity only, avoiding a full button repaint every frame. */
#decision-row.is-choosing #accept,#decision-row.is-choosing #risk{position:relative}
#decision-row.is-choosing #accept::after,#decision-row.is-choosing #risk::after{content:'';position:absolute;inset:-2px;border-radius:inherit;border:2px solid #f4d58b;box-shadow:0 0 15px #e2ba6855;pointer-events:none;opacity:0;animation:bingo-choice-glow 1.6s ease-in-out infinite}
#decision-row.is-choosing #risk::after{animation-delay:-.8s}
@keyframes bingo-choice-glow{0%,45%,100%{opacity:0}20%{opacity:1}}
.reduced-motion #decision-row.is-choosing #accept,.reduced-motion #decision-row.is-choosing #risk{outline:1px solid #e3c779;outline-offset:2px}
.reduced-motion #decision-row.is-choosing #accept::after,.reduced-motion #decision-row.is-choosing #risk::after{animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){#decision-row.is-choosing #accept,#decision-row.is-choosing #risk{outline:1px solid #e3c779;outline-offset:2px}#decision-row.is-choosing #accept::after,#decision-row.is-choosing #risk::after{animation:none;opacity:0}}

/* Animate the numeral only; the tile and its permanent marking stay still. */
.bingo-number{display:inline-block;min-width:0;max-width:100%;white-space:nowrap;line-height:1;text-align:center}
.bingo-number.is-awaiting-choice,#drawn-number.is-awaiting-choice{animation:bingo-number-blink 1.2s ease-in-out infinite}
@keyframes bingo-number-blink{0%,100%{opacity:1}50%{opacity:.2}}
.reduced-motion .bingo-number.is-awaiting-choice,.reduced-motion #drawn-number.is-awaiting-choice{animation:none;text-decoration:underline;text-underline-offset:4px}
@media(prefers-reduced-motion:reduce){.bingo-number.is-awaiting-choice,#drawn-number.is-awaiting-choice{animation:none;text-decoration:underline;text-underline-offset:4px}}

/* Extend only the background at its bottom. All existing content stays in place. */
.bingo-stage{padding-bottom:calc(6px + 40px)}
@container gf-page (min-width:600px){.bingo-stage{padding-bottom:calc(10px + 40px)}}
.bingo-card-wrap{position:relative;min-width:0}
.bingo-winning-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.bingo-winning-lines line{stroke:#fff2b8;stroke-width:1.5;stroke-linecap:round;filter:drop-shadow(0 1px 1px #17231f)}
.bingo-winning-lines line.is-celebrating{animation:bingo-line-celebrate .6s ease-in-out 5}
@keyframes bingo-line-celebrate{0%,100%{opacity:1}50%{opacity:.1}}
.reduced-motion .bingo-winning-lines line.is-celebrating{animation:none;stroke-width:2}
@media(prefers-reduced-motion:reduce){.bingo-winning-lines line.is-celebrating{animation:none;stroke-width:2}}

/* Keep idle tiles flat; allocate the two 3D faces only during the short flip. */
.bingo-cell:not(.is-joker){perspective:none;overflow:visible;background:none;border-color:transparent;box-shadow:none;transition:none}
.bingo-turner{position:absolute;inset:0;border-radius:inherit;transform-style:flat;transform:none}
.bingo-face{position:absolute;inset:-1px;border-radius:inherit;display:grid;place-items:center;border:1px solid #cec2a2;backface-visibility:visible;-webkit-backface-visibility:visible;box-shadow:inset 0 1px 1px #fff,0 3px 4px #0006;color:#17352b}
.bingo-front{background:linear-gradient(145deg,#fcf5e5,#e6dcc4)}
.bingo-back{display:none;background:linear-gradient(140deg,#eed38b,#be923d);border-color:#f9de99;box-shadow:inset 0 1px 2px #fff8,0 3px 4px #0007;color:#163026}
.bingo-cell.is-marked .bingo-front{display:none}.bingo-cell.is-marked .bingo-back{display:grid}
.bingo-cell.is-flipping{perspective:600px}.bingo-cell.is-flipping .bingo-turner{transform-style:preserve-3d;will-change:transform}
.bingo-cell.is-flipping.is-marked .bingo-turner{transform:rotateY(180deg)}
.bingo-cell.is-flipping .bingo-face{display:grid;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.bingo-cell.is-flipping .bingo-front{transform:rotateY(0deg)}.bingo-cell.is-flipping .bingo-back{transform:rotateY(180deg)}
.bingo-cell:not(.is-joker):after{display:none}.bingo-back:after{content:'✓';position:absolute;bottom:3px;right:5px;color:#254633;font:700 11px/1 system-ui}
.bingo-front-number{display:inline-block;white-space:nowrap;line-height:1}
.bingo-paused .bingo-stage *,.bingo-paused .bingo-stage *::before,.bingo-paused .bingo-stage *::after,.bingo-paused .bingo-actions *::after{animation-play-state:paused!important}

/* Keep both recent-number groups clear of the decorative outer frame. */
#recent-left{transform:translateX(13px)}
#recent-right{transform:translateX(-13px)}