/* ===== DUMBI // retro CRT re-theme ===== */
@font-face{font-family:"Press Start 2P";src:url("assets/fonts/pressstart.woff2") format("woff2");font-display:swap}
@font-face{font-family:"VT323";src:url("assets/fonts/vt323.woff2") format("woff2");font-display:swap}

:root{
  --bg:#141519;
  --bg2:#1a1c22;
  --panel:#1c1e24;
  --panel2:#22252c;
  --line:#2c3038;
  --line2:#3a3f49;
  --text:#d9dde3;
  --muted:#7e8794;
  --green:#ccff00;
  --green-d:#8fb800;
  --cyan:#8fd9e6;
  --cyan2:#6fb7c8;
  --blue:#93c9d6;
  --red:#c0392b;
  --pixel:"Press Start 2P",ui-monospace,monospace;
  --mono:"VT323",ui-monospace,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--mono);font-size:21px;line-height:1.35;
  -webkit-font-smoothing:none;text-rendering:optimizeSpeed;
  overflow-x:hidden;
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 2px,transparent 2px 4px);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--green);color:#06210d}

/* pixel utility */
.pix{font-family:var(--pixel)}
.c-cyan{color:var(--cyan)}
.c-cyan2{color:var(--cyan2)}
.c-green{color:var(--green)}

/* ===== TICKER ===== */
.ticker{border-bottom:1px solid var(--line);background:#101115;overflow:hidden;white-space:nowrap}
.ticker__track{display:inline-flex;gap:2.4rem;padding:.55rem 0;font-family:var(--pixel);font-size:9px;color:var(--green);animation:scroll 26s linear infinite;will-change:transform}
.ticker__track span{letter-spacing:.06em}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== NAV ===== */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1rem;
  padding:.9rem 1.4rem;background:rgba(16,17,21,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.nav__logo{font-family:var(--pixel);font-size:15px;color:var(--cyan);text-shadow:0 0 8px rgba(143,217,230,.35)}
.nav__links{display:flex;gap:1.3rem;margin-left:auto;font-size:19px;letter-spacing:.04em}
.nav__links a{color:var(--muted);transition:color .15s,text-shadow .15s}
.nav__links a:hover{color:var(--green);text-shadow:0 0 8px rgba(204,255,0,.5)}
.nav__ca{margin-left:1.1rem}

/* ===== BUTTONS ===== */
.btn{font-family:var(--pixel);font-size:10px;letter-spacing:.04em;cursor:pointer;
  border:1px solid var(--line2);background:var(--panel2);color:var(--text);
  padding:.85em 1.1em;border-radius:2px;transition:transform .08s,box-shadow .15s,background .15s;
  box-shadow:0 3px 0 rgba(0,0,0,.5);display:inline-flex;align-items:center;gap:.5em}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.5)}
