:root{
  --bg:#17110d;
  --bg-raised:#221912;
  --bg-raised-2:#2b2016;
  --line:#3a2c1f;
  --ink:#f3e9dc;
  --ink-dim:#b3a08c;
  --ember:#ff8c3a;
  --ember-hot:#ffd166;
  --ember-ink:#1a0f06;

  --mode-smp:#8fd19e;
  --mode-bedwars:#ff5c5c;
  --mode-boxpvp:#5ec8e6;
  --mode-practice:#c792ea;

  --font-display:'Changa','Tajawal',sans-serif;
  --font-body:'Tajawal','Changa',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}
:root[data-theme="light"]{
  --bg:#f6efe3;
  --bg-raised:#fffaf1;
  --bg-raised-2:#f0e6d4;
  --line:#e2d3b8;
  --ink:#231a10;
  --ink-dim:#6f5f49;
  --ember:#d9640f;
  --ember-hot:#a8690c;
  --ember-ink:#fff7ec;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f6efe3;
    --bg-raised:#fffaf1;
    --bg-raised-2:#f0e6d4;
    --line:#e2d3b8;
    --ink:#231a10;
    --ink-dim:#6f5f49;
    --ember:#d9640f;
    --ember-hot:#a8690c;
    --ember-ink:#fff7ec;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.7;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:800;
  text-wrap:balance;
  margin:0;
}
.mono{font-family:var(--font-mono);direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
a{color:inherit}
::selection{background:var(--ember);color:var(--ember-ink)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---------- NAV ---------- */
.topnav{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topnav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:20px}
.brand{
  font-family:var(--font-display);font-weight:800;font-size:1.15rem;
  color:var(--ink);text-decoration:none;letter-spacing:.3px;
}
.nav-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nav-links a{
  text-decoration:none;color:var(--ink-dim);font-size:.92rem;font-weight:600;
  padding:8px 14px;border-radius:10px;transition:background .12s ease,color .12s ease;
}
.nav-links a:hover{background:var(--bg-raised);color:var(--ink)}
.nav-links a.active{color:var(--ember-hot);background:color-mix(in srgb, var(--ember) 14%, transparent)}
.nav-links a.nav-discord{background:#5865F2;color:#fff}
.nav-links a.nav-discord:hover{background:#4752c4;color:#fff}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding:96px 0 84px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";
  position:absolute;inset:-20% -10% auto -10%;height:130%;
  background:
    radial-gradient(480px 340px at 18% 25%, color-mix(in srgb, var(--ember) 22%, transparent), transparent 70%),
    radial-gradient(600px 420px at 85% 10%, color-mix(in srgb, var(--ember-hot) 16%, transparent), transparent 70%);
  filter:blur(6px);
  animation:emberdrift 16s ease-in-out infinite alternate;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){ .hero::before{animation:none} }
@keyframes emberdrift{
  from{ transform:translateY(0) scale(1); }
  to{ transform:translateY(2%) scale(1.04); }
}
.hero-inner{position:relative;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;
  color:var(--ember-hot);background:color-mix(in srgb, var(--ember) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--ember) 35%, transparent);
  padding:6px 14px;border-radius:999px;
}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:#7CFC9A;box-shadow:0 0 0 0 rgba(124,252,154,.6);animation:pulse 2s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(124,252,154,.55)}
  70%{box-shadow:0 0 0 8px rgba(124,252,154,0)}
  100%{box-shadow:0 0 0 0 rgba(124,252,154,0)}
}
h1.logo{
  font-size:clamp(2.4rem, 6vw, 4.2rem);
  line-height:.95;
  margin:22px 0 10px;
  background:linear-gradient(180deg, var(--ink) 0%, var(--ink) 55%, var(--ember-hot) 150%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:.5px;
}
h1.logo.xl{font-size:clamp(3rem, 8vw, 5.6rem)}
.tagline{color:var(--ink-dim);font-size:1.15rem;max-width:520px;margin:0 auto}

.ip-forge{
  margin:38px auto 0;max-width:560px;
  background:var(--bg-raised);
  border:1px solid var(--line);
  border-radius:18px;
  padding:8px;
  display:flex;gap:8px;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.03);
}
.ip-forge .slot{
  flex:1;display:flex;flex-direction:column;align-items:flex-start;
  padding:12px 18px;text-align:right;
}
[dir="rtl"] .ip-forge .slot{align-items:flex-end}
.ip-forge .slot .k{font-size:.72rem;color:var(--ink-dim);letter-spacing:.06em}
.ip-forge .slot .v{font-size:1.25rem;font-weight:700;font-family:var(--font-mono);direction:ltr}
.forge-btn{
  border:0;border-radius:12px;
  background:linear-gradient(180deg, var(--ember-hot), var(--ember));
  color:var(--ember-ink);font-weight:700;font-family:var(--font-body);
  padding:0 22px;cursor:pointer;font-size:.95rem;
  transition:transform .12s ease, box-shadow .12s ease;
  box-shadow:0 8px 20px -8px color-mix(in srgb, var(--ember) 70%, transparent);
}
.forge-btn:hover{transform:translateY(-1px)}
.forge-btn:active{transform:translateY(0)}
.forge-btn.copied{background:linear-gradient(180deg,#8fd19e,#4fae68)}

.hero-stats{
  display:flex;justify-content:center;gap:34px;margin-top:26px;
  color:var(--ink-dim);font-size:.85rem;flex-wrap:wrap;
}
.hero-stats b{color:var(--ink);font-family:var(--font-mono);font-weight:500}

/* ---------- SECTIONS ---------- */
section{padding:64px 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.section-head h2{font-size:1.9rem}
.section-head p{color:var(--ink-dim);margin:0;font-size:.95rem}

/* mode plates */
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.plate{
  position:relative;border-radius:16px;padding:24px;
  background:var(--bg-raised);
  border:1px solid var(--line);
  border-inline-start:4px solid var(--mode-c, var(--ember));
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
  overflow:hidden;
}
.plate:hover{transform:translateY(-4px);background:var(--bg-raised-2)}
.plate::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120px 90px at 100% 0%, color-mix(in srgb, var(--mode-c, var(--ember)) 18%, transparent), transparent 70%);
  pointer-events:none;
}
.plate .status{
  display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--ink-dim);
  font-family:var(--font-mono);margin-bottom:14px;
}
.plate .status .dot{width:6px;height:6px;border-radius:50%;background:#7CFC9A}
.plate .status .dot.off{background:#8a6a5a}
.plate h3{font-size:1.3rem;color:var(--mode-c, var(--ink));margin-bottom:6px}
.plate p{margin:0;color:var(--ink-dim);font-size:.88rem}
.plate .count{margin-top:16px;font-family:var(--font-mono);font-size:.85rem;color:var(--ink-dim)}
.plate .count b{color:var(--ink);font-size:1.1rem}

/* teaser link cards (home page) */
.teasers{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.teaser{
  display:block;text-decoration:none;position:relative;border-radius:16px;padding:26px;
  background:var(--bg-raised);border:1px solid var(--line);
  transition:transform .15s ease, background .15s ease;
}
.teaser:hover{transform:translateY(-4px);background:var(--bg-raised-2)}
.teaser .emoji{font-size:1.6rem;margin-bottom:10px;display:block}
.teaser h3{font-size:1.15rem;color:var(--ink);margin-bottom:6px}
.teaser p{margin:0;color:var(--ink-dim);font-size:.88rem}
.teaser .go{margin-top:14px;font-family:var(--font-mono);font-size:.8rem;color:var(--ember-hot)}

/* map viewport */
.viewport{
  border-radius:18px;overflow:hidden;position:relative;
  border:1px solid var(--line);
  background:var(--bg-raised);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
}
.viewport .bezel{
  display:flex;align-items:center;gap:10px;padding:12px 18px;
  border-bottom:1px solid var(--line);background:var(--bg-raised-2);
  font-family:var(--font-mono);font-size:.78rem;color:var(--ink-dim);
}
.viewport .bezel .dots{display:flex;gap:6px}
.viewport .bezel .dots span{width:9px;height:9px;border-radius:50%;background:var(--line)}
.viewport iframe{width:100%;height:540px;border:0;display:block;background:#0a0d12}
.viewport iframe.tall{height:78vh}

/* leaderboard */
.hoard{
  background:var(--bg-raised);border:1px solid var(--line);border-radius:16px;overflow:hidden;
}
.hoard-row{
  display:flex;align-items:center;gap:16px;padding:14px 20px;
  border-bottom:1px solid var(--line);
}
.hoard-row:last-child{border-bottom:0}
.hoard-row .rank{
  font-family:var(--font-display);font-weight:800;font-size:1.1rem;color:var(--ember);
  width:34px;text-align:center;
}
.hoard-row .rank.r1{color:var(--ember-hot)}
.hoard-row .name{flex:1;font-weight:700}
.hoard-row .bal{font-family:var(--font-mono);color:var(--mode-smp);direction:ltr}
.empty-state{color:var(--ink-dim);text-align:center;padding:36px 0;font-size:.9rem}

/* discord CTA */
.cta-band{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:linear-gradient(135deg, var(--bg-raised), var(--bg-raised-2));
  border:1px solid var(--line);border-radius:20px;padding:32px 36px;
}
.cta-band h3{font-size:1.4rem;margin-bottom:6px}
.cta-band p{margin:0;color:var(--ink-dim)}
.discord-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:#5865F2;color:#fff;border-radius:12px;padding:13px 26px;
  font-weight:700;text-decoration:none;white-space:nowrap;
  transition:transform .12s ease;
}
.discord-btn:hover{transform:translateY(-2px)}

/* ---------- SHOP PAGE ---------- */
.cmd-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--bg-raised);border:1px solid var(--line);border-radius:14px;
  padding:18px 22px;margin-bottom:14px;
}
.cmd-row code{
  font-family:var(--font-mono);background:var(--bg-raised-2);color:var(--ember-hot);
  padding:6px 12px;border-radius:8px;font-size:.9rem;direction:ltr;display:inline-block;
}
.cmd-row .desc{color:var(--ink-dim);font-size:.9rem;flex:1}

.shop-search{
  width:100%;font-family:var(--font-body);font-size:1rem;
  background:var(--bg-raised);border:1px solid var(--line);border-radius:12px;
  color:var(--ink);padding:14px 18px;margin-bottom:24px;
}
.shop-search::placeholder{color:var(--ink-dim)}
.shop-search:focus-visible{outline:2px solid var(--ember);outline-offset:2px}

.shop-section{
  margin-bottom:14px;background:var(--bg-raised);border:1px solid var(--line);
  border-radius:14px;padding:6px 20px;
}
.shop-section summary{
  cursor:pointer;list-style:none;padding:14px 0;
  display:flex;align-items:center;
}
.shop-section summary::-webkit-details-marker{display:none}
.shop-section summary::before{
  content:"▸";color:var(--ember-hot);margin-inline-end:10px;font-size:.9rem;
  transition:transform .15s ease;
}
.shop-section[open] summary::before{transform:rotate(90deg)}
.shop-section h3{font-size:1.1rem;color:var(--ember-hot);display:inline-flex;align-items:center;gap:8px}
.shop-section h3 .count{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-dim);font-weight:400}
.shop-section .shop-grid{padding-bottom:18px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.shop-item{
  background:var(--bg-raised);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;
}
.shop-item .iname{font-weight:700;font-size:.95rem;margin-bottom:8px}
.shop-item .prices{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.82rem}
.shop-item .prices .buy{color:var(--mode-bedwars)}
.shop-item .prices .sell{color:var(--mode-smp)}

footer{
  border-top:1px solid var(--line);padding:32px 0;color:var(--ink-dim);
  font-size:.85rem;text-align:center;
}