/* 半途而截 · 联机入口（大厅与牌桌之外的界面）
 *
 * 牌桌本身的样式在 `table.css`（从原型转正）；这里只放大厅、动作盘细节、
 * 文字牌面和弹层。加载顺序：table.css 先，style.css 后，覆盖牌桌上要改的部分。
 */

:root {
  /* 窗口底色：不透明纯色。以前是一层半透明渐变压在背景上，窗口和背后的深色
   * 「化」在一起，只剩一条 0.16 的金线暗示边界——看着像没有窗口。
   * 换成深靛蓝：跟牌桌那套墨绿拉开，金色描边在上面也够亮。 */
  --panel: #202a3d;
  --panel-line: rgba(231, 194, 122, 0.38);
  --line-soft: rgba(231, 194, 122, 0.16);
  --danger: #c9613f;
}

/* ── 大厅：整页盖住牌桌 ─────────────────────────────── */

#screens {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
  background: radial-gradient(ellipse at 50% 38%, #101623 0%, #05070a 72%);
}

.panel {
  width: min(430px, 100%);
  padding: 22px;
  border-radius: 14px;
  border: 1px solid var(--panel-line);
  /* 纯色、不透明：窗口必须是窗口，不能被背景吞掉。层次靠描边与投影，
   * 不靠渐变。 */
  background: var(--panel);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.06),
    0 22px 54px rgba(0, 0, 0, 0.62);
}

.panel h1 {
  margin: 0 0 4px;
  color: var(--ink);
  font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  font-size: 24px;
  letter-spacing: 4px;
}

.panel h2 {
  margin: 0 0 6px;
  color: var(--gold);
  font-size: 16px;
  letter-spacing: 2px;
}

.hint {
  margin: 4px 0 14px;
  color: var(--muted);
  font-size: 11px;
}

.muted {
  color: var(--muted);
  font-size: 11px;
}

.error {
  min-height: 16px;
  margin: 8px 0 0;
  color: #e49a9a;
  font-size: 11px;
}

.panel label {
  display: block;
  margin: 12px 0;
  color: var(--muted);
  font-size: 11px;
}

.panel input,
.panel select {
  width: 100%;
  margin-top: 5px;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.32);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}

.panel input:focus,
.panel select:focus {
  outline: none;
  border-color: var(--gold-soft);
}

.row {
  display: flex;
  gap: 10px;
}

.row > label {
  flex: 1;
}

.panel button {
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.22);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.panel button:hover:not(:disabled) {
  border-color: var(--gold);
}

.panel button.primary {
  width: 100%;
  margin-top: 6px;
  border-color: var(--gold);
  background: linear-gradient(180deg, #e9c77d, #c99b4d);
  color: #25190a;
  font-weight: 600;
}

.panel button.primary:disabled {
  opacity: 0.45;
  cursor: default;
}

.panel button.ghost {
  width: 100%;
  margin-top: 8px;
  color: var(--muted);
}

/* 房间码上方那行小字：说清这串五位码是干什么用的。 */
.join-hint {
  margin: 16px 0 0;
}

.join {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

/* 「加入」两个字不许被挤成竖排：按钮按内容定宽，别跟着输入框一起缩。 */
.join button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.join input {
  margin-top: 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.code {
  color: var(--gold);
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: 4px;
}

.seats {
  margin: 12px 0 4px;
  padding: 0;
  list-style: none;
}

.seat {
  display: flex;
  /* 自己那一行会多出一条角色牌选择带（见 `.role-pick`），不放行就挤成一坨 */
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
  padding: 8px 11px;
  border-radius: 7px;
  border: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12px;
}

.seat.filled {
  color: var(--ink);
}

.seat .dot {
  color: var(--green);
}

.seat .name {
  flex: 1;
}

.seat .tag {
  color: var(--gold);
  font-size: 10px;
}

/* ── 大厅：座位 + 对局设置 ───────────────────────────── */

.panel.wide {
  width: min(840px, 100%);
}

/* 房间标题：房间码和「你是房主 / 房主 谁」同一行，后者推到最右边。 */
#lobby > h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

#lobbyHostTag {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1px;
}

.lobby-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 14px;
  text-align: left;
}

@media (max-width: 720px) {
  .lobby-grid {
    grid-template-columns: 1fr;
  }
}

.lobby-col h3 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
}

/* 非房主：设置列整体压暗成只读。点不动的东西不该看起来像能点。 */
.lobby-col.locked .field {
  opacity: 0.55;
}

.lobby-col.locked .field select,
.lobby-col.locked .field input {
  cursor: not-allowed;
}

/* 特异性要压过 `.panel label`，否则 display 和 margin 都会被它的 block 覆盖 */
.panel .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 11px;
}

.panel .field input,
.panel .field select {
  margin-top: 0;
}

