/* =========================================
   1. ESTILOS GENERALES Y LAYOUT
   ========================================= */
.arena-body {
    background: radial-gradient(circle at top, #0b1220 0, #020617 55%, #02030a 100%);
    color: var(--text);
}

/* Header superior */
.arena-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9));
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
    backdrop-filter: blur(12px);
}

.arena-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Logo Wittii Estilo "Techno-Fantasy" */
.arena-logo-mark,
.logo-mini {
    width: 40px;
    height: 40px;
    background: #0f172a;
    border-radius: 10px;
    border: 3px solid #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    color: #fff;
    position: relative;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
    overflow: hidden;
}

/* El "Ojo" místico detrás de la W */
.arena-logo-mark::before,
.logo-mini::before {
    content: '';
    position: absolute;
    top: 5px;
    width: 20px;
    height: 10px;
    background: #facc15;
    border-radius: 50%;
    box-shadow: 0 0 10px #facc15;
    z-index: 0;
}

/* La W encima */
.arena-logo-mark span,
.logo-mini span {
    position: relative;
    z-index: 1;
    background: linear-gradient(to bottom, #fff, #cffafe);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.5));
}

.arena-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.arena-logo-title {
    font-size: 17px;
    font-weight: 600;
}

.arena-logo-sub {
    font-size: 11px;
    color: var(--muted);
}

.arena-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Botones del menú */
.arena-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: rgba(15, 23, 42, 0.7);
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
}

.arena-menu-btn span {
    font-weight: 500;
}

.arena-menu-btn:hover {
    background: rgba(15, 23, 42, 0.95);
    border-color: rgba(148, 163, 184, 0.9);
    transform: translateY(-1px);
}

.arena-menu-btn--danger {
    border-color: rgba(248, 113, 113, 0.7);
    color: #fecaca;
}

.arena-menu-btn--danger:hover {
    background: rgba(127, 29, 29, 0.65);
    border-color: rgba(248, 113, 113, 1);
}

/* Shell principal */
.arena-shell {
    max-width: 1120px;
    margin: 18px auto 24px;
    padding: 0 16px;
    display: grid;
    grid-template-columns: minmax(260px, 310px) minmax(0, 1fr);
    gap: 18px;
}

.arena-card {
    background: radial-gradient(circle at top left, #111827 0, #020617 55%, #02030a 100%);
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65);
    padding: 16px 16px 14px;
}

/* =========================================
   2. PANEL LATERAL (JUGADOR ACTUAL)
   ========================================= */
.arena-section-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
}

.current-player-main {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.current-avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 0%, #22d3ee, #06b6d4 60%, #0f172a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 20px;
    color: #020617;
}

.current-info {
    flex: 1;
}

.current-username-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.current-username {
    font-size: 15px;
    font-weight: 600;
}

.current-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.28);
}

.current-status-label {
    font-size: 11px;
    color: #bbf7d0;
}

.current-country {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
}

.current-country span:first-child {
    font-size: 16px;
}

.current-coins {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(148, 163, 184, 0.4);
}

.coins-label {
    font-size: 12px;
    color: var(--muted);
}

.coins-row {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.coins-value {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.coins-add-btn {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: none;
    background: var(--accent);
    color: #020617;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(0, 209, 255, 0.45);
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.coins-add-btn:hover {
    transform: translateY(-1px);
    opacity: 0.97;
}

.coins-add-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 18px rgba(0, 209, 255, 0.35);
}

.current-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}

.btn-primary--thin {
    padding-block: 10px;
}

.btn-secondary--ghost {
    background: transparent;
}

/* Info card lateral */
.info-card {
    margin-top: 10px;
}

.arena-info-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.arena-info-list {
    list-style: none;
    font-size: 12px;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.arena-info-list li::before {
    content: "• ";
    color: var(--accent);
}

/* =========================================
   3. PANEL PRINCIPAL: ARENA
   ========================================= */
.arena-main-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.arena-main-title {
    font-size: 20px;
    font-weight: 600;
}

.arena-main-subtitle {
    font-size: 13px;
    color: var(--muted);
}

.arena-main-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #bbf7d0;
}

.arena-dot-live {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.25);
}

.chip {
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.55);
    background: rgba(15, 23, 42, 0.8);
    color: var(--muted);
    font-size: 11px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.12s ease;
}

.chip:hover {
    background: rgba(15, 23, 42, 0.98);
    border-color: var(--accent);
    color: #e5e7eb;
    transform: translateY(-1px);
}

/* Botón secundario de la Arena */
.arena-btn-secondary {
    margin-top: 15px;
    margin-bottom: 5px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.85);
    background: rgba(15, 23, 42, 0.9);
    color: #e5e7eb;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.arena-btn-secondary:hover {
    background: rgba(30, 64, 175, 0.75);
    border-color: rgba(59, 130, 246, 0.9);
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.35);
    transform: translateY(-1px);
}

/* Estado “Salir de la lista” */
.arena-btn-secondary--off {
    background: rgba(127, 29, 29, 0.9);
    border-color: rgba(248, 113, 113, 0.9);
    color: #fee2e2;
    box-shadow: 0 0 16px rgba(248, 113, 113, 0.25);
}

