/* ═══════════════════════ base ═══════════════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --gold: #e8c266;
  --gold-hi: #f6dc9a;
  --text: #f2f3f8;
  --text-dim: rgba(230, 236, 252, .58);
  --red: #ff8585;
  --teal: #5fe0b7;

  /* liquid glass */
  --glass: rgba(255, 255, 255, .085);
  --glass-2: rgba(255, 255, 255, .13);
  --glass-line: rgba(255, 255, 255, .17);
  --glass-line-hi: rgba(255, 255, 255, .34);
  --blur: blur(26px) saturate(1.7);
  --blur-lite: blur(14px) saturate(1.5);
  --glass-grad: linear-gradient(165deg, rgba(255,255,255,.14), rgba(255,255,255,.045) 42%, rgba(255,255,255,.09));
  --glass-shadow: 0 24px 60px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(255,255,255,.05);

  --table-r: 148px;

  /* felt + ambient aurora (retinted per theme below) */
  --felt1: #2c7a4b; --felt2: #17452a;
  --am1: rgba(38, 168, 106, .72);
  --am2: rgba(32, 128, 150, .62);
  --am3: rgba(184, 138, 40, .46);
  --am4: rgba(46, 104, 186, .42);
}
body[data-felt="midnight"] { --felt1: #2d4c7c; --felt2: #16263f;
  --am1: rgba(58, 110, 214, .70); --am2: rgba(126, 82, 224, .56); --am3: rgba(34, 152, 186, .46); --am4: rgba(84, 70, 190, .44); }
body[data-felt="merlot"]   { --felt1: #8c3040; --felt2: #4a1620;
  --am1: rgba(212, 70, 98, .64); --am2: rgba(172, 70, 160, .48); --am3: rgba(212, 136, 48, .42); --am4: rgba(140, 46, 82, .52); }
body[data-felt="violet"]   { --felt1: #5d3d8f; --felt2: #2c1b4a;
  --am1: rgba(146, 90, 240, .68); --am2: rgba(212, 76, 180, .48); --am3: rgba(70, 104, 224, .46); --am4: rgba(104, 58, 194, .46); }
body[data-felt="slate"]    { --felt1: #4a5566; --felt2: #252c38;
  --am1: rgba(112, 138, 178, .62); --am2: rgba(80, 158, 192, .46); --am3: rgba(138, 126, 182, .40); --am4: rgba(70, 94, 140, .46); }
body[data-felt="ocean"]    { --felt1: #217a74; --felt2: #0e3a38;
  --am1: rgba(32, 172, 160, .70); --am2: rgba(36, 126, 214, .54); --am3: rgba(102, 200, 168, .38); --am4: rgba(28, 104, 150, .48); }
/* black & gold — companion to the Noir card back */
body[data-felt="noir"]     { --felt1: #4c3c12; --felt2: #0d0b06;
  --am1: rgba(214, 170, 56, .58); --am2: rgba(140, 102, 26, .5); --am3: rgba(255, 206, 100, .32); --am4: rgba(64, 52, 20, .6); }
body[data-felt="noir"] .felt-ring, body[data-felt="noir"] .tp-felt-ring { border-color: rgba(232, 194, 102, .22); }
body[data-felt="noir"] .felt-logo, body[data-felt="noir"] .tp-felt-logo { color: rgba(232, 194, 102, .1); }

html { background: #090a10; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  /* stays transparent: the aurora ::before below paints the backdrop —
     an opaque body background would cover the z-index:-1 layer */
  background: transparent;
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
/* ambient aurora the glass frosts against */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 58% at 14% 16%, var(--am1), transparent 72%),
    radial-gradient(46% 52% at 86% 12%, var(--am2), transparent 72%),
    radial-gradient(58% 64% at 80% 88%, var(--am3), transparent 74%),
    radial-gradient(44% 50% at 14% 86%, var(--am4), transparent 72%),
    linear-gradient(180deg, #0e1119, #08090e);
}
/* fine grain so the glass has texture to catch */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select { font: inherit; }
.hidden { display: none !important; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

.screen { position: fixed; inset: 0; }

/* ═══════════════════════ buttons ═══════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 22px; border-radius: 14px; font-weight: 700; letter-spacing: .02em;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active { transform: scale(.96); }
.btn-gold {
  background: linear-gradient(180deg, #ffffff, #e2e6f2);
  color: #14161f;
  box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(255,255,255,.35);
}
.btn-gold:hover { filter: brightness(1.04); transform: translateY(-1px); }
.btn-gold:active { transform: scale(.96); }
.btn-dim {
  background: var(--glass);
  border: 1px solid var(--glass-line); color: var(--text);
  backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-dim:hover { background: var(--glass-2); border-color: var(--glass-line-hi); }
.btn-big { width: 100%; padding: 14px; font-size: 17px; border-radius: 16px; }

/* ═══════════════════════ home ═══════════════════════ */
/* Auto margins (not justify-content: center) so a card taller than the
   viewport scrolls instead of clipping at the top. */
#home { display: flex; flex-direction: column; align-items: center; overflow-y: auto; padding: 24px 12px; }
.home-bg-suits { position: absolute; inset: 0; pointer-events: none; opacity: .05; }
.home-bg-suits::before, .home-bg-suits::after {
  content: "♠"; position: absolute; font-size: 44vmin; line-height: 1; color: #fff;
}
.home-bg-suits::before { top: -8vmin; left: -6vmin; transform: rotate(-18deg); }
.home-bg-suits::after { content: "♦"; bottom: -10vmin; right: -4vmin; transform: rotate(14deg); }

.home-card {
  width: min(440px, 94vw);
  background: var(--glass-grad);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line);
  border-top-color: var(--glass-line-hi);
  border-radius: 32px; padding: 30px 28px 26px;
  box-shadow: var(--glass-shadow); position: relative; z-index: 1;
  margin-top: auto; flex: none;
}
.logo { font-size: 34px; text-align: center; font-weight: 800; letter-spacing: .01em; text-shadow: 0 2px 24px rgba(0,0,0,.4); }
.logo em { font-style: normal; color: var(--gold); }
.logo .suit { font-size: 26px; vertical-align: 6px; margin: 0 2px; }
.logo .suit.red { color: var(--red); }
.tagline { text-align: center; color: var(--text-dim); font-size: 13.5px; margin: 6px 0 22px; }

.profile-row { display: flex; gap: 12px; margin-bottom: 20px; }
.avatar-btn {
  width: 52px; height: 52px; border-radius: 50%; flex: none; font-size: 26px;
  background: var(--glass); border: 1.5px solid var(--glass-line-hi);
  backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .12s ease;
}
.avatar-btn:hover { transform: scale(1.08); }
#nameInput { flex: 1; }

input[type=text], input[type=number], select {
  width: 100%; background: rgba(255,255,255,.065); color: var(--text);
  border: 1px solid var(--glass-line);
  border-radius: 13px; padding: 11px 13px; outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
input::placeholder { color: rgba(230,236,252,.38); }
input:focus, select:focus {
  border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.09);
  box-shadow: 0 0 0 3px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.12);
}
select option { background: #171a26; color: var(--text); }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { opacity: 1; }

.home-tabs {
  display: flex; gap: 6px; background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 15px; padding: 5px; margin-bottom: 18px;
}
.home-tab { flex: 1; padding: 9px; border-radius: 11px; color: var(--text-dim); font-weight: 700; transition: background .15s, color .15s; }
.home-tab.active {
  background: var(--glass-2); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 14px rgba(0,0,0,.25);
  border: 0;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.home-foot { margin: 18px 0 auto; color: rgba(230,236,252,.35); font-size: 12px; position: relative; z-index: 1; flex: none; text-align: center; }
.home-seo { max-width: 460px; margin: 0 auto 8px; line-height: 1.55; color: rgba(230,236,252,.44); }
.home-seo a { color: rgba(230,236,252,.6); text-decoration: none; }
.home-seo a:hover { color: var(--text); text-decoration: underline; }
.home-foot-nav { margin-top: 6px; }
.home-foot-nav a { color: rgba(230,236,252,.52); text-decoration: none; }
.home-foot-nav a:hover { color: var(--text); text-decoration: underline; }

/* settings form */
.settings-form { display: flex; flex-direction: column; gap: 13px; margin-bottom: 18px; }
.field { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.field > span, .field-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--text-dim); }
.field-label { display: block; margin: 12px 0 8px; }
.field-pair { display: flex; gap: 12px; }
.check-row { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px; }
.check-row small { display: block; color: var(--text-dim); font-size: 12px; font-weight: 400; }
/* custom-drawn checkbox: native accent-color rendering is unreliable on
   Android (white check on white box), this looks identical everywhere */
.check-row input {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 6px; flex: none; margin: 0;
  border: 1.5px solid rgba(255,255,255,.38);
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.check-row input:checked {
  border-color: #fff;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23141722' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px 13px no-repeat;
}
.check-row.big {
  padding: 11px 13px; background: rgba(255,255,255,.055);
  border: 1px solid var(--glass-line); border-radius: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.check-row.big:hover { background: rgba(255,255,255,.085); }

/* ═══════════════════════ topbar ═══════════════════════ */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; padding: 0 12px;
  background: linear-gradient(180deg, rgba(6,7,11,.55), transparent);
}
.tb-left, .tb-right { display: flex; align-items: center; gap: 6px; }
.tb-btn {
  width: 38px; height: 38px; border-radius: 12px; font-size: 17px; position: relative;
  background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
}
.tb-btn:hover { background: var(--glass-2); border-color: var(--glass-line-hi); }
.badge {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; border-radius: 9px;
  background: #e14b4b; color: #fff; font-size: 10.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.code-chip {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 12px;
  backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  font-weight: 800; letter-spacing: .22em; color: var(--gold-hi); font-size: 14px;
}
.code-chip .copy-ico { letter-spacing: 0; color: var(--text-dim); font-size: 13px; }
.code-chip:hover { border-color: var(--glass-line-hi); background: var(--glass-2); }
.tb-center { font-size: 13px; color: var(--text-dim); font-weight: 600; text-align: center; }
.tb-center b { color: var(--text); }

/* ═══════════════════════ stage & table ═══════════════════════ */
#stageWrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage { position: relative; width: 1200px; height: 760px; transform-origin: center center; flex: none; }

#tableOval { position: absolute; left: 66px; right: 66px; top: 104px; bottom: 132px; }
/* glass rim around the felt */
.rail {
  position: absolute; inset: 0; border-radius: var(--table-r);
  background: var(--glass-grad);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(255,255,255,.26);
  box-shadow:
    0 44px 100px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35),
    inset 0 1.5px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(255,255,255,.07);
}
.felt {
  position: absolute; inset: 20px; border-radius: calc(var(--table-r) - 20px);
  background:
    radial-gradient(115% 100% at 50% 34%,
      color-mix(in srgb, var(--felt1) 86%, transparent) 0%,
      color-mix(in srgb, var(--felt2) 92%, transparent) 88%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 10px 40px rgba(0,0,0,.42), inset 0 -4px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.12);
}
.felt-ring {
  position: absolute; inset: 30px; border-radius: calc(var(--table-r) - 50px);
  border: 1.5px solid rgba(255,255,255,.09);
}
.felt-logo {
  position: absolute; left: 50%; top: 68%; transform: translate(-50%, -50%);
  font-size: 34px; font-weight: 800; color: rgba(255,255,255,.08); letter-spacing: .04em;
  user-select: none; pointer-events: none;
}
.felt-logo em { font-style: normal; }

#startBtn { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); font-size: 18px; padding: 14px 30px; z-index: 12; border-radius: 18px; }
#pokerBotBtn { position: absolute; left: 50%; top: calc(56% + 58px); transform: translate(-50%, -50%); z-index: 12; white-space: nowrap; }
#stage.portrait #pokerBotBtn { top: calc(47% + 58px); }

#potArea { position: absolute; left: 50%; top: 200px; transform: translateX(-50%); z-index: 8; }
#potChip {
  display: flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 26px rgba(0,0,0,.3);
  font-weight: 800; font-size: 17px;
}
.pot-label { font-size: 10px; letter-spacing: .18em; color: var(--gold-hi); }

