/* EXODAR — Custom Systems / Arcane Forge redesign */

.sys-container{
  --cs-panel:rgba(7,5,13,.88);
  --cs-panel-2:rgba(16,9,28,.84);
  --cs-line:rgba(159,92,246,.34);
  --cs-line-soft:rgba(159,92,246,.16);
  --cs-text:#eee7f7;
  --cs-muted:#b5a9c3;
  --cs-purple:#9d55ff;
  --cs-gold:#d8b26a;
  --cs-red:#f05a5d;
  overflow:hidden!important;
  border:1px solid var(--cs-line)!important;
  border-radius:7px!important;
  background:
    linear-gradient(180deg, rgba(8,6,13,.94), rgba(5,4,9,.94)),
    url("../images/redesign/ui/panel-body.png") center/100% 100% no-repeat!important;
  box-shadow:0 18px 38px rgba(0,0,0,.34), inset 0 0 30px rgba(119,70,255,.08)!important;
  color:var(--cs-text)!important;
}

.sys-container .si-h2{
  min-height:60px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-bottom:1px solid rgba(159,92,246,.22)!important;
  background:linear-gradient(180deg, rgba(22,13,35,.86), rgba(7,5,12,.92))!important;
  color:#f5eefb!important;
  font-family:var(--font-title, Georgia, serif)!important;
  font-size:1.62rem!important;
  letter-spacing:.06em!important;
  text-shadow:0 2px 3px rgba(0,0,0,.82), 0 0 16px rgba(157,85,255,.25)!important;
}

.sys-intro{
  padding:22px 28px!important;
  border-bottom:1px solid rgba(159,92,246,.14)!important;
  background:radial-gradient(circle at 50% 0%, rgba(157,85,255,.13), transparent 48%)!important;
}

.sys-intro p{
  max-width:760px!important;
  margin:0 auto!important;
  color:#d9d0e3!important;
  line-height:1.6!important;
  text-align:center!important;
}

.sys-grid{
  display:grid!important;
  gap:12px!important;
  padding:18px!important;
}

.sys-item{
  overflow:hidden!important;
  border:1px solid rgba(159,92,246,.24)!important;
  border-radius:6px!important;
  background:linear-gradient(180deg, rgba(12,8,20,.86), rgba(5,4,10,.90))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 12px 22px rgba(0,0,0,.22)!important;
}

.sys-header{
  min-height:58px!important;
  display:grid!important;
  grid-template-columns:36px minmax(0,1fr) 28px!important;
  align-items:center!important;
  gap:14px!important;
  padding:12px 18px!important;
  cursor:pointer!important;
}

.sys-icon{
  width:32px!important;
  height:32px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(184,126,255,.32)!important;
  border-radius:5px!important;
  background:linear-gradient(180deg, rgba(82,37,139,.72), rgba(24,13,40,.82))!important;
  color:#e9d5ff!important;
  box-shadow:0 0 14px rgba(157,85,255,.18)!important;
}

.sys-icon svg{
  width:18px!important;
  height:18px!important;
  fill:currentColor!important;
}

.sys-title{
  color:#f0e8f8!important;
  font-family:var(--font-title, Georgia, serif)!important;
  font-size:1.05rem!important;
  font-weight:800!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

.sys-toggle svg{
  width:18px!important;
  height:18px!important;
  fill:#cfa8ff!important;
  transition:transform .2s ease!important;
}

.sys-item.active .sys-toggle svg{
  transform:rotate(180deg)!important;
}

.sys-content{
  border-top:1px solid rgba(159,92,246,.16)!important;
  background:rgba(3,2,7,.38)!important;
}

.sys-content-inner{
  padding:18px!important;
}

.arcane-news{
  position:relative;
  overflow:hidden;
  color:var(--cs-text);
  line-height:1.65;
  border:1px solid rgba(159,92,246,.28);
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(8,6,13,.92), rgba(5,4,9,.96)),
    url("../images/redesign/ui/arcane-forge-card-v1.svg") center top/100% auto repeat-y;
  box-shadow:inset 0 0 35px rgba(119,70,255,.08), 0 18px 34px rgba(0,0,0,.24);
}

