/*
  汣司｜角色 94 專屬 CARD
  視覺核心：地下錄音室、黑茶皮革、舊銀飾品、暗紅錄音訊號
  所有選擇器皆以 [data-character-id="94"] 開頭
*/

/* ─────────────────────────────
   全螢幕遮罩
───────────────────────────── */

[data-character-id="94"].character-card-overlay {
  --jiu-black: #090a0b;
  --jiu-panel: #111214;
  --jiu-panel-soft: #17181b;
  --jiu-leather: #241b18;
  --jiu-silver: #aaa7a1;
  --jiu-silver-light: #e2ded7;
  --jiu-muted: #88847e;
  --jiu-red: #9d2933;
  --jiu-red-bright: #d14850;
  --jiu-line: rgba(203, 194, 184, 0.14);
  --jiu-shadow: rgba(0, 0, 0, 0.72);

  background:
    radial-gradient(
      circle at 72% 42%,
      rgba(126, 30, 39, 0.12),
      transparent 34%
    ),
    rgba(3, 4, 5, 0.84);

  color: var(--jiu-silver-light);

  font-family:
    "Noto Sans TC",
    "PingFang TC",
    "Microsoft JhengHei",
    sans-serif;

  backdrop-filter: blur(12px) saturate(75%);
  -webkit-backdrop-filter: blur(12px) saturate(75%);
}

[data-character-id="94"] .character-card-backdrop {
  background:
    linear-gradient(
      115deg,
      rgba(0, 0, 0, 0.92),
      rgba(14, 13, 14, 0.82)
    );
}

/* ─────────────────────────────
   卡片本體
───────────────────────────── */

[data-character-id="94"] .character-card {
  position: relative;

  width: min(1040px, calc(100vw - 42px));
  height: min(700px, calc(100vh - 42px));

  overflow: hidden;

  display: grid;
  grid-template-columns: minmax(310px, 41%) minmax(0, 59%);

  background:
    linear-gradient(
      145deg,
      rgba(29, 29, 31, 0.98),
      rgba(10, 11, 12, 0.99)
    );

  color: var(--jiu-silver-light);

  border: 1px solid rgba(198, 190, 181, 0.18);
  border-radius: 4px;

  box-shadow:
    0 35px 90px var(--jiu-shadow),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset,
    0 0 55px rgba(128, 28, 37, 0.09);
}

[data-character-id="94"] .character-card::before {
  content: "";

  position: absolute;
  z-index: 5;

  pointer-events: none;

  top: 0;
  left: 41%;

  width: 1px;
  height: 100%;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(188, 178, 168, 0.26) 16%,
      rgba(188, 178, 168, 0.1) 78%,
      transparent
    );
}

[data-character-id="94"] .character-card::after {
  content: "09 / REC";

  position: absolute;
  z-index: 6;

  pointer-events: none;

  left: calc(41% + 24px);
  bottom: 17px;

  color: rgba(196, 187, 177, 0.28);

  font-family: "Courier New", monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.3em;
}

/* ─────────────────────────────
   左側角色圖片
───────────────────────────── */

[data-character-id="94"] .character-card-img-col {
  position: relative;

  min-width: 0;
  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgba(19, 19, 21, 0.08),
      rgba(5, 5, 6, 0.88)
    ),
    linear-gradient(
      135deg,
      #171719,
      #090a0b 72%
    );
}

[data-character-id="94"] .character-card-img-col::before {
  content: "";

  position: absolute;
  z-index: 2;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent 0 82%,
      rgba(4, 4, 5, 0.56) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.06) 45%,
      rgba(0, 0, 0, 0.9) 100%
    );
}

