/* Единая тёмная тема по мотивам pck.fandom.com */
:root{
  color-scheme:dark;
  --bg:#000000; --page:#1e0c1b; --page-rgb:30,12,27; --page2:#40303d; --accent:#362834; --accent-h:#70536c;
  --border:#50434e; --text:#e6e6e6; --muted:#b9adb6; --faint:#8a7f88; --link:#ffc500; --link-h:#ffdc65;
  --alert:#ff4d5e; --ok:#7fd49b;
  --head:"Rubik", "Segoe UI", system-ui, sans-serif;
  --body:"Golos Text", "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0; color:var(--text); font:15px/1.55 var(--body);
  background:var(--bg) url("../img/site-background.jpg") center top / cover fixed no-repeat}
a{color:var(--link); text-decoration:none}
a:hover{color:var(--link-h); text-decoration:underline}
:focus-visible{outline:2px solid var(--link); outline-offset:2px; border-radius:3px}
h1,h2,h3{font-family:var(--head); text-wrap:balance; margin:0}

.topbar{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:rgba(var(--page-rgb),.97);
  border-bottom:1px solid var(--border); box-shadow:0 2px 10px rgba(0,0,0,.5)}
.topbar .in{max-width:1860px; margin:0 auto; padding-inline:clamp(16px,2.5vw,32px); display:flex; align-items:center; gap:18px; flex-wrap:wrap; min-height:52px}
.brand{font:700 18px var(--head); color:var(--text); white-space:nowrap}
.brand b{color:var(--link)}
nav.tabs{display:flex; gap:2px; flex-wrap:wrap}
@media (max-width:900px){
  .topbar .in{flex-wrap:nowrap; gap:10px}
  nav.tabs{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; min-width:0}
  nav.tabs::-webkit-scrollbar{display:none}
  nav.tabs button{white-space:nowrap; padding:14px 9px 11px}
  .brand{font-size:15px}
}
nav.tabs button{font:500 14px var(--head); color:var(--text); background:none; border:0; border-bottom:3px solid transparent; padding:14px 12px 11px; cursor:pointer}
nav.tabs button:hover{color:var(--link-h)}
nav.tabs button[aria-selected="true"]{color:var(--link); border-bottom-color:var(--link)}

.wrap{max-width:1860px; margin:0 auto; padding-inline:clamp(16px,2.5vw,32px); padding-block:22px 60px}
.page{background:rgba(var(--page-rgb),.94); border:1px solid var(--border); border-radius:4px; padding:clamp(16px,2.2vw,28px)}
header.hero{display:grid; gap:6px; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--border)}
.eyebrow{font:600 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--link)}
h1{font-size:clamp(30px,3.6vw,44px); font-weight:700; line-height:1.1}
.lede{color:var(--muted); max-width:78ch; margin:4px 0 0}
.stats{display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:12px; font:13px var(--mono); color:var(--muted)}
.stats b{color:var(--text); font-size:18px; margin-right:6px; font-variant-numeric:tabular-nums}
h2.sect{font-size:22px; font-weight:600; padding-bottom:6px; border-bottom:1px solid var(--border); margin:0 0 14px}
.note{font-size:13px; color:var(--faint)}

/* кнопки-фильтры */
.legend{display:flex; flex-wrap:wrap; gap:6px 8px; margin-bottom:12px}
.chip{display:inline-flex; align-items:center; gap:7px; font:500 13px var(--head); padding:5px 11px 5px 9px; border-radius:3px;
  border:1px solid var(--border); background:var(--accent); cursor:pointer; color:var(--text)}
.chip:hover{background:var(--accent-h)}
.chip i{width:10px; height:10px; border-radius:50%; background:var(--c)}
.chip[aria-pressed="false"]{opacity:.4}
.chip small{color:var(--faint); font:11px var(--mono)}

