:root {
  color-scheme: light;
  --ink: #16201b;
  --muted: #66736d;
  --line: #d8e0dc;
  --surface: #ffffff;
  --page: #f6f3ee;
  --felt: #176a50;
  --felt-dark: #0d4638;
  --red: #b83232;
  --gold: #c98924;
  --blue: #2f5b9a;
  --shadow: 0 14px 38px rgba(16, 32, 25, 0.14);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    linear-gradient(120deg, rgba(23, 106, 80, 0.11), transparent 34%),
    linear-gradient(300deg, rgba(201, 137, 36, 0.13), transparent 36%),
    var(--page);
}

button,
input,
select {
  font: inherit;
}

button,
input,
select,
textarea {
  max-width: 100%;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bot-trap {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.shell {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 28px;
}

.auth-panel {
  min-height: calc(100vh - 56px);
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 390px;
  align-items: center;
  gap: 48px;
}

.auth-panel h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(42px, 6vw, 86px);
  line-height: 0.96;
}

.auth-subtitle {
  max-width: 680px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 800;
  line-height: 1.35;
}

.auth-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 760px;
  margin-bottom: 10px;
}

.auth-hero-top .eyebrow {
  margin: 0;
}

.auth-hero-top .language-select {
  min-width: 86px;
  background: rgba(255, 255, 255, 0.9);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--felt);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.auth-card,
.panel,
.table-panel {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.registration-options {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(23, 106, 80, 0.06);
  overflow: hidden;
  min-width: 0;
}

.field-label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-weight: 800;
}

.gender-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.gender-choice {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 76px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #101d22;
}

.gender-radio {
  width: 30px;
  aspect-ratio: 1;
  border: 4px solid #62bc6b;
  border-radius: 50%;
}

.gender-choice.active .gender-radio {
  background: #62bc6b;
  box-shadow: inset 0 0 0 5px #101d22;
}

.gender-symbol {
  font-size: clamp(2.15rem, 5vw, 2.75rem);
  line-height: 1;
  opacity: 0.9;
}

.avatar-choice-grid {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.avatar-carousel {
  display: grid;
  grid-template-columns: minmax(54px, 72px) minmax(96px, 1fr) minmax(54px, 72px);
  gap: 12px;
  align-items: center;
  justify-items: center;
  max-width: 360px;
  margin: 0 auto;
}

.avatar-step {
  display: grid;
  width: 64px;
  aspect-ratio: 1;
  place-items: center;
  border: 3px solid #7f91d9;
  border-radius: 50%;
  color: #d6a846;
  background: #707991;
  font-size: 3.1rem;
  line-height: 1;
}

.avatar.register-preview {
  width: 112px;
  font-size: 2.6rem;
  border-width: 6px;
}

.avatar-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.avatar-choice {
  display: grid;
  width: 48px;
  min-height: 42px;
  place-items: center;
  padding: 4px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}

.avatar-choice.selected {
  border-color: var(--gold);
  background: #fff8e8;
}

.auth-card,
.panel {
  padding: 18px;
}

.public-tables-panel {
  margin-top: 28px;
  padding: 16px;
  border: 1px solid rgba(216, 224, 220, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow);
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}

.tab,
.ghost {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
}

.tab.active {
  border-color: var(--felt);
  color: #fff;
  background: var(--felt);
}

.ghost.active-nav {
  border-color: var(--felt);
  color: #fff;
  background: var(--felt);
}

.sound-toggle {
  display: none;
  width: 44px;
  min-width: 44px;
  padding: 0;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #edf4f0);
}

.sound-icon {
  font-size: 1.2rem;
  line-height: 1;
}

label {
  display: grid;
  gap: 7px;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

input,
select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
}

.primary {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-weight: 800;
  background: var(--felt);
}

.danger {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(179, 46, 46, 0.38);
  border-radius: 8px;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(#e76666, #b73737);
}

.primary:disabled,
.danger:disabled,
.card:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.message {
  min-height: 20px;
  margin: 12px 0 0;
  color: var(--red);
  font-weight: 700;
}

.app {
  display: grid;
  gap: 20px;
}

.topbar,
.panel-title,
.userbar,
.room-head,
.status-row,
.scoreboard,
.trick,
.players {
  display: flex;
  align-items: center;
}

.topbar {
  justify-content: space-between;
  gap: 16px;
}

.topbar h1,
.panel h2,
.table-panel h2 {
  margin: 0;
}

.userbar {
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.language-select {
  width: auto;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
}

.language-flag-select {
  min-width: 86px;
  max-width: 96px;
  font-weight: 800;
}

#currentUser {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.avatar {
  width: 42px;
  aspect-ratio: 1;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.22), transparent 38%),
    var(--felt);
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.14);
  font-size: 0.82rem;
  font-weight: 900;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar.small {
  width: 36px;
}

.avatar.tiny {
  width: 32px;
  border-width: 1px;
  font-size: 0.72rem;
}

.avatar.large {
  width: 96px;
  border-color: #fff;
  font-size: 1.25rem;
}

.coin-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(201, 137, 36, 0.42);
  border-radius: 999px;
  color: #5b3a0a;
  background: #fff3d6;
  font-size: 0.82rem;
  font-weight: 900;
}

.coin-badge-button {
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.coin-badge-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(201, 137, 36, 0.16);
}

.layout {
  display: grid;
  grid-template-columns: minmax(360px, 420px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.layout.table-focus {
  grid-template-columns: minmax(0, 1fr);
}

.layout.table-focus .side {
  display: none;
}

.layout.table-focus .table-panel {
  width: min(1040px, 100%);
  margin: 0 auto;
}

.side {
  display: grid;
  gap: 16px;
}

.panel-title {
  justify-content: space-between;
  gap: 8px;
}

.small {
  min-height: 34px;
  padding: 0 12px;
}

.rooms,
.history {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.lobby-actions-panel {
  display: grid;
  gap: 12px;
}

.lobby-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lobby-actions .primary,
.lobby-actions .ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 900;
}

.action-icon {
  display: inline-grid;
  width: 30px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: var(--felt);
  background: #fff;
  font-size: 0.95rem;
  line-height: 1;
}

.cards-icon {
  color: #4f7f53;
  font-size: 1.35rem;
}

.mobile-bottom-nav {
  display: none;
}

.create-room-panel {
  position: relative;
  overflow: hidden;
}

.close-create-button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: auto;
}

.deck-color-field {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.deck-color-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.deck-color-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
}

.deck-color-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
}

.deck-color-option::before {
  content: "";
  width: 26px;
  flex: 0 0 auto;
  aspect-ratio: 1;
  border: 3px solid #62bc6b;
  border-radius: 50%;
}

.deck-color-option:has(input:checked)::before {
  background: #62bc6b;
  box-shadow: inset 0 0 0 5px #fff;
}

.deck-color-option span {
  display: block;
  width: min(54px, 100%);
  height: 30px;
  border-radius: 999px;
}

.deck-color-option.green span {
  background: #9ed165;
}

.deck-color-option.red span {
  background: #f05050;
}

.deck-color-option.blue span {
  background: #187aa0;
}

.open-table-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.table-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.table-filters label {
  margin: 0;
}

.open-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.open-table-main,
.open-table-creator,
.open-table-players {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.open-table-main {
  grid-column: 1;
}

.open-table-creator {
  grid-column: 1;
}

.open-table-players {
  grid-column: 1;
}

.open-table-main strong,
.open-table-creator strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bet-pill {
  justify-self: start;
  padding: 3px 8px;
  border-radius: 8px;
  color: #4a391f;
  background: #fff3d6;
  font-size: 0.78rem;
  font-weight: 900;
}

.slot-row {
  display: flex;
  gap: 4px;
}

.slot {
  width: 14px;
  height: 26px;
  border-radius: 4px;
  background: #a7acbd;
}

.slot.filled {
  background: #62bc6b;
}

.open-table-join {
  grid-column: 2;
  grid-row: 1 / span 3;
  width: auto;
  min-width: 92px;
  padding-inline: 16px;
}

.public-join-note {
  text-align: right;
}

.open-table-list.compact .open-table-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.open-table-list.compact .open-table-creator,
.open-table-list.compact .public-join-note {
  display: none;
}

.room {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.room button {
  width: auto;
  justify-self: start;
  padding: 0 14px;
}

.meta {
  color: var(--muted);
  font-size: 0.86rem;
}

.table-panel {
  min-height: calc(100vh - 150px);
  padding: 20px;
  overflow: hidden;
}

.profile-view {
  display: grid;
  min-height: calc(100vh - 150px);
  place-items: start center;
}

.support-view {
  min-height: calc(100vh - 150px);
}

.profile-panel {
  width: min(560px, 100%);
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
}

.deposit-panel {
  margin-top: 18px;
}

.profile-stats-panel {
  margin-top: 18px;
}

.profile-stats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.profile-preview.compact {
  margin-bottom: 0;
}

.status-online {
  color: var(--green);
  font-weight: 900;
}

.appreciation-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 76px;
  min-height: 44px;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, #62bc6b, #3f9550);
  font-weight: 900;
}

.profile-stat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.profile-stat-grid span,
.profile-stat-grid strong {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.profile-stat-grid span:nth-last-child(2),
.profile-stat-grid strong:last-child {
  border-bottom: 0;
}

.profile-stat-grid span {
  color: var(--muted);
  background: rgba(16, 54, 46, 0.04);
  font-weight: 800;
}

.profile-stat-grid strong {
  min-width: 100px;
  text-align: right;
  color: var(--green);
}

.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.profile-badges span {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(16, 54, 46, 0.08);
  color: var(--muted);
  font-weight: 800;
}

.deposit-form {
  margin-top: 18px;
}

.deposit-form textarea {
  min-height: 88px;
  resize: vertical;
}

.support-ticket {
  display: grid;
  gap: 12px;
}

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

.support-replies {
  display: grid;
  gap: 8px;
}

.support-reply {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 54, 46, 0.04);
}

.support-reply.admin-reply {
  border-color: rgba(201, 137, 36, 0.34);
  background: #fff3d6;
}

.support-reply-form {
  display: grid;
  gap: 8px;
}

.support-reply-form textarea {
  min-height: 76px;
  resize: vertical;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(16, 54, 46, 0.1);
  color: var(--green);
  font-size: 0.8rem;
  font-weight: 900;
}

.status-pill.pending {
  color: #7a4f06;
  background: #fff3d6;
}

.status-pill.closed {
  color: #6b7170;
  background: #eef2f1;
}

.deposit-quote {
  min-height: 38px;
  display: grid;
  align-items: center;
  margin: 0 0 14px;
  padding: 9px 11px;
  border: 1px solid rgba(201, 137, 36, 0.32);
  border-radius: 8px;
  color: #5b3a0a;
  background: #fff3d6;
  font-weight: 900;
}

.invoice-link {
  color: var(--blue);
  font-weight: 900;
}

.copy-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin: 10px 0;
}

