/* ═══════════════════════════════════════════════════════════════
   海克斯飞行棋 · 棋桌 PLAYER'S TABLE —— prototype-v3
   视角：你是棋手。我坐在下方，对手围坐三方，棋盘是桌面主角。
   结构：Tokens → Base → 桌面顶边 → 牌桌布局 → 座位卡 → 棋盘 →
         棋子/预览 → 我的托盘 → 战报抽屉 → LOL式选卡 → 印章 →
         动效 → 亮主题 → 响应式
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 1. Tokens ─────────────────────────── */

:root {
  /* 牌桌绒面（夜局） */
  --felt:        #17402F;
  --felt-deep:   #0E2B1F;
  --felt-panel:  rgba(10, 26, 19, .72);
  --felt-panel-2: rgba(16, 38, 28, .85);
  --line:        rgba(240, 232, 212, .14);
  --line-strong: rgba(240, 232, 212, .3);
  --ink:         #F4EFE2;
  --ink-2:       #CEC6B1;
  --ink-3:       #9C937D;

  /* 产品界面层：由首页、玩法页与开局入口共享 */
  --bg-deep:        #08241C;
  --bg-main:        #0D3328;
  --bg-elevated:    #124433;
  --green-highlight:#1B5B45;
  --green-glow:     #267255;
  --gold-main:      #D5B160;
  --gold-muted:     #A98742;
  --gold-line:      rgba(213, 177, 96, .4);
  --gold-soft:      rgba(213, 177, 96, .16);
  --text-primary:   #F1EAD8;
  --text-secondary: rgba(241, 234, 216, .68);
  --text-muted:     rgba(241, 234, 216, .46);

  /* 棋盘纸面（双主题恒定：纸永远是纸） */
  --paper:        #F1E8CF;
  --paper-hi:     #F9F3E0;
  --paper-ink:    #2E2818;
  --paper-line:   rgba(46, 40, 24, .62);
  --paper-line-soft: rgba(46, 40, 24, .3);

  /* 黄铜：只给「轮到你」和「主操作」 */
  --brass:      #D4A84E;
  --brass-hi:   #F0C96A;
  --brass-deep: #9A7433;

  /* 玩家信号色（经典印刷高饱和） */
  --red:    #E8402F;
  --blue:   #3B7DD8;
  --green:  #35A852;
  --yellow: #F2B21B;

  /* 功能 */
  --danger:  #E04434;
  --silver:  #9AA4AD;
  --prism-1: #E7DFF0;
  --prism-2: #D6E5EF;
  --prism-3: #F0E6D2;

  /* 字体 */
  --font-serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
                "Inter", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-mono:  "SF Mono", ui-monospace, "IBM Plex Mono", "JetBrains Mono",
                Menlo, Consolas, monospace;

  /* 阴影 */
  --shadow-board: 0 30px 80px rgba(4, 12, 8, .55), 0 3px 10px rgba(4, 12, 8, .4);
  --shadow-pin:    0 2px 3px rgba(20, 15, 5, .4);
  --shadow-pin-up: 0 6px 12px rgba(20, 15, 5, .45);
  --shadow-modal:  0 40px 110px rgba(0, 0, 0, .6);
  --shadow-chip:   0 10px 26px rgba(4, 12, 8, .4);

  /* 动效 */
  --dur-hit:    80ms;
  --dur-fast:   160ms;
  --dur-med:    320ms;
  --dur-slow:   560ms;
  --dur-event:  800ms;
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .4, 1);
  --ease-inout:  cubic-bezier(.65, 0, .35, 1);

  --radius-cell: 6px;
  --radius-ctrl: 8px;
  --radius-panel: 12px;
  --radius-modal: 16px;
}

html[data-theme="light"] {
  --felt:        #CDBE9C;
  --felt-deep:   #B3A480;
  --felt-panel:  rgba(238, 230, 210, .78);
  --felt-panel-2: rgba(244, 238, 222, .9);
  --line:        rgba(52, 44, 26, .16);
  --line-strong: rgba(52, 44, 26, .3);
  --ink:         #2A2416;
  --ink-2:       #57503E;
  --ink-3:       #8A8270;
  --brass:       #A07E3E;
  --brass-hi:    #8C6A33;
  --brass-deep:  #6E5226;
  --shadow-board: 0 30px 70px rgba(74, 60, 32, .35), 0 3px 10px rgba(74, 60, 32, .22);
  --shadow-pin:    0 2px 3px rgba(50, 40, 20, .35);
  --shadow-pin-up: 0 6px 12px rgba(50, 40, 20, .4);
  --shadow-modal:  0 40px 100px rgba(50, 40, 20, .4);
  --shadow-chip:   0 10px 24px rgba(74, 60, 32, .25);
}

/* ─────────────────────────── 2. Base ─────────────────────────── */

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

