/* ============ BASE THEME ============ */
:root{
  --emerald-100:#d1fae5;
  --emerald-200:#a7f3d0;
  --emerald-300:#6ee7b7;
  --emerald-400:#34d399;
  --emerald-500:#10b981;
  --ink:#000;
  --panel:#0a1310;
  --panel2:#0d1713;
  --grid:#0c1712;
  --line: rgba(52,211,153,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:#000;color:#eafff5;
  font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.55;overflow-x:hidden;
}

/* ===== parchment / vignette film (sepia knit + scanlines) ===== */
#parchment{
  position:fixed; inset:0; z-index:-4; pointer-events:none;
  background:
    /* knit diagonal weave */
    repeating-linear-gradient(105deg, rgba(210,180,140,.055) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(75deg,  rgba(160,120, 80,.045) 0 1px, transparent 1px 8px),
    /* scanlines */
    repeating-linear-gradient(0deg,   rgba(0,0,0,.16) 0 1px, rgba(0,0,0,0) 1px 3px),
    /* warm wash */
    linear-gradient(180deg, rgba(25,18,12,.20), rgba(8,6,4,.20)),
    radial-gradient(1200px 780px at 50% -6%, rgba(214,180,120,.10), transparent 60%);
  opacity:.92;
  mix-blend-mode:normal;
}
#parchment:after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(130% 90% at 50% -10%, rgba(214,180,120,.08), transparent 60%),
    radial-gradient(100% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.42) 100%);
}

/* ===== Global animated treasure map bg (moving dotted path) ===== */
#bg{position:fixed; inset:0; z-index:-3; pointer-events:none}
#bg-svg{position:absolute; left:50%; top:0; transform:translateX(-50%); width:1200px; height:2000px; filter:contrast(1.02)}
.drift-path{
  stroke-linecap:round;
  stroke-dasharray: 0 34;
  animation:dashDown 9s linear infinite;
  filter: drop-shadow(0 0 10px rgba(52,211,153,.35));
}
@keyframes dashDown{to{stroke-dashoffset:-340}}

/* ===== Layout ===== */
main{position:relative}
section{padding:64px 0}
.section{padding:92px 0}
h1,h2,h3{margin:0}

/* ===== Headline ===== */
.headline{text-align:center; position:relative}
.chrome{
  font-family:'Press Start 2P',system-ui,sans-serif;
  background:conic-gradient(from 90deg at 50% 50%, var(--emerald-200), var(--emerald-400), var(--emerald-500), var(--emerald-200));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:900; font-size:clamp(44px,8vw,96px);
  filter:drop-shadow(0 0 30px rgba(16,185,129,.35));
}
.sub{
  display:block;text-align:center;color:var(--emerald-100);
  font-size:clamp(18px,3vw,28px);font-weight:800;margin-top:10px
}
.lead{
  max-width:900px;margin:16px auto 0;color:#c8ffe7;opacity:.9;text-align:center
}

/* ===== Comic burst (fix so *! not stuck top-left) ===== */
.comic-burst{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none}
.burst{position:absolute}
.burst.ring{width:38vmin;height:38vmin;border:6px dashed rgba(16,185,129,.35);border-radius:50%;animation:ringPop 1.6s ease-out forwards;transform:scale(.2);opacity:0}
.burst.star{font-family:'Press Start 2P';color:rgba(167,243,208,.85);font-size:4vmin;transform:scale(.2) rotate(-12deg);opacity:0;animation:starPop 1.1s .15s ease-out forwards}
.burst.bang{font-family:'Press Start 2P';color:rgba(16,185,129,.95);font-size:6vmin;transform:scale(.2) rotate(6deg);opacity:0;animation:starPop 1.1s .25s ease-out forwards}
@keyframes ringPop{to{transform:scale(1);opacity:1}}
@keyframes starPop{to{transform:scale(1);opacity:1}}
.comic-in{opacity:0;transform:translateY(12px) scale(.98);animation:flyIn .7s ease-out forwards}
.delay-1{animation-delay:.12s}.delay-2{animation-delay:.22s}.delay-3{animation-delay:.32s}
@keyframes flyIn{to{opacity:1;transform:translateY(0) scale(1)}}

/* ===== PS1 Bubble bar (low-pixel speech bubbles + shimmer) ===== */
.bashbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:18px auto 0;max-width:1100px;padding:0 12px}
.bashbar .bubble{
  position:relative;
  background:rgba(5,46,34,.58);
  border:1px solid var(--line);
  border-radius:18px;
  padding:8px 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 0 0 2px rgba(52,211,153,.12);
  animation:bubbleFlick 2.2s infinite steps(2,end);
}
.bashbar .bubble:after{
  content:""; position:absolute; left:16px; bottom:-7px; width:12px; height:12px;
  background:inherit; border:inherit; border-left:none; border-top:none; transform:rotate(45deg); border-radius:2px;
}
.bashbar .bubble span{
  font-family:'Press Start 2P', system-ui, sans-serif;
  font-size:12px; color:rgba(199,249,233,.95);
  text-shadow:0 0 6px rgba(52,211,153,.35);
}
@keyframes bubbleFlick{
  0%,100% { filter:none; }
  50% { filter: hue-rotate(6deg) brightness(1.05); }
}

