:root {
  --ink: #17130f;
  --ink-soft: #29221c;
  --paper: #f3ead8;
  --paper-deep: #ded0b7;
  --cream: #fff9eb;
  --coral: #ff6e61;
  --coral-deep: #d9443a;
  --acid: #d8ff6b;
  --gold: #ffc857;
  --mint: #7ee3b5;
  --blue: #74b9ff;
  --muted: #9f9587;
  --red: #df463f;
  --shadow: 0 24px 80px rgba(0, 0, 0, .32);
  --border: 1px solid rgba(23, 19, 15, .2);
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ink); scroll-behavior: smooth; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--paper);
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 110, 97, .12), transparent 28rem),
    radial-gradient(circle at 80% 96%, rgba(216, 255, 107, .07), transparent 32rem),
    var(--ink);
}
button, input { font: inherit; }
button { color: inherit; }
button:not(:disabled) { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--acid); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; top: -60px; left: 18px; padding: 12px 18px; color: var(--ink); background: var(--acid); border-radius: 0 0 8px 8px; font-weight: 900; transition: top .2s; }
.skip-link:focus { top: 0; }

.noise { position: fixed; inset: 0; z-index: -1; opacity: .08; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); }
.glow { position: fixed; z-index: -2; width: 38vw; height: 38vw; border-radius: 50%; filter: blur(120px); opacity: .06; pointer-events: none; }
.glow-one { left: -12vw; top: 12vh; background: var(--coral); }
.glow-two { right: -16vw; bottom: -10vh; background: var(--acid); }

.topbar { position: relative; z-index: 50; min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px clamp(20px, 4vw, 64px); border-bottom: 1px solid rgba(243,234,216,.12); }
.wordmark { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: transparent; text-align: left; }
.wordmark-seal { width: 49px; height: 49px; display: grid; place-items: center; border: 1px solid rgba(243,234,216,.38); border-radius: 50%; position: relative; }
.wordmark-seal::before { content: ""; position: absolute; inset: 4px; border: 1px dashed rgba(216,255,107,.52); border-radius: 50%; }
.wordmark-seal span { color: var(--acid); font-size: 21px; transform: translateY(-1px); }
.wordmark-copy { display: grid; gap: 1px; }
.wordmark-copy b { letter-spacing: .09em; font-size: 18px; line-height: 1; }
.wordmark-copy small { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.connection-pill { height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid rgba(243,234,216,.13); border-radius: 99px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.connection-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(255,200,87,.12); animation: pulse 1.3s infinite; }
.connection-pill.online i { background: var(--mint); box-shadow: 0 0 0 4px rgba(126,227,181,.1); animation: none; }
.connection-pill.offline i { background: var(--coral); box-shadow: 0 0 0 4px rgba(255,110,97,.1); animation: none; }
.icon-button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(243,234,216,.17); border-radius: 50%; background: rgba(255,255,255,.025); font-size: 18px; transition: .18s ease; }
.icon-button:hover { color: var(--acid); border-color: rgba(216,255,107,.45); transform: translateY(-1px); }

