:root{
  --bg-app:#1e1f22;
  --bg-panel:#272a2f;
  --accent:#3da7e0;
  --border:#3a3e45;
  --text:#e7e9ec;
  --text-dim:#9aa3ad;
  --text-faint:#6b7480;
}

html,body{margin:0;height:100%;height:100dvh;background:#000;color:var(--text);font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;overflow:hidden;}

/* inset:0 + margin:auto centers this without a top:50%/left:50% percentage
   calc — that trick resolves against the LAYOUT viewport for a fixed
   element, which on real mobile Chrome/Safari is taller than what's
   actually visible whenever the address bar is showing, so the canvas
   used to center itself against a taller phantom viewport and land
   visibly low on screen. inset:0 ties directly to the actual visible
   viewport instead, and 90dvh (with a 90vh fallback for older browsers)
   keeps the sizing itself dynamic-viewport-aware too. */
#globe-canvas{
  position:fixed;inset:0;margin:auto;display:block;
  width:90vw;width:90dvw;height:90vh;height:90dvh;
}

#globe-back{
  position:fixed;top:16px;left:16px;z-index:10;
  display:flex;align-items:center;gap:8px;padding:8px 14px;
  background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;
  color:var(--text);text-decoration:none;font-size:13px;font-weight:600;
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
}
#globe-back:hover{border-color:var(--accent);color:var(--accent);}
#globe-back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}

#globe-title{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:5;
  font-size:  22px;font-weight:700;letter-spacing:.3px;color:var(--text);
  text-shadow:0 2px 8px rgba(0,0,0,0.8);
  pointer-events:none;white-space:nowrap;
  max-width:min(60vw, 640px);overflow:hidden;text-overflow:ellipsis;
}

#globe-loading{
  position:fixed;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  background:#000;color:var(--text-dim);font-size:13px;
  
}
#globe-loading[hidden]{display:none;}

#globe-clock-panel{
  position:fixed;top:16px;right:16px;z-index:10;
  width:clamp(180px, 22vw, 250px);height:clamp(220px, 42vh, 400px);
  display:flex;flex-direction:column;
  background:linear-gradient(160deg, rgba(48,53,61,0.92), rgba(22,25,30,0.95));
  border:1px solid rgba(255,255,255,0.12);border-radius:14px;
  padding:16px 18px;box-shadow:0 16px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:height .2s ease;
}

#globe-clock-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex:0 0 auto;cursor:pointer;}
#globe-clock-header::after{
  content:'';margin-left:auto;width:9px;height:9px;flex:0 0 auto;
  border-right:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(45deg);transition:transform .2s ease;opacity:.7;
  display:none; /* only meaningful once panels become collapsible on narrow screens */
}
#globe-clock-icon{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:26px;height:26px;border-radius:50%;font-size:14px;
  background:linear-gradient(135deg, var(--accent), #2176ff);
}
#globe-clock-header-label{font-size:12px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.5px;}

#globe-clock-local{font-size:30px;font-weight:800;color:#ffd76a;font-variant-numeric:tabular-nums;line-height:1.1;flex:0 0 auto;}
#globe-clock-utc{font-size:11px;color:var(--text-dim);margin-top:3px;margin-bottom:12px;flex:0 0 auto;}

