/* ── 斗地主 AI 牌桌 (production) ── */
.cr-shell { display: grid; gap: 16px; color: #f8fafc; }

/* Hero */
.cr-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 22px;
  background:
    radial-gradient(circle at 10% 0%, rgba(245,158,11,.24), transparent 32%),
    radial-gradient(circle at 90% 10%, rgba(34,197,94,.20), transparent 32%),
    linear-gradient(135deg, rgba(15,23,42,.94), rgba(20,83,45,.82));
  box-shadow: 0 18px 42px rgba(2,6,23,.20);
}
.cr-hero h1 { margin: 0; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.04em; }
.cr-hero h1, .cr-room-head h2, .cr-table-topbar h2 { margin: 0; }
.cr-eyebrow { margin: 0 0 6px; color: #facc15; font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.cr-muted { color: #cbd5e1; }

/* Room panel */
.cr-room-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 22px;
  background: rgba(15,23,42,.78);
  box-shadow: 0 18px 42px rgba(2,6,23,.20);
}
.cr-room-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.cr-room-head h2 { margin: 0 0 4px; font-size: 20px; }

.cr-message {
  max-width: 520px; margin: 0; padding: 9px 12px;
  border-radius: 999px; background: rgba(255,255,255,.13);
  color: #f8fafc; font-size: 13px; font-weight: 800; backdrop-filter: blur(8px);
}
.cr-message.is-error { background: rgba(127,29,29,.78); color: #fecaca; }

/* Join bar */
.cr-join-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.cr-join-bar label { display: grid; gap: 5px; color: #bbf7d0; font-size: 12px; font-weight: 900; }
.cr-join-bar input {
  min-width: 200px; padding: 9px 11px;
  border: 1px solid rgba(148,163,184,.42); border-radius: 12px;
  background: rgba(255,255,255,.94); color: #0f172a; font-weight: 800;
}

/* Seat status chips */
.cr-seat-status { display: flex; flex-wrap: wrap; gap: 10px; }
.cr-seat-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px dashed rgba(148,163,184,.34);
  border-radius: 12px; color: #cbd5e1; font-size: 14px;
}
.cr-seat-chip.is-filled { border-style: solid; color: #f8fafc; background: rgba(255,255,255,.08); }
.cr-seat-chip span { color: #fde68a; font-weight: 900; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border: 1px solid rgba(255,255,255,.20);
  border-radius: 12px; background: rgba(30,41,59,.82); color: #f8fafc;
  font-size: 14px; font-weight: 900; cursor: pointer; transition: transform .14s, background .14s;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary { border-color: rgba(34,197,94,.52); background: linear-gradient(135deg, rgba(22,101,52,.92), rgba(6,95,70,.82)); }
.btn:disabled { cursor: wait; opacity: .55; }
.btn.is-loading::after {
  content: ''; display: inline-block; width: .8em; height: .8em; margin-left: 8px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  vertical-align: -1px; animation: cr-spin .75s linear infinite;
}
@keyframes cr-spin { to { transform: rotate(360deg); } }

/* Card table */
.cr-table-shell {
  position: relative; padding: 20px;
  border: 10px solid #7c4a21; border-radius: 34px;
  background:
    radial-gradient(circle at 50% 48%, rgba(74,222,128,.25), transparent 26%),
    radial-gradient(circle at center, #26734a 0%, #14532d 58%, #052e16 100%);
  box-shadow: inset 0 0 70px rgba(0,0,0,.32), 0 26px 70px rgba(2,6,23,.28);
  overflow: hidden;
}
.cr-table-shell::before {
  content: ''; position: absolute; inset: 18px;
  border: 1px dashed rgba(255,255,255,.18); border-radius: 26px; pointer-events: none;
}

.cr-table-topbar {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  position: relative; z-index: 1;
}

.cr-table-layout {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(230px, .92fr) minmax(360px, 1.16fr) minmax(230px, .92fr);
  grid-template-areas: "seat1 center seat2" ". seat0 .";
  gap: 18px; min-height: 620px; margin-top: 18px; align-items: center;
}

/* Seats */
.cr-seat, .cr-center-panel {
  min-width: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 22px;
  background: rgba(15,23,42,.48); color: #f8fafc;
  box-shadow: 0 18px 38px rgba(2,6,23,.22); backdrop-filter: blur(8px);
}
.cr-seat {
  position: relative; display: grid; gap: 10px;
  min-height: 230px; padding: 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cr-seat-0 { grid-area: seat0; min-height: 250px; }
.cr-seat-1 { grid-area: seat1; }
.cr-seat-2 { grid-area: seat2; }

.cr-seat.is-turn {
  border-color: rgba(250,204,21,.92);
  box-shadow: 0 0 0 3px rgba(250,204,21,.22), 0 0 34px rgba(250,204,21,.38), 0 18px 38px rgba(2,6,23,.26);
  transform: translateY(-3px);
}
.cr-seat.is-turn::before {
  content: '当前出牌'; position: absolute; top: -13px; right: 18px;
  padding: 4px 10px; border-radius: 999px;
  background: #facc15; color: #422006; font-size: 12px; font-weight: 900;
}

.cr-seat-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cr-seat-head strong { font-size: 17px; }
.cr-role {
  padding: 4px 9px; border-radius: 999px;
  background: rgba(148,163,184,.20); color: #e2e8f0; font-size: 12px; font-weight: 900;
}
.cr-seat.is-landlord .cr-role {
  background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #422006;
}
.cr-hand-count, .cr-seat-meta { color: #cbd5e1; font-size: 13px; font-weight: 800; }
.cr-seat.is-turn .cr-seat-meta { color: #fde68a; }
.cr-seat-hand {
  padding: 8px 6px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(2,6,23,.24);
  min-height: 56px;
}
.cr-seat-hand .cr-card { transform: scale(.82); margin-right: -10px; }
.cr-seat-hand .cr-card:hover { transform: scale(.82) translateY(-8px); }

.cr-seat-play-area {
  display: grid; gap: 6px; min-height: 86px; padding: 10px;
  border: 1px dashed rgba(255,255,255,.24); border-radius: 16px; background: rgba(2,6,23,.20);
}
.cr-play-zone { display: grid; align-content: center; min-height: 48px; }
.cr-play-cards { justify-content: center; gap: 5px; }
.cr-play-cards .cr-card { margin-right: 0; transform: scale(.94); }

.cr-pass-chip {
  display: inline-flex; align-items: center; width: fit-content;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(148,163,184,.22); color: #e2e8f0; font-size: 12px; font-weight: 900;
}

.cr-seat.has-played .cr-seat-play-area { border-color: rgba(250,204,21,.36); background: rgba(120,53,15,.20); }
.cr-seat.has-passed .cr-seat-play-area { border-color: rgba(148,163,184,.32); background: rgba(15,23,42,.34); }

/* Center panel */
.cr-center-panel {
  grid-area: center; display: grid; gap: 14px; padding: 18px; border-radius: 999px;
  background: radial-gradient(circle at center, rgba(255,255,255,.10), transparent 58%), rgba(5,46,22,.62);
  box-shadow: inset 0 0 34px rgba(0,0,0,.26), 0 18px 38px rgba(2,6,23,.20);
}
.cr-center-title { display: grid; gap: 5px; padding: 12px 18px; border-radius: 999px; background: rgba(2,6,23,.24); }
.cr-center-title span, .cr-label, .cr-status-grid span {
  color: #bbf7d0; font-size: 12px; font-weight: 900; letter-spacing: .03em;
}
.cr-center-title strong {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.cr-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.cr-status-grid > div, .cr-center-cards > div {
  min-width: 0; padding: 10px; border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px; background: rgba(2,6,23,.22);
}
.cr-center-cards { display: grid; gap: 10px; }
.cr-label { margin: 0 0 8px; }
.cr-status-grid strong, .cr-last-play {
  display: block; overflow: hidden; margin-top: 5px;
  text-overflow: ellipsis; white-space: nowrap; font-weight: 900; color: #fff;
}

/* Cards */
.cr-card-row { display: flex; flex-wrap: wrap; gap: 0; min-height: 48px; align-items: flex-start; }
.cr-center-card-row { justify-content: center; gap: 7px; }

.cr-card {
  position: relative; z-index: 1; display: inline-flex;
  align-items: center; justify-content: center;
  width: 42px; height: 58px; margin-right: -6px;
  border: 1px solid rgba(15,23,42,.24); border-radius: 9px;
  background: linear-gradient(145deg, #ffffff, #e2e8f0); color: #111827;
  box-shadow: 0 6px 12px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.72);
  font-family: Georgia, 'Times New Roman', serif; font-size: 15px; font-weight: 900; line-height: 1;
  transition: transform .16s ease, box-shadow .16s ease, z-index .16s ease;
}
.cr-center-card-row .cr-card { margin-right: 0; }
.cr-card:hover { z-index: 5; transform: translateY(-10px); box-shadow: 0 12px 22px rgba(0,0,0,.30); }
.cr-card.red-suit { color: #dc2626; }
.cr-card.joker { color: #7c3aed; border-color: rgba(124,58,237,.48); font-size: 13px; }
.cr-empty { color: #cbd5e1; }

/* Responsive */
@media (max-width: 1050px) {
  .cr-hero { flex-direction: column; align-items: flex-start; }
  .cr-table-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "seat1" "center" "seat2" "seat0";
    min-height: auto;
  }
  .cr-center-panel { border-radius: 26px; }
}
@media (max-width: 720px) {
  .cr-hero, .cr-table-shell, .cr-room-panel { padding: 14px; }
  .cr-table-shell { border-width: 6px; border-radius: 24px; }
  .cr-table-topbar, .cr-room-head { display: grid; }
  .cr-status-grid { grid-template-columns: 1fr; }
  .cr-card { width: 34px; height: 48px; margin-right: -6px; font-size: 12px; }
  .cr-card.joker { font-size: 11px; }
  .cr-join-bar .btn { width: 100%; justify-content: center; }
}