/* ============================================================================
   BIRD-DEX — field-journal-meets-arcade. Mobile-first.
   Aesthetic: deep forest-night paper, warm cream ink, Fraunces display +
   Hanken Grotesk body. Embossed specimen cards. Foil shimmer for Legendary.
   ========================================================================== */

:root {
  /* ── palette: a leather field journal at dusk ── */
  --night:        #0e1512;   /* deepest bg */
  --forest:       #14201b;   /* panel bg */
  --moss:         #1c2c25;   /* raised surface */
  --moss-2:       #243a30;   /* hover surface */
  --bark:         #2f4338;   /* hairlines */
  --cream:        #f3ecd8;   /* primary ink */
  --parchment:    #d9cfb4;   /* secondary ink */
  --muted:        #92a597;   /* tertiary ink */
  --ember:        #e8743c;   /* primary accent (cardinal warmth) */
  --ember-deep:   #c4521f;
  --leaf:         #6fc08a;   /* positive / xp */
  --sky:          #4f86f7;   /* rare */
  --gold:         #e7b53c;   /* legendary */
  --gold-2:       #fff0b8;

  /* rarity */
  --c-common:    #8a9aa6;
  --c-uncommon:  #3fb6a8;
  --c-rare:      #4f86f7;
  --c-legendary: #e7b53c;

  /* type */
  --font-display: "Fraunces", "Hoefler Text", Georgia, serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;

  /* spacing scale (4px) */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem;
  --s6:1.5rem; --s8:2rem; --s10:2.5rem; --s12:3rem;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 34px -18px rgba(0,0,0,.85);
  --shadow-pop: 0 24px 60px -20px rgba(0,0,0,.8);
  --ease-spring: cubic-bezier(.22,1.2,.36,1);
  --ease-out: cubic-bezier(.2,.7,.2,1);

  --maxw: 720px;
}

/* ── reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font-body);
  color: var(--cream);
  background: var(--night);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(40,72,58,.55), transparent 60%),
    radial-gradient(90% 60% at 100% 0%, rgba(232,116,60,.10), transparent 55%);
  background-attachment: fixed;
  min-height: 100dvh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* subtle paper grain */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:.04; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display:block; max-width:100%; }
