/* ============================================================
   The Garden of Base ($SPROUT) . live ecosystem garden
   palette: sunrise-peach sky + Base-blue accents + soft soil
   ============================================================ */

:root{
  --sky-1:#ffe7d4;        /* peach top */
  --sky-2:#ffd5b0;        /* warm middle */
  --sky-3:#bfe2ff;        /* sky-blue lower */
  --hill:#9bc88a;         /* distant hills */
  --grass-1:#bfe19a;      /* foreground grass */
  --grass-2:#a8d27e;
  --soil-1:#8a5a3a;       /* tilled-soil top */
  --soil-2:#5e3a22;       /* deep soil */
  --sun:#fff4c8;
  --sun-glow:rgba(255,220,140,0.65);

  --bb:#1d3df0;           /* Base-blue (mascot leaves + UI accent) */
  --bb-2:#3a59ff;
  --bb-deep:#0e22b0;
  --bb-soft:#dfe5ff;

  --ok:#1f9b56;
  --grow:#7ab63d;
  --wilt:#d49629;
  --dorm:#94756d;

  --paper:#fff7e7;
  --paper-2:#f2e6c8;
  --ink:#28180c;
  --ink-2:#48311a;
  --soft:#7a6650;

  --f-display:'Playfair Display',Georgia,serif;
  --f-hand:'Kalam',cursive;
  --f-mono:'Nova Mono',ui-monospace,SFMono-Regular,monospace;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--f-hand);font-weight:400;line-height:1.6;color:var(--ink);
  min-height:100vh;overflow-x:hidden;position:relative;
  background:
    linear-gradient(180deg,
      var(--sky-1) 0%,
      var(--sky-2) 18%,
      var(--sky-3) 38%,
      var(--sky-3) 56%,
      var(--hill) 64%,
      var(--grass-1) 70%,
      var(--grass-2) 76%,
      var(--soil-1) 82%,
      var(--soil-2) 100%
    );
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;background:transparent;border:0;color:inherit;cursor:pointer;}

/* ============================================================
   LANDSCAPE: sun + clouds + horizon + soil details
   ============================================================ */
.landscape{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.sun{
  position:absolute;left:78%;top:14%;width:180px;height:180px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, var(--sun) 30%, var(--sun-glow) 55%, transparent 75%);
  filter:blur(1px);
  animation:sunPulse 6s ease-in-out infinite;
}
@keyframes sunPulse{ 50%{ filter:blur(2px) brightness(1.06); } }
.rays{
  position:absolute;left:78%;top:14%;width:520px;height:520px;
  transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(255,240,180,0.10) 6deg, transparent 12deg,
    transparent 40deg, rgba(255,240,180,0.08) 46deg, transparent 52deg,
    transparent 90deg, rgba(255,240,180,0.10) 96deg, transparent 102deg,
    transparent 140deg, rgba(255,240,180,0.08) 146deg, transparent 152deg,
    transparent 190deg, rgba(255,240,180,0.10) 196deg, transparent 202deg,
    transparent 240deg, rgba(255,240,180,0.08) 246deg, transparent 252deg,
    transparent 290deg, rgba(255,240,180,0.10) 296deg, transparent 302deg,
    transparent 340deg, rgba(255,240,180,0.08) 346deg, transparent 352deg);
  opacity:.85;animation:rayspin 90s linear infinite;
}
@keyframes rayspin{ to { transform:translate(-50%,-50%) rotate(360deg); } }