.btn--green{background:var(--green);color:#06210d;border-color:var(--green-d);box-shadow:0 3px 0 var(--green-d),0 0 14px rgba(204,255,0,.3)}
.btn--blue{background:var(--blue);color:#062028;border-color:#5f97a4;box-shadow:0 3px 0 #4f7d88}
.btn--ghost{background:var(--panel);color:var(--cyan)}

/* ===== LAYOUT ===== */
main{max-width:1120px;margin:0 auto;padding:0 1.4rem}
.section{padding:4.2rem 0 3rem;border-top:1px solid var(--line);margin-top:2rem}
.filelabel{font-family:var(--pixel);font-size:9px;color:var(--green);margin:0 0 .5rem;letter-spacing:.08em;opacity:.85}
.filelabel--center,.h2--center{text-align:center}
.h2{font-family:var(--pixel);font-size:clamp(24px,5vw,44px);margin:0 0 1.6rem;color:var(--text);
  text-shadow:3px 3px 0 rgba(0,0,0,.55);letter-spacing:.02em;line-height:1.15}
.h2--center{margin-left:auto;margin-right:auto}

/* ===== HERO ===== */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:2.4rem;align-items:center;padding:3.4rem 0 3.8rem}
.kicker{font-family:var(--pixel);font-size:9px;color:var(--muted);margin:0 0 1.1rem;letter-spacing:.1em}
.hero__title{font-family:var(--pixel);font-size:clamp(30px,6.4vw,60px);line-height:1.18;margin:0 0 1.5rem;letter-spacing:.01em}
.hero__title .c-green{text-shadow:0 0 18px rgba(204,255,0,.45),4px 4px 0 rgba(0,0,0,.5)}
.hero__title .c-cyan{text-shadow:4px 4px 0 rgba(0,0,0,.5)}
.hero__copy{font-size:22px;color:#c3c9d1;max-width:34ch;margin:0 0 1.8rem}
.hero__cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-bottom:2rem}
.memcard{font-size:18px;color:var(--muted);display:flex;align-items:center;gap:.6rem;margin:0}
.sq{width:11px;height:11px;background:var(--green);display:inline-block;box-shadow:0 0 8px var(--green)}

.hero__right{display:flex;flex-direction:column;align-items:center;gap:.8rem}
.screen{width:100%;max-width:400px;aspect-ratio:1;border:2px solid var(--line2);
  background:radial-gradient(circle at 50% 40%,#242832,#12141a 75%);
  display:flex;align-items:flex-end;justify-content:center;position:relative;overflow:hidden;
  box-shadow:inset 0 0 60px rgba(0,0,0,.7),0 0 0 6px #0d0e12,0 12px 40px rgba(0,0,0,.6)}
.screen::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 2px,transparent 2px 4px);pointer-events:none}
.screen img{width:88%;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));animation:bob 4.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.screen__tag{font-family:var(--pixel);font-size:10px;color:var(--green);border:1px solid var(--green-d);
  padding:.5em .9em;background:rgba(204,255,0,.08)}

