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

.hud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.hud h1 {
  font-size: clamp(18px, 5vw, 28px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-stats { display: flex; gap: 10px; color: var(--highlight); font-size: 13px; }
.hud-stats span { white-space: nowrap; }

.goal-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }

.hint-line {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.board-wrap {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 30%),
    rgba(8, 7, 16, 0.55);
  border: 1px solid var(--line);
}

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

.tray {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.piece {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 4px 2px 6px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(12, 12, 24, 0.8);
}

.piece span, .piece b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.piece b { color: var(--highlight); }
.piece.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.piece.is-used { opacity: 0.35; }
.piece-glyph { width: 42px; height: 42px; }

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

.tool {
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(12, 12, 24, 0.8);
}

.tool span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.drag-ghost {
  position: fixed;
  z-index: 20;
  width: 56px;
  height: 56px;
  pointer-events: none;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.4));
}

.win-body { display: grid; justify-items: center; gap: 8px; }
.win-score { font-size: 42px; color: var(--highlight); }

@media (max-height: 640px) {
  .hint-line { display: none; }
  .piece-glyph { width: 34px; height: 34px; }
  .hud h1 { font-size: 16px; }
}

@media (max-width: 380px) {
  .piece-glyph { width: 28px; height: 28px; }
  .tool span, .piece span { display: none; }
  .hud-stats { display: none; }
}

@media (orientation: landscape) and (max-height: 520px), (max-height: 520px) and (min-width: 640px) {
  .play-screen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 210px);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    column-gap: 8px;
  }
  .board-wrap { grid-column: 1; grid-row: 1 / span 4; }
  .hud { grid-column: 2; grid-row: 1; grid-template-columns: minmax(0, 1fr) auto; }
  .goal-strip { grid-column: 2; grid-row: 2; grid-template-columns: minmax(0, 1fr); }
  .hint-line { display: none; }
  .tray { grid-column: 2; grid-row: 3; flex-direction: column; overflow: auto; }
  .tools { grid-column: 2; grid-row: 4; }
  .piece { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .piece span { display: block; }
}