#country-webgl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  touch-action: none;
}
.webgl-country #country-webgl {
  display: block;
}
.webgl-country #city {
  visibility: hidden;
}
.webgl-country #rotate-city {
  display: none !important;
}
#camera-tools {
  display: none;
  gap: 4px;
}
.webgl-country #camera-tools {
  display: inline-flex;
}
.city-heading > div:last-child {
  display: flex;
  gap: 5px;
}
.webgl-country .city-heading {
  background: #153b3bc9;
  backdrop-filter: blur(12px);
}
#webgl-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}
.webgl-country #webgl-labels {
  display: block;
}
/* Záber nad mestom po akcii (začína stavba, dokončená stavba, mesto rastie). Bez keyframes:
   zobrazí sa hneď, po 3,6 s prejde do .fade a JS ho o 4,2 s skryje. */
#city-flash {
  position: absolute;
  left: 50%;
  top: 66px;
  transform: translateX(-50%);
  padding: 7px 14px;
  border-radius: 999px;
  background: rgb(14 26 30 / 82%);
  border: 1px solid rgb(255 255 255 / 14%);
  color: #f3e9d2;
  font-size: 12px;
  letter-spacing: 0.03em;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.6s ease-out;
}
#city-flash.fade {
  opacity: 0;
}
#city-flash[data-kind='complete'] {
  border-color: #73d9b7;
}
#city-flash[data-kind='construction'] {
  border-color: #edbd68;
}
#city-flash[data-kind='grow'] {
  border-color: #9ad0f5;
}
.parcel-3d {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: auto;
  padding: 5px 9px;
  border-radius: 14px;
  background: #153b3bd9;
  border: 1px solid #e5d6a38c;
  color: #f7df99;
  box-shadow: 0 3px 12px #13292344;
  font-size: 12px;
  min-width: 28px;
}
.parcel-3d:hover {
  background: #e6c77d;
  color: #253d34;
}
.parcel-3d[hidden] {
  display: none;
}
.desk-empty .workspace {
  grid-template-columns: 1fr;
}
.desk-empty .workspace > .decision-panel {
  display: none;
}
.webgl-country #city-caption {
  background: #193e3980;
  color: #f0eed2;
}
.webgl-country .country-bubbles {
  top: 66px;
}
.webgl-country #city-build {
  display: none;
}
.webgl-country {
  background: #b9d5dc;
}
@media (max-width: 700px) {
  #camera-tools button {
    font-size: 9px;
    padding: 5px;
  }
  #camera-mountains {
    display: none;
  }
  .webgl-country .city-heading h2 {
    font-size: 12px;
  }
  .webgl-country .country-bubbles {
    top: 48px;
  }
  .parcel-3d {
    font-size: 10px;
    padding: 4px 7px;
  }
}
.webgl-country .city-heading {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.webgl-country .city-heading h2 {
  font-size: 13px;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.webgl-country .city-heading > div:last-child {
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
}
#camera-tools {
  flex-wrap: wrap;
  justify-content: flex-end;
}
#city-preview-level {
  font-size: 10px;
  background: #214c4b;
  border: 1px solid #809c8e;
  border-radius: 5px;
  padding: 4px 6px;
  color: #e6e3cf;
  max-width: 132px;
}
#showcase-toggle.active {
  background: #c4ab6c;
  color: #243c35;
  border-color: #c4ab6c;
}
.webgl-country .country-bubbles {
  top: 88px;
  max-width: 170px;
}
@media (max-width: 700px) {
  .webgl-country .city-heading > div:last-child {
    flex-basis: 100%;
  }
  .webgl-country .city-heading h2 {
    max-width: 290px;
  }
  .webgl-country .country-bubbles {
    top: 104px;
    max-width: 122px;
  }
  #city-preview-level {
    max-width: 115px;
    font-size: 9px;
  }
  #camera-tools {
    gap: 3px;
  }
  #camera-tools button {
    font-size: 8px;
    padding: 4px;
  }
  #camera-home {
    display: none;
  }
  .webgl-country .scene-offer {
    padding: 4px;
  }
}
#landmark-select {
  font-size: 10px;
  background: #214c4b;
  border: 1px solid #809c8e;
  border-radius: 5px;
  padding: 4px 6px;
  color: #e6e3cf;
  max-width: 145px;
}
#landmark-select:disabled {
  opacity: 0.45;
}
@media (max-width: 700px) {
  #landmark-select {
    font-size: 9px;
    max-width: 137px;
  }
  .webgl-country .country-bubbles {
    top: 125px;
  }
}
#crowd-status {
  position: absolute;
  bottom: 42px;
  left: 12px;
  z-index: 5;
  padding: 7px 10px;
  background: #193e3ee8;
  border: 1px solid #b4bca0;
  color: #ebeedb;
  border-radius: 16px;
  font-size: 11px;
}
#crowd-status[data-mood='angry'] {
  border-color: #e57e6c;
  color: #ffd4c8;
}
#crowd-status[data-mood='support'] {
  border-color: #7ed1ac;
  color: #bdf1d4;
}
#mood-preview {
  max-width: 158px;
}
@media (max-width: 600px) {
  .webgl-country .scene-offers {
    top: 155px;
  }
  #crowd-status {
    font-size: 10px;
    bottom: 47px;
    max-width: calc(100% - 24px);
  }
}

