/* ============================================================================
   云衢杀 — 客户端样式
   视觉：一块黑板，几张便签，一支红笔。粉笔白是正文，红笔只批重点。
   ========================================================================= */

:root {
  /* 黑金：底色纯黑，强调一律用金 */
  --board: #0a0a0b;
  --board-deep: #040405;
  --panel: #151515;
  --panel-2: #101011;

  --chalk: #f4ecda;
  --chalk-2: #d9cfb6;
  /* 次要文字：原来偏暗，投屏/手机阳光下几乎看不清，提亮一档 */
  --dim: #a89d85;

  --red: #c8452f;
  --red-text: #e88a72;
  --sticky: #e8c56a;
  --gold: #e8c56a;
  --gold-dim: rgba(232, 197, 106, 0.42);
  --blue: #aeb9c6;
  --hair: rgba(232, 197, 106, 0.18);

  --paper: #f6f0df;
  --paper-ink: #241f17;
  --paper-line: rgba(70, 58, 34, 0.24);

  /* 牌面的三块颜色：卡牌样式（背包）会整组换掉 */
  --paper-hi: #f9f5ea;
  --paper-dim: rgba(35, 32, 26, 0.75);
  --paper-border: rgba(60, 50, 32, 0.35);
  --paper-sheen: rgba(255, 255, 255, 0.6);
  --card-tab: rgba(212, 72, 60, 0.16);

  /* 背景和导航条：界面样式（背包）会换掉这两组 */
  --glow-a: #1a160c;
  --glow-b: #101f19;
  --nav-bg: rgba(6, 12, 10, 0.92);

  /* 界面缩放，设置里可调 */
  --ui-scale: 1;

  /* 上手难度：绿 简单 / 黄 普通 / 红 专家（选将页的颜色条用） */
  --easy: #63b56b;
  --normal: #d9a13c;
  --expert: #c9563e;

  --serif: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun",
    "Iowan Old Style", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans SC",
    "PingFang SC", "Microsoft YaHei", sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --card-w: clamp(84px, 24vw, 108px);
}

/* ============================================================ 界面样式（背包）
   整套配色就是这几个变量，所以换主题只是换一组值——排版、尺寸、动画一律不动。
   data-theme 挂在 <html> 上，刷新后从 localStorage 里恢复。 */
html[data-theme="ink"] {
  --board: #05110d;
  --board-deep: #020806;
  --panel: #0c1812;
  --panel-2: #091410;
  --chalk: #e9f1e6;
  --chalk-2: #cfdccb;
  --dim: #94a99a;
  --red: #c24a33;
  --red-text: #e2907a;
  --sticky: #d8c07a;
  --gold: #d8c07a;
  --gold-dim: rgba(216, 192, 122, 0.42);
  --blue: #a7bcc2;
  --hair: rgba(216, 192, 122, 0.18);
  --glow-a: #10211a;
  --glow-b: #0c2419;
  --nav-bg: rgba(4, 12, 9, 0.92);
}

html[data-theme="sepia"] {
  --board: #140f09;
  --board-deep: #0a0704;
  --panel: #1f1811;
  --panel-2: #18120c;
  --chalk: #f3e8d2;
  --chalk-2: #ddcdae;
  --dim: #b3a186;
  --red: #b8452f;
  --red-text: #dd8a70;
  --sticky: #d9a86a;
  --gold: #d9a86a;
  --gold-dim: rgba(217, 168, 106, 0.42);
  --blue: #c0b096;
  --hair: rgba(217, 168, 106, 0.2);
  --glow-a: #2a1f12;
  --glow-b: #1c1a10;
  --nav-bg: rgba(12, 9, 5, 0.92);
}

html[data-theme="blue"] {
  --board: #070b14;
  --board-deep: #03050b;
  --panel: #0e1524;
  --panel-2: #0a1019;
  --chalk: #e8eef8;
  --chalk-2: #c8d3e4;
  --dim: #93a3bd;
  --red: #c14a3c;
  --red-text: #e08d80;
  --sticky: #a9c6e8;
  --gold: #a9c6e8;
  --gold-dim: rgba(169, 198, 232, 0.42);
  --blue: #a9c6e8;
  --hair: rgba(169, 198, 232, 0.2);
  --glow-a: #111a2e;
  --glow-b: #0b1a2a;
  --nav-bg: rgba(5, 8, 14, 0.92);
}

/* 焚城：云衢的主题插画。火很亮，所以整张图压一层深色渐变，
   面板再叠自己的底色——白字不会糊在火焰上。 */
html[data-theme="wdf"] {
  --board: #120907;
  --board-deep: #080403;
  --panel: #1d100b;
  --panel-2: #150a07;
  --chalk: #f7ecda;
  --chalk-2: #ddc9b1;
  --dim: #b39a83;
  --red: #d2552f;
  --red-text: #f0a080;
  --sticky: #f2b878;
  --gold: #f2b878;
  --gold-dim: rgba(242, 184, 120, 0.42);
  --blue: #c2b6b0;
  --hair: rgba(242, 184, 120, 0.2);
  --glow-a: #4a1c0a;
  --glow-b: #230d06;
  --nav-bg: rgba(12, 6, 4, 0.9);
}

html[data-theme="wdf"] body {
  background:
    linear-gradient(180deg, rgba(8, 4, 3, 0.72) 0%, rgba(8, 4, 3, 0.85) 48%, rgba(8, 4, 3, 0.95) 100%),
    radial-gradient(100% 55% at 50% 0%, rgba(255, 122, 40, 0.16) 0%, transparent 70%),
    url("/theme/wdf.webp") center 12% / cover no-repeat,
    var(--board-deep);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%; margin: 0; }

body {
  overflow: hidden;
  background:
    radial-gradient(120% 75% at 50% -5%, var(--glow-a) 0%, transparent 62%),
    radial-gradient(110% 65% at 50% 108%, var(--glow-b) 0%, transparent 58%),
    var(--board-deep);
  color: var(--chalk);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

/* 键盘走到哪儿都看得见 */
:focus-visible {
  outline: 2px solid rgba(232, 197, 106, 0.85);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 黑板上的粉笔灰 */
.dust {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

[hidden] { display: none !important; }

::selection { background: var(--sticky); color: #1a160c; }

:focus-visible { outline: 2px solid var(--sticky); outline-offset: 3px; border-radius: 2px; }

/**
 * 界面缩放：不用 zoom（缩小时 body 的盒子会跟着缩，底下就空出一条黑边）。
 * 做法：#app 固定铺满可视区，里面的 .scale-root 放大到「100% / 比例」再整体 scale 回去。
 * 只用百分比、不用 vh/vw：手机浏览器地址栏收起/展开时 vh 会变，百分比不会，
 * 所以横屏缩到「极小」也不会在下面漏一条黑边。
 */
#app {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.scale-root {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / var(--ui-scale));
  height: calc(100% / var(--ui-scale));
  transform: scale(var(--ui-scale));
  transform-origin: 0 0;
  overflow: hidden;
}

.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* ------------------------------------------------------------------ 基础件 */

.btn {
  appearance: none;
  border: 1px solid rgba(233, 239, 231, 0.32);
  background: transparent;
  color: var(--chalk);
  font-family: var(--sans);
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  padding: 12px 20px;
  border-radius: 3px;
  cursor: pointer;
  transition: transform 0.16s var(--ease), background-color 0.2s, border-color 0.2s, color 0.2s;
}

.btn:hover:not(:disabled) { border-color: var(--chalk); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }

.btn--chalk {
  background: var(--sticky);
  color: #231c0d;
  border-color: #b8913a;
  font-weight: 600;
  box-shadow: 0 8px 18px -14px #000, inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.btn--ghost { color: var(--chalk-2); }

.btn--tiny { font-size: 0.72rem; padding: 7px 12px; letter-spacing: 0.12em; }
.btn--sm { padding: 9px 16px; font-size: 0.82rem; }

.btn--end {
  background: rgba(212, 72, 60, 0.14);
  border-color: rgba(212, 72, 60, 0.5);
  color: #f0b5ad;
}

.btn--end:not(:disabled) { background: rgba(212, 72, 60, 0.2); border-color: var(--red); color: #ffd9d3; }

.field { display: block; }

.field__label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: var(--dim);
  margin-bottom: 7px;
}

.field__input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(233, 239, 231, 0.3);
  color: var(--chalk);
  font-family: var(--serif);
  font-size: 1.16rem;
  letter-spacing: 0.06em;
  padding: 9px 2px;
  outline: none;
  transition: border-color 0.2s;
}

.field__input::placeholder { color: #90a89a; }
.field__input:focus { border-bottom-color: var(--sticky); }

.field__input--code {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  font-size: 1.02rem;
}

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); display: inline-block; }
.dot[data-state="online"] { background: #7cb37a; }
.dot[data-state="connecting"] { background: var(--sticky); animation: blink 1.4s ease-in-out infinite; }
.dot[data-state="offline"] { background: var(--red); }
.dot[data-state="idle"] { background: transparent; border: 1px solid var(--dim); }

@keyframes blink { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* -------------------------------------------------------------------- 菜单 */

/* 竖向居中改成 justify-content:flex-start + 子元素 margin:auto：
   内容比屏幕高时 auto 外边距变 0，从顶部开始排，永远滚得到最上面。 */
.screen--menu { align-items: center; justify-content: flex-start; padding: 28px 24px; overflow-y: auto; }

/* 用 auto 外边距居中：内容比屏幕高时还能滚到最上面，不会被 flex 居中裁掉 */
.menu { width: 100%; max-width: 352px; text-align: center; margin: auto 0; }
.menu__mark { width: 72px; margin: 0 auto 14px; color: var(--dim); }
.menu__mark svg { display: block; width: 100%; height: auto; }

.menu__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.9rem, 12vw, 4rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--chalk);
  line-height: 1;
}

.menu__latin {
  margin: 14px 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.62em;
  text-indent: 0.62em;
  color: var(--red-text);
}

.menu__blurb { margin: 16px 0 0; font-size: 0.86rem; line-height: 1.8; color: var(--dim); }

.menu__form { margin-top: 26px; display: flex; flex-direction: column; gap: 13px; text-align: left; }

.menu__join {
  display: grid;
  grid-template-columns: 1fr auto;
  border-bottom: 1px solid rgba(233, 239, 231, 0.3);
}

.menu__join .field__input { border-bottom: 0; padding-left: 10px; }
.menu__join .btn { border: 0; border-left: 1px solid rgba(233, 239, 231, 0.3); border-radius: 0; color: var(--sticky); }

.menu__error { min-height: 1.2em; margin: 12px 0 0; font-size: 0.8rem; color: #f0a396; }

/* 登录 / 注册页 */
.screen--auth {
  align-items: center;
  justify-content: flex-start;
  padding: 32px 24px;
  overflow-y: auto;
}

.auth {
  width: 100%;
  max-width: 340px;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: var(--chalk);
  text-align: center;
}

.auth__sub {
  margin: -6px 0 4px;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--dim);
  text-align: center;
}

.auth .field__label { margin-bottom: 5px; letter-spacing: 0.18em; }

.auth .field__input {
  font-size: 1rem;
  letter-spacing: 0.03em;
  padding: 8px 2px;
}

.auth .btn { width: 100%; }

.seg--wide { display: flex; width: 100%; }
.seg--wide .seg__item { flex: 1; letter-spacing: 0.06em; }

/* 服务器选择 */
.server {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.server__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--hair);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.server__opt:has(input:checked) {
  border-color: rgba(232, 197, 106, 0.7);
  background: rgba(232, 197, 106, 0.07);
}

.server__opt input[type="radio"] {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  accent-color: var(--sticky);
  cursor: pointer;
}

.server__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.server__name { font-size: 0.82rem; letter-spacing: 0.06em; }
.server__host { font-size: 0.7rem; color: var(--dim); letter-spacing: 0.04em; }
.server__input { font-size: 0.78rem; padding: 3px 0; border-bottom-color: rgba(244, 236, 218, 0.2); }
.server__hint { margin: 0; min-height: 1.1em; font-size: 0.66rem; line-height: 1.5; color: var(--dim); }

.menu__link { margin: 24px 0 0; display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--dim); }

/* -------------------------------------------------------------------- 房间 */

.screen--room { padding: 26px 22px calc(22px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; justify-content: safe center; overflow-y: auto; }
/* 房间页的每一块都保持自然高度：内容超高就让整页滚动，别把聊天框/按钮压扁叠在一起 */
.screen--room > * { flex: 0 0 auto; }

.room__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--hair); padding-bottom: 14px; }
.room__label { margin: 0; font-size: 0.7rem; letter-spacing: 0.24em; color: var(--dim); }
.room__code {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: 2.6rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--sticky);
  line-height: 1;
}
.room__hint { margin: 16px 0 0; font-size: 0.82rem; color: var(--dim); line-height: 1.7; }
.room__flags { margin: 6px 0 0; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--sticky); }
.room__head-btns { display: flex; gap: 8px; }

