/* ======================================================================
 * cinema.css · 動漫電影感疊加層
 * ----------------------------------------------------------------------
 * 載入順序：style.css → home.css → cinema.css （這個要最後載入才能覆寫）
 * 移除方法：把 <link rel="stylesheet" href="cinema.css"> 拔掉即可
 *
 * 修正項目：
 *   1) NAV 重疊修正（subnav 永遠固定於 site-nav 下方）
 *   2) body 上方留出 nav 高度
 *   3) 主視覺、圖片置中與 21:9 電影寬螢幕全幅化
 *   4) 加上動漫電影 letterbox / vignette / 漸層黑邊
 *   5) 文字置中強化，與漸層柔光對齊
 * ====================================================================== */

/* ── 0. 「← OJ」返回 OJ 主站連結（左上角浮在 nav 內） ───────────── */
.site-back-oj{
  display:inline-flex;align-items:center;gap:0.45rem;
  margin-right:1.6rem;padding:0.4rem 0.85rem;
  font-family:'JetBrains Mono',monospace;
  font-size:0.65rem;letter-spacing:0.3em;font-weight:600;
  color:#c9a961 !important;
  text-decoration:none !important;
  border:1px solid rgba(201,169,97,0.32);
  border-radius:2px;
  background:rgba(0,0,0,0.5);backdrop-filter:blur(6px);
  transition:all 0.25s cubic-bezier(.2,.7,.2,1);
  flex-shrink:0;
}
.site-back-oj:hover{
  color:#ffd483 !important;
  border-color:rgba(255,212,131,0.65) !important;
  background:rgba(201,169,97,0.1);
  transform:translateX(-2px);
}
.site-back-oj .back-arrow{font-size:0.9rem;line-height:1;}
.site-back-oj .back-text{letter-spacing:0.35em;}
@media (max-width:640px){
  .site-back-oj{margin-right:0.6rem;padding:0.3rem 0.6rem;font-size:0.55rem;}
  .site-back-oj .back-text{display:none;}
}

/* ── 1. NAV 結構重設 ─────────────────────────────────────────────── */
.site-nav{
  background:linear-gradient(180deg, rgba(8,8,10,0.92) 0%, rgba(8,8,10,0.6) 80%, rgba(8,8,10,0) 100%) !important;
  backdrop-filter:blur(14px) saturate(1.2) !important;
  border-bottom:1px solid rgba(201,169,97,0.18) !important;
  padding:0.9rem 2rem !important;
}
.site-nav.is-scrolled{
  background:rgba(8,8,10,0.94) !important;
  padding:0.6rem 2rem !important;
}

/* subnav 永遠固定於 site-nav 下方，不再用 translateY 隱藏 */
.story-subnav{
  top:84px !important;
  transform:none !important;
  background:rgba(8,8,10,0.78) !important;
  backdrop-filter:blur(10px) saturate(1.1) !important;
  border-top:1px solid rgba(201,169,97,0.08) !important;
  padding:0.35rem 2rem !important;
}
/* scroll 時 site-nav 不縮（內容撐住高度），故 subnav 永遠停在 84 */
.site-nav.is-scrolled + .story-subnav{
  top:84px !important;
}
.ssn-inner{
  justify-content:center !important;       /* CHAPTERS 居中 */
  flex-wrap:nowrap !important;
}

/* breadcrumb 對齊 nav，置中 */
.page-breadcrumb{
  padding-top:7.5rem !important;
  text-align:center !important;
}
/* 補滿 body 起始空間，避免內容飄到 nav 下 */
body{
  padding-top:0 !important;                /* nav 是 fixed，不佔 flow；hero 自己會留位 */
}

/* ── 2. CONTENT CENTERING（內容置中強化）─────────────────────────── */
.site-nav-inner,
.ssn-inner{
  max-width:1600px;margin:0 auto;
}

main, .container, .wrap, .page-wrap{
  max-width:1280px;margin-left:auto;margin-right:auto;
}

/* hero 自身置中 */
.hero, .home-hero{
  text-align:center;
}
.hero-content, .hero-grid-lines{
  margin-left:auto;margin-right:auto;
}

/* 確保所有區塊置中 */
section{
  margin-left:auto;margin-right:auto;
}

/* ── 3. 動漫電影 LETTERBOX + VIGNETTE ───────────────────────────── */
/* 全頁固定的上下黑邊（letterbox），製造電影帶感。
   注意：v3.7 的 style.css 已用 body::before / body::after 做環境漸層，
   為避免衝突這裡掛到 html::before / html::after */
