/* Night Watch theme — dark, immersive. Globe fills the screen and turns slowly; search floats on top,
   countries ride along the bottom, details slide in from the right. Single dark look by design. */
:root{
  --bg:#050a15; --surface:rgba(14,24,46,.78); --surface-solid:#0d1630; --surface-2:rgba(255,255,255,.06); --line:rgba(255,255,255,.09);
  --text:#ebf1fb; --muted:#9fb1cd; --dim:#6b7f9f;
  --accent:#6f9bff; --accent-soft:rgba(111,155,255,.16); --accent-ink:#06102a; --signal:#ffb547;
  --shadow:0 20px 60px rgba(0,0,0,.55);
  --r:24px; --r-sm:14px;
  --font:'Manrope',system-ui,sans-serif; --display:'Sora','Manrope',system-ui,sans-serif; --mono:'Sora',ui-monospace,monospace;
  color-scheme:dark;
}
/* deep space behind the globe: faint stars over a dark blue glow */
body{background:radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,0.55),transparent),radial-gradient(1px 1px at 27% 72%,rgba(255,255,255,0.35),transparent),radial-gradient(1.5px 1.5px at 41% 9%,rgba(255,255,255,0.7),transparent),radial-gradient(1px 1px at 58% 83%,rgba(255,255,255,0.4),transparent),radial-gradient(1px 1px at 66% 27%,rgba(255,255,255,0.55),transparent),radial-gradient(1.5px 1.5px at 79% 61%,rgba(255,255,255,0.35),transparent),radial-gradient(1px 1px at 88% 14%,rgba(255,255,255,0.7),transparent),radial-gradient(1px 1px at 93% 88%,rgba(255,255,255,0.4),transparent),radial-gradient(1px 1px at 7% 52%,rgba(255,255,255,0.55),transparent),radial-gradient(1px 1px at 34% 41%,rgba(255,255,255,0.35),transparent),radial-gradient(1px 1px at 71% 47%,rgba(255,255,255,0.7),transparent),radial-gradient(1.5px 1.5px at 19% 91%,rgba(255,255,255,0.4),transparent),radial-gradient(1px 1px at 52% 58%,rgba(255,255,255,0.55),transparent),radial-gradient(1px 1px at 84% 36%,rgba(255,255,255,0.35),transparent),radial-gradient(ellipse at 55% 45%,#0f1d3d 0,#060b18 55%,#02040a 100%);background-size:520px 520px,520px 520px,520px 520px,520px 520px,520px 520px,520px 520px,520px 520px,520px 520px,520px 520px,520px 520px,520px 520px,520px 520px,520px 520px,520px 520px,100% 100%}
#map{background:transparent}

.bar{position:fixed;z-index:20;top:calc(18px + var(--safe-t));left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.bar>*{pointer-events:auto}
.brand-name{color:#fff;font-size:18px}
.brand-name b{color:#8fb2ff} .brand-name i{color:#ff8189}
.brand img{width:32px;height:32px;background:#fff;border-radius:50%;padding:3px}
.links a{color:var(--muted)} .links a:hover{color:#fff;background:var(--surface-2)}
.links a.cta{background:#fff;color:#06102a}

.finder{position:fixed;z-index:21;top:calc(14px + var(--safe-t));left:50%;transform:translateX(-50%);width:min(640px,calc(100% - 560px));display:flex;gap:6px;align-items:center;padding:6px;border-radius:999px;
  background:var(--surface);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid var(--line);box-shadow:var(--shadow)}
.finder .search{flex:1}
.finder .search input{background:transparent;height:44px;border-radius:999px;font-size:15.5px}
.finder .search input:focus{border-color:transparent;background:var(--surface-2)}
.seg{background:var(--surface-2);border-radius:999px;padding:3px}
.seg button{height:38px;border-radius:999px;font-size:13px;padding:0 14px}
.seg button[aria-selected=true]{background:var(--accent);color:var(--accent-ink);box-shadow:none}

.intro{position:fixed;z-index:5;left:36px;bottom:calc(112px + var(--safe-b));max-width:440px;pointer-events:none}
.eyebrow{color:var(--signal);letter-spacing:.16em}
.headline{font-size:44px;line-height:1.05;font-weight:700;letter-spacing:-.03em;color:#fff;margin:10px 0 14px;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.statline{color:var(--muted)} .statline b{color:#fff;font-family:var(--display)}

.strip{position:fixed;z-index:6;left:0;right:0;bottom:calc(20px + var(--safe-b));display:flex;gap:8px;overflow-x:auto;padding:4px 24px;scrollbar-width:none;
  mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.strip::-webkit-scrollbar{display:none}
.tile{background:var(--surface);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--accent);transform:translateY(-2px)}

.panel{position:fixed;z-index:15;top:calc(86px + var(--safe-t));right:20px;bottom:20px;width:410px;border-radius:var(--r);overflow:hidden;
  background:var(--surface);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid var(--line);box-shadow:var(--shadow);
  animation:slide .3s cubic-bezier(.2,.8,.2,1)}
@keyframes slide{from{opacity:0;translate:24px 0}}
.list,.view{flex:1;padding:4px 8px 16px}
body[data-state=home] .panel{display:none}
body[data-state=search] .view, body[data-state=detail] .list, body[data-state=menu] .list{display:none}
body:not([data-state=home]) .intro, body:not([data-state=home]) .strip{display:none}
.maplibregl-ctrl-bottom-right{bottom:calc(84px + var(--safe-b))}
body:not([data-state=home]) .maplibregl-ctrl-bottom-right{right:440px;bottom:0}

.row:hover{background:var(--surface-2)}
.flag{box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.n{background:var(--surface-2)}
.hero h2{font-size:28px;font-weight:700}
.kicker{color:var(--signal)}
.card{background:var(--surface-2);border:1px solid var(--line)}
.act{background:rgba(255,255,255,.05)}
.dot.on{box-shadow:0 0 0 4px rgba(255,181,71,.35),0 0 18px var(--signal)}
.pin.on{box-shadow:0 0 0 3px var(--signal),0 0 24px rgba(255,181,71,.6)}
.maplibregl-ctrl-group{background:var(--surface-solid)!important}
.maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1)}
.maplibregl-popup.tip .maplibregl-popup-content{background:var(--surface-solid)}
.page{background:var(--surface-solid)}
.store{background:#fff;color:#06102a!important}
.toast{background:#fff;color:#06102a}

@media (max-width:1100px){ .finder{width:min(560px,calc(100% - 300px))} .links a:not(.cta){display:none} }
@media (max-width:760px){
  .bar{top:calc(10px + var(--safe-t));left:14px;right:10px}
  .menu-btn{color:#fff;background:var(--surface)}
  .finder{top:calc(62px + var(--safe-t));left:12px;right:12px;width:auto;transform:none;border-radius:18px;flex-wrap:wrap;padding:6px}
  .finder .search{flex-basis:100%}
  .finder .seg{flex:1}
  .intro{display:none}
  .strip{padding:4px 12px}
  .panel{top:auto;left:0;right:0;bottom:0;width:auto;border-radius:24px 24px 0 0;border-bottom:0;height:var(--h,52vh);transition:height .28s cubic-bezier(.2,.8,.2,1);padding-bottom:var(--safe-b);animation:up .28s ease-out}
  .panel.dragging{transition:none}
  .panel[data-size=peek]{--h:200px} .panel[data-size=half]{--h:55vh} .panel[data-size=full]{--h:calc(100% - 172px - var(--safe-t))}
  .grip{display:block;width:100%;height:22px;flex-shrink:0;touch-action:none}
  .grip span{display:block;width:40px;height:5px;border-radius:5px;background:rgba(255,255,255,.25);margin:9px auto 0}
  .headline{font-size:32px}
}