.cloud{
  position:absolute;
  background:
    radial-gradient(ellipse 45% 60% at 30% 60%, #ffffff, transparent 70%),
    radial-gradient(ellipse 50% 70% at 65% 50%, #ffffff, transparent 72%),
    radial-gradient(ellipse 35% 55% at 88% 65%, #ffffff, transparent 70%);
  filter:blur(0.5px);opacity:.9;
}
.cloud-1{ left:-4%;  top:9%;  width:300px; height:90px;  animation:cloudDrift 80s linear infinite; }
.cloud-2{ right:-6%; top:22%; width:380px; height:120px; animation:cloudDrift 110s -34s linear infinite reverse; }
.cloud-3{ left:24%;  top:30%; width:240px; height:70px;  opacity:.7; animation:cloudDrift 130s -55s linear infinite; }
@keyframes cloudDrift{ to { transform:translateX(60px); } }

.hills{
  position:absolute;left:-2%;right:-2%;top:60%;height:90px;
  background:
    radial-gradient(ellipse 22% 100% at 12% 100%, var(--hill), transparent 70%),
    radial-gradient(ellipse 28% 100% at 38% 100%, var(--hill), transparent 70%),
    radial-gradient(ellipse 24% 100% at 64% 100%, var(--hill), transparent 70%),
    radial-gradient(ellipse 26% 100% at 88% 100%, var(--hill), transparent 70%);
  opacity:.78;filter:blur(0.5px);
}
.grass{
  position:absolute;left:0;right:0;top:68%;height:14%;
  background:
    linear-gradient(180deg, transparent 0%, var(--grass-1) 30%, var(--grass-2) 100%),
    repeating-linear-gradient(95deg, transparent 0 4px, rgba(40,80,20,0.06) 4px 5px);
}
.soil{
  position:absolute;left:0;right:0;top:82%;bottom:0;
  background:
    linear-gradient(180deg, var(--soil-1) 0%, var(--soil-2) 100%),
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(0,0,0,0.05) 6px 7px);
}

/* ============================================================
   BRAND pill (top-right)
   ============================================================ */
.brand{
  position:fixed;top:22px;right:24px;z-index:20;
  display:flex;align-items:center;gap:10px;
  padding:6px 14px 6px 6px;
  background:rgba(255,255,255,0.78);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1.5px solid rgba(29,61,240,0.3);
  border-radius:999px;text-decoration:none;
  box-shadow:0 6px 14px -8px rgba(15,30,90,0.3);
  transition:transform .14s ease,box-shadow .14s ease;
}
.brand:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -8px rgba(15,30,90,0.4); }
.brand-mark{ width:36px;height:36px;border-radius:50%;background:#fff;padding:2px; }
.brand-text{ display:flex;flex-direction:column;line-height:1.1;color:var(--ink); }
.brand-text b{ font-family:var(--f-display);font-weight:700;font-style:italic;font-size:1.04rem;color:var(--bb-deep); }
.brand-text i{ font-family:var(--f-hand);font-style:normal;font-size:.74rem;color:var(--soft); }

/* ============================================================
   SOCKETS (3 garden objects)
   ============================================================ */
.socket{
  position:fixed;z-index:18;display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:transform .18s ease,filter .18s ease;
}
.socket:hover{ transform:translateY(-3px); filter:brightness(1.06); }
.socket-x{ left:24px; top:120px; }
.socket-dex{ right:32px; top:38%; transform:translateY(-50%); }
.socket-dex:hover{ transform:translateY(calc(-50% - 3px)); }

.birdhouse svg{ width:64px;height:84px; filter:drop-shadow(0 6px 4px rgba(40,30,10,0.25)); }
.sundial svg{ width:74px;height:74px; filter:drop-shadow(0 6px 4px rgba(40,30,10,0.25)); animation:sundialTilt 8s ease-in-out infinite; transform-origin:50% 90%; }
@keyframes sundialTilt{ 50%{ transform:rotate(2deg); } }

.socket-tag{
  font-family:var(--f-hand);font-style:normal;font-size:.78rem;
  color:var(--ink);background:rgba(255,255,255,0.86);
  padding:3px 10px;border-radius:999px;
  border:1.5px solid rgba(29,61,240,0.25);
  white-space:nowrap;
}
.socket.is-disabled{ opacity:.55; cursor:default; pointer-events:none; }

/* ============================================================
   HERO
   ============================================================ */
main{ max-width:1340px; margin:0 auto; padding:0 clamp(20px,4vw,60px); }

.hero{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,56px);
  align-items:center;
  padding:60px 0 24px;
  max-width:1280px;margin:0 auto;
}
.hero-mascot{
  position:relative;
  width:clamp(220px,32vw,380px);height:clamp(260px,38vw,440px);
  flex:0 0 auto;
}
.hero-aura{
  position:absolute;inset:-12%;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.7), rgba(108,210,255,0.32) 40%, transparent 70%);
  filter:blur(8px);
  animation:auraPulse 5s ease-in-out infinite;z-index:-1;
}
@keyframes auraPulse{ 50%{ opacity:.6; transform:scale(.94); } }
#heroPose{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(15,30,90,0.25));
  animation:heroFloat 5.5s ease-in-out infinite;
}
@keyframes heroFloat{ 50%{ transform:translateY(-10px); } }

.hero-text{ min-width:0; }
.kicker{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bb-deep);
}
.hero-title{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(2.4rem,5.6vw,4rem);
  line-height:1.04;letter-spacing:-.01em;color:var(--ink);
  margin:6px 0 12px;
}
.hero-title em{ font-style:italic;color:var(--bb-deep); }
.hero-sub{
  max-width:520px;font-size:1.06rem;color:var(--ink-2);
  font-family:var(--f-hand);
}

