@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
:root{
  --bg:#07090f;
  --panel:#0c111b;
  --muted:#a9b6d3;
  --text:#e9f1ff;
  --solana-1:#9945FF;
  --solana-2:#14F195;
  --solana-3:#00D18C;
  --accent:#2EF2BF;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(153,69,255,.25), transparent 60%),
              radial-gradient(900px 500px at 110% 10%, rgba(20,241,149,.18), transparent 60%),
              linear-gradient(180deg, #080b12, #05070b 60%);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.5;
}
.container{max-width:1080px;margin:0 auto;padding:28px 20px}
.neon{color:var(--accent);text-shadow:0 0 12px rgba(46,242,191,.45),0 0 28px rgba(46,242,191,.25)}
.arcade{font-family: 'Press Start 2P', ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; letter-spacing:1px}
.mono{font-family: ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:transparent;color:var(--text);text-decoration:none;transition:.25s transform, .25s border-color}
.btn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.35)}
.btn.play{border-color:var(--accent); box-shadow:0 0 0 2px rgba(46,242,191,.25) inset}
.header{display:flex;justify-content:space-between;align-items:center;gap:16px}
.logo{display:flex;align-items:center;gap:14px}
.logo .dot{width:40px;height:40px;border-radius:50%;background:linear-gradient(145deg,#d6d9e1,#9ca3af);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.logo .name{font-weight:900;letter-spacing:.08em}
.socials{display:flex;align-items:center;gap:18px}
.soc{display:flex;flex-direction:column;align-items:center;gap:6px}
.soc .ball{width:22px;height:22px;border-radius:50%;background:linear-gradient(145deg,#d6d9e1,#9ca3af)}
.soc small{color:var(--muted);font-size:12px}
.hero{padding:40px 0 10px;text-align:center}
.hero h1{font-size:62px;margin:16px 0 10px;color:#ff3b3b;text-shadow:0 0 18px rgba(255,59,59,.35)}
.hero p{margin:0 auto;color:#cfd8f4;max-width:720px}
.metric{margin:26px auto 10px; font-size:34px;font-weight:900}
.ca{display:flex;gap:10px;justify-content:center;align-items:center;margin:12px 0 32px}
.ca label{font-weight:900;margin-right:8px}
.ca .field{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px 10px;min-width:340px}
.ca input{background:transparent;border:0;outline:0;color:var(--text);font-family:inherit;width:100%;letter-spacing:.04em}
.stage{display:flex;flex-direction:column;align-items:center;gap:20px;margin:10px auto 34px}
.card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px}
.play-wrap{margin-top:10px}
.top3{margin:16px auto 10px;max-width:520px;text-align:center}
.top3 h3{letter-spacing:.12em;color:#5cc0ff;text-shadow:0 0 14px rgba(92,192,255,.35)}
.top3list{list-style:none;padding:0;margin:12px auto 0;max-width:520px}
.top3list li{padding:8px 12px;border-radius:8px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);color:#daf2ff;margin:8px 0}
.top3 pre{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:16px 20px;text-align:left;color:#daf2ff}
.section{padding:34px 0 12px}

.roadmap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.phase{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:18px}
.phase h4{color:var(--accent);font-size:22px;margin:4px 0 8px;text-align:center}
.phase ul{list-style:disc;margin:6px 0 4px 18px;color:#dfe8ff}
.disclaimer{max-width:820px;margin:22px auto 28px;color:#d7def4;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px 20px;text-align:center}
.footer{display:flex;justify-content:center;gap:26px;margin:28px 0 20px}
hr.sep{border:0;height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);margin:28px 0}
@media (max-width:880px){
  .hero h1{font-size:46px}
  .metric{font-size:28px}
  .roadmap{grid-template-columns:1fr}
  .ca .field{min-width:0;width:100%}
}


@keyframes cartridgeBounce{
  0%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-8px) rotate(-0.4deg); }
  100%{ transform: translateY(0) rotate(0deg); }
}
.cartridge{ animation: cartridgeBounce 2.2s ease-in-out infinite; will-change: transform; }

.soc .icon{ width:22px; height:22px; display:block; object-fit:contain; border-radius:4px }
.soc .ball{ display:none }

/* VT323 theme */

/* --- RPH arcade theme boost --- */
html{ font-size:18px; }
@media (max-width:640px){ html{ font-size:16.5px; } }
body{ color:var(--ink); background: radial-gradient(1200px 600px at 50% -10%, #20103a 0%, transparent 70%), linear-gradient(180deg, var(--bg2), var(--bg1)); position:relative; }
body::before{ content:""; position:fixed; inset:0; background-image: linear-gradient(transparent 0, rgba(255,255,255,.02) 2px, transparent 4px), radial-gradient(1000px 200px at 50% -120px, rgba(255,77,103,.08), transparent 40%); background-size: 100% 6px, auto; pointer-events:none; z-index:-1; }

.header .name{ font-size:1.4rem; letter-spacing:1px; }
.hero h1{ font-size: clamp(3rem, 7vw, 6rem); line-height:1; text-shadow: 0 0 2px #fff, 0 0 24px var(--pink), 0 0 64px var(--pink); }
.hero p{ font-size:1.25rem; color:var(--muted); }

.btn{ font-size:1.35rem; padding:14px 28px; border-radius:14px; border:2px solid var(--mint);
  background: linear-gradient(180deg, #0e1626, #0a111d);
  box-shadow: inset 0 0 24px rgba(44,254,193,.25), 0 0 18px rgba(44,254,193,.18);
  transition: transform .14s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: inset 0 0 28px rgba(44,254,193,.35), 0 10px 24px rgba(0,0,0,.4), 0 0 28px rgba(44,254,193,.25); }
.btn.play{ animation: rphPulse 2.6s ease-out infinite; }
@keyframes rphPulse{ 0%{ box-shadow: 0 0 0 0 rgba(44,254,193,.55);} 70%{ box-shadow: 0 0 0 16px rgba(44,254,193,0);} 100%{ box-shadow: 0 0 0 0 rgba(44,254,193,0);} }

.card{ background: rgba(13,20,28,.66); border:1px solid #1f2a3a; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.stage .metric{ font-size:1.25rem; }
.top3list li{ font-size:1.1rem; }

.ca .field input{ font-size:1.05rem; }
.ca label{ font-size:1.1rem; }

/* Cartridge sizing */
.cartridge-wrap{ margin: 18px 0 12px; }
.cartridge{ max-width: 380px; width: min(54vw, 380px); }

body, h1, h2, h3, h4, .header .name, .btn, .mono { font-family: 'VT323', ui-monospace, Menlo, Consolas, monospace; }
h1 { letter-spacing: 1px; }
.header .name { letter-spacing: 1px; }

.cartridge-wrap{ display:flex; justify-content:center; align-items:center; margin: 16px 0 10px; }
.cartridge{ max-width: 340px; width: 48vw; }


/* === Parallax starfield (canvas layers injected by JS) === */
.star-layer{ position:fixed; inset:0; pointer-events:none; z-index:-3; }

/* === Pixel-style buttons === */
.btn.pixel{
  border-radius: 0;
  border: 2px solid var(--mint);
  background: #0e1626;
  box-shadow:
    0 0 0 2px #0a111d inset,
    0 0 0 2px var(--mint),
    4px 4px 0 0 rgba(0,0,0,.55);
  image-rendering: pixelated;
}
.btn.pixel:hover{
  transform: translate(-1px,-1px);
  box-shadow:
    0 0 0 2px #0a111d inset,
    0 0 0 2px var(--mint),
    6px 6px 0 0 rgba(0,0,0,.6);
}

/* === Light content cards for readability === */
.section .card, .roadmap .phase, .legal.card{
  background:#ffffff;
  color:#111827;
  border:1px solid #E5E7EB;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.card .muted{ color:#4B5563; }


/* === High-contrast readable cards === */
:root{ --paper:#ffffff; --inkDark:#0b0f1a; --inkMuted:#1f2937; --pixelEdge:#111; }

.section .card, .roadmap .phase, .legal.card{
  background: var(--paper);
  color: var(--inkDark);
  border: 0;
  border-radius: 0;
  image-rendering: pixelated;
  /* heavy 8‑bit stepped border */
  box-shadow:
    0 0 0 4px var(--pixelEdge) inset,
    8px 8px 0 0 rgba(0,0,0,.55);
}
.section .card h4, .section .card h3, .section .card p, .roadmap .phase li { color: var(--inkDark); }
.card .muted{ color: var(--inkMuted); }

/* heavier 8‑bit buttons */
.btn.pixel{
  border-radius: 0;
  border: 4px solid var(--mint);
  background: #0e1626;
  box-shadow:
    0 0 0 4px #0a111d inset,
    0 0 0 4px var(--mint),
    8px 8px 0 0 rgba(0,0,0,.6);
}
.btn.pixel:hover{ transform: translate(-2px,-2px); box-shadow:
    0 0 0 4px #0a111d inset,
    0 0 0 4px var(--mint),
    10px 10px 0 0 rgba(0,0,0,.65); }

/* readable list items & links on light cards */
.section .card a{ color:#0b57d0; text-decoration: underline; }
.top3list li{ color: var(--inkDark); }


/* === High-contrast section titles on light background === */
.section h2{
  color: var(--inkDark) !important;
  text-shadow: none !important;
  filter: none !important;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  margin: 0 0 14px;
}
.roadmap h4{
  color: var(--inkDark) !important;
  text-shadow: none !important;
  filter: none !important;
  font-size: 1.2rem;
  margin: 0 0 8px;
}


/* === Solana 8‑bit theme === */
:root{
  --bg1:#0b0f1a; --bg2:#141026;
  --ink:#EAF1FF; --muted:#9fb3d9;
  --paper:#FFFFFF; --inkDark:#0b0f1a; --inkMuted:#1f2937; --pixelEdge:#111;
  --solPurple:#9945FF; --solMint:#14F195; --solBlue:#19FB9B;
}
body, h1, h2, h3, h4, .header .name, .btn, .mono { font-family: 'VT323', ui-monospace, Menlo, Consolas, monospace; }
body{
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(153,69,255,.16) 0%, transparent 60%),
    radial-gradient(900px 400px at 15% 10%, rgba(20,241,149,.12) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg2), var(--bg1));
}
.hero h1{
  font-size: clamp(3.1rem, 7.2vw, 6.2rem);
  line-height:1;
  background: linear-gradient(90deg, var(--solPurple), var(--solMint), var(--solBlue));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.section h2{
  color: var(--inkDark) !important; text-shadow:none !important; filter:none !important;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin:0 0 10px;
}
.section h2::after{
  content:""; display:block; height:6px; width:180px; margin-top:8px;
  background: linear-gradient(90deg, var(--solPurple), var(--solMint), var(--solBlue));
  box-shadow: 4px 4px 0 rgba(0,0,0,.55); image-rendering: pixelated;
}
.section .card, .roadmap .phase, .legal.card{
  background: var(--paper); color: var(--inkDark);
  border:0; border-radius:0; image-rendering: pixelated;
  box-shadow: 0 0 0 4px var(--pixelEdge) inset, 8px 8px 0 rgba(0,0,0,.55);
}
.card .muted{ color: var(--inkMuted); }
.btn.pixel{
  border-radius:0; border:4px solid var(--solMint); background:#0e1626; color:#EAF1FF;
  box-shadow: 0 0 0 4px #0a111d inset, 0 0 0 4px var(--solMint), 8px 8px 0 rgba(0,0,0,.6);
}
.btn.pixel:hover{ transform: translate(-2px,-2px); box-shadow:
  0 0 0 4px #0a111d inset, 0 0 0 4px var(--solMint), 10px 10px 0 rgba(0,0,0,.65); }
.btn.play{ animation: solPulse 2.8s ease-out infinite; }
@keyframes solPulse{
  0%{ box-shadow: 0 0 0 0 rgba(20,241,149,.6), 8px 8px 0 rgba(0,0,0,.6); }
  60%{ box-shadow: 0 0 0 18px rgba(20,241,149,0), 8px 8px 0 rgba(0,0,0,.6); }
  100%{ box-shadow: 0 0 0 0 rgba(20,241,149,0), 8px 8px 0 rgba(0,0,0,.6); }
}
.section .card a{ color:#0b57d0; text-decoration: underline; }
.stage .metric{ font-size:1.25rem; }
.top3list li{ font-size:1.1rem; color: var(--inkDark); }