/* Patti Room styles.
   Layout: one-screen card-room app. Header bar, felt table with seats on an ellipse, action dock; side panel (log/ledger/rules) on wide screens, slide-up sheet on phones. Single deliberate dark look: a late-night home game under warm light. */
/* Colors: Daylight (light) with a matching dark version. The app sets data-mode on <html>
   from the player's choice, else from their phone's setting. */
:root {
  --night: #f6f4ef; --panel: #ffffff; --panel-2: #efece4; --line: #ddd8cc;
  --felt: #272c2a; --felt-deep: #0d100f; --rim-1: #2e3331; --rim-2: #111413;
  --brass: #17201d; --marigold: #d9761f; --ivory: #17201d; --muted: #5c6b66;
  --red: #c8372d; --ink: #f6f4ef; --good: #1f8a52; --bad: #c0392b;
  --card: #ffffff; --card-ink: #17201d; --back-1: #7a1f1a; --back-2: #8f2a22;
  --chip-bg: rgb(255 255 255 / .94); --overlay: rgb(255 255 255 / .97); --scrim: rgb(20 30 26 / .45);
  --on-felt: #ffffff; --on-felt-muted: rgb(255 255 255 / .8); --pot: #ffe08a;
  color-scheme: light;
  --display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) {
  --night: #111614; --panel: #181e1c; --panel-2: #1f2624; --line: #2c3532;
  --felt: #272c2a; --felt-deep: #0d100f; --rim-1: #2e3331; --rim-2: #111413;
  --brass: #eef2ef; --marigold: #f09a4a; --ivory: #eef2ef; --muted: #93a19c;
  --red: #c8372d; --ink: #111614; --good: #5fcf8e; --bad: #ee7b6e;
  --card: #f7f7f4; --card-ink: #17201d; --back-1: #7a1f1a; --back-2: #8f2a22;
  --chip-bg: rgb(16 20 19 / .86); --overlay: rgb(22 27 25 / .96); --scrim: rgb(0 0 0 / .6);
  --on-felt: #ffffff; --on-felt-muted: rgb(255 255 255 / .78); --pot: #ffe08a;
  color-scheme: dark;
} }
:root[data-mode="dark"] {
  --night: #111614; --panel: #181e1c; --panel-2: #1f2624; --line: #2c3532;
  --felt: #272c2a; --felt-deep: #0d100f; --rim-1: #2e3331; --rim-2: #111413;
  --brass: #eef2ef; --marigold: #f09a4a; --ivory: #eef2ef; --muted: #93a19c;
  --red: #c8372d; --ink: #111614; --good: #5fcf8e; --bad: #ee7b6e;
  --card: #f7f7f4; --card-ink: #17201d; --back-1: #7a1f1a; --back-2: #8f2a22;
  --chip-bg: rgb(16 20 19 / .86); --overlay: rgb(22 27 25 / .96); --scrim: rgb(0 0 0 / .6);
  --on-felt: #ffffff; --on-felt-muted: rgb(255 255 255 / .78); --pot: #ffe08a;
  color-scheme: dark;
}
html, body { height: 100%; margin: 0; }
body { padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box; background: var(--night); color: var(--ivory); font-family: var(--body); font-size: 15px; line-height: 1.45; }
* { box-sizing: border-box; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }

#app { height: 100%; display: grid; grid-template-rows: auto 1fr; }
.bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--night); }
.brand { font-family: var(--display); font-weight: 600; font-size: 22px; color: var(--brass); letter-spacing: -.01em; line-height: 1; }
.chiptag { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 2px 8px; }
.bar .grow { flex: 1; }
.ghost { background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 5px 11px; color: var(--ivory); }
.ghost:hover { border-color: var(--muted); }

/* ---------- Lobby ---------- */
#lobby { overflow-y: auto; padding-inline: 16px; padding-block: 20px 110px; }
.lobby-in { max-width: 1040px; margin: 0 auto; display: grid; gap: 28px; }
.lede h1 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 5vw, 46px); line-height: 1.05; margin: 0 0 8px; text-wrap: balance; }
.lede h1 em { font-style: normal; color: var(--brass); }
.lede p { margin: 0; color: var(--muted); max-width: 62ch; }
h2.sec { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
h2.sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.settings { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 16px; }
.field { display: grid; gap: 4px; min-width: 0; }
.field > span { font-size: 13px; color: var(--muted); }
.field input[type=text], .field input[type=number], .field select, .field textarea { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; }
.field textarea { resize: vertical; min-height: 64px; }
.check { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.check input { accent-color: var(--brass); width: 18px; height: 18px; }
.hint { font-size: 12px; color: var(--muted); }

.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.vcard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; align-content: start; }
.vcard.on { border-color: color-mix(in srgb, var(--brass) 70%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--brass) 9%, var(--panel)), var(--panel)); }
.vhead { display: flex; align-items: center; gap: 10px; }
.vhead input { accent-color: var(--brass); width: 18px; height: 18px; flex: none; }
.vname { font-weight: 700; font-size: 17px; }
.badge { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--marigold) 22%, transparent); color: var(--marigold); }
.vcard p { margin: 0; color: var(--muted); font-size: 13.5px; }
.vacts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.link { background: none; border: 0; padding: 0; color: var(--brass); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.link.danger { color: var(--bad); }
.newv { border: 1.5px dashed var(--line); background: transparent; border-radius: 12px; min-height: 120px; color: var(--brass); font-weight: 600; display: grid; place-items: center; gap: 4px; padding: 12px; text-align: center; }
.newv small { color: var(--muted); font-weight: 400; }
.newv:hover { border-color: var(--brass); }
.importrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.importrow input { flex: 1 1 220px; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.startdock { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, var(--night) 30%); display: flex; justify-content: center; pointer-events: none; }
.primary { pointer-events: auto; background: var(--brass); color: var(--ink); border: 0; border-radius: 10px; padding: 12px 26px; font-weight: 700; font-size: 16px; box-shadow: 0 6px 20px rgb(0 0 0 / .35); }
.primary:hover { filter: brightness(1.07); }
.primary:disabled { opacity: .45; cursor: not-allowed; }
.legal { font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }

/* ---------- Table ---------- */
#tableview { display: grid; grid-template-columns: 1fr; min-height: 0; }
.play { display: grid; grid-template-rows: 1fr auto; min-height: 0; padding-inline: 16px; padding-block: 10px 0; gap: 8px; }
.feltwrap { position: relative; min-height: 0; display: grid; place-items: center; }
.felt { position: relative; width: min(100%, 860px); height: 100%; max-height: 520px; min-height: 300px; }
/* The table: a padded rail with depth, felt with a little texture and light, and a thin betting line.
   --ti-x/--ti-y place the table inside its box; --rail is the rail's thickness. */
.felt { --ti-x: 13%; --ti-y: 17%; --rail: 14px; }
.felt::before {
  content: ""; position: absolute; inset: var(--ti-y) var(--ti-x); border-radius: 999px; z-index: 0;
  background:
    radial-gradient(120% 70% at 50% 0%, rgb(255 255 255 / .28), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--rim-1) 82%, white), var(--rim-1) 35%, var(--rim-2) 78%, color-mix(in srgb, var(--rim-2) 70%, black));
  box-shadow:
    0 9px 0 color-mix(in srgb, var(--rim-2) 55%, black),
    0 10px 0 1px rgb(0 0 0 / .18),
    0 26px 48px rgb(0 0 0 / .42),
    inset 0 1.5px 0 rgb(255 255 255 / .45),
    inset 0 -2px 0 rgb(0 0 0 / .18);
}
.felt::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: calc(var(--ti-y) + var(--rail)) calc(var(--ti-x) + var(--rail)); border-radius: 999px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    radial-gradient(60% 55% at 50% 38%, rgb(255 255 255 / .10), transparent 70%),
    radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--felt) 88%, white 8%), var(--felt) 48%, var(--felt-deep) 100%);
  box-shadow: inset 0 6px 18px rgb(0 0 0 / .55), inset 0 0 50px rgb(0 0 0 / .35), 0 0 0 1px rgb(0 0 0 / .35);
  outline: 1.5px solid color-mix(in srgb, var(--pot) 32%, transparent); outline-offset: -22px;
}
.center { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); text-align: center; display: grid; gap: 4px; justify-items: center; width: 52%; }
.vchip { font-family: var(--display); font-size: clamp(16px, 2.6vw, 22px); color: var(--on-felt); line-height: 1; }
.pot { font-size: clamp(22px, 4vw, 32px); font-weight: 700; color: var(--pot); line-height: 1; }
.pot small { font-size: 12px; font-weight: 500; color: var(--on-felt-muted); display: block; letter-spacing: .1em; text-transform: uppercase; }
.stakes { font-size: 12.5px; color: var(--on-felt-muted); }
.jokerbox { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--marigold); }

.seat { position: absolute; transform: translate(-50%, -50%); width: 92px; display: grid; justify-items: center; gap: 3px; transition: opacity .2s; }
.seat .who { display: flex; align-items: center; gap: 6px; background: var(--chip-bg); border: 1px solid var(--line); border-radius: 99px; padding: 2px 10px 2px 3px; max-width: 100%; }
.av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: var(--ink); background: var(--muted); flex: none; }
.seat .nm { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.seat .ch { font-size: 12px; color: var(--brass); }
.seat.turn .who { border-color: var(--brass); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brass) 40%, transparent), 0 0 18px color-mix(in srgb, var(--brass) 45%, transparent); }
.seat.packed { opacity: .45; }
.seat.win .who { border-color: var(--good); box-shadow: 0 0 0 2px color-mix(in srgb, var(--good) 45%, transparent); }
.pill { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; padding: 1px 6px; border-radius: 4px; background: var(--chip-bg); color: var(--muted); }
.pill.seen { color: var(--ivory); }
.pill.blind { color: var(--brass); }
.pill.out { color: var(--bad); }
.dealer { position: absolute; top: -6px; right: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--card); color: var(--card-ink); font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.seat .lbl { font-size: 11px; color: var(--ivory); background: var(--chip-bg); border-radius: 4px; padding: 0 5px; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }

.hand { display: flex; justify-content: center; }
.hand .card + .card { margin-left: calc(var(--cw) * -0.42); }
.card { --cw: 30px; width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: calc(var(--cw) * .12); background: var(--card); color: var(--card-ink); position: relative; box-shadow: 0 2px 5px rgb(0 0 0 / .4); display: grid; align-content: start; padding: calc(var(--cw) * .06) calc(var(--cw) * .1); line-height: 1; flex: none; }
.card .r { font-weight: 700; font-size: calc(var(--cw) * .42); }
.card .s { font-size: calc(var(--cw) * .4); }
.card .big { position: absolute; right: calc(var(--cw) * .1); bottom: calc(var(--cw) * .06); font-size: calc(var(--cw) * .62); }
.card.red { color: var(--red); }
.card.back { background: repeating-linear-gradient(45deg, var(--back-1) 0 4px, var(--back-2) 4px 8px); border: 2px solid var(--card); }
.card.wild { box-shadow: 0 0 0 2px var(--marigold), 0 2px 8px rgb(0 0 0 / .5); }
.card.wild::after { content: "★"; position: absolute; top: -6px; right: -6px; width: 15px; height: 15px; border-radius: 50%; background: var(--marigold); color: var(--ink); font-size: 9px; font-weight: 700; display: grid; place-items: center; }
.card.dim { filter: brightness(.55); }
.card.open { outline: 2px dashed color-mix(in srgb, var(--brass) 80%, transparent); outline-offset: 1px; }

/* My hand + actions */
.dock { display: grid; gap: 8px; padding-block: 6px calc(10px + env(safe-area-inset-bottom, 0px)); }
.mine { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; min-height: 84px; }
.mine .hand .card { --cw: 54px; }
.mine .hand .card + .card { margin-left: 6px; }
.mineinfo { display: grid; gap: 2px; min-width: 0; }
.mineinfo .handlbl { font-weight: 700; font-size: 18px; }
.mineinfo .sub { font-size: 13px; color: var(--muted); }
.actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: 760px; width: 100%; margin: 0 auto; }
.act { border-radius: 10px; padding: 10px 6px; border: 1px solid var(--line); background: var(--panel); font-weight: 600; line-height: 1.15; display: grid; gap: 1px; justify-items: center; }
.act small { font-weight: 500; font-size: 12px; color: var(--muted); }
.act.main { background: var(--brass); color: var(--ink); border-color: var(--brass); }
.act.main small { color: color-mix(in srgb, var(--ink) 70%, transparent); }
.act.warn { color: var(--bad); }
.act:disabled { opacity: .35; cursor: not-allowed; }
.waiting { text-align: center; color: var(--muted); font-size: 13px; min-height: 18px; }
@media (max-width: 560px) {
  .chiptag { display: none; }
  .bar .ghost { padding: 5px 9px; font-size: 14px; }
  .actions { gap: 6px; }
  .act { padding: 9px 2px; font-size: 14px; }
  .seat { width: 76px; }
  .seat .nm { font-size: 11.5px; }
  .seat .card { --cw: 22px; }
  .mine .hand .card { --cw: 46px; }
}

/* Result */
.result { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: min(92%, 420px); background: var(--overlay); border: 1px solid var(--brass); border-radius: 14px; padding: 16px; display: grid; gap: 10px; z-index: 5; box-shadow: 0 20px 50px rgb(0 0 0 / .6); max-height: 96%; overflow-y: auto; }
.result h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--brass); line-height: 1.1; }
.result .rows { display: grid; gap: 6px; }
.rrow { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.rrow .hand .card { --cw: 26px; }
.rrow .hand .card + .card { margin-left: 3px; }
.rrow b { font-weight: 600; min-width: 56px; }
.rrow.w b { color: var(--good); }
.rbtns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.rbtns .primary { padding: 9px 18px; font-size: 15px; box-shadow: none; }

/* Side panel */
.side { border-left: 1px solid var(--line); background: var(--panel); display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; background: none; border: 0; padding: 11px 6px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; }
.tabs button[aria-selected=true] { color: var(--ivory); border-bottom-color: var(--brass); }
.pane { overflow-y: auto; padding: 14px 16px; min-height: 0; }
.logline { font-size: 13.5px; padding: 3px 0; color: color-mix(in srgb, var(--ivory) 88%, transparent); }
.logline.head { color: var(--brass); font-weight: 600; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.logline.muted { color: var(--muted); }
.logline.win { color: var(--good); font-weight: 600; }
table.led { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.led th { text-align: right; color: var(--muted); font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.led td { text-align: right; padding: 7px 4px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.led th:first-child, .led td:first-child { text-align: left; }
.pos { color: var(--good); } .neg { color: var(--bad); }
.ledger-note { font-size: 12px; color: var(--muted); margin-top: 12px; }
.rules h4 { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.rules h4:first-child { margin-top: 0; }
.rules ul { margin: 0; padding-left: 18px; }
.rules li { margin: 3px 0; }
.rankrow { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 13.5px; }
.rankrow .hand .card { --cw: 22px; }
.rankrow .hand .card + .card { margin-left: 2px; }
.rankrow span { min-width: 0; }
.hist { margin-top: 12px; }
@media (max-width: 979px) {
  .side { position: fixed; left: 0; right: 0; bottom: 0; height: min(72%, 560px); border-left: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; z-index: 30; box-shadow: 0 -20px 50px rgb(0 0 0 / .5); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .side .close { display: block; }
}
.side .close { display: block; background: none; border: 0; color: var(--muted); padding: 4px 6px; font-size: 24px; line-height: 1; }

/* Sheets & modals */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; display: grid; place-items: center; padding: 16px; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; width: min(100%, 440px); display: grid; gap: 12px; max-height: 92%; overflow-y: auto; }
.modal h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--brass); }
.modal p { margin: 0; color: var(--muted); }
.mbtns { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.mbtns .primary { box-shadow: none; padding: 9px 18px; font-size: 15px; }
.pickgrid { display: grid; gap: 8px; }
.pickgrid button { text-align: left; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; }
.pickgrid button:hover { border-color: var(--brass); }
.pickgrid small { color: var(--muted); }

.builder { width: min(100%, 980px); display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 820px) { .builder { grid-template-columns: 1.15fr 1fr; } }
.bform { display: grid; gap: 14px; min-width: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font-size: 14px; }
.seg button[aria-pressed=true] { background: var(--brass); color: var(--ink); border-color: var(--brass); font-weight: 600; }
.rankpick button { min-width: 38px; padding: 6px 8px; }
.preview { background: var(--felt-deep); border: 1px solid color-mix(in srgb, var(--felt) 70%, var(--line)); border-radius: 12px; padding: 14px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.preview h4 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.prow { display: flex; align-items: center; gap: 10px; }
.prow .rank { width: 22px; color: var(--brass); font-weight: 700; flex: none; }
.prow .hand .card { --cw: 30px; }
.prow .hand .card + .card { margin-left: 3px; }
.prow .pl { font-size: 13.5px; min-width: 0; }
.ptags { display: flex; flex-wrap: wrap; gap: 6px; }
.ptags span { font-size: 12px; border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; color: var(--ivory); }
.toast { position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); background: var(--panel-2); border: 1px solid var(--brass); border-radius: 10px; padding: 8px 14px; z-index: 60; font-size: 14px; max-width: calc(100% - 32px); box-shadow: 0 10px 30px rgb(0 0 0 / .5); }
@media (prefers-reduced-motion: no-preference) {
  .seat.turn .who { animation: pulse 1.4s ease-in-out infinite; }
  @keyframes pulse { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 25%, transparent), 0 0 26px color-mix(in srgb, var(--brass) 55%, transparent); } }
  .deal .card { animation: deal .35s ease-out both; }
  @keyframes deal { from { transform: translateY(-14px) scale(.9); opacity: 0; } }
}

/* ---------- Multiplayer additions ---------- */
[hidden] { display: none !important; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; counter-reset: s; }
.step { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 4px; }
.step b { font-size: 16px; }
.step b::before { counter-increment: s; content: counter(s) ". "; color: var(--brass); }
.step span { color: var(--muted); font-size: 14px; }
.notice { max-width: 520px; margin: 18vh auto 0; text-align: center; display: grid; gap: 12px; padding-inline: 16px; }
.notice h2 { font-family: var(--display); font-weight: 400; font-size: 30px; margin: 0; color: var(--brass); }
.notice p { margin: 0; color: var(--muted); }
.conn { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--bad); color: var(--ink); font-weight: 600; padding: 6px 14px; border-radius: 99px; z-index: 70; font-size: 13px; }
.joinbar { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center; max-width: 560px; margin: 0 auto; width: 100%; }
.joinbar input { flex: 1 1 180px; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; }
.joinbar .primary { box-shadow: none; padding: 11px 20px; font-size: 15px; }
.joinbar .msg { color: var(--muted); font-size: 14px; text-align: center; flex-basis: 100%; }
.idle { display: grid; gap: 8px; justify-items: center; }
.idle .primary { box-shadow: none; padding: 10px 18px; font-size: 15px; }
.idle .hint { max-width: 32ch; }
.timer { position: absolute; top: -8px; left: -4px; min-width: 26px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--brass); color: var(--ink); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.timer.low { background: var(--bad); }
.seat.away .av { filter: grayscale(1) brightness(.6); }
.seat .off { font-size: 10px; color: var(--bad); text-transform: uppercase; letter-spacing: .08em; }
.tabs .dot { display: inline-block; min-width: 16px; height: 16px; border-radius: 8px; background: var(--marigold); color: var(--ink); font-size: 10px; line-height: 16px; margin-left: 4px; padding: 0 4px; }
.chat { display: grid; grid-template-rows: 1fr auto; min-height: 0; height: 100%; }
.chatlist { overflow-y: auto; min-height: 0; display: grid; align-content: start; gap: 6px; }
.chatmsg { font-size: 14px; overflow-wrap: anywhere; }
.chatmsg b { color: var(--brass); font-weight: 600; margin-right: 6px; }
.chatform { display: flex; gap: 8px; padding-top: 10px; }
.chatform input { flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.pane.flush { padding: 0; }
.pane.flush > .chat { padding: 14px 16px; }
.hostsec { display: grid; gap: 10px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.hostsec:last-child { border-bottom: 0; }
.hostsec h4 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.prow2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.prow2 .nm { font-weight: 600; flex: 1; min-width: 90px; overflow-wrap: anywhere; }
.prow2 .online { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: none; }
.prow2 .online.no { background: var(--bad); }
.small { padding: 4px 10px; font-size: 13px; border-radius: 7px; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btnrow .primary { box-shadow: none; padding: 8px 16px; font-size: 14px; }
.copybox { display: flex; gap: 8px; }
.copybox input { flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.side .settings { grid-template-columns: 1fr 1fr; }
.side .vgrid { grid-template-columns: 1fr; }
.side .vcard { padding: 10px 12px; }
.side .newv { min-height: 70px; }

.brand { white-space: nowrap; }
.bar .dot { display: inline-block; min-width: 16px; height: 16px; border-radius: 8px; background: var(--marigold); color: var(--ink); font-size: 10px; line-height: 16px; padding: 0 4px; text-align: center; }
@media (max-width: 420px) { .brand { font-size: 19px; } .bar { gap: 8px; } }

/* Fair dealing */
.fairnote { margin: 0; color: var(--muted); max-width: 62ch; }
.fairnote b { color: var(--ivory); font-weight: 600; }
.handlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.handlist li { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; margin: 0; }
.handlist li span { min-width: 0; }
.fp { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--ivory); background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.chk { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.chk .mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.chk.ok .mark { background: var(--good); color: var(--ink); }
.chk.bad .mark { background: var(--bad); color: var(--ink); }
.chk.na .mark { background: var(--panel-2); color: var(--muted); }
.chk.na { color: var(--muted); }
.raw { font-size: 13px; color: var(--muted); }
.raw summary { cursor: pointer; color: var(--brass); }
.raw dl { display: grid; gap: 2px; margin: 8px 0 0; }
.raw dt { color: var(--muted); margin-top: 6px; }
.raw dd { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--ivory); overflow-wrap: anywhere; }
.raw p { margin: 8px 0 0; }
.raw code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--ivory); }
.fairsteps { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--muted); }
.fairsteps b { color: var(--ivory); font-weight: 600; }
.modal .rows { display: grid; gap: 6px; }

.howto { margin: 4px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.fairsteps li { color: var(--ivory); }
.demo { margin-top: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.demo-row { display: flex; justify-content: space-between; gap: 10px; }
.demo-link { color: var(--brass); text-decoration: underline; text-underline-offset: 3px; flex: none; }
.demo-chk { display: flex; align-items: center; gap: 8px; color: var(--ivory); }
.demo-chk .mark { width: 18px; height: 18px; border-radius: 50%; background: var(--good); color: var(--ink); font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }

.center .hint { color: var(--on-felt-muted); }

/* Home, simplified */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ---------- Home: quiet ivory, one column, the big three aces ---------- */
:root { --h-bg: #f6f4ef; --h-ink: #17201d; --h-on-ink: #f6f4ef; --h-line: #ddd8cc; --h-field: #ffffff; --h-muted: #5c6b66; --h-accent: #1e6b52; }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) { --h-bg: #111614; --h-ink: #eef2ef; --h-on-ink: #111614; --h-line: #2c3532; --h-field: #181e1c; --h-muted: #93a19c; --h-accent: #4cc296; } }
:root[data-mode="dark"] { --h-bg: #111614; --h-ink: #eef2ef; --h-on-ink: #111614; --h-line: #2c3532; --h-field: #181e1c; --h-muted: #93a19c; --h-accent: #4cc296; }
body:not(.inroom) { background: var(--h-bg) !important; }
body:not(.inroom) .bar { background: transparent !important; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding-inline: max(28px, env(safe-area-inset-left, 0px)); }
body:not(.inroom) .brand { color: var(--h-ink); font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.brand { display: inline-flex; align-items: baseline; gap: 2px; }
.brand .bdia { width: .34em; height: .48em; fill: #c8372d; flex: none; }
#home { min-height: 0; overflow-y: auto; display: grid; justify-items: center; padding-inline: max(28px, env(safe-area-inset-left, 0px)) max(28px, env(safe-area-inset-right, 0px)); padding-block: 8px calc(24px + env(safe-area-inset-bottom, 0px)); color: var(--h-ink); }
.home-in { width: 100%; max-width: 400px; min-height: 100%; display: flex; flex-direction: column; text-align: left; }
.hmain { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; gap: 36px; padding-block: 24px; }
.hcards { display: flex; gap: 6px; }
.hcard { width: 40px; height: 56px; box-sizing: border-box; border-radius: 7px; background: #ffffff; border: 1px solid #ddd8cc; color: #17201d; font-weight: 600; font-size: 13px; line-height: 1; padding: 4px 6px; display: flex; flex-direction: column; justify-content: space-between; }
.hcard i { font-style: normal; font-size: 20px; align-self: center; padding-bottom: 6px; }
.hcard.red { color: #c8372d; }
#home h1 { margin: 0; font-family: var(--display); font-size: clamp(38px, 11vw, 46px); line-height: 1.02; font-weight: 600; letter-spacing: -.035em; color: var(--h-ink); }
.startform, .joinform { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.hlabel { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--h-muted); }
#home input { width: 100%; box-sizing: border-box; height: 52px; border-radius: 14px; border: 1px solid var(--h-line); background: var(--h-field); color: var(--h-ink); padding: 0 16px; font: inherit; font-size: 17px; text-align: left; }
#home input:focus { outline: none; border-color: var(--h-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--h-accent) 20%, transparent); }
.hbtn { height: 54px; border-radius: 14px; font: inherit; font-family: var(--body); font-size: 17px; cursor: pointer; transition: transform .12s, opacity .12s; }
.hbtn:active { transform: scale(.985); }
.hbtn.solid { border: 0; background: var(--h-ink); color: var(--h-on-ink); font-weight: 600; }
.hbtn.solid:hover { opacity: .9; }
.hbtn.line { border: 1px solid var(--h-ink); background: transparent; color: var(--h-ink); font-weight: 500; }
.hbtn.line:hover, .hbtn.line[aria-expanded="true"] { background: color-mix(in srgb, var(--h-ink) 6%, transparent); }
.joinrow { display: flex; gap: 8px; }
.joinrow input { flex: 1; min-width: 0; }
.joinrow .hbtn { padding-inline: 22px; height: 52px; }
.homefoot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--h-muted); padding-top: 12px; border-top: 1px solid var(--h-line); }
.homefoot .link { font-size: 12px; color: var(--h-muted); text-decoration: underline; text-underline-offset: 2px; padding: 0; }
.homelegal { flex-basis: 100%; display: flex; gap: 16px; }
.homelegal a { color: var(--h-muted); text-decoration: none; }
.homelegal a:hover { color: var(--h-ink); text-decoration: underline; }
@media (min-width: 700px) { .hmain { gap: 40px; } #home h1 { font-size: 56px; } }

/* Light/dark switch */
.modebtn { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; }
.modebtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }


/* Panels open one at a time from their own buttons */
@media (min-width: 980px) { #tableview.with-panel { grid-template-columns: 1fr 360px; } }
.sidehead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--line); }
.sidehead h2 { margin: 0; font-size: 17px; font-weight: 600; }
.feltwrap { position: relative; }
.corner { position: absolute; bottom: 2px; display: flex; gap: 6px; z-index: 3; }
.corner.left { left: 0; }
.corner.right { right: 0; }
.cbtn { display: grid; justify-items: center; gap: 3px; width: 50px; background: none; border: 0; padding: 0; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.cbtn .ic { width: 42px; height: 42px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); color: var(--ivory); display: grid; place-items: center; position: relative; box-shadow: 0 4px 12px rgb(0 0 0 / .12); }
.cbtn .ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cbtn:hover .ic { border-color: var(--muted); }
.cbtn[aria-pressed="true"] { color: var(--brass); }
.cbtn[aria-pressed="true"] .ic { border-color: var(--brass); color: var(--brass); }
.cbtn .dot { position: absolute; top: -3px; right: -3px; display: inline-block; min-width: 17px; height: 17px; border-radius: 9px; background: var(--marigold); color: var(--ink); font-size: 10px; line-height: 17px; padding: 0 4px; text-align: center; }
.tb { display: inline-flex; align-items: center; gap: 6px; }
.tb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tb .short { display: none; }
.tb.on { border-color: var(--brass); color: var(--brass); }
@media (max-width: 640px) { .tb .long { display: none; } .tb .short { display: inline; } }
@media (max-width: 420px) { .bar .ghost.tb { padding: 5px 8px; font-size: 13px; gap: 5px; } }
.breakcard { display: grid; gap: 8px; justify-items: center; text-align: center; }
.breakcard .handlbl { font-weight: 700; font-size: 18px; }
.breakcard .primary { box-shadow: none; padding: 10px 22px; font-size: 15px; }

.dlrow { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-bottom: 10px; }
.dlopts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dlopt { text-align: left; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; }
.dlopt small { color: var(--muted); font-size: 12.5px; }
.dlopt[aria-pressed="true"] { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.dlopt[aria-pressed="true"] b { color: var(--brass); }

/* Dealer's pick: blurred backdrop and a countdown */
.scrim.blur { backdrop-filter: blur(8px) saturate(.8); -webkit-backdrop-filter: blur(8px) saturate(.8); }
.pickhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pickclock { flex: none; min-width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 18px; color: var(--brass); border: 2px solid var(--brass); }
.pickclock.low { color: var(--bad); border-color: var(--bad); }
.pickbar { height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.pickbar span { display: block; height: 100%; background: var(--brass); border-radius: 3px; animation-name: pickdrain; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes pickdrain { to { width: 0; } }
@media (prefers-reduced-motion: reduce) { .pickbar span { animation: none; } }

/* ---------- Table screen: Options menu, numbered seats, chat box ---------- */
.optwrap { position: relative; }
.optbtn { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.optbtn svg, .menuitem svg, .tb svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.optmenu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 200px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px; display: grid; gap: 2px; box-shadow: 0 14px 40px rgb(0 0 0 / .22); }
.menuitem { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 10px 12px; font-size: 15px; color: var(--ivory); }
.menuitem:hover, .menuitem:focus-visible { background: var(--panel-2); }
.menuitem .short { display: none; }
.menuitem.on { color: var(--brass); }
#btnExit { color: var(--bad); }
.tableinfo { display: grid; justify-items: end; line-height: 1.15; margin-right: 4px; }
.ti-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.ti-v { font-size: 17px; font-weight: 700; }
.tb { position: relative; }
.tb .dot { position: absolute; top: -6px; right: -6px; display: inline-block; min-width: 17px; height: 17px; border-radius: 9px; background: var(--marigold); color: var(--ink); font-size: 10px; line-height: 17px; padding: 0 4px; text-align: center; }
@media (max-width: 700px) { .tableinfo { display: none !important; } }
@media (max-width: 460px) {
  .bar { gap: 6px; padding-inline: 12px; }
  .brand { font-size: 18px; }
  .optbtn span, .tb span:not(.dot) { display: none; }
  .optbtn, .bar .ghost.tb { padding: 6px 8px; }
}

/* Seats 1-9 */
.seatbox { position: absolute; transform: translate(-50%, -50%); width: 92px; height: 50px; border: 1.5px dashed color-mix(in srgb, var(--muted) 55%, transparent); border-radius: 12px; display: grid; place-items: center; color: var(--muted); background: transparent; padding: 0; z-index: 1; }
.seatbox .sn { position: absolute; top: 3px; left: 7px; font-size: 11px; font-weight: 600; opacity: .8; }
.seatbox .sl { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; padding-left: .22em; }
.seatbox .ss { font-size: 10.5px; position: absolute; bottom: 3px; }
button.seatbox { cursor: pointer; }
button.seatbox:hover, button.seatbox:focus-visible { border-color: var(--brass); color: var(--brass); border-style: solid; background: color-mix(in srgb, var(--brass) 8%, transparent); }
.seatbox.ask { border-color: var(--marigold); color: var(--ivory); }
.seatbox.ask .sl { letter-spacing: 0; text-transform: none; font-weight: 600; padding: 0 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .seatno { position: absolute; top: -8px; left: -2px; font-size: 10px; font-weight: 700; color: var(--muted); }
.seat, .center { z-index: 2; }
@media (max-width: 560px) {
  .seatbox { width: 60px; height: 40px; border-radius: 10px; }
  .seatbox .sl { font-size: 10.5px; letter-spacing: .14em; }
  .seatbox .sn { font-size: 10px; top: 2px; left: 5px; }
}

/* Dock: chat box on the left, your cards and moves in the middle */
.dock { grid-template-columns: 1fr; }
.dockmain { display: grid; gap: 8px; min-width: 0; }
.chatbox { display: flex; gap: 8px; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.chatbtns { display: grid; gap: 6px; align-content: start; }
.cbx { font-size: 12.5px; font-weight: 600; padding: 6px 10px; text-transform: uppercase; letter-spacing: .06em; }
.cbx[aria-pressed="true"] { border-color: var(--brass); color: var(--brass); }
.chatmain { flex: 1; min-width: 0; display: grid; gap: 6px; }
.chatfeed { overflow-y: auto; min-height: 0; display: grid; align-content: start; gap: 3px; font-size: 13.5px; }
.chatfeed .chatmsg b { color: var(--brass); margin-right: 6px; font-weight: 600; }
.chatline { display: flex; gap: 6px; }
.chatline input { flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.chatline .ghost { padding: 6px 10px; font-size: 13px; }
@media (min-width: 980px) {
  .dock { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(0, 340px); align-items: end; column-gap: 16px; }
  .chatbox { grid-column: 1; grid-row: 1; }
  .dockmain { grid-column: 2; grid-row: 1; }
  .chatfeed { height: 108px; }
}
@media (max-width: 979px) {
  .chatbox { padding: 6px; }
  .chatbtns { grid-auto-flow: column; align-content: center; }
  .chatmain { grid-template-columns: 1fr; }
  /* Only the latest message on phones; tap it for the full chat. */
  .chatfeed { height: 20px; overflow: hidden; cursor: pointer; display: block; white-space: nowrap; text-overflow: ellipsis; }
  .chatfeed .chatmsg { display: none; }
  .chatfeed .chatmsg:last-child { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cbx { padding: 5px 8px; font-size: 11.5px; }
}

/* Seats sit around the table, not on it */
.seatbox { background: color-mix(in srgb, var(--night) 88%, transparent); }
.chatmain { grid-template-columns: minmax(0, 1fr); }
.chatline input { width: 100%; }

.seatbox { background: var(--panel); border-color: color-mix(in srgb, var(--muted) 45%, transparent); }
.dealer { top: -10px; right: -10px; }

/* Log and Ledger sit beside the chat box, not inside it */
.chatarea { display: flex; gap: 8px; min-width: 0; align-items: stretch; }
.chatarea .chatbtns { display: grid; gap: 6px; align-content: end; flex: none; }
.chatarea .cbx { background: var(--panel); }
.chatarea .chatbox { flex: 1; min-width: 0; display: grid; gap: 6px; }
@media (min-width: 980px) {
  .chatarea { grid-column: 1; grid-row: 1; }
  .chatarea .cbx { padding: 9px 12px; }
}
@media (max-width: 979px) {
  .chatarea .chatbtns { grid-auto-flow: row; align-content: stretch; }
  .chatarea .cbx { padding: 4px 8px; }
}

/* Invite pop-up */
.copybox .primary { box-shadow: none; padding: 8px 16px; font-size: 14px; }
.sharegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 12px 8px; }
.shareopt { display: grid; justify-items: center; gap: 6px; text-decoration: none; color: var(--ivory); font-size: 12.5px; font-weight: 500; background: none; border: 0; padding: 4px 0; border-radius: 10px; }
.shareopt:hover .si, .shareopt:focus-visible .si { transform: translateY(-2px); }
.si { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; transition: transform .15s; box-shadow: 0 4px 12px rgb(0 0 0 / .15); }
.si svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Transparent seat boxes; green rail in dark mode */
.seatbox { background: transparent; }

/* Computers: let the table fill the screen */
@media (min-width: 980px) {
  .felt { width: 100%; max-width: 1500px; max-height: none; }
  .play { padding-block: 4px 0; gap: 4px; }
}

/* ---------- Chat: Log and Ledger above a roomier, friendlier chat box ---------- */
.chatarea { flex-direction: column; gap: 8px; align-items: stretch; }
.chatarea .chatbtns { display: flex; gap: 8px; align-content: initial; }
.cbx { display: inline-flex; align-items: center; gap: 7px; background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ivory); box-shadow: 0 2px 8px rgb(0 0 0 / .06); }
.cbx svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cbx:hover { border-color: var(--brass); color: var(--brass); }
.cbx[aria-pressed="true"] { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.chatarea .chatbox { padding: 0; gap: 0; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--brass) 7%, var(--panel)), var(--panel) 46px); border: 1px solid color-mix(in srgb, var(--brass) 22%, var(--line)); box-shadow: 0 10px 30px rgb(0 0 0 / .10); }
.chathead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.chattitle { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px; color: var(--brass); }
.chattitle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.chatcount { font-size: 11.5px; color: var(--muted); }
.chatcount::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--good); margin-right: 6px; vertical-align: 1px; }
.chatarea .chatfeed { padding: 10px 12px; gap: 8px; display: grid; align-content: start; }
.cm { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; }
.cm.me { margin-left: auto; flex-direction: row-reverse; }
.cav { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #1d1b19; }
.cb { display: grid; gap: 1px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 6px 10px; min-width: 0; }
.cm.me .cb { background: color-mix(in srgb, var(--brass) 16%, var(--panel)); border-color: color-mix(in srgb, var(--brass) 35%, transparent); border-radius: 14px 14px 4px 14px; }
.cn { font-size: 11px; font-weight: 700; color: var(--brass); display: flex; gap: 6px; align-items: baseline; }
.cn time { font-weight: 400; color: var(--muted); font-size: 10px; }
.ct { font-size: 13.5px; overflow-wrap: anywhere; color: var(--ivory); }
.chatempty { color: var(--muted); font-size: 13px; text-align: center; padding: 8px 0; }
.chatarea .chatline { padding: 8px 10px 10px; gap: 8px; align-items: center; }
.chatarea .chatline input { border-radius: 99px; padding: 9px 14px; background: var(--panel-2); }
.chatarea .chatline input:focus { border-color: var(--brass); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 18%, transparent); }
.sendbtn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--brass); color: var(--ink); display: grid; place-items: center; flex: none; }
.sendbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sendbtn:hover { filter: brightness(1.08); }
@media (min-width: 980px) {
  .dock { grid-template-columns: minmax(330px, 400px) minmax(0, 1fr) minmax(0, 260px); padding-inline-start: 0; }
  .play { padding-inline: 12px 16px; }
  .chatarea .chatfeed { height: 160px; }
}
@media (max-width: 979px) {
  .chatarea .chatbtns { justify-content: flex-start; }
  .cbx { padding: 5px 11px; font-size: 11.5px; }
  .chathead { display: none; }
  .chatarea .chatfeed { height: auto; padding: 8px 12px 0; display: block; }
  .chatarea .chatfeed .cm { display: none; }
  .chatarea .chatfeed .cm:last-child { display: flex; max-width: 100%; margin-left: 0; flex-direction: row; }
  .chatarea .chatfeed .cm:last-child .cb { display: flex; gap: 6px; align-items: baseline; padding: 4px 10px; border-radius: 12px; min-width: 0; }
  .chatarea .chatfeed .cm:last-child .ct { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chatarea .chatfeed .cm:last-child time { display: none; }
  .chatarea .chatline { padding: 6px 8px 8px; }
  .sendbtn { width: 34px; height: 34px; }
}

/* Chat on computers: a wide, short box that floats at the bottom left, so the table keeps its size.
   Compact by default (the last few messages as single lines); Expand grows it upward. */
.chatsize { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px 2px 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.chatsize svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.chatsize:hover { color: var(--brass); border-color: var(--brass); }
.chatbox.big .chatsize svg { transform: rotate(180deg); }
.chathead { gap: 10px; }
.chathead .chatcount { margin-left: auto; }
@media (min-width: 980px) {
  .play { position: relative; }
  .dock { grid-template-columns: 440px minmax(0, 1fr) 120px; }
  .chatarea { position: absolute; left: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: 430px; z-index: 6; }
  .chatarea .chatbtns { gap: 6px; }
  .chatarea .cbx { padding: 5px 12px; }
  .chathead { padding: 7px 12px 6px; }
  .chatarea .chatline { padding: 6px 10px 8px; }
  .chatarea .chatline input { padding: 7px 14px; }
  .sendbtn { width: 34px; height: 34px; }
  /* Compact: last few messages as single lines */
  .chatarea .chatfeed { height: 70px; padding: 6px 12px; gap: 2px; transition: height .2s; }
  .chatbox:not(.big) .cm { max-width: 100%; margin: 0; flex-direction: row; align-items: baseline; gap: 0; }
  .chatbox:not(.big) .cav { display: none; }
  .chatbox:not(.big) .cb { display: flex; gap: 6px; align-items: baseline; background: none; border: 0; padding: 0; border-radius: 0; min-width: 0; }
  .chatbox:not(.big) .cn time { display: none; }
  .chatbox:not(.big) .cn { font-size: 12.5px; flex: none; }
  .chatbox:not(.big) .ct { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
  .chatbox:not(.big) .cm.me .cn { color: var(--muted); }
  /* Expanded */
  .chatbox.big .chatfeed { height: 300px; padding: 10px 12px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .chatarea .chatfeed { transition: none; } }
@media (max-width: 979px) { .chatsize { display: none; } }
/* Keep the table's shape on short or very wide windows: never wider than about 2.4× its height */
@media (min-width: 980px) {
  .felt { width: min(100%, 1500px, calc((100vh - 250px) * 2.4)); width: min(100%, 1500px, calc((100dvh - 250px) * 2.4)); min-height: 240px; }
}
/* A smaller compact chat */
@media (min-width: 980px) {
  .chatarea { width: 380px; }
  .dock { grid-template-columns: 392px minmax(0, 1fr) 80px; }
  .chathead { padding: 5px 10px 4px; }
  .chattitle { font-size: 12.5px; }
  .chatarea .chatfeed { height: 54px; padding: 4px 12px; }
  .chatarea .chatline { padding: 4px 8px 6px; }
  .chatarea .chatline input { padding: 6px 12px; font-size: 14px; }
  .sendbtn { width: 30px; height: 30px; }
  .sendbtn svg { width: 15px; height: 15px; }
  .chatbox.big .chatfeed { height: min(300px, calc(100vh - 330px)); }
}
@media (min-width: 980px) and (max-width: 1199px) {
  .chatarea { width: 330px; }
  .dock { grid-template-columns: 342px minmax(0, 1fr) 40px; }
}

/* Table placement per screen size */
@media (max-width: 560px) { .felt { --ti-x: 11%; --ti-y: 15%; --rail: 10px; } .felt::after { outline-offset: -16px; } }
@media (min-width: 980px) { .felt { --ti-x: 9%; --ti-y: 12%; --rail: 16px; } }

/* Felt details: a faint name on the cloth and a chip-style pot */
.feltmark { position: absolute; left: 50%; top: calc(100% - var(--ti-y) - var(--rail) - 44px); transform: translateX(-50%); z-index: 1; pointer-events: none;
  font-family: var(--display); font-weight: 700; letter-spacing: .32em; text-transform: uppercase; font-size: clamp(11px, 1.4vw, 15px); color: rgb(255 255 255 / .09); white-space: nowrap; }
.pot { display: inline-grid; justify-items: center; background: rgb(0 0 0 / .28); border: 1px solid rgb(255 255 255 / .10); border-radius: 16px; padding: 5px 16px 7px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 4px 14px rgb(0 0 0 / .25); }
.pot small { display: flex; align-items: center; gap: 6px; justify-content: center; }
.pot small::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--pot); box-shadow: inset 0 0 0 2px rgb(0 0 0 / .25), inset 0 0 0 3.5px var(--pot), inset 0 0 0 4.5px rgb(255 255 255 / .55); }
.vchip { text-shadow: 0 1px 2px rgb(0 0 0 / .4); }
.seat .who { box-shadow: 0 4px 12px rgb(0 0 0 / .25); }

/* Seats: a bigger name plate with the chip count underneath and a clear status badge */
.seat { width: 136px; gap: 5px; }
.seat .who { gap: 9px; padding: 4px 14px 4px 4px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--line) 70%, var(--ivory) 10%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--chip-bg) 92%, white 8%), var(--chip-bg)); box-shadow: 0 6px 16px rgb(0 0 0 / .28), inset 0 1px 0 rgb(255 255 255 / .12); min-width: 118px; }
.seat .av { width: 36px; height: 36px; font-size: 15px; box-shadow: 0 0 0 2px var(--chip-bg), 0 0 0 3.5px color-mix(in srgb, var(--ivory) 25%, transparent); }
.seat .wt { display: grid; line-height: 1.15; min-width: 0; text-align: left; }
.seat .nm { font-size: 14.5px; font-weight: 700; }
.seat .ch { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.seat .ch::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--pot); box-shadow: inset 0 0 0 2px rgb(0 0 0 / .25), inset 0 0 0 3px var(--pot), inset 0 0 0 4px rgb(255 255 255 / .55); }
.seat .pill { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; padding: 2px 9px; border-radius: 99px; border: 1px solid transparent; box-shadow: 0 2px 6px rgb(0 0 0 / .18); }
.seat .pill.blind { color: var(--brass); border-color: color-mix(in srgb, var(--brass) 45%, transparent); }
.seat .pill.seen { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.seat .pill.out { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.seat .pill.allin { color: var(--pot); border-color: color-mix(in srgb, var(--pot) 50%, transparent); }
.seat .card { --cw: 34px; }
.seat.turn .who { border-color: var(--brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 35%, transparent), 0 0 24px color-mix(in srgb, var(--brass) 50%, transparent), 0 6px 16px rgb(0 0 0 / .28); }
.seat.win .who { border-color: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 40%, transparent), 0 0 24px color-mix(in srgb, var(--good) 45%, transparent); }
.seat .timer { top: -10px; left: -8px; min-width: 30px; height: 22px; font-size: 12px; }
.seat .seatno { top: -12px; left: 2px; }
@media (max-width: 560px) {
  .seat { width: 100px; gap: 3px; }
  .seat .who { gap: 6px; padding: 3px 10px 3px 3px; min-width: 0; }
  .seat .av { width: 28px; height: 28px; font-size: 13px; }
  .seat .nm { font-size: 12.5px; }
  .seat .ch { font-size: 11.5px; gap: 4px; }
  .seat .ch::before { width: 8px; height: 8px; }
  .seat .pill { font-size: 9.5px; padding: 1px 7px; }
  .seat .card { --cw: 24px; }
}
.seat .who { position: relative; }
.seat .who .dealer { top: -8px; right: -8px; width: 20px; height: 20px; font-size: 11px; box-shadow: 0 2px 6px rgb(0 0 0 / .3); }

/* Moves pop out in front of each seat: chips with the move and amount */
.bet { position: absolute; transform: translate(-50%, -50%); z-index: 3; display: flex; align-items: center; gap: 6px; padding: 4px 11px 4px 6px; border-radius: 99px;
  background: rgb(0 0 0 / .45); border: 1px solid rgb(255 255 255 / .14); box-shadow: 0 6px 16px rgb(0 0 0 / .35); color: #fff; white-space: nowrap; pointer-events: none; }
.bet .bl { display: grid; line-height: 1.05; }
.bet .bl b { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; opacity: .85; }
.bet .bl .num { font-size: 15px; font-weight: 800; color: var(--pot); }
.bet .stack { position: relative; width: 22px; height: 22px; flex: none; }
.bet .stack i { position: absolute; left: 0; width: 22px; height: 8px; border-radius: 50%; background: var(--chipc, var(--pot)); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .3), 0 0 0 1px rgb(0 0 0 / .25);
  background-image: repeating-linear-gradient(90deg, transparent 0 4px, rgb(255 255 255 / .7) 4px 6px); }
.bet .stack i:nth-child(1) { bottom: 0; } .bet .stack i:nth-child(2) { bottom: 5px; } .bet .stack i:nth-child(3) { bottom: 10px; }
.bet.blind { --chipc: #3b82c4; } .bet.chaal { --chipc: var(--pot); } .bet.raise { --chipc: #e0533d; } .bet.show, .bet.sideshow { --chipc: #8b5cf6; }
.bet.raise .bl b { color: #ffb4a8; opacity: 1; }
.bet.pack { padding: 5px 14px; background: color-mix(in srgb, var(--bad) 85%, black); border-color: rgb(255 255 255 / .25); }
.bet.pack .bl { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) {
  .bet.pop { animation: betpop .55s cubic-bezier(.2, 1.4, .4, 1) both; }
  .bet.pop .stack i { animation: chipdrop .45s ease-out both; }
  .bet.pop .stack i:nth-child(2) { animation-delay: .07s; } .bet.pop .stack i:nth-child(3) { animation-delay: .14s; }
  .bet.pack.pop { animation: packpop .6s ease-out both; }
  @keyframes betpop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); } 100% { transform: translate(-50%, -50%) scale(1); } }
  @keyframes chipdrop { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes packpop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.6) rotate(-8deg); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(.92) rotate(-3deg); } 100% { transform: translate(-50%, -50%) scale(1) rotate(-3deg); } }
  .seat.packed .folded i { animation: foldaway .5s ease-in both; }
  @keyframes foldaway { from { transform: translateY(0) rotate(0); opacity: 1; } to { opacity: .55; } }
}
@media (max-width: 560px) {
  .bet { padding: 3px 9px 3px 5px; gap: 4px; }
  .bet .bl .num { font-size: 13px; }
  .bet .bl b { font-size: 9px; }
  .bet .stack { width: 18px; height: 18px; } .bet .stack i { width: 18px; height: 7px; }
  .bet .stack i:nth-child(2) { bottom: 4px; } .bet .stack i:nth-child(3) { bottom: 8px; }
}

/* Packed players are unmistakable: faded and grey, cards folded away, a red badge */
.seat.packed { opacity: 1; }
.seat.packed .who { filter: grayscale(1); opacity: .55; }
.seat.packed .pill.out { background: var(--bad); color: #fff; border-color: transparent; font-weight: 800; }
.folded { display: flex; justify-content: center; height: calc(34px * 1.4); align-items: flex-end; opacity: .55; filter: grayscale(.6); }
.folded i { width: 34px; height: 14px; border-radius: 4px; background: repeating-linear-gradient(45deg, var(--back-1) 0 4px, var(--back-2) 4px 8px); border: 2px solid var(--card); }
.folded i + i { margin-left: -24px; transform: translateY(3px) rotate(6deg); }
@media (max-width: 560px) { .folded { height: calc(24px * 1.4); } .folded i { width: 24px; height: 10px; } .folded i + i { margin-left: -16px; } }

/* ================= Buttons, dressed up ================= */
:root { --btn-hi: rgb(255 255 255 / .55); --btn-lo: rgb(0 0 0 / .08); }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) { --btn-hi: rgb(255 255 255 / .10); --btn-lo: rgb(0 0 0 / .35); } }
:root[data-mode="dark"] { --btn-hi: rgb(255 255 255 / .10); --btn-lo: rgb(0 0 0 / .35); }

button, .primary, .ghost, a.ghost { transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease, filter .15s ease, color .15s ease; }

/* Main buttons: a glossy accent pill */
.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brass) 82%, white), var(--brass) 55%, color-mix(in srgb, var(--brass) 88%, black));
  border: 1px solid color-mix(in srgb, var(--brass) 70%, black);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 4px 12px color-mix(in srgb, var(--brass) 35%, transparent), 0 1px 2px rgb(0 0 0 / .2);
  text-shadow: 0 1px 0 rgb(0 0 0 / .12); letter-spacing: .01em;
}
.primary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 8px 20px color-mix(in srgb, var(--brass) 42%, transparent), 0 2px 4px rgb(0 0 0 / .2); }
.primary:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 6px rgb(0 0 0 / .25); }

/* Secondary buttons: soft raised surface */
.ghost {
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, white), var(--panel));
  border: 1px solid color-mix(in srgb, var(--line) 85%, var(--ivory) 8%);
  box-shadow: inset 0 1px 0 var(--btn-hi), 0 1px 2px var(--btn-lo), 0 2px 6px var(--btn-lo);
}
.ghost:hover:not(:disabled) { border-color: var(--brass); color: var(--brass); transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--btn-hi), 0 6px 14px var(--btn-lo); }
.ghost:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 5px var(--btn-lo); }
.tb.on, .ghost[aria-expanded="true"] { border-color: var(--brass); color: var(--brass); background: color-mix(in srgb, var(--brass) 10%, var(--panel)); }

/* The move buttons: chunky game buttons, each with its own colour */
.actions { gap: 10px; }
.act {
  --c: var(--muted);
  position: relative; overflow: hidden; border-radius: 14px; padding: 12px 6px 11px; font-size: 15px; font-weight: 700; letter-spacing: .01em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 10%, var(--panel)), color-mix(in srgb, var(--c) 4%, var(--panel)));
  border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line));
  color: color-mix(in srgb, var(--c) 75%, var(--ivory));
  box-shadow: inset 0 1px 0 var(--btn-hi), 0 3px 0 color-mix(in srgb, var(--c) 35%, var(--line)), 0 6px 14px var(--btn-lo);
}
.act::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); opacity: .85; }
.act small { color: inherit; opacity: .8; font-weight: 600; }
.act:hover:not(:disabled) { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--btn-hi), 0 5px 0 color-mix(in srgb, var(--c) 35%, var(--line)), 0 10px 20px var(--btn-lo); }
.act:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 6px var(--btn-lo), 0 1px 0 color-mix(in srgb, var(--c) 35%, var(--line)); }
.act[data-act="see"] { --c: #3b82c4; }
.act[data-act="pack"] { --c: var(--bad); }
.act[data-act="sideshow"], .act[data-act="show"] { --c: #8b5cf6; }
.act[data-act="raise"] { --c: #e08a1e; }
.act.main {
  --c: var(--brass);
  color: var(--ink); border-color: color-mix(in srgb, var(--brass) 70%, black);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brass) 80%, white), var(--brass) 55%, color-mix(in srgb, var(--brass) 85%, black));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 3px 0 color-mix(in srgb, var(--brass) 60%, black), 0 8px 18px color-mix(in srgb, var(--brass) 35%, transparent);
}
.act.main::before { display: none; }
.act.main small { opacity: .85; }
.act.main:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 5px 0 color-mix(in srgb, var(--brass) 60%, black), 0 12px 24px color-mix(in srgb, var(--brass) 40%, transparent); }
.act:disabled { opacity: 1; filter: saturate(.25); color: color-mix(in srgb, var(--muted) 70%, transparent); box-shadow: none; transform: none; background: var(--panel-2); border-color: var(--line); }
.act:disabled::before { opacity: .25; }
.act.main:disabled { color: color-mix(in srgb, var(--ink) 55%, transparent); background: color-mix(in srgb, var(--brass) 35%, var(--panel-2)); border-color: transparent; }

/* Header, options and small controls */
.optbtn, .bar .tb, .modebtn { border-radius: 12px; }
.menuitem { transition: background-color .12s, padding-left .12s; }
.menuitem:hover, .menuitem:focus-visible { padding-left: 15px; }
.cbx { background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, white), var(--panel)); box-shadow: inset 0 1px 0 var(--btn-hi), 0 2px 6px var(--btn-lo); }
.cbx:hover { transform: translateY(-1px); }
.cbx[aria-pressed="true"] { background: linear-gradient(180deg, color-mix(in srgb, var(--brass) 80%, white), var(--brass)); box-shadow: 0 4px 12px color-mix(in srgb, var(--brass) 35%, transparent); }
.sendbtn { background: linear-gradient(180deg, color-mix(in srgb, var(--brass) 80%, white), var(--brass)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 4px 10px color-mix(in srgb, var(--brass) 35%, transparent); transition: transform .12s; }
.sendbtn:hover { transform: translateY(-1px) rotate(-8deg); }
.sendbtn:active { transform: scale(.94); }
.seg button { transition: all .15s; box-shadow: inset 0 1px 0 var(--btn-hi); }
.seg button:hover { border-color: var(--brass); }
.seg button[aria-pressed="true"] { background: linear-gradient(180deg, color-mix(in srgb, var(--brass) 80%, white), var(--brass)); box-shadow: 0 3px 10px color-mix(in srgb, var(--brass) 30%, transparent); }
.pickgrid button, .dlopt { transition: transform .12s, border-color .15s, box-shadow .15s; box-shadow: inset 0 1px 0 var(--btn-hi), 0 2px 6px var(--btn-lo); }
.pickgrid button:hover, .dlopt:hover { transform: translateY(-1px); border-color: var(--brass); box-shadow: 0 8px 18px var(--btn-lo); }
.link { transition: color .15s; }
.link:hover { color: color-mix(in srgb, var(--brass) 75%, var(--ivory)); }
button.seatbox:hover { transform: translate(-50%, -50%) scale(1.06); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { button, .primary, .ghost, .act, .cbx, .sendbtn { transition: none !important; transform: none !important; } }

/* Avatars */
.av .emo, .cav .emo { font-size: 1.25em; line-height: 1; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .2)); }
.seat .av .emo { font-size: 22px; }
@media (max-width: 560px) { .seat .av .emo { font-size: 18px; } }
.cav .emo { font-size: 15px; }
.mineav { cursor: pointer; }
.mineav:hover { transform: scale(1.06); }
.avgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-height: 46vh; overflow-y: auto; padding: 2px; }
@media (max-width: 599px) { .avgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.avopt { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); }
.avopt span { font-size: 26px; line-height: 1; }
.avopt small { font-size: 11px; color: var(--muted); }
.avopt[aria-pressed="true"] { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass), 0 4px 12px color-mix(in srgb, var(--brass) 25%, transparent); background: color-mix(in srgb, var(--brass) 10%, var(--panel)); }
.avopt[aria-pressed="true"] small { color: var(--brass); font-weight: 600; }
.emojirow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.emojiin { width: 64px !important; text-align: center; font-size: 22px; padding: 6px !important; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; }
.avpreview { display: flex; align-items: center; gap: 12px; }
.av.big { width: 52px; height: 52px; font-size: 20px; background: var(--panel-2); border: 1px solid var(--line); }
.av.big .emo { font-size: 30px; }
.emojiin::placeholder { opacity: .35; }

/* ---------- Avatars and their little animations ---------- */
.ani { width: 100%; height: 100%; display: block; }
.av:has(.ani), .cav:has(.ani) { overflow: hidden; }
.ani [class] { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .ani .glint { animation: av-glint 3.4s ease-in-out infinite; animation-delay: var(--d); }
  .ani .twitch { animation: av-twitch 4.2s ease-in-out infinite; animation-delay: var(--d); }
  .ani .steam { animation: av-steam 2.8s ease-out infinite; animation-delay: var(--d); opacity: 0; }
  .ani .steam.s2 { animation-delay: calc(var(--d) - .9s); }
  .ani .steam.s3 { animation-delay: calc(var(--d) - 1.8s); }
  .ani .flame { animation: av-flame 1.3s ease-in-out infinite alternate; transform-origin: 50% 100%; }
  .ani .glow { animation: av-glow 1.3s ease-in-out infinite alternate; }
  .ani .sway { animation: av-sway 3s ease-in-out infinite; animation-delay: var(--d); }
  .ani-mor .sway { transform-origin: 0% 100%; }
  .ani .spin { animation: av-spin 2.4s linear infinite; }
  .ani-bullet .spin { animation-duration: 1.2s; }
  .ani .bounce { animation: av-bounce .7s ease-in-out infinite; }
  .ani .pulse { animation: av-glow 1.6s ease-in-out infinite alternate; }
  .ani .shine { animation: av-shine 3.6s ease-in-out infinite; animation-delay: var(--d); }
  .ani .shine-bar { animation: av-bar 4s ease-in-out infinite; animation-delay: var(--d); transform-box: view-box; }
  .ani .beat { animation: av-beat 1.4s ease-in-out infinite; }
  .ani .roll { animation: av-roll 3.2s ease-in-out infinite; animation-delay: var(--d); }
  .ani-bell .sway { transform-origin: 50% 0%; }
  .ani-clover .sway { animation-duration: 5s; }
  .ani.still * { animation: none !important; }
  @keyframes av-beat { 0%, 40%, 100% { transform: scale(1); } 15% { transform: scale(1.1); } 28% { transform: scale(1.03); } }
  @keyframes av-roll { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-12deg) translateY(-1px); } 90% { transform: rotate(6deg); } }
  .ani.still .steam { opacity: .6; }
  @keyframes av-glint { 0%, 70%, 100% { transform: scale(0) rotate(0); opacity: 0; } 80% { transform: scale(1) rotate(45deg); opacity: 1; } 90% { transform: scale(.2) rotate(90deg); opacity: 0; } }
  @keyframes av-twitch { 0%, 82%, 100% { transform: scaleX(1) rotate(0); } 86% { transform: scaleX(1.05) rotate(-3deg); } 90% { transform: scaleX(1.05) rotate(3deg); } 94% { transform: scaleX(1) rotate(0); } }
  @keyframes av-steam { 0% { transform: translateY(4px); opacity: 0; } 35% { opacity: .75; } 100% { transform: translateY(-5px); opacity: 0; } }
  @keyframes av-flame { 0% { transform: scale(1, 1) skewX(-2deg); } 50% { transform: scale(.96, 1.06) skewX(2deg); } 100% { transform: scale(1.02, .95) skewX(-1deg); } }
  @keyframes av-glow { from { opacity: .55; } to { opacity: 1; } }
  @keyframes av-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
  @keyframes av-spin { to { transform: rotate(360deg); } }
  @keyframes av-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.8px); } }
  @keyframes av-shine { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25) saturate(1.2); } }
  @keyframes av-bar { 0%, 60% { transform: translateX(0); } 85%, 100% { transform: translateX(22px); } }
}
.avopt .avpic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; }
.seat .av .ani, .cav .ani, .av.big .ani { width: 100%; height: 100%; }

/* Phones held upright: a tall oval table that fills the screen (the page scrolls a little if it must) */
@media (max-width: 599px) and (orientation: portrait) {
  #tableview { overflow-y: auto; grid-template-rows: auto; align-content: start; }
  .play { padding-inline: 8px; grid-template-rows: auto auto; height: auto; min-height: 100%; overflow: visible; }
  .feltwrap { min-height: auto; }
  .felt { width: 100%; height: clamp(420px, calc(100dvh - 300px), 640px); max-height: none; min-height: 0; --ti-x: 16%; --ti-y: 12%; --rail: 11px; }
  .felt .bet { scale: .86; }
  .mine { min-height: 64px; gap: 10px; }
  .mine .hand .card { --cw: 38px; }
  .felt::after { outline-offset: -16px; }
  .center { top: 45%; width: 52%; }
  .center .vchip { font-size: 19px; }
  .bet { gap: 3px; }
  .bet .stack { width: 21px; height: 21px; } .bet .stack i { width: 21px; height: 7px; }
  .bet .stack i:nth-child(2) { bottom: 4px; } .bet .stack i:nth-child(3) { bottom: 8px; } .bet .stack i:nth-child(4) { bottom: 12px; }
  .bet .amt { font-size: 14px; padding: 1px 7px; }
  .feltmark { top: calc(100% - var(--ti-y) - var(--rail) - 30px); font-size: 10px; letter-spacing: .26em; }
  .seat .card { --cw: 22px; }
}

/* ---------- Bets on the felt: one neutral chip stack with the amount; the seat says the move ---------- */
.bet { gap: 8px; padding: 0; background: none; border: 0; box-shadow: none; }
.bet .stack { width: 30px; height: 30px; }
.bet .stack i { width: 30px; height: 10px; background: #f3efe6; box-shadow: inset 0 -2.5px 0 rgb(0 0 0 / .22), 0 0 0 1px rgb(0 0 0 / .35), 0 2px 3px rgb(0 0 0 / .25);
  background-image: repeating-linear-gradient(90deg, transparent 0 5px, #b9302f 5px 8px); background-size: 100% 100%; }
.bet .stack i:nth-child(1) { bottom: 0; } .bet .stack i:nth-child(2) { bottom: 5px; } .bet .stack i:nth-child(3) { bottom: 10px; } .bet .stack i:nth-child(4) { bottom: 15px; }
.bet .amt { font-size: 17px; font-weight: 800; color: #fff; background: rgb(0 0 0 / .55); border: 1px solid rgb(255 255 255 / .18); padding: 2px 10px; border-radius: 99px; line-height: 1.25; box-shadow: 0 3px 10px rgb(0 0 0 / .3); }
.felt .bet { scale: 1; }
@media (max-width: 599px) {
  .bet { gap: 5px; }
  .bet .stack { width: 24px; height: 24px; } .bet .stack i { width: 24px; height: 8px; background-image: repeating-linear-gradient(90deg, transparent 0 4px, #b9302f 4px 6.5px); }
  .bet .stack i:nth-child(2) { bottom: 4px; } .bet .stack i:nth-child(3) { bottom: 8px; } .bet .stack i:nth-child(4) { bottom: 12px; }
  .bet .amt { font-size: 15px; padding: 1px 8px; }
}
.seat .pill.act { color: #1a1a1a; background: #f3efe6; border-color: rgb(0 0 0 / .15); font-size: 11.5px; padding: 2px 11px; }
@media (max-width: 599px) { .seat .pill.act { font-size: 10.5px; padding: 1px 9px; } }
.center .vchip { font-size: clamp(18px, 2.8vw, 26px); }

/* Finished betting rounds: the stacks slide into the pot */
.bet.sweep { left: var(--x); top: var(--y); pointer-events: none; animation: chipsweep .65s cubic-bezier(.5, 0, .3, 1) both; }
.bet.sweep .amt { opacity: 0; transition: none; }
@keyframes chipsweep { 0% { left: var(--x); top: var(--y); opacity: 1; } 85% { opacity: 1; } 100% { left: 50%; top: var(--cy); opacity: 0; transform: translate(-50%, -50%) scale(.7); } }
@media (prefers-reduced-motion: reduce) { .bet.sweep { animation-duration: .01s; } }

/* Your own cards sit on your seat, above your name, a little bigger so they're easy to read */
.seat.me .hand .card { --cw: 44px; }
.seat.me .hand .card + .card { margin-left: 3px; }
.mine { min-height: 0; }
@media (max-width: 599px) {
  .seat.me .hand .card { --cw: 32px; }
  .seat.me .hand .card + .card { margin-left: 2px; }
}

/* ---------- The pot: a pile of chips with its value above ---------- */
.potpile { display: grid; justify-items: center; gap: 4px; }
.potval { display: grid; justify-items: center; line-height: 1; }
.potval small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-felt-muted); font-weight: 600; }
.potval b { font-size: clamp(24px, 3.6vw, 34px); font-weight: 800; color: var(--pot); text-shadow: 0 2px 6px rgb(0 0 0 / .45); }
.pile { display: flex; align-items: flex-end; gap: 4px; }
.pile .stack { position: relative; width: 30px; height: calc(10px + (var(--c) - 1) * 5px); display: block; }
.pile .stack i { position: absolute; left: 0; bottom: calc(var(--k) * 5px); width: 30px; height: 10px; border-radius: 50%; background: #f3efe6;
  background-image: repeating-linear-gradient(90deg, transparent 0 5px, #b9302f 5px 8px);
  box-shadow: inset 0 -2.5px 0 rgb(0 0 0 / .22), 0 0 0 1px rgb(0 0 0 / .35), 0 2px 3px rgb(0 0 0 / .25); }
.center .pot { display: none; }
.donewhy { font-size: 14px; color: var(--on-felt); font-weight: 600; }
.donenext { font-size: 12.5px; color: var(--on-felt-muted); }
@media (max-width: 599px) {
  .pile .stack { width: 24px; height: calc(8px + (var(--c) - 1) * 4px); } .pile .stack i { width: 24px; height: 8px; bottom: calc(var(--k) * 4px); background-image: repeating-linear-gradient(90deg, transparent 0 4px, #b9302f 4px 6.5px); }
}

/* ---------- Winning: the pot slides to the winner, whose seat lights up with what they won ---------- */
.potsweep { position: absolute; z-index: 4; pointer-events: none; transform: translate(-50%, -50%); animation: potwin 1.6s cubic-bezier(.45, 0, .2, 1) both; }
@keyframes potwin { 0% { left: 50%; top: var(--cy); opacity: 1; } 80% { opacity: 1; } 100% { left: var(--wx); top: var(--wy); opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
.seat.win .who { border-color: var(--pot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pot) 55%, transparent), 0 0 28px color-mix(in srgb, var(--pot) 55%, transparent); }
.winpop { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); z-index: 5; white-space: nowrap;
  background: var(--pot); color: #1a1408; font-weight: 800; font-size: 16px; padding: 3px 12px; border-radius: 99px; box-shadow: 0 6px 16px rgb(0 0 0 / .35); }
@media (prefers-reduced-motion: no-preference) {
  .winpop { animation: winpop .5s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: var(--wd, .7s); }
  @keyframes winpop { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.6); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } }
}
@media (prefers-reduced-motion: reduce) { .potsweep { animation-duration: .01s; } }

/* ---------- Seat cards: small for everyone else, a little bigger for you, sitting right on the seat box ---------- */
.seat .hand .card { --cw: 22px; }
.seat.me .hand .card { --cw: 30px; }
.seat.me .hand .card + .card { margin-left: 2px; }
.seat .hand { margin-bottom: -8px; position: relative; z-index: 0; }
.seat .who { z-index: 1; }
@media (max-width: 599px) {
  .seat .hand .card { --cw: 15px; }
  .seat.me .hand .card { --cw: 24px; }
  .seat .hand { margin-bottom: -6px; }
}

/* ---------- Whose turn: the seat box fills with the accent, and the pill under it counts down ---------- */
.seat.turn .who { background: var(--brass); border-color: var(--brass); }
.seat.turn .who .nm, .seat.turn .who .ch { color: var(--ink); }
.seat.turn .who .ch::before { filter: brightness(1.6); }
.seat .pill.turnpill { text-transform: none; display: inline-flex; align-items: center; gap: 4px; background: var(--brass); color: var(--ink); border-color: transparent; font-size: 13px; padding: 2px 10px; letter-spacing: .02em; }
.seat .pill.turnpill svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.seat .pill.turnpill .timer { position: static; background: none; color: inherit; min-width: 0; height: auto; padding: 0; font-size: inherit; font-weight: 800; }
.seat .pill.turnpill:has(.timer.low) { background: var(--bad); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .seat .pill.turnpill:has(.timer.low) { animation: lowtick 1s ease-in-out infinite; }
  @keyframes lowtick { 50% { transform: scale(1.08); } }
}
@media (max-width: 599px) { .seat .pill.turnpill { font-size: 11.5px; padding: 1px 8px; } }

/* ---------- Pot pile v2: lots of small chips in mixed colours ---------- */
.pile { gap: 2px; }
.pile .stack { width: 20px; height: calc(7px + (var(--c) - 1) * 3.5px); }
.pile .stack:nth-child(2n) { margin-bottom: 3px; }
.pile .stack:nth-child(3n) { margin-bottom: -2px; }
.pile .stack i { width: 20px; height: 7px; bottom: calc(var(--k) * 3.5px); --cc: #c23b3b;
  background: var(--cc); background-image: repeating-linear-gradient(90deg, transparent 0 3px, rgb(255 255 255 / .85) 3px 5px);
  box-shadow: inset 0 -1.5px 0 rgb(0 0 0 / .3), 0 0 0 .75px rgb(0 0 0 / .45), 0 1px 2px rgb(0 0 0 / .3); }
.pile .stack i.c0 { --cc: #c23b3b; } .pile .stack i.c1 { --cc: #2563a8; } .pile .stack i.c2 { --cc: #1f7a4d; }
.pile .stack i.c3 { --cc: #1d1d1f; } .pile .stack i.c4 { --cc: #7a3fa3; } .pile .stack i.c5 { --cc: #d9a520; }
@media (max-width: 599px) {
  .pile .stack { width: 16px; height: calc(6px + (var(--c) - 1) * 3px); }
  .pile .stack i { width: 16px; height: 6px; bottom: calc(var(--k) * 3px); background-image: repeating-linear-gradient(90deg, transparent 0 2.5px, rgb(255 255 255 / .85) 2.5px 4px); }
  .center .vchip { font-size: 17px; }
}

.askhead { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.askhead h3 { margin: 0 0 2px; }

/* ---------- Pot pile v3: a cluster of stacks, back row tucked behind the front row ---------- */
.pile { display: grid; justify-items: center; gap: 0; height: auto; }
.pile .prow { display: flex; align-items: flex-end; gap: 3px; }
.pile .prow.back { margin-bottom: -9px; filter: brightness(.86); }
.pile .prow.front { position: relative; }
.pile .stack { width: 20px; height: calc(7px + (var(--c) - 1) * 3.5px); margin: 0 !important; }
.pile .stack i { background-color: var(--cc); }
.pile .stack.c0 i { --cc: #c23b3b; } .pile .stack.c1 i { --cc: #2563a8; } .pile .stack.c2 i { --cc: #1f7a4d; }
.pile .stack.c3 i { --cc: #1d1d1f; } .pile .stack.c4 i { --cc: #7a3fa3; } .pile .stack.c5 i { --cc: #d9a520; }
@media (max-width: 599px) {
  .pile .prow { gap: 2px; } .pile .prow.back { margin-bottom: -7px; }
  .pile .stack { width: 16px; height: calc(6px + (var(--c) - 1) * 3px); }
}
/* Pot pile: a touch smaller */
.pile .prow { gap: 2px; } .pile .prow.back { margin-bottom: -7px; }
.pile .stack { width: 15px; height: calc(5px + (var(--c) - 1) * 2.6px); }
.pile .stack i { width: 15px; height: 5px; bottom: calc(var(--k) * 2.6px); background-image: repeating-linear-gradient(90deg, transparent 0 2.5px, rgb(255 255 255 / .85) 2.5px 4px); }
@media (max-width: 599px) {
  .pile .prow.back { margin-bottom: -6px; }
  .pile .stack { width: 12px; height: calc(4.5px + (var(--c) - 1) * 2.2px); }
  .pile .stack i { width: 12px; height: 4.5px; bottom: calc(var(--k) * 2.2px); background-image: repeating-linear-gradient(90deg, transparent 0 2px, rgb(255 255 255 / .85) 2px 3.2px); }
}

/* ---------- Centre of the table: "Variation: …" and "Pot: …" in an engraved card-room face ---------- */
.center .cline { font-family: var(--display); color: var(--on-felt); line-height: 1.15; text-shadow: 0 1px 3px rgb(0 0 0 / .45); white-space: nowrap; }
.center .cline small { font-size: .62em; letter-spacing: .14em; color: var(--on-felt-muted); font-weight: 500; text-transform: uppercase; margin-right: .2em; }
.center .cline b { font-weight: 700; }
.center > .cline { font-size: clamp(17px, 2.2vw, 24px); }
.center .potline { font-size: clamp(22px, 3vw, 32px); }
.center .potline b { color: var(--pot); }
.center .potval { display: none; }
.center .potpile { gap: 8px; margin-top: 2px; }
@media (max-width: 599px) { .center > .cline { font-size: 15px; } .center .potline { font-size: 21px; } }

/* Win pop: loud, can't-miss colour */
.winpop { background: linear-gradient(180deg, #2fbf78, #1a7f4b); color: #fff; font-size: 18px; padding: 4px 14px; border: 1.5px solid #c9f5dd;
  box-shadow: 0 0 0 3px rgb(43 182 115 / .3), 0 0 24px rgb(43 182 115 / .6), 0 8px 18px rgb(0 0 0 / .35); text-shadow: 0 1px 2px rgb(0 0 0 / .3); }
@media (prefers-reduced-motion: no-preference) {
  .winpop { animation: winpop .6s cubic-bezier(.2, 1.5, .4, 1) both, winglow 1.1s ease-in-out infinite; animation-delay: var(--wd, 1.3s), calc(var(--wd, 1.3s) + .6s); }
  @keyframes winglow { 50% { box-shadow: 0 0 0 6px rgb(43 182 115 / .22), 0 0 36px rgb(43 182 115 / .85), 0 8px 18px rgb(0 0 0 / .35); transform: translate(-50%, 0) scale(1.06); } }
}
.seat.win .who { border-color: #2bb673; box-shadow: 0 0 0 3px rgb(43 182 115 / .4), 0 0 26px rgb(43 182 115 / .5); }
@media (max-width: 599px) {
  .winpop { font-size: 15px; padding: 3px 11px; }
  .center > .cline { display: grid; justify-items: center; gap: 1px; font-size: 15px; white-space: normal; }
  .center > .cline small { margin: 0; }
  .center .potline { font-size: 22px; }
}

/* ---------- Dealer's choice pop-up ---------- */
.pickscrim .modal { width: min(100%, 640px); padding: 0; overflow: hidden; }
.pk { display: grid; }
.pkhead { display: flex; align-items: center; gap: 14px; padding: 18px 20px 16px; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, #2f8f69 0%, #1e6b52 45%, #123f31 100%); position: relative; }
.pkhead::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgb(255 255 255 / .04) 0 6px, transparent 6px 14px); pointer-events: none; }
.pkfan svg { width: 64px; height: 44px; display: block; filter: drop-shadow(0 4px 8px rgb(0 0 0 / .35)); }
.pktitle { flex: 1; min-width: 0; }
.pkeye { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .8; font-weight: 600; }
.pktitle h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 24px; color: #fff; line-height: 1.1; }
.pkring { position: relative; width: 52px; height: 52px; flex: none; }
.pkring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pkring circle { fill: none; stroke-width: 4; }
.pkring .trk { stroke: rgb(255 255 255 / .2); }
.pkring .val { stroke: #ffd34d; stroke-linecap: round; stroke-dasharray: 119.4; animation-name: pkdrain; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes pkdrain { to { stroke-dashoffset: 119.4; } }
.pkring .num { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #fff; }
.pkring .num.low { color: #ffb3b3; }
.pkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 16px 18px 6px; }
.pkopt { --a: #1e6b52; --b: #2f8f69; display: grid; justify-items: start; gap: 2px; text-align: left; padding: 0 0 10px; border-radius: 14px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 2px 8px rgb(0 0 0 / .08); transition: transform .15s, box-shadow .15s; }
.pkopt:hover, .pkopt:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 22px rgb(0 0 0 / .18); border-color: var(--a); }
.pkemb { width: 100%; height: 62px; display: grid; place-items: center; background: linear-gradient(135deg, var(--b), var(--a)); margin-bottom: 6px; }
.pkemb svg { width: 52px; height: 52px; filter: drop-shadow(0 3px 5px rgb(0 0 0 / .3)); }
.pkopt b { padding: 0 12px; font-size: 15px; }
.pkopt small { padding: 0 12px; font-size: 12px; color: var(--muted); line-height: 1.25; }
.pk-classic { --a: #1e6b52; --b: #34a37a; } .pk-muflis { --a: #3b3f9e; --b: #6c6fe0; } .pk-ak47 { --a: #8f1d2c; --b: #d4434f; }
.pk-little { --a: #0f6c7a; --b: #2bb3c0; } .pk-joker { --a: #5b2a86; --b: #a066d6; } .pk-lowjoker { --a: #2c4b73; --b: #5d8ac4; }
.pk-highjoker { --a: #9a5b0b; --b: #e5a12a; } .pk-fourcard { --a: #9c2f62; --b: #e0679e; } .pk-999 { --a: #b5420f; --b: #f07a35; }
.pk-faceup { --a: #136c8f; --b: #3fb0d8; } .pk-custom { --a: #4a5560; --b: #7f8c99; }
.pkfoot { margin: 0; padding: 8px 18px 16px; font-size: 12.5px; color: var(--muted); text-align: center; }
@media (max-width: 599px) {
  .pkgrid { grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 12px 4px; max-height: 60vh; overflow-y: auto; }
  .pkemb { height: 52px; } .pkemb svg { width: 44px; height: 44px; }
  .pktitle h3 { font-size: 20px; } .pkfan svg { width: 52px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .pkring .val { animation: none; } }
.pkgrid { grid-auto-rows: max-content; }
.pkopt { min-height: max-content; }

/* Centre text in the app's own face, and the pot in a glossy oval */
.center > .cline { font-weight: 500; }
.center > .cline b { font-weight: 700; }
.center > .cline small { font-weight: 600; letter-spacing: .12em; }
.center .potline { display: inline-flex; align-items: baseline; gap: 8px; padding: 5px 20px 6px; border-radius: 999px;
  background: linear-gradient(180deg, rgb(255 255 255 / .35), transparent 55%), linear-gradient(135deg, #ffe08a 0%, #f6b73c 45%, #e8862a 100%);
  border: 1px solid rgb(255 255 255 / .55); box-shadow: 0 6px 18px rgb(0 0 0 / .35), 0 0 0 4px rgb(246 183 60 / .18), inset 0 -2px 0 rgb(120 60 0 / .25);
  text-shadow: none; font-size: clamp(20px, 2.6vw, 28px); }
.center .potline small { color: #6b3a05; font-size: .5em; letter-spacing: .16em; font-weight: 700; }
.center .potline b { color: #3a1f00; font-weight: 800; }
@media (max-width: 599px) { .center .potline { font-size: 19px; padding: 3px 15px 4px; gap: 6px; } }

/* ---------- Dealt / Best Hand switch ---------- */
.viewtog { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin-top: 8px; padding: 3px; border-radius: 999px; width: max-content;
  background: var(--panel-2); border: 1px solid var(--line); box-shadow: inset 0 1px 3px rgb(0 0 0 / .12); }
.viewtog button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 14px; border: 0; background: none;
  font-size: 13px; font-weight: 700; color: var(--muted); border-radius: 999px; transition: color .2s; }
.viewtog button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viewtog button[aria-pressed="true"] { color: #fff; }
.viewtog [data-view="best"][aria-pressed="true"] svg { fill: #ffd34d; stroke: #ffd34d; }
.vthumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; z-index: 0;
  background: linear-gradient(135deg, #2f8f69, #1e6b52); box-shadow: 0 3px 10px rgb(30 107 82 / .45); transition: transform .28s cubic-bezier(.3, 1.3, .5, 1), background .28s; }
.viewtog[data-v="best"] .vthumb { transform: translateX(100%); background: linear-gradient(135deg, #a066d6, #5b2a86); box-shadow: 0 3px 12px rgb(122 63 163 / .5); }
/* Cards a joker turned into: a gold ring and a star */
.card.sub { position: relative; box-shadow: 0 0 0 2px #ffd34d, 0 0 12px rgb(255 211 77 / .7); }
.card.imag { background: linear-gradient(160deg, #fffdf3, #f1ead2); box-shadow: 0 0 0 2px #7cc8ff, 0 0 14px rgb(124 200 255 / .6); }
.card.imag .subtag { background: #7cc8ff; }
.card.imag::after { content: "Imagined"; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); font-size: 9px; font-weight: 800; letter-spacing: .04em; color: #7cc8ff; white-space: nowrap; text-transform: uppercase; }
.card .subtag { position: absolute; top: -7px; right: -7px; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center;
  background: #7a3fa3; color: #ffd34d; font-size: 9px; line-height: 1; box-shadow: 0 1px 3px rgb(0 0 0 / .4); }
@media (prefers-reduced-motion: no-preference) {
  .besthand.flipin .card { animation: bestflip .45s cubic-bezier(.3, 1.3, .5, 1) both; }
  .besthand.flipin .card:nth-child(2) { animation-delay: .06s; } .besthand.flipin .card:nth-child(3) { animation-delay: .12s; }
  @keyframes bestflip { from { transform: rotateY(90deg) scale(.9); opacity: .3; } to { transform: none; opacity: 1; } }
}

/* ---------- Banco ---------- */
.bspread { display: grid; justify-items: center; gap: 4px; margin-top: 6px; }
.bwho { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-felt-muted); font-weight: 600; }
.brow { display: flex; align-items: center; gap: 8px; }
.brow .card { --cw: 40px; }
.bgap { position: relative; width: 120px; height: 26px; border-radius: 99px; background: rgb(0 0 0 / .35); border: 1px solid rgb(255 255 255 / .15); overflow: hidden; display: grid; place-items: center; }
.bgap i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #2f8f69, #6fd3a6); opacity: .85; }
.bgap b { position: relative; font-size: 11.5px; color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / .5); white-space: nowrap; }
.blast { display: grid; justify-items: center; gap: 2px; margin-top: 8px; padding: 6px 12px; border-radius: 12px; background: rgb(0 0 0 / .3); border: 1px solid rgb(255 255 255 / .1); }
.blast .bl1 { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--on-felt); }
.blast .card { --cw: 22px; }
.blast .bl1 .card:nth-of-type(2) { box-shadow: 0 0 0 2px #ffd34d; }
.blast .bl2 { font-size: 13px; color: var(--on-felt); }
.blast.o-win .bl2 b { color: #6fe0a8; } .blast.o-post .bl2 b { color: #ff6b6b; } .blast.o-miss .bl2 b { color: #ffb36b; }
.seat .pill.act.b-win { background: #1f8a52; color: #fff; } .seat .pill.act.b-post { background: #c0392b; color: #fff; } .seat .pill.act.b-miss { background: #e08a2c; color: #fff; }
/* your bet controls */
.bbet { display: grid; gap: 8px; justify-items: center; width: 100%; grid-column: 1 / -1; }
.bstep { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: 4px; box-shadow: 0 2px 8px rgb(0 0 0 / .08); }
.bstep .bs { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--panel-2); font-size: 22px; font-weight: 700; color: var(--ivory); }
.bstep .bamt { min-width: 90px; text-align: center; font-size: 22px; font-weight: 800; color: var(--brass); }
.bquick { display: flex; gap: 6px; }
.bquick button { border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 5px 12px; font-size: 13px; font-weight: 600; }
.bgo { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; width: min(100%, 420px); }
#actions:has(.bbet) { display: block; }
/* the boot vote */
.vhead .pkfan svg { width: 52px; height: 44px; }
.vopts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px 18px 6px; }
.vopt { display: grid; justify-items: center; gap: 4px; padding: 14px 8px 12px; border-radius: 16px; border: 2px solid var(--line); background: var(--panel); transition: transform .15s, border-color .15s, box-shadow .15s; }
.vopt:hover { transform: translateY(-2px); border-color: #e5a12a; }
.vopt .vx { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.vopt b { font-size: 26px; font-weight: 800; }
.vopt .vdots { display: flex; gap: 4px; min-height: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.vopt .vdots i { width: 10px; height: 10px; border-radius: 50%; background: #e5a12a; box-shadow: 0 0 0 2px rgb(229 161 42 / .25); }
.vopt .vdots em { font-style: normal; font-size: 11px; color: var(--muted); }
.vopt.on { border-color: #e5a12a; background: linear-gradient(180deg, rgb(229 161 42 / .16), transparent); box-shadow: 0 8px 20px rgb(229 161 42 / .25); }
.vhead { background: radial-gradient(120% 140% at 0% 0%, #e5a12a 0%, #b5420f 55%, #6e2508 100%); }
@media (max-width: 599px) {
  .brow .card { --cw: 32px; } .bgap { width: 92px; } .bgap b { font-size: 10px; }
  .vopts { gap: 8px; padding: 12px; } .vopt b { font-size: 21px; }
}

/* ---------- Red or Black ---------- */
.rbround { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-felt-muted); font-weight: 600; margin-top: 4px; }
.callchip { padding: 1px 8px; border-radius: 99px; font-size: 11.5px; color: #fff; }
.callchip.red { background: #c8372d; } .callchip.black { background: #1d1d1f; border: 1px solid rgb(255 255 255 / .3); }
.rbgo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(100%, 420px); }
.rbbtn { display: grid; justify-items: center; gap: 1px; padding: 10px 8px; border-radius: 16px; border: 0; color: #fff; font-size: 18px; font-weight: 800; letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 6px 16px rgb(0 0 0 / .25); transition: transform .12s, box-shadow .15s; }
.rbbtn:hover { transform: translateY(-2px); }
.rbbtn .rbs { font-size: 15px; letter-spacing: .1em; opacity: .9; }
.rbbtn small { font-size: 12.5px; font-weight: 600; opacity: .85; }
.rbbtn.red { background: linear-gradient(160deg, #e5534b, #a3241c); }
.rbbtn.black { background: linear-gradient(160deg, #3a3d42, #111214); }

.bctl { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.rbround { font-size: 10.5px; white-space: nowrap; }
@media (max-width: 599px) {
  .bbet { gap: 6px; }
  .bstep { gap: 4px; padding: 3px; } .bstep .bs { width: 32px; height: 32px; font-size: 18px; } .bstep .bamt { min-width: 64px; font-size: 18px; }
  .bquick { gap: 4px; } .bquick button { padding: 4px 9px; font-size: 12px; }
  .rbbtn { padding: 7px 6px; font-size: 16px; border-radius: 14px; } .rbbtn .rbs { font-size: 13px; }
}

/* ---------- Flip & Freeze ---------- */
.ffrow { display: grid; justify-items: center; gap: 4px; margin-top: 6px; }
.ffcap { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-felt-muted); font-weight: 700; }
.ffrow.live .ffcap { color: #9fd3ff; }
.ffcards { display: flex; gap: 5px; }
.ffcards .card { --cw: 30px; }
.ffrow.live .ffcards .card { --cw: 38px; }
.ffc { position: relative; display: inline-block; }
.ffc.frozen .card { box-shadow: 0 0 0 2px #8fd3ff, 0 0 12px rgb(143 211 255 / .7); filter: saturate(.7) brightness(1.03); }
.ffc .ice { position: absolute; top: -7px; right: -7px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
  background: #2563a8; color: #fff; font-size: 10px; box-shadow: 0 1px 3px rgb(0 0 0 / .4); }
.ffdock { gap: 8px; }
.ffhint { font-size: 12.5px; color: var(--muted); }
.ffpick { display: flex; gap: 8px; }
.ffpick .ffc { padding: 0; border: 0; background: none; border-radius: 8px; transition: transform .15s; }
.ffpick .card { --cw: 42px; }
.ffpick button.ffc:hover { transform: translateY(-3px); }
.ffpick button.ffc.on { transform: translateY(-6px); }
.ffpick button.ffc.on .card { box-shadow: 0 0 0 3px #e5a12a, 0 8px 16px rgb(229 161 42 / .4); }
.ffgo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(100%, 420px); }
.ffbtn { display: grid; justify-items: center; gap: 1px; padding: 9px 8px; border-radius: 16px; border: 0; color: #fff; font-size: 17px; font-weight: 800;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 6px 16px rgb(0 0 0 / .2); transition: transform .12s; }
.ffbtn:hover:not(:disabled) { transform: translateY(-2px); }
.ffbtn:disabled { opacity: .45; cursor: not-allowed; }
.ffbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ffbtn .snow { font-size: 17px; line-height: 1; }
.ffbtn small { font-size: 12.5px; font-weight: 600; opacity: .9; }
.ffbtn.flip { background: linear-gradient(160deg, #a066d6, #5b2a86); }
.ffbtn.freeze { background: linear-gradient(160deg, #4fa8e8, #1d5f9c); }
.pk-flipfreeze { --a: #1d5f9c; --b: #7fb8ee; } .pk-redblack { --a: #7a1a14; --b: #d4434f; } .pk-banco { --a: #9a5b0b; --b: #e5a12a; }
@media (max-width: 599px) {
  .ffcards .card { --cw: 24px; } .ffrow.live .ffcards .card { --cw: 30px; }
  .ffpick { gap: 6px; } .ffpick .card { --cw: 36px; }
  .ffbtn { padding: 7px 6px; font-size: 15px; }
}
@media (max-width: 599px) {
  .ffcap { font-size: 10px; white-space: nowrap; }
  .ffdock .ffhint { display: none; }
  .ffpick .card { --cw: 30px; } .ffpick { gap: 5px; }
  .ffdock { gap: 6px; }
  #mine:has(+ #waiting) .viewtog { margin-top: 4px; }
}

/* ---------- Dealing: cards slide out from the middle ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hand.deal .card { animation: dealin .42s cubic-bezier(.2, .8, .3, 1) both; animation-delay: var(--d0); }
  .hand.deal .card:nth-child(2) { animation-delay: calc(var(--d0) + var(--st)); }
  .hand.deal .card:nth-child(3) { animation-delay: calc(var(--d0) + 2 * var(--st)); }
  .hand.deal .card:nth-child(4) { animation-delay: calc(var(--d0) + 3 * var(--st)); }
  .hand.deal .card:nth-child(5) { animation-delay: calc(var(--d0) + 4 * var(--st)); }
  .hand.deal .card:nth-child(6) { animation-delay: calc(var(--d0) + 5 * var(--st)); }
  @keyframes dealin { 0% { transform: translate(var(--dx), var(--dy)) rotate(-25deg) scale(.7); opacity: 0; } 15% { opacity: 1; } 100% { transform: none; opacity: 1; } }
}
.dealdeck { position: absolute; left: 50%; top: calc(var(--cyp, 50%)); transform: translate(-50%, -50%); z-index: 2; width: 34px; height: 48px; pointer-events: none; }
.dealdeck i { position: absolute; inset: 0; border-radius: 4px; background: repeating-linear-gradient(45deg, var(--back-1) 0 4px, var(--back-2) 4px 8px); border: 2px solid var(--card); box-shadow: 0 2px 4px rgb(0 0 0 / .35); }
.dealdeck i:nth-child(2) { transform: translate(-1px, -2px); } .dealdeck i:nth-child(3) { transform: translate(-2px, -4px); } .dealdeck i:nth-child(4) { transform: translate(-3px, -6px); }
@media (prefers-reduced-motion: no-preference) { .dealdeck { animation: deckout .3s ease-in 1.4s both; } @keyframes deckout { to { opacity: 0; transform: translate(-50%, -50%) scale(.8); } } }

/* ---------- Showdown: one hand at a time, losers first, winner last ---------- */
.hand.reveal .card { position: relative; }
.hand.reveal .card::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--card);
  background: repeating-linear-gradient(45deg, var(--back-1) 0 4px, var(--back-2) 4px 8px); }
@media (prefers-reduced-motion: no-preference) {
  .hand.reveal .card { animation: flipcard .6s ease-in-out both; animation-delay: var(--rd); }
  .hand.reveal .card::after { animation: backoff .6s step-end both; animation-delay: calc(var(--rd) - .3s); }
  .hand.reveal .card:nth-child(2), .hand.reveal .card:nth-child(2)::after { animation-delay: calc(var(--rd) + .12s); }
  .hand.reveal .card:nth-child(2)::after { animation-delay: calc(var(--rd) - .18s); }
  .hand.reveal .card:nth-child(3) { animation-delay: calc(var(--rd) + .24s); } .hand.reveal .card:nth-child(3)::after { animation-delay: calc(var(--rd) - .06s); }
  @keyframes flipcard { 0% { transform: scaleX(1); } 50% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
  @keyframes backoff { 0% { opacity: 1; } 100% { opacity: 0; } }
  .seat .lbl[style] { animation: fadein .4s ease-out both; animation-delay: var(--rd); }
  .sdrow { animation: sdin .45s ease-out both; animation-delay: var(--rd); }
  .sdrow.w { animation: sdin .45s ease-out both, sdwin 1.2s ease-in-out .3s 2 alternate; animation-delay: var(--rd), calc(var(--rd) + .45s); }
  @keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  @keyframes sdin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes sdwin { to { box-shadow: 0 0 0 3px rgb(43 182 115 / .45), 0 0 20px rgb(43 182 115 / .5); } }
}
@media (prefers-reduced-motion: reduce) { .hand.reveal .card::after { display: none; } }
.sdlist { display: grid; gap: 5px; justify-items: stretch; min-width: min(300px, 100%); margin-bottom: 4px; }
.sdcap { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-felt-muted); font-weight: 700; text-align: center; }
.sdrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 12px; background: rgb(0 0 0 / .32); border: 1px solid rgb(255 255 255 / .1); color: var(--on-felt); font-size: 13.5px; text-align: left; }
.sdrow b { font-weight: 700; }
.sdrow > span:not(.sdcards), .sdcards > span { color: var(--on-felt-muted); }
.sdrow.w { background: linear-gradient(135deg, rgb(47 191 120 / .32), rgb(26 127 75 / .32)); border-color: rgb(91 224 160 / .55); }
.sdrow.w .sdcards > span { color: #fff; font-weight: 600; }
.sdrow em { font-style: normal; font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, #2fbf78, #1a7f4b); padding: 2px 8px; border-radius: 99px; }
@media (max-width: 599px) { .sdrow { font-size: 12px; padding: 5px 9px; gap: 6px; } .sdlist { min-width: 0; width: 100%; } }

/* Phone: smaller bet chips on the felt */
@media (max-width: 599px) {
  .bet { gap: 2px; }
  .bet .stack { width: 16px; height: 16px; } .bet .stack i { width: 16px; height: 5.5px; background-image: repeating-linear-gradient(90deg, transparent 0 2.5px, #b9302f 2.5px 4.5px); }
  .bet .stack i:nth-child(2) { bottom: 3px; } .bet .stack i:nth-child(3) { bottom: 6px; } .bet .stack i:nth-child(4) { bottom: 9px; }
  .bet .amt { font-size: 12px; padding: 1px 6px; }
}
/* "Saw cards" pop when someone looks at their cards */
.sawpop { position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  background: #2563a8; color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; box-shadow: 0 4px 12px rgb(37 99 168 / .45); pointer-events: none;
  animation: sawpop 2.4s ease-out both; }
.sawpop svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; }
@keyframes sawpop { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.7); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 20% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -6px); } }
/* Flip & Freeze: jokers dealt one by one, and a flipped joker turns over */
@media (prefers-reduced-motion: no-preference) {
  .ffc.dl .card { animation: ffin .55s cubic-bezier(.3, 1.3, .5, 1) both; animation-delay: var(--fd); }
  @keyframes ffin { 0% { opacity: 0; transform: translateY(18px) rotateY(90deg) scale(.7); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
}
#btnSound.off { color: var(--muted); }

/* Time bank: the countdown turns amber */
.seat .pill.turnpill.bank { background: #e08a2c; color: #fff; }
.seat .pill.turnpill .bk { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin-right: 2px; }
/* Paused */
.felt.paused .seat, .felt.paused .center, .felt.paused .bet { filter: grayscale(.6) brightness(.9); }
.pausecard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: 18px 24px; border-radius: 18px; background: rgb(12 18 16 / .86); color: #fff; border: 1px solid rgb(255 255 255 / .15); box-shadow: 0 20px 50px rgb(0 0 0 / .5); backdrop-filter: blur(4px); width: min(86%, 340px); }
.pausecard svg { width: 34px; height: 34px; fill: #ffd34d; }
.pausecard b { font-size: 20px; }
.pausecard span { font-size: 13px; color: rgb(255 255 255 / .75); }
#btnPause.on { background: #e5a12a; color: #1a1408; border-color: #e5a12a; }
#btnPause svg path, #btnPause svg rect { fill: currentColor; stroke: none; }
/* Flip & Freeze: a flipped joker is easy to spot */
.ffc.flipped .card { box-shadow: 0 0 0 2px #c08bff, 0 0 14px rgb(160 102 214 / .8); }
.ffc .ice.flipt { background: #7a3fa3; font-size: 11px; }
.fflast { font-size: 12.5px; color: var(--on-felt); background: rgb(122 63 163 / .55); border: 1px solid rgb(192 139 255 / .5); padding: 2px 10px; border-radius: 99px; margin-top: 2px; }
.fflast b { font-weight: 800; }
@media (max-width: 599px) { .ffcap .lg { display: none; } .fflast { font-size: 11px; } }

body.ispaused #actions { pointer-events: none; opacity: .45; filter: grayscale(.5); }

/* Dealer's pick: one tile with a row of choices (Little rank, 999 target) */
.pkmulti { cursor: default; }
.pksub { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 10px 0; }
.pksub button { min-width: 34px; padding: 5px 9px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); font-weight: 800; font-size: 14px; color: var(--ivory); transition: transform .12s, background .15s, color .15s; }
.pksub button:hover { transform: translateY(-2px); background: var(--a); color: #fff; border-color: var(--a); }
.pksub.many button { min-width: 0; padding: 4px 7px; font-size: 12.5px; }
.pk-999 { --a: #b5420f; --b: #f07a35; } .pk-little { --a: #0f6c7a; --b: #2bb3c0; }
.tuquick { display: flex; gap: 8px; margin: 8px 0 4px; }

/* ---------- Afflatoon ---------- */
.aflbox { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 6px 12px 6px 6px; border-radius: 14px; background: rgb(0 0 0 / .32); border: 1px solid rgb(255 255 255 / .12); }
.aflbox .card { --cw: 36px; }
.afltxt { display: grid; gap: 3px; text-align: left; }
.afltxt span { font-size: 12.5px; color: var(--on-felt); font-weight: 600; }
.afltxt .base { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; justify-self: start; color: #fff; }
.afltxt .base.black { background: #1d1d1f; border: 1px solid rgb(255 255 255 / .3); } .afltxt .base.red { background: #c8372d; }
@media (prefers-reduced-motion: no-preference) {
  .aflbox.fresh .card { animation: ffin .6s cubic-bezier(.3, 1.3, .5, 1) both; }
  .aflbox.fresh .base { animation: fadein .5s .3s both; }
}
.pk-afflatoon { --a: #7a1a2e; --b: #d14a6a; }
@media (max-width: 599px) { .aflbox .card { --cw: 28px; } .afltxt span { font-size: 11px; } .afltxt .base { font-size: 9.5px; } }

.afltxt .base { white-space: nowrap; }
@media (max-width: 599px) { .afltxt .base .bw { display: none; } .aflbox { gap: 6px; padding: 4px 8px 4px 4px; } }

/* ---------- Card Color Bust ---------- */
.ccbrow { display: flex; gap: 10px; margin-top: 6px; justify-content: center; }
.ccbc { display: grid; justify-items: center; gap: 2px; position: relative; }
.ccbc .card { --cw: 36px; }
.ccbc em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 1px 7px; border-radius: 99px; color: #fff; }
.ccbc.k0 em { background: #7a3fa3; } .ccbc.k1 em { background: #2563a8; } .ccbc.k2 em { background: #c0392b; }
.ccbc small { font-size: 10.5px; color: var(--on-felt-muted); white-space: nowrap; }
.ccbc.k2 .card { box-shadow: 0 0 0 2px #ff6b6b, 0 0 12px rgb(255 80 80 / .55); }
.ccbc.k0 .card { box-shadow: 0 0 0 2px #c08bff; } .ccbc.k1 .card { box-shadow: 0 0 0 2px #7fb8ee; }
@media (prefers-reduced-motion: no-preference) { .ccbc.dl .card, .ccbc.dl em, .ccbc.dl small { animation: ffin .55s cubic-bezier(.3, 1.3, .5, 1) both; animation-delay: var(--fd); } }
.lmkcap { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-felt-muted); font-weight: 700; margin-top: 4px; }
.pk-ccb { --a: #8f1d2c; --b: #e0533d; } .pk-lmk { --a: #1d1d1f; --b: #c8372d; }
@media (max-width: 599px) { .ccbc .card { --cw: 28px; } .ccbrow { gap: 6px; } .ccbc small { font-size: 9.5px; } }
@media (max-width: 599px) { .lmkcap { font-size: 9.5px; white-space: nowrap; } }

/* Afflatoon: the jokers either side of the face-up card, softly blurred */
.aflcards { display: flex; align-items: center; gap: 3px; }
.aflghost .card { --cw: 28px; filter: blur(.8px) saturate(.8); opacity: .62; }
.aflghost:first-child .card { transform: rotate(-8deg) translateX(4px); }
.aflghost:last-child .card { transform: rotate(8deg) translateX(-4px); }
.aflcard { position: relative; z-index: 1; }
@media (max-width: 599px) { .aflghost .card { --cw: 22px; } }

/* Blind and Seen: bold and different at a glance */
.seat .pill.blind, .seat .pill.seen { display: inline-flex; align-items: center; gap: 4px; color: #fff; border: 0; padding: 2px 9px 2px 7px; }
.seat .pill.blind svg, .seat .pill.seen svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.seat .pill.blind { background: linear-gradient(135deg, #f0a43a, #c96f12); box-shadow: 0 2px 8px rgb(201 111 18 / .45); }
.seat .pill.seen { background: linear-gradient(135deg, #4b8fe0, #1d5f9c); box-shadow: 0 2px 8px rgb(29 95 156 / .45); }
@media (max-width: 599px) { .seat .pill.blind svg, .seat .pill.seen svg { width: 11px; height: 11px; } }

/* Showdown rows show the cards */
.sdcards { display: inline-flex; align-items: center; gap: 8px; }
.sdcards .hand .card { --cw: 26px; }
.sdcards .hand .card + .card { margin-left: 2px; }
@media (max-width: 599px) { .sdcards .hand .card { --cw: 20px; } .sdcards { gap: 5px; } }
.pk-lovestory { --a: #a3214a; --b: #f06c8f; }

/* Hide / show the chat box */
.chathide { width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--muted); margin-left: 4px; flex: none; }
.chathide:hover { color: var(--ivory); border-color: var(--muted); }
.chathide svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.chatbox[hidden] { display: none !important; }
.chatshow { position: relative; }
.chatshow .unread { display: none; position: absolute; top: 3px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: #ff2d6f; box-shadow: 0 0 0 2px var(--panel); }
.chatshow.has .unread { display: block; }

.chatbox { position: relative; }
.chathide.m { display: none; position: absolute; top: 6px; right: 8px; z-index: 2; width: 24px; height: 24px; }
@media (max-width: 979px) { .chathide.m { display: grid; } }
.sdcards > span { white-space: nowrap; }

/* ---------- Sound panel ---------- */
.sndwrap { position: relative; display: inline-flex; }
.sndpop { position: absolute; top: calc(100% + 8px); right: -40px; z-index: 60; width: 248px; padding: 14px 14px 12px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 18px 44px rgb(0 0 0 / .25); display: grid; gap: 12px; }
.sndpop[hidden] { display: none; }
.sndhead { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 14px; }
.sndhead b { font-size: 13px; color: var(--brass); font-variant-numeric: tabular-nums; }
.sndpop.muted .sndhead b { color: var(--bad); }
.sndrow { display: grid; grid-template-columns: 18px 1fr 18px; align-items: center; gap: 8px; }
.sndico svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.sndrow input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--brass) var(--p, 80%), color-mix(in srgb, var(--line) 80%, transparent) var(--p, 80%)); outline: none; }
.sndpop.muted .sndrow input[type=range] { filter: grayscale(1); opacity: .55; }
.sndrow input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--brass); box-shadow: 0 2px 6px rgb(0 0 0 / .3); cursor: pointer; }
.sndrow input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--brass); box-shadow: 0 2px 6px rgb(0 0 0 / .3); cursor: pointer; }
.sndbtns { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.sndbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border-radius: 10px; font-weight: 700; font-size: 13.5px; border: 1px solid transparent; background: var(--brass); color: var(--ink); cursor: pointer; }
.sndbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sndpop.muted .sndbtn:not(.ghosty) { background: var(--good); color: #fff; }
.sndpop:not(.muted) .sndbtn:not(.ghosty) { background: color-mix(in srgb, var(--bad) 14%, var(--panel)); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.sndbtn.ghosty { background: var(--panel-2); color: var(--ivory); border-color: var(--line); }
@media (max-width: 599px) { .sndpop { right: -52px; } }

/* ---------- Table Settings: quiet slate with an indigo accent and a teal highlight ---------- */
.side.ts { --ts-bg: #f6f7fb; --ts-card: #ffffff; --ts-line: #e3e6ef; --ts-acc: #4f5bd5; --ts-acc2: #1f9e8f; --ts-ink: #1d2433; --ts-muted: #687089; --ts-tile: #f4f5fa; background: var(--ts-bg); }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) .side.ts { --ts-bg: #15171f; --ts-card: #1c1f2a; --ts-line: #2c3142; --ts-acc: #8b95f0; --ts-acc2: #4cc5b4; --ts-ink: #e8eaf2; --ts-muted: #9aa1b8; --ts-tile: #222634; } }
:root[data-mode="dark"] .side.ts { --ts-bg: #15171f; --ts-card: #1c1f2a; --ts-line: #2c3142; --ts-acc: #8b95f0; --ts-acc2: #4cc5b4; --ts-ink: #e8eaf2; --ts-muted: #9aa1b8; --ts-tile: #222634; }
.side.ts > :first-child { background: var(--ts-card); color: var(--ts-ink); border-bottom: 1px solid var(--ts-line); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ts-acc) 55%, transparent); }
.side.ts > :first-child h2 { color: var(--ts-ink); }
.side.ts > :first-child .close { color: var(--ts-muted); }
.tscard { background: var(--ts-card); border: 1px solid var(--ts-line); border-radius: 14px; padding: 14px; margin-bottom: 12px; display: grid; gap: 10px; box-shadow: 0 1px 2px rgb(20 30 60 / .04); }
.tscard h4 { margin: 0; font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--ts-muted); font-weight: 700; }
.tscard.editing { border-color: color-mix(in srgb, var(--ts-acc) 40%, var(--ts-line)); }
.tscard .field > span, .tscard .hint, .tscard .vcard p { color: var(--ts-muted); }
.tscard .field input, .tscard .field select { background: var(--ts-tile); border-color: var(--ts-line); color: var(--ts-ink); }
.tscard .field input:focus, .tscard .field select:focus { border-color: var(--ts-acc); outline: 2px solid color-mix(in srgb, var(--ts-acc) 25%, transparent); }
.tscard input[type=checkbox] { accent-color: var(--ts-acc); }
.tscard .vcard { background: var(--ts-tile); border-color: var(--ts-line); }
.tscard .vcard.on { border-color: var(--ts-acc); background: linear-gradient(180deg, color-mix(in srgb, var(--ts-acc) 12%, var(--ts-card)), var(--ts-card)); }
.tscard .badge { background: color-mix(in srgb, var(--ts-acc2) 20%, transparent); color: var(--ts-acc2); }
.tscard .primary { background: var(--ts-acc); border-color: var(--ts-acc); color: #fff; }
.tscard .link { color: var(--ts-acc); }
.tscard .copybox input { background: var(--ts-tile); border-color: var(--ts-line); color: var(--ts-ink); }
.tshead { display: flex; align-items: center; gap: 8px; }
.tshead h4 { flex: 1; }
.tssaved { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); padding: 3px 9px 3px 7px; border-radius: 99px; }
.tssaved svg, .tsbtn svg, .tsnote svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tsbtn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 10px; font-weight: 700; font-size: 13.5px; cursor: pointer; border: 1px solid var(--ts-acc); background: color-mix(in srgb, var(--ts-acc) 12%, var(--ts-card)); color: var(--ts-acc); }
.tsbtn.primary { background: var(--ts-acc); color: #fff; border-color: transparent; box-shadow: 0 2px 6px color-mix(in srgb, var(--ts-acc) 25%, transparent); padding: 9px 18px; }
.tsbtn.ghosty { background: transparent; color: var(--ts-muted); border-color: var(--ts-line); }
.tssave { position: sticky; bottom: -14px; display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 12px 2px; background: linear-gradient(180deg, transparent, var(--ts-bg) 30%); }
.tssave .hint { flex: 1; font-size: 12.5px; color: var(--ts-muted); }
.tstiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tstile { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; background: var(--ts-tile); border: 1px solid transparent; border-radius: 12px; padding: 8px 10px; min-width: 0; }
.tstile svg { grid-row: 1 / 3; width: 28px; height: 28px; padding: 5px; border-radius: 8px; background: color-mix(in srgb, var(--ts-acc) 9%, transparent); fill: none; stroke: var(--ts-acc); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tstile:nth-child(3n+2) svg { background: color-mix(in srgb, var(--ts-acc2) 11%, transparent); stroke: var(--ts-acc2); }
.tstile .k { font-size: 11px; color: var(--ts-muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tstile .v { font-size: 14.5px; color: var(--ts-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tsgames { display: grid; gap: 6px; }
.tsgame { display: grid; gap: 1px; padding: 8px 12px; border-radius: 10px; background: var(--ts-tile); border-left: 3px solid color-mix(in srgb, var(--ts-acc) 70%, transparent); }
.tsgame:nth-child(even) { border-left-color: color-mix(in srgb, var(--ts-acc2) 70%, transparent); }
.tsgame b { font-size: 13.5px; color: var(--ts-ink); }
.tsgame span { font-size: 12px; color: var(--ts-muted); }
.tsnote { display: flex; gap: 8px; align-items: center; padding: 10px 12px; margin-bottom: 12px; border-radius: 12px; font-size: 13px; color: var(--ts-ink); background: color-mix(in srgb, var(--ts-acc2) 8%, var(--ts-card)); border: 1px solid color-mix(in srgb, var(--ts-acc2) 25%, transparent); }
.tsnote svg { color: var(--ts-acc2); width: 18px; height: 18px; }

/* ---------- Ledger ---------- */
.lsum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.lstat { border-radius: 14px; padding: 10px 12px; color: #fff; display: grid; gap: 2px; box-shadow: 0 6px 16px rgb(0 0 0 / .14); }
.lstat:nth-child(1) { background: linear-gradient(135deg, #1e6b52, #2f9a72); }
.lstat:nth-child(2) { background: linear-gradient(135deg, #3d3a8f, #6a5fd0); }
.lstat:nth-child(3) { background: linear-gradient(135deg, #c2531e, #ee8f3a); }
.lstat span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; opacity: .85; }
.lstat b { font-size: 19px; }
.lhead { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 8px; }
.lhead h4 { margin: 0; font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.ldl { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ivory); cursor: pointer; }
.ldl svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lplayers { display: grid; gap: 8px; }
.lp { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); }
.lp.up { background: linear-gradient(90deg, color-mix(in srgb, var(--good) 10%, var(--panel-2)), var(--panel-2) 60%); }
.lp.down { background: linear-gradient(90deg, color-mix(in srgb, var(--bad) 9%, var(--panel-2)), var(--panel-2) 60%); }
.lp.left { opacity: .7; }
.lav { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-weight: 700; color: #1a1a1a; flex: none; }
.lav .emo { font-size: 20px; }
.lmedal { position: absolute; left: 38px; top: 6px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #5a3a00; background: linear-gradient(135deg, #ffe08a, #e0a82e); box-shadow: 0 1px 4px rgb(0 0 0 / .3); }
.lmain { display: grid; gap: 5px; min-width: 0; }
.ltop { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.lname { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lleft { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 0 6px; }
.lnet { margin-left: auto; font-size: 16px; }
.lp.up .lnet { color: var(--good); } .lp.down .lnet { color: var(--bad); } .lp.even .lnet { color: var(--muted); }
.lbar { position: relative; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--line) 70%, transparent); }
.lbar::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--muted); opacity: .5; }
.lbar i { position: absolute; top: 0; bottom: 0; border-radius: 99px; }
.lp.up .lbar i { background: linear-gradient(90deg, color-mix(in srgb, var(--good) 60%, transparent), var(--good)); }
.lp.down .lbar i { background: linear-gradient(270deg, color-mix(in srgb, var(--bad) 60%, transparent), var(--bad)); }
.lmeta { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.lmeta span { background: var(--panel); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; }
.lmeta b { color: var(--ivory); font-weight: 700; }
.lhands { display: grid; gap: 6px; }
.lh { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.lno { font-size: 12px; font-weight: 800; color: var(--brass); background: color-mix(in srgb, var(--brass) 12%, transparent); border-radius: 8px; padding: 6px 7px; min-width: 38px; text-align: center; }
.lhmain { display: grid; gap: 3px; min-width: 0; }
.lhtop { display: flex; align-items: center; gap: 7px; min-width: 0; }
.lhtop .lav { width: 22px; height: 22px; }
.lhtop .lav .emo { font-size: 12px; }
.lhtop b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpot { margin-left: auto; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.lpot::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: #e0a82e; box-shadow: inset 0 0 0 2px rgb(0 0 0 / .2), inset 0 0 0 3px #e0a82e, inset 0 0 0 4px rgb(255 255 255 / .6); }
.lhsub { display: flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--muted); min-width: 0; }
.lhsub > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lvar { flex: none; font-weight: 700; color: var(--ivory); background: var(--panel-2); border: 1px solid var(--line); border-radius: 99px; padding: 0 7px; }
.lhsub .link { margin-left: auto; font-size: 11.5px; }

/* ---------- Seats: dark glass capsule with a gold hairline ---------- */
.seat .who { background: linear-gradient(180deg, #2c3036, #15171b) padding-box, linear-gradient(135deg, #f1d590, #6d5826 45%, #c9a14a) border-box; border: 1.5px solid transparent; box-shadow: 0 8px 18px rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .08); }
.seat .who::after { content: ""; position: absolute; inset: 1px 12px auto 46px; height: 40%; border-radius: 99px; background: linear-gradient(180deg, rgb(255 255 255 / .09), transparent); pointer-events: none; }
.seat .nm { color: #f6f1e6; letter-spacing: .01em; }
.seat .ch { color: #f0cd78; }
.seat .ch::before { background: #e0a82e; box-shadow: inset 0 0 0 2px rgb(0 0 0 / .25), inset 0 0 0 3px #e0a82e, inset 0 0 0 4px rgb(255 255 255 / .6); }
.seat .av { box-shadow: 0 0 0 2px #15171b, 0 0 0 3.5px #c9a14a; }
.seat.turn .who { background: linear-gradient(180deg, #f6dc8f, #d4a43e) padding-box, linear-gradient(135deg, #fff6d6, #a77a22) border-box; }
.seat.turn .who .nm, .seat.turn .who .ch { color: #241a05; }
.seat.turn .who .ch::before { filter: none; }
.seat.turn .av { box-shadow: 0 0 0 2px #d4a43e, 0 0 0 3.5px #fff6d6; }
.seat.win .who { background: linear-gradient(180deg, #2c3036, #15171b) padding-box, linear-gradient(135deg, #5be0a0, #2bb673 50%, #1a7f4b) border-box; }
.seat.packed .who { filter: grayscale(.9); opacity: .6; }

.tscard.pending { border-color: color-mix(in srgb, var(--ts-acc2) 45%, var(--ts-line)); background: color-mix(in srgb, var(--ts-acc2) 5%, var(--ts-card)); }
.tscard.pending h4 { color: var(--ts-acc2); }
.tspend { font-size: 11.5px; font-weight: 700; color: var(--ts-acc2); background: color-mix(in srgb, var(--ts-acc2) 12%, transparent); padding: 3px 9px; border-radius: 99px; }
.logline.notice { color: var(--brass); font-weight: 600; }

/* ---------- Empty seats: a faint version of the seat capsule, with the seat number in the avatar ring ---------- */
.seatbox { width: auto; min-width: 112px; height: auto; padding: 4px 14px 4px 4px; display: flex; align-items: center; gap: 8px; border-radius: 99px; border: 1.5px dashed color-mix(in srgb, #c9a14a 55%, transparent); background: linear-gradient(180deg, rgb(44 48 54 / .55), rgb(21 23 27 / .55)); color: #d9cfb8; box-shadow: inset 0 1px 0 rgb(255 255 255 / .05); backdrop-filter: blur(2px); }
.seatbox .sav { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #e9cf8e; background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .1), rgb(0 0 0 / .25)); border: 1.5px solid color-mix(in srgb, #c9a14a 60%, transparent); }
.seatbox .stx { display: grid; line-height: 1.1; text-align: left; min-width: 0; }
.seatbox .sl { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; padding: 0; color: #f0e4c4; }
.seatbox .ss { position: static; font-size: 10.5px; color: rgb(233 207 142 / .7); letter-spacing: .02em; }
.seatbox:not(.open):not(.ask) { opacity: .55; }
.seatbox:not(.open):not(.ask) .sl { font-weight: 600; letter-spacing: .14em; color: #cfc6b0; }
button.seatbox:hover, button.seatbox:focus-visible { border-style: solid; border-color: #e0b85a; color: #fff; background: linear-gradient(180deg, rgb(60 54 38 / .85), rgb(30 26 18 / .85)); box-shadow: 0 0 0 3px rgb(224 184 90 / .18), 0 6px 16px rgb(0 0 0 / .3); }
button.seatbox:hover .sav, button.seatbox:focus-visible .sav { background: #e0b85a; color: #241a05; border-color: #fff3c4; }
.seatbox.ask { border-style: solid; border-color: #4cc5b4; }
.seatbox.ask .sav { border-color: #4cc5b4; color: #8fe3d6; }
.seatbox.ask .sl { letter-spacing: 0; text-transform: none; font-weight: 700; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 599px) {
  .seatbox { min-width: 0; padding: 3px 9px 3px 3px; gap: 5px; }
  .seatbox .sav { width: 24px; height: 24px; font-size: 10.5px; }
  .seatbox .sl { font-size: 10px; letter-spacing: .12em; }
  .seatbox .ss { display: none; }
  .seatbox.ask .sl { max-width: 54px; }
}
.seatbox { background: linear-gradient(180deg, #2a2e34, #17191d); }
.seatbox:not(.open):not(.ask) { opacity: .82; border-color: rgb(201 161 74 / .35); }
@media (max-width: 599px) {
  .seatbox:not(.open):not(.ask) { padding: 3px; }
  .seatbox:not(.open):not(.ask) .stx { display: none; }
}

/* ---------- Page backgrounds (each with a light and a dark version). html[data-bg] picks one. ---------- */
html[data-bg="suits"] body, .bgsw-suits { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath transform='translate(30 34) rotate(-12) scale(11)' d='M0 -0.95 C-0.9 -0.25 -1 0.15 -0.9 0.35 C-0.75 0.75 -0.2 0.7 -0.08 0.35 L-0.3 0.95 H0.3 L0.08 0.35 C0.2 0.7 0.75 0.75 0.9 0.35 C1 0.15 0.9 -0.25 0 -0.95Z' fill='%231e6b52' opacity='0.07'/%3E%3Cpath transform='translate(112 40) rotate(14) scale(10)' d='M0 0.85 C-0.9 0.2 -1 -0.25 -0.95 -0.45 C-0.85 -0.95 -0.15 -1 0 -0.45 C0.15 -1 0.85 -0.95 0.95 -0.45 C1 -0.25 0.9 0.2 0 0.85Z' fill='%231e6b52' opacity='0.07'/%3E%3Cpath transform='translate(72 100) rotate(8) scale(11)' d='M0 -1 L0.72 0 L0 1 L-0.72 0Z' fill='%231e6b52' opacity='0.07'/%3E%3Cg transform='translate(140 128) rotate(-18) scale(11)' fill='%231e6b52' opacity='0.07'%3E%3Ccircle cx='0' cy='-0.48' r='0.4'/%3E%3Ccircle cx='-0.47' cy='0.12' r='0.4'/%3E%3Ccircle cx='0.47' cy='0.12' r='0.4'/%3E%3Cpath d='M-0.1 0.05 L-0.3 0.95 H0.3 L0.1 0.05Z'/%3E%3C/g%3E%3Cpath transform='translate(24 132) rotate(20) scale(7)' d='M0 -0.95 C-0.9 -0.25 -1 0.15 -0.9 0.35 C-0.75 0.75 -0.2 0.7 -0.08 0.35 L-0.3 0.95 H0.3 L0.08 0.35 C0.2 0.7 0.75 0.75 0.9 0.35 C1 0.15 0.9 -0.25 0 -0.95Z' fill='%231e6b52' opacity='0.07'/%3E%3Cpath transform='translate(84 22) rotate(-20) scale(6)' d='M0 0.85 C-0.9 0.2 -1 -0.25 -0.95 -0.45 C-0.85 -0.95 -0.15 -1 0 -0.45 C0.15 -1 0.85 -0.95 0.95 -0.45 C1 -0.25 0.9 0.2 0 0.85Z' fill='%231e6b52' opacity='0.07'/%3E%3C/svg%3E"), #e7ebe9; background-attachment: fixed; }
@media (prefers-color-scheme: dark) { html:not([data-mode="light"])[data-bg="suits"] body, :root:not([data-mode="light"]) .bgsw-suits { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath transform='translate(30 34) rotate(-12) scale(11)' d='M0 -0.95 C-0.9 -0.25 -1 0.15 -0.9 0.35 C-0.75 0.75 -0.2 0.7 -0.08 0.35 L-0.3 0.95 H0.3 L0.08 0.35 C0.2 0.7 0.75 0.75 0.9 0.35 C1 0.15 0.9 -0.25 0 -0.95Z' fill='%23ffffff' opacity='0.05'/%3E%3Cpath transform='translate(112 40) rotate(14) scale(10)' d='M0 0.85 C-0.9 0.2 -1 -0.25 -0.95 -0.45 C-0.85 -0.95 -0.15 -1 0 -0.45 C0.15 -1 0.85 -0.95 0.95 -0.45 C1 -0.25 0.9 0.2 0 0.85Z' fill='%23ffffff' opacity='0.05'/%3E%3Cpath transform='translate(72 100) rotate(8) scale(11)' d='M0 -1 L0.72 0 L0 1 L-0.72 0Z' fill='%23ffffff' opacity='0.05'/%3E%3Cg transform='translate(140 128) rotate(-18) scale(11)' fill='%23ffffff' opacity='0.05'%3E%3Ccircle cx='0' cy='-0.48' r='0.4'/%3E%3Ccircle cx='-0.47' cy='0.12' r='0.4'/%3E%3Ccircle cx='0.47' cy='0.12' r='0.4'/%3E%3Cpath d='M-0.1 0.05 L-0.3 0.95 H0.3 L0.1 0.05Z'/%3E%3C/g%3E%3Cpath transform='translate(24 132) rotate(20) scale(7)' d='M0 -0.95 C-0.9 -0.25 -1 0.15 -0.9 0.35 C-0.75 0.75 -0.2 0.7 -0.08 0.35 L-0.3 0.95 H0.3 L0.08 0.35 C0.2 0.7 0.75 0.75 0.9 0.35 C1 0.15 0.9 -0.25 0 -0.95Z' fill='%23ffffff' opacity='0.05'/%3E%3Cpath transform='translate(84 22) rotate(-20) scale(6)' d='M0 0.85 C-0.9 0.2 -1 -0.25 -0.95 -0.45 C-0.85 -0.95 -0.15 -1 0 -0.45 C0.15 -1 0.85 -0.95 0.95 -0.45 C1 -0.25 0.9 0.2 0 0.85Z' fill='%23ffffff' opacity='0.05'/%3E%3C/svg%3E"), #111614; background-attachment: fixed; } }
html[data-mode="dark"][data-bg="suits"] body, :root[data-mode="dark"] .bgsw-suits { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath transform='translate(30 34) rotate(-12) scale(11)' d='M0 -0.95 C-0.9 -0.25 -1 0.15 -0.9 0.35 C-0.75 0.75 -0.2 0.7 -0.08 0.35 L-0.3 0.95 H0.3 L0.08 0.35 C0.2 0.7 0.75 0.75 0.9 0.35 C1 0.15 0.9 -0.25 0 -0.95Z' fill='%23ffffff' opacity='0.05'/%3E%3Cpath transform='translate(112 40) rotate(14) scale(10)' d='M0 0.85 C-0.9 0.2 -1 -0.25 -0.95 -0.45 C-0.85 -0.95 -0.15 -1 0 -0.45 C0.15 -1 0.85 -0.95 0.95 -0.45 C1 -0.25 0.9 0.2 0 0.85Z' fill='%23ffffff' opacity='0.05'/%3E%3Cpath transform='translate(72 100) rotate(8) scale(11)' d='M0 -1 L0.72 0 L0 1 L-0.72 0Z' fill='%23ffffff' opacity='0.05'/%3E%3Cg transform='translate(140 128) rotate(-18) scale(11)' fill='%23ffffff' opacity='0.05'%3E%3Ccircle cx='0' cy='-0.48' r='0.4'/%3E%3Ccircle cx='-0.47' cy='0.12' r='0.4'/%3E%3Ccircle cx='0.47' cy='0.12' r='0.4'/%3E%3Cpath d='M-0.1 0.05 L-0.3 0.95 H0.3 L0.1 0.05Z'/%3E%3C/g%3E%3Cpath transform='translate(24 132) rotate(20) scale(7)' d='M0 -0.95 C-0.9 -0.25 -1 0.15 -0.9 0.35 C-0.75 0.75 -0.2 0.7 -0.08 0.35 L-0.3 0.95 H0.3 L0.08 0.35 C0.2 0.7 0.75 0.75 0.9 0.35 C1 0.15 0.9 -0.25 0 -0.95Z' fill='%23ffffff' opacity='0.05'/%3E%3Cpath transform='translate(84 22) rotate(-20) scale(6)' d='M0 0.85 C-0.9 0.2 -1 -0.25 -0.95 -0.45 C-0.85 -0.95 -0.15 -1 0 -0.45 C0.15 -1 0.85 -0.95 0.95 -0.45 C1 -0.25 0.9 0.2 0 0.85Z' fill='%23ffffff' opacity='0.05'/%3E%3C/svg%3E"), #111614; background-attachment: fixed; }
html[data-bg="velvet"] body, .bgsw-velvet { background: radial-gradient(ellipse 80% 70% at 50% 42%, #faf3e7, #ead9bd 62%, #d3bb93); background-attachment: fixed; }
@media (prefers-color-scheme: dark) { html:not([data-mode="light"])[data-bg="velvet"] body, :root:not([data-mode="light"]) .bgsw-velvet { background: radial-gradient(ellipse 80% 70% at 50% 45%, #44172a, #22090f 62%, #110407); background-attachment: fixed; } }
html[data-mode="dark"][data-bg="velvet"] body, :root[data-mode="dark"] .bgsw-velvet { background: radial-gradient(ellipse 80% 70% at 50% 45%, #44172a, #22090f 62%, #110407); background-attachment: fixed; }
html[data-bg="deco"] body, .bgsw-deco { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 30 a30 30 0 0 1 60 0' fill='none' stroke='%235d6f69' stroke-opacity='0.2' stroke-width='1.2'/%3E%3Cpath d='M10 30 a20 20 0 0 1 40 0' fill='none' stroke='%235d6f69' stroke-opacity='0.2' stroke-width='1'/%3E%3Cpath d='M20 30 a10 10 0 0 1 20 0' fill='none' stroke='%235d6f69' stroke-opacity='0.2' stroke-width='1'/%3E%3Cpath d='M60 30 a30 30 0 0 1 60 0' fill='none' stroke='%235d6f69' stroke-opacity='0.2' stroke-width='1.2'/%3E%3Cpath d='M70 30 a20 20 0 0 1 40 0' fill='none' stroke='%235d6f69' stroke-opacity='0.2' stroke-width='1'/%3E%3Cpath d='M80 30 a10 10 0 0 1 20 0' fill='none' stroke='%235d6f69' stroke-opacity='0.2' stroke-width='1'/%3E%3Cpath d='M-30 60 a30 30 0 0 1 60 0' fill='none' stroke='%235d6f69' stroke-opacity='0.2' stroke-width='1.2'/%3E%3Cpath d='M-20 60 a20 20 0 0 1 40 0' fill='none' stroke='%235d6f69' stroke-opacity='0.2' stroke-width='1'/%3E%3Cpath d='M-10 60 a10 10 0 0 1 20 0' fill='none' stroke='%235d6f69' stroke-opacity='0.2' stroke-width='1'/%3E%3Cpath d='M30 60 a30 30 0 0 1 60 0' fill='none' stroke='%235d6f69' stroke-opacity='0.2' stroke-width='1.2'/%3E%3Cpath d='M40 60 a20 20 0 0 1 40 0' fill='none' stroke='%235d6f69' stroke-opacity='0.2' stroke-width='1'/%3E%3Cpath d='M50 60 a10 10 0 0 1 20 0' fill='none' stroke='%235d6f69' stroke-opacity='0.2' stroke-width='1'/%3E%3C/svg%3E"), linear-gradient(180deg, #eef0ec, #e2e6e1); background-attachment: fixed; }
@media (prefers-color-scheme: dark) { html:not([data-mode="light"])[data-bg="deco"] body, :root:not([data-mode="light"]) .bgsw-deco { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 30 a30 30 0 0 1 60 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1.2'/%3E%3Cpath d='M10 30 a20 20 0 0 1 40 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath d='M20 30 a10 10 0 0 1 20 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath d='M60 30 a30 30 0 0 1 60 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1.2'/%3E%3Cpath d='M70 30 a20 20 0 0 1 40 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath d='M80 30 a10 10 0 0 1 20 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath d='M-30 60 a30 30 0 0 1 60 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1.2'/%3E%3Cpath d='M-20 60 a20 20 0 0 1 40 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath d='M-10 60 a10 10 0 0 1 20 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath d='M30 60 a30 30 0 0 1 60 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1.2'/%3E%3Cpath d='M40 60 a20 20 0 0 1 40 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath d='M50 60 a10 10 0 0 1 20 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1'/%3E%3C/svg%3E"), linear-gradient(180deg, #16181e, #0e0f13); background-attachment: fixed; } }
html[data-mode="dark"][data-bg="deco"] body, :root[data-mode="dark"] .bgsw-deco { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 30 a30 30 0 0 1 60 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1.2'/%3E%3Cpath d='M10 30 a20 20 0 0 1 40 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath d='M20 30 a10 10 0 0 1 20 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath d='M60 30 a30 30 0 0 1 60 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1.2'/%3E%3Cpath d='M70 30 a20 20 0 0 1 40 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath d='M80 30 a10 10 0 0 1 20 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath d='M-30 60 a30 30 0 0 1 60 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1.2'/%3E%3Cpath d='M-20 60 a20 20 0 0 1 40 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath d='M-10 60 a10 10 0 0 1 20 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath d='M30 60 a30 30 0 0 1 60 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1.2'/%3E%3Cpath d='M40 60 a20 20 0 0 1 40 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath d='M50 60 a10 10 0 0 1 20 0' fill='none' stroke='%23a3b5af' stroke-opacity='0.1' stroke-width='1'/%3E%3C/svg%3E"), linear-gradient(180deg, #16181e, #0e0f13); background-attachment: fixed; }
html[data-bg="argyle"] body, .bgsw-argyle { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 0 L56 28 L28 56 L0 28Z' fill='%232f4a7a' fill-opacity='0.05'/%3E%3Cpath d='M0 0 L56 56 M56 0 L0 56' stroke='%232f4a7a' stroke-opacity='0.14' stroke-width='1' stroke-dasharray='3 3'/%3E%3C/svg%3E"), linear-gradient(180deg, #e9eef6, #dfe6f1); background-attachment: fixed; }
@media (prefers-color-scheme: dark) { html:not([data-mode="light"])[data-bg="argyle"] body, :root:not([data-mode="light"]) .bgsw-argyle { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 0 L56 28 L28 56 L0 28Z' fill='%238fb0ff' fill-opacity='0.04'/%3E%3Cpath d='M0 0 L56 56 M56 0 L0 56' stroke='%238fb0ff' stroke-opacity='0.1' stroke-width='1' stroke-dasharray='3 3'/%3E%3C/svg%3E"), linear-gradient(180deg, #111a2c, #0b111e); background-attachment: fixed; } }
html[data-mode="dark"][data-bg="argyle"] body, :root[data-mode="dark"] .bgsw-argyle { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 0 L56 28 L28 56 L0 28Z' fill='%238fb0ff' fill-opacity='0.04'/%3E%3Cpath d='M0 0 L56 56 M56 0 L0 56' stroke='%238fb0ff' stroke-opacity='0.1' stroke-width='1' stroke-dasharray='3 3'/%3E%3C/svg%3E"), linear-gradient(180deg, #111a2c, #0b111e); background-attachment: fixed; }
html[data-bg="wood"] body, .bgsw-wood { background: radial-gradient(ellipse 75% 65% at 50% 45%, rgb(255 244 220 / .55), transparent 70%), repeating-linear-gradient(90deg, rgb(120 80 40 / .10) 0 1px, transparent 1px 7px, rgb(120 80 40 / .05) 7px 8px, transparent 8px 19px), repeating-linear-gradient(90deg, transparent 0 139px, rgb(90 55 25 / .25) 139px 141px), linear-gradient(180deg, #e2c9a0, #cfb084); background-attachment: fixed; }
@media (prefers-color-scheme: dark) { html:not([data-mode="light"])[data-bg="wood"] body, :root:not([data-mode="light"]) .bgsw-wood { background: radial-gradient(ellipse 75% 65% at 50% 45%, rgb(255 190 120 / .14), transparent 70%), repeating-linear-gradient(90deg, rgb(0 0 0 / .18) 0 1px, transparent 1px 7px, rgb(255 210 160 / .03) 7px 8px, transparent 8px 19px), repeating-linear-gradient(90deg, transparent 0 139px, rgb(0 0 0 / .45) 139px 141px), linear-gradient(180deg, #3a2618, #24170e); background-attachment: fixed; } }
html[data-mode="dark"][data-bg="wood"] body, :root[data-mode="dark"] .bgsw-wood { background: radial-gradient(ellipse 75% 65% at 50% 45%, rgb(255 190 120 / .14), transparent 70%), repeating-linear-gradient(90deg, rgb(0 0 0 / .18) 0 1px, transparent 1px 7px, rgb(255 210 160 / .03) 7px 8px, transparent 8px 19px), repeating-linear-gradient(90deg, transparent 0 139px, rgb(0 0 0 / .45) 139px 141px), linear-gradient(180deg, #3a2618, #24170e); background-attachment: fixed; }
html[data-bg="neon"] body, .bgsw-neon { background: radial-gradient(circle at 12% 18%, rgb(255 92 168 / .22), transparent 32%), radial-gradient(circle at 88% 22%, rgb(64 200 220 / .24), transparent 30%), radial-gradient(circle at 80% 88%, rgb(255 190 70 / .22), transparent 34%), radial-gradient(circle at 15% 85%, rgb(130 100 255 / .2), transparent 32%), #f4f2f8; background-attachment: fixed; }
@media (prefers-color-scheme: dark) { html:not([data-mode="light"])[data-bg="neon"] body, :root:not([data-mode="light"]) .bgsw-neon { background: radial-gradient(circle at 12% 18%, rgb(255 60 150 / .28), transparent 32%), radial-gradient(circle at 88% 22%, rgb(40 200 230 / .24), transparent 30%), radial-gradient(circle at 80% 88%, rgb(255 170 40 / .2), transparent 34%), radial-gradient(circle at 15% 85%, rgb(120 80 255 / .28), transparent 32%), #0c0a16; background-attachment: fixed; } }
html[data-mode="dark"][data-bg="neon"] body, :root[data-mode="dark"] .bgsw-neon { background: radial-gradient(circle at 12% 18%, rgb(255 60 150 / .28), transparent 32%), radial-gradient(circle at 88% 22%, rgb(40 200 230 / .24), transparent 30%), radial-gradient(circle at 80% 88%, rgb(255 170 40 / .2), transparent 34%), radial-gradient(circle at 15% 85%, rgb(120 80 255 / .28), transparent 32%), #0c0a16; background-attachment: fixed; }
html[data-bg="chips"] body, .bgsw-chips { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg opacity='0.16'%3E%3Ccircle cx='92' cy='48' r='8' fill='%23c42b2b'/%3E%3Ccircle cx='92' cy='48' r='5.76' fill='none' stroke='%23fff' stroke-width='2.24' stroke-dasharray='4.48 4.48'/%3E%3Ccircle cx='92' cy='48' r='3.36' fill='%23c42b2b' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg opacity='0.16'%3E%3Ccircle cx='176' cy='22' r='7' fill='%231f6fc4'/%3E%3Ccircle cx='176' cy='22' r='5.04' fill='none' stroke='%23fff' stroke-width='1.9600000000000002' stroke-dasharray='3.9200000000000004 3.9200000000000004'/%3E%3Ccircle cx='176' cy='22' r='2.94' fill='%231f6fc4' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg transform='translate(220 147) rotate(6)' opacity='0.16'%3E%3Crect x='-8' y='-11' width='16' height='22' rx='2' fill='%23fff' stroke='%23000' stroke-opacity='.25'/%3E%3Crect x='-5.5' y='-8.5' width='11' height='17' rx='1' fill='%231f8a4c' fill-opacity='.7'/%3E%3C/g%3E%3Cg opacity='0.16'%3E%3Ccircle cx='159' cy='24' r='9' fill='%23e0a82e'/%3E%3Ccircle cx='159' cy='24' r='6.4799999999999995' fill='none' stroke='%23fff' stroke-width='2.5200000000000005' stroke-dasharray='5.040000000000001 5.040000000000001'/%3E%3Ccircle cx='159' cy='24' r='3.78' fill='%23e0a82e' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg opacity='0.16'%3E%3Ccircle cx='64' cy='19' r='7' fill='%237a3fc0'/%3E%3Ccircle cx='64' cy='19' r='5.04' fill='none' stroke='%23fff' stroke-width='1.9600000000000002' stroke-dasharray='3.9200000000000004 3.9200000000000004'/%3E%3Ccircle cx='64' cy='19' r='2.94' fill='%237a3fc0' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg transform='translate(121 117) rotate(-10)' opacity='0.16'%3E%3Crect x='-8' y='-11' width='16' height='22' rx='2' fill='%23fff' stroke='%23000' stroke-opacity='.25'/%3E%3Crect x='-5.5' y='-8.5' width='11' height='17' rx='1' fill='%23151515' fill-opacity='.7'/%3E%3C/g%3E%3Cg opacity='0.16'%3E%3Ccircle cx='33' cy='151' r='8' fill='%23c42b2b'/%3E%3Ccircle cx='33' cy='151' r='5.76' fill='none' stroke='%23fff' stroke-width='2.24' stroke-dasharray='4.48 4.48'/%3E%3Ccircle cx='33' cy='151' r='3.36' fill='%23c42b2b' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg opacity='0.16'%3E%3Ccircle cx='25' cy='221' r='9' fill='%231f6fc4'/%3E%3Ccircle cx='25' cy='221' r='6.4799999999999995' fill='none' stroke='%23fff' stroke-width='2.5200000000000005' stroke-dasharray='5.040000000000001 5.040000000000001'/%3E%3Ccircle cx='25' cy='221' r='3.78' fill='%231f6fc4' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg transform='translate(41 67) rotate(40)' opacity='0.16'%3E%3Crect x='-8' y='-11' width='16' height='22' rx='2' fill='%23fff' stroke='%23000' stroke-opacity='.25'/%3E%3Crect x='-5.5' y='-8.5' width='11' height='17' rx='1' fill='%231f8a4c' fill-opacity='.7'/%3E%3C/g%3E%3Cg opacity='0.16'%3E%3Ccircle cx='159' cy='25' r='9' fill='%23e0a82e'/%3E%3Ccircle cx='159' cy='25' r='6.4799999999999995' fill='none' stroke='%23fff' stroke-width='2.5200000000000005' stroke-dasharray='5.040000000000001 5.040000000000001'/%3E%3Ccircle cx='159' cy='25' r='3.78' fill='%23e0a82e' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg opacity='0.16'%3E%3Ccircle cx='159' cy='111' r='7' fill='%237a3fc0'/%3E%3Ccircle cx='159' cy='111' r='5.04' fill='none' stroke='%23fff' stroke-width='1.9600000000000002' stroke-dasharray='3.9200000000000004 3.9200000000000004'/%3E%3Ccircle cx='159' cy='111' r='2.94' fill='%237a3fc0' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg transform='translate(66 21) rotate(-23)' opacity='0.16'%3E%3Crect x='-8' y='-11' width='16' height='22' rx='2' fill='%23fff' stroke='%23000' stroke-opacity='.25'/%3E%3Crect x='-5.5' y='-8.5' width='11' height='17' rx='1' fill='%23151515' fill-opacity='.7'/%3E%3C/g%3E%3C/svg%3E"), #e9ecea; background-attachment: fixed; }
@media (prefers-color-scheme: dark) { html:not([data-mode="light"])[data-bg="chips"] body, :root:not([data-mode="light"]) .bgsw-chips { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg opacity='0.14'%3E%3Ccircle cx='92' cy='48' r='8' fill='%23c42b2b'/%3E%3Ccircle cx='92' cy='48' r='5.76' fill='none' stroke='%23fff' stroke-width='2.24' stroke-dasharray='4.48 4.48'/%3E%3Ccircle cx='92' cy='48' r='3.36' fill='%23c42b2b' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg opacity='0.14'%3E%3Ccircle cx='176' cy='22' r='7' fill='%231f6fc4'/%3E%3Ccircle cx='176' cy='22' r='5.04' fill='none' stroke='%23fff' stroke-width='1.9600000000000002' stroke-dasharray='3.9200000000000004 3.9200000000000004'/%3E%3Ccircle cx='176' cy='22' r='2.94' fill='%231f6fc4' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg transform='translate(220 147) rotate(6)' opacity='0.14'%3E%3Crect x='-8' y='-11' width='16' height='22' rx='2' fill='%23fff' stroke='%23000' stroke-opacity='.25'/%3E%3Crect x='-5.5' y='-8.5' width='11' height='17' rx='1' fill='%231f8a4c' fill-opacity='.7'/%3E%3C/g%3E%3Cg opacity='0.14'%3E%3Ccircle cx='159' cy='24' r='9' fill='%23e0a82e'/%3E%3Ccircle cx='159' cy='24' r='6.4799999999999995' fill='none' stroke='%23fff' stroke-width='2.5200000000000005' stroke-dasharray='5.040000000000001 5.040000000000001'/%3E%3Ccircle cx='159' cy='24' r='3.78' fill='%23e0a82e' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg opacity='0.14'%3E%3Ccircle cx='64' cy='19' r='7' fill='%237a3fc0'/%3E%3Ccircle cx='64' cy='19' r='5.04' fill='none' stroke='%23fff' stroke-width='1.9600000000000002' stroke-dasharray='3.9200000000000004 3.9200000000000004'/%3E%3Ccircle cx='64' cy='19' r='2.94' fill='%237a3fc0' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg transform='translate(121 117) rotate(-10)' opacity='0.14'%3E%3Crect x='-8' y='-11' width='16' height='22' rx='2' fill='%23fff' stroke='%23000' stroke-opacity='.25'/%3E%3Crect x='-5.5' y='-8.5' width='11' height='17' rx='1' fill='%23151515' fill-opacity='.7'/%3E%3C/g%3E%3Cg opacity='0.14'%3E%3Ccircle cx='33' cy='151' r='8' fill='%23c42b2b'/%3E%3Ccircle cx='33' cy='151' r='5.76' fill='none' stroke='%23fff' stroke-width='2.24' stroke-dasharray='4.48 4.48'/%3E%3Ccircle cx='33' cy='151' r='3.36' fill='%23c42b2b' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg opacity='0.14'%3E%3Ccircle cx='25' cy='221' r='9' fill='%231f6fc4'/%3E%3Ccircle cx='25' cy='221' r='6.4799999999999995' fill='none' stroke='%23fff' stroke-width='2.5200000000000005' stroke-dasharray='5.040000000000001 5.040000000000001'/%3E%3Ccircle cx='25' cy='221' r='3.78' fill='%231f6fc4' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg transform='translate(41 67) rotate(40)' opacity='0.14'%3E%3Crect x='-8' y='-11' width='16' height='22' rx='2' fill='%23fff' stroke='%23000' stroke-opacity='.25'/%3E%3Crect x='-5.5' y='-8.5' width='11' height='17' rx='1' fill='%231f8a4c' fill-opacity='.7'/%3E%3C/g%3E%3Cg opacity='0.14'%3E%3Ccircle cx='159' cy='25' r='9' fill='%23e0a82e'/%3E%3Ccircle cx='159' cy='25' r='6.4799999999999995' fill='none' stroke='%23fff' stroke-width='2.5200000000000005' stroke-dasharray='5.040000000000001 5.040000000000001'/%3E%3Ccircle cx='159' cy='25' r='3.78' fill='%23e0a82e' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg opacity='0.14'%3E%3Ccircle cx='159' cy='111' r='7' fill='%237a3fc0'/%3E%3Ccircle cx='159' cy='111' r='5.04' fill='none' stroke='%23fff' stroke-width='1.9600000000000002' stroke-dasharray='3.9200000000000004 3.9200000000000004'/%3E%3Ccircle cx='159' cy='111' r='2.94' fill='%237a3fc0' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg transform='translate(66 21) rotate(-23)' opacity='0.14'%3E%3Crect x='-8' y='-11' width='16' height='22' rx='2' fill='%23fff' stroke='%23000' stroke-opacity='.25'/%3E%3Crect x='-5.5' y='-8.5' width='11' height='17' rx='1' fill='%23151515' fill-opacity='.7'/%3E%3C/g%3E%3C/svg%3E"), #111614; background-attachment: fixed; } }
html[data-mode="dark"][data-bg="chips"] body, :root[data-mode="dark"] .bgsw-chips { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg opacity='0.14'%3E%3Ccircle cx='92' cy='48' r='8' fill='%23c42b2b'/%3E%3Ccircle cx='92' cy='48' r='5.76' fill='none' stroke='%23fff' stroke-width='2.24' stroke-dasharray='4.48 4.48'/%3E%3Ccircle cx='92' cy='48' r='3.36' fill='%23c42b2b' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg opacity='0.14'%3E%3Ccircle cx='176' cy='22' r='7' fill='%231f6fc4'/%3E%3Ccircle cx='176' cy='22' r='5.04' fill='none' stroke='%23fff' stroke-width='1.9600000000000002' stroke-dasharray='3.9200000000000004 3.9200000000000004'/%3E%3Ccircle cx='176' cy='22' r='2.94' fill='%231f6fc4' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg transform='translate(220 147) rotate(6)' opacity='0.14'%3E%3Crect x='-8' y='-11' width='16' height='22' rx='2' fill='%23fff' stroke='%23000' stroke-opacity='.25'/%3E%3Crect x='-5.5' y='-8.5' width='11' height='17' rx='1' fill='%231f8a4c' fill-opacity='.7'/%3E%3C/g%3E%3Cg opacity='0.14'%3E%3Ccircle cx='159' cy='24' r='9' fill='%23e0a82e'/%3E%3Ccircle cx='159' cy='24' r='6.4799999999999995' fill='none' stroke='%23fff' stroke-width='2.5200000000000005' stroke-dasharray='5.040000000000001 5.040000000000001'/%3E%3Ccircle cx='159' cy='24' r='3.78' fill='%23e0a82e' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg opacity='0.14'%3E%3Ccircle cx='64' cy='19' r='7' fill='%237a3fc0'/%3E%3Ccircle cx='64' cy='19' r='5.04' fill='none' stroke='%23fff' stroke-width='1.9600000000000002' stroke-dasharray='3.9200000000000004 3.9200000000000004'/%3E%3Ccircle cx='64' cy='19' r='2.94' fill='%237a3fc0' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg transform='translate(121 117) rotate(-10)' opacity='0.14'%3E%3Crect x='-8' y='-11' width='16' height='22' rx='2' fill='%23fff' stroke='%23000' stroke-opacity='.25'/%3E%3Crect x='-5.5' y='-8.5' width='11' height='17' rx='1' fill='%23151515' fill-opacity='.7'/%3E%3C/g%3E%3Cg opacity='0.14'%3E%3Ccircle cx='33' cy='151' r='8' fill='%23c42b2b'/%3E%3Ccircle cx='33' cy='151' r='5.76' fill='none' stroke='%23fff' stroke-width='2.24' stroke-dasharray='4.48 4.48'/%3E%3Ccircle cx='33' cy='151' r='3.36' fill='%23c42b2b' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg opacity='0.14'%3E%3Ccircle cx='25' cy='221' r='9' fill='%231f6fc4'/%3E%3Ccircle cx='25' cy='221' r='6.4799999999999995' fill='none' stroke='%23fff' stroke-width='2.5200000000000005' stroke-dasharray='5.040000000000001 5.040000000000001'/%3E%3Ccircle cx='25' cy='221' r='3.78' fill='%231f6fc4' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg transform='translate(41 67) rotate(40)' opacity='0.14'%3E%3Crect x='-8' y='-11' width='16' height='22' rx='2' fill='%23fff' stroke='%23000' stroke-opacity='.25'/%3E%3Crect x='-5.5' y='-8.5' width='11' height='17' rx='1' fill='%231f8a4c' fill-opacity='.7'/%3E%3C/g%3E%3Cg opacity='0.14'%3E%3Ccircle cx='159' cy='25' r='9' fill='%23e0a82e'/%3E%3Ccircle cx='159' cy='25' r='6.4799999999999995' fill='none' stroke='%23fff' stroke-width='2.5200000000000005' stroke-dasharray='5.040000000000001 5.040000000000001'/%3E%3Ccircle cx='159' cy='25' r='3.78' fill='%23e0a82e' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg opacity='0.14'%3E%3Ccircle cx='159' cy='111' r='7' fill='%237a3fc0'/%3E%3Ccircle cx='159' cy='111' r='5.04' fill='none' stroke='%23fff' stroke-width='1.9600000000000002' stroke-dasharray='3.9200000000000004 3.9200000000000004'/%3E%3Ccircle cx='159' cy='111' r='2.94' fill='%237a3fc0' stroke='%23fff' stroke-opacity='.6' stroke-width='.6'/%3E%3C/g%3E%3Cg transform='translate(66 21) rotate(-23)' opacity='0.14'%3E%3Crect x='-8' y='-11' width='16' height='22' rx='2' fill='%23fff' stroke='%23000' stroke-opacity='.25'/%3E%3Crect x='-5.5' y='-8.5' width='11' height='17' rx='1' fill='%23151515' fill-opacity='.7'/%3E%3C/g%3E%3C/svg%3E"), #111614; background-attachment: fixed; }
html[data-bg="mandala"] body, .bgsw-mandala { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Ccircle cx='400' cy='400' r='60' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1.2'/%3E%3Ccircle cx='400' cy='400' r='95' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1.2'/%3E%3Ccircle cx='400' cy='400' r='130' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1.2'/%3E%3Ccircle cx='400' cy='400' r='170' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1.2'/%3E%3Ccircle cx='400' cy='400' r='215' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1.2'/%3E%3Ccircle cx='400' cy='400' r='265' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1.2'/%3E%3Ccircle cx='400' cy='400' r='320' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1.2'/%3E%3Cpath d='M400 400 L780.0 400.0' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L776.7 449.6' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L767.1 498.4' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L751.1 545.4' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L729.1 590.0' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L701.5 631.3' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L668.7 668.7' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L631.3 701.5' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L590.0 729.1' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L545.4 751.1' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L498.4 767.1' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L449.6 776.7' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L400.0 780.0' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L350.4 776.7' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L301.6 767.1' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L254.6 751.1' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L210.0 729.1' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L168.7 701.5' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L131.3 668.7' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L98.5 631.3' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L70.9 590.0' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L48.9 545.4' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L32.9 498.4' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L23.3 449.6' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L20.0 400.0' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L23.3 350.4' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L32.9 301.6' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L48.9 254.6' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L70.9 210.0' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L98.5 168.7' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L131.3 131.3' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L168.7 98.5' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L210.0 70.9' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L254.6 48.9' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L301.6 32.9' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L350.4 23.3' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L400.0 20.0' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L449.6 23.3' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L498.4 32.9' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L545.4 48.9' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L590.0 70.9' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L631.3 98.5' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L668.7 131.3' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L701.5 168.7' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L729.1 210.0' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L751.1 254.6' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L767.1 301.6' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Cpath d='M400 400 L776.7 350.4' stroke='%237a5a2e' stroke-opacity='0.096' stroke-width='.8'/%3E%3Ccircle cx='570.0' cy='400.0' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Ccircle cx='564.2' cy='444.0' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Ccircle cx='547.2' cy='485.0' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Ccircle cx='520.2' cy='520.2' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Ccircle cx='485.0' cy='547.2' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Ccircle cx='444.0' cy='564.2' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Ccircle cx='400.0' cy='570.0' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Ccircle cx='356.0' cy='564.2' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Ccircle cx='315.0' cy='547.2' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Ccircle cx='279.8' cy='520.2' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Ccircle cx='252.8' cy='485.0' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Ccircle cx='235.8' cy='444.0' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Ccircle cx='230.0' cy='400.0' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Ccircle cx='235.8' cy='356.0' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Ccircle cx='252.8' cy='315.0' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Ccircle cx='279.8' cy='279.8' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Ccircle cx='315.0' cy='252.8' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Ccircle cx='356.0' cy='235.8' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Ccircle cx='400.0' cy='230.0' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Ccircle cx='444.0' cy='235.8' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Ccircle cx='485.0' cy='252.8' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Ccircle cx='520.2' cy='279.8' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Ccircle cx='547.2' cy='315.0' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Ccircle cx='564.2' cy='356.0' r='35' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(665.0 400.0) rotate(90.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(659.9 451.7) rotate(101.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(644.8 501.4) rotate(112.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(620.3 547.2) rotate(123.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(587.4 587.4) rotate(135.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(547.2 620.3) rotate(146.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(501.4 644.8) rotate(157.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(451.7 659.9) rotate(168.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(400.0 665.0) rotate(180.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(348.3 659.9) rotate(191.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(298.6 644.8) rotate(202.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(252.8 620.3) rotate(213.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(212.6 587.4) rotate(225.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(179.7 547.2) rotate(236.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(155.2 501.4) rotate(247.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(140.1 451.7) rotate(258.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(135.0 400.0) rotate(270.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(140.1 348.3) rotate(281.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(155.2 298.6) rotate(292.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(179.7 252.8) rotate(303.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(212.6 212.6) rotate(315.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(252.8 179.7) rotate(326.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(298.6 155.2) rotate(337.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(348.3 140.1) rotate(348.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(400.0 135.0) rotate(360.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(451.7 140.1) rotate(371.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(501.4 155.2) rotate(382.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(547.2 179.7) rotate(393.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(587.4 212.6) rotate(405.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(620.3 252.8) rotate(416.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(644.8 298.6) rotate(427.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3Cpath transform='translate(659.9 348.3) rotate(438.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%237a5a2e' stroke-opacity='0.16' stroke-width='1'/%3E%3C/svg%3E") center / 1100px no-repeat, radial-gradient(ellipse at center, #f0ebe2, #e0d7c8); background-attachment: fixed; }
@media (prefers-color-scheme: dark) { html:not([data-mode="light"])[data-bg="mandala"] body, :root:not([data-mode="light"]) .bgsw-mandala { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Ccircle cx='400' cy='400' r='60' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1.2'/%3E%3Ccircle cx='400' cy='400' r='95' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1.2'/%3E%3Ccircle cx='400' cy='400' r='130' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1.2'/%3E%3Ccircle cx='400' cy='400' r='170' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1.2'/%3E%3Ccircle cx='400' cy='400' r='215' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1.2'/%3E%3Ccircle cx='400' cy='400' r='265' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1.2'/%3E%3Ccircle cx='400' cy='400' r='320' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1.2'/%3E%3Cpath d='M400 400 L780.0 400.0' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L776.7 449.6' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L767.1 498.4' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L751.1 545.4' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L729.1 590.0' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L701.5 631.3' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L668.7 668.7' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L631.3 701.5' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L590.0 729.1' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L545.4 751.1' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L498.4 767.1' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L449.6 776.7' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L400.0 780.0' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L350.4 776.7' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L301.6 767.1' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L254.6 751.1' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L210.0 729.1' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L168.7 701.5' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L131.3 668.7' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L98.5 631.3' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L70.9 590.0' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L48.9 545.4' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L32.9 498.4' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L23.3 449.6' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L20.0 400.0' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L23.3 350.4' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L32.9 301.6' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L48.9 254.6' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L70.9 210.0' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L98.5 168.7' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L131.3 131.3' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L168.7 98.5' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L210.0 70.9' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L254.6 48.9' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L301.6 32.9' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L350.4 23.3' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L400.0 20.0' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L449.6 23.3' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L498.4 32.9' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L545.4 48.9' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L590.0 70.9' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L631.3 98.5' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L668.7 131.3' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L701.5 168.7' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L729.1 210.0' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L751.1 254.6' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L767.1 301.6' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L776.7 350.4' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Ccircle cx='570.0' cy='400.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='564.2' cy='444.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='547.2' cy='485.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='520.2' cy='520.2' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='485.0' cy='547.2' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='444.0' cy='564.2' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='400.0' cy='570.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='356.0' cy='564.2' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='315.0' cy='547.2' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='279.8' cy='520.2' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='252.8' cy='485.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='235.8' cy='444.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='230.0' cy='400.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='235.8' cy='356.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='252.8' cy='315.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='279.8' cy='279.8' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='315.0' cy='252.8' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='356.0' cy='235.8' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='400.0' cy='230.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='444.0' cy='235.8' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='485.0' cy='252.8' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='520.2' cy='279.8' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='547.2' cy='315.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='564.2' cy='356.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(665.0 400.0) rotate(90.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(659.9 451.7) rotate(101.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(644.8 501.4) rotate(112.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(620.3 547.2) rotate(123.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(587.4 587.4) rotate(135.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(547.2 620.3) rotate(146.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(501.4 644.8) rotate(157.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(451.7 659.9) rotate(168.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(400.0 665.0) rotate(180.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(348.3 659.9) rotate(191.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(298.6 644.8) rotate(202.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(252.8 620.3) rotate(213.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(212.6 587.4) rotate(225.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(179.7 547.2) rotate(236.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(155.2 501.4) rotate(247.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(140.1 451.7) rotate(258.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(135.0 400.0) rotate(270.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(140.1 348.3) rotate(281.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(155.2 298.6) rotate(292.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(179.7 252.8) rotate(303.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(212.6 212.6) rotate(315.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(252.8 179.7) rotate(326.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(298.6 155.2) rotate(337.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(348.3 140.1) rotate(348.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(400.0 135.0) rotate(360.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(451.7 140.1) rotate(371.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(501.4 155.2) rotate(382.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(547.2 179.7) rotate(393.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(587.4 212.6) rotate(405.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(620.3 252.8) rotate(416.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(644.8 298.6) rotate(427.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(659.9 348.3) rotate(438.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3C/svg%3E") center / 1100px no-repeat, radial-gradient(ellipse at center, #191b22, #0e0f13); background-attachment: fixed; } }
html[data-mode="dark"][data-bg="mandala"] body, :root[data-mode="dark"] .bgsw-mandala { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Ccircle cx='400' cy='400' r='60' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1.2'/%3E%3Ccircle cx='400' cy='400' r='95' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1.2'/%3E%3Ccircle cx='400' cy='400' r='130' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1.2'/%3E%3Ccircle cx='400' cy='400' r='170' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1.2'/%3E%3Ccircle cx='400' cy='400' r='215' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1.2'/%3E%3Ccircle cx='400' cy='400' r='265' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1.2'/%3E%3Ccircle cx='400' cy='400' r='320' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1.2'/%3E%3Cpath d='M400 400 L780.0 400.0' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L776.7 449.6' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L767.1 498.4' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L751.1 545.4' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L729.1 590.0' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L701.5 631.3' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L668.7 668.7' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L631.3 701.5' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L590.0 729.1' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L545.4 751.1' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L498.4 767.1' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L449.6 776.7' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L400.0 780.0' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L350.4 776.7' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L301.6 767.1' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L254.6 751.1' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L210.0 729.1' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L168.7 701.5' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L131.3 668.7' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L98.5 631.3' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L70.9 590.0' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L48.9 545.4' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L32.9 498.4' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L23.3 449.6' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L20.0 400.0' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L23.3 350.4' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L32.9 301.6' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L48.9 254.6' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L70.9 210.0' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L98.5 168.7' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L131.3 131.3' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L168.7 98.5' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L210.0 70.9' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L254.6 48.9' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L301.6 32.9' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L350.4 23.3' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L400.0 20.0' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L449.6 23.3' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L498.4 32.9' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L545.4 48.9' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L590.0 70.9' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L631.3 98.5' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L668.7 131.3' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L701.5 168.7' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L729.1 210.0' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L751.1 254.6' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L767.1 301.6' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Cpath d='M400 400 L776.7 350.4' stroke='%23d6b064' stroke-opacity='0.060' stroke-width='.8'/%3E%3Ccircle cx='570.0' cy='400.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='564.2' cy='444.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='547.2' cy='485.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='520.2' cy='520.2' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='485.0' cy='547.2' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='444.0' cy='564.2' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='400.0' cy='570.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='356.0' cy='564.2' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='315.0' cy='547.2' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='279.8' cy='520.2' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='252.8' cy='485.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='235.8' cy='444.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='230.0' cy='400.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='235.8' cy='356.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='252.8' cy='315.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='279.8' cy='279.8' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='315.0' cy='252.8' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='356.0' cy='235.8' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='400.0' cy='230.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='444.0' cy='235.8' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='485.0' cy='252.8' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='520.2' cy='279.8' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='547.2' cy='315.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Ccircle cx='564.2' cy='356.0' r='35' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(665.0 400.0) rotate(90.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(659.9 451.7) rotate(101.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(644.8 501.4) rotate(112.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(620.3 547.2) rotate(123.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(587.4 587.4) rotate(135.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(547.2 620.3) rotate(146.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(501.4 644.8) rotate(157.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(451.7 659.9) rotate(168.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(400.0 665.0) rotate(180.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(348.3 659.9) rotate(191.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(298.6 644.8) rotate(202.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(252.8 620.3) rotate(213.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(212.6 587.4) rotate(225.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(179.7 547.2) rotate(236.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(155.2 501.4) rotate(247.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(140.1 451.7) rotate(258.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(135.0 400.0) rotate(270.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(140.1 348.3) rotate(281.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(155.2 298.6) rotate(292.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(179.7 252.8) rotate(303.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(212.6 212.6) rotate(315.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(252.8 179.7) rotate(326.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(298.6 155.2) rotate(337.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(348.3 140.1) rotate(348.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(400.0 135.0) rotate(360.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(451.7 140.1) rotate(371.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(501.4 155.2) rotate(382.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(547.2 179.7) rotate(393.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(587.4 212.6) rotate(405.0)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(620.3 252.8) rotate(416.2)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(644.8 298.6) rotate(427.5)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3Cpath transform='translate(659.9 348.3) rotate(438.8)' d='M0 -26 C14 -10 14 10 0 26 C-14 10 -14 -10 0 -26Z' fill='none' stroke='%23d6b064' stroke-opacity='0.1' stroke-width='1'/%3E%3C/svg%3E") center / 1100px no-repeat, radial-gradient(ellipse at center, #191b22, #0e0f13); background-attachment: fixed; }
html[data-bg="emerald"] body, .bgsw-emerald { background: radial-gradient(ellipse 85% 75% at 50% 45%, #e6f2ea, #c9e0d1 65%, #a9cdb6); background-attachment: fixed; }
@media (prefers-color-scheme: dark) { html:not([data-mode="light"])[data-bg="emerald"] body, :root:not([data-mode="light"]) .bgsw-emerald { background: radial-gradient(ellipse 85% 75% at 50% 45%, #10372a, #0a2219 62%, #04110c); background-attachment: fixed; } }
html[data-mode="dark"][data-bg="emerald"] body, :root[data-mode="dark"] .bgsw-emerald { background: radial-gradient(ellipse 85% 75% at 50% 45%, #10372a, #0a2219 62%, #04110c); background-attachment: fixed; }
html[data-bg]:not([data-bg="plain"]) .bar { background: color-mix(in srgb, var(--night) 72%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* Game names in Table Settings: no coloured bar (that gradient belongs to the boot-vote pop-up header) */
.vcard .vhead { background: none; padding: 0; border-radius: 0; color: inherit; }
.tscard .vcard .vname { color: var(--ts-ink); }

/* Background picker */
.bggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.bgopt { display: grid; gap: 6px; padding: 6px; border-radius: 14px; border: 2px solid var(--line); background: var(--panel); cursor: pointer; text-align: left; transition: border-color .15s, transform .15s; }
.bgopt:hover { transform: translateY(-2px); }
.bgopt[aria-pressed="true"] { border-color: var(--brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 20%, transparent); }
.bgsw { position: relative; height: 78px; border-radius: 9px; overflow: hidden; background-attachment: scroll !important; background-size: auto; }
.bgsw-plain { background: var(--night); }
.bgsw-mandala { background-size: 420px, auto !important; }
.bgsw::after { content: ""; position: absolute; left: 22%; right: 22%; top: 24%; bottom: 24%; border-radius: 99px; background: radial-gradient(ellipse, #4a5251, #262b2a); box-shadow: 0 0 0 3px #2a8a64, 0 4px 10px rgb(0 0 0 / .35); }
.bgopt span { font-size: 13px; font-weight: 700; padding: 0 4px 2px; display: flex; justify-content: space-between; align-items: center; }
.bgopt span em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
html[data-bg] .bar { position: relative; z-index: 40; }
.bgsw-suits { background-size: 80px, auto !important; } .bgsw-chips { background-size: 120px, auto !important; } .bgsw-deco { background-size: 36px, auto !important; }

/* Top-up, break and exit sit next to Log and Ledger so they're always one tap away */
.chatarea .chatbtns { display: flex; flex-wrap: wrap; align-items: center; }
.cbx.seatc .long { display: none; }
.cbx.seatc .short { display: inline; }
.cbx.seatc { display: inline-flex; align-items: center; gap: 6px; }
.cbx.seatc svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cbx.seatc.on { border-color: var(--brass); color: var(--brass); background: color-mix(in srgb, var(--brass) 10%, var(--panel)); }
#btnExit { color: var(--bad); }
#btnExit:hover { border-color: color-mix(in srgb, var(--bad) 50%, var(--line)); }
.cbsep { width: 1px; height: 22px; background: var(--line); margin: 0 2px; }
@media (max-width: 599px) { .cbsep { display: none; } }
.cbsep { display: block !important; flex-basis: 100%; width: auto; height: 0; margin: 0; background: none; }

/* ---------- Banco and Red or Black: one clear spotlight, a big result banner, a short history ---------- */
.bround { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--on-felt-muted); background: rgb(0 0 0 / .28); border: 1px solid rgb(255 255 255 / .1); border-radius: 99px; padding: 3px 10px; }
.bturn { display: grid; justify-items: center; gap: 4px; margin-top: 8px; padding: 6px 12px 8px; border-radius: 14px; background: rgb(0 0 0 / .22); border: 1px solid rgb(255 255 255 / .12); }
.bturn.mine { border-color: #e0b85a; box-shadow: 0 0 0 2px rgb(224 184 90 / .25), 0 0 20px rgb(224 184 90 / .25); }
.bturn .bwho { font-size: 12.5px; font-weight: 800; color: #fff; letter-spacing: .02em; }
.bturn .brow .card { --cw: 36px; }
.rbq { width: 36px; height: 50px; border-radius: 5px; border: 2px dashed rgb(255 255 255 / .45); display: grid; place-items: center; color: rgb(255 255 255 / .7); font-weight: 800; font-size: 20px; }
.bhist { display: grid; gap: 4px; margin-top: 8px; justify-items: center; }
.bres { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 99px; background: rgb(0 0 0 / .25); color: var(--on-felt); font-size: 12px; opacity: .75; }
.bres .card { --cw: 18px; }
.bres .bcards { display: inline-flex; gap: 2px; align-items: center; }
.bres .bmid .card { box-shadow: 0 0 0 2px #ffd34d; }
.bres .bwho2 { font-weight: 700; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bres .bverdict { display: inline-flex; gap: 5px; align-items: baseline; }
.bres .bverdict em { font-style: normal; font-weight: 800; }
.bres.big { opacity: 1; font-size: 14px; padding: 6px 14px; border: 1px solid rgb(255 255 255 / .18); animation: bpop .5s cubic-bezier(.2,1.4,.4,1) both; }
.bres.big .card { --cw: 28px; }
.bres.o-win .bverdict { color: #7ef0b0; } .bres.big.o-win { background: linear-gradient(135deg, rgb(31 138 82 / .75), rgb(20 90 60 / .75)); }
.bres.o-post .bverdict { color: #ff9d9d; } .bres.big.o-post { background: linear-gradient(135deg, rgb(200 55 45 / .8), rgb(130 30 25 / .8)); }
.bres.o-miss .bverdict { color: #ffc29d; } .bres.big.o-miss { background: linear-gradient(135deg, rgb(150 70 30 / .7), rgb(90 40 20 / .7)); }
.bres.o-pass .bverdict, .bres.o-nogap .bverdict { color: rgb(255 255 255 / .75); }
@keyframes bpop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bwait { text-align: center; font-weight: 700; color: var(--muted); padding: 12px; }
/* everyone's two Banco cards on their seat; the third slots in between once they've played */
.bhand { display: inline-flex; gap: 2px; align-items: flex-end; }
.bhand .bc { display: inline-block; animation: bdeal .35s ease-out both; animation-delay: var(--bd, 0ms); }
.bhand .bmid { animation: bdrop .45s cubic-bezier(.2,1.4,.4,1) both; }
.bhand .bmid .card { box-shadow: 0 0 0 2px #ffd34d, 0 2px 6px rgb(0 0 0 / .4); transform: translateY(-4px); }
.bhand.played.o-win .bmid .card { box-shadow: 0 0 0 2px #3fd68a, 0 0 12px rgb(63 214 138 / .6); }
.bhand.played.o-post .bmid .card { box-shadow: 0 0 0 2px #ff5a5a, 0 0 12px rgb(255 90 90 / .6); }
.bhand.played.o-miss .bmid .card { box-shadow: 0 0 0 2px #ff9a4a; }
.bhand.played.o-pass .bmid .card, .bhand.played.o-nogap .bmid .card { opacity: .55; box-shadow: 0 0 0 1px rgb(255 255 255 / .5); }
@keyframes bdeal { from { transform: translateY(-30px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bdrop { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.card.newc { box-shadow: 0 0 0 2px #ffd34d, 0 0 14px rgb(255 211 77 / .6); animation: bdrop .45s cubic-bezier(.2,1.4,.4,1) both; }
@media (max-width: 599px) { .bres.big { font-size: 12.5px; } .bres.big .card { --cw: 22px; } .bturn .brow .card { --cw: 28px; } .rbq { width: 28px; height: 39px; font-size: 16px; } .bres:not(.big) { display: none; } }

/* Pre-selected moves */
.prerow { display: grid; gap: 6px; justify-items: center; width: 100%; }
.prelbl { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.prebtns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pre { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 12px; border: 1.5px dashed var(--line); background: var(--panel); font-weight: 700; font-size: 14px; color: var(--ivory); cursor: pointer; }
.pre small { font-size: 12px; color: var(--muted); font-weight: 600; }
.pre i { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--muted); flex: none; }
.pre[aria-pressed="true"] { border-style: solid; border-color: var(--brass); background: color-mix(in srgb, var(--brass) 12%, var(--panel)); color: var(--brass); }
.pre[aria-pressed="true"] i { background: var(--brass); border-color: var(--brass); box-shadow: inset 0 0 0 2px var(--panel); }
.pre.warn[aria-pressed="true"] { border-color: var(--bad); color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--panel)); }
.pre.warn[aria-pressed="true"] i { background: var(--bad); border-color: var(--bad); }
.showmine { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; }
.showmine svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.shownote { display: block; margin-top: 4px; font-size: 12px; color: var(--brass); font-weight: 600; }
@media (max-width: 599px) { .pre { padding: 8px 10px; font-size: 13px; } }

.limitrow { display: grid; gap: 6px; }
.limitc { display: flex; align-items: center; gap: 6px; }
.limitc[hidden] { display: none; }
.limitc input { flex: 1; min-width: 0; }
.limitc em { font-style: normal; font-size: 12.5px; color: var(--ts-muted, var(--muted)); white-space: nowrap; }
#actions:has(.prerow) { display: block; }
.pre.see { border-style: solid; color: #2f6fb5; }
.pre.see::before { content: none; }
#actions:has(.bwait) { display: block; }
@media (max-width: 599px) {
  .bround { font-size: 9.5px; padding: 2px 8px; white-space: nowrap; }
  .bgap { width: 92px; } .bgap b { font-size: 9.5px; }
  .bturn { padding: 4px 8px 6px; margin-top: 5px; } .bturn .bwho { font-size: 11px; }
}

/* Stack editor and buy-in */
.chipmode { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 12px; }
.chipprev { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 10px; font-size: 18px; color: var(--muted); }
.chipprev svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.chipprev b { color: var(--ivory); font-size: 22px; } .chipprev b.up { color: var(--good); } .chipprev b.down { color: var(--bad); }
.buyrow { display: grid; gap: 6px; }
.buyrow input { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; }
.buyq { display: flex; gap: 6px; flex-wrap: wrap; }
.buyq button { border: 1px solid var(--line); background: var(--panel-2); border-radius: 99px; padding: 4px 11px; font-size: 13px; font-weight: 600; }
.askbuy { margin: 2px 0 2px; font-size: 13.5px; color: var(--muted); } .askbuy b { color: var(--brass); }
.chipmode button { color: var(--ivory); } .chipmode button[aria-pressed="true"] { color: #fff; }

/* Whose turn: the seat grows and sits inside a wide, softly pulsing golden halo */
.seat .who { transition: transform .25s cubic-bezier(.2,1.3,.4,1); }
.seat.turn { z-index: 6; }
.seat.turn .who { transform: scale(1.16); box-shadow: 0 0 0 6px rgb(224 184 90 / .35), 0 0 0 14px rgb(224 184 90 / .16), 0 0 46px 16px rgb(240 200 100 / .45), 0 8px 18px rgb(0 0 0 / .35); }
@media (prefers-reduced-motion: no-preference) {
  .seat.turn .who { animation: turnhalo 1.6s ease-in-out infinite; }
  @keyframes turnhalo {
    0%, 100% { box-shadow: 0 0 0 6px rgb(224 184 90 / .35), 0 0 0 14px rgb(224 184 90 / .16), 0 0 46px 16px rgb(240 200 100 / .45), 0 8px 18px rgb(0 0 0 / .35); }
    50% { box-shadow: 0 0 0 8px rgb(224 184 90 / .45), 0 0 0 20px rgb(224 184 90 / .12), 0 0 64px 24px rgb(240 200 100 / .55), 0 8px 18px rgb(0 0 0 / .35); }
  }
}
@media (max-width: 599px) {
  .seat.turn .who { transform: scale(1.12); }
}
.buyq button { display: inline-flex; gap: 5px; align-items: baseline; } .buyq button small { font-size: 10.5px; color: var(--muted); font-weight: 600; }

/* Top-up, break and exit live in the header */
.bar .tb.seatc { display: inline-flex; align-items: center; gap: 6px; }
.bar .tb.seatc .long { display: none; }
.bar .tb.seatc .short { display: inline; }
.bar .tb.seatc svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bar #btnExit { color: var(--bad); }
.bar .tb.seatc.on { border-color: var(--brass); color: var(--brass); }
@media (max-width: 1100px) { .bar .tb.seatc .short { display: none; } .bar .tb.seatc { padding-left: 9px; padding-right: 9px; } }
@media (max-width: 599px) {
  .bar { gap: 5px; padding-left: 10px; padding-right: 10px; }
  .bar .tb, .bar .modebtn { padding: 7px; min-width: 0; }
  .bar .brand, .bar .logo { font-size: 17px; }
}

.menuitem.ponly { display: none; }
@media (max-width: 599px) {
  .menuitem.ponly { display: flex; }
  .bar .brand { font-size: 16px; }
}

/* Phones: Log, Ledger, Top-Up, Break and Exit on one compact line */
@media (max-width: 599px) {
  .chatarea .chatbtns { flex-wrap: nowrap; gap: 4px; overflow: hidden; }
  .chatarea .chatbtns .cbx { flex: 0 1 auto; min-width: 0; padding: 5px 7px; font-size: 10px; letter-spacing: .03em; gap: 4px; white-space: nowrap; display: inline-flex; align-items: center; }
  .chatarea .chatbtns .cbx svg { width: 12px; height: 12px; flex: none; }
}
@media (max-width: 360px) { .chatarea .chatbtns .cbx { padding: 4px 5px; font-size: 9px; } }
/* Leave-seat choice */
.exitopts { display: grid; gap: 10px; margin: 6px 0 12px; }
.exitopt { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 10px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--panel-2); cursor: pointer; color: var(--ivory); }
.exitopt svg { grid-row: 1 / 3; width: 26px; height: 26px; fill: none; stroke: var(--brass); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; align-self: center; }
.exitopt b { font-size: 15px; } .exitopt small { font-size: 12.5px; color: var(--muted); }
.exitopt:hover { border-color: var(--brass); }
.exitopt.danger svg { stroke: var(--bad); } .exitopt.danger:hover { border-color: var(--bad); }

/* Who's here (host) */
.whogrp { display: grid; gap: 6px; }
.whohd { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ts-ink); }
.whohd i { width: 8px; height: 8px; border-radius: 50%; }
.dotp { background: var(--good); } .dotw { background: var(--ts-acc); }
.whochips { display: flex; flex-wrap: wrap; gap: 6px; }
.whochip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 99px; background: var(--ts-tile); border: 1px solid var(--ts-line); font-size: 13px; }
.whochip.off { opacity: .55; }
.whochip b { font-weight: 700; color: var(--ts-ink); }
.whochip small { font-size: 11.5px; color: var(--ts-muted); }
.wav { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #1a1a1a; }
.wav .emo { font-size: 12px; }

/* Your turn: the choices sit in a glowing panel with a "Your Turn" tab */
#actions.myturn { position: relative; padding: 18px 12px 12px; margin-top: 16px; border-radius: 18px; border: 2px solid #e0b85a;
  background: linear-gradient(180deg, color-mix(in srgb, #e0b85a 16%, var(--panel)), color-mix(in srgb, #e0b85a 6%, var(--panel)));
  box-shadow: 0 0 0 4px rgb(224 184 90 / .18), 0 10px 28px rgb(180 130 30 / .25); }
#actions.myturn::before { content: "Your Turn"; position: absolute; top: 0; left: 50%; transform: translate(-50%, -55%); padding: 3px 14px; border-radius: 99px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #241a05; background: linear-gradient(180deg, #f6dc8f, #d4a43e); box-shadow: 0 2px 8px rgb(0 0 0 / .2); white-space: nowrap; }
#actions.myturn .act:not([disabled]) { box-shadow: 0 2px 0 rgb(0 0 0 / .08), 0 4px 12px rgb(0 0 0 / .1); }
@media (prefers-reduced-motion: no-preference) {
  #actions.myturn { animation: myturnin .35s cubic-bezier(.2,1.3,.4,1) both, myturnglow 2s ease-in-out .4s infinite; }
  @keyframes myturnin { from { transform: translateY(8px) scale(.97); opacity: .4; } to { transform: none; opacity: 1; } }
  @keyframes myturnglow { 50% { box-shadow: 0 0 0 7px rgb(224 184 90 / .12), 0 10px 32px rgb(180 130 30 / .35); } }
}
@media (max-width: 599px) { #actions.myturn { padding: 16px 8px 8px; margin-top: 14px; border-radius: 14px; } #actions.myturn::before { font-size: 10px; } }

/* ---------- 2+1 ---------- */
.pk-twoplusone { --a: #1f3f8f; --b: #4f86e8; }
.vopts.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vopts.five .vopt b { font-size: 20px; }
@media (max-width: 599px) { .vopts.five { grid-template-columns: repeat(3, 1fr); } }
.tpo { display: grid; justify-items: center; gap: 5px; margin: 4px 0 6px; }
.tpstreet { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--on-felt-muted); background: rgb(0 0 0 / .28); border: 1px solid rgb(255 255 255 / .1); border-radius: 99px; padding: 3px 10px; }
.tpb { display: flex; align-items: center; gap: 8px; }
.tpl { min-width: 18px; font-size: 12px; font-weight: 800; color: #fff; background: rgb(255 255 255 / .14); border-radius: 6px; padding: 3px 6px; text-align: center; }
.tp-r .tpl { background: #2f6fb5; }
.tpcards { display: inline-flex; gap: 4px; }
.tpcards .card { --cw: 34px; }
.tpslot { width: 34px; height: 47.6px; border-radius: 5px; border: 1.5px dashed rgb(255 255 255 / .22); display: inline-block; }
.tpc.fresh { animation: tpflip .55s ease-out both; animation-delay: var(--fd); }
.tpc.used .card { box-shadow: 0 0 0 2px #ffd34d, 0 2px 8px rgb(0 0 0 / .45); transform: translateY(-3px); }
.tpc.rdeal { animation: tpflip .45s ease-out both; animation-delay: var(--fd); }
@keyframes tpflip { from { transform: rotateY(90deg) translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
.tptag { font-size: 12.5px; color: var(--on-felt); background: rgb(0 0 0 / .35); border: 1px solid rgb(255 255 255 / .14); border-radius: 99px; padding: 3px 10px; white-space: nowrap; animation: tptag .4s ease-out both; animation-delay: var(--td); }
.tptag b { color: #ffd34d; } .tptag i { font-style: normal; color: #ffb4b4; font-weight: 700; }
@keyframes tptag { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.tp-r, .tpvs, .tpside { animation: tptag .4s ease-out both; animation-delay: var(--td); }
.tpvs, .tpside { font-size: 12px; color: var(--on-felt-muted); display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: center; }
.tpvs em { font-style: normal; font-weight: 700; color: #fff; }
.tpvs .mini { display: inline-block; } .tpvs .mini .card { --cw: 18px; }
@media (max-width: 599px) {
  .tpcards .card { --cw: 25px; } .tpslot { width: 25px; height: 35px; }
  .tpb { gap: 5px; } .tptag { font-size: 10.5px; padding: 2px 7px; white-space: normal; max-width: 120px; }
  .tpb { flex-wrap: wrap; justify-content: center; }
}
/* six cards on a seat */
.tpoh { display: inline-flex; }
.tpoh .card { --cw: 20px; }
.tpoh .card + .card { margin-left: -9px; }
.seat.me .hand.tpoh .card { --cw: 26px; } .seat.me .hand.tpoh .card + .card { margin-left: -8px; }
.tpoh.shown { gap: 4px; animation: tptag .4s ease-out both; animation-delay: var(--rd); }
.tpoh.shown .tpg { display: inline-flex; padding: 2px; border-radius: 5px; }
.tpoh.shown .tpg .card + .card { margin-left: -6px; }
.tpoh.shown .ga { background: rgb(255 211 77 / .55); } .tpoh.shown .gb { background: rgb(120 180 255 / .6); } .tpoh.shown .gr { background: rgb(255 255 255 / .25); }
.pill.lockp { background: #3a3f6b; color: #fff; } .pill.lockp.done { background: #1f8a52; }
/* your hand in the dock */
.tpomine { display: grid; justify-items: center; gap: 6px; }
.tpomy { display: flex; gap: 5px; } .tpomy .card { --cw: 42px; }
.tpomine .sub b { color: var(--ivory); }
@media (max-width: 599px) { .tpomy .card { --cw: 34px; } }
/* betting */
#actions:has(.tpact), #actions:has(.tplock), #actions:has(.tplocked) { display: block; }
.tpact { display: grid; gap: 10px; max-width: 640px; margin: 0 auto; }
.tpbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tpbet { display: grid; gap: 8px; padding: 10px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); }
.tprow { display: flex; gap: 8px; align-items: center; }
.tprow input[type=range] { flex: 1; accent-color: var(--brass); height: 28px; }
.tprow input[type=number] { width: 110px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-weight: 700; font-size: 16px; }
.tpq { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.tpq button { border: 1px solid var(--line); background: var(--panel); border-radius: 99px; padding: 6px 12px; font-size: 13px; font-weight: 700; }
.tprow .act.main { flex: 0 0 auto; min-width: 150px; }
.tphint { font-size: 11.5px; color: var(--muted); text-align: center; }
/* locking */
.tplock { display: grid; gap: 10px; max-width: 660px; margin: 0 auto; }
.tplhead { display: flex; align-items: center; gap: 10px; justify-content: center; }
.tplhead b { font-size: 16px; }
.tpclock { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--brass); }
.tpclock svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.tpchip { border: 1.5px solid #c99a2e; color: #6e4f0e; background: linear-gradient(180deg, #fff8e3, #ffecb8); border-radius: 9px; padding: 5px 11px; font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; box-shadow: 0 2px 6px rgb(0 0 0 / .12); }
.tpchip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.tppool { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.tpcard { position: relative; padding: 0; border: 0; background: none; border-radius: 6px; cursor: pointer; }
.tpcard .card { --cw: 44px; }
.tpcard.ga .card { box-shadow: 0 0 0 3px #e0a82e; transform: translateY(-6px); }
.tpcard.gb .card { box-shadow: 0 0 0 3px #4f86e8; transform: translateY(-6px); }
.tpcard em { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: 800; color: #fff; border-radius: 99px; padding: 1px 6px; }
.tpcard.ga em { background: #c98a12; } .tpcard.gb em { background: #2f6fb5; }
.tpcard.ro { cursor: default; }
.tprows { display: grid; gap: 6px; }
.tplr { display: grid; grid-template-columns: 48px auto auto 1fr; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.tplr .tpl { background: #c98a12; } .tplr.rb .tpl { background: #2f6fb5; } .tplr.rr .tpl { background: #5b6470; font-size: 10.5px; }
.tplr.rr { grid-template-columns: 48px auto 1fr; }
.tpmini { display: inline-flex; gap: 2px; } .tpmini .card { --cw: 22px; }
.tpp { display: inline-flex; gap: 3px; } .tpp .card { --cw: 30px; } .tpp .tpslot { width: 30px; height: 42px; border-color: var(--line); }
.tpv { font-size: 13px; font-weight: 700; } .tpv i { color: var(--muted); font-weight: 500; }
.tplr.rr .tpv { font-weight: 500; color: var(--muted); font-size: 12px; }
.tplbtns { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 8px; }
.tplocked { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--good) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--good) 40%, var(--line)); }
.tplocked svg { width: 20px; height: 20px; fill: none; stroke: var(--good); stroke-width: 2; }
.tplocked span { color: var(--muted); font-size: 13px; }
@media (max-width: 599px) {
  .tpcard .card { --cw: 38px; }
  .tplr { grid-template-columns: 40px 1fr auto; } .tplr .tpmini { display: none; }
  .tplr.rr { grid-template-columns: 40px auto 1fr; }
  .tpp .card { --cw: 26px; } .tpp .tpslot { width: 26px; height: 36px; }
  .tprow input[type=number] { width: 86px; } .tprow .act.main { min-width: 120px; }
}
/* 2+1 layout fixes: one compact fan on every seat (yours too), a smaller dock so the table keeps its room */
.seat .hand.tpoh { display: inline-flex !important; flex-wrap: nowrap !important; max-width: none !important; width: max-content; gap: 0; }
.seat .hand.tpoh .card, .seat.me .hand.tpoh .card { --cw: 20px; }
.seat .hand.tpoh .card + .card, .seat.me .hand.tpoh .card + .card { margin-left: -9px; }
.seat .hand.tpoh.shown { gap: 3px; }
.seat .hand.tpoh.shown .card + .card { margin-left: -6px; }
.tpoh.shown .tpg { padding: 2px 3px; border: 2px solid transparent; }
.tpoh.shown .ga { background: rgb(224 168 46 / .35); border-color: #e0a82e; }
.tpoh.shown .gb { background: rgb(79 134 232 / .35); border-color: #4f86e8; }
.tpoh.shown .gr { background: rgb(255 255 255 / .18); border-color: rgb(255 255 255 / .5); }
.tpomy .card { --cw: 32px; } .tpomy { gap: 4px; } .tpomine { gap: 3px; }
.tpbet { padding: 8px; gap: 6px; } .tpact { gap: 8px; }
.tplock { gap: 7px; } .tpcard .card { --cw: 38px; } .tplr { padding: 4px 10px; } .tpp .card { --cw: 26px; } .tpp .tpslot { width: 26px; height: 36px; }
.tpmini .card { --cw: 19px; }
@media (max-width: 599px) {
  .tpomy .card { --cw: 28px; }
  .tpcard .card { --cw: 34px; }
  .tpb .tptag { flex-basis: 100%; max-width: none; text-align: center; white-space: nowrap; }
  .tpb { row-gap: 3px; }
}
@media (max-width: 599px) { .tpvs { display: none; } }

/* ---------- 2+1 showdown v2: won / lost colours, clear-and-redeal, chop and run pickers ---------- */
.tpb { border-radius: 12px; padding: 3px 6px; --ring: transparent; --wash: transparent; }
.tpb.judged { animation: tpjudge .45s ease-out both; animation-delay: var(--td); }
.tpb.f-won { --ring: #3fd68a; --wash: rgb(63 214 138 / .18); }
.tpb.f-lost { --ring: #ff5a5a; --wash: rgb(255 90 90 / .16); }
.tpb.f-tie { --ring: rgb(255 255 255 / .55); --wash: rgb(255 255 255 / .08); }
@keyframes tpjudge { from { box-shadow: 0 0 0 0 transparent; background: transparent; } to { box-shadow: 0 0 0 2.5px var(--ring), 0 0 18px var(--wash); background: var(--wash); } }
.tpb.f-won .tptag { border-color: #3fd68a; } .tpb.f-lost .tptag { border-color: #ff5a5a; }
.tpb.f-won .tpl { background: #1f8a52; } .tpb.f-lost .tpl { background: #b8332b; }
/* the boards clear away before the runout */
.tpb.clear { animation: tpclear .7s ease-in both; animation-delay: var(--cd); overflow: hidden; }
@keyframes tpclear { 0% { opacity: 1; max-height: 80px; transform: none; } 70% { opacity: 0; transform: translateY(14px) scale(.85); max-height: 80px; } 100% { opacity: 0; max-height: 0; padding: 0; margin: 0; transform: scale(.85); } }
.tpchop { font-size: 12.5px; font-weight: 700; color: #ffd34d; background: rgb(0 0 0 / .35); border: 1px solid rgb(255 211 77 / .4); border-radius: 99px; padding: 3px 12px; animation: tptag .4s ease-out both; animation-delay: var(--td); }
.tpdeal { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; font-size: 12px; color: var(--on-felt); background: rgb(0 0 0 / .35); border-radius: 99px; padding: 3px 10px; animation: tptag .4s ease-out both; animation-delay: var(--td); }
.tpdot { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; opacity: .7; }
.tpdot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #fff; }
.tpdot.on { opacity: 1; } .tpdot.on::before { background: #3fd68a; border-color: #3fd68a; }
/* seats: A and B pairs ringed green (won) / red (lost); the spare pair face down until a runout */
.tpoh.shown .tpg { position: relative; }
.tpoh.shown .tpg.ga::after, .tpoh.shown .tpg.gb::after { position: absolute; top: -9px; left: -4px; font-size: 9px; font-weight: 800; color: #fff; border-radius: 99px; padding: 0 4px; line-height: 13px; }
.tpoh.shown .tpg.ga::after { content: "A"; background: #c98a12; } .tpoh.shown .tpg.gb::after { content: "B"; background: #2f6fb5; }
.tpoh.shown .tpg.f-won { border-color: #3fd68a; background: rgb(63 214 138 / .35); box-shadow: 0 0 10px rgb(63 214 138 / .6); }
.tpoh.shown .tpg.f-lost { border-color: #ff5a5a; background: rgb(255 90 90 / .3); }
.tpoh.shown .tpg.f-tie { border-color: rgb(255 255 255 / .7); background: rgb(255 255 255 / .15); }
.tpoh.shown .tpg.f-won::after { background: #1f8a52; } .tpoh.shown .tpg.f-lost::after { background: #b8332b; }
.tpoh.running .ga, .tpoh.running .gb { animation: tpgone .6s ease-in both; animation-delay: var(--cd); }
@keyframes tpgone { to { opacity: 0; transform: scale(.6); width: 0; padding: 0; margin: 0; border-width: 0; } }
.tpoh.running .gr { animation: tpspare .6s ease-out both; animation-delay: calc(var(--cd) + 400ms); border-color: #ffd34d; background: rgb(255 211 77 / .3); }
@keyframes tpspare { from { transform: rotateY(90deg); } to { transform: none; } }
.tpoh.running .gr .card { --cw: 26px; }
/* pickers */
#actions:has(.tpdealbox) { display: block; }
.tpdealbox { display: grid; gap: 8px; max-width: 680px; margin: 0 auto; }
.tpopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.tpopt { display: grid; gap: 3px; padding: 10px 10px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--panel); text-align: left; cursor: pointer; }
.tpopt b { font-size: 15px; } .tpopt small { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.tpopt:hover { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 8%, var(--panel)); }
.tpopt.all { border-color: color-mix(in srgb, #e0a82e 60%, var(--line)); }
.tpopt[disabled] { opacity: .5; }
@media (max-width: 599px) { .tpopts { grid-template-columns: repeat(2, 1fr); } .tpopt b { font-size: 14px; } }

.tpb.tp-r.judged { animation: tprowin .35s ease-out both, tpjudge .45s ease-out both; animation-delay: var(--rs), var(--td); }
@keyframes tprowin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 599px) {
  .tpopts { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .tpopt { padding: 7px 7px; } .tpopt b { font-size: 13px; } .tpopt small { font-size: 10.5px; }
  .tpdealbox { gap: 6px; }
}

/* 2+1: players who lost both boards sit out the rest of the hand */
.seat.tpout .who { filter: grayscale(1); opacity: .45; }
.seat.tpout .hand { filter: grayscale(1) brightness(.75); opacity: .45; }
.seat.tpout .who::before { content: ""; position: absolute; inset: -4px; border-radius: 99px; border: 2px dashed rgb(255 90 90 / .8); }
.pill.sdout { display: inline-flex; align-items: center; gap: 4px; background: #b8332b; color: #fff; font-weight: 800; letter-spacing: .04em; box-shadow: 0 2px 8px rgb(184 51 43 / .45); }
.pill.sdout svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
/* runout cards: dealt one at a time; the cards that make the winning hand light up when the run is decided */
.tpc.rdeal { animation: tpflip .5s ease-out both; animation-delay: var(--fd); }
.tpc.rdeal.used .card { box-shadow: none; transform: none; animation: tpused .4s ease-out both; animation-delay: var(--ud); }
@keyframes tpused { to { box-shadow: 0 0 0 2px #ffd34d, 0 2px 8px rgb(0 0 0 / .45); transform: translateY(-3px); } }
/* every game: the winner's cards grow on their seat so they're hard to miss */
.seat.win .hand { transform-origin: 50% 100%; position: relative; z-index: 4; }
/* The winning cards grow on everyone else's screen (your own are already big on yours). */
.seat.win:not(.me) .hand .card, .seat.win:not(.me) .hand.tpoh .card { --cw: 46px; }
.seat.win:not(.me) .hand { animation: wingrow .55s cubic-bezier(.2,1.4,.4,1) both; animation-delay: var(--wg, 0ms); }
.seat.win:not(.me) .hand .card + .card { margin-left: 3px; }
@keyframes wingrow { from { scale: .5; } to { scale: 1; } }
.seat.win .hand .card { box-shadow: 0 0 0 1.5px #3fd08a, 0 4px 12px rgb(0 0 0 / .45); }
.seat.win { z-index: 7; }
@media (max-width: 599px) { .seat.win:not(.me) .hand .card, .seat.win:not(.me) .hand.tpoh .card { --cw: 32px; } .seat.win:not(.me) .hand .card + .card { margin-left: 2px; } }
.tpnote { font-size: 12.5px; line-height: 1.45; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #e0a82e 14%, var(--panel)); border: 1px solid color-mix(in srgb, #e0a82e 45%, var(--line)); color: var(--ivory); }
.tpnote b { display: block; margin-bottom: 2px; }
@media (max-width: 599px) { .tpnote { font-size: 11.5px; padding: 6px 10px; } }

/* 2+1 chop: shares sweep to both stacks before the runout */
.winpop.chopop { background: linear-gradient(135deg, #1f8a52, #3fd68a); font-size: 15px; }
.potsweep.chopsweep { filter: hue-rotate(80deg) saturate(1.2); }
.tpchop.paid { animation: tptag .4s ease-out both, chopglow 1.4s ease-out both; animation-delay: var(--td), var(--pd); }
@keyframes chopglow { 0% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px rgb(63 214 138 / .7), 0 0 22px rgb(63 214 138 / .6); background: rgb(31 138 82 / .55); } 100% { box-shadow: none; } }

.vstack { margin: 4px 18px 0; padding: 10px 12px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); display: grid; gap: 7px; }
.vstack.done { border-color: color-mix(in srgb, var(--good) 50%, var(--line)); background: color-mix(in srgb, var(--good) 7%, var(--panel-2)); }
.vsh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; }
.vsh span { color: var(--muted); font-size: 13px; } .vsh span b { color: var(--ivory); } .vsh em { font-style: normal; color: var(--good); font-weight: 700; }
.vsrow { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; }
.vsrow input { min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-weight: 600; }
@media (max-width: 599px) { .vstack { margin: 4px 12px 0; } .vsrow { grid-template-columns: 1fr auto; } .vsrow #tpStackKeep { grid-column: 1 / -1; } }

/* Chat bubble over a seat */
.bubble { position: absolute; left: 50%; bottom: calc(100% + 34px); transform: translateX(-50%); z-index: 9; max-width: 190px; width: max-content; padding: 6px 11px; border-radius: 14px; background: #fff; color: #17201d; font-size: 13px; font-weight: 600; line-height: 1.3; box-shadow: 0 6px 18px rgb(0 0 0 / .3); white-space: normal; text-align: left; overflow-wrap: anywhere;
  animation: bubin .3s cubic-bezier(.2,1.4,.4,1) both, bubout .4s ease-in 4.6s both; animation-delay: var(--bd), calc(var(--bd) + 4.6s); pointer-events: none; }
.bubble::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #fff; }
@keyframes bubin { from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.8); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes bubout { to { opacity: 0; transform: translateX(-50%) translateY(-6px); } }
@media (max-width: 599px) { .bubble { max-width: 140px; font-size: 12px; bottom: calc(100% + 26px); } }
/* Seated players can move to an empty seat */
.seatbox.move .sl { color: #8fe3d6; }
.seatbox.moving { border-style: solid; border-color: #4cc5b4; }
/* Collapsible header, and room above the table so the top seat's cards stay clear of it */
.hdrbtn svg, .hdrshow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hdrshow { display: none; position: fixed; top: calc(env(safe-area-inset-top, 0px) + 6px); right: 10px; z-index: 60; align-items: center; gap: 4px; padding: 5px 10px 5px 7px; border-radius: 99px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 92%, transparent); color: var(--ivory); font-size: 12px; font-weight: 700; box-shadow: 0 4px 14px rgb(0 0 0 / .18); }
body.hdrhide.inroom .bar { height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; border: 0; overflow: hidden; visibility: hidden; }
body.hdrhide.inroom .hdrshow { display: inline-flex; }
@media (min-width: 600px) { #tableview .feltwrap { padding-top: 34px; } }
@media (max-width: 599px) {
  .seatbox.move:not(.moving) { padding: 3px; }
  .seatbox.move:not(.moving) .stx { display: none; }
}

/* Shown cards: back face down after 3 s, tap to look again */
.peek { position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; border: 1px solid rgb(255 255 255 / .35); background: rgb(0 0 0 / .55); color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; z-index: 3; }
.peek svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
/* Dealer's choice, as everyone else sees it */
.pickwait { display: grid; gap: 10px; justify-items: center; padding: 12px 16px 14px; border-radius: 18px; background: rgb(0 0 0 / .32); border: 1px solid rgb(255 211 77 / .35); box-shadow: 0 0 0 4px rgb(255 211 77 / .08), 0 10px 30px rgb(0 0 0 / .3); animation: bpop .5s cubic-bezier(.2,1.4,.4,1) both; }
.pwtop { display: flex; align-items: center; gap: 10px; }
.pwav { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; box-shadow: 0 0 0 2px #15171b, 0 0 0 3.5px #e0b85a; animation: pwglow 1.6s ease-in-out infinite; }
.pwav .emo { font-size: 22px; }
@keyframes pwglow { 50% { box-shadow: 0 0 0 2px #15171b, 0 0 0 3.5px #ffe08a, 0 0 18px rgb(255 211 77 / .7); } }
.pwtxt { display: grid; text-align: left; line-height: 1.2; }
.pweye { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ffd34d; }
.pwtxt b { font-size: 16px; color: #fff; }
.pwring { width: 40px; height: 40px; }
.pwfan { display: flex; gap: 6px; }
.pwem { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, var(--b), var(--a)); opacity: .45; transform: scale(.9);
  animation: pwturn calc(var(--n) * .55s) ease-in-out infinite; animation-delay: calc(var(--i) * .55s); }
.pwem svg { width: 32px; height: 32px; }
@keyframes pwturn { 0%, 20%, 100% { opacity: .45; transform: scale(.9); box-shadow: none; } 8% { opacity: 1; transform: scale(1.15) translateY(-3px); box-shadow: 0 0 0 2px #ffd34d, 0 6px 14px rgb(0 0 0 / .35); } }
@media (max-width: 599px) { .pwem { width: 30px; height: 30px; } .pwem svg { width: 24px; height: 24px; } .pwfan { gap: 4px; flex-wrap: wrap; justify-content: center; max-width: 220px; } .pwtxt b { font-size: 14px; } .pickwait { padding: 10px 10px 12px; } }
.peek { left: auto; right: calc(100% + 4px); bottom: auto; top: 50%; transform: translateY(-50%); }
@media (max-width: 599px) { .peek { right: auto; left: 50%; top: calc(100% + 18px); transform: translateX(-50%); } }
.pwem { background: linear-gradient(135deg, var(--b, #2f8f69), var(--a, #1e6b52)); }

input.bamt.rbin { width: 96px; text-align: center; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 6px 4px; font-size: 20px; font-weight: 800; color: var(--brass); }
.ffbtn.ffpack { background: var(--panel); color: var(--bad); border: 1.5px solid color-mix(in srgb, var(--bad) 45%, var(--line)); }
.ffgo { grid-template-columns: 1fr 1fr auto !important; }

/* Packed: your folded cards, revealed only while you hover (or press and hold) */
.mypeek { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); z-index: 4; cursor: pointer; display: grid; justify-items: center; gap: 2px; }
.mypeek .hand { opacity: 0; transition: opacity .15s, transform .15s; transform: translateY(4px); }
.mypeek .mphint { font-size: 10px; font-weight: 700; color: #fff; background: rgb(0 0 0 / .55); border-radius: 99px; padding: 1px 7px; }
.mypeek:hover .hand, .mypeek:active .hand { opacity: 1; transform: none; }
.mypeek:hover .mphint, .mypeek:active .mphint { opacity: 0; }
.seat.me.packed .folded { pointer-events: none; }
.addnow { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.addnow h4 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.mineinfo .showmine { justify-self: center; width: auto; }
.logline.buyin { color: #b8860b; font-weight: 600; }
:root[data-mode="dark"] .logline.buyin { color: #f0cd78; }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) .logline.buyin { color: #f0cd78; } }

/* Side show / backshow result: loser mucks into the deck, winner glows */
.muck { position: absolute; left: 50%; bottom: calc(100% + 4px); width: 0; height: 0; z-index: 8; pointer-events: none; }
.muck i { position: absolute; left: -12px; top: -34px; width: 24px; height: 34px; border-radius: 4px; background: repeating-linear-gradient(45deg, var(--back-1) 0 3px, var(--back-2) 3px 6px); border: 1.5px solid #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .4);
  animation: muckfly 1.1s cubic-bezier(.5,0,.7,1) both; animation-delay: calc(var(--md) + 250ms); }
.muck i:nth-child(1) { --r: -14deg; } .muck i:nth-child(2) { --r: 4deg; animation-delay: calc(var(--md) + 330ms); } .muck i:nth-child(3) { --r: 20deg; animation-delay: calc(var(--md) + 410ms); }
@keyframes muckfly {
  0% { transform: rotate(var(--r)) translate(0, 0); opacity: 1; }
  15% { transform: rotate(var(--r)) translate(0, -14px); opacity: 1; }
  85% { transform: translate(var(--dx), calc(var(--dy) + 34px)) rotate(calc(var(--r) * 8)) scale(.7); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 34px)) rotate(calc(var(--r) * 8)) scale(.5); opacity: 0; }
}
.muckdeck { animation: tptag .3s ease-out both; }
.sspop { position: absolute; left: 50%; top: calc(100% + 20px); transform: translateX(-50%); z-index: 9; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; padding: 4px 11px; border-radius: 99px; color: #fff; box-shadow: 0 4px 14px rgb(0 0 0 / .35);
  animation: sspop .45s cubic-bezier(.2,1.5,.4,1) both, bubout .4s ease-in both; animation-delay: var(--md), calc(var(--md) + 2200ms); }
.sspop svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sspop.win { background: linear-gradient(135deg, #1f8a52, #3fd68a); border: 1.5px solid #fff; }
.sspop.lose { background: #b8332b; }
@keyframes sspop { from { opacity: 0; transform: translateX(-50%) scale(.6); } to { opacity: 1; transform: translateX(-50%); } }
.seat.sswin .who { box-shadow: 0 0 0 3px #3fd68a, 0 0 26px rgb(63 214 138 / .75) !important; animation: sswinglow .9s ease-in-out 3; }
@keyframes sswinglow { 50% { box-shadow: 0 0 0 5px #3fd68a, 0 0 38px rgb(63 214 138 / .9); } }
.seat.sslose .who { animation: sslose .5s ease-in-out; }
@keyframes sslose { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* 2+1 runout: everything but the four spare cards goes back into the deck, the deck shuffles, then the runout is dealt */
.tpoh.togo { animation: none; }
.tpoh.togo .card { animation: togo .9s cubic-bezier(.5,0,.7,1) both; animation-delay: var(--gd); }
.tpoh.togo .card:nth-child(2) { animation-delay: calc(var(--gd) + 60ms); } .tpoh.togo .card:nth-child(3) { animation-delay: calc(var(--gd) + 120ms); }
.tpoh.togo .card:nth-child(4) { animation-delay: calc(var(--gd) + 180ms); } .tpoh.togo .card:nth-child(5) { animation-delay: calc(var(--gd) + 240ms); } .tpoh.togo .card:nth-child(6) { animation-delay: calc(var(--gd) + 300ms); }
@keyframes togo { 0% { transform: none; opacity: 1; } 85% { transform: translate(var(--dx), var(--dy)) rotate(25deg) scale(.7); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.5); opacity: 0; } }
.tpoh.running .ga, .tpoh.running .gb { animation: tpgo .9s cubic-bezier(.5,0,.7,1) both; animation-delay: calc(var(--cd) + 250ms); }
.tpoh.running .gb { animation-delay: calc(var(--cd) + 400ms); }
@keyframes tpgo { 0% { transform: none; opacity: 1; } 85% { transform: translate(var(--dx), var(--dy)) scale(.6); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; width: 0; padding: 0; margin: 0; border-width: 0; } }
.tpoh.running .gr { animation-delay: calc(var(--cd) + 1100ms); }
/* boards slide down into the deck */
.tpb.clear { animation: tpgather 1s cubic-bezier(.5,0,.7,1) both; animation-delay: calc(var(--cd) + 100ms); overflow: visible; }
@keyframes tpgather { 0% { transform: none; opacity: 1; max-height: 80px; } 80% { transform: translate(var(--gx, 0px), var(--gy, 145px)) scale(.3); opacity: .9; max-height: 80px; } 100% { transform: translate(var(--gx, 0px), var(--gy, 152px)) scale(.25); opacity: 0; max-height: 0; padding: 0; margin: 0; } }
/* the deck: shuffles after the gather */
.tpdeck { z-index: 6; }
.tpdeck.shuffling i { animation: riffle .5s ease-in-out infinite alternate; }
.tpdeck.shuffling i:nth-child(odd) { --sx: -26px; } .tpdeck.shuffling i:nth-child(even) { --sx: 26px; animation-delay: .25s; }
@keyframes riffle { 0% { transform: translateX(0) rotate(0); } 50% { transform: translateX(var(--sx)) rotate(calc(var(--sx) / 4 * 1deg)); } 100% { transform: translateX(0); } }
.shuflbl { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ffd34d; white-space: nowrap; text-shadow: 0 1px 3px rgb(0 0 0 / .6); }

/* Bigger seats with a more readable stack */
.seat { width: 158px; }
.seat .who { padding: 5px 16px 5px 5px; gap: 10px; }
.seat .av { width: 44px; height: 44px; font-size: 18px; }
.seat .av .emo { font-size: 26px; }
.seat .nm { font-size: 16px; }
.seat .ch { font-size: 16.5px; font-weight: 700; letter-spacing: .01em; }
.seat .ch::before { width: 12px; height: 12px; }
@media (max-width: 560px) {
  .seat { width: 112px; }
  .seat .who { padding: 3px 11px 3px 3px; gap: 6px; }
  .seat .av { width: 32px; height: 32px; font-size: 14px; }
  .seat .av .emo { font-size: 20px; }
  .seat .nm { font-size: 13.5px; }
  .seat .ch { font-size: 13.5px; }
  .seat .ch::before { width: 9px; height: 9px; }
}

/* Seen / blind tag: always on the seat for the whole hand */
.seat .srow { display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: nowrap; max-width: 190px; }
.eyetag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px 3px 8px; border-radius: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1.25; white-space: nowrap; position: relative; overflow: hidden; }
.eyetag b { font-weight: 800; }
.eyetag svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.eyetag.blind { color: #ffe3a1; background: linear-gradient(180deg, #2b2440, #18132a); border: 1px solid #c9a14a; box-shadow: 0 0 0 1px rgb(0 0 0 / .35), 0 3px 10px rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .12); }
.eyetag.blind::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 230 160 / .28) 50%, transparent 70%); transform: translateX(-120%); animation: eyeshine 3.2s ease-in-out infinite; }
.eyetag.seen { color: #eafff3; background: linear-gradient(180deg, #23a466, #137446); border: 1px solid #7ff0b4; box-shadow: 0 0 0 1px rgb(0 0 0 / .3), 0 3px 10px rgb(0 0 0 / .3), inset 0 1px 0 rgb(255 255 255 / .25); }
.eyetag.flip { animation: eyeflip .8s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes eyeshine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes eyeflip { 0% { transform: rotateX(90deg) scale(1.3); } 60% { transform: rotateX(0) scale(1.18); box-shadow: 0 0 0 3px rgb(127 240 180 / .5), 0 0 22px rgb(63 214 138 / .7); } 100% { transform: none; } }
.seat.turn .eyetag { transform: scale(1.08); }
@media (max-width: 560px) {
  .seat .srow { gap: 3px; max-width: 130px; }
  .eyetag { font-size: 9.5px; letter-spacing: .08em; padding: 2px 7px 2px 5px; gap: 3px; border-radius: 6px; }
  .eyetag svg { width: 12px; height: 12px; }
}

/* Table colours: felt + rail, chosen per player (data-table on <html>). Slate (no attribute) is the default. */
:root[data-table="casino"]  { --felt: #1f7a4a; --felt-deep: #0b3d23; --rim-1: #7a4a26; --rim-2: #4b2a12; }
:root[data-table="royal"]   { --felt: #23578a; --felt-deep: #0c2747; --rim-1: #d8b25a; --rim-2: #8f6a22; }
:root[data-table="crimson"] { --felt: #8a2433; --felt-deep: #3e0b14; --rim-1: #3a3a3e; --rim-2: #141416; }
:root[data-table="violet"]  { --felt: #573283; --felt-deep: #23103d; --rim-1: #d8b25a; --rim-2: #8f6a22; }
:root[data-table="teal"]    { --felt: #1f7676; --felt-deep: #0a3434; --rim-1: #f0ece2; --rim-2: #c2bba9; }
:root[data-table="onyx"]    { --felt: #2a2c31; --felt-deep: #0b0c0e; --rim-1: #e0b85a; --rim-2: #8a6420; }
:root[data-table="saddle"]  { --felt: #91683f; --felt-deep: #4a321b; --rim-1: #3a2414; --rim-2: #1c1008; }
:root[data-table="ocean"]   { --felt: #1b6e93; --felt-deep: #0a2f45; --rim-1: #f2f2ef; --rim-2: #c9cdd0; }
:root[data-table="rose"]    { --felt: #7a3a4c; --felt-deep: #34121d; --rim-1: #6b3b22; --rim-2: #3a1d0e; }
.lookscroll { max-height: min(62vh, 560px); overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.lookh { margin: 14px 0 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lookh:first-child { margin-top: 2px; }
.tsw { height: 78px; border-radius: 9px; display: grid; place-items: center; background: var(--panel-2); }
.tsw i { width: 82%; height: 58%; border-radius: 99px; background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--tf) 88%, white 8%), var(--tf) 50%, var(--td)); border: 5px solid var(--tr); box-shadow: 0 4px 0 var(--tr2), 0 8px 14px rgb(0 0 0 / .3); }
.tsw[data-tsw="slate"]   { --tf: #3a4140; --td: #1c2120; --tr: #2a8a64; --tr2: #1e6b52; }
.tsw[data-tsw="casino"]  { --tf: #1f7a4a; --td: #0b3d23; --tr: #7a4a26; --tr2: #4b2a12; }
.tsw[data-tsw="royal"]   { --tf: #23578a; --td: #0c2747; --tr: #d8b25a; --tr2: #8f6a22; }
.tsw[data-tsw="crimson"] { --tf: #8a2433; --td: #3e0b14; --tr: #3a3a3e; --tr2: #141416; }
.tsw[data-tsw="violet"]  { --tf: #573283; --td: #23103d; --tr: #d8b25a; --tr2: #8f6a22; }
.tsw[data-tsw="teal"]    { --tf: #1f7676; --td: #0a3434; --tr: #f0ece2; --tr2: #c2bba9; }
.tsw[data-tsw="onyx"]    { --tf: #2a2c31; --td: #0b0c0e; --tr: #e0b85a; --tr2: #8a6420; }
.tsw[data-tsw="saddle"]  { --tf: #91683f; --td: #4a321b; --tr: #3a2414; --tr2: #1c1008; }
.tsw[data-tsw="ocean"]   { --tf: #1b6e93; --td: #0a2f45; --tr: #f2f2ef; --tr2: #c9cdd0; }
.tsw[data-tsw="rose"]    { --tf: #7a3a4c; --td: #34121d; --tr: #6b3b22; --tr2: #3a1d0e; }

/* 2+1 side pots: separate labelled stacks under the pot */
.potsplit { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 4px; animation: tptag .4s ease-out both; }
.pz { display: grid; justify-items: center; gap: 1px; padding: 5px 12px 6px; border-radius: 12px; min-width: 104px; position: relative; box-shadow: 0 4px 12px rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .25); }
.pz .pzk { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.pz b { font-size: 18px; font-weight: 800; line-height: 1.1; }
.pz .pzw { font-size: 10.5px; font-weight: 600; opacity: .9; max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz.main { color: #3a2704; background: linear-gradient(180deg, #ffe39a, #e9b44a); border: 1px solid #fff2c6; }
.pz.side { color: #eafcff; background: linear-gradient(180deg, #2fa7c9, #186f8f); border: 1px solid #9be6ff; }
.pz.side.s2 { background: linear-gradient(180deg, #a26bd6, #6a3a9a); border-color: #dcbcff; }
.pz.side::before { content: ""; position: absolute; left: -6px; top: 50%; width: 6px; height: 2px; background: rgb(255 255 255 / .5); }
.seat .pill.pztag { color: #9be6ff; border-color: color-mix(in srgb, #2fa7c9 60%, transparent); background: rgb(10 40 52 / .85); letter-spacing: .06em; }
.tpside { font-size: 12.5px; font-weight: 700; color: #eafcff; background: linear-gradient(180deg, #2fa7c9, #186f8f); border: 1px solid #9be6ff; padding: 3px 12px; border-radius: 99px; }
@media (max-width: 560px) {
  .pz { min-width: 84px; padding: 4px 8px 5px; border-radius: 10px; }
  .pz b { font-size: 15px; } .pz .pzk { font-size: 8.5px; letter-spacing: .1em; } .pz .pzw { font-size: 9.5px; max-width: 110px; }
}

/* Side show face-off */
.foscrim .modal { width: min(100%, 620px); padding: 0; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #2b3a35, #121816 70%); color: #f3efe4; border: 1px solid rgb(201 161 74 / .55); }
.faceoff { display: grid; gap: 0; }
.fo-title { display: grid; justify-items: center; padding: 16px 16px 6px; }
.fo-title span { font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; background: linear-gradient(180deg, #fff3c9, #d9a940); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fo-title small { font-size: 11.5px; opacity: .65; letter-spacing: .06em; }
.fo-arena { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; padding: 12px 14px 4px; }
.fo-vs { display: grid; place-items: center; }
.fo-vs b { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 16px; color: #2b1d02; background: radial-gradient(circle at 35% 30%, #fff1c2, #d9a940 60%, #9c7020); box-shadow: 0 0 0 3px rgb(0 0 0 / .35), 0 0 24px rgb(240 200 100 / .55); animation: fovs 1s cubic-bezier(.2,1.6,.4,1) both .2s; }
@keyframes fovs { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }
.fo-side { display: grid; justify-items: center; gap: 8px; padding: 12px 6px 14px; border-radius: 16px; position: relative; transition: none; }
.fo-side.l { animation: foinl .55s ease-out both; } .fo-side.r { animation: foinr .55s ease-out both; }
@keyframes foinl { from { transform: translateX(-60px); opacity: 0; } } @keyframes foinr { from { transform: translateX(60px); opacity: 0; } }
.fo-who { display: grid; justify-items: center; line-height: 1.15; }
.fo-who b { font-size: 17px; } .fo-role { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.fo-cards { display: flex; gap: 4px; perspective: 600px; }
.fo-c { --cw: 46px; display: inline-block; }
.fo-c .card { --cw: 46px; }
.fo-in { display: grid; transform-style: preserve-3d; animation: foflip .5s cubic-bezier(.3,1.3,.5,1) both; animation-delay: var(--fd); }
.fo-b, .fo-f { grid-area: 1 / 1; backface-visibility: hidden; }
.fo-f { transform: rotateY(180deg); }
@keyframes foflip { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
.fo-lbl { font-size: 13px; font-weight: 700; color: #ffe39a; min-height: 18px; text-align: center; animation: tptag .4s ease-out both; animation-delay: calc(var(--fv) - 500ms); }
.fo-stamp { position: absolute; top: 46%; left: 50%; display: inline-flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; padding: 4px 14px; border-radius: 8px; transform: translate(-50%, -50%) rotate(-10deg); opacity: 0; pointer-events: none; animation: fostamp .5s cubic-bezier(.2,1.6,.4,1) both; animation-delay: var(--fv); }
.fo-stamp svg { width: 20px; height: 20px; fill: currentColor; }
.fo-side.win .fo-stamp { color: #fff; background: linear-gradient(180deg, #2fbf7a, #158a52); box-shadow: 0 0 0 2px #9ff0c6, 0 6px 18px rgb(0 0 0 / .4); }
.fo-side.lose .fo-stamp { color: #ffd9d4; border: 3px solid #ff6b5c; background: rgb(60 10 10 / .7); }
@keyframes fostamp { from { opacity: 0; transform: translate(-50%, -50%) rotate(-10deg) scale(2.2); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-10deg) scale(1); } }
.fo-side.win { animation: foinl .55s ease-out both, fowin 1s ease-out both; animation-delay: 0s, var(--fv); }
.fo-side.r.win { animation-name: foinr, fowin; }
@keyframes fowin { 0% { box-shadow: none; } 40% { box-shadow: 0 0 0 2px #7ff0b4, 0 0 40px rgb(63 214 138 / .55); } 100% { box-shadow: 0 0 0 2px rgb(127 240 180 / .7), 0 0 22px rgb(63 214 138 / .3); background: rgb(63 214 138 / .08); } }
.fo-side.lose .fo-cards { animation: fomuck .9s cubic-bezier(.5,0,.7,1) both; animation-delay: calc(var(--fv) + 450ms); }
@keyframes fomuck { 0% { transform: none; } 20% { transform: translateX(-6px) rotate(-3deg); } 35% { transform: translateX(6px) rotate(3deg); } 100% { transform: translateY(26px) scale(.85); filter: grayscale(1) brightness(.55); opacity: .55; } }
.fo-verdict { display: grid; justify-items: center; gap: 2px; padding: 10px 16px 4px; text-align: center; animation: tptag .5s ease-out both; animation-delay: calc(var(--fv) + 200ms); }
.fo-verdict b { font-size: 19px; } .fo-verdict span { font-size: 12.5px; opacity: .75; }
.fo-verdict.good b { color: #7ff0b4; } .fo-verdict.bad b { color: #ff8a7a; }
.fo-bar { height: 3px; margin: 10px 18px 0; background: rgb(255 255 255 / .12); border-radius: 3px; overflow: hidden; }
.fo-bar i { display: block; height: 100%; background: #d9a940; transform-origin: left; animation: fobar linear both; }
@keyframes fobar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.faceoff .mbtns { padding: 10px 16px 16px; justify-content: center; }
@media (max-width: 560px) {
  .fo-arena { grid-template-columns: 1fr; gap: 2px; } .fo-vs b { width: 38px; height: 38px; font-size: 14px; }
  .fo-c, .fo-c .card { --cw: 42px; } .fo-title span { font-size: 21px; } .fo-side { padding: 8px 4px 10px; gap: 6px; }
}

/* The dealer */
.dealer-guy { position: absolute; left: 50%; z-index: 3; width: 92px; transform: translate(-50%, -72%); pointer-events: none; transform-origin: 50% 100%; animation: dgin .45s cubic-bezier(.2,1.5,.4,1) var(--del) both, dgout .55s ease-in var(--dout) forwards; }
.dealer-guy svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .35)); }
@keyframes dgin { from { opacity: 0; transform: translate(-50%, -60%) scale(.5); } to { opacity: 1; transform: translate(-50%, -72%) scale(1); } }
@keyframes dgout { 0% { opacity: 1; transform: translate(-50%, -72%) scale(1); } 30% { transform: translate(-50%, -76%) scale(1.04) rotate(-3deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.55); } }
.dealer-guy .dg-arm { transform-box: view-box; transform-origin: 73px 84px; animation: dgpitch .22s ease-in-out infinite alternate; animation-delay: var(--del); }
@keyframes dgpitch { from { transform: rotate(-14deg); } to { transform: rotate(26deg) translateX(4px); } }
.dealer-guy .dg-card { animation: dgcard .44s linear infinite; animation-delay: var(--del); }
@keyframes dgcard { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }
.dealer-guy .dg-deck { transform-box: view-box; transform-origin: 47px 97px; animation: dgdeck .44s ease-in-out infinite; animation-delay: var(--del); }
@keyframes dgdeck { 50% { transform: translateY(1.2px); } }
.dealer-guy .dg-eyes { transform-box: view-box; transform-origin: 50px 45px; animation: dgblink 2.6s infinite; animation-delay: var(--del); }
@keyframes dgblink { 0%, 92%, 100% { transform: none; } 95% { transform: scaleY(.1); } }
.dealer-guy .dg-ear { animation: dgled 1.2s ease-in-out infinite; }
@keyframes dgled { 50% { fill: #3a6d8a; } }
@media (max-width: 560px) { .dealer-guy { width: 70px; } }
@media (prefers-reduced-motion: reduce) { .dealer-guy, .dealer-guy * { animation: none !important; } }
.fo-lbl small { display: block; font-size: 11.5px; font-weight: 600; color: #cfe7dc; opacity: .85; }
.fo-side.split .fo-stamp { color: #2b1d02; background: linear-gradient(180deg, #ffe39a, #d9a940); box-shadow: 0 0 0 2px #fff2c6, 0 6px 18px rgb(0 0 0 / .4); }

/* Top-up and fee pops */
.buypop, .feepop { position: absolute; left: 50%; top: -6px; transform: translate(-50%, 0); z-index: 9; font-weight: 900; font-size: 19px; letter-spacing: .01em; pointer-events: none; white-space: nowrap; text-shadow: 0 2px 6px rgb(0 0 0 / .55), 0 0 1px rgb(0 0 0 / .9); animation: buypop 1.5s ease-out both; animation-delay: var(--bd); }
.buypop, .feepop.in { color: #39e58c; }
.feepop.out { color: #ff5d4f; }
.feepop { animation-duration: 1.6s; }
@keyframes buypop { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -8px) scale(1.15); } 30% { transform: translate(-50%, -12px) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -34px); } }
.feeslide { position: absolute; z-index: 8; display: inline-flex; align-items: center; gap: 5px; transform: translate(-50%, -50%); pointer-events: none; animation: feeslide 1.3s cubic-bezier(.5,0,.3,1) both; animation-delay: calc(var(--bd) + 250ms); }
.feeslide b { font-size: 12px; font-weight: 800; color: #fff; background: rgb(0 0 0 / .6); padding: 1px 7px; border-radius: 99px; }
@keyframes feeslide { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 88% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) scale(.9); } }

.feeslide .stack { position: relative; width: 22px; height: 22px; flex: none; }
.feeslide .stack i { position: absolute; left: 0; width: 22px; height: 8px; border-radius: 50%; background: var(--chipc, var(--pot)); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .3), 0 0 0 1px rgb(0 0 0 / .25); background-image: repeating-linear-gradient(90deg, transparent 0 4px, rgb(255 255 255 / .7) 4px 6px); }
.feeslide .stack i:nth-child(1) { bottom: 0; } .feeslide .stack i:nth-child(2) { bottom: 5px; } .feeslide .stack i:nth-child(3) { bottom: 10px; }

/* Dealer modes for the 2+1 runout */
.dealer-guy.idle .dg-arm, .dealer-guy.idle .dg-card, .dealer-guy.shuffling .dg-card { animation: none; }
.dealer-guy.idle .dg-card { opacity: 0; }
.dealer-guy.shuffling .dg-deck { animation: dgriffle .26s ease-in-out infinite alternate; }
.dealer-guy.shuffling .dg-arm { animation: dgshuf .26s ease-in-out infinite alternate; }
@keyframes dgriffle { from { transform: translateX(-3px) rotate(-6deg); } to { transform: translateX(3px) rotate(6deg); } }
@keyframes dgshuf { from { transform: rotate(-4deg); } to { transform: rotate(10deg) translateX(-3px); } }
.dealer-guy .dg-lbl { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #ffe08a; white-space: nowrap; text-shadow: 0 1px 3px rgb(0 0 0 / .6); animation: tptag .3s ease-out both; }
.seat .pill.livehand { display: inline-grid; justify-items: center; line-height: 1.15; font-size: 12px; letter-spacing: .02em; padding: 3px 11px; color: #fff; background: rgb(18 24 22 / .9); border-color: rgb(255 255 255 / .35); white-space: nowrap; }
.seat .pill.livehand em { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.seat .pill.livehand.lead { background: linear-gradient(180deg, #23a466, #137446); border-color: #7ff0b4; box-shadow: 0 0 14px rgb(63 214 138 / .5); }
.seat .pill.livehand.me { font-size: 13.5px; padding: 4px 13px; }
.tplive { display: block; margin-top: 4px; font-size: 14px; color: var(--ivory); }
.tplive b { font-size: 16px; color: var(--good); }
.tplive i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--good); padding: 1px 6px; border-radius: 99px; margin-left: 4px; }

/* 2+1 chop / run picks */
.pickpop { position: absolute; left: 50%; top: -14px; z-index: 10; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 10px; font-size: 15px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; pointer-events: none; transform: translate(-50%, -100%); animation: pickpop 2.4s ease-out both; animation-delay: var(--bd); }
.pickpop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.pickpop b { font-size: 13px; background: rgb(255 255 255 / .25); padding: 0 5px; border-radius: 5px; }
.pickpop.nochop { color: #fff; background: linear-gradient(180deg, #e2483b, #a3231a); border: 2px solid #ffb4aa; box-shadow: 0 0 0 4px rgb(226 72 59 / .3), 0 8px 22px rgb(0 0 0 / .45); animation-name: pickslam; }
.pickpop.chop { color: #2b1d02; background: linear-gradient(180deg, #ffe39a, #e0ae3e); border: 2px solid #fff2c6; box-shadow: 0 8px 18px rgb(0 0 0 / .35); }
.pickpop.once { color: #fff; background: linear-gradient(180deg, #2f7fd6, #1b4f94); border: 2px solid #a9d0ff; box-shadow: 0 0 0 4px rgb(47 127 214 / .3), 0 8px 22px rgb(0 0 0 / .45); animation-name: pickslam; }
.pickpop.more { color: #fff; background: linear-gradient(180deg, #8f5bd6, #5b2f9a); border: 2px solid #d9c2ff; box-shadow: 0 8px 18px rgb(0 0 0 / .35); }
@keyframes pickpop { 0% { opacity: 0; transform: translate(-50%, -60%) scale(.5); } 12% { opacity: 1; transform: translate(-50%, -110%) scale(1.08); } 22% { transform: translate(-50%, -100%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -130%); } }
@keyframes pickslam { 0% { opacity: 0; transform: translate(-50%, -100%) scale(2.4) rotate(-8deg); } 10% { opacity: 1; transform: translate(-50%, -100%) scale(.92) rotate(-4deg); } 14% { transform: translate(-52%, -100%) scale(1) rotate(-4deg); } 18% { transform: translate(-48%, -100%) rotate(-4deg); } 22% { transform: translate(-50%, -100%) rotate(-4deg); } 82% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -120%) rotate(-4deg); } }
.sdcap { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.sdtog { display: inline-flex; border-radius: 99px; background: rgb(0 0 0 / .35); padding: 2px; pointer-events: auto; letter-spacing: .06em; }
.sdtog button { border: 0; background: none; color: var(--on-felt-muted); font: inherit; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 99px; cursor: pointer; text-transform: uppercase; }
.sdtog button[aria-pressed="true"] { background: #fff; color: #17201d; }
.sdcards .besthand .card.sub { outline: 1.5px dashed #ffd34d; }

/* Card Color Bust: the bust pop-up */
.bzscrim .modal { width: min(100%, 440px); text-align: center; background: radial-gradient(120% 90% at 50% 0%, #3a1616, #160909 72%); color: #fbeae6; border: 1px solid rgb(255 107 92 / .55); }
.bustbox { display: grid; justify-items: center; gap: 12px; }
.bz-title { font-family: var(--display); font-size: 34px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: #ff6b5c; text-shadow: 0 0 22px rgb(255 80 60 / .6); animation: bzslam .55s cubic-bezier(.2,1.6,.4,1) both .9s; }
@keyframes bzslam { from { opacity: 0; transform: scale(2.6) rotate(-6deg); } to { opacity: 1; transform: rotate(-3deg); } }
.bz-bust { display: grid; justify-items: center; gap: 4px; animation: tptag .4s ease-out both; }
.bz-cap { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.bz-card .card { --cw: 54px; box-shadow: 0 0 0 3px #ff6b5c, 0 0 24px rgb(255 80 60 / .6); }
.bz-hand { display: flex; gap: 6px; }
.bz-c { position: relative; animation: foinl .4s ease-out both; animation-delay: calc(var(--fi) * 120ms + 200ms); }
.bz-c .card { --cw: 50px; }
.bz-c.hit { animation: foinl .4s ease-out both, bzshake .5s ease-in-out both; animation-delay: calc(var(--fi) * 120ms + 200ms), 700ms; }
.bz-c.hit .card { box-shadow: 0 0 0 3px #ff6b5c, 0 0 18px rgb(255 80 60 / .7); }
@keyframes bzshake { 20% { transform: translateX(-6px) rotate(-5deg); } 40% { transform: translateX(6px) rotate(5deg); } 60% { transform: translateX(-4px) rotate(-3deg); } 80% { transform: translateX(3px); } }
.bz-x { position: absolute; inset: -4px; pointer-events: none; animation: bzx .3s ease-out both 1.1s; }
.bz-x::before, .bz-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 120%; height: 5px; border-radius: 3px; background: #ff3b2f; box-shadow: 0 0 8px rgb(255 59 47 / .8); transform: translate(-50%, -50%) rotate(45deg); }
.bz-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
@keyframes bzx { from { opacity: 0; transform: scale(1.8); } to { opacity: 1; transform: none; } }
.bustbox p { margin: 0; font-size: 14px; opacity: .85; } .bustbox p b { color: #ff8a7a; }
.bustpop { position: absolute; left: 50%; top: -10px; z-index: 9; transform: translate(-50%, -100%) rotate(-6deg); font-weight: 900; font-size: 18px; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, #e2483b, #a3231a); border: 2px solid #ffb4aa; padding: 3px 12px; border-radius: 8px; pointer-events: none; animation: pickslam 2.6s ease-out both; animation-delay: var(--bd); }

/* Seat colours: no more gold. The turn is a cool aqua glow; avatar rings are silver. */
.seat .av { box-shadow: 0 0 0 2px #15171b, 0 0 0 3.5px #c8d0d6; }
.seat.turn .who { background: linear-gradient(180deg, #3fe0cf, #129a93) padding-box, linear-gradient(135deg, #e6fffb, #0d7a74) border-box; border-color: transparent; transform: scale(1.16); box-shadow: 0 0 0 6px rgb(63 224 207 / .32), 0 0 0 14px rgb(63 224 207 / .14), 0 0 46px 16px rgb(63 224 207 / .4), 0 8px 18px rgb(0 0 0 / .35); }
.seat.turn .who .nm, .seat.turn .who .ch { color: #04211f; }
.seat.turn .av { box-shadow: 0 0 0 2px #129a93, 0 0 0 3.5px #e6fffb; }
@media (prefers-reduced-motion: no-preference) {
  .seat.turn .who { animation: turnhalo2 1.6s ease-in-out infinite; }
  @keyframes turnhalo2 {
    0%, 100% { box-shadow: 0 0 0 6px rgb(63 224 207 / .32), 0 0 0 14px rgb(63 224 207 / .14), 0 0 46px 16px rgb(63 224 207 / .4), 0 8px 18px rgb(0 0 0 / .35); }
    50% { box-shadow: 0 0 0 8px rgb(63 224 207 / .42), 0 0 0 20px rgb(63 224 207 / .1), 0 0 64px 24px rgb(63 224 207 / .5), 0 8px 18px rgb(0 0 0 / .35); }
  }
}
@media (max-width: 599px) { .seat.turn .who { transform: scale(1.12); } }
.seat .pill.turnpill { background: #129a93; color: #fff; }

/* Emotes and throwables */
.seat .who { position: relative; }
.fxbtn { position: absolute; left: -9px; bottom: -7px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; padding: 0; border: 1.5px solid rgb(255 255 255 / .7); background: #1d2a36; color: #fff; cursor: pointer; z-index: 5; opacity: .75; box-shadow: 0 2px 6px rgb(0 0 0 / .4); transition: opacity .15s, transform .15s; }
.fxbtn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fxbtn.emo { background: #e0a020; color: #2b1d02; border-color: #fff2c6; }
.fxbtn.thr { background: #8f5bd6; }
.fxbtn:hover, .fxbtn:focus-visible { opacity: 1; transform: scale(1.15); }
@media (hover: hover) { .seat:not(:hover) .fxbtn.thr { opacity: 0; } }
@media (max-width: 560px) { .fxbtn { width: 20px; height: 20px; left: -7px; bottom: -6px; } .fxbtn svg { width: 12px; height: 12px; } }
.fxscrim .modal { width: min(100%, 560px); }
.fxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-height: 60vh; overflow-y: auto; }
.fxopt { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--panel-2); cursor: pointer; font: inherit; color: var(--ivory); transition: transform .15s, border-color .15s; }
.fxopt:hover { transform: translateY(-2px); border-color: var(--brass); }
.fxopt svg { width: 54px; height: 54px; }
.fxopt span { font-size: 12px; font-weight: 700; }
.fxlayer { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.emote-pop { position: absolute; transform: translate(-50%, -100%); }
.emo-card { display: grid; justify-items: center; gap: 2px; padding: 6px 10px 6px; border-radius: 18px; background: rgb(255 255 255 / .96); color: #1b2421; box-shadow: 0 10px 26px rgb(0 0 0 / .4); animation: emoin 3.2s cubic-bezier(.2,1.4,.4,1) both; position: relative; }
.emo-card::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.emo-card svg { width: 84px; height: 84px; overflow: visible; }
.emo-card b { font-size: 13px; font-weight: 900; letter-spacing: .04em; white-space: nowrap; }
@keyframes emoin { 0% { opacity: 0; transform: translateY(14px) scale(.4); } 10% { opacity: 1; transform: translateY(-6px) scale(1.05); } 16% { transform: none; } 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-16px) scale(.9); } }
@media (max-width: 560px) { .emo-card svg { width: 64px; height: 64px; } .emo-card b { font-size: 11.5px; } }
/* per-emote motion (also plays in the picker) */
.emo-svg * { transform-box: view-box; }
.e-sorry .bow { transform-origin: 50px 90px; animation: e-bow 1.4s ease-in-out infinite; }
@keyframes e-bow { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg) translateY(4px); } }
.e-sorry .sweat { animation: e-drop 1.4s ease-in infinite; }
@keyframes e-drop { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }
.e-wow .fh { transform-origin: 50px 70px; animation: e-jolt .9s ease-out infinite; }
@keyframes e-jolt { 0% { transform: none; } 15% { transform: translateY(-5px) scale(1.06); } 40%, 100% { transform: none; } }
.e-wow .stars { transform-origin: 50px 40px; animation: e-twinkle 1s ease-in-out infinite alternate; }
@keyframes e-twinkle { from { opacity: .4; transform: scale(.9) rotate(-6deg); } to { opacity: 1; transform: scale(1.08) rotate(6deg); } }
.e-omg .shake, .e-angry .shake { transform-origin: 50px 80px; animation: e-shake .25s linear infinite; }
@keyframes e-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2.5px) rotate(-2deg); } 75% { transform: translateX(2.5px) rotate(2deg); } }
.e-omg .fm { transform-origin: 50px 58px; animation: e-gasp .8s ease-in-out infinite alternate; }
@keyframes e-gasp { from { transform: scaleY(.7); } to { transform: scaleY(1.15); } }
.e-facepalm .slowshake { transform-origin: 50px 90px; animation: e-no 1.6s ease-in-out infinite; }
@keyframes e-no { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
.e-facepalm .palm { animation: e-slap .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes e-slap { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.e-lol .rock { transform-origin: 50px 90px; animation: e-rock .5s ease-in-out infinite alternate; }
@keyframes e-rock { from { transform: rotate(-7deg); } to { transform: rotate(7deg) translateY(-2px); } }
.e-lol .tear { animation: e-drop .7s ease-in infinite; } .e-lol .t2 { animation-delay: .35s; }
.e-lol .ha { animation: e-twinkle .4s ease-in-out infinite alternate; transform-origin: 80px 20px; } .e-lol .h2 { animation-delay: .2s; }
.e-cool .shades { animation: e-shades 1.2s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes e-shades { 0% { transform: translateY(-40px); opacity: 0; } 50% { opacity: 1; } 70%, 100% { transform: none; } }
.e-cool .glint { animation: e-glint 1.4s ease-in-out infinite 1s; }
@keyframes e-glint { 0%, 70%, 100% { opacity: 0; } 80% { opacity: 1; transform: translateX(6px); } }
.e-cry .stream { animation: e-stream .5s linear infinite; }
@keyframes e-stream { to { stroke-dashoffset: -14; } }
.e-cry .stream path { stroke-dashoffset: 0; animation: e-dash .5s linear infinite; }
@keyframes e-dash { to { stroke-dashoffset: -14; } }
.e-angry .flush { animation: e-flush 1.2s ease-in-out infinite alternate; }
@keyframes e-flush { from { opacity: 0; } to { opacity: .35; } }
.e-angry .steam circle { animation: e-steam 1s ease-out infinite; transform-origin: center; }
.e-angry .steam circle:nth-child(2), .e-angry .steam circle:nth-child(4) { animation-delay: .3s; }
@keyframes e-steam { 0% { transform: translateY(6px) scale(.5); opacity: 0; } 40% { opacity: .9; } 100% { transform: translateY(-10px) scale(1.2); opacity: 0; } }
.e-think .qs text { animation: e-float 1.4s ease-in-out infinite; } .e-think .q2 { animation-delay: .5s; }
@keyframes e-float { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(-5px); opacity: 1; } }
.e-party .dance { transform-origin: 50px 90px; animation: e-dance .45s ease-in-out infinite alternate; }
@keyframes e-dance { from { transform: rotate(-6deg) translateY(0); } to { transform: rotate(6deg) translateY(-4px); } }
.e-party .confetti rect { animation: e-fall 1.2s linear infinite; }
.e-party .confetti rect:nth-child(2n) { animation-delay: .4s; } .e-party .confetti rect:nth-child(3n) { animation-delay: .8s; }
@keyframes e-fall { from { transform: translateY(-6px) rotate(0); opacity: 1; } to { transform: translateY(70px) rotate(240deg); opacity: 0; } }
.e-gg .thumb { transform-origin: 74px 70px; animation: e-thumb .7s cubic-bezier(.2,1.6,.4,1) infinite alternate; }
@keyframes e-thumb { from { transform: rotate(-12deg) scale(.95); } to { transform: rotate(6deg) scale(1.08); } }
.e-gg .spark { animation: e-twinkle .5s ease-in-out infinite alternate; transform-origin: 90px 46px; }
.e-sleepy .nod { transform-origin: 50px 90px; animation: e-nod 2s ease-in-out infinite; }
@keyframes e-nod { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(10deg) translateY(3px); } }
.e-sleepy .zz text { animation: e-z 2s ease-out infinite; opacity: 0; } .e-sleepy .z2 { animation-delay: .5s; } .e-sleepy .z3 { animation-delay: 1s; }
@keyframes e-z { 0% { opacity: 0; transform: translate(-6px, 6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -8px); } }
.e-money .bills rect { animation: e-fall 1.4s linear infinite; } .e-money .b2 { animation-delay: .45s; } .e-money .b3 { animation-delay: .9s; }
.e-money .fe { transform-origin: 50px 46px; animation: e-twinkle .35s ease-in-out infinite alternate; }
.e-pray .halo { transform-origin: 50px 44px; animation: e-halo 1.6s ease-in-out infinite; }
@keyframes e-halo { 0%, 100% { opacity: .3; transform: scale(.95); } 50% { opacity: .9; transform: scale(1.04); } }
.e-pray .hands { transform-origin: 50px 86px; animation: e-plead .5s ease-in-out infinite alternate; }
@keyframes e-plead { from { transform: translateY(0); } to { transform: translateY(-3px); } }
/* throwables */
.fly { position: absolute; width: 0; height: 0; animation: fly-x var(--dur) linear both; }
.fly-y { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; animation: fly-y var(--dur) cubic-bezier(.3,0,.7,1) both; }
.fly-y svg { width: 40px; height: 40px; animation: fly-spin var(--dur) linear both; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .45)); }
@keyframes fly-x { from { transform: translateX(0); } to { transform: translateX(var(--dx)); } }
@keyframes fly-y { 0% { transform: translateY(0) scale(.8); } 50% { transform: translateY(var(--lift)) scale(1.25); } 100% { transform: translateY(var(--ty, 0px)) scale(1); } }
@keyframes fly-spin { to { transform: rotate(540deg); } }
.fly.k-crown .fly-y svg, .fly.k-rose .fly-y svg, .fly.k-beer .fly-y svg, .fly.k-kiss .fly-y svg { animation: none; }
.impact { position: absolute; width: 0; height: 0; }
.impact > * { position: absolute; }
.impact .splat { left: -46px; top: -30px; width: 92px; animation: splat 2.6s ease-out both; }
.impact .splat svg { width: 92px; height: auto; }
@keyframes splat { 0% { transform: scale(.2); opacity: 0; } 8% { transform: scale(1.15); opacity: 1; } 14% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(8px); } }
.impact .splat .stink { animation: e-float 1s ease-in-out infinite; }
.impact .splat .drip { animation: drip 1.6s ease-in both .4s; }
@keyframes drip { from { transform: scaleY(.2); } to { transform: scaleY(1.6); } }
.impact .flop { left: -22px; top: -26px; width: 44px; animation: flop .3s ease-in-out 7 alternate, fadeoff 2.6s linear both; }
.impact .flop svg, .impact .landed svg, .impact .crowned svg, .impact .bounce svg, .impact .slip svg { width: 44px; height: 44px; }
@keyframes flop { from { transform: rotate(-25deg) translateY(0); } to { transform: rotate(25deg) translateY(-10px) scaleX(-1); } }
@keyframes fadeoff { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.impact .drops i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #7fd0ff; animation: dropout .8s ease-out both; }
.impact .drops i:nth-child(1) { --tx: -30px; --ty: -24px; } .impact .drops i:nth-child(2) { --tx: 28px; --ty: -26px; } .impact .drops i:nth-child(3) { --tx: -36px; --ty: 4px; } .impact .drops i:nth-child(4) { --tx: 34px; --ty: 6px; }
@keyframes dropout { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--tx), var(--ty)); opacity: 0; } }
.impact .landed { left: -22px; top: -30px; animation: splat 2.6s ease-out both; }
.impact .hearts i { position: absolute; font-style: normal; color: #ff4d6a; font-size: 18px; left: -8px; top: -10px; animation: heartup 1.8s ease-out both; }
.impact .hearts i:nth-child(1) { --tx: -26px; } .impact .hearts i:nth-child(2) { --tx: 22px; animation-delay: .2s; } .impact .hearts i:nth-child(3) { --tx: -8px; animation-delay: .4s; } .impact .hearts i:nth-child(4) { --tx: 30px; animation-delay: .6s; }
@keyframes heartup { from { transform: translate(0, 0) scale(.5); opacity: 0; } 20% { opacity: 1; } to { transform: translate(var(--tx), -60px) scale(1.2); opacity: 0; } }
.impact .foam i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #eee; animation: dropout 1s ease-out both; }
.impact .foam i:nth-child(1) { --tx: -34px; --ty: -30px; } .impact .foam i:nth-child(2) { --tx: 30px; --ty: -34px; } .impact .foam i:nth-child(3) { --tx: 0px; --ty: -44px; } .impact .foam i:nth-child(4) { --tx: -40px; --ty: 0px; } .impact .foam i:nth-child(5) { --tx: 40px; --ty: 0px; }
.impact .fxword { left: 0; top: -50px; transform: translateX(-50%); white-space: nowrap; font-size: 16px; font-weight: 900; color: #fff; text-shadow: 0 2px 6px rgb(0 0 0 / .6); animation: buypop 2s ease-out both; }
.impact .crowned { left: -22px; top: -50px; animation: crownon 2.6s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes crownon { 0% { transform: translateY(-30px) rotate(-20deg); opacity: 0; } 15% { transform: rotate(-8deg); opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
.impact .sparkles i { position: absolute; width: 6px; height: 6px; background: #ffd34d; border-radius: 1px; transform: rotate(45deg); top: -40px; animation: dropout 1.2s ease-out both .2s; }
.impact .sparkles i:nth-child(1) { --tx: -30px; --ty: -20px; } .impact .sparkles i:nth-child(2) { --tx: 30px; --ty: -20px; } .impact .sparkles i:nth-child(3) { --tx: -20px; --ty: 10px; } .impact .sparkles i:nth-child(4) { --tx: 24px; --ty: 12px; }
.impact .bounce { left: -22px; top: -22px; animation: chipbounce 1s ease-out both, fadeoff 2.6s linear both; }
@keyframes chipbounce { 0% { transform: translateY(0) rotateY(0); } 30% { transform: translateY(-34px) rotateY(360deg); } 60% { transform: translateY(0) rotateY(720deg); } 80% { transform: translateY(-10px); } 100% { transform: none; } }
.impact .slip { left: -22px; top: -10px; animation: slip 1.2s ease-out both, fadeoff 2.6s linear both; }
@keyframes slip { 0% { transform: rotate(0); } 40% { transform: translateX(20px) rotate(200deg); } 100% { transform: translateX(26px) rotate(220deg); } }
.seat .who.hit { animation: seathit .5s ease-out; }
@keyframes seathit { 20% { transform: translateX(-5px) rotate(-3deg); } 50% { transform: translateX(4px) rotate(2deg); } 80% { transform: translateX(-2px); } }

/* Seat plates: a silver edge instead of gold */
.seat .who { background: linear-gradient(180deg, #2c3036, #15171b) padding-box, linear-gradient(135deg, #eef2f5, #5f6870 45%, #b3bcc4) border-box; }
.fo-c .card.sub { outline: 2px dashed #ffd34d; outline-offset: 1px; }

/* Afflatoon: three jokers, the main one marked */
.aflcards { gap: 6px; align-items: flex-end; }
.aflj { display: grid; justify-items: center; gap: 3px; }
.aflj .card { --cw: 34px; }
.aflj.main .card { --cw: 40px; box-shadow: 0 0 0 2.5px #ffd34d, 0 0 16px rgb(255 211 77 / .55); }
.aflj em { font-style: normal; font-size: 9.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; padding: 1px 7px; border-radius: 99px; color: #fff; background: #3b6fb0; white-space: nowrap; }
.aflj.main em { color: #2b1d02; background: linear-gradient(180deg, #ffe39a, #e0ae3e); }
.aflj small { font-size: 10px; font-weight: 700; color: var(--on-felt-muted); white-space: nowrap; }
@media (max-width: 599px) { .aflj .card { --cw: 26px; } .aflj.main .card { --cw: 30px; } .aflj em { font-size: 8px; padding: 1px 5px; } .aflj small { font-size: 8.5px; } }

/* Turn clock: a ring round the seat that runs down, and the seat warms as time runs out */
.tring { position: absolute; left: -7px; top: -7px; width: calc(100% + 14px); height: calc(100% + 14px); pointer-events: none; overflow: visible; z-index: 4; }
.tring rect { x: 3px; y: 3px; width: calc(100% - 6px); height: calc(100% - 6px); rx: 999px; fill: none; stroke-width: 5.5px; }
.tring .tr0 { stroke: rgb(0 0 0 / .45); }
.tring .tr1 { stroke: #3fe0cf; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 0; animation: tring var(--tt, 30s) linear var(--td, 0ms) both, tringcol var(--tt, 30s) linear var(--td, 0ms) both; filter: drop-shadow(0 0 5px rgb(255 255 255 / .55)); }
@keyframes tring { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 100; } }
@keyframes tringcol { 0%, 40% { stroke: #ffffff; } 72% { stroke: #ffc23a; } 100% { stroke: #ff3b2f; } }
.seat.turn .who::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; animation: turnwarm var(--tt, 30s) linear var(--td, 0ms) both; }
@keyframes turnwarm { 0%, 40% { background: rgb(242 169 59 / 0); } 72% { background: rgb(242 169 59 / .85); } 100% { background: rgb(226 64 50 / .95); } }
.seat .pill.turnpill { font-size: 15px; padding: 3px 12px; font-weight: 800; }
.seat .pill.turnpill svg { width: 15px; height: 15px; }
.seat .pill.turnpill { white-space: nowrap; } /* while the cards are still being dealt the clock just shows its full time; it starts counting once the turn begins */
@media (max-width: 599px) { .seat .pill.turnpill { font-size: 13px; padding: 2px 9px; } .tring rect { stroke-width: 3.5px; } }

/* Side show on the seats, slowed down to match the face-off */
.muck i { animation-duration: 1.6s !important; }
.muck i:nth-child(1) { animation-delay: calc(var(--md) + 900ms); } .muck i:nth-child(2) { animation-delay: calc(var(--md) + 1050ms); } .muck i:nth-child(3) { animation-delay: calc(var(--md) + 1200ms); }
.sspop { animation-delay: calc(var(--md) + 500ms), calc(var(--md) + 4000ms); }
.fo-in { animation-duration: .7s; }
.fo-stamp { animation-duration: .7s; }
.fo-side.lose .fo-cards { animation-duration: 1.4s; }

/* Turn ring, dressed up: a bezel of ticks, a soft glow trail, the live arc and a bright head that leads it.
   In the last five seconds the ring throbs. */
.tring .tr0 { stroke: rgb(255 255 255 / .28); stroke-width: 2px; stroke-dasharray: .6 1.4; }
.tring .trg { stroke: #fff; stroke-width: 11px; opacity: .22; stroke-dasharray: 100 100; filter: blur(3px); animation: tring var(--tt, 30s) linear var(--td, 0ms) both, tringcol var(--tt, 30s) linear var(--td, 0ms) both; }
.tring .tr1 { stroke-width: 5px; animation: tring var(--tt, 30s) linear var(--td, 0ms) both, tringcol var(--tt, 30s) linear var(--td, 0ms) both, tringpulse .45s ease-in-out calc(var(--td, 0ms) + var(--tt, 30s) - 5000ms) infinite alternate; }
.tring .trh { stroke: #fff; stroke-width: 10px; stroke-linecap: round; stroke-dasharray: .01 99.99; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px rgb(127 220 255 / .9)); animation: tringhead var(--tt, 30s) linear var(--td, 0ms) both; }
@keyframes tringhead { from { stroke-dashoffset: -100; } to { stroke-dashoffset: 0; } }
@keyframes tringpulse { from { stroke-width: 5px; } to { stroke-width: 8px; } }
@media (max-width: 599px) { .tring .tr1 { stroke-width: 4px; } .tring .trh { stroke-width: 8px; } .tring .trg { stroke-width: 8px; } }

/* Empty seats: cool glass with an ice-blue edge (no gold) */
.seatbox { background: linear-gradient(180deg, rgb(255 255 255 / .09), rgb(255 255 255 / .02)), rgb(12 20 27 / .78); border: 1px solid rgb(180 220 240 / .3); box-shadow: 0 6px 16px rgb(0 0 0 / .32), inset 0 1px 0 rgb(255 255 255 / .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.seatbox .sav { background: radial-gradient(circle at 35% 30%, rgb(160 220 245 / .25), rgb(20 40 52 / .6)); border: 1.5px solid rgb(170 225 245 / .6); color: #eaf7fc; box-shadow: none; }
.seatbox .sl { color: #eaf7fc; }
.seatbox .ss { color: rgb(190 225 240 / .62); }
.seatbox.move .sl { color: #8fdcff; }
.seatbox:not(.open):not(.ask) { opacity: .8; border-color: rgb(180 220 240 / .2); }
button.seatbox:hover, button.seatbox:focus-visible { border-style: solid; border-color: #8fdcff; color: #fff; background: linear-gradient(180deg, rgb(143 220 255 / .2), rgb(143 220 255 / .06)), rgb(10 30 42 / .9); box-shadow: 0 0 0 3px rgb(143 220 255 / .2), 0 8px 20px rgb(0 0 0 / .35); }
button.seatbox:hover .sav, button.seatbox:focus-visible .sav { background: #8fdcff; color: #062330; border-color: #e6f8ff; }
.seatbox.ask, .seatbox.moving { border-style: solid; border-color: #8fdcff; }
.seatbox.ask .sav { border-color: #8fdcff; color: #bfeaff; }

/* Turn ring v3: it IS the seat's edge. Same teal as the seat, thick, warming to amber and red with the seat. */
.seat.turn .who { border-color: transparent; }
.tring { left: -4px; top: -4px; width: calc(100% + 8px); height: calc(100% + 8px); z-index: 4; }
.tring rect { x: 4px; y: 4px; width: calc(100% - 8px); height: calc(100% - 8px); rx: 999px; fill: none; }
.tring .tr0 { stroke: rgb(4 40 38 / .55); stroke-width: 7px; stroke-dasharray: none; }
.tring .tr1 { stroke-width: 7px; stroke-linecap: round; filter: none; animation: tring var(--tt, 30s) linear var(--td, 0ms) both, tringcol3 var(--tt, 30s) linear var(--td, 0ms) both, tringpulse3 .45s ease-in-out calc(var(--td, 0ms) + var(--tt, 30s) - 5000ms) infinite alternate; }
.tring .trh { stroke: #fff; stroke-width: 7px; opacity: .9; filter: drop-shadow(0 0 3px rgb(255 255 255 / .8)); }
@keyframes tringcol3 { 0%, 40% { stroke: #0fb5a6; } 72% { stroke: #f2a93b; } 100% { stroke: #e2402f; } }
@keyframes tringpulse3 { from { stroke-width: 7px; } to { stroke-width: 10px; } }
@media (max-width: 599px) { .tring { left: -3px; top: -3px; width: calc(100% + 6px); height: calc(100% + 6px); } .tring rect { x: 3px; y: 3px; width: calc(100% - 6px); height: calc(100% - 6px); } .tring .tr0, .tring .tr1, .tring .trh { stroke-width: 5.5px; } }

/* Throws v2: tag on the thrower, a dotted arc, a crosshair on the target, a big object following the arc */
.thr-from { position: absolute; transform: translate(-50%, calc(-100% - 10px)); z-index: 2; }
.thr-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 99px; background: #8f5bd6; color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; box-shadow: 0 6px 16px rgb(0 0 0 / .4); border: 2px solid #e3d2ff; animation: thrtag 1.9s ease-out both; }
.thr-ico { width: 26px; height: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.thr-ico svg { width: 22px; height: 22px; }
@keyframes thrtag { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
.thr-arcw { position: absolute; left: 0; top: 0; }
.thr-arc { position: fixed; left: 0; top: 0; overflow: visible; }
.thr-arc path { fill: none; stroke: #e3d2ff; stroke-width: 3px; stroke-linecap: round; stroke-dasharray: 1 3; opacity: 0; filter: drop-shadow(0 0 3px rgb(143 91 214 / .9)); animation: thrarc calc(var(--wd) + var(--dur)) linear both; }
@keyframes thrarc { 0% { opacity: 0; } 15% { opacity: .9; } 85% { opacity: .9; } 100% { opacity: 0; } }
.thr-tw { position: absolute; }
.thr-target { position: absolute; left: -34px; top: -34px; width: 68px; height: 68px; border-radius: 50%; border: 3px solid #ff5d4f; box-shadow: 0 0 0 3px rgb(255 93 79 / .25), 0 0 16px rgb(255 93 79 / .6); animation: thrtarget .9s ease-in-out infinite alternate, fadein .25s both; }
.thr-target i { position: absolute; background: #ff5d4f; border-radius: 2px; }
.thr-target i:nth-child(1) { left: 50%; top: -10px; bottom: -10px; width: 3px; transform: translateX(-50%); }
.thr-target i:nth-child(2) { top: 50%; left: -10px; right: -10px; height: 3px; transform: translateY(-50%); }
@keyframes thrtarget { from { transform: scale(1.1) rotate(0); } to { transform: scale(.85) rotate(45deg); } }
.fly2 { position: absolute; left: 0; top: 0; offset-rotate: 0deg; offset-anchor: center; animation: fly2 var(--dur) cubic-bezier(.35,.05,.65,.95) both; z-index: 3; }
.fly2 .fly-o { position: relative; }
.fly2 .fly-o svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .5)); animation: fly-spin var(--dur) linear both; }
.fly2.k-crown .fly-o svg, .fly2.k-rose .fly-o svg, .fly2.k-beer .fly-o svg, .fly2.k-kiss .fly-o svg { animation: none; }
@keyframes fly2 { 0% { offset-distance: 0%; transform: scale(.7); } 50% { transform: scale(1.25); } 100% { offset-distance: 100%; transform: scale(1); } }
.seat .who.winding { animation: winding .45s ease-in-out; }
@keyframes winding { 0% { transform: none; } 40% { transform: rotate(-6deg) scale(1.06); box-shadow: 0 0 0 4px rgb(143 91 214 / .6), 0 0 20px rgb(143 91 214 / .7); } 100% { transform: none; } }
/* bigger landings */
.impact .splat { left: -66px; top: -44px; width: 132px; } .impact .splat svg { width: 132px; }
.impact .flop, .impact .landed, .impact .crowned, .impact .bounce, .impact .slip { transform-origin: center; }
.impact .flop svg, .impact .landed svg, .impact .crowned svg, .impact .bounce svg, .impact .slip svg { width: 64px; height: 64px; }
.impact .flop { left: -32px; top: -36px; } .impact .landed { left: -32px; top: -40px; } .impact .crowned { left: -32px; top: -66px; } .impact .bounce { left: -32px; top: -32px; } .impact .slip { left: -32px; top: -20px; }
@media (max-width: 599px) { .impact .splat { left: -50px; top: -34px; width: 100px; } .impact .splat svg { width: 100px; } .thr-tag { font-size: 11.5px; } }

/* Header: host, boot and cards in hand as three chips */
.tableinfo { display: flex !important; align-items: center; gap: 6px; justify-items: initial; margin-right: 6px; }
.tableinfo[hidden] { display: none !important; }
.tic { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 1px 3px rgb(0 0 0 / .06); line-height: 1; white-space: nowrap; }
.tic svg { width: 15px; height: 15px; fill: none; stroke: var(--brass); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tic .tik { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tic b { font-size: 14px; font-weight: 800; color: var(--ivory); max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) { .tableinfo { display: none !important; } }
.tableinfo { margin-left: auto; }
header button, .bar button, .tb { white-space: nowrap; }
@media (max-width: 1440px) { .tic svg { display: none; } .tic { padding: 5px 10px; gap: 5px; } }
@media (max-width: 1100px) { .tic:nth-child(4) { display: none; } }
@media (max-width: 1000px) { .tic:nth-child(3) { display: none; } }

/* Turn ring v4: a quiet line that traces the seat's edge, drawn above everything on the seat (avatar included). */
.tring { left: -2px; top: -2px; width: calc(100% + 4px); height: calc(100% + 4px); z-index: 20; }
.tring rect { x: 2px; y: 2px; width: calc(100% - 4px); height: calc(100% - 4px); }
.tring .tr0 { stroke: rgb(0 0 0 / .18); stroke-width: 3px; }
.tring .tr1 { stroke-width: 3px; opacity: .9; filter: none; animation: tring var(--tt, 30s) linear var(--td, 0ms) both, tringcol4 var(--tt, 30s) linear var(--td, 0ms) both; }
.tring .trh, .tring .trg { display: none; }
@keyframes tringcol4 { 0%, 40% { stroke: #0b8f84; } 72% { stroke: #d98a1e; } 100% { stroke: #c4321f; } }
@media (max-width: 599px) { .tring { left: -2px; top: -2px; width: calc(100% + 4px); height: calc(100% + 4px); } .tring rect { x: 2px; y: 2px; width: calc(100% - 4px); height: calc(100% - 4px); } .tring .tr0, .tring .tr1 { stroke-width: 2.5px; } }

/* Emotes: no white card, just the character and its caption */
.emo-card { background: none; box-shadow: none; padding: 0; }
.emo-card::after { display: none; }
.emo-card svg { filter: drop-shadow(0 4px 8px rgb(0 0 0 / .45)); }
.emo-card b { color: #fff; font-size: 14px; text-shadow: 0 1px 2px rgb(0 0 0 / .9), 0 0 8px rgb(0 0 0 / .6); }
.e-clap .clapl { transform-origin: 40px 78px; animation: clapl .28s ease-in-out infinite alternate; }
.e-clap .clapr { transform-origin: 60px 78px; animation: clapr .28s ease-in-out infinite alternate; }
@keyframes clapl { from { transform: translateX(-5px) rotate(-8deg); } to { transform: translateX(4px) rotate(4deg); } }
@keyframes clapr { from { transform: translateX(5px) rotate(8deg); } to { transform: translateX(-4px) rotate(-4deg); } }
.e-clap .claplines { animation: e-twinkle .28s ease-in-out infinite alternate; transform-origin: 50px 62px; }
.e-fu .finger { transform-origin: 72px 80px; animation: e-thrust .5s cubic-bezier(.2,1.6,.4,1) infinite alternate; }
@keyframes e-thrust { from { transform: translateY(4px) scale(.95); } to { transform: translateY(-4px) scale(1.08); } }

/* Emote art (faces, hands, objects) */
.e-sorry .tilt { transform-origin: 50px 86px; animation: e-bow 1.6s ease-in-out infinite; }
.e-wow .burst { transform-origin: 50px 46px; animation: e-spin 6s linear infinite; }
@keyframes e-spin { to { transform: rotate(360deg); } }
.e-wow .wface { transform-origin: 50px 80px; animation: e-jolt .9s ease-out infinite; }
.e-wow .spark { transform-origin: 50px 50px; animation: e-twinkle .35s ease-in-out infinite alternate; }
.e-omg .blast { transform-origin: 50px 30px; animation: e-blast 1s ease-out infinite; }
@keyframes e-blast { 0% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.e-omg .shock { transform-origin: 50px 90px; animation: e-shake .22s linear infinite; }
.e-omg .scream { transform-origin: 50px 78px; animation: e-gasp .6s ease-in-out infinite alternate; }
.e-facepalm .shake2 { transform-origin: 50px 88px; animation: e-no 1.6s ease-in-out infinite; }
.e-facepalm .slap { animation: none; }
.e-party .popper { transform-origin: 20px 90px; animation: e-pop .8s cubic-bezier(.2,1.6,.4,1) infinite alternate; }
@keyframes e-pop { from { transform: rotate(-4deg); } to { transform: rotate(4deg) scale(1.04); } }
.e-party .confetti > * { animation: e-burst 1.2s ease-out infinite; }
.e-party .confetti > *:nth-child(2n) { animation-delay: .3s; } .e-party .confetti > *:nth-child(3n) { animation-delay: .6s; }
@keyframes e-burst { 0% { transform: translate(-20px, 20px) scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(4px, -6px) rotate(90deg); opacity: 0; } }
.e-gg .thumb { transform-origin: 50px 90px; animation: e-thumb .7s cubic-bezier(.2,1.6,.4,1) infinite alternate; }
.e-sleepy .snot { transform-origin: 56px 68px; animation: e-snot 2s ease-in-out infinite; }
@keyframes e-snot { 0%, 100% { transform: scale(.4); } 50% { transform: scale(1.15); } }
.e-money .stack { transform-origin: 50px 64px; animation: e-pop .5s ease-in-out infinite alternate; }
.e-money .c1 { animation: e-coin 1s ease-in-out infinite; } .e-money .c2 { animation: e-coin 1s ease-in-out .4s infinite; }
@keyframes e-coin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.e-money .spark, .e-gg .spark { transform-origin: 50px 40px; animation: e-twinkle .5s ease-in-out infinite alternate; }
.e-pray .rays { transform-origin: 50px 50px; animation: e-halo 1.4s ease-in-out infinite; }
.e-fu .finger { transform-origin: 50px 96px; animation: e-thrust .45s cubic-bezier(.2,1.6,.4,1) infinite alternate; }
.e-clap .clapl { transform-origin: 30px 80px; } .e-clap .clapr { transform-origin: 70px 80px; }

/* Emote and throw menus */
.fxscrim .modal { width: min(100%, 600px); padding: 0; overflow: hidden; color: #eef4f8; background: radial-gradient(120% 70% at 50% 0%, #26384a, #121a24 70%); border: 1px solid rgb(143 220 255 / .28); box-shadow: 0 30px 70px rgb(0 0 0 / .55), inset 0 1px 0 rgb(255 255 255 / .08); }
.fxhead { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid rgb(255 255 255 / .08); background: linear-gradient(180deg, rgb(255 255 255 / .05), transparent); }
.fxhead h3 { margin: 0; font-size: 20px; color: #fff; } .fxhead h3 em { font-style: normal; color: #c9a8ff; }
.fxhead p { margin: 2px 0 0; font-size: 12.5px; color: rgb(220 235 245 / .65); }
.fxic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #ffd34d, #f08a1e); color: #3a2304; box-shadow: 0 4px 12px rgb(240 138 30 / .45); flex: none; }
.fxscrim:has(.thr) .fxic { background: linear-gradient(135deg, #b48bff, #7a3fd6); color: #fff; box-shadow: 0 4px 12px rgb(122 63 214 / .5); }
.fxic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fxx { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .15); background: rgb(255 255 255 / .06); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.fxx:hover { background: rgb(255 255 255 / .14); }
.fxscrim .fxgrid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; padding: 16px 18px 20px; max-height: min(64vh, 560px); }
.fxscrim .fxopt { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 18px; border: 1px solid rgb(255 255 255 / .08); background: radial-gradient(90% 80% at 50% 30%, rgb(255 255 255 / .1), rgb(255 255 255 / .02)); color: #eef4f8; transition: transform .18s cubic-bezier(.2,1.4,.4,1), border-color .15s, box-shadow .15s, background .15s; }
.fxscrim .fxopt:hover, .fxscrim .fxopt:focus-visible { transform: translateY(-4px) scale(1.05); border-color: rgb(255 211 77 / .7); background: radial-gradient(90% 80% at 50% 30%, rgb(255 211 77 / .22), rgb(255 255 255 / .03)); box-shadow: 0 10px 22px rgb(0 0 0 / .4), 0 0 0 3px rgb(255 211 77 / .15); }
.fxscrim .fxgrid.thr .fxopt:hover, .fxscrim .fxgrid.thr .fxopt:focus-visible { border-color: rgb(180 139 255 / .8); background: radial-gradient(90% 80% at 50% 30%, rgb(180 139 255 / .25), rgb(255 255 255 / .03)); box-shadow: 0 10px 22px rgb(0 0 0 / .4), 0 0 0 3px rgb(180 139 255 / .18); }
.fxscrim .fxopt:active { transform: scale(.96); }
.fxart { width: 64px; height: 64px; display: grid; place-items: center; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .35)); }
.fxart svg { width: 64px !important; height: 64px !important; }
.fxscrim .fxopt .fxart * { animation-play-state: paused; }
.fxscrim .fxopt:hover .fxart *, .fxscrim .fxopt:focus-visible .fxart * { animation-play-state: running; }
.fxgrid.thr .fxopt:hover .fxart svg { animation: thrwiggle .5s ease-in-out infinite alternate; }
@keyframes thrwiggle { from { transform: rotate(-10deg); } to { transform: rotate(10deg) translateY(-3px); } }
.fxlbl { font-size: 12px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
@media (max-width: 560px) { .fxscrim .fxgrid { grid-template-columns: repeat(4, 1fr); gap: 7px; padding: 12px; } .fxart, .fxart svg { width: 50px !important; height: 50px !important; } .fxlbl { font-size: 10.5px; } .fxscrim .fxopt { padding: 9px 3px 8px; border-radius: 14px; } }
.fxscrim .fxopt:not(:hover):not(:focus-visible) .fxart * { animation: none !important; }
.fxscrim .fxopt .fxart .e-sleepy .zz text { opacity: 1; }
.pk-kachra { --a: #5a3a14; --b: #b8823a; } .pk-flipjokers { --a: #3a1f7a; --b: #8f5bd6; } .pk-shortdeck { --a: #0f4f5a; --b: #2fa7b9; } .pk-btb { --a: #7a1446; --b: #e2407a; }
.pkbtb { display: flex; align-items: center; gap: 10px; margin: 10px 14px 0; padding: 10px 14px; border-radius: 12px; background: linear-gradient(90deg, rgb(226 64 122 / .12), rgb(226 64 122 / .04)); border: 1px solid rgb(226 64 122 / .4); cursor: pointer; font-size: 13px; }
.pkbtb input { width: 18px; height: 18px; accent-color: #e2407a; }
.pkbtb b { color: #c2185b; margin-right: 4px; }
.pkgrid.btbmode .nopair { opacity: .3; filter: grayscale(.8); pointer-events: none; }
.pkgrid.btbmode [data-pick]:not(.nopair) { box-shadow: 0 0 0 2px rgb(226 64 122 / .6); }

/* Cards flying between seats / into the middle (Kachra passes, Flipping Jokers) */
.cfly { position: absolute; width: 0; height: 0; z-index: 3; }
.cfly-in { position: absolute; left: -17px; top: -24px; animation: cfly .8s cubic-bezier(.4,0,.3,1) both; animation-delay: var(--cd); }
.cfly-in .card { --cw: 34px; box-shadow: 0 6px 14px rgb(0 0 0 / .45); }
@keyframes cfly { 0% { transform: translate(0, 0) rotate(0) scale(.8); opacity: 0; } 12% { opacity: 1; transform: translate(0, -10px) rotate(var(--rot)) scale(1.05); } 88% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--rot) * -1)) scale(.9); opacity: 0; } }
/* Joker trio (Flipping Jokers, Kachra) */
.trio { display: inline-grid; justify-items: center; gap: 4px; margin-top: 6px; padding: 6px 12px 8px; border-radius: 14px; background: rgb(0 0 0 / .32); border: 1px solid rgb(255 255 255 / .12); }
.trcap { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #ffe08a; }
.trio .aflj .card { --cw: 38px; box-shadow: 0 0 0 2px #ffd34d, 0 0 12px rgb(255 211 77 / .4); }
.trnote { font-size: 11.5px; color: var(--on-felt-muted); font-weight: 600; }
.trio.fresh .aflj { animation: trioflip .6s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(var(--ji) * 130ms); }
@keyframes trioflip { 0% { transform: rotateY(90deg) scale(1.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
.fjbox .trcap { color: #c9a8ff; } .fjbox .aflj .card { box-shadow: 0 0 0 2px #b48bff, 0 0 12px rgb(180 139 255 / .5); }
.kbox { display: inline-grid; justify-items: center; gap: 3px; margin-top: 6px; padding: 6px 14px; border-radius: 12px; background: rgb(0 0 0 / .32); border: 1px solid rgb(255 255 255 / .12); color: var(--on-felt); font-size: 13px; font-weight: 600; }
/* The B*tch */
.btbbox { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 6px 14px 6px 8px; border-radius: 14px; background: linear-gradient(90deg, rgb(226 64 122 / .25), rgb(0 0 0 / .3)); border: 1px solid rgb(255 120 170 / .45); }
.btbcards { display: flex; } .btbcards .card { --cw: 30px; } .btbcards .card + .card { margin-left: -14px; }
.btbtxt { display: grid; text-align: left; line-height: 1.2; } .btbtxt b { color: #ff9ac4; font-size: 13px; letter-spacing: .04em; } .btbtxt small { color: var(--on-felt-muted); font-size: 11px; }
.btbbox.lost { animation: btblost .6s ease-in-out 3; }
@keyframes btblost { 50% { box-shadow: 0 0 0 4px rgb(226 64 122 / .45), 0 0 24px rgb(226 64 122 / .6); } }
/* Kachra keep picker */
.kpick, .kwait { display: grid; justify-items: center; gap: 8px; max-width: 640px; margin: 0 auto; }
.kwait span { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.kchain { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; font-size: 11.5px; font-weight: 700; }
.kchain i { font-style: normal; color: var(--muted); }
.kc { padding: 2px 9px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); }
.kc.done { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.kc.now { color: #fff; background: #129a93; border-color: #129a93; }
.kc.kmuck { color: #c0392b; }
.khint { font-size: 13.5px; text-align: center; }
.kcards { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.kcard { display: grid; justify-items: center; gap: 4px; padding: 6px 6px 4px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel); cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.kcard .card { --cw: 52px; }
.kcard > span { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kcard.on { border-color: #129a93; box-shadow: 0 0 0 3px rgb(18 154 147 / .25); transform: translateY(-6px); }
.kcard.on > span { color: #129a93; }
.kcard:not(.on) .card { opacity: .6; filter: grayscale(1) sepia(1) hue-rotate(130deg) saturate(2.2); }
@media (max-width: 560px) { .kcard .card { --cw: 40px; } .kcards { gap: 5px; } }
.btbwait b { color: #e2407a; }
#actions:has(.kpick), #actions:has(.kwait), #actions:has(.btbwait) { display: block !important; grid-template-columns: none !important; height: auto; max-height: none; border: 0; background: none; box-shadow: none; padding: 0; }
.kpick { width: min(100%, 640px); padding: 12px 14px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 8px 24px rgb(0 0 0 / .12); }
.kcards { flex-wrap: nowrap; }
.kpick #kGo { width: 100%; min-height: 46px; }
.pkbtb, .pkbtb * { text-transform: none !important; }
@media (max-width: 599px) {
  .kpick { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto; z-index: 40; box-shadow: 0 -6px 30px rgb(0 0 0 / .35); }
  .kpick .khint { font-size: 12.5px; }
}
@media (max-width: 599px) {
  .kpick { z-index: 500; padding: 10px 8px 10px; }
  .kcards { gap: 4px; } .kcard { padding: 4px 3px 3px; border-radius: 9px; } .kcard .card { --cw: 38px; } .kcard > span { font-size: 9.5px; letter-spacing: .04em; }
}
.dock:has(.kpick) { position: relative; z-index: 600; }

/* Same button on every seat: yours opens emotes, anyone else's opens throwables */
.fxbtn.thr { background: #e0a020; color: #2b1d02; border-color: #fff2c6; }
@media (hover: hover) { .seat:not(:hover) .fxbtn.thr { opacity: .75; } }

/* Turn timer: no ring. The timer pill is a draining bar (teal → amber → red) with the seconds on it. */
.tring { display: none !important; }
.seat .pill.tbarpill { position: relative; overflow: hidden; isolation: isolate; min-width: 92px; justify-content: center; background: rgb(10 22 24 / .88); color: #fff; border: 1px solid rgb(255 255 255 / .18); }
.tbarpill .tbar { position: absolute; inset: 0; z-index: -1; transform-origin: left center; animation: tbar var(--tt, 30s) linear var(--td, 0ms) both, tbarcol var(--tt, 30s) linear var(--td, 0ms) both; }
@keyframes tbar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes tbarcol { 0%, 45% { background: #129a93; } 72% { background: #d98a1e; } 100% { background: #c4321f; } }
.seat .pill.tbarpill:has(.timer.low) { background: rgb(60 10 10 / .9); }
@media (max-width: 599px) { .seat .pill.tbarpill { min-width: 70px; } }

/* Beat the B*tch: step two */
.btbnote { margin: 4px 16px 0; font-size: 13.5px; } .btbnote b { color: #c2185b; }
.btbgrid .pkopt.on { box-shadow: 0 0 0 3px #e2407a, 0 8px 20px rgb(226 64 122 / .3); transform: translateY(-2px); }
.btbgo { padding: 8px 16px 14px; }

/* Little / Closest-to: a dropdown and a button instead of a row of chips */
.pkdrop { display: flex; gap: 6px; padding: 6px 10px 0; align-items: center; }
.pkdrop select { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ivory); font: inherit; font-weight: 800; font-size: 14px; }
.pkdrop button { padding: 6px 12px; border-radius: 10px; border: 0; background: var(--a); color: #fff; font-weight: 800; font-size: 13px; cursor: pointer; }

/* Phones: fewer buttons. Top-Up, Break, Exit, Ledger and light/dark live in the Options menu; chat starts as a button. */
.phoneonly { display: none !important; }
.menusep { height: 1px; background: var(--line); margin: 4px 6px; }
.menuitem.danger { color: var(--bad); }
@media (max-width: 599px) {
  .phoneonly:not([hidden]) { display: flex !important; }
  .menusep.phoneonly { display: block !important; }
  .deskonly, .bar .seatc, #btnMode { display: none !important; }
  .chatarea .chatbtns { justify-content: center; gap: 8px; }
  .chatarea .chatbtns .cbx { flex: 0 0 auto; padding: 6px 14px; }
  /* An open chat floats over the bottom of the table instead of pushing everything up */
  body.chatopen .chatarea .chatbox { position: fixed; left: 8px; right: 8px; bottom: calc(52px + env(safe-area-inset-bottom, 0px)); z-index: 300; max-height: 46vh; box-shadow: 0 -8px 30px rgb(0 0 0 / .3); }
  body.chatopen .chatarea .chatfeed { max-height: 30vh; overflow-y: auto; }
  .chatshow { position: relative; }
  .chatshow.has::after { content: ""; position: absolute; top: 3px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: #e2402f; }
}
.pkdrop select { width: auto; min-width: 74px; flex: 1 1 74px; padding: 6px 4px; }
.pkdrop button { flex: none; }
.pkwarn { display: block; margin: 6px 10px 0; padding: 5px 8px; border-radius: 8px; background: #fff3d6; border: 1px solid #f0b53a; color: #7a4a00; font-size: 11px; font-weight: 700; line-height: 1.3; text-align: left; }
.vwarn { margin: 8px 16px 0; padding: 8px 12px; border-radius: 10px; background: #fff3d6; border: 1px solid #f0b53a; color: #7a4a00; font-size: 13px; font-weight: 700; }
/* Flying cards and throws pass under pop-ups; the game name stays above bet chips */
.fxlayer { z-index: 39; }
.emote-pop { z-index: 2; }
.felt .center { z-index: 4; } .center .vchip { position: relative; }

/* Ding Dong */
.pk-dingdong { --a: #8a5a00; --b: #f0b53a; }
.ddboard { display: inline-grid; justify-items: center; gap: 4px; margin-top: 6px; padding: 6px 14px 8px; border-radius: 14px; background: rgb(0 0 0 / .32); border: 1px solid rgb(255 255 255 / .12); }
.ddcards { display: flex; gap: 6px; } .ddcards .card { --cw: 42px; }
.ddreveal { display: grid; gap: 4px; margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: rgb(0 0 0 / .45); animation: tptag .4s ease-out both; }
.ddrow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--on-felt); }
.ddrow b { min-width: 52px; text-align: left; } .ddrow .card { --cw: 24px; } .ddrow > span { opacity: .8; }
.ddrow.lost { color: #ffb4aa; } .ddrow.lost .card { box-shadow: 0 0 0 2px #e2402f; }
.ddrow em { font-style: normal; font-weight: 900; color: #fff; background: #c4321f; padding: 1px 8px; border-radius: 99px; font-size: 11px; }
.ddlives { display: inline-flex; gap: 2px; padding: 2px 8px; border-radius: 99px; background: rgb(10 20 22 / .85); border: 1px solid rgb(255 255 255 / .18); }
.ddlives i { font-style: normal; font-size: 14px; color: rgb(255 255 255 / .25); line-height: 1.1; }
.ddlives i.on { color: #ff4d5e; text-shadow: 0 0 6px rgb(255 77 94 / .6); }
.ddlives.dead { opacity: .6; }
.ddding { font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #3a2704; background: linear-gradient(180deg, #ffe39a, #e0ae3e); padding: 2px 8px; border-radius: 99px; }
.dingpop { position: absolute; left: 50%; top: -14px; z-index: 10; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 99px; font-size: 16px; font-weight: 900; color: #3a2704; background: linear-gradient(180deg, #ffe39a, #e0ae3e); border: 2px solid #fff6d6; white-space: nowrap; pointer-events: none; transform: translate(-50%, -100%); animation: pickpop 2.2s ease-out both; animation-delay: var(--bd); }
.dingpop i { font-style: normal; display: inline-block; animation: bellring .25s ease-in-out 6 alternate; }
@keyframes bellring { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
#actions:has(.ddpick) { display: block !important; grid-template-columns: none !important; height: auto; max-height: none; border: 0; background: none; box-shadow: none; padding: 0; }
.dock:has(.ddpick) { position: relative; z-index: 600; }
.ddpick { width: min(100%, 560px); margin: 0 auto; display: grid; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 8px 24px rgb(0 0 0 / .12); }
.ddrowsel { display: flex; gap: 8px; align-items: center; justify-content: center; }
.ddlbl { width: 46px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: right; }
.ddpick .kcard .card { --cw: 46px; } .ddpick .kcard:not(.on) .card { opacity: 1; filter: none; }
.ddpick .kcard.ddb.on { border-color: #e0ae3e; box-shadow: 0 0 0 3px rgb(224 174 62 / .3); } .ddpick .kcard.ddb.on > span { color: #b07a10; }
.ddbtns { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; }
.ddbtns .act { min-height: 44px; }
.ddpick .link { justify-self: center; font-size: 13px; }
@media (max-width: 599px) { .ddpick { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto; z-index: 500; box-shadow: 0 -6px 30px rgb(0 0 0 / .35); } .ddpick .kcard .card { --cw: 40px; } .ddbtns .act { font-size: 13px; padding: 6px; } }
.felt .seat { z-index: 5; } .felt .seat.turn { z-index: 6; } .felt .seat.win { z-index: 7; }

/* The squeeze */
.peelwrap { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 16px; background: radial-gradient(80% 60% at 50% 45%, rgb(12 40 30 / .92), rgb(4 10 8 / .96)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fadein .25s ease-out both; touch-action: none; }
.peelwrap.out { animation: peelout .3s ease-in both; }
@keyframes peelout { to { opacity: 0; } }
.peelbox { display: grid; justify-items: center; gap: 14px; color: #f3efe4; text-align: center; }
.peeltitle { font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; background: linear-gradient(180deg, #fff3c9, #d9a940); -webkit-background-clip: text; background-clip: text; color: transparent; }
.peelsub { font-size: 13px; opacity: .7; margin-top: -8px; }
.peelrow { --pn: 3; --pg: 18px; display: flex; gap: var(--pg); justify-content: center; }
.pc { --pcw: clamp(56px, min(24vw, calc((100vw - 64px - (var(--pn) - 1) * var(--pg)) / var(--pn))), 130px); position: relative; width: var(--pcw); height: calc(var(--pcw) * 1.4); cursor: grab; user-select: none; touch-action: none; animation: pcin .5s cubic-bezier(.2,1.3,.4,1) both; filter: drop-shadow(0 10px 18px rgb(0 0 0 / .5)); }
.pc:nth-child(2) { animation-delay: .08s; } .pc:nth-child(3) { animation-delay: .16s; } .pc:nth-child(4) { animation-delay: .24s; }
@keyframes pcin { from { transform: translateY(40px) scale(.8); opacity: 0; } }
.pc.drag { cursor: grabbing; }
.pc .pcface, .pc .pcback { position: absolute; inset: 0; }
.pc .card { --cw: var(--pcw); margin: 0; box-shadow: none; }
.pcflap { position: absolute; inset: 0; border-radius: calc(var(--pcw) * .12); background: linear-gradient(135deg, #f6f1e4, #d8d0bd 60%, #b9b09a); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); pointer-events: none; }
.pcshade { position: absolute; inset: 0; pointer-events: none; border-radius: 8px; }
.pc:not(.peeling) .pcflap, .pc:not(.peeling) .pcshade { visibility: hidden; }
.pchint { position: absolute; right: 6px; bottom: 4px; font-size: 18px; font-weight: 900; color: #ffe39a; text-shadow: 0 1px 3px #000; animation: pchint 1.2s ease-in-out infinite; pointer-events: none; }
@keyframes pchint { 50% { transform: translate(-4px, -4px); opacity: .5; } }
.pc.peeling .pchint, .pc.open .pchint { display: none; }
.pc.open .pcback, .pc.open .pcflap, .pc.open .pcshade { display: none; }
.pc.open { cursor: default; animation: pcopen .5s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes pcopen { 40% { transform: scale(1.08) rotate(-2deg); } 100% { transform: none; } }
.peellbl { min-height: 30px; } .peellbl b { font-size: 22px; color: #7ff0b4; animation: fostamp .5s cubic-bezier(.2,1.6,.4,1) both; display: inline-block; transform: none; position: static; opacity: 1; }
.peelbtns { display: flex; gap: 10px; } .peelbtns.busy { opacity: .4; pointer-events: none; }
.peelbtns button { min-width: 130px; }
.peelbtns .ghost { color: #f3efe4; border-color: rgb(255 255 255 / .3); background: rgb(255 255 255 / .06); }
.peelskip { font-size: 12px; opacity: .7; display: inline-flex; gap: 6px; align-items: center; }
@media (max-width: 599px) { .peelrow { --pg: 10px; } .peelbtns button { min-width: 0; padding: 10px 16px; } }
.vwho { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; min-height: 26px; }
.vwho .vav { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; overflow: hidden; box-shadow: 0 0 0 2px var(--panel), 0 2px 4px rgb(0 0 0 / .25); animation: fostamp .35s cubic-bezier(.2,1.6,.4,1) both; transform: none; position: static; opacity: 1; }
.vwho .vav svg { width: 100%; height: 100%; } .vwho .vav .emo { font-size: 15px; }
body.peekhold .seat.me .mypeek .hand { opacity: 1; transform: none; }
body.peekhold .seat.me .mypeek .mphint { opacity: 0; }
.holdsee { margin-top: 6px; user-select: none; -webkit-user-select: none; touch-action: none; }
@media (hover: hover) { .holdsee { display: none; } }

/* Side show loser: cards into the trash can */
.binfx { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 9; pointer-events: none; }
.binfx .bin { position: absolute; left: -24px; top: -28px; width: 48px; height: 56px; transform: translate(var(--tx), var(--ty)); animation: binin 4.4s ease-out both; animation-delay: var(--md); overflow: visible; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .45)); }
.binfx .binbody { fill: #6b7680; stroke: #3c444b; stroke-width: 2; }
.binfx .binlines { stroke: #47505a; stroke-width: 2; fill: none; }
.binfx .binlid rect { fill: #7d8892; stroke: #3c444b; stroke-width: 2; }
.binfx .binlid { transform-box: view-box; transform-origin: 44px 14px; animation: binlid 4.4s ease-in-out both; animation-delay: var(--md); }
@keyframes binin { 0% { opacity: 0; transform: translate(var(--tx), calc(var(--ty) + 20px)) scale(.4); } 10% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1.05); } 14% { transform: translate(var(--tx), var(--ty)) scale(1); } 52% { transform: translate(var(--tx), var(--ty)); } 55% { transform: translate(calc(var(--tx) - 3px), var(--ty)) rotate(-6deg); } 58% { transform: translate(calc(var(--tx) + 3px), var(--ty)) rotate(5deg); } 61% { transform: translate(var(--tx), var(--ty)); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--tx), calc(var(--ty) + 10px)) scale(.8); } }
@keyframes binlid { 0%, 14% { transform: none; } 22%, 46% { transform: rotate(75deg); } 52%, 100% { transform: none; } }
.binfx .bincards i { position: absolute; left: -12px; top: -60px; width: 24px; height: 34px; border-radius: 4px; background: repeating-linear-gradient(45deg, var(--back-1) 0 3px, var(--back-2) 3px 6px); border: 2px solid #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .4); opacity: 0; animation: binfall 4.4s cubic-bezier(.5,0,.8,.6) both; animation-delay: var(--md); }
.binfx .bincards i:nth-child(1) { --r: -25deg; --x: -8px; } .binfx .bincards i:nth-child(2) { --r: 15deg; --x: 0px; --dl: 120ms; } .binfx .bincards i:nth-child(3) { --r: 40deg; --x: 8px; }
@keyframes binfall { 0%, 18% { opacity: 0; transform: translate(0, -20px) rotate(0); } 22% { opacity: 1; transform: translate(0, -10px) rotate(calc(var(--r) / 2)); } 46% { opacity: 1; transform: translate(calc(var(--tx) + var(--x)), calc(var(--ty) + 34px)) rotate(var(--r)) scale(.7); } 50%, 100% { opacity: 0; transform: translate(calc(var(--tx) + var(--x)), calc(var(--ty) + 44px)) rotate(var(--r)) scale(.5); } }
/* The B*tch: a small tag tucked inside the table rail */
.felt > .btbbox { position: absolute; left: 50%; top: 73%; transform: translate(-50%, -50%); z-index: 3; margin: 0; padding: 3px 9px 3px 4px; gap: 6px; border-radius: 10px; background: rgb(40 8 22 / .78); }
.felt > .btbbox .btbcards .card { --cw: 17px; } .felt > .btbbox .btbcards .card + .card { margin-left: -9px; }
.felt > .btbbox .btbtxt b { font-size: 10.5px; } .felt > .btbbox .btbtxt small { font-size: 9.5px; }
@media (max-width: 599px) { .felt > .btbbox { top: 30%; } .felt > .btbbox .btbtxt small { display: none; } }
.sdrow em.lost { background: #6b7680; }
.tpcard { touch-action: none; }
.tpcard.dragging { opacity: .35; }
.tpghost { position: fixed; z-index: 700; transform: translate(-50%, -60%) rotate(-6deg) scale(1.1); pointer-events: none; filter: drop-shadow(0 10px 16px rgb(0 0 0 / .45)); }
.tplr.tpdrop, .tppool.tpdrop { outline: 2px dashed #129a93; outline-offset: 2px; background: rgb(18 154 147 / .08); border-radius: 10px; }

/* Nothing covers your own cards: your seat sits above every other seat, even the one whose turn it is. */
.felt .seat.me { z-index: 8; }
@media (max-width: 599px) {
  .seat { width: 104px; }
  .seat .who { padding: 3px 9px 3px 3px; gap: 5px; }
  .seat .av { width: 29px; height: 29px; }
  .seat .nm { font-size: 12.5px; } .seat .ch { font-size: 12.5px; }
  .seat.turn .who { transform: scale(1.05); }
  @keyframes turnhalo2 { 0%, 100% { box-shadow: 0 0 0 3px rgb(63 224 207 / .35), 0 0 16px 4px rgb(63 224 207 / .35); } 50% { box-shadow: 0 0 0 4px rgb(63 224 207 / .45), 0 0 22px 6px rgb(63 224 207 / .45); } }
  .seat.me .hand .card { --cw: 36px; }
  .eyetag { font-size: 9px; padding: 2px 6px 2px 4px; }
  .seat .pill.tbarpill { min-width: 58px; font-size: 12px; }
}
/* Collapsible turn panels (Kachra keep, Ding Dong swap): hide the panel to check the table, tap the bar to bring it back */
.pcollapse { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.pcollapse button { border: 1px solid var(--line); background: var(--panel-2); border-radius: 99px; padding: 3px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--ivory); }
.pmini { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: min(100%, 560px); margin: 0 auto; padding: 10px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 -4px 18px rgb(0 0 0 / .18); font-weight: 700; font-size: 14px; }
.pmini button { border: 0; border-radius: 99px; padding: 6px 14px; background: #129a93; color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
@media (max-width: 599px) { .pmini { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto; z-index: 500; } }
#actions:has(.pmini) { display: block !important; grid-template-columns: none !important; border: 0; background: none; box-shadow: none; padding: 0; }
.dock:has(.pmini) { position: relative; z-index: 600; }
/* Ding Dong showdown: compact, fits on the table */
.ddreveal { padding: 5px 8px; gap: 2px; max-width: 100%; }
.ddrow { gap: 5px; font-size: 11px; } .ddrow b { min-width: 0; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ddrow .card { --cw: 17px; } .ddrow em { font-size: 9.5px; padding: 0 6px; } .ddrow > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.ddboard { padding: 4px 10px 6px; } .ddcards .card { --cw: 34px; }
@media (max-width: 599px) { .ddcards .card { --cw: 28px; } .ddboard .trnote { display: none; } .ddrow > span { display: none; } }
/* Showdown list: compact, scrolls inside the table if many players are left */
.sdlist { max-height: min(38vh, 280px); overflow-y: auto; overflow-x: hidden; } /* a fixed cap: a percentage of the centre column clipped rows on laptops */
.sdrow .card { --cw: 22px; }
@media (max-width: 599px) {
  .sdlist { gap: 3px; max-height: 40vh; }
  .sdrow { font-size: 11px; padding: 3px 7px; gap: 5px; border-radius: 9px; grid-template-columns: auto 1fr auto; }
  .sdrow b { max-width: 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sdrow .card { --cw: 17px; } .sdcards > span { display: none; } .sdrow em { font-size: 9px; padding: 1px 6px; }
  .sdcap { font-size: 9.5px; } .sdtog button { font-size: 9px; padding: 2px 7px; }
}

/* Accounts */
.homeacct { display: grid; justify-items: start; }
.homeacct:has(.acsign) { justify-items: stretch; }
.homeacct:empty { display: none; }
.acsign { display: grid; gap: 8px; width: 100%; }
.acsign small { font-size: 12.5px; color: var(--h-muted, var(--muted)); line-height: 1.45; }
.gbtn { min-height: 44px; width: 100%; display: flex; color-scheme: light; } /* light: Google's frame stays see-through (no white box) on dark pages */
.acchip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 2px 8px rgb(0 0 0 / .06); }
.acpic { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; overflow: hidden; flex: none; }
.acpic.big { width: 56px; height: 56px; }
.acwho { display: grid; text-align: left; line-height: 1.2; } .acwho b { font-size: 14px; } .acwho small { font-size: 12px; color: var(--muted); }
.achead { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .achead h3 { margin: 0; }
.mbtns .danger { color: var(--bad); }
.avopt { position: relative; }
.avopt.taken { opacity: .35; filter: grayscale(1); cursor: not-allowed; }
.avopt.taken em { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--panel); padding: 0 4px; border-radius: 4px; color: var(--muted); }

/* ---------- Card Color Bust: the boom ---------- */
body.shake .app, body.shake #tableview { animation: scrshake .62s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes scrshake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(5px, -3px); } 30%, 50%, 70% { transform: translate(-9px, 4px) rotate(-.4deg); } 40%, 60% { transform: translate(9px, -4px) rotate(.4deg); } }
.bzboom { position: fixed; inset: 0; z-index: 80; pointer-events: none; display: grid; place-items: center; }
.bzboom i { position: absolute; width: 40vmin; height: 40vmin; border-radius: 50%; background: radial-gradient(circle, #fff7d6 0, #ffb347 22%, #e2483b 45%, rgb(226 72 59 / 0) 70%); animation: bzblast 1.1s ease-out both; }
.bzboom b { position: relative; font: 900 clamp(48px, 16vw, 110px)/1 Outfit, system-ui, sans-serif; letter-spacing: .08em; color: #fff; -webkit-text-stroke: 3px #8e1a12; text-shadow: 0 6px 0 #8e1a12, 0 0 40px #ff6a3d; animation: bzword 1.3s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes bzblast { 0% { transform: scale(.1); opacity: 1; } 60% { opacity: .95; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes bzword { 0% { transform: scale(.2) rotate(-14deg); opacity: 0; } 25% { transform: scale(1.25) rotate(4deg); opacity: 1; } 45% { transform: scale(1) rotate(-3deg); } 80% { opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }

/* ---------- Table banners: royalty, re-ante, a lost life, a post ---------- */
.tblban { position: fixed; left: 50%; top: 38%; z-index: 70; transform: translate(-50%, -50%); pointer-events: none; display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: 16px 26px 18px; border-radius: 20px; color: #fff; min-width: min(320px, 86vw); max-width: 92vw;
  background: linear-gradient(160deg, rgb(28 22 40 / .96), rgb(14 12 22 / .96)); border: 1.5px solid var(--bc, #ffd34d);
  box-shadow: 0 24px 60px rgb(0 0 0 / .6), 0 0 0 6px rgb(255 255 255 / .03), 0 0 40px var(--bg2, rgb(255 211 77 / .35));
  animation: banin .5s cubic-bezier(.2,1.4,.4,1) both, banout .45s ease-in both; animation-delay: 0s, var(--hold, 2.6s); }
.tblban .bi { font-size: 40px; line-height: 1; filter: drop-shadow(0 4px 10px rgb(0 0 0 / .5)); animation: bibob 1.2s ease-in-out infinite alternate; }
.tblban .bt { font: 800 22px/1.1 Outfit, system-ui, sans-serif; letter-spacing: .02em; color: var(--bc, #ffd34d); }
.tblban .bs { font-size: 14px; color: #e9e3f2; line-height: 1.35; }
.tblban .bs b { color: #fff; }
.tblban .bchips { display: flex; gap: 4px; margin-top: 4px; }
.tblban .bchips i { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #fff 0 22%, var(--cc, #e2483b) 24% 62%, #fff 64% 70%, var(--cc, #e2483b) 72%); box-shadow: 0 2px 4px rgb(0 0 0 / .5); animation: bchip .7s cubic-bezier(.2,1.5,.4,1) both; animation-delay: calc(var(--i) * 70ms + .3s); }
.tblban.royal { --bc: #ffd34d; --bg2: rgb(255 211 77 / .45); }
.tblban.reante { --bc: #7cc8ff; --bg2: rgb(124 200 255 / .4); }
.tblban.life { --bc: #ff6b6b; --bg2: rgb(255 107 107 / .4); }
.tblban.post { --bc: #ff9f43; --bg2: rgb(255 159 67 / .4); }
.tblban.redeal { --bc: #b48cff; --bg2: rgb(180 140 255 / .4); }
@keyframes banin { from { transform: translate(-50%, -40%) scale(.6); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes banout { to { transform: translate(-50%, -60%) scale(.9); opacity: 0; } }
@keyframes bibob { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-5px) rotate(6deg); } }
@keyframes bchip { from { transform: translateY(-30px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.shake .app, body.shake #tableview, .bzboom i, .tblban .bi { animation: none; } }

/* Non-host table settings: the games list folds away */
.tsfold > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.tsfold > summary::-webkit-details-marker { display: none; }
.tsfold > summary h4 { margin: 0; }
.tsfold .tscount { min-width: 24px; height: 22px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; background: rgb(255 255 255 / .1); color: var(--text, #fff); }
.tsfold .chev { width: 18px; height: 18px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; opacity: .7; }
.tsfold[open] .chev { transform: rotate(180deg); }
.tsfold[open] > summary { margin-bottom: 12px; }
.royset { border: 1px solid rgb(255 255 255 / .12); border-radius: 12px; padding: 4px 12px 12px; margin: 0; min-width: 0; }
.royset legend { padding: 0 4px; }
.roygrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 420px) { .roygrid { grid-template-columns: 1fr 1fr; } }
.flychip { display: block; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #fff 0 22%, var(--cc) 24% 62%, #fff 64% 70%, var(--cc) 72%); box-shadow: 0 2px 5px rgb(0 0 0 / .5); }

/* Ding Dong: the few seconds after a swap */
.dingwin { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: stretch; width: 100%; max-width: 520px; margin: 0 auto; }
.dingbig { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 18px; border: 0; border-radius: 16px; cursor: pointer;
  color: #2b1d00; background: linear-gradient(180deg, #ffe27a, #f2b417); box-shadow: 0 6px 0 #a87500, 0 10px 24px rgb(242 180 23 / .45); animation: dingpulse 1s ease-in-out infinite alternate; }
.dingbig:active { transform: translateY(3px); box-shadow: 0 3px 0 #a87500, 0 6px 14px rgb(242 180 23 / .4); }
.dingbig .bell { font-size: 30px; display: inline-block; transform-origin: 50% 10%; animation: bellring .9s ease-in-out infinite; }
.dingbig .dt { display: grid; text-align: left; }
.dingbig b { font: 900 22px/1 Outfit, system-ui, sans-serif; letter-spacing: .02em; }
.dingbig small { font-size: 12px; font-weight: 700; opacity: .75; }
.dingbig .dingbar { position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: #7a4b00; transform-origin: left; animation: dingbar var(--ms) linear both; }
.dingwin .act { display: grid; place-items: center; align-content: center; gap: 2px; min-width: 110px; }
.dingwin .act small { font-size: 11px; opacity: .7; font-weight: 600; }
.dingbig:disabled { animation: none; filter: grayscale(.4) brightness(.85); }
@keyframes dingpulse { to { box-shadow: 0 6px 0 #a87500, 0 10px 34px rgb(255 211 77 / .8); } }
@keyframes bellring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(18deg); } 30% { transform: rotate(-16deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } }
@keyframes dingbar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.nogapstamp { display: inline-block; margin-top: 8px; padding: 4px 14px; border-radius: 8px; border: 2px solid #ff6b6b; color: #ffb4b4; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; transform: rotate(-4deg); animation: pickslam 1.2s ease-out both; }
input.bamt.rbin { -moz-appearance: textfield; }
input.bamt.rbin::-webkit-outer-spin-button, input.bamt.rbin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Pot pile: smaller again, and a choice of chip designs (Table & Background) */
.pile .stack { width: 13px; height: calc(4.5px + (var(--c) - 1) * 2.3px); }
.pile .stack i { width: 13px; height: 4.5px; bottom: calc(var(--k) * 2.3px); }
@media (max-width: 599px) {
  .pile .stack { width: 11px; height: calc(4px + (var(--c) - 1) * 2px); }
  .pile .stack i { width: 11px; height: 4px; bottom: calc(var(--k) * 2px); }
}
.chsw { height: 78px; border-radius: 9px; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 60%, #2f6a4a, #173826); }
.chsw .pile { transform: scale(1.6); }
[data-chips="casino"] .pile .stack i { background-image: repeating-linear-gradient(90deg, #fff 0 1.6px, transparent 1.6px 4.2px) !important; box-shadow: inset 0 -1px 0 rgb(0 0 0 / .45), 0 0 0 .6px #111; }
[data-chips="casino"] .pile .stack.c0 i { --cc: #d61f1f; } [data-chips="casino"] .pile .stack.c1 i { --cc: #111; } [data-chips="casino"] .pile .stack.c2 i { --cc: #0b7a3e; }
[data-chips="casino"] .pile .stack.c3 i { --cc: #d61f1f; } [data-chips="casino"] .pile .stack.c4 i { --cc: #111; } [data-chips="casino"] .pile .stack.c5 i { --cc: #0b7a3e; }
[data-chips="gold"] .pile .stack i { background-color: #e0b13a !important; background-image: linear-gradient(180deg, #fff3b0 0 30%, #d9a520 31% 70%, #8a6410 71%) !important; box-shadow: 0 0 0 .5px #6b4a00; }
[data-chips="gold"] .pile .stack.c1 i, [data-chips="gold"] .pile .stack.c4 i { background-image: linear-gradient(180deg, #f4f4f4 0 30%, #bfc3c7 31% 70%, #6d7378 71%) !important; box-shadow: 0 0 0 .5px #4a4f53; }
[data-chips="mono"] .pile .stack i { background-image: repeating-linear-gradient(90deg, transparent 0 2.4px, var(--mo2) 2.4px 3.8px) !important; }
[data-chips="mono"] .pile .stack:nth-child(odd) i { --cc: #f4f2ec; --mo2: #111; }
[data-chips="mono"] .pile .stack:nth-child(even) i { --cc: #141414; --mo2: #f4f2ec; }
[data-chips="neon"] .pile .stack i { background-image: none !important; box-shadow: 0 0 4px var(--cc), inset 0 -1px 0 rgb(0 0 0 / .3); }
[data-chips="neon"] .pile .stack.c0 i { --cc: #ff2bd6; } [data-chips="neon"] .pile .stack.c1 i { --cc: #22e6ff; } [data-chips="neon"] .pile .stack.c2 i { --cc: #6dff4a; }
[data-chips="neon"] .pile .stack.c3 i { --cc: #ffe600; } [data-chips="neon"] .pile .stack.c4 i { --cc: #9b5cff; } [data-chips="neon"] .pile .stack.c5 i { --cc: #ff7a1a; }

/* When do variations start? */
.vshead { display: flex; gap: 14px; align-items: flex-start; }
.vshead h3 { margin: 0 0 4px; }
.vshead p { margin: 0; }
.vsic { font-size: 34px; line-height: 1; filter: drop-shadow(0 4px 8px rgb(0 0 0 / .35)); animation: bibob 1.6s ease-in-out infinite alternate; }
.vsstrip { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin: 16px 0 14px; padding: 12px; border-radius: 14px; background: radial-gradient(ellipse at 50% 30%, #2f6a4a, #163423); box-shadow: inset 0 2px 10px rgb(0 0 0 / .4); min-height: 58px; align-items: center; }
.vsstrip .vp { width: 26px; height: 36px; border-radius: 5px; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; animation: vpin .35s cubic-bezier(.2,1.5,.4,1) both; animation-delay: calc(var(--i) * 35ms); }
.vsstrip .vp.cl { background: #f4f1e8; color: #333; box-shadow: 0 2px 4px rgb(0 0 0 / .4); }
.vsstrip .vp.vr { background: linear-gradient(160deg, #a066d6, #5b2a86); color: #ffd34d; font-size: 15px; box-shadow: 0 2px 6px rgb(122 63 163 / .6); }
@keyframes vpin { from { transform: translateY(-12px) rotate(-12deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.vsopts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vsopt { text-align: left; display: grid; gap: 3px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: inherit; cursor: pointer; transition: transform .12s, border-color .15s, box-shadow .15s, background .15s; }
.vsopt:hover { transform: translateY(-1px); border-color: var(--brass); }
.vsopt small { color: var(--muted); font-size: 12px; padding-left: 22px; }
.vsr { display: flex; align-items: center; gap: 8px; }
.vsdot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); flex: none; transition: all .15s; }
.vsopt[aria-pressed="true"] { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 12%, var(--panel-2)); box-shadow: 0 0 0 1px var(--brass), 0 8px 18px rgb(0 0 0 / .25); }
.vsopt[aria-pressed="true"] .vsdot { border-color: var(--brass); background: var(--brass); box-shadow: inset 0 0 0 2px var(--panel-2); }
.vsopt[aria-pressed="true"] b { color: var(--brass); }
.vscustom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 8px 12px; border-radius: 12px; border: 1px dashed var(--line); font-size: 13px; color: var(--muted); }
.vsstep { display: flex; align-items: center; gap: 8px; }
.vsstep b { min-width: 26px; text-align: center; font-size: 18px; color: var(--text, inherit); }
#chGo { display: grid; gap: 1px; line-height: 1.15; }
#chGo small { font-size: 11px; font-weight: 600; opacity: .8; }

/* Someone wants to sit */
.askcard { display: grid; gap: 14px; }
.askmap { position: relative; height: 120px; margin: -4px 0 0; }
.askmap .amfelt { position: absolute; inset: 18px 14%; border-radius: 999px; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--felt) 88%, white 8%), var(--felt) 50%, var(--felt-deep) 100%); border: 4px solid var(--rim-1); box-shadow: 0 3px 0 var(--rim-2), inset 0 3px 12px rgb(0 0 0 / .5); } /* the host's own table colours */
.amseat { position: absolute; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: var(--muted); background: var(--panel-2); border: 1.5px dashed var(--line); overflow: hidden; }
.amseat svg, .amseat img { width: 100%; height: 100%; }
.amseat.full { border-style: solid; border-color: rgb(255 255 255 / .25); background: #3a3348; color: #fff; font-size: 12px; }
.amseat.want { width: 34px; height: 34px; border: 2px solid var(--brass); background: #3a3348; font-size: 16px; box-shadow: 0 0 0 0 var(--brass); animation: askping 1.4s ease-out infinite; z-index: 1; }
@keyframes askping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brass) 70%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.askwho { display: flex; align-items: center; gap: 14px; }
.askwho h3 { margin: 0; font-size: 20px; }
.asksub { margin: 2px 0 0; color: var(--muted); }
.askseat { color: var(--brass); }
.askav { animation: vpin .45s cubic-bezier(.2,1.5,.4,1) both; }
.askfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.askfacts span { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.askfacts small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.askfacts b { font-size: 15px; }
.askmore { margin: 0; font-size: 13px; color: var(--muted); }
.askbtns .primary { min-width: 120px; }
.tstile.wide { grid-column: 1 / -1; }
.tstile.wide .v, .tstile.wide .k { white-space: normal; overflow: visible; }
.actions > .dingwin { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
@media (max-width: 599px) { .dingbig { padding: 12px 10px; gap: 8px; } .dingbig .bell { font-size: 24px; } .dingbig b { font-size: 19px; } .dingwin .act { min-width: 0; } }
.felt .seat.win:not(.me) { z-index: 9; } /* the winning hand is never hidden behind another seat */

/* The game's name in the middle of the table */
.center > .cline.vname { display: grid; justify-items: center; gap: 2px; white-space: normal; max-width: 100%; text-align: center; font-size: clamp(17px, 2.4vw, 26px); }
.center > .cline.vname small { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 10.5px; letter-spacing: .26em; color: var(--on-felt-muted); }
.center > .cline.vname small i { width: 18px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.center > .cline.vname small i:last-child { transform: scaleX(-1); }
.center > .cline.vname b { font-size: calc(1em * var(--vk, 1)); line-height: 1.05; letter-spacing: .01em; text-wrap: balance; max-width: 15em;
  background: linear-gradient(180deg, #fff 0%, #fff6dc 45%, #f3cf73 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / .55)); text-shadow: none; }
.center > .cline.vname .vtag { font-style: normal; font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #ff9cc4; padding: 2px 9px; border-radius: 999px; background: rgb(226 64 122 / .2); border: 1px solid rgb(255 120 170 / .45); text-shadow: none; margin-top: 2px; }
@media (max-width: 599px) { .center > .cline.vname { font-size: 20px; } .center > .cline.vname b { max-width: 11em; } .center > .cline.vname small { font-size: 9.5px; } }
/* The B*tch's cards sit under the name, in line, never on top of anything */
.center > .btbbox { position: static; transform: none; margin: 2px 0 0; padding: 3px 10px 3px 5px; gap: 7px; border-radius: 10px; background: rgb(40 8 22 / .6); }
.center > .btbbox .btbcards .card { --cw: 16px; } .center > .btbbox .btbcards .card + .card { margin-left: -8px; }
.center > .btbbox .btbtxt b { font-size: 10.5px; } .center > .btbbox .btbtxt small { font-size: 9.5px; }
.center > .cline.vname:has(+ .btbbox) .vtag { display: none; }
@media (max-width: 599px) { .center > .btbbox .btbtxt small { display: none; } }

/* Card Color Bust inside the squeeze: the bust card gets stamped as it turns over */
.pc.pcbust .pcface::after { content: ""; position: absolute; inset: 0; border-radius: 8px; background:
  linear-gradient(45deg, transparent 45%, #e2483b 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #e2483b 45% 55%, transparent 55%);
  box-shadow: inset 0 0 0 3px #e2483b; animation: pcx .45s cubic-bezier(.2,1.6,.4,1) both; }
.pc.pcbust { filter: drop-shadow(0 0 14px rgb(226 72 59 / .8)); }
@keyframes pcx { from { transform: scale(1.6); opacity: 0; } to { transform: none; opacity: .9; } }
.peelbox.bzshake .peelrow { animation: scrshake .55s cubic-bezier(.36,.07,.19,.97) both; }
.peellbl .pbust { color: #ff6b5b; font-size: 28px; letter-spacing: .1em; text-transform: uppercase; }
.peellbl span { display: block; margin-top: 4px; font-size: 13.5px; color: #f3d6d2; max-width: 300px; }
.vsstrip { background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--felt) 88%, white 8%), var(--felt) 55%, var(--felt-deep)); }
.chsw { background: radial-gradient(ellipse at 50% 60%, var(--felt), var(--felt-deep)); }

/* Dealing: the middle stays empty but for the game's name; the table's own cards are pitched in one by one afterwards */
.center.cdeal { transform: translate(-50%, -84%); }
@media (max-width: 599px) { .center.cdeal { transform: translate(-50%, -96%); } }
.tdc { animation: tdealin .45s cubic-bezier(.2,.8,.3,1) both; animation-delay: var(--td, 0ms); }
@keyframes tdealin { from { opacity: 0; transform: translate(0, 70px) rotate(-25deg) scale(.45); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
/* The dealer turns towards the seat being dealt to, one card per swing */
.dealer-guy svg { transform: scaleX(var(--flip, 1)) rotate(calc(var(--tilt, 0deg) * var(--flip, 1))); transform-origin: 50% 92%; transition: transform .14s ease-out; }
.dealer-guy .dg-arm { animation-duration: calc(var(--step, 220ms) / 2); }
.dealer-guy .dg-card, .dealer-guy .dg-deck { animation-duration: var(--step, 440ms); }
.dealer-guy[data-face="mid"] .dg-arm { animation-duration: 150ms; }
.bdealing { display: block; margin-top: 70px; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--on-felt-muted); }

/* Avatar: the emoji picker */
.emojibtn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: inherit; font-weight: 700; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.emojibtn .emojicur { font-size: 22px; line-height: 1; }
.emojibtn:hover, .emojibtn[aria-expanded="true"] { border-color: var(--brass); }
.emojibtn.on { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.emojipane { margin-top: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); overflow: hidden; }
.emojitabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.emojitabs button { flex: 1 0 auto; min-width: 38px; font-size: 20px; padding: 5px; border: 0; border-radius: 9px; background: none; cursor: pointer; opacity: .55; transition: opacity .15s, background .15s; }
.emojitabs button[aria-selected="true"] { opacity: 1; background: var(--panel); box-shadow: 0 1px 4px rgb(0 0 0 / .15); }
.emojigrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 2px; padding: 6px; max-height: 196px; overflow-y: auto; }
.emojigrid .emo { font-size: 24px; line-height: 1; padding: 7px 0; border: 0; border-radius: 9px; background: none; cursor: pointer; transition: transform .1s, background .1s; }
.emojigrid .emo:hover { background: var(--panel); transform: scale(1.15); }
.emojigrid .emo[aria-pressed="true"] { background: color-mix(in srgb, var(--brass) 25%, transparent); box-shadow: inset 0 0 0 2px var(--brass); }
.emojigrid .emo.taken { opacity: .25; cursor: not-allowed; transform: none; }
.emojitype { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px 8px; border-top: 1px solid var(--line); }

/* Mahalaxmi: K / Q / J tracker */
.mlxbox { display: inline-grid; grid-template-columns: repeat(3, auto); gap: 6px; margin-top: 2px; }
.mlxc { display: grid; justify-items: center; gap: 3px; min-width: 52px; padding: 4px 8px 5px; border-radius: 10px; background: rgb(0 0 0 / .28); border: 1px solid rgb(255 255 255 / .12); transition: all .2s; }
.mlxc b { font: 800 14px/1 Outfit, system-ui, sans-serif; color: var(--on-felt-muted); }
.mlxc.cur { border-color: #ffd34d; background: rgb(255 211 77 / .16); box-shadow: 0 0 12px rgb(255 211 77 / .35); }
.mlxc.cur b { color: #ffd34d; }
.mlxw { display: flex; gap: 2px; min-height: 18px; align-items: center; }
.mlxw em { font-style: normal; color: var(--on-felt-muted); font-size: 11px; }
.mlxav { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-size: 11px; box-shadow: 0 0 0 1.5px #ffd34d; }
.mlxav svg, .mlxav img { width: 100%; height: 100%; }
.center > .cline.vname .vtag.mlxtag { color: #ffd34d; background: rgb(255 211 77 / .14); border-color: rgb(255 211 77 / .45); }
.tblban.mlx { --bc: #ffd34d; --bg2: rgb(255 143 179 / .4); }
.mlxprog { margin-left: 6px; letter-spacing: .1em; font-size: 12px; }
.mlxprog b { color: #ffd34d; } .mlxprog s { opacity: .4; text-decoration: none; }
.rows .rrow.rhead { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); } .rows .rrow.rhead:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .rows .rrow.rhead b { color: var(--brass); }
/* Pick the Game: the list scrolls inside the box on every screen; the header stays put */
.pickscrim .modal { max-height: min(92vh, 900px); display: flex; flex-direction: column; }
.pickscrim .pk { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.pickscrim .pk > * { flex: 0 0 auto; }
.pickscrim .pk > .pkgrid { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 16px; }
.ddlast { font-size: 13px; padding: 6px 10px; border-radius: 10px; background: rgb(255 211 77 / .16); border: 1px solid rgb(255 211 77 / .5); } .ddbtns .act small { display: block; font-size: 10.5px; opacity: .75; font-weight: 600; }
.hostbtn { position: absolute; right: -9px; top: -7px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; padding: 0; border: 1.5px solid rgb(255 255 255 / .7); background: #33414d; color: #fff; cursor: pointer; box-shadow: 0 2px 6px rgb(0 0 0 / .35); }
.hostbtn svg { width: 13px; height: 13px; fill: currentColor; }
.hostbtn:hover { background: #4a5b69; }
@media (max-width: 560px) { .hostbtn { width: 18px; height: 18px; right: -6px; top: -5px; } .hostbtn svg { width: 11px; height: 11px; } }
.hsm { display: flex; align-items: center; gap: 12px; }
.hsm h3 { margin: 0; }
.hsmbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hsmbtns .danger { color: var(--bad, #c0392b); border-color: color-mix(in srgb, var(--bad, #c0392b) 50%, var(--line)); }

/* (?) next to the game's name: how to play */
.vinfo { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 7px; vertical-align: .18em; border-radius: 50%; padding: 0; border: 1.5px solid rgb(255 255 255 / .75);
  background: rgb(255 255 255 / .14); color: #fff; font: 800 12.5px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; cursor: pointer; -webkit-text-fill-color: #fff; filter: none; transition: background .15s, transform .15s; }
.vinfo:hover { background: rgb(255 255 255 / .3); transform: scale(1.08); }
.howscrim .modal { width: min(100%, 520px); }
.howhead { display: flex; align-items: center; gap: 12px; }
.howhead .pkemb { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(160deg, #2f6a4a, #163423); flex: none; }
.howhead .pkemb svg { width: 40px; height: 40px; }
.howhead h3 { margin: 0; }
.howhead .pkeye { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.howblurb { margin: 4px 0 0; color: var(--muted); }
.howsteps { margin: 6px 0 0; padding-left: 0; list-style: none; counter-reset: hs; display: grid; gap: 8px; }
.howsteps li { counter-increment: hs; display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; line-height: 1.45; }
.howsteps li::before { content: counter(hs); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; background: var(--brass); color: #fff; }
.howplay .rules { margin-top: 6px; max-height: 36vh; overflow-y: auto; }
.ddbtns.two { grid-template-columns: 1fr 1fr; }
.aflnow { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 2px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #1f7a4a 14%, var(--panel-2)); border: 1px solid color-mix(in srgb, #1f7a4a 50%, var(--line)); }
.aflnow.low { background: color-mix(in srgb, #c8372d 12%, var(--panel-2)); border-color: color-mix(in srgb, #c8372d 50%, var(--line)); }
.aflnow b { grid-column: 2; font-size: 15px; }
.aflnow span:last-child { grid-column: 2; font-size: 12.5px; color: var(--muted); }
.aflnow .aflnowj { grid-row: 1 / span 2; grid-column: 1; }
.aflnow .aflnowj .card { --cw: 30px; margin: 0; }
.tpopeek { display: grid; justify-items: center; gap: 6px; margin-top: 6px; } .tpopeek .hand .card { --cw: 34px; } .tpopeek .hand .card + .card { margin-left: 3px; }

/* Dealer button: a proper puck on the felt in front of the dealer */
.dbutton { position: absolute; z-index: 4; width: 34px; height: 34px; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; pointer-events: auto;
  background: radial-gradient(circle at 40% 32%, #ffffff, #ecebe4 55%, #cfcdc2); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d1d1f, 0 5px 0 #8e8c82, 0 8px 14px rgb(0 0 0 / .45);
  transition: left .6s cubic-bezier(.3,1.2,.4,1), top .6s cubic-bezier(.3,1.2,.4,1); }
.dbutton b { font: 900 17px/1 Outfit, system-ui, sans-serif; color: #1d1d1f; letter-spacing: -.02em; }
.dbutton::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px dashed rgb(29 29 31 / .35); }
@media (max-width: 599px) { .dbutton { width: 26px; height: 26px; box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #1d1d1f, 0 3px 0 #8e8c82, 0 5px 10px rgb(0 0 0 / .45); } .dbutton b { font-size: 13px; } .dbutton::after { inset: 3px; } }

/* ---------- Royalty: a dealt trail ---------- */
.royal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(ellipse at 50% 45%, rgb(60 38 0 / .55), rgb(8 5 0 / .92) 70%); animation: ryin .5s ease-out both; }
.royal.out { animation: ryout .5s ease-in both; }
@keyframes ryin { from { opacity: 0; } } @keyframes ryout { to { opacity: 0; transform: scale(1.04); } }
.ry-rays { position: absolute; left: 50%; top: 45%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; opacity: .55;
  background: repeating-conic-gradient(from 0deg, rgb(255 214 102 / .28) 0 6deg, transparent 6deg 18deg); animation: ryspin 14s linear infinite;
  -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 55%); mask: radial-gradient(circle, #000 0 18%, transparent 55%); }
@keyframes ryspin { to { transform: rotate(360deg); } }
.ry-glow { position: absolute; left: 50%; top: 45%; width: 70vmin; height: 70vmin; margin: -35vmin 0 0 -35vmin; border-radius: 50%; background: radial-gradient(circle, rgb(255 214 102 / .55), transparent 65%); animation: rypulse 1.6s ease-in-out infinite alternate; }
@keyframes rypulse { to { transform: scale(1.15); opacity: .7; } }
.ry-spark { position: absolute; top: -20px; left: var(--x); width: 8px; height: 8px; transform: rotate(45deg) scale(var(--s)); background: linear-gradient(135deg, #fff6c4, #f2b417); box-shadow: 0 0 10px #ffd34d; animation: ryfall 3.2s linear var(--d) infinite; opacity: .9; }
@keyframes ryfall { to { transform: translateY(110vh) rotate(405deg) scale(var(--s)); opacity: .2; } }
.ry-box { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; color: #fff; padding: 0 20px; }
.ry-crown { font-size: 64px; line-height: 1; filter: drop-shadow(0 8px 20px rgb(255 190 40 / .8)); animation: rycrown .9s cubic-bezier(.2,1.6,.4,1) .15s both, bibob 1.4s ease-in-out 1.1s infinite alternate; }
@keyframes rycrown { from { transform: translateY(-120px) scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ry-eyebrow { font: 800 13px/1 Outfit, system-ui, sans-serif; letter-spacing: .5em; text-transform: uppercase; color: #ffd34d; margin-right: -.5em; }
.ry-cards { display: flex; gap: 12px; margin: 6px 0 4px; perspective: 800px; }
.ry-c { display: inline-block; animation: ryslam .55s cubic-bezier(.2,1.5,.35,1) both; animation-delay: calc(.3s + var(--i) * .22s); }
.ry-c .card { --cw: clamp(64px, 16vw, 96px); margin: 0; box-shadow: 0 0 0 2px #ffd34d, 0 0 26px rgb(255 211 77 / .75), 0 14px 26px rgb(0 0 0 / .5); }
@keyframes ryslam { 0% { transform: translateY(-60px) rotateY(180deg) scale(1.5); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
.ry-title { font: 900 clamp(26px, 6vw, 44px)/1.05 Outfit, system-ui, sans-serif; letter-spacing: .01em;
  background: linear-gradient(180deg, #fffbe8, #ffd34d 55%, #c98a00); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgb(80 50 0 / .8));
  animation: rytitle .6s cubic-bezier(.2,1.5,.4,1) 1s both; }
@keyframes rytitle { from { transform: scale(.4); opacity: 0; } }
.ry-sub { font-size: 15px; color: #f6e7c1; animation: ryin .5s ease-out 1.3s both; }
.ry-sub b { color: #fff; }
.ry-total { font: 900 30px/1 Outfit, system-ui, sans-serif; color: #7ff0b4; text-shadow: 0 0 18px rgb(63 214 138 / .7); animation: rytitle .6s cubic-bezier(.2,1.5,.4,1) 1.9s both; }
.royal.k-aces .ry-rays { opacity: .8; animation-duration: 9s; }
.royal.k-aces .ry-crown { font-size: 80px; }
@media (prefers-reduced-motion: reduce) { .royal *, .royal { animation-duration: .01s !important; animation-iteration-count: 1 !important; } }
.btwnbox .aflcards { align-items: center; gap: 6px; } .btwnarrow { color: #ffd34d; font-size: 20px; font-weight: 800; }
.ry-kind { font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #ffd34d; opacity: .85; animation: ryin .5s ease-out 1.15s both; }

/* Drop */
.dropbox { display: grid; justify-items: center; gap: 6px; padding: 10px 14px; border-radius: 14px; background: rgb(0 0 0 / .28); border: 1px solid rgb(255 255 255 / .12); margin-top: 4px; max-width: 100%; }
.dropbig { font: 800 18px/1.15 Outfit, system-ui, sans-serif; color: #fff; text-align: center; }
.dropdots { display: flex; gap: 6px; }
.dropdots i { width: 12px; height: 12px; border-radius: 50%; background: rgb(255 255 255 / .18); border: 1.5px solid rgb(255 255 255 / .4); transition: all .2s; }
.dropdots i.on { background: #ffd34d; border-color: #fff2c6; box-shadow: 0 0 10px rgb(255 211 77 / .7); }
.ddrow.win { box-shadow: inset 0 0 0 1.5px #3fd68a; }
.ddrow em.w { background: #1f8a4c; }
.dropact { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 520px; margin: 0 auto; }
.dropact .act { display: grid; gap: 2px; padding: 14px 10px; font-size: 18px; }
.dropact .act b { font-size: 20px; }
.dropact .act small { font-size: 11.5px; opacity: .75; font-weight: 600; }
.dropact .dropk { background: linear-gradient(180deg, #2fb36b, #1d7f4b); color: #fff; border-color: #1d7f4b; }
.dropact .act.on { box-shadow: 0 0 0 3px #ffd34d, 0 6px 18px rgb(0 0 0 / .3); transform: translateY(-2px); }
.droppick { grid-column: 1 / -1; display: grid; gap: 8px; width: 100%; max-width: 620px; margin: 0 auto; padding: 12px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.dropgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; max-height: 38vh; overflow-y: auto; }
.dpo { position: relative; display: grid; justify-items: center; gap: 3px; padding: 8px 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: inherit; cursor: pointer; font-size: 12.5px; }
.dpo .pkemb { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(160deg, #2f6a4a, #163423); }
.dpo .pkemb svg { width: 28px; height: 28px; }
.dpo i { position: absolute; top: 4px; right: 5px; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); }
.dpo.on { border-color: var(--brass); box-shadow: inset 0 0 0 2px var(--brass); }
.dpmulti select { font: inherit; font-weight: 700; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 2px 4px; max-width: 100%; min-width: 0; cursor: pointer; }
.dpo.off { opacity: .4; cursor: default; }
.dpo:disabled { opacity: .35; cursor: not-allowed; }
@media (max-width: 599px) { .droppick { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto; z-index: 500; box-shadow: 0 -6px 30px rgb(0 0 0 / .35); } }
/* Seat status row: the eye tag and the last move sit side by side on one line, the same height, never cut off */
.seat .srow { max-width: none; width: max-content; }
.seat .srow > * { flex: 0 0 auto; }
.seat .srow .pill, .seat .srow .eyetag { white-space: nowrap; line-height: 1.25; display: inline-flex; align-items: center; height: 24px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.seat .srow .pill.act { border-radius: 7px; letter-spacing: .1em; font-weight: 800; font-size: 11px; }
@media (max-width: 599px) { .seat .srow .pill, .seat .srow .eyetag { height: 19px; } .seat .srow .pill.act { font-size: 9.5px; letter-spacing: .06em; } }
@media (max-width: 599px) { .seat .srow { flex-wrap: wrap; max-width: 120px; row-gap: 3px; } }

/* Chips from above (bets in front of seats, and the pot's default look) */
.chips3 { position: relative; display: inline-flex; align-items: center; }
.chip3 { width: 26px; height: 26px; flex: none; border-radius: 50%; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .45)); }
.chips3 .chip3 + .chip3 { margin-left: -15px; }
.bet .chips3 .chip3 { width: 26px; height: 26px; }
.bet .chips3 .chip3:nth-child(2) { transform: translateY(-3px) rotate(18deg); } .bet .chips3 .chip3:nth-child(3) { transform: translateY(1px) rotate(-14deg); }
.pile.pile3 { display: inline-flex; justify-content: center; }
.pile.pile3 .chip3 { width: 24px; height: 24px; }
.pile.pile3 .chip3 + .chip3 { margin-left: -12px; }
.pile.pile3 .chip3:nth-child(odd) { transform: translateY(-4px) rotate(calc(var(--k) * 23deg)); }
.pile.pile3 .chip3:nth-child(even) { transform: translateY(3px) rotate(calc(var(--k) * -17deg)); }
.potsweep .pile.pile3 .chip3 { width: 22px; height: 22px; }
@media (max-width: 599px) { .chip3, .bet .chips3 .chip3 { width: 20px; height: 20px; } .chips3 .chip3 + .chip3 { margin-left: -12px; } .pile.pile3 .chip3 { width: 18px; height: 18px; } .pile.pile3 .chip3 + .chip3 { margin-left: -9px; } }
.pile.pile3 .chip3 { width: 30px; height: 30px; } .pile.pile3 .chip3 + .chip3 { margin-left: -14px; }
.bet .chips3 .chip3 { width: 30px; height: 30px; } .bet .chips3 .chip3 + .chip3 { margin-left: -17px; }
@media (max-width: 599px) { .pile.pile3 .chip3, .bet .chips3 .chip3 { width: 22px; height: 22px; } .pile.pile3 .chip3 + .chip3 { margin-left: -10px; } .bet .chips3 .chip3 + .chip3 { margin-left: -13px; } }

/* Drop: deciding, the reveal */
.dropring { position: relative; width: 58px; height: 58px; }
.dropring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dropring circle { fill: none; stroke-width: 4; }
.dropring .trk { stroke: rgb(255 255 255 / .2); }
.dropring .val { stroke: #ffd34d; stroke-linecap: round; stroke-dasharray: 119.4; animation-name: pkdrain; animation-timing-function: linear; animation-fill-mode: forwards; }
.dropring .num { position: absolute; inset: 0; display: grid; place-items: center; font: 900 18px/1 Outfit, system-ui, sans-serif; color: #fff; }
.dropring .num.low { color: #ff8a7a; animation: bibob .5s ease-in-out infinite alternate; }
.dropclock { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 700; }
.dropclock b { font-size: 22px; color: var(--text, inherit); }
.dropclock b.low { color: #e2483b; }
.dhold, .dflip { position: relative; display: inline-block; }
/* the choice token: face down ("?") once decided, dots while still deciding; flips to a tick or cross at the reveal */
.dtok { position: absolute; left: 50%; top: -6px; width: 24px; height: 24px; transform: translate(-50%, -100%); perspective: 300px; z-index: 3; pointer-events: none; }
.dtok b { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 13px; line-height: 1; color: #fff; backface-visibility: hidden; box-shadow: 0 0 0 2px #fff, 0 2px 5px rgb(0 0 0 / .45); }
.dtok .bk { background: #3a403e; }
.dtok .fr { transform: rotateY(180deg); }
.dtok.k .fr { background: #1f8a52; } .dtok.d .fr { background: #c0392b; }
.dtok.wait .bk { background: rgb(58 64 62 / .55); box-shadow: 0 0 0 1.5px rgb(255 255 255 / .45); display: flex; gap: 2px; }
.dtok.wait .bk i { width: 3.5px; height: 3.5px; border-radius: 50%; background: #fff; opacity: .4; animation: dtokdot 1s infinite; }
.dtok.wait .bk i:nth-child(2) { animation-delay: .15s; } .dtok.wait .bk i:nth-child(3) { animation-delay: .3s; }
@keyframes dtokdot { 50% { opacity: 1; } }
.dtok.set .bk { animation: dtokset .3s cubic-bezier(.2,1.6,.4,1); }
@keyframes dtokset { from { transform: scale(.4); } }
.dtok.flip .bk { animation: dtokA .5s var(--bd, 0ms) both; } .dtok.flip .fr { animation: dtokB .5s var(--bd, 0ms) both; }
@keyframes dtokA { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
@keyframes dtokB { from { transform: rotateY(180deg); } to { transform: rotateY(360deg); } }
.dflip.dropped .hand { animation: ddim .4s calc(var(--bd, 0ms) + 500ms) both; }
@keyframes ddim { to { opacity: .35; filter: grayscale(.6); } }
.dkept > .hand { animation: dkept .6s cubic-bezier(.2,1.5,.4,1) calc(var(--bd, 0ms) + 450ms) both; }
@keyframes dkept { from { transform: translateY(6px) scale(.9); } to { transform: translateY(-4px) scale(1.06); } }
.dkept.won .card { box-shadow: 0 0 0 2px #ffd34d, 0 0 16px rgb(255 211 77 / .8); }
.hand.dmine { margin: 6px 0 2px; }
.seqjbox .aflcards { display: flex; align-items: flex-end; gap: 8px; } .aflj.seqside .card { opacity: .92; outline: 1.5px dashed rgb(255 255 255 / .55); outline-offset: 1px; }

/* Emotes: shown in a neat message bubble above the seat (like chat), with a tail pointing at the player */
.emote-pop .emo-card { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 12px 7px; border-radius: 18px;
  background: #fff; color: #17201d; box-shadow: 0 8px 22px rgb(0 0 0 / .35), 0 0 0 1px rgb(0 0 0 / .06); margin-bottom: 12px; }
.emote-pop .emo-card::after { display: block; content: ""; position: absolute; left: 50%; top: 100%; bottom: auto; width: 0; height: 0; background: none; border-radius: 0;
  transform: translateX(-50%); border: 9px solid transparent; border-top-color: #fff; }
.emote-pop .emo-card svg { width: 64px; height: 64px; filter: none; }
.emote-pop .emo-card b { color: #17201d; font-size: 12.5px; font-weight: 800; text-shadow: none; letter-spacing: .02em; }
@media (max-width: 560px) { .emote-pop .emo-card { padding: 6px 9px 5px; border-radius: 14px; } .emote-pop .emo-card svg { width: 46px; height: 46px; } .emote-pop .emo-card b { font-size: 11px; } }
.voutrow { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px 4px; } .vout { display: grid; gap: 10px; }
/* 2+1 lock: smoother dragging */
.tpcard { transition: transform .12s ease-out; -webkit-user-select: none; user-select: none; }
.tpcard.lift { transform: translateY(-3px) scale(1.04); }
.tpcard.dragging { opacity: .3; transform: scale(.95); }
.tpghost { left: 0; top: 0; transform: translate3d(-999px, -999px, 0); will-change: transform; transition: none; }
.tplr, .tppool { transition: box-shadow .12s, background .12s; }
.tplr.tpdrop, .tppool.tpdrop { box-shadow: inset 0 0 0 2px var(--brass), 0 0 14px rgb(224 168 46 / .35); background: color-mix(in srgb, var(--brass) 10%, var(--panel-2)); }
.tpcard.tpswap .card { box-shadow: 0 0 0 3px #3fd68a, 0 0 12px rgb(63 214 138 / .6); transform: scale(1.08); }

/* Side show loser: cards mucked onto the pile in the middle (turn face down, slide in one by one) */
.muckfx { position: absolute; left: 50%; bottom: 100%; width: 0; height: 0; z-index: 6; pointer-events: none; }
.muckfx i { position: absolute; left: calc(-20px + var(--k) * 13px); top: -4px; width: 26px; height: 37px; border-radius: 4px; background: #fff; box-shadow: 0 3px 8px rgb(0 0 0 / .45);
  animation: muckgo .7s cubic-bezier(.3,.7,.3,1) both; animation-delay: calc(var(--md) + .45s + var(--k) * .15s); }
@keyframes muckgo {
  0% { transform: none; }
  35% { transform: translateY(-10px) rotateY(90deg); background: #fff; }
  36% { background: repeating-linear-gradient(45deg, #8e2a2a 0 4px, #7a1f1a 4px 8px); border: 2px solid #fff; }
  100% { transform: translate(calc(var(--tx) - var(--k) * 13px + 7px), var(--ty)) rotate(var(--mr)); background: repeating-linear-gradient(45deg, #8e2a2a 0 4px, #7a1f1a 4px 8px); border: 2px solid #fff; opacity: 1; }
}
@media (max-width: 599px) { .muckfx i { width: 19px; height: 27px; left: calc(-15px + var(--k) * 10px); } }
.seat.sslose .hand { animation: sshide .2s linear both; animation-delay: .45s; }
@keyframes sshide { to { opacity: 0; } }
/* 2+1: drag your own six cards into any order */
#tpoMy { touch-action: none; }
#tpoMy .tpoc { display: inline-block; cursor: grab; transition: transform .16s ease-out; -webkit-user-select: none; user-select: none; }
#tpoMy .tpoc.tpomove { transition: none; cursor: grabbing; z-index: 3; position: relative; filter: drop-shadow(0 8px 12px rgb(0 0 0 / .35)); }
/* Phones held upright: the dock fills the rest of the screen and Ledger / Chat sit at the very bottom, not right under your hand */
@media (max-width: 599px) and (orientation: portrait) {
  /* Like PokerNow: the table takes whatever height is left, so a tall phone gets a taller table, not an empty gap.
     Below 400px of table the page scrolls instead of squashing it. */
  #tableview { grid-template-rows: minmax(100%, max-content); }
  .play { grid-template-rows: minmax(400px, 1fr) auto; }
  .feltwrap { min-height: 0; }
  .felt { height: 100%; max-height: 700px; }
  .dock { display: flex; flex-direction: column; min-height: 0; gap: 6px; }
  .dock > .chatarea { padding-top: 0; }
  /* Before-your-turn choices in one tight row */
  .prerow { gap: 4px; }
  .prebtns { gap: 6px; }
  .pre { padding: 7px 9px; font-size: 12.5px; gap: 5px; border-radius: 10px; }
  .pre i { width: 12px; height: 12px; }
  .pre small { font-size: 11px; }
}

/* Phones at a table: Ledger and Chat sit in the header; Invite and Sound move to the Options menu (laptops unchanged). */
.hdrphone { display: none; }
.hdrphone { position: relative; }
.hdrphone .unread { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: none; }
.hdrphone.has .unread { display: block; }
.hdrphone[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--brass); }
@media (max-width: 599px) {
  body.inroom .hdrphone { display: inline-flex; }
  body.inroom #cbInvite, body.inroom #btnSound { display: none !important; }
  body.inroom .sndwrap { position: static; }
  body.inroom .sndpop { position: fixed; top: calc(58px + env(safe-area-inset-top, 0px)); right: 12px; }
  .chatarea .chatbtns { display: none !important; }
  /* the chat drops down under the header, so it never covers your turn buttons */
  body.chatopen .chatarea .chatbox { top: calc(60px + env(safe-area-inset-top, 0px)); bottom: auto; box-shadow: 0 12px 30px rgb(0 0 0 / .25); }
}

/* Playing blind: one chip that counts down your blind rounds. Tap it for a map of the rounds. */
.blindbox { display: grid !important; justify-items: center; gap: 8px; }
.bchip { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 42px; box-sizing: border-box; padding: 0 10px 0 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--ivory); text-align: left; font: inherit; cursor: pointer; transition: transform .15s, border-color .15s; }
.bchip:hover { transform: translateY(-1px); }
.bctext { display: grid; gap: 1px; line-height: 1.15; }
.bctext b { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.brnum { font-size: 22px; line-height: 1; font-weight: 800; min-width: 16px; text-align: center; }
.brnum.tick { animation: brtick .5s cubic-bezier(.3,1.5,.5,1); }
@keyframes brtick { 0% { transform: translateY(-8px) scale(1.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
.brsegs { display: flex; gap: 3px; margin-top: 2px; }
.brsegs i { width: 10px; height: 3px; border-radius: 2px; background: var(--line); }
.brsegs i.on { background: var(--brass); }
.brsegs i.burn { animation: brburn .7s ease-out; }
@keyframes brburn { 0% { background: var(--marigold); transform: scaleY(2.4); } 100% { background: var(--line); transform: none; } }
.brchev { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.brounds.open .brchev { transform: rotate(180deg); }
.brounds.last { border-color: var(--marigold); }
.brounds.last .brnum, .brounds.last .bctext b { color: var(--marigold); }
.brounds.last .brsegs i.on { background: var(--marigold); }
.brmap { display: grid; gap: 8px; justify-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); max-width: 340px; animation: brmapin .2s ease-out; }
@keyframes brmapin { from { opacity: 0; transform: translateY(-4px); } }
.brmap p { margin: 0; font-size: 12.5px; color: var(--muted); text-align: center; text-wrap: balance; }
.brsteps { display: flex; align-items: flex-start; }
.brstep { display: grid; justify-items: center; gap: 3px; width: 44px; }
.brstep b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; border: 1.5px solid var(--line); color: var(--muted); background: var(--panel); }
.brstep small { font-size: 10px; color: var(--muted); white-space: nowrap; }
.brstep.used b { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.brstep.next b { border-color: var(--marigold); color: var(--marigold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marigold) 22%, transparent); }
.brstep.next small { color: var(--marigold); font-weight: 700; }
.brstep.burn b { animation: brtick .5s cubic-bezier(.3,1.5,.5,1); }
.brstep.see b svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.brline { flex: 1 0 8px; height: 1.5px; margin-top: 13px; background: var(--line); min-width: 6px; }
@media (prefers-reduced-motion: reduce) { .brnum.tick, .brsegs i.burn, .brstep.burn b, .brmap { animation: none !important; } }


/* Your seat sits at the bottom middle of the table and its status pills hang below the rail:
   keep that strip free so it never covers your hand's name or the blind panel. */
.feltwrap { padding-bottom: 26px; }
@media (max-width: 599px) and (orientation: portrait) {
  .feltwrap { padding-bottom: 42px; }
  /* the middle stays clear of the side seats */
  .felt .center { width: 44%; }
}
/* Phones: a seat's status pills stack under it instead of spreading sideways into the middle of the table */
@media (max-width: 599px) { .seat .srow { max-width: 96px; } }

/* Phones: a slimmer turn panel and smaller cards on your seat, so the table gets the room */
@media (max-width: 599px) {
  #actions.myturn { padding: 12px 6px 6px; margin-top: 10px; border-radius: 12px; }
  #actions.myturn::before { font-size: 9.5px; padding: 2px 10px; }
  .actions { gap: 5px; }
  .act { padding: 7px 2px 6px; font-size: 13px; border-radius: 10px; line-height: 1.1; }
  .act small { font-size: 11px; }
  .act::before { height: 2px; }
  .seat.me .hand .card { --cw: 28px; }
  .seat.me .hand .card + .card { margin-left: 1px; }
}

/* Dealer's choice on a phone: a compact card that fits inside the middle of the table, clear of the side seats */
@media (max-width: 599px) {
  .felt .center:has(.pickwait) { width: 46%; }
  .pickwait { box-sizing: border-box; max-width: 100%; padding: 8px 8px 9px; gap: 7px; border-radius: 14px; box-shadow: 0 0 0 3px rgb(255 211 77 / .07), 0 8px 20px rgb(0 0 0 / .3); }
  .pwtop { gap: 6px; }
  .pwav { width: 26px; height: 26px; flex: none; box-shadow: 0 0 0 1.5px #15171b, 0 0 0 2.5px #e0b85a; }
  .pwav .emo { font-size: 14px; }
  .pweye { font-size: 8.5px; letter-spacing: .1em; }
  .pwtxt { min-width: 0; }
  .pwtxt b { font-size: 12px; line-height: 1.2; }
  .pwring { width: 26px; height: 26px; flex: none; }
  .pwring .num { font-size: 10px; }
  .pwfan { max-width: 116px; gap: 3px; }
  .pwem { width: 20px; height: 20px; border-radius: 6px; }
  .pwem svg { width: 16px; height: 16px; }
}

/* Phones: the middle of the table gets a little more width (it is shrunk to fit if it ever needs to be) */
@media (max-width: 599px) and (orientation: portrait) { .felt .center { width: 56%; } }
/* A wide, short table that can't fit the middle stacked: the same pieces side by side */
.felt .center.rowfit { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 18px; row-gap: 4px; width: max-content; max-width: 86%; }
/* Phones: Drop's round box, slimmer */
@media (max-width: 599px) and (orientation: portrait) {
  .dropbox { padding: 6px 9px; gap: 3px; border-radius: 12px; }
  .dropring { width: 38px; height: 38px; } .dropring .num { font-size: 13px; }
  .dropbig { font-size: 14px; }
  .dropbox .trcap { font-size: 9px; letter-spacing: .1em; }
}
/* Phones: the Keep / Drop buttons below already show the clock and the question, so the middle keeps just the round and who's decided */
@media (max-width: 599px) and (orientation: portrait) { .dropbox.decide .dropring, .dropbox.decide .dropbig { display: none; } }

/* Other players' seats a touch smaller than yours, to declutter the table */
.felt .seat:not(.me) { scale: .92; }
@media (max-width: 599px) {
  .felt .seat:not(.me) { scale: .86; }
  /* seat numbers live on the empty-seat circles; on a taken seat the stray number is just clutter */
  .seat .seatno { display: none; }
}
/* Phones: Flip / Freeze on one slim row (icon and label side by side), and on short phones the table gives up height before your controls do */
@media (max-width: 599px) {
  .ffbtn { grid-auto-flow: column; align-items: center; justify-content: center; column-gap: 6px; padding: 8px 6px; font-size: 14px; border-radius: 12px; }
  .ffbtn small { font-size: 11px; }
  .ffbtn svg, .ffbtn .snow { width: 15px; height: 15px; font-size: 14px; }
}
@media (max-width: 599px) and (orientation: portrait) { .play { grid-template-rows: minmax(min(400px, 50vh), 1fr) auto; } }

/* Header tucked away (the default at a table): a small floating cluster brings it back; on phones it also carries Ledger and Chat */
.hdrfloat { display: none; position: fixed; top: calc(env(safe-area-inset-top, 0px) + 6px); right: max(10px, env(safe-area-inset-right, 0px)); z-index: 60; align-items: center; gap: 6px; }
body.hdrhide.inroom .hdrfloat { display: flex; }
.hdrfloat .hdrshow { position: static; }
.hfb { display: none; position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 92%, transparent); color: var(--ivory); place-items: center; padding: 0; box-shadow: 0 4px 14px rgb(0 0 0 / .18); }
.hfb svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hfb .unread { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: none; }
.hfb.has .unread { display: block; }
.hfb[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--brass), 0 4px 14px rgb(0 0 0 / .18); }
@media (max-width: 599px) { .hfb { display: grid; } body.hdrhide.chatopen .chatarea .chatbox { top: calc(48px + env(safe-area-inset-top, 0px)); } }
@media (max-width: 599px) { body.hdrhide.inroom .play { padding-top: 44px; } }
/* Phones: Drop's Keep / Drop on one slim row */
@media (max-width: 599px) {
  .dropact { gap: 6px; } .dropact .act { padding: 8px 6px; } .dropact .act b { font-size: 16px; } .dropact .act small { font-size: 10.5px; }
  .dropclock { font-size: 12px; } .dropclock b { font-size: 18px; }
}
/* Phones: the In-Hand / Best Hand switch, smaller */
@media (max-width: 599px) { .viewtog { margin-top: 2px; padding: 2px; } .viewtog button { padding: 4px 10px; font-size: 12.5px; gap: 4px; } .viewtog button svg { width: 13px; height: 13px; } }
/* Phones: smaller bet chips and amounts */
@media (max-width: 599px) {
  .bet .chips3 .chip3 { width: 18px; height: 18px; } .bet .chips3 .chip3 + .chip3 { margin-left: -11px; }
  .bet .amt { font-size: 11.5px; padding: 0 6px; }
  .felt .bet { gap: 3px; }
}
/* the dealer badge sits on the end of the dealer's name pill, so it draws above the seats */
.felt > .dbutton { z-index: 10; }
@media (max-width: 599px) { .felt > .dbutton { width: 22px; height: 22px; } .felt > .dbutton b { font-size: 11px; } }

/* Ledger: the game night's span */
.lsession { font-size: 13px; color: var(--muted); padding: 8px 12px; border-radius: 12px; background: var(--panel-2); margin-bottom: 10px; }
.lsession.over b { color: var(--ivory); }
.lverify select { font: inherit; font-size: 12.5px; padding: 3px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ivory); max-width: 200px; }
/* Game over: everyone's final standing */
.gameover { display: grid; gap: 10px; }
.gameover h3 { margin: 0; }
.goeye { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gorows { display: grid; gap: 6px; margin: 4px 0; max-height: 46vh; overflow-y: auto; }
.gorow { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--panel-2); }
.gorow b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gorank { width: 20px; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); }
.gonet { font-weight: 800; font-size: 16px; }
.gonet.up { color: var(--good); } .gonet.down { color: var(--bad); }

/* Raise sizes: a row above the turn buttons */
#actions:has(.raisepick) { display: grid; }
.raisepick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 6px; margin-bottom: 4px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); animation: rpin .18s ease-out; }
@keyframes rpin { from { opacity: 0; transform: translateY(4px); } }
.rplbl { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.rpopt { display: grid; justify-items: center; gap: 0; min-width: 58px; padding: 6px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, #e08a1e 45%, var(--line)); background: var(--panel); color: var(--ivory); font: inherit; cursor: pointer; }
.rpopt b { font-size: 15px; } .rpopt small { font-size: 10.5px; color: var(--muted); font-weight: 700; }
.rpopt:hover { border-color: #e08a1e; }
.rpx { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font: inherit; cursor: pointer; }
@media (max-width: 599px) { .rpopt { min-width: 48px; padding: 5px 7px; } .rpopt b { font-size: 13.5px; } }
.faceoff .mbtns { flex-wrap: wrap; justify-content: space-between; align-items: center; }
.faceoff .fo-off { font-size: 12.5px; }

/* Spotlight showdown: the table dims except two pools of light on the players; their cards turn over in place, then the winner is crowned */
.spotfx { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.spotfx.out { animation: spout .35s both; }
@keyframes spout { to { opacity: 0; } }
.sp-dim { position: fixed; inset: 0; background: rgb(0 0 0 / .66); -webkit-mask-composite: source-in; mask-composite: intersect; animation: spdim .5s both; }
@keyframes spdim { from { opacity: 0; } }
.sp-hand { position: fixed; transform: translate(-50%, -100%); display: grid; justify-items: center; }
.sp-hand::before { content: ""; position: absolute; left: 50%; top: 65%; width: 230px; height: 170px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgb(255 236 190 / .26), transparent); z-index: -1; animation: spdim .6s .2s both; }
.sp-cards { display: flex; gap: 4px; }
.sp-c { position: relative; display: block; transform-style: preserve-3d; perspective: 400px; }
.sp-c .card { --cw: 46px; }
.sp-b, .sp-f { display: block; backface-visibility: hidden; }
.sp-f { position: absolute; inset: 0; transform: rotateY(180deg); }
.sp-b { animation: spA .7s var(--fd) both; } .sp-f { animation: spB .7s var(--fd) both; }
@keyframes spA { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
@keyframes spB { from { transform: rotateY(180deg); } to { transform: rotateY(360deg); } }
.sp-lbl { position: absolute; left: 50%; bottom: -10px; translate: -50% 0; z-index: 2; box-shadow: 0 2px 6px rgb(0 0 0 / .4); font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 7px; background: #fff; color: #17201d; white-space: nowrap; opacity: 0; animation: sppop .3s calc(var(--fv) - 300ms) both; }
.sp-hand.win .sp-lbl { background: #1f8a52; color: #fff; }
.sp-hand.lose .sp-cards { animation: splose .5s var(--fv) both; }
@keyframes splose { to { filter: grayscale(1) brightness(.5); } }
.sp-hand.win .sp-cards { animation: spwin .5s var(--fv) both; }
@keyframes spwin { to { filter: drop-shadow(0 0 10px rgb(224 184 90 / .95)); transform: scale(1.06); } }
.sp-crown { position: absolute; left: 50%; bottom: 100%; width: 30px; height: 30px; transform: translateX(-50%); color: #f2c64d; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .5)); opacity: 0; animation: spcrown .55s calc(var(--fv) + 250ms) cubic-bezier(.3,1.6,.5,1) both; }
.sp-crown svg { width: 100%; height: 100%; fill: currentColor; }
@keyframes spcrown { from { opacity: 0; transform: translate(-50%, -22px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes sppop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.sp-mid { position: fixed; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; text-align: center; max-width: 70vw; padding: 12px 18px 6px; border-radius: 16px; background: rgb(10 13 12 / .82); box-shadow: 0 8px 28px rgb(0 0 0 / .45); animation: spdim .4s both; }
.sp-ttl { font-size: 12px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: #f2c64d; animation: spdim .5s .2s both; }
.sp-verdict { font-size: 17px; font-weight: 800; color: #fff; opacity: 0; animation: sppop .35s calc(var(--fv) + 100ms) both; text-wrap: balance; }
.sp-bar { display: block; width: 120px; height: 2px; border-radius: 2px; background: rgb(255 255 255 / .15); overflow: hidden; margin-top: 4px; }
.sp-bar i { display: block; height: 100%; width: 100%; background: #f2c64d; transform-origin: 0 50%; animation: spbar linear both; }
@keyframes spbar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.sp-acts { display: flex; align-items: center; gap: 4px; pointer-events: auto; color: rgb(255 255 255 / .45); font-size: 12px; }
.sp-acts button { border: 0; background: none; padding: 6px 4px; font: inherit; font-size: 12px; font-weight: 600; color: rgb(255 255 255 / .7); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / .3); }
.sp-acts button:hover { color: #fff; }
@media (max-width: 599px) { .sp-c .card { --cw: 38px; } .sp-hand::before { width: 180px; height: 140px; } .sp-verdict { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .sp-b, .sp-f, .sp-crown { animation-duration: .01s; } }

/* Seats across the top of the table: name first, cards below it (towards the middle), chat bubbles underneath,
   so nothing runs off the top of the screen. */
.seat.up .who { order: -2; } .seat.up .srow { order: -1; }
.seat.up .bubble { bottom: auto; top: calc(100% + 10px); }
.seat.up .bubble::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #fff; }
.seat.up.win:not(.me) .hand, .seat.up .hand { transform-origin: 50% 0; }

/* ---------- Clubs ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hclubs { display: grid; gap: 8px; padding: 16px 0; border-top: 1px solid var(--h-line); }
.hcrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hcrow span { display: flex; flex-direction: column; gap: 2px; }
.hcrow b { font-size: 15px; font-weight: 600; }
.hcrow small { font-size: 13px; color: var(--h-muted); }
.hcbtn { flex: none; min-height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--h-line); background: var(--h-field); color: var(--h-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.hclist { display: grid; gap: 6px; }
.hclist .hint { margin: 0; color: var(--h-muted); font-size: 13px; }
.hclub { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--h-line); background: var(--h-field); color: var(--h-ink); text-decoration: none; min-height: 44px; }
.hclub:hover { border-color: var(--h-ink); }
.hcmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hcmain b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcmain small { font-size: 12.5px; color: var(--h-muted); }
.hclive { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #1a7f4b; white-space: nowrap; }
.hclive i { width: 7px; height: 7px; border-radius: 50%; background: #2bb673; }
.hcnet b, .clubpg b.up, .clubpg .up { color: #1a7f4b; } .hcnet b.down, .clubpg b.down { color: #b3261e; }
:root[data-mode="dark"] .hcnet b, :root[data-mode="dark"] .clubpg .up { color: #4cc296; } :root[data-mode="dark"] .hcnet b.down, :root[data-mode="dark"] .clubpg b.down { color: #f08a80; }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) .hcnet b, :root:not([data-mode="light"]) .clubpg .up { color: #4cc296; } :root:not([data-mode="light"]) .hcnet b.down, :root:not([data-mode="light"]) .clubpg b.down { color: #f08a80; } }
.cbadge { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; letter-spacing: -.02em; }
.cbadge.big { width: 72px; height: 72px; border-radius: 20px; font-size: 26px; }
.devsign { display: flex; gap: 8px; width: 100%; }
.devsign input { flex: 1; min-width: 0; height: 46px !important; }
.devsign .hbtn { height: 46px; padding-inline: 18px; font-size: 15px; }

body.clubpage .bar { display: none; }
body.clubpage #app { grid-template-rows: 1fr; }
#club { min-height: 0; min-width: 0; background: var(--h-bg); color: var(--h-ink); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; overflow: hidden; }
.clubpg { width: 100%; min-width: 0; max-width: 640px; height: 100%; min-height: 0; display: flex; flex-direction: column; }
.cbhead { display: flex; align-items: center; gap: 10px; padding: 10px max(12px, env(safe-area-inset-right, 0px)) 6px max(8px, env(safe-area-inset-left, 0px)); }
.cbicon { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--h-ink); display: grid; place-items: center; cursor: pointer; text-decoration: none; }
.cbicon:hover { background: color-mix(in srgb, var(--h-ink) 7%, transparent); }
.cbicon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cbicon.sm { width: 36px; height: 36px; } .cbicon.sm svg { width: 18px; height: 18px; }
.cbtitle { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cbtitle b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cbtitle small { font-size: 12.5px; color: var(--h-muted); font-weight: 500; }
.cbtitle small.on { color: #1a7f4b; font-weight: 700; }
.cbtabs { display: flex; gap: 20px; padding: 0 max(20px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--h-line); overflow-x: auto; scrollbar-width: none; }
.cbtabs button { position: relative; flex: none; border: 0; background: none; padding: 12px 0 10px; font: inherit; font-size: 15px; font-weight: 600; color: var(--h-muted); cursor: pointer; border-bottom: 2.5px solid transparent; }
.cbtabs button.on { color: var(--h-ink); font-weight: 700; border-bottom-color: var(--h-ink); }
.cbdot { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; border-radius: 99px; background: #c8372d; color: #fff; font-style: normal; font-size: 11px; font-weight: 800; vertical-align: 1px; }
.cbbody { flex: 1; min-height: 0; overflow-y: auto; padding: 14px max(16px, env(safe-area-inset-right, 0px)) 18px max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 12px; }
.cbbody .hint { color: var(--h-muted); }
.cblive { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: radial-gradient(ellipse at 30% 0%, #3a403e, #272c2a 60%, #0d100f); color: #fff; }
.cblive > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cblive b { font-size: 16px; }
.cblive small { font-size: 12.5px; color: rgb(255 255 255 / .72); }
.cbeye { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #5be0a0; }
.cbeye i { width: 6px; height: 6px; border-radius: 50%; background: #3fd08a; }
.cblive.done .cbeye { color: rgb(255 255 255 / .6); }
.cbjoin { flex: none; min-height: 44px; padding: 0 18px; border-radius: 99px; border: 0; background: #f6f4ef; color: #17201d; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.cbfeed { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cbmsg { display: flex; gap: 10px; align-items: flex-start; }
.cbmsg.mine { flex-direction: row-reverse; }
.cbav { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; overflow: hidden; }
.cbav img { width: 100%; height: 100%; object-fit: cover; }
.cbbub { max-width: min(78%, 420px); background: var(--h-field); border: 1px solid var(--h-line); border-radius: 4px 16px 16px 16px; padding: 9px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; overflow-wrap: anywhere; }
.cbmsg.mine .cbbub { border-radius: 16px 4px 16px 16px; background: color-mix(in srgb, var(--h-ink) 7%, var(--h-field)); }
.cbbub > b { font-size: 12.5px; color: var(--h-muted); font-weight: 700; }
.cbbub small { font-size: 11.5px; color: var(--h-muted); }
.cbcards { display: flex; gap: 4px; padding: 2px 0; }
.cbcards .card { --cw: 32px; }
.cbsys { align-self: center; font-size: 12.5px; color: var(--h-muted); background: color-mix(in srgb, var(--h-ink) 6%, transparent); padding: 5px 12px; border-radius: 99px; text-align: center; }
.cbsess { background: var(--h-field); border: 1px solid var(--h-line); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.cbshead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cbshead b { font-size: 14.5px; } .cbshead small { font-size: 12px; color: var(--h-muted); }
.cbsrow { display: flex; justify-content: space-between; font-size: 14px; }
.cbsess .link, .cbgate .link { align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--h-ink); padding: 4px 0; }
.cbfoot { display: flex; gap: 8px; align-items: center; padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--h-line); background: var(--h-bg); }
.cbfoot input { flex: 1; min-width: 0; height: 46px; box-sizing: border-box; border-radius: 99px; border: 1px solid var(--h-line); background: var(--h-field); color: var(--h-ink); padding: 0 16px; font: inherit; font-size: 15px; }
.cbsend { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--h-line); background: var(--h-field); color: var(--h-ink); display: grid; place-items: center; cursor: pointer; }
.cbsend svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.cbstart { flex: none; min-height: 46px; padding: 0 16px; border: 0; border-radius: 99px; background: var(--h-ink); color: var(--h-on-ink); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.cbh { margin: 6px 2px 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--h-muted); display: flex; align-items: center; gap: 7px; }
.cbldot { width: 7px; height: 7px; border-radius: 50%; background: #2bb673; }
.cblist { background: var(--h-field); border: 1px solid var(--h-line); border-radius: 16px; display: flex; flex-direction: column; }
.cblrow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 44px; box-sizing: border-box; }
.cblrow + .cblrow { border-top: 1px solid var(--h-line); }
.cblrow.me { background: color-mix(in srgb, #2bb673 8%, transparent); }
.cbrank { width: 18px; font-size: 13px; font-weight: 700; color: var(--h-muted); }
.cblname { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; font-size: 15px; }
.cblname small { font-weight: 500; font-size: 12px; color: var(--h-muted); }
.cblrow > b { font-size: 15px; }
.cbnote { font-size: 12.5px; margin: 2px 4px; }
.cbrole { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--h-line); color: var(--h-muted); }
.cbrole.admin { background: var(--h-ink); color: var(--h-on-ink); border-color: var(--h-ink); }
.cbsmall { min-height: 36px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--h-line); background: transparent; color: var(--h-ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.cbsmall.solid { background: var(--h-ink); color: var(--h-on-ink); border-color: var(--h-ink); }
.cbscard { background: var(--h-field); border: 1px solid var(--h-line); border-radius: 16px; overflow: hidden; }
.cbsbtn { width: 100%; border: 0; background: transparent; color: var(--h-ink); font: inherit; text-align: left; padding: 12px 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 52px; }
.cbsbtn > span:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cbsbtn b { font-size: 15px; } .cbsbtn small { font-size: 12.5px; color: var(--h-muted); }
.cbstop { font-size: 13.5px; white-space: nowrap; }
.cbscard .cblist { border: 0; border-top: 1px solid var(--h-line); border-radius: 0; }
.cbgate { width: 100%; max-width: 420px; box-sizing: border-box; padding: 48px max(24px, env(safe-area-inset-right, 0px)) 32px max(24px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cbgate h2 { margin: 0; font-size: 28px; letter-spacing: -.03em; }
.cbgate p { margin: 0; color: var(--h-muted); line-height: 1.5; }
.cbgate #clubSign { width: 100%; }
.cbgate .primary { text-decoration: none; }
.cbgate .primary.big { min-height: 52px; padding: 0 28px; font-size: 16px; border-radius: 14px; }
.cbeye2 { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--h-muted); }
.cbok { color: #1a7f4b !important; font-weight: 600; }
.cbmenu { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.cbmenu button { min-height: 46px; text-align: left; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: inherit; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.cbmenu button.danger { color: #c8372d; }
.cbinv { display: flex; gap: 8px; }
.cbinv input { flex: 1; min-width: 0; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: inherit; padding: 0 12px; font: inherit; font-size: 14px; }

/* ---------- Profiles ---------- */
.acme { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.acme:hover b { text-decoration: underline; text-underline-offset: 2px; }
.cbplink { color: inherit; text-decoration: none; }
.cbplink:hover { text-decoration: underline; text-underline-offset: 2px; }
.pfhero { display: flex; gap: 16px; align-items: center; padding: 6px 2px 4px; }
.pfpic { flex: none; width: 84px; height: 84px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; overflow: hidden; background: var(--h-field); border: 1px solid var(--h-line); font-size: 40px; }
.pfpic.av svg { width: 100%; height: 100%; }
.pfwho { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pfwho h2 { margin: 0; font-size: 26px; letter-spacing: -.03em; line-height: 1.05; overflow-wrap: anywhere; }
.pfbadge { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; background: var(--h-ink); color: var(--h-on-ink); }
.pfwho q { font-size: 15px; font-style: italic; color: var(--h-ink); }
.pfwho small { font-size: 12.5px; color: var(--h-muted); }
.pfwho .link { padding: 0; font-size: 13.5px; font-weight: 700; color: var(--h-ink); }
.pftiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .pftiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pftile { background: var(--h-field); border: 1px solid var(--h-line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pftile span { font-size: 12px; color: var(--h-muted); }
.pftile b { font-size: 22px; letter-spacing: -.02em; }
.pftile small { font-size: 12px; color: var(--h-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfcard { background: var(--h-field); border: 1px solid var(--h-line); border-radius: 16px; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.pfcard .cbh { margin: 0; }
.pfcard .hint { margin: 0; font-size: 13.5px; }
.pfcard .cblist { border-radius: 12px; }
.pfbest { display: flex; align-items: center; gap: 14px; }
.pfbest .cbcards .card { --cw: 40px; }
.pfbest div { display: flex; flex-direction: column; } .pfbest b { font-size: 17px; } .pfbest small { font-size: 12.5px; color: var(--h-muted); }
.pfgames { flex-direction: row; gap: 12px; }
.pfgames > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pfgames b { font-size: 16px; } .pfgames small { font-size: 12px; color: var(--h-muted); }
.pfgames .link { padding: 0; font-size: 14px; font-weight: 700; color: var(--h-ink); }
.pfnet { display: flex; flex-direction: column; gap: 2px; }
.pfnet span { font-size: 40px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.pfnet span.up { color: #1a7f4b; } .pfnet span.down { color: #b3261e; }
:root[data-mode="dark"] .pfnet span.up { color: #4cc296; } :root[data-mode="dark"] .pfnet span.down { color: #f08a80; }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) .pfnet span.up { color: #4cc296; } :root:not([data-mode="light"]) .pfnet span.down { color: #f08a80; } }
.pfnet small { font-size: 12.5px; color: var(--h-muted); }
.pfform { display: flex; flex-direction: column; gap: 12px; }
.pftypes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pftype { text-align: left; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: inherit; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-height: 44px; }
.pftype b { font-size: 13.5px; } .pftype small { font-size: 11.5px; opacity: .7; line-height: 1.3; }
.pftype.on { border-color: var(--brass); box-shadow: inset 0 0 0 2px var(--brass); }
.pfform select { height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: inherit; padding: 0 10px; font: inherit; }
.cbav.hasav svg { width: 100%; height: 100%; }

/* The big profile button on the home page */
.homeacct:has(.profbtn) { justify-items: stretch; gap: 6px; }
.profbtn { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 12px 16px 12px 12px; border-radius: 18px; background: var(--h-ink); color: var(--h-on-ink); text-decoration: none; box-shadow: 0 8px 22px rgb(0 0 0 / .14); transition: transform .12s; }
.profbtn:active { transform: scale(.985); }
.profbtn .pbpic { flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--h-on-ink) 14%, transparent); font-size: 26px; object-fit: cover; }
.profbtn .pbpic svg { width: 100%; height: 100%; }
.pbtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pbtxt small { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.pbtxt b { font-size: 19px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbtxt em { font-style: normal; font-size: 13px; opacity: .7; }
.pbgo { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.pbout { justify-self: end; font-size: 13px; color: var(--h-muted); padding: 2px 4px; }

/* Profile page (stat sheet) */
.pfhpic { flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--h-ink); object-fit: cover; font-size: 22px; }
.pfhpic svg { width: 100%; height: 100%; }
.pfhead .cbtitle small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfall { background: #17201d; color: #f6f4ef; border-radius: 20px; padding: 16px 16px 10px; display: flex; flex-direction: column; gap: 4px; }
:root[data-mode="dark"] .pfall { background: #0b0f0d; border: 1px solid var(--h-line); }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) .pfall { background: #0b0f0d; border: 1px solid var(--h-line); } }
.pfallhead { display: flex; justify-content: space-between; font-size: 12px; color: rgb(246 244 239 / .6); }
.pfallhead span:first-child { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pfall > b { font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: #f6f4ef; }
.pfall > b.up { color: #5be0a0; } .pfall > b.down { color: #ff9b8f; }
.pfall .hint { color: rgb(246 244 239 / .55); margin: 6px 0; font-size: 13px; }
.pfchart { width: 100%; height: 86px; display: block; margin-top: 4px; }
.pfcardbtn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; border-radius: 16px; border: 0; cursor: pointer; font: inherit; font-size: 15.5px; font-weight: 800; color: #2a1d05; background: linear-gradient(180deg, #f6dc8e, #d9a93d); box-shadow: 0 6px 16px rgb(168 122 36 / .3); }
.pfcardbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pfmid { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; }
.pfring, .pfstyle { background: var(--h-field); border: 1px solid var(--h-line); border-radius: 18px; padding: 12px; }
.pfring { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pfring svg { width: 84px; height: 84px; }
.pfring .pfrtrack { stroke: color-mix(in srgb, var(--h-ink) 10%, transparent); } .pfring .pfrval { stroke: #1a7f4b; }
:root[data-mode="dark"] .pfring .pfrval { stroke: #4cc296; }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) .pfring .pfrval { stroke: #4cc296; } }
.pfring text { font: 800 19px Outfit, var(--body), sans-serif; fill: var(--h-ink); }
.pfring > span { font-size: 12px; color: var(--h-muted); text-align: center; }
.pfstyle { display: flex; flex-direction: column; gap: 9px; padding-inline: 14px; }
.pflab { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--h-muted); }
.pfbar { display: flex; flex-direction: column; gap: 3px; }
.pfbar > div { display: flex; justify-content: space-between; font-size: 12.5px; }
.pftrack { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--h-ink) 10%, transparent); overflow: hidden; }
.pftrack i { display: block; height: 100%; border-radius: 3px; background: var(--h-ink); }
.pftiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pftiles.three .pftile b { font-size: 17px; }
.pfbestrow { flex-direction: row; align-items: center; gap: 12px; }
.pfbestrow .cbcards .card { --cw: 34px; }
.pfbestrow > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pfbestrow b { font-size: 16px; } .pfbestrow small { font-size: 12px; color: var(--h-muted); }
.pfbestrow .link { padding: 0; font: inherit; color: var(--h-ink); text-decoration: underline; }

/* The player card pop-up */
.pcscrim .modal { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; width: min(100%, 360px) !important; overflow: visible !important; }
.pcard { position: relative; padding: 3px; border-radius: 26px; background: linear-gradient(135deg, #f6dc8e, #b8862e 30%, #f6dc8e 55%, #9c6f22 80%, #f6dc8e); box-shadow: 0 30px 60px rgb(0 0 0 / .55), 0 0 40px rgb(224 184 90 / .2); color: #eef2ef; font-family: Outfit, var(--body), sans-serif; animation: pcin .4s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes pcin { from { opacity: 0; transform: scale(.85) rotate(-3deg); } }
.pcinner { border-radius: 23px; background: linear-gradient(180deg, #1e2a25, #111614 70%); overflow: hidden; display: flex; flex-direction: column; padding-bottom: 16px; }
.pchead { height: 120px; position: relative; background: radial-gradient(circle at 30% 20%, rgb(91 224 160 / .55), transparent 55%), radial-gradient(circle at 80% 70%, rgb(224 184 90 / .45), transparent 55%), linear-gradient(135deg, #1a7f4b, #0f3d2a); padding: 14px 16px; box-sizing: border-box; }
.pctype { display: inline-block; font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; background: rgb(0 0 0 / .35); padding: 5px 10px; border-radius: 99px; color: #fff; }
.pcpic { position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%); width: 96px; height: 96px; border-radius: 50%; background: #0f1312; box-shadow: 0 0 0 4px #f2c64d, 0 0 0 9px rgb(242 198 77 / .25), 0 12px 24px rgb(0 0 0 / .5); display: grid; place-items: center; overflow: hidden; }
.pcimg { width: 100%; height: 100%; display: grid; place-items: center; object-fit: cover; font-size: 44px; }
.pcimg svg { width: 100%; height: 100%; }
.pcwho { padding: 54px 18px 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.pcwho h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.pcwho q { font-size: 14.5px; font-style: italic; color: #f6dc8e; }
.pcsub { font-size: 12px; color: rgb(255 255 255 / .55); }
.pcgrid { margin: 0 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgb(255 255 255 / .1); border-radius: 14px; overflow: hidden; }
.pcgrid > div { background: #151b19; padding: 10px 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.pcgrid span { font-size: 12px; color: rgb(255 255 255 / .6); } .pcgrid b { font-size: 17px; color: #fff; } .pcgrid b.pcgreen { color: #5be0a0; }
.pcbest { padding: 14px 14px 0; display: flex; align-items: center; gap: 14px; }
.pcfan { position: relative; width: 100px; height: 66px; flex: none; }
.pcfan > span { position: absolute; left: calc(var(--i) * 30px); top: calc((var(--i) - 1) * (var(--i) - 1) * 7px); transform: rotate(calc((var(--i) - 1) * 10deg)); }
.pcfan .card { --cw: 42px; box-shadow: 0 6px 14px rgb(0 0 0 / .4); }
.pcbest > div:last-child { display: flex; flex-direction: column; gap: 1px; }
.pclab { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .55); }
.pcbest b { font-size: 17px; color: #fff; } .pcbest small { font-size: 12px; color: rgb(255 255 255 / .6); }
.pcgames { padding: 14px 16px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pcgames > div { display: flex; flex-direction: column; gap: 2px; } .pcgames b { font-size: 15px; color: #fff; }
.pcnote { margin: 0 18px; font-size: 13.5px; color: rgb(255 255 255 / .7); text-align: center; }
.pcard.guest .pchead { height: 90px; }
.pcclose { position: absolute; top: -14px; right: -10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #f6f4ef; color: #17201d; font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 6px 16px rgb(0 0 0 / .35); display: grid; place-items: center; }