html{color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: mapa operacyjna po lewej, rejestr zdarzeń po prawej; na telefonie jedno pod drugim */
:root{
  --bg:#eef1f3; --panel:#ffffff; --fg:#1b2329; --muted:#5d6b75; --line:#d3dbe0;
  --land:#dfe6ea; --land-hi:#cfd9df; --border:#ffffff;
  --attack:#d6452b; --missile:#8a5a00; --focus:#1b2329; --scrim:rgba(18,24,28,.55);
  --f-display:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-body:"Barlow",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#12181c; --panel:#1a2227; --fg:#e4eaee; --muted:#93a2ac; --line:#2b363d;
  --land:#243037; --land-hi:#2e3c44; --border:#12181c;
  --attack:#f0684e; --missile:#d9a441; --focus:#e4eaee; --scrim:rgba(0,0,0,.65); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#12181c; --panel:#1a2227; --fg:#e4eaee; --muted:#93a2ac; --line:#2b363d;
  --land:#243037; --land-hi:#2e3c44; --border:#12181c;
  --attack:#f0684e; --missile:#d9a441; --focus:#e4eaee; --scrim:rgba(0,0,0,.65); color-scheme:dark}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.5}
.wrap{max-width:1240px;margin:0 auto;padding-inline:16px;padding-block:20px 32px;display:grid;gap:16px}
header{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px}
h1{font-family:var(--f-display);font-weight:700;font-size:clamp(28px,4vw,40px);line-height:1.05;margin:0;letter-spacing:.01em;text-wrap:balance}
.sub{color:var(--muted);margin:4px 0 0;max-width:62ch}
.stats{display:flex;gap:20px;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.stats div{display:grid}
.stats b{font-size:22px;font-weight:500}
.stats span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:14px;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);color:var(--fg);padding:6px 12px;border-radius:999px;cursor:pointer}
.chip[aria-pressed="false"]{opacity:.45}
.chip:focus-visible,.item:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.dot.drone{background:var(--attack)}.dot.other{background:var(--missile);border-radius:2px;transform:rotate(45deg)}
.main{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:860px){.main{grid-template-columns:1fr}}
.mapbox{background:var(--panel);border:1px solid var(--line);border-radius:6px;position:relative;min-width:0}
svg{display:block;width:100%;height:auto}
.woj{fill:var(--land);stroke:var(--border);stroke-width:1.2}
.woj.hi{fill:var(--land-hi)}
.wojlbl{font-family:var(--f-display);font-size:11px;fill:var(--muted);text-transform:uppercase;letter-spacing:.08em;pointer-events:none;opacity:.8}
.mk{cursor:pointer;stroke:var(--panel);stroke-width:1.5}
.mk.drone{fill:var(--attack)}.mk.other{fill:var(--missile)}
.mk.sel{stroke:var(--focus);stroke-width:2.5}
.ring{fill:none;stroke:var(--attack);stroke-width:1.5}
@media (prefers-reduced-motion:no-preference){.ring{animation:pulse 2s ease-out infinite}}
@keyframes pulse{from{r:7;opacity:.9}to{r:20;opacity:0}}
.scale{position:absolute;left:12px;bottom:10px;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.detail{border-top:1px solid var(--line);padding:14px 16px;display:grid;gap:4px;min-height:96px}
.detail h2{font-family:var(--f-display);font-size:22px;margin:0;line-height:1.1}
.meta{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.detail p{margin:4px 0 0}
.detail .src{justify-self:start;font-family:var(--f-mono);font-size:12px;color:var(--muted);margin-top:4px}
.detail .src:hover{color:var(--fg)}
.list{background:var(--panel);border:1px solid var(--line);border-radius:6px;min-width:0;max-height:760px;overflow:auto}
.list h3{position:sticky;top:0;background:var(--panel);margin:0;padding:12px 16px;font-family:var(--f-display);font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);border-bottom:1px solid var(--line);z-index:1}
.item{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:baseline;padding:10px 16px;border-bottom:1px solid var(--line);cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left;font:inherit;color:inherit}
.item:hover,.item.sel{background:var(--bg)}
.item .dot{align-self:center}
.item strong{font-weight:600}
.item time{font-family:var(--f-mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.item small{grid-column:2/4;color:var(--muted);font-size:13px}
/* Nowa pozycja rejestru wsuwa się przy odtwarzaniu osi czasu */
@media (prefers-reduced-motion:no-preference){.item.in{overflow:hidden;animation:itemin .4s ease-out backwards}}
@keyframes itemin{from{max-height:0;padding-block:0;border-bottom-width:0;opacity:0}to{max-height:120px}}
.timeline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px 14px}
.timeline input{flex:1 1 220px;min-width:0;accent-color:var(--attack)}
.play{font:inherit;font-family:var(--f-mono);font-size:13px;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:4px;padding:5px 10px;cursor:pointer;min-width:84px}
.play:focus-visible,.tab:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tdate{font-family:var(--f-mono);font-size:15px;font-variant-numeric:tabular-nums;min-width:92px}
.border{fill:none;stroke:var(--attack);stroke-width:1.6;stroke-dasharray:5 4;opacity:.7}
.borderlbl{font-family:var(--f-mono);font-size:10px;fill:var(--attack);opacity:.85}
.tabs{position:sticky;top:0;background:var(--panel);display:flex;border-bottom:1px solid var(--line);z-index:1}
.tab{flex:1 1 auto;font:inherit;font-family:var(--f-display);font-size:14px;text-transform:uppercase;letter-spacing:.1em;padding:11px 8px;border:0;background:none;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--attack)}
/* Zakładka gry jest wyróżniona, żeby zachęcać do typowania */
.tab.cta{color:var(--attack);font-weight:700;background:color-mix(in srgb,var(--attack) 12%,transparent)}
.tab.cta::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--attack);margin-right:7px;vertical-align:1px}
@media (prefers-reduced-motion:no-preference){.tab.cta::before{animation:blink 1.6s ease-in-out infinite}}
@keyframes blink{50%{opacity:.25}}
.tab .badge{display:inline-block;margin-left:7px;padding:0 6px;border-radius:9px;background:var(--attack);color:#fff;font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:0;line-height:17px;vertical-align:1px}
.cta-card{display:grid;gap:6px;justify-items:start;padding:14px 16px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--attack) 9%,transparent)}
.cta-card strong,.gp .ask{font-family:var(--f-display);font-size:20px;font-weight:700;line-height:1.15;margin:0}
.cta-card p{margin:0 0 4px;font-size:14px}
.btn.big{font-size:15px;padding:10px 18px}
.late{font-family:var(--f-mono);font-size:11px;color:var(--attack);white-space:nowrap}
.rankhead{padding:10px 16px;font-size:13px;color:var(--muted);border-bottom:1px solid var(--line)}
/* pointer-events:all, bo okrąg bez wypełnienia inaczej reaguje tylko na samym obrysie */
.gs{fill:none;stroke-width:2;pointer-events:all;cursor:pointer}
.gs.sel{stroke-width:4}
svg.picking .gs{cursor:crosshair}
.glbl{font-family:var(--f-mono);font-size:12px;font-weight:500;fill:var(--fg);stroke:var(--panel);stroke-width:3;paint-order:stroke;pointer-events:none}
.gs.me{stroke:var(--focus);stroke-width:2.5}
.gpin{fill:var(--focus);stroke:var(--panel);stroke-width:1.5}
.actual{fill:var(--attack);stroke:var(--panel);stroke-width:2}
.gline{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3}
svg.picking{cursor:crosshair}
.gp{display:grid;gap:12px;padding:14px 16px}
.gp p{margin:0}
.gp .hint{font-size:13px;color:var(--muted)}
.gp .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gp input[type=text],.gp input[type=date]{font:inherit;font-size:14px;padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--fg);min-width:0;flex:1 1 140px}
.btn{font:inherit;font-size:14px;font-weight:600;border:0;background:var(--attack);color:#fff;padding:7px 14px;border-radius:4px;cursor:pointer}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--fg);font-weight:500}
.btn:disabled{opacity:.45;cursor:default}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.owner{border-top:1px dashed var(--line);padding-top:12px;display:grid;gap:8px}
.owner h4{margin:0;font-family:var(--f-display);font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.gl{display:grid}
.gi{display:grid;grid-template-columns:1.6em 22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 6px;border:0;border-bottom:1px solid var(--line);background:none;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.gi:hover,.gi.sel{background:var(--bg)}
.gi:focus-visible,.gs:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.gi .who{display:block;min-width:0}
.gi .sw{width:14px;height:14px;border-radius:50%;justify-self:center}
.gi .km{font-family:var(--f-mono);font-size:13px;font-variant-numeric:tabular-nums}
.gi .no{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.gi.win strong::after{content:" · zwycięzca";color:var(--attack);font-weight:600;font-size:12px}
.gi small{display:block;color:var(--muted);font-size:12px}
/* Tabela zwycięzców: zamiast numeru miejsca numer rundy */
.gi.wi{grid-template-columns:auto 22px minmax(0,1fr) auto}
.banner{background:var(--bg);border-radius:4px;padding:10px 12px;font-size:14px}
.note{font-size:13px;color:var(--muted);max-width:80ch}
.note a{color:inherit}
.traj{fill:none;stroke:var(--attack);stroke-width:2;stroke-linecap:round;pointer-events:none}
.traj.still{stroke-width:1.4;stroke-dasharray:1 5;opacity:.75}
.flyer{fill:var(--fg);stroke:var(--panel);stroke-width:1.5;pointer-events:none}
.boom{text-anchor:middle;dominant-baseline:central;pointer-events:none}
.alerts{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:14px 16px}
.alerts h2{font-family:var(--f-display);font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 8px}
.alerts ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:14px;max-width:100ch}
.alerts time{font-family:var(--f-mono);font-size:12px;color:var(--attack);margin-right:6px}
.alerts a{color:inherit}
.foot{border-top:1px solid var(--line);padding-top:12px;font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px}
.foot .support{margin-left:auto}
.social{display:flex;gap:14px}
.social a{display:flex}
.social svg{width:20px;height:20px}
.foot a{color:inherit}
.foot a:hover{color:var(--fg)}
.foot a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.stmt{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:0;width:min(560px,calc(100% - 32px))}
.stmt::backdrop{background:var(--scrim)}
.stmt-body{padding:20px;display:grid;gap:12px}
.stmt h2{font-family:var(--f-display);font-size:22px;margin:0;line-height:1.1}
.stmt p{margin:0}
.stmt a{color:inherit}
.stmt form{justify-self:end}
/* --- reklamy: ramka z osobnego hosta (app/ads.py); miejsce pojawia się dopiero, gdy reklama się załaduje --- */
.ad{display:grid;justify-items:center;gap:4px;min-width:0}
.ad span{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.ad iframe{display:block;border:0;width:100%;max-width:100%}
/* Do tego czasu ramka ma swój rozmiar, ale leży poza układem i jest niewidoczna: przy zerowej wysokości
   skrypt reklamy mógłby uznać, że nie ma gdzie rysować. */
.ad:not(.on){position:absolute;left:16px;right:16px;visibility:hidden}
/* --- mapa: zoom i dotyk --- */
.woj,.border,.traj,.gline{vector-effect:non-scaling-stroke}
.hit{fill:transparent;cursor:pointer}
svg.picking .hit{cursor:crosshair}
.zoom{position:absolute;top:10px;right:10px;display:grid;gap:6px}
.zoom button{width:38px;height:38px;font:inherit;font-size:19px;line-height:1;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--fg);cursor:pointer}
.zoom button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* --- telefon: lista bez własnego przewijania, pasek akcji przy wskazywaniu na mapie --- */
.pickbar{display:none}
@media (max-width:860px){
  .list{max-height:none;overflow:visible}
  .tabs{position:static}
  .tab{letter-spacing:.05em;padding-inline:4px}
  .pickbar{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgb(0 0 0/.12)}
  .pickbar span{flex:1 1 150px;font-size:14px}
  .pickbar .btn{padding-block:10px}
}
@media (pointer:coarse){
  .detail .src,.foot>a{padding-block:8px}
  .tab{padding-block:14px}
  .chip{padding-block:9px}
  .play{padding-block:9px}
}