* { 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: -14px auto 18px; 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; right: 12px; bottom: 64px; z-index: 254;
  max-width: 280px; background: rgba(10,16,12,.95); border: 1px solid rgba(212,175,55,.5);
  color: var(--text); font-size: 12.5px; line-height: 1.6;
  border-radius: 12px; padding: 7px 12px;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  word-break: break-all;
}
#chatBubble.show { opacity: 1; transform: none; }
#chatBubble b { color: var(--gold2); }
#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: 12.5px; line-height: 1.7;
  color: var(--text); margin-bottom: 6px;
}
#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: 6px 10px; color: var(--text); font-size: 13px;
}
#chatSendBtn {
  background: rgba(212,175,55,.2); border: 1px solid rgba(212,175,55,.5);
  color: var(--gold2); border-radius: 8px; padding: 0 12px; cursor: pointer;
}
#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(6,10,8,.55);
  border: 1px solid rgba(212,175,55,.25);
  border-radius: 12px;
  padding: 8px 12px;
  flex-wrap: wrap;
}
.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 { outline: 3px solid var(--gold2); transform: translateY(-10px) scale(1.04); }
.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: 32%;
  transform: translate(-50%, -50%) scale(.5);
  opacity: 0; pointer-events: none; z-index: 900;
  font-size: clamp(2.2rem, 7vw, 4.6rem);
  font-weight: 900; letter-spacing: 6px; white-space: nowrap;
  text-align: center; color: #fff;
  text-shadow: 0 0 18px rgba(212,175,55,.9), 0 4px 14px #000;
  transition: opacity .4s ease, transform .4s ease;
}
#bigBanner.big-show { opacity: 1; animation: bigPop .42s cubic-bezier(.2,1.4,.4,1); }
@keyframes bigPop {
  0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.14); opacity: 1; }
  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; left: 12px; bottom: 12px; max-width: 340px; z-index: 180; background: rgba(10,16,12,.96); border: 1px solid var(--gold); border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.7; color: var(--text); }
#tutorialHint.done { border-color: #6fdc7c; }
.tut-progress { color: var(--dim); margin-bottom: 4px; font-size: 12px; }
.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-bottom: 6px; }
#tutorialHint .mini { margin-right: 6px; }

/* ================= 新主界面（前沿审美：玻璃拟态 + 光晕动效） ================= */
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-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(210,220,240,.8); font-size: 12px; }
#lobby input:not([type]), #lobby select {
  background: rgba(8,12,30,.75); border-color: rgba(160,200,255,.35); color: #eef4ff;
  border-radius: 10px;
}
#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('https://mcduijue-assets.oss-cn-beijing.aliyuncs.com/mcduijue/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); }