/* Local palette: one-off colors for this page, named by role. Global tokens live in style.css. */
:root {
  --fd-find-rare-bg: #fff6c8;
  --fd-find-sparkles-bg: #8ff0ff;
}
/* Rare finds: reveal toasts/cards/full-screen (public/reveal.js), the corner visitor, and the /finds log.
   Motion only animates *into* the resting state, so the global reduce-motion rules leave everything readable. */

/* ---------- small: the pop-up (finds, errands, success flashes) ----------
   At the bottom, clear of the header, the pet's speech bubble and the right-column cards: bottom-right on tablets and desktops,
   full width just above the tab bar on phones. Under the big reveal (z 60), over the tab bar (z 40), level with the corner visitor but later in the page; the feedback bubble
   steps aside while one is up (shell.css). One at a time; the lilac chip counts the ones waiting. */
.find-toasts {
  position: fixed; z-index: 50; right: calc(16px + env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom));
  display: grid; gap: 6px; width: min(340px, calc(100vw - 32px)); pointer-events: none;
}
@media (max-width: 767px) { .find-toasts { left: 12px; right: 12px; width: auto; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 10px); } }
.find-more { justify-self: end; padding: 2px 10px; font: 600 var(--fs-xs) var(--display); background: var(--hi); border: 2px solid var(--ink); border-radius: 999px; }
.find-toast {
  position: relative; overflow: hidden; pointer-events: auto; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-start; padding: 10px 10px 14px;
  background: var(--card); color: var(--ink); border: var(--line) solid var(--ink); border-radius: var(--r-tile); box-shadow: var(--shadow-sm);
  animation: find-rise .35s var(--ease-out);
}
.find-toast .find-art { flex: none; }
.find-toast .find-art:empty { display: none; }
.find-toast .find-art svg { width: 48px; height: 48px; display: block; }
.find-body { min-width: 0; flex: 1 1 0; padding-right: 32px; } /* room for the × */
.find-toast .find-title { display: block; font-family: var(--display); font-size: 1rem; line-height: 1.25; }
.find-toast .find-title:empty { display: none; }
/* The whole message on every screen (playtest 2026-10-05); the toast grows upward from above the tab bar, and a very long one scrolls
   inside its body rather than running under the header. Desktop gets a wider box. */
.find-toast .find-text { margin: 2px 0 0; font-size: var(--fs-sm); }
.find-body { max-height: 50dvh; overflow-y: auto; }
@media (min-width: 1000px) { .find-toasts { width: 400px; } }
.find-row { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; } /* full width under the art, so the link and the bell note share a line */
.find-row:empty { display: none; }
.find-toast .find-go {
  display: inline-flex; align-items: center; min-height: 34px; padding: 2px 14px; color: var(--ink); text-decoration: none;
  font: 600 var(--fs-sm) var(--display); background: var(--sun); border: 2px solid var(--ink); border-radius: 999px;
}
.find-toast .find-go:hover { background: var(--hi); }
.find-bell { font-size: var(--fs-xs); color: var(--muted); }
.find-x {
  position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; cursor: pointer;
  font: 600 1.4rem/1 var(--display); color: var(--ink); background: none; border: 0; border-radius: 50%;
}
.find-x:hover { background: var(--tint-2); }
@media (pointer: coarse) { .find-x { width: 44px; height: 44px; top: 0; right: 0; } .find-toast .find-go { min-height: 44px; } } /* 44px finger targets */
.find-timer { position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--grape); transform-origin: left; animation: find-timer linear forwards; }
.reduce-motion .find-timer { display: none; }
@media (prefers-reduced-motion: reduce) { .find-timer { display: none; } }
/* A success flash: ✓ badge, bold line; a joy flash (a pet's mood went up) gets the heart, the lilac wash and the sparkle ring. */
.find-badge { position: relative; display: grid; place-items: center; width: 40px; height: 40px; font: 700 1.2rem var(--display); background: var(--ok-bg); border: 2px solid var(--ink); border-radius: 50%; }
.find-flash .find-text { font-weight: 700; }
.find-flash-joy { background: linear-gradient(110deg, var(--ok-bg), var(--hi) 80%); }
.find-flash-joy .find-badge { color: var(--pink); background: var(--card); }
.find-flash-joy .find-badge::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; pointer-events: none; opacity: 0;
  animation: sparkle-ring .75s var(--ease-out) .3s; /* keyframes in style.css */
  box-shadow: 0 -24px var(--sun), 17px -17px var(--pink), 24px 0 var(--sky), 17px 17px var(--sun), 0 24px var(--pink), -17px 17px var(--sky), -24px 0 var(--sun), -17px -17px var(--pink);
}
.find-toast.is-out { opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
@keyframes find-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes find-timer { to { transform: scaleX(0); } }

/* ---------- notable: card pop / rare: full screen ---------- */
.find-reveal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--ink) 45%, transparent); cursor: pointer; animation: find-fade .2s ease-out; }
.find-card {
  position: relative; width: min(380px, 100%); padding: 24px 24px 20px; text-align: center;
  background: var(--card); color: var(--ink); border: var(--line) solid var(--ink); border-radius: var(--r-card); box-shadow: var(--shadow);
  animation: find-pop .45s cubic-bezier(.2, 1.5, .4, 1);
}
.find-label { display: inline-block; padding: 2px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--sun); font-family: var(--display); font-weight: 600; font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; }
.find-card .find-art svg { width: 120px; height: 120px; display: block; margin: 10px auto 4px; }
.find-card h2 { margin: 4px 0 6px; font-family: var(--display); }
.find-card p { margin: 0 0 14px; }
.find-card .find-go { margin: 0 12px 12px 0; } /* a reveal's own link ("Try it on") sits before its close button */
@keyframes find-fade { from { opacity: 0; } }
@keyframes find-pop { from { opacity: 0; transform: scale(.6) rotate(-4deg); } }

