@media (max-width: 1200px) {
  .lesson-layout {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .work-area {
    order: 1;
  }

  .task-panel {
    order: 2;
  }

  .vocab-panel {
    order: 3;
  }

  .work-area {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .room-stage-wrap {
    padding: 0;
    width: 100%;
  }

  .object-tray {
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  }

  .object-panel {
    max-height: 340px;
  }

  .room-stage {
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 800;
    min-height: 0;
    border-width: 1px;
  }
}

@media (max-width: 560px) {
  .lesson-shell {
    padding: 12px;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .lesson-header h1 {
    font-size: 34px;
  }

  .instruction-text {
    font-size: 18px;
  }

  .sound-actions,
  .task-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

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

  .object-tray {
    grid-template-columns: 1fr;
  }

  .object-panel {
    max-height: 300px;
  }

  .object-card {
    min-height: 66px;
  }
}

@media (max-width: 430px) {
  .lesson-shell {
    padding: 10px;
  }

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

  .placed-object {
    width: calc(var(--object-size, 82px) * .82);
    height: calc(var(--object-size, 82px) * .82);
  }
}