:root{
  --bg:#0b0d12; --bg2:#11141c; --card:#161a24; --line:#232838;
  --text:#e7ebf3; --muted:#9aa3b8;
  --green:#4ade80; --green2:#16a34a; --amber:#fb923c; --red:#ef4444; --sky:#7dd3fc;
  --pixel:'Press Start 2P', ui-monospace, Consolas, monospace;
  --sans:'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:radial-gradient(1200px 600px at 50% -10%, #1a2030 0%, var(--bg) 55%) fixed;
  color:var(--text); font-family:var(--sans); line-height:1.65; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
.wrap{max-width:1120px; margin:0 auto; padding:0 20px}
.narrow{max-width:900px}

/* Hero */
header{padding:74px 0 30px; text-align:center}
.brand{
  font-family:var(--pixel); font-weight:400; line-height:1.4;
  font-size:clamp(20px,4.4vw,44px); letter-spacing:.02em;
  background:linear-gradient(90deg,#7dd3fc,#a78bfa,#f0abfc);
  -webkit-background-clip:text; background-clip:text; color:transparent; margin:0;
}
.brand.sm{font-size:clamp(18px,3.6vw,34px)}
.tag{color:var(--muted); font-size:clamp(15px,2.2vw,20px); margin-top:20px}
.tag b{color:var(--text); font-weight:700}
.eyebrow{font-family:var(--pixel); font-size:11px; letter-spacing:.06em; margin:0 0 14px}
.eyebrow.green{color:var(--green)} .eyebrow.amber{color:var(--amber)}

/* Back link */
.back{display:inline-flex; gap:8px; align-items:center; color:var(--muted); font-size:14px; margin:26px 0 0}
.back:hover{color:var(--text)}

/* Home world cards */
.worlds{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:38px 0 10px}
@media(max-width:820px){ .worlds{grid-template-columns:1fr} header{padding-top:52px} }
.card{position:relative; display:block; background:linear-gradient(180deg,var(--card),#12151d);
  border:1px solid var(--line); border-radius:20px; padding:30px 28px; overflow:hidden;
  transition:border-color .18s, transform .18s}
.card:hover{border-color:#38405a; transform:translateY(-3px)}
.card::before{content:""; position:absolute; inset:0 0 auto 0; height:4px}
.card.build::before{background:linear-gradient(90deg,var(--green),var(--green2))}
.card.mmo::before{background:linear-gradient(90deg,var(--amber),var(--red))}
.emoji{font-size:44px; line-height:1}
.kicker{font-family:var(--pixel); font-size:12px; margin:18px 0 12px}
.build .kicker{color:var(--green)} .mmo .kicker{color:var(--amber)}
.card h2{margin:0 0 8px; font-size:26px; font-weight:800}
.lead{color:var(--muted); margin:0 0 18px}
.mini{list-style:none; margin:0 0 20px; padding:0; color:var(--muted); font-size:15px}
.mini li{padding:4px 0}
.enter{font-weight:700}
.build .enter{color:var(--green)} .mmo .enter{color:var(--amber)}

.badge{position:absolute; top:20px; right:20px; font-family:var(--pixel); font-size:9px;
  color:#0b0d12; background:linear-gradient(90deg,var(--amber),#f59e0b); padding:7px 10px; border-radius:999px}

/* World page sections */
.hero2{text-align:center; padding:70px 0 10px}
.hero2 h1{font-family:var(--pixel); font-size:clamp(22px,4.4vw,40px); margin:0; line-height:1.35}
.hero2 h1.g{background:linear-gradient(90deg,#86efac,#22c55e);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero2 h1.a{background:linear-gradient(90deg,#fdba74,#ef4444);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero2 .sub{color:var(--muted); font-size:clamp(16px,2.4vw,21px); margin-top:22px}
.intro{color:#c7cede; font-size:18px; margin:30px auto 8px; max-width:760px; text-align:center}
.lede{max-width:720px; margin:32px auto 12px}
.lede p{margin:0 0 16px; color:#c3cad9; font-size:17px}
.lede p:last-child{margin-bottom:0}
.lede p.big{font-size:21px; line-height:1.5; color:#eef1f7; font-weight:600}
.lede.g p.big{color:#bbf7d0} .lede.a p.big{color:#fed7aa}

.note{display:flex; gap:10px; align-items:flex-start; margin:24px auto; max-width:760px;
  background:rgba(251,146,60,.09); border:1px solid rgba(251,146,60,.28);
  border-radius:12px; padding:14px 16px; font-size:15px; color:#fcd9b6}
.note b{color:#fdba74}

.features{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:34px 0}
@media(max-width:760px){ .features{grid-template-columns:1fr} }
.feat{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px}
.feat .fi{font-size:26px}
.feat h3{margin:12px 0 6px; font-size:19px}
.feat p{margin:0; color:var(--muted); font-size:15px}

.cmds{background:var(--bg2); border:1px solid var(--line); border-radius:16px; padding:22px 24px; margin:14px 0 30px}
.cmds h3{margin:0 0 14px; font-size:18px}
.cmd{display:flex; gap:14px; align-items:baseline; padding:8px 0; border-top:1px solid var(--line); flex-wrap:wrap}
.cmd:first-of-type{border-top:0}
.cmd code{font-family:ui-monospace,Consolas,monospace; background:#060810; border:1px solid var(--line);
  border-radius:8px; padding:5px 10px; color:var(--sky); font-weight:700; white-space:nowrap}
.cmd span{color:var(--muted); font-size:15px}

.join{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center;
  background:#0e1119; border:1px solid var(--line); border-radius:16px; padding:16px 18px; margin:8px auto 0; max-width:520px}
.join .lbl{font-family:var(--pixel); font-size:11px; color:var(--muted)}
.join code{font-family:ui-monospace,Consolas,monospace; font-size:18px; font-weight:700;
  background:#060810; border:1px solid var(--line); border-radius:8px; padding:8px 14px}
.build-accent code{color:var(--green)} .mmo-accent code{color:var(--amber)}

/* How to join steps */
.how{margin:44px 0 20px; background:var(--bg2); border:1px solid var(--line); border-radius:20px; padding:28px}
.how h3{margin:0 0 18px; font-size:20px}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media(max-width:820px){ .steps{grid-template-columns:1fr 1fr} }
.step{background:#0e1119; border:1px solid var(--line); border-radius:14px; padding:16px}
.step .n{font-family:var(--pixel); font-size:10px; color:var(--sky)}
.step p{margin:8px 0 0; color:var(--muted); font-size:14px}
.step p b{color:var(--text)}

/* Waitlist form */
.waitlist{max-width:520px; margin:10px auto 0; background:#0e1119; border:1px solid var(--line); border-radius:16px; padding:24px}
.waitlist h3{margin:0 0 6px; font-size:19px}
.wl-lead{margin:0 0 16px; color:var(--muted); font-size:15px}
#wlform{display:flex; flex-direction:column; gap:10px}
#wlform input, #wlform textarea{background:#060810; border:1px solid var(--line); border-radius:10px; padding:11px 13px; color:var(--text); font:inherit; resize:vertical}
#wlform input::placeholder, #wlform textarea::placeholder{color:#6b7488}
#wlform input:focus, #wlform textarea:focus{outline:0; border-color:var(--amber)}
#wlform .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
#wlform button{margin-top:4px; background:linear-gradient(90deg,var(--amber),#f59e0b); color:#0b0d12; font-weight:800; border:0; border-radius:10px; padding:13px; cursor:pointer; font-size:15px}
#wlform button:disabled{opacity:.6; cursor:default}
.wl-msg{margin:14px 0 0; font-size:15px}
.wl-msg.ok{color:var(--green)} .wl-msg.err{color:#fca5a5}

footer{color:#6b7488; text-align:center; padding:34px 0 50px; font-size:13px}
footer .dot{opacity:.5; margin:0 8px}
footer a:hover{color:var(--text)}


/* Survival accent */
.eyebrow.red{color:var(--red)}
.card.surv::before{background:linear-gradient(90deg,#f87171,#b91c1c)}
.surv .kicker{color:#f87171} .surv .enter{color:#f87171}
.hero2 h1.r{background:linear-gradient(90deg,#fca5a5,#dc2626);-webkit-background-clip:text;background-clip:text;color:transparent}
.surv-accent code{color:#f87171}

/* The Cataclysm Arena — storm/violet accent */
.card.cata::before{background:linear-gradient(90deg,#a78bfa,#6d28d9)}
.cata .kicker{color:#a78bfa} .cata .enter{color:#a78bfa}
.eyebrow.violet{color:#a78bfa}
.cata-accent code{color:#a78bfa}