/* хронология */
.eras{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; margin-bottom:14px}
@media (max-width:900px){.eras{grid-template-columns:repeat(2,minmax(0,1fr))}}
.eras a{display:grid; gap:2px; background:var(--accent); border:1px solid var(--border); border-top:3px solid var(--link); border-radius:3px; padding:8px 10px; color:var(--text)}
.eras a:hover{background:var(--accent-h); text-decoration:none}
.eras b{font:600 14px var(--head)}
.eras small{font:11px var(--mono); color:var(--muted)}
.chron{position:relative}
.era-h{display:grid; grid-template-columns:150px 1fr; gap:24px; margin:26px 0 12px; scroll-margin-top:70px}
.era-h:first-child{margin-top:4px}
.era-h .span{font:600 13px var(--mono); color:var(--link); text-align:right; padding-top:6px}
.era-h h3{font-size:22px}
.era-h p{margin:4px 0 0; color:var(--muted); max-width:90ch}
.cev{display:grid; grid-template-columns:150px 28px minmax(0,1fr); gap:0 0; align-items:stretch}
.cev .when{font:600 12.5px var(--mono); color:var(--muted); text-align:right; padding:14px 12px 0 0}
.cev .rail{position:relative}
.cev .rail::before{content:""; position:absolute; left:13px; top:0; bottom:0; width:2px; background:var(--border)}
.cev .rail::after{content:""; position:absolute; left:6px; top:14px; width:12px; height:12px; border-radius:50%; background:var(--c); box-shadow:0 0 0 3px var(--page)}
.cev .card{background:var(--accent); border:1px solid var(--border); border-left:4px solid var(--c); border-radius:3px; padding:11px 14px; margin:6px 0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 18px}
.cev .card h4{margin:0; font:600 16px var(--head)}
.cev .card p{margin:0; font-size:14.5px; color:var(--text); grid-column:1}
.cev .side{grid-column:2; grid-row:1 / span 3; display:grid; gap:8px; justify-items:end; align-content:start}
.cev .avs{display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-end; max-width:240px}
.cev .avs .av{width:34px; height:34px; cursor:pointer}
.cev .epl{display:flex; flex-wrap:wrap; gap:4px 8px; grid-column:1}
.cev .epl span{font:500 12px var(--mono)}
.cev.dim{display:none}
@media (max-width:760px){
  .era-h{grid-template-columns:1fr; gap:4px}.era-h .span{text-align:left}
  .cev{grid-template-columns:22px minmax(0,1fr)}.cev .when{grid-column:2; text-align:left; padding:8px 0 0}
  .cev .rail{grid-row:1 / span 2}.cev .rail::before{left:9px}.cev .rail::after{left:3px}
  .cev .card{grid-template-columns:1fr}.cev .side{grid-column:1; grid-row:auto; justify-items:start}.cev .avs{justify-content:flex-start}
}

/* широкая карта ветвей */
.mapbox{background:rgba(0,0,0,.35); border:1px solid var(--border); border-radius:4px; overflow-x:auto; overflow-y:hidden}
.mapbox svg{display:block}
.lane-label{font:600 13px var(--head); fill:var(--text)}
.lane-sub{font:500 10.5px var(--mono); fill:var(--faint)}
.yr{font:600 12px var(--mono); fill:var(--link)}
.stn{cursor:pointer}
.stn circle.o{fill:var(--page); stroke-width:4}
.stn text{font:600 11px var(--mono); fill:var(--text); text-anchor:middle; pointer-events:none}
.stn:hover circle.o,.stn.sel circle.o{stroke-width:6}
.stn circle.halo{fill:none; stroke:var(--link); stroke-width:2.5; opacity:0}
.stn.sel circle.halo{opacity:1}
.stn.dim{opacity:.15}
.xlink{fill:none; stroke:var(--faint); stroke-width:1.4; stroke-dasharray:3 4; opacity:.6}
.xlink.hot{stroke:var(--link); opacity:1; stroke-width:2.2; stroke-dasharray:none}
.hint{font-size:13px; color:var(--faint); margin:8px 2px 16px}

