/* ══════════════════════════════════════════════════
   Design Tokens
   All game-critical sizes use clamp(min, vmin-pref, max)
   so they scale with the viewport's shorter edge,
   making the layout work in any iframe or rotation.
══════════════════════════════════════════════════ */
:root {
  /* Colors */
  --c-bg:            #e8c97a;
  --c-brown-900:     #2a1205;
  --c-brown-800:     #3c1b07;
  --c-brown-700:     #56270d;
  --c-brown-600:     #7a3d12;
  --c-brown-400:     #a36d24;
  --c-brown-200:     #c8943a;
  --c-cream-100:     #fff8e8;
  --c-cream-200:     #fff2c6;
  --c-cream-300:     #ffe8a9;
  --c-cream-400:     #f1c66d;
  --c-red-600:       #8b310e;
  --c-red-700:       #6d2209;
  --c-red-800:       #4d1b09;
  --c-red-200:       #c84700;
  --c-green-700:     #116149;
  --c-green-800:     #06392a;
  --c-green-600:     #1a7a5a;
  /* Felt colors for the arena */
  --c-felt-900:      #0b2e1c;
  --c-felt-800:      #0f3b24;
  --c-felt-700:      #1a5c3a;
  --c-felt-600:      #246b45;
  --c-felt-500:      #2d7d50;

  /* Card sizes — all vmin-based so they scale with the viewport */
  --card-w:          clamp(40px, 6.5vmin, 62px);
  --card-h:          clamp(55px, 8.8vmin, 84px);
  --card-corner:     clamp(10px, 1.6vmin, 16px);
  --card-center:     clamp(20px, 3.4vmin, 34px);
  --card-joker:      clamp(9px,  1.4vmin, 13px);
  --card-select-lift: clamp(10px, 2vmin, 18px);

  --card-mini-w:     clamp(32px, 5vmin, 44px);
  --card-mini-h:     clamp(44px, 7vmin, 60px);
  --card-mini-corner: clamp(8px, 1.2vmin, 11px);
  --card-mini-center: clamp(14px, 2.3vmin, 22px);
  --card-mini-joker:  clamp(7px, 1.1vmin, 10px);

  /* Touch targets */
  --btn-h:           clamp(38px, 6vmin, 52px);
  --btn-h-sm:        clamp(30px, 4.5vmin, 40px);
  --btn-h-lg:        clamp(44px, 7vmin, 60px);

  /* Spacing */
  --gap-xs:  clamp(3px,  0.5vmin, 5px);
  --gap-sm:  clamp(5px,  0.9vmin, 9px);
  --gap-md:  clamp(8px,  1.4vmin, 14px);
  --gap-lg:  clamp(14px, 2.3vmin, 22px);
  --gap-xl:  clamp(20px, 3.2vmin, 30px);

  /* Typography */
  --text-xs:   clamp(10px, 1.6vmin, 13px);
  --text-sm:   clamp(11px, 1.8vmin, 14px);
  --text-base: clamp(12px, 1.9vmin, 15px);
  --text-md:   clamp(13px, 2.1vmin, 17px);
  --text-lg:   clamp(15px, 2.4vmin, 20px);

  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  color: var(--c-brown-900);
  background: var(--c-bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

html {
  width: 100%;
  /* Rotated WebView shells can map visual vertical panning onto the layout x-axis. */
  overflow-x: auto;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: visible;
  overscroll-behavior-x: auto;
  overscroll-behavior-y: none;
}

#app {
  max-width: 100%;
  min-height: 100vh;
  min-height: 100svh;
}

h1, h2, h3, p { margin-top: 0; }
small, .muted, .subtitle { color: var(--c-brown-400); }

/* ── Buttons ── */
button, input { font: inherit; min-width: 0; }

button {
  max-width: 100%;
  min-height: var(--btn-h);
  border: 0;
  border-radius: 12px;
  padding: 0 clamp(10px, 1.8vmin, 16px);
  font-size: var(--text-base);
  font-weight: 800;
  color: #fff8df;
  background: var(--c-red-600);
  box-shadow: 0 4px 0 var(--c-red-800);
  cursor: pointer;
  overflow-wrap: anywhere;
  touch-action: manipulation;
  white-space: normal;
  transition: opacity 0.1s, transform 0.1s;
}

button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 var(--c-red-800); }
button:disabled { cursor: not-allowed; opacity: 0.42; }
button.primary { background: var(--c-green-700); box-shadow: 0 4px 0 var(--c-green-800); }
button.primary:active:not(:disabled) { box-shadow: 0 2px 0 var(--c-green-800); }
button.ghost { color: var(--c-brown-800); background: var(--c-cream-400); box-shadow: 0 4px 0 var(--c-brown-400); }
button.ghost:active:not(:disabled) { box-shadow: 0 2px 0 var(--c-brown-400); }

