/**
 * 赛博斗兽场 · 大屏样式（暗黑赛博牌桌风 · 零图片：Emoji + CSS 渐变 + 内联结构）
 * 配色：背景 #0d0f17 / 合作绿 #10b981 / 背刺红 #f43f5e / 读心紫 #8b5cf6 / 筹码金 #f59e0b
 */

:root {
  --bg: #0d0f17;
  --panel: #131624;
  --panel-2: #171b2e;
  --line: #262b45;
  --text: #e5e7eb;
  --muted: #8b93b0;
  --green: #10b981;
  --red: #f43f5e;
  --purple: #8b5cf6;
  --gold: #f59e0b;
  --cyan: #22d3ee;
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  color: var(--text);
  font-family: system-ui, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background:
    radial-gradient(1200px 500px at 50% -10%, #1a1440 0%, transparent 60%),
    radial-gradient(900px 400px at 100% 100%, #0c2a26 0%, transparent 55%),
    linear-gradient(180deg, var(--bg), #0a0c13);
  background-attachment: fixed;
}
/* 深色网格背景 */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(139, 92, 246, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
}
a { color: var(--cyan); }
button { font-family: inherit; }

#app { max-width: 1280px; margin: 0 auto; padding: 0 14px 60px; }
.boot { padding: 80px 0; text-align: center; color: var(--muted); }

/* ================= 顶栏 ================= */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 2px; margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(13, 15, 23, 0.96), rgba(13, 15, 23, 0.82));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand {
  font-weight: 800; font-size: 1.05em; text-decoration: none; color: var(--text);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.brand .mini { color: var(--muted); font-weight: 400; font-size: 0.72em; }
.topbar .spacer { flex: 1; }

.btn {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  padding: 8px 14px; border-radius: 10px; cursor: pointer; font-size: 0.9em;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.btn:hover { border-color: var(--purple); }
.btn:active { transform: scale(0.95); }
.btn.primary {
  background: linear-gradient(135deg, #7c3aed, var(--purple));
  border-color: transparent; font-weight: 700;
  box-shadow: 0 4px 18px rgba(139, 92, 246, 0.35);
}
.btn.green { background: linear-gradient(135deg, #059669, var(--green)); border-color: transparent; font-weight: 700; }
.btn.red { background: linear-gradient(135deg, #be123c, var(--red)); border-color: transparent; font-weight: 700; }
/* 咸鱼金 CTA：召唤咒语这类「全页最想让用户点」的按钮专用，别滥用 */
.btn.gold {
  background: linear-gradient(135deg, #d97706, var(--gold));
  border-color: transparent; font-weight: 800; color: #1a1206;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.35);
}
.btn.ghost { background: transparent; }
.btn.small { padding: 5px 10px; font-size: 0.82em; border-radius: 8px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* 通行证胶囊 */
.passport {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel-2); padding: 5px 12px 5px 6px; cursor: pointer;
  max-width: 260px; transition: border-color 0.15s;
}
.passport:hover { border-color: var(--gold); }
.passport .pp-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 17px;
  background: radial-gradient(circle at 30% 30%, #3b2a6b, #191d33);
  border: 1px solid var(--purple);
}
.passport .pp-info { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.passport .pp-name { font-size: 0.82em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.passport .pp-elo { font-size: 0.7em; color: var(--gold); }
.passport.empty .pp-label { font-size: 0.8em; color: var(--muted); }

/* ================= 大厅 ================= */
/* Hero：背后一只隐约发光的赛博精灵球线框（纯 CSS：圆环 + 赤道线 + 中心按钮环） */
.hero { position: relative; text-align: center; padding: 26px 0 18px; }
.hero::before {
  content: '';
  position: absolute; left: 50%; top: 46%;
  width: 430px; height: 430px; max-width: 96vw;
  transform: translate(-50%, -55%);
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.22);
  background:
    linear-gradient(to bottom,
      transparent calc(50% - 1px),
      rgba(139, 92, 246, 0.16) calc(50% - 1px),
      rgba(139, 92, 246, 0.16) calc(50% + 1px),
      transparent calc(50% + 1px)),
    radial-gradient(circle at 50% 50%,
      transparent 26px, rgba(139, 92, 246, 0.20) 27px 31px, transparent 32px);
  filter: drop-shadow(0 0 24px rgba(139, 92, 246, 0.12));
  pointer-events: none; z-index: -1;
}
.hero h1 { margin: 0; font-size: 1.9em; letter-spacing: 2px; }
.hero h1 .glow { color: var(--gold); text-shadow: 0 0 24px rgba(245, 158, 11, 0.55); }
.hero p { color: var(--muted); margin: 8px auto 0; font-size: 0.92em; max-width: 620px; line-height: 1.6; }

/* ---- Hero 召唤祭坛：赛博精灵球底座 · 全页核心转化入口 ---- */
.summon-altar {
  position: relative;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 20px auto 0; max-width: 780px; text-align: left;
  padding: 14px 16px; border-radius: 16px;
  border: 1px solid rgba(245, 158, 11, 0.42);
  background:
    radial-gradient(360px 120px at 16% 0%, rgba(245, 158, 11, 0.12), transparent 70%),
    linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(16, 19, 31, 0.62));
  box-shadow: 0 6px 30px rgba(245, 158, 11, 0.10), inset 0 0 26px rgba(245, 158, 11, 0.05);
}
.summon-fish {
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; font-size: 34px;
  background: radial-gradient(circle at 32% 28%, #4c3a12, #1a1d31);
  border: 2px solid rgba(245, 158, 11, 0.55);
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.30);
  animation: fishFloat 3.2s ease-in-out infinite;
}
.summon-body { flex: 1 1 320px; min-width: 230px; }
.summon-title { font-weight: 800; font-size: 0.98em; }
.summon-sub { color: var(--muted); font-size: 0.78em; line-height: 1.55; margin-top: 4px; }
.summon-steps { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 9px; font-size: 0.72em; }
.summon-steps .s-step {
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, 0.30); background: rgba(245, 158, 11, 0.07); color: #cbd5e1;
}
.summon-steps .s-step b { color: var(--gold); }
.summon-steps .s-arrow { color: #4b5378; }
.summon-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 620px) {
  .summon-altar { justify-content: center; text-align: center; }
  .summon-body { width: 100%; }
  .summon-steps { justify-content: center; }
  .summon-act { width: 100%; }
  .summon-act .btn { flex: 1 1 auto; }
}

/* 备战区状态条：灵兽在场上时祭坛下方亮起 */
.summon-status {
  margin: 10px auto 0; max-width: 780px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px; border-radius: 12px; font-size: 0.85em;
  border: 1px solid rgba(16, 185, 129, 0.5); background: rgba(16, 185, 129, 0.10);
  animation: slideIn 0.3s;
}
.summon-status.warm { border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.08); }
.summon-status .btn { margin-left: auto; }

/* 侧栏原生广告位：容器由 main.ts 经 AdsterraNative 注入（顶部横幅在外壳层 #ad-banner-top，
 *  样式由 ads.js 自注入），这里只收拾边角 */
.side-ad { min-width: 0; }
.side-ad .ad-native-wrap {
  max-width: 100%; overflow: hidden; border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.panel {
  background: linear-gradient(180deg, var(--panel), #10131f);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px;
}
.panel h2 { margin: 0 0 12px; font-size: 1.02em; display: flex; align-items: center; gap: 8px; }
.panel h2 .hint { font-size: 0.72em; color: var(--muted); font-weight: 400; margin-left: auto; }

.lobby-grid { display: grid; grid-template-columns: 1fr 320px; gap: 14px; align-items: start; }
/* 栅格子项允许收缩到内容以下：卡片里任何 nowrap 文本（嘴炮气泡/战报行）才不会
 * 把 min-content 顺着链路顶进轨道、在窄屏撑出横向滚动（375px 实测踩过） */
.lobby-grid > * { min-width: 0; }
.room-grid > * { min-width: 0; }

/* 建房：道馆海报卡（每座道馆一套主题色，选中态随主题发光） */
.game-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 620px) { .game-cards { grid-template-columns: 1fr; } }
.game-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer;
  background: var(--panel-2); transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.game-card:hover { transform: translateY(-1px); }
.game-card .gc-icon { font-size: 1.8em; filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.4)); }
.game-card .gc-gym { font-weight: 800; margin: 6px 0 1px; font-size: 1.02em; letter-spacing: 1px; }
.game-card .gc-sub { color: var(--muted); font-size: 0.74em; }
.game-card .gc-desc { color: var(--muted); font-size: 0.76em; line-height: 1.4; margin-top: 6px; }
.game-card .gc-attrs { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.game-card .gc-attr-label { font-size: 0.66em; color: #4b5378; letter-spacing: 1px; }
.game-card .gc-attr {
  font-size: 0.68em; padding: 2px 9px; border-radius: 999px; font-weight: 700;
  border: 1px solid; background: rgba(0, 0, 0, 0.2);
}
/* 贪婪道馆：暗金 × 霓虹绿（握手藏刀的成色） */
.game-card.t-greed {
  background: linear-gradient(160deg, rgba(16, 185, 129, 0.13), rgba(245, 158, 11, 0.10) 55%, var(--panel-2));
}
.game-card.t-greed .gc-gym { color: #fbbf24; text-shadow: 0 0 14px rgba(245, 158, 11, 0.35); }
.game-card.t-greed .gc-attr { color: #34d399; border-color: rgba(16, 185, 129, 0.45); }
.game-card.t-greed:hover, .game-card.t-greed.on {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 6px 24px rgba(245, 158, 11, 0.22);
}
/* 欺诈道馆：魅惑紫 × 酒馆霓虹（冷汗与假笑的成色） */
.game-card.t-fraud {
  background: linear-gradient(160deg, rgba(139, 92, 246, 0.16), rgba(244, 63, 94, 0.09) 55%, var(--panel-2));
}
.game-card.t-fraud .gc-gym { color: #c4b5fd; text-shadow: 0 0 14px rgba(139, 92, 246, 0.4); }
.game-card.t-fraud .gc-attr { color: #f9a8d4; border-color: rgba(244, 63, 94, 0.4); }
.game-card.t-fraud:hover, .game-card.t-fraud.on {
  border-color: var(--purple);
  box-shadow: 0 0 0 1px var(--purple), 0 6px 24px rgba(139, 92, 246, 0.25);
}
.game-card.on::after {
  content: '🎯 已选'; position: absolute; top: 8px; right: 8px;
  font-size: 0.64em; padding: 2px 8px; border-radius: 999px;
  color: var(--text); background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line);
}
.create-opts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 12px 0; color: var(--muted); font-size: 0.85em; }
.create-opts label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.create-opts select, .create-opts input[type='number'] {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 8px;
}
.create-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.create-foot .hint { color: var(--muted); font-size: 0.78em; }

/* 转播席房间卡：VS 对撞构图 + 红蓝撞色 + 嘴炮气泡 */
.rooms-list { display: grid; gap: 10px; }
.room-card {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: var(--panel-2);
}
/* 激战中的房间：竞技场红蓝对撞底色，路过一眼就能分清「活的」 */
.room-card.running {
  border-color: rgba(239, 68, 68, 0.35);
  background:
    linear-gradient(100deg, rgba(239, 68, 68, 0.08), rgba(59, 130, 246, 0.08)),
    var(--panel-2);
}
.room-card .rc-icon { font-size: 1.5em; }
.room-card .rc-main { flex: 1; min-width: 220px; }
.room-card .rc-title { font-weight: 700; font-size: 0.88em; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
/* VS 对撞行 */
.rc-vs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-side {
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 170px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-weight: 700; font-size: 0.85em; padding: 4px 10px; border-radius: 10px;
}
.rc-side.red {
  color: #fda4af; border: 1px solid rgba(239, 68, 68, 0.45);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.05));
}
.rc-side.blue {
  color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.45);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.05));
}
.rc-side.empty { color: var(--muted); border: 1px dashed var(--line); background: none; font-weight: 400; }
.rc-empty-vs { color: var(--muted); font-size: 0.85em; }
.rc-vs-badge {
  font-weight: 900; font-size: 0.78em; letter-spacing: 1px; color: var(--gold);
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.55);
}
.rc-extras { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.rc-extra {
  font-size: 0.7em; color: #cbd5e1; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(0, 0, 0, 0.18);
}
/* 嘴炮转播气泡：大厅里飘出的最新一句公屏台词。
 *  必须换行截断（-webkit-line-clamp）而不是 nowrap——nowrap 的 min-content 是整行
 *  台词宽，会把房间卡连同所在栅格轨道一起撑破窄屏（375px 实测 +63px 横向溢出） */
.rc-bubble {
  margin-top: 5px; font-size: 0.76em; line-height: 1.45; color: #c4b5fd;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 4px 10px; border-radius: 9px;
  border: 1px solid rgba(139, 92, 246, 0.3); background: rgba(139, 92, 246, 0.07);
  animation: slideIn 0.3s;
}
.room-card.running .rc-bubble { border-color: rgba(139, 92, 246, 0.45); }
.room-card .rc-headline {
  color: var(--muted); font-size: 0.75em; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.badge {
  font-size: 0.68em; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--muted); letter-spacing: 1px;
}
.badge.live { color: var(--green); border-color: rgba(16, 185, 129, 0.5); background: rgba(16, 185, 129, 0.1); }
.badge.wait { color: var(--gold); border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.08); }
.badge.done { color: var(--muted); }
.empty-note { color: var(--muted); text-align: center; padding: 26px 0; font-size: 0.88em; }

/* 名人堂：前三聚光灯领奖台 + 段位称号 */
.podium {
  display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 8px;
  align-items: end; margin: 2px 0 12px;
}
.podium.solo { grid-template-columns: 1fr; }
.pod {
  position: relative; text-align: center;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel-2); padding: 12px 6px 10px;
  overflow: hidden; min-width: 0;
}
.pod .p-avatar { font-size: 30px; line-height: 1.2; }
.pod .p-name {
  font-weight: 800; font-size: 0.85em; margin-top: 2px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.pod .p-medal { font-size: 0.8em; }
.pod .p-title { color: var(--gold); font-size: 0.7em; margin-top: 2px; }
.pod .p-persona {
  color: var(--muted); font-size: 0.66em; margin-top: 3px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
/* 冠军位：金框 + 聚光灯 + 动态皇冠 */
.pod.p1 {
  border-color: rgba(245, 158, 11, 0.55); padding-top: 20px;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.14), var(--panel-2));
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.14);
}
.pod.p1::before {
  content: ''; position: absolute; top: -30px; left: 50%;
  width: 110px; height: 80px; transform: translateX(-50%);
  background: radial-gradient(ellipse at bottom, rgba(245, 158, 11, 0.22), transparent 70%);
  pointer-events: none;
}
.pod.p1 .p-avatar { font-size: 42px; text-shadow: 0 0 18px rgba(245, 158, 11, 0.4); }
.pod .p-crown {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  font-size: 18px; animation: crownBob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.7));
}
.pod.p2 { border-color: rgba(148, 163, 184, 0.45); }
.pod.p3 { border-color: rgba(180, 124, 90, 0.5); }

/* 天梯表（第 4 名起） */
.rank-table { width: 100%; border-collapse: collapse; font-size: 0.84em; }
.rank-table th { color: var(--muted); font-weight: 400; text-align: left; padding: 4px 6px; font-size: 0.9em; }
.rank-table td { padding: 6px; border-top: 1px solid var(--line); }
.rank-table .r-num { color: var(--muted); width: 26px; }
.rank-table .r-elo { color: var(--gold); font-weight: 700; }
.rank-table .r-rec { color: var(--muted); font-size: 0.86em; }
.rank-table tr.me td { background: rgba(139, 92, 246, 0.08); }
/* 段位称号小徽（名人堂表格 / 训练家卡共用） */
.r-tier {
  font-size: 0.68em; color: var(--cyan); margin-left: 6px; padding: 1px 7px;
  border: 1px solid rgba(34, 211, 238, 0.35); border-radius: 999px; white-space: nowrap;
}
/* NPC 守门员标签（座位卡之外的名人堂/结算也用） */
.npc-tag {
  font-size: 0.68em; color: var(--purple); border: 1px solid rgba(139, 92, 246, 0.5);
  padding: 0 6px; border-radius: 999px; margin-left: 5px; white-space: nowrap;
}

/* 训练家徽章墙（通行证弹窗） */
.badge-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.trainer-badge {
  text-align: center; padding: 10px 6px 8px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel-2);
}
.trainer-badge .tb-icon { font-size: 24px; line-height: 1.3; }
.trainer-badge .tb-name { font-size: 0.72em; font-weight: 700; margin-top: 2px; }
.trainer-badge .tb-cond { font-size: 0.62em; color: var(--muted); margin-top: 1px; }
.trainer-badge.on {
  border-color: rgba(245, 158, 11, 0.55); background: rgba(245, 158, 11, 0.08);
  box-shadow: inset 0 0 14px rgba(245, 158, 11, 0.06);
}
.trainer-badge.off { opacity: 0.42; filter: grayscale(1); }

/* ================= 房间 ================= */
.room-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; color: var(--muted); font-size: 0.88em;
}
.room-head .rh-title { color: var(--text); font-weight: 700; font-size: 1.05em; }
.room-grid { display: grid; grid-template-columns: 1fr 300px; gap: 14px; align-items: start; }

/* 中央赌桌 */
.stage {
  position: relative; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 14px 18px;
  background:
    radial-gradient(500px 200px at 50% 0%, rgba(139, 92, 246, 0.12), transparent 70%),
    linear-gradient(180deg, var(--panel), #0f1220);
  overflow: hidden;
}
.stage::after { /* 桌面霓虹描边 */
  content: ''; position: absolute; inset: 8px; border-radius: 10px;
  border: 1px solid rgba(139, 92, 246, 0.22); pointer-events: none;
}
.stage-round { font-size: 0.85em; color: var(--muted); letter-spacing: 2px; }
.stage-round b { color: var(--text); font-size: 1.15em; }
.stage-round .double {
  color: var(--gold); border: 1px solid rgba(245, 158, 11, 0.55); border-radius: 999px;
  padding: 1px 8px; margin-left: 6px; font-size: 0.85em; animation: goldPulse 1.6s infinite;
}
.stage-main { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 12px 0 6px; flex-wrap: wrap; }
.stage-phase { margin-top: 6px; font-size: 0.85em; color: var(--cyan); letter-spacing: 2px; }
.stage-phase.commit { color: var(--red); }

/* 筹码堆（分赃博弈奖池） */
.chip-stack { position: relative; width: 74px; height: 52px; }
.chip-stack i {
  position: absolute; left: 50%; width: 56px; height: 20px; margin-left: -28px;
  border-radius: 50%;
  background: conic-gradient(from 20deg, #b45309, var(--gold) 25%, #b45309 50%, var(--gold) 75%, #b45309);
  box-shadow: 0 2px 0 #7c2d12, 0 3px 8px rgba(0, 0, 0, 0.55), inset 0 2px 3px rgba(255, 255, 255, 0.4);
}
.chip-stack i:nth-child(1) { bottom: 0; }
.chip-stack i:nth-child(2) { bottom: 13px; transform: rotate(-6deg); }
.chip-stack i:nth-child(3) { bottom: 26px; transform: rotate(5deg); width: 50px; margin-left: -25px; }
.pot-amount { text-align: left; }
.pot-amount .pa-num { font-size: 1.5em; font-weight: 800; color: var(--gold); }
.pot-amount .pa-sub { color: var(--muted); font-size: 0.74em; line-height: 1.5; }

/* 叫点全息牌（吹牛骰子） */
.bid-holo {
  display: flex; align-items: center; gap: 14px; justify-content: center;
}
.bid-holo .bh-qty {
  font-size: 2em; font-weight: 800; color: var(--cyan);
  text-shadow: 0 0 18px rgba(34, 211, 238, 0.6);
}
.bid-holo .bh-by { color: var(--muted); font-size: 0.8em; margin-top: 4px; }
.wild-chip {
  display: inline-block; margin-top: 10px; font-size: 0.78em; padding: 3px 12px;
  border-radius: 999px; border: 1px solid rgba(245, 158, 11, 0.55); color: var(--gold);
  background: rgba(245, 158, 11, 0.08);
}
.wild-chip.off { border-color: var(--line); color: var(--muted); background: none; text-decoration: line-through; }

/* 纯 CSS 骰子（3x3 点阵） */
.die {
  display: inline-grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  width: 34px; height: 34px; padding: 4px; gap: 1px; border-radius: 7px;
  background: linear-gradient(145deg, #f8fafc, #cbd5e1);
  box-shadow: inset 0 -3px 0 rgba(15, 23, 42, 0.28), 0 3px 8px rgba(0, 0, 0, 0.5);
}
.die i { border-radius: 50%; background: transparent; }
.die[data-f='1'] i:nth-child(5),
.die[data-f='2'] i:nth-child(1), .die[data-f='2'] i:nth-child(9),
.die[data-f='3'] i:nth-child(1), .die[data-f='3'] i:nth-child(5), .die[data-f='3'] i:nth-child(9),
.die[data-f='4'] i:nth-child(1), .die[data-f='4'] i:nth-child(3), .die[data-f='4'] i:nth-child(7), .die[data-f='4'] i:nth-child(9),
.die[data-f='5'] i:nth-child(1), .die[data-f='5'] i:nth-child(3), .die[data-f='5'] i:nth-child(5), .die[data-f='5'] i:nth-child(7), .die[data-f='5'] i:nth-child(9),
.die[data-f='6'] i:nth-child(1), .die[data-f='6'] i:nth-child(3), .die[data-f='6'] i:nth-child(4), .die[data-f='6'] i:nth-child(6), .die[data-f='6'] i:nth-child(7), .die[data-f='6'] i:nth-child(9) { background: #0f172a; }
.die.wild i { background: #b45309 !important; } /* 赖子（点数 1）金底提示 */
.die.big { width: 56px; height: 56px; border-radius: 10px; padding: 6px; }
.die.unknown { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); position: relative; }
.die.unknown::after {
  content: '?'; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--muted); font-weight: 800;
}

/* ================= 座位卡 ================= */
.seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.seat {
  position: relative;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), #10131f);
  padding: 30px 12px 12px; /* 顶部给气泡留位 */
  transition: border-color 0.2s, box-shadow 0.2s;
}
.seat.me { box-shadow: 0 0 0 1px var(--cyan), 0 8px 26px rgba(34, 211, 238, 0.12); }
.seat.acting { border-color: var(--gold); animation: seatPulse 1.4s infinite; }
.seat.dead { opacity: 0.55; filter: saturate(0.4); }
.seat-head { display: flex; align-items: center; gap: 10px; }
.avatar-ring {
  position: relative; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; font-size: 27px;
  background: radial-gradient(circle at 32% 28%, #34276b, #171b30);
  border: 2px solid var(--line); flex: none;
  transition: box-shadow 0.25s, border-color 0.25s;
}
.att-badge {
  position: absolute; right: -7px; bottom: -5px; font-size: 16px;
  background: var(--bg); border-radius: 50%; padding: 1px 3px; border: 1px solid var(--line);
}
.seat-name { font-weight: 800; font-size: 0.95em; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.seat-name .npc-tag { font-size: 0.68em; color: var(--purple); border: 1px solid rgba(139, 92, 246, 0.5); padding: 0 6px; border-radius: 999px; }
.seat-name .me-tag { font-size: 0.68em; color: var(--cyan); border: 1px solid rgba(34, 211, 238, 0.5); padding: 0 6px; border-radius: 999px; }
.seat-sub { color: var(--muted); font-size: 0.78em; margin-top: 1px; }

/* 情绪动效（avatar-ring / seat 边框） */
.seat.att-CONFIDENT .avatar-ring { border-color: var(--gold); box-shadow: 0 0 16px rgba(245, 158, 11, 0.55); }
.seat.att-SWEATING .avatar-ring { border-color: #38bdf8; animation: jitter 0.9s infinite; }
.seat.att-SMUG .avatar-ring { border-color: var(--purple); box-shadow: 0 0 18px rgba(139, 92, 246, 0.5); }
.seat.att-ANGRY { animation: angryFlash 0.9s infinite; }
.seat.att-ANGRY .avatar-ring { border-color: var(--red); }
.seat.att-FRIENDLY .avatar-ring { border-color: var(--green); box-shadow: 0 0 12px rgba(16, 185, 129, 0.4); }
.seat.att-THREATENING { animation: jitter 0.35s infinite; }
.seat.att-THREATENING .avatar-ring { border-color: var(--red); box-shadow: 0 0 14px rgba(244, 63, 94, 0.45); }

/* 状态行：筹码 / 血槽 */
.seat-stats { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 0.84em; flex-wrap: wrap; }
.stat-chips { color: var(--gold); font-weight: 700; }
.hp-slots { display: flex; gap: 4px; }
.hp-slot {
  width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 12px;
}
.hp-slot.on { border-color: rgba(244, 63, 94, 0.6); background: rgba(244, 63, 94, 0.14); }

/* 底牌区 */
.seat-cards { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; min-height: 40px; align-items: center; }
.commit-badge {
  font-size: 0.78em; font-weight: 800; letter-spacing: 1px;
  padding: 4px 12px; border-radius: 8px;
}
.commit-badge.split { color: var(--green); border: 1px solid rgba(16, 185, 129, 0.55); background: rgba(16, 185, 129, 0.1); }
.commit-badge.steal { color: var(--red); border: 1px solid rgba(244, 63, 94, 0.55); background: rgba(244, 63, 94, 0.12); animation: pop 0.4s; }
.commit-badge.unknown { color: var(--muted); border: 1px dashed var(--line); }
.cards-label { font-size: 0.7em; color: var(--muted); margin-right: 2px; }

/* 公屏嘴炮气泡（漫画风） */
.bubble {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  max-width: 92%; min-width: 60%;
  background: #f8fafc; color: #0f172a; font-weight: 700; font-size: 0.85em;
  padding: 7px 12px; border-radius: 12px; border: 2px solid #0f172a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  animation: pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 5;
}
.bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -9px; margin-left: -7px;
  border: 7px solid transparent; border-top-color: #0f172a;
}
.bubble .b-att { font-size: 0.85em; margin-left: 4px; }

/* 🧠 读心术监视器 */
.mind {
  margin-top: 10px; border-radius: 10px; padding: 8px 10px;
  background: rgba(15, 10, 34, 0.72);
  border: 1px solid rgba(139, 92, 246, 0.35);
  font-family: ui-monospace, Consolas, monospace; font-size: 0.76em; line-height: 1.5;
  color: #c4b5fd; min-height: 40px;
  box-shadow: inset 0 0 18px rgba(139, 92, 246, 0.12);
}
.mind .m-head { color: #7c6ce0; margin-right: 4px; }
.mind::after { content: '▊'; animation: blink 0.9s infinite; color: #7c6ce0; }
.mind.blocked { color: #4b5378; border-style: dashed; }
.mind.blocked::after { content: ''; }

/* 倒计时进度条 */
.cd {
  margin-top: 10px; height: 6px; border-radius: 3px; overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
}
.cd i { display: block; height: 100%; width: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--purple)); transition: width 0.2s linear; }
.cd.urgent i { background: linear-gradient(90deg, var(--red), var(--gold)); }
.cd.urgent { animation: jitter 0.3s infinite; }

/* ================= 控制台 ================= */
.console {
  margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, #141830, #10131f);
  padding: 14px;
}
.console .c-title { font-weight: 800; color: var(--gold); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.console .c-title .hint { font-weight: 400; color: var(--muted); font-size: 0.76em; }
.console .inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.console textarea {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px;
  color: var(--text); padding: 8px 10px; font-family: inherit; font-size: 0.88em;
  resize: vertical; min-height: 42px;
}
.console textarea:focus { outline: none; border-color: var(--purple); }
.att-picker { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.att-opt {
  display: flex; align-items: center; gap: 4px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--muted);
  border-radius: 999px; padding: 4px 10px; font-size: 0.78em;
}
.att-opt.on { color: var(--text); border-color: var(--purple); background: rgba(139, 92, 246, 0.15); }
.actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.bid-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.bid-controls input[type='number'] {
  width: 74px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 7px 9px; font-size: 1em;
}
.face-picker { display: flex; gap: 5px; }
.face-picker button {
  background: none; border: 1px solid transparent; border-radius: 9px; cursor: pointer; padding: 2px;
}
.face-picker button.on { border-color: var(--cyan); box-shadow: 0 0 10px rgba(34, 211, 238, 0.4); }
.wait-bar { color: var(--muted); font-size: 0.88em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wait-bar b { color: var(--text); }

/* ================= 战报流 ================= */
.feed-panel { max-height: 460px; overflow: auto; }
.feed-list { display: flex; flex-direction: column; gap: 7px; }
.feed-item {
  font-size: 0.78em; line-height: 1.45; padding: 7px 9px; border-radius: 9px;
  border-left: 3px solid var(--line); background: var(--panel-2); color: #b6bdd8;
  animation: slideIn 0.3s;
}
.feed-item.reveal { border-left-color: var(--gold); }
.feed-item.showdown { border-left-color: var(--cyan); }
.feed-item.finish { border-left-color: var(--purple); font-weight: 700; color: var(--text); }
.feed-item.sys { color: var(--muted); }
.feed-item.elim { border-left-color: var(--red); }

/* ================= 弹层 ================= */
.overlay {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(5, 6, 12, 0.78); backdrop-filter: blur(6px);
  animation: fadeIn 0.25s; padding: 16px;
}
.modal {
  width: min(560px, 96vw); max-height: 88vh; overflow: auto;
  background: linear-gradient(180deg, #161a30, #10131f);
  border: 1px solid var(--purple); border-radius: 16px; padding: 22px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(139, 92, 246, 0.18);
}
.modal h3 { margin: 0 0 4px; font-size: 1.15em; }
.modal .m-sub { color: var(--muted); font-size: 0.8em; margin: 0 0 14px; }
.modal .m-row { margin: 12px 0; }
.modal label.fl { display: block; font-size: 0.8em; color: var(--muted); margin-bottom: 5px; }
.modal input[type='text'], .modal input[type='number'] {
  width: 100%; background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 9px 11px; font-size: 0.92em;
}
.modal input:focus { outline: none; border-color: var(--purple); }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.avatar-grid button {
  font-size: 21px; padding: 7px 0; border-radius: 9px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line);
}
.avatar-grid button.on { border-color: var(--gold); background: rgba(245, 158, 11, 0.12); }
.m-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.m-actions .right { margin-left: auto; }
.passcode-reveal {
  text-align: center; padding: 14px 0 4px;
}
.passcode-reveal .pk {
  font-family: ui-monospace, Consolas, monospace; font-size: 1.8em; font-weight: 800;
  letter-spacing: 3px; color: var(--gold); text-shadow: 0 0 22px rgba(245, 158, 11, 0.5);
  user-select: all;
}
.passcode-reveal .warn { color: var(--red); font-size: 0.8em; margin-top: 8px; }
.profile-card { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.profile-card .pc-avatar {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 28px;
  background: radial-gradient(circle at 32% 28%, #34276b, #171b30); border: 2px solid var(--purple);
}
.cli-box {
  margin-top: 10px; background: #0a0c14; border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 11px; font-family: ui-monospace, Consolas, monospace; font-size: 0.72em;
  color: #86efac; word-break: break-all; line-height: 1.6; white-space: pre-wrap;
}

/* 终局结算 overlay */
.result-modal { text-align: center; }
.result-modal .res-headline { color: var(--gold); font-size: 1.05em; margin: 6px 0 14px; }
.standings { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.standing {
  display: flex; align-items: center; gap: 10px; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--panel-2);
}
.standing.win { border-color: rgba(245, 158, 11, 0.6); box-shadow: 0 0 16px rgba(245, 158, 11, 0.15); }
.standing .st-emoji { font-size: 23px; }
.standing .st-name { font-weight: 700; flex: 1; }
.standing .st-score { color: var(--cyan); font-size: 0.85em; }
.standing .st-elo { font-weight: 800; font-size: 0.95em; }
.standing .st-elo.up { color: var(--green); }
.standing .st-elo.down { color: var(--red); }
.standing .st-elo.zero { color: var(--muted); }

/* 揭晓横幅 */
.banner {
  position: fixed; top: 34%; left: 50%; transform: translate(-50%, 0); z-index: 300;
  max-width: 86vw; text-align: center;
  font-size: 1.35em; font-weight: 800; letter-spacing: 1px; line-height: 1.5;
  padding: 16px 30px; border-radius: 16px;
  background: rgba(10, 12, 22, 0.92); border: 1px solid var(--gold);
  color: var(--text); box-shadow: 0 0 60px rgba(245, 158, 11, 0.35);
  animation: bannerIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.banner.finish { border-color: var(--purple); box-shadow: 0 0 60px rgba(139, 92, 246, 0.4); }
.banner.out { opacity: 0; transition: opacity 0.45s; }

/* toast */
.toast {
  position: fixed; right: 18px; bottom: 18px; z-index: 400;
  background: #1c1130; border: 1px solid var(--purple); color: var(--text);
  padding: 10px 16px; border-radius: 10px; font-size: 0.85em; max-width: 78vw;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); animation: slideIn 0.3s;
}
.toast.out { opacity: 0; transition: opacity 0.4s; }

footer.site-foot { margin-top: 34px; text-align: center; color: #4b5378; font-size: 0.74em; line-height: 1.8; }
footer.site-foot a { color: #6b73a0; text-decoration: none; }

/* ================= 动画 ================= */
@keyframes pop { 0% { transform: translateX(-50%) scale(0.4); opacity: 0; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes jitter { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-1.5px); } 75% { transform: translateX(1.5px); } }
@keyframes angryFlash { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 1px var(--red), 0 0 22px rgba(244, 63, 94, 0.35); } }
@keyframes seatPulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.7); } 50% { box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25), 0 0 24px rgba(245, 158, 11, 0.25); } }
@keyframes goldPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes slideIn { from { opacity: 0; transform: translateY(-6px); } }
@keyframes bannerIn { 0% { transform: translate(-50%, 26px) scale(0.8); opacity: 0; } 100% { transform: translate(-50%, 0) scale(1); opacity: 1; } }
@keyframes fishFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes crownBob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; } }

/* ================= 响应式 ================= */
@media (max-width: 920px) {
  .lobby-grid, .room-grid { grid-template-columns: 1fr; }
  .seats { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .console .inputs { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.45em; }
  .hero::before { width: 300px; height: 300px; opacity: 0.7; }
  .topbar { flex-wrap: wrap; }
  .podium { grid-template-columns: 1fr; }
  .podium.solo { grid-template-columns: 1fr; }
  .pod .p-crown { top: 2px; }
}