/* BingoBoardTV — shared styles. Themes via [data-theme] on <html>. */
: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;
  display:inline-block;box-sizing:border-box;text-align:center;line-height:1.2;vertical-align:middle;margin:2px 0}
.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)}

/* ---------- Brand & display typography ---------- */
@font-face{font-family:'Fraunces';src:url('/assets/fonts/fraunces.woff2') format('woff2');
  font-weight:100 900;font-display:swap}
h1,h2{font-family:'Fraunces',Georgia,'Times New Roman',serif;letter-spacing:.005em}
body.app h1,body.app h2{font-family:system-ui,'Segoe UI',Arial,sans-serif;letter-spacing:0} /* the app stays utilitarian */
.brand{display:inline-flex;align-items:center;gap:9px}
.brand b{font-weight:inherit}
.brandball{display:block;flex:0 0 auto}

/* ---------- Marketing hero (product-first) ---------- */
.hero-split{display:grid;grid-template-columns:1.02fr 1fr;gap:38px;align-items:center;
  max-width:1160px;margin:0 auto;padding:46px 20px 26px;text-align:left}
.hero-split h1{margin:0 0 14px;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.12}
.hero-split .lead{margin:0 0 18px}
.hero-split .cta{justify-content:flex-start}
.hero-tv{min-width:0}
.tvframe{position:relative;aspect-ratio:16/9;background:#000;border:10px solid #05070c;border-radius:16px;
  overflow:hidden;box-shadow:0 0 0 1px #223050,0 26px 70px rgba(0,0,0,.6),0 6px 18px rgba(59,130,246,.12)}
.tvframe iframe{width:100%;height:100%;border:0;display:block;background:#000}
.tvstand{width:34%;height:12px;margin:0 auto;background:linear-gradient(#0a0f1c,#060a12);
  border-radius:0 0 12px 12px;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.tvcap{text-align:center;margin-top:10px}
@media(max-width:920px){.hero-split{grid-template-columns:1fr;text-align:center;gap:26px}
  .hero-split .cta{justify-content:center}}

/* ---------- Feature groups & inline icons ---------- */
.featgroups{max-width:1160px;margin:0 auto;padding:6px 20px}
.fgroup{margin:26px 0}
.fgroup>h2{text-align:center;font-size:1.5rem;margin:0 0 4px}
.fgroup>p{text-align:center;color:var(--muted);margin:0 0 16px}
.card h3{display:flex;align-items:center;gap:10px}
.ic{width:24px;height:24px;flex:0 0 auto;color:var(--accent)}

/* ---------- Section band (rhythm) ---------- */
.band{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:44px 20px;margin:34px 0}
.band>h2,.band>p{text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
.duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1100px;margin:24px auto 0}
.duo-grid figure{margin:0}
.duo-grid img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);
  box-shadow:0 14px 40px rgba(0,0,0,.4)}
.duo-grid figcaption{text-align:center;color:var(--muted);font-weight:700;margin-top:10px}
@media(max-width:820px){.duo-grid{grid-template-columns:1fr}}

/* ---------- Pricing polish ---------- */
.plan-badge{display:inline-block;background:var(--accent2,#36d399);color:#06281a;font-weight:800;
  font-size:.82rem;padding:5px 12px;border-radius:99px;margin-bottom:10px}
.price.annual{box-shadow:0 16px 44px rgba(54,211,153,.14)}
.pgroups h4{margin:14px 0 6px;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.pgroups ul{margin:0}

/* Bare demo (embedded in the hero TV frame): no chrome at all */
body.bare .appbar,body.bare .trial-banner{display:none !important}
body.bare .stage-wrap{padding:0}
body.bare .stage{height:100vh;height:100dvh;border:0;border-radius:0;min-height:0}

/* Phone hero demo (?mob=1): machine + giant last call — a 75-cell board can't fit the bezel */
body.mobdemo .stage-board .board,body.mobdemo .stage-board .ribbon,
body.mobdemo .stage-board .board-meta,body.mobdemo .stage-board .brand-row{display:none !important}
body.mobdemo .stage-board{display:flex;flex-direction:column;justify-content:center}
body.mobdemo .lc-label{font-size:min(5.5cqw,7cqh);letter-spacing:.28em}
body.mobdemo .lastcall{font-size:min(30cqw,38cqh)}

/* Inline info tooltips (the little ⓘ). Work on hover (desktop), tap (touch —
   the element is focusable), and keyboard focus. Plain CSS, no JS, offline-safe. */
.ihint{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;flex:0 0 auto;
  border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--muted);
  font:italic 700 12px/1 Georgia,'Times New Roman',serif;cursor:help;position:relative;vertical-align:middle;
  margin-left:6px;user-select:none;-webkit-tap-highlight-color:transparent}
.ihint::before{content:"i"}
.ihint:hover,.ihint:focus{background:var(--accent);color:#fff;border-color:var(--accent);outline:none}
.ihint::after{content:attr(data-tip);position:absolute;left:0;top:150%;z-index:200;
  width:250px;max-width:74vw;background:#0b1220;color:#e6edf6;border:1px solid var(--accent);border-radius:10px;
  padding:10px 12px;font:400 13px/1.45 system-ui,Segoe UI,Arial,sans-serif;font-style:normal;text-align:left;
  box-shadow:0 10px 26px rgba(0,0,0,.55);display:none;opacity:0;transform:translateY(-4px);
  pointer-events:none;white-space:normal}
.ihint:hover::after,.ihint:focus::after{display:block;opacity:1;transform:translateY(0)}
@media(max-width:640px){.ihint::after{left:auto;right:0}}
.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;flex-wrap:wrap;justify-content:flex-end}

.stage-wrap{padding:12px;background:var(--bg)}
/* Fit-any-screen: the stage is always exactly viewport height minus the appbar
   (JS keeps --appbarH current). Content SCALES to fit — it never causes scroll. */
.stage{background:#000;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;
  height:calc(100vh - var(--appbarH,118px) - 24px);
  height:calc(100dvh - var(--appbarH,118px) - 24px);min-height:300px}
.stage>.stage-camera,.stage>.stage-board{flex:1 1 0;min-width:0;min-height:0}
/* TV display window + fullscreen: edge-to-edge, exactly one screen. */
body.display .stage-wrap,body.fs .stage-wrap,.stage-wrap:fullscreen{padding:0}
body.display .stage,body.fs .stage,.stage-wrap:fullscreen .stage{height:100vh;height:100dvh;
  border:0;border-radius:0;min-height:0}
.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(34cqw,45cqh)}
.stage[data-layout="manual"]{grid-template-columns:1fr}
.stage[data-layout="manual"] .stage-camera{display:none}
/* Split: last call BIG on one side, the board on the other (VFW Post 8290 request). */
.stage[data-layout="split"]{grid-template-columns:1fr}
.stage[data-layout="split"] .stage-camera{display:none}
.stage[data-layout="split"] .stage-board{display:grid;
  grid-template-columns:1fr 1.5fr;grid-template-rows:auto 1fr auto;
  grid-template-areas:"brand brand" "lastcall board" "lastcall meta";gap:14px;align-items:stretch}
.stage[data-layout="split"] .brand-row{grid-area:brand}
.stage[data-layout="split"] .lastcall-wrap{grid-area:lastcall;display:flex;flex-direction:column;justify-content:center;
  background:#000;border-radius:12px;padding:10px}
.stage[data-layout="split"] .lastcall{font-size:min(26cqw,30cqh)}
.stage[data-layout="split"] .board{grid-area:board}
.stage[data-layout="split"] .board-meta{grid-area:meta}
@media(max-width:760px){.stage[data-layout="split"] .stage-board{grid-template-columns:1fr;
  grid-template-rows:auto auto auto auto;grid-template-areas:"brand" "lastcall" "board" "meta"}}
/* Operator can show/hide individual board elements (saved per layout). */
.stage[data-hide~="lastcall"] .lastcall-wrap{display:none !important}
.stage[data-hide~="ribbon"] .ribbon{display:none !important}
.stage[data-hide~="count"] .board-meta{display:none !important}
.stage[data-hide~="camera"] .stage-camera{display:none !important}
.saved-layouts{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.saved-row{display:flex;gap:6px}
.saved-row .saved-load{flex:1;text-align:left;justify-content:flex-start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-row .saved-del{flex:0 0 auto}
/* Free custom layout — operator drags/resizes widgets on a 6x8 grid. */
/* Fixed height + minmax(0,1fr) tracks = the custom area can NEVER grow past its
   boundary, no matter how big a widget's content is (it clips instead of expanding). */
.stage[data-layout="custom"]{display:grid;height:78vh;
  grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));gap:8px;padding:8px}
.stage[data-layout="custom"] .stage-board{display:contents} /* its children + camera all become grid items */
.stage[data-layout="custom"] .lastcall-wrap{background:#000;border-radius:12px;padding:8px;
  display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.stage[data-layout="custom"] .stage-camera{border-radius:12px}
/* container-type:size makes the board a query container so the numbers can scale to
   ITS height (cqh units) — every row fits no matter how small the board is dragged. */
.stage[data-layout="custom"] #board{background:var(--panel);border-radius:12px;padding:6px;height:100%;container-type:size}
.stage[data-layout="custom"] .bcol{grid-template-rows:auto repeat(15,minmax(0,1fr));gap:2px}
.stage[data-layout="custom"] .bhead{font-size:clamp(8px,3.8cqh,1.4rem);padding:0;line-height:1}
.stage[data-layout="custom"] .bcell{font-size:clamp(7px,3.4cqh,1.1rem);padding:0;border-radius:4px;line-height:1}
/* On the TV window / fullscreen, fill the whole screen instead of the locked 78vh. */
body.display .stage[data-layout="custom"]{height:100vh}
:fullscreen .stage[data-layout="custom"]{height:100vh}
.stage[data-layout="custom"] .board-meta{background:var(--panel);border-radius:10px;padding:6px 12px;
  display:flex;align-items:center;gap:10px}
.stage[data-layout="custom"] [data-widget]{min-width:0;min-height:0;overflow:hidden}
.stage-wrap.editing #stage [data-widget]{outline:2px dashed var(--accent);outline-offset:-2px;
  cursor:move;position:relative;touch-action:none}
.wresize{display:none}
.stage-wrap.editing .wresize{display:flex;position:absolute;right:2px;bottom:2px;width:26px;height:26px;
  align-items:center;justify-content:center;background:var(--accent);color:#fff;border-radius:8px 0 8px 0;
  cursor:nwse-resize;touch-action:none;z-index:6;font-size:14px;user-select:none}
/* Always-visible way out of edit mode so you never get stuck with the handles showing. */
.edit-done{position:fixed;top:74px;right:22px;z-index:9999;display:none;
  box-shadow:0 6px 22px rgba(0,0,0,.55)}
.stage-wrap.editing .edit-done{display:inline-flex;align-items:center}
.layer-list{display:flex;flex-direction:column;gap:4px}
.layer-row{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:4px 8px}
.layer-row .layer-name{flex:1;min-width:0;font-weight:700;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer-row .btn.small{padding:2px 8px;min-width:0}
.layer-row .btn[disabled]{opacity:.35;cursor:default}

.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}
#vmCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:radial-gradient(ellipse at 50% 30%,#131c33 0%,#0a0f1e 70%,#060a14 100%)}
#vmCanvas[hidden]{display:none}
.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)}

/* The board panel is a size container: EVERYTHING inside scales with cq units,
   so the display fits 720p sets, 4K TVs, and projectors with zero configuration. */
.stage-board{background:var(--panel);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;
  padding:10px 12px;gap:6px;container-type:size;min-width:0;min-height:0;overflow:hidden}
.stage[data-layout="lastCall"] .stage-board{display:flex;flex-direction:column;justify-content:center}
.lastcall-wrap{text-align:center}
.lc-label{letter-spacing:.25em;color:var(--muted);font-size:clamp(8px,1.7cqh,2.5rem)}
.lastcall{font-weight:900;line-height:.9;font-size:min(16cqw,17cqh)}
.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:4px}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:.5cqh 1.4cqw;
  font-weight:700;font-size:clamp(9px,2.3cqh,3.25rem)}
