:root{
    --bg:#08090d;
    --bg-soft:#0d0f14;
    --panel:rgba(14,16,22,.88);
    --panel-strong:#11141b;
    --line:rgba(255,255,255,.12);
    --line-bright:rgba(255,255,255,.26);
    --text:#f4f1e9;
    --muted:#9b9da6;
    --gold:#d8b56b;
    --gold-bright:#f1d38e;
    --gold-dim:rgba(216,181,107,.18);
    --red:#a94032;
    --red-bright:#e05e48;
    --blue:#687f9f;
    --font-display:"Cinzel",Georgia,serif;
    --font-body:"Inter",Arial,sans-serif;
    --header-height:76px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6;overflow-x:hidden}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
h1,h2,h3,p,blockquote{margin:0}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:.94;letter-spacing:-.035em}
h1,h2{white-space:pre-line}
h2{font-size:clamp(3rem,5.25vw,6.8rem)}
::selection{background:var(--gold);color:#08090d}

.site-frame {
    position: relative;

    width: 100%;

    margin: 0 auto;

}

.site-noise{
    position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.045;
    background-image:repeating-linear-gradient(117deg,rgba(255,255,255,.24) 0,rgba(255,255,255,.24) 1px,transparent 1px,transparent 4px);
    background-size:7px 7px;
}
.container{
    width:100%;
    max-width:1480px;

    margin:0 auto;

    padding-left:56px;
    padding-right:56px;

    position:relative;
    z-index:2;
}
.story-section{position:relative;isolation:isolate;overflow:hidden}
.story-section:target{scroll-margin-top:var(--header-height)}
.story-section::after{
    content:"";position:absolute;left:56px;right:56px;bottom:0;height:1px;z-index:4;
    background:linear-gradient(90deg,transparent,var(--line),transparent);
}

.site-header{
    position:fixed;left:0;right:0;top:0;height:var(--header-height);z-index:100;
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:36px;padding:0 42px;
    border-bottom:1px solid transparent;transition:background .3s,border-color .3s,backdrop-filter .3s;
}
.site-header.scrolled{background:rgba(8,9,13,.88);border-color:var(--line);backdrop-filter:blur(18px)}
.brand{display:inline-flex;align-items:center;gap:12px;min-width:max-content}
.brand img{width:38px;height:38px; margin-left: 25px; object-fit:cover}
.brand span{display:grid;line-height:1.15}
.brand b{font-family:var(--font-display);font-size:.88rem;letter-spacing:.12em}
.brand small{font-size:.52rem;letter-spacing:.28em;color:var(--gold);margin-top:4px}
.main-nav{justify-self:center;display:flex;align-items:center;gap:clamp(16px,1.6vw,32px)}
.main-nav a{
    position:relative;padding:28px 0 24px;color:#b8b8bd;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.main-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:18px;height:1px;background:var(--gold);transition:right .25s}
.main-nav a:hover,.main-nav a.active{color:var(--text)}
.main-nav a:hover::after,.main-nav a.active::after{right:0}
.header-actions{display:flex;align-items:center;gap:20px}
.language-switcher{display:flex;align-items:center;gap:7px;font-size:.66rem;letter-spacing:.12em}
.language-switcher span{color:#55575e}
.lang-btn{border:0;background:transparent;padding:4px 0;color:#74767d;cursor:pointer}
.lang-btn.active{color:var(--gold-bright)}
.header-cta{
    min-width:122px;padding:10px 16px;border:1px solid rgba(216,181,107,.45);text-align:center;
    font-size:.63rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:rgba(216,181,107,.06);
}
.header-cta:hover{background:var(--gold);color:#090a0d}
.menu-toggle{display:none;width:42px;height:42px;border:1px solid var(--line);background:rgba(8,9,13,.6);padding:12px;cursor:pointer}
.menu-toggle span{display:block;height:1px;background:var(--text);margin:5px 0;transition:.25s}

.chapter-rail{
    position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:80;
    display:flex;flex-direction:column;gap:5px;padding:10px 8px;background:rgba(8,9,13,.34);backdrop-filter:blur(9px);
}
.chapter-rail a{display:flex;align-items:center;justify-content:flex-end;gap:7px;height:18px;color:#696b72}
.chapter-rail span{font-size:.48rem;font-weight:700;letter-spacing:.08em;opacity:0;transition:.25s}
.chapter-rail i{display:block;width:12px;height:1px;background:currentColor;transition:.25s}
.chapter-rail a:hover,.chapter-rail a.active{color:var(--gold-bright)}
.chapter-rail a:hover span,.chapter-rail a.active span{opacity:1}
.chapter-rail a:hover i,.chapter-rail a.active i{width:24px}

.chapter-kicker{display:flex;align-items:center;gap:12px;margin-bottom:20px;color:var(--gold);font-size:.62rem;letter-spacing:.22em}
.chapter-kicker span{font-weight:700}
.chapter-kicker i{width:46px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.chapter-kicker b{font-size:inherit}
.eyebrow{color:#b5b0a5;font-size:.68rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;margin-bottom:22px}
.section-heading{padding-top:clamp(110px,9vw,160px);padding-bottom:58px}
.section-heading h2{max-width:1050px}
.section-heading.centered{text-align:center}
.section-heading.centered .chapter-kicker{justify-content:center}
.section-heading.centered h2{margin-inline:auto}
.btn{
    min-width:210px;height:56px;display:inline-flex;align-items:center;justify-content:space-between;gap:24px;padding:0 22px;
    border:1px solid var(--line-bright);font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;transition:.25s;
}
.btn i{font-style:normal;font-size:1rem}
.btn-primary{background:var(--gold);border-color:var(--gold);color:#0b0b0d}
.btn-primary:hover{background:var(--gold-bright);transform:translateY(-2px)}
.btn-ghost{background:rgba(8,9,13,.34)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-2px)}

/* 01 — Portal */
.hero-section{height:100svh;min-height:680px;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;background:url("../assets/optimized/hero-scene.webp") center 22%/cover no-repeat;z-index:-3;transform:scale(1.015)}
.hero-vignette{
    position:absolute;inset:0;z-index:-2;
    background:linear-gradient(90deg,rgba(5,6,9,.96) 0%,rgba(5,6,9,.72) 34%,rgba(5,6,9,.1) 67%,rgba(5,6,9,.52) 100%),
    linear-gradient(0deg,rgba(7,8,11,.88) 0%,transparent 40%,rgba(7,8,11,.42) 100%);
}
.hero-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:end;padding-top:var(--header-height)}
.hero-content{width:100%;min-width:0;max-width:1040px;padding:36px 0 64px}
.hero-content h1{font-size:clamp(4.8rem,6.7vw,8rem);white-space:pre;text-shadow:0 14px 60px rgba(0,0,0,.48)}
.hero-lead{max-width:620px;color:#c7c5c1;font-size:clamp(.95rem,1.15vw,1.18rem);line-height:1.75;margin:26px 0 34px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-intel{align-self:end;margin-bottom:68px;border-top:1px solid var(--line);background:rgba(8,9,13,.44);backdrop-filter:blur(8px)}
.intel-line{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:13px 4px;border-bottom:1px solid var(--line)}
.intel-line span{color:var(--muted);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
.intel-line b{font-family:var(--font-display);font-size:.72rem;letter-spacing:.12em;color:var(--gold-bright)}
.scroll-cue{position:absolute;left:50%;bottom:24px;z-index:3;display:flex;align-items:center;gap:10px;transform:translateX(-50%);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:#aaa}
.scroll-cue i{position:relative;width:36px;height:1px;background:#777}
.scroll-cue i::after{content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;border-right:1px solid #aaa;border-bottom:1px solid #aaa;transform:rotate(45deg)}

/* 02 — Origin */
.origin-section{min-height:100svh;display:flex;align-items:center;padding:120px 0 70px}
.origin-backdrop{position:absolute;inset:0;z-index:-0;background:url("../assets/optimized/origin-bg.webp") center/cover no-repeat}
.origin-section::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(7,8,11,.96) 0%,rgba(7,8,11,.7) 46%,rgba(7,8,11,.58) 100%),linear-gradient(0deg,var(--bg),transparent 34%,rgba(8,9,13,.62))}
.origin-layout{display:grid;grid-template-columns:minmax(360px,.75fr) 1.25fr;gap:9vw;align-items:center}
.origin-copy{max-width:660px}
.origin-copy h2{font-size:clamp(3.5rem,5.6vw,7rem)}
html[lang="ru"] .origin-copy h2{font-size:clamp(3.1rem,4vw,4.85rem)}
.origin-copy blockquote{margin:30px 0 20px;padding-left:22px;border-left:1px solid var(--gold);font-family:var(--font-display);font-size:clamp(1.05rem,1.45vw,1.45rem);color:var(--gold-bright)}
.origin-copy>p:last-child{color:#bab8b3;max-width:610px}
.origin-chronicle{display:grid;grid-template-columns:repeat(2,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line)}
.origin-chronicle article{position:relative;min-height:215px;padding:30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(10,11,15,.5);backdrop-filter:blur(7px)}
.origin-chronicle article::before{content:"";position:absolute;left:-3px;top:35px;width:5px;height:5px;border-radius:50%;background:#6e7077;box-shadow:0 0 0 5px rgba(255,255,255,.03)}
.origin-chronicle article.current{background:linear-gradient(135deg,rgba(216,181,107,.13),rgba(10,11,15,.7))}
.origin-chronicle article.current::before{background:var(--gold-bright);box-shadow:0 0 18px var(--gold)}
.origin-chronicle span{display:block;font-family:var(--font-display);font-size:1.8rem;color:var(--gold);margin-bottom:28px}
.origin-chronicle b{display:block;font-family:var(--font-display);font-size:1.05rem;letter-spacing:.08em;margin-bottom:10px}
.origin-chronicle p{font-size:.78rem;color:var(--muted);line-height:1.6}

/* 03 — Universe */
.universe-section{min-height:100svh;padding-bottom:78px;background:radial-gradient(circle at 50% 20%,#17151a 0%,var(--bg) 44%)}
.world-panels{width:calc(100% - 72px);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);height:clamp(520px,61svh,720px);border:1px solid var(--line)}
.world-panel{position:relative;overflow:hidden;border-right:1px solid var(--line);isolation:isolate}
.world-panel:last-child{border-right:0}
.world-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.world-index{position:absolute;right:24px;top:22px;font-family:var(--font-display);font-size:4rem;color:rgba(255,255,255,.12)}
.world-content{position:absolute;left:clamp(24px,3vw,54px);right:clamp(24px,3vw,54px);bottom:42px}
.world-content>p{font-size:.59rem;letter-spacing:.24em;color:var(--gold);margin-bottom:14px}
.world-content h3{font-size:clamp(2.5rem,4vw,5rem)}
.world-content>span{display:block;max-width:440px;color:#b7b5b0;font-size:.86rem;margin-top:17px}
.world-content blockquote{max-width:400px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font-family:var(--font-display);font-size:.8rem;color:#ded9cd}

/* 04 — War */
.war-section{min-height:100svh;display:flex;align-items:center;padding:110px 0 70px}
.war-backdrop{position:absolute;inset:0;z-index:-3;background:url("../assets/optimized/elemental-war.webp") center/cover no-repeat}
.war-section::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(6,7,10,.94) 0%,rgba(6,7,10,.62) 48%,rgba(6,7,10,.2) 75%),linear-gradient(0deg,rgba(7,8,11,.94),transparent 48%,rgba(7,8,11,.48))}
.war-layout{display:grid;grid-template-columns:1fr .92fr;gap:8vw;align-items:end}
.war-title{max-width:780px}
.war-title h2{font-size:clamp(5rem,7.5vw,9.5rem)}
.war-title>p:last-child{max-width:620px;margin-top:28px;color:#c5c1b7;font-size:1rem}
.element-grid{display:grid;grid-template-columns:repeat(2,1fr);border-left:1px solid rgba(255,255,255,.18);border-top:1px solid rgba(255,255,255,.18);background:rgba(7,8,11,.42);backdrop-filter:blur(9px)}
.element-grid article{min-height:160px;padding:24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;align-content:end}
.element-grid span{font-size:.55rem;color:var(--gold);letter-spacing:.14em;margin-bottom:auto}
.element-grid b{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.08em}
.element-grid small{color:var(--muted);font-size:.68rem;margin-top:5px}
.war-lore{grid-column:1/-1;margin-top:6vh;padding-top:24px;border-top:1px solid rgba(255,255,255,.18);font-family:var(--font-display);font-size:clamp(1rem,1.5vw,1.4rem);color:#ded9cd;text-align:center}

/* 05 — Gameplay */
.gameplay-section{min-height:100svh;padding-bottom:110px;background:linear-gradient(180deg,#0b0c10,#08090d)}
.gameplay-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:210px;gap:12px}
.activity-card{position:relative;grid-column:span 3;overflow:hidden;border:1px solid var(--line);background:#101218;isolation:isolate}
.activity-card.activity-featured{grid-column:span 6;grid-row:span 2}
.activity-card.activity-system{grid-column:span 12;min-height:138px;display:grid;grid-template-columns:80px 1fr auto;align-items:center;padding:30px 40px;background:linear-gradient(110deg,rgba(216,181,107,.12),#0d0f14 42%,#11141a)}
.activity-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.activity-card>span{position:absolute;top:20px;left:22px;font-family:var(--font-display);font-size:.66rem;color:var(--gold)}
.activity-card>div:last-child{position:absolute;left:22px;right:20px;bottom:21px}
.activity-card h3{font-size:clamp(1.2rem,1.55vw,1.8rem);letter-spacing:.02em}
.activity-card p{max-width:500px;color:#aeadab;font-size:.74rem;line-height:1.5;margin-top:8px}
.activity-featured h3{font-size:clamp(2.2rem,3.5vw,4.3rem)}
.activity-featured p{font-size:.88rem}
.activity-system>span{position:static;font-size:1rem}
.activity-system>div:nth-child(2){position:static}
.activity-system .system-loop{position:static;display:flex;align-items:center;gap:18px;color:var(--gold-bright);font-size:.66rem;letter-spacing:.14em}
.system-loop i{font-style:normal;color:#555}

/* 06 — Combat */
.combat-section{min-height:100svh;padding:98px 0 44px;background:radial-gradient(circle at 50% 22%,#1a1716 0%,#0a0b0f 44%,#07080b 100%)}
.combat-section::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.combat-heading{display:grid;grid-template-columns:1fr 430px;gap:80px;align-items:end;margin-bottom:26px}
.combat-heading h2{font-size:clamp(3.1rem,4.8vw,5.8rem)}
.combat-heading>p{color:#aaa8a3;font-size:.88rem;padding-bottom:8px}
.combat-interface{border:1px solid var(--line);background:rgba(11,12,16,.82);box-shadow:0 35px 90px rgba(0,0,0,.4);backdrop-filter:blur(8px)}
.duel-stage{height:84px;display:grid;grid-template-columns:1fr 150px 1fr;border-bottom:1px solid var(--line);overflow:hidden}
.fighter{display:flex;align-items:center;gap:16px;position:relative}
.fighter img{width:88px;height:100%;object-fit:cover}
.fighter div{display:grid;line-height:1.2}
.fighter small{font-size:.5rem;letter-spacing:.18em;color:var(--muted)}
.fighter b{font-family:var(--font-display);font-size:1.15rem;letter-spacing:.1em;margin:5px 0 3px}
.fighter span{font-size:.55rem;color:var(--gold);letter-spacing:.12em}
.fighter-enemy{flex-direction:row-reverse;text-align:right}
.duel-core{position:relative;display:grid;place-items:center;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.duel-core span{position:absolute;top:8px;font-size:.47rem;letter-spacing:.16em;color:var(--muted)}
.duel-core b{font-family:var(--font-display);font-size:1.75rem;color:var(--gold-bright)}
.duel-core i{position:absolute;bottom:9px;width:40px;height:1px;background:var(--gold)}
.combat-matrix{padding:12px 18px 10px}
.matrix-header{display:grid;grid-template-columns:1fr 160px 1fr;align-items:center;height:26px;padding:0 4px;color:#777a81;font-size:.5rem;letter-spacing:.18em}
.matrix-header b:first-child{color:var(--red-bright)}
.matrix-header b:last-child{text-align:right;color:#91a9c8}
.matrix-header span{text-align:center}
.zone-pair{display:grid;grid-template-columns:1fr 160px 1fr;align-items:center;min-height:51px;border-top:1px solid rgba(255,255,255,.07)}
.zone-choice{height:39px;display:grid;align-items:center;gap:10px;border:1px solid transparent;background:transparent;cursor:pointer;transition:.22s}
.zone-choice b{font-family:var(--font-display);font-size:.72rem;letter-spacing:.11em}
.zone-choice small{font-size:.55rem;color:#73767e}
.zone-icon{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--line);font-size:.66rem}
.strike-choice{grid-template-columns:28px 100px 1fr;text-align:left}
.guard-choice{grid-template-columns:1fr 100px 28px;text-align:right}
.strike-choice:hover,.strike-choice.active{border-color:rgba(224,94,72,.48);background:linear-gradient(90deg,rgba(169,64,50,.2),transparent)}
.guard-choice:hover,.guard-choice.active{border-color:rgba(104,127,159,.48);background:linear-gradient(270deg,rgba(104,127,159,.2),transparent)}
.strike-choice.active .zone-icon{border-color:var(--red-bright);color:var(--red-bright);box-shadow:0 0 16px rgba(224,94,72,.2)}
.guard-choice.active .zone-icon{border-color:#91a9c8;color:#91a9c8;box-shadow:0 0 16px rgba(104,127,159,.22)}
.pair-link{display:grid;grid-template-columns:1fr 26px 1fr;align-items:center;gap:8px;padding:0 8px}
.pair-link i{height:1px;background:rgba(255,255,255,.12)}
.pair-link span{height:24px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-size:.46rem;color:#686a70}
.zone-pair:has(.strike-choice.active) .pair-link i:first-child{background:linear-gradient(90deg,var(--red),rgba(255,255,255,.12))}
.zone-pair:has(.guard-choice.active) .pair-link i:last-child{background:linear-gradient(90deg,rgba(255,255,255,.12),#687f9f)}
.zone-pair:has(.strike-choice.active):has(.guard-choice.active){background:linear-gradient(90deg,rgba(169,64,50,.08),transparent 45%,rgba(104,127,159,.08))}
.zone-pair:has(.strike-choice.active):has(.guard-choice.active) .pair-link span{border-color:var(--gold);color:var(--gold-bright);box-shadow:0 0 18px var(--gold-dim)}
.combat-footer{min-height:104px;display:grid;grid-template-columns:1fr 520px;border-top:1px solid var(--line)}
.class-controls{display:grid;grid-template-columns:repeat(3,1fr)}
.class-controls button{display:grid;grid-template-columns:34px auto;grid-template-rows:auto auto;align-content:center;column-gap:10px;padding:13px 20px;border:0;border-right:1px solid var(--line);background:transparent;text-align:left;cursor:pointer}
.class-controls button>span{grid-row:1/3;width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);color:#777}
.class-controls b{font-family:var(--font-display);font-size:.68rem;letter-spacing:.1em}
.class-controls small{font-size:.52rem;color:#707279}
.class-controls button:hover,.class-controls button.active{background:var(--gold-dim)}
.class-controls button.active>span{color:var(--gold-bright);border-color:var(--gold)}
.duel-result{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;padding:14px 24px;background:linear-gradient(110deg,rgba(216,181,107,.09),rgba(14,16,22,.94));border-left:1px solid var(--line)}
.duel-result>span{font-size:.48rem;letter-spacing:.18em;color:var(--gold)}
.duel-result>strong{grid-column:1;font-family:var(--font-display);font-size:1.15rem;letter-spacing:.03em}
.duel-result>div{grid-column:2;grid-row:1/3;display:flex;gap:28px}
.duel-result p{display:grid;text-align:right}
.duel-result p b{font-family:var(--font-display);font-size:.9rem;color:var(--gold-bright)}
.duel-result p small{font-size:.48rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}

/* 07 — Identity */
.character-section{min-height:100svh;display:flex;align-items:center;padding:110px 0 60px}
.character-backdrop{position:absolute;inset:0;z-index:-3;background:url("../assets/optimized/character.webp") center 22%/cover no-repeat;transform:scale(1.08);opacity:.35}
.character-section::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 32% 45%,rgba(216,181,107,.08),transparent 30%),linear-gradient(90deg,rgba(8,9,13,.5),rgba(8,9,13,.95) 58%)}
.character-layout{display:grid;grid-template-columns:minmax(330px,.72fr) 1.28fr;gap:34px;align-items:stretch;max-width:1430px}
.character-portrait{position:relative;min-height:640px;border:1px solid var(--line);overflow:hidden}
.character-portrait>img{width:100%;height:100%;object-fit:cover}
.portrait-rank{position:absolute;left:26px;right:26px;bottom:22px;z-index:2;display:flex;align-items:end;justify-content:space-between;border-top:1px solid var(--line);padding-top:14px}
.portrait-rank span{font-size:.55rem;letter-spacing:.17em;color:var(--muted)}
.portrait-rank b{font-family:var(--font-display);font-size:1.2rem;color:var(--gold-bright)}
.identity-panel{padding:34px 40px;border:1px solid var(--line);background:rgba(13,15,20,.87);backdrop-filter:blur(16px)}
.identity-panel .chapter-kicker{margin-bottom:15px}
.identity-title{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:19px;border-bottom:1px solid var(--line)}
.identity-title p{font-size:.56rem;letter-spacing:.2em;color:var(--gold);margin-bottom:6px}
.identity-title h2{font-size:clamp(3.4rem,5vw,6rem)}
.identity-title div>span{display:block;font-size:.6rem;letter-spacing:.14em;color:#9da0a8}
.identity-title>b{font-size:.55rem;letter-spacing:.14em;color:var(--muted);text-align:right}
.identity-title strong{font-family:var(--font-display);font-size:2.3rem;color:var(--gold-bright)}
.identity-copy{max-width:850px;color:#aaa9a6;font-size:.82rem;margin:15px 0}
.xp-block{margin-bottom:16px}
.xp-block>div{display:flex;justify-content:space-between;font-size:.54rem;letter-spacing:.11em;color:#898b92;margin-bottom:7px}
.xp-block>i{display:block;height:4px;background:#22252c}
.xp-block>i>span{display:block;height:100%;background:linear-gradient(90deg,#9b7538,var(--gold-bright));box-shadow:0 0 16px rgba(216,181,107,.28)}
.identity-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.identity-stats article{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px}
.identity-stats span{font-size:.49rem;letter-spacing:.1em;color:#84868d}
.identity-stats i{height:2px;background:#272a31}
.identity-stats i b{display:block;height:100%;background:var(--gold)}
.identity-stats strong{font-family:var(--font-display);font-size:.72rem}
.identity-lower{display:grid;grid-template-columns:1.22fr .78fr;gap:28px;margin-top:20px}
.equipment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.equipment-grid>p,.achievement-list>p{grid-column:1/-1;font-size:.54rem;letter-spacing:.16em;color:var(--gold);margin-bottom:2px}
.equipment-grid article{position:relative;min-height:184px;border:1px solid var(--line);overflow:hidden;background:#0b0c10}
.equipment-grid img{width:100%;height:116px;object-fit:cover}
.equipment-grid span,.equipment-grid b{display:block;padding:0 10px}
.equipment-grid span{font-size:.45rem;letter-spacing:.12em;color:#777a82;margin-top:8px}
.equipment-grid b{font-family:var(--font-display);font-size:.66rem;letter-spacing:.04em;margin-top:2px}
.achievement-list{display:grid;gap:8px}
.achievement-list article{display:grid;grid-template-columns:36px 1fr;align-items:center;gap:10px;min-height:55px;padding:8px;border:1px solid var(--line);background:rgba(255,255,255,.018)}
.achievement-list article>span{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(216,181,107,.35);font-family:var(--font-display);font-size:.62rem;color:var(--gold)}
.achievement-list div{display:grid}
.achievement-list b{font-family:var(--font-display);font-size:.57rem;letter-spacing:.07em}
.achievement-list small{font-size:.48rem;color:#787a81}

/* 08 — Classes */
.classes-section{min-height:100svh;padding-bottom:100px;background:radial-gradient(circle at 50% 20%,#161318,var(--bg) 44%)}
.class-gallery{display:grid;grid-template-columns:repeat(3,1fr);height:clamp(520px,60svh,700px);gap:12px}
.class-card{position:relative;overflow:hidden;border:1px solid var(--line);isolation:isolate}
.class-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.class-card>span{position:absolute;right:24px;top:18px;font-family:var(--font-display);font-size:4rem;color:rgba(255,255,255,.12)}
.class-card>div:last-child{position:absolute;left:30px;right:30px;bottom:30px}
.class-card p{font-size:.54rem;letter-spacing:.2em;color:var(--gold);margin-bottom:10px}
.class-card h3{font-size:clamp(3rem,4.6vw,5.8rem)}
.class-card div>b{display:block;font-size:.56rem;letter-spacing:.12em;color:#d6d1c5;margin:11px 0 16px}
.class-card div>small{display:block;max-width:430px;padding-top:15px;border-top:1px solid var(--line);font-size:.72rem;line-height:1.6;color:#9d9b97}

/* 09 — Economy */
.economy-section{min-height:100svh;display:flex;align-items:center;padding:110px 0 70px}
.economy-backdrop{position:absolute;inset:0;z-index:-3;background:url("../assets/optimized/economy.webp") center/cover no-repeat}
.economy-section::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(7,8,11,.97),rgba(7,8,11,.73) 55%,rgba(7,8,11,.45)),linear-gradient(0deg,rgba(8,9,13,.95),transparent 45%,rgba(8,9,13,.7))}
.economy-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:7vw;align-items:center}
.economy-copy h2{font-size:clamp(3.8rem,5.6vw,7rem)}
.economy-copy>p:last-child{max-width:590px;color:#aaa9a5;margin-top:24px}
.economy-flow{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line);background:rgba(9,10,14,.55);backdrop-filter:blur(8px)}
.economy-flow article{position:relative;min-height:162px;padding:19px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;align-content:center;text-align:center}
.economy-flow span{position:absolute;left:12px;top:10px;font-size:.48rem;color:#74767e}
.economy-flow i{font-style:normal;font-size:1.35rem;color:var(--gold);margin-bottom:9px}
.economy-flow b{font-family:var(--font-display);font-size:.82rem;letter-spacing:.1em}
.economy-flow small{color:#777a81;font-size:.55rem;margin-top:4px}
.economy-flow article::after{content:"";position:absolute;right:-7px;top:50%;width:12px;height:12px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);transform:translateY(-50%) rotate(45deg);z-index:2}
.economy-flow article:nth-child(3)::after,.economy-flow article:nth-child(6)::after{display:none}
.economy-notes{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:28px;background:var(--line)}
.economy-notes article{padding:18px 22px;background:rgba(10,11,15,.84)}
.economy-notes span{font-size:.74rem;letter-spacing:.14em;color:var(--gold)}
.economy-notes p{color:#888a91;font-size:.75rem;margin-top:5px}

/* 10 — Materia */
.materia-section{min-height:100svh;display:flex;align-items:center;padding:110px 0 70px;background:radial-gradient(circle at 27% 50%,rgba(44,84,102,.26),transparent 26%),linear-gradient(130deg,#08090d,#0d1118 48%,#08090d)}
.materia-section::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:64px 64px}
.materia-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:9vw}
.materia-art{position:relative;display:grid;place-items:center;min-height:570px}
.materia-art::before{display:none}
.materia-art img{position:relative;width:min(430px,66%)}
.materia-art>span{position:absolute;bottom:18px;font-size:.54rem;letter-spacing:.22em;color:#79aabc}
.materia-orbit{position:absolute;border:1px solid rgba(117,187,211,.18);border-radius:50%}
.orbit-one{width:78%;aspect-ratio:1;transform:rotate(18deg)}
.orbit-two{width:58%;aspect-ratio:1;transform:rotate(-26deg)}
.materia-copy{max-width:690px}
.materia-copy h2{font-size:clamp(3.8rem,5.6vw,7rem)}
.materia-copy>p{color:#aaaeb1;margin:24px 0 30px}
.materia-uses{border-top:1px solid var(--line)}
.materia-uses article{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:17px 0;border-bottom:1px solid var(--line)}
.materia-uses article>span{font-family:var(--font-display);color:#6ea1b4}
.materia-uses div{display:grid}
.materia-uses b{font-family:var(--font-display);font-size:.75rem;letter-spacing:.1em}
.materia-uses small{color:#757980;font-size:.61rem;margin-top:3px}
@keyframes materiaFloat{0%,100%{transform:translateY(-7px) rotate(-1deg)}50%{transform:translateY(8px) rotate(1deg)}}

/* 11 — Chronicle */
.roadmap-section{min-height:100svh;display:flex;align-items:center;padding:110px 0 70px}
.roadmap-backdrop{position:absolute;inset:0;z-index:-3;background:url("../assets/optimized/chronicle-world.webp") center/cover no-repeat}
.roadmap-section::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(7,8,11,.96),rgba(7,8,11,.58)),linear-gradient(0deg,rgba(8,9,13,.98),transparent 50%,rgba(8,9,13,.75))}
.roadmap-copy{max-width:900px;margin-bottom:7vh}
.roadmap-copy h2{font-size:clamp(4rem,6.2vw,8rem)}
html[lang="ru"] .roadmap-copy h2{font-size:clamp(3.5rem,4.65vw,5.6rem)}
.chronicle-line{position:relative;display:grid;grid-template-columns:repeat(6,1fr);padding-top:28px}
.chronicle-line::before{content:"";position:absolute;left:0;right:0;top:37px;height:1px;background:linear-gradient(90deg,var(--gold) 0 42%,rgba(255,255,255,.2) 42%)}
.chronicle-line article{position:relative;padding-right:28px}
.chronicle-line article>span{position:relative;z-index:2;width:19px;height:19px;display:grid;place-items:center;border:1px solid #5b5d64;border-radius:50%;background:#0c0d11;font-size:.42rem;color:#777;margin-bottom:22px}
.chronicle-line article.complete>span{background:var(--gold);border-color:var(--gold);color:#08090d}
.chronicle-line article.current>span{border-color:var(--gold-bright);color:var(--gold-bright);box-shadow:0 0 20px var(--gold)}
.chronicle-line div{display:grid}
.chronicle-line small{min-height:17px;font-size:.5rem;letter-spacing:.12em;color:var(--gold)}
.chronicle-line b{font-family:var(--font-display);font-size:.72rem;letter-spacing:.08em;margin:7px 0}
.chronicle-line p{max-width:210px;color:#7f8188;font-size:.58rem;line-height:1.55}

/* 12 — Final portal */
.final-section{min-height:100svh;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:110px 0 90px}
.final-backdrop{position:absolute;inset:0;z-index:-3;background:url("../assets/optimized/hero-scene.webp") center/cover no-repeat}
.final-section::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 50% 44%,rgba(8,9,13,.12),rgba(8,9,13,.9) 56%,#08090d 84%)}
.final-content{display:grid;justify-items:center}
.final-content .chapter-kicker{justify-content:center}
.final-content h2{font-size:clamp(5rem,9vw,11rem);text-shadow:0 18px 60px #000}
.final-content>p{max-width:650px;color:#b8b5ae;margin:28px auto 34px}
.final-actions{justify-content:center}
.final-section footer{
    position:absolute;padding-left:42px;padding-right:42px;bottom:24px;z-index:3;display:flex;align-items:center;justify-content:space-between;
    padding-top:18px;border-top:1px solid var(--line);text-align:left;
}
.final-section footer p,.final-section footer a{font-size:.55rem;letter-spacing:.12em;color:#777a80}
.final-section footer .brand b{color:var(--text)}
.final-section footer .brand small{color:var(--gold)}
.final-section footer>div{display:flex;gap:24px}

@media(min-width:1181px) and (max-height:800px){
    .combat-section{padding:82px 0 18px}
    .combat-heading{margin-bottom:14px}
    .combat-heading .chapter-kicker{margin-bottom:9px}
    .combat-heading .eyebrow{margin-bottom:9px}
    .combat-heading h2{font-size:clamp(3rem,3.7vw,4.5rem)}
    .duel-stage{height:70px}
    .fighter img{width:74px}
    .combat-matrix{padding-top:7px;padding-bottom:6px}
    .matrix-header{height:22px}
    .zone-pair{min-height:43px}
    .zone-choice{height:34px}
    .combat-footer{min-height:86px}
    .class-controls button{padding-block:8px}
    .duel-result{padding-block:9px}
    .roadmap-section{padding-top:86px;padding-bottom:38px}
    .roadmap-copy{margin-bottom:5vh}
}

/* Creative direction pass */
.sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
img{filter:none!important}
.world-panel:hover img,.activity-card:hover img,.class-card:hover img{transform:none;filter:none!important}
.world-shade,.activity-overlay,.class-shade,.character-portrait::after{display:none}
.materia-art img{animation:none}
.site-noise{opacity:.022}

.site-header{
    height:84px;grid-template-columns:210px 1fr auto;padding:0 48px;
    background:linear-gradient(180deg,rgba(4,5,7,.88),rgba(4,5,7,0));
}
.site-header.scrolled{background:rgba(5,6,8,.94);backdrop-filter:blur(12px)}
.brand{width:188px;height:58px}
.site-header>.brand{min-width:0}
.brand img{width:100%;height:auto;object-fit:contain;border:0;border-radius:0}
.main-nav a{color:#8b8c91;font-size:.64rem;letter-spacing:.16em}
.header-cta{background:transparent;border-color:rgba(216,181,107,.34)}

.hero-section{
    min-height:820px;height:100svh;background:#030405;
    display:grid;place-items:center;padding:96px 0 70px;
}
.hero-smoke{
    position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:
        radial-gradient(ellipse at 50% 46%,rgba(112,118,121,.1),transparent 38%),
        radial-gradient(ellipse at 25% 70%,rgba(99,78,53,.07),transparent 30%),
        linear-gradient(180deg,#030405 0%,#08090b 54%,#030405 100%);
}
.hero-smoke::before{
    content:"";position:absolute;inset:9% 17% 12%;
    background:radial-gradient(ellipse,rgba(255,255,255,.025),transparent 68%);
}
.hero-stage{display:grid;place-items:center}
.hero-content{
    width:min(980px,100%);max-width:none;padding:0;display:grid;justify-items:center;text-align:center;
}
.hero-content .chapter-kicker{justify-content:center;margin-bottom:9px}
.hero-content .eyebrow{margin-bottom:0;color:#85868a}
.hero-main-logo{width:min(720px,72vw);height:auto;margin:-22px auto -42px}
.hero-lead{
    max-width:650px;margin:0 auto 28px;color:#a3a2a0;font-family:var(--font-display);
    font-size:clamp(.88rem,1.15vw,1.08rem);line-height:1.75;
}
.hero-actions{display:flex;gap:10px;justify-content:center}
.btn{border-color:rgba(255,255,255,.2);background:#0a0b0e}
.btn-primary{background:#b89555;border-color:#b89555;color:#08090d}
.btn-primary:hover{background:#d1b370;box-shadow:none}
.btn-ghost:hover{border-color:#8d7447;color:#d1b370}
.scroll-cue{bottom:24px}

.origin-section{min-height:100svh;display:flex;align-items:center;padding:120px 0 90px}
.origin-backdrop{filter:none;background-position:center}
.origin-section::before{
    content:"";position:absolute;inset:0;z-index:-2;
    background:linear-gradient(90deg,rgba(5,6,8,.98) 0%,rgba(5,6,8,.78) 45%,rgba(5,6,8,.28) 100%),
        linear-gradient(0deg,rgba(5,6,8,.9),transparent 45%,rgba(5,6,8,.68));
}
.origin-copy h2{font-size:clamp(4.4rem,7vw,9rem)}
.origin-copy blockquote{max-width:620px;font-size:clamp(1rem,1.4vw,1.35rem)}
.origin-copy>p:last-child{max-width:660px;color:#bab8b2}
.origin-chronicle{align-self:end;background:rgba(6,7,9,.8);border-top:1px solid rgba(216,181,107,.35)}
.origin-chronicle article{background:transparent;backdrop-filter:none;border-color:rgba(255,255,255,.09)}

.universe-section{padding-bottom:0;background:#07080a}
.world-panels{height:72svh;min-height:650px;width:100%;border:0}
.world-panel img{filter:none;transition:none}
.world-content{
    left:clamp(22px,3vw,54px);right:auto;bottom:34px;width:min(460px,calc(100% - 44px));
    padding:22px 24px;background:rgba(5,6,8,.9);border-left:1px solid rgba(216,181,107,.55);
}
.world-content>span{color:#c3c1ba}
.world-index{color:rgba(255,255,255,.42);text-shadow:0 2px 14px #000}

.war-backdrop,.character-backdrop,.economy-backdrop,.roadmap-backdrop,.final-backdrop{filter:none}
.war-section::before{background:linear-gradient(90deg,rgba(5,6,8,.96),rgba(5,6,8,.64) 48%,rgba(5,6,8,.14))}
.element-grid{background:rgba(5,6,8,.72);backdrop-filter:none}

.gameplay-section{padding-bottom:120px;background:#07080a}
.gameplay-grid{grid-template-columns:repeat(12,1fr);grid-auto-rows:270px;gap:14px}
.activity-card{background:#0a0b0e;border-color:rgba(255,255,255,.1)}
.activity-card.activity-featured{grid-column:1/8;grid-row:1/3}
.activity-card:nth-child(2){grid-column:8/13;grid-row:1}
.activity-card:nth-child(3){grid-column:8/13;grid-row:2}
.activity-card:nth-child(4){grid-column:1/7;grid-row:3}
.activity-card:nth-child(5){grid-column:7/13;grid-row:3}
.activity-card img{filter:none;transition:none}
.activity-card>span{
    top:16px;left:16px;width:30px;height:30px;display:grid;place-items:center;
    background:#08090b;color:#bda26a;
}
.activity-card>div:last-child{
    left:18px;right:auto;bottom:18px;width:min(520px,calc(100% - 36px));
    padding:18px 20px;background:rgba(5,6,8,.91);border-left:1px solid rgba(216,181,107,.5);
}
.activity-card p{color:#b2b0aa}
.materia-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.combat-section{
    min-height:100svh;padding:118px 0 82px;
    background:linear-gradient(180deg,#090a0c,#050608 55%,#08090c);
}
.combat-section::before{display:none}
.combat-heading{grid-template-columns:1fr minmax(300px,520px);margin-bottom:48px}
.combat-heading>p{color:#aaa8a2}
.duel-cinema{
    display:grid;grid-template-columns:minmax(260px,1fr) minmax(340px,.9fr) minmax(260px,1fr);
    align-items:stretch;border-top:1px solid rgba(255,255,255,.12);
    border-bottom:1px solid rgba(255,255,255,.12);
}
.duelist{min-height:510px;display:grid;grid-template-rows:1fr auto;background:#0b0c0f}
.duelist img{width:100%;height:100%;min-height:410px;object-fit:cover}
.duelist-name{padding:18px 22px;background:#08090b;display:grid}
.duelist-name small,.duelist-name span{font-size:.52rem;letter-spacing:.16em;color:#7e8086}
.duelist-name b{font-family:var(--font-display);font-size:1.9rem;line-height:1;margin:7px 0}
.duelist-enemy .duelist-name{text-align:right}
.duel-story{
    min-height:510px;display:flex;flex-direction:column;justify-content:center;align-items:center;
    padding:42px 28px;text-align:center;background:#07080a;border-left:1px solid rgba(255,255,255,.1);
    border-right:1px solid rgba(255,255,255,.1);
}
.duel-round{font-size:.54rem;letter-spacing:.24em;color:#777980}
.duel-vector{width:100%;display:grid;grid-template-columns:1fr auto 1.25fr auto 1fr;align-items:center;gap:12px;margin:34px 0}
.duel-vector>i{font-style:normal;color:#8d7447}
.duel-vector p{display:grid}
.duel-vector small{font-size:.47rem;letter-spacing:.14em;color:#74767c}
.duel-vector p b{font-family:var(--font-display);font-size:.8rem;color:#d3c7ad;margin-top:4px}
.duel-vector strong{font-family:var(--font-display);font-size:clamp(1.2rem,1.65vw,1.85rem);line-height:1.05;color:#d4b873}
.duel-story blockquote{max-width:360px;font-family:var(--font-display);font-size:.88rem;color:#aaa79f}
.duel-outcome{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:34px;background:rgba(255,255,255,.1)}
.duel-outcome p{display:grid;padding:14px;background:#0b0c0f}
.duel-outcome b{font-family:var(--font-display);font-size:1rem;color:#d4b873}
.duel-outcome small{font-size:.46rem;letter-spacing:.1em;color:#777980;text-transform:uppercase}
.duel-choices{grid-column:1/-1;display:grid;grid-template-columns:1fr .75fr 1fr;background:#07080a;border-top:1px solid rgba(255,255,255,.1)}
.choice-group{padding:20px 22px}
.choice-group+ .choice-group{border-left:1px solid rgba(255,255,255,.1)}
.choice-group>span{display:block;margin-bottom:10px;font-size:.48rem;letter-spacing:.17em;color:#777980}
.choice-group>div{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.choice-group button{
    min-height:36px;border:1px solid rgba(255,255,255,.12);background:transparent;color:#7f8186;
    font-size:.54rem;letter-spacing:.08em;cursor:pointer;
}
.choice-group button:hover,.choice-group button.active{border-color:#a68a54;color:#e0c581;background:rgba(166,138,84,.09)}
.class-controls>div{grid-template-columns:repeat(3,1fr)}
.guard-group{text-align:right}

.character-section{padding:120px 0 78px;background:#07080a}
.character-backdrop{opacity:.12;transform:none}
.character-section::before{background:linear-gradient(90deg,rgba(5,6,8,.45),rgba(5,6,8,.98) 58%)}
.character-layout{grid-template-columns:minmax(380px,.82fr) 1.18fr;gap:0;max-width:1500px}
.character-portrait{min-height:720px;border-color:rgba(255,255,255,.1);display:grid;grid-template-rows:1fr auto}
.character-portrait>img{width:100%;height:100%;min-height:570px;object-fit:cover}
.portrait-rank{top:20px;bottom:auto;background:rgba(5,6,8,.82);padding:12px 14px;border:0;width:190px}
.character-vow{
    position:relative;z-index:2;padding:22px 26px;background:#08090b;border-top:1px solid rgba(255,255,255,.1);
    font-family:var(--font-display);font-size:.86rem;color:#b9b5aa;
}
.identity-panel{padding:42px 46px;background:#0b0c10;border-color:rgba(255,255,255,.1);backdrop-filter:none}
.identity-copy{font-size:.88rem;line-height:1.7;color:#b1afa9}
.identity-legacy{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:18px 0;background:rgba(255,255,255,.1)}
.identity-legacy p{display:grid;padding:13px 14px;background:#0d0f13}
.identity-legacy span{font-size:.45rem;letter-spacing:.14em;color:#777980}
.identity-legacy b{font-family:var(--font-display);font-size:.62rem;letter-spacing:.06em;color:#cbb98f;margin-top:4px}
.xp-block>i>span{box-shadow:none}
.equipment-grid img{filter:none}

.class-card img{filter:none;transition:none}
.class-card>div:last-child{
    left:22px;right:22px;bottom:22px;padding:20px 22px;background:rgba(5,6,8,.92);
    border-left:1px solid rgba(216,181,107,.45);
}
.class-card>span{color:rgba(255,255,255,.45);text-shadow:0 2px 12px #000}

.economy-section::before{background:linear-gradient(90deg,rgba(5,6,8,.98),rgba(5,6,8,.76) 55%,rgba(5,6,8,.38))}
.economy-flow{background:transparent;backdrop-filter:none;border:0;gap:1px}
.economy-flow article{background:rgba(7,8,10,.86);border-color:rgba(255,255,255,.1)}
.economy-flow i{color:#b69a64}
.economy-notes{background:rgba(255,255,255,.1)}

.materia-section{background:linear-gradient(135deg,#07080a,#0b0d11 55%,#060709)}
.materia-art::before,.materia-orbit{display:none}
.materia-art img{filter:none}
.materia-art>span{color:#9b8b6d}
.materia-uses article>span{color:#a98e58}

.roadmap-section::before{background:linear-gradient(90deg,rgba(5,6,8,.97),rgba(5,6,8,.64))}
.chronicle-line{gap:18px;padding-top:0}
.chronicle-line::before{display:none}
.chronicle-line article{
    min-height:210px;padding:24px 18px;border-top:1px solid rgba(255,255,255,.15);
    background:rgba(6,7,9,.74);
}
.chronicle-line article>span{
    width:auto;height:auto;display:block;border:0;border-radius:0;background:transparent;
    font-family:var(--font-display);font-size:2.4rem;color:#55575d;margin-bottom:34px;
}
.chronicle-line article.complete>span{background:transparent;color:#8f7a52}
.chronicle-line article.current{border-color:#b89a5f;background:rgba(13,12,10,.82)}
.chronicle-line article.current>span{border:0;box-shadow:none;color:#d2b673}

.final-section{min-height:920px;padding:110px 0 260px}
.final-backdrop{filter:none}
.final-content h2{text-shadow:none}
.site-footer{
    left:42px;right:42px;bottom:24px;display:grid!important;
    grid-template-columns:190px 1fr auto auto;gap:28px;
}
.final-section .site-footer{align-items:end}
.footer-brand{width:180px!important;height:auto;min-width:0}
.footer-brand img{width:100%;height:auto}
.developer-strip{display:grid!important;justify-items:center;gap:10px}
.developer-strip>span{font-size:.46rem;letter-spacing:.18em;color:#66686e}
.developer-icons{display:flex!important;align-items:center;justify-content:center;gap:18px}
.developer-mark{
    width:42px;height:42px;display:grid!important;place-items:center;overflow:hidden;
    border:1px solid rgba(255,255,255,.08);background:#090a0d;
}
.developer-mark img{width:100%;height:100%;object-fit:contain}
.developer-mark-wide{width:62px}
.ecosystem-mark{border-radius:50%;opacity:.68}
.ecosystem-mark img{border-radius:50%;filter:grayscale(.72)!important}
.developer-mark-muted{opacity:.38}
.developer-mark-muted img{filter:grayscale(1)!important}
.footer-links{display:flex!important;gap:22px}

/* Creative director pass v9 */
.site-header{
    grid-template-columns:1fr auto 210px;
    background:linear-gradient(180deg,rgba(3,4,6,.94),rgba(3,4,6,.16) 72%,transparent);
}
.site-header>.brand{grid-column:3;grid-row:1;justify-self:end;width:205px}
.main-nav{grid-column:1;grid-row:1;justify-self:start}
.header-actions{grid-column:2;grid-row:1}


.hero-section{height:100svh;min-height:700px;padding:74px 0 18px;background:#020304}
.hero-smoke{
    background:
        radial-gradient(ellipse at 50% 43%,rgba(104,113,118,.1),transparent 36%),
        radial-gradient(ellipse at 34% 58%,rgba(91,129,145,.045),transparent 28%),
        radial-gradient(ellipse at 66% 58%,rgba(147,69,43,.05),transparent 28%),
        linear-gradient(180deg,#020304,#07080a 58%,#030405);
}
.hero-stage{height:100%;align-items:center}
.hero-content{width:min(1280px,100%);align-content:center}
.hero-main-logo{
    display:block;width:auto;height:clamp(470px,68svh,730px);max-width:98vw;object-fit:contain;
    margin:-64px auto -100px;mix-blend-mode:screen;
    -webkit-mask-image:radial-gradient(ellipse 72% 82% at 50% 50%,#000 64%,rgba(0,0,0,.96) 78%,transparent 100%);
    mask-image:radial-gradient(ellipse 72% 82% at 50% 50%,#000 64%,rgba(0,0,0,.96) 78%,transparent 100%);
}
.hero-lead{max-width:720px;margin:0 auto 20px;font-size:clamp(.82rem,1vw,1.04rem);color:#b1afa9;line-height:1.65}
.hero-actions{width:100%;display:flex;flex-wrap:nowrap;justify-content:center;gap:10px}
.metal-btn{
    position:relative;min-width:210px;height:58px;padding:0 20px;overflow:hidden;
    border:1px solid #786645;background:linear-gradient(180deg,#18191c,#090a0d 60%,#111216);
    color:#d8d1c2;box-shadow:inset 0 1px rgba(255,255,255,.055),inset 0 -1px rgba(0,0,0,.8);
}
.metal-btn::before,.metal-btn::after{content:"";position:absolute;width:10px;height:10px;pointer-events:none}
.metal-btn::before{left:5px;top:5px;border-left:1px solid #ad9565;border-top:1px solid #ad9565}
.metal-btn::after{right:5px;bottom:5px;border-right:1px solid #ad9565;border-bottom:1px solid #ad9565}
.metal-btn i{color:#a99163}
.metal-btn:hover{transform:translateY(-2px);border-color:#baa06a;color:#f0e9da}
.metal-btn-fire:hover{box-shadow:inset 0 1px rgba(255,255,255,.06),0 5px 22px rgba(153,65,35,.16)}
.metal-btn-ice:hover{box-shadow:inset 0 1px rgba(255,255,255,.06),0 5px 22px rgba(91,148,174,.14)}
.hero-ecosystem{
    position:relative;top:34px;justify-self:center;width:max-content;max-width:100%;display:flex;align-items:center;justify-content:center;gap:0;margin:16px auto 0;
    border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
}
.hero-ecosystem>a,.hero-ecosystem>span{
    min-width:190px;height:58px;display:flex;align-items:center;justify-content:center;gap:11px;padding:0 20px;
    border-right:1px solid rgba(255,255,255,.08);color:#85868a;
}
.hero-ecosystem>:last-child{border-right:0}
.hero-ecosystem img{width:30px;height:30px;object-fit:contain;border-radius:50%;opacity:.58}
.hero-ecosystem>span>i{width:30px;height:30px;display:grid;place-items:center;font-size:1.25rem;font-style:normal;color:#9e895e}
.hero-ecosystem span span,.hero-ecosystem a span{display:grid;text-align:left;line-height:1.1}
.hero-ecosystem small{font-size:.48rem;letter-spacing:.14em;color:#6d6f74}
.hero-ecosystem b{font-family:var(--font-display);font-size:.64rem;letter-spacing:.08em;color:#aaa8a2;margin-top:4px}

.elemental-transition{
    position:relative;z-index:5;height:230px;display:grid;grid-template-columns:80px minmax(280px,900px) 80px;
    place-content:center;align-items:center;gap:34px;margin-top:-1px;overflow:hidden;
    background:linear-gradient(180deg,#07080a,#0a0b0d 48%,#07080a);
}
.transition-smoke{position:absolute;inset:0;z-index:-1}
.transition-smoke::before{content:"";position:absolute;inset:-35% 20%;background:url("../assets/optimized/main-logo.webp") center/contain no-repeat;opacity:.08}
.transition-smoke::after{
    content:"";position:absolute;left:8%;right:8%;top:50%;height:1px;
    background:linear-gradient(90deg,transparent,rgba(109,159,181,.42),rgba(216,181,107,.28) 50%,rgba(162,70,43,.4),transparent);
}
.elemental-transition blockquote{
    position:relative;padding:28px 42px;text-align:center;background:rgba(5,6,8,.78);
    border-top:1px solid rgba(216,181,107,.25);border-bottom:1px solid rgba(216,181,107,.2);
    font-family:var(--font-display);font-size:clamp(1.05rem,1.45vw,1.45rem);letter-spacing:.03em;color:#cec8bb;
}
.transition-rune{font-family:var(--font-display);font-size:2rem;text-align:center}
.transition-rune-ice{color:#7395a5}.transition-rune-fire{color:#9e5a3e}
.universe-section::after{display:none}

.gameplay-grid{grid-template-rows:repeat(3,260px)}
.activity-card{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.activity-card::after{content:"";position:absolute;inset:8px;z-index:-1;border:1px solid rgba(216,181,107,.13);pointer-events:none}
.activity-card>div:last-child{border-left-color:#9f895d}

.combat-section{padding:106px 0 72px;background:linear-gradient(180deg,#07080a,#040507 56%,#08090c)}
.combat-heading{margin-bottom:24px}
.combat-heading h2{font-size:clamp(3.4rem,4.5vw,5.7rem)}
.combat-steps{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-bottom:16px;
    background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.09);
}
.combat-steps p{min-height:52px;display:flex;align-items:center;gap:13px;padding:10px 18px;background:#090a0d}
.combat-steps span{width:26px;height:26px;display:grid;place-items:center;border:1px solid #806d49;font-family:var(--font-display);font-size:.58rem;color:#bda46f}
.combat-steps b{font-family:var(--font-display);font-size:.64rem;letter-spacing:.04em;color:#aaa69d}
.duel-board{
    display:grid;grid-template-columns:minmax(230px,.72fr) minmax(560px,1.45fr) minmax(230px,.72fr);
    min-height:520px;border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13);
}
.duel-board .duelist{min-height:520px;grid-template-rows:1fr auto}
.duel-board .duelist img{min-height:430px}
.tactical-duel{
    min-width:0;display:grid;grid-template-rows:auto 1fr auto auto;padding:18px 24px;
    background:#07080a;border-left:1px solid rgba(255,255,255,.1);border-right:1px solid rgba(255,255,255,.1);
}
.tactical-heading{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1)}
.tactical-heading span,.tactical-heading b{font-size:.48rem;letter-spacing:.17em}
.tactical-heading span{color:#74767c}.tactical-heading b{color:#a88f5d}
.zone-columns{display:grid;grid-template-columns:1fr 28px 1fr;align-items:center;gap:12px;padding:15px 0}
.vertical-choice{display:grid;grid-template-rows:26px repeat(4,42px);gap:5px}
.vertical-choice>strong{font-size:.5rem;letter-spacing:.2em;color:#777a80}
.vertical-choice button{display:grid;align-items:center;border:1px solid rgba(255,255,255,.11);background:#0b0c0f;color:#888a90;cursor:pointer;transition:.2s}
.attack-column button{grid-template-columns:32px 1fr;text-align:left}
.defense-column{text-align:right}.defense-column button{grid-template-columns:1fr 32px;text-align:right}
.vertical-choice button span{display:grid;place-items:center;height:100%;border-right:1px solid rgba(255,255,255,.08);font-size:.46rem;color:#55575d}
.defense-column button span{border-right:0;border-left:1px solid rgba(255,255,255,.08)}
.vertical-choice button b{padding:0 13px;font-family:var(--font-display);font-size:.64rem;letter-spacing:.1em}
.attack-column button:hover,.attack-column button.active{border-color:rgba(156,83,53,.72);color:#d5b09d;background:rgba(111,48,28,.14)}
.defense-column button:hover,.defense-column button.active{border-color:rgba(101,145,164,.72);color:#b8cfda;background:rgba(45,82,98,.14)}
.clash-spine{height:100%;display:grid;grid-template-rows:1fr auto 1fr;place-items:center}
.clash-spine i{width:1px;height:100%;background:linear-gradient(transparent,rgba(216,181,107,.36))}
.clash-spine i:last-child{background:linear-gradient(rgba(216,181,107,.36),transparent)}
.clash-spine span{width:26px;height:26px;display:grid;place-items:center;border:1px solid #826d45;transform:rotate(45deg);color:#c1a76f;font-size:.58rem}
.combat-outcome{display:grid;grid-template-columns:1.1fr 1.8fr .8fr .9fr;align-items:center;gap:1px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.09)}
.combat-outcome>p,.combat-outcome>strong{min-height:48px;display:grid;align-content:center;padding:8px 12px;background:#0b0c0f}
.combat-outcome>p>span{display:flex;align-items:center;gap:6px}
.combat-outcome p b{font-family:var(--font-display);font-size:.64rem;color:#c2b491}
.combat-outcome p i{font-style:normal;color:#666970}
.combat-outcome small{font-size:.4rem;letter-spacing:.1em;color:#686a70;text-transform:uppercase}
.combat-outcome>strong{font-family:var(--font-display);font-size:.82rem;color:#d4b873}
.class-modifiers{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:8px}
.class-modifiers button{min-height:48px;display:grid;padding:7px 9px;border:1px solid rgba(255,255,255,.1);background:#090a0d;text-align:left;color:#7c7e84;cursor:pointer}
.class-modifiers b{font-family:var(--font-display);font-size:.58rem;letter-spacing:.08em}
.class-modifiers small{font-size:.44rem;color:#66686e;margin-top:2px}
.class-modifiers button:hover,.class-modifiers button.active{border-color:#9f895d;color:#d5bd89;background:rgba(159,137,93,.08)}

.character-layout{grid-template-columns:minmax(410px,.85fr) 1.15fr}
.portrait-status{position:absolute;left:22px;top:22px;z-index:3;display:flex;align-items:center;gap:8px;padding:8px 11px;background:rgba(5,6,8,.88);font-size:.48rem;letter-spacing:.13em;color:#a9a69d}
.portrait-status i{width:6px;height:6px;border-radius:50%;background:#9c8251;box-shadow:0 0 0 3px rgba(156,130,81,.13)}
.portrait-rank{left:auto;right:22px;top:22px;width:160px}
.portrait-nft{position:absolute;left:22px;bottom:105px;z-index:3;display:flex;align-items:center;gap:8px;padding:9px 12px;background:rgba(5,6,8,.9);border:1px solid rgba(216,181,107,.3)}
.portrait-nft span{color:#bea66f}.portrait-nft b{font-size:.48rem;letter-spacing:.12em;color:#b5b0a4}
.hero-stars{margin-top:9px;color:#b89c61;font-size:.72rem;letter-spacing:.22em}
.identity-legacy{grid-template-columns:repeat(4,1fr)}
.identity-legacy p{min-width:0}

.final-section{min-height:940px;padding-bottom:280px}
.site-footer{left:0;right:0;bottom:0!important;display:block!important;padding:0!important;border-top:0!important;background:#030405;text-align:left}
.footer-ecosystem{height:54px;display:flex;align-items:center;justify-content:center;gap:30px;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.footer-ecosystem>span{font-size:.45rem;letter-spacing:.2em;color:#55575c}
.footer-ecosystem>div{display:flex;align-items:center;height:100%}
.footer-ecosystem a,.footer-ecosystem div>span{height:100%;display:flex;align-items:center;gap:7px;padding:0 18px;border-left:1px solid rgba(255,255,255,.07)}
.footer-ecosystem>:last-child{border-right:1px solid rgba(255,255,255,.07)}
.footer-ecosystem img{width:22px;height:22px;object-fit:contain;border-radius:50%;opacity:.48}
.footer-ecosystem i{font-style:normal;color:#917b51}
.footer-ecosystem b{font-family:var(--font-display);font-size:.5rem;letter-spacing:.09em;color:#77797e}
.footer-main{min-height:78px;display:grid;grid-template-columns:210px 1fr auto auto;align-items:center;gap:34px;width:min(1680px,calc(100% - 84px));margin:0 auto}
.footer-wordmark{width:175px}.footer-wordmark img{width:100%;margin-left: 40px;height:auto}
.footer-navigation,.footer-documents,.footer-socials{display:flex;align-items:center;gap:22px}
.site-footer .footer-navigation a,.site-footer .footer-documents a,.site-footer .footer-socials a{font-size:.5rem;letter-spacing:.11em;color:#777980;text-transform:uppercase}
.footer-navigation a:hover,.footer-documents a:hover,.footer-socials a:hover{color:#c3ab77!important}
.footer-meta{min-height:42px;display:flex;align-items:center;justify-content:space-between;width:min(1680px,calc(100% - 84px));margin:0 auto;border-top:1px solid rgba(255,255,255,.07)}
.site-footer .footer-meta p{font-size:.48rem;letter-spacing:.1em;color:#55575c}
.footer-creators{display:flex;align-items:center;gap:11px}
.footer-creators span{font-size:.42rem;letter-spacing:.15em;color:#4e5055}
.footer-creators img{width:auto;height:25px;object-fit:contain;opacity:.65}

/* Creative director pass v10 */
.site-header{grid-template-columns:210px 1fr auto}
.site-header>.brand{grid-column:1;grid-row:1;justify-self:start;width:205px}
.main-nav{grid-column:1/-1;grid-row:1;justify-self:center;z-index:1}
.header-actions{grid-column:3;grid-row:1}
@media(min-width:1181px){
    .site-header .main-nav{
        position:absolute;left:45%;top:0;height:100%;transform:translateX(-50%);
        justify-self:auto;white-space:nowrap;
    }
}

.hero-stage::before,.hero-stage::after{
    position:absolute;top:50%;z-index:3;writing-mode:vertical-rl;
    font-size:.46rem;letter-spacing:.28em;color:#484b50;pointer-events:none;
}
.hero-stage::before{content:"DARK FANTASY MMORPG";left:0;transform:translateY(-50%) rotate(180deg)}
.hero-stage::after{content:"EST. 2006  /  TON ERA";right:0;transform:translateY(-50%)}
.hero-main-logo{height:clamp(500px,72svh,770px);margin:-74px auto -120px}
.hero-lead{max-width:760px;color:#c1beb6}

.gameplay-section{
    min-height:0;padding-bottom:96px;
    background:
        radial-gradient(circle at 18% 28%,rgba(84,119,135,.08),transparent 27%),
        radial-gradient(circle at 82% 70%,rgba(132,69,45,.07),transparent 28%),
        #060709;
}
.gameplay-intro{
    display:grid;grid-template-columns:minmax(500px,1.08fr) minmax(420px,.92fr);
    align-items:end;gap:8vw;padding-top:118px;padding-bottom:42px;
}
.gameplay-heading h2{font-size:clamp(3.7rem,5.35vw,6.8rem);max-width:940px}
.gameplay-manifesto{padding:8px 0 5px 32px;border-left:1px solid rgba(216,181,107,.34)}
.gameplay-manifesto>p{max-width:650px;color:#b8b5ad;font-size:.9rem;line-height:1.75}
.gameplay-loop{
    display:flex;align-items:center;gap:10px;margin-top:26px;padding-top:18px;
    border-top:1px solid rgba(255,255,255,.1);
}
.gameplay-loop span{display:grid;gap:3px}
.gameplay-loop b{font-size:.43rem;letter-spacing:.14em;color:#696b70}
.gameplay-loop i{font-style:normal;font-family:var(--font-display);font-size:.57rem;letter-spacing:.1em;color:#c5b892;white-space:nowrap}
.gameplay-loop em{font-style:normal;color:#575a60}
.gameplay-grid{
    display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(2,310px);
    grid-auto-rows:auto;gap:12px;
}
.activity-card,.activity-card.activity-featured{min-height:0}
.activity-card.activity-featured{grid-column:1/7;grid-row:1/3}
.activity-card:nth-child(2){grid-column:7/10;grid-row:1}
.activity-card:nth-child(3){grid-column:10/13;grid-row:1}
.activity-card:nth-child(4){grid-column:7/10;grid-row:2}
.activity-card:nth-child(5){grid-column:10/13;grid-row:2}
.activity-card::before{
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,transparent 18%,rgba(3,4,6,.18) 45%,rgba(3,4,6,.96) 100%);
}
.activity-card>span{z-index:2}
.activity-card .activity-copy{
    position:absolute;left:16px;right:16px;bottom:16px;width:auto;padding:17px 18px;
    background:rgba(4,5,7,.91);border-left:1px solid #9f895d;
}
.activity-card .activity-copy>small{
    display:block;margin-bottom:8px;color:#9f895d;font-size:.45rem;font-weight:700;letter-spacing:.18em;
}
.activity-card .activity-copy h3{font-size:clamp(1.25rem,1.55vw,1.9rem)}
.activity-card .activity-copy p{margin-top:8px;color:#b9b7b0;font-size:.68rem;line-height:1.55}
.activity-featured .activity-copy{left:24px;right:24px;bottom:24px;padding:23px 25px}
.activity-featured .activity-copy h3{font-size:clamp(2.7rem,3.8vw,4.8rem)}
.activity-featured .activity-copy p{max-width:650px;font-size:.82rem}
.activity-facts{display:flex!important;align-items:center;gap:7px;margin-top:13px}
.activity-facts b{
    padding:5px 7px;border:1px solid rgba(255,255,255,.1);
    color:#898a8c;font-size:.39rem;letter-spacing:.09em;line-height:1.25;
}

.economy-flow i{
    display:block;font-size:clamp(2.55rem,3.1vw,3.75rem);line-height:1;
    color:#c1a66b;margin-bottom:15px;text-shadow:0 0 26px rgba(193,166,107,.14);
}

.footer-main{
    grid-template-columns:190px minmax(0,1fr) 190px;gap:24px;min-height:86px;
}
.final-section footer .footer-main{display:grid}
.footer-wordmark{justify-self:start}
.footer-link-cluster{
    display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 24px;min-width:0;
}
.footer-navigation,.footer-documents,.footer-socials{justify-content:center;gap:19px}
.footer-socials{display:flex!important}
.footer-balance{width:190px;justify-self:end}
.site-footer .footer-navigation a,.site-footer .footer-documents a,.site-footer .footer-socials a{
    font-size:.52rem;color:#8b8d92;
}
.footer-meta{min-height:64px}
.site-footer .footer-meta p{font-size:.64rem;letter-spacing:.075em;color:#92949a}
.footer-creators{gap:14px}
.footer-creators span{font-size:.55rem;color:#92949a}
.footer-creators img{height:38px;opacity:.9}

/* Creative director pass v11 */
h2{font-size:clamp(2.8rem,4.35vw,5rem)}
.origin-copy h2,.war-title h2,.gameplay-heading h2,.combat-heading h2,.economy-copy h2,.materia-copy h2,
.classes-section .section-heading h2,.roadmap-copy h2,.final-content h2{font-size:clamp(2.8rem,4.35vw,5rem)}
html[lang="ru"] .origin-copy h2{font-size:clamp(2.65rem,4vw,4.7rem)}
a:focus-visible,button:focus-visible{outline:1px solid #d8b56b;outline-offset:4px}

/* Hero */
.hero-section{min-height:700px;background:#020304}
.hero-full-art{
    position:absolute;inset:0;z-index:-1;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center center;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.hero-smoke{
    z-index:0;background:
        linear-gradient(180deg,rgba(2,3,4,.22),rgba(2,3,4,.02) 36%,rgba(2,3,4,.28) 68%,#020304 100%),
        linear-gradient(90deg,rgba(2,3,4,.3),transparent 24%,transparent 76%,rgba(2,3,4,.3));
}
.hero-stage,.hero-content{z-index:2}
.hero-stage{display:grid;place-items:center}
.hero-content{
    width:100%;max-width:1500px;margin:0 auto;display:grid;
    justify-items:center;align-content:center;text-align:center;
}
.hero-art{
    position:relative;width:100%;height:clamp(430px,60svh,590px);
    display:grid;place-items:center;margin:-42px auto -98px;
}
.hero-lead{
    position:relative;top:34px;justify-self:center;width:min(820px,100%);max-width:820px;margin:0 auto 20px;
    padding:10px 18px;background:rgba(2,3,4,.72);font-size:.92rem;text-align:center;
}
.hero-actions{position:relative;top:34px;justify-self:center;width:auto;max-width:100%;margin-inline:auto;gap:10px;justify-content:center}
.metal-btn{
    min-width:244px;height:64px;padding-inline:20px;display:grid;grid-template-columns:30px 1fr 22px;gap:12px;
    clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
    border-color:rgba(183,154,96,.48);background:
        linear-gradient(110deg,rgba(255,255,255,.035),transparent 24%),
        linear-gradient(180deg,#17181b,#08090b 64%,#111216);
}
.metal-btn small{font-family:var(--font-display);font-size:.5rem;color:#77797e}
.metal-btn span{text-align:left;font-size:.7rem;letter-spacing:.17em}
.metal-btn i{font-size:1.15rem}
.metal-btn-fire{border-color:rgba(149,78,49,.65);background:linear-gradient(110deg,rgba(131,49,26,.18),transparent 40%),linear-gradient(180deg,#191719,#09090b)}
.metal-btn-ice{border-color:rgba(91,132,151,.6);background:linear-gradient(250deg,rgba(54,107,132,.16),transparent 42%),linear-gradient(180deg,#15191c,#08090b)}
.metal-btn-fire i{color:#b46a48}.metal-btn-ice i{color:#7397a8}

/* Origin */
.origin-section{min-height:820px;padding:92px 0 64px}
.origin-section::before{background:linear-gradient(90deg,rgba(4,5,7,.96),rgba(4,5,7,.74) 53%,rgba(4,5,7,.54)),linear-gradient(0deg,#060709,transparent 45%,rgba(6,7,9,.72))}
.origin-layout{grid-template-columns:minmax(370px,.8fr) 1.2fr;gap:5vw}
.origin-copy{max-width:610px}
.origin-copy>p:last-of-type{margin-top:20px;font-size:.86rem;line-height:1.7}
.origin-copy blockquote{
    margin:22px 0 0;padding:12px 16px;background:rgba(5,6,8,.72);
    border-left:1px solid #a98d56;font-size:.86rem;
}
.origin-chronicle{
    position:relative;grid-template-columns:repeat(4,1fr);align-self:center;
    border:1px solid rgba(255,255,255,.1);background:rgba(5,6,8,.74);
}
.origin-chronicle::before{content:"";position:absolute;left:7%;right:7%;top:46px;height:1px;background:linear-gradient(90deg,#6d7279,#a68b54)}
.origin-chronicle article{min-height:190px;padding:26px 20px 20px;border-bottom:0}
.origin-chronicle article::before{left:20px;top:43px;z-index:2}
.origin-chronicle span{font-size:1rem;margin:0 0 48px}
.origin-chronicle b{font-size:.8rem}
.origin-chronicle p{font-size:.62rem}

/* Universe */
.universe-section{padding-bottom:0;background:#060709}
.universe-heading{
    display:grid;grid-template-columns:1fr minmax(500px,.9fr);align-items:end;gap:6vw;
    padding-top:60px;padding-bottom:34px;
}
.universe-heading h2{font-size:clamp(2.8rem,4.1vw,4.8rem)}
.world-nav{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.1)}
.world-nav a{min-height:74px;display:grid;grid-template-columns:28px 1fr;align-content:center;gap:1px 8px;padding:12px 15px;border-right:1px solid rgba(255,255,255,.09);background:#08090b;transition:.25s}
.world-nav a:last-child{border-right:0}
.world-nav span{grid-row:1/3;font-family:var(--font-display);color:#756c5b}
.world-nav b{font-family:var(--font-display);font-size:.68rem;letter-spacing:.09em}
.world-nav small{font-size:.4rem;letter-spacing:.1em;color:#686a70}
.world-nav a:hover{background:#101114;border-color:#9d8452;transform:translateY(-3px)}
.world-panels{width:min(1680px,calc(100% - 112px));padding-left: 100px;padding-right: 100px; height:470px;min-height:0;gap:12px;border:0}
.world-panel{
    border:1px solid rgba(255,255,255,.1)!important;
    clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
}
.world-panel::after{content:"";position:absolute;inset:8px;border:1px solid rgba(216,181,107,.12);pointer-events:none}
.world-panel img{object-position:center 38%}
.world-content{left:18px;right:18px;bottom:18px;width:auto;padding:18px 20px;background:rgba(4,5,7,.9);border-left:1px solid #9b8250}
.world-content .world-sigil{position:absolute;right:18px;top:16px;font-style:normal;font-size:1.15rem;color:#91794d}
.world-content h3{font-size:clamp(2rem,3vw,3.6rem)}
.world-content>p{margin-bottom:8px}
.world-content>span{font-size:.72rem;margin-top:10px;max-width:360px}
.world-content blockquote{font-size:.62rem;margin-top:12px;padding-top:9px}
.world-index{font-size:2.8rem;top:16px;right:18px}
.elemental-transition{height:170px}

/* Elemental war */
.war-section{min-height:760px;padding:94px 0 62px}
.war-section::after{
    left:0;right:0;bottom:0;height:clamp(190px,30vh,310px);z-index:1;
    background:linear-gradient(180deg,transparent 0,rgba(5,6,8,.58) 42%,#060709 100%);
    pointer-events:none;
}
.war-layout{grid-template-columns:.78fr 1.22fr;gap:5vw;align-items:center}
.war-title>p:last-child{font-size:.9rem;line-height:1.75}
.element-grid{grid-template-columns:repeat(4,1fr);background:transparent;border:0;gap:8px}
.element-grid article{
    position:relative;min-height:250px;padding:20px 18px;border:1px solid rgba(255,255,255,.1);
    align-content:center;text-align:center;background:rgba(5,6,8,.78);overflow:hidden;
}
.element-grid article::before{content:"";position:absolute;inset:0;opacity:.18;transition:.25s}
.element-grid article:hover::before{opacity:.3}
.element-grid article>span{position:absolute;left:13px;top:12px;margin:0}
.element-grid article>.element-icon{
    position:relative;width:94px;height:94px;margin:0 auto 25px;display:grid;place-items:center;
    border:1px solid rgba(255,255,255,.12);background:rgba(4,5,7,.56);
    clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
    font-style:normal;font-size:4.35rem;line-height:1;
}
.element-grid article>.element-icon img{display:block;width:100%;height:100%;object-fit:contain}
.element-grid article>b{position:relative;font-size:1.22rem}
.element-grid article>small{position:relative;font-size:.66rem;line-height:1.5}
.element-grid article>em{position:relative;margin-top:18px;padding-top:13px;border-top:1px solid rgba(255,255,255,.1);font-style:normal;font-size:.5rem;letter-spacing:.13em;color:#a0a1a4}
.element-fire::before{background:radial-gradient(circle at 50% 40%,#a84227,transparent 64%)}.element-fire>i{color:#b75d3b}
.element-ice::before{background:radial-gradient(circle at 50% 40%,#477f99,transparent 64%)}.element-ice>i{color:#6b9caf}
.element-storm::before{background:radial-gradient(circle at 50% 40%,#786da3,transparent 64%)}.element-storm>i{color:#8d83b5}
.element-earth::before{background:radial-gradient(circle at 50% 40%,#697f49,transparent 64%)}.element-earth>i{color:#84965e}
.war-lore{margin-top:34px;font-size:1rem}

/* Gameplay */
.gameplay-section{min-height:760px;padding-bottom:62px}
.gameplay-intro{grid-template-columns:1fr minmax(500px,.9fr);padding-top:86px;padding-bottom:25px}
.gameplay-heading h2{font-size:clamp(2.8rem,4.1vw,4.75rem)}
.gameplay-manifesto>p{font-size:.82rem}
.gameplay-loop{margin-top:18px;padding-top:14px}
.gameplay-experience{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(390px,.65fr);height:455px;border:1px solid rgba(255,255,255,.1);background:#050608}
.gameplay-stage{position:relative;overflow:hidden;border-right:1px solid rgba(255,255,255,.1)}
.gameplay-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 35%,rgba(4,5,7,.18)),linear-gradient(0deg,rgba(3,4,6,.98),transparent 70%)}
.gameplay-stage>img{width:100%;height:100%;object-fit:cover}
.gameplay-stage-top{position:absolute;left:20px;right:20px;top:18px;z-index:2;display:flex;justify-content:space-between;font-size:.44rem;letter-spacing:.15em;color:#aaa69c}
.gameplay-stage-copy{position:absolute;left:24px;right:24px;bottom:22px;z-index:2;max-width:680px}
.gameplay-stage-copy>small{font-size:.46rem;letter-spacing:.18em;color:#b59b65}
.gameplay-stage-copy h3{font-size:clamp(2.5rem,3.8vw,4.7rem);margin:7px 0 10px}
.gameplay-stage-copy>p{max-width:630px;font-size:.78rem;color:#c1beb5}
.gameplay-stage-copy>div{display:flex;gap:7px;margin-top:14px}
.gameplay-stage-copy>div b{padding:6px 8px;border:1px solid rgba(255,255,255,.13);font-size:.42rem;letter-spacing:.08em;color:#a2a09a}
.gameplay-menu{display:grid;grid-template-rows:repeat(5,1fr)}
.gameplay-menu button{
    position:relative;display:grid;grid-template-columns:30px 36px 1fr;grid-template-rows:1fr 1fr;align-items:end;
    gap:0 10px;padding:12px 16px;border:0;border-bottom:1px solid rgba(255,255,255,.09);
    background:#08090b;text-align:left;cursor:pointer;transition:.22s;
}
.gameplay-menu button:last-child{border-bottom:0}
.gameplay-menu button::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent}
.gameplay-menu span{grid-row:1/3;font-family:var(--font-display);font-size:.5rem;color:#606269}
.gameplay-menu i{grid-row:1/3;align-self:center;font-style:normal;font-size:1.25rem;color:#756b58;text-align:center}
.gameplay-menu b{align-self:end;font-family:var(--font-display);font-size:.68rem;letter-spacing:.06em}
.gameplay-menu small{align-self:start;font-size:.42rem;letter-spacing:.1em;color:#686a70}
.gameplay-menu button:hover,.gameplay-menu button.active{background:linear-gradient(90deg,rgba(216,181,107,.1),#0b0c0f)}
.gameplay-menu button.active::before{background:#b79b62}
.gameplay-menu button.active i{color:#c4a96e}

/* Combat */
.combat-section{min-height:720px;padding:2px 0 48px}
.combat-heading{grid-template-columns:1fr minmax(360px,520px);margin-bottom:22px}
.combat-heading h2{font-size:clamp(2.8rem,4vw,4.65rem)}
.combat-heading>p{font-size:.8rem;line-height:1.7}
.duel-board-simple{grid-template-columns:minmax(210px,.62fr) minmax(520px,1.45fr) minmax(210px,.62fr);min-height:410px}
.duel-board-simple .duelist{min-height:410px}
.duel-board-simple .duelist img{min-height:318px}
.duel-board-simple .tactical-duel{min-height:410px;padding:16px 22px}
.duel-board-simple .zone-columns{padding:12px 0}
.vertical-choice>strong{display:flex!important;align-items:center;gap:9px}
.vertical-choice>strong i{width:22px;height:22px;display:grid;place-items:center;border:1px solid #806d49;font-style:normal;color:#b69d68}
.defense-column>strong{justify-content:flex-end}
.combat-reveal{
    display:grid;grid-template-columns:auto 1fr 1.2fr;align-items:center;gap:1px;
    margin-top:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);
}
.combat-reveal>*{min-height:52px;display:flex;align-items:center;padding:9px 15px;background:#0b0c0f}
.combat-reveal small{font-size:.42rem;letter-spacing:.15em;color:#6f7177}
.combat-reveal p{gap:8px}
.combat-reveal p b{font-family:var(--font-display);font-size:.72rem;color:#c0b28f}
.combat-reveal p i{font-style:normal;color:#6d6f74}
.combat-reveal strong{font-family:var(--font-display);font-size:.84rem;color:#d4b873}

/* Economy */
.economy-section{min-height:760px;padding:92px 0 58px}
.economy-layout{grid-template-columns:minmax(380px,.7fr) minmax(650px,1.3fr);gap:5vw}
.economy-copy h2{font-size:clamp(2.8rem,4.1vw,4.8rem)}
.economy-copy>p:last-of-type{font-size:.84rem;line-height:1.7}
.economy-promise{display:flex;align-items:center;gap:14px;margin-top:22px;padding:14px 16px;border:1px solid rgba(216,181,107,.22);background:rgba(5,6,8,.78)}
.economy-promise>i{font-style:normal;font-size:1.4rem;color:#a88e5a}
.economy-promise p{display:grid}.economy-promise b{font-family:var(--font-display);font-size:.65rem;letter-spacing:.1em}
.economy-promise small{font-size:.54rem;color:#7f8186;margin-top:3px}
.economy-flow{grid-template-columns:repeat(5,1fr);gap:6px}
.economy-flow article{min-height:225px;padding:22px 13px;background:rgba(5,6,8,.88);border:1px solid rgba(255,255,255,.1)}
.economy-flow article::after{right:-8px}
.economy-flow article:nth-child(3)::after{display:block}.economy-flow article:nth-child(5)::after{display:none}
.economy-flow i{font-size:2.9rem}
.economy-flow b{font-size:.66rem}
.economy-flow small{font-size:.5rem;line-height:1.45}
.economy-notes{margin-top:18px}
.economy-notes article{padding:14px 18px}

/* Materia */
.materia-section{min-height:800px;padding:88px 0 58px}
.materia-layout{grid-template-columns:.8fr 1.2fr;gap:6vw}
.materia-art{min-height:560px}
.materia-art::before,.materia-orbit{display:block}
.materia-art::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(90,155,178,.14),transparent 68%)}
.materia-art img{width:min(390px,67%)}
.materia-copy{max-width:820px}
.materia-copy h2{font-size:clamp(2.8rem,4vw,4.7rem)}
.materia-copy>p{font-size:.84rem;line-height:1.7;margin:18px 0 22px}
.materia-definition{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.1);margin-bottom:17px}
.materia-definition article{min-height:82px;display:grid;align-content:center;padding:13px 15px;border-right:1px solid rgba(255,255,255,.09)}
.materia-definition article:last-child{border-right:0}
.materia-definition span{font-size:.42rem;letter-spacing:.13em;color:#71747a}
.materia-definition b{font-family:var(--font-display);font-size:.58rem;letter-spacing:.06em;color:#aaa18d;margin-top:5px}
.materia-uses{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(255,255,255,.1)}
.materia-uses article{min-height:82px;padding:14px 12px;border-right:1px solid rgba(255,255,255,.09)}
.materia-uses article:nth-child(2n){border-right:0}
.materia-uses b{font-size:.66rem}
.materia-uses small{font-size:.56rem;line-height:1.45}

/* Final creative rebuild v17 */
.hero-section .hero-actions{width:min(1050px,100%)}
.hero-section .metal-btn{
    min-width:0;flex:1;grid-template-columns:1fr 24px;padding-inline:22px;
    background:
        linear-gradient(110deg,rgba(255,255,255,.045),transparent 27%),
        linear-gradient(180deg,#1b1b1d 0,#0b0c0e 58%,#131416 100%);
}
.hero-section .metal-btn span{text-align:center}
.metal-btn-lore{border-color:rgba(216,181,107,.38)}
.metal-btn-lore i{color:#b9a06c}

.combat-section{padding-bottom:58px}
.combat-logic{
    display:grid;grid-template-columns:1.08fr .92fr;gap:8px;margin-top:10px;
}
.combat-logic .combat-steps{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0;
    border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.08);
}
.combat-logic .combat-steps p{
    min-height:58px;display:flex;align-items:center;gap:12px;padding:10px 14px;background:#090a0d;
}
.combat-logic .combat-steps span{
    flex:0 0 28px;width:28px;height:28px;display:grid;place-items:center;
    border:1px solid #806d49;font-family:var(--font-display);font-size:.55rem;color:#c0a66f;
}
.combat-logic .combat-steps b{
    font-family:var(--font-display);font-size:.56rem;line-height:1.45;letter-spacing:.03em;color:#aaa69c;
}
.combat-logic .class-modifiers{
    display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:0;
}
.combat-logic .class-modifiers button{
    min-height:60px;grid-template-columns:26px 1fr;grid-template-rows:auto auto;align-content:center;
    gap:1px 8px;padding:8px 10px;border:1px solid rgba(255,255,255,.1);
    background:#090a0d;text-align:left;
}
.combat-logic .class-modifiers button>span{
    grid-row:1/3;width:25px;height:25px;display:grid;place-items:center;
    border:1px solid rgba(216,181,107,.24);color:#9d8657;
}
.combat-logic .class-modifiers b{font-size:.57rem}
.combat-logic .class-modifiers small{font-size:.42rem;line-height:1.35}
.combat-logic .class-modifiers button.active{
    border-color:#9f895d;background:linear-gradient(135deg,rgba(159,137,93,.13),#090a0d);
}

.economy-flow{grid-template-columns:repeat(3,1fr);gap:7px}
.economy-flow article{min-height:160px;padding:18px 16px}
.economy-flow article::after{display:none!important}
.economy-flow i{font-size:2.35rem;margin-bottom:12px}
.economy-flow b{font-size:1.2rem}
.economy-flow small{max-width:190px;margin-inline:auto;font-size:.52rem}

.roadmap-section{min-height:920px;padding-top:92px}
.roadmap-copy{margin-bottom:34px}
.chronicle-line{grid-template-columns:repeat(4,1fr);gap:10px}
.chronicle-line article{
    min-height:152px;padding:18px 17px;
    border:1px solid rgba(255,255,255,.1);
    background:linear-gradient(145deg,rgba(8,9,12,.9),rgba(5,6,8,.72));
}
.chronicle-line article>span{font-size:1.65rem;margin-bottom:18px}
.chronicle-line article.current{
    border-color:rgba(216,181,107,.62);
    background:linear-gradient(145deg,rgba(49,39,24,.48),rgba(7,8,10,.9));
}
.chronicle-line small{font-size:.46rem}
.chronicle-line b{font-size:.68rem;margin:5px 0}
.chronicle-line p{max-width:none;font-size:.56rem}

.community-callout{
    width:min(720px,100%);display:grid;grid-template-columns:auto 1fr;align-items:center;gap:20px;
    margin:0 auto 24px;padding:15px 18px;text-align:left;
    border-top:1px solid rgba(216,181,107,.32);border-bottom:1px solid rgba(216,181,107,.2);
    background:rgba(3,4,6,.62);
}
.community-callout span{
    font-family:var(--font-display);font-size:.62rem;letter-spacing:.13em;color:#c1a66e;white-space:nowrap;
}
.community-callout p{font-size:.68rem;line-height:1.55;color:#92918d}
.final-section{min-height:824px;padding-top:82px;padding-bottom:214px}
.final-content>p{margin-bottom:22px}
.final-actions{top:0;width:min(800px,100%);margin:0 auto}
.final-actions .metal-btn{min-width:0;flex:1;grid-template-columns:1fr 22px}
.final-actions .metal-btn span{text-align:center}

/* Art direction pass v19 */
:root{--ember:#b85c34;--frost:#6ba9bd;--parchment:#c8b88f}

.content-link{
    display:inline-flex;align-items:center;justify-content:space-between;gap:34px;min-width:280px;
    padding:14px 0;border-bottom:1px solid rgba(216,181,107,.42);color:#cdb984;
    font-size:.57rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    transition:color .25s,border-color .25s;
}
.content-link i{font-style:normal;font-size:.9rem;transition:transform .25s}
.content-link:hover{color:var(--gold-bright);border-color:var(--gold-bright)}
.content-link:hover i{transform:translateY(3px)}

/* Hero: restrained motion and legacy framing */
.hero-section{
    min-height:700px;
    background:#020304;
}

.hero-section::after{
    display:none;
}
.hero-full-art{
    -webkit-mask-image:none;
    mask-image:none;
    animation:heroBreath 14s ease-in-out infinite alternate;
    will-change:transform,filter;
}
.hero-smoke{
    display:none;
}

.hero-section .metal-btn::before{
    content:"";position:absolute;inset:1px;
    background:linear-gradient(115deg,transparent 22%,rgba(255,255,255,.08),transparent 51%);
    transform:translateX(-130%);transition:transform .55s ease;
}
.hero-section .metal-btn:hover::before{transform:translateX(130%)}
.hero-section .metal-btn:hover{transform:translateY(-2px);border-color:rgba(216,181,107,.72)}

/* Stronger section rhythm */
.war-section::after{
    left:0;right:0;bottom:0;height:180px;border:0;
    background:linear-gradient(0deg,#060709 0%,rgba(6,7,9,.82) 28%,transparent 100%);
    pointer-events:none;
}
.origin-chronicle article{transition:background .28s,transform .28s}
.origin-chronicle article:hover{background:rgba(24,22,20,.72);transform:translateY(-3px)}
.world-panel::after{
    content:"";position:absolute;inset:0;z-index:0;border:1px solid transparent;
    box-shadow:inset 0 0 0 0 rgba(216,181,107,0);transition:border-color .4s,box-shadow .4s;pointer-events:none;
}
.world-panel:hover::after{border-color:rgba(216,181,107,.34);box-shadow:inset 0 0 80px rgba(216,181,107,.07)}
.world-panel img{transition:transform 1.1s cubic-bezier(.2,.8,.2,1),filter .6s}
.world-panel:hover img{transform:scale(1.045);filter:saturate(1.08) contrast(1.04)}
.world-content{z-index:1}
.world-sigil{
    display:grid;place-items:center;width:36px;height:36px;margin-bottom:16px;
    border:1px solid rgba(216,181,107,.34);border-radius:50%;background:rgba(5,6,8,.46);
    color:#c0a66c;font-style:normal;box-shadow:0 0 30px rgba(0,0,0,.35);
}
.element-grid article{position:relative;overflow:hidden;transition:background .3s,transform .3s}
.element-grid article::before{
    content:"";position:absolute;width:130px;aspect-ratio:1;right:-55px;bottom:-70px;
    border-radius:50%;opacity:.16;filter:blur(18px);transition:opacity .3s,transform .4s;
}
.element-grid article:hover{transform:translateY(-4px);background:rgba(14,15,19,.86)}
.element-grid article:hover::before{opacity:.34;transform:scale(1.15)}
.element-fire::before{background:#d3542f}.element-ice::before{background:#5d9fc0}
.element-storm::before{background:#9e8aca}.element-earth::before{background:#728b54}
.element-grid .element-icon{position:relative;isolation:isolate}
.element-grid .element-icon::after{
    content:"";position:absolute;inset:-9px;z-index:-1;border:1px solid rgba(255,255,255,.1);border-radius:50%;
}
.gameplay-experience{box-shadow:0 35px 100px rgba(0,0,0,.38)}
.gameplay-stage>img{transition:opacity .25s,transform .8s cubic-bezier(.2,.8,.2,1),filter .5s}
.gameplay-experience:hover .gameplay-stage>img{transform:scale(1.018);filter:saturate(1.08)}
.gameplay-menu button{overflow:hidden}
.gameplay-menu button::after{
    content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(216,181,107,.06),transparent);
    transform:translateX(-110%);transition:transform .45s;
}
.gameplay-menu button:hover::after{transform:translateX(110%)}
.duel-board-simple{box-shadow:0 34px 90px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.025)}
.economy-flow article{position:relative;overflow:hidden;transition:transform .28s,border-color .28s,background .28s}
.economy-flow article::before{
    content:"";position:absolute;left:12%;right:12%;bottom:-1px;height:1px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .28s;
}
.economy-flow article:hover{transform:translateY(-5px);border-color:rgba(216,181,107,.34);background:rgba(13,14,17,.94)}
.economy-flow article:hover::before{opacity:1}
.materia-art::after{
    content:"";position:absolute;left:50%;top:50%;width:54%;aspect-ratio:1;border-radius:50%;
    border:1px dashed rgba(110,175,198,.14);animation:slowOrbit 38s linear infinite reverse;
}
.chronicle-line article{transition:transform .28s,border-color .28s}
.chronicle-line article:hover{transform:translateY(-5px);border-color:rgba(216,181,107,.33)}

@keyframes heroBreath{
    from{transform:scale(1.005);filter:saturate(.9) contrast(1.03)}
    to{transform:scale(1.026);filter:saturate(1.06) contrast(1.05)}
}
@keyframes slowOrbit{to{transform:translate(-50%,-50%) rotate(360deg)}}

.about-section {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(47, 135, 255, 0.14), transparent 36%),
    radial-gradient(circle at 80% 70%, rgba(197, 91, 41, 0.14), transparent 34%),
    linear-gradient(180deg, #08090d 0%, #101016 50%, #08090d 100%);
}

.about-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.8), rgba(0,0,0,.35), rgba(0,0,0,.85)),
    url("../assets/optimized/economy-world.webp") center/cover no-repeat;
  opacity: .28;
  filter: saturate(.8) contrast(1.1);
}

.about-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 70px;
  align-items: center;
}

.about-copy h2 {
  margin: 18px 0 26px;
  font-family: "Cinzel", serif;
  font-size: clamp(42px, 6vw, 88px);
  line-height: .92;
  letter-spacing: -0.04em;
  color: #f4ead7;
}

.about-copy p {
  max-width: 720px;
  margin: 0 0 18px;
  color: rgba(244, 234, 215, .76);
  font-size: 18px;
  line-height: 1.7;
}

.about-copy blockquote {
  margin-top: 34px;
  padding-left: 24px;
  border-left: 1px solid rgba(218, 172, 103, .65);
  color: #daac67;
  font-family: "Cinzel", serif;
  font-size: 22px;
  line-height: 1.45;
}

.about-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.about-cards article {
  min-height: 230px;
  padding: 28px;
  border: 1px solid rgba(218, 172, 103, .18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(8, 9, 13, .66);
  box-shadow: inset 0 0 40px rgba(255,255,255,.025);
  backdrop-filter: blur(14px);
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
}

.about-cards article:hover {
  transform: translateY(-8px);
  border-color: rgba(218, 172, 103, .48);
  background:
    linear-gradient(180deg, rgba(218,172,103,.11), rgba(255,255,255,.02)),
    rgba(8, 9, 13, .75);
}

.about-cards span {
  display: block;
  margin-bottom: 34px;
  color: rgba(218, 172, 103, .85);
  font-family: "Cinzel", serif;
  font-size: 13px;
  letter-spacing: .18em;
}

.about-cards b {
  display: block;
  margin-bottom: 14px;
  color: #f4ead7;
  font-family: "Cinzel", serif;
  font-size: 20px;
  letter-spacing: .06em;
}

.about-cards p {
  margin: 0;
  color: rgba(244, 234, 215, .62);
  font-size: 14px;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .about-section {
    padding: 0 0;
  }

  .about-layout {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .about-cards {
    grid-template-columns: 1fr;
  }
}

 .war-elements-section {
  position: relative;
  min-height: 100vh;
  padding: 110px 0 80px;
  background:
    radial-gradient(circle at 20% 30%, rgba(184, 92, 52, .16), transparent 30%),
    radial-gradient(circle at 82% 24%, rgba(107, 169, 189, .13), transparent 28%),
    linear-gradient(180deg, #050608 0%, #0a0b0f 52%, #050608 100%);
}

.war-elements-section .war-backdrop {
  position: absolute;
  inset: 0;
  background: url("../assets/optimized/elemental-war.webp") center/cover no-repeat;
  opacity: .22;
}

.war-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3,4,6,.94), rgba(3,4,6,.68) 48%, rgba(3,4,6,.92)),
    linear-gradient(0deg, #050608, transparent 45%, rgba(5,6,8,.64));
}

.war-elements-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 54px;
  align-items: center;
}

.war-elements-section .war-title h2 {
  margin: 18px 0 24px;
  font-size: clamp(3.4rem, 5.8vw, 7.4rem);
}

.war-elements-section .war-title > p:last-of-type {
  max-width: 660px;
  color: rgba(244, 241, 233, .76);
  font-size: .95rem;
  line-height: 1.75;
}

.war-explain {
  display: grid;
  gap: 10px;
  margin-top: 30px;
}

.war-explain article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 4px 14px;
  padding: 14px 16px;
  background: rgba(5, 6, 8, .72);
  border: 1px solid rgba(255,255,255,.09);
  border-left: 1px solid rgba(216,181,107,.45);
}

.war-explain span {
  grid-row: 1 / 3;
  font-family: var(--font-display);
  color: var(--gold);
  font-size: .75rem;
}

.war-explain b {
  font-family: var(--font-display);
  color: #f4f1e9;
  font-size: .78rem;
  letter-spacing: .06em;
}

.war-explain p {
  color: rgba(244,241,233,.56);
  font-size: .68rem;
  line-height: 1.5;
}

.element-showcase {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.element-card {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  background: #050608;
  border: 1px solid rgba(255,255,255,.11);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  transition: transform .35s ease, border-color .35s ease;
}

.element-card:hover {
  transform: translateY(-8px);
  border-color: rgba(216,181,107,.52);
}

.element-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(3,4,6,.96) 88%);
}

.element-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .7s ease;
}

.element-card:hover img {
  transform: scale(1.06);
}

.element-card div {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  padding: 16px 16px 18px;
  background: rgba(4,5,7,.86);
  border-left: 1px solid rgba(216,181,107,.45);
}

.element-card span {
  display: block;
  margin-bottom: 8px;
  color: rgba(216,181,107,.78);
  font-family: var(--font-display);
  font-size: .62rem;
}

.element-card b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: .08em;
  color: #f4f1e9;
}

.element-card small {
  display: block;
  margin-top: 6px;
  color: rgba(244,241,233,.58);
  font-size: .64rem;
  line-height: 1.45;
}

.element-card em {
  display: block;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.1);
  color: rgba(216,181,107,.82);
  font-size: .48rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .14em;
}

.fire-card { box-shadow: inset 0 -120px 90px rgba(184, 92, 52, .16); }
.water-card { box-shadow: inset 0 -120px 90px rgba(107, 169, 189, .15); }
.air-card { box-shadow: inset 0 -120px 90px rgba(120, 109, 163, .16); }
.earth-card { box-shadow: inset 0 -120px 90px rgba(114, 139, 84, .15); }

.war-elements-section .war-lore {
  grid-column: 1 / -1;
  margin-top: 34px;
  padding: 24px 34px;
  text-align: center;
  border-top: 1px solid rgba(216,181,107,.24);
  border-bottom: 1px solid rgba(216,181,107,.14);
  background: rgba(5,6,8,.62);
  color: #cdb984;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.45rem);
}

@media (max-width: 1100px) {
  .war-elements-layout {
    grid-template-columns: 1fr;
  }

  .element-showcase {
    grid-template-columns: repeat(2, 1fr);
  }

  .element-card {
    min-height: 440px;
  }
}

@media (max-width: 640px) {
  .element-showcase {
    grid-template-columns: 1fr;
  }

  .element-card {
    min-height: 420px;
  }
}

.header-play-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.play-btn {
    position: relative;
    overflow: hidden;

    min-height: 50px;
    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    border: 1px solid rgba(255,255,255,.08);

    background:
        linear-gradient(180deg,
        rgba(255,255,255,.10),
        rgba(255,255,255,.015)),
        rgba(6,7,10,.92);

    backdrop-filter: blur(12px);

    clip-path: polygon(
        0 0,
        calc(100% - 12px) 0,
        100% 12px,
        100% 100%,
        12px 100%,
        0 calc(100% - 12px)
    );

    text-decoration: none;

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        background .28s ease;
}

.play-btn::before {
    content: "";
    position: absolute;
    inset: 1px;
    opacity: .45;
    clip-path: inherit;
    pointer-events: none;
}

.play-btn:hover {
    transform: translateY(-3px);
}

.play-btn i {
    position: relative;
    z-index: 2;

    font-style: normal;
    font-size: 16px;
}

.play-btn span:last-child {
    position: relative;
    z-index: 2;

    color: #f4f1e9;
    font-family: var(--font-display);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: none;
}

/* FIRE BUTTON */

.browser-btn {
    border-color: rgba(255,120,60,.24);

    background:
        linear-gradient(180deg,
        rgba(255,120,60,.12),
        rgba(255,120,60,.02)),
        rgba(8,7,6,.92);

    box-shadow:
        inset 0 0 40px rgba(255,120,60,.08),
        0 0 24px rgba(255,120,60,.06);
}

.browser-btn::before {
    background:
        linear-gradient(90deg,
        transparent,
        rgba(255,140,80,.18),
        transparent);
}

.browser-btn:hover {
    border-color: rgba(255,140,80,.58);

    box-shadow:
        inset 0 0 60px rgba(255,120,60,.14),
        0 0 40px rgba(255,120,60,.16);
}

.browser-btn i {
    color: #ff8a4c;
    text-shadow: 0 0 16px rgba(255,120,60,.42);
}

/* TELEGRAM / TON BUTTON */

.telegram-btn {
    border-color: rgba(75,145,255,.24);

    background:
        linear-gradient(180deg,
        rgba(75,145,255,.12),
        rgba(75,145,255,.02)),
        rgba(6,8,12,.92);

    box-shadow:
        inset 0 0 40px rgba(75,145,255,.08),
        0 0 24px rgba(75,145,255,.06);
}

.telegram-btn::before {
    background:
        linear-gradient(90deg,
        transparent,
        rgba(75,145,255,.18),
        transparent);
}

.telegram-btn:hover {
    border-color: rgba(75,145,255,.58);

    box-shadow:
        inset 0 0 60px rgba(75,145,255,.14),
        0 0 40px rgba(75,145,255,.16);
}

.telegram-btn i {
    color: #57a6ff;
    text-shadow: 0 0 16px rgba(75,145,255,.42);
}

@media (max-width: 980px) {
    .header-play-buttons {
        display: none;
    }
}

.nft-premium-section {
    position: relative;
    overflow: hidden;
    padding: 90px 0 70px;

    background:
        radial-gradient(circle at 20% 20%, rgba(216,181,107,.08), transparent 28%),
        radial-gradient(circle at 80% 50%, rgba(75,145,255,.06), transparent 32%),
        linear-gradient(180deg, #050608 0%, #090a0d 50%, #050608 100%);
}

.nft-premium-section .nft-backdrop {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(90deg,
        rgba(3,4,6,.95),
        rgba(3,4,6,.72),
        rgba(3,4,6,.95));

    opacity: .92;
}

.nft-premium-layout {
    position: relative;
    z-index: 2;
}

.nft-premium-head {
    margin-bottom: 30px;
}

.nft-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-top: 18px;
}

.nft-title-copy h2 {
    margin: 0 0 14px;

    font-size: clamp(2.8rem, 5vw, 5.5rem);
    line-height: .88;
    letter-spacing: -.05em;
}

.nft-title-copy p {
    max-width: 620px;

    color: rgba(244,241,233,.64);

    font-size: .9rem;
    line-height: 1.7;
}

.nft-economy {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.nft-economy article {
    min-width: 180px;

    padding: 14px 16px;

    border: 1px solid rgba(255,255,255,.08);
    border-left: 1px solid rgba(216,181,107,.42);

    background:
        linear-gradient(180deg,
        rgba(255,255,255,.04),
        rgba(255,255,255,.01));

    backdrop-filter: blur(12px);
}

.nft-economy span {
    display: block;

    margin-bottom: 8px;

    color: #d8b56b;

    font-family: var(--font-display);
    font-size: 1.15rem;
}

.nft-economy b {
    color: #f4f1e9;

    font-size: .62rem;
    letter-spacing: .08em;
}

.nft-economy small {
    display: block;

    margin-top: 4px;

    color: rgba(244,241,233,.48);

    font-size: .55rem;
    line-height: 1.45;
}

.nft-premium-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
}

.nft-premium-card {
    position: relative;
    overflow: hidden;

    height: 340px;

    border: 1px solid rgba(255,255,255,.08);

    background: #050608;

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.nft-premium-card:hover {
    transform: translateY(-6px);

    border-color: rgba(216,181,107,.48);

    box-shadow:
        0 24px 50px rgba(0,0,0,.35);
}

.nft-premium-card::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
        180deg,
        transparent 42%,
        rgba(3,4,6,.96) 100%
    );
}

.nft-premium-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;

    transition: transform .7s ease;
}

.nft-premium-card:hover img {
    transform: scale(1.05);
}

.nft-card-overlay {
    position: absolute;

    left: 12px;
    right: 12px;
    bottom: 12px;

    z-index: 2;
}

.nft-card-overlay span {
    display: block;

    margin-bottom: 6px;

    color: rgba(216,181,107,.82);

    font-size: .42rem;
    font-weight: 700;
    letter-spacing: .14em;
}

.nft-card-overlay b {
    display: block;

    color: #f4f1e9;

    font-family: var(--font-display);
    font-size: .78rem;
    line-height: 1.15;
}

@media (max-width: 1400px) {
    .nft-premium-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 980px) {
    .nft-title-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .nft-premium-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .nft-premium-grid {
        grid-template-columns: 1fr;
    }

    .nft-premium-card {
        height: 420px;
    }
}