.copy-line input {
  min-height: 40px;
  font-weight: 800;
}

.referral-summary-card {
  border-color: rgba(201, 137, 36, 0.35);
  background: #fff8e7;
}

.profile-preview,
.profile-actions,
.player-row {
  display: flex;
  align-items: center;
}

.profile-preview {
  gap: 16px;
  margin-bottom: 20px;
}

.profile-preview h2 {
  margin: 0;
}

.profile-actions {
  gap: 10px;
}

.profile-actions .primary,
.profile-actions .ghost {
  width: auto;
  min-width: 150px;
  padding: 0 16px;
}

.empty-state {
  display: grid;
  min-height: 460px;
  place-content: center;
  text-align: center;
  color: var(--muted);
}

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

.room-head {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.room-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.game-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0;
  overflow: visible;
  border-radius: 8px;
  color: #fff;
  background: rgba(13, 24, 33, 0.96);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.game-header-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 24;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border-left: 0;
  background: transparent;
}

.game-header-main {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 8px 12px;
  font-weight: 900;
  overflow: hidden;
}

.game-header-time,
.game-header-table {
  flex: 0 0 auto;
  line-height: 1.05;
  white-space: nowrap;
}

.game-header-main .trump-badge {
  flex: 0 0 auto;
}

.game-header-contract {
  display: inline-flex;
  align-items: center;
  max-width: min(240px, 32vw);
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.78rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-header-contract.red {
  color: #ffd1d1;
}

.trump-badge,
.suit-tile {
  display: inline-grid;
  width: 34px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 8px;
  color: #20272a;
  background: #fff;
  font-size: 1.2rem;
  line-height: 1;
}

.trump-badge.red,
.suit-tile.red {
  color: var(--red);
}

.mini-score-board {
  position: relative;
  z-index: 3;
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: end;
  width: min(292px, 48%);
  min-width: 180px;
  min-height: 38px;
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(60px, 1fr));
  gap: 0;
  align-content: start;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.54);
  box-shadow: none;
}

.mini-score-board.open {
  position: relative;
  right: auto;
  top: auto;
  z-index: 22;
  width: min(320px, 56vw);
  max-height: 260px;
  margin-top: 0;
  min-width: 0;
  overflow-y: auto;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}

.mini-score-board .score-head,
.mini-score-board .score-line {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(60px, 1fr));
}

.mini-score-board b {
  padding: 5px 10px;
  text-align: center;
}

.mini-score-board .score-head b {
  color: rgba(255, 255, 255, 0.78);
  background: rgba(28, 43, 55, 0.9);
}

.mini-score-board .score-line:nth-child(odd) b {
  background: rgba(255, 255, 255, 0.08);
}

.score-caret {
  grid-column: 1 / -1;
  margin: -3px auto 2px;
  color: #fff;
  font-size: 0.85rem;
}

.status-row {
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  color: #fff;
  background: var(--felt-dark);
}

.contract-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 -4px;
  padding: 10px 12px;
  border: 1px solid rgba(201, 137, 36, 0.38);
  border-radius: 8px;
  color: #5b3a0a;
  background: #fff3d6;
  font-weight: 900;
}

.contract-strip span {
  color: #6b5b40;
  font-size: 0.9rem;
}

.contract-strip strong {
  color: var(--ink);
  font-size: 1rem;
}

.match-panel {
  display: grid;
  gap: 10px;
  margin: 10px 0 -4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow);
}

.match-head,
.match-totals,
.match-row {
  display: flex;
  align-items: center;
}

.match-head {
  justify-content: space-between;
  gap: 12px;
}

.match-head span,
.match-row span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.match-totals {
  flex-wrap: wrap;
  gap: 8px;
}

.match-totals .score {
  color: #fff;
  background: var(--felt-dark);
}

.match-rows {
  display: grid;
  gap: 6px;
}

.match-row {
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 8px;
  background: #f6f7f4;
}

.table-chat {
  display: grid;
  gap: 10px;
  margin: 10px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.emoji-row,
.table-chat-form,
.admin-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.emoji-button {
  width: 36px;
  min-width: 36px;
  padding: 0;
  font-size: 1rem;
}

.gift-open-button {
  width: auto;
  padding-inline: 14px;
}

.voice-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(16, 115, 82, 0.18);
  border-radius: 8px;
  background: rgba(16, 115, 82, 0.06);
}

.voice-panel p {
  margin: 4px 0 0;
}

.voice-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.voice-audio {
  display: none;
}

.gift-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0.5);
}

.gift-popup {
  display: grid;
  gap: 12px;
  width: min(760px, 100%);
  max-height: min(720px, 88vh);
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(12, 16, 20, 0.96);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.gift-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
}

.gift-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  max-height: 260px;
  overflow: auto;
  padding: 2px 2px 6px;
}

.gift-card {
  display: grid;
  gap: 6px;
  justify-items: center;
  min-height: 154px;
  padding: 10px;
  border: 1px solid rgba(22, 29, 34, 0.12);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 247, 244, 0.96));
  text-align: center;
}

.gift-card strong {
  font-size: 0.9rem;
  line-height: 1.1;
}

.gift-card span {
  color: var(--ink);
  font-weight: 900;
}

.gift-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 58px;
  font-size: 2.35rem;
  filter: drop-shadow(0 8px 7px rgba(0, 0, 0, 0.2));
}

button.success {
  color: #ffffff;
  border-color: #4aa953;
  background: linear-gradient(180deg, #7dd36f, #45a44f);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.table-chat-history {
  max-height: 180px;
  overflow: auto;
}

.chat-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}

.chat-line strong,
.chat-line small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.chat-line span {
  overflow-wrap: anywhere;
}

.gift-message {
  border-radius: 8px;
  padding: 8px;
  background: rgba(75, 166, 83, 0.12);
}

.gift-message b {
  display: inline-block;
  margin-right: 4px;
  font-size: 1.25rem;
  vertical-align: -2px;
}

.chat-line small {
  color: var(--muted);
  font-weight: 800;
}

.table-chat-form input {
  flex: 1;
  min-width: 180px;
}

.table-chat-form button {
  width: auto;
  min-width: 118px;
  flex: 0 0 auto;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  gap: 18px;
  align-items: start;
}

.admin-history {
  max-height: 650px;
  overflow: auto;
}

.admin-user {
  display: grid;
  gap: 10px;
}

.admin-actions {
  flex-wrap: wrap;
}

.admin-actions input {
  width: 120px;
  min-height: 34px;
}

.admin-user-detail {
  margin-top: 12px;
}

.admin-user-detail h3 {
  margin: 14px 0 8px;
  font-size: 0.95rem;
}

.mini-row {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.mini-row span {
  color: var(--muted);
  font-size: 0.86rem;
}

.replay-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 26px 0 50px;
}

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

.replay-home {
  display: inline-grid;
  place-items: center;
  min-height: 44px;
  padding: 0 16px;
  text-decoration: none;
}

.replay-page {
  display: grid;
  gap: 18px;
}

.replay-board {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border-radius: 8px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0 3px, transparent 3px 8px),
    #121b24;
  color: #fff;
}

.replay-code {
  position: absolute;
  left: 22px;
  top: 18px;
  z-index: 2;
  padding: 8px 14px;
  border-radius: 999px;
  background: #087747;
  font-weight: 900;
}

.replay-score {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  width: min(320px, 48%);
  background: rgba(10, 17, 23, 0.92);
  overflow: hidden;
}

.replay-score .score-head,
.replay-score .score-line {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  text-align: center;
}

.replay-score b {
  padding: 14px 10px;
}

.replay-score .score-head {
  background: rgba(35, 50, 63, 0.92);
}

.replay-table {
  position: absolute;
  inset: 100px 70px 90px;
  border-radius: 50% / 42%;
  background: radial-gradient(ellipse at center, #06945a 0 58%, #111b20 59% 67%, transparent 68%);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.45);
}

.replay-center-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 76px;
  height: 112px;
  border-radius: 8px;
  background: #fff;
  color: #16231f;
  font-size: 48px;
  font-weight: 900;
  box-shadow: 0 12px 20px rgba(0,0,0,0.35);
}

.replay-player {
  position: absolute;
  display: grid;
  gap: 4px;
  min-width: 170px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(0,0,0,0.58);
  color: #fff;
  font-weight: 900;
}

.replay-player span,
.replay-player small {
  color: rgba(255,255,255,0.75);
}

.replay-player.seat-1 {
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
}

.replay-player.seat-2 {
  left: 0;
  top: 46%;
  transform: translate(-20%, -50%);
}

.replay-player.seat-3 {
  left: 50%;
  top: 0;
  transform: translate(-50%, -32%);
}