#globe-zone-list{flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
.globe-zone-row{
  display:grid;grid-template-columns:20px 1fr 20px 44px;align-items:center;gap:8px;
  font-size:12.5px;padding:5px 4px;border-radius:6px;
}
.globe-zone-row:hover{background:rgba(255,255,255,0.06);}
.globe-zone-flag{font-size:14px;line-height:1;}
.globe-zone-label{color:#fff;}
.globe-zone-daynight{font-size:12px;text-align:center;line-height:1;}
.globe-zone-daynight.is-night{opacity:.7;}
.globe-zone-time{color:#ffd76a;font-variant-numeric:tabular-nums;font-weight:700;text-align:right;}

#globe-country-list-panel{
  /* top:64px (not 16px) so this never sits under the Back to Map button —
     both used to anchor at the same 16,16 point, completely hiding it. */
  position:fixed;top:64px;left:16px;z-index:8;
  width:clamp(150px, 20vw, 200px);height:clamp(180px, 38vh, 400px);
  background:rgba(39,42,47,0.9);border:1px solid rgb(166, 165, 162);border-radius:10px;
  padding:14px 16px;box-shadow:0 8px 24px rgba(0,0,0,0.5);
  backdrop-filter:blur(4px);display:flex;flex-direction:column;
  transition:height .2s ease;
}
#globe-country-list-title{
  display:flex;align-items:center;cursor:pointer;
  font-size:12px;font-weight:700;color:#fff;text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:10px;flex:0 0 auto;
}
#globe-country-list-title::after{
  content:'';margin-left:auto;width:9px;height:9px;flex:0 0 auto;
  border-right:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(45deg);transition:transform .2s ease;opacity:.7;
  display:none; /* only meaningful once panels become collapsible on narrow screens */
}
#globe-country-list{flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
.globe-country-list-item{
  display:block;width:100%;text-align:left;padding:6px 8px;
  background:transparent;border:none;border-radius:6px;
  color:var(--text-dim);font-size:12.5px;cursor:pointer;
}
.globe-country-list-item:hover{background:rgba(255,255,255,0.08);color:#fff;}
.globe-country-list-item.active{background:rgba(61,167,224,0.25);color:#fff;font-weight:600;}

#globe-hint{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:10;
  font-size:11.5px;color:white;
  background:rgba(76, 76, 78, 0.75);padding:5px 12px;border-radius:5px;
  pointer-events:none;
}

#globe-credits{
  position:fixed;bottom:6px;right:10px;z-index:10;
  font-size:10px;color:rgba(197, 191, 191, 0.85);
  pointer-events:none; border:0.25px solid rgba(157, 145, 145, 0.82);padding:4px 8px; border-radius: 3px;
}

#globe-country-info{
  position:fixed;left:16px;bottom:16px;z-index:11;
  width:min(260px, calc(100vw - 32px));
  max-height:calc(100vh - 32px);overflow-y:auto;
  background:linear-gradient(160deg, rgba(48,53,61,0.92), rgba(22,25,30,0.95));
  border:1px solid rgba(242, 231, 231, 0.82);border-radius:14px;
  padding:16px 18px;font-size:13px;color:var(--text);line-height:1.4;
  box-shadow:0 16px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
#globe-country-info[hidden]{display:none;}

