/* AgentScape page shell. Everything inside the panel is Beautiful UI; these rules only lay out
   the header, the game stage and the panel column, using Beautiful UI's tokens (--page,
   --canvas, --line, …) so the shell matches the harness. */
html, body, #root { height: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); overflow: hidden; }

.shell { display: grid; grid-template-rows: 44px minmax(0, 1fr); height: 100%; }
.shell-header { display: flex; align-items: center; gap: 14px; padding: 0 16px; }
.shell-main { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 8px; padding: 0 8px 8px; min-height: 0; }
.shell-card { background: var(--canvas); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; min-height: 0; }

.stage { position: relative; height: 100%; background: #000; }
.stage canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.stage-waiting { position: absolute; inset: 0; display: grid; place-items: center; background: var(--canvas); padding: 16px; }

@media (max-width: 900px) {
  body { overflow: auto; }
  .shell { height: auto; min-height: 100%; }
  .shell-main { grid-template-columns: minmax(0, 1fr); }
  .shell-stage { height: 56vw; max-height: 60vh; }
  .shell-panel { height: auto; }
}