/* Devilex / Void & Gold — the common visual layer for every site section. */
:root {
  --gold: #d8b579;
  --gold-bright: #f3dbac;
  --bronze: #6c513c;
  --gold-line: rgba(190,148,86,.32);
  --amethyst: #b287e9;
  --surface: #171120;
  --text: #e7ddec;
  --muted: #b5a8c0;
}
* { font-family: inherit; }
body { font-family: "Segoe UI",Arial,sans-serif; background: #090710; color: var(--text); }
body::before { opacity: .09; filter: blur(24px); }
body::after { background: radial-gradient(ellipse at 50% 5%,#51357833,transparent 48%),linear-gradient(90deg,#090710 0%,transparent 15%,transparent 85%,#090710); }
.container { max-width: 1320px; width: calc(100% - 72px); }
.devilex-topbar { min-height: 100px; border-bottom: 1px solid #b89a681a; gap: 32px; }
.devilex-wordmark { display: inline-flex; width: 198px; flex: none; line-height: 1; }
.devilex-wordmark img { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 12px #7652af33); transition: filter .2s ease; }
.devilex-wordmark:hover img { filter: drop-shadow(0 0 14px #b17be766); }
.devilex-topbar-caption { color: #9f8d77; font-size: 9px; letter-spacing: .2em; }
.devilex-topbar-actions { gap: 28px; }
.devilex-topbar-actions > a { color: #dbc9ac; font-size: 12px; letter-spacing: .03em; }
.devilex-login-button { border: 1px solid #826343; border-radius: 3px; background: linear-gradient(180deg,#372735,#201726); box-shadow: inset 0 0 0 2px #120e1780,inset 0 1px 0 #d8b57933; padding: 12px 22px; }
.devilex-login-button:hover { background: linear-gradient(180deg,#513643,#2a1c33); border-color: var(--gold); color: #fff1d3; }
.devilex-login-button span { color: var(--gold); }
.main-box { position: relative; border-color: #72533e; border-radius: 5px; background: #100c18; box-shadow: 0 25px 80px #0009,0 0 0 1px #0a0710,inset 0 0 0 3px #ba8a4220; }
.devilex-hero { min-height: 540px; padding: 44px 52px 40px; border-bottom: 1px solid #997548; background: linear-gradient(90deg,#100b1d 0%,rgba(16,11,29,.98) 30%,rgba(16,11,29,.8) 45%,rgba(16,11,29,.08) 72%),linear-gradient(0deg,#100b1d 0%,transparent 46%),url('../images/devilex-xalatath.jpg') right 0 / 63% auto no-repeat; }
.devilex-hero::before { top: -150px; right: -180px; width: 790px; height: 790px; border-color: #bb91e32b; box-shadow: 0 0 0 24px #976bb009,0 0 0 25px #ad79d318,0 0 0 71px #956bba08; }
.devilex-hero::after { content: ""; display: block; position: absolute; inset: 9px; width: auto; height: auto; border: 1px solid #dcaa691e; font-size: 0; background: linear-gradient(#d5ae76,#d5ae76) left top/44px 1px no-repeat,linear-gradient(#d5ae76,#d5ae76) left top/1px 44px no-repeat,linear-gradient(#d5ae76,#d5ae76) right bottom/44px 1px no-repeat,linear-gradient(#d5ae76,#d5ae76) right bottom/1px 44px no-repeat; opacity: .5; pointer-events: none; }
.devilex-hero-copy { max-width: 590px; }
.devilex-eyebrow { padding-left: 6px; gap: 12px; font-size: 9px; color: #bfadce; letter-spacing: .16em; }
.devilex-sigil { font-size: 17px; color: #d1a2f6; }
.devilex-eyebrow-line { background: #c9a26988; }
.devilex-hero h1.devilex-hero-logo { margin: 13px 0 0; width: min(100%,580px); line-height: 0; font-size: inherit; filter: drop-shadow(0 7px 16px #0009); }
.devilex-hero-logo img { width: 100%; height: auto; display: block; }
.devilex-expansion { display: flex; align-items: center; justify-content: center; gap: 15px; width: min(100%,580px); margin: 0 0 26px; padding: 0 20px; color: #c2a375; letter-spacing: .43em; font: 10px/1.5 Georgia,serif; letter-spacing: .43em; }
.devilex-expansion span { height: 1px; flex: 1; max-width: 106px; background: linear-gradient(90deg,transparent,#a28151aa); }
.devilex-expansion span:last-child { transform: rotate(180deg); }
.devilex-hero-lead { margin: 0 0 12px; color: #f2ddbd; font: 30px/1.25 Georgia,"Times New Roman",serif; font-weight: 400; text-shadow: 0 3px 14px #000b; }
.devilex-hero-sub { max-width: 440px; color: #baadc9; font-size: 13px; line-height: 1.8; }
.devilex-hero-actions { margin-top: 26px; gap: 13px; }
.devilex-button { position: relative; border-radius: 3px; padding: 13px 19px; min-height: 48px; font-size: 12px; font-weight: 600; letter-spacing: .025em; transition: border-color .2s,background .2s,box-shadow .2s,transform .2s; }
.devilex-button-primary,.btn-danger,.btn-primary { border: 1px solid #bf965a; color: #ffebc4; background: linear-gradient(180deg,#764a91 0%,#4c2e67 47%,#342247 100%); box-shadow: inset 0 0 0 2px #0c091b77,inset 0 1px 0 #e0bb8c70,0 5px 24px #7940aa25; }
.devilex-button-primary:hover,.btn-danger:hover,.btn-primary:hover { background: linear-gradient(180deg,#9862b7,#633d80 55%,#472d5e); border-color: #f1cc8f; color: #fff2d7; box-shadow: inset 0 0 0 2px #0c091b55,0 0 20px #ac74d233; }
.devilex-button-secondary { color: #d9c5a6; border-color: #755e49; background: linear-gradient(180deg,#241a2d,#120e1b); box-shadow: inset 0 0 0 2px #04030855; }
.devilex-button-secondary:hover { background: #33233d; color: #ffebc4; border-color: #d0ab74; }
.devilex-button span { color: #e1be85; }
.devilex-realm-line { font-size: 10px; gap: 10px; margin-top: 25px; color: #9f93ae; }
.devilex-realm-line strong { color: #dbbc8b; font-weight: 500; }
.devilex-hero-caption { bottom: 41px; right: 38px; }
.devilex-hero-caption span { color: #c3a3e3; font-size: 8px; letter-spacing: .23em; }
.devilex-hero-caption strong { margin-top: 9px; font-size: 23px; color: #ecdbc9; }
.devilex-caption-ornament { display: block; width: 112px; height: 14px; margin: 12px 0 0 auto; background: linear-gradient(90deg,transparent,#c9a47188,transparent) center/100% 1px no-repeat; position: relative; }
.devilex-caption-ornament::after { content: ""; display: block; position: absolute; right: 51px; top: 3px; width: 8px; height: 8px; border: 1px solid #c9a471; background: #352444; transform: rotate(45deg); }
.main-box > .devilex-content { padding: 0 34px 30px; background: radial-gradient(ellipse at 100% 100%,#3a244017,transparent 60%); }
nav > .nav.nav-tabs { position: relative; border-bottom: 1px solid var(--gold-line); padding: 0 12px; }
nav > div a.nav-item.nav-link,nav > div a.nav-item.nav-link.active { position: relative; min-height: 66px; display: flex; align-items: center; justify-content: center; border-radius: 0; padding: 22px 10px; color: #b5a3c4; font-size: 12px; letter-spacing: .015em; }
nav > div a.nav-item.nav-link.active { color: #f2d49f; border-bottom-color: #d5ad71; background: linear-gradient(0deg,#92613822,transparent 90%); }
nav > div a.nav-item.nav-link.active::after { content: ""; position: absolute; width: 7px; height: 7px; bottom: -4px; left: calc(50% - 4px); transform: rotate(45deg); background: #e0ba7e; box-shadow: 0 0 10px #daa55066; }
nav > div a.nav-item.nav-link:hover { color: #f2d49f; background: #b0895420; border-bottom-color: #b08a54; }
.tab-content { padding-top: 28px !important; }
.devilex-section-heading { position: relative; margin: 9px 0 27px; padding-bottom: 20px; border-bottom: 1px solid #b58d531f; }
.devilex-section-heading::after { content: ""; width: 80px; height: 1px; position: absolute; bottom: -1px; left: 0; background: linear-gradient(90deg,#c7a36b,transparent); }
.devilex-kicker { color: #a98ac7; font-size: 9px; letter-spacing: .18em; }
.devilex-section-heading h2 { color: #ebd3ac; font: 34px/1.2 Georgia,"Times New Roman",serif; margin: 9px 0 12px; text-shadow: 0 2px 12px #0008; }
.devilex-section-heading p { font-size: 13px; line-height: 1.75; color: #ab9dbb; margin-bottom: 0; }
.devilex-section-heading p a { color: #dbbd88; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #87653f; }
.devilex-form-card,.devilex-info-card,.devilex-login-aside,.devilex-character-list,.devilex-character-profile,.devilex-account-info,.devilex-account-banner,.devilex-owned-character,.devilex-easy-install,.devilex-help-card {
  border-radius: 5px; border-color: #75553e80; background: radial-gradient(ellipse at 100% 0,#63397516,transparent 65%),linear-gradient(145deg,#1c1426,#15101e); box-shadow: inset 0 0 0 3px #d5a56a06,0 7px 20px #0002;
}
.devilex-form-card { position: relative; }
.devilex-form-card::before { content: ""; display: block; position: absolute; top: -1px; left: 22px; right: 22px; height: 1px; background: linear-gradient(90deg,transparent,#d6a96866,transparent); pointer-events: none; }
.form-control,.modal .form-control,.devilex-account-form .form-control { border-color: #6d4e4866; background: #0b0814; border-radius: 3px !important; color: #eee0f9; box-shadow: inset 0 2px 9px #0005; }
.form-control:focus,.devilex-account-form .form-control:focus { background: #110c1d; border-color: #b58bd8; box-shadow: 0 0 0 2px #8355aa25; }
.form-control::placeholder { color: #897b9b; }
.input-group span,.devilex-account-form label { color: #c7b6ce; font-size: 12px; }
.devilex-start h3,.devilex-account-form h3,.devilex-inline-heading h3,.devilex-account-info h3,.devilex-login-aside h3,.devilex-easy-install h3 { color: #ead1aa; }
.devilex-start-step > span { border-color: #9d7b4766; border-radius: 50%; color: #e0b774; background: radial-gradient(circle,#49344755,#15101e); font: 14px Georgia,serif; }
.devilex-start-step strong { font-weight: 500; color: #e3d6e9; }
.devilex-start-step p { color: #afa1bb; line-height: 1.65; }
.devilex-inline-link,.devilex-login-aside > a { color: #d7b47a; border-color: #b5885266; }
.devilex-profile-heading h3,.devilex-armory-heading h3,.devilex-owned-character h4 { color: #f0cfa0; }
.devilex-character-item { border-radius: 4px; border-color: #7f5a7444; }
.devilex-character-item.is-selected { background: linear-gradient(105deg,#41304e,#251932); border-color: #a98051aa; box-shadow: inset 3px 0 #c4a06a; }
.devilex-character-level { border-color: #a1804955; background: #3e2c2522; color: #eccca1; }
.devilex-profile-stats > div { border-color: #b0804930; border-radius: 4px; background: #0e0a17; }
.devilex-armory { border-color: #82604299; border-radius: 5px; }
.devilex-armory-heading { background: radial-gradient(ellipse at 70% 10%,#8150ad30,transparent 60%),linear-gradient(110deg,#302036,#201329); border-bottom: 1px solid #b58a4d44; }
.devilex-armory-tabs { border-bottom-color: #b084483b; }
.devilex-armory-tabs button[aria-selected="true"] { color: #edcb93; border-bottom-color: #d1a366; background: linear-gradient(0deg,#855b3030,transparent); }
.devilex-armory-panel-title h4 { color: #ebd0a7; }
.devilex-armory-slot { border-radius: 4px; background: linear-gradient(100deg,#291a34,#1c1427); }
.devilex-collection-icon,.devilex-item-icon { box-shadow: 0 2px 7px #0007; }
.devilex-status-card { border-color: #b3875055; background: radial-gradient(ellipse at right,#5b327233,transparent 60%),linear-gradient(110deg,#251b2f,#16101f); }
.devilex-help-card,.devilex-download,.devilex-manual { border-color: #795b3b66; border-radius: 4px; }
.devilex-download { background: linear-gradient(135deg,#352441,#21172c); }
.devilex-manual summary { color: #dbbd8b; }
.devilex-account-banner h3 { color: #f0cc94; }
.devilex-owned-character:hover { border-color: #c39660; background: #31213c; }
.modal-content { background: #1a1225; border-color: #a7824b88; border-radius: 5px; }
.modal-header,.modal-footer { border-color: #b28a4a33; }
.modal-title { color: #e9c895; font-family: Georgia,serif; }
footer { position: relative; padding: 12px 20px 35px; color: #9581a8; font-size: 11px; line-height: 1.8; }
footer::before { content: ""; display: block; width: min(100%,430px); height: 1px; margin: 0 auto 22px; background: linear-gradient(90deg,transparent,#a27c424f,transparent); }
footer small { color: #71677d; font-size: 9px; }
footer a { color: #ae9772; }
:focus-visible { outline-color: #dabb89; }
@media(max-width:1100px) {
  .container { width: calc(100% - 44px); }
  .devilex-hero { padding: 36px; min-height: 510px; background-size: auto,auto,70% auto; }
  .devilex-hero-copy { max-width: 520px; }
  .devilex-hero h1.devilex-hero-logo { max-width: 520px; }
  .devilex-hero-caption { display: none; }
}
@media(max-width:800px) {
  .container { width: calc(100% - 32px); }
  .devilex-topbar { min-height: 87px; gap: 20px; }
  .devilex-wordmark { width: 174px; }
  .devilex-topbar-caption { display: none; }
  .devilex-hero { padding: 35px 30px; min-height: 470px; background: linear-gradient(90deg,#100b1df5,rgba(16,11,29,.72) 57%,rgba(16,11,29,.25)),linear-gradient(0deg,#100b1d,transparent 70%),url('../images/devilex-xalatath.jpg') right top/80% auto no-repeat; }
  .devilex-hero-copy { max-width: 495px; }
  .devilex-hero-lead { font-size: 26px; }
  .main-box > .devilex-content { padding: 0 22px 22px; }
  nav > div a.nav-item.nav-link,nav > div a.nav-item.nav-link.active { min-height: 58px; padding: 19px 5px; font-size: 11px; }
  .devilex-expansion { margin-bottom: 20px; }
}
@media(max-width:540px) {
  .container { width: calc(100% - 22px); }
  .devilex-topbar { min-height: 78px; gap: 10px; }
  .devilex-wordmark { width: 145px; }
  .devilex-topbar-actions { gap: 10px; }
  .devilex-topbar-actions > a { font-size: 11px; }
  .devilex-login-button { padding: 10px 12px; }
  .devilex-hero { padding: 30px 21px 32px; min-height: 0; background: linear-gradient(90deg,#100b1dd9,#100b1d40),linear-gradient(0deg,#100b1d 0%,#100b1d99 75%,#100b1d60),url('../images/devilex-xalatath.jpg') 65% top/cover; }
  .devilex-hero::after { inset: 6px; }
  .devilex-eyebrow { font-size: 7px; letter-spacing: .11em; gap: 7px; padding-left: 0; }
  .devilex-eyebrow-line { width: 15px; }
  .devilex-sigil { font-size: 14px; }
  .devilex-hero h1.devilex-hero-logo { width: calc(100% + 14px); max-width: none; margin: 22px -7px 0; }
  .devilex-expansion { font-size: 8px; gap: 12px; padding: 0 12px; margin: 2px 0 25px; }
  .devilex-hero-lead { max-width: none; font-size: 24px; line-height: 1.25; margin-bottom: 11px; }
  .devilex-hero-sub { max-width: none; font-size: 12px; line-height: 1.8; }
  .devilex-hero-actions { margin-top: 22px; gap: 11px; }
  .devilex-button { min-height: 47px; padding: 13px 17px; font-size: 12px; }
  .devilex-realm-line { margin-top: 22px; gap: 7px; font-size: 9px; }
  .main-box > .devilex-content { padding: 0 13px 20px; }
  nav > .nav.nav-tabs { padding: 0; }
  nav > div a.nav-item.nav-link,nav > div a.nav-item.nav-link.active { min-height: 46px; padding: 14px 4px; font-size: 10px; }
  .tab-content { padding-top: 22px !important; }
  .devilex-section-heading { padding-bottom: 18px; margin: 7px 0 22px; }
  .devilex-section-heading h2 { font-size: 27px; }
  .devilex-section-heading p { font-size: 12px; }
  .devilex-kicker { font-size: 8px; }
  .devilex-character-list,.devilex-character-profile { padding: 18px; }
}
@media(prefers-reduced-motion:reduce) { .devilex-wordmark img,.devilex-button { transition: none; } }