/* ==========================================================================
   短剧投资人 · 线上版基础样式
   依据：design/art_bible/12_implementation_spec.md
   目标：深蓝 + 金线桌游风，零外部资源
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Variables
   -------------------------------------------------------------------------- */
:root {
  /* Base */
  --bg-deep: #0E1A2E;
  --bg-panel: #152238;
  --bg-card: #1A2A42;
  --bg-input: #0F1A2C;

  /* Gold */
  --gold-primary: #C8A24E;
  --gold-light: #E8C97A;
  --gold-dark: #9A7A32;

  /* Text */
  --text-primary: #F5F1E6;
  --text-secondary: #A9B4C2;
  --text-muted: #6B7A8F;

  /* States */
  --success: #4CAF79;
  --warning: #E8A23D;
  --error: #C0392B;
  --error-glow: #FF5A4D;
  --info: #5B8DEF;

  /* Type colors */
  --type-action: #D94A4A;
  --type-female: #E68A9A;
  --type-male: #3E5F8A;
  --type-brand: #2CB79C;
  --type-commerce: #F2A93B;
  --type-short: #9CA3AF;

  /* Character colors */
  --role-platform: #2CB79C;
  --role-investor: #C8A24E;
  --role-audience: #6B7A8F;
  --role-producer: #F2A93B;
  --role-director: #5B8DEF;
  --role-writer: #8E7CC3;
  --role-male-lead: #D94A4A;
  --role-female-lead: #E68A9A;
  --role-actor: #9CA3AF;
  --role-newcomer: #4CAF79;

  /* Chips */
  --chip-10: #C8A24E;
  --chip-50: #E8C97A;
  --chip-100: #F5E6C8;
  --chip-shadow: #9A7A32;

  /* Typography */
  --font-zh: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: "SF Mono", "SFMono-Regular", "Menlo", "Consolas", "Roboto Mono", monospace;
  --font-nickname: "PingFang SC", "Microsoft YaHei", sans-serif;

  /* Easing */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-sharp: cubic-bezier(0.4, 0, 1, 1);

  /* Duration */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-dramatic: 600ms;
  --duration-card-flip: 600ms;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-gold: 0 0 12px rgba(200, 162, 78, 0.35);
  --shadow-error: 0 0 12px rgba(192, 57, 43, 0.45);

  /* Breakpoints */
  --bp-desktop-xl: 1440px;
  --bp-desktop: 1280px;
  --bp-tablet: 1024px;
  --bp-small-tablet: 768px;

/* Layout */
--header-height: 56px;
--action-height: 220px;
/* typebar-height 不再使用（类型框已移到中央） */
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

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

body {
  font-family: var(--font-zh);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-deep);
  overflow: hidden;
}

button {
  font-family: inherit;
  cursor: pointer;
}

img {
  max-width: 100%;
  display: block;
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--gold-primary);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background: rgba(200, 162, 78, 0.3);
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   3. Typography utilities
   -------------------------------------------------------------------------- */
.text-h1 { font-size: 32px; font-weight: 700; line-height: 1.3; }
.text-h2 { font-size: 24px; font-weight: 600; line-height: 1.35; }
.text-h3 { font-size: 18px; font-weight: 600; line-height: 1.4; }
.text-body { font-size: 16px; font-weight: 400; line-height: 1.6; }
.text-small { font-size: 14px; font-weight: 400; line-height: 1.5; }
.text-chip { font-size: 28px; font-weight: 700; line-height: 1; }
.text-value { font-size: 36px; font-weight: 700; line-height: 1; }
.text-countdown { font-size: 48px; font-weight: 700; line-height: 1; }

.font-mono { font-family: var(--font-mono); }

/* --------------------------------------------------------------------------
   4. Layout shell
   -------------------------------------------------------------------------- */
.game-shell {
  display: grid;
  grid-template-rows: var(--header-height) 1fr var(--action-height);
  height: 100vh;
  width: 100vw;
  background: radial-gradient(ellipse at center, #142338 0%, var(--bg-deep) 70%);
}

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-md);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--gold-primary);
}

.game-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 700;
  color: var(--gold-primary);
}

.game-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  color: var(--text-secondary);
}

.game-countdown {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--gold-light);
}

.game-countdown.warning {
  color: var(--error-glow);
  animation: countdownPulse 1s infinite;
}

/* ── 旧 typebar 已移除（类型框现在在中央 table-area 内） ── */