.replay-player.seat-4 {
  right: 0;
  top: 46%;
  transform: translate(20%, -50%);
}

.replay-list h3 {
  margin: 18px 0 8px;
}

.felt {
  position: relative;
  display: grid;
  gap: 18px;
  min-height: 560px;
  margin: 18px 0;
  padding: 18px;
  border-radius: 8px;
  color: #fff;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.12), transparent 32%),
    var(--felt);
}

.table-announcement {
  position: absolute;
  z-index: 18;
  top: 74px;
  left: 50%;
  transform: translateX(-50%);
  min-width: min(330px, 80%);
  padding: 13px 22px;
  border: 3px solid rgba(255, 238, 174, 0.9);
  border-radius: 8px;
  color: #2a2823;
  background: linear-gradient(#fff0bd, #e4b75b);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
  text-align: center;
  font-size: clamp(1.2rem, 4vw, 2rem);
  font-weight: 900;
  animation: popHold 2s ease both;
}

.table-announcement span.red {
  color: var(--red);
}

.felt.resolving {
  box-shadow: inset 0 0 0 2px rgba(201, 137, 36, 0.3), 0 18px 34px rgba(0, 0, 0, 0.14);
}

.scoreboard {
  flex-wrap: wrap;
  gap: 10px;
}

.score {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  font-weight: 800;
}

.shown-combinations {
  display: grid;
  gap: 8px;
}

.shown-combo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  background: rgba(0, 0, 0, 0.14);
}

.shown-combo span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
  font-weight: 800;
}

.table-seats {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 470px;
  padding: 132px 210px 140px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.12), transparent 56%),
    var(--table-center, rgba(0, 0, 0, 0.08));
}

.players {
  flex-wrap: wrap;
  gap: 10px;
}

.lobby-players {
  align-items: stretch;
  justify-content: center;
}

.player {
  min-width: 150px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.lobby-player {
  width: min(280px, 100%);
  min-width: 220px;
  text-align: left;
}

.lobby-player.ready {
  border-color: rgba(101, 177, 111, 0.48);
  background: rgba(101, 177, 111, 0.12);
}

.ready-mark {
  display: inline-grid;
  width: 24px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #65b16f;
  font-weight: 900;
}

.ready-mark.mini {
  width: 20px;
  font-size: 0.82rem;
}

.ready-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  color: #65b16f;
  font-weight: 900;
}

.player-stats {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.88rem;
  font-weight: 800;
}

.waiting-table-stage {
  position: relative;
  display: grid;
  gap: 18px;
  min-height: 620px;
  padding: 18px;
  border-radius: 8px;
  color: #fff;
  background:
    radial-gradient(ellipse at center, var(--table-center, rgba(127, 40, 38, 0.9)) 0 42%, rgba(18, 29, 36, 0.96) 43% 100%);
  overflow: hidden;
}

.waiting-table-stage > .leave-table-button {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 8;
}

.waiting-table-stage.deck-green {
  --table-center: rgba(27, 112, 78, 0.92);
}

.waiting-table-stage.deck-blue {
  --table-center: rgba(28, 107, 147, 0.92);
}

.waiting-table-header,
.invite-strip {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(13, 23, 31, 0.88);
}

.waiting-table-header [data-copy-invite] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  color: #fff;
  border-color: rgba(130, 211, 136, 0.55);
  background: linear-gradient(180deg, #61bd64, #3d9445);
  font-weight: 900;
  white-space: nowrap;
}

.waiting-table-header [data-copy-invite]::before {
  content: "✉";
  margin-right: 7px;
}

.waiting-table-header div,
.invite-strip {
  min-width: 0;
}

.waiting-table-header span,
.invite-strip span,
.invite-strip small {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  overflow-wrap: anywhere;
  font-weight: 800;
}

.invite-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.waiting-table {
  position: relative;
  min-height: 430px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 50% / 36%;
}

.waiting-seat {
  position: absolute;
  display: grid;
  gap: 8px;
  width: min(250px, 42%);
  padding: 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
}

.waiting-seat.empty {
  place-items: center;
  min-height: 88px;
  color: rgba(255, 255, 255, 0.62);
  border: 1px dashed rgba(255, 255, 255, 0.28);
}

.waiting-seat.seat-1 {
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
}

.waiting-seat.seat-2 {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.waiting-seat.seat-3 {
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
}

.waiting-seat.seat-4 {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.waiting-seat-name {
  display: grid;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.5);
}

.waiting-seat-name span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.82rem;
  font-weight: 800;
}

.waiting-seat-avatar {
  position: relative;
  display: inline-grid;
  width: max-content;
  justify-self: center;
}

.ready-mark.lobby-ready {
  position: absolute;
  right: -4px;
  bottom: -4px;
  border: 3px solid rgba(255, 255, 255, 0.9);
}

.lobby-stats {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  color: #a9ffae;
  background: rgba(0, 0, 0, 0.46);
}

.seat-points {
  position: absolute;
  left: 50%;
  right: auto;
  top: 72px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin-top: 0;
  padding: 4px 8px;
  border-radius: 6px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  font-size: 0.72rem;
  font-weight: 800;
  transform: translateX(-50%);
  white-space: nowrap;
}

.seat-points strong {
  font-size: 0.78rem;
}

.voice-speaking-indicator {
  position: absolute;
  right: -8px;
  top: -6px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  opacity: 0;
  color: #fff;
  background: rgba(10, 18, 24, 0.88);
  box-shadow: 0 0 0 0 rgba(143, 218, 76, 0.45);
  transform: scale(0.76);
  transition: opacity 150ms ease, transform 150ms ease;
  pointer-events: none;
}

.seat.speaking .voice-speaking-indicator {
  opacity: 1;
  transform: scale(1);
  animation: speakingPulse 900ms ease-in-out infinite;
}

@keyframes speakingPulse {
  0% { box-shadow: 0 0 0 0 rgba(143, 218, 76, 0.5); }
  70% { box-shadow: 0 0 0 9px rgba(143, 218, 76, 0); }
  100% { box-shadow: 0 0 0 0 rgba(143, 218, 76, 0); }
}

.ready-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(220px, 100%);
  min-height: 54px;
  margin: 0;
  border: 1px solid rgba(118, 78, 12, 0.45);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #f5d575, #d99b27);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
  font-size: 1.35rem;
  font-weight: 900;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.38);
}

.ready-button-icon {
  display: inline-grid;
  width: 30px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: #226b2e;
  background: #fff;
  text-shadow: none;
}

.waiting-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.leave-table-button {
  width: min(180px, 100%);
  min-height: 54px;
  color: #7b2424;
  font-weight: 900;
}

.mobile-add-bot-button {
  display: none;
}

.kick-button.icon-only {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  color: #fff;
  background: #e1534d;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.24);
  padding: 0;
  justify-self: end;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
}

.match-clock {
  min-width: 60px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  font-size: 1rem;
  font-weight: 900;
  text-align: center;
}

.player-row {
  gap: 8px;
}

.player.turn {
  outline: 0;
  animation: none;
}

.seat {
  position: absolute;
  z-index: 2;
  width: 190px;
  min-width: 0;
  min-height: 128px;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.clickable-seat {
  cursor: pointer;
}

.clickable-seat:hover {
  border-color: rgba(255, 255, 255, 0.45);
}

.seat-profile-popup {
  position: absolute;
  left: 50%;
  top: 96px;
  z-index: 12;
  display: grid;
  gap: 8px;
  width: min(190px, 64vw);
  margin-top: 0;
  padding: 8px;
  border-radius: 8px;
  background: rgba(6, 13, 18, 0.88);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
  transform: translateX(-50%);
  animation: popupIn 140ms ease-out;
}

.seat-profile-popup .seat-action {
  margin-top: 0;
}

.seat-name {
  position: absolute;
  left: 50%;
  top: 4px;
  z-index: 4;
  max-width: 138px;
  padding: 7px 10px;
  overflow: hidden;
  border-radius: 6px;
  color: #fff;
  background: rgba(0, 0, 0, 0.64);
  font-weight: 900;
  text-overflow: ellipsis;
  text-align: center;
  transform: translateX(-50%);
  white-space: nowrap;
}

.seat-visual {
  position: relative;
  z-index: 2;
  width: 92px;
  height: 104px;
  margin: 0 auto;
}

.seat-visual::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 126px;
  height: 96px;
  background: url("/images/chair.svg") center / contain no-repeat;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.34));
  opacity: 0.96;
  transform: translate(-50%, -50%) rotate(var(--chair-rotation, 0deg));
  pointer-events: none;
}

.seat .avatar.seat-avatar {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 72px;
  border: 4px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.34);
  transform: translate(-50%, -50%);
}

.seat-card-fan {
  --fan-rotation: 0deg;
  position: absolute;
  left: 50%;
  top: 46px;
  z-index: 1;
  width: 126px;
  height: 82px;
  transform: translateX(-50%) rotate(var(--fan-rotation));
  transform-origin: 50% 8%;
  pointer-events: none;
}

.seat-top .seat-visual::before {
  --chair-rotation: 180deg;
  top: 42%;
}

.seat-bottom .seat-visual::before {
  top: 58%;
}

.seat-left .seat-visual::before {
  --chair-rotation: 90deg;
  left: 56%;
}

.seat-right .seat-visual::before {
  --chair-rotation: -90deg;
  left: 44%;
}

.seat-card-back {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 42px;
  height: 62px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.24) 0 2px, transparent 3px),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.22) 0 2px, transparent 2px 6px),
    var(--deck-back, #cc3838);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.22);
  transform: translateX(-50%) rotate(calc(180deg + (var(--fan-offset) * 10deg)));
  transform-origin: 50% 88%;
}

.seat-bottom .seat-card-fan {
  --fan-rotation: 180deg;
  top: -10px;
}

