/* 乐队少女 · 桌游桌面风格（按卡面重做） */

:root {
  --bg: #14111b;
  --panel: #1c1826;
  --panel-2: #241f31;
  --line: rgba(255, 255, 255, .09);
  --ink: #f6f1e9;
  --muted: #a79bb4;
  --rose: #e35d8a;
  --gold: #e8c47a;
  --lilac: #9b8cf0;
  /* 卡牌体系：乐队色由 app.js 的 BAND_COLORS 逐张注入，这里是兜底 */
  --band: #9b8cf0;
  --band-tint: rgba(155, 140, 240, .16);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  color: var(--ink);
  font: 14px/1.5 "Segoe UI", "Microsoft YaHei", sans-serif;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1100px 700px at 50% -10%, rgba(227, 93, 138, .16), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(155, 140, 240, .12), transparent 60%),
    var(--bg);
}

/* ---------------- 开始界面 ---------------- */
.start {
  position: fixed;
  inset: 0;
  z-index: 100;
  /* 用 flex 而不是 grid 居中：grid 的 auto 列会按内容最大宽度撑开，
     窄屏时 .start-center 的 width:100% 就跟着变宽，整页横向溢出 */
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(1000px 640px at 50% 38%, rgba(227, 93, 138, .18), transparent 62%),
    #100d17;
}
.float-layer { position: fixed; inset: 0; pointer-events: none; }
.float-card {
  position: absolute;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  opacity: .28;
  animation-name: drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform: rotate(var(--r, 0deg));
  filter: saturate(.95);
}
@keyframes drift {
  from { transform: translateX(-32vw) rotate(var(--r, 0deg)); }
  to   { transform: translateX(132vw) rotate(var(--r, 0deg)); }
}

