/* ============ ARCANE — book site · Media Genres I A2 ============ */
:root{
  --bg:#08080c; --bg2:#0e0e15; --ink:#f2ecdf; --muted:#9a937f;
  --gold:#d8b45a; --gold-hi:#f0d795;
  --toxic:#57e6c8; --jinx:#59a7e8; --pink:#e05299; --red:#c2374a;
  --font-d:'Cinzel',serif; --font-u:'Rajdhani',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font-u);overflow:hidden}
img{display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--gold);color:#000}

/* ===== BOOT ===== */
#boot{position:fixed;inset:0;z-index:90;background:#050507;display:flex;align-items:center;justify-content:center;transition:opacity .8s ease,visibility .8s}
#boot.off{opacity:0;visibility:hidden}
.boot-inner{text-align:center}
.boot-kicker{font-size:11px;letter-spacing:.55em;color:var(--muted);margin-bottom:18px}
.boot-logo{font-family:var(--font-d);font-weight:900;font-size:clamp(46px,7vw,92px);letter-spacing:.32em;text-indent:.32em;
  color:var(--gold);text-shadow:0 0 60px rgba(216,180,90,.35);animation:bootIn 1.4s ease both}
.boot-bar{width:min(340px,60vw);height:2px;background:#1c1c22;margin:26px auto 0;overflow:hidden}
.boot-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-hi));transition:width .3s}
@keyframes bootIn{from{opacity:0;transform:translateY(14px);letter-spacing:.55em}to{opacity:1;transform:none;letter-spacing:.32em}}

/* ===== DESK + BOOK ===== */
#stage{position:fixed;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 18%,#17121c 0%,#0a0a0f 46%,#050507 100%)}
#stage::before{content:"";position:absolute;left:50%;bottom:6%;transform:translateX(-50%);width:min(900px,82vw);height:60px;
  background:radial-gradient(50% 100% at 50% 0,rgba(0,0,0,.6),transparent 70%);filter:blur(8px)}
#book{position:relative;width:min(1140px,94vw);height:min(840px,88vh)}
/* StPageFlip wrapper */
#book .stf__parent{filter:drop-shadow(0 40px 80px rgba(0,0,0,.6))}

/* hide template pages (kept for the library to read) */
#pages{position:absolute;visibility:hidden;pointer-events:none;left:-10000px;top:0;width:0;height:0;overflow:hidden}