.arena-btn-secondary--off:hover {
    background: rgba(185, 28, 28, 0.95);
    border-color: rgba(252, 165, 165, 1);
    box-shadow: 0 0 20px rgba(248, 113, 113, 0.4);
    transform: translateY(-1px);
}

.arena-btn-secondary svg {
    width: 16px;
    height: 16px;
}

/* Lista de jugadores */
.players-card {
    margin-top: 4px;
    padding-top: 10px;
}

.players-header-row {
    display: grid;
    grid-template-columns: 2fr 1.4fr 1fr 1.6fr;
    gap: 8px;
    padding: 6px 10px 8px;
    border-bottom: 1px solid rgba(30, 41, 59, 0.9);
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.players-list {
    margin-top: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(30, 41, 59, 0.9);
    background: radial-gradient(circle at top left, #020617 0, #020617 55%, #02030a 100%);
    display: flex;
    flex-direction: column;
}

.player-row {
    display: grid;
    grid-template-columns: 2fr 1.4fr 1fr 1.6fr;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    background: rgba(15, 23, 42, 0.8);
    border-bottom: 1px solid rgba(15, 23, 42, 1);
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, transform 0.12s ease;
}

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

.player-row:hover {
    background: rgba(15, 23, 42, 0.98);
    border-color: rgba(56, 189, 248, 0.35);
    transform: translateY(-1px);
}

.player-row--selected {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.98), rgba(8, 47, 73, 0.95));
    border-color: rgba(56, 189, 248, 0.9);
}

/* Detalles fila jugador */
.player-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.player-avatar {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 0%, #22d3ee, #0ea5e9 55%, #0369a1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #0b1120;
    flex-shrink: 0;
}

.player-name-block {
    display: flex;
    flex-direction: column;
}

.player-username {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    display: block;
}

@media (max-width: 640px) {
    .player-username {
        max-width: 200px;
        font-size: 15px;
    }
}

.player-status-text {
    font-size: 11px;
    color: #22c55e;
}

.player-country {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
}

.player-country-flag {
    font-size: 16px;
}

.player-country-name {
    font-size: 13px;
}

.player-coins {
    font-size: 14px;
    font-weight: 500;
}

.player-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.player-actions button {
    font-size: 11px;
    padding: 6px 9px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    transition: transform 0.12s ease, opacity 0.12s ease;
}

.player-actions button:hover {
    transform: translateY(-1px);
    opacity: 0.96;
}

.btn-retar {
    background: var(--accent);
    color: #020617;
    font-weight: 600;
}

.btn-mensaje {
    background: rgba(15, 23, 42, 0.9);
    color: var(--text);
    border: 1px solid rgba(148, 163, 184, 0.7);
}

/* Badges de región */
.player-region-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(15, 23, 42, 0.9);
    color: #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.player-region--latam .player-region-badge {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.15), rgba(16, 185, 129, 0.28));
    border-color: rgba(52, 211, 153, 0.8);
    color: #bbf7d0;
}

.player-region--eu .player-region-badge {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.28));
    border-color: rgba(59, 130, 246, 0.85);
    color: #dbeafe;
}

.player-region--na .player-region-badge {
    background: linear-gradient(90deg, rgba(129, 140, 248, 0.18), rgba(79, 70, 229, 0.3));
    border-color: rgba(129, 140, 248, 0.9);
    color: #e0e7ff;
}

.player-region--asia .player-region-badge {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.18), rgba(234, 179, 8, 0.32));
    border-color: rgba(245, 158, 11, 0.9);
    color: #fef3c7;
}

.player-region--africa .player-region-badge {
    background: linear-gradient(90deg, rgba(248, 113, 113, 0.18), rgba(249, 115, 22, 0.32));
    border-color: rgba(248, 113, 113, 0.9);
    color: #fee2e2;
}

.player-region--oceania .player-region-badge {
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.18), rgba(45, 212, 191, 0.3));
    border-color: rgba(34, 211, 238, 0.9);
    color: #cffafe;
}

.player-region--other .player-region-badge {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(148, 163, 184, 0.6);
    color: #e5e7eb;
}

/* =========================================
   4. MODALES (RESPONSIVE & FULLSCREEN)
   ========================================= */

/* Modal para "Recibir Reto" (Pequeño) */
.challenge-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.challenge-modal-card {
    background: #0f172a;
    border-radius: 18px;
    padding: 24px 22px;
    width: 92%;
    max-width: 380px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    text-align: center;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}

.challenge-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
}

.challenge-error {
    margin-top: 12px;
    color: #fca5a5;
    font-size: 13px;
}

/* 
   Modal para "Apuesta Inicial" (Grande, Pantalla Completa, Fichas) 
*/
.arena-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    /* Fondo un poco más oscuro */
    backdrop-filter: blur(8px);
    /* Flexbox para centrar */
    display: flex;
    /* Ojo: JS lo alterna entre flex y none */
    align-items: center;
    justify-content: center;
    padding: 16px;
    /* Espacio seguro alrededor */
}