.arcane-news::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%, rgba(157,85,255,.16), transparent 38%),
    linear-gradient(90deg, rgba(0,0,0,.24), transparent 28%, transparent 72%, rgba(0,0,0,.24));
}

.arcane-news > *{
  position:relative;
  z-index:1;
}

.arcane-news .hero{
  margin:0;
  padding:18px;
  border-bottom:1px solid rgba(159,92,246,.22);
  background:
    linear-gradient(180deg, rgba(5,4,10,.16), rgba(5,4,10,.82)),
    url("../images/redesign/ui/arcane-forge-hero-v1.svg") center/cover no-repeat;
}

.arcane-news .hero img{
  display:block;
  width:100%;
  max-width:100%;
  border:1px solid rgba(216,178,106,.42);
  border-radius:7px;
  background:#05040a;
  box-shadow:0 16px 30px rgba(0,0,0,.42), 0 0 26px rgba(157,85,255,.16);
}

.arcane-news .eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  margin:22px 24px 8px;
  padding:6px 14px;
  border:1px solid rgba(216,178,106,.46);
  border-radius:999px;
  background:rgba(35,22,8,.42);
  color:#e4c881;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.arcane-news h1,
.arcane-news h2,
.arcane-news h3{
  color:#f5eefb;
  font-family:var(--font-title, Georgia, serif);
  line-height:1.15;
  text-shadow:0 2px 2px rgba(0,0,0,.82), 0 0 14px rgba(157,85,255,.24);
}

