/* Drifters App — warm-pastel app shell.
   Mobile-first at 390px; reflows to a desktop left-rail via container query.
   Deliberately NOT the blog's dark/teal meditative look — this is a soft, alive place. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* palette — warm pastels */
  --bg-0:#f4ecf8; --bg-1:#efe6f7; --bg-2:#fbeef1;
  --surface:#fffdfe; --surface-2:#f7f0fa; --surface-line:#ece0f0;
  --ink:#40384f; --ink-soft:#6a6078; --muted:#948aa3;
  --rose:#ef9bb0; --rose-deep:#e0789a; --lav:#b9a7e6; --lav-deep:#9b83d8;
  --peach:#f6c6a0; --gold:#f0b64e; --mint:#8fd6b6;
  --ok:#5bbd8e; --bad:#e0708a;
  /* elevation */
  --sh-1:0 1px 2px rgba(74,58,90,.06), 0 2px 8px rgba(74,58,90,.05);
  --sh-2:0 4px 14px rgba(103,80,140,.12), 0 1px 3px rgba(103,80,140,.08);
  --sh-glow:0 8px 30px rgba(155,131,216,.22);
  /* geometry */
  --r-sm:10px; --r:16px; --r-lg:22px; --r-pill:999px;
  --hud-h:58px; --tab-h:64px; --maxw:560px;
  --fs-h1:clamp(1.5rem,4.5vw,2rem);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  font-synthesis:none; -webkit-text-size-adjust:100%;
}

html, body { margin:0; height:100%; }
body {
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(120% 80% at 15% 0%, var(--bg-2), transparent 60%),
    radial-gradient(120% 90% at 90% 10%, #eae1f6, transparent 55%),
    linear-gradient(170deg, var(--bg-1), var(--bg-0));
  background-attachment: fixed;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--lav-deep); text-decoration:none; }
a:hover { text-decoration:underline; }
h1 { margin:0; }

/* ---- app shell ---- */
.app {
  height:100dvh;            /* fixed shell height: chrome pinned, main region scrolls INSIDE */
  overflow:hidden;
  display:grid;
  grid-template-rows: calc(var(--hud-h) + var(--safe-t)) 1fr calc(var(--tab-h) + var(--safe-b));
  grid-template-areas: "hud" "main" "tab";
}
.app-main {
  grid-area:main;
  min-height:0;            /* let the 1fr row actually clip so the child scrolls, not the page */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:18px 16px 28px;  /* the tab row already reserves its own height in the grid */
}
.app-main > * { width:100%; max-width:var(--maxw); margin-inline:auto; }