button { font:inherit; color:inherit; cursor:pointer; border:none; background:none; }
::selection { background: var(--ember); color:#1a1208; }

/* ── app shell ── */
.app { position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; min-height:100dvh;
  padding: 0 var(--s4) calc(96px + env(safe-area-inset-bottom)); }

/* ============================ HEADER / HUD ============================ */
.hud {
  position: sticky; top:0; z-index:30;
  padding: calc(env(safe-area-inset-top) + var(--s4)) 0 var(--s3);
  background: linear-gradient(180deg, var(--night) 62%, rgba(14,21,18,0));
  backdrop-filter: blur(6px);
}
.hud__top { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.brand { display:flex; align-items:baseline; gap:.5ch; }
.brand__mark { font-size:1.5rem; line-height:1; transform:translateY(2px); }
.brand__name {
  font-family:var(--font-display); font-weight:600; font-size:1.5rem; letter-spacing:-.02em;
  font-variation-settings:"opsz" 32,"SOFT" 30,"WONK" 1;
}
.brand__name em { font-style:italic; color:var(--ember); }
.streak-pill {
  display:flex; align-items:center; gap:.35ch; font-weight:700; font-size:.95rem;
  padding:.4rem .7rem; border-radius:999px;
  background: linear-gradient(180deg, var(--moss-2), var(--moss));
  border:1px solid var(--bark); box-shadow:var(--shadow-card);
}
.streak-pill.hot { color:var(--gold-2); border-color:rgba(231,181,60,.45);
  box-shadow:0 0 0 1px rgba(231,181,60,.25), 0 0 22px -6px rgba(231,181,60,.6); }
.streak-pill .flame { filter:drop-shadow(0 0 6px rgba(232,116,60,.7)); }

.level-row { display:flex; align-items:center; gap:var(--s3); margin-top:var(--s3); }
.level-badge {
  flex:none; width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:600; font-size:1.3rem; color:var(--night);
  background: radial-gradient(120% 120% at 30% 20%, var(--gold-2), var(--gold) 55%, var(--ember-deep));
  box-shadow:0 6px 18px -8px rgba(231,181,60,.8), 0 1px 0 rgba(255,255,255,.5) inset;
  position:relative;
}
.level-badge::after{ content:"LVL"; position:absolute; bottom:-13px; left:50%; transform:translateX(-50%);
  font-family:var(--font-body); font-size:.5rem; letter-spacing:.18em; color:var(--muted); font-weight:800;}
.xp-wrap { flex:1; min-width:0; }
.xp-meta { display:flex; justify-content:space-between; font-size:.72rem; color:var(--muted);
  letter-spacing:.04em; margin-bottom:5px; font-weight:600; text-transform:uppercase;}
.xp-meta b { color:var(--parchment); }
.xp-bar { height:11px; border-radius:999px; background:var(--forest);
  border:1px solid var(--bark); overflow:hidden; box-shadow:inset 0 2px 4px rgba(0,0,0,.5); }
.xp-fill { height:100%; border-radius:999px; width:0;
  background:linear-gradient(90deg, var(--leaf), #a9e6bf);
  box-shadow:0 0 12px rgba(111,192,138,.6);
  transition:width .9s var(--ease-spring); position:relative; }
.xp-fill::after{ content:""; position:absolute; inset:0; background:
  linear-gradient(90deg,transparent, rgba(255,255,255,.45), transparent);
  transform:translateX(-100%); animation:sheen 2.6s var(--ease-out) infinite; }
@keyframes sheen { to { transform:translateX(220%); } }

/* ============================ TABS ============================ */
.tabs { display:flex; gap:var(--s2); margin-top:var(--s4); padding-bottom:var(--s2);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.tabs::-webkit-scrollbar{ display:none; }
.tab {
  flex:none; padding:.5rem .9rem; border-radius:999px; font-weight:700; font-size:.85rem;
  color:var(--muted); border:1px solid transparent; transition:all .2s var(--ease-out);
  display:flex; align-items:center; gap:.4ch;
}
.tab[aria-selected="true"] {
  color:var(--cream); background:var(--moss); border-color:var(--bark);
  box-shadow:var(--shadow-card);
}
.tab .tab__count { font-size:.7rem; color:var(--ember); font-weight:800; }

/* ============================ VIEWS ============================ */
.view { display:none; animation:viewIn .4s var(--ease-out) both; padding-top:var(--s5); }
.view.active { display:block; }
@keyframes viewIn { from{ opacity:0; transform:translateY(8px);} to{opacity:1;transform:none;} }

.section-title { font-family:var(--font-display); font-weight:600; font-size:1.15rem;
  letter-spacing:-.01em; margin-bottom:var(--s3); display:flex; align-items:center; gap:.5ch;}
.section-title .hint { font-family:var(--font-body); font-size:.72rem; color:var(--muted);
  font-weight:600; margin-left:auto; }

/* ── empty state ── */
.empty { text-align:center; padding:var(--s12) var(--s4); color:var(--muted); }
.empty__icon { font-size:3.2rem; opacity:.6; margin-bottom:var(--s3);
  filter:grayscale(.3); animation:bob 3s ease-in-out infinite; }
@keyframes bob { 50%{ transform:translateY(-7px);} }
.empty h3 { font-family:var(--font-display); color:var(--parchment); font-size:1.3rem; margin-bottom:var(--s2); }
.empty p { max-width:28ch; margin:0 auto; font-size:.92rem; }

/* ============================ DEX GRID ============================ */
.dex-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3); }
@media (min-width:520px){ .dex-grid{ grid-template-columns:repeat(3,1fr);} }

.spec {
  position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:3/4;
  background:linear-gradient(180deg,var(--moss),var(--forest));
  border:1px solid var(--bark); box-shadow:var(--shadow-card);
  transition:transform .25s var(--ease-spring), box-shadow .25s var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.spec:active { transform:scale(.97); }
.spec__photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(1.05) contrast(1.03); }
.spec__scrim { position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 38%, rgba(8,12,10,.55) 66%, rgba(8,12,10,.94)); }
.spec__rim { position:absolute; inset:0; border-radius:var(--radius); pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--rim, transparent), inset 0 0 22px -6px var(--glow, transparent); }
.spec__body { position:absolute; left:0; right:0; bottom:0; padding:var(--s3); }
.spec__name { font-family:var(--font-display); font-weight:600; font-size:.95rem; line-height:1.1;
  text-shadow:0 2px 8px rgba(0,0,0,.8); }
