:root{
  --yo:#05070f; --yo2:#0b1024; --teksti:#e8ecf7; --himmea:#8e98b8;
  --talvi:#9cc8ff; --kevat:#5cffb0; --kesa:#ff8a3d; --syksy:#f2c14e;
  --kulta:#f2c14e; --paneeli:rgba(10,14,32,.94); --raja:rgba(156,200,255,.18);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--yo);color:var(--teksti);font-family:Inter,system-ui,sans-serif;overflow:hidden}
.topbar{position:fixed;inset:0 0 auto 0;z-index:5;display:flex;gap:12px;align-items:center;padding:12px 16px;
  background:linear-gradient(var(--yo) 40%,transparent)}
.brand{font-family:Cinzel,serif;font-weight:700;letter-spacing:.12em;font-size:18px;white-space:nowrap}
.brand .x{color:var(--kulta);text-shadow:0 0 12px var(--kulta)}
.search{position:relative;flex:1;max-width:420px}
.search input{width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--raja);background:rgba(11,16,36,.85);color:var(--teksti);font:inherit;font-size:14px}
.search input:focus{outline:none;border-color:var(--kulta)}
#hakutulokset{position:absolute;top:110%;left:0;right:0;margin:0;padding:6px;list-style:none;background:var(--paneeli);border:1px solid var(--raja);border-radius:10px;max-height:50vh;overflow:auto}
#hakutulokset li{padding:8px 10px;border-radius:6px;cursor:pointer;font-size:14px}
#hakutulokset li small{color:var(--himmea);margin-left:6px}
#hakutulokset li:hover,#hakutulokset li.aktiivinen{background:rgba(242,193,78,.12)}
.zoom{display:flex;gap:6px;margin-left:auto}
.zoom button{width:36px;height:36px;border-radius:10px;border:1px solid var(--raja);background:rgba(11,16,36,.85);color:var(--teksti);font-size:18px;cursor:pointer}
.zoom button:hover{border-color:var(--kulta)}
#kartta-alue{position:fixed;inset:0;background:radial-gradient(ellipse at center,#111a3d 0%,var(--yo2) 45%,var(--yo) 100%)}
#kartta{width:100%;height:100%;display:block;cursor:grab;touch-action:none;user-select:none}
#kartta.raahaus{cursor:grabbing}

/* SVG */
.tahti{fill:#fff}
.sakara{cursor:pointer;transition:filter .3s}
.sakara:hover{filter:brightness(1.25)}
.sakara-nimi{font-family:Cinzel,serif;font-weight:700;letter-spacing:.18em;text-anchor:middle;pointer-events:none}
.sakara-ala{font-size:13px;letter-spacing:.2em;text-anchor:middle;fill:var(--himmea);pointer-events:none}
.joki{fill:none;stroke-linecap:round}
.joki-virta{fill:none;stroke-dasharray:6 18;animation:virtaa 2.4s linear infinite}
@keyframes virtaa{to{stroke-dashoffset:-48}}
.joki-nimi{font-family:Cinzel,serif;font-size:15px;letter-spacing:.25em;fill:#cfe6ff;opacity:.85;pointer-events:none}
.kohde{cursor:pointer}
.kohde circle.ydin{transition:r .2s}
.kohde:hover circle.ydin,.kohde.valittu circle.ydin{r:11}
.kohde text{font-size:14px;fill:var(--teksti);text-anchor:middle;paint-order:stroke;stroke:#05070f;stroke-width:4px;pointer-events:none}
.seitti{fill:none;stroke:#fff;stroke-width:1.4;opacity:.55;stroke-dasharray:2 10;animation:syke 3s ease-in-out infinite}
@keyframes syke{0%,100%{opacity:.25}50%{opacity:.85}}
.keskio{cursor:pointer}
.keskio-nimi{font-family:Cinzel,serif;font-size:16px;letter-spacing:.2em;fill:var(--kulta);text-anchor:middle;pointer-events:none}
.sumu{pointer-events:none;transition:opacity 1.2s}
.sumu.pois{opacity:0}
.sumu circle{animation:huojuu 7s ease-in-out infinite alternate}
@keyframes huojuu{from{transform:translate(-8px,-4px)}to{transform:translate(8px,5px)}}
.flow{cursor:pointer}
.erikois{cursor:pointer}
.erikois text{font-size:13px;fill:var(--teksti);text-anchor:middle;paint-order:stroke;stroke:#05070f;stroke-width:4px;pointer-events:none}

/* Paneeli */
#paneeli{position:fixed;z-index:6;top:64px;right:16px;bottom:16px;width:min(380px,calc(100vw - 32px));overflow:auto;
  background:var(--paneeli);border:1px solid var(--raja);border-radius:16px;padding:22px 20px;backdrop-filter:blur(8px);
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
#sulje{position:absolute;top:10px;right:12px;background:none;border:0;color:var(--himmea);font-size:26px;cursor:pointer}
#paneeli h2{font-family:Cinzel,serif;letter-spacing:.1em;margin:0 0 4px;font-size:22px}
#paneeli .meta{color:var(--himmea);font-size:13px;margin-bottom:12px;letter-spacing:.05em}
#paneeli h3{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--himmea);margin:18px 0 6px}
#paneeli p{margin:0 0 8px;line-height:1.5;font-size:14px}
#paneeli ul{margin:0;padding-left:18px;font-size:14px;line-height:1.6}
#paneeli .tyhja{color:var(--himmea);font-style:italic;font-size:13px}
.hamy{display:flex;gap:8px;align-items:flex-start;justify-content:space-between;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.04);margin-bottom:6px;font-size:14px}
.hamy.ratkaistu span{text-decoration:line-through;color:var(--himmea)}
.hamy button{flex:none;border:1px solid var(--raja);background:none;color:var(--teksti);border-radius:6px;font-size:12px;padding:4px 8px;cursor:pointer}
.hamy button:hover{border-color:var(--kulta);color:var(--kulta)}
.tulet{display:flex;gap:8px}
.tulet div{flex:1;text-align:center;padding:8px 4px;border-radius:8px;background:rgba(255,138,61,.08);font-size:12px;color:var(--himmea)}
.tulet b{display:block;font-size:20px;color:var(--kesa)}
.chip{display:inline-block;padding:3px 9px;border-radius:999px;border:1px solid var(--raja);font-size:12px;margin:0 4px 4px 0}

@media (max-width:700px){
  .brand{font-size:14px}
  .zoom button{width:32px;height:32px}
  #paneeli{top:auto;left:8px;right:8px;bottom:8px;width:auto;max-height:58vh;border-radius:16px 16px 12px 12px}
}
@keyframes tuike{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes pyori{to{transform:rotate(360deg)}}