/* --------------------------------------------------------------------------
   5a. 金色双层边框装饰（对齐实物桌游图）
   -------------------------------------------------------------------------- */
.gold-border-frame {
  position: absolute;
  inset: 12px;
  border: 2px solid var(--gold-primary);
  border-radius: 20px;
  pointer-events: none;
  z-index: 1;
  box-shadow:
    inset 0 0 0 1px rgba(200, 162, 78, 0.15),
    0 0 12px rgba(200, 162, 78, 0.08);
}
/* 内层金线 */
.gold-border-frame::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(200, 162, 78, 0.45);
  border-radius: 16px;
  pointer-events: none;
}
/* 四角弧形装饰：用 radial-gradient 在四角画出 quarter-arc（零外部资源） */
.gold-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  pointer-events: none;
  z-index: 2;
}
.gold-corner::before,
.gold-corner::after {
  content: "";
  position: absolute;
  background: var(--gold-primary);
  border-radius: 50%;
}
.gold-corner::before {
  width: 22px;
  height: 22px;
  border: 2px solid var(--gold-primary);
  background: transparent;
  box-shadow: 0 0 6px rgba(200, 162, 78, 0.5);
}
.gold-corner::after {
  width: 4px;
  height: 4px;
  background: var(--gold-light);
}
/* 四角定位：左上、右上、左下、右下 */
.gold-corner--tl { top: 6px;    left: 6px;    }
.gold-corner--tr { top: 6px;    right: 6px;   }
.gold-corner--bl { bottom: 6px; left: 6px;    }
.gold-corner--br { bottom: 6px; right: 6px;   }
/* 四角内的对角短线：与对角圆弧交叉 */
.gold-corner--tl::after { top: 4px;  left: 4px;  }
.gold-corner--tr::after { top: 4px;  right: 4px; }
.gold-corner--bl::after { bottom: 4px; left: 4px;  }
.gold-corner--br::after { bottom: 4px; right: 4px; }

/* --------------------------------------------------------------------------
   5b. 中央游戏区（类型框 + 投流池）
   -------------------------------------------------------------------------- */
.central-zone {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  z-index: 2;
  width: min(680px, 80vw);
}

/* 投流池：5 个卡槽横排 */
.traffic-pool {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  padding: var(--space-xs) var(--space-md);
}
.traffic-slot {
  width: 56px;
  height: 40px;
  background: var(--bg-card);
  border: 1px solid var(--gold-dark);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.traffic-slot-inner {
  font-size: 10px;
  color: var(--text-muted);
}
.traffic-slot--filled {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--gold-light);
  font-weight: 700;
}
.traffic-chip {
  font-size: 14px;
}
.traffic-seat {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--gold-light);
  font-weight: 700;
  background: var(--bg-deep);
  border: 1px solid var(--gold-dark);
  border-radius: 6px;
  padding: 0 3px;
}
.traffic-abbr {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--gold-primary);
  font-weight: 700;
}
.traffic-amt {
  font-size: 9px;
  font-family: var(--font-mono);
  color: var(--gold-light);
  font-weight: 600;
}

/* 类型网格：左列3 + 右列3 */
.type-grid {
  display: flex;
  gap: var(--space-lg);
  align-items: stretch;
}
.type-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* 中央底部标题横条（对齐实物桌游图） */
.table-title-strip {
  font-family: var(--font-zh);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--gold-primary);
  text-align: center;
  padding: 4px 12px;
  border-top: 1px solid var(--gold-dark);
  border-bottom: 1px solid var(--gold-dark);
  background: linear-gradient(90deg, transparent 0%, rgba(200, 162, 78, 0.08) 50%, transparent 100%);
  text-shadow: 0 0 4px rgba(200, 162, 78, 0.3);
}

.table-area {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.action-area {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-panel);
  border-top: 1px solid var(--gold-primary);
  min-height: 0;
}

/* --------------------------------------------------------------------------
   5. Type cards
   -------------------------------------------------------------------------- */
.type-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 160px;
  height: 110px;
  padding: var(--space-sm);
  background: var(--bg-card);
  border: 1px solid var(--gold-primary);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-fast) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-in-out);
}

.type-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-gold);
}

.type-card.type-action { border-left-color: var(--type-action); }
.type-card.type-female { border-left-color: var(--type-female); }
.type-card.type-male { border-left-color: var(--type-male); }
.type-card.type-brand { border-left-color: var(--type-brand); }
.type-card.type-commerce { border-left-color: var(--type-commerce); }
.type-card.type-short { border-left-color: var(--type-short); }