[data-character-id="94"] .character-card-img-col::after {
  content: "";

  position: absolute;
  z-index: 3;

  pointer-events: none;

  left: 22px;
  right: 22px;
  bottom: 28px;

  height: 36px;
  opacity: 0.34;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 2%,
      rgba(204, 194, 184, 0.65) 2.4%,
      rgba(204, 194, 184, 0.65) 2.8%,
      transparent 3.2%,
      transparent 7%,
      rgba(204, 194, 184, 0.32) 7.4%,
      rgba(204, 194, 184, 0.32) 8%,
      transparent 8.4%,
      transparent 13%,
      rgba(157, 41, 51, 0.88) 13.5%,
      rgba(157, 41, 51, 0.88) 14.1%,
      transparent 14.5%,
      transparent 21%,
      rgba(204, 194, 184, 0.54) 21.5%,
      rgba(204, 194, 184, 0.54) 21.9%,
      transparent 22.3%,
      transparent 32%,
      rgba(204, 194, 184, 0.26) 32.5%,
      rgba(204, 194, 184, 0.26) 33%,
      transparent 33.5%,
      transparent 41%,
      rgba(157, 41, 51, 0.72) 41.5%,
      rgba(157, 41, 51, 0.72) 42.2%,
      transparent 42.7%,
      transparent 52%,
      rgba(204, 194, 184, 0.5) 52.5%,
      rgba(204, 194, 184, 0.5) 53%,
      transparent 53.5%,
      transparent 66%,
      rgba(204, 194, 184, 0.28) 66.5%,
      rgba(204, 194, 184, 0.28) 67.1%,
      transparent 67.6%,
      transparent 76%,
      rgba(157, 41, 51, 0.76) 76.5%,
      rgba(157, 41, 51, 0.76) 77.1%,
      transparent 77.6%,
      transparent 87%,
      rgba(204, 194, 184, 0.46) 87.5%,
      rgba(204, 194, 184, 0.46) 88%,
      transparent 88.5%
    );

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      #000 24%,
      #000 76%,
      transparent
    );
}

[data-character-id="94"] .character-card-image {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  color: rgba(220, 215, 207, 0.32);

  font-family: "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

[data-character-id="94"] .character-card-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center top;

  filter:
    saturate(72%)
    contrast(1.08)
    brightness(0.8);
}

/* ─────────────────────────────
   右側內容區
───────────────────────────── */

[data-character-id="94"] .character-card-body {
  position: relative;

  min-width: 0;
  min-height: 0;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(111, 31, 38, 0.13),
      transparent 34%
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 39px,
      rgba(255, 255, 255, 0.018) 40px
    ),
    #101113;
}

[data-character-id="94"] .character-card-step {
  height: 100%;
  min-height: 0;
}

[data-character-id="94"] .character-card-step:not([hidden]) {
  display: flex;
  flex-direction: column;
}

[data-character-id="94"] .character-card-step[hidden] {
  display: none;
}

/* ─────────────────────────────
   關閉按鈕
───────────────────────────── */

[data-character-id="94"] .character-card-close {
  position: absolute;
  z-index: 20;

  top: 18px;
  right: 19px;

  width: 36px;
  height: 36px;
  padding: 0;

  display: grid;
  place-items: center;

  color: rgba(225, 220, 212, 0.62);
  background: rgba(8, 9, 10, 0.46);

  border: 1px solid rgba(204, 195, 185, 0.14);
  border-radius: 50%;

  font-size: 22px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

[data-character-id="94"] .character-card-close:hover {
  color: #f4efea;
  background: rgba(126, 31, 39, 0.28);

  border-color: rgba(209, 72, 80, 0.48);

  transform: rotate(4deg);
}

[data-character-id="94"] .character-card-close:focus-visible {
  outline: 1px solid var(--jiu-red-bright);
  outline-offset: 3px;
}

/* ─────────────────────────────
   捲動內容
───────────────────────────── */

[data-character-id="94"] .character-card-scroll {
  flex: 1;

  min-height: 0;
  overflow-y: auto;

  padding: 67px 54px 38px;

  scrollbar-width: thin;
  scrollbar-color:
    rgba(164, 157, 149, 0.28)
    transparent;
}

[data-character-id="94"] .character-card-scroll::-webkit-scrollbar {
  width: 5px;
}

[data-character-id="94"] .character-card-scroll::-webkit-scrollbar-track {
  background: transparent;
}

[data-character-id="94"] .character-card-scroll::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      to bottom,
      rgba(151, 39, 48, 0.7),
      rgba(160, 153, 145, 0.25)
    );

  border-radius: 10px;
}

/* ─────────────────────────────
   名稱
───────────────────────────── */

[data-character-id="94"] #characterCardName {
  position: relative;

  margin: 0 0 28px;
  padding: 0 0 18px;

  color: #e8e3dc;

  font-family:
    "Noto Serif TC",
    "Songti TC",
    "PMingLiU",
    serif;

  font-size: clamp(36px, 4vw, 54px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
}