/* карточка выпуска под картой */
.panel{background:var(--accent); border:1px solid var(--border); border-radius:4px; padding:20px; display:grid; grid-template-columns:minmax(260px,360px) minmax(0,1fr) minmax(0,1fr); gap:24px}
@media (max-width:1200px){.panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:760px){.panel{grid-template-columns:1fr}}
.panel .num{font:600 12px var(--mono); color:var(--muted)}
.panel h2{font-size:24px; margin:4px 0 8px}
.thumb{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:3px; border:1px solid var(--border); background:#000; max-width:100%}
.badge{display:inline-flex; align-items:center; gap:6px; font:600 12px var(--head); padding:3px 9px; border-radius:3px; background:color-mix(in srgb,var(--c) 22%,transparent); border:1px solid color-mix(in srgb,var(--c) 60%,transparent)}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.meta{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; font-size:13px; color:var(--muted); margin:8px 0 10px}
.sec{margin-top:14px}
.sec:first-child{margin-top:0}
.sec > h3{font:600 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--link); margin-bottom:8px}
.cast{list-style:none; padding:0; margin:0; display:grid; gap:7px; font-size:14px}
.cast li{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center}
.cast .who{display:grid; gap:1px}
.cast .actor{color:var(--muted); font-size:12.5px}
.fate{font:11.5px var(--mono); color:var(--faint)}
.fate.d{color:var(--alert)}
.av{width:38px; height:38px; border-radius:50%; object-fit:cover; object-position:top; border:2px solid var(--border); background:var(--page2); flex:none; display:grid; place-items:center; font:600 14px var(--head); color:var(--muted); overflow:hidden}
.events{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:14px}
.events li{display:grid; grid-template-columns:64px 1fr; gap:8px}
.events a{font:500 12px var(--mono); padding-top:2px}
.plain{list-style:none; margin:0; padding:0; display:grid; gap:5px; font-size:14px}
.linkto{cursor:pointer; color:var(--link)}
.linkto:hover{color:var(--link-h); text-decoration:underline}
.ytb{display:inline-flex; gap:6px; align-items:center; font:600 13px var(--head); color:#000; background:var(--link); padding:7px 13px; border-radius:3px}
.ytb:hover{background:var(--link-h); color:#000; text-decoration:none}

/* список выпусков */
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.toolbar input{font:inherit; color:var(--text); background:var(--page2); border:1px solid var(--border); border-radius:3px; padding:8px 12px; min-width:0; flex:1 1 260px; max-width:440px}
.eplist{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px}
.ep{background:var(--accent); border:1px solid var(--border); border-radius:4px; overflow:hidden; display:grid; align-content:start; cursor:pointer; border-top:4px solid var(--c)}
.ep:hover{background:var(--accent-h)}
.ep img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block; max-width:100%}
.ep .body{padding:12px 14px; display:grid; gap:6px}
.ep .top{display:flex; justify-content:space-between; gap:8px; font:600 12px var(--mono); color:var(--muted)}
.ep h3{font-size:16px; line-height:1.3}
.ep p{margin:0; font-size:13.5px; color:var(--muted)}

/* участники */
.actors{display:grid; grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); gap:14px}
@media (max-width:480px){.actors{grid-template-columns:1fr}}
.actor-card{background:var(--accent); border:1px solid var(--border); border-radius:4px; padding:14px 16px}
.actor-card header{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px; border-bottom:1px solid var(--border); padding-bottom:8px}
.actor-card h3{font-size:18px}
.actor-card .cnt{font:12px var(--mono); color:var(--muted); white-space:nowrap}
.pcs{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px}
.pc{display:grid; gap:4px; justify-items:center; text-align:center; font-size:13px; cursor:pointer; padding:6px 4px; border-radius:3px}
.pc:hover{background:var(--accent-h)}
.pc .portrait{width:84px; height:96px; border-radius:4px; object-fit:cover; object-position:top; border:1px solid var(--border); background:var(--page2); display:grid; place-items:center; font:600 26px var(--head); color:var(--faint); overflow:hidden}
.pc b{font-weight:600; line-height:1.2}
.pc small{color:var(--faint); font:11px var(--mono)}
.pc.dead .portrait{filter:grayscale(.85)}

