:root {
  color-scheme: dark;

  --bg: #0d1440;
  --bg-deep: #091032;
  --bg-top: #1b2672;

  --panel: #18215f;
  --panel-2: #222d74;
  --panel-3: #1a2467;

  --text: #f7f8ff;
  --muted: #c8d0ff;
  --soft: #aeb8ef;

  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.24);

  --primary: #ffffff;
  --primary-text: #161b52;
  --secondary: rgba(255, 255, 255, 0.12);
  --secondary-2: rgba(255, 255, 255, 0.08);
  --secondary-text: #ffffff;

  --warning-bg: rgba(255, 196, 0, 0.14);
  --warning-line: rgba(255, 196, 0, 0.35);
  --warning-text: #fff2bc;

  --felt: #18a845;
  --felt-bright: #2fcb63;
  --felt-dark: #0f8a31;
  --felt-deep: #0a6422;
  --felt-ring: rgba(255, 255, 255, 0.09);

  --rail: #d1a073;
  --rail-light: #f2c59a;
  --rail-dark: #8a5f3f;
  --rail-shadow: rgba(78, 47, 19, 0.36);

  --wood-light: #8c5a35;
  --wood-mid: #774725;
  --wood-dark: #5f3418;
  --wood-deep: #45220f;
  --wood-gap: rgba(43, 21, 9, 0.46);
  --wood-glow: rgba(255, 225, 176, 0.12);
  --brand-burn: rgba(0, 0, 0, 0.48);
  --brand-floor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201600%20960'%20fill='none'%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cg%20id='brand-burn-shadow'%20stroke='%23140707'%20stroke-width='13'%20stroke-linecap='round'%20stroke-linejoin='round'%20opacity='.18'%3E%0A%20%20%20%20%20%20%3Cpath%20d='M6%208H78'/%3E%0A%20%20%20%20%20%20%3Cpath%20d='M32%208V102'/%3E%0A%20%20%20%20%20%20%3Cpath%20d='M8%2046H32'/%3E%0A%20%20%20%20%20%20%3Cpath%20d='M32%208H65C86%208%20102%2023%20102%2039C102%2057%2086%2072%2065%2072H32'/%3E%0A%20%20%20%20%20%20%3Cpath%20d='M32%2046L76%2098'/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%20%20%3Cg%20id='brand-burn-main'%20stroke='%23000000'%20stroke-width='7.8'%20stroke-linecap='round'%20stroke-linejoin='round'%20opacity='.92'%3E%0A%20%20%20%20%20%20%3Cpath%20d='M6%208H78'/%3E%0A%20%20%20%20%20%20%3Cpath%20d='M32%208V102'/%3E%0A%20%20%20%20%20%20%3Cpath%20d='M8%2046H32'/%3E%0A%20%20%20%20%20%20%3Cpath%20d='M32%208H65C86%208%20102%2023%20102%2039C102%2057%2086%2072%2065%2072H32'/%3E%0A%20%20%20%20%20%20%3Cpath%20d='M32%2046L76%2098'/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%20%20%3Cg%20id='brand-burn-edge'%20stroke='%2324110c'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%20opacity='.24'%3E%0A%20%20%20%20%20%20%3Cpath%20d='M6%208H78'/%3E%0A%20%20%20%20%20%20%3Cpath%20d='M32%208V102'/%3E%0A%20%20%20%20%20%20%3Cpath%20d='M8%2046H32'/%3E%0A%20%20%20%20%20%20%3Cpath%20d='M32%208H65C86%208%20102%2023%20102%2039C102%2057%2086%2072%2065%2072H32'/%3E%0A%20%20%20%20%20%20%3Cpath%20d='M32%2046L76%2098'/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%20%20%3Cg%20id='brand'%3E%0A%20%20%20%20%20%20%3Cuse%20href='%23brand-burn-shadow'/%3E%0A%20%20%20%20%20%20%3Cuse%20href='%23brand-burn-main'/%3E%0A%20%20%20%20%20%20%3Cuse%20href='%23brand-burn-edge'/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%3C/defs%3E%0A%20%20%3Cg%20opacity='.94'%3E%0A%20%20%20%20%3Cuse%20href='%23brand'%20transform='translate(96%20124)%20rotate(-10%2054%2054)%20scale(1.08)'/%3E%0A%20%20%20%20%3Cuse%20href='%23brand'%20transform='translate(138%20374)%20rotate(7%2054%2054)%20scale(1.04)'/%3E%0A%20%20%20%20%3Cuse%20href='%23brand'%20transform='translate(104%20716)%20rotate(-8%2054%2054)%20scale(1.1)'/%3E%0A%20%20%20%20%3Cuse%20href='%23brand'%20transform='translate(1408%20136)%20rotate(11%2054%2054)%20scale(1.04)'/%3E%0A%20%20%20%20%3Cuse%20href='%23brand'%20transform='translate(1376%20426)%20rotate(-6%2054%2054)%20scale(1.03)'/%3E%0A%20%20%20%20%3Cuse%20href='%23brand'%20transform='translate(1420%20714)%20rotate(8%2054%2054)%20scale(1.08)'/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");

  --pot-bg: #0b2347;
  --pot-text: #ffd972;

  --card-bg: #ffffff;
  --card-text: #111111;
  --card-red: #d63b3b;
  --card-black: #0f1115;

  --chair-seat: #323a70;
  --chair-seat-light: #465090;
  --chair-back: #3e4a89;
  --chair-back-light: #5a66a9;
  --chair-leg: #17214f;

  --avatar-skin-1: #e1c8cb;
  --avatar-skin-2: #b89da5;
  --avatar-shadow: rgba(46, 27, 51, 0.16);
  --avatar-shirt-1: #356f68;
  --avatar-shirt-2: #1d4f6b;
  --avatar-shirt-3: #3a66be;
  --avatar-shirt-4: #2a4d93;
  --avatar-hat-1: #3d4fae;
  --avatar-hat-2: #243174;
  --avatar-hat-3: #b55cbd;
  --avatar-hat-4: #743380;
  --avatar-hair: #1f2348;
  --avatar-hair-soft: #2c3362;
  --avatar-bandana: #10264d;
  --avatar-bandana-2: #214778;
  --avatar-jacket-1: #a1c89a;
  --avatar-jacket-2: #7ea77b;
  --avatar-boot-1: #263566;
  --avatar-boot-2: #152042;

  --shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.22);
  --shadow-deep: 0 18px 42px rgba(0, 0, 0, 0.35);
  --glow-soft: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 30px rgba(9, 16, 50, 0.28);

  --radius-lg: 22px;
  --radius-md: 18px;
  --radius-sm: 14px;

  --table-width: 456px;
  --table-height: 680px;
  --table-radius: 194px;
  --table-border: 17px;

  --floor-width: 1080px;
  --floor-height: 930px;
  --floor-radius: 58px;

  --table-stage-extra: 548px;
  --table-stage-top-pad: 164px;
  --table-stage-side-pad: 34px;
  --table-stage-bottom-pad: 192px;

  --table-center-pad-top: 114px;
  --table-center-pad-side: 24px;
  --table-center-pad-bottom: 122px;

  --rail-gap-top: 244px;
  --rail-gap-side: 168px;
  --rail-gap-side-lower: 162px;
  --seat-upper-side-y: 68px;
  --seat-lower-side-y: 196px;
  --seat-bottom-center-y: 14px;

  --seat-anchor-width: 188px;
  --seat-anchor-height: 236px;
  --seat-label-width: 162px;
  --seat-label-min-height: 86px;
  --seat-holder-width: 124px;
  --seat-holder-height: 122px;
  --seat-chair-width: 110px;
  --seat-chair-height: 36px;
  --seat-chair-bottom: 20px;
  --seat-holder-bottom: 18px;
  --seat-rail-badge-width: 104px;

  --seat-felt-spot-width: 132px;
  --seat-felt-spot-height: 120px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at top, rgba(50, 68, 175, 0.34) 0%, transparent 34%),
    radial-gradient(circle at bottom, rgba(8, 15, 48, 0.65) 0%, transparent 48%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 42%, var(--bg-deep) 100%);
  color: var(--text);
  font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