/* live stats strip */
.stats{
  display:grid;grid-template-columns:repeat(4,auto);gap:10px 18px;
  margin-top:20px;align-items:end;
}
.stat{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:7px 14px;
  background:rgba(255,255,255,0.86);
  border:1.5px solid rgba(29,61,240,0.22);
  border-radius:14px;
  position:relative;min-width:88px;
}
.stat-wide{ grid-column:span 2; }
.stat-k{
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.1em;
  color:var(--soft);text-transform:uppercase;
}
.stat-v{
  font-family:var(--f-display);font-weight:700;font-size:1.3rem;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.1;
  transition:color .25s ease;
}
.stat-v.is-pop{ color:var(--bb); transform:scale(1.04); }
.stat-dot{
  position:absolute;right:9px;top:9px;width:7px;height:7px;border-radius:50%;
}
.dot-healthy{ background:var(--ok);   box-shadow:0 0 6px rgba(31,155,86,.6); }
.dot-growing{ background:var(--grow); box-shadow:0 0 6px rgba(122,182,61,.6); }
.dot-wilting{ background:var(--wilt); box-shadow:0 0 6px rgba(212,150,41,.5); }
.dot-dormant{ background:var(--dorm); box-shadow:0 0 4px rgba(148,117,109,.4); }

.live-tag{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:14px;padding:5px 12px;
  background:rgba(255,255,255,0.86);
  border:1.5px solid rgba(29,61,240,0.22);border-radius:999px;
  font-family:var(--f-mono);font-size:.7rem;color:var(--ink);
}

/* ============================================================
   EXPLICIT TOKEN-BAR (CA pill + Buy + Dex + X buttons in hero)
   ============================================================ */
