/* The stage is the first screen. The choices sit beside it on a desk and under it on a phone. */
body.yard main { max-width: none; padding-top: 8px; padding-bottom: 16px; }
.yard-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 24rem);
  gap: 0.6rem 1rem;
  align-items: start;
}
.yard-stage {
  position: relative;
  grid-column: 1;
  width: 100%;
  height: calc(100vh - 9.6rem);
  min-height: 280px;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
.yard-page:has(#yard-build:not([hidden])) .yard-stage { height: calc(100vh - 16rem); }
.yard-stage .earth-back { z-index: 0; }
.yard-stage canvas { position: relative; z-index: 1; width: 100%; height: 100%; display: block; background: transparent; }
.yard-build { grid-column: 1; }
.yard-side h1 { font-size: 1.35rem; margin: 0 0 0.25rem; }
.yard-side label.chips { display: grid; gap: 0.25rem; margin: 0 0 0.45rem; }
.yard-side select { min-height: 44px; max-width: 100%; font: inherit; }
.yard-side p { margin: 0 0 0.45rem; color: var(--muted); font-size: 0.9rem; }
.yard-side kazoku-view-controls {
  --kazoku-ink: var(--ink);
  --kazoku-surface: var(--surface);
  --kazoku-line: var(--rule);
  --kazoku-accent: var(--felt);
}
.yard-side { grid-column: 2; grid-row: 1 / span 2; }
.yard-build > p { margin: 0 0 0.25rem; }
@media (max-width: 820px) {
  .yard-page { grid-template-columns: minmax(0, 1fr); }
  .yard-stage, .yard-build, .yard-side { grid-column: 1; grid-row: auto; }
  .yard-stage { height: min(58vh, 520px); }
}