:root{
  --bg:#0b0d10;
  --panel:#101318;
  --panel2:#0e1116;
  --stroke:rgba(255,255,255,.08);
  --stroke2:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.55);
  --shadow:rgba(0,0,0,.55);
}

html, body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: "Manrope", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow:hidden;
}

.app{
  height:100%;
  display:flex;
}

.stageWrap{
  width:66.666%;
  min-width:520px;
  position:relative;
  background:transparent;
  border-right:1px solid var(--stroke);
}

canvas#threeCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:1;
}

/* #cesiumOverlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
}

#cesiumContainer{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:transparent !important;
  z-index:2;
} */

.menu{
  width:33.333%;
  min-width:360px;
  position:relative;
  background:linear-gradient(180deg, var(--panel), var(--panel2));
  padding:22px 18px 34px;
  box-sizing:border-box;
}

.sectionLabel{
  font-family: "Sora", "Manrope", "Segoe UI", sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:.2px;
  color:rgba(210,232,245,.88);
  user-select:none;
}

.sectionLabelStage{
  position:absolute;
  top:12px;
  left:14px;
  z-index:3; 
}

.sectionLabelMenu{
  position:absolute;
  top:12px;
  left:14px;
  z-index:3;
  margin:0;
}

.menuCard{
  margin-top:22px;
}

.menuCard{
  height:calc(100% - 22px);
  border-radius:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--stroke);
  box-shadow: 0 20px 60px var(--shadow);
  padding:18px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.menuTitle{
  text-align:center;
  font-weight:700;
  letter-spacing:.4px;
  font-size:26px;
  margin-top:6px;
  color:rgba(255,255,255,.9);
  user-select:none;
}

.hint{
  font-size:13px;
  color:var(--muted);
  text-align:center;
  padding:0 6px 6px;
  user-select:none;
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px 12px;
  padding:8px 4px 6px;
  background:transparent;
  overflow:visible;
}

.tile{
  border:1px solid var(--stroke);
  border-radius:12px;
  aspect-ratio:1 / 1;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
  padding:8px 8px 6px;
  cursor:pointer;
  user-select:none;
  transition:transform .08s ease, border-color .12s ease, background .12s ease, filter .12s ease;
}

.tile:active{
  transform:scale(.985);
}

.tileTop{
  border-radius:10px;
  height:64px;
  width:64px;
  border:1px solid var(--stroke2);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  margin:0 auto;
}

.tileLabel{
  margin-top:6px;
  font-size:12px;
  font-weight:500;
  min-height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:rgba(255,255,255,.88);
  white-space:normal;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.2;
}

.tile.disabled{
  cursor:not-allowed;
  filter:saturate(.1) brightness(.85);
  opacity:.75;
}

.tile.disabled .tileLabel{
  color:rgba(255,255,255,.55);
}

/* Active thumbs */
.thumbSeabed{
  background:
    radial-gradient(120px 80px at 35% 25%, rgba(80,220,255,.55), transparent 60%),
    linear-gradient(180deg, rgba(25,140,190,.65), rgba(10,60,120,.55)),
    linear-gradient(180deg, rgba(10,20,30,0), rgba(10,20,30,.45));
}
.thumbForest{
  background:
    radial-gradient(160px 90px at 55% 20%, rgba(255,255,255,.35), transparent 55%),
    linear-gradient(180deg, rgba(50,170,90,.75), rgba(12,70,30,.65));
}
.thumbTemp{
  background:
    radial-gradient(120px 80px at 40% 30%, rgba(255,210,90,.75), transparent 60%),
    linear-gradient(180deg, rgba(220,60,40,.85), rgba(120,20,20,.75));
}

.icon{
  width:62px;
  height:62px;
  opacity:.95;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}

.iconMuted{
  opacity:.55;
  filter:none;
}

@media (max-width: 1100px){
  .stageWrap{ width:62%; }
  .menu{ width:38%; }
}

