*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0f2a1d;color:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}
body{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2vh 3vw}
h1{font-size:56px;margin:0 0 16px;color:#ffd166}
.body{font-size:34px;line-height:1.3}
.code{font-size:140px;font-weight:800;letter-spacing:.15em;color:#ffd166;margin:0}
.corner{position:fixed;top:12px;right:20px;font-size:32px;background:#000a;padding:6px 18px;border-radius:12px}
.corner b{color:#ffd166;letter-spacing:.1em}
button{font:inherit;font-size:34px;font-weight:700;padding:16px 40px;border:0;border-radius:16px;background:#d62839;color:#fff;cursor:pointer;min-height:56px}
button:disabled{opacity:.4}
.players{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:20px 0;max-width:1400px}
.pill{font-size:36px;background:#1d5c3b;padding:8px 26px;border-radius:40px}
.pill.off{opacity:.45}
.q{font-size:52px;font-weight:700;max-width:1500px;margin:10px 0 24px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:min(1500px,94vw)}
.opt{font-size:38px;padding:20px;border-radius:16px;color:#fff}
.o0{background:#d62839}.o1{background:#1b6ca8}.o2{background:#e09f3e;color:#111}.o3{background:#2a9d8f}
.opt.dim{opacity:.25}.opt.right{outline:8px solid #fff}
.timer{font-size:90px;font-weight:800;color:#ffd166}
.row{font-size:36px;margin:4px 0}.row i{color:#9bd;font-style:normal;margin-left:12px}
.rest{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row;gap:2px 32px;width:min(1700px,94vw);margin:8px 0}.rest .row{font-size:26px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.small{font-size:22px;line-height:1.4}
.offer,.pass{margin:10px 0;max-width:1200px}
.buy{margin:8px 0}.buy .small{margin-left:12px}
.offer input,.pass input,.pass select{font:inherit;font-size:22px;padding:8px;border-radius:8px;border:0;margin:3px;width:auto}
button.mv{font-size:22px;padding:6px 16px;min-height:0;border-radius:8px}
.pass summary{cursor:pointer}
/* phone */
.phone{justify-content:flex-start;padding:16px}
.phone h1{font-size:30px}
.phone input{font:inherit;font-size:28px;width:100%;max-width:420px;padding:14px;margin:8px 0;border-radius:12px;border:0;text-align:center;text-transform:uppercase;min-height:56px}
.phone input.name{text-transform:none}
.phone .body{font-size:24px}
.pbtns{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;flex:1;margin-top:12px}
.pbtns button{font-size:44px;border-radius:20px;min-height:120px}
.err{color:#ff9aa2;font-size:22px;min-height:28px}

.joinurl{font-size:76px;line-height:1.15;font-weight:600}.joinurl b{color:#ffd166;font-weight:800}

/* phone: scrollable pages, compact 2-col grid for long choice lists (B1/B2) */
body.phone{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.phone #app{flex-shrink:0;padding-bottom:24px}
.pbtns.list{grid-template-columns:1fr;flex:none}
.pbtns.list button{font-size:32px;min-height:72px;padding:10px 14px;word-break:break-word}
.pbtns.list.opt button{font-size:26px;min-height:64px}
.pbtns.list.many{grid-template-columns:1fr 1fr;gap:8px}
.pbtns.list.many button{font-size:22px;min-height:52px;padding:6px 8px;border-radius:14px}
.pbtns.list.opt.many button{font-size:18px;min-height:56px}
/* TV bluff grid scales with option count, no page scroll (B2) */
.opts.d1{grid-template-columns:repeat(3,1fr);gap:10px;width:min(1840px,96vw)}.opts.d1 .opt{font-size:30px;padding:12px}
.opts.d2{grid-template-columns:repeat(4,1fr);gap:8px;width:min(1840px,96vw)}.opts.d2 .opt{font-size:25px;padding:8px}
.opts.d3{grid-template-columns:repeat(5,1fr);gap:6px;width:min(1860px,98vw)}.opts.d3 .opt{font-size:21px;padding:6px;line-height:1.2}
.opts[class*=" d"] .opt{overflow:hidden;border-radius:12px}
.opts[class*=" d"] .opt small{font-size:15px;display:block;line-height:1.2;max-height:3.6em;overflow:hidden}
body:has(.opts[class*=" d"]) .q{font-size:38px;margin:2px 0 8px}
body:has(.opts[class*=" d"]) .timer{font-size:48px;line-height:1}
body:has(.opts[class*=" d"]) .body{font-size:26px}
body:has(.opts[class*=" d"]) .top{display:flex;flex-wrap:wrap;gap:4px 28px;justify-content:center;margin-top:8px!important}
body:has(.opts[class*=" d"]) .top .row{font-size:24px;margin:0}
/* TV lobby: two columns, Start pinned in view (B3) */
.lobby{display:grid;grid-template-columns:1fr 1fr;gap:3vw;width:100%;height:96vh;align-items:stretch;text-align:center}
.lcol{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;overflow:hidden}
.rcol{display:flex;flex-direction:column;min-height:0;justify-content:center}
.rscroll{overflow-y:auto;min-height:0;padding-top:70px}
.rcol #start{flex:none;margin-top:12px}
.lobby .joinurl{font-size:56px}.lobby .code{font-size:120px}
.lobby .players{max-width:none;width:100%}
.lobby.many .joinurl{font-size:44px}.lobby.many .code{font-size:90px;margin:0}
.lobby.many .pill{font-size:26px;padding:4px 16px}.lobby.many .players{gap:8px;margin:10px 0}
.lobby.many .body{font-size:28px}
.lobby .rscroll .body,.lobby .rscroll .row{font-size:28px}

.vbig .row{font-size:32px;margin:2px 0}body:has(.vbig) .q{font-size:44px;margin:6px 0 10px}body:has(.vbig) .body{font-size:30px}body:has(.vbig) .rest{grid-template-columns:repeat(5,minmax(0,1fr))}.opt small{display:block;overflow:hidden;text-overflow:ellipsis;max-height:2.8em}