.seat-top .seat-card-fan {
  --fan-rotation: 0deg;
  top: 46px;
}

.seat-left .seat-card-fan {
  --fan-rotation: -90deg;
  left: 74%;
  top: 32px;
}

.seat-right .seat-card-fan {
  --fan-rotation: 90deg;
  left: 26%;
  top: 32px;
}

.decision-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: grid;
  width: 88px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(from 90deg, rgba(255, 255, 255, 0.16) 0 var(--elapsed), #8ccf4f var(--elapsed) 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.decision-ring::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--felt-dark);
}

.seat .meta {
  color: rgba(255, 255, 255, 0.74);
}

.seat-mode {
  position: absolute;
  left: 10px;
  bottom: 4px;
  z-index: 4;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 900;
}

.seat-speech {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 3;
  min-width: 118px;
  max-width: 260px;
  padding: 12px 18px;
  border: 5px solid rgba(255, 255, 255, 0.32);
  border-radius: 8px;
  color: #1f1d18;
  background: linear-gradient(180deg, #d8cfb8, #b9af97);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
  font-size: 1.25rem;
  font-weight: 900;
  text-align: center;
  transform: translateX(-50%);
  animation: speechPop 220ms ease-out;
}

.seat-speech::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -24px;
  width: 0;
  height: 0;
  border-top: 24px solid #b9af97;
  border-left: 22px solid transparent;
}

.seat-speech.pass {
  min-width: 92px;
}

.seat-speech.combo {
  background: linear-gradient(180deg, #eadfc1, #c9bc9e);
}

.seat-combos {
  position: absolute;
  right: -18px;
  top: 76px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 150px;
  margin-top: 0;
  padding: 4px 7px;
  border-radius: 6px;
  color: #fff2a6;
  background: rgba(0, 0, 0, 0.62);
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.15;
}

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

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

.seat-left {
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
}

.seat-right {
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}

.seat.turn.seat-bottom,
.seat.turn.seat-top {
  animation: none;
}

.seat.turn.seat-left,
.seat.turn.seat-right {
  animation: none;
}

.trick {
  position: relative;
  z-index: 6;
  width: min(460px, 76%);
  min-height: 310px;
  margin: 0 auto;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0;
  pointer-events: none;
}

.trick p {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}

.seven-exchange-overlay {
  position: absolute;
  inset: 0;
  z-index: 28;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.exchange-card {
  position: absolute;
  width: 94px;
  min-height: 126px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 10px;
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(242, 239, 231, 0.94)),
    #fff;
  box-shadow: 0 24px 36px rgba(0, 0, 0, 0.28);
  font-size: 1.8rem;
  font-weight: 900;
  overflow: hidden;
}

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

.exchange-seven {
  animation: sevenToTrumpCard 720ms cubic-bezier(0.2, 0.72, 0.22, 1) forwards;
}

.exchange-upcard {
  animation: trumpCardToHand 720ms cubic-bezier(0.2, 0.72, 0.22, 1) forwards;
}

@keyframes sevenToTrumpCard {
  0% {
    opacity: 0;
    transform: translateY(230px) scale(0.84) rotate(-8deg);
  }
  20% {
    opacity: 1;
  }
  62% {
    transform: translateY(0) translateX(-16px) scale(1.08) rotate(4deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-56px) translateX(-56px) scale(0.86) rotate(-12deg);
  }
}

@keyframes trumpCardToHand {
  0% {
    opacity: 0;
    transform: translateY(-56px) translateX(56px) scale(0.86) rotate(10deg);
  }
  20% {
    opacity: 1;
  }
  62% {
    transform: translateY(0) translateX(16px) scale(1.08) rotate(-4deg);
  }
  100% {
    opacity: 0;
    transform: translateY(230px) scale(0.84) rotate(8deg);
  }
}

.table-tools {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 8;
  display: grid;
  gap: 10px;
}

.table-tool {
  display: grid;
  width: 48px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(13, 18, 24, 0.45);
  font-size: 1.45rem;
  font-weight: 900;
}

.header-tool {
  width: 42px;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
}

.last-trick-tool {
  position: relative;
  width: 54px;
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  color: rgba(10, 23, 26, 0.78);
  background: transparent;
  box-shadow: none;
}

.last-trick-tool span {
  position: relative;
  display: block;
  width: 34px;
  aspect-ratio: 1;
  background: url("/images/history.svg") center / contain no-repeat;
  opacity: 0.9;
}

.last-trick-tool span::before,
.last-trick-tool span::after {
  content: none;
  position: absolute;
}

.last-trick-tool span::before {
}

.last-trick-tool span::after {
}

.last-trick-tool::before {
  content: none;
  position: absolute;
}

.last-trick-tool::after {
  content: none;
  position: absolute;
}

.bot-thinking-tool {
  width: auto;
  min-width: 76px;
  padding: 0 10px;
  color: #fff;
  background: rgba(12, 24, 30, 0.62);
  font-size: 0.78rem;
  letter-spacing: 0;
}

.bot-thinking-tool.active {
  border-color: rgba(245, 197, 83, 0.65);
  color: #f5d575;
  background: rgba(45, 35, 12, 0.78);
}

.auto-bot-tool {
  color: #fff;
  background: linear-gradient(180deg, #d99b27, #a35b12);
}

.points-overlay {
  position: absolute;
  right: 76px;
  bottom: 18px;
  z-index: 9;
  display: grid;
  gap: 8px;
  width: min(320px, calc(100% - 120px));
  padding: 12px;
  border-radius: 8px;
  color: #fff;
  background: rgba(0, 0, 0, 0.68);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.last-trick-overlay {
  position: absolute;
  right: clamp(28px, 5vw, 76px);
  bottom: clamp(112px, 18vh, 168px);
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  padding: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.points-overlay div,
.last-trick-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.points-overlay span,
.last-trick-head span {
  color: #f2d47a;
  font-weight: 900;
}

.last-trick-cards {
  position: relative;
  width: 152px;
  height: 104px;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.22));
}

.last-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(36px, 6vw, 48px);
  min-height: clamp(52px, 9vw, 68px);
  margin: 0;
  font-size: 1rem;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
  transform: translate(calc(-50% + var(--last-x, 0px)), calc(-50% + var(--last-y, 0px))) rotate(var(--last-r, 0deg));
  z-index: calc(2 + var(--i, 0));
}

.last-card:nth-child(1) {
  --last-x: -46px;
  --last-y: 18px;
  --last-r: -18deg;
}

.last-card:nth-child(2) {
  --last-x: -16px;
  --last-y: -2px;
  --last-r: -5deg;
}

.last-card:nth-child(3) {
  --last-x: 16px;
  --last-y: 10px;
  --last-r: 7deg;
}

.last-card:nth-child(4) {
  --last-x: 46px;
  --last-y: -10px;
  --last-r: 15deg;
}

.last-trick-cards[data-count="2"] .last-card:nth-child(1) {
  --last-x: -24px;
  --last-y: 8px;
}

.last-trick-cards[data-count="2"] .last-card:nth-child(2) {
  --last-x: 24px;
  --last-y: -6px;
}

.last-trick-cards[data-count="3"] .last-card:nth-child(1) {
  --last-x: -34px;
}

.last-trick-cards[data-count="3"] .last-card:nth-child(2) {
  --last-x: 0px;
}

.last-trick-cards[data-count="3"] .last-card:nth-child(3) {
  --last-x: 34px;
}

.last-trick-history-icon {
  position: relative;
  display: inline-block;
  width: 32px;
  aspect-ratio: 1;
  margin-bottom: 0;
  background: url("/images/history.svg") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(255, 255, 255, 0.15));
}

.last-trick-history-icon::before {
  content: none;
  position: absolute;
}

.last-trick-history-icon::after {
  content: none;
  position: absolute;
}

.cutting-felt .table-seats {
  min-height: 560px;
}

.cut-stage {
  display: grid;
  justify-items: center;
  gap: 28px;
  color: #fff;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 900;
}

.cut-stage p {
  margin: 0;
}

.cut-stage strong {
  color: #d8aa42;
}

.cut-deck {
  position: relative;
  width: 150px;
  height: 330px;
  transform: rotate(-2deg);
}

