.play-shell {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
}

.play-hud, .play-meters, .play-title { min-width: 0; }
.play-title { flex: 1 1 auto; }

.play-hud {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.play-title h2 {
  font-size: clamp(1.2rem, 4.5vw, 1.7rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.play-meters { display: flex; gap: 6px; flex: 0 0 auto; }

.meter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(7, 30, 56, 0.72);
  border: 2px solid var(--line);
}

.goal-strip, .play-tip {
  color: #12325a;
  background: rgba(255, 244, 214, 0.92);
  border-radius: 12px;
  padding: 6px 8px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.board-wrap {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
}

.board-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
  touch-action: none;
}

.play-controls { display: grid; gap: 6px; min-width: 0; }

.crane-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.crane-pad {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(7, 30, 56, 0.72);
  border: 2px solid rgba(255, 224, 138, 0.35);
}

.crane-pad.is-selected { border-color: var(--primary); box-shadow: inset 0 0 0 2px rgba(255, 196, 0, 0.45); }

.crane-select, .aim-btn, .tool-btn {
  border: 2px solid rgba(255, 224, 138, 0.45);
  background: #12325c;
  color: var(--text);
  border-radius: 12px;
}

.crane-select { min-height: 36px; }

.aim-row { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }

.aim-btn {
  width: 36px;
  height: 36px;
  padding: 0;
}

.aim-btn.is-aimed {
  background: linear-gradient(#ffe56a, #ffc400);
  color: #3a2500;
  border-color: #fff6c8;
}

.drop-btn { width: 100%; min-height: 40px; }

.play-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }

.tool-btn {
  min-width: 0;
  min-height: 48px;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 4px;
  font-size: 0.72rem;
}

.tool-btn span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.belt { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

.belt-piece {
  min-width: 0;
  display: grid;
  padding: 4px 8px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  background: #ff7a32;
  color: #3a2500;
}

.belt-piece small, .belt-piece b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.belt-piece.is-front { outline: 3px solid #fff6c8; }
.belt-piece.is-seal { box-shadow: inset 0 0 0 2px #fff6c8; }
.belt-piece.kind-1 { background: #3aa0ff; color: #071e38; }
.belt-piece.kind-2 { background: #2ed9a8; color: #06281f; }
.belt-piece.kind-3 { background: #ff5b8a; color: #3a1020; }
.belt-piece.kind-5 { background: #ffd24a; color: #3a2500; }

.win-body { display: grid; gap: 6px; justify-items: start; }
.score-pop { font-size: 1.8rem; color: var(--highlight); }
.locked-panel { display: grid; gap: 8px; margin: auto; }

@media (max-height: 640px) {
  .play-tip { display: none; }
  .belt-piece small { display: none; }
  .goal-strip { -webkit-line-clamp: 1; }
}

@media (max-width: 350px) {
  .tool-btn span { display: none; }
  .crane-select { font-size: 0.85rem; }
  .play-meters .meter span { display: none; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .play-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(168px, 42%);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "hud controls"
      "board controls"
      "belt belt";
    gap: 6px;
  }

  .play-hud { grid-area: hud; }
  .goal-strip, .play-tip { display: none; }
  .board-wrap { grid-area: board; min-height: 120px; }
  .play-controls { grid-area: controls; align-content: start; }
  .belt { grid-area: belt; }
  .crane-row { grid-template-columns: minmax(0, 1fr); }
}