:root { color-scheme: light; --coral:#ff6b4a; --ink:#24342e; --green:#426b56; --cream:#fffaf0; --paper:#ffffff; --muted:#66756d; --gold:#ffc145; --line:#e9e3d8; }
* { box-sizing:border-box; }
body { margin:0; background:#142b1e; color:var(--ink); font-family:ui-rounded, "Nunito", system-ui, sans-serif; min-height:100vh; overflow:hidden; }
button { font:inherit; cursor:pointer; }
.app-shell { width:100vw; height:100dvh; min-height:100vh; position:relative; overflow:hidden; }
.eyebrow { color:var(--green); font-size:10px; font-weight:800; letter-spacing:1.55px; margin:0 0 3px; }
h2 { font-family:Georgia,serif; font-size:24px; margin:0; letter-spacing:-.7px; }
.intro-screen { position:fixed; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(22px,5vh,44px); padding:max(18px,env(safe-area-inset-top)) 0 max(22px,env(safe-area-inset-bottom)); background:#142b1e; transition:opacity .35s ease,visibility .35s ease; }
.intro-screen::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 38%,#315a3666 0,#142b1e 72%); pointer-events:none; }
.intro-screen img { position:relative; display:block; width:100%; height:auto; max-height:68dvh; object-fit:contain; }
.intro-card { position:relative; z-index:1; width:max-content; max-width:calc(100vw - 28px); padding:0; color:#fff; text-align:center; }
.game-started .intro-screen { opacity:0; visibility:hidden; pointer-events:none; }
.help-button { position:fixed; z-index:3; right:12px; top:calc(12px + env(safe-area-inset-top)); width:38px; height:38px; border-radius:50%; border:2px solid #fff; background:#f8fff4; color:var(--green); font-weight:900; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.game-started .help-button { opacity:1; pointer-events:auto; }
.status-label,.status-text,.location-note { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.primary-button { border:3px solid #fff; border-radius:999px; background:var(--coral); color:#fff; font-weight:900; padding:13px 22px; min-height:52px; box-shadow:0 5px 0 #bd4635,0 7px 18px #10271999; white-space:nowrap; }
.primary-button span { font-size:20px; margin-left:7px; vertical-align:-1px; }
.location-note { color:#d7e4d4; font-size:10px; margin:10px 0 0; }
.phone-only-notice { display:none; min-height:100vh; padding:32px; place-items:center; background:radial-gradient(circle at 50% 30%,#315a36,#142b1e 70%); color:#fff; text-align:center; }
.phone-only-notice > div { max-width:520px; padding:38px 30px; border:1px solid #ffffff35; border-radius:28px; background:#0b1f16aa; box-shadow:0 20px 70px #0005; }
.phone-only-notice h1 { margin:12px 0 14px; font-size:clamp(28px,5vw,44px); line-height:1.05; }
.phone-only-notice p { margin:0; color:#dcebdd; font-size:18px; line-height:1.5; }
.phone-symbol { font-size:54px; }
.not-phone .phone-only-notice { display:grid; }
.not-phone .app-shell { display:none; }
.map-card { position:fixed; inset:0; z-index:1; display:grid; place-items:center; background:#203626; padding:0; overflow:hidden; }
.map-card::before { content:""; position:absolute; inset:-24px; background:linear-gradient(#17362255,#17362255),url('Slike/gargamel-zemljevid-v4.png') center/cover no-repeat; filter:blur(14px) saturate(.8) brightness(.65); transform:scale(1.06); }
.map-topline { position:fixed; z-index:2; right:15px; top:calc(17px + env(safe-area-inset-top)); display:flex; gap:9px; color:#fff; text-shadow:0 2px 3px #17301db0; font-size:10px; letter-spacing:1.25px; font-weight:800; }
#routeProgress { color:var(--coral); }
#routeMap { position:relative; z-index:1; width:100%; height:100%; overflow:visible; background:transparent; }
.route-shadow { fill:none; stroke:#fff7dfcc; stroke-width:9; stroke-linecap:round; stroke-linejoin:round; }
.route-path { fill:none; stroke:var(--coral); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1 8; }
.checkpoint { cursor:pointer; outline:none; }
.marker-core { transform-box:fill-box; transform-origin:center; animation:character-float 2.4s ease-in-out infinite; }
.checkpoint.fairy .marker-core { animation-duration:2s; animation-delay:-.8s; }
.marker-halo { fill:#fff8; stroke:none; }
.checkpoint.fairy .marker-halo { fill:#f4d9ffb8; }
.checkpoint-photo { pointer-events:none; }
.map-character { pointer-events:none; transform-origin:center; animation:face-wiggle 3.2s ease-in-out infinite; }
.map-character > * { stroke:#51392d; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.face-skin { fill:#ffd7a3; }
.face-eye { fill:#3f3028; stroke:none; transform-origin:center; animation:face-blink 4.5s ease-in-out infinite; }
.face-smile { fill:none; stroke:#8c3d36; stroke-width:1.1; }
.gnome-hat { fill:#e7544b; stroke:#8f302c; }
.gnome-beard { fill:#fffaf0; stroke:#9d8572; }
.fairy-wing { fill:#c9f2ff; stroke:#559bc2; }
.fairy-hair { fill:#ef75b5; stroke:#993d70; }
.fairy-star { fill:#ffe56a; stroke:#c28e22; }
.squirrel-ear,.squirrel-head { fill:#c9793f; stroke:#784325; }
.squirrel-muzzle { fill:#f0b775; stroke:#8a542e; }
.squirrel-nose { fill:#493128; stroke:none; }
.marker-ring { fill:none; stroke:#fff; stroke-width:3; filter:drop-shadow(0 2px 2px #18352499); }
.checkpoint.nearby .marker-ring { stroke:#ffd44f; stroke-width:4; }
.checkpoint.found .marker-ring { stroke:#62b356; stroke-width:5; }
.nearby-dot { fill:#ffd44f; stroke:#fff; stroke-width:2; animation:nearby-pulse 1s ease-in-out infinite; }
.found-dot { fill:#62b356; stroke:#fff; stroke-width:2; }
.found-check { fill:#fff; stroke:none; font-size:9px; font-weight:900; text-anchor:middle; dominant-baseline:central; }
.checkpoint:hover .marker-core,.checkpoint:focus .marker-core { animation-play-state:paused; transform:scale(1.35); }
@keyframes character-float { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-4px) scale(1.04); } }
@keyframes face-wiggle { 0%,100% { transform:rotate(-2deg); } 50% { transform:rotate(2deg); } }
@keyframes face-blink { 0%,45%,50%,100% { transform:scaleY(1); } 47% { transform:scaleY(.12); } }
@keyframes nearby-pulse { 0%,100% { r:4px; } 50% { r:6px; } }
.route-endpoint circle { stroke:#fff; stroke-width:3; }.route-endpoint text { fill:#fff; font-size:9px; font-weight:900; letter-spacing:.5px; text-anchor:middle; dominant-baseline:central; paint-order:stroke; stroke:#2d382d; stroke-width:2px; }.route-endpoint.start circle { fill:#497a5b; }.route-endpoint.end circle { fill:#fffaf0; }
.route-endpoint.start text { font-size:7px; letter-spacing:0; }
.home-drawing { fill:none; stroke:#e25248; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transform:rotate(-3deg); }
.player-marker circle { fill:#3e7add; stroke:#fff; stroke-width:3; }.player-marker .player-center { fill:#fff; stroke:none; }
.map-key { display:none; }.collection { display:none; }.section-heading { display:flex;justify-content:space-between;align-items:end; margin:0 3px 12px; }.section-heading > span { background:#fce3c8; color:#9d5623; border-radius:30px; font-size:12px; font-weight:800; padding:7px 10px; }
.gnome-grid { display:grid; gap:9px; }.gnome-card { display:flex; align-items:center; gap:12px; position:relative; padding:13px; min-height:81px; background:var(--paper); border:1px solid #efeadf; border-radius:17px; color:#79817b; cursor:pointer; }.gnome-icon { width:47px;height:47px;display:grid;place-items:center; overflow:hidden; background:#f0f1ec;border-radius:14px;font-size:26px;filter:grayscale(1); }.gnome-icon img { width:100%;height:100%;object-fit:cover; }.gnome-card h3 { font-size:15px;margin:0 0 2px;color:#79817b; }.gnome-card p { margin:0; }.gnome-order { font-size:9px;font-weight:800;letter-spacing:1px; }.gnome-hint { font-size:11px; }.badge { margin-left:auto;font-size:16px; }.gnome-card.found { color:var(--ink); border-color:#9ac28f; background:#f7fff4; }.gnome-card.found .gnome-icon { background:#d8efcd; filter:none; }.gnome-card.found h3 { color:var(--ink); }.gnome-card.found .badge::after { content:'✓';display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#78ad68;color:#fff;font-weight:800; }
dialog { border:0; max-width:330px; border-radius:23px; padding:29px 25px 25px; color:var(--ink); box-shadow:0 18px 60px #0004; }.dialog-gnome { font-size:53px;color:var(--coral); }.dialog-close { position:absolute;right:12px;top:10px;border:0;background:none;font-size:28px;color:#66756d; }.dialog-gnome+h2 { margin:5px 0 11px; } dialog p { line-height:1.4;color:var(--muted);font-size:14px; } dialog .primary-button { width:100%;margin-top:9px; } dialog::backdrop { background:#183b2d88; }
@media (max-height:620px) { .intro-screen { gap:14px; } .intro-screen img { max-height:66dvh; } .primary-button { min-height:48px; padding:10px 20px; } }