/* ── 高级设置：折叠面板 ──
 * 数值与计时项收在里面，主面板只留「玩什么 / 几个人 / 怎么分队」。
 * 描边比卡片弱一档：它属于设置的一部分，不是独立的一张卡。 */
.adv {
  margin: 2px 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(231, 194, 122, 0.16);
  border-radius: 8px;
  /* 面板已经是不透明的靛蓝，这块底只要略沉一点点就够，绿调那点色相会脏。 */
  background: rgba(0, 0, 0, 0.24);
}

.adv > summary {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 2px;
  cursor: pointer;
  list-style: none;
}

/* 默认那个三角在深色底上几乎看不见，自己画一个；展开时换成朝下的 */
.adv > summary::-webkit-details-marker {
  display: none;
}

.adv > summary::before {
  content: '▸';
  display: inline-block;
  width: 12px;
  margin-right: 6px;
  text-align: center;
}

.adv[open] > summary::before {
  content: '▾';
}

.adv[open] > summary {
  margin-bottom: 8px;
}

.adv-hint {
  margin: 0 0 8px;
}

.seat .seat-no {
  width: 14px;
  color: var(--muted);
  font-family: ui-monospace, Consolas, monospace;
}

/* 混战里座位可以换：整行可点，给个手型和悬停反馈 */
.seat-swap {
  cursor: pointer;
}

.seat-swap:hover {
  border-color: var(--gold);
  background: rgba(231, 194, 122, 0.07);
}

.camp-pick {
  display: flex;
  gap: 3px;
}

.camp-btn {
  min-width: 24px;
  padding: 2px 0;
  border-radius: 5px;
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}

.camp-btn.ro {
  cursor: default;
  opacity: 0.5;
}

.camp-btn.on {
  border-color: var(--camp, var(--gold));
  color: var(--ink);
  opacity: 1;
}

/*
 * 角色牌：自己那一行铺开六张，点一下换一张。
 *
 * 独占一整行（`order` 排到最后 + `flex-basis: 100%`）：座位号、名字、
 * 六个阵营按钮已经把第一行占得差不多了，硬塞进去会把座位号挤到换行。
 */
.role-pick {
  order: 10;
  flex: 0 0 100%;
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed var(--line-soft);
}