/* ── Inputs ── */
input {
  width: 100%;
  min-height: clamp(36px, 5.5vmin, 44px);
  border: 2px solid var(--c-brown-600);
  border-radius: 10px;
  padding: 0 10px;
  font-size: var(--text-base);
  color: var(--c-brown-900);
  background: var(--c-cream-100);
}

button:focus-visible,
input:focus-visible { outline: 3px solid #ffe06b; outline-offset: 2px; }

/* ══════════════════════════════════════════════════
   App wrapper & Phase backgrounds
══════════════════════════════════════════════════ */
.app {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding: 20px;
  overflow-wrap: anywhere;
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 241, 179, 0.85), transparent 28%),
    linear-gradient(135deg, #f2ca72, #c5511c 48%, #61310f);
  transition: background 0.55s ease;
}

.app.phase-calling,
.app.phase-redeal,
.app.phase-robbing,
.app.phase-doubling {
  background:
    radial-gradient(circle at 15% 15%, rgba(255, 238, 153, 0.85), transparent 30%),
    linear-gradient(135deg, #ffd166, #d65f22 52%, #4b2a0c);
}

.app.phase-playing {
  background:
    radial-gradient(circle at 85% 10%, rgba(122, 219, 174, 0.7), transparent 30%),
    linear-gradient(135deg, #ddb95e, #237a57 48%, #173c30);
}

.app.phase-result {
  background:
    radial-gradient(circle at 50% 5%, rgba(255, 248, 202, 0.85), transparent 30%),
    linear-gradient(135deg, #f1b34d, #9f321e 52%, #2f170c);
}

/* ── Shared panel / hero ── */
.hero, .panel {
  border: 2px solid var(--c-brown-800);
  border-radius: 20px;
  background: rgba(255, 245, 214, 0.93);
  box-shadow: 0 12px 0 rgba(60, 27, 7, 0.32);
}

.hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin: 0 auto 20px;
  max-width: 1440px;
  padding: 20px;
}
.hero > * { min-width: 0; }

.app.has-room .hero { margin-bottom: 14px; padding: 12px 16px; }
.app.has-room h1   { font-size: clamp(28px, 3.6vw, 44px); }
.app.has-room .subtitle { margin-bottom: 0; }

.app.has-session { padding-top: 16px; }
.app.has-session .hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: 16px;
}
.app.has-session .eyebrow,
.app.has-session .subtitle { display: none; }
.app.has-session h1 {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1;
}
.app.has-session .status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
  text-align: right;
}
.app.has-session .status span { align-self: center; font-weight: 800; }

.hero__brand { min-width: 0; }
.hero__tagline { margin: 4px 0 0; font-size: 13px; color: var(--c-brown-400); font-weight: 600; }
.eyebrow {
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--c-red-600);
  text-transform: uppercase;
}

h1 { margin-bottom: 8px; font-size: clamp(32px, 5.5vw, 68px); line-height: 0.95; }

.status {
  display: grid;
  gap: 6px;
  max-width: 100%;
  min-width: 140px;
  text-align: right;
}
.status strong,
.chips span {
  border-radius: 999px;
  padding: 7px 11px;
  color: #fff7db;
  background: var(--c-brown-800);
}

/* ── Alert ── */
.alert {
  border-radius: 10px;
  padding: 9px 12px;
  font-size: var(--text-sm);
  font-weight: 800;
  color: #fff7db;
  background: #9f321e;
}
.storage-alert { margin-bottom: 8px; }
.inline-alert  { margin: 0 0 10px; }

/* ══════════════════════════════════════════════════
   Route bar & page shell
══════════════════════════════════════════════════ */
.route-bar, .page-shell {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.route-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  border: 2px solid var(--c-brown-800);
  border-radius: 18px;
  padding: 9px 12px;
  background: rgba(255, 245, 214, 0.92);
  box-shadow: 0 8px 0 rgba(60, 27, 7, 0.26);
}