.start-center {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 32px;
}
.eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--gold);
  border: 1px solid rgba(232, 196, 122, .35);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 22px;
}
.start-center h1 {
  margin: 0;
  font-size: 64px;
  letter-spacing: .16em;
  font-weight: 800;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .6);
}
.lead { color: var(--muted); margin: 12px 0 30px; font-size: 15px; letter-spacing: .04em; }
#startBtn {
  font-size: 17px;
  padding: 14px 52px;
  border-radius: 999px;
  background: linear-gradient(120deg, #f06a97, #b45bd8);
  border: 0;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 16px 40px rgba(227, 93, 138, .35);
  letter-spacing: .1em;
  transition: transform .15s, box-shadow .15s;
}
#startBtn:hover { transform: translateY(-2px); box-shadow: 0 20px 48px rgba(227, 93, 138, .45); }
.version { color: #6f6479; font-size: 11px; margin-top: 22px; letter-spacing: .08em; }

.setup { display: flex; gap: 14px; justify-content: center; margin-bottom: 22px; }
.setup label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.setup select {
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
}
#fixedBands { min-width: 220px; }
#fixedBands option { padding: 2px 6px; }
.team-pick { outline: 2px solid var(--gold); outline-offset: 2px; }
.team-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

/* ---------------- 顶栏 ---------------- */
header {
  min-height: 54px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 18px;
  background: rgba(18, 15, 24, .92);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
button { white-space: nowrap; }
@media (max-width: 900px) {
  #hint { display: none; }
  .brand { font-size: 13px; }
  .wrap { height: auto; }
  body { overflow: auto; }
}
.brand { font-weight: 700; letter-spacing: .08em; }
.spacer { flex: 1; }
.hint { color: var(--muted); font-size: 12px; }
.chips { display: flex; gap: 7px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  border-radius: 999px;
  padding: 4px 11px;
}
.chip.on { color: #fff; border-color: rgba(227, 93, 138, .5); color: #ffc2d6; }
.turn-badge {
  font-size: 11px;
  letter-spacing: .08em;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.turn-badge.me {
  color: #2a1a24;
  border-color: transparent;
  background: linear-gradient(120deg, #f3d7a0, #e8c47a);
  font-weight: 700;
  box-shadow: 0 0 18px rgba(232, 196, 122, .35);
}
.turn-badge.waiting { color: var(--muted); }
.turn-badge.phase-settlement,
.turn-badge.phase-preparation { color: #cfc3dd; border-style: dashed; }

button {
  background: linear-gradient(120deg, #e35d8a, #a15bd6);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 13px;
  cursor: pointer;
}
button.ghost { background: transparent; border: 1px solid var(--line); color: #d6ccdf; }
button:disabled { opacity: .3; cursor: not-allowed; }

/* ---------------- 布局 ---------------- */
.wrap {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 14px 14px;
}.table {
  display: grid;
  grid-template-columns: minmax(300px, 1.02fr) minmax(360px, 1.18fr) minmax(280px, .8fr);
  gap: 12px;
  height: 100%;
  min-height: 0;
}
.col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 3px;
}
.col-mid { gap: 10px; }
.col-right .log-panel { flex: 1; min-height: 240px; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.panel-head h2 { margin: 0; }
#selfPanel { min-height: 0; }

@media (max-width: 1180px) {
  .table { grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.1fr); }
  .col-right { grid-column: 1 / -1; flex-direction: row; }
  .col-right > * { flex: 1; }
}

@media (max-width: 820px) {
  body { height: auto; min-height: 100vh; overflow: auto; display: block; }
  .wrap { flex: none; height: auto; }
  .table { display: block; height: auto; }
  .col { overflow: visible; margin-bottom: 12px; }
  .col-right { display: flex; flex-direction: column; }
  .col-right > * { flex: none; }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  min-height: 0;
}
h2 {
  margin: 0 0 9px;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--muted);
  font-weight: 600;
}
.meta { color: var(--muted); font-size: 12px; letter-spacing: 0; font-weight: 400; }

/* 队伍乐器等级合计：金色渐变小徽章，数值变化时轻微弹一下 */
.team-inst-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 9px 2px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #f6e7c6;
  background: linear-gradient(135deg, rgba(232, 196, 122, .22), rgba(155, 140, 240, .18));
  border: 1px solid rgba(232, 196, 122, .38);
  box-shadow: inset 0 0 10px rgba(232, 196, 122, .08);
  vertical-align: middle;
  white-space: nowrap;
  transition: box-shadow .2s ease, transform .2s ease;
}
.team-inst-chip .inst-chip-ico { width: 12px; height: 12px; opacity: .9; }
.team-inst-chip b { color: #fff; font-size: 12px; margin-left: 1px; }
.team-inst-chip.bump { animation: teamInstPop .5s ease; }
@keyframes teamInstPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.14); box-shadow: 0 0 14px rgba(232, 196, 122, .45); }
  100% { transform: scale(1); }
}
.wrap[data-phase="live"] .team-inst-chip { margin-left: 0; }
.row { display: flex; gap: 9px; flex-wrap: wrap; }

/* ---------------- 板块 ---------------- */
.boards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.boards.small { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 9px; }

.board {
  position: relative;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  min-height: 84px;
  cursor: pointer;
  transition: border-color .14s, transform .14s;
}
.board:hover { border-color: rgba(227, 93, 138, .55); transform: translateY(-2px); }
.board.empty { border-style: dashed; }
.board .title { font-size: 13px; font-weight: 700; }
.board .sub { font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.board .effect {
  font-size: 10.5px;
  color: #bdaecf;
  line-height: 1.45;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.board .title { display: flex; align-items: center; gap: 4px; }
.board .title .info-btn { width: 15px; height: 15px; font-size: 9px; }
.draft-picked { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.picked-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(232, 196, 122, .14);
  border: 1px solid rgba(232, 196, 122, .35);
}
.picked-chip.them { background: rgba(155, 140, 240, .14); border-color: rgba(155, 140, 240, .35); }
/* 已选角色：可点击查看技能 */
.picked-chip.clickable {
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.picked-chip.clickable:hover {
  background: rgba(232, 196, 122, .26);
  border-color: rgba(232, 196, 122, .7);
  transform: translateY(-1px);
}
.choice-bar {
  position: fixed;
  left: 50%;
  bottom: 60px;
  transform: translateX(-50%);
  z-index: 120;
}
.choice-bar button {
  background: linear-gradient(120deg, #e8c47a, #e35d8a);
  color: #2a1620;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(227, 93, 138, .35);
}
.modal-card button.picked {
  background: rgba(232, 196, 122, .25);
  border: 1px solid var(--gold);
  color: var(--gold);
}
/* 弹窗标题行：右侧「收起」，方便先看场上再回来处理 */
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.modal-head h3 { margin: 0 0 6px; }
.modal-collapse {
  flex: 0 0 auto;
  font-size: 12px;
  padding: 3px 10px;
  margin-bottom: 6px;
}
.board .who { font-size: 11px; color: #d5cbe2; display: flex; align-items: center; gap: 2px; }
.board .who.muted { color: #6f6479; }
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
  background: var(--lilac);
  box-shadow: 0 0 8px rgba(155, 140, 240, .5);
}
.dot.me { background: var(--gold); box-shadow: 0 0 8px rgba(232, 196, 122, .6); }
.board .art { width: 100%; border-radius: 8px; margin-bottom: 6px; }

/* ---------------- 卡牌：卡图为主，文字不再重复 ---------------- */
.card {
  --band: #9b8cf0;
  --band-tint: rgba(155, 140, 240, .16);
  width: 142px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--band-tint), var(--panel-2) 60%);
  border: 1px solid var(--line);
  border-top: 3px solid var(--band);
  border-radius: 12px;
  padding: 7px;
  cursor: pointer;
  font-size: 12px;
  transition: transform .14s, border-color .14s, box-shadow .14s;
}
.card:hover { transform: translateY(-3px); border-color: rgba(232, 196, 122, .55); }
.card.selected {
  border-color: var(--rose);
  box-shadow: 0 0 0 1px var(--rose) inset, 0 12px 28px rgba(227, 93, 138, .25);
}
.card.disabled { opacity: .45; cursor: not-allowed; }
.card.playable {
  border-color: rgba(232, 196, 122, .38);
  box-shadow: 0 0 0 1px rgba(232, 196, 122, .18) inset;
}
.card.playable:hover {
  border-color: var(--gold);
  box-shadow: 0 10px 26px rgba(232, 196, 122, .22);
}
.hand-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; align-items: flex-start; }
.played-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; align-items: flex-start; }
.hand-row .card { width: 152px; flex: 0 0 auto; }
.hand-row .card .card-art { height: 186px; }
.played-row .card { width: 112px; flex: 0 0 auto; opacity: .94; }
.played-row .card .card-art { height: 136px; }
.team-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; }

.char-card {
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px;
  align-items: stretch;
}
.char-card .char-art {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #0e0c14;
}
.char-card .char-art .art {
  width: 100%;
  height: 112px;
  object-fit: cover;
  object-position: top center;
  border-radius: 8px;
  display: block;
}
.char-card .char-main { min-width: 0; }
.char-card .char-name-row { display: flex; align-items: center; gap: 4px; }
.char-card .char-name-row .name {
  margin-top: 0;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.info-btn {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  padding: 0;
  margin-left: auto;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--line);
  color: var(--muted);
  box-shadow: none;
}
.info-btn:hover { color: var(--ink); border-color: var(--gold); }
.char-card .skill-btns { margin-top: 0; }
.played-row .card .card-band { display: none; }
.played-row .card .card-name { font-size: 11.5px; }
#handInfo, #playedInfo, #selfHint, #teamHint { letter-spacing: 0; }
.board .art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 740 / 1042;
  object-fit: contain;
  background: #0e0c14;
  border-radius: 8px;
}
/* 卡图区域：整张卡面完整显示，状态全部叠在图上 */
.card .card-art {
  position: relative;
  border-radius: 9px;
  overflow: hidden;
  background: #0e0c14;
  flex: 0 0 auto;
  aspect-ratio: 822 / 1122;
}
.card .card-art .art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.card .card-art .art-fallback {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 8px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.card .card-cap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 5px;
  min-width: 0;
}
.card .card-name {
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card .card-band {
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pill {
  display: inline-block;
  background: rgba(255, 255, 255, .07);
  border-radius: 999px;
  padding: 0 6px;
  margin: 3px 3px 0 0;
  font-size: 10.5px;
}
.pill.warn { background: rgba(232, 196, 122, .18); color: #f2d9a4; }
.pill.danger { background: rgba(227, 93, 138, .2); color: #ffb6ca; }
.pill.ok { background: rgba(155, 140, 240, .2); color: #d6cdfa; }

.skill-btns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.skill-btn {
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(155, 140, 240, .16);
  border: 1px solid rgba(155, 140, 240, .38);
  color: #ded5ff;
  box-shadow: none;
}
.skill-btn:hover { background: rgba(155, 140, 240, .3); border-color: var(--lilac); }
.skill-btn:disabled { opacity: .35; }

.meter { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); margin-top: 6px; overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #e8c47a, #e35d8a); }
.meter.bond > span { background: linear-gradient(90deg, #9b8cf0, #6ad1e3); }

/* ---------------- 轮抽 ---------------- */
.draft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
  gap: 9px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}

/* ---------------- 资源 ---------------- */
.resources { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.res {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 11px;
  font-size: 12px;
  color: var(--muted);
}
.res img { width: 20px; height: 20px; object-fit: contain; }
.res b { font-size: 14px; color: var(--ink); }

/* ---------------- 牌堆 ---------------- */
.piles { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 9px; }
.pile {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel-2);
  min-height: 104px;
  display: grid;
  place-items: center;
}
.pile img.back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
}
.pile .label {
  position: relative;
  z-index: 2;
  text-align: center;
  font-size: 11px;
  color: #f6f1e9;
  text-shadow: 0 2px 8px #000;
}
.pile .label b { display: block; font-size: 19px; }
.pile.clickable { cursor: pointer; }
.pile.clickable:hover { border-color: rgba(232, 196, 122, .55); }

/* ---------------- 日志 ---------------- */
.log-panel { display: flex; flex-direction: column; min-height: 0; }
#log { overflow-y: auto; font-size: 12px; flex: 1; padding-right: 4px; }
#log .entry {
  padding: 6px 0 6px 12px;
  border-left: 2px solid rgba(255, 255, 255, .08);
  color: #d3c9df;
}
#log .entry:first-child { color: #fff; border-color: var(--rose); }
#log .entry.err { color: #ff9db8; }

/* ---------------- 弹窗 / 提示 ---------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: #2a2438;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  z-index: 60;
}
.hidden { display: none !important; }

.modal {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 12, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal-box {
  width: 540px;
  max-width: 92vw;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
}
.modal-box h3 { margin: 0 0 6px; font-size: 15px; }
.modal-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 11px;
  margin: 8px 0;
  font-size: 13px;
}
.modal-card button { padding: 5px 12px; font-size: 12px; }
.modal-art {
  width: 86px;
  flex: 0 0 auto;
  aspect-ratio: 740 / 1042;
  object-fit: contain;
  border-radius: 6px;
  background: #0e0c14;
}
#modalBody { max-height: 62vh; overflow-y: auto; padding-right: 4px; }

/* 悬浮技能提示 */
#tip {
  position: fixed;
  z-index: 200;
  max-width: 320px;
  background: #241f31;
  border: 1px solid rgba(232, 196, 122, .45);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #f0e9db;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
  pointer-events: none;
}
#tip b { color: #ffd9a0; }
#tip .tip-skill { color: #d8cdf0; display: block; margin-top: 4px; }
#tip .tip-hint {
  margin-top: 7px;
  padding-top: 5px;
  border-top: 1px dashed rgba(255, 255, 255, .12);
  color: #9b8cf0;
  font-size: 10.5px;
  letter-spacing: .02em;
  opacity: .9;
}

.dev-entry {
  position: fixed;
  right: 10px;
  bottom: 8px;
  z-index: 150;
  font-size: 11px;
  padding: 3px 8px;
  opacity: 0.6;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 6px;
}
.dev-entry:hover { opacity: 0.9; }
#modal { z-index: 200; }

.dev-group { margin: 6px 0 10px; }
.dev-group h4 { margin: 4px 0; font-size: 12px; color: var(--gold); }
.dev-row { display: block; font-size: 12px; padding: 1px 0; }
#modalBody h3 { margin: 10px 0 4px; }

/* 开发者测试模式（独立面板） */
.dev-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 6, 12, .78);
  backdrop-filter: blur(2px);
}
.dev-panel {
  width: min(1080px, 96vw);
  height: min(780px, 92vh);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.dev-head { display: flex; align-items: center; gap: 12px; }
.dev-head h3 { margin: 0; font-size: 16px; }
.dev-head .meta { flex: 1; }
.dev-tools { display: flex; gap: 8px; align-items: center; }
.dev-tools input[type="text"] {
  flex: 1;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
}
.dev-tools input[type="text"]:focus { border-color: rgba(232, 196, 122, .55); }
.dev-cols {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  gap: 12px;
}
@media (max-width: 980px) {
  .dev-cols {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(140px, 30%) minmax(0, 1fr) minmax(110px, 22%);
  }
  .dev-panel { height: 94vh; }
}
.dev-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .025);
}
.dev-col h4 { margin: 2px 2px 8px; font-size: 13px; color: var(--gold); }
.dev-list { flex: 1; overflow-y: auto; padding-right: 4px; }
.dev-bandgroup { margin-bottom: 6px; }
.dev-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 3px 4px;
  font-size: 12px;
  color: var(--gold);
  background: var(--panel-2);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.dev-band button { font-size: 11px; padding: 1px 8px; }
.dev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1px 8px;
  padding: 4px 0;
}
.dev-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
}
.dev-item:hover { background: rgba(232, 196, 122, .09); }
.dev-item.checked {
  background: rgba(232, 196, 122, .16);
  border-color: rgba(232, 196, 122, .35);
}
.dev-item input { accent-color: #e8c47a; }
.dev-item .dev-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-item .meta { font-size: 11px; flex: 0 0 auto; }
.dev-foot { display: flex; align-items: center; gap: 12px; }
.dev-foot .meta { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- 乐队选择（logo 卡片） ---- */
/* ---- 开局选乐队：1:1 唱片封套卡片 ---- */
.band-setup { --band-w: 980px; }
/* 矮屏（1366×768 / 1280×800）把卡片收小，保证两行 + 按钮 + 版本号都在屏内 */
@media (max-height: 900px) {
  .band-setup { --band-w: 900px; }
}
@media (max-height: 820px) {
  .band-setup { --band-w: 830px; }
}
@media (max-height: 780px) {
  .band-setup { --band-w: 760px; }
}
.band-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  width: min(var(--band-w, 980px), 100%);
  margin: 0 auto;
}
.band-card {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: #17131f;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
  transition: transform .18s var(--ease-out), border-color .18s, box-shadow .18s;
}
.band-card .band-cover {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .35s var(--ease-out), filter .35s;
}
.band-card .band-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 6, 12, .0) 46%, rgba(8, 6, 12, .34) 72%, rgba(8, 6, 12, .9));
}
.band-card .band-logo {
  position: absolute;
  left: 13px;
  bottom: 28px;
  max-width: calc(100% - 34px);
  max-height: 32px;
  object-fit: contain;
  object-position: left center;
  pointer-events: none;
  transition: opacity .22s var(--ease-out);
}
.band-card .band-logo.mono {
  opacity: 1;
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, .9));
}
/* 彩色 logo：默认藏在 mono 下面，选中时以"贴纸"形式弹出来 */
.band-card .band-logo.color {
  opacity: 0;
  padding: 3px 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
}
/* 本身就是彩色的三支：没选中时也直接显示彩色 logo（不加贴纸） */
.band-card.is-color .band-logo.mono { opacity: 0; }
.band-card.is-color .band-logo.color {
  opacity: 1;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .9));
}
.band-card.picked .band-logo.mono { opacity: 0; }
.band-card.picked .band-logo.color {
  opacity: 1;
  max-height: 30px;
  padding: 3px 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
  filter: none;
  animation: logoPop .34s var(--ease-out) both;
}
.band-card .band-name {
  display: block;
  position: absolute;
  left: 13px;
  bottom: 10px;
  font-size: 10px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .58);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
}
.band-card .band-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: none;
  place-items: center;
  background: linear-gradient(140deg, #f3d7a0, #e8c47a);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}
.band-card .band-check img { width: 12px; height: 12px; filter: brightness(0); }
.band-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--band, #9b8cf0);
  opacity: 0;
  transition: opacity .2s;
}
.band-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232, 196, 122, .65);
  box-shadow: 0 22px 40px rgba(0, 0, 0, .55);
}
.band-card:hover .band-cover { transform: scale(1.06); filter: brightness(1.1); }
.band-card:hover::after { opacity: .85; }
.band-card.picked {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(232, 196, 122, .35), 0 18px 36px rgba(0, 0, 0, .5);
}
.band-card.picked::after { opacity: 1; }
.band-card.picked .band-check {
  display: grid;
  animation: checkPop .32s var(--ease-out) both;
}
.band-card.no-cover {
  display: grid;
  place-items: center;
  gap: 6px;
  background: linear-gradient(160deg, var(--band, #9b8cf0), #17131f 70%);
}
.band-card.no-cover .band-logo { position: static; max-height: 34px; }
.band-card.no-cover .band-name { position: static; color: #fff; font-size: 12px; }
@media (max-width: 640px) {
  .band-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 选乐队动效：入场依次浮现 / 点击弹一下 / 彩色 logo 弹入 / 勾选旋转弹出 */
@keyframes logoPop {
  0%   { transform: scale(.72); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes checkPop {
  0%   { transform: scale(0) rotate(-40deg); opacity: 0; }
  70%  { transform: scale(1.18) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes cardPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}
@keyframes bandIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.band-card.band-pop { animation: cardPop .3s var(--ease-out); z-index: 5; }
#bandPicker.enter .band-card {
  animation: bandIn .42s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 32ms);
}
@media (prefers-reduced-motion: reduce) {
  #bandPicker.enter .band-card,
  .band-card.band-pop,
  .band-card.picked .band-check,
  .band-card.picked .band-logo.color { animation: none; }
}

/* ================================================================
   v0.7.0 视觉体系：乐队色 / 难度徽章 / 关键词 / 状态 / 动效
   ================================================================ */

/* ---- 难度徽章 ---- */
.card .diff {
  position: absolute;
  left: 5px;
  top: 5px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 800;
  color: #15121c;
  background: linear-gradient(140deg, #f3d7a0, #e8c47a);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.card .diff.hard {
  background: linear-gradient(140deg, #ff9db8, #e35d8a);
  color: #2a1420;
}

/* ---- 关键词（开幕 / 谢幕 / 首秀） ---- */
.card .kw-row {
  position: absolute;
  left: 4px;
  bottom: 4px;
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  max-width: calc(100% - 8px);
}
.card .kw {
  font-size: 9.5px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 999px;
  color: #fff;
  background: rgba(12, 10, 18, .74);
  border: 1px solid rgba(255, 255, 255, .16);
}
.card .kw.kw-opening { color: #ffe0a3; border-color: rgba(232, 196, 122, .55); }
.card .kw.kw-finale { color: #ffc2d6; border-color: rgba(227, 93, 138, .55); }
.card .kw.kw-debut { color: #d6cdfa; border-color: rgba(155, 140, 240, .55); }

/* ---- 锁定 ---- */
.card.is-locked { opacity: .62; }
.card.is-locked:hover { transform: none; }
.card .lock-flag {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 8, 14, .55);
  font-size: 12px;
  font-weight: 700;
  color: #ffd9e3;
  letter-spacing: .08em;
}

/* ---- 可打出 ---- */
.card.playable {
  border-color: rgba(232, 196, 122, .42);
  box-shadow: 0 0 0 1px rgba(232, 196, 122, .18) inset, 0 6px 18px rgba(0, 0, 0, .35);
}
.card.playable .card-art::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(232, 196, 122, .4);
  pointer-events: none;
}

/* ---- 动效 ---- */
@keyframes dealIn {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
.card.just-played { animation: dealIn .42s cubic-bezier(.2, .9, .3, 1.2); }

@keyframes bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.26); color: #ffe6ae; }
  100% { transform: scale(1); }
}
.res { position: relative; }
.res.bump b { display: inline-block; animation: bump .55s ease-out; }

@keyframes deltaUp {
  0%   { opacity: 0; transform: translateY(6px); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-16px); }
}
.res .delta {
  position: absolute;
  right: 8px;
  top: 0;
  font-size: 11px;
  font-weight: 800;
  color: #9ff0b0;
  pointer-events: none;
  animation: deltaUp .95s ease-out forwards;
}

/* ---- 板块：工位可视化 ---- */
.board .station {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #cfc3dd;
  padding: 3px 0;
  border-top: 1px dashed rgba(255, 255, 255, .07);
}
.board .station .seat {
  width: 18px;
  flex: 0 0 auto;
  text-align: center;
  font-size: 10px;
  color: var(--muted);
}
.board .chip-occ {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  background: rgba(232, 196, 122, .14);
  border: 1px solid rgba(232, 196, 122, .3);
  color: #f6e3bd;
}
.board .chip-occ.them {
  background: rgba(155, 140, 240, .14);
  border-color: rgba(155, 140, 240, .32);
  color: #ded5ff;
}
.board .chip-occ .st { opacity: .75; }
.board .empty-slot { font-size: 10.5px; color: #6f6479; }

/* ---- 牌堆卡背：压暗后融入桌面 ---- */
.pile { background: #0e0c14; }
.pile img.back { opacity: .9; filter: brightness(.38) saturate(.75) contrast(1.15); }
.pile .label { text-shadow: 0 2px 10px #000, 0 0 4px #000; }

/* ---- 对手区 ---- */
.opp-card { display: flex; flex-direction: column; gap: 6px; cursor: default; }
.opp-card:hover { transform: none; }
.opp-card .opp-res {
  font-size: 10.5px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #e2d8ee;
}
.opp-card .opp-team { font-size: 10.5px; color: var(--muted); line-height: 1.55; }
.opp-card .opp-team b { color: #e8ddf5; font-weight: 600; }

/* ---- 日志：阶段标签 ---- */
#log .entry .log-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .04em;
  background: rgba(255, 255, 255, .07);
  color: #cbbfe0;
}
#log .entry.settle { border-left-color: rgba(232, 196, 122, .55); }
#log .entry.settle .log-tag { background: rgba(232, 196, 122, .18); color: #f2d9a4; }
#log .entry.gain { border-left-color: rgba(120, 220, 160, .5); }
#log .entry.gain .log-tag { background: rgba(120, 220, 160, .16); color: #b8f0cd; }
#log .entry.err { border-left-color: var(--rose); }

/* ---- 赞助商合作进度 ---- */
.lv-bar {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
  margin: 0 0 6px;
}
.lv-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #e8c47a, #e35d8a);
  transition: width .35s ease;
}
.board .station .adv { flex: 1 1 auto; min-width: 0; color: #b9adca; }

/* ---- 对手角色小卡 ---- */
.opp-card .opp-res { display: inline-flex; align-items: center; gap: 3px; }
.opp-card .opp-res .ico { width: 13px; height: 13px; object-fit: contain; }
.opp-card .opp-team { display: flex; flex-wrap: wrap; gap: 5px; }
.opp-char {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  font-size: 10.5px;
  color: #ded5ff;
  max-width: 100%;
}
.opp-char img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  flex: 0 0 auto;
  background: #0e0c14;
}
.opp-char .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px; }
.opp-char .st { color: var(--muted); font-size: 10px; }

/* ---- 角色卡卡图底部渐隐，白底卡面融入暗色界面 ---- */
.char-card .char-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(18, 15, 24, .72));
  pointer-events: none;
}

/* ---- 赞助商：3 列太挤，改成按宽度自适应；工位单行不换行 ---- */
.boards.small { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }
.board .sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.board .station .adv { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board .station .chip-occ { flex: 0 0 auto; }

/* ---- 矮屏 / 窄屏：手牌整体缩小一档，避免被挤到折叠线以下 ---- */
@media (max-width: 1500px) {
  .hand-row .card { width: 138px; }
  .hand-row .card .card-art { height: 168px; }
}
@media (max-height: 820px) {
  .hand-row .card { width: 128px; }
  .hand-row .card .card-art { height: 152px; }
  .played-row .card { width: 104px; }
  .played-row .card .card-art { height: 124px; }
  .team-row { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .char-card .char-art .art { height: 96px; }
}
@media (max-height: 820px) {
  .team-row { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .char-card .char-main .line { display: none; }
  .resources { margin-bottom: 8px; }
  .res { padding: 4px 9px; }
}

/* ================================================================
   v0.7.1 粒子特效层（fx.js）
   ================================================================ */
.fx-layer {
  position: fixed;
  inset: 0;
  z-index: 110;          /* 内容之上、弹窗(200)与开发者面板(220)之下 */
  pointer-events: none;
  display: block;
}
.fx-layer.fx-off { display: none; }

/* 粒子飞到目标时，目标闪一下 */
@keyframes fxHit {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(232, 196, 122, .65); }
  35%  { transform: scale(1.055); box-shadow: 0 0 0 4px rgba(232, 196, 122, .28); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(232, 196, 122, 0); }
}
.fx-hit { animation: fxHit .42s ease-out; }

/* 开关按钮：和「开发者模式」同一排 */
.fx-toggle {
  position: fixed;
  right: 96px;
  bottom: 8px;
  z-index: 150;
  font-size: 11px;
  line-height: 1;
  padding: 4px 8px;
  opacity: .6;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 6px;
}
.fx-toggle:hover { opacity: .95; }
.fx-toggle.off { color: #6f6479; text-decoration: line-through; }

/* 声音开关：跟「特效」同一排，往左让位（特效在 96px，开发者按钮在 10px） */
.snd-toggle { right: 152px; }
#sfxToggle { right: 212px; }
#sndBtn { right: 272px; }

/* 音量面板 */
.snd-panel {
  position: fixed;
  right: 96px;
  bottom: 38px;
  z-index: 160;
  width: 214px;
  padding: 10px 12px 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(24, 19, 32, .96);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
.snd-panel.hidden { display: none; }
.snd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink);
  margin-bottom: 7px;
}
.snd-row span { width: 34px; flex: 0 0 auto; white-space: nowrap; opacity: .8; }
.snd-row b {
  width: 36px;
  text-align: right;
  font-weight: 700;
  font-size: 11px;
  color: var(--gold);
}
.snd-row input[type="range"] {
  flex: 1 1 auto;
  height: 16px;
  accent-color: #b9a6ff;
  cursor: pointer;
}
.snd-tip { font-size: 10px; color: #7f7489; text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .fx-layer { display: none; }
  .fx-hit { animation: none; }
}

/* ================================================================
   v0.7.2 事件卡（遭遇卡）展示
   ================================================================ */

/* ---- 我的区域：最近遭遇小卡条 ---- */
.enc-strip { margin: 2px 0 10px; }
.enc-strip-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted);
  margin-bottom: 6px;
}
.enc-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.enc-card {
  flex: 0 0 auto;
  width: 92px;
  padding: 5px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), var(--panel-2) 65%);
  border: 1px solid var(--line);
  border-top: 3px solid var(--enc, var(--lilac));
  cursor: pointer;
  transition: transform .14s, border-color .14s, box-shadow .14s;
}
.enc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .45);
  border-color: rgba(255, 255, 255, .22);
}
.enc-card .enc-art {
  aspect-ratio: 822 / 1122;
  border-radius: 6px;
  overflow: hidden;
  background: #0e0c14;
}
.enc-card .enc-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.enc-fallback {
  display: grid;
  place-items: center;
  height: 100%;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
  background: linear-gradient(160deg, rgba(155, 140, 240, .12), rgba(0, 0, 0, .25));
}
.enc-card .enc-cap { padding-top: 4px; display: flex; flex-direction: column; gap: 1px; }
.enc-card .enc-name {
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.enc-card .enc-type { font-size: 9.5px; color: var(--enc, var(--lilac)); }

@keyframes encIn {
  from { opacity: 0; transform: translateY(12px) rotate(-5deg) scale(.92); }
  to   { opacity: 1; transform: none; }
}
.enc-card.is-new {
  animation: encIn .55s cubic-bezier(.2, .9, .3, 1.2);
  box-shadow: 0 0 0 1px var(--enc) inset, 0 10px 24px rgba(0, 0, 0, .5);
}

/* ---- 抽到事件卡：登场浮层 ---- */
.enc-pop {
  position: fixed;
  left: 50%;
  top: 13%;
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  gap: 12px;
  width: min(520px, 92vw);
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(38, 32, 52, .98), rgba(22, 18, 30, .98));
  border: 1px solid rgba(255, 255, 255, .12);
  border-top: 3px solid var(--enc, var(--lilac));
  box-shadow: 0 24px 64px rgba(0, 0, 0, .65);
  cursor: pointer;
}
.enc-pop.in { animation: encPop .45s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes encPop {
  from { opacity: 0; transform: translate(-50%, -16px) scale(.96); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.enc-pop-art {
  width: 104px;
  flex: 0 0 auto;
  aspect-ratio: 822 / 1122;
  border-radius: 8px;
  overflow: hidden;
  background: #0e0c14;
}
.enc-pop-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.enc-pop-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.enc-pop-kicker {
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--enc, var(--lilac));
}
.enc-pop-name { font-size: 16px; font-weight: 800; }
.enc-pop-text { font-size: 12px; color: #d8cde8; line-height: 1.5; }
.enc-pop-hint { font-size: 10px; color: #6f6479; margin-top: auto; }

/* ---- 事件卡大图弹窗 ---- */
.enc-modal { display: flex; gap: 14px; align-items: flex-start; }
/* 「使用这张遭遇卡」的按钮行（目前只有《紧凑的日程》） */
.enc-use-row {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.enc-use-row button {
  font-size: 12.5px;
  padding: 6px 14px;
  border-radius: 8px;
}
.enc-modal-art {
  width: 210px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: #0e0c14;
}
.enc-modal-type {
  display: inline-block;
  font-size: 10.5px;
  padding: 1px 8px;
  border-radius: 999px;
  color: var(--enc, var(--lilac));
  border: 1px solid currentColor;
  margin-bottom: 6px;
}
.enc-modal-name { font-size: 15px; font-weight: 800; margin-bottom: 6px; }

/* ---- 对手抽到的事件卡 ---- */
.opp-enc {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: #cfc3dd;
  border-top: 1px dashed rgba(255, 255, 255, .08);
  padding-top: 5px;
}
.opp-enc-tag {
  font-size: 9.5px;
  padding: 0 6px;
  border-radius: 999px;
  color: var(--enc, var(--lilac));
  border: 1px solid currentColor;
}

@media (max-width: 820px) {
  .enc-pop { top: 8%; }
  .enc-modal { flex-direction: column; }
  .enc-modal-art { width: 140px; }
}

/* 事件卡浮层：位置与配色微调 */
.enc-pop {
  top: 11%;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .68), 0 0 0 1px var(--enc, var(--lilac)) inset;
}
.enc-pop-art { width: 96px; }
.enc-pop-name { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.enc-pop-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* 事件卡浮层：略收窄、上移，少挡一点资源条 */
.enc-pop { top: 8%; width: min(460px, 92vw); }
.enc-pop:hover { box-shadow: 0 28px 70px rgba(0, 0, 0, .7), 0 0 0 1px var(--enc, var(--lilac)) inset; }

/* ================================================================
   v0.7.3 素材接入：唱片墙 / 乐器图标 / 界面小图标
   ================================================================ */

/* ---- 开始界面：唱片墙背景 ---- */
.cover-wall {
  /* 固定在视口上：开始页内部滚动时，背景不会露出没遮罩的区域 */
  position: fixed;
  inset: -10%;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
  transform: rotate(-7deg) scale(1.08);
  pointer-events: none;
}
.cover-tile {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  filter: blur(1.5px) brightness(.4) saturate(.82);
  opacity: .92;
}
.cover-tile:nth-child(even) { transform: translateY(14px); }
.cover-veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(58% 52% at 50% 46%, rgba(16, 13, 23, .95) 0%, rgba(16, 13, 23, .74) 46%, rgba(16, 13, 23, .22) 76%, transparent 100%),
    linear-gradient(180deg, rgba(16, 13, 23, .6), transparent 28%, transparent 68%, rgba(16, 13, 23, .8));
}
.float-layer { z-index: 2; }
.start-center { z-index: 3; }

@media (max-width: 820px) {
  .cover-wall { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); }
}

/* ---- 角色卡：乐器真图标 ---- */
.inst-row { display: flex; flex-wrap: wrap; gap: 2px 9px; margin-top: 2px; }
.inst {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
}
.inst img { width: 14px; height: 14px; object-fit: contain; flex: 0 0 auto; }
.inst-label { line-height: 1; }

/* ---- 界面小图标（button / h2 内） ---- */
.h-ico {
  width: 13px;
  height: 13px;
  object-fit: contain;
  vertical-align: -2px;
  margin-right: 5px;
  opacity: .85;
}
h2 .h-ico { width: 12px; height: 12px; opacity: .55; margin-right: 4px; }
button .h-ico { opacity: .95; }

/* 唱片墙：稍微提亮，让封面本身成为背景纹理，但别抢标题 */
.cover-wall { filter: saturate(.8); }
.cover-tile { filter: blur(2.5px) brightness(.36) saturate(.8); opacity: .95; }
.cover-veil {
  background:
    radial-gradient(62% 56% at 50% 44%, rgba(16, 13, 23, .96) 0%, rgba(16, 13, 23, .8) 44%, rgba(16, 13, 23, .4) 72%, rgba(10, 8, 14, .55) 100%),
    radial-gradient(120% 95% at 50% 50%, transparent 42%, rgba(10, 8, 14, .8) 100%),
    linear-gradient(180deg, rgba(16, 13, 23, .7), transparent 26%, transparent 66%, rgba(16, 13, 23, .85));
}
/* 飘过的卡牌和唱片墙叠在一起太吵，压低存在感 */
.float-card { opacity: .16; }
.float-card { opacity: .1; filter: blur(1.5px) saturate(.9); }

/* ================================================================
   v0.7.4 板块 / 赞助商：场景图打底 + 自己的文字层
   （场景图是纯背景，规则文字用界面自己的，保证小卡片上也能读）
   ================================================================ */
.board.has-art {
  padding: 7px 9px;
  overflow: hidden;
  /* 不再写死高度：人多时卡片自己长高，文字层永远不会压在一起 */
  height: auto;
  min-height: 122px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 12px;
  border-color: rgba(255, 255, 255, .14);
  background-size: cover;
  background-position: center;
  background-color: #12101a;
}
.boards.small .board.has-art { min-height: 108px; }

.board.has-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 8, 14, .12) 0%, rgba(10, 8, 14, .52) 44%, rgba(10, 8, 14, .93) 100%);
}
.board.has-art:hover {
  border-color: rgba(232, 196, 122, .55);
}
.board.has-art:hover::after {
  background: linear-gradient(180deg, rgba(10, 8, 14, 0) 0%, rgba(10, 8, 14, .44) 44%, rgba(10, 8, 14, .88) 100%);
}

.board.has-art .board-title {
  position: static;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .95);
}
.board.has-art .board-title .info-btn {
  margin-left: auto;
  background: rgba(10, 8, 14, .66);
  text-shadow: none;
}