[data-character-id="94"] #characterCardName::before {
  content: "09";

  position: absolute;

  top: -20px;
  left: 2px;

  color: var(--jiu-red-bright);

  font-family: "Courier New", monospace;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.28em;
}

[data-character-id="94"] #characterCardName::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 68px;
  height: 1px;

  background:
    linear-gradient(
      to right,
      var(--jiu-red-bright),
      rgba(209, 72, 80, 0.08)
    );

  box-shadow:
    82px 0 0
    rgba(190, 182, 173, 0.17);
}

/* ─────────────────────────────
   固定角色資料
───────────────────────────── */

/*
  原有文字由 JS 填入。
  使用透明文字保留 DOM 尺寸與功能，
  再以偽元素顯示汣司固定資料。
*/


/* ─────────────────────────────
   職業、基本資料、氣味
───────────────────────────── */

[data-character-id="94"] #characterCardDescription {
  position: relative;

  margin: 0 0 27px;
  padding: 0;
}

[data-character-id="94"] #characterCardDescription::before {
  content:
    "刺青師／地下音樂製作人\A"
    "\A"
    "28歲　　185cm\A"
    "9/9　處女座　O型　INTJ\A"
    "\A"
    "SCENT　黑茶＋皮革";

  display: block;

  color: #c4beb6;

  font-family:
    "Noto Sans TC",
    "PingFang TC",
    "Microsoft JhengHei",
    sans-serif;

  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.08em;

  white-space: pre-wrap;
}

[data-character-id="94"] #characterCardDescription::after {
  content: "TATTOO / SOUND";

  position: absolute;

  top: 3px;
  right: 0;

  color: rgba(209, 72, 80, 0.43);

  font-family:
    "Courier New",
    monospace;

  font-size: 8px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.22em;
}

/* ─────────────────────────────
   人際關係
───────────────────────────── */

[data-character-id="94"] #characterCardStory {
  position: relative;

  margin: 0;
  padding: 24px 0 8px 23px;

  border-top:
    1px solid
    var(--jiu-line);
}

[data-character-id="94"] #characterCardStory::before {
  content:
    "人際關係\A"
    "\A"
    "KANE　29／ESTP\A"
    "自由音樂人；汣司多年摯友，能隨意進出 9th。\A"
    "\A"
    "RIN　31／ENTP\A"
    "混音師／聲紋交易商；素材交換夥伴。\A"
    "\A"
    "VEE　27／INFP\A"
    "刺青設計師；與汣司理念相近，偶爾有創作交流。\A"
    "\A"
    "湛亭　MOTHER\A"
    "退役地下舞者，自由派藝術家。\A"
    "性格灑脫犀利，不馴世俗規範。";

  position: static;

  display: block;

  width: auto;
  height: auto;

  color: #95918b;
  background: none;

  font-family:
    "Noto Sans TC",
    "PingFang TC",
    "Microsoft JhengHei",
    sans-serif;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.92;
  letter-spacing: 0.055em;

  white-space: pre-wrap;
}

[data-character-id="94"] #characterCardStory::after {
  content: "";

  position: absolute;

  top: 30px;
  bottom: 9px;
  left: 0;

  width: 2px;

  background:
    linear-gradient(
      to bottom,
      var(--jiu-red),
      rgba(157, 41, 51, 0.08)
    );
}

/* ─────────────────────────────
   底部按鈕列
───────────────────────────── */

[data-character-id="94"] .character-card-footer {
  flex: none;

  display: flex;
  justify-content: flex-end;
  gap: 12px;

  padding: 20px 54px 24px;

  background:
    linear-gradient(
      to top,
      rgba(8, 9, 10, 0.99),
      rgba(14, 15, 17, 0.94)
    );

  border-top:
    1px solid
    rgba(197, 188, 178, 0.1);

  box-shadow:
    0 -12px 30px
    rgba(0, 0, 0, 0.18);
}

