/* ===========================================================
   BLUP — pixel-art crypto/stock landing site
   =========================================================== */

:root{
  --yellow:      #ffcf3c;
  --yellow-deep: #ffb703;
  --orange:      #ff8c1a;
  --brown:       #6b3f1d;
  --brown-dark:  #3d2410;
  --grass:       #4fae4f;
  --grass-dark:  #2f7d2f;
  --sky:         #7ec8ff;
  --dark:        #12102a;
  --dark2:       #1b1840;
  --panel:       #221f4a;
  --ink:         #0b0a1a;
  --paper:       #fff6de;
  --green:       #3ddc84;
  --red:         #ff5a5a;
  --pixel-border: 4px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Press Start 2P', monospace;
  background:var(--dark);
  color:var(--paper);
  overflow-x:hidden;
  image-rendering:pixelated;
}

img{ image-rendering:pixelated; max-width:100%; display:block; }

::selection{ background:var(--orange); color:var(--ink); }

/* pixel scrollbar */
::-webkit-scrollbar{ width:14px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--orange); border:3px solid var(--ink); }

/* ---------- pixel-corner utility (stepped 8-bit corners) ---------- */
.pixel-corners{
  clip-path: polygon(
    0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px)
  );
}

/* ---------- scanline overlay ---------- */
.scanlines{
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  background:repeating-linear-gradient(
    to bottom, rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 2px,
    transparent 2px, transparent 4px
  );
  mix-blend-mode:multiply;
}

/* =====================================================
   PIXEL BUTTON
   ===================================================== */
.pixel-btn{
  font-family:inherit;
  font-size:.7rem;
  color:var(--ink);
  background:var(--yellow);
  border:3px solid var(--ink);
  padding:.9em 1.1em;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .08s, box-shadow .08s;
  line-height:1.4;
}
.pixel-btn:hover{ transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink); background:var(--orange); }
.pixel-btn:active{ transform:translate(5px,5px); box-shadow:0 0 0 var(--ink); }
.pixel-btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:5px 5px 0 var(--ink); }
.pixel-btn-alt{ background:var(--dark2); color:var(--paper); }
.pixel-btn-alt:hover{ background:var(--panel); }

/* =====================================================
   PIXEL CARD
   ===================================================== */
.pixel-card{
  background:var(--panel);
  border:3px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  padding:1.4rem;
}

/* =====================================================
   LOADER
   ===================================================== */