.type-value {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
}

.type-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: 50%;
  background: rgba(245, 241, 230, 0.1);
}

.type-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.type-pool {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 13px;
  color: var(--text-secondary);
}

.type-pool-amount {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--gold-primary);
}

.type-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  display: none;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--bg-deep);
  background: var(--gold-light);
  border-radius: 10px;
}

.type-card.doubled .type-badge--double { display: block; }
.type-card.doubled .type-value {
  color: var(--gold-light);
  text-shadow: 0 0 8px rgba(232, 201, 122, 0.6);
}

.type-stamp {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(192, 57, 43, 0.2);
  border-radius: var(--radius-md);
}

.type-stamp::after {
  content: "停牌";
  padding: 4px 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--gold-light);
  background: var(--error);
  border: 2px solid var(--gold-light);
  border-radius: var(--radius-sm);
  transform: rotate(-12deg);
}

.type-card.halted .type-stamp { display: flex; }

.market-divider {
  width: 2px;
  height: 70%;
  background: linear-gradient(to bottom, transparent, var(--gold-primary), transparent);
}

/* --------------------------------------------------------------------------
   6. Player seats
   -------------------------------------------------------------------------- */
.player-seat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  width: 130px;
  padding: var(--space-sm);
  background: var(--bg-card);
  border: 1px solid var(--gold-dark);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-fast) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-in-out);
}

.player-seat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.player-seat--human {
  width: 150px;
  border-color: var(--gold-primary);
  border-width: 2px;
}

.player-seat--turn .player-avatar {
  animation: turnPulse 1.5s infinite;
}

.player-seat--thinking .player-avatar {
  border-style: dashed;
  animation: thinkingSpin 1.5s linear infinite;
}

.player-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 2px solid var(--gold-primary);
  overflow: hidden;
}

.avatar-player {
  width: 64px;
  height: 64px;
  font-size: 28px;
  font-weight: 700;
  color: var(--gold-primary);
}

.avatar-npc {
  width: 56px;
  height: 56px;
  font-size: 28px;
}

.avatar-initial {
  font-family: var(--font-nickname);
}

.avatar-npc-investor { border-color: var(--role-investor); color: var(--role-investor); }
.avatar-npc-director { border-color: var(--role-director); color: var(--role-director); }
.avatar-npc-writer { border-color: var(--role-writer); color: var(--role-writer); }
.avatar-npc-platform { border-color: var(--role-platform); color: var(--role-platform); }
.avatar-npc-producer { border-color: var(--role-producer); color: var(--role-producer); }
.avatar-npc-audience { border-color: var(--role-audience); color: var(--role-audience); }
.avatar-npc-male-lead { border-color: var(--role-male-lead); color: var(--role-male-lead); }
.avatar-npc-female-lead { border-color: var(--role-female-lead); color: var(--role-female-lead); }
.avatar-npc-actor { border-color: var(--role-actor); color: var(--role-actor); }
.avatar-npc-newcomer { border-color: var(--role-newcomer); color: var(--role-newcomer); }

.player-info {
  text-align: center;
}

.player-name {
  max-width: 110px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.player-cash {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-light);
}

.player-bet {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.bet-card-stack {
  display: flex;
  align-items: center;
}

.card-back-mini {
  display: inline-block;
  width: 16px;
  height: 22px;
  margin-left: -8px;
  background: var(--bg-input);
  border: 1px solid var(--gold-dark);
  border-radius: 2px;
}

.card-back-mini:first-child { margin-left: 0; }

.bet-chips {
  display: flex;
  align-items: center;
  gap: 2px;
}

.chip-amount {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-primary);
}

