/* Xavii Online v9 — cinematic MMORPG portal */
:root{
  --xo-bg:#050506;
  --xo-panel:#0a0b0d;
  --xo-panel-2:#0e1013;
  --xo-line:rgba(255,145,38,.22);
  --xo-line-soft:rgba(255,255,255,.08);
  --xo-orange:#ff7a00;
  --xo-orange-2:#ff9b1d;
  --xo-gold:#ffc45f;
  --xo-cyan:#2bd9df;
  --xo-green:#2ee38d;
  --xo-red:#ff556d;
  --xo-text:#f5efe8;
  --xo-muted:#958c84;
}
html,body{background:var(--xo-bg)}
body{font-family:Inter,"Segoe UI",Arial,sans-serif;background:#050506;color:var(--xo-text)}
.site-bg{display:none!important}

/* header inspired by the reference: logo + quiet nav + right status */
.site-header{height:84px;background:rgba(5,6,7,.88);border-bottom:1px solid rgba(255,140,34,.14);backdrop-filter:blur(16px);box-shadow:none}
.cinematic-nav{height:84px;width:min(1400px,calc(100% - 48px));gap:28px}
.cinematic-brand{width:124px;height:66px;margin:0 12px 0 0;display:grid;place-items:center}
.cinematic-brand img{width:116px;max-height:62px;object-fit:contain;filter:drop-shadow(0 0 13px rgba(255,110,0,.25))}
.cinematic-links{display:flex;gap:13px}
.cinematic-links .nav-link{min-height:auto;padding:31px 14px 27px!important;border:0!important;background:none!important;clip-path:none!important;box-shadow:none!important;color:#a59d96!important;font-size:12.5px;letter-spacing:.105em;font-weight:900;transform:none!important}
.cinematic-links .nav-link:after{display:block!important;left:14px;right:14px;bottom:19px;background:linear-gradient(90deg,transparent,#ff8410,transparent)}
.cinematic-links .nav-link:hover,.cinematic-links .nav-link.active{color:#fff!important}
.cinematic-links .nav-link:hover:after,.cinematic-links .nav-link.active:after{transform:scaleX(1)}
.top-server-status{display:flex;flex-direction:column;gap:3px;align-items:flex-end;padding-right:19px;margin-right:2px;border-right:1px solid rgba(255,255,255,.08)}
.top-status-label{font-size:8px;letter-spacing:.2em;font-weight:900;color:#665f59}
.top-status-value{display:flex;align-items:center;gap:7px;font:900 11.5px/1 monospace;letter-spacing:.1em;color:#bcb4ac}
.top-status-value.online{color:#61efab}.top-status-value.maintenance{color:#ffae35}.top-status-value.offline{color:#ff6a7d}
.top-status-value .dot{width:7px;height:7px}
.cinematic-user{align-items:center;gap:18px}
.login-text-link,.account-text-link,.nav-logout{color:#bcb4ac;font-size:11.5px;letter-spacing:.1em;font-weight:900;text-transform:uppercase;background:none;border:0;padding:8px 0;cursor:pointer}
.login-text-link:hover,.account-text-link:hover,.nav-logout:hover{color:#fff}
.create-link{padding:12px 18px;color:#160b00;background:linear-gradient(135deg,#ffd266,#ff940c 45%,#ef6500);font-size:10.5px;letter-spacing:.105em;font-weight:950;text-transform:uppercase;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);box-shadow:0 0 22px rgba(255,109,0,.16)}
.create-link:hover{filter:brightness(1.1);box-shadow:0 0 30px rgba(255,109,0,.28)}

/* cinematic hero */
.cinematic-hero{position:relative;min-height:calc(100vh - 84px);height:max(720px,calc(100vh - 84px));overflow:hidden;isolation:isolate;background:#050506;border-bottom:1px solid rgba(255,138,27,.22)}
.cinematic-sky{position:absolute;z-index:-8;inset:0;background:
  radial-gradient(ellipse at 50% 5%,rgba(255,151,49,.15),transparent 27%),
  radial-gradient(ellipse at 72% 42%,rgba(255,88,0,.17),transparent 27%),
  radial-gradient(ellipse at 29% 56%,rgba(43,217,223,.045),transparent 24%),
  radial-gradient(ellipse at 50% 100%,rgba(255,118,0,.13),transparent 40%),
  linear-gradient(180deg,#080a0d 0%,#080808 38%,#090605 74%,#030303 100%)}
.cinematic-sky:before{content:"";position:absolute;inset:0;background:
  linear-gradient(108deg,transparent 0 19%,rgba(255,255,255,.012) 19.15%,transparent 19.3% 70%,rgba(255,135,25,.018) 70.15%,transparent 70.3%),
  repeating-linear-gradient(90deg,transparent 0 89px,rgba(255,255,255,.009) 90px 91px);mask-image:linear-gradient(to bottom,#000,transparent 70%)}
.cinematic-sky:after{content:"";position:absolute;left:-4%;right:-4%;bottom:-20px;height:44%;background:linear-gradient(180deg,transparent,#050403 30%,#020202 100%);clip-path:polygon(0 49%,4% 45%,8% 51%,13% 42%,17% 48%,22% 39%,28% 47%,33% 36%,38% 43%,43% 32%,48% 42%,54% 31%,59% 43%,64% 34%,69% 46%,74% 39%,80% 49%,85% 41%,90% 51%,95% 45%,100% 50%,100% 100%,0 100%);opacity:.88;filter:drop-shadow(0 -16px 44px rgba(255,100,0,.09))}
.hero-smoke{position:absolute;z-index:-6;border-radius:50%;filter:blur(72px);opacity:.65;animation:smokeDrift 12s ease-in-out infinite alternate}
.smoke-a{width:760px;height:360px;left:-130px;bottom:8%;background:rgba(255,87,0,.09)}
.smoke-b{width:680px;height:420px;right:-100px;bottom:8%;background:rgba(255,131,28,.08);animation-delay:-5s}
.hero-light{position:absolute;z-index:-5;top:-40%;width:2px;height:150%;background:linear-gradient(to bottom,transparent,rgba(255,177,71,.15),transparent);filter:blur(2px);opacity:.7;transform-origin:center;animation:beamSway 9s ease-in-out infinite alternate}
.light-a{left:26%;transform:rotate(18deg)}.light-b{right:22%;transform:rotate(-18deg);animation-delay:-4s}
.hero-noise{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.055;background-image:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.05) 4px)}
.hero-embers i{position:absolute;z-index:3;left:calc((var(--i) * 17)%100 * 1%);bottom:calc(-3% + ((var(--i)*7)%19)*1%);width:2px;height:2px;border-radius:50%;background:#ff8c19;box-shadow:0 0 9px #ff6400;opacity:.12;animation:cinematicEmber calc(5s + (var(--i)%7)*.8s) linear infinite;animation-delay:calc(var(--i)*-.24s)}
.cinematic-center{position:absolute;z-index:7;left:50%;top:49%;transform:translate(-50%,-50%);width:min(940px,calc(100% - 36px));text-align:center}
.hero-overline{font-size:10px;letter-spacing:.28em;font-weight:950;color:#a29a92;text-transform:uppercase;margin-bottom:18px;text-shadow:0 2px 14px #000}
.cinematic-hero-logo-wrap{position:relative;width:min(650px,82vw);height:215px;margin:0 auto;display:block}
.cinematic-hero-logo{position:absolute;left:50%;top:50%;display:block;width:min(610px,78vw);max-height:245px;object-fit:contain;filter:drop-shadow(0 18px 48px rgba(0,0,0,.82)) drop-shadow(0 0 28px rgba(255,119,0,.20));transform:translate(-56%,-50%);animation:heroLogoFloat 5.8s ease-in-out infinite}
.cinematic-hero-logo-wrap:hover .cinematic-hero-logo{filter:drop-shadow(0 18px 48px rgba(0,0,0,.82)) drop-shadow(0 0 38px rgba(255,139,22,.30))}
.cinematic-title{margin:0;font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-size:clamp(76px,9vw,142px);line-height:.8;letter-spacing:.015em;text-transform:uppercase;color:#fff;text-shadow:0 16px 55px rgba(0,0,0,.9),0 0 45px rgba(255,119,0,.08)}
.cinematic-title span{display:block;margin-top:15px;font-size:.35em;letter-spacing:.36em;color:#ff8a12;text-shadow:0 0 24px rgba(255,105,0,.23)}
.cinematic-rule{width:min(420px,70vw);margin:28px auto 22px;display:flex;align-items:center;gap:12px;color:#e58a28}.cinematic-rule i{height:1px;flex:1;background:linear-gradient(90deg,transparent,#7c451e)}.cinematic-rule i:last-child{background:linear-gradient(90deg,#7c451e,transparent)}.cinematic-rule b{font-size:9px}
.cinematic-copy{max-width:690px;margin:0 auto;color:#a59d96;font-size:15px;line-height:1.7;text-shadow:0 2px 18px #000}
.cinematic-actions{display:flex;justify-content:center;gap:12px;margin-top:30px}.cinematic-cta{min-width:185px;padding:14px 18px;border:1px solid rgba(255,255,255,.12);background:rgba(5,6,7,.55);backdrop-filter:blur(7px);color:#e8e1da;font-size:9px;font-weight:950;letter-spacing:.13em;text-transform:uppercase;transition:.25s;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}.cinematic-cta span{margin-left:9px;color:#ff981e}.cinematic-cta:hover{border-color:#a35c22;background:rgba(19,13,9,.78);transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,0,0,.38)}.cinematic-cta.primary{background:linear-gradient(135deg,#ffbd43,#ff8308 48%,#e95c00);border-color:#ffb23e;color:#170c03;box-shadow:0 0 28px rgba(255,109,0,.20)}.cinematic-cta.primary span{color:#3b1600}
.hero-bottom-panel{position:absolute;z-index:8;left:0;right:0;bottom:0;border-top:1px solid rgba(255,140,34,.20);background:linear-gradient(180deg,rgba(4,5,6,.66),rgba(4,5,6,.96));backdrop-filter:blur(14px)}
.hero-bottom-inner{height:126px;display:grid;grid-template-columns:minmax(0,1fr) 220px 220px;align-items:center}.hero-news{padding-right:42px}.micro-label{display:block;color:#a79c92;font-size:9px;letter-spacing:.22em;font-weight:950;text-transform:uppercase}.hero-news strong{display:block;margin-top:8px;font-size:19px;line-height:1.2;color:#fff}.hero-news small{display:block;margin-top:7px;color:#8f8780;font-size:12px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-bottom-link{height:126px;display:flex;align-items:center;justify-content:center;gap:14px;border-left:1px solid rgba(255,255,255,.07);font-size:12px;letter-spacing:.14em;font-weight:950;color:#aaa19a;transition:.22s}.hero-bottom-link b{color:#ff8d14;font-size:16px}.hero-bottom-link:hover{color:#fff;background:rgba(255,123,0,.045)}

/* sections */
.portal-section{position:relative;padding:100px 0;background:#060708}.portal-section:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 0,rgba(255,111,0,.035),transparent 27%)}
.portal-intro{border-bottom:1px solid rgba(255,255,255,.06)}
.section-intro{text-align:center;max-width:760px;margin:0 auto 52px}.section-intro>span{font-size:8px;letter-spacing:.24em;color:#dd801f;font-weight:950}.section-intro h2{font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-size:48px;letter-spacing:.02em;margin:12px 0}.section-intro p{margin:0;color:#8f8780;line-height:1.7}
.portal-path{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #2d251f;border-bottom:1px solid #2d251f}.path-card{position:relative;display:grid;grid-template-columns:54px 1fr auto;gap:18px;align-items:start;padding:33px 28px;border-right:1px solid #2d251f;background:linear-gradient(180deg,#0a0b0d,#08090b);transition:.25s}.path-card:last-child{border-right:0}.path-card:hover{background:linear-gradient(180deg,#100d0a,#09090a);box-shadow:inset 0 2px #ff7a00}.path-number{font:900 12px/1 monospace;color:#6d4321;padding-top:4px}.path-card small{font-size:7px;letter-spacing:.2em;color:#84633e;font-weight:950}.path-card h3{margin:7px 0 8px;font-size:19px}.path-card p{margin:0;color:#7f7872;font-size:12px;line-height:1.6}.path-card>b{color:#e88221;font-size:20px;align-self:center}
.portal-status{background:linear-gradient(180deg,#070809,#090705);padding:82px 0}.status-stage{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center}.status-stage h2{font-size:40px;margin:8px 0 10px}.status-stage p{max-width:680px;color:#8e8781;line-height:1.7}.status-orb{width:170px;height:170px;border-radius:50%;display:grid;place-items:center;align-content:center;gap:10px;border:1px solid rgba(255,255,255,.1);background:radial-gradient(circle,rgba(255,255,255,.02),transparent 60%);position:relative}.status-orb:before,.status-orb:after{content:"";position:absolute;border-radius:50%;border:1px solid currentColor;opacity:.2}.status-orb:before{inset:16px}.status-orb:after{inset:33px;border-style:dashed;animation:spin 14s linear infinite}.status-orb span{width:12px;height:12px;border-radius:50%;background:currentColor;box-shadow:0 0 22px currentColor}.status-orb strong{font:950 11px/1 monospace;letter-spacing:.14em}.status-orb.online{color:#32e495}.status-orb.offline{color:#ff5b72}.status-orb.maintenance{color:#ffa726}

/* sub pages keep the same cinematic language */
.gaming-page-hero{background:linear-gradient(180deg,#08090b,#070708);border-bottom:1px solid rgba(255,132,25,.17)}
.gaming-page-hero .hud-grid,.gaming-page-hero .hud-scan,.page-status-mark{display:none!important}.gaming-page-hero .page-hero-inner{min-height:260px;padding-top:70px}.gaming-page-hero .page-title{font-size:clamp(42px,5vw,68px);font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;letter-spacing:.03em}.gaming-page-hero .eyebrow{color:#e18424}

/* account — retain the good card layout, now styled to match the cinematic design */
.account-layout-v2{padding-top:44px;padding-bottom:84px;gap:22px}.account-menu-v2{border-color:#30261f!important;background:linear-gradient(180deg,#0b0c0e,#07080a)!important;box-shadow:0 24px 65px rgba(0,0,0,.24)}
.account-profile{background:linear-gradient(120deg,rgba(255,119,0,.085),transparent 70%)}.account-avatar{border-color:#855022;background:#140d08;color:#ffad47}.account-menu-v2 button[data-account-tab].active{box-shadow:inset 3px 0 #ff7a00;background:linear-gradient(90deg,rgba(255,119,0,.13),transparent)}
.cinematic-account-head{padding-bottom:19px}.cinematic-account-head h2{font-size:36px}.coin-card{border-color:#392a21;background:#090a0c}.cinematic-chars{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.cinematic-char-card{min-height:210px!important;padding:26px!important;background:linear-gradient(145deg,#0c0d0f,#08090a)!important;border-color:#35291f!important;box-shadow:0 18px 45px rgba(0,0,0,.18);transition:.25s}.cinematic-char-card:hover{transform:translateY(-4px);border-color:#6f431e!important;box-shadow:0 24px 62px rgba(0,0,0,.32)}.cinematic-char-card:after{content:"";position:absolute;right:-30px;bottom:-42px;width:155px;height:155px;border-radius:50%;border:1px solid rgba(255,125,21,.07);box-shadow:0 0 42px rgba(255,106,0,.03)}.char-guild{margin-top:13px;display:flex;align-items:center;gap:9px}.char-guild span{font-size:7px;letter-spacing:.16em;color:#6f6862;font-weight:950}.char-guild strong{font-size:11px;color:#d18b42}.cinematic-char-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.cinematic-char-stats .mini-stat{padding:11px 12px;background:rgba(255,255,255,.018);border-left:1px solid #33271f}

/* ranking + shop polish */
.ranking-frame{border:1px solid #2e261f;background:#08090b;box-shadow:0 24px 68px rgba(0,0,0,.28)}.rank-table tbody tr:hover{background:rgba(255,118,0,.045)}.guild-name{color:#d69a54}.guild-name.no-guild{color:#6f6963}.level-pill{color:#ffb24b}
.shop-sidebar,.shop-banner,.shop-card{border-color:#31271f}.shop-card{background:linear-gradient(180deg,#0c0d0f,#08090a)}.shop-card:hover{border-color:#76461f;box-shadow:0 22px 60px rgba(0,0,0,.35)}

/* footer */
.site-footer{background:#040405;border-top:1px solid rgba(255,132,28,.16)}.footer-inner{min-height:90px}.footer-brand{color:#6f6862}.footer-links a{font-size:9px;letter-spacing:.08em;text-transform:uppercase}

@keyframes cinematicEmber{0%{transform:translateY(0) translateX(0) scale(.8);opacity:0}15%{opacity:.55}60%{opacity:.34}100%{transform:translateY(-520px) translateX(55px) scale(1.35);opacity:0}}
@keyframes heroLogoFloat{0%,100%{transform:translate(-56%,-50%) scale(1)}50%{transform:translate(-56%,calc(-50% - 7px)) scale(1.006)}}
@keyframes smokeDrift{to{transform:translate(55px,-18px) scale(1.1)}}
@keyframes beamSway{to{transform:rotate(24deg) translateX(50px)}}

@media(max-width:1040px){
  .cinematic-links{display:none}.top-server-status{margin-left:auto}.cinematic-hero{height:760px;min-height:760px}.cinematic-center{top:47%}.hero-bottom-inner{grid-template-columns:1fr 145px 145px}.portal-path{grid-template-columns:1fr}.path-card{border-right:0;border-bottom:1px solid #2d251f}.path-card:last-child{border-bottom:0}.status-stage{grid-template-columns:1fr}.status-orb{width:140px;height:140px}.cinematic-chars{grid-template-columns:1fr}
}
@media(max-width:680px){
  .site-header,.cinematic-nav{height:68px}.cinematic-nav{width:calc(100% - 18px);gap:10px}.cinematic-brand{width:84px;height:54px}.cinematic-brand img{width:80px}.top-server-status{display:none}.create-link{padding:9px 10px}.login-text-link,.account-text-link,.nav-logout{font-size:9px}.cinematic-hero{height:720px;min-height:720px}.cinematic-center{top:43%}.hero-overline{font-size:8px}.cinematic-hero-logo-wrap{width:min(470px,92vw);height:160px;min-height:160px}.cinematic-hero-logo{width:min(430px,88vw);max-height:180px;transform:translate(-54%,-50%)}.cinematic-copy{font-size:13px;padding:0 10px}.cinematic-actions{flex-direction:column;align-items:center}.cinematic-cta{width:min(300px,90vw)}.hero-bottom-inner{height:auto;grid-template-columns:1fr}.hero-news{padding:22px 0}.micro-label{font-size:8px}.hero-news strong{font-size:17px}.hero-news small{font-size:11px}.hero-bottom-link{height:56px;font-size:11px;border-left:0;border-top:1px solid rgba(255,255,255,.06);justify-content:flex-start}.portal-section{padding:70px 0}.section-intro h2{font-size:38px}.status-stage h2{font-size:32px}.status-orb{margin:auto}.account-layout-v2{padding-top:30px}.cinematic-char-card{min-height:190px!important}
}
/* subtle pointer parallax */
.cinematic-hero{--hx:0;--hy:0}.cinematic-sky{transform:scale(1.025) translate(calc(var(--hx)*-12px),calc(var(--hy)*-7px));transition:transform .18s linear}.smoke-a{transform:translate(calc(var(--hx)*-22px),calc(var(--hy)*-11px))}.smoke-b{transform:translate(calc(var(--hx)*18px),calc(var(--hy)*10px))}.cinematic-center{margin-left:calc(var(--hx)*5px);margin-top:calc(var(--hy)*3px);transition:margin .18s linear}

@media(max-width:760px){
  .cinematic-hero-logo{animation:none!important;transform:translate(-54%,-50%)!important}
}


.cinematic-actions .primary-btn,
.cinematic-actions .secondary-btn{
  min-width:190px;
  min-height:54px;
  padding:16px 28px!important;
  font-size:11.5px!important;
  letter-spacing:.12em!important;
}
.cinematic-actions{gap:16px!important;margin-top:28px!important}

@media(max-width:760px){
  .cinematic-actions .primary-btn,
  .cinematic-actions .secondary-btn{
    min-width:160px;
    min-height:50px;
    padding:14px 20px!important;
    font-size:10.5px!important;
  }
}

/* v9.5 unified user-supplied Xavii logo */
.cinematic-brand img{
  width:118px!important;
  max-width:118px!important;
  height:auto!important;
  max-height:66px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 4px 12px rgba(255,121,0,.18))!important;
}
.cinematic-hero-logo-wrap{
  width:min(720px,86vw)!important;
  height:240px!important;
}
.cinematic-hero-logo{
  width:min(670px,82vw)!important;
  max-height:260px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 18px 48px rgba(0,0,0,.82)) drop-shadow(0 0 32px rgba(255,119,0,.24))!important;
}
.site-footer img,
.footer-brand img{
  object-fit:contain!important;
}
@media(max-width:760px){
  .cinematic-brand img{width:100px!important;max-width:100px!important}
  .cinematic-hero-logo-wrap{width:min(500px,94vw)!important;height:180px!important}
  .cinematic-hero-logo{width:min(470px,90vw)!important;max-height:195px!important}
}