.cut-card {
  position: absolute;
  left: 0;
  bottom: calc(var(--i) * 7px);
  width: 150px;
  height: 98px;
  border: 2px solid #fff;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 18%, rgba(255, 255, 255, 0.86) 19% 20%, transparent 21%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.75) 0 2px, transparent 2px 5px),
    var(--deck-back, #d53838);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.12);
  transition: transform 160ms ease, filter 160ms ease;
}

.cut-deck.my-cut .cut-card:hover {
  filter: brightness(1.08);
  transform: translateX(-46px);
}

.deal-stream {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.deal-fly {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 6px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.65) 0 2px, transparent 2px 5px),
    var(--deck-back, #d53838);
  transform: translate(-50%, -50%);
  animation: dealFly 820ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc((var(--seat) * 110ms) + (var(--i) * 42ms));
}

.deal-fly.to-seat-1 {
  --deal-x: 0px;
  --deal-y: 230px;
}

.deal-fly.to-seat-2 {
  --deal-x: -270px;
  --deal-y: 0px;
}

.deal-fly.to-seat-3 {
  --deal-x: 0px;
  --deal-y: -230px;
}

.deal-fly.to-seat-4 {
  --deal-x: 270px;
  --deal-y: 0px;
}

.deck-red {
  --deck-back: #d53838;
  --table-center: #7f2826;
}

.deck-green {
  --deck-back: #679f42;
  --table-center: #176a50;
}

.deck-blue {
  --deck-back: #187aa0;
  --table-center: #17617a;
}

.bid-panel {
  width: min(430px, 100%);
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: rgba(9, 47, 39, 0.9);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
}

.choose-coz-panel {
  width: min(620px, 100%);
  grid-template-columns: 112px minmax(0, 1fr);
  background: linear-gradient(180deg, rgba(31, 52, 70, 0.96), rgba(16, 33, 45, 0.96));
}

.choose-coz-panel .bid-actions {
  justify-content: center;
  gap: 28px;
}

.choose-coz-panel .play-coz,
.choose-coz-panel .pass-coz {
  min-width: 180px;
  min-height: 58px;
  border-radius: 8px;
  font-size: 1.15rem;
}

.choose-coz-panel .play-coz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.choose-coz-panel .pass-coz {
  background: linear-gradient(#f46e6e, #bb3535);
  border-color: rgba(255, 255, 255, 0.42);
}

.bid-waiting-panel {
  display: grid;
  place-items: center;
  gap: 6px;
  min-width: 170px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  color: #fff;
  background: rgba(9, 23, 33, 0.82);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
  text-align: center;
}

.bid-waiting-panel strong {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bid-waiting-panel small {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 900;
}

.loading-ring {
  width: 42px;
  aspect-ratio: 1;
  border: 6px solid rgba(255, 255, 255, 0.22);
  border-top-color: #96d957;
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}

.cut-stage p {
  color: #fff;
  font-size: clamp(1.5rem, 5vw, 2.7rem);
  font-weight: 900;
  text-shadow: 0 5px 18px rgba(0, 0, 0, 0.58);
}

.trump-card {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 126px;
  border: 1px solid #d2d9d5;
  border-radius: 8px;
  color: var(--ink);
  background: linear-gradient(145deg, #fff, #f1eee6);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.18);
  font-size: 1.65rem;
  font-weight: 900;
  overflow: hidden;
  animation: dealIn 420ms cubic-bezier(0.18, 0.84, 0.28, 1.18) both;
}

.trump-card small {
  color: var(--muted);
  font-size: 0.68rem;
}

.trump-card .card-art {
  width: 68px;
}

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

.bid-copy {
  display: grid;
  gap: 4px;
}

.bid-copy strong {
  font-size: 1rem;
}

.bid-copy span,
.waiting-note {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.86rem;
  font-weight: 800;
}

.bid-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bid-actions button {
  width: auto;
  min-width: 88px;
  padding: 0 12px;
}

.bid-actions .suit-choice.red {
  color: #fff;
  background: #b23a32;
}

.felt.resolving .trick {
  min-height: 190px;
}

.played-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px;
  min-height: 132px;
  display: grid;
  place-items: center;
  gap: 2px;
  border-radius: 8px;
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(242, 239, 231, 0.94)),
    #fff;
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.2);
  font-size: 1.65rem;
  font-weight: 900;
  overflow: hidden;
  transform-origin: center bottom;
  transform: translate(calc(-50% + var(--table-x, 0px)), calc(-50% + var(--table-y, 0px))) rotate(var(--table-rotate, 0deg)) scale(1);
}

.trick .played-card.from-seat-1 {
  --table-x: 0px;
  --table-y: 94px;
  --table-rotate: -5deg;
}

.trick .played-card.from-seat-2 {
  --table-x: -114px;
  --table-y: 8px;
  --table-rotate: -9deg;
}

.trick .played-card.from-seat-3 {
  --table-x: 0px;
  --table-y: -94px;
  --table-rotate: 4deg;
}

.trick .played-card.from-seat-4 {
  --table-x: 114px;
  --table-y: 8px;
  --table-rotate: 8deg;
}

.played-card.play-in {
  animation: cardFromSeat 560ms cubic-bezier(0.17, 0.84, 0.28, 1.16) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}

.played-card.from-seat-1 {
  --from-x: 0;
  --from-y: 220px;
  --from-rotate: -8deg;
}

.played-card.from-seat-2 {
  --from-x: -310px;
  --from-y: 12px;
  --from-rotate: 12deg;
}

.played-card.from-seat-3 {
  --from-x: 0;
  --from-y: -220px;
  --from-rotate: 8deg;
}

.played-card.from-seat-4 {
  --from-x: 310px;
  --from-y: 12px;
  --from-rotate: -12deg;
}

.felt.resolving .played-card {
  margin-inline: -18px;
  animation: trickGather 220ms cubic-bezier(0.2, 0.8, 0.22, 1) both, trickToWinner 420ms cubic-bezier(0.24, 0.8, 0.2, 1) 220ms both;
  animation-delay: calc(var(--i, 0) * 35ms);
}

.played-card.to-winner-1 {
  --win-x: 0px;
  --win-y: 250px;
}

.played-card.to-winner-2 {
  --win-x: -330px;
  --win-y: 18px;
}

.played-card.to-winner-3 {
  --win-x: 0px;
  --win-y: -250px;
}

.played-card.to-winner-4 {
  --win-x: 330px;
  --win-y: 18px;
}

.felt.resolving .played-card:nth-child(1) {
  transform: translateY(-4px) rotate(-7deg);
}

.felt.resolving .played-card:nth-child(2) {
  transform: translateY(5px) rotate(4deg);
}

.felt.resolving .played-card:nth-child(3) {
  transform: translateY(-1px) rotate(-2deg);
}

.felt.resolving .played-card:nth-child(4) {
  transform: translateY(8px) rotate(8deg);
}

.trick-result {
  flex-basis: 100%;
  width: min(560px, 100%);
  margin: 8px auto 0;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  color: #fff;
  background: rgba(13, 70, 56, 0.86);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
  font-weight: 900;
  text-align: center;
  animation: resultPop 360ms ease-out both;
}

.played-card::before,
.card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(22, 32, 27, 0.16);
  border-radius: 6px;
  pointer-events: none;
}

.played-card::after,
.card::after {
  content: "";
  position: absolute;
  inset: -35% auto -35% -70%;
  width: 58%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), transparent);
  transform: rotate(18deg);
  pointer-events: none;
}

.played-card::after {
  animation: cardShine 1.1s ease-out 160ms both;
}

.played-card small {
  display: none;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.card-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 0.691;
  color: currentColor;
}

.card-art svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.card-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.15em;
  font-weight: 900;
}

.card-art svg:not(:empty) + .card-fallback {
  display: none;
}

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

.hand {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: clamp(112px, 18vw, 150px);
  width: 100%;
  padding-inline: clamp(8px, 5vw, 68px);
  perspective: 900px;
}

.hand-row {
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 0;
  width: min(100%, 620px);
  min-height: clamp(105px, 17vw, 142px);
  padding-top: 18px;
}

.hand-row.fan-row .card {
  margin-inline: clamp(-12px, -1.5vw, -5px);
  transform: translateY(var(--lift, 0)) rotate(calc(var(--spread, 0) * 3.2deg)) scale(1);
  z-index: calc(20 + var(--i, 0));
}

.combination-shelf {
  position: relative;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-right: 72px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}

.combination-shelf div {
  display: grid;
  gap: 3px;
}

.combination-shelf span {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.86rem;
  font-weight: 800;
}

.combination-shelf button {
  width: auto;
  min-width: 92px;
  flex: 0 0 auto;
}

.combination-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.round-result-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.32);
}

.round-result-modal {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(620px, 100%);
  max-height: min(86svh, 620px);
  overflow: auto;
  padding: 18px;
  border: 3px solid rgba(255, 255, 255, 0.64);
  border-radius: 8px;
  color: #f8f8fb;
  background: linear-gradient(180deg, rgba(53, 61, 93, 0.95), rgba(37, 43, 68, 0.95));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
}

.round-result-modal h2 {
  margin: 0;
  color: #e3b64d;
  font-size: clamp(1.55rem, 4vw, 2.5rem);
}

.round-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  min-height: 42px;
  border: 0;
  color: #fff;
  background: transparent;
  font-size: 2.4rem;
  font-weight: 900;
}

.round-result-grid {
  display: grid;
  grid-template-columns: minmax(82px, 0.78fr) repeat(var(--cols), minmax(62px, 1fr));
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
}

.round-result-grid span,
.round-result-grid strong {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(111, 181, 218, 0.42);
  text-align: center;
}

.round-result-grid span {
  text-align: left;
}

.round-result-grid strong {
  font-size: 1.08rem;
  font-weight: 800;
}

.round-result-grid .round-total,
.round-result-grid .round-total ~ strong {
  color: #e3b64d;
  font-weight: 900;
}

.round-countdown {
  margin: 0;
  text-align: center;
  font-size: 1.08rem;
}

.final-result,
.cancelled-result {
  position: absolute;
  inset: 0;
  z-index: 35;
  display: grid;
  place-content: center;
  gap: 18px;
  padding: 24px;
  border-radius: inherit;
  text-align: center;
  background: rgba(7, 13, 19, 0.7);
  backdrop-filter: blur(2px);
}

.final-result h2,
.cancelled-result h2 {
  margin: 0;
  color: #e2b33d;
  font-size: clamp(1.8rem, 6vw, 3rem);
}

.cancelled-result p {
  max-width: 560px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 800;
}

.cancelled-result button {
  width: auto;
  min-width: 180px;
  margin-inline: auto;
}

.final-winners,
.final-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.final-winner-card {
  min-width: 190px;
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 2px solid #d39918;
  border-radius: 8px;
  background: rgba(26, 22, 20, 0.84);
  box-shadow: 0 0 0 2px rgba(255, 208, 75, 0.12);
}

.final-winner-card strong {
  color: #e7bd48;
  font-size: 1.35rem;
}

.final-winner-card.mine {
  box-shadow: 0 0 0 3px rgba(105, 201, 97, 0.5), 0 18px 40px rgba(0, 0, 0, 0.26);
}

.final-actions button {
  width: auto;
  min-width: 170px;
}