/*
 * 座位：两列三行，**按列**铺（grid-auto-flow: column），所以是
 *   1 4
 *   2 5
 *   3 6
 * 屏幕再宽也保持这两列——排成一行六个的话每张座位卡太窄，名字和「准备」都挤在一起。
 */
.seats {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, minmax(0, auto));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.seat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--hair);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(233, 239, 231, 0.03), transparent);
  min-height: 60px;
  min-width: 0;
}

/* 大厅阶段座位都能点：别人的座位＝换座，自己的座位＝去旁观席 */
.seat[data-can="true"] { cursor: pointer; }
.seat[data-can="true"]:hover { border-color: var(--gold-dim); background: rgba(232, 197, 106, 0.06); }
.seat[data-mine="true"] { border-color: rgba(232, 197, 106, 0.5); }

.seat__main { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.seat__top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }

.seat__no { font-family: var(--serif); font-size: 1rem; color: var(--dim); flex: 0 0 auto; }
.seat__name {
  flex: 1;
  min-width: 0;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seat__tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.seat__tags:empty { display: none; }

.seat__tag--ready { color: #9ed49a; border-color: rgba(120, 180, 110, 0.5); }
.seat__tag--me { color: var(--sticky); border-color: rgba(232, 197, 106, 0.75); }

.seat__tag--bot { color: var(--blue); border-color: rgba(143, 182, 207, 0.45); }

.seat__tag { font-size: 0.66rem; letter-spacing: 0.18em; color: var(--sticky); border: 1px solid rgba(232, 197, 106, 0.45); padding: 3px 8px; border-radius: 2px; }
.seat--empty { border-style: dashed; color: var(--dim); }
.seat--empty .seat__name { color: var(--dim); }
.seat--off { opacity: 0.55; }

.room__actions { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }

/* 桌面宽度：按钮排成一行，别把旁观席挤到屏幕外面去 */
@media (min-width: 900px) and (orientation: landscape) {
  .room__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .room__actions .btn { flex: 0 0 auto; }
  .room__wait { margin: 0; }
}

/* ------------------------------------------------------- 准备界面的常驻聊天 */

.room__chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  min-height: 0;
}

.room__chat-list {
  list-style: none;
  margin: 0;
  padding: 8px 10px;
  flex: 0 0 auto;
  height: 132px;
  min-height: 132px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--hair);
  border-radius: 3px;
  background: rgba(6, 12, 10, 0.45);
  scrollbar-width: thin;
}

.room__chat-item { display: flex; flex-direction: column; font-size: 0.8rem; line-height: 1.5; }
.room__chat-item[data-mine="true"] { align-items: flex-end; text-align: right; }
.room__chat-who { font-size: 0.7rem; color: var(--dim); letter-spacing: 0.04em; }
.room__chat-text { color: var(--chalk-2); word-break: break-word; }
.room__chat-item[data-mine="true"] .room__chat-text { color: var(--sticky); }
.room__chat-empty { font-size: 0.76rem; color: var(--dim); }

.room__chat-form { display: flex; gap: 8px; }

/* ------------------------------------------------------------ 旁观席清单 */

.room__spec { margin-top: 16px; }

.room__spec-head {
  margin: 0 0 6px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--dim);
}

.room__spec-tip { font-size: 0.7rem; letter-spacing: 0.04em; opacity: 0.75; }

.room__spec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
}

.room__spec-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 4px;
  border: 1px solid var(--hair);
  border-radius: 3px;
  font-size: 0.78rem;
  color: var(--chalk-2);
  background: rgba(255, 255, 255, 0.02);
}

.room__spec-item[data-can="true"] { cursor: pointer; }
.room__spec-item[data-can="true"]:hover { border-color: var(--gold-dim); background: rgba(232, 197, 106, 0.08); }
.room__spec-item[data-me="true"] { border-color: rgba(232, 197, 106, 0.5); color: var(--sticky); }

.room__spec-ava {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.room__spec-ava .avatar-emoji { font-size: 0.8rem; }
.room__spec-empty { font-size: 0.74rem; color: var(--dim); }

/* 够宽的时候也只放宽间距，座位本身还是一行两个（两列） */
@media (min-width: 1360px) {
  .seats { gap: 12px 16px; }
  .seat { padding: 12px 16px; min-height: 64px; }
  .seat__name { font-size: 0.92rem; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .room__chat-list { height: 84px; min-height: 84px; }
}
.room__wait { margin: 0; text-align: center; font-size: 0.8rem; color: var(--dim); letter-spacing: 0.1em; }

/* -------------------------------------------------------------------- 选将 */

.screen--select { padding: 24px 20px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; }
.select__head { text-align: center; }
.select__title { margin: 0; font-family: var(--serif); font-size: 1.5rem; letter-spacing: 0.16em; text-indent: 0.16em; }
.select__sub { margin: 10px 0 0; font-size: 0.78rem; color: var(--dim); letter-spacing: 0.08em; }

.roster { margin-top: 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.roster-card {
  text-align: left;
  padding: 14px 14px 12px;
  border: 1px solid var(--hair);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(244, 236, 218, 0.035), transparent);
  color: var(--chalk);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.2s, transform 0.16s var(--ease), background-color 0.2s;
}

.roster-card:hover { border-color: rgba(233, 239, 231, 0.5); }
.roster-card[data-mine="true"] { border-color: var(--sticky); background: rgba(232, 197, 106, 0.1); }
.roster-card[data-taken="true"] { opacity: 0.4; cursor: not-allowed; }

.roster-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.roster-card__name { font-family: var(--serif); font-size: 1.12rem; letter-spacing: 0.1em; }
.roster-card__hp { font-size: 0.74rem; color: var(--dim); }
.roster-card__title { font-size: 0.66rem; color: var(--dim); letter-spacing: 0.08em; }
.roster-card__skill { font-size: 0.72rem; line-height: 1.5; color: var(--chalk-2); border-top: 1px solid var(--hair); padding-top: 6px; margin-top: 2px; }
.roster-card__skill b { color: var(--sticky); font-weight: 600; }
.roster-card__owner { font-size: 0.68rem; color: var(--sticky); }

/* -------------------------------------------------------------------- 牌桌 */

/* 竖屏兜底：竖着堆；横屏（主场景）改成「对手在左、牌桌居中、战报在右」。 */
.screen--table {
  display: grid;
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "head"
    "foes"
    "center"
    "me"
    "log"
    "hand";
  height: 100%;
  padding-top: max(6px, env(safe-area-inset-top));
  overflow: hidden;
}

.table__head { grid-area: head; }

.table__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 8px;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: var(--dim);
  border-bottom: 1px solid var(--hair);
}

.table__phase { color: var(--sticky); }
.table__turn { flex: 1; color: var(--chalk-2); }
.table__code { color: var(--dim); }

/* 房间开了效果时，牌桌顶上挂一小条，省得忘了这局规则不一样 */
.table__rules {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--sticky);
  border: 1px solid rgba(232, 197, 106, 0.35);
  border-radius: 2px;
  padding: 1px 6px;
  white-space: nowrap;
}

/* 局内座位号：对手压在头像左上角，自己是名字前的一小枚 */
.foe__seat {
  position: absolute;
  left: -5px;
  top: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 3px;
  border: 1px solid var(--hair);
  background: rgba(8, 10, 9, 0.88);
  color: var(--chalk-2);
  font-size: 0.62rem;
  line-height: 15px;
  text-align: center;
  z-index: 2;
}

.me__seat {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-right: 6px;
  border-radius: 3px;
  border: 1px solid var(--hair);
  color: var(--chalk-2);
  font-size: 0.66rem;
  vertical-align: middle;
}

/* 武将照片 */
.roster-card__portrait {
  display: block;
  width: 100%;
  height: 64px;
  object-fit: cover;
  object-position: 50% 6%;
  border-radius: 2px;
  margin-bottom: 2px;
  background: var(--panel-2);
}

.foe__body { display: flex; gap: 8px; align-items: flex-start; }

.foe__avatar {
  width: 44px;
  height: 56px;
  flex: 0 0 auto;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 3px;
  border: 1px solid rgba(232, 197, 106, 0.28);
  background: var(--panel-2);
}

.foe__ava { position: relative; display: block; flex: 0 0 auto; line-height: 0; }

/* 觉醒 / 出局 / 濒死：压在头像下沿，绝对定位，不改变人物卡高度 */
.foe__status {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  line-height: 1;
}

.foe__status .foe__flag {
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
  padding: 0 4px;
  border-radius: 2px;
  background: rgba(6, 6, 7, 0.86);
  border: 1px solid rgba(230, 147, 134, 0.55);
  color: #f0a99b;
  white-space: nowrap;
}

.foe__status .foe__flag--awaken {
  background: var(--sticky);
  border-color: transparent;
  color: #201a0c;
}

/* 脆弱（轮椅散架的代价）：受到的伤害 +1，红色，和虚弱的紫区分开 */
.foe__status .foe__flag--fragile,
.me__row .foe__flag--fragile {
  background: rgba(190, 72, 60, 0.94);
  border-color: transparent;
  color: #ffece8;
}

