/* SPUS land — landing design system (per style spec). Self-contained, no CDNs. */

/* ---- bundled pixel fonts (local, OFL) ---- */
@font-face{
  font-family:"PixelDisplay";
  src:url("/static/fonts/PixelifySans.ttf") format("truetype");
  font-weight:400 700; font-display:swap;
}
@font-face{
  font-family:"PixelLogo";
  src:url("/static/fonts/PressStart2P.ttf") format("truetype");
  font-weight:400; font-display:swap;
}

:root{
  --bg-0:#0d1117; --bg-1:#121821; --bg-2:#182131; --bg-3:#1f2b3d; --bg-inset:#0a0e14;
  --line:#2a3546; --line-soft:#223044; --bevel-light:#33445c; --bevel-dark:#070a0f;
  --green-500:#5db02f; --green-400:#6fc93a; --green-600:#4a8f24; --green-700:#356a19; --green-glow:#7dff4d;
  --dirt:#7a5230; --gold:#ffb02e; --diamond:#3ad6e0; --amethyst:#9b6cff; --redstone:#e5433b;
  --tx-hi:#f2f5f8; --tx:#c3ccd8; --tx-mut:#8b97a7; --tx-dim:#5b6675; --tx-on-green:#0c1a05;
  --ok:#43c463; --warn:#ffb02e; --err:#e5433b; --info:#3ad6e0;

  --font-logo:"PixelLogo","PixelDisplay",monospace;
  --font-display:"PixelDisplay","Segoe UI Semibold",system-ui,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"Cascadia Code","Consolas",monospace;
  --wrap:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg-0);color:var(--tx);font:16px/1.6 var(--font-body);
  overflow-x:hidden}
img{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);color:var(--tx-hi);line-height:1.15;margin:0}
.mono{font-family:var(--font-mono)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(16px,4vw,32px)}
section{position:relative}
.band-0{background:var(--bg-0)} .band-1{background:var(--bg-1)}
.pixel-divider{height:4px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px)}

/* ---- chunky button ---- */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font:700 15px/1 var(--font-display);letter-spacing:.5px;text-transform:uppercase;
  color:var(--tx-on-green);background:var(--green-500);padding:13px 24px;border:0;border-radius:3px;
  cursor:pointer;transform:translateY(0);
  box-shadow:inset 2px 2px 0 var(--green-400),inset -2px -2px 0 var(--green-700),
    0 5px 0 var(--green-700),0 8px 12px rgba(0,0,0,.45);
  transition:transform .06s,box-shadow .06s,filter .12s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(4px);
  box-shadow:inset 2px 2px 0 var(--green-400),inset -2px -2px 0 var(--green-700),
    0 1px 0 var(--green-700),0 2px 6px rgba(0,0,0,.5)}
.btn:focus-visible{outline:3px solid var(--green-glow);outline-offset:3px}
.btn--lg{font-size:17px;padding:17px 34px;box-shadow:inset 2px 2px 0 var(--green-400),
  inset -2px -2px 0 var(--green-700),0 6px 0 var(--green-700),0 10px 16px rgba(0,0,0,.5)}