[data-character-id="94"] .character-card-footer button {
  position: relative;

  min-height: 44px;
  padding: 0 23px;

  overflow: hidden;

  border-radius: 2px;

  font-family:
    "Noto Sans TC",
    "PingFang TC",
    sans-serif;

  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.13em;

  cursor: pointer;

  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

[data-character-id="94"] .character-card-footer button::after {
  content: "";

  position: absolute;

  top: 0;
  left: -130%;

  width: 70%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.1),
      transparent
    );

  transform:
    skewX(-22deg)
    translateX(0%);

  transition:
    transform 450ms ease;
}

[data-character-id="94"] .character-card-footer button:hover::after {
  transform:
    skewX(-22deg)
    translateX(280%);
}

[data-character-id="94"] .secondary-button {
  color: #9d9993;
  background: transparent;

  border:
    1px solid
    rgba(190, 181, 171, 0.18);
}

[data-character-id="94"] .secondary-button:hover {
  color: #e6e0d9;
  background: rgba(255, 255, 255, 0.035);

  border-color:
    rgba(210, 201, 191, 0.34);

  transform: translateY(-1px);
}

[data-character-id="94"] .primary-button {
  color: #eee8e1;

  background:
    linear-gradient(
      135deg,
      #84232c,
      #5d171e
    );

  border:
    1px solid
    rgba(211, 78, 88, 0.38);

  box-shadow:
    0 7px 22px rgba(83, 15, 22, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

[data-character-id="94"] .primary-button:hover {
  background:
    linear-gradient(
      135deg,
      #a12d38,
      #711c24
    );

  border-color:
    rgba(226, 91, 100, 0.56);

  box-shadow:
    0 9px 28px rgba(94, 18, 26, 0.4),
    0 0 18px rgba(157, 41, 51, 0.12);

  transform: translateY(-1px);
}

[data-character-id="94"] .character-card-footer button:active {
  transform: translateY(1px);
}

[data-character-id="94"] .character-card-footer button:focus-visible {
  outline:
    1px solid
    var(--jiu-red-bright);

  outline-offset: 3px;
}

/* ─────────────────────────────
   第二步：開場情節
───────────────────────────── */

[data-character-id="94"] #characterCardEventStep .character-card-scroll {
  padding-top: 54px;
}

[data-character-id="94"] #characterCardEventStep h3 {
  position: relative;

  margin: 28px 0 25px;
  padding-bottom: 15px;

  color: #ded8d1;

  font-family:
    "Noto Serif TC",
    "Songti TC",
    serif;

  font-size: 23px;
  font-weight: 500;
  letter-spacing: 0.12em;

  border-bottom:
    1px solid
    rgba(195, 186, 176, 0.12);
}

[data-character-id="94"] #characterCardEventStep h3::after {
  content: "SELECT A TRACK";

  position: absolute;

  right: 0;
  bottom: 17px;

  color: rgba(185, 177, 168, 0.28);

  font-family:
    "Courier New",
    monospace;

  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.2em;
}

/* ─────────────────────────────
   返回按鈕
───────────────────────────── */

[data-character-id="94"] .character-card-back-btn {
  padding: 0;

  color: #817d77;
  background: transparent;

  border: 0;

  font-size: 12px;
  letter-spacing: 0.12em;

  cursor: pointer;

  transition:
    color 180ms ease,
    transform 180ms ease;
}

[data-character-id="94"] .character-card-back-btn:hover {
  color: #d6d0c8;
  transform: translateX(-3px);
}

[data-character-id="94"] .character-card-back-btn:focus-visible {
  outline:
    1px solid
    var(--jiu-red-bright);

  outline-offset: 4px;
}

/* ─────────────────────────────
   情節選項列表
───────────────────────────── */

[data-character-id="94"] .character-events-list {
  display: grid;
  gap: 11px;
}

[data-character-id="94"] .event-radio {
  position: relative;

  overflow: hidden;

  display: block;
  padding: 0;

  color: #b5afa8;

  background:
    linear-gradient(
      110deg,
      rgba(28, 29, 32, 0.94),
      rgba(17, 18, 20, 0.94)
    );

  border:
    1px solid
    rgba(193, 184, 174, 0.11);

  border-radius: 2px;

  cursor: pointer;

  transition:
    border-color 200ms ease,
    background 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}

[data-character-id="94"] .event-radio::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;

  width: 3px;

  background:
    rgba(177, 168, 159, 0.12);

  transition:
    width 200ms ease,
    background 200ms ease;
}

