/* Home dashboard (index.php). */

.home-head { padding-bottom: var(--v-space-4); }
.home-skel-num { display: inline-block; width: 2.2em; height: .9em; vertical-align: middle; }
#homeStats .v-stat-label { flex-wrap: wrap; text-align: center; line-height: 1.25; }
#homeStats .v-alert { align-items: center; flex-wrap: wrap; }
.home-alert-text { flex: 1 1 180px; }

/* Topic tiles render as list items. */
.home-topics { list-style: none; margin: 0; padding: 0; }
.home-topics > li { display: flex; min-width: 0; }
.home-topics .v-topic { width: 100%; }

/* Play your way: column count follows how many modes the server enables. */
@media (max-width: 559px) {
    .home-modes[data-count="4"], .home-modes[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-modes[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
    .v-modes-compact .v-mode-title { overflow-wrap: anywhere; }
}
@media (min-width: 560px) {
    .home-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .home-modes[data-count="3"], .home-modes[data-count="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Battles row; the app card only shows where the sidebar badges are hidden. */
.home-battles { grid-template-columns: minmax(0, 1fr); }
.v-battle > .ic { color: var(--v-text-3); }
.home-app { display: grid; gap: var(--v-space-3); }
.home-app .v-store-badges { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.home-app .v-store-badge { min-height: 48px; }
@media (min-width: 768px) {
    .home-battles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .home-app { display: none; }
    .home-battles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}