/* HyperSMP — static styles */
:root{
  --background:#0d1226;
  --foreground:#f6f5ee;
  --card:#161d3a;
  --muted:#202849;
  --muted-foreground:#9aa6c7;
  --border:#2a3463;
  --primary:#3b82f6;       /* electric blue */
  --primary-2:#60a5fa;
  --primary-foreground:#ffffff;
  --accent:#38bdf8;
  --emerald:#34d399;
  --gold:#fbbf24;
  --blood:#ef4444;
  --discord:#5865F2;
  --discord-2:#404EED;

  --gradient-hero: linear-gradient(135deg,#101a44 0%,#0a0f2a 50%,#0e2a55 100%);
  --gradient-fire: linear-gradient(135deg,#3b82f6,#38bdf8);
  --gradient-emerald: linear-gradient(135deg,#22d3ee,#3b82f6);
  --gradient-gold: linear-gradient(135deg,#38bdf8,#3b82f6);
  --gradient-divine: linear-gradient(135deg,#7c3aed,#3b82f6);
  --gradient-discord: linear-gradient(135deg,#5865F2,#404EED);

  --glow-primary: 0 0 24px rgba(59,130,246,.65), 0 0 60px rgba(59,130,246,.3);
  --glow-emerald: 0 0 24px rgba(56,189,248,.6), 0 0 60px rgba(56,189,248,.3);
  --glow-gold:    0 0 24px rgba(96,165,250,.6), 0 0 60px rgba(96,165,250,.3);
  --shadow-block: 0 4px 0 rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
}

*{box-sizing:border-box;border-color:var(--border)}
html,body{margin:0;padding:0;background:var(--background);color:var(--foreground);font-family:"Russo One",system-ui,sans-serif;min-height:100vh}
body{
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(59,130,246,.18), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(56,189,248,.14), transparent 50%),
    linear-gradient(180deg,#0b1130,#080b22);
  background-attachment: fixed;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.font-pixel{font-family:"Press Start 2P",monospace}
.text-primary{color:var(--primary)}
.text-accent{color:var(--accent)}
.text-muted{color:var(--muted-foreground)}
.text-glow-primary{text-shadow:0 0 20px rgba(59,130,246,.85),0 0 40px rgba(59,130,246,.45)}
.text-glow-emerald{text-shadow:0 0 20px rgba(56,189,248,.85),0 0 40px rgba(56,189,248,.45)}
.text-glow-gold{text-shadow:0 0 20px rgba(96,165,250,.85),0 0 40px rgba(96,165,250,.45)}

.glow-primary{box-shadow:var(--glow-primary)}
.glow-emerald{box-shadow:var(--glow-emerald)}
.glow-gold{box-shadow:var(--glow-gold)}

.gradient-hero{background-image:var(--gradient-hero)}
.gradient-fire{background-image:var(--gradient-fire)}
.gradient-emerald{background-image:var(--gradient-emerald)}
.gradient-gold{background-image:var(--gradient-gold)}
.gradient-divine{background-image:var(--gradient-divine)}
.gradient-discord{background-image:var(--gradient-discord)}

.mc-block{
  background-color:var(--card);
  border:2px solid var(--border);
  box-shadow:var(--shadow-block);
  position:relative;
}
.mc-block::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.06),transparent 30%),
    linear-gradient(0deg,rgba(0,0,0,.25),transparent 30%);
}
.pixel-border{image-rendering:pixelated;box-shadow:inset 0 0 0 2px rgba(0,0,0,.4),inset 0 0 0 4px rgba(255,255,255,.08)}

.grid-overlay{
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:32px 32px;
}

/* layout helpers */
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
@media(min-width:768px){.container{padding:0 1.5rem}}
.rounded-md{border-radius:.5rem}.rounded-lg{border-radius:.75rem}.rounded-xl{border-radius:1rem}.rounded-2xl{border-radius:1.25rem}.rounded-full{border-radius:9999px}
.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.inline-block{display:inline-block}
.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}
.text-center{text-align:center}
.relative{position:relative}.absolute{position:absolute}.inset-0{inset:0}.fixed{position:fixed}
.overflow-hidden{overflow:hidden}
.w-full{width:100%}
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-12{margin-top:3rem}
.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-12{margin-bottom:3rem}
.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.p-10{padding:2.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-20{padding-top:5rem;padding-bottom:5rem}
.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}

.btn{display:inline-block;font-family:"Press Start 2P",monospace;font-size:11px;padding:14px 22px;border-radius:8px;color:#fff;border:none;cursor:pointer;transition:transform .2s}
.btn:hover{transform:scale(1.05)}
.btn-primary{background:var(--gradient-fire);box-shadow:var(--glow-primary)}
.btn-discord{background:var(--gradient-discord);box-shadow:0 0 24px rgba(88,101,242,.55)}
.btn-ghost{background:var(--muted);color:var(--accent)}

/* nav */
header.site{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);background:rgba(13,18,38,.7);border-bottom:1px solid var(--border)}
header.site .row{height:64px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo-row{display:flex;align-items:center;gap:.75rem}
.logo-row img{height:40px;width:40px;border-radius:6px}
nav.main{display:none;gap:.25rem}
nav.main a{padding:8px 12px;font-family:"Press Start 2P",monospace;font-size:11px;color:rgba(246,245,238,.8);transition:color .2s}
nav.main a:hover, nav.main a.active{color:var(--primary);text-shadow:0 0 12px rgba(59,130,246,.7)}
@media(min-width:1024px){nav.main{display:flex}}
.menu-btn{display:inline-block;font-family:"Press Start 2P",monospace;font-size:11px;background:var(--card);border:2px solid var(--border);color:#fff;padding:8px 12px;border-radius:6px;cursor:pointer}
@media(min-width:1024px){.menu-btn{display:none}}
.mobile-nav{display:none;border-top:1px solid var(--border);background:rgba(13,18,38,.95)}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:10px 16px;font-family:"Press Start 2P",monospace;font-size:11px;color:#fff}

/* hero */
section.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.hero-grid{position:relative;display:grid;gap:3rem;align-items:center;padding:5rem 0}
@media(min-width:1024px){.hero-grid{grid-template-columns:1fr 1fr;padding:7rem 0}}
.hero h1{font-family:"Press Start 2P",monospace;font-size:clamp(2rem,6vw,4rem);line-height:1.1;color:var(--primary);text-shadow:0 0 20px rgba(59,130,246,.85),0 0 40px rgba(59,130,246,.45);margin:0}
.hero p.lead{margin-top:1.5rem;color:var(--muted-foreground);max-width:36rem;font-size:1.05rem}

/* status */
.status-card{padding:1.5rem;border-radius:.75rem}
.status-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.dot{display:inline-block;height:10px;width:10px;border-radius:50%;background:var(--muted-foreground)}
.dot.online{background:var(--emerald);box-shadow:0 0 12px var(--emerald)}
.dot.offline{background:var(--blood)}
.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;font-size:.95rem}
.status-grid dt{font-size:11px;text-transform:uppercase;color:var(--muted-foreground)}
.status-grid dd{margin:.25rem 0 0 0;font-family:"Press Start 2P",monospace;font-size:1rem}

/* card grid */
.cards{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:640px){.cards.cols-2{grid-template-columns:1fr 1fr}.cards.cols-3{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.cards.cols-3{grid-template-columns:1fr 1fr 1fr}.cards.cols-4{grid-template-columns:repeat(4,1fr)}}

.card{padding:1.5rem;border-radius:1rem;transition:transform .2s}
.card:hover{transform:translateY(-4px)}
.card h3{font-family:"Press Start 2P",monospace;font-size:.95rem;margin:0 0 .5rem 0}
.card p{color:var(--muted-foreground);font-size:.9rem;margin:0}
.swatch{height:48px;width:48px;border-radius:.5rem;margin-bottom:1rem;box-shadow:var(--glow-primary)}

/* page hero */
.pagehero{position:relative;overflow:hidden;border-bottom:1px solid var(--border);text-align:center;padding:5rem 0}
.pagehero h1{font-family:"Press Start 2P",monospace;color:var(--primary);font-size:clamp(1.5rem,5vw,3rem);text-shadow:0 0 20px rgba(59,130,246,.85);margin:0}
.pagehero .eyebrow{font-family:"Press Start 2P",monospace;font-size:10px;letter-spacing:.3em;color:var(--accent);margin-bottom:1rem}
.pagehero p{max-width:42rem;margin:1.5rem auto 0;color:var(--muted-foreground)}

/* ranks */
.rank-card{padding:1.5rem;border-radius:1rem;position:relative;overflow:hidden;transition:transform .2s}
.rank-card:hover{transform:translateY(-6px)}
.rank-card.popular{outline:2px solid var(--primary)}
.rank-bar{height:8px;width:64px;border-radius:9999px;margin-bottom:1rem}
.rank-name{font-family:"Press Start 2P",monospace;font-size:1.25rem;margin:0}
.rank-price{font-family:"Press Start 2P",monospace;font-size:2rem;margin-top:.5rem}
.rank-perks{list-style:none;padding:0;margin:1.5rem 0;color:var(--muted-foreground);font-size:.9rem}
.rank-perks li{display:flex;gap:.5rem;margin-bottom:.5rem}
.popular-tag{position:absolute;top:12px;right:12px;font-family:"Press Start 2P",monospace;font-size:9px;padding:4px 8px;border-radius:4px;background:var(--gradient-fire);color:#fff}

/* rules */
.rule-row{display:grid;grid-template-columns:80px 1fr auto;gap:1rem;align-items:start;padding:1.25rem;border-radius:.75rem;margin-bottom:.75rem;transition:border-color .2s}
@media(max-width:640px){.rule-row{grid-template-columns:1fr}}
.rule-id{font-family:"Press Start 2P",monospace;font-size:.85rem}
.rule-punish{font-family:"Press Start 2P",monospace;font-size:10px;padding:8px 12px;border-radius:6px;background:var(--muted);white-space:nowrap}
.section-head{display:flex;align-items:center;gap:1rem;margin:0 0 1.5rem;padding-top:2rem}
.section-head .icon{height:56px;width:56px;border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:var(--card);border:2px solid var(--border)}
.section-head h2{font-family:"Press Start 2P",monospace;font-size:1.4rem;margin:0}

/* features */
.feature-row{display:grid;gap:2rem;grid-template-columns:1fr;padding:2rem;border-radius:1.25rem;margin-bottom:2rem;position:relative;overflow:hidden}
@media(min-width:768px){.feature-row{grid-template-columns:120px 1fr;padding:2.5rem}}
.feature-icon{height:96px;width:96px;border-radius:1rem;display:flex;align-items:center;justify-content:center;font-size:3rem}
.feature-bullets{display:grid;gap:.75rem;grid-template-columns:1fr;margin-top:1.25rem;padding:0;list-style:none}
@media(min-width:640px){.feature-bullets{grid-template-columns:1fr 1fr}}
.feature-bullets li{display:flex;gap:.5rem;font-size:.9rem}

/* staff */
.staff-card{padding:2rem;border-radius:1rem;text-align:center;position:relative;overflow:hidden;transition:transform .2s}
.staff-card:hover{transform:translateY(-4px)}
.staff-avatar{margin:0 auto;height:96px;width:96px;border-radius:1rem;display:flex;align-items:center;justify-content:center;font-family:"Press Start 2P",monospace;font-size:2rem;color:#fff}

/* partners */
.partner{display:grid;gap:2rem;grid-template-columns:1fr;padding:2.5rem;border-radius:1.25rem;margin-bottom:2rem;position:relative;overflow:hidden;align-items:center}
@media(min-width:768px){.partner{grid-template-columns:160px 1fr}}
.partner .logo-box{padding:.75rem;border-radius:.75rem;background:var(--card)}
.partner img{width:128px;height:128px;object-fit:contain;margin:0 auto}

/* footer */
footer.site{margin-top:6rem;border-top:1px solid var(--border);background:rgba(22,29,58,.5);backdrop-filter:blur(8px)}
footer.site .grid-cols{display:grid;gap:2.5rem;padding:3rem 0;grid-template-columns:1fr}
@media(min-width:768px){footer.site .grid-cols{grid-template-columns:2fr 1fr 1fr}}
footer.site h4{font-family:"Press Start 2P",monospace;font-size:11px;margin:0 0 .75rem 0}
footer.site ul{list-style:none;padding:0;margin:0;font-size:.9rem}
footer.site li{margin-bottom:.5rem}
footer.site a:hover{color:var(--primary)}
footer .copy{border-top:1px solid var(--border);padding:1rem;text-align:center;font-family:"Press Start 2P",monospace;font-size:10px;color:var(--muted-foreground)}

/* loading screen */
#loader{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--gradient-hero);overflow:hidden}
#loader .grid-overlay{position:absolute;inset:0;opacity:.6}
#loader .inner{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2rem;padding:1.5rem}
#loader img{height:128px;width:128px;border-radius:.75rem;animation:pulseGlow 2.5s ease-in-out infinite}
#loader h1{font-family:"Press Start 2P",monospace;font-size:clamp(1.4rem,4vw,2.2rem);color:var(--primary);text-shadow:0 0 20px rgba(59,130,246,.85);margin:0}
#loader .bar{width:min(90vw,384px);height:16px;background:var(--card);border:2px solid var(--border);overflow:hidden}
#loader .fill{height:100%;width:0;background:var(--gradient-fire);box-shadow:var(--glow-primary);animation:loadingBar 2.2s cubic-bezier(.4,0,.2,1) forwards}
#loader .tip{font-family:"Press Start 2P",monospace;font-size:10px;color:var(--accent);max-width:28rem;animation:blink 1.4s ease-in-out infinite}

/* modal */
.modal-backdrop{position:fixed;inset:0;z-index:90;background:rgba(13,18,38,.8);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:1rem}
.modal-backdrop.open{display:flex}
.modal{max-width:28rem;width:100%;padding:1.5rem;border-radius:1rem;position:relative}
.modal .close{position:absolute;top:12px;right:12px;background:none;border:none;color:#fff;font-family:"Press Start 2P",monospace;font-size:11px;cursor:pointer}
.qr-wrap{padding:.75rem;background:#fff;border-radius:.5rem;box-shadow:var(--glow-gold);width:fit-content;margin:1.5rem auto 0}
.qr-wrap img{width:256px;height:256px;object-fit:contain}

@keyframes pulseGlow{0%,100%{box-shadow:0 0 20px rgba(59,130,246,.55),0 0 40px rgba(59,130,246,.25)}50%{box-shadow:0 0 32px rgba(59,130,246,.9),0 0 70px rgba(59,130,246,.45)}}
@keyframes loadingBar{0%{width:0}100%{width:100%}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .6s ease-out both}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.float{animation:float 4s ease-in-out infinite}

.glow-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.4;pointer-events:none}