.role-btn {
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: #0a1411;
  line-height: 0;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.role-btn:hover {
  opacity: 0.85;
}

.role-btn.on {
  opacity: 1;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(231, 194, 122, 0.5), 0 3px 8px rgba(0, 0, 0, 0.45);
  transform: translateY(-1px);
}

.role-thumb {
  display: block;
  width: 36px;
  height: 51px;
  object-fit: cover;
}

/* 别人的角色：只报个到，不可点 */
.role-chip {
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;
  opacity: 0.8;
}

.role-chip .role-thumb {
  width: 26px;
  height: 37px;
}

/* 队色 26% 的薄底。老内核不认 `color-mix()` 时就不上底，只靠描边和字色区分
 * ——绝不能写成同一个 `background` 里两条声明，那会让整条属性回落成透明。 */
@supports (color: color-mix(in srgb, red, blue)) {
  .camp-btn.on {
    background: color-mix(in srgb, var(--camp, var(--gold)) 26%, transparent);
  }
}

/* 六队各一个色，牌桌上沿用同一套 */
.camp-btn[data-camp='A'] { --camp: #c9563f; }
.camp-btn[data-camp='B'] { --camp: #4a7fb5; }
.camp-btn[data-camp='C'] { --camp: #c8a13a; }
.camp-btn[data-camp='D'] { --camp: #6b9c55; }
.camp-btn[data-camp='E'] { --camp: #8b62b0; }
.camp-btn[data-camp='F'] { --camp: #b8733f; }

/* 双阵营（奇偶座）也用对抗色，和牌桌色带完全一致：奇数座蓝、偶数座红 */
.camp-btn[data-camp='odd'] { --camp: #4a7fb5; }
.camp-btn[data-camp='even'] { --camp: #c9563f; }

.camp-fixed {
  color: var(--muted);
  font-size: 10px;
}

/* ── 房主排座次：座位行右侧的 ↑↓ ─────────────────────
 * 一次挪一位，跨座位交换由服务端处理。首尾各禁一边。
 * 特异性要压过 `.panel button`（那边的内边距是给大按钮用的）。 */
.seat-move {
  display: flex;
  gap: 2px;
}

.panel .seat-move-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 5px;
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.panel .seat-move-btn:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--ink);
}

.panel .seat-move-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

/* 房主踢人：座位行末尾的小按钮，平时不抢眼，悬停才变红 */
.panel .seat-kick {
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
}

.panel .seat-kick:hover {
  border-color: #b4453a;
  color: #b4453a;
}

/* ── 座次提示 + 「自动排座」：一行放，按钮靠右 ── */
.plan-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.plan-row .hint {
  flex: 1;
  margin: 0;
}

.panel .seat-auto {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
  cursor: pointer;
}

.panel .seat-auto:hover {
  border-color: var(--gold);
  color: var(--ink);
}

/* ── 随机先手：勾选项 ─────────────────────────────────
 * 外面还是 `.field`（间距一致、客人那边跟着整列压暗），里面横排。
 * 通用的 `.panel input` 是整宽带内边距的文本框样式，checkbox 得单独压回去。 */
.panel .field.check {
  display: block;
  margin: 2px 0 10px;
}

.field.check .check-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 12px;
  cursor: pointer;
}

.panel .field.check input[type='checkbox'] {
  width: auto;
  margin: 0;
  padding: 0;
  accent-color: #c9a45a;
  cursor: pointer;
}

.field.check .hint {
  display: block;
  margin: 2px 0 0 24px;
  font-size: 10px;
}

.hint.warn {
  color: #d98a4a;
}

.lobby-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

/* ── 牌面：预烘焙底图 + DOM 描述 ─────────────────────
 *
 * 底板、插画、类型、编号、竖排牌名**全部烘焙在底图里**
 * （`assets/faces/<ruleset>/<defId>.webp`，由 tools/build_card_faces.py 生成，
 * 描述区与底部强化条留空）。DOM 只负责描述：牌名那种书法字交给浏览器渲染
 * 质感差，而描述要按内容调字号、要能随时改文案——两者切开的理由就在这里。
 *
 * 描述区坐标是按 600×848 离线版式换算的百分比（原版 `center_y = 1270`），
 * 与牌卡同比例，所以缩放、悬停放大都不用重算。
 */

.card[data-element='fire'] { --el: #b8482f; }
.card[data-element='thunder'] { --el: #5f6bb5; }
.card[data-element='mind'] { --el: #8a5aa8; }
.card[data-element='machine'] { --el: #5b6b73; }
.card[data-element='rainbow'] { --el: #b8794a; }
.card[data-element='void'] { --el: #464653; }

/* 底图铺满整张牌 */
.card .face-base,
.under-face .face-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 4px;
  z-index: 1;
  pointer-events: none;
}

.card .face,
.under-face .face {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 4px;
  overflow: hidden;
  pointer-events: none;
}

.card .face > span,
.under-face .face > span {
  position: absolute;
  display: block;
}

/* 描述：底图留空的深色块，从 51.5% 到底部 90.5%（普通底板，强化牌也用同一张）。
   强化文本不再单独占一条，而是点「预览强化」时顶替这块（见 syncFaceText）。 */
.card .face-text,
.under-face .face-text {
  left: 26%;
  top: 51.5%;
  width: 62%;
  height: 39%;
  overflow: hidden;
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
  font-size: 8px;
  line-height: 1.3;
  text-align: center;
}

.card .face-text-in,
.under-face .face-text-in {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: #f6f1e6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/*
 * 小窗里的牌面（挑牌、看过的牌、弃牌告知）。
 *
 * 和牌桌上同一套结构，只是小：外面一层占位盒把绝对定位的 `.card` 塞回流里。
 * `.face-text` 的坐标全是百分比，所以换小尺寸不用另排版式，字号仍由
 * `fitInBox` 按可用高度二分出来——小牌上的字也是真文本，不是印在图上。
 * 各容器按需覆盖宽高（`.overlay-cards` / `.choice-reveal` / `.tray-card`）。
 */
.mini-face {
  position: relative;
  display: block;
  width: 66px;
  height: 93px;
  flex: 0 0 auto;
}

.mini-face > .card {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  box-shadow: none;
  pointer-events: none;
}

/* 被无效的栈帧、能打 / 能打断的呼吸光都写在 table.css 里。 */

/* 被无效的栈帧样式在 table.css 的 .stack-card.invalid 里。 */

.card.is-dim {
  filter: grayscale(0.75) brightness(0.62);
  opacity: 0.82;
}

.card.is-picked {
  box-shadow: inset 0 0 0 2px var(--green), 0 12px 24px rgba(0, 0, 0, 0.6);
}

.card.is-pickable {
  cursor: pointer;
}

/* ── 顶栏：倒计时 ───────────────────────────────────── */

.countdown {
  position: relative;
  width: 76px;
  height: 4px;
  margin-right: 6px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.countdown i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width 0.1s linear;
}

/* 剩余秒数单独一个元素：条本身 overflow:hidden（要裁进度），
 * 挂在条上的伪元素会被一起裁掉。 */
.countdown-text {
  color: var(--gold-soft);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  min-width: 42px;
}

/* ── 座位状态 ───────────────────────────────────────── */

.seat-hud.own-hud {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.seat-hud.targetable {
  cursor: pointer;
}

.seat-hud.targetable .hand-icon {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(231, 194, 122, 0.55), 0 0 20px rgba(231, 194, 122, 0.35);
}

.seat-hud.targetable .seat-name {
  color: var(--gold);
}

.seat-hud.dead {
  opacity: 0.4;
}

.seat-hud.dead .seat-name {
  text-decoration: line-through;
}

/* ── 弃牌堆等覆盖层 ─────────────────────────────────── */

#pile-overlay {
  position: absolute;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  background: rgba(2, 6, 5, 0.55);
  backdrop-filter: blur(2px);
}

.overlay-panel {
  /* 看牌窗口按牌面尺寸走：牌面 144×204、两行，面板要装得下两行不加滚动条。 */
  width: 1080px;
  max-width: calc(100% - 40px);
  max-height: 780px;
  padding: 16px 20px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/*
 * 观战翻某个人手牌：列数由张数决定，宽度跟着内容走。
 * 弃牌堆那套定宽 1080 是给「两行卷轴」用的，六张手牌排成 3×2 只占左半边。
 */
.overlay-panel.is-hand {
  width: max-content;
  max-width: min(1400px, calc(100% - 40px));
}

/*
 * 手牌横着排一行，多了才换行——牌桌上一张手牌是一排拿着的，
 * 卷轴那套「两行、列往右长」用在三张上会排成 2+1，看着像少了什么。
 */
.overlay-cards.is-hand {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 12px 15px;
  overflow-x: visible;
  cursor: default;
}

.overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}.overlay-title {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 1px;
}

/*
 * 看牌窗口：牌面排成 2 行，列多了横向拖（像卷轴）。
 * 「质能转换 / 磁力筛选」那种挑牌，和「看弃牌堆」共用同一套版式。
 */
.overlay-cards,
.choice-reveal {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: start;
  justify-content: start;
  gap: 12px 15px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  cursor: grab;
}

.overlay-cards.is-scroll-dragging,
.choice-reveal.is-scroll-dragging {
  cursor: grabbing;
  user-select: none;
}

/* 牌面尺寸比原来的 96×136 放大 50%：偷看牌堆顶十几张时看得清牌名。 */
.overlay-cards .seen-card,
.choice-reveal .seen-card {
  width: 144px;
}

.overlay-cards .seen-card .mini-face,
.choice-reveal .seen-card .mini-face {
  width: 144px;
  height: 204px;
}

.overlay-cards .seen-card .seen-name,
.choice-reveal .seen-card .seen-name {
  font-size: 16px;
}

.overlay-cards .seen-card:disabled,
.choice-reveal .seen-card:disabled {
  opacity: 0.55;
  cursor: default;
}

.overlay-empty {
  color: var(--muted);
  font-size: 11px;
}

/*
 * 横排牌面 + 左右翻页按钮。
 *
 * 为什么不是只靠拖拽：`makeScrollDrag` 走的是指针拖，触屏上这条手势常常被
 * 页面自身的滚动吃掉，而深色玻璃面板上的横向滚动条几乎看不见——牌一多
 * 后半截就点不到。按钮是那批设备的唯一入口。
 */
.scroll-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.scroll-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding-top: 2px;
}

/* `hidden` 会被上面的 display:flex 冲掉，单独兜一条 */
.scroll-nav[hidden] {
  display: none;
}

/*
 * 按钮尺寸按「手指」定，不按鼠标定。
 *
 * 牌桌在手机上整体缩到 0.4 倍左右，一颗 34px 高的按钮落到屏幕上只剩十几像素，
 * 既看不清也戳不中——这正是「补了按钮还是点不到」的原因。所以基准放大到 44px
 * （iOS / Material 的最小触摸目标），字号也一起提上来，缩放之后仍然认得出是箭头。
 */
.scroll-btn {
  min-width: 76px;
  height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(18, 20, 26, 0.82);
  color: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}

.scroll-btn:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold);
}

.scroll-btn:disabled {
  opacity: 0.35;
  cursor: default;
}


/* ── 长按看全文 / 拖拽 ─────────────────────────────── */

.hand-card.is-held {
  --s: 2.2;
  /* 放大后底边会掉出台面，整体抬一点，整张牌都在桌内 */
  --hy: -92px;
  clip-path: none;
  /* 层级写在 table.css 的「图层顺序」那一段（唯一真源）。
   * 这里原本有个 z-index: 520——那是手牌还只有 250 那会儿的值，
   * 后来整档抬到 545，长按查看的牌反而掉到所有手牌下面。 */
  transform-origin: center bottom;
  box-shadow:
    0 26px 44px rgba(0, 0, 0, 0.75),
    0 0 0 2px rgba(231, 194, 122, 0.9);
}

.card.is-dragging {
  --s: 1.12;
  transition: none;
  cursor: grabbing;
  clip-path: none;
  transform-origin: center center;
  /* 让下面的牌能接到指针：拖素材到另一张手牌上靠 elementFromPoint 判定。 */
  pointer-events: none;
  box-shadow:
    0 30px 50px rgba(0, 0, 0, 0.8),
    0 0 0 2px rgba(139, 231, 179, 0.85);
}

/* 牌栈落点：拖过来才出现，进了范围变绿。
 * 层级要压在牌栈的牌之上（stack-card 70），否则拖到牌上时提示被盖得看不见。 */
#drop-hint {
  position: absolute;
  left: 430px;
  top: 290px;
  width: 750px;
  height: 240px;
  z-index: 200;
  display: grid;
  /* 文字顶在框的上沿：拖过来的牌正好压在框中央，居中的字会被它盖住。 */
  place-items: start center;
  padding-top: 12px;
  border: 2px dashed rgba(231, 194, 122, 0.4);
  border-radius: 16px;
  background: rgba(6, 14, 11, 0.32);
  color: rgba(240, 226, 190, 0.75);
  font-size: 15px;
  letter-spacing: 3px;
  text-shadow: 0 2px 8px #000;
  pointer-events: none;
}

#drop-hint.over {
  border-style: solid;
  border-color: rgba(139, 231, 179, 0.9);
  background: rgba(139, 231, 179, 0.1);
  color: rgba(200, 255, 224, 1);
  box-shadow:
    0 0 0 3px rgba(139, 231, 179, 0.18),
    inset 0 0 60px rgba(139, 231, 179, 0.16);
}

/* 瞄准中的箭头 / 落点圈 */
.arrow-line.aiming {
  stroke: rgba(139, 231, 179, 0.75);
  stroke-width: 6;
}

.target-ring.aiming {
  stroke: rgba(139, 231, 179, 0.8);
}

/* ── 底部动作条 ─────────────────────────────────────── */

#action-bar {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 600;
  display: flex;
  /* 竖排在右下角：按钮放大到 4 倍面积后，横排会压住手牌最右边那几张。 */
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  /* 按钮收到 2/3 后「结束回合」一行放得下，容器也跟着收窄。 */
  max-width: 360px;
  pointer-events: auto;
}

/* 动作按钮要大：结束回合 / 思考 / 放弃响应都得一眼看见、一点就中。
 * 11px 字 → 21px → 42px → 28px：翻倍之后又收回到原来的 2/3，
 * 字号、内边距、圆角、描边一起缩，比例保持不变。 */
.bar-btn {
  padding: 16px 32px;
  border-radius: 16px;
  border: 2px solid rgba(231, 194, 122, 0.28);
  background: rgba(8, 20, 16, 0.78);
  color: rgba(243, 234, 216, 0.94);
  font-size: 28px;
  line-height: 1.1;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.bar-btn:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--ink);
}

.bar-btn.primary {
  border-color: var(--gold);
  background: linear-gradient(180deg, #e9c77d, #c99b4d);
  color: #25190a;
  font-weight: 600;
}

.bar-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.bar-result {
  color: var(--green);
  font-size: 12px;
}

/* 弃牌时底栏顶部那行说明：按钮在下面，字在上面，右对齐贴着按钮的边。 */
.bar-hint {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  color: rgba(243, 234, 216, 0.72);
  font-size: 14px;
  line-height: 1.35;
  text-align: right;
  padding: 0 2px 2px;
}

/* 两行分工：上面一行是「这次要做什么」（引擎的 prompt，含「储蓄栏」这类关键处），
 * 下面一行才是「怎么点」。挤成一行会在右下角折三段，正事反而看不清。 */
.bar-hint-title {
  color: var(--gold, #e7c27a);
  font-weight: 600;
}

.bar-hint-sub {
  font-size: 13px;
  color: rgba(243, 234, 216, 0.66);
}

/* 素材身份提示：只有一行，用金色和自己的牌面原文（上面那段白字）分开。
 * 不再套 `.bar-hint-title` / `.bar-hint-sub` 两行——那是给长 prompt 用的，
 * 素材这条一句话就够，堆成两行会把右下角顶到屏幕底边。 */
.bar-hint-material {
  color: var(--gold, #e7c27a);
}

/*
 * 选中一张此刻打不出的牌时，底栏那行**完整描述**（不是短文本）。
 * 短文本为了塞进牌面压过一遍，想看「到底做什么」只能看原文；
 * 原文比它长一倍很常见，所以放开折行、给个宽度上限。
 */
.bar-card-text {
  max-width: min(58ch, 64vw);
  text-align: left;
  white-space: normal;
}

/* ── 选择弹窗：中央 + 可收起 ───────────────────────── */

#choice-modal {
  position: absolute;
  inset: 0;
  z-index: 800;
  display: grid;
  place-items: center;
  background: rgba(2, 6, 5, 0.46);
  backdrop-filter: blur(2px);
}

.choice-panel {
  width: 760px;
  max-height: 640px;
  padding: 24px 28px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 翻牌挑牌（质能转换 / 磁力筛选）：牌面放大 50% 后，面板也要跟着放宽。 */
.choice-panel.reveal {
  width: 1160px;
  max-width: calc(100vw - 80px);
  max-height: 94vh;
}

.choice-title {
  color: var(--ink);
  font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  font-size: 20px;
  line-height: 1.4;
}

.choice-hint {
  color: rgba(220, 214, 194, 0.55);
  font-size: 14px;
}

/* 列表式选择（对手手牌 / 暗储 / 牌堆顶）：**两行 N 列**，列多了横向拖。
   以前是纵向一排、几项就几行，选 6 张时面板会拉到屏幕外。 */
.choice-list {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-content: start;
  gap: 8px 10px;
  max-width: 78vw;
  overflow-x: auto;
  overflow-y: hidden;
}

.choice-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-radius: 10px;
  border: 1px solid rgba(231, 194, 122, 0.16);
  background: rgba(0, 0, 0, 0.24);
  color: var(--ink);
  font-size: 17px;
  text-align: left;
  cursor: pointer;
}

.choice-row:hover:not(:disabled) {
  border-color: var(--gold-soft);
}

.choice-row.picked {
  border-color: var(--gold);
  background: rgba(231, 194, 122, 0.16);
}

.choice-row:disabled {
  opacity: 0.5;
  cursor: default;
}

.choice-ord {
  flex: 0 0 22px;
  color: var(--gold);
  font-size: 15px;
  text-align: center;
}

.choice-name {
  flex: 1;
}

.choice-meta {
  color: var(--muted);
  font-size: 10px;
}

.choice-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  padding-top: 4px;
}

/* 选择面板里的按钮要够大：这是玩家唯一能按的东西，得一眼找到、一点就中。 */
.choice-actions .bar-btn {
  font-size: 26px;
  padding: 20px 44px;
  border-radius: 14px;
  min-width: 180px;
}

/*
 * 点桌子上的牌来选：面板不铺满屏幕，露出牌桌。
 * 只让面板本身可点，其余指针事件穿透到牌上。
 */
#choice-modal.pick {
  display: block;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}

#choice-modal.pick .choice-panel {
  position: absolute;
  left: 50%;
  top: 54px;
  transform: translateX(-50%);
  width: auto;
  min-width: 380px;
  max-width: 700px;
  max-height: none;
  padding: 10px 14px;
  gap: 6px;
  pointer-events: auto;
}

#choice-modal.pick .choice-title {
  font-size: 13px;
}

#choice-modal.pick .choice-hint {
  font-size: 10px;
}

/* 挑中的牌：绿框 + 名字变绿（看牌窗口与质能转换共用）。 */
.overlay-cards .seen-card.picked .mini-face > .card,
.choice-reveal .seen-card.picked .mini-face > .card {
  box-shadow:
    0 0 0 3px var(--green),
    0 10px 22px rgba(0, 0, 0, 0.6);
}

.overlay-cards .seen-card.picked .seen-name,
.choice-reveal .seen-card.picked .seen-name {
  color: var(--green);
}

/* 暗储：正面朝下，只看得到牌背与张数。
 * 不写 clip-path：让它跟明储一样走 .zone-card 的「只露上半张」。
 *
 * **不写 z-index**：暗储是储蓄栏里的一张牌，和同栏的明储一样该在 320（见
 * table.css 的「图层顺序」唯一真源）。这里原来那条 `z-index: 55` 是「牌背=背景」
 * 那会儿留下的，它把暗储压到明储底下，一栏里看着就像少了几张。 */
.card.card-back {
  cursor: default;
  box-shadow: 0 6px 13px rgba(0, 0, 0, 0.55);
}

.card.card-back .face {
  display: none;
}

.card.card-back img {
  border-radius: 4px;
  filter: brightness(0.72);
}

.card.is-pickable {
  cursor: pointer;
  box-shadow:
    0 0 0 2px rgba(139, 231, 179, 0.6),
    0 0 24px rgba(139, 231, 179, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.55);
}

.card.is-pickable:hover,
.card.is-pickable:focus-visible {
  box-shadow:
    0 0 0 3px var(--green),
    0 18px 34px rgba(0, 0, 0, 0.68);
}

/* 抬层级只给「不在手牌里」的可点牌（栏位、牌栈、弃牌堆）。
 *
 * 手牌不能吃这个 300：手牌整档在 545 以上（见 table.css 的「图层顺序」），
 * 而刚点中的那张牌同时也是 `:hover`——它的 `is-picked` / `is-doomed` 层级
 * 会被这条更高特异性的规则打成 300，整张牌掉到所有手牌底下。
 * 弃牌、置换时「选中的牌被邻居压住、看起来缩了一号」就是它。 */
.card.is-pickable:not(.hand-card):hover,
.card.is-pickable:not(.hand-card):focus-visible {
  z-index: 300;
}

/* ── 透视 / 展示：左边那个面板 ───────────────────────── */

/* 尺寸比原来放大 50%：透视的手牌、质能转换展示的牌都靠这个面板看，
   字和牌面小了读不清。宽度 252→378 刚好停在牌栈左缘，不压中间。 */
.seen-panel {
  position: absolute;
  left: 14px;
  top: 92px;
  z-index: 700;
  width: 378px;
  /* 别顶出牌桌：上下各留 20px 左右。 */
  max-height: calc(100% - 112px);
  padding: 15px 18px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
}

.seen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--gold);
  font-size: 18px;
  letter-spacing: 1px;
}

