:root{
  --bg:#0b0e14;
  --panel:#12161ffa;
  --line:#232a38;
  --text:#dce4f2;
  --dim:#7d8aa3;
  --fresh:#e9f4ff;
  --mid:#ffc23d;
  --old:#ff6a3d;
  --ok:#4ade80;
  --warn:#f87171;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --appH:100dvh;
  --vshift:calc(100dvh - var(--appH));
}
html,body{height:100%;height:100dvh;margin:0;background:var(--bg);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);overscroll-behavior:none;}
#map{position:fixed;top:0;left:0;width:100vw;height:var(--appH);background:var(--bg);}
#strikeCanvas{position:fixed;top:0;left:0;pointer-events:none;z-index:500;}

.panel{
  position:fixed;z-index:800;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;
  backdrop-filter:blur(6px);box-shadow:0 4px 24px #0009;
}
#hud{top:calc(12px + var(--sat));left:12px;padding:12px 36px 12px 14px;min-width:230px;}
#hudToggle{
  position:absolute;top:6px;right:6px;width:26px;height:26px;
  background:#1a2030;color:var(--dim);border:1px solid var(--line);border-radius:7px;
  font-size:12px;line-height:1;cursor:pointer;padding:0;
}
#hud.collapsed{min-width:0;padding:8px 10px;display:flex;align-items:center;gap:2px;}
#hud.collapsed .sub,#hud.collapsed .stats,#hud.collapsed .geonote,#hud.collapsed .motion,#hud.collapsed #hudTitle{display:none;}
#hud.collapsed h1{margin:0;gap:6px;}
#hud.collapsed #hudToggle{position:static;width:24px;height:24px;border:none;background:transparent;color:var(--text);font-size:14px;}
#hud h1{margin:0 0 2px;font-size:15px;font-weight:650;letter-spacing:.04em;display:flex;align-items:center;gap:8px;}
#statusDot{width:8px;height:8px;border-radius:50%;background:var(--warn);flex:none;transition:background .3s;}
#statusDot.ok{background:var(--ok);box-shadow:0 0 8px var(--ok);}
#hud .sub{font-size:11px;color:var(--dim);margin-bottom:10px;}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;}
.stat b{display:block;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;font-family:ui-monospace,"SF Mono",Consolas,monospace;}
.stat span{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;}
#nearest b.close{color:var(--warn);}
.geonote{margin-top:8px;font-size:10.5px;color:var(--warn);letter-spacing:.03em;}
.geonote.pinned{color:var(--mid);}
.motion{margin-top:8px;font-size:10.5px;color:var(--dim);letter-spacing:.03em;}
.motion b{color:var(--text);font-weight:600;}

#controls{bottom:calc(10px + var(--sab) + var(--vshift));left:12px;padding:10px 38px 10px 14px;display:flex;gap:10px 18px;align-items:center;font-size:12px;flex-wrap:wrap;max-width:min(420px,calc(100vw - 24px));}
#controlsToggle{
  position:absolute;top:6px;right:6px;width:26px;height:26px;
  background:#1a2030;color:var(--dim);border:1px solid var(--line);border-radius:7px;
  font-size:12px;line-height:1;cursor:pointer;padding:0;
}
#controls.collapsed{padding:0;width:40px;height:40px;min-height:0;}
#controls.collapsed > :not(#controlsToggle){display:none;}
#controls.collapsed #controlsToggle{
  position:static;width:40px;height:40px;font-size:16px;border:none;background:transparent;color:var(--text);
}
#controls label{white-space:nowrap;}
#controls input[type=checkbox]{width:15px;height:15px;margin:0;flex:none;}
.miniRange{width:74px;accent-color:var(--mid);margin:0;}
#playbackRow{display:flex;align-items:center;gap:10px;width:100%;}
#playbackRow input[type=range]{flex:1;accent-color:var(--mid);min-width:120px;}
#playbackLive{
  background:#1a2030;color:var(--dim);border:1px solid var(--line);border-radius:6px;
  padding:3px 10px;font-size:11px;font-weight:650;letter-spacing:.05em;cursor:pointer;
  font-family:ui-monospace,"SF Mono",Consolas,monospace;min-width:64px;
}
#playbackLive.live{color:var(--ok);border-color:var(--ok);}
#playbackPlay{
  background:#1a2030;color:var(--text);border:1px solid var(--line);border-radius:6px;
  width:30px;height:26px;font-size:11px;cursor:pointer;padding:0;flex:none;
}