html, body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  background: var(--felt);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button { color: inherit; font: inherit; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

kbd {
  padding: 2px 5px;
  border: 1px solid currentColor;
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  opacity: .65;
}

b, strong { font-weight: 600; }

.page-grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 对局入口：先配置，再进入第一轮海克斯 ── */
.game-entry {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 32px;
  overflow: auto;
  background:
    radial-gradient(900px 620px at 50% 36%, rgba(240, 201, 106, .08), transparent 65%),
    linear-gradient(rgba(9, 28, 20, .78), rgba(9, 28, 20, .94)),
    var(--felt);
}
.game-entry[hidden] { display: none; }
.entry-sheet {
  width: min(1040px, 100%);
  min-height: 610px;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(380px, 1.08fr);
  overflow: hidden;
  border: 1px solid rgba(212, 168, 78, .46);
  border-radius: 20px;
  background: var(--felt-panel-2);
  box-shadow: 0 40px 120px rgba(2, 12, 8, .58), inset 0 1px 0 rgba(255,255,255,.07);
}
.entry-intro {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 64px 58px;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(240,232,212,.035) 50%, transparent 50.2%),
    linear-gradient(transparent 49.8%, rgba(240,232,212,.035) 50%, transparent 50.2%);
  background-size: 58px 58px;
}
.entry-intro::after {
  content: "ROUTE / 52 · HOME / 06";
  position: absolute;
  left: 58px;
  bottom: 36px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .18em;
}
.entry-kicker {
  color: var(--brass);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .24em;
}
.entry-mark {
  width: 92px;
  height: 92px;
  margin: 40px 0 30px;
}
.entry-mark svg { width: 100%; height: 100%; }
.entry-mark path:first-child { fill: none; stroke: var(--brass); stroke-width: 1.6; }
.entry-mark path:last-child { fill: var(--brass); opacity: .92; }
.entry-intro h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.04em;
}
.entry-brand-en {
  margin-top: 8px;
  color: var(--brass);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .26em;
}
.entry-intro > p {
  max-width: 27ch;
  margin: 14px 0 28px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.7;
}
.entry-rule-line { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 10px; }
.entry-rule-line i { width: 3px; height: 3px; border-radius: 50%; background: var(--brass-deep); }
.entry-config {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 54px;
}
.config-step {
  margin: 0 0 10px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .18em;
}
.entry-segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 30px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(4, 18, 12, .24);
}
.entry-option {
  display: grid;
  gap: 3px;
  min-height: 72px;
  padding: 12px 15px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  text-align: left;
}
.entry-option strong { font-size: 17px; }
.entry-option small { color: var(--ink-3); font-size: 10px; }
.entry-option.selected {
  border-color: rgba(212, 168, 78, .48);
  background: rgba(212, 168, 78, .1);
}
.entry-option.selected strong { color: var(--brass-hi); }
.entry-modes { display: grid; gap: 8px; margin-bottom: 24px; }
.mode-option {
  display: grid;
  grid-template-columns: 38px 1fr 16px;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 10px 15px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(240, 232, 212, .025);
  text-align: left;
}
.mode-option > span:nth-child(2) { display: grid; gap: 3px; }
.mode-option strong { font-size: 14px; }
.mode-option small { color: var(--ink-3); font-size: 10.5px; }
.mode-sigil {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink-3);
  font-size: 18px;
}
.mode-option > i {
  width: 10px;
  height: 10px;
  border: 1px solid var(--ink-3);
  border-radius: 50%;
}
.mode-option.selected { border-color: rgba(212, 168, 78, .5); background: rgba(212, 168, 78, .065); }
.mode-option.selected .mode-sigil { border-color: var(--brass-deep); color: var(--brass-hi); }
.mode-option.selected > i { border: 3px solid var(--brass); }
.entry-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}
.entry-summary span {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-3);
  font-size: 9.5px;
}
.entry-summary b { color: var(--ink-2); font-family: var(--font-mono); }
.entry-start {
  width: 100%;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 20px;
  border: 1px solid var(--brass-deep);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--brass), #B68C42);
  color: #211807;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 14px 34px rgba(0,0,0,.22);
}
.entry-start span { font-size: 18px; font-weight: 750; letter-spacing: .08em; }
.entry-start small { font-family: var(--font-mono); font-size: 9px; opacity: .68; }
.entry-start:hover { filter: brightness(1.05); transform: translateY(-1px); }
.entry-start:active { transform: translateY(1px); }
.seat[hidden] { display: none; }

/* 玩家形状系统 ●◆■▲ */
.g {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  vertical-align: -1px;
}
.g-red    { border-radius: 50%; background: var(--red); }
.g-blue   { background: var(--blue); transform: rotate(45deg) scale(.92); }
.g-green  { border-radius: 2px; background: var(--green); }
.g-yellow { background: var(--yellow); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* ─────────────────────────── 3. 桌面 ─────────────────────────── */

.table {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr) auto;
  background:
    radial-gradient(1000px 640px at 50% 42%, rgba(255, 240, 200, .09), transparent 62%),
    radial-gradient(1600px 1000px at 50% 125%, var(--felt-deep), transparent 75%),
    var(--felt);
}

/* ─────────────────────────── 4. 桌面顶边 ─────────────────────────── */

.table-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark svg { display: block; }
.bm-hex { fill: none; stroke: var(--brass); stroke-width: 1.4; }
.bm-plane { fill: var(--brass-hi); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
.brand-copy strong { font-size: 13px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.brand-copy small {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .16em;
}
.round-badge {
  margin-left: 10px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  white-space: nowrap;
}
.round-badge b { color: var(--brass-hi); }

.turn-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: center;
  padding: 6px 16px;
  border: 1px solid rgba(212, 168, 78, .5);
  border-radius: 999px;
  background: rgba(212, 168, 78, .1);
  color: var(--brass-hi);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
}
.turn-banner .led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass-hi);
  box-shadow: 0 0 8px rgba(240, 201, 106, .9);
  animation: led-pulse 1.8s var(--ease-inout) infinite;
}

.table-actions { display: flex; justify-content: flex-end; gap: 8px; }

.ghost-btn {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-ctrl);
  background: transparent;
  color: var(--ink-2);
  font-size: 11.5px;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
  white-space: nowrap;
}
.ghost-btn:hover { border-color: var(--brass); color: var(--ink); }
.catalogue-link { display: inline-flex; align-items: center; text-decoration: none; }
.ghost-btn.sm { min-height: 28px; padding: 0 10px; }
.ghost-btn:disabled { opacity: .38; cursor: not-allowed; }

.mini-btn {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  font-size: 10px;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.mini-btn:hover { border-color: var(--brass); color: var(--ink); }

/* ─────────────────────────── 5. 牌桌布局 ─────────────────────────── */

.arena {
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    ".      top    ."
    "left   board  right";
  align-items: center;
  justify-items: center;
  gap: 6px 14px;
  padding: 8px 20px 2px;
}

.seat-top   { grid-area: top; }
.seat-left  { grid-area: left; }
.seat-right { grid-area: right; }

/* ── 对手座位卡（钉在桌边的纸签） ── */
.seat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--felt-panel);
  box-shadow: var(--shadow-chip);
  opacity: .78;
  transition: opacity var(--dur-med) ease, border-color var(--dur-med) ease;
}
.seat-side { flex-direction: column; gap: 7px; padding: 14px 12px; text-align: center; }

