/* Find It (アイテム探し). Builds on /assets/styles.css (site header, footer, .content, .eyebrow, .lede); everything of the
   game itself lives in the fi- namespace. One picture, a tray of the items to find (sticker icons with small labels), Spot the
   Difference's storybook frame and found ring. On phones the tray stays at the bottom of the screen; from 56rem it sits beside the picture. */
:root {
  --fi-paper: #fffaf1;
  --fi-line: #eadfcd;
  --fi-brown: #5a4636;
  --fi-gold: #f2b544;
  --fi-gold-deep: #9a6510;
  --fi-ring: #ff8f2e;
  --fi-mint: #1f7a5c;
  --fi-mint-soft: #e6f5ee;
  --fi-shadow: 0 6px 18px rgba(90, 70, 54, .12);
}
[hidden] { display: none !important; }
.fi-main .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.fi-main { padding-block: .5rem 2.5rem; }
.fi-heading { margin: 0 0 .6rem; }
.fi-heading .eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; color: var(--fi-gold-deep); text-transform: none; letter-spacing: .04em; }
.fi-heading h1 { margin: 0; font-size: clamp(1.45rem, 5vw, 2.1rem); line-height: 1.2; letter-spacing: -.02em; }
.fi-heading .lede { margin-top: .45rem; font-size: 1rem; }
.fi-goal { color: var(--ink); font-weight: 750; }
.fi-chip { display: inline-flex; align-items: center; gap: .2rem; padding: 0 .55rem; border: 1px solid var(--fi-line); border-radius: 999px; background: var(--fi-paper); color: var(--fi-brown); font-size: .78rem; font-weight: 700; letter-spacing: 0; line-height: 1.6; white-space: nowrap; }
.fi-chip.is-cleared { border-color: #b9e0cf; background: var(--fi-mint-soft); color: var(--fi-mint); }

/* the board: the picture, then the tray of things to find. On phones the tray sticks to the bottom of the screen while
   the game is in view (never over the page below it); from 56rem it is a panel beside the picture. */
.fi-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.fi-panel { position: sticky; bottom: 0; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .55rem .5rem calc(.5rem + env(safe-area-inset-bottom)); border: 1px solid var(--fi-line); border-radius: 1.1rem; background: rgba(255, 250, 241, .97); box-shadow: 0 -6px 18px rgba(90, 70, 54, .12); }
.fi-status { display: grid; justify-items: center; gap: .3rem; }
.fi-count { margin: 0; font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fi-count small { display: none; margin-left: .25rem; color: var(--muted); font-size: .8rem; font-weight: 650; }
.fi-hint-button { min-height: 2.75rem; display: inline-flex; align-items: center; gap: .25rem; padding: 0 .75rem; border: 2px solid #f1d9a6; border-radius: 999px; background: #fff; color: var(--fi-brown); font: inherit; font-size: .88rem; font-weight: 750; white-space: nowrap; cursor: pointer; }
.fi-hint-button:hover:not(:disabled) { border-color: var(--fi-gold-deep); }
.fi-hint-button:disabled { cursor: default; opacity: .55; }
.fi-list-title { margin: 0; color: var(--fi-gold-deep); font-size: .8rem; font-weight: 800; letter-spacing: .04em; }
/* the items: a sticker icon of the item (the item only, never its surroundings) and a small label; once found the icon
   greys out and a check badge appears (plus a word for screen readers), so colour is never the only sign */
.fi-items { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .4rem; margin: 0; padding: 0; list-style: none; }
.fi-item { position: relative; display: grid; justify-items: center; align-content: start; gap: .1rem; padding: .3rem .2rem .3rem; border: 2px solid #e2d3b8; border-radius: .9rem; background: #fff; color: var(--ink); text-align: center; transition: background-color .25s ease, border-color .25s ease; }
.fi-icon img { display: block; width: 3.5rem; height: 3.5rem; transition: filter .25s ease, opacity .25s ease; -webkit-user-drag: none; }
.fi-label { max-width: 100%; font-size: .74rem; font-weight: 750; line-height: 1.2; overflow-wrap: anywhere; }
.fi-check { position: absolute; top: -.5rem; right: -.4rem; width: 1.5rem; height: 1.5rem; display: none; place-items: center; border-radius: 50%; background: var(--fi-mint); box-shadow: 0 0 0 2px #fff; color: #fff; font-size: .85rem; font-weight: 800; line-height: 1; }
.fi-item.is-found { border-color: #9fd3bd; background: var(--fi-mint-soft); }
.fi-item.is-found .fi-icon img { filter: grayscale(1); opacity: .45; }
.fi-item.is-found .fi-label { color: var(--fi-mint); }
.fi-item.is-found .fi-check { display: grid; animation: fi-check .45s cubic-bezier(.2, 1.5, .4, 1) both; }
.fi-item.is-hinted { border-color: var(--fi-gold); box-shadow: 0 0 0 3px rgba(242, 181, 68, .28); }
@keyframes fi-check { from { transform: scale(.3); } to { transform: none; } }
.fi-items.is-complete .fi-item { animation: fi-dance .5s ease-in-out 2 both; }
.fi-items.is-complete .fi-item:nth-child(2) { animation-delay: .08s; }
.fi-items.is-complete .fi-item:nth-child(3) { animation-delay: .16s; }
.fi-items.is-complete .fi-item:nth-child(4) { animation-delay: .24s; }
.fi-items.is-complete .fi-item:nth-child(5) { animation-delay: .32s; }
@keyframes fi-dance { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (max-width: 24.5rem) {
  .fi-panel { gap: .4rem; padding-inline: .4rem; }
  .fi-items { gap: .3rem; }
  .fi-icon img { width: 3.1rem; height: 3.1rem; }
  .fi-hint-button { padding: 0 .6rem; }
}
@media (max-width: 55.99rem) {
  .fi-list-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
/* from 56rem: the picture on the left (never taller than the window), the panel beside it with one row per item */
@media (min-width: 56rem) {
  .fi-board { grid-template-columns: minmax(0, 1fr) 15rem; grid-template-areas: "stage panel"; align-items: start; gap: 1rem; }
  .fi-stage { grid-area: stage; width: min(100%, max(22rem, calc(100vh - 12.5rem))); justify-self: center; }
  .fi-panel { grid-area: panel; top: 1rem; bottom: auto; grid-template-columns: minmax(0, 1fr); gap: .7rem; padding: .9rem 1rem 1rem; box-shadow: none; }
  .fi-status { order: -1; display: flex; flex-wrap: wrap; justify-content: space-between; }
  .fi-count small { display: inline; }
  .fi-hint-button { padding: 0 .9rem; font-size: .92rem; }
  .fi-items { grid-auto-flow: row; grid-auto-columns: auto; gap: .5rem; }
  .fi-item { grid-template-columns: 3.5rem minmax(0, 1fr); justify-items: start; align-items: center; gap: .6rem; padding: .3rem .6rem .3rem .35rem; text-align: left; }
  .fi-label { font-size: .95rem; }
}

/* the picture */
.fi-stage { position: relative; }
.fi-pic { position: relative; margin: 0; overflow: hidden; border: 3px solid #fff; border-radius: 1rem; background: var(--fi-paper); box-shadow: var(--fi-shadow); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.fi-pic:focus { outline: none; }
.fi-pic:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.fi-pic img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; background: #f3ead8; -webkit-user-drag: none; }
.fi-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* keyboard play: a crosshair the arrow keys move; Enter taps there */
.fi-cursor { position: absolute; z-index: 2; width: 2.2rem; height: 2.2rem; margin: -1.1rem 0 0 -1.1rem; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px var(--ink); pointer-events: none; }
.fi-cursor::before, .fi-cursor::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink); }
.fi-cursor::before { width: 2px; height: .7rem; margin: -.35rem 0 0 -1px; }
.fi-cursor::after { width: .7rem; height: 2px; margin: -1px 0 0 -.35rem; }

/* found: Spot's soft ring with a white halo (the last one pops larger); a miss: a faint ripple (no penalty) */
.fi-mark-halo, .fi-mark, .fi-spark, .fi-miss { transform-box: fill-box; transform-origin: center; vector-effect: non-scaling-stroke; }
.fi-mark-halo { fill: none; stroke: #fff; stroke-width: 8; opacity: .85; animation: fi-pop .42s cubic-bezier(.2, 1.4, .4, 1) both; }
.fi-mark { fill: none; stroke: var(--fi-ring); stroke-width: 4; animation: fi-pop .42s cubic-bezier(.2, 1.4, .4, 1) both; }
.fi-spark { fill: var(--fi-gold); animation: fi-spark .7s ease-out both; }
.fi-found.is-final .fi-mark-halo, .fi-found.is-final .fi-mark { animation: fi-pop-final .7s cubic-bezier(.2, 1.5, .35, 1) both; }
.fi-found.is-final .fi-spark { animation: fi-spark 1s ease-out both; }
.fi-miss { fill: none; stroke: rgba(92, 107, 127, .6); stroke-width: 2; animation: fi-miss .5s ease-out both; }
@keyframes fi-pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fi-pop-final { 0% { transform: scale(.3); opacity: 0; } 55% { transform: scale(1.45); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fi-spark { 0% { transform: scale(0) rotate(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1) rotate(45deg); opacity: 0; } }
@keyframes fi-miss { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }

/* the weak hint: the picture dims a little everywhere except a soft, feathered area of about a quarter of it, which then
   fades by itself — no ring, no outline, no centre mark, never a narrow spotlight on the item */
.fi-hint-area { position: absolute; inset: 0; z-index: 1; pointer-events: none; animation: fi-hint 3.2s ease-in-out both; }
@keyframes fi-hint { 0% { opacity: 0; } 15% { opacity: 1; } 45% { opacity: .65; } 70% { opacity: 1; } 100% { opacity: 0; } }

.fi-toast { position: absolute; top: 2.4rem; left: 50%; z-index: 4; max-width: calc(100% - 2rem); margin: 0; padding: .45rem 1.1rem; border-radius: 999px; background: #fff; box-shadow: var(--fi-shadow); color: var(--fi-gold-deep); font-size: 1.05rem; font-weight: 800; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.9); transition: opacity .18s ease, transform .18s ease; }
.fi-toast.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* the clear (Human 2026-10-18: bigger). Over the picture, for about 2.8 s and never taking pointer input: a soft light,
   a big storybook "CLEAR!" that pops in, Mike's line in a speech bubble, gold stars bursting from the centre and paper
   confetti raining down. Then the result panel: the title, Mike's bubble, the clear time and the no-hint badge. */
.fi-burst { position: absolute; inset: 0; z-index: 7; overflow: hidden; pointer-events: none; }
.fi-burst i { position: absolute; top: 34%; width: .7rem; height: 1rem; border-radius: 2px; opacity: 0; animation: fi-confetti 2.5s cubic-bezier(.2, .7, .3, 1) forwards; }
.fi-burst i.is-star { width: 1.3rem; height: 1.3rem; border-radius: 0; background: var(--fi-gold); clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%); }
.fi-burst i.is-burst { left: 50%; top: 46%; width: 1.7rem; height: 1.7rem; margin: -.85rem 0 0 -.85rem; border-radius: 0; background: var(--fi-gold); clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%); animation: fi-star-burst 1.4s cubic-bezier(.15, .8, .3, 1) forwards; }
@keyframes fi-confetti {
  0% { transform: translate(0, 0) scale(.3) rotate(0); opacity: 0; }
  12% { opacity: 1; }
  40% { transform: translate(calc(var(--fi-drift) * .5), -30vh) scale(1) rotate(calc(var(--fi-spin) * .5)); opacity: 1; }
  100% { transform: translate(var(--fi-drift), 20vh) scale(.9) rotate(var(--fi-spin)); opacity: 0; }
}
@keyframes fi-star-burst { 0% { transform: translate(0, 0) scale(.2) rotate(0); opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--fi-dx), var(--fi-dy)) scale(1.1) rotate(160deg); opacity: 0; } }

.fi-celebrate { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 1rem; background: radial-gradient(circle at 50% 46%, rgba(255, 251, 238, .82), rgba(255, 246, 220, .5) 42%, rgba(255, 246, 220, 0) 72%); pointer-events: none; }
.fi-celebrate.is-on { animation: fi-celebrate 2.8s ease-out both; }
@keyframes fi-celebrate { 0% { opacity: 0; } 8% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
.fi-clear-word { margin: 0; color: #ffbe2e; font-size: clamp(3.2rem, 17vw, 6.5rem); font-weight: 900; line-height: 1; letter-spacing: .03em; transform: rotate(-6deg);
  text-shadow: .045em 0 #fff, -.045em 0 #fff, 0 .045em #fff, 0 -.045em #fff, .032em .032em #fff, -.032em .032em #fff, .032em -.032em #fff, -.032em -.032em #fff, 0 .1em 0 #c9822a, 0 .16em .3em rgba(90, 70, 54, .35); }
.fi-celebrate.is-on .fi-clear-word { animation: fi-clear-pop .9s cubic-bezier(.2, 1.6, .35, 1) both; }
@keyframes fi-clear-pop { 0% { transform: scale(.2) rotate(-24deg); opacity: 0; } 55% { transform: scale(1.18) rotate(4deg); opacity: 1; } 75% { transform: scale(.94) rotate(-9deg); } 100% { transform: scale(1) rotate(-6deg); opacity: 1; } }
.fi-celebrate-cheer { margin: 0; max-width: min(22rem, 94%); padding: .55rem 1rem; border: 3px solid #f6d58f; border-radius: 1.2rem; background: #fff; box-shadow: var(--fi-shadow); color: var(--fi-brown); font-size: clamp(.95rem, 3.9vw, 1.2rem); font-weight: 800; line-height: 1.4; text-align: center; }
.fi-celebrate.is-on .fi-celebrate-cheer { animation: fi-bubble .5s .45s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes fi-bubble { from { transform: translateY(12px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.fi-cheer-name { display: inline-block; margin-right: .45rem; padding: 0 .55rem; border-radius: 999px; background: #ffe2a8; color: var(--fi-brown); font-size: .8em; font-weight: 800; vertical-align: .08em; }

.fi-clear { margin-top: 1rem; padding: 1.35rem 1rem 1.25rem; border: 2px solid #f6e3bd; border-radius: 1.1rem; background: #fff; box-shadow: var(--fi-shadow); text-align: center; animation: fi-up .5s cubic-bezier(.2, 1.3, .4, 1) both; }
.fi-clear:focus { outline: none; }
.fi-clear:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@keyframes fi-up { from { transform: translateY(16px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.fi-clear-stars { margin: 0; color: var(--fi-gold); font-size: 1.35rem; letter-spacing: .4em; }
.fi-clear h2 { margin: .1rem 0 .6rem; font-size: clamp(1.7rem, 6vw, 2.1rem); animation: fi-title .6s .15s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes fi-title { from { transform: scale(.7); } to { transform: none; } }
/* Mike's line: a speech bubble with a little tail */
.fi-cheer { position: relative; display: inline-block; max-width: 100%; margin: 0 0 .9rem; padding: .6rem 1rem; border: 2px solid #f6d58f; border-radius: 1.1rem; background: var(--fi-paper); color: var(--fi-brown); font-size: 1.12rem; font-weight: 800; line-height: 1.45; }
.fi-cheer::after { content: ""; position: absolute; left: 50%; bottom: -.55rem; width: .9rem; height: .9rem; margin-left: -.45rem; border-right: 2px solid #f6d58f; border-bottom: 2px solid #f6d58f; background: var(--fi-paper); transform: rotate(45deg); }
.fi-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: .2rem 0 .1rem; }
.fi-stat { margin: 0; display: inline-flex; align-items: baseline; gap: .45rem; padding: .35rem 1rem; border: 2px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-weight: 700; }
.fi-stat b { color: var(--ink); font-size: 1.35rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.fi-stat.is-gold { align-items: center; border-color: var(--fi-gold); background: #fff3cf; color: var(--fi-gold-deep); }
.fi-stat.is-gold b { color: #7a4e08; font-size: 1.05rem; }
.fi-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1rem; }
.fi-button { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 1.1rem; border: 2px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-weight: 720; text-decoration: none; cursor: pointer; }
.fi-button.is-primary { border-color: var(--fi-gold-deep); background: var(--fi-gold); color: #3b2a12; }
.fi-button.is-quiet { border-color: transparent; color: var(--muted); }

/* the list page: every puzzle with its thumbnail (the picture only), number, title and small labels */
.fi-list { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 36rem) { .fi-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fi-card { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: .9rem; padding: .75rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); color: var(--ink); text-decoration: none; }
.fi-card:hover { border-color: var(--fi-gold-deep); box-shadow: 0 12px 28px rgba(16, 35, 63, .09); }
.fi-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: .7rem; background: #f3ead8; }
.fi-card-meta { display: block; color: var(--fi-gold-deep); font-size: .85rem; font-weight: 750; }
.fi-card-meta span { color: var(--muted); font-weight: 650; }
.fi-card strong { display: block; font-size: 1.05rem; line-height: 1.35; }
.fi-card-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.fi-card-chips:empty { display: none; }
.fi-chip.is-level { border-color: #cfd9e6; background: #f4f7fb; color: #3b5068; }
.fi-chip.is-new { border-color: #f1d9a6; background: #fff3cf; color: var(--fi-gold-deep); }
.fi-later { margin: .8rem 0 0; color: var(--muted); font-size: .92rem; }

@media (prefers-reduced-motion: reduce) {
  .fi-mark-halo, .fi-mark, .fi-spark, .fi-miss, .fi-clear, .fi-item, .fi-item.is-found .fi-check, .fi-items.is-complete .fi-item, .fi-icon img, .fi-toast, .fi-found.is-final .fi-mark-halo, .fi-found.is-final .fi-mark, .fi-found.is-final .fi-spark { animation: none !important; transition: none !important; }
  .fi-spark { display: none; }
  /* the hint stays a still, soft area that simply goes away */
  .fi-hint-area { animation: fi-hint-still 3.2s linear both !important; }
  @keyframes fi-hint-still { 0%, 92% { opacity: 1; } 100% { opacity: 0; } }
  .fi-burst { display: none; }
  /* the clear: the words appear still and go away by themselves */
  .fi-celebrate, .fi-celebrate *, .fi-clear h2 { animation: none !important; }
}