.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:min(6px,.8cqh);min-height:0;min-width:0}
.bcol{display:grid;grid-template-rows:auto repeat(15,minmax(0,1fr));gap:min(4px,.55cqh);min-height:0}
.bhead{text-align:center;font-weight:900;font-size:clamp(11px,3.6cqh,5rem);color:#fff;border-radius:6px;
  padding:.25cqh 0;line-height:1.25}
.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(9px,3.3cqh,4.5rem);background:var(--cell);color:var(--cellink);
  border:1px solid var(--line);border-radius:6px;cursor:pointer;padding:0;line-height:1.1;
  min-height: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;font-size:clamp(9px,2.2cqh,3rem)}
/* Audience surfaces (TV window + fullscreen): no font caps — text scales without
   limit so a 4K TV gets a 4K-sized board, not operator-view sizes. */
body.display .bhead,body.fs .bhead,.stage-wrap:fullscreen .bhead{font-size:3.6cqh}
body.display .bcell,body.fs .bcell,.stage-wrap:fullscreen .bcell{font-size:3.3cqh}
body.display .chip,body.fs .chip,.stage-wrap:fullscreen .chip{font-size:2.3cqh}
body.display .lc-label,body.fs .lc-label,.stage-wrap:fullscreen .lc-label{font-size:1.7cqh}
body.display .board-meta,body.fs .board-meta,.stage-wrap:fullscreen .board-meta{font-size:2.2cqh}
/* No camera source? "Camera + Board" gives the whole screen to the board —
   nobody ever stares at a black box. (Turn on the camera or 🎱 machine to split.) */