.foe__col { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.me__avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 50%;
  border: 1px solid rgba(232, 197, 106, 0.3);
  background: var(--panel-2);
}
.foe__col > .foe__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foe__col > .foe__char { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foe__col > .foe__hp { display: flex; align-items: baseline; gap: 3px; margin-top: 2px; }
.foe__col > .foe__bar { display: block; margin-top: 4px; }
.me__ident { display: flex; flex-direction: column; min-width: 0; }
.me__ident > .me__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me__ident > .me__char { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 对手 */
.foes { grid-area: foes; display: flex; gap: 8px; padding: 10px 10px 6px; justify-content: center; }

.foe {
  overflow: hidden;
  flex: 1 1 0;
  min-width: 0;
  max-width: 170px;
  border: 1px solid var(--hair);
  border-radius: 3px;
  padding: 8px 9px;
  background: linear-gradient(180deg, rgba(244, 236, 218, 0.035), transparent);
  position: relative;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.foe[data-active="true"] { border-color: var(--sticky); box-shadow: 0 0 0 1px rgba(232, 197, 106, 0.5); }
.foe[data-dead="true"] { opacity: 0.4; filter: grayscale(0.6); }
.foe[data-target="true"] { border-color: var(--red); box-shadow: 0 0 0 2px var(--red); cursor: pointer; }

.foe__top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.foe__name { font-size: 0.78rem; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foe__char { font-size: 0.64rem; color: var(--dim); white-space: nowrap; }

.foe__hp { margin-top: 6px; display: flex; align-items: baseline; gap: 4px; }
.foe__hp b { font-family: var(--serif); font-size: 1.3rem; color: var(--chalk); line-height: 1; }
.foe__hp span { font-size: 0.62rem; color: var(--dim); }

.foe__bar { display: block; height: 3px; margin-top: 6px; background: rgba(244, 236, 218, 0.1); border-radius: 2px; overflow: hidden; }
.foe__bar i { display: block; height: 100%; background: var(--red); transition: width 0.35s var(--ease); }

.foe__meta { margin-top: 6px; display: flex; flex-wrap: nowrap; overflow: hidden; gap: 5px 8px; font-size: 0.62rem; color: var(--dim); }

/* 自己的信息块 */
.me__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.me__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.me__row--sub { align-items: center; gap: 6px; }
.me__row .me__hp { margin-left: auto; }
.me__row .me__hp b { font-size: 1.15rem; }
.me__row .me__hp span { font-size: 0.6rem; color: var(--dim); }

/* 身份标签：放在 meta 行里，不再压在名字上 */
.foe__role {
  font-size: 0.6rem;
  padding: 1px 5px;
  background: var(--red);
  color: #fff0ee;
  border-radius: 2px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.foe__equip { color: var(--sticky); }

/* 桌面中央：最近打出的一张牌（三国杀那种"牌摊在桌上"） */
.table-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-height: 0;
  max-height: 100%;
  flex: 0 1 auto;
}

.table-card__who {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--dim);
  white-space: nowrap;
}

.table-card__face {
  position: relative;
  height: 100%;
  max-height: 135px;
  width: auto;
  aspect-ratio: 5 / 6.6;
  min-height: 0;
  border-radius: 4px;
  border: 1px solid rgba(60, 50, 32, 0.4);
  background: linear-gradient(170deg, #faf6ec 0%, #eee7d6 100%);
  color: var(--paper-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: var(--serif);
  box-shadow: 0 14px 22px -16px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(232, 197, 106, 0.3);
}

.tc__subj {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.6rem;
  color: #fff;
  background: #666;
}

.tc__subj[data-subj="chinese"] { background: #b8503f; }
.tc__subj[data-subj="math"] { background: #3f6f9e; }
.tc__subj[data-subj="english"] { background: #7a5ba8; }
.tc__subj[data-subj="physics"] { background: #2f7d74; }
.tc__subj[data-subj="chemistry"] { background: #a8742a; }
.tc__subj[data-subj="biology"] { background: #4a7d3f; }
.tc__subj[data-subj="pe"] { background: #2f7d74; }
.tc__subj[data-subj="history"] { background: #b8503f; }

.tc__name { font-size: 1.9rem; line-height: 1; letter-spacing: 0.03em; font-weight: 600; }
.tc__name[data-long="true"] { font-size: 0.86rem; letter-spacing: 0.02em; }
.tc__brief { font-size: 0.54rem; letter-spacing: 0.1em; color: rgba(35, 32, 26, 0.62); }

.table-card.is-dropping .table-card__face { animation: cardDrop 0.44s var(--ease) both; }

@keyframes cardDrop {
  0% { opacity: 0; transform: translateY(-52px) scale(1.4) rotate(-8deg); filter: blur(3px); }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; }
}
/* 中央 */
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 16px 4px;
  min-height: 0;
  grid-area: center;
  /* 和出牌记录比层：中间的行动提示/牌堆要压在记录上面 */
  position: relative;
  z-index: 7;
}

.center__top { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 6px; }

.center__prompt { margin: 0; text-align: center; font-size: 0.86rem; line-height: 1.6; color: var(--chalk-2); max-width: 34ch; }
.center__prompt[data-hot="true"] { color: var(--sticky); }
.center__prompt em { color: var(--red-text); font-style: normal; }
.center__piles { display: flex; gap: 14px; font-size: 0.7rem; letter-spacing: 0.1em; color: var(--dim); }

/* 自己 */
.me {
  grid-area: me;
  margin: 0 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--hair);
  display: flex;
  align-items: center;
  gap: 12px;
  /* 自己的信息条也要压在出牌记录上面 */
  position: relative;
  z-index: 8;
}

.me__ident { min-width: 0; }
.me__name { font-size: 0.86rem; letter-spacing: 0.06em; }
.me__char { display: block; font-size: 0.66rem; color: var(--dim); margin-top: 2px; }
.me__hp { display: flex; align-items: baseline; gap: 3px; margin-left: auto; }
.me__hp b { font-family: var(--serif); font-size: 1.7rem; line-height: 1; }
.me__hp span { font-size: 0.62rem; color: var(--dim); }
.me__zone { display: flex; gap: 4px; flex-wrap: wrap; }
.me__chip { font-size: 0.62rem; padding: 2px 6px; border: 1px solid var(--hair); border-radius: 2px; color: var(--chalk-2); }

/* 手牌 */
.hand-wrap {
  grid-area: hand;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(8, 17, 14, 0.2), rgba(8, 17, 14, 0.85));
  /* 手牌永远在最上面：出牌记录和人物卡算一层，不能盖住手牌 */
  position: relative;
  z-index: 9;
}

.hand {
  display: flex;
  gap: 8px;
  padding: 12px 12px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: flex-start;
  justify-content: safe center;
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 236, 218, 0.22) transparent;
}

.hand::-webkit-scrollbar { height: 4px; }
.hand::-webkit-scrollbar-thumb { background: rgba(244, 236, 218, 0.22); border-radius: 2px; }

.bar { display: flex; gap: 8px; justify-content: flex-end; padding: 0 12px calc(10px + env(safe-area-inset-bottom)); }

/* 日志：按事件类型上色，新的一条滑进来，自动跟到底部 */
.log {
  grid-area: log;
  list-style: none;
  margin: 0;
  padding: 0 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 12em;
  overflow-y: auto;
  overscroll-behavior: contain;
  max-width: 46ch;
  text-align: left;
  justify-content: flex-start;
  font-size: 0.76rem;
  line-height: 1.62;
  color: var(--dim);
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 236, 218, 0.2) transparent;
}

.log::-webkit-scrollbar { width: 4px; }
.log::-webkit-scrollbar-thumb { background: rgba(244, 236, 218, 0.2); border-radius: 2px; }

.log__item {
  padding-left: 8px;
  border-left: 2px solid transparent;
  flex: 0 0 auto;
}

.log__item.is-new { animation: logIn 0.3s var(--ease) both; }

@keyframes logIn {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: none; }
}

.log__item--damage,
.log__item--hit { color: #f0938a; border-left-color: rgba(212, 72, 60, 0.65); }
.log__item--heal,
.log__item--save { color: #a3d99c; border-left-color: rgba(120, 180, 110, 0.55); }
.log__item--turn { color: var(--sticky); border-left-color: rgba(232, 197, 106, 0.5); margin-top: 3px; }
.log__item--death,
.log__item--over { color: #ff8f80; font-weight: 600; border-left-color: var(--red); }
.log__item--wuxie,
.log__item--armor,
.log__item--immune { color: #b9c9ee; border-left-color: rgba(150, 175, 225, 0.5); }
.log__item--judge { color: var(--blue); border-left-color: rgba(143, 182, 207, 0.5); }
/* 虚弱：枪伤留下的负面状态，紫色和「无效 / 抵消」的蓝区分开 */
.log__item--weak { color: #c8b4f0; border-left-color: rgba(150, 120, 215, 0.6); }
.log__item--play,
.log__item--answer,
.log__item--ask,
.log__item--equip { color: var(--chalk-2); }
.log__item--draw,
.log__item--discard,
.log__item--skip,
.log__item--shuffle { color: rgba(147, 167, 154, 0.85); }

/* ------------------------------------------------------------------ 装备徽章 */

.equip-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }

/*
 * 人物卡上的装备栏：固定占一行（空着也不塌），徽章一律不换行、装不下就省略号。
 * 这样"装备了武器/防具"只是把这一行填满，卡片尺寸一动不动。
 */
.foe .equip-row,
.me .equip-row {
  flex-wrap: nowrap;
  align-items: center;
  overflow: hidden;
  height: 19px;
  margin-top: 3px;
}

.me .equip-row { margin-top: 0; flex: 0 1 auto; min-width: 0; }

/* 自己那一行也别换行：装备多了应该挤掉武将名，而不是把信息块顶高 */
.me .me__row--sub { flex-wrap: nowrap; }
.me .me__row--sub > .me__char { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.foe .equip-row .equip,
.me .equip-row .equip {
  flex: 0 1 auto;
  min-width: 0;
  height: 19px;
  padding: 0 5px;
  gap: 3px;
  font-size: 0.68rem;
}

/* 三件以上就把图标收起来，把这点宽度让给名字（装不下时由 b 省略） */
.foe .equip-row:has(.equip:nth-child(3)) .equip svg,
.me .equip-row:has(.equip:nth-child(3)) .equip svg { display: none; }

.foe .equip-row:has(.equip:nth-child(3)) .equip,
.me .equip-row:has(.equip:nth-child(3)) .equip { padding: 0 3px; font-size: 0.64rem; }

.foe .equip-row .equip b,
.me .equip-row .equip b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.equip {
  display: inline-flex;
  max-width: 100%;
  overflow: hidden;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 2px;
  border: 1px solid rgba(232, 197, 106, 0.45);
  background: rgba(232, 197, 106, 0.1);
  color: var(--sticky);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.equip svg { width: 11px; height: 11px; flex: 0 0 auto; }
.equip b { font-weight: 600; }

/* 装备的当前耐久：跟在名字后面的小数字 */
.equip__dur {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 0.7rem;
  line-height: 1;
  opacity: 0.72;
  letter-spacing: 0;
}

/* 散架的轮椅：槽位还在，但整块灰掉，一眼看出“挡不了伤害了” */
.equip[data-broken="true"] {
  border-color: rgba(160, 160, 160, 0.4);
  background: rgba(160, 160, 160, 0.08);
  color: #8b8b86;
  filter: grayscale(1);
}

.equip[data-kind="armor"] {
  border-color: rgba(143, 182, 207, 0.45);
  background: rgba(143, 182, 207, 0.1);
  color: var(--blue);
}

.equip[data-kind="judge"] {
  border-color: rgba(170, 150, 215, 0.45);
  background: rgba(170, 150, 215, 0.1);
  color: #c0aee8;
}

.foe__flag { color: #e69386; }

/*
 * 虚弱（星宇打手牌的附加效果）：人物卡头像下沿和「我」的信息条共用。
 * 用紫色和其他状态区分开，一眼能看出"这人下回合摸不了牌"。
 */
.foe__status .foe__flag--weak,
.me__row .foe__flag--weak {
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
  padding: 0 4px;
  border-radius: 2px;
  border: 1px solid transparent;
  background: rgba(122, 96, 200, 0.92);
  color: #f4eeff;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- 变化动画 */

.me { position: relative; }

.foe.is-hit,
.me.is-hit { animation: panelHit 0.62s ease-out, shakeHit 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97); }

.foe.is-heal,
.me.is-heal { animation: panelHeal 0.62s ease-out; }

@keyframes panelHit {
  0% { background-color: rgba(212, 72, 60, 0.26); box-shadow: inset 0 0 0 2px rgba(212, 72, 60, 0.8); }
  100% { background-color: transparent; box-shadow: none; }
}

/*
 * 挨打时整块抖一下，抖幅由 --shake 决定（app.js 按掉血量设）：
 * 掉 1 点是轻轻一晃，掉 5 点以上整块都在甩。
 */
@keyframes shakeHit {
  0%, 100% { transform: translate3d(0, 0, 0); }
  12% { transform: translate3d(calc(var(--shake, 3px) * -0.85), calc(var(--shake, 3px) * 0.3), 0); }
  26% { transform: translate3d(var(--shake, 3px), calc(var(--shake, 3px) * -0.35), 0); }
  40% { transform: translate3d(calc(var(--shake, 3px) * -0.7), 0, 0); }
  56% { transform: translate3d(calc(var(--shake, 3px) * 0.55), calc(var(--shake, 3px) * 0.2), 0); }
  72% { transform: translate3d(calc(var(--shake, 3px) * -0.3), 0, 0); }
  86% { transform: translate3d(calc(var(--shake, 3px) * 0.15), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .foe.is-hit,
  .me.is-hit { animation: panelHit 0.62s ease-out; }
}

@keyframes panelHeal {
  0% { background-color: rgba(120, 180, 110, 0.22); box-shadow: inset 0 0 0 2px rgba(120, 190, 110, 0.7); }
  100% { background-color: transparent; box-shadow: none; }
}

.float {
  position: absolute;
  right: 12px;
  top: 10px;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
  animation: floatUp 1s ease-out forwards;
}

.float--down { color: #ff9a8d; }
.float--up { color: #a8e0a0; }

@keyframes floatUp {
  0% { opacity: 0; transform: translateY(5px) scale(0.9); }
  20% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-28px) scale(1); }
}

.foe[data-turn="true"] { animation: turnPulse 2.4s ease-in-out infinite; }

@keyframes turnPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(232, 197, 106, 0.45); }
  50% { box-shadow: 0 0 0 2px rgba(232, 197, 106, 0.8); }
}

/* --------------------------------------------------------------------- 牌 */

.card {
  position: relative;
  flex: 0 0 auto;
  width: var(--card-w);
  aspect-ratio: 5 / 6.6;
  padding: 0;
  border: 1px solid var(--paper-border);
  border-radius: 4px;
  background:
    linear-gradient(90deg, var(--card-tab) 0 3px, transparent 3px),
    linear-gradient(170deg, var(--paper-hi) 0%, var(--paper) 100%);
  color: var(--paper-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px 20px;
  cursor: pointer;
  box-shadow: 0 8px 16px -12px rgba(0, 0, 0, 0.9), inset 0 1px 0 var(--paper-sheen);
  transition: transform 0.18s var(--ease), box-shadow 0.2s, opacity 0.2s, filter 0.2s;
}

.card__subj {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.66rem;
  font-family: var(--serif);
  color: #fff;
  background: #666;
}

.card__subj[data-subj="chinese"] { background: #b8503f; }
.card__subj[data-subj="math"] { background: #3f6f9e; }
.card__subj[data-subj="english"] { background: #7a5ba8; }
.card__subj[data-subj="physics"] { background: #2f7d74; }
.card__subj[data-subj="chemistry"] { background: #a8742a; }
.card__subj[data-subj="biology"] { background: #4a7d3f; }
/* 铭浩觉醒后的「光」：黄底黑字，一眼看出来这不是普通牌 */
.card__subj[data-subj="light"] {
  background: #f2d37a;
  color: #201a08;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(255, 246, 214, 0.9);
}

/* 牌名按字数缩放：用容器查询按卡片宽度算，小牌上的两字名不会溢出 */
.card { container-type: inline-size; }

.card__name {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-size: 44cqw;
  line-height: 1.1;
  letter-spacing: 0.02em;
  font-weight: 600;
  white-space: nowrap;
  max-width: 100%;
}

.card[data-len="2"] .card__name { font-size: 1.5rem; font-size: 29cqw; letter-spacing: 0.01em; }
.card[data-len="3"] .card__name { font-size: 1.1rem; font-size: 22cqw; letter-spacing: 0; }
.card[data-len="4"] .card__name { font-size: 0.92rem; font-size: 18cqw; letter-spacing: 0; }

.card__brief {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 5px;
  text-align: center;
  font-size: 0.7rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--paper-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card[data-playable="false"] { filter: saturate(0.78) brightness(0.95); opacity: 0.86; cursor: not-allowed; }
.card[data-playable="true"] { box-shadow: 0 0 0 2px var(--sticky), 0 10px 18px -12px rgba(0, 0, 0, 0.9); }
.card[data-selected="true"] { transform: translateY(-10px); box-shadow: 0 0 0 3px var(--red), 0 12px 20px -12px rgba(0, 0, 0, 0.9); }

/* 「保留哪几张」模式下选中的牌是**留着**的，和弃牌的红框区分开：绿色描边 */
.card[data-keep="true"] {
  box-shadow: 0 0 0 3px #79c46b, 0 12px 20px -12px rgba(0, 0, 0, 0.9);
}
.card[data-keep="true"]::after {
  content: '留';
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  padding: 0 3px;
  border-radius: 2px;
  background: #79c46b;
  color: #10210f;
  font-size: 0.62rem;
  line-height: 1.5;
}
.card.is-enter { animation: deal 0.32s var(--ease) both; }

@keyframes deal { from { opacity: 0; transform: translateY(12px) rotate(-2deg); } to { opacity: 1; transform: none; } }

/* ============================================================ 卡牌样式（背包）
   只换「纸和字」：底色、字色、边框、夹边。尺寸由 --card-w / cqw 管，不受影响。
   同一组变量既挂在 <html data-cards>（整局生效），也挂在背包预览的 [data-skin] 上。 */
html[data-cards="paper"], [data-skin="paper"] {
  --paper: #efe8d8;
  --paper-hi: #f9f5ea;
  --paper-ink: #241f17;
  --paper-dim: rgba(35, 32, 26, 0.75);
  --paper-border: rgba(60, 50, 32, 0.35);
  --paper-sheen: rgba(255, 255, 255, 0.6);
  --card-tab: rgba(212, 72, 60, 0.16);
}

/* 黑板：深底粉笔字，夹边换成金色 */
html[data-cards="chalk"], [data-skin="chalk"] {
  --paper: #232928;
  --paper-hi: #2f3734;
  --paper-ink: #f1f3ea;
  --paper-dim: rgba(233, 240, 228, 0.72);
  --paper-border: rgba(226, 236, 222, 0.3);
  --paper-sheen: rgba(255, 255, 255, 0.12);
  --card-tab: rgba(232, 197, 106, 0.24);
}

/* 宣纸：米黄纸面、墨黑字、朱红夹边 */
html[data-cards="ink"], [data-skin="ink"] {
  --paper: #efe6cf;
  --paper-hi: #f7f0dd;
  --paper-ink: #1b1a17;
  --paper-dim: rgba(30, 26, 20, 0.7);
  --paper-border: rgba(40, 34, 24, 0.55);
  --paper-sheen: rgba(255, 255, 255, 0.34);
  --card-tab: rgba(150, 40, 34, 0.55);
}

/* 草稿纸：浅绿纸 + 一层很淡的方格（见下面那条） */
html[data-cards="grid"], [data-skin="grid"] {
  --paper: #e9f0dd;
  --paper-hi: #f2f7e9;
  --paper-ink: #1f3038;
  --paper-dim: rgba(31, 48, 56, 0.66);
  --paper-border: rgba(46, 74, 82, 0.42);
  --paper-sheen: rgba(255, 255, 255, 0.5);
  --card-tab: rgba(47, 125, 116, 0.28);
}

html[data-cards="grid"] .card, [data-skin="grid"] .card {
  background-image:
    linear-gradient(90deg, var(--card-tab) 0 3px, transparent 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M.5.5h13v13H.5z' fill='none' stroke='%232f7d74' stroke-opacity='.18' stroke-width='1'/%3E%3C/svg%3E"),
    linear-gradient(170deg, var(--paper-hi) 0%, var(--paper) 100%);
}

/* ------------------------------------------------------------------- 弹层 */

.modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: rgba(5, 10, 8, 0.9);
  animation: fade 0.2s ease-out both;
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal__panel {
  /* 放得下就居中；小屏横屏放不下时从头排、面板自己滚，不会把下半段裁掉 */
  margin: auto;
  width: 100%;
  max-width: 360px;
  max-height: calc(100vh - 28px - env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  padding: 26px 22px 20px;
  border: 1px solid rgba(244, 236, 218, 0.2);
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  text-align: center;
  animation: pop 0.26s var(--ease) both;
}

@keyframes pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.modal__title { margin: 0; font-family: var(--serif); font-size: 1.4rem; letter-spacing: 0.14em; text-indent: 0.14em; }
.modal__text { margin: 10px 0 0; font-size: 0.8rem; line-height: 1.7; color: var(--dim); }
.modal__body { margin-top: 18px; overflow-y: auto; min-height: 0; }
.modal__actions { margin-top: 20px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 9px; }

.choices { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.choice {
  width: 66px;
  aspect-ratio: 5 / 6.6;
  border-radius: 3px;
  border: 1px solid rgba(60, 50, 32, 0.35);
  background: var(--paper);
  color: var(--paper-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  font-family: var(--serif);
}
.choice b { font-size: 1.2rem; }
.choice span { font-size: 0.6rem; color: rgba(35, 32, 26, 0.65); }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 40;
  max-width: min(88vw, 420px);
  padding: 10px 16px;
  border: 1px solid rgba(212, 72, 60, 0.5);
  background: #1a0f0d;
  color: #f0b5ad;
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
  animation: toast 0.24s var(--ease) both;
}

@keyframes toast { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.noscript { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: var(--board-deep); color: var(--chalk); z-index: 50; }

/* ---------------------------------------------------------------- 响应式 */

@media (min-width: 760px) {
  :root { --card-w: 104px; }

  /* 桌面也走"对手在左、牌桌居中、战报在右"的三栏，只是尺度放大。
     上限跟着缩放走：缩小界面时牌桌仍然铺满屏宽，而不是缩成中间一小块。 */
  .screen--table {
    max-width: calc(1240px / var(--ui-scale));
    margin: 0 auto;
    grid-template-columns: 330px minmax(0, 1fr) minmax(280px, 25%);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "head   head   head"
      "foes   center log"
      "me     me     me"
      "hand   hand   hand";
  }

  .foes {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    padding: 20px 10px 12px 22px;
    overflow-y: auto;
  }
  .foe { flex: 0 0 auto; max-width: none; padding: 12px 14px; }
  /* 名字和武将名并成一行：6 人局 5 张卡也能在 900px 高里排得下（卡片尺寸固定后要省高度） */
  .foe__col { display: block; }
  .foe__col > .foe__name { display: inline; }
  .foe__col > .foe__char { display: inline; margin-left: 6px; }
  .foe__avatar { width: 56px; height: 72px; }
  .foe__name { font-size: 0.86rem; }
  .foe__char { font-size: 0.68rem; }

  .me {
    margin: 0;
    border-top: 1px solid var(--hair);
    padding: 10px 22px;
  }
  .me__avatar { width: 46px; height: 46px; }

  .log {
    border-left: 1px solid var(--hair);
    padding: 20px 22px 12px 14px;
    max-height: none;
    font-size: 0.74rem;
  }

  .hand { padding: 16px 20px 10px; gap: 10px; }
  .bar { padding: 0 20px 14px; }
  .roster { grid-template-columns: repeat(4, 1fr); }
  .roster-card__portrait { height: 96px; }
}

/* ------------------------------------------------------- 手机横屏（主场景） */

@media (orientation: landscape) and (max-height: 560px) {
  :root { --card-w: 74px; }

  .screen--table {
    max-width: none;
    /* 左：对手卡；中：牌桌；右：战报 */
    grid-template-columns: 214px minmax(0, 1fr) minmax(180px, 27%);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "head   head   head"
      "foes   center log"
      "me     hand   hand";
  }

  .table__head { padding: 4px 14px 5px; }

  /* 对手：竖着排的小格子 */
  .foes {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    padding: 6px 4px 6px 10px;
    overflow-y: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(180deg, #000 calc(100% - 18px), transparent 100%);
  }
  .foes::-webkit-scrollbar { display: none; }

  .foe {
    flex: 0 0 auto;
    max-width: none;
    padding: 7px 9px;
    border-radius: 3px;
  }
  .foe__top { gap: 4px; }
  .foe__name { font-size: 0.74rem; }
  .foe__char { font-size: 0.6rem; }
  .foe__hp b { font-size: 1.15rem; }
  .foe__hp span { font-size: 0.58rem; }
  .foe__bar { height: 2px; margin-top: 4px; }
  .foe__meta { margin-top: 4px; font-size: 0.58rem; gap: 4px 6px; }
  .foe__col { display: block; }
  .foe__col > .foe__name { display: inline; }
  .foe__col > .foe__char { display: inline; margin-left: 5px; }
  .foe__col > .pips { display: flex; }
  .foe .equip-row { margin-top: 4px; }
  .foe .pips { margin-top: 3px; }
  .foe .pips i { width: 8px; height: 8px; }
  .foe .played-row { margin-top: 3px; flex-wrap: nowrap; overflow: hidden; }
  .foe .played-row .play-chip { max-width: 4.6em; padding: 0 4px; }
  .foe__avatar { width: 38px; height: 50px; }
  .foe .equip { padding: 1px 5px; font-size: 0.66rem; }
  /* 横屏卡片也窄：三件以上把字号和内边距再压一点，四件都还能露出两个字 */
  .foe .equip-row:has(.equip:nth-child(3)) .equip { padding: 0 2px; font-size: 0.6rem; gap: 0; }
  /* 横屏太窄，省略号本身就要吃掉一个字的位置：直接裁掉，能多露两个字 */
  .foe .equip-row:has(.equip:nth-child(3)) .equip b { text-overflow: clip; }
  .foe .equip svg { width: 9px; height: 9px; }

  /* 自己：左下角一条 */
  .me {
    margin: 0;
    padding: 6px 10px 8px;
    border-top: 1px solid var(--hair);
    gap: 8px;
    align-items: center;
    align-self: end;
  }
  .me__name { font-size: 0.78rem; }
  .me__char { font-size: 0.6rem; }
  .me__hp b { font-size: 1.3rem; }
  .me .equip { padding: 1px 5px; font-size: 0.66rem; }
  .me .equip svg { width: 9px; height: 9px; }

  /* 中间：牌桌 */
  .center { padding: 6px 10px 4px; align-items: center; justify-content: flex-start; gap: 8px; }
  .center__top { align-items: center; padding-top: 0; gap: 6px; }
  .center__prompt { text-align: center; max-width: 32ch; font-size: 0.8rem; }
  .center__piles { font-size: 0.7rem; }

  /* 右侧：战报 */
  .log {
    text-align: left;
    max-width: none;
    max-height: none;
    padding: 8px 10px 6px 4px;
    border-left: 1px solid var(--hair);
    mask-image: linear-gradient(180deg, transparent 0, #000 14px);
  }

  .hand { padding: 6px 12px 4px; gap: 7px; }
  .bar { padding: 0 12px 5px; }

  /* 房间：竖排会溢出，横过来排两列 */
  .screen--room { padding: 14px 20px; max-width: none; justify-content: flex-start; }
  .room__head { padding-bottom: 10px; }
  .room__code { font-size: 2rem; }
  .seats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .seat { padding: 10px 12px; min-height: 44px; }
  .room__actions { margin-top: 14px; flex-direction: row; align-items: center; }
  .room__actions .btn { flex: 1; }
  .room__wait { flex: 1; text-align: left; }

  /* 选将：八个人也要一屏放下 */
  .screen--select { padding: 10px 18px; overflow-y: auto; }
  .select__head { text-align: left; display: flex; align-items: baseline; gap: 12px; }
  .select__title { font-size: 1.15rem; letter-spacing: 0.1em; }
  .select__sub { margin: 0; }
  /* 十一个人，横屏 6 列 2 行，两行等高，卡片内截断 */
  .roster { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: 6px; margin-top: 8px; }
  /* 十一个人正好 6+5，第二行不补空位 */
  .roster-card:last-child:nth-child(6n+6) { grid-column: span 1; }
  .roster-card { overflow: hidden; }
  .roster-card__skill { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
  .roster-card { padding: 6px 7px; gap: 2px; }
  .roster-card__portrait { height: 34px; }
  .roster-card__name { font-size: 0.84rem; letter-spacing: 0.04em; }
  .roster-card__hp { font-size: 0.62rem; }
  .roster-card__title { font-size: 0.62rem; }
  .roster-card__skill { font-size: 0.66rem; line-height: 1.3; }
  .roster-card__skill b { display: inline; }

  /* 菜单：横屏高度只有 390，压缩标题并把两个按钮并排 */
  .screen--menu { padding: 10px 22px 14px; justify-content: flex-start; overflow-y: auto; }
  .menu { max-width: 640px; }
  .menu__mark { display: none; }
  .menu__title { font-size: 1.9rem; letter-spacing: 0.1em; }
  .menu__latin { margin-top: 6px; font-size: 0.7rem; letter-spacing: 0.34em; }
  .menu__blurb { display: none; }
  .menu__form { margin-top: 12px; gap: 8px; display: grid; grid-template-columns: 1fr 1fr; }
  .menu__form .field,
  .menu__form .server,
  .menu__form .menu__join { grid-column: 1 / -1; }
  .menu__form #create-btn { grid-column: 1; }
  .menu__form #solo-btn { grid-column: 2; }
  .server { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .server__opt { flex: 1; padding: 7px 9px; }
  .server__hint { flex-basis: 100%; min-height: 0; }
  .menu__link { margin-top: 10px; }
  .menu__error { margin-top: 4px; }
}

/* 竖屏手机：牌桌是为横屏设计的，顶部给一句提示（不挡操作） */
@media (orientation: portrait) and (max-width: 560px) {
  .table__head::after {
    content: "横屏更宽敞";
    color: var(--sticky);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  /* 竖屏时对手卡挤成一条会因为太窄而各种换行：改成能横向滑的小卡条，卡片尺寸固定 */
  .foes {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .foes::-webkit-scrollbar { display: none; }

  .foe {
    flex: 0 0 168px;
    max-width: 168px;
  }

  /* 竖屏卡片窄，装备栏只留武器和防具（延时锦囊在战报里能看到） */
  .foe .equip-row .equip:nth-child(n+3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------------------------------------------ 精力点 */

.pips { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px; margin-top: 5px; min-width: 0; }

.pips i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(244, 236, 218, 0.11);
  box-shadow: inset 0 0 0 1px rgba(244, 236, 218, 0.22);
}

.pips i[data-on="true"] {
  background: var(--red);
  box-shadow: 0 0 0 1px rgba(212, 72, 60, 0.55);
}

/* 人物卡里的精力点：不给换行，免得精力一变化就把卡片顶高 */
.foe .pips { flex-wrap: nowrap; overflow: hidden; }

.me .pips { margin-left: auto; margin-top: 0; flex-wrap: wrap; }
.me .pips i { width: 8px; height: 8px; }

/* ------------------------------------------------------------------- 聊天 */

.chat {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 12px;
  background: rgba(5, 10, 8, 0.45);
}

.chat__panel {
  width: min(360px, 94vw);
  max-height: min(420px, 78vh);
  display: flex;
  flex-direction: column;
  background: var(--panel-2);
  border: 1px solid var(--hair);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9);
}

.chat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 7px 12px;
  border-bottom: 1px solid var(--hair);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  color: var(--sticky);
}

.chat__close {
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  color: var(--dim);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.chat__list {
  list-style: none;
  margin: 0;
  padding: 8px 10px;
  flex: 1 1 auto;
  min-height: 90px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: thin;
}

.chat__item { display: flex; flex-direction: column; gap: 1px; font-size: 0.76rem; line-height: 1.45; }
.chat__item[data-mine="true"] { align-items: flex-end; text-align: right; }
.chat__who { font-size: 0.66rem; color: var(--dim); letter-spacing: 0.05em; }
.chat__text { color: var(--chalk-2); word-break: break-word; }
.chat__item[data-mine="true"] .chat__text { color: var(--sticky); }

.chat__form {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--hair);
}

.chat__input {
  flex: 1;
  min-width: 0;
  background: rgba(233, 239, 231, 0.05);
  border: 1px solid var(--hair);
  border-radius: 2px;
  color: var(--chalk);
  font: inherit;
  font-size: 0.8rem;
  padding: 8px 10px;
}

.chat__input:focus-visible { outline: 2px solid var(--sticky); outline-offset: 1px; }

.btn[data-unread="true"] { color: var(--sticky); border-color: rgba(232, 197, 106, 0.6); }

/* ------------------------------------------------------------------- 身份 */

.identity__team {
  margin: 14px 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--dim);
}
/* 本回合打出的牌：贴在自己格子下面 */
.played-row { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }

.play-chip {
  font-size: 0.7rem;
  line-height: 1.3;
  padding: 1px 5px;
  border-radius: 2px;
  border: 1px solid rgba(60, 50, 32, 0.35);
  background: var(--paper);
  color: var(--paper-ink);
  max-width: 7.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.play-chip[data-subj="chinese"] { border-color: rgba(184, 80, 63, 0.55); }
.play-chip[data-subj="math"] { border-color: rgba(63, 111, 158, 0.55); }
.play-chip[data-subj="english"] { border-color: rgba(122, 91, 168, 0.55); }
.play-chip[data-subj="physics"] { border-color: rgba(47, 125, 116, 0.55); }
.play-chip[data-subj="chemistry"] { border-color: rgba(168, 116, 42, 0.55); }
.play-chip[data-subj="biology"] { border-color: rgba(74, 125, 63, 0.55); }
.play-chip[data-subj="light"] { background: #f2d37a; color: #201a08; border-color: #b99a3f; }

.me .played-row { margin-top: 0; flex-wrap: wrap; }
.foe .played-row .play-chip { font-size: 0.7rem; padding: 0 4px; }

/* 版本更新提示条 */
.update-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 45;
  padding: 9px 16px;
  border-radius: 3px;
  border: 1px solid rgba(232, 197, 106, 0.5);
  background: var(--panel);
  color: var(--sticky);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.9);
}

.btn[data-off="true"] { color: var(--dim); border-color: var(--hair); }
/* 回合倒计时 */
.table__timer {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--dim);
  padding: 1px 7px;
  border: 1px solid var(--hair);
  border-radius: 2px;
}

.table__timer[data-low="true"] {
  color: #fff0ee;
  background: var(--red);
  border-color: var(--red);
}
/* 技能大字：暴击 / 撑住 / 无效 */
.flash-word {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: none;
  font-family: var(--serif);
  font-size: 2.4rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--sticky);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.55);
  opacity: 0;
}

.flash-word.is-on { animation: flashWord 1s var(--ease) both; }

@keyframes flashWord {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(0.98); }
}

.foe__role--awaken {
  background: var(--sticky);
  color: #201a0c;
  border-color: transparent;
}

.foe__avatar[data-awakened="true"],
.me__avatar[data-awakened="true"] {
  border-color: var(--sticky);
  box-shadow: 0 0 0 1px rgba(232, 197, 106, 0.6);
}
/* 没有照片的武将（讲台）用首字占位 */
.roster-card__portrait--none,
.avatar--none {
  display: grid;
  place-items: center;
  background: var(--panel-2);
  color: var(--dim);
  font-family: var(--serif);
  border-radius: 2px;
}

.roster-card__portrait--none { font-size: 1.3rem; letter-spacing: 0.1em; }
.avatar--none { font-size: 1.2rem; border: 1px solid var(--hair); border-radius: 3px; }

/* ---------------------------------------------------------------- 设置面板 */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
}

.sheet__panel {
  width: min(420px, 94vw);
  background: var(--panel);
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  padding: 16px 18px 18px;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.95);
}

.sheet__panel--narrow { width: min(360px, 92vw); }

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.86rem;
  letter-spacing: 0.22em;
  color: var(--gold);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
}

.sheet__close {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--dim);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.sheet__close:hover { color: var(--gold); }

.sheet__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(232, 197, 106, 0.08);
}

.sheet__label { font-size: 0.82rem; color: var(--chalk-2); letter-spacing: 0.08em; }

.sheet__note {
  margin: 12px 0 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--dim);
}

.sheet__ask { margin: 8px 0 18px; font-size: 0.9rem; line-height: 1.6; color: var(--chalk); }
.sheet__actions { display: flex; gap: 10px; }
.sheet__actions .btn { flex: 1; }

/* 分段选择器 */
.seg { display: inline-flex; border: 1px solid var(--hair); border-radius: 2px; overflow: hidden; }

.seg__item {
  border: 0;
  background: transparent;
  color: var(--dim);
  font: inherit;
  font-size: 0.76rem;
  padding: 6px 12px;
  cursor: pointer;
  border-right: 1px solid var(--hair);
}

.seg__item:last-child { border-right: 0; }
.seg__item[data-on="true"] { background: rgba(232, 197, 106, 0.16); color: var(--gold); }

/* 技能按钮：可用时金色，等待选牌时高亮 */
#skill-btn[data-on="true"] {
  border-color: var(--gold);
  color: var(--gold);
}

#skill-btn:disabled { color: var(--dim); border-color: var(--hair); opacity: 0.6; }

/* 出牌区改成一张张牌 */
.played-row { gap: 4px; }

.play-chip {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid rgba(70, 58, 34, 0.55);
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: 0 5px 8px -6px rgba(0, 0, 0, 0.9);
}

.play-chip[data-subj="chinese"] { border-left: 3px solid #b8503f; }
.play-chip[data-subj="math"] { border-left: 3px solid #3f6f9e; }
.play-chip[data-subj="english"] { border-left: 3px solid #7a5ba8; }
.play-chip[data-subj="physics"] { border-left: 3px solid #2f7d74; }
.play-chip[data-subj="chemistry"] { border-left: 3px solid #a8742a; }
.play-chip[data-subj="biology"] { border-left: 3px solid #4a7d3f; }
.play-chip[data-subj="light"] { border-left: 3px solid var(--gold); }


/* ------------------------------------------------------------ 选将：左右分栏 */

.screen--select { padding: 18px 20px 14px; }

.select__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
  flex: 1 1 auto;
  margin-top: 14px;
}

.pick-list {
  list-style: none;
  margin: 0;
  padding: 0 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
}

/* 三档难度的取色：深底上要够亮，色条本身又不能刺眼 */
[data-diff="easy"] {
  --diff: #63b56b;
  --diff-text: #9ad6a0;
  --diff-soft: rgba(99, 181, 107, 0.14);
  --diff-line: rgba(99, 181, 107, 0.42);
}
[data-diff="normal"] {
  --diff: #d9a13c;
  --diff-text: #ecc689;
  --diff-soft: rgba(217, 161, 60, 0.14);
  --diff-line: rgba(217, 161, 60, 0.42);
}
[data-diff="expert"] {
  --diff: #c9563e;
  --diff-text: #eb9a86;
  --diff-soft: rgba(201, 86, 62, 0.15);
  --diff-line: rgba(201, 86, 62, 0.44);
}
[data-diff="pro"] {
  --diff: #9a6bd4;
  --diff-text: #c9a9ee;
  --diff-soft: rgba(154, 107, 212, 0.16);
  --diff-line: rgba(154, 107, 212, 0.48);
}

.pick-item {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px 7px 14px;
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--chalk-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

/* 难度色条：贴着卡片左沿的一条窄光带，越往下越淡，不抢立绘的戏 */
.pick-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--diff) 0%, var(--diff) 68%, var(--diff-soft) 100%);
  opacity: 1;
}

.pick-item:hover:not(:disabled)::before { opacity: 1; }
.pick-item[data-diff] { border-left-color: var(--diff-line); }

.pick-item:hover:not(:disabled) { border-color: var(--gold-dim); }
.pick-item[data-active="true"] { border-color: var(--gold); background: rgba(232, 197, 106, 0.1); }
.pick-item[data-mine="true"] { border-color: rgba(120, 190, 110, 0.6); }
.pick-item[data-taken="true"] { opacity: 0.4; cursor: not-allowed; }

/* 流派分组的小标题 */
.pick-group {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 2px 2px;
  border-bottom: 1px solid var(--hair);
  margin-top: 2px;
  grid-column: 1 / -1;   /* 两列布局时横跨整行 */
}

.pick-group:first-child { margin-top: 0; padding-top: 0; }

.pick-group__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--serif);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--gold);
  flex: 0 0 auto;
}

.pick-group__text {
  font-size: 0.66rem;
  color: var(--dim);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pick-item__pic {
  width: 40px;
  height: 50px;
  flex: 0 0 auto;
  object-fit: cover;
  object-position: 50% 12%;
  border-radius: 2px;
  background: var(--panel-2);
}

.pick-item__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pick-item__name { font-family: var(--serif); font-size: 0.98rem; letter-spacing: 0.06em; color: var(--chalk); }

.pick-item__meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pick-item__hp { font-size: 0.72rem; color: var(--dim); }
.pick-item__diff {
  flex: 0 0 auto;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  padding: 0 5px;
  border-radius: 2px;
  color: var(--diff-text);
  background: var(--diff-soft);
  border: 1px solid var(--diff-line);
}
.pick-item__tag {
  font-size: 0.68rem;
  padding: 1px 6px;
  border-radius: 2px;
  border: 1px solid rgba(120, 190, 110, 0.5);
  color: #9ed49a;
}
.pick-item__tag--taken { border-color: var(--hair); color: var(--dim); }

.pick-detail {
  border: 1px solid var(--hair);
  border-radius: 3px;
  background: var(--panel);
  padding: 14px;
  overflow-y: auto;
  min-height: 0;
}

/* 详情面板左侧也带一条同色难度条，和列表里那张卡对得上 */
.pick-detail[data-diff] { border-left: 3px solid var(--diff); }

.pick-detail__hero { display: flex; gap: 14px; align-items: flex-start; }

.pick-detail__pic {
  width: 108px;
  height: 136px;
  flex: 0 0 auto;
  object-fit: cover;
  object-position: 50% 12%;
  border-radius: 3px;
  border: 1px solid var(--gold-dim);
  background: var(--panel-2);
}

.pick-detail__id { min-width: 0; }
.pick-detail__name { margin: 0; font-family: var(--serif); font-size: 1.5rem; letter-spacing: 0.16em; color: var(--gold); }
/* 三字武将名在牌桌上取后两字，详情里把本名补一行，免得认不出是谁 */
.pick-detail__full { margin: 2px 0 0; font-size: 0.7rem; letter-spacing: 0.08em; color: var(--dim); }
.pick-detail__title { margin: 4px 0 0; font-size: 0.78rem; color: var(--dim); letter-spacing: 0.08em; }
.pick-detail__hp { margin: 8px 0 0; font-size: 0.8rem; color: var(--chalk-2); }

.pick-detail__diff {
  margin: 6px 0 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--dim);
}

.pick-detail__diff-tag {
  flex: 0 0 auto;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  padding: 1px 7px;
  border-radius: 2px;
  color: var(--diff-text);
  background: var(--diff-soft);
  border: 1px solid var(--diff-line);
}

.pick-detail__skill { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); }
.pick-detail__skill-name { margin: 0 0 6px; font-size: 0.9rem; color: var(--sticky); letter-spacing: 0.1em; }
.pick-detail__skill-text { margin: 0; font-size: 0.82rem; line-height: 1.7; color: var(--chalk-2); }
.pick-detail__note { margin: 12px 0 0; font-size: 0.76rem; color: var(--dim); }

.select__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
}

.select__status { margin: 0; font-size: 0.78rem; color: var(--dim); letter-spacing: 0.06em; }
#pick-confirm { min-width: 180px; }

/* 横屏：列表更紧凑 */
@media (orientation: landscape) and (max-height: 560px) {
  .screen--select { padding: 10px 16px 10px; }
  .select__body { gap: 10px; margin-top: 8px; }
  .pick-item { padding: 5px 8px; gap: 8px; }
  .pick-item__pic { width: 32px; height: 40px; }
  .pick-item__name { font-size: 0.9rem; }
  .pick-detail { padding: 10px; }
  .pick-detail__pic { width: 84px; height: 106px; }
  .pick-detail__name { font-size: 1.2rem; }
  .pick-detail__skill-text { font-size: 0.76rem; line-height: 1.55; }
  .select__foot { margin-top: 8px; padding-top: 8px; }
}

@media (min-width: 760px) {
  .pick-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
  .pick-detail__pic { width: 132px; height: 168px; }
}

/*
 * 手机竖屏：两栏挤在 390px 里，右栏只剩一百多像素，武将名会竖着排、技能说明一行一个字。
 * 改成上下叠：上面挑人（列表滚），下面看技能（面板自己滚）。
 */
@media (max-width: 700px) {
  .select__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 10px;
  }
  .pick-list { padding-right: 2px; }
  .pick-item { padding: 6px 9px 6px 13px; }
  .pick-item__pic { width: 34px; height: 43px; }
  .pick-detail { padding: 10px 12px; }
  .pick-detail__hero { gap: 10px; }
  .pick-detail__pic { width: 74px; height: 94px; }
  .pick-detail__name { font-size: 1.15rem; letter-spacing: 0.1em; }
  .pick-detail__skill { margin-top: 10px; padding-top: 8px; }
  .pick-detail__skill-text { font-size: 0.78rem; line-height: 1.6; }
}


/* ---------------------------------------------------- 响应提示浮层与连线 */

.link-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

.link-layer line {
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  opacity: 0.75;
  animation: dashMove 1.2s linear infinite;
}

.link-layer circle { fill: var(--gold); opacity: 0.9; }

@keyframes dashMove { to { stroke-dashoffset: -20; } }

.prompt-banner {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  padding: 10px 18px;
  max-width: min(560px, 86%);
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(2px);
  text-align: center;
  pointer-events: none;
}

.prompt-banner__who { font-size: 0.72rem; letter-spacing: 0.18em; color: var(--gold); }
.prompt-banner__text { font-size: 0.9rem; color: var(--chalk); line-height: 1.5; }
.prompt-banner__detail { font-size: 0.78rem; color: var(--red-text); }

/* ------------------------------------------------------------ 聊天气泡 */

.bubble {
  position: absolute;
  left: 100%;
  top: 6px;
  margin-left: 8px;
  z-index: 8;
  max-width: 200px;
  padding: 6px 10px;
  border-radius: 3px 3px 3px 0;
  background: var(--paper);
  color: var(--paper-ink);
  font-size: 0.78rem;
  line-height: 1.45;
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.9);
  animation: bubbleIn 0.18s ease-out both;
  pointer-events: none;
  word-break: break-word;
}

.bubble::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 8px;
  border: 5px solid transparent;
  border-right-color: var(--paper);
  border-left: 0;
}

.me .bubble { left: 100%; }

@keyframes bubbleIn {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: none; }
}

/* 打出的牌做成一张张小牌 */
.played-row { display: flex; flex-wrap: nowrap; gap: 3px; overflow: hidden; }

.play-chip {
  width: 30px;
  min-width: 30px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  font-size: 0.62rem;
  line-height: 1.1;
  text-align: center;
  border-radius: 2px;
  border: 1px solid rgba(70, 58, 34, 0.6);
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: 0 4px 6px -5px rgba(0, 0, 0, 0.9);
  white-space: normal;
  overflow: hidden;
}


/* ---------------------------------------------------------------- 大厅 */

.screen--lobby {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px 18px;
  max-width: calc(860px / var(--ui-scale));
  margin: 0 auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.lobby__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lobby__hello { margin: 0; font-size: 0.9rem; color: var(--dim); letter-spacing: 0.08em; }
.lobby__hello b { color: var(--gold); font-weight: 600; }

/* 大厅顶部：账号编号 / 身份标签 / OP */
.lobby__account {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  vertical-align: 1px;
}

.lobby__account[data-guest="true"] { color: var(--dim); font-size: 0.74rem; letter-spacing: 0.1em; }

.account-chip__id {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--blue);
  border: 1px solid rgba(143, 182, 207, 0.4);
  border-radius: 2px;
  padding: 1px 6px;
}

.account-chip__tag {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--sticky);
  background: rgba(232, 197, 106, 0.12);
  border: 1px solid rgba(232, 197, 106, 0.5);
  border-radius: 2px;
  padding: 1px 7px;
}

.account-chip__op {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #0d1512;
  background: var(--sticky);
  border-radius: 2px;
  padding: 1px 6px;
}

/* 座位 / 人物卡上的身份标签 */
.seat__tag--tag {
  color: var(--sticky);
  background: rgba(232, 197, 106, 0.14);
  border-color: rgba(232, 197, 106, 0.55);
}

.foe__tag {
  margin-left: 6px;
  padding: 0 5px;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--sticky);
  background: rgba(232, 197, 106, 0.14);
  border: 1px solid rgba(232, 197, 106, 0.45);
  border-radius: 2px;
  vertical-align: 1px;
}
.lobby__sub { margin: 4px 0 0; font-size: 0.76rem; color: var(--dim); }

.lobby__list-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hair);
  border-radius: 3px;
  background: var(--panel);
  overflow: hidden;
}

.lobby__list-head {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hair);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--sticky);
}

.lobby__tools { display: flex; align-items: center; gap: 10px; }
.lobby__count { color: var(--dim); letter-spacing: 0.06em; }
#lobby-refresh { padding: 3px 10px; font-size: 0.72rem; }

.lobby__list {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  min-height: 0;
}

.lobby-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--chalk-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lobby-item:hover:not(:disabled) { border-color: var(--gold); background: rgba(232, 197, 106, 0.08); }
.lobby-item:disabled { opacity: 0.4; cursor: not-allowed; }

.lobby-item__code {
  font-family: var(--serif);
  font-size: 1.1rem;
  letter-spacing: 0.24em;
  color: var(--gold);
}

.lobby-item__host { flex: 1; font-size: 0.8rem; }
.lobby-item__count { font-size: 0.78rem; color: var(--dim); }

.lobby__empty {
  margin: 0;
  padding: 26px 14px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--dim);
}

.lobby__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lobby__join { display: flex; gap: 8px; flex: 1; min-width: 200px; }
.lobby__join .field__input--code { flex: 1; }
.lobby__error, #lobby-error { margin: 0; }

@media (orientation: landscape) and (max-height: 560px) {
  .screen--lobby { padding: 10px 16px 10px; gap: 8px; max-width: none; }
  .lobby__list { padding: 6px; gap: 4px; }
  .lobby-item { padding: 7px 10px; }
  .lobby-item__code { font-size: 0.95rem; }
  .lobby__actions { gap: 8px; }
}


/* --------------------------------------------- 出牌栏：挂在人物框右边 */



/* ------------------------------------------- 玩家卡 + 右侧出牌栏 */

.foe-row {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}

.foe-row .foe { flex: 0 0 auto; }

.foe-row .played-row,
.me-row .played-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
  margin-top: 0;
}

.me-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

.me-row .me__body { flex: 0 1 auto; min-width: 0; }

/* 中央只剩牌堆 */
.center { justify-content: center; }
.center__piles { margin-top: 8px; }

/* 提示条常驻顶部 */
.prompt-banner { top: 4px; }


/* 玩家卡固定宽度，出牌栏在右边扩展 */
.foe-row .foe { flex: 0 0 auto; width: 148px; max-width: 148px; }

@media (min-width: 760px) {
  .foe-row .foe { width: 232px; max-width: 232px; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .foe-row .foe { width: 148px; max-width: 148px; }
  .foe-row { gap: 4px; }
}


/* 出牌栏只放得下两张，尺寸收紧 */
.foe-row .played-row .play-chip,
.me-row .played-row .play-chip {
  width: 28px;
  min-width: 28px;
  height: 38px;
  font-size: 0.6rem;
}

/* 离线标记与踢人按钮 */
.seat__tag--off { color: var(--red-text); border-color: rgba(200, 69, 47, 0.5); }

.seat__kick {
  margin-left: 8px;
  border: 1px solid rgba(200, 69, 47, 0.5);
  background: transparent;
  color: var(--red-text);
  font: inherit;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 2px;
  cursor: pointer;
}

.seat__kick:hover { background: rgba(200, 69, 47, 0.16); }
/* 观战标记 */
.spectate-badge {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
  padding: 2px 8px;
}
/* ------------------------------------------ 出牌记录：挂在每个玩家卡的右边 */

/*
 * 每人的出牌记录贴在人物卡右侧，一排放不下就直接盖到牌桌上（允许压过桌面），
 * 所以这一层是绝对定位的浮层，不受左边对手栏的滚动裁剪影响。
 * 位置由 app.js 的 renderPlayedLayer() 按人物卡的实际位置算。
 */
.played-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}

/* ------------------------------------------- 出牌先演：飞出去的那张牌 */
/*
 * 出牌要等服务器回执，来回一趟在手机上看得出来。点下去的一瞬间先把这张牌
 * 复制一份丢进这一层，从手牌位置飞向目标；真实结算仍然是服务器说了算。
 */
.send-layer {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  overflow: hidden;
}

.send-fly {
  position: absolute;
  pointer-events: none;
  margin: 0;
  box-shadow: 0 20px 36px -18px #000;
  will-change: transform, opacity;
}

/* 已经出手、等回执：手牌里那张压暗抬起，看起来已经离手了 */
.card[data-sent="true"] {
  opacity: 0.34;
  transform: translateY(-9px) scale(0.96);
  filter: saturate(0.7);
  pointer-events: none;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .card[data-sent="true"] { transform: none; }
}

.played-run {
  position: absolute;
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 3px 4px;
  border-radius: 3px;
  background: rgba(6, 6, 7, 0.62);
  box-shadow: 0 6px 14px -12px #000;
}

/*
 * 牌块尺寸由 app.js 按「人物卡有多高」算好，塞进 --chip-* 变量里：
 * 几乎和整张人物卡等高，所以这里只留兜底值。
 */
.played-run .play-chip {
  width: var(--chip-w, 34px);
  min-width: var(--chip-w, 34px);
  height: var(--chip-h, 44px);
  font-size: var(--chip-f, 12px);
  font-size: max(var(--chip-f, 12px), 0.56rem);
  line-height: 1.15;
  padding: 2px;
  display: grid;
  place-items: center;
  text-align: center;
  border-left-width: 3px;
  white-space: normal;
  overflow: hidden;
  will-change: transform;
}

/* 新插进来的那张：从左边轻轻滑入 */
.played-run .play-chip.is-fresh { animation: chipIn 0.26s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

@keyframes chipIn {
  from { opacity: 0; transform: translateX(-8px) scale(0.86); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .played-run .play-chip.is-fresh { animation: none; }
}

/* ------------------------------------------------- 铭浩「看一眼」浮层 */

.peek-bar {
  position: absolute;
  top: max(34px, calc(env(safe-area-inset-top) + 28px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(86vw, 520px);
  padding: 6px 9px;
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  background: rgba(6, 6, 7, 0.95);
  box-shadow: 0 12px 26px -18px #000;
  overflow-x: auto;
  scrollbar-width: none;
}

.peek-bar::-webkit-scrollbar { display: none; }

.peek-bar__head {
  flex: 0 0 auto;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  white-space: nowrap;
}

.peek-bar__close {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: transparent;
  color: var(--dim);
  font: inherit;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}

.peek-bar__close:hover { color: var(--chalk); border-color: var(--gold-dim); }

.peek-bar__cards { display: flex; gap: 3px; }

.peek-bar .play-chip { width: 24px; min-width: 24px; height: 32px; font-size: 0.54rem; padding: 1px; }

@media (orientation: landscape) and (max-height: 560px) {
  .played-run { padding: 2px 3px; }
  .peek-bar { top: 26px; padding: 4px 7px; }
}

/* ---------------------------------------------------- 人机局人数 / 玩法 */
.solo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 8px;
  border-bottom: 1px solid var(--hair);
}

.solo-bar__label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--dim);
}

/* ------------------------------------------------------- 房间：设置在面板里 */

.seg__item:disabled { opacity: 0.45; cursor: not-allowed; }

.sheet__input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 160px;
}

/* ------------------------------------------------------------ 射击选部位 */
.shoot-pick {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 9px 12px;
  text-align: left;
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--chalk);
  font: inherit;
  cursor: pointer;
}

.shoot-pick b { display: block; color: var(--gold); font-size: 0.9rem; margin-bottom: 2px; }
.shoot-pick span { display: block; font-size: 0.74rem; color: var(--dim); line-height: 1.5; }
.shoot-pick:hover { border-color: var(--gold-dim); background: rgba(232, 197, 106, 0.08); }

/* ------------------------------------------------------------ 调试指令 */
/* /help、/who 这种多行结果：等宽、可滚动 */
.cmd-out {
  margin: 0;
  max-height: min(56vh, 420px);
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--chalk-2);
  font-family: var(--mono, ui-monospace, "Cascadia Mono", Consolas, monospace);
  font-size: 0.74rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
}

/* ================================================================ 启动 / 连接 */

.screen--boot,
.screen--connect {
  align-items: center;
  justify-content: center;
  padding: 28px 22px;
  overflow-y: auto;
}

.boot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.boot__mark { width: 92px; color: var(--sticky); opacity: 0.75; }
/*
 * 标题用的是「雲衢殺 · 熾焰鋼鐵徽章」那张图（白底已经抠成透明，见 tools/make-logo.py）。
 * 用 h1 包着 img，屏幕阅读器和搜索还是认「云衢杀」这三个字。
 */
.boot__logo {
  margin: 4px 0 0;
  width: min(600px, 84vw);
  line-height: 0;
}
.boot__logo img {
  display: block;
  width: 100%;
  height: auto;
}
/*
 * 图挂了（网络被掐、缓存里是个坏文件、浏览器不认 webp…）也别留一块空白：
 * img 的 onerror 会给 h1 加上 .logo--fallback，这里把三个字用文字补回来。
 */
.logo--fallback { display: flex; align-items: center; justify-content: center; min-height: 96px; line-height: 1.4; }
.logo--fallback img { display: none; }
.logo--fallback::after {
  content: "云衢杀";
  font-family: var(--serif);
  font-size: min(9vw, 2.4rem);
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--chalk);
}
.boot__title {
  margin: 6px 0 0;
  font-family: var(--serif);
  font-size: 2.3rem;
  letter-spacing: 0.22em;
  color: var(--chalk);
}
.boot__latin { margin: 0; font-size: 0.72rem; letter-spacing: 0.46em; color: var(--dim); }
.boot__status { margin: 20px 0 0; font-size: 0.86rem; letter-spacing: 0.12em; color: var(--sticky); }
.boot__host { margin: 0; font-size: 0.78rem; color: var(--dim); letter-spacing: 0.04em; }

.connect {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 400px;
  padding: 22px 20px;
  border: 1px solid var(--hair);
  border-radius: 4px;
  background: rgba(6, 12, 10, 0.72);
}
.connect__title {
  margin: 0 0 2px;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.7rem;
  letter-spacing: 0.2em;
  color: var(--chalk);
}
.connect__logo { margin: 0 0 2px; line-height: 0; text-align: center; }
.connect__logo img { width: min(300px, 74vw); height: auto; display: inline-block; }
.connect__why { margin: 0; font-size: 0.82rem; line-height: 1.6; color: var(--red-text); }
.connect__hint { margin: 0; font-size: 0.78rem; color: var(--dim); word-break: break-all; }
.connect__note { margin: 0; font-size: 0.78rem; color: var(--dim); text-align: center; }

/* ================================================================ 导航栏 */

.screen--app { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--hair);
  background: var(--nav-bg);
}

.nav__user {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--hair);
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.nav__user:hover { border-color: rgba(232, 197, 106, 0.55); background: rgba(232, 197, 106, 0.06); }
.nav__avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  line-height: 1;
  border-radius: 50%;
  overflow: hidden;
}
.nav__me { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.nav__name {
  font-size: 0.84rem;
  color: var(--chalk);
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav__sub {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--dim);
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav__tabs {
  flex: 1 1 auto;
  display: flex;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav__tabs::-webkit-scrollbar { display: none; }

.nav__tab {
  position: relative;
  flex: 0 0 auto;
  padding: 7px 12px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--dim);
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.18s, background 0.18s;
}
.nav__tab:hover { color: var(--chalk-2); background: rgba(244, 236, 218, 0.05); }
.nav__tab[data-on="true"] {
  color: var(--sticky);
  background: rgba(232, 197, 106, 0.12);
  box-shadow: inset 0 -2px 0 var(--sticky);
}
.nav__badge {
  position: absolute;
  top: 2px;
  right: 0;
  font-style: normal;
  font-size: 0.55rem;
  line-height: 1.5;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--red);
  color: #fff2f0;
}
.nav__link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--dim); letter-spacing: 0.06em; }

