:root { color-scheme: dark; font-family: monospace; background: #253f48; color: #fff0d6; }
* { box-sizing: border-box; }
body { margin: 0; }
.world { position: relative; min-height: 640px; height: 100svh; overflow: hidden; isolation: isolate; }
.terrain { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -3; }
.shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg,rgba(22,42,53,.8),rgba(28,48,60,.72) 24%,rgba(24,44,54,.08) 49%,transparent 70%,rgba(12,36,43,.27)); }
header { position: absolute; top: clamp(20px,3.5vw,44px); left: clamp(20px,3.5vw,54px); z-index: 4; }
.logo { display: block; width: clamp(154px,18vw,240px); height: auto; background: rgba(249,245,230,.92); padding: 10px 15px; border-radius: 3px; box-shadow: 0 3px 24px #142b3420; }
h1 { position: absolute; margin: 0; left: 50%; top: 23%; transform: translate(-50%,-50%); width: min(73vw,900px); z-index: 3; text-align: center; pointer-events: none; filter: drop-shadow(0 3px 0 #1b35454d); }
h1 svg { display: block; width: 100%; overflow: visible; fill: #fff0d6; }
.fallback { font-size: clamp(25px,6vw,80px); letter-spacing: .06em; }
.ready .fallback { display: none; }
.discoveries { position: absolute; inset: 0; }
.discovery { position: absolute; left: var(--x); top: var(--y); width: clamp(150px,22vw,330px); aspect-ratio: 1.6; transform: translate(-50%,-50%); border: 0; padding: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; color: inherit; }
.cloud { position: absolute; inset: -15%; width: 130%; height: 130%; image-rendering: pixelated; pointer-events: none; transition: opacity .65s ease,transform .85s ease,filter .6s ease; animation: drift var(--duration,8s) ease-in-out infinite alternate; filter: drop-shadow(0 12px 9px #283f4b45); }
.reward { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: clamp(64px,6.5vw,92px); aspect-ratio: 1; transform: translate(-50%,-35%) scale(.65) rotate(-9deg); opacity: 0; transition: transform .5s cubic-bezier(.16,1,.3,1),opacity .3s; pointer-events: none; background: #fff2da; border: 3px solid #fff8e8; border-radius: 50%; box-shadow: 0 5px 0 #20495455,0 10px 28px #173e4b55; }
.reward::after { content: ''; width: 9px; height: 9px; background: #fff2da; transform: rotate(45deg); position: absolute; bottom: -6px; }
.reward img { width: 65%; height: 65%; }
.discovery.is-revealed .cloud { opacity: 0; transform: scale(1.3); filter: blur(7px); animation-play-state: paused; }
.discovery.is-revealed .reward { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); }
.discovery:focus { outline: none; }
.discovery:focus-visible::after { content: ''; position: absolute; inset: 14%; border: 2px dashed #fff0d6; border-radius: 45%; }
.credits { position: absolute; bottom: 20px; left: 24px; font-size: 10px; letter-spacing: .05em; color: #fff0d6b0; text-decoration: none; z-index: 5; }
.credits:hover { color: #fff0d6; text-decoration: underline; }
.compass { position: absolute; right: 25px; bottom: 20px; width: 52px; text-align: center; opacity: .8; pointer-events: none; }
.compass span { font-size: 10px; }.compass svg { width: 100%; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@keyframes drift { from { translate: -5px -3px; } to { translate: 7px 4px; } }
@media(max-width:600px) {
 .world { min-height: 640px; }.terrain { object-position: 49% center; }
 h1 { top: 22%; width: 88%; }
 .discovery { left: var(--mx); top: var(--my); width: clamp(145px,40vw,210px); }
 .logo { width: 166px; padding: 8px 12px; }
 .shade { background: linear-gradient(180deg,#193b4b99,#203d4cbf 24%,#203d4c10 49%,transparent 75%,#193b4b55); }
 .compass { width: 40px; right: 16px; }.credits { left: 20px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }