/* BingoBoardTV — shared styles. Themes via [data-theme] on . */ :root{ --bg:#0b1220; --panel:#121c33; --panel2:#16203a; --ink:#e6edf6; --muted:#9fb0c8; --line:#243049; --accent:#4f8cff; --accent2:#36d399; --danger:#f87272; --warn:#fbbf24; --called:#1f6feb; --last:#f59e0b; --cell:#1b2740; --cellink:#cdd9ec; --bB:#ef4444; --bI:#f59e0b; --bN:#22c55e; --bG:#3b82f6; --bO:#a855f7; --radius:12px; } html[data-theme="light"]{ --bg:#f4f7fb; --panel:#ffffff; --panel2:#eef3fa; --ink:#10203a; --muted:#5a6b85; --line:#d8e2f0; --cell:#eaf0fa; --cellink:#26354f; --called:#2563eb; --last:#d97706; } html[data-theme="highContrast"]{ --bg:#000000; --panel:#000000; --panel2:#0a0a0a; --ink:#ffffff; --muted:#e8e8e8; --line:#ffffff; --accent:#ffff00; --called:#ffff00; --last:#00e5ff; --cell:#000; --cellink:#fff; --bB:#ff5b5b; --bI:#ffd000; --bN:#39ff14; --bG:#4da3ff; --bO:#e07bff; } *{box-sizing:border-box} /* The [hidden] attribute must always win, even over display:flex/grid classes (e.g. .prompt). Without this, toggling el.hidden does nothing visually. */ [hidden]{display:none !important} html,body{margin:0} body{font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)} a{color:var(--accent);text-decoration:none} h1,h2,h3{line-height:1.15} .muted{color:var(--muted)} .small{font-size:.85rem} .badge{font-size:.65rem;background:var(--warn);color:#1a1300;padding:2px 6px;border-radius:99px;vertical-align:middle} /* Buttons */ .btn{font:inherit;font-weight:600;background:var(--panel2);color:var(--ink);border:1px solid var(--line); padding:10px 14px;border-radius:10px;cursor:pointer;transition:.12s} .btn:hover{border-color:var(--accent)} .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff} .btn.danger{background:transparent;border-color:var(--danger);color:var(--danger)} .btn.ghost{background:transparent} .btn.small{padding:6px 10px;font-size:.85rem} .btn.active{outline:2px solid var(--accent)} .seg{font:inherit;font-weight:600;background:var(--panel2);color:var(--muted);border:1px solid var(--line); padding:8px 12px;border-radius:8px;cursor:pointer} .seg.active{background:var(--accent);color:#fff;border-color:var(--accent)} .seg-row,.seg-row *{} .seg-row{display:flex;gap:8px;flex-wrap:wrap} /* ---------- App ---------- */ .appbar{display:flex;align-items:center;gap:16px;padding:10px 16px;background:var(--panel); border-bottom:1px solid var(--line);flex-wrap:wrap;position:sticky;top:0;z-index:5} .brand{font-weight:800;font-size:1.2rem;color:var(--ink)} .brand span{color:var(--accent)} .appbar-modes{display:flex;gap:6px;flex-wrap:wrap} .appbar-right{margin-left:auto;display:flex;gap:8px} .stage-wrap{padding:16px;background:var(--bg)} .stage{background:#000;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:62vh} .stage[data-layout="boardOnly"]{grid-template-columns:1fr} .stage[data-layout="boardOnly"] .stage-camera{display:none} .stage[data-layout="cameraOnly"]{grid-template-columns:1fr} .stage[data-layout="cameraOnly"] .stage-board{display:none} .stage[data-layout="lastCall"] .stage-camera{display:none} .stage[data-layout="lastCall"] .board,.stage[data-layout="lastCall"] .board-meta{display:none} .stage[data-layout="lastCall"] .lastcall{font-size:min(38vw,40vh)} .stage[data-layout="manual"]{grid-template-columns:1fr} .stage[data-layout="manual"] .stage-camera{display:none} .stage-camera{background:#000;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden} #video{width:100%;height:100%;object-fit:cover;background:#000} .cam-status{position:absolute;bottom:10px;left:10px;background:rgba(0,0,0,.6);color:#fff; padding:4px 10px;border-radius:8px;font-size:.8rem} .cam-status.ok{background:rgba(16,120,60,.8)} .cam-status.err{background:rgba(160,30,30,.85)} .stage-board{background:var(--panel);display:flex;flex-direction:column;padding:14px;gap:10px} .lastcall-wrap{text-align:center} .lc-label{letter-spacing:.25em;color:var(--muted);font-size:.8rem} .lastcall{font-weight:900;line-height:.9;font-size:min(16vw,16vh)} .lastcall .lc-letter{color:var(--last)} .lastcall .lc-num{margin-left:.1em} .lastcall.empty{color:var(--muted)} .ribbon{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px} .chip{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-weight:700} .board{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;flex:1} .bcol{display:grid;grid-template-rows:auto repeat(15,1fr);gap:4px} .bhead{text-align:center;font-weight:900;font-size:1.4rem;color:#fff;border-radius:6px;padding:2px 0} .bhead-B{background:var(--bB)} .bhead-I{background:var(--bI)} .bhead-N{background:var(--bN)} .bhead-G{background:var(--bG)} .bhead-O{background:var(--bO)} .bcell{font:inherit;font-weight:700;font-size:clamp(.8rem,1.6vw,1.3rem);background:var(--cell);color:var(--cellink); border:1px solid var(--line);border-radius:6px;cursor:pointer;padding:4px 0;transition:.1s} .bcell:hover{border-color:var(--accent)} .bcell.called{background:var(--called);color:#fff;border-color:var(--called)} .bcell.last{background:var(--last);color:#1a1300;border-color:var(--last);transform:scale(1.06); box-shadow:0 0 0 3px rgba(245,158,11,.4)} .board-meta{text-align:center;color:var(--muted);font-weight:700} /* Operator deck */ .deck{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;padding:16px;align-items:start} .deck-col{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px} .deck h2{margin:.1rem 0 .6rem;font-size:1.1rem} .deck h3{margin:1rem 0 .4rem;font-size:.95rem} .entry{display:flex;gap:8px} .entry input{flex:1;font:inherit;font-size:1.2rem;padding:12px;border-radius:10px;border:1px solid var(--line); background:var(--panel2);color:var(--ink)} .controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .field{display:flex;flex-direction:column;gap:4px;margin-top:10px;font-size:.85rem;color:var(--muted)} .field select,.field input[type=range]{font:inherit;padding:8px;border-radius:8px;border:1px solid var(--line); background:var(--panel2);color:var(--ink)} .switch{display:flex;gap:8px;align-items:flex-start;font-size:.9rem;cursor:pointer} .prompt{margin-top:10px;padding:10px 12px;border-radius:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center} .prompt.warn{background:rgba(251,191,36,.12);border:1px solid var(--warn)} .prompt.danger{background:rgba(248,114,114,.12);border:1px solid var(--danger)} .prompt-actions{margin-left:auto;display:flex;gap:6px} .aa-card{margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)} .history{max-height:60vh;overflow:auto;display:flex;flex-direction:column;gap:4px} .hrow{display:flex;justify-content:space-between;align-items:center;background:var(--panel2); border:1px solid var(--line);border-radius:8px;padding:6px 10px} .hnum{font-weight:700} .hremove{background:none;border:0;color:var(--danger);cursor:pointer;font-size:1rem} .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0; background:var(--panel);border:1px solid var(--line);padding:12px 18px;border-radius:10px;pointer-events:none; transition:.2s;max-width:90vw;z-index:50} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .toast.warn{border-color:var(--warn)} /* View-only demo: auto-runs, no controls, board not clickable */ body.demo .deck{display:none} body.demo .appbar-modes,body.demo .appbar-right{display:none} body.demo #board{pointer-events:none} body.demo .bcell{cursor:default} body.demo #stageWrap{padding:0} body.demo .stage{min-height:100vh;border:0;border-radius:0} body.demo .appbar::after{content:"Live demo — view only";margin-left:auto;color:var(--muted);font-size:.85rem;font-weight:600} /* Event banner + pattern label */ .event-banner{text-align:center;font-weight:800;font-size:clamp(1rem,2.4vw,1.8rem);color:var(--accent); padding:4px 8px;letter-spacing:.02em} .pattern-label{color:var(--last);font-weight:700} /* Overlays: winner + intermission */ .overlay{position:fixed;inset:0;z-index:200;background:radial-gradient(circle at 50% 30%,#13213f,#070d18); display:flex;align-items:center;justify-content:center;text-align:center} .overlay-inner{position:relative;padding:30px} .big-bingo{font-weight:900;font-size:min(22vw,26vh);line-height:1; background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e,#3b82f6,#a855f7); -webkit-background-clip:text;background-clip:text;color:transparent;animation:pop .5s ease} .intermission-title{font-weight:900;font-size:min(14vw,16vh);color:var(--ink)} .overlay-sub{font-size:1.4rem;color:var(--muted);margin:10px 0 24px} @keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}} .confetti{position:absolute;inset:-40px 0 auto 0;height:0} .confetti::before,.confetti::after{content:"🎉🎊🎉🎊🎉🎊🎉🎊🎉🎊";position:absolute;left:0;right:0; font-size:2rem;letter-spacing:14px;animation:fall 2.2s linear infinite;opacity:.9} .confetti::after{animation-delay:1.1s;font-size:1.4rem} @keyframes fall{from{transform:translateY(-40px)}to{transform:translateY(40vh)}} /* Fullscreen: show only the stage */ body.fs .appbar,body.fs .deck{display:none} :fullscreen .stage{min-height:100vh;border:0;border-radius:0} .stage-wrap:fullscreen{padding:0;background:#000} @media(max-width:900px){ .deck{grid-template-columns:1fr} .stage{grid-template-columns:1fr} .stage[data-layout="combined"]{grid-template-rows:auto auto} } /* ---------- Marketing ---------- */ .site{max-width:1080px;margin:0 auto;padding:0 20px} .nav{display:flex;align-items:center;gap:16px;padding:13px 20px;margin:0 -20px;flex-wrap:wrap; position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)} .nav a.navlink{color:var(--muted);font-weight:600;white-space:nowrap} .nav a.navlink:hover{color:var(--ink)} .nav a.navlink.active{color:var(--ink);font-weight:700} .nav .spacer{margin-left:auto} .nav .btn{white-space:nowrap;flex:0 0 auto;padding:8px 14px} .hero{text-align:center;padding:64px 0 40px} .hero h1{font-size:clamp(2rem,5vw,3.4rem);margin:.2em 0} .hero p.lead{font-size:1.25rem;color:var(--muted);max-width:620px;margin:0 auto 28px} .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:30px 0} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px} .card h3{margin:.2rem 0 .4rem} .pricegrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:20px 0} .price{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px} .price.pro{border-color:var(--accent)} .price .amt{font-size:2.4rem;font-weight:900} .price ul{list-style:none;padding:0;margin:14px 0;display:flex;flex-direction:column;gap:6px} .price li::before{content:"✓ ";color:var(--accent2);font-weight:800} footer.foot{border-top:1px solid var(--line);margin-top:40px;padding:24px 0;color:var(--muted);font-size:.9rem} footer.foot a{color:var(--muted)} .prose{max-width:760px;margin:0 auto;padding:24px 0} .prose h1{margin-top:0} .watermark{position:fixed;right:10px;bottom:8px;font-size:.7rem;color:var(--muted);opacity:.7;z-index:1} .faq{max-width:860px;margin:0 auto;padding:36px 20px} .faq-grid{display:grid;gap:10px;margin-top:16px} .faq details{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px} .faq summary{cursor:pointer;font-weight:600;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";float:right;color:var(--accent);font-weight:700} .faq details[open] summary::after{content:"\2212"} .faq details p{color:var(--muted);margin:10px 0 0} .demo-section{max-width:1080px;margin:0 auto;padding:20px} .demo-frame{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:16px 0;background:#000;box-shadow:0 10px 40px rgba(0,0,0,.4)} .demo-frame iframe{width:100%;height:640px;border:0;display:block} @media(max-width:760px){.features,.pricegrid{grid-template-columns:1fr}.demo-frame iframe{height:520px}} @media(max-width:600px){ .nav{gap:10px 14px;justify-content:center} .nav .brand{flex-basis:100%;text-align:center} .nav .spacer{display:none} .hero{padding:36px 0 28px} .cta{flex-direction:column;align-items:stretch} .cta .btn{width:100%} }