:root{--ink:#142d33;--ink-deep:#0d2329;--muted:#637074;--paper:#faf8f3;--cream:#f3f0e8;--surface:#fff;--line:#dfe4df;--orange:#f36d4c;--orange-dark:#db5637;--lime:#d7fa83;--teal:#196b66;--shadow:0 16px 40px rgba(23,37,41,.09);--radius:17px} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,"Segoe UI",Arial,Helvetica,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.53}h1,h2,h3,h4,p{margin-top:0}h1,h2,h3{line-height:1.1;letter-spacing:-.035em}h1{font-size:clamp(2.3rem,4.2vw,4.65rem)}h2{font-size:clamp(1.9rem,3vw,3.05rem)}h3{font-size:1.35rem}p{line-height:1.7;color:#546269}.container{width:min(1190px,calc(100% - 48px));margin-inline:auto}.eyebrow{display:inline-block;font-size:11px;letter-spacing:.14em;font-weight:800;color:var(--teal)}.subtle{color:var(--muted)!important}.demo-ribbon{height:31px;display:flex;align-items:center;justify-content:center;gap:10px;background:#132d30;color:#e9f2e7;font-weight:800;letter-spacing:.12em;font-size:9px;text-align:center;padding:0 8px}.ribbon-extra{font-weight:400;letter-spacing:0;opacity:.66;margin-left:14px}.pulse-dot,.live-dot{display:inline-block;flex-shrink:0;width:7px;height:7px;border-radius:50%;background:#aef17d;box-shadow:0 0 0 3px rgba(174,241,125,.12)} .brand{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-size:25px;font-weight:850;letter-spacing:-.065em;color:#132c32;line-height:1}.brand small{font-size:9px;vertical-align:top;letter-spacing:0;margin-left:2px}.brand-accent{color:var(--orange)}.brand.light{color:white}.brand-mark{width:31px;height:31px;display:grid;grid-template-columns:1fr 1fr;gap:3px;transform:rotate(-12deg)}.brand-mark i{border-radius:50%;background:var(--orange)}.brand-mark i:nth-child(2),.brand-mark i:nth-child(3){background:#e7bc79}.site-header,.app-header{background:#fff;border-bottom:1px solid #e9e7de}.nav-inner,.app-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:81px}.nav-links,.app-links,.nav-actions,.heading-actions{display:flex;align-items:center;gap:24px}.nav-links,.app-links{font-size:13px;font-weight:650}.nav-links a,.app-links a{transition:color .2s}.nav-links a:hover,.app-links a:hover{color:var(--orange-dark)}.nav-actions{gap:10px}.app-header{box-shadow:0 1px 0 rgba(0,0,0,.03)}.app-nav{height:74px}.app-links{gap:26px}.app-demo-mark{font-size:10px;color:#78908d;letter-spacing:.1em;font-weight:800}.btn{appearance:none;border:1px solid transparent;border-radius:8px;padding:13px 19px;display:inline-flex;align-items:center;justify-content:center;gap:13px;background:#fff;color:var(--ink);font-size:13px;font-weight:750;letter-spacing:.003em;white-space:nowrap;transition:transform .18s,background .18s,border-color .18s;min-height:45px}.btn:hover:not(:disabled){transform:translateY(-2px)}.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e9ae74;outline-offset:3px}.btn-primary{background:var(--orange);color:#10252d}.btn-primary:hover:not(:disabled){background:#ff835e}.btn-outline{background:transparent;border-color:#c9d1cb}.btn-outline:hover:not(:disabled){background:#e9eeeb}.btn-dark{background:var(--ink);color:white}.btn-dark:hover:not(:disabled){background:#25494e}.btn-small{min-height:37px;padding:8px 12px;font-size:12px}.btn-large{min-height:53px;padding:14px 22px}.btn-danger-outline{border-color:#dbb5af;color:#a43b2d;background:transparent}.text-link{font-weight:750;color:#176b66;font-size:13px}.site-footer{border-top:1px solid var(--line);background:#fff}.footer-inner{min-height:116px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#798284;font-size:11px} /* Public marketing */ .hero{padding:78px 0 90px;background:radial-gradient(circle at 0 0,#fcf4e6,transparent 55%),#fcfaf6;overflow:hidden}.hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}.hero-copy h1{font-size:clamp(3rem,5vw,5.3rem);font-weight:850;margin:23px 0;line-height:1.065}.hero-copy h1 em{font-style:normal;color:#e16d4d}.hero-copy p{font-size:17px;max-width:470px;line-height:1.7}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:29px}.hero-trust{font-size:12px;color:#7b8583;margin-top:33px;max-width:420px}.trust-icon{color:#158274;font-weight:900}.tiny-ball{display:inline-flex;align-items:center;justify-content:center;background:var(--orange);width:21px;height:21px;color:#142a30;border-radius:50%;margin-right:8px;letter-spacing:0}.hero-art{height:469px;position:relative;border-radius:22px;background:#132b32;overflow:hidden;color:#fff;box-shadow:0 24px 50px rgba(12,34,39,.18);background-image:radial-gradient(circle at 50% 40%,rgba(58,108,106,.55),transparent 49%),linear-gradient(135deg,#13272e,#102a35)}.hero-art:before{content:"";position:absolute;inset:-60px;background:repeating-radial-gradient(circle at 70% 60%,transparent 0,transparent 38px,rgba(242,193,132,.055) 39px,transparent 41px)}.art-caption{position:absolute;z-index:2;font-size:10px;letter-spacing:.12em;font-weight:850;display:flex;align-items:center;gap:12px}.art-caption.top{top:25px;left:25px}.art-caption.bottom{bottom:21px;right:26px;font-size:9px;color:#aec5c0}.hero-stage{position:absolute;left:42px;top:71px;width:76%;height:290px;padding:22px;background:linear-gradient(140deg,#20414c,#142630);border:1px solid #3d6368;box-shadow:0 16px 50px #08161c;border-radius:11px;transform:rotate(-4deg)}.stage-top{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.08em;color:#cee0d3}.stage-top b{color:#cde991}.stage-ball{height:166px;margin:11px auto;display:flex;align-items:center;justify-content:center;gap:13px;color:#182d36;font-size:50px;font-weight:850;letter-spacing:-.07em;width:177px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffefbc,#f5b568 60%,#c68046 100%);box-shadow:0 7px 45px rgba(255,173,79,.22)}.stage-ball strong{font-size:87px}.stage-ticker{display:flex;gap:9px}.stage-ticker span{flex:1;padding:6px 2px;background:#2a4b51;border-radius:5px;text-align:center;font-size:10px;font-weight:800;color:#cde5df}.floating-ticket{position:absolute;right:19px;bottom:69px;width:224px;min-height:154px;background:#fefdfa;padding:16px 13px;color:var(--ink);border:1px solid #eee5d7;border-radius:10px;box-shadow:0 18px 35px #091d24;transform:rotate(7deg)}.floating-title,.floating-footer{display:flex;justify-content:space-between;font-size:9px;font-weight:800;letter-spacing:.05em}.floating-title span{color:#73817b}.mini-numbers{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:12px 0}.mini-numbers>*{text-align:center;padding:6px 0;background:#f3efe6;border-radius:3px;font-size:12px}.mini-numbers b{background:var(--ink);color:white}.mini-numbers span:nth-child(6),.mini-numbers span:nth-child(9){background:#fbca8c}.floating-footer{font-size:7px;color:#657773}.value-bar{background:#f1ede2;border-block:1px solid #e6e3d8;padding:19px 0}.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.value-grid span{font-size:10px;font-weight:850;color:#61716e;letter-spacing:.07em}.section{padding:94px 0}.section-top{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:31px}.section-top h2{margin:12px 0 0}.section-top>p{max-width:365px;font-size:14px}.three-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.feature-card{display:flex;flex-direction:column;position:relative;min-height:306px;padding:25px;background:#fff;border:1px solid #ece8dc;border-radius:13px;transition:transform .2s,box-shadow .2s}.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.feature-icon{width:51px;height:51px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#e8f0e9;color:#14594f;font-size:27px}.feature-num{position:absolute;right:24px;top:25px;font-weight:800;color:#babfb9;font-size:11px}.feature-card h3{margin:23px 0 7px}.feature-card p{font-size:13px;flex:1}.showcase{background:#c9e5d7;padding:90px 0}.showcase-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:75px;align-items:center}.showcase-grid h2{margin:20px 0}.showcase-grid p{max-width:410px}.showcase-preview{min-height:340px;padding:30px;color:#eef9f2;background:#18393c;border-radius:14px;box-shadow:0 20px 30px rgba(9,50,48,.18)}.preview-top,.preview-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;font-weight:750;font-size:10px;letter-spacing:.06em;color:#b5d2cc}.status-pill{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:6px 10px;background:#e6f5e9;color:#166a54;font-size:10px;font-weight:800;letter-spacing:.06em}.preview-num{text-align:center;font-size:56px;margin:15px auto 0;font-weight:800;color:#f4bb75}.preview-num strong{font-size:137px;letter-spacing:-.09em}.preview-caption{text-align:center;font-size:11px;color:#a8bebb;margin:-13px auto 27px}.preview-footer{border-top:1px solid #3c5d59;padding-top:16px}.closing{text-align:center}.closing h2{margin:16px 0}.closing p{margin-bottom:24px} /* Event page */ .event-main{background:#faf8f3}.event-hero{background:#172a33;color:white;overflow:hidden;position:relative}.event-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 77% 60%,rgba(103,41,106,.25),transparent 40%)}.event-hero-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;min-height:478px;padding:55px 0}.event-hero .eyebrow{color:#b7e4b6}.event-hero h1{font-size:clamp(2.9rem,5vw,5rem);font-weight:850;margin:13px 0}.event-hero h1 em{font-style:normal;color:#e3fb88}.event-hero p{color:#c3d3d2;max-width:460px}.event-tags{display:flex;gap:8px;margin-bottom:17px}.event-tag{padding:5px 10px;border-radius:30px;color:#bfd7d4;border:1px solid #53696a;font-size:9px;font-weight:850;letter-spacing:.1em}.event-tag.neon{background:#cfee80;color:#233624;border-color:#cfee80}.event-facts{display:flex;gap:15px;flex-wrap:wrap;margin:20px 0 25px;color:#c7d8d4;font-size:12px}.event-actions{display:flex;flex-wrap:wrap;gap:10px}.btn-neon{background:#ddfb8a;color:#1b332c}.btn-outline-white{background:transparent;border-color:#70817d;color:white}.event-graphic{height:330px;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;border:2px solid #725779;border-radius:15px;background:radial-gradient(ellipse at 45% 47%,#312c6b,#211f45 55%,#171e39);box-shadow:0 0 90px rgba(145,53,180,.12),inset 0 0 55px rgba(216,99,245,.11)}.event-graphic:before{content:"";position:absolute;inset:18px;border:1px solid #81639c;border-radius:10px}.event-graphic-kicker,.event-graphic-bottom{font-size:10px;letter-spacing:.13em;color:#deaaf6;text-align:center;font-weight:800;z-index:1}.neon-big{font-size:clamp(3.5rem,6vw,6.3rem);font-weight:900;color:#d7fa88;letter-spacing:-.085em;text-shadow:0 0 22px rgba(201,248,126,.5);line-height:1.5;z-index:1}.neon-big span{color:#f4a0e6;text-shadow:0 0 20px rgba(255,140,235,.6)}.neon-big .period{color:#fcbd77}.event-balls{display:flex;gap:12px;margin-bottom:20px;z-index:1}.event-balls i{font-style:normal;display:flex;align-items:center;justify-content:center;background:#432c67;border:1px solid #a47bca;color:#f0dafd;border-radius:50%;width:38px;height:38px;font-weight:850}.event-graphic-bottom span{margin:0 15px}.event-packs{padding:70px 0 25px}.pack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.pack-card{display:flex;flex-direction:column;background:white;border:1px solid var(--line);border-radius:13px;padding:24px;min-height:285px}.pack-card.featured{border:2px solid var(--orange);box-shadow:0 12px 25px rgba(194,88,54,.09)}.pack-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.1em;font-weight:850;color:#66726d}.pack-tag{font-size:9px;background:#e8eee5;border-radius:5px;padding:4px 7px;color:#306c5d}.pack-card.featured .pack-tag{background:#fff0df;color:#ae532a}.pack-card h3{margin:22px 0 5px;font-size:28px}.pack-card h3 small{font-size:14px;color:#6c7776;font-weight:500}.pack-card p{font-size:13px;flex:1}.pack-price{font-size:25px;font-weight:850;margin-bottom:14px}.pack-price small{font-size:10px;font-weight:500;color:#8a9490}.pack-card.info{background:#e8f2e9}.pack-card.info .eyebrow{font-size:10px}.pack-card.info h3{font-size:25px}.helper-note{font-size:12px;color:#66716e;background:#f0eee6;border-radius:8px;padding:14px 17px;margin-top:17px}.event-shortcuts{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;padding:20px 0 80px}.event-shortcuts>a{display:flex;gap:12px;align-items:center;background:white;border:1px solid var(--line);border-radius:9px;padding:15px}.event-shortcuts>a>div{display:flex;flex:1;flex-direction:column}.event-shortcuts strong{font-size:13px}.event-shortcuts small{font-size:11px;color:#75807d}.shortcut-symbol{display:flex;align-items:center;justify-content:center;font-size:22px;width:40px;height:40px;border-radius:8px;background:#e9efe8;color:#166457} /* Organization, general inner */ .org-wrap,.inner-main,.operator-main{padding-top:45px;padding-bottom:85px}.breadcrumb{font-size:12px;color:#84918d;margin-bottom:30px}.breadcrumb a{color:#21756d}.org-hero{display:flex;align-items:center;gap:30px;padding:45px;background:#e6f2e8;border-radius:16px}.org-avatar{display:flex;align-items:center;justify-content:center;width:120px;height:120px;border-radius:17px;background:#183e3f;color:#d1fa8e;font-size:70px}.org-hero h1{font-size:36px;margin:10px 0}.org-hero p{max-width:500px}.content-card{padding:30px;background:#fff;border:1px solid var(--line);margin-top:20px;border-radius:12px}.content-card h2{margin:12px 0;font-size:27px}.page-heading,.operator-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:25px}.page-heading h1,.operator-heading h1{font-size:35px;margin:9px 0}.page-heading p,.operator-heading p{margin-bottom:0}.notice-soft{padding:15px 18px;background:#e3f4e8;border:1px solid #bde1c9;border-radius:8px;font-size:13px;color:#245848;margin-bottom:24px}.loading-state,.empty-state{text-align:center;padding:35px 15px;color:#7a8986;font-size:13px}.cards-toolbar{display:flex;justify-content:space-between;align-items:center;padding:17px 22px;background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:22px}.cards-toolbar select{padding:8px 12px;border-radius:7px;border:1px solid #d4ded9;margin-left:9px;background:#fff}.my-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} /* Bingo card reusable */ .bingo-card{width:100%;max-width:470px;margin:auto;padding:14px;background:#fff;box-shadow:0 6px 25px rgba(20,40,40,.08);border:1px solid #d5ded9;border-radius:12px;color:#142c31}.card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 9px}.card-head>div{display:flex;gap:10px;align-items:center}.card-brand{font-size:15px;font-weight:850;letter-spacing:-.065em;color:#183c40}.card-head strong{font-size:10px;color:#637a77;letter-spacing:.07em}.card-serial{font-size:9px;font-weight:850;color:#8e9694;letter-spacing:.03em}.card-grid{border:2px solid #1c4143;background:#1c4143;padding:3px;border-radius:5px}.card-letters,.card-row{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}.card-letters{height:37px}.card-letters span{display:flex;align-items:center;justify-content:center;color:white;font-size:24px;font-weight:850}.card-row{margin-top:3px}.card-cell{border:0;background:#fff;color:#152d30;min-width:0;aspect-ratio:1;min-height:50px;display:flex;align-items:center;justify-content:center;border-radius:3px;font-weight:850;font-size:clamp(15px,2vw,22px);transition:background .12s,transform .12s;position:relative}.card-cell:not(:disabled):hover{background:#f1f6ed}.card-cell.auto-mark{background:#d7f3a6;color:#123b31}.card-cell.auto-mark:not(.free-cell):after{content:"";position:absolute;inset:8%;border:3px solid #217d65;border-radius:50%;transform:rotate(-15deg)}.card-cell.free-cell{background:#f5cb91;color:#322f28;font-size:11px;letter-spacing:.02em}.card-foot{display:flex;justify-content:space-between;gap:8px;margin-top:9px;color:#85938e;font-size:8px;font-weight:800;letter-spacing:.02em}.my-card-grid .card-cell{min-height:38px}.my-card-grid .bingo-card{max-width:400px} /* Play room */ .play-layout{max-width:1320px;padding:33px 32px 55px;margin:auto}.play-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:23px}.play-topbar h1{font-size:29px;margin:6px 0}.play-profile{display:flex;align-items:center;gap:10px}.play-profile label{font-size:12px;font-weight:700;color:#67746f}.play-profile select{padding:9px 12px;border:1px solid #ced9d3;background:white;border-radius:8px;font-size:13px;font-weight:700}.network-status{font-size:11px;font-weight:750;color:#34765a}.network-status.offline{color:#bc6240}.play-cols{display:grid;grid-template-columns:minmax(300px,.74fr) minmax(385px,1fr);gap:22px;align-items:start}.play-aside{display:grid;gap:15px}.broadcast-card,.call-history-panel,.play-tip,.play-center{background:white;border:1px solid var(--line);border-radius:14px;overflow:hidden}.broadcast-head{display:flex;gap:8px;align-items:center;padding:13px 17px;font-size:10px;font-weight:850;letter-spacing:.08em;color:#465957}.broadcast-head .live-dot{background:#f56c4d;box-shadow:none}.demo-chip{margin-left:auto;font-size:9px;padding:3px 6px;border-radius:4px;background:#f1f2e9}.broadcast-placeholder{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;color:#e8f6df;background:radial-gradient(circle at 50% 35%,#35515e,#162e36 70%);text-align:center}.broadcast-ring{border-radius:50%;width:75px;height:75px;border:1px solid #678e83;display:flex;align-items:center;justify-content:center;font-size:43px;color:#d4f590}.broadcast-placeholder strong{font-size:20px;line-height:1.18}.broadcast-placeholder span{color:#abc4bd;font-size:11px}.broadcast-bottom{padding:12px 15px;display:flex;justify-content:space-between;color:#6d7d79;font-size:11px}.call-history-panel,.play-tip{padding:19px}.panel-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-top strong{font-size:14px}.panel-top span{font-size:11px;color:#768683}.history-balls{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;max-height:102px;overflow:auto}.call-ball{display:inline-flex;padding:7px 9px;border-radius:6px;background:#e9f3e5;color:#205447;font-weight:850;font-size:12px}.play-tip{background:#f0f6ee}.play-tip strong{font-size:14px}.play-tip p{font-size:12px;margin:6px 0}.play-tip a{font-size:12px;color:#176e5b;font-weight:750}.play-center{padding:26px 30px 23px;overflow:visible}.game-panel-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:16px}.game-panel-top h2{font-size:26px;margin:6px 0}.game-panel-top p{font-size:12px;margin:0}.last-call{border-radius:9px;background:#e8f3e7;padding:9px 12px;text-align:center;min-width:85px}.last-call small{display:block;font-size:9px;font-weight:800;letter-spacing:.06em;color:#73847b}.last-call strong{font-size:23px;white-space:nowrap}.play-settings{display:flex;align-items:center;justify-content:space-between;gap:12px;border-block:1px solid #ecf0ec;padding:13px 0 15px;margin-bottom:20px}.toggle-wrap{display:flex;gap:10px;align-items:center}.toggle-wrap>span{display:flex;flex-direction:column}.toggle-wrap strong{font-size:12px}.toggle-wrap small{font-size:10px;color:#6c7976}.switch{position:relative;display:inline-block;width:42px;height:25px}.switch input{opacity:0;width:0;height:0}.switch-track{position:absolute;inset:0;border-radius:40px;background:#bcc8c2;transition:.2s;cursor:pointer}.switch-track:before{content:"";position:absolute;width:19px;height:19px;top:3px;left:3px;border-radius:50%;background:white;transition:.2s;box-shadow:0 1px 4px #666}.switch input:checked+.switch-track{background:#258371}.switch input:checked+.switch-track:before{transform:translateX(17px)}.player-card-area{max-width:470px;margin:auto}.player-card-area .bingo-card{box-shadow:none}.card-pager{display:flex;justify-content:space-between;gap:16px;max-width:470px;margin:10px auto;color:#758680;font-size:10px}.win-alert{display:flex;flex-direction:column;gap:4px;margin:17px auto 12px;padding:13px 15px;text-align:center;background:#e6f6cd;border:1px solid #8cc56a;border-radius:9px;color:#316c35;max-width:470px}.win-alert strong{font-size:16px}.win-alert span{font-size:11px}.claim-button{display:flex;align-items:center;justify-content:center;flex-direction:column;margin:16px auto 0;width:100%;max-width:470px;height:72px;border:0;background:#f36d4c;color:#153234;border-radius:10px;font-size:26px;letter-spacing:.025em;font-weight:900;box-shadow:0 5px 0 #bd593f}.claim-button span{display:block;font-size:10px;letter-spacing:.035em;font-weight:800}.claim-button:hover:not(:disabled){background:#ff805d;transform:translateY(1px);box-shadow:0 4px 0 #bd593f}.claim-feedback{margin:15px auto 0;text-align:center;font-size:12px;color:#51736a}.announcement-banner{padding:12px 14px;margin-bottom:17px;background:#fff0cd;border:1px solid #eac56b;border-radius:8px;text-align:center;font-weight:850;color:#7e5823}.play-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:21px 4px;color:#84908d;font-size:11px}.play-bottom a{font-weight:750;color:#2a6b61} /* Operator */ .operator-main{max-width:1320px}.operator-heading{margin-bottom:29px}.operator-heading h1{font-size:35px}.operator-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:22px}.operator-metrics>div{padding:20px;background:#fff;border:1px solid var(--line);border-radius:11px;display:flex;flex-direction:column}.operator-metrics span{font-size:10px;letter-spacing:.08em;font-weight:850;color:#89948d}.operator-metrics strong{font-size:31px;line-height:1.35}.operator-metrics small{font-size:14px;color:#7e918b}.operator-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);gap:20px;align-items:start}.op-main-panel,.op-side-card{background:white;border:1px solid var(--line);border-radius:13px}.panel-heading{padding:24px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line)}.panel-heading h2{font-size:25px;margin:8px 0 2px}.panel-heading span:not(.eyebrow){font-size:12px;color:#71807c}.op-call-area{text-align:center;padding:26px 25px 20px}.op-ball-label{font-size:10px;letter-spacing:.1em;font-weight:850;color:#818e88}.op-ball{min-height:126px;display:flex;align-items:center;justify-content:center;font-size:81px;font-weight:900;letter-spacing:-.07em;color:#173c3d}.op-call-actions{display:flex;justify-content:center;gap:10px}.manual-entry{max-width:410px;margin:23px auto 0;text-align:left}.manual-entry label,.op-side-card label{font-size:11px;color:#6d7975;font-weight:700}.manual-entry>div,.field-inline{display:flex;gap:7px;margin-top:7px}.manual-entry input,.field-inline input{min-width:0;flex:1;padding:10px 11px;background:white;border:1px solid #cbd6d0;border-radius:8px}.operator-explainer{margin:14px auto 0;font-size:11px;max-width:460px;color:#82908b}.op-called{padding:19px 22px;border-top:1px solid var(--line)}.ball-board,.stage-five-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:15px}.board-col{display:grid;grid-template-rows:repeat(16,1fr);gap:4px;min-width:0}.board-col strong{display:flex;align-items:center;justify-content:center;background:#193e42;color:white;border-radius:4px;padding:6px 0;font-size:14px}.board-col span{display:flex;align-items:center;justify-content:center;border-radius:4px;background:#f3f4ef;font-size:11px;font-weight:700;color:#a0aaa3;min-height:23px}.board-col span.board-called{background:#d8f3ac;color:#265e48;font-weight:900}.op-footer-actions{border-top:1px solid var(--line);padding:18px 22px;display:flex;gap:9px;flex-wrap:wrap}.op-side{display:grid;gap:14px}.op-side-card{padding:20px}.op-side-card p{font-size:12px;margin:13px 0}.claim-item{padding:15px 0;border-top:1px solid #edf0eb}.claim-item:first-child{margin-top:12px}.claim-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.claim-top strong{font-size:12px}.claim-status{padding:4px 7px;border-radius:6px;background:#eee;color:#677;font-size:10px;text-transform:uppercase;font-weight:800}.claim-status.pending{background:#fff0ce;color:#886120}.claim-status.approved{background:#d6eedb;color:#286a42}.claim-item p{font-size:11px;margin:6px 0 10px}.claim-buttons{display:flex;gap:6px;flex-wrap:wrap}.form-hint{font-size:10px!important;color:#91a09b}.audit-feed{max-height:230px;overflow:auto}.audit-feed>div{padding:10px 0;border-bottom:1px solid #edf0eb;display:flex;gap:12px;align-items:baseline}.audit-feed span{font-size:10px;color:#92a09a;white-space:nowrap}.audit-feed p{margin:0;font-size:11px}.operator-gate{position:fixed;z-index:20;inset:31px 0 0;background:rgba(14,32,34,.77);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:15px}.gate-card{width:min(425px,100%);background:white;border-radius:14px;padding:37px;display:flex;flex-direction:column;align-items:flex-start;box-shadow:0 22px 60px #0d2228}.gate-symbol{display:flex;align-items:center;justify-content:center;width:55px;height:55px;background:#d9e9de;border-radius:14px;font-size:27px;margin-bottom:18px;color:#23695b}.gate-card h2{font-size:29px;margin:10px 0}.gate-card p{font-size:13px}.gate-card label{font-size:11px;font-weight:800;color:#5d736d}.gate-card input{width:100%;padding:12px;border:1px solid #bfcfc7;border-radius:7px;margin:6px 0 10px}.gate-card .btn{width:100%}.gate-card small{font-size:11px;color:#7e8e86;margin-top:11px} /* Fullscreen presentation */ body.fullview{background:#101834;color:white;overflow:hidden}.fullview .demo-ribbon{display:none}.presentation-view{display:flex;flex-direction:column;height:100dvh;max-height:100dvh;background:radial-gradient(ellipse at 33% 56%,#2c1a61 0,#1a2149 55%,#121b3a 100%);color:#f5f1f9;padding:clamp(12px,2.1vw,28px) clamp(15px,2.6vw,42px);overflow:hidden}.presentation-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-shrink:0}.presentation-brand{display:flex;gap:20px;align-items:center}.presentation-brand>span{font-size:11px;letter-spacing:.13em;color:#b7bcd6;font-weight:800}.presentation-right{display:flex;gap:10px;align-items:center}.present-live{font-size:10px;font-weight:800;letter-spacing:.1em;display:flex;align-items:center;gap:10px;color:#e9cfe9}.present-small-btn{border:1px solid #56608b;color:#e2e4ef;background:#282e59;border-radius:7px;padding:8px 11px;font-size:11px}.presentation-core{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(315px,.9fr);gap:3vw;flex:1;min-height:0;padding:2.5vh 0}.presentation-main{display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:0;overflow:hidden;border:1px solid rgba(186,135,228,.19);border-radius:16px;background:radial-gradient(ellipse at 50% 43%,rgba(183,58,187,.16),transparent 64%);position:relative}.presentation-eyebrow{font-weight:850;letter-spacing:.18em;font-size:clamp(10px,.9vw,15px);color:#e3baef}.presentation-eyebrow span:first-child{margin:0 8px;color:#e6ff8a}.presentation-main h1{font-size:clamp(20px,3vw,54px);margin:1vh auto 2vh;color:#f4e5f4}.stage-ball-wrap{display:flex;align-items:center;flex-direction:column;gap:1.2vh}.stage-ball-wrap>span{font-size:clamp(10px,.8vw,13px);letter-spacing:.15em;color:#c6b8e0;font-weight:800}.presentation-ball{display:flex;align-items:center;justify-content:center;min-width:min(25vw,27vh);height:min(25vw,27vh);border-radius:50%;padding:2vw;background:radial-gradient(circle at 35% 25%,#fcffca,#ccea81 60%,#89a75b 100%);box-shadow:0 0 72px rgba(199,248,128,.23),inset -9px -12px 20px rgba(18,47,37,.22);font-size:clamp(36px,7vw,110px);font-weight:950;color:#243636;letter-spacing:-.08em}.presentation-pattern{margin:2.4vh auto 0;text-align:center;display:flex;flex-direction:column;gap:4px;letter-spacing:.1em;font-size:clamp(10px,.9vw,15px);color:#adaad0}.presentation-pattern strong{font-size:clamp(15px,1.7vw,29px);color:#edff9a;letter-spacing:.01em}.stage-announcement{position:absolute;bottom:2.5vh;text-align:center;color:#fcdd92;font-size:clamp(12px,1.2vw,18px);font-weight:850;max-width:95%}.presentation-side{display:flex;flex-direction:column;min-height:0;padding:1vh 0}.stage-side-title{display:flex;align-items:center;justify-content:space-between;gap:15px;color:#ede2f7;font-size:clamp(12px,1.2vw,20px);font-weight:900;letter-spacing:.06em}.stage-side-title span{font-size:12px;color:#afa6c7}.presentation-side .stage-five-cols{margin-top:13px;flex:1;min-height:0;gap:clamp(4px,.5vw,8px)}.presentation-side .board-col{grid-template-rows:repeat(16,minmax(0,1fr));gap:clamp(2px,.35vh,5px)}.presentation-side .board-col strong{background:#62478e;color:#ecddf7;font-size:clamp(12px,1.6vw,24px);padding:0}.presentation-side .board-col span{min-height:0;background:#29294f;color:#8484a3;font-size:clamp(8px,1.1vw,17px);border:1px solid #3d365d}.presentation-side .board-col span.board-called{background:#d7fa8b;color:#1f3c38;border-color:#d7fa8b;font-weight:950}.stage-prize{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:61px;border-top:1px solid #59547c;margin-top:15px;color:#aeacd0}.stage-prize span{font-size:11px;font-weight:850;letter-spacing:.1em}.stage-prize strong{font-size:clamp(13px,1.4vw,23px);color:#effac3}.presentation-footer{display:flex;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:.07em;font-weight:850;color:#beb6d0;flex-shrink:0}.stage-classic .presentation-view{background:#132c34}.stage-classic .presentation-main{background:radial-gradient(ellipse at 50% 43%,#285052,transparent 72%)}.stage-classic .board-col strong{background:#335e61}.stage-classic .stage-announcement{color:#f4cda1} /* Print */ .print-toolbar{padding:16px 24px;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:3}.print-toolbar>div{display:flex;align-items:center;gap:25px}.print-toolbar span{font-size:12px;color:#74807e}.print-content{max-width:1000px;margin:30px auto;padding:0 24px}.print-instructions{background:#e5f3e9;padding:16px 20px;margin-bottom:24px;border-radius:10px}.print-instructions p{font-size:12px;margin:4px 0}.print-game{padding:27px;background:white;margin:17px auto 35px;page-break-after:always;border:1px solid #d6ddd9}.print-game header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:15px}.print-game header strong{font-size:23px;letter-spacing:-.05em}.print-game header span{font-size:17px;font-weight:850}.print-game header small{font-size:10px;color:#667}.print-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}.print-game>p{font-size:10px;text-align:center;margin:18px 0 0}.printed-card{box-shadow:none;border-radius:0;break-inside:avoid;page-break-inside:avoid;max-width:400px}.printed-card .card-row .card-cell{min-height:30px}.printed-card .card-letters{height:28px}.printed-card .card-letters span{font-size:18px}.printed-card .card-head strong{font-size:8px}.printed-card .card-brand{font-size:13px}.printed-card .card-cell{font-size:18px}.printed-card .card-foot{font-size:6.5px}.printed-card .free-cell{font-size:9px}.error-page{min-height:65vh;padding:80px 0}.error-page h1{font-size:45px;margin:18px 0} /* Feedback */ .toast{position:fixed;z-index:30;right:22px;bottom:22px;max-width:370px;padding:14px 18px;background:#183c3b;color:#fff;border-radius:9px;font-weight:750;font-size:13px;box-shadow:0 12px 25px rgba(0,0,0,.2);opacity:0;pointer-events:none;transform:translateY(10px);transition:.18s}.toast.show{opacity:1;transform:translateY(0)}.toast.error{background:#9b433a} @media(max-width:1050px){.nav-links{display:none}.app-links{gap:13px;font-size:12px}.hero-grid{gap:35px}.floating-ticket{width:185px}.operator-grid{grid-template-columns:1fr}.op-side{grid-template-columns:repeat(2,1fr)}.operator-metrics{grid-template-columns:repeat(4,1fr)}} @media(max-width:800px){.container{width:min(100% - 32px,1190px)}.nav-inner{height:68px}.nav-actions .btn-outline,.app-demo-mark{display:none}.app-nav{height:auto;min-height:80px;flex-wrap:wrap;gap:9px;padding:12px 0}.app-links{width:100%;overflow:auto;white-space:nowrap;gap:19px;padding-bottom:3px}.hero{padding:53px 0 60px}.hero-grid,.showcase-grid,.event-hero-grid{grid-template-columns:1fr}.hero-art{max-width:600px;width:100%;height:395px}.hero-stage{height:245px}.stage-ball{width:140px;height:140px;font-size:39px}.stage-ball strong{font-size:64px}.value-grid{grid-template-columns:repeat(2,1fr);row-gap:12px}.section{padding:62px 0}.three-cards,.pack-grid,.event-shortcuts{grid-template-columns:1fr}.feature-card{min-height:240px}.section-top{align-items:start;flex-direction:column;gap:10px}.showcase{padding:55px 0}.event-hero-grid{gap:28px;padding:40px 0}.event-graphic{height:270px}.my-card-grid{grid-template-columns:repeat(2,1fr)}.play-layout{padding:25px 16px}.play-cols{grid-template-columns:1fr}.play-aside{grid-template-columns:1fr 1fr;align-items:start}.play-aside .broadcast-card{grid-column:span 2}.broadcast-placeholder{min-height:205px}.operator-metrics{grid-template-columns:repeat(2,1fr)}.page-heading,.operator-heading{flex-direction:column;align-items:start;gap:20px}.footer-inner{flex-wrap:wrap;padding:24px 0}.presentation-view{padding:12px}.presentation-core{grid-template-columns:minmax(0,1fr) minmax(225px,.9fr);gap:12px}.presentation-brand>span{display:none}.presentation-footer{font-size:7px}.presentation-side .stage-five-cols{gap:2px}.presentation-side .board-col{gap:2px}.stage-prize{min-height:40px}.stage-prize span{font-size:9px}} @media(max-width:580px){.ribbon-extra{display:none}.demo-ribbon{font-size:8px}.brand{font-size:23px}.hero-copy h1{font-size:clamp(2.8rem,11vw,4rem)}.hero-copy p{font-size:15px}.hero-art{height:340px}.hero-stage{width:85%;left:16px;top:62px;height:226px;padding:15px}.stage-top{font-size:7px}.stage-ticker span{font-size:8px}.floating-ticket{width:155px;bottom:21px;right:12px;min-height:116px;padding:10px}.mini-numbers{gap:2px;margin:7px 0}.mini-numbers>*{font-size:9px;padding:4px 0}.art-caption.bottom{display:none}.value-grid{grid-template-columns:1fr 1fr}.value-grid span{font-size:9px}.showcase-preview{min-height:275px}.preview-num strong{font-size:92px}.event-graphic{height:235px}.neon-big{font-size:59px}.event-facts{gap:10px}.page-heading h1,.operator-heading h1{font-size:30px}.org-hero{flex-direction:column;align-items:start;padding:25px}.org-avatar{width:90px;height:90px;font-size:45px}.heading-actions{flex-wrap:wrap;gap:7px}.play-topbar{align-items:start;flex-direction:column}.play-profile{width:100%;flex-wrap:wrap}.play-profile select{flex:1}.play-aside{grid-template-columns:1fr}.play-aside .broadcast-card{grid-column:auto}.play-center{padding:16px 13px}.game-panel-top h2{font-size:21px}.last-call strong{font-size:18px}.card-cell{min-height:47px;font-size:19px}.play-bottom{flex-direction:column;text-align:center}.card-pager{font-size:9px}.my-card-grid{grid-template-columns:1fr}.cards-toolbar{flex-direction:column;gap:12px;align-items:stretch}.operator-grid{grid-template-columns:1fr}.operator-main{padding-top:28px}.operator-metrics>div{padding:14px}.operator-metrics strong{font-size:26px}.op-side{grid-template-columns:1fr}.op-call-actions{flex-wrap:wrap}.op-ball{font-size:62px;min-height:110px}.manual-entry>div{flex-wrap:wrap}.presentation-top{gap:4px}.presentation-brand .brand{font-size:18px}.presentation-brand .brand-mark{width:22px;height:22px}.present-small-btn{font-size:9px;padding:5px}.presentation-right{gap:4px}.present-live{font-size:8px}.presentation-core{grid-template-columns:1fr;grid-template-rows:minmax(0,.8fr) minmax(0,1.2fr);gap:7px;padding:10px 0}.presentation-main h1{font-size:clamp(18px,5vw,28px);margin:2px 0}.presentation-ball{height:min(22vh,140px);min-width:min(22vh,140px);font-size:46px}.stage-ball-wrap{gap:1px}.presentation-pattern{margin-top:6px}.stage-announcement{bottom:3px}.stage-side-title{font-size:11px}.presentation-side .board-col strong{font-size:11px}.presentation-side .board-col span{font-size:10px}.stage-prize{margin-top:6px;min-height:27px}.stage-prize strong{font-size:11px}.presentation-footer span:nth-child(2){display:none}.print-toolbar{flex-direction:column;align-items:start}.print-toolbar>div{flex-wrap:wrap}.print-cards{grid-template-columns:1fr}.print-game header{flex-wrap:wrap}} @media print{@page{size:letter portrait;margin:.36in}html,body{background:white!important;color:black!important;font-size:10pt}.demo-ribbon,.site-header,.app-header,.site-footer,.print-toolbar,.print-instructions,.toast{display:none!important}.print-content{max-width:100%;margin:0;padding:0}.print-game{border:0;margin:0;padding:0;page-break-after:always;break-after:page}.print-game header{margin:0 0 8px;padding-bottom:6px}.print-game>p{font-size:8px;margin:8px 0}.print-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.printed-card{padding:8px;box-shadow:none;border:1px solid black!important}.printed-card .card-grid{background:#182f34!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}.printed-card .card-cell{min-height:27px;aspect-ratio:1;background:white!important;color:black!important}.printed-card .card-letters span{color:white!important}.printed-card .free-cell{background:#ddd!important}.printed-card .card-foot{font-size:6px}.printed-card .card-head{padding-bottom:5px}.printed-card .card-letters{height:25px}.printed-card .card-row{gap:2px;margin-top:2px}.printed-card .card-grid{padding:2px}.printed-card .card-letters{gap:2px}.printed-card .card-cell{font-size:15px}.printed-card .card-head strong{font-size:7px}.printed-card .card-serial{font-size:7px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}} /* Always honor semantic hidden state even when component classes define display. */ [hidden]{display:none!important} @media(max-width:800px){.play-cols{display:flex;flex-direction:column}.play-center,.play-aside{width:100%}.play-center{order:-1}} .modal-scrim{position:fixed;z-index:35;inset:0;background:rgba(16,36,41,.65);display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(4px)} .confirm-dialog{width:min(420px,100%);background:#fff;color:#162e34;padding:28px;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.22)} .confirm-dialog h2{font-size:26px;margin:12px 0}.confirm-dialog p{font-size:13px;margin-bottom:23px}.confirm-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap} /* First-run MariaDB setup: deliberate, uncluttered, accessible and independent of demo JS. */ .installer-body{background:#eef3f0;color:#193333;min-height:100vh;font-family:inherit} .installer-shell{width:min(1120px,calc(100% - 36px));margin:0 auto;padding:28px 0 48px} .installer-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0 26px;border-bottom:1px solid #d6e1dc} .installer-wordmark{font-weight:850;font-size:28px;letter-spacing:-1.4px;color:#142c30}.installer-wordmark span{color:#0d9b7c} .installer-tag{font-size:11px;font-weight:800;letter-spacing:1.4px;color:#4e6d6b} .installer-intro{max-width:770px;padding:34px 0 24px}.installer-intro h1,.installer-success h1{font-size:clamp(30px,4vw,44px);line-height:1.12;letter-spacing:-1.4px;margin:12px 0 14px;color:#142b2e}.installer-intro p{color:#425a59;line-height:1.7;font-size:16px} .installer-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px;align-items:start}.installer-main,.installer-sidebar{display:grid;gap:18px} .installer-panel{background:#fff;border:1px solid #d8e2dd;border-radius:16px;padding:28px;box-shadow:0 4px 24px rgba(19,47,42,.04)} .installer-panel h2{font-size:21px;letter-spacing:-.5px;line-height:1.3;margin:10px 0 18px;color:#193333} .installer-step{font-size:11px;font-weight:800;letter-spacing:1.35px;color:#08775f} .installer-steps{margin:0;padding-left:23px;display:grid;gap:14px;line-height:1.6;color:#334e4d}.installer-steps li{padding-left:3px}.installer-steps code,.installer-note code{font-size:.9em;background:#edf3ef;padding:2px 5px;border-radius:4px;color:#1a5550;word-break:break-word} .installer-note{font-size:13px;color:#617875;line-height:1.6;margin:17px 0 0} .installer-fields{display:grid;gap:16px;margin:17px 0}.installer-fields.two{grid-template-columns:repeat(2,minmax(0,1fr))}.installer-fields label{display:grid;gap:7px;font-size:13px;font-weight:750;color:#2f4c4b} .installer-fields input{width:100%;height:46px;border:1px solid #c4d4cd;border-radius:9px;background:#fafcfb;color:#142c30;font:inherit;font-size:14px;padding:10px 13px}.installer-fields input:focus{outline:3px solid rgba(11,141,111,.16);border-color:#0c916e} .installer-submit{margin-top:9px;min-height:48px}.installer-submit:disabled{opacity:.4;cursor:not-allowed} .installer-checks{display:grid;gap:18px}.installer-check{display:flex;gap:10px;align-items:start}.installer-status{display:grid;place-items:center;width:23px;height:23px;flex-shrink:0;border-radius:50%;font-weight:850;font-size:13px}.installer-status.ok{background:#dcf5e6;color:#16734f}.installer-status.fail{background:#ffebe8;color:#ae3d2b} .installer-check strong{display:block;color:#253c3b;font-size:13px}.installer-check small{display:block;color:#687e7d;font-size:12px;line-height:1.5;margin-top:4px}.installer-sidebar p{font-size:14px;color:#496361;line-height:1.6;margin:0 0 14px} .installer-errors{padding:16px 20px;border:1px solid #eac1bd;background:#fff2f0;color:#873329;border-radius:12px;font-size:14px;line-height:1.6}.installer-errors ul{margin:10px 0 0;padding-left:22px}.installer-success{max-width:750px;margin:50px auto;padding:42px}.installer-success p{color:#506764;line-height:1.65}.installer-actions{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.installer-footer{text-align:center;font-size:12px;color:#6b807e;padding:36px 0 0} @media(max-width:850px){.installer-layout{grid-template-columns:1fr}.installer-sidebar{grid-template-columns:1fr 1fr}.installer-panel{padding:22px}.installer-intro{padding-top:26px}} @media(max-width:560px){.installer-shell{width:calc(100% - 26px)}.installer-header{display:block}.installer-tag{margin-top:8px}.installer-sidebar{grid-template-columns:1fr}.installer-fields.two{grid-template-columns:1fr}.installer-panel{padding:20px}.installer-success{margin:22px auto}.installer-intro p{font-size:15px}} /* BingoTIX marketing launch site: restrained, editorial, responsive, no stock imagery. */ .soon-site{min-height:100vh;background:#f4f1e9;color:#1b3335;overflow:hidden;font-family:Inter,"Segoe UI",Arial,sans-serif} .soon-preview-strip{padding:9px 18px;text-align:center;background:#e6f1da;color:#274e3f;font-size:10px;font-weight:800;letter-spacing:.12em} .soon-nav{width:min(1310px,calc(100% - 90px));margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d9ded4;height:95px} .soon-logo{display:flex;align-items:center;font-size:27px;font-weight:850;letter-spacing:-.065em;gap:11px}.soon-logo>span:last-child{color:#d55f42;margin-left:-11px} .soon-mark{width:31px;height:31px;display:grid;grid-template-columns:1fr 1fr;gap:3px;transform:rotate(-12deg);margin-right:4px}.soon-mark i{background:#e5795a;border-radius:50%}.soon-mark i:nth-child(2),.soon-mark i:nth-child(3){background:#eab85d} .soon-nav-note{display:flex;align-items:center;gap:9px;letter-spacing:.17em;font-size:10px;font-weight:800;color:#49605c} .soon-beacon,.soon-live{width:7px;height:7px;border-radius:100%;background:#e77e57;box-shadow:0 0 0 5px rgba(231,126,87,.15);display:inline-block} .soon-hero{width:min(1310px,calc(100% - 90px));margin:0 auto;display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);align-items:center;min-height:650px;gap:42px;padding:44px 0 78px} .soon-copy{position:relative;z-index:2}.soon-eyebrow{display:flex;align-items:center;gap:12px;letter-spacing:.15em;font-size:10px;font-weight:850;color:#3a7167;margin-bottom:30px}.soon-eyebrow-line{width:30px;height:2px;background:#d9684b} .soon-copy h1{font-size:clamp(2.7rem,4.75vw,4.9rem);font-weight:800;line-height:1.095;letter-spacing:-.055em;max-width:690px;margin:0 0 25px} .soon-deck{font-size:clamp(15px,1.38vw,18px);line-height:1.75;max-width:545px;color:#58706d;margin:0 0 33px} .soon-link{display:inline-flex;align-items:center;gap:30px;background:#df6d4d;color:#172a2e;font-weight:800;padding:16px 20px;border-radius:5px;font-size:13px}.soon-link:hover{background:#f18c6e}.soon-link span{font-size:19px;line-height:1} .soon-for{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:47px;color:#5a7471;font-size:10px}.soon-for>span:first-child{font-weight:800;letter-spacing:.1em;color:#82908b;margin-right:7px}.soon-for strong{font-size:11px;color:#334c49}.soon-sep{color:#b8c4be} .soon-art{height:540px;position:relative;background:#153237;border-radius:9px;overflow:hidden;box-shadow:0 28px 50px rgba(18,47,48,.16)}.soon-art:before{content:"";position:absolute;inset:0;background:linear-gradient(140deg,transparent 15%,rgba(33,110,101,.35)),repeating-linear-gradient(0deg,transparent 0 47px,rgba(232,243,225,.03) 48px),repeating-linear-gradient(90deg,transparent 0 47px,rgba(232,243,225,.03) 48px)} .soon-glow{position:absolute;width:420px;height:420px;right:-170px;top:-170px;background:#2b6768;border-radius:50%;filter:blur(65px);opacity:.35}.soon-orbit{position:absolute;border:1px solid rgba(241,228,184,.13);border-radius:50%;width:520px;height:520px;left:-115px;bottom:-265px}.soon-orbit.two{width:740px;height:740px;left:-220px;bottom:-380px} .soon-card{position:absolute;top:76px;left:clamp(28px,10%,100px);width:min(335px,65%);padding:20px 20px 18px;background:#f9f4e8;color:#203b3a;border-radius:7px;box-shadow:0 18px 35px rgba(0,0,0,.26);transform:rotate(-7deg)} .soon-card:after{content:"BINGOTIX / SAMPLE CARD";display:block;color:#5b7671;font-size:8px;letter-spacing:.13em;font-weight:800;margin-top:13px;text-align:center}.soon-card-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.1em;font-weight:850;margin-bottom:17px}.soon-card-letters{display:grid;grid-template-columns:repeat(5,1fr);background:#1c4041;color:#f8f5e9;text-align:center;padding:8px 0;margin-bottom:5px;font-size:19px}.soon-card-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.soon-card-grid span{display:grid;place-items:center;aspect-ratio:1;background:#fff;border:1px solid #e0dfd2;font-weight:750;font-size:14px}.soon-card-grid span:nth-child(3),.soon-card-grid span:nth-child(9),.soon-card-grid span:nth-child(13){background:#e6af7a}.soon-card-grid span:nth-child(13){background:#205d59;color:white} .soon-ball{position:absolute;right:10%;bottom:95px;background:#e9a37c;color:#16343a;border-radius:100%;height:160px;width:160px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:25px;line-height:1;box-shadow:0 18px 26px rgba(4,25,29,.4),inset -12px -10px 19px rgba(143,73,54,.22);font-weight:850;transform:rotate(8deg)}.soon-ball span{font-size:72px;letter-spacing:-.09em;margin-left:-8px} .soon-art-label{position:absolute;bottom:28px;left:30px;color:#d4e7de;letter-spacing:.12em;font-size:10px;font-weight:800;display:flex;align-items:center;gap:12px}.soon-live{background:#b9e8a0;box-shadow:0 0 0 5px rgba(185,232,160,.11)} .soon-values{background:#fff;padding:75px max(45px,calc((100vw - 1310px)/2)) 83px;scroll-margin-top:15px}.soon-values-top{display:grid;grid-template-columns:1fr 2fr;align-items:start;gap:40px;padding-bottom:45px;border-bottom:1px solid #e3e9e3}.soon-values-top>span{font-size:11px;letter-spacing:.15em;color:#3a7167;font-weight:850}.soon-values h2{font-size:clamp(25px,3vw,40px);line-height:1.2;letter-spacing:-.043em;margin:0;font-weight:780}.soon-value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:46px;padding-top:42px}.soon-value-grid article span{font-size:12px;color:#d56f54;letter-spacing:.07em;font-weight:800}.soon-value-grid h3{font-size:19px;margin:18px 0 12px;letter-spacing:-.025em}.soon-value-grid p{font-size:14px;line-height:1.7;max-width:300px;margin-bottom:0} .soon-bottom{background:#183539;color:#fff;text-align:center;padding:95px 22px 85px}.soon-bottom-line{color:#e89d6f;font-size:28px;margin-bottom:20px}.soon-bottom h2{max-width:800px;font-size:clamp(30px,3.4vw,44px);line-height:1.16;margin:0 auto 12px}.soon-bottom p{color:#c6d3cd;margin-bottom:38px}.soon-bottom>span{font-size:10px;font-weight:800;letter-spacing:.15em;color:#e8b88c}.soon-footer{background:#122b2f;color:#b7c7bf;display:flex;justify-content:space-between;gap:12px;padding:26px max(45px,calc((100vw - 1310px)/2));font-size:11px} /* Admin marketing preview; same-origin authenticated pages inside iframe and in a regular tab. */ .website-admin-nav{background:white;border-bottom:1px solid #dbe2dd}.website-admin-nav .container{height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px}.website-admin-nav .container>span{font-size:13px;font-weight:800}.website-admin-nav .container>a:last-child{font-size:12px;color:#52716c} .website-admin{width:min(1570px,calc(100% - 46px));margin:0 auto;padding:36px 0 80px}.website-admin-heading{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:27px}.website-admin-heading h1{font-size:clamp(25px,3vw,36px);margin:8px 0 7px}.website-admin-heading p{font-size:13px;color:#586f6e;margin:0} .website-live-pill{background:#ddf2e8;color:#225e49;padding:9px 14px;border-radius:20px;font-size:11px;font-weight:850;white-space:nowrap} .website-layout{display:grid;grid-template-columns:minmax(305px,.78fr) minmax(500px,1.55fr);align-items:start;gap:22px}.website-controls{display:grid;gap:17px} .website-panel,.website-preview-panel{background:white;border:1px solid #dbe3dd;border-radius:13px;padding:22px;box-shadow:0 5px 27px rgba(20,45,48,.045)}.website-panel .panel-top{margin-bottom:10px}.website-panel>p{font-size:13px;line-height:1.6}.website-panel small{display:block;margin:12px 0 0;color:#72847e;font-size:11px;line-height:1.65}.website-public-actions{display:flex;flex-wrap:wrap;gap:7px}.website-panel form{display:grid;gap:15px}.website-panel form label{display:grid;gap:6px;font-size:12px;color:#385755;font-weight:800}.website-panel input,.website-panel textarea{width:100%;border:1px solid #cbd8d0;background:#fbfdfb;color:#193434;border-radius:7px;padding:10px 11px;font-size:13px;font-weight:400;line-height:1.5;resize:vertical}.website-panel textarea{font-family:inherit}.website-panel form .btn{justify-self:start} .website-preview-panel{padding:20px}.website-preview-header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}.website-preview-header h2{font-size:20px;margin:5px 0 0}.website-preview-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:9px;border-block:1px solid #e6ebe6;padding:13px 0;margin-bottom:14px} .website-switch{display:flex;flex-wrap:wrap;gap:4px}.website-switch button{border:1px solid transparent;border-radius:6px;background:#eff3ef;color:#4a6966;padding:8px 10px;font-size:11px;font-weight:750}.website-switch button.is-active{background:#20484a;color:white}.website-preview-stage{background:#dfe6e1;min-height:670px;overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:16px;border-radius:10px}.website-device-frame{width:min(100%,1280px);flex-shrink:0;background:white;box-shadow:0 12px 34px rgba(22,49,49,.17);border-radius:8px;overflow:hidden;border:1px solid #b9ccc5}.website-device-bar{height:31px;background:#f8faf8;border-bottom:1px solid #dde5df;display:flex;align-items:center;justify-content:space-between;padding:0 11px;color:#6a7f7c;font-size:10px}.website-device-bar i{height:6px;width:6px;background:#bdc9c3;border-radius:50%}.website-device-frame iframe{display:block;width:100%;height:685px;border:0;background:#fff}.website-preview-caption{font-size:11px;color:#6f817e;line-height:1.7;margin:14px 0 0} @media(max-width:1120px){.website-layout{grid-template-columns:1fr}.website-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.website-preview-header{flex-wrap:wrap}} @media(max-width:850px){.soon-nav,.soon-hero{width:calc(100% - 42px)}.soon-nav{height:76px}.soon-hero{grid-template-columns:1fr;padding:55px 0 45px;gap:39px}.soon-copy h1{max-width:650px}.soon-art{height:480px;max-width:620px;width:100%;margin:auto}.soon-values{padding:60px 25px}.soon-values-top{grid-template-columns:1fr;gap:16px}.soon-value-grid{gap:20px}.soon-footer{padding:24px}.website-controls{grid-template-columns:1fr}} @media(max-width:580px){.soon-nav-note{font-size:9px}.soon-logo{font-size:25px}.soon-copy h1{font-size:clamp(2.45rem,11vw,3.9rem)}.soon-copy .soon-deck{font-size:15px}.soon-eyebrow{font-size:9px}.soon-art{height:390px}.soon-card{top:46px;left:25px;width:66%;padding:12px;transform:rotate(-7deg)}.soon-card-letters{font-size:15px}.soon-card-grid{gap:2px}.soon-card-grid span{font-size:10px}.soon-ball{width:110px;height:110px;bottom:68px;right:22px;font-size:18px}.soon-ball span{font-size:51px}.soon-art-label{font-size:8px;bottom:20px;left:18px}.soon-value-grid{grid-template-columns:1fr;gap:28px}.soon-value-grid article{padding-bottom:23px;border-bottom:1px solid #e4e9e4}.soon-bottom{padding:68px 21px}.soon-footer{flex-direction:column;gap:8px}.website-admin{width:calc(100% - 24px);padding:25px 0}.website-admin-heading{align-items:start;flex-direction:column}.website-panel,.website-preview-panel{padding:15px}.website-preview-stage{padding:9px;min-height:550px}.website-device-frame iframe{height:575px}.website-preview-toolbar{align-items:start}.website-preview-header .btn{white-space:normal}} .website-preview-canvas{position:relative;flex-shrink:0}.website-preview-canvas .website-device-frame{position:absolute;top:0;left:0;transform-origin:top left;width:1280px;max-width:none} .website-page-select{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;color:#47645f}.website-page-select select{max-width:220px;padding:8px 10px;border:1px solid #c8d7cf;border-radius:6px;background:#fff;color:#244943;font-size:12px}.website-page-select select:disabled{opacity:.5}.website-preview-toolbar{justify-content:flex-start;gap:12px} /* BingoTIX Smart Focus rehearsal: clarity first, no card forcibly switches. */ .play-extra-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end} .smart-focus{background:#f5f8f4;border:1px solid #d9e3da;border-radius:13px;padding:13px;margin:0 0 18px;max-width:100%;overflow:hidden} .smart-focus-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px} .smart-focus-heading>div{display:flex;flex-direction:column;gap:3px} .smart-focus-heading strong{font-size:15px;color:#123e3f} .smart-focus-heading span{font-size:11px;color:#546e67} .priority-cards{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:thin;overscroll-behavior-inline:contain;min-height:32px} .smart-quiet{font-size:11px;color:#657f74;padding:5px 0} .priority-chip{background:#fff;border:1px solid #c7dbbe;border-radius:8px;padding:9px 10px;font:inherit;font-size:11px;font-weight:750;color:#1a4a3c;cursor:pointer;white-space:nowrap;flex:none} .priority-chip strong{margin-left:5px;color:#8c5c24} .priority-chip.bingo,.priority-chip.pending{border-color:#f6a37d;background:#fff1e9} .priority-chip.bingo strong{color:#bd4930} .card-tabs{display:flex;gap:7px;overflow-x:auto;padding:4px 2px 9px;scrollbar-width:thin;overscroll-behavior-inline:contain;scroll-snap-type:x proximity} .smart-tab{appearance:none;min-width:104px;flex:none;scroll-snap-align:start;display:flex;flex-direction:column;gap:5px;align-items:flex-start;justify-content:center;text-align:left;padding:10px 11px;min-height:62px;background:#fff;border:1px solid #d1dfd7;border-radius:9px;color:#173a37;font:inherit;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s} .smart-tab strong{font-size:12px;font-weight:850}.smart-tab span{font-size:10px;color:#61716c;font-weight:750} .smart-tab.selected{box-shadow:0 0 0 2px #1f7e68;border-color:#1f7e68;background:#f4fff6} .smart-tab.bingo{border-color:#d96d4f;background:#fff1e8}.smart-tab.bingo span{color:#b94529} .smart-tab.pending,.smart-tab.verified{border-color:#60aa7c;background:#e7f8ea} .smart-tab.one{border-color:#dea859;background:#fff5e3}.smart-tab.one span{color:#8b631d} .smart-focus-hint{font-size:11px;color:#4d6b60;margin:7px 2px 0;min-height:15px} .priority-bingo{border-radius:11px;border:2px solid #e98054;background:#fff2e9;padding:13px 15px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 17px;color:#933f29} .priority-bingo strong{font-size:15px}.priority-bingo span{font-size:12px;flex:1;min-width:140px} .sound-note{padding:9px 12px;margin:0 0 12px;background:#e9f4e8;border-radius:8px;font-size:11px;color:#285845} .smart-focus button:focus-visible,.cards-overview button:focus-visible{outline:3px solid #248970;outline-offset:2px} .cards-overview{z-index:80}.cards-overview-dialog{width:min(880px,98vw);max-height:88vh;display:flex;flex-direction:column;padding:22px} .overview-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.overview-heading h2{font-size:25px;margin:5px 0}.overview-heading p{font-size:12px;color:#63766d;max-width:580px;margin:4px 0 16px} .cards-overview-grid{overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:3px 3px 9px} .overview-card{display:flex;flex-direction:column;align-items:flex-start;gap:7px;background:#f8faf7;border:1px solid #d7e1d8;border-radius:10px;text-align:left;padding:13px;min-height:105px;font:inherit;cursor:pointer} .overview-card strong{font-size:14px}.overview-card span{font-size:12px;font-weight:800;color:#456b5b}.overview-card small{font-size:10px;color:#65776d;line-height:1.45} .overview-card.one,.overview-card.two{background:#fff8e9;border-color:#ebcb94}.overview-card.bingo{background:#fff0e9;border-color:#e8a588}.overview-card.pending,.overview-card.verified{background:#e8f5e9;border-color:#a0c7a6} @media(max-width:800px){.play-extra-controls{width:100%;justify-content:space-between}.play-settings{align-items:flex-start;flex-direction:column}.smart-focus{padding:11px}.smart-tab{min-width:97px}.priority-bingo{position:sticky;top:5px;z-index:10;box-shadow:0 4px 14px rgba(38,71,53,.12)}.overview-heading{flex-wrap:wrap}.cards-overview-dialog{max-height:92dvh;padding:16px}.cards-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(prefers-reduced-motion:reduce){.smart-tab,.priority-chip{transition:none}} .operator-next-action{flex-basis:100%;display:block;padding:9px 12px;border:1px solid #d5e5d9;border-radius:8px;background:#eff7ef;color:#295945;font-size:12px;font-weight:750} /* Secure application sign-out control */ .bt-signout{display:inline-flex;margin:0}.bt-signout button{font:inherit;font-size:12px;color:#356260;border:1px solid #d4e2df;border-radius:8px;padding:9px 12px;background:#fff;cursor:pointer}.bt-signout button:hover{background:#eef6f2} /* v0.1.6: keep current card identification in view before the grid. */ .current-card-banner{max-width:470px;margin:0 auto 9px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #bed9cd;background:#edf6ed;border-radius:10px;padding:11px 13px;color:#173f3b} .current-card-banner>div{display:flex;flex-direction:column;gap:3px} .current-card-banner .eyebrow{font-size:9px;color:#49736a} .current-card-banner strong{font-size:19px;line-height:1.12;font-weight:900;letter-spacing:-.025em} .current-card-help{font-size:11px;color:#547168;text-align:right;max-width:170px;line-height:1.3} .smart-focus-heading>div{display:flex;flex-direction:column;gap:4px;min-width:0} .smart-focus-heading strong,.smart-focus-heading span{display:block} #all-card-button{font-weight:800;white-space:nowrap;min-height:40px} #test-game-sounds{white-space:nowrap} @media(max-width:580px){.current-card-banner{padding:10px 11px}.current-card-banner strong{font-size:19px}.current-card-help{max-width:130px;font-size:10px}.smart-focus-heading{align-items:center;flex-wrap:wrap}} /* BingoTIX 0.1.7 PLAYER-FIRST LAYOUT: game stays front and center. */ body[data-page="play"]{background:#f6f5ef} body[data-page="play"] .play-layout{max-width:1320px;padding:15px 24px 28px} body[data-page="play"] .play-topbar{margin:0 0 12px;gap:10px} body[data-page="play"] .play-topbar .eyebrow{font-size:9px} body[data-page="play"] .play-topbar h1{font-size:clamp(20px,2vw,25px);line-height:1.12;margin:4px 0 0} body[data-page="play"] .play-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(325px,.85fr);gap:15px;align-items:start} body[data-page="play"] .play-center{grid-column:1;grid-row:1;min-width:0;padding:15px 20px 19px;display:flex;flex-direction:column;gap:0} body[data-page="play"] .play-aside{grid-column:2;grid-row:1;min-width:0;gap:12px} body[data-page="play"] .broadcast-details{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden} body[data-page="play"] .broadcast-card{border:0;border-radius:0} body[data-page="play"] .broadcast-toggle{display:none} body[data-page="play"] .game-panel-top{margin-bottom:6px} body[data-page="play"] .game-panel-top h2{font-size:clamp(18px,2vw,23px);margin:2px 0 3px} body[data-page="play"] .game-panel-top .eyebrow{font-size:9px} body[data-page="play"] .last-call{padding:5px 10px;min-width:70px} body[data-page="play"] .last-call strong{font-size:21px} body[data-page="play"] .play-settings{padding:7px 0;margin:0 0 8px;gap:7px} body[data-page="play"] .play-settings .toggle-wrap small{font-size:9px} body[data-page="play"] .smart-focus{padding:9px 11px 7px;margin:0 0 8px;background:#f2f7f1} body[data-page="play"] .smart-focus-heading{margin:0 0 5px} body[data-page="play"] .smart-focus-heading strong{font-size:13px} body[data-page="play"] .smart-focus-heading span{font-size:10px} body[data-page="play"] .smart-tab{min-width:83px;min-height:47px;padding:7px 9px;gap:1px;border-radius:8px} body[data-page="play"] .smart-tab strong{font-size:12px} body[data-page="play"] .smart-tab span{font-size:10px} body[data-page="play"] .card-tabs{padding:2px 1px 3px;gap:6px} body[data-page="play"] .priority-cards{min-height:0;padding:0} body[data-page="play"] .priority-cards:has(.smart-quiet){display:none} body[data-page="play"] .priority-chip{padding:5px 8px} body[data-page="play"] .smart-focus-hint{margin:3px 0 0;font-size:10px;min-height:0} body[data-page="play"] .current-card-banner{width:100%;max-width:410px;padding:6px 10px;margin:0 auto 5px} body[data-page="play"] .current-card-banner .eyebrow{font-size:8px} body[data-page="play"] .current-card-banner strong{font-size:17px} body[data-page="play"] .current-card-help{font-size:10px} body[data-page="play"] .player-card-area,body[data-page="play"] .player-card-area .bingo-card,body[data-page="play"] .claim-button,body[data-page="play"] .win-alert{max-width:410px} body[data-page="play"] .player-card-area .bingo-card{padding:8px 10px} body[data-page="play"] .bingo-card .card-letters{height:27px} body[data-page="play"] .bingo-card .card-letters span{font-size:19px} body[data-page="play"] .bingo-card .card-row{margin-top:2px;gap:3px} body[data-page="play"] .bingo-card .card-cell{min-height:0;font-size:clamp(17px,1.7vw,21px)} body[data-page="play"] .bingo-card .card-head{padding-bottom:5px} body[data-page="play"] .bingo-card .card-foot{margin-top:5px} body[data-page="play"] .card-pager{margin:3px auto 0;text-align:center;justify-content:center;font-size:10px} body[data-page="play"] .claim-button{height:56px;margin:8px auto 3px;font-size:23px;box-shadow:0 3px 0 #bd593f} body[data-page="play"] .claim-button:disabled{background:#dce6df;color:#526660;box-shadow:none;opacity:1;cursor:default} body[data-page="play"] .claim-feedback{margin:6px auto 0} body[data-page="play"] .win-alert{margin:5px auto 7px;animation:bt-win-enter .35s ease-out} body[data-page="play"] .priority-bingo{padding:8px 11px;margin:0 0 6px} body[data-page="play"] .broadcast-placeholder{min-height:205px} body[data-page="play"] .broadcast-ring{height:55px;width:55px;font-size:32px} body[data-page="play"] .broadcast-placeholder strong{font-size:17px} body[data-page="play"] .call-history-panel,body[data-page="play"] .play-tip{padding:14px} body[data-page="play"] .play-bottom{padding:12px 3px} body[data-page="play"] .play-extra-controls{gap:8px;align-items:center;justify-content:flex-end} body[data-page="play"] .play-extra-controls .btn{min-height:35px;padding:8px 10px} body[data-page="play"] .audio-settings{position:relative} body[data-page="play"] .audio-settings summary{list-style:none;cursor:pointer;user-select:none} body[data-page="play"] .audio-settings summary::-webkit-details-marker{display:none} body[data-page="play"] .audio-settings-panel{position:absolute;z-index:22;right:0;top:calc(100% + 5px);width:235px;background:#fff;border:1px solid #c9d9d1;border-radius:11px;padding:13px;box-shadow:0 12px 34px rgba(14,44,45,.14)} body[data-page="play"] .audio-settings-panel label{display:flex;justify-content:space-between;font-size:12px;font-weight:750;margin-bottom:8px} body[data-page="play"] .audio-settings-panel input{width:100%;accent-color:#258371;margin-bottom:10px} body[data-page="play"] .audio-settings-panel p{font-size:10px;color:#637a70;line-height:1.45;margin:8px 0 0} body[data-page="play"] .sound-note{padding:6px 9px;margin:0 0 6px;font-size:10px} .overview-card-head{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%} .overview-card-head span{white-space:nowrap;font-size:11px} .overview-mini-card{width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:4px;background:#234a49;border-radius:5px} .overview-mini-card i{font-style:normal;background:#f5f8f4;text-align:center;padding:4px 0;border-radius:2px;color:#254648;font-size:9px;font-weight:800;line-height:1.1} .overview-mini-card i.called{background:#d7f3a6} .overview-mini-card i.free{background:#f5cb91} .cards-overview-grid{grid-template-columns:repeat(auto-fill,minmax(174px,1fr))} .overview-card{min-height:0;gap:7px} @keyframes bt-win-enter{from{transform:translateY(-4px);opacity:.5}to{transform:translateY(0);opacity:1}} @media(min-width:1200px){body[data-page="play"] .play-cols{grid-template-columns:minmax(0,1fr) minmax(0,.87fr)}body[data-page="play"] .play-center{padding-inline:28px}} @media(max-width:800px){ body[data-page="play"] .play-layout{padding:10px 12px 24px} body[data-page="play"] .play-cols{display:flex;flex-direction:column;gap:10px} body[data-page="play"] .play-center,body[data-page="play"] .play-aside{width:100%} body[data-page="play"] .play-center{order:-1;padding:11px 12px 14px} body[data-page="play"] .play-topbar{margin-bottom:8px} body[data-page="play"] .play-topbar h1{font-size:20px} body[data-page="play"] .play-settings{flex-direction:row;align-items:center;flex-wrap:wrap} body[data-page="play"] .play-extra-controls{width:auto;margin-left:auto} body[data-page="play"] .play-extra-controls .btn{font-size:11px} body[data-page="play"] .broadcast-toggle{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;cursor:pointer;font-size:13px;font-weight:800;list-style:none;color:#18403d} body[data-page="play"] .broadcast-toggle::-webkit-details-marker{display:none} body[data-page="play"] .broadcast-toggle span{font-size:10px;color:#788782} body[data-page="play"] .broadcast-details[open] .broadcast-toggle{border-bottom:1px solid #d7e2dc} body[data-page="play"] .broadcast-placeholder{min-height:170px} body[data-page="play"] .priority-bingo{position:sticky;top:4px;z-index:12} body[data-page="play"] .claim-button{position:sticky;bottom:max(6px,env(safe-area-inset-bottom));z-index:9;box-shadow:0 3px 0 #bd593f,0 8px 22px rgba(16,50,48,.12)} body[data-page="play"] .claim-button:disabled{box-shadow:none} body[data-page="play"] .cards-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:580px){ body[data-page="play"] .play-topbar{gap:4px} body[data-page="play"] .play-profile{gap:6px} body[data-page="play"] .play-profile label{font-size:10px} body[data-page="play"] .play-profile select{max-width:170px;padding:6px 7px} body[data-page="play"] .game-panel-top h2{font-size:19px} body[data-page="play"] .play-settings{padding:6px 0;gap:8px} body[data-page="play"] .toggle-wrap small{display:none} body[data-page="play"] .smart-focus{padding:7px 8px;margin-bottom:5px} body[data-page="play"] .smart-focus-heading{align-items:center;flex-wrap:nowrap} body[data-page="play"] #all-card-button{min-height:32px;padding:5px 8px;font-size:11px} body[data-page="play"] .smart-tab{min-width:81px;min-height:43px;padding:6px 8px} body[data-page="play"] .card-tabs{padding-bottom:3px} body[data-page="play"] .current-card-banner{margin-bottom:3px;padding:5px 8px} body[data-page="play"] .bingo-card .card-letters{height:25px} body[data-page="play"] .bingo-card .card-cell{font-size:18px;min-height:0} body[data-page="play"] .claim-button{height:55px;font-size:23px;margin-top:7px} body[data-page="play"] .card-pager{font-size:10px} body[data-page="play"] .cards-overview-dialog{padding:12px;max-height:92dvh} body[data-page="play"] .overview-card{padding:8px} body[data-page="play"] .overview-mini-card i{font-size:8px;padding:3px 0} } @media(prefers-reduced-motion:reduce){body[data-page="play"] .win-alert{animation:none}body[data-page="play"] .smart-tab{transition:none}} /* Player-first final pass: single compact selector row and condensed chrome. */ body[data-page="play"] .app-nav{height:58px;gap:15px} body[data-page="play"] .play-layout{padding-top:8px} body[data-page="play"] .play-topbar{margin-bottom:5px} body[data-page="play"] .play-topbar h1{font-size:21px} body[data-page="play"] .play-topbar .eyebrow{font-size:8px} body[data-page="play"] .play-center{padding-block:12px 16px} body[data-page="play"] .game-panel-top{margin-bottom:4px} body[data-page="play"] .game-panel-top h2{font-size:20px} body[data-page="play"] .play-settings{padding:5px 0;margin-bottom:6px} body[data-page="play"] .smart-focus{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 10px;padding:7px 9px;margin-bottom:4px} body[data-page="play"] .smart-focus-heading{grid-column:1;grid-row:1;margin:0} body[data-page="play"] .smart-focus-heading span{font-size:9px;white-space:nowrap} body[data-page="play"] .smart-focus-heading strong{font-size:12px} body[data-page="play"] .card-tabs{grid-column:2;grid-row:1;min-width:0;max-width:100%;padding:1px;gap:5px} body[data-page="play"] #all-card-button{grid-column:3;grid-row:1;min-height:34px;padding:6px 9px} body[data-page="play"] .priority-cards{grid-column:1 / -1;grid-row:2} body[data-page="play"] .smart-focus-hint{grid-column:1 / -1;grid-row:3;display:none} body[data-page="play"] .smart-focus:has(.priority-chip) .smart-focus-hint{display:block} body[data-page="play"] .current-card-banner{padding:5px 9px;margin-bottom:3px} body[data-page="play"] .current-card-banner strong{font-size:16px} body[data-page="play"] .sound-note{padding:5px 8px;margin-bottom:4px} body[data-page="play"] .smart-tab{min-height:40px;min-width:80px;padding:5px 7px} body[data-page="play"] .claim-button:disabled{position:static;box-shadow:none} @media(max-width:800px){ body[data-page="play"] .app-nav{min-height:53px;height:53px;flex-wrap:nowrap;padding:5px 10px} body[data-page="play"] .app-links,body[data-page="play"] .app-demo-mark{display:none} body[data-page="play"] .app-nav .brand{font-size:21px} body[data-page="play"] .app-nav .bt-signout{margin-left:auto} body[data-page="play"] .play-topbar{display:flex;flex-direction:row;align-items:center;margin-bottom:7px;gap:5px} body[data-page="play"] .play-topbar h1{font-size:19px} body[data-page="play"] .play-profile{width:auto;gap:4px;justify-content:flex-end} body[data-page="play"] .play-profile label{display:none} body[data-page="play"] .play-profile select{max-width:142px;font-size:11px} body[data-page="play"] .play-profile .network-status{font-size:0} body[data-page="play"] .play-profile .network-status::before{content:'●';font-size:12px} body[data-page="play"] .smart-focus{grid-template-columns:minmax(0,1fr) auto;gap:4px 8px} body[data-page="play"] .smart-focus-heading{grid-column:1;grid-row:1} body[data-page="play"] #all-card-button{grid-column:2;grid-row:1} body[data-page="play"] .card-tabs{grid-column:1 / -1;grid-row:2} body[data-page="play"] .priority-cards{grid-row:3} body[data-page="play"] .smart-focus-hint{grid-row:4} body[data-page="play"] .claim-button:disabled{position:static;box-shadow:none} } @media(max-width:580px){ body[data-page="play"] .play-topbar .eyebrow{font-size:7px} body[data-page="play"] .play-layout{padding:8px 8px 16px} body[data-page="play"] .play-center{padding:9px 10px 11px} body[data-page="play"] .smart-focus{padding:6px 7px} body[data-page="play"] .current-card-banner{padding:5px 7px} body[data-page="play"] .game-panel-top{gap:7px} body[data-page="play"] .game-panel-top h2{margin:2px 0} body[data-page="play"] .game-panel-top p{font-size:10px} body[data-page="play"] .play-settings{padding:5px 0;margin:0 0 5px} body[data-page="play"] .play-extra-controls .btn{font-size:10px;padding:6px 7px} body[data-page="play"] .card-row .card-cell{min-height:0} } /* The 24-card modal must scroll instead of compressing overlapping grid rows. */ .cards-overview-dialog{min-height:0;overflow:hidden} .cards-overview-grid{flex:1 1 auto;min-height:0;align-content:start;grid-auto-rows:max-content;overflow-y:auto;overscroll-behavior:contain} .overview-card{height:auto;min-width:0;align-self:start} body[data-page="play"] .claim-button:not(:disabled){position:sticky;bottom:max(8px,env(safe-area-inset-bottom));z-index:12;box-shadow:0 4px 0 #bd593f,0 6px 24px rgba(30,58,52,.15)} /* v0.1.8 - Game Night visual system. Deliberately distinct from the public marketing/CMS UI. */ body[data-page="play"]{background:linear-gradient(120deg,#071e27 0%,#0d3035 54%,#122d36 100%);color:#e8f5ea;min-height:100dvh} body[data-page="play"] .site-header,body[data-page="play"] .app-header{background:#f9f5eb} body[data-page="play"] .play-layout{max-width:1500px;padding:14px 20px 45px} body[data-page="play"] .play-topbar{color:#e6f1e9;margin:0 0 12px;align-items:end} body[data-page="play"] .play-topbar .eyebrow{color:#a7e8be;letter-spacing:.14em;font-size:10px} body[data-page="play"] .play-topbar h1{font-size:clamp(23px,2.3vw,29px);font-weight:850;color:#fff;letter-spacing:-.05em;margin-top:5px} body[data-page="play"] .play-profile label{color:#bfdcd3} body[data-page="play"] .play-profile select{border-color:#8aaba1;color:#163935} body[data-page="play"] .network-status{color:#9eeda7} body[data-page="play"] .play-cols{grid-template-columns:minmax(0,1.06fr) minmax(345px,.94fr);gap:18px} body[data-page="play"] .play-center{background:linear-gradient(164deg,#102d36 0%,#0e2732 62%,#0c212a 100%);border:1px solid #396367;box-shadow:0 19px 60px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08);padding:0 22px 22px;border-radius:18px;overflow:visible;color:#fff} body[data-page="play"] .game-night-topline{margin:0 -22px 12px;padding:9px 18px;display:flex;align-items:center;gap:9px;background:linear-gradient(90deg,#214a4b,#14343d);border-radius:17px 17px 0 0;border-bottom:1px solid #326360;color:#c0ebd2;font-size:9px;letter-spacing:.14em} body[data-page="play"] .game-night-caption{margin-left:auto;color:#a9c6c0;font-size:8px} body[data-page="play"] .game-live-dot{height:8px;width:8px;flex:none;border-radius:50%;background:#d4ff74;box-shadow:0 0 0 4px rgba(197,248,120,.12),0 0 12px #a5f55b} body[data-page="play"] .game-panel-top{margin-bottom:6px;min-height:78px} body[data-page="play"] .game-panel-top .eyebrow{color:#8cdbc4;letter-spacing:.13em;font-size:10px} body[data-page="play"] .game-panel-top h2{color:white;font-size:clamp(23px,2.2vw,28px);font-weight:850;letter-spacing:-.035em} body[data-page="play"] .game-panel-top p{color:#d4e4e1;font-size:12px} body[data-page="play"] .winning-pattern-note{margin-top:5px;display:flex;align-items:center;gap:8px;color:#8fb5ac;font-size:10px;font-weight:650} body[data-page="play"] .pattern-micro{display:grid;grid-template-columns:repeat(5,5px);gap:2px;border:1px solid #417371;padding:3px;border-radius:4px} body[data-page="play"] .pattern-micro i{height:5px;width:5px;background:#36525a;border-radius:1px} body[data-page="play"] .pattern-micro i.lit{background:#dfff83} body[data-page="play"] .last-call{border:1px solid #517978;background:radial-gradient(circle at 30% 20%,#47786a,#193f46 75%);border-radius:14px;min-width:91px;padding:7px 9px;box-shadow:inset 0 1px 0 #7cafa355} body[data-page="play"] .last-call small{color:#b7d6ca;font-size:9px} body[data-page="play"] .last-call strong{font-size:25px;color:#edffb0;display:block;text-shadow:0 1px 14px #adf36e77} body[data-page="play"] .call-arrived{animation:bt-call-pop .45s ease-out} body[data-page="play"] .play-settings{border-color:#33535a;margin:2px 0 10px;padding:7px 0} body[data-page="play"] .toggle-wrap strong{color:#effdf2;font-size:12px} body[data-page="play"] .toggle-wrap small{color:#95b5b1} body[data-page="play"] .play-extra-controls .btn{background:#20444b;border-color:#567878;color:#f0faf0;box-shadow:none;border-radius:8px;font-size:11px} body[data-page="play"] .play-extra-controls .btn:hover{background:#30605b} body[data-page="play"] .audio-settings-panel{background:#f9fcf7;color:#173b3c} body[data-page="play"] .smart-focus{background:linear-gradient(120deg,rgba(40,83,80,.95),rgba(35,65,73,.95));border:1px solid #3e7471;border-radius:12px;padding:10px 12px;margin-bottom:9px} body[data-page="play"] .smart-focus-heading strong{color:#f6fff5;font-size:12px} body[data-page="play"] .smart-focus-heading span{color:#b8d4cb} body[data-page="play"] #all-card-button{background:#e6ffdb;border-color:#d3edc6;color:#20473b;font-weight:800;min-height:33px} body[data-page="play"] .smart-tab{border:1px solid #577875;min-height:46px;min-width:85px;background:#1c454a;color:#eff9e8;transition:border-color .2s,background .2s,box-shadow .2s,transform .2s} body[data-page="play"] .smart-tab strong{font-size:13px} body[data-page="play"] .smart-tab span{color:#b2d3c5;font-size:10px} body[data-page="play"] .smart-tab.selected{background:linear-gradient(145deg,#effdc9,#d4f09d);color:#20423b;box-shadow:inset 0 1px 0 white,0 0 0 2px #c9f18c;border-color:#dfff97} body[data-page="play"] .smart-tab.selected span{color:#36634d} body[data-page="play"] .smart-tab.one{border-color:#eab16d;background:#664437}.smart-tab.one span{color:#ffe0af} body[data-page="play"] .smart-tab.bingo{border:2px solid #ffb45c;background:#833a2d;color:#fff5e7;animation:bt-attention 2.5s ease-in-out infinite} body[data-page="play"] .smart-tab.bingo span{color:#ffdf86} body[data-page="play"] .smart-tab.pending{background:#2a5f58;border-color:#c8ebb4} body[data-page="play"] .smart-focus-hint{color:#c7e1d0;font-size:10px;min-height:0} body[data-page="play"] .smart-quiet{color:#b8cfca} body[data-page="play"] .priority-chip{border-color:#bbf29f;background:#203e3c;color:#e8ffe3} body[data-page="play"] .priority-bingo{background:#53382a;border:1px solid #f4b667;color:#fff4dc} body[data-page="play"] .current-card-banner{background:transparent;border:0;color:#c3e6d9;box-shadow:none;max-width:440px;padding:4px 4px 8px;margin:0 auto} body[data-page="play"] .current-card-banner .eyebrow{color:#93bbaf;font-size:8px} body[data-page="play"] .current-card-banner strong{color:#fff;font-size:17px} body[data-page="play"] .current-card-help{color:#b8d6cc} body[data-page="play"] .card-progress{max-width:440px;width:100%;margin:0 auto 7px;border:1px solid #3c6264;background:#153a42;border-radius:9px;padding:8px 11px} body[data-page="play"] .card-progress-title{display:flex;align-items:center;gap:12px;justify-content:space-between} body[data-page="play"] .card-progress-title strong{font-size:11px;font-weight:550;color:#c7dfd8;text-align:right;flex:1;line-height:1.25} body[data-page="play"] .card-status-pill{font-weight:900;white-space:nowrap;letter-spacing:.055em;font-size:10px;color:#d5ecc8} body[data-page="play"] .card-status-pill.one,body[data-page="play"] .card-status-pill.two{color:#ffdb9a} body[data-page="play"] .card-status-pill.bingo,body[data-page="play"] .card-status-pill.verified{color:#ffbd7c} body[data-page="play"] .card-progress-track{margin-top:7px;border-radius:10px;background:#335b5d;overflow:hidden;height:4px} body[data-page="play"] .card-progress-track i{display:block;width:0;height:100%;border-radius:10px;background:linear-gradient(90deg,#80d3a0,#d1fa91);transition:width .35s} body[data-page="play"] .card-progress-track i.urgent{background:#f8bb71} body[data-page="play"] .player-card-area,body[data-page="play"] .player-card-area .bingo-card,body[data-page="play"] .claim-button{max-width:440px} body[data-page="play"] .bingo-card{background:#f8f4e7;border:1px solid #e7dabc;border-radius:12px;padding:10px!important;box-shadow:0 8px 24px #050e1266,0 0 0 3px #79cbbd22!important;transform:translateZ(0)} body[data-page="play"] .bingo-card .card-head{padding:0 3px 7px} body[data-page="play"] .bingo-card .card-brand{font-size:17px;color:#153e43} body[data-page="play"] .bingo-card .card-head strong{font-size:10px;color:#5c7770} body[data-page="play"] .bingo-card .card-serial{color:#667e75} body[data-page="play"] .bingo-card .card-grid{background:#11424a;border:3px solid #11424a;border-radius:7px;padding:3px;box-shadow:inset 0 0 0 1px #84afa4} body[data-page="play"] .bingo-card .card-letters{height:33px} body[data-page="play"] .bingo-card .card-letters span{font-size:22px;color:#e4ffa6;text-shadow:0 1px 5px #b5eb8288} body[data-page="play"] .bingo-card .card-row{gap:4px;margin-top:4px} body[data-page="play"] .bingo-card .card-cell{border-radius:5px;background:linear-gradient(155deg,#fffef9,#ebf1e8);font-size:clamp(20px,2vw,26px);color:#173b3c;box-shadow:inset 0 -2px 0 #cbd9ca;border:1px solid #bfd2c3;font-weight:900} body[data-page="play"] .bingo-card .card-cell.free-cell{background:radial-gradient(circle,#fbe7a6,#f5c978);color:#6b4125;font-size:11px;box-shadow:inset 0 -2px 0 #d59a55} body[data-page="play"] .bingo-card .card-cell.auto-mark:not(.free-cell){background:linear-gradient(160deg,#e4fac4,#bbef96);color:#0e4436;box-shadow:inset 0 -2px 0 #85bc71} body[data-page="play"] .bingo-card .card-cell.auto-mark:not(.free-cell):after{inset:8%;border:4px solid #0a9070;border-radius:50%;box-shadow:0 0 0 2px #f5ffb688;transform:rotate(-15deg)} body[data-page="play"] .bingo-card .card-cell.just-daubed{animation:bt-daub-pop .55s cubic-bezier(.2,.75,.15,1)} body[data-page="play"] .bingo-card .card-foot{color:#687970;font-size:8px} body[data-page="play"] .card-pager{color:#bedbd1} body[data-page="play"] .claim-button{height:57px;font-weight:950;letter-spacing:.07em;border-radius:12px;background:linear-gradient(180deg,#ff9870,#ef684c);color:#153538;box-shadow:0 4px 0 #a34331,0 7px 22px #fb7f6455} body[data-page="play"] .claim-button:disabled{background:#264a4c!important;color:#8caca2!important;box-shadow:none!important;border:1px solid #47706c;opacity:1} body[data-page="play"] .win-alert{background:#daffab;color:#163b32;border:2px solid #a5ed6d;border-radius:12px;box-shadow:0 0 30px #b3f17a22;max-width:440px} body[data-page="play"] .claim-feedback{color:#c9ebd4} body[data-page="play"] .play-aside{gap:13px} body[data-page="play"] .broadcast-card{background:#163c43;border:1px solid #3c6c6c;color:#fff} body[data-page="play"] .broadcast-head{color:#c5e1d3} body[data-page="play"] .broadcast-placeholder{background:radial-gradient(circle at 65% 30%,#315964 0%,#153742 50%,#0b2834 100%);border-block:1px solid #3b6263} body[data-page="play"] .broadcast-ring{color:#d9f79d;border-color:#94dd9d} body[data-page="play"] .broadcast-bottom{color:#aacbba} body[data-page="play"] .call-history-panel{background:#153941;color:#f5fff6;border-color:#3d6668} body[data-page="play"] .call-history-panel .panel-top span{color:#bbd1c9} body[data-page="play"] .history-balls{margin-top:8px} body[data-page="play"] .call-ball{border-radius:25px;background:#dbf7ac;color:#1b5244} body[data-page="play"] .play-tip{background:#23474a;border:1px solid #49736d;color:#f4fff2} body[data-page="play"] .play-tip p{color:#bbd4cf} body[data-page="play"] .play-tip a{color:#ddff9f} body[data-page="play"] .play-bottom{color:#adc7bd} body[data-page="play"] .play-bottom a{color:#c8fbb4} body[data-page="play"] .sound-note{background:#215b4b;color:#f2ffea} body[data-page="play"] .announcement-banner{color:#563518} @keyframes bt-daub-pop{0%{transform:scale(.9);filter:brightness(1.35)}75%{transform:scale(1.06)}100%{transform:scale(1);filter:brightness(1)}} @keyframes bt-call-pop{0%{transform:scale(.78);opacity:.5}70%{transform:scale(1.16)}100%{transform:scale(1);opacity:1}} @keyframes bt-attention{0%,100%{box-shadow:0 0 0 0 #fbba6a44}50%{box-shadow:0 0 0 4px #fbba6a44}} @media(max-width:800px){ body[data-page="play"] .play-layout{padding:9px 11px 23px} body[data-page="play"] .play-center{padding:0 12px 15px} body[data-page="play"] .game-night-topline{margin-inline:-12px;padding:9px 12px} body[data-page="play"] .play-topbar{margin-bottom:9px} body[data-page="play"] .broadcast-toggle{color:#e4ffbf;background:#234a4d;border-radius:10px} body[data-page="play"] .broadcast-toggle span{color:#c0d7cb} body[data-page="play"] .broadcast-details{border:1px solid #4a7772;border-radius:10px} body[data-page="play"] .claim-button:not(:disabled){box-shadow:0 4px 0 #a34331,0 6px 22px #0a232355} } @media(max-width:580px){ body[data-page="play"] .game-night-caption{display:none} body[data-page="play"] .game-panel-top{min-height:0} body[data-page="play"] .game-panel-top h2{font-size:23px} body[data-page="play"] .last-call{min-width:70px} body[data-page="play"] .last-call strong{font-size:22px} body[data-page="play"] .winning-pattern-note span{font-size:9px} body[data-page="play"] .smart-focus{padding:8px} body[data-page="play"] .smart-tab{min-width:82px} body[data-page="play"] .card-progress-title strong{font-size:10px} body[data-page="play"] .bingo-card .card-letters{height:27px} body[data-page="play"] .bingo-card .card-cell{font-size:clamp(18px,5.6vw,24px)} body[data-page="play"] .bingo-card .card-row{gap:3px;margin-top:3px} body[data-page="play"] .claim-button{margin-bottom:5px} } @media(prefers-reduced-motion:reduce){body[data-page="play"] .just-daubed,body[data-page="play"] .call-arrived,body[data-page="play"] .smart-tab.bingo{animation:none!important}body[data-page="play"] .card-progress-track i{transition:none}} /* Layout QA correction: actual card enters the first viewport, never buried below controls. */ @media(min-width:801px){ body[data-page="play"] .play-center{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,.70fr);column-gap:13px;row-gap:5px;align-items:start;align-content:start} body[data-page="play"] .game-night-topline{grid-column:1/-1;grid-row:1} body[data-page="play"] .game-panel-top{grid-column:2;grid-row:2;min-width:0;align-self:start;flex-wrap:wrap;padding:3px 0} body[data-page="play"] .play-settings{grid-column:2;grid-row:3;flex-wrap:wrap;margin:0;padding:6px 0} body[data-page="play"] .play-extra-controls{justify-content:flex-start;flex-wrap:wrap} body[data-page="play"] .smart-focus{grid-column:2;grid-row:4;min-width:0} body[data-page="play"] .card-tabs{flex-wrap:wrap;max-height:218px;overflow-y:auto;scroll-snap-type:none} body[data-page="play"] .smart-tab{min-width:70px;flex:1 1 83px} body[data-page="play"] .current-card-banner{grid-column:1;grid-row:2;min-width:0;margin:0;padding:5px 0 4px} body[data-page="play"] .card-progress{grid-column:1;grid-row:3;margin:0 0 4px;padding:7px 9px} body[data-page="play"] .player-card-area{grid-column:1;grid-row:4;min-width:0;max-width:100%;width:100%;margin:0} body[data-page="play"] .player-card-area .bingo-card{max-width:100%} body[data-page="play"] .claim-button{grid-column:1;grid-row:5;margin:6px 0 0;max-width:100%} body[data-page="play"] #win-alert{grid-column:1;grid-row:6} body[data-page="play"] #priority-bingo{grid-column:2;grid-row:5} body[data-page="play"] #play-sounds-note{grid-column:2;grid-row:6} body[data-page="play"] #announcement{grid-column:1/-1;grid-row:1} body[data-page="play"] #claim-feedback{grid-column:1;grid-row:7} body[data-page="play"] .game-panel-top h2{font-size:clamp(20px,2vw,24px)} body[data-page="play"] .last-call{min-width:64px} body[data-page="play"] .last-call strong{font-size:22px} body[data-page="play"] .smart-focus-heading{flex-wrap:wrap;gap:4px} body[data-page="play"] .smart-focus-heading strong{font-size:13px} body[data-page="play"] .smart-focus-heading span{font-size:9px} body[data-page="play"] .bingo-card .card-cell{font-size:clamp(20px,1.85vw,26px);opacity:1} } @media(max-width:800px){ body[data-page="play"] .play-center{display:flex;flex-direction:column} body[data-page="play"] .game-night-topline{order:0} body[data-page="play"] .game-panel-top{order:1} body[data-page="play"] .play-settings{order:2} body[data-page="play"] .smart-focus{order:3} body[data-page="play"] .priority-bingo{order:4} body[data-page="play"] .current-card-banner{order:5} body[data-page="play"] .card-progress{order:6} body[data-page="play"] .player-card-area{order:7} body[data-page="play"] .win-alert{order:8} body[data-page="play"] .claim-button{order:9} body[data-page="play"] .claim-feedback{order:10} body[data-page="play"] .sound-note{order:11} body[data-page="play"] .announcement-banner{order:1} body[data-page="play"] .bingo-card .card-cell{opacity:1} } /* Game card placement refinement from screenshot QA. */ @media(min-width:801px){ body[data-page="play"] .smart-focus{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:12px} body[data-page="play"] .smart-focus-heading{display:flex;align-items:flex-start;justify-content:space-between} body[data-page="play"] #all-card-button{order:2;align-self:start;width:100%} body[data-page="play"] .card-tabs{display:flex;order:1;flex-wrap:wrap;overflow-y:auto;overflow-x:hidden;max-height:245px;min-width:0;width:100%;align-items:stretch} body[data-page="play"] .smart-tab{min-width:76px;flex:1 1 85px} body[data-page="play"] .priority-cards{order:3;width:100%} body[data-page="play"] .smart-focus-hint{order:4} body[data-page="play"] .current-card-banner{display:none} body[data-page="play"] .card-progress{display:none} body[data-page="play"] .player-card-area{grid-row:2/span 3;margin-top:0} body[data-page="play"] .claim-button{grid-row:5} body[data-page="play"] #win-alert{grid-row:6} } @media(max-width:800px){ body[data-page="play"] .current-card-banner{display:none} body[data-page="play"] .card-progress[data-status="playing"]{display:none} body[data-page="play"] .play-settings{order:10} body[data-page="play"] .player-card-area{order:4} body[data-page="play"] .win-alert{order:5} body[data-page="play"] .claim-button{order:6} body[data-page="play"] .play-settings{margin-top:10px;border-top:1px solid #47645e;padding-top:10px} body[data-page="play"] .card-progress{order:3} body[data-page="play"] .smart-focus{order:2} body[data-page="play"] .game-panel-top{order:1} body[data-page="play"] .play-center .game-night-topline{order:0} body[data-page="play"] .priority-bingo{order:3} body[data-page="play"] .claim-feedback{order:9} body[data-page="play"] .sound-note{order:11} } /* Contrast correction on the light navigation header. */ body[data-page="play"] .app-header .app-links a{color:#1d4547;font-weight:750} body[data-page="play"] .app-header .app-links a:hover,body[data-page="play"] .app-header .app-links a:focus-visible{color:#0f7b69} /* v0.1.9 BingoTIX Original Game Night: distinctively playful, never casino-like. */ body[data-page="play"]{background:radial-gradient(ellipse at 15% 14%,#1c5c5a 0%,transparent 42%),radial-gradient(ellipse at 94% 30%,#16375c 0%,transparent 38%),#071f29} body[data-page="play"] .play-layout{position:relative} body[data-page="play"] .play-center{background:linear-gradient(147deg,#103b41 0%,#0a2935 54%,#0a2530 100%);border-color:#58928a;box-shadow:0 24px 80px #0005, inset 0 1px 0 #9be1c135} body[data-page="play"] .game-night-topline{background:linear-gradient(95deg,#245d56,#183f54);font-weight:800} body[data-page="play"] .bingo-card{background:linear-gradient(150deg,#fffaf0,#ecece0);border:3px solid #fce7b7!important;box-shadow:0 8px 0 #16484d,0 13px 37px #050f1677!important} body[data-page="play"] .bingo-card .card-grid{background:#144950;border-color:#144950;box-shadow:inset 0 0 0 1px #94d1c3} body[data-page="play"] .bingo-card .card-letters{min-height:37px;height:37px;align-items:center;gap:4px} body[data-page="play"] .bingo-card .card-letters span{display:flex;align-items:center;justify-content:center;width:36px;max-width:100%;height:31px;margin:auto;border-radius:50%;color:#11393a!important;text-shadow:none;font-size:22px;font-weight:950;box-shadow:inset 0 -3px 0 #0002,0 1px 8px #08192255} body[data-page="play"] .bingo-card .card-letters span:nth-child(1){background:#f6bd93} body[data-page="play"] .bingo-card .card-letters span:nth-child(2){background:#ffe08e} body[data-page="play"] .bingo-card .card-letters span:nth-child(3){background:#c7eea5} body[data-page="play"] .bingo-card .card-letters span:nth-child(4){background:#a4ddec} body[data-page="play"] .bingo-card .card-letters span:nth-child(5){background:#d4b6eb} body[data-page="play"] .bingo-card .card-cell{background:linear-gradient(150deg,#fffef7,#edf6ed);border-radius:7px;box-shadow:inset 0 -3px 0 #d6e4d4,0 1px 1px #102f3655;transition:background .2s,box-shadow .2s,transform .2s; font-weight:900} body[data-page="play"] .bingo-card .card-cell:not(:disabled):hover{background:#f9f5ca;transform:translateY(-1px)} body[data-page="play"] .bingo-card .card-cell.auto-mark:not(.free-cell){background:linear-gradient(160deg,#d5f1ac,#a8dc9b);box-shadow:inset 0 -3px 0 #80b77a} body[data-page="play"] .bingo-card .card-cell.auto-mark:not(.free-cell):after{border-width:4px;border-color:#139270} body[data-page="play"] .bingo-card .card-cell.free-cell{background:radial-gradient(circle at 35% 28%,#ffeeb2,#f4bf6a)} body[data-page="play"] .game-panel-top{align-content:start} body[data-page="play"] .game-rack-label{font-size:9px;letter-spacing:.16em;font-weight:850;color:#a9d4ca;margin-top:11px;margin-bottom:5px} body[data-page="play"] .game-ball-rack{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:38px} body[data-page="play"] .rack-waiting{font-size:10px;color:#b4d3cd} body[data-page="play"] .rack-ball{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;font-size:10px;font-weight:950;color:#193c40;background:#f9bd91;box-shadow:inset 0 -4px 0 #0002,0 3px 9px #020d174d} body[data-page="play"] .rack-ball.latest{width:43px;height:43px;border:2px solid #fff7d3;box-shadow:inset 0 -4px 0 #0002,0 0 0 3px #fcffa524,0 3px 14px #020d1799} body[data-page="play"] .rack-col-1{background:#ffe092} body[data-page="play"] .rack-col-2{background:#ceeeae} body[data-page="play"] .rack-col-3{background:#a8dfef} body[data-page="play"] .rack-col-4{background:#e0beee} body[data-page="play"] .last-call{border-radius:999px;min-width:77px;min-height:77px;display:flex;align-items:center;flex-direction:column;justify-content:center;background:radial-gradient(circle at 33% 25%,#d6f2a5,#66ac90 73%,#387477);border:2px solid #dffbb6;box-shadow:inset 0 -5px 0 #2d786555,0 4px 17px #081a1b88;color:#113f3c} body[data-page="play"] .last-call small,body[data-page="play"] .last-call strong{color:#14443d;text-shadow:none} body[data-page="play"] .last-call small{font-size:8px;font-weight:950} body[data-page="play"] .last-call strong{font-size:20px} body[data-page="play"] .smart-tab.selected{outline:2px solid #e8ffa4;outline-offset:1px} body[data-page="play"] .smart-tab.one{background:#76513b;border-color:#ffd39d} body[data-page="play"] .smart-tab.bingo{background:#8b4936;border-color:#fff09b} /* The All Cards gallery is a full WINDOW overlay, never an accidental fullscreen request. */ .cards-overview.card-gallery-scrim{position:fixed;inset:0;z-index:99999;padding:0!important;display:flex;align-items:stretch;justify-content:center;background:rgba(5,21,28,.94);backdrop-filter:blur(6px)} .cards-gallery{display:flex;flex-direction:column;width:100%;height:100%;height:100dvh;max-width:1800px;min-height:0;color:#f5fff2;background:linear-gradient(130deg,#0c313b,#071f2e 65%,#122b3c);box-shadow:0 0 100px #0009;outline:0} .cards-gallery:fullscreen{max-width:none;width:100vw;height:100vh} .gallery-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:clamp(14px,2.5vw,30px) clamp(16px,3vw,46px) 15px;border-bottom:1px solid #335e63;flex:none} .gallery-heading .eyebrow{color:#a3eed7;letter-spacing:.15em;font-size:10px} .gallery-heading h2{font-size:clamp(25px,3.5vw,42px);font-weight:900;line-height:1.14;color:#fff;margin:4px 0 6px} .gallery-heading p{font-size:13px;color:#c6ded3;line-height:1.5} .gallery-header-actions{display:flex;gap:8px;flex:none} .cards-gallery .btn-outline{border-color:#6da099;color:#f6fff2;background:#1a474c} .cards-gallery .btn-outline:hover{background:#315e63} .gallery-toolbar{display:flex;align-items:center;gap:9px;padding:13px clamp(16px,3vw,46px);background:#123842;border-bottom:1px solid #345963;flex:none;flex-wrap:wrap} .gallery-filter{border:1px solid #668e88;background:#21494d;color:#ddf4e8;min-height:42px;padding:8px 16px;font-weight:850;border-radius:999px;cursor:pointer} .gallery-filter.active{background:#e0fbae;color:#143c3c;border-color:#ecffc8} .gallery-filter span{font-size:11px;opacity:.78;margin-left:4px} .gallery-status{font-size:12px;color:#c3ddd2;margin-left:auto} .gallery-content{flex:1 1 auto;min-height:0;overflow:auto;padding:clamp(14px,2.4vw,28px) clamp(16px,3vw,46px);overscroll-behavior:contain;scrollbar-color:#5f9d8b transparent} .gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,222px),1fr));gap:clamp(11px,1.4vw,20px);align-items:start} .gallery-card{display:flex;flex-direction:column;gap:11px;min-width:0;min-height:0;padding:14px;border-radius:16px;background:#f7f6eb;border:2px solid #9bbbb0;box-shadow:0 4px 0 #193a45,0 12px 25px #020f1647;color:#143e3f;text-align:left;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s} .gallery-card:hover{transform:translateY(-2px);box-shadow:0 6px 0 #183d44,0 18px 27px #020f1677} .gallery-card:focus-visible{outline:4px solid #e0ff98;outline-offset:2px} .gallery-card.gallery-selected{border-color:#83de93;box-shadow:0 0 0 3px #8cdaa644,0 9px 0 #183a45} .gallery-card.bingo{border-color:#f79f67;background:#fff4e8;box-shadow:0 0 0 3px #f5b26755,0 12px 30px #0006} .gallery-card.one,.gallery-card.two{border-color:#e2bb7c} .gallery-card[hidden]{display:none!important} .gallery-card-heading{display:flex;justify-content:space-between;align-items:center;gap:8px} .gallery-card-heading strong{font-size:18px;font-weight:950} .gallery-card-heading span{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#265650;font-weight:850;background:#e3eee6;padding:4px 7px;border-radius:20px} .gallery-card.bingo .gallery-card-heading span{background:#fbcb85;color:#6b3927} .gallery-card .overview-mini-card{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;width:100%;background:#134b4d;padding:5px;border:0;border-radius:8px} .gallery-card .overview-mini-card i{font-style:normal;display:flex;align-items:center;justify-content:center;min-height:30px;padding:0;border-radius:3px;background:#fefdf8;color:#163e42;font-weight:850;font-size:14px} .gallery-card .overview-mini-card i.free{background:#f5ce7f;font-size:15px} .gallery-card .overview-mini-card i.called{background:#bce6a1;box-shadow:inset 0 0 0 2px #479c66} .gallery-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:29px} .gallery-card-foot span{font-size:10px;color:#456762;line-height:1.25;flex:1} .gallery-card-foot b{color:#165e5b;font-size:10px;white-space:nowrap} .gallery-empty{color:#d5e7da;font-size:17px;text-align:center;padding:60px 0;line-height:1.5} .gallery-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px clamp(16px,3vw,46px);border-top:1px solid #335b60;background:#092733;flex:none} .gallery-footer>span{font-size:11px;color:#c3dad2} .gallery-status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#dafa86;box-shadow:0 0 12px #beef87;margin-right:7px} .gallery-footer .btn-primary{background:#e0f9a7;color:#143c3d;border:0} body[data-page="play"] .game-rack-label[hidden],body[data-page="play"] .game-ball-rack[hidden]{display:none!important} @media(max-width:660px){.gallery-header{align-items:flex-start;flex-direction:column;gap:11px}.gallery-header-actions{width:100%;justify-content:space-between}.gallery-heading p{font-size:12px}.gallery-toolbar{gap:7px}.gallery-status{flex-basis:100%;margin-left:0}.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}.gallery-card{padding:13px}.gallery-card .overview-mini-card i{font-size:16px;min-height:39px}.gallery-footer{gap:8px}.gallery-footer>span{font-size:10px;max-width:49%}.gallery-footer .btn{font-size:11px;padding:8px}} @media(prefers-reduced-motion:reduce){.gallery-card{transition:none!important}.gallery-card:hover{transform:none!important}} /* v0.1.10 Smart Attention + player-owned experience theme previews. Cosmetic only: no change to authoritative calls, card generation, or claims. */ body[data-page="play"] .experience-settings{position:relative;min-width:0} body[data-page="play"] .experience-settings>summary{cursor:pointer;list-style:none;white-space:nowrap;min-height:34px;display:flex;align-items:center;justify-content:center} body[data-page="play"] .experience-settings>summary::-webkit-details-marker{display:none} body[data-page="play"] .experience-settings[open]>summary{outline:2px solid #d6f4a6;outline-offset:2px} body[data-page="play"] .experience-settings-panel{position:absolute;top:calc(100% + 8px);right:-10px;z-index:100;width:min(350px,calc(100vw - 32px));padding:17px;border-radius:14px;box-shadow:0 12px 42px #0008;background:#f8fbf6;border:2px solid #9ad4b8;color:#183c3e;display:flex;flex-direction:column;gap:11px} body[data-page="play"] .experience-settings-panel>label:first-child{font-weight:850;font-size:13px} body[data-page="play"] #game-theme-select{width:100%;min-height:42px;border:1px solid #a1b9ae;border-radius:7px;padding:8px 11px;background:#fff;color:#183c3e;font:inherit;font-size:14px;font-weight:700} body[data-page="play"] .experience-settings-panel p{font-size:11px;line-height:1.5;color:#456a66;margin:0} body[data-page="play"] .attention-setting{display:flex;gap:10px;align-items:center;font-size:13px;font-weight:700;line-height:1.4;cursor:pointer} body[data-page="play"] .attention-setting input{width:21px;height:21px;accent-color:#226c61;flex-shrink:0;cursor:pointer} body[data-page="play"] .attention-setting input:disabled{opacity:.5;cursor:not-allowed} body[data-page="play"] .experience-settings :focus-visible,.gallery-sort-label select:focus-visible{outline:3px solid #f1c65c;outline-offset:3px} .gallery-sort-label{display:flex;gap:8px;align-items:center;color:#d7efe0;font-size:12px;font-weight:800;margin-left:auto} .gallery-sort-label select{color:#103a37;background:#f0fbef;border:1px solid #9ad6b1;padding:8px 26px 8px 10px;min-height:42px;border-radius:9px;font-size:13px;max-width:190px} .gallery-sort-label + .gallery-status{margin-left:0} .smart-attention-toast{position:fixed;z-index:9000;right:max(18px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));width:min(495px,calc(100vw - 28px));background:linear-gradient(128deg,#fffdf5,#f4f9ea);border:2px solid #dfae51;box-shadow:0 12px 0 #092d36,0 30px 64px #0008;border-radius:16px;padding:12px 14px;display:flex;gap:12px;align-items:center;color:#163a40;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(35px);transition:opacity .26s,transform .26s,visibility .26s} .smart-attention-toast.visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} .smart-attention-toast.bingo{border-color:#e7c26c;background:linear-gradient(125deg,#fff4dc,#fbe9c8);box-shadow:0 11px 0 #783c29,0 30px 64px #0009} .smart-attention-toast .attention-icon{font-size:25px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:#ffe0a0;border-radius:50%;flex-shrink:0} .smart-attention-toast.bingo .attention-icon{background:#f2ba71} .smart-attention-toast .attention-copy{display:flex;flex-direction:column;min-width:0;gap:4px;flex:1} .smart-attention-toast .attention-copy strong{font-size:16px;font-weight:950;line-height:1.18} .smart-attention-toast .attention-copy span{font-size:11px;color:#436461;line-height:1.4} .smart-attention-toast .attention-action{border:0;background:#165957;color:#fff;border-radius:9px;min-height:44px;padding:9px 12px;font-size:12px;font-weight:850;cursor:pointer;flex-shrink:0} .smart-attention-toast .attention-close{align-self:flex-start;border:0;background:transparent;font-size:16px;color:#426763;cursor:pointer;min-width:28px;min-height:30px} .smart-attention-toast button:focus-visible{outline:3px solid #9c52ce;outline-offset:3px} body[data-page="play"] .smart-tab.one,body[data-page="play"] .smart-tab.bingo{position:relative} body[data-page="play"] .smart-tab.one:after,body[data-page="play"] .smart-tab.bingo:after{content:"";position:absolute;right:5px;top:5px;width:7px;height:7px;border-radius:50%;background:#ffe68b;box-shadow:0 0 0 3px #ffe69a2b} /* Player preview theme palettes. Event branding/theming remains for a later organizer release. */ body[data-page="play"][data-game-theme="classic"]{background:#eef1e8;color:#163f3d} body[data-page="play"][data-game-theme="classic"] .play-center{background:linear-gradient(145deg,#eaf3e9,#dce9e1);border-color:#9bbfb1;color:#123936} body[data-page="play"][data-game-theme="classic"] .game-night-topline{background:#235955;color:#fff} body[data-page="play"][data-game-theme="classic"] .game-panel-top h2,body[data-page="play"][data-game-theme="classic"] .game-panel-top p,body[data-page="play"][data-game-theme="classic"] .game-panel-top .eyebrow,body[data-page="play"][data-game-theme="classic"] .winning-pattern-note,body[data-page="play"][data-game-theme="classic"] .winning-pattern-note span{color:#194b47} body[data-page="play"][data-game-theme="classic"] .smart-focus{background:#d7e8d9;border-color:#a0c4b1} body[data-page="play"][data-game-theme="classic"] .smart-focus-heading strong,body[data-page="play"][data-game-theme="classic"] .smart-focus-heading span{color:#16433e} body[data-page="play"][data-game-theme="classic"] .game-rack-label,body[data-page="play"][data-game-theme="classic"] .rack-waiting{color:#2d5e55} body[data-page="play"][data-game-theme="classic"] .bingo-card{border-color:#dbdfc9!important} body[data-page="play"][data-game-theme="classic"] .card-letters span{box-shadow:none} body[data-page="play"][data-game-theme="playful"]{background:radial-gradient(circle at 16% 7%,#ea894450 0%,transparent 33%),radial-gradient(circle at 88% 19%,#42bcb468 0%,transparent 34%),#12364b} body[data-page="play"][data-game-theme="playful"] .play-center{background:linear-gradient(130deg,#075c6b,#16355b 65%,#38416a);border-color:#77d9be} body[data-page="play"][data-game-theme="playful"] .game-night-topline{background:linear-gradient(110deg,#ed784a,#a94781)} body[data-page="play"][data-game-theme="playful"] .last-call{background:radial-gradient(circle at 30% 20%,#fff6bb,#ffb06b 60%,#ef8361);border-color:#fff9ca} body[data-page="play"][data-game-theme="playful"] .smart-focus{background:linear-gradient(135deg,#277c82,#2b5676);border-color:#92dcb9} body[data-page="play"][data-game-theme="holiday"]{background:radial-gradient(circle at 4% 20%,#7d323b70,transparent 37%),#0d312c} body[data-page="play"][data-game-theme="holiday"] .play-center{background:linear-gradient(140deg,#195449,#183e3c 60%,#522f3a);border-color:#d6af80} body[data-page="play"][data-game-theme="holiday"] .game-night-topline{background:linear-gradient(95deg,#9c343e,#25584c)} body[data-page="play"][data-game-theme="holiday"] .smart-focus{background:linear-gradient(95deg,#2a6352,#455747);border-color:#d8b981} body[data-page="play"][data-game-theme="holiday"] .last-call{border-color:#f2cc8c} body[data-page="play"][data-game-theme="after-dark"]{background:radial-gradient(ellipse at 50% 0%,#75416791,transparent 60%),#190d29} body[data-page="play"][data-game-theme="after-dark"] .play-center{background:linear-gradient(145deg,#402046,#241a35 62%,#1b1637);border-color:#a17caa} body[data-page="play"][data-game-theme="after-dark"] .game-night-topline{background:linear-gradient(100deg,#834d79,#422850)} body[data-page="play"][data-game-theme="after-dark"] .smart-focus{background:linear-gradient(115deg,#56395f,#43354f);border-color:#b08aaf} body[data-page="play"][data-game-theme="after-dark"] .last-call{background:radial-gradient(circle at 30% 25%,#fcefa9,#dcb77c);border-color:#eecb8a} body[data-page="play"][data-game-theme="after-dark"] .bingo-card .card-grid{background:#4f345c} @media(max-width:700px){ body[data-page="play"] .experience-settings-panel{position:fixed;top:auto;left:12px;right:12px;bottom:max(16px,env(safe-area-inset-bottom));max-height:min(70dvh,640px);overflow:auto;width:auto;z-index:101} .smart-attention-toast{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));width:auto;gap:8px;padding:10px} .smart-attention-toast .attention-copy strong{font-size:14px} .smart-attention-toast .attention-action{font-size:11px;padding:8px;max-width:112px;white-space:normal} .smart-attention-toast .attention-icon{width:32px;height:32px;font-size:19px} .gallery-sort-label{margin-left:0;width:100%;justify-content:space-between} } @media(prefers-reduced-motion:reduce){.smart-attention-toast{transition:none!important;transform:none!important}body[data-page="play"] .smart-tab.one:after,body[data-page="play"] .smart-tab.bingo:after{animation:none!important}} /* Minimum readability for important attention cues (including older players). */ .smart-attention-toast .attention-copy span{font-size:13px} .smart-attention-toast .attention-action{font-size:13px} body[data-page="play"] .experience-settings-panel p{font-size:12px} body[data-page="play"] .smart-tab.one strong,body[data-page="play"] .smart-tab.bingo strong{font-weight:950} /* v0.1.11: Game settings are discoverable without covering the card. */ body[data-page="play"] .game-settings-launch{min-height:42px;border:1px solid #7dbeb4;border-radius:9px;padding:9px 14px;background:#e0f9d0;color:#12413c;font-weight:900;cursor:pointer;white-space:nowrap} body[data-page="play"] .game-settings-launch:hover{background:#fff8dd} body[data-page="play"] .game-settings-launch:focus-visible{outline:3px solid #f4ce62;outline-offset:3px} .game-settings-overlay[hidden]{display:none!important} .game-settings-overlay{position:fixed;z-index:100100;inset:0;display:flex;justify-content:flex-end} .game-settings-shade{position:absolute;inset:0;background:#03182135} .game-settings-sheet{position:relative;z-index:1;display:flex;flex-direction:column;width:min(430px,100vw);height:100vh;height:100dvh;background:#fafaf2;color:#143b3b;border-left:3px solid #a5d7be;box-shadow:-20px 0 70px #00151c6e;outline:0} .game-settings-head{display:flex;justify-content:space-between;align-items:flex-start;padding:24px 22px 18px;gap:16px;border-bottom:1px solid #cfddd2} .game-settings-head h2{font-size:30px;line-height:1.1;margin:6px 0;font-weight:900;color:#133c40} .game-settings-head p{font-size:13px;line-height:1.5;color:#456a65;margin:0} .game-settings-close{min-height:44px;border:1px solid #91b0a5;border-radius:9px;background:#fff;padding:9px;cursor:pointer;font-weight:800;color:#12443e;white-space:nowrap} .game-settings-content{overflow:auto;flex:1;min-height:0;padding:20px 22px;display:flex;flex-direction:column;gap:18px} .game-settings-group{display:flex;flex-direction:column;gap:12px;padding:20px;background:#fff;border:1px solid #d7e4da;border-radius:14px} .game-settings-group h3{font-size:18px;margin:0 0 3px;color:#184743} .game-settings-group label:not(.attention-setting){font-weight:800;font-size:13px} .game-settings-group select{font:inherit;min-height:48px;padding:10px;background:white;border:1px solid #9db9ac;border-radius:9px;color:#173d3d} .game-settings-group p,.game-settings-help{font-size:12px;line-height:1.5;color:#496b65;margin:0} .game-settings-group .attention-setting{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:750;min-height:46px;cursor:pointer} .game-settings-group .attention-setting input{width:23px;height:23px;accent-color:#197265} .game-settings-help{padding:12px 18px;background:#e9f2e6;border-radius:12px} .game-settings-foot{padding:14px 22px 20px;border-top:1px solid #cfddd2} .game-settings-done{width:100%;min-height:48px;border:0;border-radius:10px;color:#133c3c;background:#d8f4a1;font-size:15px;font-weight:900;cursor:pointer} .game-settings-overlay button:focus-visible,.game-settings-overlay select:focus-visible,.game-settings-overlay input:focus-visible{outline:3px solid #e4a840;outline-offset:3px} /* Gallery Spotlight is deliberately stable: only its contents change on a call. */ .gallery-spotlight{display:grid;grid-template-columns:minmax(220px,1fr) minmax(210px,340px);align-items:center;gap:24px;padding:19px 25px;margin-bottom:20px;min-height:238px;border:2px solid #76a49a;border-radius:17px;background:linear-gradient(130deg,#183f47,#0d3441);color:#f6fff1} .gallery-spotlight.one,.gallery-spotlight.two{border-color:#eac775;background:linear-gradient(125deg,#403b3d,#173d45)} .gallery-spotlight.bingo{border-color:#f8ab68;background:linear-gradient(125deg,#542e33,#1b3b45)} .gallery-spotlight-copy{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0} .gallery-spotlight-eyebrow{color:#d9f7a2;font-size:11px;font-weight:900;letter-spacing:.12em} .gallery-spotlight-copy h3{font-size:clamp(22px,2.6vw,36px);line-height:1.12;margin:0;color:#f1ffc7;font-weight:950} .gallery-spotlight-copy strong{font-size:22px;color:#fff} .gallery-spotlight-copy strong span{color:#f2c97f} .gallery-spotlight-copy p{font-size:14px;line-height:1.5;color:#e7f4e9;max-width:50ch;margin:0} .gallery-spotlight-copy small{color:#badbd4;font-size:11px} .gallery-spotlight-cta{border:0;border-radius:9px;min-height:46px;padding:11px 19px;background:#e2f7b1;color:#113c3b;font-size:14px;font-weight:900;cursor:pointer} .gallery-spotlight-cta:focus-visible{outline:3px solid #ffa85a;outline-offset:3px} .gallery-spotlight-preview{min-width:0;width:100%;max-width:340px;justify-self:end} .gallery-spotlight-preview .overview-mini-card{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;background:#11474c;border:5px solid #0f494b;padding:3px;border-radius:10px} .gallery-spotlight-preview .overview-mini-card i{display:flex;align-items:center;justify-content:center;font-style:normal;aspect-ratio:1;background:#fffcf1;color:#153c3b;border-radius:4px;font-size:clamp(14px,2vw,23px);font-weight:900} .gallery-spotlight-preview .overview-mini-card i.called{background:#afe7a5;box-shadow:inset 0 0 0 2px #448c67} .gallery-spotlight-preview .overview-mini-card i.free{background:#f6d68a} @media(max-width:720px){body[data-page="play"] .play-profile{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}body[data-page="play"] .game-settings-launch{font-size:12px;padding:8px 9px}.gallery-spotlight{grid-template-columns:1fr;gap:15px;padding:17px;min-height:0}.gallery-spotlight-preview{justify-self:start;max-width:390px}.gallery-spotlight-copy h3{font-size:24px}.game-settings-sheet{width:100vw;border-left:0}.game-settings-head{padding:17px 16px}.game-settings-content{padding:14px 16px}.game-settings-foot{padding:10px 16px}} @media(prefers-reduced-motion:reduce){.gallery-spotlight,.game-settings-sheet{animation:none!important;transition:none!important}} /* Contrast correction exposed while testing the Classic theme on desktop. */ body[data-page="play"][data-game-theme="classic"] .play-topbar h1{color:#173f3e} body[data-page="play"][data-game-theme="classic"] .play-topbar .eyebrow{color:#29695d} body[data-page="play"][data-game-theme="classic"] .play-profile label{color:#35665e}