.route-title {
  display: grid;
  flex: 1 1 220px;
  gap: 2px;
  min-width: 0;
}
.route-title strong { font-size: 17px; }
.route-title span {
  font-size: 13px;
  color: var(--c-brown-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
  min-width: 0;
  max-width: 100%;
}
.route-actions button,
.back-button { box-shadow: none; min-height: 44px; }

.page-stack { display: block; }

/* ── Panel ── */
.panel {
  min-width: 0;
  max-width: 100%;
  padding: 16px;
}

/* ══════════════════════════════════════════════════
   Lobby layout
══════════════════════════════════════════════════ */
.lobby {
  display: grid;
  grid-template-columns: minmax(290px, 370px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.lobby.sub-page { grid-template-columns: 1fr; }

.side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.row {
  display: flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.full { width: 100%; margin: 10px 0; }

label, .section-title {
  display: flex;
  justify-content: space-between;
  margin: 12px 0 6px;
  font-weight: 800;
}

.rooms {
  display: grid;
  gap: 8px;
  max-height: 340px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.feed-list {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  min-height: 220px;
  max-height: min(52vh, 520px);
  overflow-y: auto;
  padding: 2px 2px 6px;
  -webkit-overflow-scrolling: touch;
}

/* ── Cards / panels shared ── */
.settings-card, .message-block, .room-card,
.player, .center, .settlement, .hand {
  max-width: 100%;
  min-width: 0;
  border: 2px solid var(--c-brown-600);
  border-radius: 16px;
  padding: 11px;
  background: var(--c-cream-300);
}

.room-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.room-card p, .room-card small { margin: 3px 0 0; }

.room-actions { display: grid; gap: 6px; min-width: 0; }

/* ── Chat / event feed ── */
.chat p, .events p {
  margin: 0;
  border-radius: 10px;
  padding: 7px 9px;
  font-size: var(--text-sm);
  background: var(--c-cream-300);
}
.feed-empty { color: var(--c-brown-400); text-align: center; font-style: italic; }
.events .danger  { color: #fff7db; background: #9f321e; }
.events .success { color: #fff7db; background: var(--c-green-700); }

/* ══════════════════════════════════════════════════
   Player cards (lobby / general context)
══════════════════════════════════════════════════ */
.table {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.42fr);
  grid-template-areas:
    "head head"
    "players players"
    "center center"
    "settlement settlement"
    "hand actions";
  gap: 14px;
  align-self: start;
  max-width: 100%;
  min-width: 0;
}

.table-head {
  grid-area: head;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-radius: 16px;
  padding: 13px;
  color: #fff7db;
  background: var(--c-brown-800);
  min-width: 0;
}
.table-head > * { min-width: 0; }
.table-head p   { margin-bottom: 0; color: #ffe9a8; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
  min-width: 0;
}
.chips span {
  color: #241104;
  background: #ffd66f;
  border-radius: 999px;
  padding: 5px 9px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.players {
  grid-area: players;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.player, .player strong, .player small,
.status strong { min-width: 0; overflow-wrap: anywhere; }

.player.active {
  outline: 3px solid var(--c-green-700);
  outline-offset: 2px;
  background: #d4ffe6;
}
.player.mine { background: var(--c-cream-200); box-shadow: inset 0 0 0 2px rgba(17, 97, 73, 0.16); }
.player em {
  border-radius: 999px;
  padding: 2px 5px;
  color: #fff8df;
  background: var(--c-red-600);
  font-style: normal;
  font-size: 11px;
}
.player > span,
.player > small { display: block; margin-top: 5px; }

.public-hand { margin-top: 7px; padding: 2px 2px 4px; }

.center {
  grid-area: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-width: 0;
}
.wallet { border-radius: 12px; padding: 9px 11px; background: var(--c-cream-200); }

.settlement {
  grid-area: settlement;
  grid-column: 1 / -1;
}
.settlement span {
  display: inline-block;
  margin: 0 5px 5px 0;
  border-radius: 999px;
  padding: 4px 8px;
  color: #fff7db;
  background: var(--c-brown-800);
}

.actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  align-content: end;
  border: 2px solid var(--c-brown-800);
  border-radius: 16px;
  padding: 11px;
  background: var(--c-cream-200);
  min-width: 0;
}
.actions button { min-height: var(--btn-h-lg); }

.action-summary {
  grid-column: 1 / -1;
  margin: 0;
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--c-brown-800);
  background: var(--c-cream-300);
  font-weight: 900;
  font-size: var(--text-sm);
  text-align: center;
}

.hand { grid-area: hand; min-width: 0; max-width: 100%; }
.hand h3 { display: flex; flex-wrap: wrap; gap: 5px; justify-content: space-between; }
.hand .cards { padding: 24px 4px 12px; }
.hand .card--hand { touch-action: pan-x pan-y; user-select: none; -webkit-user-select: none; }

.back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 10px;
  padding: 0 12px;
  color: #fff7db;
  background: var(--c-brown-800);
}

/* ── Playing-phase primary spans full width ── */
.phase-playing .actions .primary,
.phase-result  .actions .primary { grid-column: 1 / -1; }

/* ══════════════════════════════════════════════════
   Card strip
══════════════════════════════════════════════════ */
.card-strip, .cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  align-items: flex-end;
  max-width: 100%;
  min-width: 0;
}

.card-strip--scrollable {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x pan-y;
  user-select: none;
  -webkit-overflow-scrolling: touch;
  -webkit-user-select: none;
  scrollbar-width: thin;
  scrollbar-color: var(--c-brown-400) transparent;
}

.card-strip--mini  { gap: var(--gap-xs); }
.cards.compact     { min-height: clamp(44px, 7vmin, 58px); }

/* ══════════════════════════════════════════════════
   Card shell — all sizes use CSS custom properties
   so changing --card-w/h is all that is needed
══════════════════════════════════════════════════ */
.card {
  --card-w:           clamp(40px, 6.5vmin, 62px);
  --card-h:           clamp(55px, 8.8vmin, 84px);
  --card-corner-size: clamp(10px, 1.6vmin, 16px);
  --card-center-size: clamp(20px, 3.4vmin, 34px);
  --card-joker-size:  clamp(9px,  1.4vmin, 13px);
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: stretch;
  justify-content: stretch;
  width: var(--card-w);
  min-width: var(--card-w);
  height: var(--card-h);
  min-height: var(--card-h);
  padding: 0;
  border: 2px solid var(--c-brown-800);
  border-radius: clamp(7px, 1.2vmin, 11px);
  color: #15100a;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.95), transparent 28%),
    linear-gradient(145deg, #fffdf2, #f4dfaa);
  box-shadow: 0 clamp(3px, 0.7vmin, 6px) 0 #9c7a4b;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  transition: background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.card--hand {
  --card-w:           clamp(44px, 7vmin, 66px);
  --card-h:           clamp(60px, 9.5vmin, 90px);
  --card-corner-size: clamp(11px, 1.75vmin, 17px);
  --card-center-size: clamp(22px, 3.6vmin, 36px);
  --card-joker-size:  clamp(10px, 1.55vmin, 14px);
}

.card--table {
  --card-w:           clamp(42px, 6.8vmin, 64px);
  --card-h:           clamp(57px, 9.1vmin, 86px);
}

.card--mini {
  --card-w:           clamp(32px, 5vmin, 44px);
  --card-h:           clamp(44px, 7vmin, 60px);
  --card-corner-size: clamp(8px,  1.2vmin, 11px);
  --card-center-size: clamp(14px, 2.3vmin, 22px);
  --card-joker-size:  clamp(7px,  1.1vmin, 10px);
  border-width: 1px;
  border-radius: clamp(5px, 0.9vmin, 8px);
  box-shadow: 0 clamp(2px, 0.4vmin, 4px) 0 #9c7a4b;
}

.card--interactive {
  cursor: pointer;
  touch-action: pan-x pan-y;
  user-select: none;
  -webkit-tap-highlight-color: rgba(17, 97, 73, 0.2);
  -webkit-user-select: none;
}
.card--interactive:focus-visible { outline: 3px solid #ffe06b; outline-offset: 2px; }

.card.is-selected {
  transform: translateY(-16px);
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.95), transparent 28%),
    linear-gradient(145deg, #eefff4, #c8f6dc);
  box-shadow: 0 clamp(5px, 1.1vmin, 10px) 0 var(--c-green-700);
}

/* ══════════════════════════════════════════════════
   Full-screen game table
══════════════════════════════════════════════════ */

/* Strip away app chrome when in game */
.app.route-table.has-session {
  padding: 0;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.app.route-table.has-session .page-shell  { display: contents; }
.app.route-table.has-session .page-stack  { display: contents; }
.app.route-table.has-session > header,
.app.route-table.has-session .route-bar,
.app.route-table.has-session .inline-alert { display: none; }

/* ── Game table grid ─────────────────────────────
   Layout: 2 columns (hand 1fr | actions fixed-w)
           3 rows  (topbar | arena 1fr | hand+actions)
   Named areas eliminate implicit-column ambiguity
   that caused the actions bar to be misplaced.
   Rotated WebView shells can map visual vertical panning onto the layout x-axis.
──────────────────────────────────────────────── */
.game-table {
  /* hand-card height token (drives --gt-hand row) */
  --card-h:         clamp(60px, 9.5vmin, 90px);
  --gt-topbar:      clamp(38px, 6vmin, 50px);
  /* hand row = card-h + strip-pad-top(20) + strip-pad-bot(6) + info(20) + row-pad(8) */
  --gt-hand:        calc(var(--card-h) + clamp(52px, 8vmin, 68px));
  --gt-actions-w:   clamp(108px, 21vmin, 172px);

  display: grid;
  grid-template-columns: 1fr var(--gt-actions-w);
  grid-template-rows: var(--gt-topbar) 1fr var(--gt-hand);
  grid-template-areas:
    "topbar  topbar"
    "arena   arena"
    "hand    actions";
  width: 100%;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  background: var(--c-felt-900);
}

/* ── Top bar ── */
.game-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 0 clamp(8px, 1.5vmin, 14px);
  border-bottom: 1px solid rgba(255, 245, 214, 0.18);
  background: rgba(30, 12, 4, 0.88);
  backdrop-filter: blur(8px);
  min-height: var(--gt-topbar);
  z-index: 10;
}

/* ── Arena (felt) ── */
.game-table__arena {
  grid-area: arena;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--gap-xs);
  overflow: hidden;
  padding: clamp(4px, 0.8vmin, 8px);
  background:
    radial-gradient(ellipse at 50% 45%,
      var(--c-felt-500) 0%,
      var(--c-felt-700) 45%,
      var(--c-felt-900) 100%);
  /* stretch: columns fill full arena height */
  align-items: stretch;
}

/* ── Opponent seats ── */
.game-table__opp {
  display: flex;
  flex-direction: column;
  /* pin seat to top so it's always visible */
  justify-content: flex-start;
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
  padding-top: clamp(4px, 1vmin, 10px);
}

/* ── Center column ── */
.game-table__center-col {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  min-width: 0;
  overflow: hidden;
  align-items: center;
  /* vertically center the 底牌/桌面 content */
  justify-content: center;
}

/* ── Self row (hand area) ── */
.game-table__self-row {
  grid-area: hand;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* minimal row padding — card-lift space comes from strip's own padding-top */
  padding: clamp(4px, 0.6vmin, 6px) clamp(6px, 1.2vmin, 12px) clamp(2px, 0.4vmin, 4px);
  min-width: 0;
  overflow: hidden;
  background: rgba(18, 8, 2, 0.72);
  border-top: 1px solid rgba(255, 245, 214, 0.1);
}

.game-table__self-info {
  display: flex;
  gap: var(--gap-sm);
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: clamp(2px, 0.4vmin, 4px);
  font-size: var(--text-xs);
  min-width: 0;
  color: rgba(255, 245, 214, 0.85);
}
.game-table__self-info strong {
  font-size: var(--text-sm);
  font-weight: 900;
  color: var(--c-cream-100);
}

/* padding-top creates a pocket inside the strip's own padding box.
   overflow clips at the padding edge, so translateY(-16px) cards
   lift into this space and are NOT clipped by overflow-x:auto. */
.game-table__hand { padding: 20px 0 clamp(4px, 0.8vmin, 8px); }

.game-table__no-room,
.game-table__spectator {
  margin: 4px 0;
  font-size: var(--text-xs);
  color: rgba(255, 245, 214, 0.6);
}

/* ── Action bar — right column, vertical button stack ── */
.game-table .actions {
  /* grid-area: actions is already set by base .actions rule */
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.7vmin, 7px);
  align-items: stretch;
  padding: clamp(4px, 0.8vmin, 8px) clamp(6px, 1.2vmin, 10px);
  border: none;
  border-radius: 0;
  border-left: 1px solid rgba(255, 245, 214, 0.1);
  background: rgba(18, 8, 2, 0.82);
  backdrop-filter: blur(6px);
  box-shadow: none;
  overflow: hidden;
  grid-template-columns: unset; /* cancel base 2-col grid */
}

.game-table .actions button {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: 8px;
  padding: 0 clamp(4px, 0.8vmin, 8px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-table .action-summary {
  flex: 0 0 auto;
  color: var(--c-cream-300);
  background: rgba(255, 245, 214, 0.08);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: var(--text-xs);
  text-align: center;
  line-height: 1.3;
  order: -1;
}

/* ── Opponent player card (in game table) ── */
.game-table .player {
  padding: clamp(5px, 0.9vmin, 9px) clamp(6px, 1.1vmin, 11px);
  font-size: var(--text-xs);
  border: 1px solid rgba(255, 245, 214, 0.18);
  border-radius: clamp(8px, 1.4vmin, 14px);
  background: rgba(18, 8, 2, 0.55);
  color: var(--c-cream-300);
  backdrop-filter: blur(4px);
  box-shadow: none;
}
.game-table .player strong { font-size: var(--text-sm); color: var(--c-cream-100); }
.game-table .player small  { font-size: var(--text-xs); color: rgba(255, 245, 214, 0.65); }
.game-table .player em {
  background: var(--c-red-600);
  color: #fff8df;
  font-size: var(--text-xs);
}
.game-table .player.active {
  border-color: rgba(45, 200, 140, 0.7);
  background: rgba(17, 97, 73, 0.25);
}
.game-table .player.mine {
  background: rgba(17, 97, 73, 0.15);
  box-shadow: inset 0 0 0 1px rgba(45, 200, 140, 0.3);
}

/* ── Table center (底牌 / 桌面) ── */
.game-table .center {
  padding: clamp(6px, 1.2vmin, 11px);
  background: rgba(18, 8, 2, 0.45);
  border: 1px solid rgba(255, 245, 214, 0.14);
  border-radius: clamp(8px, 1.4vmin, 14px);
  backdrop-filter: blur(4px);
  color: var(--c-cream-300);
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-sm);
  width: 100%;
}
.game-table .center h3 {
  font-size: var(--text-xs);
  color: rgba(255, 245, 214, 0.6);
  margin-bottom: clamp(3px, 0.6vmin, 6px);
}

/* ── Settlement (result) ── */
.game-table .settlement {
  background: rgba(18, 8, 2, 0.6);
  border: 1px solid rgba(255, 245, 214, 0.14);
  color: var(--c-cream-100);
  border-radius: clamp(8px, 1.4vmin, 14px);
  padding: clamp(6px, 1.2vmin, 11px);
  font-size: var(--text-sm);
  width: 100%;
}
.game-table .settlement h3 { color: #ffd66f; font-size: var(--text-md); margin-bottom: clamp(4px, 0.7vmin, 7px); }
.game-table .settlement p  { margin-bottom: 2px; }

/* ══════════════════════════════════════════════════
   Media queries (lobby / general — not game table)
══════════════════════════════════════════════════ */
@media (max-width: 1360px) {
  .lobby { grid-template-columns: minmax(270px, 350px) minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .table {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "players" "center" "settlement" "hand" "actions";
  }
  .actions { align-content: stretch; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
  .app.has-session .hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .app.has-session .status { justify-content: flex-start; text-align: left; }
  .table-head { flex-direction: column; }
  .chips { justify-content: flex-start; }
  .players { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
  .room-card { grid-template-columns: 1fr; }
  .room-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (orientation: landscape) and (min-width: 900px) and (max-height: 900px) {
  .app.route-table.has-session {
    padding: 0;
  }

  .app.route-table.has-session .panel {
    padding: 12px;
    border-radius: 18px;
    box-shadow: 0 10px 0 rgba(60, 27, 7, 0.3);
  }

  .app.route-table.has-session .table {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
    gap: 10px;
  }

  .app.route-table.has-session .actions {
    gap: 8px;
  }

  .app.route-table.has-session .actions button {
    min-height: 58px;
    font-weight: 900;
  }

  /* game-table action buttons must fit inside --gt-hand regardless of how
     many are shown (up to 3 in playing phase).  The rule above sets
     min-height:58px for lobby/pre-game; here we cancel it for the in-game
     panel so flex can distribute the available height without overflowing. */
  .app.route-table.has-session .game-table .actions button {
    min-height: 0;
  }

  .app.route-table.has-session .hand .cards {
    padding-top: 22px;
    padding-bottom: 8px;
  }

  .app.route-table.has-session .card--hand {
    --card-w: 58px;
    --card-h: 76px;
    --card-corner-size: 15px;
    --card-center-size: 31px;
    --card-joker-size: 12px;
  }
}

@media (max-width: 820px) {
  .lobby, .side { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .app { padding: 10px; }
  .hero, .table-head, .center { flex-direction: column; }
  .hero, .panel { border-radius: 16px; box-shadow: 0 8px 0 rgba(60, 27, 7, 0.3); }
  .hero { gap: 10px; margin-bottom: 12px; padding: 14px; }
  .app.has-room .hero { padding: 10px 12px; }
  .app.has-session .hero { grid-template-columns: 1fr; }
  .app.has-session .status { justify-content: flex-start; text-align: left; }
  .route-bar { align-items: stretch; flex-direction: column; }
  .route-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }
  h1 { font-size: clamp(28px, 11vw, 44px); }
  .status {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }
  .players {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .player { padding: 9px 8px; font-size: 13px; }
  .row, .room-card { flex-wrap: wrap; }
  .room-actions { grid-template-columns: 1fr 1fr; }
  .actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .row button {
    flex: 1 1 0;
  }
}

/* ══════════════════════════════════════════════════
   Animations
══════════════════════════════════════════════════ */
@keyframes card-in {
  from { opacity: 0; transform: scale(0.72) translateY(5px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes pulse-turn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 200, 140, 0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(45, 200, 140, 0); }
}

@keyframes settlement-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.card-strip--table .card { animation: card-in 0.15s ease-out both; }

.game-table .player.active { animation: pulse-turn 1.5s ease-in-out infinite; }

.game-table .settlement { animation: settlement-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both; }

.game-topbar__countdown { transition: background 0.3s, color 0.3s; }

.chat-feed[data-v-4eccb3f4] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.chat-feed__section h3[data-v-4eccb3f4] {
  font-size: 14px;
  font-weight: 800;
  color: #3c1b07;
  margin: 0 0 8px;
}
.chat-feed__list[data-v-4eccb3f4] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  line-height: 1.4;
}
.chat-feed__list p[data-v-4eccb3f4] {
  margin: 0;
  color: #3c1b07;
}
.chat-feed__list .feed-empty[data-v-4eccb3f4] {
  color: #8c6a3d;
  font-style: italic;
}
.chat-feed__list .danger[data-v-4eccb3f4] {
  color: #c84700;
}
.chat-feed__list .success[data-v-4eccb3f4] {
  color: #107000;
}
.chat-feed__input-row[data-v-4eccb3f4] {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.chat-feed__input-row input[data-v-4eccb3f4] {
  flex: 1;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 13px;
}
.chat-feed__input-row button[data-v-4eccb3f4] {
  min-height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
}

.room-card__info[data-v-61a92097] {
  min-width: 0;
  flex: 1;
}
.room-card__title-row[data-v-61a92097] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  margin-bottom: 4px;
}
.room-card__title-row strong[data-v-61a92097] {
  font-size: 15px;
  font-weight: 900;
  color: #3c1b07;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-card__phase-badge[data-v-61a92097] {
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  color: #fff7db;
  background: #3c1b07;
  flex-shrink: 0;
  white-space: nowrap;
}
.room-card__meta[data-v-61a92097] {
  font-size: 12px;
  color: #66411c;
  margin: 0 0 8px;
}
.room-card__seats[data-v-61a92097] {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}
.room-card__seat[data-v-61a92097] {
  display: inline-block;
  width: 18px;
  height: 8px;
  border-radius: 999px;
  background: #d4b87a;
  transition: background 0.2s;
}
.room-card__seat.filled[data-v-61a92097] {
  background: #8b310e;
}
.room-card__seat-label[data-v-61a92097] {
  font-size: 11px;
  font-weight: 800;
  color: #66411c;
  margin-left: 4px;
}
.room-card__notice[data-v-61a92097] {
  color: #66411c;
  font-size: 12px;
}

.lobby-profile[data-v-fd6fdf54] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.lobby-profile__avatar[data-v-fd6fdf54] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 900;
  color: #fff7db;
  background: #8b310e;
  flex-shrink: 0;
}
.lobby-profile__info[data-v-fd6fdf54] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lobby-profile__info strong[data-v-fd6fdf54] {
  font-size: 16px;
  font-weight: 900;
  color: #3c1b07;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lobby-profile__info span[data-v-fd6fdf54] {
  font-size: 13px;
  color: #66411c;
}
.lobby-divider[data-v-fd6fdf54] {
  border: none;
  border-top: 2px solid rgba(60, 27, 7, 0.15);
  margin: 16px 0;
}
.lobby-field[data-v-fd6fdf54] {
  margin-bottom: 12px;
}
.lobby-field label[data-v-fd6fdf54] {
  display: block;
  justify-content: flex-start;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 800;
  color: #66411c;
}
.lobby-active-room[data-v-fd6fdf54] {
  margin-top: 12px;
  font-size: 13px;
}
.lobby-empty[data-v-fd6fdf54] {
  text-align: center;
  padding: 24px 12px;
}
.lobby-empty p[data-v-fd6fdf54] {
  margin: 4px 0;
  font-weight: 700;
  color: #3c1b07;
}

.card-suit-icon {
  display: block;
  fill: currentColor;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.card-face {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: #16100a;
}
.card-face--red,
.card-face--joker-red {
  color: #bc241d;
}
.card-face--black,
.card-face--joker-black {
  color: #17110a;
}
.card-face__corner {
  position: absolute;
  z-index: 1;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 1px;
  min-width: calc(var(--card-corner-size) + 2px);
  line-height: 0.9;
  white-space: nowrap;
}
.card-face__corner--top {
  top: 5px;
  left: 5px;
}
.card-face__corner--bottom {
  right: 5px;
  bottom: 5px;
  transform: rotate(180deg);
}
.card-face__rank {
  font-size: var(--card-corner-size);
  font-weight: 1000;
  letter-spacing: -0.04em;
}
.card-face__corner-icon {
  width: calc(var(--card-corner-size) * 0.72);
  height: calc(var(--card-corner-size) * 0.72);
}
.card-face__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.card-face__center-icon {
  width: var(--card-center-size);
  height: var(--card-center-size);
  filter: drop-shadow(0 1px 0 rgba(60, 27, 7, 0.18));
}
.card-face--joker-black .card-face__rank,
.card-face--joker-red .card-face__rank {
  font-size: var(--card-joker-size);
  letter-spacing: -0.08em;
  line-height: 0.92;
}
.card--mini .card-face__corner--top {
  top: 3px;
  left: 3px;
}
.card--mini .card-face__corner--bottom {
  right: 3px;
  bottom: 3px;
}

.chat-drawer[data-v-97ce0fc0] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  pointer-events: none;
}
.chat-drawer.open[data-v-97ce0fc0] {
  pointer-events: auto;
}
.chat-drawer__overlay[data-v-97ce0fc0] {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.25s;
}
.chat-drawer.open .chat-drawer__overlay[data-v-97ce0fc0] {
  opacity: 1;
}
.chat-drawer__panel[data-v-97ce0fc0] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 85vw);
  background: #fff7db;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease-out;
}
.chat-drawer.open .chat-drawer__panel[data-v-97ce0fc0] {
  transform: translateX(0);
}
.chat-drawer__header[data-v-97ce0fc0] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 2px solid rgba(60, 27, 7, 0.2);
  background: rgba(255, 230, 179, 0.6);
}
.chat-drawer__header h2[data-v-97ce0fc0] {
  font-size: 16px;
  font-weight: 900;
  color: #3c1b07;
  margin: 0;
}
.chat-drawer__close[data-v-97ce0fc0] {
  min-height: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 700;
  color: #66411c;
  background: transparent;
  box-shadow: none;
  line-height: 1;
}
.chat-drawer__close[data-v-97ce0fc0]:hover {
  background: rgba(60, 27, 7, 0.1);
}
.chat-drawer__content[data-v-97ce0fc0] {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.game-topbar[data-v-348c366d] {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 0 clamp(8px, 1.5vmin, 14px);
  min-height: var(--gt-topbar, clamp(38px, 6vmin, 50px));
}
.game-topbar__left[data-v-348c366d] {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  flex-shrink: 0;
  min-width: 0;
  overflow: hidden;
}
.game-topbar__room[data-v-348c366d] {
  font-weight: 900;
  font-size: var(--text-sm);
  color: rgba(255, 245, 214, 0.8);
  white-space: nowrap;
}
.game-topbar__phase[data-v-348c366d] {
  border-radius: 999px;
  padding: 2px clamp(5px, 1vmin, 9px);
  font-size: var(--text-xs);
  font-weight: 800;
  color: #fff7db;
  background: rgba(255, 245, 214, 0.15);
  border: 1px solid rgba(255, 245, 214, 0.25);
  white-space: nowrap;
}
.game-topbar__countdown[data-v-348c366d] {
  border-radius: 999px;
  padding: 2px clamp(5px, 1vmin, 9px);
  font-size: var(--text-xs);
  font-weight: 900;
  color: #1a0a02;
  background: #ffd66f;
  white-space: nowrap;
}
.game-topbar__center[data-v-348c366d] {
  flex: 1;
  min-width: 0;
  text-align: center;
  overflow: hidden;
}
.game-topbar__hint[data-v-348c366d] {
  font-size: var(--text-sm);
  font-weight: 700;
  color: rgba(255, 245, 214, 0.75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-topbar__right[data-v-348c366d] {
  display: flex;
  gap: var(--gap-xs);
  flex-shrink: 0;
}
.game-topbar__btn[data-v-348c366d] {
  min-height: var(--btn-h-sm);
  min-width: var(--btn-h-sm);
  padding: 0;
  border-radius: 8px;
  font-size: clamp(14px, 2.2vmin, 18px);
  background: rgba(255, 245, 214, 0.1);
  box-shadow: none;
  line-height: 1;
  color: #fff8df;
}
.game-topbar__btn[data-v-348c366d]:active:not(:disabled) {
  transform: none;
  background: rgba(255, 245, 214, 0.2);
}

.modal-backdrop[data-v-0c291f19] {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 16px;
}
.modal-panel[data-v-0c291f19] {
  background: #fff7db;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  width: min(400px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-header[data-v-0c291f19] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 2px solid rgba(60, 27, 7, 0.2);
  background: rgba(255, 230, 179, 0.6);
}
.modal-header h2[data-v-0c291f19] {
  font-size: 18px;
  font-weight: 900;
  color: #3c1b07;
  margin: 0;
}
.modal-close[data-v-0c291f19] {
  min-height: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 700;
  color: #66411c;
  background: transparent;
  box-shadow: none;
  line-height: 1;
}
.modal-close[data-v-0c291f19]:hover {
  background: rgba(60, 27, 7, 0.1);
}
.modal-content[data-v-0c291f19] {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.modal-section h3[data-v-0c291f19] {
  font-size: 14px;
  font-weight: 800;
  color: #3c1b07;
  margin: 0 0 12px;
}
.info-list[data-v-0c291f19] {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  font-size: 14px;
}
.info-list dt[data-v-0c291f19] {
  font-weight: 700;
  color: #66411c;
}
.info-list dd[data-v-0c291f19] {
  font-weight: 600;
  color: #3c1b07;
  margin: 0;
}
.action-buttons[data-v-0c291f19] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.action-buttons button[data-v-0c291f19] {
  width: 100%;
  min-height: 44px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
}

/*
  Scoped overrides for TableView — mainly layout proportions.
  Actual sizing tokens (--card-h, --gt-topbar, etc.) live in style.css.
*/

/* Override arena column proportions here for fine-tuning */
.game-table__arena[data-v-6abfd886] {
  /* side columns: at minimum as wide as a mini card + padding */
  grid-template-columns:
    minmax(clamp(70px, 12vmin, 130px), 1fr)
    minmax(0, 2.2fr)
    minmax(clamp(70px, 12vmin, 130px), 1fr);
}