.game-card {
  position: relative;
  width: calc(var(--card-face-w) * 1em);
  height: calc(var(--card-face-h) * 1em);
  background: var(--c-card-face);
  color: var(--c-card-ink);
  border: var(--bw) solid var(--c-card-border);
  border-radius: 0.5em;
  overflow: hidden;
}

/* 頂列＝牌名＋路徑章（章緊貼名稱右方；名稱過長時收縮省略、章恆完整） */
.gc-head {
  position: absolute;
  top: 3.5%;
  left: 5.5%;
  right: 5.5%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.25em;
}

.gc-name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.58em;
  font-weight: 700;
  background: var(--c-card-name);
  border-radius: 0.3em;
  padding: 0.08em 0.35em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gc-marks {
  position: absolute;
  top: 17%;
  left: 5.5%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 0.18em;
}

.gc-mark {
  width: 0.82em;
  height: 0.82em;
  border-radius: 0.18em;
  border: 0.05em solid rgb(0 0 0 / 0.35);
}

.gc-mark--red {
  background: var(--c-intel-red);
}

.gc-mark--blue {
  background: var(--c-intel-blue);
}

.gc-mark--black {
  background: var(--c-intel-black);
  border-color: var(--c-intel-black-edge);
}

.gc-mark--none {
  background: transparent;
  border: 0.05em dashed rgb(0 0 0 / 0.55);
}

/* 雙色＝單一方塊斜切（切線左下→右上）：左上半＝第一色、右下半＝第二色（黑恆為第二色） */
.gc-mark--red-black {
  background: linear-gradient(135deg, var(--c-intel-red) 50%, var(--c-intel-black) 50%);
  border-color: var(--c-intel-black-edge);
}

.gc-mark--blue-black {
  background: linear-gradient(135deg, var(--c-intel-blue) 50%, var(--c-intel-black) 50%);
  border-color: var(--c-intel-black-edge);
}

/* 路徑章直接顯示路徑名（單列不折行，位於頂列牌名右方）：寬度自適應、保底方形視覺；
   字級由 applyFitTextEm 依 4 中文字預算寬注入（相對卡面 em，超出預算即縮小） */
.gc-mark--route {
  flex-shrink: 0;
  width: auto;
  min-width: 1.64em;
  height: 1.64em;
  padding: 0 0.4em;
  border-radius: 0.36em;
  display: grid;
  place-items: center;
  background: #3b3325;
  color: #ede5d2;
  font-size: var(--fit-font, 0.5em);
  white-space: nowrap;
  border: 0.1em solid rgb(0 0 0 / 0.35);
}

/* 輔助標籤：左欄（色塊下方），徽章式可跨壓效果框左緣；字級由 applyFitTextEm 依預算寬塞入 */
.gc-aux {
  align-self: start;
  font-size: var(--fit-font, 0.42em);
  background: rgb(43 37 26 / 0.85);
  color: #efe6cf;
  border-radius: 0.5em;
  padding: 0.1em 0.45em;
  white-space: nowrap;
}

/* 主視覺＝下段（遞補效果框以下的全部空白，卡面最大區塊）；線稿 SVG 於框內置中等比縮放 */
.gc-art {
  position: absolute;
  top: 48%;
  left: 5.5%;
  right: 5.5%;
  bottom: 4%;
  z-index: 2;
  background: var(--c-card-art);
  border: var(--bw) solid var(--c-card-border);
  display: grid;
  place-items: center;
}

.gc-art-svg {
  width: 74%;
  height: 74%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--c-card-ink-soft);
  opacity: 0.9;
}