body {
  padding: 18px 12px 34px;
}

button {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.08));
  color: var(--secondary-text);
  padding: 15px 18px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    opacity 160ms ease,
    background 160ms ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--line-strong);
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

#loginButton,
#paymentButton {
  background: linear-gradient(180deg, #ffffff 0%, #eef1ff 100%);
  color: var(--primary-text);
  border-color: transparent;
}

#copyUrlButton {
  background: transparent;
}

.hidden {
  display: none !important;
}

.error-text {
  color: #ff9f9f !important;
}

.eyebrow {
  margin: 0 0 8px;
  color: #d7ddff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.subtle {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.table-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.2;
  white-space: nowrap;
}

.notice {
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--warning-bg);
  border: 1px solid var(--warning-line);
  color: var(--warning-text);
  line-height: 1.5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.035));
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 18px;
  box-shadow: var(--glow-soft);
}

.panel h2,
.panel h3,
.panel p {
  word-wrap: break-word;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.empty-state,
.info-card {
  padding: 16px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  line-height: 1.6;
}

.empty-state {
  color: var(--muted);
}

.info-card > div + div {
  margin-top: 6px;
}

.beginner-table-layout {
  display: grid;
  gap: 18px;
}

.beginner-table-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.beginner-table-copy h3 {
  margin: 0 0 10px;
  font-size: 1.6rem;
}

.table-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.visual-table-shell {
  display: grid;
  gap: 18px;
}

.table-stage-header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--muted);
  line-height: 1.45;
}

.table-stage-header strong {
  color: var(--text);
}

/* TABLE STAGE */

.table-outer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  width: 100%;
}

.table-outer::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(var(--floor-width), calc(100% - 6px));
  height: calc(100% - 20px);
  border-radius: var(--floor-radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0) 16%, rgba(0,0,0,0.08) 72%, rgba(0,0,0,0.22) 100%),
    repeating-linear-gradient(
      90deg,
      var(--wood-light) 0 54px,
      rgba(255,255,255,0.04) 54px 56px,
      var(--wood-mid) 56px 112px,
      rgba(41, 20, 9, 0.34) 112px 116px,
      var(--wood-dark) 116px 172px,
      rgba(255,255,255,0.03) 172px 174px,
      #72421f 174px 228px,
      var(--wood-gap) 228px 232px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.04) 0 2px,
      rgba(255,255,255,0) 2px 18px,
      rgba(38, 18, 9, 0.18) 18px 19px,
      rgba(255,255,255,0) 19px 38px
    );
  border: 1px solid rgba(52, 26, 11, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.03),
    inset 0 18px 36px rgba(255,255,255,0.06),
    inset 0 -34px 50px rgba(0,0,0,0.2),
    0 38px 70px rgba(6, 10, 28, 0.38);
  z-index: 0;
}

.table-outer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(var(--floor-width), calc(100% - 6px));
  height: calc(100% - 20px);
  border-radius: var(--floor-radius);
  background:
    radial-gradient(circle at 50% 48%, rgba(0,0,0,0) 0 28%, rgba(0,0,0,0.05) 46%, rgba(0,0,0,0.18) 76%, rgba(0,0,0,0.28) 100%),
    radial-gradient(circle at 24% 22%, var(--wood-glow) 0, transparent 18%),
    radial-gradient(circle at 78% 28%, rgba(255, 233, 197, 0.08) 0, transparent 20%),
    var(--brand-floor);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  opacity: 0.96;
  z-index: 1;
  pointer-events: none;
}

.table-outer-compact {
  width: min(1120px, 100%);
  min-height: calc(var(--table-height) + var(--table-stage-extra));
  margin: 0 auto;
  padding: var(--table-stage-top-pad) var(--table-stage-side-pad) var(--table-stage-bottom-pad);
}

