:root{
--bg:#07090f;
--panel:#0b0f17;
--panel2:#0e1420;

--accent:#ff003c;
--accent2:#ff6a00;
--accent3:#ff2a2a;
--accent4:#ff8c1a;

--text:#e6e6e6;
--muted:#a7b0c0;
--danger:#ff3131;

--glass:rgba(255,255,255,.06);
--border:rgba(255,255,255,.08);
--shadow:0 18px 50px rgba(0,0,0,.65);
--blur:blur(10px);
--radius:18px;
}

body, html {
margin:0;
padding:0;
color:var(--text);
min-height:100%;
background:
radial-gradient(1200px 600px at 15% 0%, rgba(255,0,60,.12) 0%, transparent 40%),
radial-gradient(1000px 500px at 85% 100%, rgba(255,106,0,.10) 0%, transparent 45%),
#07090f;
}

.aether-bg{position:fixed;inset:0;pointer-events:none;z-index:0}
.aether-bg::before,.aether-bg::after{content:"";position:absolute;width:60vmax;height:60vmax;filter:blur(60px);opacity:.25;mix-blend-mode:screen;}
.aether-bg::before{
background:radial-gradient(circle,#ff003c 0%,transparent 60%);
top:-10%;
left:-10%;
}
.aether-bg::after{
background:radial-gradient(circle,#ff6a00 0%,transparent 60%);
bottom:-10%;
right:-10%;
}

.shell{position:relative;z-index:1}.container{max-width:1280px;margin:0 auto;padding:0 24px;}

.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid var(--border);
background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));backdrop-filter:blur(6px);position:sticky;top:0;z-index:50;}
.brand{display:flex;align-items:center;gap:14px;text-transform:uppercase;letter-spacing:2px;font-weight:800;font-size:14px;color:var(--muted);}
.brand img{height:42px;width:42px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(212,175,55,.4));}
.nav-actions{display:flex;align-items:center;gap:10px;}

.btn, .btn-primary{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;gap:6px;border-radius:14px;transition:.16s;}
.btn{padding:12px 18px;border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--text);}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.4);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04);}
.btn-primary{
padding:10px 16px;
border:1px solid rgba(255,0,60,.45);
background:linear-gradient(180deg,#ff003c,#ff6a00);
color:#0b0b0f;
font-weight:900;
text-transform:uppercase;
position:relative;
overflow:hidden;
box-shadow:0 0 24px rgba(255,60,0,.35);
}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.15) 50%,transparent 100%);transform:translateX(-100%);transition:.5s;}
.btn-primary:hover::after{transform:translateX(100%);}

.hero {position: relative;padding: 64px 0 24px;}
.hero-wrap {display: grid;grid-template-columns: 1.2fr 1fr;gap: 24px;}
@media (max-width: 900px) {.hero-wrap {grid-template-columns: 1fr;gap: 16px;}}
.hero-card {background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.02));border: 1px solid var(--border);border-radius: var(--radius);box-shadow: var(--shadow);padding: 24px;overflow: hidden;}
.hero-title {font-size: clamp(28px, 4vw, 56px);font-weight: 900;text-transform: uppercase;letter-spacing: 2px;line-height: 1.05;background: linear-gradient(180deg, #fff, #cbd5e1);-webkit-background-clip: text;background-clip: text;color: transparent;}
.hero-title .accent{
background:linear-gradient(180deg,#ff003c,#ff8c1a);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
text-shadow:0 0 28px rgba(255,60,0,.45);
}
.hero-sub {margin-top: 12px;color: var(--muted);font-size: clamp(14px, 1.5vw, 18px);}
.hero-cta {display: flex;flex-wrap: wrap;gap: 12px;margin-top: 16px;}

.status-bar{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.status-item{
border:1px solid rgba(255,0,60,.35);
background:linear-gradient(180deg,rgba(255,0,60,.12),rgba(255,0,60,.04));
}
.status-item.gold{
border-color:rgba(255,106,0,.35);
background:linear-gradient(180deg,rgba(255,106,0,.12),rgba(255,106,0,.04));
}
.status-title{font-size:12px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;}
.status-value{font-weight:900;font-size:22px;margin-top:6px;}

.countdown-wrap{margin-top:26px;display:grid;gap:16px}
.countdown-panel{padding:18px;border-radius:var(--radius);border:1px solid var(--border);background:linear-gradient(180deg,var(--glass),rgba(255,255,255,.02))}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.panel-title{font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--accent)}

#premium-countdown{display:grid;grid-template-columns:repeat(4,minmax(100px,1fr));gap:12px;font-weight:900}
#premium-countdown div{background:var(--panel);border:1px solid var(--border);border-radius:14px;text-align:center;padding:18px 12px;box-shadow:var(--shadow);font-size:clamp(22px,3.4vw,28px);}
#premium-countdown span.label{display:block;font-size:12px;margin-top:6px;font-weight:800;letter-spacing:1px;text-transform:uppercase;}
#premium-countdown .days span.label{color:#ff003c;}
#premium-countdown .hours span.label{color:#ff6a00;}
#premium-countdown .minutes span.label{color:#ff2a2a;}
#premium-countdown .seconds span.label{color:#ff8c1a;}

.features{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature-card{padding:20px;background:linear-gradient(180deg,var(--glass),rgba(255,255,255,.02));border-radius:var(--radius);border:1px solid var(--border);transition:.18s}
.feature-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.45);border-color:rgba(255,255,255,.18);}
.feature-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.feature-icon{width:38px;height:38px;border-radius:10px;background:radial-gradient(circle at 30% 30%,rgba(212,175,55,.28),rgba(212,175,55,.08));border:1px solid rgba(212,175,55,.25);box-shadow:inset 0 0 22px rgba(212,175,55,.15),0 8px 20px rgba(0,0,0,.35);}
.feature-title{font-weight:800;letter-spacing:.5px;text-transform:uppercase;}
.feature-desc{color:var(--muted);font-size:14px;}

.ribbon{margin-top:36px;padding:18px;border-top:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.02),0);backdrop-filter:blur(6px);}
.ribbon-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.ribbon-text{color:var(--muted);font-size:14px;letter-spacing:.5px;text-transform:uppercase;}

