/* —— 实战麻将桌布局（仿九台类界面） —— */

.view-play.is-active {
  display: block;
  margin: calc(-1.25rem - env(safe-area-inset-top, 0px)) calc(-1.25rem - env(safe-area-inset-right, 0px))
    calc(-1.25rem - env(safe-area-inset-bottom, 0px)) calc(-1.25rem - env(safe-area-inset-left, 0px));
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  height: 100svh;
}

.live-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 70% 50% at 50% 40%, #1a6b4f 0%, #0d4a38 45%, #083528 100%);
  overflow: hidden;
}

.live-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(60, 35, 18, 0.55), transparent 12%, transparent 88%, rgba(60, 35, 18, 0.55)),
    linear-gradient(0deg, rgba(60, 35, 18, 0.5), transparent 18%, transparent 82%, rgba(60, 35, 18, 0.45));
  pointer-events: none;
  z-index: 0;
}

.live-topbar,
.live-bottombar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  padding-top: max(0.45rem, env(safe-area-inset-top));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent);
}

.live-bottombar {
  padding-top: 0.35rem;
  padding-bottom: max(0.55rem, env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), transparent);
  justify-content: space-between;
}

.live-title {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.75rem;
  min-width: 0;
}

.live-brand {
  font-family: var(--font-brand);
  font-size: 1.35rem;
  color: var(--gold);
  letter-spacing: 0.08em;
}

.live-level {
  font-size: 0.78rem;
  color: rgba(243, 239, 228, 0.55);
  letter-spacing: 0.12em;
}

.live-name {
  font-size: 0.95rem;
  font-weight: 700;
}

