/* Conquest's cinematic purple identity, with a quieter and clearer interface. */
:root { --header-height: 88px; --purple: #caa4ff; --muted: #b9afc7; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--header-height) + 24px); }
body { line-height: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
button, a { touch-action: manipulation; }
.site-header {
 position: sticky; inset: 0 0 auto; top: 0; height: var(--header-height);
 padding: 0 max(24px, calc((100% - 1380px) / 2)); gap: 24px;
 background: #130d20ef; backdrop-filter: blur(18px); border-bottom: 1px solid #b697d626;
 z-index: 20;
}
.brand { width: 136px; }
.site-header nav { gap: 23px; font-size: 13px; flex: 1; justify-content: center; }
.site-header nav a { white-space: nowrap; padding: 12px 0; color: #c4b8d2; }
.site-header nav a:hover, .site-header nav a[aria-current] { color: #ecd5ff; }
.site-header nav a[aria-current] { box-shadow: inset 0 -2px #be8cff; }
.nav-ip { gap: 10px; padding: 11px 12px; white-space: nowrap; font-size: 12px; flex-shrink: 0; border-radius: 8px; background: #2b1b40; }
.nav-ip:hover { background: #382551; border-color: #cba2ff; }
.ip-indicator { width: 5px; height: 5px; border-radius: 50%; background: #d5b7ff; box-shadow: 0 0 10px #c997ff60; }
.copy-label { border-left: 1px solid #c9a5f344; padding-left: 10px; color: #e5ceff; min-width: 39px; }
.hero { min-height: 655px; height: calc(90svh - var(--header-height)); }
.hero-content { padding: 70px 24px 92px; }
.hero-logo { width: min(615px, 76vw); margin: 18px 0 24px; }
.hero h1 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.18; letter-spacing: -1.4px; }
.hero-description { font-size: 16px; color: #e6dfee; }
.hero-shade { background: linear-gradient(180deg, #11091d50, #130b2355 42%, #100c17 100%), linear-gradient(90deg, #100b2266, transparent, #100b2266); }
.hero-actions { margin-top: 27px; }
.button { min-height: 54px; border-radius: 8px; }
.compatibility { font-size: 12px; }
.feature-strip { padding: 25px 24px; background: #161020; gap: 40px; font-size: 11px; }
.section { width: min(1180px, calc(100% - 64px)); padding: 88px 0; }
.section-top { margin-bottom: 36px; align-items: end; }
.eyebrow { letter-spacing: 2.5px; }
h2 { font-size: clamp(34px, 4.2vw, 54px); line-height: 1.12; letter-spacing: -1.6px; }
.trailer-section { padding-top: 78px; }
.trailer-carousel { border: 1px solid #b48adb35; border-radius: 16px; background: #1b1326; overflow: hidden; }
.carousel-window { overflow: hidden; touch-action: pan-y; }
.carousel-track { display: flex; transition: transform .65s cubic-bezier(.22,.68,.25,1); align-items: stretch; }
.trailer-slide { flex: 0 0 100%; min-width: 0; }
.trailer-poster { aspect-ratio: 16/7.7; border: 0; border-radius: 0; }
.trailer-poster > img { filter: brightness(.65) saturate(.9); }
.trailer-poster:hover > img { transform: scale(1.025); }
.trailer-overlay { gap: 16px; background: linear-gradient(transparent, #160d2644); }
.play-circle { width: 70px; height: 70px; border: 1px solid #e5c7ff; background: #c995f2ed; }
.trailer-caption { padding: 27px 32px 18px; display: flex; justify-content: space-between; gap: 40px; align-items: center; min-height: 165px; }
.trailer-caption .eyebrow { font-size: 9px; margin: 0 0 10px; }
.trailer-caption h3 { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.3; letter-spacing: -.5px; max-width: 680px; }
.trailer-caption p:not(.eyebrow) { color: var(--muted); font-size: 13px; margin: 10px 0 0; max-width: 670px; }
.text-link { color: #d8b9ff; font-size: 12px; border-bottom: 1px solid #b384d655; padding: 10px 0; white-space: nowrap; }
.text-link:hover { color: white; border-color: white; }
.carousel-controls { display: flex; align-items: center; gap: 14px; padding: 8px 32px 24px; }
.icon-button { width: 44px; height: 44px; border: 1px solid #a479c74d; border-radius: 50%; background: #2b1c3d; color: #e5c9ff; font-size: 21px; }
.icon-button:hover { background: #4b2e67; }
.icon-button svg { width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8; }
.carousel-position { font-size: 11px; font-variant-numeric: tabular-nums; color: #c7b4d9; }
.carousel-pause { margin-left: auto; min-height: 44px; padding: 10px 0 10px 15px; background: none; border: 0; font-size: 11px; color: #cbb4db; }
.archive-note { max-width: 850px; font-size: 12px; color: #ad9ebb; }
.intro { border-top: 1px solid var(--line); gap: 80px; }
.events { padding-top: 30px; }
.event-card { border-radius: 14px; }
.event-copy { padding: 28px 32px; }
.leaders-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; border-top: 1px solid var(--line); }
.leaders-preview h2 { margin-top: 17px; }
.leaders-preview p:not(.eyebrow) { color: var(--muted); font-size: 15px; max-width: 420px; }
.leaders-links { display: grid; gap: 14px; align-content: center; }
.leaders-links a { position: relative; border: 1px solid #aa7ccc30; border-radius: 12px; padding: 25px 58px 25px 26px; background: linear-gradient(130deg, #281939, #1b1226); transition: border-color .2s, transform .2s; }
.leaders-links a:hover { border-color: #bb8fec; transform: translateY(-3px); }
.leaders-links span { display: block; font-size: 9px; color: #c392ed; letter-spacing: 1.8px; text-transform: uppercase; }
.leaders-links strong { display: block; margin: 9px 0 6px; font-size: 23px; letter-spacing: -.5px; }
.leaders-links small { color: var(--muted); font-size: 12px; }
.leaders-links b { position: absolute; right: 25px; top: 50%; transform: translateY(-50%); color: #d3a7ff; font-size: 25px; font-weight: 400; }
.community-link strong { font-size: 24px; }
.ranking-page { min-height: calc(100svh - var(--header-height) - 120px); max-width: 1040px; padding-top: 32px; }
body:not([data-view="home"]) { background: radial-gradient(ellipse at 80% 0, #35204755, transparent 700px), var(--bg); }
.back-link { font-size: 12px; color: #c4a5da; display: inline-block; padding: 6px 0; margin-bottom: 20px; }
.ranking-page h1 { font-size: clamp(36px, 4.5vw, 52px); line-height: 1.12; letter-spacing: -1.8px; margin: 14px 0 18px; }
.ranking-page .lead { color: var(--muted); max-width: 600px; font-size: 15px; margin: 0; }
.ranking-page .section-top { align-items: end; gap: 50px; }
.ranking-update { flex-shrink: 0; padding-bottom: 3px; }
.ranking-update > span { display: block; font-size: 11px; color: var(--muted); }
.ranking-update .ranking-status { color: #cab0e1; max-width: 200px; margin-bottom: 7px; }
.ranking-update .stale { color: #eac08a; }
.ranking-switch { margin: 32px 0 26px; border-top: 1px solid #a882c125; padding-top: 26px; gap: 10px; }
.ranking-switch a { min-height: 44px; padding: 11px 23px; border-radius: 7px; font-size: 13px; background: #1f162b; }
.ranking-switch [aria-current] { background: #bc8ced; border-color: #d2abff; color: #200e35; font-weight: 700; }
.ranking-switch > span { font-size: 11px; }
.metric-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 20px; }
.metric-tab { border: 1px solid transparent; background: transparent; border-radius: 6px; font-size: 12px; color: #ab9abc; min-height: 44px; padding: 11px 14px; display: flex; gap: 8px; align-items: center; }
.metric-tab span { color: #cba4ed; font-size: 16px; }
.metric-tab:hover { background: #a375cc12; color: #e6d3f5; }
.metric-tab[aria-selected="true"] { border-color: #bc8bed44; background: #ba87ee19; color: #e9d3ff; }
#ranking-board { border: 1px solid #a37cb43d; border-radius: 14px; overflow: hidden; background: linear-gradient(125deg, #21162e, #17101f); box-shadow: 0 18px 60px #05020a25; }
.board-heading { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px; gap: 20px; }
.board-heading h2 { font-size: 23px; margin: 0; letter-spacing: -.6px; }
.board-heading > span { font-size: 11px; color: #bca2ce; background: #b382da12; border: 1px solid #b38ddc22; border-radius: 5px; padding: 5px 10px; }
.ranking-column-head { display: grid; grid-template-columns: 54px 1fr auto; gap: 16px; padding: 11px 28px; font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; color: #a78cbb; background: #ffffff03; border-block: 1px solid #ffffff0a; }
.ranking-row { padding: 17px 28px; min-height: 78px; gap: 16px; border-top: 1px solid #ffffff08; }
.ranking-row:first-child { border-top: 0; }
.podium-row { background: #b788e408; }
.ranking-row:hover { background: #b788e410; }
.placing { width: 54px; font-size: 13px; font-family: Minecraft, monospace; color: #8e779e; }
.ranking-row:first-child .placing { color: #f1d18c; }
.ranking-row:nth-child(2) .placing { color: #d2c0e0; }
.ranking-row:nth-child(3) .placing { color: #c8a185; }
.ranking-identity { flex: 1; gap: 14px; min-width: 0; }
.ranking-name { gap: 6px; }
.ranking-name strong { font-size: 15px; font-weight: 600; }
.ranking-name small { font-size: 11px; }
.player-avatar { width: 42px; height: 42px; border-radius: 6px; }
.rank-badge { max-width: 110px; height: 15px; }
.ranking-value { font-size: 17px; font-weight: 600; margin-left: 14px; color: #d8b7f5; }
.podium-row .ranking-value { color: #ead5ff; }
.team-crest { width: 42px; height: 42px; flex-shrink: 0; }
.ranking-empty { padding: 56px 24px 70px; text-align: center; }
.empty-symbol { color: #c49beb; font-size: 30px; display: block; margin-bottom: 18px; }
.ranking-empty h3 { font-size: 20px; color: #ede0f6; }
.ranking-empty p { max-width: 420px; margin: 12px auto 0; }
.ranking-note { margin-top: 20px; font-size: 12px; color: #b6a2c6; }
.ranking-join { margin-top: 48px; padding: 30px 0 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.ranking-join p { color: var(--muted); font-size: 14px; margin: 0; }
.ranking-join strong { color: #e6d6f2; font-size: 17px; font-weight: 500; }
.ranking-join .button { font-size: 12px; }
.team-detail { max-width: 600px; }
.team-members { gap: 15px; }
.member-row strong { overflow-wrap: anywhere; min-width: 0; }
.member-row .rank-badge { margin-left: auto; }
#copy-dialog { max-width: 470px; padding: 26px; }
#copy-dialog p { color: var(--muted); font-size: 14px; }
#manual-address { display: block; background: #291d38; color: white; border: 1px solid #bc8bf36b; width: 100%; border-radius: 6px; font: inherit; padding: 15px; }
#manual-address:focus-visible { outline: 2px solid #d6b3ff; outline-offset: 3px; }
#youtube-player { aspect-ratio: 16/9; background: #08050d; }
#youtube-player iframe { width: 100%; height: 100%; border: 0; }
#video-source { display: inline-block; margin-top: 14px; }
footer { background: #110c19; }

@media (max-width: 1150px) {
 :root { --header-height: 128px; }
 .site-header { height: var(--header-height); display: grid; grid-template-columns: 1fr auto; grid-template-rows: 76px 52px; gap: 0 20px; padding: 0 32px; }
 .site-header nav { grid-column: 1/-1; grid-row: 2; display: flex; position: static; gap: 28px; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; padding: 0; border: 0; background: none; }
 .site-header nav::-webkit-scrollbar { display: none; }
 .site-header nav a { padding: 14px 0; font-size: 12px; flex-shrink: 0; }
 .nav-ip { grid-row: 1; grid-column: 2; font-size: 12px; }
 .intro, .leaders-preview { gap: 45px; }
 .hero { min-height: 610px; }
 .ranking-page .section-top { gap: 25px; }
}
@media (max-width: 700px) {
 .section { width: calc(100% - 40px); padding: 58px 0; }
 .site-header { padding: 0 20px; }
 .site-header nav { gap: 24px; }
 .brand { width: 116px; }
 .hero { min-height: 600px; height: calc(92svh - var(--header-height)); max-height: 900px; }
 .hero-content { padding: 40px 20px 90px; }
 .hero-logo { width: min(570px,90%); margin: 30px 0 25px; }
 .hero h1 { font-size: 28px; letter-spacing: -.8px; }
 .hero .eyebrow { font-size: 9px; letter-spacing: 1.5px; }
 .hero-description { font-size: 14px; }
 .hero-actions { flex-direction: column; align-items: center; }
 .hero-actions .button { width: 255px; }
 .compatibility { font-size: 11px; }
 .feature-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; font-size: 10px; }
 .feature-strip b { display: none; }
 .section-top { display: block; }
 .section-top > p { margin: 20px 0 0; }
 .intro, .community, .leaders-preview { grid-template-columns: 1fr; gap: 24px; }
 .event-grid { grid-template-columns: 1fr; }
 .event-media { height: auto; aspect-ratio: 16/9; }
 .event-copy { padding: 25px; }
 .trailer-poster { aspect-ratio: 16/9; }
 .trailer-caption { display: block; padding: 22px 22px 10px; min-height: 220px; }
 .trailer-caption h3 { font-size: 22px; }
 .trailer-caption .text-link { display: inline-block; margin-top: 8px; }
 .trailer-caption .eyebrow { letter-spacing: 1.5px; }
 .carousel-controls { padding: 10px 22px 22px; gap: 10px; }
 .carousel-pause { font-size: 10px; padding-left: 8px; }
 .play-circle { width: 55px; height: 55px; }
 .ranking-page { padding-top: 30px; }
 .back-link { margin-bottom: 23px; }
 .ranking-page h1 { font-size: 43px; }
 .ranking-page .lead { font-size: 14px; }
 .ranking-update { margin-top: 20px; }
 .ranking-update .ranking-status { max-width: none; }
 .ranking-switch { flex-wrap: wrap; margin-top: 26px; }
 .ranking-switch > span { margin: 8px 0 0; width: 100%; font-size: 10px; }
 .metric-tabs { gap: 5px; }
 .metric-tab { padding: 10px 12px; font-size: 11px; }
 .board-heading { padding: 23px 20px; }
 .board-heading h2 { font-size: 21px; }
 .ranking-column-head { grid-template-columns: 30px 1fr auto; padding: 11px 20px; gap: 12px; font-size: 8px; letter-spacing: 1px; }
 .ranking-row { padding: 16px 20px; gap: 12px; }
 .placing { width: 30px; font-size: 11px; }
 .ranking-identity { gap: 10px; }
 .ranking-name strong { font-size: 13px; }
 .ranking-name small { font-size: 9px; }
 .player-avatar, .team-crest { width: 34px; height: 34px; }
 .ranking-value { font-size: 14px; margin-left: 4px; }
 .rank-badge { height: 13px; max-width: 90px; }
 .ranking-join { flex-direction: column; text-align: center; }
 .connection-grid { grid-template-columns: 1fr; }
 footer { flex-direction: column; gap: 16px; text-align: center; }
 .member-row { flex-wrap: wrap; }
}
@media (max-width: 360px) {
 .site-header { padding-inline: 12px; }
 .brand { width: 95px; }
 .nav-ip { padding: 10px; gap: 7px; font-size: 10px; }
 .section { width: calc(100% - 28px); }
 .ranking-row { padding: 16px 14px; gap: 8px; }
 .ranking-name strong { font-size: 12px; }
 .ranking-value { font-size: 12px; }
 .trailer-caption { min-height: 255px; }
}
.motion-paused .carousel-track { transition: none; }
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { animation: none !important; transition: none !important; }
 .reveal.pending { opacity: 1; transform: none; }
}

/* Conquest Chronicle */
:root {
 --void: #07050b;
 --obsidian: #120c19;
 --royal: #8f32d9;
 --amethyst: #c776ff;
 --lavender: #e9d3ff;
 --bone: #f7f3fa;
 --header-height: 82px;
}
body[data-view="home"] { background: var(--void); color: var(--bone); overflow-x: clip; }
body[data-view="home"] main { position: relative; }
body[data-view="home"] .site-header {
 height: var(--header-height); padding-inline: max(24px,calc((100% - 1480px)/2)); gap: 26px;
 background: #09060ddb; border-color: #e9d3ff1c; backdrop-filter: blur(22px) saturate(1.2);
}
.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-control {
 min-height: 42px; border: 1px solid #c776ff35; border-radius: 8px; padding: 0 12px;
 background: #170e22; color: #cbbbd5; display: inline-flex; align-items: center; gap: 8px; font-size: 11px;
}
.header-control:hover, .header-control[aria-pressed="true"] { color: white; border-color: #c776ff8c; background: #261335; }
.sound-icon { width: 16px; height: 15px; display: flex; align-items: end; gap: 2px; }
.sound-icon i { width: 2px; height: 6px; background: currentColor; }
.sound-icon i:nth-child(2) { height: 12px; }.sound-icon i:nth-child(3) { height: 9px; }
.copy-icon { width: 16px; height: 16px; border: 2px solid currentColor; position: relative; flex: 0 0 auto; }
.copy-icon::before { content:""; position:absolute; width:9px; height:9px; border:1px solid currentColor; left:4px; top:4px; }
body[data-view="home"] .nav-ip { min-height: 42px; }
body[data-view="home"] .site-header nav { gap: 21px; }
body[data-view="home"] .site-header nav a { font-size: 12px; }
body[data-view="home"] .site-header .brand { width: 128px; }
.footer-links { display: flex; align-items: center; gap: 18px; font-size: 11px; }
.footer-links a { color: #d4b8ed; }
.footer-links a:hover { color: white; }

.rift-rail {
 position: absolute; top: 45rem; bottom: 46rem; left: max(22px,calc((100% - 1480px)/2 - 36px));
 width: 1px; background: #cf7cff25; z-index: 4; pointer-events: none;
}
.rift-progress {
 display: block; width: 3px; height: var(--rift-progress,0%); margin-left: -1px;
 background: linear-gradient(#f4ddff,#a13ae9 75%,transparent); box-shadow: 0 0 18px #c65fff;
}
.rift-rail i {
 position: absolute; left: -4px; width: 9px; height: 9px; background: #13091d;
 border: 1px solid #c776ff; transform: rotate(45deg); box-shadow: 0 0 13px #ad47e7;
}
.rift-rail i:nth-of-type(1) { top: 7%; }.rift-rail i:nth-of-type(2) { top: 28%; }
.rift-rail i:nth-of-type(3) { top: 49%; }.rift-rail i:nth-of-type(4) { top: 70%; }.rift-rail i:nth-of-type(5) { top: 91%; }

body[data-view="home"] .hero {
 height: calc(100svh - var(--header-height)); min-height: 680px; max-height: 980px;
 align-items: center; background: #09070d; isolation: isolate;
}
body[data-view="home"] .hero-film { filter: saturate(.86) contrast(1.05); transform: scale(1.025); }
body[data-view="home"] .hero-shade {
 background:
  radial-gradient(circle at 50% 42%,transparent 0 18%,#09050d33 48%,#07050bdd 100%),
  linear-gradient(180deg,#07050b1a 0%,#07050b3d 55%,#07050b 100%);
}
.hero-grain {
 position: absolute; inset: 0; opacity: .18; mix-blend-mode: screen;
 background-image: radial-gradient(circle,#e6c8ff 0 1px,transparent 1.5px);
 background-size: 93px 87px; mask-image: linear-gradient(transparent 18%,black 60%,transparent);
}
body[data-view="home"] .hero-content { padding: 64px 24px 102px; }
body[data-view="home"] .hero-kicker { font-family: Minecraft,monospace; font-size: 10px; color: #e9d9f5; }
body[data-view="home"] .hero-logo {
 width: min(660px,68vw); margin: 8px 0 5px;
 filter: drop-shadow(0 18px 45px #8f32d966); animation: chronicle-logo 7s ease-in-out infinite;
}
body[data-view="home"] .hero h1 {
 max-width: 840px; margin: 4px auto 13px; font-size: clamp(35px,4.4vw,66px); line-height: 1.01;
 font-family: Minecraft, sans-serif; font-weight: 400; letter-spacing: -.035em; text-wrap: balance;
}
body[data-view="home"] .hero h1 em { color: #e3c4ff; }
body[data-view="home"] .hero-description { max-width: 650px; margin-inline: auto; color: #d6cadc; }
body[data-view="home"] .hero-actions { margin-top: 31px; }
body[data-view="home"] .primary {
 background: #d8adff; color: #190925; border-color: #f2ddff; box-shadow: 0 12px 50px #8022bd50;
}
body[data-view="home"] .glass { background: #100b17cc; border-color: #dab5ff52; }
body[data-view="home"] .hero-bottom { bottom: 23px; }
body[data-view="home"] .hero-bottom a { font-family: Minecraft,monospace; font-size: 9px; }
body[data-view="home"] .feature-strip {
 position: relative; z-index: 5; padding: 20px 24px; background: #0c0811; border-block: 1px solid #e6ceff18;
}

.chapter {
 width: min(1240px,calc(100% - 96px)); margin-inline: auto; padding: 126px 0; position: relative;
}
.chapter[data-chapter]::before,.end-chapter[data-chapter]::before {
 content:attr(data-chapter); position:absolute; top:78px; left:0; color:#b785da;
 font:9px Minecraft,sans-serif; letter-spacing:.1em;
}
.chapter-heading { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(260px,.72fr); gap: 70px; align-items: end; margin-bottom: 57px; }
.chapter-heading .eyebrow { grid-column: 1/-1; margin: 0 0 -42px; }
.chapter-heading h2 { margin: 0; max-width: 760px; }
.chapter-heading > p:last-child { color: #ad9fb4; margin: 0 0 7px; max-width: 410px; font-size: 15px; }
body[data-view="home"] h2 { font-size: clamp(42px,5.4vw,76px); line-height: .98; letter-spacing: -.05em; font-weight: 760; }
body[data-view="home"] h2 { font-family:Minecraft,sans-serif; font-weight:400; letter-spacing:-.035em; }
body[data-view="home"] h2 em { color: #c986ff; }
body[data-view="home"] .eyebrow { font-family: Minecraft,monospace; font-size: 9px; letter-spacing: .18em; color: #c895ed; }
.world-chapter { display: grid; grid-template-columns: .74fr 1.26fr; gap: 72px; align-items: center; min-height: 770px; }
.chapter-copy h2 { margin: 18px 0 30px; }
.chapter-copy .lead { color: #b8aabc; font-size: 16px; max-width: 480px; }
.chapter-actions { display: flex; gap: 18px; margin-top: 33px; }
.chapter-actions .text-button { width: auto; min-width: 160px; }
.world-window { min-height: 560px; position: relative; overflow: hidden; border: 1px solid #d5b4f72e; background: #17101e; }
.world-window::before { content: ""; position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 90px #09050dd9; pointer-events: none; }
.world-window img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; filter: saturate(.78) contrast(1.06) brightness(.68); }
.world-coordinate {
 position: absolute; left: 24px; bottom: 24px; z-index: 2; font: 8px/1.9 Minecraft,monospace;
 color: #a993b6; letter-spacing: .12em;
}
.world-coordinate b { color: #f1e5f8; font-weight: 400; }
.world-crosshair { position: absolute; z-index: 2; inset: 50% auto auto 50%; width: 26px; height: 26px; transform: translate(-50%,-50%); }
.world-crosshair::before,.world-crosshair::after { content:""; position:absolute; background:#fff9; }
.world-crosshair::before { width:1px;height:100%;left:50%; }.world-crosshair::after { height:1px;width:100%;top:50%; }

.powers-chapter { border-top: 1px solid #e5d3f51a; }
.power-board { display: grid; grid-template-columns: 1.2fr .8fr .8fr; grid-template-rows: 340px 250px; gap: 14px; }
.power-panel { position: relative; overflow: hidden; border: 1px solid #d6b3f42a; background: #120c18; padding: 35px; }
.power-panel::after { content:""; position:absolute; inset:auto -20% -55% 30%; height:80%; background:radial-gradient(circle,#ab45e933,transparent 68%); }
.power-panel small { position: relative; z-index: 2; font: 9px Minecraft,monospace; letter-spacing:.14em; color:#c494e8; }
.power-panel h3 { position: relative; z-index: 2; font-size: clamp(27px,3vw,42px); line-height:1.03; letter-spacing:-.04em; margin:25px 0 17px; }
.power-panel p { position: relative; z-index:2; color:#aa9cad; font-size:14px; max-width:400px; }
.power-race { grid-row: 1/3; padding-top: 270px; background:#170b21; }
.power-mark { position:absolute; top:38px; left:50%; transform:translateX(-50%); width:180px; height:180px; fill:#c264ff; filter:drop-shadow(0 0 34px #a536e5); }
.power-heart { background:#170b17; }.pixel-heart { position:absolute; right:25px; top:22px; width:105px; height:95px; fill:#e876c4; opacity:.9; filter:drop-shadow(0 0 28px #d651ad77); }
.power-shard { background:#100d20; }.shard-glyph { position:absolute; right:28px; top:12px; width:92px; height:112px; fill:#8c6dff; transform:rotate(10deg); filter:drop-shadow(0 0 30px #8464ff); }
.power-world { grid-column:2/4; display:grid; grid-template-columns:.6fr 1fr; align-items:center; }
.power-world ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:18px; position:relative; z-index:2; }
.power-world li { padding:13px 0; border-bottom:1px solid #ffffff1a; color:#d8cbe0; font-size:13px; }

.events-chapter { border-top: 1px solid #e5d3f51a; }
.relics { display: grid; gap: 96px; }
.relic { display: grid; grid-template-columns: 1.3fr .7fr; min-height: 590px; border: 1px solid #d4b2ec29; background:#0e0a13; }
.relic-reverse { grid-template-columns: .7fr 1.3fr; }
.relic-reverse .relic-media { grid-column:2; grid-row:1; }.relic-reverse .relic-copy { grid-column:1; grid-row:1; }
.relic-media { position:relative; min-height:560px; overflow:hidden; }
.relic-media::after { content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 45%,#0e0a13 100%); }
.relic-reverse .relic-media::after { background:linear-gradient(270deg,transparent 45%,#0e0a13 100%); }
.relic-media video { width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(1.08); }
.relic-number { position:absolute;bottom:-30px;left:20px;z-index:2;font-size:190px;font-weight:900;line-height:1;color:#ffffff0a; }
.relic-copy { padding: 64px 52px; display:flex;flex-direction:column;justify-content:center; }
.relic-copy h3 { font-size:clamp(34px,3.6vw,53px);line-height:1.03;letter-spacing:-.045em;margin:20px 0; }
.relic-copy h3 small { display:block; margin-bottom:18px; color:#c895ed; font:10px Minecraft,sans-serif; letter-spacing:.08em; }
.relic-copy > p:not(.eyebrow) { color:#aa9ead;font-size:14px; }
.relic-copy .text-button { margin-top:32px; }

.end-chapter {
 min-height: 920px; display:grid;grid-template-columns:1fr 1fr;place-items:center;position:relative;overflow:hidden;
 background:#050308;border-block:1px solid #af65e62d;
}
.end-chapter[data-chapter]::before { left:calc(50% + 3px); top:225px; z-index:3; }
.end-sky { position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 45%,#6d238a47,transparent 37%),#050308; }
.end-sky::before { content:"";position:absolute;inset:0;background-image:radial-gradient(circle,#e7ceff 0 1px,transparent 1.4px);background-size:79px 83px;opacity:.28; }
.end-sky span { position:absolute;width:1px;height:43%;top:-5%;background:linear-gradient(transparent,#b05ee880,transparent);transform:rotate(21deg); }
.end-sky span:nth-child(1){left:19%}.end-sky span:nth-child(2){left:54%;height:65%;transform:rotate(-15deg)}.end-sky span:nth-child(3){right:16%;height:52%}
.end-visual,.end-copy { position:relative;z-index:2; }
.end-visual { width:100%;height:520px;display:grid;place-items:center;perspective:900px; }
.dragon-egg {
 width:min(430px,82%);height:auto;position:relative;z-index:2;display:block;image-rendering:auto;
 filter:drop-shadow(0 0 42px #b94ee054) drop-shadow(0 32px 48px #000b);animation:egg-float 5.5s ease-in-out infinite;
}
.egg-ring { position:absolute;width:430px;height:140px;border:1px solid #a84bdc66;border-radius:50%;transform:rotateX(68deg);box-shadow:0 0 35px #8f32d933;animation:ring-turn 12s linear infinite; }
.ring-two { width:330px;height:100px;animation-direction:reverse;animation-duration:8s;border-color:#e4bcff5c; }
.end-copy { width:min(520px,80%);justify-self:start; }
.end-copy h2 { margin:19px 0 28px; }.end-copy>p:not(.eyebrow){color:#b1a3b6;max-width:500px;}
.end-sequence { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:42px;background:#d7b1ef25;border:1px solid #d7b1ef25; }
.end-sequence span { background:#0a060e;padding:20px 15px;color:#8f789c;font:9px/1.8 Minecraft,monospace; }
.end-sequence b { color:#dfcce7;font-weight:400; }

.leaders-chapter { border-top:1px solid #e5d3f51a; }
.leaders-stage { display:grid;grid-template-columns:1fr 1fr;border:1px solid #d9b7f32b; }
.leaders-stage a { min-height:360px;padding:46px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;background:#100b16;overflow:hidden; }
.leaders-stage a+a { border-left:1px solid #d9b7f32b;background:#150c1b; }
.leaders-stage a::before { content:"";position:absolute;width:310px;height:310px;border:1px solid #bf6aff2d;border-radius:50%;right:-100px;top:-130px;box-shadow:0 0 0 45px #a84cdd0b,0 0 0 90px #a84cdd08;transition:transform .55s; }
.leaders-stage a:hover::before { transform:scale(1.13); }
.leader-index { font:9px Minecraft,monospace;color:#c37cf0;letter-spacing:.13em; }
.leaders-stage strong { font-size:clamp(30px,3.5vw,48px);letter-spacing:-.04em;margin:16px 0 10px; }
.leaders-stage small { color:#a99aaa;font-size:13px;max-width:400px;line-height:1.6; }
.leaders-stage b { margin-top:34px;color:#d5b1ed;font-size:12px;font-weight:500; }

body[data-view="home"] .trailer-section { padding-top:126px; }
body[data-view="home"] .trailer-carousel { border-radius:0;background:#0d0912;border-color:#d9b7f32b; }
body[data-view="home"] .trailer-poster { aspect-ratio:16/7; }
body[data-view="home"] .trailer-caption { background:#0d0912; }
.poster-label,.trailer-meta { font:10px Minecraft,sans-serif; color:#d5b4ee; letter-spacing:.05em; }
.trailer-meta { margin:0 0 10px; }
.play-circle svg { width:23px; height:23px; fill:currentColor; }
body[data-view="home"] .community { display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;border-top:1px solid #e5d3f51a; }
.community-head>p:last-child { color:#a99baa;max-width:460px;font-size:14px; }
body[data-view="home"] .community-link { padding:32px 0; }
body[data-view="home"] .community-link strong { font-size:clamp(24px,3vw,36px); }

body[data-view="home"] .join { position:relative;min-height:720px;display:grid;place-items:center;text-align:center;overflow:hidden;border-top:1px solid #d4b6eb2b; }
.join-backdrop { position:absolute;inset:0;background:linear-gradient(#07050bd9,#07050bee),url('/assets/world.jpg') center/cover; }
.join-content { position:relative;z-index:2;width:min(820px,calc(100% - 40px)); }
body[data-view="home"] .join h2 { margin:19px 0 38px; }
body[data-view="home"] .connection-grid { max-width:none; }
body[data-view="home"] .connection { background:#100a16e8;border-color:#c77bf65c;border-radius:0;padding:29px; }
body[data-view="home"] .connection:hover { background:#21102d;border-color:#d9a4ff; }
.discord-button { width:max-content;margin:20px auto 0;background:#d5a6ff;color:#190925;border-color:#efd9ff; }
body[data-view="home"] footer { background:#07050b; }
body[data-view="home"] .reveal { transition:opacity .75s,transform .75s cubic-bezier(.2,.7,.2,1); }
body[data-view="home"] .reveal.pending { opacity:0;transform:translateY(32px); }

@keyframes chronicle-logo { 50% { transform:translateY(-7px);filter:drop-shadow(0 25px 58px #aa3ce67d); } }
@keyframes egg-float { 50% { transform:translateY(-22px) rotateY(8deg); } }
@keyframes ring-turn { to { transform:rotateX(68deg) rotateZ(360deg); } }

@media(max-width:1250px){
 body[data-view="home"] .site-header nav { gap:17px; }
 body[data-view="home"] .site-header nav a { font-size:11px; }
 .control-label,.copy-label { display:none; }
 .rift-rail { display:none; }
 .chapter { width:min(1120px,calc(100% - 64px)); }
}
@media(max-width:980px){
 body[data-view="home"] .site-header { height:128px;display:grid;grid-template-columns:1fr auto;grid-template-rows:76px 52px;padding:0 28px; }
 body[data-view="home"] .site-header nav { grid-column:1/-1;grid-row:2;display:flex;position:static;overflow-x:auto;justify-content:flex-start;padding:0;background:none;border:0; }
 .header-actions { grid-row:1;grid-column:2; }
 body[data-view="home"] .hero { height:calc(100svh - 128px);min-height:660px; }
 .chapter-heading { grid-template-columns:1fr;gap:24px; }
 .chapter-heading .eyebrow { grid-column:auto;margin:0; }
 .world-chapter { grid-template-columns:1fr;gap:45px; }
 .chapter-copy { max-width:680px; }
 .world-window,.world-window img { min-height:470px; }
 .power-board { grid-template-columns:1fr 1fr;grid-template-rows:360px 330px 240px; }
 .power-race { grid-row:1/3; }.power-shard{grid-column:2}.power-world{grid-column:1/3}
 .relic,.relic-reverse { grid-template-columns:1fr; }
 .relic-reverse .relic-media,.relic-reverse .relic-copy { grid-column:1;grid-row:auto; }
 .relic-reverse .relic-media { grid-row:1; }
 .relic-media { min-height:430px; }.relic-media::after,.relic-reverse .relic-media::after{background:linear-gradient(transparent 55%,#0e0a13 100%)}
 .end-chapter { grid-template-columns:1fr;min-height:1050px;padding:90px 0; }
 .end-visual { height:430px; }.end-copy{justify-self:center;width:min(660px,calc(100% - 64px));text-align:center}
 body[data-view="home"] .community{grid-template-columns:1fr;gap:30px}
}
@media(max-width:700px){
 :root{--header-height:124px}
 body[data-view="home"] .site-header{height:124px;padding:0 18px;grid-template-rows:72px 52px}
 body[data-view="home"] .site-header .brand{width:105px}
 .header-control{padding:0 10px}.header-actions{gap:7px}
 body[data-view="home"] .nav-ip{padding:10px;font-size:10px}
 body[data-view="home"] .hero{height:calc(100svh - 124px);min-height:650px}
 body[data-view="home"] .hero-content{padding:42px 18px 94px}
 body[data-view="home"] .hero-logo{width:94%;margin:25px 0 18px}
 body[data-view="home"] .hero h1{font-size:36px;max-width:390px}
 body[data-view="home"] .hero-description{font-size:14px}
 body[data-view="home"] .hero-description br{display:none}
 body[data-view="home"] .hero-actions{flex-direction:column;align-items:center}
 body[data-view="home"] .hero-actions .button{width:270px}
 body[data-view="home"] .hero-bottom a{max-width:150px;line-height:1.7}
 body[data-view="home"] .feature-strip{grid-template-columns:1fr 1fr}
 body[data-view="home"] .feature-strip span:last-child{grid-column:1/-1}
 .chapter{width:calc(100% - 40px);padding:82px 0}
 body[data-view="home"] h2{font-size:44px}
 .world-chapter{min-height:auto}
 .world-window,.world-window img{min-height:400px}
 .chapter-actions{flex-direction:column;align-items:flex-start}
 .power-board{display:grid;grid-template-columns:1fr;grid-template-rows:none}
 .power-race,.power-heart,.power-shard,.power-world{grid-column:auto;grid-row:auto;min-height:330px}
 .power-race{padding-top:235px}
 .power-world{min-height:auto;grid-template-columns:1fr;padding:30px}
 .power-world ul{margin-top:25px}
 .relics{gap:42px}.relic-media{min-height:340px}.relic-copy{padding:38px 28px 42px}
 .end-chapter{min-height:980px}.end-visual{height:400px}.dragon-egg{width:min(330px,86%)}.egg-ring{width:330px}
 .end-chapter[data-chapter]::before{left:50%;top:540px;transform:translateX(-50%);white-space:nowrap}
 .end-copy{width:calc(100% - 40px)}
 .end-sequence{grid-template-columns:1fr}.end-sequence span{padding:15px}
 .leaders-stage{grid-template-columns:1fr}.leaders-stage a{min-height:300px;padding:30px}.leaders-stage a+a{border-left:0;border-top:1px solid #d9b7f32b}
 body[data-view="home"] .trailer-section{padding-top:82px}
 body[data-view="home"] .trailer-poster{aspect-ratio:16/10}
 body[data-view="home"] .community{display:block}
 .community-head{margin-bottom:35px}
 body[data-view="home"] .join{min-height:690px}
 .footer-links{flex-wrap:wrap;justify-content:center}
}
@media(max-width:390px){
 body[data-view="home"] .hero h1{font-size:32px}
 body[data-view="home"] h2{font-size:39px}
 .chapter{width:calc(100% - 28px)}
 .world-window,.world-window img{min-height:350px}
 .power-panel{padding-inline:25px}
 .power-race{padding-top:220px}
 .power-mark{font-size:150px}
 .relic-media{min-height:300px}
 .end-copy{width:calc(100% - 28px)}
 .leaders-stage a{padding:26px}
}
.motion-paused .dragon-egg,.motion-paused .egg-ring,.motion-paused .hero-logo{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){
 .dragon-egg,.egg-ring,.hero-logo{animation:none!important}
 .rift-progress{height:100%}
}
.close span,.close span::after{display:block;width:18px;height:2px;background:currentColor}.close span{transform:rotate(45deg)}.close span::after{content:"";transform:rotate(90deg)}