/* Local palette: one-off colours 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: toast (top centre, so it never covers a game's Play again button) ---------- */
.find-toasts { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
/* tablets and desktops: the nav tabs run along the top, so the toast sits at the right, clear of header and nav */
@media (min-width: 768px) { .find-toasts { left: auto; right: 16px; top: 156px; transform: none; } }
.find-toast {
  pointer-events: auto; cursor: pointer; display: flex; gap: 10px; align-items: center; padding: 8px 14px 8px 8px;
  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:empty { display: none; }
.find-toast .find-art svg { width: 44px; height: 44px; display: block; }
.find-toast b { font-family: var(--display); font-size: 1rem; }
.find-toast p { margin: 0; font-size: var(--fs-sm); }
.find-toast.is-out { opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s; }
@keyframes find-rise { from { opacity: 0; transform: translateY(-14px); } }

/* ---------- 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; }
@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%);
  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.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; } }