.btn--gold{background:var(--gold);color:#2a1c00;
  box-shadow:inset 2px 2px 0 #ffca6b,inset -2px -2px 0 #b97e12,0 5px 0 #b97e12,0 8px 12px rgba(0,0,0,.45)}
.btn--gold:active{box-shadow:inset 2px 2px 0 #ffca6b,inset -2px -2px 0 #b97e12,0 1px 0 #b97e12,0 2px 6px rgba(0,0,0,.5)}
.btn--diamond{background:var(--diamond);color:#04252a;
  box-shadow:inset 2px 2px 0 #7fe8ef,inset -2px -2px 0 #1f9aa3,0 5px 0 #1f9aa3,0 8px 12px rgba(0,0,0,.45)}
.btn--amethyst{background:var(--amethyst);color:#160a33;
  box-shadow:inset 2px 2px 0 #b79bff,inset -2px -2px 0 #6e42d6,0 5px 0 #6e42d6,0 8px 12px rgba(0,0,0,.45)}
.btn--ghost{background:transparent;color:var(--tx);
  box-shadow:inset 0 0 0 2px var(--bevel-light),0 4px 0 var(--bevel-dark);}
.btn--ghost:active{transform:translateY(3px);box-shadow:inset 0 0 0 2px var(--bevel-light),0 1px 0 var(--bevel-dark)}

/* ---- panel / card ---- */
.panel{background:var(--bg-2);border-radius:4px;
  box-shadow:inset 2px 2px 0 var(--bevel-light),inset -2px -2px 0 var(--bevel-dark),
    0 2px 0 var(--bevel-dark),0 6px 18px rgba(0,0,0,.35)}

/* ---- pill ---- */
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--bg-3);border-radius:3px;
  padding:5px 11px;font:600 12px/1 var(--font-display);letter-spacing:.4px;color:var(--tx-mut);
  text-transform:uppercase;box-shadow:inset 1px 1px 0 var(--bevel-light),inset -1px -1px 0 var(--bevel-dark)}
.sq-dot{width:9px;height:9px;background:var(--ok);border-radius:1px;box-shadow:0 0 8px var(--ok)}
.sq-dot.pulse{animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}

/* ---- header ---- */
header.nav{position:sticky;top:0;z-index:50;height:72px;display:flex;align-items:center;
  background:color-mix(in srgb,var(--bg-0) 92%,transparent);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bevel-dark);transition:height .2s,box-shadow .2s}
header.nav.shrink{height:60px;box-shadow:0 6px 24px rgba(0,0,0,.5)}
header.nav .wrap{display:flex;align-items:center;gap:20px;width:100%}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-logo);font-size:16px;
  color:var(--green-400);text-shadow:2px 2px 0 var(--green-700)}
.logo .glyph{width:30px;height:30px;image-rendering:pixelated;flex:none}
nav.links{display:flex;gap:22px;margin-left:8px}
nav.links a{font:600 14px/1 var(--font-display);color:var(--tx-mut);padding:6px 0;position:relative}
nav.links a:hover{color:var(--tx-hi)}
nav.links a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;
  background:var(--green-500);transition:right .12s}
nav.links a:hover::after{right:0}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}

/* ---- hero ---- */
.hero{min-height:88vh;display:flex;align-items:center;overflow:hidden;
  background:radial-gradient(120% 90% at 78% 60%,rgba(125,255,77,.08),transparent 60%)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;
  width:100%;position:relative;z-index:2}
.hero .col-text{padding:40px 0}
.eyebrow{margin-bottom:18px}
.hero-title{font-family:var(--font-logo);font-size:clamp(36px,6.5vw,76px);line-height:1.05;
  color:var(--tx-hi);text-shadow:2px 2px 0 var(--green-600),4px 4px 0 var(--green-700),0 6px 14px rgba(0,0,0,.6);
  image-rendering:pixelated;margin:6px 0 14px}