.seen-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 展示的那几组和透视的区分开：亮一点的金色标题，一眼看出是全场可见的。 */
.seen-group.shown .seen-label {
  color: var(--gold);
}

.seen-label {
  color: rgba(220, 214, 194, 0.62);
  font-size: 15px;
}

.seen-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 面板里的牌跟着放大：66×93 → 99×139。 */
.seen-panel .seen-card {
  width: 99px;
}

.seen-panel .seen-card .mini-face {
  width: 99px;
  height: 139px;
}

.seen-panel .seen-card .seen-name {
  font-size: 15px;
}

.seen-panel .seen-card.no-art .seen-name {
  min-height: 139px;
}

/*
 * 面板里的牌点一下原地放大 2 倍。
 *
 * 展示 / 透视出来的牌只有 99×139，牌面认不出是哪张，这面板就白开了。
 * 和牌栈、弃牌台是同一套手感：再点一下、点别处、按 Esc 收起（状态在 table.js
 * 的 `seenPeek`）。`transform` 不改排版，放大的牌不会把同排邻居挤走；溢出的
 * 那一半本来会被 `.seen-panel` 的 `overflow: auto` 裁掉，所以放大期间 JS 会给
 * 面板挂 `has-peek`，把溢出临时放出来。
 */
.seen-panel .seen-card {
  position: relative;
  transition: transform 120ms ease-out;
}

