* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --felt: #12281d;
  --felt2: #0d1f16;
  --gold: #d4af37;
  --gold2: #f0d77b;
  --red: #e05252; --blue: #5aa7e0; --green: #6cc96c;
  --text: #f0ede4;
  --dim: #b9c2b4;
  --panel: rgba(20, 32, 24, 0.82);
  --line: rgba(212, 175, 55, 0.35);
}
html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  background:
    radial-gradient(1200px 700px at 50% -20%, #1d3a2a 0%, var(--felt) 55%, var(--felt2) 100%);
  color: var(--text);
  overflow-x: hidden;
}
.screen { min-height: 100vh; }
.hidden { display: none !important; }

/* ---------- lobby ---------- */
#lobby { display: flex; align-items: center; justify-content: center; padding: 36px 16px; }
.lobby-box {
  width: 560px; max-width: 100%;
  background: linear-gradient(160deg, rgba(24,38,28,.95), rgba(12,22,16,.95));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 34px 38px;
  box-shadow: 0 24px 80px rgba(0,0,0,.6), inset 0 0 60px rgba(212,175,55,.04);
}
.title {
  font-size: 46px; text-align: center;
  color: var(--gold2);
  letter-spacing: 10px;
  text-shadow: 0 2px 0 #5a3d00, 0 0 28px rgba(212,175,55,.35);
}
.subtitle { text-align: center; color: var(--dim); margin: 8px 0 26px; letter-spacing: 2px; }
.notice-line {
  margin: 8px auto 14px; max-width: 460px;
  text-align: center; font-size: 13px; color: var(--gold2);
  background: rgba(212,175,55,.1);
  border: 1px dashed rgba(212,175,55,.5);
  border-radius: 10px; padding: 6px 12px;
  cursor: pointer; user-select: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notice-line:hover { background: rgba(212,175,55,.22); }
.notice-line .badge {
  display: inline-block; margin-left: 8px; padding: 0 7px;
  background: var(--red); color: #fff; border-radius: 9px; font-size: 11px;
}
#noticeModal .nt-item { border-bottom: 1px dashed rgba(212,175,55,.25); padding: 8px 2px; font-size: 13.5px; line-height: 1.75; }
#noticeModal .nt-item:last-child { border-bottom: none; }
#noticeModal .nt-date { color: var(--dim); font-size: 12px; margin-right: 8px; }

/* ---------- 局内聊天（默认隐藏，可随时开关，不挡界面） ---------- */
#chatToggle {
  position: fixed; right: 12px; bottom: 12px; z-index: 260;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(20,32,24,.95); border: 1px solid rgba(212,175,55,.6);
  color: var(--gold2); font-size: 19px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
#chatToggle:hover { background: rgba(212,175,55,.25); }
#chatUnread {
  position: absolute; top: -4px; right: -4px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; line-height: 18px; border-radius: 9px; padding: 0 4px;
}
/* 临时消息气泡：显示在顶部中央（对局中不被手牌/按钮遮挡），几秒后自动隐藏 */
#chatBubble {
  position: fixed; left: 50%; top: 70px; right: auto; bottom: auto;
  transform: translateX(-50%) translateY(-8px);
  max-width: min(460px, calc(100vw - 24px));
  background: rgba(10, 16, 12, .96); border: 2px solid rgba(212, 175, 55, .6);
  color: var(--text); font-size: 14px; line-height: 1.6;
  border-radius: 12px; padding: 9px 16px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  word-break: break-all;
  z-index: 300;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .6);
}
#chatBubble.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#chatBubble b { color: var(--gold2); }
/* 有新消息：聊天按钮呼吸提示 */
#chatToggle.has-unread { animation: chatPulse 1s ease-in-out infinite; }
@keyframes chatPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 82, 82, .7), 0 6px 20px rgba(0, 0, 0, .5); }
  50% { box-shadow: 0 0 0 10px rgba(224, 82, 82, 0), 0 6px 20px rgba(0, 0, 0, .5); }
}
#chatPanel {
  position: fixed; right: 12px; bottom: 64px; width: 280px; z-index: 255;
  background: rgba(10,16,12,.96); border: 1px solid rgba(212,175,55,.35);
  border-radius: 12px; padding: 8px;
}
#chatHead {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--gold2); font-size: 13px; margin-bottom: 6px;
}
#chatCloseBtn {
  background: none; border: none; color: var(--dim); font-size: 16px; cursor: pointer; padding: 0 6px;
}
#chatCloseBtn:hover { color: var(--gold2); }
#chatLog {
  height: 130px; overflow-y: auto; font-size: 13.5px; line-height: 1.8;
  color: var(--text); margin-bottom: 6px;
}
/* 领队位状态标注 */
.tt-leader { font-size: 11px; margin-left: 4px; }
.tt-leader.on { color: #6fdc7c; }
.tt-leader.off { color: #ffb0a8; }
#chatLog .chat-line b { color: var(--gold2); }
#chatLog .chat-line.chat-self { color: #bfe8ff; }
#chatLog .chat-line.chat-self b { color: #7cc4ff; }
#chatRow { display: flex; gap: 6px; }
#chatInput {
  flex: 1; background: rgba(6,10,8,.8); border: 1px solid rgba(212,175,55,.3);
  border-radius: 8px; padding: 10px 12px; color: var(--text); font-size: 15px; min-height: 42px;
}
#chatSendBtn {
  background: rgba(212,175,55,.2); border: 1px solid rgba(212,175,55,.5);
  color: var(--gold2); border-radius: 8px; padding: 0 16px; cursor: pointer; font-size: 14px; min-height: 42px;
}
#chatQuick { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
#chatQuick .chat-quick {
  font-size: 11px; background: rgba(212,175,55,.12); border: 1px solid rgba(212,175,55,.3);
  color: var(--dim); border-radius: 12px; padding: 2px 8px; cursor: pointer;
}
#chatQuick .chat-quick:hover { color: var(--gold2); }
@media (max-width: 860px) {
  #chatPanel { right: 8px; bottom: 8px; width: 210px; }
  #chatLog { height: 100px; }
}

/* ---------- 全局提示（大厅/准备房可见） ---------- */
#globalToast {
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%);
  background: rgba(16,26,20,.97); color: var(--gold2);
  border: 1px solid var(--gold); border-radius: 10px;
  padding: 8px 20px; font-size: 14px; z-index: 1200;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
  max-width: 92vw; text-align: center; letter-spacing: 1px;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
#globalToast.show { opacity: 1; }