/* ===== generic page ===== */
.page{position:relative;overflow:hidden;background:#0c0c12;color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(216,180,90,.10), inset 0 0 60px rgba(0,0,0,.4)}
.page[data-density="hard"]{box-shadow:inset 0 0 0 2px rgba(216,180,90,.22), 0 0 0 1px rgba(0,0,0,.5)}
.page .ph-no{position:absolute;top:14px;left:18px;z-index:6;font-family:var(--font-d);font-weight:700;font-size:13px;color:var(--gold);letter-spacing:.12em}
.page .ph-title{position:absolute;top:14px;right:18px;z-index:6;font-family:var(--font-d);font-weight:700;font-size:11.5px;color:#cfc8b4;letter-spacing:.2em;text-align:right;max-width:62%}

/* ===== COVER ===== */
.pg-cover .cov-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;filter:brightness(.5) saturate(1.05)}
.pg-cover .cov-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,8,.35) 0%,rgba(5,5,8,.62) 58%,#050507 100%),radial-gradient(90% 80% at 50% 45%,transparent 28%,rgba(4,4,6,.6) 100%)}
.pg-cover .cov-inner{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:0 8%;text-align:center}
.cov-kick{font-size:10px;letter-spacing:.42em;color:#d9d2bd}
.cov-title{font-family:var(--font-d);font-weight:900;font-size:clamp(44px,11vw,98px);letter-spacing:.22em;text-indent:.22em;color:var(--gold-hi);
  background:linear-gradient(180deg,#f7e6b0 8%,#d8b45a 55%,#8a6c28 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 40px rgba(0,0,0,.8))}
.cov-sub{font-size:13px;letter-spacing:.6em;text-indent:.6em;color:#e8e2cf;font-weight:600}
.cov-rule{width:64px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:4px 0}
.cov-tag{font-size:14px;line-height:1.6;color:#cfc8b4;font-weight:500}
.cov-meta{font-size:10px;letter-spacing:.2em;color:var(--gold-hi)}
.cov-meta i{margin:0 8px;color:#6d675a;font-style:normal}

/* ===== CITY PAGES ===== */
.pg-city .city-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.62) saturate(1.05)}
.pg-city .city-shade{position:absolute;inset:0}
.pg-city .city-shade.gold{background:linear-gradient(180deg,rgba(8,6,2,.15) 0%,rgba(8,6,2,.55) 52%,rgba(5,4,1,.96) 100%),linear-gradient(90deg,rgba(216,180,90,.22),transparent)}
.pg-city .city-shade.toxic{background:linear-gradient(180deg,rgba(2,16,13,.15) 0%,rgba(2,16,13,.55) 52%,rgba(1,9,7,.96) 100%),linear-gradient(90deg,rgba(87,230,200,.2),transparent)}
.pg-city .city-body{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:22px 26px}
.pg-city .city-body h2{font-family:var(--font-d);font-weight:900;font-size:clamp(28px,4.4vw,40px);letter-spacing:.14em}
.pg-piltover .city-body h2{color:var(--gold-hi)}
.pg-zaun .city-body h2{color:var(--toxic)}
.pg-city .city-body p{font-size:13px;line-height:1.6;color:#c4bda9;margin-top:8px;max-width:92%}

/* ===== CHARACTERS ===== */
.pg-chars .ch-grid{position:absolute;inset:52px 18px 18px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px}
.ch-card{position:relative;border-radius:4px;overflow:hidden;background-size:cover;background-position:center 22%;border:1px solid rgba(255,255,255,.08)}
.ch-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,5,8,.92) 92%)}
.ch-name{position:absolute;left:12px;right:10px;bottom:10px;z-index:3;font-family:var(--font-d);font-weight:700;font-size:16px;letter-spacing:.12em;color:var(--gold-hi)}
.ch-name span{display:block;font-family:var(--font-u);font-weight:500;font-size:10px;letter-spacing:.18em;color:#a8a189;margin-top:3px;text-transform:uppercase}

/* ===== TRAILER PAGE ===== */
.pg-trailer .tf-bg{position:absolute;inset:0;background-size:cover;background-position:center 25%;filter:brightness(.52) saturate(1.05)}
.pg-trailer .tf-shade{position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 50%,transparent 22%,rgba(4,4,6,.8) 100%)}
.pg-trailer .tf-center{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.tf-play{display:flex;align-items:center;gap:14px;font-weight:700;font-size:15px;letter-spacing:.2em;color:#141008;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 62%,#a9852f);padding:16px 38px;border-radius:999px;
  box-shadow:0 14px 60px rgba(216,180,90,.45);transition:.2s}
.tf-play:hover{transform:scale(1.04)}
.tf-play em{font-style:normal;font-size:11px;letter-spacing:.14em;opacity:.75;border-left:1px solid rgba(0,0,0,.35);padding-left:14px}
.tf-play span{font-size:14px}
.tf-note{font-size:9.5px;letter-spacing:.3em;color:#cfc8b4;text-shadow:0 2px 10px #000}
.pg-trailer .tf-bottom{position:absolute;bottom:14px;left:0;right:0;z-index:4;text-align:center;font-size:10px;letter-spacing:.28em;color:#e8e2cf}

/* ===== SYNOPSIS ===== */
.pg-syn .syn-wrap{position:absolute;inset:58px 26px 22px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.pg-syn .syn{font-size:15px;line-height:1.8;color:#cfc8b4;font-weight:500}
.pg-syn .syn b{color:var(--ink)}
.pg-syn .gold{color:var(--gold-hi)}.pg-syn .toxic{color:var(--toxic)}
.pg-syn .pull{font-family:var(--font-d);font-weight:700;font-size:clamp(18px,3vw,24px);letter-spacing:.14em;color:var(--gold-hi);text-align:center;margin-top:6px;text-shadow:0 0 30px rgba(216,180,90,.3)}

/* ===== EPISODES ===== */
.pg-eps .ep-list{position:absolute;inset:52px 20px 16px;display:flex;flex-direction:column}
.ep-row{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.ep-no{font-family:var(--font-d);font-weight:700;color:var(--gold);min-width:24px;text-align:center;font-size:12px;padding-top:1px}
.ep-body b{display:block;font-size:12.5px;letter-spacing:.03em;color:var(--ink)}
.ep-body p{font-size:10.5px;color:#a8a189;margin-top:2px;line-height:1.4}
.pg-eps2 .eps-foot{position:absolute;bottom:14px;left:20px;right:20px;text-align:center;font-size:10px;letter-spacing:.2em;color:var(--muted)}

/* ===== MAKING OF ===== */
.pg-make .mk-grid{position:absolute;inset:52px 18px 178px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mk-card{position:relative;border-radius:4px;overflow:hidden;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.08)}
.mk-card figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;font-size:9.5px;letter-spacing:.18em;color:var(--gold-hi);background:linear-gradient(180deg,transparent,rgba(5,5,8,.92))}
.pg-make .fact-row{position:absolute;left:18px;right:18px;bottom:18px;height:156px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fact{border:1px solid rgba(216,180,90,.2);border-radius:4px;padding:12px 14px;background:rgba(216,180,90,.04);display:flex;flex-direction:column;justify-content:center}
.fact b{display:block;font-family:var(--font-d);font-weight:900;font-size:22px;color:var(--gold-hi)}
.fact span{font-size:10px;letter-spacing:.05em;color:#a8a189;display:block;margin-top:3px;line-height:1.4}

/* ===== AWARDS ===== */
.pg-aw .awards-list{position:absolute;inset:52px 18px 16px;display:flex;flex-direction:column;gap:10px}
.aw{display:flex;gap:14px;align-items:baseline;border:1px solid rgba(255,255,255,.08);border-radius:4px;padding:12px 14px;background:rgba(20,20,26,.5)}
.aw-year{font-family:var(--font-d);font-weight:700;color:var(--gold);font-size:14px;min-width:44px}
.aw b{font-size:12.5px;letter-spacing:.05em;color:var(--ink);display:block}
.aw p{font-size:11px;color:#a8a189;margin-top:3px;line-height:1.4}

/* ===== BACK COVER ===== */
.pg-back .bc-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.42) saturate(1.05)}
.pg-back .bc-shade{position:absolute;inset:0;background:radial-gradient(80% 80% at 50% 50%,rgba(8,4,4,.4),rgba(4,2,2,.92))}
.pg-back .bc-inner{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:0 8%;text-align:center}
.bc-title{font-family:var(--font-d);font-weight:900;font-size:clamp(40px,9vw,84px);letter-spacing:.26em;text-indent:.26em;
  background:linear-gradient(180deg,#f7e6b0,#d8b45a 55%,#8a6c28);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 50px rgba(216,180,90,.3))}
.bc-sub{font-size:12px;letter-spacing:.42em;color:#a8a189}
.bc-foot{position:absolute;bottom:20px;left:0;right:0;font-size:9px;letter-spacing:.24em;color:#7a7363}
.btn-gold{font-family:var(--font-u);font-weight:700;font-size:14px;letter-spacing:.2em;color:#141008;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 60%,#a9852f);padding:15px 34px;border-radius:3px;
  box-shadow:0 8px 34px rgba(216,180,90,.35),inset 0 1px 0 rgba(255,255,255,.5);transition:.2s}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 44px rgba(216,180,90,.5)}

/* ===== page-turn chrome ===== */
#brand{position:fixed;top:16px;left:24px;z-index:50;font-family:var(--font-d);font-weight:900;letter-spacing:.22em;color:var(--gold);font-size:18px}
#brand span{color:var(--muted);font-family:var(--font-u);font-weight:600;font-size:9px;letter-spacing:.3em;vertical-align:middle}
#pageNum{position:fixed;top:18px;right:24px;z-index:50;font-family:var(--font-u);font-weight:600;font-size:12px;letter-spacing:.28em;color:#cfc8b4}
#navL,#navR{position:fixed;top:50%;transform:translateY(-50%);z-index:50;width:54px;height:54px;border-radius:50%;
  font-size:30px;line-height:1;color:var(--gold-hi);background:rgba(12,12,18,.6);border:1px solid rgba(216,180,90,.3);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);transition:.2s}
#navL{left:18px}#navR{right:18px}
#navL:hover,#navR:hover{background:rgba(216,180,90,.18);transform:translateY(-50%) scale(1.08)}
#navL:disabled,#navR:disabled{opacity:.22;cursor:default}
#hint{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:50;font-size:9.5px;letter-spacing:.3em;color:#6d675a;white-space:nowrap}

/* ============ OFFICIAL TRAILER OVERLAY (YouTube embed) ============ */
#trailer{position:fixed;inset:0;z-index:70;background:#000;display:none}
#trailer.on{display:block}
#tstage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000}
#ytbox{position:relative;width:min(96vw,170vh);aspect-ratio:16/9;max-height:92vh;background:#000;box-shadow:0 30px 120px rgba(0,0,0,.85)}
#ytbox::before{content:"";position:absolute;inset:-60px;z-index:-1;background:radial-gradient(58% 58% at 50% 50%,#15110a,#000)}
#ytframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
#tctl{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:14px 22px 18px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.86))}
.tctl-row{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.2em;color:#cfc8b4}
.t-label{color:var(--gold);font-family:var(--font-d);font-weight:700;letter-spacing:.24em;font-size:12px;margin-right:4px}
#tctl button{font-size:11px;letter-spacing:.16em;color:#e8e2cf;padding:8px 14px;border:1px solid rgba(216,180,90,.35);
  border-radius:3px;transition:.2s;background:rgba(20,18,10,.4)}
#tctl button:hover{color:#141008;background:var(--gold)}
#tctl button.active{color:#141008;background:linear-gradient(180deg,var(--gold-hi),var(--gold));border-color:var(--gold)}
#tclose{margin-left:auto;border-color:rgba(255,255,255,.22)!important}
.tcue{flex:1;text-align:right;font-size:10px;letter-spacing:.26em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.001s!important}}