.card {
  position: relative;
  width: clamp(48px, 8vw, 74px);
  aspect-ratio: 0.72;
  border: 1px solid #cbd4cf;
  border-radius: 8px;
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244, 241, 233, 0.96)),
    #fff;
  font-size: 1.1rem;
  font-weight: 900;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  transform: translateY(var(--lift, 0)) rotate(calc(var(--spread, 0) * 3.2deg)) scale(1);
  transform-origin: center bottom;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, filter 180ms ease;
}

.card .card-art {
  width: 100%;
  height: 100%;
}

.hand.dealing .card {
  animation: dealIn 420ms cubic-bezier(0.18, 0.84, 0.28, 1.18) both;
  animation-delay: calc(var(--i, 0) * 32ms);
}

.card.playable {
  border-color: rgba(201, 137, 36, 0.78);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18), 0 0 0 2px rgba(201, 137, 36, 0.16);
}

.card.playable::after {
  animation: cardShine 1.2s ease-out 240ms both;
}

.card.playable:hover,
.card.playable:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 22px 30px rgba(0, 0, 0, 0.22), 0 0 0 3px rgba(201, 137, 36, 0.24);
  filter: saturate(1.08);
  transform: translateY(calc(var(--lift, 0px) - 18px)) rotate(calc((var(--spread, 0) * 3.2deg) - 2deg)) scale(1.04);
}

.card:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}

.card:disabled {
  transform: translateY(var(--lift, 0)) rotate(calc(var(--spread, 0) * 3.2deg)) scale(0.98);
  filter: grayscale(0.1);
}

@keyframes dealIn {
  0% {
    opacity: 0;
    transform: translate3d(0, -48px, -70px) rotate(-10deg) scale(0.78);
  }

  72% {
    opacity: 1;
    transform: translate3d(0, 4px, 0) rotate(1deg) scale(1.02);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes cardFromSeat {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + var(--from-x, 0px)), calc(-50% + var(--from-y, -42px))) rotate(var(--from-rotate, 8deg)) scale(0.82);
  }

  70% {
    opacity: 1;
    transform: translate(calc(-50% + var(--table-x, 0px)), calc(-50% + var(--table-y, 0px) + 5px)) rotate(calc(var(--table-rotate, 0deg) - 1deg)) scale(1.04);
  }

  100% {
    opacity: 1;
    transform: translate(calc(-50% + var(--table-x, 0px)), calc(-50% + var(--table-y, 0px))) rotate(var(--table-rotate, 0deg)) scale(1);
  }
}

@keyframes trickGather {
  0% {
    opacity: 1;
    transform: translate(calc(-50% + var(--table-x, 0px)), calc(-50% + var(--table-y, 0px))) rotate(var(--table-rotate, 0deg)) scale(1);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
}

@keyframes trickToWinner {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }

  100% {
    opacity: 0.88;
    transform: translate(calc(-50% + var(--win-x, 0px)), calc(-50% + var(--win-y, 0px))) rotate(18deg) scale(0.72);
  }
}

@keyframes dealFly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.65) rotate(-12deg);
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--deal-x, 0px)), calc(-50% + var(--deal-y, 0px))) scale(0.86) rotate(7deg);
  }
}

@keyframes resultPop {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cardShine {
  0% {
    transform: translateX(0) rotate(18deg);
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    transform: translateX(360%) rotate(18deg);
    opacity: 0;
  }
}

@keyframes turnPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(201, 137, 36, 0.22);
    transform: translateY(0);
  }

  50% {
    box-shadow: 0 0 0 5px rgba(201, 137, 36, 0.12);
    transform: translateY(-1px);
  }
}

@keyframes speechPop {
  from {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes popupIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes popHold {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(0.96);
  }

  14%,
  82% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px) scale(0.98);
  }
}

@keyframes seatPulseHorizontal {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(201, 137, 36, 0.22), 0 12px 24px rgba(0, 0, 0, 0.18);
    transform: translateX(-50%);
  }

  50% {
    box-shadow: 0 0 0 5px rgba(201, 137, 36, 0.12), 0 12px 24px rgba(0, 0, 0, 0.18);
    transform: translateX(-50%) translateY(-1px);
  }
}

@keyframes seatPulseVertical {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(201, 137, 36, 0.22), 0 12px 24px rgba(0, 0, 0, 0.18);
    transform: translateY(-50%);
  }

  50% {
    box-shadow: 0 0 0 5px rgba(201, 137, 36, 0.12), 0 12px 24px rgba(0, 0, 0, 0.18);
    transform: translateY(-50%) translateX(1px);
  }
}

