/* Layout for the adventure games. Colours and buttons come from arcade.css. */
main { flex: 1; display: flex; min-height: 0; }
#stage { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 10px; background: #000; }
#pic { width: 100%; max-width: 960px; height: auto; aspect-ratio: 8 / 5; image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; border: 2px solid #555; background: #000; cursor: crosshair; touch-action: manipulation; }
#side { width: 340px; flex: none; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--panel); min-height: 0; }
#msgs { flex: 1; overflow-y: auto; padding: 8px 12px; min-height: 120px; -webkit-overflow-scrolling: touch; }
#msgs p { margin: 0 0 8px; }
#msgs p.echo { color: var(--dim); margin-bottom: 2px; }
#f-cmd { display: flex; gap: 6px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); }
#f-cmd span { color: var(--accent); }
#cmd { flex: 1; min-width: 0; margin: 0; }
#panel { padding: 8px 12px 10px; border-top: 1px solid var(--line); }
#verbs, #inv { display: flex; flex-wrap: wrap; gap: 6px; }
#inv { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); min-height: 34px; }
#hint { color: var(--warn); min-height: 1.4em; margin-bottom: 4px; }
#s-score.flash { color: var(--accent); }
.dim { color: var(--dim); }
#dead-text, #win-text { font-size: 15px; }
#d-dead { border-color: var(--bad); }
#d-dead h2 { color: var(--bad); }
@media (max-width: 760px) {
  main { flex-direction: column; overflow-y: auto; }
  #stage { flex: none; padding: 4px; }
  #side { width: auto; flex: 1; border-left: 0; border-top: 1px solid var(--line); min-height: 0; }
  #msgs { min-height: 90px; max-height: 26vh; flex: none; }
  #verbs button { flex: 1 1 18%; min-height: 44px; padding: 4px 6px; }
  #topbar { flex-wrap: nowrap; gap: 8px; padding-bottom: 6px; }
  #topbar .brand { display: none; }
  #topbar .stat { white-space: nowrap; }
  #topbar .spacer { flex: 1; height: auto; }
  #s-room-wrap, #b-save, #b-load, #b-fx { display: none; } /* Effects is also in the help dialog */
  #topbar button { flex: none; padding: 4px 10px; }
  #inv button { min-height: 44px; }
  #f-cmd { position: sticky; bottom: 0; background: var(--panel); padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  #cmd { font-size: 16px; }
}