#bombBanner {
  position: absolute; left: 50%; top: 164px; transform: translateX(-50%); z-index: 8;
  font-size: 13px; font-weight: 900; letter-spacing: .14em; color: #ffb02e;
  text-shadow: 0 0 18px rgba(255, 140, 0, .8); animation: bombPulse 1.1s ease infinite alternate;
}
@keyframes bombPulse { from { opacity: .75; } to { opacity: 1; transform: translateX(-50%) scale(1.06); } }

#boards { position: absolute; left: 50%; top: 250px; transform: translateX(-50%); z-index: 8; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.board-row { display: flex; gap: 9px; align-items: center; position: relative; }
.board-tag {
  position: absolute; left: -36px; top: 50%; transform: translateY(-50%);
  font-size: 10px; font-weight: 900; letter-spacing: .1em; color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  padding: 3px 7px; border-radius: 999px;
}

#winBanner {
  position: absolute; left: 50%; top: 148px; transform: translateX(-50%); z-index: 14;
  background: linear-gradient(165deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(255,255,255,.3); border-radius: 18px; padding: 10px 22px;
  text-align: center; font-size: 15.5px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35), 0 0 30px rgba(232,194,102,.12);
  animation: bannerIn .35s cubic-bezier(.2, 1.4, .4, 1); max-width: 640px;
}
#winBanner .win-line { padding: 2px 0; }
#winBanner b { color: var(--gold-hi); }
#winBanner small { color: var(--text-dim); }
@keyframes bannerIn { from { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(.92); } }

#tableMsg {
  position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); z-index: 7;
  color: rgba(240,244,255,.75); font-size: 15px; font-weight: 600; text-align: center;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  padding: 10px 20px; border-radius: 16px;
}

#dealerBtn {
  position: absolute; width: 30px; height: 30px; border-radius: 50%; z-index: 9;
  background: linear-gradient(180deg, #fff, #d8dce8); color: #222; font-weight: 900; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.5), inset 0 1px 0 #fff;
  transition: left .5s cubic-bezier(.5,0,.3,1), top .5s cubic-bezier(.5,0,.3,1);
  transform: translate(-50%, -50%);
}

/* ═══════════════════════ seats ═══════════════════════ */
.seat { position: absolute; transform: translate(-50%, -50%); z-index: 10; width: 148px; text-align: center; }
/* empty seat = a glass chair hugging the rail: rounded back facing out,
   flat edge facing the table. --rot (set by table.js) points it at the
   table center; the inner label counter-rotates to stay upright. */
.seat-empty-btn {
  width: 72px; height: 42px; margin: 0 auto;
  position: relative; color: rgba(255,255,255,.6);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.26); border-bottom-color: rgba(255,255,255,.14);
  border-radius: 38px 38px 11px 11px;
  background: radial-gradient(120% 160% at 50% -10%,
    rgba(255,255,255,.22), rgba(255,255,255,.05) 55%, rgba(255,255,255,.02));
  backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
  box-shadow: 0 8px 20px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -6px 12px rgba(0,0,0,.18);
  transform: rotate(var(--rot, 0deg));
  transition: transform .25s cubic-bezier(.3,1.8,.5,1), box-shadow .2s ease,
    border-color .2s ease, color .2s ease;
}
.seat-empty-btn::before {
  content: ""; position: absolute; inset: 5px 6px 6px; border-radius: 28px 28px 7px 7px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 60%);
  transition: border-color .2s ease;
}
.sit-inner {
  position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1;
  transform: rotate(calc(var(--rot, 0deg) * -1));
  transition: transform .25s cubic-bezier(.3,1.8,.5,1);
}
.sit-plus { font-size: 16px; font-weight: 500; }
.sit-label { font-size: 7.5px; font-weight: 800; letter-spacing: .24em; text-indent: .24em; opacity: .8; margin-top: 1px; }
.seat-empty-btn:hover:not(:disabled) {
  color: #ffe9b3; border-color: rgba(232,194,102,.8);
  transform: rotate(var(--rot, 0deg)) scale(1.16);
  box-shadow: 0 10px 26px rgba(0,0,0,.4), 0 0 24px rgba(232,194,102,.32), inset 0 1px 0 rgba(255,255,255,.4);
}
.seat-empty-btn:hover:not(:disabled)::before { border-color: rgba(232,194,102,.5); }
.seat-empty-btn:disabled { opacity: .35; cursor: default; }

.seat-pod { position: relative; display: inline-block; }
.seat-cards { display: flex; justify-content: center; margin-bottom: -30px; position: relative; z-index: 1; min-height: 70px; }
.seat-cards .pcard { width: 50px; border-radius: 5px; box-shadow: 0 2px 6px rgba(0,0,0,.45); margin: 0 -11px; transition: transform .2s; }
.seat-cards .pcard svg { display: block; width: 100%; height: auto; border-radius: 5px; }
.seat.folded .seat-cards, .seat.folded .avatar-wrap { opacity: .38; filter: saturate(.4); }
/* a folded hand voluntarily shown reads clearly, just a touch muted */
.seat.folded.shown .seat-cards { opacity: .92; filter: none; }

.avatar-wrap { position: relative; width: 74px; height: 74px; margin: 0 auto; z-index: 2; }
.avatar-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(165deg, rgba(46,52,72,.85), rgba(20,23,34,.9));
  background-size: cover; background-position: center; /* uploaded avatars */
  border: 3px solid var(--ring, var(--gold));
  display: flex; align-items: center; justify-content: center; font-size: 34px;
  box-shadow: 0 8px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.2);
  transition: box-shadow .2s ease;
}
.seat.turn .avatar-ring { box-shadow: 0 0 0 3px rgba(255,255,255,.25), 0 0 26px 4px var(--ring, var(--gold)); animation: turnPulse 1.2s ease infinite alternate; }
@keyframes turnPulse { to { box-shadow: 0 0 0 3px rgba(255,255,255,.4), 0 0 36px 8px var(--ring, var(--gold)); } }
.timer-svg { position: absolute; inset: -7px; transform: rotate(-90deg); pointer-events: none; }
.timer-svg circle { fill: none; stroke: var(--gold); stroke-width: 3.4; stroke-linecap: round; }

/* NIT-game button: a small badge pinned to the avatar until the player
   wins a pot outright */
.nit-chip {
  position: absolute; top: -4px; right: -12px; z-index: 4;
  background: linear-gradient(180deg, #ff9d5c, #e14b4b);
  color: #fff; font-size: 9px; font-weight: 900; letter-spacing: .1em;
  padding: 3px 7px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 3px 9px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4);
  pointer-events: none;
}

.seat-info {
  position: relative; z-index: 3; margin-top: -14px;
  background: linear-gradient(165deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
  border: 1px solid rgba(255,255,255,.22); border-radius: 14px; padding: 5px 10px 6px;
  min-width: 108px; display: inline-block;
  box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.3);
}
.seat-name { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.seat-stack { font-size: 13.5px; font-weight: 800; color: var(--gold-hi); text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.seat-stack.allin { color: var(--red); font-size: 11px; letter-spacing: .08em; }
.seat-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; color: var(--text-dim); }
.seat.away .avatar-ring { filter: grayscale(.8) brightness(.7); }

.action-flash {
  position: absolute; left: 50%; top: -20px; transform: translateX(-50%); z-index: 5;
  background: rgba(16,18,26,.82); border: 1px solid rgba(255,255,255,.2); color: #fff;
  backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px rgba(0,0,0,.35);
  animation: flashIn .18s ease, flashOut .5s ease 1.7s forwards;
}
.action-flash.f-fold { color: #ffa2a2; }
.action-flash.f-check, .action-flash.f-call { color: #8df0d2; }
.action-flash.f-bet, .action-flash.f-raise { color: var(--gold-hi); }
@keyframes flashIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } }
@keyframes flashOut { to { opacity: 0; } }

/* bet chips on the felt */
.bet-spot { position: absolute; transform: translate(-50%, -50%); z-index: 7; display: flex; align-items: center; gap: 5px; animation: chipIn .22s cubic-bezier(.2,1.3,.4,1); }
.bet-chip { width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, var(--chip, #e0b64d), color-mix(in srgb, var(--chip, #e0b64d) 55%, #000) 80%);
  border: 3px dashed rgba(255,255,255,.75); box-shadow: 0 2px 5px rgba(0,0,0,.5); }
.bet-amt { font-size: 15px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
@keyframes chipIn { from { opacity: 0; transform: translate(-50%,-50%) scale(.4); } }

.fly-chip { position: absolute; z-index: 20; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), #8a6b23 80%);
  border: 3px dashed rgba(255,255,255,.8); box-shadow: 0 3px 9px rgba(0,0,0,.5);
  transition: left .7s cubic-bezier(.4,0,.3,1), top .7s cubic-bezier(.4,0,.3,1), opacity .2s ease .6s;
  transform: translate(-50%,-50%); pointer-events: none; }

/* ── FX overlay: transient flying cards & chips (see js/fx.js) ──────────── */
#fxLayer { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
#fxLayer .fx-card { position: absolute; left: 0; top: 0; will-change: transform, opacity;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.45)); }
#fxLayer .fx-card svg { width: 100%; height: 100%; display: block; }
#fxLayer .fx-chip { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform, opacity;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55) 0 18%, transparent 20%), var(--chip, var(--gold));
  border: 2.5px dashed rgba(255,255,255,.8); box-shadow: 0 4px 12px rgba(0,0,0,.45), inset 0 0 0 3px rgba(0,0,0,.18); }

/* ═══════════════════════ cards ═══════════════════════ */
.pcard { position: relative; }
.pcard.dealt { animation: dealIn .3s cubic-bezier(.2,1.2,.4,1) backwards; }
@keyframes dealIn { from { opacity: 0; transform: translateY(-16px) scale(.7) rotate(-4deg); } }
.board-row .pcard { width: 96px; border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.45); }
.board-row .pcard svg { display: block; width: 100%; height: auto; border-radius: 8px; }
#boards.double .board-row .pcard { width: 74px; }
#boards.triple { gap: 7px; }
#boards.triple .board-row .pcard { width: 58px; }
.pcard.winner-glow { box-shadow: 0 0 0 2.5px var(--gold), 0 0 22px 3px rgba(232,194,102,.65) !important; z-index: 2; }
.pcard.loser-dim { opacity: .45; filter: saturate(.5) brightness(.75); }

/* hero cards row (bigger) */
.seat.hero .seat-cards .pcard { width: 72px; margin: 0 -14px; border-radius: 8px; }
.seat.hero .seat-cards { margin-bottom: -36px; min-height: 101px; }
.seat.hero .seat-cards .pcard:hover { transform: translateY(-8px); }