/* 窄屏时「离开服务器」不许被挤成竖排，分页自己横向滚 */
.nav__user { flex: 0 0 auto; }
.nav #leave-server { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 720px) {
  .nav { gap: 6px; padding: 6px 8px; }
  .nav__link { display: none; }
  .nav__sub { display: none; }
  .nav__tab { padding: 6px 9px; font-size: 0.78rem; }
}

/* ================================================================ 分页 */

.pages { flex: 1 1 auto; min-height: 0; position: relative; }

.page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 22px calc(18px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.page[hidden] { display: none; }
.page--lobby { max-width: calc(860px / var(--ui-scale)); width: 100%; margin: 0 auto; }

@media (max-width: 720px) {
  .page { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------ 大厅聊天页 */

.chat-page {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  max-width: calc(860px / var(--ui-scale));
  width: 100%;
  margin: 0 auto;
}
.chat-page__list {
  list-style: none;
  margin: 0;
  padding: 10px 12px;
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--hair);
  border-radius: 3px;
  background: rgba(6, 12, 10, 0.45);
}
.chat-page__item { display: flex; flex-direction: column; gap: 1px; font-size: 0.82rem; line-height: 1.5; }
.chat-page__item[data-mine="true"] { align-items: flex-end; text-align: right; }
.chat-page__who { font-size: 0.62rem; color: var(--dim); letter-spacing: 0.05em; }
.chat-page__text { color: var(--chalk-2); word-break: break-word; }
.chat-page__item[data-mine="true"] .chat-page__text { color: var(--sticky); }
.chat-page__empty { font-size: 0.78rem; color: var(--dim); }
.chat-page__form { display: flex; gap: 8px; }

/* ------------------------------------------------------------ 对局记录页 */

.hist__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--sticky);
}
.hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hist__item {
  padding: 8px 11px;
  border: 1px solid var(--hair);
  border-left: 3px solid var(--hair);
  border-radius: 3px;
  background: rgba(244, 236, 218, 0.02);
}
.hist__item[data-won="true"] { border-left-color: #7cb37a; }
.hist__item[data-won="false"] { border-left-color: var(--red); }
.hist__top { display: flex; align-items: baseline; gap: 8px; }
.hist__top b { font-family: var(--serif); font-size: 1rem; letter-spacing: 0.1em; }
.hist__item[data-won="true"] .hist__top b { color: #9ed49a; }
.hist__item[data-won="false"] .hist__top b { color: var(--red-text); }
/* 平局：不红不绿，用中性色 */
.hist__item[data-draw="true"] { border-left-color: var(--gold-dim); }
.hist__item[data-draw="true"] .hist__top b { color: var(--sticky); }
.hist__mode { font-size: 0.66rem; color: var(--dim); }
.hist__when { margin-left: auto; font-size: 0.64rem; color: var(--dim); }
.hist__row { margin-top: 3px; font-size: 0.74rem; color: var(--chalk-2); }
.hist__row--dim { color: var(--dim); }
.hist__empty, .hist__note { margin: 0; font-size: 0.78rem; color: var(--dim); }

/* ------------------------------------------------------------ 游戏设置页 */

.set {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: calc(560px / var(--ui-scale));
}
.set__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--hair);
}
.set__label { font-size: 0.78rem; letter-spacing: 0.1em; color: var(--dim); }
.set__value { font-size: 0.76rem; color: var(--chalk-2); word-break: break-all; text-align: right; }

