:root{
  --bg-color:#0e141b;--card-bg:#18212c;--surface-color:#1e2936;--surface-hover:#263445;
  --text-main:#f0f4f8;--text-muted:#7a8fa6;--text-inverse:#000;
  --accent-color:#00e676;--accent-hover:#69ff9c;--accent-dim:rgba(0,230,118,.12);--accent-glow:rgba(0,230,118,.35);
  --danger-color:#ff4757;--border-subtle:rgba(255,255,255,.08);--border-strong:rgba(255,255,255,.15);
  --glass-bg:rgba(20,32,46,.88);--modal-overlay:rgba(6,12,20,.92);
  --shadow-soft:0 4px 20px rgba(0,0,0,.35);--shadow-strong:0 16px 50px rgba(0,0,0,.65);
  --pitch-line:rgba(0,230,118,.055);
  --xp-bronze:#cd7f32;--xp-silver:#9ca3af;--xp-gold:#eab308;--xp-legend:#a78bfa
}
[data-theme="light"]{
  /* 🏟️ Paleta Match Day con tonalidad verde muy claro */
  --bg-color: #e2e8e4;
  --card-bg: #f0f7f3;
  --surface-color: #e8f3ee;
  --surface-hover: #dfede7;
  --text-main: #04160a;
  --text-muted: #2c4930;
  --text-inverse: #ffffff;
  
  --accent-color: #00cc66;
  --accent-hover: #009944;
  --accent-dim: rgba(0, 204, 102, 0.12);
  --accent-glow: rgba(0, 204, 102, 0.35);
  --danger-color: #e11d48;
  
  --border-subtle: rgba(4, 22, 10, 0.12);
  --border-strong: #cbd5e1;
  --glass-bg: rgba(240, 247, 243, 0.95);
  --modal-overlay: rgba(6, 12, 20, 0.5);
  
  --shadow-soft: 0 8px 24px rgba(4, 22, 10, 0.08);
  --shadow-strong: 0 20px 45px rgba(4, 22, 10, 0.18);
  
  --pitch-line: rgba(0, 204, 102, 0.06);
}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Segoe UI',system-ui,-apple-system,sans-serif}
html {
    height: 100%;
}
html, body {
    scroll-behavior: smooth;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative;
}
body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color);
    color: var(--text-main);
    padding-bottom: 0 !important;
    transition: background-color .35s ease, color .35s ease;
}

/* 🔒 BLOQUEO DE SCROLL EN EL FONDO CUANDO CUALQUIER MODAL ESTÁ ABIERTO */
body:has(.modal-overlay[style*="display: flex"]),
body:has(.modal-overlay[style*="display:flex"]),
body:has(.modal-overlay.active),
body:has(#privacy-modal-overlay[style*="display: flex"]),
body:has(#privacy-modal-overlay[style*="display:flex"]),
body:has(#privacy-modal-overlay.active),
body:has(#login-modal-overlay.active),
body:has(#levelup-overlay.active) {
    overflow: hidden !important;
    height: 100dvh !important;
}
main {
    flex: 1 0 auto;
    width: 100%;
    position: relative;
    z-index: auto !important;
}
/* ========================================================
   FONDO GLOBAL: GRILLA DE CANCHA + PLANISFERIO DE PUNTOS
   ======================================================== */
body::before {
    content: ''; 
    position: fixed; 
    inset: 0;
    background-image: repeating-linear-gradient(90deg, var(--pitch-line) 0, var(--pitch-line) 1px, transparent 1px, transparent 80px),
                      repeating-linear-gradient(0deg, var(--pitch-line) 0, var(--pitch-line) 1px, transparent 1px, transparent 80px);
    pointer-events: none; 
    z-index: 0;
}

body::after {
    content: ''; 
    position: fixed; 
    inset: 0;
    /* 1. Puntos más grandes y densos para darle "cuerpo" al mapa */
    background-image: radial-gradient(var(--accent-color) 1.8px, transparent 1.8px);
    background-size: 12px 12px; 
    
    /* 2. El molde SVG del mundo */
    -webkit-mask-image: url('https://upload.wikimedia.org/wikipedia/commons/8/80/World_map_-_low_resolution.svg');
    mask-image: url('https://upload.wikimedia.org/wikipedia/commons/8/80/World_map_-_low_resolution.svg');
    
    /* 3. MAGIA: Ocupa el 100% del ancho. El 'auto' bloquea cualquier deformación.
       El 'max(100vw, 900px)' evita que en el celular quede una franja minúscula. */
    -webkit-mask-size: max(100vw, 900px) auto; 
    mask-size: max(100vw, 900px) auto;
    
    /* 4. Centrado perfecto absoluto */
    -webkit-mask-position: center center; 
    mask-position: center center; 
    -webkit-mask-repeat: no-repeat; 
    mask-repeat: no-repeat;
    
    /* 5. Opacidad duplicada para que gane protagonismo */
    opacity: 0.28; 
    pointer-events: none; 
    z-index: 0;
}

body > * { 
    position: relative; 
    z-index: 1; 
}
@keyframes bounceFun{0%{transform:scale(.8) translateY(10px);opacity:0}60%{transform:scale(1.08) translateY(-4px);opacity:1}100%{transform:scale(1) translateY(0)}}
@keyframes pulseGlow{0%{box-shadow:0 0 0 0 var(--accent-glow)}50%{box-shadow:0 0 0 10px rgba(0,230,118,0)}100%{box-shadow:0 0 0 0 rgba(0,230,118,0)}}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes spinSlow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes floatBall{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(180deg)}}
@keyframes shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}
@keyframes dropPanel{from{opacity:0;transform:translateY(-12px) scaleY(.94)}to{opacity:1;transform:translateY(0) scaleY(1)}}
@keyframes levelUpPop{0%{transform:scale(0) rotate(-10deg);opacity:0}60%{transform:scale(1.2) rotate(3deg);opacity:1}80%{transform:scale(.95) rotate(-1deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes confetti{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(80px) rotate(720deg);opacity:0}}
@keyframes scorePopIn{0%{transform:scale(.5) translateY(10px);opacity:0}70%{transform:scale(1.15) translateY(-3px);opacity:1}100%{transform:scale(1) translateY(0);opacity:1}}
@keyframes wrongShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes correctPulse{0%{box-shadow:0 0 0 0 rgba(0,230,118,.6)}70%{box-shadow:0 0 0 16px rgba(0,230,118,0)}100%{box-shadow:0 0 0 0 rgba(0,230,118,0)}}
@keyframes timerPulse{0%,100%{opacity:1}50%{opacity:.5}}
.animate-bounce{animation:bounceFun .65s cubic-bezier(.175,.885,.32,1.275) forwards}
.animate-fade-up{animation:fadeSlideUp .5s ease forwards}
.animate-correct{animation:correctPulse .6s ease}
.animate-wrong{animation:wrongShake .4s ease}
.app-header{display:flex;justify-content: space-between;align-items:center;padding:14px 32px;background:var(--glass-bg);border-bottom:1px solid var(--border-subtle);position:sticky;top:0;z-index:100;backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);box-shadow:0 1px 0 var(--border-subtle),0 4px 20px rgba(0,0,0,.3);transition:background .35s}
.header-left-line{position:absolute;bottom:0;left:0;height:2px;width:100%;background:linear-gradient(90deg,transparent 0%,var(--accent-color) 30%,var(--accent-color) 70%,transparent 100%);opacity:.4}
.app-brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.app-logo{width:44px;height:44px;border-radius:12px;border:2px solid var(--accent-color);object-fit:cover;box-shadow:0 0 12px var(--accent-glow);transition:transform .3s,box-shadow .3s}
.app-brand:hover .app-logo{transform:rotate(-8deg) scale(1.05);box-shadow:0 0 20px var(--accent-glow)}
.app-title-group{display:flex;flex-direction:column}
.app-title{font-size:1.2rem;font-weight:800;color:var(--text-main);line-height:1.1;letter-spacing:-.5px}
.app-subtitle{font-size:.7rem;color:var(--accent-color);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;display:flex;align-items:center;gap:5px}
.app-subtitle::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent-color);box-shadow:0 0 6px var(--accent-color);animation:pulseGlow 2s infinite}
.header-actions{display:flex;align-items:center;gap:14px}
.theme-toggle-btn{width:42px;height:42px;border-radius:12px;background:var(--surface-color);border:1px solid var(--border-strong);color:var(--text-muted);font-size:1.3rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease}
.theme-toggle-btn:hover{transform:scale(1.1);color:var(--accent-color);border-color:var(--accent-color);background:var(--accent-dim);box-shadow:0 0 12px var(--accent-glow)}
.header-level-badge{display:flex;align-items:center;gap:6px;background:var(--surface-color);border:1.5px solid var(--border-strong);border-radius:20px;padding:5px 12px;font-size:.78rem;font-weight:800;cursor:default;transition:all .25s}
.header-level-badge:hover{border-color:var(--accent-color);background:var(--accent-dim)}
.level-dot{width:10px;height:10px;border-radius:50%}
.btn-3d{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;font-weight:700;font-size:1rem;border-radius:14px;border:none;cursor:pointer;transition:all .12s ease;position:relative}
.btn-3d::after{content:'';position:absolute;inset:0;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,transparent 60%);pointer-events:none}
.btn-3d:active{transform:translateY(3px) scale(.98)}
.btn-3d.primary{background:var(--accent-color);color:#000;box-shadow:0 5px 0 #0a7a3a,0 8px 20px var(--accent-glow)}
.btn-3d.primary:hover{background:var(--accent-hover);box-shadow:0 7px 0 #0a7a3a,0 12px 25px var(--accent-glow);transform:translateY(-2px)}
.btn-3d.primary:active{box-shadow:0 2px 0 #0a7a3a,0 4px 10px var(--accent-glow);transform:translateY(3px)}
.btn-3d.secondary{background:var(--surface-color);color:var(--text-main);border:2px solid var(--border-strong);box-shadow:0 4px 0 rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.2)}
.btn-3d.secondary:hover{border-color:var(--accent-color);color:var(--accent-color);background:var(--accent-dim);transform:translateY(-2px)}
.btn-3d.secondary:active{box-shadow:1px 0 rgba(0,0,0,.3);transform:translateY(3px)}
.hero-section{position:relative;padding:60px 20px 70px;text-align:center;overflow:visible}
.hero-bg-glow{position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:700px;height:700px;border-radius:50%;background:radial-gradient(ellipse,var(--accent-glow) 0%,transparent 65%);pointer-events:none;opacity:.5}
.hero-ball{position:absolute;right:8%;top:20%;font-size:5rem;opacity:.06;animation:floatBall 6s ease-in-out infinite;pointer-events:none;user-select:none}
.hero-ball-2{position:absolute;left:6%;top:55%;font-size:3rem;opacity:.05;animation:floatBall 8s ease-in-out infinite reverse;pointer-events:none;user-select:none}

/* ========================================================
   🏟️ ESTADIOS DE FONDO (INTEGRACIÓN LIMPIA Y SIN MANCHAS)
   ======================================================== */
.hero-stadium {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* 🔵 La Bombonera */
.stadium-bombonera {
    left: -160px;
    top: 38%;
    transform: translateY(-50%);
    width: 680px;
    max-width: 46vw;
    opacity: 0.82;
    -webkit-mask-image: linear-gradient(to right, black 25%, transparent 90%), linear-gradient(to bottom, black 70%, transparent 100%);
    mask-image: linear-gradient(to right, black 25%, transparent 90%), linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* 🔴 Maracaná */
.stadium-maracana {
    right: -150px;
    top: 38%;
    transform: translateY(-50%);
    width: 720px;
    max-width: 48vw;
    opacity: 0.82;
    -webkit-mask-image: linear-gradient(to left, black 25%, transparent 90%), linear-gradient(to bottom, black 70%, transparent 100%);
    mask-image: linear-gradient(to left, black 25%, transparent 90%), linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* ⚪ Estadio Genérico */
.stadium-generico {
    right: 0.5%;
    bottom: 5px;
    width: 310px;
    max-width: 25vw;
    opacity: 0.65;
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 95%), radial-gradient(circle at center, black 40%, transparent 95%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 95%), radial-gradient(circle at center, black 40%, transparent 95%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.hero-content{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}

/* Adaptación para pantallas medianas y móviles */
@media (max-width: 1100px) {
    .stadium-bombonera { left: -220px; width: 480px; opacity: 0.4; }
    .stadium-maracana { right: -220px; width: 500px; opacity: 0.4; }
    .stadium-generico { display: none; }
}

/* 📱 Integración prolija y adaptada para pantallas de Celular */
@media (max-width: 768px) {
    .hero-section {
        overflow: hidden !important;
    }
    .hero-stadium {
        display: block !important;
    }
    .stadium-bombonera {
        left: -100px !important;
        top: 20% !important;
        width: 250px !important;
        max-width: 55vw !important;
        opacity: 0.45 !important;
    }
    .stadium-maracana {
        right: -100px !important;
        top: 20% !important;
        width: 260px !important;
        max-width: 55vw !important;
        opacity: 0.45 !important;
    }
    .stadium-generico {
        display: none !important;
    }
}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--accent-dim);border:1px solid var(--border-strong);border-left:3px solid var(--accent-color);color:var(--accent-color);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:2px;padding:6px 14px;border-radius:6px;margin-bottom:18px;animation:fadeSlideUp .4s ease}
.welcome-heading{font-size:3.2rem;font-weight:900;margin-bottom:10px;color:var(--text-main);letter-spacing:-1.5px;line-height:1.05;animation:fadeSlideUp .45s .05s ease both}
.welcome-heading .accent-word{color:var(--accent-color)}
.welcome-sub{font-size:1.05rem;color:var(--text-muted);margin-bottom:36px;font-weight:400;max-width:520px;line-height:1.65;animation:fadeSlideUp .45s .1s ease both}
.search-container{width:100%;max-width:580px;margin:0 auto 40px;position:relative;animation:fadeSlideUp .45s .15s ease both}
.search-icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;font-size:1.25rem;z-index:2}
.search-bar{width:100%;padding:18px 20px 18px 54px;border-radius:16px;border:2px solid var(--border-strong);background:var(--card-bg);color:var(--text-main);font-size:1rem;outline:none;transition:all .3s ease;font-weight:500;box-shadow:0 4px 20px rgba(0,0,0,.3),inset 0 1px 0 var(--border-subtle)}
.search-bar::placeholder{color:var(--text-muted);font-weight:400}
.search-bar:focus{border-color:var(--accent-color);box-shadow:0 0 0 4px var(--accent-dim),0 4px 20px rgba(0,0,0,.3);background:var(--surface-color)}
.game-modes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    width: 100%;
    max-width: 800px; /* ✂️ Acorta el ancho de los 4 botones en PC al punto exacto de la línea azul */
    margin: 0 auto;
    animation: fadeSlideUp .45s .2s ease both;
}

.game-modes button {
    border: none;
    border-radius: 20px;
    padding: 22px 20px 22px 95px !important;
    display: flex;
    align-items: center;
    text-align: left;
    cursor: pointer;
    position: relative;
    overflow: visible !important;
    transition: transform .3s cubic-bezier(.175,.885,.32,1.275), box-shadow .3s ease, border-color .3s ease;
    color: #fff;
    text-decoration: none;
    will-change: transform;
    backface-visibility: hidden;
}

.game-modes button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 60%);
    pointer-events: none;
}

.game-modes button::after { display: none !important; }
.game-modes button:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 45px rgba(0,0,0,.5); }
.game-modes button:active { transform: translateY(-2px) scale(.99); }

/* 💡 RESPLANDOR NEÓN LUMINOSO BAJO CADA BOTÓN SEGÚN SU COLOR DE ÍCONO */
.game-modes button.btn-guessr:hover {
    border-color: #00ff77 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 12px 30px rgba(0, 255, 119, 0.55) !important;
}
.game-modes button.btn-order:hover {
    border-color: #eab308 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 12px 30px rgba(234, 179, 8, 0.55) !important;
}
.game-modes button.btn-random:hover {
    border-color: #2979ff !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 12px 30px rgba(41, 121, 255, 0.55) !important;
}
.game-modes button.btn-catalog:hover {
    border-color: #a78bfa !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 12px 30px rgba(167, 139, 250, 0.55) !important;
}