main { width: 100%; }
.view { width: min(1420px, calc(100% - 40px)); margin-inline: auto; animation: appear .36s ease both; }
.entry-view { min-height: calc(100vh - 87px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, 520px); align-items: center; gap: clamp(44px, 8vw, 120px); padding-block: clamp(56px, 8vh, 110px); }
.kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: var(--acid); font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.kicker > span { width: 28px; height: 2px; background: currentColor; }
.hero-copy h1, .lobby-heading h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(57px, 7.3vw, 108px); line-height: .86; letter-spacing: -.065em; font-weight: 500; }
.hero-copy h1 em, .lobby-heading h1 em { display: inline-block; color: var(--coral); font-weight: 500; }
.hero-copy h1 em { transform: translateX(clamp(14px, 3vw, 58px)); }
.hero-deck { max-width: 650px; margin: 32px 0; color: #bcb1a2; font-family: Georgia, "Times New Roman", serif; font-size: clamp(18px, 2vw, 24px); line-height: 1.5; }
.hero-stats { display: flex; gap: clamp(26px, 5vw, 68px); padding-top: 22px; border-top: 1px solid rgba(243,234,216,.14); }
.hero-stats > div { display: flex; align-items: center; gap: 11px; }
.hero-stats strong { color: var(--cream); font-family: Georgia, serif; font-size: 32px; font-weight: 500; }
.hero-stats span { color: var(--muted); font-size: 10px; line-height: 1.35; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.paper-card { color: var(--ink); background-color: var(--paper); background-image: linear-gradient(135deg, rgba(255,255,255,.18), transparent 46%), radial-gradient(rgba(23,19,15,.06) .65px, transparent .65px); background-size: auto, 5px 5px; border: 1px solid rgba(255,255,255,.18); box-shadow: var(--shadow); }
.entry-card { position: relative; border-radius: 4px; transform: rotate(.45deg); }
.entry-card::before { content: ""; position: absolute; z-index: -1; inset: 10px -9px -10px 9px; border: 1px solid rgba(255,110,97,.34); border-radius: inherit; transform: rotate(-1.1deg); }
.entry-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: var(--border); }
.entry-tab { padding: 19px 12px 16px; color: rgba(23,19,15,.53); border: 0; border-bottom: 3px solid transparent; background: transparent; font-size: 12px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.entry-tab.active { color: var(--ink); border-bottom-color: var(--coral-deep); }
.entry-panel { padding: clamp(25px, 4vw, 42px); }
.form-heading { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 27px; }
.tiny-crown { flex: 0 0 46px; height: 46px; display: grid; place-items: center; color: var(--paper); background: var(--ink); border-radius: 50%; font-size: 20px; }
.tiny-crown.ticket { color: var(--ink); background: var(--gold); }
.form-heading h2 { margin: 1px 0 4px; font-family: Georgia, serif; font-size: 25px; }
.form-heading p { margin: 0; color: rgba(23,19,15,.6); font-size: 12px; line-height: 1.45; }
.field-label { display: block; margin: 17px 0 8px; color: rgba(23,19,15,.68); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.input-wrap { display: flex; align-items: center; height: 54px; border: 1px solid rgba(23,19,15,.25); background: rgba(255,255,255,.38); transition: .18s; }
.input-wrap:focus-within { border-color: var(--coral-deep); box-shadow: 0 0 0 3px rgba(217,68,58,.09); }
.input-wrap > span { width: 48px; color: rgba(23,19,15,.45); text-align: center; font-size: 18px; }
.input-wrap input { min-width: 0; flex: 1; height: 100%; padding: 0 15px 0 0; color: var(--ink); border: 0; outline: 0; background: transparent; font-weight: 800; }
.input-wrap input::placeholder { color: rgba(23,19,15,.28); }
.code-input input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 21px; letter-spacing: .22em; text-transform: uppercase; }
.setting-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding: 15px; border: 1px solid rgba(23,19,15,.16); background: rgba(255,255,255,.21); }
.setting-card > div { display: flex; align-items: center; gap: 12px; }
.setting-icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink); background: var(--gold); border-radius: 50%; }
.setting-card b, .setting-card small { display: block; }
.setting-card b { font-size: 13px; }
.setting-card small { margin-top: 2px; color: rgba(23,19,15,.5); font-size: 10px; }
.switch { position: relative; display: flex; align-items: center; }
.switch input { position: absolute; opacity: 0; }
.switch span { width: 45px; height: 25px; position: relative; display: block; border-radius: 20px; background: rgba(23,19,15,.2); transition: .2s; }
.switch span::after { content: ""; position: absolute; top: 4px; left: 4px; width: 17px; height: 17px; border-radius: 50%; background: white; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: .2s; }
.switch input:checked + span { background: var(--ink); }
.switch input:checked + span::after { transform: translateX(20px); background: var(--acid); }
.switch input:focus-visible + span { outline: 3px solid var(--coral); outline-offset: 3px; }
.switch em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.chip-setting { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 15px 0 22px; }
.chip-setting .field-label { margin: 0; }
.stepper { height: 40px; display: flex; border: 1px solid rgba(23,19,15,.22); }
.stepper button { width: 34px; color: var(--ink); border: 0; background: rgba(255,255,255,.25); font-size: 18px; }
.stepper input { width: 45px; padding: 0; color: var(--ink); border: 0; border-inline: 1px solid rgba(23,19,15,.18); outline: 0; background: transparent; text-align: center; font-weight: 900; appearance: textfield; }
.stepper input::-webkit-inner-spin-button { appearance: none; }
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 20px; border: 1px solid transparent; border-radius: 2px; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; transition: transform .16s, box-shadow .16s, background .16s, color .16s; }
.button:not(:disabled):hover { transform: translateY(-2px); }
.button:disabled { opacity: .38; cursor: not-allowed; }
.button.wide { width: 100%; }
.button.compact { min-height: 42px; padding-inline: 15px; }
.button-primary { color: var(--paper); background: var(--coral-deep); box-shadow: 0 7px 18px rgba(217,68,58,.2); }
.button-primary:not(:disabled):hover { background: #ec5147; box-shadow: 0 10px 22px rgba(217,68,58,.28); }
.button-primary > b { font-size: 19px; }
.button-quiet { color: var(--paper); border-color: rgba(243,234,216,.18); background: rgba(255,255,255,.035); }
.button-quiet:hover { border-color: rgba(216,255,107,.45); }
.entry-card .button-primary { min-height: 55px; color: var(--paper); }
.microcopy { margin: 14px 0 0; color: rgba(23,19,15,.48); text-align: center; font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.microcopy span { margin-right: 5px; color: var(--coral-deep); }

.lobby-view { min-height: calc(100vh - 87px); padding: clamp(50px, 7vw, 90px) 0; }
.lobby-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 46px; }
.lobby-heading h1 { max-width: 860px; font-size: clamp(52px, 6vw, 85px); }
.lobby-heading p:not(.kicker) { max-width: 680px; margin: 22px 0 0; color: var(--muted); font-family: Georgia, serif; font-size: 18px; }
.room-ticket { flex: 0 0 260px; padding: 20px 22px; position: relative; overflow: hidden; color: var(--ink); background: var(--acid); box-shadow: 9px 9px 0 rgba(216,255,107,.1); transform: rotate(1.2deg); }
.room-ticket::before, .room-ticket::after { content: ""; position: absolute; width: 18px; height: 18px; top: 50%; border-radius: 50%; background: var(--ink); transform: translateY(-50%); }
.room-ticket::before { left: -10px; }.room-ticket::after { right: -10px; }
.room-ticket small { font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.room-ticket strong { display: block; margin: 5px 0 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 32px; letter-spacing: .17em; }
.copy-button { width: 100%; height: 35px; color: var(--ink); border: 1px solid rgba(23,19,15,.34); background: transparent; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.lobby-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .7fr); gap: 27px; align-items: start; }
.roster-card { padding: clamp(24px, 4vw, 39px); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 19px; border-bottom: var(--border); }
.section-title p, .eyebrow { margin: 0 0 5px; color: var(--coral-deep); font-size: 8px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.section-title h2 { margin: 0; font-family: Georgia, serif; font-size: 25px; }
.section-title > span { padding: 7px 10px; border: 1px solid rgba(23,19,15,.23); font-size: 10px; font-weight: 900; }
.roster { display: grid; gap: 10px; margin: 18px 0; padding: 0; list-style: none; counter-reset: seats; }
.roster-seat { min-height: 66px; display: flex; align-items: center; gap: 13px; padding: 9px 13px; border: 1px solid rgba(23,19,15,.12); background: rgba(255,255,255,.21); }
.roster-seat.empty { color: rgba(23,19,15,.33); border-style: dashed; background: transparent; }
.roster-avatar { width: 42px; height: 42px; display: grid; place-items: center; color: var(--paper); background: var(--ink); border-radius: 50%; font-family: Georgia, serif; font-size: 17px; text-transform: uppercase; }
.roster-seat.empty .roster-avatar { color: rgba(23,19,15,.36); border: 1px dashed rgba(23,19,15,.3); background: transparent; }
.roster-name { min-width: 0; flex: 1; }
.roster-name b, .roster-name small { display: block; }
.roster-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.roster-name small { margin-top: 3px; color: rgba(23,19,15,.48); font-size: 9px; font-weight: 700; }
.host-badge, .you-badge { padding: 4px 7px; border: 1px solid rgba(23,19,15,.18); font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.host-badge { color: var(--paper); background: var(--coral-deep); border-color: var(--coral-deep); }
.you-badge { background: var(--acid); }
.presence-dot { width: 8px; height: 8px; margin-left: 5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(56,155,112,.1); }
.presence-dot.offline { background: var(--muted); box-shadow: none; }
.waiting-note { display: flex; align-items: center; gap: 10px; padding: 13px 15px; color: rgba(23,19,15,.58); background: rgba(23,19,15,.05); font-size: 10px; }
.waiting-note i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: pulse 1.3s infinite; }
.lobby-side { display: grid; gap: 20px; }
.settings-summary { padding: 26px; }
.settings-summary > .eyebrow { margin-bottom: 15px; }
.summary-row { min-height: 61px; display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(23,19,15,.12); }
.summary-icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--paper); background: var(--ink); border-radius: 50%; font-size: 12px; }
.summary-row > div { flex: 1; }
.summary-row b, .summary-row small { display: block; }
.summary-row b { font-size: 11px; }.summary-row small { margin-top: 3px; color: rgba(23,19,15,.48); font-size: 9px; }
.status-tag { padding: 4px 7px; color: #135a3a; background: rgba(126,227,181,.45); font-size: 8px; font-weight: 900; }
.host-action { text-align: center; }
.host-action .button { min-height: 58px; }
.host-action p { margin: 10px 0 0; color: var(--muted); font-size: 9px; }

.game-view { width: 100%; min-height: calc(100vh - 87px); }
.game-ribbon { min-height: 78px; display: flex; align-items: center; gap: 17px; padding: 9px clamp(16px, 3vw, 42px); border-bottom: 1px solid rgba(243,234,216,.12); }
.round-mark { width: 50px; height: 50px; display: grid; place-content: center; color: var(--ink); background: var(--acid); text-align: center; transform: rotate(-3deg); }
.round-mark small { font-size: 7px; font-weight: 900; letter-spacing: .12em; }.round-mark b { font-family: Georgia, serif; font-size: 23px; line-height: 1; }
.phase-copy { display: grid; gap: 2px; }
.phase-copy span { color: var(--coral); font-size: 8px; font-weight: 900; letter-spacing: .13em; }.phase-copy strong { font-family: Georgia, serif; font-size: 16px; font-weight: 500; }
.game-ribbon-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.chip-wallet { height: 49px; display: flex; align-items: center; gap: 9px; padding: 0 13px; color: var(--paper); border: 1px solid rgba(243,234,216,.15); background: rgba(255,255,255,.025); }
.chip-wallet > span:first-child { color: var(--gold); }.chip-wallet small, .chip-wallet b { display: block; text-align: left; }.chip-wallet small { color: var(--muted); font-size: 7px; letter-spacing: .12em; }.chip-wallet b { font-size: 16px; }
.table-shell { position: relative; height: clamp(480px, 59vh, 670px); padding: clamp(12px, 2vw, 27px) clamp(12px, 3vw, 43px) 0; overflow: hidden; }
.table-frame { height: 100%; max-width: 1380px; margin: auto; padding: clamp(9px, 1.5vw, 18px); border-radius: 48% / 18%; background: linear-gradient(145deg,#5a3c29,#26180f 50%,#6c4931); box-shadow: 0 27px 65px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.18); }
.felt-table { height: 100%; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: inherit; background-color: #1b5c4e; background-image: radial-gradient(circle at 50% 45%, rgba(255,255,255,.035), transparent 36%), radial-gradient(rgba(255,255,255,.045) .7px, transparent .8px); background-size: auto, 6px 6px; box-shadow: inset 0 0 60px rgba(0,0,0,.34); }
.felt-table::after { content: ""; position: absolute; inset: 6%; pointer-events: none; border: 1px solid rgba(255,249,235,.09); border-radius: 48% / 28%; }
.opponents { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.player-seat { width: 150px; position: absolute; display: grid; justify-items: center; gap: 5px; transform: translate(-50%,-50%); }
.player-seat:nth-child(1) { left: 15%; top: 30%; }.player-seat:nth-child(2) { left: 36%; top: 14%; }.player-seat:nth-child(3) { left: 64%; top: 14%; }.player-seat:nth-child(4) { left: 85%; top: 30%; }
.opponents[data-count="3"] .player-seat:nth-child(1) { left: 20%; top: 25%; }.opponents[data-count="3"] .player-seat:nth-child(2) { left: 50%; top: 13%; }.opponents[data-count="3"] .player-seat:nth-child(3) { left: 80%; top: 25%; }
.seat-avatar { width: 49px; height: 49px; position: relative; display: grid; place-items: center; color: var(--paper); border: 2px solid rgba(255,255,255,.24); border-radius: 50%; background: #222; box-shadow: 0 7px 20px rgba(0,0,0,.25); font-family: Georgia, serif; font-size: 18px; text-transform: uppercase; }
.player-seat.current .seat-avatar { color: var(--ink); border-color: var(--acid); background: var(--acid); box-shadow: 0 0 0 7px rgba(216,255,107,.11), 0 7px 20px rgba(0,0,0,.3); }
.player-seat.disconnected .seat-avatar { opacity: .55; filter: grayscale(1); }
.seat-cards { position: absolute; right: -15px; bottom: -5px; min-width: 28px; height: 21px; display: grid; place-items: center; color: var(--ink); border: 2px solid #1b5c4e; border-radius: 20px; background: var(--paper); font-size: 9px; font-weight: 900; }
.seat-role { padding: 4px 7px; color: var(--ink); background: var(--gold); box-shadow: 2px 2px 0 rgba(0,0,0,.18); font-size: 7px; font-weight: 1000; letter-spacing: .1em; text-transform: uppercase; transform: rotate(-2deg); }
.seat-name { max-width: 140px; padding: 3px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: white; background: rgba(0,0,0,.38); font-size: 10px; font-weight: 800; }
.seat-status { color: rgba(255,255,255,.58); font-size: 7px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.player-seat.current .seat-status { color: var(--acid); }
.center-stage { position: absolute; z-index: 3; left: 50%; top: 56%; width: min(390px, 45%); display: grid; justify-items: center; transform: translate(-50%,-50%); }
.turn-banner { width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: rgba(255,255,255,.7); font-size: 8px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.turn-banner span { height: 1px; flex: 1; background: rgba(255,255,255,.15); }
.turn-banner.yours b { color: var(--acid); }
.pile-area { min-width: 210px; min-height: 168px; position: relative; display: grid; place-items: center; }
.empty-pile { width: 155px; height: 154px; display: grid; place-content: center; justify-items: center; color: rgba(255,255,255,.42); border: 1px dashed rgba(255,255,255,.21); border-radius: 10px; text-align: center; transform: rotate(-2deg); }
.empty-pile > span { font-size: 26px; }.empty-pile b { margin: 7px 0 2px; font-family: Georgia, serif; font-size: 16px; font-weight: 500; }.empty-pile small { font-size: 8px; text-transform: uppercase; }
.pile-card { width: 102px; height: 146px; position: absolute; padding: 8px; color: var(--ink); border: 1px solid rgba(23,19,15,.25); border-radius: 7px; background: var(--cream); box-shadow: 0 8px 20px rgba(0,0,0,.24); font-family: Georgia,serif; font-size: 22px; font-weight: 700; }
.pile-card.red { color: var(--red); }.pile-card:nth-child(1) { transform: rotate(-9deg) translate(-28px,2px); }.pile-card:nth-child(2) { transform: rotate(3deg) translate(5px,-3px); }.pile-card:nth-child(3) { transform: rotate(9deg) translate(28px,3px); }.pile-card:nth-child(4) { transform: rotate(14deg) translate(47px,7px); }
.pile-card .suit-large { position: absolute; inset: 0; display: grid; place-items: center; font-size: 45px; opacity: .88; }
.pile-meta { margin-top: 3px; color: rgba(255,255,255,.62); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.burn-button { margin-top: 9px; padding: 7px 12px; color: var(--ink); border: 0; background: var(--acid); font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.table-stamp { position: absolute; right: 11%; bottom: 18%; width: 92px; height: 92px; display: grid; place-content: center; color: rgba(255,255,255,.08); border: 3px double rgba(255,255,255,.08); border-radius: 50%; text-align: center; transform: rotate(-17deg); }
.table-stamp span { font-size: 6px; letter-spacing: .2em; }.table-stamp b { font-family: Georgia,serif; font-size: 13px; line-height: .9; }
.hand-dock { min-height: 235px; position: relative; z-index: 12; margin-top: -1px; padding: 13px clamp(17px, 4vw, 57px) 15px; background: linear-gradient(180deg,#241d17,#16120f); border-top: 1px solid rgba(243,234,216,.15); box-shadow: 0 -14px 30px rgba(0,0,0,.18); }
.hand-topline { min-height: 57px; display: flex; align-items: center; gap: 22px; }
.identity-lockup { display: flex; align-items: center; gap: 10px; min-width: 190px; }.role-medal { width: 42px; height: 42px; display: grid; place-items: center; color: var(--ink); border-radius: 50%; background: var(--gold); font-family: Georgia,serif; font-size: 18px; }.identity-lockup small { color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: .14em; }.identity-lockup h2 { margin: 1px 0 0; font-family: Georgia,serif; font-size: 19px; font-weight: 500; }
.selection-hint { flex: 1; margin: 0; color: var(--muted); text-align: center; font-size: 9px; }.hand-actions { display: flex; gap: 8px; }.hand-actions .button-primary > b { min-width: 22px; height: 22px; display: grid; place-items: center; color: var(--ink); border-radius: 50%; background: var(--acid); font-size: 9px; }
.hand-scroll { min-height: 150px; display: flex; justify-content: center; align-items: end; padding: 14px 25px 2px; overflow-x: auto; overflow-y: hidden; scrollbar-color: rgba(243,234,216,.25) transparent; }
.playing-card { width: clamp(76px, 7.1vw, 104px); height: clamp(118px, 11vw, 151px); flex: 0 0 auto; position: relative; margin-left: clamp(-27px, -2vw, -16px); padding: 7px; color: var(--ink); border: 1px solid rgba(23,19,15,.28); border-radius: 7px; background: var(--cream); box-shadow: -4px 5px 10px rgba(0,0,0,.2); font-family: Georgia,serif; font-size: clamp(17px,1.8vw,23px); font-weight: 700; transform-origin: bottom center; transition: transform .15s, box-shadow .15s, filter .15s; }
.playing-card:first-child { margin-left: 0; }.playing-card.red { color: var(--red); }.playing-card:not(:disabled):hover { z-index: 4; transform: translateY(-14px) rotate(-1deg); box-shadow: -4px 14px 17px rgba(0,0,0,.3); }.playing-card.selected { z-index: 5; transform: translateY(-28px); box-shadow: 0 0 0 3px var(--acid), -4px 16px 23px rgba(0,0,0,.4); }.playing-card:disabled { filter: grayscale(.55) brightness(.7); cursor: not-allowed; }.playing-card .card-corner { display: grid; line-height: .85; text-align: left; }.playing-card .card-corner span { margin-left: 2px; font-size: .74em; }.playing-card .card-center { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(30px,4vw,52px); font-weight: 400; }.playing-card .card-id { position: absolute; right: 6px; bottom: 6px; transform: rotate(180deg); }

.modal { width: min(900px, calc(100% - 28px)); max-height: min(820px, calc(100vh - 35px)); padding: clamp(27px, 5vw, 52px); overflow: auto; color: var(--ink); border: 0; border-radius: 3px; background-color: var(--paper); background-image: radial-gradient(rgba(23,19,15,.055) .65px, transparent .65px); background-size: 5px 5px; box-shadow: var(--shadow); }
.modal::backdrop { background: rgba(8,6,5,.82); backdrop-filter: blur(6px); }
.modal-close { width: 38px; height: 38px; position: absolute; top: 14px; right: 14px; color: var(--ink); border: 1px solid rgba(23,19,15,.23); background: transparent; font-size: 22px; }
.modal > h2 { margin: 5px 0 27px; font-family: Georgia,serif; font-size: clamp(32px,5vw,54px); line-height: .95; letter-spacing: -.035em; }
.rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 35px; }
.rules-grid article { display: grid; grid-template-columns: 32px 1fr; gap: 11px; padding: 18px 0; border-top: 1px solid rgba(23,19,15,.15); }.rules-grid article > span { width: 29px; height: 29px; display: grid; place-items: center; color: var(--paper); border-radius: 50%; background: var(--ink); font-size: 8px; font-weight: 900; }.rules-grid h3 { margin: 1px 0 5px; font-family: Georgia,serif; font-size: 17px; }.rules-grid p { margin: 0; color: rgba(23,19,15,.63); font-size: 11px; line-height: 1.5; }
.rank-strip { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 23px; padding: 13px; color: var(--paper); background: var(--ink); }.rank-strip span { color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: .12em; }.rank-strip b { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgba(243,234,216,.22); font-family: Georgia,serif; font-size: 11px; }.rank-strip .hot { color: var(--ink); border-color: var(--acid); background: var(--acid); }
.betting-rules { margin-top: 20px; padding: 21px 23px; color: var(--paper); background: var(--ink); text-align: left; }.betting-rules h3 { margin: 4px 0 8px; color: var(--acid); font-family: Georgia,serif; font-size: 20px; }.betting-rules > p:not(.eyebrow) { margin: 0; color: #bcb1a2; font-size: 10px; line-height: 1.55; }.betting-rules ul { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 25px; margin: 15px 0 0; padding: 0; list-style: none; }.betting-rules li { position: relative; padding-left: 15px; color: #d8cdbb; font-size: 9px; line-height: 1.45; }.betting-rules li::before { content: "◆"; position: absolute; left: 0; top: 1px; color: var(--coral); font-size: 7px; }
.action-modal { width: min(760px, calc(100% - 28px)); text-align: center; }
.action-art { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 13px; color: var(--paper); border-radius: 50%; background: var(--coral-deep); font-family: Georgia,serif; font-size: 31px; }.action-modal h2 { margin: 0 0 8px; font-family: Georgia,serif; font-size: clamp(32px,5vw,51px); line-height: 1; }.action-lede { max-width: 540px; margin: 0 auto 24px; color: rgba(23,19,15,.61); font-size: 12px; line-height: 1.55; }
.modal-card-picker { min-height: 160px; display: flex; justify-content: center; align-items: end; padding: 25px 20px 8px; border: 1px solid rgba(23,19,15,.13); background: rgba(255,255,255,.24); overflow-x: auto; }.modal-card-picker .playing-card { width: 89px; height: 132px; margin-left: -24px; }.modal-card-picker .playing-card:first-child { margin-left: 0; }
.action-footer { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }.action-footer .button-quiet { color: var(--ink); border-color: rgba(23,19,15,.26); }.action-footer .button-primary { min-width: 220px; }
.bet-intro { display: flex; justify-content: center; gap: 13px; margin-bottom: 20px; }.bet-intro > span { padding: 7px 10px; border: 1px solid rgba(23,19,15,.18); font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.bet-intro b { color: var(--coral-deep); }
.bet-board-wrap { width: 100%; overflow-x: auto; padding: 2px; }.bet-board { width: 100%; min-width: 590px; border-collapse: collapse; table-layout: fixed; }.bet-board th, .bet-board td { height: 58px; padding: 6px; border: 1px solid rgba(23,19,15,.17); }.bet-board th { font-size: 7px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.bet-board thead th { background: rgba(23,19,15,.06); }.bet-board tbody th { width: 124px; text-align: left; }.bet-cell { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ink); border: 1px solid transparent; background: transparent; font-family: Georgia,serif; font-size: 18px; font-weight: 700; }.bet-cell:not(:disabled):hover { border-color: var(--coral-deep); background: rgba(255,110,97,.1); }.bet-cell.selected { color: var(--paper); background: var(--coral-deep); }.bet-cell:disabled { color: rgba(23,19,15,.23); background: rgba(23,19,15,.035); cursor: not-allowed; }.bet-cell small { display: block; font-family: sans-serif; font-size: 6px; letter-spacing: .06em; }
.result-list { display: grid; gap: 6px; max-width: 520px; margin: 23px auto; text-align: left; }.result-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid rgba(23,19,15,.13); }.result-place { width: 31px; font-family: Georgia,serif; font-size: 18px; }.result-row strong { flex: 1; }.result-role { padding: 5px 8px; background: var(--gold); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.settlement-card { max-width: 620px; margin: 22px auto; padding: 18px; border: 1px solid rgba(23,19,15,.15); background: rgba(255,255,255,.25); text-align: left; }.settlement-card.muted { text-align: center; }.settlement-card.muted h3 { margin: 3px 0 4px; font-family: Georgia,serif; }.settlement-card.muted > p:last-child { margin: 0; color: rgba(23,19,15,.55); font-size: 9px; }.settlement-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }.settlement-heading h3 { max-width: 390px; margin: 3px 0 0; font-family: Georgia,serif; font-size: 16px; line-height: 1.25; }.settlement-totals { display: flex; gap: 6px; }.settlement-totals > span { min-width: 61px; padding: 8px; color: var(--paper); background: var(--ink); text-align: center; }.settlement-totals small, .settlement-totals b { display: block; }.settlement-totals small { color: var(--muted); font-size: 6px; letter-spacing: .09em; }.settlement-totals b { margin-top: 2px; color: var(--acid); font-size: 15px; }.prediction-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 15px 0 0; padding: 0; list-style: none; }.prediction-row { min-width: 0; display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 8px; border: 1px solid rgba(23,19,15,.12); }.prediction-row > span { width: 22px; height: 22px; display: grid; place-items: center; color: var(--paper); border-radius: 50%; background: var(--coral-deep); font-size: 10px; font-weight: 900; }.prediction-row.correct > span { color: var(--ink); background: var(--mint); }.prediction-row div { min-width: 0; }.prediction-row div b, .prediction-row div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.prediction-row div b { font-size: 9px; }.prediction-row div small { margin-top: 2px; color: rgba(23,19,15,.53); font-size: 7px; }.prediction-row > strong { color: var(--coral-deep); font-family: Georgia,serif; font-size: 16px; }.prediction-row.correct > strong { color: #216b4d; }.prediction-row > strong small { font-family: sans-serif; font-size: 6px; }

.toast-region { position: fixed; z-index: 200; right: 18px; bottom: 18px; display: grid; gap: 8px; pointer-events: none; }.toast { max-width: min(380px, calc(100vw - 36px)); display: flex; gap: 11px; padding: 13px 16px; color: var(--ink); background: var(--paper); box-shadow: 0 10px 30px rgba(0,0,0,.35); border-left: 4px solid var(--acid); animation: toast-in .25s ease both; }.toast.error { border-color: var(--coral); }.toast b { display: block; font-size: 11px; }.toast span { display: block; margin-top: 2px; color: rgba(23,19,15,.58); font-size: 9px; line-height: 1.4; }

@keyframes appear { from { opacity: 0; transform: translateY(7px); } }
@keyframes pulse { 50% { opacity: .35; transform: scale(.82); } }
@keyframes toast-in { from { opacity: 0; transform: translateX(18px); } }

@media (max-width: 980px) {
  .entry-view { grid-template-columns: 1fr; max-width: 760px; }
  .hero-copy { text-align: center; }.kicker { justify-content: center; }.hero-copy h1 em { transform: none; }.hero-deck { margin-inline: auto; }.hero-stats { justify-content: center; }
  .entry-card { width: min(530px,100%); margin-inline: auto; }
  .lobby-heading { align-items: center; }.lobby-grid { grid-template-columns: 1fr; }.lobby-side { grid-template-columns: 1fr 1fr; }.host-action { align-self: center; }
  .table-shell { height: 530px; }.player-seat:nth-child(1) { left: 13%; top: 30%; }.player-seat:nth-child(2) { left: 36%; top: 15%; }.player-seat:nth-child(3) { left: 64%; top: 15%; }.player-seat:nth-child(4) { left: 87%; top: 30%; }
  .opponents[data-count="3"] .player-seat:nth-child(1) { left: 18%; top: 25%; }.opponents[data-count="3"] .player-seat:nth-child(2) { left: 50%; top: 13%; }.opponents[data-count="3"] .player-seat:nth-child(3) { left: 82%; top: 25%; }
}

@media (max-width: 700px) {
  .topbar { min-height: 70px; padding: 11px 15px; }.wordmark-seal { width: 42px; height: 42px; }.wordmark-copy small { display: none; }.connection-pill { position: fixed; z-index: 100; left: 50%; bottom: 10px; transform: translateX(-50%); background: rgba(23,19,15,.9); backdrop-filter: blur(5px); }.topbar-actions .button span { display: none; }
  .view { width: min(100% - 26px, 620px); }.entry-view { min-height: auto; gap: 38px; padding: 45px 0 70px; }.hero-copy h1 { font-size: clamp(51px,16vw,76px); }.hero-deck { font-size: 17px; }.hero-stats { gap: 18px; }.hero-stats span { display: none; }.entry-panel { padding: 23px 18px 27px; }.form-heading p { font-size: 10px; }
  .lobby-view { padding: 43px 0 75px; }.lobby-heading { display: grid; }.lobby-heading h1 { font-size: 53px; }.room-ticket { width: min(100%,300px); }.lobby-side { grid-template-columns: 1fr; }
  .game-view { width: 100%; }.game-ribbon { min-height: 63px; }.phase-copy span { display: none; }.phase-copy strong { max-width: 145px; font-size: 13px; }.chip-wallet { padding: 0 8px; }.chip-wallet small { display: none; }.game-ribbon-actions > .icon-button { display: none; }
  .table-shell { height: 435px; padding: 6px 4px 0; }.table-frame { padding: 7px; border-radius: 44% / 12%; }.player-seat { width: 105px; }.player-seat:nth-child(1) { left: 16%; top: 29%; }.player-seat:nth-child(2) { left: 37%; top: 13%; }.player-seat:nth-child(3) { left: 63%; top: 13%; }.player-seat:nth-child(4) { left: 84%; top: 29%; }.seat-avatar { width: 40px; height: 40px; }.seat-name { max-width: 95px; font-size: 8px; }.seat-role { font-size: 6px; }.seat-status { display: none; }.center-stage { top: 59%; width: 70%; }.pile-area { min-height: 135px; }.pile-card { width: 82px; height: 119px; }.empty-pile { width: 125px; height: 120px; }.table-stamp { display: none; }
  .opponents[data-count="3"] .player-seat:nth-child(1) { left: 18%; top: 25%; }.opponents[data-count="3"] .player-seat:nth-child(2) { left: 50%; top: 12%; }.opponents[data-count="3"] .player-seat:nth-child(3) { left: 82%; top: 25%; }
  .hand-dock { min-height: 230px; padding: 9px 11px 46px; }.hand-topline { display: grid; grid-template-columns: 1fr auto; gap: 7px; }.identity-lockup { min-width: 0; }.selection-hint { display: none; }.hand-actions { grid-column: 1/-1; justify-content: stretch; }.hand-actions .button { flex: 1; }.hand-scroll { justify-content: flex-start; padding-inline: 17px; }.playing-card { width: 78px; height: 116px; margin-left: -24px; }
  .rules-grid { grid-template-columns: 1fr; }.rank-strip { overflow-x: auto; justify-content: start; }.rank-strip b { flex: 0 0 26px; }.rank-strip span { flex: 0 0 auto; }.betting-rules ul { grid-template-columns: 1fr; }.modal { padding: 32px 19px 27px; }.modal-card-picker { justify-content: start; }.settlement-heading { align-items: flex-start; }.prediction-list { grid-template-columns: 1fr; }.action-footer { display: grid; }.action-footer .button-primary { min-width: 0; }
}

@media (max-width: 430px) {
  .wordmark-copy b { font-size: 15px; }.topbar-actions .button { display: none; }.hero-stats { justify-content: space-around; }.hero-stats strong { font-size: 26px; }.setting-card { align-items: flex-start; }.setting-card small { max-width: 150px; }.lobby-heading h1 { font-size: 47px; }
  .player-seat:nth-child(1) { left: 18%; top: 30%; }.player-seat:nth-child(2) { left: 39%; top: 13%; }.player-seat:nth-child(3) { left: 61%; top: 13%; }.player-seat:nth-child(4) { left: 82%; top: 30%; }.seat-role { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .opponents[data-count="3"] .player-seat:nth-child(1) { left: 19%; top: 25%; }.opponents[data-count="3"] .player-seat:nth-child(2) { left: 50%; top: 12%; }.opponents[data-count="3"] .player-seat:nth-child(3) { left: 81%; top: 25%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Asshole play-test revisions */
.button-danger { color: #ffd9d5; border-color: rgba(255,110,97,.45); background: rgba(217,68,58,.12); }
.button-danger:hover { color: white; border-color: var(--coral); background: rgba(217,68,58,.28); }
.turn-setting { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 22px; padding: 0; border: 0; }
.turn-setting legend { width: 100%; margin: 0 0 8px; color: rgba(23,19,15,.68); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.turn-setting label { position: relative; }.turn-setting input { position: absolute; opacity: 0; }
.turn-setting span { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid rgba(23,19,15,.18); background: rgba(255,255,255,.2); transition: .16s; }
.turn-setting b { font-family: Georgia,serif; font-size: 23px; }.turn-setting small { color: rgba(23,19,15,.5); font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.turn-setting input:checked + span { color: var(--paper); border-color: var(--ink); background: var(--ink); box-shadow: inset 0 -3px var(--acid); }.turn-setting input:checked + span small { color: var(--acid); }
.turn-setting input:focus-visible + span { outline: 3px solid var(--coral); outline-offset: 2px; }
.turn-clock { width: 52px; height: 52px; display: grid; place-content: center; color: var(--ink); border: 3px solid var(--mint); border-radius: 50%; background: var(--paper); text-align: center; transition: .2s; }
.turn-clock span { font-size: 6px; font-weight: 1000; letter-spacing: .12em; }.turn-clock b { font-family: Georgia,serif; font-size: 20px; line-height: .9; }.turn-clock.mine { border-color: var(--acid); box-shadow: 0 0 0 6px rgba(216,255,107,.12); }.turn-clock.urgent { color: white; border-color: var(--coral); background: var(--coral-deep); animation: urgent-pulse .7s infinite; }
.exchange-recap { min-height: 48px; padding: 6px 11px; color: var(--paper); border: 1px solid rgba(243,234,216,.16); background: rgba(255,255,255,.03); text-align: left; }.exchange-recap small,.exchange-recap b { display:block; }.exchange-recap small { color: var(--mint); font-size: 6px; letter-spacing: .1em; }.exchange-recap b { margin-top: 3px; font-size: 9px; }
.game-view.my-turn .table-frame { box-shadow: 0 0 0 4px var(--acid), 0 0 55px rgba(216,255,107,.28), 0 27px 65px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.18); animation: table-turn-glow 1.4s ease-in-out infinite alternate; }
.game-view.my-turn .turn-banner { padding: 8px 11px; color: var(--ink); background: var(--acid); font-size: 10px; box-shadow: 4px 4px 0 rgba(0,0,0,.18); }
.opponents[data-count="4"] .player-seat.pov-0,.opponents[data-count="5"] .player-seat.pov-0 { left: 50%; top: 87%; }
.opponents[data-count="4"] .player-seat.pov-1 { left: 17%; top: 42%; }.opponents[data-count="4"] .player-seat.pov-2 { left: 50%; top: 13%; }.opponents[data-count="4"] .player-seat.pov-3 { left: 83%; top: 42%; }
.opponents[data-count="5"] .player-seat.pov-1 { left: 14%; top: 55%; }.opponents[data-count="5"] .player-seat.pov-2 { left: 33%; top: 14%; }.opponents[data-count="5"] .player-seat.pov-3 { left: 67%; top: 14%; }.opponents[data-count="5"] .player-seat.pov-4 { left: 86%; top: 55%; }
.player-seat.self .seat-avatar { border-color: var(--blue); box-shadow: 0 0 0 6px rgba(116,185,255,.13),0 7px 20px rgba(0,0,0,.28); }.player-seat.self .seat-name { color: var(--ink); background: var(--blue); }
.player-seat.current { z-index: 8; }.player-seat.current .seat-avatar { animation: current-player 1s ease-in-out infinite alternate; }.player-seat.current .seat-name { color: var(--ink); background: var(--acid); }
.president-elect-badge { padding: 4px 8px; color: var(--ink); background: var(--gold); box-shadow: 3px 3px 0 rgba(0,0,0,.2); font-size: 7px; font-weight: 1000; letter-spacing: .08em; white-space: nowrap; transform: rotate(-2deg); }
.player-seat.next-president .seat-avatar { border-color: var(--gold); box-shadow: 0 0 0 8px rgba(255,200,87,.18),0 7px 20px rgba(0,0,0,.3); }
.last-action-banner { max-width: 370px; display: flex; align-items: center; gap: 8px; margin: -4px auto 8px; padding: 7px 10px; color: white; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.36); box-shadow: 0 5px 16px rgba(0,0,0,.16); font-size: 8px; line-height: 1.25; animation: action-pop .25s ease both; }.last-action-banner > span { color: var(--acid); font-size: 13px; }.last-action-banner.action-finish { color: var(--ink); background: var(--gold); }.last-action-banner.action-finish > span { color: var(--ink); }
.pile-area { width: min(430px,100%); }.pile-combos { width: 100%; display: flex; align-items: center; justify-content: center; gap: 13px; }.pile-combo { min-width: 68px; display: grid; gap: 5px; padding: 7px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; background: rgba(0,0,0,.12); opacity: .55; }.pile-combo.latest { padding: 9px; border-color: rgba(216,255,107,.55); background: rgba(0,0,0,.25); opacity: 1; box-shadow: 0 8px 20px rgba(0,0,0,.18); }.combo-label { color: var(--acid); font-size: 6px; font-weight: 1000; letter-spacing: .13em; text-align: center; }.combo-cards { display: flex; justify-content: center; }.combo-card { width: 38px; height: 55px; display: grid; place-content: center; margin-left: -13px; color: var(--ink); border: 1px solid rgba(23,19,15,.24); border-radius: 4px; background: var(--cream); box-shadow: -2px 3px 7px rgba(0,0,0,.25); font-family: Georgia,serif; font-style: normal; text-align:center; transform: rotate(-2deg); }.combo-card:first-child { margin-left:0; }.combo-card:nth-child(even){transform:rotate(3deg)}.combo-card.red{color:var(--red)}.combo-card b{font-size:14px}.combo-card i{font-size:13px;font-style:normal}
.pile-area.burning .pile-combo.latest { animation: burn-reveal 1.2s ease both; border-color: var(--coral); box-shadow: 0 0 30px rgba(255,110,97,.48); }.pile-area.burning .combo-label { color: var(--coral); }
.president-celebration { position:absolute; z-index:30; inset:0; display:grid; place-content:center; justify-items:center; color:var(--ink); background:radial-gradient(circle,rgba(255,200,87,.96),rgba(255,200,87,.82) 34%,rgba(23,19,15,.15) 70%,transparent); text-align:center; animation:president-arrival .35s ease both; pointer-events:none; }.president-celebration > span{font-size:64px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.22))}.president-celebration small{font-size:9px;font-weight:1000;letter-spacing:.22em}.president-celebration strong{margin-top:5px;font-family:Georgia,serif;font-size:clamp(31px,5vw,54px)}
.exchange-summary { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; max-width:620px; margin:18px auto; padding:16px; border:1px solid rgba(23,19,15,.16); background:rgba(255,255,255,.26); text-align:left; }.exchange-summary > div > small{display:block;margin-bottom:8px;color:rgba(23,19,15,.52);font-size:7px;font-weight:1000;letter-spacing:.13em}.exchange-summary > i{color:var(--coral-deep);font-family:Georgia,serif;font-size:25px;font-style:normal}.exchange-summary.compact{margin:10px auto 16px;padding:10px}.exchange-card{width:39px;height:52px;display:inline-grid;place-content:center;margin-right:5px;color:var(--ink);border:1px solid rgba(23,19,15,.2);border-radius:4px;background:var(--cream);box-shadow:2px 3px 0 rgba(23,19,15,.09);font-family:Georgia,serif;font-size:13px;text-align:center}.exchange-card.red{color:var(--red)}.exchange-none{color:rgba(23,19,15,.4);font-size:9px;font-style:italic}
@keyframes urgent-pulse{50%{transform:scale(.92)}}@keyframes table-turn-glow{to{box-shadow:0 0 0 4px var(--acid),0 0 78px rgba(216,255,107,.4),0 27px 65px rgba(0,0,0,.55)}}@keyframes current-player{to{transform:translateY(-4px);box-shadow:0 0 0 10px rgba(216,255,107,.16),0 10px 25px rgba(0,0,0,.35)}}@keyframes action-pop{from{opacity:0;transform:translateY(-5px)}}@keyframes burn-reveal{0%{transform:scale(.86);opacity:0}35%{transform:scale(1.08);opacity:1}80%{filter:brightness(1)}100%{transform:scale(.94);opacity:.25;filter:brightness(1.8)}}@keyframes president-arrival{from{opacity:0;transform:scale(.82)}}

@media(max-width:700px){
  .topbar-actions #leaveButton{display:inline-flex;min-height:38px;padding-inline:10px;font-size:8px}.topbar-actions #rulesButton{display:none}.turn-clock{width:43px;height:43px}.exchange-recap{display:none}.game-ribbon{gap:8px}.game-ribbon-actions{gap:5px}.table-shell{height:485px}.center-stage{top:53%;width:76%}.player-seat{width:94px}.opponents[data-count="4"] .player-seat.pov-0,.opponents[data-count="5"] .player-seat.pov-0{left:50%;top:88%}.opponents[data-count="4"] .player-seat.pov-1{left:17%;top:39%}.opponents[data-count="4"] .player-seat.pov-2{left:50%;top:10%}.opponents[data-count="4"] .player-seat.pov-3{left:83%;top:39%}.opponents[data-count="5"] .player-seat.pov-1{left:15%;top:51%}.opponents[data-count="5"] .player-seat.pov-2{left:34%;top:9%}.opponents[data-count="5"] .player-seat.pov-3{left:66%;top:9%}.opponents[data-count="5"] .player-seat.pov-4{left:85%;top:51%}.pile-combos{gap:5px}.pile-combo{min-width:52px;padding:4px}.pile-combo:not(.latest){display:none}.combo-card{width:34px;height:48px;margin-left:-12px}.last-action-banner{max-width:280px}.president-elect-badge{font-size:5px}.exchange-summary{grid-template-columns:1fr;gap:8px}.exchange-summary>i{transform:rotate(90deg);text-align:center}
}

/* Purple table redesign */
:root {
  --ink: #241033;
  --ink-soft: #371447;
  --paper: #fff2dc;
  --paper-deep: #f1d8ba;
  --cream: #fff9e9;
  --coral: #ff746f;
  --coral-deep: #8d31c7;
  --acid: #ffd83d;
  --gold: #ffc52d;
  --mint: #75e3b5;
  --blue: #bd78ff;
  --muted: #d2b7d7;
  --red: #e5203f;
}

body {
  background:
    radial-gradient(circle at 50% -20%, rgba(196,83,255,.28), transparent 42rem),
    radial-gradient(circle at 8% 70%, rgba(135,33,168,.26), transparent 30rem),
    linear-gradient(160deg, #21082f 0%, #3a0b48 47%, #190722 100%);
}

.topbar {
  min-height: 82px;
  padding-block: 12px;
  border-bottom: 3px solid rgba(255,216,61,.22);
  background: linear-gradient(180deg,rgba(62,14,77,.98),rgba(34,7,46,.96));
  box-shadow: 0 9px 30px rgba(12,0,20,.28);
}
.wordmark { gap: 15px; }
.wordmark-seal {
  width: 58px;
  height: 58px;
  color: var(--ink);
  border: 4px solid var(--ink);
  background: var(--acid);
  box-shadow: 0 4px 0 #14051d, 0 0 0 3px var(--acid);
  transform: rotate(-7deg);
}
.wordmark-seal::before { display: none; }
.wordmark-seal span { color: var(--ink); font-size: 31px; }
.wordmark-copy b {
  color: var(--acid);
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  font-size: clamp(24px,3vw,39px);
  font-weight: 1000;
  letter-spacing: -.045em;
  text-shadow: 0 5px 0 #16051f, 2px 0 0 #16051f, -2px 0 0 #16051f;
  transform: skew(-4deg);
}
.wordmark-copy small { color: #fff0dc; font-size: 9px; letter-spacing: .1em; }
.topbar .icon-button,.topbar .button-quiet {
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 4px 0 #12041b;
}
.topbar .button-danger { color: #fff; background: #c73768; }
.connection-pill { color: #ffecca; border-color: rgba(255,242,220,.24); background: rgba(20,3,29,.32); }

.game-view { background: linear-gradient(180deg,#250831,#3a0b47 70%,#21062c); }
.game-ribbon {
  min-height: 74px;
  border-bottom: 0;
  background: rgba(36,8,49,.72);
  box-shadow: inset 0 -1px rgba(255,255,255,.08);
}
.round-mark {
  width: auto;
  min-width: 142px;
  height: 51px;
  grid-auto-flow: column;
  align-items: center;
  gap: 8px;
  padding: 0 23px;
  border: 4px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(180deg,#ffe267,#ffc722);
  box-shadow: 0 5px 0 #12041a;
  transform: none;
}
.round-mark small { font-size: 10px; }
.round-mark b { font-family: inherit; font-size: 20px; font-weight: 1000; }
.phase-copy span { color: #df9cff; }
.phase-copy strong { color: #fff4de; font-family: inherit; font-size: 15px; font-weight: 900; }
.chip-wallet,.exchange-recap {
  border: 2px solid rgba(255,238,213,.72);
  border-radius: 999px;
  background: rgba(22,3,31,.38);
}
.turn-clock { border: 4px solid var(--ink); box-shadow: 0 4px 0 #12041a; }

.table-shell {
  height: clamp(570px,64vh,730px);
  padding: 25px clamp(16px,3vw,48px) 12px;
  overflow: hidden;
  background-image:
    radial-gradient(circle at 10% 25%,rgba(213,114,255,.12) 0 3px,transparent 4px),
    radial-gradient(circle at 91% 66%,rgba(213,114,255,.12) 0 3px,transparent 4px);
  background-size: 92px 92px,120px 120px;
}
.table-frame {
  max-width: 1500px;
  padding: 16px;
  border: 5px solid #1e0829;
  border-radius: 49% / 19%;
  background: linear-gradient(145deg,#b33fb4,#5e176f 38%,#c34db7 70%,#481057);
  box-shadow: 0 22px 0 #16051f, 0 32px 60px rgba(10,0,16,.52), inset 0 3px rgba(255,255,255,.22);
}
.felt-table {
  border: 4px solid #421050;
  background-color: #077f69;
  background-image:
    radial-gradient(circle at 50% 47%,rgba(47,236,193,.18),transparent 44%),
    radial-gradient(rgba(255,255,255,.08) .7px,transparent .8px);
  background-size: auto,7px 7px;
  box-shadow: inset 0 0 85px rgba(0,34,30,.48), inset 0 0 0 4px rgba(255,255,255,.08);
}
.felt-table::after { inset: 8%; border: 2px solid rgba(212,255,241,.16); }
.table-stamp { color: rgba(255,255,255,.09); border-color: rgba(255,255,255,.09); }
.game-view.my-turn .table-frame {
  box-shadow: 0 0 0 5px var(--acid),0 0 50px rgba(255,216,61,.45),0 22px 0 #16051f,0 32px 60px rgba(10,0,16,.52);
  animation: purple-table-turn 1.1s ease-in-out infinite alternate;
}

.player-seat { width: clamp(190px,18vw,270px); gap: 7px; }
.seat-panel {
  width: 100%;
  min-height: 84px;
  display: grid;
  grid-template-columns: 68px minmax(0,1fr) 53px;
  align-items: center;
  position: relative;
  padding: 8px 8px 8px 40px;
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: 50px 18px 18px 50px;
  background: linear-gradient(135deg,#fffaf0,#ffeace);
  box-shadow: 0 8px 0 rgba(25,5,34,.78),0 12px 25px rgba(13,0,20,.3);
}
.seat-avatar {
  width: 82px;
  height: 82px;
  position: absolute;
  left: -32px;
  top: 50%;
  color: var(--ink);
  border: 4px solid var(--ink);
  background: #ff7975;
  box-shadow: 0 5px 0 rgba(25,5,34,.75);
  transform: translateY(-50%);
}
.seat-avatar-symbol { font-size: 32px; line-height: 1; }
.role-president .seat-avatar { background: linear-gradient(145deg,#ffe664,#ffbe24); }
.role-vicepresident .seat-avatar { background: linear-gradient(145deg,#d998ff,#a64dea); }
.role-middle .seat-avatar { background: linear-gradient(145deg,#8cf0c8,#4fd397); }
.role-viceasshole .seat-avatar { background: linear-gradient(145deg,#ff998f,#ff6966); }
.role-asshole .seat-avatar { background: linear-gradient(145deg,#dd9bff,#9844d1); }
.seat-cards { right: -7px; bottom: -6px; min-width: 30px; height: 24px; border: 3px solid var(--ink); background: var(--cream); font-size: 10px; }
.seat-copy { min-width: 0; display: grid; justify-items: start; align-content: center; gap: 3px; }
.seat-name { max-width: 100%; padding: 0; color: var(--ink); background: transparent; font-size: clamp(13px,1.15vw,18px); font-weight: 1000; }
.seat-role { padding: 3px 12px; border-radius: 999px; box-shadow: none; background: var(--gold); font-size: 8px; letter-spacing: .04em; transform: none; }
.role-vicepresident .seat-role,.role-asshole .seat-role { background: #d488ff; }
.role-middle .seat-role { background: #72e0b0; }
.role-viceasshole .seat-role { background: #ff7f79; }
.seat-meta { font-size: 9px; font-weight: 900; }
.seat-status { max-width: 100%; overflow: hidden; color: #775a7a; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.seat-card-fan { width: 52px; height: 56px; position: relative; display: block; }
.seat-card-fan i { width: 36px; height: 51px; position: absolute; top: 1px; left: 7px; border: 3px solid var(--cream); border-radius: 6px; background: repeating-linear-gradient(45deg,#70309a 0 6px,#51216f 6px 12px); box-shadow: 0 0 0 2px var(--ink); transform-origin: bottom center; }
.seat-card-fan i:first-child { transform: rotate(-13deg) translateX(-7px); }.seat-card-fan i:last-child { transform: rotate(13deg) translateX(7px); }
.player-seat.self .seat-panel { border-color: var(--acid); box-shadow: 0 0 0 4px var(--ink),0 8px 0 rgba(25,5,34,.78); }
.player-seat.self .seat-avatar { border-color: var(--ink); box-shadow: 0 5px 0 rgba(25,5,34,.75); }
.player-seat.self .seat-name { color: #5c1680; background: transparent; }
.player-seat.current { z-index: 12; }
.player-seat.current .seat-avatar { color: var(--ink); border-color: var(--ink); background: var(--acid); animation: none; }
.player-seat.current .seat-panel { animation: seat-panel-turn .75s ease-in-out infinite alternate; }
.player-seat.current .seat-name { color: var(--ink); background: transparent; }
.player-seat.current .seat-status { color: #6a275c; }
.seat-turn-badge,.president-elect-badge {
  padding: 6px 14px;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--acid);
  box-shadow: 0 4px 0 rgba(20,3,29,.8);
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .08em;
  white-space: nowrap;
}
.president-elect-badge { background: #ffe46a; transform: none; }
.opponents[data-count="4"] .player-seat.pov-0,.opponents[data-count="5"] .player-seat.pov-0 { left:50%;top:86%; }
.opponents[data-count="4"] .player-seat.pov-1 { left:16%;top:45%; }.opponents[data-count="4"] .player-seat.pov-2 { left:50%;top:13%; }.opponents[data-count="4"] .player-seat.pov-3 { left:84%;top:45%; }
.opponents[data-count="5"] .player-seat.pov-1 { left:15%;top:55%; }.opponents[data-count="5"] .player-seat.pov-2 { left:33%;top:14%; }.opponents[data-count="5"] .player-seat.pov-3 { left:67%;top:14%; }.opponents[data-count="5"] .player-seat.pov-4 { left:85%;top:55%; }

.center-stage { top:52%; width:min(520px,45%); }
.turn-banner {
  width: auto;
  min-width: 260px;
  justify-content: center;
  margin-bottom: 9px;
  padding: 7px 18px;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 5px 0 rgba(21,3,28,.6);
  font-size: 9px;
}
.turn-banner span { display: none; }
.game-view.my-turn .turn-banner { padding: 8px 20px; color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; background: var(--acid); box-shadow: 0 5px 0 rgba(21,3,28,.7); }
.last-action-banner {
  max-width: 480px;
  margin: 0 auto 10px;
  padding: 9px 15px;
  color: #241033;
  border: 3px solid #241033;
  border-radius: 999px;
  background: #fff2dc;
  box-shadow: 0 5px 0 rgba(23,3,31,.72),0 10px 22px rgba(10,0,15,.24);
  font-size: 11px;
  line-height: 1.3;
}
.last-action-banner > span { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 24px; color: var(--ink); border-radius: 50%; background: var(--acid); font-size: 14px; }
.last-action-banner.action-finish { color: var(--ink); background: var(--gold); }

.pile-area { width:min(450px,100%); min-height:200px; }
.pile-stack { width:260px; height:178px; position:relative; }
.pile-layer {
  position:absolute;
  z-index:var(--stack-index);
  left:50%;
  top:38%;
  display:grid;
  justify-items:center;
  transform:translate(-50%,-50%) translate(var(--stack-x),var(--stack-y)) rotate(var(--stack-rotate));
  filter:saturate(.82) brightness(.88);
}
.pile-layer.latest { z-index:100; filter:none; }
.pile-layer .combo-label { display:none; }
.pile-layer.latest .combo-label {
  display:block;
  position:absolute;
  z-index:5;
  top:-35px;
  padding:6px 15px;
  color:var(--ink);
  border:3px solid var(--ink);
  border-radius:999px;
  background:var(--paper);
  box-shadow:0 4px 0 rgba(20,3,29,.65);
  font-size:9px;
}
.combo-cards { display:flex; justify-content:center; }
.combo-card {
  width:74px;
  height:104px;
  margin-left:-43px;
  border:3px solid var(--ink);
  border-radius:10px;
  background:var(--cream);
  box-shadow:-5px 7px 0 rgba(25,5,34,.42);
}
.combo-card:first-child { margin-left:0; }
.combo-card b { font-size:25px; }.combo-card i { font-size:28px; }
.pile-layer.latest .combo-card { box-shadow:-5px 8px 0 rgba(25,5,34,.64); }
.pile-area.burning .pile-layer.latest { animation:purple-burn-reveal 1.2s ease both; }
.pile-area.burning .pile-layer.latest .combo-label { color:#fff; background:#e23d68; }
.pile-meta { margin-top:-7px; color:#f8ffe8; font-size:9px; text-shadow:0 2px 4px rgba(0,0,0,.5); }
.empty-pile { color:rgba(255,255,255,.72); border:3px dashed rgba(255,255,255,.4); border-radius:18px; }

.hand-dock {
  min-height:244px;
  margin:0 12px 12px;
  padding:15px clamp(18px,3vw,48px) 13px;
  border:4px solid #2a0b39;
  border-radius:28px;
  background:linear-gradient(180deg,#9b38a3,#652176);
  box-shadow:inset 0 2px rgba(255,255,255,.18),0 12px 30px rgba(9,0,14,.35);
}
.hand-topline { min-height:62px; }
.identity-lockup { color:var(--cream); }
.role-medal { border:3px solid var(--ink); background:var(--gold); box-shadow:0 4px 0 rgba(25,5,34,.55); }
.identity-lockup small { color:#f2caef; }.identity-lockup h2 { font-family:inherit; font-weight:1000; }
.selection-hint { color:#fff5db; font-size:11px; font-weight:800; }
.hand-actions { align-items:stretch; }
.hand-actions .button,.burn-button {
  min-height:55px;
  padding:0 24px;
  border:3px solid var(--ink);
  border-radius:16px;
  box-shadow:0 6px 0 #2a0b39;
  font-size:12px;
}
.hand-actions .button-primary { color:var(--ink); background:linear-gradient(180deg,#ffe55f,#ffc625); }
.hand-actions .button-primary:not(:disabled):hover { background:#ffe46b; }
.hand-actions .button-quiet { color:var(--ink); background:var(--paper); }
.burn-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#fff;
  border-color:var(--ink);
  background:linear-gradient(180deg,#f05372,#ca2f5c);
  font-weight:1000;
  text-transform:uppercase;
  animation:burn-button-ready .8s ease-in-out infinite alternate;
}
.burn-button > span { font-size:22px; }.burn-button > b,.burn-button > small { display:block; }.burn-button > small { font-size:7px; opacity:.82; }
.hand-scroll { min-height:157px; padding-top:16px; }
.playing-card {
  border:3px solid var(--ink);
  border-radius:12px;
  background:linear-gradient(145deg,#fffdf5,#fff0d6);
  box-shadow:-5px 7px 0 rgba(37,7,48,.7);
}
.playing-card:not(:disabled):hover { box-shadow:-5px 14px 0 rgba(37,7,48,.72); }
.playing-card.selected { box-shadow:0 0 0 5px var(--acid),-5px 16px 0 rgba(37,7,48,.8); }
.playing-card:disabled { filter:saturate(.65) brightness(.78); }
.toast { color:var(--ink); border:3px solid var(--ink); border-left:9px solid var(--acid); border-radius:13px; background:var(--paper); box-shadow:0 8px 0 rgba(26,4,35,.72); }
.toast span { color:#614a65; }

@keyframes purple-table-turn { to { box-shadow:0 0 0 5px var(--acid),0 0 75px rgba(255,216,61,.65),0 22px 0 #16051f,0 32px 60px rgba(10,0,16,.52); } }
@keyframes seat-panel-turn { to { transform:translateY(-3px); filter:drop-shadow(0 0 10px rgba(255,216,61,.45)); } }
@keyframes purple-burn-reveal { 0% { opacity:0; transform:translate(-50%,-50%) scale(.65); } 35% { opacity:1; transform:translate(-50%,-50%) scale(1.12); } 100% { opacity:.3; transform:translate(-50%,-50%) scale(.9) rotate(8deg); filter:brightness(1.8); } }
@keyframes burn-button-ready { to { transform:translateY(-2px); box-shadow:0 8px 0 #2a0b39,0 0 22px rgba(255,92,112,.42); } }

@media (max-width: 900px) {
  .player-seat { width:180px; }
  .seat-panel { min-height:68px; grid-template-columns:48px minmax(0,1fr); padding:6px 7px 6px 30px; }
  .seat-avatar { width:64px; height:64px; left:-27px; }.seat-avatar-symbol{font-size:25px}.seat-card-fan{display:none}.seat-name{font-size:12px}.seat-role{font-size:6px}.seat-meta{font-size:7px}.seat-status{display:none}
  .center-stage{width:min(430px,48%)}
}

@media (max-width: 700px) {
  .topbar { min-height:66px; }.wordmark-seal{width:43px;height:43px}.wordmark-seal span{font-size:23px}.wordmark-copy b{font-size:22px}.wordmark-copy small{display:none}
  .game-ribbon{min-height:68px;padding-inline:10px}.round-mark{min-width:82px;height:44px;padding:0 12px;border-width:3px}.round-mark small{font-size:7px}.round-mark b{font-size:16px}.phase-copy strong{max-width:125px;font-size:11px}
  .table-shell{height:520px;padding:13px 6px 9px}.table-frame{padding:8px;border-width:3px;border-radius:44% / 12%}.felt-table{border-width:2px}
  .player-seat{width:128px}.seat-panel{min-height:55px;grid-template-columns:36px minmax(0,1fr);padding:5px 5px 5px 24px;border-width:2px;border-radius:35px 11px 11px 35px}.seat-avatar{width:51px;height:51px;left:-22px;border-width:2px}.seat-avatar-symbol{font-size:19px}.seat-cards{right:-5px;bottom:-5px;min-width:23px;height:19px;border-width:2px;font-size:8px}.seat-name{font-size:9px}.seat-role{padding:2px 7px;font-size:5px}.seat-meta{font-size:6px}.seat-turn-badge,.president-elect-badge{padding:4px 8px;border-width:2px;font-size:5px}
  .opponents[data-count="4"] .player-seat.pov-0,.opponents[data-count="5"] .player-seat.pov-0{top:88%}.opponents[data-count="4"] .player-seat.pov-1{left:16%;top:40%}.opponents[data-count="4"] .player-seat.pov-2{top:10%}.opponents[data-count="4"] .player-seat.pov-3{left:84%;top:40%}.opponents[data-count="5"] .player-seat.pov-1{left:16%;top:49%}.opponents[data-count="5"] .player-seat.pov-2{left:35%;top:9%}.opponents[data-count="5"] .player-seat.pov-3{left:65%;top:9%}.opponents[data-count="5"] .player-seat.pov-4{left:84%;top:49%}
  .center-stage{top:52%;width:72%}.turn-banner{min-width:0;width:auto;padding:6px 12px;font-size:7px}.last-action-banner{max-width:280px;padding:6px 10px;font-size:8px}.last-action-banner>span{width:19px;height:19px;flex-basis:19px;font-size:11px}
  .pile-area{min-height:162px}.pile-stack{width:190px;height:140px}.combo-card{width:52px;height:75px;margin-left:-31px;border-width:2px}.combo-card b{font-size:18px}.combo-card i{font-size:20px}.pile-layer.latest .combo-label{top:-27px;padding:4px 10px;border-width:2px;font-size:6px}.pile-meta{font-size:7px}
  .hand-dock{min-height:244px;margin:0 5px 7px;padding:10px 9px 42px;border-radius:20px}.hand-topline{grid-template-columns:1fr;gap:8px}.identity-lockup{display:none}.hand-actions{grid-column:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.hand-actions .burn-button:not([hidden]){grid-column:1/-1}.hand-actions .button,.burn-button{min-height:48px;padding:0 10px;border-radius:12px;font-size:9px}.selection-hint{display:block;grid-row:1;font-size:8px}.hand-scroll{padding-inline:18px}.playing-card{border-width:2px;border-radius:9px}
}

@media (max-width: 430px) {
  .topbar-actions .button-danger{display:inline-flex}.connection-pill{display:none}.game-ribbon-actions .chip-wallet{display:none}
  .player-seat{width:112px}.seat-panel{grid-template-columns:31px minmax(0,1fr)}.seat-avatar{width:46px;height:46px}.seat-name{font-size:8px}.seat-meta{font-size:5px}
  .center-stage{width:78%}.last-action-banner{max-width:245px}.combo-card{width:48px;height:69px;margin-left:-29px}
}