/* /tryvoha/ - live air-raid alert map. Same palette/vars as the main game
   (loaded from /game/style.css first), page-specific layout only here. */

body{min-height:100dvh}
.tryvoha{max-width:1080px;margin:auto;padding:22px 20px 60px;display:flex;flex-direction:column;gap:22px}
.tryvoha-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tryvoha-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tryvoha-title h1{font-size:17px;margin:0}
.back-link{font-size:11px;color:var(--muted);text-decoration:none;border:1px solid var(--line);padding:6px 10px;border-radius:3px}
.back-link:hover{color:var(--gold);border-color:var(--gold)}
.tryvoha-sub{font-size:11px;color:var(--muted);margin-top:4px}
.demo-badge{font-size:10px;letter-spacing:.03em;color:var(--gold);border:1px solid var(--gold);border-radius:3px;padding:3px 7px;white-space:nowrap}
.updated-line{font-size:10.5px;color:var(--muted);white-space:nowrap}

.tryvoha-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:20px;align-items:start}
@media (max-width:820px){.tryvoha-body{grid-template-columns:1fr}}

.map-card,.side-card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:16px}
.map-card h2,.side-card h2{font-size:12px;font-weight:600;margin:0 0 12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

#map-svg{width:100%;height:auto;display:block}
.oblast-tile{fill:#2a3446;stroke:var(--line);stroke-width:1.4;transition:fill .6s ease,stroke .6s ease}
.oblast-label{font-size:12px;fill:var(--muted);text-anchor:middle;dominant-baseline:middle;font-family:Manrope,system-ui,sans-serif;pointer-events:none;transition:fill .6s ease}
.oblast-dot{fill:transparent;transition:fill .4s ease}
.oblast{cursor:pointer;outline:none}
.oblast:focus-visible .oblast-tile{stroke:var(--gold);stroke-width:2}
.oblast.badge .oblast-tile{fill:#232c3c;stroke:var(--panel);stroke-width:2}

.oblast.active .oblast-tile{fill:#3a3350;stroke:var(--sage)}
.oblast.active .oblast-label{fill:var(--ink)}
.oblast.active .oblast-dot{fill:var(--sage);animation:tile-pulse 2.6s ease-in-out infinite}
.oblast.active.badge .oblast-tile{fill:#3a3350}

@keyframes tile-pulse{
  0%,100%{opacity:.55;r:4}
  50%{opacity:1;r:5.5}
}
@media (prefers-reduced-motion:reduce){.oblast.active .oblast-dot{animation:none;opacity:.9}}

.map-legend{display:flex;gap:16px;margin-top:12px;font-size:10.5px;color:var(--muted)}
.map-legend span{display:inline-flex;align-items:center;gap:6px}
.legend-dot{width:8px;height:8px;border-radius:2px;background:#2a3446;border:1px solid var(--line);display:inline-block}
.legend-dot.on{background:#3a3350;border-color:var(--sage)}

.alert-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:280px;overflow:auto}
.alert-list li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12px;padding:8px 10px;border:1px solid var(--line);border-radius:4px;background:#1c2432}
.alert-name{font-weight:600}
.alert-meta{color:var(--muted);font-size:10.5px;white-space:nowrap}
.empty-note{font-size:11.5px;color:var(--muted);padding:8px 2px}

.timeline{margin-top:18px}
.timeline-bars{display:flex;align-items:flex-end;gap:2px;height:56px}
.timeline-bar{flex:1;background:#2a3446;border-radius:1px;min-height:2px;transition:height .4s ease,background .4s ease}
.timeline-bar.has-activity{background:var(--sage)}
.timeline-axis{display:flex;justify-content:space-between;font-size:9.5px;color:var(--muted);margin-top:6px}

.tryvoha-footer{font-size:10.5px;color:var(--muted);line-height:1.6;border-top:1px solid var(--line);padding-top:14px}
.tryvoha-footer a{color:var(--muted)}
.tryvoha-footer a:hover{color:var(--gold)}