/* ═══════════════════════ action bar ═══════════════════════ */
#actionBar {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 45;
  width: min(510px, calc(100vw - 20px));
  background: var(--glass-grad);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line); border-top-color: var(--glass-line-hi);
  border-radius: 20px; padding: 10px 12px 8px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.28);
}
.action-buttons { display: flex; gap: 8px; }
.act-btn {
  flex: 1; padding: 11px 6px; border-radius: 13px; font-size: 15px; font-weight: 800; letter-spacing: .02em;
  border: 1px solid transparent; transition: transform .1s ease, filter .12s ease, background .12s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.act-btn:active { transform: scale(.96); }
.act-btn:disabled { opacity: .35; cursor: default; }
.act-btn small { display: block; font-size: 11.5px; font-weight: 700; opacity: .85; }
.act-fold { background: rgba(255,92,92,.13); color: #ffabab; border-color: rgba(255,120,120,.32); }
.act-fold:hover { background: rgba(255,92,92,.22); }
.act-call { background: rgba(64,224,170,.13); color: #97f2d4; border-color: rgba(110,240,200,.3); }
.act-call:hover { background: rgba(64,224,170,.22); }
.act-raise {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, #c99b3a);
  color: #241c07; border-color: rgba(255,240,200,.45);
  box-shadow: 0 8px 24px rgba(232,194,102,.3), inset 0 1px 0 rgba(255,255,255,.55);
}
.act-raise:hover { filter: brightness(1.06); }

/* "what do I have" readout inside the bar — desktop only; on phones the
   seat-pod hint is not covered so this would be a duplicate */
#abHint {
  text-align: center; font-size: 12.5px; font-weight: 800; color: var(--gold-hi);
  letter-spacing: .02em; margin-bottom: 8px; text-shadow: 0 1px 3px rgba(0,0,0,.5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.portrait #abHint, body.compact-land #abHint { display: none; }

#betPanel { margin-bottom: 9px; }
.bet-presets { display: flex; gap: 6px; margin-bottom: 8px; }
.bet-presets button {
  flex: 1; padding: 6px 2px; font-size: 11.5px; font-weight: 800; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid var(--glass-line); color: var(--text-dim);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.bet-presets button:hover { color: #fff; border-color: var(--glass-line-hi); background: rgba(255,255,255,.12); }
.bet-slider-row { display: flex; gap: 10px; align-items: center; }
/* min-width: 0 lets the slider shrink below its native ~129px minimum in
   the narrow docked panel instead of pushing the input out of the box */
#betSlider { flex: 1; min-width: 0; accent-color: #fff; height: 22px; }
#betInput { width: 92px; text-align: center; font-weight: 800; padding: 8px; }

#timerBar { height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; margin-top: 8px; overflow: hidden; }
#timerFill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--teal), var(--gold), var(--red)); border-radius: 2px; }

/* player controls dock top-left, under the topbar, clear of the felt & action bar */
#heroPrompt {
  position: fixed; left: 12px; top: 60px; z-index: 44;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  max-width: 210px;
}
#heroPrompt .btn { padding: 9px 15px; font-size: 13.5px; white-space: nowrap; }
#callTimeBtn.on { border-color: rgba(232,194,102,.6); color: var(--gold-hi); box-shadow: 0 0 14px rgba(232,194,102,.2), inset 0 1px 0 rgba(255,255,255,.18); }

/* on-table moment buttons: rabbit hunt below the board, show-cards on the
   hero's hole cards — inside #stage so they scale with the table */
#rabbitBtn, #showCardsBtn {
  position: absolute; left: 50%; transform: translateX(-50%);
  z-index: 13; white-space: nowrap;
}
#rabbitBtn { top: 402px; }
#showCardsBtn { top: 575px; }
#stage.portrait #rabbitBtn { top: 585px; }
#stage.portrait #showCardsBtn { top: 990px; }
#stage.portrait #rabbitBtn, #stage.portrait #showCardsBtn { font-size: 21px; padding: 13px 24px; border-radius: 19px; }
#stage.compact #rabbitBtn { top: 342px; }
#stage.compact #showCardsBtn { top: 445px; }
#stage.compact #rabbitBtn, #stage.compact #showCardsBtn { font-size: 18px; padding: 11px 20px; border-radius: 17px; }

/* run-it-twice vote */
#ritBar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 46;
  min-width: min(420px, calc(100vw - 20px)); text-align: center;
  background: var(--glass-grad);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(255,215,120,.4); border-top-color: rgba(255,235,180,.6);
  border-radius: 22px; padding: 14px 18px 13px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 30px rgba(232,194,102,.14), inset 0 1px 0 rgba(255,255,255,.28);
  animation: bannerIn .3s cubic-bezier(.2, 1.4, .4, 1);
}
.rit-title { font-weight: 800; font-size: 15px; margin-bottom: 10px; color: var(--gold-hi); }
.rit-buttons { display: flex; gap: 8px; }
.rit-buttons button {
  flex: 1; padding: 11px 8px; border-radius: 13px; font-weight: 800; font-size: 15px;
  background: rgba(255,255,255,.08); border: 1px solid var(--glass-line); color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .1s ease, background .12s ease, border-color .12s ease;
}
.rit-buttons button:hover {
  background: linear-gradient(180deg, #ffffff, #e2e6f2); color: #14161f;
  border-color: rgba(255,255,255,.6); transform: translateY(-1px);
}
.rit-buttons button:active { transform: scale(.95); }
.rit-wait { color: var(--teal); font-weight: 700; font-size: 13.5px; }
body.compact-land #ritBar { left: auto; right: 6px; bottom: 46px; transform: none; min-width: 176px; width: 176px; padding: 10px; }
body.compact-land .rit-buttons { flex-direction: column; gap: 6px; }
body.compact-land .rit-title { font-size: 13px; }

/* ═══════════════════════ side panel ═══════════════════════ */
#sidePanel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 88vw); z-index: 50;
  background: linear-gradient(200deg, rgba(34,38,54,.85), rgba(15,17,25,.9));
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-left: 1px solid var(--glass-line);
  display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(0,0,0,.45);
  animation: panelIn .22s ease;
}
@keyframes panelIn { from { transform: translateX(40px); opacity: 0; } }
.sp-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,.1); font-weight: 800; gap: 8px; }
.sp-tabs {
  display: flex; gap: 4px; flex: 1; background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.09); border-radius: 12px; padding: 4px;
}
.sp-tab { flex: 1; padding: 7px 4px; border-radius: 9px; color: var(--text-dim); font-weight: 700; font-size: 13px; transition: background .15s, color .15s; }
.sp-tab.active { background: var(--glass-2); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.sp-pane { flex: 1; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.log-entry { color: var(--text-dim); }
.log-entry.important { color: var(--gold-hi); }
/* hand splitter: "Hand #12 · NLH 1/2" between rule lines */
.log-entry.divider {
  display: flex; align-items: center; gap: 8px;
  color: var(--gold-hi); font-weight: 700; margin-top: 5px;
}
.log-entry.divider::before, .log-entry.divider::after {
  content: ""; flex: 1 1 0; min-width: 10px; height: 1px; background: rgba(255,255,255,.16);
}
.chat-entry b { color: var(--gold-hi); }
.chat-time { color: rgba(230,236,252,.38); font-size: 10.5px; margin-right: 7px; font-variant-numeric: tabular-nums; }
.chat-entry.system { color: #ffd9a8; font-style: italic; }
#chatForm { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.1); }
#chatForm .btn { padding: 8px 14px; }

/* ledger tab */
.ledger-row {
  background: rgba(255,255,255,.055); border: 1px solid var(--glass-line);
  border-radius: 14px; padding: 9px 12px 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.lg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lg-name { font-weight: 800; font-size: 14px; }
.lg-net { font-weight: 800; font-size: 14px; color: var(--text-dim); }
.lg-net.up { color: var(--teal); }
.lg-net.down { color: var(--red); }
.lg-aka { color: var(--text-dim); font-size: 11.5px; font-style: italic; margin-top: 1px; }
.lg-detail { color: var(--text-dim); font-size: 12px; margin-top: 4px; }
.lg-detail small { opacity: .8; }
.ledger-empty { color: var(--text-dim); text-align: center; padding: 22px 10px; font-size: 13px; }

/* ═══════════════════════ modals ═══════════════════════ */
/* All the blur lives on the overlay: a backdrop-filter element is a backdrop
   root, so a nested backdrop-filter on .modal couldn't see the page anyway. */
#modalBackdrop {
  position: fixed; inset: 0; z-index: 90; background: rgba(6,8,14,.35);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(34px) saturate(1.5); -webkit-backdrop-filter: blur(34px) saturate(1.5);
}
.modal {
  width: min(430px, 94vw); max-height: 88vh; overflow-y: auto;
  background: linear-gradient(165deg, rgba(64,74,102,.55), rgba(24,28,42,.68));
  border: 1px solid rgba(255,255,255,.22); border-top-color: rgba(255,255,255,.4);
  border-radius: 28px; padding: 24px;
  box-shadow: 0 40px 100px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3);
  animation: modalIn .2s cubic-bezier(.2,1.3,.4,1);
}
@keyframes modalIn { from { opacity: 0; transform: scale(.92) translateY(12px); } }
.modal h2 { font-size: 20px; margin-bottom: 16px; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.modal-note { font-size: 12px; color: var(--text-dim); margin-top: 12px; text-align: center; }

.cz-tabs { display: flex; gap: 6px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.09); border-radius: 13px; padding: 4px; margin-bottom: 16px; }
.cz-tab { flex: 1; padding: 8px; border-radius: 10px; color: var(--text-dim); font-weight: 700; font-size: 13.5px; }
.cz-tab.active { background: var(--glass-2); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.cz-panel { display: none; }
.cz-panel.active { display: block; }

.swatch-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.swatch {
  aspect-ratio: 1; border-radius: 14px; background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.13);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  transition: transform .1s ease, border-color .1s ease;
}
.swatch:hover { transform: scale(1.08); }
.swatch.sel { border-color: rgba(255,255,255,.8); box-shadow: 0 0 0 3px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.2); }
.swatch-grid.backs { grid-template-columns: repeat(5, 1fr); }
.swatch-grid.backs .swatch { aspect-ratio: 100/140; padding: 4px; }
.swatch-grid.backs .swatch svg { width: 100%; height: 100%; border-radius: 7px; }
.swatch-grid.felts { grid-template-columns: repeat(3, 1fr); }
.swatch-grid.felts .swatch { aspect-ratio: 1.7; font-size: 12px; font-weight: 800; color: rgba(255,255,255,.85); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.color-swatch span { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 6px rgba(0,0,0,.3); }

#playerAdmin { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.pa-row {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.055); border: 1px solid var(--glass-line);
  border-radius: 13px; padding: 8px 12px; font-size: 13.5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.pa-actions { display: flex; gap: 10px; flex: none; }
.pa-row button { color: var(--gold-hi); font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.pa-row button.pa-kick { color: var(--red); }
.pa-row button:hover { text-decoration: underline; }
.pf-transfer { color: var(--gold-hi); width: 100%; margin-bottom: 10px; }

/* ═══════════════════════ hand hint ═══════════════════════ */
.hand-hint {
  margin-top: 5px; display: none; padding: 3px 11px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 16px rgba(0,0,0,.3);
  font-size: 11.5px; font-weight: 800; color: var(--gold-hi); line-height: 1.5;
  white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.hand-hint.on { display: inline-block; }
.hand-hint .hh-tag { color: var(--text-dim); font-weight: 700; margin-right: 4px; }

/* ═══════════════════════ rabbit cards ═══════════════════════ */
.pcard.rabbit { opacity: .8; position: relative; }
.pcard.rabbit::after {
  content: "🐰"; position: absolute; top: -9px; right: -7px; font-size: 15px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.7));
}
.pcard.rabbit svg { outline: 2px dashed rgba(255,255,255,.55); outline-offset: -2px; border-radius: 8px; }


/* ═══════════════════════ join approval ═══════════════════════ */
#approvalBar {
  position: fixed; top: 58px; left: 50%; transform: translateX(-50%); z-index: 60;
  display: flex; flex-direction: column; gap: 8px; max-width: min(480px, 94vw);
}
.approval-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: linear-gradient(165deg, rgba(52,58,80,.7), rgba(24,27,40,.78));
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(255,255,255,.28); border-radius: 18px;
  box-shadow: 0 16px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3);
  animation: toastIn .25s ease;
  font-size: 14px;
}
.approval-row .ar-avatar { font-size: 22px; }
.approval-row b { color: var(--gold-hi); }
.approval-row .btn { padding: 7px 14px; font-size: 13px; }

#pendingOverlay {
  position: fixed; inset: 0; z-index: 130; background: rgba(6,8,13,.45);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4);
}
.pending-card {
  text-align: center;
  background: linear-gradient(165deg, rgba(64,74,102,.55), rgba(24,28,42,.68));
  border: 1px solid var(--glass-line); border-top-color: var(--glass-line-hi);
  border-radius: 30px; padding: 36px 44px;
  box-shadow: var(--glass-shadow);
}
.pending-card h2 { margin: 14px 0 6px; font-size: 20px; }
.pending-card p { color: var(--text-dim); font-size: 14px; margin-bottom: 20px; }
.pending-spin { font-size: 42px; color: var(--gold); animation: spinCard 1.6s ease-in-out infinite; display: inline-block; }
@keyframes spinCard { 0% { transform: rotateY(0); } 50% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }

/* ═══════════════════════ profile modal ═══════════════════════ */
.pf-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.pf-avatar {
  width: 64px; height: 64px; border-radius: 50%; font-size: 32px; flex: none;
  background: rgba(255,255,255,.08); border: 3px solid var(--ring, var(--gold));
  background-size: cover; background-position: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
}
.pf-name { font-size: 20px; font-weight: 800; }
.pf-meta { color: var(--text-dim); font-size: 13.5px; margin-top: 3px; }
.pf-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.pf-stat {
  background: rgba(255,255,255,.055); border: 1px solid var(--glass-line);
  border-radius: 13px; padding: 8px 4px 7px; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.pf-stat b { display: block; font-size: 16px; color: var(--gold-hi); }
.pf-stat span { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; color: var(--text-dim); }

.pf-chips-row { display: flex; gap: 8px; margin-bottom: 12px; }
.pf-chips-row input { width: 0; flex: 1; min-width: 70px; }
.pf-chips-row .btn { flex: none; padding: 9px 12px; font-size: 13.5px; white-space: nowrap; }
.pf-seat-row { display: flex; gap: 10px; margin-bottom: 12px; }
.pf-seat-row .btn { flex: 1; padding: 9px 8px; font-size: 13.5px; }
.pf-kick { color: var(--red); width: 100%; }

/* ═══════════════════════ host controls ═══════════════════════ */
.hc-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.hc-row .btn { flex: 1; padding: 9px 8px; font-size: 13px; white-space: nowrap; }
.hc-row .btn.on { border-color: rgba(232,194,102,.6); color: var(--gold-hi); box-shadow: 0 0 14px rgba(232,194,102,.2), inset 0 1px 0 rgba(255,255,255,.18); }
.hc-row .btn:disabled { opacity: .35; cursor: default; }

/* ═══════════════════════ portrait table ═══════════════════════ */
#stage.portrait { width: 720px; height: 1240px; --table-r: 120px; }
#stage.portrait #tableOval { left: 14px; right: 14px; top: 124px; bottom: 184px; }
#stage.portrait #potArea { top: 352px; }
#stage.portrait #bombBanner { top: 310px; }
#stage.portrait #boards { top: 412px; }
#stage.portrait #winBanner { top: 225px; max-width: 620px; }
#stage.portrait #tableMsg, #stage.portrait #startBtn { top: 47%; }
#stage.portrait .felt-logo { top: 76%; font-size: 28px; }
/* phones hold the table close — cards get an extra size bump */
#stage.portrait .board-row .pcard { width: 110px; }
#stage.portrait #boards.double .board-row .pcard { width: 76px; }
#stage.portrait #boards.triple .board-row .pcard { width: 60px; }
#stage.portrait .seat-cards .pcard { width: 60px; margin: 0 -13px; }
#stage.portrait .seat-cards { min-height: 84px; margin-bottom: -34px; }
#stage.portrait .seat.hero .seat-cards .pcard { width: 92px; margin: 0 -18px; }
#stage.portrait .seat.hero .seat-cards { min-height: 130px; margin-bottom: -46px; }

/* ═══════════════════════ compact table (phone landscape) ═══════════════════ */
#stage.compact { width: 1200px; height: 600px; --table-r: 110px; }
#stage.compact #tableOval { left: 28px; right: 28px; top: 64px; bottom: 80px; }
#stage.compact #potArea { top: 138px; }
#stage.compact #bombBanner { top: 104px; }
#stage.compact #boards { top: 184px; }
#stage.compact #winBanner { top: 86px; }
#stage.compact #tableMsg, #stage.compact #startBtn { top: 50%; }
#stage.compact .felt-logo { top: 70%; font-size: 28px; }
#stage.compact .board-row .pcard { width: 100px; }
#stage.compact #boards.double .board-row .pcard { width: 70px; }
#stage.compact #boards.triple .board-row .pcard { width: 54px; }
#stage.compact .seat-cards .pcard { width: 58px; margin: 0 -12px; }
#stage.compact .seat-cards { min-height: 82px; margin-bottom: -32px; }
#stage.compact .seat.hero .seat-cards .pcard { width: 84px; margin: 0 -16px; }
#stage.compact .seat.hero .seat-cards { min-height: 118px; margin-bottom: -42px; }

/* ═══════════════════════ cycle steps editor ═══════════════════════ */
.cycle-opts, .tour-opts { display: flex; flex-direction: column; gap: 10px; }
.cycle-steps { display: flex; flex-direction: column; gap: 7px; }
.cycle-step {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.055); border: 1px solid var(--glass-line);
  border-radius: 12px; padding: 7px 9px;
}
.cycle-step select { flex: 1.4; padding: 7px 9px; border-radius: 10px; }
.cycle-step input { flex: 1; padding: 7px 9px; border-radius: 10px; text-align: center; }
.cycle-step .cs-label { font-size: 11.5px; color: var(--text-dim); font-weight: 700; }
.cs-remove { color: var(--text-dim); font-size: 13px; padding: 4px 6px; border-radius: 8px; }
.cs-remove:hover { color: var(--red); background: rgba(255,255,255,.08); }
.cycle-add { padding: 8px; font-size: 13px; border-radius: 12px; }

/* ═══════════════════════ spectator pill ═══════════════════════ */
/* docked bottom-left: the top band sits right over the top seats' cards */
#spectatorPill {
  position: fixed; bottom: 12px; left: 12px; z-index: 38;
  display: flex; align-items: center; gap: 6px; max-width: min(560px, 92vw);
  padding: 6px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: #ffd9a8;
  background: linear-gradient(165deg, rgba(120,80,20,.42), rgba(60,36,10,.55));
  backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
  border: 1px solid rgba(255,190,110,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 26px rgba(0,0,0,.35), 0 0 22px rgba(255,160,60,.14);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: toastIn .25s ease;
}
#spectatorPill b { color: #ffe9c4; }
/* phones: stay clear of the bottom utility strip (the action bar may cover
   the pill while acting — it sits above it in z-order, which is fine) */
body.portrait #spectatorPill { left: 8px; bottom: 52px; max-width: 70vw; }
body.compact-land #spectatorPill { left: 6px; bottom: 6px; font-size: 11px; padding: 4px 12px; max-width: 55vw; }

