/* Pelin kartta, paikallinen esimerkkikävely ja sen toistosäätimet. */
.walk-demo{flex:1 1 56%;min-width:0;margin:0;border:1px solid #244a44;border-radius:22px;background:#071f24;color:#f1f8ec;overflow:hidden;box-shadow:0 22px 45px #244e3826;isolation:isolate;container-type:inline-size}
.demo-screen{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0b3029}
.demo-map{position:absolute;inset:0;display:block;width:100%;height:100%}
.demo-land{fill-rule:evenodd}.demo-land--land{fill:#133d2f}.demo-land--field{fill:#244c32;stroke:#2a5435;stroke-width:2}.demo-land--mire{fill:#164037}.demo-land--water{fill:#0b3342}.demo-land--watercourse{fill:none;stroke:#1b5260;stroke-width:5}.demo-land--building{fill:#346657;stroke:#487763;stroke-width:1}
.demo-road-case,.demo-trail-case,.demo-road,.demo-road-target,.demo-trail-target,.demo-walked{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.demo-road-case{stroke:#081d23;stroke-width:11}.demo-road{stroke:#657879;stroke-width:6}.demo-road--collected{stroke:#52cfb1}.demo-road-target{stroke:#438cbb;stroke-width:6;transition:stroke .5s}.walk-demo[data-street-caught=true] .demo-road-target{stroke:#37cfab}.demo-trail-case{stroke:#102a25;stroke-width:8}.demo-trail-target{stroke:#668b7a;stroke-width:4;stroke-dasharray:1 8;transition:stroke .5s}.walk-demo[data-path-caught=true] .demo-trail-target{stroke:#46dbb5}.walk-demo[data-path-done=true] .demo-trail-target{stroke:#ffb44f}
.demo-walked{stroke:#f3d187;stroke-width:3.5;opacity:0}.demo-walked--trail{stroke:#ffb44f;stroke-width:4}.demo-player-ring{fill:#052e2780;stroke:#67edca;stroke-width:1;stroke-dasharray:2 4}
.demo-map-shade{position:absolute;inset:0;background:linear-gradient(#031b26d9,transparent 38%,transparent 63%,#061d26de);pointer-events:none}
.demo-app-header{position:absolute;inset:19px 21px auto;display:flex;justify-content:space-between;align-items:center;gap:10px}.demo-brand{display:flex;align-items:center;gap:8px}.demo-brand strong{font-size:19px;font-weight:900;letter-spacing:-.045em}.demo-brand img{width:29px;height:29px}.demo-mode{font-size:10px;font-weight:750;border:1px solid #497560;border-radius:30px;background:#164833bf;padding:5px 9px;color:#c5f0bb}
.demo-target{position:absolute;left:23px;top:76px;display:grid;grid-template-columns:auto auto;align-items:center;gap:0 20px;padding:12px 16px 14px;min-width:162px;border:1px solid #a4ceb629;border-radius:13px;background:#0a2a2ee6;box-shadow:0 8px 22px #0002;backdrop-filter:blur(8px)}
.demo-target-kind{grid-column:1/-1;color:#9db8ad;letter-spacing:.12em;font-size:9px;font-weight:800}.demo-target>strong{font-size:21px;font-weight:900;letter-spacing:-.03em;line-height:1.55}.demo-target-state{font-size:11px;color:#91cef3}.walk-demo[data-phase=trail] .demo-target-state{color:#80e8c0}.walk-demo[data-path-done=true] .demo-target-state{color:#ffcd71}.demo-coverage{height:3px;border-radius:5px;background:#4a68623d;grid-column:1/-1;margin-top:6px;overflow:hidden}.demo-coverage>span{display:block;height:100%;width:0;background:#77dec0;border-radius:5px}
.demo-compass{position:absolute;right:21px;top:83px;display:flex;flex-direction:column;align-items:center;gap:0;width:32px;font-size:10px;font-weight:800;color:#cde2d5}.demo-compass svg{width:28px;height:28px}
.demo-hud{position:absolute;inset:auto 22px 25px;display:grid;grid-template-columns:1.2fr 1fr 1fr;padding:15px 10px;background:#09272fed;border:1px solid #87b09d40;border-radius:16px;box-shadow:0 7px 25px #0003;backdrop-filter:blur(8px)}.demo-hud>div{text-align:center;border-right:1px solid #a6c5b425}.demo-hud>div:last-child{border:0}.demo-hud strong{display:block;font-size:27px;font-weight:900;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums}.demo-hud span{display:block;font-size:9px;letter-spacing:.11em;color:#a6c5b4;font-weight:800;margin-top:6px}.demo-hud>div:last-child strong{color:#ffbd64}
.demo-start{position:absolute;left:50%;bottom:126px;transform:translateX(-50%) translateY(12px);display:flex;align-items:center;gap:9px;white-space:nowrap;padding:11px 25px;background:#68e6b5;color:#10392a;border-radius:12px;box-shadow:0 5px 0 #2a785c;opacity:0;transition:opacity .35s,transform .35s;pointer-events:none}.demo-start b{font-size:16px;font-weight:900}.demo-start>span{font-size:23px;line-height:1}.walk-demo[data-phase=ready] .demo-start{opacity:1;transform:translateX(-50%)}.demo-tap{position:absolute;right:22px;bottom:-8px;width:24px;height:24px;border:2px solid #e9fff6;border-radius:50%;background:#ecfff755;animation:demo-tap 1.4s ease-out infinite}.walk-demo:not([data-phase=ready]) .demo-tap{animation:none}
.demo-capture{position:absolute;top:43%;left:50%;transform:translate(-50%,14px) scale(.96);display:flex;align-items:center;gap:9px;white-space:nowrap;padding:10px 17px;border:1px solid #86d9b7;background:#0a352dec;color:#d5ffe4;border-radius:40px;box-shadow:0 9px 28px #0003;font-size:13px;font-weight:850;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}.demo-capture-icon{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#69e6b7;color:#0b382b}.walk-demo[data-celebrate=true] .demo-capture{opacity:1;transform:translate(-50%,0) scale(1)}
.demo-saved{position:absolute;left:50%;top:48%;width:75%;transform:translate(-50%,-40%) scale(.97);text-align:center;padding:26px 20px;border:1px solid #6c9c78;border-radius:18px;background:#113c33f5;box-shadow:0 18px 45px #00151170;opacity:0;transition:opacity .4s,transform .4s;pointer-events:none}.walk-demo[data-phase=saved] .demo-saved{opacity:1;transform:translate(-50%,-50%) scale(1)}.demo-saved-check{display:grid;place-items:center;width:42px;height:42px;margin:0 auto 12px;border-radius:50%;background:#ffb54d;color:#163d2c;font-size:25px;font-weight:900}.demo-saved>strong{display:block;font-size:21px;font-weight:900;letter-spacing:-.03em}.demo-saved>p{font-size:12px;line-height:1.5;margin:8px auto 12px;color:#c3dac9;max-width:27ch}.demo-saved>span:last-child{font-size:10px;color:#a4d1b8;border-top:1px solid #517860;padding-top:9px;display:inline-block}
.demo-attribution{position:absolute;bottom:5px;right:25px;color:#9bbbaa;font-size:8px}.demo-attribution a{color:inherit;text-decoration:none}.demo-caption{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 20px;border-top:1px solid #456a4c66;background:#09282a}.demo-caption-title{display:block;font-size:14px;font-weight:850;color:#eef4da}.demo-caption-note{display:block;font-size:10px;color:#9bbcac;margin-top:2px}.demo-pause{display:flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;background:none;border:1px solid #50715e;border-radius:9px;padding:8px 11px;min-height:40px;min-width:101px;color:#d7eccf;font:700 11px var(--font);cursor:pointer}.demo-pause:hover{background:#214936}.demo-pause [data-demo-control-icon]{font-size:15px;line-height:1}
.release-heading{gap:35px;align-items:center}.release-heading>div{flex:0 0 39%}.release-heading h2{font-size:clamp(2.7rem,4.1vw,4rem)}.release-metric{border-top:1px solid #6eab6666;margin-top:29px;padding-top:22px}.release-metric strong{display:block;font-size:clamp(3rem,5vw,4.3rem);letter-spacing:-.055em;font-weight:900;line-height:1.1;white-space:nowrap;color:#16452c;font-variant-numeric:tabular-nums}.release-metric b{display:block;font-size:1.05rem;margin-top:8px;font-weight:850;color:#143c28}.release-metric p{font-size:.92rem;max-width:27ch;color:#305535;margin:8px 0 0}
@keyframes demo-tap{0%,20%{transform:scale(.65);opacity:0}45%{opacity:.85}100%{transform:scale(1.65);opacity:0}}
@container(max-width:430px){.demo-app-header{inset:13px 15px auto}.demo-brand strong{font-size:16px}.demo-brand img{width:24px;height:24px}.demo-mode{font-size:8px;padding:4px 7px}.demo-target{left:16px;top:56px;padding:8px 12px 10px;min-width:140px;gap:0 12px}.demo-target>strong{font-size:17px}.demo-target-kind{font-size:8px}.demo-target-state{font-size:9px}.demo-compass{top:60px;right:15px}.demo-hud{inset:auto 15px 20px;padding:12px 6px;border-radius:13px}.demo-hud strong{font-size:23px}.demo-hud span{font-size:8px}.demo-start{bottom:104px;padding:9px 18px}.demo-start b{font-size:14px}.demo-capture{font-size:11px;padding:8px 13px;top:48%}.demo-saved{padding:16px 14px;top:46%}.demo-saved-check{width:32px;height:32px;font-size:21px;margin-bottom:7px}.demo-saved>strong{font-size:18px}.demo-saved>p{font-size:10px;margin:5px auto 8px}.demo-saved>span:last-child{font-size:9px;padding-top:6px}.demo-caption{padding:12px 15px;gap:8px}.demo-caption-title{font-size:12px}.demo-caption-note{font-size:9px}.demo-pause{font-size:10px;min-width:88px;padding:7px 9px}.demo-attribution{font-size:7px;right:18px}}
@media(max-width:900px) and (min-width:651px){.release-section{padding:32px}.release-heading{gap:22px}.release-heading>div{flex-basis:36%}.release-heading h2{font-size:2.8rem}.release-metric strong{font-size:3rem}.release-metric b{font-size:.93rem}.release-metric p{font-size:.85rem}}
@media(max-width:650px){.release-heading h2{font-size:2.6rem;max-width:13ch}.release-metric{margin:22px 0 28px;padding-top:18px}.release-metric strong{font-size:3.7rem}.release-metric p{max-width:30ch}.walk-demo{margin:0 -9px 26px;border-radius:17px}.release-intro{margin-top:0}}
@container(max-width:430px){.demo-screen{aspect-ratio:1/1.08}}
@container(max-width:270px){.demo-mode{display:none}.demo-target{min-width:124px}.demo-target>strong{font-size:16px}.demo-hud strong{font-size:21px}.demo-saved{width:86%}}