:root{color-scheme:dark;--paper:#080808;--ink:#fff9ed;--muted:#c8bdac;--gold:#d9bc78;--gold-soft:#f3dda4;--line:#54452e;--panel:#14120f;--pink:#f15d83;--blue:#45b9f2;--green:#58d39b;--orange:#ff9c54;--violet:#a778ef;--spring:cubic-bezier(.22,1.35,.42,1);font-family:system-ui,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100svh;overflow-x:hidden;background:radial-gradient(circle at 15% 16%,#ed49701c,transparent 25%),radial-gradient(circle at 86% 30%,#42c8ff17,transparent 27%),#080808;-webkit-tap-highlight-color:transparent}button,a,input,select{touch-action:manipulation}button,input,select{font:inherit}button{color:inherit;cursor:pointer}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold-soft);outline-offset:3px}[hidden]{display:none!important}
.home-bar{position:sticky;top:0;z-index:30;display:flex;width:100%;min-height:calc(52px + env(safe-area-inset-top));align-items:center;justify-content:center;gap:10px;border-bottom:1px solid #f4dfa5;background:linear-gradient(110deg,#b18a38,#f0d98e 48%,#b18a38);color:#090806;padding-top:env(safe-area-inset-top);box-shadow:0 8px 28px #0009,inset 0 1px #fff8;font-size:.88rem;font-weight:850;letter-spacing:.16em;text-transform:uppercase}.home-bar:before{content:"\2190";font-size:1.15rem}.home-bar:focus-visible{outline:3px solid #fff;outline-offset:-5px}.preview-capture .home-bar{display:none}.preview-capture .game-shell{height:100svh}
.game-shell{width:min(100%,500px);height:calc(100svh - 52px - env(safe-area-inset-top));min-height:650px;margin:auto;padding:13px 16px calc(9px + env(safe-area-inset-bottom));display:flex;flex-direction:column}.topbar{margin-bottom:9px}.game-identity h1{color:var(--gold);font:500 31px/1 Georgia,serif}.top-actions{gap:5px}.player-name{max-width:150px}
.scorebar{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:8px;padding:8px 0;border-block:1px solid var(--line)}.scorebar.has-timer{grid-template-columns:repeat(4,1fr)}.scorebar>div{text-align:center;border-right:1px solid var(--line)}.scorebar>div:last-child{border:0}.scorebar span{display:block;color:var(--muted);font-size:9px;font-weight:750;letter-spacing:1.1px}.scorebar strong{display:flex;align-items:baseline;justify-content:center;color:#fff8e7;font-size:23px;line-height:1.15;font-variant-numeric:tabular-nums}.scorebar small{margin-left:2px;color:#948b7c;font-size:11px;font-weight:500}
.play-area{display:flex;flex:1;min-height:0;flex-direction:column}.bingo-card-wrap{position:relative;width:min(94vw,340px);margin-inline:auto;padding:7px;border:1px solid #877044;border-radius:16px;background:linear-gradient(145deg,#201a10,#0b0a09 70%);box-shadow:inset 0 0 0 3px #080807,0 14px 30px #000a}.bingo-heading{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:4px}.bingo-heading span{display:grid;height:25px;place-items:center;border-radius:7px;color:#0a0a09;font:900 15px/1 system-ui,sans-serif;text-shadow:0 1px #fff7}.bingo-heading span:nth-child(1){background:var(--pink)}.bingo-heading span:nth-child(2){background:var(--orange)}.bingo-heading span:nth-child(3){background:#f5d552}.bingo-heading span:nth-child(4){background:var(--green)}.bingo-heading span:nth-child(5){background:var(--blue)}
.bingo-card{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.bingo-cell{position:relative;display:grid;min-width:0;aspect-ratio:1;place-items:center;border:1px solid #6c604b;border-radius:9px;background:linear-gradient(145deg,#fff9ed,#d8cdb9);box-shadow:inset 0 2px #fff,0 3px 8px #0008;color:#17130d;font:750 clamp(18px,6.6vw,29px)/1 Georgia,serif;font-variant-numeric:tabular-nums;transition:transform .35s var(--spring),background .28s,box-shadow .28s}.bingo-cell[data-column="0"]{--mark:var(--pink)}.bingo-cell[data-column="1"]{--mark:var(--orange)}.bingo-cell[data-column="2"]{--mark:#f5d552}.bingo-cell[data-column="3"]{--mark:var(--green)}.bingo-cell[data-column="4"]{--mark:var(--blue)}.bingo-cell.is-marked{border-color:#fff;background:radial-gradient(circle at 34% 27%,#fff,#fff 8%,var(--mark) 12%,color-mix(in srgb,var(--mark),#111 18%) 72%);box-shadow:inset 0 0 0 3px #ffffff50,0 0 17px color-mix(in srgb,var(--mark),transparent 45%);color:#0b0a08;transform:scale(.91)}.bingo-cell.is-marked:after{content:"✓";position:absolute;right:4px;top:3px;display:grid;width:16px;height:16px;place-items:center;border-radius:50%;background:#111;color:#fff;font:800 10px/1 system-ui}.bingo-cell.is-new{animation:hit-pop .62s var(--spring)}.bingo-cell.is-joker{background:radial-gradient(circle,#fbefae 0 11%,#e85e82 12% 26%,#6f52c3 27% 42%,#17101f 43%);color:#fff;font:900 clamp(9px,2.7vw,13px)/1 system-ui;letter-spacing:.04em;text-shadow:0 2px 4px #000}.bingo-cell.is-joker:before{content:"★";display:block;position:absolute;top:16%;font-size:16px}.bingo-cell.is-joker span{transform:translateY(11px)}
.start-actions{display:grid;grid-template-columns:1fr 1.25fr;gap:8px;width:min(100%,340px);margin:auto auto 0}.shuffle-button,.start-button{display:flex;min-height:64px;align-items:center;justify-content:center;gap:8px;border-radius:13px;font-size:13px;font-weight:850}.shuffle-button{border:1px solid #8c7546;background:#17140f;color:var(--gold-soft)}.start-button{border:1px solid var(--gold);background:linear-gradient(145deg,#f0d88e,#bd913b);color:#111}.shuffle-button span,.start-button span{font-size:18px}.decision-row{display:grid;grid-template-columns:minmax(0,1fr) 78px minmax(0,1fr);align-items:stretch;gap:6px;margin-top:auto}.draw-window{position:relative;display:grid;min-height:70px;place-content:center;place-items:center;overflow:hidden;border:1px solid #a8853d;border-radius:13px;background:radial-gradient(circle,#2e2718,#0b0a08 73%);box-shadow:inset 0 0 0 2px #0b0906,0 7px 15px #0009;text-align:center}.draw-window:before{content:"";position:absolute;inset:4px;border:1px dashed #8d743d55;border-radius:9px}.draw-window span,.draw-window small{z-index:1;color:#bfb39e;font-size:7px;font-weight:800;letter-spacing:.1em}.draw-window strong{z-index:1;color:#fff4c9;font:650 32px/1 Georgia,serif;font-variant-numeric:tabular-nums;text-shadow:0 0 18px #e9c46c80}.draw-window.is-drawing strong{animation:ball-pulse .34s ease infinite alternate}.draw-window.is-hit{border-color:#fff2ae;box-shadow:inset 0 0 0 2px #0b0906,0 0 18px #e7c45b66}.choice-button{display:flex;min-width:0;min-height:70px;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:12px;padding:4px;font-size:9px;font-weight:800;line-height:1.12;text-align:center;transition:transform .25s var(--spring),filter .2s,opacity .2s}.choice-button>span{display:grid;width:23px;height:23px;place-items:center;border-radius:50%;font-size:11px}.accept-button{border:1px solid #4cc994;background:linear-gradient(145deg,#1d6e51,#104431);color:#f2fff8}.accept-button>span{background:#cbffe8;color:#11422f}.risk-button{border:1px solid #f06b92;background:linear-gradient(145deg,#7b2341,#491126);color:#fff5f8}.risk-button>span{background:#ffe1eb;color:#651833}.choice-button:disabled{filter:saturate(.25);opacity:.28}.choice-button:not(:disabled){box-shadow:inset 0 1px #fff3,0 0 17px color-mix(in srgb,currentColor,transparent 68%);color:#fff}.choice-button:not(:disabled):hover{filter:brightness(1.18)}.choice-button:not(:disabled):active{transform:scale(.95)}.choice-button.is-ready{animation:choice-ready .65s var(--spring)}.play-note{margin:6px 0 0;color:#978d7b;text-align:center;font-size:9px;line-height:1.3}
dialog{width:min(calc(100% - 28px),430px);max-height:calc(100dvh - 28px);margin:auto;overflow:auto;border:1px solid #9a7b3b;border-radius:20px;background:linear-gradient(145deg,#191713,#090909 70%);color:var(--ink);padding:22px;box-shadow:0 32px 110px #000e}dialog::backdrop{background:#000c;backdrop-filter:blur(8px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}.dialog-top h2,dialog h2{margin:0;color:var(--gold-soft);font:400 31px/1.05 Georgia,serif}.dialog-top .icon-button{width:38px;height:38px;font-size:17px}.select-row,.switch-row{display:flex;min-height:58px;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line)}.switch-row{cursor:pointer}.select-row>span,.switch-row span{font-size:14px}.select-row>span{display:grid;gap:3px}.select-row small{color:var(--muted);font-size:10px;font-weight:400;line-height:1.3}.select-row select{width:130px;min-height:40px;flex:0 0 130px;border:1px solid #75623e;border-radius:9px;background:#201d17;color:var(--ink);padding:6px 8px}.switch-row input{appearance:none;position:relative;width:40px;height:24px;margin:0;flex:0 0 40px;border:1px solid #8e836d;border-radius:20px;background:#39372f}.switch-row input:before{content:"";position:absolute;width:16px;height:16px;top:3px;left:3px;border-radius:50%;background:#f5f0e5;transition:transform .2s}.switch-row input:checked{border-color:var(--gold);background:var(--gold)}.switch-row input:checked:before{transform:translateX(16px);background:#111}.primary-button{display:flex;width:100%;min-height:49px;align-items:center;justify-content:center;border:1px solid var(--gold);border-radius:11px;background:var(--gold);color:#0a0906;font-weight:800}.primary-button:hover{background:var(--gold-soft)}#settings-form>.primary-button{margin-top:16px}.secondary-button{min-height:48px;border:1px solid #8f7543;border-radius:10px;background:transparent;padding:8px 12px}.dialog-buttons{display:flex;gap:8px;margin-top:22px}.dialog-buttons .primary-button{flex:1}.dialog-note{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.5}.rules h3{margin:22px 0 8px;color:var(--gold-soft);font:400 24px/1.1 Georgia,serif}.rules p,dialog>p{color:#d6cebd;font-size:14px;line-height:1.55}.control-rule{display:flex;align-items:flex-start;gap:12px;margin:12px 0}.control-rule p{margin:5px 0}.control-symbol{flex:0 0 36px;height:36px;display:grid;place-items:center;border:1px solid #554625;border-radius:50%;background:#15130e;color:#ecd59c;font-size:22px}.info-control{font:italic bold 20px Georgia,serif}.eyebrow{margin:0 0 9px;color:var(--gold);font-size:12px;font-weight:800;letter-spacing:1.5px}.account-benefit-prompt{margin-bottom:18px;padding:16px;border:1px solid #705b32;border-radius:14px;background:#d9bc780b}.account-benefit-prompt>strong{display:block;color:var(--gold-soft);font:400 24px/1.1 Georgia,serif}.account-benefit-prompt p{color:#d6cebd;font-size:13px;line-height:1.5}.account-benefit-eyebrow{display:block;margin-bottom:7px;color:var(--gold);font-size:10px;font-weight:850;letter-spacing:.13em}.account-benefit-actions{display:grid;gap:10px}.account-login-link{text-align:center;color:var(--gold-soft);font-size:12px;text-decoration:underline}.result-dialog{text-align:center}.result-mark{display:grid;width:74px;height:74px;place-items:center;margin:5px auto 16px;border:1px solid var(--gold);border-radius:50%;background:radial-gradient(circle,#f4d55c,#df5f81 48%,#7751c5);box-shadow:0 0 36px #d9bc7855;color:#fff;font-size:35px}.result-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}.result-stat-grid>div{padding:12px;border:1px solid #55452c;border-radius:11px;background:#0a0908}.result-stat-grid span{display:block;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.1em}.result-stat-grid strong{display:block;margin-top:4px;color:var(--gold-soft);font:500 34px/1 Georgia,serif}.result-close{width:100%;margin-top:9px}.reduced-motion *,.reduced-motion *:before,.reduced-motion *:after{animation:none!important;transition-duration:.01ms!important}
@keyframes hit-pop{0%{transform:scale(.76) rotate(-4deg)}55%{transform:scale(1.08) rotate(2deg)}100%{transform:scale(.91)}}@keyframes ball-pulse{to{transform:scale(1.15);opacity:.65}}@keyframes choice-ready{0%{transform:scale(.9)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
@media(max-width:370px){.game-shell{padding-inline:10px}.top-actions{gap:3px}.icon-button{width:35px;height:40px}.game-identity h1{font-size:27px}.bingo-card-wrap{padding:6px}.bingo-card,.bingo-heading{gap:4px}.decision-row{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);gap:5px}.choice-button,.draw-window{min-height:66px}.choice-button{font-size:8px}.message{font-size:11px}}
@media(max-height:730px){.game-shell{min-height:580px;padding-top:7px}.topbar{margin-bottom:5px}.scorebar{margin-bottom:5px;padding-block:5px}.message{min-height:29px;margin-bottom:4px}.bingo-card-wrap{padding:6px}.bingo-heading span{height:22px}.decision-row,.choice-button,.draw-window{min-height:62px}.start-actions button{min-height:56px}.draw-window strong{font-size:29px}.play-note{margin-top:4px}}
@media(min-width:700px) and (orientation:portrait){.game-shell{width:min(100%,744px);padding:14px 32px}.game-identity h1{font-size:40px}.scorebar span{font-size:11px}.scorebar strong{font-size:28px}.message{font-size:15px;min-height:38px;margin-bottom:9px}.bingo-card-wrap{width:min(100%,576px);margin-inline:auto;padding:12px}.bingo-heading,.bingo-card{gap:8px}.bingo-heading span{height:34px;font-size:21px}.bingo-cell{border-radius:13px;font-size:38px}.bingo-cell.is-joker{font-size:17px}.decision-row{grid-template-columns:1fr 112px 1fr;gap:10px}.choice-button,.draw-window{min-height:82px}.choice-button{font-size:12px}.choice-button>span{width:32px;height:32px;font-size:15px}.draw-window strong{font-size:43px}.start-actions{width:min(100%,520px)}.start-actions button{min-height:72px}.play-note{font-size:12px;margin-top:8px}}
@media(min-width:800px) and (orientation:landscape){.game-shell{width:min(100%,960px);height:calc(100svh - 52px);min-height:570px;display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:auto auto 1fr;column-gap:28px}.topbar,.scorebar{grid-column:1/-1}.play-area{grid-column:1/-1;display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:auto 1fr auto auto;column-gap:28px}.message{grid-column:1/-1}.bingo-card-wrap{grid-column:1;grid-row:2/5;align-self:center;width:min(100%,460px)}.decision-row,.start-actions{grid-column:2;grid-row:3;align-self:center}.decision-row{grid-template-columns:1fr 86px 1fr}.start-actions{width:100%}.play-note{grid-column:2;grid-row:4;align-self:start}.bingo-cell{font-size:28px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01ms!important}}

/* Final compact Bingo presentation: the draw window is number-only and the
   risk result appears directly over the card. */
.draw-window strong{font-size:50px;line-height:.9}
.risk-window{position:absolute;z-index:8;left:50%;top:57%;display:grid;width:min(72%,230px);min-height:82px;place-items:center;transform:translate(-50%,-50%);border:2px solid var(--gold-soft);border-radius:16px;background:radial-gradient(circle at 50% 30%,#3b3020,#0b0908 72%);box-shadow:0 16px 46px #000e,0 0 28px #d9bc7866;color:#fff4c9;text-align:center}
.risk-window strong{font:900 clamp(24px,8vw,36px)/1 system-ui,sans-serif;letter-spacing:.04em;text-shadow:0 2px 12px #000}
.risk-window.is-spinning{animation:risk-window-pulse .2s ease-in-out infinite alternate}
.risk-window.is-double{border-color:#63e8ac;background:radial-gradient(circle at 50% 30%,#287a58,#0b241a 72%);box-shadow:0 16px 46px #000e,0 0 32px #58d39b88}
.risk-window.is-nothing{border-color:#ff7da0;background:radial-gradient(circle at 50% 30%,#842746,#2b0c17 72%);box-shadow:0 16px 46px #000e,0 0 32px #f15d8388}
@keyframes risk-window-pulse{to{transform:translate(-50%,-50%) scale(1.035)}}
@media(max-height:730px){.draw-window strong{font-size:44px}.risk-window{min-height:72px}}
@media(min-width:700px) and (orientation:portrait){.draw-window strong{font-size:62px}.risk-window{min-height:104px}}
.scorebar{grid-template-columns:repeat(4,1fr)}
.scorebar.has-timer{grid-template-columns:repeat(5,1fr)}
.result-breakdown{display:grid;gap:6px;margin:14px 0;padding:10px;border:1px solid #55452c;border-radius:12px;background:#0a0908;text-align:left}
.result-breakdown>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:#d6cebd;font-size:12px}
.result-breakdown strong{flex:0 0 auto;color:var(--gold-soft);font-size:14px;font-variant-numeric:tabular-nums}
.result-breakdown .is-total{margin-top:3px;padding-top:8px;border-top:1px solid #55452c;color:#fff;font-weight:800}
.result-breakdown .is-total strong{font-size:19px}
.result-stat-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:370px){.game-identity h1{font-size:24px}.scorebar span{font-size:7px;letter-spacing:.7px}.scorebar strong{font-size:20px}}
.play-area{justify-content:center;gap:10px}
.decision-row,.start-actions{width:min(100%,340px);margin:0 auto}
.decision-row.is-choosing .accept-button{animation:accept-choice-glow 1.2s ease-in-out infinite}
.decision-row.is-choosing .risk-button{animation:risk-choice-glow 1.2s ease-in-out -.6s infinite}
@keyframes accept-choice-glow{0%,42%{filter:brightness(1.35);opacity:1;box-shadow:inset 0 1px #fff6,0 0 28px #58d39bcc,0 0 8px #fff8;transform:translateY(-1px)}50%,100%{filter:brightness(.72);opacity:.68;box-shadow:inset 0 1px #fff2,0 0 5px #58d39b33;transform:none}}
@keyframes risk-choice-glow{0%,42%{filter:brightness(1.38);opacity:1;box-shadow:inset 0 1px #fff6,0 0 28px #f15d83cc,0 0 8px #fff8;transform:translateY(-1px)}50%,100%{filter:brightness(.72);opacity:.68;box-shadow:inset 0 1px #fff2,0 0 5px #f15d8333;transform:none}}
@media(min-width:700px) and (orientation:portrait){.decision-row,.start-actions{width:min(100%,576px)}}
@media(min-width:800px) and (orientation:landscape){.play-area{justify-content:normal;gap:0}.decision-row,.start-actions{width:100%;margin:auto 0}}