@keyframes globeInfoPop{
  from{opacity:0;transform:translateY(10px) scale(.96);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.globe-info-pop{animation:globeInfoPop .28s cubic-bezier(.2,.8,.3,1);}

.globe-info-close{
  position:absolute;top:10px;right:10px;width:22px;height:22px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.06);border:none;border-radius:50%;
  color:var(--text-faint);cursor:pointer;
}
.globe-info-close:hover{background:rgba(255,255,255,0.16);color:var(--text);}

.globe-info-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-right:20px;}
.globe-info-icon{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg, var(--accent), #2176ff);color:#08131c;
}
.globe-info-name{font-size:16px;font-weight:700;color:#fff;letter-spacing:.2px;}

.globe-info-time{
  display:flex;align-items:baseline;gap:6px;line-height:1.1;
  font-size:26px;font-weight:800;color:#ffd76a;font-variant-numeric:tabular-nums;
}
.globe-info-time-unit{font-size:12px;font-weight:600;color:#fff;}
.globe-info-time-label{
  margin:2px 0 10px;font-size:10px;color:#fff;
  text-transform:uppercase;letter-spacing:.6px;
}

.globe-info-coords{
  display:inline-block;margin:0 0 8px;padding:3px 9px;
  background:rgba(255,255,255,0.07);border-radius:20px;
  font-size:11.5px;color:#fff;font-variant-numeric:tabular-nums;
}
.globe-info-note{display:block;margin-bottom:12px;font-size:11px;color:#fff;line-height:1.4;}

.globe-info-weather{
  display:flex;align-items:center;gap:6px;margin:2px 0 10px;
  font-size:13px;color:#fff;
}
.globe-weather-icon{font-size:17px;line-height:1;}
.globe-weather-temp{font-weight:700;}
.globe-weather-temp-f{color:#fff;font-size:11px;}
.globe-weather-label{color:#fff;}

.globe-info-population{
  display:flex;align-items:center;gap:6px;margin:0 0 10px;
  font-size:12px;color:#fff;
}
.globe-info-population-value{font-weight:700;}
.globe-info-population-label{color:#fff;font-size:11px;}

.globe-info-gis-link{
  display:flex;align-items:center;gap:7px;width:100%;margin:0 0 10px;padding:8px 10px;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:8px;
  color:#fff;font-size:11.5px;text-decoration:none;line-height:1.3;
  transition:background .15s ease, border-color .15s ease;
}
.globe-info-gis-link svg{flex:0 0 auto;color:var(--accent);}
.globe-info-gis-link:hover{background:rgba(255,255,255,0.11);border-color:rgba(255,255,255,0.22);}

.globe-open-map-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:10px 0;
  background:linear-gradient(135deg, var(--accent), #2176ff);border:none;border-radius:9px;
  color:#08131c;font-size:13px;font-weight:700;cursor:pointer;
  box-shadow:0 4px 14px rgba(61,167,224,0.35);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.globe-open-map-btn svg{flex:0 0 auto;}
.globe-open-map-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(61,167,224,0.5);filter:brightness(1.05);}
.globe-open-map-btn:active{transform:translateY(0);}

/* Below this width the two side panels (country list + world clock) would
   otherwise together be wider than many phones' entire screen, so they
   become collapsible: tap the header to fold down to just that header row.
   Both start collapsed on load at this size (see globe.js) so the globe
   itself is visible and usable immediately, not hidden behind two full
   panels — expand either one on demand. */
@media (max-width:680px){
  #globe-back{padding:7px 11px;font-size:12px;gap:6px;}
  #globe-back svg{width:14px;height:14px;}

  /* These widths apply to the EXPANDED state. Sized (40vw each, not the
     earlier 46vw) so that even both panels expanded at once still leave a
     visible gap down to ~320px-wide phones: at 320px that's 128px + 140px
     of panel plus 32px of edge margin = 300px, a 20px gap. Collapsed state
     overrides this to shrink-to-fit below — the two header pills are far
     narrower than the full expanded list, and were previously (wrongly)
     kept at this same width even collapsed, which is what caused them to
     overlap in the middle of the screen on real phones. */
  #globe-country-list-panel{top:56px;width:clamp(120px, 40vw, 190px);}
  #globe-clock-panel{width:clamp(140px, 40vw, 220px);margin-top: 33px;}

  #globe-country-list-title::after,
  #globe-clock-header::after{display:block;}

  /* fit-content only shrinks the CONTENT box — the panels' normal padding
     (14-18px a side) still gets added on top of that, which left just a
     1px gap between the two collapsed pills (invisible in practice, but
     real) before this. Cutting padding here too gives an actual margin. */
  .globe-panel-collapsed{height:auto !important;width:fit-content !important;max-width:56vw;padding:8px 12px !important;}
  .globe-panel-collapsed #globe-country-list,
  .globe-panel-collapsed #globe-clock-local,
  .globe-panel-collapsed #globe-clock-utc,
  .globe-panel-collapsed #globe-zone-list{display:none;}
  .globe-panel-collapsed #globe-country-list-title,
  .globe-panel-collapsed #globe-clock-header{margin-bottom:0;white-space:nowrap;}
  .globe-panel-collapsed #globe-country-list-title::after,
  .globe-panel-collapsed #globe-clock-header::after{transform:rotate(-135deg);}

  #globe-title{top:12px;}
  /* bottom:40px (not the desktop 16px) so a 2-line-wrapped hint never
     overlaps the credits line sitting in the corner below it — both are
     nearly full-width at phone sizes, so vertical clearance is the only
     thing that keeps them apart. */
  #globe-hint{bottom:40px;font-size:10.5px;padding:4px 10px;max-width:calc(100vw - 24px);white-space:normal;text-align:center;}
  #globe-credits{font-size:9px;padding:3px 6px;}

  /* bottom:30px, not 8px, so it doesn't sit directly on top of the credits
     line in the same corner. */
  #globe-country-info{left:8px;right:8px;bottom:30px;width:auto;max-height:56vh;padding:14px 16px;}
}

@media (max-width:380px){
  #globe-country-list-panel,#globe-clock-panel{width:calc(50vw - 20px);}
  #globe-title{display:none;} /* purely decorative — first to go when every pixel matters */
  /* Collapsed-pill text can't shrink below its own content width, so on
     genuinely tiny screens (old ~320px phones) "Fly to a Country" and
     "World Clock" side by side still don't fit even with fit-content
     sizing — shortening to "Fly to" / "Clock" is what actually closes
     that last gap, not further padding/font tweaks. */
  .globe-panel-label-extra{display:none;}
}