/* каталог персонажей */
.filters{display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; margin-bottom:16px}
.filters input[type=search],.filters select{font:inherit; font-size:14px; color:var(--text); background:var(--page2); border:1px solid var(--border); border-radius:3px; padding:7px 10px; min-width:0}
.filters input[type=search]{flex:1 1 240px; max-width:380px}
.chk{display:inline-flex; gap:6px; align-items:center; font-size:14px; color:var(--muted)}
.dbgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px}
.dbc{background:var(--accent); border:1px solid var(--border); border-radius:4px; overflow:hidden; cursor:pointer; display:grid; align-content:start}
.dbc:hover{background:var(--accent-h); border-color:var(--link)}
.dbc .portrait{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top; background:var(--page2); display:grid; place-items:center; font:600 34px var(--head); color:var(--faint); max-width:100%}
.dbc.dead .portrait{filter:grayscale(.85)}
.dbc .b{padding:8px 10px 10px; display:grid; gap:3px}
.dbc b{font:600 14px/1.25 var(--head)}
.dbc small{font-size:12px; color:var(--muted)}
.tags{display:flex; flex-wrap:wrap; gap:4px; margin-top:2px}
.tag{font:600 10.5px var(--mono); padding:1px 6px; border-radius:2px; background:var(--page2); color:var(--muted); border:1px solid var(--border)}
.tag.pc{color:#000; background:var(--link); border-color:var(--link)}
.tag.d{color:var(--alert); border-color:var(--alert)}
dialog#chardlg{background:var(--page); color:var(--text); border:1px solid var(--border); border-radius:4px; padding:22px; width:min(760px,calc(100vw - 32px)); max-height:calc(100vh - 48px); overflow:auto; box-shadow:0 10px 40px rgba(0,0,0,.7)}
dialog#chardlg::backdrop{background:rgba(0,0,0,.7)}
dialog .x{position:sticky; top:0; float:right; background:var(--accent); color:var(--text); border:1px solid var(--border); border-radius:3px; width:32px; height:32px; font-size:20px; cursor:pointer; margin:-8px -8px 0 8px}
.gallery{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px}
.gallery figure{margin:0; flex:none; text-align:center}
.gallery img{width:84px; height:96px; object-fit:cover; object-position:top; border-radius:3px; border:1px solid var(--border); background:var(--page2)}
.gallery figcaption{font:11px var(--mono); color:var(--faint)}
.btn{display:inline-flex; font:600 13px var(--head); color:var(--text); background:var(--accent); border:1px solid var(--border); padding:6px 12px; border-radius:3px; cursor:pointer}
.btn:hover{background:var(--accent-h)}

/* граф связей */
.graphgrid{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:16px; align-items:start}
@media (max-width:1100px){.graphgrid{grid-template-columns:1fr}}
.graphbox{background:rgba(0,0,0,.4); border:1px solid var(--border); border-radius:4px; height:min(78vh,860px); min-height:480px; position:relative; overflow:hidden}
.graphbox svg{width:100%; height:100%; display:block; cursor:grab}
.gl{stroke-opacity:.75}
.gl.dim{stroke-opacity:.06}
.gn text{font:600 11px var(--head); fill:var(--text); text-anchor:middle; paint-order:stroke; stroke:#000; stroke-width:3px; pointer-events:none}
.gn circle.ring{stroke-width:3}
.gn{cursor:pointer}
.gn.dim{opacity:.18}
.gn.sel circle.ring{stroke:var(--link)!important; stroke-width:5}
.charcard{background:var(--accent); border:1px solid var(--border); border-radius:4px; padding:16px; position:sticky; top:70px; max-height:calc(100vh - 90px); overflow:auto}
@media (max-width:1100px){.charcard{position:static; max-height:none}}
.charcard .hd{display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:start}
.charcard .portrait{width:96px; height:110px; border-radius:4px; object-fit:cover; object-position:top; border:1px solid var(--border); background:var(--page2); display:grid; place-items:center; font:600 30px var(--head); color:var(--faint); overflow:hidden}
.charcard h3{font-size:19px}
.charcard p{font-size:14px; color:var(--muted); margin:8px 0 0}
.rel{display:grid; grid-template-columns:10px auto 1fr; gap:8px; align-items:baseline; font-size:13.5px}
.rel i{width:10px; height:10px; border-radius:2px; background:var(--c); align-self:center}
.infobox{display:grid; grid-template-columns:auto 1fr; gap:3px 12px; font-size:13px; margin-top:10px}
.infobox dt{color:var(--faint)}
.infobox dd{margin:0}

/* лор */
.lore{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:28px; align-items:start}
@media (max-width:900px){.lore{grid-template-columns:1fr}}
.prose{max-width:78ch}
.prose h2{font-size:24px; margin:28px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--border)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:18px; margin:18px 0 6px; color:var(--link-h)}
.prose p,.prose li{font-size:15.5px}
.prose ul{padding-left:22px}
.prose a[data-ep]{cursor:pointer; font:500 13px var(--mono)}
.toc{position:sticky; top:70px; font-size:14px; display:grid; gap:5px; background:var(--accent); border:1px solid var(--border); border-radius:4px; padding:14px 16px}
.toc b{font:600 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--link); margin-bottom:4px}
.toc a{color:var(--text)}
@media (max-width:900px){.toc{position:static}}