/* ═══════════════════════ epic hand celebration ═══════════════════════ */
.epic-overlay {
  position: fixed; inset: 0; z-index: 85; pointer-events: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .8s ease;
}
.epic-overlay.fade { opacity: 0; }
.epic-rays {
  position: absolute; left: 50%; top: 50%; width: 240vmax; height: 240vmax;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    rgba(255,215,120,.16) 0 8deg, transparent 8deg 24deg,
    rgba(255,215,120,.16) 24deg 32deg, transparent 32deg 48deg,
    rgba(255,215,120,.16) 48deg 56deg, transparent 56deg 72deg,
    rgba(255,215,120,.16) 72deg 80deg, transparent 80deg 96deg,
    rgba(255,215,120,.16) 96deg 104deg, transparent 104deg 120deg,
    rgba(255,215,120,.16) 120deg 128deg, transparent 128deg 144deg,
    rgba(255,215,120,.16) 144deg 152deg, transparent 152deg 168deg,
    rgba(255,215,120,.16) 168deg 176deg, transparent 176deg 192deg,
    rgba(255,215,120,.16) 192deg 200deg, transparent 200deg 216deg,
    rgba(255,215,120,.16) 216deg 224deg, transparent 224deg 240deg,
    rgba(255,215,120,.16) 240deg 248deg, transparent 248deg 264deg,
    rgba(255,215,120,.16) 264deg 272deg, transparent 272deg 288deg,
    rgba(255,215,120,.16) 288deg 296deg, transparent 296deg 312deg,
    rgba(255,215,120,.16) 312deg 320deg, transparent 320deg 336deg,
    rgba(255,215,120,.16) 336deg 344deg, transparent 344deg 360deg);
  animation: raysSpin 9s linear infinite, raysIn .6s ease backwards;
  mask-image: radial-gradient(circle, black 0%, transparent 62%);
  -webkit-mask-image: radial-gradient(circle, black 0%, transparent 62%);
}
.epic-straightflush .epic-rays { filter: hue-rotate(150deg); }
@keyframes raysSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes raysIn { from { opacity: 0; } }
.epic-box {
  position: relative; text-align: center; padding: 26px 54px; border-radius: 30px;
  background: linear-gradient(165deg, rgba(40,34,14,.62), rgba(20,16,6,.72));
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(255,220,140,.55); border-top-color: rgba(255,235,180,.8);
  box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 60px rgba(255,190,80,.28), inset 0 1px 0 rgba(255,255,255,.3);
  animation: epicPop .55s cubic-bezier(.2, 1.6, .4, 1) backwards;
}
.epic-straightflush .epic-box { border-color: rgba(140,220,255,.55); box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 60px rgba(80,190,255,.28), inset 0 1px 0 rgba(255,255,255,.3); background: linear-gradient(165deg, rgba(14,32,44,.62), rgba(6,16,24,.72)); }
@keyframes epicPop { from { opacity: 0; transform: scale(.4) rotate(-4deg); } }
.epic-title {
  font-size: clamp(30px, 6vw, 52px); font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff6dd, #ffd75e 55%, #c9922a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 12px rgba(255,180,40,.45));
}
.epic-straightflush .epic-title { background: linear-gradient(180deg, #eafcff, #7ce0ff 55%, #2a8fc9); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 12px rgba(60,180,255,.45)); }
.epic-name { margin-top: 8px; font-size: clamp(15px, 2.6vw, 20px); font-weight: 700; color: rgba(255,248,230,.92); }
.confetti {
  position: absolute; top: -4vh; border-radius: 2px; display: block;
  animation-name: confettiFall; animation-timing-function: linear; animation-fill-mode: backwards;
}
@keyframes confettiFall {
  from { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  to { transform: translate(var(--drift, 0px), 108vh) rotate(var(--spin, 720deg)); opacity: .85; }
}

/* bounty in the win banner */
.bounty-line { color: #ffd98f; }
.bounty-line small { color: var(--teal); font-weight: 800; }
.action-flash.f-bounty { color: #ffd75e; border-color: rgba(255,215,94,.5); box-shadow: 0 0 18px rgba(255,200,60,.35), inset 0 1px 0 rgba(255,255,255,.18); }

/* spectate toggle button */
#spectateBtn.on { border-color: rgba(255,190,110,.6); color: #ffd9a8; box-shadow: 0 0 14px rgba(255,170,60,.22), inset 0 1px 0 rgba(255,255,255,.18); }

/* ═══════════════════════ uploads (avatar & felt) ═══════════════════════ */
.av-upload-row { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.av-preview {
  width: 64px; height: 64px; border-radius: 50%; flex: none; font-size: 30px;
  background: rgba(255,255,255,.07); background-size: cover; background-position: center;
  border: 2.5px solid var(--glass-line-hi);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.av-upload-btns { display: flex; flex-direction: column; gap: 8px; }
.av-upload-btns .btn { padding: 8px 14px; font-size: 13px; }
.ar-avatar img, img.mini-av {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover; vertical-align: -5px;
  border: 1px solid rgba(255,255,255,.3);
}
.felt-upload-row { display: flex; gap: 10px; margin-bottom: 4px; }
.felt-upload-row .btn { flex: 1; padding: 9px 8px; font-size: 13px; }
.upload-note { font-size: 11.5px; color: var(--text-dim); margin-top: 8px; }

/* settings slider */
.settings-form input[type=range] { width: 100%; min-width: 0; accent-color: #fff; height: 24px; }
.slider-field b { color: var(--gold-hi); }

/* ═══════════════════════ toasts ═══════════════════════ */
#toasts { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: linear-gradient(165deg, rgba(48,54,76,.72), rgba(22,25,37,.8));
  backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
  border: 1px solid var(--glass-line); border-left: 3px solid var(--gold);
  padding: 10px 18px; border-radius: 15px; font-size: 14px; font-weight: 600;
  box-shadow: 0 16px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
  animation: toastIn .22s ease, toastOut .4s ease 3.2s forwards;
  max-width: 90vw;
}
.toast.error { border-left-color: var(--red); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } }

/* ═══════════════════════ responsive ═══════════════════════ */
@media (max-width: 620px) {
  .tb-center { display: none; }
  #actionBar { bottom: 8px; padding: 10px 10px 8px; border-radius: 20px; }
  .act-btn { font-size: 14.5px; padding: 12px 4px; }
  .swatch-grid { grid-template-columns: repeat(5, 1fr); }
}

/* phone landscape: a vertical action panel docks right so the table can take
   ~75% of the screen (body.compact-land is set by fitStage when landscape
   and short; the stage switches to the flat #stage.compact geometry) */
body.compact-land #topbar { height: 44px; padding: 0 8px; }
body.compact-land #topbar .tb-btn { width: 32px; height: 32px; font-size: 14px; border-radius: 10px; }
body.compact-land .code-chip { height: 32px; padding: 0 10px; font-size: 12px; }
body.compact-land #actionBar {
  left: auto; right: 6px; bottom: 46px; top: auto; transform: none;
  width: 176px; padding: 8px 8px 6px; border-radius: 16px;
  max-height: calc(100% - 92px); overflow-y: auto;
}
body.compact-land .action-buttons { flex-direction: column; gap: 6px; }
body.compact-land .act-btn { flex: none; font-size: 13.5px; padding: 9px 5px; border-radius: 11px; }
body.compact-land .act-btn small { font-size: 10.5px; }
body.compact-land #betPanel { margin-bottom: 8px; }
body.compact-land .bet-presets { flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
body.compact-land .bet-presets button { flex: 1 1 30%; padding: 4px 1px; font-size: 9.5px; }
body.compact-land .bet-slider-row { gap: 6px; }
body.compact-land #betInput { width: 48px; padding: 6px 3px; }
body.compact-land #timerBar { margin-top: 7px; }
/* phone landscape: the utility strip tucks under the docked action panel,
   scrolling sideways within the same right-hand column */
body.compact-land #heroPrompt {
  left: auto; right: 6px; top: auto; bottom: 6px;
  width: 176px; max-width: 176px;
  flex-direction: row; flex-wrap: nowrap; align-items: stretch;
  gap: 5px; overflow-x: auto; scrollbar-width: none;
}
body.compact-land #heroPrompt::-webkit-scrollbar { display: none; }
body.compact-land #heroPrompt .btn { flex: 0 0 auto; padding: 7px 11px; font-size: 12px; }

/* portrait: the utility strip docks at the very bottom of the screen with
   the action bar right above it — nothing sits on the felt */
body.portrait #heroPrompt {
  left: 8px; right: 8px; top: auto; bottom: 6px; max-width: none;
  flex-direction: row; flex-wrap: nowrap; align-items: stretch;
  gap: 6px; overflow-x: auto; padding-bottom: 0;
  scrollbar-width: none;
}
body.portrait #heroPrompt::-webkit-scrollbar { display: none; }
body.portrait #heroPrompt .btn { flex: 0 0 auto; padding: 8px 13px; font-size: 12.5px; }
body.portrait #actionBar { bottom: 48px; padding: 8px 10px 6px; border-radius: 18px; }
body.portrait .act-btn { font-size: 14px; padding: 10px 4px; }
body.portrait .bet-presets { margin-bottom: 6px; }
body.portrait .bet-presets button { padding: 5px 2px; font-size: 10px; }
body.portrait #betPanel { margin-bottom: 8px; }
body.portrait #timerBar { margin-top: 7px; }
body.portrait #ritBar { bottom: 52px; }

/* extremely short landscape (browser chrome eats the height): squeeze the
   panel so Fold/Check/Raise all stay on screen without scrolling */
@media (max-height: 340px) {
  body.compact-land #actionBar { padding: 8px 8px 6px; }
  body.compact-land .act-btn { padding: 7px 4px; font-size: 13px; }
  body.compact-land .act-btn small { font-size: 10px; }
  body.compact-land .action-buttons { gap: 5px; }
  body.compact-land .bet-presets button { padding: 4px 1px; font-size: 9px; }
  body.compact-land #betPanel { margin-bottom: 6px; }
  body.compact-land #timerBar { margin-top: 6px; }
}

/* ═══════════════════════ court piece ═══════════════════════ */

/* Poker chrome that has no meaning at a court table. */
body.court #actionBar, body.court #heroPrompt, body.court #ritBar { display: none !important; }
body.court .sp-tab[data-sp="ledger"] { display: none; }

/* Landing page: base-game picker. */
.game-pick { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.gp-btn {
  flex: 1 1 44%; display: flex; flex-direction: column; gap: 3px; align-items: center;
  padding: 12px 8px 10px; border-radius: 16px;
  background: var(--glass); border: 1px solid var(--glass-line);
  color: var(--text-dim); transition: all .16s;
}

/* ═══════════════════════ rulebooks ═══════════════════════ */
.rules-modal { width: min(780px, 94vw); max-height: min(86vh, 900px); padding-right: 14px; }
.rules-head { display: flex; align-items: center; justify-content: space-between; padding-right: 8px; }
.rules-head h2 { margin: 0; }
.rules-body { margin-top: 14px; padding-right: 8px; overflow-y: auto; max-height: calc(86vh - 105px); line-height: 1.55; color: var(--text-dim); }
.rules-body h3 { color: var(--gold-hi); margin: 20px 0 7px; font-size: 18px; }
.rules-body h3:first-child { margin-top: 0; }
.rules-body h4 { color: var(--text); margin: 15px 0 5px; }
.rules-body p { margin: 5px 0 11px; }
.rules-body li { margin: 3px 0; }
.rules-body details { border-top: 1px solid var(--glass-line); padding: 9px 3px; }
.rules-body details:last-child { border-bottom: 1px solid var(--glass-line); }
.rules-body summary { cursor: pointer; color: var(--text); font-weight: 700; }
.rules-body summary em { color: var(--gold-hi); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; margin-left: 6px; }

/* ═══════════════════════ teen patti ═══════════════════════ */
body.tp #actionBar, body.tp #heroPrompt, body.tp #ritBar { display: none !important; }
body.tp .sp-tab[data-sp="ledger"] { display: none; }

:is(#tpWrap, .gt-wrap) { position: fixed; inset: 52px 0 0; display: flex; flex-direction: column; gap: 6px; padding: 4px 10px 8px; }
:is(#tpTable, .gt-table) { position: relative; flex: 1; min-height: 280px; max-width: 1180px; width: 100%; margin: 0 auto; }
:is(#tpSeats, .gt-seats) { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.tp-seat-slot { position: absolute; left: clamp(80px, var(--tp-x), calc(100% - 80px)); top: clamp(82px, var(--tp-y), calc(100% - 68px)); width: 148px; transform: translate(-50%, -50%); pointer-events: auto; z-index: 4; text-align: center; isolation: isolate; }

/* Every chair is a curved liquid-glass shell aimed toward the felt. Occupied
   seats center that shell exactly behind the avatar circle — not behind the
   whole pod, whose name plate would drag it off-center; empty chairs expose
   it as the SIT target. */
.tp-av-wrap::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 82px; height: 46px;
  transform: translate(-50%, -50%) rotate(var(--tp-rot)); z-index: -1;
  border: 1px solid rgba(255,255,255,.24); border-radius: 42px 42px 11px 11px;
  background: radial-gradient(120% 160% at 50% -10%, rgba(255,255,255,.18), rgba(255,255,255,.045) 58%, rgba(255,255,255,.02));
  backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
  box-shadow: 0 9px 22px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -6px 12px rgba(0,0,0,.16);
}
.tp-seat { position: relative; min-width: 0; cursor: pointer; transition: opacity .15s; }
.tp-seat-slot.folded { opacity: .48; }
.tp-sit {
  width: 72px; height: 42px; margin: 0 auto; position: relative;
  color: rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.26); border-bottom-color: rgba(255,255,255,.14);
  border-radius: 38px 38px 11px 11px;
  background: radial-gradient(120% 160% at 50% -10%, rgba(255,255,255,.22), rgba(255,255,255,.05) 55%, rgba(255,255,255,.02));
  backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
  box-shadow: 0 8px 20px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -6px 12px rgba(0,0,0,.18);
  transform: rotate(var(--tp-rot));
  transition: transform .25s cubic-bezier(.3,1.8,.5,1), box-shadow .2s, border-color .2s, color .2s;
}
.tp-sit::before { content: ""; position: absolute; inset: 5px 6px 6px; border-radius: 28px 28px 7px 7px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 60%); }
.tp-sit-inner { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; transform: rotate(calc(var(--tp-rot) * -1)); }
.tp-sit-inner b { font-size: 16px; font-weight: 500; }
.tp-sit-inner small { margin-top: 1px; font-size: 7.5px; font-weight: 800; letter-spacing: .2em; text-indent: .2em; opacity: .8; }
.tp-sit:hover:not(.tp-sit-disabled) { color: #ffe9b3; border-color: rgba(232,194,102,.8); transform: rotate(var(--tp-rot)) scale(1.16); box-shadow: 0 10px 26px rgba(0,0,0,.4), 0 0 24px rgba(232,194,102,.32), inset 0 1px 0 rgba(255,255,255,.4); }
.tp-sit-disabled { opacity: .35; cursor: default; }

.tp-seat-main { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; }
.tp-seat-main > div:last-child { min-width: 0; }
.tp-seat-main > div:last-child { position: relative; z-index: 3; margin-top: -5px; min-width: 110px; max-width: 148px; padding: 5px 9px 6px; border-radius: 14px; background: var(--glass-grad); border: 1px solid rgba(255,255,255,.22); backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite); box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.3); }
.tp-seat-main b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.tp-seat-main small { display: block; font-size: 9px; color: var(--gold-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-av-wrap { position: relative; z-index: 2; width: 58px; height: 58px; flex: none; }
.tp-av { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--ring); background: linear-gradient(165deg, rgba(46,52,72,.86), rgba(20,23,34,.92)); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 27px; box-shadow: 0 8px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.2); }
.tp-av img { width: 100%; height: 100%; object-fit: cover; }
.tp-seat-slot.turn .tp-av { box-shadow: 0 0 0 3px rgba(255,255,255,.25), 0 0 26px 4px var(--ring); animation: turnPulse 1.2s ease infinite alternate; }
.tp-timer { position: absolute; inset: -7px; width: 72px; height: 72px; transform: rotate(-90deg); pointer-events: none; overflow: visible; z-index: 4; }
.tp-timer circle { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; filter: drop-shadow(0 0 4px currentColor); }
.tp-seat-cards { position: absolute; left: 50%; bottom: calc(100% - 15px); transform: translateX(-50%); display: flex; justify-content: center; min-height: 45px; z-index: 0; }
.tp-seat-cards span { width: 34px; aspect-ratio: 100/140; flex: none; }
.tp-seat-cards span + span { margin-left: -14px; }
.tp-seat-cards svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.tp-joker { position: absolute; right: -1px; top: -8px; z-index: 4; color: var(--gold-hi); font-size: 8px; display: flex; align-items: center; gap: 3px; padding: 2px 4px; border-radius: 7px; background: rgba(20,22,31,.78); border: 1px solid var(--glass-line); backdrop-filter: var(--blur-lite); }
.tp-joker svg { width: 15px; height: 21px; }

:is(#tpFelt, .gt-felt) { position: absolute; inset: 10% 8% 12%; display: flex; align-items: center; justify-content: center; }
.tp-rail { position: absolute; inset: 0; border-radius: 148px; background: var(--glass-grad); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid rgba(255,255,255,.26); box-shadow: 0 44px 100px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35), inset 0 1.5px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(255,255,255,.07); }
.tp-felt-surface { position: absolute; inset: 18px; border-radius: 130px; background: radial-gradient(115% 100% at 50% 34%, color-mix(in srgb, var(--felt1) 86%, transparent) 0%, color-mix(in srgb, var(--felt2) 92%, transparent) 88%); border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 10px 40px rgba(0,0,0,.42), inset 0 -4px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.12); }
.tp-felt-ring { position: absolute; inset: 26px; border-radius: 104px; border: 1.5px solid rgba(255,255,255,.09); }
.tp-felt-logo { position: absolute; left: 50%; top: 69%; transform: translate(-50%, -50%); font-size: clamp(22px, 3vw, 34px); font-weight: 800; color: rgba(255,255,255,.075); letter-spacing: .04em; white-space: nowrap; user-select: none; }
.tp-felt-logo em { font-style: normal; }
:is(#tpPot, .gt-pot) { position: absolute; top: 24%; left: 50%; transform: translateX(-50%); display: flex; align-items: baseline; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.22); backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 26px rgba(0,0,0,.3); }
:is(#tpPot, .gt-pot) span, :is(#tpPot, .gt-pot) small { font-size: 9px; color: var(--text-dim); }
:is(#tpPot, .gt-pot) b { color: var(--gold-hi); }
:is(#tpOpen, .gt-open) { display: flex; align-items: center; justify-content: center; max-width: 75%; }
.tp-open-card { width: clamp(40px, 6.2vmin, 68px); aspect-ratio: 100/140; padding: 0; transition: transform .12s; }
.tp-open-card + .tp-open-card { margin-left: calc(clamp(40px, 6.2vmin, 68px) * -.34); }
.tp-open-card svg { width: 100%; height: 100%; filter: drop-shadow(0 5px 10px rgba(0,0,0,.45)); }
.tp-open-card:not(:disabled):hover, .tp-open-card.sel { transform: translateY(-12px); z-index: 3; }
/* Kept well above the hero seat pod so banners never hide behind it. */
:is(#tpCenter, .gt-center) { position: absolute; bottom: 36%; left: 50%; transform: translateX(-50%); width: 80%; text-align: center; }
:is(#tpCenter, .gt-center) .btn { margin: 4px; }
.tp-bank { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 6px; }
.tp-bank small { font-size: 10px; color: var(--text-dim); margin-right: 4px; text-shadow: 0 2px 7px #000; }
.tp-bank span { width: 34px; display: inline-block; }
.tp-bank svg { width: 100%; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.tp-msg, .tp-info, .tp-banner { display: inline-block; padding: 6px 12px; border-radius: 13px; background: linear-gradient(165deg, rgba(255,255,255,.13), rgba(255,255,255,.055)); border: 1px solid rgba(255,255,255,.18); backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 22px rgba(0,0,0,.25); font-size: 12px; text-shadow: 0 2px 7px #000; }
.tp-info { display: block; width: fit-content; max-width: 100%; margin: 0 auto 5px; color: var(--gold-hi); }
.tp-banner { color: var(--gold-hi); font-weight: 800; }

:is(#tpControls, .gt-controls) { min-height: 38px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 7px; }
:is(#tpControls, .gt-controls) .btn { padding: 9px 13px; }
:is(#tpTools, .gt-tools) { min-height: 30px; display: flex; justify-content: center; align-items: center; gap: 6px; }
:is(#tpTools, .gt-tools) .btn { padding: 6px 11px; border-radius: 11px; font-size: 10px; color: var(--text-dim); }
:is(#tpTools, .gt-tools) .btn:hover { color: var(--text); }
:is(#tpTools, .gt-tools) .btn-gold { color: #14161f; }
:is(#tpTools, .gt-tools) .btn-gold:hover { color: #14161f; }
:is(#tpTools, .gt-tools) .btn:disabled { opacity: .55; cursor: default; }
:is(#tpTools, .gt-tools) .btn.on { border-color: rgba(255,190,110,.6); color: #ffd9a8; box-shadow: 0 0 14px rgba(255,170,60,.22), inset 0 1px 0 rgba(255,255,255,.18); }
.tp-number { display: flex; gap: 6px; align-items: center; }
.tp-number input { width: 92px; padding: 9px; }
.tp-hint { color: var(--text-dim); font-size: 12px; }
:is(#tpHand, .gt-hand) { display: flex; justify-content: center; align-items: flex-end; min-height: clamp(75px, 13vh, 126px); }
.tp-card { width: clamp(52px, 8vmin, 88px); aspect-ratio: 100/140; padding: 0; transition: transform .13s; }
.tp-card + .tp-card { margin-left: calc(clamp(52px, 8vmin, 88px) * -.38); }
.tp-card svg { width: 100%; height: 100%; filter: drop-shadow(0 5px 10px rgba(0,0,0,.45)); }
.tp-card:not(:disabled):hover, .tp-card.sel { transform: translateY(-14px); z-index: 4; }
.tp-card.placed { opacity: .38; transform: translateY(7px); }

@media (max-width: 680px) {
  :is(#tpWrap, .gt-wrap) { inset: 46px 0 0; padding: 3px 5px 6px; gap: 4px; }
  :is(#tpTable, .gt-table) { min-height: 250px; }
  :is(#tpFelt, .gt-felt) { inset: 9% 7% 12%; }
  .tp-rail { border-radius: 90px; }
  .tp-felt-surface { inset: 11px; border-radius: 79px; }
  .tp-felt-ring { inset: 16px; border-radius: 63px; }
  .tp-seat-slot { width: 104px; }
  .tp-av-wrap::before { width: 62px; height: 36px; border-radius: 32px 32px 9px 9px; }
  .tp-sit { width: 60px; height: 36px; border-radius: 31px 31px 9px 9px; }
  .tp-sit::before { inset: 4px 5px 5px; border-radius: 24px 24px 6px 6px; }
  .tp-av-wrap { width: 42px; height: 42px; }
  .tp-av { font-size: 19px; border-width: 2px; }
  .tp-timer { inset: -5px; width: 52px; height: 52px; }
  .tp-seat-slot { left: clamp(52px, var(--tp-x), calc(100% - 52px)); top: clamp(58px, var(--tp-y), calc(100% - 52px)); }
  .tp-seat-main > div:last-child { min-width: 84px; max-width: 104px; margin-top: -3px; padding: 3px 6px 4px; border-radius: 11px; }
  .tp-seat-main b { font-size: 10px; }
  .tp-seat-main small { font-size: 8px; }
  .tp-seat-cards { bottom: calc(100% - 10px); min-height: 31px; }
  .tp-seat-cards span { width: 24px; }
  .tp-seat-cards span + span { margin-left: -13px; }
  .tp-joker { display: none; }
  :is(#tpPot, .gt-pot) { top: 22%; padding: 3px 7px; }
  :is(#tpOpen, .gt-open) { max-width: 68%; }
  :is(#tpCenter, .gt-center) { bottom: 34%; width: 70%; }
  .tp-msg, .tp-info, .tp-banner { font-size: 10px; padding: 4px 7px; }
  :is(#tpControls, .gt-controls) .btn { padding: 7px 9px; font-size: 11px; }
  :is(#tpTools, .gt-tools) { min-height: 26px; }
  :is(#tpTools, .gt-tools) .btn { padding: 5px 8px; font-size: 9px; }
  :is(#tpHand, .gt-hand) { min-height: 72px; }
}

/* Short phone landscape: keep all six chairs visible without pushing the
   hero hand or the action controls below the viewport. */
body.compact-land :is(#tpWrap, .gt-wrap) { inset: 44px 0 0; padding: 2px 5px 4px; gap: 3px; }
body.compact-land :is(#tpTable, .gt-table) { min-height: 180px; }
body.compact-land :is(#tpFelt, .gt-felt) { inset: 8% 7% 10%; }
body.compact-land .tp-rail { border-radius: 82px; }
body.compact-land .tp-felt-surface { inset: 10px; border-radius: 72px; }
body.compact-land .tp-felt-ring { inset: 14px; border-radius: 58px; }
body.compact-land .tp-seat-slot { width: 102px; }
body.compact-land .tp-seat-slot { left: clamp(51px, var(--tp-x), calc(100% - 51px)); top: clamp(52px, var(--tp-y), calc(100% - 46px)); }
body.compact-land .tp-av-wrap::before { width: 60px; height: 34px; }
body.compact-land .tp-sit { width: 58px; height: 34px; }
body.compact-land .tp-av-wrap { width: 40px; height: 40px; }
body.compact-land .tp-av { font-size: 18px; border-width: 2px; }
body.compact-land .tp-timer { inset: -5px; width: 50px; height: 50px; }
body.compact-land .tp-seat-main > div:last-child { min-width: 82px; max-width: 102px; margin-top: -3px; padding: 3px 6px; }
body.compact-land .tp-seat-main b { font-size: 10px; }
body.compact-land .tp-seat-main small { font-size: 8px; }
body.compact-land .tp-seat-cards { bottom: calc(100% - 9px); min-height: 29px; }
body.compact-land .tp-seat-cards span { width: 22px; }
body.compact-land .tp-seat-cards span + span { margin-left: -12px; }
body.compact-land .tp-joker { display: none; }
body.compact-land :is(#tpControls, .gt-controls) { min-height: 32px; }
body.compact-land :is(#tpControls, .gt-controls) .btn { padding: 6px 8px; font-size: 10px; }
body.compact-land :is(#tpTools, .gt-tools) { min-height: 24px; }
body.compact-land :is(#tpTools, .gt-tools) .btn { padding: 4px 7px; font-size: 8.5px; }
body.compact-land :is(#tpHand, .gt-hand) { min-height: 60px; }
.gp-btn small { font-size: 11px; }
.gp-btn b { font-size: 15px; }
.gp-btn.active {
  color: var(--text); border-color: var(--gold);
  background: linear-gradient(165deg, rgba(232,194,102,.16), rgba(232,194,102,.05));
  box-shadow: 0 0 0 1px rgba(232,194,102,.25), 0 10px 26px rgba(0,0,0,.25);
}

/* Layout: score strip / seats+felt grid / hero hand. */
#courtWrap {
  position: fixed; inset: 52px 0 0 0;
  display: flex; flex-direction: column; gap: 6px;
  padding: 4px 10px 8px;
}
#ctScore {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  flex-wrap: wrap; min-height: 34px;
}
.ct-team {
  display: flex; align-items: center; gap: 8px; padding: 5px 12px;
  border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: var(--blur-lite); backdrop-filter: var(--blur-lite);
  font-size: 13px;
}
.ct-team.t-a { border-left: 3px solid #5fa8e0; }
.ct-team.t-b { border-left: 3px solid #e08a5f; }
.ct-team.lead { border-color: var(--gold); }
.ctt-name { font-weight: 700; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctt-pts { color: var(--gold); font-weight: 800; }
.ctt-tricks { color: var(--text-dim); }
.ct-score-mid { font-size: 12px; color: var(--text-dim); text-align: center; }

#ctMain {
  flex: 1; min-height: 0;
  display: grid; gap: 6px;
  grid-template-columns: minmax(96px, 170px) 1fr minmax(96px, 170px);
  grid-template-rows: auto 1fr auto;
}
.ct-slot { display: flex; align-items: center; justify-content: center; min-width: 0; }
.ct-slot.ct-top { grid-area: 1 / 2; }
.ct-slot.ct-left { grid-area: 2 / 1; }
#ctFelt { grid-area: 2 / 2; }
.ct-slot.ct-right { grid-area: 2 / 3; }
.ct-slot.ct-bottom { grid-area: 3 / 2; }

/* The table itself. */
#ctFelt {
  position: relative; border-radius: 26px; min-height: 180px;
  background:
    radial-gradient(120% 105% at 50% 34%,
      color-mix(in srgb, var(--felt1) 86%, transparent) 0%,
      color-mix(in srgb, var(--felt2) 92%, transparent) 88%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 60px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.35);
}
#ctBadge {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.14);
}
.ct-sep { width: 1px; height: 12px; background: rgba(255,255,255,.2); }
.ct-suit { font-size: 14px; }
.ct-suit.red { color: #ff9d9d; }

/* Played cards around the center. */
.ct-play {
  position: absolute; width: clamp(52px, 7.5vmin, 86px); aspect-ratio: 100 / 140;
  pointer-events: none;
}
.ct-play.pos-bottom { left: 50%; bottom: 10%; transform: translateX(-50%); }
.ct-play.pos-top { left: 50%; top: 12%; transform: translateX(-50%); }
.ct-play.pos-left { left: 14%; top: 50%; transform: translateY(-50%); }
.ct-play.pos-right { right: 14%; top: 50%; transform: translateY(-50%); }
.ct-played { width: 100%; height: 100%; animation: ctPlayIn .22s ease-out; }
.ct-played svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
@keyframes ctPlayIn {
  from { transform: scale(.55); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.ct-play.win .ct-played svg {
  filter: drop-shadow(0 0 14px rgba(232,194,102,.95)) drop-shadow(0 6px 14px rgba(0,0,0,.45));
}

/* Center messages: draw, trump picker, banners. */
#ctCenter {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center;
  padding: 40px 16px 16px; pointer-events: none;
}
#ctCenter button { pointer-events: auto; }
#ctCenter .btn-big { width: auto; padding: 13px 36px; }
.ct-note { font-size: 14px; color: var(--text-dim); text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.ct-note small { font-size: 12px; opacity: .85; }
.ct-note.trick-won { font-size: 16px; color: var(--gold-hi); font-weight: 700; }
.ct-banner {
  font-size: 18px; font-weight: 800; color: var(--gold-hi);
  text-shadow: 0 2px 14px rgba(0,0,0,.7); padding: 6px 14px;
  background: rgba(0,0,0,.32); border-radius: 14px; border: 1px solid rgba(232,194,102,.3);
}
.ct-court {
  font-size: 22px; font-weight: 900; color: #ffd76a; letter-spacing: .06em;
  text-shadow: 0 0 22px rgba(255,205,90,.7); animation: ctCourtPulse 1s ease-in-out infinite alternate;
}
@keyframes ctCourtPulse { from { transform: scale(1); } to { transform: scale(1.07); } }
.ct-draw { display: flex; gap: 12px; justify-content: center; }
.ct-draw-card { width: clamp(44px, 6vmin, 70px); display: flex; flex-direction: column; gap: 4px; align-items: center; }
.ct-draw-card svg { width: 100%; filter: drop-shadow(0 5px 12px rgba(0,0,0,.45)); }
.ct-draw-card small { font-size: 11px; color: var(--text-dim); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-draw-card.win svg { filter: drop-shadow(0 0 12px rgba(232,194,102,.9)); }
.ct-draw-card.win small { color: var(--gold-hi); font-weight: 700; }
.ct-suit-row { display: flex; gap: 12px; }
.ct-suit-btn {
  width: 64px; height: 64px; border-radius: 18px; font-size: 34px;
  background: linear-gradient(165deg, rgba(255,255,255,.92), rgba(224,224,230,.9));
  color: #20222c; box-shadow: 0 10px 26px rgba(0,0,0,.4); transition: transform .12s;
}
.ct-suit-btn.red { color: #d23c3c; }
.ct-suit-btn:hover { transform: translateY(-4px) scale(1.06); }

/* Seat chips. */
.ct-seat {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; min-width: 0;
  border-radius: 16px; background: var(--glass-grad); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: var(--blur-lite); backdrop-filter: var(--blur-lite);
  cursor: pointer; max-width: 100%;
}
.ct-seat.turn {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(232,194,102,.5), 0 0 22px rgba(232,194,102,.35);
  animation: ctTurnPulse 1.4s ease-in-out infinite alternate;
}
@keyframes ctTurnPulse {
  from { box-shadow: 0 0 0 1px rgba(232,194,102,.5), 0 0 14px rgba(232,194,102,.25); }
  to { box-shadow: 0 0 0 1px rgba(232,194,102,.75), 0 0 30px rgba(232,194,102,.5); }
}
.ct-seat.empty { justify-content: center; cursor: default; border-style: dashed; opacity: .55; }
.ct-empty-note { font-size: 11px; color: var(--text-dim); }
.ct-av {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: rgba(0,0,0,.3); border: 2px solid var(--ring, var(--gold));
  overflow: hidden;
}
.ct-av img { width: 100%; height: 100%; object-fit: cover; }
.ct-meta { min-width: 0; }
.ct-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-tags { display: flex; align-items: center; gap: 5px; font-size: 11px; min-height: 16px; }
.ct-tag.deal {
  width: 16px; height: 16px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 10px; font-weight: 900;
  background: #f0ead8; color: #222;
}
.ct-tag.dc { color: var(--red); }
.ct-timer { color: var(--gold-hi); font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-count { font-size: 12px; color: var(--text-dim); flex: none; }
.ct-sit {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 20px; border-radius: 16px; border: 1.5px dashed rgba(255,255,255,.35);
  background: rgba(255,255,255,.06); color: var(--text-dim); transition: all .15s;
}
.ct-sit:hover { border-color: var(--gold); color: var(--gold-hi); background: rgba(232,194,102,.1); }
.ct-sit span { font-weight: 800; letter-spacing: .12em; font-size: 13px; }
.ct-sit small { font-size: 10px; }

/* Hero hand: an overlapping fan along the bottom. */
#ctHand {
  display: flex; justify-content: center; align-items: flex-end;
  min-height: 0; padding: 4px 8px 2px;
}
#ctHand:not(:empty) { min-height: clamp(86px, 15vh, 138px); }
.ct-card {
  width: clamp(52px, 8.6vmin, 94px); aspect-ratio: 100 / 140; flex: none;
  padding: 0; transition: transform .14s ease, opacity .14s;
  position: relative;
}
.ct-card + .ct-card { margin-left: calc(clamp(52px, 8.6vmin, 94px) * -0.58); }
.ct-card svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); border-radius: 8px; }
.ct-card.playable { cursor: pointer; }
.ct-card.playable:hover { transform: translateY(-16px); z-index: 5; }
.ct-card.playable svg { filter: drop-shadow(0 0 8px rgba(232,194,102,.55)) drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.ct-card.dim { opacity: .42; cursor: default; }

/* Phones: tighter columns, smaller chrome. */
@media (max-width: 760px) {
  #courtWrap { inset: 46px 0 0 0; padding: 2px 4px 6px; gap: 4px; }
  #ctMain { grid-template-columns: minmax(64px, 96px) 1fr minmax(64px, 96px); gap: 4px; }
  .ct-slot.ct-left .ct-seat, .ct-slot.ct-right .ct-seat {
    flex-direction: column; gap: 4px; padding: 6px; text-align: center;
  }
  .ct-slot.ct-left .ct-name, .ct-slot.ct-right .ct-name { max-width: 82px; font-size: 11px; }
  .ct-av { width: 32px; height: 32px; font-size: 17px; }
  .ct-team { font-size: 11px; padding: 4px 9px; gap: 6px; }
  .ctt-name { max-width: 90px; }
  .ct-score-mid { font-size: 10px; }
  .ct-suit-btn { width: 52px; height: 52px; font-size: 27px; border-radius: 14px; }
  .ct-card + .ct-card { margin-left: calc(clamp(52px, 8.6vmin, 94px) * -0.68); }
  .ct-play { width: clamp(44px, 11vmin, 64px); }
  .ct-count { display: none; }
}

/* ═══════════════════════ plus minus ═══════════════════════ */

body.pm #actionBar, body.pm #heroPrompt, body.pm #ritBar { display: none !important; }
body.pm .sp-tab[data-sp="ledger"] { display: none; }

#pmWrap {
  position: fixed; inset: 52px 0 0 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 4px 12px 10px;
}

/* Opponents strip. */
#pmSeats {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.pm-seat {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; min-width: 0;
  border-radius: 14px; background: var(--glass-grad); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: var(--blur-lite); backdrop-filter: var(--blur-lite);
  cursor: pointer;
}
.pm-seat.turn {
  border-color: var(--gold);
  animation: ctTurnPulse 1.4s ease-in-out infinite alternate;
}
.pm-seat.out { opacity: .45; filter: grayscale(.7); }
.pm-seat.empty { justify-content: center; border-style: dashed; opacity: .5; cursor: default; font-size: 11px; color: var(--text-dim); padding: 6px 16px; }
.pm-av {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: rgba(0,0,0,.3); border: 2px solid var(--ring, var(--gold)); overflow: hidden;
}
.pm-av img { width: 100%; height: 100%; object-fit: cover; }
.pm-meta { min-width: 0; }
.pm-name { font-size: 12.5px; font-weight: 700; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-sub { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim); }
.pm-score { color: var(--gold-hi); font-weight: 700; }
.pm-tag.dc { color: var(--red); }
.pm-tag.out { color: var(--red); }
.pm-timer { color: var(--gold-hi); font-weight: 700; font-variant-numeric: tabular-nums; }
.pm-sit {
  padding: 10px 18px; border-radius: 14px; border: 1.5px dashed rgba(255,255,255,.35);
  background: rgba(255,255,255,.06); color: var(--text-dim);
  font-weight: 800; letter-spacing: .08em; font-size: 12px; transition: all .15s;
}
.pm-sit:hover { border-color: var(--gold); color: var(--gold-hi); background: rgba(232,194,102,.1); }

/* The felt: piles on the left, messages center. */
#pmFelt {
  position: relative; flex: 1; min-height: 150px; border-radius: 24px;
  background:
    radial-gradient(120% 105% at 50% 34%,
      color-mix(in srgb, var(--felt1) 86%, transparent) 0%,
      color-mix(in srgb, var(--felt2) 92%, transparent) 88%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 60px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
}
#pmPiles {
  position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 18px;
}
#pmDraw, #pmTop { display: flex; flex-direction: column; align-items: center; gap: 5px; }
#pmDraw small, #pmTop small { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.pm-back { width: clamp(48px, 6vmin, 68px); aspect-ratio: 100/140; }
.pm-back svg { width: 100%; height: 100%; filter: drop-shadow(0 5px 12px rgba(0,0,0,.45)); }
.pm-top-cards { display: flex; }
.pm-top-card { width: clamp(48px, 6vmin, 68px); aspect-ratio: 100/140; animation: ctPlayIn .2s ease-out; }
.pm-top-card + .pm-top-card { margin-left: calc(clamp(48px, 6vmin, 68px) * -0.45); }
.pm-top-card svg { width: 100%; height: 100%; filter: drop-shadow(0 5px 12px rgba(0,0,0,.45)); }
.pm-top-empty {
  width: clamp(48px, 6vmin, 68px); aspect-ratio: 100/140; border-radius: 8px;
  border: 1.5px dashed rgba(255,255,255,.25); display: flex; align-items: center;
  justify-content: center; font-size: 10px; color: var(--text-dim);
}
.pm-note-good { color: var(--teal); font-weight: 700; }
.pm-note-dim { color: var(--text-dim); }

#pmCenter {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 14px 16px 14px 150px; max-width: 100%;
}
.pm-msg { font-size: 14px; color: var(--text-dim); text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.pm-btn-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.pm-btn-row .btn-big { width: auto; padding: 13px 34px; }
.pm-banner {
  font-size: 17px; font-weight: 800; color: var(--gold-hi);
  text-shadow: 0 2px 14px rgba(0,0,0,.7); padding: 6px 14px;
  background: rgba(0,0,0,.32); border-radius: 14px; border: 1px solid rgba(232,194,102,.3);
}
.pm-banner.bad { color: #ff9d9d; border-color: rgba(255,120,120,.35); }

/* Round-result table. */
.pm-results {
  display: flex; flex-direction: column-reverse; gap: 4px;
  background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 8px 12px; max-width: min(560px, 92%);
  max-height: 40vh; overflow-y: auto;
}
.pm-result-row, .pm-result-head {
  display: grid; grid-template-columns: minmax(70px, 1fr) auto 44px 44px 48px;
  align-items: center; gap: 8px; font-size: 12.5px;
}
.pm-result-head { color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.pm-result-row.shower { color: var(--gold-hi); }
.pm-r-name { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-r-cards { display: flex; }
.pm-mini { width: 24px; aspect-ratio: 100/140; }
.pm-mini + .pm-mini { margin-left: -10px; }
.pm-mini svg { width: 100%; height: 100%; }
.pm-r-sum { font-variant-numeric: tabular-nums; }
.pm-r-delta { font-weight: 800; font-variant-numeric: tabular-nums; }
.pm-r-delta.up { color: #ff9d9d; }
.pm-r-delta.down { color: var(--teal); }
.pm-r-total { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Controls + hero hand. */
#pmControls {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap; min-height: 34px; padding: 0 8px;
}
.pm-sum { font-size: 13px; color: var(--text-dim); }
.pm-sum b { color: var(--gold-hi); font-size: 15px; }
.pm-hint { font-size: 13px; color: var(--text); }
.pm-hint.dim { color: var(--text-dim); }
.pm-hint b { color: var(--teal); }
.pm-show-btn {
  background: linear-gradient(165deg, #e0655f, #a03a38); color: #fff; font-weight: 800;
  padding: 9px 16px; border-radius: 12px; box-shadow: 0 8px 22px rgba(160,58,56,.4);
}
.pm-show-btn:hover { filter: brightness(1.12); }

#pmHand {
  display: flex; justify-content: center; align-items: flex-end; gap: 14px;
  flex-wrap: wrap; padding: 4px 8px 2px;
}
#pmHand:not(:empty) { min-height: clamp(84px, 14vh, 128px); }
.pm-group { display: flex; border-radius: 10px; padding: 3px; }
.pm-group.sequence { background: rgba(95,224,183,.10); box-shadow: inset 0 0 0 1px rgba(95,224,183,.28); }
.pm-group.set { background: rgba(122,162,247,.10); box-shadow: inset 0 0 0 1px rgba(122,162,247,.3); }
.pm-card {
  width: clamp(50px, 8vmin, 86px); aspect-ratio: 100/140; flex: none; padding: 0;
  transition: transform .13s ease; position: relative;
}
.pm-card + .pm-card { margin-left: calc(clamp(50px, 8vmin, 86px) * -0.45); }
.pm-card svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); border-radius: 8px; }
.pm-card:hover { transform: translateY(-8px); z-index: 4; }
.pm-card.sel { transform: translateY(-16px); z-index: 5; }
.pm-card.sel svg { filter: drop-shadow(0 0 9px rgba(232,194,102,.75)) drop-shadow(0 4px 10px rgba(0,0,0,.4)); }

@media (max-width: 760px) {
  #pmWrap { inset: 46px 0 0 0; padding: 2px 6px 8px; gap: 5px; }
  .pm-name { max-width: 74px; font-size: 11px; }
  .pm-av { width: 28px; height: 28px; font-size: 15px; }
  .pm-seat { padding: 4px 7px; gap: 6px; }
  #pmPiles { left: 10px; gap: 10px; }
  #pmCenter { padding-left: 120px; }
  .pm-card + .pm-card { margin-left: calc(clamp(50px, 8vmin, 86px) * -0.6); }
  #pmHand { gap: 8px; }
  .pm-results { max-width: 96%; }
  .pm-mini { width: 18px; }
  .pm-mini + .pm-mini { margin-left: -9px; }
}

/* ═══════════════ poker variants: picks, stud fans ═══════════════ */

/* Draw / pineapple-discard: the hero's cards invite a tap. */
.seat-cards.pickable .pcard { cursor: pointer; position: relative; transition: transform .12s ease, filter .12s; }
.seat-cards.pickable .pcard:hover { filter: brightness(1.12); }
.seat-cards.pickable .pcard.pick-sel {
  translate: 0 -16px;
  filter: drop-shadow(0 0 10px rgba(232, 194, 102, .85));
}
.seat-cards.pickable .pcard.pick-sel::after {
  content: ""; position: absolute; inset: 0; border-radius: 9px;
  box-shadow: inset 0 0 0 2.5px var(--gold);
}

/* Six and seven card fans (stud, big draw hands) squeeze a little. */
.seat-cards.many .pcard { margin: 0 -12px; }
.seat-cards.crowd .pcard { margin: 0 -15px; }
.seat.hero .seat-cards.crowd .pcard { margin: 0 -18px; }

/* ── Shared chrome for the RingView games (Bluff, Rummy, Judgement, Blackjack) ── */
body.bf #actionBar, body.bf #heroPrompt, body.bf #ritBar,
body.rm #actionBar, body.rm #heroPrompt, body.rm #ritBar,
body.jd #actionBar, body.jd #heroPrompt, body.jd #ritBar,
body.bj #actionBar, body.bj #heroPrompt, body.bj #ritBar { display: none !important; }
body.bf .sp-tab[data-sp="ledger"], body.rm .sp-tab[data-sp="ledger"],
body.jd .sp-tab[data-sp="ledger"] { display: none; }

/* ── Bluff ── */
.bf-ranks { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: 100%; margin-bottom: 2px; }
.bf-rank {
  min-width: 34px; padding: 6px 7px; border-radius: 9px; font-size: 12px; font-weight: 800;
  background: var(--glass); border: 1px solid var(--glass-line); color: var(--text-dim);
}
.bf-rank:hover { color: var(--text); border-color: var(--glass-line-hi); }
.bf-rank.sel { color: var(--gold-hi); border-color: rgba(232,194,102,.65); box-shadow: 0 0 12px rgba(232,194,102,.22); }
.bf-claim-tag {
  position: absolute; right: -4px; top: -10px; z-index: 4; padding: 3px 7px; border-radius: 9px;
  font-size: 9px; font-weight: 800; color: var(--gold-hi); white-space: nowrap;
  background: rgba(20,22,31,.82); border: 1px solid rgba(232,194,102,.5);
  box-shadow: 0 4px 12px rgba(0,0,0,.4), 0 0 10px rgba(232,194,102,.18);
}
@media (max-width: 680px) {
  .bf-rank { min-width: 27px; padding: 4px 5px; font-size: 10px; }
  .bf-claim-tag { font-size: 8px; padding: 2px 5px; }
}

/* ── Rummy ── */
#rmPiles { position: absolute; top: 26%; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-start; gap: 12px; z-index: 2; }
.rm-pile { position: relative; width: clamp(44px, 6.4vmin, 70px); text-align: center; }
.rm-pile svg { width: 100%; filter: drop-shadow(0 5px 10px rgba(0,0,0,.45)); }
.rm-pile small { display: block; margin-top: 2px; font-size: 8.5px; font-weight: 800; letter-spacing: .12em; color: var(--text-dim); text-shadow: 0 2px 6px #000; }
.rm-pile.wild { transform: rotate(8deg) translateY(4px); }
.rm-pile.live { cursor: pointer; }
.rm-pile.live > svg, .rm-pile.live .rm-empty { outline: 2px solid rgba(232,194,102,.65); outline-offset: 2px; border-radius: 8px; box-shadow: 0 0 18px rgba(232,194,102,.3); }
.rm-pile.live:hover { transform: translateY(-5px); }
.rm-empty { width: 100%; aspect-ratio: 100/140; border-radius: 8px; border: 1.5px dashed rgba(255,255,255,.25); }
#rmHand.gt-hand { flex-wrap: wrap; gap: 3px 14px; align-items: flex-end; }
.rm-group { display: flex; align-items: flex-end; padding: 3px 5px 2px; border-radius: 11px; }
.rm-group[data-group] { background: rgba(232,194,102,.08); border: 1px solid rgba(232,194,102,.32); cursor: pointer; }
.rm-group[data-group]:hover { border-color: rgba(232,194,102,.6); }
.rm-group .tp-card { width: clamp(40px, 6vmin, 64px); }
.rm-group .tp-card + .tp-card { margin-left: calc(clamp(40px, 6vmin, 64px) * -.42); }
.rm-group.loose .tp-card.sel { transform: translateY(-12px); }
.rm-group[data-group] .tp-card { pointer-events: none; }
.tp-seat-cards .rm-wide { display: flex; }
.tp-seat-cards .rm-wide span + span { margin-left: -24px; }
@media (max-width: 680px) {
  #rmPiles { top: 24%; gap: 7px; }
  .rm-group .tp-card { width: clamp(30px, 8.4vw, 44px); }
  .rm-group .tp-card + .tp-card { margin-left: calc(clamp(30px, 8.4vw, 44px) * -.46); }
}

/* ── Judgement ── */
.jd-trump { font-size: 16px; }
.jd-trump.red { color: #ff7d7d; }
.jd-dead { opacity: .35; }
.jd-took { outline: 2px solid rgba(232,194,102,.75); outline-offset: 1px; border-radius: 7px; }
.jd-score table { margin: 0 auto; border-collapse: collapse; background: rgba(15,17,25,.72); border: 1px solid var(--glass-line); border-radius: 12px; overflow: hidden; }
.jd-score th, .jd-score td { padding: 4px 10px; font-size: 11px; text-align: center; }
.jd-score th { color: var(--text-dim); font-weight: 700; border-bottom: 1px solid var(--glass-line); }
.jd-score td:first-child { text-align: left; font-weight: 700; }

/* ── Blackjack ── */
#bjDealer { position: absolute; top: 17%; left: 50%; transform: translateX(-50%); z-index: 2; }
.bj-dealer-box { display: flex; align-items: center; gap: 3px; padding: 6px 10px; border-radius: 13px; background: rgba(15,17,25,.55); border: 1px solid var(--glass-line); backdrop-filter: var(--blur-lite); }
.bj-dealer-box small { font-size: 8.5px; font-weight: 800; letter-spacing: .14em; color: var(--text-dim); margin-right: 5px; }
.bj-dealer-box > span { width: clamp(38px, 5.6vmin, 60px); }
.bj-dealer-box > span + span { margin-left: -14px; }
.bj-dealer-box svg { width: 100%; filter: drop-shadow(0 4px 9px rgba(0,0,0,.45)); }
.bj-handbox { position: relative; display: inline-flex; align-items: flex-end; padding: 2px 3px; border-radius: 8px; }
.bj-handbox.live { outline: 2px solid rgba(232,194,102,.7); outline-offset: 1px; box-shadow: 0 0 14px rgba(232,194,102,.3); }
.bj-handbox.bust { opacity: .55; }
.bj-handbox + .bj-handbox { margin-left: 6px; }
.bj-total {
  position: absolute; right: -6px; top: -9px; z-index: 3; font-style: normal; font-size: 9.5px;
  font-weight: 800; padding: 1px 6px; border-radius: 999px; color: var(--text);
  background: rgba(20,22,31,.9); border: 1px solid var(--glass-line);
}
.bj-total.win, .bj-total.blackjack { color: #ffe9a8; border-color: rgba(232,194,102,.65); }
.bj-total.lose, .bj-total.bust { color: #ff9a9a; }
.bj-total.push { color: var(--text-dim); }
#bjControls .tp-number input { width: 84px; }
@media (max-width: 680px) {
  #bjDealer { top: 15%; }
  .bj-dealer-box > span { width: 30px; }
  /* Keep hits and splits inside the seat's own footprint on phones. */
  .bj-handbox { padding: 1px 2px; }
  body.bj .tp-seat-cards span + span { margin-left: -16px; }
  body.bj .tp-seat-cards .bj-handbox + .bj-handbox { margin-left: 4px; }
  .bj-total { font-size: 8px; right: -4px; top: -7px; padding: 1px 5px; }
}

/* Blackjack layout polish: the info pill tucks under the top rim and the
   dealer box sits below it, clear of both. */
#bjInfo { top: 12.5%; }
#bjDealer { top: 24%; }
@media (max-width: 680px) {
  #bjInfo { top: 11.5%; }
  #bjDealer { top: 22%; }
}

/* Engine-suggested rummy groups: dashed, cooler tint than manual groups. */
.rm-group.auto { background: rgba(126,200,255,.06); border: 1px dashed rgba(126,200,255,.38); }

/* Bluff pile: a loose face-down stack in the middle of the felt. */
#bfPile { position: absolute; top: 31%; left: 50%; transform: translateX(-50%); width: 70px; height: 92px; z-index: 1; pointer-events: none; }
.bf-pile-card { position: absolute; inset: 0; }
.bf-pile-card svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 9px rgba(0,0,0,.4)); }
@media (max-width: 680px) { #bfPile { width: 48px; height: 64px; top: 33%; } }