/* Layout: a single indigo game table. Player lanes stack down the left, a scoreboard / deck tracker / log rail sits on the right, and a sticky action bar holds Hit and Stay. One deliberate dark world, so no light theme. */
:root{
  color-scheme: dark;
  --table:#1d2047; --table-2:#262a5a; --table-3:#30356b;
  --ink:#f3ead5; --muted:#a6a5cc; --line:rgba(243,234,213,.13);
  --paper:#f7efdc; --paper-2:#ece1c6; --paper-ink:#2b2340;
  --gold:#f2b544; --gold-ink:#3a2706; --coral:#ef6b5a; --ice:#8fd3f4; --mint:#6fd3a3; --violet:#b9a2ff; --orange:#f59b4c;
  --n0:#6d6a78; --n1:#7b4a2a; --n2:#c4362a; --n3:#d4621b; --n4:#ad8a06; --n5:#4f8a24; --n6:#0f8a74;
  --n7:#1e6db5; --n8:#3d3aa0; --n9:#7b35a0; --n10:#b2306f; --n11:#2e4559; --n12:#8c1636;
  --f-display:"Shrikhand", "Georgia", serif;
  --f-num:"Alfa Slab One", "Rockwell", "Georgia", serif;
  --f-body:"Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cw:54px; --ch:76px; --r:10px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:36px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 700px at 30% -10%, var(--table-3), transparent 60%), var(--table);
  background-color: var(--table);
  color:var(--ink); font-family:var(--f-body); font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:6px}
.wrap{padding-inline:16px; padding-block:0 120px; max-width:1320px; margin:0 auto}

/* ---------- top bar ---------- */
.top{display:flex; align-items:center; gap:var(--s3); padding-block:14px; flex-wrap:wrap}
.brand{font-family:var(--f-display); font-size:28px; line-height:1; color:var(--gold); letter-spacing:.5px; text-shadow:0 2px 0 rgba(0,0,0,.25); margin:0}
.brand small{font-family:var(--f-body); font-size:12px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; margin-left:10px; font-weight:600}
.top .spacer{flex:1}
.round-pill{font-weight:600; font-size:13px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase}
.round-pill b{color:var(--ink)}
.iconbtn{background:transparent; border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:13px; font-weight:600; color:var(--ink)}
.iconbtn:hover{background:var(--table-2)}
.iconbtn[aria-pressed="false"]{color:var(--muted)}

