/* SANCHINA story detail r8 — based on 2026-11-03 01:57 latest source.
   This overrides only #storyView; never changes home, auth, quiz, card state.
   Existing /card-collection/assets/ files remain on the web server.
   The prior r7 stylesheet is NOT loaded or reused. */

/* The R6 approved image has its OWN lettering, border, clouds and lanterns.
   Use an actual image element (intrinsic height), never background-size:100% 100%.
   The semantic h3 remains available for accessibility and JS-updated text. */
#storyView .story-list-heading-festival {
  display:block !important;
  position:relative !important;
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  aspect-ratio:auto !important;
  margin:8px 0 10px !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  overflow:visible !important;
}
#storyView .story-list-heading-festival::before,
#storyView .story-list-heading-festival::after,
#storyView .story-list-heading-festival h3::before,
#storyView .story-list-heading-festival h3::after {
  content:none !important;
  display:none !important;
}
#storyView .story-list-heading-festival > span {display:none !important;}
#storyView .story-list-heading-festival .story-heading-illustration {
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  margin:0 auto !important;
  padding:0 !important;
  border:0 !important;
  aspect-ratio:auto !important;
}
/* Keep H3 readable to screen readers but not painted over the baked text. */
#storyView .story-list-heading-festival h3 {
  position:absolute !important;
  display:block !important;
  width:1px !important;
  height:1px !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:-1px !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
}

/* Only when the existing server image is unavailable: readable fallback. */
#storyView .story-list-heading-festival.story-heading-missing {
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  min-height:62px !important;
}
#storyView .story-list-heading-festival.story-heading-missing h3 {
  display:flex !important;
  position:static !important;
  width:auto !important;
  height:auto !important;
  min-height:40px !important;
  margin:4px auto !important;
  padding:4px 17px !important;
  clip:auto !important;
  clip-path:none !important;
  overflow:visible !important;
  border:2px solid #d9a234 !important;
  border-radius:12px !important;
  background:linear-gradient(#fffaf0,#ffe4a5) !important;
  color:#704117 !important;
  font-size:clamp(17px,4.8vw,24px) !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}

/* West Journey ①/②: the original embedded WEBP covers already have the
   correct painted episode pill, title and subtitle. Do not paint a second set.
   Preserve the cover's exact ratios (880x457 and 875x495 respectively). */
#storyView.story-west .story-chapter-cover {
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:880 / 457 !important;
  background-color:#172944 !important;
  background-position:center !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  overflow:hidden !important;
}
#storyView.story-west.story-west-eye .story-chapter-cover {
  aspect-ratio:875 / 495 !important;
}
/* Cover already includes dark fade and foreground copy: no double fade. */
#storyView.story-west .story-chapter-cover::before,
#storyView.story-west .story-chapter-cover::after {
  content:none !important;
  display:none !important;
}
#storyView.story-west .story-cover-images {display:none !important;}
/* Retain accessible dynamic caption and aria-labelledby, visually hide it. */
#storyView.story-west .story-cover-content {
  display:block !important;
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  min-width:0 !important;
  min-height:0 !important;
  top:0 !important;
  left:0 !important;
  right:auto !important;
  bottom:auto !important;
  margin:-1px !important;
  padding:0 !important;
  opacity:0 !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  pointer-events:none !important;
}
#storyView .story-cover-progress {
  position:absolute !important;
  top:11px !important;
  right:12px !important;
  left:auto !important;
  z-index:4 !important;
}

