/* Seedwing — visual overrides (icons, tiles, torch darkening, palette) */

/* ---- game-y fonts instead of techno/sci-fi (Orbitron/Rajdhani) ---- */
/* Pixelify Sans = punchy pixel-game display font for headings, Quicksand = simple friendly body font */
:root{
  --font-display:"Pixelify Sans","Baloo 2","Orbitron",sans-serif;
  --font-alt:"Quicksand","Rajdhani",sans-serif;
  --font-body:"Quicksand","Inter",sans-serif;
}

/* the site leans on wide uppercase tracking everywhere for its techno look —
   dial that back so the new pixel font doesn't fight the spacing */
.section-title{letter-spacing:1px !important}
.tag{letter-spacing:1.5px !important}
.card-head h3,
.featured-glass-inner h3,
.glass-inner h3{letter-spacing:.5px !important}

/* ---- headings ~1.5x bigger + more dynamic everywhere ---- */
.section-title{font-size:clamp(36px,6vw,60px) !important}
@media (max-width:640px){.section-title{font-size:33px !important}}
.featured-info h3{font-size:30px !important}
.card-head h3{font-size:20px !important}
.timeline-inner h3{font-size:clamp(45px,6.3vw,69px) !important}
.flow-step-inner h3{font-size:clamp(36px,4.5vw,48px) !important}

/* kill the faint techno grid lines under everything */
.grid-overlay{display:none !important}

/* pack the slides much closer together */
.slide{padding:48px 24px !important}
@media (max-width:640px){.slide{padding:36px 16px !important}}

/* ---- nicer, less acidic color palette (cascades through the whole site) ---- */
:root{
  --neon:#7cc148;
  --neon-bright:#a3dd6e;
  --neon-dim:rgba(124,193,72,.15);
  --accent-gold:#e0b84a;
  --text:#eef5e0;
  --text-dim:#aacb8e;
  --text-faint:#71914f;
  --glass-border:rgba(124,193,72,.25);
  --glass-border-hover:rgba(163,221,110,.5);
  --glow-green:0 0 20px rgba(124,193,72,.3),0 0 60px rgba(124,193,72,.1);
  --glow-green-strong:0 0 30px rgba(124,193,72,.5),0 0 80px rgba(124,193,72,.2);
}

/* ---- bigger, glowier tower icons (no box behind them anymore) ---- */
.mock-icon{
  width:140px !important;
  height:140px !important;
  filter:drop-shadow(0 0 26px rgba(124,193,72,.55)) drop-shadow(0 0 10px rgba(224,184,74,.4)) !important;
}
.featured-mock img{
  width:190px !important;
  height:190px !important;
  filter:drop-shadow(0 0 32px rgba(124,193,72,.55)) !important;
}

/* ---- tower + lore sections (#grove, #lore): kill the card plates entirely ---- */
/* just a big glowing icon + info beside it, no glass box, no dark tile */
#grove .glass,
#grove .featured-glass,
#lore .glass{
  background:none !important;
  padding:0 !important;
}
#grove .glass-inner,
#grove .featured-glass-inner,
#lore .glass-inner{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}
#grove .corner-accents,
#lore .corner-accents{display:none !important}

.mockup-area,
.featured-mock{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  width:auto !important;
  min-height:0 !important;
  margin-bottom:0 !important;
  flex-shrink:0 !important;
}

/* small cards (Fungus Trap / Stone Totem / lore items): icon left, title+text beside it */
#grove .glass-inner,
#lore .glass-inner{
  display:grid !important;
  grid-template-columns:auto 1fr !important;
  align-items:center !important;
  column-gap:26px !important;
  row-gap:8px !important;
  text-align:left !important;
}
#grove .glass-inner .mockup-area,
#lore .glass-inner .mockup-area{grid-column:1;grid-row:1 / 3}
#grove .glass-inner .card-head,
#lore .glass-inner .card-head{grid-column:2;grid-row:1;margin-bottom:0 !important}
#grove .glass-inner > p,
#lore .glass-inner > p{grid-column:2;grid-row:2;margin:0 !important}