#loader{
  position:fixed; inset:0; z-index:100;
  background:
    radial-gradient(circle at 50% 30%, #241f57 0%, var(--dark) 70%);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
#loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }

.stars{
  position:absolute; inset:0;
  background-image:
    radial-gradient(2px 2px at 20px 30px, #fff 100%, transparent),
    radial-gradient(2px 2px at 120px 90px, #fff 100%, transparent),
    radial-gradient(2px 2px at 200px 40px, #fff 100%, transparent),
    radial-gradient(2px 2px at 300px 150px, #fff 100%, transparent),
    radial-gradient(2px 2px at 350px 60px, #fff 100%, transparent),
    radial-gradient(2px 2px at 60px 180px, #fff 100%, transparent),
    radial-gradient(2px 2px at 400px 220px, #fff 100%, transparent);
  background-repeat:repeat; background-size:420px 260px;
  opacity:.5; animation:twinkle 2.4s steps(2) infinite;
}
@keyframes twinkle{ 50%{ opacity:.2; } }

.loader-inner{
  position:relative; z-index:2;
  text-align:center;
  padding:2rem;
  width:min(90vw, 480px);
}

.loader-mascot{
  width:110px; margin:0 auto 1rem;
  animation:bounce 1s steps(4) infinite;
}
@keyframes bounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}

.loader-title{
  font-size:clamp(2rem, 8vw, 3.4rem);
  color:var(--yellow);
  -webkit-text-stroke:3px var(--ink);
  letter-spacing:4px;
  margin-bottom:.5rem;
  text-shadow:6px 6px 0 var(--orange);
}
.loader-sub{
  font-size:.6rem; letter-spacing:2px;
  color:var(--sky); margin-bottom:1.6rem;
}

.progress-frame{
  position:relative;
  height:26px;
  background:var(--ink);
  border:3px solid var(--paper);
  padding:3px;
}
.progress-bar{
  height:100%;
  width:0%;
  background:repeating-linear-gradient(
    45deg, var(--yellow) 0 10px, var(--orange) 10px 20px
  );
  transition:width .12s linear;
}
.progress-text{
  margin-top:.8rem;
  font-size:.7rem;
  color:var(--paper);
}
.loader-tip{
  margin-top:1.4rem;
  font-size:.6rem;
  color:#a9a3ff;
  min-height:2.4em;
}

.enter-btn{
  margin-top:1.6rem;
  font-size:.8rem;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .4s, transform .4s;
}
.enter-btn:not(:disabled){
  opacity:1; transform:translateY(0);
  animation:pulse 1.1s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:5px 5px 0 var(--ink); }
  50%{ box-shadow:5px 5px 0 var(--ink), 0 0 0 6px rgba(255,207,60,.35); }
}

/* =====================================================
   MAIN SITE
   ===================================================== */
#site{ position:relative; }

/* ---------- NAVBAR ---------- */
.navbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:1.2rem;
  background:var(--ink);
  border-bottom:4px solid var(--yellow);
  padding:.8rem 1.6rem;
  flex-wrap:wrap;
}
.nav-logo{
  display:flex; align-items:center; gap:.6rem;
  font-size:.9rem; color:var(--yellow); text-decoration:none;
  margin-right:auto;
}
.nav-logo img{ width:32px; border:2px solid var(--yellow); }
.nav-links{ display:flex; gap:1.4rem; }
.nav-links a{
  color:var(--paper); text-decoration:none; font-size:.62rem;
  padding:.4rem 0; position:relative;
}
.nav-links a:hover{ color:var(--yellow); }
.nav-cta{ font-size:.6rem; padding:.7em .9em; }
.nav-toggle{
  display:none; background:none; border:2px solid var(--paper); color:var(--paper);
  font-size:1.1rem; padding:.3rem .6rem; cursor:pointer;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:70vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border-bottom:6px solid var(--ink);
}
.hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(1.05);
}
.hero-overlay{
  position:relative; z-index:2;
  text-align:center;
  background:rgba(11,10,26,.55);
  padding:2.4rem 1.6rem;
  max-width:760px;
}
.hero-kicker{
  font-size:.6rem; color:var(--sky); letter-spacing:2px; margin-bottom:1rem;
}
.hero-title{
  font-size:clamp(2.6rem, 10vw, 5rem);
  color:var(--yellow);
  -webkit-text-stroke:4px var(--ink);
  text-shadow:8px 8px 0 var(--orange);
  letter-spacing:4px;
  margin-bottom:1rem;
}
.hero-tag{
  font-size:.75rem; line-height:1.9; margin-bottom:2rem; color:var(--paper);
}
.hero-btns{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ---------- TICKER ---------- */
.ticker-section{
  background:var(--ink);
  border-bottom:3px solid var(--yellow);
  overflow:hidden;
  padding:1rem 0;
}
.ticker-track{
  display:flex;
  gap:2.4rem;
  width:max-content;
  animation:scroll-left 26s linear infinite;
  font-size:.7rem;
  white-space:nowrap;
}
.ticker-track:hover{ animation-play-state:paused; }
@keyframes scroll-left{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.ticker-item{ display:flex; gap:.5rem; align-items:center; }
.ticker-item .sym{ color:var(--yellow); }
.ticker-item .up{ color:var(--green); }
.ticker-item .down{ color:var(--red); }

/* ---------- SECTIONS ---------- */
section{ padding:4rem 1.6rem; max-width:1100px; margin:0 auto; }
.section-title{
  font-size:clamp(1.1rem, 3.6vw, 1.5rem);
  color:var(--yellow);
  text-align:center;
  margin-bottom:.6rem;
  -webkit-text-stroke:2px var(--ink);
}
.section-sub{
  text-align:center; font-size:.65rem; color:#b9b4ff; margin-bottom:2.4rem;
}

/* ---------- MARKET / CHART ---------- */
.market-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:1.4rem;
  margin-bottom:1.6rem;
}
.chart-head{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.7rem; margin-bottom:1rem; color:var(--yellow);
}
#chart{
  width:100%; height:auto; background:var(--ink); border:2px solid var(--ink);
  image-rendering:pixelated;
}
.stats-card{ display:flex; flex-direction:column; gap:1rem; justify-content:center; }
.stat-row{
  display:flex; justify-content:space-between; font-size:.62rem;
  border-bottom:2px dashed var(--brown);
  padding-bottom:.6rem;
}
.stat-row span:last-child{ color:var(--yellow); }

/* ---------- INVEST PANEL ---------- */
.invest-panel h3{ font-size:.85rem; color:var(--yellow); margin-bottom:.8rem; }
.disclaimer{ font-size:.55rem; color:var(--sky); margin-bottom:1.4rem; line-height:1.7; }
.invest-form{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:end;
}
.invest-form label{ font-size:.6rem; display:block; margin-bottom:.5rem; }
.invest-form input{
  font-family:inherit; font-size:.8rem;
  background:var(--ink); color:var(--paper);
  border:3px solid var(--paper); padding:.7em;
  width:160px;
}
.invest-result{
  margin-top:1.6rem; padding-top:1.4rem; border-top:3px dashed var(--brown);
  display:flex; flex-direction:column; gap:.7rem;
}
.result-row{ display:flex; justify-content:space-between; font-size:.62rem; }
.result-row span:last-child{ color:var(--green); }

/* ---------- TOKENOMICS ---------- */
.token-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.6rem;
}
.token-card{ text-align:center; }
.token-num{ display:block; font-size:1rem; color:var(--yellow); margin-bottom:.7rem; }
.token-label{ font-size:.55rem; color:var(--paper); }

.lore-card{ display:flex; gap:1.6rem; align-items:center; }
.lore-img{ width:110px; flex:none; border:3px solid var(--ink); }
.lore-text{ font-size:.65rem; line-height:2; color:var(--paper); }

/* ---------- ROADMAP / WORLD MAP ---------- */
.world-map{
  display:flex; align-items:center; overflow-x:auto;
  padding:2rem .5rem; gap:0;
}
.world-node{
  flex:none; width:170px; text-align:center;
  background:var(--panel); border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink);
  padding:1.2rem .8rem;
}
.world-node .flag{ font-size:1.6rem; display:block; margin-bottom:.6rem; }
.world-node h4{ font-size:.62rem; color:var(--yellow); margin-bottom:.6rem; }
.world-node p{ font-size:.52rem; line-height:1.7; color:#cfcaff; }
.world-node.done{ border-color:var(--green); }
.world-node.active{ border-color:var(--orange); animation:pulse 1.4s ease-in-out infinite; }
.world-path{
  flex:none; width:60px; height:6px;
  background:repeating-linear-gradient(to right, var(--yellow) 0 10px, transparent 10px 20px);
}

/* ---------- FOOTER ---------- */
.footer{
  text-align:center; background:var(--ink); border-top:6px solid var(--grass);
  max-width:none; padding:3.4rem 1.6rem;
}
.footer-mascot{ width:80px; margin:0 auto 1.2rem; }
.footer h3{ font-size:.85rem; color:var(--yellow); margin-bottom:1.6rem; }
.social-row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.6rem; }
.contract{ font-size:.6rem; margin-bottom:1.4rem; color:#cfcaff; }
.contract code{ color:var(--yellow); }
.footer-disclaimer{ font-size:.52rem; color:#8b85c9; max-width:640px; margin:0 auto 1.2rem; line-height:1.8; }
.footer-copy{ font-size:.55rem; color:#565083; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:820px){
  .market-grid{ grid-template-columns:1fr; }
  .token-grid{ grid-template-columns:repeat(2,1fr); }
  .lore-card{ flex-direction:column; text-align:center; }
}

@media (max-width:640px){
  .nav-toggle{ display:block; }
  .nav-links{
    display:none; flex-direction:column; width:100%;
    order:3; gap:.8rem; padding-top:1rem;
  }
  .nav-links.open{ display:flex; }
  .nav-cta{ order:2; }
  .invest-form input{ width:100%; }
}