/* ---- HUD (top, always visible) ---- */
.hud {
  grid-area:hud;
  position:sticky; top:0; z-index:20;
  height:calc(var(--hud-h) + var(--safe-t));
  padding:var(--safe-t) 14px 0;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:saturate(1.3) blur(12px);
  -webkit-backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid var(--surface-line);
}
.hud--out { justify-content:space-between; }
.hud__brand { display:flex; align-items:center; gap:7px; font-weight:700; color:var(--ink); font-size:1.05rem; letter-spacing:.2px; }
.hud__logo { color:var(--lav-deep); }
.hud__creature { display:flex; align-items:center; gap:10px; min-width:0; }
.hud__avatar {
  width:38px; height:38px; flex:0 0 38px; border-radius:50%;
  display:grid; place-items:center; font-weight:700; color:#fff; font-size:1.05rem;
  background:linear-gradient(135deg, var(--a,#f0c) , var(--b,#a9f));
  box-shadow: var(--sh-1), inset 0 0 0 2px rgba(255,255,255,.5);
}
.hud__who { display:flex; flex-direction:column; min-width:0; line-height:1.15; }
.hud__name { font-weight:700; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38vw; }
.hud__known { font-size:.72rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hud__wallet { display:flex; align-items:center; gap:10px; }
.hud__glimmer {
  display:inline-flex; align-items:center; gap:5px;
  background:linear-gradient(135deg,#fff6df,#fde7cf);
  color:#9a6a12; font-weight:700; padding:6px 12px 6px 9px; border-radius:var(--r-pill);
  box-shadow:var(--sh-1); border:1px solid #f4d9a6;
}
.hud__num { font-variant-numeric:tabular-nums; }
/* A <button> since S97 (the weather faucet) — hence the explicit reset: it must keep
   looking like the quiet round chip it has always been, not a default form control. */
.hud__weather { display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%; color:var(--lav-deep); background:var(--surface-2); box-shadow:var(--sh-1);
  border:0; padding:0; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .16s ease, box-shadow .16s ease; }
.hud__weather:hover { box-shadow:var(--sh-2, var(--sh-1)); }
.hud__weather:active { transform:scale(.92); }
.hud__weather:focus-visible { outline:2px solid var(--lav-deep); outline-offset:2px; }
.ico { width:20px; height:20px; display:block; }
.ico--gold { color:var(--gold); width:18px; height:18px; }

/* ---- bottom tab-bar ---- */
.tabbar {
  grid-area:tab;
  position:sticky; bottom:0; z-index:20;
  height:calc(var(--tab-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  display:flex; align-items:stretch;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(1.3) blur(12px);
  -webkit-backdrop-filter:saturate(1.3) blur(12px);
  border-top:1px solid var(--surface-line);
}
.tab {
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--muted); text-decoration:none; font-size:.68rem; font-weight:600; letter-spacing:.2px;
  position:relative; -webkit-tap-highlight-color:transparent;
}
.tab:hover { text-decoration:none; color:var(--ink-soft); }
.tab__ico { width:24px; height:24px; transition:transform .18s ease; }
.tab.is-active { color:var(--lav-deep); }
.tab.is-active .tab__ico { transform:translateY(-1px) scale(1.06); }
.tab.is-active::before {
  content:""; position:absolute; top:8px; width:34px; height:32px; border-radius:var(--r-pill);
  background:radial-gradient(closest-side, rgba(155,131,216,.20), transparent); z-index:-1;
}

/* ---- reusable bits ---- */
.h1 { font-size:var(--fs-h1); font-weight:800; letter-spacing:-.02em; }
.muted { color:var(--muted); }
.center { text-align:center; }
.pill { display:inline-block; padding:3px 12px; border-radius:var(--r-pill); background:var(--surface-2); color:var(--lav-deep); font-size:.78rem; font-weight:700; text-transform:capitalize; box-shadow:var(--sh-1); }
.pill--soon { background:#f3ead0; color:#a07b1e; }
.card { background:var(--surface); border:1px solid var(--surface-line); border-radius:var(--r-lg); padding:26px 22px; box-shadow:var(--sh-2); }
.card.center > * + * { margin-top:12px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:var(--r-pill); border:0; cursor:pointer;
  font:inherit; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--lav), var(--lav-deep));
  box-shadow:var(--sh-2); transition:transform .12s ease, box-shadow .12s ease; text-decoration:none;
}
.btn:hover { text-decoration:none; transform:translateY(-1px); box-shadow:var(--sh-glow); }
.btn:active { transform:translateY(0); }
.btn--full { width:100%; }
.btn--sm { padding:8px 15px; font-size:.86rem; }
.btn--ghost { background:var(--surface); color:var(--lav-deep); border:1px solid var(--surface-line); box-shadow:var(--sh-1); }

/* ---- landing / hero ---- */
.hero { text-align:center; padding-top:8px; }
.hero__glow { height:120px; margin:-6px auto 6px; width:min(320px,86%);
  background:radial-gradient(closest-side, rgba(239,155,176,.4), rgba(185,167,230,.25) 55%, transparent 72%);
  filter:blur(4px); border-radius:50%; }
.hero__title { font-size:clamp(1.8rem,7vw,2.6rem); font-weight:800; letter-spacing:-.03em; line-height:1.12; margin-top:-46px; }
.hero__sub { color:var(--ink-soft); max-width:40ch; margin:14px auto 0; }
.hero__foot { margin-top:20px; font-size:.82rem; color:var(--muted); }
.hero__foot a { color:var(--muted); text-decoration:underline; }

/* ---- auth card ---- */
.auth { background:var(--surface); border:1px solid var(--surface-line); border-radius:var(--r-lg); box-shadow:var(--sh-2); padding:8px; margin:22px auto 0; max-width:380px; text-align:left; }
.auth__tabs { display:flex; background:var(--surface-2); border-radius:var(--r); padding:4px; gap:4px; }
.auth__tab { flex:1; border:0; background:transparent; font:inherit; font-weight:700; color:var(--muted); padding:9px; border-radius:12px; cursor:pointer; }
.auth__tab.is-active { background:var(--surface); color:var(--ink); box-shadow:var(--sh-1); }
.auth__form { padding:16px 12px 12px; display:flex; flex-direction:column; gap:12px; }
.field { display:flex; flex-direction:column; gap:5px; font-size:.82rem; font-weight:600; color:var(--ink-soft); }
.field input {
  font:inherit; font-weight:500; color:var(--ink); padding:11px 13px; border-radius:12px;
  border:1.5px solid var(--surface-line); background:var(--surface-2); outline:none;
}
.field input:focus { border-color:var(--lav); background:var(--surface); box-shadow:0 0 0 3px rgba(155,131,216,.16); }
.auth__note { font-size:.76rem; color:var(--muted); margin:0; }
.auth__err { font-size:.82rem; color:var(--bad); font-weight:600; margin:0; }
.auth__ok { font-size:.86rem; color:var(--ok); font-weight:600; }
.auth__forgot { display:block; width:fit-content; margin:-2px auto 2px; border:0; background:transparent;
  font:inherit; font-size:.8rem; font-weight:600; color:var(--lav-deep); cursor:pointer;
  text-decoration:underline; text-underline-offset:2px; }
.auth__forgot:hover { color:var(--rose-deep); }
/* .field sets display:flex, which would defeat the bare [hidden] attribute — restore it. */
.field[hidden], .auth__forgot[hidden] { display:none; }

/* ---- grove ---- */
.grove { text-align:center; }
.grove__scene {
  position:relative; height:230px; margin:0 auto 4px; width:min(360px,92%);
  border-radius:var(--r-lg); overflow:hidden;
  background:
    radial-gradient(120% 120% at 50% 20%, color-mix(in srgb, var(--a,#f0c) 40%, #fff) , transparent 62%),
    linear-gradient(180deg, #fff8fb, #f3ecfa);
  box-shadow:var(--sh-2), inset 0 -30px 40px rgba(155,131,216,.10);
  display:grid; place-items:center;
}
.grove__halo { position:absolute; inset:0; margin:auto; width:180px; height:180px; border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--b,#a9f) 45%, transparent), transparent 72%); filter:blur(3px); }
.grove__creature {
  position:relative; width:118px; height:118px; border-radius:48% 52% 50% 50%/54% 54% 46% 46%;
  border:0; padding:0; cursor:pointer; color:inherit; font:inherit;
  background:linear-gradient(140deg, var(--a,#f7c) , var(--b,#b9a7e6));
  box-shadow:var(--sh-glow), inset 0 6px 18px rgba(255,255,255,.6), inset 0 -10px 22px rgba(120,90,170,.22);
  display:grid; place-items:center; animation:bob 5.5s ease-in-out infinite;
}
.grove__creature[data-stage="egg"] { border-radius:50% 50% 48% 48%/60% 60% 40% 40%; width:96px; height:120px; animation:wobble 4.2s ease-in-out infinite; }
.grove__creature.is-poked { animation:poke .55s cubic-bezier(.36,.07,.19,.97); }
.grove__mono { font-size:2.4rem; font-weight:800; color:#fff; text-shadow:0 2px 6px rgba(120,90,170,.35); opacity:.9; pointer-events:none; }
@keyframes bob { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
@keyframes wobble { 0%,100%{ transform:rotate(-3deg) } 50%{ transform:rotate(3deg) } }
@keyframes poke { 0%{transform:scale(1) rotate(0)} 25%{transform:scale(1.1) rotate(-6deg)} 55%{transform:scale(.96) rotate(5deg)} 80%{transform:scale(1.03) rotate(-2deg)} 100%{transform:scale(1) rotate(0)} }
/* The name-seeded creature curled inside the egg — flat silhouette at its own hero-scale
   opacity (NOT the Almanac thumbnail's .16). Curiosity, not a spoiler; full colour is the hatch. */
.grove__svg--egg .drg-silhouette { filter:brightness(0); opacity:.36; }
/* Warm-tap: the shape inside stirs (darkens briefly) — the wait finally does something. */
.grove__creature.is-poked .drg-silhouette { animation:silStir .6s ease-out; }
@keyframes silStir { 0%{opacity:.36} 35%{opacity:.6} 100%{opacity:.36} }
.grove__name { font-size:clamp(1.5rem,6vw,2rem); font-weight:800; letter-spacing:-.02em; margin-top:10px; }
.grove__stage { margin:6px 0; }
.grove__persona { font-style:italic; color:var(--lav-deep); max-width:36ch; margin:8px auto 0; font-size:.95rem; line-height:1.45; }
.grove__persona[hidden] { display:none; }
.grove__known { color:var(--ink-soft); max-width:34ch; margin:6px auto 0; }
.grove__drift { color:var(--rose-deep); font-weight:600; max-width:34ch; margin:8px auto 0; font-size:.9rem; }
.grove__weather { margin:12px auto 0; max-width:34ch; font-size:.86rem; font-style:italic; }
.grove__actions { display:flex; flex-direction:column; gap:10px; max-width:320px; margin:20px auto 0; }
.grove__hint { margin-top:16px; font-size:.86rem; }
.grove__hint b { color:var(--gold); }

/* ---- desktop: the Grove home base becomes a two-column dashboard ----
   The list screens (Wander/Market/Dex) already fill the width with their own
   grids; only the Grove was a lone centered phone-column adrift on a wide screen.
   At >=900px the creature scene sits left and its name/actions/almanac sit right
   — the SAME content, no nags added, just arranged like the app it is. Mobile is
   untouched: .grove__side is a transparent block until this query, and the
   layout is scoped with :has() to the hatched grove only (egg/adopt stay
   centered — they're transient). */
@media (min-width:900px){
  .app-main > .grove:has(.grove__side){ max-width:860px; }
  .grove:has(.grove__side){
    display:grid;
    grid-template-columns:minmax(320px,390px) minmax(0,1fr);
    column-gap:52px;
    align-items:center;
    text-align:left;
    /* fill the tall desktop viewport and center the block, so the composition
       reads as composed rather than "content ran out at the top." Grows past
       and scrolls normally if the almanac is opened. */
    min-height:calc(100dvh - var(--hud-h) - var(--safe-t) - 90px);
    align-content:center;
  }
  .grove:has(.grove__side) .grove__scene{ height:360px; width:100%; margin:0; }
  .grove:has(.grove__side) .grove__creature{ width:172px; height:172px; }
  .grove__side{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
  .grove__side > *{ margin-left:0; margin-right:0; max-width:44ch; text-align:left; }
  .grove__side .grove__name{ margin-top:0; }
  .grove__side .grove__actions{ align-self:stretch; max-width:380px; margin-top:22px; }
  .grove__side .almanac{ align-self:stretch; margin-top:8px; }
}

/* ---- market ---- */
.market > .muted { max-width:44ch; margin:6px 0 0; }
.market__earn { background:var(--surface-2); border:1px solid var(--surface-line); border-radius:var(--r); padding:12px 15px; margin:14px 0 0; color:var(--ink-soft); font-size:.9rem; line-height:1.5; max-width:48ch; }
.market__earn b { color:var(--lav-deep); font-weight:700; }
.shop-grid { display:grid; grid-template-columns:1fr; gap:12px; margin-top:18px; }
.shop-item { display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--surface-line); border-radius:var(--r); padding:12px 14px; box-shadow:var(--sh-1); }
.shop-item__art { width:52px; height:52px; flex:0 0 52px; border-radius:14px; box-shadow:var(--sh-1); }
.shop-item__art--grove { background:linear-gradient(160deg,#cdeccb,#a7d6c8); }
.shop-item__art--companion { background:linear-gradient(160deg,#f7d7a0,#f2a6c0); }
.shop-item__body { display:flex; flex-direction:column; gap:2px; flex:1; }
.shop-item__name { font-weight:700; }
.shop-item__blurb { font-size:.82rem; color:var(--muted); }
.shop-item__price { font-weight:800; color:#9a6a12; white-space:nowrap; }
/* --- Drift Market interactive grid (Pulse 4) --------------------------------- */
.market__body { margin-top:16px; }
.shop-group { font-size:.96rem; font-weight:800; color:var(--ink); margin:22px 0 4px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.shop-group:first-child { margin-top:6px; }
.shop-group__tag { font-size:.76rem; font-weight:600; color:var(--muted); }
.shop-group + .shop-grid { margin-top:10px; }
.shop-item__art { overflow:hidden; }
.shop-art-svg { width:100%; height:100%; display:block; }
.shop-item__action { flex:0 0 auto; display:flex; align-items:center; }
.shop-item__action .btn { white-space:nowrap; }
.shop-item__worn { font-size:.82rem; font-weight:800; color:var(--lav-deep); white-space:nowrap; }
.shop-item.is-worn { border-color:var(--lav); box-shadow:0 0 0 2px rgba(155,131,216,.18), var(--sh-1); }
.shop-item__locked { display:flex; flex-direction:column; align-items:flex-end; font-weight:800; color:var(--muted); white-space:nowrap; line-height:1.15; }
.shop-item__gap { font-size:.68rem; font-weight:600; color:var(--muted); opacity:.85; }
.shop-egg-note { font-size:.86rem; color:var(--ink-soft); background:var(--surface-2); border-radius:var(--r); padding:11px 14px; margin:14px 0 2px; }
.shop-toast { position:fixed; left:50%; bottom:calc(var(--tabbar-h,64px) + 16px); transform:translate(-50%,10px);
  background:var(--ink); color:#fff; font-size:.86rem; font-weight:600; padding:10px 16px; border-radius:var(--r-pill);
  box-shadow:0 8px 24px rgba(40,30,60,.28); opacity:0; pointer-events:none; z-index:60; max-width:82vw; text-align:center;
  transition:opacity .22s ease, transform .22s ease; }
.shop-toast.is-in { opacity:1; transform:translate(-50%,0); }
@media (min-width:720px){ .shop-toast { bottom:24px; } }
/* whole card is a tap target (≥48px): opens the try-on overlay */
.shop-item--btn { width:100%; font:inherit; color:inherit; text-align:left; cursor:pointer; -webkit-appearance:none; appearance:none; transition:transform .12s ease; }
.shop-item--btn:active { transform:scale(.985); }
.shop-item--btn:focus-visible { outline:2px solid var(--lav-deep); outline-offset:2px; }
.shop-item__owned { font-size:.8rem; font-weight:800; color:var(--muted); white-space:nowrap; }
.shop-item__price--buy { color:var(--lav-deep); }
.shop-item__price--soon { color:var(--muted); }
.shop-item__bar { height:6px; border-radius:var(--r-pill); background:var(--surface-2); overflow:hidden; margin:9px 0 1px; box-shadow:inset 0 1px 2px rgba(74,58,90,.08); }
.shop-item__bar-fill { display:block; height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--lav),var(--rose)); }
.market-count { font-size:.82rem; font-weight:700; color:var(--ink-soft); margin:14px 0 2px; }
/* try-it-on overlay (reuses .reveal) */
.reveal--shop .reveal__art { width:190px; height:190px; }
.reveal--shop .reveal__creature { width:100%; height:100%; display:block; }
.reveal__worn { font-weight:800; color:var(--lav-deep); margin:12px auto 2px; }
.tryon-need { margin:14px auto 4px; max-width:30ch; }
.tryon-need .satchel__bar { margin:0 0 8px; }

/* ---- made-by ---- */
.madeby { text-align:center; padding-top:12px; }
.madeby h1 { margin-bottom:6px; }
.madeby p { text-align:left; color:var(--ink-soft); max-width:46ch; margin:14px auto 0; }
.madeby .btn { margin-top:22px; }

/* ---- coming soon ---- */
.soon { text-align:center; padding-top:26px; }
.soon__mark { font-size:2.4rem; color:var(--lav); filter:drop-shadow(0 4px 10px rgba(155,131,216,.4)); }
.soon__body { color:var(--ink-soft); max-width:38ch; margin:12px auto 16px; }

/* ---- desktop: bottom bar becomes a left rail ----
   (media query, not container: the shell IS the viewport-width element, so it must
   restyle itself — an element can't match its own @container query.) */
@media (min-width: 720px) {
  .app {
    grid-template-columns: 84px 1fr;
    grid-template-rows: calc(var(--hud-h) + var(--safe-t)) 1fr;
    grid-template-areas: "hud hud" "tab main";
  }
  .app-main { padding-top:26px; }
  .app-main > * { max-width:600px; }
  .tabbar {
    position:sticky; top:calc(var(--hud-h) + var(--safe-t)); height:auto; align-self:start;
    flex-direction:column; gap:6px; padding:16px 8px; border-top:0; border-right:1px solid var(--surface-line);
    background:transparent; backdrop-filter:none;
  }
  .tab { flex:0 0 auto; padding:10px 4px; border-radius:14px; font-size:.66rem; }
  .tab.is-active { background:var(--surface); box-shadow:var(--sh-1); }
  .tab.is-active::before { display:none; }
}

/* ===== Pulse 2 — Wander loop + Satchel ===================================== */

/* rarity tiers (published, honest) */
.r-common   { --tier:#9a90ab; }
.r-uncommon { --tier:#4bb391; }
.r-treasure { --tier:#e6a52e; }
.curio__tier { font-size:.6rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--tier,#9a90ab); }

/* tab "something to collect" badge */
.tab { }
.tab__badge { position:absolute; top:7px; right:calc(50% - 18px); width:9px; height:9px; border-radius:50%;
  background:var(--rose-deep); box-shadow:0 0 0 2px var(--surface), 0 0 8px rgba(224,120,154,.7); animation:badgePulse 1.8s ease-in-out infinite; }
@keyframes badgePulse { 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.25); opacity:.75 } }

/* curio glyph base */
.curio-art { width:100%; height:100%; display:block; }

/* ---- Grove additions ---- */
.grove__scene { position:relative; }
.grove__scene--empty { background:linear-gradient(180deg,#fff8fb,#efe6f7); }
.grove__egg-ghost { font-size:3rem; color:var(--lav); opacity:.55; filter:drop-shadow(0 6px 14px rgba(155,131,216,.4)); }
.grove__keepsake { position:absolute; right:26px; bottom:26px; width:46px; height:46px; padding:7px;
  background:var(--surface); border-radius:50%; box-shadow:var(--sh-2); border:1px solid var(--surface-line);
  animation:bob 6.5s ease-in-out infinite; animation-delay:-2s; }
.grove__keepsake[hidden] { display:none; }
.grove__float { position:absolute; left:50%; top:34%; transform:translateX(-50%); font-weight:800; color:var(--gold);
  pointer-events:none; text-shadow:0 2px 8px rgba(240,182,78,.5); }
.grove__float.is-up { animation:floatUp 1s ease-out forwards; }
@keyframes floatUp { 0%{ opacity:0; transform:translate(-50%,6px) scale(.8) } 25%{ opacity:1 } 100%{ opacity:0; transform:translate(-50%,-34px) scale(1.1) } }
.grove__waiting { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:13px 16px;
  border-radius:var(--r-pill); background:linear-gradient(135deg,#fff2d6,#ffe0c9); color:#9a5a12; font-weight:700;
  box-shadow:var(--sh-2); border:1px solid #f4d0a0; }
.grove__waiting:hover { text-decoration:none; transform:translateY(-1px); }
.grove__waiting-dot { width:9px; height:9px; border-radius:50%; background:var(--rose-deep); animation:badgePulse 1.6s infinite; }
.grove__wander-status { display:block; text-align:center; }
.grove__wander-status:hover { text-decoration:none; }

/* adopt form (in-app onboarding) */
.adopt-form { display:flex; flex-direction:column; gap:12px; max-width:340px; margin:18px auto 0; }
.adopt-input { font:inherit; font-weight:600; text-align:center; font-size:1.1rem; color:var(--ink);
  padding:13px 14px; border-radius:14px; border:1.5px solid var(--surface-line); background:var(--surface); outline:none; }
.adopt-input:focus { border-color:var(--lav); box-shadow:0 0 0 3px rgba(155,131,216,.16); }
.adopt-preview { min-height:1.1em; font-size:.86rem; font-weight:600; color:var(--lav-deep); margin:0; }

/* ---- Wander view ---- */
.wander { text-align:center; }
.wander__lead { color:var(--ink-soft); max-width:42ch; margin:8px auto 0; }
.wander__leave { max-width:38ch; margin:14px auto 0; font-size:.84rem; }
.wander__stir { margin:12px auto 0; font-size:.9rem; font-weight:600; color:var(--rose-deep); }
.wander__scene { position:relative; height:150px; border-radius:var(--r-lg); overflow:hidden; margin:6px auto 14px;
  max-width:var(--maxw); box-shadow:var(--sh-2); }
.region-art { width:100%; height:100%; display:block; object-fit:cover; }
.wander__traveller { position:absolute; inset:0; display:grid; place-items:center; font-size:1.8rem; color:#fff;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.4)); animation:bob 3.5s ease-in-out infinite; }
.wander__scene--home .region-art { filter:saturate(1.15) brightness(1.05); }
.wander__home-glow { position:absolute; inset:0; background:radial-gradient(closest-side, rgba(255,240,200,.55), transparent 70%); }
.btn--big { padding:15px 22px; font-size:1.05rem; }

.region-list { display:flex; flex-direction:column; gap:14px; margin:18px 0 6px; }
.region { display:flex; flex-direction:column; text-align:left; padding:0; overflow:hidden; cursor:pointer;
  border:1px solid var(--surface-line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-2);
  font:inherit; color:inherit; transition:transform .12s ease, box-shadow .12s ease; }
.region:hover { transform:translateY(-2px); box-shadow:var(--sh-glow); text-decoration:none; }
.region:active { transform:translateY(0); }
.region.is-sending { opacity:.6; pointer-events:none; }
.region__art { display:block; height:92px; overflow:hidden; }
.region__art .region-art { height:92px; }
.region__body { display:flex; flex-direction:column; gap:5px; padding:12px 15px 14px; }
.region__top { display:flex; align-items:center; gap:10px; }
.region__name { font-weight:800; font-size:1.08rem; }
.region__stir { font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#9a5a12;
  background:#ffe6c2; padding:2px 8px; border-radius:var(--r-pill); }
.region__flav { color:var(--muted); font-size:.88rem; }
.region__foot { display:flex; align-items:center; justify-content:space-between; margin-top:3px; }
.region__prog { font-size:.8rem; font-weight:700; color:var(--ink-soft); }
.region__prog--done { color:var(--ok); }
.region__go { font-weight:800; color:var(--lav-deep); font-size:.9rem; }

/* info panel (honest odds) */
.info { margin:20px auto 0; max-width:var(--maxw); text-align:left; background:var(--surface-2);
  border:1px solid var(--surface-line); border-radius:var(--r); overflow:hidden; }
.info > summary { cursor:pointer; padding:13px 16px; font-weight:700; color:var(--ink-soft); list-style:none; }
.info > summary::-webkit-details-marker { display:none; }
.info > summary::after { content:"＋"; float:right; color:var(--muted); }
.info[open] > summary::after { content:"−"; }
.info__body { padding:0 16px 16px; font-size:.9rem; color:var(--ink-soft); }
.info__body p { margin:8px 0; }
.odds { list-style:none; padding:0; margin:8px 0; display:flex; flex-direction:column; gap:5px; }
.odds li { font-weight:600; }
.odds .r-common, .odds .r-uncommon, .odds .r-treasure { font-weight:800; text-transform:uppercase; font-size:.72rem; color:var(--tier); }

/* ---- Satchel (Dex) ---- */
.satchel__head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.satchel__count { font-weight:700; color:var(--ink-soft); white-space:nowrap; }
.satchel__count b { color:var(--lav-deep); font-size:1.15rem; }
.satchel__bar { height:8px; border-radius:var(--r-pill); background:var(--surface-2); overflow:hidden; margin:12px 0 4px; box-shadow:inset 0 1px 2px rgba(74,58,90,.08); }
.satchel__bar-fill { display:block; height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--lav),var(--rose)); transition:width .5s ease; }
.satchel__lead { max-width:44ch; margin:6px 0 0; }
.satchel__hint { margin:10px 0 0; font-size:.84rem; }
.satchel-groups { display:flex; flex-direction:column; gap:20px; margin-top:20px; }
.satchel-group.is-complete .region-head__name { color:var(--ok); }
.region-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:9px; }
.region-head__name { font-weight:800; font-size:1.02rem; }
.region-head__prog { font-size:.82rem; font-weight:700; color:var(--muted); }
.region-head__done { font-size:.82rem; font-weight:800; color:var(--ok); }
.curio-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.curio { display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 6px 10px; border-radius:var(--r);
  border:1px solid var(--surface-line); background:var(--surface); box-shadow:var(--sh-1); position:relative; min-height:118px; }
button.curio { cursor:pointer; font:inherit; color:inherit; transition:transform .12s ease, box-shadow .12s ease; }
button.curio:hover { transform:translateY(-2px); box-shadow:var(--sh-2); }
.curio--empty { background:var(--surface-2); box-shadow:none; }
.curio__art { width:52px; height:52px; position:relative; }
.curio__art--empty { display:grid; place-items:center; border-radius:14px; border:2px dashed var(--surface-line);
  background:repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(148,138,163,.06) 5px, rgba(148,138,163,.06) 10px); }
.curio__q { font-size:1.6rem; font-weight:800; color:color-mix(in srgb, var(--tier) 60%, var(--muted)); }
.curio__name { font-size:.72rem; font-weight:700; text-align:center; line-height:1.15; }
.curio__name--dim { color:var(--muted); font-weight:600; }
.curio__name--secret { color:color-mix(in srgb, var(--tier) 70%, var(--muted)); font-style:italic; }
.curio__count { position:absolute; right:-6px; bottom:-4px; background:var(--lav-deep); color:#fff; font-size:.62rem;
  font-weight:800; padding:1px 6px; border-radius:var(--r-pill); box-shadow:var(--sh-1); }
.curio__displayed { position:absolute; top:6px; left:6px; background:var(--gold); color:#5a3d05; font-size:.56rem;
  font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:2px 6px; border-radius:var(--r-pill); }
.curio.is-keepsake { border-color:var(--gold); box-shadow:0 0 0 2px rgba(240,182,78,.4), var(--sh-1); }

/* ---- reveal overlay (three tiers) ---- */
.reveal { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:22px;
  background:rgba(46,32,60,.55); backdrop-filter:blur(5px); opacity:0; transition:opacity .25s ease; }
.reveal.is-in { opacity:1; }
.reveal__card { position:relative; width:100%; max-width:340px; text-align:center; padding:26px 22px 22px;
  background:var(--surface); border-radius:var(--r-lg); box-shadow:0 20px 60px rgba(46,32,60,.4);
  transform:translateY(12px) scale(.96); transition:transform .3s cubic-bezier(.2,.9,.3,1.2); }
.reveal.is-in .reveal__card { transform:translateY(0) scale(1); }
.reveal__kicker { font-weight:800; letter-spacing:.02em; color:var(--lav-deep); margin:0 0 10px; text-transform:uppercase; font-size:.76rem; }
.reveal--treasure .reveal__kicker { color:var(--gold); font-size:.92rem; }
.reveal__art { position:relative; width:120px; height:120px; margin:0 auto 6px; display:grid; place-items:center; }
.reveal__glyph { width:104px; height:104px; filter:drop-shadow(0 8px 18px rgba(103,80,140,.3)); animation:revealPop .5s cubic-bezier(.2,.9,.3,1.4); }
.reveal--treasure .reveal__art::before { content:""; position:absolute; inset:-10px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(240,182,78,.5), transparent 70%); animation:treasureGlow 2.4s ease-in-out infinite; }
@keyframes revealPop { 0%{ transform:scale(.3); opacity:0 } 100%{ transform:scale(1); opacity:1 } }
@keyframes treasureGlow { 0%,100%{ transform:scale(1); opacity:.7 } 50%{ transform:scale(1.12); opacity:1 } }
.reveal__name { font-size:1.4rem; font-weight:800; margin:2px 0 4px; }
.reveal__tier { display:inline-block; font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tier); border:1px solid var(--tier); padding:2px 9px; border-radius:var(--r-pill); }
.reveal__flavor { font-style:italic; color:var(--ink-soft); margin:12px auto 6px; max-width:30ch; }
.reveal__sub { font-size:.84rem; margin:6px auto 0; max-width:30ch; }
.reveal__glimmer { font-weight:800; color:#9a6a12; margin:10px 0 0; }
.reveal__actions { display:flex; flex-direction:column; gap:9px; margin-top:18px; }
.reveal__sparkles { position:absolute; inset:0; pointer-events:none; }
.reveal__spark { position:absolute; left:50%; top:50%; width:7px; height:7px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 8px rgba(240,182,78,.9);
  transform:rotate(calc(var(--i) * 45deg)) translateY(-58px) scale(0); animation:sparkOut 1.1s ease-out forwards; animation-delay:calc(var(--i) * 40ms); }
@keyframes sparkOut { 0%{ transform:rotate(calc(var(--i) * 45deg)) translateY(-20px) scale(0); opacity:0 }
  40%{ opacity:1 } 100%{ transform:rotate(calc(var(--i) * 45deg)) translateY(-64px) scale(1); opacity:0 } }

.wander__flash { position:fixed; left:50%; bottom:calc(var(--tab-h) + 16px); transform:translateX(-50%) translateY(8px);
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:var(--r-pill); font-size:.86rem; font-weight:600;
  opacity:0; pointer-events:none; z-index:50; box-shadow:var(--sh-2); }
.wander__flash.is-in { animation:flashIn 2.6s ease forwards; }
@keyframes flashIn { 0%{ opacity:0; transform:translateX(-50%) translateY(8px) } 12%,80%{ opacity:1; transform:translateX(-50%) translateY(0) } 100%{ opacity:0; transform:translateX(-50%) translateY(8px) } }

.is-hatching { }
.is-hatching .grove__creature { animation:hatchPop .9s ease-out; }
@keyframes hatchPop { 0%{ transform:scale(1) } 30%{ transform:scale(1.15) rotate(4deg) } 60%{ transform:scale(.94) } 100%{ transform:scale(1) } }

/* desktop: satchel + region grids get a touch more room */
@media (min-width:720px) {
  .region-list { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
}

@media (prefers-reduced-motion: reduce) {
  .grove__creature, .grove__creature[data-stage="egg"], .grove__keepsake { animation:none; }
  .btn, .tab__ico { transition:none; }
  .tab__badge, .grove__waiting-dot, .reveal__spark, .reveal--treasure .reveal__art::before, .reveal__glyph { animation:none; }
  .reveal__card { transition:opacity .2s ease; }
}

/* ============================ PULSE 3 — GROWTH ============================ */
/* The real name-seeded creature replaces the placeholder monogram. Strip the blob
   styling and the mismatched monogram halo so the SVG (with its own care-derived
   aura) stands alone in the scene. Tap target stays 118px (never shrink the button). */
.grove__creature--real { width:154px; height:154px; background:none; box-shadow:none; border-radius:0; overflow:visible; }
.grove__creature--real[data-stage="egg"] { width:150px; height:150px; }
/* When a grove backdrop is equipped, give the framed scene a little more room to read. */
.grove__creature--scene { width:190px; height:190px; }
.grove__art { display:block; width:100%; height:100%; }
.grove__svg { width:100%; height:100%; display:block; overflow:visible; }
.grove--real .grove__halo { display:none; }   /* palette-derived SVG aura replaces it */

/* Port the frozen creature's life animations — they live only in the blog CSS; without
   them the pet visibly doesn't breathe (game-design gate trap #3). */
.drf-eyes  { transform-box:fill-box; transform-origin:center; animation:drifter-blink 5s infinite; }
.drf-spark { transform-box:fill-box; transform-origin:center; animation:drifter-twinkle 2.8s ease-in-out infinite; }
.drf-iri   { transform-box:fill-box; transform-origin:center; animation:drifter-iri 3.4s ease-in-out infinite; }
@keyframes drifter-blink { 0%,92%,100%{ transform:scaleY(1) } 95%{ transform:scaleY(.12) } 97%{ transform:scaleY(1) } }
@keyframes drifter-twinkle { 0%,100%{ opacity:.35; transform:scale(.8) } 50%{ opacity:.9; transform:scale(1.15) } }
@keyframes drifter-iri { 0%,100%{ transform:translateX(-26px); opacity:.12 } 50%{ transform:translateX(26px); opacity:.9 } }
/* Pulse 4 — equipped companion motion (a moth that loops beside the creature) */
.drf-comp-moth { transform-box:fill-box; transform-origin:center; animation:drfMoth 4.2s ease-in-out infinite; }
@keyframes drfMoth { 0%,100%{ transform:translate(0,0) rotate(-4deg) } 25%{ transform:translate(5px,-6px) rotate(4deg) } 50%{ transform:translate(9px,1px) rotate(-3deg) } 75%{ transform:translate(4px,6px) rotate(3deg) } }
/* growth-layer motion: a slow breathing aura + a drifting prestige ring (calm, not busy) */
.drg-aura { transform-box:fill-box; transform-origin:center; animation:drgAura 6s ease-in-out infinite; }
.drg-ring { transform-box:fill-box; transform-origin:center; animation:drgSpin 44s linear infinite; }
.drg-ring--slow { animation-duration:80s; }
@keyframes drgAura { 0%,100%{ opacity:.85; transform:scale(1) } 50%{ opacity:1; transform:scale(1.05) } }
@keyframes drgSpin { to { transform:rotate(360deg) } }

/* Growth Almanac — collapsed by default: there when you're curious, gone when you're not. */
.almanac { margin:14px auto 0; max-width:340px; border-top:1px solid var(--line,#e7ddef); }
.almanac__summary { cursor:pointer; list-style:none; text-align:center; padding:12px 0 10px;
  font-size:.82rem; font-weight:700; color:var(--lav-deep,#6b5a8a); }
.almanac__summary::-webkit-details-marker { display:none; }
.almanac__summary::after { content:"›"; display:inline-block; margin-left:6px; transform:rotate(90deg); transition:transform .2s; opacity:.6; }
.almanac[open] .almanac__summary::after { transform:rotate(-90deg); }
.almanac__body { padding:4px 4px 14px; }
.alm__row { display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; }
.alm__col { display:flex; flex-direction:column; align-items:center; gap:6px; }
.alm__ring { width:84px; height:84px; }
.alm__pct { font-size:19px; font-weight:800; fill:var(--ink,#3a3327); }
.alm__label { font-size:.72rem; font-weight:700; color:var(--ink-soft,#6a6152); }
.alm__svg { width:96px; height:96px; display:block; }
.alm__svg--ghost .drg-silhouette { filter:brightness(0); opacity:.16; }
.alm__cap { text-align:center; font-size:.86rem; color:var(--ink-soft,#5a5140); margin:14px auto 0; max-width:32ch; line-height:1.5; }
.alm__done { display:flex; flex-direction:column; align-items:center; gap:4px; }
.alm__now .alm__svg { width:120px; height:120px; }
:root { --alm-track:#e7ded0; --alm-fill:#e0a24a; }

/* growth-moment celebration — reuses the .reveal overlay (same weight as a hatch). */
.reveal--grow .reveal__kicker { color:var(--lav-deep,#6b5a8a); }
.reveal__creature { width:132px; height:132px; display:block; margin:0 auto; }
.reveal--grow .reveal__art { width:132px; height:132px; }

/* Hatch reveal — the silhouette you watched through the shell fills with its real colour.
   Two stacked SVGs: the ghost dissolves as the colour creature blooms in. The screenshot beat. */
.reveal--hatch .reveal__art { width:150px; height:150px; }
.reveal__morphwrap { position:relative; width:150px; height:150px; margin:0 auto; }
.reveal__morph { position:absolute; inset:0; width:100%; height:100%; }
.reveal__morph--sil .drg-silhouette { filter:brightness(0); opacity:.42; }
.reveal--hatch.is-in .reveal__morph--full { animation:hatchMorph 1.15s ease-out .25s both; }
.reveal--hatch.is-in .reveal__morph--sil  { animation:hatchDissolve 1.05s ease-out .25s both; }
@keyframes hatchMorph { 0%{opacity:0;transform:scale(.9)} 55%{opacity:1} 100%{opacity:1;transform:scale(1)} }
@keyframes hatchDissolve { 0%{opacity:.42} 60%{opacity:0} 100%{opacity:0} }

@media (prefers-reduced-motion: reduce) {
  .drf-eyes, .drf-spark, .drf-iri, .drf-comp-moth, .drg-aura, .drg-ring { animation:none; }
  .grove__creature.is-poked .drg-silhouette { animation:none; }
  .reveal--hatch.is-in .reveal__morph--full { animation:none; opacity:1; }
  .reveal--hatch.is-in .reveal__morph--sil  { animation:none; opacity:0; }
}

/* ============ Arcade + Starlight (Pulse 5) ============ */
.arcade__lead{ max-width:52ch; }
.arcade-hero{ margin:14px 0 6px; padding:22px 18px; border-radius:var(--r-lg);
  background:radial-gradient(120% 95% at 50% 0,#2a2350,#161031); color:#f3eefb; text-align:center;
  box-shadow:var(--sh-2); position:relative; overflow:hidden; }
.arcade-hero__art{ width:118px; height:auto; display:block; margin:0 auto 4px; }
.arcade-hero__name{ font-size:1.4rem; font-weight:800; letter-spacing:-.01em; }
.arcade-hero__blurb{ color:#cbc3e6; max-width:34ch; margin:6px auto 15px; font-size:.94rem; line-height:1.4; }
.arcade-hero .btn--big{ background:linear-gradient(90deg,#9b83d8,#e0789a); color:#fff; }

.starlog-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:24px; }
.starlog-title{ font-size:1.05rem; font-weight:800; }
.starlog-count{ font-size:.82rem; color:var(--muted); white-space:nowrap; }
.starlog-count b{ color:var(--lav-deep); font-size:.95rem; }
.starlog-lead{ margin:3px 0 12px; font-size:.85rem; }
.starlog-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media(min-width:520px){ .starlog-grid{ grid-template-columns:repeat(3,1fr); } }
.starlog{ background:var(--surface); border:1px solid var(--surface-line); border-radius:var(--r);
  padding:12px 10px; text-align:center; box-shadow:var(--sh-1); display:flex; flex-direction:column; align-items:center; gap:3px; }
.starlog__sky{ width:70px; height:70px; border-radius:12px; background:#1b1436; display:flex; align-items:center; justify-content:center; margin-bottom:4px; }
.starlog__art{ width:100%; height:100%; }
.starlog__sky--q{ color:#4a4170; font-size:1.4rem; }
.starlog__name{ font-weight:700; font-size:.85rem; color:var(--ink); }
.starlog.is-locked .starlog__name{ color:var(--muted); }
.starlog__flav{ font-size:.71rem; color:var(--ink-soft); line-height:1.28; }
.starlog.is-justfound{ animation:starlogPop .6s ease; }
@keyframes starlogPop{ 0%{transform:scale(.9);} 55%{transform:scale(1.05);} 100%{transform:scale(1);} }

/* ---- the game overlay ---- */
.stl-lock, .stl-lock body{ overflow:hidden; }
.stl-overlay{ position:fixed; inset:0; z-index:60; background:#0f0b22; display:flex; }
.stl{ position:relative; flex:1; display:flex; flex-direction:column; min-height:0; color:#f3eefb; width:100%;
  max-width:560px; margin:0 auto; padding:calc(10px + var(--safe-t)) 12px calc(12px + var(--safe-b)); }
.stl__top{ display:flex; align-items:center; gap:12px; }
.stl__x{ background:rgba(255,255,255,.12); color:#fff; border:0; width:38px; height:38px; border-radius:50%; font-size:1rem; line-height:1; cursor:pointer; flex:none; }
.stl__title{ flex:1; text-align:center; display:flex; flex-direction:column; line-height:1.12; }
.stl__eyebrow{ font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:#a99cd0; }
.stl__shape{ font-size:1rem; font-weight:700; }
.stl__tally{ flex:none; min-width:34px; text-align:right; font-weight:800; font-size:1.15rem; color:#ffe0a0; }
.stl__timebar{ height:3px; border-radius:2px; background:rgba(255,255,255,.12); margin:10px 2px 0; overflow:hidden; }
.stl__timebar-fill{ display:block; height:100%; transform-origin:left; background:linear-gradient(90deg,#f0b64e,#ef9bb0); }
.stl__stage{ flex:1; min-height:0; margin-top:8px; border-radius:var(--r-lg); overflow:hidden; background:#0f0b22; }
.stl__svg{ width:100%; height:100%; display:block; touch-action:none; }
.stl__hint{ text-align:center; color:#b7abdc; font-size:.85rem; margin:10px 0 0; transition:opacity .5s; }
.stl__hint.is-fade{ opacity:0; }
.stl__actions{ margin-top:10px; }
.stl__actions .btn{ background:rgba(255,255,255,.15); color:#fff; box-shadow:none; }

.stl__cre .drf-eyes{ animation:none; }            /* eyes are hand-driven while playing */
.stl-star__dot{ transition:r .2s ease, fill .25s ease; }
.stl-star.is-caught .stl-star__dot{ r:4.6; fill:#fff6d8; filter:drop-shadow(0 0 5px #ffdf9e); }
.stl-star--bright.is-caught .stl-star__dot{ fill:#ffe39a; }
.stl-star.is-shape .stl-star__dot{ filter:drop-shadow(0 0 8px #ffd67a); }
.stl__trail{ stroke:#dfeaff; stroke-width:2.4; opacity:.5; }
.stl-conline{ stroke:#ffe39a; stroke-width:2; opacity:.92; filter:drop-shadow(0 0 4px #ffd67a); }

.stl__end{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(15,11,34,.74); opacity:0; transition:opacity .3s; }
/* Bare [hidden] alone is defeated by the display:flex above (S90 trap) — restore it, or this
   invisible full-bleed overlay silently intercepts every pointer event and the game can't be played. */
.stl__end[hidden]{ display:none; }
.stl__end.is-in{ opacity:1; }
.stl-end__card{ background:#1b1338; border:1px solid #34285f; border-radius:var(--r-lg); padding:24px 20px; max-width:340px; width:100%; text-align:center; box-shadow:var(--sh-glow); }
.stl-end__k{ font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:#a99cd0; }
.stl-end__name{ font-size:1.45rem; font-weight:800; margin:4px 0 8px; }
.stl-end__flavor{ color:#cbc3e6; font-size:.92rem; line-height:1.4; }
.stl-end__logged{ color:#9be0c0; font-size:.82rem; margin-top:8px; }
.stl-end__reward{ color:#ffe0a0; font-weight:600; margin-top:10px; font-size:.9rem; }
.stl-end__btns{ display:flex; gap:8px; margin-top:16px; }
.stl-end__btns .btn{ background:rgba(155,131,216,.28); color:#fff; }
.stl-end__btns .btn--ghost{ background:rgba(255,255,255,.1); }

.stl-toast{ position:fixed; left:50%; bottom:calc(84px + var(--safe-b)); transform:translate(-50%,10px);
  background:#2a2350; color:#fff; padding:11px 16px; border-radius:var(--r-pill); font-size:.88rem;
  box-shadow:var(--sh-2); opacity:0; transition:opacity .3s, transform .3s; z-index:70; max-width:80%; text-align:center; }
.stl-toast.is-in{ opacity:1; transform:translate(-50%,0); }

@media (prefers-reduced-motion: reduce){
  .starlog.is-justfound{ animation:none; }
  .stl-conline{ transition:none !important; stroke-dashoffset:0 !important; }
}

/* ============================ SHARE PERMALINK (/c/{name}) — Pulse A ============================
   The landing a stranger meets from a shared link. Deliberately reuses the Grove's scene
   language (same halo, same palette custom props) so the creature a friend shows you looks
   exactly like the creature you'd raise — the page IS the ad, so it must not look like an ad. */
.share { text-align:center; padding-top:4px; }
.share__scene {
  position:relative; height:230px; margin:0 auto 4px; width:min(360px,92%);
  border-radius:var(--r-lg); overflow:hidden;
  background:
    radial-gradient(120% 120% at 50% 20%, color-mix(in srgb, var(--a,#f0c) 40%, #fff), transparent 62%),
    linear-gradient(180deg, #fff8fb, #f3ecfa);
  box-shadow:var(--sh-2), inset 0 -30px 40px rgba(155,131,216,.10);
  display:grid; place-items:center;
}
/* SSR placeholder (pre-hydration): the same soft blob the Grove uses, so there's no flash
   of "wrong thing" before share.js swaps in the real art. */
.share__creature {
  position:relative; width:118px; height:118px; border-radius:48% 52% 50% 50%/54% 54% 46% 46%;
  background:linear-gradient(140deg, var(--a,#f7c), var(--b,#b9a7e6));
  box-shadow:var(--sh-glow), inset 0 6px 18px rgba(255,255,255,.6), inset 0 -10px 22px rgba(120,90,170,.22);
  display:grid; place-items:center;
}
.share__creature--real { width:154px; height:154px; background:none; box-shadow:none; border-radius:0; overflow:visible; }
.share__creature--scene { width:190px; height:190px; }
.share__svg { width:100%; height:100%; display:block; overflow:visible; }
.share__svg--egg .drg-silhouette { filter:brightness(0); opacity:.36; }
.share--real .grove__halo { display:none; }   /* palette-derived SVG aura replaces it */
.share__name { font-size:clamp(1.5rem,6vw,2rem); font-weight:800; letter-spacing:-.02em; margin-top:10px; }
.share__lede { margin-top:6px; font-weight:600; }
.share__sub { margin-top:8px; max-width:44ch; margin-inline:auto; line-height:1.5; }
.share__actions { margin-top:18px; max-width:340px; margin-inline:auto; }
.share__foot { margin-top:18px; font-size:.85rem; }
.share__foot a { color:inherit; }

/* The share control in the Grove: quiet by default. It's an offer, not a prompt —
   never a nag, never a badge, never "show off your drifter!" (Law 1). */
.grove__share {
  margin-top:10px; display:inline-flex; align-items:center; gap:7px;
  background:none; border:0; padding:8px 12px; min-height:44px;
  font:inherit; font-size:.9rem; color:var(--ink-soft,#7a6b90); cursor:pointer;
  border-radius:var(--r-sm,10px);
}
.grove__share:hover, .grove__share:focus-visible { color:var(--ink,#3d3350); background:rgba(155,131,216,.10); }
.grove__share .ico { width:16px; height:16px; }