/* Responsive shell corrections shared by the four AI-crafted worlds. */

.overlay {
  z-index: 4;
}

.control-panel {
  min-height: 0;
  overflow-y: auto;
}

@media (min-width: 981px) {
  .world {
    height: calc(100dvh - 72px);
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .stage-wrap {
    min-height: 0;
  }

  /* Keep the WebGL drawing buffer out of grid intrinsic-size calculations. */
  .stage-wrap canvas {
    position: absolute;
    inset: 0;
  }
}

@media (min-width: 981px) and (max-height: 720px) {
  .world-copy {
    padding: 18px 3vw 16px;
  }

  .world-copy h1 {
    font-size: clamp(30px, 3vw, 44px);
  }

  .summary {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.45;
  }

  .original {
    font-size: 14px;
  }
}

@media (max-width: 620px) and (orientation: portrait) {
  .world-copy {
    padding: 18px 16px;
  }

  .world-copy h1 {
    font-size: 30px;
  }

  .original {
    margin-top: 4px;
    font-size: 13px;
  }

  .summary {
    margin: 12px 0 10px;
    font-size: 14px;
    line-height: 1.45;
  }

  .facts {
    gap: 5px;
  }

  .facts span {
    padding: 5px 7px;
    font-size: 10px;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 980px) {
  .topbar {
    height: 50px;
    padding: 0 16px;
  }

  .world {
    display: grid;
    height: calc(100dvh - 50px);
    min-height: 320px;
    grid-template-columns: minmax(0, 1fr) 230px;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .world-copy {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 8px 16px;
  }

  .world-copy .eyebrow {
    margin-bottom: 3px;
    font-size: 8px;
  }

  .world-copy h1 {
    font-size: 22px;
    letter-spacing: -.025em;
  }

  .world-copy .original,
  .world-copy .summary,
  .world-copy .facts {
    display: none;
  }

  .stage-wrap {
    height: auto;
    min-height: 0;
  }

  .stage-wrap canvas {
    position: absolute;
    inset: 0;
  }

  .control-panel {
    min-height: 0;
    overflow-y: auto;
    border-top: 0;
    border-left: 1px solid var(--line);
    padding: 12px 14px;
  }

  .control-panel .eyebrow {
    margin: 0 0 4px;
  }

  .control-panel h2 {
    margin: 0 0 8px;
    font-size: 18px;
  }

  .key-list > div {
    padding: 6px 0;
    font-size: 10px;
  }

  .key-list kbd {
    min-width: 58px;
    font-size: 9px;
  }

  .progress {
    margin: 10px 0;
  }

  .restart {
    padding: 8px 12px;
  }

  .provenance {
    display: none;
  }

  .touch-controls {
    z-index: 3;
    bottom: 8px;
    left: 8px;
    right: 8px;
  }

  .touch-controls button {
    height: 34px;
  }
}