.seen-panel .seen-card.is-peek {
  z-index: 6;
  transform: scale(2);
}

.seen-panel.has-peek {
  overflow: visible;
}

/* 翻开挑牌（质能转换 / 磁力筛选 / 看牌堆）：**两行 N 列**，列多了横向拖。
   `.seen-cards` 的 flex 定义在 `.choice-reveal` 之后，会把 display:grid 冲掉，
   于是变成按宽度换行、几列就随缘——这里用两个类名把它压回网格。 */
.seen-cards.choice-reveal {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: start;
  justify-content: start;
  gap: 8px 10px;
}

.seen-card {
  width: 66px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
}

/* 牌面由 `.mini-face` 自己撑开（66×93，见文件上半部分的说明），这里只管名字条。 */
.seen-card .seen-name {
  color: var(--ink);
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
}

.seen-card.no-art .seen-name {
  min-height: 93px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(231, 194, 122, 0.2);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
}

.peek-btn {
  position: absolute;
  right: 26px;
  bottom: 58px;
  z-index: 850;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid rgba(231, 194, 122, 0.3);
  background: rgba(8, 20, 16, 0.8);
  color: var(--gold);
  font-size: 14px;
  cursor: pointer;
}

.peek-btn:hover {
  border-color: var(--gold);
}

