:root {
  --scene-scale: 0.9;
  --scene-x: 0px;
  --scene-y: calc(6 * var(--vh, 1vh));
  --ground-scale: 1;
  --ground-width: 120vw;
  --ground-height: 100vh;
  --ui-left: 50%;
  --ui-top: clamp(70px, calc(var(--vh, 1vh) * 10), 120px);
  --ui-width: clamp(280px, 88vw, 480px);
  --ui-pad: 10px;
  --ui-gap: 6px;
  --ui-terminal-pad: 10px;
  --ui-terminal-font: clamp(8.5px, 2.6vw, 9.5px);
  --ui-terminal-line: 1.35;
  --ui-btn-gap: 6px;
  --ui-btn-h: 46px;
  --ui-btn-icon: 46px;
  --ui-btn-projects-min: 96px;
  --ui-btn-projects-max: 200px;
  --ui-btn-caps-min: 72px;
  --ui-btn-caps-max: 90px;
  --impact-width-factor: 2.6;
  --impact-height-ratio: 0.9;
  --impact-blur: 32;
  --impact-peak-opacity: 0.65;
  --monitor-x: 56vw;
  --monitor-y: calc(61 * var(--vh, 1vh));
  --monitor-size: min(128vmin, 1070px);
}

#ground-group {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--ground-width);
  height: var(--ground-height);
  transform: translate(-50%, 0) scale(var(--ground-scale));
  transform-origin: bottom center;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

.ui-panel {
  transform: translateX(-50%);
}

#orbital-left {
  position: fixed;
  left: -70vw;
  top: 22vh;
  width: 730px;
  height: 730px;
  z-index: 1;
  pointer-events: none;
  transform-origin: center;
}

#orbital-right {
  position: fixed;
  right: -105vw;
  top: -35vh;
  width: 730px;
  height: 730px;
  z-index: 1;
  pointer-events: none;
  transform-origin: center;
}

.ui-terminal {
  letter-spacing: 0.08em;
}

@media (max-width: 360px) and (orientation: portrait) {
  .ui-panel__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

.flip-btn:hover,
.flip-btn:active {
  transform: perspective(900px) rotateX(0deg);
}

.btn-terminal:hover .face,
.btn-terminal:active .face {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.28)),
    rgba(9,12,16,0.7);
  border-color: rgba(140, 210, 255, 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 0 14px rgba(90,170,255,0.16),
    0 10px 24px rgba(0,0,0,0.4);
}

.btn-terminal:hover,
.btn-terminal:active {
  --corner-color: rgba(140, 210, 255, 0.4);
}

.ui-copy--desktop {
  display: none;
}

.ui-copy--mobile {
  display: block;
}


#sky-lights-back {
  display: none;
}

#sky-lights-front {
  opacity: 1;
}

.fg-strip {
  height: 12vh;
}

.mg-strip {
  height: 12vh;
  bottom: 3vh;
}

.bg-strip {
  height: 14vh;
  bottom: 8vh;
}

#ground-fog {
  height: 28vh;
}

.impact {
  width: 200vw;
  height: 85vh;
  transform: translate(-50%, 25%) scale(1);
}

@media (orientation: landscape) {
  :root {
    --monitor-x: 60vw;
    --monitor-y: calc(58 * var(--vh, 1vh));
  }
}

@media (max-width: 360px) and (min-height: 820px) and (orientation: portrait) {
  :root {
    --ui-btn-projects-min: 130px;
    --ui-btn-projects-max: 260px;
    --ui-btn-caps-min: 52px;
    --ui-btn-caps-max: 64px;
  }
}

@media (min-width: 340px) and (max-width: 350px) and (min-height: 730px) and (max-height: 760px) and (orientation: portrait) {
  :root {
    --scene-y: calc(0 * var(--vh, 1vh));
    --monitor-y: calc(72 * var(--vh, 1vh));
    --monitor-size: min(133.5vmin, 486px);
    --ui-width: clamp(280px, 92vw, 480px);
    --ui-btn-projects-min: 150px;
    --ui-btn-projects-max: 280px;
    --ui-btn-caps-min: 44px;
    --ui-btn-caps-max: 52px;
  }
}

@media (min-width: 680px) and (max-width: 700px) and (min-height: 640px) and (max-height: 670px) and (orientation: landscape) {
  :root {
    --scene-y: calc(-4 * var(--vh, 1vh));
    --monitor-x: 58vw;
    --monitor-y: calc(72 * var(--vh, 1vh));
    --monitor-size: min(80vmin, 520px);
  }

  #orbital-left {
    left: -35vw;
  }

  #orbital-right {
    right: -55vw;
    top: -55vh;
  }
}

@media (min-width: 680px) and (max-width: 700px) and (min-height: 820px) and (max-height: 840px) and (orientation: portrait) {
  :root {
    --monitor-size: min(97.5vmin, 802px);
  }

  #orbital-right {
    right: -45vw;
  }

  #orbital-left {
    left: -40vw;
  }
}

@media (min-width: 420px) and (max-width: 440px) and (min-height: 760px) and (max-height: 790px) and (orientation: portrait) {
  :root {
    --scene-y: calc(2 * var(--vh, 1vh));
  }
}

@media (min-width: 380px) and (max-width: 390px) and (min-height: 690px) and (max-height: 705px) and (orientation: portrait) {
  :root {
    --scene-y: calc(2 * var(--vh, 1vh));
    --monitor-y: calc(64 * var(--vh, 1vh));
  }

  #orbital-right {
    top: -60vh;
  }
}