.arena-modal-content--large {
    position: relative;
    background: #0f172a;
    /* Color sólido base */
    background: radial-gradient(circle at top, #1e293b, #0f172a);
    border: 1px solid #334155;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
    border-radius: 20px;
    padding: 24px;
    width: 100%;
    max-width: 550px;
    /* Ancho máximo en escritorio */

    /* Scroll interno inteligente */
    max-height: 90vh;
    /* Nunca más alto que el 90% de la pantalla */
    display: flex;
    flex-direction: column;

    /* Animación */
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform: translateY(20px);
    opacity: 0;
}

.modal-body {
    overflow-y: auto;
    flex: 1;
    /* Ocupa el espacio disponible */
    padding-right: 5px;
    /* Evita que el scroll tape texto */
    margin-top: 10px;
    margin-bottom: 10px;

    /* Scrollbar estilizado */
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}

@keyframes modalSlideUp {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.arena-modal-backdrop {
    display: none;
}

@media (max-width: 640px) {
    .arena-modal {
        padding: 0;
        /* Sin padding externo en móviles */
        align-items: flex-end;
        /* Modal pegado abajo tipo "Sheet" */
    }

    .arena-modal-content--large {
        max-width: 100%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        max-height: 85vh;
        /* Un poco menos alto */
        padding: 20px;
        margin: 0;
        /* Sin margen */
    }

    .modal-header h2 {
        font-size: 18px;
    }
}

/* Contenidos internos del modal de apuesta */
.challenge-timer-box {
    text-align: center;
    margin: 15px 0;
    font-size: 14px;
    color: #94a3b8;
}

.timer-highlight {
    color: #facc15;
    font-weight: bold;
    font-size: 18px;
}

.betting-panel {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Fichas */
.chip-rack-modal {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

/* Estilos de Fichas (Reutilizables) */
.poker-chip {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px dashed white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    text-shadow: 0 1px 2px black;
    user-select: none;
    position: relative;

    flex-shrink: 0;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.poker-chip:active {
    transform: scale(0.95);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
}

.poker-chip::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Colores Fichas */
.chip-1k {
    background: radial-gradient(circle, #9ca3af 0%, #4b5563 100%);
    border-color: #e5e7eb;
}

.chip-5k {
    background: radial-gradient(circle, #ef4444 0%, #991b1b 100%);
    border-color: #fecaca;
}

.chip-10k {
    background: radial-gradient(circle, #3b82f6 0%, #1e40af 100%);
    border-color: #bfdbfe;
}

.chip-25k {
    background: radial-gradient(circle, #22c55e 0%, #166534 100%);
    border-color: #bbf7d0;
}

.chip-50k {
    background: radial-gradient(circle, #1f2937 0%, #000000 100%);
    border-color: #6b7280;
}

.chip-100k {
    background: radial-gradient(circle, #a855f7 0%, #6b21a8 100%);
    border-color: #e9d5ff;
}

/* Display de apuesta */
.bet-display-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.bet-input-wrapper {
    display: flex;
    gap: 10px;
}

.bet-input-display {
    background: #020617;
    border: 2px solid #3b82f6;
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    width: 180px;
    padding: 10px;
    border-radius: 8px;
}

.btn-clear-bet {
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    cursor: pointer;
}

.bet-limits-hint {
    font-size: 12px;
    color: #64748b;
}

/* Responsive adjustments */
/* En css/layout.css */

@media (max-width: 768px) {
    .arena-shell {
        grid-template-columns: 1fr;
        /* Una sola columna (Sidebar arriba o abajo) */
        padding: 10px;
        gap: 20px;
    }

    /* En móvil, el sidebar suele ir DEBAJO del contenido principal o en un menú hamburguesa.
       Si quieres que esté visible siempre, déjalo arriba. */
    .arena-sidebar {
        order: -1;
        /* Sidebar primero (Tu estado) */
    }
}


@media (max-width: 640px) {
    .arena-header-right span {
        display: none;
    }

    .arena-header-right {
        gap: 4px;
    }

    .players-header-row,
    .player-row {
        grid-template-columns: 2.4fr 1.8fr 1.2fr;
    }

    .players-col--actions {
        display: none;
    }

    .player-row {
        grid-auto-rows: auto;
        grid-template-rows: auto auto;
        padding-bottom: 12px;
    }

    .player-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        margin-top: 6px;
        padding-left: 4px;
    }

    .player-actions button {
        font-size: 12px;
        padding: 7px 11px;
    }

    .player-country {
        gap: 4px;
    }

    .player-country-name {
        display: none;
    }

    .player-region-badge {
        font-size: 9px;
        padding: 2px 6px;
    }

    .arena-modal-content--large {
        padding: 20px;
        min-height: 50vh;
    }
}


/* === LISTA DE JUGADORES RESPONSIVE === */

@media (max-width: 640px) {

    /* Ocultar encabezados de tabla, ya no parece tabla */
    .players-header-row {
        display: none;
    }

    .players-list {
        background: transparent;
        border: none;
        gap: 10px;
        /* Separación entre tarjetas */
    }

    .player-row {
        /* Convertir fila en tarjeta */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;

        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 0;
        /* Controlado por el gap del padre */
    }

    .player-row:last-child {
        border-bottom: 1px solid #334155;
        /* Restaurar borde */
    }

    /* Reordenar elementos internos con Flexbox */
    .player-main {
        width: 100%;
        justify-content: space-between;
    }

    .player-country {
        font-size: 12px;
    }

    /* Mostrar Coins y Botón en una fila inferior */
    .player-row::after {
        content: "";
        /* Hack para limpiar floats si hubiera */
        display: table;
        clear: both;
    }

    /* Ajustes específicos de columnas */
    .player-coins {
        font-size: 16px;
        font-weight: 700;
        color: #fbbf24;
        /* Oro */
        align-self: flex-start;
        margin-top: -4px;
    }

    .player-actions {
        width: 100%;
        margin-top: 5px;
    }

    .btn-retar {
        width: 100%;
        padding: 10px;
        font-size: 14px;
    }
}

/* Perfil Modal */
.profile-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.profile-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.profile-avatar-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
}

.profile-image,
.profile-initial-large {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent);
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: bold;
    color: #cbd5e1;
}

.btn-edit-photo {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #3b82f6;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    transition: transform 0.1s;
}

.btn-edit-photo:hover {
    transform: scale(1.1);
}

.btn-text-danger {
    background: none;
    border: none;
    color: #ef4444;
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}

.profile-details {
    width: 100%;
    display: grid;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    padding: 15px;
    border-radius: 12px;
}

.field-readonly {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
    font-size: 14px;
}

.field-readonly:last-child {
    border-bottom: none;
}

.field-readonly label {
    color: #94a3b8;
}

.field-readonly span {
    font-weight: 500;
    color: #f1f5f9;
}

.text-accent {
    color: var(--accent) !important;
    font-weight: bold;
}

.full-width {
    width: 100%;
}

/* Avatar Imagen en Lista */
.player-avatar-img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: #0f172a;
    flex-shrink: 0;
}

/* Historial Modal */
.history-table-wrapper {
    width: 100%;
    overflow-x: auto;
    /* Scroll horizontal para columnas */
    border: 1px solid #334155;
    border-radius: 8px;
    margin-top: 15px;
}

#historyModal .history-body {
    flex: 1;
    overflow-y: auto;
    /* Scroll vertical DENTRO del cuerpo del modal */
    min-height: 0;
    /* Fix para flexbox scroll */
}


.history-table {
    width: 100%;
    min-width: 500px;
    ;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
}

.history-table th,
.history-table td {
    padding: 10px;
    font-size: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    /* Evitar que el texto se parta */
}

.history-table th {
    background: rgba(0, 0, 0, 0.3);
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
}

/* Ajuste específico para móviles */
@media (max-width: 640px) {

    /* Asegurar que el modal de historial no se salga de la pantalla */
    #historyModal .arena-modal-content--large {
        max-height: 85vh;
        /* Altura máxima segura */
        display: flex;
        flex-direction: column;
    }

    #historyModal .history-body {
        flex: 1;
        overflow-y: auto;
        /* Scroll vertical DENTRO del cuerpo del modal */
        min-height: 0;
        /* Fix para flexbox scroll */
    }

    /* Reducir padding de celdas */
    .history-table th,
    .history-table td {
        padding: 8px 6px;
        font-size: 11px;
    }
}


.history-table tr:last-child td {
    border-bottom: none;
}

.result-win {
    color: #4ade80;
    font-weight: bold;
}

.result-lose {
    color: #f87171;
}

.result-draw {
    color: #fbbf24;
}

.win-reason {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

/* =========================================
   CORRECCIONES ESPECÍFICAS PARA WALLET MODAL (CREAR/REGISTRO)
   ========================================= */

/* Asegurar que el contenido del modal use Flexbox vertical */
#walletModal .arena-modal-content--large {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    /* Altura máxima segura (dejando margen arriba/abajo) */
    padding: 0;
    /* Quitamos padding general para manejarlo por secciones */
    overflow: hidden;
    /* Evitar scroll en el contenedor padre */
}

/* Header fijo arriba */
#walletModal .modal-header {
    flex-shrink: 0;
    /* No encoger */
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: #0f172a;
    /* Fondo sólido para tapar el scroll */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

/* Cuerpo con Scroll (El formulario va aquí) */
#walletModal #walletRegisterView,
#walletModal #walletBuyView,
#walletModal #walletDetailsView,
#walletModal #walletSellView {
    flex: 1;
    /* Ocupar espacio restante */
    overflow-y: auto;
    /* Scroll solo aquí */
    padding: 20px 24px;
    /* Scrollbar estilizado */
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}

/* Footer o Botones finales fijos (opcional) */
/* Si los botones están dentro del formulario, scrollearán con él. 
   Si quieres que estén siempre visibles, sácalos del div scrollable. 
   En este caso, como están dentro del form, aseguramos un margen inferior */
#walletModal form {
    padding-bottom: 20px;
}

/* Ajustes específicos para el Formulario de Registro */
.wallet-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 2 columnas en escritorio */
    gap: 15px;
}

/* Ajuste Móvil */
@media (max-width: 640px) {
    #walletModal .arena-modal-content--large {
        max-height: 95vh;
        /* Un poco menos en móvil para ver que es un modal */
        border-radius: 20px 20px 0 0;
        /* Bordes redondos solo arriba */
        margin: 0;
        position: absolute;
        bottom: 0;
        /* Pegado abajo */
        width: 100%;
    }

    .wallet-form .form-grid {
        grid-template-columns: 1fr;
        /* 1 columna en móvil (stack vertical) */
        gap: 12px;
    }

    #walletModal .modal-header {
        padding: 15px 20px;
    }

    #walletModal #walletRegisterView {
        padding: 15px 20px;
    }
}