.find-rare { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--fd-find-rare-bg) 95%, transparent), color-mix(in srgb, var(--pink) 70%, transparent) 45%, color-mix(in srgb, var(--ink) 92%, transparent) 80%); overflow: hidden; }
.find-rare .find-card { width: min(440px, 100%); box-shadow: 0 0 0 4px var(--pink), 0 0 0 8px var(--sun), var(--shadow); animation-duration: .7s; }
.find-rare .find-label { background: var(--pink); color: #fff; font-size: var(--fs-sm); }
.find-rare .find-card .find-art svg { width: 150px; height: 150px; animation: find-float 3s ease-in-out .7s infinite alternate; }
@keyframes find-float { to { transform: translateY(-6px) rotate(3deg); } }
.find-sparkles i {
  position: absolute; left: var(--x); top: var(--y); width: 18px; height: 18px; scale: var(--s); opacity: 0;
  background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); /* style-ok: sparkle */
  animation: find-twinkle 1.8s ease-in-out var(--d) infinite;
}
.find-sparkles i:nth-child(3n) { background: var(--sun); }
.find-sparkles i:nth-child(4n) { background: var(--fd-find-sparkles-bg); }
@keyframes find-twinkle { 40% { opacity: 1; transform: scale(1) rotate(45deg); } 0%, 100% { opacity: 0; transform: scale(.2); } }

/* ---------- the corner visitor ---------- */
.find-visitor {
  position: fixed; bottom: 18px; z-index: 50; width: 72px; height: 72px; padding: 4px; cursor: pointer;
  background: rgb(255 255 255 / .85); border: var(--line) solid var(--ink); border-radius: 50%; box-shadow: var(--shadow-sm);
  animation: find-bob 2.4s ease-in-out infinite alternate;
}
.find-visitor svg { width: 100%; height: 100%; display: block; }
.find-visitor-left { left: 16px; }
.find-visitor-right { right: 16px; }
.find-visitor:hover, .find-visitor:focus-visible { background: var(--hi); outline: 3px solid var(--pink); outline-offset: 3px; }
.find-visitor:focus-visible { outline-color: var(--ink); box-shadow: var(--shadow-sm), 0 0 0 9px var(--sky); }
.find-visitor.is-gone { opacity: 0; transform: translateY(-30px) scale(.6); transition: opacity .4s, transform .4s; }
@keyframes find-bob { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-8px) rotate(3deg); } }

/* ---------- /finds ---------- */
.find-tile { position: relative; }
.find-tile .pill { justify-self: center; }
.find-tile.is-missing { background: var(--tint-2); border-style: dashed; box-shadow: none; }
.find-shadow svg { filter: brightness(0); opacity: .2; }
@media (max-width: 560px) { .find-visitor { width: 60px; height: 60px; bottom: 12px; } .find-visitor-left { left: 10px; } .find-visitor-right { right: 10px; } }

/* A pet running up with what it found (random events and finds; reveal art, see services/random-events.js). */
.pet-brings { position: relative; display: block; }
.find-art:has(> .pet-brings) { flex: none; }
.pet-brings > svg:first-child:not(:only-child) { animation: pet-runs-up .5s cubic-bezier(.2, 1.3, .4, 1); }
.find-art .pet-brings > svg + svg { position: absolute; right: -6px; bottom: -4px; width: 48%; height: 48%; margin: 0; }
@keyframes pet-runs-up { from { transform: translateX(-50px) rotate(-8deg); opacity: 0; } }