/* 卡面底部信息块：描述在上、人物 chip 在下，整体贴在底部，
   有多少人就往上长，不会互相压住（之前是两块各自绝对定位，人多就重叠） */
.board.has-art .board-meta {
  position: static;
  margin-top: auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.board.has-art .board-hint {
  font-size: 10.5px;
  line-height: 1.35;
  color: #e2d8f0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .95);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.board.has-art .board-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.board.has-art.empty { border-style: solid; }
.board.has-art.empty .board-hint { color: #b9adca; }
.board.has-art .chip-occ { padding: 1px 6px; font-size: 10px; }
.board.has-art .chip-occ .st { display: none; }
.board.has-art:hover .chip-occ .st { display: inline; }
.occ-ico { width: 11px; height: 11px; object-fit: contain; margin-right: 2px; }

/* 合作等级小徽章（赞助商卡面用） */
.lv-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(232, 196, 122, .16);
  border: 1px solid rgba(232, 196, 122, .4);
  color: #f6e3bd;
  white-space: nowrap;
}
.lv-chip i {
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  position: relative;
  overflow: hidden;
}
.lv-chip i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--p, 0%);
  background: linear-gradient(90deg, #e8c47a, #e35d8a);
}

/* 弹窗里的板卡大图 */
.board-modal-art { display: block; width: 100%; border-radius: 10px; margin-bottom: 10px; }

/* 赞助商也用 3 列，和任务板块对齐（有场景图后不再需要宽卡片放工位文字） */
.boards.small { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ================================================================
   v0.7.5 乐队唱片：轮抽唱片架（选队封套样式见文件前部）
   ================================================================ */

/* 轮抽阶段的"唱片架"：本轮参与轮抽的乐队 */
.band-shelf { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
.shelf-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 11px 3px 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
}
.shelf-cover {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: #161320;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset;
}
.shelf-cover::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: 11px;
  border-radius: 50%;
  background: #0e0c14;
}
.shelf-name { font-size: 11.5px; color: #e2d8f0; letter-spacing: .02em; }

/* ================================================================
   v0.7.6 图标体系补全：阶段 chip / 关键词徽章 / 标题与按钮
   ================================================================ */
.chip-ico {
  width: 12px;
  height: 12px;
  object-fit: contain;
  vertical-align: -2px;
  margin-right: 4px;
  opacity: .9;
}
.chip.on .chip-ico { opacity: 1; }

/* 关键词徽章：白描小图标 + 文字 */
.card .kw {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.card .kw img {
  width: 10px;
  height: 10px;
  object-fit: contain;
  opacity: .9;
}

/* 顶栏「重开」「特效」「开发者」按钮里的图标稍微紧凑一点 */
#btn-new .h-ico,
.fx-toggle .h-ico,
.dev-entry .h-ico {
  width: 12px;
  height: 12px;
  margin-right: 4px;
  vertical-align: -1px;
}
.dev-entry .h-ico { opacity: .7; }

/* ================================================================
   v0.7.7 弹窗筛选 / 练习室骰子 / 升降箭头
   ================================================================ */
.pile-tools {
  position: sticky;
  top: -2px;
  z-index: 2;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
  padding: 4px 0 10px;
  background: linear-gradient(180deg, var(--panel-2) 64%, rgba(36, 31, 49, 0));
}
.pile-search {
  flex: 1 1 170px;
  min-width: 130px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 12.5px;
  padding: 6px 10px;
  outline: none;
}
.pile-search:focus { border-color: rgba(232, 196, 122, .55); background: rgba(255, 255, 255, .09); }
.pile-select {
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 12px;
  padding: 6px 8px;
  outline: none;
}
.pile-count { font-size: 11px; color: var(--muted); margin-left: auto; }

/* 练习室骰子 */
.dice-wrap { display: flex; align-items: center; gap: 12px; margin: 2px 0 12px; }
.dice {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  padding: 8px;
  border-radius: 12px;
  background: linear-gradient(150deg, #fffdf7, #e7dcc8);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45), inset 0 -3px 0 rgba(0, 0, 0, .12);
}
.dice i { border-radius: 50%; background: #1c1826; opacity: 0; }
.dice[data-face="1"] i:nth-child(5) { opacity: 1; }
.dice[data-face="2"] i:nth-child(1),
.dice[data-face="2"] i:nth-child(9) { opacity: 1; }
.dice[data-face="3"] i:nth-child(1),
.dice[data-face="3"] i:nth-child(5),
.dice[data-face="3"] i:nth-child(9) { opacity: 1; }
.dice[data-face="4"] i:nth-child(1),
.dice[data-face="4"] i:nth-child(3),
.dice[data-face="4"] i:nth-child(7),
.dice[data-face="4"] i:nth-child(9) { opacity: 1; }
.dice[data-face="5"] i:nth-child(1),
.dice[data-face="5"] i:nth-child(3),
.dice[data-face="5"] i:nth-child(5),
.dice[data-face="5"] i:nth-child(7),
.dice[data-face="5"] i:nth-child(9) { opacity: 1; }
.dice[data-face="6"] i:nth-child(1),
.dice[data-face="6"] i:nth-child(3),
.dice[data-face="6"] i:nth-child(4),
.dice[data-face="6"] i:nth-child(6),
.dice[data-face="6"] i:nth-child(7),
.dice[data-face="6"] i:nth-child(9) { opacity: 1; }

@keyframes diceRoll {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-12deg) scale(1.06); }
  50% { transform: rotate(10deg) scale(.98); }
  75% { transform: rotate(-6deg) scale(1.04); }
  100% { transform: rotate(0deg) scale(1); }
}
.dice.rolling { animation: diceRoll .3s linear infinite; }
@keyframes dicePop {
  from { transform: scale(.86); }
  60% { transform: scale(1.09); }
  to { transform: scale(1); }
}
.dice.settled { animation: dicePop .36s cubic-bezier(.2, .9, .3, 1.3); }
.dice-title { font-size: 11px; letter-spacing: .14em; color: var(--muted); margin-bottom: 3px; }

/* 排名徽章 + 升降箭头 */
.rank-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 11px;
  font-size: 12px;
  color: #e2d8ee;
}
.rank-chip .arrow { font-size: 10px; }
.rank-chip.up .arrow { color: #9ff0b0; }
.rank-chip.down .arrow { color: #ff9db8; }
.res .delta.down { color: #ff9db8; }
.pile-tools::-webkit-search-cancel-button { filter: invert(.7); }

/* ================================================================
   v0.7.8 翻面 / 面具 / Live 谢幕
   ================================================================ */
/* 面具角标 */
.mask-flag {
  position: absolute;
  left: 4px;
  top: 4px;
  z-index: 2;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(10, 8, 14, .72);
  border: 1px solid rgba(232, 196, 122, .5);
  box-shadow: 0 0 10px rgba(232, 196, 122, .35);
}
.mask-flag img { width: 14px; height: 14px; object-fit: contain; }

/* 翻面 / 戴面具的一次性动画 */
@keyframes flipPulse {
  0% { transform: perspective(600px) rotateY(0deg); }
  45% { transform: perspective(600px) rotateY(78deg) scale(.96); }
  100% { transform: perspective(600px) rotateY(0deg); }
}
.card.fx-flip { animation: flipPulse .66s ease-in-out; }

/* ---- 崩溃（V5.0：不是翻面，只是失去技能与乐队标签）----
   卡面保持正面，右上角打「崩溃」标记，技能按钮变灰 */
.char-card.is-flipped .char-art .art { filter: saturate(.75) brightness(.9); }
.char-card.is-flipped .char-art::before {
  content: "崩溃";
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fff0f5;
  background: linear-gradient(140deg, #ff9db8, #e35d8a);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .55);
  pointer-events: none;
}
.char-card.is-flipped .char-name-row .name { color: #ffb6c9; }
.char-card.is-flipped .skill-btns { opacity: .35; }

/* ---- 坚定卡 / 崩溃卡：抽卡时的显著提示（卡背翻到卡面）---- */
.stress-pop {
  position: fixed;
  left: 50%;
  top: 70px;
  transform: translateX(-50%) translateY(-10px);
  z-index: 140;
  display: flex;
  gap: 13px;
  width: min(430px, 92vw);
  padding: 12px;
  border-radius: 14px;
  background: rgba(16, 12, 22, .96);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 22px 52px rgba(0, 0, 0, .62);
  cursor: pointer;
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
}
.stress-pop.in { opacity: 1; transform: translateX(-50%) translateY(0); }
.stress-pop.crisis {
  border-color: rgba(227, 93, 138, .8);
  box-shadow: 0 0 0 1px rgba(227, 93, 138, .3), 0 0 28px rgba(227, 93, 138, .35), 0 22px 52px rgba(0, 0, 0, .62);
}
.stress-pop.resolve {
  border-color: rgba(232, 196, 122, .85);
  box-shadow: 0 0 0 1px rgba(232, 196, 122, .3), 0 0 28px rgba(232, 196, 122, .32), 0 22px 52px rgba(0, 0, 0, .62);
}

.stress-flip {
  width: 118px;
  height: 167px;
  flex: 0 0 auto;
  position: relative;
  perspective: 760px;
}
.stress-face {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  overflow: hidden;
  backface-visibility: hidden;
  background: #0e0c14;
  transition: transform .5s cubic-bezier(.3, .7, .3, 1);
  display: grid;
  place-items: center;
}
.stress-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stress-face span { font-size: 13px; font-weight: 800; color: #e8c47a; }
.stress-face.back { transform: rotateY(0deg); }
.stress-face.front { transform: rotateY(180deg); }
.stress-flip.revealed .stress-face.back { transform: rotateY(-180deg); }
.stress-flip.revealed .stress-face.front { transform: rotateY(0deg); }

.stress-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.stress-kicker {
  font-size: 10.5px;
  letter-spacing: .14em;
  font-weight: 700;
}
.stress-pop.crisis .stress-kicker { color: #ff9db8; }
.stress-pop.resolve .stress-kicker { color: #f3d7a0; }
.stress-name { font-size: 19px; font-weight: 800; margin: 1px 0 3px; }
.stress-text { font-size: 12px; line-height: 1.5; color: #d8cde8; }

@keyframes maskGlow {
  0% { box-shadow: 0 0 0 0 rgba(232, 196, 122, .8); }
  40% { box-shadow: 0 0 0 6px rgba(232, 196, 122, .25), 0 0 26px rgba(232, 196, 122, .5); }
  100% { box-shadow: 0 0 0 0 rgba(232, 196, 122, 0); }
}
.card.fx-mask { animation: maskGlow .85s ease-out; }

/* ---- Live 谢幕浮层 ---- */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  background: rgba(8, 6, 12, .84);
  backdrop-filter: blur(3px);
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease;
}
.curtain.in { opacity: 1; }
.curtain-bg {
  position: absolute;
  inset: -6%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  opacity: .16;
  filter: blur(7px) saturate(.75);
  pointer-events: none;
}
.curtain-bg span { background-size: cover; background-position: center; }

.curtain-card {
  position: relative;
  width: min(520px, 92vw);
  padding: 22px 24px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(40, 34, 55, .98), rgba(20, 17, 28, .98));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: curtainIn .45s cubic-bezier(.2, .9, .3, 1.15);
}
@keyframes curtainIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.curtain-kicker { font-size: 11px; letter-spacing: .22em; color: var(--gold); }
.curtain-title {
  margin: 2px 0 16px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: .18em;
  text-shadow: 0 6px 24px rgba(0, 0, 0, .6);
}
.curtain-rows { display: flex; flex-direction: column; gap: 7px; }
.curtain-row {
  display: grid;
  grid-template-columns: 42px 1fr auto 62px;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  animation: curtainRowIn .42s ease both;
  animation-delay: calc(var(--i, 0) * 110ms);
}
@keyframes curtainRowIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}
.curtain-row.lit { background: rgba(255, 255, 255, .05); border-color: var(--line); }
.curtain-row.me { background: rgba(232, 196, 122, .16); border-color: rgba(232, 196, 122, .45); }
.curtain-row .crank { font-size: 21px; font-weight: 800; color: var(--gold); text-align: center; }
.curtain-row.virtual .cname { color: var(--muted); }
.curtain-row .cname { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.curtain-row .metag {
  font-size: 9.5px;
  padding: 0 6px;
  border-radius: 999px;
  color: #2a1a24;
  background: linear-gradient(120deg, #f3d7a0, #e8c47a);
  font-weight: 700;
}
.curtain-row .cfans { font-size: 13px; color: #ffc2d6; }
.curtain-row .ccoins { font-size: 12px; color: #f2d9a4; text-align: right; min-height: 1em; }
.curtain-hint { margin-top: 14px; text-align: center; font-size: 10.5px; color: #6f6479; letter-spacing: .1em; }

/* 开发者「一控多」：顶部提示当前操作的是哪个玩家 */
.hotseat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: #1b1220;
  background: linear-gradient(135deg, #ffd479, #ff9ad5);
  font-weight: 700;
}
.hotseat-badge.hidden { display: none; }

/* ---------------- 日志筛选 / 行动者标识 ---------------- */
.log-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 2px 0 8px;
}
.log-filter button {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.log-filter button:hover { color: var(--ink); }
.log-filter button.on {
  background: rgba(227, 93, 138, .22);
  color: #ffd7e5;
  border-color: rgba(227, 93, 138, .55);
}
#log .entry { display: flex; gap: 6px; align-items: flex-start; }
#log .entry .log-txt { flex: 1; min-width: 0; }
#log .entry.me { border-left-color: rgba(227, 93, 138, .55); }
#log .entry.opp {
  color: #ece6ff;
  border-left-color: rgba(155, 140, 240, .8);
  background: linear-gradient(90deg, rgba(155, 140, 240, .13), transparent 72%);
}
#log .entry.opp .log-tag {
  background: rgba(155, 140, 240, .22);
  color: #ded7ff;
}
.log-actor {
  flex: 0 0 auto;
  font-size: 10px;
  line-height: 1.7;
  padding: 0 6px;
  border-radius: 999px;
  white-space: nowrap;
}
.log-actor.you { background: rgba(227, 93, 138, .22); color: #ffc9db; }
.log-actor.opp {
  background: rgba(155, 140, 240, .3);
  color: #e6e0ff;
  font-weight: 600;
}
.log-round {
  margin: 10px 0 4px;
  padding-bottom: 3px;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--gold);
  border-bottom: 1px dashed rgba(232, 196, 122, .25);
}

/* ================= 响应式增强：任意窗口尺寸都自适应 ================= */
html, body { max-width: 100%; }
img { max-width: 100%; }
.wrap { padding: clamp(8px, 1.1vw, 16px); }
header { padding: clamp(6px, .7vw, 10px) clamp(8px, 1.2vw, 18px); }
.modal { padding: 12px; overflow-y: auto; }

/* 面板不再被压扁：列内放不下就让整页滚动 */
.col > .panel:not(.log-panel) { flex: 0 0 auto; }

/* 中宽：保持三栏，只压缩列宽；矮屏由列内滚动兜底 */
@media (max-width: 1280px) and (min-width: 981px) {
  .table {
    grid-template-columns: minmax(210px, .95fr) minmax(260px, 1.15fr) minmax(220px, .9fr);
  }
  .col-right { grid-column: auto; flex-direction: column; }
  .col-right .log-panel { min-height: 200px; }
}

/* 窄屏：全部单列、整页滚动 */
@media (max-width: 980px) {
  body {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .wrap { flex: none; height: auto; }
  .table { display: block; height: auto; }
  .col {
    overflow: visible;
    margin-bottom: 12px;
    max-height: none;
    padding-right: 0;
  }
  .col-right { display: flex; flex-direction: column; }
  .col-right > * { flex: none; }
  .col-right .log-panel { min-height: 220px; max-height: 52vh; }
  #log { max-height: 42vh; }
  .boards { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
  .boards.small { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .modal-box {
    width: min(600px, 94vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
  }
  /* 弹窗内容很长（选角色 / 选卡）时要能滚：flex 里必须给 #modalBody 一个可收缩的高度，
     否则 max-height:90vh 的 .modal-box 会把超出部分直接裁掉，表现为「有的卡消失了」 */
  .modal-box { max-height: 88vh; }
  #modalBody { max-height: none; overflow-y: auto; flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; }
}

/* 手机：收紧间距和字号 */
@media (max-width: 640px) {
  .brand { display: none; }
  header { gap: 6px 8px; }
  header .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
  }
  header .chips::-webkit-scrollbar { display: none; }
  header button { padding: 6px 11px; font-size: 12px; }
  .turn-badge { font-size: 10px; padding: 2px 8px; }
  .panel { padding: 10px 11px; border-radius: 12px; }
  .board { min-height: 72px; padding: 8px; }
  .boards { grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); gap: 7px; }
  .boards.small { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  .card { width: min(132px, 41vw); }
  .modal-card { flex-wrap: wrap; }
  .modal-art { width: 62px; }
  .start-center { padding: 18px 14px; }
  .start-center h1 { font-size: clamp(34px, 11vw, 48px); letter-spacing: .08em; }
  .lead { font-size: 13px; margin: 8px 0 18px; }
  .band-grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
}

/* 开始界面：矮屏可滚动，避免内容被裁掉 */
@media (max-height: 700px) {
  .start { overflow-y: auto; align-items: start; }
  .start-center { padding-top: 32px; padding-bottom: 32px; }
}

/* 板块卡（遭遇卡变成的特殊板块）：提示可以派角色执行 */
.card-hint { display: block; font-size: 10px; color: var(--gold); opacity: .8; margin-top: 2px; }

/* ================================================================
   v0.8.0 Step 1 · Live 舞台布局
   ----------------------------------------------------------------
   只有 .wrap[data-phase="live"] 生效，其它阶段完全不受影响。
   做法：把三栏里的各个区块（队伍 / 资源 / 板块 / 手牌 / 舞台）变成
   .table 的栅格项，用 grid-template-areas 重新摆位，DOM 不动。
   ================================================================ */

/* ---------------- 舞台容器（默认隐藏，Live 才出现） ---------------- */
.wrap[data-phase="live"] #liveStage:not([hidden]) {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  padding: 14px 16px 0;
  min-width: 0;
  min-height: 320px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(155, 140, 240, .22), transparent 62%),
    radial-gradient(90% 70% at 50% 115%, rgba(227, 93, 138, .16), transparent 62%),
    #100c18;
}
.stage-cover {
  position: absolute;
  inset: -40px;
  background-size: cover;
  background-position: center;
  filter: blur(26px) saturate(.8) brightness(.5);
  opacity: .5;
  transform: scale(1.06);
  pointer-events: none;
}
.stage-spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 54% at 50% 0%, rgba(255, 246, 236, .16), transparent 72%),
    linear-gradient(180deg, rgba(10, 8, 14, .12), rgba(10, 8, 14, .58) 82%);
}
.stage-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.stage-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: .24em;
  color: #cfc3dd;
}
.stage-kicker .h-ico { width: 14px; height: 14px; }
.stage-stat { font-size: 12px; color: var(--muted); }
.stage-stat b { color: var(--ink); font-weight: 700; }
.stage-stat b i { font-style: normal; font-weight: 400; color: var(--muted); }
.stage-played {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 1.1vw, 16px);
  padding: 10px 8px 18px;
  overflow: hidden;
}
/* 出牌位：张数多时按容器宽度压缩（不写死 px），少于 6 张时保持效果图尺寸 */
.stage-played .card {
  width: 118px;
  flex: 1 1 0;
  min-width: 84px;
  max-width: 118px;
  transform: rotate(var(--r, 0deg));
  transform-origin: 50% 92%;
}
.stage-slot-empty {
  flex: 1 1 0;
  min-width: 84px;
  max-width: 118px;
  align-self: flex-end;
  aspect-ratio: 3 / 5;
  max-height: 100%;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .015);
  display: grid;
  place-items: center;
  padding: 8px;
  font-size: 10.5px;
  color: #6f6479;
  text-align: center;
}
.play-tag {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  color: #2a1a24;
  background: linear-gradient(120deg, #f3d7a0, #e8c47a);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
/* 不计入出牌数量：用冷色，避免和「额外名额」的金色角标混淆 */
.play-tag.no-count {
  color: #dcd4ef;
  background: rgba(46, 36, 60, .92);
  border: 1px solid rgba(155, 140, 240, .6);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.stage-played .card .card-art { height: 150px; }
.stage-played .card .card-band { display: none; }
.stage-played .card .card-name { font-size: 11.5px; }
.stage-played > .meta { align-self: center; }
.stage-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 54px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .45));
  border-top: 1px solid rgba(255, 255, 255, .05);
}
/* 舞台左下：锁定区（Live 阶段常驻，可被洗回类效果作用） */
.locked-zone { display: none; }
.wrap[data-phase="live"] .locked-zone:not([hidden]) {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 214px;
  transition: bottom .18s ease;
}
.wrap[data-phase="live"].dock-open .locked-zone { bottom: 100px; }
.locked-head {
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--muted);
}
.locked-row { display: flex; gap: 6px; flex-wrap: wrap; }
.locked-chip {
  position: relative;
  width: 46px;
  height: 58px;
  padding: 0;
  border-radius: 7px;
  border: 1px solid rgba(155, 140, 240, .45);
  background: #0e0c14;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
  transition: transform .14s, border-color .14s;
}
.locked-chip:hover { border-color: var(--gold); transform: translateY(-2px); }
.locked-art { display: block; width: 100%; height: 100%; }
.locked-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .55;
  filter: saturate(.6);
}
.locked-lock {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 15px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .8));
}
.locked-note { font-size: 10.5px; color: var(--muted); }

/* ---------------- Live 栅格：左队伍 / 中舞台+技能坞+手牌 / 右对手+日志 ---------------- */
.wrap[data-phase="live"] .table {
  grid-template-columns: minmax(224px, 250px) minmax(0, 1fr) minmax(238px, 282px);
  grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "th    stage right"
    "tm    stage right"
    "res   stage right"
    "enc   stage right"
    "stc   stage right"
    "lck   stage right"
    "brd   stage right"
    "brd   dock  right"
    "brd   hand  right";
  gap: 10px;
}
/* 坚定/崩溃 + 已锁定：Live 里塞进左栏底部。
   这两块的标题是装饰性的，Live 屏窄，标题直接藏掉，只留内容（按钮本身写着数量） */
.wrap[data-phase="live"] .h-stress,
.wrap[data-phase="live"] .h-locked { display: none; }
.wrap[data-phase="live"] #stressCardsRow { grid-area: stc; }
.wrap[data-phase="live"] #locked { grid-area: lck; }
/* 三栏 / 我的区域 都"透明化"，里面的区块直接参与上面的栅格 */
.wrap[data-phase="live"] .col-left,
.wrap[data-phase="live"] .col-mid,
.wrap[data-phase="live"] #selfPanel { display: contents; }

.wrap[data-phase="live"] #liveStage { grid-area: stage; }
.wrap[data-phase="live"] .h-team {
  grid-area: th;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 2px;
}
.wrap[data-phase="live"] #team { grid-area: tm; }
.wrap[data-phase="live"] #myStats { grid-area: res; }
.wrap[data-phase="live"] #myEncounters { grid-area: enc; }
.wrap[data-phase="live"] #publicPanel {
  grid-area: brd;
  align-self: start;
  max-height: 100%;
  overflow-y: auto;
}
.wrap[data-phase="live"] #hand { grid-area: hand; }
.wrap[data-phase="live"] #skillDock { grid-area: dock; }
.wrap[data-phase="live"] .col-right { grid-area: right; }
.wrap[data-phase="live"] .h-hand,
.wrap[data-phase="live"] .h-played,
.wrap[data-phase="live"] .h-area,
.wrap[data-phase="live"] .h-locked,
.wrap[data-phase="live"] #selfPanel > .panel-head,
.wrap[data-phase="live"] #played,
.wrap[data-phase="live"] #playerArea,
.wrap[data-phase="live"] #locked,
.wrap[data-phase="live"] #pilesPanel { display: none; }

/* 左栏：队伍行 */
.wrap[data-phase="live"] .team-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 6px;
  max-height: clamp(240px, 46vh, 440px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.wrap[data-phase="live"] .char-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas:
    "art main"
    "art skills";
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
  padding: 5px 7px;
  border-radius: 11px;
}
.wrap[data-phase="live"] .char-card .char-art {
  grid-area: art;
  width: 44px;
  height: 52px;
}
.wrap[data-phase="live"] .char-card .char-art .art { height: 100%; }
.wrap[data-phase="live"] .char-card .char-main { grid-area: main; min-width: 0; }
.wrap[data-phase="live"] .char-card .inst-row { display: none; }
.wrap[data-phase="live"] .char-card .meter { display: none; }
.wrap[data-phase="live"] .char-card .pill { margin: 1px 2px 0 0; font-size: 10px; padding: 0 5px; }
.wrap[data-phase="live"] .char-card .char-name-row .name { font-size: 12px; }
.wrap[data-phase="live"] .char-card .skill-btns {
  grid-area: skills;
  gap: 3px;
  margin-top: 1px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.wrap[data-phase="live"] .char-card .skill-btns::-webkit-scrollbar { display: none; }
.wrap[data-phase="live"] .char-card .skill-btn {
  font-size: 10px;
  padding: 1px 7px;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 左栏：资源 / 遭遇条 */
.wrap[data-phase="live"] #myStats {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  gap: 6px;
}
.wrap[data-phase="live"] #myStats .res { padding: 4px 9px; font-size: 11.5px; }
.wrap[data-phase="live"] #myStats .res img { width: 17px; height: 17px; }
.wrap[data-phase="live"] #myEncounters:empty { display: none; }

/* 左栏：板块细带（Live 里压成一行行小药丸，只留名字 + 在场角色） */
.wrap[data-phase="live"] #publicPanel { padding: 8px 9px; min-height: 0; }
.wrap[data-phase="live"] #publicPanel > h2 { display: none; }
.wrap[data-phase="live"] #publicPanel .boards,
.wrap[data-phase="live"] #publicPanel .boards.small {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
}
.wrap[data-phase="live"] #publicPanel .board,
.wrap[data-phase="live"] #publicPanel .boards.small .board {
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 3px 8px;
  border-radius: 999px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  transform: none;
}
.wrap[data-phase="live"] #publicPanel .board.has-art,
.wrap[data-phase="live"] #publicPanel .boards.small .board.has-art {
  background-image: none !important;
  background-color: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  max-height: none;
  overflow: visible;
}
.wrap[data-phase="live"] #publicPanel .board.has-art::after { display: none; }
.wrap[data-phase="live"] #publicPanel .board-meta {
  margin: 0;
  flex-direction: row;
  align-items: center;
  gap: 3px;
}
.wrap[data-phase="live"] #publicPanel .board-title { font-size: 10.5px; font-weight: 600; gap: 0; }
.wrap[data-phase="live"] #publicPanel .board-title .info-btn,
.wrap[data-phase="live"] #publicPanel .board-hint { display: none; }
.wrap[data-phase="live"] #publicPanel .board .title { font-size: 10.5px; }
.wrap[data-phase="live"] #publicPanel .board .sub,
.wrap[data-phase="live"] #publicPanel .board .effect,
.wrap[data-phase="live"] #publicPanel .lv-bar,
.wrap[data-phase="live"] #publicPanel .lv-chip,
.wrap[data-phase="live"] #publicPanel .board .station .adv,
.wrap[data-phase="live"] #publicPanel .board .station .seat { display: none; }
.wrap[data-phase="live"] #publicPanel .board .station,
.wrap[data-phase="live"] #publicPanel .board-foot {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  margin: 0;
}
.wrap[data-phase="live"] #publicPanel .board .station .chip-occ { font-size: 9.5px; }
.wrap[data-phase="live"] #publicPanel .chip-occ { font-size: 9.5px; padding: 0 5px; }
.wrap[data-phase="live"] #publicPanel .empty-slot { font-size: 9.5px; }
.wrap[data-phase="live"] #publicPanel #publicArea { gap: 4px; }
.wrap[data-phase="live"] #publicPanel #publicArea:not(:has(.card)) { display: none; }