.spec__row { display:flex; align-items:center; justify-content:space-between; margin-top:5px; }
.rarity-chip {
  font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:.2rem .45rem; border-radius:6px; color:var(--night);
  background:var(--rar,#888); box-shadow:0 2px 8px -2px var(--glow,transparent);
}
.spec__count { font-size:.72rem; font-weight:800; color:var(--cream);
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.12);
  padding:.1rem .45rem; border-radius:999px; }
.spec__emoji { position:absolute; top:var(--s2); left:var(--s2); font-size:1.1rem;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); }

/* locked silhouette */
.spec--locked { background:repeating-linear-gradient(135deg,#141d18,#141d18 9px,#10171300 9px,#101713 18px),var(--forest); }
.spec--locked .spec__photo { filter:brightness(0) saturate(0); opacity:.32; }
.spec--locked .spec__name { color:var(--bark); font-style:italic; }
.spec--locked .spec__sil { position:absolute; inset:0; display:grid; place-items:center;
  font-size:3rem; color:#0c120f; text-shadow:0 0 1px var(--bark); opacity:.9; }
.spec--locked .rarity-chip { opacity:.5; filter:grayscale(.6); }
.spec--locked .spec__q { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--font-display); font-size:2.4rem; color:var(--bark); }

/* legendary foil shimmer */
.spec[data-rarity="Legendary"]:not(.spec--locked)::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:overlay;
  background:linear-gradient(115deg,transparent 30%,rgba(255,240,184,.55) 45%,rgba(127,210,255,.5) 52%,transparent 66%);
  background-size:280% 280%; animation:foil 4.5s linear infinite;
}
@keyframes foil { 0%{background-position:140% 0;} 100%{background-position:-40% 0;} }

/* ============================ STATS ============================ */
.stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3); }
.stat {
  background:linear-gradient(180deg,var(--moss),var(--forest));
  border:1px solid var(--bark); border-radius:var(--radius); padding:var(--s4);
  box-shadow:var(--shadow-card); position:relative; overflow:hidden;
}
.stat__label { font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:800; }
.stat__value { font-family:var(--font-display); font-size:1.7rem; font-weight:600; margin-top:var(--s2); line-height:1.05; }
.stat__sub { font-size:.78rem; color:var(--parchment); margin-top:3px; }
.stat__icon { position:absolute; top:var(--s3); right:var(--s3); font-size:1.3rem; opacity:.55; }