.log {
  display: grid;
  gap: 6px;
  max-height: 170px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.log-line {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.log-line time {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.log-line span {
  overflow-wrap: anywhere;
}

.history-item {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.social-view,
.tournament-view,
.rules-view {
  min-height: calc(100vh - 150px);
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 18px;
  align-items: start;
}

.rules-panel {
  width: 100%;
}

.rules-panel h2 {
  margin-bottom: 12px;
}

.rules-list {
  margin: 0;
  padding-left: 22px;
  color: var(--muted);
}

.rules-list li + li {
  margin-top: 8px;
}

.rules-cards {
  display: grid;
  gap: 10px;
}

.rules-cards p {
  margin: 6px 0 0;
  color: var(--muted);
}

.rules-table {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.rules-table span,
.rules-table strong {
  padding: 10px 12px;
  background: #fff;
}

.rules-table strong {
  text-align: right;
}

.combo-table {
  grid-template-columns: minmax(0, 1.5fr) minmax(110px, auto);
}

.social-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(320px, 1.2fr) minmax(300px, 0.9fr);
  gap: 18px;
  align-items: start;
}

.inline-form,
.message-form,
.row-actions,
.friend-item,
.match {
  display: flex;
  gap: 8px;
}

.chat-history {
  max-height: 520px;
  overflow: auto;
}

.chat-thread {
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.chat-thread:hover,
.chat-thread.selected {
  border-color: var(--felt);
  background: #f3fbf7;
}

.chat-thread.selected {
  transform: translateX(2px);
}

.inline-form {
  margin: 14px 0;
}

.inline-form input {
  min-width: 0;
}

.inline-form .primary {
  width: auto;
  padding: 0 14px;
}

.message-form {
  flex-direction: column;
  margin-top: 16px;
}

.row-actions,
.friend-item {
  align-items: center;
  justify-content: space-between;
}

.small-action {
  width: auto;
  min-height: 34px;
  padding: 0 12px;
}

.seat-action {
  width: 100%;
  min-height: 30px;
  margin-top: 8px;
}

.appreciate-action {
  border-color: rgba(101, 177, 111, 0.55);
  color: #f6fff7;
  background: rgba(101, 177, 111, 0.2);
}

.appreciate-action.done {
  opacity: 0.72;
}

.seat-appreciations {
  margin-top: 8px;
  color: #eaf8de;
  font-weight: 900;
}

.tournament {
  display: grid;
  gap: 8px;
}

.matches {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.match {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 8px;
  border-radius: 8px;
  background: #f7f8f6;
}

@media (max-width: 980px) {
  .shell {
    padding: 16px;
  }

  .auth-panel,
  .layout,
  .social-grid,
  .rules-grid,
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .replay-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .replay-board {
    min-height: 700px;
  }

  .replay-score {
    width: 100%;
  }

  .replay-table {
    inset: 120px 18px 110px;
  }

  .replay-player {
    min-width: 130px;
    font-size: 14px;
  }

  .auth-panel {
    align-content: center;
  }

  .table-panel {
    min-height: 520px;
    overflow: visible;
  }

  .side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .side .panel:last-child {
    grid-column: 1 / -1;
  }

  .table-seats {
    min-height: 330px;
    padding: 88px 132px 104px;
  }

  .seat {
    width: min(176px, 32%);
  }

  .bid-panel {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .trump-card {
    min-height: 132px;
  }
}

@media (max-width: 760px) {
  .layout.table-focus {
    display: block;
  }

  .layout.table-focus .table-panel {
    width: 100%;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .layout.table-focus .room-head {
    padding: 0 4px;
  }

  .game-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0;
  }

  .game-header-main {
    min-width: 0;
    min-height: 42px;
    padding-right: 8px;
    font-size: 0.88rem;
  }

  .game-header-contract {
    max-width: min(120px, 27vw);
    font-size: 0.68rem;
  }

  .trump-badge,
  .suit-tile {
    width: 28px;
    border-radius: 7px;
    font-size: 1rem;
  }

  .game-header-actions {
    top: 7px;
    right: 7px;
    align-self: auto;
    padding: 6px;
    gap: 6px;
  }

  .header-tool {
    width: 38px;
    font-size: 1.15rem;
  }

  .mini-score-board {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: end;
    width: min(240px, 58vw);
    min-width: 150px;
    min-height: 34px;
    margin-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.88rem;
  }

  .mini-score-board.open {
    position: relative;
    right: auto;
    top: auto;
    width: min(240px, 58vw);
    margin-top: 0;
    max-height: 220px;
    overflow-y: auto;
  }

  .mini-score-board .score-head,
  .mini-score-board .score-line {
    grid-template-columns: repeat(var(--cols), minmax(44px, 1fr));
  }

  .mini-score-board b {
    padding: 5px 8px;
  }

  .score-caret {
    margin: -2px auto 1px;
    font-size: 0.72rem;
  }

  .side {
    grid-template-columns: 1fr;
  }

  .side .panel:last-child {
    grid-column: auto;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
    overflow: hidden;
    max-width: 100vw;
  }

  .userbar {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    min-width: 0;
    justify-content: flex-start;
    padding-bottom: 4px;
    scrollbar-width: thin;
    gap: 8px;
  }

  #currentUser {
    flex: 0 0 auto;
    min-width: max-content;
  }

  .userbar .ghost,
  .language-select,
  .sound-toggle {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
    min-height: 42px;
  }

  #currentUser {
    justify-content: space-between;
  }

  .contract-strip,
  .status-row {
    justify-content: center;
    text-align: center;
  }

  .table-seats {
    min-height: 440px;
    padding: 90px 12px 112px;
    border-radius: 42px;
  }

  .table-announcement {
    top: 62px;
    min-width: min(300px, 90%);
  }

  .seat {
    width: min(168px, 44%);
    min-width: 118px;
  }

  .seat-top,
  .seat-bottom {
    left: 50%;
  }

  .seat-left {
    left: 8px;
  }

  .seat-right {
    right: 8px;
  }

  .trick {
    width: min(430px, 82%);
    overflow: visible;
    padding-inline: 0;
  }

  .profile-stat-grid {
    font-size: 0.92rem;
  }

  .social-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 560px) {
  .shell {
    padding: 8px;
  }

  .auth-panel {
    min-height: calc(100vh - 20px);
    gap: 20px;
  }

  .auth-panel h1 {
    font-size: 2.25rem;
    line-height: 1;
  }

  .topbar,
  .room-head,
  .status-row,
  .match-head,
  .combination-shelf,
  .profile-preview,
  .profile-actions,
  .inline-form,
  .row-actions,
  .friend-item {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar {
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 20;
    overflow: hidden;
    max-width: 100vw;
    margin: -8px -8px 0;
    padding: 8px;
    border-bottom: 1px solid rgba(216, 224, 220, 0.8);
    background: rgba(246, 243, 238, 0.96);
    backdrop-filter: blur(10px);
  }

  .userbar,
  #currentUser,
  .panel-title,
  .emoji-row,
  .table-chat-form,
  .admin-actions,
  .bid-actions {
    flex-wrap: wrap;
  }

  .userbar {
    flex-wrap: nowrap;
  }

  .userbar .ghost,
  .profile-actions .primary,
  .profile-actions .ghost,
  .inline-form .primary,
  .bid-actions button {
    width: 100%;
  }

  .userbar .ghost,
  .language-select,
  .sound-toggle {
    min-height: 38px;
    padding-inline: 8px;
    font-size: 0.92rem;
  }

  .userbar {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
  }

  .userbar .ghost {
    width: auto;
    min-width: max-content;
  }

  .language-select {
    min-width: 118px;
  }

  .language-flag-select {
    min-width: 86px;
    max-width: 96px;
  }

  .sound-toggle {
    width: 42px;
    min-width: 42px;
    padding-inline: 0;
  }

  .avatar-choice-grid {
    gap: 10px;
  }

  .avatar-carousel {
    grid-template-columns: 54px 1fr 54px;
    gap: 8px;
  }

  .avatar-step {
    width: 52px;
    font-size: 2.5rem;
  }

  .avatar.register-preview {
    width: 96px;
  }

  .avatar-strip {
    justify-content: center;
  }

  #currentUser {
    justify-content: flex-start;
  }

  .coin-badge {
    font-size: 0.76rem;
  }

  .table-chat-form {
    flex-wrap: nowrap;
  }

  .table-chat-form input {
    min-width: 0;
  }

  .table-chat-form button {
    width: auto;
    min-width: 96px;
  }

  .voice-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .voice-actions {
    justify-content: stretch;
  }

  .voice-actions button {
    flex: 1;
  }

  .panel,
  .table-panel,
  .profile-panel {
    padding: 10px;
  }

  .table-panel {
    border-radius: 8px;
  }

  .empty-state {
    min-height: 360px;
  }

  .match-row {
    align-items: stretch;
    flex-direction: column;
  }

  .lobby-actions {
    grid-template-columns: 1fr;
  }

  .open-table-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .open-table-creator {
    display: grid;
  }

  .open-table-players {
    justify-items: end;
  }

  .open-table-join {
    grid-column: 2;
    grid-row: 1 / span 3;
    width: auto;
  }

  .round-result-modal {
    width: min(94vw, 420px);
    max-height: 82svh;
    padding: 14px 10px;
    border-width: 2px;
  }

  .round-result-modal h2 {
    padding-right: 34px;
    font-size: clamp(1.25rem, 7vw, 1.75rem);
  }

  .round-close {
    top: 8px;
    right: 8px;
    width: 30px;
    min-height: 30px;
    font-size: 1.8rem;
  }

  .round-result-grid {
    grid-template-columns: minmax(62px, 0.72fr) repeat(var(--cols), minmax(44px, 1fr));
  }

  .round-result-grid span,
  .round-result-grid strong {
    padding: 7px 5px;
    font-size: 0.82rem;
  }

  .round-result-grid strong {
    font-size: 0.92rem;
  }

  .round-countdown {
    font-size: 0.95rem;
  }

  .gift-backdrop {
    align-items: start;
    padding: 10px;
    overflow: auto;
  }

  .gift-popup {
    max-height: none;
  }

  .gift-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
  }

  .gift-card {
    min-height: 136px;
    padding: 8px;
  }

  .gift-icon {
    width: 54px;
    height: 46px;
    font-size: 1.95rem;
  }

  .chat-line {
    grid-template-columns: 1fr auto;
  }

  .chat-line span {
    grid-column: 1 / -1;
  }

  .felt {
    gap: 12px;
    margin: 10px -4px;
    padding: 8px;
    border-radius: 8px;
    min-height: 620px;
  }

  .table-mode .felt {
    min-height: calc(100svh - 116px);
    margin: 0;
    padding: 0 0 max(18px, env(safe-area-inset-bottom));
    border-radius: 0;
    background:
      radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.08), transparent 34%),
      linear-gradient(180deg, #101923, #080d14);
    overflow: hidden;
  }

  .table-mode .table-seats {
    width: min(96vw, 410px);
    min-height: min(62svh, 560px);
    margin: 8px auto 0;
    padding: 118px 20px 132px;
    border: 0;
    border-radius: 48% / 40%;
    background:
      radial-gradient(ellipse at center, rgba(255, 255, 255, 0.12), transparent 56%),
      var(--table-center, rgba(28, 117, 82, 0.95));
    box-shadow:
      0 0 0 10px rgba(4, 9, 14, 0.62),
      inset 0 0 42px rgba(0, 0, 0, 0.24);
  }

  .table-mode .felt.deck-red .table-seats {
    --table-center: rgba(132, 38, 36, 0.95);
  }

  .table-mode .felt.deck-blue .table-seats {
    --table-center: rgba(22, 105, 137, 0.95);
  }

  .table-mode .seat {
    width: 132px;
    min-width: 0;
  }

  .table-mode .seat-top {
    top: -28px;
  }

  .table-mode .seat-bottom {
    bottom: -34px;
  }

  .table-mode .seat-left {
    left: -42px;
  }

  .table-mode .seat-right {
    right: -42px;
  }

  .table-mode .trick {
    width: 100%;
    min-height: 260px;
  }

  .table-mode .table-tools {
    right: max(18px, 6vw);
    bottom: max(130px, 19svh);
    align-items: center;
  }

  .table-mode .last-trick-tool {
    width: 54px;
    background: transparent;
  }

  .table-mode .bot-thinking-tool {
    min-width: 66px;
    min-height: 36px;
    padding: 0 8px;
    font-size: 0.68rem;
  }

  .table-mode .last-trick-overlay {
    right: max(30px, 8vw);
    bottom: max(138px, 22svh);
  }

  .table-mode .last-card {
    width: clamp(32px, 9vw, 44px);
    min-height: clamp(46px, 13vw, 62px);
  }

  .table-mode .played-card {
    width: clamp(70px, 20vw, 84px);
    min-height: clamp(100px, 29vw, 118px);
    font-size: 1.28rem;
  }

  .table-mode .last-trick-overlay .last-trick-cards {
    width: 132px;
    height: 92px;
  }

  .table-mode .last-trick-overlay .last-card {
    width: clamp(30px, 8vw, 40px);
    min-height: clamp(43px, 11vw, 56px);
    font-size: 0.82rem;
  }

  .table-mode .trick .played-card.from-seat-1 {
    --table-y: 104px;
    --table-rotate: -4deg;
  }

  .table-mode .trick .played-card.from-seat-2 {
    --table-x: -78px;
    --table-y: 0px;
    --table-rotate: -4deg;
  }

  .table-mode .trick .played-card.from-seat-3 {
    --table-y: -104px;
    --table-rotate: 2deg;
  }

  .table-mode .trick .played-card.from-seat-4 {
    --table-x: 78px;
    --table-y: 0px;
    --table-rotate: 4deg;
  }

  .table-mode .hand {
    min-height: 128px;
    padding-inline: 18px;
  }

  .table-mode .hand-row {
    min-height: 120px;
    width: min(100%, 360px);
  }

  .table-mode .card {
    width: clamp(52px, 15vw, 64px);
  }

  .table-mode .card:disabled {
    opacity: 0.86;
  }

  .scoreboard,
  .match-totals {
    gap: 6px;
  }

  .score {
    padding: 6px 8px;
    font-size: 0.86rem;
  }

  .shown-combo,
  .combination-shelf {
    font-size: 0.9rem;
  }

  .combination-shelf {
    margin-right: 0;
    padding-right: 66px;
  }

  .waiting-table-stage {
    min-height: 720px;
    padding: 10px;
  }

  .waiting-table-header,
  .invite-strip {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .waiting-table {
    min-height: 560px;
    border-radius: 44% / 34%;
  }

  .waiting-seat {
    width: min(220px, 58vw);
  }

  .waiting-seat.seat-2 {
    left: 4px;
  }

  .waiting-seat.seat-4 {
    right: 4px;
  }

  .bid-panel {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .trump-card {
    min-height: 96px;
    font-size: 1.22rem;
  }

  .card {
    width: clamp(42px, 14vw, 54px);
    font-size: 0.95rem;
  }

  .hand {
    justify-content: center;
    gap: 6px;
  }

  .table-seats {
    min-height: 520px;
    padding: 104px 6px 118px;
    border-radius: 32px;
  }

  .seat {
    width: min(150px, 46%);
    min-width: 120px;
    padding: 8px;
    font-size: 0.86rem;
  }

  .seat .meta {
    font-size: 0.76rem;
  }

  .seat-speech {
    min-width: 92px;
    max-width: 170px;
    padding: 9px 12px;
    border-width: 4px;
    font-size: 1rem;
  }

  .seat-combos {
    font-size: 0.78rem;
  }

  .decision-ring {
    width: 76px;
  }

  .seat-left {
    top: 50%;
    left: 8px;
  }

  .seat-right {
    top: 50%;
    right: 8px;
  }

  .trick {
    width: min(360px, 86%);
    min-height: 230px;
    gap: 0;
  }

  .choose-coz-panel {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .choose-coz-panel .bid-actions {
    gap: 10px;
  }

  .choose-coz-panel .play-coz,
  .choose-coz-panel .pass-coz {
    min-width: min(138px, 100%);
    min-height: 50px;
  }

  .hand {
    padding-inline: 52px;
  }

  .played-card {
    width: 58px;
    min-height: 84px;
    font-size: 1.08rem;
  }

  .table-chat-history,
  .log,
  .chat-history,
  .admin-history {
    max-height: 320px;
  }

  .small-action {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .shell {
    padding: 6px;
  }

  .topbar {
    margin: -6px -6px 0;
    padding: 6px;
  }

  .userbar {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
  }

  .topbar h1 {
    font-size: 1.55rem;
  }

  .userbar {
    gap: 6px;
  }

  .userbar .ghost,
  .language-select,
  .sound-toggle {
    min-height: 36px;
    font-size: 0.84rem;
  }

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

  .bid-panel {
    grid-template-columns: 1fr;
  }

  .trump-card {
    width: 88px;
    justify-self: center;
  }

  .table-seats {
    min-height: 500px;
    padding-top: 78px;
    padding-bottom: 98px;
  }

  .gender-picker {
    grid-template-columns: 1fr;
  }

  .deck-color-options {
    grid-template-columns: 1fr;
  }

  .deck-color-option span {
    width: 100%;
  }

  .hand {
    padding-inline: 44px;
  }

  .seat {
    width: 150px;
    min-width: 0;
    font-size: 0.8rem;
  }

  .seat .avatar.seat-avatar {
    width: 64px;
  }

  .seat-name {
    max-width: 112px;
    font-size: 0.86rem;
  }

  .seat-points {
    left: 50%;
    right: auto;
    top: 68px;
    font-size: 0.61rem;
  }

  .seat-points strong {
    font-size: 0.7rem;
  }

  .seat-profile-popup {
    gap: 6px;
  }

  .seat-action {
    min-height: 28px;
    font-size: 0.8rem;
  }

  .card {
    width: clamp(38px, 13vw, 46px);
    min-height: 58px;
    padding-inline: 4px;
    font-size: 0.84rem;
  }

  .played-card {
    width: 52px;
    min-height: 76px;
  }

  .trick .played-card.from-seat-1 {
    --table-y: 72px;
  }

  .trick .played-card.from-seat-2 {
    --table-x: -82px;
  }

  .trick .played-card.from-seat-3 {
    --table-y: -72px;
  }

  .trick .played-card.from-seat-4 {
    --table-x: 82px;
  }

  .contract-strip {
    padding: 8px;
    font-size: 0.86rem;
  }

  .contract-strip strong {
    font-size: 0.92rem;
  }
}

@media (max-width: 760px) {
  body:has(.app:not(.hidden)) {
    background: #111b22;
  }

  .shell {
    padding-bottom: 86px;
  }

  .app {
    gap: 12px;
  }

  .topbar {
    color: #fff;
    background: #141e26;
    border-bottom: 0;
  }

  .topbar > div:first-child {
    display: none;
  }

  .userbar {
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    padding-bottom: 0;
  }

  #currentUser {
    color: #fff;
  }

  .userbar > .ghost:not(.sound-toggle),
  .userbar > #logoutButton {
    display: none;
  }

  .language-select {
    max-width: 128px;
    color: #f7f2e9;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
  }

  .language-flag-select {
    max-width: 96px;
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(36, 42, 42, 0.97), rgba(25, 31, 31, 0.99));
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.28);
  }

  .mobile-nav-button {
    display: grid;
    gap: 3px;
    place-items: center;
    min-width: 0;
    min-height: 52px;
    padding: 3px 2px;
    border: 0;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.82);
    background: transparent;
  }

  .mobile-nav-button span {
    color: #f0e9d7;
    font-size: 1.8rem;
    line-height: 1;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
  }

  .mobile-nav-button small {
    max-width: 100%;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.62rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-nav-button.active span,
  .mobile-nav-button.active small {
    color: #d9aa42;
  }

  .lobby-actions {
    grid-template-columns: 1fr 1fr;
  }

  .lobby-actions .primary,
  .lobby-actions .ghost {
    min-height: 62px;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
    font-size: 1.05rem;
  }

  #fastGameButton {
    background: linear-gradient(180deg, #f3c45b, #d89623);
    box-shadow: inset 0 0 0 1px rgba(255, 241, 169, 0.45);
  }

  #createGameButton {
    background: linear-gradient(180deg, #67c96c, #3f9950);
    box-shadow: inset 0 0 0 1px rgba(191, 255, 186, 0.36);
  }

  .open-table-list {
    color: #f6f7f3;
  }

  .open-table-row {
    border-color: rgba(111, 181, 218, 0.34);
    background: #202a38;
  }

  .open-table-row .meta {
    color: rgba(255, 255, 255, 0.62);
  }

  .table-filters select {
    color: #fff;
    background: #687088;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }

  .table-mode {
    gap: 0;
  }

  .table-mode .topbar,
  .table-mode .mobile-bottom-nav,
  .table-mode .side,
  .table-mode .room-head {
    display: none;
  }

  .table-mode + .mobile-bottom-nav {
    display: none;
  }

  .layout.table-focus {
    margin: -8px;
  }

  .layout.table-focus .table-panel {
    min-height: 100svh;
    padding: 0;
  }

  .waiting-table-stage {
    min-height: 100svh;
    padding: 0 0 max(78px, env(safe-area-inset-bottom));
    border-radius: 0;
    background:
      radial-gradient(ellipse at center, var(--table-center, rgba(27, 112, 78, 0.92)) 0 42%, rgba(13, 18, 25, 0) 43% 100%),
      linear-gradient(180deg, #101a22, #0d1118);
  }

  .waiting-table-stage.deck-red {
    --table-center: rgba(125, 37, 35, 0.95);
  }

  .waiting-table-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 0;
    background: rgba(18, 29, 38, 0.96);
  }

  .waiting-table-header strong {
    display: none;
  }

  .waiting-table-header span {
    color: #fff;
    font-size: clamp(0.82rem, 4.2vw, 0.98rem);
    line-height: 1.15;
  }

  .waiting-table-header [data-copy-invite] {
    justify-self: start;
    width: min(236px, calc(100vw - 138px));
    min-height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 0.95rem;
  }

  .invite-strip {
    display: none;
  }

  .waiting-table {
    min-height: calc(100svh - 150px);
    margin: 8px 0 0;
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(ellipse at center, rgba(24, 119, 83, 0.96) 0 44%, rgba(19, 24, 31, 0) 45% 100%);
  }

  .waiting-table::before {
    content: "";
    position: absolute;
    inset: 9% 18% 11%;
    border: 15px solid rgba(10, 12, 15, 0.62);
    border-radius: 48% / 34%;
    pointer-events: none;
  }

  .waiting-seat {
    width: min(210px, 46vw);
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .waiting-seat.empty {
    display: none;
  }

  .waiting-seat.seat-1 {
    bottom: 62px;
  }

  .waiting-seat.seat-2 {
    left: 10px;
    top: 47%;
  }

  .waiting-seat.seat-3 {
    top: 16px;
  }

  .waiting-seat.seat-4 {
    right: 10px;
    top: 47%;
  }

  .waiting-seat-name {
    position: relative;
    z-index: 2;
    width: max-content;
    max-width: min(170px, 42vw);
    padding: 6px 10px;
    color: #fff;
    background: rgba(0, 0, 0, 0.66);
  }

  .waiting-seat-name span {
    display: none;
  }

  .waiting-seat-avatar {
    z-index: 3;
    margin: -8px auto 0;
  }

  .waiting-seat-avatar .avatar.large {
    width: clamp(74px, 22vw, 96px);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.35);
  }

  .ready-mark.lobby-ready {
    right: -2px;
    bottom: 2px;
  }

  .lobby-stats {
    position: relative;
    z-index: 2;
    width: max-content;
    max-width: min(230px, 52vw);
    margin-top: -4px;
    color: #a7ffa7;
    font-size: 0.82rem;
    background: rgba(0, 0, 0, 0.62);
  }

  .kick-button.icon-only {
    position: absolute;
    right: 4px;
    top: 62px;
    z-index: 5;
  }

  .waiting-actions {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 6;
    display: grid;
    grid-template-columns: 1fr;
    width: min(260px, calc(100vw - 24px));
    transform: translateX(-50%);
  }

  .mobile-add-bot-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.12);
    font-weight: 900;
  }

  .leave-table-button {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 8;
    width: 46px;
    min-width: 46px;
    min-height: 38px;
    padding: 0;
    color: #842329;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
    font-size: 0;
  }

  .leave-table-button::before {
    content: "↪";
    font-size: 1.35rem;
    font-weight: 900;
  }

  .ready-button,
  .leave-table-button {
    min-height: 46px;
    font-size: 1rem;
  }

  .ready-button,
  .mobile-add-bot-button {
    width: 100%;
  }

  .leave-table-button {
    min-height: 38px;
    font-size: 0;
  }
}

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