.field-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #cbd5e1;
    margin-top: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.wallet-balance-card {
    background: linear-gradient(135deg, #064e3b, #065f46);
    padding: 20px;
    border-radius: 16px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid #34d399;
}

.coin-packages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.package-btn {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    transition: transform 0.1s, border-color 0.1s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.package-btn:hover {
    transform: translateY(-2px);
    border-color: #3b82f6;
    background: #0f172a;
}

.pkg-coins {
    font-weight: bold;
    color: #fbbf24;
    font-size: 16px;
}

.pkg-price {
    font-size: 12px;
    color: #cbd5e1;
    margin-top: 4px;
}

/* =============================================
   DISEÑO PREMIUM - PARTIDA (CYBERPUNK CASINO)
   ============================================= */

body.match-body-premium {
    margin: 0;
    padding: 0;
    background: radial-gradient(circle at 50% 30%, #1e293b 0%, #0f172a 60%, #020617 100%);
    height: 100vh;
    height: 100dvh;
    /* Mobile Friendly */
    display: flex;
    flex-direction: column;
    font-family: 'Outfit', sans-serif;
    overflow: hidden;
    color: #f8fafc;
}

/* Header */
.game-header {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 100;
}

.logo-mini {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #000;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.round-badge {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.round-label {
    font-size: 8px;
    color: #94a3b8;
    letter-spacing: 1px;
}

.round-value {
    font-size: 14px;
    font-weight: 700;
    color: #e2e8f0;
}

.timer-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 10px;
}

.timer-display {
    background: #0f172a;
    border: 1px solid #334155;
    padding: 5px 20px;
    border-radius: 20px;
    font-family: 'Sora', monospace;
    font-size: 18px;
    font-weight: 700;
    color: #facc15;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    min-width: 80px;
    text-align: center;
}

.btn-exit {
    background: transparent;
    border: none;
    font-size: 20px;
    color: #64748b;
    cursor: pointer;
}

/* Mesa de Juego */
.game-table {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px 10px;
    overflow-y: auto;
    min-height: 0;
    /* Flexbox fix */
}

/* Zonas */
.player-zone {
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 10;
}

.opponent-zone {
    align-items: center;
    opacity: 0.9;
}

.my-zone {
    align-items: center;
    justify-content: flex-end;
}

/* Cartas */
.cards-container {
    display: flex;
    gap: 6px;
    justify-content: center;
    perspective: 800px;
    min-height: 70px;
}

.card-slot {
    width: 48px;
    height: 68px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s;
    transform-style: preserve-3d;
}

.card-slot--mine {
    background: #f8fafc;
    color: #0f172a;
    transform: translateY(-5px);
    border: 2px solid #fff;
}

.card-slot--hidden {
    background: repeating-linear-gradient(45deg, #1e293b, #1e293b 5px, #334155 5px, #334155 10px);
    border: 1px solid #475569;
    color: transparent;
}

.card-slot--empty {
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed #475569;
}

/* Info Cards */
.player-info-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(15, 23, 42, 0.8);
    padding: 6px 12px 6px 6px;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.my-card {
    border-color: rgba(34, 197, 94, 0.3);
    background: linear-gradient(90deg, rgba(20, 83, 45, 0.8), rgba(15, 23, 42, 0.8));
}

.avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.opponent-avatar {
    background: #be123c;
    color: white;
}

.my-avatar {
    background: #15803d;
    color: white;
}

.player-stats {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.player-name {
    font-size: 13px;
    font-weight: 600;
    color: #e2e8f0;
}

.player-wallet {
    font-size: 11px;
    color: #94a3b8;
}

.my-wallet {
    color: #4ade80;
    font-weight: 600;
}

.wallet-label {
    font-size: 8px;
    opacity: 0.7;
    margin-right: 4px;
}




.bet-pill {
    background: #020617;
    border: 1px solid #334155;
    padding: 4px 8px;
    border-radius: 8px;
    text-align: center;
}

.bet-label {
    display: block;
    font-size: 7px;
    color: #64748b;
    letter-spacing: 0.5px;
}

.bet-value {
    font-size: 12px;
    font-weight: 700;
    color: #facc15;
}

.score-pill {
    position: absolute;
    right: -12px;
    top: -21px;
    background: #2563eb;
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Centro Mesa */
.table-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    pointer-events: none;
}

.pot-container {
    display: inline-block;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    padding: 10px 30px;
    border-radius: 60px;
    border: 1px solid rgba(250, 204, 21, 0.4);
    box-shadow: 0 0 30px rgba(250, 204, 21, 0.15);
    margin-bottom: 0 !important;
}

.pot-label {
    display: block;
    font-size: 10px;
    color: #fbbf24;
    letter-spacing: 2px;
    margin-bottom: 2px;
}

.pot-value {
    font-family: 'Sora', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.turn-notification {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 1px;
}

.result-message {
    font-size: 18px;
    font-weight: 700;
    margin-top: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 12px;
    pointer-events: auto;
}

/* Controles Footer */
.game-controls {
    background: #0f172a;
    border-top: 1px solid #1e293b;
    padding: 15px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 50;
    flex-shrink: 0;
}

.chips-panel {
    background: #1e293b;
    border-radius: 16px;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #334155;
}

.bet-lcd-screen {
    background: #020617;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 8px;
}

.lcd-label {
    font-size: 10px;
    color: #64748b;
}

.lcd-value {
    background: transparent;
    border: none;
    text-align: right;
    width: 100%;
    color: #38bdf8;
    font-family: 'Sora', monospace;
    font-size: 18px;
    font-weight: 700;
}

.btn-clear {
    background: #ef4444;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 10px;
    padding: 4px 8px;
    margin-left: 8px;
    cursor: pointer;
}

.chips-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 5px;
    justify-content: center;
}

.chips-scroll::-webkit-scrollbar {
    display: none;
}

.actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.5fr;
    gap: 8px;
}

.game-btn {
    height: 55px;
    border-radius: 12px;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: transform 0.1s, filter 0.2s;
}

.game-btn:active {
    transform: scale(0.95);
}

.game-btn:disabled {
    opacity: 0.4;
    filter: grayscale(1);
    cursor: not-allowed;
}

.btn-icon {
    font-size: 18px;
    margin-bottom: 2px;
    display: block;
}

.btn-fold {
    background: #334155;
    color: #94a3b8;
}

.btn-check {
    background: #334155;
}

.btn-call {
    background: #0f766e;
    color: #ccfbf1;
}

.btn-action-main {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
    font-size: 12px;
    letter-spacing: 0.5px;
}

/* Overlays */
.overlay-animation {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

#victoryOverlay {
    background: radial-gradient(circle, rgba(34, 197, 94, 0.4) 0%, rgba(0, 0, 0, 0.9) 80%);
}

.victory-content {
    text-align: center;
    color: #fff;
}

.victory-content h1 {
    font-size: 4rem;
    font-weight: 900;
    text-shadow: 0 0 20px #4ade80, 0 0 40px #22c55e;
    background: linear-gradient(to bottom, #fff, #bbf7d0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.animate-pop {
    animation: popIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    80% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#defeatOverlay {
    background: rgba(15, 23, 42, 0.95);
}

.defeat-content {
    text-align: center;
    color: #94a3b8;
}

.defeat-content h1 {
    font-size: 3rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.animate-shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    75% {
        transform: translateX(10px);
    }
}

.coin-shower::before {
    content: '💰 🪙 💎';
    font-size: 2rem;
    animation: rain 2s infinite linear;
    display: block;
}

@keyframes rain {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(50px);
        opacity: 0;
    }
}

.game-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

.card-slot.revealing {
    animation: suspenseFlip 3s ease-in-out forwards;
}

@keyframes suspenseFlip {
    0% {
        transform: rotateY(0);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    }

    20% {
        transform: rotateY(20deg);
    }

    40% {
        transform: rotateY(-20deg);
    }

    60% {
        transform: rotateY(180deg) scale(1.2);
        box-shadow: 0 0 30px #facc15;
    }

    80% {
        transform: rotateY(180deg) scale(1.1);
    }

    100% {
        transform: rotateY(0) scale(1);
    }
}

.card-new {
    animation: cardDeal 0.5s ease-out;
}

@keyframes cardDeal {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.5);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* Animación ALL IN */
.all-in-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    animation: fadeIn 0.2s forwards;
    pointer-events: none;
}

.all-in-text {
    font-family: 'Sora', sans-serif;
    font-size: 6rem;
    font-weight: 900;
    color: #ef4444;
    text-shadow: 0 0 20px #b91c1c, 0 0 50px red;
    transform: scale(0);
    animation: allInSlam 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.all-in-flare {
    position: absolute;
    width: 100%;
    height: 100px;
    background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.5), transparent);
    animation: flarePass 0.5s ease-out 0.2s forwards;
    opacity: 0;
}

@keyframes allInSlam {
    0% {
        transform: scale(5);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes flarePass {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}


/* COIN FLIP 3D */
.coin-scene {
    perspective: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.coin {
    width: 150px;
    height: 150px;
    position: relative;
    transform-style: preserve-3d;
    /* La animación se inyecta con JS */
}

.coin-face {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 18px;
    text-align: center;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(250, 204, 21, 0.6);
    border: 8px solid #facc15;
    background: radial-gradient(circle, #fef08a, #eab308);
    color: #422006;
    padding: 10px;
}

.coin-back {
    transform: rotateY(180deg);
    background: radial-gradient(circle, #bfdbfe, #3b82f6);
    /* Azul para el otro */
    border-color: #60a5fa;
    color: #172554;
}

.coin-text {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    min-height: 30px;
}

/* Clase de animación */
.flipping {
    animation: spinCoin 3s cubic-bezier(0.4, 2.5, 0.6, 0.8) forwards;
}

@keyframes spinCoin {
    0% {
        transform: rotateY(0) rotateX(0);
    }

    100% {
        transform: rotateY(1800deg) rotateX(10deg);
    }

    /* 5 vueltas */
    /* El destino final (0 o 180) se ajusta dinámicamente en JS */
}



.chip-allin {
    background: radial-gradient(circle, #dc2626 0%, #991b1b 100%);
    border-color: #fca5a5;
    font-size: 9px;
    /* Texto un poco más pequeño para que quepa */
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.6);
}

.chip-allin:active {
    transform: scale(0.95);
}

/* Oculto por defecto hasta que JS diga lo contrario */
.hidden-until-ready {
    display: none !important;
}

.loader-spinner {
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-left-color: #3b82f6;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Mesa Ajustable */
.game-table {
    /* Asegura que quepa en pantallas cortas */
    min-height: 0;
    flex: 1;
    padding: 10px;
    gap: 15px;
    /* Espacio entre rival y yo */
}

/* Cartas Responsive */
@media (max-width: 400px) {
    .cards-container {
        gap: 4px;
        /* Menos espacio entre cartas */
    }

    .card-slot {
        width: 38px;
        /* Cartas más pequeñas */
        height: 54px;
        font-size: 16px;
        border-radius: 4px;
    }
}

/* Panel de Fichas (Scroll Horizontal Suave) */
.chips-scroll {
    padding-bottom: 10px;
    /* Mejora táctil */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

.poker-chip {
    scroll-snap-align: center;
}

/* Botonera de Acciones (Grid Responsive) */
@media (max-width: 480px) {
    .actions-grid {
        grid-template-columns: 1fr 1fr;
        /* 2 botones arriba, 2 abajo */
        gap: 8px;
    }

    /* El botón principal ocupa todo el ancho abajo */
    .btn-action-main {
        grid-column: 1 / -1;
        height: 50px;
        font-size: 14px;
    }

    .game-btn {
        height: 45px;
        font-size: 10px;
    }
}

/* =========================================
   CORRECCIONES ESPECÍFICAS PARA CHALLENGE MODAL (MÓVIL)
   ========================================= */

@media (max-width: 640px) {

    /* 1. Ajustar el panel de apuestas para que ocupe menos espacio */
    .betting-panel {
        padding: 15px 10px;
        /* Menos relleno */
        margin: 10px 0;
        /* Menos margen vertical */
        width: 100%;
        /* Asegurar ancho completo */
    }

    /* 2. Reducir un poco el tamaño de las fichas para que quepan mejor */
    .chip-rack-modal {
        gap: 8px;
        /* Menos espacio entre fichas */
        flex-wrap: wrap;
        /* Permitir que bajen si no caben */
    }

    .chip-rack-modal .poker-chip {
        width: 42px;
        /* Antes 48px */
        height: 42px;
        /* Antes 48px */
        font-size: 9px;
        border-width: 3px;
    }

    /* 3. Arreglar el input y el botón de borrar */
    .bet-display-modal {
        width: 100%;
    }

    .bet-input-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 8px;
    }

    .bet-input-display {
        width: 100%;
        /* Que sea flexible */
        max-width: 140px;
        /* Pero no gigante */
        font-size: 20px;
        /* Letra un poco más chica */
        padding: 8px;
    }

    .btn-clear-bet {
        padding: 8px 10px;
        font-size: 11px;
        white-space: nowrap;
        /* Evita que el texto se parta */
    }

    /* 4. Ajustar el timer para que no ocupe tanto */
    .challenge-timer-box {
        margin: 10px 0;
        font-size: 13px;
    }
}

/* =========================================
   NUEVA APUESTA DE RONDA (MATCH CENTER)
   ========================================= */

/* Contenedor para apilar Pozo y Apuesta */
.stats-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    /* Espacio entre el pozo y la apuesta */
    margin-bottom: 15px;
}

/* Estilos de la Nueva Apuesta de Ronda */
.round-bet-container {
    display: inline-block;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(4px);
    padding: 6px 20px;
    border-radius: 40px;
    border: 1px solid rgba(56, 189, 248, 0.5);
    /* Borde Azul */
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.15);
}

.round-bet-label {
    display: block;
    font-size: 9px;
    color: #38bdf8;
    /* Texto Azul Claro */
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 2px;
    font-weight: 600;
}

.round-bet-value {
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    /* Un poco más pequeño que el pozo */
    font-weight: 700;
    color: #e0f2fe;
    /* Blanco azulado */
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}


/* Ajustes para iconos SVG dentro de botones */
.arena-menu-btn svg {
    display: block;
    /* Evita espacios extra */
    min-width: 16px;
    /* Evita que se aplaste */
}

/* Ajuste específico para Móvil */
@media (max-width: 640px) {

    /* Hacemos que los botones del header sean cuadrados perfectos en móvil */
    .arena-header-right .arena-menu-btn {
        padding: 8px;
        /* Padding uniforme */
        width: 36px;
        /* Ancho fijo */
        height: 36px;
        /* Alto fijo */
        justify-content: center;
        /* Centrar icono */
        border-radius: 50%;
        /* Opcional: Hacerlos redondos en vez de píldora */
    }

    /* El span ya se oculta con tu código actual, pero nos aseguramos */
    .arena-header-right .arena-menu-btn span {
        display: none;
    }
}


/* Agrega o modifica esto al final de arena.css */

@media (max-width: 640px) {

    /* 1. Hacemos visible el logo de nuevo */
    .arena-logo-text {
        display: flex;
        flex-direction: column;
        transform: scale(0.85);
        /* Lo reducimos al 85% para que quepa */
        transform-origin: left center;
        /* Que se escale desde la izquierda */
        margin-right: auto;
        /* Empuja los botones a la derecha */
    }

    /* 2. Opcional: Ocultamos solo el subtítulo "ARENA 1v1" para limpiar la vista */
    .arena-logo-sub {
        display: none;
    }

    /* 3. Ajustamos el tamaño del texto principal */
    .wittii-typo-logo {
        font-size: 22px;
        /* Un poco más pequeño que en escritorio */
    }
}

/* Header más compacto en móvil */
@media (max-width: 480px) {
    .game-header {
        height: 50px;
        padding: 0 10px;
    }

    .timer-display {
        font-size: 16px;
        padding: 4px 12px;
        min-width: 60px;
    }
}


/* =========================================
   CORRECCIÓN CRÍTICA: SCROLL EN MODALES DE AUTH (MÓVIL)
   ========================================= */

@media (max-width: 640px),
(max-height: 700px) {

    /* Aplicar solo a los modales de Login y Registro */
    #registerModal .modal-card,
    #loginModal .modal-card {
        max-height: 90vh;
        /* Nunca ocupar más del 90% de la altura de la pantalla */
        display: flex;
        flex-direction: column;
        overflow: hidden;
        /* El scroll lo manejará el cuerpo, no la tarjeta */
        margin: auto;
        /* Centrado seguro */
    }

    /* Hacer que el formulario (cuerpo) sea el que tenga el scroll */
    #registerForm.modal-body,
    #loginForm.modal-body {
        overflow-y: auto;
        /* Activar scroll vertical */
        flex: 1;
        /* Ocupar todo el espacio disponible */
        padding-bottom: 40px;
        /* Espacio extra abajo para que el botón no quede pegado al borde del celular */

        /* Suavizar scroll en iOS */
        -webkit-overflow-scrolling: touch;
    }

    /* Asegurar que el header se quede quieto arriba */
    #registerModal .modal-header,
    #loginModal .modal-header {
        flex-shrink: 0;
        z-index: 10;
        background: inherit;
        /* Mantiene el fondo del modal */
        position: relative;
    }
}

#onlineCount {
    margin-left: 5px;
}

/* =========================================
   CENTRO DE AYUDA COLAPSABLE (MÓVIL)
   ========================================= */

/* Estilos base del header (siempre visibles) */
.help-header-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: default;
    /* Por defecto no parece botón en escritorio */
}