/* матрица */
.mx{overflow-x:auto; background:rgba(0,0,0,.35); border:1px solid var(--border); border-radius:4px}
.mx table{border-collapse:separate; border-spacing:0; font-size:12.5px}
.mx th,.mx td{padding:0; height:30px}
.mx thead th{font:600 10px var(--mono); color:var(--muted); writing-mode:vertical-rl; transform:rotate(180deg); padding:6px 0; height:44px; width:20px; cursor:pointer}
.mx tbody th{position:sticky; left:0; background:var(--page); text-align:left; font-weight:500; padding:0 12px 0 6px; white-space:nowrap; border-right:1px solid var(--border); z-index:1}
.mx tbody th .row{display:flex; gap:8px; align-items:center}
.mx tbody th .av{width:24px; height:24px; border-width:1px; font-size:10px}
.mx tbody th small{color:var(--faint); font-weight:400}
.mx td{width:20px; text-align:center}
.mx td span{display:inline-block; width:13px; height:13px; border-radius:3px; background:var(--c)}
.mx td span.gone{background:none; border:2px solid var(--alert)}
.mx tbody tr:nth-child(odd) td{background:rgba(255,255,255,.03)}
footer{margin-top:26px; padding-top:14px; border-top:1px solid var(--border); font-size:13px; color:var(--faint)}
@media (prefers-reduced-motion:no-preference){.stn circle.o{transition:stroke-width .15s}}

