/* ===========================================================
   PIXEL DUNGEON — landing. Dark pixel style, torches, $DUNGEON.
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root{
  --bg:#0a0a0f; --bg2:#12121b; --panel:#1b1a26; --panel-line:#2e2c40;
  --ink:#e8e2d0; --muted:#8a86a0; --gold:#f2c14e; --gold-dk:#b8860b;
  --blood:#c0392b; --green:#6abf4b; --mana:#4aa3df;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1200px 600px at 50% -10%, #1a1730 0%, transparent 60%),
    repeating-linear-gradient(0deg, #0b0b12 0 2px, #0a0a0f 2px 4px),
    var(--bg);
  color:var(--ink);
  font-family:'Press Start 2P', ui-monospace, 'Courier New', monospace;
  line-height:1.9; image-rendering:pixelated; overflow-x:hidden;
}
img,canvas{image-rendering:pixelated}

body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.15) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
.vignette{position:fixed; inset:0; pointer-events:none; z-index:9998; box-shadow:inset 0 0 220px 60px #000}

.wrap{max-width:1000px; margin:0 auto; padding:0 20px}

/* ---------- NAV ---------- */
nav{position:sticky; top:0; z-index:100;
  background:linear-gradient(#15131f, #0d0c14); border-bottom:3px solid var(--panel-line); box-shadow:0 4px 0 #000}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
nav .brand{display:flex; align-items:center; gap:12px; font-size:11px; color:var(--gold)}
nav .brand img{width:32px; height:32px}
nav ul{display:flex; gap:20px; list-style:none; align-items:center}
nav a{color:var(--muted); text-decoration:none; font-size:9px; transition:color .15s}
nav a:hover{color:var(--gold)}
nav a.navplay{color:#1a1206; background:var(--gold); padding:8px 12px; box-shadow:0 3px 0 #6e4e06}
@media(max-width:720px){ nav ul li:not(:last-child){display:none} }

/* ---------- HERO ---------- */
.hero{text-align:center; padding:80px 20px 50px; position:relative}
.hero h1{
  font-size:clamp(26px, 7.5vw, 70px); color:var(--gold); letter-spacing:2px;
  text-shadow:4px 4px 0 #000, 0 0 24px rgba(242,193,78,.35); line-height:1.25; position:relative;
}
.glitch::before,.glitch::after{
  content:attr(data-text); position:absolute; left:0; top:0; width:100%; overflow:hidden; opacity:.7;
}
.glitch::before{color:#4aa3df; transform:translate(-3px,0); clip-path:inset(0 0 55% 0); animation:gl1 2.6s infinite linear alternate}
.glitch::after{color:#c0392b; transform:translate(3px,0); clip-path:inset(55% 0 0 0); animation:gl2 2.2s infinite linear alternate}
@keyframes gl1{0%,92%{transform:translate(-3px,0)}94%{transform:translate(2px,-2px)}100%{transform:translate(-3px,0)}}
@keyframes gl2{0%,90%{transform:translate(3px,0)}95%{transform:translate(-2px,2px)}100%{transform:translate(3px,0)}}
.hero .sub{margin:22px auto 0; max-width:600px; font-size:10px; color:var(--muted); line-height:2.2}
.torches{display:flex; justify-content:center; gap:60px; margin:20px 0 10px}
.torch{width:24px; height:24px}
.flame{width:14px; height:18px; margin:0 auto;
  background:radial-gradient(circle at 50% 70%, #fff3b0 0%, var(--gold) 35%, var(--blood) 80%);
  border-radius:50% 50% 50% 50%/ 60% 60% 40% 40%; filter:drop-shadow(0 0 14px var(--gold));
  animation:flick .25s infinite alternate}
@keyframes flick{from{transform:scale(1) translateY(0); opacity:.9}to{transform:scale(1.15,1.25) translateY(-2px); opacity:1}}
.hero-strip{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:40px; opacity:.9}
.hero-strip canvas{width:48px; height:48px; background:#0c0b12; border:2px solid var(--panel-line); padding:4px;
  animation:bobf 2s infinite ease-in-out}
.hero-strip canvas:nth-child(even){animation-delay:.3s}
@keyframes bobf{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---------- buttons ---------- */
.btn{display:inline-block; cursor:pointer; text-decoration:none; font-family:inherit; font-size:12px;
  padding:18px 34px; color:#1a1206; background:linear-gradient(var(--gold), var(--gold-dk)); border:none;
  box-shadow:0 5px 0 #6e4e06, inset 0 2px 0 #ffe9a8; text-shadow:0 1px 0 rgba(255,255,255,.4);
  transition:transform .08s, box-shadow .08s}
.btn:active{transform:translateY(4px); box-shadow:0 1px 0 #6e4e06}
.btn.ghost{background:var(--panel); color:var(--ink); box-shadow:0 5px 0 #000, inset 0 0 0 2px var(--panel-line)}
.cta{margin-top:38px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap}

/* ---------- sections ---------- */
section{padding:60px 0; border-top:2px dashed var(--panel-line)}
.section-title{font-size:18px; color:var(--gold); text-align:center; margin-bottom:14px; text-shadow:3px 3px 0 #000}
.section-lead{font-size:9px; color:var(--muted); text-align:center; max-width:640px; margin:0 auto 40px; line-height:2.3}
.sub-h{font-size:11px; color:var(--blood); text-align:center; margin:48px 0 24px; letter-spacing:2px}

/* ---------- lore ---------- */
.lore{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.lore h4{color:var(--gold); font-size:10px; margin-bottom:14px}
.lore p{font-size:9px; color:var(--ink); line-height:2.5}
.lore p .g{color:var(--gold)} .lore p .bld{color:var(--blood)}
.scroll{background:linear-gradient(#211d14, #1a1710); border:3px solid #3a3320; border-left:6px solid var(--gold-dk);
  padding:24px 26px; box-shadow:6px 6px 0 #000}

/* ---------- CA / token ---------- */
#ca{background:radial-gradient(700px 300px at 50% 0%, rgba(242,193,78,.07), transparent 70%)}
.ca-box{max-width:640px; margin:0 auto; background:linear-gradient(var(--panel),#0e0d15);
  border:3px solid var(--gold); box-shadow:0 0 0 3px #000, 0 0 40px rgba(242,193,78,.18), 8px 8px 0 #000;
  padding:26px; text-align:center}
.ca-label{font-size:8px; color:var(--muted); letter-spacing:2px}
.ca-row{display:flex; gap:12px; align-items:stretch; justify-content:center; margin:16px 0 12px; flex-wrap:wrap}
.ca-row code{flex:1; min-width:200px; background:#0c0b12; border:2px dashed var(--panel-line); color:var(--gold);
  font-family:inherit; font-size:14px; letter-spacing:3px; padding:16px; display:flex; align-items:center; justify-content:center}
.copy{font-family:inherit; font-size:10px; cursor:pointer; padding:0 22px; color:#1a1206;
  background:linear-gradient(var(--gold),var(--gold-dk)); border:none; box-shadow:0 4px 0 #6e4e06}
.copy:active{transform:translateY(3px); box-shadow:0 1px 0 #6e4e06}
.ca-note{font-size:7px; color:var(--muted); line-height:2}
.socials{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:26px}
.social{font-size:9px; text-decoration:none; color:var(--ink); background:var(--panel); border:2px solid var(--panel-line);
  padding:12px 18px; box-shadow:0 4px 0 #000; transition:border-color .12s, transform .08s}
.social:hover{border-color:var(--gold)} .social:active{transform:translateY(3px); box-shadow:0 1px 0 #000}

/* ---------- cards / classes ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px}
.card{background:linear-gradient(var(--panel), var(--bg2)); border:3px solid var(--panel-line);
  box-shadow:6px 6px 0 #000; padding:24px; text-align:center; transition:transform .12s, border-color .12s}
.card:hover{transform:translateY(-6px); border-color:var(--gold)}
.card .pic{width:100px; height:100px; margin:0 auto 16px; background:#0c0b12; border:2px solid var(--panel-line);
  display:grid; place-items:center; box-shadow:inset 0 0 20px #000}
.card .pic canvas{width:56px; height:70px}
.card h3{color:var(--gold); font-size:13px; margin-bottom:12px}
.card .role{font-size:8px; color:var(--mana); margin-bottom:14px}
.card p{font-size:8px; color:var(--muted); line-height:2.2}
.card p b{color:var(--green)}
.stats{display:flex; justify-content:center; gap:12px; margin-top:16px; font-size:8px; flex-wrap:wrap}
.stats b{color:var(--gold)}

/* ---------- bestiary ---------- */
.bestiary{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:16px}
.bestiary.boss{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.mob{background:var(--bg2); border:2px solid var(--panel-line); padding:16px 8px; text-align:center; box-shadow:4px 4px 0 #000;
  transition:transform .1s, border-color .1s}
.mob:hover{transform:translateY(-4px); border-color:var(--gold)}
.mob canvas{width:56px; height:56px}
.bestiary.boss .mob{border-color:#5b2330} .bestiary.boss .mob canvas{width:72px; height:72px}
.mob .name{font-size:8px; color:var(--ink); margin-top:10px}
.mob .lvl{font-size:7px; color:var(--blood); margin-top:5px}

/* ---------- roadmap ---------- */
.roadmap{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px}
.rm{background:linear-gradient(var(--panel),#0e0d15); border:3px solid var(--panel-line); padding:22px; box-shadow:5px 5px 0 #000}
.rm.done{border-color:var(--green)}
.rm .tag{display:inline-block; font-size:7px; padding:4px 8px; background:#2a2740; color:var(--muted); margin-bottom:14px}
.rm.done .tag{background:#16331a; color:var(--green)}
.rm h4{color:var(--gold); font-size:10px; margin-bottom:12px}
.rm p{font-size:8px; color:var(--muted); line-height:2.2}

/* ---------- footer / toast ---------- */
footer{text-align:center; padding:50px 20px; border-top:2px solid var(--panel-line); font-size:8px; color:var(--muted); line-height:2.4}
footer a{color:var(--gold); text-decoration:none}
.toast{position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(20px);
  background:#0c0b12; border:2px solid var(--gold); color:var(--gold); font-size:9px; padding:14px 22px;
  opacity:0; pointer-events:none; transition:.2s; z-index:200}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

.pulse{animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}