/* Poker Night v2 — 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:206px;
  /* 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] { --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] { --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] { --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 ================= */
.t2 { height:100%; height:100dvh; 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(.t2), body:has(.t2) { background:var(--page, #1c0820); 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.end { color:var(--foldTx); }
.tb.on { color:var(--acc); box-shadow:inset 0 0 0 2px var(--acc),0 3px 0 var(--btnLip); }
.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 .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); }
.t2 .stage.myturn .mystk { animation:t2glow 1.6s ease-in-out infinite; }
@keyframes t2glow { 50% { filter:drop-shadow(0 0 8px color-mix(in srgb,var(--acc) 70%,transparent)); } }
.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 { animation:t2mewin 1s ease-in-out infinite alternate; }
@keyframes t2mewin { from { box-shadow:0 0 0 3px #ffd84a,0 0 14px 3px rgba(255,200,60,.5); } to { box-shadow:0 0 0 3px #ffd84a,0 0 30px 9px rgba(255,200,60,.75); } }
.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 { 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; }
.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; }
@keyframes t2shine { 0%,60% { left:-40%; } 90%,100% { left:125%; } }
.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, 206px) + 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); }

/* ================= other screens ================= */
/* phones held sideways: table on the left, controls in a column on the right */
@media (orientation: landscape) and (max-height: 560px) {
  .t2 { grid-template-columns:minmax(0,1fr) min(330px,42vw); grid-template-rows:auto minmax(0,1fr); }
  .t2-top { grid-column:1 / -1; padding-top:calc(6px + var(--sat)); padding-bottom:4px; }
  .t2 .table { grid-column:1; grid-row:2; }
  .t2 .ctl { grid-column:2; grid-row:2; border-radius:22px 0 0 0; padding:12px max(12px,var(--sar)) calc(10px + var(--sab)) 12px; align-content:end; gap:8px; }
  .t2 .quick { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .note { bottom:calc(14px + var(--sab)); }
}

/* ================= 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 .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); }
.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; }
.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.myturn .mystk { animation:t2glow 1.6s ease-in-out infinite; }
.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 */
@media (orientation: landscape) and (max-height: 560px) {
  .t2 { grid-template-rows:auto auto minmax(0,1fr); }
  .t2 .table { grid-column:1; grid-row:2 / 4; }
  .t2 .mebar { grid-column:2; grid-row:2; padding:2px 8px 4px; gap:4px; }
  .t2 .ctl { grid-column:2; grid-row:3; }
  .t2 .mebar .stacks { gap:6px; min-height:0; zoom:.8; }
}
.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:186px; }
  .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); }