.stage[data-camoff="1"][data-layout="combined"]{grid-template-columns:1fr}
.stage[data-camoff="1"][data-layout="combined"] .stage-camera{display:none}

/* ---------- Operator console (control surface, not a display copy) ----------
   The operator screen is a CONSOLE: controls fill the left and are always in
   reach — no scrolling the page to find buttons. A compact live board sits on
   the right as a reference. The audience watches the separate display window. */
body.op{height:100vh;height:100dvh;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);
  grid-template-rows:auto minmax(0,1fr);grid-template-areas:"bar bar" "deck stage"}
body.op .appbar{grid-area:bar}
body.op .stage-wrap{grid-area:stage;padding:10px 12px 12px 2px;min-height:0}
body.op .stage{height:100%;min-height:0}
body.op .deck{grid-area:deck;min-height:0;overflow-y:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 4px 12px 12px;align-content:start}
/* "Put it on the TV" leads the console — it's the first thing an operator does. */
.deck .col-tv{order:-1}
.deck{grid-auto-flow:dense}
.displaybtn-hero{display:block;width:100%;padding:15px 18px;font-size:1.12rem;font-weight:800;
  box-shadow:0 0 0 2px rgba(59,130,246,.35),0 8px 22px rgba(59,130,246,.25)}
/* The operator console shows the BOARD, not the audience eye-candy: hide the
   virtual machine here (the TV window still shows it). Real cameras stay. */