.seat-ring {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.poker-table {
  position: relative;
  z-index: 2;
  width: var(--table-width);
  height: var(--table-height);
  border-radius: var(--table-radius);
  background:
    radial-gradient(circle at 50% 24%, rgba(255,255,255,0.18), transparent 20%),
    radial-gradient(circle at 50% 38%, rgba(71,255,140,0.25), transparent 34%),
    radial-gradient(circle at 50% 76%, rgba(9,84,29,0.26), transparent 30%),
    linear-gradient(180deg, var(--felt) 0%, var(--felt-bright) 48%, var(--felt-dark) 82%, var(--felt-deep) 100%);
  border: var(--table-border) solid var(--rail);
  box-shadow:
    inset 0 0 0 4px rgba(99, 62, 32, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -12px 30px rgba(0,0,0,0.16),
    0 28px 64px rgba(0, 0, 0, 0.36);
  overflow: visible;
}

.poker-table::before {
  content: "";
  position: absolute;
  inset: calc(var(--table-border) * -0.45);
  border-radius: calc(var(--table-radius) + 10px);
  background:
    linear-gradient(180deg, rgba(255,241,223,0.22) 0%, rgba(255,231,199,0.06) 22%, rgba(123,79,45,0.24) 55%, rgba(63,36,16,0.24) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.18),
    inset 0 -2px 0 rgba(0,0,0,0.18),
    0 14px 22px rgba(54, 30, 11, 0.18);
  z-index: -1;
}

.poker-table::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: calc(var(--table-radius) - 12px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 34px rgba(0,0,0,0.14);
  pointer-events: none;
}

.beginner-felt-compact {
  width: var(--table-width);
  height: var(--table-height);
}

.felt-inner-ring {
  position: absolute;
  inset: 18px;
  border-radius: calc(var(--table-radius) - 28px);
  border: 3px solid var(--felt-ring);
  box-shadow:
    inset 0 0 42px rgba(0,0,0,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.03);
  pointer-events: none;
}

.table-center-stack {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto auto 1fr;
  align-items: center;
  justify-items: center;
  padding: var(--table-center-pad-top) var(--table-center-pad-side) var(--table-center-pad-bottom);
  z-index: 3;
}

.table-center-label {
  align-self: end;
  margin-bottom: 16px;
  color: rgba(255,255,255,0.95);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
}

.community-row {
  align-self: start;
  display: grid;
  grid-template-columns: repeat(5, minmax(48px, 64px));
  gap: 10px;
  justify-content: center;
  margin-bottom: 22px;
}

.playing-card {
  position: relative;
  width: 64px;
  height: 94px;
  border-radius: 15px;
  background: var(--card-bg);
  color: var(--card-text);
  border: 2px solid rgba(17,17,17,0.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 10px 18px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.community-card.empty-card {
  background: rgba(255,255,255,0.08);
  border: 3px dashed rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.community-card.empty-card span {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.red-suit {
  color: var(--card-red);
}

.black-suit {
  color: var(--card-black);
}

.card-corner {
  position: absolute;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}

.card-corner-top {
  top: 10px;
  left: 10px;
}

.card-corner-bottom {
  right: 10px;
  bottom: 10px;
  transform: rotate(180deg);
}

.card-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  font-weight: 700;
}

.back-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04)),
    linear-gradient(180deg, #4f61b4, #33428f);
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.95);
}

.back-card span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  font-weight: 700;
}

.pot-badge {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 122px;
  padding: 13px 18px;
  border-radius: 999px;
  background: var(--pot-bg);
  border: 2px solid rgba(255, 217, 114, 0.35);
  color: var(--pot-text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 24px rgba(0,0,0,0.22);
}

.pot-label {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pot-amount {
  font-size: 1rem;
  font-weight: 800;
}

.center-badge {
  align-self: end;
  text-align: center;
  min-width: min(270px, 72%);
  padding: 22px 22px;
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(9, 77, 29, 0.92), rgba(7, 103, 35, 0.92));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 14px 24px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.center-badge-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #f4fff6;
  margin-bottom: 8px;
}

.center-badge-subtitle {
  font-size: 0.96rem;
  color: rgba(244,255,246,0.82);
}

/* SEAT RING OUTSIDE TABLE */

.seat-anchor {
  position: absolute;
  width: var(--seat-anchor-width);
  height: var(--seat-anchor-height);
  z-index: 8;
  pointer-events: none;
}

.seat-anchor-rail {
  transform-origin: center center;
}

.seat-anchor.active-turn .seat-head-label {
  border-color: rgba(255, 217, 114, 0.44);
  box-shadow:
    0 0 0 2px rgba(255, 217, 114, 0.24),
    0 16px 30px rgba(0,0,0,0.26);
}

.seat-head-label {
  position: absolute;
  left: 50%;
  top: 4px;
  transform: translateX(-50%);
  width: var(--seat-label-width);
  min-height: var(--seat-label-min-height);
  padding: 14px 14px 12px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(28,39,107,0.86), rgba(18,27,78,0.74));
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(12px);
  text-align: center;
  box-shadow:
    0 14px 26px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
}

.seat-head-label::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 46%;
  border-radius: 20px 20px 14px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0));
  pointer-events: none;
}

.seat-head-label.empty {
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.1));
  border-color: rgba(255,255,255,0.12);
}

.seat-head-name {
  position: relative;
  z-index: 1;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.12;
  color: var(--text);
  text-shadow: 0 1px 0 rgba(0,0,0,0.14);
}

.seat-head-stack {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.2;
  color: rgba(224,230,255,0.9);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.seat-head-action {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  margin: 8px auto 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(10,19,57,0.62);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 0.74rem;
  line-height: 1.1;
  color: rgba(247,248,255,0.95);
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.seat-head-action::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffd972;
  box-shadow: 0 0 0 3px rgba(255,217,114,0.16);
  flex: 0 0 auto;
}

.seat-chair-base {
  position: absolute;
  left: 50%;
  bottom: var(--seat-chair-bottom);
  width: var(--seat-chair-width);
  height: var(--seat-chair-height);
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)),
    linear-gradient(180deg, var(--chair-seat-light), var(--chair-seat));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 12px 20px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.08);
  z-index: 1;
}

.seat-chair-base::before,
.seat-chair-base::after {
  content: "";
  position: absolute;
  bottom: -18px;
  width: 9px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2d376d, var(--chair-leg));
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.seat-chair-base::before {
  left: 24px;
}

.seat-chair-base::after {
  right: 24px;
}

.seat-holder-wrap {
  position: absolute;
  left: 50%;
  bottom: var(--seat-holder-bottom);
  transform: translateX(-50%);
  width: var(--seat-holder-width);
  height: var(--seat-holder-height);
  display: grid;
  place-items: center;
  z-index: 2;
}

.seat-holder-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  width: calc(var(--seat-chair-width) + 8px);
  height: calc(var(--seat-holder-height) * 0.62);
  border-radius: 46px 46px 24px 24px;
  background:
    linear-gradient(180deg, var(--chair-back-light) 0%, var(--chair-back) 48%, #28325f 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 10px 18px rgba(0,0,0,0.22);
  z-index: 0;
}

