.terrainDemoSection{
  border-bottom: 0;
}

.terrainBack{
  margin-top: 0;
}

.terrainShell{
  display: grid;
  grid-template-columns: minmax(250px, 320px) 1fr;
  gap: 1rem;
  align-items: stretch;
}

.terrainPanel{
  border: 1px solid rgba(233,233,239,0.18);
  border-radius: 14px;
  padding: 0.9rem;
  background: rgba(255,255,255,0.02);
}

.terrainPanel h2,
.terrainPanel h3{
  margin: 0.3rem 0 0.6rem;
}

.terrainControlRow{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.terrainControlRow strong{
  justify-self: end;
  font-size: 0.82rem;
  color: rgba(213,230,255,0.9);
}

.terrainControlRow input,
.terrainControlRow select,
.terrainPanel button{
  border-radius: 10px;
  border: 1px solid rgba(233,233,239,0.18);
  background: rgba(8,12,24,0.65);
  color: rgba(233,233,239,0.96);
  padding: 0.42rem 0.55rem;
  font: inherit;
}

.terrainPanel button{
  width: 100%;
  margin: 0.25rem 0;
  cursor: pointer;
}

.terrainPanel button:hover{
  background: rgba(58,123,253,0.18);
}

.terrainToggleRow{
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.2rem 0 0.55rem;
}

.terrainControlsHelp{
  border-top: 1px solid rgba(233,233,239,0.16);
  margin-top: 0.6rem;
  padding-top: 0.6rem;
}

.terrainControlsHelp p{
  margin: 0.2rem 0;
  font-size: 0.84rem;
}

.terrainHud{
  border-top: 1px solid rgba(233,233,239,0.16);
  margin-top: 0.65rem;
  padding-top: 0.6rem;
  display: grid;
  gap: 0.35rem;
}

.terrainHud > div{
  display: flex;
  justify-content: space-between;
  gap: 0.55rem;
  font-size: 0.86rem;
}

.terrainViewportWrap{
  position: relative;
  border: 1px solid rgba(233,233,239,0.18);
  border-radius: 14px;
  overflow: hidden;
  min-height: min(72vh, 700px);
  background: rgba(7,10,16,0.96);
}

.terrainViewport{
  width: 100%;
  height: 100%;
}

.terrainMobileControls{
  display: none;
}

@media (max-width: 980px){
  .terrainShell{
    grid-template-columns: 1fr;
  }

  .terrainViewportWrap{
    min-height: 58vh;
  }
}

@media (max-width: 820px){
  .terrainMobileControls{
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0.8rem;
    pointer-events: none;
    touch-action: none;
  }

  .terrainMobileSteer,
  .terrainMobileDrive{
    display: grid;
    gap: 0.5rem;
    pointer-events: auto;
  }

  .terrainMobileSteer{
    grid-template-columns: repeat(2, minmax(66px, 84px));
  }

  .terrainMobileDrive{
    grid-template-columns: 1fr;
    min-width: 104px;
  }

  .terrainMobileBtn{
    border: 1px solid rgba(233,233,239,0.34);
    border-radius: 12px;
    background: rgba(6,10,20,0.68);
    color: rgba(233,233,239,0.96);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.62rem 0.7rem;
    min-height: 45px;
    backdrop-filter: blur(2px);
    user-select: none;
  }

  .terrainMobileBtn:active,
  .terrainMobileBtn.isHeld{
    background: rgba(58,123,253,0.34);
    border-color: rgba(163,202,255,0.8);
  }

  .terrainMobileBtn--accent{
    background: rgba(58,123,253,0.26);
  }

  .terrainMobileBtn--warn{
    background: rgba(218,92,92,0.28);
  }
}