html::before,
html::after{
  content:'';
  position:fixed;left:0;right:0;
  height:42px;
  background:linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 100%);
  pointer-events:none;
  z-index:50;
}
html::before{ top:0; }
html::after{
  bottom:0;
  background:linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 100%);
}

/* 四週 vignette */
.cinema-vignette{
  position:fixed;inset:0;pointer-events:none;z-index:40;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* ── 3.5 YouTube Hero 影片背景 ────────────────────────────────── */
.hero-yt-bg{
  position:absolute;inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:#000;
}
.hero-yt-iframe{
  position:absolute;
  /* size 由 _hero-video.js 動態計算（保證 16:9 cover 無 letterbox） */
  top:50%;left:50%;
  transform:translate(-50%, -50%);
  /* fallback：JS 未跑時也至少有合理尺寸 */
  width:100%;height:100%;
  border:0;
  filter:saturate(1.05) contrast(1.05) brightness(0.55);
}
/* poster 覆蓋層 — iframe 載入黑底時的遮蓋圖。JS 在影片就緒時加 .is-ready 淡化它 */
.hero-yt-poster{
  position:absolute;inset:0;
  background-size:cover;background-position:center center;
  z-index:2;
  opacity:1;
  transition:opacity 1.6s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
  filter:saturate(1.05) contrast(1.05) brightness(0.7);
}
.hero-yt-bg.is-ready .hero-yt-poster{
  opacity:0;
}
.hero-yt-tint{
  position:absolute;inset:0;
  z-index:3;
  background:
    radial-gradient(ellipse at center 55%, transparent 0%, rgba(0,0,0,0.5) 80%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 25%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.85) 100%);
  pointer-events:none;
}
/* 確保 hero 內容浮在影片之上 */
.home-hero > *:not(.hero-yt-bg),
.hero > *:not(.hero-yt-bg){
  position:relative;
  z-index:3;
}
/* 原靜態圖保留可見，作為 iframe 載入時的 fallback（不再淡掉） */
.hero-bg-faded{ opacity:1 !important; }

/* trailer 影片卡 — 整塊可點，hover 升起 */
.trailer-poster-link{
  display:block;text-decoration:none;color:inherit;
  cursor:pointer;
  transition:transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s;
}
.trailer-poster-link:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,212,131,0.3);
}
.trailer-poster-link:hover .tp-play{
  transform:scale(1.08);
  color:#ffd483;
  filter:drop-shadow(0 0 20px rgba(255,212,131,0.6));
}
.tp-play{ transition:all 0.3s ease; }

/* ── 4. HERO 圖片電影寬螢幕全幅 ───────────────────────────────── */
/* 主視覺底圖 cover、置中 */
.home-hero .hero-bg-img,
.hero-bg img,
img.hero-bg-img{
  width:100% !important;height:100% !important;
  object-fit:cover !important;object-position:center center !important;
  filter:saturate(1.05) contrast(1.05) brightness(0.78) !important;
}

/* 21:9 圖片區塊（feat-card 等）優化 */
.feat-img-wrap,
.scn-img,
.gallery-item img{
  overflow:hidden;
  position:relative;
}
.feat-img-wrap img,
.scn-img img,
.gallery-item img{
  width:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.feat-card:hover .feat-img-wrap img,
.gallery-item:hover img{
  transform:scale(1.04);
}

/* hero 圖片柔和漸層覆蓋（增加文字對比、強化電影感） */
.home-hero .hero-bg::after,
.hero .hero-bg::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at center 60%, transparent 0%, rgba(0,0,0,0.45) 80%),
    linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.85) 100%);
  pointer-events:none;
}