.seat-holder-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  width: calc(var(--seat-chair-width) - 24px);
  height: 18px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,0.14), transparent 64%),
    rgba(0,0,0,0.12);
  z-index: 1;
  opacity: 0.5;
}

.seat-holder-art {
  position: relative;
  z-index: 2;
  width: var(--seat-holder-width);
  height: var(--seat-holder-height);
  filter: drop-shadow(0 14px 18px rgba(0,0,0,0.24));
  transform-origin: center bottom;
}

.holder-shadow {
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  width: 74%;
  height: 15%;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.24);
  filter: blur(6px);
}

.holder-hat-brim {
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  width: 72%;
  height: 14%;
  min-height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(58,72,146,0.96), rgba(22,29,64,0.92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 4px 8px rgba(0,0,0,0.12);
}

.holder-hat-brim::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
}

.holder-hat-crown {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 38%;
  height: 26%;
  min-height: 20px;
  border-radius: 18px 18px 10px 10px;
  background: linear-gradient(180deg, var(--avatar-hat-1), var(--avatar-hat-2));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.holder-hat-crown::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 18%;
  width: 40%;
  height: 22%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  filter: blur(1px);
}

.holder-hat-band {
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
  width: 40%;
  height: 7%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(10,16,46,0.7), rgba(10,16,46,0.5));
}

.holder-hair {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  width: 50%;
  height: 22%;
  border-radius: 18px 18px 12px 12px;
  background: linear-gradient(180deg, var(--avatar-hair-soft), var(--avatar-hair));
  opacity: 0.94;
  z-index: 1;
}

.holder-hair::before,
.holder-hair::after {
  content: "";
  position: absolute;
  bottom: -30%;
  width: 22%;
  height: 70%;
  background: linear-gradient(180deg, var(--avatar-hair-soft), var(--avatar-hair));
  border-radius: 10px;
}

.holder-hair::before {
  left: 6%;
  transform: rotate(10deg);
}

.holder-hair::after {
  right: 6%;
  transform: rotate(-10deg);
}

.holder-face {
  position: absolute;
  left: 50%;
  top: 24%;
  transform: translateX(-50%);
  width: 34%;
  height: 31%;
  border-radius: 52% 52% 48% 48%;
  background:
    radial-gradient(circle at 27% 56%, rgba(255,255,255,0.12) 0 8%, transparent 9%),
    radial-gradient(circle at 73% 56%, rgba(255,255,255,0.12) 0 8%, transparent 9%),
    linear-gradient(180deg, var(--avatar-skin-1), var(--avatar-skin-2));
  box-shadow:
    inset 0 -3px 0 var(--avatar-shadow),
    0 2px 0 rgba(255,255,255,0.12);
  z-index: 2;
}

.holder-face::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 34%;
  width: 20px;
  height: 6px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 24% 52%, #1d2140 0 2px, transparent 2.2px),
    radial-gradient(circle at 76% 52%, #1d2140 0 2px, transparent 2.2px);
}

.holder-face::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 20%;
  width: 14px;
  height: 6px;
  transform: translateX(-50%);
  border-bottom: 2px solid rgba(33,26,39,0.38);
  border-radius: 0 0 12px 12px;
}

.holder-neck {
  position: absolute;
  left: 50%;
  top: 49%;
  transform: translateX(-50%);
  width: 12%;
  height: 8%;
  border-radius: 8px;
  background: linear-gradient(180deg, #d4bcc2, #b1979f);
  z-index: 1;
}

.holder-bandana {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translateX(-50%);
  width: 40%;
  height: 14%;
  border-radius: 999px 999px 12px 12px;
  background: linear-gradient(180deg, var(--avatar-bandana-2), var(--avatar-bandana));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  z-index: 2;
}

.holder-bandana::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -22%;
  width: 24%;
  height: 60%;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(180deg, #274d7f, #122c57);
  border-radius: 3px;
}

.holder-body {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  width: 62%;
  height: 36%;
  border-radius: 24px 24px 18px 18px;
  background: linear-gradient(180deg, var(--avatar-shirt-1), var(--avatar-shirt-2));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  z-index: 1;
}

.holder-body::before {
  content: "";
  position: absolute;
  inset: 18% 20% 16%;
  border-radius: 18px 18px 12px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  opacity: 0.55;
}

.holder-body::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 18%;
  width: 18%;
  height: 38%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: 0.65;
}

