/* The playful parts: Surprise me, the shortcuts sheet, Spot the animal (hunt.js), Where was this? (guess.js), Arrange. */

/* home bar: two toys beside the map switch */
.home-play{display:flex;gap:2px;margin-left:12px;border-left:1px solid #ffffff33;padding-left:10px}
.play-b{display:flex;align-items:center;gap:10px;background:none;border:0;min-height:44px;padding:0 12px;color:#d2ded9;font:500 var(--lab-size) var(--label);text-transform:uppercase;letter-spacing:var(--lab-track);white-space:nowrap}
.play-b:hover{color:#fff}
.die{position:relative;display:block;width:17px;height:17px;border:1.3px solid currentColor;border-radius:4px;transition:transform .5s var(--ease)}
.die b{position:absolute;width:3px;height:3px;border-radius:50%;background:currentColor}
.die b:nth-child(1){left:2.5px;top:2.5px}.die b:nth-child(2){right:2.5px;top:2.5px}.die b:nth-child(3){left:50%;top:50%;margin:-1.5px 0 0 -1.5px}.die b:nth-child(4){left:2.5px;bottom:2.5px}.die b:nth-child(5){right:2.5px;bottom:2.5px}
.play-b:hover .die{transform:rotate(-14deg)}
.pin{position:relative;display:block;width:13px;height:13px;border:1.3px solid currentColor;border-radius:50% 50% 50% 0;transform:rotate(-45deg);margin:0 2px 3px}
.pin::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px;border-radius:50%;background:currentColor}
.play-b:hover .pin{animation:pin-hop .6s var(--ease)}
@keyframes pin-hop{40%{transform:rotate(-45deg) translate(3px,-3px)}}
/* on a phone the toys float at the bottom, where a thumb is, instead of off the end of the scrolling bar */
@media(max-width:850px){.home-play{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);margin:0;padding:4px;border:1px solid #ffffff26;border-radius:24px;background:#07191ce8;box-shadow:0 10px 40px #000a;backdrop-filter:blur(10px)}.play-b{min-height:40px;padding:0 14px}.play-b+.play-b{border-left:1px solid #ffffff22}
 .map-on .home-play,.view-all .home-play{display:none}}

/* menu shortcuts */
.menu kbd{font:500 10px var(--label);color:var(--soft);border:1px solid #ffffff30;border-radius:4px;padding:2px 6px;min-width:20px;text-align:center}
@media(pointer:coarse){.menu kbd,#keys-open{display:none}}

/* the shortcuts sheet */
.keys dl{display:grid;grid-template-columns:auto 1fr;gap:12px 20px;margin:4px 0 0;font:15px/1.4 var(--serif);color:#d9e3dc}
.keys dt{white-space:nowrap}.keys dd{margin:0}
@media(max-width:520px){.keys dl{grid-template-columns:1fr;row-gap:2px}.keys dt{white-space:normal}.keys dd{margin-bottom:10px}}
.keys kbd{display:inline-block;font:500 11px var(--label);color:var(--paper);border:1px solid #ffffff55;border-bottom-width:2px;border-radius:5px;padding:3px 8px;min-width:26px;text-align:center}
#keys-close{position:absolute;right:16px;top:16px;width:44px;height:44px;display:grid;place-items:center;background:none;border:0}

/* Spot the animal */
.hunt{margin-top:12px;pointer-events:auto;max-width:30em}
.hunt-ask{font-family:var(--serif)!important;font-size:clamp(20px,1.8vw,26px)!important;font-style:italic;opacity:1!important;margin:0!important}
.scene[data-ink=dark] .hunt-ask{color:#0b2023!important}
.hunt-say{display:inline-block;font:500 var(--lab-size) var(--label)!important;text-transform:uppercase;letter-spacing:var(--lab-track);color:#f2d9a6!important;opacity:1!important;margin:8px 0 0!important;padding:4px 8px;background:#050f11b8;min-height:1.4em}
.hunt-say:empty{display:none}
.hunt-give{margin-top:10px;background:#050f11b0;border:1px solid #ffffff60;color:#fff;min-height:36px;padding:0 14px;font:500 var(--lab-size) var(--label);text-transform:uppercase;letter-spacing:var(--lab-track)}
.hunt-give:hover{background:#ffffff22}.hunt-give[hidden]{display:none}
.hunt.won .hunt-ask{animation:hunt-pop .6s var(--ease)}
@keyframes hunt-pop{from{transform:scale(.8);opacity:0}}
/* while hunting the photograph is the only clue: no note, no close-up marks, no map, and a seeking cursor */
.hunting #photo-note,.hunting #detail-links,.hunting #markers,.hunting .minimap,.hunting #author-note,.hunting #guide{display:none!important}
.hunting .scene{cursor:crosshair}
.hunting .caption .eyebrow,.hunting .caption h1{opacity:1}
.hunt-ring{position:absolute;z-index:4;transform:translate(-50%,-50%) scale(1.6);border-radius:50%;border:2px solid #f2d9a6;box-shadow:0 0 0 2000px #050f1100,0 0 30px #f2d9a6aa,inset 0 0 20px #f2d9a666;opacity:0;pointer-events:none;transition:opacity .6s,transform .9s var(--ease),box-shadow .9s}
.hunt-ring.on{opacity:1;transform:translate(-50%,-50%) scale(1);box-shadow:0 0 0 2000px #050f1166,0 0 30px #f2d9a6aa,inset 0 0 20px #f2d9a666}
.hunt-miss{position:fixed;z-index:70;transform:translate(-50%,-50%);pointer-events:none;padding:3px 7px;background:#050f11a8;font:600 12px var(--label);text-transform:uppercase;letter-spacing:.1em;color:#fff;text-shadow:0 1px 8px #000;animation:miss 1.1s var(--ease) forwards}
.hunt-miss::before{content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px;border-radius:50%;border:2px solid currentColor;animation:ripple 1.1s var(--ease) forwards}
.hunt-miss.hot{color:#ff9a6b}.hunt-miss.warm{color:#f2d9a6}.hunt-miss.cool{color:#bfe8ff}.hunt-miss.cold{color:#8fb7ff}
@keyframes miss{0%{opacity:0}15%{opacity:1}100%{opacity:0;margin-top:-26px}}
@keyframes ripple{to{transform:scale(2.2);opacity:0}}

/* Where was this? */
.guess{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#050f11;color:var(--paper);overflow:hidden}
.guess[open]{display:flex;flex-direction:column;animation:rise-in var(--t2) var(--ease)}
.guess::backdrop{background:#050f11}
.g-head{display:flex;align-items:center;gap:24px;padding:18px 28px 14px 40px;border-bottom:1px solid #ffffff14}
.g-head>div{flex:1}
.g-eye{display:block;font:500 var(--lab-size) var(--label);text-transform:uppercase;letter-spacing:var(--lab-track);color:#f2d9a6}
.g-head h2{margin:4px 0 0;font:380 clamp(24px,2.2vw,32px)/1 var(--serif);letter-spacing:-.025em}
.g-score{font:500 13px var(--label);letter-spacing:.06em;text-transform:uppercase;color:#e3ebe7;font-variant-numeric:tabular-nums}
.g-close{width:44px;height:44px;display:grid;place-items:center;background:none;border:1px solid #ffffff40;border-radius:50%}
.g-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.g-body[hidden]{display:none}
.g-photo{margin:0;position:relative;display:grid;place-items:center;padding:28px 20px 28px 40px;min-height:0}
.g-photo img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 20px 60px #000a;opacity:0;transform:scale(.97);transition:opacity .5s,transform .8s var(--ease)}
.g-photo img.in{opacity:1;transform:none}
.g-hint{position:absolute;left:40px;bottom:6px;font:500 var(--lab-size) var(--label);text-transform:uppercase;letter-spacing:var(--lab-track);color:var(--soft)}
.g-side{display:flex;flex-direction:column;min-height:0;padding:20px 40px 24px 12px}
.g-map{position:relative;flex:1;min-height:0;overflow:hidden;cursor:crosshair;outline:none;border:1px solid #ffffff10;background:radial-gradient(ellipse at 50% 45%,#0b2326,#050f11 75%)}
.g-map:focus-visible{border-color:var(--focus)}
.g-map .mapsvg .land{fill:#bdf3e412}
.g-pin,.g-true{position:absolute;z-index:3;pointer-events:none}
.g-pin{width:22px;height:22px;margin:-22px 0 0 -11px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#f4f4e9;box-shadow:0 4px 14px #000a;animation:pin-drop .35s var(--ease)}
.g-pin::after{content:"";position:absolute;left:7px;top:7px;width:8px;height:8px;border-radius:50%;background:#07191c}
@keyframes pin-drop{from{transform:rotate(-45deg) translate(14px,-14px);opacity:0}}
.g-true{width:16px;height:16px;margin:-8px;border-radius:50%;background:#f2d9a6;box-shadow:0 0 0 0 #f2d9a6aa;animation:true-in .5s .5s var(--ease) both,pulse 1.6s 1s infinite}
.g-true em{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);white-space:nowrap;background:#07191c;border:1px solid #f2d9a666;padding:4px 9px;font:500 11px var(--label);font-style:normal;text-transform:uppercase;letter-spacing:.08em;color:#f2d9a6}
@keyframes true-in{from{transform:scale(0)}}
@keyframes pulse{70%{box-shadow:0 0 0 18px #f2d9a600}100%{box-shadow:0 0 0 0 #f2d9a600}}
.mapsvg .g-line{fill:none;stroke:#f2d9a6;stroke-width:1.8px;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;animation:route .8s var(--ease) forwards}
.g-bar{display:flex;align-items:center;gap:18px;padding-top:16px;min-height:64px}
.g-msg{flex:1;margin:0;font:16px/1.4 var(--serif);color:#e3ebe7}.g-msg b{color:#fff;font-weight:500}
.g-go,.g-replay,.g-done{min-height:46px;padding:0 22px;border:1px solid #f4f4e9;background:#f4f4e9;color:#07191c;font:600 var(--lab-size) var(--label);text-transform:uppercase;letter-spacing:var(--lab-track);white-space:nowrap}
.g-go:disabled{opacity:.3}.g-go:not(:disabled):hover,.g-replay:hover{background:#fff}
.g-done{background:none;color:var(--paper);border-color:#ffffff60}.g-done:hover{background:#ffffff14}
.g-end{flex:1;overflow:auto;padding:40px;display:flex;flex-direction:column;align-items:center;text-align:center}
.g-end[hidden]{display:none}
.g-total{margin:10px 0 0;font:300 22px var(--serif);color:var(--soft)}.g-total b{font:340 clamp(56px,7vw,96px)/1 var(--serif);letter-spacing:-.04em;color:#fff;margin-right:8px}
.g-rank{margin:16px 0 6px;font:380 italic clamp(28px,3vw,40px) var(--serif);letter-spacing:-.03em;color:#f2d9a6}
.g-blurb{margin:0 0 28px;font:16px var(--serif);color:#d9e3dc}
.g-list{list-style:none;margin:0 0 30px;padding:0;width:min(560px,100%);display:flex;flex-direction:column;gap:6px;text-align:left}
.g-list button{width:100%;text-align:left;display:flex;align-items:center;gap:14px;background:#ffffff08;border:1px solid #ffffff14;padding:8px;color:inherit}
.g-list button:hover{background:#ffffff14}
.g-list img{width:72px;height:48px;object-fit:cover;flex:0 0 auto}
.g-list span{flex:1;min-width:0}.g-list b{display:block;font:400 16px/1.2 var(--serif)}.g-list small{display:block;margin-top:3px;font:500 11px var(--label);text-transform:uppercase;letter-spacing:.06em;color:var(--soft)}
.g-list em{font:600 13px var(--label);font-style:normal;color:#f2d9a6;padding-right:8px}
.g-again{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
@media(max-width:850px){
 .g-head{padding:12px 14px 10px 18px;gap:12px}.g-score{font-size:11px}
 .g-body{grid-template-columns:1fr;grid-template-rows:minmax(0,38%) minmax(0,1fr)}
 .g-photo{padding:12px 14px 22px}.g-hint{left:16px;bottom:2px}
 .g-side{padding:6px 14px 14px}.g-bar{gap:12px;min-height:56px;padding-top:10px}.g-msg{font-size:14px}.g-go{padding:0 16px}
 .g-end{padding:24px 16px}}

/* Arrange the wall */
.arrange{position:fixed;z-index:31;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:2px;padding:4px;background:#07191ce8;border:1px solid #ffffff26;border-radius:24px;box-shadow:0 10px 40px #000a;backdrop-filter:blur(10px)}
.arrange button{min-height:36px;padding:0 15px;border:0;border-radius:18px;background:none;color:#d2ded9;font:500 11px var(--label);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.arrange button:hover{color:#fff}.arrange button[aria-pressed=true]{background:#f4f4e9;color:#07191c}
.arrange button[data-sort=colour][aria-pressed=true]{background:linear-gradient(90deg,#f6b3a3,#f7dc9a,#bfe6a8,#a6dcea,#b9b4f0,#eab3dc);color:#07191c}
.arrange button.busy{animation:busy .8s infinite alternate}
@keyframes busy{to{opacity:.4}}
.home:not(.view-all) .arrange,.map-on .arrange{display:none}
@media(max-width:850px){.arrange{bottom:14px;max-width:calc(100vw - 28px);overflow-x:auto}.arrange button{padding:0 12px}}
@media(prefers-reduced-motion:reduce){.hunt-miss,.hunt-miss::before,.g-pin,.g-true,.g-line line{animation:none!important}.mapsvg .g-line{stroke-dashoffset:0}}

/* the third toy: spot the animal */
.eye{position:relative;display:block;width:17px;height:11px;border:1.3px solid currentColor;border-radius:50%}
.eye::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:currentColor;transition:transform .3s}
.play-b:hover .eye::after{transform:translateX(3px)}
/* Film (film.js): a small film frame with its sprocket holes */
.reel{position:relative;display:block;width:18px;height:13px;border:1.3px solid currentColor;border-radius:2px}
.reel::before,.reel::after{content:"";position:absolute;left:1.5px;right:1.5px;height:1.6px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px);transition:background-position .6s var(--ease)}
.reel::before{top:1.3px}.reel::after{bottom:1.3px}
.play-b:hover .reel::before,.play-b:hover .reel::after{background-position:4px 0}
.play-b .s{display:none}
@media(max-width:850px){.play-b .l{display:none}.play-b .s{display:inline}.play-b{padding:0 12px;gap:8px}}
.g-modes{display:flex;gap:4px}.g-modes button{min-height:36px;padding:0 12px;border:1px solid #ffffff26;background:none;color:var(--soft);font:500 var(--lab-size) var(--label);text-transform:uppercase;letter-spacing:var(--lab-track)}
.g-modes button[aria-pressed=true]{color:#07191c;background:#f4f4e9;border-color:#f4f4e9}.g-modes button:not([aria-pressed=true]):hover{color:#fff;border-color:#ffffff60}
.g-copy{min-height:46px;padding:0 22px;border:1px solid #f4f4e9;background:#f4f4e9;color:#07191c;font:600 var(--lab-size) var(--label);text-transform:uppercase;letter-spacing:var(--lab-track)}.g-copy[hidden],.g-replay[hidden]{display:none}
@media(max-width:700px){.g-head{flex-wrap:wrap}.g-modes{order:3;width:100%}.g-modes button{flex:1;padding:0 6px}}
.share-wrap{position:relative;display:inline-flex}
.share-pop{position:absolute;bottom:calc(100% + 6px);left:-12px;display:flex;flex-direction:column;min-width:190px;padding:6px;background:var(--glass,#0b2023f0);border:1px solid #ffffff22;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:20}
.share-pop[hidden]{display:none}.share-pop button{text-align:left;padding:10px 12px!important;min-height:40px;pointer-events:auto!important;white-space:nowrap}.share-pop button:hover{background:#ffffff14}
.scene[data-side=right] .share-pop{left:auto;right:-12px}
.at-home #postcard-open{display:none}
.postcard{width:min(980px,calc(100vw - 32px))}
.pc-card{display:block;position:relative;width:100%;height:min(52vh,calc((100vw - 110px)*.6667));margin:18px 0 16px;padding:0;border:0;background:none;perspective:1600px;cursor:pointer}
.pc-card canvas{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;box-shadow:0 18px 50px #0008;backface-visibility:hidden;transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.pc-back{transform:rotateY(180deg)}.turned .pc-front{transform:rotateY(-180deg)}.turned .pc-back{transform:rotateY(0)}
.pc-label{display:block;font:500 var(--lab-size) var(--label);text-transform:uppercase;letter-spacing:var(--lab-track);color:var(--soft);margin-bottom:6px}
#pc-msg{width:100%;box-sizing:border-box;background:#ffffff0d;border:1px solid #ffffff2e;color:var(--paper);font:italic 17px/1.5 var(--serif);padding:10px 12px;resize:vertical}
.postcard .pc-actions{display:flex;flex-direction:row;gap:10px;flex-wrap:wrap;margin-top:14px}.postcard .pc-actions button{min-height:44px;padding:0 18px;border:1px solid #ffffff60;background:none;color:var(--paper);font:600 var(--lab-size) var(--label);text-transform:uppercase;letter-spacing:var(--lab-track)}
.postcard .pc-actions .pc-save{background:#f4f4e9;color:#07191c;border-color:#f4f4e9}.pc-actions [hidden]{display:none}
.pc-close{position:absolute;top:12px;right:12px;width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:var(--paper)}.pc-close .icon{width:18px;height:18px}
@media(prefers-reduced-motion:reduce){.pc-card canvas{transition:none}}
.postcard{max-height:calc(100vh - 24px);overflow:auto}
/* four toys on a phone (Film joined them): a little tighter so the pill fits a phone; on the narrowest, words only */
@media(max-width:850px){.home-play .play-b{padding:0 9px;gap:7px}}
@media(max-width:420px){.home-play .play-b i{display:none}}