/* ---- lore intro quote: drop the box, keep it big & centered ---- */
#lore .wide-glass{background:none !important;padding:0 !important;margin-bottom:36px !important}
#lore .wide-inner{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding:0 !important;
}
#lore .wide-inner p{font-size:clamp(18px,2.4vw,24px) !important}

/* ---- "interactive visual" placeholders: not real content yet, remove the whole slide ---- */
/* (each one is its own empty section — hiding just the inner box left a bare dark band) */
.slide:has(.placeholder-glass){display:none !important}

/* ---- guardian cards: drop the box, keep portrait + stats centered ---- */
#guardians .glass{background:none !important;padding:0 !important}
#guardians .glass-inner{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:12px 8px !important;
}
#guardians .corner-accents{display:none !important}

/* ---- guardian portraits: bigger, square rarity frames instead of green circles ---- */
.guardian-mockup{
  width:132px !important;
  height:132px !important;
  border-radius:12px !important;
}

/* Rootling = Common */
#guardians .grid-3 > *:nth-child(1) .guardian-mockup{
  border:3px solid #92a488 !important;
  box-shadow:0 0 12px rgba(146,164,136,.35) !important;
}
/* Sporekin = Rare */
#guardians .grid-3 > *:nth-child(2) .guardian-mockup{
  border:3px solid #9d7ff0 !important;
  box-shadow:0 0 22px rgba(157,127,240,.55),0 0 0 3px rgba(157,127,240,.18) !important;
}
/* Stoneborn = Legendary */
#guardians .grid-3 > *:nth-child(3) .guardian-mockup{
  border:3px solid var(--accent-gold) !important;
  box-shadow:0 0 16px rgba(224,184,74,.55),0 0 34px rgba(224,184,74,.4),0 0 0 4px rgba(224,184,74,.22) !important;
  animation:legendary-frame-pulse 2.2s ease-in-out infinite;
}
@keyframes legendary-frame-pulse{
  0%,100%{box-shadow:0 0 16px rgba(224,184,74,.55),0 0 34px rgba(224,184,74,.4),0 0 0 4px rgba(224,184,74,.22)}
  50%{box-shadow:0 0 22px rgba(224,184,74,.8),0 0 48px rgba(224,184,74,.6),0 0 0 6px rgba(224,184,74,.35)}
}

/* ---- roadmap: drop the text-only plates, go big kinetic typography ---- */
.timeline{position:relative}
.timeline::before{
  content:'';
  position:absolute;
  left:24px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--neon) 0%,rgba(124,193,72,.1) 100%);
  z-index:0;
}
.timeline-glass{
  background:none !important;
  padding:0 !important;
}
.timeline-inner{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:4px 0 4px 28px !important;
}
.timeline-badge{
  font-size:13px !important;
  letter-spacing:2px !important;
}
.timeline-inner h3{
  font-size:clamp(30px,4.2vw,46px) !important;
  letter-spacing:2px !important;
  font-weight:800 !important;
  margin:4px 0 16px !important;
  background:linear-gradient(135deg,var(--neon-bright),var(--accent-gold));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  text-shadow:none !important;
}
.timeline-inner ul{gap:18px !important}
.timeline-inner li{
  font-family:var(--font-alt);
  font-size:17px !important;
  font-weight:600;
  letter-spacing:.5px;
  color:var(--text-dim) !important;
  position:relative;
  background:none !important;
  border:none !important;
  border-radius:0 !important;
  padding:0 0 0 16px !important;
}
.timeline-inner li::before{
  content:'';
  position:absolute;
  left:0;top:9px;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--neon);
  box-shadow:0 0 8px rgba(124,193,72,.7);
}
@media (max-width:640px){
  .timeline::before{display:none}
}

