@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/inter-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/inter-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --bg:#070A11; --bg-2:#0C1120; --card:#111827;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --text:#F3F6FC; --muted:#94A2BC; --dim:#6B7994;
  --accent:#8B7CD8; --accent-hi:#A797F0; --ember:#E0574B;
  --radius:16px; --maxw:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
a{color:var(--accent-hi)}
img{max-width:100%; display:block}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 16px}
@media (min-width:700px){ .wrap{padding:0 24px} }

.top{border-bottom:1px solid var(--line); background:rgba(7,10,17,.85); position:sticky; top:0; z-index:5; backdrop-filter:blur(10px)}
.top .wrap{display:flex; align-items:center; gap:16px; height:56px}
.brand{display:flex; align-items:center; gap:8px; color:var(--text); text-decoration:none; font-weight:700; font-size:15px; white-space:nowrap}
.brand img{width:24px; height:24px; border-radius:6px}
.top nav{margin-inline-start:auto; display:flex; align-items:center; gap:14px; font-size:14px}
.top nav a{color:var(--muted); text-decoration:none}
.top nav a:hover{color:var(--text)}
.top nav a.btn{color:#fff; background:var(--accent); padding:7px 14px; border-radius:999px; font-weight:600}
.top nav a.nav-ic{display:inline-flex; align-items:center; gap:6px}
.top nav a.nav-ic svg{width:17px; height:17px; flex:none; display:none}
@media (max-width:520px){
  .top nav .hide-sm{display:none}
  .top nav{gap:10px}
  .top nav a.nav-ic svg{display:block}
  .top nav a.nav-ic .t{display:none}
  .top nav a.btn{padding:7px 10px}
}

.crumbs{font-size:13px; color:var(--dim); margin:20px 0 8px; display:flex; flex-wrap:wrap; gap:6px}
.crumbs a{color:var(--dim); text-decoration:none}
.crumbs a:hover{color:var(--text)}
h1{font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.08; letter-spacing:-.03em; margin:0 0 12px; font-weight:800}
h2{font-size:clamp(1.25rem,2.4vw,1.6rem); letter-spacing:-.02em; margin:44px 0 14px; font-weight:750}
.lede{color:var(--muted); font-size:18px; max-width:760px; margin:0 0 22px}
.intro{max-width:760px; margin:-8px 0 22px; line-height:1.6}
p{margin:0 0 12px}

.yearnav{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px}
.yearnav > a,.yearnav > span{font-size:14px; padding:6px 12px; border-radius:999px; border:1px solid var(--line-2); text-decoration:none; color:var(--text); white-space:nowrap}
.yearnav > a:hover{border-color:var(--accent)}
.yearnav .cur{background:var(--accent); border-color:var(--accent); font-weight:700}

.atlas-map{position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:#1d3247; aspect-ratio:1200/630}
.atlas-map .atlas-stage{position:absolute; inset:0}
.atlas-map picture,.atlas-map img{width:100%; height:100%; object-fit:cover}
.atlas-map .lbls{position:absolute; inset:0; pointer-events:none}
.atlas-map .lbls span{position:absolute; transform:translate(-50%,-50%); font-size:clamp(8px,1.05vw,12px); font-weight:700; color:#fff; white-space:nowrap;
  text-shadow:0 0 3px #000,0 0 2px #000,0 1px 2px rgba(0,0,0,.8)}
.atlas-map .lbls span.minor{font-weight:600; opacity:.9; font-size:clamp(7px,.9vw,11px)}
@media (max-width:600px){ .atlas-map .lbls span:nth-child(n+6){display:none} }
/* Clip-look images (render-clip.mjs): gold labels like the app's map (MapLabelFeatureBuilder). */
.atlas-map.clip .lbls span{color:#FFD140; font-family:"DIN Alternate","DIN Condensed",Bahnschrift,"Roboto Condensed",system-ui,sans-serif; font-weight:600;
  text-shadow:-1px 0 0 rgba(26,13,0,.85),1px 0 0 rgba(26,13,0,.85),0 -1px 0 rgba(26,13,0,.85),0 1px 0 rgba(26,13,0,.85),0 0 3px rgba(26,13,0,.6)}
.atlas-map .load{position:absolute; inset-inline-end:12px; bottom:12px; z-index:2; font:inherit; font-size:14px; font-weight:600; color:#fff; background:var(--accent); border:0; border-radius:999px; padding:9px 16px; cursor:pointer; box-shadow:0 4px 18px rgba(0,0,0,.4); text-decoration:none}
.atlas-map .load:hover{background:var(--accent-hi)}
.atlas-map .load:disabled{opacity:.7; cursor:progress}
.atlas-map.is-live .load,.atlas-map.is-live .lbls,.atlas-map.is-live picture{display:none}
.atlas-map .atlas-stage .maplibregl-canvas{outline:none}
.atlas-label{font-size:11px; font-weight:600; color:#fff; white-space:nowrap; pointer-events:none;
  text-shadow:0 0 3px #000,0 0 2px #000,0 1px 2px rgba(0,0,0,.8); font-family:Inter,-apple-system,"Segoe UI",Roboto,sans-serif}
.atlas-label.major{font-size:13px; font-weight:700}
.maplibregl-popup-content{color:#111; font-size:14px; line-height:1.4; border-radius:10px}
.maplibregl-popup-content a{color:#4b3bb0}
figcaption{font-size:13px; color:var(--dim); margin-top:8px}

.cols{display:grid; gap:28px}
@media (min-width:900px){ .cols{grid-template-columns:3fr 2fr} }
table{width:100%; border-collapse:collapse; font-size:15px}
th,td{text-align:start; padding:9px 8px; border-bottom:1px solid var(--line)}
th{color:var(--dim); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.06em}
td.num,th.num{text-align:end; font-variant-numeric:tabular-nums; white-space:nowrap}
.swatch{display:inline-block; width:10px; height:10px; border-radius:3px; margin-inline-end:8px; vertical-align:baseline}
ul.plain{list-style:none; padding:0; margin:0}
ul.plain li{padding:8px 0; border-bottom:1px solid var(--line)}
.battles li .meta{color:var(--dim); font-size:14px}
.battles li .y{font-variant-numeric:tabular-nums; color:var(--muted); margin-inline-end:8px}
.changes li{padding:6px 0}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.chips a{display:inline-block; font-size:14px; padding:6px 12px; border-radius:999px; background:var(--card); border:1px solid var(--line); text-decoration:none; color:var(--text)}
.chips a:hover{border-color:var(--accent)}

.grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
@media (max-width:520px){ .grid{grid-template-columns:1fr 1fr; gap:10px} .card span{font-size:13px; padding:8px 10px 10px} .card small{font-size:12px} }
.card{display:block; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; text-decoration:none; color:var(--text)}
.card:hover{border-color:var(--accent)}
.card img{aspect-ratio:1200/630; width:100%; object-fit:cover; background:#1d3247}
/* Hub cards: content-visibility skips layout/paint off screen (the web's take on list recycling);
   images load lazily behind a shimmer and fade in. Without JS they just show. */
.card{content-visibility:auto; contain-intrinsic-size:auto 260px auto 320px}
.card .thumb{display:block; position:relative; overflow:hidden; background:#1d3247; padding:0}
.card .thumb img{display:block}
.card .thumb::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.09) 50%,transparent 70%) 0 0/250% 100% no-repeat;
  animation:gh-shimmer 1.3s ease-in-out infinite; transition:opacity .3s ease}
.card .thumb.in::after{opacity:0; animation:none}
html.js .card .thumb img{opacity:0; transform:scale(1.03); transition:opacity .45s ease, transform .6s ease}
html.js .card .thumb.in img{opacity:1; transform:none}
@keyframes gh-shimmer{from{background-position:100% 0} to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){ .card .thumb::after{animation:none} html.js .card .thumb img{transition:none; transform:none} }
.card span{display:block; padding:10px 12px 12px; font-weight:600; font-size:15px}
.card small{display:block; color:var(--dim); font-weight:500; font-size:13px; margin-top:2px}

.chart{width:100%; max-width:720px; height:auto; display:block; background:var(--bg-2); border:1px solid var(--line); border-radius:12px}
.chart text{fill:var(--muted); font-size:16px; font-family:inherit}

.note{color:var(--dim); font-size:14px}
.about{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; color:var(--muted); font-size:15px}
.about p:last-child{margin:0}
.cta{margin:48px 0 0; text-align:center; background:linear-gradient(180deg,var(--bg-2),var(--card)); border:1px solid var(--line); border-radius:var(--radius); padding:32px 20px}
.cta h2{margin:0 0 8px}
.cta p{color:var(--muted); max-width:560px; margin:0 auto 18px}

footer{border-top:1px solid var(--line); margin-top:56px; padding:24px 0 36px; font-size:13px; color:var(--dim)}
footer .wrap{display:flex; flex-wrap:wrap; gap:14px 22px; justify-content:space-between}
footer a{color:var(--dim); text-decoration:none}
footer a:hover{color:var(--text)}
footer .langs{display:flex; flex-wrap:wrap; gap:12px}
footer .langs a[aria-current]{color:var(--text); font-weight:600}
[dir="rtl"] .yearnav .arrow{display:inline-block; transform:scaleX(-1)}