/* Topics, subtopics and levels (play-quiz.php). */

.topics-head { gap: var(--v-space-3); }
.topics-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--v-space-3) var(--v-space-6); }
.topics-head-text { display: grid; gap: 6px; min-width: 0; flex: 1 1 260px; }
.topics-head h1 { overflow-wrap: anywhere; }
.topics-head h1:focus { outline: none; box-shadow: none; }
.topics-lang { margin: 0; flex: 0 1 240px; min-width: 180px; }
.topics-lang label { font-size: 0.8125rem; color: var(--v-text-2); font-weight: 600; }
.v-crumbs button { min-height: 44px; }
.v-crumbs [aria-current] { overflow-wrap: anywhere; }

.topics-grid, .topics-sublist, .topics-levels { list-style: none; margin: 0; padding: 0; }
.topics-grid > li, .topics-levels > li { display: flex; min-width: 0; }
.topics-grid .v-topic { height: 100%; }
@media (min-width: 1200px) {
    .topics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .topics-sublist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v-space-3); }
}

.topics-level-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.topics-levels .v-level { height: 100%; }
.v-level.is-current { background: var(--v-tonal); }
.v-level.is-current .v-level-label { color: var(--v-primary); font-weight: 600; }
.v-level.is-locked:hover { transform: none; box-shadow: none; }

/* Guest browsing: sign-in prompt above the levels */
.topics-guest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-space-3) var(--v-space-4); margin-bottom: var(--v-space-4); background: var(--v-tonal); border-color: var(--v-primary-soft); }
.topics-guest .v-list-icon { background: var(--v-surface); }
.topics-guest-text { flex: 1 1 240px; min-width: 0; display: grid; gap: 4px; }
.topics-guest-text p { color: var(--v-text-2); font-size: 0.875rem; }
.topics-guest-actions { flex: 1 1 100%; }
.topics-guest-actions .v-btn { flex: 0 1 auto; min-height: 44px; }
@media (min-width: 768px) { .topics-guest-actions { flex: 0 0 auto; } }
@media (max-width: 479px) { .topics-guest .v-list-icon { display: none; } }
.v-level.is-guest .v-level-label { color: var(--v-primary); font-weight: 600; }