/* MU Beyond · Infernal web theme v4 (2026-11-10, local, NOT deployed): 1:1 look with the approved launcher 1.3.23.47
   (ui/home.css v4 block, infernal-premium2.css, infernal-v4.css). Same tokens, same 3D pills, same btn-red primaries,
   same hover light reflection + rotating gradient border, same bone frame glow. Visual only. Loaded last. */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{--bord:#8f0f24;--bord2:#c4142e;--blood:#e0142a;--ember:#ff2a3a;--line:#a3182c;--gold:#e0b45c;--gold2:#ffe39a;--bone:#fff1de}

/* ---------- page background: same radial as the launcher dashboard, under the painted world ---------- */
html,body.inf{background:radial-gradient(1200px 700px at 62% 30%,#6e0a18 0,#2e050c 45%,#060203 82%) fixed!important}
.inf-world-art{opacity:.55}
.inf-world-vignette{background:radial-gradient(140% 110% at 50% 45%,transparent 60%,#000a 100%)!important}

/* ---------- panels / cards: launcher v4 surface ---------- */
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,body.inf .footer,body.inf .topbar{
 border-color:#b3182e!important;
 background-image:linear-gradient(180deg,#ffffff0d,transparent 28%),linear-gradient(160deg,#3a0812e0,#0d0305ee),url(../img/infernal/p2/panel-stone.webp)!important;
 background-size:auto,auto,192px 192px!important;background-repeat:no-repeat,no-repeat,repeat!important}
.inf-hero{border-color:#c4142e!important}
/* tags / pills (UPDATE/EVENT style): cinema chapter chips, live badges, preview note excluded */
body.inf .cinema-chapters span,body.inf .victory-live,body.inf .beta-seal-eyebrow{background:#8f0f24!important;border:1px solid #e0142a!important;color:#ffe39a!important;border-radius:2px!important;padding:4px 7px!important;font:700 9.5px/1 var(--sans)!important;letter-spacing:.18em!important}
body.inf .card-head span::before{color:#ff2a3a!important;-webkit-text-fill-color:#ff2a3a!important}

/* ---------- moving light reflection + rotating gradient border: on hover only, 3.2 s (launcher .fx-light/.fx-border) ---------- */
body.inf .inf-ring{opacity:0!important;transition:opacity .35s;animation:infAng 3.2s linear infinite!important;
 background:conic-gradient(from var(--ang,0deg),transparent 0 62%,#ff2a3a 75%,#ffe39a 82%,transparent 92%)!important}
@keyframes infAng{to{--ang:360deg}}
body.inf .inf-grip:hover>.inf-ring,body.inf .inf-tilt-on:hover>.inf-ring,body.inf .pve-launch-note:hover>.inf-ring{opacity:1!important}
body.inf .inf-sheen{background:radial-gradient(240px 160px at var(--lx,50%) var(--ly,50%),#ffffff1c,#ff6a4a12 35%,transparent 70%)!important}
.inf-rim{opacity:.55}

/* ---------- primary buttons = launcher .btn-red (CSS bevel, 4px base, crimson glow) ---------- */
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,body.inf .play-button:not(.play-button-ghost):not(.play-button-secondary),body.inf #beyond-discord-invite .btn{
 background:linear-gradient(#ff3348,#c4142e 45%,#7a0a18)!important;border:1px solid #ff6b7a!important;border-radius:3px!important;
 box-shadow:inset 0 1px #ffffff55,0 4px 0 #3a0508,0 0 18px #ff2a3a66!important;color:#fff4e6!important;
 font:700 11.5px/1 var(--sans)!important;letter-spacing:.16em!important;text-shadow:0 1px 0 #5a0610!important;animation:none!important;filter:none!important;padding:12px 22px!important}
body.inf .auth-nav .register-link::before,body.inf .cms-content .btn-primary::before,body.inf .cms-content button[type=submit]::before,body.inf .guide-link::before,body.inf .pay-button::before,body.inf .play-button:not(.play-button-ghost):not(.play-button-secondary)::before,body.inf #beyond-discord-invite .btn::before{display:none!important}
body.inf .auth-nav .register-link:hover,body.inf .cms-content .btn-primary:hover,body.inf .cms-content button[type=submit]:hover,body.inf .guide-link:hover,body.inf .pay-button:hover,body.inf .play-button:not(.play-button-ghost):not(.play-button-secondary):hover,body.inf #beyond-discord-invite .btn:hover{
 filter:brightness(1.12)!important;box-shadow:inset 0 1px #ffffff66,0 4px 0 #3a0508,0 0 28px #ff2a3aaa!important;transform:translateY(-1px)!important}
body.inf .auth-nav .register-link:active,body.inf .cms-content .btn-primary:active,body.inf .cms-content button[type=submit]:active,body.inf .guide-link:active,body.inf .pay-button:active,body.inf .play-button:active,body.inf #beyond-discord-invite .btn:active{
 transform:translateY(3px)!important;box-shadow:inset 0 2px 4px #0008,0 1px 0 #3a0508,0 0 12px #ff2a3a66!important}

/* ---------- 3D forged pills (launcher .rb-filters / top tabs): same filter recipe ---------- */
body.inf .topbar .nav a::before,body.inf .auth-nav a:not(.register-link)::before,body.inf .card-head a::before,body.inf .inner-heading>a::before,body.inf .beta-expedition-link::before,body.inf .footer a[href*="discord"]::before,body.inf .play-button-ghost::before,body.inf .play-button-secondary::before,body.inf .cms-content .btn:not(.btn-primary)::before{
 filter:brightness(.72) sepia(.6) hue-rotate(-32deg) saturate(2.4)!important}
body.inf .topbar .nav a:hover::before,body.inf .auth-nav a:not(.register-link):hover::before,body.inf .card-head a:hover::before,body.inf .inner-heading>a:hover::before,body.inf .beta-expedition-link:hover::before,body.inf .footer a[href*="discord"]:hover::before,body.inf .play-button-ghost:hover::before,body.inf .play-button-secondary:hover::before,body.inf .cms-content .btn:not(.btn-primary):hover::before{
 filter:brightness(1) sepia(.6) hue-rotate(-34deg) saturate(2.8)!important}
body.inf .topbar .nav a.active::before{filter:brightness(1.05) sepia(1) hue-rotate(-50deg) saturate(6) contrast(1.1)!important}
body.inf .topbar .nav a.active::after{transform:scaleX(1)!important;left:18%!important;right:18%!important;bottom:3px!important;height:2px!important;background:linear-gradient(90deg,transparent,#ff3a2e,transparent)!important;box-shadow:0 0 6px #ff3a2e}
body.inf .topbar .nav a:hover{filter:drop-shadow(0 0 6px #ff2a3a88)}
body.inf .topbar .nav a:active,body.inf .auth-nav a:active,body.inf .card-head a:active,body.inf .inner-heading>a:active{transform:translateY(2px)!important}
body.inf .topbar .nav a{font-family:var(--serif)!important;font-weight:700!important;color:#f1dcc3!important;text-shadow:0 1px 0 #000!important}
/* system tabs = small 3D pills too */
body.inf .realm-ranking-tabs a{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;isolation:isolate;color:#f1dcc3!important;text-shadow:0 1px 0 #000;padding:9px 16px!important}
body.inf .realm-ranking-tabs a::before{content:"";position:absolute;inset:0;z-index:-1;border-style:solid;border-width:0;border-image:url(../img/infernal/p2/btn-plate.webp) 130 250 fill/8px 16px/0 1px stretch;filter:brightness(.72) sepia(.6) hue-rotate(-32deg) saturate(2.4);transition:filter .2s}
body.inf .realm-ranking-tabs a:hover::before{filter:brightness(1) sepia(.6) hue-rotate(-34deg) saturate(2.8)}
body.inf .realm-ranking-tabs a[aria-current]::before,body.inf .realm-ranking-tabs a.system-menu-all::before{filter:brightness(1.05) sepia(1) hue-rotate(-50deg) saturate(6) contrast(1.1)}
body.inf .realm-ranking-tabs a:hover,body.inf .realm-ranking-tabs a[aria-current]{background:none!important;box-shadow:none!important;color:#fff!important;filter:drop-shadow(0 0 6px #ff2a3a88)}
body.inf .realm-ranking-tabs a:active{transform:translateY(2px)}

/* ---------- bone frame: crimson inner glow + slow old-gold sheen on the gold/bone pixels ---------- */
@media (min-width:1100px){
 .inf-bone-frame::before{content:"";position:absolute;inset:calc(var(--T) - 4px);border-radius:6px;pointer-events:none;
  box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #e0b45c40,inset 0 0 26px 8px #000e,inset 0 0 70px 14px #8f0f2499}
 .inf-bone-frame .ed>b{display:none}
 .inf-bone-frame .ed.t::before,.inf-bone-frame .ed.b::before,.inf-bone-frame .ed.l::before,.inf-bone-frame .ed.r::before{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(105deg,transparent 40%,#ffe39acc 50%,transparent 60%) 0 0/300% 100% no-repeat;animation:infGoldSheen 9s ease-in-out infinite}
 .inf-bone-frame .ed.l::before,.inf-bone-frame .ed.r::before{background:linear-gradient(195deg,transparent 40%,#ffe39acc 50%,transparent 60%) 0 0/100% 300% no-repeat;animation-name:infGoldSheenV}
 .inf-bone-frame .ed.b::before{animation-delay:-4.5s}.inf-bone-frame .ed.r::before{animation-delay:-2s}.inf-bone-frame .ed.l::before{animation-delay:-6.5s}
}
@keyframes infGoldSheen{0%,15%{background-position:100% 0}85%,100%{background-position:0 0}}
@keyframes infGoldSheenV{0%,15%{background-position:0 100%}85%,100%{background-position:0 0}}

/* ---------- hero: launcher hero-haze layer + hero-heat shader canvas ---------- */
.inf-hero-heat{inset:-10% 0 0 0!important;z-index:2!important;opacity:.45;mix-blend-mode:screen;
 background:radial-gradient(40% 18% at 30% 100%,#ff5a2a55,transparent 70%),radial-gradient(35% 16% at 70% 100%,#ff8a1f44,transparent 70%),repeating-linear-gradient(180deg,transparent 0 9px,#ff6a3a0d 9px 12px)!important;
 filter:blur(6px);animation:infHaze 4.8s ease-in-out infinite alternate}
@keyframes infHaze{0%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-2%) scaleY(1.03) skewX(.6deg)}100%{transform:translateY(-4%) scaleY(1.01) skewX(-.6deg)}}

/* ---------- section header diamonds + gold gradient titles (launcher .sec-h h2) ---------- */
body.inf .card-head span,body.inf .guides-strip h2,body.inf .cms-content .page-title,body.inf .cms-content .page-title span{background:linear-gradient(180deg,#fff1cc,#e0b45c 60%,#7a5520)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;letter-spacing:.2em}

@media (prefers-reduced-motion:reduce){
 .inf-ring{animation:none!important}.inf-sheen{display:none}
 .inf-hero-heat,.inf-bone-frame .ed::before{animation:none!important}
}
@media (min-width:721px){.inf-knight{height:102%!important;right:-2%!important;bottom:-2%!important}.inf-hero-logo{width:min(560px,44%)!important}}
@media (min-width:721px){.inf-knight{height:84%!important;right:-3%!important;bottom:0!important}}