[data-character-id="94"] .event-radio:hover {
  background:
    linear-gradient(
      110deg,
      rgba(35, 34, 36, 0.98),
      rgba(19, 20, 22, 0.98)
    );

  border-color:
    rgba(195, 185, 176, 0.24);

  transform: translateX(2px);
}

[data-character-id="94"] .event-radio:hover::before {
  background:
    rgba(157, 41, 51, 0.58);
}

[data-character-id="94"] .event-radio input[type="radio"] {
  position: absolute;

  width: 1px;
  height: 1px;
  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);

  white-space: nowrap;
}

[data-character-id="94"] .event-radio-content {
  position: relative;

  display: block;

  padding: 17px 47px 17px 21px;
}

[data-character-id="94"] .event-radio-content::after {
  content: "";

  position: absolute;

  top: 50%;
  right: 20px;

  width: 9px;
  height: 9px;

  border:
    1px solid
    rgba(191, 182, 172, 0.28);

  border-radius: 50%;

  transform: translateY(-50%);

  box-shadow:
    0 0 0 3px
    rgba(0, 0, 0, 0.12);

  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

[data-character-id="94"] .event-title {
  display: block;

  margin-bottom: 7px;

  color: #cbc5bd;

  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

[data-character-id="94"] .event-description {
  display: block;

  color: #77746f;

  font-size: 11px;
  line-height: 1.75;
  letter-spacing: 0.04em;

  transition:
    color 180ms ease;
}

[data-character-id="94"] .event-radio:has(input:checked) {
  background:
    linear-gradient(
      110deg,
      rgba(49, 28, 31, 0.92),
      rgba(19, 18, 20, 0.98) 62%
    );

  border-color:
    rgba(187, 59, 69, 0.55);

  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.22),
    0 0 24px rgba(130, 28, 37, 0.08);
}

[data-character-id="94"] .event-radio:has(input:checked)::before {
  width: 4px;

  background:
    var(--jiu-red-bright);

  box-shadow:
    0 0 12px
    rgba(209, 72, 80, 0.34);
}

[data-character-id="94"] .event-radio:has(input:checked) .event-title {
  color: #eee8e0;
}

[data-character-id="94"] .event-radio:has(input:checked) .event-description {
  color: #aaa49c;
}

[data-character-id="94"] .event-radio:has(input:checked) .event-radio-content::after {
  background:
    var(--jiu-red-bright);

  border-color:
    var(--jiu-red-bright);

  box-shadow:
    0 0 0 3px rgba(209, 72, 80, 0.12),
    0 0 12px rgba(209, 72, 80, 0.38);
}

[data-character-id="94"] .event-radio:has(input:focus-visible) {
  outline:
    1px solid
    var(--jiu-red-bright);

  outline-offset: 3px;
}

/* ─────────────────────────────
   開始故事按鈕
───────────────────────────── */

[data-character-id="94"] #characterCardStartChat {
  min-width: 154px;
}

/* ─────────────────────────────
   平板版
───────────────────────────── */

@media (max-width: 860px) {
  [data-character-id="94"] .character-card {
    width:
      min(
        720px,
        calc(100vw - 28px)
      );

    height:
      min(
        780px,
        calc(100vh - 28px)
      );

    grid-template-columns:
      minmax(220px, 34%)
      minmax(0, 66%);
  }

  [data-character-id="94"] .character-card::before {
    left: 34%;
  }

  [data-character-id="94"] .character-card::after {
    left: calc(34% + 20px);
  }

  [data-character-id="94"] .character-card-scroll {
    padding:
      62px
      clamp(28px, 5vw, 43px)
      32px;
  }

  [data-character-id="94"] .character-card-footer {
    padding:
      18px
      clamp(28px, 5vw, 43px)
      22px;
  }

  [data-character-id="94"] #characterCardName {
    font-size:
      clamp(34px, 6vw, 48px);
  }
}

/* ─────────────────────────────
   手機版
───────────────────────────── */