/* ---- how-to-play steps: drop the boxed plates, big kinetic typography ---- */
.flow-step{
  background:none !important;
  padding:0 !important;
}
.flow-step-inner{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}
.step-num{
  font-size:26px !important;
  letter-spacing:3px !important;
  color:var(--accent-gold) !important;
  opacity:.9;
}
.step-icon{
  width:110px !important;
  height:110px !important;
  margin-bottom:18px !important;
  filter:drop-shadow(0 0 26px rgba(124,193,72,.55)) !important;
}
.flow-step-inner h3{
  font-family:var(--font-display);
  font-size:clamp(24px,3vw,32px);
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  margin:0 0 10px;
  background:linear-gradient(135deg,var(--neon-bright),var(--accent-gold));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.flow-step-inner p{
  font-family:var(--font-alt);
  font-size:16px;
  font-weight:500;
  color:var(--text-dim);
  margin:0;
}

/* ---- torch-light: gently darkens ONLY the section background photos ---- */
.slide-bg img{
  filter:brightness(.62) saturate(.9) contrast(1.03);
}
.bg-torch-mask{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(
    circle var(--tr,320px) at var(--mx,50%) var(--my,40%),
    transparent 0%,
    transparent 40%,
    rgba(10,8,3,.24) 62%,
    rgba(2,4,2,.66) 100%
  );
}

/* ---- bright warm torch glow — lives INSIDE .slide-bg, between bg photo and cards ---- */
/* screen blend = actually adds light/warmth instead of just revealing the dark bg;
   painted right after .bg-torch-mask so it sits above it but still under .seam/.content */
.bg-torch-glow{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:var(--torch-alpha,.45);
  background:radial-gradient(
    circle var(--tr,680px) at var(--mx,50%) var(--my,40%),
    rgba(255,224,140,.55) 0%,
    rgba(255,190,80,.4) 25%,
    rgba(255,160,50,.24) 45%,
    rgba(255,130,30,.11) 65%,
    rgba(255,110,20,.04) 82%,
    transparent 96%
  );
}
.torch-particles{
  position:fixed;
  inset:0;
  z-index:96;
  pointer-events:none;
}

/* ---- second hero (#second-hero, right after the real pinned hero): bright,
   firefly-lit page — cursor torch still works here too, same as other slides ---- */
#second-hero{min-height:100vh !important}
#second-hero .slide-bg img{filter:brightness(1.15) saturate(1.1) contrast(1.03) !important}

.firefly{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#f6ffd0;
  z-index:5;
  pointer-events:none;
  mix-blend-mode:screen;
  box-shadow:
    0 0 16px 8px rgba(230,255,160,1),
    0 0 45px 22px rgba(200,255,120,.75),
    0 0 90px 45px rgba(170,240,100,.45),
    0 0 150px 70px rgba(140,220,90,.22);
  animation-name:firefly-drift, firefly-flicker;
  animation-timing-function:ease-in-out, ease-in-out;
  animation-iteration-count:infinite, infinite;
}
@keyframes firefly-drift{
  0%{transform:translate(0,0)}
  25%{transform:translate(20px,-16px)}
  50%{transform:translate(-12px,-28px)}
  75%{transform:translate(-22px,8px)}
  100%{transform:translate(0,0)}
}
@keyframes firefly-flicker{
  0%,100%{opacity:.7}
  50%{opacity:1}
}

/* ---- softer, wider fades between sections ---- */
.seam{height:260px !important}

/* ============================================================= */
/* ==============  Header / nav + Play (wallet)  ================ */
/* ============================================================= */

/* remove the little mouse glyph under the "SCROLL" hint (keep the word) */
.scroll-hint .mouse-icon{display:none !important}
.scroll-hint{gap:0 !important}

/* the old text "Play" link is replaced by a real CTA button on the right */
.nav-links .nav-link[href="#game-loop"]{display:none !important}

/* nav layout: logo | links | actions — evenly balanced, nothing crammed */
.nav-inner{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:28px !important;
}
.nav-links{gap:30px !important}
.nav-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-shrink:0;
}

