/* Standard-Layout: Die Arena füllt genau das Fenster (z. B. 13-Zoll-Laptop bei 100 % Zoom).
   Das Brett skaliert mit der verfügbaren Höhe, die Zugliste scrollt intern. */

@media (min-width: 1025px) and (min-height: 600px) {
  body.compact { height: 100dvh; overflow: hidden; }
  .compact .frame { height: calc(100dvh - 2 * var(--s-3)); margin: var(--s-3) auto; max-width: 1400px;
                    grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto minmax(0, 1fr); }
  .compact .stage { min-height: 0; }
  .compact .board-wrap { flex: 1; min-height: 0; padding: var(--s-2) var(--s-3); }
  .compact #board { height: 100%; width: auto; max-width: 100%; max-height: 100%; }
  .compact .side { min-height: 0; overflow: hidden; }
  .compact .panel--fill { flex: 1; min-height: 0; }
  .compact .panel--fill .moves { flex: 1; min-height: 0; max-height: none; align-content: start; }
}
@media (min-width: 1025px) and (max-width: 1432px) and (min-height: 600px) {
  .compact .frame { margin: var(--s-3); }
}

/* Schmale Kopfzeile: Titel und Untertitel in einer Zeile */
.compact .head { padding: var(--s-2) var(--s-3); align-items: center; }
.compact .head-title { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.compact .head .t-display { font-size: 28px; }

/* Werkzeugleiste über dem Brett */
.toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); flex-wrap: wrap;
           padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--c-line); }
.toolbar-group { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.toolbar .collapse { max-width: 46ch; }
.toolbar .collapse[open] { order: 2; flex-basis: 100%; }

.compact .readout { max-width: none; padding: 0 var(--s-3) var(--s-2); }

/* Dichtere Seitenspalte */
.compact .panel { padding: var(--s-3); gap: 12px; }
.compact .field { gap: 6px; }
.compact .value-row .t-value { font-size: 32px; }
.compact .gauge { max-height: 40px; }
.compact .statusbar .stat { padding: 10px var(--s-3); gap: 4px; }
.compact .moves { grid-template-columns: repeat(5, 1fr); }