/* 手牌：扇形（--r / --y / --fan-gap 由 app.js 按张数写内联） */
.wrap[data-phase="live"] #hand {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  overflow: visible;
  padding: 6px 6px 26px;
  min-height: 0;
}
.wrap[data-phase="live"] #hand .card {
  width: 120px;
  flex: 0 0 120px;
  margin-left: var(--fan-gap, 0px);
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px));
  transform-origin: 50% 130%;
  transition: transform .16s, border-color .14s, box-shadow .14s;
}
.wrap[data-phase="live"] #hand .card:first-child { margin-left: 0; }
.wrap[data-phase="live"] #hand .card .card-art { height: 156px; }
.wrap[data-phase="live"] #hand .card:hover {
  transform: rotate(var(--r, 0deg)) translateY(calc(var(--y, 0px) - 12px)) scale(1.03);
  z-index: 5;
}
.wrap[data-phase="live"] #hand > .meta { align-self: center; }

/* 手牌分页条：只在 Live 且超过 8 张时出现，浮在手牌下沿 */
.hand-pager { display: none; }
.wrap[data-phase="live"] .hand-pager:not([hidden]) {
  grid-area: hand;
  align-self: end;
  justify-self: center;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  margin-bottom: 2px;
  border-radius: 999px;
  background: rgba(10, 8, 14, .74);
  border: 1px solid var(--line);
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
}
.hand-arrow {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  line-height: 1;
  box-shadow: none;
}
.hand-arrow:hover:not(:disabled) { border-color: var(--gold); }
.hand-arrow:disabled { opacity: .25; cursor: default; }
.hand-page-info { letter-spacing: .02em; }
/* 有分页条时给手牌多留一点下沿，免得压住卡名 */
.wrap[data-phase="live"] #hand.has-pager { padding-bottom: 46px; }

