/* ============================================================
   立直盘样式
   · 对战视图：向量立直盘（盘体是设计稿实体，颜色固定）
   · 落座大厅：梯形牌桌（改为随主题的毛玻璃板）

   材质分工：
     盘面 SVG 自带配色（复刻资料包，五个色值已逐像素核对），不随主题。
     托住它的玻璃框、以及落座大厅，都跟随主题令牌。
   ============================================================ */

/* ---------- 牌桌容器（两种视图共用定位框架） ---------- */
/* 默认形态 = 落座大厅：一块通透的玻璃牌桌 */

.battle {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  container-type: size;
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--surface);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-edge);
  color: var(--text);
  box-shadow: var(--shadow-md), var(--glass-hi);
}

/* ---------- 对战视图：向量立直盘 ---------- */
/* 盘面是复刻资料包的实体，颜色不随主题。
   这里给它套一圈「白色透明底托」：padding/radius 取同值，
   圆角不会切到盘面直角，盘面与底托始终水平/垂直完全居中、无错位。 */

.battle.board-table {
  /* 高特异性 (0,2,0) 压过 .battle 的 (0,1,0)——完整重置，
     避免落座大厅的玻璃边/圆角投影意外泄漏到对战视图 */
  background: rgba(255, 255, 255, 0.14);
  border: 0 solid transparent;
  border-radius: min(4cqw, 4cqh);
  padding: min(4cqw, 4cqh);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.battle .board {
  display: block;
  width: 100%;
  height: 100%;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  /* 深色实体衬在浅色玻璃上要"浮"起来，否则会显得扁平 */
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.26));
}

/* 点数与立直棒的点击反馈（点击该家所属边 = 切换立直） */
.battle .board .edge-point {
  transition: filter 0.15s ease;
}
.battle .board .edge-point:active {
  filter: brightness(1.35);
}

/* 立直呼吸灯：逐家点亮。每盏 = 红色径向灯芯（呼吸 0.8↔1.0）+ 金黄线性外圈（静态）。
   灯只在对应家立直时渲染（与立直棒同步出现），所以这里只负责动画。 */
.battle .board .riichi-glow .glow-red {
  animation: glowBreathe 1.8s ease-in-out infinite;
}
.battle .board .riichi-glow .glow-halo {
  /* 金黄外圈不呼吸，静态环绕红色灯芯 */
}
@keyframes glowBreathe {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}
/* 减少动效偏好：灯芯不呼吸，静止在低亮态（不熄灭，保留立直视觉提示） */
@media (prefers-reduced-motion: reduce) {
  .battle .board .riichi-glow .glow-red {
    animation: none;
    opacity: 0.8;
  }
}

/* ---------- 落座大厅：梯形牌桌 ---------- */

/* 四个方向通过表面对角线切出梯形区域。
   四块面板统一用同一层薄纱色：颜色只用来表达状态（可否落座），不用来装饰座位。 */

.battle .seat {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 1;
  overflow: hidden;
  background: var(--surface-2);
}

/* 空位（可点击落座）才给明显的底色：一层青色玻璃纱 */
.battle .seat[data-act="lobby-sit"] {
  background: var(--brand-tint);
  cursor: pointer;
}

.battle .seat[data-act="lobby-sit"]:active {
  box-shadow: inset 0 0 0 2px var(--brand-line);
}

.battle .seat.area-top {
  clip-path: polygon(0 0, 100% 0, 69% 31%, 31% 31%);
  align-items: flex-start;
  justify-content: center;
  padding-top: calc(1.5cqw + 4.65cqw);
}
.battle .seat.area-bottom {
  clip-path: polygon(0 100%, 100% 100%, 69% 69%, 31% 69%);
  align-items: flex-end;
  justify-content: center;
  padding-bottom: calc(1.5cqw + 4.65cqw);
}
.battle .seat.area-left {
  clip-path: polygon(0 0, 31% 31%, 31% 69%, 0 100%);
  align-items: center;
  justify-content: flex-start;
  padding-left: calc(1.5cqw + 4.65cqw);
}
.battle .seat.area-right {
  clip-path: polygon(100% 0, 69% 31%, 69% 69%, 100% 100%);
  align-items: center;
  justify-content: flex-end;
  padding-right: calc(1.5cqw + 4.65cqw);
}

/* 玩家信息卡片不再占满整个方块 */
.battle .seat .card {
  position: relative;
  width: auto;
  height: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7cqw;
  padding: 0.8cqw 1.5cqw;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* 文字随页面大小自适应 */
.battle .name {
  color: var(--text);
  font-size: clamp(12px, 3.4cqw, 24px);
  line-height: 1.2;
}
.battle .badge {
  background: var(--surface-3);
  color: var(--text-2);
  font-size: clamp(9px, 2.6cqw, 18px);
  padding: 0.2cqw 1.4cqw;
  border-radius: var(--r-xs);
}
.battle .badge.wind {
  color: var(--text);
  font-size: clamp(12px, 3.4cqw, 24px);
}
.battle .avatar {
  background: linear-gradient(160deg, var(--brand), var(--brand-2));
  color: var(--brand-ink);
  width: clamp(16px, 4.4cqw, 32px);
  height: clamp(16px, 4.4cqw, 32px);
  font-size: clamp(11px, 2.6cqw, 18px);
}
.battle .name-row {
  max-width: min(45cqw, 280px);
}

/* 中央场风面板：一块更厚的玻璃，与外围托盘拉开层次 */
.battle .center {
  position: absolute;
  display: block;
  left: 31%;
  top: 31%;
  width: 38%;
  height: 38%;
  margin: 0;
  border: max(2px, 0.55cqw) solid var(--hairline-strong);
  border-radius: var(--r-md);
  background: var(--surface-3);
  color: var(--text);
  z-index: 3;
  font-size: clamp(11px, 2.7cqw, 18px);
  box-shadow: var(--glass-hi), var(--shadow-sm);
}
.battle .center .center-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8cqw;
}
.battle .center .round {
  color: var(--brand);
  font-size: clamp(16px, 4.5cqw, 32px);
}
.battle .center .meta-line {
  color: var(--text-2);
  letter-spacing: 0.08em;
}
.battle .center .sub {
  color: var(--text-3);
  letter-spacing: 0.04em;
}