:root {
  --ink: #fef8e8;
  --muted: #bbaeb8;
  --gold: #ffd66c;
  --gold-deep: #c88222;
  --rose: #ff2868;
  --rose-dark: #8c123e;
  --felt: #00674e;
  --felt-dark: #003f36;
  --panel: rgba(26, 5, 24, .78);
  --line: rgba(255, 223, 147, .25);
  font-family: "Space Grotesk", system-ui, sans-serif;
  color: var(--ink);
  background: #0c0611;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: #0b0610;
}

button { font: inherit; }

.casino-background {
  position: fixed;
  z-index: 0;
  inset: 0;
  /* Stretch the approved casino scene through the full vertical play screen. */
  background: url("assets/romantic-casino-winner.png") center center / 100% 100% no-repeat;
  transform: scale(1.02);
}

.vignette {
  position: fixed;
  z-index: 1;
  inset: 0;
  background: radial-gradient(ellipse at 50% 43%, transparent 12%, rgba(8, 1, 12, .35) 62%, rgba(4, 0, 7, .88) 100%);
  pointer-events: none;
}

.spark-field {
  position: fixed;
  z-index: 2;
  inset: 0;
  opacity: .52;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff2bd 0 1px, transparent 1.5px), radial-gradient(circle, #ff4b8a 0 1px, transparent 1.5px), radial-gradient(circle, #ffe080 0 1px, transparent 1.5px);
  background-size: 155px 170px, 203px 235px, 309px 281px;
  background-position: 5px 23px, 86px 97px, 147px 54px;
  animation: twinkle 7s linear infinite;
}

