/* Game of life: full-screen board, chrome from the shared --lab-* tokens. */
html, body { overflow: hidden; background: #000; }

#life-canvas {
  position: fixed; inset: 0; display: block;
  width: 100vw; height: 100vh;
  touch-action: none; cursor: crosshair; background: #000;
}
#life-canvas.is-panning { cursor: grabbing; }

#life-bar {
  position: fixed; z-index: 20; top: 8px; left: 8px; right: auto;
  max-width: calc(100vw - 16px); box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font: var(--lab-font-size)/1.3 var(--lab-font);
  user-select: none;
}
#life-bar .lab-button { padding: 0 10px; }
#life-bar .life-help { width: var(--lab-control-h); padding: 0; }
.life-speed { display: inline-flex; align-items: center; gap: 6px; margin: 0 4px; }
.life-speed input { width: 90px; }
.life-speed output { min-width: 3.2em; color: var(--lab-ink); font-family: var(--lab-mono); }
.life-stats { color: var(--lab-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.life-stats b { color: var(--lab-ink); font-family: var(--lab-mono); font-weight: 400; }

#life-hint {
  position: fixed; z-index: 20; left: 50%; bottom: 44px; transform: translateX(-50%);
  width: max-content; max-width: min(780px, calc(100vw - 16px));
  padding-right: 36px; box-sizing: border-box;
  font: var(--lab-font-size)/1.5 var(--lab-font);
}
#life-hint[hidden] { display: none; }
#life-hint p + p { margin-top: 4px; }
#life-hint b { color: var(--lab-ink); }
#life-hint kbd {
  display: inline-block; min-width: 1.4em; padding: 0 4px; border-radius: 4px;
  background: var(--lab-panel-2); color: var(--lab-ink); text-align: center; font-size: 12px;
}
#life-hint .life-hint-note { color: var(--lab-dim); }
.life-hint-close {
  position: absolute; top: 6px; right: 6px;
  width: 24px; min-height: 24px; height: 24px; padding: 0; line-height: 1;
  background: transparent; color: var(--lab-muted); font-size: 18px;
}
.life-hint-close:hover { color: var(--lab-ink); }

@media (max-width: 600px) {
  .life-speed input { width: 70px; }
  #life-hint { bottom: 40px; }
}