#mood-preview {
  font-size: 10px;
  background: #214c4b;
  border: 1px solid #809c8e;
  border-radius: 5px;
  padding: 4px 6px;
  color: #e6e3cf;
}
@media (max-width: 700px) {
  .webgl-country .country-bubbles {
    top: 155px;
  }
  #mood-preview {
    font-size: 9px;
    max-width: 137px;
  }
}

#country-webgl {
  cursor: grab;
}
#country-webgl.dragging {
  cursor: grabbing;
}
.film-dialog {
  width: min(1200px, 96vw) !important;
  max-width: 96vw !important;
  padding: 12px !important;
  background: #14242c !important;
}
.film-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
  gap: 12px;
}
.film-top small {
  display: block;
  font-size: 10px;
  color: #a3b7bc;
  margin-top: 3px;
}
.film-top button {
  font-size: 11px;
}
.film-dialog #strike-stage {
  height: min(72dvh, 750px);
  min-height: 280px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #91b0bd;
}
#strike-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.film-caption {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  font-size: 14px;
  color: #edf0db;
  background: #172d35d9;
  padding: 10px 14px;
  border-radius: 8px;
  max-width: 80%;
}
.film-controls {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  background: #142a35dd;
  padding: 9px;
  border-radius: 9px;
}
.film-controls button {
  font-size: 11px;
  padding: 7px 10px;
}
.film-controls progress {
  width: 100%;
  height: 3px;
  accent-color: #e0a45e;
}

#health-map-pin {
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: 43px;
  border: 1px solid #c8db73;
  border-radius: 16px;
  background: #35492aeb;
  color: #e9f2b6;
  padding: 8px 12px;
  font-size: 11px;
}
#health-map-pin[hidden] {
  display: none;
}
.health-panel p {
  font-size: 12px;
}
.health-panel small {
  display: block;
  color: #bbcbbb;
  font-size: 10px;
  margin-top: 8px;
}
.health-panel .inline-actions {
  flex-wrap: wrap;
}

#connected-earth {
  position: absolute;
  inset: 0;
  z-index: 24;
  background: #07141f;
  overflow: hidden;
  border-radius: 8px;
  min-height: 320px;
}
#connected-earth[hidden] {
  display: none;
}
#connected-earth canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
.earth-heading {
  position: absolute;
  top: 12px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}
.earth-heading h2 {
  margin: 3px 0;
  color: #f4e4c2;
}
.earth-heading small {
  color: #7ec6d0;
  letter-spacing: 2px;
}
.earth-heading button {
  pointer-events: auto;
  background: #173540dd;
}
.earth-info {
  position: absolute;
  bottom: 48px;
  left: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  max-width: calc(100% - 32px);
  background: #102c38ed;
  border: 1px solid #47717b;
  padding: 12px;
  border-radius: 12px;
}
.earth-info strong {
  color: #f0ce8e;
}
.earth-info span {
  font-size: 11px;
  color: #9cc2c8;
}
.earth-info button {
  background: #d9b874;
  color: #132e37;
}
.earth-info select {
  max-width: 150px;
  background: #16313c;
  color: #edf1de;
}
.earth-caption {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  text-align: center;
  color: #9dc0c7;
  font-size: 11px;
  pointer-events: none;
}
.globe-mode > .city-heading,
.globe-mode > #webgl-labels,
.globe-mode > #country-bubbles,
.globe-mode > #crowd-status,
.globe-mode > #health-map-pin {
  visibility: hidden;
}
@media (max-width: 700px) {
  .earth-info {
    bottom: 55px;
    padding: 8px;
    gap: 6px;
  }
  .earth-info span {
    display: none;
  }
  .earth-heading h2 {
    font-size: 16px;
  }
}