/* 忘却のリヴェリオン｜素材とフォント（materials.css）
   ・Xサーバー版で追加。見た目だけ。本文・進行・表示条件には触れない。
   ・素材：assets/materials/（素材パックから縮小・変換したもの）
   ・見出しは叛逆明朝（Hangyaku）。小さい文字・長い文は読みやすい明朝（Shippori Mincho）。 */

@font-face{font-family:"Hangyaku";src:url("assets/fonts/hangyaku.ttf") format("truetype");font-display:swap}
:root{
  --rv-display:"Hangyaku","Shippori Mincho","Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --rv-mincho:"Shippori Mincho","Zen Old Mincho","Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
}
/* 叛逆明朝は日本語の字形だけ。韓国語・英語・簡体字では字形が混ざるので、見出しも読みやすい明朝にする */
html:not([lang="ja"]):not([lang=""]){--rv-display:var(--rv-mincho)}

/* =========================================================
   TOP（index.html）
   ========================================================= */

/* 見出し・大きな文字は叛逆明朝 */
body:not(.reading-compact) :is(.entrance h1,.land h2,.cast-entry-copy h2,.countdown-step .clock){
  font-family:var(--rv-display)!important;font-weight:400!important;
}
body:not(.reading-compact) :is(.label,.entrance a,.land p,.synopsis-line,.countdown-step p,.intro-header a,.cast-link span,footer){font-family:var(--rv-mincho)}

/* 00:00：夜の庭園の動画を暗く沈めて流す（動画は materials.js が入れる） */
.countdown-step.midnight{position:relative;overflow:hidden;isolation:isolate}
.countdown-step.midnight>:not(.rv-midnight-media){position:relative;z-index:2}
.rv-midnight-media{position:absolute;inset:0;z-index:0;pointer-events:none;background:#080f1d url("assets/materials/hero-garden-poster.webp") center/cover no-repeat}
.rv-midnight-media video{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity 1.6s ease}
.rv-midnight-media video.is-playing{opacity:1}
.rv-midnight-media::after{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 50%,rgba(8,15,29,.35),rgba(8,15,29,.82) 75%),
  linear-gradient(180deg,#080f1d 0%,rgba(8,15,29,.25) 22%,rgba(8,15,29,.25) 78%,#080f1d 100%)}
.countdown-step.midnight .clock{text-shadow:0 2px 18px rgba(0,0,0,.85)}
.countdown-step.midnight p{text-shadow:0 2px 12px rgba(0,0,0,.9)}
@media (max-width:700px),(max-aspect-ratio:3/4){
  .rv-midnight-media{background-image:url("assets/materials/hero-glasshouse-poster.webp")}
}

/* キャラクター選択：上端に垂れ下がる青い花 */
.cast-entry::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(64px,7vw,100px);z-index:1;pointer-events:none;
  background:url("assets/materials/deco-hanging-bluebells.webp") center top/auto 100% repeat-x;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent);
  opacity:.9;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.cast-entry .cast-entry-copy{padding-top:clamp(64px,7vw,96px)}
@media (max-width:700px){.cast-entry::before{height:64px;opacity:.8}.cast-entry .cast-entry-copy{padding-top:70px}}

/* =========================================================
   プレイ画面（play.html）
   ========================================================= */

/* 背景：プロフィールとハンドアウト（自分の資料）は静かな夜空。読み合わせは従来どおり場面の絵 */
body.reading-compact:is([data-view="profile"],[data-view="handout"]) #pageBackdrop{
  background-image:linear-gradient(180deg,rgba(3,9,18,.15),rgba(3,8,16,.7)),url("assets/materials/bg-night-sky-1672.webp")!important;
  background-position:center top!important;background-size:cover!important;
}
@media (max-width:700px){
  body.reading-compact:is([data-view="profile"],[data-view="handout"]) #pageBackdrop{
    background-image:linear-gradient(180deg,rgba(3,9,18,.15),rgba(3,8,16,.7)),url("assets/materials/bg-night-sky-960.webp")!important;
    background-position:72% top!important;
  }
}

