:root{
  --bg:#0e1116; --panel:#161b22; --panel2:#1c222b; --line:#2a323d;
  --txt:#e6e9ef; --dim:#8b95a5; --dim2:#5f6b7c;
  --atk:#d85a30; --atk-d:#993c1d;
  --def:#378add; --def-d:#185fa5;
  --down:#6b7280; --gold:#ba7517; --good:#1d9e75; --bad:#e24b4a;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:14px;line-height:1.6;overflow:hidden;
}
.hidden{display:none!important}
.screen{min-height:100%;display:flex;flex-direction:column}
button{font-family:inherit}

/* ---------- 大厅 ---------- */
#lobby{flex-direction:row;align-items:center;justify-content:center;gap:28px;padding:24px;flex-wrap:wrap}
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:32px 28px;min-width:340px;max-width:440px;
}
.panel.rules{max-width:390px;background:var(--panel2)}
.title{margin:0;font-size:28px;font-weight:600;letter-spacing:2px}
.sub{margin:4px 0 22px;color:var(--dim);font-size:13px}
.heroes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.hero{
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:12px 8px;cursor:pointer;text-align:center;transition:.15s;
}
.hero:hover{border-color:var(--dim2)}
.hero.on{border-color:var(--gold);background:#241d10}
.hero .hn{font-size:13px;font-weight:500;margin-bottom:4px}
.hero .hs{font-size:11px;color:var(--dim);line-height:1.4}
.btn{
  background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  padding:10px 18px;border-radius:9px;cursor:pointer;font-size:14px;transition:.15s;
}
.btn:hover:not(:disabled){border-color:var(--dim2)}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#1a1206;font-weight:500}
.btn.primary:hover:not(:disabled){background:#d08a1c}
.btn.tiny{padding:5px 12px;font-size:12px}
.btn.wide{width:100%;margin-top:8px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--dim2);font-size:12px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.joinRow{display:flex;gap:8px}
.joinRow .btn{white-space:nowrap}
input{
  flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  padding:10px 14px;border-radius:9px;font-size:14px;
  text-transform:uppercase;letter-spacing:2px;
}
input:focus{outline:none;border-color:var(--dim2)}
.msg{margin-top:12px;font-size:12px;color:var(--dim);min-height:18px}
.msg.err{color:var(--bad)}
.rules h2{margin:0 0 12px;font-size:15px;font-weight:500}
.rules ul{margin:0;padding-left:18px;color:var(--dim);font-size:13px}
.rules li{margin-bottom:7px}
.rules b{color:var(--txt);font-weight:500}
.c-atk{color:var(--atk)!important}.c-def{color:var(--def)!important}.c-down{color:var(--down)!important}

/* ---------- 顶栏 ---------- */
.topbar{
  display:flex;align-items:center;gap:12px;padding:8px 14px;
  border-bottom:1px solid var(--line);background:var(--panel);flex-shrink:0;
}
.roomTag{font-size:12px;color:var(--dim)}
.roomTag b{color:var(--txt);letter-spacing:2px;font-family:ui-monospace,monospace}
.phaseTag{flex:1;text-align:center;font-size:13px;color:var(--gold)}
.watchTag{
  font-size:11px;padding:3px 10px;border-radius:20px;
  background:#241d10;border:1px solid var(--gold);color:#e0a94a;white-space:nowrap;
}
.netDot{
  width:8px;height:8px;border-radius:50%;background:var(--bad);
  flex-shrink:0;transition:.3s;
}
.netDot.on{background:var(--good)}
.btn.tiny{margin-left:0}

/* ---------- 战场 ---------- */
.board{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.side{padding:10px 14px;border-bottom:1px solid var(--line);flex-shrink:0;overflow:hidden}
.side.foe{background:#11151b}
.side.me{background:#12171e;border-top:1px solid var(--line);border-bottom:none;flex:1;display:flex;flex-direction:column;min-height:0}
.who{display:flex;align-items:center;gap:10px}
.avatar{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,var(--atk-d),var(--atk));
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:#fff;
}
.meta{flex:1;min-width:0}
.meta .name{font-size:13px;font-weight:500}
.meta .tag{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat{text-align:center;flex-shrink:0}
.stat span{display:block;font-size:19px;font-weight:600;font-family:ui-monospace,monospace;line-height:1.2}
.stat small{font-size:10px;color:var(--dim2);letter-spacing:1px}
.stat .hp{color:var(--bad)}.stat .ap{color:var(--gold)}
.guards{display:flex;gap:6px;margin-top:7px;min-height:22px;flex-wrap:wrap}
.guard{
  font-size:11px;padding:2px 8px;border-radius:20px;
  background:var(--panel2);border:1px solid var(--line);color:var(--dim);
}
.guard.on{background:#0f2437;border-color:var(--def-d);color:#7ab8f0}
.guard.blk.on{background:#241d10;border-color:var(--gold);color:#e0a94a}

/* 装备区 */
.equipRow{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;min-height:66px}
.slot{
  width:54px;height:68px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel2);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:3px;
  position:relative;cursor:default;transition:.15s;overflow:hidden;
}
.slot.empty{background:transparent;border-style:dashed;opacity:.3}
.slot .nm{font-size:10px;line-height:1.2;word-break:break-all;line-height:1.25}
.slot .vl{font-size:10px;font-family:ui-monospace,monospace;color:var(--dim2);margin-top:2px}
.slot.mode-attack{border-color:var(--atk);background:#2a1710}
.slot.mode-attack .nm{color:#f0a88a}
.slot.mode-guard{border-color:var(--def);background:#10202e}
.slot.mode-guard .nm{color:#9ccbf0}
.slot.locked::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5)}
.slot.clickable{cursor:pointer}
.slot.clickable:hover{transform:translateY(-3px);border-color:var(--gold)}
.slot .bonus{position:absolute;top:1px;left:4px;font-size:10px;color:var(--gold);font-weight:600;z-index:2}
.slot .lk{position:absolute;bottom:2px;right:4px;font-size:9px;color:#cfd6e0;z-index:2}
.slot .used{position:absolute;bottom:2px;left:4px;font-size:9px;color:var(--dim2);z-index:2}

/* 手牌 */
.handRow{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap;align-items:center;min-height:88px;flex-shrink:0}
.handLabel{font-size:11px;color:var(--dim2);width:100%;margin-bottom:-2px}
.card{
  width:66px;height:88px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel);padding:6px 4px;cursor:pointer;transition:.15s;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;
}
.card:hover{transform:translateY(-4px);border-color:var(--gold)}
.card .cn{font-size:11px;font-weight:500;line-height:1.25}
.card .cc{position:absolute;top:3px;left:5px;font-size:11px;color:var(--gold);font-family:ui-monospace,monospace;font-weight:600}
.card .cs{font-size:9px;color:var(--dim);line-height:1.3;margin-top:2px}
.card.t-attack{border-color:#5a3020}
.card.t-react{border-color:#2a4a5a}
.card.t-quick{border-color:var(--gold);background:#221b0e}
.card.dimmed{opacity:.45;cursor:not-allowed}
.card.dimmed:hover{transform:none;border-color:var(--line)}
.cardback{
  width:26px;height:36px;border-radius:4px;background:var(--panel2);
  border:1px solid var(--line);
}
.handCount{font-size:11px;color:var(--dim2)}

/* 中间控制条 */
.center{
  flex-shrink:0;padding:10px 14px;display:flex;flex-direction:column;align-items:center;gap:5px;
  background:#11151b;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.centerBtnWrap{min-height:38px;display:flex;align-items:center}
.turnInfo{font-size:11px;color:var(--dim2);text-align:center}

/* 日志 */
.logbox{
  height:104px;overflow-y:auto;padding:8px 14px;background:#0b0e12;
  border-top:1px solid var(--line);font-size:11px;color:var(--dim2);
  font-family:ui-monospace,monospace;line-height:1.7;flex-shrink:0;
}
.logbox .e{color:var(--bad)}
.logbox .t{color:#4a5563}

@media(max-width:720px){
  #lobby{padding:12px}
  .panel{padding:22px 18px;min-width:0;width:100%}
  .slot{width:44px;height:58px}
  .card{width:58px;height:80px}
  .logbox{height:72px}
  .side.me{overflow-y:auto}
}
/* ========== 准备阶段（选英雄） ========== */
#ready .readyWrap {
  max-width: 720px; margin: 0 auto; padding: 18px 16px 40px;
  display: flex; flex-direction: column; gap: 18px;
}
.readyHint {
  text-align: center; font-size: 15px; color: #9fb0a8;
  padding: 10px 14px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}
.readyHint b { color: #7fd1a8; }

.seats { display: flex; align-items: stretch; gap: 12px; }
.seats .vs {
  align-self: center; font-size: 20px; font-weight: 800; color: #6d7c75; padding: 0 2px;
}
.seat {
  flex: 1; min-height: 108px; border-radius: 12px; padding: 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; gap: 6px;
}
.seatTag { font-size: 12px; color: #8b9a93; letter-spacing: .5px; }
.seatHero { font-size: 20px; font-weight: 800; color: #eaf2ee; }
.seatHero.empty { color: #63736c; font-weight: 600; font-size: 16px; }
.seatDesc { font-size: 13px; color: #9fb0a8; line-height: 1.45; }

.readyPick {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: 16px;
}
.readyPick h3 { margin: 0 0 12px; font-size: 16px; color: #eaf2ee; }
#readyHeroes .hero.taken { opacity: .4; cursor: not-allowed; }
#readyHeroes .hero.taken:hover { border-color: transparent; }

.spectatorLine { text-align: center; font-size: 13px; color: #7d8c85; min-height: 18px; }

@media (max-width: 560px) {
  .seats { flex-direction: column; }
  .seats .vs { align-self: center; }
}

.seatHero.ok { color: #7fd1a8; }
.readyPick .tip { text-align: center; padding: 14px 4px; }

/* ---------- 决斗链（v9 新增） ---------- */
.duelChain{
  margin:8px 14px;padding:10px 12px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
}
.chainHead{
  display:flex;align-items:baseline;gap:10px;margin-bottom:8px;flex-wrap:wrap;
}
.chainTitle{font-size:13px;font-weight:700;color:var(--gold);letter-spacing:.5px}
.chainHint{font-size:11px;color:var(--dim)}
.chainRow{
  display:flex;gap:8px;align-items:stretch;
  overflow-x:auto;padding-bottom:4px;min-height:76px;
}
.chainEmpty{
  flex:1;display:flex;align-items:center;justify-content:center;
  color:var(--dim2);font-size:12px;border:1px dashed var(--line);
  border-radius:8px;padding:18px;
}
.chainCard{
  flex:0 0 auto;width:104px;padding:6px 8px;border-radius:8px;
  background:var(--panel2);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px;position:relative;
}
.chainCard.mine{border-color:var(--def)}
.chainCard.foe{border-color:var(--atk-d)}
/* 链尾 = 最后打出 = 结算时最先生效 */
.chainCard.tail{
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(186,117,23,.35), 0 0 12px rgba(186,117,23,.18);
  background:#221b0e;
}
.chainCard .ccHead{display:flex;justify-content:space-between;align-items:center}
.chainCard .ord{
  font-size:10px;color:var(--dim2);font-family:ui-monospace,monospace;
  background:var(--bg);border-radius:4px;padding:0 4px;
}
.chainCard .kind{font-size:10px;color:var(--dim)}
.chainCard .cn{font-size:11px;font-weight:600;line-height:1.25}
.chainCard .who{font-size:10px;color:var(--dim2)}
.chainCard.k-deploy .kind{color:var(--good)}
.chainCard.k-attack .kind{color:var(--atk)}
.chainCard.k-equipAttack .kind{color:var(--atk)}
.chainCard.k-trigger .kind,
.chainCard.k-quick .kind{color:var(--def)}
.chainCard .firstMark{
  position:absolute;top:-8px;right:6px;
  font-size:9px;background:var(--gold);color:#12161c;
  border-radius:6px;padding:1px 5px;font-weight:700;
}

/* 阶段可用性：可打出 / 本阶段打不出 */
.card.inPhase{
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(186,117,23,.3);
  cursor:pointer;
}
.card.inPhase:hover{transform:translateY(-4px)}
.card.outOfPhase{opacity:.32;filter:grayscale(.5);cursor:not-allowed}
.card.outOfPhase:hover{transform:none;border-color:var(--line)}