.holder-jacket-left,
.holder-jacket-right {
  position: absolute;
  bottom: 18%;
  width: 18%;
  height: 42%;
  border-radius: 18px 18px 14px 14px;
  background: linear-gradient(180deg, var(--avatar-jacket-1), var(--avatar-jacket-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  z-index: 1;
}

.holder-jacket-left {
  left: 11%;
  transform: rotate(26deg);
}

.holder-jacket-right {
  right: 11%;
  transform: rotate(-26deg);
}

.holder-belt {
  position: absolute;
  left: 50%;
  bottom: 25%;
  transform: translateX(-50%);
  width: 42%;
  height: 4%;
  border-radius: 999px;
  background: rgba(9,24,56,0.36);
  z-index: 3;
}

.holder-belt::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -20%;
  width: 16%;
  height: 140%;
  transform: translateX(-50%);
  border-radius: 4px;
  background: linear-gradient(180deg, #f0d487, #c5a750);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18);
}

.holder-boot-left,
.holder-boot-right {
  position: absolute;
  bottom: 4%;
  width: 11%;
  height: 14%;
  border-radius: 10px 10px 6px 6px;
  background: linear-gradient(180deg, var(--avatar-boot-1), var(--avatar-boot-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  z-index: 1;
}

.holder-boot-left {
  left: 31%;
}

.holder-boot-right {
  right: 31%;
}

.seat-holder-art.cowgirl .holder-hat-crown {
  width: 42%;
  background: linear-gradient(180deg, var(--avatar-hat-3), var(--avatar-hat-4));
}

.seat-holder-art.cowgirl .holder-body {
  background: linear-gradient(180deg, var(--avatar-shirt-3), var(--avatar-shirt-4));
}

.seat-holder-art.cowgirl .holder-hair {
  width: 54%;
  height: 24%;
  top: 18%;
}

.seat-holder-art.cowgirl .holder-hair::before,
.seat-holder-art.cowgirl .holder-hair::after {
  height: 90%;
  bottom: -44%;
}

.seat-holder-art.cowgirl .holder-bandana {
  background: linear-gradient(180deg, #4774c9, #29488a);
}

.seat-holder-art.cowgirl .holder-jacket-left,
.seat-holder-art.cowgirl .holder-jacket-right {
  background: linear-gradient(180deg, #99c59f, #7cae88);
}

.seat-holder-empty {
  opacity: 0.96;
  filter: saturate(0.92) brightness(0.98) drop-shadow(0 12px 14px rgba(0, 0, 0, 0.2));
}

.seat-rail-marker {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.seat-rail-badge {
  min-width: var(--seat-rail-badge-width);
  padding: 7px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(10,19,57,0.88), rgba(11,27,71,0.74));
  border: 1px solid rgba(255,255,255,0.14);
  text-align: center;
  box-shadow:
    0 10px 16px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.seat-rail-badge.is-you {
  border-color: rgba(255, 217, 114, 0.35);
}

.seat-rail-badge-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text);
}

.seat-rail-badge-subtitle {
  margin-top: 3px;
  font-size: 0.62rem;
  color: var(--muted);
}

/* FACING DIRECTIONS */

.seat-holder-art.facing-up,
.seat-holder-art.facing-down,
.seat-holder-art.facing-left,
.seat-holder-art.facing-right {
  transform: translateY(0);
}

.seat-anchor.seat-ring-top-center .seat-holder-art {
  transform: translateY(1px) scale(1.01);
}

.seat-anchor.seat-ring-top-center .seat-holder-wrap {
  bottom: 22px;
}

.seat-anchor.seat-ring-top-center .seat-chair-base {
  bottom: 24px;
}

.seat-anchor.seat-ring-top-center .holder-face {
  top: 24%;
}

.seat-anchor.seat-ring-bottom-center .seat-holder-art {
  transform: translateY(2px) scale(0.99);
}

.seat-anchor.seat-ring-bottom-center .holder-hair {
  width: 58%;
  height: 26%;
  top: 16%;
  border-radius: 20px 20px 14px 14px;
}

.seat-anchor.seat-ring-bottom-center .holder-hair::before,
.seat-anchor.seat-ring-bottom-center .holder-hair::after {
  width: 24%;
  height: 78%;
  bottom: -42%;
}

.seat-anchor.seat-ring-bottom-center .holder-face {
  top: 24%;
  width: 36%;
  height: 29%;
  background: linear-gradient(180deg, #aa959c, #847078);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08);
}

.seat-anchor.seat-ring-bottom-center .holder-face::before,
.seat-anchor.seat-ring-bottom-center .holder-face::after {
  display: none;
}

.seat-anchor.seat-ring-bottom-center .holder-bandana {
  top: 52%;
}

.seat-anchor.seat-ring-top-left .seat-holder-art,
.seat-anchor.seat-ring-top-right .seat-holder-art {
  transform-origin: center bottom;
}

.seat-anchor.seat-ring-top-left .seat-holder-art {
  transform: translateY(1px) rotate(2deg);
}

.seat-anchor.seat-ring-top-right .seat-holder-art {
  transform: translateY(1px) scaleX(-1) rotate(2deg);
}

.seat-anchor.seat-ring-top-left .holder-hat-crown,
.seat-anchor.seat-ring-top-right .holder-hat-crown {
  left: 53%;
  width: 36%;
}

.seat-anchor.seat-ring-top-left .holder-hair,
.seat-anchor.seat-ring-top-right .holder-hair {
  left: 54%;
  width: 52%;
}

.seat-anchor.seat-ring-top-left .holder-face,
.seat-anchor.seat-ring-top-right .holder-face {
  left: 55%;
  top: 24%;
  width: 32%;
  height: 31%;
  border-radius: 54% 46% 50% 48%;
}

.seat-anchor.seat-ring-top-left .holder-face::before,
.seat-anchor.seat-ring-top-right .holder-face::before {
  width: 16px;
  background:
    radial-gradient(circle at 30% 52%, #1d2140 0 1.9px, transparent 2.2px),
    radial-gradient(circle at 74% 52%, #1d2140 0 1.7px, transparent 2px);
}

.seat-anchor.seat-ring-top-left .holder-bandana,
.seat-anchor.seat-ring-top-right .holder-bandana {
  left: 54%;
  width: 38%;
}

.seat-anchor.seat-ring-top-left .holder-body,
.seat-anchor.seat-ring-top-right .holder-body {
  left: 53%;
  width: 60%;
}

.seat-anchor.seat-ring-top-left .holder-jacket-left,
.seat-anchor.seat-ring-top-right .holder-jacket-left {
  left: 14%;
}

.seat-anchor.seat-ring-bottom-left .seat-holder-art,
.seat-anchor.seat-ring-bottom-right .seat-holder-art {
  transform-origin: center bottom;
}

.seat-anchor.seat-ring-bottom-left .seat-holder-art {
  transform: translateY(2px) rotate(1.5deg);
}

.seat-anchor.seat-ring-bottom-right .seat-holder-art {
  transform: translateY(2px) scaleX(-1) rotate(1.5deg);
}

.seat-anchor.seat-ring-bottom-left .holder-hat-crown,
.seat-anchor.seat-ring-bottom-right .holder-hat-crown {
  left: 53%;
  width: 35%;
}

.seat-anchor.seat-ring-bottom-left .holder-hair,
.seat-anchor.seat-ring-bottom-right .holder-hair {
  left: 54%;
  width: 56%;
  height: 25%;
  top: 16%;
  border-radius: 20px 20px 14px 14px;
}

.seat-anchor.seat-ring-bottom-left .holder-hair::before,
.seat-anchor.seat-ring-bottom-right .holder-hair::before,
.seat-anchor.seat-ring-bottom-left .holder-hair::after,
.seat-anchor.seat-ring-bottom-right .holder-hair::after {
  width: 24%;
  height: 80%;
  bottom: -44%;
}

.seat-anchor.seat-ring-bottom-left .holder-face,
.seat-anchor.seat-ring-bottom-right .holder-face {
  left: 55%;
  top: 24%;
  width: 31%;
  height: 29%;
  border-radius: 52% 44% 50% 48%;
  background: linear-gradient(180deg, #aa959c, #847078);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08);
}

.seat-anchor.seat-ring-bottom-left .holder-face::before,
.seat-anchor.seat-ring-bottom-right .holder-face::before,
.seat-anchor.seat-ring-bottom-left .holder-face::after,
.seat-anchor.seat-ring-bottom-right .holder-face::after {
  display: none;
}

.seat-anchor.seat-ring-bottom-left .holder-bandana,
.seat-anchor.seat-ring-bottom-right .holder-bandana {
  left: 54%;
  width: 36%;
  top: 52%;
}

.seat-anchor.seat-ring-bottom-left .holder-body,
.seat-anchor.seat-ring-bottom-right .holder-body {
  left: 53%;
  width: 58%;
}

.seat-anchor.seat-ring-bottom-left .holder-jacket-left,
.seat-anchor.seat-ring-bottom-right .holder-jacket-left {
  left: 14%;
}

/* OUTSIDE POSITIONS */

.seat-ring-top-center {
  left: 50%;
  top: calc(50% - (var(--table-height) / 2) - var(--rail-gap-top));
  transform: translateX(-50%);
}

.seat-ring-top-left {
  left: calc(50% - (var(--table-width) / 2) - var(--rail-gap-side));
  top: calc(50% - (var(--table-height) / 2) + var(--seat-upper-side-y));
}

.seat-ring-top-right {
  right: calc(50% - (var(--table-width) / 2) - var(--rail-gap-side));
  top: calc(50% - (var(--table-height) / 2) + var(--seat-upper-side-y));
}

.seat-ring-bottom-left {
  left: calc(50% - (var(--table-width) / 2) - var(--rail-gap-side-lower));
  top: calc(50% + (var(--table-height) / 2) - var(--seat-lower-side-y));
}

.seat-ring-bottom-right {
  right: calc(50% - (var(--table-width) / 2) - var(--rail-gap-side-lower));
  top: calc(50% + (var(--table-height) / 2) - var(--seat-lower-side-y));
}

.seat-ring-bottom-center {
  left: 50%;
  top: calc(50% + (var(--table-height) / 2) + var(--seat-bottom-center-y));
  transform: translateX(-50%);
}

/* FELT OVERLAY */

.seat-table-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.seat-table-spot {
  position: absolute;
  width: var(--seat-felt-spot-width);
  height: var(--seat-felt-spot-height);
}

.seat-name-plaque {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  max-width: 132px;
  padding: 5px 11px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(9,88,37,0.84), rgba(6,56,23,0.72));
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(244,255,246,0.96);
  box-shadow:
    0 8px 16px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.08);
  white-space: nowrap;
}

.seat-name-plaque.empty {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.72);
}

.seat-name-plaque-code {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.seat-name-plaque-text {
  font-size: 0.72rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seat-hole-cards {
  position: absolute;
  display: flex;
  gap: 7px;
  z-index: 4;
}

.seat-card-slot {
  width: 48px;
  height: 70px;
  border-radius: 14px;
  border: 2px dashed rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
}

.mini-card {
  width: 48px;
  height: 70px;
  border-radius: 12px;
}

.mini-card .card-center {
  font-size: 1.1rem;
}

.mini-card .card-corner {
  font-size: 0.68rem;
}

.mini-left {
  transform: rotate(-7deg);
}

.mini-right {
  transform: rotate(7deg);
}

.seat-bet-spot {
  position: absolute;
  z-index: 5;
}

.bet-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: #0b2347;
  color: #ffd972;
  border: 2px solid rgba(255, 217, 114, 0.35);
  font-size: 0.84rem;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
}

.seat-marker-row {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 5;
}

.dealer-puck,
.blind-puck,
.seat-role {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 8px 16px rgba(0,0,0,0.18);
}

.dealer-puck {
  background: #ffd24f;
  color: #10244d;
}

.small-blind-puck,
.seat-role {
  background: #eaf0ff;
  color: #14224e;
}

.big-blind-puck {
  background: #8bc7ff;
  color: #0a2043;
}

/* FELT POSITIONS */

.seat-felt-top-center {
  left: 50%;
  top: 54px;
  transform: translateX(-50%);
}

.seat-felt-top-left {
  left: 58px;
  top: 126px;
}

.seat-felt-top-right {
  right: 58px;
  top: 126px;
}

.seat-felt-bottom-left {
  left: 70px;
  bottom: 114px;
}

.seat-felt-bottom-right {
  right: 70px;
  bottom: 114px;
}

.seat-felt-bottom-center {
  left: 50%;
  bottom: 42px;
  transform: translateX(-50%);
}

.seat-table-spot .seat-hole-cards {
  left: 50%;
  top: 34px;
  transform: translateX(-50%);
}

.seat-table-spot .seat-bet-spot {
  left: 50%;
  top: 88px;
  transform: translateX(-50%);
}

.seat-table-spot .seat-marker-row {
  left: 50%;
  top: -22px;
  transform: translateX(-50%);
}

.seat-table-spot.empty .seat-name-plaque {
  opacity: 0.92;
}

.seat-table-spot.empty .seat-hole-cards,
.seat-table-spot.empty .seat-marker-row,
.seat-table-spot.empty .seat-bet-spot {
  opacity: 0.88;
}

/* LOWER PANELS */

.beginner-bottom-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.table-rule-box {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.table-rule-box p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.table-rule-box p + p {
  margin-top: 8px;
}

.table-rule-box strong {
  color: var(--text);
}

.beginner-controls {
  display: grid;
  gap: 14px;
}

.beginner-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.beginner-action-row button {
  flex: 1 1 200px;
}

.beginner-legal-panel {
  padding: 16px;
  border-radius: 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
}

.beginner-legal-panel p {
  margin: 0 0 12px;
  color: var(--muted);
}

/* COMING SOON */

.coming-soon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.coming-soon-card {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(30, 42, 118, 0.9), rgba(24, 34, 98, 0.88));
  border: 1px solid var(--line);
  box-shadow: var(--glow-soft);
}

.coming-soon-content {
  padding: 28px 24px 24px;
}

.coming-soon-content h3 {
  margin: 0 0 20px;
  font-size: 1.2rem;
}

.coming-soon-content p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.5;
}

.coming-soon-content strong {
  color: var(--text);
}

.coming-soon-banner {
  position: absolute;
  top: 26px;
  right: -60px;
  width: 220px;
  padding: 10px 0;
  background: #f0cf67;
  color: #4b2f00;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  transform: rotate(34deg);
  box-shadow: 0 10px 18px rgba(0,0,0,0.18);
}

/* GIFT SHOP */

.gift-shop-copy {
  display: grid;
  gap: 18px;
}

.gift-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.gift-item-card {
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(32, 44, 120, 0.92), rgba(28, 38, 105, 0.92));
  border: 1px solid var(--line);
  box-shadow: var(--glow-soft);
}

.gift-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.gift-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  font-size: 1.1rem;
  font-weight: 900;
}

.gift-item-card h3 {
  margin: 0 0 12px;
  font-size: 1.1rem;
}

.gift-price {
  margin: 0 0 14px;
  color: #ffd972;
  font-size: 1.05rem;
  font-weight: 800;
}

.gift-description {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.5;
}

.shop-placeholder-button {
  width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.1));
}

.gift-shop-note {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
  color: var(--muted);
  line-height: 1.6;
}

.gift-shop-note p {
  margin: 0;
}

.gift-shop-note p + p {
  margin-top: 10px;
}

.gift-shop-note strong {
  color: var(--text);
}

/* RESPONSIVE */

@media (max-width: 980px) {
  :root {
    --table-width: 430px;
    --table-height: 644px;
    --table-radius: 186px;
    --table-border: 16px;

    --floor-width: 980px;
    --floor-height: 860px;
    --floor-radius: 52px;

    --table-stage-extra: 508px;
    --table-stage-top-pad: 150px;
    --table-stage-side-pad: 26px;
    --table-stage-bottom-pad: 176px;

    --table-center-pad-top: 108px;
    --table-center-pad-side: 22px;
    --table-center-pad-bottom: 116px;

    --rail-gap-top: 226px;
    --rail-gap-side: 154px;
    --rail-gap-side-lower: 148px;
    --seat-upper-side-y: 64px;
    --seat-lower-side-y: 184px;
    --seat-bottom-center-y: 16px;

    --seat-anchor-width: 176px;
    --seat-anchor-height: 224px;
    --seat-label-width: 152px;
    --seat-label-min-height: 82px;
    --seat-holder-width: 116px;
    --seat-holder-height: 114px;
    --seat-chair-width: 102px;
    --seat-chair-height: 34px;
    --seat-chair-bottom: 18px;
    --seat-holder-bottom: 16px;
    --seat-rail-badge-width: 96px;

    --seat-felt-spot-width: 122px;
    --seat-felt-spot-height: 112px;
  }

  .community-row {
    grid-template-columns: repeat(5, minmax(46px, 60px));
  }

  .playing-card {
    width: 60px;
    height: 88px;
  }

  .table-center-label {
    font-size: 0.96rem;
    margin-bottom: 14px;
  }

  .center-badge {
    min-width: min(252px, 72%);
  }

  .seat-felt-top-left {
    left: 50px;
    top: 118px;
  }

  .seat-felt-top-right {
    right: 50px;
    top: 118px;
  }

  .seat-felt-bottom-left {
    left: 60px;
    bottom: 106px;
  }

  .seat-felt-bottom-right {
    right: 60px;
    bottom: 106px;
  }
}

@media (max-width: 760px) {
  body {
    padding: 14px 10px 28px;
  }

  .panel {
    padding: 16px;
    border-radius: 20px;
  }

  .beginner-table-copy h3 {
    font-size: 1.4rem;
  }

  .table-stage-header {
    grid-template-columns: 1fr;
  }

  :root {
    --table-width: 350px;
    --table-height: 566px;
    --table-radius: 174px;
    --table-border: 14px;

    --floor-width: 760px;
    --floor-height: 720px;
    --floor-radius: 42px;

    --table-stage-extra: 426px;
    --table-stage-top-pad: 136px;
    --table-stage-side-pad: 8px;
    --table-stage-bottom-pad: 156px;

    --table-center-pad-top: 102px;
    --table-center-pad-side: 16px;
    --table-center-pad-bottom: 108px;

    --rail-gap-top: 192px;
    --rail-gap-side: 112px;
    --rail-gap-side-lower: 106px;
    --seat-upper-side-y: 72px;
    --seat-lower-side-y: 156px;
    --seat-bottom-center-y: 14px;

    --seat-anchor-width: 134px;
    --seat-anchor-height: 174px;
    --seat-label-width: 118px;
    --seat-label-min-height: 66px;
    --seat-holder-width: 84px;
    --seat-holder-height: 84px;
    --seat-chair-width: 74px;
    --seat-chair-height: 26px;
    --seat-chair-bottom: 14px;
    --seat-holder-bottom: 12px;
    --seat-rail-badge-width: 78px;

    --seat-felt-spot-width: 100px;
    --seat-felt-spot-height: 92px;
  }

  .table-center-label {
    margin-bottom: 12px;
    font-size: 0.92rem;
  }

  .community-row {
    grid-template-columns: repeat(5, minmax(40px, 46px));
    gap: 6px;
    margin-bottom: 18px;
  }

  .playing-card {
    width: 46px;
    height: 68px;
    border-radius: 12px;
  }

  .playing-card .card-center {
    font-size: 1.12rem;
  }

  .playing-card .card-corner {
    font-size: 0.62rem;
  }

  .pot-badge {
    min-width: 100px;
    padding: 10px 12px;
  }

  .center-badge {
    min-width: min(216px, 80%);
    padding: 16px 12px;
    border-radius: 28px;
  }

  .center-badge-title {
    font-size: 0.98rem;
  }

  .center-badge-subtitle {
    font-size: 0.82rem;
  }

  .seat-head-label {
    padding: 10px 10px 9px;
    border-radius: 18px;
  }

  .seat-head-name {
    font-size: 0.79rem;
  }

  .seat-head-stack {
    margin-top: 4px;
    font-size: 0.64rem;
  }

  .seat-head-action {
    margin-top: 6px;
    padding: 4px 9px;
    gap: 5px;
    font-size: 0.61rem;
  }

  .seat-head-action::before {
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0 2px rgba(255,217,114,0.14);
  }

  .seat-holder-wrap::before {
    bottom: 22px;
  }

  .seat-holder-wrap::after {
    bottom: 26px;
    height: 14px;
  }

  .seat-chair-base::before,
  .seat-chair-base::after {
    width: 7px;
    height: 15px;
    bottom: -14px;
  }

  .seat-rail-badge {
    padding: 5px 8px;
  }

  .seat-rail-badge-title {
    font-size: 0.64rem;
  }

  .seat-rail-badge-subtitle {
    font-size: 0.56rem;
  }

  .seat-table-spot {
    width: var(--seat-felt-spot-width);
    height: var(--seat-felt-spot-height);
  }

  .seat-name-plaque {
    min-height: 24px;
    max-width: 100px;
    padding: 4px 8px;
  }

  .seat-name-plaque-code {
    font-size: 0.54rem;
  }

  .seat-name-plaque-text {
    font-size: 0.62rem;
  }

  .seat-card-slot,
  .mini-card {
    width: 36px;
    height: 52px;
    border-radius: 10px;
  }

  .mini-card .card-center {
    font-size: 0.92rem;
  }

  .mini-card .card-corner {
    font-size: 0.54rem;
  }

  .seat-table-spot .seat-hole-cards {
    top: 28px;
    gap: 5px;
  }

  .seat-table-spot .seat-bet-spot {
    top: 68px;
  }

  .bet-chip {
    min-width: 38px;
    height: 26px;
    font-size: 0.68rem;
    padding: 0 8px;
  }

  .dealer-puck,
  .blind-puck,
  .seat-role {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 0.52rem;
  }

  .seat-table-spot .seat-marker-row {
    top: -18px;
    gap: 4px;
  }

  .seat-felt-top-center {
    top: 44px;
  }

  .seat-felt-top-left {
    left: 30px;
    top: 108px;
  }

  .seat-felt-top-right {
    right: 30px;
    top: 108px;
  }

  .seat-felt-bottom-left {
    left: 38px;
    bottom: 94px;
  }

  .seat-felt-bottom-right {
    right: 38px;
    bottom: 94px;
  }

  .seat-felt-bottom-center {
    bottom: 34px;
  }

  .beginner-action-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .beginner-action-row button {
    width: 100%;
  }

  .coming-soon-banner {
    right: -70px;
    top: 22px;
    width: 210px;
  }

  .gift-shop-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  :root {
    --table-width: 306px;
    --table-height: 520px;
    --table-radius: 162px;
    --table-border: 12px;

    --floor-width: 560px;
    --floor-height: 632px;
    --floor-radius: 32px;

    --table-stage-extra: 400px;
    --table-stage-top-pad: 132px;
    --table-stage-side-pad: 2px;
    --table-stage-bottom-pad: 158px;

    --table-center-pad-top: 94px;
    --table-center-pad-side: 12px;
    --table-center-pad-bottom: 98px;

    --rail-gap-top: 178px;
    --rail-gap-side: 96px;
    --rail-gap-side-lower: 90px;
    --seat-upper-side-y: 74px;
    --seat-lower-side-y: 142px;
    --seat-bottom-center-y: 12px;

    --seat-anchor-width: 112px;
    --seat-anchor-height: 146px;
    --seat-label-width: 98px;
    --seat-label-min-height: 58px;
    --seat-holder-width: 72px;
    --seat-holder-height: 72px;
    --seat-chair-width: 62px;
    --seat-chair-height: 22px;
    --seat-chair-bottom: 12px;
    --seat-holder-bottom: 10px;
    --seat-rail-badge-width: 70px;

    --seat-felt-spot-width: 88px;
    --seat-felt-spot-height: 84px;
  }

  .community-row {
    grid-template-columns: repeat(5, minmax(34px, 40px));
    gap: 5px;
  }

  .playing-card {
    width: 40px;
    height: 60px;
  }

  .playing-card .card-center {
    font-size: 1rem;
  }

  .playing-card .card-corner {
    font-size: 0.56rem;
  }

  .center-badge {
    min-width: min(192px, 82%);
    padding: 14px 10px;
  }

  .center-badge-title {
    font-size: 0.9rem;
  }

  .center-badge-subtitle {
    font-size: 0.76rem;
  }

  .seat-head-label {
    padding: 8px 8px 7px;
    border-radius: 14px;
  }

  .seat-head-name {
    font-size: 0.68rem;
  }

  .seat-head-stack {
    font-size: 0.54rem;
  }

  .seat-head-action {
    margin-top: 6px;
    padding: 4px 8px;
    gap: 4px;
    font-size: 0.54rem;
  }

  .seat-head-action::before {
    width: 5px;
    height: 5px;
    box-shadow: 0 0 0 2px rgba(255,217,114,0.14);
  }

  .seat-holder-wrap::before {
    bottom: 18px;
  }

  .seat-holder-wrap::after {
    bottom: 22px;
    height: 12px;
  }

  .seat-chair-base::before,
  .seat-chair-base::after {
    width: 6px;
    height: 13px;
    bottom: -12px;
  }

  .seat-rail-badge-title {
    font-size: 0.58rem;
  }

  .seat-rail-badge-subtitle {
    font-size: 0.52rem;
  }

  .seat-name-plaque {
    max-width: 88px;
    padding: 4px 7px;
  }

  .seat-name-plaque-code {
    font-size: 0.48rem;
  }

  .seat-name-plaque-text {
    font-size: 0.56rem;
  }

  .seat-card-slot,
  .mini-card {
    width: 32px;
    height: 46px;
    border-radius: 9px;
  }

  .mini-card .card-center {
    font-size: 0.84rem;
  }

  .mini-card .card-corner {
    font-size: 0.48rem;
  }

  .seat-table-spot .seat-hole-cards {
    top: 24px;
  }

  .seat-table-spot .seat-bet-spot {
    top: 60px;
  }

  .bet-chip {
    min-width: 34px;
    height: 24px;
    font-size: 0.62rem;
  }

  .dealer-puck,
  .blind-puck,
  .seat-role {
    min-width: 20px;
    height: 20px;
    font-size: 0.48rem;
  }

  .seat-table-spot .seat-marker-row {
    top: -16px;
  }

  .seat-felt-top-center {
    top: 40px;
  }

  .seat-felt-top-left {
    left: 22px;
    top: 102px;
  }

  .seat-felt-top-right {
    right: 22px;
    top: 102px;
  }

  .seat-felt-bottom-left {
    left: 28px;
    bottom: 88px;
  }

  .seat-felt-bottom-right {
    right: 28px;
    bottom: 88px;
  }

  .seat-felt-bottom-center {
    bottom: 30px;
  }
}