.toggle-icon {
    font-size: 12px;
    color: var(--accent);
    transition: transform 0.3s ease;
    display: none;
    /* Oculto en escritorio */
}

/* En Escritorio: El contenido siempre se ve */
.help-content-wrapper {
    display: block;
    max-height: none;
    overflow: visible;
}

/* === LÓGICA MÓVIL (Menos de 900px para incluir tablets verticales) === */
@media (max-width: 900px) {

    /* Convertir el header en un botón clickable */
    .help-header-toggle {
        cursor: pointer;
        padding: 5px 0;
        /* Un poco más de área de click */
    }

    .help-header-toggle:hover .arena-info-title {
        color: var(--accent);
    }

    /* Mostrar la flecha */
    .toggle-icon {
        display: block;
        transform: rotate(-90deg);
        /* Apunta a la izquierda (cerrado) */
    }

    /* Ocultar contenido por defecto */
    .help-content-wrapper {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
        margin-top: 0;
    }

    /* Estado ABIERTO (se activa con JS) */
    .help-content-wrapper.is-open {
        max-height: 500px;
        /* Suficiente para mostrar todo */
        opacity: 1;
        margin-top: 10px;
    }

    /* Rotar flecha al abrir */
    .info-card.is-active .toggle-icon {
        transform: rotate(0deg);
        /* Apunta abajo (abierto) */
    }
}