.layout { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 20px; align-items: start; }
.layout #board { grid-column: 1; grid-row: 1 / span 2; }
.layout .side { grid-column: 2; grid-row: 1; }
.layout .more { grid-column: 2; grid-row: 2; margin: 0; }
.tray { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tile b { font-size: .95rem; }
.tile.placed { background: #f0ead9; }
@media (max-width: 720px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .layout .side { grid-column: 1; grid-row: 1; }
  .layout #board { grid-column: 1; grid-row: 2; max-width: 440px; margin: 0 auto; }
  .layout .more { grid-column: 1; grid-row: 3; }
  .controls { margin: 6px 0; }
  .controls button { padding: 0 10px; }
  .status { min-height: 0; margin: 4px 0; padding: 5px 8px; font-size: .875rem; }
  .tile .where { display: none; }
  .tile svg { max-width: 52px; }
}