:root { --ink:#17251f; --cream:#f4f0e5; --paper:#fffdf6; --red:#eb4d3d; --yellow:#f1c94c; --mint:#a8d6b7; --line:rgba(23,37,31,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Manrope, sans-serif; }
button, input { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
.site-header { height:84px; padding:0 5.5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:10; }
.ad-slot { display:none; color:#849087; font-family:"DM Mono"; text-transform:uppercase; letter-spacing:.1em; text-align:center; font-size:8px; }
.ads-enabled .ad-slot { display:block; }
.ad-slot span { display:block; margin-bottom:6px; }
.ad-slot div { display:grid; place-items:center; border:1px dashed rgba(23,37,31,.18); background:rgba(255,255,255,.25); color:#a0aaa3; }
.ad-leaderboard { width:min(760px,calc(100% - 32px)); margin:18px auto; }
.ad-leaderboard div { height:90px; }
.ad-between { background:#e9e4d7; padding:22px max(16px,calc((100% - 970px)/2)); }
.ad-between div { height:120px; max-width:970px; margin:auto; }
.brand { color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:-.04em; display:flex; align-items:center; gap:10px; font-size:19px; }
.brand-ball { width:34px; height:34px; display:grid; place-items:center; color:var(--cream); background:var(--red); border-radius:50%; font-family:"Young Serif"; font-weight:400; box-shadow:inset -3px -4px 0 rgba(0,0,0,.12); }
nav { display:flex; align-items:center; gap:36px; }
nav a { color:var(--ink); text-decoration:none; font-size:14px; font-weight:700; }
.core-link { position:relative; font-weight:800; }
.core-link::after { content:""; position:absolute; left:0; right:0; bottom:-8px; height:3px; background:var(--red); transform:scaleX(.28); transform-origin:left; transition:.15s; }
.core-link:hover::after { transform:scaleX(1); }
.tool-nav-group { display:flex; align-items:center; gap:18px; margin-left:2px; padding-left:22px; border-left:1px solid var(--line); }
.tool-nav-group a { padding:7px 10px; border-radius:100px; background:rgba(23,37,31,.055); font-family:"DM Mono"; font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.tool-nav-group a:hover { background:var(--yellow); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.language-picker select { appearance:none; min-width:132px; border:2px solid var(--ink); border-radius:100px; padding:10px 28px 10px 13px; background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%2317251f' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; color:var(--ink); font-family:Manrope,sans-serif; font-size:12px; font-weight:800; cursor:pointer; box-shadow:2px 2px 0 rgba(23,37,31,.16); }
.language-picker { position:relative; }
.custom-language { position:relative; z-index:30; }
.language-trigger { min-width:148px; height:43px; padding:7px 11px; display:flex; align-items:center; gap:9px; border:2px solid var(--ink); border-radius:100px; background:var(--paper); color:var(--ink); font-size:12px; font-weight:800; cursor:pointer; box-shadow:2px 2px 0 rgba(23,37,31,.16); }
.language-trigger i { margin-left:auto; font-style:normal; font-size:14px; }
.flag-svg { width:27px; height:18px; flex:none; display:block; overflow:hidden; border:1px solid rgba(23,37,31,.25); border-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,.12); }
.flag-svg svg { display:block; width:100%; height:100%; }
.language-menu { display:none; position:absolute; top:calc(100% + 8px); right:0; width:190px; padding:7px; border:2px solid var(--ink); border-radius:10px; background:var(--paper); box-shadow:7px 8px 0 var(--ink); }
.custom-language.open .language-menu { display:grid; gap:3px; }
.language-menu button { width:100%; padding:9px 8px; display:flex; align-items:center; gap:10px; border:0; border-radius:6px; background:transparent; color:var(--ink); font-size:12px; font-weight:700; text-align:left; cursor:pointer; }
.language-menu button:hover,.language-menu button[aria-selected="true"] { background:var(--yellow); }
.language-menu button b { margin-left:auto; }
.nav-cards { border:2px solid var(--ink); background:var(--yellow); border-radius:100px; padding:11px 18px; cursor:pointer; font-weight:800; box-shadow:3px 3px 0 var(--ink); transition:.15s; }
.nav-cards:hover { transform:translate(-1px,-1px); background:#f7d962; box-shadow:4px 4px 0 var(--ink); }
.nav-cards span { margin-left:5px; }
.nav-custom { display:inline-flex; align-items:center; gap:6px; padding:10px 15px; border:2px solid var(--ink); border-radius:100px; background:var(--paper); color:var(--ink); font-size:12px; font-weight:800; line-height:1; text-decoration:none; box-shadow:3px 3px 0 var(--red); transition:.15s; white-space:nowrap; }
.nav-custom:hover { transform:translate(-1px,-1px); background:#fff8dc; box-shadow:4px 4px 0 var(--red); }
.nav-custom span { color:var(--red); font-size:15px; }
.hero { min-height:690px; display:grid; grid-template-columns:1.04fr .96fr; overflow:hidden; }
.hero-copy { padding:24px 4vw 64px 8vw; position:relative; z-index:2; }
.eyebrow { margin:0 0 24px; text-transform:uppercase; letter-spacing:.16em; font-family:"DM Mono"; font-size:11px; font-weight:500; display:flex; align-items:center; gap:9px; }
.eyebrow > span { width:24px; height:2px; background:var(--red); display:block; }
.eyebrow.light { color:#d9e1db; }
.eyebrow.light > span { background:var(--yellow); }
h1,h2 { font-family:"Young Serif", serif; font-weight:400; letter-spacing:-.045em; margin:0; line-height:.92; }
h1 { font-size:clamp(70px,8vw,120px); }
h1 em, h2 em { color:var(--red); font-style:italic; }
.hero-sub { max-width:560px; font-size:18px; line-height:1.65; margin:20px 0 22px; color:#405048; }
.hero-actions { display:flex; align-items:center; gap:28px; }
.start-button, .dark-button { display:inline-flex; justify-content:space-between; align-items:center; gap:45px; padding:18px 22px; background:var(--red); color:white; border:none; border-radius:3px; text-transform:uppercase; letter-spacing:.08em; font-size:13px; font-weight:800; text-decoration:none; cursor:pointer; box-shadow:5px 5px 0 var(--ink); transition:.15s; }
.start-button { position:relative; min-width:290px; padding:19px 18px 19px 24px; gap:15px; font-size:15px; border:3px solid var(--ink); box-shadow:8px 8px 0 var(--yellow),11px 11px 0 var(--ink); overflow:visible; }
.start-button:hover { transform:translate(-3px,-3px) rotate(-1deg); box-shadow:11px 11px 0 var(--yellow),14px 14px 0 var(--ink); }
.start-spark { position:absolute; top:-18px; left:-15px; color:var(--yellow); font-size:27px; text-shadow:2px 2px 0 var(--ink); animation:twinkle 1.8s ease-in-out infinite; }
@keyframes twinkle {50%{transform:rotate(30deg) scale(1.25)}}
.button-ball { margin-left:auto; width:38px; height:38px; display:grid; place-items:center; background:var(--yellow); color:var(--ink); border:2px solid var(--ink); border-radius:50%; font-family:"Young Serif"; font-size:21px; letter-spacing:0; box-shadow:2px 2px 0 var(--ink); }
.button-arrow { font-size:22px; transition:.15s; }
.start-button:hover .button-arrow { transform:translateX(4px); }
.start-button:hover, .dark-button:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.text-button { border:2px solid var(--ink); padding:12px 17px; background:var(--paper); color:var(--ink); border-radius:100px; cursor:pointer; font-weight:800; box-shadow:3px 3px 0 var(--yellow); transition:.15s; }
.text-button::after { content:' ↗'; color:var(--red); font-size:16px; }
.text-button:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--yellow); }
.hero-proof { display:flex; align-items:center; gap:14px; margin-top:67px; }
.hero-proof p { font-size:12px; margin:0; line-height:1.5; color:#52625a; }
.hero-proof strong { color:var(--ink); }
.mini-balls { display:flex; }
.mini-balls span { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; border:2px solid var(--cream); margin-left:-8px; color:white; font-family:"DM Mono"; font-size:10px; background:var(--red); }
.mini-balls span:nth-child(2){background:var(--ink)} .mini-balls span:nth-child(3){background:#6fa781}
.hero-art { position:relative; background:var(--yellow); min-height:650px; overflow:hidden; }
.burst { position:absolute; inset:0; background:repeating-conic-gradient(from 7deg at 52% 49%, rgba(255,255,255,.24) 0deg 7deg, transparent 7deg 18deg); }
.big-ball { width:min(30vw,420px); height:min(30vw,420px); border-radius:50%; background:var(--paper); position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-4deg); display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:16px 22px 0 rgba(23,37,31,.18), inset -18px -22px 0 rgba(0,0,0,.045); border:3px solid var(--ink); }
.big-ball small { min-width:58px; height:49px; padding:0 10px; display:grid; place-items:center; border:3px solid var(--ink); border-radius:100px; background:var(--red); color:white; font-family:Manrope; font-size:clamp(24px,2.5vw,34px); font-weight:800; line-height:1; box-shadow:3px 4px 0 var(--ink); transform:translateY(-8px) rotate(-3deg); }
.big-ball strong { font-family:"Young Serif"; font-weight:400; font-size:clamp(90px,12vw,168px); line-height:.8; }
.orbit-ball { position:absolute; width:80px; height:80px; border:2px solid var(--ink); border-radius:50%; display:grid; place-content:center; place-items:center; row-gap:3px; text-align:center; line-height:1; font-family:"DM Mono"; font-size:11px; box-shadow:5px 7px 0 rgba(23,37,31,.2); }
.orbit-ball em { min-width:24px; height:19px; padding:0 5px; display:grid; place-items:center; background:var(--red); color:white; border:1.5px solid var(--ink); border-radius:100px; font-family:Manrope; font-style:normal; font-size:11px; font-weight:800; box-shadow:1px 1px 0 var(--ink); transform:rotate(-3deg); }
.orbit-ball b { font-family:"Young Serif"; font-size:30px; font-weight:400; }
.ball-1 { background:var(--mint); top:12%; left:13%; transform:rotate(-10deg); }
.ball-2 { background:var(--red); color:white; bottom:12%; right:9%; transform:rotate(13deg); }
.ball-3 { background:var(--paper); top:11%; right:6%; width:58px; height:58px; }
.ball-3 b { font-size:21px; }
.scribble { font-family:"Young Serif"; font-style:italic; font-size:25px; transform:rotate(-8deg); position:absolute; bottom:12%; left:7%; }
.caller-section { background:var(--ink); color:var(--paper); padding:90px 7vw 100px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:45px; }
.section-heading h2, .promo-copy h2, .how-intro h2, .occasion-copy h2, dialog h2 { font-size:clamp(54px,6.2vw,88px); }
.game-badge { border:1px solid rgba(255,255,255,.3); border-radius:100px; padding:12px 20px; font-family:"DM Mono"; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:#d8e0db; }
.game-layout { display:grid; grid-template-columns:.88fr 1.12fr; gap:24px; }
.caller-card { background:var(--paper); color:var(--ink); border-radius:4px; padding:24px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.caller-topline { width:100%; display:flex; justify-content:space-between; text-transform:uppercase; font-family:"DM Mono"; font-size:10px; letter-spacing:.11em; }
.live-dot { color:var(--red); }
.live-dot:before { content:""; display:inline-block; width:7px; height:7px; background:var(--red); border-radius:50%; margin-right:5px; animation:pulse 1.5s infinite; }
@keyframes pulse {50%{opacity:.35}}
.current-ball { width:230px; height:230px; background:var(--yellow); border:3px solid var(--ink); border-radius:50%; margin:24px 0 16px; display:grid; place-content:center; place-items:center; row-gap:16px; box-shadow:9px 11px 0 rgba(23,37,31,.16), inset -10px -13px 0 rgba(0,0,0,.05); transition:.2s; }
.current-ball.pop { animation:pop .3s ease-out; }
@keyframes pop {0%{transform:scale(.75) rotate(-8deg)}75%{transform:scale(1.05)}100%{transform:scale(1)}}
.current-ball.spin-in { animation:spin-in .5s cubic-bezier(.2,.85,.3,1.15); }
@keyframes spin-in {0%{transform:scale(.35) rotate(-220deg);opacity:0}75%{transform:scale(1.06) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.current-ball.bounce-in { animation:bounce-in .55s cubic-bezier(.25,.8,.25,1); }
@keyframes bounce-in {0%{transform:translateY(-85px) scale(.8);opacity:0}55%{transform:translateY(12px) scale(1.03)}78%{transform:translateY(-7px)}100%{transform:translateY(0) scale(1)}}
.current-ball.flip-in { animation:flip-in .5s ease-out; }
@keyframes flip-in {0%{transform:perspective(500px) rotateY(100deg) scale(.7);opacity:0}70%{transform:perspective(500px) rotateY(-10deg) scale(1.03)}100%{transform:perspective(500px) rotateY(0) scale(1)}}
.current-ball span { font-family:Manrope,sans-serif; color:white; background:var(--red); min-width:64px; height:55px; padding:0 12px; border:3px solid var(--ink); border-radius:100px; display:grid; place-items:center; font-size:42px; font-weight:800; line-height:1; letter-spacing:.03em; box-shadow:3px 4px 0 var(--ink); transform:translateY(-12px) rotate(-3deg); }
.current-ball span:empty { display:none; }
.current-ball strong { font-family:"Young Serif"; font-size:104px; font-weight:700; line-height:.78; text-align:center; font-variant-numeric:tabular-nums; transform:translateY(-3px); }
.current-ball.empty { background:#e8e4da; }
.call-phrase { font-family:"Young Serif"; font-style:italic; font-size:18px; margin:4px 0 24px; }
.next-button { width:100%; padding:18px 20px; display:flex; justify-content:space-between; background:var(--red); border:0; color:white; text-transform:uppercase; letter-spacing:.11em; font-size:12px; font-weight:800; cursor:pointer; }
.utility-row { width:100%; display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin-top:10px; }
.utility-row button { border:0; background:transparent; padding:10px 3px; font-size:10px; font-weight:800; text-transform:uppercase; cursor:pointer; color:var(--ink); }
.utility-row button:disabled { opacity:.3; cursor:not-allowed; }
.utility-row span { display:block; font-size:19px; font-weight:400; margin-bottom:3px; }
.board-panel { border:1px solid rgba(255,255,255,.18); padding:25px; border-radius:4px; }
.board-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.board-header h3 { margin:0; font-family:"Young Serif"; font-weight:400; font-size:25px; }
.board-header span { font-family:"DM Mono"; font-size:11px; color:#aebbb4; }
.number-board { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; align-items:start; }
.number-column { min-width:0; }
.column-letter { height:44px; display:grid; place-items:center; margin-bottom:8px; border-radius:3px; background:rgba(255,255,255,.08); color:var(--yellow); font-family:"Young Serif"; font-size:28px; font-weight:400; }
.column-numbers { display:grid; grid-template-rows:repeat(5,1fr); grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; }
.number-cell { aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(255,255,255,.13); border-radius:50%; color:#8d9b94; font-family:"DM Mono"; font-size:clamp(10px,1vw,14px); font-weight:500; line-height:1; transition:.18s; }
.number-cell.called { color:var(--ink); background:var(--yellow); border-color:var(--yellow); font-size:clamp(13px,1.3vw,18px); font-weight:800; transform:scale(1.08); }
.number-cell.latest { background:var(--red); color:white; border-color:var(--red); box-shadow:0 0 0 3px rgba(235,77,61,.22); }
.board-hint { display:flex; align-items:center; gap:8px; color:#8f9d96; font-size:10px; margin:18px 0 0; }
.board-hint span { width:7px; height:7px; border-radius:50%; background:var(--yellow); }
.cards-promo { min-height:650px; display:grid; grid-template-columns:1fr 1fr; background:var(--yellow); overflow:hidden; }
.cards-stack { position:relative; min-height:620px; }
.sample-card { width:330px; height:430px; position:absolute; top:50%; left:50%; border:2px solid var(--ink); background:var(--paper); box-shadow:12px 16px 0 rgba(23,37,31,.18); }
.back-card { transform:translate(-59%,-51%) rotate(-10deg); background:var(--red); }
.front-card { transform:translate(-43%,-48%) rotate(4deg); padding:24px; }
.sample-title { text-align:center; font-family:"Young Serif"; font-size:48px; letter-spacing:.13em; }
.sample-grid { display:grid; grid-template-columns:repeat(5,1fr); margin-top:15px; border:1px solid var(--ink); }
.sample-grid span { aspect-ratio:1; display:grid; place-items:center; border:1px solid var(--ink); font-family:"DM Mono"; font-size:11px; }
.sample-grid span.free { background:var(--red); color:white; font-size:8px; }
.promo-copy { align-self:center; padding:80px 8vw 80px 4vw; }
.promo-copy p:not(.eyebrow):not(.fine-print) { max-width:480px; line-height:1.65; color:#465148; }
.dark-button { background:var(--ink); box-shadow:5px 5px 0 var(--red); margin-top:16px; border:2px solid var(--ink); }
.dark-button:hover { box-shadow:7px 7px 0 var(--red); }
.custom-bingo-link { display:inline-flex; align-items:center; gap:12px; width:max-content; margin-top:25px; padding:14px 18px; border:2px solid var(--ink); border-radius:3px; background:var(--paper); color:var(--ink); font-size:15px; font-weight:800; text-decoration:none; box-shadow:4px 4px 0 var(--red); transition:.15s; }
.custom-bingo-link:hover { transform:translate(-1px,-1px); box-shadow:6px 6px 0 var(--red); }
.custom-bingo-link span { color:var(--red); }
.fine-print { font-family:"DM Mono"; font-size:9px; text-transform:uppercase; letter-spacing:.08em; margin-top:18px; }
.how-section { padding:110px 8vw; display:grid; grid-template-columns:1fr 1.15fr; gap:9vw; }
.how-intro h2 { font-size:clamp(50px,5.5vw,78px); }
.steps { list-style:none; padding:0; margin:0; }
.steps li { display:grid; grid-template-columns:75px 1fr; gap:20px; padding:25px 0; border-top:1px solid var(--line); }
.steps li:last-child { border-bottom:1px solid var(--line); }
.steps > li > span { font-family:"Young Serif"; font-style:italic; color:var(--red); font-size:27px; }
.steps h3 { margin:2px 0 8px; font-family:"Young Serif"; font-weight:400; font-size:24px; }
.steps p { margin:0; color:#5a675f; font-size:14px; line-height:1.6; }
.occasions { background:var(--red); color:white; padding:90px 8vw; display:grid; grid-template-columns:1fr 1.2fr; gap:9vw; }
.occasion-copy h2 em { color:var(--yellow); }
.occasion-list { display:flex; flex-wrap:wrap; align-content:center; gap:12px; }
.occasion-list span { border:1px solid rgba(255,255,255,.55); border-radius:100px; padding:15px 20px; font-family:"DM Mono"; text-transform:uppercase; letter-spacing:.08em; font-size:11px; transform:rotate(-2deg); }
.occasion-list span:nth-child(even) { transform:rotate(2deg); background:var(--paper); color:var(--ink); }
footer { padding:48px 7vw; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; font-size:12px; }
footer > p { margin:0; color:#657169; }
.footer-center { text-align:center; }
.footer-center > p { margin:0 0 10px; color:#657169; }
.legal-nav { display:flex; gap:18px; justify-content:center; }
.legal-nav a { color:var(--ink); font-size:11px; text-decoration:underline; text-underline-offset:3px; }
.copyright { text-align:right; }
.info-main { width:min(850px,calc(100% - 36px)); margin:70px auto 100px; }
.info-hero { padding-bottom:45px; border-bottom:1px solid var(--line); }
.info-hero h1 { font-size:clamp(54px,8vw,92px); }
.info-hero p { max-width:680px; color:#536159; line-height:1.7; }
.policy-section { padding:52px 0; border-bottom:1px solid var(--line); scroll-margin-top:30px; }
.policy-section h2 { font-size:clamp(38px,5vw,58px); margin-bottom:24px; }
.policy-section h3 { font-family:"Young Serif"; font-size:22px; font-weight:400; margin:30px 0 8px; }
.policy-section p,.policy-section li { color:#46534c; line-height:1.75; font-size:14px; }
.policy-section a { color:var(--red); }
.policy-section .updated { font-family:"DM Mono"; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.info-language-nav { gap:9px; }
.info-language-nav a { padding:8px 10px; border:1.5px solid var(--ink); border-radius:100px; font-family:"DM Mono"; font-size:9px; }
.tool-main { min-height:70vh; }
.tool-hero { display:grid; grid-template-columns:.8fr 1.2fr; min-height:650px; background:var(--ink); color:var(--paper); }
.tool-intro { padding:90px 5vw 70px 8vw; display:flex; flex-direction:column; justify-content:center; }
.tool-intro h1 { font-size:clamp(62px,8vw,108px); }
.tool-intro h1 em { display:block; }
.tool-intro > p:not(.eyebrow) { max-width:500px; color:#bdc7c1; line-height:1.7; }
.tool-stage { margin:36px; padding:34px; background:var(--paper); color:var(--ink); border-radius:5px; display:flex; flex-direction:column; justify-content:center; box-shadow:12px 14px 0 var(--yellow); }
.tool-controls { display:flex; align-items:end; gap:14px; margin-bottom:28px; }
.control-field { flex:1; }
.control-field label,.check-control > span { display:block; margin-bottom:8px; font-family:"DM Mono"; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; }
.control-field select { width:100%; padding:13px 14px; border:1.5px solid var(--ink); background:white; font-weight:800; }
.check-control { flex:1; display:flex; align-items:center; gap:10px; min-height:46px; padding:10px 12px; border:1.5px solid var(--ink); cursor:pointer; }
.check-control > span { margin:0; }
.check-control input { width:18px; height:18px; accent-color:var(--red); }
.tool-results { min-height:270px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px; padding:25px; background:var(--cream); border:1px solid var(--line); }
.die { width:100px; height:100px; padding:14px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); border:3px solid var(--ink); border-radius:16px; background:white; box-shadow:6px 7px 0 var(--red); }
.die.rolling { animation:dice-roll .5s ease-out; }
@keyframes dice-roll {0%{transform:rotate(-25deg) scale(.45)}55%{transform:rotate(15deg) scale(1.1)}100%{transform:rotate(0) scale(1)}}
.pip { width:13px; height:13px; place-self:center; border-radius:50%; background:var(--ink); }
.pip.p1{grid-area:1/1}.pip.p2{grid-area:1/3}.pip.p3{grid-area:2/1}.pip.p4{grid-area:2/2}.pip.p5{grid-area:2/3}.pip.p6{grid-area:3/1}.pip.p7{grid-area:3/3}
.playing-card { width:112px; height:158px; position:relative; padding:9px; border:2px solid var(--ink); border-radius:8px; background:white; box-shadow:5px 6px 0 rgba(23,37,31,.2); font-family:Georgia,serif; }
.playing-card.red { color:#d63630; }
.playing-card.dealing { animation:card-deal .45s ease-out; }
@keyframes card-deal {0%{transform:translateY(-70px) rotate(-18deg);opacity:0}100%{transform:translateY(0) rotate(0);opacity:1}}
.card-corner { position:absolute; top:8px; left:9px; display:flex; flex-direction:column; align-items:center; font-size:21px; font-weight:700; line-height:.85; }
.card-corner-right { left:auto; right:9px; }
.card-corner-bottom { top:auto; left:auto; right:9px; bottom:8px; transform:rotate(180deg); }
.card-corner-bottom-left { left:9px; right:auto; }
.card-center { height:100%; display:grid; place-items:center; font-size:55px; }
.joker-card { color:var(--red); background:repeating-conic-gradient(from 10deg,#fff 0 12deg,#f7e9b8 12deg 24deg); }
.joker-card .card-center { font-size:33px; font-weight:700; transform:rotate(-8deg); }
.joker-card .card-corner { font-family:Manrope,sans-serif; font-size:10px; letter-spacing:.04em; }
.tool-button { width:100%; margin-top:18px; padding:19px 22px; display:flex; justify-content:space-between; border:3px solid var(--ink); background:var(--red); color:white; text-transform:uppercase; letter-spacing:.09em; font-size:13px; font-weight:800; cursor:pointer; box-shadow:6px 6px 0 var(--yellow),9px 9px 0 var(--ink); transition:.15s; }
.tool-button:hover { transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--yellow),11px 11px 0 var(--ink); }
.result-summary { min-height:22px; margin:20px 0 0; text-align:center; font-family:"DM Mono"; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
body[data-tool="dice"] .result-summary { min-height:58px; margin-top:24px; color:var(--ink); font-family:"Young Serif",serif; font-size:clamp(38px,5vw,64px); font-weight:700; line-height:1; letter-spacing:-.03em; text-transform:none; }
.tool-content { width:min(1000px,calc(100% - 36px)); margin:90px auto; display:grid; grid-template-columns:1fr 1fr; gap:70px; }
.tool-content h2 { font-size:clamp(42px,5vw,64px); }
.tool-content h3 { font-family:"Young Serif"; font-size:23px; font-weight:400; margin:28px 0 7px; }
.tool-content p { color:#526058; line-height:1.75; font-size:14px; }
.custom-builder { display:grid; grid-template-columns:.8fr 1.2fr; min-height:720px; background:var(--ink); color:var(--paper); }
.builder-controls { padding:65px 4vw 70px 7vw; }
.builder-controls h1 { font-size:clamp(55px,6vw,82px); margin-bottom:22px; }
.builder-controls > p { color:#b8c3bd; line-height:1.65; }
.builder-field { margin-top:22px; }
.builder-field label,.builder-field legend { display:block; margin-bottom:8px; color:#e9eee9; font-family:"DM Mono"; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; }
.builder-field input,.builder-field select,.builder-field textarea { width:100%; padding:12px 13px; border:1.5px solid #7d8a83; border-radius:2px; background:#21322a; color:white; font:600 13px Manrope,sans-serif; }
.builder-field textarea { min-height:190px; resize:vertical; line-height:1.5; }
.builder-field-row { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.builder-check { display:flex; align-items:center; gap:10px; color:white; font-size:13px; cursor:pointer; }
.builder-check input { width:18px; height:18px; accent-color:var(--yellow); }
.builder-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:25px; }
.builder-actions button { padding:14px 15px; border:2px solid var(--paper); background:transparent; color:white; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; cursor:pointer; }
.builder-actions .builder-primary { grid-column:1/-1; padding:17px; border-color:var(--yellow); background:var(--yellow); color:var(--ink); box-shadow:5px 5px 0 var(--red); }
.builder-preview-panel { padding:55px 5vw; display:flex; flex-direction:column; justify-content:center; background:var(--cream); color:var(--ink); }
.builder-preview-top { display:flex; justify-content:space-between; align-items:end; margin-bottom:18px; }
.builder-preview-top h2 { font-size:38px; }
.builder-preview-top span { font-family:"DM Mono"; font-size:10px; text-transform:uppercase; }
.custom-card-preview { position:relative; width:min(100%,570px); margin:auto; padding:28px; border:5px solid var(--preview-accent,var(--red)); background:var(--preview-bg,var(--paper)); color:var(--preview-ink,var(--ink)); box-shadow:12px 14px 0 rgba(23,37,31,.16); overflow:hidden; }
.custom-card-preview > h3,.custom-card-preview > .word-grid { position:relative; z-index:1; }
.custom-card-art { position:absolute; inset:9px; color:var(--preview-accent); pointer-events:none; opacity:.82; }
.custom-card-art i { position:absolute; width:44px; height:44px; font-style:normal; }
.custom-card-art i:nth-child(1){top:0;left:0}.custom-card-art i:nth-child(2){top:0;right:0}.custom-card-art i:nth-child(3){bottom:0;left:0}.custom-card-art i:nth-child(4){bottom:0;right:0}
.custom-card-art svg { display:block; width:100%; height:100%; }
.custom-card-art svg g { fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.custom-card-preview h3 { margin:0 0 20px; text-align:center; font-family:"Young Serif"; font-size:31px; font-weight:400; }
.word-grid { display:grid; grid-template-columns:repeat(var(--grid-size,5),1fr); border:1px solid currentColor; }
.word-cell { min-width:0; aspect-ratio:1; padding:5px; display:grid; place-items:center; border:1px solid currentColor; text-align:center; font-size:clamp(7px,1vw,12px); font-weight:800; line-height:1.18; overflow-wrap:anywhere; }
.word-cell.free { background:var(--preview-accent,var(--red)); color:var(--preview-bg,var(--paper)); }
.builder-message { min-height:20px; margin:18px 0 0; text-align:center; color:#56655d; font-size:12px; }
.template-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.template-chips button { padding:8px 11px; border:1px solid #87938d; border-radius:100px; background:transparent; color:#dfe5e1; font-size:10px; cursor:pointer; }
.template-chips button:hover,.template-chips button.active { border-color:var(--yellow); background:var(--yellow); color:var(--ink); }
dialog { width:min(940px,calc(100vw - 30px)); max-height:92vh; padding:0; border:0; border-radius:4px; background:var(--paper); color:var(--ink); box-shadow:14px 18px 0 rgba(0,0,0,.2); }
dialog::backdrop { background:rgba(12,23,18,.78); backdrop-filter:blur(4px); }
.dialog-inner { padding:48px; position:relative; }
.dialog-close { position:absolute; right:18px; top:14px; border:0; background:transparent; font-size:30px; cursor:pointer; }
dialog h2 { font-size:52px; }
.dialog-sub { color:#59665f; }
#cardsForm label { display:block; font-size:12px; text-transform:uppercase; font-weight:800; letter-spacing:.08em; margin:30px 0 10px; }
.count-row { display:grid; grid-template-columns:55px 1fr 55px; border:1.5px solid var(--ink); }
.count-row button { border:0; background:var(--cream); font-size:25px; cursor:pointer; }
.count-row input { width:100%; border:0; border-left:1px solid var(--ink); border-right:1px solid var(--ink); text-align:center; font-family:"Young Serif"; font-size:28px; background:white; }
#cardTheme { width:100%; padding:14px 15px; border:1.5px solid var(--ink); background:white; color:var(--ink); font-weight:700; cursor:pointer; }
.theme-gallery { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:15px; max-height:320px; overflow:auto; padding:3px; }
.theme-preview { position:relative; min-width:0; padding:10px 8px 8px; border:2px solid transparent; background:var(--preview-bg); color:var(--preview-ink); cursor:pointer; box-shadow:0 2px 7px rgba(23,37,31,.12); transition:.16s; }
.theme-preview:hover { transform:translateY(-2px); }
.theme-preview.selected { border-color:var(--red); box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--red); }
.preview-art { position:absolute; inset:3px; pointer-events:none; color:var(--preview-accent); }
.preview-art i { position:absolute; font-size:10px; font-style:normal; line-height:1; }
.preview-art i:nth-child(1){top:0;left:0}.preview-art i:nth-child(2){top:0;right:0}.preview-art i:nth-child(3){bottom:0;left:0}.preview-art i:nth-child(4){bottom:0;right:0}
.preview-art svg { width:15px; height:15px; overflow:visible; }
.preview-art svg g { fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.preview-art svg text { fill:currentColor; stroke:none; font:bold 16px Manrope,sans-serif; text-anchor:middle; }
.theme-preview > strong { display:block; font-family:"Young Serif"; font-size:16px; letter-spacing:.08em; margin:3px 0 7px; }
.preview-grid { display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--preview-ink); }
.preview-grid i { display:grid; place-items:center; aspect-ratio:1; border:.5px solid var(--preview-ink); font-family:"DM Mono"; font-size:5px; font-style:normal; }
.preview-grid i.free { background:var(--preview-accent); color:var(--preview-bg); }
.theme-preview small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-top:7px; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.generate-button { margin-top:16px; width:100%; padding:17px 20px; display:flex; justify-content:space-between; border:0; background:var(--red); color:white; text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:800; cursor:pointer; }
.dialog-note { font-size:10px; color:#6d7871; text-align:center; }
#printArea { display:none; }
.caller-section:fullscreen { width:100vw; height:100vh; padding:24px 3vw; overflow:hidden; display:flex; flex-direction:column; }
.caller-section:fullscreen .section-heading { margin-bottom:18px; }
.caller-section:fullscreen .section-heading h2 { font-size:48px; }
.caller-section:fullscreen .section-heading .eyebrow { display:none; }
.caller-section:fullscreen .game-layout { flex:1; min-height:0; grid-template-columns:minmax(380px,.72fr) minmax(600px,1.28fr); }
.caller-section:fullscreen .caller-card { justify-content:center; padding:18px; }
.caller-section:fullscreen .current-ball { width:min(36vh,340px); height:min(36vh,340px); margin:12px 0; }
.caller-section:fullscreen .current-ball span { min-width:90px; height:74px; font-size:clamp(52px,6.5vh,72px); }
.caller-section:fullscreen .current-ball strong { font-size:clamp(110px,18vh,180px); }
.caller-section:fullscreen .call-phrase { margin:2px 0 14px; font-size:22px; }
.caller-section:fullscreen .board-panel { padding:16px 22px; overflow:hidden; }
.caller-section:fullscreen .number-board { gap:10px; }
.caller-section:fullscreen .column-numbers { gap:clamp(4px,.7vh,8px); }
.caller-section:fullscreen .number-cell { font-size:clamp(12px,1.7vh,18px); }
.caller-section:fullscreen .number-cell.called { font-size:clamp(15px,2vh,21px); }
.caller-section:fullscreen .board-hint { display:none; }
@media(max-width:900px){
  .site-header .core-link,.site-header .tool-nav-group { display:none; } .site-header{padding:0 5vw}.site-header nav{gap:12px}.nav-custom{font-size:0;width:42px;height:42px;padding:0;justify-content:center}.nav-custom span{font-size:18px}.hero{grid-template-columns:1fr}.hero-copy{padding:75px 7vw}.hero-art{min-height:520px}.big-ball{width:310px;height:310px}.game-layout,.cards-promo,.how-section,.occasions{grid-template-columns:1fr}.cards-stack{min-height:520px}.promo-copy{padding:60px 8vw 90px}.how-section{gap:60px}.occasions{gap:50px}footer{grid-template-columns:1fr;gap:22px;text-align:center}.copyright{text-align:center}.theme-gallery{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:900px){.tool-hero,.tool-content{grid-template-columns:1fr}.tool-intro{padding:70px 7vw}.tool-stage{margin:0 5vw 70px}.tool-content{gap:25px}.tool-results{min-height:230px}}
@media(max-width:900px){.custom-builder{grid-template-columns:1fr}.builder-controls{padding:60px 7vw}.builder-preview-panel{padding:60px 7vw}}
@media(max-width:560px){
  .site-header{height:70px}.nav-cards{padding:9px 13px}.hero{min-height:auto}.hero-copy{padding:65px 6vw 55px}h1{font-size:64px}.hero-sub{font-size:16px}.hero-actions{align-items:flex-start;flex-direction:column;gap:16px}.hero-proof{margin-top:42px}.hero-art{min-height:430px}.big-ball{width:260px;height:260px}.ball-1{left:5%}.ball-2{right:3%}.caller-section{padding:70px 5vw}.section-heading{align-items:flex-start;gap:25px;flex-direction:column}.game-layout{gap:16px}.current-ball{width:190px;height:190px}.current-ball span{min-width:56px;height:47px;padding:0 9px;font-size:36px}.current-ball strong{font-size:84px}.utility-row{grid-template-columns:repeat(2,1fr)}.number-board{gap:5px}.column-letter{height:34px;font-size:22px}.column-numbers{grid-template-rows:repeat(5,1fr);grid-auto-flow:column;grid-auto-columns:1fr;gap:3px}.number-cell{aspect-ratio:auto;height:25px;font-size:9px}.number-cell.called{font-size:12px}.board-panel{padding:16px}.cards-stack{min-height:450px}.sample-card{width:260px;height:350px}.front-card{padding:18px}.sample-title{font-size:38px}.how-section{padding:80px 7vw}.occasions{padding:70px 7vw}.dialog-inner{padding:42px 18px 30px}dialog h2{font-size:43px}.theme-gallery{grid-template-columns:repeat(3,1fr)}.ad-leaderboard{margin:10px auto}.ad-leaderboard div{height:60px}.ad-between div{height:100px}
}
@media(max-width:560px){.tool-stage{padding:22px 16px}.tool-controls{align-items:stretch;flex-direction:column}.control-field,.check-control{width:100%}.die{width:77px;height:77px;padding:10px}.pip{width:10px;height:10px}.playing-card{width:86px;height:122px}.card-center{font-size:43px}.tool-results{gap:11px;padding:16px}.tool-intro h1{font-size:60px}}
@media(max-width:560px){.builder-field-row,.builder-actions{grid-template-columns:1fr}.builder-actions .builder-primary{grid-column:auto}.custom-card-preview{padding:14px}.word-cell{font-size:7px}.builder-preview-panel{padding:45px 4vw}}
@media print {
  @page { size:A4 portrait; margin:8mm; }
  @page custom-bingo-page { size:A4 landscape; margin:8mm; }
  html, body { width:194mm; margin:0!important; padding:0!important; background:white!important; }
  body > *:not(#printArea) { display:none!important; }
  #printArea { display:grid; grid-template-columns:repeat(2,97mm); grid-auto-rows:140.5mm; width:194mm; }
  .print-card { position:relative; width:97mm; height:140.5mm; break-inside:avoid; page-break-inside:avoid; padding:5mm; color:var(--card-ink); background:var(--card-bg); font-family:Arial,sans-serif; border:2.5mm solid var(--card-accent); outline:.25mm dashed #c5c5c5; outline-offset:-.25mm; overflow:hidden; }
  .print-card:nth-child(4n) { break-after:page; page-break-after:always; }
  .print-card:last-child { break-after:auto; page-break-after:auto; }
  .print-art { position:absolute; inset:3mm; color:var(--card-accent); pointer-events:none; }
  .print-art i { position:absolute; font-size:25pt; font-style:normal; line-height:1; opacity:.85; }
  .print-art i:nth-child(1){top:0;left:0}.print-art i:nth-child(2){top:0;right:0}.print-art i:nth-child(3){bottom:0;left:0}.print-art i:nth-child(4){bottom:0;right:0}
  .print-art svg { width:14mm; height:14mm; overflow:visible; }
  .print-art svg g { fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
  .print-art svg text { fill:currentColor; stroke:none; font:bold 16px Arial,sans-serif; text-anchor:middle; }
  .print-card h2 { font-family:Georgia,serif; font-size:23pt; text-align:center; letter-spacing:.16em; margin:1mm 0 3mm; }
  .print-letters { display:grid; grid-template-columns:repeat(5,1fr); text-align:center; background:var(--card-accent); color:var(--card-bg); padding:1.2mm 0; font-size:16pt; }
  .print-grid { display:grid; grid-template-columns:repeat(5,1fr); border:1px solid #111; }
  .print-grid div { aspect-ratio:1; display:grid; place-items:center; border:1px solid #111; font-size:17pt; font-weight:900; line-height:1; }
  .print-grid .print-free { background:var(--card-accent); color:var(--card-bg); font-size:8pt; font-weight:900; }
  .custom-print-card { padding:7mm 6mm; }
  .custom-print-card h2 { margin:3mm 0 6mm; font-size:19pt; letter-spacing:.04em; }
  .custom-print-grid { display:grid; grid-template-columns:repeat(var(--grid-size),1fr); border:1px solid var(--card-ink); }
  .custom-print-grid .word-cell { aspect-ratio:1; padding:1.4mm; border:1px solid var(--card-ink); font-size:8.5pt; font-weight:800; line-height:1.12; }
  .custom-print-grid .word-cell.free { background:var(--card-accent); color:var(--card-bg); }
  html.custom-printing,body.custom-printing { width:281mm; }
  body.custom-printing #printArea { grid-template-columns:repeat(2,140.5mm); grid-auto-rows:194mm; width:281mm; }
  body.custom-printing .custom-print-card { page:custom-bingo-page; width:140.5mm; height:194mm; padding:8mm; }
  body.custom-printing .custom-print-card h2 { margin:5mm 0 8mm; font-size:24pt; }
  body.custom-printing .custom-print-grid .word-cell { padding:2mm; font-size:11pt; line-height:1.18; }
  body.custom-printing .custom-print-card:nth-child(2n) { break-after:page; page-break-after:always; }
  body.custom-printing .custom-print-card:last-child { break-after:auto; page-break-after:auto; }
  .print-card p { text-align:center; font-size:7pt; margin-top:2.5mm; }
}