/* Devilex: shared navigation, account, and armory refinements. */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #0b0814; margin-bottom: 0; }
body::before { width: 100%; opacity: .13; filter: blur(18px); background-position: center; }
body::after { background: radial-gradient(ellipse at 50% 0,rgba(104,60,183,.22),transparent 70%); }
.container { width: calc(100% - 64px); max-width: 1264px; margin: 0 auto; padding: 0; }
.container > .row { margin: 0; }
.main-box { width: 100%; margin: 0 0 54px; border-radius: 12px; background: #100c1d; border-color: #30243f; backdrop-filter: none; }
.devilex-topbar { display: flex; min-height: 92px; gap: 28px; align-items: center; }
.devilex-wordmark { display: flex; align-items: center; gap: 12px; color: #f0e5d2; font: 700 21px Georgia,serif; letter-spacing: .12em; text-decoration: none !important; }
.devilex-wordmark span { font-size: 33px; color: #b991ec; text-shadow: 0 0 22px #9561ec; }
.devilex-topbar-caption { color: #8e809f; font-size: 10px; letter-spacing: .14em; }
.devilex-topbar-actions { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.devilex-topbar-actions > a { color: #eee3fc; font-size: 13px; font-weight: 600; text-decoration: none; }
.devilex-login-button { padding: 11px 21px; border: 1px solid #8f6ab7; border-radius: 5px; background: #241634; }
.devilex-login-button span { margin-left: 20px; color: #bd94f0; }
.devilex-login-button:hover { background: #372047; border-color: #cc9fff; }
.devilex-skip-link { position: absolute; top: -100px; left: 20px; z-index: 100; background: #fff; color: #160e22; padding: 14px; }
.devilex-skip-link:focus { top: 5px; }
.devilex-hero { min-height: 424px; padding: 56px; background: linear-gradient(90deg,#170f25 0%,rgba(23,15,37,.98) 34%,rgba(23,15,37,.2) 76%),linear-gradient(0deg,#130d23,transparent 54%),url('../images/devilex-xalatath.jpg') right 5% / 61% auto no-repeat; }
.devilex-hero::before { width: 650px; height: 650px; right: -120px; top: -160px; border-color: rgba(200,174,255,.18); background: transparent; }
.devilex-hero::after { display: none; }
.devilex-hero-copy { max-width: 620px; }
.devilex-eyebrow { color: #bea7d6; font-size: 10px; letter-spacing: .14em; }
.devilex-hero h1 { margin: 19px 0 18px; font-size: clamp(70px,7vw,104px); color: #f9eedc; text-shadow: 0 5px 40px #10051b; }
.devilex-title-dot { color: #b390e9; }
.devilex-hero-lead { font-size: 20px; font-weight: 500; }
.devilex-hero-sub { max-width: 440px; font-size: 14px; line-height: 1.75; color: #bdaecc; }
.devilex-hero-actions { margin-top: 25px; }
.devilex-button { border-radius: 5px; min-height: 44px; font-size: 13px; }
.devilex-button-primary,.btn-danger,.btn-primary { background: linear-gradient(115deg,#8253bb,#61419e); border-color: #aa79de; }
.devilex-button-secondary { background: rgba(19,13,32,.85); }
.devilex-realm-line { font-size: 11px; margin-top: 26px; }
.devilex-hero-caption { position: absolute; right: 40px; bottom: 34px; text-align: right; text-shadow: 0 2px 10px #09040f; }
.devilex-hero-caption span { display: block; font-size: 9px; color: #dac1ff; letter-spacing: .18em; }
.devilex-hero-caption strong { display: block; margin-top: 6px; font: 22px/1.3 Georgia,serif; color: #f3e8ff; }
.main-box > .devilex-content { padding: 0 32px 28px; }
nav > div a.nav-item.nav-link,nav > div a.nav-item.nav-link.active { font-size: 13px; padding: 20px 12px; font-weight: 500; }
nav > div a.nav-item.nav-link.active { background: linear-gradient(0deg,rgba(116,71,165,.18),transparent); border-bottom-color: #bd8ce9; }
.devilex-section-heading { margin: 10px 0 26px; }
.devilex-section-heading h2 { font-size: 31px; color: #f1e5d6; margin: 7px 0 9px; }
.devilex-section-heading p { font-size: 13px; color: #ab9abb; }
.devilex-kicker { color: #ac85d0; font-size: 10px; letter-spacing: .14em; }
.devilex-form-card,.devilex-info-card,.devilex-character-list,.devilex-character-profile { border-radius: 8px; background: #191124; border-color: #382a48; }
.devilex-register-grid > div { display: flex; flex-direction: column; }
.devilex-register-grid form { flex: 1; }
.devilex-register-grid .devilex-form-card { height: 100%; }
.devilex-register-grid .form-control { height: 44px; }
.devilex-login-layout,.devilex-dashboard-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
.devilex-account-form { padding: 28px; align-self: start; }
.devilex-account-form h3,.devilex-account-info h3,.devilex-inline-heading h3 { color: #f3e7d9; font: 25px Georgia,serif; margin: 0 0 12px; }
.devilex-account-form p { font-size: 13px; }
.devilex-account-form label { display: block; margin: 22px 0 8px; color: #d5c5e3; font-size: 12px; }
.devilex-account-form .form-control { height: 47px; font-size: 14px; border-radius: 5px; background: #100c19; border-color: #443155; }
.devilex-account-form > button { width: 100%; margin-top: 26px; }
.devilex-account-form small { display: block; margin-top: 7px; color: #a694b7; font-size: 11px; }
.devilex-account-form .devilex-form-bottom { margin: 24px 0 0; text-align: center; font-size: 12px; }
.devilex-password-field { position: relative; }
.devilex-password-field input { padding-right: 90px; }
.devilex-password-field button { position: absolute; right: 8px; top: 6px; border: none; background: transparent; color: #c8a9e8; font-size: 11px; height: 35px; }
.devilex-login-aside { padding: 30px 34px; border: 1px solid #392644; border-radius: 8px; background: radial-gradient(ellipse at 100% 0,rgba(103,61,169,.3),transparent 65%),#1c1229; }
.devilex-login-aside h3 { margin: 24px 0 17px; color: #ecdcc8; font: 38px/1.15 Georgia,serif; }
.devilex-login-aside p { font-size: 14px; line-height: 1.7; max-width: 350px; color: #b7a4c6; }
.devilex-login-benefits { display: grid; margin: 26px 0; gap: 14px; }
.devilex-login-benefits span { font-size: 11px; color: #a270ca; }
.devilex-login-benefits b { margin-left: 15px; font-size: 13px; font-weight: 500; color: #ded0e9; }
.devilex-login-aside > a { font-size: 13px; color: #d3b6f5; }
.devilex-login-aside > a span { margin-left: 25px; }
.devilex-notice { padding: 15px 20px; margin: 0 0 24px; border: 1px solid #84659e; border-radius: 6px; color: #eeddfb; background: #2b1b3c; font-size: 14px; }
.devilex-notice.is-error { border-color: #ac6172; background: #351923; color: #ffd5dd; }
.devilex-notice.is-success { border-color: #427b6c; background: #142e28; color: #c5f2de; }
.devilex-account-banner { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 30px; margin-bottom: 28px; background: linear-gradient(110deg,#322044,#1a122a); border: 1px solid #573664; border-radius: 8px; }
.devilex-account-banner h3 { margin: 4px 0; font: 34px Georgia,serif; color: #f7e7cf; }
.devilex-account-banner p { margin: 0; font-size: 12px; }
.devilex-inline-heading { display: flex; justify-content: space-between; gap: 15px; align-items: baseline; }
.devilex-inline-heading > span { color: #af9abd; font-size: 12px; }
.devilex-owned-grid { display: grid; gap: 12px; }
.devilex-owned-character { display: flex; align-items: center; gap: 20px; padding: 20px; background: #21152e; border: 1px solid #493253; border-radius: 8px; color: #eee0fa; text-decoration: none !important; transition: border-color .2s,background .2s; }
.devilex-owned-character:hover { border-color: #aa76d2; background: #2b1b3a; }
.devilex-owned-character > img { width: 76px; height: 76px; object-fit: cover; border: 1px solid #987050; border-radius: 50%; }
.devilex-owned-character h4 { font: 27px Georgia,serif; margin: 4px 0; color: #f3d6b7; }
.devilex-owned-character small { color: #b3a1c5; font-size: 11px; }
.devilex-owned-character > span { margin-left: auto; color: #c399eb; }
.devilex-account-info { margin: 26px 0; padding: 24px; border: 1px solid #382b45; border-radius: 8px; background: #171021; }
.devilex-account-info h3 { font-size: 22px; }
.devilex-account-info dl { margin: 0; }
.devilex-account-info dl > div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid #30243d; font-size: 12px; }
.devilex-account-info dl > div:last-child { border: 0; padding-bottom: 0; }
.devilex-account-info dt { color: #ac98bd; font-weight: 400; }
.devilex-account-info dd { margin: 0; color: #f0e1fc; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.devilex-character-layout { grid-template-columns: minmax(280px,.75fr) minmax(0,1.25fr); align-items: start; }
.devilex-character-item > img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border-color: #856389; }
.devilex-profile-heading > img { width: 70px; height: 70px; border-radius: 50%; border: 2px solid #9e7e55; object-fit: cover; }
.devilex-profile-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
.devilex-profile-stats > div { background: #140e1f; border-color: #3b2a48; border-radius: 6px; }
.devilex-profile-stats strong { color: #ecd9bd; }
.devilex-armory { border-radius: 8px; border-color: #453050; background: #140e20; }
.devilex-armory-heading { background: radial-gradient(ellipse at 90% 40%,rgba(96,52,135,.32),transparent),#251733; }
.devilex-armory-heading h3 { color: #f4dfc5; font-size: 38px; }
.devilex-paperdoll { grid-template-columns: minmax(0,1fr) minmax(190px,.9fr) minmax(0,1fr); gap: 20px; }
.devilex-paperdoll-column { display: grid; align-content: start; gap: 9px; }
.devilex-armory-slot { display: flex; align-items: center; min-height: 70px; gap: 11px; padding: 7px 10px 7px 7px; border-radius: 5px; border-width: 1px; border-color: #50335f; background: #21152d; text-decoration: none !important; transition: background .16s,border-color .16s; }
a.devilex-armory-slot:hover,a.devilex-armory-slot:focus { background: #352045; border-color: #be8bf3; }
.devilex-item-icon { flex: none; width: 52px; height: 52px; border-radius: 4px; border: 1px solid #aa66d0; object-fit: cover; box-shadow: 0 0 13px rgba(141,72,212,.15); }
.devilex-armory-slot-copy { flex: 1; min-width: 0; }
.devilex-armory-slot-copy small { color: #a394b4; font-size: 10px; }
.devilex-armory-slot-copy strong { font-size: 12px; line-height: 1.3; display: block; color: #d393ff; overflow-wrap: anywhere; }
.devilex-armory-slot.quality-1 strong { color: #ece7f3; }
.devilex-armory-slot.quality-2 strong { color: #83d778; }
.devilex-armory-slot.quality-3 strong { color: #76b8f5; }
.devilex-armory-slot.quality-5 strong { color: #f9b55f; }
.devilex-armory-ilvl { position: static; flex: none; align-self: flex-start; color: #e1c7f0; font-size: 10px; margin-top: 2px; }
.devilex-empty-slot { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border: 1px dashed #4a355b; border-radius: 4px; color: #74588d; background: #150f20; }
.devilex-armory-slot.is-empty { opacity: .65; border-color: #32233f; background: transparent; }
.devilex-armory-slot.is-empty strong { color: #a99bb7; font-weight: 400; }
.devilex-paperdoll-center { min-height: 620px; padding: 20px 12px; border: 0; background: radial-gradient(ellipse at 50% 40%,rgba(153,84,162,.22),transparent 65%); }
.devilex-hero-portrait { width: 100%; max-width: 240px; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 2px solid #997655; box-shadow: 0 0 0 8px #301f34,0 0 0 9px #55402f,0 0 80px #66438255; }
.devilex-class-badge { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #bd945d; margin: -15px 0 20px; z-index: 1; }
.devilex-paperdoll-center strong { font-size: 29px; color: #f3d7b9; }
.devilex-paperdoll-center .devilex-character-faction { margin-top: 30px; color: #a290c3; letter-spacing: .22em; font-size: 9px; }
.devilex-weapon-slots { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 22px 0 0; }
.devilex-collection-icon { object-fit: cover; border: 1px solid #715580; border-radius: 4px; flex: none; }
.devilex-talent-tree li { align-items: center; padding: 8px 0; }
.devilex-talent-tree li a { flex: 1; color: #d9c9e8; }
.devilex-achievement-row > img { width: 42px; height: 42px; }
.devilex-mount-card img { width: 36px; height: 36px; }
.devilex-talent-tree,.devilex-achievement-row,.devilex-mount-card { background: #20162c; border-color: #493150; }
footer { position: static; padding: 0 20px 30px; background: transparent; border: 0; }
:focus-visible { outline: 2px solid #d3a5ff; outline-offset: 4px; }
@media (max-width:1050px) {
  .devilex-hero { padding: 40px; }
  .devilex-hero-caption { display:none; }
  .devilex-hero-copy { max-width: 570px; }
  .devilex-paperdoll { grid-template-columns: minmax(0,1fr) 180px minmax(0,1fr); gap: 10px; }
  .devilex-item-icon,.devilex-empty-slot { width: 40px; height: 40px; }
  .devilex-armory-slot { gap: 8px; }
  .devilex-armory-slot-copy strong { font-size: 11px; }
  .devilex-profile-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:800px) {
  .container { width: calc(100% - 32px); }
  .devilex-topbar-caption { display: none; }
  .devilex-topbar { min-height: 76px; gap: 16px; }
  .devilex-topbar-actions { gap: 15px; }
  .devilex-hero { min-height: 390px; background-size: auto,auto,75% auto; padding: 35px 28px; }
  .devilex-hero-copy { max-width: 450px; }
  .devilex-hero-sub { max-width: 345px; }
  .main-box > .devilex-content { padding: 0 20px 20px; }
  nav > div a.nav-item.nav-link,nav > div a.nav-item.nav-link.active { padding: 15px 8px; font-size: 12px; }
  .devilex-character-layout { grid-template-columns: 1fr; }
  .devilex-login-layout,.devilex-dashboard-grid { grid-template-columns: 1fr; }
  .devilex-paperdoll { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .devilex-paperdoll-center { grid-row: 1; grid-column: 1/-1; min-height: 300px; padding: 30px 20px; }
  .devilex-hero-portrait { width: 150px; }
  .devilex-paperdoll-center .devilex-character-faction { margin-top: 10px; }
  .devilex-weapon-slots { grid-template-columns: 1fr; }
  .devilex-item-icon,.devilex-empty-slot { width: 48px; height: 48px; }
}
@media (max-width:540px) {
  .container { width: calc(100% - 24px); }
  .devilex-topbar { min-height: 72px; }
  .devilex-wordmark { font-size: 16px; gap: 7px; }
  .devilex-wordmark span { font-size: 26px; }
  .devilex-topbar-armory { display: none; }
  .devilex-login-button { padding: 9px 12px; }
  .devilex-login-button span { margin-left: 12px; }
  .devilex-hero { padding: 32px 22px; min-height: 450px; background: linear-gradient(90deg,#160e26eb,#160e2670),linear-gradient(0deg,#160e26 0%,#160e2640 80%),url('../images/devilex-xalatath.jpg') 68% 20%/cover; }
  .devilex-hero h1 { font-size: 72px; margin-top: 23px; }
  .devilex-eyebrow { font-size: 8px; gap: 7px; }
  .devilex-eyebrow-line { width: 12px; }
  .devilex-hero-lead { font-size: 18px; max-width: 260px; }
  .devilex-hero-sub { font-size: 13px; max-width: 285px; }
  .devilex-hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .devilex-hero-actions .devilex-button { width: 100%; min-height: 46px; }
  .devilex-realm-line { gap: 6px; font-size: 10px; }
  .main-box > .devilex-content { padding: 0 12px 15px; }
  #nav-tab { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  nav > div a.nav-item.nav-link,nav > div a.nav-item.nav-link.active { padding: 13px 5px; font-size: 11px; }
  .tab-content { padding: 24px 5px !important; }
  .devilex-section-heading h2 { font-size: 27px; }
  .devilex-section-heading p { font-size: 12px; line-height: 1.6; }
  .devilex-account-form,.devilex-login-aside { padding: 23px 20px; }
  .devilex-login-aside h3 { font-size: 32px; }
  .devilex-account-banner { padding: 20px; flex-wrap: wrap; }
  .devilex-account-banner .devilex-button { min-width: 140px; }
  .devilex-owned-character { gap: 15px; padding: 16px; }
  .devilex-owned-character > img { width: 58px; height: 58px; }
  .devilex-owned-character h4 { font-size: 25px; }
  .devilex-account-info { padding: 20px; }
  .devilex-profile-heading h3 { font-size: 29px; }
  .devilex-armory-panel { padding: 20px 12px; }
  .devilex-paperdoll { grid-template-columns: 1fr; }
  .devilex-paperdoll-center { grid-column: auto; min-height: 280px; }
  .devilex-armory-slot { min-height: 70px; }
  .devilex-armory-slot-copy strong { font-size: 12px; }
  .devilex-item-icon,.devilex-empty-slot { width: 52px; height: 52px; }
  .devilex-armory-tabs button { font-size: 10px; }
  .devilex-weapon-slots { margin-top: 12px; }
}
.devilex-paperdoll-center { position: relative; min-height: 620px; padding: 0; overflow: hidden; }
.devilex-model-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.devilex-model-fallback .devilex-hero-portrait { width: 150px; height: 150px; }
.devilex-paperdoll-center.is-ready .devilex-model-fallback { display: none; }
#devilex-model { width: 100%; height: 550px; }
#devilex-model canvas { max-width: 100%; touch-action: pan-y; }
.devilex-model-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; padding: 8px 0; position: relative; z-index: 2; }
.devilex-model-controls[hidden] { display: none; }
.devilex-model-controls button { background: #291837; border: 1px solid #604271; border-radius: 4px; padding: 6px 9px; color: #d8c2ec; font-size: 10px; cursor: pointer; }
#devilex-model-status { color: #ad99bf; font-size: 10px; line-height: 1.5; text-align: center; position: relative; width: 100%; padding: 0 6px; margin: 5px 0 0; }
@media(max-width:800px) { .devilex-paperdoll-center { min-height: 510px; } #devilex-model { width: 100%; max-width: 360px; height: 445px; } }