/* ============================ BADGES ============================ */
.badge-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
@media (min-width:520px){ .badge-grid{ grid-template-columns:repeat(4,1fr);} }
.badge {
  text-align:center; border-radius:var(--radius-sm); padding:var(--s4) var(--s2);
  background:linear-gradient(180deg,var(--moss),var(--forest));
  border:1px solid var(--bark); box-shadow:var(--shadow-card);
  transition:transform .2s var(--ease-spring);
}
.badge:active{ transform:scale(.96); }
.badge__emoji { font-size:1.9rem; line-height:1; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.badge__name { font-weight:800; font-size:.74rem; margin-top:var(--s2); }
.badge__desc { font-size:.64rem; color:var(--muted); margin-top:3px; line-height:1.25; }
.badge--locked { filter:grayscale(1); opacity:.42; }
.badge--locked .badge__emoji { color:var(--bark); }
.badge--unlocked { border-color:rgba(231,181,60,.4); box-shadow:0 0 0 1px rgba(231,181,60,.18),var(--shadow-card); }
.badge--unlocked .badge__name { color:var(--gold-2); }

/* ============================ GALLERY ============================ */
.gallery { columns:3 90px; column-gap:var(--s2); }
.gallery img { width:100%; border-radius:10px; margin-bottom:var(--s2); break-inside:avoid;
  border:1px solid var(--bark); box-shadow:var(--shadow-card); }

/* ============================ FAB ============================ */
.fab {
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--s5) + env(safe-area-inset-bottom)); z-index:40;
  display:flex; align-items:center; gap:.5ch; font-weight:800; font-size:1rem;
  padding:1rem 1.6rem; border-radius:999px; color:var(--night);
  background:radial-gradient(120% 160% at 30% 10%, #ff9a5e, var(--ember) 55%, var(--ember-deep));
  box-shadow:0 14px 34px -10px rgba(232,116,60,.7), 0 1px 0 rgba(255,255,255,.45) inset;
  transition:transform .2s var(--ease-spring); letter-spacing:.01em;
}
.fab:active{ transform:translateX(-50%) scale(.95); }
.fab__plus { font-size:1.3rem; line-height:0; }
.fab::after{ content:""; position:absolute; inset:0; border-radius:999px;
  box-shadow:0 0 0 0 rgba(232,116,60,.5); animation:pulse 2.8s ease-out infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(232,116,60,.45);} 70%,100%{box-shadow:0 0 0 18px rgba(232,116,60,0);} }

/* ============================ SHEET / MODAL ============================ */
.scrim { position:fixed; inset:0; z-index:50; background:rgba(6,10,8,.72);
  backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .3s var(--ease-out); }
.scrim.open { opacity:1; pointer-events:auto; }
.sheet {
  position:fixed; left:0; right:0; bottom:0; z-index:51; max-width:var(--maxw); margin:0 auto;
  background:linear-gradient(180deg,var(--forest),var(--night));
  border-top-left-radius:26px; border-top-right-radius:26px;
  border:1px solid var(--bark); border-bottom:none; box-shadow:var(--shadow-pop);
  padding:var(--s5) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom));
  transform:translateY(110%); transition:transform .4s var(--ease-spring);
  max-height:92dvh; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.sheet.open { transform:translateY(0); }
.sheet__grip { width:42px; height:5px; border-radius:999px; background:var(--bark);
  margin:0 auto var(--s4); }
.sheet__close { position:absolute; top:var(--s4); right:var(--s4); width:34px; height:34px;
  border-radius:50%; background:var(--moss); border:1px solid var(--bark); display:grid;
  place-items:center; font-size:1.1rem; color:var(--parchment); }

/* ── result card ── */
.result__photo-wrap { position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4/3; box-shadow:var(--shadow-card); margin-bottom:var(--s4);
  border:1px solid var(--bark); }
.result__photo { width:100%; height:100%; object-fit:cover; }
.result__photo-wrap::after{ content:""; position:absolute; inset:0; border-radius:var(--radius);
  box-shadow:inset 0 0 0 3px var(--rim,transparent), inset 0 0 40px -8px var(--glow,transparent); pointer-events:none;}
.result__rarity { position:absolute; top:var(--s3); left:var(--s3); }
.result__xp-burst { position:absolute; right:var(--s3); bottom:var(--s3);
  font-weight:800; font-size:1.05rem; color:var(--leaf);
  background:rgba(8,14,10,.7); border:1px solid rgba(111,192,138,.5);
  padding:.35rem .7rem; border-radius:999px; animation:xpPop .6s var(--ease-spring) both .2s;}
@keyframes xpPop { from{ transform:scale(.4) translateY(10px); opacity:0;} to{transform:none;opacity:1;} }
.result__name { font-family:var(--font-display); font-weight:600; font-size:1.7rem; line-height:1.05;
  letter-spacing:-.01em; margin-bottom:var(--s2); }
.result__conf { font-size:.78rem; color:var(--muted); }
.result__conf b { color:var(--parchment); }
.result__facts { margin-top:var(--s3); font-size:.95rem; color:var(--parchment); line-height:1.55;
  padding-left:var(--s3); border-left:2px solid var(--bark); font-style:italic; }