.player-role-tag {
  padding: 1px 6px;
  font-size: 11px;
  color: var(--text-secondary);
  background: rgba(245, 241, 230, 0.08);
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   6b. 10 座位外圈定位（顺时针 1→2→3→4→5→6(HUMAN)→7→8→9→10）
       HUMAN(P6) 在底部居中正对操作栏；其余环绕在 .table-area 内圈
   -------------------------------------------------------------------------- */
.player-seat.pos-p1  { left: 2%;   bottom: 4%;  }   /* 底-左 */
.player-seat.pos-p2  { left: 1%;   top: 58%;   }   /* 左-下 */
.player-seat.pos-p3  { left: 1%;   top: 30%;   }   /* 左-上 */
.player-seat.pos-p4  { left: 16%;  top: 2%;    }   /* 顶-左 */
.player-seat.pos-p5  { left: 36%;  top: 1%;    }   /* 顶-中左 */
.player-seat.pos-p6  { left: 50%;  bottom: 2%; transform: translateX(-50%); }   /* 底-中：真人 */
.player-seat.pos-p7  { right: 36%; top: 1%;    }   /* 顶-中右 */
.player-seat.pos-p8  { right: 16%; top: 2%;    }   /* 顶-右 */
.player-seat.pos-p9  { right: 1%;  top: 30%;   }   /* 右-上 */
.player-seat.pos-p10 { right: 1%;  top: 58%;   }   /* 右-下 */

/* --------------------------------------------------------------------------
   7. Chips
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--bg-deep);
  border: 2px dashed var(--chip-shadow);
  box-shadow: 0 2px 0 var(--chip-shadow);
}

.chip-10 {
  width: 28px;
  height: 28px;
  background: var(--chip-10);
}

.chip-50 {
  width: 32px;
  height: 32px;
  background: var(--chip-50);
}

.chip-100 {
  width: 36px;
  height: 36px;
  background: var(--chip-100);
}

/* --------------------------------------------------------------------------
   8. Central event area
   -------------------------------------------------------------------------- */
.event-area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, 45vw);
  padding: var(--space-md);
  background: rgba(21, 34, 56, 0.85);
  border: 1px solid var(--gold-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.event-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--gold-light);
  margin-bottom: var(--space-sm);
}

.event-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.event-pools {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.pool-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.pool-bar-label {
  width: 70px;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: left;
}

.pool-bar-track {
  flex: 1;
  height: 8px;
  background: var(--bg-input);
  border-radius: 4px;
  overflow: hidden;
}

.pool-bar-fill {
  height: 100%;
  background: var(--gold-primary);
  border-radius: 4px;
  transition: width var(--duration-normal) var(--ease-in-out);
}

.pool-bar-amount {
  width: 60px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--gold-light);
  text-align: right;
}

/* --------------------------------------------------------------------------
   9. Resource cards
   -------------------------------------------------------------------------- */
.hand-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  overflow: hidden;
}

.hand-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.hand-cards {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  padding-bottom: var(--space-xs);
}

/* ── 资源牌手牌 ── */
.res-cards {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding-bottom: var(--space-xs);
}
.res-card {
  min-width: 92px;
  max-width: 104px;
  flex: 1 1 92px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.res-card.res-pos { border-left: 4px solid var(--pos, #3FB950); }
.res-card.res-neg { border-left: 4px solid var(--neg, #E84855); }
.res-card .res-role { font-size: 11px; color: var(--text-secondary); }
.res-card .res-effect { font-size: 18px; font-weight: 800; }
.res-card.res-pos .res-effect { color: var(--pos, #3FB950); }
.res-card.res-neg .res-effect { color: var(--neg, #E84855); }
.res-card .res-range { font-size: 11px; color: var(--text-secondary); }
.res-card .res-note { font-size: 9px; color: var(--text-muted); line-height: 1.2; margin-top: 2px; }
.res-card .res-played-badge {
  position: absolute; top: 2px; right: 4px; font-size: 9px; color: var(--text-muted);
  background: var(--surface-3, #2a2f3a); border-radius: 4px; padding: 0 4px;
}
.res-card { position: relative; cursor: default; transition: transform .12s ease, box-shadow .12s ease; }
/* 出牌权阶段：可点击打出的资源牌 */
.res-cards--play { gap: var(--space-sm); margin-top: 4px; }
.res-card.res-playable {
  cursor: pointer; border-color: var(--gold, #d4af37);
  box-shadow: 0 0 0 1px var(--gold, #d4af37) inset;
}
.res-card.res-playable:hover { transform: translateY(-3px); box-shadow: 0 4px 14px rgba(212,175,55,.35); }
.res-card.res-playable:focus-visible { outline: 2px solid var(--gold, #d4af37); }
.res-card.res-played {
  opacity: .45; filter: grayscale(.6); border-style: dashed;
  border-color: var(--border); box-shadow: none;
}
.res-hand-label { color: var(--gold, #d4af37); }

/* ── 我的短剧持仓卡（可点击 → 投流，参考扑克游戏手牌模式） ── */
.my-drama-card {
  flex: 0 0 auto;
  width: 116px;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-sm);
  border-radius: 10px;
  background: var(--bg-card);
  border: 1px solid rgba(200, 162, 78, 0.35);
  border-left: 4px solid var(--gold-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.my-drama-card .my-card-icon { font-size: 30px; line-height: 1; margin-top: 2px; }
.my-drama-card .my-card-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.my-drama-card .my-card-count { font-size: 15px; font-weight: 700; color: var(--gold-light); }
.my-drama-card .my-card-traffic {
  margin-top: auto;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(200, 162, 78, 0.15);
  color: var(--gold-light);
}
.my-drama-card.is-trafficable {
  cursor: pointer;
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 1px var(--gold-primary), 0 2px 10px rgba(200, 162, 78, 0.25);
}
.my-drama-card.is-trafficable:hover,
.my-drama-card.is-trafficable:focus-visible {
  transform: translateY(-4px);
  border-color: var(--gold-light);
  box-shadow: 0 0 0 2px var(--gold-light), 0 6px 16px rgba(200, 162, 78, 0.35);
  outline: none;
}
.my-drama-card.type-action { border-left-color: #E84855; }
.my-drama-card.type-female { border-left-color: #F2A1C2; }
.my-drama-card.type-hero { border-left-color: #4F9DDE; }
.my-drama-card.type-brand { border-left-color: #6FC36F; }
.my-drama-card.type-commerce { border-left-color: #E8A33D; }
.my-drama-card.type-short { border-left-color: #B98CE0; }

.resource-card {
  flex: 0 0 auto;
  width: 120px;
  height: 180px;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--gold-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-fast) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-in-out);
}

.resource-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-gold);
}

.resource-role-bar {
  padding: var(--space-xs) var(--space-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid rgba(200, 162, 78, 0.3);
}

.resource-role-bar.platform { background: var(--role-platform); }
.resource-role-bar.investor { background: var(--role-investor); }
.resource-role-bar.audience { background: var(--role-audience); }
.resource-role-bar.producer { background: var(--role-producer); }
.resource-role-bar.director { background: var(--role-director); }
.resource-role-bar.writer { background: var(--role-writer); }
.resource-role-bar.male-lead { background: var(--role-male-lead); }
.resource-role-bar.female-lead { background: var(--role-female-lead); }
.resource-role-bar.actor { background: var(--role-actor); }

.resource-value {
  padding: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 700;
  text-align: center;
}

.resource-value.positive { color: var(--success); }
.resource-value.negative { color: var(--error-glow); }

.resource-desc {
  flex: 1;
  padding: 0 var(--space-sm);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.resource-scope {
  padding: var(--space-xs) var(--space-sm);
  font-size: 11px;
  color: var(--gold-light);
  background: rgba(200, 162, 78, 0.1);
  text-align: center;
}

/* --------------------------------------------------------------------------
   10. Action buttons
   -------------------------------------------------------------------------- */
.action-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: flex-end;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: 48px;
  padding: 0 var(--space-md);
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-primary);
  transition: filter var(--duration-fast) var(--ease-in-out),
              border-color var(--duration-fast) var(--ease-in-out),
              transform var(--duration-fast) var(--ease-in-out);
}

.btn:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
}

.btn:disabled {
  background: var(--bg-input);
  color: var(--text-muted);
  cursor: not-allowed;
  border-color: transparent;
}

.btn:disabled:hover {
  filter: none;
  transform: none;
}

.btn--primary {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold-primary) 100%);
  color: var(--bg-deep);
  border-color: var(--gold-light);
}

.btn--secondary {
  background: transparent;
  border: 1px solid var(--gold-primary);
  color: var(--gold-primary);
}

.btn--danger {
  background: transparent;
  border: 1px solid var(--error);
  color: var(--error-glow);
}

.btn--warning {
  background: transparent;
  border: 1px solid var(--warning);
  color: var(--warning);
}

.btn--allin {
  background: transparent;
  border: 1px solid var(--gold-light);
  color: var(--gold-light);
  text-shadow: 0 0 6px rgba(232, 201, 122, 0.4);
}

.action-hint {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: right;
}

/* --------------------------------------------------------------------------
   11b. 模态框内类型选择网格
   -------------------------------------------------------------------------- */
.modal-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.modal-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-sm);
  background: var(--bg-input);
  border: 1px solid var(--gold-dark);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-in-out);
}
.modal-type-btn:hover {
  border-color: var(--gold-primary);
  background: rgba(200, 162, 78, 0.1);
}
.modal-type-btn.modal-type--selected {
  border-color: var(--gold-light);
  background: rgba(200, 162, 78, 0.2);
  box-shadow: var(--shadow-gold);
}
.modal-type-icon { font-size: 20px; }
.modal-type-name { font-size: 12px; font-weight: 600; }
.modal-type-val { font-size: 11px; color: var(--text-secondary); }
.modal-type-cap { font-size: 10px; color: var(--gold-primary); margin-top: 2px; }

.modal-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.modal-label {
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.modal-desc-text {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
  line-height: 1.5;
}

/* 投资模态 · 数量 stepper（1 份 = 20 万 = 1 张） */
.share-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-sm) 0;
}
.share-step {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 20px;
  font-weight: 700;
  flex: 0 0 auto;
}
.share-input {
  flex: 1 1 auto;
  width: 100%;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  color: var(--gold-light);
  background: var(--bg-input);
  border: 1px solid var(--gold-primary);
  border-radius: var(--radius-sm);
  -moz-appearance: textfield;
}
.share-input::-webkit-outer-spin-button,
.share-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.share-unit {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* 投流模态 · 「本轮已投流玩家」列表 */
.traffic-section-label {
  margin: var(--space-md) 0 var(--space-xs);
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-light);
  letter-spacing: 0.5px;
}
.traffic-all-list {
  max-height: 140px;
  overflow-y: auto;
  padding: var(--space-xs) var(--space-sm);
  background: rgba(15, 26, 44, 0.6);
  border: 1px solid var(--gold-dark);
  border-radius: var(--radius-sm);
}
.traffic-all-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: var(--space-sm);
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text-primary);
  border-bottom: 1px dashed rgba(200, 162, 78, 0.15);
}
.traffic-all-row:last-child { border-bottom: none; }
.traffic-all-row.is-human { color: var(--gold-light); font-weight: 700; }
.traffic-all-seat {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--gold-primary);
  background: var(--bg-deep);
  border: 1px solid var(--gold-dark);
  border-radius: 8px;
  padding: 1px 6px;
  text-align: center;
}
.traffic-all-type {
  font-family: var(--font-mono);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(245, 241, 230, 0.06);
}
.traffic-all-amt {
  color: var(--gold-light);
  font-weight: 700;
}
.traffic-all-empty,
.traffic-empty {
  padding: var(--space-sm);
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
  background: rgba(15, 26, 44, 0.4);
  border: 1px dashed var(--gold-dark);
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   11c. 玩家座位增强（编号 + 投流指示）
   -------------------------------------------------------------------------- */
.seat-number {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--bg-deep);
  background: var(--gold-primary);
  border-radius: 50%;
  z-index: 2;
}
.traffic-indicator {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--gold-light);
  background: rgba(200, 162, 78, 0.15);
  border: 1px solid var(--gold-dark);
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   11. Tutorial bubble
   -------------------------------------------------------------------------- */
.tutorial-bubble {
  position: absolute;
  max-width: 320px;
  padding: var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--gold-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  z-index: 100;
}

.tutorial-bubble p {
  margin: 0 0 var(--space-md);
  font-size: 14px;
  color: var(--text-primary);
}

.tutorial-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
}

.tutorial-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-sm);
}

.tutorial-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
}

.tutorial-dots .dot.active {
  background: var(--gold-primary);
}

/* --------------------------------------------------------------------------
   12. Animations
   -------------------------------------------------------------------------- */
@keyframes valueUp {
  0% { color: var(--text-primary); transform: translateY(0); }
  50% { color: var(--gold-light); transform: translateY(-4px) scale(1.1); }
  100% { color: var(--text-primary); transform: translateY(0); }
}

@keyframes valueDown {
  0% { color: var(--text-primary); transform: translateY(0); }
  50% { color: var(--error-glow); transform: translateY(4px); }
  100% { color: var(--text-primary); transform: translateY(0); }
}

@keyframes chipFly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  50% { transform: translate(var(--mid-x, 0), -40px) scale(0.9); }
  100% { transform: translate(var(--end-x, 0), var(--end-y, 0)) scale(1); opacity: 1; }
}

@keyframes chipLand {
  0% { transform: scale(1.2); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes turnPulse {
  0% { box-shadow: 0 0 0 0 rgba(200, 162, 78, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(200, 162, 78, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 162, 78, 0); }
}

@keyframes thinkingSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes countdownPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.card-flip {
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform var(--duration-card-flip) var(--ease-in-out);
}

.card-flip.flipped {
  transform: rotateY(180deg);
}

.card-face {
  backface-visibility: hidden;
}

.card-back {
  transform: rotateY(180deg);
}

.anim-value-up { animation: valueUp var(--duration-normal) var(--ease-out-bounce); }
.anim-value-down { animation: valueDown var(--duration-normal) var(--ease-in-sharp); }
.anim-chip-fly { animation: chipFly 500ms var(--ease-in-out) forwards; }
.anim-float { animation: float 3s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   13. Accessibility
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

/* --------------------------------------------------------------------------
   14a. 桌游品牌大字 LOGO（标题大、居中）+ 10% 透明合影背景 + 中央水印
   -------------------------------------------------------------------------- */
.game-logo--hero {
  /* 桌游名字要大、放正中央 */
  flex: 1 1 auto;
  text-align: center;
  font-family: var(--font-zh);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 6px;
  color: var(--gold-light);
  text-shadow:
    0 0 8px rgba(232, 201, 122, 0.55),
    0 0 20px rgba(200, 162, 78, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.4);
}
.game-logo--hero > span[aria-hidden] {
  margin-right: 10px;
  font-size: 24px;
  filter: drop-shadow(0 0 4px rgba(232, 201, 122, 0.6));
}
.game-header {
  /* 给大字 logo 一点呼吸空间 */
  position: relative;
  padding: 14px var(--space-md);
  min-height: 64px;
}
.game-meta {
  flex: 0 0 auto;
  font-size: 13px;
  opacity: 0.85;
}

/* 10% 透明组合背景：父容器 op=0.1，三张图各自 cover 不同位置 */
.bg-collage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.1; /* 整体 10% 透明度 */
  background:
    url("../assets/bg-1.jpg") left top / 50% 50% no-repeat,
    url("../assets/bg-2.jpg") right top / 60% 55% no-repeat,
    url("../assets/bg-3.jpg") center bottom / 70% 60% no-repeat;
  filter: grayscale(0.35) contrast(0.95);
}
.bg-collage::after {
  /* 顶部到底部一道暗渐变，让文字更易读、不抢戏 */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(14, 26, 46, 0.45) 0%, rgba(14, 26, 46, 0.25) 50%, rgba(14, 26, 46, 0.55) 100%);
}

/* 中央大字品牌水印：横贯屏幕正中、10% 不透明、不抢戏 */
.brand-watermark {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-4deg);
  z-index: 1;
  pointer-events: none;
  user-select: none;
  font-family: var(--font-zh);
  font-size: clamp(56px, 9vw, 128px);
  font-weight: 900;
  letter-spacing: 14px;
  white-space: nowrap;
  color: var(--gold-light);
  opacity: 0.10;
  text-shadow:
    0 0 30px rgba(232, 201, 122, 0.4),
    0 0 60px rgba(200, 162, 78, 0.25);
}

/* 保证游戏主 UI 在背景之上、可交互 */
.game-shell {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   14. Responsive breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .central-zone {
    width: min(560px, 90vw);
  }

  .type-card {
    width: 140px;
    height: 100px;
  }

  .type-value {
    font-size: 26px;
  }

  .table-area {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: var(--space-md);
    padding: var(--space-md);
  }

  .player-seat {
    position: static;
    width: auto;
  }

  .event-area {
    position: static;
    transform: none;
    grid-column: 1 / -1;
    width: 100%;
    order: -1;
  }
}

/* Small tablet: 768~1023px */
@media (max-width: 1023px) {
  :root {
    --action-height: 200px;
  }

  .game-shell {
    grid-template-rows: var(--header-height) 1fr var(--action-height);
  }

  .central-zone {
    width: min(480px, 95vw);
    gap: var(--space-sm);
  }

  .type-grid {
    flex-direction: column;
    gap: var(--space-xs);
  }
  .type-col {
    flex-direction: row;
    gap: var(--space-xs);
  }

  .event-area {
    grid-column: 2 / -1;
    grid-row: 1 / 2;
    width: 100%;
  }

  .player-list {
    grid-column: 1 / 2;
    grid-row: 1 / -1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-sm);
  }

  .player-seat {
    position: static;
    width: 100%;
    flex-direction: row;
    align-items: center;
  }

  .player-seat--human {
    width: 100%;
  }

  /* 平板同样清除 inline 座位定位残留，避免被推到屏外 */
  .player-seat[class*="pos-p"] {
    position: static !important;
    transform: none !important;
    left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important;
  }
}

/* Mobile: < 768px —— 微信/手机浏览器可用版（关键修复：清除 inline 座位定位残留） */
@media (max-width: 767px) {
  /* 防止横向溢出（品牌水印 nowrap 等） */
  html, body { overflow-x: hidden; }

  :root {
    --header-height: 52px;
    --action-height: auto;
    --space-md: 10px;
    --space-lg: 14px;
  }

  .game-shell {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh; /* 兼容微信/iOS 地址栏，避免底部被截断 */
    overflow: visible;
  }

  .game-header {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 8px 12px;
    min-height: 52px;
    background: rgba(14, 26, 46, 0.96);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid rgba(200, 162, 78, 0.25);
  }

  .central-zone {
    position: static;
    transform: none;
    width: 100%;
    padding: var(--space-sm);
  }

  /* 六大类型卡：2 列自动换行，单屏可容纳 */
  .type-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .type-col {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .type-card {
    width: calc(50% - 4px);
    height: auto;
    min-height: 74px;
    flex-shrink: 0;
    padding: 8px;
  }
  .type-value { font-size: 22px; }

  .traffic-pool {
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  .traffic-slot { width: 46px; height: 34px; }

  .table-area {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
    min-height: 0;
    overflow: visible;
  }

  .event-area {
    position: static;
    transform: none;
    width: 100%;
    order: -1; /* 事件提示置顶，紧跟中央区 */
  }

  /* ── 关键：清除 index.html inline 的 .pos-pX 绝对定位/位移 ──
     否则 static 元素叠加 translateX(±50%) 会被推到屏幕外，导致无法点击 */
  .player-seat.pos-p1, .player-seat.pos-p2, .player-seat.pos-p3,
  .player-seat.pos-p4, .player-seat.pos-p5, .player-seat.pos-p6,
  .player-seat.pos-p7, .player-seat.pos-p8, .player-seat.pos-p9,
  .player-seat.pos-p10 {
    position: static !important;
    transform: none !important;
    left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important;
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  /* 座位区改为网格（2 列），整局 10 个席位清晰可读 */
  #seat-area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 4px;
  }
  .player-seat {
    width: 100%;
    flex-direction: row;
    align-items: center;
    padding: 8px 10px;
    gap: 8px;
  }
  .player-seat--human { width: 100%; }
  .player-avatar { width: 34px; height: 34px; font-size: 16px; flex-shrink: 0; }

  /* 手牌 / 资源牌：横向可滚动 + 自动换行，避免溢出 */
  .hand-area { padding: 8px; }
  .hand-cards, .res-cards, .res-cards--play {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .hand-card { width: 88px; flex-shrink: 0; }
  .res-card {
    width: 92px;
    height: 132px;
    flex-shrink: 0;
  }
  .resource-value { font-size: 24px; }

  /* 行动区：按钮放大、可换行、底部留出空间避免被署名遮挡 */
  .action-area {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    padding: 10px 10px 28px;
    position: sticky;
    bottom: 0;
    z-index: 15;
    background: rgba(14, 26, 46, 0.97);
    backdrop-filter: blur(4px);
    border-top: 1px solid rgba(200, 162, 78, 0.25);
  }
  .action-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .action-hint { font-size: 12px; text-align: center; margin-bottom: 6px; }
  .btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
    min-height: 46px;          /* 触控目标 ≥44px */
    font-size: 15px;
  }

  /* 模态：占满窄屏，文字与按钮清晰 */
  .modal-box, .board-box {
    width: 96vw;
    max-width: 96vw;
    max-height: 92vh;
    padding: 16px;
    border-radius: var(--radius-md);
  }
  .modal-amount { height: 52px; font-size: 22px; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
  .board-row { grid-template-columns: 40px 1fr 96px 72px; gap: 6px; }

  /* 品牌水印 / 署名在手机上收敛，避免遮挡操作 */
  .brand-watermark {
    font-size: clamp(30px, 12vw, 64px);
    letter-spacing: 6px;
    opacity: 0.08;
  }
  .credit-label {
    z-index: 1;                /* 低于操作区(z15)，不挡按钮 */
    font-size: 10px;
    padding: 2px 6px;
    bottom: 2px;
    left: 2px;
    max-width: 60%;
  }

  /* 日志面板在手机上收为可折叠小条，不占主区 */
  .log-panel {
    position: static;
    width: 100%;
    max-height: 90px;
    margin-top: 4px;
  }
}

/* --------------------------------------------------------------------------
   Status
   -------------------------------------------------------------------------- */
/* 本文件为 Phase 4 美术落地基础样式，供 Phase 5 工程引用。 */