:root { --bg: #001100; --cell: #00ff00; --ui: #00cc00; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg); color: var(--cell); font-family: monospace;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#app { display: flex; width: 100vw; height: 100dvh; flex-direction: column; }
#canvas-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 8px; min-height: 0; min-width: 0;
}
canvas {
  border: 1px solid var(--ui); background: var(--bg); image-rendering: pixelated;
  touch-action: none; max-width: 100%; max-height: 100%;
}
#controls { border-top: 1px solid var(--ui); overflow-y: auto; padding: 12px; flex-shrink: 0; }
#controls.collapsed .control-body { display: none; }
.ctrl-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ctrl-head h1 { font-size: 14px; font-weight: bold; }
.stat { font-size: 11px; margin-bottom: 3px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.row { margin-bottom: 12px; }
label { display: block; font-size: 11px; margin-bottom: 4px; }
.hint { font-size: 11px; color: var(--ui); line-height: 1.5; }
button, select {
  width: 100%; padding: 8px; border: 1px solid var(--ui); background: var(--bg);
  color: var(--cell); font-family: monospace; font-size: 13px; cursor: pointer;
}
button:active { background: var(--ui); color: var(--bg); }
select { font-size: 12px; padding: 6px; }
input[type=range] { width: 100%; accent-color: var(--cell); }
@media (orientation: landscape) {
  #app { flex-direction: row; }
  #controls { width: 280px; border-top: none; border-left: 1px solid var(--ui); }
  #controls.collapsed .control-body { display: block; }
  .toggle-btn { display: none; }
}