.identity {
  display: flex;
  gap: 0.5rem;
}

.id-wrap {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
}

.id-label {
  font-size: 0.6rem;
  color: var(--c-mut);
}

.id-card {
  position: relative;
  width: 3.1rem;
  height: 4.3rem;
  border: var(--bw) solid var(--c-card-border);
  border-radius: 0.45rem;
  background: var(--c-card-face);
  color: var(--c-card-ink);
  display: grid;
  place-items: center;
}

/* 自我目標＝整個已獲得情報區（點選不分顏色）：綠脈衝→紅脈衝二段確認 */
.captured--targetable {
  cursor: pointer;
  border-radius: 0.6rem;
  background: var(--c-ok-soft);
  animation: target-pulse var(--pulse-duration) ease-out infinite;
}

.captured--armed {
  cursor: pointer;
  border-radius: 0.6rem;
  background: var(--c-danger-soft);
  animation: target-armed-pulse var(--pulse-duration) ease-out infinite;
}

.id-card--back {
  background: var(--backface-pattern);
  border-color: var(--c-border-strong);
  color: var(--c-ink);
}

.id-card--self-only {
  background: var(--selfmark-pattern), var(--c-card-face);
}

.id-role-art {
  width: 1.6rem;
  height: 1.6rem;
}

/* 放大版角色牌：位置由 peek 層決定，尺寸比照手牌放大卡（game-card--peek） */
.id-card--peek {
  width: 10.9rem;
  height: 15.75rem;
  border-radius: 1.6rem;
  gap: 0.7rem;
  box-shadow: var(--shadow-pop);
}

.id-card--peek .id-role-art {
  width: 5.6rem;
  height: 5.6rem;
}

.id-card--peek .id-name {
  font-size: 2rem;
}

.id-name {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.1rem;
  text-align: center;
}

.id-chip {
  position: absolute;
  bottom: 0.2rem;
  left: 50%;
  translate: -50% 0;
  font-size: 0.5rem;
  padding: 0.05rem 0.35rem;
  border-radius: 0.5rem;
  white-space: nowrap;
  background: rgb(43 37 26 / 0.92);
  border: var(--bw) solid rgb(0 0 0 / 0.35);
}

.id-chip--public {
  color: #a9d8b8;
}

.id-chip--hidden {
  color: #e8a3a3;
}

.id-chip--self {
  color: var(--c-accent-ink);
}

/* 身份牌卡面較窄且 overflow: hidden，章縮小以免被裁切 */
.game-card--identity .id-chip {
  font-size: 0.46rem;
  padding-inline: 0.25rem;
}

/* 自己的面前情報：直欄計數（紅/藍/黑 由上而下），置於身份牌右側 */
.captured {
  flex: 0 0 auto;
  display: grid;
  align-content: center;
}

.captured .intel-row {
  flex-direction: column;
  align-items: stretch;
}

/* 角色牌右靠（原黃框位置讓給情報計數） */
.own-role {
  margin-left: auto;
  display: flex;
}

button.intel-counter {
  cursor: pointer;
}

.intel-row {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: wrap;
}

.intel-counter {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border: var(--bw) solid var(--c-border);
  border-radius: 1rem;
  padding: 0.08rem 0.45rem;
  font-size: 0.68rem;
  background: var(--c-surface-2);
}

.ic-swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.18rem;
  border: var(--bw) solid rgb(0 0 0 / 0.4);
}

.ic-swatch--red {
  background: var(--c-intel-red);
}

.ic-swatch--blue {
  background: var(--c-intel-blue);
}

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