/* ============================================================
   EL MUNDO DE MANU - FÚTBOL ARCADE | HOJA DE ESTILOS (styles.css)
   Aquí yo, Manu, dejo separado todo mi CSS para mantenerlo y
   mejorarlo más fácil en el futuro. Lo enlazo desde index.html.
   ============================================================ */
/* Aquí yo reseteo todo para tener control total del layout */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; }
/* Aquí yo defino mis colores de marca El Mundo de Manu */
:root{ --azul-marino:#0D1F3C; --turquesa:#00C2A8; --dorado:#F0A500; --azul-oscuro:#061224; --texto-claro:#E8F1F2; --rojo-cpu:#ff6b6b; }
/* Aquí yo aplico la fuente y el fondo oscuro general */
body{ font-family:'Poppins',sans-serif; background:var(--azul-oscuro); color:var(--texto-claro); overflow:hidden; width:100vw; height:100vh; position:fixed; }
#app{ width:100%; height:100%; position:relative; }
/* Aquí yo manejo las pantallas con transición de fade */
.pantalla{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .45s ease; overflow-y:auto; }
.pantalla.activa{ opacity:1; pointer-events:all; z-index:10; }
/* Aquí yo dibujo el fondo de estadio con CSS */
.fondo-estadio{ position:absolute; inset:0; background:radial-gradient(ellipse at top, rgba(0,194,168,.15), transparent 60%), linear-gradient(180deg, var(--azul-marino) 0%, var(--azul-oscuro) 55%, #0a3d1a 55%, #0e5226 100%); z-index:0; }
.fondo-lineas{ position:absolute; bottom:0; left:0; width:100%; height:45%; opacity:.25; z-index:1; }
.contenido{ position:relative; z-index:5; width:100%; max-width:760px; padding:20px; display:flex; flex-direction:column; align-items:center; }
/* Aquí yo estilizo el título animado con degradado */
.titulo-juego{ font-size:clamp(28px,8vw,56px); font-weight:900; text-align:center; line-height:1.05; background:linear-gradient(90deg,var(--dorado),var(--turquesa),var(--dorado)); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:pulso 3s ease-in-out infinite, brillo 5s linear infinite; margin-bottom:6px; letter-spacing:1px; filter:drop-shadow(0 4px 12px rgba(0,194,168,.4)); }
.subtitulo{ font-size:clamp(13px,3.5vw,18px); color:var(--turquesa); font-weight:600; margin-bottom:10px; text-align:center; letter-spacing:2px; text-transform:uppercase; }
@keyframes pulso{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.04);} }
@keyframes brillo{ 0%{background-position:0% center;} 100%{background-position:200% center;} }
/* Aquí yo estilizo el contador de monedas */
.coins-badge{ display:inline-flex; align-items:center; gap:6px; background:rgba(240,165,0,.18); border:1px solid var(--dorado); border-radius:20px; padding:5px 14px; font-weight:800; color:var(--dorado); font-size:15px; margin-bottom:14px; }
/* Aquí yo estilizo todos mis botones */
.btn{ font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; padding:14px 28px; border:none; border-radius:14px; cursor:pointer; background:linear-gradient(135deg,var(--turquesa),#009e89); color:var(--azul-oscuro); margin:7px 0; width:100%; max-width:340px; transition:transform .15s ease; box-shadow:0 6px 18px rgba(0,194,168,.35); text-align:center; }
.btn:active{ transform:scale(.96); }
.btn.dorado{ background:linear-gradient(135deg,var(--dorado),#d18f00); box-shadow:0 6px 18px rgba(240,165,0,.35); }
.btn.secundario{ background:linear-gradient(135deg,#1e3a5f,#142a47); color:var(--texto-claro); box-shadow:none; border:1px solid rgba(255,255,255,.1); }
/* Aquí yo estilizo el panel de perfil del menú */
.panel-perfil{ background:rgba(13,31,60,.7); border:1px solid rgba(0,194,168,.3); border-radius:16px; padding:16px; width:100%; max-width:340px; margin:8px 0 14px; backdrop-filter:blur(6px); }
.panel-perfil h3{ color:var(--dorado); font-size:15px; margin-bottom:10px; }
.stats-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.stat-celda{ background:rgba(0,0,0,.25); border-radius:10px; padding:8px 4px; text-align:center; }
.stat-celda .num{ font-size:20px; font-weight:800; color:var(--turquesa); }
.stat-celda .lbl{ font-size:10px; opacity:.7; text-transform:uppercase; letter-spacing:.5px; }
.fila-club{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.camiseta-mini{ width:26px; height:26px; border-radius:6px; border:2px solid rgba(255,255,255,.4); }
.fila-club .nombre-club{ font-weight:700; font-size:15px; }
.fila-club .liga-actual{ font-size:11px; color:var(--dorado); }
.trofeos{ display:flex; gap:6px; margin-top:8px; font-size:20px; min-height:26px; flex-wrap:wrap; }
/* Aquí yo estilizo el banner del evento diario */
.banner-evento{ background:linear-gradient(90deg,rgba(240,165,0,.2),rgba(0,194,168,.2)); border:1px solid var(--dorado); border-radius:14px; padding:12px 16px; width:100%; max-width:340px; margin:8px 0; font-size:13px; text-align:center; }
.banner-evento .titulo-evento{ color:var(--dorado); font-weight:700; margin-bottom:4px; display:block; }
.banner-evento .barra-evento{ height:8px; background:rgba(0,0,0,.3); border-radius:4px; margin-top:8px; overflow:hidden; }
.banner-evento .barra-evento span{ display:block; height:100%; background:linear-gradient(90deg,var(--turquesa),var(--dorado)); transition:width .4s ease; }
/* Aquí yo estilizo los modales (club, tienda, anuncio) */
.modal-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; z-index:400; backdrop-filter:blur(4px); }
.modal-overlay.activo{ display:flex; }
.modal-caja{ background:linear-gradient(160deg,var(--azul-marino),var(--azul-oscuro)); border:1px solid rgba(0,194,168,.4); border-radius:20px; padding:24px; width:92%; max-width:420px; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.modal-caja h2{ color:var(--dorado); font-size:22px; margin-bottom:16px; text-align:center; }
.modal-caja label{ display:block; font-size:13px; margin:12px 0 6px; color:var(--turquesa); font-weight:600; }
.modal-caja input{ width:100%; padding:12px; border-radius:10px; border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.3); color:var(--texto-claro); font-family:'Poppins',sans-serif; font-size:15px; }
.selector-color{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.opcion-color{ width:44px; height:44px; border-radius:50%; cursor:pointer; border:3px solid transparent; transition:transform .15s ease; }
.opcion-color.seleccionado{ border-color:#fff; transform:scale(1.15); }
/* Aquí yo estilizo la tienda y sus items */
.coins-tienda{ text-align:center; font-weight:800; color:var(--dorado); margin-bottom:14px; font-size:16px; }
.item-tienda{ display:flex; align-items:center; gap:12px; background:rgba(0,0,0,.25); border-radius:12px; padding:10px; margin:8px 0; }
.item-preview{ width:42px; height:42px; border-radius:8px; flex-shrink:0; border:1px solid rgba(255,255,255,.2); }
.item-info{ flex:1; }
.item-nombre{ font-weight:700; font-size:14px; }
.item-precio{ font-size:12px; color:var(--dorado); font-weight:700; }
.item-precio.shake{ animation:shake .4s ease; color:var(--rojo-cpu); }
@keyframes shake{ 0%,100%{transform:translateX(0);} 20%{transform:translateX(-6px);} 40%{transform:translateX(6px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(4px);} }
.btn-item{ padding:8px 14px; border:none; border-radius:10px; font-family:'Poppins',sans-serif; font-weight:700; font-size:12px; cursor:pointer; background:var(--turquesa); color:var(--azul-oscuro); flex-shrink:0; }
.btn-item.equipado{ background:var(--dorado); }
/* Aquí yo estilizo la pantalla de logros */
.logros-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; max-width:460px; margin:14px 0; }
.logro-card{ background:rgba(13,31,60,.7); border:1px solid rgba(0,194,168,.25); border-radius:14px; padding:12px; text-align:center; }
.logro-card.bloqueado{ filter:grayscale(1) brightness(.4); }
.logro-card .lg-icono{ font-size:30px; }
.logro-card .lg-nombre{ font-weight:700; font-size:13px; margin-top:4px; color:var(--dorado); }
.logro-card.bloqueado .lg-nombre{ color:#888; }
.logro-card .lg-desc{ font-size:10px; opacity:.7; margin-top:2px; }
/* Aquí yo estilizo el toast de logro que entra desde arriba */
.toast-logro{ position:fixed; top:-120px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,var(--dorado),#d18f00); color:var(--azul-oscuro); padding:12px 20px; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.5); z-index:500; transition:top .5s cubic-bezier(.2,1.3,.5,1); min-width:240px; }
.toast-logro.visible{ top:16px; }
.toast-logro .toast-icono{ font-size:32px; }
.toast-logro .toast-titulo{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.toast-logro .toast-nombre{ font-size:16px; font-weight:900; }
/* Aquí yo estilizo el botón de silenciar siempre visible */
.btn-mute{ position:fixed; top:10px; right:10px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(0,194,168,.5); background:rgba(13,31,60,.85); color:#fff; font-size:20px; z-index:450; cursor:pointer; display:flex; align-items:center; justify-content:center; }
/* Aquí yo armo la pantalla de juego y el marcador */
#pantallaJuego .contenido{ max-width:100%; padding:6px; justify-content:flex-start; height:100%; }
.scoreboard{ display:flex; align-items:center; justify-content:center; gap:12px; background:rgba(13,31,60,.9); border:1px solid rgba(0,194,168,.3); border-radius:12px; padding:8px 14px; margin-bottom:6px; font-weight:700; width:100%; max-width:640px; flex-wrap:wrap; }
.scoreboard .equipo-nombre{ font-size:13px; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scoreboard .marcador{ font-size:26px; color:var(--dorado); font-weight:900; }
.scoreboard .reloj{ background:var(--azul-oscuro); padding:4px 12px; border-radius:8px; font-size:18px; color:var(--turquesa); min-width:64px; text-align:center; }
.scoreboard .powerup-activo{ font-size:11px; color:var(--dorado); width:100%; text-align:center; min-height:14px; }
.scoreboard .tarjetas-cpu{ font-size:12px; width:100%; text-align:center; min-height:14px; }
/* Aquí yo escalo el canvas dentro de su contenedor */
#contenedorCanvas{ position:relative; width:100%; max-width:640px; flex:1; display:flex; align-items:center; justify-content:center; }
#gameCanvas{ background:#2e8b3d; border-radius:10px; width:100%; height:auto; max-height:62vh; box-shadow:0 8px 30px rgba(0,0,0,.5); touch-action:none; }
/* Aquí yo armo los controles móviles: joystick + acciones */
.controles-movil{ display:none; width:100%; max-width:640px; justify-content:space-between; align-items:flex-end; margin-top:8px; padding:0 10px; }
.joystick-base{ width:120px; height:120px; border-radius:50%; background:rgba(0,194,168,.12); border:2px solid rgba(0,194,168,.4); position:relative; touch-action:none; }
.joystick-knob{ width:54px; height:54px; border-radius:50%; background:rgba(0,194,168,.65); border:2px solid #fff; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); box-shadow:0 4px 12px rgba(0,0,0,.4); }
.acciones-movil{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.btn-accion{ width:74px; height:74px; border-radius:50%; border:none; font-weight:800; font-size:13px; color:var(--azul-oscuro); }
.btn-disparo{ background:radial-gradient(circle,var(--dorado),#c98a00); }
.btn-pase{ background:radial-gradient(circle,var(--turquesa),#009e89); width:60px; height:60px; font-size:12px; }
/* Aquí yo armo la celebración de gol (flash + texto) */
#flashGol{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:200; }
#flashGol.flash{ animation:flashAnim .5s ease; }
@keyframes flashAnim{ 0%{opacity:.85;} 100%{opacity:0;} }
#textoGol{ position:absolute; top:40%; left:50%; transform:translate(-50%,-50%) scale(0); font-size:clamp(50px,16vw,130px); font-weight:900; color:var(--dorado); text-shadow:0 0 30px var(--turquesa),0 6px 0 #8a5e00; z-index:201; pointer-events:none; opacity:0; -webkit-text-stroke:2px var(--azul-oscuro); }
#textoGol.explota{ animation:explota 1.8s ease; }
@keyframes explota{ 0%{transform:translate(-50%,-50%) scale(0) rotate(-15deg);opacity:0;} 20%{transform:translate(-50%,-50%) scale(1.3) rotate(5deg);opacity:1;} 40%{transform:translate(-50%,-50%) scale(1) rotate(-2deg);} 80%{transform:translate(-50%,-50%) scale(1);opacity:1;} 100%{transform:translate(-50%,-50%) scale(.8);opacity:0;} }
/* Aquí yo estilizo el resultado y las estadísticas estilo FotMob */
.badge-liga{ display:inline-block; background:var(--dorado); color:var(--azul-oscuro); padding:4px 12px; border-radius:20px; font-weight:700; font-size:13px; margin:8px 0; }
.coins-resultado{ color:var(--dorado); font-weight:800; font-size:15px; margin:6px 0; }
.marcador-final{ display:flex; align-items:center; justify-content:center; gap:16px; margin:6px 0; }
.marcador-final .eq{ font-size:13px; font-weight:700; max-width:110px; text-align:center; }
.marcador-final .gr{ font-size:42px; font-weight:900; color:var(--dorado); }
/* Aquí yo estilizo las pestañas de categorías de estadísticas */
.tabs-stats{ display:flex; gap:4px; flex-wrap:wrap; justify-content:center; margin:14px 0 6px; width:100%; max-width:460px; }
.tab-btn{ flex:1; min-width:74px; padding:8px 4px; border:none; border-radius:10px; background:rgba(30,58,95,.6); color:var(--texto-claro); font-family:'Poppins',sans-serif; font-weight:600; font-size:11px; cursor:pointer; }
.tab-btn.activa{ background:var(--turquesa); color:var(--azul-oscuro); }
.bloque-stats{ width:100%; max-width:460px; background:rgba(13,31,60,.7); border:1px solid rgba(0,194,168,.25); border-radius:14px; padding:14px; margin:6px 0 14px; }
.stat-comp{ margin:10px 0; }
.stat-comp .top{ display:flex; justify-content:space-between; align-items:center; font-size:12px; margin-bottom:3px; }
.stat-comp .top .vl{ color:var(--turquesa); font-weight:800; min-width:42px; }
.stat-comp .top .lbl{ opacity:.8; text-align:center; flex:1; font-size:11px; }
.stat-comp .top .vr{ color:var(--rojo-cpu); font-weight:800; min-width:42px; text-align:right; }
.stat-comp .bars{ display:flex; height:6px; gap:2px; }
.stat-comp .bars .bl{ background:var(--turquesa); border-radius:4px 0 0 4px; min-width:2px; transition:width .5s ease; }
.stat-comp .bars .br{ background:var(--rojo-cpu); border-radius:0 4px 4px 0; min-width:2px; transition:width .5s ease; }
/* Aquí yo estilizo el anillo de posesión */
.posesion-circ{ display:flex; align-items:center; justify-content:center; gap:18px; margin:10px 0; }
.posesion-circ .anillo{ width:90px; height:90px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:20px; }
.progreso-liga{ display:flex; gap:6px; margin:12px 0; }
.punto-partido{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); }
.punto-partido.gano{ background:var(--turquesa); color:var(--azul-oscuro); }
.punto-partido.perdio{ background:#c0392b; }
.punto-partido.empato{ background:var(--dorado); color:var(--azul-oscuro); }
.fila-botones{ display:flex; gap:8px; width:100%; max-width:340px; }
.fila-botones .btn{ flex:1; }
.texto-mini{ font-size:12px; opacity:.6; margin-top:10px; text-align:center; }
/* Aquí yo armo la tabla de posiciones de la liga */
.tabla-liga{ width:100%; max-width:420px; border-collapse:collapse; margin:14px 0; font-size:13px; }
.tabla-liga th,.tabla-liga td{ padding:8px 6px; text-align:center; border-bottom:1px solid rgba(255,255,255,.1); }
.tabla-liga th{ color:var(--dorado); font-size:11px; text-transform:uppercase; }
.tabla-liga td:first-child,.tabla-liga th:first-child{ text-align:left; }
.tabla-liga tr.yo{ background:rgba(0,194,168,.18); font-weight:700; }
/* Aquí yo armo el anuncio recompensado */
.ad-modal{ background:linear-gradient(160deg,#1a1a2e,#0f0f1e); border:2px dashed var(--dorado); text-align:center; }
.ad-modal .ad-box{ background:repeating-linear-gradient(45deg,#222,#222 10px,#2a2a2a 10px,#2a2a2a 20px); border-radius:12px; padding:40px 20px; margin:16px 0; font-size:14px; opacity:.8; }
.ad-modal .contador-ad{ font-size:30px; font-weight:900; color:var(--dorado); margin:10px 0; }
/* Aquí yo muestro los controles solo en pantallas táctiles o angostas */
@media (hover:none) and (pointer:coarse){ .controles-movil{ display:flex; } }
@media (max-width:760px){ .controles-movil{ display:flex; } }