/* ------------------------------------------------------------ 背包页 */

.bag {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: calc(900px / var(--ui-scale));
  margin: 0 auto;
}
.bag__lead { margin: 0; font-size: 0.8rem; line-height: 1.7; color: var(--dim); }
.bag__section { border-top: 1px solid var(--hair); padding-top: 14px; }
.bag__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--chalk-2);
}
.bag__note { font-size: 0.72rem; font-weight: 400; letter-spacing: 0.04em; color: var(--dim); }

.bag__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}
.bag__themes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.bag__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--hair);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.bag__item:hover { border-color: var(--gold-dim); background: rgba(232, 197, 106, 0.06); }
.bag__item[data-on="true"] {
  border-color: var(--sticky);
  box-shadow: inset 0 0 0 1px var(--sticky);
  background: rgba(232, 197, 106, 0.08);
}

.bag__preview {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 4px 0 2px;
}
.bag__preview .card { --card-w: 66px; pointer-events: none; }

.bag__swatch { display: flex; gap: 4px; }
.bag__swatch i {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* 插画主题的缩略图 */
.bag__thumb { display: block; width: 100%; }
.bag__thumb img {
  display: block;
  width: 100%;
  max-width: 132px;
  height: 52px;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.bag__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  color: var(--chalk);
}
.bag__badge {
  font-style: normal;
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
  padding: 0 5px;
  border-radius: 2px;
  background: var(--sticky);
  color: #201a0c;
}
.bag__text { font-size: 0.72rem; line-height: 1.5; color: var(--dim); }

.bag__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bag__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--chalk-2);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.bag__tag:hover { border-color: var(--gold-dim); }
.bag__tag[data-on="true"] {
  border-color: var(--sticky);
  background: rgba(232, 197, 106, 0.14);
  color: var(--sticky);
}
.bag__empty { font-size: 0.8rem; color: var(--dim); }
.bag__hint { margin: 10px 0 0; font-size: 0.8rem; line-height: 1.6; color: var(--dim); }

/* ------------------------------------------------------------ 账号设置页 */

.acct {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: calc(520px / var(--ui-scale));
  margin: 0 auto;
}

.acct__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--hair);
  border-radius: 4px;
  background: rgba(232, 197, 106, 0.04);
}
.acct__avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: var(--panel-2);
}
.acct__ident { min-width: 0; }
.acct__name { margin: 0; font-size: 1rem; color: var(--chalk); }
.acct__id { margin: 2px 0 0; font-size: 0.68rem; letter-spacing: 0.06em; color: var(--dim); }
.acct__op {
  margin-left: auto;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 1px 7px;
  border-radius: 2px;
  background: var(--sticky);
  color: #0d1512;
}

.acct__section { display: flex; flex-direction: column; gap: 8px; }
/* 账号页是表单不是"抬头"，输入框收紧一点，别用首页那种大字号 */
.acct .field__label { margin-bottom: 3px; }
.acct .field__input,
.acct__inline .field__input {
  font-family: inherit;
  font-size: 0.92rem;
  letter-spacing: 0;
  padding: 6px 0;
}
.acct__title {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--sticky);
}
.acct__hint { margin: 0; font-size: 0.68rem; color: var(--dim); }
.acct__inline { display: flex; align-items: center; gap: 8px; }
.acct__inline .field__input { flex: 1 1 auto; min-width: 0; }
.acct__inline .btn { flex: 0 0 auto; white-space: nowrap; }

.acct__avatars { display: flex; flex-wrap: wrap; gap: 6px; }

/* 上传头像那一行 */
.acct__upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acct__upload .acct__hint { flex: 1 1 160px; }

/* 头像是图还是表情，两种都走这两个类 */
.avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.avatar-emoji { display: grid; place-items: center; width: 100%; height: 100%; }

/* 房间座位左边的小头像 */
.seat__avatar {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  border: 1px solid var(--hair);
  border-radius: 50%;
  overflow: hidden;
  background: var(--panel-2);
}
.acct__av {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  line-height: 1;
  border: 1px solid var(--hair);
  border-radius: 4px;
  background: rgba(244, 236, 218, 0.03);
  cursor: pointer;
}
.acct__av:hover { border-color: rgba(232, 197, 106, 0.5); }
.acct__av[data-on="true"] {
  border-color: var(--sticky);
  background: rgba(232, 197, 106, 0.12);
  box-shadow: 0 0 0 1px rgba(232, 197, 106, 0.5);
}

.acct__msg { margin: 0; min-height: 1.2em; font-size: 0.76rem; }
.acct__msg[data-ok="true"] { color: #9ed49a; }
.acct__msg[data-ok="false"] { color: #f0a396; }

/* ------------------------------------------------- 一次性精力 / 蓄能 / 技能面板 */

/* 超过上限的那几点精力（鑫浩换血换来的）：半透明，能挡伤害但治不回来 */
.pips i[data-temp="true"] {
  background: rgba(212, 72, 60, 0.45);
  box-shadow: inset 0 0 0 1px rgba(212, 72, 60, 0.85);
}
.pips i[data-temp="true"][data-on="false"] { background: rgba(244, 236, 218, 0.08); }

/* 卡片上的「蓄能 x/x」：交牌蓄能 和 按回合蓄能 只用这一个样式 */
.charge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: rgba(244, 236, 218, 0.04);
  color: var(--dim);
  font-size: 0.76rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: 1px;
}
.charge[data-ready="true"] {
  color: #201a08;
  background: var(--sticky);
  border-color: transparent;
  font-weight: 600;
}

/* 对手卡上的蓄能章钉在卡片右下角：不参与排版，卡片高度一点都不会变 */
.foe__charge {
  position: absolute;
  right: 7px;
  bottom: 5px;
  margin-left: 0;
  font-size: 0.72rem;
  line-height: 1.5;
  padding: 0 4px;
  z-index: 2;
}

/* 自己那一条：夹在名字和精力点中间，行高内塞得下，不撑高信息块 */
.me .charge {
  height: 16px;
  line-height: 16px;
  padding: 0 5px;
  font-size: 0.72rem;
  vertical-align: middle;
}

/* 点人物卡弹出来的武将技能面板 */
.charinfo { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.charinfo__blurb,
.pick-detail__blurb {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 10px;
  border-left: 2px solid rgba(154, 107, 212, 0.45);
  font-family: var(--serif);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--chalk-2);
}
.pick-detail__blurb { margin-bottom: 2px; font-size: 0.86rem; }

/* 选将页顶上那行「装B流还没解锁」的说明 */
.select__lock {
  margin: 6px 0 0;
  font-size: 0.74rem;
  line-height: 1.6;
  color: #c9a9ee;
}
.select__lock[hidden] { display: none; }
.charinfo__skill {
  margin: 0;
  font-family: var(--serif);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: var(--sticky);
}
.charinfo__text { margin: 0; font-size: 0.8rem; line-height: 1.75; color: var(--chalk-2); }
.charinfo__row { margin: 0; font-size: 0.76rem; color: var(--dim); }

/* ------------------------------------------------------------ 嘉豪：豪意条 */

/*
 * 0~100 的条子，档位刻度画在 25 / 50 / 75，颜色跟着档位换。
 * 条子本身不占整行：夹在精力点和蓄能章中间，一行里塞得下。
 */
.hao {
  position: relative;
  display: inline-block;
  width: 96px;
  height: 14px;
  margin-left: 6px;
  border: 1px solid var(--hair);
  border-radius: 2px;
  background: rgba(244, 236, 218, 0.05);
  overflow: hidden;
  vertical-align: middle;
  --hao: #86968d;
}

.hao__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--hao);
  opacity: 0.7;
  transition: width 0.25s var(--ease);
}