/* ── 手牌悬停由 table.js 整排重排（见 table.css 的 .hand-open） ── */

/* ── 选目标：整块座位都能点，不用去戳小头像 ─────────────── */

.seat-hit {
  position: absolute;
  display: none;
  border-radius: 16px;
  pointer-events: none;
}

.seat-hit.targetable {
  display: block;
  z-index: 120;
  pointer-events: auto;
  cursor: pointer;
  border: 1px dashed rgba(231, 194, 122, 0.3);
  background: radial-gradient(
    62% 62% at 50% 50%,
    rgba(231, 194, 122, 0.05),
    rgba(231, 194, 122, 0.01)
  );
  box-shadow: inset 0 0 42px rgba(231, 194, 122, 0.06);
}

.seat-hit.targetable:hover {
  border-style: solid;
  border-color: rgba(231, 194, 122, 0.9);
  background: radial-gradient(
    62% 62% at 50% 50%,
    rgba(231, 194, 122, 0.2),
    rgba(231, 194, 122, 0.05)
  );
  box-shadow:
    inset 0 0 60px rgba(231, 194, 122, 0.2),
    0 0 26px rgba(231, 194, 122, 0.18);
}

/* 多选目标时已经点中的座位：实线金框，和「只是可点」区分开。 */
.seat-hit.targetable.target-picked {
  border-style: solid;
  border-color: var(--gold);
  background: radial-gradient(
    62% 62% at 50% 50%,
    rgba(231, 194, 122, 0.24),
    rgba(231, 194, 122, 0.06)
  );
  box-shadow:
    inset 0 0 60px rgba(231, 194, 122, 0.24),
    0 0 22px rgba(231, 194, 122, 0.2);
}