/* ── 5. 字體節奏（動漫電影標題感 + 可讀性強化）───────────────── */
/* 大標題加粗實 + 大陰影對比 */
.hero-megatitle, .hero-title{
  font-weight:900 !important;
  letter-spacing:0.04em !important;
  color:#fff5dc !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.5),
    0 4px 32px rgba(0,0,0,0.85),
    0 0 60px rgba(255,212,131,0.15) !important;
}
/* 強調字（鏡子 / em / mt-em）金色實心 + drop-shadow 提亮 */
.mt-em, .hero-title .em, .hero-subtitle .em{
  background:linear-gradient(180deg, #fff3d8 0%, #ffd483 45%, #d4a460 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,200,120,0.55)) drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

/* hero-roman / hero-tag / 標籤類強化對比 */
.hero-roman, .hero-tag, .hero-eyebrow{
  color:#ffd483 !important;
  text-shadow:0 1px 8px rgba(0,0,0,0.7) !important;
  font-weight:500 !important;
}

/* hero-subtitle 中文副標 */
.hero-subtitle{
  color:#f3ead0 !important;
  font-weight:400 !important;
  text-shadow:0 2px 16px rgba(0,0,0,0.85) !important;
}

/* logline 區塊（一句話故事）強化可讀 */
.lb-text, .hero-tagline{
  font-size:clamp(22px, 2.4vw, 30px) !important;
  line-height:1.7 !important;
  text-align:center !important;
  color:#ece4cc !important;
  font-weight:400 !important;
  font-style:normal !important;
}
.hero-quote{
  font-size:clamp(18px, 1.8vw, 22px) !important;
  line-height:2 !important;
  color:#e8dec3 !important;
  font-weight:400 !important;
}

/* 內文段落整體加重 + 對比 */
p, .se-desc, .saga-intro, .section-intro{
  color:#dcd2b5 !important;
  font-weight:400 !important;
}

/* meta strip 欄位（FORMAT / SAGA / SCALE / RELEASE）字體放大、值粗體 */
.hms-label, .mi-label, .se-vol, .ssn-label{
  color:#c9a961 !important;
  font-weight:600 !important;
  font-size:0.72rem !important;
  letter-spacing:0.32em !important;
}
.hms-value, .mi-value{
  color:#ffe8c2 !important;
  font-weight:500 !important;
  font-size:0.98rem !important;
}

/* 角色卡欄位（cast_script.html）── label 與內容對比強化 */
.char-attr-label, .char-stat-label, .stat-label,
[class*="-label"]:not(.ss-label){
  color:#c9a961 !important;
  font-weight:600 !important;
  letter-spacing:0.22em !important;
  text-transform:uppercase;
  font-size:0.7rem !important;
}
.char-attr-value, .char-stat-value, .stat-value, .char-desc{
  color:#ece4cc !important;
  font-weight:400 !important;
  font-size:0.94rem !important;
  line-height:1.75 !important;
}

/* 角色名稱（cast_script.html）放大、發光 */
.char-name, .char-name-en, .character-name{
  font-weight:700 !important;
  letter-spacing:0.06em !important;
  color:#fff5dc !important;
  text-shadow:0 0 14px rgba(255,212,131,0.25);
}

/* italic 引言類保留斜體但加亮色 */
em, i, .italic, .em-italic, .quote, blockquote{
  color:#ffd483 !important;
  font-style:italic;
}

/* 全站 body 預設不要過淡 */
body{
  color:#e6dec8 !important;
  font-weight:400 !important;
}

/* ── 5.5 cast_script.html 角色卡 · 統一 gallery 風格（Image 2 樣板）─── */
.cast-card{
  background:linear-gradient(180deg,rgba(15,14,12,0.85),rgba(8,7,5,0.95)) !important;
  border:1px solid rgba(201,169,97,0.22) !important;
  border-radius:4px !important;
  padding:0 !important;
  margin-bottom:1.4rem !important;
  overflow:hidden !important;
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s !important;
}
.cast-card:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(255,212,131,0.6) !important;
  box-shadow:0 14px 50px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,212,131,0.22) !important;
}
/* 移除原本左邊 ::before 直條（v3.7 內建），改用 border-left 控制 */
.cast-card::before{ display:none !important; }

/* 圖片：滿幅 3:4 直立 portrait */
.cast-img-wrap{
  position:relative !important;
  width:100% !important;
  aspect-ratio:3/4 !important;
  margin:0 !important;
  border:0 !important;
  overflow:hidden !important;
  background:#0a0a0e !important;
}
.cast-img-wrap img{
  width:100% !important;height:100% !important;
  object-fit:cover !important;
  object-position:center 25% !important;
  filter:saturate(1.06) contrast(1.04) brightness(0.92) !important;
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1) !important;
}
.cast-card:hover .cast-img-wrap img{ transform:scale(1.07) !important; }
/* 圖底漸層 → 文字背景 */
.cast-img-wrap::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.95) 100%);
  pointer-events:none;z-index:2;
}