/* ===== CARDS / THESIS ===== */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.card{border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--bg2));padding:1.4rem 1.3rem;position:relative}
.card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--green),transparent)}
.card__no{font-family:var(--pixel);font-size:9px;color:var(--green);margin:0 0 .8rem}
.card__h{font-family:var(--pixel);font-size:14px;line-height:1.4;margin:0 0 .8rem;color:var(--cyan)}
.card__p{font-size:20px;color:#b9c0c8;margin:0}

/* ===== PFP GENERATOR ===== */
.pfp{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.pfp__stage{position:sticky;top:88px}
#pfpCanvas{width:100%;aspect-ratio:1;border:2px solid var(--line2);background:#0d0e12;image-rendering:pixelated;
  box-shadow:0 0 0 6px #0d0e12,0 14px 40px rgba(0,0,0,.55)}
.pfp__buttons{display:flex;gap:.9rem;margin-top:1rem}
.pfp__buttons .btn{flex:1;justify-content:center}
.sel__label{font-family:var(--pixel);font-size:11px;color:var(--green);margin:1.4rem 0 .8rem;letter-spacing:.06em}
.sel__label:first-child{margin-top:0}
.sel{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.sel--hats{grid-template-columns:repeat(4,1fr)}
.chip{border:1px solid var(--line2);background:var(--panel);cursor:pointer;padding:0;position:relative;
  aspect-ratio:1;overflow:hidden;transition:border-color .12s,box-shadow .12s}
.chip img{width:100%;height:100%;object-fit:cover}
.chip--hat{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#15171c}
.chip--hat img{object-fit:contain;padding:14%}
.chip__cap{position:absolute;left:0;right:0;bottom:0;font-family:var(--pixel);font-size:7px;
  padding:3px 4px;background:rgba(8,9,12,.82);color:var(--muted);text-align:center;letter-spacing:.02em}
.chip.is-active{border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 0 14px rgba(204,255,0,.35)}
.chip.is-active .chip__cap{color:var(--green)}
.chip__none{font-family:var(--pixel);font-size:9px;color:var(--muted)}
.pfp__hint{font-size:19px;color:var(--muted);margin:1.4rem 0 0}
.pfp__hint--center{text-align:center;max-width:46ch;margin-left:auto;margin-right:auto}

/* ===== MEME GRID ===== */
.memegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.meme{border:1px solid var(--line2);background:#0d0e12;position:relative;overflow:hidden;aspect-ratio:1}
.meme img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.meme:hover img{transform:scale(1.05)}
.meme__cap{position:absolute;left:0;bottom:0;right:0;font-family:var(--pixel);font-size:9px;color:var(--green);
  padding:6px 8px;background:linear-gradient(0deg,rgba(8,9,12,.9),transparent)}

/* ===== ARMY BAND ===== */
.army{padding:4rem 0 3rem;border-top:1px solid var(--line);margin-top:2rem}
.army__frame{border:2px solid var(--line2);box-shadow:0 0 0 6px #0d0e12,0 14px 40px rgba(0,0,0,.5);
  background:#000;overflow:hidden}
.army__frame img{width:100%}

/* ===== ROADMAP ===== */
.stages{display:flex;flex-direction:column;gap:1rem}
.stage{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--bg2));padding:1.3rem 1.4rem}
.stage--done{border-color:var(--green-d);box-shadow:inset 0 0 22px rgba(204,255,0,.06)}
.stage__h{font-family:var(--pixel);font-size:13px;margin:0 0 .55rem;color:var(--text)}
.stage__p{font-size:19px;color:var(--muted);margin:0;max-width:64ch}
.stage__badge{font-family:var(--pixel);font-size:9px;color:var(--muted);white-space:nowrap;letter-spacing:.05em}
.stage__badge--done{color:var(--green);text-shadow:0 0 10px rgba(204,255,0,.5)}

/* ===== FOOTER ===== */
.footer{text-align:center;padding:4rem 1.4rem 3rem;border-top:1px solid var(--line);margin-top:2rem}
.footer__logo{font-family:var(--pixel);font-size:22px;color:var(--cyan);margin:0 0 1.4rem;text-shadow:0 0 14px rgba(143,217,230,.35)}
.footer__copy{font-size:20px;color:var(--muted);max-width:46ch;margin:1.6rem auto .8rem}
.footer__meta{font-family:var(--pixel);font-size:9px;color:#565e69;margin:.6rem 0 0}

/* ===== CRT overlay ===== */
.crt{position:fixed;inset:0;pointer-events:none;z-index:200;
  background:radial-gradient(ellipse at center,transparent 62%,rgba(0,0,0,.38) 100%);mix-blend-mode:multiply}

/* ===== TOAST ===== */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:300;
  font-family:var(--pixel);font-size:10px;color:#06210d;background:var(--green);
  padding:.9em 1.2em;border:1px solid var(--green-d);box-shadow:0 6px 20px rgba(0,0,0,.5);
  transition:transform .3s cubic-bezier(.2,1.3,.5,1)}
.toast.is-show{transform:translate(-50%,0)}

/* ===== RESPONSIVE ===== */
@media(max-width:860px){
  body{font-size:19px}
  .hero{grid-template-columns:1fr;gap:2rem;padding:2.4rem 0}
  .hero__right{order:-1}
  .grid3{grid-template-columns:1fr}
  .pfp{grid-template-columns:1fr;gap:1.4rem}
  .pfp__stage{position:static}
  .memegrid{grid-template-columns:repeat(2,1fr)}
  .nav__links{gap:1rem;font-size:16px}
  .nav__ca{display:none}
  .stage{flex-direction:column;align-items:flex-start;gap:.7rem}
}
@media(max-width:420px){
  .memegrid{grid-template-columns:1fr 1fr}
  .sel--hats{grid-template-columns:repeat(3,1fr)}
  .nav{padding:.7rem 1rem}
  .nav__logo{font-size:12px}
}

/* ===== reduced motion ===== */
@media(prefers-reduced-motion:reduce){
  .ticker__track{animation:none}
  .screen img{animation:none}
  *{scroll-behavior:auto}
}