/* grid-cols extras
 * Ergänzt die fehlenden grid-cols Utilities + responsive Varianten für grid-cols,
 * die im gebündelten tailwind.css (Subset) fehlen.
 *
 * Falls der Bundled-CSS irgendwann durch ein vollständiges Tailwind-Build ersetzt
 * wird, kann diese Datei einfach gelöscht werden — die Klassen werden dann vom
 * Build übernommen.
 */
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (min-width: 640px) {
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* col-span utilities (basic + responsive) — fehlen im gebündelten tailwind.css */
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
@media (min-width: 768px) {
    .md\:col-span-1 { grid-column: span 1 / span 1; }
    .md\:col-span-2 { grid-column: span 2 / span 2; }
}
@media (min-width: 1024px) {
    .lg\:col-span-1 { grid-column: span 1 / span 1; }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
    .lg\:col-span-3 { grid-column: span 3 / span 3; }
}

/* align-self utilities — fehlen im gebündelten tailwind.css-Subset */
.self-start { align-self: start; }
.self-end { align-self: end; }
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }

/* Sticky Tabellen-Header in scrollbaren Containern (Admin Spiele-Tab) */
.admin-sticky-header thead th {
    position: sticky;
    top: 0;
    background: oklch(var(--b2));
    z-index: 1;
}

/* Cover-Thumbnail in der Cover-Spalte (Games-Tabelle) zentrieren */
.glp-cover-cell {
    text-align: center;
    vertical-align: middle;
    padding: 4px !important;
}
.glp-cover-cell > img,
.glp-cover-cell > span[role="img"] {
    display: inline-block;
    margin: 0 auto;
}

/* Admin-Tabellen (Spiele / Levels / Rooms) — fixed Layout, Spaltenbreiten
   werden ueber <colgroup> in admin.html gesetzt (decken Titel + typische
   Inhalte ab). Titel und Inhalt werden mit Ellipsis abgeschnitten, wenn der
   Container zu schmal wird. */
.admin-table-games table,
.admin-table-levels table,
.admin-table-rooms table {
    table-layout: fixed;
    width: 100%;
}
.admin-table-games th,
.admin-table-games td,
.admin-table-levels th,
.admin-table-levels td,
.admin-table-rooms th,
.admin-table-rooms td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Schmaler Status-/Icon-Container — Emoji zentriert, kein Badge-Padding. */
.admin-table-games .glp-status-cell,
.admin-table-levels .glp-status-cell {
    text-align: center;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* Ranglisten-Overview-Karten: Cover zentriert oben, Text darunter */
.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--fallback-b2, oklch(var(--b2)));
    border: 1px solid var(--fallback-b3, oklch(var(--b3)));
    border-radius: 8px;
    text-align: center;
    transition: background 0.15s, transform 0.15s;
}
.feature-item:hover {
    background: var(--fallback-b3, oklch(var(--b3)));
    transform: translateY(-1px);
}
.feature-item > img,
.feature-item > .icon {
    display: block;
    margin: 0 auto;
}
.feature-item .text {
    width: 100%;
    min-width: 0;
}
.feature-item .text strong {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 2px;
}
.feature-item .text small {
    display: block;
    font-size: 0.8rem;
    color: var(--fallback-bc, oklch(var(--bc) / 0.7));
    margin-top: 0;
    margin-bottom: 4px;
}
.feature-item .text > div:last-child {
    justify-content: center;
}