.seat-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1.5px solid var(--pc, var(--ink-3));
  border-radius: 50%;
}
.seat[data-color="red"]    { --pc: var(--red); }
.seat[data-color="blue"]   { --pc: var(--blue); }
.seat[data-color="green"]  { --pc: var(--green); }
.seat[data-color="yellow"] { --pc: var(--yellow); }
.seat-avatar .g { width: 11px; height: 11px; }

.seat-name { display: grid; gap: 1px; text-align: left; }
.seat-side .seat-name { text-align: center; }
.seat-name strong { font-size: 13px; font-weight: 600; }
.seat-name small {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .1em;
}

.seat-progress { display: inline-flex; align-items: center; gap: 4px; }
.pp {
  width: 7px;
  height: 7px;
  border: 1px solid var(--pc, var(--ink-3));
  border-radius: 50%;
  opacity: .85;
}
.pp.done { background: var(--pc, var(--ink-3)); }
[data-color="blue"] .pp { border-radius: 0; transform: rotate(45deg) scale(.86); }
[data-color="green"] .pp { border-radius: 2px; }
[data-color="yellow"] .pp {
  border: 0;
  background: var(--pc);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: .3;
}
[data-color="yellow"] .pp.done { opacity: 1; }

.seat-traits { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.seat-traits span {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-3);
  font-size: 9.5px;
}

.seat-state {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .1em;
  color: var(--ink-3);
}
.seat.thinking {
  opacity: 1;
  border-color: rgba(212, 168, 78, .55);
  box-shadow: var(--shadow-chip), 0 0 0 2px color-mix(in srgb, var(--pc) 24%, transparent);
}
.seat.thinking .seat-state { color: var(--brass-hi); }

/* ─────────────────────────── 6. 棋盘 ─────────────────────────── */

.board-stage {
  grid-area: board;
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  width: 100%;
}
.board-stage.shake { animation: stage-shake 200ms linear; }

.board-wrap {
  position: relative;
  width: min(calc(100dvh - 210px), 100%, 900px);
  aspect-ratio: 1;
  padding: 5px;
  border: 1px solid rgba(214, 182, 118, .38);
  border-radius: 22px;
  background: linear-gradient(145deg, #3a342b, #1c1a17 72%);
  box-shadow:
    var(--shadow-board),
    inset 0 1px 0 rgba(255, 241, 210, .2),
    inset 0 -1px 3px rgba(0, 0, 0, .42);
}
html[data-theme="light"] .board-wrap {
  background: linear-gradient(145deg, #746b5d, #494238 72%);
}
/* 轮到我时，薄棋框泛起黄铜光 */
.board-wrap.my-turn::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid rgba(212, 168, 78, .55);
  border-radius: 25px;
  pointer-events: none;
  animation: board-glow 2.4s var(--ease-inout) infinite;
}
.board-wrap svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 17px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16), 0 2px 8px rgba(0, 0, 0, .26);
}

.svg-board-title {
  fill: var(--paper-ink);
  opacity: .42;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .3em;
}

/* 路径预览浮签（纸卡） */
.path-callout {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 36px);
  padding: 8px 14px;
  border-radius: var(--radius-ctrl);
  border: 1px solid var(--paper-line);
  background: var(--paper-hi);
  color: var(--paper-ink);
  box-shadow: 0 14px 34px rgba(4, 12, 8, .45);
}
.path-callout[hidden] { display: none; }

.callout-label {
  flex: 0 0 auto;
  color: var(--brass-deep);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
}
.callout-chain { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chain-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--paper-line-soft);
  border-radius: 999px;
  background: var(--paper);
  font-size: 11px;
  white-space: nowrap;
}
.chain-chip b { font-family: var(--font-mono); font-weight: 600; }
.chain-chip.hit { border-color: rgba(198, 69, 59, .55); color: var(--danger); font-weight: 600; }
.chain-arrow { color: var(--paper-line); font-size: 10px; }

/* ── SVG 内部元素 ── */
.flight-arc-case {
  fill: none;
  stroke: var(--paper-hi);
  stroke-width: 8;
  stroke-dasharray: 11 8;
  stroke-opacity: .92;
}
.flight-arc {
  fill: none;
  stroke-width: 3.4;
  stroke-dasharray: 11 8;
  opacity: .9;
}
.flight-arc.hot {
  opacity: 1;
  stroke: var(--brass) !important;
  stroke-width: 3.8;
  animation: arc-flow .6s linear infinite;
}

/* 棋子（实体飞机棋：彩色大飞机 + 白描边） */
.piece { cursor: default; }
.piece.clickable { cursor: pointer; }
.piece .pawn-shadow { fill: rgba(20, 15, 5, .4); }
.piece .pawn-num {
  fill: var(--pc);
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  text-anchor: middle;
}
.piece .legal-ring {
  fill: none;
  stroke: var(--brass);
  stroke-width: 2.6;
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}
.piece.legal .legal-ring,
.piece.selected .legal-ring { opacity: 0; animation: none; }
.piece .sel-lift { transition: transform var(--dur-fast) var(--ease-out); transform-box: fill-box; transform-origin: center; }
.piece.selected .sel-lift, .piece.legal:hover .sel-lift { transform: none; }

/* 路径预览图层 */
.step-dot {
  fill: var(--brass);
  opacity: 0;
  animation: dot-in .28s var(--ease-out) forwards;
}
.route-preview-case {
  fill: none;
  stroke: rgba(249, 243, 224, .9);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .82;
}
.route-preview-line {
  fill: none;
  stroke: var(--brass-deep);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2 10;
  animation: route-draw .55s var(--ease-out) both, arc-flow 1.1s linear .55s infinite;
}
.jump-arc {
  fill: none;
  stroke: var(--brass);
  stroke-width: 2.4;
  stroke-dasharray: 5 5;
  animation: arc-flow .7s linear infinite;
}
.dest-ring { fill: rgba(212, 168, 78, .09); stroke: var(--brass-deep); stroke-width: 2.2; }
.dest-ring.outer { transform-origin: center; transform-box: fill-box; }
.victim-ring {
  fill: none;
  stroke: var(--danger);
  stroke-width: 2.2;
  stroke-dasharray: 5 4;
  animation: arc-flow .8s linear infinite;
}
.shockwave {
  fill: none;
  stroke: var(--brass-hi);
  stroke-width: 3;
  transform-origin: center;
  transform-box: fill-box;
  animation: shockwave .5s var(--ease-out) forwards;
}
.vapor { fill: #FFFFFF; opacity: .85; animation: vapor-fade .55s ease-out forwards; }

/* ─────────────────────────── 7. 我的托盘 ─────────────────────────── */

.player-tray {
  position: relative;
  display: grid;
  grid-template-columns: auto auto 188px minmax(240px, 1fr) minmax(160px, auto);
  align-items: center;
  gap: 16px;
  margin: 6px 20px 10px;
  padding: 9px 16px;
  border: 1px solid rgba(212, 168, 78, .45);
  border-radius: var(--radius-panel);
  background: var(--felt-panel-2);
  box-shadow: var(--shadow-chip), inset 0 1px 0 rgba(240, 232, 212, .08);
}
/* 黄铜顶缘：这是我的席位 */
.player-tray::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 3px;
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  background: linear-gradient(90deg, transparent, var(--brass) 22%, var(--brass) 78%, transparent);
}

.me-block { display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 10px; }
.me-avatar {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 2px solid var(--red);
  border-radius: 50%;
  background: rgba(232, 64, 47, .12);
}
.me-avatar .g { width: 14px; height: 14px; }
.me-name { display: grid; gap: 1px; }
.me-name strong { font-size: 15px; font-weight: 700; }
.me-name small { color: var(--ink-3); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; }
.me-progress { grid-column: 2; display: inline-flex; align-items: center; gap: 4px; }
.me-progress small { margin-left: 3px; color: var(--ink-3); font-family: var(--font-mono); font-size: 9px; }
.me-block { --pc: var(--red); }

/* 我的四架飞机 */
.my-planes { display: grid; grid-template-columns: repeat(2, auto); gap: 6px; }
.plane-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctrl);
  background: rgba(240, 232, 212, .04);
  font-size: 10.5px;
  white-space: nowrap;
}
.plane-chip svg { flex: 0 0 auto; }
.plane-chip .st { color: var(--ink-3); font-family: var(--font-mono); font-size: 9px; }
.plane-chip.active { border-color: var(--line-strong); }
.plane-chip.active .st { color: var(--ink-2); }
.plane-chip:disabled { cursor: default; opacity: .58; }
.plane-chip.active { cursor: pointer; box-shadow: none; }
.plane-chip.active:hover,
.plane-chip.active:focus-visible { border-color: var(--brass-deep); background: rgba(240, 232, 212, .06); }

/* 手牌 */
.my-hand { display: grid; gap: 7px; justify-items: start; }
.hand-cards { display: flex; gap: 8px; }
.hand-empty {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 11px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--ink-3);
  font-size: 10px;
  letter-spacing: .04em;
}
.hand-card {
  position: relative;
  display: grid;
  gap: 2px;
  min-width: 90px;
  padding: 9px 11px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: linear-gradient(180deg, var(--paper-hi), var(--paper));
  color: var(--paper-ink);
  text-align: left;
  box-shadow: 0 4px 10px rgba(4, 12, 8, .35);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease;
}
.hand-card[disabled] { cursor: default; opacity: 1; }
.hand-card[disabled]:hover { transform: none; box-shadow: 0 4px 10px rgba(4, 12, 8, .35); }
.hand-card:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 10px 20px rgba(4, 12, 8, .45); }
.hand-card .hc-rarity {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: 9px 9px 0 0;
  background: var(--silver);
}
.hand-card.gold-card .hc-rarity { background: var(--brass); }
.hand-card.prism-card .hc-rarity {
  background: linear-gradient(90deg, var(--prism-1), var(--prism-2), var(--prism-3));
}
.hand-card strong { font-family: var(--font-serif); font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.hand-card small { color: rgba(46, 40, 24, .62); font-size: 9.5px; }
.hand-card.flash { animation: card-flash 1.2s var(--ease-out); }

.my-traits { display: flex; gap: 6px; flex-wrap: wrap; }
.trait-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-3);
  font-size: 9.5px;
}
.trait-mini.active { color: var(--ink-2); border-color: rgba(212, 168, 78, .5); }
.trait-mini em { color: var(--brass-hi); font-style: normal; font-family: var(--font-mono); font-size: 8.5px; }
.trait-mini .pips { display: inline-flex; gap: 2px; }
.trait-mini .pips b { width: 8px; height: 3px; border-radius: 2px; background: var(--brass); }
.trait-mini .pips b.off { background: var(--line-strong); }
.trait-mini.triggered { animation: glyph-pop .9s var(--ease-spring); border-color: var(--brass); }

/* 中央：提示 + 结算链 */
.tray-center { display: grid; gap: 7px; justify-items: center; min-width: 0; }
.tray-center strong { font-size: 14px; font-weight: 600; letter-spacing: .02em; text-align: center; }
.cause-strip {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--ink-3);
  font-size: 11px;
}
.cause-empty { letter-spacing: .04em; }
.cause-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(240, 232, 212, .06);
  color: var(--ink-2);
  font-size: 11px;
  white-space: nowrap;
  animation: chip-in .32s var(--ease-out);
}
.cause-chip b { color: var(--ink); font-family: var(--font-mono); font-weight: 600; }
.cause-chip.src { border-color: rgba(212, 168, 78, .5); color: var(--brass); }
.cause-chip.src b { color: var(--brass-hi); }
.cause-chip.hit { border-color: rgba(224, 68, 52, .6); color: #E08A7D; }
.cause-chip.hit b { color: #E8A196; }
html[data-theme="light"] .cause-chip.hit { color: var(--danger); }
.cause-arrow { color: var(--ink-3); font-size: 10px; }

/* 固定投掷台：独立于右下角按钮，为骰点海克斯保留修正层 */
.dice-station {
  align-self: stretch;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  min-width: 176px;
  padding: 6px 10px;
  border-inline: 1px solid var(--line);
}
.dice-throw {
  width: 100%;
  display: grid;
  grid-template-columns: 66px 1fr;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.dice-throw:disabled { cursor: default; opacity: .58; }
.dice-throw:not(:disabled):hover .dice-scene { transform: translateY(-3px); }
.dice-scene {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  perspective: 420px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.dice-cube {
  position: relative;
  width: 46px;
  height: 46px;
  transform-style: preserve-3d;
  transition: transform .35s var(--ease-out);
}
.dice-cube[data-face="1"] { transform: rotateX(0deg) rotateY(0deg); }
.dice-cube[data-face="2"] { transform: rotateX(-90deg) rotateY(0deg); }
.dice-cube[data-face="3"] { transform: rotateX(0deg) rotateY(-90deg); }
.dice-cube[data-face="4"] { transform: rotateX(0deg) rotateY(90deg); }
.dice-cube[data-face="5"] { transform: rotateX(90deg) rotateY(0deg); }
.dice-cube[data-face="6"] { transform: rotateX(0deg) rotateY(180deg); }
.dice-cube.tumbling { animation: dice-roll-3d .82s cubic-bezier(.2,.72,.22,1); }
.die-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  place-items: center;
  padding: 8px;
  border: 1px solid rgba(46, 40, 24, .46);
  border-radius: 9px;
  background: var(--paper-hi);
  box-shadow: inset 0 -2px 0 rgba(46,40,24,.13);
  backface-visibility: hidden;
}
.die-front { transform: translateZ(23px); }
.die-back { transform: rotateY(180deg) translateZ(23px); }
.die-right { transform: rotateY(90deg) translateZ(23px); }
.die-left { transform: rotateY(-90deg) translateZ(23px); }
.die-top { transform: rotateX(90deg) translateZ(23px); }
.die-bottom { transform: rotateX(-90deg) translateZ(23px); }
.die-face b {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--paper-ink);
  opacity: 0;
}
.die-face[data-value="1"] b:nth-child(5),
.die-face[data-value="2"] b:nth-child(1), .die-face[data-value="2"] b:nth-child(9),
.die-face[data-value="3"] b:nth-child(1), .die-face[data-value="3"] b:nth-child(5), .die-face[data-value="3"] b:nth-child(9),
.die-face[data-value="4"] b:nth-child(1), .die-face[data-value="4"] b:nth-child(3),
.die-face[data-value="4"] b:nth-child(7), .die-face[data-value="4"] b:nth-child(9),
.die-face[data-value="5"] b:nth-child(1), .die-face[data-value="5"] b:nth-child(3), .die-face[data-value="5"] b:nth-child(5),
.die-face[data-value="5"] b:nth-child(7), .die-face[data-value="5"] b:nth-child(9),
.die-face[data-value="6"] b:nth-child(1), .die-face[data-value="6"] b:nth-child(3),
.die-face[data-value="6"] b:nth-child(4), .die-face[data-value="6"] b:nth-child(6),
.die-face[data-value="6"] b:nth-child(7), .die-face[data-value="6"] b:nth-child(9) { opacity: 1; }
.dice-copy { display: grid; gap: 2px; }
.dice-copy strong { font-size: 15px; letter-spacing: .08em; }
.dice-copy small { color: var(--ink-3); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .04em; }
.dice-modifiers {
  min-height: 18px;
  display: flex;
  justify-content: center;
  gap: 4px;
  max-width: 166px;
  overflow: hidden;
}
.dice-modifiers span {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-3);
  font-size: 8.5px;
  white-space: nowrap;
}

/* 保留胜利界面的黄铜主按钮 */
.roll-btn {
  justify-self: end;
  display: grid;
  grid-template-columns: 48px auto 24px;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 8px 16px 8px 8px;
  border: 1px solid var(--brass-deep);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--brass), #B78F4C);
  color: #1D1608;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 34px rgba(212, 168, 78, .25);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .06em;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease,
              filter var(--dur-fast) ease;
}
.roll-btn:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 18px 40px rgba(212, 168, 78, .35); }
.roll-btn:active { transform: translateY(1px); }
.roll-btn kbd { justify-self: end; }
.roll-btn:disabled { cursor: wait; filter: saturate(.4) brightness(.9); }

.dice {
  width: 48px;
  height: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  place-items: center;
  padding: 8px;
  border: 1.5px solid rgba(29, 22, 8, .75);
  border-radius: 11px;
  background: var(--paper-hi);
  box-shadow: inset 0 -3px 0 rgba(29, 22, 8, .16), 0 3px 8px rgba(4, 12, 8, .3);
}
.dice i {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: #1D1608;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .12s ease, transform .18s var(--ease-spring);
}
.dice[data-face="1"] i:nth-child(5),
.dice[data-face="2"] i:nth-child(1), .dice[data-face="2"] i:nth-child(9),
.dice[data-face="3"] i:nth-child(1), .dice[data-face="3"] i:nth-child(5), .dice[data-face="3"] i:nth-child(9),
.dice[data-face="4"] i:nth-child(1), .dice[data-face="4"] i:nth-child(3),
.dice[data-face="4"] i:nth-child(7), .dice[data-face="4"] i:nth-child(9),
.dice[data-face="5"] i:nth-child(1), .dice[data-face="5"] i:nth-child(3), .dice[data-face="5"] i:nth-child(5),
.dice[data-face="5"] i:nth-child(7), .dice[data-face="5"] i:nth-child(9),
.dice[data-face="6"] i:nth-child(1), .dice[data-face="6"] i:nth-child(3),
.dice[data-face="6"] i:nth-child(4), .dice[data-face="6"] i:nth-child(6),
.dice[data-face="6"] i:nth-child(7), .dice[data-face="6"] i:nth-child(9) {
  opacity: 1;
  transform: scale(1);
}
.dice.tumbling { animation: dice-tumble .56s var(--ease-out); }

/* ─────────────────────────── 8. 战报抽屉 ─────────────────────────── */

.log-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  width: 340px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line-strong);
  background: var(--felt-panel-2);
  box-shadow: -30px 0 70px rgba(4, 12, 8, .45);
  animation: drawer-in .36s var(--ease-out);
}
.log-drawer[hidden] { display: none; }

.drawer-head {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
}
.drawer-head small {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
}
.drawer-head .mini-btn { margin-left: auto; }

.event-log {
  position: relative;
  min-height: 0;
  margin: 0;
  padding: 6px 16px 12px 30px;
  overflow: auto;
  list-style: none;
}
.event-log::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--line);
}
.event-log li {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 9px;
  padding: 9px 0;
  color: var(--ink-2);
  font-size: 11.5px;
  line-height: 1.55;
}
.event-log li + li { border-top: 1px solid var(--line); }
.log-dot {
  position: absolute;
  left: -13px;
  top: 15px;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--brass);
  border-radius: 50%;
  background: var(--felt-deep);
}
.event-log time { color: var(--brass); font-family: var(--font-mono); font-size: 9.5px; padding-top: 2px; }
.event-log b { color: var(--ink); font-family: var(--font-mono); font-size: 10.5px; }
.event-log .g { margin-right: 5px; }
.event-log li.fresh { animation: log-in .5s var(--ease-out); }

/* ─────────────────────────── 9. LOL/TFT 式选卡浮层 ─────────────────────────── */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(900px 520px at 50% 44%, rgba(212, 168, 78, .08), transparent 70%),
    rgba(6, 14, 10, .86);
}
html[data-theme="light"] .overlay {
  background:
    radial-gradient(900px 520px at 50% 44%, rgba(160, 126, 62, .12), transparent 70%),
    rgba(46, 40, 26, .6);
}
.overlay[hidden] { display: none; }

.result-modal {
  width: min(440px, 100%);
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 42px 34px 34px;
  border: 1px solid rgba(212, 168, 78, .55);
  border-radius: 18px;
  background: var(--felt-panel-2);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255,255,255,.08);
  text-align: center;
  animation: modal-in .48s var(--ease-out);
}
.result-glyph {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 2px solid var(--pc, var(--brass));
  border-radius: 50%;
  background: color-mix(in srgb, var(--pc, var(--brass)) 16%, transparent);
}
.result-glyph .g { width: 27px; height: 27px; }
.result-modal h1 { margin: 0; font-family: var(--font-serif); font-size: 36px; }
.result-modal p { margin: 0 0 8px; color: var(--ink-3); }
.result-reset { min-width: 190px; grid-template-columns: 1fr; justify-content: center; }

.augment-modal {
  width: min(1160px, 100%);
  max-height: calc(100dvh - 56px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  animation: modal-in .48s var(--ease-out);
}

.augment-header {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 8px 0 20px;
  text-align: center;
}
.eyebrow-brass {
  color: var(--brass);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
}
.augment-header h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -.02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .4);
}

/* 其他玩家锁定状态（LOL 式：头像逐个亮起） */
.pick-status { display: flex; gap: 8px; margin-top: 4px; }
.pick-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-3);
  font-size: 10.5px;
  opacity: .55;
  transition: opacity var(--dur-med) ease, border-color var(--dur-med) ease, color var(--dur-med) ease;
}
.pick-chip.locked {
  opacity: 1;
  border-color: rgba(212, 168, 78, .65);
  color: var(--ink);
}
.pick-chip.locked::after {
  content: "✓";
  color: var(--brass-hi);
  font-size: 10px;
}
.pick-chip.me { border-color: rgba(212, 168, 78, .5); opacity: .9; }

.augment-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  justify-items: center;
  padding: 4px 8px 18px;
  overflow: auto;
}
.augment-choice {
  width: min(300px, 100%);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  justify-items: stretch;
}
.card-refresh {
  min-height: 42px;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid rgba(212, 168, 78, .48);
  border-radius: 9px;
  background: rgba(8, 25, 18, .72);
  color: var(--ink-2);
  font-size: 11px;
  text-align: left;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.card-refresh:hover:not(:disabled) {
  border-color: var(--brass);
  background: rgba(212, 168, 78, .11);
  color: var(--brass-hi);
}
.card-refresh:disabled { opacity: .42; cursor: default; }
.card-refresh small { color: var(--ink-3); font-family: var(--font-mono); font-size: 8.5px; }
.refresh-icon {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
}
.card-refresh.refreshing .refresh-icon { animation: refresh-spin .5s linear infinite; }

/* 大卡：竖版纸卡 + 稀有度边框（TFT 式稀有度强表达） */
.aug-card {
  position: relative;
  width: min(300px, 100%);
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 22px 18px;
  border: 2px solid var(--silver);
  border-radius: var(--radius-modal);
  background:
    linear-gradient(180deg, rgba(46, 40, 24, .05), transparent 30%),
    linear-gradient(180deg, var(--paper-hi), var(--paper));
  color: var(--paper-ink);
  text-align: center;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) ease, border-color var(--dur-med) ease,
              opacity var(--dur-med) ease;
  animation: card-in .56s var(--ease-out) both;
  animation-delay: calc(var(--i) * 95ms + 80ms);
}
.silver-card { border-color: var(--silver); box-shadow: 0 18px 44px rgba(0,0,0,.45), inset 0 0 0 1px rgba(154,164,173,.35); }
.gold-card {
  border-color: var(--brass);
  box-shadow: 0 18px 44px rgba(0,0,0,.45), 0 0 34px rgba(212,168,78,.22), inset 0 0 0 1px rgba(212,168,78,.4);
}
.prism-card {
  border-color: transparent;
  background:
    linear-gradient(180deg, var(--paper-hi), var(--paper)) padding-box,
    linear-gradient(135deg, var(--prism-1), var(--prism-2), var(--prism-3), var(--prism-1)) border-box;
  background-size: 100% 100%, 300% 300%;
  box-shadow: 0 18px 44px rgba(0,0,0,.45), 0 0 34px rgba(214,229,239,.25);
}
.prism-card:hover { animation: card-in .56s var(--ease-out) both, prism-border 2.4s linear infinite; animation-delay: calc(var(--i) * 95ms + 80ms), 0s; }

