body.is-play .topbar,
body.is-play .dock { display: none; }

body.is-play .stage {
  margin-left: 0;
  padding: 0;
  overflow: hidden;
}

.play-screen {
  height: 100%;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px calc(8px + var(--safe-bottom));
}

.hud, .hud-copy, .hud-meters, .goal-strip, .hint-line { min-width: 0; }

.hud {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hud-copy { display: grid; flex: 1 1 auto; }
.hud-copy strong, .goal-strip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hint-line { white-space: normal; }
.hud-copy span, .goal-strip, .hint-line { color: var(--muted); font-size: 0.86rem; }
.hud-meters { display: flex; gap: 8px; flex: 0 1 auto; }
.hud-meters span { background: rgba(0,0,0,0.35); border-radius: 999px; padding: 4px 8px; }

.goal-strip, .hint-line { margin: 0; }

.board-wrap {
  position: relative;
  flex: 1 1 0;
  min-height: 140px;
  min-width: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid var(--line);
  background: #100e0c;
}

.board-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  max-width: 100%;
  touch-action: manipulation;
}

.tool-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 8px;
  min-width: 0;
}

.lamp-btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 6px;
  align-items: center;
  text-align: left;
  min-height: 52px;
}

.lamp-btn span { line-height: 1.05; }
.lamp-btn small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lamp-btn small { grid-column: 2; color: inherit; opacity: 0.8; }
.lamp-btn.is-stop { background: linear-gradient(#ff8d84, var(--red) 50%, #8d1c16); color: #2a0806; box-shadow: inset 0 2px 0 rgba(255,255,255,0.4), 0 4px 0 #5c100c; }
.lamp-btn.is-go { background: linear-gradient(#8cf58a, var(--green) 50%, var(--green-deep)); }
.lamp-btn.is-hold { background: linear-gradient(#ffe58a, var(--gold) 48%, #c48410); color: #2a1c08; box-shadow: inset 0 2px 0 rgba(255,255,255,0.55), 0 4px 0 #6d4a08; }

.mini-tools { grid-column: 1 / -1; display: flex; gap: 8px; }
.text-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 40px; padding: 8px; }

.win-body { display: grid; justify-items: center; gap: 6px; text-align: center; }
.score-pop { font-family: var(--display); font-size: 2rem; color: var(--gold); }

@media (max-height: 640px) {
  .hint-line { display: none; }
  .play-screen { gap: 4px; padding-top: 4px; }
  .lamp-btn { min-height: 44px; padding: 8px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .play-screen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "hud tools"
      "goal tools"
      "board tools";
  }
  .hud { grid-area: hud; }
  .goal-strip { grid-area: goal; }
  .hint-line { display: none; }
  .board-wrap { grid-area: board; }
  .tool-row { grid-area: tools; align-content: end; }
}

@media (max-width: 350px) {
  .hud-meters span:last-child { display: none; }
  .tool-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}