/* Screen tableau: zone and arena beside a compact base / upgrade column. */
main#board, #view-game { gap:12px; padding:16px; }
#view-game { grid-template-columns:minmax(0,1fr); }
#view-game > .match-timeline { grid-column:1; grid-row:auto; position:static; order:6; padding:12px 16px; }
.match-timeline summary { cursor:pointer; font-weight:700; }
.match-timeline[open] summary { margin-bottom:12px; }
#match-log { max-height:240px; }
#opponent-panel, #own-panel, .player-panel { padding:12px; gap:8px; }
.stats { flex-wrap:wrap; min-width:0; }
.battle-mat {
  grid-template-columns:80px 154px minmax(180px,1fr) 390px;
  grid-template-areas:"silo zone units command";
  min-width:900px; gap:10px; padding:16px;
}
.mat-command { grid-area:command; display:flex; flex-direction:column; gap:8px; min-width:0; }
.mat-command .mat-base { width:100%; justify-self:stretch; }
.mat-zone-area { padding:8px; min-width:0; }
.mat-zone-area h3 { margin:0 0 8px; }
.battle-mat .silo, #view-game .battle-mat .silo { width:80px; padding:8px 4px; }
.battle-mat .silo-scale, #view-game .battle-mat .silo-scale { min-height:200px; }
.battle-mat .slot-row, #view-game .battle-mat .slot-row { min-height:0; }
.mat-command .slot-row, #view-game .mat-command .slot-row {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
  overflow:visible; padding:0; align-items:stretch;
}
.mat-command .tcg-card, #view-game .mat-command .tcg-card { width:100%; min-width:0; margin:0; }
.mat-command .empty-upgrade-slot { min-width:0; min-height:54px; width:auto; }
/* Keep names, costs, effects and damage visible; omit decorative art in this column. */
.mat-command .tcg-art-frame, .mat-command .tcg-frame-footer { display:none; }
.mat-command .tcg-card .tcg-card-heading { min-height:36px; }
.mat-command .tcg-card .tcg-card-name { hyphens:auto; }
.mat-command .tcg-card .tcg-card-values { margin-top:5px; min-height:0; }
.mat-command .tcg-card .tcg-corner { min-height:30px; padding:4px; }
.mat-command .tcg-card .tcg-card-values .tcg-corner { flex-direction:row; gap:5px; }
.mat-command .tcg-card .tcg-corner b { font-size:20px; }
.mat-command .tcg-card.base-card .tcg-card-name { font-size:15px; }
.battle-mat .tcg-card .tcg-card-art, #view-game .battle-mat .tcg-card .tcg-card-art { height:52px; }
.battle-mat .board-row, #view-game .battle-mat .board-row { align-items:flex-start; min-height:100px; }
@media(max-width:1200px) {
  #opponent-panel, #own-panel { grid-template-columns:minmax(0,1fr); }
  #opponent-panel > .stats, #own-panel > .stats { justify-content:flex-start; }
}
@media(max-width:700px) {
  main#board, #view-game { padding:8px; }
  #opponent-panel, #own-panel, .player-panel { padding:8px; }
}