/* ---------- cards ---------- */
.card{
  position:relative; width:var(--cw); height:var(--ch); border-radius:var(--r); flex:none;
  background:linear-gradient(160deg, var(--paper), var(--paper-2)); color:var(--paper-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 3px 0 rgba(0,0,0,.25), 0 6px 14px rgba(0,0,0,.25);
  display:grid; place-items:center; user-select:none;
}
.card.num{border-top:6px solid var(--nc)}
.card .cn{font-family:var(--f-num); font-size:calc(var(--cw)*.56); line-height:1; color:var(--nc); margin-top:-4px}
.card .cq{position:absolute; right:5px; bottom:3px; font-size:9px; font-weight:800; color:var(--nc); opacity:.75; font-variant-numeric:tabular-nums}
.card.mod{background:linear-gradient(150deg,#ffe39c,#e9a93a); color:var(--gold-ink)}
.card.x2{background:linear-gradient(150deg,#fff1b8,#f0b93c); color:var(--gold-ink); box-shadow:0 0 0 2px #fff4c7 inset, 0 3px 0 rgba(0,0,0,.25), 0 6px 14px rgba(0,0,0,.25)}
.card .cm{font-family:var(--f-num); font-size:calc(var(--cw)*.38)}
.card.act{color:#fff; text-align:center; align-content:center; gap:2px}
.card.act svg{width:calc(var(--cw)*.46); height:calc(var(--cw)*.46)}
.card.act .cl{font-size:calc(var(--cw)*.16); font-weight:800; letter-spacing:.04em; text-transform:uppercase; line-height:1}
.card.freeze{background:linear-gradient(160deg,#5fb6e6,#2a6fa8)}
.card.flip3{background:linear-gradient(160deg,#f59b4c,#c9541c)}
.card.second{background:linear-gradient(160deg,#58c792,#1f7d58)}
.card.held{outline:2px dashed rgba(255,255,255,.7); outline-offset:2px; opacity:.85}
.card.dupe{box-shadow:0 0 0 3px var(--coral), 0 6px 14px rgba(0,0,0,.25)}
.card.small{--cw:38px; --ch:54px}
.card.fresh{animation:flipin .5s cubic-bezier(.2,.8,.25,1.2) both}
@keyframes flipin{0%{transform:perspective(500px) rotateY(90deg) translateY(-14px) scale(1.08); filter:brightness(1.4)}100%{transform:none}}
.slot{width:var(--cw); height:var(--ch); border-radius:var(--r); border:1.5px dashed var(--line); flex:none; display:grid; place-items:center; color:var(--line); font-family:var(--f-num); font-size:13px}

/* ---------- setup ---------- */
.setup{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:var(--s6); align-items:start; padding-block:var(--s5)}
.hero h2{font-family:var(--f-display); font-weight:400; font-size:clamp(44px,7vw,84px); line-height:.95; margin:0 0 var(--s4); color:var(--ink); text-wrap:balance}
.hero h2 em{font-style:normal; color:var(--gold)}
.hero p{color:var(--muted); max-width:46ch; font-size:17px; margin:0 0 var(--s5)}
.fan{display:flex; gap:0; padding-block:var(--s4) var(--s5); --cw:76px; --ch:106px}
.fan .card{margin-right:-18px; transform:rotate(var(--rot)) translateY(var(--dy)); transition:transform .25s}
.fan .card:hover{transform:rotate(var(--rot)) translateY(calc(var(--dy) - 10px))}
.facts{display:flex; gap:var(--s5); flex-wrap:wrap; color:var(--muted); font-size:13px}
.facts b{display:block; font-family:var(--f-num); font-weight:400; font-size:24px; color:var(--ink)}
.panel{background:var(--table-2); border:1px solid var(--line); border-radius:18px; padding:var(--s5); display:grid; gap:var(--s4)}
.panel h3{margin:0; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600}
.seg{display:grid; grid-template-columns:1fr 1fr; background:var(--table); border-radius:12px; padding:4px; gap:4px}
.seg button{border:0; background:transparent; border-radius:9px; padding:10px; font-weight:600; color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--table)}
.seats{display:grid; gap:var(--s2)}
.seat{display:grid; grid-template-columns:14px minmax(0,1fr) auto auto auto; gap:var(--s2); align-items:center}
.seat .dot{width:12px; height:12px; border-radius:50%; background:var(--pc)}
.seat input,.seat select,.opt select{background:var(--table); border:1px solid var(--line); border-radius:9px; padding:8px 10px; min-width:0}
.seat input{width:100%}
.seat .rm{border:0; background:transparent; color:var(--muted); width:30px; height:30px; border-radius:8px; font-size:18px; line-height:1}
.seat .rm:hover{background:var(--table); color:var(--coral)}
.addseat{justify-self:start; border:1px dashed var(--line); background:transparent; border-radius:9px; padding:8px 14px; color:var(--muted); font-weight:600}
.addseat:disabled{opacity:.4; cursor:not-allowed}
.opts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3)}
.opt{display:grid; gap:4px; font-size:12px; color:var(--muted); font-weight:600}
.opt select{width:100%; color:var(--ink); font-weight:400; font-size:14px}
.check{display:flex; gap:10px; align-items:center; font-size:14px; color:var(--ink)}
.check input{width:18px; height:18px; accent-color:var(--gold)}
.big{border:0; border-radius:14px; padding:15px 22px; font-weight:800; font-size:17px; background:var(--gold); color:var(--gold-ink); box-shadow:0 4px 0 #b9821f; transition:transform .08s}
.big:active{transform:translateY(3px); box-shadow:0 1px 0 #b9821f}
.ghost{border:1px solid var(--line); border-radius:14px; padding:13px 20px; font-weight:700; background:transparent}
.ghost:hover{background:var(--table-3)}
.note{font-size:12.5px; color:var(--muted); margin:0}

/* ---------- table ---------- */
.board{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:var(--s5); align-items:start}
.center{display:grid; gap:var(--s4); min-width:0}
.pile-row{display:flex; gap:var(--s5); align-items:center; padding:var(--s4) var(--s5); background:rgba(0,0,0,.14); border-radius:18px; border:1px solid var(--line); flex-wrap:wrap}
.deck{position:relative; width:64px; height:90px; flex:none}
.deck .back{position:absolute; inset:0; border-radius:var(--r); background:
  repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 6px, transparent 6px 12px), linear-gradient(160deg,#c4362a,#7e1b2e);
  border:3px solid var(--paper); box-shadow:0 3px 0 rgba(0,0,0,.3)}
.deck .back:nth-child(1){transform:translate(4px,4px)} .deck .back:nth-child(2){transform:translate(2px,2px)}
.deck .back b{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--f-display); font-size:24px; color:var(--paper)}
.pilemeta{font-size:12px; color:var(--muted); line-height:1.5}
.pilemeta b{color:var(--ink); font-variant-numeric:tabular-nums}
.reveal{display:flex; gap:var(--s4); align-items:center; flex:1; min-width:220px; --cw:64px; --ch:90px}
.reveal .cap{font-size:14px; min-width:0}
.reveal .cap strong{display:block; font-size:18px}
.reveal .cap span{color:var(--muted)}
.lanes{display:grid; gap:var(--s3)}
.lane{position:relative; background:var(--table-2); border:1px solid var(--line); border-radius:16px; padding:var(--s3) var(--s4) var(--s4); display:grid; gap:var(--s3); transition:border-color .2s, box-shadow .2s, opacity .3s; overflow:hidden}
.lane.turn{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 10px 30px rgba(0,0,0,.25)}
.lane.out{opacity:.78}
.lane.target{cursor:pointer; border-color:var(--ice); box-shadow:0 0 0 2px var(--ice)}
.lane.target:hover{background:var(--table-3)}
.lane.nottarget{opacity:.45}
.lane.shake{animation:shake .45s both}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.lhead{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap}
.lhead .dot{width:11px; height:11px; border-radius:50%; background:var(--pc); flex:none}
.lhead .nm{font-weight:800; font-size:16px}
.lhead .who{font-size:12px; color:var(--muted)}
.chip{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:999px; background:var(--table); color:var(--muted)}
.chip.dealer{background:transparent; border:1px solid var(--line)}
.chip.stayed{background:var(--ink); color:var(--table)}
.chip.busted{background:var(--coral); color:#2b0b07}
.chip.frozen{background:var(--ice); color:#08304a}
.chip.seven{background:var(--gold); color:var(--gold-ink)}
.chip.turnchip{background:var(--gold); color:var(--gold-ink)}
.chip.pick{background:var(--act); color:#111a33; animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 5px color-mix(in srgb, var(--act) 30%, transparent)}}
.lane.target{border-color:var(--act, var(--ice)); box-shadow:0 0 0 2px var(--act, var(--ice))}
.lhead .sp{flex:1}
.lscore{display:flex; gap:var(--s3); align-items:baseline; font-variant-numeric:tabular-nums}
.lscore .rd{font-family:var(--f-num); font-size:20px; color:var(--gold)}
.lscore .rd.zero{color:var(--coral); text-decoration:line-through; text-decoration-thickness:2px}
.lscore .tt{font-size:12px; color:var(--muted)}
.lscore .tt b{color:var(--ink); font-size:14px}
.lcards{display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center}
.nums{display:flex; gap:6px}
.extras{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.extras:empty{display:none}
.stamp{position:absolute; right:18px; bottom:10px; font-family:var(--f-display); font-size:30px; transform:rotate(-8deg); pointer-events:none; opacity:.92; letter-spacing:1px}
.stamp.busted{color:var(--coral)} .stamp.frozen{color:var(--ice)} .stamp.seven{color:var(--gold)} .stamp.stayed{color:var(--ink); font-size:22px; opacity:.6}

/* ---------- rail ---------- */
.rail{display:grid; gap:var(--s4); position:sticky; top:calc(env(safe-area-inset-top, 0px) + 12px)}
.box{background:var(--table-2); border:1px solid var(--line); border-radius:16px; padding:var(--s4)}
.box h4{margin:0 0 var(--s3); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; display:flex; justify-content:space-between}
.race{display:grid; gap:10px}
.rrow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 8px; font-size:13px}
.rrow .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600}
.rrow .val{font-variant-numeric:tabular-nums; font-weight:800}
.rrow .val i{font-style:normal; font-weight:600; color:var(--mint); font-size:11px; margin-right:6px}
.rrow .val i.z{color:var(--coral)}
.track{grid-column:1/-1; height:8px; background:var(--table); border-radius:99px; position:relative; overflow:hidden}
.track span{position:absolute; inset:0 auto 0 0; border-radius:99px; background:var(--pc); transition:width .6s cubic-bezier(.3,.8,.3,1)}
.track em{position:absolute; inset:0 auto 0 0; border-radius:99px; background:var(--pc); opacity:.35; transition:width .4s}
.tracker{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px}
.tcell{display:grid; justify-items:center; gap:2px; font-variant-numeric:tabular-nums}
.tcell b{font-family:var(--f-num); font-weight:400; font-size:15px; color:var(--nc); background:var(--paper); width:100%; text-align:center; border-radius:6px; padding-block:2px}
.tcell small{font-size:11px; color:var(--muted)}
.tcell .bar{width:100%; height:3px; background:var(--table); border-radius:3px; overflow:hidden}
.tcell .bar span{display:block; height:100%; background:var(--nc); filter:brightness(1.6)}
.tcell.hot b{box-shadow:0 0 0 2px var(--coral)}
.specials{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; font-size:12px; color:var(--muted)}
.specials span b{color:var(--ink)}
.log{max-height:240px; overflow:auto; display:grid; gap:4px; font-size:13px; padding-right:4px}
.log p{margin:0; color:var(--muted)}
.log p b{color:var(--ink); font-weight:700}
.log p.r{color:var(--ink); font-weight:700; margin-top:6px; letter-spacing:.06em; text-transform:uppercase; font-size:11px}
.log p.bad{color:#ffb4a8} .log p.good{color:#ffe08f}

/* ---------- action bar ---------- */
.bar{position:fixed; left:0; right:0; bottom:0; z-index:20; padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background:rgba(20,22,52,.94); backdrop-filter:blur(10px); border-top:1px solid var(--line)}
.barin{max-width:1320px; margin:0 auto; display:flex; gap:var(--s4); align-items:center; flex-wrap:wrap}
.who-now{min-width:0; flex:1 1 220px}
.who-now .wn{display:flex; gap:12px; align-items:center}
.who-now .mini{flex:none; display:block}
.bar.choosing{border-top:3px solid var(--act); background:rgba(24,27,66,.97)}
.chooser{max-width:1320px; margin:0 auto; display:grid; gap:12px}
.chhead{display:flex; gap:16px; align-items:center}
.chcard{flex:none; --cw:58px; --ch:82px; animation:chin .45s cubic-bezier(.2,.8,.25,1.2) both}
@keyframes chin{0%{transform:translateY(16px) rotate(-8deg) scale(.8); opacity:0}100%{transform:none; opacity:1}}
.chtext{display:grid; gap:3px; min-width:0}
.chtext .eyebrow{color:var(--act)}
.chclock{color:var(--ink); font-variant-numeric:tabular-nums}
.chtext strong{font-size:21px; line-height:1.15; text-wrap:balance}
.chhow{color:var(--muted); font-size:13.5px; max-width:78ch}
.chtargets{display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:8px}
.tgt{display:grid; gap:4px; text-align:left; background:var(--table-2); border:1.5px solid var(--line); border-radius:12px; padding:10px 12px 11px; min-width:0; transition:background .15s, border-color .15s, transform .08s}
.tgt:hover{background:var(--table-3); border-color:var(--act)}
.tgt:focus-visible{border-color:var(--act)}
.tgt:active{transform:translateY(1px)}
.tgt-top{display:flex; align-items:center; gap:7px; font-weight:800; font-size:15.5px; min-width:0}
.tgt-top .dot{width:10px; height:10px; border-radius:50%; background:var(--pc); flex:none}
.tgt-top .tn{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tgt-top kbd{margin-left:auto; color:var(--muted)}
.tgt .tags{display:flex; gap:4px; flex-wrap:wrap; min-height:19px}
.tgt .tag{font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:99px; background:var(--table); color:var(--gold)}
.tgt .tm{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.tgt .tact{font-weight:800; font-size:14px; color:var(--act)}
.codebtns{display:flex; gap:var(--s2); flex-wrap:wrap}
.who-now strong{display:block; font-size:18px; line-height:1.2}
.who-now span{font-size:13px; color:var(--muted)}
.odds{flex:1 1 220px; display:grid; gap:4px; font-size:12.5px; color:var(--muted); min-width:0}
.odds .meter{height:10px; border-radius:99px; background:var(--mint); position:relative; overflow:hidden}
.odds .meter span{position:absolute; right:0; top:0; bottom:0; background:var(--coral); transition:width .3s}
.odds .row{display:flex; justify-content:space-between; gap:8px; font-variant-numeric:tabular-nums}
.odds .row b{color:var(--ink)}
.acts{display:flex; gap:var(--s2)}
.hit{min-width:120px}
.stay{border:2px solid var(--ink); background:transparent; border-radius:14px; padding:13px 20px; font-weight:800; font-size:17px; min-width:110px}
.stay:hover{background:var(--table-3)}
.acts button:disabled{opacity:.35; cursor:not-allowed; box-shadow:none; transform:none}
kbd{font-family:var(--f-body); font-size:11px; border:1px solid currentColor; border-radius:4px; padding:0 4px; opacity:.6; margin-left:6px; font-weight:600}

/* ---------- modal ---------- */
.modal{position:fixed; inset:0; z-index:40; background:rgba(10,11,30,.7); display:grid; place-items:center; padding:16px; overflow:auto}
.sheet{background:var(--table-2); border:1px solid var(--line); border-radius:20px; padding:var(--s5); width:min(720px,100%); display:grid; gap:var(--s4); max-height:calc(100% - 8px); overflow:auto}
.sheet h3{font-family:var(--f-display); font-weight:400; font-size:34px; margin:0; line-height:1.05; color:var(--gold); text-wrap:balance}
.sheet .sub{color:var(--muted); margin:-8px 0 0}
.tblwrap{overflow-x:auto}
table.sum{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:14px}
table.sum th{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; text-align:right; padding:6px 8px; border-bottom:1px solid var(--line)}
table.sum th:first-child,table.sum td:first-child{text-align:left}
table.sum td{padding:8px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap}
table.sum td.rd{font-family:var(--f-num); color:var(--gold); font-size:16px}
table.sum tr.bust td.rd{color:var(--coral)}
table.sum td.tot{font-weight:800}
table.sum .dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--pc); margin-right:8px}
.sheet .row{display:flex; gap:var(--s3); flex-wrap:wrap; justify-content:flex-end}
.rules{display:grid; gap:var(--s3); font-size:14.5px; max-width:65ch}
.rules h5{margin:var(--s2) 0 0; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold)}
.rules p,.rules ul{margin:0; color:var(--ink)}
.rules ul{padding-left:18px; display:grid; gap:4px}
.rules .muted{color:var(--muted)}
.banner{position:fixed; left:50%; top:38%; z-index:30; transform:translate(-50%,-50%); font-family:var(--f-display); font-size:clamp(42px,9vw,96px); color:var(--gold); text-shadow:0 4px 0 rgba(0,0,0,.35); pointer-events:none; animation:pop 1.3s ease both; white-space:nowrap}
.banner.bad{color:var(--coral)} .banner.ice{color:var(--ice)}
@keyframes pop{0%{opacity:0; transform:translate(-50%,-50%) scale(.6) rotate(-6deg)}20%{opacity:1; transform:translate(-50%,-50%) scale(1.06) rotate(-4deg)}75%{opacity:1}100%{opacity:0; transform:translate(-50%,-60%) scale(1) rotate(-4deg)}}
#fx{position:fixed; inset:0; pointer-events:none; z-index:35}
.toast{position:fixed; left:50%; top:calc(env(safe-area-inset-top, 0px) + 16px); transform:translateX(-50%); z-index:50; background:var(--ink); color:var(--table); font-weight:600; font-size:14px; padding:10px 16px; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.35); max-width:calc(100% - 32px)}

/* ---------- online ---------- */
.seg3{grid-template-columns:repeat(3,minmax(0,1fr))}
.online{display:grid; gap:var(--s4)}
.online input,.joinrow input{background:var(--table); border:1px solid var(--line); border-radius:9px; padding:10px 12px; min-width:0; width:100%; font-size:15px}
.online-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3)}
.oncard{display:grid; gap:var(--s2); align-content:start; background:var(--table); border-radius:14px; padding:var(--s4)}
.oncard .big{justify-self:start}
.joinrow{display:flex; gap:var(--s2)}
.joinrow input{font-family:var(--f-num); letter-spacing:.18em; text-transform:uppercase; font-size:20px; text-align:center}
.note.warn:empty{display:none}
.note.warn{color:#ffd29a}
.lobby{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--s6); align-items:start; padding-block:var(--s5)}
.codecard{display:grid; gap:var(--s3); justify-items:start}
.eyebrow{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600}
.bigcode{font-family:var(--f-num); font-weight:400; font-size:clamp(46px,8.5vw,92px); line-height:1; letter-spacing:.12em; color:var(--gold); user-select:all; font-variant-numeric:tabular-nums}
.codecard .note{max-width:44ch; font-size:14px}
.lseats{display:grid; gap:var(--s2)}
.lseat{display:grid; grid-template-columns:12px minmax(0,1fr) auto auto; gap:var(--s2); align-items:center; background:var(--table); border-radius:10px; padding:8px 10px; min-height:46px}
.lseat .dot{width:12px; height:12px; border-radius:50%; background:var(--pc)}
.lseat .nm{font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lseat .nm small{font-weight:600; color:var(--muted); margin-left:6px; font-size:12px}
.lseat select{background:var(--table-2); border:1px solid var(--line); border-radius:8px; padding:5px 8px}
.lseat .rm{border:0; background:transparent; color:var(--muted); width:30px; height:30px; border-radius:8px; font-size:18px}
.lseat .rm:hover{color:var(--coral); background:var(--table-2)}
.live{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.live::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--muted); opacity:.5}
.live.on{color:var(--mint)} .live.on::before{background:var(--mint); opacity:1}
.lobbyacts{display:flex; gap:var(--s3); justify-content:space-between; flex-wrap:wrap}
.lobby select:disabled{opacity:.7}
.tag-code{font-family:var(--f-num); letter-spacing:.12em; color:var(--gold)}
.offline{color:#ffd29a}

@media (max-width: 960px){
  .lobby{grid-template-columns:minmax(0,1fr); gap:var(--s5)}
  .board{grid-template-columns:minmax(0,1fr)}
  .rail{position:static}
  .setup{grid-template-columns:minmax(0,1fr); gap:var(--s5)}
}
@media (max-width: 560px){
  :root{--cw:40px; --ch:57px; --r:8px}
  .lane{padding:var(--s3)}
  .nums{gap:4px}
  .fan{--cw:58px; --ch:82px}
  .opts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .seat{grid-template-columns:12px minmax(0,1fr) auto auto; }
  .seat .pers{grid-column:2 / span 2}
  .reveal{--cw:50px; --ch:70px}
  .stamp{font-size:22px}
  .acts{width:100%} .acts button{flex:1}
  .brand small{display:none}
  table.sum .xs{display:none}
  .online-grid{grid-template-columns:minmax(0,1fr)}
  .chtargets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chtext strong{font-size:18px}
  .chhow{font-size:12.5px}
  .chcard{--cw:44px; --ch:62px}
  .tgt{padding:9px 10px}
  .tgt-top kbd{display:none}
  .seg button{padding:10px 4px; font-size:13.5px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}