.hero-sub{font-family:var(--font-display);font-size:clamp(18px,2.4vw,26px);color:var(--green-400);margin-bottom:14px}
.hero-lead{color:var(--tx-mut);max-width:44ch;margin-bottom:26px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.hero-strip{display:flex;gap:22px;flex-wrap:wrap;color:var(--tx-mut);font-size:14px}
.hero-strip b{color:var(--tx-hi);font-family:var(--font-mono)}
.col-char{position:relative;min-height:520px;align-self:end}
.hero-char-wrap{position:absolute;right:clamp(-20px,2vw,40px);bottom:-4px;width:min(46vw,560px);
  will-change:transform}
.hero-char{width:100%;image-rendering:auto;
  filter:drop-shadow(0 24px 22px rgba(0,0,0,.55));animation:bob 4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.char-glow{position:absolute;left:50%;top:38%;width:70%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(125,255,77,.22),transparent 65%);filter:blur(8px);z-index:-1}
.char-platform{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  width:62%;height:26px;background:radial-gradient(50% 100% at 50% 0,rgba(0,0,0,.55),transparent 70%)}

/* hero ambient layers */
.hero-clouds,.hero-particles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.cloud{position:absolute;background:#e9f1ff;opacity:.10;image-rendering:pixelated;
  box-shadow:16px 0 0 #e9f1ff,32px 0 0 #e9f1ff,16px -12px 0 #e9f1ff,-16px 0 0 #e9f1ff}
.particle{position:absolute;width:8px;height:8px;background:var(--green-500);opacity:.5;border-radius:1px}

/* ---- section heading ---- */
.sec-head{text-align:center;margin:0 auto 34px;max-width:640px;padding-top:56px}
.sec-head h2{font-size:clamp(26px,4vw,40px);margin-bottom:10px}
.sec-head p{color:var(--tx-mut)}
.sec-pad{padding-bottom:64px}

/* ---- features ---- */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.feat{padding:22px 18px;text-align:center}
.feat canvas,.feat .ico{width:48px;height:48px;margin:0 auto 12px;image-rendering:pixelated}
.feat h3{font-size:16px;margin-bottom:6px}
.feat p{color:var(--tx-mut);font-size:14px;margin:0}
.feat{transition:transform .1s,filter .12s}
.feat:hover{transform:translateY(-3px);filter:brightness(1.08)}

/* ---- live map ---- */
.map-frame{position:relative;background:var(--bg-3);padding:12px;border-radius:5px;
  box-shadow:inset 2px 2px 0 var(--bevel-light),inset -2px -2px 0 var(--bevel-dark),0 10px 30px rgba(0,0,0,.5)}
.map-inset{position:relative;background:var(--bg-inset);border-radius:3px;overflow:hidden;
  aspect-ratio:16/9;min-height:520px}
.map-inset iframe{width:100%;height:100%;border:0;display:block}
.map-overlay{position:absolute;inset:0;pointer-events:none;padding:14px;
  display:flex;flex-direction:column;justify-content:space-between}
.map-overlay .row{display:flex;justify-content:space-between}
.map-chat{pointer-events:none;max-width:340px;background:rgba(10,14,20,.72);border-radius:4px;
  padding:8px 10px;font-size:12.5px;line-height:1.5;
  box-shadow:inset 1px 1px 0 var(--bevel-light),inset -1px -1px 0 var(--bevel-dark)}
.map-chat .cl{opacity:0;animation:fadein .5s forwards}
.map-chat .who{color:var(--diamond);font-weight:700}
@keyframes fadein{to{opacity:1}}
.map-overlay .pill,.map-overlay .btn{pointer-events:auto}
.hotspots{display:flex;gap:8px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.chip{cursor:pointer;background:var(--bg-2);border-radius:3px;padding:6px 12px;font-size:13px;
  color:var(--tx-mut);box-shadow:inset 1px 1px 0 var(--bevel-light),inset -1px -1px 0 var(--bevel-dark)}
.chip:hover{color:var(--tx-hi)}

/* ---- store tiers ---- */
.tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.tier{position:relative;padding:26px 22px 24px;text-align:center;border-top:4px solid var(--green-500);
  display:flex;flex-direction:column;transition:transform .12s,filter .12s}
.tier[data-accent=diamond]{border-top-color:var(--diamond)}
.tier[data-accent=amethyst]{border-top-color:var(--amethyst)}
.tier[data-accent=gold]{border-top-color:var(--gold)}
.tier:hover{transform:translateY(-4px);filter:brightness(1.06)}
.tier.popular{transform:scale(1.04);box-shadow:inset 2px 2px 0 var(--bevel-light),
  inset -2px -2px 0 var(--bevel-dark),0 0 0 2px var(--gold),0 10px 30px rgba(255,176,46,.18)}
.tier.popular:hover{transform:scale(1.04) translateY(-4px)}
.tier__ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--gold);color:#2a1c00;font:700 12px/1 var(--font-display);letter-spacing:.5px;
  padding:6px 14px;border-radius:3px;box-shadow:0 3px 0 #b97e12}
.tier canvas.gem{width:56px;height:56px;margin:0 auto 12px;image-rendering:pixelated}
.tier h3{font-size:22px;margin-bottom:8px}
.tier .price{font-family:var(--font-display);font-size:34px;line-height:1;color:var(--tx-hi);margin-bottom:2px}
.tier .price .cur{color:var(--gold)}
.tier .price-sub{color:var(--tx-mut);font-size:13px;margin-bottom:16px}
.perks{list-style:none;margin:0 0 20px;padding:0;text-align:left;flex:1}
.perks li{display:flex;gap:9px;align-items:flex-start;padding:5px 0;font-size:14px;color:var(--tx)}
.perks .ck{width:18px;height:18px;flex:none;background:var(--green-500);border-radius:2px;
  position:relative;margin-top:1px;box-shadow:inset 1px 1px 0 var(--green-400),inset -1px -1px 0 var(--green-700)}
.perks .ck::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.store-trust{text-align:center;color:var(--tx-mut);font-size:13px;margin-top:26px}

/* ---- stats band ---- */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:44px 0}
.stat-b{text-align:center;padding:16px}
.stat-b .num{font-family:var(--font-display);font-size:clamp(28px,3.4vw,42px);color:var(--tx-hi);line-height:1}
.stat-b .lab{color:var(--tx-mut);font-size:13px;margin-top:6px;text-transform:uppercase;letter-spacing:.5px}

/* ---- gallery ---- */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gal{position:relative;overflow:hidden;padding:0}
.gal canvas{display:block;width:100%;aspect-ratio:4/3!important;object-fit:contain;
  image-rendering:pixelated;background:var(--bg-inset);padding:14px}
.gal .cap{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;
  background:linear-gradient(transparent,rgba(10,14,20,.9));display:flex;justify-content:space-between;
  align-items:center;transform:translateY(6px);opacity:.85;transition:.15s}
.gal:hover .cap{transform:translateY(0);opacity:1}
.gal:hover canvas{transform:rotate(1deg) scale(1.03);transition:.2s}
.gal .cap b{font-size:14px;color:var(--tx-hi)}
.gal .cap .co{font-family:var(--font-mono);font-size:12px;color:var(--diamond)}

/* ---- staff ---- */
.staff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px}
.staff{text-align:center;padding:20px 14px}
.staff .head{width:64px;height:64px;margin:0 auto 10px;image-rendering:pixelated;border-radius:3px}
.staff .nick{font-family:var(--font-display);color:var(--tx-hi);font-size:16px}
.role{display:inline-block;margin-top:6px;font:600 11px/1 var(--font-display);text-transform:uppercase;
  padding:4px 9px;border-radius:3px;letter-spacing:.4px}