.aug-card:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55);
}
.augment-grid.locked .aug-card:not(.selected) { opacity: .4; transform: scale(.97); }
.aug-card.selected { transform: translateY(-8px) scale(1.02); }

/* 六边形模块图标 */
.ac-hex {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: rgba(46, 40, 24, .08);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.ac-hex i {
  font-style: normal;
  font-size: 34px;
  color: var(--paper-ink);
  opacity: .8;
}
.gold-card .ac-hex { background: rgba(212, 168, 78, .2); }
.gold-card .ac-hex i { color: var(--brass-deep); opacity: 1; }
.prism-card .ac-hex { background: linear-gradient(135deg, var(--prism-1), var(--prism-2), var(--prism-3)); }

.ac-rarity {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .18em;
  color: rgba(46, 40, 24, .5);
}
.gold-card .ac-rarity { color: var(--brass-deep); }

.ac-name {
  margin: 8px 0 10px;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--paper-ink);
}
.ac-desc {
  margin: 0;
  max-width: 26ch;
  color: rgba(46, 40, 24, .78);
  font-size: 13.5px;
  line-height: 1.7;
}
.ac-relation {
  margin-top: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-ctrl);
  background: rgba(46, 40, 24, .07);
  border: 1px solid rgba(46, 40, 24, .14);
  font-size: 11px;
  color: var(--paper-ink);
}
.ac-relation span { color: rgba(46, 40, 24, .55); font-family: var(--font-mono); font-size: 10px; }
.rel-new { color: rgba(46, 40, 24, .75); }
.rel-synergy, .rel-activate { color: var(--brass-deep); }

.card-no {
  position: absolute;
  right: 12px;
  bottom: 56px;
  color: var(--paper-ink);
  font-family: var(--font-mono);
  font-size: 46px;
  font-weight: 700;
  opacity: .1;
  pointer-events: none;
}

/* 选中：四角准星 + 锁定印章 */
.aug-card .corner-ticks { position: absolute; inset: 8px; pointer-events: none; opacity: 0; transition: opacity var(--dur-fast) ease; }
.aug-card.selected .corner-ticks { opacity: 1; }
.corner-ticks i { position: absolute; width: 16px; height: 16px; border: 2.5px solid var(--brass-deep); }
.corner-ticks i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.corner-ticks i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.corner-ticks i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.corner-ticks i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.card-stamp {
  position: absolute;
  top: 46%;
  left: 50%;
  padding: 7px 16px;
  border: 2.5px solid var(--brass-deep);
  border-radius: 6px;
  color: var(--brass-deep);
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .18em;
  transform: translate(-50%, -50%) rotate(-9deg) scale(1.6);
  opacity: 0;
  pointer-events: none;
}
.aug-card.selected .card-stamp { animation: stamp-in .38s var(--ease-spring) forwards; }

/* 底部：倒计时条 + 状态 */
.augment-footer {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 0 8px 6px;
}
.pick-timer {
  width: min(460px, 100%);
  display: flex;
  align-items: center;
  gap: 12px;
}
.pick-timer-bar {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(240, 232, 212, .14);
  overflow: hidden;
}
.pick-timer-bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brass-deep), var(--brass-hi));
  transform-origin: left center;
  transition: transform 1s linear;
}
.timer-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 10px;
}
.timer-chip b { color: var(--brass-hi); font-size: 13px; }
.af-status { color: var(--ink-3); font-size: 11px; letter-spacing: .05em; }

/* ─────────────────────────── 10. 印章 ─────────────────────────── */

.stamp-layer { position: absolute; inset: 0; z-index: 9; pointer-events: none; }

.stamp {
  position: absolute;
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 8px 18px 9px;
  border: 3px solid var(--danger);
  border-radius: 8px;
  color: var(--danger);
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: .22em;
  text-indent: .22em;
  line-height: 1;
  transform: translate(-50%, -50%) rotate(-10deg);
  opacity: .94;
  animation: stamp-slam .5s var(--ease-spring);
  box-shadow: inset 0 0 0 1px rgba(198, 69, 59, .35);
  background: rgba(249, 243, 224, .16);
}
.stamp small {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .3em;
  text-indent: .3em;
  opacity: .85;
}
.stamp.big { font-size: 30px; }
.stamp.brass { border-color: var(--brass); color: var(--brass); box-shadow: inset 0 0 0 1px rgba(212, 168, 78, .4); }

/* ─────────────────────────── 11. 动效关键帧 ─────────────────────────── */