.seat-hud.target-picked .seat-name {
  color: var(--gold);
}

.seat-hit-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(231, 194, 122, 0.6);
  background: rgba(9, 20, 16, 0.84);
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 1px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

#target-hint {
  position: absolute;
  left: 50%;
  top: 252px;
  transform: translateX(-50%);
  z-index: 620;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(231, 194, 122, 0.5);
  background: rgba(9, 20, 16, 0.84);
  color: rgba(243, 234, 216, 0.86);
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

#target-hint b {
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 2px;
}

#target-hint[hidden] {
  display: none;
}

#stage.is-targeting {
  cursor: crosshair;
}

/* ── 置换 / 重抽：牌桌上方的大按钮 ───────────────────────
 *
 * 卡片底边锚在牌栈下沿（y≈490），往上生长，不再整个舞台垂直居中。
 * 居中时卡片下沿落在 y≈615，把「第几轮」（y≈499）和「回合阶段」（y≈528）
 * 两行整段压掉——而这两行正是做置换/重抽决定时要看的。
 * 用 flex-end + 底边留白锚定：卡片长高（选完牌多出一行「已选择」）只会往上长，
 * 永远盖不到下面那两行。
 */

#phase-panel {
  position: absolute;
  inset: 0;
  z-index: 610;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* 舞台高 900，底边距顶 490 → 留白 410。 */
  padding-bottom: 410px;
  pointer-events: none;
}