.live-me {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.live-table {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  margin: 0.25rem 0.55rem;
  border: 10px solid #6b4228;
  border-radius: 1.1rem;
  box-shadow:
    inset 0 0 0 3px #8a5a36,
    0 12px 40px rgba(0, 0, 0, 0.45);
  background:
    radial-gradient(ellipse 85% 75% at 50% 48%, #1b8a62 0%, #0f5c44 55%, #0a4534 100%);
  overflow: hidden;
}

/* 座位 */
.live-seat {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.live-seat-top {
  top: 0.4rem;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  max-width: 92%;
}

.live-seat-left {
  left: 0.35rem;
  top: 42%;
  transform: translateY(-50%);
  flex-direction: row;
  max-height: 58%;
}

.live-seat-right {
  right: 0.35rem;
  top: 42%;
  transform: translateY(-50%);
  flex-direction: row-reverse;
  max-height: 58%;
}

.avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}

.avatar-face {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.45rem;
  border: 2px solid rgba(212, 168, 75, 0.55);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  background-size: cover;
  background-position: center;
}

.avatar-dui {
  background: linear-gradient(145deg, #f5c6aa, #d4896a);
}

.avatar-shang {
  background: linear-gradient(145deg, #c8e0f0, #7aa3c4);
}

.avatar-xia {
  background: linear-gradient(145deg, #e8d5a8, #c4a06a);
}

.avatar-me {
  background: linear-gradient(145deg, #d4f0c8, #7ab86a);
  width: 2.2rem;
  height: 2.2rem;
}

.avatar-meta {
  text-align: center;
  line-height: 1.15;
}

.avatar-name {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.avatar-que {
  display: block;
  font-size: 0.6rem;
  color: var(--gold);
  margin-top: 0.1rem;
}

.avatar-que.is-hu {
  color: #f0c14b;
  font-weight: 700;
}

.live-seat.is-out {
  opacity: 0.85;
  filter: none;
}

.live-seat.is-out .avatar {
  opacity: 0.65;
  filter: grayscale(0.25);
}

.live-seat.is-out .live-backs {
  display: flex;
  opacity: 1;
  filter: none;
  z-index: 4;
}

.live-seat.is-out .live-melds {
  z-index: 4;
}

.live-hu {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.15rem 0.25rem;
  border-radius: 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(240, 193, 75, 0.55);
  box-shadow: 0 0 0 1px rgba(240, 193, 75, 0.2);
}

.live-hu.is-vertical {
  flex-direction: column;
}

.hu-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #f0c14b;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.tile.is-hu-tile {
  outline: 2px solid #f0c14b;
  outline-offset: 1px;
  box-shadow: 0 0 10px rgba(240, 193, 75, 0.45);
  transform: scale(1.06);
}

.live-backs-h,
.live-melds-h {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.12rem;
  max-width: min(78vw, 30rem);
  overflow: visible;
}

.live-backs-v,
.live-melds-v {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.12rem;
  max-height: min(46vh, 20rem);
  overflow-x: hidden;
  overflow-y: auto;
}

.live-melds-h .tile,
.live-melds-v .tile {
  --tile-w: 2.15rem;
}

.live-melds-self {
  position: absolute;
  left: 50%;
  bottom: calc(var(--hand-tile-w, 2.6rem) * 1.38 + 0.75rem);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 0.35rem;
  max-width: 94%;
  justify-content: center;
  flex-wrap: wrap;
}

.live-melds-self .tile {
  --tile-w: min(2.35rem, calc(var(--hand-tile-w, 2.6rem) * 0.82));
}

/* 桌心 */
.live-center {
  position: absolute;
  inset: 14% 8% 20% 8%;
  z-index: 2;
}

.wall-ring {
  position: absolute;
  inset: 0;
  border-radius: 0.6rem;
  pointer-events: none;
  box-shadow: inset 0 0 0 1.1rem rgba(22, 79, 52, 0.35);
}

.wall-ring .wall-brick {
  position: absolute;
  width: 0.85rem;
  height: 1.15rem;
  background:
    repeating-linear-gradient(135deg, #1a5c3c 0 2px, #164f34 2px 4px);
  border-radius: 0.12rem;
  box-shadow: 1px 1px 0 #0d3a26;
}

.river-pad {
  position: absolute;
  inset: 6%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0.2rem;
  align-items: stretch;
  justify-items: stretch;
}

.river-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--river-gap, 0.1rem);
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  justify-content: center;
  align-content: center;
  align-items: center;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

.river-cluster .tile {
  --tile-w: var(--river-tile-w, 2.25rem);
  flex-shrink: 0;
}

.river-top {
  grid-column: 2;
  grid-row: 1;
}

.river-left {
  grid-column: 1;
  grid-row: 2;
}

.river-right {
  grid-column: 3;
  grid-row: 2;
}

.river-top,
.river-bottom,
.river-left,
.river-right {
  max-width: none;
  max-height: none;
  overflow: hidden;
  flex-direction: row;
  flex-wrap: wrap;
}

.river-bottom {
  grid-column: 2;
  grid-row: 3;
}

.center-dial {
  grid-column: 2;
  grid-row: 2;
  width: min(7.2rem, 22vw);
  aspect-ratio: 1;
  border-radius: 0.55rem;
  border: 3px solid #d4a84b;
  background: linear-gradient(160deg, #2a1f14, #4a3420);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.35rem;
  z-index: 2;
}

.dial-que {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--gold);
}

.dial-remain {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: #ffd89a;
  margin-top: 0.1rem;
}

.dial-wall {
  font-family: var(--font-brand);
  font-size: 1.85rem;
  line-height: 1;
  color: #fff8e7;
  margin: 0.15rem 0;
}

.dial-wall.is-late {
  color: #f0c14a;
}

.dial-wall.is-critical {
  color: #ff8a65;
  animation: pulse-glow 1.4s ease-in-out infinite;
}

.dial-tip {
  font-size: 0.58rem;
  line-height: 1.3;
  color: rgba(243, 239, 228, 0.7);
  max-width: 6.5rem;
}

.discard-fly {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  z-index: 6;
  min-height: 3rem;
  pointer-events: none;
}

/* 手牌：一字横排，按屏宽自适应 */
.live-hand-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.2rem;
  z-index: 5;
  display: flex;
  justify-content: center;
  padding: 0 0.25rem;
  pointer-events: none;
}

.live-hand-wrap .hand-live {
  pointer-events: auto;
  width: 100%;
}

.hand-live {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
  gap: var(--hand-gap, 0.1rem);
  min-height: 0;
  max-width: 100%;
  overflow: visible;
  padding: 0.15rem 0 0.25rem;
}

.hand-live .tile {
  --tile-w: var(--hand-tile-w, min(3.1rem, calc((100vw - 2.4rem) / 14.5)));
  flex: 0 0 auto;
  width: var(--tile-w);
}

.hand-live .tile.is-drawn {
  margin-left: var(--hand-drawn-gap, 0.35rem);
}

@media (hover: hover) and (pointer: fine) {
  .hand-live .tile:hover:not(:disabled) {
    transform: translateY(-12px);
  }
}

@media (max-width: 720px) {
  .live-table {
    margin: 0.15rem 0.35rem;
    border-width: 7px;
  }

  /* 桌心内收，给四边座位（副露/和牌）留出独立条带，避免压住牌河 */
  .live-center {
    inset: 20% 19% 30% 19%;
  }

  .avatar-face {
    width: 2rem;
    height: 2rem;
  }

  .live-seat {
    gap: 0.2rem;
  }

  .live-seat-top {
    top: 0.2rem;
    max-width: 88%;
  }

  .live-seat-left {
    left: 0.12rem;
    top: 40%;
    max-width: min(26vw, 5.8rem);
    max-height: 48%;
  }

  .live-seat-right {
    right: 0.12rem;
    top: 40%;
    max-width: min(26vw, 5.8rem);
    max-height: 48%;
  }

  .live-backs-h,
  .live-melds-h {
    max-width: min(72vw, 18rem);
    max-height: 2.6rem;
    overflow: hidden;
    justify-content: center;
  }

  .live-backs-v,
  .live-melds-v {
    max-width: 100%;
    max-height: min(36vh, 11rem);
    overflow-x: hidden;
    overflow-y: auto;
    flex-shrink: 1;
  }

  .live-melds-h .tile,
  .live-melds-v .tile {
    --tile-w: 1.15rem;
  }

  .live-melds-h .meld-group,
  .live-melds-v .meld-group {
    gap: 0.04rem;
  }

  .live-hu {
    padding: 0.06rem 0.1rem;
    gap: 0.1rem;
    flex-shrink: 0;
  }

  .live-hu .tile,
  .live-hu .tile.is-hu-tile {
    --tile-w: 1.25rem;
    transform: none;
    outline-width: 1.5px;
    box-shadow: 0 0 4px rgba(240, 193, 75, 0.35);
  }

  .hu-badge {
    font-size: 0.5rem;
    letter-spacing: 0.04em;
  }

  .live-melds-self {
    bottom: calc(var(--hand-tile-w, 2.4rem) * 1.38 + 0.45rem);
    max-width: 88%;
    gap: 0.2rem;
  }

  .live-melds-self .tile {
    --tile-w: min(1.55rem, calc(var(--hand-tile-w, 2.4rem) * 0.72));
  }

  .center-dial {
    width: min(5.2rem, 20vw);
  }

  .dial-wall {
    font-size: 1.25rem;
  }

  .dial-tip {
    font-size: 0.55rem;
  }

  .wall-ring {
    box-shadow: inset 0 0 0 0.55rem rgba(22, 79, 52, 0.35);
  }

  .river-pad {
    inset: 3%;
    gap: 0.1rem;
  }
}

@media (max-width: 480px) {
  .live-brand {
    font-size: 1.1rem;
  }

  .live-center {
    inset: 18% 21% 28% 21%;
  }

  .live-seat-left,
  .live-seat-right {
    max-width: min(24vw, 5.2rem);
  }

  .live-seat-left .avatar-meta,
  .live-seat-right .avatar-meta {
    display: none;
  }

  .live-melds-h .tile,
  .live-melds-v .tile {
    --tile-w: 1.05rem;
  }

  .live-hu .tile,
  .live-hu .tile.is-hu-tile {
    --tile-w: 1.15rem;
  }

  .live-topbar {
    padding: 0.35rem 0.5rem;
    padding-top: max(0.35rem, env(safe-area-inset-top));
  }

  .live-bottombar {
    padding: 0.3rem 0.55rem;
    padding-bottom: max(0.45rem, env(safe-area-inset-bottom));
  }

  .live-hand-wrap {
    bottom: 0.1rem;
    padding: 0 0.15rem;
  }

  .hand-live .tile.is-drawn {
    margin-left: var(--hand-drawn-gap, 0.22rem);
  }
}