/* Página da biblioteca offline — layout sem depender do Bootstrap CDN */

/* Mobile (< sm): 2 cards por linha; demais breakpoints iguais à listagem principal */
.offline-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 576px) {
    .offline-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) {
    .offline-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1400px) {
    .offline-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.offline-game-card {
    transition: border-color 0.2s ease;
}

.offline-game-card:hover {
    border-color: var(--gr-accent, #0d6efd) !important;
}

.offline-game-card .offline-cover {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: #161b22;
}

.offline-game-card .offline-console-badge {
    font-size: 0.65rem;
}

.offline-play-btn {
    font-size: 0.8rem;
}

/* Player offline */
.offline-player-wrapper {
    min-height: 420px;
}

.offline-player-canvas {
    min-height: 360px;
}

/* Utilitários mínimos para páginas estáticas offline */
.text-warning { color: #0d6efd; }
.text-secondary { color: #8b949e; }
.text-light { color: #e6edf3; }
.bg-dark { background: #0d1117; }
.bg-black { background: #000; }
.bg-secondary { background: #30363d; }
.border-secondary { border-color: #30363d !important; }
.rounded { border-radius: 0.375rem; }
.border { border: 1px solid #30363d; }
.badge { display: inline-block; padding: 0.25em 0.5em; font-size: 0.75rem; border-radius: 0.25rem; }
.bg-success { background: #238636; color: #fff; }
.bg-warning { background: #0d6efd; color: #fff; }
.btn { display: inline-block; padding: 0.375rem 0.75rem; border-radius: 0.375rem; border: 1px solid transparent; cursor: pointer; text-decoration: none; font-size: 0.875rem; }
.btn-warning { background: #0d6efd; color: #fff; border-color: #0d6efd; }
.btn-outline-danger { background: transparent; color: #f85149; border-color: #f85149; }
.btn-outline-light { background: transparent; color: #e6edf3; border-color: #e6edf3; }
.btn-outline-warning { background: transparent; color: #0d6efd; border-color: #0d6efd; }
.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
.btn-lg { padding: 0.5rem 1.5rem; font-size: 1.1rem; }
.card { background: #161b22; border: 1px solid #30363d; border-radius: 0.375rem; overflow: hidden; }
.card-img-top { width: 100%; display: block; }
.card-body { padding: 0.5rem; }
.card-title { margin: 0 0 0.5rem; font-size: 0.85rem; }
.d-flex { display: flex; }
.flex-grow-1 { flex-grow: 1; }
.flex-column { flex-direction: column; }
.gap-1 { gap: 0.25rem; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.top-0 { top: 0; }
.start-0 { left: 0; }
.end-0 { right: 0; }
.m-2 { margin: 0.5rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }
.text-center { text-align: center; }
.small { font-size: 0.875rem; }
.d-none { display: none !important; }
.alert-danger { background: #3d1214; color: #f85149; border: 1px solid #f85149; padding: 0.75rem; border-radius: 0.375rem; }