.game-shell { position: relative; z-index: 3; width: min(1500px, calc(100% - 40px)); min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; padding: 22px 0 14px; }

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 0 8px; }
.brand-lockup { display: flex; gap: 11px; align-items: center; text-shadow: 0 3px 18px #000; }
.brand-suit { color: var(--rose); font-size: 39px; line-height: 1; filter: drop-shadow(0 0 10px #ff2868); }
.eyebrow, .mini-label { margin: 0; color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .19em; }
h1 { margin: -2px 0 0; font-family: "Bebas Neue", Impact, sans-serif; font-size: 37px; letter-spacing: .055em; line-height: .95; }
.topbar-stats { display: flex; align-items: center; gap: 20px; }
.jackpot { color: #e8dce2; font-size: 11px; letter-spacing: .1em; font-weight: 700; }
.jackpot b { color: var(--gold); }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #48ed9d; box-shadow: 0 0 8px #48ed9d; animation: blink 1.3s ease-in-out infinite; }
.bankroll { min-width: 125px; padding: 7px 14px 8px; text-align: right; background: linear-gradient(135deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 235, 172, .38); border-radius: 7px; box-shadow: 0 8px 22px rgba(0, 0, 0, .28); }
.bankroll span { display: block; color: var(--gold); font-size: 9px; letter-spacing: .14em; font-weight: bold; }
.bankroll strong { display: block; margin-top: -2px; font-family: "Bebas Neue", Impact, sans-serif; font-size: 27px; letter-spacing: .06em; color: #fff4c9; }

/* Shared five-screen arcade navigation — mirrors the peer-page flow of ThaiChess. */
.site-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin: 16px 8px 0; }
.nav-link { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 47px; padding: 6px 10px; color: rgba(255, 246, 222, .72); text-decoration: none; border: 1px solid rgba(255, 223, 147, .24); border-radius: 7px; background: linear-gradient(125deg, rgba(46, 5, 35, .73), rgba(8, 8, 24, .52)); box-shadow: inset 0 1px rgba(255, 255, 255, .06); backdrop-filter: blur(7px); transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.nav-link:hover { transform: translateY(-2px); color: #fff7db; border-color: rgba(255, 213, 108, .75); background: linear-gradient(125deg, rgba(105, 13, 67, .88), rgba(28, 10, 43, .78)); }
.nav-link[aria-current="page"] { color: #2d0c1b; border-color: #ffe08b; background: linear-gradient(135deg, #ffe284, #f0a73e); box-shadow: 0 4px 16px rgba(255, 180, 46, .22), inset 0 1px rgba(255, 255, 255, .78); }
.nav-icon { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; line-height: 1; }
.nav-link > span:last-child { display: grid; gap: 1px; }
.nav-link b { font-size: 10px; letter-spacing: .11em; }
.nav-link small { opacity: .7; font-size: 7px; font-weight: 700; letter-spacing: .1em; }
.brand-link { color: inherit; text-decoration: none; }
.brand-lockup > span:last-child { display: grid; gap: 2px; }
.brand-lockup strong { font-family: "Bebas Neue", Impact, sans-serif; font-size: 30px; letter-spacing: .055em; line-height: .95; }

.quick-start { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(840px, 94%); margin: 17px auto -5px; padding: 13px 16px 13px 19px; border: 1px solid rgba(255, 223, 139, .46); border-radius: 10px; background: linear-gradient(100deg, rgba(48, 4, 35, .93), rgba(15, 9, 28, .88)); box-shadow: 0 14px 28px rgba(0, 0, 0, .28), inset 0 1px rgba(255,255,255,.14); backdrop-filter: blur(10px); }
.quick-start[hidden] { display: none; }
.quick-start h2 { margin: 2px 0 0; color: #fff3d6; font-family: "Bebas Neue", Impact, sans-serif; font-size: 29px; font-weight: 400; letter-spacing: .08em; line-height: .9; }
.quick-start-copy > p:last-child { margin: 4px 0 0; color: #dccbd0; font-size: 10px; }
.quick-start-actions { display: flex; gap: 7px; }
.quick-play-button, .quick-room-button { min-width: 129px; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 7px; padding: 8px 10px; color: #2e091a; border: 1px solid #fff0b4; border-radius: 6px; background: linear-gradient(135deg, #ffe280, #f5a640); box-shadow: inset 0 1px rgba(255,255,255,.7), 0 5px 15px rgba(238, 155, 39, .2); cursor: pointer; font: 800 10px "Space Grotesk", sans-serif; letter-spacing: .09em; text-decoration: none; transition: transform .15s ease, filter .15s ease; }
.quick-room-button { color: #fff6e9; border-color: #ffadbf; background: linear-gradient(135deg, #ff4177, #a80e4a); box-shadow: inset 0 1px rgba(255,255,255,.34), 0 5px 15px rgba(241, 37, 95, .24); }
.quick-play-button:hover, .quick-room-button:hover { transform: translateY(-2px); filter: brightness(1.12); }
.quick-play-button b, .quick-room-button b { grid-row: span 2; font-size: 19px; line-height: .6; }
.quick-play-button small, .quick-room-button small { margin-top: 1px; font-size: 7px; letter-spacing: .07em; opacity: .68; }

/* Multiplayer companion pages. */
.page-shell { position: relative; z-index: 3; width: min(1180px, calc(100% - 40px)); min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; padding: 22px 0 14px; }
.page-hero { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin: 23px 8px 16px; padding: 22px 25px; border: 1px solid rgba(255, 226, 153, .24); border-radius: 11px; background: linear-gradient(102deg, rgba(40, 6, 34, .89), rgba(12, 8, 28, .57)); box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 16px 34px rgba(0,0,0,.24); backdrop-filter: blur(10px); }
.page-hero h1 { margin: 4px 0 0; font-size: clamp(35px, 5.5vw, 62px); }
.page-hero > div > p:last-child { max-width: 600px; margin: 7px 0 0; color: #eee2e5; font-size: 13px; line-height: 1.55; }
.page-live { flex: 0 0 auto; min-width: 150px; padding: 11px 13px; text-align: right; border-left: 1px solid rgba(255, 220, 123, .35); }
.page-live b, .page-live small { display: block; font-size: 10px; letter-spacing: .12em; }
.page-live b { color: var(--gold); }
.page-live small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.arcade-grid { display: grid; gap: 15px; margin: 0 8px; }
.lobby-layout { grid-template-columns: minmax(0, 1.55fr) minmax(290px, .78fr); }
.profile-layout { grid-template-columns: minmax(0, 1.15fr) minmax(290px, .85fr); }
.arcade-panel { padding: 19px; border: 1px solid rgba(255, 226, 153, .28); border-radius: 10px; background: linear-gradient(125deg, rgba(45, 5, 36, .89), rgba(11, 10, 28, .77)); box-shadow: inset 0 1px rgba(255,255,255,.09), 0 13px 30px rgba(0,0,0,.3); backdrop-filter: blur(9px); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.panel-heading h2, .arcade-panel > h2 { margin: 2px 0 0; color: #fff2cf; font-family: "Bebas Neue", Impact, sans-serif; font-size: 30px; font-weight: 400; letter-spacing: .07em; line-height: .9; }
.panel-mark { display: grid; width: 31px; height: 31px; place-items: center; color: #2d0b1b; border-radius: 50%; background: var(--gold); font-weight: 800; box-shadow: 0 0 17px rgba(255, 207, 85, .34); }
.text-button { padding: 7px 9px; color: var(--gold); border: 1px solid rgba(255, 220, 116, .4); border-radius: 5px; background: transparent; cursor: pointer; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.text-button:hover { color: #2d0b1b; background: var(--gold); }

.table-list { display: grid; gap: 8px; }
.table-row { padding: 13px; border: 1px solid rgba(255, 245, 208, .13); border-radius: 7px; background: rgba(0, 24, 24, .2); transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.table-row:hover { transform: translateX(3px); border-color: rgba(255, 213, 108, .58); background: rgba(100, 18, 71, .23); }
.table-row-top, .table-row-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.table-status { display: block; color: #a8ffe3; font-size: 8px; font-weight: 800; letter-spacing: .11em; }
.table-status i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #42ebaa; box-shadow: 0 0 7px #42ebaa; }
.table-row h3 { margin: 2px 0 0; color: #fff6da; font-size: 15px; }
.table-row p { margin: 1px 0 0; color: var(--muted); font-size: 9px; }
.table-stakes { text-align: right; }
.table-stakes small, .rank-score small, .rank-chips small, .profile-stats small { display: block; color: var(--gold); font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.table-stakes b { font-family: "Bebas Neue", Impact, sans-serif; font-size: 20px; font-weight: 400; letter-spacing: .06em; }
.table-row-bottom { margin-top: 10px; }
.seat-line { display: flex; align-items: center; min-height: 23px; }
.seat-avatar { width: 21px; height: 21px; display: grid; place-items: center; margin-right: -4px; color: #250b1c; border: 2px solid #321126; border-radius: 50%; background: var(--avatar); font-size: 8px; font-style: normal; font-weight: 800; }
.seat-avatar.empty { color: rgba(255,255,255,.48); background: #34283c; }
.seat-line > span { margin-left: 10px; color: rgba(255,255,255,.58); font-size: 8px; font-weight: 700; letter-spacing: .06em; }
.seat-button { padding: 7px 10px; color: #2b0a1a; border: 1px solid #ffe6a0; border-radius: 5px; background: linear-gradient(135deg, #ffda71, #f4a03a); cursor: pointer; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.seat-button:hover { filter: brightness(1.13); }
.seat-button b { margin-left: 3px; font-size: 15px; line-height: 0; }
.table-note { margin: 14px 0 0; color: rgba(255,255,255,.56); font-size: 9px; text-align: center; }
.config-form { display: grid; gap: 12px; }
.config-form label { display: grid; gap: 5px; color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.config-form input, .config-form select { width: 100%; min-height: 38px; padding: 8px 10px; color: #fff6e4; border: 1px solid rgba(255, 225, 153, .28); border-radius: 5px; outline: none; background: rgba(8, 4, 21, .62); font: 600 12px "Space Grotesk", sans-serif; }
.config-form input:focus, .config-form select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 210, 91, .16); }
.form-split { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.primary-button, .hero-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 45px; padding: 9px 13px; color: #31091b; border: 1px solid #fff0af; border-radius: 6px; background: linear-gradient(135deg, #ffda73, #f4a33f); box-shadow: inset 0 1px rgba(255,255,255,.72), 0 5px 15px rgba(240, 159, 52, .22); cursor: pointer; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-decoration: none; }
.primary-button:hover, .hero-button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.primary-button b, .hero-button b { font-size: 20px; line-height: .6; }
.form-status { display: block; min-height: 30px; margin-top: 11px; color: #bffff0; font-size: 10px; line-height: 1.45; }

.leaderboard-panel { margin: 0 8px; }
.season-chip { padding: 5px 8px; color: #ffd96e; border: 1px solid rgba(255, 213, 108, .42); border-radius: 999px; background: rgba(255,209,94,.09); font-size: 8px; font-weight: 800; letter-spacing: .09em; }
.rank-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.rank-list li { display: grid; grid-template-columns: 35px 31px minmax(110px, 1fr) 100px 100px; align-items: center; gap: 9px; min-height: 51px; padding: 8px 11px; border-left: 3px solid transparent; background: rgba(255,255,255,.045); }
.rank-list li:nth-child(odd) { background: rgba(255,255,255,.082); }
.rank-list li:nth-child(-n+3) { border-left-color: var(--gold); background: linear-gradient(90deg, rgba(255,213,92,.18), rgba(255,255,255,.045)); }
.rank-list li.current-player { border-left-color: #5ce8c0; box-shadow: inset 0 0 0 1px rgba(92,232,192,.32); }
.rank-number { color: #ffe295; font-family: "Bebas Neue", Impact, sans-serif; font-size: 25px; letter-spacing: .05em; }
.rank-avatar { display: grid; width: 29px; height: 29px; place-items: center; color: #27081a; border-radius: 50%; background: linear-gradient(135deg, #ffe082, #ff688f); font-size: 10px; font-weight: 800; }
.rank-list strong { color: #fff5dc; font-size: 12px; letter-spacing: .06em; }
.rank-list strong small { margin-left: 5px; padding: 2px 4px; color: #20101a; border-radius: 2px; background: #5ce8c0; font-size: 7px; letter-spacing: .1em; }
.rank-score, .rank-chips { text-align: right; }
.rank-score b, .rank-chips b { display: block; margin-top: -2px; color: #fff2d1; font-family: "Bebas Neue", Impact, sans-serif; font-size: 21px; font-weight: 400; letter-spacing: .06em; }

.player-card { text-align: center; }
.player-avatar-large { width: 74px; height: 74px; display: grid; place-items: center; margin: 0 auto 13px; color: #2f0b1c; border: 3px solid #fff1bc; border-radius: 50%; background: radial-gradient(circle at 33% 23%, #fff0b3, #f8b945 40%, #e53f7a 76%); box-shadow: 0 0 0 5px rgba(105, 10, 66, .52), 0 0 27px rgba(255, 206, 75, .4); font-size: 34px; }
.player-card h2 { font-size: 38px; }
.player-title { margin: 6px 0 15px; color: #d7c6cc; font-size: 11px; }
.player-level { display: flex; align-items: center; justify-content: center; gap: 8px; color: #ffd66c; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.player-level i { width: min(150px, 29vw); height: 6px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.14); }
.player-level b { display: block; width: 73%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffda71, #ff5e94); }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 19px; }
.profile-stats div { padding: 10px 4px; border: 1px solid rgba(255,229,163,.14); border-radius: 5px; background: rgba(0,0,0,.15); }
.profile-stats b { display: block; margin-top: 1px; color: #fff1d2; font-family: "Bebas Neue", Impact, sans-serif; font-size: 23px; font-weight: 400; letter-spacing: .04em; }

.rules-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 8px 12px; }
.rule-card { min-height: 190px; padding: 17px; }
.rule-card > span { color: #ffcc64; font-family: "Bebas Neue", Impact, sans-serif; font-size: 34px; letter-spacing: .08em; }
.rule-card h2 { margin: 3px 0 9px; color: #fff2d5; font-family: "Bebas Neue", Impact, sans-serif; font-size: 24px; font-weight: 400; letter-spacing: .06em; line-height: .95; }
.rule-card p { margin: 0; color: #ddd1d4; font-size: 11px; line-height: 1.55; }
.hand-guide { margin: 0 8px; }
.hand-guide ol { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin: 0; padding: 0; list-style: none; }
.hand-guide li { display: grid; gap: 3px; padding: 10px; border-left: 2px solid rgba(255,211,101,.7); background: rgba(0,0,0,.17); }
.hand-guide li b { color: #ffe5a1; font-size: 10px; }
.hand-guide li span { color: #cbbcc2; font-size: 9px; line-height: 1.35; }
.hero-button { flex: 0 0 auto; }

.game-stage { position: relative; flex: 1; display: grid; grid-template-columns: 165px minmax(500px, 900px) 165px; grid-template-rows: 1fr auto; align-items: center; justify-content: center; gap: 12px 25px; padding: 14px 0 3px; }
.table-wrap { grid-column: 2; width: 100%; align-self: center; position: relative; }
.table-glow { display: none; }
/* The generated casino artwork is the actual table. This wrapper only positions the cards and HUD over it. */
.poker-table { position: relative; z-index: 1; aspect-ratio: 1.76 / 1; width: 100%; }
.poker-table::before, .poker-table::after, .table-felt::before, .felt-line { display: none; }
.table-felt { position: relative; width: 100%; height: 100%; overflow: visible; }

.dealer-zone { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; min-width: 500px; gap: 9px; z-index: 2; }
.dealer-zone.player-zone { top: 10%; }
.dealer-zone.human-zone { bottom: 9.5%; }
.seat-copy { min-width: 100px; }
.seat-title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-shadow: 0 2px 5px #002d22; }
.seat-subtitle { margin-top: 2px; color: rgba(255,255,255,.67); font-size: 10px; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ffdd58; box-shadow: 0 0 8px #ffdd58; vertical-align: middle; }
.you-badge { display: inline-block; margin-left: 5px; padding: 1px 4px; color: #2b061a; background: var(--gold); font-size: 8px; letter-spacing: .08em; border-radius: 2px; vertical-align: 1px; }
.avatar { flex: 0 0 auto; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,240,185,.84); box-shadow: 0 0 0 3px rgba(10, 0, 6, .35), 0 0 16px rgba(255,206,69,.5); font-size: 17px; }
.dealer-avatar { background: radial-gradient(circle at 35% 25%, #ffcc71, #782040 58%, #220619); color: var(--gold); }
.player-avatar { background: radial-gradient(circle at 35% 25%, #bdedff, #2a78a3 58%, #0d243d); color: #effdff; }

.hand { display: flex; gap: 6px; min-height: 54px; }
.dealer-hand { order: -1; }
.player-hand { order: 3; }
.human-zone .player-hand { gap: 9px; min-height: clamp(76px, 7vw, 96px); }
.human-zone .card { width: clamp(52px, 5vw, 68px); height: clamp(76px, 7vw, 96px); }
.card { width: clamp(38px, 4vw, 54px); height: clamp(54px, 5.6vw, 74px); position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 5px 6px; overflow: hidden; border-radius: 5px; background: linear-gradient(135deg, #fffdf6, #e6decb); color: #14101a; border: 1px solid #fff; box-shadow: 0 4px 7px rgba(0,0,0,.43); font-family: Georgia, serif; animation: card-in .42s both; animation-delay: calc(var(--i) * 75ms); }
.card.red { color: #d71e47; }
.card .rank { font-size: clamp(14px, 1.6vw, 20px); font-weight: bold; line-height: .75; }
.card .suit { font-size: clamp(14px, 1.6vw, 22px); line-height: 1; }
.card .big-suit { align-self: center; margin-top: auto; font-size: clamp(20px, 2.6vw, 33px); line-height: .8; }
.card.card-art { display: block; padding: 0; background: #fff; }
.card.card-art img { display: block; width: 100%; height: 100%; object-fit: fill; }
.card.back { align-items: center; justify-content: center; padding: 3px; background: linear-gradient(135deg, #fc4575, #610e38 50%, #b0194f); border-color: #ffd57e; }
.card.back::after { content: "♠"; display: grid; width: calc(100% - 6px); height: calc(100% - 6px); place-items: center; border: 1px solid rgba(255,224,129,.7); border-radius: 3px; color: #ffd46d; font-size: 28px; text-shadow: 0 0 10px #ffdb8d; background: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 5px); }

.center-zone { position: absolute; z-index: 3; top: 50%; left: 50%; width: 64%; transform: translate(-50%, -50%); text-align: center; }
.round-line { display: flex; align-items: center; justify-content: space-between; margin: 0 auto 7px; color: rgba(255,250,219,.8); font-size: 9px; font-weight: 700; letter-spacing: .11em; }
.round-line b { color: var(--gold); font-family: "Bebas Neue", Impact, sans-serif; font-size: 19px; letter-spacing: .09em; text-shadow: 0 1px 6px #001c17; }
.community-cards { display: flex; justify-content: center; min-height: clamp(54px, 5.6vw, 74px); gap: 7px; }
.community-cards .card { width: clamp(38px, 4vw, 54px); }
.empty-slot { width: clamp(38px, 4vw, 54px); height: clamp(54px, 5.6vw, 74px); border: 1px dashed rgba(255,241,181,.22); border-radius: 5px; background: rgba(1, 43, 33, .15); }
.announcer { min-height: 36px; margin-top: 7px; transition: transform .2s, opacity .2s; text-shadow: 0 2px 8px #001e17; }
.announcer.pulse { animation: announce .54s ease-out; }
.announcer p { margin: 0; color: #ffe3a0; font-size: 8px; font-weight: 700; letter-spacing: .18em; }
.announcer strong { display: block; margin-top: -3px; color: #fff9df; font-family: "Bebas Neue", Impact, sans-serif; font-size: clamp(17px, 2.4vw, 27px); letter-spacing: .09em; line-height: 1.1; }
.announcer.win strong { color: #ffde68; text-shadow: 0 0 17px #ffbd28; }
.announcer.lose strong { color: #ff9abb; }

.chip-stack { display: none; }
.stack-left { left: 9%; } .stack-right { right: 8%; }
.chip-stack i { display: block; width: 26px; height: 7px; border-radius: 50%; background: repeating-linear-gradient(90deg, #ffc947 0 4px, #9d2242 4px 9px); border: 1px solid #61202d; box-shadow: 0 2px 1px rgba(0,0,0,.4); }
.stack-right i { background: repeating-linear-gradient(90deg, #ed5c8c 0 4px, #f9d66f 4px 9px); }
.dealer-button { display: none; }

.side-card { align-self: center; padding: 13px; border: 1px solid rgba(255,225,157,.22); border-radius: 8px; background: linear-gradient(135deg, rgba(37, 3, 31, .86), rgba(10, 8, 25, .58)); box-shadow: 0 11px 26px rgba(0,0,0,.22); backdrop-filter: blur(5px); }
.hot-streak { grid-column: 1; }
.table-info { grid-column: 3; }
.side-heading { color: var(--gold); font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.side-heading span { font-size: 13px; }
.hot-streak strong { display: block; margin: 3px 0 -6px; font-family: "Bebas Neue", Impact, sans-serif; font-size: 52px; line-height: 1; color: #fff7d9; }
.hot-streak small { color: var(--muted); font-size: 9px; }
.streak-pips { display: flex; gap: 4px; margin-top: 11px; }
.streak-pips i { width: 18px; height: 4px; border-radius: 5px; background: #553144; }
.streak-pips i.lit { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.table-info p { margin: 10px 0 0; color: #eee3df; font-size: 10px; line-height: 1.5; }
.table-info p b { display: block; color: #fff4cd; font-family: "Bebas Neue", Impact, sans-serif; font-size: 27px; line-height: .7; letter-spacing: .08em; }
.table-info span { color: var(--muted); }

.hand-panel { grid-column: 1 / -1; width: min(840px, 94%); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 12px 10px 17px; border: 1px solid rgba(255,217,132,.44); border-radius: 11px; background: linear-gradient(95deg, rgba(44, 3, 32, .94), rgba(15, 7, 26, .9)); box-shadow: 0 18px 35px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.12); backdrop-filter: blur(10px); }
.hand-panel-copy p { max-width: 260px; margin: 3px 0 0; color: #eee0dc; font-size: 11px; line-height: 1.35; }
.action-row { display: flex; align-items: stretch; justify-content: flex-end; gap: 6px; }
.action-button { min-width: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; padding: 4px 11px; color: #fff7df; border: 1px solid rgba(255,244,199,.3); border-radius: 6px; background: rgba(255,255,255,.07); cursor: pointer; letter-spacing: .08em; transition: transform .15s, filter .15s, background .15s; }
/* display:flex above would beat the hidden attribute, and every button would show at every moment of the hand. */
.action-button[hidden], .leave-button[hidden] { display: none; }
.action-button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.18); }
.action-button:active:not(:disabled) { transform: translateY(1px); }
.action-button:disabled { opacity: .38; cursor: not-allowed; }
.action-button kbd { display: block; color: rgba(255,255,255,.55); font-family: inherit; font-size: 8px; font-weight: 700; }
.action-button.fold { color: #ffafc3; border-color: rgba(255,78,126,.4); }
.action-button.ghost { color: #bcecd9; }
.action-button.bet { min-width: 88px; color: #2a071b; background: linear-gradient(135deg, #ffd665, #f49b36); border-color: #fff0ad; box-shadow: inset 0 1px rgba(255,255,255,.7), 0 4px 12px rgba(247,149,36,.22); }
.action-button.deal { min-width: 104px; color: #fff6e7; background: linear-gradient(135deg, #ff3970, #a60d47); border-color: #ffa3bd; box-shadow: inset 0 1px rgba(255,255,255,.32), 0 4px 16px rgba(244,36,100,.25); }
.action-button .button-top, .action-button span:last-child { font-size: 8px; font-weight: 700; line-height: 1; }
.action-button strong { font-family: "Bebas Neue", Impact, sans-serif; font-size: 23px; line-height: .9; letter-spacing: .08em; }

footer { display: flex; justify-content: space-between; padding: 10px 8px 0; color: rgba(255,229,210,.57); font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.chip-burst { position: fixed; z-index: 20; left: 50%; top: 50%; pointer-events: none; }
.burst-chip { position: absolute; width: 14px; height: 14px; border: 3px dashed #fef1ba; border-radius: 50%; background: #d31b55; box-shadow: 0 0 6px #ffbf45; animation: burst .86s cubic-bezier(.1,.6,.3,1) forwards; }

@keyframes card-in { from { opacity: 0; transform: translateY(-12px) rotate(-3deg) scale(.9); } to { opacity: 1; transform: translateY(0) rotate(0) scale(1); } }
@keyframes blink { 50% { opacity: .25; transform: scale(.7); } }
@keyframes twinkle { 50% { opacity: .25; } }
@keyframes announce { 0% { transform: scale(.92); opacity: .25; } 55% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes burst { to { transform: translate(var(--x), var(--y)) rotate(530deg); opacity: 0; } }

@media (max-width: 1000px) {
  .game-stage { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 9px; padding-top: 21px; }
  .table-wrap { grid-column: 1; grid-row: 1; width: min(900px, 100%); justify-self: center; }
  .side-card { display: none; }
  .hand-panel { grid-row: 2; }
  .lobby-layout, .profile-layout { grid-template-columns: 1fr; }
  .rules-grid { grid-template-columns: repeat(2, 1fr); }
  .hand-guide ol { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 650px) {
  .game-shell { width: min(100% - 20px, 600px); padding-top: 13px; }
  .page-shell { width: min(100% - 20px, 600px); padding-top: 13px; }
  .topbar { padding: 0; } .topbar-stats { gap: 8px; } .jackpot { display: none; } h1 { font-size: 30px; } .brand-suit { font-size: 29px; } .bankroll { min-width: 99px; padding: 5px 8px; } .bankroll strong { font-size: 23px; }
  .brand-lockup strong { font-size: 26px; }
  .site-nav { grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 12px 0 0; }
  .nav-link { min-height: 45px; padding: 4px; gap: 0; }
  .nav-link .nav-icon { width: 22px; height: 22px; }
  .nav-link > span:last-child { display: none; }
  .quick-start { width: 100%; display: grid; gap: 10px; margin: 13px 0 -3px; padding: 13px; }
  .quick-start h2 { font-size: 25px; }
  .quick-start-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .quick-play-button, .quick-room-button { min-width: 0; padding: 8px 7px; font-size: 8px; }
  .game-stage { padding-top: 22px; } .poker-table { width: 118%; margin-left: -9%; }
  .dealer-zone { min-width: 370px; gap: 5px; } .seat-copy { min-width: 78px; } .seat-subtitle { font-size: 8px; } .avatar { width: 25px; height: 25px; font-size: 13px; } .hand { gap: 3px; }
  .center-zone { width: 67%; } .round-line { margin-bottom: 3px; font-size: 7px; } .round-line b { font-size: 14px; } .announcer { min-height: 29px; margin-top: 4px; } .announcer p { font-size: 6px; } .announcer strong { font-size: 16px; } .dealer-button { display: none; }
  .hand-panel { width: 100%; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; } .hand-panel-copy p { max-width: none; } .action-row { justify-content: stretch; gap: 4px; } .action-button { flex: 1; min-width: 0; min-height: 44px; padding: 3px 4px; } .action-button.bet, .action-button.deal { min-width: 0; } .action-button strong { font-size: 19px; }
  .page-hero { display: grid; gap: 13px; margin: 14px 0 12px; padding: 17px; }
  .page-hero h1 { font-size: 38px; }
  .page-hero > div > p:last-child { font-size: 11px; }
  .page-live { min-width: 0; padding: 8px 0 0; text-align: left; border-top: 1px solid rgba(255, 220, 123, .35); border-left: 0; }
  .arcade-grid, .leaderboard-panel, .rules-grid, .hand-guide { margin-left: 0; margin-right: 0; }
  .arcade-panel { padding: 14px; }
  .table-row { padding: 10px; }
  .table-row-top, .table-row-bottom { gap: 8px; }
  .table-row h3 { font-size: 13px; }
  .table-row p { font-size: 8px; }
  .table-stakes b { font-size: 17px; }
  .seat-line > span { display: none; }
  .rank-list li { grid-template-columns: 28px 27px minmax(0, 1fr) 70px; gap: 6px; padding: 7px; }
  .rank-chips { display: none; }
  .rank-number { font-size: 21px; }
  .rank-avatar { width: 25px; height: 25px; }
  .rank-list strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .rank-score b { font-size: 18px; }
  .rules-grid { grid-template-columns: 1fr; gap: 8px; }
  .rule-card { min-height: 0; }
  .hand-guide ol { grid-template-columns: 1fr; }
  footer { padding-top: 10px; font-size: 7px; letter-spacing: .08em; }
}

/* --- Multi-seat online table (server rooms) --- */
.opponents-row { position: absolute; z-index: 2; top: 7%; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; gap: clamp(14px, 3vw, 44px); width: 96%; }
.opponent-seat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 9px; border: 1px solid transparent; transition: border-color .2s ease, background .2s ease, opacity .2s ease; }
.opponent-seat .opponent-top { display: flex; align-items: center; gap: 8px; }
.opponent-seat.is-turn { border-color: rgba(255, 213, 108, .65); background: rgba(105, 13, 67, .35); box-shadow: 0 0 18px rgba(255, 205, 84, .18); }
.opponent-seat.is-folded { opacity: .45; }
.opponent-seat.is-winner { border-color: rgba(92, 232, 192, .8); background: rgba(9, 68, 52, .35); box-shadow: 0 0 20px rgba(92, 232, 192, .25); }
.opponent-hand { min-height: 0; }
.opponents-row.crowded .card { width: clamp(30px, 3vw, 44px); height: clamp(44px, 4.4vw, 62px); }
.opponents-row.crowded .seat-copy { min-width: 0; }
.seat-tag { display: inline-block; margin-left: 5px; padding: 1px 4px; color: #ffdf92; border: 1px solid rgba(255, 220, 123, .5); border-radius: 2px; font-size: 7px; letter-spacing: .1em; vertical-align: 1px; }
.seat-tag.turn-tag { color: #16321f; background: #5ce8c0; border-color: #5ce8c0; }
.leave-button { margin-top: 8px; }
.leave-button[hidden] { display: none; }

/* --- Lobby room list + forms --- */
.join-code-row { display: flex; gap: 8px; margin-top: 12px; }
.join-code-row input { flex: 1; text-transform: uppercase; letter-spacing: .2em; }
.join-code-row button { flex: 0 0 auto; }
.solo-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; margin-top: 13px; padding-top: 13px; border-top: 1px solid rgba(255, 226, 153, .18); }
.room-empty { padding: 22px 12px; color: rgba(255,255,255,.55); text-align: center; font-size: 11px; }

@media (max-width: 650px) {
  .opponents-row { top: 5%; gap: 8px; }
  .opponent-seat { padding: 4px 6px; }
  .opponent-seat .seat-subtitle { display: none; }
  .opponents-row .card { width: clamp(26px, 7vw, 38px); height: clamp(38px, 10vw, 54px); }
}