body.op:not(.fs) .stage[data-vmonly="1"] .stage-camera{display:none !important}
body.op:not(.fs) .stage[data-vmonly="1"][data-layout="cameraOnly"] .stage-board{display:grid}
/* Feedback bubble: never on audience surfaces; bottom-left on the console so it
   doesn't sit on top of the board. */
body.display #bbtvFab,body.demo #bbtvFab,body.fs #bbtvFab{display:none !important}
body.op #bbtvFab{right:auto;left:16px}
/* First-run welcome + guidance touches */
.welcome-choices{display:flex;flex-direction:column;gap:10px;max-width:340px;margin:16px auto 0}
.welcome-choices .btn{padding:14px;font-size:1.05rem}
.lc-hint{display:none}
body.op .lastcall.empty .lc-hint{display:block;font-size:clamp(10px,2.2cqh,1rem);font-weight:600;
  color:var(--muted);line-height:1.4;margin-top:.4em}
.pulse{animation:bbtvpulse .8s ease 3}
@keyframes bbtvpulse{50%{box-shadow:0 0 0 10px rgba(59,130,246,.5),0 8px 22px rgba(59,130,246,.35)}}
/* Fullscreen collapses the console grid — the stage takes the whole screen
   (matters in the desktop app, where element-fullscreen differs from Chrome). */