/* X / Twitter icon button */
.nav-x{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;height:38px;
  border-radius:10px;
  color:var(--text);
  border:1px solid var(--glass-border);
  background:rgba(124,193,72,.06);
  transition:all .18s ease;
}
.nav-x:hover{
  color:#fff;
  border-color:var(--glass-border-hover);
  background:rgba(124,193,72,.16);
  box-shadow:var(--glow-green);
  transform:translateY(-1px);
}
.nav-x svg{width:17px;height:17px;fill:currentColor}

/* Play CTA button */
.nav-play{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:#0e1706;
  padding:9px 22px;
  border:none;
  border-radius:11px;
  cursor:pointer;
  background:linear-gradient(135deg,var(--neon-bright),var(--accent-gold));
  box-shadow:0 0 18px rgba(124,193,72,.4),0 4px 14px rgba(0,0,0,.35);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.nav-play:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
  box-shadow:0 0 26px rgba(163,221,110,.6),0 6px 18px rgba(0,0,0,.4);
}
.nav-play:active{transform:translateY(0)}

@media (max-width:720px){
  .nav-links{display:none !important}
  .nav-play{font-size:14px;padding:8px 16px}
}

/* ---------------  Wallet / Play overlay  --------------- */
.wallet-overlay{
  position:fixed;inset:0;z-index:1000;
  display:none;
  align-items:center;justify-content:center;
  padding:24px;
  background:radial-gradient(circle at 50% 38%,rgba(20,30,12,.72),rgba(2,5,2,.92));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .25s ease;
}
.wallet-overlay.open{display:flex;opacity:1}

.wallet-modal{
  position:relative;
  width:min(440px,100%);
  background:linear-gradient(180deg,rgba(18,26,12,.97),rgba(9,15,6,.98));
  border:1px solid var(--glass-border-hover);
  border-radius:20px;
  padding:36px 30px 30px;
  box-shadow:var(--glow-green-strong),0 30px 80px rgba(0,0,0,.6);
  transform:translateY(16px) scale(.98);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
  text-align:center;
}
.wallet-overlay.open .wallet-modal{transform:none}

.wallet-close{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;border-radius:9px;
  border:1px solid var(--glass-border);
  background:transparent;color:var(--text-dim);
  font-size:17px;cursor:pointer;line-height:1;
  transition:all .16s ease;
}
.wallet-close:hover{color:var(--text);border-color:var(--glass-border-hover);background:rgba(124,193,72,.1)}