.ringLabel{color:#eaf2ff;font-size:10.5px;font-weight:600;text-align:center;white-space:nowrap;
  text-shadow:0 0 3px #000,0 0 3px #000,0 1px 4px #000;}

.leaflet-popup-content-wrapper{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 24px #0009;}
.leaflet-popup-content{margin:10px 14px;font-size:12.5px;line-height:1.55;}
.leaflet-popup-tip{background:#12161f;border:1px solid var(--line);}
#controls label{display:flex;align-items:center;gap:6px;color:var(--dim);cursor:pointer;}
/* 16px on alaraja eikä tyylivalinta: iOS zoomaa sivun kun fokus siirtyy
   kenttään jonka fonttikoko on tätä pienempi, eikä zoomista pääse pois ilman
   käsin nipistämistä. Kotivalikkoon asennetussa sovelluksessa se on se yksi
   ele joka paljastaa selaimen alta. */
#controls select{background:#1a2030;color:var(--text);border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:16px;}
#controls input[type=checkbox]{accent-color:var(--mid);}

#legend{bottom:calc(10px + var(--sab) + var(--vshift));right:12px;padding:8px 12px;font-size:10.5px;color:var(--dim);}
#legendBar{width:150px;height:6px;border-radius:3px;margin:5px 0 3px;
  background:linear-gradient(90deg,var(--fresh),var(--mid) 40%,var(--old) 75%,#5b2233);}
#legend .ends{display:flex;justify-content:space-between;}

#updateToast{
  top:calc(12px + var(--sat));left:50%;transform:translateX(-50%);
  padding:10px 14px;font-size:12.5px;z-index:950;white-space:nowrap;
}
#updateToast .row{display:flex;gap:8px;margin-top:8px;}
#updateNow{
  background:var(--mid);color:#1a1405;border:none;border-radius:7px;
  padding:6px 14px;font-size:12px;font-weight:650;cursor:pointer;
}
#updateLater{
  background:#1a2030;color:var(--dim);border:1px solid var(--line);border-radius:7px;
  padding:6px 14px;font-size:12px;cursor:pointer;
}
#installHint{
  left:50%;transform:translateX(-50%);bottom:calc(84px + var(--sab));
  padding:12px 40px 12px 14px;max-width:300px;font-size:12px;z-index:900;
}
#installHint b{font-size:13px;}
#installHint p{margin:6px 0 0;color:var(--dim);line-height:1.45;}
#installHint .share-ico{display:inline-block;transform:translateY(1px);}
#installClose{
  position:absolute;top:6px;right:8px;background:none;border:none;color:var(--dim);
  font-size:18px;line-height:1;cursor:pointer;padding:4px;
}
#installBtn{
  margin-top:10px;background:var(--mid);color:#1a1405;border:none;border-radius:8px;
  padding:8px 14px;font-size:12.5px;font-weight:650;cursor:pointer;
}
.locate-btn{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:var(--panel)!important;color:var(--text);font-size:17px;cursor:pointer;
  border:1px solid var(--line)!important;border-radius:4px;user-select:none;
}
.locate-btn:hover{background:#1a2030!important;}
/* Sininen hehku = omaa sijaintia seurataan (kartta keskitettynä siihen) */
.locate-btn.centered{color:#5b8def;border-color:#5b8def88!important;box-shadow:0 0 8px #5b8def55;}
/* Keltainen = ankkuri kiinnitetty hakupaikkaan; hehku kun keskitettynä */
.locate-btn.pinned{color:var(--mid);border-color:#ffc23d88!important;}
.locate-btn.pinned.centered{color:var(--mid);border-color:#ffc23dcc!important;box-shadow:0 0 8px #ffc23d66;}
/* Paikannuslupa on kysymättä: yksi napautus riittää. Sykkivä reunus siksi
   että HUD-rivin teksti jäi huomaamatta — nappi on se mihin katse menee.
   Ei punaista: mikään ei ole rikki, lupa on vain kysymättä. */
.locate-btn.needs-tap{color:#e8eaf0;border-color:#8ea2c8!important;animation:locate-pulse 2.4s ease-in-out infinite;}
@keyframes locate-pulse{
  0%,100%{box-shadow:0 0 0 #8ea2c800;}
  50%{box-shadow:0 0 9px #8ea2c8aa;}
}
/* Liikeherkkyys on saavutettavuusasetus, ei mielipide. */
@media (prefers-reduced-motion:reduce){
  .locate-btn.needs-tap{animation:none;box-shadow:0 0 8px #8ea2c888;}
}

/* Paikkahaku */
#searchPanel{
  top:calc(12px + var(--sat));right:56px;z-index:920;
  width:min(300px,calc(100vw - 70px));
  padding:10px 12px;display:flex;flex-direction:column;gap:8px;font-size:12.5px;
}
#searchPanel[hidden]{display:none;}
#searchForm{display:flex;gap:6px;}
#searchInput{
  flex:1;min-width:0;background:#1a2030;color:var(--text);
  border:1px solid var(--line);border-radius:6px;padding:6px 8px;
  font-size:16px; /* <16px zoomaisi iOS:n näkymää fokusoidessa */
}
#searchForm button{
  background:var(--mid);color:#1a1405;border:none;border-radius:6px;
  padding:6px 12px;font-weight:650;font-size:12.5px;cursor:pointer;
}
#searchResults{display:flex;flex-direction:column;gap:4px;color:var(--dim);}
#searchResults:empty{display:none;}
.searchHit{
  text-align:left;background:#1a2030;color:var(--text);
  border:1px solid var(--line);border-radius:6px;padding:6px 8px;
  font-size:12px;cursor:pointer;
}
.searchHit:hover{background:#232a38;}
#searchAnchorRow{display:flex;align-items:center;gap:8px;justify-content:space-between;color:var(--mid);}
#searchAnchorRow[hidden]{display:none;}
#searchRecent{display:flex;flex-direction:column;gap:4px;}
#searchRecent:empty{display:none;}
.searchCaption{font-size:10.5px;color:var(--dim);letter-spacing:.03em;}
#searchAnchorRow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;}
#searchUseOwn{
  flex:none;background:#1a2030;color:var(--text);border:1px solid var(--line);
  border-radius:6px;padding:5px 8px;font-size:12px;cursor:pointer;
}

.leaflet-top{top:var(--sat);}
.leaflet-bottom{bottom:calc(var(--sab) + var(--vshift));}

.leaflet-control-attribution{background:#0b0e14cc!important;color:var(--dim)!important;font-size:10px!important;}
.leaflet-control-attribution a{color:#9db2d6!important;}
.leaflet-control-zoom a{background:var(--panel)!important;color:var(--text)!important;border-color:var(--line)!important;}
@media (max-width:520px){ #legend{display:none;} #hud{min-width:0;} }