.arcane-news h1{
  margin:0 24px 18px;
  font-size:2.55rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.arcane-news h2{
  margin:34px 24px 16px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(159,92,246,.22);
  font-size:1.55rem;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.arcane-news h2::after{
  content:"";
  display:block;
  width:118px;
  height:1px;
  margin-top:10px;
  background:linear-gradient(90deg, rgba(216,178,106,.72), transparent);
}

.arcane-news h3{
  margin:28px 24px 12px;
  color:#d9b8ff;
  font-size:1.12rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.arcane-news p{
  margin:0 24px 16px;
  color:#ded5e7;
  font-size:.98rem;
}

.arcane-news .lead{
  color:#fff;
  font-family:var(--font-title, Georgia, serif);
  font-size:1.12rem;
  font-weight:700;
}

.arcane-news .intro-box,
.arcane-news .highlight,
.arcane-news .warning,
.arcane-news .cost-box{
  margin:18px 24px 24px;
  padding:18px 20px;
  border:1px solid rgba(159,92,246,.25);
  border-radius:7px;
  background:linear-gradient(180deg, rgba(17,10,29,.76), rgba(7,5,12,.84));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.arcane-news .intro-box{
  border-left:3px solid var(--cs-gold);
}

.arcane-news .highlight{
  border-color:rgba(157,85,255,.35);
  color:#eadcff;
}

.arcane-news .warning{
  border-color:rgba(240,90,93,.34);
  background:linear-gradient(90deg, rgba(84,20,32,.44), rgba(15,8,18,.70));
  color:#ffdfe3;
}

.arcane-news .cost-box{
  border-color:rgba(216,178,106,.42);
  background:linear-gradient(90deg, rgba(79,53,13,.40), rgba(16,10,18,.70));
  color:#ffe5a6;
  font-family:var(--font-title, Georgia, serif);
  font-weight:800;
  text-align:center;
}

.arcane-news .feature-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin:22px 24px;
}

.arcane-news .feature-card{
  min-width:0;
  padding:18px;
  border:1px solid rgba(159,92,246,.22);
  border-radius:7px;
  background:
    radial-gradient(circle at 14% 0%, rgba(157,85,255,.14), transparent 44%),
    linear-gradient(180deg, rgba(14,9,24,.84), rgba(6,4,10,.88));
}

.arcane-news .feature-card h3,
.arcane-news .feature-card p{
  margin-left:0;
  margin-right:0;
}

.arcane-news .rarity-list,
.arcane-news .action-list,
.arcane-news .bonus-list{
  list-style:none;
  margin:14px 24px 18px;
  padding:0;
}

.arcane-news .rarity-list li,
.arcane-news .action-list li,
.arcane-news .bonus-list li{
  position:relative;
  min-height:42px;
  display:flex;
  align-items:center;
  padding:10px 12px 10px 34px;
  border:1px solid rgba(159,92,246,.16);
  border-radius:6px;
  background:rgba(7,5,12,.62);
  color:#dcd2e7;
}

.arcane-news .rarity-list li + li,
.arcane-news .action-list li + li,
.arcane-news .bonus-list li + li{
  margin-top:8px;
}

.arcane-news .rarity-list li::before,
.arcane-news .action-list li::before,
.arcane-news .bonus-list li::before{
  content:"✦";
  position:absolute;
  left:12px;
  color:#a864ff;
  text-shadow:0 0 10px rgba(168,100,255,.52);
}

.arcane-news .rarity-rare strong{ color:#78b6ff; }
.arcane-news .rarity-veryrare strong{ color:#54dfb0; }
.arcane-news .rarity-epic strong{ color:#b67cff; }
.arcane-news .rarity-legendary strong{ color:#ffae42; }
.arcane-news .rarity-mythic strong{ color:#ff5d73; }

.arcane-news .bonus-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:18px 24px;
}

.arcane-news .bonus-grid .bonus-list{
  margin:0;
}

.arcane-news hr{
  height:1px;
  margin:34px 24px 24px;
  border:0;
  background:linear-gradient(90deg, transparent, rgba(216,178,106,.50), rgba(157,85,255,.32), transparent);
}

.arcane-news .upgrade-table{
  display:grid;
  gap:10px;
  margin:18px 24px 28px;
}

.arcane-news .upgrade-row{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.15fr) 70px;
  align-items:center;
  gap:12px;
  min-height:54px;
  padding:12px 14px;
  border:1px solid rgba(159,92,246,.20);
  border-radius:7px;
  background:linear-gradient(180deg, rgba(14,9,24,.78), rgba(6,4,10,.90));
}

.arcane-news .upgrade-row .tier{
  color:#f3eaff;
  font-weight:900;
}

.arcane-news .upgrade-row .cost{
  color:#e4c881;
  font-weight:700;
}

.arcane-news .upgrade-row .chance{
  color:#8ef0a8;
  font-weight:900;
  text-align:right;
}

.arcane-news .upgrade-row.mythic .chance{
  color:#ff717a;
  text-shadow:0 0 10px rgba(255,113,122,.24);
}

@media (max-width:860px){
  .arcane-news .feature-grid,
  .arcane-news .bonus-grid{
    grid-template-columns:1fr;
  }

  .arcane-news .upgrade-row{
    grid-template-columns:1fr;
  }

  .arcane-news .upgrade-row .chance{
    text-align:left;
  }
}

@media (max-width:620px){
  .sys-grid,
  .sys-content-inner{
    padding:12px!important;
  }

  .arcane-news h1{
    font-size:2rem;
  }

  .arcane-news .hero,
  .arcane-news .eyebrow,
  .arcane-news h1,
  .arcane-news h2,
  .arcane-news h3,
  .arcane-news p,
  .arcane-news .intro-box,
  .arcane-news .highlight,
  .arcane-news .warning,
  .arcane-news .cost-box,
  .arcane-news .feature-grid,
  .arcane-news .rarity-list,
  .arcane-news .action-list,
  .arcane-news .bonus-grid,
  .arcane-news .upgrade-table,
  .arcane-news hr{
    margin-left:12px;
    margin-right:12px;
  }
}