/* Compact one-piece gold completion panel. All values stay JS-generated. */
#storyView .story-complete {
  display:grid !important;
  grid-template-columns:clamp(76px,24%,102px) minmax(0,1fr) !important;
  column-gap:12px !important;
  row-gap:8px !important;
  align-items:center !important;
  position:relative !important;
  isolation:isolate !important;
  margin:12px 0 10px !important;
  padding:16px 15px !important;
  min-height:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  border:2px solid #daa63f !important;
  border-radius:22px !important;
  background:
    radial-gradient(circle at 10% 12%,rgba(255,230,151,.65),transparent 37%),
    linear-gradient(130deg,#fffdf3 0%,#fff2cd 59%,#ffe6a8 100%) !important;
  box-shadow:inset 0 2px 0 #fffdf4,0 8px 19px #a97c2c36 !important;
  text-align:left !important;
}
/* .hidden is the existing completion-state switch. Never defeat it. */
#storyView .story-complete.hidden {display:none !important;}
#storyView .story-complete::before {
  content:'' !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:url('./assets/story_completion_ornaments_20261103.svg') center/100% 100% no-repeat !important;
  opacity:.58 !important;
}
#storyView .story-complete::after {content:none !important;display:none !important;}
#storyView .story-complete-top {display:contents !important;}
#storyView .story-complete-icon {
  grid-column:1 !important;
  grid-row:1 / span 3 !important;
  position:relative !important;
  inset:auto !important;
  z-index:1 !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:4 / 5 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:url('./assets/story_trophy_gold_20261103.svg') center/contain no-repeat !important;
  box-shadow:none !important;
  font-size:0 !important;
  color:transparent !important;
  align-self:center !important;
}
#storyView .story-complete-headings {
  grid-column:2 !important;
  grid-row:1 !important;
  position:relative !important;
  z-index:1 !important;
  min-width:0 !important;
  margin:0 !important;
}
#storyView .story-complete-headings strong {
  display:block !important;
  margin:0 !important;
  color:#a03920 !important;
  font-size:clamp(18px,4.8vw,27px) !important;
  font-weight:950 !important;
  letter-spacing:-.025em !important;
  line-height:1.23 !important;
  text-shadow:0 1px 0 #fff9e8 !important;
  white-space:normal !important;
  word-break:keep-all !important;
  overflow-wrap:anywhere !important;
  text-wrap:balance !important;
}
#storyView .story-complete-headings p {display:none !important;}
#storyView .story-complete-progress {
  grid-column:2 !important;
  grid-row:2 !important;
  position:relative !important;
  z-index:1 !important;
  min-width:0 !important;
  margin:0 !important;
  padding:9px 10px 10px !important;
  border:1px solid #e2b76b !important;
  border-radius:13px !important;
  background:#fffdf5e8 !important;
  box-shadow:inset 0 1px 0 #fff,0 2px 5px #a17a2817 !important;
}
#storyView .story-complete-progress-top {
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  flex-wrap:nowrap !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
}
#storyView .story-complete-progress-top span {
  color:#8a592c !important;
  font-weight:850 !important;
  font-size:clamp(9px,2.35vw,12px) !important;
  white-space:nowrap !important;
}
#storyView .story-complete-progress-top strong {
  color:#744018 !important;
  font-size:clamp(15px,4.25vw,20px) !important;
  font-weight:950 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
#storyView .story-complete-progress-top em {
  color:#087c49 !important;
  font-size:clamp(10px,2.9vw,14px) !important;
  margin-left:auto !important;
  font-style:normal !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}
#storyView .story-complete-progress-bar {
  display:block !important;
  height:9px !important;
  margin:8px 0 0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:999px !important;
  background:#e3f0e7 !important;
}
#storyView .story-complete-progress-bar span {
  display:block !important;
  height:100% !important;
  border-radius:inherit !important;
  background:linear-gradient(90deg,#12bf66,#06a951) !important;
}
#storyView .story-badge {
  grid-column:2 !important;
  grid-row:3 !important;
  position:relative !important;
  z-index:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  max-width:100% !important;
  min-height:37px !important;
  margin:0 !important;
  padding:7px 7px !important;
  border:1.5px solid #cd952c !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,#fff3c9,#f8d471) !important;
  box-shadow:0 2px 0 #fff8d6 inset,0 3px 5px #93691b27 !important;
  color:#90521e !important;
  font-size:clamp(11px,3vw,17px) !important;
  line-height:1.25 !important;
  font-weight:950 !important;
  text-align:center !important;
  white-space:normal !important;
  word-break:keep-all !important;
  overflow-wrap:anywhere !important;
}
#storyView .story-complete > small {display:none !important;}
@media (max-width:360px) {
  #storyView .story-complete {grid-template-columns:72px minmax(0,1fr) !important;gap:7px 9px !important;padding:12px 10px !important;}
  #storyView .story-complete-progress {padding:7px 8px 8px !important;}
  #storyView .story-badge {font-size:10px !important;padding:7px 5px !important;}
}

/* === r9: 西遊記①・②の表紙だけ、黄色の内枠にぴったり合わせる ===
   The source WEBP images have approximately 7-8px of *white* baked into
   their upper edge (and rounded white/empty corners). Using contain in r8
   exposed that margin as well as the navy background along left/right.
   Scale uniformly from the center (same proportion in both axes), crop the white top edge and align the bottom so the subtitle remains readable, and keep all chapter data unchanged.
   Do not use 100% 100%, which distorts the painted lettering and characters.
*/
#storyView.story-west:not(.story-ai) .story-chapter-cover {
  background-size:auto 103% !important;
  background-position:center bottom !important;
  background-repeat:no-repeat !important;
  background-origin:padding-box !important;
  background-clip:padding-box !important;
}