.token-bar{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  margin-top:18px;
}
.token-ca{
  display:inline-flex;align-items:stretch;
  background:#fff;color:var(--ink);
  border:1.5px solid rgba(29,61,240,0.3);border-radius:12px;
  overflow:hidden;cursor:pointer;
  font-family:var(--f-mono);font-size:.84rem;
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease;
  padding:0;
}
.token-ca:hover{
  border-color:var(--bb);
  box-shadow:0 8px 18px -10px rgba(15,30,140,0.35);
  transform:translateY(-1px);
}
.token-ca-tag{
  background:var(--ink);color:#fff;
  padding:9px 12px;
  font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;
}
.token-ca-num{
  padding:9px 12px;align-self:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:30ch;
}
.token-ca-copy{
  background:var(--bb-soft);color:var(--bb-deep);
  padding:9px 13px;font-weight:700;font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;
  display:flex;align-items:center;border-left:1.5px solid rgba(29,61,240,0.18);
}
.token-ca.is-copied{ border-color:var(--ok); }
.token-ca.is-copied .token-ca-copy{ background:#dffbcd; color:#1f7a3e; }

.token-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:12px;
  background:#fff;color:var(--ink);
  border:1.5px solid rgba(29,61,240,0.3);
  font-family:var(--f-display);font-weight:700;font-style:italic;font-size:.96rem;
  text-decoration:none;
  transition:border-color .14s ease,color .14s ease,background .14s ease,transform .14s ease;
}
.token-btn:hover{
  border-color:var(--bb);color:var(--bb-deep);
  transform:translateY(-1px);
  box-shadow:0 8px 18px -10px rgba(15,30,140,0.35);
}
.token-btn svg{ width:18px;height:18px;color:currentColor; }
.token-btn-primary{
  background:var(--bb);color:#fff;border-color:var(--bb);
  box-shadow:0 10px 18px -10px rgba(15,30,140,0.5);
}
.token-btn-primary:hover{
  background:var(--bb-2);border-color:var(--bb-2);color:#fff;
}
.token-btn-x{
  width:42px;height:42px;padding:0;justify-content:center;
  background:var(--ink);color:#fff;border-color:var(--ink);
  border-radius:50%;
}
.token-btn-x:hover{ background:var(--bb);border-color:var(--bb);color:#fff; }
.token-btn-x svg{ width:16px;height:16px; }
.token-btn.is-disabled, .token-btn-x.is-disabled{
  opacity:.55;cursor:default;pointer-events:none;
}
.live-dot{ width:7px;height:7px;border-radius:50%;background:var(--bb); box-shadow:0 0 0 0 rgba(29,61,240,.7); animation:liveBlink 1.4s ease-in-out infinite; }
@keyframes liveBlink{ 50%{ box-shadow:0 0 0 6px rgba(29,61,240,0); } }
body[data-state="offline"] .live-dot{ background:var(--wilt); animation:none; }

/* ============================================================
   THE GARDEN BED
   ============================================================ */
.garden{
  margin-top:clamp(60px,8vh,100px);
  position:relative;
}
.garden-head{ text-align:center; max-width:760px; margin:0 auto 28px; }
.garden-head h3{
  font-family:var(--f-display);font-weight:700;font-style:italic;
  font-size:clamp(1.6rem,3.6vw,2.4rem);
  color:var(--ink);margin:6px 0 8px;
}
.garden-head .sub{ font-size:.96rem;color:var(--ink-2); }

.bed{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:20px 4px;align-items:end;
  padding-top:50px;padding-bottom:24px;
  min-height:380px;
  position:relative;
}
.bed-placeholder{
  grid-column:1/-1;text-align:center;padding:60px 0;
  font-family:var(--f-mono);font-size:.9rem;color:var(--soft);
}

/* a plant slot: positioned individually so SVG sits on the soil line */
/* a plant cell: tag flows in flex above its plant-holder, then the holder
   contains the SVG sized to the plant's actual height . no big empty gap. */
.plant{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  text-decoration:none;color:var(--ink);cursor:pointer;background:transparent;
  border:0;padding:0;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.plant:hover{ transform:translateY(-6px); }

/* tag flows in document order, sitting right above the plant. The little
   ink stem extends from its bottom-center down to the plant top. */
.plant-tag{
  position:relative;
  background:#fff8e0;color:var(--ink);
  padding:5px 11px;border-radius:6px;
  font-family:var(--f-hand);font-size:.82rem;
  white-space:nowrap;
  border:1.5px solid var(--ink);border-bottom-width:2.5px;
  box-shadow:1.5px 1.5px 0 rgba(0,0,0,.18);
  margin-bottom:6px;
  z-index:1;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, background .22s ease;
}
.plant:hover .plant-tag{
  transform:scale(1.08);
  background:#ffffff;
  box-shadow:2.5px 2.5px 0 rgba(0,0,0,0.22), 0 8px 18px -6px rgba(29,61,240,0.45);
}
.plant-tag::before{
  content:"";position:absolute;left:50%;top:100%;
  width:1.5px;height:6px;background:var(--ink);
  transform:translateX(-50%);
}

/* live stats tooltip slides in just under the tag on hover */
.plant-stats{
  position:absolute;top:36px;left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:rgba(255,255,255,0.96);
  color:var(--ink);
  border:1.5px solid var(--bb);
  border-radius:999px;
  padding:4px 12px;
  font-family:var(--f-mono);font-size:.7rem;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
  z-index:3;
  box-shadow:0 8px 16px -6px rgba(15,30,140,0.35);
}
.plant-stats .ps-dot{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--bb);margin:0 6px 1px;vertical-align:middle;
}
.plant:hover .plant-stats{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* the SVG holder: width fixed at 120px, height inferred from the SVG's own
   viewBox (each plant returns its own tight totalH). */
.plant-holder{
  width:120px;
  display:flex;align-items:flex-end;justify-content:center;
}
.plant .plant-svg{
  display:block;
  width:120px;
  height:auto;          /* respect SVG viewBox aspect ratio per plant */
  transition:filter .25s ease;
}
.plant:hover .plant-svg{
  filter:drop-shadow(0 0 18px rgba(29,61,240,0.45)) drop-shadow(0 4px 6px rgba(15,30,140,0.25));
}
.plant-status{
  margin-top:2px;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;padding:1px 6px;border-radius:999px;
  background:rgba(255,255,255,0.78);
}
.plant[data-status="healthy"] .plant-status{ color:var(--ok); }
.plant[data-status="growing"] .plant-status{ color:var(--grow); }
.plant[data-status="wilting"] .plant-status{ color:var(--wilt); }
.plant[data-status="dormant"] .plant-status{ color:var(--dorm); }

/* plant sway when healthy */
.plant[data-status="healthy"] .plant-svg{ animation:swayHappy 5.5s ease-in-out infinite; transform-origin:50% 100%; }
.plant[data-status="growing"] .plant-svg{ animation:swayHappy 7.5s ease-in-out infinite; transform-origin:50% 100%; }
.plant[data-status="wilting"] .plant-svg{ animation:swayWilt  4s   ease-in-out infinite; transform-origin:50% 100%; filter:grayscale(.35); }
.plant[data-status="dormant"] .plant-svg{ transform-origin:50% 100%; filter:grayscale(.6) brightness(.85); opacity:.78; }
@keyframes swayHappy{ 50%{ transform:rotate(1.6deg); } }
@keyframes swayWilt{ 50%{ transform:rotate(-3.5deg); } }

/* the walking mascot below the bed */
.walker{
  position:absolute;left:0;bottom:6px;
  width:80px;height:80px;pointer-events:none;
  animation:walkAcross 24s linear infinite;
  z-index:3;
}
.walker img{ width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 6px 4px rgba(40,30,10,0.3));
  animation:walkBob .8s ease-in-out infinite;
}
@keyframes walkAcross{
  0%   { left:-6%; transform:scaleX(1); }
  48%  { left:96%; transform:scaleX(1); }
  50%  { left:96%; transform:scaleX(-1); }
  98%  { left:-6%; transform:scaleX(-1); }
  100% { left:-6%; transform:scaleX(1); }
}
@keyframes walkBob{ 50%{ transform:translateY(-3px); } }

/* ============================================================
   WOODEN STAKE (CA)
   ============================================================ */
.stake-zone{
  margin-top:clamp(60px,8vh,100px);
  display:flex;flex-direction:column;align-items:center;gap:24px;
  padding:24px 0;
}
.stake{
  position:relative;display:flex;flex-direction:column;align-items:center;
  padding:0;background:transparent;cursor:pointer;
  filter:drop-shadow(0 8px 10px rgba(40,30,10,0.35));
  transition:transform .14s ease;
}
.stake:hover{ transform:translateY(-3px); }
.stake-svg{ width:min(360px,82vw);height:auto; }
.stake-text{
  position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  width:78%;
  pointer-events:none;
}
.stake-kicker{
  font-family:var(--f-mono);font-size:.6rem;color:rgba(255,245,210,0.92);
  letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 1px 0 rgba(40,20,5,0.55);
}
.stake-ca{
  font-family:var(--f-mono);font-size:.88rem;color:#fff8e6;
  font-weight:400;letter-spacing:.04em;
  text-shadow:0 1px 0 rgba(40,20,5,0.6),0 0 2px rgba(255,240,200,0.3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.stake-hint{
  font-family:var(--f-hand);font-style:italic;font-size:.72rem;color:rgba(255,245,210,0.82);
  margin-top:4px;
}
.stake.is-copied .stake-svg path:nth-of-type(2){ fill:#7ab63d; }
.stake.is-copied .stake-hint{ color:#dffbcd; }

.primary-cta{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 22px 11px 11px;
  background:var(--bb);color:#fff;
  border-radius:999px;
  font-family:var(--f-display);font-weight:700;font-size:1.04rem;font-style:italic;
  text-decoration:none;
  box-shadow:0 10px 20px -8px rgba(15,30,140,0.5);
  transition:background .15s ease,transform .15s ease;
}
.primary-cta:hover{ background:var(--bb-2); transform:translateY(-2px); color:#fff; }
.primary-cta.is-disabled{ background:#aab2cc; cursor:default; pointer-events:none; }
.primary-cta img{ width:34px;height:34px;background:#fff;border-radius:50%;padding:2px; }

/* ============================================================
   GARDENER'S NOTEBOOK
   ============================================================ */
.notebook{
  margin-top:clamp(50px,7vh,80px);
  max-width:760px;margin-left:auto;margin-right:auto;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:10px;
  padding:24px clamp(20px,4vw,34px) 30px;
  position:relative;
  box-shadow:6px 6px 0 rgba(40,30,10,0.16);
  background-image:repeating-linear-gradient(0deg, transparent 0 28px, rgba(40,30,10,0.06) 28px 29px);
}
.notebook::before{
  content:"";position:absolute;left:36px;top:0;bottom:0;width:1.5px;
  background:rgba(180,40,30,0.45);
}
.notebook-head{
  display:flex;align-items:center;gap:14px;margin-bottom:14px;
}
.notebook-head img{ width:64px;height:64px;flex:0 0 auto; }
.notebook-head h3{
  font-family:var(--f-display);font-weight:700;font-style:italic;
  font-size:1.5rem;color:var(--ink);margin-top:4px;
}
.notes{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:8px;
}
.note{
  font-family:var(--f-hand);font-size:1rem;color:var(--ink);
  padding:4px 0 4px 22px;
  border-left:0;line-height:1.5;
}
.note .n-when{
  font-family:var(--f-mono);font-size:.7rem;color:var(--soft);margin-right:7px;
}
.note .n-name{ font-family:var(--f-display);font-style:italic;font-weight:700;color:var(--bb-deep); }
.note .n-num{ font-family:var(--f-mono);font-size:.84rem;color:var(--ink); }
.notebook-meta{
  font-family:var(--f-mono);font-size:.74rem;color:var(--soft);
  margin-top:18px;border-top:1px dashed rgba(40,30,10,.25);padding-top:14px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  max-width:780px;margin:clamp(50px,7vh,90px) auto 60px;
  padding:18px clamp(20px,4vw,40px);text-align:center;
  font-family:var(--f-hand);font-size:.86rem;
  color:rgba(255,245,228,0.92);
}
.foot a{ color:#fff;border-bottom:1px dotted currentColor; }
.foot-disc{ font-size:.74rem;opacity:.78;margin-top:6px; }

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position:fixed;left:50%;bottom:24px;z-index:200;
  transform:translate(-50%,180%);
  max-width:min(420px,90vw);
  background:var(--paper);color:var(--ink);
  padding:11px 18px;border-radius:999px;
  font-family:var(--f-mono);font-size:.84rem;
  border:1.5px solid var(--ink);
  box-shadow:0 18px 30px -10px rgba(0,0,0,0.45);
  transition:transform .35s cubic-bezier(.2,.9,.25,1);
}
.toast.show{ transform:translate(-50%,0); }

/* ============================================================
   POPOVER (species card)
   ============================================================ */
.popover{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;
  background:rgba(50,30,15,0.45);
  padding:24px;cursor:zoom-out;
  animation:fadeIn .25s ease;
}
.popover[hidden]{display:none;}
@keyframes fadeIn{ from{opacity:0;} }
.popover-card{
  max-width:520px;width:100%;
  background:var(--paper);color:var(--ink);
  padding:22px 26px 24px;
  border-radius:14px;border:2px solid var(--ink);
  box-shadow:0 24px 50px -10px rgba(0,0,0,.5);
  cursor:default;position:relative;
  background-image:repeating-linear-gradient(0deg, transparent 0 26px, rgba(40,30,10,0.05) 26px 27px);
  animation:popIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn{ 0%{opacity:0;transform:scale(.86);} 100%{opacity:1;transform:scale(1);} }
.pc-head{
  display:flex;align-items:flex-start;gap:12px;
  border-bottom:1.5px dashed rgba(40,30,10,.3);
  padding-bottom:12px;margin-bottom:12px;
}
.pc-svg{ width:64px;height:96px;flex:0 0 auto; }
.pc-title{
  font-family:var(--f-display);font-weight:700;font-style:italic;font-size:1.5rem;color:var(--ink);
}
.pc-binomial{
  font-family:var(--f-hand);font-style:italic;font-size:.92rem;color:var(--soft);
}
.pc-status{
  display:inline-block;margin-top:4px;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
  background:#fff;border:1.5px solid currentColor;
}
.pc-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:6px;
}
.pc-row{ display:flex;flex-direction:column;font-family:var(--f-hand); }
.pc-row .k{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;
  color:var(--soft);text-transform:uppercase;
}
.pc-row .v{
  font-family:var(--f-display);font-weight:700;font-size:1.16rem;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.pc-row .v.up   { color:var(--ok); }
.pc-row .v.down { color:var(--wilt); }
.pc-link{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  padding:7px 14px;background:var(--bb);color:#fff;
  border-radius:999px;font-family:var(--f-display);font-style:italic;font-weight:700;
  text-decoration:none;font-size:.94rem;
}
.pc-link:hover{ background:var(--bb-2);color:#fff; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none!important; transition:none!important; }
}
@media (max-width:840px){
  .hero{ grid-template-columns:1fr;gap:24px; }
  .hero-mascot{ margin:0 auto; }
  .hero-text{ text-align:center; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat-wide{ grid-column:span 2; }
  .token-bar{ justify-content:center; }
  .socket-x, .socket-dex{ position:static;margin:8px auto; }
  .brand{ top:auto;bottom:14px;right:14px; }
}
@media (max-width:520px){
  .brand-text i{ display:none; }
  .socket-tag{ display:none; }
  .bed{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
}

a:focus-visible,button:focus-visible{
  outline:2px solid var(--bb);outline-offset:3px;border-radius:8px;
}