:root {
  --bg-deepest:#05070d;
  --bg-deep:#080b14;
  --bg-surface:#0b1020;
  --bg-card:rgba(15,21,38,.78);
  --bg-card-hover:rgba(22,29,49,.94);
  --bg-elevated:#172039;
  --text:#f0f2f5;
  --muted:#929caf;
  --dim:#667085;
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.16);
  --accent:#ed4935;
  --accent-rgb:237,73,53;
  --accent-soft:rgba(237,73,53,.12);
  --accent-glow:rgba(237,73,53,.34);
  --gold:#d4a249;
  --cyan:#4ecad3;
  --violet:#8c7cf0;
  --green:#67bd8a;
  --display:'Rajdhani',sans-serif;
  --body:'Inter',sans-serif;
  --max:1280px;
  --nav-primary-h:68px;
  --nav-h:68px;
}

body[data-story="patchwork"] { --accent:#4bc6d4; --accent-rgb:75,198,212; --accent-soft:rgba(75,198,212,.12); --accent-glow:rgba(75,198,212,.32); }
body[data-story="original"] { --accent:#f4c542; --accent-rgb:244,197,66; --accent-soft:rgba(244,197,66,.13); --accent-glow:rgba(244,197,66,.36); }
body[data-story="film"] { --accent:#79cf63; --accent-rgb:121,207,99; --accent-soft:rgba(121,207,99,.14); --accent-glow:rgba(121,207,99,.4); }

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:var(--nav-h); }
body { margin:0; color:var(--text); background:var(--bg-deepest); font-family:var(--body); font-size:16px; overflow-x:hidden; }
body.modal-open { overflow:hidden; }
button,input { font:inherit; }
button { border:0; cursor:pointer; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }
em { color:var(--accent); font-style:normal; }
::selection { color:#fff; background:var(--accent); }
::-webkit-scrollbar { width:7px; height:7px; }
::-webkit-scrollbar-track { background:#090c14; }
::-webkit-scrollbar-thumb { background:var(--accent); border-radius:4px; }

.loading-screen { position:fixed; inset:0; z-index:10000; display:grid; place-content:center; justify-items:center; gap:20px; color:var(--text); background:#030406; transition:opacity .5s,visibility .5s; }
.loading-screen.hidden { opacity:0; visibility:hidden; }
.loader-mark { display:grid; place-items:center; width:64px; height:64px; color:var(--accent); border:0; transform:none; font:800 17px var(--display); box-shadow:0 0 30px var(--accent-glow); }
.loader-mark img { display:block; width:100%; height:100%; object-fit:contain; }
.loading-screen p { margin:0; font:700 12px var(--display); letter-spacing:5px; }
.loading-screen>span { width:240px; height:2px; overflow:hidden; background:var(--border); }
.loading-screen i { display:block; width:100%; height:100%; background:var(--accent); animation:load 1s ease both; transform-origin:left; }
@keyframes load { from{transform:scaleX(0)} to{transform:scaleX(1)} }

.hero { position:relative; min-height:760px; height:100vh; max-height:980px; overflow:hidden; background:#060810; }
.hero-media,.hero-media img,.hero-media-grid,.hero-media-wash { position:absolute; inset:0; width:100%; height:100%; }
.hero-media { background:#060810; }
.hero-media img { object-fit:cover; object-position:center 48%; filter:saturate(.82) contrast(1.08); transform:scale(1.025); transform-origin:center center; transition:opacity .35s ease; }
.hero-media-wash { pointer-events:none; }
body[data-story="original"] .hero-media img { object-position:center 44%; transform:translateX(0) scale(1.08) scaleX(-1); }
body[data-story="patchwork"] .hero-media img { object-position:center 54%; transform:translateX(4%) scale(1.08); }
body[data-story="film"] .hero-media img { object-position:center 48%; transform:translateX(7%) scale(1.045); }
.hero-media-grid { opacity:.13; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to right,black,transparent 78%); }
.hero-media-wash { background:linear-gradient(90deg,rgba(5,7,13,.99) 0%,rgba(5,7,13,.94) 30%,rgba(5,7,13,.5) 55%,rgba(5,7,13,.16) 80%,rgba(5,7,13,.38) 100%),linear-gradient(0deg,var(--bg-deepest) 0%,transparent 35%,rgba(5,7,13,.25) 100%); }
body[data-story="film"] .hero-media-wash { background:linear-gradient(90deg,rgba(4,6,12,.97),rgba(4,6,12,.76) 43%,rgba(4,6,12,.2) 78%),linear-gradient(0deg,var(--bg-deepest),transparent 42%); }

.main-nav { position:fixed; inset:0 0 auto; z-index:1000; min-height:var(--nav-h); display:grid; grid-template-columns:minmax(260px,1fr) auto minmax(0,1fr); grid-template-rows:var(--nav-primary-h); align-items:center; padding:0 40px; background:rgba(7,11,24,.9); border-bottom:1px solid rgba(var(--accent-rgb),.18); backdrop-filter:blur(24px) saturate(180%); box-shadow:0 10px 40px rgba(0,0,0,.28); transition:background .35s ease,box-shadow .35s ease; }
.main-nav.scrolled { background:rgba(5,7,15,.98); box-shadow:0 10px 40px rgba(0,0,0,.6); }
.nav-hub-link-center { grid-column:2; grid-row:1; display:flex; align-items:center; justify-content:center; width:38px; height:38px; }
.nav-hub-icon { display:block; width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 0 10px var(--accent-glow)) brightness(1.15) saturate(1.15); transition:transform .3s ease,filter .3s ease; }
.nav-hub-icon:hover { transform:scale(1.06); filter:drop-shadow(0 0 15px var(--accent-glow)) brightness(1.3) saturate(1.3); }
.nav-left-cluster { display:flex; align-items:center; gap:18px; grid-column:1; grid-row:1; justify-self:start; min-width:0; }
.brand { display:flex; align-items:center; gap:11px; flex:0 0 auto; min-width:max-content; }
.site-switcher { position:relative; z-index:1105; }
.site-switcher-toggle { padding:0; color:inherit; background:transparent; border:0; cursor:pointer; }
.site-switcher-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:6px; border-radius:5px; }
.site-switcher-caret { width:8px; height:8px; margin:0 0 3px 2px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; opacity:.72; transform:rotate(45deg); transition:transform .22s ease,color .22s ease; }
.site-switcher.open .site-switcher-caret { color:var(--accent); opacity:1; transform:rotate(-135deg) translate(-1px,-1px); }
.site-switcher-menu { position:absolute; top:calc(100% + 12px); left:0; z-index:1106; display:grid; min-width:300px; max-width:min(340px,calc(100vw - 32px)); gap:3px; padding:10px; overflow:hidden; background:rgba(5,7,15,.98); border:1px solid color-mix(in srgb,var(--accent) 55%,transparent); border-radius:8px; box-shadow:0 18px 44px rgba(0,0,0,.55); backdrop-filter:blur(18px); }
.site-switcher-menu[hidden] { display:none; }
.site-switcher-link { position:relative; display:flex; align-items:center; gap:14px; min-height:58px; padding:12px 14px 12px 16px; overflow:hidden; color:var(--text); border-radius:6px; text-decoration:none; transition:background .22s ease,transform .22s ease; }
.site-switcher-link::before { content:''; position:absolute; inset:12px auto 12px 0; width:2px; background:var(--switcher-accent,var(--accent)); opacity:.45; }
.site-switcher-link:hover,.site-switcher-link:focus-visible { background:color-mix(in srgb,var(--switcher-accent,var(--accent)) 13%,transparent); outline:0; transform:translateX(3px); }
.site-switcher-link:hover::before,.site-switcher-link:focus-visible::before { opacity:1; box-shadow:0 0 14px var(--switcher-glow,var(--accent-glow)); }
.site-switcher-link-icon { display:grid; width:34px; height:34px; flex:0 0 34px; place-items:center; }
.site-switcher-link-icon img { display:block; width:100%; height:100%; object-fit:contain; }
.site-switcher-link-label { display:grid; min-width:0; gap:4px; text-align:left; }
.site-switcher-link-kicker { color:var(--dim); font:700 8px var(--display); letter-spacing:1.8px; line-height:1; text-transform:uppercase; }
.site-switcher-link-accent { overflow:hidden; color:var(--switcher-accent,var(--text)); font:700 14px var(--display); letter-spacing:1px; line-height:1.05; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.ow-link { --switcher-accent:#d28cff; --switcher-glow:rgba(187,41,255,.55); }
.mr-link { --switcher-accent:#ff6b8b; --switcher-glow:rgba(255,107,139,.55); }
.nc-link { --switcher-accent:#fcee0a; --switcher-glow:rgba(252,238,10,.55); }
.ns-link { --switcher-accent:#ffb15e; --switcher-glow:rgba(249,115,22,.5); }
.dl-link { --switcher-accent:#d8a84d; --switcher-glow:rgba(216,168,77,.5); }
.wc-link { --switcher-accent:#22d3ee; --switcher-glow:rgba(34,211,238,.5); }
.lol-link { --switcher-accent:#c8aa6e; --switcher-glow:rgba(200,170,110,.45); }
.aot-link { --switcher-accent:#ff9a3c; --switcher-glow:rgba(255,154,60,.55); }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto; color:#fff; background:transparent; font:800 14px var(--display); letter-spacing:1px; filter:drop-shadow(0 0 10px var(--accent-glow)); }
.brand-mark img { display:block; width:100%; height:100%; object-fit:contain; }
.brand .nav-logo-text { display:block; color:var(--text); font:700 15px/1 var(--display); letter-spacing:2px; white-space:nowrap; }
.nav-logo-text .accent,.footer-logo .accent { color:var(--accent); text-shadow:0 0 10px var(--accent-glow); }
.brand strong { font:800 19px/1 var(--display); letter-spacing:2px; }
.brand small { margin-top:4px; color:var(--accent); font:700 8px var(--display); letter-spacing:3px; }

.continuity-control { display:flex; align-items:center; justify-content:center; gap:10px; padding:5px 6px; border:1px solid rgba(var(--accent-rgb),.3); border-radius:7px; background:rgba(var(--accent-rgb),.05); }
.nav-continuity-control { align-self:center; justify-self:auto; margin:0; border-width:1px; }
.continuity-label { padding-left:8px; color:var(--accent); font:700 8px var(--display); letter-spacing:2px; }
.continuity-tabs { display:flex; gap:3px; }
.continuity-tabs button { min-width:48px; padding:9px 11px; color:var(--muted); background:transparent; border-radius:5px; font:700 11px var(--display); letter-spacing:1px; transition:.2s ease; }
.continuity-tabs button:hover,.continuity-tabs button.active { color:#fff; background:var(--accent); box-shadow:0 0 16px var(--accent-glow); }
.nav-links { display:flex; align-items:center; justify-content:flex-end; gap:18px; grid-column:3; grid-row:1; justify-self:end; min-width:0; }
.nav-link { position:relative; padding:5px 0; color:var(--muted); opacity:.84; font:600 10px var(--display); letter-spacing:1.5px; text-transform:uppercase; transition:color .3s ease,opacity .3s ease,text-shadow .3s ease; white-space:nowrap; }
.nav-link::after { content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--accent); box-shadow:0 0 8px var(--accent-glow); transition:width .3s cubic-bezier(.4,0,.2,1); }
.nav-link:hover,.nav-link.active { color:var(--accent); opacity:1; text-shadow:0 0 10px var(--accent-glow); }
.nav-link:hover::after,.nav-link.active::after { width:100%; }
.nav-kofi-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:6px 12px; color:var(--accent); border:1px solid rgba(var(--accent-rgb),.45); border-radius:4px; font:600 10px var(--display); letter-spacing:1.5px; text-transform:uppercase; text-shadow:0 0 10px var(--accent-glow); transition:all .3s ease; transform:translateY(-1px); white-space:nowrap; }
.nav-kofi-btn:hover { color:#fff; background:var(--accent); border-color:var(--accent); transform:translateY(-2px); box-shadow:0 0 20px var(--accent-glow); }
.menu-toggle { display:none; grid-column:3; grid-row:1; justify-self:end; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:48px; height:48px; padding:0; background:transparent; border:0; }
.menu-toggle span { display:block; width:30px; height:2px; margin:0; border-radius:2px; background:var(--text); transition:all .3s ease; }

.hero-content { position:relative; z-index:2; width:min(var(--max),calc(100% - 80px)); margin:0 auto; padding-top:clamp(184px,24vh,250px); }
.hero-kicker { display:flex; align-items:center; gap:14px; margin:0 0 24px; color:var(--accent); font:700 11px var(--display); letter-spacing:4px; }
.hero-kicker::before { content:''; width:32px; height:1px; background:var(--accent); }
.hero h1 { max-width:800px; margin:0; font:800 clamp(4rem,7vw,7rem)/.84 var(--display); letter-spacing:-2px; text-transform:uppercase; }
.hero h1 em { display:inline-block; }
.hero-lede { max-width:650px; margin:30px 0 28px; color:#b1bac9; font-size:1.05rem; line-height:1.72; }
.hero-stats { display:flex; margin:0 0 34px; }
.hero-stat { min-width:124px; padding:0 24px; border-left:1px solid var(--border); }
.hero-stat:first-child { padding-left:0; border-left:0; }
.hero-stat strong { display:block; color:var(--accent); font:800 2.15rem/1 var(--display); }
.hero-stat span { color:var(--dim); font:700 8px var(--display); letter-spacing:2.4px; }
.hero-cta { display:inline-flex; align-items:center; gap:30px; padding:15px 30px; color:#fff; background:var(--accent); clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%); font:700 12px var(--display); letter-spacing:2px; box-shadow:0 0 28px var(--accent-glow); transition:.25s; }
.hero-cta:hover { transform:translateY(-4px); box-shadow:0 12px 40px var(--accent-glow); }
.hero-file { position:absolute; z-index:2; right:38px; bottom:34px; display:grid; justify-items:end; color:var(--dim); font:700 8px var(--display); letter-spacing:2px; }
.hero-file strong { margin-top:7px; color:var(--text); font-size:12px; }
.scroll-indicator { position:absolute; z-index:3; left:50%; bottom:30px; width:40px; height:40px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg); opacity:.55; animation:bob 2s ease-in-out infinite; }
@keyframes bob { 50%{transform:rotate(45deg) translate(8px,8px)} }

.codex-section { padding:100px 24px; }
#factions-section,#characters-section { scroll-margin-top:92px; }
.map-section { background:var(--bg-deep); }
.faction-section,.timeline-section { background:var(--bg-deepest); }
.character-section { background:#070a12; }
.section-header { max-width:var(--max); margin:0 auto 48px; text-align:center; }
.section-badge { display:inline-block; margin:0 0 16px; padding:7px 17px; color:var(--accent); background:var(--accent-soft); border:1px solid rgba(var(--accent-rgb),.34); border-radius:5px; font:700 10px var(--display); letter-spacing:4px; }
.section-header h2 { margin:0 0 14px; font:800 clamp(2.2rem,5vw,3.4rem)/1 var(--display); letter-spacing:1px; text-transform:uppercase; }
.section-header>p:last-child { max-width:720px; margin:0 auto; color:var(--muted); line-height:1.65; }

.explorer-section { background:linear-gradient(180deg,var(--bg-deep),var(--bg-deepest)); }
.explorer-panel { max-width:var(--max); margin:0 auto; scroll-margin-top:92px; animation:explorer-in .28s ease both; }
.explorer-panel + .explorer-panel { margin-top:112px; padding-top:72px; border-top:1px solid rgba(var(--accent-rgb),.2); }
.explorer-panel:not(.active) { animation:none; }
.explorer-panel-header { margin:0 auto 24px; padding-bottom:18px; border-bottom:1px solid var(--border); text-align:left; }
.explorer-panel-header .section-badge { margin-bottom:12px; }
.explorer-panel-header h3 { margin:0 0 8px; font:800 clamp(1.55rem,3vw,2.25rem)/1 var(--display); letter-spacing:1px; text-transform:uppercase; }
.explorer-panel-header>p:last-child { max-width:760px; margin:0; color:var(--muted); font-size:.9rem; line-height:1.65; }
.explorer-panel.mcu-network-section,.explorer-panel.universe-section { background:transparent; }
.explorer-panel .map-container,.explorer-panel .mcu-network-controls,.explorer-panel .mcu-network-frame,.explorer-panel .mcu-network-legend,.explorer-panel .universes-grid { max-width:none; }
@keyframes explorer-in { from{opacity:.25;transform:translateY(8px)} to{opacity:1;transform:none} }

.filter-row { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
.filter-row button,.filter-row a { display:inline-flex; align-items:center; justify-content:center; padding:10px 20px; color:var(--dim); background:transparent; border:1px solid var(--border); border-radius:7px; font:700 10px var(--display); letter-spacing:1.7px; text-transform:uppercase; transition:.2s; }
.filter-row button:hover,.filter-row button.active,.filter-row a:hover,.filter-row a.active { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 12px rgba(var(--accent-rgb),.14); }
.map-filters { max-width:var(--max); margin:0 auto 30px; }

.map-container { position:relative; max-width:var(--max); min-height:560px; margin:0 auto; overflow:hidden; background:#060914; border:1px solid rgba(var(--accent-rgb),.36); border-radius:8px; box-shadow:0 22px 65px rgba(0,0,0,.28); }
.map-container.original { min-height:0; }
.map-stage { position:relative; width:100%; min-height:620px; aspect-ratio:1000/769; overflow:hidden; }
.map-stage.original { min-height:0; aspect-ratio:1672/941; }
.map-stage.film { aspect-ratio:1661/947; min-height:560px; }
.map-art { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; }
.map-art-wash { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(4,7,12,.1),transparent 55%,rgba(4,7,12,.76)),radial-gradient(circle at center,transparent 45%,rgba(4,7,12,.38)); }
.map-pins { position:absolute; inset:0; z-index:5; }
.map-callouts { position:absolute; inset:0; z-index:4; display:none; overflow:visible; pointer-events:none; }
.map-callouts.patchwork { display:block; }
.map-callout-line { fill:none; stroke:var(--callout-color,var(--accent)); stroke-width:.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1.15 .9; opacity:0; filter:drop-shadow(0 0 3px color-mix(in srgb,var(--callout-color,var(--accent)) 80%,transparent)); animation:map-callout-flow .9s linear infinite; }
.map-callout-dot { fill:#070a12; stroke:var(--callout-color,var(--accent)); stroke-width:.22; opacity:0; filter:drop-shadow(0 0 3px color-mix(in srgb,var(--callout-color,var(--accent)) 80%,transparent)); }
.map-callouts.has-callout .map-callout-line,.map-callouts.has-callout .map-callout-dot { opacity:1; }
@keyframes map-callout-flow { to { stroke-dashoffset:-4.1; } }
.map-pin { position:absolute; display:grid; place-items:center; width:26px; height:26px; padding:0; color:#090b12; background:var(--pin,var(--accent)); border:2px solid rgba(255,255,255,.65); border-radius:50%; box-shadow:0 0 0 4px rgba(6,9,15,.48),0 0 18px color-mix(in srgb,var(--pin) 65%,transparent); transform:translate(-50%,-50%); font:800 8px var(--display); transition:.2s; }
.map-pin:hover,.map-pin.active { z-index:5; color:#fff; background:#070a12; border-color:var(--pin); transform:translate(-50%,-50%) scale(1.35); }
.map-pin span { pointer-events:none; }
.map-corner { position:absolute; top:20px; color:var(--muted); font:700 8px var(--display); letter-spacing:2px; }
.map-corner.top-left { left:22px; }
.map-corner.top-right { right:22px; }
/* ---------- MCU NETWORK WEB ---------- */
.mcu-network-section { background:radial-gradient(circle at 50% 42%,rgba(var(--accent-rgb),.08),transparent 38%),var(--bg-deepest); }
.mcu-network-controls { display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:var(--max); margin:0 auto 18px; }
.mcu-network-controls .filter-row { justify-content:flex-start; }
.mcu-network-zoom { display:flex; gap:5px; }
.mcu-network-zoom button { width:34px; height:34px; display:grid; place-items:center; color:var(--muted); background:rgba(255,255,255,.025); border:1px solid var(--border); border-radius:7px; transition:.2s; }
.mcu-network-zoom button:hover,.mcu-network-zoom button:focus-visible { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); outline:0; }
.mcu-network-frame { position:relative; max-width:var(--max); min-height:560px; margin:0 auto; overflow:hidden; background:linear-gradient(145deg,rgba(6,10,20,.98),rgba(10,15,28,.96)); border:1px solid rgba(var(--accent-rgb),.35); border-radius:8px; box-shadow:0 22px 65px rgba(0,0,0,.32); }
.mcu-network-frame::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.35; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:58px 58px; mask-image:radial-gradient(circle at center,#000,transparent 82%); }
#mcu-network-graph { position:relative; z-index:1; display:block; width:100%; height:560px; overflow:visible; touch-action:none; user-select:none; }
#mcu-network-graph:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.mcu-network-field { fill:url(#mcu-network-field); opacity:.85; }
.mcu-network-edge { pointer-events:none; transition:opacity .25s; }
.mcu-network-edge line { stroke:rgba(177,194,221,.28); stroke-width:1.4; stroke-dasharray:4 8; }
.mcu-network-edge text { opacity:0; fill:var(--muted); font:700 9px var(--display); letter-spacing:1.4px; text-anchor:middle; transition:opacity .2s; }
.mcu-network-edge.is-active line { stroke:var(--accent); stroke-width:2.8; stroke-dasharray:10 8; filter:url(#mcu-network-glow); }
.mcu-network-edge.is-active text { opacity:1; fill:var(--accent); }
.mcu-network-edge.is-dimmed { opacity:.08; }
.mcu-network-edge.is-hidden { display:none; }
.mcu-network-node { cursor:pointer; outline:0; transition:opacity .25s; }
.mcu-network-node.bridge { cursor:default; }
.mcu-network-node:focus-visible .mcu-network-node-core,.mcu-network-node.is-active .mcu-network-node-core { stroke:#fff; stroke-width:3; filter:url(#mcu-network-glow); }
.mcu-network-node.is-connected .mcu-network-node-core { filter:url(#mcu-network-glow); }
.mcu-network-node.is-dimmed { opacity:.16; }
.mcu-network-node.is-hidden { display:none; }
.mcu-network-halo { fill:var(--network-color); opacity:.08; transition:opacity .2s,r .2s; }
.mcu-network-node.is-active .mcu-network-halo,.mcu-network-node.is-connected .mcu-network-halo { opacity:.22; }
.mcu-network-orbit { fill:none; stroke:var(--network-color); stroke-width:1; stroke-dasharray:2 7; opacity:.7; }
.mcu-network-node-core { fill:#0b1020; stroke:var(--network-color); stroke-width:1.5; }
.mcu-network-node.faction .mcu-network-node-core { fill:rgba(11,16,32,.96); }
.mcu-network-node.bridge .mcu-network-node-core { fill:rgba(255,122,26,.12); stroke-dasharray:4 5; }
.mcu-network-icon { color:var(--network-color); pointer-events:none; }
.mcu-network-sigil { width:100%; height:100%; overflow:visible; color:var(--network-color); }
.mcu-network-node-code,.mcu-network-node-label,.mcu-network-node-sub { text-anchor:middle; pointer-events:none; }
.mcu-network-node-code { fill:var(--network-color); font:700 8px var(--display); letter-spacing:1.7px; }
.mcu-network-node-label { fill:var(--text); font:800 15px var(--display); letter-spacing:1px; }
.mcu-network-node-sub { fill:var(--muted); font:600 8px var(--display); letter-spacing:1px; }
.mcu-network-corner { position:absolute; z-index:2; top:18px; color:var(--dim); font:700 8px var(--display); letter-spacing:2px; pointer-events:none; }
.mcu-network-corner.top-left { left:20px; }
.mcu-network-corner.top-right { right:20px; }
.mcu-network-legend { display:flex; justify-content:center; gap:24px; flex-wrap:wrap; max-width:var(--max); margin:17px auto 0; color:var(--muted); font:700 9px var(--display); letter-spacing:1.3px; text-transform:uppercase; }
.mcu-network-legend span { display:inline-flex; align-items:center; gap:7px; }
.mcu-network-legend i { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 9px var(--accent-glow); }
.mcu-network-legend i.universe { background:#66b4d2; }
.mcu-network-legend i.faction { background:#d4a249; }
.mcu-network-legend i.bridge { background:#ff7a1a; }

/* /mr network surface: the graph itself lives on a large canvas field. */
.mcu-network-controls { justify-content:center; margin-bottom:32px; }
.mcu-network-frame { height:clamp(520px,66vh,760px); min-height:520px; max-height:760px; border-radius:8px; cursor:grab; }
.mcu-network-frame:active { cursor:grabbing; }
.mcu-network-frame.fullscreen { position:fixed; inset:0; z-index:9000; width:100%; height:100vh; max-height:none; border:0; border-radius:0; }
#mcu-network-canvas { position:relative; z-index:1; display:block; width:100%; height:100%; outline:0; cursor:grab; touch-action:none; }
#mcu-network-canvas:active { cursor:grabbing; }
#mcu-network-canvas:focus-visible { box-shadow:inset 0 0 0 2px var(--accent),inset 0 0 0 4px rgba(var(--accent-rgb),.25); }
.mcu-network-frame .mcu-network-zoom { position:absolute; z-index:3; left:16px; bottom:16px; display:flex; flex-direction:column; gap:4px; }
.mcu-network-frame .mcu-network-zoom button { width:34px; height:34px; background:rgba(7,11,24,.9); border:1px solid rgba(var(--accent-rgb),.35); border-radius:7px; color:var(--muted); font-size:1.1rem; backdrop-filter:blur(8px); }
.mcu-network-frame .mcu-network-zoom button:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }

.world-sigil { display:block; width:100%; height:100%; color:var(--sigil-color,var(--accent)); overflow:visible; shape-rendering:geometricPrecision; }
.world-sigil path,.world-sigil circle,.world-sigil rect,.world-sigil ellipse,.world-sigil line,.world-sigil polyline,.world-sigil polygon { vector-effect:non-scaling-stroke; }
.world-sigil-frame { opacity:.24; }
.card-icon .world-sigil { width:36px; height:36px; }
.modal-header-icon .world-sigil { width:42px; height:42px; }

.registry-controls { display:flex; justify-content:center; align-items:center; max-width:var(--max); margin:0 auto 16px; }
[hidden] { display:none !important; }
.registry-count { max-width:var(--max); margin:0 auto 28px; color:var(--dim); font:700 9px var(--display); letter-spacing:2px; text-align:right; }

.factions-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; max-width:var(--max); margin:0 auto; }
.faction-card { position:relative; display:flex; flex:1 1 360px; flex-direction:column; max-width:410px; min-height:245px; padding:25px; overflow:hidden; color:var(--card-accent,var(--accent)); background:var(--bg-card); border:1px solid var(--border); border-left:2px solid var(--card-accent,var(--accent)); border-radius:8px; cursor:pointer; transition:.35s cubic-bezier(.2,.8,.2,1); }
.faction-card.area-file-card { flex-basis:265px; max-width:310px; min-height:218px; padding:22px; }
.faction-card::before { content:''; position:absolute; inset:0; opacity:0; background:radial-gradient(circle at 70% 30%,color-mix(in srgb,var(--card-accent) 12%,transparent),transparent 65%); transition:.3s; }
.faction-card:hover,.faction-card:focus-visible { border-color:var(--card-accent); background:var(--bg-card-hover); transform:translateY(-7px); box-shadow:0 22px 55px rgba(0,0,0,.4); outline:0; }
.faction-card:hover::before { opacity:1; }
.card-header { position:relative; z-index:1; display:flex; align-items:center; gap:15px; }
.card-icon { display:grid; place-items:center; width:56px; height:56px; flex:0 0 56px; color:var(--card-accent); --sigil-color:var(--card-accent); background:color-mix(in srgb,var(--card-accent) 10%,transparent); border:1px solid color-mix(in srgb,var(--card-accent) 45%,transparent); border-radius:7px; font:800 20px var(--display); }
.card-title { margin:0; color:var(--text); font:800 1.55rem/1 var(--display); text-transform:uppercase; }
.card-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.badge { display:inline-flex; padding:4px 9px; color:var(--muted); background:rgba(255,255,255,.035); border:1px solid var(--border); border-radius:6px; font:700 8px var(--display); letter-spacing:1.3px; text-transform:uppercase; }
.badge.accent { color:var(--card-accent,var(--accent)); border-color:color-mix(in srgb,var(--card-accent,var(--accent)) 38%,transparent); background:color-mix(in srgb,var(--card-accent,var(--accent)) 9%,transparent); }
.badge.status-badge { color:var(--card-accent,var(--accent)); border-style:dashed; opacity:.82; }
.badge.status-badge { display:none; }
.card-desc { position:relative; z-index:1; margin:22px 0; color:var(--muted); font-size:.88rem; line-height:1.65; }
.avatar-stack { position:relative; z-index:1; display:flex; align-items:center; min-height:38px; margin-top:auto; }
.stack-avatar { position:relative; z-index:1; display:grid; place-items:center; width:38px; height:38px; margin-left:-8px; overflow:hidden; color:var(--card-accent,var(--accent)); background:var(--bg-elevated); border:2px solid var(--bg-card); border-radius:50%; font:700 10px var(--display); transition:transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .25s ease; }
.stack-avatar:first-child { margin-left:0; }
.stack-avatar img { width:100%; height:100%; object-fit:cover; object-position:center var(--portrait-position,15%); transform:scale(var(--portrait-scale,1)); transition:transform .3s ease; }
.stack-avatar:hover,.stack-avatar:focus-within { z-index:10; transform:scale(1.2) translateY(-3px); border-color:var(--card-accent); box-shadow:0 0 14px color-mix(in srgb,var(--card-accent) 45%,transparent); }
.stack-avatar:hover img,.stack-avatar:focus-within img { transform:scale(var(--portrait-hover-scale,1.08)); }
.stack-more { display:grid; place-items:center; width:38px; height:38px; margin-left:-8px; color:var(--dim); background:var(--bg-elevated); border:2px solid var(--bg-card); border-radius:50%; font:700 8px var(--display); }
.card-footer { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:18px; padding-top:15px; border-top:1px solid var(--border); }
.card-footer span { color:var(--dim); font:700 9px var(--display); letter-spacing:1.5px; }
.card-footer b { color:var(--card-accent,var(--accent)); font:700 10px var(--display); letter-spacing:1.4px; }

.universe-section { background:var(--bg-deepest); }
.universes-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; max-width:var(--max); margin:0 auto; }
.universe-card { position:relative; display:flex; flex-direction:column; min-height:330px; padding:30px; overflow:hidden; color:var(--card-accent,var(--accent)); background:var(--bg-card); border:1px solid var(--border); border-top:2px solid var(--card-accent,var(--accent)); border-radius:8px; cursor:pointer; transition:.3s; }
.universe-card::before { content:''; position:absolute; inset:0; opacity:.6; background:radial-gradient(circle at 78% 20%,color-mix(in srgb,var(--card-accent) 15%,transparent),transparent 58%); pointer-events:none; }
.universe-card:hover,.universe-card:focus-visible { border-color:var(--card-accent); background:var(--bg-card-hover); transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,.36); outline:0; }
.universe-card-head { position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.universe-card-mark { width:62px; height:62px; color:var(--card-accent); }
.universe-card-mark .world-sigil { width:100%; height:100%; }
.universe-card-code { color:var(--card-accent); font:700 9px var(--display); letter-spacing:2px; }
.universe-card h3 { position:relative; z-index:1; margin:24px 0 8px; color:var(--text); font:800 1.6rem/1 var(--display); text-transform:uppercase; }
.universe-card .universe-subtitle { position:relative; z-index:1; color:var(--card-accent); font:700 9px var(--display); letter-spacing:1.7px; text-transform:uppercase; }
.universe-card p { position:relative; z-index:1; margin:22px 0; color:var(--muted); font-size:.86rem; line-height:1.65; }
.universe-card-footer { position:relative; z-index:1; display:flex; justify-content:flex-end; gap:12px; margin-top:auto; padding-top:15px; border-top:1px solid var(--border); color:var(--card-accent); font:700 9px var(--display); letter-spacing:1.4px; }

.characters-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; max-width:var(--max); margin:0 auto; }
.character-card { position:relative; display:flex; flex-direction:column; min-height:245px; padding:21px; overflow:visible; color:var(--card-accent,var(--accent)); background:var(--bg-card); border:1px solid var(--border); border-top:2px solid var(--card-accent,var(--accent)); border-radius:8px; cursor:pointer; transition:.3s; }
.character-card:hover,.character-card:focus-visible { border-color:var(--card-accent); background:var(--bg-card-hover); transform:translateY(-6px); box-shadow:0 20px 50px rgba(0,0,0,.36); outline:0; }
.character-head { position:relative; z-index:2; display:flex; gap:17px; align-items:flex-start; }
.character-portrait { position:relative; z-index:1; width:64px; height:78px; flex:0 0 64px; overflow:hidden; color:var(--card-accent); background:var(--bg-elevated); border:1px solid color-mix(in srgb,var(--card-accent) 50%,transparent); border-radius:5px; cursor:zoom-in; transform-origin:center center; transition:transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, box-shadow .28s ease; }
.character-portrait::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:0; background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 38%); transition:opacity .28s ease; }
.character-portrait img { width:100%; height:100%; object-fit:cover; object-position:center var(--portrait-position,15%); transform:scale(var(--portrait-scale,1)); transition:transform .4s cubic-bezier(.2,.8,.2,1), filter .28s ease; }
.character-portrait:hover,.character-portrait:focus-within { z-index:12; transform:translateY(-5px) scale(1.18); border-color:var(--card-accent); box-shadow:0 0 0 1px var(--card-accent),0 12px 28px rgba(0,0,0,.56),0 0 20px color-mix(in srgb,var(--card-accent) 35%,transparent); }
.character-portrait:hover::after,.character-portrait:focus-within::after { opacity:1; }
.character-portrait:hover img,.character-portrait:focus-within img { transform:scale(var(--portrait-hover-scale,1.07)); filter:saturate(1.08) contrast(1.04); }
.portrait-fallback { display:none; place-items:center; width:100%; height:100%; color:var(--card-accent,var(--accent)); background:color-mix(in srgb,var(--card-accent,var(--accent)) 8%,transparent); }
.portrait-fallback .world-sigil { width:44%; height:44%; }
.character-portrait.is-missing .portrait-fallback { display:grid; }
.avatar-fallback { display:none; position:absolute; inset:0; place-items:center; color:var(--card-accent,var(--accent)); background:var(--bg-elevated); }
.avatar-fallback .world-sigil { width:58%; height:58%; }
.stack-avatar.is-missing .avatar-fallback { display:grid; }
.character-name { margin:4px 0 6px; color:var(--text); font:800 1.18rem/1 var(--display); text-transform:uppercase; }
.character-role { display:block; margin-top:8px; color:var(--dim); font:700 8px var(--display); letter-spacing:1.2px; text-transform:uppercase; }
.character-affiliation { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:10px; margin-top:auto; padding-top:14px; border-top:1px solid var(--border); }
.character-context-icon { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; color:var(--sigil-color,var(--card-accent,var(--accent))); background:color-mix(in srgb,var(--sigil-color,var(--card-accent,var(--accent))) 9%,transparent); border:1px solid color-mix(in srgb,var(--sigil-color,var(--card-accent,var(--accent))) 42%,transparent); border-radius:6px; }
.character-context-icon .world-sigil { width:21px; height:21px; }
.character-context-copy { display:grid; min-width:0; gap:5px; }
.character-context-copy span { display:block; color:var(--dim); font:700 8px var(--display); letter-spacing:1.4px; }
.character-context-copy strong { display:block; overflow:hidden; color:var(--text); font:700 1rem var(--display); text-overflow:ellipsis; white-space:nowrap; }
.character-continuity { display:inline-flex; align-items:center; min-width:0; gap:7px; }
.character-continuity .continuity-icon { width:20px; height:20px; flex-basis:20px; border-radius:50%; }
.character-continuity .continuity-icon .world-sigil { width:14px; height:14px; }
.character-continuity-copy { display:grid; min-width:0; gap:3px; }
.character-continuity-copy small { display:block; color:var(--dim); font:700 7px var(--display); letter-spacing:1.1px; line-height:1; text-transform:uppercase; }
.character-continuity-copy strong { display:block; overflow:hidden; color:var(--card-accent); font:700 9px var(--display); letter-spacing:1px; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.character-card .card-footer { margin-top:18px; }
.card-title-link,.stack-avatar-link,.modal-link,.profile-record-card,.profile-connection-card { color:inherit; text-decoration:none; }
.stack-avatar-link { display:inline-grid; border-radius:50%; }
.stack-avatar-link .stack-avatar { margin-left:-8px; }
.stack-avatar-link:first-child .stack-avatar { margin-left:0; }

.focus-header { display:flex; align-items:center; gap:20px; padding-bottom:28px; border-bottom:1px solid var(--border); }
.focus-icon { display:grid; place-items:center; width:64px; height:64px; flex:0 0 64px; color:var(--focus-color,var(--accent)); border:1px solid var(--focus-color,var(--accent)); border-radius:7px; font:800 24px var(--display); }
.focus-icon .world-sigil { width:42px; height:42px; }
.focus-header h3 { margin:0 0 8px; font:800 2rem var(--display); text-transform:uppercase; }
.focus-header p { margin:0; color:var(--muted); font-size:.86rem; line-height:1.6; }
.relationship-group { margin-top:28px; }
.relationship-group h4 { display:flex; align-items:center; gap:15px; margin:0 0 14px; color:var(--dim); font:700 9px var(--display); letter-spacing:2px; }
.relationship-group h4::after { content:''; flex:1; height:1px; background:var(--border); }
.relationship-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.relationship-card { display:grid; gap:8px; padding:17px 18px; color:var(--muted); background:rgba(255,255,255,.025); border:1px solid var(--border); border-left:2px solid var(--rel-color,var(--accent)); border-radius:7px; text-align:left; transition:.2s; }
button.relationship-card:hover { color:var(--text); border-color:var(--rel-color,var(--accent)); transform:translateY(-2px); }
.relationship-card strong { color:var(--text); font:700 1rem var(--display); }
.relationship-card span { font-size:.76rem; line-height:1.45; }

.timeline-container { position:relative; display:grid; gap:34px; max-width:1050px; margin:0 auto; padding-left:46px; }
.timeline-container::before { content:''; position:absolute; left:13px; top:18px; bottom:18px; width:1px; background:linear-gradient(var(--accent),rgba(var(--accent-rgb),.08)); }
.timeline-event { position:relative; padding:32px 34px; overflow:hidden; background:var(--bg-card); border:1px solid var(--border); border-radius:11px; transition:border-color .22s ease,background .22s ease,transform .22s ease; }
.timeline-event::before { content:''; position:absolute; left:-39px; top:34px; width:13px; height:13px; background:var(--accent); border:3px solid var(--bg-deepest); transform:rotate(45deg); box-shadow:0 0 14px var(--accent-glow); }
.timeline-event::after { content:''; position:absolute; inset:0 auto 0 0; width:2px; background:linear-gradient(var(--accent),transparent 72%); opacity:.75; }
.timeline-event:hover { border-color:rgba(var(--accent-rgb),.55); background:var(--bg-card-hover); transform:translateY(-2px); }
.timeline-event-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.event-code { display:inline-flex; padding:8px 14px; color:#fff; background:var(--accent); border-radius:5px; box-shadow:0 6px 18px var(--accent-glow); font:700 9px var(--display); letter-spacing:1.8px; }
.event-status { color:var(--dim); font:700 8px var(--display); letter-spacing:1.6px; text-align:right; }
.timeline-event h3 { margin:17px 0 12px; color:var(--text); font:800 clamp(1.35rem,2.2vw,1.8rem) var(--display); }
.timeline-summary { max-width:900px; margin:0; color:var(--muted); font-size:.94rem; line-height:1.75; }
.timeline-entity-pills { display:flex; align-items:flex-start; flex-wrap:wrap; gap:10px; margin-top:20px; }
.timeline-entity-pill { display:inline-flex; align-items:center; align-self:flex-start; width:max-content; max-width:100%; gap:8px; min-width:0; min-height:32px; overflow:visible; padding:4px 12px 4px 4px; color:var(--text); background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:16px; font:700 .88rem var(--display); letter-spacing:.02em; text-decoration:none; vertical-align:middle; white-space:nowrap; transition:all .2s cubic-bezier(.16,1,.3,1); }
.timeline-entity-pill.faction-link { border-radius:7px; font-size:.82rem; }
.timeline-entity-pill:hover { color:#071018; background:var(--cyan); border-color:var(--cyan); transform:translateY(-2px); box-shadow:0 4px 15px rgba(78,202,211,.32); }
.timeline-entity-pill.is-static { cursor:default; }
.timeline-entity-pill.is-static:hover { color:var(--text); background:rgba(255,255,255,.05); border-color:var(--border); transform:none; box-shadow:none; }
.timeline-entity-pill .pill-label { display:grid; min-width:0; line-height:1.05; }
.timeline-entity-pill small { margin-top:2px; color:var(--dim); font:500 .65rem var(--body); letter-spacing:0; }
.timeline-entity-pill:hover small { color:rgba(7,16,24,.72); }
.timeline-pill-icon { display:inline-flex; align-items:center; justify-content:center; align-self:center; width:22px; height:22px; min-width:22px; max-width:22px; min-height:22px; max-height:22px; flex:0 0 22px; overflow:hidden; color:var(--sigil-color,var(--accent)); background:var(--bg-deep); border:1px solid rgba(255,255,255,.18); border-radius:50%; }
.timeline-pill-icon.faction { padding:2px; border-radius:5px; }
.timeline-pill-icon img,.timeline-pill-avatar img { display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center var(--portrait-position,15%); transform:scale(var(--portrait-scale,1)); }
.timeline-pill-avatar { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; min-width:22px; max-width:22px; min-height:22px; max-height:22px; flex:0 0 22px; overflow:hidden; border-radius:50%; }
.timeline-pill-icon .world-sigil { width:16px; height:16px; }
.timeline-pill-fallback { display:none; width:100%; height:100%; place-items:center; }
.timeline-pill-icon.is-missing .timeline-pill-fallback { display:grid; }
.timeline-pill-icon.is-missing .world-sigil { display:none; }
.timeline-ripples { margin-top:26px; padding-top:22px; border-top:1px solid var(--border); }
.timeline-ripples h4 { display:flex; align-items:center; gap:14px; margin:0 0 14px; color:var(--dim); font:700 8px var(--display); letter-spacing:2px; }
.timeline-ripples h4::after { content:''; flex:1; height:1px; background:var(--border); }
.timeline-ripple-list { display:grid; gap:12px; }
.timeline-ripple-item { display:grid; grid-template-columns:minmax(150px,max-content) 1fr; align-items:center; gap:17px; padding-left:16px; border-left:2px solid rgba(var(--accent-rgb),.35); }
.timeline-ripple-item > .timeline-entity-pill { justify-self:start; }
.timeline-ripple-item p { margin:0; color:var(--muted); font-size:.81rem; line-height:1.6; }

/* ---------- MARVEL RIVALS HANDOFF ---------- */
.marvel-rivals-cta {
  --mr-accent:#e02929;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1010;
  height:52px;
  padding:0 clamp(20px,4vw,60px);
  border-bottom:1px solid rgba(224,41,41,.32);
  background:linear-gradient(90deg,rgba(25,11,18,.98),rgba(7,11,24,.98) 48%,rgba(19,17,25,.98));
  backdrop-filter:blur(18px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-100%);
  transition:opacity .35s ease,visibility .35s ease,transform .45s cubic-bezier(.16,1,.3,1);
}
.marvel-rivals-cta.visible { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.marvel-rivals-cta-link { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:24px; width:100%; max-width:1180px; height:100%; margin:0 auto; }
.marvel-rivals-cta-mark { display:grid; place-items:center; width:27px; height:27px; overflow:hidden; border:1px solid rgba(224,41,41,.52); border-radius:4px; background:rgba(224,41,41,.09); color:var(--mr-accent); font:800 .58rem var(--display); letter-spacing:.5px; }
.marvel-rivals-cta-logo { display:block; width:22px; height:22px; object-fit:contain; }
.marvel-rivals-cta-logo-fallback { display:none; }
.marvel-rivals-logo-missing .marvel-rivals-cta-logo { display:none; }
.marvel-rivals-logo-missing .marvel-rivals-cta-logo-fallback { display:inline; }
.marvel-rivals-cta-kicker { color:var(--mr-accent); font:800 .62rem var(--display); letter-spacing:1.8px; white-space:nowrap; }
.marvel-rivals-cta-title { color:var(--text); font:700 .9rem/1 var(--display); letter-spacing:.45px; text-align:center; white-space:nowrap; }
.marvel-rivals-cta-title strong { color:var(--mr-accent); font-weight:800; }
.marvel-rivals-cta-action { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:30px; padding-left:18px; border-left:1px solid rgba(224,41,41,.3); color:var(--mr-accent); font:800 .65rem var(--display); letter-spacing:1.25px; white-space:nowrap; transition:color .25s ease; }
.marvel-rivals-cta-link:hover .marvel-rivals-cta-action,.marvel-rivals-cta-link:hover .marvel-rivals-cta-title strong { color:#ff7777; }
.marvel-rivals-cta-action svg { transition:transform .25s ease; }
.marvel-rivals-cta-link:hover .marvel-rivals-cta-action svg { transform:translate(2px,-2px); }
#main-nav.marvel-rivals-cta-offset { top:52px; }

#footer { background:var(--bg-deep); border-top:1px solid var(--border); padding:80px 20px; }
.footer-content { max-width:680px; margin:0 auto; text-align:center; }
.footer-logo { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:20px; color:var(--text); font:700 18px var(--display); letter-spacing:2px; }
.footer-logo-img { width:38px; height:38px; object-fit:contain; filter:drop-shadow(0 0 10px var(--accent-glow)); }
.footer-logo .nav-logo-text { font:700 18px var(--display); letter-spacing:2px; }
.footer-note { margin:0 0 8px; color:var(--dim); font-size:.78rem; line-height:1.65; }
.footer-credit-wrap { margin-top:10px; color:var(--muted); font-size:.78rem; line-height:1.65; }
.footer-credit-wrap span { margin:0 8px; opacity:.3; }
.footer-credit-wrap a { color:var(--accent); font-weight:700; transition:color .2s ease,background .2s ease; }
.footer-credit-wrap a:hover { color:#fff; }
.back-to-top { position:fixed; z-index:900; display:grid; place-items:center; right:26px; bottom:24px; width:46px; height:46px; padding:0; color:var(--accent); background:rgba(10,14,25,.9); border:1px solid rgba(var(--accent-rgb),.45); border-radius:50%; opacity:0; visibility:hidden; transform:translateY(12px); transition:.2s; }
.back-to-top:empty::before { content:""; display:block; width:9px; height:9px; border-top:2px solid currentColor; border-left:2px solid currentColor; transform:translateY(2px) rotate(45deg); }
.back-to-top.visible { opacity:1; visibility:visible; transform:none; }

.modal-overlay { position:fixed; inset:0; z-index:5000; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; visibility:hidden; background:rgba(3,5,10,.86); backdrop-filter:blur(9px); transition:.25s; }
.modal-overlay.open { opacity:1; visibility:visible; }
.codex-modal { position:relative; width:min(900px,100%); max-height:90vh; overflow:auto; background:var(--bg-surface); border:1px solid var(--border-strong); border-top:4px solid var(--modal-accent,var(--accent)); border-radius:10px; box-shadow:0 35px 100px rgba(0,0,0,.72); transform:translateY(24px) scale(.98); transition:.3s; }
.modal-overlay.open .codex-modal { transform:none; }
.modal-close,.modal-back,.modal-copy { position:absolute; z-index:6; color:var(--muted); background:var(--bg-elevated); border:1px solid var(--border); }
.modal-close,.modal-copy { display:grid; place-items:center; padding:0; line-height:1; }
.modal-close { top:20px; right:20px; width:40px; height:40px; border-radius:50%; font-size:21px; }
.modal-copy { top:20px; right:68px; width:40px; height:40px; border-radius:50%; font-size:18px; }
.modal-back { top:20px; left:20px; display:inline-flex; align-items:center; justify-content:center; min-width:112px; height:32px; padding:0 14px; border-radius:16px; font:700 9px var(--display); letter-spacing:1.5px; }
.modal-back.hidden { display:none; }
.modal-close:hover,.modal-back:hover,.modal-copy:hover { color:#fff; background:var(--modal-accent,var(--accent)); }
.modal-copy.copied { color:#071018; background:var(--modal-accent,var(--accent)); }
.control-icon { width:17px; height:17px; display:block; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.modal-close .control-icon { width:18px; height:18px; }
.modal-copy .control-icon { width:17px; height:17px; }
#modal-content { clear:both; }
.modal-header { position:relative; display:flex; align-items:center; gap:24px; min-height:142px; padding:70px 48px 30px; border-bottom:1px solid var(--border); background:linear-gradient(180deg,var(--bg-card),var(--bg-surface)); }
.modal-header-icon { display:grid; place-items:center; width:72px; height:72px; flex:0 0 72px; color:var(--modal-accent,var(--accent)); background:color-mix(in srgb,var(--modal-accent,var(--accent)) 10%,transparent); border:1px solid var(--modal-accent,var(--accent)); border-radius:8px; font:800 25px var(--display); }
.modal-header-portrait { width:94px; height:112px; flex:0 0 94px; overflow:hidden; border:2px solid var(--modal-accent,var(--accent)); border-radius:7px; }
.modal-header-portrait img { width:100%; height:100%; object-fit:cover; object-position:center var(--portrait-position,15%); transform:scale(var(--portrait-scale,1)); }
.modal-portrait-fallback { display:none; place-items:center; width:100%; height:100%; color:var(--modal-accent,var(--accent)); background:color-mix(in srgb,var(--modal-accent,var(--accent)) 8%,transparent); }
.modal-portrait-fallback .world-sigil { width:48%; height:48%; }
.modal-header-portrait.is-missing .modal-portrait-fallback { display:grid; }
.modal-header-copy { min-width:0; }
.modal-header h2 { margin:0; font:800 2.4rem/1 var(--display); text-transform:uppercase; }
.modal-header p { margin:9px 0 0; color:var(--muted); font-size:.82rem; }
.modal-body { padding:38px 48px 52px; }
.modal-section { margin-bottom:38px; }
.modal-section:last-child { margin-bottom:0; }
.modal-section h3 { margin:0 0 20px; padding-bottom:12px; color:var(--modal-accent,var(--accent)); border-bottom:1px solid var(--border); font:700 .76rem var(--display); letter-spacing:4px; text-transform:uppercase; }
.modal-section>p { margin:0; color:var(--muted); font-size:1rem; line-height:1.8; }
.modal-section-kicker { margin:0 0 8px!important; color:var(--modal-accent,var(--accent))!important; font:700 8px var(--display)!important; letter-spacing:2px; line-height:1!important; text-transform:uppercase; }
.character-profile-header .modal-header-copy { align-self:center; }
.character-profile-header .modal-header-copy { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.character-profile-header .modal-header-copy h2 { text-transform:none; }
.character-profile-header .modal-header-copy .card-badges { margin-top:0; }
.character-profile-header .modal-header-portrait { width:64px; height:64px; flex-basis:64px; border-radius:50%; }
.profile-record-section .modal-section { margin-bottom:0; }
.profile-record-label { margin:0 0 10px; color:var(--dim); font:700 9px var(--display); letter-spacing:2.5px; text-transform:uppercase; }
.profile-record-label-spaced { margin-top:28px; }
.profile-record-card { display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; color:var(--text); background:rgba(255,255,255,.025); border:1px solid var(--border); border-left:2px solid var(--record-accent,var(--modal-accent,var(--accent))); border-radius:7px; text-align:left; transition:.2s ease; }
button.profile-record-card { cursor:pointer; }
.profile-record-card:hover { background:color-mix(in srgb,var(--record-accent,var(--modal-accent,var(--accent))) 10%,transparent); border-color:var(--record-accent,var(--modal-accent,var(--accent))); }
.profile-record-card-muted { opacity:.9; }
.profile-record-icon { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; color:var(--sigil-color,var(--accent)); background:color-mix(in srgb,var(--record-accent,var(--accent)) 10%,transparent); border:1px solid color-mix(in srgb,var(--record-accent,var(--accent)) 45%,transparent); border-radius:7px; }
.profile-record-icon .world-sigil { width:28px; height:28px; }
.profile-record-copy { display:grid; min-width:0; flex:1; gap:4px; }
.profile-record-copy strong { font:700 1rem var(--display); }
.profile-record-copy span { color:var(--muted); font-size:.78rem; line-height:1.45; }
.profile-record-status { padding:6px 9px; color:var(--record-accent,var(--modal-accent,var(--accent))); background:color-mix(in srgb,var(--record-accent,var(--modal-accent,var(--accent))) 12%,transparent); border:1px solid color-mix(in srgb,var(--record-accent,var(--modal-accent,var(--accent))) 30%,transparent); border-radius:5px; font:700 8px var(--display); letter-spacing:1.3px; text-transform:uppercase; }
.profile-connections-section { margin-top:10px; }
.profile-connection-group { margin-top:2px; }
.profile-connection-label { display:flex; align-items:center; gap:10px; margin-bottom:12px; color:var(--modal-accent,var(--accent)); font:700 9px var(--display); letter-spacing:2px; text-transform:uppercase; }
.profile-connection-label::before { content:'✣'; font-size:13px; }
.modal-relationship-group,.profile-connection-group { --relationship-color:var(--modal-accent,var(--accent)); }
.modal-relationship-group[data-relationship-kind="alliances"],.profile-connection-group[data-relationship-kind="alliances"] { --relationship-color:#4ecad3; }
.modal-relationship-group[data-relationship-kind="conflicts"],.profile-connection-group[data-relationship-kind="conflicts"] { --relationship-color:#ed654d; }
.modal-relationship-group[data-relationship-kind="complex"],.profile-connection-group[data-relationship-kind="complex"] { --relationship-color:#8c7cf0; }
.modal-relationship-group[data-relationship-kind="associates"],.profile-connection-group[data-relationship-kind="associates"] { --relationship-color:#d4a249; }
.modal-relationship-group + .modal-relationship-group { margin-top:22px; }
.relationship-label { color:var(--relationship-color); }
.relationship-label::before { display:none; }
.relationship-label-sigil { display:grid; place-items:center; width:22px; height:22px; color:var(--relationship-color); }
.relationship-icon { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; }
.relationship-icon svg { display:block; width:100%; height:100%; }
.profile-connection-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.profile-connection-card { display:flex; align-items:center; gap:10px; min-width:0; padding:11px 13px; color:var(--text); background:rgba(255,255,255,.025); border:1px solid var(--border); border-radius:7px; text-align:left; transition:.2s ease; }
.profile-connection-card:hover { background:color-mix(in srgb,var(--relationship-color,var(--modal-accent,var(--accent))) 8%,transparent); border-color:var(--relationship-color,var(--modal-accent,var(--accent))); }
.profile-connection-card>.stack-avatar { width:38px; height:38px; flex:0 0 38px; margin:0; }
.profile-connection-card>span:not(.stack-avatar) { display:grid; min-width:0; flex:1; gap:3px; }
.profile-connection-card strong { overflow:hidden; font:700 .9rem var(--display); text-overflow:ellipsis; white-space:nowrap; }
.profile-connection-card small { overflow:hidden; color:var(--muted); font-size:.7rem; text-overflow:ellipsis; white-space:nowrap; }
.profile-connection-card>b { color:var(--relationship-color,var(--modal-accent,var(--accent))); font:700 7px var(--display); letter-spacing:1px; }
.intel-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.intel-card { padding:16px; background:rgba(255,255,255,.025); border:1px solid var(--border); border-radius:7px; }
.intel-card span { display:block; color:var(--dim); font:700 8px var(--display); letter-spacing:1.4px; }
.intel-card strong { display:block; margin-top:7px; color:var(--text); font:700 .95rem var(--display); }
.member-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; }
.member-file { display:flex; align-items:center; gap:12px; min-width:0; padding:12px 16px; color:var(--text); background:var(--bg-surface); border:1px solid var(--border); border-radius:7px; text-align:left; }
button.member-file:hover { border-color:var(--modal-accent,var(--accent)); background:color-mix(in srgb,var(--modal-accent,var(--accent)) 8%,transparent); }
.member-file .stack-avatar { width:34px; height:34px; margin:0; flex:0 0 34px; border-color:var(--border); }
.member-file strong { display:block; font:700 .9rem var(--display); }
.member-file small { display:block; margin-top:3px; color:var(--dim); font-size:.67rem; }
.modal-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.modal-link { display:flex; align-items:center; gap:12px; min-width:0; padding:13px 14px; color:var(--text); background:rgba(255,255,255,.025); border:1px solid var(--border); border-left:2px solid var(--modal-accent,var(--accent)); border-radius:7px; text-align:left; transition:.2s ease; }
.modal-link:hover { border-color:var(--modal-accent,var(--accent)); }
.modal-link-sigil { display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; color:var(--sigil-color,var(--modal-accent,var(--accent))); background:color-mix(in srgb,var(--sigil-color,var(--modal-accent,var(--accent))) 10%,transparent); border:1px solid color-mix(in srgb,var(--sigil-color,var(--modal-accent,var(--accent))) 42%,transparent); border-radius:7px; }
.modal-link-sigil .world-sigil { width:25px; height:25px; }
.modal-link-copy { display:grid; min-width:0; flex:1; gap:4px; }
.modal-link strong { overflow:hidden; font:700 1rem var(--display); text-overflow:ellipsis; white-space:nowrap; }
.modal-link-copy>span { color:var(--muted); font-size:.75rem; line-height:1.4; }
.modal-link-arrow { align-self:center; color:var(--modal-accent,var(--accent)); font:700 14px var(--display); }
.modal-relationship-group .modal-link { border-left-color:var(--relationship-color); }
.modal-relationship-group .modal-link:hover { border-color:var(--relationship-color); }
.modal-relationship-group .modal-link-arrow { color:var(--relationship-color); }
.modal-actions { display:flex; justify-content:flex-end; margin-top:8px; }
.modal-action { padding:13px 16px; color:var(--modal-accent,var(--accent)); background:color-mix(in srgb,var(--modal-accent,var(--accent)) 8%,transparent); border:1px solid color-mix(in srgb,var(--modal-accent,var(--accent)) 45%,transparent); border-radius:7px; font:700 9px var(--display); letter-spacing:1.6px; }
.modal-action:hover { color:#fff; background:var(--modal-accent,var(--accent)); }
.empty-state { grid-column:1/-1; padding:60px; color:var(--dim); border:1px solid var(--border); border-radius:8px; text-align:center; }

.codex-modal button,.codex-modal a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }

@media(max-width:1350px) {
  .main-nav { padding-left:28px; padding-right:28px; }
  .brand .nav-logo-text { font-size:13px; }
  .brand-mark { width:34px; height:34px; font-size:13px; }
  .continuity-control { gap:5px; padding:4px; }
  .continuity-tabs { gap:2px; }
  .continuity-tabs button { min-width:42px; padding:7px 8px; }
  .nav-links { gap:6px; }
  .nav-link { font-size:9px; letter-spacing:1.2px; }
  .nav-kofi-btn { padding-left:9px; padding-right:9px; font-size:9px; }
  .characters-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

@media(max-width:1220px) {
  .main-nav { padding-left:20px; padding-right:20px; }
  .nav-links { position:absolute; top:100%; left:0; right:0; grid-column:1/-1; justify-self:stretch; width:auto; display:none; flex-direction:column; align-items:stretch; gap:0; padding:12px 20px 20px; background:rgba(5,7,13,.98); border-bottom:1px solid var(--border); box-shadow:0 18px 40px rgba(0,0,0,.45); }
  .nav-links.open { display:flex; }
  .menu-toggle { display:flex; }
  .nav-links a { padding:14px; }
  .nav-link::after { bottom:6px; }
  .characters-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .universes-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:820px) {
  .main-nav { grid-template-columns:1fr auto; padding-left:18px; padding-right:18px; }
  .nav-left-cluster { grid-column:1; grid-row:1; }
  .nav-site-brand { align-self:center; }
  .nav-continuity-control { grid-column:auto; grid-row:auto; align-self:center; justify-self:auto; margin:0; }
  .nav-hub-link-center { position:absolute; left:50%; top:34px; grid-column:auto; grid-row:auto; transform:translate(-50%,-50%); }
  .menu-toggle { grid-column:2; grid-row:1; align-self:center; }
  .nav-site-brand .nav-logo-text { display:none; }
  .nav-continuity-control { gap:2px; padding:3px; }
  .nav-continuity-control .continuity-label { display:none; }
  .menu-toggle { display:flex; }
  .nav-links { position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; align-items:stretch; gap:0; padding:12px 20px 20px; background:rgba(5,7,13,.98); border-bottom:1px solid var(--border); box-shadow:0 18px 40px rgba(0,0,0,.45); }
  .nav-links.open { display:flex; }
  .nav-links a { padding:14px; }
  .nav-link::after { bottom:6px; }
  .hero { min-height:700px; }
  body[data-story="original"] .hero-media img { transform:translateX(0) scale(1.1) scaleX(-1); }
  body[data-story="patchwork"] .hero-media img { transform:translateX(2%) scale(1.1); }
  body[data-story="film"] .hero-media img { transform:translateX(1%) scale(1.07); }
  .hero-content { width:calc(100% - 40px); padding-top:170px; }
  .hero h1 { font-size:clamp(3.2rem,15vw,5rem); }
  .hero-lede { font-size:.92rem; }
  .hero-stat { min-width:0; padding:0 14px; }
  .hero-stat strong { font-size:1.65rem; }
  .hero-file { display:none; }
  .codex-section { padding:76px 18px; }
  .explorer-panel + .explorer-panel { margin-top:82px; padding-top:56px; }
  .registry-controls { display:block; }
  .filter-row { width:100%; justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; padding-bottom:5px; }
  .filter-row button,.filter-row a { flex:0 0 auto; }
  .map-container,.map-stage,.map-stage.film { min-height:500px; }
  .mcu-network-controls { align-items:stretch; flex-direction:column; }
  .mcu-network-controls .filter-row { width:100%; }
  .mcu-network-zoom { justify-content:flex-end; }
  #mcu-network-graph { height:500px; }
  .relationship-grid { grid-template-columns:1fr; }
  .characters-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* Dossier lists stay readable before the main page reaches phone width. */
  .codex-modal .member-grid,
  .codex-modal .intel-grid,
  .codex-modal .profile-connection-grid { grid-template-columns:1fr; }
  .codex-modal .member-file { width:100%; }
  .modal-links { grid-template-columns:1fr; }
  footer { grid-template-columns:1fr; text-align:center; }
  .footer-brand,.footer-links { justify-content:center; }
}

@media(max-width:560px) {
  .nav-hub-link-center { display:none; }
  .back-to-top { right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); }
  body[data-story="original"] .hero-media img { object-position:center 40%; transform:translateX(0) scale(1.18) scaleX(-1); }
  body[data-story="patchwork"] .hero-media img { object-position:center 52%; transform:translateX(0) scale(1.16); }
  body[data-story="film"] .hero-media img { object-position:center 46%; transform:translateX(0) scale(1.12); }
  .hero-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
  .hero-stat,.hero-stat:first-child { padding:0; border:0; }
  .scroll-indicator { display:none; }
  .section-header { margin-bottom:34px; }
  .explorer-panel + .explorer-panel { margin-top:64px; padding-top:44px; }
  .continuity-label { display:none; }
  .continuity-tabs { width:100%; justify-content:center; }
  .continuity-tabs button { flex:1 1 0; max-width:92px; }
  .map-container { min-height:0; }
  .map-stage { min-height:0; aspect-ratio:1000/769; }
  .map-stage.film { min-height:0; aspect-ratio:1661/947; }
  .map-art { object-fit:contain; }
  .mcu-network-frame { min-height:0; }
  #mcu-network-graph { height:440px; }
  .mcu-network-corner.top-right { display:none; }
  .mcu-network-corner.top-left { top:13px; left:14px; }
  .mcu-network-node-label { font-size:13px; }
  .mcu-network-node-sub { font-size:7px; }
  .faction-card { min-height:0; padding:24px; }
  .universes-grid { grid-template-columns:1fr; }
  .characters-grid { grid-template-columns:1fr; }
  .marvel-rivals-cta { height:44px; padding:0 14px; }
  .marvel-rivals-cta-link { grid-template-columns:auto minmax(0,1fr) auto; gap:12px; }
  .marvel-rivals-cta-kicker { display:none; }
  .marvel-rivals-cta-title { overflow:hidden; font-size:.72rem; text-align:left; text-overflow:ellipsis; }
  .marvel-rivals-cta-action { min-height:26px; padding-left:12px; font-size:.6rem; }
  #main-nav.marvel-rivals-cta-offset { top:44px; }
  .character-card { min-height:0; }
  .focus-header { align-items:flex-start; }
  .timeline-container { padding-left:27px; }
  .timeline-container::before { left:6px; }
  .timeline-event::before { left:-29px; }
  .timeline-event { padding:23px; }
  .timeline-event-top { align-items:flex-start; flex-direction:column; }
  .event-status { text-align:left; }
  .timeline-ripple-item { grid-template-columns:1fr; gap:8px; padding-left:12px; }
  .modal-overlay { align-items:center; padding:14px max(16px,env(safe-area-inset-right)) 14px max(16px,env(safe-area-inset-left)); }
  .codex-modal { width:100%; max-width:900px; height:calc(100vh - 28px); height:calc(100dvh - 28px); max-height:calc(100vh - 28px); max-height:calc(100dvh - 28px); min-height:0; border:1px solid var(--border-strong); border-top:4px solid var(--modal-accent,var(--accent)); border-radius:10px; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
  .modal-close,.modal-copy { top:12px; width:44px; height:44px; }
  .modal-close { right:12px; font-size:21px; }
  .modal-copy { right:64px; font-size:18px; }
  .modal-back { top:12px; left:12px; min-width:104px; height:44px; padding:0 16px; border-radius:22px; }
  .modal-header { align-items:flex-start; min-height:132px; padding:72px 20px 20px; gap:14px; }
  .modal-header h2 { font-size:clamp(1.55rem,8vw,2rem); line-height:1.05; }
  .modal-header p { font-size:.78rem; line-height:1.4; }
  .modal-header-icon { width:54px; height:54px; flex-basis:54px; }
  .modal-header-portrait { width:70px; height:88px; flex-basis:70px; }
  .modal-body { padding:28px 20px 40px; }
  .modal-section>p { font-size:.96rem; line-height:1.75; }
  .member-file,.profile-record-card,.profile-connection-card,.modal-link { min-height:58px; padding:14px; }
  .modal-action { width:100%; min-height:46px; padding:12px 16px; }
  .member-grid,.intel-grid { grid-template-columns:1fr; }
  .profile-connection-grid { grid-template-columns:1fr; }
}