@keyframes ring-breathe {
  0%, 100% { transform: scale(.92); opacity: .45; }
  50% { transform: scale(1.06); opacity: 1; }
}
@keyframes arc-flow { to { stroke-dashoffset: -20; } }
@keyframes dot-in { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes dest-pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.18); opacity: .4; } }
@keyframes shockwave { from { transform: scale(.4); opacity: .95; } to { transform: scale(2.4); opacity: 0; } }
@keyframes vapor-fade { from { opacity: .85; transform: scale(1); } to { opacity: 0; transform: scale(.4); } }
@keyframes stage-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(2.5px, -1.5px); }
  50% { transform: translate(-2px, 1.5px); }
  75% { transform: translate(1px, 1px); }
}
@keyframes chip-in { from { opacity: 0; transform: translateY(5px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes led-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes log-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes card-flash { 0% { box-shadow: 0 0 0 4px rgba(212, 168, 78, .5); } 100% { box-shadow: 0 4px 10px rgba(4, 12, 8, .35); } }
@keyframes glyph-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes card-in { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes card-refresh-in {
  from { opacity: .35; transform: scale(.965); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}
.aug-card.slot-refreshed {
  animation: card-refresh-in .38s var(--ease-out) both;
  animation-delay: 0s;
}
@keyframes stamp-in { from { opacity: 0; transform: translate(-50%, -50%) rotate(-9deg) scale(1.7); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-9deg) scale(1); } }
@keyframes stamp-slam {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-10deg) scale(1.55); }
  55% { opacity: 1; transform: translate(-50%, -50%) rotate(-10deg) scale(.96); }
  100% { opacity: .94; transform: translate(-50%, -50%) rotate(-10deg) scale(1); }
}
@keyframes dice-tumble {
  0% { transform: rotate(0deg) scale(1); }
  45% { transform: rotate(200deg) scale(.86); }
  80% { transform: rotate(340deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes dice-roll-3d {
  0% { transform: rotateX(0) rotateY(0) rotateZ(0) translateY(0); }
  30% { transform: rotateX(260deg) rotateY(170deg) rotateZ(80deg) translateY(-13px); }
  68% { transform: rotateX(520deg) rotateY(390deg) rotateZ(210deg) translateY(2px); }
  100% { transform: rotateX(720deg) rotateY(720deg) rotateZ(360deg) translateY(0); }
}
@keyframes route-draw {
  from { opacity: 0; stroke-dashoffset: 42; }
  to { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes refresh-spin { to { transform: rotate(360deg); } }
@keyframes prism-border { to { background-position: 0 0, 300% 300%; } }
@keyframes board-glow { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }

/* ─────────────────────────── 12. 减动效 ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .board-stage.shake { animation: none; }
}

/* ─────────────────────────── 13. 响应式 ─────────────────────────── */

@media (max-width: 1180px) {
  .arena {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "top"
      "board"
      "side";
  }
  .seat-left, .seat-right { grid-area: side; }
  .arena { gap: 8px; }
  .seat-side { flex-direction: row; padding: 8px 12px; }
  .seat { opacity: .55; }
  .board-wrap { width: min(calc(100dvh - 300px), 100%, 760px); }
  .player-tray { grid-template-columns: auto 184px minmax(0, 1fr); }
  .my-planes, .my-hand { display: none; }
}

@media (max-width: 760px) {
  .game-entry { place-items: start center; padding: 12px; }
  .entry-sheet { min-height: 0; grid-template-columns: 1fr; border-radius: 14px; }
  .entry-intro {
    min-height: 230px;
    padding: 30px 26px 26px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .entry-intro::after { display: none; }
  .entry-mark { width: 52px; height: 52px; margin: 22px 0 14px; }
  .entry-intro h1 { font-size: 38px; }
  .entry-brand-en { margin-top: 6px; font-size: 8px; }
  .entry-intro > p { margin: 9px 0 16px; font-size: 12px; }
  .entry-rule-line { flex-wrap: wrap; }
  .entry-config { padding: 26px 22px 28px; }
  .entry-segment { margin-bottom: 24px; }
  .entry-option { min-height: 64px; padding: 10px 12px; }
  .entry-option strong { font-size: 15px; }
  .mode-option { min-height: 66px; }
  .entry-start { min-height: 64px; padding: 10px 14px; }
  .entry-start span { font-size: 16px; }
  .entry-start small { max-width: 18ch; text-align: right; }
  .table { grid-template-rows: auto minmax(0, 1fr) auto; }
  .table-top { grid-template-columns: auto minmax(0, 1fr); padding: 8px 10px; gap: 6px; }
  .turn-banner { grid-column: 1 / 3; grid-row: 2; justify-self: center; }
  .brand-copy small, .round-badge { display: none; }
  .brand { min-width: 0; gap: 7px; }
  .brand-mark { width: 28px; height: 28px; }
  .brand-copy strong { font-size: 11px; white-space: nowrap; }
  .table-actions { min-width: 0; gap: 4px; overflow: hidden; }
  .table-actions .ghost-btn { min-height: 30px; padding: 0 7px; font-size: 9px; white-space: nowrap; }
  .table-actions #logToggle, .table-actions #themeToggle { display: none; }
  .player-tray { grid-template-columns: 148px minmax(0, 1fr); margin: 6px 10px 10px; padding: 8px 10px; gap: 8px; }
  .me-block, .cause-strip { display: none; }
  .tray-center strong { font-size: 12px; }
  .dice-station { min-width: 0; padding: 2px 8px 2px 0; border-left: 0; }
  .dice-throw { grid-template-columns: 54px 1fr; }
  .dice-scene { width: 52px; height: 52px; transform: scale(.88); }
  .dice-modifiers { display: none; }
  .augment-grid { grid-template-columns: 1fr; justify-items: stretch; }
  .augment-choice { width: 100%; }
  .aug-card { width: 100%; min-height: 166px; padding: 17px 18px 14px; }
  .aug-card .ac-hex { display: none; }
  .aug-card .ac-name { margin: 6px 0; font-size: 24px; }
  .aug-card .ac-desc { font-size: 12px; line-height: 1.5; }
  .aug-card .ac-relation { margin-top: 8px; padding: 5px 9px; }
  .aug-card .card-no { bottom: auto; top: 12px; }
  .log-drawer { width: min(340px, 92vw); }
}