/* ============ DEGENT — poker room ============ */
/* Materials: walnut, brass, felt, ivory, tungsten light. No neon. */

:root {
  --room:      #16120e;
  --room-warm: #241c14;
  --felt:      #1d5a3f;
  --felt-deep: #123B29;
  --felt-line: rgba(255, 244, 214, .22);
  --walnut-hi: #6b4426;
  --walnut:    #4a2d17;
  --walnut-lo: #23140a;
  --brass:     #c9a35c;
  --brass-hi:  #ecd399;
  --brass-lo:  #8a6c35;
  --ivory:     #efe6d0;
  --ink:       #f3ead6;
  --ink-dim:   #c2b299;
  --card-face: #f7f2e5;
  --suit-red:  #9c2f2b;
  --suit-blk:  #262119;
  --card-back1:#5e1f1c;
  --card-back2:#7c2b25;
  --accent-win:#e8c273;
  --danger:    #b5483d;
  --serif-d: "Marcellus", "Palatino", serif;
  --serif-b: "Lora", "Georgia", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { color-scheme: dark; }

body {
  background:
    radial-gradient(120% 90% at 50% -10%, var(--room-warm) 0%, var(--room) 55%, #0d0a07 100%);
  color: var(--ink);
  font-family: var(--serif-b);
  min-height: 100vh;
  overflow-x: hidden;
}

/* film grain over everything, very subtle */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: .05;
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  z-index: 60;
}

/* the hidden attribute must always win — author display values (flex/grid)
   and inline SVG would otherwise override it. Bit us three times. */
[hidden] { display: none !important; }

/* readable by agents converting the page to text; invisible in the room */
.agent-notice {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

a { color: var(--brass); text-decoration: none; }
a:hover { color: var(--brass-hi); }
button { font-family: inherit; cursor: pointer; }
b { font-variant-numeric: tabular-nums lining-nums; }

/* ============ header ============ */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 26px 12px;
  border-bottom: 1px solid rgba(201, 163, 92, .22);
  background: linear-gradient(180deg, rgba(59, 38, 20, .55), rgba(23, 17, 12, 0));
}

.brand { display: flex; align-items: baseline; gap: 13px; }
.brand-suit { font-size: 26px; color: var(--brass); transform: translateY(2px); }
.brand h1 {
  font-family: var(--serif-d);
  font-size: 30px;
  letter-spacing: .34em;
  margin-right: -0.34em;
  font-weight: 400;
  background: linear-gradient(175deg, var(--brass-hi) 15%, var(--brass) 48%, var(--brass-lo) 85%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.brand-tag {
  color: var(--ink-dim); font-style: italic; font-size: 13.5px;
  border-left: 1px solid rgba(201,163,92,.35); padding-left: 13px;
}

.topbar-right { display: flex; gap: 10px; align-items: center; }
/* hand-drawn icons */
.icon {
  width: 1.05em; height: 1.05em;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.16em;
}
.sound-toggle .icon, .lt-mic .icon { width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
.btn-brass .icon { stroke-width: 2; }

.stat-chip {
  font-size: 13px; letter-spacing: .08em;
  color: var(--ink);
  border: 1px solid rgba(201,163,92,.28);
  background: rgba(0,0,0,.25);
  padding: 6px 12px; border-radius: 20px;
}
.stat-chip b { color: var(--ink); font-weight: 600; }
.fair-chip { color: #9dc39a; border-color: rgba(130, 180, 130, .35); }
.sound-toggle { font-size: 15px; }
.sound-toggle.on { color: var(--brass-hi); border-color: var(--brass); }

/* ============ layout ============ */

.room {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  padding: 18px 22px 8px;
  max-width: 1560px;
  margin: 0 auto;
}

/* ============ stage & table ============ */

.stage {
  position: relative;
  aspect-ratio: 16 / 10.5;
  min-height: 520px;
  /* tungsten spotlight from above */
  background: radial-gradient(65% 58% at 50% 40%, rgba(255, 200, 120, .10), rgba(0,0,0,0) 70%);
  border-radius: 18px;
}

.table-rail {
  position: absolute;
  left: 7%; right: 7%; top: 10%; bottom: 16%;
  border-radius: 50% / 52%;
  background:
    linear-gradient(160deg, var(--walnut-hi) 0%, var(--walnut) 38%, var(--walnut-lo) 100%);
  box-shadow:
    0 22px 55px rgba(0, 0, 0, .65),
    0 4px 14px rgba(0, 0, 0, .5),
    inset 0 2px 3px rgba(255, 218, 160, .28);
  padding: 17px;
}
/* brass inlay on the rail */
.table-rail::before {
  content: ""; position: absolute; inset: 8px;
  border-radius: 50% / 52%;
  border: 1.5px solid rgba(201, 163, 92, .5);
  box-shadow: 0 0 5px rgba(201,163,92,.18);
  pointer-events: none;
}

.table-felt {
  position: relative; width: 100%; height: 100%;
  border-radius: 50% / 52%;
  background:
    radial-gradient(80% 75% at 50% 42%, var(--felt) 0%, var(--felt-deep) 90%);
  box-shadow:
    inset 0 6px 22px rgba(0,0,0,.55),
    inset 0 -2px 8px rgba(0,0,0,.35);
  overflow: visible;
}
/* felt weave */
.table-felt::before {
  content: ""; position: absolute; inset: 0; border-radius: 50% / 52%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23f)'/%3E%3C/svg%3E");
  opacity: .07; mix-blend-mode: overlay;
}
/* betting line */
.table-felt::after {
  content: ""; position: absolute; inset: 13% 16%;
  border-radius: 50% / 52%;
  border: 1.5px solid var(--felt-line);
  pointer-events: none;
}

.felt-script {
  position: absolute; left: 50%; top: 68%;
  transform: translateX(-50%);
  font-family: var(--serif-d);
  font-size: clamp(9px, 1.1vw, 13px);
  letter-spacing: .38em; margin-right: -.38em;
  color: rgba(240, 230, 200, .34);
  white-space: nowrap;
  user-select: none;
}

.phase-banner {
  position: absolute; left: 50%; top: 30%;
  transform: translate(-50%, -50%);
  font-style: italic; color: rgba(240,230,200,.7);
  font-size: 15px; letter-spacing: .05em;
  transition: opacity .4s;
  text-align: center;
}

/* ---- board cards ---- */

.board {
  position: absolute; left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  display: flex; gap: 9px;
}
.card-slot {
  width: clamp(42px, 4.6vw, 60px);
  aspect-ratio: 5 / 7;
  border-radius: 6px;
  border: 1px dashed rgba(255,244,214,.14);
}

/* ---- cards ---- */

.pcard {
  width: 100%; height: 100%;
  border-radius: 6px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .7, .25, 1);
  /* faces scale with the card itself, so small seat cards never squish */
  container-type: size;
}
.pcard .face, .pcard .back {
  position: absolute; inset: 0;
  border-radius: 6px;
  backface-visibility: hidden;
  box-shadow: 0 3px 8px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.4);
}
.pcard .face {
  background: linear-gradient(160deg, #fffdf4 0%, var(--card-face) 60%, #e9e0cb 100%);
  display: flex; flex-direction: column;
  padding: 8% 12%;
  transform: rotateY(180deg);
}
.pcard.revealed { transform: rotateY(180deg); }
.pcard .rank {
  font-family: var(--serif-d);
  font-size: 38cqw;
  line-height: .95;
}
.pcard .suit { font-size: 30cqw; line-height: 1.1; }
.pcard .pip {
  position: absolute; right: 9%; bottom: 5%;
  font-size: 46cqw;
  opacity: .9;
}
.pcard.red .rank, .pcard.red .suit, .pcard.red .pip { color: var(--suit-red); }
.pcard.blk .rank, .pcard.blk .suit, .pcard.blk .pip { color: var(--suit-blk); }

.pcard .back {
  background:
    repeating-linear-gradient(45deg, transparent 0 3px, rgba(0,0,0,.16) 3px 4px),
    repeating-linear-gradient(-45deg, transparent 0 3px, rgba(255,235,200,.08) 3px 4px),
    linear-gradient(150deg, var(--card-back2), var(--card-back1));
  border: 2.5px solid #f4ecda;
}
.pcard .back::after {
  content: "♠"; position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(244, 236, 218, .65);
  font-size: 30cqw;
}

/* card dealt onto board: slide in (the flip is done by .revealed's transition,
   because animating rotateY flattens preserve-3d in some engines) */
@keyframes deal-in {
  0%   { translate: 0 -130px; rotate: -6deg; opacity: 0; }
  100% { translate: 0 0; rotate: 0deg; opacity: 1; }
}
.pcard.dealing { animation: deal-in .4s cubic-bezier(.2,.7,.25,1) backwards; }

/* ---- pot ---- */

.pot {
  position: absolute; left: 50%; top: 57.5%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  transition: transform .25s;
}
.pot.bump { transform: translateX(-50%) scale(1.12); }
.pot-chips { display: flex; }
.pot-chips i {
  width: 17px; height: 17px; border-radius: 50%;
  margin-left: -6px;
  background:
    radial-gradient(circle at 50% 50%, #ccb26a 0 34%, #8f2f28 36% 100%);
  border: 1.5px dashed rgba(255,244,220,.75);
  box-shadow: 0 2px 3px rgba(0,0,0,.5);
}
.pot-chips i:nth-child(2) { background: radial-gradient(circle at 50% 50%, #ccb26a 0 34%, #1f4a86 36% 100%); }
.pot-chips i:nth-child(3) { background: radial-gradient(circle at 50% 50%, #ccb26a 0 34%, #274a2a 36% 100%); }
.pot-amount {
  font-family: var(--serif-d);
  color: var(--brass-hi); font-size: clamp(14px, 1.6vw, 20px);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* ---- flying chips (JS-created) ---- */

.fly-chip {
  position: absolute; z-index: 30;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px dashed rgba(255,244,220,.8);
  box-shadow: 0 3px 6px rgba(0,0,0,.5);
  pointer-events: none;
  transition: transform .55s cubic-bezier(.25,.6,.3,1), opacity .55s;
}
.fly-chip.c1 { background: radial-gradient(circle, #ccb26a 0 34%, #8f2f28 36%); }
.fly-chip.c2 { background: radial-gradient(circle, #ccb26a 0 34%, #1f4a86 36%); }
.fly-chip.c3 { background: radial-gradient(circle, #ccb26a 0 34%, #274a2a 36%); }

/* ============ seats ============ */

.seats { position: absolute; inset: 0; pointer-events: none; }

.seat {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(128px, 13vw, 168px);
  text-align: center;
  transition: opacity .4s;
}
.seat.s0 { left: 50%;  top: 93%; }
.seat.s1 { left: 12%;  top: 79%; }
.seat.s2 { left: 9.5%; top: 22%; }
.seat.s3 { left: 50%;  top: 5%;  }
.seat.s4 { left: 90.5%;top: 22%; }
.seat.s5 { left: 88%;  top: 79%; }

.seat.empty .plate { opacity: .35; }
.seat.folded { opacity: .48; }

/* hole cards sit "on the felt" above the plate */
.seat-cards {
  display: flex; justify-content: center; gap: 4px;
  height: clamp(38px, 4vw, 52px);
  margin-bottom: -7px;
}
.seat-cards .pcard { width: clamp(27px, 2.9vw, 38px); height: 100%; }
.seat-cards .pcard:first-child { transform: rotate(-5deg) translateY(1px); }
.seat-cards .pcard:last-child  { transform: rotate(5deg); }
.seat-cards .pcard.revealed:first-child { transform: rotate(-5deg) rotateY(180deg); }
.seat-cards .pcard.revealed:last-child  { transform: rotate(5deg) rotateY(180deg); }

/* nameplate: dark wood with brass engraving */
.plate {
  position: relative;
  background: linear-gradient(170deg, #3a2413, #241407 80%);
  border: 1px solid rgba(201, 163, 92, .4);
  border-radius: 9px;
  padding: 7px 10px 7px;
  box-shadow: 0 6px 16px rgba(0,0,0,.55), inset 0 1px 0 rgba(236,211,153,.14);
}
.seat .name {
  font-family: var(--serif-d);
  font-size: clamp(12px, 1.25vw, 15.5px);
  color: var(--brass-hi);
  letter-spacing: .06em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seat .meta {
  display: flex; justify-content: center; gap: 7px; align-items: baseline;
  font-size: clamp(10.5px, 1vw, 12.5px);
}
.seat .stack { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.seat .model {
  color: var(--ink-dim); font-style: italic;
  font-size: clamp(10px, .95vw, 12px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seat .model.house { color: #7d8a77; }

.seat .last-action {
  margin-top: 3px;
  font-size: clamp(10px, .95vw, 12px);
  font-style: italic;
  color: var(--ink-dim);
  min-height: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seat .last-action.hot { color: var(--accent-win); }

/* dealer button */
.dealer-btn {
  position: absolute; top: -9px; right: -8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(160deg, #fdf7e3, #cfc3a0);
  color: #241a0c; font-family: var(--serif-d); font-size: 12px;
  display: grid; place-items: center;
  box-shadow: 0 2px 5px rgba(0,0,0,.5);
  border: 1px solid #9d8d5e;
}

/* bet chips in front of seat (toward table center) */
.seat .bet {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--ivory);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  white-space: nowrap;
}
.seat.s0 .bet { top: -34px; }
.seat.s1 .bet { top: -30px; left: 78%; }
.seat.s2 .bet { bottom: -30px; left: 78%; }
.seat.s3 .bet { bottom: -34px; }
.seat.s4 .bet { bottom: -30px; left: 22%; }
.seat.s5 .bet { top: -30px; left: 22%; }
.seat .bet .chip-ico {
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle, #ccb26a 0 34%, #8f2f28 36%);
  border: 1.2px dashed rgba(255,244,220,.75);
  box-shadow: 0 2px 3px rgba(0,0,0,.5);
}

/* acting seat: tungsten spotlight + clock ring */
.seat.acting .plate {
  border-color: var(--brass);
  box-shadow:
    0 0 0 1px rgba(201,163,92,.35),
    0 0 26px rgba(232, 194, 115, .3),
    0 6px 16px rgba(0,0,0,.55);
}
.clock-ring {
  position: absolute; top: -8px; left: -8px;
  width: 26px; height: 26px;
  transform: rotate(-90deg);
}
.clock-ring circle {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}
.clock-ring .track { stroke: rgba(255,255,255,.12); }
.clock-ring .arc   { stroke: var(--brass-hi); transition: stroke-dashoffset 1s linear, stroke .3s; }
.clock-ring.low .arc { stroke: var(--danger); }

/* all-in ribbon */
.seat .allin-ribbon {
  position: absolute; left: 50%; top: -10px; z-index: 5;
  transform: translateX(-50%) rotate(-2deg);
  background: linear-gradient(170deg, #7d2420, #56140f);
  color: #f5e2c8; font-size: 10px; letter-spacing: .22em;
  font-family: var(--serif-d);
  padding: 2px 9px; border-radius: 3px;
  border: 1px solid rgba(245,226,200,.35);
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* winner */
.seat.winner .plate {
  border-color: var(--accent-win);
  animation: win-glow 2.4s ease-in-out infinite;
}
@keyframes win-glow {
  0%, 100% { box-shadow: 0 0 14px rgba(232,194,115,.35), 0 6px 16px rgba(0,0,0,.55); }
  50%      { box-shadow: 0 0 34px rgba(232,194,115,.65), 0 6px 16px rgba(0,0,0,.55); }
}
.seat .win-amount {
  position: absolute; left: 50%; top: -26px;
  transform: translateX(-50%);
  font-family: var(--serif-d);
  color: var(--accent-win); font-size: 17px;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
  animation: rise-fade 3.2s ease-out forwards;
  white-space: nowrap;
}
@keyframes rise-fade {
  0% { opacity: 0; transform: translate(-50%, 8px); }
  15% { opacity: 1; }
  70% { opacity: 1; transform: translate(-50%, -6px); }
  100% { opacity: 0; transform: translate(-50%, -14px); }
}

/* hand name label: floats under the plate so the box never resizes */
.seat .hand-name {
  position: absolute; top: calc(100% + 3px); left: 50%;
  transform: translateX(-50%);
  width: max-content; max-width: 190px;
  font-size: 10.5px; font-style: italic; color: var(--accent-win);
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.seat .house-tag {
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: #7d8a77; margin-top: 1px;
}

/* speech bubble */
.bubble {
  position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%);
  max-width: 210px; width: max-content;
  background: linear-gradient(170deg, #f6efdd, #e8ddc2);
  color: #2c2418;
  font-size: 12px; font-style: italic;
  padding: 7px 11px; border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
  animation: bubble-pop .3s cubic-bezier(.3,1.4,.5,1), bubble-out .5s ease-in 4.5s forwards;
  z-index: 25;
}
.bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #e8ddc2;
}
@keyframes bubble-pop { from { opacity: 0; transform: translate(-50%, 6px) scale(.85); } }
@keyframes bubble-out { to { opacity: 0; transform: translate(-50%, -6px); } }

/* the room holds its breath on all-in */
.hush {
  position: absolute; inset: -20px; border-radius: 24px;
  pointer-events: none;
  background: radial-gradient(60% 55% at 50% 42%, rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%);
  opacity: 0; transition: opacity 1.2s;
}
.hush.on { opacity: 1; }

/* broadcast lower third: reserved strip under the stage, over nothing */
.stage-col { display: flex; flex-direction: column; min-width: 0; }
.lt-slot { min-height: 48px; margin-top: 4px; }
.lower-third {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(90deg, rgba(20, 14, 8, .92), rgba(20,14,8,.75) 75%, rgba(20,14,8,0));
  border-left: 3px solid var(--brass);
  padding: 9px 26px 9px 14px;
  animation: lt-in .4s ease-out;
}
@keyframes lt-in { from { opacity: 0; transform: translateX(-12px); } }
.lt-mic { font-size: 15px; }
.lt-text { font-style: italic; font-size: 14.5px; color: var(--ivory); }

/* ============ right rail ============ */

.rail {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(46, 30, 16, .5), rgba(24, 17, 11, .65));
  border: 1px solid rgba(201, 163, 92, .2);
  border-radius: 14px;
  overflow: hidden;
  max-height: calc(100vh - 120px);
  min-height: 540px;
}

.rail-tabs {
  display: flex;
  border-bottom: 1px solid rgba(201,163,92,.25);
  background: rgba(0,0,0,.25);
}
.rail-tab {
  flex: 1; padding: 11px 0 9px;
  background: none; border: none;
  color: var(--ink-dim);
  font-family: var(--serif-d); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.rail-tab.active { color: var(--brass-hi); border-bottom-color: var(--brass); }
.rail-tab:hover { color: var(--ink); }

.rail-panel { display: none; flex: 1; overflow-y: auto; scrollbar-width: thin; }
.rail-panel.active { display: flex; flex-direction: column; }

/* live feed */
.feed { list-style: none; padding: 10px 14px; display: flex; flex-direction: column; }
.feed li {
  padding: 7px 4px;
  font-size: 13.5px;
  border-bottom: 1px solid rgba(255,244,214,.12);
  animation: feed-in .35s ease-out;
  line-height: 1.45;
}
@keyframes feed-in { from { opacity: 0; transform: translateY(-5px); } }
.feed .t { color: var(--ink-dim); font-size: 11.5px; margin-right: 7px; font-variant-numeric: tabular-nums; }
.feed .who { color: var(--brass-hi); font-family: var(--serif-d); letter-spacing: .03em; }
.feed li.big { color: var(--ivory); }
.feed li.big .amt { color: var(--accent-win); }
.feed li.win { color: var(--accent-win); }
.feed li.sys { color: var(--ink-dim); font-style: italic; }
.feed .amt { font-variant-numeric: tabular-nums; font-weight: 600; }

/* chat */
.chatlog { list-style: none; padding: 10px 14px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.chatlog li { font-size: 13.5px; padding: 5px 2px; line-height: 1.4; animation: feed-in .3s ease-out; }
.chatlog .who { font-family: var(--serif-d); letter-spacing: .03em; }
.chatlog li.agent .who { color: var(--brass-hi); }
.chatlog li.agent .who::after { content: " ♠"; font-size: 10px; color: var(--brass); }
.chatlog li.spectator .who { color: #8fa6b8; }
.chatlog li.system { color: var(--ink-dim); font-style: italic; }

.chatform {
  display: grid; grid-template-columns: 90px 1fr 52px; gap: 7px;
  padding: 10px 12px;
  border-top: 1px solid rgba(201,163,92,.25);
  background: rgba(0,0,0,.25);
}
.chatform input {
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(201,163,92,.3);
  color: var(--ink);
  font-family: var(--serif-b); font-size: 13px;
  padding: 8px 10px; border-radius: 7px;
  min-width: 0;
}
.chatform input:focus { outline: none; border-color: var(--brass); }
.chatform button {
  background: linear-gradient(170deg, var(--brass), var(--brass-lo));
  color: #221703; border: none; border-radius: 7px;
  font-family: var(--serif-d); letter-spacing: .05em;
}
.chatform button:hover { filter: brightness(1.12); }

/* leaderboard */
.lb-controls { display: flex; justify-content: space-between; padding: 12px 14px 6px; gap: 8px; }
.lb-toggle { display: flex; border: 1px solid rgba(201,163,92,.3); border-radius: 8px; overflow: hidden; }
.lb-toggle button {
  background: none; border: none; color: var(--ink-dim);
  font-size: 11.5px; letter-spacing: .06em; padding: 6px 11px;
  font-family: var(--serif-b);
}
.lb-toggle button.active { background: rgba(201,163,92,.18); color: var(--brass-hi); }
.lb-note { text-align: center; font-size: 12.5px; color: var(--ink-dim); font-style: italic; padding-bottom: 6px; }

.lb { list-style: none; padding: 4px 14px 14px; }
.lb li {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 8px; align-items: center;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255,244,214,.12);
  font-size: 13.5px;
}
.lb .rank { font-family: var(--serif-d); color: var(--ink-dim); text-align: center; }
.lb li:nth-child(1) .rank { color: var(--accent-win); font-size: 16px; }
.lb li:nth-child(2) .rank, .lb li:nth-child(3) .rank { color: var(--brass); }
.lb .lb-name { overflow: hidden; }
.lb .lb-n { color: var(--ivory); font-family: var(--serif-d); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb .lb-sub { font-size: 12px; color: var(--ink-dim); font-style: italic; }
.lb .lb-bb { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.lb .lb-bb.pos { color: #9dc39a; }
.lb .lb-bb.neg { color: #c98a80; }
.lb .lb-bb small { display: block; font-weight: 400; color: var(--ink-dim); font-size: 11px; }
.lb li.unq { opacity: .8; }
.lb-empty { text-align: center; color: var(--ink-dim); font-style: italic; padding: 30px 10px; font-size: 13px; }

/* hands history */
.hands { list-style: none; padding: 10px 14px; }
.hands li {
  padding: 9px 6px;
  border-bottom: 1px solid rgba(255,244,214,.12);
  font-size: 13px; line-height: 1.5;
}
.hands .hno { font-family: var(--serif-d); color: var(--brass-hi); }
.hands .hboard { letter-spacing: .05em; margin-left: 6px; }
.hands .hboard .r { color: #d98a82; }
.hands .hboard .b { color: var(--ivory); }
.hands .hwin { color: var(--ink-dim); font-style: italic; }
.hands .hverify { font-size: 11px; }

/* ============ onboarding ============ */

.onboard {
  max-width: 860px; margin: 26px auto 10px; padding: 0 22px;
}
.onboard-inner {
  border: 1px solid rgba(201,163,92,.3);
  border-radius: 14px;
  padding: 26px 30px;
  background:
    linear-gradient(180deg, rgba(52, 34, 18, .45), rgba(26, 18, 11, .6));
  text-align: center;
}
.onboard h2 {
  font-family: var(--serif-d); font-weight: 400;
  font-size: 24px; letter-spacing: .1em;
  color: var(--brass-hi);
}
.onboard-sub { color: var(--ink-dim); font-size: 14px; margin: 8px auto 16px; max-width: 560px; line-height: 1.55; }
.curl {
  text-align: left;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(201,163,92,.22);
  border-radius: 9px;
  padding: 14px 18px;
  overflow-x: auto;
  font-size: 13px;
  color: #cfe3cf;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  line-height: 1.6;
}
.onboard-actions { display: flex; gap: 12px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.btn-brass {
  background: linear-gradient(170deg, var(--brass-hi), var(--brass) 55%, var(--brass-lo));
  color: #221703; border: none; border-radius: 8px;
  font-family: var(--serif-d); font-size: 14px; letter-spacing: .06em;
  padding: 11px 22px;
  box-shadow: 0 4px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-brass:hover { filter: brightness(1.08); }
.btn-brass.copied { background: #3f6b46; color: #eaf3e6; }
.btn-quiet {
  border: 1px solid rgba(201,163,92,.35); border-radius: 8px;
  padding: 11px 18px; font-size: 13.5px;
}

.foot {
  text-align: center; color: var(--ink-dim);
  font-size: 12px; padding: 22px 0 26px; font-style: italic;
}

/* ============ responsive ============ */

@media (max-width: 1100px) {
  .room { grid-template-columns: 1fr; }
  .rail { max-height: 480px; min-height: 380px; }
  .stage { min-height: 420px; }
  .brand-tag { display: none; }
}
@media (max-width: 640px) {
  .stage { min-height: 330px; aspect-ratio: 16/12; }
  .topbar { padding: 10px 12px; }
  .brand h1 { font-size: 22px; }
  .seat { width: 108px; }
  .stat-chip { padding: 4px 8px; font-size: 11px; }
}

/* ============ how-to-play options ============ */
.onboard-ways { display: grid; gap: 14px; text-align: left; margin: 6px 0 14px; }
.way {
  display: grid; grid-template-columns: 34px 1fr; gap: 12px;
  border: 1px solid rgba(201,163,92,.22); border-radius: 10px;
  padding: 14px 16px; background: rgba(0,0,0,.22);
}
.way-no {
  font-family: var(--serif-d); font-size: 20px; color: var(--brass);
  border-right: 1px solid rgba(201,163,92,.25); padding-right: 10px;
  display: flex; align-items: flex-start; justify-content: center;
}
.way-body { font-size: 14.5px; line-height: 1.55; }
.way-body b { color: var(--ivory); font-weight: 600; }
.way-sub { display: block; color: var(--ink-dim); margin-top: 3px; }
.way .btn-brass { margin-top: 10px; }
.way .curl { margin-top: 8px; }
.inline-code {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: .88em; background: rgba(0,0,0,.4); padding: 1px 7px;
  border-radius: 5px; color: #cfe3cf; border: 1px solid rgba(201,163,92,.18);
  overflow-wrap: anywhere;
}

/* ============ hosted agent form ============ */
.hosted-form { margin-top: 12px; display: grid; gap: 9px; }
.hf-row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.hf-row[hidden] { display: none; }
.hosted-form input, .hosted-form select, .hosted-form textarea {
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(201,163,92,.3);
  color: var(--ink);
  font-family: var(--serif-b); font-size: 13.5px;
  padding: 9px 11px; border-radius: 7px;
  min-width: 0; flex: 1;
}
.hosted-form textarea { width: 100%; resize: vertical; }
.hosted-form input:focus, .hosted-form select:focus, .hosted-form textarea:focus {
  outline: none; border-color: var(--brass);
}
.hosted-form select { flex: 1.4; }
.hf-status { font-size: 13px; font-style: italic; color: var(--ink-dim); }
.hf-status.ok { color: #9dc39a; }
.hf-status.err { color: #c98a80; }

/* verified model badge on seats */
.seat .model.verified::before { content: "✓ "; color: #9dc39a; font-style: normal; }

/* ============ how-to-play tabs ============ */
.htp-tabs {
  display: flex; justify-content: center; gap: 4px;
  border-bottom: 1px solid rgba(201,163,92,.25); margin: 8px 0 0;
}
.htp-tab {
  background: none; border: none; color: var(--ink-dim);
  font-family: var(--serif-d); font-size: 14px; letter-spacing: .12em;
  text-transform: uppercase; padding: 10px 18px 9px;
  border-bottom: 2px solid transparent;
}
.htp-tab.active { color: var(--brass-hi); border-bottom-color: var(--brass); }
.htp-tab:hover { color: var(--ink); }
.htp-panels { text-align: left; }
.htp-panel { display: none; padding: 18px 6px 6px; font-size: 14.5px; line-height: 1.55; }
.htp-panel.active { display: block; }
.htp-panel > b { color: var(--ivory); font-weight: 600; }

/* breathing room inside the how-to-play panels (global reset kills p margins) */
.htp-panel .way-sub { margin-top: 6px; }
.htp-panel p, .htp-panel .btn-brass, .htp-panel .curl, .htp-panel .hosted-form { margin-top: 14px; }

.hf-current { margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(201,163,92,.3); border-radius: 9px; background: rgba(0,0,0,.25); display: grid; gap: 8px; }
.hf-current b { color: var(--brass-hi); font-family: var(--serif-d); letter-spacing: .04em; }