.tile.is-active{
  border-color: rgba(120,220,255,.88);
  background: linear-gradient(180deg, rgba(120,220,255,.22), rgba(60,120,180,.14));
  box-shadow: 0 0 0 1px rgba(120,220,255,.35), 0 14px 30px rgba(0,0,0,.42);
}

.tile.is-active .tileTop{
  border-color: rgba(170,235,255,.9);
  box-shadow: inset 0 0 0 1px rgba(170,235,255,.22);
}

.tile.is-active .tileLabel{
  color: rgba(230,250,255,.98);
}

/* Remove button imagery while keeping button layout/behavior intact */
.tileTop .icon{
  display:none;
}

.thumbSeabed,
.thumbForest,
.thumbTemp{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}

/* Image thumbnails by button/action */
.tile[data-action] .tileTop{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.tile[data-action="none"] .tileTop{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.26)),
    url("../assets/earth/2k_earth_daymap.jpg");
  border-color: rgba(175,195,215,.32);
}

.tile[data-action="seabed2030"] .tileTop{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.26)),
    url("../assets/earth/seabed2023.jpg");
  border-color: rgba(95,210,245,.34);
}

.tile[data-action="globalforestwatch"] .tileTop{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.26)),
    url("../assets/earth/globalForestMap.jpg");
  border-color: rgba(130,220,155,.34);
}

.tile[data-action="climateTemperature"] .tileTop{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.24)),
    url("../assets/earth/temperature_adjusted.jpg");
  border-color: rgba(245,150,130,.34);
}

.tile[data-action="wind"] .tileTop{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.24)),
    url("../assets/earth/wind_adjusted.jpg");
  border-color: rgba(165,192,255,.34);
}

.tile[data-action="clouds"] .tileTop{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.22)),
    url("../assets/earth/clouds_adjusted.jpg");
  border-color: rgba(205,216,230,.32);
}

.tile[data-action="precipitation"] .tileTop{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.24)),
    url("../assets/earth/precipitation_adjusted.jpg");
  border-color: rgba(132,225,242,.34);
}

.tile[data-action="seaSurfaceTemperature"] .tileTop{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.24)),
    url("../assets/earth/seasurfacetemp_adjusted.jpg");
  border-color: rgba(100,226,232,.34);
}

.tile[data-action="urbanLights"] .tileTop{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.22)),
    url("../assets/earth/2k_earth_nightmap.jpg");
  border-color: rgba(245,214,140,.34);
}

.creditsToggle{
  position:absolute;
  left:16px;
  bottom:16px;
  z-index:3;
  font-family: "Manrope", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight:500;
  letter-spacing:.15px;
  border:1px solid rgba(160,210,235,.32);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(20,56,78,.78), rgba(10,28,44,.78));
  color:rgba(230,244,255,.95);
  padding:8px 12px;
  font-size:12px;
  cursor:pointer;
}

.creditsPanel{
  position:absolute;
  left:16px;
  bottom:56px;
  z-index:3;
  font-family: "Manrope", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  width:min(480px, calc(100% - 32px));
  max-height:42%;
  overflow:auto;
  display:none;
  border:1px solid rgba(180,220,255,.3);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(10,18,28,.92), rgba(8,14,22,.9));
  box-shadow:0 14px 34px rgba(0,0,0,.46);
  padding:12px 14px;
}

.creditsPanel.is-open{
  display:block;
}

.creditsTitle{
  font-size:13px;
  font-weight:700;
  color:rgba(230,246,255,.95);
  margin-bottom:8px;
}

.creditsNote{
  margin:0 0 8px 0;
  font-size:11px;
  color:rgba(196,214,228,.84);
}

.creditsList{
  margin:0;
  padding-left:18px;
  color:rgba(220,236,248,.88);
  font-size:12px;
  line-height:1.4;
}

.creditsList a{
  color:rgba(140,206,255,.98);
}