body.op.fs{display:block;overflow:hidden}
body.op.fs .stage-wrap{padding:0}
body.op.fs .stage{height:100vh;height:100dvh}
/* Small screens (tablets/phones): fall back to the classic stacked page. */
@media(max-width:980px){
  body.op{display:block;height:auto;overflow:auto}
  body.op .stage{height:calc(100dvh - var(--appbarH,118px) - 24px)}
}

/* 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;min-width:0}
.deck-col input,.deck-col select{min-width:0;max-width:100%}
.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 .overlay{pointer-events:none}
body.demo .overlay button{display:none}
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 */
.brand-row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.brand-logo{max-height:clamp(34px,6vh,72px);width:auto;object-fit:contain;border-radius:8px}
.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}
.lastnick{color:var(--muted);font-weight:600;font-style:italic;font-size:clamp(.9rem,1.8vw,1.3rem);margin-top:2px}

/* Mini "what counts" pattern preview */
.pattern-preview{display:inline-grid;grid-template-columns:repeat(5,1fr);gap:2px;margin:8px auto 0;
  width:min(120px,26vw);vertical-align:middle}
.pattern-preview .pp-cell{aspect-ratio:1;background:var(--cell);border:1px solid var(--line);border-radius:3px;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--last)}
.pattern-preview .pp-cell.on{background:var(--accent);border-color:var(--accent)}
.pattern-preview .pp-cell.free{background:var(--panel2);color:var(--last)}

/* Intermission countdown */
.intermission-count{font-weight:900;font-size:min(16vw,18vh);line-height:1;color:var(--accent);margin:6px 0 4px;
  font-variant-numeric:tabular-nums}

/* Winner card verification */
.verify-result{margin-top:12px}
.verify-card{display:inline-grid;grid-template-columns:repeat(5,1fr);gap:3px;width:min(230px,62vw)}
.verify-card .vc-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-weight:700;
  font-size:.85rem;background:var(--cell);border:1px solid var(--line);border-radius:5px;color:var(--cellink)}
.verify-card .vc-cell.hit{background:var(--called);color:#fff;border-color:var(--called)}
.verify-card .vc-cell.free{background:var(--panel2);color:var(--last)}
.verify-verdict{margin-top:10px;font-weight:800;font-size:1.1rem}
.verify-verdict.ok{color:var(--accent2)}.verify-verdict.no{color:var(--muted)}

/* 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)}}

/* Collapsible "more options" groups in the operator deck */
.adv{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.adv summary{cursor:pointer;color:var(--muted);font-weight:600;font-size:.9rem;list-style:none;user-select:none}
.adv summary::-webkit-details-marker{display:none}
.adv summary::before{content:"▸ ";color:var(--accent)}
.adv[open] summary::before{content:"▾ "}
.adv summary:hover{color:var(--ink)}

/* TV display window (?view=display): stage only, no controls, no cursor when idle */
body.display .appbar,body.display .deck{display:none}
body.display #stageWrap{padding:0}
body.display .stage{min-height:100vh;border:0;border-radius:0}
body.display #board{pointer-events:none}
body.display .bcell{cursor:default}
body.display .overlay{pointer-events:none}
body.display .overlay button{display:none}
.stage-wrap.hidecursor,.stage-wrap.hidecursor *{cursor:none !important}
.display-hint{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:60;
  background:var(--panel);border:1px solid var(--accent);color:var(--ink);padding:12px 20px;
  border-radius:12px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:90vw;text-align:center}

/* 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%}
}