/* MU Beyond · Infernal web theme v3 (2026-11-10, local, NOT deployed): aligned with the launcher's final look.
   Vibrant crimson/bordeaux tokens (base #8f0f24, highlight #c4142e, accent #e0142a, glowing edge #ff2a3a), deep blacks,
   gold unchanged. Animated gradient borders via @property, tilt light reflection, View Transitions, top-nav forged plates.
   Visual only. Loaded after infernal-v2.css. */
@property --inf-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --inf-glow{syntax:"<number>";inherits:false;initial-value:0}
:root{
 --void:#050102;--ash:#0d0305;--coal:#16040a;
 --bord:#8f0f24;--bord2:#c4142e;--blood:#e0142a;--edge:#ff2a3a;--ember:#ff3a2e;--flame:#ff8a1f;
 --gold:#e0b45c;--gold2:#ffe39a;--bone:#fff1de;--mute:#d6b8ac;
 --line:#7d1224;--line2:#c4142e;
 --crimson-grad:linear-gradient(180deg,#c4142e 0%,#8f0f24 55%,#3d0610 100%);
 --crimson-glow:0 0 14px #ff2a3a88,0 0 34px #e0142a44;
 --panel-c:linear-gradient(180deg,#ffffff0c,transparent 26%),linear-gradient(160deg,#3a0712e6,#0e0205f2);
}
html,body.inf{background:var(--void)}

/* ---------- panels, cards, pills: richer crimson + animated gradient border (@property) ---------- */
body.inf .stat,body.inf .content-card,body.inf .guides-strip,body.inf .cms-content,body.inf .victory-card,body.inf .realm-cinema,body.inf .pve-launch-note,body.inf .systems-strip,body.inf .system-card,body.inf .sys-card,body.inf .pay-package,body.inf .cms-content .panel{
 background-image:var(--panel-c),var(--stone)!important;background-size:auto,auto,220px 220px!important;background-repeat:no-repeat,no-repeat,repeat!important;
 border-color:var(--line)!important;
 box-shadow:inset 0 1px 0 #ffffff1f,inset 0 -2px 0 #000,inset 0 0 0 1px #e0b45c24,inset 0 0 40px #e0142a1c,0 18px 40px #000d,0 0 22px #8f0f2433!important}
/* moving gradient border ring (masked so only the 1px edge shows) */
body.inf .content-card>.inf-ring,body.inf .victory-card>.inf-ring,body.inf .stat>.inf-ring,body.inf .system-card>.inf-ring,body.inf .pay-package>.inf-ring,body.inf .cms-content>.inf-ring,body.inf .pve-launch-note>.inf-ring{
 position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:8;
 background:conic-gradient(from var(--inf-angle),transparent 0 62%,#ff2a3a 72%,#ffe39a 76%,#c4142e 82%,transparent 92%);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
 animation:infRing 7s linear infinite;opacity:.75}
@keyframes infRing{to{--inf-angle:360deg}}
/* tilt light reflection (pointer position set by infernal-v3.js) */
.inf-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:7;opacity:0;transition:opacity .3s;
 background:radial-gradient(420px 260px at var(--lx,50%) var(--ly,0%),#ffffff1f,#ff2a3a14 35%,transparent 65%);mix-blend-mode:screen}
.inf-grip:hover>.inf-sheen,.inf-tilt-on:hover>.inf-sheen{opacity:1}
body.inf .content-card:hover,body.inf .stat:hover,body.inf .victory-card:hover,body.inf .system-card:hover,body.inf .pay-package:hover{
 border-color:var(--edge)!important;box-shadow:inset 0 1px 0 #ffffff2a,inset 0 0 0 1px #ffe39a44,inset 0 0 44px #e0142a2e,0 24px 48px #000d,var(--crimson-glow)!important}
body.inf .list-row{background:linear-gradient(90deg,#24060c,#140307)!important;border-color:#5a0c18!important}
body.inf .list-row:hover{background:linear-gradient(90deg,#8f0f24,#2a050b)!important;border-color:var(--edge)!important;box-shadow:0 0 16px #ff2a3a55!important}
body.inf .realm-ranking-tabs a,body.inf .cinema-chapters span,body.inf .beta-countdown-unit{border-color:var(--line)!important}
body.inf .realm-ranking-tabs a:hover,body.inf .realm-ranking-tabs a[aria-current]{background:var(--crimson-grad)!important;border-color:var(--gold)!important;box-shadow:inset 0 1px 0 #ffffff55,var(--crimson-glow)!important}
body.inf .beta-frost-seal{background-image:radial-gradient(120% 140% at 30% 0,#c4142ecc,#3d0610f0 70%),var(--stone)!important;border-color:var(--gold)!important}
body.inf .topbar{background:linear-gradient(#24060cf5,#0d0205f5)!important;border-color:#9a1428!important;box-shadow:inset 0 0 0 1px #000,inset 0 1px 0 #ff2a3a44,inset 0 -2px 0 #e0b45c44,0 12px 30px #000d,0 0 34px #e0142a2e!important}
body.inf .footer{border-color:var(--line)!important;background:linear-gradient(#1a0409f0,#070102f5)!important}
body.inf .inner-heading>a,body.inf .card-head a{color:var(--gold2)!important}
body.inf .cms-content .page-title{border-bottom-color:var(--line)!important}
body.inf .cms-content input:not([type=checkbox]):not([type=radio]):not([type=submit]),body.inf .cms-content select,body.inf .cms-content textarea,body.inf .form-control{border-color:#7d1224!important;background:#0a0103!important}
body.inf .cms-content .table>thead>tr>th,body.inf .realm-ranking-table th{background:linear-gradient(#3d0610,#1a0308)!important;border-bottom-color:var(--bord2)!important}
body.inf .cms-content .table>tbody>tr>td,body.inf .realm-ranking-table td{border-color:#4a0912!important}
body.inf .realm-ranking-table tr:hover{background:#e0142a1a!important}
body.inf .stat-icon,body.inf .rank-place,body.inf .victory-event-icon{box-shadow:0 0 0 3px #16040a,0 0 22px #ff2a3a99!important}

/* ---------- TOP NAVIGATION: 3D forged plates (same treatment as the launcher top row) ---------- */
body.inf .topbar .nav{gap:6px!important}
body.inf .topbar .nav a{position:relative!important;isolation:isolate;padding:11px 18px!important;min-height:38px;display:inline-flex;align-items:center;color:#f1dcc3!important;text-shadow:0 1px 0 #000,0 0 6px #000!important}
body.inf .topbar .nav a::before{content:""!important;position:absolute!important;inset:0!important;z-index:-1;display:block!important;transform:none!important;background:none!important;
 border-style:solid;border-width:8px 18px;border-image:url(../img/infernal/p2/btn-plate.webp) 130 250 fill/8px 18px/0 stretch;
 filter:brightness(.62) sepia(.5) hue-rotate(-28deg) saturate(1.7);transition:filter .18s}
body.inf .topbar .nav a::after{left:18px!important;right:18px!important;bottom:5px!important;background:linear-gradient(90deg,transparent,var(--edge),transparent)!important}
body.inf .topbar .nav a:hover::before{filter:brightness(.95) sepia(.55) hue-rotate(-28deg) saturate(2)}
body.inf .topbar .nav a.active::before{filter:brightness(.9) sepia(1) hue-rotate(-48deg) saturate(5.5) contrast(1.1)}
body.inf .topbar .nav a.active{color:#fff!important;text-shadow:0 0 8px #ff3d2e,0 1px 0 #000!important}
body.inf .topbar .nav a:hover{transform:translateY(-1px)}
body.inf .topbar .nav a:active{transform:translateY(1px) scale(.98)}
@media (min-width:1100px){body.inf .topbar .nav a{padding:10px 14px!important;font-size:10.5px!important;letter-spacing:.08em!important}}
@media (min-width:1100px) and (max-width:1320px){body.inf .topbar .nav a{padding:9px 10px!important;font-size:9.5px!important;letter-spacing:.04em!important}body.inf .topbar .nav{gap:2px!important}}
@media (max-width:980px){body.inf .topbar .nav{gap:4px!important;padding-bottom:6px}body.inf .topbar .nav a{padding:10px 14px!important;border-bottom:0!important}}

/* ---------- primary buttons: richer crimson molten glow, magnetic offset from JS ---------- */
body.inf .auth-nav .register-link,body.inf .cms-content .btn-primary,body.inf .cms-content button[type=submit],body.inf .guide-link,body.inf .pay-button{translate:var(--mx,0) var(--my,0);transition:translate .25s cubic-bezier(.2,.8,.2,1),transform .15s,filter .2s!important}
@keyframes infMolten{0%,100%{filter:drop-shadow(0 0 4px #ff2a3a77)}50%{filter:drop-shadow(0 0 16px #ff2a3acc) drop-shadow(0 0 30px #e0142a55)}}

/* ---------- hero: ember/heat shader canvas (three.js, infernal-portal.js) ---------- */
.inf-hero .ember3d{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:screen}

/* ---------- View Transitions (cross-document, where supported) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:infVtOut .28s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:infVtIn .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes infVtOut{to{opacity:0;filter:blur(4px) brightness(.6);transform:scale(.99)}}
@keyframes infVtIn{from{opacity:0;filter:blur(6px) brightness(1.4) saturate(1.4);transform:scale(1.01)}}
body.inf .topbar{view-transition-name:inf-topbar}
::view-transition-group(inf-topbar){animation-duration:.3s}

@media (prefers-reduced-motion:reduce){
 .inf-ring{animation:none!important;opacity:.5}
 ::view-transition-old(root),::view-transition-new(root){animation:none}
 .inf-hero .ember3d{display:none}
 body.inf .auth-nav .register-link,body.inf .cms-content .btn-primary,body.inf .guide-link{translate:none!important}
}

/* Stable registration target: no magnetic pointer displacement. */
body.inf .auth-nav .register-link{translate:none!important;transform:none!important}