/* 場面見出し：勿忘草の小花を添える */
html body.reading-compact[data-view]:not(#mt1):not(#mt2):not(#mt3):not(#mt4):not(#mt5):not(#mt6) #commonReader #readingSceneVisual .chapter-heading::before{
  content:"";display:block;width:58px;height:58px;margin:0 auto 6px;pointer-events:none;
  background:url("assets/materials/deco-forgetmenot-cluster.webp") center/contain no-repeat;
  filter:drop-shadow(0 0 10px rgba(157,188,245,.45));
}
@media (max-width:700px){html body.reading-compact[data-view]:not(#mt1):not(#mt2):not(#mt3):not(#mt4):not(#mt5):not(#mt6) #commonReader #readingSceneVisual .chapter-heading::before{width:44px;height:44px}}

/* 見出し・名前・小見出しは叛逆明朝（読む本文は変えない） */
html body.reading-compact[data-view]:not(#mt1):not(#mt2):not(#mt3):not(#mt4):not(#mt5):not(#mt6) :is(
  h1,h2,h3,
  #readingSceneVisual .chapter-heading h3,
  .character-header h2,
  .chapter-heading h3,
  .story-marker h4,
  .profile h2,.profile h3,
  .role-choice h2,
  .entry-flow h2
){font-family:var(--rv-display)!important;font-weight:400!important;letter-spacing:.08em}
/* 小さな文字（タブ・ボタン・ラベル）は読みやすい明朝 */
html body.reading-compact[data-view]:not(#mt1):not(#mt2):not(#mt3):not(#mt4):not(#mt5):not(#mt6) :is(.workspace-brand,.quick-nav button,#readingTabs .reading-stage-tab,.section-label,#readingSceneVisual .chapter-heading p,.reading-stage-panel button,.handout-intro){font-family:var(--rv-mincho)!important}

/* =========================================================
   読みやすさ（読み合わせ・ハンドアウト）
   ========================================================= */
/* 【】の小見出し：叛逆明朝のまま一回り大きく、明るい金で */
html body.reading-compact[data-view]:not(#mt1):not(#mt2):not(#mt3):not(#mt4):not(#mt5):not(#mt6) :is(#readingText,#textPanel) .story-marker h4{
  font-size:clamp(1.15rem,1.05rem + .4vw,1.4rem)!important;letter-spacing:.1em!important;line-height:1.5!important;
  color:#f0dfae!important;text-shadow:0 1px 10px rgba(0,0,0,.55);
}
html body.reading-compact[data-view]:not(#mt1):not(#mt2):not(#mt3):not(#mt4):not(#mt5):not(#mt6) #textPanel .story-marker.important h4{color:#dbe7ff!important}
/* 台詞も地の文と同じ明朝にそろえる（名前は小さな明朝） */
html body.reading-compact[data-view]:not(#mt1):not(#mt2):not(#mt3):not(#mt4):not(#mt5):not(#mt6) :is(#readingText,#textPanel) .dialogue-bubble :is(p,span:not(.rv-you)){font-family:var(--rv-mincho)!important;letter-spacing:.04em}
html body.reading-compact[data-view]:not(#mt1):not(#mt2):not(#mt3):not(#mt4):not(#mt5):not(#mt6) :is(#readingText,#textPanel) .dialogue-name{font-family:var(--rv-mincho)!important;letter-spacing:.12em}
/* 浮いている「次の自分の台詞」ボタンが最後の行にかぶらないよう、下に余白 */
html body.reading-compact[data-view]:not(#mt1):not(#mt2):not(#mt3):not(#mt4):not(#mt5):not(#mt6) #readingText{padding-bottom:96px!important}

@media (max-width:760px){
  html .rv-next-mine:not(#mt1){min-height:40px;padding:5px 12px 5px 5px;gap:7px;font-size:12px;opacity:.94}
  html .rv-next-mine:not(#mt1) img{width:28px;height:28px}
  html .rv-next-mine:not(#mt1) small{font-size:10px}
}
@media (prefers-reduced-motion:reduce){.rv-midnight-media video{display:none}}