.role.owner{background:rgba(255,176,46,.16);color:var(--gold)}
.role.admin{background:rgba(229,67,59,.16);color:var(--redstone)}
.role.mod{background:rgba(58,214,224,.16);color:var(--diamond)}
.role.helper{background:rgba(93,176,47,.18);color:var(--green-400)}
.discord-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:26px 28px;flex-wrap:wrap}
.discord-cta h3{font-size:22px}

/* ---- ticker ---- */
.ticker{position:relative;height:42px;overflow:hidden;background:var(--bg-inset);
  box-shadow:inset 0 2px 0 var(--bevel-dark),inset 0 -2px 0 var(--bevel-dark)}
.ticker-track{display:flex;gap:34px;align-items:center;height:100%;white-space:nowrap;
  will-change:transform;animation:scroll 42s linear infinite;padding-left:100%}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.tk{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--tx-mut)}
.tk .hd{width:22px;height:22px;image-rendering:pixelated;border-radius:2px}
.tk b{color:var(--tx-hi)}
.tk.join b{color:var(--green-400)} .tk.purchase b{color:var(--gold)}

/* ---- footer ---- */
footer.foot{background:var(--bg-inset);padding:40px 0 0;position:relative;margin-top:0}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;padding-bottom:32px}
.foot h4{font-family:var(--font-display);color:var(--tx-hi);font-size:15px;margin:0 0 12px}
.foot a{display:block;color:var(--tx-mut);padding:4px 0;font-size:14px}
.foot a:hover{color:var(--tx-hi)}
.foot-bottom{border-top:1px solid var(--line-soft);padding:16px 0;color:var(--tx-dim);font-size:12.5px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.terrain{height:22px;background:
  linear-gradient(var(--green-500) 0 8px,var(--green-600) 8px 11px,var(--dirt) 11px 100%);
  image-rendering:pixelated;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 14px,transparent 14px 16px,#000 16px 30px);
  mask:none}

/* ---- toast ---- */
.toast-host{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:100;
  display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{padding:12px 18px;border-left:4px solid var(--green-500);font-size:14px;color:var(--tx-hi);
  animation:tup .25s}
@keyframes tup{from{transform:translateY(14px);opacity:0}}

/* ---- copy IP field ---- */
.ip-field{display:inline-flex;align-items:center;gap:0;border-radius:3px;overflow:hidden}
.ip-field .ip{background:var(--bg-inset);font-family:var(--font-mono);color:var(--tx);padding:11px 14px;
  box-shadow:inset 1px 1px 0 var(--bevel-light),inset -1px -1px 0 var(--bevel-dark);font-size:14px}

/* ---- responsive ---- */
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .col-char{min-height:280px;order:-1}
  .hero-char-wrap{position:relative;right:auto;bottom:auto;width:min(70vw,340px);margin:0 auto}
  nav.links{display:none}
  .feat-grid,.tier-grid,.stats-grid,.staff-grid{grid-template-columns:repeat(2,1fr)}
  .gal-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .feat-grid,.tier-grid,.gal-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}