/* ===== страница выпуска ===== */
.crumbs{font:13px var(--mono); color:var(--faint); margin-bottom:14px}
.crumbs a{color:var(--muted)}
.ep-hero{display:grid; grid-template-columns:minmax(260px,480px) minmax(0,1fr); gap:24px; align-items:start; padding-bottom:20px; border-bottom:1px solid var(--border); margin-bottom:22px}
@media (max-width:820px){.ep-hero{grid-template-columns:1fr}}
.ep-hero h1{font-size:clamp(28px,3.4vw,42px); margin:6px 0 10px}
.ep-hero .lead{font-size:16px; line-height:1.6; max-width:80ch; margin:12px 0 0}
.ep-nav{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.ep-sec{margin-top:30px; scroll-margin-top:70px}
.ep-sec > h2{font-size:22px; font-weight:600; padding-bottom:6px; border-bottom:1px solid var(--border); margin:0 0 14px; display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.ep-sec > h2 small{font:500 12px var(--mono); color:var(--faint)}
.ep-toc{display:flex; flex-wrap:wrap; gap:6px; margin-top:16px}
.ep-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:24px}

/* таймлайн выпуска */
.scrub{position:sticky; top:calc(env(safe-area-inset-top,0px) + 53px); z-index:5; background:rgba(var(--page-rgb),.98); border:1px solid var(--border); border-radius:4px; padding:12px 14px 10px; box-shadow:0 6px 16px rgba(0,0,0,.45)}
.scrub .read{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:baseline; margin-bottom:10px; min-height:44px}
.scrub .now{font:600 20px var(--mono); color:var(--link); font-variant-numeric:tabular-nums}
.scrub .what{font-size:14px; color:var(--text); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.scrub .dur{font:12px var(--mono); color:var(--faint)}
.track{position:relative; height:46px}
.track .bar{position:absolute; left:0; right:0; top:20px; height:6px; border-radius:3px; background:var(--page2)}
.track .fill{position:absolute; left:0; top:20px; height:6px; border-radius:3px; background:var(--c)}
.track .mk{position:absolute; top:17px; width:4px; height:12px; margin-left:-2px; border-radius:2px; background:var(--muted); opacity:.75}
.track .mk.key{top:13px; height:20px; width:6px; margin-left:-3px; background:var(--c); opacity:1}
.track .mk.coin{top:4px; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:var(--link); opacity:1; box-shadow:0 0 0 2px var(--page)}
.track .mk.coin.spend{background:none; border:2px solid var(--link)}
.track .head{position:absolute; top:8px; width:3px; height:30px; margin-left:-1.5px; background:#fff; border-radius:2px; box-shadow:0 0 6px rgba(255,255,255,.6); pointer-events:none}
.track .tick{position:absolute; top:32px; font:10px var(--mono); color:var(--faint); transform:translateX(-50%)}
.track input[type=range]{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize}
.scrub .legendline{display:flex; flex-wrap:wrap; gap:4px 16px; font-size:12px; color:var(--faint); margin-top:4px}
.scrub .legendline i{display:inline-block; vertical-align:middle; margin-right:5px}
.scenes{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:0}
.scene{display:grid; grid-template-columns:78px 22px minmax(0,1fr); gap:0; align-items:stretch; scroll-margin-top:190px}
.scene .t{font:600 12.5px var(--mono); text-align:right; padding:12px 10px 0 0}
.scene .rail{position:relative}
.scene .rail::before{content:""; position:absolute; left:10px; top:0; bottom:0; width:2px; background:var(--border)}
.scene .rail::after{content:""; position:absolute; left:5px; top:15px; width:12px; height:12px; border-radius:50%; background:var(--page2); border:2px solid var(--muted)}
.scene .body{padding:8px 12px; margin:3px 0; border-radius:3px; font-size:14.5px; line-height:1.55; border:1px solid transparent}
.scene.key .rail::after{background:var(--c); border-color:var(--c)}
.scene.key .body{background:var(--accent); border-color:var(--border)}
.scene.key .body::before{content:"Ключевое событие"; display:block; font:600 10.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--link); margin-bottom:3px}
.scene.coin .rail::after{background:var(--link); border-color:var(--link); width:10px; height:10px; left:6px; top:14px}
.scene.coin .body{font-size:13.5px; color:var(--muted); padding-block:5px}
.scene.coin .body b{color:var(--link); font-weight:600}
.scene.on .body{border-color:var(--link); box-shadow:inset 3px 0 0 var(--link)}
.scene.on .rail::after{box-shadow:0 0 0 4px rgba(255,197,0,.25)}

/* монеты */
.coins-sum{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px}
.coin-card{display:grid; grid-template-columns:auto 1fr; gap:4px 10px; align-items:center; background:var(--accent); border:1px solid var(--border); border-radius:4px; padding:8px 12px; min-width:220px}
.coin-card .av{grid-row:span 2}
.coin-card b{font:600 14px var(--head)}
.coin-card span{font:12px var(--mono); color:var(--muted)}
.coin-card em{font-style:normal; color:var(--link)}

/* персонажи выпуска */
.people{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px}
.person{display:grid; grid-template-columns:84px minmax(0,1fr); gap:12px; background:var(--accent); border:1px solid var(--border); border-radius:4px; padding:10px}
.person .portrait{width:84px; height:100px; border-radius:3px; object-fit:cover; object-position:top; background:var(--page2); display:grid; place-items:center; font:600 26px var(--head); color:var(--faint); overflow:hidden; max-width:100%}
.person.dead .portrait{filter:grayscale(.85)}
.person h3{font-size:15.5px; line-height:1.25}
.person .sub{font-size:12.5px; color:var(--muted); margin-top:2px}
.person .other{display:flex; flex-wrap:wrap; gap:3px 8px; margin-top:6px; font:500 11.5px var(--mono)}
.person .other .lbl{color:var(--faint)}
.eplinks{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.eplinks li{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; background:var(--accent); border:1px solid var(--border); border-left:4px solid var(--c); border-radius:3px; padding:8px 12px}
.eplinks .dir{font:600 11px var(--mono); color:var(--faint); text-transform:uppercase; letter-spacing:.08em}
.quotes{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.quotes li{border-left:3px solid var(--link); padding:4px 0 4px 14px; font-size:15px; color:var(--text)}
.ep-foot-nav{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:30px; padding-top:14px; border-top:1px solid var(--border)}
a.tablink{display:inline-block; font:500 14px var(--head); color:var(--text); border-bottom:3px solid transparent; padding:14px 12px 11px; white-space:nowrap}
a.tablink:hover{color:var(--link-h); text-decoration:none}
@media (max-width:900px){a.tablink{padding:14px 9px 11px}}
a.brand:hover{text-decoration:none; color:var(--text)}
a.tablink.on{color:var(--link); border-bottom-color:var(--link)}
a.ref{color:var(--link-h); text-decoration:none; border-bottom:1px dotted rgba(255,197,0,.45)}
a.ref:hover{color:var(--link); border-bottom-style:solid; text-decoration:none}
.char-hero{grid-template-columns:minmax(180px,260px) minmax(0,1fr)}
@media (max-width:640px){.char-hero{grid-template-columns:1fr}}
.portrait.big{width:100%; max-width:260px; aspect-ratio:4/5; height:auto; border-radius:4px; object-fit:cover; object-position:top; border:1px solid var(--border); background:var(--page2); display:grid; place-items:center; font:600 54px var(--head); color:var(--faint)}
.char-hero .infobox{max-width:520px; margin-top:16px}
.mates{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px}
.mate{display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; background:var(--accent); border:1px solid var(--border); border-radius:3px; padding:6px 10px; color:var(--text); font-size:13.5px}
.mate:hover{background:var(--accent-h); text-decoration:none; color:var(--text)}
.mate small{font:11px var(--mono); color:var(--faint)}
.scene .body{position:relative; padding-right:34px}
.share{position:absolute; top:6px; right:6px; background:none; border:1px solid transparent; border-radius:3px; cursor:pointer; font-size:13px; opacity:0; color:var(--muted); padding:2px 5px}
.scene:hover .share,.share:focus-visible{opacity:1; border-color:var(--border)}
@media (hover:none){.share{opacity:.7}}
.cev .card{position:relative}
.cev .card .share{top:8px; right:auto; left:auto; position:static; opacity:.55; justify-self:end}
.cev:hover .card .share{opacity:1}
a.pc{color:var(--text)}
a.pc:hover{text-decoration:none}
.cev.hl .card{border-color:var(--link); box-shadow:0 0 0 2px rgba(255,197,0,.35)}
a.dbc{color:var(--text)}
a.dbc:hover{text-decoration:none}

/* телефоны */
@media (max-width:640px){
  nav.tabs{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent); padding-right:24px; scroll-behavior:smooth}
  header.hero{padding-bottom:12px; margin-bottom:12px}
  header.hero .lede{display:none}
  .stats{gap:2px 16px; margin-top:8px; font-size:11px}
  .stats b{font-size:15px; margin-right:4px}
  .dbgrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .dbc .portrait{aspect-ratio:1/1}
  .dbc .b{padding:7px 8px 9px}
  .filters{gap:8px}
  .filters input[type=search]{flex:1 1 100%; max-width:none}
  .filters select{flex:1 1 calc(50% - 4px)}
  .filters input[type=search],.filters select{font-size:16px; padding:9px 10px}
  .btn{min-height:40px; align-items:center}
  dialog#chardlg{padding:16px; width:calc(100vw - 16px); max-height:calc(100vh - 16px)}
  footer{font-size:12px}
}

/* характеристики */
.statgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px; max-width:760px}
.stat{background:var(--accent); border:1px solid var(--border); border-radius:4px; padding:8px 10px; text-align:center}
.stat b{display:block; font:700 24px var(--mono); color:var(--text); font-variant-numeric:tabular-nums; line-height:1.2}
.stat span{font:500 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.stat.main b{color:var(--link)}
.statgrid.small{grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:10px 0}
.statgrid.small .stat{padding:5px 4px}
.statgrid.small .stat b{font-size:17px}
.statgrid.small .stat span{font-size:9.5px; letter-spacing:0}

/* представления под спойлером */
details.spoil{background:var(--accent); border:1px solid var(--border); border-radius:4px; margin-bottom:8px}
details.spoil > summary{cursor:pointer; padding:9px 14px; list-style:none; display:flex; gap:8px; flex-wrap:wrap; align-items:baseline}
details.spoil > summary::-webkit-details-marker{display:none}
details.spoil > summary::before{content:"▸ Показать"; font:600 11px var(--mono); color:var(--link); text-transform:uppercase; letter-spacing:.06em; min-width:92px}
details.spoil[open] > summary::before{content:"▾ Скрыть"}
details.spoil blockquote{margin:0; padding:2px 16px 10px 20px; border-left:3px solid var(--link); margin-inline:14px; font-size:14.5px; line-height:1.65; color:var(--text); overflow-wrap:anywhere}
details.spoil > p.note{margin:0; padding:0 14px 10px 34px}

/* монеты участников */
.coinline{font:13px var(--mono); color:var(--muted); margin:-2px 0 10px}
.coinline .ce{color:var(--ok); font-weight:700; font-size:15px}
.coinline .cs{color:var(--alert); font-weight:700; font-size:15px; margin-left:8px}
.cointables{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; align-items:start}
table.coins{border-collapse:collapse; width:100%; font-size:14px}
table.coins th{font:600 11px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--faint); text-align:left; padding:6px 8px; border-bottom:1px solid var(--border)}
table.coins td{padding:6px 8px; border-bottom:1px solid rgba(80,67,78,.5)}
table.coins .num{text-align:right; font-family:var(--mono); white-space:nowrap}
table.coins td.num:nth-child(2){color:var(--ok)}
table.coins td.num:nth-child(3){color:var(--alert)}

/* карты */
.mapwrap{overflow-x:auto; border:1px solid var(--border); border-radius:4px; background:#000}
.imap{position:relative; min-width:900px; line-height:0}
.imap > img{width:100%; height:auto; display:block}
.hs{position:absolute; transform:translate(-50%,-50%); line-height:1.2; text-decoration:none}
.hs i{display:block; width:16px; height:16px; border-radius:50%; background:var(--link); border:2px solid #000; box-shadow:0 0 0 2px rgba(255,197,0,.55); transition:transform .12s}
.hs.region i{width:auto; height:auto; border-radius:3px; background:rgba(30,12,27,.82); color:var(--link); border:1px dashed var(--link); box-shadow:none; font:600 11px var(--mono); padding:2px 6px; white-space:nowrap}
.hs .lb{position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%); white-space:nowrap; background:rgba(30,12,27,.95); color:var(--text); border:1px solid var(--link); border-radius:3px; font:600 12px var(--head); padding:3px 8px; opacity:0; pointer-events:none; transition:opacity .12s; z-index:3}
.hs:hover,.hs:focus-visible{z-index:5; text-decoration:none}
.hs:hover i,.hs:focus-visible i{transform:scale(1.35)}
.hs:hover .lb,.hs:focus-visible .lb{opacity:1}
.hs.region .lb{display:none}
.hs.nolink{cursor:default}
.hs.nolink i{background:var(--muted); box-shadow:none}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.chips a{font:500 12.5px var(--head); background:var(--accent); border:1px solid var(--border); border-radius:99px; padding:3px 11px; color:var(--text)}
.chips a:hover{border-color:var(--link); text-decoration:none; color:var(--link)}
.mapgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px}
.mapcard{background:var(--accent); border:1px solid var(--border); border-radius:4px; overflow:hidden; display:flex; flex-direction:column; padding:0; text-align:left; color:var(--text); cursor:pointer; font:inherit}
.mapcard:hover{border-color:var(--link)}
.mapcard img{width:100%; aspect-ratio:16/10; object-fit:cover; background:#000; display:block}
.mapcard .t{padding:8px 12px 10px}
.mapcard b{display:block; font:600 14px var(--head)}
.mapcard small{display:block; color:var(--muted); font-size:12.5px; line-height:1.4; margin-top:2px}
dialog#mapdlg{background:var(--page); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:14px; width:min(1500px,96vw); max-height:96vh}
dialog#mapdlg::backdrop{background:rgba(0,0,0,.85)}
dialog#mapdlg img{max-width:100%; max-height:76vh; display:block; margin:0 auto; background:#000}
dialog#mapdlg h3{font-size:18px; margin:0 0 4px}
dialog#mapdlg .x{float:right}
.minimap{position:relative; max-width:560px; line-height:0; border:1px solid var(--border); border-radius:4px; overflow:hidden}
.minimap img{width:100%; display:block}
.minimap .pin{position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:var(--alert); border:2px solid #fff; box-shadow:0 0 0 4px rgba(255,77,94,.4)}

/* места и артефакты */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px}
a.card2{display:flex; gap:12px; background:var(--accent); border:1px solid var(--border); border-radius:4px; padding:10px 12px; color:var(--text); align-items:flex-start}
a.card2:hover{border-color:var(--link); text-decoration:none}
a.card2 img,a.card2 .ph{width:64px; height:64px; flex:none; object-fit:cover; border-radius:3px; background:var(--page2); border:1px solid var(--border); display:grid; place-items:center; font:700 20px var(--head); color:var(--faint)}
a.card2 b{display:block; font:600 15px var(--head)}
a.card2 small{display:block; color:var(--muted); font-size:12.5px; line-height:1.4}
.pic{max-width:320px; width:100%; border-radius:4px; border:1px solid var(--border); background:#000}
.tag.ok{color:var(--ok); border-color:var(--ok)}
.hist{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.hist li{padding:8px 12px; background:var(--accent); border:1px solid var(--border); border-left:3px solid var(--link); border-radius:3px}

details.spoil blockquote p{margin:0 0 .7em}
details.spoil blockquote p:last-child{margin:0}