.result__newtag { display:inline-flex; align-items:center; gap:.4ch; font-weight:800; font-size:.72rem;
  color:var(--gold-2); background:rgba(231,181,60,.14); border:1px solid rgba(231,181,60,.4);
  padding:.25rem .6rem; border-radius:999px; margin-bottom:var(--s2); }

.btn { width:100%; padding:1rem; border-radius:14px; font-weight:800; font-size:1rem;
  display:flex; align-items:center; justify-content:center; gap:.5ch; transition:transform .15s var(--ease-spring); }
.btn:active{ transform:scale(.97); }
.btn--primary { color:var(--night);
  background:radial-gradient(120% 160% at 30% 10%, #8fe0a6, var(--leaf) 60%, #3f9a63);
  box-shadow:0 10px 26px -10px rgba(111,192,138,.7); }
.btn--ghost { color:var(--parchment); background:var(--moss); border:1px solid var(--bark); margin-top:var(--s3); }
.btn-row { margin-top:var(--s5); }
.fix-link { display:block; text-align:center; margin-top:var(--s4); color:var(--sky);
  font-weight:700; font-size:.88rem; text-decoration:none; }
.fix-link:active { opacity:.7; }

/* ── loading / identifying ── */
.identify { text-align:center; padding:var(--s4) 0; }
.identify__photo { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius);
  border:1px solid var(--bark); box-shadow:var(--shadow-card); margin-bottom:var(--s5); position:relative; }
.identify__shimmer { position:relative; overflow:hidden; border-radius:var(--radius); }
.identify__shimmer::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent, rgba(243,236,216,.16), transparent);
  transform:translateX(-100%); animation:scan 1.3s var(--ease-out) infinite; }
@keyframes scan { to{ transform:translateX(100%);} }
.identify__label { font-family:var(--font-display); font-size:1.25rem; color:var(--parchment); }
.identify__dots::after { content:""; animation:dots 1.4s steps(4,end) infinite; }
@keyframes dots { 0%{content:"";} 25%{content:".";} 50%{content:"..";} 75%{content:"...";} }
.identify__sub { font-size:.82rem; color:var(--muted); margin-top:var(--s2); }
.binoc { font-size:2.4rem; margin-bottom:var(--s3); display:inline-block; animation:bob 2s ease-in-out infinite; }

/* ── corrector ── */
.corrector__title { font-family:var(--font-display); font-size:1.4rem; margin-bottom:var(--s2); }
.corrector__sub { font-size:.86rem; color:var(--muted); margin-bottom:var(--s4); }
.chips { display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s4); }
.chip { padding:.55rem .85rem; border-radius:999px; font-weight:700; font-size:.86rem;
  background:var(--moss); border:1px solid var(--bark); color:var(--parchment);
  transition:all .18s var(--ease-out); }
.chip[aria-pressed="true"] { background:var(--ember); color:var(--night); border-color:var(--ember);
  box-shadow:0 6px 18px -8px rgba(232,116,60,.8); }
.search-box { width:100%; padding:.85rem 1rem; border-radius:12px; background:var(--night);
  border:1px solid var(--bark); color:var(--cream); font:inherit; margin-bottom:var(--s3); }
.search-box:focus { outline:none; border-color:var(--ember); box-shadow:0 0 0 3px rgba(232,116,60,.18); }
.species-list { max-height:38dvh; overflow-y:auto; border:1px solid var(--bark); border-radius:12px;
  background:var(--night); -webkit-overflow-scrolling:touch; }
.species-row { display:flex; align-items:center; gap:var(--s3); padding:.7rem var(--s4);
  border-bottom:1px solid var(--forest); width:100%; text-align:left; }
.species-row:last-child{ border-bottom:none; }
.species-row[aria-pressed="true"]{ background:var(--moss-2); }
.species-row__emoji { font-size:1.2rem; }
.species-row__name { flex:1; font-weight:600; font-size:.9rem; }
.species-row .rarity-chip{ font-size:.55rem; }

/* species detail */
.detail__hero { position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3;
  margin-bottom:var(--s4); border:1px solid var(--bark); }