/* 雙色調主視覺：形狀類別（角色線稿無此類別，續用上方 currentColor 單色規則） */
.gc-art-svg .art-line {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gc-art-svg .art-line--bold {
  stroke-width: 3.4;
}

.gc-art-svg .art-line--dash {
  stroke-dasharray: 5 3.5;
}

.gc-art-svg .art-stroke-primary {
  stroke: var(--c-art-tint-primary);
}

.gc-art-svg .art-stroke-secondary {
  stroke: var(--c-art-tint-secondary);
}

.gc-art-svg .art-fill-primary {
  fill: var(--c-art-tint-primary);
  stroke: none;
}

.gc-art-svg .art-fill-secondary {
  fill: var(--c-art-tint-secondary);
  stroke: none;
}

/* 卡面依牌色注入兩枚色調變數（class 化、不用 inline style）；上方 .art-* 讀取之 */
.gc-tint--red {
  --c-art-tint-primary: var(--c-intel-red);
  --c-art-tint-secondary: var(--c-intel-red);
}

.gc-tint--blue {
  --c-art-tint-primary: var(--c-intel-blue);
  --c-art-tint-secondary: var(--c-intel-blue);
}

.gc-tint--black {
  --c-art-tint-primary: var(--c-intel-black);
  --c-art-tint-secondary: var(--c-intel-black);
}

.gc-tint--red-black {
  --c-art-tint-primary: var(--c-intel-red);
  --c-art-tint-secondary: var(--c-intel-black);
}

.gc-tint--blue-black {
  --c-art-tint-primary: var(--c-intel-blue);
  --c-art-tint-secondary: var(--c-intel-black);
}

.gc-tint--green-black {
  --c-art-tint-primary: var(--c-intel-green);
  --c-art-tint-secondary: var(--c-intel-black);
}

.gc-art-hint {
  font-size: 0.55em;
  color: var(--c-card-ink-soft);
}

/* 效果框＝中段（上下緣對齊左欄功能區塊帶；左緣退讓至輔助標籤 4 中文字預算右緣，與左欄完全分離） */
.gc-effect {
  position: absolute;
  top: 17%;
  left: 45%;
  right: 5.5%;
  bottom: 55%;
  z-index: 1;
  background: var(--c-card-effect);
  border-radius: 0.3em;
  padding: 0.25em 0.3em;
  overflow: hidden;
}

/* 效果全文：一般尺寸固定 0.5em 溢出裁切；放大版由 activateEffectFit 注入 --fit-font 貪婪塞入 */
.gc-effect-text {
  display: block;
  font-size: var(--fit-font, 0.5em);
  line-height: 1.3;
  color: var(--c-card-ink-soft);
  text-align: left;
  white-space: pre-line;
}

.game-card--mini {
  font-size: 0.68rem;
}

.game-card--mini .gc-effect {
  display: none;
}

.game-card--mini .gc-aux {
  display: none;
}

/* mini 卡無效果框：主視覺回填中＋下段（維持原視覺量） */
.game-card--mini .gc-art {
  top: 17%;
  left: 24%;
}

.game-card--preview {
  font-size: 1.7rem;
  justify-self: center;
}

.game-card--peek {
  font-size: 2.1rem;
  box-shadow: var(--shadow-pop);
}

.game-card--id {
  font-size: 0.57rem;
}

.game-card--identity {
  --c-card-face: #d2c5a3;
  --c-card-name: #bfae83;
  --c-card-art: #c7b890;
  --c-card-effect: #c5b68e;
}

/* 僅自己可見＝PRIVATE 遮紋（自視角＝左上至右下）鋪於卡面最下層 */
.game-card--self-only {
  background: var(--hidden-self-pattern), var(--c-card-face);
}

/* ===== 角色牌（解耦自功能牌 layout，結構見 charFace.js；classes 以 cc- 前綴獨立） ===== */
.char-card {
  position: relative;
  width: calc(var(--card-face-w) * 1em);
  height: calc(var(--card-face-h) * 1em);
  background: var(--c-card-face);
  color: var(--c-card-ink);
  border: var(--bw) solid var(--c-card-border);
  border-radius: 0.5em;
  overflow: hidden;
}

/* 頂列＝僅名稱 */
.cc-head {
  position: absolute;
  top: 3.5%;
  left: 5.5%;
  right: 5.5%;
  z-index: 4;
  display: flex;
  align-items: center;
}

/* 功能名稱 tag 直欄＝性別方塊下方左靠堆疊（左欄，與功能牌「色塊＋輔助標籤」同構）；
   字級由 charFace 雙重貪婪（內文寬→總高）注入 --fit-font */
.cc-tags {
  position: absolute;
  /* 頂緣＝性別方塊下緣（17.5%＋0.8em≈28.2%）＋統一間隙 0.26em ≈ 31.7% */
  top: 31.7%;
  left: 5.5%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 與左欄統一間隙同值（charFace 之 TAG_GAP_EM 同步） */
  gap: 0.26em;
}

.cc-name {
  /* 名稱佔據扣除固定圖示章後的全部可用寬；僅名稱過長時才省略 */
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.58em;
  font-weight: 700;
  background: var(--c-card-name);
  border-radius: 0.3em;
  padding: 0.08em 0.35em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 起始狀態章（頂列右緣圖示框）：太陽＝起始公開、弦月＝起始隱藏（語言中立，文字提示走 title）；
   固定尺寸與性別方塊同級 */
.cc-vis {
  flex: 0 0 auto;
  margin-left: auto;
  /* 高度收在頂列行高內（名稱章同級），下緣不侵入獲勝文框（cc-win 上緣 17%） */
  width: 0.72em;
  height: 0.72em;
  display: grid;
  place-items: center;
}

.cc-vis-icon {
  width: 82%;
  height: 82%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  color: var(--c-card-ink);
}

/* 性別方塊與起始狀態章＝相同圓角外框＋不透明淡色填滿（阻斷底層 PRIVATE 遮紋透入內容區） */
.cc-mark,
.cc-vis {
  border-radius: 0.18em;
  border: 0.05em solid rgb(0 0 0 / 0.35);
  background: var(--c-card-name);
}

.cc-tag {
  flex-shrink: 0;
  min-width: 1.2em;
  padding: 0.1em 0.4em;
  border-radius: 0.36em;
  display: grid;
  place-items: center;
  background: #3b3325;
  color: #ede5d2;
  font-size: var(--fit-font, 0.42em);
  white-space: nowrap;
  border: 0.1em solid rgb(0 0 0 / 0.35);
}

/* 性別方塊（原情報顏色位置）：單性＝置中符號；雙性＝斜切（左上 ♂、右下 ♀，比照雙色情報切線）；
   扁寬版（高略縮、寬放大供雙性斜切喘息）——寬度上限受獲勝文框左緣（52%＝2.7em）約束，不得逾越；
   左欄垂直間隙統一＝卡面頂緣內距（3.5%≈0.26em）：名稱下緣→此處 top 17.5% 即該間隙 */
.cc-mark {
  position: absolute;
  top: 17.5%;
  left: 5.5%;
  z-index: 4;
  width: 1.5em;
  height: 0.8em;
}

.cc-mark--male .cc-glyph,
.cc-mark--female .cc-glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.6em;
  font-weight: 700;
  color: var(--c-card-ink);
}

.cc-mark--both {
  background: linear-gradient(135deg, rgb(0 0 0 / 0.16) 50%, rgb(0 0 0 / 0.04) 50%), var(--c-card-name);
}

.cc-mark--both .cc-glyph {
  position: absolute;
  font-size: 0.5em;
  font-weight: 700;
  color: var(--c-card-ink);
  line-height: 1;
}

.cc-mark--both .cc-glyph--a {
  top: 0.06em;
  left: 0.18em;
}

.cc-mark--both .cc-glyph--b {
  bottom: 0.06em;
  right: 0.18em;
}

/* 獲勝條件框（原效果敘述區）：左緣內縮至 tag 6 中文字預算右緣（2.4em ≈ 46%＋左距） */
.cc-win {
  position: absolute;
  top: 17%;
  left: 52%;
  right: 5.5%;
  bottom: 44%;
  z-index: 1;
  background: var(--c-card-effect);
  border-radius: 0.3em;
  padding: 0.25em 0.3em;
  overflow: hidden;
}

.cc-win-text {
  display: block;
  font-size: var(--fit-font, 0.5em);
  line-height: 1.3;
  color: var(--c-card-ink-soft);
  text-align: left;
  white-space: pre-line;
}

/* 主視覺＝下段；徽記顏色量占比約 綠 80%／紅+藍 10%／黑 10%（色票沿用情報語意色） */
.cc-art {
  position: absolute;
  top: 58%;
  left: 5.5%;
  right: 5.5%;
  bottom: 4%;
  z-index: 2;
  background: var(--c-card-art);
  border: var(--bw) solid var(--c-card-border);
  display: grid;
  place-items: center;
}

.cc-art-hint {
  font-size: 0.55em;
  color: var(--c-card-ink-soft);
}

.char-art-svg {
  width: 82%;
  height: 82%;
}

.char-art-svg .ca-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.char-art-svg .ca-s-green {
  stroke: var(--c-intel-green);
}

.char-art-svg .ca-s-red {
  stroke: var(--c-intel-red);
}

.char-art-svg .ca-s-blue {
  stroke: var(--c-intel-blue);
}

.char-art-svg .ca-s-black {
  stroke: var(--c-intel-black);
}

.char-art-svg .ca-f-green {
  fill: var(--c-intel-green);
  stroke: none;
}

.char-art-svg .ca-f-red {
  fill: var(--c-intel-red);
  stroke: none;
}

.char-art-svg .ca-f-blue {
  fill: var(--c-intel-blue);
  stroke: none;
}

.char-art-svg .ca-f-black {
  fill: var(--c-intel-black);
  stroke: none;
}

/* 尺寸（比照功能牌尺寸階；mini 依「與一般卡牌相同」原則隱藏獲勝文、主視覺回填） */
.char-card--mini {
  font-size: 0.68rem;
}

.char-card--mini .cc-win {
  display: none;
}

.char-card--mini .cc-art {
  top: 30%;
}

.char-card--id {
  font-size: 0.57rem;
}

.char-card--draft {
  /* 選角面板已移除標題列，卡面遞補其空間（原 1.05rem） */
  font-size: 1.25rem;
}

.char-card--peek {
  font-size: 2.1rem;
  box-shadow: var(--shadow-pop);
}

/* 僅自己可見（執行期反面狀態）＝PRIVATE 遮紋（自視角）；卡面本體素面，紋一律由視角層掛 class */
.char-card--self-only {
  background: var(--hidden-self-pattern), var(--c-card-face);
}

/* 選角情境（.draft-card 容器內）：起始隱藏候選卡＝裝飾性遮紋，供快速辨識；
   char-card--start-secret 為卡面印刷屬性的零樣式語意標記，僅在情境選擇器內上紋 */
.draft-card .char-card--start-secret {
  background: var(--hidden-self-pattern), var(--c-card-face);
}

/* 指定期間（本回合）獲得的手牌：亮紅外框取代預設灰黑框線 */
.game-card--fresh {
  border-color: var(--c-card-fresh);
}