/* The main screen: header, office canvas, side panel, log. Wide windows fit everything on screen without scrolling;
   narrow ones stack it and scroll. */

header { flex: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between;
  padding: 0.6rem 1.25rem; background: var(--panel); border-bottom: 3px solid #d9453a; box-shadow: 0 1px 0 var(--gold), 0 6px 18px rgba(0,0,0,.25);
  background-image: radial-gradient(circle at 50% 100%, transparent 58%, rgba(255,255,255,.04) 60%, transparent 63%); background-size: 1.6rem 0.8rem; }
.stats { display: flex; gap: 1.25rem; color: var(--muted); }
.stats b { color: var(--text); font-size: 1rem; }
.controls, nav { display: flex; flex-wrap: wrap; gap: 0.375rem; }

#stage { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.375rem; padding: 0.75rem 1.25rem; }
#layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(17rem, 24vw, 32rem); gap: 0.875rem; }

/* The canvas is sized from JavaScript (office/painter.js) to the largest 3:2 box that fits #view. */
#view { position: relative; min-width: 0; min-height: 0; }
#screen { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
canvas { touch-action: none; cursor: pointer; display: block; width: 100%; height: 100%; image-rendering: pixelated; background: #000;
  border-radius: 0.5rem; box-shadow: 0 0 0 3px #d9453a, 0 0 0 5px var(--gold), 0 8px 24px rgba(0,0,0,.4); }
#prompt { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); background: rgba(0,0,0,.8);
  border: 1px solid var(--sakura); border-radius: 999px; padding: 0.375rem 0.9rem; white-space: nowrap; cursor: pointer; }
#prompt[hidden] { display: none; }

#side { min-height: 0; overflow-y: auto; }
#side h2 { margin-top: 0; }
#side h2:not(:first-child) { margin-top: 1rem; }
#youSelect { width: 100%; margin-top: 0.375rem; }

#help { flex: none; text-align: center; color: var(--muted); font-size: 0.75rem; }
#log { flex: none; background: var(--panel); border: 1px solid var(--line); border-radius: 0.75rem; padding: 0.375rem 0.75rem;
  height: 5.5rem; overflow-y: auto; font-size: 0.75rem; }
#log div { padding: 0.15rem 0; border-bottom: 1px solid var(--line); }
#log div:last-child { border: 0; }

/* Narrow windows: stack everything and let the page scroll. */
@media (max-width: 900px) {
  body { display: block; height: auto; overflow: auto; }
  #stage { display: block; }
  #layout { display: block; }
  #view { aspect-ratio: 3 / 2; width: 100%; }
  #side { margin-top: 0.75rem; overflow: visible; }
  #log { margin-top: 0.5rem; }
}

/* Phones */
@media (max-width: 600px) {
  header { padding: 0.5rem 0.6rem; gap: 0.4rem; }
  h1 { width: 100%; font-size: 1rem; }
  .stats { gap: 0.75rem; flex-wrap: wrap; }
  nav, .controls { width: 100%; }
  nav button, .controls button { padding: 0.4rem 0.55rem; flex: 1 1 auto; }
  #stage { padding: 0.5rem 0.6rem; }
  button.small { padding: 0.35rem 0.6rem; }
  #help { font-size: 0.7rem; }
}