.wallet-title{
  font-family:var(--font-display);
  font-size:30px;font-weight:800;letter-spacing:1px;
  margin:2px 0 6px;
  background:linear-gradient(135deg,var(--neon-bright),var(--accent-gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.wallet-sub{
  font-family:var(--font-alt);
  font-size:15px;color:var(--text-dim);margin:0 0 24px;
}

.wallet-list{display:flex;flex-direction:column;gap:12px}
.wallet-option{
  display:flex;align-items:center;gap:14px;
  width:100%;padding:13px 16px;
  border:1px solid var(--glass-border);
  border-radius:13px;
  background:rgba(124,193,72,.05);
  color:var(--text);cursor:pointer;
  font-family:var(--font-alt);font-size:16px;font-weight:600;
  text-align:left;
  transition:all .16s ease;
}
.wallet-option:hover{
  border-color:var(--glass-border-hover);
  background:rgba(124,193,72,.13);
  transform:translateY(-1px);
  box-shadow:var(--glow-green);
}
.wallet-ic{
  width:36px;height:36px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.wallet-option .wallet-name{flex:1}
.wallet-option .wallet-tag{
  font-size:10px;letter-spacing:1px;text-transform:uppercase;
  color:var(--accent-gold);font-weight:700;
}

.wallet-status{
  min-height:18px;margin-top:16px;
  font-family:var(--font-alt);font-size:13px;color:var(--accent-gold);
}
.wallet-status a{color:var(--neon-bright);text-decoration:underline}

/* connected view */
.wallet-connected{display:none}
.wallet-modal.is-connected .wallet-list,
.wallet-modal.is-connected .wallet-sub,
.wallet-modal.is-connected .wallet-status{display:none}
.wallet-modal.is-connected .wallet-connected{display:block}

.wallet-badge{
  width:78px;height:78px;margin:4px auto 18px;
  border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  font-size:40px;
  background:radial-gradient(circle,rgba(124,193,72,.28),rgba(124,193,72,.05));
  border:1px solid var(--glass-border-hover);
  box-shadow:var(--glow-green);
}
.wallet-addr{
  display:inline-block;
  font-family:var(--font-body);font-size:14px;letter-spacing:.5px;
  color:var(--neon-bright);
  background:rgba(124,193,72,.1);
  border:1px solid var(--glass-border);
  border-radius:9px;padding:7px 14px;margin-bottom:20px;
}
.wallet-msg{
  font-family:var(--font-alt);font-size:15px;color:var(--text-dim);
  line-height:1.55;margin:0 0 22px;
}
.wallet-msg strong{color:var(--neon-bright)}
.wallet-cactions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.wallet-btn{
  font-family:var(--font-alt);font-size:14px;font-weight:700;
  padding:10px 18px;border-radius:10px;cursor:pointer;
  border:1px solid var(--glass-border);background:transparent;color:var(--text-dim);
  text-decoration:none;display:inline-block;
  transition:all .16s ease;
}
.wallet-btn:hover{color:var(--text);border-color:var(--glass-border-hover);background:rgba(124,193,72,.1)}
.wallet-btn.primary{
  color:#0e1706;border:none;
  background:linear-gradient(135deg,var(--neon-bright),var(--accent-gold));
  box-shadow:0 0 16px rgba(124,193,72,.4);
}
.wallet-btn.primary:hover{filter:brightness(1.08);color:#0e1706}

/* ---------------  Top contract-address (CA) bar  --------------- */
.ca-bar{
  position:fixed;top:0;left:0;right:0;
  z-index:150;
  min-height:36px;
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  padding:6px 16px;
  font-family:var(--font-alt);
  background:linear-gradient(90deg,rgba(9,15,6,.96),rgba(18,28,10,.97),rgba(9,15,6,.96));
  border-bottom:1px solid var(--glass-border);
  box-shadow:0 2px 18px rgba(0,0,0,.5);
}
.ca-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--neon-bright);
  box-shadow:0 0 8px rgba(163,221,110,.9);
  flex-shrink:0;
  animation:ca-pulse 1.6s ease-in-out infinite;
}
@keyframes ca-pulse{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
.ca-label{
  font-family:var(--font-display);
  font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  font-size:12px;color:var(--accent-gold);
  flex-shrink:0;
}
.ca-value{
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:12.5px;letter-spacing:.3px;
  color:var(--neon-bright);
  user-select:all;
  word-break:break-all;
  text-align:center;
}
.ca-soon{
  font-family:var(--font-alt);
  font-size:12.5px;font-weight:600;letter-spacing:1px;
  color:var(--text-dim);text-transform:uppercase;
}
.ca-copy{
  border:1px solid var(--glass-border);
  background:rgba(124,193,72,.08);
  color:var(--text);
  border-radius:7px;
  padding:4px 12px;
  font-family:var(--font-alt);
  font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  cursor:pointer;flex-shrink:0;
  transition:all .15s ease;
}
.ca-copy:hover{background:rgba(124,193,72,.18);border-color:var(--glass-border-hover);color:#fff}
.ca-copy.copied{color:var(--neon-bright);border-color:var(--neon-bright);background:rgba(124,193,72,.14)}

/* push the nav (and its slide-in) below the CA bar so nothing overlaps */
.nav{margin-top:36px !important}

@media (max-width:520px){
  .ca-value{font-size:11px}
  .ca-label{font-size:11px}
}