/* 技能坞：浮在舞台底部（不占栅格行，开关时不挤队伍/手牌） */
.skill-dock { display: none; }
.wrap[data-phase="live"] .table { position: relative; }
.wrap[data-phase="live"] .skill-dock:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  min-height: 78px;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid rgba(232, 196, 122, .32);
  background:
    linear-gradient(120deg, rgba(232, 196, 122, .09), rgba(227, 93, 138, .06) 55%, rgba(155, 140, 240, .08)),
    var(--panel);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  animation: dockIn .18s ease-out both;
}
/* 坞盖住舞台底部：把台上的出牌往上让出位置（只动卡片，不动页面栅格） */
.wrap[data-phase="live"] .stage-played { transition: padding-bottom .18s ease; }
.wrap[data-phase="live"].dock-open .stage-played { padding-bottom: 108px; }
@keyframes dockIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.dock-char { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.dock-art {
  width: 54px;
  height: 64px;
  border-radius: 9px;
  overflow: hidden;
  background: #0e0c14;
  border: 1px solid var(--line);
}
.dock-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.dock-meta { min-width: 100px; }
.dock-name { display: flex; align-items: baseline; gap: 6px; font-size: 14px; font-weight: 700; }
.dock-band { font-size: 10.5px; font-weight: 400; color: var(--muted); }
.dock-state { margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.dock-skills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.dock-skill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  color: #ece3ff;
  background: linear-gradient(120deg, rgba(155, 140, 240, .28), rgba(227, 93, 138, .18));
  border: 1px solid rgba(155, 140, 240, .5);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.dock-skill:hover {
  border-color: var(--gold);
  box-shadow: 0 6px 18px rgba(232, 196, 122, .2);
}
.dock-skill .ds-count { font-size: 11px; color: var(--gold); }
.dock-skill .ds-reason { font-size: 10.5px; color: #a99cb8; }
.dock-skill.off {
  background: rgba(255, 255, 255, .04);
  border-color: var(--line);
  color: #7f7489;
  box-shadow: none;
  cursor: not-allowed;
}
.dock-skill.off .ds-count { color: #7f7489; }
.dock-close {
  flex: 0 0 auto;
  margin-left: auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  box-shadow: none;
}
.dock-close:hover { color: var(--ink); border-color: var(--gold); }

/* 角色行右侧的 ⚡：有可用技能时点亮，点开就是技能坞 */
.wrap[data-phase="live"] .char-card .skill-bolt {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  color: #6f6479;
  font-size: 11px;
  line-height: 1;
}
.wrap[data-phase="live"] .char-card .skill-bolt.on {
  color: #2a1a24;
  border-color: transparent;
  background: linear-gradient(120deg, #f3d7a0, #e8c47a);
  box-shadow: 0 0 16px rgba(232, 196, 122, .4);
}
.wrap[data-phase="live"] .char-card.is-dock-open {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold) inset, 0 12px 26px rgba(232, 196, 122, .12);
}

/* ---------------- 转场：0ms 板块收带 → 180ms 手牌入扇 → 200ms 灯亮 → 700ms 到位 ---------------- */
@keyframes liveStripIn {
  from { opacity: .25; transform: translateY(-14px) scaleX(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes liveStageIn {
  0%   { opacity: 0; transform: translateY(12px) scale(.985); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes liveSpotOn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes liveFanIn {
  from { opacity: 0; transform: rotate(0deg) translateY(72px) scale(.92); }
  to   { opacity: 1; transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px)); }
}
#playArea.phase-enter #publicPanel {
  animation: liveStripIn .46s cubic-bezier(.2, .7, .2, 1) both;
}
#playArea.phase-enter #liveStage {
  animation: liveStageIn .5s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: .2s;
}
#playArea.phase-enter .stage-spot {
  animation: liveSpotOn .5s ease-out both;
  animation-delay: .2s;
}
#playArea.phase-enter #hand .card {
  animation: liveFanIn .48s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(.18s + var(--i, 0) * 18ms);
}

/* ---------------- Live 断点：单独写，不动公共 .table 规则 ---------------- */
@media (max-width: 1400px) {
  .wrap[data-phase="live"] .table {
    grid-template-columns: minmax(200px, 226px) minmax(0, 1fr) minmax(214px, 250px);
  }
  .wrap[data-phase="live"] .stage-played .card { width: 104px; flex-basis: 104px; }
  .wrap[data-phase="live"] .stage-played .card .card-art { height: 132px; }
  .wrap[data-phase="live"] #hand .card { width: 112px; flex-basis: 112px; }
  .wrap[data-phase="live"] #hand .card .card-art { height: 146px; }
}

@media (max-width: 1180px) {
  .wrap[data-phase="live"] .table {
    grid-template-columns: 190px minmax(0, 1fr) 214px;
  }
  .wrap[data-phase="live"] .char-card { grid-template-columns: 44px minmax(0, 1fr); }
  .wrap[data-phase="live"] .char-card .char-art { width: 44px; height: 54px; }
  .wrap[data-phase="live"] .stage-played .card { width: 94px; flex-basis: 94px; }
  .wrap[data-phase="live"] .stage-played .card .card-art { height: 118px; }
}

/* 窄屏（≤980）：单列，从上到下 = 舞台 / 手牌 / 队伍 / 资源 / 板块 / 对手日志 */
@media (max-width: 980px) {
  .wrap[data-phase="live"] .table {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 10px;
  }
  .wrap[data-phase="live"] #liveStage:not([hidden]) { min-height: 300px; order: 1; }
  .wrap[data-phase="live"] #skillDock { order: 2; }
  .wrap[data-phase="live"] #hand { order: 3; }
  .wrap[data-phase="live"] .hand-pager { order: 3; align-self: center; }
  .wrap[data-phase="live"] .h-team { order: 4; }
  .wrap[data-phase="live"] #team { order: 5; max-height: none; }
  .wrap[data-phase="live"] #myStats { order: 6; }
  .wrap[data-phase="live"] #myEncounters { order: 7; }
  .wrap[data-phase="live"] #publicPanel { order: 8; overflow: visible; }
  .wrap[data-phase="live"] .col-right { order: 9; }
}

/* 矮屏：队伍行和舞台卡再压一档 */
@media (max-height: 820px) {
  .wrap[data-phase="live"] .char-card {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 3px 6px;
    row-gap: 1px;
  }
  .wrap[data-phase="live"] .char-card .char-art { width: 36px; height: 44px; }
  .wrap[data-phase="live"] .char-card .char-name-row .name { font-size: 11.5px; }
  .wrap[data-phase="live"] .char-card .pill { font-size: 9.5px; padding: 0 4px; }
  .wrap[data-phase="live"] .char-card .skill-btn { font-size: 9.5px; padding: 0 6px; }
  .wrap[data-phase="live"] .team-row {
    gap: 5px;
    padding: 6px;
    max-height: 44vh;
  }
  .wrap[data-phase="live"] .char-card { padding: 3px 6px; column-gap: 6px; }
  .wrap[data-phase="live"] #myStats { padding: 6px 8px; gap: 4px; }
  .wrap[data-phase="live"] #myStats .res { padding: 3px 8px; font-size: 11px; }
  .wrap[data-phase="live"] #myStats .res img { width: 15px; height: 15px; }
  .wrap[data-phase="live"] .stage-played .card { width: 100px; flex-basis: 100px; }
  .wrap[data-phase="live"] .stage-played .card .card-art { height: 126px; }
  .wrap[data-phase="live"] #hand .card { width: 88px; flex-basis: 88px; }
  .wrap[data-phase="live"] #hand .card .card-art { height: 112px; }
  .wrap[data-phase="live"] #hand .card .card-name { font-size: 10.5px; }
  .wrap[data-phase="live"] #hand .card .card-band { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #playArea.phase-enter #publicPanel,
  #playArea.phase-enter #liveStage,
  #playArea.phase-enter .stage-spot,
  #playArea.phase-enter #hand .card { animation: none; }
}


/* ================================================================
   v0.8.2 Step 3 · 混音结算回放面板
   ================================================================ */
.mix-panel {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 6, 12, .62);
  backdrop-filter: blur(2px);
  overflow-y: auto;
}
.mix-panel.hidden { display: none; }
.mix-box {
  width: min(760px, 94vw);
  border-radius: 18px;
  border: 1px solid rgba(227, 93, 138, .35);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(155, 140, 240, .18), transparent 60%),
    linear-gradient(180deg, #241d33, #17131f);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  padding: 18px 20px;
  animation: mixIn .2s ease-out both;
}
@keyframes mixIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.mix-head { display: flex; gap: 14px; align-items: center; }
.mix-art {
  width: 86px;
  height: 112px;
  border-radius: 9px;
  overflow: hidden;
  background: #0e0c14;
  flex: 0 0 auto;
  border: 1px solid var(--line);
}
.mix-art img { width: 100%; height: 100%; object-fit: contain; }
.mix-kicker { font-size: 11px; letter-spacing: .16em; color: #ff9db8; }
.mix-name { font-size: 24px; font-weight: 800; margin-top: 2px; }
.mix-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.mix-effect {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.6;
  color: #ded5ee;
}
.mix-hint {
  margin-top: 12px;
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(91, 140, 255, .16), rgba(155, 140, 240, .12));
  border: 1px solid rgba(120, 150, 255, .4);
}
.mix-hint-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #4fd6c8, #3b8fd8);
  box-shadow: 0 4px 12px rgba(60, 160, 220, .35);
}
.mix-hint-icon img { width: 20px; height: 20px; object-fit: contain; filter: brightness(0) invert(1); }
.mix-hint-body { min-width: 0; }
.mix-hint-title { font-weight: 700; font-size: 13px; }
.mix-hint-rule { margin-top: 4px; font-size: 12px; color: #d8d0ea; }
.mix-hint-result { margin-top: 6px; font-size: 12px; color: #f3d7a0; font-weight: 600; }
.mix-dest { margin-top: 14px; font-size: 12px; }
.mix-dest-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 2px;
  border-top: 1px dashed rgba(255, 255, 255, .08);
}
.mix-tag { padding: 1px 9px; border-radius: 999px; font-size: 10.5px; border: 1px solid var(--line); }
.mix-tag.on { color: #2a1a24; background: linear-gradient(120deg, #f3d7a0, #e8c47a); border-color: transparent; }
.mix-tag.off { color: #a99cb8; }
.mix-dest-name { flex: 1 1 auto; }
.mix-dest-to { color: var(--muted); }
.mix-dest-note { font-size: 11.5px; color: #a99cb8; padding: 2px 0 0 2px; }
.mix-foot { margin-top: 16px; display: flex; align-items: center; gap: 12px; }
.mix-note { flex: 1 1 auto; font-size: 10.5px; color: #6f6479; line-height: 1.5; }
.mix-close { padding: 9px 26px; border-radius: 999px; background: linear-gradient(120deg, #f06a97, #b45bd8); }

/* ================================================================
   v0.8.4 轮抽界面重做
   效果图：docs/mockups/轮抽优化-方案A-展柜.png
   ================================================================ */
#draftPanel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
  padding: 14px 20px;
  background:
    radial-gradient(1000px 460px at 42% -20%, rgba(155, 140, 240, .16), transparent 70%),
    linear-gradient(180deg, #201a2c, #17131f 72%);
}
.draft-head { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.draft-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--muted);
}
#draftTitle { color: var(--ink); font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.draft-round { font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }
.draft-hint { font-size: 11px; color: #7f7489; }
.draft-status {
  margin-left: auto;
  padding: 3px 13px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  color: #2a1a24;
  background: linear-gradient(120deg, #f3d7a0, #e8c47a);
  box-shadow: 0 4px 14px rgba(232, 196, 122, .3);
  white-space: nowrap;
}
.draft-status.wait {
  color: var(--muted);
  font-weight: 600;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  box-shadow: none;
}
.draft-status.budget {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  font-size: 13px;
  color: #ece3ff;
  font-weight: 700;
  background: rgba(155, 140, 240, .18);
  border: 1px solid rgba(155, 140, 240, .4);
  box-shadow: none;
}
.draft-status.budget .budget-item { display: inline-flex; align-items: baseline; gap: 2px; }
.draft-status.budget .budget-item b { font-size: 20px; line-height: 1; letter-spacing: .02em; }
.draft-status.budget .budget-cap { font-size: 11px; color: #b9aef0; }
.draft-status.budget .budget-sep { color: #6f6488; }
.draft-status.budget .budget-bar {
  width: 66px;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .1);
}
.draft-status.budget .budget-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #b9a6ff, #8e7bf0);
  transition: width .2s ease;
}
.draft-status.budget.over .budget-bar i { background: linear-gradient(90deg, #ff8fb0, #e35d8a); }
.draft-status.over {
  color: #ffb6ca;
  background: rgba(227, 93, 138, .2);
  border-color: rgba(227, 93, 138, .5);
}

.draft-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 318px;
  gap: 14px 20px;
}
#draftPanel.team-mode .draft-body { grid-template-columns: minmax(0, 1fr); }
#draftPanel.team-mode .draft-aside { display: none; }

/* ---- 卡池 ---- */
#draftPool.draft-grid {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 14px 12px;
  max-height: none;
  overflow: visible;
  padding: 0;
  min-height: 0;
  position: relative;
}
#draftPool::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1200px;
  height: 620px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232, 196, 122, .10), rgba(227, 93, 138, .04) 55%, transparent 74%);
  pointer-events: none;
}
.draft-card {
  position: relative;
  z-index: 1;
  width: 210px;
  height: 310px;
  padding: 7px 7px 0;
  border-radius: 15px;
  background: linear-gradient(180deg, #241e32, #171220);
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .55);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform .16s, border-color .16s, box-shadow .16s;
}
.draft-card:hover {
  transform: translateY(-10px);
  border-color: rgba(232, 196, 122, .75);
  box-shadow: 0 26px 46px rgba(0, 0, 0, .6), 0 0 0 1px rgba(232, 196, 122, .25) inset;
}
.draft-card.disabled { opacity: .55; cursor: default; }
.draft-card.disabled:hover {
  transform: none;
  border-color: rgba(255, 255, 255, .13);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .55);
}
.draft-card.is-picked {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(232, 196, 122, .55) inset, 0 18px 34px rgba(0, 0, 0, .55);
}
.draft-art {
  width: 100%;
  height: 248px;
  border-radius: 9px;
  overflow: hidden;
  background: #0e0c14;
}
.draft-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.draft-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 800;
  padding: 8px 2px 0;
}
.draft-name .nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draft-sub { font-size: 11px; color: var(--muted); padding: 2px 2px 9px; display: flex; align-items: center; gap: 5px; }
.band-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.sub-ico { width: 12px; height: 12px; object-fit: contain; opacity: .75; margin-left: 4px; }
.draft-cost {
  position: absolute;
  top: 11px;
  right: 11px;          /* 从左上挪到右上，不再压住卡面左侧的竖排名字 */
  left: auto;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  color: #2a1a24;
  background: linear-gradient(120deg, #f3d7a0, #e8c47a);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
}
.draft-cost .cost-ico {
  width: 13px;
  height: 13px;
  object-fit: contain;
  filter: brightness(0) saturate(100%);   /* 白描图标压成深色，压在金色底上 */
  opacity: .78;
}
.draft-check {
  /* 勾选跟在名字后面，不再压住卡面 */
  position: static;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  color: #2a1a24;
  background: linear-gradient(120deg, #f3d7a0, #e8c47a);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .4);
}

/* ---- 右栏 ---- */
.draft-aside { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.draft-aside .band-shelf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
}
.draft-aside .shelf-item { background: transparent; border: 0; padding: 0; flex-direction: row; gap: 7px; }
.draft-aside .shelf-cover { width: 30px; height: 30px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset; }
.draft-aside .shelf-cover::after { margin: 11px; width: 8px; height: 8px; }
.draft-aside .shelf-name { font-size: 10.5px; color: #cbbfe0; }
.rail-title {
  grid-column: 1 / -1;
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--gold);
}
.rail-title.them { color: #b5a7e8; }
.draft-rail { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.rail-block {
  padding: 11px 13px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
}
.rail-meta { font-size: 10.5px; color: #8d8299; }
.rail-hint {
  margin-top: auto;
  padding: 10px 13px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, .12);
  font-size: 10.5px;
  color: #8d8299;
  line-height: 1.8;
}
.rail-hint .rail-title { margin-bottom: 2px; }

/* ---- 组队阶段底部条 ---- */
.draft-team-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
}
.draft-team-bar.hidden { display: none; }
.tbar-label { font-size: 10px; letter-spacing: .16em; color: var(--gold); white-space: nowrap; }
.tbar-chips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 auto; min-width: 0; }
.tbar-cost { font-size: 12.5px; font-weight: 700; color: #d9cdf8; white-space: nowrap; }
#confirmTeam { white-space: nowrap; }

/* ---- 断点 ---- */
@media (max-width: 1500px) {
  .draft-body { grid-template-columns: minmax(0, 1fr) 300px; }
  .draft-card { width: 190px; height: 286px; }
  .draft-art { height: 228px; }
  .draft-name { font-size: 14px; }
}
@media (max-height: 820px) {
  .draft-card { width: 180px; height: 272px; }
  .draft-art { height: 214px; }
  .draft-name { font-size: 13.5px; padding-top: 6px; }
}
@media (max-width: 1180px) {
  .draft-body { grid-template-columns: minmax(0, 1fr) 270px; gap: 12px; }
  .draft-card { width: 180px; height: 272px; }
  .draft-art { height: 214px; }
}
@media (max-width: 980px) {
  #draftPanel { height: auto; padding: 12px 14px; }
  .draft-body { display: flex; flex-direction: column; }
  .draft-aside { display: grid; grid-template-columns: 1fr; }
  .draft-card { width: 150px; height: 232px; }
  .draft-art { height: 178px; }
  .draft-name { font-size: 12.5px; }
}

/* ================================================================
   v0.8.5 动效 A 批：弹窗 / Toast / 日志 / 阶段切换
   ================================================================ */
:root {
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-scene: 420ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

/* ---- 弹窗：背景淡入 + 弹框上浮（关闭反向） ---- */
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes modalBoxIn {
  from { opacity: 0; transform: translateY(14px) scale(.975); }
  to   { opacity: 1; transform: none; }
}
@keyframes modalBoxOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(8px) scale(.985); }
}
.modal.entering { animation: modalFadeIn var(--dur-fast) var(--ease-out) both; }
.modal.entering .modal-box { animation: modalBoxIn 200ms var(--ease-out) both; }
.modal.closing {
  animation: modalFadeOut 140ms ease-in both;
  pointer-events: none;
}
.modal.closing .modal-box { animation: modalBoxOut 140ms ease-in both; }

/* ---- Toast：淡入上浮，2 秒后淡出 ---- */
.toast {
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.toast.in { opacity: 1; transform: translate(-50%, 0); }

/* ---- 日志：只让新行淡入 ---- */
@keyframes logIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
#log .entry.log-in { animation: logIn 180ms var(--ease-out) both; }

/* ---- 阶段切换（非 Live）：三栏依次淡入上浮 ---- */
@keyframes phaseRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
#playArea.phase-enter-work .col { animation: phaseRise 260ms var(--ease-out) both; }
#playArea.phase-enter-work .col-left { animation-delay: 0ms; }
#playArea.phase-enter-work .col-mid { animation-delay: 70ms; }
#playArea.phase-enter-work .col-right { animation-delay: 140ms; }
#playArea.phase-enter-preparation .col,
#playArea.phase-enter-settlement .col { animation: phaseRise 240ms var(--ease-out) both; }
#playArea.phase-enter-preparation .col-mid,
#playArea.phase-enter-settlement .col-mid { animation-delay: 60ms; }
#playArea.phase-enter-preparation .col-right,
#playArea.phase-enter-settlement .col-right { animation-delay: 110ms; }

/* 系统开了「减少动效」：以上全部关掉 */
@media (prefers-reduced-motion: reduce) {
  .modal.entering,
  .modal.closing,
  .modal.entering .modal-box,
  .modal.closing .modal-box,
  #log .entry.log-in,
  #playArea.phase-enter-work .col,
  #playArea.phase-enter-preparation .col,
  #playArea.phase-enter-settlement .col { animation: none; }
  .toast { transition: none; }
}

/* ================================================================
   v0.8.6 轮抽选人动效
   ================================================================ */
.draft-card.is-picking {
  z-index: 5;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(232, 196, 122, .5) inset, 0 22px 44px rgba(0, 0, 0, .6);
  transform: translateY(-10px) scale(1.03);
}
.draft-card.is-picking-out {
  opacity: 0;
  transform: translateY(-16px) scale(.9);
  transition: opacity 160ms ease, transform 160ms ease;
}
.draft-fly {
  position: fixed;
  z-index: 210;
  pointer-events: none;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(232, 196, 122, .7);
  background: #0e0c14;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .6);
  will-change: transform, opacity;
}
.draft-fly img { width: 100%; height: 100%; object-fit: contain; display: block; }
@keyframes poolIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
#draftPool.pool-refresh .draft-card {
  animation: poolIn .28s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 20ms);
}
@keyframes chipPop {
  0%   { transform: scale(.6); opacity: 0; }
  60%  { transform: scale(1.14); opacity: 1; }
  100% { transform: none; }
}
.picked-chip.chip-pop { animation: chipPop .34s var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .draft-card.is-picking,
  .draft-card.is-picking-out { transition: none; }
  #draftPool.pool-refresh .draft-card,
  .picked-chip.chip-pop { animation: none; }
}

/* ================================================================
   v0.8.7 开始界面：选乐队封套 + 白色图标
   ================================================================ */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.eyebrow-ico { width: 13px; height: 13px; opacity: .8; }
.setup { gap: 10px; }
.setup label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--line);
  color: #cbbfe0;
  font-size: 12px;
}
.setup .setup-ico { width: 14px; height: 14px; opacity: .7; }
.setup select {
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12.5px;
}
.band-setup { flex-direction: column; align-items: center; gap: 12px; width: 100%; margin-top: 14px; }
.start-center { width: 100%; max-width: 1100px; margin: auto 0; }
.band-setup-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: min(var(--band-w, 980px), 100%);
  margin: 0 auto;
  text-align: left;
}
.band-setup-title {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #e8ddf7;
}
.band-setup-title::before {
  content: "";
  width: 3px;
  height: 12px;
  margin-right: 8px;
  border-radius: 2px;
  background: linear-gradient(180deg, #f3d7a0, #e35d8a);
}
.band-setup-sub { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.band-pick-count {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 999px;
  color: var(--gold);
  background: rgba(232, 196, 122, .12);
  border: 1px solid rgba(232, 196, 122, .35);
  font-weight: 600;
}
.band-pick-count:empty { display: none; }
#startBtn { display: inline-flex; align-items: center; gap: 10px; }
#startBtn .btn-play { width: 18px; height: 18px; opacity: .95; }

/* ---------------- 资料面板（codex.js） ---------------- */
/* 资料内容多，弹窗要宽一些；只在资料打开时加 .wide，不影响其它弹窗 */
#modal.wide .modal-box { width: min(1060px, 94vw); }
#modal.wide #modalBody { max-height: 72vh; }
.cdx-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.cdx-tab {
  font-size: 12px; padding: 5px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
}
.cdx-tab.on {
  color: #1d1526; font-weight: 800; border-color: transparent;
  background: linear-gradient(120deg, #f3d7a0, #e8c47a);
}
.cdx-section {
  margin: 14px 0 8px; font-size: 11px; letter-spacing: .16em; color: #9d92b0;
}
.cdx-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.cdx-term {
  display: flex; gap: 9px; padding: 9px 10px; min-height: 88px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07); border-radius: 11px;
}
.cdx-term-ico {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(155, 140, 240, .16); border: 1px solid rgba(155, 140, 240, .3);
}
.cdx-term-ico img { width: 20px; height: 20px; object-fit: contain; }
.cdx-term-name { font-size: 12.5px; font-weight: 800; }
.cdx-term-desc { font-size: 11px; line-height: 1.5; color: #b6abca; margin-top: 2px; }
.cdx-chip {
  display: inline-block; margin-top: 5px; font-size: 9.5px; padding: 1px 6px;
  border-radius: 999px; color: #cfc3ea; border: 1px solid rgba(255, 255, 255, .14);
}
.cdx-tokens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cdx-token {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07); border-radius: 11px;
}
.cdx-token img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.cdx-token-name { font-size: 12px; font-weight: 800; width: 70px; flex: 0 0 auto; }
.cdx-token-desc { font-size: 11px; color: #b6abca; line-height: 1.45; }
.cdx-words { display: flex; flex-wrap: wrap; gap: 7px; }
.cdx-word {
  font-size: 11px; padding: 5px 11px; border-radius: 999px;
  background: rgba(155, 140, 240, .14); border: 1px solid rgba(155, 140, 240, .28);
  color: #d9cdf8;
}
.cdx-word b { color: #fff; margin-right: 5px; }
.cdx-mix { display: flex; flex-direction: column; gap: 5px; }
.cdx-mix-row {
  display: flex; align-items: center; gap: 12px; padding: 5px 10px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07); border-radius: 11px;
}
/* 统一白底垫片（不放描边/投影，视觉上更干净） */
.cdx-logo-plate {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 8px; padding: 4px 6px;
  flex: 0 0 auto;
}
.cdx-logo-plate.wide { padding: 5px 8px; }
.cdx-mix-logo {
  width: 96px; height: 34px; object-fit: contain; display: block;
}
.cdx-mix-band { width: 150px; flex: 0 0 150px; font-size: 13px; font-weight: 800; }
.cdx-mix-rule { font-size: 11px; color: #b6abca; line-height: 1.5; }
.cdx-note { margin-top: 10px; font-size: 10.5px; color: #8b7fa3; line-height: 1.6; }
.cdx-bands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.cdx-band {
  padding: 10px 12px; background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07); border-radius: 11px;
}
.cdx-band-logo {
  height: 46px; max-width: 230px; object-fit: contain; display: block;
}
.cdx-band-name { font-size: 11px; color: #9d92b0; margin: 4px 0 5px; }
.cdx-band-line { font-size: 11px; line-height: 1.5; color: #b6abca; margin-top: 3px; }
.cdx-advice { color: #cfc3ea; }

@media (max-width: 900px) {
  .cdx-terms { grid-template-columns: 1fr; }
  .cdx-tokens, .cdx-bands { grid-template-columns: 1fr; }
}

/* 乐队资料弹窗顶部的 logo */
.band-info-logo {
  display: inline-block; margin: 0 0 10px; padding: 5px 8px; border-radius: 8px;
  background: #fff;
}
.band-info-logo img {
  height: 40px; max-width: 240px; object-fit: contain; display: block;
}

/* 板块上的角色可以点开看详情 */
.chip-occ.clickable { cursor: pointer; border-bottom: 1px dashed rgba(255,255,255,.35); }
/* 特殊板块卡片上「站着谁」的一行 */
.occ-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chip-occ.clickable:hover { color: #fff; background: rgba(155,140,240,.35); }

.dock-fade { display: none; }

/* 平板（≤980）：唱片墙 / 飘过的卡是装饰层，别让它们撑出横向滚动条 */
@media (max-width: 980px) {
  /* 窄屏改成整页（html）滚动：body 一旦 overflow:auto 就成了内层滚动容器，
     页头的 position:sticky 会失效，tab 切换时的 scrollTo 也滚不动 */
  html { overflow-x: hidden; }
  body { height: auto; min-height: 100dvh; overflow: visible; }
}

/* ================================================================
   v0.8.14 手机适配（≤720px）
   ----------------------------------------------------------------
   桌面布局一行不动，下面全部只在窄屏生效：
   1) 开始界面：唱片封套两列、整页可上下滚动、按钮拉满；
   2) 游戏界面：底栏开关收成一行不盖正文、Live 队伍卡两列；
   3) 照顾刘海屏：底部留 safe-area。
   ================================================================ */
@media (max-width: 720px) {
  /* ---------- 开始界面 ---------- */
  /* 关键：flex 子项默认 min-width:auto，会被卡片的最小内容宽度撑开 */
  .start-center { min-width: 0; padding: 16px 14px calc(88px + env(safe-area-inset-bottom)); }
  .band-setup, .band-grid { min-width: 0; max-width: 100%; }
  .eyebrow { margin-bottom: 14px; padding: 4px 11px; font-size: 10px; letter-spacing: .2em; }
  .eyebrow-ico { width: 12px; height: 12px; }
  .start-center h1 { font-size: clamp(32px, 10.5vw, 46px); letter-spacing: .1em; }
  .lead { font-size: 12.5px; margin: 8px 0 16px; }
  .setup { flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  .setup label { padding: 5px 10px 5px 9px; }
  .band-setup { gap: 10px; margin-top: 4px; }
  .band-setup-head { flex-wrap: wrap; gap: 2px 8px; }
  .band-setup-sub { font-size: 10.5px; }
  /* 手机：三列，10 支乐队 4 行就能放完，开始按钮不用滚很远 */
  .band-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .band-card .band-logo { left: 11px; bottom: 30px; max-height: 34px; }
  .band-card .band-name { left: 11px; bottom: 10px; font-size: 10px; }
  #startBtn { width: min(100%, 340px); justify-content: center; }
  .version { margin-top: 14px; font-size: 10.5px; }

  /* ---------- 游戏界面 ---------- */
  /* 装饰层（唱片墙 / 飘过的卡）比屏幕宽，别让它撑出横向滚动条 */
  html { overflow-x: hidden; }
  body { overflow-x: clip; }
  /* 整页滚动（≤980 的规则已经设过，这里保持一致性） */
  body { height: auto; min-height: 100dvh; overflow: visible; }
  /* flex:0 0 auto —— 否则 body 是 flex 容器时页头会被压扁，内容压到下面 */
  header { flex: 0 0 auto; min-height: 0; padding: 6px 10px; gap: 6px 8px; }
  header button { padding: 5px 9px; font-size: 11.5px; }
  header .chip { padding: 3px 9px; font-size: 11px; }
  /* 这个 spacer 会把按钮顶到下一行，手机上省掉，页头从 3 行缩到 2 行 */
  header .spacer { display: none; }
  /* 信息条自己横滑（不换行），把「你的回合」和按钮留在同一行两排里 */
  header .chips { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 76px); }
  header .turn-badge { flex: 0 0 auto; }
  header .chip { padding: 2px 8px; flex: 0 0 auto; white-space: nowrap; }
  .wrap { padding: 8px 8px calc(70px + env(safe-area-inset-bottom)); }
  .panel { padding: 9px 10px; }
  /* Live 阶段队伍卡：两列，不要再挤成一竖条 */
  .wrap[data-phase="live"] .team-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
    overflow: visible;
  }
  /* 出牌位：4 个空位在 390px 下会顶出右边，允许压缩 */
  .wrap[data-phase="live"] .stage-played { gap: 6px; padding: 8px 6px 14px; }
  .wrap[data-phase="live"] .stage-played .card,
  .wrap[data-phase="live"] .stage-slot-empty { min-width: 0; }

  /* 底部开关后面垫一层渐隐（#dockFade），正文从下面滚过时不会和按钮文字糊在一起 */
  .dock-fade {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(56px + env(safe-area-inset-bottom));
    z-index: 140;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(16, 13, 23, 0), rgba(16, 13, 23, .96) 52%, rgba(16, 13, 23, .99));
  }

  /* ---------- 右下角开关：收成一行，别盖住正文 ---------- */
  .fx-toggle,
  .dev-entry {
    bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 5px 8px;
    font-size: 10.5px;
    opacity: .92;
    background: rgba(16, 13, 23, .88);
    backdrop-filter: blur(6px);
  }
  #fxToggle { right: 8px; }
  #musicToggle { right: 64px; }
  #sfxToggle { right: 122px; }
  #sndBtn { right: 180px; }
  .dev-entry { left: 8px; right: auto; }
  .snd-panel { right: 8px; bottom: calc(48px + env(safe-area-inset-bottom)); }
}


/* ================================================================
   v0.8.15 手机页签：牌桌 / 手牌 / 队伍 / 日志
   ----------------------------------------------------------------
   * 只在 ≤720px、且已经进入对局（body.in-game）时出现；
   * 桌面 `.mtabs` 永久 display:none，其它样式也都写在媒体查询里，桌面不受影响；
   * 一次只显示一组内容，Live 里的复杂栅格在手机上拍平成一列。
   ================================================================ */
.mtabs {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 146;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(14, 11, 20, .97);
  border-top: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(12px);
}
.mtabs button {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 4px 8px;
  background: none;
  border: 0;
  border-radius: 0;
  color: #9d92b0;
  font-size: 10.5px;
  letter-spacing: .04em;
}
.mtabs button img { width: 18px; height: 18px; opacity: .55; }
.mtabs button.on { color: var(--gold); }
.mtabs button.on img { opacity: 1; }

@media (max-width: 720px) {
  body.in-game:not(.drafting) .mtabs { display: flex; }
  /* 回主菜单时开始页在最前面，页签要让开（开始页 z-index 比页签低） */
  #startScreen:not(.hidden) ~ .mtabs { display: none !important; }

  /* 底部「页签 + 开关」占位 */
  body.in-game .wrap { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
  body.in-game:not(.drafting) .fx-toggle,
  body.in-game:not(.drafting) .dev-entry { bottom: calc(58px + env(safe-area-inset-bottom)); }
  body.in-game:not(.drafting) .snd-panel { bottom: calc(96px + env(safe-area-inset-bottom)); }
  body.in-game:not(.drafting) .dock-fade { height: calc(100px + env(safe-area-inset-bottom)); }

  /* 轮抽区有一块 1200px 宽的装饰光晕（.draft-grid::before），
     在手机上会把整页撑宽 → 手机浏览器"缩到整页" → 画面只占左半边。这里裁掉。 */
  #draftPool.draft-grid { overflow-x: hidden; }

  /* Live 的三栏/栅格在手机上一律拍平成一列 */
  .wrap[data-phase="live"] .table { display: block; height: auto; }
  .wrap[data-phase="live"] #selfPanel { display: block; }

  /* 先把所有内容块藏起来，再按页签放出（!important 要压过 Live/桌面规则） */
  #liveStage, #publicPanel, #pilesPanel, #selfPanel, #oppPanel, .log-panel,
  .panel-head, #myStats, #myEncounters, .h-team, #team,
  .h-hand, #hand, #handPager, .h-played, #played,
  .h-area, #playerArea, .h-stress, #stressCardsRow, .h-locked, #locked {
    display: none !important;
  }

  /* 每栏只留当前页签需要的那一列，避免空栏留出多余间距 */
  body[data-mtab="table"] .wrap:not([data-phase="live"]) .col-mid,
  body[data-mtab="table"] .wrap:not([data-phase="live"]) .col-right,
  body[data-mtab="table"] .wrap[data-phase="live"] .col-left,
  body[data-mtab="table"] .wrap[data-phase="live"] .col-right,
  body[data-mtab="hand"] .col-left,
  body[data-mtab="hand"] .col-right,
  body[data-mtab="team"] .col-left,
  body[data-mtab="team"] .col-right,
  body[data-mtab="log"] .col-left,
  body[data-mtab="log"] .col-mid { display: none !important; }

  /* —— 牌桌：任务板块 / 赞助商 / 公共区域 / 牌堆 —— */
  body[data-mtab="table"] .wrap:not([data-phase="live"]) #publicPanel,
  body[data-mtab="table"] .wrap:not([data-phase="live"]) #pilesPanel { display: block !important; }
  /* —— 牌桌（Live）：舞台 + 队伍（点角色开技能） —— */
  body[data-mtab="table"] .wrap[data-phase="live"] #liveStage:not([hidden]) { display: flex !important; }
  body[data-mtab="table"] .wrap[data-phase="live"] #selfPanel { display: block !important; }
  body[data-mtab="table"] .wrap[data-phase="live"] .h-team { display: flex !important; }

  /* —— 手牌 —— */
  body[data-mtab="hand"] #selfPanel { display: block !important; }
  body[data-mtab="hand"] .wrap[data-phase="live"] #liveStage:not([hidden]) { display: flex !important; }
  body[data-mtab="hand"] .h-hand { display: block !important; }
  body[data-mtab="hand"] #hand { display: flex !important; scrollbar-width: none; }
  body[data-mtab="hand"] #hand::-webkit-scrollbar { display: none; }
  body[data-mtab="hand"] #handPager:not([hidden]) { display: flex !important; }
  body[data-mtab="hand"] .wrap:not([data-phase="live"]) .h-played { display: block !important; }
  body[data-mtab="hand"] .wrap:not([data-phase="live"]) #played { display: flex !important; }

  /* —— 队伍：资源 / 遭遇 / 角色 / 区域卡 / 坚定崩溃 / 锁定 —— */
  body[data-mtab="team"] #selfPanel { display: block !important; }
  body[data-mtab="team"] .panel-head { display: flex !important; }
  body[data-mtab="team"] #myStats { display: flex !important; }
  body[data-mtab="team"] #myEncounters { display: block !important; }
  body[data-mtab="team"] .h-team { display: block !important; }
  body[data-mtab="team"] .wrap[data-phase="live"] .h-team { display: flex !important; }
  /* 队伍卡固定两列（Live 里原本是一竖条，手机上太窄） */
  body[data-mtab="team"] #team,
  body[data-mtab="table"] .wrap[data-phase="live"] #team {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  body[data-mtab="team"] .h-area,
  body[data-mtab="team"] .h-stress,
  body[data-mtab="team"] .h-locked { display: block !important; }
  body[data-mtab="team"] #playerArea,
  body[data-mtab="team"] #stressCardsRow,
  body[data-mtab="team"] #locked { display: flex !important; }

  /* —— 日志：对手 + 实时结算 —— */
  body[data-mtab="log"] #oppPanel { display: block !important; }
  body[data-mtab="log"] .log-panel { display: flex !important; }

  /* Live 手牌：手机不扇形叠在一起，改成可左右滑的卡列 */
  body[data-mtab="hand"] .wrap[data-phase="live"] #hand {
    justify-content: flex-start;
    gap: 8px;
    padding: 6px 8px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  body[data-mtab="hand"] .wrap[data-phase="live"] #hand .card {
    width: 108px;
    flex: 0 0 108px;
    margin-left: 0 !important;
    transform: none !important;
  }
  body[data-mtab="hand"] .wrap[data-phase="live"] #hand .card:hover { transform: none !important; }
  body[data-mtab="hand"] .wrap[data-phase="live"] #hand .card .card-art { height: 148px; }
  body[data-mtab="hand"] .wrap[data-phase="live"] .stage-slot-empty { max-height: 150px; }

  /* Live 点角色弹出的技能坞：手机上固定在页签上方，别沉到页面底下 */
  .wrap[data-phase="live"] .skill-dock:not([hidden]) {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(58px + env(safe-area-inset-bottom));
    z-index: 152;  /* 盖住右下角那排开关，别和它们叠字 */
    max-height: 46vh;
    overflow-y: auto;
    border-radius: 14px;
    box-shadow: 0 -14px 44px rgba(0, 0, 0, .65);
  }
}

/* 资料 → 规则书 */
.cdx-rules { display: flex; flex-direction: column; gap: 12px; }
.cdx-rule-sec {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
  padding: 12px 14px;
}
.cdx-rule-h { font-size: 14px; font-weight: 700; color: #f3d7a0; margin-bottom: 6px; letter-spacing: .04em; }
.cdx-rule-list { margin: 0; padding-left: 20px; color: #d8cfe8; }
.cdx-rule-list li { margin: 5px 0; line-height: 1.7; }
.cdx-rule-list b { color: #fff; }

/* ================================================================
   v0.8.16 主界面：正式 logo / 在线人数 / 反馈入口
   ================================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.brand-logo {
  display: block;
  width: min(460px, 78vw);
  max-height: 32vh;
  object-fit: contain;
  margin: 0 auto 8px;
  filter: drop-shadow(0 12px 36px rgba(0, 0, 0, .6));
}

.start-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 2px 0 16px;
}

.online-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(110, 224, 160, .10);
  border: 1px solid rgba(110, 224, 160, .32);
  color: #bff0d2;
  font-size: 12px;
  white-space: nowrap;
}
.online-chip .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #5ee08a; box-shadow: 0 0 8px #5ee08a;
  animation: onlinePulse 2.4s ease-in-out infinite;
}
.online-chip b { color: #eafff2; font-size: 13px; }
@keyframes onlinePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  color: #cbbfe0;
  font-size: 12px;
  white-space: nowrap;
}
.feedback-btn:hover { border-color: rgba(232, 196, 122, .6); color: #fff; }

.fb-field { display: block; margin: 10px 0; }
.fb-field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.fb-textarea, .fb-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  padding: 10px 12px;
  font: inherit;
}
.fb-textarea { min-height: 120px; resize: vertical; }
.fb-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.fb-meta { font-size: 11px; color: #7d7290; margin-top: 8px; line-height: 1.6; }

/* 矮屏（笔记本 768/900）：logo 收一点，保证「开始游戏」不用滚动就能看到 */
@media (max-height: 1080px) {
  .brand-logo { width: min(380px, 62vw); max-height: 24vh; margin-bottom: 4px; }
  .start-meta { margin: 0 0 12px; }
  .lead { margin: 6px 0 12px; }
}
@media (max-height: 820px) {
  .brand-logo { width: min(300px, 50vw); max-height: 18vh; }
  .eyebrow { margin-bottom: 10px; }
}

/* 昵称输入（开始页） */
.name-setup { margin-bottom: 8px; }
.name-setup input {
  width: 150px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  padding: 4px 9px;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
}
.name-setup input::placeholder { color: #6f6479; }
@media (max-width: 720px) {
  .name-setup input { width: 118px; }
}

/* 手牌区的「做专辑」按钮 */
.hand-tool {
  margin-left: 10px;
  padding: 3px 11px;
  font: inherit;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid rgba(232, 196, 122, .45);
  background: rgba(232, 196, 122, .12);
  color: #f3d7a0;
  cursor: pointer;
}
.hand-tool:hover { background: rgba(232, 196, 122, .22); }

/* 强 AI 开关（开始页） */
.strong-setup { margin-bottom: 8px; justify-content: center; }
.strong-toggle {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  cursor: pointer;
  font-size: 12.5px;
  color: #cbbfe0;
  text-align: left;
}
.strong-toggle input { margin: 0; accent-color: #e8c47a; }
.strong-toggle small {
  display: block;
  color: #8f849f;
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
}

/* ================================================================
   v0.8.38 开始页：视觉重点回到 logo + 选乐队
   ================================================================ */
.start-tools {
  position: absolute;
  top: 16px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 3;
}
.start-tools .online-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .32);
  border: 1px solid rgba(255, 255, 255, .08);
  color: #a79bb4;
  font-size: 11.5px;
}
.start-tools .online-chip b { color: #f3d7a0; }
.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .28);
  color: #b8adc8;
  font-size: 11.5px;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.tool-btn:hover { color: #f3d7a0; border-color: rgba(232, 196, 122, .4); background: rgba(0, 0, 0, .4); }
.tool-btn .h-ico { width: 13px; height: 13px; opacity: .75; }

/* 乐队区：主视觉，压缩其它区块 */
.band-setup { margin: 6px 0 14px; }
.band-setup-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.band-setup-title { font-size: 13px; font-weight: 700; color: #f3d7a0; letter-spacing: .06em; }
.band-setup-sub { font-size: 11px; color: #7d7290; }
.inline-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 11.5px;
  color: #a79bb4;
}
.inline-select + .inline-select { margin-left: 4px; }
.inline-select select {
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  color: #e9e2f2;
  padding: 3px 7px;
  font: inherit;
  font-size: 12px;
}

/* 底部一行：昵称 / 登录 / 强 AI */
.start-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.foot-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .08);
}
.foot-name input {
  width: 130px;
  background: transparent;
  border: 0;
  outline: none;
  color: #f6f1e9;
  font: inherit;
  font-size: 12px;
}
.foot-name input::placeholder { color: #6f6479; }
.foot-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .28);
  color: #b8adc8;
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.foot-link:hover { color: #f3d7a0; }
.start-foot .strong-toggle {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px;
}
.start-foot .strong-toggle small { display: none; }

.foot-name .setup-ico { width: 14px; height: 14px; opacity: .7; flex: 0 0 auto; }

@media (max-width: 720px) {
  /* 手机上工具条从角落挪到顶部一行，避免压住标题 */
  .start-tools {
    position: static;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 2px;
  }
  .eyebrow { display: none; }
  .tool-btn span { display: none; }
  .tool-btn { padding: 7px 9px; }
  .start-tools .online-chip { padding: 4px 9px; }
  .start-tools .online-chip b { font-size: 12px; }
  .band-setup { margin-top: 2px; }
  .band-setup-head { justify-content: center; gap: 6px 8px; }
  .band-setup-sub { display: none; }
  .inline-select { margin-left: 0; }
  .start-foot { gap: 8px; }
  .foot-name input { width: 96px; }
  /* 给底部音效/音乐开关留出空间，别压住开始按钮 */
  .start-center { padding-bottom: 74px; }
  #startBtn { margin-top: 4px; }
}

/* ==================== 乐队导览 / 收藏 ==================== */
.start-extra { display: flex; gap: 8px; margin-top: 8px; justify-content: center; }
.start-extra .ghost {
  border: 1px solid var(--line); background: rgba(255, 255, 255, .05);
  color: var(--ink); border-radius: 999px; padding: 7px 16px; font-size: 13px; cursor: pointer;
}

/* ---- 导览列表 ---- */
.tour-screen, .col-screen {
  position: fixed; inset: 0; z-index: 170; overflow: auto;
  background: radial-gradient(900px 560px at 50% -10%, rgba(227, 93, 138, .14), transparent 60%),
              radial-gradient(700px 480px at 100% 100%, rgba(155, 140, 240, .1), transparent 60%),
              #12101a;
  padding: 18px 16px 40px;
}
.tour-screen.hidden, .col-screen.hidden { display: none; }
.ts-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ts-kicker {
  display: inline-block; font-size: 11px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 5px; padding: 2px 8px;
}
.ts-title { margin: 6px 0 2px; font-size: 20px; }
.ts-sub { font-size: 11.5px; color: var(--muted); }
.ts-head-right { display: flex; gap: 8px; align-items: center; }
.ts-pill {
  font-size: 11.5px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 10px;
}
.ts-close, .cs-close {
  border: 1px solid var(--line); background: rgba(255, 255, 255, .06); color: var(--ink);
  border-radius: 8px; padding: 7px 14px; font-size: 13px; cursor: pointer;
}
.ts-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.ts-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; position: relative; overflow: hidden;
}
.ts-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--band, #9b8cf0);
}
.ts-row:hover { border-color: rgba(255, 255, 255, .22); }
.ts-name { width: 132px; font-weight: 700; font-size: 14px; flex: 0 0 auto; }
.ts-mech { flex: 1; font-size: 12px; color: var(--muted); }
.ts-meta { width: 96px; text-align: right; font-size: 11px; color: var(--muted); flex: 0 0 auto; }
.ts-act { width: 76px; text-align: right; font-size: 12px; color: var(--rose); font-weight: 600; flex: 0 0 auto; }
.ts-row.done .ts-act { color: var(--muted); }

/* ---- 导览中的说明面板（贴底） ---- */
.tour-panel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(25, 21, 36, .97); border-top: 1px solid var(--line);
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
}
.tour-panel.hidden { display: none; }
.tp-top { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.tp-band { color: var(--gold); }
.tp-do { font-size: 13.5px; line-height: 1.55; margin-top: 4px; }
.tp-then { font-size: 12.5px; color: #cfc6db; margin-top: 3px; line-height: 1.5; }
.tp-note { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.tp-btns { display: flex; gap: 8px; margin-top: 8px; }
.tp-btn {
  flex: 1; border: 0; border-radius: 8px; padding: 9px 10px; font-size: 13px;
  font-weight: 600; background: var(--rose); color: #fff; cursor: pointer;
}
.tp-btn.ghost { background: rgba(255, 255, 255, .08); color: var(--ink); border: 1px solid var(--line); }
.tp-btn.quiet { flex: 0 0 68px; background: transparent; color: var(--muted); border: 1px solid var(--line); }

/* ---- 导览结束弹窗 ---- */
.tf-wrap { display: flex; gap: 14px; flex-wrap: wrap; }
.tf-art { width: 132px; height: 132px; border-radius: 10px; object-fit: cover; flex: 0 0 auto;
  background: var(--panel-2); border: 1px solid var(--line); }
.tf-art-empty { background: linear-gradient(150deg, #2b2438, #14111b); }
.tf-side { flex: 1; min-width: 200px; }
.tf-got { color: var(--gold); font-weight: 700; font-size: 13px; }
.tf-h { font-size: 11.5px; color: var(--muted); margin: 8px 0 4px; }
.tf-list { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.6; }

/* ---- 收藏 ---- */
.cs-tabs { display: flex; gap: 6px; margin-top: 14px; }
.cs-tab {
  flex: 1; border: 1px solid var(--line); background: rgba(255, 255, 255, .04);
  color: var(--muted); border-radius: 6px; padding: 7px 0; font-size: 12.5px; cursor: pointer;
}
.cs-tab.on { background: rgba(227, 93, 138, .16); border-color: rgba(227, 93, 138, .45); color: var(--ink); font-weight: 600; }
.cs-body { margin-top: 10px; }
.cs-tools {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 12px; color: var(--muted); margin-bottom: 12px;
}
.cs-fill, .cs-fill {
  border: 1px solid rgba(227, 93, 138, .5); background: rgba(227, 93, 138, .14);
  color: var(--ink); border-radius: 7px; padding: 6px 12px; font-size: 12px; cursor: pointer;
}
.cs-hint { font-size: 11px; }
.cs-group { margin-bottom: 14px; }
.cs-group-head { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; }
.cs-group-count { color: var(--muted); font-size: 11px; }
.cs-albums {
  display: grid; gap: 6px;
  /* 自适应密度：格子小一点，一屏能看到更多唱片 */
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
}
.cs-album {
  position: relative; aspect-ratio: 1; border-radius: 7px; overflow: hidden; padding: 0;
  border: 1px solid var(--line); background: linear-gradient(150deg, #2a2338, #14111b);
  cursor: default;
}
.cs-album img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-album:not(.got) { cursor: pointer; filter: grayscale(.8) brightness(.55); }
.cs-album:not(.got):hover { filter: grayscale(.4) brightness(.75); }
.cs-album-name {
  position: absolute; left: 3px; right: 3px; bottom: 2px; font-size: 8.5px; color: #fff;
  text-shadow: 0 1px 3px #000; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-album:not(.got) .cs-album-name { text-align: center; font-size: 11px; color: var(--muted); }
/* 鼠标悬停时把整张唱片名字浮出来，格子小也不会看不全 */
.cs-album.got:hover .cs-album-name {
  font-size: 10px; white-space: normal; line-height: 1.25; background: rgba(10, 8, 14, .82);
  border-radius: 4px; padding: 2px 3px;
}
.cs-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cs-badge {
  border: 1px solid var(--line); border-radius: 9px; padding: 10px;
  background: var(--panel); opacity: .45;
}
.cs-badge.got { opacity: 1; border-color: rgba(232, 196, 122, .4); }
.cs-badge-ic {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; background: rgba(232, 196, 122, .16); color: var(--gold);
  font-size: 13px; margin-bottom: 6px;
}
.cs-badge-name { font-size: 12.5px; font-weight: 600; }
.cs-badge-desc { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.cs-badge-kind { font-size: 10px; color: var(--muted); margin-top: 4px; opacity: .7; }

@media (min-width: 900px) {
  .cs-albums { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
  .cs-badges { grid-template-columns: repeat(4, 1fr); }
  /* 桌面别拉满整屏，读完一行不用左右扫 */
  .col-screen .cs-head, .col-screen .cs-tabs, .col-screen .cs-body {
    max-width: 1080px; margin-left: auto; margin-right: auto;
  }
  .tour-panel { left: 50%; transform: translateX(-50%); max-width: 760px; border-radius: 12px;
    bottom: 16px; border: 1px solid var(--line); }
  .tp-btns { max-width: 420px; }
}

@media (max-width: 430px) {
  .cs-albums { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 5px; }
  .cs-group { margin-bottom: 10px; }
}

/* 平板竖屏：别挤成十几列，给 6～7 列 */
@media (min-width: 431px) and (max-width: 899px) {
  .cs-albums { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 7px; }
}

@media (max-width: 560px) {
  .ts-name { width: 96px; font-size: 13px; }
  .ts-meta { display: none; }
  .ts-mech { font-size: 11px; }
  .ts-act { width: 64px; font-size: 11px; }
  .tf-art { width: 96px; height: 96px; }
}

/* ---- 收藏页：获取规则 ---- */
.cs-rules {
  border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, .035);
  padding: 8px 12px; margin-bottom: 10px; font-size: 12px; color: var(--muted);
}
.cs-rules summary {
  cursor: pointer; font-weight: 600; color: var(--ink); font-size: 12.5px;
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.cs-rules summary::-webkit-details-marker { display: none; }
.cs-rules summary::before {
  content: "▸"; color: var(--rose); font-size: 11px; transition: transform .15s;
}
.cs-rules[open] summary::before { transform: rotate(90deg); }
.cs-rules ul { margin: 6px 0 2px; padding-left: 18px; line-height: 1.65; }
.cs-rules b { color: var(--gold); font-weight: 600; }
.tf-hint {
  margin-top: 8px; font-size: 11px; color: var(--muted); line-height: 1.5;
  border-top: 1px dashed var(--line); padding-top: 6px;
}

/* ==================== 唱片展示效果 ==================== */
/* 封套 + 唱片：唱片从封套右侧滑出并旋转 */
.vinyl-wrap {
  position: relative; width: 132px; height: 132px; flex: 0 0 auto;
  display: block;
}
.vinyl-cover {
  position: relative; z-index: 2; width: 100%; height: 100%;
  border-radius: 8px; object-fit: cover; display: block;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .55);
  animation: cover-pop .45s cubic-bezier(.2, .8, .2, 1) both;
}
.vinyl-disc {
  position: absolute; z-index: 1; top: 50%; left: 50%;
  width: 92%; height: 92%; border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 50%, #2a2536 0 18%, rgba(0, 0, 0, 0) 19%),
    repeating-radial-gradient(circle at 50% 50%,
      #12101a 0 2px, #1a1622 2px 4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .06);
  animation:
    disc-out .85s cubic-bezier(.16, .9, .2, 1) .12s both,
    disc-spin 7s linear 1s infinite;
}
.vinyl-disc::after {
  /* 盘心标签 */
  content: ""; position: absolute; left: 50%; top: 50%; width: 34%; height: 34%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .22), rgba(0, 0, 0, .55));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
@keyframes cover-pop {
  from { opacity: 0; transform: translateY(8px) scale(.94); }
  to { opacity: 1; transform: none; }
}
@keyframes disc-out {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(.9); }
  to { opacity: 1; transform: translate(24%, -50%) rotate(90deg) scale(1); }
}
@keyframes disc-spin {
  from { transform: translate(24%, -50%) rotate(90deg); }
  to { transform: translate(24%, -50%) rotate(450deg); }
}
.vinyl-wrap.big { width: 232px; height: 232px; }
.vinyl-wrap.big .vinyl-disc { animation-delay: .1s, .9s; }

/* 大图展示层 */
.alb-view {
  position: fixed; inset: 0; z-index: 195; display: flex; align-items: center;
  justify-content: center; padding: 24px;
  background: rgba(8, 6, 12, .78); backdrop-filter: blur(3px);
}
.alb-view.hidden { display: none; }
.alb-view-box {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 26px 28px 20px; border-radius: 16px;
  background: radial-gradient(600px 300px at 50% 0, rgba(227, 93, 138, .16), transparent 70%), #1a1622;
  border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
  max-width: 92vw;
}
.alb-view.play .alb-view-box { animation: cover-pop .3s ease both; }
.alb-view-name { font-size: 15px; font-weight: 700; text-align: center; }
.alb-view-band { font-size: 12px; color: var(--gold); margin-top: 2px; text-align: center; }
.alb-view-tag {
  margin-top: 8px; font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}
.alb-view-close {
  margin-top: 4px; border: 1px solid var(--line); background: rgba(255, 255, 255, .07);
  color: var(--ink); border-radius: 8px; padding: 7px 18px; font-size: 13px; cursor: pointer;
}

/* 唱片墙：悬停微浮起 + 名字浮层已经写在上面 */
.cs-album.got img { transition: transform .18s ease, filter .18s ease; }
.cs-album.got:hover img { transform: scale(1.05); filter: brightness(1.08); }
.cs-album.got { box-shadow: 0 0 0 0 rgba(232, 196, 122, 0); transition: box-shadow .18s ease, transform .18s ease; }
.cs-album.got:hover { box-shadow: 0 0 0 1px rgba(232, 196, 122, .55), 0 8px 20px rgba(0, 0, 0, .45); transform: translateY(-2px); }

@media (max-width: 560px) {
  .alb-view-box { padding: 20px 16px 16px; }
  .vinyl-wrap.big { width: 190px; height: 190px; }
  .tf-wrap .vinyl-wrap { width: 110px; height: 110px; }
}

/* 给滑出的唱片留位置，别压到旁边的文字 */
.tf-wrap .vinyl-wrap { margin-right: 54px; }
.alb-view .vinyl-wrap { margin-right: 48px; }
@media (max-width: 560px) {
  .tf-wrap .vinyl-wrap { margin-right: 34px; }
  .alb-view .vinyl-wrap { margin-right: 36px; }
}

/* ---- 乐队档案 ---- */
.cs-archives { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cs-arch {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: var(--panel); position: relative;
}
.cs-arch.gold { border-color: rgba(232, 196, 122, .45); box-shadow: 0 0 0 1px rgba(232, 196, 122, .18) inset; }
.cs-arch.lock { opacity: .55; }
.cs-arch-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cs-arch-head b { font-size: 14px; }
.cs-arch-st { font-size: 11px; color: var(--muted); }
.cs-arch.gold .cs-arch-st { color: var(--gold); }
.cs-arch-title { font-size: 12.5px; color: var(--rose); margin-top: 3px; }
.cs-arch ul { margin: 8px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.68; }
.cs-arch ul li { margin-bottom: 5px; }
.cs-arch-lock { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.cs-arch-src {
  margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line);
  font-size: 10px; color: var(--muted); line-height: 1.4;
}
/* 唱片背面的题注 */
.alb-view-note {
  margin-top: 10px; max-width: 320px; text-align: left; font-size: 12px; line-height: 1.6;
  color: #d7cfe3; background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 11px;
}
.alb-view-note-k { display: block; font-size: 10.5px; color: var(--gold); margin-bottom: 3px; }
.alb-view-src { margin-top: 5px; font-size: 10px; color: var(--muted); max-width: 320px; text-align: left; }

@media (min-width: 900px) {
  .cs-archives { grid-template-columns: 1fr 1fr; }
}

/* ---- 唱片杂谈 ---- */
.alb-view-gossip {
  margin-top: 8px; max-width: 320px; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px;
  background: rgba(155, 140, 240, .06);
}
.g-head { font-size: 10.5px; color: var(--lilac); margin-bottom: 5px; }
.g-src-note { color: var(--muted); font-size: 9.5px; margin-left: 4px; }
.g-item { font-size: 11.5px; line-height: 1.55; color: #ded7e8; margin-bottom: 5px; }
.g-tag {
  display: inline-block; font-size: 9.5px; border-radius: 4px; padding: 0 5px;
  margin-right: 5px; vertical-align: 1px; border: 1px solid;
}
.g-tag.t-吐槽 { color: #ffd27a; border-color: rgba(255, 210, 122, .5); }
.g-tag.t-剧透 { color: #ff8f8f; border-color: rgba(255, 143, 143, .5); }
.g-tag.t-推测 { color: #9ad6ff; border-color: rgba(154, 214, 255, .5); }
.g-tag.t-争议 { color: #d3a6ff; border-color: rgba(211, 166, 255, .5); }
.g-tag.t-冷知识 { color: #9ae6b4; border-color: rgba(154, 230, 180, .5); }
.g-spoiler { margin-top: 4px; }
.g-spoiler-btn {
  width: 100%; border: 1px dashed rgba(255, 143, 143, .5); background: rgba(255, 143, 143, .08);
  color: #ffb3b3; border-radius: 7px; padding: 5px; font-size: 11px; cursor: pointer;
}
.g-spoiler-body { margin-top: 6px; }
.g-spoiler-body.hidden { display: none; }
.g-foot { margin-top: 6px; font-size: 9.5px; color: var(--muted); }

/* 唱片大图内容变多了：允许纵向滚动；横方向别滚（唱片的圆盘是故意探出去的） */
.alb-view-box { max-height: 86vh; overflow-y: auto; overflow-x: hidden; }
.alb-view .vinyl-wrap { margin-right: 56px; }
.alb-view-meta { width: 100%; display: flex; flex-direction: column; align-items: center; }

/* AI 强度下拉 */
.strong-toggle { display: inline-flex; align-items: center; gap: 6px; }
.strong-toggle select {
  background: rgba(255, 255, 255, .07); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 8px; font-size: 12.5px; cursor: pointer;
}
.strong-toggle select:focus { outline: 1px solid var(--rose); }

/* 排行榜分栏 */
.lb-tabs { display: flex; gap: 8px; margin: 10px 0 4px; }
.lb-tab {
  font-size: 12.5px; padding: 6px 14px; border-radius: 8px; text-decoration: none;
  color: var(--muted); border: 1px solid var(--line); background: rgba(255, 255, 255, .04);
}
.lb-tab.on { color: var(--ink); border-color: rgba(227, 93, 138, .5); background: rgba(227, 93, 138, .16); font-weight: 600; }

/* 卡图加载失败的占位（artError 用）：保留方框，显示一个淡淡的图标，不再整块消失 */
.art-missing-box { background: linear-gradient(150deg, #2a2338, #14111b) !important; }
.art-missing-box::after {
  content: "🖼"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 18px; opacity: .35; pointer-events: none;
}

/* Live 阶段：随手的弃牌 / 移除 / 草稿查看条 */
.live-piles {
  display: inline-flex; gap: 5px; flex-wrap: wrap; align-items: center;
  margin-left: 8px;
}
.live-piles.hidden { display: none; }
.lp-chip {
  font-size: 10.5px; padding: 2px 7px; border-radius: 6px; cursor: pointer;
  color: #e9e0ff; background: rgba(155, 140, 240, .16);
  border: 1px solid rgba(155, 140, 240, .34);
  line-height: 1.5;
}
.lp-chip b { color: #ffd9a0; margin-right: 3px; }
.lp-chip:hover { background: rgba(155, 140, 240, .3); border-color: var(--lilac); }
@media (max-width: 640px) {
  .live-piles { margin-left: 4px; gap: 4px; }
  .lp-chip { font-size: 9.5px; padding: 2px 5px; }
}

/* 触屏导览面板：底部常驻控件会压住「继续」按钮
 * ------------------------------------------------------------------
 * 手机（≤720）：底部两层 —— 页签条（约 51px，z-index 146）
 *   和它上面那排开关（音量/音乐/音效/特效/开发者，约 27px，z-index 150）；
 * 平板竖屏（721–899）：只有那排开关（底 8px 起、约 21px 高，z-index 150）。
 * 面板原来是贴底的 left/right 0 + bottom 0/6px、z-index 90，正好落在它们下面：
 *   ①「继续」被页签条/开关盖住，点了没反应（点到的是页签图标）；
 *   ② 备注那行文字和「开发者」按钮叠字。
 * 现在：面板抬到开关那排之上，z-index 排到它们前面；桌面（≥900）保持原样。
 * 底下数字都对应上面两层的高度，改页签条/开关高度时同步改这里。 */
@media (max-width: 899px) {
  .tour-panel {
    left: 6px; right: 6px;
    bottom: calc(40px + env(safe-area-inset-bottom, 0px));   /* 让开底部开关那排 */
    z-index: 160;                                            /* 高过页签(146)/开关(150)，低于弹窗(200) */
    border-radius: 12px;
  }
}

/* 手机：再抬过一个页签条，正文可滚、备注字号收紧一档 */
@media (max-width: 720px) {
  .tour-panel {
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));   /* 40 + 页签条 50 */
    max-height: 46vh; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 10px 8px;
  }
  .tp-do { font-size: 12.5px; line-height: 1.45; }
  .tp-then { font-size: 11.5px; }
  .tp-note { font-size: 10.5px; }
  .tp-btns { position: sticky; bottom: 0; background: rgba(25, 21, 36, .97); padding-top: 6px; }
  .tp-btn { padding: 8px 8px; font-size: 12.5px; }
}

/* ================================================================
   联机对战（房间）：大厅 + 房间里的两个小部件
   ----------------------------------------------------------------
   * 大厅是浮层，z-index 175：高过页签条(146)与开关(150)、导览列表(170)，
     低于弹窗(200) / 开发者面板(220)，所以房间里的弹窗照常能盖住它；
   * 房间里的「等谁」条贴底，位置和导览面板同一套让位逻辑（别被页签条压住）。
   ================================================================ */
.room-screen {
  position: fixed; inset: 0; z-index: 175; overflow: auto;
  background: radial-gradient(120% 80% at 50% 0%, rgba(60, 40, 90, .55), rgba(10, 8, 16, .96));
  padding: 24px 14px 40px;
}
.room-screen.hidden { display: none; }
.rs-box {
  max-width: 560px; margin: 0 auto; background: rgba(25, 21, 36, .97);
  border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.rs-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.rs-kicker { font-size: 10.5px; letter-spacing: .18em; color: var(--gold); }
.rs-title { margin: 2px 0 4px; font-size: 20px; }
.rs-sub { font-size: 12px; color: var(--muted); line-height: 1.5; }
.rs-close {
  flex: 0 0 auto; background: rgba(255, 255, 255, .06); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font-size: 12.5px;
}
.rs-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.rs-field { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.rs-field select, .rs-input {
  background: rgba(255, 255, 255, .06); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; font-size: 13px;
}
.rs-input { width: 96px; letter-spacing: .18em; text-align: center; }
.rs-or { font-size: 12px; color: var(--muted); }
.rs-btn {
  border: 0; border-radius: 9px; padding: 9px 16px; font-size: 13.5px; font-weight: 600;
  background: var(--rose); color: #fff; cursor: pointer;
}
.rs-btn.ghost { background: rgba(255, 255, 255, .08); color: var(--ink); border: 1px solid var(--line); }
.rs-btn.quiet { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.rs-btn[disabled] { opacity: .5; cursor: default; }
.rs-error {
  margin-top: 10px; font-size: 12.5px; color: #ffd9e3; background: rgba(227, 93, 138, .16);
  border: 1px solid rgba(227, 93, 138, .45); border-radius: 8px; padding: 8px 10px;
}
.rs-error.hidden { display: none; }
.rs-lobby { margin-top: 16px; }
.rs-lobby.hidden { display: none; }
.rs-code-row { display: flex; align-items: baseline; gap: 8px; }
.rs-code-label { font-size: 12px; color: var(--muted); }
.rs-code { font-size: 26px; letter-spacing: .22em; color: var(--gold); }
.rs-hint { font-size: 11.5px; color: var(--muted); }
.rs-seats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.rs-seat {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 10px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line); min-width: 0;
}
.rs-seat.me { border-color: rgba(232, 196, 122, .55); background: rgba(232, 196, 122, .1); }
.rs-seat.bot { opacity: .6; }
.rs-seat-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-seat-pid { font-size: 10.5px; color: var(--muted); letter-spacing: .1em; }
.rs-seat-tag { font-size: 10.5px; color: var(--gold); min-height: 1em; }
.rs-actions { display: flex; gap: 8px; margin-top: 6px; }

/* 房间里：顶栏的小标签 + 底部「在等谁」 */
.room-chip {
  font-size: 11px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  color: #ffe6b8; background: rgba(232, 196, 122, .14);
  border: 1px solid rgba(232, 196, 122, .45); white-space: nowrap;
}
.room-wait {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 155;
  max-width: 92vw; padding: 7px 14px; border-radius: 999px; font-size: 12px;
  color: #ffe6b8; background: rgba(25, 21, 36, .95);
  border: 1px solid rgba(232, 196, 122, .45); box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.room-wait.hidden { display: none; }

@media (max-width: 720px) {
  .room-screen { padding: 12px 8px 24px; }
  .rs-box { padding: 13px 12px 15px; border-radius: 12px; }
  .rs-seats { grid-template-columns: 1fr 1fr; gap: 6px; }
  .rs-code { font-size: 22px; }
  /* 手机底部有页签条(约 51px)+开关那排(约 27px)：等谁条要抬上去，别被压住 */
  .room-wait { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); font-size: 11.5px; }
}

/* 房间里「我回来了」：捡回被托管的座位 */
.room-back {
  margin-left: 8px; border: 1px solid rgba(232, 196, 122, .6); border-radius: 999px;
  background: rgba(232, 196, 122, .18); color: #ffe6b8; font-size: 11.5px;
  padding: 3px 10px; cursor: pointer;
}

/* Live 里没牌可打：把「停手」点亮，别让人干等 */
#btn-pass.need-pass {
  background: linear-gradient(180deg, #ffcf6b, #ffa93c) !important;
  color: #3a2600 !important;
  border-color: #ffd98a !important;
  box-shadow: 0 0 0 0 rgba(255, 200, 90, .7);
  animation: passPulse 1.6s ease-out infinite;
}
@keyframes passPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 200, 90, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 200, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 200, 90, 0); }
}

/* 联机：轮到我 / 在等别人，两种样子分开，别让人分不清 */
.room-wait.mine {
  background: linear-gradient(180deg, rgba(255, 214, 130, .96), rgba(255, 176, 72, .96));
  color: #3a2600; border-color: #ffd98a; font-weight: 700;
  animation: passPulse 1.8s ease-out infinite;
}
.room-wait.waiting { opacity: .92; }

/* 「测试」小标签：联机对战目前是测试功能 */
.test-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  color: #2b1a00;
  background: linear-gradient(180deg, #ffd07a, #ffb347);
  vertical-align: 1px;
}
.rs-test-note {
  margin: 6px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #ffe6b8;
  background: rgba(255, 170, 60, .14);
  border: 1px solid rgba(255, 190, 90, .45);
}