/* ============================================================
   MIZU LEGENDS - ÁLBUM DE COLECCIÓN (CSS CORE)
   Colores: Blanco, Negro, Dorado, Azul Eléctrico
   ============================================================ */

/* css/style.css */
:root {
    --bg-dark: #0A0A0A;
    --bg-panel: #141414;
    --blue-neon: #0033FF;
    --gold-premium: #D4AF37;
    --text-main: #FFFFFF;
    --text-muted: #A0A0A0;
    --sticker-empty: #2A2A2A;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', system-ui, sans-serif; }

body { background-color: var(--bg-dark); color: var(--text-main); overflow-x: hidden; }

/* NAVBAR NETFLIX STYLE */
.top-nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 5%; background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);
    position: fixed; width: 100%; z-index: 100;
}
.brand-logo { color: var(--blue-neon); font-weight: 900; font-size: 1.5rem; letter-spacing: -1px; text-transform: uppercase; }
.nav-links { display: flex; gap: 30px; }
.nav-links a { color: var(--text-main); text-decoration: none; font-weight: 600; transition: color 0.3s; }
.nav-links a:hover { color: var(--blue-neon); }
.fantasy-mode { color: var(--gold-premium) !important; text-shadow: 0 0 10px rgba(212, 175, 55, 0.4); }

/* LAYOUT DEL ÁLBUM (GRID DINÁMICO) */
.album-container { padding: 100px 5% 50px; }
.tournament-header { margin-bottom: 40px; border-bottom: 1px solid #333; padding-bottom: 20px; }
.tournament-title { font-size: 3rem; font-weight: 900; }
.tournament-meta { color: var(--gold-premium); font-size: 1.1rem; font-weight: bold; }

.team-section { margin-bottom: 50px; background: var(--bg-panel); padding: 30px; border-radius: 8px; border-left: 4px solid var(--blue-neon); }
.team-name { font-size: 2rem; margin-bottom: 20px; display: flex; align-items: center; gap: 15px; }

/* LAS FIGURITAS */
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px; }

.sticker-slot {
    aspect-ratio: 3/4;
    background: var(--sticker-empty);
    border: 2px dashed #444;
    border-radius: 6px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative; transition: all 0.3s ease;
}

.sticker-slot.empty::before {
    content: '?'; font-size: 3rem; color: #444; font-weight: 900;
}
.sticker-label {
    position: absolute; bottom: -25px; font-size: 0.85rem; color: var(--text-muted);
    text-align: center; width: 100%; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ESTADO: OBTENIDA */
.sticker-slot.collected {
    border: 2px solid var(--gold-premium);
    background: linear-gradient(135deg, #111, #001a80); /* Reflejo azul */
    box-shadow: 0 10px 20px rgba(0, 51, 255, 0.2);
}
.sticker-slot.collected::before { content: ''; } /* Quita el signo de interrogación */
.sticker-slot.collected .player-name-reveal {
    color: var(--gold-premium); font-weight: 900; font-size: 1.2rem; text-transform: uppercase;
}