/* CABAL ETHERIAL — site-wide redesign layer.
   Loaded after the existing site.css so all current features keep working. */
:root,
html[data-theme]{
  --etherial-cyan:#83d9ff;
  --etherial-blue:#6578ff;
  --etherial-violet:#a66cff;
  --etherial-purple:#713cff;
  --etherial-silver:#e9efff;
  --etherial-panel:rgba(7,10,24,.82);
  --etherial-panel-2:rgba(9,13,31,.94);
  --etherial-line:rgba(132,153,255,.25);
  --etherial-glow:0 0 28px rgba(93,83,255,.24);
  --red:#6646ff!important;
  --red2:#9b7cff!important;
  --darkred:#090b24!important;
  --theme-rgb:104,86,255!important;
  --theme-soft:#c8c7ff!important;
  --theme-deep:#060817!important;
}
html{background:#02040d!important}
body{
  position:relative;
  isolation:isolate;
  background:#02040d!important;
  color:#f6f7ff!important;
  overflow-x:hidden;
}
/* Deep Etherial energy field.  The character art is kept in separate layers so
   it moves without ever blocking buttons/forms. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 18%,rgba(45,76,255,.22),transparent 24%),
    radial-gradient(circle at 48% 42%,rgba(111,50,255,.16),transparent 34%),
    radial-gradient(circle at 12% 52%,rgba(70,58,210,.16),transparent 28%),
    radial-gradient(circle at 88% 48%,rgba(53,93,255,.14),transparent 29%),
    linear-gradient(180deg,#030616 0%,#04071a 48%,#02040d 100%);
}
body::after{
  content:"";
  position:fixed;
  inset:-8%;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 18%,rgba(130,155,255,.08),transparent 35%),
    repeating-radial-gradient(ellipse at 50% 100%,rgba(119,72,255,.035) 0 1px,transparent 2px 26px);
  filter:blur(1px);
  animation:etherialFog 16s ease-in-out infinite alternate;
}
#etherial-characters-left,
#etherial-characters-right{
  position:fixed;
  top:76px;
  bottom:0;
  width:min(46vw,820px);
  z-index:1;
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:contain;
  opacity:.62;
  filter:saturate(1.08) contrast(1.06) drop-shadow(0 0 34px rgba(75,65,255,.22));
  will-change:transform,opacity;
}
#etherial-characters-left{
  left:-2vw;
  background-image:url("../img/etherial-classes-left.webp");
  background-position:left 8%;
  -webkit-mask-image:linear-gradient(90deg,#000 0 58%,rgba(0,0,0,.76) 74%,transparent 100%),linear-gradient(180deg,#000 0 68%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 0 58%,rgba(0,0,0,.76) 74%,transparent 100%);
  animation:etherialLeftFloat 11s ease-in-out infinite alternate;
}
#etherial-characters-right{
  right:-3vw;
  background-image:url("../img/etherial-classes-right.webp");
  background-position:right 7%;
  -webkit-mask-image:linear-gradient(270deg,#000 0 60%,rgba(0,0,0,.72) 76%,transparent 100%),linear-gradient(180deg,#000 0 68%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(270deg,#000 0 60%,rgba(0,0,0,.72) 76%,transparent 100%);
  animation:etherialRightFloat 13s ease-in-out infinite alternate;
}
@keyframes etherialLeftFloat{
  from{transform:translate3d(calc(var(--etherial-parallax-x,0px) - 8px),calc(var(--etherial-parallax-y,0px) - 5px),0) scale(1.01)}
  to{transform:translate3d(calc(var(--etherial-parallax-x,0px) + 7px),calc(var(--etherial-parallax-y,0px) + 9px),0) scale(1.045)}
}
@keyframes etherialRightFloat{
  from{transform:translate3d(calc(var(--etherial-parallax-x-r,0px) + 8px),calc(var(--etherial-parallax-y,0px) + 7px),0) scale(1.025)}
  to{transform:translate3d(calc(var(--etherial-parallax-x-r,0px) - 9px),calc(var(--etherial-parallax-y,0px) - 6px),0) scale(1.055)}
}
@keyframes etherialFog{from{opacity:.62;transform:translate3d(-1.2%,0,0) scale(1)}to{opacity:.92;transform:translate3d(1.2%,1%,0) scale(1.025)}}
#etherial-particles{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.etherial-particle{position:absolute;width:2px;height:2px;border-radius:50%;background:#b7d9ff;box-shadow:0 0 8px #6e8cff;opacity:.35;animation:etherialParticleFloat var(--d) linear infinite;animation-delay:var(--delay)}
@keyframes etherialParticleFloat{0%{transform:translate3d(0,10vh,0);opacity:0}15%{opacity:.55}100%{transform:translate3d(var(--drift),-110vh,0);opacity:0}}
.page-noise{z-index:-2!important;opacity:.08!important}
.site-style-switcher{display:none!important}
.beta-ribbon{z-index:1400!important;background:linear-gradient(90deg,#321274,#5643c7,#321274)!important;border-color:rgba(170,181,255,.28)!important}

/* Header */
.top-shell{
  position:relative!important;
  z-index:30!important;
  height:76px!important;
  background:linear-gradient(180deg,rgba(3,5,17,.97),rgba(6,8,24,.88))!important;
  border-bottom:1px solid rgba(128,145,255,.22)!important;
  box-shadow:0 15px 45px rgba(0,0,0,.28),0 1px 0 rgba(147,174,255,.08) inset!important;
  backdrop-filter:blur(22px)!important;
}
.public-brand{gap:13px!important}
.public-brand img{width:62px!important;height:62px!important;border-radius:0!important;filter:drop-shadow(0 0 16px rgba(103,101,255,.46))!important}
.public-brand b,.top-title b{font-family:Georgia,"Times New Roman",serif!important;letter-spacing:.13em!important;color:#edf0ff!important;text-shadow:0 0 16px rgba(117,128,255,.25)}
.public-nav{gap:23px!important;color:#b8bdd5!important}
.public-nav a{position:relative;padding:27px 2px 25px!important;transition:.2s ease!important}
.public-nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:2px;background:linear-gradient(90deg,#79bfff,#8f62ff);box-shadow:0 0 12px #775cff;transition:.2s ease}
.public-nav a:hover{color:#fff!important;text-shadow:0 0 12px rgba(125,145,255,.7)}
.public-nav a:hover::after{left:0;right:0}
.red-link,.btn.red,.button.primary{background:linear-gradient(135deg,#3d47d9,#7138dc 52%,#40208c)!important;border:1px solid #8d88ff!important;box-shadow:0 0 20px rgba(79,69,255,.19),inset 0 1px 0 rgba(255,255,255,.16)!important;color:white!important}
.red-link{padding:11px 18px!important}

/* Logged-in navigation */
.side-shell{
  z-index:25!important;
  background:linear-gradient(180deg,rgba(4,6,19,.98),rgba(5,7,20,.95))!important;
  border-right:1px solid rgba(130,145,255,.19)!important;
  box-shadow:18px 0 60px rgba(0,0,0,.42)!important;
}
.side-shell::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 7%,rgba(89,86,255,.19),transparent 28%),linear-gradient(155deg,transparent 48%,rgba(67,51,171,.09));}
.side-logo{height:190px!important;background:radial-gradient(circle,rgba(80,93,255,.18),transparent 62%)!important;border-color:rgba(124,139,255,.18)!important}
.side-logo img{width:225px!important;max-height:170px!important;object-fit:contain!important;filter:drop-shadow(0 0 22px rgba(94,95,255,.45))}
.side-nav a{border-radius:4px!important;color:#a8acc4!important}
.side-nav a:hover,.side-nav a.active{color:#fff!important;background:linear-gradient(90deg,rgba(68,79,214,.30),rgba(97,50,184,.12),transparent)!important;border-left-color:#8e86ff!important;box-shadow:inset 0 0 18px rgba(71,75,185,.08)}
.side-nav a.active span{color:#9da0ff!important;text-shadow:0 0 12px #766aff}
.side-account{border-color:rgba(125,139,255,.18)!important;background:rgba(4,5,17,.54)}
.side-account button{border-color:#5147a8!important;background:linear-gradient(135deg,#15194e,#28155c)!important;color:#c7c6ff!important}

/* Main panels across the existing site */
.page-main{position:relative;z-index:10}
.metal-panel,.auth-card,.page-panel,.download-card,.shop-card,.character-card,.table-panel,.checkout-card,.public-character-card,.purchase-box,.notice,.diagnostic,.metric-row article,.user-stamp,.account-number,.redeem-panel{
  background:linear-gradient(145deg,rgba(12,16,38,.92),rgba(6,9,25,.82))!important;
  border-color:rgba(128,143,255,.22)!important;
  box-shadow:0 18px 55px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.025)!important;
  backdrop-filter:blur(16px)!important;
}
.metal-panel:before{background:linear-gradient(90deg,#72caff,#7662ff,#a86cff,transparent)!important;height:3px!important}
.panel-head span,.kicker,.eyebrow,.news-tag,.tag,.rank-pill,.rank-chip{color:#9db7ff!important}
.panel-head h2,.page-title h1,.article-page h1,.member-hero h1,.character-banner h1,.reward-hero h1,.auth-card h1{color:#f4f5ff!important;text-shadow:0 0 20px rgba(84,98,255,.13)}
.page-title h1 em,.hero-copy h1 em,.member-hero h1 em,.reward-hero h1 em{color:#9b8cff!important;text-shadow:0 0 24px rgba(110,90,255,.34)!important}
.form-stack input,.form-stack select,.form-stack textarea,.stack-form input,.stack-form select,.stack-form textarea,.redeem-panel input,select,input,textarea{
  border-color:rgba(128,143,255,.20)!important;background:rgba(2,4,15,.82)!important;color:#f4f5ff!important;
}
.form-stack input:focus,.form-stack textarea:focus,.redeem-panel input:focus,input:focus,textarea:focus,select:focus{border-color:#777fff!important;box-shadow:0 0 0 2px rgba(103,101,255,.10)!important;outline:none!important}
.button,.btn{border-color:rgba(138,145,255,.35)!important;background:linear-gradient(135deg,rgba(22,28,66,.94),rgba(13,17,44,.94))!important}
.button:hover,.btn:hover{border-color:#858aff!important;box-shadow:0 0 22px rgba(91,84,255,.18)!important}
.news-line,.rank-line,.compact-line,.variant-line,td,th{border-color:rgba(124,139,255,.13)!important}
.footer{position:relative;z-index:10;border-top:1px solid rgba(121,137,255,.14)!important;background:rgba(2,4,14,.55)!important;backdrop-filter:blur(14px)}

/* Authentication pages */
.auth-stage{background:transparent!important;min-height:calc(100vh - 76px)!important}
.auth-logo{content:url("../img/cabal-etherial-logo.webp")!important;filter:drop-shadow(0 0 38px rgba(81,91,255,.35))!important}

/* Music player: keep it clickable above every visual layer */
.site-music-player{z-index:5000!important;pointer-events:auto!important;background:linear-gradient(135deg,rgba(7,10,32,.97),rgba(26,15,61,.96))!important;border-color:rgba(133,139,255,.48)!important;box-shadow:0 18px 55px rgba(0,0,0,.48),0 0 30px rgba(79,73,255,.18)!important}
.site-music-player *{pointer-events:auto!important}
.music-main-button,.music-icon-button,.music-collapse-button{background:rgba(74,71,210,.27)!important;border-color:rgba(154,163,255,.36)!important}
.music-main-button:hover,.music-icon-button:hover,.music-collapse-button:hover{background:rgba(93,82,232,.49)!important;border-color:#aeb7ff!important}

/* CABAL ETHERIAL homepage */
.etherial-home-hero{
  min-height:760px;
  position:relative;
  display:grid;
  place-items:center;
  text-align:center;
  overflow:hidden;
  margin:0 calc(50% - 50vw);
  padding:76px max(22px,calc((100vw - 1220px)/2)) 112px;
  border-bottom:1px solid rgba(126,143,255,.19);
  background:
    radial-gradient(circle at 50% 39%,rgba(55,80,255,.18),transparent 27%),
    linear-gradient(180deg,rgba(2,4,14,.08),rgba(2,4,14,.44) 70%,rgba(2,4,14,.98));
}
.etherial-home-hero::before{content:"";position:absolute;inset:10% 9% 9%;pointer-events:none;background:radial-gradient(ellipse at center,rgba(90,92,255,.08),transparent 58%);border:1px solid rgba(129,146,255,.07);clip-path:polygon(12% 0,88% 0,100% 50%,88% 100%,12% 100%,0 50%)}
.etherial-hero-core{position:relative;z-index:2;display:grid;justify-items:center;max-width:850px;margin-top:15px}
.etherial-main-logo{width:min(620px,74vw);max-height:470px;object-fit:contain;margin-bottom:-88px;filter:drop-shadow(0 0 44px rgba(79,87,255,.40));animation:etherialLogoFloat 6s ease-in-out infinite alternate}
@keyframes etherialLogoFloat{from{transform:translateY(-4px) scale(.995)}to{transform:translateY(7px) scale(1.012)}}
.etherial-hero-core .server-kicker{font:700 .72rem Georgia,serif;letter-spacing:.33em;color:#b9c8ff;text-transform:uppercase;text-shadow:0 0 14px rgba(105,123,255,.65)}
.etherial-hero-core h1{margin:12px 0 0;font:700 clamp(2.25rem,5.8vw,5.7rem) Georgia,"Times New Roman",serif;letter-spacing:.17em;line-height:.92;color:#eef2ff;text-shadow:0 2px 0 #353d8c,0 0 28px rgba(85,96,255,.42)}
.etherial-hero-core h1 span{display:block;margin-top:12px;font-size:.43em;letter-spacing:.52em;color:#a9a9ff;text-shadow:0 0 25px rgba(99,84,255,.65)}
.etherial-hero-core p{max-width:720px;margin:20px auto 0;color:#b2b6ca;line-height:1.75;text-shadow:0 2px 8px #000}
.etherial-hero-buttons{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:29px}
.etherial-hero-buttons .btn{min-width:190px;min-height:51px;clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%);background:linear-gradient(135deg,#2333a3,#673bd0,#24116e)!important;border:0!important;box-shadow:0 0 24px rgba(95,78,255,.28)!important}
.etherial-hero-buttons .btn.secondary{background:linear-gradient(135deg,rgba(13,31,72,.94),rgba(14,22,64,.94))!important}
.etherial-online-badge{margin-top:26px;display:flex;align-items:center;gap:9px;padding:9px 15px;border:1px solid rgba(114,143,255,.22);background:rgba(4,9,26,.65);font-size:.72rem;color:#c8cce0}
.etherial-online-badge i{width:8px;height:8px;border-radius:50%;background:#4effa0;box-shadow:0 0 14px #4effa0}
.etherial-class-orbit{position:absolute;left:50%;bottom:26px;z-index:3;transform:translateX(-50%);width:min(1180px,94vw);display:grid;grid-template-columns:repeat(9,1fr);gap:7px}
.etherial-class-orbit span{padding:9px 4px;border:1px solid rgba(122,140,255,.13);background:rgba(4,7,22,.64);backdrop-filter:blur(8px);font-size:.55rem;font-weight:800;letter-spacing:.08em;color:#aab3d6;text-transform:uppercase;box-shadow:inset 0 1px rgba(255,255,255,.02)}
.etherial-class-orbit span::before{content:"✦";display:block;margin-bottom:3px;color:#8d8eff;text-shadow:0 0 10px #716cff}
.etherial-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:-1px;border:1px solid rgba(126,141,255,.20);background:rgba(4,7,19,.90);backdrop-filter:blur(14px);box-shadow:0 22px 55px rgba(0,0,0,.30)}
.etherial-stats article{padding:25px 15px;text-align:center;border-right:1px solid rgba(126,141,255,.14)}
.etherial-stats article:last-child{border-right:0}.etherial-stats b,.etherial-stats span{display:block}.etherial-stats b{font:700 1.75rem Georgia,serif;color:#eef0ff}.etherial-stats span{margin-top:6px;color:#8f9fe8;font-size:.61rem;font-weight:900;letter-spacing:.17em}
.etherial-home-grid{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:18px;padding:44px 0 18px}.etherial-home-grid .metal-panel{min-height:100%}
.etherial-classes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.etherial-class-card{padding:12px 5px;text-align:center;border:1px solid rgba(126,143,255,.13);background:rgba(3,6,18,.6);font-size:.62rem;color:#c8cce1}.etherial-class-card i{display:block;margin-bottom:6px;color:#8b8dff;font-style:normal;font-size:1.05rem;text-shadow:0 0 13px #6d68ff}
.etherial-cta{margin:18px 0 55px;padding:28px;display:flex;align-items:center;justify-content:space-between;gap:25px;border:1px solid rgba(127,142,255,.22);background:linear-gradient(135deg,rgba(11,16,43,.90),rgba(14,8,34,.88));box-shadow:var(--etherial-glow)}
.etherial-cta h2{margin:0 0 6px;font:700 1.65rem Georgia,serif}.etherial-cta p{margin:0;color:#949ab8}

@media(max-width:1000px){
  .etherial-home-hero{min-height:700px}.etherial-main-logo{margin-bottom:-52px}.etherial-class-orbit{grid-template-columns:repeat(5,1fr)}.etherial-class-orbit span:nth-child(n+6){display:none}.etherial-home-grid{grid-template-columns:1fr}.etherial-cta{align-items:flex-start;flex-direction:column}.etherial-stats{grid-template-columns:repeat(2,1fr)}.etherial-stats article:nth-child(2){border-right:0}.etherial-stats article:nth-child(-n+2){border-bottom:1px solid rgba(126,141,255,.14)}
}
@media(max-width:680px){
  .etherial-home-hero{min-height:650px;padding-top:48px}.etherial-main-logo{width:min(480px,96vw);margin-bottom:-35px}.etherial-hero-core h1{font-size:clamp(2rem,11vw,3.5rem);letter-spacing:.08em}.etherial-hero-core h1 span{letter-spacing:.28em}.etherial-class-orbit{display:none}.etherial-stats{grid-template-columns:1fr 1fr}.etherial-home-grid{padding-top:25px}.etherial-classes-grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:900px){
  #etherial-characters-left,#etherial-characters-right{opacity:.32;width:66vw;top:76px}
  #etherial-characters-left{left:-24vw}
  #etherial-characters-right{right:-28vw}
}
@media(max-width:560px){
  #etherial-characters-left{opacity:.24;left:-42vw;width:90vw}
  #etherial-characters-right{display:none}
}
@media(prefers-reduced-motion:reduce){body::after,#etherial-characters-left,#etherial-characters-right,.etherial-main-logo,.etherial-particle{animation:none!important}}