:root{
    --bg:#0f1724;       /* fondo principal */
    --card:#111827;     /* color tarjetas */
    --muted:#9ca3af;    /* texto secundario */
    --accent:#ff6b6b;   /* acento */
}

body{
    background: linear-gradient(180deg,var(--bg), #071029 120%);
    color:#e5e7eb;
    min-height:100vh;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    padding-bottom:4rem;
}

/* Cabecera */
.site-header{
    background: linear-gradient(90deg, rgba(255,107,107,0.06), rgba(99,102,241,0.04));
    border-radius: .75rem;
    padding:1rem;
}

.logo-lata{
    width:64px;height:64px;display:inline-flex;align-items:center;justify-content:center;
}

/* Grid de portadas */
.game-card{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border:1px solid rgba(255,255,255,0.04);
    border-radius:.6rem;
    overflow:hidden;
    transition: transform .12s ease, box-shadow .12s ease;
}
.game-card:hover{ transform: translateY(-6px); box-shadow: 0 14px 30px rgba(2,6,23,.6); }

.cover{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
    display:block; width:100%; height:0; padding-bottom:100%; /* cuadrado */
    position:relative;
}
.cover img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}

.card-body { padding: .75rem; }
.game-title { font-weight:700; font-size:1rem; letter-spacing:.4px; margin-bottom:.25rem; color:#f8fafc; }
.game-desc { font-size:.86rem; color:var(--muted); min-height:2.6rem; }

/* Botones */
.btn-play { background: linear-gradient(90deg,var(--accent), #f97316); color:#fff; border:0; }
.btn-play:hover{ filter:brightness(.95); }

/* Footer / ayuda */
.help-card{
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
    border:1px solid rgba(255,255,255,0.03);
    border-radius:.6rem;
    padding:1rem;
    color:var(--muted);
}

#aviso-legal, #legalModalLabel {
    color: #444444;
}

/* Utilities */
.btn-sm-long { padding-left:1.5rem; padding-right:1.5rem; }
.muted { color:var(--muted); }
@media (max-width:575px){
    .game-title{ font-size:.95rem; }
}