/* ===== Info card ===== */
.info-card{
  position:relative;margin:22px auto 0;max-width:1000px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-radius:20px;background:linear-gradient(180deg,#0b1511,#0a110d);
  border:1px solid var(--line);box-shadow:0 10px 40px rgba(0,0,0,.35)
}
.info-left{display:flex;gap:8px;flex-wrap:wrap}
.pill{background:rgba(5,46,34,.55);border:1px solid var(--line);color:var(--emerald-200);padding:8px 12px;border-radius:999px;font-weight:700;font-size:13px}
.info-right{display:flex;gap:10px;flex-wrap:wrap}
.cta{padding:12px 18px;border-radius:14px;font-weight:800;border:1px solid transparent;cursor:pointer;letter-spacing:.02em}
.cta-primary{background:linear-gradient(180deg,var(--emerald-400),var(--emerald-500));color:#052e22;box-shadow:0 8px 32px rgba(16,185,129,.35)}
.cta-primary:hover{transform:translateY(-1px);box-shadow:0 12px 40px rgba(16,185,129,.45)}
.cta-ghost{background:rgba(5,46,34,.5);color:var(--emerald-100);border-color:rgba(52,211,153,.3)}
.info-card .shine{position:absolute;inset:-1px;border-radius:20px;background:radial-gradient(400px 40px at 10% -20%,rgba(255,255,255,.25),transparent);pointer-events:none;mix-blend-mode:overlay}

/* ===== Ambient floaters ===== */
.float{position:absolute;width:18vmin;height:18vmin;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(16,185,129,.4),rgba(16,185,129,0));filter:blur(8px);animation:drift 10s ease-in-out infinite alternate}
.float-a{top:12%;left:8%;animation-duration:12s}
.float-b{bottom:14%;right:10%;animation-duration:9s}
.float-c{top:30%;right:28%;animation-duration:11s}
@keyframes drift{from{transform:translateY(-10px)}to{transform:translateY(10px)}}

/* ===== Section titles ===== */
.section-title{
  font-family:'Press Start 2P',system-ui,sans-serif;letter-spacing:.02em;
  font-size:clamp(24px,3.4vw,36px);color:var(--emerald-100);
  text-align:left;padding:0 16px;max-width:1100px;margin:0 auto 8px
}
.section-lead{color:#b7ffe2;opacity:.85;max-width:1100px;padding:0 16px;margin:4px auto 0}

/* ===== Cards ===== */
.cards{display:grid;grid-template-columns:repeat(1,1fr);gap:16px;margin:18px auto 0;max-width:1100px;padding:0 16px}
@media(min-width:980px){.cards{grid-template-columns:repeat(4,1fr)}}
.card{
  position:relative;background:rgba(5,46,34,.5);border:1px solid var(--line);
  border-radius:22px;padding:18px;box-shadow:0 10px 40px rgba(0,0,0,.35);
  transition:transform .2s ease,box-shadow .2s ease;overflow:hidden
}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 60px rgba(16,185,129,.18)}
.card.highlight{background:rgba(16,185,129,.16);border-color:rgba(16,185,129,.6)}
.card-tag{color:#7fffd4;letter-spacing:.2em;font-size:12px;opacity:.75}
.card h3{margin-top:8px;font-size:18px;color:var(--emerald-100);font-weight:800}
.card p{color:#bffbe9;opacity:.9}
.pow{position:absolute;right:10px;bottom:8px;font-family:'Press Start 2P';font-size:12px;color:rgba(167,243,208,.9);transform:scale(.9) rotate(-6deg);opacity:.85;text-shadow:0 2px 0 rgba(0,0,0,.35)}

/* ===== Map panel ===== */
.map-wrap{
  background:linear-gradient(180deg,#0e1712,#0a110d);
  border:1px solid var(--line); border-radius:24px; padding:16px; margin:12px auto 0;
  box-shadow:0 10px 40px rgba(0,0,0,.35); max-width:1100px
}
.map-svg{width:100%;height:auto}
.route-dash{
  stroke-dasharray:0 28; stroke-linecap:round;
  animation:routeEat 7s linear infinite;
  filter: drop-shadow(0 0 8px rgba(52,211,153,.35));
}
@keyframes routeEat{to{stroke-dashoffset:-280}}
.map-note{color:#b7ffe2;opacity:.85;font-size:14px;margin-top:8px}

/* Map bubbles (PS1 speech) */
.bubble-tag .bubble-rect{
  fill: rgba(5,46,34,.65);
  stroke: rgba(52,211,153,.55);
  stroke-width: 2.5;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
  rx: 14; ry: 14;
}
.bubble-text{
  fill: #c7f9e9;
  font-family: 'Press Start 2P', system-ui, sans-serif;
  font-size: 13px;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: rgba(0,0,0,.25);
  stroke-width: .5;
}

/* ===== Treasure Meter ===== */
.meter{max-width:1100px;padding:0 16px;margin:12px auto 0}
.chartwrap{
  position:relative;height:360px;border-radius:22px;
  background:linear-gradient(180deg,#122019,#0a140f);
  border:1px solid var(--line);box-shadow:0 10px 40px rgba(0,0,0,.35);overflow:hidden
}
#chart,#coins{position:absolute;inset:0;width:100%;height:100%}
#coinRain{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.meter-ctrl{display:flex;gap:10px;align-items:center;margin-top:12px}
#progress{width:100%;accent-color:var(--emerald-400)}
.pct{font-weight:800;color:var(--emerald-100)}

/* Falling coins – round + glossy (DOM fallback) */
.coin{
  position:absolute; border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%, #ffe69a, #f3c65a 60%, #c8962b 61%, #8b6419 100%);
  box-shadow:0 0 10px rgba(255,215,106,.45);
  animation:fall 1.6s linear forwards, spin 1.2s linear infinite;
  image-rendering:pixelated;
}
@keyframes fall{
  0%{transform:translateY(-20px) scale(.8) rotate(0deg);opacity:1}
  100%{transform:translateY(110%) scale(1.05) rotate(360deg);opacity:.08}
}
@keyframes spin{to{transform:rotate(var(--spin))}}

/* ===== Lounge ===== */
.lounge-card{max-width:1100px;margin:10px auto 0;padding:16px;display:flex;gap:16px;align-items:center;background:rgba(5,46,34,.5);border:1px solid var(--line);border-radius:22px;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.lock-graphic{position:relative;width:120px;height:120px;flex:0 0 120px}
.lock-ring{position:absolute;inset:0;border:6px dashed rgba(16,185,129,.35);border-radius:50%;animation:rotate 12s linear infinite}
.lock-core{position:absolute;inset:18px;border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(16,185,129,.6),rgba(16,185,129,.05))}
@keyframes rotate{to{transform:rotate(360deg)}}
.lounge-copy h3{margin:0 0 4px 0;font-size:20px;color:var(--emerald-100)}
.lounge-copy p{margin:6px 0 0 0;color:#bffbe9;opacity:.9}

/* ===== Meme Vault ===== */
.vault-grid{
  display:grid; gap:16px; margin:18px auto 0; max-width:1100px; padding:0 16px;
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:720px){.vault-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.vault-grid{grid-template-columns:repeat(4,1fr)}}
.slot{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:18px;
  border:1px solid rgba(16,185,129,.35); background:#0e1b16;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  image-rendering:pixelated;
  cursor:pointer;
}
.slot:hover{transform:translateY(-3px); box-shadow:0 14px 40px rgba(16,185,129,.18); filter:saturate(1.06)}

/* Pulse sequence (Delay via JS) */
.pulse{animation:pulse 3.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

/* Lightbox */
#lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.85); display:none;
  align-items:center; justify-content:center; z-index:50;
}
#lightbox.show{display:flex}
#lightbox img{max-width:min(92vw,1100px); max-height:90vh; border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.1)}
#lbClose{
  position:fixed; top:18px; right:18px;
  width:44px;height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);
  color:#fff;font-size:28px;line-height:40px;text-align:center;cursor:pointer
}

/* ===== Social Panel ===== */
.social-panel{max-width:1100px;margin:12px auto 0;padding:16px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.social-btn{
  display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:16px;font-weight:900;letter-spacing:.02em;border:1px solid var(--line);background:linear-gradient(180deg,#0c1712,#0a110d);box-shadow:0 10px 30px rgba(0,0,0,.35);text-decoration:none
}
.social-btn .ico{font-family:'Press Start 2P';font-size:16px;color:#a7f3d0}
.social-btn .txt{color:#eafff5}
.social-btn:hover{transform:translateY(-1px);box-shadow:0 12px 40px rgba(16,185,129,.35)}
.social-hint{text-align:center;color:#9cf2d9;opacity:.8;margin-top:6px}

/* ===== Footer ===== */
.footer{border-top:1px solid rgba(16,185,129,.3)}
.foot-wrap{display:flex;flex-direction:column;gap:8px;justify-content:space-between;align-items:flex-start;padding:40px 16px;max-width:1100px;margin:0 auto}
@media(min-width:860px){.foot-wrap{flex-direction:row;align-items:center}}
.brand{color:var(--emerald-100);font-weight:700}
.note{color:#9cf2d9;opacity:.8}
.socials{color:#8debcf;opacity:.85}