/* ---------- 准备房间 ---------- */
.ready-card {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(212,175,55,.07); border: 1px solid rgba(212,175,55,.35);
  border-radius: 12px; padding: 12px 16px; margin: 8px 0;
  font-size: 15px;
}
.ready-card .ready-name { color: var(--gold2); font-weight: 700; }
.ready-card .ready-state { color: var(--dim); font-size: 13px; }
.ready-card.ready-ok { border-color: #6fdc7c; background: rgba(111,220,124,.1); }
.ready-card.ready-ok .ready-state { color: #6fdc7c; }
#specCount { color: var(--gold2); font-size: 13px; margin-right: 10px; }

/* ---------- Bug 反馈 ---------- */
#bugModal textarea { width: 100%; min-height: 110px; resize: vertical; margin-top: 8px; }
.bug-item {
  border: 1px solid rgba(212,175,55,.3); border-radius: 10px;
  padding: 10px 12px; margin: 8px 0; background: rgba(212,175,55,.05);
}
.bug-item .bug-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bug-item .bug-status { font-size: 12px; white-space: nowrap; }
.bug-item .bug-status.open { color: #ffcf6e; }
.bug-item .bug-status.resolved { color: #6fdc7c; }
.bug-item .bug-meta { color: var(--dim); font-size: 12px; margin: 4px 0; }
.bug-item .bug-desc { color: var(--text); font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-all; }
.bug-item button { margin-top: 8px; }
/* ---------- 构筑器增强 ---------- */
.builder-pool .card { position: relative; cursor: pointer; }
.builder-pool .pool-count {
  position: absolute; top: 2px; right: 2px;
  background: rgba(224,82,82,.92); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 9px; padding: 1px 6px; z-index: 5;
}
.builder-pool .pool-plus3 {
  position: absolute; bottom: 2px; right: 2px;
  background: rgba(212,175,55,.9); color: #1a1400; font-size: 11px; font-weight: 700;
  border: none; border-radius: 8px; padding: 1px 7px; cursor: pointer; z-index: 5;
}
.builder-pool .pool-plus3:hover { background: var(--gold2); }
.modal-body-row select {
  background: rgba(6,10,8,.85); color: var(--text); border: 1px solid rgba(212,175,55,.4);
  border-radius: 8px; padding: 5px 8px; font-size: 12px; flex: 1;
}

.room-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.room-row .room-info { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-row .room-code { color: var(--gold2); font-weight: 700; }
.room-row .watch-btn { font-size: 12px; padding: 2px 8px; }
.field { margin-bottom: 14px; }
.field label { display: block; color: var(--dim); margin-bottom: 6px; font-size: 13px; letter-spacing: 1px; }
input, select, button {
  width: 100%; padding: 11px 13px; border-radius: 9px;
  border: 1px solid rgba(212,175,55,.3);
  background: rgba(8,14,10,.85);
  color: var(--text); font-size: 15px;
  outline: none;
}
input:focus, select:focus { border-color: var(--gold); }
button { cursor: pointer; background: linear-gradient(180deg, #24382b, #182a1f); border: 1px solid rgba(212,175,55,.35); transition: all .15s; }
button:hover { filter: brightness(1.15); transform: translateY(-1px); }
button.primary { background: linear-gradient(135deg, #c9a227, #e8c95c); color: #221a00; font-weight: 800; border: none; }
.btns { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.btns button { flex: 1; min-width: 120px; }
.join-row { display: flex; gap: 10px; margin-top: 12px; }
.join-row input { flex: 1; text-transform: uppercase; }
.status { margin-top: 14px; min-height: 22px; color: var(--gold2); text-align: center; font-size: 14px; }
.roomline { text-align: center; color: var(--dim); font-size: 14px; margin-top: 8px; }
.roomline b { color: var(--gold); letter-spacing: 3px; }
.hint { margin-top: 20px; padding: 14px; background: rgba(8,14,10,.6); border: 1px solid rgba(212,175,55,.2); border-radius: 12px; font-size: 12.5px; color: var(--dim); line-height: 1.9; }
.hint code { color: var(--gold2); }

/* ---------- top bar ---------- */
#topBar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; color: var(--dim); font-size: 13px;
  background: rgba(8,14,10,.55); border-bottom: 1px solid var(--line);
}
#topBar .mini { width: auto; padding: 6px 12px; font-size: 12.5px; margin-left: 8px; }

/* ---------- game table ---------- */
#game { height: 100vh; display: flex; flex-direction: column; }
#table {
  flex: 1; display: grid;
  grid-template-columns: 1fr 320px 1fr;
  grid-template-rows: 1fr;
  gap: 10px;
  padding: 10px 14px 14px;
  min-height: 0;
}
.side {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto;
  box-shadow: inset 0 0 50px rgba(0,0,0,.35);
}
#centerArea {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  min-height: 0;
}
#phaseBanner {
  text-align: center; font-size: 17px; color: var(--gold2);
  letter-spacing: 3px; padding: 10px;
  background: rgba(212,175,55,.08);
  border: 1px solid rgba(212,175,55,.35);
  border-radius: 12px;
  text-shadow: 0 1px 2px #000;
}
#turnInfo { text-align: center; color: var(--dim); font-size: 13px; }
#log {
  flex: 1; min-height: 120px;
  background: rgba(6,10,8,.7); border: 1px solid rgba(212,175,55,.2);
  border-radius: 12px; padding: 10px 12px;
  overflow-y: auto; font-size: 12.5px; line-height: 1.8;
}
#log .entry { color: var(--dim); border-bottom: 1px dashed rgba(212,175,55,.12); padding: 2px 0; }
#toast { text-align: center; color: var(--gold2); min-height: 18px; font-size: 13px; }

/* player strip（状态条：滚动时吸顶固定，始终可见） */
.player-strip {
  display: flex; align-items: center; gap: 12px;
  background: rgba(8,14,10,.96);
  border: 1px solid rgba(212,175,55,.25);
  border-radius: 12px;
  padding: 8px 12px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #e8c95c, #6b4d0a);
  color: #221a00; font-weight: 900; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px rgba(212,175,55,.4);
}
.pinfo2 { flex: 1; min-width: 140px; }
.pname { font-size: 17px; font-weight: 800; color: var(--gold2); }
.php { font-size: 14px; color: var(--dim); margin-top: 2px; }
.hpbar { height: 9px; background: #0a0f0c; border-radius: 6px; margin: 5px 0 3px; overflow: hidden; border: 1px solid rgba(212,175,55,.3); }
.hpbar > div { height: 100%; background: linear-gradient(90deg, #c0392b, #e8c95c); transition: width .3s; }
.piles { display: flex; gap: 8px; flex-wrap: wrap; }
.pile {
  min-width: 52px; text-align: center;
  background: rgba(8,14,10,.8);
  border: 1px solid rgba(212,175,55,.3);
  border-radius: 10px; padding: 5px 8px;
}
.pile b { display: block; font-size: 17px; color: var(--gold2); }
.pile span { font-size: 10.5px; color: var(--dim); }

/* zones */
.zone-row { display: flex; flex-direction: column; gap: 6px; }
.zone-title { color: var(--gold); font-size: 12px; letter-spacing: 3px; border-left: 3px solid var(--gold); padding-left: 8px; }
.hand-title { margin-top: 4px; }
.role-row, .action-row, .concerto-row { display: flex; gap: 10px; flex-wrap: wrap; min-height: 120px; }
.hand-row {
  display: flex; gap: 10px; overflow-x: auto;
  padding: 10px 4px; min-height: 190px;
  background: rgba(6,10,8,.4);
  border: 1px dashed rgba(212,175,55,.25);
  border-radius: 14px;
}
.action-btns { display: flex; gap: 8px; flex-wrap: wrap; min-height: 44px; margin-top: 6px; }
.action-btns button { width: auto; padding: 9px 16px; font-size: 13.5px; }
.action-btns button:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ---------- cards ---------- */
.card {
  position: relative;
  width: 108px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #3a4763;
  background: #101820;
  flex: 0 0 auto;
  cursor: pointer;
  user-select: none;
  transition: transform .14s, box-shadow .14s, border-color .14s;
  box-shadow: 0 3px 10px rgba(0,0,0,.5);
}
.card:hover { transform: translateY(-8px) scale(1.06); box-shadow: 0 14px 30px rgba(0,0,0,.6); z-index: 5; }
.card img { width: 100%; display: block; }
.card.selected {
  position: relative;
  outline: 3px solid var(--gold2);
  transform: translateY(-12px) scale(1.06);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .55);
  z-index: 20;
}
.card.selected::after {
  content: '✓';
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; line-height: 22px;
  background: var(--gold2); color: #241a05;
  border-radius: 50%; font-size: 14px; font-weight: 900;
  text-align: center; z-index: 6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.card .cname {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3px 4px; font-size: 10.5px;
  background: rgba(0,0,0,.8); color: #fff;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card .badge {
  position: absolute; top: 3px; left: 3px;
  background: rgba(0,0,0,.85); color: #fff;
  font-size: 11px; padding: 1px 6px; border-radius: 5px;
  border: 1px solid rgba(212,175,55,.5);
}
.card.red { border-color: var(--red); }
.card.blue { border-color: var(--blue); }
.card.green { border-color: var(--green); }
.card.role { width: 118px; min-height: 168px; }
.card.role img { min-height: 168px; object-fit: cover; }
.card.small { width: 88px; }
.card.small img { min-height: 126px; object-fit: cover; }
.card.face-down {
  background: linear-gradient(135deg, #141d2b, #2b3a52);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 13px; letter-spacing: 2px;
  border: 2px solid #46587a; min-height: 120px;
}
.card.face-down.small { min-height: 126px; }

.role-slot {
  position: relative; width: 118px; min-height: 168px;
  border: 2px dashed rgba(212,175,55,.5);
  border-radius: 10px;
  background: rgba(6,10,8,.55);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  color: var(--gold2); font-size: 13px; cursor: pointer;
  flex: 0 0 auto; overflow: visible; height: auto;
  text-align: center; line-height: 1.5;
  transition: all .15s;
}
.role-slot img { width: 100%; }
.role-slot:hover { border-color: var(--gold2); background: rgba(212,175,55,.1); }
.role-slot.leader { border-color: var(--gold2); box-shadow: 0 0 14px rgba(212,175,55,.4); }
.role-slot .lv { position: absolute; top: 4px; left: 4px; background: rgba(0,0,0,.75); color: var(--gold2); font-size: 12px; padding: 1px 7px; border-radius: 5px; }
.role-slot img { width: 100%; min-height: 168px; object-fit: cover; }

/* ---------- tooltip ---------- */
#cardTooltip {
  position: fixed; z-index: 999;
  width: 264px;
  max-height: 78vh;
  overflow-y: auto;
  background: rgba(10,16,12,.97);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text);
  box-shadow: 0 12px 40px rgba(0,0,0,.7);
  pointer-events: none;
}
#cardTooltip h4 { color: var(--gold2); margin-bottom: 6px; font-size: 15px; }
#cardTooltip .tt-row { display: flex; justify-content: space-between; gap: 8px; }
#cardTooltip .tt-k { color: var(--dim); }
#cardTooltip .tt-v { color: var(--text); font-weight: 700; }
#cardTooltip .tt-eff { margin-top: 8px; border-top: 1px dashed rgba(212,175,55,.3); padding-top: 6px; color: var(--dim); white-space: pre-wrap; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 200; }
.modal-box {
  width: 680px; max-width: 94vw; max-height: 88vh; overflow-y: auto;
  background: linear-gradient(160deg, #16241b, #0c1710);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 20px 80px rgba(0,0,0,.7);
}
.modal-box h3 { color: var(--gold2); margin-bottom: 14px; letter-spacing: 2px; }
.modal-body-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.modal .card { width: 116px; }
.modal .card img { min-height: 162px; object-fit: cover; }
.modal-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.modal-btns button { width: 110px; }
.opt-note { color: var(--dim); font-size: 12.5px; margin: 6px 0; line-height: 1.8; }
.center-box { text-align: center; }
.pass-name { font-size: 32px; color: var(--gold2); margin: 18px 0; letter-spacing: 6px; }

/* gallery & rules */
.gallery-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.gallery-grid .card { width: 118px; }
.gallery-grid .card img { min-height: 166px; object-fit: cover; }
.rules-text { color: var(--dim); line-height: 2; font-size: 13.5px; }
.rules-text h4 { color: var(--gold2); margin: 14px 0 4px; }
.rules-text p { margin: 4px 0; }

/* scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(212,175,55,.35); border-radius: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.2); }

@media (max-width: 980px) {
  #table { grid-template-columns: 1fr; grid-template-rows: auto auto auto; overflow-y: auto; }
  #game { height: auto; min-height: 100vh; }
  .card { width: 92px; }
  .card.role, .role-slot { width: 100px; min-height: 144px; }
}
#guideBar {
  text-align: center; color: #ffe9a8; font-size: 13.5px;
  padding: 8px 10px; margin-top: 4px;
  background: rgba(212,175,55,.1);
  border: 1px solid rgba(212,175,55,.3);
  border-radius: 10px;
  line-height: 1.6;
}
/* ---------- 大字节点标注 ---------- */
#bigBanner {
  position: fixed; left: 50%; top: 30%;
  transform: translate(-50%, -50%) scale(.96);
  opacity: 0; pointer-events: none; z-index: 900;
  font-size: clamp(1.8rem, 4.6vw, 3rem);
  font-weight: 800; letter-spacing: 4px; white-space: nowrap;
  text-align: center; color: #fff;
  text-shadow: 0 0 14px rgba(120,170,255,.6), 0 2px 10px rgba(0,0,0,.55);
  transition: opacity .45s ease, transform .45s ease;
}
#bigBanner.big-show { opacity: 1; animation: bigPop .4s ease; }
@keyframes bigPop {
  0% { transform: translate(-50%, -50%) scale(.94); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
#bigBanner.big-turn  { color: #bfe8ff; text-shadow: 0 0 22px rgba(90,180,255,.95), 0 4px 16px #000; }
#bigBanner.big-battle{ color: #ffd27a; text-shadow: 0 0 22px rgba(255,160,40,.95), 0 4px 16px #000; }
#bigBanner.big-combo { color: #ff9a7a; text-shadow: 0 0 22px rgba(255,80,50,.95), 0 4px 16px #000; }
#bigBanner.big-win   { color: #ffe9a8; text-shadow: 0 0 26px rgba(255,215,80,1), 0 4px 18px #000; }
#bigBanner.big-lose  { color: #ffb0a8; text-shadow: 0 0 24px rgba(255,90,70,.95), 0 4px 16px #000; }

/* ---------- 对战动画 ---------- */
#fxLayer { position: fixed; inset: 0; pointer-events: none; z-index: 300; overflow: hidden; }
/* 柔和阶段提示：只让横幅轻微亮起，不再全屏闪光 */
#phaseBanner.pulse { animation: bannerPulse .9s ease; }
#phaseBanner.pulse-red { animation: bannerPulseRed .9s ease; }
@keyframes bannerPulse { 0% { background: rgba(212,175,55,.3); } 100% { background: rgba(212,175,55,.08); } }
@keyframes bannerPulseRed { 0% { background: rgba(224,82,82,.3); } 100% { background: rgba(212,175,55,.08); } }

/* 动画细节优化 */
@keyframes cardEnter { 0% { transform: translateY(16px) scale(.55); opacity: 0; } 70% { transform: translateY(-3px) scale(1.06); opacity: 1; } 100% { transform: none; opacity: 1; } }
.card.card-enter { animation: cardEnter .3s ease; }
@keyframes cardPlace { 0% { transform: translateY(-24px) rotateX(80deg) scale(.7); opacity: .3; } 100% { transform: none; opacity: 1; } }
.card.card-place { animation: cardPlace .34s ease; }
@keyframes roleGlow { 0% { box-shadow: 0 0 0 rgba(212,175,55,0); } 40% { box-shadow: 0 0 30px rgba(212,175,55,.95); } 100% { box-shadow: 0 0 0 rgba(212,175,55,0); } }
.role-slot.role-glow { animation: roleGlow 1s ease; }
@keyframes dmgPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.dmg-num { animation: dmgPop .3s ease; }
#log .log-entry-new { animation: logIn .35s ease; }
@keyframes logIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.card.reveal { animation: cardFlipIn .55s ease; }
@keyframes cardFlipIn {
  0% { transform: rotateY(90deg) scale(.9); opacity: .2; }
  60% { transform: rotateY(-8deg) scale(1.03); opacity: 1; }
  100% { transform: rotateY(0) scale(1); }
}

.dmg-num {
  position: fixed; z-index: 400;
  font-size: 24px; font-weight: 900; color: #ff8a7e;
  text-shadow: 0 2px 0 #500, 0 0 18px rgba(255,60,40,.8);
  pointer-events: none;
  animation: dmgFloat 1.3s ease-out forwards;
}
.dmg-num.heal { color: #6fdc7c; text-shadow: 0 2px 0 #053, 0 0 18px rgba(80,255,120,.7); }
@keyframes dmgFloat {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); }
  15% { opacity: 1; transform: translate(-50%, -10px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -90px) scale(1); }
}

.hp-shake { animation: hpShake .5s ease; }
@keyframes hpShake {
  0%,100% { transform: translateX(0); }
  30% { transform: translateX(-3px); }
  70% { transform: translateX(3px); }
}

.log-entry-new { animation: logIn .4s ease; }
@keyframes logIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.deck-list { max-height: 180px; overflow-y: auto; border: 1px solid rgba(212,175,55,.3); border-radius: 10px; padding: 8px; margin-top: 8px; }
.deck-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; background: rgba(6,10,8,.5); border-radius: 8px; margin-bottom: 4px; font-size: 13px; }
.deck-row button { width: 30px; padding: 2px 0; font-size: 15px; }
.builder-pool { max-height: 300px; overflow-y: auto; }
.combo-badge { position: absolute; top: 3px; right: 3px; background: rgba(212,175,55,.95); color: #221a00; font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 4px; }
.role-skills { font-size: 10px; color: var(--dim); line-height: 1.5; margin: 4px 3px 0; max-height: 74px; overflow-y: auto; text-align: left; }
.role-skills b { color: var(--gold2); }
#log .entry.step { color: var(--gold2); font-weight: 700; font-size: 13px; }
#tracker { position: fixed; right: 10px; top: 46px; bottom: 10px; width: 290px; z-index: 160;
  background: rgba(8,14,10,.96); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; overflow-y: auto; font-size: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
#tracker h4 { color: var(--gold2); margin-bottom: 8px; }
.tr-sec { color: var(--gold); margin: 10px 0 4px; font-weight: 700; font-size: 11.5px; }
.tr-body { color: var(--dim); line-height: 1.6; }
.tr-table { width: 100%; border-collapse: collapse; }
.tr-table td { padding: 3px 4px; border-bottom: 1px dashed rgba(212,175,55,.15); color: var(--dim); }
.tr-table td:last-child { text-align: right; color: var(--text); }
.tr-chip { display: inline-block; margin: 2px 3px; padding: 2px 7px; border-radius: 6px; background: rgba(212,175,55,.12); border: 1px solid rgba(212,175,55,.3); font-size: 11px; }
.tr-chip.used { background: rgba(90,167,224,.15); border-color: rgba(90,167,224,.4); }
.hand-row .card { width: 128px; }
.hand-row .card img { min-height: 180px; object-fit: cover; }
.hand-row .card:hover { transform: translateY(-12px) scale(1.16); z-index: 20; }
.hand-row { min-height: 210px; }
.room-list { max-height: 220px; overflow-y: auto; }
.room-row { cursor: pointer; }
.room-row.selected { border: 2px solid var(--gold); background: rgba(212,175,55,.15); }
/* ---------- 多屏适配 ---------- */
#cardTooltip { width: min(264px, calc(100vw - 16px)); max-height: calc(100vh - 16px); }
@media (max-width: 1280px) {
  #table { grid-template-columns: 1fr 260px 1fr; gap: 8px; padding: 8px 10px; }
  .card { width: 96px; }
  .card.role, .role-slot { width: 104px; min-height: 148px; }
  .card.small { width: 78px; }
  .hand-row .card { width: 112px; }
  .hand-row .card img { min-height: 158px; }
  .role-skills { font-size: 9.5px; }
}
@media (max-width: 860px) {
  #table { grid-template-columns: 1fr; grid-template-rows: auto auto auto; overflow-y: auto; }
  #game { height: auto; min-height: 100vh; }
  #centerArea { min-height: 200px; }
  #topBar { flex-wrap: wrap; gap: 6px; }
  .card { width: 88px; }
  .card.role, .role-slot { width: 94px; min-height: 134px; }
  .card.small { width: 72px; }
  .hand-row .card { width: 104px; }
  .hand-row .card img { min-height: 146px; }
  #tracker { width: 230px; }
}
@media (max-width: 520px) {
  .card { width: 78px; }
  .card.role, .role-slot { width: 84px; min-height: 120px; }
  .hand-row .card { width: 92px; }
  .hand-row .card img { min-height: 130px; }
  .role-skills { display: none; } /* 超小屏隐藏长文本，悬停仍可看 */
  .piles { gap: 4px; }
  .pile { min-width: 44px; padding: 3px 5px; }
  #phaseBanner { font-size: 14px; }
  #bigBanner { font-size: clamp(1.7rem, 9vw, 2.6rem); letter-spacing: 3px; }
}
.opp-hand { background: rgba(6,10,8,.25); border-style: dashed; }
.opp-hand .card.face-down.small { width: 46px; min-height: 66px; font-size: 10px; }
@media (max-width: 860px) {
  .opp-hand .card.face-down.small { width: 40px; min-height: 58px; }
}
#tutorialHint {
  position: fixed; top: 8px; left: 0; right: 0; margin: 0 auto;
  width: min(640px, calc(100vw - 24px));
  max-width: 640px;
  box-sizing: border-box;
  z-index: 300;
  background: linear-gradient(160deg, rgba(24, 36, 28, .98), rgba(12, 18, 14, .98));
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: 10px 18px 12px;
  font-size: 14.5px; line-height: 1.8; color: var(--text);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .65), 0 0 30px rgba(212, 175, 55, .28);
  text-align: center;
}
#tutorialHint.done { border-color: #6fdc7c; box-shadow: 0 10px 40px rgba(0, 0, 0, .65), 0 0 30px rgba(111, 220, 124, .28); }
.tut-progress { color: var(--gold2); margin-bottom: 2px; font-size: 13px; font-weight: 700; letter-spacing: 2px; }
.tut-dot { display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; background: rgba(212,175,55,.15); border: 1px solid rgba(212,175,55,.4); margin-right: 4px; color: var(--dim); }
.tut-dot.on { background: rgba(111,220,124,.25); border-color: #6fdc7c; color: #6fdc7c; font-weight: 700; }
.tut-body { margin: 2px 0 8px; font-size: 14.5px; }
.tut-body b { color: var(--gold2); }
#tutorialHint .mini { margin-right: 6px; }
.tut-actions { display: flex; justify-content: center; gap: 10px; align-items: center; }
.tut-actions .primary {
  font-size: 15px; font-weight: 800; padding: 9px 26px; letter-spacing: 2px;
  animation: tutNextPulse 1.2s ease-in-out infinite;
}
@keyframes tutNextPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(212, 175, 55, .5), 0 0 16px 4px rgba(212, 175, 55, .35); }
  50% { box-shadow: 0 0 0 6px rgba(212, 175, 55, .3), 0 0 26px 10px rgba(212, 175, 55, .55); }
}

/* ================= 新主界面（前沿审美：玻璃拟态 + 光晕动效） ================= */
body {
  background:
    radial-gradient(1400px 800px at 80% -10%, rgba(60,120,90,.35) 0%, transparent 60%),
    radial-gradient(1200px 700px at -10% 30%, rgba(90,60,140,.28) 0%, transparent 55%),
    radial-gradient(1000px 600px at 50% 110%, rgba(180,140,60,.18) 0%, transparent 60%),
    linear-gradient(160deg, #101c14 0%, #0a120c 60%, #0d0a14 100%);
}
#lobby { position: relative; overflow: hidden; }
.lobby-stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.glow {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5;
  animation: glowDrift 18s ease-in-out infinite alternate;
}
.glow-1 { width: 520px; height: 520px; left: -120px; top: -120px; background: rgba(40,160,110,.4); }
.glow-2 { width: 460px; height: 460px; right: -100px; top: 20%; background: rgba(120,80,200,.35); animation-delay: -6s; }
.glow-3 { width: 560px; height: 560px; left: 30%; bottom: -220px; background: rgba(210,165,70,.25); animation-delay: -12s; }
@keyframes glowDrift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, -30px) scale(1.15); }
}
.lobby-shell {
  position: relative; z-index: 1;
  max-width: 1080px; margin: 0 auto; padding: 28px 22px 34px;
}
.lobby-hero { text-align: center; margin-bottom: 26px; }
.hero-badge {
  display: inline-block; font-size: 11px; letter-spacing: 4px; color: rgba(240,215,123,.75);
  border: 1px solid rgba(212,175,55,.4); border-radius: 20px; padding: 4px 14px; margin-bottom: 10px;
  background: rgba(212,175,55,.06);
}
#lobby .title {
  font-size: 52px; margin-bottom: 4px;
  background: linear-gradient(180deg, #fff3c4 0%, #f0d77b 45%, #b8860b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 40px rgba(212,175,55,.35);
  letter-spacing: 12px;
}
#lobby .subtitle { color: rgba(185,194,180,.85); letter-spacing: 3px; margin-bottom: 12px; }
.lobby-grid { display: grid; grid-template-columns: 340px 1fr; gap: 16px; }
.panel {
  background: linear-gradient(160deg, rgba(24,38,28,.75), rgba(12,22,16,.8));
  border: 1px solid rgba(212,175,55,.22);
  border-radius: 18px; padding: 18px 20px;
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0,0,0,.45), inset 0 0 40px rgba(212,175,55,.03);
}
.panel-title {
  margin: 0 0 14px; font-size: 15px; letter-spacing: 2px; color: var(--gold2);
  border-bottom: 1px dashed rgba(212,175,55,.25); padding-bottom: 8px;
}
#lobby .field { margin-bottom: 12px; }
#lobby .field label { font-size: 12px; color: var(--dim); display: block; margin-bottom: 5px; letter-spacing: 1px; }
#lobby input[type="text"], #lobby input:not([type]), #lobby select {
  background: rgba(6,10,8,.7); border: 1px solid rgba(212,175,55,.3); border-radius: 10px;
  color: var(--text); padding: 8px 12px; font-size: 13px; outline: none;
}
#lobby input:focus, #lobby select:focus { border-color: rgba(212,175,55,.7); box-shadow: 0 0 0 3px rgba(212,175,55,.12); }
.play-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.play-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: linear-gradient(150deg, rgba(30,48,36,.9), rgba(16,28,20,.9));
  border: 1px solid rgba(212,175,55,.3); border-radius: 14px;
  padding: 14px 16px; cursor: pointer; text-align: left; color: var(--text);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.play-card:hover {
  transform: translateY(-3px);
  border-color: rgba(212,175,55,.75);
  box-shadow: 0 10px 28px rgba(0,0,0,.5), 0 0 18px rgba(212,175,55,.18);
}
.play-card .pc-icon { font-size: 24px; }
.play-card .pc-name { font-size: 14px; font-weight: 700; color: var(--gold2); }
.play-card .pc-desc { font-size: 11px; color: var(--dim); }
.play-ai:hover { border-color: rgba(108,201,108,.7); }
.play-hot:hover { border-color: rgba(90,167,224,.7); }
.play-create:hover { border-color: rgba(240,215,123,.8); }
.play-join:hover { border-color: rgba(224,82,82,.7); }
.more-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.more-btn {
  flex: 1 1 30%; min-width: 96px;
  background: rgba(212,175,55,.08); border: 1px solid rgba(212,175,55,.28);
  border-radius: 12px; color: var(--text); padding: 10px 6px; font-size: 13px; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.more-btn:hover { background: rgba(212,175,55,.2); transform: translateY(-2px); }
.lobby-foot { text-align: center; margin-top: 18px; }
.lobby-disclaimer-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(6,10,8,.92);
  border-top: 1px solid rgba(212,175,55,.25);
  color: rgba(185,194,180,.6);
  font-size: 10px; line-height: 1.5; text-align: center;
  padding: 5px 10px calc(5px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.lobby-disclaimer {
  max-width: 760px; margin: 20px auto 8px; padding: 14px 18px 8px;
  text-align: center; font-size: 11.5px; line-height: 1.9;
  color: rgba(185,194,180,.55);
  border-top: 1px solid rgba(212,175,55,.18);
}
.lobby-disclaimer .disclaimer-title {
  font-size: 13px; font-weight: 800; letter-spacing: 2px;
  color: var(--gold2); margin-bottom: 8px;
}
.lobby-disclaimer p { margin: 0 0 8px; }
.lobby-disclaimer b { color: rgba(212,200,160,.85); font-weight: 600; }
.lobby-foot .status { color: var(--gold2); font-size: 13px; margin-bottom: 8px; min-height: 18px; }
.lobby-foot .hint {
  max-width: 820px; margin: 0 auto 10px; font-size: 11.5px; color: rgba(185,194,180,.6);
  line-height: 1.8;
}
.foot-bgm { margin-top: 4px; }
.btn-ghost {
  background: rgba(90,167,224,.12); border: 1px solid rgba(90,167,224,.4);
  color: #bfe8ff; border-radius: 10px; padding: 8px 14px; font-size: 13px; cursor: pointer;
  transition: background .15s ease;
}
.btn-ghost:hover { background: rgba(90,167,224,.25); }
#lobby .btns button:not(.mini):not(.play-card):not(.more-btn):not(.btn-ghost) {
  border-radius: 12px; padding: 11px 18px; font-size: 14px;
  background: rgba(212,175,55,.14); border: 1px solid rgba(212,175,55,.45); color: var(--gold2);
  cursor: pointer; transition: all .15s ease;
}
#lobby .btns button:not(.mini):not(.play-card):not(.more-btn):not(.btn-ghost):hover {
  background: rgba(212,175,55,.28); transform: translateY(-1px);
}
#lobby .btns .primary {
  background: linear-gradient(150deg, #e8c45a, #b8860b);
  color: #1a1400; border: none; font-weight: 700;
}
#lobby .btns .primary:hover { filter: brightness(1.12); }
.notice-line { max-width: 560px; }
@media (max-width: 860px) {
  .lobby-grid { grid-template-columns: 1fr; }
  #lobby .title { font-size: 38px; letter-spacing: 8px; }
}

/* ================= 炉石风构筑界面 ================= */
.hs-builder input, .hs-builder select {
  background: rgba(6,10,8,.85); color: var(--text); border: 1px solid rgba(212,175,55,.35);
  border-radius: 10px; padding: 7px 10px; font-size: 13px; outline: none; width: 100%;
  box-sizing: border-box;
}
.hs-builder > input { margin-bottom: 8px; }
.hs-main { display: flex; gap: 12px; margin-top: 8px; }
.hs-pool {
  flex: 1.4; max-height: 380px; overflow-y: auto; padding-right: 4px;
  display: flex; flex-direction: column; gap: 6px;
}
.hs-side { flex: 1; min-width: 240px; }
.hs-row {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(160deg, rgba(34,42,30,.95), rgba(18,24,16,.95));
  border: 1px solid rgba(212,175,55,.3); border-left: 3px solid rgba(212,175,55,.6);
  border-radius: 10px; padding: 5px 8px; cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.hs-row:hover { transform: translateX(3px); border-color: rgba(212,175,55,.85); }
.hs-row.maxed { opacity: .45; }
.hs-gem {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
  border: 2px solid rgba(255,255,255,.35);
}
.hs-gem.red { background: radial-gradient(circle at 35% 30%, #ff9a8a, #c0392b); }
.hs-gem.green { background: radial-gradient(circle at 35% 30%, #a8e6a0, #27ae60); }
.hs-gem.blue { background: radial-gradient(circle at 35% 30%, #9ad4ff, #2471a3); }
.hs-gem.role { background: radial-gradient(circle at 35% 30%, #f5e6a8, #a67c00); border-radius: 8px; }
.hs-thumb { width: 34px; height: 47px; border-radius: 6px; object-fit: cover; flex: none; }
.hs-info { flex: 1; min-width: 0; }
.hs-info b { display: block; font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-info span { font-size: 10.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.hs-ctrl { display: flex; align-items: center; gap: 4px; flex: none; }
.hs-ctrl button {
  width: 22px; height: 22px; border-radius: 7px; border: 1px solid rgba(212,175,55,.5);
  background: rgba(212,175,55,.15); color: var(--gold2); font-size: 13px; cursor: pointer; line-height: 1;
}
.hs-ctrl button:hover { background: rgba(212,175,55,.35); }
.hs-cnt { min-width: 18px; text-align: center; font-weight: 800; color: var(--gold2); font-size: 13px; }
.hs-stat { font-size: 12px; color: var(--gold2); margin-bottom: 6px; }
.hs-bar { height: 8px; background: rgba(255,255,255,.08); border-radius: 5px; margin-top: 5px; overflow: hidden; }
.hs-bar-fill { height: 100%; background: linear-gradient(90deg, #b8860b, #f0d77b); border-radius: 5px; transition: width .25s ease; }
.hs-decklist { max-height: 220px; overflow-y: auto; margin-bottom: 6px; }
.hs-drow {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  border-bottom: 1px dashed rgba(212,175,55,.18); padding: 4px 2px; font-size: 12px;
}
.hs-drow span i { color: var(--dim); font-style: normal; font-size: 11px; }
.hs-drow b { color: var(--gold2); }
.hs-drow button {
  background: none; border: 1px solid rgba(224,82,82,.5); color: #ffb0a8;
  border-radius: 6px; width: 20px; height: 20px; cursor: pointer; font-size: 12px; line-height: 1;
}
.hs-validate { font-size: 12px; }
.hs-save { width: 100%; margin-top: 10px; }
@media (max-width: 860px) {
  .hs-main { flex-direction: column; }
  .hs-pool { max-height: 260px; }
}

/* ================= 好友系统 ================= */
.friend-row {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px dashed rgba(212,175,55,.18); padding: 7px 2px; font-size: 13px;
}
.friend-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.friend-dot.on { background: #6fdc7c; box-shadow: 0 0 6px rgba(111,220,124,.8); }
.friend-dot.off { background: #5a645c; }
.friend-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-name i { color: #6fdc7c; font-style: normal; font-size: 11px; }
.friend-mail { color: var(--dim); font-size: 11px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-row button {
  background: rgba(212,175,55,.14); border: 1px solid rgba(212,175,55,.45);
  color: var(--gold2); border-radius: 8px; padding: 3px 9px; font-size: 12px; cursor: pointer;
}
.friend-row button:hover { background: rgba(212,175,55,.3); }
.invite-row { display: flex; gap: 8px; margin: 6px 0 10px; }
.invite-row input {
  flex: 1; background: rgba(6,10,8,.8); border: 1px solid rgba(212,175,55,.35);
  border-radius: 9px; color: var(--text); font-size: 12px; padding: 7px 10px; outline: none;
}
.invite-row button {
  background: rgba(212,175,55,.18); border: 1px solid rgba(212,175,55,.55);
  color: var(--gold2); border-radius: 9px; padding: 0 14px; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.invite-row button:hover { background: rgba(212,175,55,.32); }

/* ================= 构筑：炉石式卡面网格 ================= */
.hs-pool {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  align-content: start;
}
.hs-card {
  position: relative; cursor: pointer; border-radius: 10px;
  transition: transform .14s ease, box-shadow .14s ease;
}
.hs-card img { width: 100%; border-radius: 10px; display: block; border: 1px solid rgba(212,175,55,.4); }
.hs-card:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 10px 26px rgba(0,0,0,.6), 0 0 16px rgba(212,175,55,.3); z-index: 3; }
.hs-card.maxed { opacity: .45; }
.hs-cardgem {
  position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; border: 2px solid rgba(255,255,255,.4);
  background: radial-gradient(circle at 35% 30%, #ff9a8a, #c0392b);
}
.hs-cardgem.green { background: radial-gradient(circle at 35% 30%, #a8e6a0, #27ae60); }
.hs-cardgem.blue { background: radial-gradient(circle at 35% 30%, #9ad4ff, #2471a3); }
.hs-cardgem.role { background: radial-gradient(circle at 35% 30%, #f5e6a8, #a67c00); border-radius: 7px; }
.hs-cardname {
  position: absolute; left: 4px; right: 4px; bottom: 4px;
  background: rgba(8,12,10,.82); border-radius: 6px;
  font-size: 10.5px; color: #fff; text-align: center;
  padding: 2px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hs-cardcnt {
  position: absolute; top: 4px; right: 4px;
  background: rgba(224,82,82,.92); color: #fff; font-size: 11px; font-weight: 800;
  border-radius: 9px; padding: 1px 6px;
}
.hs-cardminus {
  position: absolute; right: 4px; bottom: 26px;
  width: 20px; height: 20px; border-radius: 6px;
  background: rgba(224,82,82,.85); color: #fff; border: none;
  font-size: 13px; line-height: 1; cursor: pointer; display: none;
}
.hs-card:hover .hs-cardminus { display: block; }
@media (max-width: 860px) {
  .hs-pool { grid-template-columns: repeat(3, 1fr); }
}

/* ================= 效果触发弹窗提示 ================= */
#fxNote {
  position: fixed; left: 50%; top: 96px; transform: translateX(-50%) translateY(-10px);
  z-index: 520; pointer-events: none;
  background: linear-gradient(160deg, rgba(24,32,22,.97), rgba(10,16,12,.97));
  border: 1px solid rgba(212,175,55,.65); border-radius: 12px;
  padding: 8px 18px; max-width: 74vw; text-align: center;
  opacity: 0; transition: opacity .28s ease, transform .28s ease;
  box-shadow: 0 10px 34px rgba(0,0,0,.55), 0 0 20px rgba(212,175,55,.15);
}
#fxNote.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#fxNote b { display: block; color: var(--gold2); font-size: 15px; letter-spacing: 2px; margin-bottom: 2px; }
#fxNote span { color: var(--text); font-size: 12.5px; line-height: 1.7; }

/* ================= 首页再美化（立体质感 / 纹理 / 入场动效） ================= */
#lobby::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(212,175,55,.05) 0 1px, transparent 1.5px) 0 0 / 26px 26px,
    radial-gradient(circle at 72% 66%, rgba(120,200,160,.05) 0 1px, transparent 1.5px) 0 0 / 34px 34px;
}
#lobby::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.5) 100%);
}
.lobby-shell { z-index: 2; }
#lobby .title {
  -webkit-text-stroke: 1px rgba(90,61,0,.55);
  animation: titleShine 6s linear infinite;
  background-size: 200% 100%;
}
@keyframes titleShine {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
#lobby .hero-badge { animation: badgeFloat 4s ease-in-out infinite; }
@keyframes badgeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.panel { position: relative; overflow: hidden; }
.panel::before {
  content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,215,123,.7), transparent);
}
.lobby-grid { perspective: 900px; }
.panel { animation: panelUp .5s cubic-bezier(.2,.9,.3,1.2) both; }
.panel-play { animation-delay: .08s; }
.panel-more { animation-delay: .16s; }
@keyframes panelUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.play-card {
  border-bottom-width: 3px; border-bottom-color: rgba(90,61,0,.8);
  box-shadow: 0 8px 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
}
.play-card:hover { box-shadow: 0 12px 0 rgba(0,0,0,.3), 0 0 22px rgba(212,175,55,.22); }
.play-card:active { transform: translateY(1px); box-shadow: 0 5px 0 rgba(0,0,0,.3); }
.more-btn {
  border-bottom: 2px solid rgba(90,61,0,.7);
  box-shadow: 0 4px 0 rgba(0,0,0,.22);
}
.more-btn:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
#lobby .btns button:not(.mini):not(.play-card):not(.more-btn):not(.btn-ghost) {
  border-bottom: 3px solid rgba(90,61,0,.75);
  box-shadow: 0 5px 0 rgba(0,0,0,.25);
}
#lobby .btns button:not(.mini):not(.play-card):not(.more-btn):not(.btn-ghost):active {
  transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.25);
}
#lobby .btns .primary { box-shadow: 0 6px 0 #7a5200, 0 10px 18px rgba(0,0,0,.35); }
#lobby .btns .primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #7a5200; }
.lobby-hero { position: relative; }
.lobby-hero::after {
  content: ''; display: block; width: 320px; max-width: 80%; height: 2px; margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.8), transparent);
  border-radius: 2px;
}
.lobby-foot .status {
  display: inline-block; padding: 4px 16px; border-radius: 16px;
  background: rgba(212,175,55,.08); border: 1px solid rgba(212,175,55,.25);
}

/* ================= 构筑 v2：法力曲线 / 3列网格 / 行费用宝石 ================= */
.hs-pool { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .hs-pool { grid-template-columns: repeat(2, 1fr); } }
.hs-curve {
  display: flex; align-items: flex-end; gap: 4px;
  margin: 8px 0 10px; padding: 6px 4px 0;
  background: rgba(6,10,8,.5); border-radius: 8px; border: 1px solid rgba(212,175,55,.2);
}
.hs-curve-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hs-curve-bar {
  width: 100%; max-width: 18px;
  background: linear-gradient(180deg, #f0d77b, #b8860b);
  border-radius: 3px 3px 0 0; min-height: 3px;
  transition: height .2s ease;
}
.hs-curve-col span { font-size: 9.5px; color: var(--dim); }
.drow-gem {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  font-size: 10px; font-weight: 800; color: #fff; border: 1.5px solid rgba(255,255,255,.35);
}
.drow-gem.red { background: radial-gradient(circle at 35% 30%, #ff9a8a, #c0392b); }
.drow-gem.green { background: radial-gradient(circle at 35% 30%, #a8e6a0, #27ae60); }
.drow-gem.blue { background: radial-gradient(circle at 35% 30%, #9ad4ff, #2471a3); }
.drow-gem.role { background: radial-gradient(circle at 35% 30%, #f5e6a8, #a67c00); border-radius: 5px; }
.hs-drow > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================= 效果来源提示 ================= */
.reveal-source {
  background: rgba(212,175,55,.1); border: 1px dashed rgba(212,175,55,.5);
  color: var(--gold2); font-size: 12.5px; border-radius: 8px;
  padding: 6px 10px; margin-bottom: 8px; line-height: 1.6;
}

/* ================= 鸣潮风（二次元夜景） ================= */
#lobby {
  background:
    radial-gradient(1500px 850px at 82% -12%, rgba(80,130,255,.28) 0%, transparent 62%),
    radial-gradient(1250px 720px at -8% 28%, rgba(150,100,255,.22) 0%, transparent 56%),
    radial-gradient(1050px 620px at 50% 112%, rgba(240,190,90,.16) 0%, transparent 62%),
    linear-gradient(165deg, #0a1028 0%, #0d0a1e 52%, #060918 100%);
}
.stars {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 22px 34px, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 130px 90px, rgba(207,224,255,.8), transparent 60%),
    radial-gradient(1.8px 1.8px at 240px 40px, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 90px 180px, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 200px 210px, rgba(190,210,255,.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 270px 140px, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1px 1px at 40px 260px, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.7px 1.7px at 160px 300px, rgba(150,180,255,.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 280px 250px, rgba(255,255,255,.55), transparent 60%);
  background-size: 300px 300px;
  animation: starDrift 90s linear infinite;
  opacity: .75;
}
@keyframes starDrift { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px; } }
.skyline {
  position: absolute; left: 0; right: 0; bottom: 0; height: 190px; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200'%3E%3Cpath fill='%23101633' d='M0 200V150h45v-38h40v38h60V96h52v54h48v-70h56v70h44V60h58v140h40V118h52v82h36v-52h60v52h48V80h54v120h40V140h50v60h38V96h54v104h50V70h44v130h58V110h52v90h46V88h40v112h36V140h48v60h34V60h40v140z'/%3E%3Cpath fill='%230b1130' d='M0 200V170h60v30h70v-40h50v40h80v-52h46v52h64V130h54v70h60v-34h48v34h90V150h42v50h58v-42h44v42h76V120h50v80h48V160h60v40h36v-50h52v50h90V150h36v50z'/%3E%3C/svg%3E");
  background-size: 100% 100%; background-position: bottom; background-repeat: no-repeat;
  opacity: .55;
}
#lobby .title {
  background: linear-gradient(180deg, #f2f7ff 0%, #bcd4ff 38%, #6f9bff 72%, #f2d98a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 34px rgba(96,146,255,.5);
  letter-spacing: 14px;
}
.hero-badge {
  color: #d6e4ff; border-color: rgba(130,170,255,.55);
  background: rgba(80,130,255,.08);
  letter-spacing: 6px;
}
#lobby .subtitle { color: rgba(210,220,240,.8); }
.panel {
  background: linear-gradient(160deg, rgba(22,28,52,.82), rgba(13,16,34,.88));
  border: 1px solid rgba(130,170,255,.28);
  clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  box-shadow: 0 20px 56px rgba(0,0,0,.5), inset 0 0 46px rgba(96,146,255,.05);
}
.panel::before {
  background: linear-gradient(90deg, transparent, rgba(150,190,255,.75), transparent);
}
.panel-title {
  color: #e6eeff; border-bottom: 1px dashed rgba(150,190,255,.3);
}
.panel-title::before { content: '◆ '; color: rgba(240,200,110,.95); font-size: 12px; }
.play-card {
  background: linear-gradient(150deg, rgba(30,38,66,.92), rgba(16,20,40,.94));
  border: 1px solid rgba(130,170,255,.35);
  overflow: hidden;
}
.play-card .pc-name { color: #e6eeff; }
.play-card:hover { border-color: rgba(180,210,255,.8); box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 20px rgba(110,160,255,.25); }
.more-btn {
  background: rgba(96,140,255,.1); border: 1px solid rgba(130,170,255,.35);
  clip-path: polygon(0 7px, 7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
}
.more-btn:hover { background: rgba(110,160,255,.22); }
.play-card::after, .more-btn::after {
  content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
  transform: skewX(-20deg);
  transition: left .45s ease;
  pointer-events: none;
}
.play-card:hover::after, .more-btn:hover::after { left: 130%; }
.lobby-hero::before {
  content: '◆'; position: absolute; left: 50%; top: -46px; transform: translateX(-50%);
  font-size: 130px; color: rgba(120,165,255,.1);
  animation: diamondSpin 30s linear infinite; pointer-events: none;
}
@keyframes diamondSpin { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } }
#lobby .btns button:not(.mini):not(.play-card):not(.more-btn):not(.btn-ghost) {
  background: rgba(96,140,255,.12); border: 1px solid rgba(130,170,255,.5); color: #d6e4ff;
}
#lobby .btns button:not(.mini):not(.play-card):not(.more-btn):not(.btn-ghost):hover { background: rgba(110,160,255,.24); }
#lobby .btns .primary { background: linear-gradient(150deg, #e8c45a, #b8860b); color: #1a1400; }
.btn-ghost { background: rgba(96,140,255,.12); border-color: rgba(130,170,255,.45); color: #d6e4ff; }
.btn-ghost:hover { background: rgba(110,160,255,.24); }
#lobby .field label { color: rgba(200,210,230,.75); }
#lobby input:not([type]), #lobby select {
  background: rgba(8,12,28,.7); border-color: rgba(130,170,255,.35); color: var(--text);
}
#lobby input:focus, #lobby select:focus { border-color: rgba(150,190,255,.7); box-shadow: 0 0 0 3px rgba(96,140,255,.14); }
.lobby-foot .status { background: rgba(96,140,255,.1); border-color: rgba(130,170,255,.3); color: #d6e4ff; }
.lobby-foot .hint { color: rgba(200,210,230,.55); }
.glow-1 { background: rgba(70,130,255,.32); }
.glow-2 { background: rgba(150,100,255,.28); }
.glow-3 { background: rgba(240,190,90,.2); }

/* ================= 卡组管理 ================= */
.hs-mydecks { margin-top: 10px; border-top: 1px dashed rgba(150,190,255,.25); padding-top: 8px; }
.hs-mydecks .hs-drow button { border-color: rgba(150,190,255,.4); color: #d6e4ff; width: auto; padding: 0 7px; }
.hs-mydecks .hs-drow button:hover { background: rgba(110,160,255,.22); }
.hs-mydecks .hs-drow span i { color: rgba(210,220,240,.6); }

/* ================= 主界面 v3（二次元动画感） ================= */
.rays {
  position: absolute; left: 50%; top: -12%; width: 1400px; height: 1400px;
  transform: translateX(-50%);
  background: conic-gradient(from 0deg at 50% 0%,
    rgba(120,170,255,.10) 0deg, transparent 12deg,
    rgba(120,170,255,.10) 24deg, transparent 36deg,
    rgba(240,200,120,.08) 48deg, transparent 60deg,
    rgba(120,170,255,.10) 72deg, transparent 84deg,
    rgba(120,170,255,.10) 96deg, transparent 108deg,
    rgba(120,170,255,.10) 120deg, transparent 132deg,
    rgba(240,200,120,.08) 144deg, transparent 156deg,
    rgba(120,170,255,.10) 168deg, transparent 180deg,
    rgba(120,170,255,.10) 192deg, transparent 204deg,
    rgba(240,200,120,.08) 216deg, transparent 228deg,
    rgba(120,170,255,.10) 240deg, transparent 252deg,
    rgba(120,170,255,.10) 264deg, transparent 276deg,
    rgba(240,200,120,.08) 288deg, transparent 300deg,
    rgba(120,170,255,.10) 312deg, transparent 324deg,
    rgba(120,170,255,.10) 336deg, transparent 360deg);
  animation: raysSpin 60s linear infinite;
  pointer-events: none;
}
@keyframes raysSpin { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } }
.cloud {
  position: absolute; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 55%, rgba(190,210,255,.16), rgba(190,210,255,.05) 60%, transparent 72%);
  filter: blur(2px); pointer-events: none;
}
.cloud-1 { width: 420px; height: 130px; left: -60px; top: 30%; animation: cloudDrift 26s ease-in-out infinite alternate; }
.cloud-2 { width: 520px; height: 150px; right: -80px; top: 16%; animation: cloudDrift 32s ease-in-out infinite alternate-reverse; }
@keyframes cloudDrift { from { transform: translateX(0); } to { transform: translateX(46px); } }
.play-stage { display: flex; justify-content: center; margin: 4px 0 18px; }
.play-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 210px)); gap: 16px; width: 100%; max-width: 900px; }
.play-card {
  padding: 26px 18px 22px; border-radius: 18px;
  background: linear-gradient(165deg, rgba(30,40,72,.94), rgba(16,20,42,.96));
  border: 1px solid rgba(150,190,255,.4);
  position: relative; overflow: hidden;
  box-shadow: 0 12px 34px rgba(0,0,0,.5), inset 0 0 34px rgba(110,160,255,.08);
  transition: transform .2s cubic-bezier(.2,1.2,.3,1), box-shadow .2s ease, border-color .2s ease;
}
.play-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(190,220,255,.9), transparent);
}
.play-card .pc-icon {
  font-size: 38px; display: block; margin-bottom: 8px;
  filter: drop-shadow(0 0 14px rgba(130,180,255,.6));
}
.play-card .pc-name { font-size: 17px; font-weight: 800; color: #fff; letter-spacing: 2px; text-shadow: 0 0 12px rgba(140,190,255,.5); }
.play-card .pc-desc { font-size: 11.5px; color: rgba(200,215,240,.75); margin-top: 4px; }
.play-card:hover {
  transform: translateY(-8px) scale(1.03) rotateX(4deg);
  border-color: rgba(200,225,255,.85);
  box-shadow: 0 22px 46px rgba(0,0,0,.6), 0 0 30px rgba(120,175,255,.35);
}
.play-card:active { transform: translateY(-2px) scale(.99); }
.lobby-bottom { display: grid; grid-template-columns: 1.1fr 1.2fr 1fr; gap: 14px; }
.panel {
  background: linear-gradient(165deg, rgba(24,30,58,.88), rgba(13,16,36,.94));
  border: 1px solid rgba(150,190,255,.3);
  clip-path: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  box-shadow: 0 18px 50px rgba(0,0,0,.5), inset 0 0 40px rgba(110,160,255,.06);
}
.panel-title {
  color: #eef4ff; font-size: 14px; letter-spacing: 3px;
  border-bottom: 1px dashed rgba(150,190,255,.3); padding-bottom: 8px; margin-bottom: 12px;
}
.panel-title::before { content: '◆ '; color: #f2d98a; }
#lobby .title {
  background: linear-gradient(180deg, #ffffff 0%, #cfe0ff 30%, #7fa8ff 65%, #ffe9a8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1px rgba(60,100,220,.35);
  text-shadow: 0 0 42px rgba(100,150,255,.55);
  letter-spacing: 16px; font-size: 56px;
}
.hero-badge {
  color: #e6efff; border: 1px solid rgba(150,190,255,.6);
  background: rgba(100,150,255,.12);
  box-shadow: 0 0 18px rgba(110,160,255,.25);
  letter-spacing: 7px;
}
#lobby .subtitle { color: rgba(215,228,248,.85); letter-spacing: 4px; }
.more-btn {
  background: rgba(110,160,255,.1); border: 1px solid rgba(150,190,255,.35);
  clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  color: #e6efff;
}
.more-btn:hover { background: rgba(130,180,255,.22); transform: translateY(-2px); }
@media (max-width: 980px) {
  .play-grid { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
  .lobby-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .play-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .play-card { padding: 16px 12px; }
  .play-card .pc-icon { font-size: 26px; }
}

/* ================= 主界面立绘墙（鸣潮角色） ================= */
.hero-art {
  position: fixed; bottom: -6px; height: 68vh; z-index: 0; pointer-events: none;
  object-fit: cover; opacity: .34;
  filter: saturate(1.12) brightness(.9) contrast(1.02);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.75) 55%, transparent 94%);
  mask-image: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.75) 55%, transparent 94%);
  transition: opacity .5s ease;
}
.art-l { left: -36px; }
.art-r { right: -36px; }
.art-l.alt { left: 96px; bottom: -70px; height: 56vh; opacity: .2; transform: scale(.88); }
.art-r.alt { right: 96px; bottom: -70px; height: 56vh; opacity: .2; transform: scale(.88); }
/* 去掉旋转的巨型菱形（改为静止柔和光环） */
.lobby-hero::before {
  content: '✦'; top: -30px; font-size: 150px;
  animation: none; color: rgba(140,185,255,.14);
  transform: translateX(-50%);
}
.lobby-hero::after { margin-top: 10px; }
/* 光带降透明度，突出立绘 */
.rays { opacity: .5; }
.skyline { opacity: .45; }
@media (max-width: 900px) {
  .hero-art { opacity: .22; }
  .art-l.alt, .art-r.alt { display: none; }
}

/* ================= 主界面 v4（干净精致的二次元夜景） ================= */
/* 隐藏遗留元素：立绘、光带、云朵、菱形 */
.hero-art, .rays, .cloud, .lobby-hero::before { display: none !important; }
#lobby {
  background:
    radial-gradient(1300px 750px at 78% -12%, rgba(90,140,255,.26) 0%, transparent 62%),
    radial-gradient(1100px 680px at 12% 32%, rgba(160,110,255,.18) 0%, transparent 56%),
    radial-gradient(900px 560px at 50% 112%, rgba(240,190,100,.13) 0%, transparent 62%),
    linear-gradient(168deg, #0a1028 0%, #0d0b22 55%, #070a18 100%);
}
.skyline { opacity: .4; }
.stars { opacity: .8; }
.lobby-shell { max-width: 1060px; }
.lobby-hero { margin-bottom: 22px; }
#lobby .title {
  background: none; -webkit-text-stroke: 0;
  color: #ffffff;
  text-shadow: 0 0 24px rgba(120,170,255,.8), 0 2px 0 rgba(60,90,180,.4), 0 4px 18px rgba(0,0,0,.5);
  letter-spacing: 14px; font-size: 50px; font-weight: 900;
}
.hero-badge {
  background: rgba(110,160,255,.12);
  border: 1px solid rgba(160,200,255,.55);
  color: #eaf2ff; letter-spacing: 6px;
  box-shadow: 0 0 16px rgba(110,160,255,.2);
  border-radius: 24px;
}
#lobby .subtitle { color: rgba(220,230,248,.85); font-size: 14px; }
.notice-line {
  border-radius: 12px; background: rgba(110,160,255,.08);
  border-color: rgba(160,200,255,.35);
}
/* 主菜单大卡：圆角、高对比、干净 */
.play-stage { margin: 10px 0 20px; }
.play-card {
  border-radius: 18px; padding: 24px 18px 20px;
  background: linear-gradient(168deg, rgba(32,42,78,.97), rgba(18,22,48,.98));
  border: 1px solid rgba(160,200,255,.35);
  box-shadow: 0 14px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  clip-path: none;
}
.play-card::before { display: none; }
.play-card .pc-name { color: #fff; font-size: 16px; font-weight: 800; text-shadow: 0 0 10px rgba(150,200,255,.4); }
.play-card .pc-desc { color: rgba(205,218,240,.8); font-size: 11.5px; }
.play-card .pc-icon { filter: none; }
.play-card:hover {
  transform: translateY(-6px);
  border-color: rgba(200,225,255,.85);
  box-shadow: 0 20px 44px rgba(0,0,0,.55), 0 0 26px rgba(120,175,255,.3);
}
/* 底栏面板：圆角玻璃，干净 */
.lobby-bottom { gap: 14px; }
.panel {
  border-radius: 16px; clip-path: none;
  background: linear-gradient(168deg, rgba(24,30,60,.9), rgba(14,17,38,.94));
  border: 1px solid rgba(160,200,255,.28);
  box-shadow: 0 16px 44px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
}
.panel-title { color: #f2f6ff; font-size: 14px; letter-spacing: 2px; border-bottom-color: rgba(160,200,255,.3); }
.panel-title::before { content: '◆ '; color: #ffd98a; font-size: 11px; }
#lobby .field label { color: rgba(225,233,248,.95); font-size: 14px; font-weight: 700; letter-spacing: 1px; }
#lobby input:not([type]), #lobby select {
  background: rgba(8,12,30,.75); border-color: rgba(160,200,255,.35); color: #eef4ff;
  border-radius: 10px; font-size: 15px; min-height: 42px; padding: 8px 12px;
}
#lobby select option { font-size: 14px; color: #eef4ff; }
#lobby .btns button:not(.mini):not(.play-card):not(.more-btn):not(.btn-ghost) {
  border-radius: 10px; background: rgba(110,160,255,.16); border-color: rgba(160,200,255,.55);
  color: #eef4ff; font-size: 13px; box-shadow: none;
}
#lobby .btns button:not(.mini):not(.play-card):not(.more-btn):not(.btn-ghost):hover { background: rgba(130,180,255,.28); }
#lobby .btns .primary {
  background: linear-gradient(160deg, #f2d079, #d9a62e);
  color: #241a02; font-weight: 800;
}
.more-btn { border-radius: 10px; clip-path: none; background: rgba(110,160,255,.12); border-color: rgba(160,200,255,.4); color: #eaf2ff; }
.more-btn:hover { background: rgba(130,180,255,.24); }
.btn-ghost { border-radius: 10px; background: rgba(110,160,255,.14); border-color: rgba(160,200,255,.5); color: #eaf2ff; }
.btn-ghost:hover { background: rgba(130,180,255,.26); }
.lobby-foot .status {
  background: rgba(110,160,255,.1); border-color: rgba(160,200,255,.3);
  color: #eaf2ff; border-radius: 20px;
}
.lobby-foot .hint { color: rgba(205,218,240,.6); }
.glows .glow-1 { background: rgba(80,135,255,.3); }
.glow-2 { background: rgba(160,110,255,.24); }
.glow-3 { background: rgba(240,190,100,.16); }
@media (max-width: 900px) {
  .play-grid { grid-template-columns: 1fr 1fr; }
  .lobby-bottom { grid-template-columns: 1fr; }
}

/* ================= 主界面 v5：鸣潮官方壁纸背景 ================= */
#lobby {
  background-image: url('/assets/lobby-bg.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.stars, .skyline, .glow, .lobby-hero::before, .lobby-hero::after { display: none !important; }
.lobby-stage { display: none; }
#lobby::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,8,20,.5) 0%, rgba(5,8,20,.28) 38%, rgba(5,8,20,.66) 100%),
    radial-gradient(ellipse at 50% 42%, transparent 40%, rgba(3,5,14,.45) 100%);
}
.lobby-shell { z-index: 2; }
.lobby-hero { margin-bottom: 18px; }
#lobby .title {
  color: #fff;
  text-shadow: 0 0 26px rgba(120,170,255,.9), 0 2px 0 rgba(40,70,150,.5), 0 5px 20px rgba(0,0,0,.6);
  font-size: 52px;
}
.hero-badge {
  background: rgba(10,16,40,.55); border-color: rgba(180,215,255,.6);
  backdrop-filter: blur(6px);
}
#lobby .subtitle { color: rgba(230,238,252,.92); text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.panel {
  background: rgba(10,14,32,.78);
  backdrop-filter: blur(10px);
  border-color: rgba(170,205,255,.3);
}
.play-card {
  background: rgba(12,17,38,.8);
  backdrop-filter: blur(8px);
  border-color: rgba(170,205,255,.35);
}
.play-card .pc-name { text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.play-card .pc-desc { color: rgba(215,226,246,.85); }
.notice-line { background: rgba(12,18,40,.7); backdrop-filter: blur(6px); }
.lobby-foot .status { background: rgba(10,16,38,.6); }
.lobby-foot .hint { color: rgba(215,226,246,.75); text-shadow: 0 1px 3px rgba(0,0,0,.5); }

/* ================= 记牌器增强 ================= */
#tracker { max-height: 70vh; overflow-y: auto; }
.tr-stat { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.tr-stat span {
  background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.3);
  border-radius: 8px; padding: 2px 8px; font-size: 12px; color: var(--gold2);
}
.tr-chip.k { display: inline-block; margin: 2px; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.tr-chip.k.red { background: rgba(224,82,82,.18); border: 1px solid rgba(224,82,82,.5); color: #ffb0a8; }
.tr-chip.k.green { background: rgba(108,201,108,.16); border: 1px solid rgba(108,201,108,.5); color: #b8e8b8; }
.tr-chip.k.blue { background: rgba(90,167,224,.16); border: 1px solid rgba(90,167,224,.5); color: #bfe0ff; }
.tr-body.dim { color: var(--dim); font-size: 11.5px; margin-top: 4px; }

/* ================= 聊天面板加大 ================= */
#chatPanel { width: 340px; }
#chatInput { font-size: 16px; min-height: 48px; padding: 12px 14px; }
#chatSendBtn { font-size: 15px; min-height: 48px; padding: 0 18px; }
#chatLog { height: 150px; font-size: 14px; }
#chatHead { font-size: 14px; }
#chatToggle { width: 52px; height: 52px; font-size: 21px; }
@media (max-width: 860px) {
  #chatPanel { width: 250px; }
  #chatInput { font-size: 15px; min-height: 44px; }
}

/* ================= 聊天输入框：多行可见（2026-08-20） ================= */
#chatPanel { width: 380px !important; }
#chatRow { align-items: stretch; }
#chatInput {
  font-size: 17px !important;
  min-height: 58px !important;
  height: 58px;
  line-height: 1.5;
  padding: 12px 14px !important;
  resize: none;
  color: #ffffff !important;
  caret-color: #ffd76a;
  background: rgba(4,8,6,.92) !important;
  border: 1px solid rgba(212,175,55,.55) !important;
  border-radius: 10px;
  box-shadow: inset 0 0 12px rgba(0,0,0,.6);
}
#chatInput::placeholder { color: rgba(240,237,228,.45); font-size: 15px; }
#chatSendBtn { min-height: 58px !important; }
#chatLog { height: 170px !important; font-size: 14px; }
@media (max-width: 860px) {
  #chatPanel { width: 280px !important; }
  #chatInput { font-size: 16px !important; min-height: 54px !important; height: 54px; }
  #chatSendBtn { min-height: 54px !important; }
}

/* ================= 卡组选择：选项清晰可见 ================= */
#deckSelect {
  width: 100% !important;
  font-size: 17px !important;
  min-height: 50px;
  padding: 10px 14px !important;
  color: #ffffff !important;
  background: rgba(4,8,6,.92) !important;
  border: 1px solid rgba(212,175,55,.55) !important;
  border-radius: 10px;
  cursor: pointer;
}
#deckSelect option {
  color: #fff; background: #141c17; font-size: 15px; padding: 6px;
}
.opt-note {
  margin: 8px 2px 12px;
  font-size: 13.5px;
  color: var(--gold2);
  letter-spacing: .5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ================= 新手教程：点击目标高亮 ================= */
.tut-hl {
  position: relative !important;
  border-radius: 10px;
  z-index: 60;
  animation: tutPulse 1.1s ease-in-out infinite !important;
}
@keyframes tutPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(212, 175, 55, .95), 0 0 14px 5px rgba(212, 175, 55, .45); }
  50% { box-shadow: 0 0 0 6px rgba(212, 175, 55, .75), 0 0 26px 10px rgba(212, 175, 55, .65); }
}
.tut-hl-note {
  position: absolute; top: auto; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #ffd76a, #d4af37);
  color: #241a05; font-size: 13px; font-weight: 700;
  padding: 5px 12px; border-radius: 12px;
  white-space: normal; max-width: 250px; text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .55); z-index: 70;
  animation: tutBob .9s ease-in-out infinite;
  pointer-events: none;
  line-height: 1.4;
}
/* 手牌区卡牌上方空间有限时，气泡改为显示在卡下方（避免盖住行动区） */
#myHand .tut-hl .tut-hl-note, #myHand .tut-hl > .tut-hl-note {
  top: calc(100% + 10px); bottom: auto;
}
.tut-hl-note::after {
  content: ''; position: absolute; bottom: -7px; left: 50%; margin-left: -6px;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 8px solid #d4af37;
}
@keyframes tutBob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -5px); }
}
/* 手牌/角色卡被高亮时轻微抬起（多张手牌同时高亮时避免错位） */
#myHand .tut-hl { transform: translateY(-4px); z-index: 65; }
#myRoles .tut-hl { transform: translateY(-8px); z-index: 65; }
#actionBtns .tut-hl { transform: scale(1.06); }

/* ================= 准备房间：观战席 + 座位拖拽 ================= */
.seat-tip { text-align: center; margin: 4px 0 12px; font-size: 12.5px; color: var(--dim); }
.ready-seats { display: flex; gap: 14px; margin: 10px 0 14px; align-items: stretch; }
.seat-col { flex: 1; min-width: 0; }
.seat-title {
  text-align: center; font-size: 13px; color: var(--gold2); letter-spacing: 1px;
  margin-bottom: 6px; font-weight: 700;
}
.spec-count { color: #9fd6ff; font-size: 13px; }
.seat-slot {
  cursor: grab; user-select: none;
  transition: box-shadow .15s ease, transform .15s ease;
}
.seat-slot:active { cursor: grabbing; }
.seat-slot.dragging { opacity: .45; transform: scale(.97); }
.spec-seats {
  border: 2px dashed rgba(159, 214, 255, .35);
  border-radius: 12px; padding: 8px; min-height: 86px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s ease, background .15s ease;
}
.spec-seats:not(:empty) { background: rgba(159, 214, 255, .05); }
.spec-seats.drop-hint, .seat-slot.drop-hint {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .35), inset 0 0 18px rgba(212, 175, 55, .12) !important;
  background: rgba(212, 175, 55, .10) !important;
}
.spec-card {
  display: flex; align-items: center; gap: 8px;
  background: rgba(20, 30, 24, .9); border: 1px solid rgba(159, 214, 255, .35);
  border-radius: 10px; padding: 7px 12px; font-size: 13.5px; color: var(--text);
  cursor: grab; user-select: none;
}
.spec-card:active { cursor: grabbing; }
.spec-card.dragging { opacity: .45; }
.spec-card.offline { opacity: .55; }
.spec-eye { font-size: 15px; }
.spec-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spec-empty { margin: auto; font-size: 12px; color: var(--dim); }
@media (max-width: 860px) {
  .ready-seats { flex-direction: column; }
}

/* ================= 首次访问：新手教程软提示 ================= */
#tutorialIntro {
  position: fixed; right: 18px; bottom: 18px; z-index: 900;
  width: 340px; max-width: calc(100vw - 36px); box-sizing: border-box;
  background: linear-gradient(160deg, rgba(24, 36, 28, .97), rgba(12, 18, 14, .98));
  border: 1px solid rgba(212, 175, 55, .55);
  border-radius: 16px;
  padding: 16px 18px 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6), 0 0 24px rgba(212, 175, 55, .18);
  opacity: 0; transform: translateY(18px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
#tutorialIntro.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tut-intro-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; color: var(--dim);
  font-size: 15px; cursor: pointer; padding: 2px 6px; border-radius: 8px;
}
.tut-intro-close:hover { color: var(--gold2); background: rgba(212, 175, 55, .12); }
.tut-intro-title {
  font-size: 17px; font-weight: 800; color: var(--gold2);
  letter-spacing: 1px; margin-bottom: 8px;
}
.tut-intro-body { font-size: 13px; line-height: 1.75; color: var(--text); margin-bottom: 12px; }
.tut-intro-btns { display: flex; gap: 10px; }
.tut-intro-btns .primary { flex: 1; font-size: 14px; padding: 10px 8px; }
.tut-intro-btns .btn-ghost { flex: 1; font-size: 13px; }
@media (max-width: 860px) {
  #tutorialIntro { right: 10px; bottom: 10px; width: calc(100vw - 20px); }
  /* 小屏：教程横幅紧凑化，超长可滚动，避免遮挡 */
  #tutorialHint {
    padding: 6px 10px 8px;
    font-size: 13px; line-height: 1.6;
    max-height: 42vh; overflow-y: auto;
  }
  #tutorialHint .tut-body { font-size: 12.5px; }
  #tutorialHint .tut-actions .primary { font-size: 13px; padding: 7px 16px; }
  .tut-hl-note { font-size: 12px; max-width: 200px; }
}

/* ================= 教程横幅动态指引行 ================= */
.tut-guide {
  display: inline-block;
  margin: 2px 0 8px;
  padding: 6px 18px;
  background: linear-gradient(135deg, #ffd76a, #d4af37);
  color: #241a05;
  font-size: 14px; font-weight: 800;
  border-radius: 24px;
  letter-spacing: .5px;
  animation: tutNextPulse 1.2s ease-in-out infinite;
}

/* ================= 聊天输入框：绝对大（强制占满 + 大字 + 两行高） ================= */
#chatRow {
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
}
#chatInput {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  min-height: 64px !important;
  height: 64px !important;
  padding: 12px 16px !important;
  resize: none;
  color: #ffffff !important;
  caret-color: #ffd76a;
  background: rgba(4, 8, 6, .95) !important;
  border: 2px solid rgba(212, 175, 55, .7) !important;
  border-radius: 10px;
}
#chatSendBtn {
  min-height: 64px !important;
  font-size: 16px !important;
  padding: 0 20px !important;
  white-space: nowrap;
}
#chatLog { height: 180px !important; }
@media (max-width: 860px) {
  #chatInput { font-size: 17px !important; min-height: 56px !important; height: 56px; }
  #chatSendBtn { min-height: 56px !important; }
}

/* ================= 准备房间：踢出按钮 ================= */
.kick-btn {
  margin-left: 8px;
  font-size: 11px !important;
  padding: 2px 8px !important;
  background: rgba(224, 82, 82, .18) !important;
  border: 1px solid rgba(224, 82, 82, .5) !important;
  color: #ffb0a8 !important;
  border-radius: 8px !important;
  cursor: pointer;
}
.kick-btn:hover { background: rgba(224, 82, 82, .35) !important; }
.spec-card .kick-btn { margin-left: auto; }

/* ===== 独立房间链接：进入房间中覆盖层 ===== */
#roomEntering {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 12, 20, 0.88);
}
#roomEntering.hidden { display: none; }
.room-entering-box {
  text-align: center; color: #e8ecf4; max-width: 420px; padding: 24px;
}
.re-spinner {
  width: 52px; height: 52px; margin: 0 auto 18px;
  border: 5px solid rgba(255, 209, 102, 0.25);
  border-top-color: #ffd166;
  border-radius: 50%;
  animation: re-spin 0.9s linear infinite;
}
@keyframes re-spin { to { transform: rotate(360deg); } }
#roomEnteringText {
  font-size: 17px; line-height: 1.7; white-space: pre-line; margin-bottom: 16px;
}
.re-btns { display: flex; gap: 12px; justify-content: center; }
.re-btns button { min-width: 110px; }
#roomEnteringRetry.hidden, #roomEnteringHome.hidden { display: none; }

#roomEnteringCancel.re-cancel {
  min-width: 110px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.35);
  color: #cfd6e4;
}
#roomEnteringCancel.re-cancel:hover { background: rgba(255,255,255,0.18); }
#roomEnteringCancel.re-cancel.hidden { display: none; }

/* ===== 卡组/弃牌实体卡堆显示 ===== */
.pile-pile, .pile-discard { cursor: pointer; position: relative; }
.pile-cards, .card-stack { position: relative; height: 44px; margin: 0 auto 2px; width: 34px; }
.pile-cards .pile-card,
.card-stack .deck-card {
  position: absolute; left: 0; top: 0;
  transform-origin: bottom center;
  pointer-events: none;
}
.pile-cards .pile-card.card,
.card-stack .deck-card.card {
  width: 28px !important;
  min-height: 0 !important;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.pile-cards .pile-card.card img,
.card-stack .deck-card.card img {
  width: 28px;
  height: 40px;
  min-height: 0 !important;
  object-fit: cover;
}
/* 弃牌堆：阶梯错位，顶部卡完整可见 */
.pile-cards .pile-card.stack-2 { transform: translate(-7px, -5px) rotate(-4deg) scale(0.88); z-index: 1; }
.pile-cards .pile-card.stack-1 { transform: translate(-2px, -3px) rotate(2deg) scale(0.94); z-index: 2; }
.pile-cards .pile-card.stack-0 { transform: none; z-index: 3; }
/* 卡组堆：背面卡叠放 */
.card-stack .deck-card.stack-2 { transform: translate(-5px, -6px) rotate(-6deg) scale(0.9); z-index: 1; }
.card-stack .deck-card.stack-1 { transform: translate(2px, -3px) rotate(4deg) scale(0.95); z-index: 2; }
.card-stack .deck-card.stack-0 { transform: none; z-index: 3; }
/* 背面卡底色 */
.card-stack .deck-card.face-down {
  background: linear-gradient(135deg, #1a2436, #2e3f5c);
  border: 1px solid rgba(212,175,55,.5);
  display: flex; align-items: center; justify-content: center;
}
/* 精致卡牌动画：短时滑动 + 淡出（纯视觉层，不拦截点击、不遮挡操作） */
.anim-card {
  position: fixed !important;
  z-index: 250 !important;
  pointer-events: none !important;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  opacity: 1;
}
.anim-card img { width: 100%; height: 100%; object-fit: cover; min-height: 0 !important; display: block; }
.anim-card.face-down {
  background: linear-gradient(135deg, #1a2436, #2e3f5c);
  border: 1px solid rgba(212,175,55,.45);
}
/* 血条受伤闪动 */
.hp-flash { animation: hpFlash .4s ease-out; }
@keyframes hpFlash {
  0% { box-shadow: 0 0 14px rgba(255,70,70,.95), inset 0 0 10px rgba(255,70,70,.5); background: rgba(255,70,70,.4); }
  100% { box-shadow: none; background: transparent; }
}

/* ============================================================
   手机端适配（<=820px）：操作区常驻底部，场地/日志可展开
   ============================================================ */
@media (max-width: 820px) {
  #game { height: 100dvh; min-height: 0; overflow: hidden; }
  #table {
    display: flex; flex-direction: column;
    flex: 1; min-height: 0;
    gap: 6px; padding: 6px;
    overflow: hidden;
  }
  #topBar { flex-wrap: wrap; gap: 4px; padding: 5px 8px; font-size: 11px; }
  #topBar .mini { padding: 5px 9px; font-size: 11px; margin-left: 4px; }

  /* 双方场地默认折叠，点击状态条展开 */
  .side { padding: 6px; gap: 6px; border-radius: 12px; overflow-y: auto; }
  .side .zone-row { display: none; }
  .side.expanded .zone-row { display: flex; }
  .player-strip { cursor: pointer; position: relative; padding: 6px 10px; }
  .player-strip::after {
    content: '▲ 展开场地';
    position: absolute; right: 8px; bottom: 4px;
    font-size: 10px; color: rgba(212,175,55,.65);
    pointer-events: none;
  }
  .side.expanded .player-strip::after { content: '▼ 收起场地'; }
  .player-strip .pile-discard { cursor: pointer; }

  /* 对方区：紧凑条常显，展开可滚动 */
  #oppArea { order: 1; flex: 0 1 auto; max-height: 30vh; }
  /* 中间区：日志折叠成小窗，点击展开 */
  #centerArea { order: 2; flex: 0 1 auto; max-height: 19vh; min-height: 0; padding: 6px; gap: 4px; cursor: pointer; }
  #phaseBanner { font-size: 13px; padding: 5px; letter-spacing: 2px; }
  #turnInfo { font-size: 11px; }
  #log { max-height: 42px; min-height: 30px; font-size: 11px; padding: 4px 8px; }
  #centerArea.expanded { max-height: 42vh; }
  #centerArea.expanded #log { max-height: 34vh; }

  /* 我方区：状态条+手牌+按钮常驻，场地展开可滚动 */
  #myArea { order: 3; flex: 1 0 auto; min-height: 0; max-height: calc(100dvh - 46px); }
  .zone-title { font-size: 11px; }
  .role-row, .action-row, .concerto-row { min-height: 96px; gap: 6px; }
  .role-slot { width: 84px; min-height: 118px; }

  /* 手牌：横向滚动触控 */
  .hand-row {
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 148px; padding: 8px 4px; gap: 8px;
    scrollbar-width: none;
  }
  .hand-row::-webkit-scrollbar { display: none; }
  .hand-row .card { width: 82px; }
  .hand-row .card img { min-height: 114px; }
  .hand-row .card.selected { transform: translateY(-8px) scale(1.05); }
  .hand-title { font-size: 11px; }

  /* 操作按钮：大触控目标 */
  .action-btns { gap: 6px; margin-top: 4px; flex-wrap: wrap; }
  .action-btns button { min-height: 46px; font-size: 14px; padding: 8px 14px; flex: 1 1 auto; }

  /* 牌堆紧凑 */
  .piles { gap: 4px; }
  .pile { min-width: 42px; padding: 3px 5px; }
  .pile b { font-size: 15px; }
  .pile span { font-size: 9.5px; }

  /* 弹窗：全屏可滚动 */
  .modal-box { width: 96vw; max-width: 96vw; max-height: 88vh; overflow-y: auto; }
  .modal .card { width: 92px; }
  .modal .card img { min-height: 128px; }
  .modal-btns button { min-height: 46px; font-size: 15px; }

  /* 覆盖层（进入房间）与提示适配 */
  .room-entering-box { width: 92vw; }
  #globalToast { font-size: 13px; padding: 7px 14px; top: 10px; }

  /* 顶部状态：血条/头像紧凑 */
  .avatar { width: 38px; height: 38px; font-size: 16px; }
  .pinfo2 { min-width: 0; }
  .pname { font-size: 14px; }
  .php { font-size: 12px; }
  .hpbar { height: 8px; }
  .pile-cards, .card-stack { height: 38px; width: 30px; }
  .pile-cards .pile-card.card, .card-stack .deck-card.card { width: 24px !important; height: 34px; }
  .pile-cards .pile-card.card img, .card-stack .deck-card.card img { width: 24px; height: 34px; }

  /* 卡片 tooltip：手机端改为底部弹出 */
  #cardTooltip { max-width: 82vw; font-size: 12px; }

  /* 聊天面板全屏 */
  #chatPanel { width: 96vw; height: 70vh; left: 2vw; right: 2vw; }
}

/* ============================================================
   手机端独立布局 #gameM（<=820px 显示，桌面隐藏）
   ============================================================ */
@media (max-width: 820px) {
  #game > #table { display: none !important; }
  #gameM { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  #gameM.hidden { display: none !important; }

  /* —— 双方状态条（sticky 吸顶） —— */
  .m-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    background: rgba(10,16,24,.97);
    border-bottom: 1px solid rgba(212,175,55,.3);
    position: sticky; top: 0; z-index: 30;
    cursor: pointer;
  }
  .m-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
    background: radial-gradient(circle at 30% 30%, #e8c95c, #6b4d0a);
    color: #221a00; font-weight: 900; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 10px rgba(212,175,55,.4);
  }
  .m-info { flex: 1 1 auto; min-width: 0; }
  .m-name { font-size: 14px; font-weight: 800; color: var(--gold2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-hpbar { height: 7px; background: #0a0f0c; border-radius: 5px; margin: 3px 0 2px; overflow: hidden; border: 1px solid rgba(212,175,55,.3); }
  .m-hpbar > div { height: 100%; background: linear-gradient(90deg, #c0392b, #e8c95c); transition: width .3s; }
  .m-hptext { font-size: 11px; color: var(--dim); }
  .m-badges { display: flex; gap: 4px; flex: 0 0 auto; }
  .m-badge {
    min-width: 34px; text-align: center;
    background: rgba(8,14,10,.85);
    border: 1px solid rgba(212,175,55,.25);
    border-radius: 8px; padding: 2px 5px;
  }
  .m-badge b { display: block; font-size: 14px; color: var(--gold2); line-height: 1.2; }
  .m-badge span { font-size: 8.5px; color: var(--dim); }
  .m-chevron { font-size: 10px; color: var(--dim); flex: 0 0 auto; }

  /* —— 场地面板（展开/收起） —— */
  .m-panel {
    max-height: 0; overflow: hidden;
    transition: max-height .3s ease;
    background: rgba(6,10,8,.35);
  }
  .m-panel.open { max-height: 46vh; overflow-y: auto; }
  .m-zone { padding: 6px 10px; }
  .m-zt { font-size: 10.5px; color: var(--gold); letter-spacing: 2px; border-left: 3px solid var(--gold); padding-left: 6px; margin-bottom: 5px; }
  .m-zt .m-n { color: var(--dim); letter-spacing: 0; margin-left: 6px; font-size: 10px; }
  .m-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .m-cardwrap { flex: 0 0 auto; }
  .m-cardwrap .card { width: 62px; }
  .m-cardwrap .card img { min-height: 86px; }
  .m-cardwrap .card.selected { outline: 3px solid var(--gold2); transform: translateY(-6px) scale(1.06); }
  .m-roleslot { width: 58px; min-height: 84px; border-radius: 8px; overflow: hidden; position: relative; border: 2px solid #3a4763; background: #101820; flex: 0 0 auto; }
  .m-roleslot img { width: 100%; display: block; min-height: 84px; object-fit: cover; }
  .m-roleslot.leader { border-color: var(--gold2); box-shadow: 0 0 10px rgba(212,175,55,.5); }
  .m-roleslot .lv { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.72); color: var(--gold2); font-size: 10px; text-align: center; padding: 1px 0; }
  .m-backcard {
    width: 44px; height: 62px; flex: 0 0 auto;
    background: linear-gradient(135deg, #1a2436, #2e3f5c);
    border: 1px solid rgba(212,175,55,.4);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(212,175,55,.6); font-size: 9px;
  }

  /* —— 中间：阶段 + 日志 —— */
  .m-center { flex: 0 1 auto; padding: 4px 10px; background: rgba(6,10,8,.5); cursor: pointer; }
  .m-phase { text-align: center; font-size: 13px; color: var(--gold2); letter-spacing: 2px; }
  .m-logline {
    font-size: 10.5px; color: var(--dim); text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 2px 0;
  }
  .m-log { max-height: 24vh; overflow-y: auto; background: rgba(6,10,8,.8); border-radius: 8px; padding: 6px 10px; margin-top: 2px; }
  .m-logentry { font-size: 11px; color: var(--dim); padding: 2px 0; border-bottom: 1px dashed rgba(212,175,55,.12); }

  /* —— 我方区：所有区域保持在屏幕内（面板在自身空间滚动，手牌/状态条固定） —— */
  .m-me { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .m-me .m-bar { flex: 0 0 auto; z-index: 20; }
  .m-panel { flex: 0 0 0; min-height: 0; overflow: hidden; }
  .m-panel.open { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .m-hand {
    flex: 0 0 auto; display: flex; gap: 8px; overflow-x: auto;
    padding: 8px 6px 58px; /* 底部留白给固定按钮 */
    background: rgba(6,10,8,.4);
    border-top: 1px dashed rgba(212,175,55,.25);
    min-height: 104px;
    -webkit-overflow-scrolling: touch;
  }
  .m-hand .m-cardwrap .card { width: 74px; }
  .m-hand .m-cardwrap .card img { min-height: 102px; }
  /* 操作按钮：固定底部，任何面板展开都不遮挡 */
  .m-btns {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(8,12,18,.97);
    border-top: 1px solid rgba(212,175,55,.35);
    box-shadow: 0 -4px 16px rgba(0,0,0,.5);
  }
  .m-btns button {
    flex: 1 1 auto; min-height: 34px; font-size: 12px;
    padding: 3px 8px;
  }
  .m-btns button:disabled { opacity: .35; cursor: not-allowed; filter: grayscale(.6); }
  .m-btns .zone-label { width: 100%; text-align: center; color: var(--dim); font-size: 12px; padding: 4px; }
  /* 对方区：状态条固定，面板在固定空间滚动（不挤其他区域） */
  #mOpp { display: flex; flex-direction: column; max-height: 34vh; }
  #mOpp .m-bar { flex: 0 0 auto; }
  #mOpp .m-panel { flex: 0 0 0; min-height: 0; overflow: hidden; }
  #mOpp .m-panel.open { flex: 1 1 auto; overflow-y: auto; max-height: none; }
}

/* ============================================================
   手机端首页 / 准备房间 优化（<=820px）
   ============================================================ */
@media (max-width: 820px) {
  /* —— 首页 —— */
  #lobby { height: auto; min-height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .lobby-shell { padding: 12px 10px 28px; gap: 12px; }
  .lobby-hero { margin-bottom: 2px; }
  .hero-badge { font-size: 9px; letter-spacing: 2px; padding: 3px 10px; }
  #lobby .title { font-size: 30px; letter-spacing: 8px; margin: 4px 0 2px; }
  .lobby-hero .subtitle { font-size: 12px; letter-spacing: 2px; }
  .notice-line { font-size: 11px; padding: 4px 8px; }
  .play-stage { padding: 0; }
  .play-grid { grid-template-columns: 1fr 1fr; gap: 8px; max-width: none; }
  .play-card { padding: 14px 8px; border-radius: 12px; min-height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
  .play-card .pc-icon { font-size: 24px; }
  .play-card .pc-name { font-size: 14px; letter-spacing: 1px; }
  .play-card .pc-desc { font-size: 10px; margin-top: 0; line-height: 1.4; text-align: center; }

  /* 面板：紧凑卡片 */
  .lobby-bottom { grid-template-columns: 1fr; gap: 10px; }
  .panel { padding: 10px 12px; border-radius: 12px; }
  .panel-title { font-size: 13px; margin-bottom: 6px; letter-spacing: 1px; }
  .panel .field { margin-bottom: 6px; }
  .panel label { font-size: 11px; margin-bottom: 2px; }
  .panel input[type=text], .panel input:not([type]), .panel select { font-size: 13px; padding: 8px 10px; }
  .panel .btns { gap: 6px; flex-wrap: wrap; }
  .panel .btns button, .panel .more-btn { min-height: 38px; font-size: 12.5px; padding: 6px 10px; }

  /* 更多功能：2x2 网格 */
  .more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .more-btn { padding: 14px 6px; font-size: 13.5px; min-height: 48px; }

  /* —— 准备房间 —— */
  .lobby-box { padding: 14px 12px 24px; }
  .lobby-box .title { font-size: 24px !important; letter-spacing: 3px !important; margin: 2px 0; }
  .lobby-box .subtitle { font-size: 13px; }
  .invite-row { flex-direction: column; gap: 5px; }
  .invite-row input { width: 100%; font-size: 12px; padding: 9px 10px; box-sizing: border-box; }
  .invite-row button { width: 100%; min-height: 42px; font-size: 13px; }
  .seat-tip { font-size: 11px; line-height: 1.6; }
  .ready-seats { flex-direction: column; gap: 8px; }
  .seat-col { width: 100%; }
  .seat-title { font-size: 12px; }
  .ready-card { padding: 10px 14px; font-size: 14px; }
  .spec-seats { display: flex; flex-wrap: wrap; gap: 6px; }
  .lobby-box .btns { flex-wrap: wrap; gap: 8px; }
  .lobby-box .btns button { flex: 1 1 100%; min-height: 46px; font-size: 15px; }
  #readyStatus { font-size: 12px; }
}

/* ============================================================
   手机端首页按钮放大（v2）
   ============================================================ */
@media (max-width: 820px) {
  /* 主功能按钮：中等尺寸 + 防溢出 */
  .play-grid { width: 100%; box-sizing: border-box; }
  .play-card { min-height: 78px; padding: 8px 6px; gap: 2px; box-sizing: border-box; overflow: hidden; }
  .play-card .pc-icon { font-size: 21px; }
  .play-card .pc-name { font-size: 13px; letter-spacing: 0.5px; }
  .play-card .pc-desc { font-size: 9.5px; margin-top: 1px; line-height: 1.3; }

  /* 账号区：登录/退出 大按钮各占一半 */
  #lobby .panel-account .btns .btn-ghost,
  #lobby .panel-account .btns button {
    flex: 1 1 45%; min-height: 42px; font-size: 13.5px; padding: 7px 6px;
  }
  #lobby .panel-account #nameInput { min-height: 42px; font-size: 14px; }
  #lobby .panel-account #saveNickBtn { min-height: 42px; width: 48px; font-size: 15px; }

  /* 卡组区：按钮 2x2 网格放大 */
  #lobby .panel-deck .field > .btns {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; justify-content: stretch;
  }
  #lobby .panel-deck .field > .btns button {
    width: 100%; min-height: 42px; font-size: 13px; padding: 7px 4px; margin: 0; box-sizing: border-box;
  }
  #lobby .panel-deck select { min-height: 42px; font-size: 14px; }

  /* 更多功能：2x2 大按钮 */
  .more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; box-sizing: border-box; }
  .more-btn { min-height: 46px; font-size: 13.5px; padding: 10px 6px; box-sizing: border-box; overflow: hidden; }

  /* 底部提示 */
  #lobby .lobby-note, #lobby .status, #lobby #lobbyStatus { font-size: 12px; line-height: 1.7; padding: 8px 10px; }
}

/* ============================================================
   手机端首页溢出修复 + 按钮高度修正（v3）
   ============================================================ */
@media (max-width: 820px) {
  /* grid 项默认 min-width:auto 会被内容撑开导致溢出：允许收缩 */
  .play-grid, .play-card, .more-grid, .more-btn,
  #lobby .panel-deck .field > .btns button { min-width: 0; }
  .play-card .pc-desc { overflow-wrap: anywhere; word-break: break-word; }
  /* more-btn 高度：覆盖 .panel .more-btn 的 38px（更高特异性） */
  #lobby .more-btn { min-height: 46px; }
  /* 面板按钮统一防溢出 */
  #lobby .panel { overflow: hidden; }
  #lobby .panel .btns { flex-wrap: wrap; }
}

/* v4：首页布局防溢出终极修复 */
@media (max-width: 820px) {
  body { overflow-x: hidden; }
  .lobby-shell { width: 100%; box-sizing: border-box; min-width: 0; }
  .lobby-stage { position: fixed; inset: 0; }
  .play-stage { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
  .play-grid { min-width: 0 !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box; }
  .lobby-bottom { width: 100%; min-width: 0; box-sizing: border-box; }
  .panel { min-width: 0; box-sizing: border-box; }
  .more-grid { width: 100%; min-width: 0; box-sizing: border-box; }
}

/* ============================================================
   手机端 v5：战斗行常驻 / 工具栏折叠 / 面板回合驱动
   ============================================================ */
@media (max-width: 820px) {
  /* ⚙️ 悬浮按钮（右上角） */
  #mTopBtn {
    position: fixed; bottom: 60px; right: 8px; z-index: 120;
    width: 38px; height: 38px; border-radius: 50%;
    font-size: 17px; padding: 0; line-height: 1;
    background: rgba(10,16,24,.9);
    border: 1px solid rgba(212,175,55,.35);
    box-shadow: 0 2px 10px rgba(0,0,0,.5);
    opacity: .85;
  }
  #mTopBtn.hidden { display: none; }

  /* 顶部工具栏：默认收起（translateY 隐藏），点 ⚙️ 展开 */
  #game > #topBar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 110;
    transform: translateY(-110%);
    transition: transform .25s ease;
    flex-wrap: wrap; gap: 4px;
    background: rgba(8,12,18,.97);
    padding: 8px;
    border-bottom: 1px solid rgba(212,175,55,.3);
  }
  #game > #topBar.m-open { transform: translateY(0); }
  #game > #topBar .mini { padding: 7px 10px; font-size: 12px; min-height: 36px; }

  /* 常驻战斗行：双方行动区合一 */
  .m-battle {
    display: flex; align-items: center; gap: 6px;
    background: rgba(6,10,8,.55);
    border: 1px solid rgba(212,175,55,.2);
    border-radius: 10px;
    padding: 5px 8px;
    margin-bottom: 3px;
  }
  .m-battle-side { flex: 1 1 0; min-width: 0; }
  .m-battle-label { display: block; font-size: 9px; color: var(--dim); margin-bottom: 2px; letter-spacing: 1px; }
  .m-battle-side .m-row { overflow-x: auto; padding-bottom: 2px; }
  .m-battle-side .m-cardwrap .card { width: 46px; }
  .m-battle-side .m-cardwrap .card img { min-height: 64px; }
  .m-battle-vs { flex: 0 0 auto; font-size: 10px; color: var(--gold2); font-weight: 800; }

  /* 日志两行 */
  .m-logline {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; white-space: normal; text-overflow: ellipsis;
    line-height: 1.5; padding: 3px 0;
  }
}

/* 卡牌详情 ✕ 关闭按钮 */
.tt-close {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,.65); color: #fff;
  font-size: 14px; line-height: 26px; text-align: center;
  cursor: pointer; z-index: 5;
  border: 1px solid rgba(255,255,255,.3);
}
#cardTooltip { position: fixed; z-index: 800; pointer-events: none; }
#cardTooltip .tt-close { pointer-events: auto; }
#cardTooltip img, #cardTooltip h4, #cardTooltip .tt-row, #cardTooltip .tt-eff { pointer-events: none; }

/* 手牌区折叠：点把手切换；按钮区始终固定在屏幕内 */
@media (max-width: 820px) {
  .m-hand-head {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px; cursor: pointer;
    background: rgba(6,10,8,.6);
    border-top: 1px solid rgba(212,175,55,.15);
    font-size: 11px; color: var(--gold);
  }
  .m-hand-head .m-hand-chev { margin-left: auto; color: var(--dim); }
  .m-hand.collapsed { min-height: 0 !important; height: 0 !important; padding: 0 !important; overflow: hidden; border: none; }
  /* 长按图片系统菜单禁用 */
  .card img, .m-roleslot img, .m-cardwrap img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
}

/* ============================================================
   手机端 v9：折叠图标左移 / 按钮2列 / 操作区可折叠 / 协奏弃牌数字化
   ============================================================ */
@media (max-width: 820px) {
  /* 折叠箭头移到最左（避开右上角 ⚙️ 设置按钮） */
  #mOppBar .m-chevron, #mMeBar .m-chevron { order: -1; margin-right: 2px; }

  /* 操作按钮：2 列网格，紧凑 */
  .m-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .m-btns button { width: 100%; }
  .m-btns .zone-label { grid-column: 1 / -1; }

  /* 操作区折叠把手 */
  .m-btns-head {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 99;
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px calc(5px + env(safe-area-inset-bottom, 0px));
    background: rgba(8,12,18,.97);
    border-top: 1px solid rgba(212,175,55,.3);
    font-size: 12px; color: var(--gold); cursor: pointer;
  }
  .m-btns-head .m-btns-chev { margin-left: auto; color: var(--dim); }
  /* 按钮区收起：只留把手；展开时把手紧贴按钮上方 */
  .m-btns.collapsed { display: none; }
  #mBtnsHead.hidden { display: none; }
  .m-btns-head.folded { position: fixed; bottom: 0; }

  /* 手牌底部留白适配（按钮区带把手时高度变化） */
  .m-hand { padding-bottom: 96px; }

  /* 协奏/弃牌：数字条可点击查看 */
  .m-click { cursor: pointer; }
  .m-click:active { opacity: .7; }
}

/* 手机端弹窗：全屏布局（标题固定、内容滚动、按钮固定底部） */
@media (max-width: 820px) {
  .modal-box {
    width: 100vw; max-width: 100vw;
    height: 100dvh; max-height: 100dvh;
    border-radius: 0; margin: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  .modal-box h3 { flex: 0 0 auto; padding: 12px 14px; margin: 0; border-bottom: 1px solid rgba(212,175,55,.25); font-size: 16px; }
  #modalBody { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 12px; }
  .modal-btns { flex: 0 0 auto; display: flex; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(212,175,55,.2); background: rgba(10,14,20,.98); }
  .modal-btns button { flex: 1; min-height: 46px; font-size: 15px; }
  .modal-body-row { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .modal .card { width: 96px; }
  .modal .card img { min-height: 134px; }
}

/* v11：手牌折叠后把手固定；操作折叠把手位置修正；水晶格样式 */
@media (max-width: 820px) {
  /* 手牌折叠后：把手固定在按钮区上方，醒目金色（不会找不到） */
  .m-hand-head {
    padding: 8px 12px; font-size: 13px; font-weight: 700;
  }
  .m-hand-head.folded {
    position: fixed; bottom: 98px; left: 0; right: 0; z-index: 97;
    background: linear-gradient(180deg, #1a2436, #24364f);
    border: 2px solid var(--gold2);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px; font-weight: 800; color: var(--gold2);
    box-shadow: 0 0 14px rgba(212,175,55,.45);
  }
  .m-btns-head {
    padding: 7px 12px; font-size: 12.5px; font-weight: 700;
  }
  .m-btns-head.folded {
    border: 2px solid var(--gold2);
    border-radius: 12px 12px 0 0;
    color: var(--gold2);
    background: linear-gradient(180deg, #1a2436, #24364f);
  }
  /* 操作按钮区折叠把手：按钮展开时在按钮上方；按钮折叠时贴底 */
  .m-btns-head { bottom: 0; }
  #mBtns:not(.collapsed) ~ #mBtnsHead { bottom: 50px; }
  #mBtns.collapsed ~ #mBtnsHead { bottom: 0; }

  /* 协奏水晶格（炉石法力水晶） */
  .m-crystals { display: flex; gap: 2px; justify-content: center; align-items: center; height: 14px; margin-bottom: 1px; }
  .mcrystal {
    width: 10px; height: 12px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: rgba(90,110,150,.25);
    border: 1px solid rgba(160,190,255,.35);
    display: inline-block;
  }
  .mcrystal.on {
    background: linear-gradient(180deg, #8fd0ff, #2f7fd0);
    box-shadow: 0 0 6px rgba(90,170,255,.8);
    border-color: #bfe2ff;
  }
}

/* v12：协奏水晶条（显眼位置） */
@media (max-width: 820px) {
  /* 敌方：状态条下方横排水晶 */
  .m-cost-opp {
    display: flex; align-items: center; gap: 8px;
    padding: 3px 10px;
    background: rgba(6,10,8,.55);
    border-bottom: 1px solid rgba(212,175,55,.15);
  }
  .m-cost-opp .m-cost-label { font-size: 11px; color: var(--gold); }
  .m-cost-opp .m-cost-crystals { display: flex; gap: 3px; }
  .m-cost-opp .m-cost-num { font-size: 14px; font-weight: 800; color: var(--gold2); }

  /* 我方：水晶内嵌手牌标题栏（横排，紧凑） */
  .m-cost-inline {
    display: inline-flex; align-items: center; gap: 5px;
    margin-left: auto;
    background: rgba(8,14,10,.8);
    border: 1px solid rgba(212,175,55,.3);
    border-radius: 8px;
    padding: 2px 8px;
  }
  .m-cost-inline .m-cost-label { font-size: 10px; color: var(--dim); margin-right: 4px; letter-spacing: 1px; }
  .m-cost-inline .m-cost-crystals { display: inline-flex; gap: 2px; align-items: center; }
  .m-cost-inline .m-cost-num { font-size: 14px; font-weight: 900; color: var(--gold2); line-height: 1; }

  /* 水晶（通用） */
  .mcrystal {
    width: 11px; height: 13px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: rgba(90,110,150,.25);
    border: 1px solid rgba(160,190,255,.35);
    display: inline-block;
  }
  .mcrystal.on {
    background: linear-gradient(180deg, #8fd0ff, #2f7fd0);
    box-shadow: 0 0 6px rgba(90,170,255,.8);
    border-color: #bfe2ff;
  }
}

/* v13：手机端教程提示框（避开底部操作区，顶部显示） */
@media (max-width: 820px) {
  #tutorialHint {
    left: 8px; right: 8px; bottom: auto; top: 56px;
    max-width: none;
    width: auto;
    z-index: 150;
    font-size: 13px;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.7);
  }
  #tutorialHint .tut-body { font-size: 12.5px; line-height: 1.6; }
  #tutorialHint .tut-actions { flex-wrap: wrap; }
  #tutorialHint .tut-actions .primary,
  #tutorialHint .tut-actions .mini { min-height: 40px; font-size: 13px; padding: 8px 14px; }
  .tut-hl-note { font-size: 11px; max-width: 150px; }
}

/* ============================================================
   桌面端首页一屏化：紧凑布局 + 面板双列（无需滚动）
   ============================================================ */
@media (min-width: 821px) {
  #lobby { padding: 10px 16px; }
  .lobby-shell { padding: 6px 22px 4px; }
  .lobby-hero { margin-bottom: 10px; }
  .hero-badge { font-size: 10px; padding: 3px 12px; margin-bottom: 6px; }
  #lobby .title { font-size: 40px; letter-spacing: 8px; margin-bottom: 2px; }
  #lobby .subtitle { font-size: 13px; margin-bottom: 6px; letter-spacing: 2px; }
  .play-grid { gap: 10px; }
  .play-card { padding: 10px 14px; }
  .play-card .pc-icon { font-size: 20px; }
  .play-card .pc-name { font-size: 13px; }
  .play-card .pc-desc { font-size: 10px; }
  /* 面板双列：账号左列占两行，卡组/更多在右列堆叠 */
  #lobby .lobby-bottom { display: grid; grid-template-columns: 340px 1fr; gap: 12px; align-items: start; }
  #lobby .panel-account { grid-row: 1 / span 2; }
  .panel { padding: 12px 16px; border-radius: 14px; }
  .panel-title { margin: 0 0 8px; font-size: 14px; padding-bottom: 6px; }
  #lobby .field { margin-bottom: 8px; }
  #lobby .field label { margin-bottom: 3px; font-size: 11px; }
  #lobby input:not([type]), #lobby select { padding: 6px 10px; font-size: 12px; }
  .more-btn { padding: 7px 4px; font-size: 12px; min-width: 80px; }
  .lobby-foot { margin-top: 8px; }
  .lobby-foot .status { margin-bottom: 3px; font-size: 12px; min-height: 15px; }
  .lobby-foot .hint { font-size: 10.5px; line-height: 1.6; margin-bottom: 3px; }
  .foot-bgm { margin-top: 2px; }
  .lobby-disclaimer { margin: 6px auto 2px; padding: 8px 18px 2px; font-size: 10.5px; line-height: 1.7; }
  .lobby-disclaimer .disclaimer-title { margin-bottom: 4px; font-size: 12px; }
  .lobby-disclaimer p { margin: 0 0 4px; }
}

/* 桌面端一屏化（追加压缩） */
@media (min-width: 821px) {
  .play-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .lobby-disclaimer { display: none !important; } /* 完整声明仅在移动端页尾；桌面由固定底栏承担 */
  #lobby .title { font-size: 36px; letter-spacing: 7px; }
  .lobby-hero { margin-bottom: 6px; }
  .panel-title { margin-bottom: 6px; }
  #lobby .field { margin-bottom: 6px; }
  .lobby-foot .hint { max-width: 820px; }
}

/* 桌面端一屏化（第三轮：小屏 720/768 也不滚动） */
@media (min-width: 821px) {
  .lobby-foot .hint { display: none; } /* 玩法说明移到游戏内帮助，首页保持一屏 */
  .hero-badge { display: none; }
  #lobby .title { font-size: 30px; letter-spacing: 6px; margin-bottom: 0; }
  #lobby .subtitle { font-size: 12px; margin-bottom: 4px; }
  .play-card { padding: 8px 12px; }
  .play-card .pc-icon { font-size: 18px; }
  .play-card .pc-name { font-size: 12px; }
  .play-card .pc-desc { display: none; } /* 桌面一屏化：按钮只留图标+名称 */
  .notice-line { margin: 0 auto 6px; padding: 3px 8px; font-size: 10px; }
  #lobby .title { font-size: 28px; }
  .lobby-disclaimer-bar { font-size: 11px; color: rgba(205,214,200,.85); font-weight: 600; }
  .panel { padding: 10px 14px; }
  .more-btn { padding: 5px 4px; }
  .lobby-foot .status { font-size: 11.5px; margin-bottom: 2px; min-height: 14px; }
  .lobby-foot { margin-top: 4px; }
  .lobby-disclaimer-bar { font-size: 9.5px; padding-top: 3px; padding-bottom: calc(3px + env(safe-area-inset-bottom, 0px)); }
}

.foot-status-row { display: flex; justify-content: center; align-items: center; gap: 12px; }
.foot-disc { background: rgba(212,175,55,.12); border: 1px solid rgba(212,175,55,.35); color: var(--gold2); border-radius: 8px; padding: 3px 10px; font-size: 11px; cursor: pointer; transition: background .15s ease; }
.foot-disc:hover { background: rgba(212,175,55,.25); }
.disc-modal-body p { margin: 0 0 10px; line-height: 1.8; font-size: 13.5px; color: var(--text); }
.disc-modal-body b { color: var(--gold2); }

.rules-book-pre {
  white-space: pre-wrap; word-break: break-word;
  font-size: 12px; line-height: 1.85;
  color: var(--text); max-height: 62vh; overflow-y: auto;
  background: rgba(6,10,8,.5); border: 1px solid rgba(212,175,55,.18);
  border-radius: 10px; padding: 12px 14px;
  margin: 4px 0 8px;
}

/* 桌面端隐藏移动端专用的手牌/操作展开按钮（折叠功能仅移动端需要） */
@media (min-width: 821px) {
  #mOpenHandBtn, #mOpenBtnsBtn { display: none !important; }
}