:root{--red:#ff3b2f;--amber:#ffb000;--green:#37d36b;--bg:#08070a;--panel:#0e0c11;--fg:#f2eef0}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,sans-serif}
.stripe{height:6px;background:repeating-linear-gradient(45deg,var(--amber),var(--amber) 14px,#0a0a0a 14px,#0a0a0a 28px)}
header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
header .brand{font-weight:800;font-size:22px;letter-spacing:-.5px}
header .brand .biohaz{color:var(--red)}
header .brand span{opacity:.45}
header .live{font-size:11px;letter-spacing:1px;opacity:.75;display:flex;align-items:center;gap:6px}
header .live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.alert{margin:0 16px;border-radius:12px;padding:16px 18px;border:1px solid rgba(255,255,255,.06);transition:.25s}
.alert .big{font-size:24px;font-weight:900;letter-spacing:-.5px}
.alert .sub{font-size:13px;opacity:.85;margin-top:4px;min-height:1em}
.alert.bad{background:linear-gradient(180deg,rgba(255,59,47,.22),rgba(255,59,47,.06));border-color:rgba(255,59,47,.5);animation:pulse 1.1s infinite}
.alert.watch{background:linear-gradient(180deg,rgba(255,176,0,.18),rgba(255,176,0,.04));border-color:rgba(255,176,0,.4)}
.alert.good{background:rgba(55,211,107,.08);border-color:rgba(55,211,107,.3)}
.alert.past{filter:saturate(.55) brightness(.9);border-style:dashed;animation:none}  /* viewing history */
/* share bar — spread-the-word buttons (clicks tracked as 'share' events) */
.share{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:10px 16px 0}
.share .lbl{opacity:.7;font-weight:800;font-size:12px;letter-spacing:.3px}
.share .sh{border:0;border-radius:8px;padding:6px 12px;font-weight:800;font-size:12px;color:#fff;cursor:pointer;background:#26222b}
.share .sh.fb{background:#1877f2}.share .sh.wa{background:#25d366;color:#062b14}.share .sh.tg{background:#229ed9}.share .sh.cp{background:#3a3540}
.share .sh:hover{filter:brightness(1.12)}.share .sh:active{transform:translateY(1px)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,59,47,0)}50%{box-shadow:0 0 26px 2px rgba(255,59,47,.35)}}
#map{position:relative;height:56vh;margin:14px 16px 0;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.06)}
/* canvas is a replaced element: force it to fill #map so its (downscaled) backing store is
   CSS-upscaled to cover the map instead of rendering at its smaller intrinsic size */
#map canvas.particles{position:absolute;inset:0;width:100%;height:100%;image-rendering:auto;pointer-events:none;z-index:2}
.scrub{margin:14px 16px 18px;padding:14px;background:var(--panel);border-radius:14px;border:1px solid rgba(255,255,255,.06)}
.scrub .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:10px}
/* live "now" guide: the always-current date+time the timeline is anchored to */
.scrub .guide{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#d4ecff;margin-bottom:10px;letter-spacing:.2px}
.scrub .guide .dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:blink 1.4s infinite;flex:none}
.scrub .guide b{color:#fff;font-weight:800}
.scrub .when{font-size:15px;font-weight:800;display:flex;align-items:baseline;gap:8px;min-width:0}
.scrub .when em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.5px;padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.1);color:#ffd27a;flex:none}
.scrub .when b{color:var(--red)}
.scrub .play{background:#1b1820;color:var(--fg);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:4px 12px;cursor:pointer;font-weight:700;flex:none}
.ribbonwrap{position:relative}
.ribbon{display:flex;gap:1px;height:30px;border-radius:6px;overflow:hidden}
.ribbon i{flex:1}
.lv0{background:#1f7a44}.lv1{background:#b88600}.lv2{background:#c2521c}.lv3{background:#c22a22}
.ribbon i.past{opacity:.4}                              /* the past reads as faded history */
.ribbon i.sel{outline:2px solid #fff;outline-offset:-2px;opacity:1}   /* the hour you're viewing */
/* marker on the current hour, so "now" stays visible wherever you scrub */
.nowmark{position:absolute;top:-3px;height:36px;width:2px;background:#5cd0ff;transform:translateX(-1px);box-shadow:0 0 7px rgba(92,208,255,.9);pointer-events:none;z-index:1}
.nowmark::before{content:"ACUM";position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:8px;font-weight:800;letter-spacing:.5px;color:#5cd0ff;white-space:nowrap;text-shadow:0 1px 3px #000}
.scrub input[type=range]{position:absolute;top:-7px;left:0;width:100%;height:44px;margin:0;background:transparent;-webkit-appearance:none;cursor:grab}
.scrub input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:6px;height:44px;background:#fff;border-radius:3px;box-shadow:0 0 10px rgba(255,255,255,.8)}
.scrub input[type=range]::-moz-range-thumb{width:6px;height:44px;background:#fff;border:0;border-radius:3px}
.hint{font-size:11px;opacity:.55;margin-top:8px}
footer{padding:12px 16px;font-size:11px;opacity:.55}
.mk{font-size:18px;line-height:1;text-shadow:0 1px 3px #000;transform:translateY(-2px)}
.mk-dump{color:var(--red);font-size:22px;animation:pulse2 1.3s infinite}
.mk-village{color:#7fd0ff}
.mk-wreck{color:#9fb6c9}
.mk-nibiru{color:#ffd24a;font-size:20px}
@keyframes pulse2{50%{text-shadow:0 0 14px var(--red)}}
/* Dark-themed map popups (MapLibre default is white bg; our near-white page text was invisible) */
.maplibregl-popup-content{background:#16121a;color:#f2eef0;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:8px 12px;font-weight:600;font-size:12px;box-shadow:0 6px 22px rgba(0,0,0,.55)}
.maplibregl-popup-close-button{color:#f2eef0;font-size:15px}
.maplibregl-popup-anchor-top .maplibregl-popup-tip,.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{border-bottom-color:#16121a}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{border-top-color:#16121a}
.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:#16121a}
.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:#16121a}
/* Affected-locality highlight: soft amber glow disk + bright label so towns pop on black */
.mk-loc{position:relative;width:0;height:0}
.mk-loc .core{position:absolute;left:0;top:0;width:6px;height:6px;transform:translate(-50%,-50%);border-radius:50%;background:#ffd27a;box-shadow:0 0 6px rgba(255,180,70,.8);pointer-events:none}
.mk-loc b{position:absolute;left:0;top:7px;transform:translateX(-50%);white-space:nowrap;font-size:11px;font-weight:800;letter-spacing:.5px;color:#ffe7bd;text-shadow:0 1px 4px #000,0 0 9px rgba(255,150,40,.55);pointer-events:none}
/* Logo markers (Nibiru, Beach Please) */
.mk-logo{display:flex;flex-direction:column;align-items:center}
.mk-logo img{display:block;height:50px;width:auto;border-radius:7px;border:1px solid rgba(255,255,255,.4);background:rgba(8,7,10,.55);box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 16px rgba(255,190,70,.45),0 2px 12px rgba(0,0,0,.85)}
.mk-logo.big img{height:46px}
.mk-logo .cap{margin-top:3px;font-size:9px;font-weight:700;color:#ffe7bd;text-shadow:0 1px 3px #000,0 0 6px rgba(255,150,40,.5);white-space:nowrap}
/* Roza vânturilor — always-on compass: current wind direction + speed */
.windrose{position:absolute;top:10px;right:10px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:1px;background:rgba(8,7,10,.62);backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:7px 9px 6px;pointer-events:none;transform:scale(2);transform-origin:top right}
.windrose .rose{width:56px;height:56px;display:block}
.windrose .card{fill:#d2d2d2;font:700 9px system-ui;text-anchor:middle;dominant-baseline:middle;opacity:.85}
.windrose .needle{filter:drop-shadow(0 0 3px rgba(255,59,47,.7))}
.windrose .wspd{text-align:center;line-height:1.05;margin-top:1px}
.windrose .wspd b{font-size:12px;font-weight:800;color:#fff}
.windrose .wspd span{display:block;font-size:9px;color:#e0cfc6;opacity:.9}
.windrose .wtime{margin-top:3px;font-size:8.5px;font-weight:700;color:#cdbfb6;text-align:center;line-height:1.1;white-space:nowrap}
.windrose .wtime em{font-style:normal;color:#ffd27a;font-weight:800}
/* SVG landmark icons (obelisc, wreck, dump) — dump keeps a pulsing red hazard glow */
.mk-icon{display:flex;align-items:center;justify-content:center}
.mk-icon img{display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.85))}
.mk-dump-icon{position:relative}
.mk-dump-icon::before{content:"";position:absolute;left:50%;top:58%;width:66px;height:66px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,45,32,.6),rgba(255,45,32,0) 70%);animation:dumpglow 1.5s infinite;z-index:-1}
@keyframes dumpglow{0%,100%{opacity:.45}50%{opacity:.95}}
/* Keep all markers/labels/logos ABOVE the particle canvas (z-index:2) so the
   towns glow through the toxic cloud instead of being buried under it. */
.maplibregl-marker{z-index:3}
.maplibregl-popup{z-index:4}