@media (max-width: 640px) {
  [data-character-id="94"].character-card-overlay {
    align-items: stretch;
    padding: 0;
  }

  [data-character-id="94"] .character-card {
    width: 100vw;
    height: 100dvh;
    max-height: none;

    display: flex;
    flex-direction: column;

    border: 0;
    border-radius: 0;
  }

  [data-character-id="94"] .character-card::before {
    top: 34%;
    left: 0;

    width: 100%;
    height: 1px;

    background:
      linear-gradient(
        to right,
        transparent,
        rgba(188, 178, 168, 0.18) 18%,
        rgba(188, 178, 168, 0.1) 82%,
        transparent
      );
  }

  [data-character-id="94"] .character-card::after {
    display: none;
  }

  [data-character-id="94"] .character-card-img-col {
    flex: none;

    width: 100%;
    height: 34%;
    min-height: 205px;
  }

  [data-character-id="94"] .character-card-img-col::before {
    background:
      linear-gradient(
        180deg,
        transparent 0 40%,
        rgba(8, 8, 9, 0.96) 100%
      );
  }

  [data-character-id="94"] .character-card-img-col::after {
    bottom: 16px;
    height: 23px;
  }

  [data-character-id="94"] .character-card-image img {
    object-position: center 18%;
  }

  [data-character-id="94"] .character-card-body {
    flex: 1;
    min-height: 0;
  }

  [data-character-id="94"] .character-card-close {
    position: fixed;

    top:
      max(
        14px,
        env(safe-area-inset-top)
      );

    right: 14px;

    color:
      rgba(245, 240, 233, 0.84);

    background:
      rgba(5, 5, 6, 0.52);
  }

  [data-character-id="94"] .character-card-scroll {
    padding:
      38px
      24px
      28px;
  }

  [data-character-id="94"] #characterCardEventStep .character-card-scroll {
    padding-top: 28px;
  }

  [data-character-id="94"] #characterCardName {
    margin-bottom: 22px;

    font-size: 39px;
    letter-spacing: 0.12em;
  }

  [data-character-id="94"] #characterCardDescription {
    margin-bottom: 23px;
  }

  [data-character-id="94"] #characterCardDescription::before {
    font-size: 13px;
    line-height: 1.9;
    letter-spacing: 0.065em;
  }

  [data-character-id="94"] #characterCardDescription::after {
    display: none;
  }

  [data-character-id="94"] #characterCardStory {
    padding:
      21px
      0
      5px
      18px;
  }

  [data-character-id="94"] #characterCardStory::before {
    font-size: 12px;
    line-height: 1.88;
    letter-spacing: 0.045em;
  }

  [data-character-id="94"] #characterCardStory::after {
    top: 27px;
  }

  [data-character-id="94"] .character-card-footer {
    padding:
      14px
      18px
      calc(
        16px +
        env(safe-area-inset-bottom)
      );

    gap: 9px;
  }

  [data-character-id="94"] .character-card-footer button {
    flex: 1;

    min-width: 0;
    padding: 0 13px;

    font-size: 11px;
    letter-spacing: 0.08em;
  }

  [data-character-id="94"] #characterCardEventStep h3 {
    margin-top: 22px;
    font-size: 20px;
  }

  [data-character-id="94"] #characterCardEventStep h3::after {
    display: none;
  }

  [data-character-id="94"] .event-radio-content {
    padding:
      15px
      43px
      15px
      18px;
  }

  [data-character-id="94"] .event-title {
    font-size: 12px;
  }

  [data-character-id="94"] .event-description {
    font-size: 10px;
  }
}

/* ─────────────────────────────
   窄螢幕
───────────────────────────── */

@media (max-width: 390px) {
  [data-character-id="94"] .character-card-img-col {
    height: 30%;
    min-height: 176px;
  }

  [data-character-id="94"] .character-card::before {
    top: 30%;
  }

  [data-character-id="94"] .character-card-scroll {
    padding:
      34px
      19px
      23px;
  }

  [data-character-id="94"] #characterCardName {
    font-size: 34px;
  }

  [data-character-id="94"] .character-card-footer {
    padding-left: 13px;
    padding-right: 13px;
  }
}

/* ─────────────────────────────
   減少動態偏好
───────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-character-id="94"] .character-card-image img {
    transition: none;
  }

  [data-character-id="94"] .character-card-close {
    transition: none;
  }

  [data-character-id="94"] .character-card-footer button {
    transition: none;
  }

  [data-character-id="94"] .character-card-footer button::after {
    display: none;
  }

  [data-character-id="94"] .event-radio {
    transition: none;
  }
}