body {
  margin: 0; /* reset default 8px body margin (was causing a 16px vertical overflow) */
}

.lumber-app {
  min-height: 100dvh; /* dvh = mobile-safe viewport height (excludes browser chrome) */
  display: grid;
  place-items: center;
  background: #101722;
  color: #fff6e9;
  font-family: system-ui, sans-serif;
}

.lumber-stage {
  /* Fit the 9:16 portrait stage within BOTH viewport axes so it never overflows;
     cap at 420px wide. Height follows from aspect-ratio, so it's fully definite. */
  width: min(100vw - 2rem, (100dvh - 2rem) * 9 / 16, 420px);
  aspect-ratio: 9 / 16;
  display: grid;
  grid-template-rows: auto auto 1fr; /* hud, meter, then playfield takes the rest (definite height) */
  gap: 0.75rem;
  min-height: 0;
}

.lumber-playfield > .game-frame {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 246, 233, 0.18);
  background: #1a2230;
}

.lumber-playfield > .game-frame > canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.lumber-playfield {
  position: relative;
  min-height: 0; /* let the 1fr grid track govern height, not content */
}

.lumber-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 0.75rem;
  text-align: center;
  background: rgba(16, 23, 34, 0.45);
}

.lumber-overlay h1,
.lumber-overlay p {
  margin: 0;
}

.lumber-button {
  border: 0;
  background: #f4efe4;
  color: #1a2230;
  padding: 0.75rem 1rem;
  font: inherit;
}

.lumber-button--ghost {
  background: rgba(244, 239, 228, 0.14);
  color: #f4efe4;
  padding: 0.35rem 0.6rem;
  border: 1px solid rgba(244, 239, 228, 0.18);
}

.lumber-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  flex-wrap: wrap;
}

.lumber-meter {
  height: 0.5rem;
  border: 1px solid rgba(255, 246, 233, 0.2);
  background: rgba(255, 246, 233, 0.08);
  overflow: hidden;
}

.lumber-meter > span {
  display: block;
  height: 100%;
  background: #8ac926;
}