/* meta（編號 + side-tag）整列浮在圖左上角，水平排列不重疊 */
.cast-meta{
  position:absolute !important;
  top:10px !important;left:10px !important;right:10px !important;
  z-index:5 !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:0.5rem !important;
  margin:0 !important;padding:0 !important;
  background:none !important;
  border:0 !important;
  max-width:none !important;
  pointer-events:none;
}
.cast-id{
  font-family:'JetBrains Mono',monospace !important;
  font-size:0.6rem !important;letter-spacing:0.22em !important;
  color:#c9a961 !important;font-weight:600 !important;
  padding:4px 9px !important;
  background:rgba(0,0,0,0.7) !important;
  backdrop-filter:blur(4px);
  border:1px solid rgba(201,169,97,0.32) !important;
  border-radius:2px;
  max-width:62%;
  white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
  pointer-events:auto;
}
/* side-tag 在 meta 同列右側 ── flex space-between 自動拉開 */
.cast-side-tag{
  position:static !important;
  display:inline-block !important;
  padding:4px 10px !important;
  background:rgba(0,0,0,0.7) !important;
  backdrop-filter:blur(4px);
  border:1px solid rgba(201,169,97,0.42) !important;
  border-radius:2px;
  font-family:'JetBrains Mono',monospace !important;
  font-size:0.6rem !important;letter-spacing:0.28em !important;
  color:#ffd483 !important;font-weight:600 !important;
  white-space:nowrap;
  flex-shrink:0;
  pointer-events:auto;
}

/* 名字疊在圖底部（用負 margin 拉上來，避免 absolute 跟卡片高度衝突）*/
.cast-name{
  position:relative !important;z-index:5;
  margin:-3.2rem 0 0 !important;
  padding:0 1rem !important;
  font-family:'Cinzel',serif !important;
  font-weight:800 !important;
  font-size:clamp(1.15rem,1.6vw,1.6rem) !important;
  letter-spacing:0.05em !important;
  line-height:1.15 !important;
  color:#fff5dc !important;
  text-shadow:0 2px 14px rgba(0,0,0,0.95);
  border:0 !important;
}
.cast-name-cn{
  position:relative !important;z-index:5;
  margin:0.15rem 0 0 !important;
  padding:0 1rem 0.8rem !important;
  font-family:'Noto Serif TC',serif !important;
  font-weight:400 !important;
  font-size:0.78rem !important;
  letter-spacing:0.25em !important;
  color:#c9a961 !important;
  border:0 !important;
  text-shadow:0 1px 6px rgba(0,0,0,0.9);
}

