.finder-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; }
.finder-heading h1 { font-size:36px; margin:4px 0; color:#263c45; }
.finder-heading p { margin:6px 0; }
.finder-eyebrow { color:#a13461; font-weight:700; font-size:13px; text-transform:uppercase; }
.finder-worlds { display:flex; flex-wrap:wrap; gap:14px; }
.finder-worlds a { padding:8px 0; color:#42616c; text-decoration:none; border-bottom:3px solid transparent; }
.finder-worlds a[aria-current] { color:#9d2e5a; border-color:#d9517f; }
.finder-game.game-layout { display:block; margin-top:20px; }
.finder-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 0; }
.finder-tally { display:flex; align-items:center; gap:10px; }
.finder-tally strong { font-size:24px; display:block; line-height:1.2; }
.finder-tally span:not(#finder-count) { font-size:13px; color:#49606b; }
.finder-sample { width:46px; height:52px; }
.finder-tools { display:flex; align-items:center; gap:6px; }
.finder-tools button, #finder-replay { border:1px solid #bdced1; background:#fff; color:#284c57; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.finder-tools button { width:44px; height:44px; padding:0; flex:none; }
.finder-tools button:hover { background:#e7f4ef; border-color:#4c9083; }
.finder-tools button:disabled { opacity:.4; cursor:default; }
#finder-zoom { font-size:13px; font-variant-numeric:tabular-nums; width:40px; text-align:center; }
#finder-board { width:100%; aspect-ratio:8/5; position:relative; overflow:hidden; background:#78bfcb; touch-action:none; user-select:none; cursor:grab; border-radius:8px; outline-offset:4px; }
#finder-board:active { cursor:grabbing; }
#finder-board:focus-visible, .finder-game button:focus-visible { outline:3px solid #a52e60; outline-offset:3px; }
#finder-scene { display:block; width:100%; height:100%; }
#finder-hint-area { fill:#ffe482; fill-opacity:.15; stroke:#ffea8c; stroke-width:5; stroke-dasharray:12 8; pointer-events:none; }
#finder-hint-area[hidden] { display:none; }
.finder-target.found use { opacity:.45; }
.finder-target circle { fill:#d8ffe1; fill-opacity:.5; stroke:#186047; stroke-width:2; pointer-events:none; }
.finder-target text { font-family:system-ui,sans-serif; font-size:15px; font-weight:800; fill:#123b30; text-anchor:middle; pointer-events:none; }
.finder-crosshair { display:none; position:absolute; top:50%; left:50%; width:24px; height:24px; border:2px solid white; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 2px #253745; pointer-events:none; }
#finder-board:focus-visible .finder-crosshair, #finder-board.keyboard .finder-crosshair { display:block; }
.finder-crosshair:after { content:''; display:block; background:white; width:4px; height:4px; border-radius:50%; margin:8px; }
.finder-start { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; background:#173f496b; color:white; text-shadow:0 1px 6px #173f49; }
.finder-start strong { font-size:28px; text-align:center; }
.finder-start button { padding:12px 24px; background:#fff4b8; color:#2c4547; border:2px solid #fff; font:700 16px system-ui,sans-serif; border-radius:6px; cursor:pointer; }
.finder-start[hidden], #finder-replay[hidden] { display:none; }
.finder-below { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:72px; }
#finder-feedback { margin:12px 0; color:#36535d; }
#finder-replay { padding:10px 14px; gap:8px; flex:none; font:inherit; }
#finder-collection { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:8px; }
.finder-stamp { aspect-ratio:1; max-height:65px; border-bottom:3px solid #d4e0e2; display:grid; place-items:center; color:#788c94; font-weight:700; }
.finder-stamp.found { color:#1e6c50; border-color:#3e9e78; background:#ebf6ee; }
.finder-game .game-tracker { margin-top:20px; border:0; border-top:1px solid #d4e0e2; border-radius:0; background:none; box-shadow:none; padding:20px 0; }
.finder-footnote { border-top:1px solid #d4e0e2; padding:12px 0 24px; color:#4a636b; font-size:14px; }
.finder-footnote strong { color:#9d2e5a; margin-right:8px; }
.finder-footnote summary { cursor:pointer; }
@media(max-width:600px) { #finder-board { aspect-ratio:4/5; } .finder-heading h1 { font-size:30px; } .finder-tools { gap:4px; } #finder-collection { grid-template-columns:repeat(6,minmax(0,1fr)); } .finder-start strong { font-size:23px; } .finder-below { align-items:flex-start; flex-direction:column; gap:0; padding-bottom:12px; } }