#phase-panel[hidden] {
  display: none;
}

.phase-panel-card {
  pointer-events: auto;
  min-width: 620px;
  max-width: 800px;
  padding: 28px 36px 30px;
  border-radius: 18px;
  border-color: rgba(231, 194, 122, 0.45);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(231, 194, 122, 0.12),
    0 0 50px rgba(231, 194, 122, 0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
  animation: phaseIn 180ms ease-out;
}

@keyframes phaseIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

.phase-panel-title {
  color: var(--gold);
  font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  font-size: 50px;
  letter-spacing: 6px;
}

.phase-panel-hint {
  color: rgba(220, 214, 194, 0.62);
  font-size: 30px;
  line-height: 1.5;
}

.phase-panel-picked {
  min-height: 18px;
  color: var(--green);
  font-size: 22px;
}

.phase-panel-picked[hidden] {
  display: none;
}

.phase-panel-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
}

.phase-btn {
  min-width: 240px;
  padding: 22px 38px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition:
    filter 140ms ease,
    transform 140ms ease,
    border-color 140ms ease;
}

.phase-btn.primary {
  border-color: rgba(255, 244, 214, 0.55);
  background: linear-gradient(180deg, #f0d18e, #c99b4d);
  color: #241806;
  box-shadow: 0 10px 24px rgba(201, 155, 77, 0.35);
}

.phase-btn.primary:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.phase-btn.secondary {
  border-color: rgba(231, 194, 122, 0.32);
  background: rgba(10, 24, 20, 0.78);
  color: rgba(243, 234, 216, 0.88);
}

.phase-btn.secondary:hover {
  border-color: var(--gold);
  color: var(--ink);
}

.phase-btn:disabled {
  opacity: 0.42;
  cursor: default;
  box-shadow: none;
}

/* ── 牌桌上的阵营标识（颜色与大厅那套一致） ─────────── */

.seat-hud[data-camp='A'] { --camp: #c9563f; }
.seat-hud[data-camp='B'] { --camp: #4a7fb5; }
.seat-hud[data-camp='C'] { --camp: #c8a13a; }
.seat-hud[data-camp='D'] { --camp: #6b9c55; }
.seat-hud[data-camp='E'] { --camp: #8b62b0; }
.seat-hud[data-camp='F'] { --camp: #b8733f; }

/* 双阵营（奇偶座）：奇数座蓝、偶数座红，与栏位外侧的色带同色 */
.seat-hud[data-camp='odd'] { --camp: #4a7fb5; }
.seat-hud[data-camp='even'] { --camp: #c9563f; }

/* 徽标已撤掉：阵营改由栏位外侧的色带表示（见 table.css 的 .camp-band）。 */

.seat-ally {
  margin-left: 5px;
  color: var(--camp, var(--gold));
  font-size: 9px;
  letter-spacing: 1px;
  opacity: 0.9;
}

/*
 * 对侧座位的名字沿用原来的 `translateY(-3px)`：牌背图标比它的容器矮一截，
 * 这点抬升正好让名字落进空档里。此处只记一笔，不覆盖。
 */

/* ── 连接页底部的教程入口 ───────────────────────────────
 * 教程是单独一页（`tutorial.html`），不连服务器，所以是普通链接。
 * 用金色下划线把它和上面那堆灰提示分开——这是新手第一个该点的地方。
 */
.tutorial-entry {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  line-height: 1.7;
}

.tutorial-entry a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-soft);
  padding-bottom: 1px;
}

.tutorial-entry a:hover {
  color: #f3d79b;
  border-bottom-color: var(--gold);
}