/* 🏆 ÍCONOS 3D DESBORDANTES (ACELERADOS POR HARDWARE GPU) */
.game-3d-icon {
    position: absolute;
    left: -32px;
    top: 50%;
    transform: translateY(-50%) translateZ(0);
    width: 125px;
    height: 125px;
    object-fit: contain;
    pointer-events: none;
    z-index: 5;
    will-change: transform;
    backface-visibility: hidden;
    transition: transform 0.35s ease, filter 0.35s ease;
}

/* Resplandor único para cada elemento 3D */
.btn-guessr .game-3d-icon { filter: drop-shadow(0 0 18px rgba(0, 255, 119, 0.75)); }
.btn-order .game-3d-icon { filter: drop-shadow(0 0 18px rgba(234, 179, 8, 0.75)); }
.btn-random .game-3d-icon { filter: drop-shadow(0 0 18px rgba(41, 121, 255, 0.75)); }

/* 📁 ÍCONO DE CATÁLOGO AGRANDADO (Para igualar la escala visual de los otros 3) */
.btn-catalog .game-3d-icon { 
    filter: drop-shadow(0 0 18px rgba(167, 139, 250, 0.75));
    width: 155px;
    height: 155px;
    left: -48px;
}

/* Animación de elevación al pasar el mouse */
.game-modes button:hover .game-3d-icon {
    transform: translateY(-50%) scale(1.12) rotate(-4deg);
}
.btn-guessr:hover .game-3d-icon { filter: drop-shadow(0 0 28px rgba(0, 255, 119, 0.95)); }
.btn-order:hover .game-3d-icon { filter: drop-shadow(0 0 28px rgba(234, 179, 8, 0.95)); }
.btn-random:hover .game-3d-icon { filter: drop-shadow(0 0 28px rgba(41, 121, 255, 0.95)); }
.btn-catalog:hover .game-3d-icon { filter: drop-shadow(0 0 28px rgba(167, 139, 250, 0.95)); }
.game-card-text{display:flex;flex-direction:column;z-index:2}
.game-card-text strong{font-size:1.2rem;font-weight:800;line-height:1.15;margin-bottom:3px}
.game-card-text span{font-size:.88rem;font-weight:500;opacity:.9}
.game-card-badge{position:absolute;top:10px;right:12px;background:rgba(255,255,255,.2);color:#fff;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:3px 8px;border-radius:20px;border:1px solid rgba(255,255,255,.3)}
#hero-google-profile{display:flex;align-items:center}
.btn-login{background:var(--accent-color);color:#000;padding:9px 18px;border-radius:12px;font-weight:800;border:none;cursor:pointer;display:flex;align-items:center;gap:7px;font-size:.9rem;box-shadow:0 4px 0 #0a7a3a,0 6px 15px var(--accent-glow);transition:all .2s;letter-spacing:.3px}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 6px 0 #0a7a3a,0 10px 20px var(--accent-glow);background:var(--accent-hover)}
.hero-profile-wrapper{position:relative;display:flex;align-items:center;gap:10px;cursor:pointer;padding:6px 12px 6px 6px;border-radius:50px;border:2px solid var(--border-strong);background:var(--surface-color);transition:all .25s;box-shadow:0 2px 0 rgba(0,0,0,.2)}
.hero-profile-wrapper:hover{border-color:var(--accent-color);background:var(--accent-dim);transform:translateY(-1px)}
.hero-profile-name{font-size:.85rem;font-weight:700;color:var(--text-main);max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-profile-sub{font-size:.68rem;color:var(--accent-color);font-weight:700;display:flex;align-items:center;gap:3px}
.xp-bar-container{width:100%;background:var(--border-subtle);border-radius:20px;height:6px;overflow:hidden;margin-top:6px}
.xp-bar-fill{height:100%;border-radius:20px;transition:width 1.2s cubic-bezier(.4,0,.2,1);background:var(--accent-color);box-shadow:0 0 8px var(--accent-glow)}
.level-badge-inline{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:1px}
.level-pibe{background:rgba(205,127,50,.15);color:var(--xp-bronze);border:1px solid rgba(205,127,50,.3)}
.level-volante{background:rgba(156,163,175,.15);color:var(--xp-silver);border:1px solid rgba(156,163,175,.3)}
.level-crack{background:rgba(234,179,8,.15);color:var(--xp-gold);border:1px solid rgba(234,179,8,.3)}
.level-leyenda{background:rgba(167,139,250,.15);color:var(--xp-legend);border:1px solid rgba(167,139,250,.3)}
#levelup-overlay{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.85);backdrop-filter:blur(16px)}
#levelup-overlay.active{display:flex}
.levelup-box{text-align:center;animation:levelUpPop .6s cubic-bezier(.175,.885,.32,1.275) forwards}
.levelup-icon{font-size:5rem;filter:drop-shadow(0 0 30px var(--accent-color));margin-bottom:16px;display:block}
.levelup-title{font-size:2.4rem;font-weight:900;color:var(--accent-color);text-transform:uppercase;letter-spacing:-1px}
.levelup-sub{font-size:1.1rem;color:var(--text-muted);margin-top:8px}
.levelup-close{margin-top:28px}
.confetti-piece{position:absolute;width:10px;height:10px;border-radius:2px;animation:confetti 1.2s ease-out forwards;pointer-events:none}
.catalogo-layout{display:none;align-items:flex-start;gap:24px;max-width:1220px;margin:150px auto 18px;padding:0 24px;position:relative;z-index:5}
.catalogo-layout.open{display:flex;animation:dropPanel .22s cubic-bezier(.4,0,.2,1) forwards}
.section-ligas{flex:0 0 360px}
.ligas-header{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.ligas-title-area{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
#texto-titulo-grilla{font-size:.9rem;font-weight:800;color:var(--text-main);text-transform:uppercase;letter-spacing:1.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.liga-elegida-badge{display:none;align-items:center;gap:8px;background:var(--accent-dim);border:1px solid var(--accent-color);border-radius:20px;padding:4px 12px 4px 6px;font-size:.8rem;font-weight:700;color:var(--accent-color)}
.liga-elegida-badge .badge-dot{width:10px;height:10px;border-radius:50%}
#btn-volver-ligas{display:none;padding:8px 16px;font-size:.82rem;border-radius:14px;flex-shrink:0}
.liga-selector-btn{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:14px;border:2px solid var(--border-strong);background:var(--card-bg);color:var(--text-main);font-size:1rem;font-weight:700;cursor:pointer;transition:all .25s;position:relative;box-shadow:0 4px 0 rgba(0,0,0,.35);white-space:nowrap}
.liga-selector-btn:hover,.liga-selector-btn.open{border-color:var(--accent-color);color:var(--accent-color);background:var(--accent-dim)}
.liga-selector-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(0,0,0,.35),0 8px 24px var(--accent-glow)}
.liga-selector-btn .chevron{transition:transform .25s;font-size:.9rem}
.liga-selector-btn.open .chevron{transform:rotate(180deg)}
.liga-selector-preview{display:flex;align-items:center;gap:6px}
.ligas-dropdown-panel{display:block;position:relative;width:100%;margin-bottom:28px}
.ligas-dropdown-panel.open{display:block;animation:dropPanel .22s cubic-bezier(.4,0,.2,1) forwards}
.ligas-panel-inner{background:var(--card-bg);border:2px solid var(--border-strong);border-radius:20px;padding:20px;box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 1px var(--border-subtle);max-width:360px;margin:0 auto}
.ligas-panel-label{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:2px;color:var(--text-muted);margin-bottom:14px;display:flex;align-items:center;gap:6px}
.ligas-panel-label::after{content:'';flex:1;height:1px;background:var(--border-strong)}
.tabs-container{display:flex;flex-direction:column;gap:8px}
.liga-country-group{width:100%}
/* ========================================================
   OPTIMIZACIÓN DE RENDIMIENTO MÓVIL: BOTONES Y CATÁLOGO
   ======================================================== */
.liga-country-btn {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; 
    border-radius: 14px; border: 2px solid var(--border-strong); 
    background: var(--bg-color); color: var(--text-main); 
    font-size: .92rem; font-weight: 800; cursor: pointer; text-align: left;
    box-shadow: 0 3px 0 rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.25);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
    transform: translateZ(0); 
}
.liga-country-btn:hover { border-color: var(--accent-color); color: var(--accent-color); transform: translateY(-3px) translateZ(0); box-shadow: 0 7px 0 rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.4); }
.liga-country-btn:active { transform: translateY(2px) translateZ(0); box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3); }
.liga-country-btn img { width: 22px; border-radius: 2px; box-shadow: 0 0 3px rgba(0,0,0,.5); }
.liga-country-btn .chevron { margin-left: auto; transition: transform .25s ease; font-size: .85rem; }
.liga-country-group.open .liga-country-btn { border-color: var(--accent-color); color: var(--accent-color); }
.liga-country-group.open .liga-country-btn .chevron { transform: rotate(180deg); }

.liga-country-leagues {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px;
    max-height: 0; overflow: hidden; margin-top: 0; opacity: 0;
    transition: max-height .3s ease-out, margin-top .3s ease-out, opacity .2s ease-out;
}
.liga-country-group.open .liga-country-leagues {
    max-height: 800px; /* Agrandado a 800px por si en el futuro metés muchos botones de liga en un mismo país */
    margin-top: 10px; 
    opacity: 1;
}

.tab {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; 
    border: 2px solid transparent; cursor: pointer; font-size: .9rem; font-weight: 700; 
    color: #fff; position: relative; overflow: hidden; text-align: left; 
    box-shadow: 0 3px 0 rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.25); min-height: 48px; width: 100%;
    transition: transform .2s cubic-bezier(.175,.885,.32,1.275), box-shadow .2s ease, border-color .2s ease;
    transform: translateZ(0);
}
.tab-bg{position:absolute;inset:0;z-index:0;transition:opacity .2s}
.tab::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.42);z-index:1;border-radius:12px;transition:background .2s}
.tab:hover::before,.tab.active::before{background:rgba(0,0,0,.22)}
.tab:hover{transform:translateY(-3px) scale(1.01);border-color:rgba(255,255,255,.4);box-shadow:0 7px 0 rgba(0,0,0,.4),0 10px 24px rgba(0,0,0,.4)}
.tab.active{border-color:var(--accent-color);box-shadow:0 5px 0 rgba(0,0,0,.35),0 8px 25px rgba(0,230,118,.25)}
.tab.active::after{content:'';position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--accent-color);box-shadow:0 0 8px var(--accent-color);z-index:3}
.tab-swatch{width:28px;height:20px;border-radius:5px;border:2px solid rgba(255,255,255,.3);flex-shrink:0;z-index:2;position:relative;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.tab-name{z-index:2;position:relative;text-shadow:0 1px 4px rgba(0,0,0,.8);font-size:.9rem;font-weight:700}
.tab[data-gid="0"] .tab-bg,.tab[data-gid="861264971"] .tab-bg{background:linear-gradient(135deg,#74acdf 0%,#74acdf 40%,#fff 40%,#fff 60%,#74acdf 60%)}
.tab[data-gid="0"] .tab-swatch,.tab[data-gid="861264971"] .tab-swatch{background:linear-gradient(135deg,#74acdf 50%,#fff 50%)}
.tab[data-gid="554922783"] .tab-bg{background:linear-gradient(135deg,#cf142b 0%,#cf142b 45%,#fff 45%,#fff 55%,#cf142b 55%)}
.tab[data-gid="554922783"] .tab-swatch{background:linear-gradient(135deg,#cf142b 50%,#fff 50%)}
.tab[data-gid="88250864"] .tab-bg{background:linear-gradient(160deg,#c60b1e 0%,#c60b1e 35%,#ffc400 35%,#ffc400 65%,#c60b1e 65%)}
.tab[data-gid="88250864"] .tab-swatch{background:linear-gradient(180deg,#c60b1e 33%,#ffc400 33%,#ffc400 66%,#c60b1e 66%)}
.tab[data-gid="2013531070"] .tab-bg{background:linear-gradient(135deg,#009246 0%,#009246 33%,#fff 33%,#fff 66%,#ce2b37 66%)}
.tab[data-gid="2013531070"] .tab-swatch{background:linear-gradient(90deg,#009246 33%,#fff 33%,#fff 66%,#ce2b37 66%)}
.tab[data-gid="165565330"] .tab-bg{background:linear-gradient(135deg,#002395 0%,#002395 33%,#fff 33%,#fff 66%,#ed2939 66%)}
.tab[data-gid="165565330"] .tab-swatch{background:linear-gradient(90deg,#002395 33%,#fff 33%,#fff 66%,#ed2939 66%)}
.tab[data-gid="96716546"] .tab-bg{background:linear-gradient(160deg,#000 0%,#000 33%,#dd0000 33%,#dd0000 66%,#ffce00 66%)}
.tab[data-gid="96716546"] .tab-swatch{background:linear-gradient(180deg,#000 33%,#dd0000 33%,#dd0000 66%,#ffce00 66%)}
.tab[data-gid="58862486"] .tab-bg{background:linear-gradient(135deg,#009c3b 0%,#009c3b 40%,#ffdf00 40%,#ffdf00 70%,#009c3b 70%)}
.tab[data-gid="58862486"] .tab-swatch{background:linear-gradient(135deg,#009c3b 50%,#ffdf00 50%)}
.tab[data-gid="304687071"] .tab-bg{background:linear-gradient(135deg,#d52b1e 0%,#d52b1e 45%,#fff 45%,#fff 65%,#0039a6 65%)}
.tab[data-gid="304687071"] .tab-swatch{background:linear-gradient(90deg,#d52b1e 40%,#fff 40%,#fff 60%,#0039a6 60%)}
.tab[data-gid="879164460"] .tab-bg{background:linear-gradient(135deg,#1a3a6b 0%,#6b1a1a 25%,#1a6b3a 50%,#6b6b1a 75%,#1a3a6b 100%)}
.tab[data-gid="879164460"] .tab-swatch{background:conic-gradient(#e63946 0%,#457b9d 25%,#2a9d8f 50%,#e9c46a 75%,#e63946 100%)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;flex:1}
.card{background:var(--card-bg);border-radius:20px;overflow:hidden;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),box-shadow .3s ease;cursor:pointer;display:flex;flex-direction:column;border:1px solid var(--border-subtle);box-shadow:0 4px 20px rgba(0,0,0,.3)}
.card:hover{transform:translateY(-10px);box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 0 1px var(--accent-color)}
.estadio-foto-container{width:100%;height:190px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:28px;transition:filter .3s}
.estadio-foto-container::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,14,20,.9) 0%,rgba(0,0,0,.05) 60%);z-index:1}
.card:hover .estadio-foto-container{filter:brightness(1.1)}
.card-img-logo{max-height:88%;max-width:88%;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(0,0,0,.7));transition:transform .4s cubic-bezier(.34,1.56,.64,1);z-index:2}
.card:hover .card-img-logo{transform:scale(1.12) rotate(3deg)}
.placeholder-text{color:rgba(255,255,255,.12);font-weight:800;font-size:1rem;text-transform:uppercase;letter-spacing:2.5px;text-align:center;padding:0 10px;z-index:2}
.trivia-hint{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.55);color:#fff;border-radius:10px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;z-index:4;border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(8px);transition:all .25s;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.card:hover .trivia-hint{background:var(--accent-color);color:#000;box-shadow:0 0 18px var(--accent-glow);border-color:var(--accent-color);transform:scale(1.08)}
.trivia-balloon{position:absolute;inset:8px;background:var(--glass-bg);border:1px solid var(--border-strong);border-radius:14px;padding:12px;display:flex;flex-direction:column;z-index:10;opacity:0;pointer-events:none;transform:scale(.92) translateY(4px);transition:all .22s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(16px)}
.trivia-balloon.active{opacity:1;pointer-events:auto;transform:scale(1) translateY(0);box-shadow:var(--shadow-strong)}
.balloon-tabs{display:flex;width:100%;border-bottom:2px solid var(--border-subtle);margin-bottom:8px;flex-shrink:0}
.b-tab{flex:1;background:transparent;color:var(--text-muted);border:none;padding:8px 0;cursor:pointer;font-size:.82rem;font-weight:700;text-transform:uppercase;transition:all .2s;border-bottom:2px solid transparent;margin-bottom:-2px}
.b-tab.active{color:var(--accent-color);border-bottom-color:var(--accent-color);font-weight:800}
.b-content{display:none;width:100%;height:100%;overflow-y:auto;color:var(--text-main);font-size:.88rem;line-height:1.55;text-align:center;align-items:center;justify-content:center;padding:4px 5px}
.b-content.active{display:flex}
.card-content{padding:20px 22px;display:flex;flex-direction:column;flex-grow:1}
.card-title{font-size:1.2rem;font-weight:800;margin-bottom:4px;letter-spacing:-.3px;color:var(--text-main)}
.card-subtitle{font-size:.88rem;color:var(--text-muted);margin-bottom:18px;font-weight:500}
.btn-view{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;background:var(--surface-color);color:var(--text-main);border-radius:12px;font-weight:700;font-size:.95rem;border:2px solid var(--border-strong);cursor:pointer;transition:all .22s;margin-top:auto;box-shadow:0 3px 0 rgba(0,0,0,.3)}
.btn-view:hover{background:var(--accent-color);border-color:var(--accent-color);color:#000;box-shadow:0 5px 0 #0a7a3a,0 8px 20px var(--accent-glow);transform:translateY(-2px)}
.rating-box{display:flex;flex-direction:column;align-items:center;margin-top:18px;padding-top:14px;border-top:1px dashed var(--border-strong)}
.rating-title{font-size:.72rem;color:var(--text-muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:1px;font-weight:700}
.stars-row{display:flex;gap:5px}
.star-icon{font-size:1.5rem;color:var(--border-strong);cursor:pointer;transition:transform .15s cubic-bezier(.175,.885,.32,1.275),color .15s;user-select:none}
.star-icon:hover{transform:scale(1.35);color:var(--accent-hover)}
.star-icon.active{color:var(--accent-color)}
.modal-overlay{display:none;position:fixed;inset:0;background:var(--modal-overlay);z-index:9999 !important;justify-content:center;align-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* ⚡ LIBERACIÓN TOTAL DE GPU: Elimina el blur en vivo mientras el video reproduce */
#video-modal.modal-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(5, 7, 15, 0.96) !important;
}

/* 🚀 OPTIMIZACIÓN EXTREMA DE RENDIMIENTO AL ABRIR VIDEO */
#video-modal .close-btn {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.75) !important;
}

body.video-abierto .hero-ball,
body.video-abierto .hero-ball-2,
body.video-abierto .app-subtitle::before {
    animation-play-state: paused !important;
}

body.video-abierto main.grid,
body.video-abierto .hero-section {
    visibility: hidden !important;
}

.modal-content{position:relative;width:90%;max-width:1100px;height:92vh;background:var(--bg-color);border-radius:22px;box-shadow:var(--shadow-strong),0 0 0 1px var(--border-strong);display:flex;flex-direction:column;border:1px solid var(--border-strong);overflow:hidden;animation:bounceFun .4s ease}
.modal-content.stadium-guessr-layout{width:92%!important;max-width:1200px!important}

/* 🛡️ PANTALLA DE RESULTADOS REPARADA (AJUSTE COMPACTO DE ALTURA EN PC Y MÓVIL) */
.modal-content.resultado-final-layout,
.modal-content.resultado-final {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 92% !important;
    max-width: 500px !important;
    height: 85vh !important;
    max-height: 85vh !important;
    background: var(--bg-color) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    padding: 0 !important;
    z-index: 2501 !important;
}

/* 🎬 REPRODUCTOR DE VIDEO FLUIDO Y ESTABLE EN PC Y CELULAR */
.video-container{
    position: relative;
    width:100%;
    height:100%;
    border-radius:22px;
    overflow:hidden;
    background:#000;
    display:flex;
    justify-content:center;
    align-items:center;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* 🛡️ MÁSCARA SUPERIOR TAPATÍTULOS PARA STADIUGUESSR */
.yt-title-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 58px;
    background: linear-gradient(90deg, #0e5c2f 0%, #0d2847 50%, #0f4c91 100%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    pointer-events: auto;
    user-select: none;
    border-bottom: 2px solid #00ff77;
    box-shadow: inset 35px 0 45px rgba(0, 255, 119, 0.4), inset -35px 0 45px rgba(41, 121, 255, 0.4), 0 6px 20px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 255, 119, 0.3);
}

.yt-mask-icon {
    width: 6%;
    height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(0, 255, 119, 0.85));
}

.yt-title-mask span {
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #00ff77 0%, #ffffff 50%, #00e676 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 8px rgba(0, 255, 119, 0.4));
}
.close-btn{position:absolute;top:14px;right:14px;background:rgba(0,0,0,.6);color:#fff;border:1px solid rgba(255,255,255,.15);padding:0;cursor:pointer;z-index:2020;border-radius:10px;width:38px;height:38px;font-size:1.3rem;display:flex;align-items:center;justify-content:center;transition:all .2s;backdrop-filter:blur(8px)}
.close-btn:hover{background:var(--danger-color);border-color:var(--danger-color);transform:scale(1.1) rotate(90deg)}
#game-ui{display:none;width:100%;background:var(--bg-color)!important;padding:20px!important;text-align:center;z-index:2010;border-radius:0 0 22px 22px}
#game-title{font-size:.95rem!important;color:var(--text-main);margin-bottom:10px;font-weight:800!important;text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--surface-color);padding:13px;border-radius:12px;border:2px solid var(--border-strong)}
.rounds-progress{display:flex;gap:6px;justify-content:center;margin-bottom:12px}
.round-dot{width:28px;height:6px;border-radius:3px;background:var(--border-strong);transition:all .4s ease}
.round-dot.done{background:var(--accent-color);box-shadow:0 0 8px var(--accent-glow)}
.round-dot.current{background:var(--accent-color);opacity:.5;animation:timerPulse 1s infinite}
.score-popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);background:var(--accent-color);color:#000;font-size:1.8rem;font-weight:900;padding:10px 24px;border-radius:14px;pointer-events:none;z-index:100;white-space:nowrap;box-shadow:0 0 40px var(--accent-glow)}
.score-popup.show{animation:scorePopIn .6s ease forwards}
.score-popup.bad{background:var(--danger-color);color:#fff;box-shadow:0 0 40px rgba(255,71,87,.6)}
#map-guess-container{width:100%;height:260px;background:var(--surface-color);border-radius:14px!important;border:3px solid var(--border-strong);margin-bottom:16px;transition:border-color .3s;overflow:hidden;position:relative}
#map-guess-container:hover{border-color:var(--accent-color)}
.map-hint-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:5;transition:opacity .3s}
.map-hint-text{background:var(--glass-bg);border:1px solid var(--border-strong);border-radius:12px;padding:10px 16px;font-size:.85rem;font-weight:700;color:var(--text-muted);backdrop-filter:blur(8px);display:flex;align-items:center;gap:8px}
/* ========================================================
   DASHBOARD DE PERFIL PANORÁMICO (Responsive: PC & Mobile)
   ======================================================== */
/* 1. MÓVIL (COMPORTAMIENTO BASE: Apilado y scroll general) */
#profile-modal .modal-content {
    max-width: 1200px !important;
    height: 92vh !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important; /* Celular scrollea todo junto */
    overflow-x: hidden !important;
}

#profile-modal-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.split-profile-layout { 
    display: flex; 
    flex-direction: column; 
    width: 100%; 
}

/* En móvil, la carta queda centrada con márgenes limpios */
.left-fut-column { 
    width: 100%;
    padding: 30px 20px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    border-bottom: 2px dashed var(--border-subtle);
}

.right-dashboard-column { 
    width: 100%;
    padding: 30px 20px; 
    display: flex; 
    flex-direction: column; 
    gap: 20px;
}

.right-dashboard-top-row { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
}

/* En móvil, los logros se acomodan compactos */
.logros-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 10px;
    padding: 5px;
    max-height: none !important;
}

/* ========================================================
   2. PC (PANTALLAS GRANDES >= 992px: Dividido con doble scroll)
   ======================================================== */
@media(min-width: 992px) {
    #profile-modal .modal-content {
        overflow: hidden !important; /* Bloqueamos el scroll general en PC */
    }
    
    #profile-modal-body {
        min-height: 0; /* MAGIA FLEXBOX: Permite que las columnas tengan su propio scroll */
        height: 100%;
    }
    
    .split-profile-layout { 
        flex-direction: row; 
        align-items: stretch; 
        height: 100%;
    }
    
    /* La columna de la carta tiene su PROPIO SCROLL */
    .left-fut-column { 
        width: 380px; 
        flex-shrink: 0; 
        background: var(--surface-color);
        border-bottom: none;
        border-right: 2px solid var(--border-strong); 
        padding: 40px 25px 60px 25px; 
        overflow-y: auto !important; 
        scrollbar-width: thin; 
    }
    
    /* La columna de stats tiene su PROPIO SCROLL independiente */
    .right-dashboard-column { 
        flex: 1; 
        padding: 40px; 
        overflow-y: auto !important; 
        scrollbar-width: thin;
        background: var(--bg-color);
        min-height: 0;
        gap: 24px;
    }
    
    .right-dashboard-top-row { 
        display: grid; 
        grid-template-columns: 1fr 1.2fr; 
        gap: 24px; 
    }
    
    /* Agrandar el calendario automáticamente para PC */
    .right-dashboard-top-row .calendar-cell {
        width: 40px !important;
        height: 40px !important;
        font-size: 0.95rem !important;
    }
    .right-dashboard-top-row .calendar-day-label {
        font-size: 0.8rem !important;
        margin-bottom: 8px !important;
    }
    
    .right-dashboard-column .geoguessr-dash-box,
    .right-dashboard-top-row .xp-profile-section { 
        padding: 24px; 
        margin-bottom: 0 !important; 
    }
    
    /* Forzar a la vitrina a ocupar buen espacio y mostrar los logros sin aplastarse */
    .right-dashboard-column .geoguessr-dash-box:last-child {
        flex: 1 0 auto !important; /* MAGIA 1: Fuerza a la caja a crecer hacia abajo y anula el estilo en línea */
        min-height: 450px; 
        display: flex;
        flex-direction: column;
    }
    
    .logros-grid-v2 { 
        grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); 
        gap: 14px; 
        padding: 10px 5px 20px 5px; /* Un poco más de aire abajo */
        max-height: none !important; /* MAGIA 2: Destraba el límite de altura base que traía del celular */
        flex: 1 0 auto !important; /* MAGIA 3: Anula el aplastamiento interno */
        overflow-y: visible !important; 
    }
}
#customization-panel-wrapper{justify-content:flex-start}
#btn-toggle-custom{margin-left:0}
/* ========================================================
   CARTA FUT 18 - SILUETA EXACTA CON EFECTOS SIN SCROLLBAR
   ======================================================== */
.fut-card {
    position: relative;
    width: 250px;
    height: 385px;
    background-size: cover;
    padding: 24px 18px 25px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    font-family: 'Arial Black', Gadget, sans-serif;
    user-select: none;
    transition: all .4s cubic-bezier(.175, .885, .32, 1.275);
    flex-shrink: 0;

    /* 🛡️ Silueta de Pelé */
    clip-path: path('M 0,32 C 0,24 10,18 25,14 C 65,8 105,5 115,3 C 120,2 122,0 125,0 C 128,0 130,2 135,3 C 145,5 185,8 225,14 C 240,18 250,24 250,32 L 250,305 C 250,335 180,365 125,385 C 70,365 0,335 0,305 Z');

    /* 🌟 Sombra proyectada */
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.65));
}

/* 1. ✨ Rayos de luz radiantes y textura de fondo */
.fut-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.35) 0%, transparent 60%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 2px, transparent 2px, transparent 12px);
    pointer-events: none;
    z-index: 1;
}

/* 2. 💿 Reflejo Holográfico (Totalmente apagado e invisible por defecto) */
.fut-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        transparent 35%,
        rgba(255, 255, 255, 0.2) 46%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0.2) 54%,
        transparent 65%
    );
    background-size: 350% 350%;
    background-position: 100% 0%;
    opacity: 0; /* 🔒 Totalmente invisible al cargar la página */
    transition: background-position 0.85s ease-in-out, opacity 0.25s ease;
    pointer-events: none;
    z-index: 10;
}

/* Al pasar el mouse: se enciende, cruza la carta y al sacar el mouse se apaga al instante */
.fut-card:hover::after {
    opacity: 1; /* ✨ Se vuelve visible solo durante el hover */
    background-position: 0% 100%;
}

.fut-card:hover {
    transform: translateY(-8px) scale(1.02);
    filter: drop-shadow(0 18px 32px rgba(0, 230, 118, 0.4));
}

/* Eleva el contenido por encima de las luces */
.fut-card > * {
    position: relative;
    z-index: 2;
}

/* 3. 💧 Marca de agua "ESTADIOS VIRTUALES" */
.fut-stats-row {
    position: relative;
}
.fut-stats-row::after {
    content: 'ESTADIOS VIRTUALES';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.35rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: rgba(0, 0, 0, 0.15);
    pointer-events: none;
    white-space: nowrap;
    z-index: -1;
}
.fut-card.arg{background:linear-gradient(135deg,#74acdf 0%,#ffffff 50%,#74acdf 100%);color:#000;border-color:#74acdf}
.fut-card.arg .fut-name{border-bottom-color:rgba(0,0,0,.3)}
.fut-card.arg .fut-stat-label{opacity:.8}
.fut-card.bra{background:linear-gradient(135deg,#009c3b 0%,#ffdf00 45%,#002776 100%);color:#fff;border-color:#009c3b}
.fut-card.esp{background:linear-gradient(135deg,#aa151b 0%,#f1bf00 45%,#aa151b 100%);color:#000;border-color:#f1bf00}
.fut-card.ita{background:linear-gradient(135deg,#009246 0%,#ffffff 50%,#ce2b37 100%);color:#000;border-color:#009246}
.fut-card.fra{background:linear-gradient(135deg,#002395 0%,#ffffff 50%,#ed2939 100%);color:#000;border-color:#002395}
.fut-card.ger{background:linear-gradient(135deg,#000000 0%,#dd0000 50%,#ffce00 100%);color:#fff;border-color:#dd0000}
.fut-card.eng { background: linear-gradient(135deg, #ffffff 0%, #ce1126 100%); color: #000; border-color: #ce1126; }
.fut-card.por { background: linear-gradient(135deg, #046a38 0%, #ff0000 100%); color: #fff; border-color: #f1c400; }
.fut-card.uru { background: linear-gradient(135deg, #7badd3 0%, #ffffff 50%, #fcd116 100%); color: #000; border-color: #7badd3; }
.fut-card.mex { background: linear-gradient(135deg, #006847 0%, #ffffff 50%, #ce1126 100%); color: #000; border-color: #006847; }
.fut-card.col { background: linear-gradient(135deg, #fcd116 0%, #003893 50%, #ce1126 100%); color: #fff; border-color: #fcd116; }
.fut-card.chi { background: linear-gradient(135deg, #d52b1e 0%, #ffffff 50%, #0039a6 100%); color: #000; border-color: #d52b1e; }
.fut-card.ned { background: linear-gradient(135deg, #f36c21 0%, #ffffff 50%, #21468b 100%); color: #000; border-color: #f36c21; }
.fut-card.bel { background: linear-gradient(135deg, #e30613 0%, #fbd600 50%, #000000 100%); color: #fff; border-color: #e30613; }
.fut-card.cro { background: linear-gradient(135deg, #ed1c24 0%, #ffffff 50%, #005caa 100%); color: #000; border-color: #ed1c24; }
.fut-card.usa { background: linear-gradient(135deg, #002868 0%, #ffffff 50%, #bf0a30 100%); color: #000; border-color: #002868; }
.fut-card.jpn { background: linear-gradient(135deg, #000555 0%, #ffffff 50%, #ed1944 100%); color: #000; border-color: #000555; }
.fut-card.can { background: linear-gradient(135deg, #d52b1e 0%, #ffffff 50%, #d52b1e 100%); color: #000; border-color: #d52b1e; }
.fut-card.mar { background: linear-gradient(135deg, #c1272d 0%, #006233 100%); color: #fff; border-color: #006233; }
.fut-card.sen { background: linear-gradient(135deg, #00853f 0%, #fdef42 50%, #e31b23 100%); color: #000; border-color: #00853f; }
.fut-card.kor { background: linear-gradient(135deg, #ffffff 0%, #cd2e3a 50%, #0f64cd 100%); color: #000; border-color: #cd2e3a; }
.fut-card.aus { background: linear-gradient(135deg, #ffcd00 0%, #008751 100%); color: #000; border-color: #008751; }
.fut-card.sui { background: linear-gradient(135deg, #d52b1e 0%, #ffffff 100%); color: #000; border-color: #d52b1e; }
.fut-card.ecu { background: linear-gradient(135deg, #ffdd00 40%, #034ea2 70%, #ed1c24 100%); color: #000; border-color: #ffdd00; }
.fut-card.per { background: linear-gradient(135deg, #d91023 0%, #ffffff 50%, #d91023 100%); color: #000; border-color: #d91023; }
.fut-card.den { background: linear-gradient(135deg, #c60c30 0%, #ffffff 100%); color: #000; border-color: #c60c30; }
.fut-card.srb { background: linear-gradient(135deg, #c6363c 0%, #0c4076 50%, #ffffff 100%); color: #fff; border-color: #c6363c; }
.fut-card.pol { background: linear-gradient(135deg, #ffffff 0%, #dc143c 100%); color: #000; border-color: #dc143c; }
.fut-card.wal { background: linear-gradient(135deg, #d30731 0%, #ffffff 50%, #00ad36 100%); color: #000; border-color: #d30731; }
.fut-card.swe { background: linear-gradient(135deg, #fecc00 0%, #006aa7 100%); color: #000; border-color: #fecc00; }
.fut-card.civ { background: linear-gradient(135deg, #f77f00 0%, #ffffff 50%, #009e60 100%); color: #000; border-color: #f77f00; }
.fut-card.cmr { background: linear-gradient(135deg, #007a5e 0%, #ce1126 50%, #fcd116 100%); color: #fff; border-color: #007a5e; }
.fut-card.gha { background: linear-gradient(135deg, #ce1126 0%, #fcd116 50%, #006b3f 100%); color: #000; border-color: #ce1126; }
.fut-card.nga { background: linear-gradient(135deg, #008751 0%, #ffffff 50%, #008751 100%); color: #000; border-color: #008751; }
.fut-card.ksa { background: linear-gradient(135deg, #006a4e 0%, #ffffff 100%); color: #fff; border-color: #006a4e; }
.fut-card.irn { background: linear-gradient(135deg, #239f40 0%, #ffffff 50%, #da0000 100%); color: #000; border-color: #239f40; }
.fut-card.egy { background: linear-gradient(135deg, #ce1126 0%, #ffffff 50%, #000000 100%); color: #000; border-color: #ce1126; }
.fut-card.alg { background: linear-gradient(135deg, #006233 0%, #ffffff 50%, #d21034 100%); color: #000; border-color: #006233; }
.fut-card.tun { background: linear-gradient(135deg, #e70013 0%, #ffffff 100%); color: #000; border-color: #e70013; }
.fut-card.mli { background: linear-gradient(135deg, #14b53a 0%, #fcd116 50%, #ce1126 100%); color: #000; border-color: #14b53a; }
.fut-card.qat { background: linear-gradient(135deg, #8d1b3d 0%, #ffffff 100%); color: #fff; border-color: #8d1b3d; }
.fut-card.par { background: linear-gradient(135deg, #d52b1e 0%, #ffffff 50%, #0038a8 100%); color: #000; border-color: #d52b1e; }
.fut-card.ven { background: linear-gradient(135deg, #fce300 0%, #0038a8 50%, #ce1126 100%); color: #000; border-color: #fce300; }
.fut-card.bol { background: linear-gradient(135deg, #d52b1e 0%, #fcd116 50%, #007a33 100%); color: #fff; border-color: #d52b1e; }
.fut-card.crc { background: linear-gradient(135deg, #002b7f 0%, #ffffff 50%, #ce1126 100%); color: #000; border-color: #002b7f; }
.fut-card.pan { background: linear-gradient(135deg, #005293 0%, #ffffff 50%, #d21034 100%); color: #000; border-color: #005293; }
.fut-card.jam { background: linear-gradient(135deg, #009b3a 0%, #fed100 50%, #000000 100%); color: #fff; border-color: #009b3a; }
.fut-card.nzl { background: linear-gradient(135deg, #ffffff 0%, #000000 100%); color: #000; border-color: #000000; }
.fut-card-shine{position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,transparent 50%,rgba(255,255,255,.04) 100%);pointer-events:none}
.fut-top{display:flex;width:100%;height:50%;margin-top:15px}
.fut-badge-meta{width:35%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.fut-ovr{font-size:2.8rem;font-weight:900;letter-spacing:-1px}
.fut-pos{font-size:1rem;font-weight:900;text-transform:uppercase;opacity:.8;margin-top:-2px}
.fut-club-icon{width:40px;height:40px;margin-top:10px;object-fit:contain}
.fut-name{width:100%;text-align:center;font-size:1.35rem;font-weight:900;margin:12px 0 8px;text-transform:uppercase;letter-spacing:-.5px;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fut-stats-row{display:grid;grid-template-columns:repeat(2,1fr);width:95%;font-size:.95rem;gap:8px 15px;margin-top:5px}
.fut-stats-row .fut-stat-item:last-child {
    grid-column: span 2;
}
.fut-stat-item{display:flex;gap:6px;justify-content:center}
.fut-stat-num{font-weight:900;font-size:1.15rem}
.fut-stat-label{opacity:.8;font-size:.8rem;align-self:flex-end;margin-bottom:1px}
.fut-avatar-container{width:65%;height:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;overflow:hidden}
/* ========================================================
   NUEVO AVATAR: ACABADO INTERACTIVO 3D ESTILO "CRACK"
   ======================================================== */

/* Contenedor: Lo bajamos a bottom 72px para ganar espacio arriba y evitar cortes de cabeza */
/* ========================================================
   REDISEÑO DE AVATAR: JUGADOR 2D FLAT VECTOR (ESTILO 27.PNG)
   ======================================================== */

/* ── A. LA CABEZA (FORMA DE GLOBO Y EXPRESIÓN VECTORIAL) ── */
/* ========================================================
   RESTAURACIÓN: AVATAR ORIGINAL ESTILO BLOCK (10_3.PNG)
   ======================================================== */

.ac-avatar { position: absolute; bottom: 84px; z-index: 5; width: 68px; height: 60px; transition: transform .3s cubic-bezier(.175,.885,.32,1.275); }
.ac-head-base { width: 100%; height: 100%; background: #e2b999; border-radius: 45% 45% 35% 35%; position: relative; box-shadow: inset -4px -4px 10px rgba(0,0,0,0.15), 0 6px 12px rgba(0,0,0,0.3); border: 2px solid #c89f81; }
.ac-ear { width: 18px; height: 18px; background: #e2b999; border-radius: 50%; position: absolute; top: 22px; border: 2px solid #c89f81; z-index: -1; }
.ac-ear.left { left: -8px; box-shadow: inset -2px -2px 4px rgba(0,0,0,0.1); }
.ac-ear.right { right: -8px; box-shadow: inset 2px -2px 4px rgba(0,0,0,0.1); }
.ac-hair-base { width: 110%; height: 26px; background: #4a2e1b; position: absolute; top: -4px; left: -5%; border-radius: 50% 50% 15% 15%; border-bottom: 2px solid #301d10; z-index: 2; }
.ac-hair-spike { position: absolute; top: -12px; right: 12px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 16px solid #4a2e1b; transform: rotate(20deg); }
.ac-hair-spike2 { position: absolute; top: -8px; left: 15px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid #4a2e1b; transform: rotate(-15deg); }
.ac-eye { width: 8px; height: 14px; background: #111; border-radius: 50%; position: absolute; top: 26px; z-index: 2;}
.ac-eye.left { left: 16px; }
.ac-eye.right { right: 16px; }
.ac-eye::after { content: ''; position: absolute; top: 2px; right: 2px; width: 3px; height: 4px; background: #fff; border-radius: 50%; }
.ac-nose { width: 8px; height: 5px; background: #d4a788; border-radius: 50%; position: absolute; top: 38px; left: 30px; z-index: 2;}
.ac-mouth { width: 14px; height: 7px; border-bottom: 2px solid #a66a41; border-radius: 0 0 50% 50%; position: absolute; top: 43px; left: 27px; z-index: 2;}

.fut-player-body { position: absolute; bottom: -5px; width: 120px; height: 100px; display: flex; flex-direction: column; align-items: center; z-index: 4; }
.fut-player-neck { width: 16px; height: 18px; background: #e2b999; border-radius: 0 0 8px 8px; position: relative; z-index: 2; box-shadow: inset 0 3px 5px rgba(0,0,0,0.3); }
.fut-player-torso { position: relative; width: 100%; height: 85px; display: flex; justify-content: center; margin-top: -6px; }
.fut-player-shirt { width: 64px; height: 100%; border-radius: 18px 18px 5px 5px; z-index: 3; position: relative; box-shadow: inset 0 5px 12px rgba(255,255,255,0.25), 0 4px 10px rgba(0,0,0,0.5); display: flex; flex-direction: column; align-items: center; border: 1px solid rgba(255,255,255,0.2); border-bottom: none; }
.fut-player-collar { width: 24px; height: 10px; border: 3px solid rgba(255,255,255,.9); border-top: none; border-radius: 0 0 12px 12px; margin-top: 0; }
.fut-player-number { font-size: 1.6rem; font-weight: 900; color: rgba(255,255,255,.9); font-family: 'Arial Black', sans-serif; text-shadow: 0 2px 4px rgba(0,0,0,.5); margin-top: 6px; }

.fut-player-arm { width: 15px; height: 65px; background: #e2b999; position: absolute; top: 6px; border-radius: 10px; box-shadow: inset -2px 0 4px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.3); z-index: 2; }
.fut-player-arm::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 26px; border-radius: 10px 10px 4px 4px; box-shadow: inset 0 -3px 4px rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,0.15); border-bottom: none; }
.fut-player-arm::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 15px; background: #d4a788; border-radius: 10px; }
.fut-player-arm.left { left: 12px; transform: rotate(18deg); transform-origin: top center; }
.fut-player-arm.right { right: 12px; transform: rotate(-18deg); transform-origin: top center; }
.avatar-picker{background:var(--surface-color);border:2px solid var(--border-strong);border-radius:16px;padding:20px;margin-top:14px;width:100%;max-width:320px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.avatar-picker-label{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--text-main);background:var(--bg-color);border:2px solid var(--border-strong);padding:10px 12px;border-radius:12px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:6px;cursor:pointer;user-select:none;transition:all .2s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,0.05)}
.avatar-picker-label:hover{border-color:var(--accent-color);color:var(--accent-color);background:var(--surface-hover);transform:translateY(-1px)}
.theme-preview-strip{display:none;grid-template-columns:repeat(auto-fill, minmax(45px, 1fr));gap:6px;margin-bottom:16px}
.theme-preview-strip.open{display:grid}
.theme-dot{width:100%;aspect-ratio:1.3;border-radius:8px;cursor:pointer;border:2px solid var(--border-subtle);transition:all .2s;position:relative;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:800;color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.9);overflow:hidden}
.theme-dot:hover{border-color:rgba(255,255,255,.5);transform:scale(1.08)}
.theme-dot.active{border-color:var(--accent-color);box-shadow:0 0 12px var(--accent-glow);transform:scale(1.1)}
.theme-dot::after{content:'';position:absolute;inset:0;border-radius:6px;background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 60%);pointer-events:none}
.td-arg{background:linear-gradient(180deg,#74acdf 33%,#fff 33%,#fff 66%,#74acdf 66%); color: #000;}
.td-bra{background:linear-gradient(135deg,#009c3b,#ffdf00,#002776)}
.td-esp{background:linear-gradient(135deg,#aa151b,#f1bf00,#aa151b); color: #000;}
.td-ita{background:linear-gradient(135deg,#009246,#fff,#ce2b37); color: #000;}
.td-fra{background:linear-gradient(135deg,#002395,#fff,#ed2939); color: #000;}
.td-ger{background:linear-gradient(135deg,#000,#dd0000,#ffce00)}
.td-eng { background: linear-gradient(135deg, #fff, #ce1126); color: #000; }
.td-por { background: linear-gradient(135deg, #046a38, #ff0000); }
.td-uru { background: linear-gradient(135deg, #7badd3, #fff, #fcd116); color: #000; }
.td-mex { background: linear-gradient(135deg, #006847, #fff, #ce1126); color: #000; }
.td-col { background: linear-gradient(135deg, #fcd116, #003893, #ce1126); }
.td-chi { background: linear-gradient(135deg, #d52b1e, #fff, #0039a6); color: #000; }
.td-ned { background: linear-gradient(135deg, #f36c21, #fff, #21468b); color: #000; }
.td-bel { background: linear-gradient(135deg, #e30613, #fbd600, #000); }
.td-cro { background: linear-gradient(135deg, #ed1c24, #fff, #005caa); color: #000; }
.td-usa { background: linear-gradient(135deg, #002868, #fff, #bf0a30); color: #000; }
.td-jpn { background: linear-gradient(135deg, #000555, #fff, #ed1944); color: #000; }
.td-can { background: linear-gradient(135deg, #d52b1e, #fff, #d52b1e); color: #000; }
.td-mar { background: linear-gradient(135deg, #c1272d, #006233); color: #fff; }
.td-sen { background: linear-gradient(135deg, #00853f, #fdef42, #e31b23); color: #000; }
.td-kor { background: linear-gradient(135deg, #fff, #cd2e3a, #0f64cd); color: #000; }
.td-aus { background: linear-gradient(135deg, #ffcd00, #008751); color: #000; }
.td-sui { background: linear-gradient(135deg, #d52b1e, #fff); color: #000; }
.td-ecu { background: linear-gradient(135deg, #ffdd00, #034ea2, #ed1c24); color: #000; }
.td-per { background: linear-gradient(135deg, #d91023, #fff, #d91023); color: #000; }
.td-den { background: linear-gradient(135deg, #c60c30, #fff); color: #000; }
.td-srb { background: linear-gradient(135deg, #c6363c, #0c4076, #fff); color: #fff; }
.td-pol { background: linear-gradient(135deg, #fff, #dc143c); color: #000; }
.td-wal { background: linear-gradient(135deg, #d30731, #fff, #00ad36); color: #000; }
.td-swe { background: linear-gradient(135deg, #fecc00, #006aa7); color: #000; }
.td-civ { background: linear-gradient(135deg, #f77f00, #fff, #009e60); color: #000; }
.td-cmr { background: linear-gradient(135deg, #007a5e, #ce1126, #fcd116); color: #fff; }
.td-gha { background: linear-gradient(135deg, #ce1126, #fcd116, #006b3f); color: #000; }
.td-nga { background: linear-gradient(135deg, #008751, #fff, #008751); color: #000; }
.td-ksa { background: linear-gradient(135deg, #006a4e, #fff); color: #fff; }
.td-irn { background: linear-gradient(135deg, #239f40, #fff, #da0000); color: #000; }
.td-egy { background: linear-gradient(135deg, #ce1126, #fff, #000); color: #000; }
.td-alg { background: linear-gradient(135deg, #006233, #fff, #d21034); color: #000; }
.td-tun { background: linear-gradient(135deg, #e70013, #fff); color: #000; }
.td-mli { background: linear-gradient(135deg, #14b53a, #fcd116, #ce1126); color: #000; }
.td-qat { background: linear-gradient(135deg, #8d1b3d, #fff); color: #fff; }
.td-par { background: linear-gradient(135deg, #d52b1e, #fff, #0038a8); color: #000; }
.td-ven { background: linear-gradient(135deg, #fce300, #0038a8, #ce1126); color: #000; }
.td-bol { background: linear-gradient(135deg, #d52b1e, #fcd116, #007a33); color: #fff; }
.td-crc { background: linear-gradient(135deg, #002b7f, #fff, #ce1126); color: #000; }
.td-pan { background: linear-gradient(135deg, #005293, #fff, #d21034); color: #000; }
.td-jam { background: linear-gradient(135deg, #009b3a, #fed100, #00); color: #fff; }
.td-nzl { background: linear-gradient(135deg, #fff, #000); color: #000; }
.theme-dot .td-label{position:relative;z-index:2;line-height:1;text-align:center;padding:0 2px}
.avatar-divider{height:1px;background:var(--border-strong);margin:14px 0}
.avatar-nick-label{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:6px;display:block}
.avatar-nickname-row{display:flex;gap:7px;align-items:center;margin-bottom:12px}
.avatar-nickname-input{flex:1;background:var(--bg-color);border:2px solid var(--border-strong);border-radius:10px;padding:10px 12px;color:var(--text-main);font-size:.9rem;font-weight:700;outline:none;transition:border-color .2s;min-width:0}
.avatar-nickname-input:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px var(--accent-dim)}
.avatar-nickname-input::placeholder{color:var(--text-muted);font-weight:400}
.avatar-pos-select{width:100%;background:var(--bg-color);border:2px solid var(--border-strong);border-radius:10px;padding:10px 12px;color:var(--text-main);font-size:.9rem;font-weight:700;outline:none;transition:border-color .2s;cursor:pointer;margin-bottom:12px}
.avatar-pos-select:focus{border-color:var(--accent-color)}
.avatar-save-btn{background:var(--accent-color);color:#000;border:none;border-radius:12px;padding:12px 14px;font-size:.9rem;font-weight:800;cursor:pointer;transition:all .18s;width:100%;box-shadow:0 4px 0 #0a7a3a;display:flex;align-items:center;justify-content:center;gap:8px}
.avatar-save-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 #0a7a3a,0 8px 16px var(--accent-glow)}
.avatar-save-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #0a7a3a}
#customization-panel-wrapper{overflow:hidden;max-height:0;opacity:0;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease;width:100%;display:flex;justify-content:center;flex-shrink:0;}
#customization-panel-wrapper.open{max-height:1200px;opacity:1;margin-bottom:20px;}

/* Scrollbars oscuros globales para CUALQUIER elemento dentro del perfil */
#profile-modal * {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
#profile-modal *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
#profile-modal *::-webkit-scrollbar-track {
    background: transparent;
}
#profile-modal *::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 10px;
}
#profile-modal *::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}
#btn-toggle-custom{transition:all .3s ease}
#btn-toggle-custom.active-panel{background:var(--accent-dim);border-color:var(--accent-color);color:var(--accent-color)}
.xp-profile-section{background:var(--bg-color);border:2px solid var(--border-strong);border-radius:16px;padding:16px;margin-bottom:14px}
.xp-level-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.xp-level-name{font-size:1rem;font-weight:900}
.xp-progress-label{font-size:.75rem;color:var(--text-muted);font-weight:700}
.xp-bar-big{height:10px;border-radius:20px;background:var(--border-subtle);overflow:hidden;margin-bottom:6px}
.xp-bar-big-fill{height:100%;border-radius:20px;background:linear-gradient(90deg,var(--accent-color),var(--accent-hover));box-shadow:0 0 10px var(--accent-glow);transition:width 1.5s cubic-bezier(.4,0,.2,1)}
.xp-milestones{display:flex;justify-content:space-between;font-size:.68rem;color:var(--text-muted)}
.geoguessr-dash-box{background:var(--surface-color);border:2px solid var(--border-strong);border-radius:16px;padding:14px 18px;margin-bottom:14px}
.dash-header-inline{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:8px;border-bottom:2px dashed var(--border-subtle)}
.dash-title-premium{font-size:.95rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--text-main);display:flex;align-items:center;gap:8px}
/* ========================================================
   ESTILOS DE CALENDARIO Y RACHA ACTIVA
   ======================================================== */
.streak-fire-badge {
    background: rgba(255, 143, 0, 0.12);
    color: #ff9f05;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 800;
    border: 1.5px solid rgba(255, 143, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 0 10px rgba(255, 143, 0, 0.15);
}

.calendar-matrix { 
    display: grid; 
    grid-template-columns: repeat(7, 1fr); 
    gap: 6px; 
    text-align: center; 
    background: rgba(0,0,0,0.15); 
    border-radius: 12px; 
    padding: 12px; 
    border: 1px solid var(--border-subtle); 
    margin-top: 10px; 
}

.calendar-day-label { 
    font-size: .6rem; 
    color: var(--text-muted); 
    font-weight: 800; 
    margin-bottom: 2px; 
}

.calendar-cell { 
    font-size: .75rem; 
    width: 26px; 
    height: 26px; 
    margin: 0 auto; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 50%; 
    background: var(--bg-color); 
    color: var(--text-muted); 
    font-weight: 700; 
    border: 1px solid var(--border-subtle); 
    transition: all .25s ease;
    position: relative;
}

/* 🔥 1. Racha Activa (Días de la racha encendida actual) */
.calendar-cell.streak-active { 
    color: #000 !important; 
    background: var(--accent-color) !important; 
    border-color: var(--accent-color) !important; 
    box-shadow: 0 0 12px var(--accent-glow), 0 0 4px var(--accent-color) !important; 
    transform: scale(1.12); 
    font-weight: 900 !important; 
    z-index: 2;
}

/* ✓ 2. Racha Vieja / Días pasados completados (Verde Muted) */
.calendar-cell.past-done { 
    color: var(--accent-color) !important; 
    background: var(--accent-dim) !important; 
    border-color: rgba(0, 230, 118, 0.3) !important; 
    font-weight: 700 !important; 
    opacity: 0.75;
}

/* ❌ 3. Días pasados sin actividad (Perdidos) */
.calendar-cell.past-missed { 
    background: rgba(0, 0, 0, 0.25) !important; 
    color: rgba(255, 255, 255, 0.25) !important; 
    border-color: transparent !important;
}

/* ⚪ 4. Días futuros */
.calendar-cell.future-day { 
    background: transparent !important; 
    color: var(--text-muted) !important; 
    border: 1px dashed var(--border-subtle) !important; 
    opacity: 0.35;
}
/* ========================================================
   PESTAÑAS DE LOGROS MÓVILES (ESPACIADO Y SLIDE)
   ======================================================== */
.logros-tabs-row {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    background: var(--bg-color);
    padding: 4px;
    border-radius: 12px;
    border: 2px solid var(--border-strong);
    overflow-x: auto; /* Permite desplazamiento si la pantalla es muy chica */
    scrollbar-width: none; /* Oculta la barra fea de scroll en Firefox */
}

.logros-tabs-row::-webkit-scrollbar {
    display: none; /* Oculta la barra de scroll en Chrome/Safari */
}

.logro-tab-btn {
    flex: 1 0 auto; /* Evita que las pestañas se aplasten */
    min-width: max-content;
    padding: 7px 10px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px; /* Separación fija e impecable entre el emoticón y el texto */
}
.logro-tab-btn.active{background:var(--accent-color);color:#000;box-shadow:0 2px 8px var(--accent-glow)}
.logro-tab-btn:hover:not(.active){background:var(--surface-hover);color:var(--text-main)}
.logros-grid-v2{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:480px;overflow-y:auto;padding:2px;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.logro-card-v2{display:flex;flex-direction:column;align-items:center;background:var(--bg-color);padding:12px 6px 10px;border-radius:14px;border:2px solid var(--border-subtle);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:default;position:relative;overflow:hidden;text-align:center}
.logro-card-v2.unlocked{border-color:var(--accent-color);background:linear-gradient(135deg,rgba(0,230,118,.07) 0%,var(--bg-color) 70%)}
.logro-card-v2.unlocked:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 24px var(--accent-glow);border-color:var(--accent-hover)}
.logro-card-v2.rare.unlocked{border-color:#a78bfa;background:linear-gradient(135deg,rgba(167,139,250,.09) 0%,var(--bg-color) 70%);box-shadow:0 0 18px rgba(167,139,250,.2)}
.logro-card-v2.rare.unlocked:hover{box-shadow:0 8px 24px rgba(167,139,250,.35)}
.logro-card-v2.epic.unlocked{border-color:#eab308;background:linear-gradient(135deg,rgba(234,179,8,.09) 0%,var(--bg-color) 70%);box-shadow:0 0 18px rgba(234,179,8,.2)}
.logro-card-v2.epic.unlocked:hover{box-shadow:0 8px 28px rgba(234,179,8,.4)}
.logro-card-v2.in-progress{border-color:rgba(0,230,118,.35);border-style:dashed}
.logro-card-v2.in-progress:hover{border-color:var(--accent-color);transform:translateY(-2px)}
.logro-card-v2.locked{opacity:.35;filter:grayscale(75%)}
.logro-icon-v2{font-size:1.9rem;margin-bottom:5px;line-height:1;transition:transform .3s}
.logro-card-v2.unlocked:hover .logro-icon-v2{transform:scale(1.2) rotate(-5deg)}
.logro-name-v2{font-size:.6rem;font-weight:800;color:var(--text-main);text-transform:uppercase;letter-spacing:.4px;line-height:1.2;margin-bottom:3px}
.logro-req-v2{font-size:.55rem;color:var(--text-muted);line-height:1.35;font-weight:600;margin-bottom:5px}
.logro-rarity-pill{font-size:.5rem;font-weight:900;text-transform:uppercase;letter-spacing:.5px;padding:2px 6px;border-radius:20px;margin-top:auto}
.logro-card-v2:not(.rare):not(.epic) .logro-rarity-pill{background:rgba(156,163,175,.18);color:#9ca3af}
.logro-card-v2.rare .logro-rarity-pill{background:rgba(167,139,250,.18);color:#a78bfa}
.logro-card-v2.epic .logro-rarity-pill{background:rgba(234,179,8,.18);color:#eab308}
.logro-progress-mini{width:100%;margin-top:5px}
.logro-progress-bar-bg{width:100%;height:3px;border-radius:20px;background:var(--border-subtle);overflow:hidden}
.logro-progress-bar-fill{height:100%;border-radius:20px;background:var(--accent-color);transition:width 1.2s ease}
.logro-progress-text{font-size:.52rem;color:var(--text-muted);margin-top:2px;font-weight:700;text-align:center}
.logro-unlock-badge{position:absolute;top:0;right:0;background:var(--accent-color);color:#000;border-radius:0 12px 0 10px;width:18px;height:18px;display:none;align-items:center;justify-content:center;font-size:.65rem;font-weight:900}
.logro-card-v2.unlocked .logro-unlock-badge{display:flex}
.logros-empty{grid-column:1/-1;text-align:center;padding:28px 10px;color:var(--text-muted);font-size:.82rem;display:flex;flex-direction:column;align-items:center;gap:8px}
.logros-empty i{font-size:2rem;color:var(--border-strong)}
#login-modal-overlay{display:none;position:fixed;inset:0;background:var(--modal-overlay);z-index:9000;justify-content:center;align-items:center;backdrop-filter:blur(12px)}
#login-modal-overlay.active{display:flex}
.login-modal-box{position: relative; background:var(--card-bg);border:1px solid var(--border-strong);border-radius:22px;width:90%;max-width:440px;padding:36px;display:flex;flex-direction:column;align-items:center;box-shadow:var(--shadow-strong);animation:bounceFun .4s ease}
.login-modal-logo{width:56px;height:56px;border-radius:16px;border:2px solid var(--accent-color);object-fit:cover;margin-bottom:18px;box-shadow:0 0 18px var(--accent-glow)}
.login-modal-title{font-size:1.4rem;font-weight:900;margin-bottom:6px;color:var(--text-main)}
.login-modal-sub{font-size:.9rem;color:var(--text-muted);margin-bottom:28px;text-align:center;line-height:1.5}
#google-signin-btn-container{width:100%;display:flex;justify-content:center;margin-bottom:16px}
.google-wall{background:var(--surface-color);border:2px dashed var(--border-strong);border-radius:18px;padding:28px 22px;text-align:center;margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:12px}
.google-wall-icon{font-size:2.8rem;color:var(--accent-color);filter:drop-shadow(0 0 12px var(--accent-glow))}
.google-wall h3{font-size:1.1rem;font-weight:800;color:var(--text-main);margin:0}
.google-wall p{font-size:.88rem;color:var(--text-muted);line-height:1.55;margin:0}
#privacy-modal-overlay{display:none;position:fixed;inset:0;background:var(--modal-overlay);z-index:9999;justify-content:center;align-items:center;backdrop-filter:blur(12px)}
#privacy-modal-overlay.active{display:flex}
.privacy-modal-box{position:relative;background:var(--card-bg);border:1px solid var(--border-strong);border-radius:22px;width:90%;max-width:620px;max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--shadow-strong);overflow:hidden;animation:bounceFun .4s ease}
.privacy-modal-header{padding:26px 55px 18px 30px;border-bottom:2px dashed var(--border-subtle);flex-shrink:0}
.privacy-modal-header h2{font-size:1.3rem;font-weight:800;color:var(--text-main);display:flex;align-items:center;gap:12px;margin-bottom:8px}
.privacy-modal-header p{font-size:.92rem;color:var(--text-muted);line-height:1.5}
.privacy-modal-body{padding:22px 28px;overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.privacy-section-title{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--accent-color);margin:20px 0 8px;padding-bottom:6px;border-bottom:2px solid var(--border-subtle)}
.privacy-modal-body p{font-size:.9rem;color:var(--text-muted);line-height:1.65;margin-bottom:10px}
.privacy-modal-body ul{padding-left:20px;margin-bottom:10px}
.privacy-modal-body li{font-size:.88rem;color:var(--text-muted);line-height:1.6;margin-bottom:6px}
.privacy-modal-body strong{color:var(--text-main);font-weight:800}
.privacy-modal-body a{color:var(--accent-color);text-decoration:none}
.privacy-read-indicator{font-size:.82rem;color:var(--text-muted);text-align:center;padding:12px 0 8px;transition:color .3s;font-weight:700;display:flex;justify-content:center;align-items:center;gap:7px}
.privacy-read-indicator.ready{color:var(--accent-color)}
.privacy-modal-footer{padding:18px 28px 24px;border-top:2px dashed var(--border-subtle);flex-shrink:0;background:var(--surface-color)}
.privacy-checkbox-row{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.privacy-checkbox-row input[type="checkbox"]{width:20px;height:20px;cursor:pointer;accent-color:var(--accent-color);flex-shrink:0;margin-top:2px}
.privacy-checkbox-row label{font-size:.9rem;color:var(--text-muted);line-height:1.5;cursor:pointer;font-weight:600}
.privacy-checkbox-row label a{color:var(--accent-color);font-weight:800}
.btn-3d primary{width:100%;padding:15px;font-size:1rem;}
.social-floating-container{position:relative;display:flex;justify-content:center;gap:16px;margin:50px auto 20px auto;width:100%;z-index:10}
.social-icon-btn{width:48px;height:48px;border-radius:14px;background:var(--card-bg);border:2px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--text-muted);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.35);text-decoration:none}
.social-icon-btn:hover{border-color:var(--accent-color);color:#000;background:var(--accent-color);transform:translateY(-6px);box-shadow:0 10px 0 #0a7a3a,0 14px 25px var(--accent-glow)}
.skeleton{background:linear-gradient(90deg,var(--surface-color) 25%,var(--border-subtle) 50%,var(--surface-color) 75%);background-size:800px 100%;animation:shimmer 1.6s infinite;border-radius:8px}
.loading-card{background:var(--card-bg);border-radius:20px;border:1px solid var(--border-subtle);overflow:hidden;display:flex;flex-direction:column}
.loading-card-img{height:190px;border-radius:0}
.loading-card-body{padding:20px 22px 22px}
.loading-card-title{height:20px;width:70%;margin-bottom:12px}
.loading-card-sub{height:14px;width:50%;margin-bottom:24px}
.loading-card-btn{height:46px;border-radius:12px}
.toast-container{position:fixed;bottom:80px;right:22px;z-index:9999;display:flex;flex-direction:column;gap:10px}
.toast{background:var(--card-bg);border:1px solid var(--border-strong);border-left:4px solid var(--accent-color);padding:14px 18px;border-radius:14px;box-shadow:var(--shadow-strong);color:var(--text-main);font-size:.88rem;font-weight:600;max-width:320px;display:flex;align-items:center;gap:10px;animation:fadeSlideUp .3s ease}
.toast.danger{border-left-color:var(--danger-color)}
.empty-state{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--text-muted)}
.empty-state-icon{font-size:3.5rem;margin-bottom:16px;color:var(--border-strong);display:block}
.empty-state h3{font-size:1.1rem;margin-bottom:6px;color:var(--text-main);font-weight:700}
.order-slot{display:flex;align-items:center;gap:12px;width:100%;border-radius:14px;padding:11px 14px;cursor:pointer;transition:all .2s;margin-bottom:10px}
.order-slot:hover:not(.revealed){transform:translateY(-2px)}
.order-slot.selected{transform:translateY(-3px)}
.order-slot.correct-reveal{animation:correctPulse .6s ease}
.order-slot.wrong-reveal{animation:wrongShake .4s ease}
.result-score-ring{position:relative;width:120px;height:120px;margin:0 auto 20px}
.result-score-ring svg{transform:rotate(-90deg)}
.result-score-ring .score-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}
.result-dist-tag{display:inline-flex;align-items:center;gap:6px;background:var(--surface-color);border:2px solid var(--border-strong);border-radius:20px;padding:6px 14px;font-size:.85rem;font-weight:800;color:var(--text-muted);margin-bottom:16px}
@media(min-width:769px){
.modal-content.stadium-guessr-layout{flex-direction:row!important}
.modal-content.stadium-guessr-layout .video-container{width:58%!important;height:100%!important;border-radius:22px 0 0 22px!important}
.modal-content.stadium-guessr-layout #game-ui{width:42%!important;height:100%!important;border-top:none!important;border-left:2px solid var(--border-strong);display:flex!important;flex-direction:column!important;justify-content:space-between!important;border-radius:0 22px 22px 0!important;padding:24px!important}
.modal-content.stadium-guessr-layout #map-guess-container{flex-grow:1!important;height:100%!important;min-height:350px!important}
}
@media(max-width:768px){
.app-header{padding:12px 16px}
.app-title{font-size:1.05rem}
.welcome-heading{font-size:2.2rem}
.game-modes{grid-template-columns:1fr}
.grid{grid-template-columns:1fr;gap:18px;padding:0 16px}
.tabs-container{grid-template-columns:1fr 1fr}
.section-ligas{padding:0 16px;flex:0 0 auto;width:100%}
.catalogo-layout{flex-direction:column;padding:0;margin-top:24px !important}

/* 📱 CONTROL COMPACTO Y PROPORCIONADO DE MODALES EN CELULAR */
.modal-content {
    width: 92% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 85vh !important;
    border-radius: 18px !important;
    padding: 16px 14px !important;
}

/* 🎬 REPRODUCTOR DE VIDEO (VUELO ALEATORIO / VER ESTADIO) EN CELULAR */
#video-modal .modal-content:not(.stadium-guessr-layout):not(.resultado-final-layout) {
    width: 98% !important;
    height: 68vh !important;
    padding: 0 !important;
}

/* 📺 EN CELULAR: El video pasa a ocupar el 54% de la pantalla (más grande que el mapa) y la UI el 46% */
.modal-content.stadium-guessr-layout{height:88vh!important; padding: 0 !important;}
.modal-content.stadium-guessr-layout .video-container{height:54%!important;border-radius:18px 18px 0 0!important}
.modal-content.stadium-guessr-layout #game-ui{height:46%!important;padding:8px 12px!important;display:flex!important;flex-direction:column!important;border-radius:0 0 18px 18px!important;overflow-y:auto!important;scrollbar-width:none;}
.modal-content.stadium-guessr-layout #game-ui::-webkit-scrollbar{display:none;}
.modal-content.stadium-guessr-layout #map-guess-container{flex-grow:1!important;min-height:110px!important;margin-bottom:8px!important}

.login-modal-box,
.privacy-modal-box {
    padding: 22px 16px !important;
    border-radius: 18px !important;
}

.header-level-badge{display:none}
.logros-grid-v2{grid-template-columns:repeat(2,1fr)}
.split-profile-layout{flex-direction:column}
}
@media(max-width:480px){
.tabs-container{grid-template-columns:1fr}
.logros-grid-v2{grid-template-columns:repeat(2,1fr)}
}
/* ========================================================
   REDISEÑO MODO OSCURO (ESTILOS EXCLUSIVOS CON DATA-THEME DARK)
   ======================================================== */
[data-theme="dark"] body {
    background-color: #05070f !important;
    background-image: 
        radial-gradient(circle at 15% 0%, rgba(0, 255, 119, 0.12) 0%, transparent 65%),
        radial-gradient(circle at 85% 0%, rgba(41, 121, 255, 0.10) 0%, transparent 65%),
        radial-gradient(circle at 50% 100%, rgba(10, 35, 21, 0.5) 0%, transparent 75%) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-size: cover !important;
    color: #ffffff !important;
}

[data-theme="dark"] .welcome-heading {
    font-size: 3.2rem;
    font-weight: 900 !important;
    text-transform: uppercase !important; 
    letter-spacing: -1px !important;       
    text-shadow: 3px 3px 0px #000000 !important;
}

[data-theme="dark"] .welcome-heading .accent-word {
    color: #00ff77 !important; 
    text-shadow: 0 0 20px rgba(0, 255, 119, 0.4), 3px 3px 0px #000000 !important;
}

[data-theme="dark"] .welcome-sub {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .search-bar {
    background: rgba(13, 17, 34, 0.75) !important; 
    border: 2px solid rgba(0, 255, 119, 0.25) !important; 
    color: #ffffff !important;
    border-radius: 14px !important; 
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .search-bar:focus {
    border-color: #00ff77 !important; 
    background: rgba(18, 24, 46, 0.9) !important;
    box-shadow: 0 0 25px rgba(0, 255, 119, 0.35), 0 8px 25px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .game-modes button,
[data-theme="dark"] .game-card.btn-guessr {
    background: linear-gradient(135deg, rgba(20, 28, 52, 0.7) 0%, rgba(10, 14, 28, 0.85) 100%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    position: relative;
    overflow: hidden; 
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .game-modes button strong,
[data-theme="dark"] .game-modes button span {
    color: #ffffff !important;
}

[data-theme="dark"] .btn-guessr .game-card-icon { background: rgba(0, 255, 119, 0.15) !important; color: #00ff77 !important; }
[data-theme="dark"] .btn-order .game-card-icon { background: rgba(234, 179, 8, 0.15) !important; color: #eab308 !important; }
[data-theme="dark"] .btn-random .game-card-icon { background: rgba(41, 121, 255, 0.15) !important; color: #2979ff !important; }
[data-theme="dark"] .btn-catalog .game-card-icon { background: rgba(167, 139, 250, 0.15) !important; color: #a78bfa !important; }


/* ========================================================
   REDISEÑO MODO CLARO (CÉSPED DIURNO)
   ======================================================== */
[data-theme="light"],
[data-theme="light"] body {
    background-color: #ebf0ee !important;
    background-image: 
        radial-gradient(at 15% 0%, rgba(0, 204, 102, 0.18) 0px, transparent 45%),
        radial-gradient(at 85% 0%, rgba(41, 121, 255, 0.12) 0px, transparent 45%),
        radial-gradient(at 50% 100%, rgba(0, 180, 90, 0.10) 0px, transparent 70%) !important;
    color: #04160a !important;
}

[data-theme="light"] body::after {
    background-image: radial-gradient(#155d31 1.8px, transparent 1.8px) !important;
    opacity: 0.28 !important;
}

[data-theme="light"] .welcome-heading {
    font-size: 3.2rem;
    font-weight: 900 !important;
    text-transform: uppercase !important; 
    letter-spacing: -1px !important;       
    text-shadow: 2px 2px 0px rgba(0, 204, 102, 0.12) !important;
    color: #04160a !important;
}

[data-theme="light"] .welcome-heading .accent-word {
    color: #00cc66 !important; 
    text-shadow: 2px 2px 0px rgba(4, 22, 10, 0.08) !important;
}

[data-theme="light"] .welcome-sub {
    color: #2c4930 !important;
}

[data-theme="light"] .search-bar {
    background: #f0f7f3 !important;
    border: 2px solid #a4bdae !important;
    color: #04160a !important;
    box-shadow: 0 4px 20px rgba(4, 22, 10, 0.08) !important;
}

[data-theme="light"] .search-bar::placeholder {
    color: #2c4930 !important;
}

[data-theme="light"] .search-bar:focus {
    border-color: #00cc66 !important;
    background: #f0f7f3 !important;
    box-shadow: 0 0 0 4px rgba(0, 204, 102, 0.12) !important;
}

[data-theme="light"] .game-modes button,
[data-theme="light"] .game-card.btn-guessr {
    background: #f0f7f3 !important;
    border: 2px solid #cbd5e1 !important;
    color: #04160a !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .game-modes button strong,
[data-theme="light"] .game-modes button span {
    color: #04160a !important;
}

[data-theme="light"] .btn-guessr .game-card-icon {
    background: rgba(0, 204, 102, 0.15) !important;
    color: #009944 !important;
}
[data-theme="light"] .btn-order .game-card-icon {
    background: rgba(234, 179, 8, 0.18) !important;
    color: #d97706 !important;
}
[data-theme="light"] .btn-random .game-card-icon {
    background: rgba(41, 121, 255, 0.15) !important;
    color: #2563eb !important;
}
[data-theme="light"] .btn-catalog .game-card-icon {
    background: rgba(167, 139, 250, 0.18) !important;
    color: #7c3aed !important;
}

/* Limpieza total de sombras/manchas en los estadios */
.stadium-bombonera,
.stadium-maracana,
.stadium-generico {
    filter: none !important;
}

/* ☀️ MODALES Y VENTANAS EN MODO CLARO (STADIUMGUESSR, DESAFÍO DE ORDEN Y RANKING) */
[data-theme="light"] .modal-content {
    background: #f0f7f3 !important;
    border: 2px solid #cbd5e1 !important;
    color: #04160a !important;
    box-shadow: 0 20px 50px rgba(4, 22, 10, 0.18) !important;
}

[data-theme="light"] .modal-content h2,
[data-theme="light"] #modal-video-container strong {
    color: #04160a !important;
}

[data-theme="light"] .modal-content p,
[data-theme="light"] #modal-video-container p {
    color: #2c4930 !important;
}

/* 🔘 Botones secundarios y fichas de orden en Modo Claro */
[data-theme="light"] .modal-content .btn-3d.secondary {
    background: #e8f3ee !important;
    border: 2px solid #cbd5e1 !important;
    color: #04160a !important;
    box-shadow: 0 3px 0 #cbd5e1 !important;
}

[data-theme="light"] .modal-content .btn-3d.secondary:hover {
    background: rgba(0, 204, 102, 0.1) !important;
    border-color: #00cc66 !important;
    color: #009944 !important;
}

[data-theme="light"] .order-slot {
    background: #e8f3ee !important;
    border-color: #cbd5e1 !important;
    color: #04160a !important;
}

[data-theme="light"] .order-slot strong {
    color: #04160a !important;
}

[data-theme="light"] .close-btn {
    background: #e2e8f0 !important;
    border: 1px solid #cbd5e1 !important;
    color: #04160a !important;
}

[data-theme="light"] .close-btn:hover {
    background: #e11d48 !important;
    color: #ffffff !important;
}

[data-theme="light"] .logro-tab-btn {
    color: var(--text-muted) !important;
    font-weight: 700 !important;
}

[data-theme="light"] .logro-tab-btn.active {
    background: var(--accent-color) !important;
    color: #000000 !important;
    font-weight: 900 !important;
}

[data-theme="light"] .calendar-cell {
    color: var(--text-main) !important;
}

[data-theme="light"] .calendar-cell.past-done,
[data-theme="light"] .calendar-cell.current-active {
    color: #000000 !important;
}
/* ========================================== */
/* OPTIMIZACIÓN VISUAL EXCLUSIVA PARA MÓVILES */
/* ========================================== */
@media (max-width: 768px) {
    
    /* ========================================== */
    /* A. FRANJA SUPERIOR (HEADER) SÚPER COMPACTA */
    /* ========================================== */
    header, .top-bar, .navbar {
        padding: 8px 12px !important;
        min-height: auto !important;
    }

    /* Achicamos el texto del logo y forzamos 1 sola línea */
    header h1, header h2, .logo-title, .header-brand-name {
        font-size: 1.1rem !important;
        line-height: 1.1 !important;
        margin-bottom: 2px !important;
        white-space: nowrap !important; 
    }

    /* Achicamos el subtítulo verde a 1 sola línea */
    header p, header span, .logo-subtitle, .header-slogan {
        font-size: 0.55rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    /* Arreglo de la Luna: Centrada en el espacio vacío entre el título y el perfil */
    .header-actions {
        flex: 1 !important; 
    }
    .theme-toggle-btn, .theme-toggle, #theme-btn {
        transform: none !important; 
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important; 
        flex-shrink: 0 !important;  
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;  
        margin-right: auto !important; 
        padding: 0 !important;
    }

    /* El perfil se achica apenitas desde la derecha */
    .hero-profile-wrapper, #hero-google-profile {
        transform: scale(0.9) !important;
        transform-origin: right center !important;
    }

    /* ========================================== */
    /* B. CUERPO PRINCIPAL DEL SITIO              */
    /* ========================================== */
    
    /* 1. Ocultamos la píldora verde */
    .hero-badge-container, .hero-pill, .badge-container, [class*="tour-"] {
        display: none !important;
    }

    /* 2. Acotamos el título SOLO a la portada hero (sin infectar modales) */
    .hero-content h1, .welcome-heading, [data-theme="dark"] .welcome-heading, [data-theme="light"] .welcome-heading {
        font-size: 1.7rem !important; 
        line-height: 1.1 !important;
        margin-top: 5px !important;
        margin-bottom: 8px !important;
        max-width: 100% !important;
        word-break: break-word !important;
    }

    /* 3. Acotamos el subtítulo SOLO a la portada hero (sin infectar párrafos de modales) */
    .hero-content p, .welcome-sub {
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
        padding: 0 10px !important;
    }

    /* 📱 Adaptación de botones e íconos 3D en celular */
    .game-modes {
        max-width: 100% !important;
    }

    .game-card {
        padding: 18px 16px 18px 80px !important;
        margin-bottom: 12px !important;
        overflow: visible !important;
    }

    .game-3d-icon {
        width: 100px !important;
        height: 100px !important;
        left: -22px !important;
    }

    .btn-catalog .game-3d-icon {
        width: 112px !important;
        height: 112px !important;
        left: -28px !important;
    }

    /* Botones sociales estáticos y centrados en móvil */
    .social-floating-container {
        transform: scale(0.85);
        margin: 30px auto 20px auto !important;
        transform-origin: center center;
    }
}
/* ========================================== */
/* BOTONES ESPECIALES DEL MENÚ (RETO Y LIGA)  */
/* ========================================== */

/* 1. RETO DIARIO (Animaciones y Colores) */
.btn-reto-diario {
    background: rgba(255, 234, 0, 0.08) !important;
    border: 2px solid #ffea00 !important;
    color: #ffea00 !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.btn-reto-diario:hover {
    transform: translateY(-4px) scale(1.02) !important;
    background: rgba(255, 234, 0, 0.15) !important;
    box-shadow: 0 8px 20px rgba(255, 234, 0, 0.25) !important;
}
.btn-reto-diario:active {
    transform: translateY(2px) scale(0.95) !important;
    box-shadow: none !important;
}

/* RETO DIARIO (Modo Claro - Azul profundo) */
[data-theme="light"] .btn-reto-diario {
    background: rgba(41, 121, 255, 0.08) !important;
    border: 2px solid #00529f !important;
    color: #00529f !important;
}
[data-theme="light"] .btn-reto-diario:hover {
    background: rgba(41, 121, 255, 0.15) !important;
    box-shadow: 0 8px 20px rgba(0, 82, 159, 0.25) !important;
}

/* ------------------------------------------ */

/* 2. LIGA PRIVADA (Animaciones y Colores) */
.btn-liga-menu {
    background: rgba(0, 230, 118, 0.08) !important;
    border: 2px solid #00e676 !important;
    color: #00e676 !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.btn-liga-menu:hover {
    transform: translateY(-4px) scale(1.02) !important;
    background: rgba(0, 230, 118, 0.15) !important;
    box-shadow: 0 8px 20px rgba(0, 230, 118, 0.25) !important;
}
.btn-liga-menu:active {
    transform: translateY(2px) scale(0.95) !important;
    box-shadow: none !important;
}

/* LIGA PRIVADA (Modo Claro - Verde oscuro de contraste) */
[data-theme="light"] .btn-liga-menu {
    background: rgba(0, 140, 70, 0.08) !important;
    border: 2px solid #008c46 !important;
    color: #008c46 !important;
}
[data-theme="light"] .btn-liga-menu:hover {
    background: rgba(0, 140, 70, 0.15) !important;
    box-shadow: 0 8px 20px rgba(0, 140, 70, 0.25) !important;
}
/* Que el menú de selección abrace el contenido y no deje espacio negro abajo */
#guessr-modal .modal-content {
    height: auto !important;
    min-height: fit-content !important;
}
/* ========================================================
   ANIMACIÓN DE PROVOCACIONES EN VIVO (PASO 1)
   ======================================================== */
@keyframes tauntPop {
    0% { transform: translate(-50%, 20px) scale(0.6); opacity: 0; }
    12% { transform: translate(-50%, -10px) scale(1.1); opacity: 1; }
    20% { transform: translate(-50%, 0) scale(1); opacity: 1; }
    85% { opacity: 1; transform: translate(-50%, -15px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -35px) scale(0.8); }
}

.taunt-bubble {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--glass-bg);
    border: 2px solid var(--border-strong);
    padding: 10px 18px;
    border-radius: 30px;
    font-size: 1.3rem;
    font-weight: 800;
    z-index: 2200;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-strong);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: tauntPop 2.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    pointer-events: none;
    white-space: nowrap;
    color: var(--text-main);
}
.taunt-bubble.es-mio {
    border-color: var(--accent-color);
}
.taunt-bubble.es-rival {
    border-color: var(--danger-color);
}
/* ========================================================
   AJUSTE DE CAJA PARA PANTALLA DE RESULTADOS Y SCROLL ADAPTATIVO
   ======================================================== */
.modal-content.resultado-final-layout #modal-video-container,
.modal-content.resultado-final #modal-video-container {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    contain: none !important;
    overflow-y: auto !important;
    background: transparent !important;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.modal-content.resultado-final-layout #modal-video-container::-webkit-scrollbar {
    width: 8px;
}
.modal-content.resultado-final-layout #modal-video-container::-webkit-scrollbar-track {
    background: transparent;
}
.modal-content.resultado-final-layout #modal-video-container::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 10px;
}
.modal-content.resultado-final-layout #modal-video-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* 🏆 ESTILOS DE MARCADOR FINAL VERSUS (COLORES Y TROFEO 3D NEÓN) */
.vs-result-trophy {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(0, 230, 118, 0.85)) drop-shadow(0 0 25px rgba(0, 230, 118, 0.4));
    vertical-align: middle;
}

.vs-user-score {
    color: #00e676 !important;
    text-shadow: 0 0 12px rgba(0, 230, 118, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
}

.vs-rival-score {
    color: #2979ff !important;
    text-shadow: 0 0 12px rgba(41, 121, 255, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
}

.vs-text-divider {
    color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1.5px solid rgba(245, 158, 11, 0.4) !important;
    padding: 3px 12px !important;
    border-radius: 12px !important;
    font-size: 1.1rem !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.2) !important;
}

.pts-breakdown.pts-high { color: #00e676 !important; font-weight: 900; }
.pts-breakdown.pts-mid { color: #ff8f00 !important; font-weight: 900; }
.pts-breakdown.pts-low { color: #ff4757 !important; font-weight: 900; }

/* ☀️ Adaptación Rompe-Restricciones para Modo Claro en Resultados */
[data-theme="light"] .modal-content.resultado-final-layout,
[data-theme="light"] .modal-content.resultado-final {
    background: var(--bg-color) !important;
    border: 2px solid #cbd5e1 !important;
    color: #04160a !important;
}

[data-theme="light"] .vs-card-banner {
    background: #ffffff !important;
    border: 2px solid #a4bdae !important;
    box-shadow: 0 6px 20px rgba(4, 22, 10, 0.08) !important;
}

/* VOS: Verde Esmeralda Intenso con Resplandor Neón en Modo Claro */
[data-theme="light"] .vs-user-score {
    color: #00c853 !important;
    text-shadow: 0 0 10px rgba(0, 200, 83, 0.45), 0 1px 2px rgba(0, 0, 0, 0.15) !important;
    font-weight: 900 !important;
}

/* RIVAL: Azul Eléctrico Intenso con Resplandor Neón en Modo Claro */
[data-theme="light"] .vs-rival-score {
    color: #0066ff !important;
    text-shadow: 0 0 10px rgba(0, 102, 255, 0.45), 0 1px 2px rgba(0, 0, 0, 0.15) !important;
    font-weight: 900 !important;
}

[data-theme="light"] .vs-text-divider {
    color: #d97706 !important;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    border: 1.5px solid #f59e0b !important;
    padding: 3px 12px !important;
    border-radius: 12px !important;
    font-size: 1.1rem !important;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25) !important;
}

/* Puntos del Desglose por Ronda en Modo Claro (Vibrante + Alto Contraste) */
[data-theme="light"] .pts-breakdown.pts-high { 
    color: #008744 !important; 
    background: rgba(0, 200, 83, 0.14) !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-weight: 900 !important;
}
[data-theme="light"] .pts-breakdown.pts-mid { 
    color: #d97706 !important; 
    background: rgba(217, 119, 6, 0.14) !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-weight: 900 !important;
}
[data-theme="light"] .pts-breakdown.pts-low { 
    color: #dc2626 !important; 
    background: rgba(220, 38, 38, 0.14) !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-weight: 900 !important;
}
/* ========================================== */
/* FORZAR ANCHO COMPLETO DE TARJETAS (MÓVIL)  */
/* ========================================== */
@media (max-width: 768px) {
    .grid {
        width: 100% !important;
    }
}
/* ========================================================
   EFECTOS VISUALES DE GAMIFICACIÓN Y ATMÓSFERA GAMER
   ======================================================== */

/* 1. ⚡ RAYO NEÓN CON PULSO DE LUZ (Efecto Rango Nivel) */
.goleador-card img,
.nivel-icon {
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.6));
    animation: rayoGlow 2.5s infinite alternate ease-in-out;
}

@keyframes rayoGlow {
    0% { 
        filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.4));
        transform: scale(1);
    }
    100% { 
        filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.9));
        transform: scale(1.03);
    }
}

/* 2. 🔥 PULSO ADICTIVO EN LA RACHA DIARIA (Efecto Duolingo) */
.retos-badge-streak,
.streak-pill {
    animation: flamePulse 1.8s infinite ease-in-out;
    box-shadow: 0 0 10px rgba(255, 111, 0, 0.3);
}

@keyframes flamePulse {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 0 4px rgba(255, 111, 0, 0.5));
    }
    50% { 
        transform: scale(1.06);
        filter: drop-shadow(0 0 12px rgba(255, 111, 0, 0.9));
    }
}

/* 3. 🌌 LUCES AMBIENTALES DE FONDO (Atmósfera 3D para el perfil) */
.modal-profile-content, 
.user-dashboard {
    position: relative;
    overflow: hidden;
}

/* Luz verdosa detrás de la carta */
.modal-profile-content::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 5%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(0, 230, 118, 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Luz violeta detras de los retos/nivel */
.modal-profile-content::after {
    content: '';
    position: absolute;
    top: 15%;
    right: 10%;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(156, 39, 176, 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* 4. 🏆 BADGE DE RANKING "TOP 5%" / ESTATUS SOCIAL */
.badge-ranking {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 140, 0, 0.15));
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 20px;
    color: #ffd700;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.25);
}
/* ========================================================
   FONDO ATMOSFÉRICO CON MAPA Y LUCES EN EL PERFIL (FIX)
   ======================================================== */
/* 1. Modo Oscuro: Textura, luces nocturnas y trama de puntos verde neón */
[data-theme="dark"] #profile-modal-body,
[data-theme="dark"] .split-profile-layout {
    background-color: #0b0f15 !important;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(0, 230, 118, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 80% 25%, rgba(41, 121, 255, 0.2) 0%, transparent 55%),
        radial-gradient(circle at 50% 85%, rgba(167, 139, 250, 0.15) 0%, transparent 60%),
        radial-gradient(rgba(0, 230, 118, 0.28) 1.8px, transparent 1.8px) !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 22px 22px !important;
    background-position: 0 0, 0 0, 0 0, 0 0 !important;
}

/* 2. Modo Claro: Fondo césped suave con trama de puntos verde esmeralda */
[data-theme="light"] #profile-modal-body,
[data-theme="light"] .split-profile-layout {
    background-color: #e2e8e4 !important;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(0, 204, 102, 0.18) 0%, transparent 50%),
        radial-gradient(circle at 80% 25%, rgba(41, 121, 255, 0.1) 0%, transparent 55%),
        radial-gradient(rgba(0, 204, 102, 0.28) 1.8px, transparent 1.8px) !important;
    background-size: 100% 100%, 100% 100%, 22px 22px !important;
    background-position: 0 0, 0 0, 0 0 !important;
}

/* 3. Columna izquierda transparente */
.left-fut-column {
    background: transparent !important;
}

/* ========================================================
   MODO CLARO Y RESPONSIVE MÓVIL (BLOQUE CONSOLIDADO Y LIMPIO)
   ======================================================== */

/* 1. Modo Claro: Tarjetas y Legibilidad del Perfil */
[data-theme="light"] .geoguessr-dash-box,
[data-theme="light"] .xp-profile-section {
    background: #ffffff !important;
    border: 2px solid #cbd5e1 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .right-dashboard-column {
    background: transparent !important;
}

[data-theme="light"] .dash-title-premium,
[data-theme="light"] .xp-profile-section h3,
[data-theme="light"] .xp-profile-section strong,
[data-theme="light"] .fut-name {
    color: #0f172a !important;
}

[data-theme="light"] .badge-ranking {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
    border: 1.5px solid #d97706 !important;
    color: #78350f !important;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25) !important;
    font-weight: 900 !important;
}

[data-theme="light"] .streak-fire-badge {
    background: #ffedd5 !important;
    border: 1.5px solid #f97316 !important;
    color: #c2410c !important;
    font-weight: 800 !important;
}

[data-theme="light"] .calendar-matrix {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
}

[data-theme="light"] .calendar-day-label {
    color: #334155 !important;
    font-weight: 800 !important;
}

[data-theme="light"] .calendar-cell.past-missed {
    background: #e2e8f0 !important;
    color: #64748b !important;
    border: none !important;
}

[data-theme="light"] .calendar-cell.future-day {
    color: #94a3b8 !important;
    border: 1px dashed #cbd5e1 !important;
}

[data-theme="light"] .calendar-cell.streak-active {
    background: #00cc66 !important;
    color: #ffffff !important;
    border-color: #047857 !important;
    box-shadow: 0 0 10px rgba(0, 204, 102, 0.5) !important;
}

[data-theme="light"] .calendar-cell.past-done {
    background: rgba(0, 204, 102, 0.2) !important;
    color: #065f46 !important;
    border-color: #10b981 !important;
}

/* 🏆 Vitrina de Logros y Tarjetas en Modo Claro */
[data-theme="light"] .logros-tabs-row {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] .logro-tab-btn {
    color: #64748b !important;
}

[data-theme="light"] .logro-tab-btn.active {
    background: #00cc66 !important;
    color: #ffffff !important;
}

[data-theme="light"] .logro-card-v2 {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] .logro-card-v2.unlocked {
    background: linear-gradient(135deg, rgba(0, 204, 102, 0.12) 0%, #ffffff 100%) !important;
    border-color: #00cc66 !important;
    box-shadow: 0 4px 12px rgba(0, 204, 102, 0.15) !important;
}

[data-theme="light"] .logro-card-v2.rare.unlocked {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.15) 0%, #ffffff 100%) !important;
    border-color: #7c3aed !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15) !important;
}

[data-theme="light"] .logro-card-v2.epic.unlocked {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.18) 0%, #ffffff 100%) !important;
    border-color: #d97706 !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15) !important;
}

[data-theme="light"] .logro-card-v2.locked {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    opacity: 0.65 !important;
}

[data-theme="light"] .logro-name-v2 {
    color: #0f172a !important;
}

[data-theme="light"] .logro-req-v2 {
    color: #475569 !important;
}

[data-theme="light"] .logro-progress-bar-bg {
    background: #cbd5e1 !important;
}

/* 2. Maquetación Móvil 50/50 y Limpieza de Fondo */
@media (max-width: 768px) {
    /* Fondo limpio sin puntos en modo claro solo para celular */
    [data-theme="light"] #profile-modal-body,
    [data-theme="light"] .split-profile-layout {
        background-color: #f1f5f9 !important;
        background-image: 
            radial-gradient(circle at 20% 30%, rgba(0, 204, 102, 0.15) 0%, transparent 50%),
            radial-gradient(circle at 80% 25%, rgba(41, 121, 255, 0.12) 0%, transparent 55%) !important;
        background-size: 100% 100%, 100% 100% !important;
    }

    #profile-modal .modal-content {
        height: auto !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
        padding: 10px 8px !important;
    }

    #profile-modal-body {
        height: auto !important;
    }

    .split-profile-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .left-fut-column,
    .right-dashboard-column,
    .right-dashboard-top-row {
        display: contents !important;
    }

    .fut-card {
        grid-column: 1 !important;
        grid-row: 1 !important;
        transform: scale(0.55) !important;
        transform-origin: top center !important;
        margin-top: 0 !important;
        margin-bottom: -170px !important;
        justify-self: center !important;
    }

    #btn-toggle-custom {
        grid-column: 1 !important;
        grid-row: 2 !important;
        padding: 6px 6px !important;
        font-size: 0.68rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 4px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        align-self: start !important;
    }

    .xp-profile-section {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
        min-width: 0 !important;
        width: 100% !important;
        padding: 10px 8px !important;
        margin-bottom: 0 !important;
        border-radius: 14px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        align-self: stretch !important;
        height: auto !important;
    }

    .xp-profile-section div[style*="font-size:3.5rem"],
    .xp-profile-section div[style*="font-size:4.5rem"] {
        font-size: 2.2rem !important;
        margin-bottom: 2px !important;
    }

    .xp-profile-section h3 {
        font-size: 0.85rem !important;
        margin-bottom: 2px !important;
        text-align: center !important;
    }

    .xp-profile-section .level-badge-inline {
        font-size: 0.65rem !important;
        padding: 2px 8px !important;
        margin-bottom: 4px !important;
    }

    .xp-profile-section .badge-ranking {
        font-size: 0.58rem !important;
        padding: 2px 6px !important;
        margin-bottom: 8px !important;
        white-space: nowrap !important;
    }

    #customization-panel-wrapper {
        grid-column: 1 / span 2 !important;
        grid-row: 3 !important;
        width: 100% !important;
    }

    .avatar-picker {
        max-width: 100% !important;
        padding: 14px 12px !important;
        margin-top: 6px !important;
    }

    .avatar-picker label {
        font-size: 0.72rem !important;
    }

    .avatar-pos-select,
    .avatar-nickname-input {
        font-size: 0.8rem !important;
        padding: 8px 10px !important;
    }

    .right-dashboard-top-row > .geoguessr-dash-box:not(.xp-profile-section) {
        grid-column: 1 / span 2 !important;
        grid-row: 4 !important;
        padding: 10px !important;
        margin-bottom: 0 !important;
        border-radius: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .calendar-matrix {
        padding: 8px 4px !important;
        gap: 4px !important;
        margin-top: 6px !important;
    }

    .calendar-cell {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.72rem !important;
    }

    .calendar-day-label {
        font-size: 0.62rem !important;
    }

    .logros-box-mobile {
        grid-column: 1 / span 2 !important;
        grid-row: 5 !important;
        padding: 10px 12px !important;
        margin-bottom: 0 !important;
        border-radius: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .logros-header-clickable {
        cursor: pointer;
        user-select: none;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }

    .logros-wrapper-mobile {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.35s ease, opacity 0.25s ease;
    }

    .logros-wrapper-mobile.open {
        max-height: 320px;
        overflow-y: auto !important;
        opacity: 1;
        margin-top: 10px;
    }

    .logros-grid-v2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 2px !important;
    }
}
/* ========================================================
   🏆 BOTÓN DE RETO DIARIO (UBICACIÓN EN RECUADRO AZUL INFERIOR IZQUIERDO)
   ======================================================== */
.btn-reto-banner {
    position: absolute;
    left: -14%;
    bottom: -150px;
    z-index: 10;
    width: 350px;
    padding: 14px 18px 14px 95px;
    background: linear-gradient(135deg, rgba(14, 20, 43, 0.92) 0%, rgba(7, 10, 23, 0.96) 100%);
    border: 2px solid rgba(0, 255, 119, 0.4);
    border-radius: 18px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 255, 119, 0.2);
    overflow: visible !important;
}

/* 🎯 ZONA INTERACTIVA EXPANDIDA (HOVER Y CLICK EN TODO EL BAÚL Y MARGEN INFERIOR) */
.btn-reto-banner::before {
    content: '';
    position: absolute;
    inset: -45px 0 -45px -75px;
    border-radius: 25px;
    pointer-events: auto;
    z-index: 0;
}

.btn-reto-banner:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: #00ff77;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7), 0 0 35px rgba(0, 255, 119, 0.4);
}

.btn-reto-banner:active {
    transform: translateY(1px) scale(0.99);
}

/* 🧰 BAÚL GIGANTE OVERFLOW (OPTIMIZADO CON GPU) */
.reto-baul-img {
    position: absolute;
    left: -75px;
    top: 50%;
    transform: translateY(-50%) translateZ(0);
    width: 222px;
    height: 222px;
    object-fit: contain;
    filter: drop-shadow(0 0 22px rgba(0, 255, 119, 0.85));
    will-change: transform;
    backface-visibility: hidden;
    transition: transform 0.35s ease, filter 0.35s ease;
    pointer-events: none;
    z-index: 2;
}

.btn-reto-banner:hover .reto-baul-img {
    transform: translateY(-50%) scale(1.1) rotate(-4deg);
    filter: drop-shadow(0 0 32px rgba(0, 255, 119, 1));
}

.reto-banner-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    z-index: 1;
}

.reto-banner-text strong {
    font-size: 1.15rem;
    font-weight: 900;
    color: #00ff77;
    text-transform: uppercase;
    letter-spacing: -0.3px;
    line-height: 1.2;
    margin-bottom: 2px;
    text-shadow: 0 0 10px rgba(0, 255, 119, 0.3);
}

.reto-banner-text span {
    font-size: 0.78rem;
    color: #ffffff;
    font-weight: 600;
    line-height: 1.3;
    opacity: 0.9;
}

/* 📱 Adaptación para Celulares */
@media (max-width: 1024px) {
    .btn-reto-banner {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        margin: 20px auto 0 !important;
        width: calc(100% - 20px) !important;
        max-width: 380px !important;
        padding-left: 95px !important;
        overflow: visible !important;
    }
    .reto-baul-img {
        width: 180px !important;
        height: 180px !important;
        left: -45px !important;
    }
}

/* ☀️ Modo Claro */
[data-theme="light"] .btn-reto-banner {
    background: #f0f7f3 !important;
    border: 2px solid #a4bdae !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .btn-reto-banner:hover {
    border-color: #00cc66 !important;
    box-shadow: 0 14px 30px rgba(0, 204, 102, 0.2) !important;
}

[data-theme="light"] .reto-banner-text strong {
    color: #00cc66 !important;
    text-shadow: none !important;
}

[data-theme="light"] .reto-banner-text span {
    color: #04160a !important;
}

/* ⚽ EFECTO DE BOTÓN INTERACTIVO (HOVER Y CLICK) EN PESTAÑAS DE LIGA PRIVADA */
#liga-amigos-modal-body button[onclick*="cambiarVistaLiga"] {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease, filter 0.2s ease !important;
}

#liga-amigos-modal-body button[onclick*="cambiarVistaLiga"]:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 18px var(--accent-glow) !important;
    filter: brightness(1.15);
}

#liga-amigos-modal-body button[onclick*="cambiarVistaLiga"]:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: none !important;
}
/* ========================================================
   🎨 ESTILIZACIÓN DE BOTONES DEL MENÚ STADIUMGUESSR (ESTILO HOMEPAGE)
   ======================================================== */
.guessr-menu-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.guessr-menu-section-title {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    border-bottom: 1px dashed var(--border-subtle);
    padding-bottom: 4px;
}

.guessr-option-btn {
    width: 100%;
    padding: 14px 18px;
    border-radius: 16px;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg, rgba(20, 28, 52, 0.75) 0%, rgba(10, 14, 28, 0.88) 100%);
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
    overflow: hidden;
    text-align: left;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.guessr-option-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.guessr-option-btn:hover {
    transform: translateY(-4px) scale(1.01);
}

.guessr-option-btn:active {
    transform: translateY(1px) scale(0.99);
}

.guessr-option-icon {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.guessr-option-btn:hover .guessr-option-icon {
    transform: scale(1.12) rotate(-3deg);
}

.guessr-option-text {
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.guessr-option-text strong {
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-main);
}

.guessr-option-text span {
    font-size: 0.76rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 2px;
}

/* 🟢 Modo Individual (Verde Neón) */
.btn-opt-solo:hover {
    border-color: #00ff77 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 255, 119, 0.35) !important;
}
.btn-opt-solo .guessr-option-icon {
    background: rgba(0, 255, 119, 0.15);
    color: #00ff77;
    box-shadow: 0 0 12px rgba(0, 255, 119, 0.25);
}

/* 🔵 1v1 Global (Azul Eléctrico) */
.btn-opt-versus:hover {
    border-color: #2979ff !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(41, 121, 255, 0.35) !important;
}
.btn-opt-versus .guessr-option-icon {
    background: rgba(41, 121, 255, 0.15);
    color: #2979ff;
    box-shadow: 0 0 12px rgba(41, 121, 255, 0.25);
}

/* 🟣 Sala Privada (Violeta Púrpura) */
.btn-opt-privada:hover {
    border-color: #a78bfa !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(167, 139, 250, 0.35) !important;
}
.btn-opt-privada .guessr-option-icon {
    background: rgba(167, 139, 250, 0.15);
    color: #a78bfa;
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.25);
}

/* 🟢 Liga de Amigos Privada(Verde Esmeralda) */
.btn-opt-liga:hover {
    border-color: #00e676 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 230, 118, 0.35) !important;
}
.btn-opt-liga .guessr-option-icon {
    background: rgba(0, 230, 118, 0.15);
    color: #00e676;
    box-shadow: 0 0 12px rgba(0, 230, 118, 0.25);
}

/* 🟡 Tabla de Posiciones (Dorado) */
.btn-opt-ranking:hover {
    border-color: #eab308 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(234, 179, 8, 0.35) !important;
}
.btn-opt-ranking .guessr-option-icon {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
    box-shadow: 0 0 12px rgba(234, 179, 8, 0.25);
}

/* ☀️ Adaptación Modo Claro para los botones de StadiumGuessr */
[data-theme="light"] .guessr-option-btn {
    background: #f0f7f3 !important;
    border: 2px solid #cbd5e1 !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .guessr-option-text strong {
    color: #04160a !important;
}
/* ========================================================
   🏆 ESTILIZACIÓN PREMIUM TABLA LIGA PRIVADA DE AMIGOS
   ======================================================== */
.liga-modal-header {
    text-align: center;
    margin-bottom: 20px;
}

.liga-modal-title {
    font-size: 1.4rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    color: var(--text-main);
}

.liga-info-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(0, 230, 118, 0.12) 0%, rgba(10, 20, 35, 0.6) 100%);
    border: 1.5px solid rgba(0, 230, 118, 0.4);
    padding: 12px 18px;
    border-radius: 14px;
    font-size: 0.88rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-salir-liga {
    background: rgba(255, 71, 87, 0.12);
    border: 1px solid rgba(255, 71, 87, 0.35);
    color: #ff4757;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-salir-liga:hover {
    background: rgba(255, 71, 87, 0.25);
    border-color: #ff4757;
    box-shadow: 0 0 12px rgba(255, 71, 87, 0.4);
    transform: translateY(-1px);
}

.liga-tabs-row {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    width: 100%;
}

.liga-tab-btn {
    flex: 1; /* Distribuye el espacio 50/50 de forma perfecta */
    min-width: 0;
    padding: 4px 6px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 46px;
    box-sizing: border-box;
}

.liga-tab-btn:hover:not(.active) {
    border-color: var(--border-strong);
    color: var(--text-main);
    transform: translateY(-2px);
}

.liga-tab-btn.active {
    background: var(--accent-color) !important;
    color: #000 !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 4px 15px var(--accent-glow) !important;
    transform: translateY(-1px);
}

.liga-table-card {
    background: var(--surface-color);
    border: 2px solid var(--border-strong);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.liga-row-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.95rem;
    transition: background 0.2s ease;
}

.liga-row-item:last-child {
    border-bottom: none;
}

.liga-row-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.liga-row-item.es-propio {
    background: rgba(0, 230, 118, 0.06);
}

/* ☀️ Modo Claro */
[data-theme="light"] .liga-info-banner {
    background: #f0f7f3 !important;
    border-color: #a4bdae !important;
    color: #04160a !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .liga-tab-btn {
    background: #e8f3ee !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}

[data-theme="light"] .liga-tab-btn.active {
    background: #00cc66 !important;
    color: #ffffff !important;
    border-color: #00cc66 !important;
}

[data-theme="light"] .liga-table-card {
    background: #f0f7f3 !important;
    border-color: #cbd5e1 !important;
}

[data-theme="light"] .liga-row-item:hover {
    background: #e2ede7 !important;
}
/* ========================================================
   🎨 BARRA DE SCROLLEO OSCURA Y ESTILIZADA PARA MODALES
   ======================================================== */
#ranking-modal .modal-content,
#ranking-modal *,
#liga-amigos-modal .modal-content,
#liga-amigos-modal * {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

#ranking-modal .modal-content::-webkit-scrollbar,
#ranking-modal *::-webkit-scrollbar,
#liga-amigos-modal .modal-content::-webkit-scrollbar,
#liga-amigos-modal *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

#ranking-modal .modal-content::-webkit-scrollbar-track,
#ranking-modal *::-webkit-scrollbar-track,
#liga-amigos-modal .modal-content::-webkit-scrollbar-track,
#liga-amigos-modal *::-webkit-scrollbar-track {
    background: transparent;
}

#ranking-modal .modal-content::-webkit-scrollbar-thumb,
#ranking-modal *::-webkit-scrollbar-thumb,
#liga-amigos-modal .modal-content::-webkit-scrollbar-thumb,
#liga-amigos-modal *::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 10px;
}

#ranking-modal .modal-content::-webkit-scrollbar-thumb:hover,
#ranking-modal *::-webkit-scrollbar-thumb:hover,
#liga-amigos-modal .modal-content::-webkit-scrollbar-thumb:hover,
#liga-amigos-modal *::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}
/* ========================================================
   🏆 PESTAÑAS DE RANKING RESPONSIVE (PC & MÓVIL)
   ======================================================== */
.ranking-tabs-row .liga-tab-btn {
    flex: 1;
    justify-content: flex-start;
    padding-left: 0;
    border-radius: 25px;
    min-width: 0;
}

.ranking-tab-img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    flex-shrink: 0;
    margin-left: -12px;
}

@media (max-width: 768px) {
    .ranking-tabs-row {
        gap: 4px !important;
    }
    .ranking-tabs-row .liga-tab-btn {
        justify-content: center !important;
        padding: 2px 4px !important;
        height: 42px !important;
        font-size: 0.65rem !important;
        border-radius: 16px !important;
        gap: 3px !important;
    }
    .ranking-tab-img {
        width: 32px !important;
        height: 32px !important;
        margin-left: -2px !important;
    }
    .ranking-tabs-row .liga-tab-btn span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* ========================================================
   📱 BOTÓN PRINCIPAL DE ACCIÓN DE JUEGO (RESPONSIVE FIX)
   ======================================================== */
#game-action-btn {
    padding: 12px 12px !important;
    box-sizing: border-box !important;
}

#game-action-btn .btn-action-stats {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

#game-action-btn .btn-action-text {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 900;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0; /* 🛡️ Garantiza espacio 100% visible a SIGUIENTE y FINAL */
}

@media (max-width: 480px) {
    #game-action-btn {
        padding: 10px 8px !important;
    }
    #game-action-btn .btn-action-wrapper {
        font-size: 0.78rem !important;
        gap: 4px !important;
    }
    #game-action-btn .btn-action-stats {
        font-size: 0.74rem !important;
        gap: 3px !important;
    }
    #game-action-btn .btn-action-text {
        font-size: 0.78rem !important;
        letter-spacing: 0px !important;
    }
}
/* ========================================================
   🏆 FOOTER ESTÁTICO INSTITUCIONAL (ESTILO POTRERO COMPACTO)
   ======================================================== */
.app-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px 10px;
    margin-top: auto;
    flex-shrink: 0;
    width: 100%;
    background: var(--card-bg);
    border-top: 1px solid var(--border-strong);
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-logo {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1.5px solid var(--accent-color);
    object-fit: cover;
    box-shadow: 0 0 8px var(--accent-glow);
}

.footer-brand-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.footer-brand-text strong {
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: var(--text-main);
}

.footer-brand-text span {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--text-muted);
}

.footer-brand-text .accent-word {
    color: var(--accent-color);
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.footer-link {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.70rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-link:hover {
    color: var(--accent-color);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .app-footer {
        padding: 10px 15px 8px;
        gap: 6px;
    }
    .footer-nav {
        gap: 10px 12px;
    }
    .footer-link {
        font-size: 0.62rem;
    }
}