/* 底下 detail rows — 緊湊、可選顯示，font-size 小 */
.cast-card > .cast-role,
.cast-card > .cast-attrs,
.cast-card > .cast-scenes,
.cast-card > .cast-arc,
.cast-card > .cast-quote{
  padding:0.65rem 1rem !important;
  margin:0 !important;
  max-width:none !important;
}
.cast-card > .cast-role{
  padding-top:0.8rem !important;
  border-top:1px solid rgba(201,169,97,0.14);
  font-size:0.84rem !important;
  line-height:1.7 !important;
  color:#cfc2a3 !important;
  font-family:'Noto Serif TC',serif !important;
  font-weight:400 !important;
}
.cast-card > .cast-role strong{ color:#ffd483 !important; font-weight:600 !important; }

.cast-card > .cast-attrs{
  display:grid !important;
  grid-template-columns:max-content 1fr !important;
  gap:0.4rem 0.8rem !important;
  margin:0 0.4rem !important;
  padding:0.7rem 0.8rem !important;
  background:rgba(0,0,0,0.4) !important;
  border:1px solid rgba(201,169,97,0.12) !important;
  border-radius:3px !important;
}
.cast-attr-label{
  font-family:'JetBrains Mono',monospace !important;
  font-size:0.6rem !important;letter-spacing:0.22em !important;
  font-weight:600 !important;color:#c9a961 !important;
  text-transform:uppercase;white-space:nowrap;
}
.cast-attr-value{
  font-family:'Noto Serif TC',serif !important;
  font-size:0.82rem !important;font-weight:400 !important;
  color:#ece4cc !important;line-height:1.55 !important;
}

.cast-card > .cast-scenes{
  display:flex !important;flex-wrap:wrap !important;gap:0.3rem !important;
  padding:0.6rem 1rem !important;
}
.scene-pill{
  display:inline-block;padding:2px 8px;
  border:1px solid rgba(201,169,97,0.3);border-radius:99px;
  font-family:'JetBrains Mono',monospace;font-size:0.58rem !important;
  letter-spacing:0.18em;color:#ffd483 !important;
  background:rgba(201,169,97,0.05);
}

.cast-card > .cast-arc{
  margin:0 0.4rem !important;
  padding:0.65rem 0.8rem !important;
  font-size:0.82rem !important;line-height:1.7 !important;
  color:#cfc2a3 !important;
  background:linear-gradient(90deg,rgba(168,40,40,0.1),rgba(168,40,40,0.02)) !important;
  border-left:3px solid rgba(168,40,40,0.55) !important;
  border-radius:0 3px 3px 0;
}
.cast-card > .cast-arc strong{ color:#ffd483 !important; font-weight:700 !important; }

.cast-card > .cast-quote{
  padding:0.7rem 1rem 1rem !important;
  font-family:'Cormorant Garamond',serif !important;
  font-style:italic !important;
  font-size:0.92rem !important;line-height:1.75 !important;
  color:#ffd483 !important;font-weight:400 !important;
  border-top:1px dashed rgba(201,169,97,0.16) !important;
}

/* 11 家族色標識 */
.h-ignis{color:#ff6b3a !important;font-weight:600;}
.h-volt{color:#ffd83a !important;font-weight:600;}
.h-abyss{color:#5a8dbe !important;font-weight:600;}
.h-sylva{color:#7aa055 !important;font-weight:600;}
.h-glacier{color:#a8c9d8 !important;font-weight:600;}
.h-nox{color:#a070c8 !important;font-weight:600;}
.h-lumina{color:#ffe08a !important;font-weight:600;}
.h-seraph{color:#fff !important;font-weight:600;}
.h-sangrith{color:#c63848 !important;font-weight:600;}
.h-phasm{color:#9070b0 !important;font-weight:600;}
.h-chrona{color:#5fb3a0 !important;font-weight:600;}

/* 派系變體左邊條 + 對應 side-tag 顏色 */
.cast-card.side-protag{ border-left:3px solid #c9a961 !important; }
.cast-card.side-protag .cast-side-tag{ color:#ffd483 !important; border-color:rgba(201,169,97,0.5) !important; }
.cast-card.side-tragic{ border-left:3px solid #a82828 !important; }
.cast-card.side-tragic .cast-side-tag{ color:#ff9999 !important; border-color:rgba(168,40,40,0.55) !important; }
.cast-card.side-antag{ border-left:3px solid #7a0e1e !important; }
.cast-card.side-antag .cast-side-tag{ color:#ff8a8a !important; border-color:rgba(122,14,30,0.6) !important; }
.cast-card.side-neutral{ border-left:3px solid #9070b0 !important; }
.cast-card.side-neutral .cast-side-tag{ color:#c8a8e0 !important; border-color:rgba(144,112,176,0.55) !important; }
.cast-card.side-comic{ border-left:3px solid #5fb3a0 !important; }
.cast-card.side-comic .cast-side-tag{ color:#8ee0c8 !important; border-color:rgba(95,179,160,0.55) !important; }

/* ── 6. 動畫進場（電影感淡入推鏡）─────────────────────────── */
@keyframes cinemaFadeUp{
  from{opacity:0;transform:translateY(20px) scale(0.99);filter:blur(2px);}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}
}
.home-hero, .hero,
section[class*="logline"],
section[class*="saga"],
section[class*="features"],
.feat-card{
  animation:cinemaFadeUp 1.4s cubic-bezier(.2,.7,.2,1) both;
}
.feat-card:nth-child(2){ animation-delay:.15s; }
.feat-card:nth-child(3){ animation-delay:.3s; }

/* ── 7. RWD：窄螢幕簡化 ─────────────────────────────────────── */
@media (max-width:880px){
  .ssn-inner{ overflow-x:auto !important; flex-wrap:nowrap !important; justify-content:flex-start !important; }
  html::before, html::after{ height:24px; }
  .page-breadcrumb{ padding-top:6.5rem !important; }
}
@media (max-width:640px){
  .site-nav{ padding:0.6rem 1rem !important; }
  .story-subnav{ top:54px !important; padding:0.3rem 1rem !important; }
  .site-nav.is-scrolled + .story-subnav{ top:46px !important; }
  html::before, html::after{ height:0 !important; display:none; }
}