/* Icono usado en el título (reemplaza los emojis) */
.title-icon{
    width:77px;
    height:77px;
    vertical-align:middle;
    margin:0 8px;
}
.button-container {
    text-align: center;
    margin: 30px 0;
}

.stats-button {
    display: inline-block;
    padding: 12px 25px;
    font-size: 18px;
    font-weight: bold;
    /* Integrado: sin fondo/borde visibles. El texto y el icono
       se muestran al 100% (sin transparencia). */
    background-color: transparent;
    color: #ffffff; /* texto completamente visible */
    text-decoration: none;
    border-radius: 8px;
    transition: transform 0.12s ease; /* sólo transición suave, sin fondo */
    box-shadow: none;
    border: none; /* elimina borde azul */
}

.stats-button:hover {
    /* Mantener completamente visible en hover */
    background-color: transparent;
    transform: none;
    cursor: pointer;
    color: #ffffff;
}

/* Focus accesible: al tabular se revela claramente */
.stats-button:focus-visible{
    outline: 2px solid rgba(255,255,255,0.14);
    outline-offset:4px;
    color: #ffffff;
}

/* Icono dentro del botón: ligeramente más grande que un emoji */
.stats-button .btn-icon{
    width:20px;
    height:20px;
    vertical-align:middle;
    margin-right:8px;
    display:inline-block;
    /* icono completamente visible */
    opacity:1;
    filter: none;
}

/* ====== AÑADIDO: tarjetas con texto siempre visible ====== */
.game-box,
.game-box-100 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 10px 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(2px);
}

.game-box img,
.game-box-100 img {
    width: 92px;
    height: 92px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    flex: 0 0 auto;
}

.game-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Quita los "..." y permite que el título se vea completo (en varias líneas si hace falta) */
.game-title{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;      /* por si hay palabras/largos */
    overflow-wrap: anywhere;     /* ayuda con títulos muy largos */
}

.game-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    opacity: 0.95;
}

.tag {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Mobile: show a single logo image in the header and reduce its size */
@media (max-width: 420px) {
    .title-icon { width:28px; height:28px; margin:0 6px; }
    /* Selección más robusta para ocultar la segunda imagen del título */
    .header-container h1 img.title-icon:nth-of-type(2) { display: none !important; }
    /* Ajuste: reducir el tamaño de letra y forzar una sola línea para el título */
    .header-container h1{
        font-size:1.05rem; /* reduce para caber en una línea */
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
}

/* ===== COLORES POR JUGADOR ===== */
.profile {
    --player-color: rgba(255,255,255,.12);
    background: linear-gradient(90deg, color-mix(in srgb, var(--player-color) 28%, transparent), rgba(0,0,0,.18) 55%);
    border: 1px solid color-mix(in srgb, var(--player-color) 32%, rgba(255,255,255,.10));
    box-shadow: 0 14px 36px rgba(0,0,0,.38);
}
.profile .avatar::after {
    border-color: color-mix(in srgb, var(--player-color) 55%, transparent);
}
.profile .lvlBadge {
    background: color-mix(in srgb, var(--player-color) 18%, rgba(0,0,0,.12));
    border-color: color-mix(in srgb, var(--player-color) 40%, rgba(255,205,80,.22));
}
.profile[data-player="JiroPlatinos"] { --player-color: #38bdf8; }
.profile[data-player="Xavuto"]       { --player-color: rgb(179,13,13); }
.profile[data-player="Pabloner"]     { --player-color: #22c55e; }
.profile[data-player="Pumuki"]       { --player-color: #fb923c; }

/* Borde de color lateral en las tarjetas de juego, según el jugador */
.player-column[data-player="JiroPlatinos"] .game-box,
.player-column[data-player="JiroPlatinos"] .game-box-100 {
    border-left: 3px solid #38bdf8;
    background: linear-gradient(90deg, rgba(56,189,248,.10), rgba(255,255,255,.06));
}
.player-column[data-player="Xavuto"] .game-box,
.player-column[data-player="Xavuto"] .game-box-100 {
    border-left: 3px solid rgb(179,13,13);
    background: linear-gradient(90deg, rgba(179,13,13,.10), rgba(255,255,255,.06));
}
.player-column[data-player="Pabloner"] .game-box,
.player-column[data-player="Pabloner"] .game-box-100 {
    border-left: 3px solid #22c55e;
    background: linear-gradient(90deg, rgba(34,197,94,.10), rgba(255,255,255,.06));
}
.player-column[data-player="Pumuki"] .game-box,
.player-column[data-player="Pumuki"] .game-box-100 {
    border-left: 3px solid #fb923c;
    background: linear-gradient(90deg, rgba(251,146,60,.10), rgba(255,255,255,.06));
}