/* The poker table page. Colours come from style.js (measured from the picture) as CSS variables set at start:
   --felt --felt-d --pool --rail --rail-d --rail-l --brass --lea --lea-l --vest --vest-l --cream --ink --glow */
@font-face { font-family: "Inter"; src: url("fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-ext.woff2") format("woff2"); font-weight: 100 900;
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #140b06; user-select: none; -webkit-user-select: none;
  touch-action: manipulation; overscroll-behavior: none; font-family: Inter, "Segoe UI", Arial, sans-serif; }
#view { position: fixed; inset: 0; overflow: hidden; background: #140b06; }
/* on windows wider than the picture: the room's own colours carry on softly at the sides (the picture, blurred and dimmed) */
#roomfill { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(26px) brightness(.55) saturate(1.1); }
#stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; contain: layout; }
#stage img { -webkit-user-drag: none; }
#bg { position: absolute; left: 0; top: 0; }
.layer { position: absolute; left: 0; top: 0; width: 0; height: 0; }

/* ---- the cat ---- */
.catbox { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.catbreath, .catact { position: absolute; left: 0; top: 0; width: 1px; height: 1px; will-change: transform; }
.catpose { position: absolute; display: block; }
.railfront { position: absolute; display: block; }

/* ---- cards ---- */
.card { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.ci { position: absolute; left: 0; top: 0; width: 100px; height: 142px; }
.cf { position: absolute; inset: 0; border-radius: 6.3px; box-shadow: -3px 3px 6px rgba(4, 12, 34, .34), -1px 1px 1.5px rgba(4, 12, 34, .3); }
.cb, .cfa { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 6.3px; display: block; }
.card.glow .cf { box-shadow: 0 0 0 3px var(--glow), 0 0 22px 6px rgba(255, 213, 138, .75), -3px 3px 6px rgba(4, 12, 34, .3); }
.card.dim .cf { filter: brightness(.55) saturate(.6); }

/* ---- chips ---- */
.stack { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.stack svg.chips { position: absolute; overflow: visible; display: block; }
.betwrap { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.betlbl { position: absolute; left: 22px; top: -14px; padding: 2px 8px 3px; border-radius: 10px; white-space: nowrap;
  font: 700 15px/1.15 Inter, sans-serif; color: var(--cream); background: linear-gradient(180deg, var(--lea-l), var(--lea));
  box-shadow: 0 0 0 1px rgba(243, 180, 106, .45), -2px 3px 6px rgba(4, 12, 34, .45); font-variant-numeric: tabular-nums; }
.betwrap.left .betlbl { left: auto; right: 22px; }
.potlbl { position: absolute; left: 0; top: 0; padding: 4px 14px 5px; border-radius: 14px;
  font: 800 19px/1.1 Inter, sans-serif; color: var(--cream); white-space: nowrap; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, rgba(41, 55, 103, .92), rgba(19, 43, 95, .92));
  box-shadow: 0 0 0 1.5px rgba(243, 180, 106, .6), -2px 4px 10px rgba(4, 12, 34, .5); }
.potlbl small { font-weight: 600; font-size: 14px; opacity: .8; margin-right: 6px; letter-spacing: .02em; }
.potlbl:empty { display: none; }
.dbtn { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.dbtn svg { position: absolute; left: -24px; top: -16px; width: 48px; height: 34px; overflow: visible; display: block; filter: drop-shadow(-2px 3px 2.5px rgba(4, 12, 34, .5)); }
.dbtn b { position: absolute; left: -21px; top: -15px; width: 42px; height: 21px; text-align: center;
  font: 900 17px/21px Inter, sans-serif; color: var(--ink); transform: scaleY(.62); transform-origin: 50% 60%; }

/* ---- seats ---- */
.seat { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.sglow { position: absolute; left: -80px; top: -80px; width: 160px; height: 160px; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 213, 138, .55), rgba(255, 213, 138, .18) 55%, rgba(255, 213, 138, 0)); }
.seat.turn .sglow { opacity: 1; }
.seat.win .sglow { opacity: 1; background: radial-gradient(closest-side, rgba(255, 226, 160, .95), rgba(255, 200, 110, .35) 55%, rgba(255, 213, 138, 0)); }
@keyframes pulse { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.05); } }
.sring { position: absolute; left: -64px; top: -64px; width: 128px; height: 128px; transform: scale(.9); opacity: 0; transition: opacity .2s; }
.sring svg { display: block; }
.sring circle { fill: none; stroke-width: 7; }
.sring .rbg { stroke: rgba(4, 12, 34, .5); }
.sring .rt { stroke: var(--brass); stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(255, 213, 138, .8)); }
.seat.turn .sring { opacity: 1; }
.seat.hurry .sring .rt { stroke: #ff5a4a; filter: drop-shadow(0 0 4px rgba(255, 90, 74, .9)); }
.sdisc { position: absolute; left: -44px; top: -44px; width: 88px; height: 88px; border-radius: 50%; padding: 4px;
  background: linear-gradient(225deg, #ffe7b8 0%, var(--brass) 30%, #b0702e 70%, #6e3d12 100%);
  box-shadow: -4px 7px 12px rgba(4, 12, 34, .55), inset 0 0 0 1px rgba(255, 240, 210, .35); transition: filter .3s; }
.spic { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: relative;
  background: radial-gradient(circle at 65% 30%, var(--lea-l), var(--lea) 70%); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55); }
.spic.initial { display: flex; align-items: center; justify-content: center; color: var(--cream); font: 800 34px Inter, sans-serif; }
.savatar { width: 100%; height: 100%; object-fit: cover; display: block; }
.splate { position: absolute; left: -60px; top: 42px; width: 120px; padding: 3px 6px 4px; border-radius: 11px; text-align: center;
  background: linear-gradient(180deg, var(--lea-l), var(--lea)); color: var(--cream);
  box-shadow: 0 0 0 1.5px rgba(243, 180, 106, .5), -3px 5px 10px rgba(4, 12, 34, .5); transition: opacity .3s; }
.seat.pabove .splate { top: -94px; }
.seat.pside .splate { left: -176px; top: -24px; text-align: right; padding-right: 12px; }
.sname { font: 600 14px/1.15 Inter, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .92; }
.schips { font: 800 17px/1.15 Inter, sans-serif; color: var(--brass); font-variant-numeric: tabular-nums; }
.stag { position: absolute; left: 30px; top: -66px; padding: 4px 11px 5px; border-radius: 12px; opacity: 0; white-space: nowrap;
  font: 800 16px/1.1 Inter, sans-serif; color: var(--ink); background: var(--cream); transform-origin: 0 100%;
  box-shadow: -2px 4px 8px rgba(4, 12, 34, .5); pointer-events: none; }
/* the tag on the seat's outer side (never towards the middle or the cat) */
.seat.tagl .stag { left: auto; right: 30px; transform-origin: 100% 100%; }
.seat.pabove .stag { top: -30px; left: 48px; }
.seat.pabove.tagl .stag { left: auto; right: 48px; }
.stag.fold { background: #8c8f9c; color: #fff; }
.stag.raise, .stag.bet { background: linear-gradient(180deg, var(--vest-l), var(--vest)); color: var(--cream); }
.stag.allin { background: linear-gradient(180deg, #ff6a3d, #c8202c); color: #fff; box-shadow: 0 0 14px rgba(255, 106, 61, .8); }
.stag.win { background: linear-gradient(180deg, #ffe7b8, var(--brass)); color: var(--ink); }
.seat.folded .sdisc { filter: saturate(.35) brightness(.6); }
.seat.folded .splate { opacity: .65; }
.seat.out .sdisc, .seat.out .splate { filter: grayscale(1) brightness(.5); opacity: .55; }
.seq { position: absolute; left: -62px; top: 98px; width: 124px; opacity: 0; transition: opacity .3s; text-align: center; }
.seat.pabove .seq { top: -150px; }
.seq.on { opacity: 1; }
.eqbar { height: 9px; border-radius: 5px; background: rgba(4, 12, 34, .7); overflow: hidden; box-shadow: 0 0 0 1px rgba(243, 180, 106, .5); }
.eqbar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--brass), #ffe7b8); }
.seq b { display: inline-block; margin-top: 3px; padding: 1px 9px; border-radius: 9px; font: 900 21px/1.1 Inter, sans-serif;
  color: #fff; background: rgba(4, 12, 34, .72); text-shadow: 0 0 8px rgba(255, 213, 138, .7); font-variant-numeric: tabular-nums; }

/* the hand name over your cards, the big moments */
.handname { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); padding: 5px 16px 6px; border-radius: 16px;
  font: 800 20px/1.1 Inter, sans-serif; color: var(--cream); white-space: nowrap; opacity: 0;
  background: linear-gradient(180deg, rgba(41, 55, 103, .94), rgba(19, 43, 95, .94)); box-shadow: 0 0 0 1.5px rgba(243, 180, 106, .6), -2px 5px 12px rgba(4, 12, 34, .5); }
.bigname { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); opacity: 0; white-space: nowrap; text-align: center;
  font: 900 56px/1 Inter, sans-serif; letter-spacing: -.01em; color: #fff2d6;
  text-shadow: 0 2px 0 #b0702e, 0 4px 0 #6e3d12, 0 10px 24px rgba(0, 0, 0, .6), 0 0 34px rgba(255, 200, 110, .7); }
.bigname small { display: block; font: 800 24px/1.3 Inter, sans-serif; color: var(--brass); text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }

/* the room's light: the dim of the all-in moment (a canvas drawn once per layout) */
#dim { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
#fx { position: absolute; left: 0; top: 0; pointer-events: none; }

/* ---- the screen's controls (screen px, over the scene) ---- */
#ui { position: fixed; inset: 0; pointer-events: none; color: var(--cream); z-index: 30; }
#ui > * { pointer-events: auto; }
.topbar { position: absolute; top: 12px; left: 12px; display: flex; gap: 8px; }
.topbar.r { left: auto; right: 12px; }
.ib { width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(41, 55, 103, .9), rgba(19, 43, 95, .9)); color: var(--cream);
  box-shadow: 0 0 0 1.5px rgba(243, 180, 106, .55), 0 4px 10px rgba(0, 0, 0, .45); }
.ib svg { width: 22px; height: 22px; display: block; }
.ib:active { transform: scale(.94); }
.ib.off { opacity: .55; }
#bar { position: absolute; right: 16px; bottom: 16px; width: 430px; display: none; flex-direction: column; gap: 8px; }
#bar.on { display: flex; }
.qrow { display: flex; gap: 6px; align-items: center; }
.qb { flex: 1; height: 38px; border-radius: 12px; border: 0; cursor: pointer; font: 700 15px Inter, sans-serif; color: var(--cream);
  background: linear-gradient(180deg, rgba(41, 55, 103, .95), rgba(19, 43, 95, .95)); box-shadow: 0 0 0 1px rgba(243, 180, 106, .45), 0 3px 8px rgba(0, 0, 0, .4); }
.qb:active { transform: translateY(1px); }
.srow { display: flex; gap: 10px; align-items: center; padding: 6px 12px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(41, 55, 103, .93), rgba(19, 43, 95, .93)); box-shadow: 0 0 0 1px rgba(243, 180, 106, .45), 0 3px 8px rgba(0, 0, 0, .4); }
.srow input[type=range] { flex: 1; accent-color: var(--brass); height: 30px; }
.srow .amt { min-width: 92px; text-align: right; font: 800 20px Inter, sans-serif; color: var(--brass); font-variant-numeric: tabular-nums; }
.brow { display: flex; gap: 8px; }
.ab { flex: 1; height: 58px; border-radius: 16px; border: 0; cursor: pointer; font: 800 18px/1.05 Inter, sans-serif; color: var(--cream);
  box-shadow: 0 0 0 1.5px rgba(243, 180, 106, .6), 0 5px 12px rgba(0, 0, 0, .5); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.ab small { display: block; font-weight: 600; font-size: 13px; opacity: .8; margin-top: 2px; }
.ab:active { transform: translateY(2px); }
.ab.fold { background: linear-gradient(180deg, #3b4570, #1d2a55); }
.ab.call { background: linear-gradient(180deg, #c2753a, #7c3b13); }
.ab.raise { background: linear-gradient(180deg, #b0313a, #6f1517); }
.ab kbd { font: 700 11px Inter, sans-serif; opacity: .55; margin-left: 4px; }
.toast { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); padding: 8px 18px; border-radius: 14px; opacity: 0;
  background: rgba(19, 43, 95, .94); box-shadow: 0 0 0 1.5px rgba(243, 180, 106, .6); font: 700 16px Inter, sans-serif; pointer-events: none; }
body.tall #bar { left: 8px; right: 8px; bottom: 8px; width: auto; }
body.tall .ab { height: 60px; font-size: 18px; }
body.tall .topbar { top: 8px; left: 8px; }
body.tall .topbar.r { left: auto; right: 8px; }
.ib.hide { display: none; }

/* the phone: the seats a little smaller, their plates narrower (the table is long, the seats close together) */
.seat.tall .sdisc { transform: scale(.9); }
.seat.tall .splate { left: -54px; width: 108px; top: 38px; }
.seat.tall .sname { font-size: 13px; }
.seat.tall .schips { font-size: 16px; }
.seat.tall .stag { font-size: 15px; top: -58px; }
.seat.tall .stag { top: -60px; }
body.tall .ib { width: 40px; height: 40px; }
body.tall .ib svg { width: 19px; height: 19px; }

/* the all-in TV moment: a big win chance beside each player's face-up cards */
.eqbig { position: absolute; left: 0; top: 0; padding: 4px 14px 8px; border-radius: 16px; text-align: center; pointer-events: none;
  background: linear-gradient(180deg, rgba(19, 26, 52, .92), rgba(8, 12, 30, .92)); box-shadow: 0 0 0 2px rgba(243, 180, 106, .55), -3px 6px 14px rgba(0, 0, 0, .55); }
.eqbig b { display: block; font: 900 40px/1.05 Inter, sans-serif; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.eqbig i { display: block; width: 104px; height: 8px; margin: 3px auto 0; border-radius: 4px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.eqbig u { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--brass), #ffe7b8); text-decoration: none; }
.eqbig.lead { box-shadow: 0 0 0 3px #ffd58a, 0 0 28px 8px rgba(255, 213, 138, .55), -3px 6px 14px rgba(0, 0, 0, .55); }
.eqbig.lead b { color: #ffe7b8; text-shadow: 0 0 14px rgba(255, 200, 110, .8); }
.eqbig.dead { opacity: .55 !important; }
.potlbl.side { font-size: 16px; padding: 3px 11px 4px; }

/* dialogs */
.dlgveil { position: fixed; inset: 0; background: rgba(8, 5, 2, .55); display: flex; align-items: center; justify-content: center; padding: 12px; z-index: 70; }
.dlg { position: relative; width: min(520px, 100%); max-height: calc(100% - 24px); overflow: auto; border-radius: 22px; padding: 18px 20px 20px;
  background: linear-gradient(180deg, #2a3768, #15244f); color: var(--cream); box-shadow: 0 0 0 2px rgba(243, 180, 106, .6), 0 20px 50px rgba(0, 0, 0, .6); }
.dlg.wide { width: min(720px, 100%); }
.dlgt { font: 800 24px Inter, sans-serif; margin: 0 40px 12px 2px; color: #fff2d6; }
.dlgx { position: absolute; right: 12px; top: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  font: 400 28px/44px Inter, sans-serif; color: var(--cream); background: rgba(255, 255, 255, .08); }
.drow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(243, 180, 106, .18); flex-wrap: wrap; }
.dlab { font: 600 16px Inter, sans-serif; opacity: .9; }
.dopts, .dstep { display: flex; gap: 6px; flex-wrap: wrap; }
.dopt { min-width: 48px; height: 48px; padding: 0 12px; border-radius: 12px; border: 0; cursor: pointer; font: 700 15px Inter, sans-serif;
  color: var(--cream); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(243, 180, 106, .3); }
.dopt.on { background: linear-gradient(180deg, #c2753a, #7c3b13); box-shadow: inset 0 0 0 1.5px #ffd58a; }
.dnum { min-width: 46px; text-align: center; font: 800 24px/48px Inter, sans-serif; color: var(--brass); }
.dgo { display: block; width: 100%; height: 56px; margin-top: 14px; border-radius: 16px; border: 0; cursor: pointer; font: 800 18px Inter, sans-serif;
  color: var(--cream); background: linear-gradient(180deg, #b0313a, #6f1517); box-shadow: 0 0 0 1.5px rgba(243, 180, 106, .6), 0 6px 14px rgba(0, 0, 0, .45); }
.dgo.alt { background: linear-gradient(180deg, #3b4570, #1d2a55); margin-top: 8px; }
.dkeys { margin-top: 12px; font: 500 13px Inter, sans-serif; opacity: .65; }
.dtext { font: 500 17px/1.4 Inter, sans-serif; margin: 4px 0 6px; }
.dhist { white-space: pre-wrap; font: 500 14px/1.45 ui-monospace, Consolas, monospace; background: rgba(0, 0, 0, .25); padding: 12px; border-radius: 12px; max-height: 60vh; overflow: auto; }
.lrow { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(243, 180, 106, .15); }
.lrow.me .lname { color: #ffe7b8; }
.lrow.out { opacity: .5; }
.lpos { width: 22px; text-align: right; font: 800 16px Inter, sans-serif; opacity: .7; }
.lpic { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 65% 30%, var(--lea-l), var(--lea)); box-shadow: 0 0 0 2px var(--brass); font: 800 18px Inter, sans-serif; flex: none; }
.lpic img { width: 100%; height: 100%; object-fit: cover; }
.lname { flex: 1; font: 700 16px Inter, sans-serif; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbar { width: 110px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.lbar i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; background: linear-gradient(90deg, var(--brass), #ffe7b8); }
.lchips { width: 76px; text-align: right; font: 800 16px Inter, sans-serif; color: var(--brass); font-variant-numeric: tabular-nums; }
body.tall .lbar { width: 70px; }

.backbtn { position: absolute; right: 16px; bottom: 16px; width: 220px; }
body.tall .backbtn { left: 8px; right: 8px; bottom: 8px; width: auto; }

/* side seats: the tag above the picture, centred (their cards lie on the felt beside them) */
.seat.tagt .stag { left: 0; right: auto; top: -84px; transform-origin: 50% 100%; }
.seat.tagt.tall .stag { top: -80px; }

/* the winner's banner: a clean plate, placed where it covers no other label */
.winplate { position: absolute; left: 0; top: 0; opacity: 0; padding: 7px 22px 9px; border-radius: 18px; text-align: center; white-space: nowrap; pointer-events: none;
  background: linear-gradient(180deg, #2a3768, #15244f); box-shadow: 0 0 0 2px rgba(243, 180, 106, .8), 0 0 22px rgba(255, 213, 138, .35), 0 10px 24px rgba(0, 0, 0, .5); }
.winplate b { display: block; font: 800 28px/1.15 Inter, sans-serif; color: #fff2d6; letter-spacing: -.005em; }
.winplate small { display: block; margin-top: 2px; font: 700 17px/1.2 Inter, sans-serif; color: var(--brass); font-variant-numeric: tabular-nums; }
body.tall .winplate { padding: 6px 16px 7px; }
body.tall .winplate b { font-size: 23px; }
body.tall .winplate small { font-size: 15px; }
/* a person's photo / initials in the round frame (Seifli's look: white initials on a gradient) */
.spic.initial { color: #fff; font: 700 34px Inter, sans-serif; letter-spacing: .01em; }
.savatar.photo { object-fit: cover; }
.dpics { gap: 6px; }
.dpic { width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 50%; overflow: hidden; font-size: 13px; }
.dpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dpic.on { box-shadow: 0 0 0 2.5px #ffd58a; background: rgba(255, 255, 255, .1); }

/* ---- online: the lobby, the online bar, Sit here, reactions, the reconnecting pill ---- */
/* the lobby: the room behind, blurred and darker; a glass header; the cat host at the table's edge; the tables as cards,
   each a small oval table with its ten seats round it (the game's navy plates, brass and felt) */
.lobby { position: fixed; inset: 0; z-index: 20; display: none; flex-direction: column; overflow: hidden; color: var(--cream); background: #0b0d1c; }
.lobby.on { display: flex; }
.lbg { position: absolute; inset: -70px; background: url(img/bg.jpg) center 32% / cover; filter: blur(22px) brightness(.42) saturate(1.2); pointer-events: none; }
.lshade { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 58% 40% at 50% 15%, rgba(255, 190, 110, .17), rgba(255, 190, 110, 0) 70%),
    radial-gradient(ellipse 115% 90% at 50% 36%, rgba(4, 6, 16, 0) 42%, rgba(4, 6, 16, .74) 100%); }
:root[data-theme="light"] .lbg { filter: blur(22px) brightness(.6) saturate(1.15); }
:root[data-theme="light"] .lshade { opacity: .65; }
.lhead { position: relative; z-index: 3; flex: none; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 24px;
  background: linear-gradient(180deg, rgba(12, 16, 36, .84), rgba(12, 16, 36, .52)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(243, 180, 106, .24), 0 10px 26px rgba(0, 0, 0, .22); }
.lback { display: none; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; align-items: center; justify-content: center;
  padding-bottom: 4px; background: rgba(255, 255, 255, .09); color: var(--cream); font: 400 32px/1 Inter, sans-serif; }
.ltitle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; }
.lmarkhead { width: 36px; height: 36px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #241406;
  background: linear-gradient(225deg, #ffe7b8 0%, var(--brass) 42%, #b0702e 100%); box-shadow: 0 3px 9px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 240, 210, .55); }
.lmarkhead svg { width: 20px; height: 20px; display: block; }
.ltw { min-width: 0; display: flex; flex-direction: column; }
.ltw b { font: 800 20px/1.1 Inter, sans-serif; color: #fff2d6; letter-spacing: -.01em; }
.ltw small { display: flex; align-items: center; gap: 6px; margin-top: 3px; min-width: 0; font: 600 12.5px/1.2 Inter, sans-serif; color: rgba(250, 243, 231, .74); white-space: nowrap; }
.ltw small span:last-child { overflow: hidden; text-overflow: ellipsis; }
.lmeface { position: relative; flex: none; width: 19px; height: 19px; border-radius: 50%; padding: 1.5px; background: linear-gradient(225deg, #ffe7b8, var(--brass) 40%, #b0702e); }
.lmeface.empty { display: none; }
.lmeface .lfi { font-size: 7.5px; }
/* the gold buttons: Create a table (header; the big one with no tables), Back to my table */
.lcreate, .lbig, .dgo.gold { border: 0; cursor: pointer; white-space: nowrap; color: #2a1606; text-shadow: 0 1px 0 rgba(255, 240, 210, .45);
  background: linear-gradient(180deg, #ffeac2 0%, #f7c27c 42%, #dc923f 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 222, .65), inset 0 -2px 0 rgba(110, 61, 18, .35), 0 6px 16px rgba(0, 0, 0, .42), 0 0 22px rgba(255, 200, 110, .16); }
.lcreate, .lbig { display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .15s, filter .15s; }
.lcreate { flex: none; height: 44px; padding: 0 20px 0 15px; border-radius: 14px; font: 800 15.5px Inter, sans-serif; }
.lcreate svg, .lbig svg { width: 18px; height: 18px; flex: none; }
@media (hover: hover) { .lcreate:hover, .lbig:hover { filter: brightness(1.07); transform: translateY(-1px); } }
.lcreate:active, .lbig:active { transform: translateY(1px) scale(.98); }
.lscroll { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 4px 24px 44px;
  scrollbar-width: thin; scrollbar-color: rgba(243, 180, 106, .35) transparent; }
/* the host: a window onto the table's top edge, the real cat behind it (stage px scaled by --cs), his line beside him */
.lhero { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 12px; }
.lhost { --cs: .66; position: relative; width: calc(590px * var(--cs)); height: calc(300px * var(--cs)); flex: none; }
.lhost::before { content: ""; position: absolute; left: 50%; top: 42%; width: 190%; height: 175%; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 196, 120, .22), rgba(255, 196, 120, 0)); }
.lcat { position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 17%, #000 83%, transparent 100%), linear-gradient(180deg, #000 0, #000 79%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 17%, #000 83%, transparent 100%), linear-gradient(180deg, #000 0, #000 79%, transparent 100%);
  mask-composite: intersect; }
.lcatstage { position: absolute; left: 0; top: 0; width: 590px; height: 300px; transform: scale(var(--cs)); transform-origin: 0 0; }
.lcatlayer { position: absolute; left: -471px; top: -100px; width: 0; height: 0; }
.lsay { position: absolute; left: calc(408px * var(--cs)); top: calc(14px * var(--cs)); z-index: 2; width: max-content; max-width: 250px;
  padding: 10px 16px 11px; border-radius: 18px 18px 18px 7px; font: 800 17px/1.28 Inter, sans-serif; color: #1c2340; letter-spacing: -.005em;
  background: linear-gradient(180deg, #fffaf1, #f4e7d0); box-shadow: 0 0 0 1.5px #e9b46e, 0 10px 22px rgba(0, 0, 0, .45); transform-origin: 0 100%; text-wrap: balance; }
.ltail { position: absolute; left: -14px; bottom: 5px; width: 16px; height: 18px; display: block; }
.ltail svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lbig { display: none; margin-top: 22px; height: 60px; padding: 0 30px 0 24px; border-radius: 18px; font: 800 19px Inter, sans-serif; }
.lobby.empty .lbig { display: inline-flex; }
.lobby.empty .lhero { padding-top: max(28px, 9vh); }
.lobby.empty .lhost { --cs: .8; }
.lobby.empty .lcreate, .lobby.empty .lsec, .lobby.view .lcreate, .lobby.view .lbig { display: none; }
/* the open tables */
.lsec { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 1170px; margin: 18px auto 18px;
  font: 800 12.5px Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.lsec::before, .lsec::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(243, 180, 106, 0), rgba(243, 180, 106, .45)); }
.lsec::after { background: linear-gradient(90deg, rgba(243, 180, 106, .45), rgba(243, 180, 106, 0)); }
.lsec b { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  font: 800 12px Inter, sans-serif; letter-spacing: 0; color: #241406; background: linear-gradient(180deg, #ffe7b8, var(--brass)); }
.lgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; max-width: 1180px; margin: 0 auto; }
.lcard { position: relative; flex: 0 1 376px; min-width: 0; border-radius: 24px; padding: 16px 18px 18px;
  background: radial-gradient(120% 60% at 50% 0%, rgba(255, 213, 138, .09), rgba(255, 213, 138, 0) 62%), linear-gradient(180deg, #28386f 0%, #182858 55%, #111e46 100%);
  box-shadow: 0 0 0 1.5px rgba(243, 180, 106, .42), inset 0 1px 0 rgba(255, 240, 210, .14), 0 18px 38px rgba(0, 0, 0, .52);
  transition: transform .24s cubic-bezier(.2, .8, .2, 1), box-shadow .24s; }
@media (hover: hover) { .lcard:hover { transform: translateY(-4px); box-shadow: 0 0 0 1.5px rgba(255, 213, 138, .85), inset 0 1px 0 rgba(255, 240, 210, .18), 0 26px 46px rgba(0, 0, 0, .56), 0 0 30px rgba(255, 200, 110, .14); } }
.lcard.running { box-shadow: 0 0 0 1.5px rgba(255, 213, 138, .72), inset 0 1px 0 rgba(255, 240, 210, .14), 0 18px 38px rgba(0, 0, 0, .52), 0 0 26px rgba(255, 200, 110, .13); }
.lcard.mine { box-shadow: 0 0 0 2px #ffd58a, inset 0 1px 0 rgba(255, 240, 210, .18), 0 18px 38px rgba(0, 0, 0, .52), 0 0 34px rgba(255, 200, 110, .28); }
.lctop { display: flex; align-items: center; gap: 10px; }
.lcname { flex: 1; min-width: 0; font: 800 19px/1.2 Inter, sans-serif; color: #fff2d6; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpill { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px 0 10px; border-radius: 13px;
  font: 800 12.5px Inter, sans-serif; letter-spacing: .02em; color: rgba(250, 243, 231, .86); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(243, 180, 106, .32); }
.lpill i { width: 7px; height: 7px; border-radius: 50%; background: #8f98b8; }
.lpill.on { color: #241406; background: linear-gradient(180deg, #ffe7b8, var(--brass)); box-shadow: 0 0 14px rgba(255, 200, 110, .35); }
.lpill.on i { background: #c8202c; animation: lpulse 1.6s ease-out infinite; }
@keyframes lpulse { 0% { box-shadow: 0 0 0 0 rgba(200, 32, 44, .6); } 70% { box-shadow: 0 0 0 6px rgba(200, 32, 44, 0); } 100% { box-shadow: 0 0 0 0 rgba(200, 32, 44, 0); } }
.lcsub { display: flex; align-items: center; gap: 6px; margin-top: 5px; font: 600 13.5px Inter, sans-serif; color: rgba(250, 243, 231, .74); font-variant-numeric: tabular-nums; }
.lic { width: 15px; height: 15px; flex: none; display: inline-flex; color: var(--brass); }
.lic svg { width: 100%; height: 100%; display: block; }
.lcsub .lic:nth-of-type(2) { margin-left: 12px; }
.lcount { font-weight: 800; color: rgba(250, 243, 231, .92); }
/* the small table: rail, felt, cup holders, the cat dealing at the top, the ten seats round it */
.lmini { position: relative; height: 214px; margin: 8px -4px 10px; }
.loval { position: absolute; left: 13%; right: 13%; top: 26%; bottom: 12%; z-index: 2; border-radius: 50%;
  background: linear-gradient(180deg, #eaa566 0%, #a85b27 30%, #7a3a15 68%, #4a2007 100%);
  box-shadow: 0 12px 20px rgba(0, 0, 0, .5), 0 2px 0 rgba(0, 0, 0, .3), inset 0 1.5px 0 rgba(255, 222, 172, .6), inset 0 -2px 3px rgba(0, 0, 0, .35); }
.lfelt { position: absolute; inset: 7px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(ellipse 72% 66% at 50% 40%, #3b6dc1 0%, #2050a0 38%, #153f88 70%, #0e2d66 100%);
  box-shadow: inset 0 0 0 1px rgba(243, 180, 106, .55), inset 0 4px 9px rgba(0, 0, 0, .45); }
.lfelt::after { content: ""; position: absolute; left: 14%; right: 14%; top: 17%; bottom: 17%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 231, 184, .2); }
.lfmark { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; color: rgba(255, 231, 184, .15); }
.lfmark svg { width: 100%; height: 100%; display: block; }
.lcup { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff0cc, #d29550 55%, #5a3010); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .35); }
.ldealer { position: absolute; left: 50%; top: 26%; width: 54px; height: 69px; margin: -58px 0 0 -27px; z-index: 1; }
.ldpaws { position: absolute; left: 50%; top: 26%; width: 54px; height: 8px; margin: -1px 0 0 -27px; z-index: 3; }
.ldealer img, .ldpaws img { display: block; width: 100%; height: 100%; }
.lpair { position: absolute; width: 22px; height: 16px; margin: -8px 0 0 -11px; }
.lpair i { position: absolute; top: 0; width: 11.5px; height: 16px; border-radius: 2px; box-shadow: inset 0 0 0 1.3px #f3ece3, 0 1px 2px rgba(0, 0, 0, .5);
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .16) 0 1px, rgba(255, 255, 255, 0) 1px 3px), linear-gradient(135deg, #3468c8, #0b3a8a); }
.lpair i:first-child { left: 0; transform: rotate(-7deg); }
.lpair i + i { left: 9.5px; transform: rotate(6deg); }
.lseat { position: absolute; width: 0; height: 0; z-index: 4; }
.lface { position: absolute; left: -21px; top: -21px; width: 42px; height: 42px; border-radius: 50%; padding: 2.5px;
  background: linear-gradient(225deg, #ffe7b8 0%, var(--brass) 32%, #b0702e 70%, #6e3d12 100%); box-shadow: -2px 4px 9px rgba(4, 12, 34, .6); }
.lfi { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
  font: 700 14px Inter, sans-serif; color: #fff; letter-spacing: .01em; background: radial-gradient(circle at 65% 30%, var(--lea-l), var(--lea) 70%); }
.lfi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lface.empty { padding: 0; background: rgba(8, 14, 36, .38); box-shadow: inset 0 0 0 1.5px rgba(243, 180, 106, .34), inset 0 2px 6px rgba(0, 0, 0, .4); }
.lface.me { box-shadow: 0 0 0 2px #ffd58a, 0 0 16px 3px rgba(255, 213, 138, .6), -2px 4px 9px rgba(4, 12, 34, .6); }
.lcrown { display: none; position: absolute; left: -8px; top: -33px; width: 16px; height: 16px; z-index: 1; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .6)); }
.lcrown svg { display: block; width: 100%; height: 100%; }
.lseat.host .lcrown { display: block; }
.lbtns { display: flex; gap: 10px; }
.lbtns .dgo { margin: 0; height: 46px; border-radius: 14px; font-size: 16px; }
.lbtns .ljoin { flex: 1.45; }
.lbtns .lwatch { flex: 1; }
.lbtns .dgo:disabled { opacity: .45; cursor: default; }
.dgo.gold { text-shadow: none; }
.dinput { flex: 1; min-width: 0; height: 40px; border-radius: 10px; border: 0; padding: 0 12px; font: 600 15px Inter, sans-serif;
  background: rgba(255, 255, 255, .1); color: var(--cream); box-shadow: inset 0 0 0 1px rgba(243, 180, 106, .35); }
.lfoot { display: none; }
.lobby button:focus-visible { outline: 2px solid #ffd58a; outline-offset: 2px; }
/* the phone: one column, the cat a little to the left so his line has room, Create at the bottom of the screen */
@media (max-width: 640px) {
  .lhead { height: 56px; padding: 0 12px; gap: 10px; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(12, 16, 36, .9); }
  .lback { display: flex; }
  .lmarkhead { width: 31px; height: 31px; }
  .lmarkhead svg { width: 17px; height: 17px; }
  .ltw b { font-size: 18px; }
  .lscroll { padding: 2px 16px 116px; }
  .lhost { --cs: .5; left: -38px; }
  .lsay { left: calc(400px * var(--cs)); max-width: 152px; padding: 8px 12px 9px; font-size: 15px; }
  .lobby.empty .lhost { --cs: .6; left: -46px; }
  .lobby.empty .lsay { max-width: 160px; }
  .lcreate { position: fixed; left: 16px; right: 16px; bottom: 16px; height: 56px; border-radius: 18px; font-size: 18px; }
  .lfoot { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 108px; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgba(8, 10, 24, 0), rgba(8, 10, 24, .93) 60%); }
  .lobby.empty .lfoot, .lobby.view .lfoot { display: none; }
  .lobby.empty .lscroll, .lobby.view .lscroll { padding-bottom: 40px; }
  .lsec { margin: 14px auto 14px; }
  .lgrid { gap: 16px; }
  .lcard { flex: 1 1 100%; padding: 14px 14px 16px; border-radius: 22px; }
  .lmini { height: 198px; margin: 6px -2px 8px; }
  .lface { left: -19px; top: -19px; width: 38px; height: 38px; }
  .lfi { font-size: 13px; }
  .lcrown { top: -31px; }
}

/* the table's online bits: the bar (back, menu), the reactions behind one button, Sit here, bubbles, the host's crown */
.obar { position: fixed; left: 12px; top: 12px; display: none; gap: 8px; z-index: 30; } .obar.on { display: flex; }
body.online.ontable .topbar:not(.r) { display: none; }
.obar .ib { font: 400 24px/1 Inter, sans-serif; color: var(--cream); }
.ebar { position: fixed; top: 12px; right: 66px; display: none; z-index: 31; } .ebar.on { display: block; }
.etray { position: absolute; top: 54px; left: 50%; margin-left: -26px; width: 52px; display: none; flex-direction: column; align-items: center; gap: 6px; padding: 6px;
  border-radius: 26px; background: rgba(13, 19, 44, .86); box-shadow: 0 0 0 1.5px rgba(243, 180, 106, .5), 0 12px 26px rgba(0, 0, 0, .45); }
.etray.on { display: flex; }
.eb { width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; font-size: 21px; line-height: 40px; background: rgba(255, 255, 255, .06); }
.eb:active { transform: scale(.9); }
body.tall .ebar { top: 8px; right: 54px; }
body.tall .etray { top: 48px; margin-left: -23px; width: 46px; padding: 5px; }
body.tall .eb { width: 36px; height: 36px; font-size: 19px; line-height: 36px; }
.sithere { position: absolute; left: 0; top: 0; height: 40px; padding: 0 14px; border: 0; border-radius: 20px; cursor: pointer; white-space: nowrap;
  font: 700 15px Inter, sans-serif; color: var(--ink); background: linear-gradient(180deg, #ffe7b8, var(--brass)); box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }
.rbubble { position: absolute; left: 0; top: 0; font-size: 34px; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.seat.away .sdisc { filter: saturate(.4) brightness(.7); } .seat.away .splate { opacity: .7; }
.seat.host .sdisc::after { content: ""; position: absolute; left: 50%; top: -17px; width: 28px; height: 24px; margin-left: -14px; pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffd58a' stroke='%236e3d12' stroke-width='1.2' stroke-linejoin='round' d='M3 18.5 4.6 7.8l4.6 4.3L12 5.2l2.8 6.9 4.6-4.3L21 18.5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.netpill { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 60; padding: 6px 14px; border-radius: 14px; display: none;
  font: 700 13px Inter, sans-serif; color: var(--ink); background: linear-gradient(180deg, #ffe7b8, var(--brass)); box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
.netpill.on { display: block; }
body.inlobby #ui .topbar, body.inlobby #ui .obar, body.inlobby #ui .ebar, body.inlobby #ui .bar { display: none !important; }