/* Kazakhstan from above (atlas.html, js/atlas.js): satellite map of every city, then-and-now swipe,
   two cities side by side, night lights, travel places and a guessing game. */
:root{
  --space:#050913;
  --snow:#F2F6FC;
  --mist:#9FADC4;
  --kz:#F5C518;
  --sun:#FEC50C;
  --line:rgba(170,200,255,.14);
  --panel:rgba(12,20,40,.72);
  --wrap:1240px;
  --gutter:clamp(16px,3.4vw,40px);
}
*{margin:0;padding:0;box-sizing:border-box}
body{min-height:100vh;color:var(--snow);line-height:1.6;background:var(--space)!important}
.at-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* hero */
.at-hero{position:relative;padding:clamp(118px,15vw,170px) 0 clamp(26px,4vw,44px);overflow:hidden;isolation:isolate}
.at-hero::before{content:"";position:absolute;inset:-20% -10% 0;z-index:-1;background:radial-gradient(ellipse 60% 70% at 70% 20%,rgba(245,197,24,.22),transparent 70%),radial-gradient(ellipse 40% 50% at 15% 80%,rgba(254,197,12,.10),transparent 70%)}
.at-kick{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#7FE3FF}
.at-hero h1{margin-top:12px;font-size:clamp(40px,7.2vw,96px);font-weight:800;line-height:.98;letter-spacing:-.035em;text-wrap:balance}
.at-lede{margin-top:18px;max-width:42em;font-size:clamp(16px,1.45vw,18.5px);color:rgba(242,246,252,.82)}

/* mode tabs */
.at-modes{display:flex;gap:6px;flex-wrap:wrap;padding:5px;border-radius:16px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line);width:max-content;max-width:100%}
.at-modes button{border:0;background:none;color:rgba(242,246,252,.75);font:600 14px/1 var(--font,inherit);padding:11px 16px;border-radius:12px;cursor:pointer;transition:background .2s,color .2s}
.at-modes button:hover{color:#fff;background:rgba(255,255,255,.05)}
.at-modes button.on{background:var(--kz);color:#03121a}
.at-hint{min-height:1.6em;margin:12px 0 14px;font-size:14px;color:var(--mist)}

/* map + list */
.at-grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:16px;align-items:stretch}
.at-side{display:flex;flex-direction:column;gap:10px;min-height:0;height:min(74vh,720px)}
.at-search{width:100%;border:0;border-radius:12px;padding:12px 14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line);color:var(--snow);font:500 15px var(--font,inherit);outline:none}
.at-search:focus{box-shadow:inset 0 0 0 1.5px var(--kz)}
.at-list{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:2px;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(170,200,255,.25) transparent}
.at-c{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:0;background:none;color:rgba(242,246,252,.86);text-align:left;font:500 15px var(--font,inherit);padding:9px 12px;border-radius:10px;cursor:pointer}
.at-c small{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--mist);white-space:nowrap}
.at-c:hover{background:rgba(255,255,255,.05);color:#fff}
.at-c.on{background:rgba(245,197,24,.16);color:#fff;box-shadow:inset 3px 0 0 var(--kz)}
.at-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
.at-stage.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.at-mapwrap{position:relative;height:min(74vh,720px);border-radius:20px;overflow:hidden;background:#0b1326;box-shadow:0 0 0 1px var(--line),0 30px 60px rgba(0,0,0,.35)}
.at-mapwrap[hidden]{display:none}
.at-map,#gmMap{position:absolute;inset:0;background:#0b1326}

/* leaflet skin */
.leaflet-container{font:12px/1.4 var(--font,system-ui)}
.leaflet-control-zoom a{background:rgba(7,13,28,.88)!important;color:#fff!important;border-color:rgba(170,200,255,.2)!important}
.leaflet-bar{border:0!important;box-shadow:0 0 0 1px rgba(170,200,255,.2),0 8px 20px rgba(0,0,0,.35)!important;border-radius:10px!important;overflow:hidden}
.leaflet-control-attribution{background:rgba(5,9,19,.7)!important;color:rgba(242,246,252,.6)!important;font-size:10.5px!important}
.leaflet-control-attribution a{color:#9adff0!important}
.at-pin{position:relative}
.at-pin i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 3px rgba(254,197,12,.25),0 0 12px rgba(254,197,12,.8)}
.at-pin.cap i{background:#fff;width:12px;height:12px;left:-6px;top:-6px;box-shadow:0 0 0 3px rgba(245,197,24,.5),0 0 14px #7FE3FF}
.at-pin b{position:absolute;left:10px;top:-10px;white-space:nowrap;font-size:12.5px;font-weight:700;color:#fff;text-shadow:0 1px 3px #000,0 0 8px rgba(0,0,0,.8);pointer-events:none}
.at-pin.place i{background:#7CFFB2;box-shadow:0 0 0 3px rgba(124,255,178,.25),0 0 12px rgba(124,255,178,.8)}
.at-close .at-pin b,.at-close .at-pin.place{display:none}
.at-far .at-pin.minor b,.at-far .at-pin.place b{display:none}
.at-far .at-pin.place i{width:7px;height:7px;left:-3.5px;top:-3.5px}

/* swipe */
.at-swipe{position:absolute;inset:0;z-index:500;pointer-events:none}
.at-swipe[hidden]{display:none}
.at-bar{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.6)}
.at-bar i{position:absolute;top:50%;left:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.at-bar i::before,.at-bar i::after{content:"";position:absolute;top:50%;margin-top:-6px;border:6px solid transparent}
.at-bar i::before{left:6px;border-right-color:#0b1326}
.at-bar i::after{right:6px;border-left-color:#0b1326}
.at-swipe input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;pointer-events:none;-webkit-appearance:none;appearance:none;background:none;margin:0}
.at-swipe input::-webkit-slider-thumb{-webkit-appearance:none;width:52px;height:100vh;pointer-events:auto;cursor:ew-resize}
.at-swipe input::-moz-range-thumb{width:52px;height:2000px;border:0;pointer-events:auto;cursor:ew-resize}
.at-yr{position:absolute;top:12px;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:12px;background:rgba(5,9,19,.82);box-shadow:0 0 0 1px var(--line);pointer-events:auto;font-size:12px;font-weight:600;color:var(--mist)}
.at-yr.l{left:56px}
.at-yr.r{right:12px}
.at-yr select,.at-vs select{border:0;border-radius:8px;background:#fff;color:#0b1326;font:700 15px var(--font,inherit);padding:6px 8px;cursor:pointer}
.at-vs{position:absolute;z-index:500;top:12px;right:12px;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:12px;background:rgba(5,9,19,.82);box-shadow:0 0 0 1px var(--line);font-size:12px;font-weight:600;color:var(--mist)}
.at-vs select{font-size:14px;max-width:150px}

/* info card + all button */
.at-card{position:absolute;z-index:600;left:12px;bottom:28px;width:min(360px,calc(100% - 24px));padding:16px 18px;border-radius:16px;background:rgba(5,9,19,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px var(--line),0 14px 34px rgba(0,0,0,.45);opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;pointer-events:none}
.at-card.on{opacity:1;transform:none;pointer-events:auto}
.at-card small{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7FE3FF}
.at-card h3{margin:4px 0 6px;font-size:22px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.at-card p{font-size:14.5px;line-height:1.55;color:rgba(242,246,252,.85)}
.at-card .d{margin-top:8px;font-size:12.5px;color:var(--mist)}
.at-all{position:absolute;z-index:600;right:12px;bottom:28px;border:0;border-radius:10px;padding:9px 13px;background:rgba(5,9,19,.86);box-shadow:0 0 0 1px var(--line);color:#fff;font:600 13px var(--font,inherit);cursor:pointer}
.at-all:hover{background:rgba(245,197,24,.3)}
.at-stage.two .at-all{top:12px;bottom:auto}
.at-stage.two .at-card{width:min(300px,calc(100% - 24px))}

/* places */
.at-places{padding:clamp(70px,9vw,120px) 0 0}
.at-places h2,.at-game h2{font-size:clamp(30px,4.4vw,52px);font-weight:800;letter-spacing:-.025em;line-height:1.05;text-wrap:balance}
.at-sub{margin:12px 0 30px;max-width:40em;color:rgba(242,246,252,.78);font-size:clamp(15px,1.3vw,17px)}
.at-pl{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.pl{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px var(--line);transition:transform .25s,box-shadow .25s}
.pl:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(127,227,255,.35),0 18px 40px rgba(0,0,0,.35)}
.pl-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0b1326}
.pl-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.pl:hover .pl-img img{transform:scale(1.04)}
.pl-img .sat{display:grid;grid-template-columns:1fr 1fr;width:100%;height:100%}
.pl-img .sat img{transition:none}
.pl-img .tag{position:absolute;left:10px;top:10px;padding:3px 8px;border-radius:999px;background:rgba(5,9,19,.75);font-size:11px;font-weight:700;color:#7CFFB2}
.pl-b{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.pl h3{font-size:19px;font-weight:800;line-height:1.2;letter-spacing:-.01em}
.pl p{margin-top:8px;flex:1;font-size:14.5px;line-height:1.55;color:rgba(242,246,252,.8)}
.pl .cr{margin-top:10px;font-size:11px;color:rgba(159,173,196,.75)}
.pl button{margin-top:14px;align-self:flex-start}
.at-btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:10px 18px;background:var(--kz);color:#03121a;font:700 14px var(--font,inherit);cursor:pointer;transition:transform .2s,background .2s}
.at-btn:hover{transform:translateY(-1px);background:#2ccbe2}
.at-btn.ghost{background:rgba(255,255,255,.06);color:#fff;box-shadow:inset 0 0 0 1px var(--line)}

/* game */
.at-game{padding:clamp(70px,9vw,120px) 0 0}
.gm{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:stretch}
.gm-map{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.gm-map .leaflet-control-container .leaflet-top{display:none}
.gm-n{position:absolute;z-index:600;left:12px;top:12px;padding:5px 10px;border-radius:999px;background:rgba(5,9,19,.8);font-size:13px;font-weight:700}
.gm-n:empty{display:none}
.gm-side{display:flex;flex-direction:column;gap:14px;justify-content:center}
.gm-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gm-opts button{border:0;border-radius:14px;padding:16px 12px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line);color:#fff;font:700 16px var(--font,inherit);cursor:pointer;transition:background .2s}
.gm-opts button:hover:not(:disabled){background:rgba(245,197,24,.18)}
.gm-opts button.ok{background:rgba(124,255,178,.22);box-shadow:inset 0 0 0 1.5px #7CFFB2}
.gm-opts button.bad{background:rgba(255,110,110,.18);box-shadow:inset 0 0 0 1.5px #ff7a7a}
.gm-opts button:disabled{cursor:default}
.gm-msg{min-height:1.6em;font-size:16px;font-weight:600}
.gm-side .at-btn{align-self:flex-start}

/* credits */
.at-end{padding:clamp(60px,8vw,100px) 0 clamp(60px,8vw,100px)}
.at-credits{font-size:13px;color:var(--mist)}
.at-credits summary{cursor:pointer;font-weight:600;color:rgba(242,246,252,.8)}
.at-credits p{margin-top:10px}
.at-credits ul{margin-top:8px;padding-left:18px;display:grid;gap:3px}
.at-credits a{color:#9adff0}

@media (max-width:900px){
  .at-grid{grid-template-columns:minmax(0,1fr)}
  .at-side{height:auto}
  .at-list{flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:6px;padding:0 0 6px;scroll-snap-type:x proximity}
  .at-c{width:auto;flex:none;padding:8px 12px;background:rgba(255,255,255,.05);border-radius:999px;scroll-snap-align:start}
  .at-c small{display:none}
  .at-c.on{box-shadow:inset 0 0 0 1.5px var(--kz)}
  .at-mapwrap{height:min(62svh,560px);border-radius:16px}
  .at-stage.two{grid-template-columns:minmax(0,1fr)}
  .at-stage.two .at-mapwrap{height:min(42svh,380px)}
  .gm{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .at-modes{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .at-modes button{padding:11px 8px;font-size:13.5px}
  .at-yr{padding:4px 4px 4px 8px}
  .at-yr span{display:none}
  .at-yr.l{left:50px}
  .at-yr select{font-size:14px;padding:5px 6px}
  .at-card{left:8px;bottom:24px;width:calc(100% - 16px);padding:12px 14px}
  .at-card h3{font-size:18px}
  .at-card p{font-size:13.5px}
  .at-all{top:auto;bottom:auto;top:10px;right:10px;padding:7px 10px;font-size:12px}
  .at-swipe .at-yr.r{top:52px}
  .gm-opts button{padding:14px 8px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){.pl,.pl-img img,.at-card{transition:none}}
/* toothpick pass: the place cards' button is a plain outline, the kicker is plain text */
.pl .at-btn{background:none!important;color:var(--n-fg,#fff)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)!important;border-radius:6px!important;font-weight:500;padding:9px 14px}
.pl .at-btn:hover{box-shadow:inset 0 0 0 1px #fff!important;transform:none}
.at-pin i{box-shadow:0 0 0 3px rgba(254,197,12,.25)}