/* ---------- 房间整体 ---------- */
.room {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  height: 100dvh;
  overflow: hidden;
}

.loading {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-4);
  height: 100dvh;
  color: var(--text-muted);
}

.room-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) max(var(--space-4), env(safe-area-inset-right)) var(--space-2) max(var(--space-4), env(safe-area-inset-left));
  padding-top: max(var(--space-2), env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(8, 29, 24, 0.92), rgba(8, 29, 24, 0.45));
}

.room-id {
  display: grid;
  line-height: 1.1;
}

.room-id span {
  font-size: var(--text-xs);
  color: var(--text-faint);
  letter-spacing: 0.2em;
}

.room-id b {
  font-family: var(--font-rank);
  font-size: 1.5rem;
  letter-spacing: 0.12em;
  color: var(--brass-soft);
}

.room-title {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.room-title b {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.room-title span {
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* ---------- 绒布桌面 ---------- */
.felt {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'left top right'
    'left center right'
    'mine mine mine';
  gap: var(--space-3);
  min-height: 0;
  padding: var(--space-4) max(var(--space-4), env(safe-area-inset-right)) var(--space-2) max(var(--space-4), env(safe-area-inset-left));
}

.felt::before {
  content: '';
  position: absolute;
  inset: 2% 1.5% 0;
  border: 1px solid rgba(240, 211, 141, 0.12);
  border-radius: 50% / 38%;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.35), 0 0 0 10px rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

.seats-3 .felt {
  grid-template-areas:
    'left center right'
    'left center right'
    'mine mine mine';
}

.pos-left {
  grid-area: left;
  align-items: flex-start;
}

.pos-right {
  grid-area: right;
  align-items: flex-end;
}

.pos-top {
  grid-area: top;
  align-items: center;
}

.pos-me {
  grid-area: mine;
}

.center {
  grid-area: center;
  position: relative;
  display: grid;
  place-items: safe center;
  min-height: 0;
}

.seat-area {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  gap: var(--space-3);
  min-width: 0;
}

.pos-left .seat-zone {
  align-self: stretch;
  align-items: flex-start;
  padding-left: var(--space-4);
}

.pos-right .seat-zone {
  align-self: stretch;
  align-items: flex-end;
  padding-right: var(--space-4);
}

.pos-me {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
}

.pos-me .seat-zone {
  grid-column: 2;
  grid-row: 1;
}

.pos-me .seat-plate {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

/* ---------- 座位面板 ---------- */
.seat-plate {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 100%;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  backdrop-filter: blur(4px);
  transition: border-color var(--duration-normal), box-shadow var(--duration-normal);
}

.seat-plate.is-turn {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(214, 164, 65, 0.22), 0 0 28px rgba(240, 211, 141, 0.28);
}

.seat-plate.is-empty {
  border-style: dashed;
  background: rgba(8, 29, 24, 0.3);
}

.avatar {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f8e6b2, var(--brass) 58%, #8a6420);
  color: #2b1d05;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.35);
}

.is-empty .avatar {
  background: transparent;
  color: var(--text-faint);
  box-shadow: inset 0 0 0 1px var(--line);
}

.team-0 .avatar {
  box-shadow: 0 0 0 3px var(--team-0), 0 4px 10px rgba(0, 0, 0, 0.35);
}

.team-1 .avatar {
  box-shadow: 0 0 0 3px var(--team-1), 0 4px 10px rgba(0, 0, 0, 0.35);
}

.is-turn .avatar::after {
  content: '';
  position: absolute;
  inset: -7px;
  border: 2px solid var(--brass-soft);
  border-radius: 50%;
  animation: turn-ring 1.4s ease-out infinite;
}

@keyframes turn-ring {
  from {
    opacity: 0.9;
    transform: scale(0.9);
  }
  to {
    opacity: 0;
    transform: scale(1.35);
  }
}

.seat-info {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.seat-name {
  overflow: hidden;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.seat-name small {
  font-weight: 400;
  color: var(--text-faint);
}

.seat-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tag {
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.6;
  white-space: nowrap;
}

.tag-landlord {
  border-color: transparent;
  background: var(--lacquer);
  color: var(--brass-soft);
  font-family: var(--font-display);
  font-weight: 900;
  transform: rotate(-4deg);
}

.tag-place {
  border-color: transparent;
  background: var(--brass);
  color: #2b1d05;
  font-weight: 700;
}

.tag-soft {
  color: var(--text-faint);
}

.tag-warn {
  border-color: rgba(255, 170, 90, 0.45);
  color: #ffcf9a;
}

.tag-ready {
  border-color: rgba(120, 220, 160, 0.45);
  color: #a8f0c6;
}

.tag-team-0 {
  border-color: currentColor;
  color: var(--team-0);
}

.tag-team-1 {
  border-color: currentColor;
  color: var(--team-1);
}

.seat-score {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.seat-score.is-up {
  color: var(--brass-soft);
}

.seat-score.is-down {
  color: #ff9f8a;
}

.seat-count {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding-left: var(--space-2);
  color: var(--brass-soft);
  font-family: var(--font-rank);
  font-size: 1.35rem;
  font-weight: 700;
}

.count-back {
  width: 14px;
  height: 20px;
  border: 1.5px solid var(--paper);
  border-radius: 3px;
  background: linear-gradient(160deg, var(--lacquer-bright), var(--lacquer-deep));
}

.seat-count.is-warn {
  color: #ff8a70;
  animation: warn-blink 1s steps(2, start) infinite;
}

@keyframes warn-blink {
  to {
    opacity: 0.45;
  }
}

.seat-actions {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}

.seat-kick {
  margin-left: var(--space-2);
}

/* ---------- 出牌区 ---------- */
.seat-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: calc(var(--mini-h) + 22px);
}

.seat-zone.is-revealed {
  opacity: 0.9;
}

.seat-zone.is-revealed .played .card {
  filter: saturate(0.8) brightness(0.92);
}

.seat-zone .played {
  flex-wrap: wrap;
  row-gap: calc(var(--mini-h) * -0.55);
  max-width: 100%;
}

.play-label {
  color: var(--text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
}

.play-label.is-bomb {
  color: #ffb199;
  font-weight: 700;
}

.play-label.is-boom {
  animation: boom 600ms var(--ease-spring);
}

@keyframes boom {
  from {
    transform: scale(2.2);
    opacity: 0;
  }
}

.is-lead .played {
  filter: drop-shadow(0 0 10px rgba(240, 211, 141, 0.35));
}

.bubble {
  padding: 6px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.32);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: 700;
}

.bubble.is-enter {
  animation: rise-in var(--duration-normal) var(--ease-out-expo);
}

.bubble.is-hot {
  border-color: var(--brass);
  color: var(--brass-soft);
}

.thinking {
  display: inline-flex;
  gap: 5px;
}

.thinking i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brass-soft);
  animation: dot 1.1s ease-in-out infinite;
  animation-delay: calc(var(--d, 0) * 1ms);
}

.thinking i:nth-child(2) {
  animation-delay: 150ms;
}

.thinking i:nth-child(3) {
  animation-delay: 300ms;
}

@keyframes dot {
  50% {
    opacity: 0.25;
    transform: translateY(-4px);
  }
}

/* ---------- 小屏 / 竖屏 ---------- */
@media (max-width: 720px) {
  .room-title span {
    display: none;
  }

  .room-tools .btn-small {
    padding: 0 var(--space-2);
  }

  .felt,
  .seats-3 .felt {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      'left top right'
      'center center center'
      'mine mine mine';
    gap: var(--space-2);
    padding-top: var(--space-2);
  }

  .seats-3 .felt {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      'left right'
      'center center'
      'mine mine';
  }

  .seat-plate {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-md);
  }

  .avatar {
    width: 34px;
    height: 34px;
    font-size: 1rem;
  }

  .seat-count {
    font-size: 1.1rem;
  }

  .pos-left .seat-zone,
  .pos-right .seat-zone {
    align-items: center;
    padding: 0;
  }

  .pos-left,
  .pos-right {
    align-items: stretch;
  }

  .pos-me {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .pos-me .seat-plate {
    display: none;
  }

  .pos-me .seat-zone {
    grid-column: 1;
  }

  .room-bar {
    flex-wrap: wrap;
    row-gap: var(--space-1);
  }

  .room-title b {
    white-space: nowrap;
  }

  .room-tools {
    flex: 1 0 auto;
    justify-content: flex-end;
  }
}

@media (max-height: 560px) and (min-width: 721px) {
  .room-bar {
    padding-block: 4px;
  }

  .room-id b {
    font-size: 1.2rem;
  }

  .felt {
    gap: var(--space-2);
    padding-top: var(--space-2);
  }

  .seat-area {
    gap: var(--space-1);
  }

  .avatar {
    width: 32px;
    height: 32px;
    font-size: 0.95rem;
  }

  .seat-plate {
    padding: 4px var(--space-3) 4px 4px;
  }

  .seat-score {
    display: none;
  }

  .btn {
    min-height: 38px;
  }

  .btn-coin {
    width: 46px;
    height: 46px;
  }
}

.is-empty .seat-info {
  flex: none;
}

@media (max-width: 720px) {
  .sound-toggle .btn-text {
    display: none;
  }
}