/* Tour screens. Layout only: colours, borders and fonts still come from the skin. */

/* Train tab: the four stats are tiles in one line, so the racket and every stat
   are on screen together above the tab bar (no scrolling on a 440x956 phone). */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.stat-grid .row { flex-direction: column; align-items: stretch; gap: 4px; min-height: 0; padding: 8px 6px 6px; text-align: center; }
.stat-grid .row-icon { align-self: center; width: 40px; height: 40px; }
.stat-grid .row-icon .spr { width: 32px; height: 32px; }
.stat-grid .row-main { flex: none; }
.stat-grid .row-title { overflow: visible; }
.stat-grid .row-sub { margin-top: 1px; font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-grid .btn { min-width: 0; padding: 5px 2px; }
.stat-grid .btn-label { font-size: var(--fs-xs); }
/* Narrow phones: two tiles a line (the list scrolls there). */
@media (max-width: 400px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }