/* ===================================================================
   MARIO ADVENTURE — Galería de Personajes (chrome de la página)
   Los sprites de los personajes viven en characters.css
   =================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    color: #fff;
    min-height: 100vh;
    background:
        radial-gradient(circle at 20% 0%, rgba(92,148,252,.35), transparent 45%),
        radial-gradient(circle at 80% 10%, rgba(255,160,40,.18), transparent 40%),
        linear-gradient(180deg, #16213e 0%, #0f1424 60%, #0a0d18 100%);
    padding: 64px 16px 48px;
    overflow-x: hidden;
}

/* Nubes de fondo (pixel-clouds) */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(closest-side, rgba(255,255,255,.10) 98%, transparent) ,
        radial-gradient(closest-side, rgba(255,255,255,.07) 98%, transparent);
    background-size: 180px 70px, 120px 50px;
    background-position: 12% 18%, 76% 30%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}

.back-home {
    position: fixed;
    top: 14px; left: 14px;
    z-index: 50;
    text-decoration: none;
    color: #fff;
    background: rgba(0,0,0,.45);
    border: 2px solid #ffcc00;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 14px;
    transition: transform .15s, background .15s;
}
.back-home:hover { transform: scale(1.06); background: #e52521; }

/* Botón para ir a jugar */
.to-game {
    position: fixed;
    top: 14px; right: 14px;
    z-index: 50;
    text-decoration: none;
    color: #2b0606;
    background: #ffcc00;
    border: 2px solid #fff;
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 4px 0 #b58c00;
    transition: transform .12s;
}
.to-game:hover { transform: translateY(-2px); }
.to-game:active { transform: translateY(2px); box-shadow: 0 1px 0 #b58c00; }

/* ---------- Cabecera ---------- */
.ma-header { text-align: center; position: relative; z-index: 1; margin-bottom: 36px; }

.ma-title {
    font-size: clamp(34px, 8vw, 68px);
    letter-spacing: 3px;
    color: #e52521;                 /* rojo Mario */
    text-shadow:
        3px 3px 0 #7a0f0f,
        -2px -2px 0 #ff7a55,
        0 0 22px rgba(255,80,40,.5);
    -webkit-text-stroke: 2px #2b0606;
    animation: titlePop 3s ease-in-out infinite;
}
@keyframes titlePop { 0%,100%{ transform: scale(1) } 50%{ transform: scale(1.04) } }

.ma-subtitle {
    margin-top: 8px;
    font-size: clamp(14px, 3vw, 22px);
    color: #ffcc00;
    letter-spacing: 4px;
    text-shadow: 2px 2px 0 #8a6d00;
}
.ma-note { margin-top: 6px; font-size: 13px; color: #b9c2dd; }

/* ---------- Grilla de personajes ---------- */
.cast {
    position: relative; z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 22px;
}

.char-card {
    background: linear-gradient(160deg, rgba(40,48,84,.9), rgba(20,24,46,.95));
    border: 3px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: 18px 16px 22px;
    text-align: center;
    box-shadow: 0 10px 26px rgba(0,0,0,.45);
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.char-card:hover {
    transform: translateY(-6px);
    border-color: #ffcc00;
    box-shadow: 0 16px 36px rgba(0,0,0,.6), 0 0 24px rgba(255,180,40,.25);
}

/* Escenario (suelo de ladrillos) donde se para el personaje */
.stage {
    position: relative;
    height: 220px;
    margin-bottom: 14px;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(92,148,252,.25) 0%, rgba(92,148,252,.05) 55%, transparent 70%);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
/* Piso de ladrillos estilo Mario */
.stage::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 26px;
    background:
        repeating-linear-gradient(90deg, #8a4b1e 0 30px, #6e3a14 30px 32px),
        #8a4b1e;
    border-top: 3px solid #c46a2e;
    box-shadow: inset 0 4px 0 rgba(255,255,255,.12);
}

/* Espaciado de los sprites dentro de la galería */
.stage .char { margin-bottom: 26px; }

.char-name { font-size: 19px; color: #fff; text-shadow: 1px 1px 0 #000; }
.char-alias { font-size: 13px; color: #ffcc00; margin: 2px 0 8px; font-weight: bold; }
.char-desc  { font-size: 12.5px; color: #c3cae0; line-height: 1.45; }

/* ---------- Pie de página ---------- */
.ma-footer { position: relative; z-index: 1; text-align: center; margin-top: 42px; color: #aab3d0; font-size: 13px; }
.ma-footer strong { color: #ffcc00; }
.ma-soon { margin-top: 8px; color: #7fd3ff; font-weight: bold; letter-spacing: 1px; }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
    body { padding-top: 58px; }
    .cast { gap: 16px; }
    .stage { height: 200px; }
}