:root {
  --fu-paper: #edf0e9;
  --fu-paper-deep: #d9ddd3;
  --fu-ink: #222b29;
  --fu-indigo: #36545a;
  --fu-indigo-deep: #20363b;
  --fu-sage: #708b7e;
  --fu-umber: #826a54;
  --fu-vermilion: #9b4f46;
  --fu-muted: #5c6864;
  --fu-moon-white: #dfe9e6;
  --fu-crab-blue: #8ea9a0;
  --fu-lotus: #a98592;
  --fu-autumn: #a39158;
  --fu-cinnabar: #9b4f46;
  --fu-ink-wash: #293f43;
  --fu-focus: #0b6e99;
  --fu-rule: rgba(51, 72, 92, 0.2);
  --fu-shell: min(1160px, calc(100% - 48px));
  --fu-copy: 70ch;
  --fu-finale-seam: 12%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.case-fu {
  margin: 0;
  color: var(--fu-ink);
  background:
    radial-gradient(circle at 11% 7%, rgba(169, 133, 146, 0.11), transparent 31rem),
    radial-gradient(circle at 88% 27%, rgba(142, 169, 160, 0.14), transparent 34rem),
    linear-gradient(180deg, #f7f4ec 0%, var(--fu-paper) 43%, #e5e1d5 100%);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.82;
  text-rendering: optimizeLegibility;
  overflow-wrap: anywhere;
}

html[lang="zh-Hans"] body.case-fu {
  font-family: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

html[lang="en"] body.case-fu {
  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.76;
}

html[lang="ja"] body.case-fu {
  font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 17px;
  line-height: 1.9;
  line-break: strict;
  word-break: normal;
}

a { color: var(--fu-indigo); text-underline-offset: 0.2em; }
a:hover { color: #19364e; }
button, a { -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid var(--fu-focus); outline-offset: 4px; }
img, svg { display: block; max-width: 100%; }

.case-fu__skip {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  color: #fff;
  background: var(--fu-indigo-deep);
  border-radius: 8px;
  transform: translateY(-160%);
}
.case-fu__skip:focus { transform: none; }

.case-fu__topbar {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(32, 54, 59, 0.96);
  color: #fff;
  backdrop-filter: blur(18px);
}

.case-fu__nav {
  width: var(--fu-shell);
  min-height: 68px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.case-fu__brand {
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
}

.case-fu__nav-actions,
.case-fu__language {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.case-fu__nav-actions a,
.case-fu__language a {
  min-width: 36px;
  min-height: 36px;
  padding: 7px 10px;
  display: inline-grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.83rem;
  font-weight: 750;
}

.case-fu__nav-actions a:hover,
.case-fu__language a:hover,
.case-fu__language a[aria-current="true"] {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.1);
}

.case-fu__section,
.case-fu__hero,
.case-fu__opening,
.case-fu__finale {
  position: relative;
}

.case-fu__opening {
  color: #f5efe2;
  background:
    radial-gradient(circle at 82% 18%, rgba(169, 133, 146, 0.19), transparent 28rem),
    linear-gradient(135deg, #1c3338, #293f43 58%, #4a4144);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.case-fu__opening-inner,
.case-fu__inner,
.case-fu__hero-inner,
.case-fu__finale-inner {
  width: var(--fu-shell);
  margin: 0 auto;
}

.case-fu__opening-inner { padding: clamp(34px, 6vw, 72px) 0; }

.case-fu__eyebrow {
  margin: 0 0 12px;
  color: var(--fu-umber);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.case-fu__opening .case-fu__eyebrow,
.case-fu__finale .case-fu__eyebrow { color: #d9bc85; }

.case-fu__opening-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

.case-fu__opening-copy h2 {
  margin: 0 0 16px;
  font-family: "Noto Serif TC", "Songti TC", Georgia, serif;
  font-size: clamp(2rem, 5vw, 4.3rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.case-fu__opening-copy > p { max-width: 58ch; color: rgba(255, 255, 255, 0.78); }
.case-fu__opening-note {
  padding: 15px 18px;
  border-left: 3px solid #c7b477;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9) !important;
}

.case-fu__choice,
.case-fu__actions,
.case-fu__scene-controls,
.case-fu__audio-tracks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.case-fu__button {
  min-height: 48px;
  padding: 11px 17px;
  border: 1px solid var(--fu-indigo);
  border-radius: 999px;
  color: var(--fu-indigo-deep);
  background: transparent;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}
.case-fu__button:hover { background: rgba(51, 72, 92, 0.08); }
.case-fu__button--primary { color: #fff; background: var(--fu-indigo); }
.case-fu__button--primary:hover { background: #263e52; }
.case-fu__opening .case-fu__button {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
}
.case-fu__opening .case-fu__button:hover { background: rgba(255, 255, 255, 0.1); }
.case-fu__opening .case-fu__button--primary { color: var(--fu-indigo-deep); background: #ead8b6; border-color: #ead8b6; }

.case-fu__hero {
  isolation: isolate;
  padding: clamp(50px, 8vw, 110px) 0;
  border-bottom: 1px solid var(--fu-rule);
  background:
    radial-gradient(circle at 13% 22%, rgba(142, 169, 160, 0.18), transparent 28rem),
    linear-gradient(90deg, rgba(239, 240, 233, 0.98), rgba(234, 233, 223, 0.82)),
    repeating-linear-gradient(0deg, transparent 0 49px, rgba(54, 84, 90, 0.08) 49px 50px);
}

.case-fu__hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: center;
  gap: clamp(34px, 6vw, 82px);
}

.case-fu__hero-media { position: relative; }
.case-fu__hero-media::before {
  content: "";
  position: absolute;
  inset: 8% -5% -6% 8%;
  z-index: -1;
  background: rgba(51, 72, 92, 0.14);
  transform: rotate(2deg);
}
.case-fu__hero-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid rgba(51, 72, 92, 0.2);
  box-shadow: 0 24px 55px rgba(34, 39, 36, 0.12);
}

.case-fu__title {
  margin: 0 0 16px;
  max-width: 16ch;
  font-family: "Noto Serif TC", "Songti TC", Georgia, serif;
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

html[lang="en"] .case-fu__title { max-width: 18ch; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.5rem, 5vw, 4.7rem); line-height: 1.04; }
html[lang="ja"] .case-fu__title { max-width: 18ch; font-family: "Noto Serif JP", "Yu Mincho", serif; font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: 1.22; letter-spacing: -0.03em; }

.case-fu__subtitle {
  margin: 0 0 22px;
  max-width: 34ch;
  color: var(--fu-indigo);
  font-size: clamp(1.25rem, 2.2vw, 1.72rem);
  font-weight: 720;
  line-height: 1.45;
  text-wrap: balance;
}

.case-fu__lede { max-width: 64ch; font-size: 1.05rem; }
.case-fu__name-policy {
  margin: 18px 0;
  padding: 14px 16px;
  border-left: 4px solid var(--fu-vermilion);
  background: rgba(165, 72, 56, 0.06);
  font-size: 0.92rem;
}

.case-fu__status {
  margin: 18px 0;
  padding: 12px 15px;
  border: 1px solid var(--fu-rule);
  background: rgba(255, 255, 255, 0.54);
  color: var(--fu-indigo-deep);
  font-size: 0.86rem;
  font-weight: 790;
  line-height: 1.55;
}

.case-fu__facts {
  margin: 26px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.case-fu__fact {
  min-height: 100px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--fu-rule);
  background: rgba(255, 255, 255, 0.62);
}
.case-fu__fact small { color: var(--fu-muted); font-weight: 720; }
.case-fu__fact strong { color: var(--fu-indigo-deep); font-size: 1.15rem; }

.case-fu .home-view-counter.case-fu__counter {
  margin-top: 22px;
  max-width: 360px;
}

.case-fu__section { padding: clamp(62px, 9vw, 128px) 0; }
.case-fu__section + .case-fu__section { border-top: 1px solid var(--fu-rule); }
.case-fu__section--paper {
  background:
    radial-gradient(circle at 88% 16%, rgba(163, 145, 88, 0.09), transparent 23rem),
    rgba(255, 255, 255, 0.46);
}
.case-fu__section--indigo {
  color: #f7f2e7;
  background:
    radial-gradient(circle at 8% 90%, rgba(142, 169, 160, 0.15), transparent 26rem),
    linear-gradient(145deg, var(--fu-indigo-deep), #2d4245 58%, #4a3d43);
}
.case-fu__section--indigo a { color: #e7c98f; }
.case-fu__section--quiet {
  background:
    radial-gradient(circle at 92% 24%, rgba(169, 133, 146, 0.1), transparent 25rem),
    #e5e3d9;
}

.case-fu__heading {
  margin: 0 0 22px;
  max-width: 24ch;
  font-family: "Noto Serif TC", "Songti TC", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
html[lang="en"] .case-fu__heading { max-width: 24ch; font-family: Georgia, "Times New Roman", serif; line-height: 1.12; }
html[lang="ja"] .case-fu__heading { max-width: 24ch; font-family: "Noto Serif JP", "Yu Mincho", serif; line-height: 1.32; }

.case-fu__copy { max-width: var(--fu-copy); }
html[lang="en"] .case-fu__copy { max-width: 68ch; }
.case-fu__copy > p { margin: 0 0 1.2em; }
.case-fu__copy > p:first-of-type { font-size: 1.06rem; }
.case-fu__lead { color: #343b37; font-size: 1.12rem; }
.case-fu__section--indigo .case-fu__lead { color: rgba(255, 255, 255, 0.82); }

.case-fu__notice,
.case-fu__editor-note,
.case-fu__question,
.case-fu__advocacy {
  margin: 28px 0;
  padding: 18px 20px;
  border-left: 4px solid var(--fu-vermilion);
  background: rgba(165, 72, 56, 0.07);
}
.case-fu__editor-note { border-left-color: var(--fu-umber); background: rgba(120, 98, 83, 0.09); }
.case-fu__question { border-left-color: var(--fu-indigo); background: rgba(51, 72, 92, 0.07); font-weight: 720; }
.case-fu__advocacy { border-left-color: var(--fu-sage); background: rgba(108, 121, 110, 0.11); }

.case-fu__label {
  display: inline-flex;
  margin-bottom: 9px;
  padding: 4px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--fu-indigo);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1.4;
}
.case-fu__section--indigo .case-fu__label { color: #e5c68b; }

.case-fu__toc {
  margin: 32px 0;
  border: 1px solid var(--fu-rule);
  background: rgba(255, 255, 255, 0.56);
}
.case-fu__toc summary { padding: 16px 18px; cursor: pointer; font-weight: 820; }
.case-fu__toc ol { margin: 0; padding: 0 24px 22px 48px; columns: 2; column-gap: 40px; }
.case-fu__toc li { margin: 8px 0; break-inside: avoid; }

.case-fu__quick-grid,
.case-fu__question-grid,
.case-fu__action-grid,
.case-fu__source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.case-fu__card {
  padding: 22px;
  border: 1px solid var(--fu-rule);
  background: rgba(255, 255, 255, 0.62);
}
.case-fu__section--indigo .case-fu__card { border-color: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.06); }
.case-fu__card small { color: var(--fu-muted); font-weight: 750; }
.case-fu__section--indigo .case-fu__card small { color: rgba(255, 255, 255, 0.62); }
.case-fu__card h3, .case-fu__card strong { margin: 8px 0; display: block; color: var(--fu-indigo-deep); }
.case-fu__section--indigo .case-fu__card h3,
.case-fu__section--indigo .case-fu__card strong { color: #fff; }
.case-fu__card p:last-child { margin-bottom: 0; }

.case-fu__ledger {
  margin: 34px 0;
  padding: clamp(22px, 4vw, 40px);
  border: 1px solid rgba(51, 72, 92, 0.28);
  background:
    linear-gradient(90deg, transparent 0 29%, rgba(51, 72, 92, 0.16) 29% 29.2%, transparent 29.2%),
    repeating-linear-gradient(0deg, #f8f3e8 0 72px, rgba(51, 72, 92, 0.18) 72px 73px);
  box-shadow: 0 16px 38px rgba(34, 39, 36, 0.08);
}
.case-fu__ledger::before { content: attr(data-label); display: block; margin-bottom: 20px; color: var(--fu-indigo); font-weight: 850; letter-spacing: 0.08em; }
.case-fu__ledger-row { min-height: 74px; padding: 13px 0; display: grid; grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr); align-items: center; gap: 22px; }
.case-fu__ledger-row b { color: var(--fu-indigo-deep); }
.case-fu__blank { min-height: 37px; border-bottom: 2px dashed rgba(51, 72, 92, 0.46); }

.case-fu__days {
  margin: 30px 0;
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  gap: 4px;
}
.case-fu__days span { aspect-ratio: 1; min-width: 0; border: 1px solid rgba(51, 72, 92, 0.2); background: rgba(255, 255, 255, 0.48); }
.case-fu__days span:nth-child(1),
.case-fu__days span:nth-child(16),
.case-fu__days span:nth-child(46),
.case-fu__days span:nth-child(72) { background: var(--fu-indigo); border-color: var(--fu-indigo); }

.case-fu__details {
  margin: 30px 0;
  border: 1px solid rgba(165, 72, 56, 0.42);
  background: linear-gradient(145deg, #f6f1e9, #e8ece5);
}
.case-fu__details summary { padding: 18px 20px; color: #6f2f26; cursor: pointer; font-weight: 820; }
.case-fu__details-body { padding: 0 20px 20px; }
.case-fu__details-body p { max-width: 76ch; }
.case-fu__medical-lead {
  padding: 15px 17px;
  border-left: 3px solid #8b6454;
  color: #463d37;
  background: rgba(139, 100, 84, 0.08);
  font-family: "Noto Serif TC", "Songti TC", Georgia, serif;
  line-height: 1.85;
}
.case-fu__label-explainer {
  padding: 16px 18px;
  border: 1px solid rgba(155, 79, 70, 0.24);
  border-left: 4px solid var(--fu-cinnabar);
  color: #403b37;
  background: linear-gradient(100deg, rgba(155, 79, 70, 0.07), rgba(169, 133, 146, 0.055));
  line-height: 1.82;
}
.case-fu__label-explainer strong { color: #713a35; }
html[lang="en"] .case-fu__medical-lead { font-family: Georgia, "Times New Roman", serif; }
html[lang="ja"] .case-fu__medical-lead { font-family: "Noto Serif JP", "Yu Mincho", serif; line-height: 1.95; }

.case-fu__timeline { margin: 36px 0; position: relative; }
.case-fu__timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 154px; width: 1px; background: rgba(51, 72, 92, 0.32); }
.case-fu__event { position: relative; display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 52px; padding: 0 0 26px; }
.case-fu__event::before { content: ""; position: absolute; left: 149px; top: 12px; width: 11px; height: 11px; border-radius: 50%; background: var(--fu-indigo); box-shadow: 0 0 0 6px var(--fu-paper); }
.case-fu__event time { color: var(--fu-umber); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92rem; font-weight: 800; }
.case-fu__event h3 { margin: 0 0 6px; color: var(--fu-indigo-deep); }
.case-fu__event p { margin: 0; }

.case-fu__court-list { margin: 36px 0; display: grid; gap: 14px; counter-reset: courts; }
.case-fu__court {
  counter-increment: courts;
  display: grid;
  grid-template-columns: 60px minmax(150px, 0.4fr) minmax(0, 1fr);
  gap: 20px;
  padding: 22px;
  border: 1px solid var(--fu-rule);
  background: rgba(255, 255, 255, 0.64);
}
.case-fu__court::before { content: counter(courts, decimal-leading-zero); color: var(--fu-umber); font: 800 1.2rem/1 ui-monospace, monospace; }
.case-fu__court time { display: block; color: var(--fu-umber); font: 760 0.88rem/1.5 ui-monospace, monospace; }
.case-fu__court b { display: block; color: var(--fu-indigo-deep); }
.case-fu__court p { margin: 0; }
.case-fu__court--remand { border-left: 5px solid var(--fu-indigo); }
.case-fu__court--final { border-left: 5px solid var(--fu-sage); }

.case-fu__flow {
  margin: 36px 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.case-fu__flow-step { position: relative; min-height: 152px; padding: 18px 14px; border: 1px solid var(--fu-rule); background: rgba(255, 255, 255, 0.56); }
.case-fu__flow-step::after { content: "→"; position: absolute; top: 50%; right: -11px; z-index: 2; width: 22px; height: 22px; display: grid; place-items: center; color: var(--fu-indigo); background: var(--fu-paper); transform: translateY(-50%); }
.case-fu__flow-step:last-child { border-style: dashed; }
.case-fu__flow-step:last-child::after { display: none; }
.case-fu__flow-step span { display: block; margin-bottom: 10px; color: var(--fu-umber); font: 800 0.82rem/1 ui-monospace, monospace; }
.case-fu__flow-step b { display: block; line-height: 1.4; }

.case-fu__help-grid {
  margin: 28px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.case-fu__help-card {
  min-height: 220px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  background: var(--fu-indigo-deep);
  border: 2px solid transparent;
  text-decoration: none;
}
.case-fu__help-card:hover { color: #fff; border-color: #e4c689; }
.case-fu__help-number { font: 850 clamp(2.5rem, 7vw, 4.5rem)/1 ui-monospace, monospace; letter-spacing: -0.05em; }
.case-fu__help-card b { font-size: 1.08rem; }
.case-fu__help-card p { margin: 9px 0 0; color: rgba(255, 255, 255, 0.74); font-size: 0.9rem; }

.case-fu__source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-fu__source {
  min-height: 140px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--fu-rule);
  background: rgba(255, 255, 255, 0.55);
  text-decoration: none;
}
.case-fu__source:hover { background: #fff; }
.case-fu__source small { color: var(--fu-umber); font-weight: 800; }
.case-fu__source strong { color: var(--fu-indigo-deep); }

.case-fu__verse {
  margin: 28px 0 0;
  border: 1px solid rgba(51, 72, 92, 0.24);
  background: rgba(250, 249, 243, 0.62);
}
.case-fu__verse summary { padding: 16px 18px; cursor: pointer; color: var(--fu-indigo-deep); font-weight: 820; }
.case-fu__verse-body { padding: 0 20px 20px; }
.case-fu__verse-body p { margin: 0 0 1em; }
.case-fu__speaker { color: var(--fu-umber); font-weight: 850; }
.case-fu__modern { margin-top: 18px; padding: 14px 16px; border-left: 3px solid var(--fu-indigo); background: rgba(51, 72, 92, 0.07); font-size: 0.92rem; }
.case-fu__transcript-group {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(54, 84, 90, 0.19);
  background: rgba(255, 255, 255, 0.48);
}
.case-fu__transcript-group:first-child { margin-top: 0; }
.case-fu__transcript-group h4 {
  margin: 0 0 15px;
  color: var(--fu-indigo-deep);
  font-family: "Noto Serif TC", "Songti TC", Georgia, serif;
  font-size: 1rem;
  line-height: 1.45;
}
.case-fu__transcript-line { padding-left: 13px; border-left: 3px solid rgba(130, 106, 84, 0.42); }
.case-fu__transcript-line--guardian,
.case-fu__transcript-line--archivist { border-left-color: var(--fu-lotus); }
.case-fu__transcript-line--researcher { border-left-color: var(--fu-crab-blue); }
.case-fu__transcript-line--note { padding: 12px 14px; border-left-color: var(--fu-cinnabar); background: rgba(155, 79, 70, 0.06); font-size: 0.92rem; }
.case-fu__transcript-line[data-line-source="curtain"] { border-left-color: var(--fu-autumn); background: rgba(163, 145, 88, 0.1); text-align: center; }
.case-fu__transcript-line[data-line-source="stage"],
.case-fu__transcript-line[data-line-source="stage-caption"],
.case-fu__transcript-line[data-line-source="transition"],
.case-fu__transcript-line[data-line-source="interaction-guide"] { border-left-color: var(--fu-indigo); background: rgba(51, 72, 92, 0.075); }
.case-fu__transcript-line[data-line-source="interaction-card"] { border-left-color: var(--fu-sage); background: rgba(74, 109, 100, 0.08); }
.case-fu__transcript-line[data-line-source="elegy"] { font-family: "Noto Serif TC", "Songti TC", Georgia, serif; }
html[lang="en"] .case-fu__transcript-group h4,
html[lang="en"] .case-fu__transcript-line[data-line-source="elegy"] { font-family: Georgia, "Times New Roman", serif; }
html[lang="en"] .case-fu__transcript-line[data-line-source="elegy"] { font-style: italic; }
html[lang="ja"] .case-fu__transcript-group h4,
html[lang="ja"] .case-fu__transcript-line[data-line-source="elegy"] { font-family: "Noto Serif JP", "Yu Mincho", serif; }
.case-fu__opening .case-fu__verse,
.case-fu__section--indigo .case-fu__verse,
.case-fu__finale .case-fu__verse { border-color: rgba(223, 233, 230, 0.22); background: rgba(10, 28, 31, 0.36); }
.case-fu__opening .case-fu__verse summary,
.case-fu__section--indigo .case-fu__verse summary,
.case-fu__finale .case-fu__verse summary { color: #f1e8d5; }
.case-fu__opening .case-fu__transcript-group,
.case-fu__section--indigo .case-fu__transcript-group,
.case-fu__finale .case-fu__transcript-group { border-color: rgba(223, 233, 230, 0.18); background: rgba(255, 255, 255, 0.055); }
.case-fu__opening .case-fu__transcript-group h4,
.case-fu__section--indigo .case-fu__transcript-group h4,
.case-fu__finale .case-fu__transcript-group h4 { color: #e7d6ad; }

/* Symbolic paper-shadow stage. The figures represent a Recorder and a Guardian, never case participants. */
.case-fu__scene {
  --scene-duration: 45s;
  --shadow-start: 1.9s;
  --shadow-duration: 26s;
  --core-delay: 2.2s;
  --core-duration: 1.55s;
  --modern-start: 28.8s;
  --modern-duration: 10s;
  --focus-start: 39s;
  --focus-duration: 2.45s;
  --curtain-close-delay: 41.6s;
  --curtain-close-duration: 1.8s;
  margin: 32px 0 22px;
}
.case-fu__stage {
  position: relative;
  isolation: isolate;
  min-height: clamp(500px, 55vw, 680px);
  overflow: hidden;
  border: 1px solid rgba(231, 201, 143, 0.36);
  background:
    linear-gradient(180deg, rgba(5, 14, 20, 0.03), rgba(5, 14, 20, 0.36)),
    url("art/fu-xiaodi-shadow-stage-20260817.webp") center / cover no-repeat,
    linear-gradient(135deg, #3b291e, #142635 72%);
  box-shadow: 0 18px 42px rgba(23, 43, 59, 0.16);
}
.case-fu__stage::before,
.case-fu__stage::after {
  content: "";
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  height: 10%;
  background: linear-gradient(180deg, #1b3042, rgba(27, 48, 66, 0.86));
  border-bottom: 1px solid rgba(231, 201, 143, 0.25);
  transform-origin: center;
}
.case-fu__stage::before { top: 0; }
.case-fu__stage::after { bottom: 0; transform: rotate(180deg); }
.case-fu__stage-label {
  position: absolute;
  z-index: 12;
  top: 14%;
  left: 50%;
  width: min(84%, 760px);
  transform: translateX(-50%);
  color: #ead8b6;
  font-size: 0.72rem;
  font-weight: 830;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-align: center;
}
.case-fu__stage-core {
  position: absolute;
  z-index: 39;
  left: 50%;
  bottom: 13%;
  width: min(82%, 760px);
  padding: 14px 18px;
  transform: translateX(-50%);
  color: #f7f0e1;
  background: rgba(10, 28, 39, 0.76);
  border: 1px solid rgba(231, 201, 143, 0.26);
  font-family: "Noto Serif TC", "Songti TC", Georgia, serif;
  font-size: clamp(0.93rem, 2vw, 1.17rem);
  line-height: 1.7;
  text-align: center;
  backdrop-filter: blur(6px);
}
html[lang="en"] .case-fu__stage-core { font-family: Georgia, "Times New Roman", serif; }
html[lang="ja"] .case-fu__stage-core { font-family: "Noto Serif JP", "Yu Mincho", serif; line-height: 1.85; }

.case-fu__puppet {
  position: absolute;
  /* Figures stay in front of the stage rails and translucent dialogue cards;
     otherwise the animation reads as a cropped half-body portrait. */
  z-index: 22;
  bottom: 11%;
  /* Keep every full-body pose on one head-to-foot scale.  The source puppets
     have different silhouette widths, so a wider art box prevents `contain`
     from making the broad poses look shorter than the narrow ones. */
  width: clamp(164px, 27%, 320px);
  height: 72%;
  opacity: 0;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.42)) saturate(0.92);
  will-change: transform, opacity;
}
.case-fu__puppet--recorder {
  left: 20%;
  transform: none;
}
.case-fu__puppet--guardian {
  right: 20%;
  width: clamp(210px, 35%, 410px);
  transform: none;
}

.case-fu__character-pose {
  position: absolute;
  inset: 0;
  display: block;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  will-change: opacity, transform;
}
.case-fu__puppet .case-fu__character-pose {
  /* Fit the complete source canvas in both axes so wide arm/ledger poses keep
     their head, hands and feet inside the stage. */
  background-size: contain;
}
.case-fu__puppet--recorder .case-fu__character-pose { background-position: left bottom; }
.case-fu__puppet--guardian .case-fu__character-pose { background-position: right bottom; }
.case-fu__character-pose[class$="-0"] { opacity: 1; }
.case-fu__character-pose--shadow-recorder-0 { background-image: url("art/fu-xiaodi-shadow-recorder-male-20260817.png"); }
.case-fu__character-pose--shadow-recorder-1 { background-image: url("art/fu-xiaodi-shadow-recorder-male-ledger-raised-20260817.png"); }
.case-fu__character-pose--shadow-recorder-2 { background-image: url("art/fu-xiaodi-shadow-recorder-male-turn-listen-clean-v3-20260818.png"); }
.case-fu__character-pose--shadow-guardian-0 { background-image: url("art/fu-xiaodi-shadow-guardian-female-20260817.png"); }
.case-fu__character-pose--shadow-guardian-1 { background-image: url("art/fu-xiaodi-shadow-guardian-female-point-seal-20260817.png"); }
.case-fu__character-pose--shadow-guardian-2 { background-image: url("art/fu-xiaodi-shadow-guardian-female-hand-heart-20260817.png?v=20260819-2"); }

.case-fu__symbol {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 47%;
  width: 33%;
  height: 34%;
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0.78;
}
.case-fu__symbol::before,
.case-fu__symbol::after { content: ""; position: absolute; }
.case-fu__symbol--ledger::before {
  inset: 0;
  background: repeating-linear-gradient(0deg, #eadfc6 0 31px, #9aa59d 31px 32px);
  border: 5px solid #c9aa70;
  transform: rotate(-2deg);
}
.case-fu__symbol--ledger::after { left: 29%; top: 0; bottom: 0; width: 3px; background: rgba(51, 72, 92, 0.46); }
.case-fu__symbol--name::before { inset: 13% 0; border: 4px solid #d9c18f; background: rgba(242, 238, 229, 0.18); }
.case-fu__symbol--name::after { left: 12%; right: 12%; top: 44%; height: 7px; background: #e6d2a8; box-shadow: 0 25px 0 rgba(230, 210, 168, 0.56); }
.case-fu__symbol--days::before { inset: 0; background: repeating-linear-gradient(90deg, rgba(235, 218, 182, 0.56) 0 10px, transparent 10px 16px); border-top: 2px solid #d3b777; border-bottom: 2px solid #d3b777; }
.case-fu__symbol--rulings::before { left: 8%; top: 2%; width: 68%; height: 82%; background: #e8dbc0; box-shadow: 22px 12px 0 #cbb991, 44px 24px 0 #9fab9f; transform: rotate(-4deg); }
.case-fu__symbol--loop::before { left: 19%; top: 0; width: 58%; aspect-ratio: 1; border: 15px dashed rgba(218, 193, 143, 0.78); border-right-color: transparent; border-radius: 50%; transform: rotate(-20deg); }
.case-fu__symbol--help::before { inset: 10%; border: 5px solid rgba(218, 193, 143, 0.76); background: linear-gradient(90deg, transparent 32%, rgba(218, 193, 143, 0.48) 32% 34%, transparent 34% 66%, rgba(218, 193, 143, 0.48) 66% 68%, transparent 68%); }

/* Full scene grammar: curtain rise → shadow-play elegy → period-school psychological
   suspense transition → curtain call. All modern imagery is original and abstract. */
.case-fu__curtain {
  position: absolute;
  z-index: 40;
  top: 0;
  bottom: 0;
  width: 51%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 5%, rgba(226, 193, 127, 0.22), transparent 28%),
    repeating-linear-gradient(90deg, #24282c 0 7%, #5a454e 7% 14%, #20383c 14% 21%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.58), 0 0 28px rgba(0, 0, 0, 0.3);
}
.case-fu__curtain::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  background: linear-gradient(180deg, #d2b06f, #685234 52%, #c7a266);
  box-shadow: 0 0 16px rgba(217, 188, 133, 0.34);
}
.case-fu__curtain--left { left: 0; transform-origin: left center; }
.case-fu__curtain--left::before { right: 0; }
.case-fu__curtain--right { right: 0; transform-origin: right center; }
.case-fu__curtain--right::before { left: 0; }

.case-fu__curtain-cue {
  position: absolute;
  z-index: 44;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: #f2deae;
  font: 850 clamp(1.3rem, 4vw, 2.7rem)/1 "Noto Serif TC", "Songti TC", Georgia, serif;
  letter-spacing: 0.3em;
  text-shadow: 0 5px 26px #000;
}
.case-fu__curtain-cue span { position: absolute; opacity: 0; }
html[lang="en"] .case-fu__curtain-cue { font-family: Georgia, "Times New Roman", serif; }
html[lang="ja"] .case-fu__curtain-cue { font-family: "Noto Serif JP", "Yu Mincho", serif; }

.case-fu__shadow-script {
  position: absolute;
  z-index: 38;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.case-fu__script-heading {
  position: absolute;
  z-index: 3;
  top: 17%;
  left: 50%;
  width: min(82%, 820px);
  transform: translateX(-50%);
  color: #cfb47c;
  font-size: 0.59rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-align: center;
}
.case-fu__script-line {
  position: absolute;
  z-index: 4;
  margin: 0;
  padding: 12px 16px 13px;
  color: #f6ead0;
  border: 1px solid rgba(231, 201, 143, 0.28);
  background: linear-gradient(90deg, rgba(7, 22, 31, 0.92), rgba(16, 36, 46, 0.82));
  box-shadow: 0 13px 34px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(9px);
  text-align: left;
  will-change: opacity, transform;
}
.case-fu__script-line b {
  display: block;
  margin-bottom: 4px;
  color: #d5b978;
  font-size: 0.63rem;
  letter-spacing: 0.11em;
}
.case-fu__script-line p {
  margin: 0;
  font: 650 clamp(0.78rem, 1.55vw, 1rem)/1.72 "Noto Serif TC", "Songti TC", Georgia, serif;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}
.case-fu__shadow-line--recorder {
  top: 23%;
  left: auto;
  right: 4%;
  width: min(55%, 620px);
  border-left: 4px solid #bd9c5e;
}
.case-fu__shadow-line--guardian {
  top: 43%;
  right: auto;
  left: 4%;
  width: min(55%, 620px);
  border-right: 4px solid #b88679;
}
.case-fu__shadow-line--together {
  top: 34%;
  left: 50%;
  width: min(72%, 740px);
  transform: translate(-50%, 9px);
  text-align: center;
}
html[lang="en"] .case-fu__script-line p { font-family: Georgia, "Times New Roman", serif; }
html[lang="en"] .case-fu__shadow-script .case-fu__script-line[data-line-source="elegy"] p { font-style: italic; }
html[lang="ja"] .case-fu__script-line p { font-family: "Noto Serif JP", "Yu Mincho", serif; line-height: 1.84; }

.case-fu__modern-world {
  position: absolute;
  z-index: 10;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transform: scale(1.045);
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 13, 18, 0.02), rgba(4, 13, 18, 0.22)),
    url("art/fu-xiaodi-modern-archive-corridor-20260817.webp") center / cover no-repeat,
    #14242a;
}
.case-fu__modern-world::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  background:
    radial-gradient(ellipse at 88% 64%, rgba(205, 161, 81, 0.13), transparent 18%),
    linear-gradient(90deg, rgba(3, 10, 14, 0.62), transparent 22% 76%, rgba(3, 10, 14, 0.62)),
    linear-gradient(180deg, rgba(2, 8, 11, 0.3), transparent 24% 73%, rgba(2, 8, 11, 0.5));
}
.case-fu__modern-world::after {
  content: "";
  position: absolute;
  z-index: 20;
  inset: 0;
  opacity: 0.19;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(235, 244, 237, 0.1) 3px 4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}
.case-fu__modern-rain {
  position: absolute;
  z-index: 5;
  inset: -20%;
  opacity: 0.34;
  background: repeating-linear-gradient(102deg, transparent 0 25px, rgba(183, 205, 203, 0.22) 25px 27px, transparent 27px 48px);
  transform: translateY(-9%);
}
.case-fu__modern-beam {
  position: absolute;
  z-index: 8;
  left: 23%;
  bottom: 14%;
  width: 34%;
  height: 28%;
  opacity: 0;
  clip-path: polygon(0 43%, 100% 0, 100% 100%);
  background: linear-gradient(90deg, rgba(219, 200, 152, 0.18), transparent 76%);
  filter: blur(2px);
  transform: rotate(-4deg);
}
.case-fu__modern-person {
  position: absolute;
  z-index: 32;
  bottom: 4.5%;
  /* The two standing figures share a height baseline.  The researcher's
     wider frame also gives the kneeling pose room to keep its body scale. */
  width: clamp(164px, 22%, 230px);
  height: 64%;
  opacity: 0;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.55)) saturate(0.76);
  will-change: transform, opacity;
}
.case-fu__modern-person--researcher {
  left: 34%;
  width: clamp(262px, 55%, 300px);
  transform: none;
}
.case-fu__modern-person--archivist {
  right: 34%;
  /* A slightly taller private frame lets the open-file pose match the
     researcher's head scale without clipping hair or boots. */
  height: 64%;
  transform: none;
}
.case-fu__modern-person .case-fu__character-pose { background-size: contain; }
.case-fu__modern-person--researcher .case-fu__character-pose { background-position: left bottom; }
.case-fu__modern-person--archivist .case-fu__character-pose {
  background-position: right bottom;
  background-size: contain;
}
.case-fu__character-pose--modern-researcher-0 { background-image: url("art/fu-xiaodi-modern-researcher-male-20260817.png"); }
.case-fu__character-pose--modern-researcher-1 { background-image: url("art/fu-xiaodi-modern-researcher-male-crouch-note-20260817.png"); }
.case-fu__modern-person .case-fu__character-pose--modern-researcher-1 {
  background-size: contain;
}
.case-fu__character-pose--modern-researcher-2 { background-image: url("art/fu-xiaodi-modern-researcher-male-turn-back-20260817.png"); }
.case-fu__character-pose--modern-archivist-0 { background-image: url("art/fu-xiaodi-modern-archivist-female-20260817.png"); }
.case-fu__character-pose--modern-archivist-1 { background-image: url("art/fu-xiaodi-modern-archivist-female-open-file-20260817.png"); }
.case-fu__character-pose--modern-archivist-2 { background-image: url("art/fu-xiaodi-modern-archivist-female-listen-door-20260817.png"); }
.case-fu__modern-person .case-fu__character-pose--modern-researcher-2 {
  /* The third pose gets its own oversized transparent frame. The artwork is
     centred inside that frame, so its visible head/body scale stays aligned
     with pose one while the crown keeps a reliable clear margin. */
  top: -8%;
  bottom: -2%;
  background-position: left center;
  background-size: contain;
}
.case-fu__modern-person .case-fu__character-pose--modern-archivist-1 {
  background-position: right bottom;
  background-size: contain;
}
.case-fu__modern-label {
  position: absolute;
  z-index: 42;
  left: 50%;
  top: 4.5%;
  width: min(88%, 900px);
  padding: 7px 12px;
  transform: translateX(-50%);
  color: rgba(238, 228, 203, 0.8);
  background: rgba(4, 15, 20, 0.56);
  font-size: 0.6rem;
  font-weight: 780;
  letter-spacing: 0.07em;
  line-height: 1.45;
  text-align: center;
}
.case-fu__modern-script {
  position: absolute;
  z-index: 40;
  inset: 0;
}
.case-fu__modern-line {
  position: absolute;
  z-index: 28;
  width: min(48%, 480px);
  padding: 11px 13px 12px;
  color: #eef0e9;
  border: 1px solid rgba(191, 203, 191, 0.26);
  background: rgba(5, 17, 22, 0.86);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(10px);
}
.case-fu__modern-line--researcher { left: auto; right: 4.5%; top: 17%; border-left: 4px solid #94aeb0; }
.case-fu__modern-line--archivist { right: auto; left: 4.5%; top: 36%; border-right: 4px solid #c6a76b; }
.case-fu__modern-line--note {
  left: 50%;
  top: 27%;
  width: min(66%, 680px);
  transform: translate(-50%, 10px);
  border-left: 4px solid #b77c70;
  background: rgba(18, 25, 29, 0.94);
}
.case-fu__modern-line b {
  display: block;
  margin-bottom: 3px;
  color: #d3b679;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}
.case-fu__modern-line p { margin: 0; font-size: clamp(0.72rem, 1.35vw, 0.91rem); line-height: 1.55; }
html[lang="en"] .case-fu__modern-line p { font-family: Georgia, "Times New Roman", serif; }
html[lang="ja"] .case-fu__modern-line p { line-height: 1.68; }

.case-fu__focus-panel {
  position: absolute;
  z-index: 24;
  left: 50%;
  bottom: 5%;
  width: min(52%, 470px);
  padding: 15px 17px;
  display: grid;
  gap: 3px;
  color: #f3ead9;
  border: 1px solid rgba(218, 193, 143, 0.44);
  border-left: 5px solid #c7a765;
  background: rgba(8, 23, 30, 0.88);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
}
.case-fu__focus-panel b { color: #d8bd83; font-size: 0.75rem; letter-spacing: 0.1em; }
.case-fu__focus-panel span { font-size: clamp(0.82rem, 1.7vw, 1rem); line-height: 1.55; }

.case-fu__interaction {
  margin-top: 12px;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(210px, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(51, 72, 92, 0.24);
  background: rgba(255, 255, 255, 0.48);
}
.case-fu__interaction-head { display: grid; gap: 2px; }
.case-fu__interaction-head strong { color: var(--fu-indigo-deep); font-size: 0.86rem; }
.case-fu__interaction-head small { color: var(--fu-muted); font-size: 0.68rem; line-height: 1.45; }
.case-fu__interaction-buttons { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.case-fu__focus-button {
  min-width: 88px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--fu-indigo);
  border-radius: 7px;
  color: var(--fu-indigo-deep);
  background: transparent;
  font-weight: 790;
  cursor: pointer;
}
.case-fu__focus-button:hover:not(:disabled),
.case-fu__focus-button[aria-pressed="true"] { color: #fff; background: var(--fu-indigo); }
.case-fu__focus-button:disabled { cursor: wait; opacity: 0.48; }

.case-fu__scene.is-playing .case-fu__puppet--recorder {
  animation: fu-shadow-recorder-phase var(--shadow-duration) ease-in-out var(--shadow-start) both;
}
.case-fu__scene.is-playing .case-fu__puppet--guardian {
  animation: fu-shadow-guardian-phase var(--shadow-duration) ease-in-out var(--shadow-start) both;
}
.case-fu__scene.is-playing .case-fu__symbol {
  animation: fu-shadow-symbol-phase var(--shadow-duration) ease-in-out var(--shadow-start) both;
}
.case-fu__scene.is-playing .case-fu__shadow-script {
  animation: fu-shadow-script-phase var(--shadow-duration) ease var(--shadow-start) both;
}
.case-fu__scene.is-playing .case-fu__stage::before {
  animation:
    fu-curtain-top-open 1700ms ease-in-out 0ms forwards,
    fu-curtain-top-close var(--curtain-close-duration) ease-in-out var(--curtain-close-delay) forwards;
}
.case-fu__scene.is-playing .case-fu__stage::after {
  animation:
    fu-curtain-bottom-open 1700ms ease-in-out 0ms forwards,
    fu-curtain-bottom-close var(--curtain-close-duration) ease-in-out var(--curtain-close-delay) forwards;
}
.case-fu__scene.is-playing .case-fu__curtain--left {
  animation:
    fu-curtain-left-open 1700ms cubic-bezier(.65,0,.35,1) 0ms forwards,
    fu-curtain-left-close var(--curtain-close-duration) cubic-bezier(.65,0,.35,1) var(--curtain-close-delay) forwards;
}
.case-fu__scene.is-playing .case-fu__curtain--right {
  animation:
    fu-curtain-right-open 1700ms cubic-bezier(.65,0,.35,1) 0ms forwards,
    fu-curtain-right-close var(--curtain-close-duration) cubic-bezier(.65,0,.35,1) var(--curtain-close-delay) forwards;
}
.case-fu__scene.is-playing .case-fu__curtain-cue span:first-child { animation: fu-cue 1450ms ease 110ms both; }
.case-fu__scene.is-playing .case-fu__curtain-cue span:last-child { animation: fu-cue 1450ms ease var(--curtain-close-delay) both; }
.case-fu__scene.is-playing .case-fu__stage-core { animation: fu-core-cue var(--core-duration) ease var(--core-delay) both; }
.case-fu__scene.is-playing .case-fu__script-line:not(.case-fu__shadow-line--together):not(.case-fu__modern-line--note) {
  animation: fu-script-line var(--line-duration) ease var(--line-delay) both;
}
.case-fu__scene.is-playing .case-fu__shadow-line--together,
.case-fu__scene.is-playing .case-fu__modern-line--note {
  animation: fu-script-line-centered var(--line-duration) ease var(--line-delay) both;
}
.case-fu__scene.is-playing .case-fu__modern-world {
  animation: fu-modern-layer-phase var(--modern-duration) ease-in-out var(--modern-start) both;
}
.case-fu__scene.is-playing .case-fu__modern-person--researcher {
  animation: fu-modern-researcher-phase var(--modern-duration) ease-in-out var(--modern-start) both;
}
.case-fu__scene.is-playing .case-fu__modern-person--archivist {
  animation: fu-modern-archivist-phase var(--modern-duration) ease-in-out var(--modern-start) both;
}
.case-fu__scene.is-playing .case-fu__modern-rain {
  animation: fu-modern-rain-phase var(--modern-duration) linear var(--modern-start) both;
}
.case-fu__scene.is-playing .case-fu__modern-beam {
  animation: fu-modern-beam-phase var(--modern-duration) ease-in-out var(--modern-start) both;
}
.case-fu__scene.is-playing .case-fu__focus-panel {
  animation: fu-focus-cue var(--focus-duration) ease var(--focus-start) both;
}
.case-fu__scene.is-playing .case-fu__puppet .case-fu__character-pose:nth-child(1) {
  animation: fu-pose-one var(--shadow-duration) linear var(--shadow-start) both;
}
.case-fu__scene.is-playing .case-fu__puppet .case-fu__character-pose:nth-child(2) {
  animation: fu-pose-two var(--shadow-duration) linear var(--shadow-start) both;
}
.case-fu__scene.is-playing .case-fu__puppet .case-fu__character-pose:nth-child(3) {
  animation: fu-pose-three var(--shadow-duration) linear var(--shadow-start) both;
}
.case-fu__scene.is-playing .case-fu__modern-person .case-fu__character-pose:nth-child(1) {
  animation: fu-pose-one var(--modern-duration) linear var(--modern-start) both;
}
.case-fu__scene.is-playing .case-fu__modern-person .case-fu__character-pose:nth-child(2) {
  animation: fu-pose-two var(--modern-duration) linear var(--modern-start) both;
}
.case-fu__scene.is-playing .case-fu__modern-person .case-fu__character-pose:nth-child(3) {
  animation: fu-pose-three var(--modern-duration) linear var(--modern-start) both;
}

/* GSAP owns the element timeline when available. The stage's top and bottom
   pseudo-curtains keep their CSS fallback animation, so the original
   presentation remains functional whenever GSAP is unavailable. */
.case-fu-gsap .case-fu__scene.is-gsap-playing.is-playing .case-fu__curtain,
.case-fu-gsap .case-fu__scene.is-gsap-playing.is-playing .case-fu__curtain-cue span,
.case-fu-gsap .case-fu__scene.is-gsap-playing.is-playing .case-fu__stage-core,
.case-fu-gsap .case-fu__scene.is-gsap-playing.is-playing .case-fu__puppet,
.case-fu-gsap .case-fu__scene.is-gsap-playing.is-playing .case-fu__symbol,
.case-fu-gsap .case-fu__scene.is-gsap-playing.is-playing .case-fu__shadow-script,
.case-fu-gsap .case-fu__scene.is-gsap-playing.is-playing .case-fu__script-line,
.case-fu-gsap .case-fu__scene.is-gsap-playing.is-playing .case-fu__modern-world,
.case-fu-gsap .case-fu__scene.is-gsap-playing.is-playing .case-fu__modern-person,
.case-fu-gsap .case-fu__scene.is-gsap-playing.is-playing .case-fu__modern-rain,
.case-fu-gsap .case-fu__scene.is-gsap-playing.is-playing .case-fu__modern-beam,
.case-fu-gsap .case-fu__scene.is-gsap-playing.is-playing .case-fu__focus-panel,
.case-fu-gsap .case-fu__scene.is-gsap-playing.is-playing .case-fu__character-pose {
  animation: none !important;
}
.case-fu-gsap .case-fu__stage { perspective: 1100px; }
.case-fu-gsap .case-fu__curtain,
.case-fu-gsap .case-fu__puppet,
.case-fu-gsap .case-fu__modern-world,
.case-fu-gsap .case-fu__modern-person,
.case-fu-gsap .case-fu__script-line {
  backface-visibility: hidden;
}

.case-fu__scene.is-complete .case-fu__puppet,
.case-fu__scene.is-complete .case-fu__symbol,
.case-fu__scene.is-complete .case-fu__shadow-script,
.case-fu__scene.is-complete .case-fu__stage-core,
.case-fu__scene.is-complete .case-fu__curtain-cue { opacity: 0; }
.case-fu__scene.is-complete .case-fu__modern-world {
  opacity: 0;
  transform: scale(1.012);
  clip-path: inset(0 0);
}
.case-fu__scene.is-complete .case-fu__modern-person { opacity: 0; }
.case-fu__scene.is-complete .case-fu__modern-line { opacity: 0; }
.case-fu__scene.is-complete .case-fu__modern-dialogue--researcher,
.case-fu__scene.is-complete .case-fu__modern-dialogue--archivist { opacity: 0; }
.case-fu__scene.is-complete .case-fu__modern-beam { opacity: 0; }
.case-fu__scene.is-complete .case-fu__focus-panel { opacity: 0; transform: translate(-50%, 12px); }
.case-fu__scene.is-complete .case-fu__curtain--left { transform: translateX(0); }
.case-fu__scene.is-complete .case-fu__curtain--right { transform: translateX(0); }
.case-fu__scene.is-complete .case-fu__stage::before { transform: translateY(0); }
.case-fu__scene.is-complete .case-fu__stage::after { transform: rotate(180deg) translateY(0); }

/* Hold the completed animation on its curtain-call frame. An explicit clue
   button may reopen the modern layer, preserving the interactive epilogue
   without the mobile end-of-animation flash. */
.case-fu__scene.is-complete.is-focus-open .case-fu__modern-world { opacity: 1; transform: scale(1); }
.case-fu__scene.is-complete.is-focus-open .case-fu__modern-person { opacity: 0.9; transform: translateX(0); }
.case-fu__scene.is-complete.is-focus-open .case-fu__modern-dialogue--researcher,
.case-fu__scene.is-complete.is-focus-open .case-fu__modern-dialogue--archivist { opacity: 1; transform: translateY(0); }
.case-fu__scene.is-complete.is-focus-open .case-fu__modern-beam { opacity: 0.34; }
.case-fu__scene.is-complete.is-focus-open .case-fu__focus-panel { opacity: 1; transform: translate(-50%, 0); }
.case-fu__scene.is-complete.is-focus-open .case-fu__curtain--left { transform: translateX(-96%); }
.case-fu__scene.is-complete.is-focus-open .case-fu__curtain--right { transform: translateX(96%); }
.case-fu__scene.is-complete.is-focus-open .case-fu__stage::before { transform: translateY(-12%); }
.case-fu__scene.is-complete.is-focus-open .case-fu__stage::after { transform: rotate(180deg) translateY(-12%); }
.case-fu__scene.is-paused *,
.case-fu__scene.is-paused .case-fu__stage::before,
.case-fu__scene.is-paused .case-fu__stage::after { animation-play-state: paused !important; }
.case-fu__scene.is-dialogue-pulse .case-fu__modern-dialogue { animation: fu-dialogue-pulse 520ms ease both; }
.case-fu__scene[data-focus="0"].is-complete.is-focus-open .case-fu__modern-person--researcher { transform: translateX(2%) rotate(-0.5deg); }
.case-fu__scene[data-focus="1"].is-complete.is-focus-open .case-fu__modern-person--archivist { transform: translateX(-3%) rotate(0.5deg); }
.case-fu__scene[data-focus="2"].is-complete.is-focus-open .case-fu__modern-person--researcher { transform: translateX(4%); }
.case-fu__scene[data-focus="2"].is-complete.is-focus-open .case-fu__modern-person--archivist { transform: translateX(-4%); }

/* Hard terminal state: once the curtain call finishes, no retained animation,
   mobile compositor layer, or reduced-motion override may reveal the modern
   theatre again. A clue click removes this class before reopening the scene. */
.case-fu__scene.is-curtain-locked .case-fu__modern-world,
.case-fu__scene.is-curtain-locked .case-fu__modern-world *,
.case-fu__scene.is-curtain-locked .case-fu__focus-panel {
  animation: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.case-fu__scene.is-curtain-locked .case-fu__puppet,
.case-fu__scene.is-curtain-locked .case-fu__symbol,
.case-fu__scene.is-curtain-locked .case-fu__shadow-script,
.case-fu__scene.is-curtain-locked .case-fu__stage-core,
.case-fu__scene.is-curtain-locked .case-fu__curtain-cue {
  animation: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
.case-fu__scene.is-curtain-locked .case-fu__curtain {
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.case-fu__scene.is-curtain-locked .case-fu__curtain--left { transform: translateX(0) !important; }
.case-fu__scene.is-curtain-locked .case-fu__curtain--right { transform: translateX(0) !important; }
.case-fu__scene.is-curtain-locked .case-fu__stage::before {
  animation: none !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.case-fu__scene.is-curtain-locked .case-fu__stage::after {
  animation: none !important;
  opacity: 1 !important;
  transform: rotate(180deg) translateY(0) !important;
}

@keyframes fu-shadow-recorder-phase {
  0% { transform: translateX(-8%) rotate(-1.5deg); opacity: 0; }
  7%, 91% { transform: translateX(0) rotate(0.35deg); opacity: 0.96; }
  100% { transform: translateX(-5%) rotate(-0.5deg); opacity: 0; }
}
@keyframes fu-shadow-guardian-phase {
  0% { transform: translateX(8%) rotate(1.5deg); opacity: 0; }
  7%, 91% { transform: translateX(0) rotate(-0.35deg); opacity: 0.96; }
  100% { transform: translateX(5%) rotate(0.5deg); opacity: 0; }
}
@keyframes fu-shadow-symbol-phase {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
  8%, 90% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
  100% { transform: translate(-50%, -50%) scale(1.07); opacity: 0; }
}
@keyframes fu-shadow-script-phase { 0%, 3% { opacity: 0; } 7%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fu-curtain-top-open { from { transform: translateY(0); } to { transform: translateY(-28%); } }
@keyframes fu-curtain-top-close { from { transform: translateY(-28%); } to { transform: translateY(0); } }
@keyframes fu-curtain-bottom-open { from { transform: rotate(180deg) translateY(0); } to { transform: rotate(180deg) translateY(-28%); } }
@keyframes fu-curtain-bottom-close { from { transform: rotate(180deg) translateY(-28%); } to { transform: rotate(180deg) translateY(0); } }
@keyframes fu-curtain-left-open { from { transform: translateX(0); } to { transform: translateX(-96%); } }
@keyframes fu-curtain-left-close { from { transform: translateX(-96%); } to { transform: translateX(0); } }
@keyframes fu-curtain-right-open { from { transform: translateX(0); } to { transform: translateX(96%); } }
@keyframes fu-curtain-right-close { from { transform: translateX(96%); } to { transform: translateX(0); } }
@keyframes fu-cue { 0%, 100% { opacity: 0; transform: translateY(10px); } 22%, 68% { opacity: 1; transform: translateY(0); } }
@keyframes fu-core-cue { 0%, 100% { opacity: 0; transform: translate(-50%, 8px); } 15%, 78% { opacity: 1; transform: translate(-50%, 0); } }
@keyframes fu-script-line { 0%, 100% { opacity: 0; transform: translateY(9px); } 11%, 84% { opacity: 1; transform: translateY(0); } }
@keyframes fu-script-line-centered { 0%, 100% { opacity: 0; transform: translate(-50%, 9px); } 11%, 84% { opacity: 1; transform: translate(-50%, 0); } }
@keyframes fu-modern-layer-phase { 0% { opacity: 0; transform: scale(1.055); clip-path: inset(0 50%); } 9%, 90% { opacity: 1; transform: scale(1); clip-path: inset(0 0); } 100% { opacity: 0; transform: scale(1.012); clip-path: inset(0 0); } }
@keyframes fu-modern-researcher-phase { 0% { transform: translateX(-10%); opacity: 0; } 12%, 89% { transform: translateX(0); opacity: 0.92; } 100% { transform: translateX(4%); opacity: 0; } }
@keyframes fu-modern-archivist-phase { 0% { transform: translateX(10%); opacity: 0; } 12%, 89% { transform: translateX(0); opacity: 0.92; } 100% { transform: translateX(-4%); opacity: 0; } }

@media (min-width: 768px) {
  /* The prologue uses a narrow two-column stage on desktop. Keep its pair
     inside that smaller frame while full-width chapter stages use the more
     central positions above. */
  .case-fu__opening .case-fu__puppet--recorder { left: 4%; }
  .case-fu__opening .case-fu__puppet--guardian { right: 4%; }
  .case-fu__opening .case-fu__modern-person--researcher { left: 14%; }
  .case-fu__opening .case-fu__modern-person--archivist { right: 14%; }
}
@keyframes fu-modern-rain-phase { 0% { transform: translateY(-12%); opacity: 0; } 9%, 91% { opacity: 0.34; } 100% { transform: translateY(12%); opacity: 0; } }
@keyframes fu-modern-beam-phase { 0%, 100% { opacity: 0; transform: rotate(-8deg); } 14% { opacity: 0.42; } 48% { opacity: 0.18; transform: rotate(4deg); } 82% { opacity: 0.34; transform: rotate(-1deg); } }
@keyframes fu-focus-cue { 0%, 100% { opacity: 0; transform: translate(-50%, 12px); } 14%, 83% { opacity: 1; transform: translate(-50%, 0); } }
@keyframes fu-pose-one { 0%, 29% { opacity: 1; transform: translateY(0) rotate(0); } 34%, 100% { opacity: 0; transform: translateY(2px) rotate(-0.35deg); } }
@keyframes fu-pose-two { 0%, 28% { opacity: 0; transform: translateY(3px); } 34%, 62% { opacity: 1; transform: translateY(0); } 68%, 100% { opacity: 0; transform: translateY(-2px); } }
@keyframes fu-pose-three { 0%, 61% { opacity: 0; transform: translateY(2px) rotate(0.25deg); } 68%, 94% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(-2px); } }
@keyframes fu-dialogue-pulse { 0% { opacity: 0.46; filter: brightness(0.78); } 55% { opacity: 1; filter: brightness(1.18); } 100% { opacity: 1; filter: brightness(1); } }

.case-fu__scene-controls { margin-top: 11px; align-items: center; }
.case-fu__scene-controls .case-fu__button { min-height: 42px; padding: 9px 14px; font-size: 0.84rem; }
.case-fu__scene-status { color: var(--fu-muted); font-size: 0.82rem; }

.case-fu__audio-dock.case-fu__audio-top {
  width: min(620px, 100%);
  margin: 18px 0 0;
  padding: 10px 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(223, 233, 230, 0.22);
  color: #fff;
}
.case-fu__audio-master {
  min-height: 52px;
  flex: 0 1 auto;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(223, 233, 230, 0.34);
  border-radius: 999px;
  color: #f4ecda;
  background: rgba(255, 255, 255, 0.055);
  cursor: pointer;
  text-align: left;
}
.case-fu__audio-copy { display: grid; gap: 1px; }
.case-fu__audio-copy strong { color: #f0deb5; font-size: 0.82rem; }
.case-fu__audio-copy small { color: rgba(255, 255, 255, 0.64); font-size: 0.69rem; line-height: 1.35; }
.case-fu__audio-toggle-indicator {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
}
.case-fu__audio-toggle-indicator::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #dfe9e6;
  transition: transform 180ms ease, background 180ms ease;
}
.case-fu__audio-master[aria-pressed="true"] { border-color: #d8bf84; background: rgba(163, 145, 88, 0.18); }
.case-fu__audio-master[aria-pressed="true"] .case-fu__audio-toggle-indicator::after { transform: translateX(18px); background: #d8bf84; }
.case-fu__audio-state { margin: 0; color: rgba(255, 255, 255, 0.66); font-size: 0.7rem; line-height: 1.35; }
.case-fu__audio-top audio { display: none; }

/* Supplied cultural stamp sheet: decorative inner-page motifs, not official emblems. */
.case-fu__heritage-eggs {
  position: absolute;
  z-index: 3;
  top: 18px;
  display: flex;
  gap: 7px;
  opacity: 0.44;
}
.case-fu__heritage-eggs--left { left: 14px; }
.case-fu__heritage-eggs--right { right: 14px; }
.case-fu__heritage-badge {
  position: relative;
  width: 38px;
  height: 38px;
  display: block;
  overflow: visible;
  border: 1px solid rgba(41, 63, 67, 0.48);
  border-radius: 50%;
  background-color: #11100e;
  background-image: url("art/fu-xiaodi-taiwan-cultural-stamps-20260817.png");
  background-repeat: no-repeat;
  background-size: 384% 256%;
  box-shadow: 0 4px 11px rgba(24, 30, 28, 0.26), inset 0 0 0 1px rgba(239, 240, 233, 0.5);
  transition: opacity 160ms ease, transform 160ms ease;
}
.case-fu__section--indigo .case-fu__heritage-badge,
.case-fu__opening .case-fu__heritage-badge,
.case-fu__finale .case-fu__heritage-badge { border-color: rgba(239, 240, 233, 0.5); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(239, 240, 233, 0.34); }
.case-fu__heritage-badge:hover,
.case-fu__heritage-badge:focus-visible { z-index: 5; opacity: 1; transform: translateY(-2px) scale(1.08); }
.case-fu__heritage-badge::after {
  content: attr(data-label);
  position: absolute;
  z-index: 9;
  top: calc(100% + 8px);
  left: 50%;
  width: max-content;
  max-width: min(260px, 72vw);
  padding: 6px 8px;
  border-radius: 4px;
  color: #f6efe2;
  background: rgba(32, 54, 59, 0.96);
  font-size: 0.62rem;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.case-fu__heritage-badge:hover::after,
.case-fu__heritage-badge:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.case-fu__heritage-eggs--left .case-fu__heritage-badge::after { left: 0; transform: translate(0, -4px); }
.case-fu__heritage-eggs--left .case-fu__heritage-badge:hover::after,
.case-fu__heritage-eggs--left .case-fu__heritage-badge:focus-visible::after { transform: translate(0, 0); }
.case-fu__heritage-eggs--right .case-fu__heritage-badge::after { right: 0; left: auto; transform: translate(0, -4px); }
.case-fu__heritage-eggs--right .case-fu__heritage-badge:hover::after,
.case-fu__heritage-eggs--right .case-fu__heritage-badge:focus-visible::after { transform: translate(0, 0); }
.case-fu__heritage-badge--minnan-01,
.case-fu__heritage-gallery-stamp--minnan-01 { background-position: 5% 5%; }
.case-fu__heritage-badge--minnan-02,
.case-fu__heritage-gallery-stamp--minnan-02 { background-position: 50% 5%; }
.case-fu__heritage-badge--hakka-01,
.case-fu__heritage-gallery-stamp--hakka-01 { background-position: 95% 5%; }
.case-fu__heritage-badge--hakka-02,
.case-fu__heritage-gallery-stamp--hakka-02 { background-position: 5% 81%; }
.case-fu__heritage-badge--waisheng-01,
.case-fu__heritage-gallery-stamp--waisheng-01 { background-position: 50% 81%; }
.case-fu__heritage-badge--waisheng-02,
.case-fu__heritage-gallery-stamp--waisheng-02 { background-position: 95% 81%; }

.case-fu__heritage-gallery {
  position: relative;
  margin: 30px 0 28px;
  padding: clamp(22px, 4vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(128, 99, 69, 0.32);
  border-radius: 10px;
  color: #2f3f3f;
  background:
    linear-gradient(135deg, rgba(248, 240, 222, 0.96), rgba(231, 220, 195, 0.92)),
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(112, 87, 61, 0.035) 8px 9px);
  box-shadow: 0 16px 40px rgba(45, 51, 48, 0.08);
}
.case-fu__heritage-gallery::before,
.case-fu__heritage-gallery::after {
  content: "";
  position: absolute;
  width: 86px;
  height: 86px;
  border: 1px solid rgba(151, 73, 60, 0.2);
  transform: rotate(45deg);
  pointer-events: none;
}
.case-fu__heritage-gallery::before { top: -54px; left: -42px; }
.case-fu__heritage-gallery::after { right: -42px; bottom: -54px; }
.case-fu__heritage-gallery-eyebrow {
  margin: 0 0 7px;
  color: #875149;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.15em;
}
.case-fu__heritage-gallery-title {
  margin: 0;
  color: #263d3f;
  font: 800 clamp(1.25rem, 2.5vw, 1.7rem)/1.3 "Noto Serif TC", Georgia, serif;
}
.case-fu__heritage-gallery-note {
  max-width: 72ch;
  margin: 10px 0 22px;
  color: #5c625c;
  font-size: 0.84rem;
  line-height: 1.8;
}
.case-fu__heritage-gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 18px);
}
.case-fu__heritage-gallery-item {
  min-width: 0;
  margin: 0;
  text-align: center;
}
.case-fu__heritage-gallery-stamp {
  width: min(100%, 118px);
  aspect-ratio: 1;
  display: block;
  margin: 0 auto;
  border: 1px solid rgba(63, 67, 60, 0.3);
  border-radius: 50%;
  background-color: #11100e;
  background-image: url("art/fu-xiaodi-taiwan-cultural-stamps-20260817.png");
  background-repeat: no-repeat;
  background-size: 384% 256%;
  box-shadow: 0 7px 18px rgba(45, 40, 32, 0.18), inset 0 0 0 2px rgba(246, 236, 214, 0.38);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.case-fu__heritage-gallery-item:hover .case-fu__heritage-gallery-stamp { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 10px 24px rgba(45, 40, 32, 0.23), inset 0 0 0 2px rgba(246, 236, 214, 0.46); }
.case-fu__heritage-gallery-item:nth-child(even):hover .case-fu__heritage-gallery-stamp { transform: translateY(-3px) rotate(1deg); }
.case-fu__heritage-gallery-item figcaption {
  margin-top: 9px;
  color: #4f5c59;
  font-size: 0.68rem;
  line-height: 1.5;
}
html[lang="en"] .case-fu__heritage-gallery-item figcaption,
html[lang="ja"] .case-fu__heritage-gallery-item figcaption { font-size: 0.64rem; }

.case-fu__finale { padding: clamp(78px, 12vw, 160px) 0; color: #f7f1e6; background: linear-gradient(145deg, #20363b, #293f43 58%, #4b3e44); }
.case-fu__finale .case-fu__heading { max-width: 22ch; }
.case-fu__finale blockquote { margin: 30px 0; padding: 0 0 0 22px; border-left: 4px solid #d7bb84; color: #ead8b6; font: 700 clamp(1.3rem, 2.6vw, 2rem)/1.6 "Noto Serif TC", Georgia, serif; }
.case-fu__finale .case-fu__button { color: #f4ecda; border-color: rgba(244, 236, 218, 0.48); }
.case-fu__finale .case-fu__button:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.case-fu__finale .case-fu__source-jump,
.case-fu__finale a[href="#case-sources"] { color: #f4ecda; text-decoration-color: rgba(244, 236, 218, 0.62); }
.case-fu__legal { padding: 26px 24px; color: #565e59; background: #e4dccf; font-size: 0.82rem; }
.case-fu__legal p { width: var(--fu-shell); margin: 0 auto; }
.case-fu__footer { padding: 28px 24px; color: rgba(255, 255, 255, 0.72); background: #0d202d; text-align: center; font-size: 0.82rem; }

@media (max-width: 960px) {
  .case-fu__opening-grid,
  .case-fu__hero-inner { grid-template-columns: 1fr; }
  .case-fu__hero-media { order: -1; }
  .case-fu__quick-grid,
  .case-fu__question-grid,
  .case-fu__action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-fu__flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-fu__flow-step:nth-child(3)::after { display: none; }
  .case-fu__title { max-width: 18ch; }
  /* Preserve vertical acting room on tablets and narrow desktop windows. */
  .case-fu__stage { min-height: clamp(560px, 72vw, 680px); }
  .case-fu__puppet { width: 34%; height: 66%; bottom: 8%; }
  .case-fu__puppet--guardian { width: 44%; }
  .case-fu__puppet--recorder { left: 7%; }
  .case-fu__puppet--guardian { right: 7%; }
  .case-fu__modern-person { height: 62%; bottom: 3%; }
  .case-fu__modern-person--researcher { width: 60%; }
  .case-fu__modern-person--archivist { height: 62%; }
}

@media (max-width: 767px) {
  :root { --fu-shell: min(100% - 40px, 680px); }
  body.case-fu { font-size: clamp(18px, 4.8vw, 20px); line-height: 1.82; }
  html[lang="en"] body.case-fu,
  html[lang="ja"] body.case-fu { font-size: 17px; }
  .case-fu__nav { min-height: 62px; align-items: flex-start; padding: 10px 0; }
  .case-fu__brand { padding-top: 5px; font-size: 0.82rem; }
  .case-fu__nav-actions { justify-content: flex-end; }
  .case-fu__nav-actions > a:not(.case-fu__home-link) { display: none; }
  .case-fu__opening-inner { padding: 36px 0 46px; }
  .case-fu__opening-copy h2 { font-size: clamp(2rem, 12vw, 3.3rem); }
  .case-fu__hero { padding: 46px 0 64px; }
  .case-fu__hero-media img { aspect-ratio: 4 / 5; }
  .case-fu__title { max-width: 11ch; font-size: clamp(2.35rem, 12vw, 3.8rem); }
  html[lang="en"] .case-fu__title,
  html[lang="ja"] .case-fu__title { max-width: 15ch; font-size: clamp(2.15rem, 10vw, 3.4rem); }
  .case-fu__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-fu__section { padding: 64px 0; }
  .case-fu__heading { font-size: clamp(1.9rem, 9vw, 3rem); }
  .case-fu__toc ol { columns: 1; }
  .case-fu__quick-grid,
  .case-fu__question-grid,
  .case-fu__action-grid,
  .case-fu__source-grid,
  .case-fu__help-grid { grid-template-columns: 1fr; }
  .case-fu__ledger { background: repeating-linear-gradient(0deg, #f8f3e8 0 84px, rgba(51, 72, 92, 0.18) 84px 85px); }
  .case-fu__ledger-row { min-height: 86px; grid-template-columns: 1fr; gap: 4px; }
  .case-fu__days { grid-template-columns: repeat(12, 1fr); }
  .case-fu__timeline::before { left: 8px; }
  .case-fu__event { grid-template-columns: 1fr; gap: 5px; padding-left: 32px; }
  .case-fu__event::before { left: 3px; }
  .case-fu__court { grid-template-columns: 46px minmax(0, 1fr); }
  .case-fu__court > div:last-child { grid-column: 2; }
  .case-fu__flow { grid-template-columns: 1fr; }
  .case-fu__flow-step { min-height: 0; }
  .case-fu__flow-step::after { top: auto; right: 50%; bottom: -12px; transform: translateX(50%) rotate(90deg); }
  .case-fu__flow-step:nth-child(3)::after { display: grid; }
  /* Mobile theatre: keep a dedicated figure lane at both sides.  The former
     76–82% dialogue cards covered almost the entire narrow stage, so the
     figures were technically present but visually hidden behind the copy. */
  .case-fu__stage { min-height: clamp(620px, 88svh, 760px); }
  .case-fu__puppet { z-index: 22; width: 56%; height: 40%; bottom: 5%; }
  /* Bring both performers into the central safe area. Their full source
     canvases now remain inside the narrow stage instead of hanging off-screen. */
  .case-fu__opening .case-fu__puppet--recorder,
  .case-fu__puppet--recorder { left: 5%; }
  .case-fu__opening .case-fu__puppet--guardian,
  .case-fu__puppet--guardian { right: 5%; }
  .case-fu__symbol { width: 48%; height: 27%; top: 45%; }
  .case-fu__stage-label { top: 11%; width: 90%; font-size: 0.6rem; }
  .case-fu__stage-core { width: 88%; bottom: 12%; padding: 11px 12px; font-size: 0.88rem; line-height: 1.65; }
  .case-fu__script-heading { top: 16%; width: 90%; font-size: 0.51rem; letter-spacing: 0.04em; }
  .case-fu__script-line {
    width: 59%;
    padding: 9px 10px 10px;
    background: linear-gradient(90deg, rgba(7, 22, 31, 0.8), rgba(16, 36, 46, 0.7));
    backdrop-filter: blur(2px);
  }
  /* Put each line opposite its speaker, leaving that speaker unobscured. */
  .case-fu__shadow-line--recorder { top: 23%; left: auto; right: 2.5%; }
  .case-fu__shadow-line--guardian { top: 43%; right: auto; left: 2.5%; }
  .case-fu__shadow-line--together {
    top: 34%;
    left: 50%;
    width: 84%;
    background: rgba(7, 22, 31, 0.74);
  }
  .case-fu__script-line b { font-size: 0.55rem; }
  .case-fu__script-line p { font-size: 0.77rem; line-height: 1.58; }
  html[lang="en"] .case-fu__script-line p,
  html[lang="ja"] .case-fu__script-line p { font-size: 0.74rem; line-height: 1.64; }
  .case-fu__modern-label { top: 3%; width: 94%; font-size: 0.51rem; letter-spacing: 0.04em; }
  .case-fu__modern-person { z-index: 32; width: 52%; height: 56%; bottom: 2%; }
  .case-fu__modern-person--researcher { left: 2%; width: 92%; }
  .case-fu__modern-person--researcher .case-fu__character-pose { background-position: 35% bottom; }
  .case-fu__modern-person--archivist { right: 14%; height: 56%; }
  .case-fu__modern-person .case-fu__character-pose--modern-researcher-1 {
    background-position: 15% bottom;
    background-size: auto 68%;
  }
  /* The third male pose uses a tall transparent source canvas. Reserve a
     crown gutter so the hairline remains visible on narrow screens. */
  .case-fu__modern-person .case-fu__character-pose--modern-researcher-2 {
    top: 0;
    bottom: 0;
    background-position: left bottom;
    background-size: contain;
  }
  .case-fu__modern-line {
    width: 60%;
    padding: 9px 10px;
    background: rgba(5, 17, 22, 0.78);
    backdrop-filter: blur(2px);
  }
  .case-fu__modern-line--researcher { left: auto; right: 2.5%; top: 15%; }
  .case-fu__modern-line--archivist { right: auto; left: 2.5%; top: 39%; }
  .case-fu__modern-line--note {
    left: 50%;
    top: 25%;
    width: 84%;
    background: rgba(18, 25, 29, 0.86);
  }
  .case-fu__modern-line p { font-size: 0.76rem; line-height: 1.52; }
  html[lang="en"] .case-fu__modern-line p,
  html[lang="ja"] .case-fu__modern-line p { font-size: 0.73rem; }
  .case-fu__focus-panel { left: 50%; bottom: 3%; width: calc(100% - 28px); padding: 12px 13px; }
  .case-fu__focus-panel span { font-size: 0.8rem; }
  .case-fu__interaction { grid-template-columns: 1fr; padding: 12px; }
  .case-fu__interaction-buttons { justify-content: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-fu__focus-button { min-width: 0; width: 100%; padding: 7px 5px; font-size: 0.76rem; }
  .case-fu__scene-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-fu__scene-controls .case-fu__button { width: 100%; }
  .case-fu__scene-status { grid-column: 1 / -1; }
  .case-fu__audio-dock.case-fu__audio-top { align-items: stretch; flex-direction: column; }
  .case-fu__audio-master { width: 100%; }
  .case-fu__heritage-eggs { top: 8px; gap: 4px; opacity: 0.3; }
  .case-fu__heritage-eggs--left { left: 7px; }
  .case-fu__heritage-eggs--right { right: 7px; }
  .case-fu__heritage-badge { width: 27px; height: 27px; }
  .case-fu__heritage-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
  .case-fu__heritage-gallery-stamp { width: min(100%, 112px); }
}

@media (max-width: 430px) {
  :root { --fu-shell: calc(100% - 32px); }
  .case-fu__stage { min-height: clamp(640px, 90svh, 720px); }
  .case-fu__puppet { width: 56%; height: 40%; bottom: 5%; }
  .case-fu__opening .case-fu__puppet--recorder,
  .case-fu__puppet--recorder { left: 5%; }
  .case-fu__opening .case-fu__puppet--guardian,
  .case-fu__puppet--guardian { right: 5%; }
  .case-fu__modern-person--researcher { left: 2%; }
  .case-fu__modern-person--archivist { right: 14%; }
  .case-fu__script-line { width: 58%; }
  .case-fu__shadow-line--together { width: 86%; }
  .case-fu__modern-line { width: 60%; }
  .case-fu__choice,
  .case-fu__actions { display: grid; }
  .case-fu__button { width: 100%; min-height: 50px; }
  .case-fu__facts { grid-template-columns: 1fr; }
  .case-fu__fact { min-height: 86px; }
  .case-fu__court { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 16px; }
  .case-fu__help-card { min-height: 180px; }
  .case-fu__help-number { font-size: 3rem; }
  .case-fu__heritage-gallery { margin-inline: -4px; padding: 20px 16px; }
  .case-fu__heritage-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .case-fu__heritage-gallery-stamp { width: min(100%, 126px); }
  .case-fu__heritage-gallery-item figcaption { font-size: 0.67rem; }
}

@media (prefers-reduced-motion: reduce), (max-height: 419px) and (orientation: landscape) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .case-fu__puppet,
  .case-fu__symbol,
  .case-fu__shadow-script,
  .case-fu__stage-core,
  .case-fu__curtain-cue { opacity: 0 !important; }
  .case-fu__modern-world { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .case-fu__modern-person { opacity: 1 !important; transform: none !important; }
  .case-fu__modern-line { opacity: 0 !important; }
  .case-fu__modern-dialogue--researcher,
  .case-fu__modern-dialogue--archivist { opacity: 1 !important; transform: none !important; }
  .case-fu__modern-beam { opacity: 0.28 !important; }
  .case-fu__focus-panel { opacity: 1 !important; transform: translate(-50%, 0) !important; }
  .case-fu__curtain--left { transform: translateX(-96%) !important; }
  .case-fu__curtain--right { transform: translateX(96%) !important; }
}

@media print {
  .case-fu__topbar,
  .case-fu__opening,
  .case-fu__scene,
  .case-fu__audio-dock,
  .case-fu__heritage-eggs,
  .case-fu__actions { display: none !important; }
  body.case-fu { color: #000; background: #fff; font-size: 11pt; line-height: 1.55; }
  .case-fu__section,
  .case-fu__hero,
  .case-fu__finale { padding: 20px 0; color: #000; background: #fff; border: 0; }
  .case-fu__inner,
  .case-fu__hero-inner,
  .case-fu__finale-inner { width: 100%; display: block; }
  .case-fu__hero-media { display: none; }
  .case-fu__source { break-inside: avoid; }
  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
}