/* Blind Bluff — the table screen: a 2D oval table, a dealing machine under the felt, your chips on the felt.
   Everything here lives under .t2, so the home, join and lobby pages keep their own look. */

/* ================= themes: every colour that sets the mood, in one place ================= */
.t2, .pg { --bgA:#7d2e72; --bgB:#4d1849; --bgC:#260a27; --page:#1c0820; --rail:#3f1239; --trim:#e8b85a; --rail2:#2a0b27; --railSh:#1c0820;
  --felt1:#3fd2a2; --felt2:#14916d; --felt3:#0a5c47; --plate:rgba(38,8,35,.88); --sh1:#6e2564; --sh2:#4d1848; --sh3:#361133; --well:rgba(25,4,24,.45);
  --btn:rgba(255,255,255,.14); --btnTx:#fff; --btnLip:rgba(0,0,30,.4); --tline:rgba(255,255,255,.22); --tx:#fff; --acc:#ffd06a; --ink:#1f0820;
  --ghost:rgba(255,255,255,.35); --foldTx:#ffb3bd; --raiseTx:#f2c6ff; --scrim:rgba(30,6,30,.72);
  --gold1:#ffe25a; --gold2:#ffa712; --goldlip:#c96400; --ctl:122px;
  /* the bet button's fire: hue (°) at its hot core and at its tips. Plum: gold cooling to magenta. */
  --fire-core:45; --fire-tip:-62;
  /* the menu sheet and game-over card borrow these */
  --panel:#3a1036; --panel-2:#4d1848; --line:rgba(255,255,255,.18); --text:#fff; --muted:rgba(255,255,255,.66); --brass:var(--acc); --brass-ink:#1f0820; }
.t2[data-theme=walnut], .pg[data-theme=walnut] { --fire-core:42; --fire-tip:5; --bgA:#fdf6e8; --bgB:#f3e5c8; --bgC:#e2cca4; --page:#efe1c4; --rail:#4b2f1c; --trim:#c9a14a; --rail2:#3a2416; --railSh:#bfa47a;
  --felt1:#58c487; --felt2:#247c4d; --felt3:#145335; --plate:rgba(50,30,16,.9); --sh1:#fffaf0; --sh2:#f7ecd6; --sh3:#efdfc3; --well:rgba(80,50,28,.09);
  --btn:#fffdf8; --btnTx:#3a2414; --btnLip:rgba(80,50,28,.22); --tline:rgba(80,50,28,.25); --tx:#3a2414; --acc:#b0601a; --ghost:rgba(58,36,20,.32);
  --foldTx:#b3263e; --raiseTx:#6b3fa0; --ink:#2b1a0e; --scrim:rgba(60,40,20,.55);
  --panel:#fbf3e3; --panel-2:#f1e3c8; --line:rgba(80,50,28,.22); --text:#3a2414; --muted:rgba(58,36,20,.62); --brass-ink:#fff; }
.t2[data-theme=creamplum], .pg[data-theme=creamplum] { --fire-core:45; --fire-tip:-30; --bgA:#fdf6ec; --bgB:#f4e6d2; --bgC:#e5cfb6; --page:#f1e3cf; --rail:#4d1746; --trim:#d6a64c; --rail2:#350f31; --railSh:#c4a58c;
  --felt1:#a8579a; --felt2:#73306b; --felt3:#4a1745; --plate:rgba(52,12,48,.9); --sh1:#fffaf3; --sh2:#f7eadb; --sh3:#eedccb; --well:rgba(77,23,70,.08);
  --btn:#fffdf9; --btnTx:#3d1238; --btnLip:rgba(77,23,70,.2); --tline:rgba(77,23,70,.25); --tx:#3d1238; --acc:#9a2f87; --ghost:rgba(61,18,56,.3);
  --foldTx:#b3263e; --raiseTx:#7a2f9a; --ink:#2a0b26; --scrim:rgba(60,20,55,.5);
  --panel:#fbf1e6; --panel-2:#f1e0cf; --line:rgba(77,23,70,.22); --text:#3d1238; --muted:rgba(61,18,56,.6); --brass-ink:#fff; }
.t2[data-theme=blue], .pg[data-theme=blue] { --fire-core:50; --fire-tip:-95; --bgA:#2457c9; --bgB:#173a99; --bgC:#0d235f; --page:#0a1a4a; --rail:#142f7c; --trim:#ffcf3a; --rail2:#0f2563; --railSh:#0a1a4a;
  --felt1:#46e38f; --felt2:#139a52; --felt3:#0a6e3a; --plate:rgba(8,20,64,.86); --sh1:#1d47b0; --sh2:#14348a; --sh3:#102a72; --well:rgba(5,15,55,.45);
  --acc:#ffd84a; --ink:#0b1f5c; --raiseTx:#c9b4ff; --scrim:rgba(6,14,50,.72);
  --panel:#14348a; --panel-2:#1d47b0; --brass-ink:#0b1f5c; }

/* ================= frame ================= */
/* pinned to the viewport's four edges rather than given a height: 100dvh comes up short on some phones (iOS toolbars,
   the home-indicator area), which left a band of page background under the controls */
.t2 { position:fixed; inset:0; display:grid; grid-template-rows:auto minmax(0,1fr) calc(var(--ctl) + var(--sab)); overflow:hidden; color:var(--tx);
  font-family:Nunito, var(--f-body); -webkit-user-select:none; user-select:none;
  background:radial-gradient(ellipse 90% 55% at 50% 42%,var(--bgA) 0%,var(--bgB) 45%,var(--bgC) 100%); }
html:has(#tbl), body:has(#tbl) { background:var(--tbl-bg, #361133); overflow:hidden; }
.t2 button { font-family:inherit; }
.t2 .lil { font-family:'Lilita One', var(--f-body); font-weight:400; }
.t2 .st { -webkit-text-stroke:4px var(--sc,var(--ink)); paint-order:stroke fill; }

/* header */
.t2-top { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:calc(10px + var(--sat)) max(12px,var(--sar)) 6px max(12px,var(--sal)); }
.tinfo { display:grid; line-height:1.15; min-width:0; background:none; border:0; padding:0; text-align:left; color:inherit; }
.tinfo b { font-weight:900; font-size:13px; letter-spacing:.03em; white-space:nowrap; }
.tinfo small { font-weight:800; font-size:12px; opacity:.72; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tinfo small u { text-decoration:none; letter-spacing:.12em; }
.tbtns { display:flex; gap:5px; flex:none; align-items:center; }
.tb { height:36px; padding:0 9px; border:0; border-radius:12px; display:flex; align-items:center; gap:5px; font-weight:900; font-size:12.5px; color:var(--btnTx);
  background:var(--btn); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.25),0 3px 0 var(--btnLip); }
.tb:active { transform:translateY(2px); }
.tb svg { flex:none; }
@media (max-width: 430px) { .tb span { display:none; } .tb { width:36px; padding:0; justify-content:center; } }
.t2 .conn { font-size:12px; font-weight:900; color:#ffb35a; }

/* table */
.t2 .table { position:relative; min-height:0; }
.t2 .stage { position:absolute; }
.t2 .felt { position:absolute; left:5%; right:5%; top:3%; bottom:4%; border-radius:999px;
  background:radial-gradient(ellipse 70% 60% at 50% 38%,var(--felt1),var(--felt2) 55%,var(--felt3));
  box-shadow:0 0 0 10px var(--rail),0 0 0 12.5px var(--trim),0 0 0 16px var(--rail2),0 10px 0 14px var(--railSh),0 26px 40px rgba(0,0,20,.35),inset 0 -18px 30px rgba(0,0,0,.25),inset 0 10px 20px rgba(255,255,255,.12); }
.t2 .felt::after { content:""; position:absolute; inset:7%; border:1.5px solid rgba(255,255,255,.16); border-radius:inherit; }
.t2 .notice { position:absolute; left:50%; top:29.5%; transform:translate(-50%,-50%); z-index:9; font-weight:900; font-size:14px; padding:6px 14px; border-radius:999px; background:var(--plate); color:#fff; white-space:nowrap; }

/* seats */
.t2 .seat { position:absolute; display:grid; justify-items:center; gap:3px; transform:translate(-50%,-50%); z-index:4; transition:opacity .3s,filter .3s; }
.t2 .av { --p:1; position:relative; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-family:'Lilita One'; font-size:21px; color:#fff;
  -webkit-text-stroke:3px rgba(0,0,0,.28); paint-order:stroke fill; border:3px solid #fff; background:radial-gradient(circle at 40% 35%,var(--a1),var(--a2));
  box-shadow:0 4px 0 rgba(0,0,30,.4),0 8px 16px rgba(0,0,0,.25),inset 0 -5px 0 rgba(0,0,0,.14),inset 0 4px 0 rgba(255,255,255,.35); transition:box-shadow .2s,transform .2s; }
.t2 .av .bot { position:absolute; right:-6px; bottom:-4px; font-family:Nunito; font-weight:900; font-size:9px; -webkit-text-stroke:0; padding:1px 4px; border-radius:6px; background:var(--plate); }
.t2 .plate { background:var(--plate); color:#fff; border-radius:10px; padding:2px 9px 3px; text-align:center; line-height:1.1; box-shadow:inset 0 1px 0 rgba(255,255,255,.15); min-width:58px; max-width:96px; }
.t2 .plate b { display:block; font-size:12px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.t2 .plate span { font-family:'Lilita One'; font-size:13px; color:#ffd84a; }
.t2 .seat .tag { font-size:10.5px; font-weight:900; padding:1px 7px; border-radius:999px; background:var(--plate); color:#fff; white-space:nowrap; opacity:.9; }
.t2 .seat.turn .av { box-shadow:0 0 0 4px #46e38f,0 0 22px 4px rgba(70,227,143,.6),0 4px 0 rgba(0,0,30,.4); animation:t2bob .7s ease-in-out infinite alternate; }
.t2 .seat.turn .av::after { content:""; position:absolute; inset:-9px; border-radius:50%; background:conic-gradient(#46e38f calc(var(--p) * 360deg),transparent 0);
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%); mask:radial-gradient(circle,transparent 58%,#000 60%); }
.t2 .seat.turn.hurry .av::after { background:conic-gradient(#ff5a6e calc(var(--p) * 360deg),transparent 0); }
@keyframes t2bob { to { transform:translateY(-3px); } }
.t2 .seat.folded > :not(.sayb):not(.co) { opacity:.42; filter:saturate(.4); }
.t2 .seat.win .av { box-shadow:0 0 0 4px #ffd84a,0 0 30px 8px rgba(255,200,60,.7); }
.t2 .seat.lead .av { box-shadow:0 0 0 3px rgba(255,216,74,.85),0 0 18px 4px rgba(255,200,60,.45); }   /* ahead so far, at showdown */
.t2 .seat.lead .hn { background:#ffe9a8; }
/* showdown: whoever shows next is lit and pulses (transform only) until their cards flip */
.t2 .seat.next .av { box-shadow:0 0 0 3px #fff,0 0 24px 6px rgba(255,255,255,.5); animation:t2next .42s ease-in-out infinite alternate; }
.t2 #mine.next { animation:t2nextme .42s ease-in-out infinite alternate; }
@keyframes t2next { to { transform:scale(1.1); } }
@keyframes t2nextme { to { translate:0 -7px; } }
.t2 .co.wait { background:#fff; letter-spacing:.15em; }
.t2 .hc { position:absolute; top:2px; display:flex; z-index:-1; }
.t2 .hc.r { left:calc(50% + 12px); } .t2 .hc.l { right:calc(50% + 12px); }
.t2 .hc.u { top:-22px; left:50%; transform:translateX(-50%); } .t2 .hc.u.shown { transform:translateX(-50%) scale(1.15); }
.t2 .hc .pc:first-child { transform:rotate(-8deg); } .t2 .hc .pc + .pc { margin-left:-12px; transform:rotate(8deg); }
.t2 .hc.shown { z-index:6; transform:scale(1.15); }
.t2 .hn { position:absolute; top:calc(100% + 2px); left:50%; transform:translateX(-50%); white-space:nowrap; font-size:11.5px; font-weight:900; padding:2px 8px; border-radius:999px; background:#fff; color:var(--ink); z-index:7; }
.t2 .seat.win .hn { background:#ffd84a; }
.t2 .seat.low .hn { top:auto; bottom:calc(100% + 2px); }
.t2 .co { position:absolute; bottom:calc(100% + 4px); left:50%; translate:-50% 0; white-space:nowrap; font-family:'Lilita One'; font-size:16px; padding:4px 12px 5px; border-radius:12px; color:var(--ink); background:#fff; box-shadow:0 6px 14px rgba(0,0,30,.45); pointer-events:none; z-index:20; }
.t2 .co::after { content:""; position:absolute; left:50%; bottom:-5px; width:10px; height:10px; background:inherit; transform:translateX(-50%) rotate(45deg); border-radius:2px; }
.t2 .seat.top .co { bottom:auto; top:calc(100% + 4px); }
.t2 .seat.top .co::after { bottom:auto; top:-5px; }
.t2 .seat.edge-r .co { left:auto; right:-6px; translate:0 0; } .t2 .seat.edge-l .co { left:-6px; translate:0 0; }
.t2 .co.check { background:#9cc7ff; } .t2 .co.call { background:#9ff0bf; } .t2 .co.raise { background:linear-gradient(#ffe25a,#ffb21a); }
.t2 .co.allin { background:linear-gradient(#ffb02e,#ff4d4f); color:#fff; } .t2 .co.fold { background:#ffb3bd; } .t2 .co.blind { background:#e6e9f5; } .t2 .co.reveal { background:#fff; }
.t2 .dbtn { position:absolute; width:24px; height:24px; border-radius:50%; background:#fff; color:#1d0820; display:grid; place-items:center; font-family:'Lilita One'; font-size:13px; box-shadow:0 3px 0 rgba(0,0,0,.35); transform:translate(-50%,-50%); z-index:5; transition:left .5s ease,top .5s ease; }

/* chips: images rendered from the clay chip */
.t2 .pile { position:absolute; transform:translate(-50%,-100%); display:flex; gap:3px; align-items:flex-end; z-index:3; pointer-events:none; }
.t2 .col { position:relative; isolation:isolate; }
.t2 .col img { position:absolute; left:0; display:block; }
.t2 .col::after { content:""; position:absolute; left:-3px; right:-3px; bottom:-4px; height:11px; border-radius:50%; background:rgba(0,20,40,.4); filter:blur(3px); z-index:-1; }
.t2 .betlbl { position:absolute; transform:translate(-50%,0); margin-top:3px; font-family:'Lilita One'; font-size:13px; padding:1px 8px; border-radius:999px; background:var(--plate); color:#fff; white-space:nowrap; z-index:3; }
.t2 .potlbl { position:absolute; transform:translate(-50%,-50%); z-index:3; display:grid; justify-items:center; line-height:1; background:var(--plate); color:#fff; border-radius:14px; padding:4px 14px 6px; box-shadow:inset 0 1px 0 rgba(255,255,255,.15); }
.t2 .potlbl small { font-weight:900; font-size:11px; opacity:.8; }
.t2 .potlbl b { font-family:'Lilita One'; font-weight:400; font-size:21px; color:#ffd84a; }
.t2 .potlbl i { font-style:normal; font-weight:800; font-size:10.5px; opacity:.75; margin-top:2px; }
.t2 .potlbl.slam { animation:t2slam .4s cubic-bezier(.3,1.6,.5,1); }
@keyframes t2slam { from { transform:translate(-50%,-50%) scale(1.35); } }
.chipfly { position:fixed; left:0; top:0; z-index:60; pointer-events:none; }
.dragchip { position:fixed; z-index:200; width:46px; transform:translate(-50%,-60%) scale(1.18) rotate(-6deg); filter:drop-shadow(0 12px 10px rgba(0,0,0,.45)); pointer-events:none; }

/* your chips live on the felt; tapping pushes one into your spot */
.t2 .mystk { position:absolute; transform:translate(-50%,-100%); display:grid; justify-items:center; gap:2px; z-index:5; touch-action:none; cursor:pointer; padding:6px 6px 2px; border-radius:14px; transition:transform .15s; }
.t2 .mystk .v { font-family:'Lilita One'; font-size:12.5px; line-height:1; color:#fff; padding:2px 7px 3px; border-radius:999px; background:var(--plate); white-space:nowrap; }
.t2 .mystk .v small { font-family:Nunito; font-weight:900; font-size:10.5px; opacity:.75; margin-left:2px; }
.t2 .mystk.none { opacity:.35; pointer-events:none; }
.t2 .mystk.empty { opacity:.6; }
.t2 .mystk.empty .col::before { content:""; position:absolute; left:3px; right:3px; bottom:1px; height:14px; border-radius:50%; border:2px dashed var(--tline); }
.t2 .mystk:active { transform:translate(-50%,-100%) scale(.94); }
/* your stacks glow on your turn: a soft glow behind each one fading in and out. Only its opacity animates, so the GPU
   does it without repainting the chips every frame (an animated drop-shadow had to). */
.t2 .mystk::after { content:""; position:absolute; inset:-4px -8px 12px; z-index:-1; border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(closest-side, color-mix(in srgb,var(--acc) 60%,transparent), transparent); }
.t2 .stage.myturn .mystk::after, .t2 .mebar.myturn .mystk::after { animation:t2glow 1.6s ease-in-out infinite; }
@keyframes t2glow { 50% { opacity:1; } }
.t2 .stage:not(.myturn) .mystk { pointer-events:none; }
.t2 .draft { position:absolute; transform:translate(-50%,-50%); width:140px; height:58px; border-radius:50%; z-index:4; display:grid; place-items:center; touch-action:none; cursor:pointer;
  border:2px dashed color-mix(in srgb,var(--acc) 55%,transparent); background:color-mix(in srgb,var(--acc) 7%,transparent); transition:transform .2s,background .2s; }
.t2 .draft .pile { left:50%; bottom:16px; }
.t2 .draft .hintx { font-size:10.5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--acc); text-align:center; line-height:1.2; transition:opacity .2s; }
.t2 .draft .dl { position:absolute; left:50%; bottom:-11px; z-index:2; transform:translateX(-50%); white-space:nowrap; font-family:'Lilita One'; font-size:14px; padding:2px 10px 3px; border-radius:999px; background:var(--plate); color:#fff; }
.t2 .draft .dl small { font-family:Nunito; font-weight:900; font-size:10.5px; opacity:.7; margin-left:4px; }
.t2 .draft.has { border-style:solid; background:color-mix(in srgb,var(--acc) 12%,transparent); }
.t2 .draft.has .hintx { display:none; }
.t2 .draft.bump { transform:translate(-50%,-50%) scale(1.06); }
.t2 .draft.live { border-style:solid; }
.t2 .draft.over { transform:translate(-50%,-50%) scale(1.1); background:color-mix(in srgb,var(--acc) 20%,transparent); border-color:var(--acc); }
.t2 .stage:not(.myturn) .draft { border-color:transparent; background:none; pointer-events:none; }
.t2 .stage:not(.myturn) .draft .hintx { opacity:0; }
.t2 .coach { position:absolute; transform:translate(-50%,-100%); z-index:7; white-space:nowrap; font-weight:900; font-size:10px; padding:2px 7px; border-radius:999px; background:var(--acc); color:#1d0820;
  box-shadow:0 6px 14px rgba(0,0,0,.35); animation:t2coach 1.2s ease-in-out infinite alternate; pointer-events:none; transition:opacity .6s; }
.t2 .coach::after { content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%); border:4px solid transparent; border-top-color:var(--acc); }
.t2 .coach.gone { opacity:0; }
@keyframes t2coach { to { translate:0 -4px; } }

/* cards */
.t2 .pc { --w:44px; width:var(--w); aspect-ratio:5/7; border-radius:calc(var(--w)*.1); position:relative; flex:none;
  background:radial-gradient(ellipse 120% 90% at 30% 10%,#fff 0%,#fbfaf7 45%,#ebe8e0 100%);
  box-shadow:inset 0 1px 0 #fff,0 1px 0 #d9dbe6,0 2px 0 #c0c4d6,0 4px 6px rgba(8,8,40,.4),0 10px 16px rgba(8,8,50,.3); }
.t2 .pc .idx { position:absolute; left:calc(var(--w)*.08); top:calc(var(--w)*.04); display:grid; justify-items:center; line-height:.82; }
.t2 .pc .idx b { font-family:'Barlow Condensed'; font-weight:800; font-size:calc(var(--w)*.44); letter-spacing:-.03em; }
.t2 .pc .idx svg { width:calc(var(--w)*.22); height:calc(var(--w)*.22); margin-top:calc(var(--w)*.03); }
.t2 .pc .big { position:absolute; right:calc(var(--w)*.09); bottom:calc(var(--w)*.09); width:calc(var(--w)*.52); height:calc(var(--w)*.52); }
.t2 .pc svg { overflow:visible; }
.t2 .pc.red { color:#d91f2d; } .t2 .pc.blk { color:#1c1d2e; }
.t2 .pc.back, .shot.back { background:repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 3px,transparent 3px 9px),repeating-linear-gradient(-45deg,rgba(255,255,255,.14) 0 3px,transparent 3px 9px),linear-gradient(#8a52e8,#4b23a8); border:calc(var(--w)*.07) solid #f4f0ff; }
.t2 .pc.xs { --w:22px; } .t2 .pc.sm { --w:32px; } .t2 .pc.md { --w:46px; } .t2 .pc.lg { --w:70px; }
.t2 .board { position:absolute; left:50%; transform:translateX(-50%); display:flex; gap:5px; z-index:2; }
.t2 .slot { --w:46px; width:var(--w); aspect-ratio:5/7; border-radius:5px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.2); background:rgba(0,40,20,.15); }
.t2 .mine { position:absolute; left:50%; bottom:38px; transform:translateX(-50%); display:flex; z-index:5; transition:opacity .3s,filter .3s,transform .3s; }
.t2 .mine .pc:first-child { transform:rotate(-8deg) translate(8px,4px); } .t2 .mine .pc + .pc { transform:rotate(7deg) translate(-8px,2px); }
.t2 .mine .pc.ghost { background:none; box-shadow:inset 0 0 0 2px rgba(255,255,255,.2); }
.t2 .mine.folded { opacity:.4; filter:grayscale(.7); transform:translate(-50%,14px); }
.t2 .mine.turn .pc { box-shadow:0 0 0 3px #46e38f,0 0 22px rgba(70,227,143,.6),0 10px 16px rgba(8,8,50,.3); }
.t2 .meplate { position:absolute; left:50%; bottom:4px; transform:translateX(-50%); z-index:6; display:flex; align-items:center; gap:8px; min-width:190px; padding:4px 10px 4px 4px; border-radius:999px; background:var(--plate); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 6px 14px rgba(0,0,20,.4); }
.t2 .meplate .av { width:34px; height:34px; flex:none; font-size:16px; border-width:2px; }
.t2 .meplate > div:not(.av) { display:grid; line-height:1.1; flex:1; }
.t2 .meplate b { font-size:12px; font-weight:900; opacity:.8; }
.t2 .meplate span.n { font-family:'Lilita One'; font-size:15px; color:#ffd84a; }
.t2 .hp { font-family:'Lilita One'; font-size:12px; padding:2px 9px; border:0; border-radius:999px; background:rgba(255,255,255,.12); color:#fff; white-space:nowrap; display:flex; align-items:center; gap:5px; }
.t2 .hp:empty { display:none; }
.t2 .hp.strong { background:linear-gradient(#ffe25a,#ffa712); color:#5a3500; }
.t2 .hp i { font-style:normal; font-family:Nunito; font-weight:900; font-size:9.5px; padding:0 5px; border-radius:6px; background:rgba(0,0,0,.25); }
.t2 .hp i.weak { color:#ffb3bd; } .t2 .hp i.okay { color:#fff; } .t2 .hp i.strong { color:#9ff0bf; } .t2 .hp i.monster { color:#ffd84a; }

/* banners and endings */
.t2 .ban { position:absolute; left:50%; top:40%; transform:translate(-50%,-50%); z-index:30; pointer-events:none; text-align:center; white-space:nowrap; }
.t2 .ban b { display:block; font-family:'Lilita One'; font-weight:400; font-size:40px; line-height:1; color:#fff; -webkit-text-stroke:6px var(--ink); paint-order:stroke fill; text-shadow:0 5px 0 var(--ink); }
.t2 .ban small { display:inline-block; margin-top:6px; font-weight:900; font-size:15px; padding:3px 12px; border-radius:999px; background:var(--plate); color:#fff; }
.t2 .ban.gold b { color:#ffd84a; } .t2 .ban.hot b { color:#ff8a5c; }
.t2 .pc.hl { translate:0 -7px; box-shadow:0 0 0 3px #ffd84a,0 0 20px 5px rgba(255,200,60,.65),0 10px 16px rgba(8,8,50,.3); z-index:2; }
.t2 .pc.dimc { filter:brightness(.45) saturate(.4); }
.t2 .stage.finale .seat:not(.win) > :not(.sayb):not(.co) { opacity:.3; filter:saturate(.3); }
.t2 .stage.finale #potpile, .t2 .stage.finale #potlbl { opacity:0; }
.t2 .meplate.win { box-shadow:0 0 0 3px #ffd84a,0 0 14px 3px rgba(255,200,60,.5); }
.t2 .meplate.win::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:0 0 30px 9px rgba(255,200,60,.75); opacity:0; animation:t2mewin 1s ease-in-out infinite alternate; }
@keyframes t2mewin { to { opacity:1; } }
.t2 .meplate.lost { box-shadow:0 0 0 3px #ff5a6e,0 0 20px 4px rgba(255,80,100,.45); }
.t2 .fin { position:absolute; left:50%; top:61%; transform:translate(-50%,-50%); z-index:30; display:grid; justify-items:center; gap:2px; pointer-events:none; white-space:nowrap; }
.t2 .fin > b, .t2 .fin .fcard > b { font-family:'Lilita One'; font-weight:400; font-size:42px; line-height:1; -webkit-text-stroke:7px var(--ink); paint-order:stroke fill; text-shadow:0 5px 0 var(--ink); color:#fff; }
.t2 .fin b.win { color:#ffd84a; } .t2 .fin b.lose { color:#ff7a8a; }
.t2 .fin .amt { font-family:'Lilita One'; font-size:34px; line-height:1.05; -webkit-text-stroke:6px var(--ink); paint-order:stroke fill; color:#fff; }
.t2 .fin .amt.up { color:#ffd84a; } .t2 .fin .amt.down { color:#ff7a8a; }
.t2 .fin small { margin-top:4px; font-weight:900; font-size:13.5px; padding:4px 12px; border-radius:999px; background:var(--plate); color:#fff; }
/* a long winner's name wraps onto two lines, smaller, instead of running out of the card */
.t2 .fin .fcard > b { max-width:100%; text-align:center; overflow-wrap:anywhere; font-size:clamp(26px, 9vw, 40px); line-height:1.05; }
/* the next-hand countdown at the foot of the result card: a bar that drains */
.t2 .fin .fnext { position:relative; overflow:hidden; width:100%; height:42px; margin-top:12px; border-radius:14px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; gap:8px; font-weight:900; font-size:13.5px; color:#fff; }
.t2 .fin .fnext i { position:absolute; inset:0; background:var(--acc); opacity:.28; transform-origin:left center; animation:t2drain var(--dur,6s) linear forwards; }
.t2 .fin .fnext span, .t2 .fin .fnext b { position:relative; } .t2 .fin .fnext b { font-family:'Lilita One'; font-weight:400; font-size:22px; color:var(--acc); min-width:14px; }
/* the result card: verdict and amount, a row for the winner and for you (short hand name, two cards), the winning five */
.t2 .fin { top:50%; }
.t2 .fcard { display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:4px; white-space:normal; width:min(330px, 88vw); padding:16px 12px 14px; border-radius:22px; background:rgba(22,5,22,.97); box-shadow:0 0 0 2px rgba(255,255,255,.12), 0 18px 40px rgba(0,0,0,.45); }
.t2 .fcard.won { box-shadow:0 0 0 2.5px #ffd84a, 0 18px 40px rgba(0,0,0,.45); } .t2 .fcard.lost { box-shadow:0 0 0 2.5px #ff7a8a, 0 18px 40px rgba(0,0,0,.45); }
.t2 .fin .frows { display:grid; gap:6px; width:100%; margin-top:8px; }
.t2 .fin .frw { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:10px; padding:6px 8px; border-radius:14px; background:rgba(255,255,255,.06); text-align:left; }
.t2 .fin .frw.won { background:rgba(255,216,74,.13); box-shadow:inset 0 0 0 2px #ffd84a; }
.t2 .fin .fav { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; font:900 14px Nunito,sans-serif; color:#fff; background:linear-gradient(var(--a1),var(--a2)); }
.t2 .fin .fnm { display:grid; min-width:0; }
.t2 .fin .fnm b { font:900 14px/1.2 Nunito,sans-serif; -webkit-text-stroke:0; text-shadow:none; color:#fff; overflow:hidden; text-overflow:ellipsis; }
.t2 .fin .fnm em { font-style:normal; font-weight:800; font-size:13px; color:rgba(255,255,255,.75); } .t2 .fin .frw.won .fnm em { color:#ffd84a; }
.t2 .fin .fcs, .t2 .fin .ffive { display:flex; gap:4px; } .t2 .fin .ffive { margin-top:10px; }
.t2 .fin .fcs .pc.ex { --w:36px; } .t2 .fin .ffive .pc.ex { --w:44px; }
.t2 .fin .frw { padding:8px 10px; }
.t2 .fin .pots { display:grid; gap:2px; justify-items:center; font-weight:800; font-size:12px; }
.t2 .fin .pots span { padding:2px 10px; border-radius:999px; background:var(--plate); color:#fff; }
.fxl { position:fixed; z-index:70; pointer-events:none; }
.fxl.spk { width:12px; height:12px; clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); }
.fxl.conf { width:8px; height:13px; border-radius:2px; }
.fxl.flt { font-family:'Lilita One'; font-size:24px; transform:translateX(-50%); -webkit-text-stroke:5px #1f0820; paint-order:stroke fill; }
.t2.shake .stage { animation:t2shake .35s; }
@keyframes t2shake { 25% { translate:-4px 1px; } 50% { translate:4px -1px; } 75% { translate:-2px 0; } }

/* ================= the dealing machine ================= */
@property --a { syntax:'<angle>'; inherits:false; initial-value:180deg; }
@property --sweep { syntax:'<angle>'; inherits:false; initial-value:0deg; }
.t2 .rig { position:absolute; width:0; height:0; z-index:1; }
.t2 .rig.up { z-index:8; }
.t2 .rig .seam { position:absolute; left:-48px; top:-48px; width:96px; height:96px; border-radius:50%; box-shadow:0 0 0 1.5px rgba(0,0,0,.18),inset 0 0 0 1.5px rgba(255,255,255,.06);
  background:repeating-conic-gradient(from 0deg,rgba(0,0,0,.14) 0 .6deg,transparent .6deg 60deg); }
.t2 .rig .ring { position:absolute; left:-54px; top:-54px; width:108px; height:108px; border-radius:50%; border:2.5px solid var(--trim); opacity:0;
  -webkit-mask:conic-gradient(#000 var(--sweep),transparent 0); mask:conic-gradient(#000 var(--sweep),transparent 0); filter:drop-shadow(0 0 6px var(--trim)); }
.t2 .rig .pit { position:absolute; left:-46px; top:-46px; width:92px; height:92px; border-radius:50%; transform:scale(.2); opacity:0;
  background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--acc) 70%,#fff) 0%,color-mix(in srgb,var(--acc) 40%,#140a18) 32%,#07040b 70%); box-shadow:inset 0 8px 18px rgba(0,0,0,.85),0 0 0 3px rgba(0,0,0,.35); }
.t2 .rig .iris { position:absolute; left:-46px; top:-46px; width:92px; height:92px; border-radius:50%; overflow:hidden; }
.t2 .rig .iris i { position:absolute; inset:0; transform:rotate(calc(var(--k) * 60deg)); clip-path:polygon(50% 50%,50% -2%,96% 22%);
  background:radial-gradient(ellipse 140% 110% at 50% 100%,var(--felt1),var(--felt2) 80%); box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); }
.t2 .rig .beam { position:absolute; left:-44px; bottom:0; width:88px; height:170px; opacity:0; transform-origin:50% 100%; transform:scaleY(.2); pointer-events:none;
  background:linear-gradient(to top,color-mix(in srgb,var(--acc) 55%,transparent),transparent); clip-path:polygon(18% 100%,82% 100%,100% 0,0 0); filter:blur(2px); }
.t2 .rig .mote { position:absolute; width:4px; height:4px; border-radius:50%; background:#fff; opacity:0; pointer-events:none; box-shadow:0 0 6px var(--acc); }
.t2 .rig .shadow { position:absolute; left:-36px; top:20px; width:72px; height:18px; border-radius:50%; background:rgba(0,0,0,.4); filter:blur(6px); opacity:0; }
.t2 .dealer { position:absolute; left:0; top:0; width:62px; height:62px; transform:translate(-50%,-50%); opacity:0; }
.t2 .dealer .base { position:absolute; inset:-6px; border-radius:50%; background:radial-gradient(circle at 50% 40%,#3b3550,#16141f 70%); box-shadow:0 0 0 2.5px var(--trim),0 8px 16px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.12); }
.t2 .dealer .head { position:absolute; inset:0; transform:rotate(var(--a)); transition:--a var(--rt,.3s) cubic-bezier(.45,.05,.25,1); }
.t2 .dealer .body { position:absolute; left:9px; right:9px; top:6px; bottom:4px; border-radius:12px 12px 14px 14px; background:linear-gradient(160deg,#4a4462,#221f30); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.25),inset 0 -3px 0 rgba(0,0,0,.35),0 3px 6px rgba(0,0,0,.4); }
.t2 .dealer .deck { position:absolute; left:14px; right:14px; top:15px; height:22px; }
.t2 .dealer .deck i { position:absolute; top:0; bottom:0; width:52%; border-radius:4px; background:repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 2px,transparent 2px 5px),linear-gradient(#8a52e8,#4b23a8); box-shadow:0 2px 0 #2e1470,0 4px 0 #24105a; }
.t2 .dealer .deck i:first-child { left:0; } .t2 .dealer .deck i:last-child { right:0; }
.t2 .dealer.shuffling .deck i:first-child { animation:t2riffL .62s ease-in-out 2; }
.t2 .dealer.shuffling .deck i:last-child { animation:t2riffR .62s ease-in-out 2; }
@keyframes t2riffL { 30% { transform:translate(-5px,-2px) rotate(-14deg); } 60% { transform:translate(-2px,0) rotate(-4deg); } }
@keyframes t2riffR { 30% { transform:translate(5px,-2px) rotate(14deg); } 60% { transform:translate(2px,0) rotate(4deg); } }
.t2 .dealer .nozzle { position:absolute; left:50%; top:-2px; width:26px; height:10px; transform:translateX(-50%); border-radius:5px 5px 2px 2px; background:#15131d; box-shadow:inset 0 -2px 0 rgba(255,255,255,.08); }
.t2 .dealer .nozzle::after { content:""; position:absolute; left:4px; right:4px; top:3px; height:3px; border-radius:2px; background:var(--acc); box-shadow:0 0 8px var(--acc); opacity:.55; transition:opacity .1s; }
.t2 .dealer.firing .nozzle::after { opacity:1; }
.t2 .dealer .led { position:absolute; left:50%; bottom:9px; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:#46e38f; box-shadow:0 0 6px #46e38f; }
.t2 .burn { position:absolute; left:56px; top:0; width:46px; height:30px; border-radius:8px; background:rgba(0,0,0,.28); box-shadow:inset 0 2px 6px rgba(0,0,0,.45); transform:translate(-50%,-50%) scale(.4); opacity:0; }
.t2 .burn b { position:absolute; left:50%; top:calc(100% + 2px); transform:translateX(-50%); font-size:9px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; opacity:.6; color:#fff; }
.t2 .burn .pc { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(90deg); }
.t2 .burn.flash { box-shadow:inset 0 2px 6px rgba(0,0,0,.45),0 0 0 2px var(--acc); }
.t2 .bubble { position:absolute; left:0; top:-48px; transform:translate(-50%,-100%); z-index:9; white-space:nowrap; font-family:'Lilita One'; font-size:17px; padding:5px 13px 6px; border-radius:14px; background:#fff; color:#1d0820; box-shadow:0 8px 18px rgba(0,0,0,.4); pointer-events:none; }
.t2 .bubble::after { content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%); border:7px solid transparent; border-top-color:#fff; }
.shot { position:fixed; left:0; top:0; z-index:60; pointer-events:none; }
.shot.pc { --w:44px; width:var(--w); aspect-ratio:5/7; border-radius:calc(var(--w)*.1); box-shadow:0 4px 8px rgba(8,8,40,.4); }
.shot.xs { --w:22px; } .shot.md { --w:46px; } .shot.lg { --w:70px; }

/* ================= control panel ================= */
.t2 .ctl { position:relative; z-index:20; border-radius:28px 28px 0 0; padding:14px max(14px,calc((100% - 500px)/2)) calc(16px + var(--sab)); display:grid; gap:10px; align-content:space-between;
  grid-template-rows:auto auto auto; background:linear-gradient(var(--sh1),var(--sh2) 40%,var(--sh3)); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.35),0 -12px 30px rgba(0,0,20,.35); }
.t2 .hdr { display:flex; align-items:center; gap:8px; min-height:48px; }
.t2 .ctx { flex:1; min-width:0; display:grid; gap:2px; }
.t2 .say { font-weight:800; font-size:15px; line-height:1.25; }
.t2 .say b, .t2 .ctx small b, .t2 .res span b { color:var(--acc); }
.t2 .say .hot { color:#ff8a5c; font-weight:900; }
.t2 .ctx small { font-weight:800; font-size:12.5px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.t2 .ctx small b { font-family:'Lilita One'; font-weight:400; font-size:14px; }
.t2 .dots i { display:inline-block; width:6px; height:6px; margin-left:3px; border-radius:50%; background:var(--tx); animation:t2dot 1s infinite; }
.t2 .dots i:nth-child(2) { animation-delay:.15s; } .t2 .dots i:nth-child(3) { animation-delay:.3s; }
@keyframes t2dot { 50% { opacity:.25; } }
.t2 .dpill { display:flex; align-items:center; gap:6px; flex:none; padding:6px 6px 6px 12px; border:0; border-radius:999px; font-weight:900; font-size:12.5px; color:var(--btnTx); background:var(--btn); box-shadow:inset 0 0 0 2px var(--acc),0 3px 0 var(--btnLip); animation:t2pop .25s ease-out; }
.t2 .dpill b { font-family:'Lilita One'; font-weight:400; font-size:17px; color:var(--acc); }
.t2 .dpill i { font-style:normal; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:12px; background:color-mix(in srgb,var(--acc) 22%,transparent); }
@keyframes t2pop { from { transform:scale(.7); opacity:0; } }
.t2 .xch { flex:none; width:36px; height:36px; border:0; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:17px; color:var(--btnTx); background:var(--btn); box-shadow:inset 0 0 0 1.5px var(--tline),0 3px 0 var(--btnLip); }
.t2 .tmr { --p:360deg; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex:none; background:conic-gradient(var(--acc) 0 var(--p),rgba(255,255,255,.18) 0); }
.t2 .tmr span { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--sh3); font-family:'Lilita One'; font-size:17px; }
.t2 .tmr.hot { background:conic-gradient(#ff5a6e 0 var(--p),rgba(255,255,255,.18) 0); animation:t2beat .5s ease-in-out infinite alternate; }
@keyframes t2beat { to { transform:scale(1.1); } }
.t2 .quick { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.t2 .quick.off { opacity:.35; pointer-events:none; }
.t2 .three { display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:9px; }
.t2 .guard { pointer-events:none; opacity:.55; }
.t2 .b { position:relative; display:grid; place-content:center; text-align:center; border:0; border-radius:18px; transition:transform .08s,box-shadow .08s; line-height:1.05; color:var(--btnTx); }
.t2 .b:active { transform:translateY(4px); }
.t2 .b[disabled] { opacity:.45; pointer-events:none; }
.t2 .big { height:52px; font-family:'Lilita One'; font-size:19px; padding:4px; }
.t2 .big small { display:block; font-family:Nunito; font-weight:800; font-size:11.5px; margin-top:1px; opacity:.85; }
.t2 .sec { background:var(--btn); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3),0 4px 0 var(--btnLip); }
.t2 .sec.foldb { color:var(--foldTx); } .t2 .sec.rz { color:var(--raiseTx); }
.t2 .foldb.soft { opacity:.55; }
.t2 .foldb.arm { opacity:1; box-shadow:inset 0 0 0 2px var(--foldTx),0 4px 0 var(--btnLip); }
.t2 .pri { --sc:#a85200; color:#fff; background:linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,0) 52%),linear-gradient(var(--gold1),var(--gold2)); box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 6px 0 var(--goldlip),0 12px 22px rgba(255,150,0,.35); overflow:hidden; }
.t2 .pri small { color:#7a3a00; opacity:1; }
.t2 .pri::after { content:""; position:absolute; top:-30%; bottom:-30%; width:26%; left:-40%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent); transform:skewX(-20deg); animation:t2shine 3s ease-in-out infinite; }
/* the shine slides with transform (the GPU moves it); 635% of its own 26% width carries it from -40% to 125% across */
@keyframes t2shine { 0%,60% { transform:translateX(0) skewX(-20deg); } 90%,100% { transform:translateX(635%) skewX(-20deg); } }
.t2 .fire { --sc:#8e0f2c; color:#fff; background:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,0) 52%),linear-gradient(#ff9d2e,#ff3d4f); box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 6px 0 #9e0f30,0 0 26px 3px rgba(255,80,50,.55); overflow:hidden; }
.t2 .three .go .st { font-size:17px; white-space:nowrap; }
.t2 .three .go small { font-size:10.5px; white-space:nowrap; }
.t2 .q { min-height:42px; line-height:1.1; }
.t2 .q b { font-family:'Lilita One'; font-weight:400; font-size:15px; }
.t2 .q small { display:block; font-weight:800; font-size:11.5px; opacity:.7; }
.t2 .q.on { background:var(--tx); color:var(--sh1); }
.t2 .pre { height:52px; display:flex; align-items:center; justify-content:center; gap:9px; border:0; border-radius:16px; font-weight:900; font-size:14px; color:var(--btnTx); background:transparent; box-shadow:inset 0 0 0 2px var(--tline); }
.t2 .pre i { width:18px; height:18px; flex:none; border-radius:5px; box-shadow:inset 0 0 0 2px var(--tline); }
.t2 .pre.on { box-shadow:inset 0 0 0 2px #46e38f; background:rgba(70,227,143,.14); }
.t2 .pre.on i { background:#46e38f; box-shadow:inset 0 0 0 3px var(--sh3),0 0 0 2px #46e38f; }
.t2 .ghost { height:52px; border-radius:18px; display:grid; place-content:center; font-family:'Lilita One'; font-size:19px; color:var(--ghost); box-shadow:inset 0 0 0 2px var(--tline); }
.t2 .res { display:flex; align-items:center; gap:12px; border-radius:18px; padding:6px 12px; background:var(--well); box-shadow:inset 0 3px 8px rgba(0,0,20,.25); min-height:48px; }
.t2 .res > b { flex:none; font-family:'Lilita One'; font-weight:400; font-size:28px; line-height:1; -webkit-text-stroke:5px var(--ink); paint-order:stroke fill; color:#fff; }
.t2 .res.up > b { color:#ffd84a; } .t2 .res.down > b { color:#ff7a8a; }
.t2 .res span { font-weight:800; font-size:13.5px; line-height:1.3; opacity:.9; }
.t2 .three .next { position:relative; overflow:hidden; height:52px; border-radius:18px; background:var(--btn); color:var(--btnTx); box-shadow:inset 0 0 0 2px var(--acc); display:flex; align-items:center; justify-content:center; gap:8px; font-weight:900; font-size:13px; }
.t2 .three .next i { position:absolute; inset:0; background:var(--acc); opacity:.28; transform-origin:left center; animation:t2drain var(--dur,6s) linear forwards; }
.t2 .three .next span, .t2 .three .next b { position:relative; }
.t2 .three .next b { font-family:'Lilita One'; font-weight:400; font-size:22px; color:var(--acc); min-width:14px; }
@keyframes t2drain { to { transform:scaleX(0); } }
.t2 .wide1 { grid-column:1 / -1; }
.t2 .msg { grid-column:1 / -1; display:grid; place-items:center; text-align:center; font-weight:800; font-size:14px; min-height:52px; border-radius:18px; box-shadow:inset 0 0 0 2px var(--tline); padding:6px 10px; }
.t2 .three.one { grid-template-columns:1fr; }
.t2 .three.one .big { height:52px; }
.note { position:fixed; left:50%; bottom:calc(var(--ctl, 122px) + 14px); transform:translate(-50%,10px); opacity:0; z-index:150; padding:9px 16px; border-radius:999px; font-weight:900; font-size:14px; color:#fff; background:rgba(10,10,30,.9); box-shadow:0 8px 20px rgba(0,0,0,.35); transition:opacity .2s,transform .2s; pointer-events:none; white-space:nowrap; font-family:Nunito, var(--f-body); }
.note.on { opacity:1; transform:translate(-50%,0); }

/* ================= modals: confirm, change chips, hand rankings ================= */
.pg .modal { position:fixed; inset:0; z-index:120; display:grid; place-items:end center; padding:0 12px calc(16px + var(--sab)); background:var(--scrim); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.pg .mcard { width:min(440px,100%); max-height:86dvh; overflow-y:auto; border-radius:24px; padding:18px 16px 16px; display:grid; gap:12px; color:var(--tx); background:linear-gradient(var(--sh1),var(--sh3)); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3),0 20px 50px rgba(0,0,20,.5); animation:t2up .22s ease-out; }
@keyframes t2up { from { transform:translateY(30px); opacity:0; } }
.pg .mcard h3 { margin:0; font-family:'Lilita One'; font-weight:400; font-size:24px; }
.pg .mcard p { margin:0; font-weight:800; font-size:14px; opacity:.85; line-height:1.35; }
.pg .two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pg .danger { color:#fff; background:linear-gradient(#ff6b7d,#d92a4a); box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 5px 0 #8e1530; }
.t2 .xlist { display:grid; gap:8px; }
.t2 .xrow { display:grid; grid-template-columns:1fr auto 1fr auto; align-items:center; gap:8px; padding:6px 8px; border-radius:14px; background:var(--well); }
.t2 .xrow > span { display:flex; align-items:center; gap:4px; min-width:0; }
.t2 .xrow b { font-weight:900; font-size:12.5px; white-space:nowrap; }
.t2 .xrow i { font-style:normal; font-weight:900; opacity:.6; }
.t2 .xrow .b { height:34px; padding:0 10px; font-weight:900; font-size:12.5px; border-radius:12px; }
.t2 .cp { position:relative; display:inline-block; width:24px; height:20px; flex:none; }
.t2 .cp img { position:absolute; left:0; width:24px; }
/* the ten hands, best first; the one you're holding lights up. The cards that make the hand are bright, the rest fade back. */
.t2 .ranks { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.t2 .ranks li { display:grid; grid-template-columns:18px minmax(0,1fr) auto; align-items:center; gap:8px; padding:6px 8px 6px 6px; border-radius:14px; background:var(--well); }
.t2 .ranks .no { font-family:'Lilita One'; font-size:16px; opacity:.55; text-align:center; }
.t2 .ranks .nm { display:grid; gap:1px; min-width:0; }
.t2 .ranks .rk { font-weight:900; font-size:14.5px; line-height:1.15; white-space:nowrap; }
.t2 .ranks small { font-weight:800; font-size:11px; opacity:.72; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.t2 .ranks em { justify-self:start; margin-top:3px; font-style:normal; font-weight:900; font-size:10.5px; padding:1px 8px; border-radius:999px; background:var(--acc); color:#1d0820; }
.t2 .ranks .ex { display:flex; gap:3px; }
.t2 .pc.ex { --w:31px; box-shadow:0 1px 0 #c0c4d6,0 2px 4px rgba(0,0,0,.35); }
.t2 .pc.ex.off { opacity:.38; filter:saturate(.2); box-shadow:none; }
.t2 .ranks li.you { background:color-mix(in srgb,var(--acc) 18%,transparent); box-shadow:inset 0 0 0 2.5px var(--acc); }
@media (max-width: 380px) { .t2 .pc.ex { --w:26px; } .t2 .ranks .ex { gap:2px; } .t2 .ranks li { gap:6px; } }
.pg .swatches { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pg .sw { display:grid; gap:8px; padding:8px; border:0; border-radius:16px; text-align:left; font-weight:900; font-size:13.5px; color:var(--text); background:transparent; box-shadow:inset 0 0 0 2px var(--line); }
.pg .sw.on { box-shadow:inset 0 0 0 3px var(--acc); }
.pg .sw .pv { height:52px; border-radius:12px; display:grid; place-items:center; position:relative; overflow:hidden; }
.pg .sw .pv i { width:62%; height:62%; border-radius:999px; box-shadow:0 0 0 4px var(--r),0 0 0 5.5px var(--t); }
.pg .sw .pv b { position:absolute; left:0; right:0; bottom:0; height:14px; }
.pg .sw small { display:block; font-weight:800; font-size:11.5px; opacity:.7; }
.t2 .sheet { color:var(--text); }
.t2 .overlay { background:var(--scrim); display:flex; flex-direction:column; align-items:center; overflow-y:auto; }
.t2 .overlay > .ov-card { margin:auto 0; flex:none; }   /* centred, and scrolls instead of clipping on a short screen */

/* ================= other screens ================= */
/* phones held sideways: table on the left, controls in a column on the right */
/* phones on their side: everything stays stacked under the table (a side column needs more polish than it's worth yet),
   using the width instead: bet sizes and timer beside Fold and Check / Call in one row */
@media (orientation: landscape) and (max-height: 560px) {
  .t2 { --ctl:58px; }
  .t2-top { padding-top:calc(4px + var(--sat)); padding-bottom:2px; }
  .t2 .ctl { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-rows:auto; align-items:center; align-content:center; gap:10px; border-radius:18px 18px 0 0;
    padding:6px max(12px,var(--sar)) calc(6px + var(--sab)) max(12px,var(--sal)); }
  .t2 .acts .big, .t2 .acts .pre, .t2 .acts .ghost, .t2 .acts .next, .t2 .acts .msg { height:44px; min-height:44px; }
  .t2 .acts .big small { display:none; }
  .t2 .quick { min-height:44px; } .t2 .quick .q { min-height:40px; }
}

/* ================= table talk: reactions and chat ================= */
.t2 .talkbtn { position:absolute; left:calc(50% + 113px); top:95.5%; transform:translate(-50%,-50%); z-index:7; width:38px; height:38px; border:0; border-radius:50%; display:grid; place-items:center;
  color:#fff; background:var(--plate); box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),0 4px 10px rgba(0,0,0,.35); }
.t2 .talkbtn:active { transform:translate(-50%,-50%) scale(.92); }
.t2 .talkbtn i { position:absolute; right:-4px; top:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; font-style:normal; font-weight:900; font-size:10.5px; line-height:18px; text-align:center; background:#ff5a6e; color:#fff; box-shadow:0 0 0 2px var(--bgB); }
.t2 .sayb { position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%); z-index:22; width:max-content; max-width:160px; padding:6px 11px 7px; border-radius:14px; font-weight:800; font-size:13px; line-height:1.25;
  color:#1d0820; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.4); pointer-events:none; text-align:center; overflow-wrap:anywhere; }
.t2 .sayb::after { content:""; position:absolute; left:50%; bottom:-5px; width:10px; height:10px; background:#fff; transform:translateX(-50%) rotate(45deg); border-radius:2px; }
.t2 .seat.top .sayb { bottom:auto; top:calc(100% + 6px); }
.t2 .seat.top .sayb::after { bottom:auto; top:-5px; }
.t2 .seat.edge-l .sayb { left:-4px; translate:50% 0; } .t2 .seat.edge-r .sayb { left:auto; right:-4px; translate:-50% 0; }
.fxl.emo { font-size:36px; line-height:1; filter:drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.fxl.emo.small { font-size:20px; }
.pg .talkhead { display:flex; align-items:center; justify-content:space-between; }
.pg .xbtn { width:34px; height:34px; border:0; border-radius:50%; font-weight:900; color:var(--btnTx); background:var(--btn); }
.t2 .reacts { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; }
.t2 .reacts button { height:44px; border:0; border-radius:14px; font-size:24px; background:var(--well); }
.t2 .reacts button:active { transform:scale(.88); }
.t2 .phrases { display:flex; flex-wrap:wrap; gap:6px; }
.t2 .phrases button { border:0; padding:7px 11px; border-radius:999px; font-weight:900; font-size:13px; color:var(--btnTx); background:var(--btn); box-shadow:inset 0 0 0 1.5px var(--tline); }
.t2 .talklog { list-style:none; margin:0; padding:8px; display:grid; gap:6px; max-height:30dvh; min-height:72px; overflow-y:auto; border-radius:14px; background:var(--well); align-content:start; -webkit-user-select:text; user-select:text; }
.t2 .talklog li { font-weight:700; font-size:14px; line-height:1.3; justify-self:start; max-width:85%; padding:5px 10px 6px; border-radius:12px; background:rgba(255,255,255,.1); }
.t2 .talklog li b { display:block; font-size:11px; font-weight:900; opacity:.7; }
.t2 .talklog li.me { justify-self:end; background:color-mix(in srgb,var(--acc) 22%,transparent); }
.t2 .talklog li.none { justify-self:center; background:none; opacity:.6; }
.t2 .talkin { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.t2 .talkin input { min-width:0; height:46px; padding:0 14px; border-radius:14px; border:2px solid var(--tline); background:var(--well); color:var(--tx); font:800 15px Nunito, var(--f-body); -webkit-user-select:text; user-select:text; }
.t2 .talkin input:focus { outline:none; border-color:var(--acc); }
.t2 .talkin .b { height:46px; padding:0 16px; font-family:'Lilita One'; font-size:17px; }

/* ================= a calmer felt ================= */
/* the hatch is only drawn while the machine is working */
.t2 .rig .seam { opacity:0; transition:opacity .5s; }
.t2 .rig .iris { opacity:0; transition:opacity .5s; }
.t2 .rig.up .seam, .t2 .rig.up .iris { opacity:1; }
/* your spot has no outline or words of its own: it shows while you drag a chip, and softly once chips are in it */
.t2 .stage.myturn .draft, .t2 .draft { border-color:transparent; background:none; }
.t2 .draft.live { border-color:color-mix(in srgb,var(--acc) 55%,transparent); border-style:dashed; }
.t2 .draft.over { border-color:var(--acc); background:color-mix(in srgb,var(--acc) 16%,transparent); }
.t2 .draft.has { background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 14%,transparent),transparent); }
/* stack labels are plain text, not pills */
.t2 .mystk .v { background:none; padding:0; font-size:12px; text-shadow:0 1px 2px rgba(0,0,0,.65),0 0 6px rgba(0,0,0,.35); }

/* ================= home, join and lobby: the same look as the table ================= */
.pg { --f-display:'Lilita One', var(--f-body); --f-body:Nunito, system-ui, sans-serif; font-family:var(--f-body); color:var(--tx); min-height:100dvh;
  background:radial-gradient(ellipse 90% 55% at 50% 30%,var(--bgA) 0%,var(--bgB) 45%,var(--bgC) 100%) fixed; }
html:has(.pg), body:has(.pg) { background:var(--bgC, #260a27); }
.pg .page { gap:14px; }
.pg .hero { gap:6px; padding-block:14px 6px; }
.pg .hero h1, .pg .lobby-head h1 { font-family:'Lilita One'; font-size:clamp(38px,10vw,50px); color:#fff; -webkit-text-stroke:7px var(--ink); paint-order:stroke fill; text-shadow:0 5px 0 var(--ink); letter-spacing:.01em; }
.pg .hero p, .pg .lobby-head p { color:var(--tx); opacity:.78; font-weight:800; }
.pg .hero h1.wm { -webkit-text-stroke:0; text-shadow:none; line-height:0; margin:6px 0 4px; }
.pg .hero h1.wm img { width:min(320px,80vw); height:auto; filter:drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
.pg .hero .chiplogo { position:relative; width:108px; height:64px; margin-bottom:2px; }
.pg .hero .chiplogo img { position:absolute; width:52px; filter:drop-shadow(0 6px 6px rgba(0,0,0,.35)); }
.pg .page .card { border:0; border-radius:24px; padding:16px; gap:14px; background:linear-gradient(var(--sh1),var(--sh3)); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.28),0 14px 30px rgba(0,0,20,.3); }
.pg .page .card h2 { font-family:'Lilita One'; font-size:22px; }
.pg .page .card h2 .muted { font-family:Nunito; font-weight:800; font-size:13px; }
.pg .field > legend, .pg .lab { font-weight:900; font-size:11.5px; letter-spacing:.09em; color:var(--tx); opacity:.72; }
.pg .page input#nm, .pg .page .code-in, .pg .page .field input:not([type]) { border:2px solid var(--tline); background:var(--well); color:var(--tx); border-radius:14px; font-weight:800; }
.pg .page input#nm:focus, .pg .page .code-in:focus { outline:none; border-color:var(--acc); }
.pg .page .code-in { font-family:'Lilita One'; font-size:24px; letter-spacing:.35em; }
.pg .page .code-in::placeholder, .pg .page input#nm::placeholder { color:var(--tx); opacity:.35; }
.pg .opt span { border:0; border-radius:14px; background:var(--btn); color:var(--btnTx); font-weight:900; box-shadow:inset 0 1.5px 0 rgba(255,255,255,.22),0 3px 0 var(--btnLip); transition:transform .08s; }
.pg .opt span small { color:var(--btnTx); opacity:.7; font-weight:800; }
.pg .opt input:checked + span { background:color-mix(in srgb,var(--acc) 20%,transparent); color:var(--acc); box-shadow:inset 0 0 0 2.5px var(--acc),0 3px 0 var(--btnLip); }
.pg .opt input:checked + span small { color:var(--tx); opacity:.85; }
.pg .opt span:active { transform:translateY(2px); }
.pg .stepper { border:0; border-radius:14px; background:var(--well); box-shadow:inset 0 0 0 2px var(--tline); }
.pg .stepper button { background:transparent; color:var(--tx); font-weight:900; }
.pg .stepper b { font-family:'Lilita One'; font-weight:400; font-size:22px; }
.pg .hint { color:var(--tx); opacity:.72; font-weight:700; }
.pg .btn { border:0; border-radius:16px; font-weight:900; color:var(--btnTx); background:var(--btn); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.25),0 4px 0 var(--btnLip); transition:transform .08s; }
.pg .btn:active:not(:disabled) { transform:translateY(3px); }
.pg .btn.primary { position:relative; overflow:hidden; color:#fff; font-family:'Lilita One'; font-weight:400; font-size:18px; letter-spacing:.01em; -webkit-text-stroke:4px #a85200; paint-order:stroke fill;
  background:linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,0) 52%),linear-gradient(var(--gold1),var(--gold2)); box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 6px 0 var(--goldlip),0 12px 22px rgba(255,150,0,.3); }
.pg .btn.primary.big { font-size:22px; min-height:58px; }
.pg .btn.danger { color:var(--foldTx); }
.pg .link-btn { color:var(--tx); opacity:.7; font-weight:800; }
.pg .page .msg { border:0; border-radius:14px; background:rgba(255,90,110,.18); color:var(--tx); box-shadow:inset 0 0 0 2px #ff5a6e; font-weight:800; }
.pg .lobby-head .eyebrow { color:var(--tx); opacity:.7; font-weight:900; }
.pg .lobby-head .code { font-family:'Lilita One' !important; font-weight:400 !important; letter-spacing:.14em; color:var(--acc); }
.pg .link { border:2px dashed var(--tline); background:var(--well); color:var(--tx); font-weight:700; }
.pg .qr { border-radius:14px; box-shadow:0 6px 16px rgba(0,0,0,.3); }
.pg .srow { border-radius:16px; background:var(--well); min-height:52px; }
.pg .srow.empty { border:2px dashed var(--tline); background:transparent; color:var(--tx); opacity:.6; font-weight:800; }
.pg .sname { font-weight:900; }
.pg .sname em { color:var(--tx); opacity:.6; }
.pg .ava { width:38px; height:38px; font-family:'Lilita One'; font-weight:400; font-size:18px; color:#fff; -webkit-text-stroke:3px rgba(0,0,0,.28); paint-order:stroke fill;
  border:2.5px solid #fff; background:radial-gradient(circle at 40% 35%,hsl(var(--hue) 85% 78%),hsl(var(--hue) 58% 42%)); box-shadow:0 3px 0 rgba(0,0,30,.35); }
.pg .ava.sm { width:34px; height:34px; font-size:16px; }
.pg .badge { background:color-mix(in srgb,var(--acc) 22%,transparent); color:var(--acc); font-weight:900; }
.pg .badge.dim { background:var(--btn); color:var(--tx); opacity:.7; }
.pg .lvl { border:0; border-radius:10px; background:var(--btn); color:var(--btnTx); font-weight:800; box-shadow:inset 0 0 0 1.5px var(--tline); }
.pg .x { border:0; background:var(--btn); color:var(--tx); }
.pg .botbtns small { color:var(--btnTx); opacity:.72; font-weight:700; }
.pg .waitmsg { color:var(--tx); opacity:.75; font-weight:800; }
.pg .sheet { background:linear-gradient(var(--sh1),var(--sh3)); border:0; }
.pg .ov-card { background:linear-gradient(var(--sh1),var(--sh3)); border:0; box-shadow:0 20px 50px rgba(0,0,20,.5); }
.pg .ov-card h2, .pg .sh-head h2 { font-family:'Lilita One'; }
.pg .standings li { background:var(--well); }
.pg .standings li.me { outline:2.5px solid var(--acc); }
.t2 .rbest { display:grid; gap:2px; padding:10px 8px 12px; border-radius:14px; background:radial-gradient(ellipse at 50% 40%,var(--felt1),var(--felt2) 55%,var(--felt3)); color:#fff; }
.t2 .rbest small { font-size:12px; opacity:.85; } .t2 .rbest em { font-style:normal; font-family:'Lilita One', var(--f-body); font-size:19px; }
.t2 .rcards { display:flex; justify-content:center; gap:12px; margin-top:12px; } .t2 .rcards span { display:flex; gap:3px; }
.t2 .rbest .pc.ex { --w:34px; } .t2 .rbest .pc.hl { translate:0 -5px; box-shadow:0 0 0 2.5px #ffd84a,0 0 14px 3px rgba(255,200,60,.7); }
.t2 .rcards i { display:block; font-style:normal; font-size:11px; opacity:.8; margin-top:6px; }
@media (max-width: 380px) { .t2 .rbest .pc.ex { --w:29px; } .t2 .rcards { gap:8px; } }
.t2 .rshare { display:inline-flex; align-items:center; justify-content:center; gap:8px; } .t2 .rshare svg { width:18px; height:18px; }
.toast { font-family:Nunito, var(--f-body); font-weight:900; }

/* ---------- home: three ways to play, then the details ---------- */
.pg .plays { display:grid; gap:10px; }
.pg .play { --c1:#ffe25a; --c2:#ffa712; --lip:#c96400; display:grid; grid-template-columns:56px minmax(0,1fr); align-items:center; gap:14px; width:100%; padding:14px 16px 14px 14px; border:0; border-radius:22px; text-align:left; color:var(--tx);
  background:linear-gradient(var(--sh1),var(--sh3)); box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c2) 55%,transparent),inset 0 1.5px 0 rgba(255,255,255,.28),0 5px 0 rgba(0,0,20,.35),0 14px 26px rgba(0,0,20,.28); transition:transform .08s; }
.pg .play:active:not(:disabled) { transform:translateY(3px); }
.pg .play:disabled { opacity:.55; }
.pg .play i { width:56px; height:56px; border-radius:18px; display:grid; place-items:center; font-style:normal; font-size:28px;
  background:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,0) 55%),linear-gradient(var(--c1),var(--c2)); box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 4px 0 var(--lip); }
.pg .play span { display:grid; gap:3px; min-width:0; }
.pg .play b { font-family:'Lilita One'; font-weight:400; font-size:22px; line-height:1.05; }
.pg .play small { font-weight:800; font-size:13px; line-height:1.3; opacity:.78; }
.pg .play.bots { --c1:#7ef0c4; --c2:#1fb488; --lip:#0c7a5a; }
.pg .play.friends { --c1:#ffb3e0; --c2:#d84aa0; --lip:#8e1f66; }
/* one big Play now for strangers, then the two other ways to play side by side */
.pg .hero p.sub { font-size:14px; opacity:.6; max-width:30ch; }
.pg .go { display:grid; gap:10px; justify-items:center; }
.pg .btn.primary.playnow { font-size:30px; min-height:72px; border-radius:22px; -webkit-text-stroke:5px #a85200; }
.pg .gonote { margin:-2px 0 0; font-weight:800; font-size:14px; opacity:.75; }
.pg .plays.duo { grid-template-columns:1fr 1fr; margin-top:6px; }
.pg .duo .play { grid-template-columns:1fr; align-content:start; justify-items:start; gap:10px; padding:14px; }
.pg .duo .play i { width:44px; height:44px; border-radius:14px; font-size:22px; }
.pg .duo .play b { font-size:19px; }
.pg .duo .play small { font-size:12.5px; }
.pg .joincode { display:grid; }
.pg .joincode .row { flex-wrap:nowrap; }
.pg .joincode .code-in { flex:1; width:0; min-width:0; padding:10px 14px; }
.pg details.adv { gap:14px; }
.pg details.adv > summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; margin:-2px 0; }
.pg details.adv > summary::-webkit-details-marker { display:none; }
.pg details.adv > summary span { display:grid; gap:2px; min-width:0; }
.pg details.adv > summary b { font-family:'Lilita One'; font-weight:400; font-size:20px; }
.pg details.adv > summary small { font-weight:800; font-size:12.5px; opacity:.72; }
.pg details.adv > summary i { flex:none; width:34px; height:34px; border-radius:50%; background:var(--btn); position:relative; transition:transform .2s; }
.pg details.adv > summary i::before { content:""; position:absolute; left:12px; top:10px; width:9px; height:9px; border-right:3px solid currentColor; border-bottom:3px solid currentColor; transform:rotate(45deg); }
.pg details.adv[open] > summary i { transform:rotate(180deg); }
.pg details.adv:not([open]) { gap:0; }
.pg details.adv > .advbody { display:grid; gap:14px; margin-top:14px; }
.pg details.adv { display:block; }

/* ---------- the page header: just the settings gear ---------- */
.pg .pgtop { display:flex; justify-content:flex-end; margin-bottom:-52px; position:relative; z-index:2; }
.pg .gear { width:44px; height:44px; border:0; border-radius:50%; display:grid; place-items:center; color:var(--btnTx); background:var(--btn);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.25),0 3px 0 var(--btnLip); transition:transform .3s; }
.pg .gear:active { transform:rotate(60deg) scale(.94); }
.pg .mcard .set { display:grid; gap:8px; }
.pg .mcard .set h4 { margin:0; font-weight:900; font-size:12px; letter-spacing:.09em; text-transform:uppercase; opacity:.72; }
.pg .mcard .set + .set { padding-top:12px; border-top:1.5px solid var(--tline); }
.pg .tgls { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pg .tgl { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:10px 12px; border:0; border-radius:14px; font-weight:900; font-size:13.5px; color:var(--btnTx); background:var(--btn); box-shadow:inset 0 0 0 1.5px var(--tline); }
.pg .tgl b { font-size:11.5px; padding:2px 8px; border-radius:999px; background:var(--well); opacity:.8; }
.pg .tgl.on b { background:var(--acc); color:#1d0820; opacity:1; }
.pg .mcard details.adv > summary b { font-family:Nunito; font-weight:900; font-size:15px; }
.pg .mcard .advbody .hint { font-size:13px; }

/* lobby: how long a game */
.pg .fmts { display:grid; gap:8px; }
.pg .fmts .opt span { place-items:start; text-align:left; padding:12px 14px; }
.pg .fmts .opt b { font-size:16px; }
.pg .fmts .opt small { margin-top:3px; font-size:12.5px; line-height:1.3; }

/* ================= the tour ================= */
.t2 .tour { position:fixed; inset:0; z-index:300; }
.t2 .tour .hole { position:fixed; border-radius:18px; box-shadow:0 0 0 9999px rgba(10,2,12,.72),0 0 0 3px var(--acc),0 0 24px 6px color-mix(in srgb,var(--acc) 50%,transparent);
  transition:left .3s cubic-bezier(.3,.8,.3,1),top .3s cubic-bezier(.3,.8,.3,1),width .3s cubic-bezier(.3,.8,.3,1),height .3s cubic-bezier(.3,.8,.3,1); pointer-events:none; }
.t2 .tour .tip { position:fixed; display:grid; gap:4px; padding:14px 14px 12px; border-radius:20px; color:#1d0820; background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.5); transition:left .3s,top .3s; }
.t2 .tour .tip small { font-weight:900; font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.55; }
.t2 .tour .tip b { font-family:'Lilita One'; font-weight:400; font-size:21px; line-height:1.1; }
.t2 .tour .tip p { margin:0; font-weight:700; font-size:14px; line-height:1.35; }
.t2 .tour .tbtns2 { display:flex; align-items:center; gap:8px; margin-top:6px; }
.t2 .tour .tbtns2 button { border:0; border-radius:12px; height:38px; padding:0 14px; font-weight:900; font-size:14px; }
.t2 .tour .tskip { margin-right:auto; background:none; color:#1d0820; opacity:.55; padding:0 4px !important; }
.t2 .tour .tback { background:#f1e8f0; color:#1d0820; }
.t2 .tour .tnext { color:#fff; font-family:'Lilita One'; font-weight:400 !important; font-size:17px !important; -webkit-text-stroke:3px #a85200; paint-order:stroke fill; background:linear-gradient(#ffe25a,#ffa712); box-shadow:0 4px 0 #c96400; }
.t2 .touroffer { position:absolute; left:50%; top:24%; transform:translateX(-50%); z-index:25; display:flex; align-items:center; gap:8px; width:max-content; max-width:94%; padding:6px 6px 6px 14px; border-radius:999px;
  background:#fff; color:#1d0820; font-weight:900; font-size:13px; box-shadow:0 10px 26px rgba(0,0,0,.45); animation:t2pop .3s ease-out; }
.t2 .touroffer button { border:0; border-radius:999px; height:32px; padding:0 12px; font-weight:900; font-size:13px; color:#fff; background:linear-gradient(#ffb02e,#ff7a2e); white-space:nowrap; }
.t2 .touroffer .x2 { width:32px; padding:0; color:#1d0820; background:#f1e8f0; }

/* Change chips: a labelled pill, there whenever you have chips */
.t2 .xch { width:auto; height:34px; padding:0 12px; border-radius:999px; font-size:13px; white-space:nowrap; }
.t2 .res .xch { margin-left:auto; flex:none; }
.t2 .res span { flex:1; min-width:0; }
/* on your turn your bet spot shows a soft ring to aim at (no words) */
.t2 .stage.myturn .draft:not(.has) { border-color:color-mix(in srgb,var(--acc) 38%,transparent); border-style:dashed; }
.t2 .mystk:active .col { transform:translateY(2px) scale(.97); }
.t2 .mystk .col { transition:transform .08s; }

/* ---------- your bar: one row that never overlaps ---------- */
.t2 .meplate { bottom:10px; min-width:0; max-width:calc(100% - 24px); padding:4px 4px 4px 4px; gap:8px; }
.t2 .meplate .mi { display:grid; line-height:1.1; flex:none; padding-right:2px; }
.t2 .meplate #mehp { flex:1; min-width:0; display:flex; }
.t2 .meplate #mehp:empty { display:none; }
.t2 .meplate .hp { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.t2 .meplate .talkbtn { position:relative; left:auto; top:auto; transform:none; flex:none; width:36px; height:36px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.18); background:rgba(255,255,255,.1); }
.t2 .meplate .talkbtn:active { transform:scale(.92); }
.t2 .meplate .av { position:relative; }
.t2 .dmark { position:absolute; left:-6px; top:-5px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-family:'Lilita One'; font-style:normal; font-size:11px; -webkit-text-stroke:0; color:#1d0820; background:#fff; box-shadow:0 2px 0 rgba(0,0,0,.35); }
.t2 .mine { bottom:46px; }
.t2 .three .next span { text-align:center; line-height:1.2; padding:0 8px; }
.t2 .meplate { width:max-content; }
.t2 .notice { max-width:92%; white-space:normal; text-align:center; z-index:31; }
.t2 .meplate > div.mi { flex:none; }
.t2 .meplate #mehp { flex:0 1 auto; }

/* ================= your strip: chips and name bar between the table and the controls ================= */
.t2 { grid-template-rows:auto minmax(0,1fr) auto calc(var(--ctl) + var(--sab)); }
.t2 .mebar { position:relative; z-index:6; display:grid; justify-items:center; gap:6px; padding:4px 12px 8px; }
.t2 .mebar .stacks { display:flex; align-items:flex-end; justify-content:center; gap:10px; min-height:60px; }
.t2 .mebar .mystk { position:relative; left:auto; top:auto; transform:none; padding:4px 4px 0; }
.t2 .mebar .mystk:active { transform:scale(.94); }
.t2 .mebar:not(.myturn) .mystk { pointer-events:none; }
.t2 .mebar .meplate { position:relative; left:auto; bottom:auto; transform:none; max-width:100%; }
.t2 .mebar .coach { position:absolute; transform:translate(-50%,-100%); }
/* the felt no longer has to leave room for your chips and bar */
.t2 .mine { bottom:10px; }
/* phones on their side: the strip heads the right-hand column, above the controls */

.winpile { display:flex; align-items:flex-end; gap:3px; transform-origin:50% 100%; }
.chipfly .col { position:relative; isolation:isolate; }
.chipfly .col img { position:absolute; left:0; display:block; }
.chipfly .col::after { content:""; position:absolute; left:-3px; right:-3px; bottom:-4px; height:11px; border-radius:50%; background:rgba(0,20,40,.4); filter:blur(3px); z-index:-1; }

/* ================= the guide (for a player the host marked as learning) ================= */
.t2 .guide { width:100%; max-width:520px; display:flex; gap:10px; align-items:flex-start; padding:9px 12px 10px; border-radius:16px; color:#1d0820; background:#fff8e6;
  box-shadow:0 0 0 2px #ffd06a,0 8px 18px rgba(0,0,0,.3); animation:t2pop .25s ease-out; }
.t2 .guide .gi { font-size:22px; line-height:1; flex:none; margin-top:1px; }
.t2 .guide div { display:grid; gap:4px; min-width:0; }
.t2 .guide p { margin:0; font-weight:700; font-size:13px; line-height:1.35; }
.t2 .guide p b { font-weight:900; }
.t2 .guide .tip { padding-top:4px; border-top:1.5px dashed rgba(29,8,32,.15); }
.t2 .guide .tip > b:last-child { display:inline-block; margin-left:2px; padding:0 7px; border-radius:999px; background:#ffd06a; }
.t2 .guide .sub { font-size:12px; opacity:.75; }
.t2 .tipglow { outline:3px solid #ffd06a; outline-offset:3px; animation:t2tip 1.4s ease-in-out infinite; }
@keyframes t2tip { 50% { outline-color:rgba(255,208,106,.25); } }
.t2 .learnb { position:absolute; left:-8px; top:-8px; width:20px; height:20px; display:grid; place-items:center; font-style:normal; font-size:13px; line-height:1; -webkit-text-stroke:0; border-radius:50%; background:#fff8e6; box-shadow:0 0 0 2px #ffd06a,0 2px 4px rgba(0,0,0,.35); }
.t2 .meplate .learnb { left:auto; right:-7px; }
.pg .lrn { flex:none; display:inline-flex; align-items:center; gap:4px; height:32px; padding:0 10px; border:0; border-radius:999px; font-weight:900; font-size:12.5px; color:var(--btnTx); background:var(--btn); box-shadow:inset 0 0 0 1.5px var(--tline); }
.pg .lrn.on { color:#1d0820; background:#ffd06a; box-shadow:none; }
@media (orientation: landscape) and (max-height: 560px) { .t2 .guide p { font-size:12px; } }

/* ---------- short screens (an iPhone with Safari's bars): a tighter strip and panel, so the table gets the room ---------- */
@media (max-height: 760px) and (orientation: portrait) {
  .t2 { --ctl:118px; }
  .t2 .acts .big, .t2 .acts .pre, .t2 .acts .ghost, .t2 .acts .next { height:48px; }
  .t2 .rackrow { zoom:.85; min-height:0; }
  .t2 .ctl { padding-top:10px; gap:8px; }
  .t2 .hdr { min-height:40px; }
  .t2 .q { min-height:38px; }
  .t2 .big, .t2 .three .pre, .t2 .ghost, .t2 .three .next { height:48px; }
  .t2 .mebar { gap:4px; padding:2px 12px 6px; }
  .t2 .mebar .stacks { zoom:.82; min-height:0; }
  .t2 .meplate .av { width:30px; height:30px; font-size:14px; }
  .t2 .meplate .talkbtn { width:32px; height:32px; }
  .t2-top { padding-top:calc(6px + var(--sat)); padding-bottom:4px; }
}
.pg .a2hs { margin:0; padding:10px 14px; border-radius:16px; font-weight:800; font-size:13.5px; line-height:1.35; color:var(--tx); background:var(--well); box-shadow:inset 0 0 0 1.5px var(--tline); }

/* ---------- home: things keep moving ---------- */
.pg .home { isolation:isolate; }
.pg .fx { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.pg .fx span { position:absolute; bottom:-80px; width:var(--s); height:var(--s); opacity:var(--o); animation:pnrise var(--d) linear var(--dl) infinite; }
.pg .fx .suit svg { width:100%; height:100%; fill:var(--tx); }
.pg .fx .chip { opacity:calc(var(--o) * 3.5); filter:blur(1.5px); }
.pg .fx img { width:100%; }
@keyframes pnrise {
  0% { transform:translate(0,0) rotate(0deg); }
  50% { transform:translate(var(--sw),-60vh) rotate(calc(var(--rot) / 2)); }
  100% { transform:translate(0,-125vh) rotate(var(--rot)); }
}
/* the hero: two cards fanned behind the chips, dealt in and turned over */
.pg .hero .deal { position:relative; width:200px; height:96px; margin-bottom:4px; }
.pg .deal .dc { position:absolute; top:0; width:58px; }
.pg .deal .dc.l { left:44px; rotate:-14deg; animation:pndealL .6s cubic-bezier(.2,.9,.3,1.2) .15s both; }
.pg .deal .dc.r { right:44px; rotate:13deg; animation:pndealR .6s cubic-bezier(.2,.9,.3,1.2) .3s both; }
.pg .deal .dc.turn { animation:pnturn .46s ease-in-out both; }
.pg .deal .dc.r.turn { animation-delay:.09s; }
@keyframes pndealL { from { translate:120px -140px; rotate:200deg; opacity:0; } }
@keyframes pndealR { from { translate:-80px -140px; rotate:-190deg; opacity:0; } }
@keyframes pnturn { 50% { transform:scaleX(0) translateY(-10px); } }
.pg .deal .pc { --w:58px; width:var(--w); aspect-ratio:5/7; border-radius:calc(var(--w)*.1); position:relative;
  background:radial-gradient(ellipse 120% 90% at 30% 10%,#fff 0%,#fbfaf7 45%,#ebe8e0 100%);
  box-shadow:inset 0 1px 0 #fff,0 2px 0 #c0c4d6,0 8px 14px rgba(8,8,40,.45); }
.pg .deal .pc .idx { position:absolute; left:calc(var(--w)*.08); top:calc(var(--w)*.04); display:grid; justify-items:center; line-height:.82; }
.pg .deal .pc .idx b { font-family:'Barlow Condensed'; font-weight:800; font-size:calc(var(--w)*.44); letter-spacing:-.03em; }
.pg .deal .pc .idx svg { width:calc(var(--w)*.22); height:calc(var(--w)*.22); margin-top:calc(var(--w)*.03); }
.pg .deal .pc .big { position:absolute; right:calc(var(--w)*.09); bottom:calc(var(--w)*.09); width:calc(var(--w)*.52); height:calc(var(--w)*.52); }
.pg .deal .pc svg { overflow:visible; }
.pg .deal .pc.red { color:#d91f2d; } .pg .deal .pc.blk { color:#1c1d2e; }
.pg .deal .pc.back { background:repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 3px,transparent 3px 9px),repeating-linear-gradient(-45deg,rgba(255,255,255,.14) 0 3px,transparent 3px 9px),linear-gradient(#8a52e8,#4b23a8); border:calc(var(--w)*.07) solid #f4f0ff; box-sizing:border-box; }
.pg .deal .chiplogo { position:absolute; left:46px; bottom:-8px; width:108px; height:64px; z-index:2; }
.pg .deal .chiplogo img { position:absolute; width:52px; filter:drop-shadow(0 6px 6px rgba(0,0,0,.35)); animation:pndrop .5s cubic-bezier(.3,1.5,.5,1) both; }
.pg .deal .chiplogo img:nth-child(2) { animation-delay:.55s; } .pg .deal .chiplogo img:nth-child(3) { animation-delay:.7s; }
.pg .deal .chiplogo img:nth-child(4) { animation-delay:.6s; } .pg .deal .chiplogo img:nth-child(5) { animation-delay:.75s; }
.pg .deal .chiplogo img:nth-child(6) { animation-delay:.9s; } .pg .deal .chiplogo img:first-child { animation-delay:.45s; }
@keyframes pndrop { from { translate:0 -120px; opacity:0; } 60% { opacity:1; } }
.pg .home .hero h1 { animation:pnpop .55s cubic-bezier(.3,1.6,.5,1) .2s both; }
@keyframes pnpop { from { scale:.6; opacity:0; } }
/* Play now shines and breathes; the ways to play bob along */
.pg .btn.primary.playnow { animation:pnbreathe 2.4s ease-in-out infinite; }
.pg .btn.primary.playnow::after { content:""; position:absolute; top:-30%; bottom:-30%; width:22%; left:-40%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent); transform:skewX(-20deg); animation:pnshine 3.2s ease-in-out infinite; }
@keyframes pnshine { 0%,60% { transform:translateX(0) skewX(-20deg); } 90%,100% { transform:translateX(750%) skewX(-20deg); } }   /* 750% of its 22% width */
.pg .playnow .zap { font-style:normal; display:inline-block; -webkit-text-stroke:0; animation:pnzap 3.2s ease-in-out infinite; }
@keyframes pnbreathe { 50% { scale:1.025; } }
@keyframes pnzap { 0%,70%,100% { rotate:0deg; scale:1; } 76% { rotate:-16deg; scale:1.3; } 84% { rotate:12deg; scale:1.2; } 92% { rotate:-4deg; } }
.pg .duo .play i { animation:pnbob 2.6s ease-in-out infinite alternate; }
.pg .duo .play.friends i { animation-delay:-1.3s; }
@keyframes pnbob { to { translate:0 -4px; rotate:-5deg; } }
@media (prefers-reduced-motion: reduce) {
  .pg .home *, .pg .home *::after { animation:none !important; }
}

/* ---------- home: fill the whole screen, not just the top of it ---------- */
.pg .page.home { display:flex; flex-direction:column; min-height:100dvh; }
.pg .home > .hero { margin-top:auto; }
.pg .home > .go, .pg .home > .plays { margin-top:auto; }
.pg .home > .joincode { margin-bottom:auto; }
/* taller screens get a bigger hero and button rather than more empty space */
@media (min-height: 740px) {
  .pg .home .deal { zoom:1.25; }
  .pg .home .hero h1 { font-size:clamp(44px,12vw,58px); }
  .pg .home .hero p { font-size:17px; } .pg .home .hero p.sub { font-size:15px; }
  .pg .btn.primary.playnow { min-height:80px; font-size:32px; }
  .pg .duo .play { padding:18px 16px; }
}
@media (min-height: 860px) {
  .pg .home .deal { zoom:1.5; }
  .pg .btn.primary.playnow { min-height:88px; font-size:34px; }
  .pg .duo .play { padding:22px 18px; gap:12px; }
  .pg .duo .play i { width:52px; height:52px; font-size:26px; }
}
@media (max-height: 700px) {
  .pg .page.home { gap:10px; padding-bottom:calc(16px + var(--sab)); }
  .pg .home .deal { zoom:.9; }
}

/* ---------- home: the two smaller ways to play draw what they are, in the table's own pieces ---------- */
.pg .duo .play i.art { width:auto; height:58px; border-radius:0; background:none; box-shadow:none; display:flex; align-items:flex-end; animation:none; }
/* Longer game: three tall clay stacks */
.pg .art.stacks { gap:2px; }
.pg .art.stacks > span { position:relative; width:40px; height:100%; display:block; }
.pg .art.stacks img { position:absolute; left:0; width:40px; filter:drop-shadow(0 3px 3px rgba(0,0,0,.3)); }
.pg .art.stacks img:nth-child(1) { bottom:0; } .pg .art.stacks img:nth-child(2) { bottom:5px; } .pg .art.stacks img:nth-child(3) { bottom:10px; }
.pg .art.stacks img:nth-child(4) { bottom:15px; } .pg .art.stacks img:nth-child(5) { bottom:20px; } .pg .art.stacks img:nth-child(6) { bottom:25px; }
.pg .art.stacks img:nth-child(7) { bottom:30px; }
.pg .art.stacks img:last-child { animation:pnchip 2.8s ease-in-out infinite; }
.pg .art.stacks > span:nth-child(2) img:last-child { animation-delay:-.9s; } .pg .art.stacks > span:nth-child(3) img:last-child { animation-delay:-1.8s; }
@keyframes pnchip { 0%,70%,100% { translate:0 0; } 80% { translate:0 -7px; } 90% { translate:0 0; } }
/* With friends: seats filling up, with one left open for whoever you send the link to */
.pg .art.seats { align-items:center; padding-left:4px; }
.pg .art.seats .ava { width:40px; height:40px; font-size:19px; margin-left:-10px; box-shadow:0 3px 0 rgba(0,0,30,.35); }
.pg .art.seats .ava:first-child { margin-left:0; }
.pg .art.seats .ava.add { background:transparent; border:2.5px dashed var(--tx); color:var(--tx); opacity:.7; -webkit-text-stroke:0; box-shadow:none; animation:pnseat 2.4s ease-in-out infinite; }
@keyframes pnseat { 50% { opacity:.35; scale:.92; } }
@media (min-height: 860px) {
  .pg .duo .play i.art { width:auto; height:66px; }
  .pg .art.seats .ava { width:46px; height:46px; font-size:21px; }
}

/* ---------- the name ask, before any game starts ---------- */
.pg .namerow { display:flex; gap:10px; }
.pg .mcard input#nm { flex:1; min-width:0; padding:12px 14px; font-size:20px; font-weight:900; text-align:center; border:2px solid var(--tline); background:var(--well); color:var(--tx); border-radius:14px; }
.pg .mcard input#nm:focus { outline:none; border-color:var(--acc); }
.pg .dice { flex:none; width:54px; border:0; border-radius:14px; font-size:26px; background:var(--btn); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.25),0 4px 0 var(--btnLip); transition:transform .08s; }
.pg .dice:active { transform:translateY(3px); }
/* the dice tumbles; names flick past blurred, and the new one lands with a pop */
.pg .dice span { display:inline-block; }
/* thrown straight up first, spins at the top, then lands with a squash and one small bounce */
.pg .dice.rolling span { animation:pnroll .8s linear both; }
@keyframes pnroll {
  0% { transform:translateY(0) rotate(0deg) scale(1); animation-timing-function:cubic-bezier(.2,.8,.4,1); }
  28% { transform:translateY(-28px) rotate(12deg) scale(1.15); animation-timing-function:ease-in-out; }
  55% { transform:translateY(-22px) rotate(520deg) scale(1.15); animation-timing-function:cubic-bezier(.6,0,.9,.5); }
  72% { transform:translateY(0) rotate(700deg) scale(1.15,.82); animation-timing-function:ease-out; }
  86% { transform:translateY(-6px) rotate(715deg) scale(1); animation-timing-function:ease-in; }
  100% { transform:translateY(0) rotate(720deg) scale(1); }
}
.pg .mcard input#nm.flicking { filter:blur(1.2px); opacity:.6; transform:translateY(2px); }
.pg .mcard input#nm.landed { animation:pnland .45s cubic-bezier(.3,1.6,.5,1); border-color:var(--acc); }
@keyframes pnland { from { transform:scale(1.12); color:var(--acc); } }

/* ================= a compact control panel, and your two cards big and readable ================= */
.t2 .ctl { padding-top:10px; padding-bottom:calc(12px + var(--sab)); gap:8px; }
.t2 .hdr, .t2 .res { min-height:40px; }
.t2 .res { padding:4px 12px; }
.t2 .res > b { font-size:24px; }
.t2 .say { font-size:14px; }
.t2 .ctx small { font-size:12px; }
.t2 .tmr { width:38px; height:38px; } .t2 .tmr span { width:31px; height:31px; font-size:15px; }
/* bet sizes: one slim line each */
.t2 .quick .q { min-height:36px; display:flex; align-items:center; justify-content:center; gap:5px; border-radius:14px; padding:0 4px; line-height:1; }
.t2 .quick .q small { display:inline; font-size:12px; }
.t2 .big, .t2 .pre, .t2 .ghost, .t2 .three .next, .t2 .three.one .big { height:50px; }
.t2 .msg { min-height:50px; }
/* your cards: bigger, side by side, barely tilted, nothing covered */
.t2 .mine { gap:8px; }
.t2 .mine .pc.lg { --w:var(--bw, 60px); }
.t2 .mine .pc:first-child { transform:rotate(-3deg); } .t2 .mine .pc + .pc { transform:rotate(3deg); }

/* ================= the table cards grow with the felt (see layoutStage) ================= */
.t2 .board { gap:calc(var(--bw, 46px) * .11); }
.t2 .board .slot, .t2 .board .pc.md { --w:var(--bw, 46px); }


/* ================= the control panel: [bet sizes ··· timer] then [Fold][Check / Call] ================= */
.t2 .ctl { grid-template-rows:auto auto; align-content:start; }
.t2 .quick { display:flex; align-items:center; gap:6px; min-height:40px; }
.t2 .quick .q { flex:1; min-width:0; min-height:38px; display:flex; align-items:center; justify-content:center; gap:5px; padding:0 4px; border:0; border-radius:14px; color:var(--btnTx);
  background:var(--btn); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3),0 3px 0 var(--btnLip); transition:transform .08s; }
.t2 .quick .q:active { transform:translateY(3px); }
.t2 .quick .q svg { width:17px; height:17px; flex:none; }
.t2 .quick .q em { font-style:normal; font-family:'Lilita One'; font-size:15px; line-height:1; }
.t2 .quick .q small { font-family:'Lilita One'; font-size:15px; line-height:1; white-space:nowrap; }
.t2 .quick .q.on { background:var(--tx); color:var(--sh1); }
.t2 .quick .q[disabled] { opacity:.4; }
.t2 .quick .tmr { margin-left:2px; }
.t2 .quick .say { flex:1; min-width:0; text-align:center; font-weight:800; font-size:14px; }
.t2 .quick .say small { font-weight:800; font-size:12.5px; opacity:.8; margin-left:6px; }
.t2 .quick .say small b { font-family:'Lilita One'; font-weight:400; font-size:14px; color:var(--acc); }
.t2 .quick .res { flex:1; min-height:40px; }
.t2 .acts { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:9px; }
.t2 .acts.one { grid-template-columns:1fr; }
/* your turn: two buttons that trade width. With chips in your spot Clear shrinks and the bet button takes the room. */
.t2 .acts.turn { display:flex; position:relative; z-index:2; }   /* above the bet sizes, so the fire can rise over them */
.t2 .acts.turn > * { flex:1 1 0; min-width:0; transition:flex-grow .34s cubic-bezier(.3,1.3,.5,1), transform .08s, box-shadow .08s; }
.t2 .acts.turn .b { white-space:nowrap; overflow:hidden; }
.t2 .acts.turn > .betw { flex-grow:1.6; position:relative; display:grid; isolation:isolate; }
.t2 .acts.turn.bet > .sec { flex-grow:.55; }
.t2 .acts.turn.bet > .betw { flex-grow:2.9; }
.t2 .acts.turn .clr { font-size:16px; }
/* the bet button catching fire (the fire itself is simulated in app.js, see Fire). --heat (0–1) is how big the bet is
   next to your chips: the glow round the button grows with it. The canvas sits behind the button with its bottom
   row hidden, so flames rise out of the top edge. All-in (.h3) sets the button itself alight and makes it rumble. */
.t2 .betw > .pri { position:relative; z-index:1; transition:box-shadow .35s, transform .08s; }
.t2 .acts.bet .betw.lit > .pri:not([disabled]) { --sc:#8e0f2c; color:#fff;
  background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,0) 52%),linear-gradient(color-mix(in srgb, var(--gold1), #ff4a2a calc(30% + var(--heat) * 70%)), color-mix(in srgb, var(--gold2), #c8102e calc(30% + var(--heat) * 70%)));
  /* no halo round the button: the fire is behind it, so only its top edge catches the light, more as it grows */
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 calc(2px + var(--heat) * 5px) calc(3px + var(--heat) * 7px) calc(var(--heat) * -1px) rgba(255,190,90,calc(.15 + var(--heat) * .55)),inset 0 0 0 1.5px rgba(255,150,50,calc(.15 + var(--heat) * .35)),0 6px 0 color-mix(in srgb, var(--goldlip), #7a0a1e calc(30% + var(--heat) * 70%)); }
.t2 .acts.bet .betw.lit > .pri:not([disabled]) small { color:#ffe2c0; }
.t2 .betw .pri > .st, .t2 .betw .pri > small { position:relative; z-index:1; }
.t2 .betw .pri .amt { font-style:normal; font-variant-numeric:tabular-nums; }
.t2 .betw .blaze { position:absolute; left:-70px; bottom:30%; width:calc(100% + 140px); height:240px; z-index:0; pointer-events:none; }   /* its blur is a knob in fire.js */
/* all-in: the button itself catches, and it rumbles every so often */
.t2 .betw.h3 { animation:pnrumble 1.5s ease-in-out infinite; }
@keyframes pnrumble { 0%, 66%, 100% { transform:none; } 70% { transform:translateX(-2px) rotate(-.5deg); } 74% { transform:translateX(2px) rotate(.5deg); }
  78% { transform:translateX(-1.5px); } 82% { transform:translateX(1.5px); } 86% { transform:none; } }
@media (prefers-reduced-motion: reduce) { .t2 .betw.h3, .t2 .seat.next .av, .t2 #mine.next { animation:none; } }
.t2 .acts .big, .t2 .acts .pre, .t2 .acts .ghost, .t2 .acts .next { height:50px; }
.t2 .acts .big { font-size:20px; }
.t2 .acts .msg { grid-column:auto; }

/* ================= your bet spot: the smallest raise and what your chips make ================= */
.t2 .draft .hintx { display:grid; justify-items:center; gap:1px; text-transform:none; letter-spacing:0; }
.t2 .draft .hintx small { font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; opacity:.85; }
.t2 .draft .hintx b { font-family:'Lilita One'; font-weight:400; font-size:18px; letter-spacing:0; }
.t2 .draft.locked { border-color:#46e38f; border-style:solid; animation:pnlocked .5s cubic-bezier(.3,1.6,.5,1); }
.t2 .draft.locked .dl { background:#46e38f; color:#0b3a22; }
.t2 .draft.locked .dl::before { content:"🔒 "; }
@keyframes pnlocked { 40% { transform:translate(-50%,-50%) scale(1.12); } }

/* ================= your strip: chips across the whole width, then you (centred under your cards) and chat ================= */
.t2 .mebar { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; grid-template-areas:"guide guide guide" "rack rack rack" ". plate chat";
  align-items:center; row-gap:0; column-gap:8px; padding:2px max(10px,var(--sal)) 8px max(10px,var(--sar)); }
.t2 .mebar .guide { grid-area:guide; justify-self:center; margin-bottom:6px; }
.t2 .rackrow { grid-area:rack; display:flex; align-items:flex-end; gap:6px; width:100%; max-width:640px; justify-self:center; }
.t2 .mebar .stacks { flex:1; justify-content:space-evenly; }
.t2 .rackrow .xch { align-self:center; flex:none; }
.t2 .mebar .meplate { grid-area:plate; justify-self:center; margin-top:4px; min-width:0; max-width:100%; }
.t2 .chatbtn { grid-area:chat; justify-self:end; position:relative; display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin-top:4px; padding:0; border:0; border-radius:50%;
  font-weight:900; font-size:14px; color:var(--btnTx); background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1.5px var(--tline),0 3px 0 var(--btnLip); }
.t2 .chatbtn:active { transform:translateY(2px); }
.t2 .chatbtn i { position:absolute; right:-4px; top:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; font-style:normal; font-weight:900; font-size:10.5px; line-height:18px; text-align:center; background:#ff5a6e; color:#fff; box-shadow:0 0 0 2px var(--bgB); }
/* the narrow right-hand column when the screen is wide or on its side */
@media (orientation: landscape) and (max-height: 560px) {
  /* sideways: your chips, your name and chat share one row */
  .t2 .mebar { grid-template-columns:minmax(0,1fr) auto 44px; grid-template-areas:"guide guide guide" "rack plate chat"; column-gap:12px; padding:2px max(10px,var(--sar)) 4px max(10px,var(--sal)); }
  .t2 .mebar .meplate, .t2 .chatbtn { margin-top:0; }
  .t2 .chatbtn { width:36px; height:36px; }
  .t2 .quick .q small { font-size:13px; } .t2 .quick .q svg { width:15px; height:15px; }
}

/* ================= the practice hand's coach: one tip at a time, pointing at what to tap ================= */
.t2 .pcoach { --ax:50%; position:fixed; z-index:140; width:min(300px, calc(100vw - 24px)); padding:12px 14px 8px; border-radius:16px; color:#1d0820; background:#fff8e6; font-family:Nunito, var(--f-body);
  box-shadow:0 0 0 2px #ffd06a,0 12px 28px rgba(0,0,0,.4); animation:t2pop .25s ease-out; transition:left .25s ease, top .25s ease; pointer-events:auto; }
.t2 .pcoach::after { content:""; position:absolute; left:var(--ax); bottom:-8px; width:16px; height:16px; margin-left:-8px; background:#fff8e6; transform:rotate(45deg); box-shadow:2px 2px 0 #ffd06a; }
.t2 .pcoach.below::after { bottom:auto; top:-8px; box-shadow:-2px -2px 0 #ffd06a; }
.t2 .pcoach.noarrow::after { display:none; }
.t2 .pcoach p { margin:0; font-weight:700; font-size:14px; line-height:1.4; }
.t2 .pcoach p b { font-weight:900; color:#8e1f66; }
.t2 .pcoach .pc-row { display:flex; justify-content:flex-end; }
.t2 .pcoach:not(.done):not(.toffer) { display:flex; align-items:center; gap:12px; width:auto; max-width:min(320px, calc(100vw - 24px)); padding:10px 14px; }
.t2 .pcoach:not(.done):not(.toffer) p { flex:1; }
.t2 .pcoach .pc-skip { flex:none; border:0; background:none; padding:4px 0; font-family:inherit; font-weight:800; font-size:12px; color:#7a4a66; text-decoration:underline; cursor:pointer; }
/* the coach: in a practice hand it takes the chat button's spot and talks from there */
.t2 .coachav { display:none; }
.t2 .mebar.coaching .chatbtn, .t2 .mebar.coaching .coach, .t2:has(#tour) .mebar .coach { display:none !important; }
.t2 .mebar.coaching .meplate { visibility:hidden; }
.t2 .mebar.coaching .coachav { grid-area:chat; justify-self:end; display:grid; place-items:center; width:40px; height:40px; margin-top:4px; border-radius:50%; font-size:22px; line-height:1;
  background:#fff8e6; box-shadow:0 0 0 2px #ffd06a, 0 4px 10px rgba(0,0,0,.3); }
.t2 .pcoach.side, .t2 .pcoach.up { max-width:none; transition:none; }
.t2 .pcoach.side { padding:7px 12px; } .t2 .pcoach.side p { font-size:13.5px; line-height:1.3; }
.t2 .pcoach.side::after { left:auto; right:-8px; top:50%; bottom:auto; margin:-8px 0 0; box-shadow:2px -2px 0 #ffd06a; }
.t2 .pcoach.up { max-width:min(320px, calc(100vw - 24px)); }
.t2 .pcoach.done { left:50% !important; top:50% !important; transform:translate(-50%,-50%); width:min(340px, calc(100vw - 32px)); padding:20px 18px 16px; text-align:center; transition:none; }
.t2 .pcoach.done::after { display:none; }
.t2 .pcoach.done p { font-size:15px; }
.t2 .pcoach.toffer { left:50%; top:18%; transform:translateX(-50%); padding-bottom:12px; }
.t2 .pcoach.toffer .pc-row { align-items:center; gap:14px; margin-top:10px; }
.t2 .pcoach.toffer .pc-row .b { height:38px; padding:0 18px; font-family:'Lilita One'; font-size:16px; border-radius:12px; }
.t2 .pcoach .pc-big { display:block; margin-bottom:6px; font-family:'Lilita One'; font-weight:400; font-size:28px; color:#1d0820 !important; }
.t2 .pcoach.done .pc-row { justify-content:stretch; margin-top:14px; }
.t2 .pcoach.done .pc-row .b { width:100%; }

/* Change is the rack's last slot: spaced like a stack, on the same baseline, labelled like one */
.t2 .rackrow { justify-content:space-evenly; align-items:flex-end; min-height:60px; }
.t2 .mebar .stacks { display:contents; }
.t2 .rackrow .xch { align-self:flex-end; width:auto; height:auto; display:grid; justify-items:center; gap:2px; padding:4px 4px 0; border:0; border-radius:14px; background:none; box-shadow:none; color:var(--tx); }
.t2 .rackrow .xch i { width:38px; height:38px; display:grid; place-items:center; font-style:normal; font-size:19px; font-weight:900; border-radius:50%;
  border:2px dashed var(--tline); background:rgba(255,255,255,.08); }
.t2 .rackrow .xch span { font-family:'Lilita One'; font-size:12px; line-height:1; text-shadow:0 1px 2px rgba(0,0,0,.65),0 0 6px rgba(0,0,0,.35); }
.t2 .rackrow .xch:active i { transform:scale(.92); }
.t2 .rackrow .xch[hidden] { display:none; }
@media (orientation: landscape) and (max-height: 560px) {
  .t2 .rackrow { zoom:.8; min-height:0; }
}

/* ================= seats on the rail: their two cards readable, and big when turned over ================= */
.t2 .hc .pc + .pc { margin-left:-10px; }
.t2 .hc.shown { transform:none; }
.t2 .hc.u.shown { transform:translateX(-50%); }
.t2 .hc.u { top:-34px; }
.t2 .hc .pc.md { box-shadow:0 2px 0 #c0c4d6,0 6px 12px rgba(8,8,40,.45); }

/* ================= the pot: a brass tray set into the felt; the chips and the amount sit inside it ================= */
.t2 .potlbl { display:block; padding:4px; border-radius:16px; min-width:0; transition:opacity .3s;
  background:linear-gradient(160deg,#fff1b8 0%,#e8b85a 22%,#b9822c 55%,#f0c870 78%,#8a5a18 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -1px 0 rgba(0,0,0,.35) inset,0 6px 14px rgba(0,0,20,.35); }
.t2 .potlbl .well { position:relative; display:flex; align-items:flex-end; justify-content:center; gap:8px; min-width:140px; height:38px; padding:0 54px 6px 14px; box-sizing:border-box; border-radius:12px;
  background:radial-gradient(ellipse 90% 80% at 50% 30%,color-mix(in srgb,var(--felt3) 80%,#000),color-mix(in srgb,var(--felt3) 45%,#000));
  box-shadow:inset 0 4px 8px rgba(0,0,0,.65),inset 0 -1px 0 rgba(255,255,255,.08); }
.t2 .potlbl .well .pile { position:static; transform:none; gap:2px; }
.t2 .potlbl .well b { position:absolute; right:9px; bottom:4px; font-family:'Lilita One'; font-weight:400; font-size:13px; line-height:1; color:#ffd84a; text-shadow:0 1px 0 rgba(0,0,0,.6); }
.t2 .potlbl.empty .well::after { content:""; position:absolute; inset:9px 22px; border-radius:8px; border:1.5px dashed rgba(255,255,255,.08); }
.t2 .potlbl.slam .well { animation:pnglint .5s ease-out; }
@keyframes pnglint { 30% { box-shadow:inset 0 4px 8px rgba(0,0,0,.65),0 0 0 2px rgba(255,216,74,.55); } }

/* ================= your betting box: printed on the felt, open on your turn ================= */
.t2 #draft { width:150px; height:66px; border-radius:16px; border:1.5px solid transparent; background:transparent; box-shadow:none;
  transition:border-color .2s,background .2s,box-shadow .2s,transform .2s; }
.t2 .stage:not(.myturn) #draft, .t2 #draft:not(.open) { border-color:transparent; background:transparent; box-shadow:none; }
.t2 #draft.open { border-color:var(--acc); border-style:solid; background:rgba(0,0,0,.14); box-shadow:inset 0 2px 8px rgba(0,0,0,.28); }
.t2 #draft.open.ready { border-width:2.5px; border-color:#ffd84a; box-shadow:0 0 0 4px rgba(255,216,74,.18),inset 0 2px 8px rgba(0,0,0,.28); }
.t2 #draft.over { border-color:var(--acc); background:color-mix(in srgb,var(--acc) 16%,transparent); }
.t2 #draft .pile { bottom:18px; }
/* empty and open: "Tap / Drag your chips" over three ghost chips */
.t2 #draft .hintx { position:absolute; left:0; right:0; top:7px; display:block; font-size:calc(9.5px / max(1, var(--z, 1))); font-weight:900; letter-spacing:.04em; text-transform:none; color:var(--acc); opacity:0; transition:opacity .2s; }
.t2 #draft .ghostc { position:absolute; left:50%; bottom:15px; width:30px; height:22px; margin-left:-15px; opacity:0; transition:opacity .2s; }
.t2 #draft .ghostc i { position:absolute; left:0; width:30px; height:11px; border-radius:50%; border:1.5px dashed color-mix(in srgb,var(--acc) 55%,transparent); box-sizing:border-box; }
.t2 #draft .ghostc i:nth-child(1) { bottom:0; } .t2 #draft .ghostc i:nth-child(2) { bottom:5px; } .t2 #draft .ghostc i:nth-child(3) { bottom:10px; }
.t2 #draft.open:not(.has) .hintx, .t2 #draft.open:not(.has) .ghostc { opacity:.85; }
/* the label under the box: a small "min" tag, the amount, or a gold pill once it's a real bet */
.t2 #draft .dl { bottom:-12px; }
.t2 #draft .dl.min { font-family:Nunito, var(--f-body); font-weight:900; font-size:11px; padding:3px 10px; color:var(--acc); }
.t2 #draft .dl small { margin-left:3px; }

/* ================= bet sizes: a row where there's room, a pop-out tray where there isn't ================= */
.t2 .qsizes { display:contents; }
.t2 .qtog { display:none; }
@media (orientation: landscape) and (max-height: 560px) {
  .t2 .ctl { grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); }
  .t2 .quick { justify-content:flex-start; }
  .t2 .qtog { display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0; border:0; border-radius:14px; color:var(--btnTx); background:var(--btn);
    box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3),0 3px 0 var(--btnLip); transition:transform .08s,background .15s; }
  .t2 .qtog svg { width:22px; height:22px; }
  .t2 .qtog:active { transform:translateY(2px); }
  .t2 .ctl.qopen .qtog { color:var(--sh1); background:var(--tx); }
  .t2 .qsizes { position:absolute; z-index:30; left:max(12px,var(--sal)); bottom:calc(100% + 8px); display:flex; gap:6px; padding:8px; border-radius:16px;
    background:linear-gradient(var(--sh1),var(--sh3)); box-shadow:0 0 0 1.5px var(--tline),0 12px 26px rgba(0,0,20,.45);
    opacity:0; transform:translateY(8px) scale(.96); transform-origin:12% 100%; pointer-events:none; transition:opacity .16s,transform .16s; }
  .t2 .ctl.qopen .qsizes { opacity:1; transform:none; pointer-events:auto; }
  .t2 .qsizes .q { flex:none; min-width:86px; min-height:40px; }
  .t2 .quick .tmr { margin-left:auto; }
}
@media (orientation: landscape) and (max-height: 560px) {
  /* (after the general button heights above, so the compact sideways row wins in every state) */
  .t2 .acts .big, .t2 .acts .pre, .t2 .acts .ghost, .t2 .acts .next, .t2 .acts .msg { height:44px; min-height:44px; }
}

/* ================= how lucky are you (a preview, ?mock=luck) ================= */
.pg .luckcard .luckbtn { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; padding:12px 14px; border:0; border-radius:18px; text-align:left; cursor:pointer;
  color:var(--tx); background:linear-gradient(135deg,rgba(31,168,95,.28),rgba(31,168,95,.08)); box-shadow:inset 0 0 0 1.5px rgba(31,168,95,.55),0 4px 0 rgba(0,0,20,.25); font:inherit; }
.pg .luckbtn i { font-style:normal; font-size:32px; text-align:center; }
.pg .luckbtn b { display:block; font-family:'Lilita One'; font-weight:400; font-size:20px; } .pg .luckbtn small { font-weight:800; opacity:.75; }
.pg .luckbtn em { font-style:normal; font-family:'Lilita One'; font-size:16px; padding:6px 14px; border-radius:999px; background:#1fa85f; color:#fff; }
.pg .luckbtn:active { transform:translateY(3px); }
.pg .joincode:has([data-howto]) { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 18px; }
.t2.luckov { z-index:80; display:grid; place-items:center; grid-template-rows:none; padding:16px; overflow:auto; background:radial-gradient(ellipse at 50% 30%,#4d1849,#1b0a1c 75%); }
.luckov .lk { width:min(420px,100%); display:grid; gap:18px; justify-items:center; text-align:center; }
.luckov .dots { display:flex; gap:7px; justify-content:center; margin-top:10px; } .luckov .dots i { width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.18); transition:background .2s; }
/* the luck dial: a half-circle arc that fills behind a springy needle (its turn is a transform), the number under it */
.luckov .lkhead { font-family:'Lilita One'; font-size:24px; }
.luckov .gauge { position:relative; width:min(300px,82vw); aspect-ratio:220/124; }
.luckov .gauge svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.luckov .gauge .trk, .luckov .gauge .fil { fill:none; stroke-width:16; stroke-linecap:round; }
.luckov .gauge .trk { stroke:rgba(255,255,255,.12); } .luckov .gauge .fil { stroke:url(#lkgr); transition:stroke-dashoffset .45s cubic-bezier(.3,1.4,.5,1); }
.luckov .gauge text { fill:rgba(255,255,255,.55); font:800 10px Nunito,sans-serif; }
.luckov .needle { position:absolute; left:50%; bottom:11.3%; width:0; height:62%; transform-origin:50% 100%; transform:rotate(var(--a)); transition:transform .45s cubic-bezier(.3,1.7,.5,1); }
.luckov .needle > i { position:absolute; left:-2.5px; bottom:0; width:5px; height:100%; border-radius:3px; background:linear-gradient(#fff,#ffe9a8); box-shadow:0 0 10px rgba(255,220,140,.7); transform-origin:50% 100%; }
.luckov .hub { position:absolute; left:50%; bottom:11.3%; width:18px; height:18px; margin:0 0 -9px -9px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.15); }
.luckov .lks { font-family:Nunito,sans-serif; font-weight:900; font-size:72px; line-height:1; margin-top:-4px; }
.luckov .murmur { margin:0; min-height:1.3em; font-family:'Lilita One'; font-size:28px; color:#f3e2ff; } .luckov .murmur.hot { color:#ffd84a; }
.luckov .dots i.w { background:#ffd84a; } .luckov .dots i.l { background:rgba(255,255,255,.32); }
@media (prefers-reduced-motion: reduce) { .luckov .needle, .luckov .gauge .fil { transition:none; } }
.luckov .lkres { display:grid; gap:10px; justify-items:center; width:100%; }
.luckov .lkres small { font-weight:900; letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
.luckov .lkt { font-family:'Lilita One'; font-size:28px; color:#ffd84a; } .luckov .lkres p { margin:0; font-weight:800; opacity:.85; }
.luckov .two { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }

/* ================= How to play: the lessons ================= */
.t2.lsnov { --lsGood:#46e38f; --lsGoodTx:#0d2a1a; --accTx:#1d0820; z-index:80; display:block; overflow:auto; -webkit-overflow-scrolling:touch; user-select:none; }
.lsnov .lsbar { position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:10px; min-height:52px; padding:calc(6px + var(--sat, 0px)) 16px 6px;
  background:linear-gradient(var(--bgC) 70%, transparent); }
.lsnov .lsback { border:0; background:var(--btn); color:var(--btnTx); font:900 14px Nunito,sans-serif; min-width:40px; height:36px; padding:0 14px; border-radius:999px; cursor:pointer; box-shadow:0 3px 0 var(--btnLip); }
.lsnov .lsback:active { transform:translateY(2px); box-shadow:none; }
.lsnov .lsstep { display:flex; align-items:center; gap:10px; margin-left:auto; font-weight:900; font-size:13px; opacity:.8; }
.lsnov .lsdots { display:flex; gap:5px; } .lsnov .lsdots i { width:8px; height:8px; border-radius:50%; background:var(--tline); transition:background .2s, transform .2s; }
.lsnov .lsdots i.d { background:var(--acc); opacity:.6; } .lsnov .lsdots i.on { background:var(--acc); transform:scale(1.3); }
.lsnov .lsbody { width:min(460px,100%); margin:0 auto; padding:4px 16px 28px; display:grid; gap:14px; justify-items:center; text-align:center; }
.lsnov .lsbody > * { min-width:0; max-width:100%; }
.lsnov h2 { margin:0; font-family:'Lilita One'; font-weight:400; font-size:30px; line-height:1.1; }
.lsnov .lsh.good { color:var(--lsGood); } .lsnov .lsh.bad { color:#ff8a8a; }
.lsnov .lsp { margin:0; font-weight:700; font-size:16px; line-height:1.45; opacity:.92; max-width:34ch; }
.lsnov .lsp b, .lsnov .lswhy b, .lsnov .lssay b { color:var(--acc); }
.lsnov .pc.lc { --w:min(15vw,58px); transition:transform .3s cubic-bezier(.2,1.4,.4,1), opacity .3s, filter .3s, box-shadow .3s; }
.lsnov .pc.lc.best { transform:translateY(-6px); box-shadow:0 0 0 2px var(--acc), 0 8px 16px rgba(0,0,0,.3); }
.lsnov .pc.lc.dim { opacity:.38; filter:saturate(.3); }
.lsnov .lscards { display:flex; justify-content:center; gap:7px; perspective:600px; }
.lsnov .lsgrp { display:grid; gap:6px; justify-items:center; padding:10px 12px 12px; border-radius:20px; background:var(--well); width:100%; }
.lsnov .lsgrp small { font-weight:900; font-size:12px; letter-spacing:.06em; text-transform:uppercase; opacity:.7; }
.lsnov .lsgrp.mid { background:radial-gradient(ellipse at 50% 40%, var(--felt1), var(--felt2) 70%, var(--felt3)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.12); color:#fff; }
.lsnov .lsgrp.you { box-shadow:inset 0 0 0 2px var(--acc); }
.lsnov .lsname { min-height:44px; display:grid; gap:2px; } .lsnov .lsname b { font-family:'Lilita One'; font-weight:400; font-size:24px; color:var(--acc); } .lsnov .lsname small { font-weight:800; opacity:.75; }
.lsnov .lsfoot { width:100%; display:grid; gap:10px; justify-items:center; margin-top:4px; }
.lsnov .lsfoot .btn.wide { width:100%; }
.lsnov .lsans { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; width:100%; }
.lsnov .lsans .btn { min-height:54px; font-family:'Lilita One'; font-weight:400; font-size:20px; padding:0 14px; }
/* a player in a lesson: avatar, name and hand, their two cards */
.lsnov .lspl { position:relative; display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; padding:8px 10px 8px 8px; border-radius:18px; background:var(--well); text-align:left; transition:box-shadow .25s, background .25s, opacity .25s; }
.lsnov .lspl .lscards .pc.lc { --w:min(12.5vw,48px); }
.lsnov .lsav { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; font:900 18px Nunito,sans-serif; color:#fff; background:linear-gradient(var(--a1),var(--a2)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); }
.lsnov .lsplc { display:grid; gap:2px; min-width:0; } .lsnov .lsplc b { font-weight:900; font-size:16px; }
.lsnov .lshn { font-style:normal; font-weight:800; font-size:13px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lsnov .lspl.won { background:color-mix(in srgb, var(--lsGood) 18%, transparent); box-shadow:inset 0 0 0 2.5px var(--lsGood); }
.lsnov .lspl.won .lshn { color:var(--lsGood); opacity:1; }
.lsnov .lspl.won::after { content:"Wins"; position:absolute; top:-9px; left:56px; padding:1px 10px; border-radius:999px; font:900 11.5px Nunito,sans-serif; background:var(--lsGood); color:var(--lsGoodTx); }
.lsnov .lspl.lost { opacity:.7; }
.lsnov .lspl.lead { box-shadow:inset 0 0 0 2.5px var(--acc); } .lsnov .lspl.lead .lshn { color:var(--acc); opacity:1; }
.lsnov .lslead { position:absolute; top:-9px; left:56px; padding:1px 10px; border-radius:999px; font:900 11.5px Nunito,sans-serif; background:var(--acc); color:var(--accTx); opacity:0; transform:scale(.6); transition:opacity .2s, transform .3s cubic-bezier(.2,1.6,.4,1); }
.lsnov .lspl.lead .lslead { opacity:1; transform:none; }
.lsnov .lswhy, .lsnov .lssay { margin:0; min-height:2.9em; font-weight:700; font-size:16px; line-height:1.45; max-width:34ch; }
.lsnov .lswatch { display:grid; gap:12px; width:100%; }
.lsnov .lsstage { font-family:'Lilita One'; font-size:22px; padding:2px 16px; border-radius:999px; background:var(--well); color:var(--acc); }
.lsnov .lsslot { width:min(15vw,58px); aspect-ratio:5/7; border-radius:7px; border:2px dashed rgba(255,255,255,.35); }
.lsnov[data-theme=walnut], .lsnov[data-theme=creamplum] { --lsGood:#178a4c; --lsGoodTx:#fff; --accTx:#fff; }
/* the lessons list */
.lsnov .lshub, .lsnov .lsend { display:grid; gap:14px; justify-items:center; width:100%; padding-top:6px; }
.lsnov .lsicon { font-size:44px; line-height:1; }
.lsnov .lslist { list-style:none; margin:4px 0 0; padding:0; display:grid; gap:10px; width:100%; }
.lsnov .lsbtn { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; padding:12px 14px; border:0; border-radius:18px; text-align:left; cursor:pointer; font:inherit; color:var(--tx);
  background:var(--well); box-shadow:inset 0 0 0 1.5px var(--tline); transition:transform .1s; }
.lsnov .lsbtn:active { transform:translateY(2px); }
.lsnov .lsbtn > i { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; font:400 20px 'Lilita One',sans-serif; font-style:normal; background:var(--btn); }
.lsnov .lsbtn b { display:block; font-weight:900; font-size:16.5px; } .lsnov .lsbtn small { font-weight:800; font-size:12.5px; opacity:.7; }
.lsnov .lsbtn.done > i { background:#1fa85f; color:#fff; }
.lsnov .lsbtn.next { background:color-mix(in srgb, var(--acc) 16%, transparent); box-shadow:inset 0 0 0 2.5px var(--acc); }
.lsnov .lsbtn.next > i { background:var(--acc); color:var(--accTx); }
.lsnov .lsbtn em { font-style:normal; font-family:'Lilita One'; font-size:16px; padding:6px 14px; border-radius:999px; background:var(--acc); color:var(--accTx); }
.lsnov .lsbadge { display:grid; place-items:center; width:84px; height:84px; margin-top:24px; border-radius:50%; font-size:44px; font-weight:900; color:#fff; background:#1fa85f; box-shadow:0 0 0 8px rgba(31,168,95,.25); }
.lsnov .lsend .btn.wide { width:100%; margin-top:8px; }
/* the ladder, slid up over a lesson */
.lsnov .lssheet { position:fixed; inset:0; z-index:5; display:grid; align-items:end; background:rgba(0,0,0,.45); animation:t2pop .2s ease-out; }
.lsnov .lssc { max-height:88vh; overflow:auto; display:grid; gap:12px; padding:18px 16px calc(18px + var(--sab, 0px)); border-radius:24px 24px 0 0; background:linear-gradient(var(--sh1), var(--sh3)); width:min(520px,100%); margin:0 auto; text-align:left; }
.lsnov .lssc h3 { margin:0; font-family:'Lilita One'; font-weight:400; font-size:22px; }
.lsnov .ranks { width:100%; text-align:left; }
@media (prefers-reduced-motion: reduce) { .lsnov .pc.lc, .lsnov .lslead { transition:none; } }
/* the practice coach's closing cards: the button, then a quiet way back */
.t2 .pcoach.done .pc-row { flex-direction:column; align-items:stretch; gap:8px; }
.t2 .pcoach.done .pc-row .pc-skip { align-self:center; }

/* the control panel slides off the bottom while the result card is up, and back for the next hand */
.t2 .ctl { transition:transform .4s cubic-bezier(.3,.7,.3,1); }
.t2 .ctl.away { transform:translateY(105%); pointer-events:none; }
@media (prefers-reduced-motion: reduce) { .t2 .ctl { transition:none; } }

/* someone else's bet while they're still putting it together: faded chips that breathe, and the amount with "…" */
.t2 .pile .dpile { display:flex; gap:3px; align-items:flex-end; opacity:.75; animation:t2draft 1.2s ease-in-out infinite alternate; }
.t2 .betlbl.drafting { opacity:.8; font-style:italic; }
@keyframes t2draft { to { opacity:.45; } }
@media (prefers-reduced-motion: reduce) { .t2 .pile .dpile { animation:none; } }

/* the game settings sheet: the table code first, the table actions in one row, then you and the players */
.pg .sh-code { display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 10px 10px 14px; border-radius:16px; background:var(--well); }
.pg .sh-code .lab { font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
.pg .sh-code b { font-size:20px; letter-spacing:.12em; }
.pg .sh-ic { margin-left:auto; width:40px; height:40px; flex:none; border:0; border-radius:50%; display:grid; place-items:center; background:var(--btn); color:var(--btnTx); cursor:pointer; }
.pg .sh-ic svg, .pg .sh-act svg { width:20px; height:20px; }
.pg .sh-cv { display:flex; align-items:baseline; gap:10px; min-width:0; }
.pg .sh-cv .lab, .pg .sh-cv b { line-height:1; }
.pg .sh-share { display:flex; align-items:center; gap:6px; height:40px; padding:0 16px; border:0; border-radius:999px; background:#ffc94a; color:#5a3300; font:inherit; font-weight:900; font-size:15px; cursor:pointer; flex:none; }
.pg .sh-share svg { width:18px; height:18px; } .pg .sh-share:active { transform:translateY(1px); }
.pg #sheet .qr { width:180px; margin:12px auto 0; background:#fff; border-radius:14px; padding:8px; }
.pg .sh-rule { border:0; height:1px; background:var(--tline); margin:14px 0; }
.pg .sh-main { margin-bottom:10px; }
.pg .sh-acts { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:8px; }
.pg .sh-act { display:grid; justify-items:center; gap:4px; padding:10px 4px; border:0; border-radius:14px; background:var(--btn); color:var(--btnTx); font:inherit; font-weight:800; font-size:12.5px; cursor:pointer; box-shadow:0 3px 0 var(--btnLip); }
.pg .sh-act:active { transform:translateY(2px); box-shadow:none; }
.pg .sh-act.danger { color:#ff8a98; }
.pg .sh-row { display:flex; align-items:center; gap:10px; width:100%; min-height:48px; margin-bottom:6px; padding:10px 14px; border:0; border-radius:14px; background:var(--well); color:var(--tx); font:inherit; font-weight:800; font-size:15px; text-align:left; cursor:pointer; }
.pg .sh-sw { position:relative; margin-left:auto; width:44px; height:26px; flex:none; border-radius:13px; background:var(--tline); transition:background .2s; }
.pg .sh-sw::after { content:""; position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .2s; }
.pg .sh-sw.on { background:#1fa85f; } .pg .sh-sw.on::after { left:21px; }
.pg .sh-addbot { display:flex; align-items:center; gap:6px; margin-top:6px; padding:8px 8px 8px 14px; border-radius:14px; border:1.5px dashed var(--tline); font-weight:800; }
.pg .sh-addbot span { margin-right:auto; } .pg .sh-addbot small { display:block; font-size:11.5px; opacity:.7; }

/* while the menu is open, cards and chips in flight stay hidden instead of drawing over it */
body.sheet-open .shot, body.sheet-open .chipfly, body.sheet-open .fxl { visibility:hidden; }

/* Appearance: one row that opens to the colour swatches */
.pg .sh-fold > summary { list-style:none; } .pg .sh-fold > summary::-webkit-details-marker { display:none; }
.pg .sh-fold .sh-val { margin-left:auto; font-weight:800; opacity:.7; }
.pg .sh-fold > summary::after { content:""; width:8px; height:8px; margin-left:4px; border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); opacity:.7; transition:transform .2s; }
.pg .sh-fold[open] > summary::after { transform:rotate(225deg) translate(-2px,-2px); }
.pg .sh-fold > .hint { margin:4px 2px 10px; }
.pg .sh-go { margin-left:auto; width:8px; height:8px; border-right:2.5px solid currentColor; border-top:2.5px solid currentColor; transform:rotate(45deg); opacity:.7; }
.pg .sh-fold .explain { margin:4px 2px 10px; }
.pg .sh-fold > summary:not(:has(.sh-val))::after { margin-left:auto; }