.muted{color:var(--muted)}.gold{color:var(--accent)}.center{text-align:center}.stack-12>*+*{margin-top:12px}

.ranking-wrap{background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.02));border: 1px solid var(--border);border-radius: var(--radius);box-shadow: var(--shadow);padding: 24px;overflow: hidden;}
.ranking-title{font-size:clamp(18px,2.2vw,22px);font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--accent);text-align:center;margin-bottom:4px;}
.ranking-header{display:flex;font-weight:700;color:var(--muted);font-size:12px;padding:2px 4px;border-bottom:1px solid rgba(255,255,255,.08);}
.rank-col{width:8%}.name-col,.guild-col{width:42%}.class-col,.level-col,.leader-col{text-align:center;width:16%}.members-col{text-align:center;width:12%}.fame-col{text-align:right;color:var(--accent);width:16%}
.ranking-list{list-style:none;margin:0;padding:0}
.ranking-item{display:flex;align-items:center;padding:4px 6px;font-weight:600;color:var(--text);transition:.2s}
.ranking-item:hover{background:rgba(255,215,120,.05);color:var(--accent);cursor:pointer;border-radius:8px}
.ranking-header.guild-herde,
.ranking-item.guild-item { display: grid;grid-template-columns: 40px 1fr 80px 60px; /* # | Guild Name | Members | Fame */align-items: center; gap: 12px;}

.guild-item .rank-col { text-align: left; }
.guild-item .guild-col { text-align: left; }
.guild-item .members-col { text-align: center; }
.guild-item .fame-col { text-align: right; color: var(--accent); }
.guild-item span { text-align: inherit; }

.slider{position:relative;width:100%;overflow:hidden;border-radius:12px;box-shadow:0 8px 25px rgba(0,0,0,.35);flex:1}
.slider-track{display:flex;transition:.5s}
.slide{min-width:100%;height:350px;background-size:cover;background-position:center;flex-shrink:0;cursor:pointer}
.slider-prev,.slider-next{position:absolute;top:50%;transform:translateY(-50%);color:#fff;border:none;padding:.3rem .6rem;cursor:pointer;font-weight:700;z-index:10;background:rgba(0,0,0,.5);border-radius:50%;transition:.2s}
.slider-prev:hover,
.slider-next:hover{
background:#ff003c;
}
.slider-prev{left:4px}.slider-next{right:4px}
.slider-dots button.active{
background:#ff6a00;
}
#onlineStatus{
background:rgba(0,0,0,.75);
color:#ff6a00;
box-shadow:0 0 16px rgba(255,106,0,.45);
}
footer{position:relative;z-index:10}

@media(max-width:900px){
.hero-wrap{grid-template-columns:1fr;gap:12px}
.hero-card{padding:12px}.hero-title{font-size:clamp(24px,5vw,36px)}.hero-sub{font-size:clamp(12px,2vw,14px)}
.status-bar{grid-template-columns:1fr 1fr;gap:6px}
#premium-countdown{grid-template-columns:repeat(2,1fr);gap:6px}.countdown-panel{padding:8px}
.features{grid-template-columns:1fr;gap:6px}.feature-card{padding:8px}
.ribbon{padding:8px}
.slide{height:250px}.slider-prev,.slider-next{padding:.2rem .4rem}
.ranking-wrap{grid-template-columns:1fr}.ranking-item{flex-wrap:wrap;font-size:13px}.ranking-header{display:none}}

#inventorySidebar #inventoryPanel {transform: translateX(100%);}
#inventorySidebar.show #inventoryPanel {transform: translateX(0);}