/* ==========================================================================
   21 毒药
   --------------------------------------------------------------------------
   依赖全局变量与共享组件（.mode-tabs / .btn / .panel / .room-* / .pc-field 等），
   只补充本游戏自己的部分。前缀 p21-
   ========================================================================== */

.p21-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.p21 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(94vw, 660px);
}

.p21-slot:empty { display: none; }

/* ------------------------------ 座位配色 -------------------------------- */

.p21-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--text-mute);
}
.p21-dot.is-s0, .p21-chip.is-s0 .p21-dot { background: #8b5cf6; }
.p21-dot.is-s1, .p21-chip.is-s1 .p21-dot { background: #22d3ee; }
.p21-dot.is-s2, .p21-chip.is-s2 .p21-dot { background: #fb7185; }
.p21-dot.is-s3, .p21-chip.is-s3 .p21-dot { background: #34d399; }

/* ------------------------------ 状态栏 ---------------------------------- */

.p21-status {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: var(--surface);
}

.p21-status-line { font-size: 13px; color: var(--text-dim); letter-spacing: .02em; }

.p21-players { display: flex; flex-wrap: wrap; gap: 8px; }

.p21-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  font-size: 12.5px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.035);
  transition: border-color .2s, background .2s;
}
.p21-chip b { font-weight: 600; color: var(--text); }
.p21-chip em {
  font-style: normal;
  font-weight: 700;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.p21-chip.is-turn {
  border-color: rgba(139, 92, 246, 0.55);
  background: rgba(139, 92, 246, 0.14);
}
.p21-chip.is-out { opacity: .55; }
.p21-chip.is-out b { text-decoration: line-through; }
.p21-chip-tag {
  padding: 1px 7px;
  font-size: 11px;
  border-radius: 999px;
  color: #fda4af;
  border: 1px solid rgba(251, 113, 133, 0.4);
  background: rgba(251, 113, 133, 0.12);
}

/* ------------------------------ 结果横幅 -------------------------------- */

.p21-banner {
  padding: 14px 16px;
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid rgba(139, 92, 246, 0.4);
  background: linear-gradient(120deg, rgba(139, 92, 246, 0.18), rgba(34, 211, 238, 0.1));
  animation: p21-banner-in .28s cubic-bezier(.2, .8, .3, 1);
}
.p21-banner[hidden] { display: none; }
.p21-banner-title { font-size: 17px; font-weight: 700; }
.p21-banner-detail { margin-top: 5px; font-size: 12.5px; line-height: 1.6; color: var(--text-dim); }
.p21-banner-detail:empty { display: none; }
.p21-banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}
.p21-banner-actions:empty { display: none; margin-top: 0; }

@keyframes p21-banner-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------- 药瓶 ----------------------------------- */

.p21-board {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}

.p21-bottle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  aspect-ratio: 3 / 4;
  padding: 4px 2px;
  font-family: inherit;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.09), rgba(0, 0, 0, 0.22));
  color: var(--text);
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s, box-shadow .16s, border-color .16s, opacity .16s;
}
.p21-bottle-n {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.p21-bottle-mark { font-size: 20px; line-height: 1.1; }

button.p21-bottle { cursor: pointer; }
button.p21-bottle:hover { transform: translateY(-3px); border-color: rgba(139, 92, 246, 0.6); }

.p21-bottle.is-picked {
  transform: translateY(-3px);
  border-color: rgba(251, 191, 36, 0.85);
  background: linear-gradient(165deg, rgba(251, 191, 36, 0.28), rgba(251, 191, 36, 0.08));
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.75), 0 12px 22px -14px rgba(0, 0, 0, 0.95);
}
.p21-bottle.is-last { box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.5); }

.p21-bottle.is-taken { opacity: .5; }
.p21-bottle.is-taken .p21-bottle-mark { filter: grayscale(1); }
.p21-bottle.is-taken.is-s0 { border-color: rgba(139, 92, 246, 0.55); }
.p21-bottle.is-taken.is-s1 { border-color: rgba(34, 211, 238, 0.55); }
.p21-bottle.is-taken.is-s2 { border-color: rgba(251, 113, 133, 0.55); }
.p21-bottle.is-taken.is-s3 { border-color: rgba(52, 211, 153, 0.55); }

.p21-bottle.is-poison {
  opacity: 1;
  border-color: rgba(251, 113, 133, 0.75);
  background: linear-gradient(165deg, rgba(251, 113, 133, 0.3), rgba(120, 20, 40, 0.28));
  box-shadow: 0 0 0 2px rgba(251, 113, 133, 0.55), 0 14px 28px -16px rgba(251, 113, 133, 0.9);
}
.p21-bottle.is-poison .p21-bottle-n { color: #fecdd3; }

/* ------------------------------ 操作与提示 ------------------------------ */

.p21-action { display: flex; flex-direction: column; gap: 9px; }
.p21-action-tip { margin: 0; font-size: 12.5px; color: var(--text-dim); }
.p21-action-btns { display: flex; flex-wrap: wrap; gap: 10px; }

.p21-notice {
  padding: 10px 16px;
  font-size: 12.5px;
  text-align: center;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  border: 1px solid var(--border-soft);
  background: var(--surface);
}
.p21-notice[hidden] { display: none; }
.p21-notice.is-error {
  color: #fda4af;
  border-color: rgba(251, 113, 133, 0.4);
  background: rgba(251, 113, 133, 0.12);
}

.p21-controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.p21-controls:empty { display: none; }

/* ------------------------------- 战报 ----------------------------------- */

.p21-log {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: var(--surface);
}
.p21-log-title {
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: .06em;
  margin-bottom: 2px;
}
.p21-log-row { font-size: 12.5px; line-height: 1.6; color: var(--text-dim); }
.p21-log-row b { color: var(--text); font-weight: 600; }
.p21-log-row.is-empty { color: var(--text-mute); }

/* ------------------------------ 单机人数 -------------------------------- */

.p21-local-top { display: flex; flex-direction: column; gap: 2px; }
.p21-local-hint { margin: 0 0 6px; font-size: 12.5px; line-height: 1.6; color: var(--text-mute); }

.p21-rules { width: 100%; }

/* ------------------------------ 房间座位 -------------------------------- */

.p21-lobby { width: min(94vw, 620px); }

.room-seat.is-s0 .room-seat-mark { color: #8b5cf6; background: rgba(139, 92, 246, 0.16); }
.room-seat.is-s1 .room-seat-mark { color: #22d3ee; background: rgba(34, 211, 238, 0.16); }
.room-seat.is-s2 .room-seat-mark { color: #fb7185; background: rgba(251, 113, 133, 0.16); }
.room-seat.is-s3 .room-seat-mark { color: #34d399; background: rgba(52, 211, 153, 0.16); }
.room-seat.is-offline { opacity: .55; }

/* ------------------------------ 响应式 ---------------------------------- */

@media (max-width: 640px) {
  .p21 { gap: 10px; }
  .p21-status { padding: 10px 12px; }
  .p21-board { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; padding: 10px; }
  .p21-bottle-mark { font-size: 17px; }
  .p21-bottle-n { font-size: 11px; }
}