.detail__hero img { width:100%; height:100%; object-fit:cover; }
.detail__stats { display:flex; gap:var(--s4); margin:var(--s4) 0; flex-wrap:wrap; }
.detail__stat b { font-family:var(--font-display); font-size:1.3rem; display:block; }
.detail__stat span { font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.detail__thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); margin-top:var(--s3); }
.detail__thumbs img { aspect-ratio:1; object-fit:cover; border-radius:8px; border:1px solid var(--bark); }

/* ============================ TOASTS ============================ */
.toasts { position:fixed; left:0; right:0; bottom:calc(96px + env(safe-area-inset-bottom));
  z-index:60; display:flex; flex-direction:column; align-items:center; gap:var(--s2); pointer-events:none; }
.toast { pointer-events:auto; max-width:90vw;
  display:flex; align-items:center; gap:.6ch; font-weight:700; font-size:.9rem;
  padding:.7rem 1.1rem; border-radius:999px; color:var(--cream);
  background:linear-gradient(180deg,var(--moss-2),var(--moss)); border:1px solid var(--bark);
  box-shadow:var(--shadow-pop); animation:toastIn .4s var(--ease-spring) both; }
.toast.out { animation:toastOut .35s var(--ease-out) forwards; }
.toast--badge { border-color:rgba(231,181,60,.5); color:var(--gold-2); }
.toast--xp { border-color:rgba(111,192,138,.4); color:#bdeccb; }
.toast__emoji { font-size:1.1rem; }
@keyframes toastIn { from{ transform:translateY(20px) scale(.9); opacity:0;} to{transform:none;opacity:1;} }
@keyframes toastOut { to{ transform:translateY(-10px); opacity:0;} }

/* ============================ NEW-SPECIES CELEBRATION ============================ */
.celebrate { position:fixed; inset:0; z-index:70; display:grid; place-items:center; text-align:center;
  background:radial-gradient(circle at 50% 40%, rgba(20,40,30,.7), rgba(6,10,8,.95));
  backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .35s; padding:var(--s6); }
.celebrate.open { opacity:1; pointer-events:auto; }
.celebrate__inner { transform:scale(.8); transition:transform .5s var(--ease-spring); }
.celebrate.open .celebrate__inner { transform:scale(1); }
.celebrate__kicker { font-weight:900; letter-spacing:.35em; font-size:.8rem; color:var(--ember);
  text-transform:uppercase; }
.celebrate__title { font-family:var(--font-display); font-weight:600; font-size:clamp(2.4rem,12vw,4rem);
  line-height:1; margin:var(--s3) 0; background:linear-gradient(180deg,var(--gold-2),var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 8px 40px rgba(231,181,60,.35); }
.celebrate__emoji { font-size:5rem; filter:drop-shadow(0 10px 30px rgba(0,0,0,.6));
  animation:trophy 2s var(--ease-spring) infinite; }
@keyframes trophy { 0%,100%{transform:translateY(0) rotate(-3deg);} 50%{transform:translateY(-12px) rotate(3deg);} }
.celebrate__species { font-family:var(--font-display); font-size:1.6rem; color:var(--cream); margin-top:var(--s3); }
.celebrate__rarity { margin-top:var(--s3); }
.celebrate__tap { margin-top:var(--s8); font-size:.8rem; color:var(--muted); animation:bob 2s ease-in-out infinite; }

/* confetti */
.confetti { position:fixed; inset:0; z-index:69; pointer-events:none; overflow:hidden; }
.confetti i { position:absolute; top:-12px; width:9px; height:14px; border-radius:2px;
  animation:fall linear forwards; }
@keyframes fall { to { transform:translateY(112vh) rotate(720deg); opacity:.4; } }

/* ── footer note ── */
.footnote { text-align:center; color:var(--bark); font-size:.7rem; margin:var(--s8) 0 var(--s4); }
.footnote button { color:var(--muted); text-decoration:underline; font-size:.7rem; }

@media (prefers-reduced-motion: reduce) {
  *{ animation-duration:.001ms!important; transition-duration:.08s!important; }
}