/* 小标签：光看一个条子不知道是什么，左边写一个「豪」 */
.hao__tag {
  position: absolute;
  left: 4px;
  top: 0;
  z-index: 2;
  font-size: 0.62rem;
  line-height: 12px;
  font-weight: 400;
  color: rgba(244, 236, 218, 0.62);
  pointer-events: none;
}

/* 档位刻度：25% 一格，用三根细线画，不用渐变 */
.hao__tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(244, 236, 218, 0.22);
  pointer-events: none;
}

.hao__num {
  position: absolute;
  right: 4px;
  top: 0;
  z-index: 2;
  font-size: 0.66rem;
  line-height: 12px;
  font-weight: 500;
  color: var(--chalk-2);
  font-variant-numeric: tabular-nums;
}

.hao[data-tier="2"] { --hao: #7fb0c8; }
.hao[data-tier="3"] { --hao: #d9a13c; }
.hao[data-tier="4"] { --hao: #c9563e; }
.hao[data-tier="3"] .hao__fill { opacity: 0.78; }
.hao[data-tier="4"] .hao__fill { opacity: 0.88; }
.hao[data-tier="4"] { border-color: rgba(201, 86, 62, 0.55); }

/* 对手卡上：单独一行，别把精力点挤歪 */
.foe__hao {
  display: block;
  width: 100%;
  max-width: 116px;
  margin: 5px 0 0;
}

/* 自己那一条：和蓄能章同高 */
.me .hao { height: 16px; width: 96px; }
.me .hao__num { line-height: 14px; }
.me .hao__tag { line-height: 14px; }

/* --------------------------------------------- 嘉豪：判定条 / 精准射击 */

.parry,
.snipe {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 9, 7, 0.78);
  backdrop-filter: blur(2px);
}

.parry[hidden],
.snipe[hidden] { display: none; }

.parry__panel {
  width: min(520px, 90vw);
  padding: 18px 20px 16px;
  border: 1px solid var(--hair);
  border-radius: 3px;
  background: #0d1613;
  text-align: center;
}

.parry__head {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0.24em;
  color: var(--sticky);
}

.parry__why {
  margin: 0 0 14px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--dim);
}

.parry__track {
  position: relative;
  height: 34px;
  border: 1px solid var(--hair);
  background: rgba(244, 236, 218, 0.04);
  overflow: hidden;
}

.parry__band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.parry__band--ok { background: rgba(120, 190, 110, 0.16); }
.parry__band--perfect { background: rgba(232, 197, 106, 0.45); }

.parry__mid {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(244, 236, 218, 0.55);
}

.parry__line {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0;
  width: 3px;
  background: #ff6a52;
}

.parry__tip {
  margin: 10px 0 0;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--dim);
}

.parry__press {
  margin-top: 10px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  background: rgba(232, 197, 106, 0.12);
  color: var(--sticky);
  font: inherit;
  letter-spacing: 0.3em;
  cursor: pointer;
}
.parry__press:disabled { opacity: 0.4; cursor: default; }

.parry__result {
  margin: 8px 0 0;
  min-height: 1.2em;
  font-size: 0.84rem;
  color: var(--dim);
}
.parry__result[data-on="perfect"] { color: #ffd76a; }
.parry__result[data-on="ok"] { color: #9ed49a; }
.parry__result[data-on="miss"] { color: #f0a396; }

/* 瞄准：十字光标铺满全屏，红点自己定位 */
.snipe { cursor: crosshair; background: rgba(4, 9, 7, 0.88); backdrop-filter: blur(3px); }

.snipe__count {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 7vw, 3.4rem);
  letter-spacing: 0.06em;
  color: var(--chalk);
  font-variant-numeric: tabular-nums;
}

.snipe__tip {
  position: absolute;
  top: calc(16% + 4.6rem);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 0.78rem;
  color: var(--dim);
  white-space: nowrap;
}

.snipe__dot {
  position: fixed;
  /* 实际尺寸由 JS 按引擎给的 radius 写内联样式，这里是兜底 */
  width: 48px;
  height: 48px;
  padding: 0;
  border: 3px solid rgba(255, 214, 204, 0.9);
  border-radius: 50%;
  background: #f43a1c;
  transform: translate(-50%, -50%);
  cursor: crosshair;
  animation: snipeIn 0.1s ease-out both;
}
.snipe__dot[hidden] { display: none; }

body[data-crosshair="true"] { cursor: crosshair; }

@keyframes snipeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ------------------------------------------------------- 键盘操作（电脑端）
   只有检测到电脑设备（html[data-keys="true"]）才挂这些提示；手机上不显示。 */

/* 手牌左下角的数字键：1..9、0（第 10 张） */
.card__key {
  position: absolute;
  left: 4px;
  top: 4px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(17, 21, 18, 0.82);
  color: #f4ecd8;
  font-family: var(--sans);
  font-size: 0.62rem;
  line-height: 15px;
  text-align: center;
  letter-spacing: 0;
  pointer-events: none;
}

/* 选目标时对手右下角的数字键 */
.foe__key {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 3;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 1px solid rgba(232, 197, 106, 0.65);
  border-radius: 3px;
  background: rgba(8, 10, 9, 0.9);
  color: var(--sticky);
  font-size: 0.68rem;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}
.foe[data-target="true"] .foe__key { border-color: var(--red); color: #ffd9d3; }
.foe[data-dead="true"] .foe__key { opacity: 0.5; }

/* 功能按钮 / 二级菜单选项上的小键帽 */
html[data-keys="true"] [data-key]::after {
  content: attr(data-key);
  display: inline-block;
  margin-left: 6px;
  padding: 0 3px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: 0.66em;
  line-height: 1.35;
  letter-spacing: 0;
  vertical-align: 1px;
  opacity: 0.55;
}

html[data-keys="true"] .shoot-pick[data-key]::after,
html[data-keys="true"] .choice[data-key]::after {
  position: absolute;
  top: 4px;
  right: 4px;
  margin: 0;
}
.shoot-pick { position: relative; }
.choice { position: relative; }

.keys-btn {
  appearance: none;
  border: 1px solid rgba(232, 197, 106, 0.35);
  border-radius: 2px;
  background: transparent;
  color: var(--sticky);
  font: inherit;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  cursor: pointer;
  white-space: nowrap;
}
.keys-btn:hover { border-color: var(--sticky); }
.keys-btn[hidden] { display: none; }

.keys-help { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.keys-help li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--chalk-2);
}
.keys-help kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  padding: 1px 5px;
  border: 1px solid var(--hair);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--chalk);
  font-family: var(--sans);
  font-size: 0.72rem;
}
.keys-help__note { margin: 14px 0 0; font-size: 0.72rem; color: var(--dim); }