/* ── INTERFAZ GENERAL ────────────────── */
.titulo-juego {
    text-align: center;
    font-family: 'Chakra Petch', 'Courier New', monospace;
    color: #fff;
    margin: 15px 0;
    font-size: 1.8rem;
}

.ludo-menu-container {
    max-width: 500px;
    margin: 30px auto;
    background: #06060b;
    border: 1px solid rgba(0, 183, 255, 0.2);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
    text-align: center;
}

.ludo-menu-container h2 {
    font-family: 'Chakra Petch', 'Courier New', monospace;
    color: #00b7ff;
    font-size: 1.3rem;
    letter-spacing: 2px;
    margin-bottom: 25px;
}

.menu-seccion {
    margin-bottom: 20px;
    text-align: left;
}

.menu-seccion h3 {
    font-size: 11px;
    color: #55687d;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.btn-menu {
    display: flex;
    align-items: center;
    width: 100%;
    background: #0a0e14;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 10px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-menu:hover:not(.btn-disabled) {
    border-color: #39ff14;
    background: rgba(57, 255, 20, 0.04);
    box-shadow: 0 0 12px rgba(57, 255, 20, 0.15);
}

.btn-icon { font-size: 1.5rem; margin-right: 15px; }
.btn-text { display: flex; flex-direction: column; font-family: 'Chakra Petch', 'Courier New', monospace; font-weight: bold; }
.btn-text small { font-size: 0.75rem; color: #778899; margin-top: 2px; }
.btn-menu.btn-disabled { opacity: 0.5; cursor: not-allowed; border-color: rgba(255, 0, 85, 0.2); }

.btn-volver-menu {
    background: transparent;
    border: 1px solid #ff7b00;
    color: #ff7b00;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-family: 'Chakra Petch', 'Courier New', monospace;
    width: 100%;
    margin-bottom: 5px;
}
.btn-volver-menu:hover { background: #ff7b00; color: #000; }

/* BOTÓN PANTALLA COMPLETA */
.btn-fullscreen {
    background: rgba(0, 183, 255, 0.1);
    border: 1px solid #00b7ff;
    color: #00b7ff;
    font-family: 'Chakra Petch', 'Courier New', monospace;
    font-weight: bold;
    padding: 8px 12px;
    width: 100%;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 5px;
    font-size: 12px;
    transition: all 0.2s;
}
.btn-fullscreen:hover {
    background: #00b7ff;
    color: #000;
}

.ludo-viewport {
    display: flex;
    gap: 20px;
    max-width: 950px;
    margin: 0 auto 30px auto;
    background: #06060b;
    border: 1px solid rgba(0, 183, 255, 0.2);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
}

/* AJUSTE FIEL PARA EVITAR CORTES EN HORIZONTAL (PANTALLA COMPLETA) */
.ludo-viewport:fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #06060b;
    padding: 10px;
}

/* Forzamos que en pantalla completa el tablero dependa de la altura total de la pantalla */
.ludo-viewport:fullscreen .ludo-board-wrapper {
    max-width: 82vh;
    max-height: 82vh;
}

.ludo-dashboard { display: flex; flex-direction: column; gap: 12px; width: 220px; flex-shrink: 0; }
.dash-panel { background: #0a0e14; border: 1px solid rgba(0, 183, 255, 0.15); border-radius: 8px; padding: 12px; text-align: center; }
.dash-panel label { font-size: 10px; color: #00b7ff; display: block; letter-spacing: 2px; margin-bottom: 5px; }
.dash-panel span { font-size: 1.3rem; font-weight: bold; font-family: 'Chakra Petch', 'Courier New', monospace; }

/* COLORES DE TURNOS EN TEXTO */
.player-turn-green { color: #39ff14; text-shadow: 0 0 8px #39ff14; }
.player-turn-orange { color: #ff7b00; text-shadow: 0 0 8px #ff7b00; }
.player-turn-blue { color: #00b7ff; text-shadow: 0 0 8px #00b7ff; }
.player-turn-red { color: #ff0055; text-shadow: 0 0 8px #ff0055; }

.zona-dado { display: flex; flex-direction: column; align-items: center; gap: 12px; }


/* ── EL DADO: MATRIZ DE NEÓN CON DEGRADADO PREMIUM ── */
.dado {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #141923, #020408);
    border: 2px solid #fff;
    border-radius: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 7px;
    gap: 5px;
    box-sizing: border-box;
    position: relative;
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.05);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Puntos LED internos del dado */
.dado-punto {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

/* Estado activo: Brillo reflectante */
.dado-punto.activo {
    background: #fff;
    box-shadow: 0 0 10px #fff, 0 0 20px #fff;
}

.dado.rodando { animation: rotarDado 0.2s infinite linear; }
@keyframes rotarDado { 
    0% { transform: scale(0.95) rotate(0deg); } 
    100% { transform: scale(0.95) rotate(360deg); } 
}

/* BOTÓN ACCIÓN GENERAL */
.btn-accion-ludo {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #fff;
    color: #fff;
    font-family: 'Chakra Petch', 'Courier New', monospace;
    font-weight: bold;
    padding: 10px 15px;
    width: 100%;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}


/* ── DINÁMICA DE COLORES DE TURNO (DADO Y BOTÓN) ── */
.turno-theme-green .dado { 
    border-color: #39ff14; 
    background: linear-gradient(135deg, #0a2210, #020804); 
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.4), inset 0 0 10px rgba(57, 255, 20, 0.2); 
}
.turno-theme-green .dado-punto.activo { background: #39ff14; box-shadow: 0 0 8px #39ff14, 0 0 15px #39ff14; }
.turno-theme-green .btn-accion-ludo { background: rgba(57, 255, 20, 0.1); border-color: #39ff14; color: #39ff14; }
.turno-theme-green .btn-accion-ludo:hover:not(:disabled) { background: #39ff14; color: #000; }

.turno-theme-orange .dado { 
    border-color: #ff7b00; 
    background: linear-gradient(135deg, #2c1201, #0a0400); 
    box-shadow: 0 0 20px rgba(255, 123, 0, 0.4), inset 0 0 10px rgba(255, 123, 0, 0.2); 
}
.turno-theme-orange .dado-punto.activo { background: #ff7b00; box-shadow: 0 0 8px #ff7b00, 0 0 15px #ff7b00; }
.turno-theme-orange .btn-accion-ludo { background: rgba(255, 123, 0, 0.1); border-color: #ff7b00; color: #ff7b00; }
.turno-theme-orange .btn-accion-ludo:hover:not(:disabled) { background: #ff7b00; color: #000; }

.turno-theme-blue .dado { 
    border-color: #00b7ff; 
    background: linear-gradient(135deg, #051c2e, #01060a); 
    box-shadow: 0 0 20px rgba(0, 183, 255, 0.4), inset 0 0 10px rgba(0, 183, 255, 0.2); 
}
.turno-theme-blue .dado-punto.activo { background: #00b7ff; box-shadow: 0 0 8px #00b7ff, 0 0 15px #00b7ff; }
.turno-theme-blue .btn-accion-ludo { background: rgba(0, 183, 255, 0.1); border-color: #00b7ff; color: #00b7ff; }
.turno-theme-blue .btn-accion-ludo:hover:not(:disabled) { background: #00b7ff; color: #000; }

.turno-theme-red .dado { 
    border-color: #ff0055; 
    background: linear-gradient(135deg, #2a0312, #080003); 
    box-shadow: 0 0 20px rgba(255, 0, 85, 0.4), inset 0 0 10px rgba(255, 0, 85, 0.2); 
}
.turno-theme-red .dado-punto.activo { background: #ff0055; box-shadow: 0 0 8px #ff0055, 0 0 15px #ff0055; }
.turno-theme-red .btn-accion-ludo { background: rgba(255, 0, 85, 0.1); border-color: #ff0055; color: #ff0055; }
.turno-theme-red .btn-accion-ludo:hover:not(:disabled) { background: #ff0055; color: #000; }


/* ── DISEÑO FIEL DEL TABLERO ────────────────── */
.ludo-board-wrapper {
    background: #020205;
    padding: 8px;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.08);
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
}

.ludo-board {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-template-rows: repeat(15, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.15);
    width: 100%;
    aspect-ratio: 1 / 1;
}

.cell {
    background: #0c101b;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Colores de caminos */
.path-green { background: #072a15 !important; border: 1px solid rgba(57, 255, 20, 0.3); }
.path-orange { background: #331702 !important; border: 1px solid rgba(255, 123, 0, 0.3); }
.path-blue { background: #04233c !important; border: 1px solid rgba(0, 183, 255, 0.3); }
.path-red { background: #340518 !important; border: 1px solid rgba(255, 0, 85, 0.3); }

.star-cell {
    background: #1a2233 !important;
    position: relative;
}

.star-icon {
    position: absolute;
    z-index: 1;
    font-size: 14px;
    text-shadow: 0 0 5px #fff;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.safe-cell {
    position: relative;
}

.arrow {
    font-weight: bold;
    font-size: 14px;
    display: inline-block;
}
.arrow-green { color: #39ff14; }
.arrow-orange { color: #ff7b00; transform: rotate(90deg); }
.arrow-blue { color: #00b7ff; }
.arrow-red { color: #ff0055; }

/* Casas Grandes */
.base-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}
.base-verde { background: #072a15; border: 2px solid #39ff14; }
.base-naranja { background: #331702; border: 2px solid #ff7b00; }
.base-azul { background: #04233c; border: 2px solid #00b7ff; }
.base-rojo { background: #340518; border: 2px solid #ff0055; }

.base-white-panel {
    background: #ffffff;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 12px;
    padding: 12px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

.token-slot {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaeaea;
    aspect-ratio: 1 / 1;
    position: relative;
}
.slot-verde { border: 3px solid #39ff14; }
.slot-naranja { border: 3px solid #ff7b00; }
.slot-azul { border: 3px solid #00b7ff; }
.slot-rojo { border: 3px solid #ff0055; }

/* Meta Central */
.center-meta-block {
    grid-area: 7 / 7 / 10 / 10;
    position: relative;
    background: #000;
    width: 100%;
    height: 100%;
}

.triangle {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tri-left { background: #072a15; clip-path: polygon(0% 0%, 50% 50%, 0% 100%); border-right: 2px solid #39ff14; }
.tri-top { background: #331702; clip-path: polygon(0% 0%, 100% 0%, 50% 50%); border-bottom: 2px solid #ff7b00; }
.tri-right { background: #04233c; clip-path: polygon(100% 0%, 100% 100%, 50% 50%); border-left: 2px solid #00b7ff; }
.tri-bottom { background: #340518; clip-path: polygon(0% 100%, 100% 100%, 50% 50%); border-top: 2px solid #ff0055; }


/* ── CONTROL DE ARQUITECTURA DE FICHAS Y APILADO (CASINO STACK) ── */
.cell .ficha-ludo {
    position: absolute;
    /* Variables dinámicas inyectadas de forma limpia por JS */
    --index: 0;
    --total: 1;
    
    /* Escala el tamaño levemente si hay múltiples fichas para que no se desborden */
    width: calc(82% - (var(--total) * 1.5%));
    height: calc(82% - (var(--total) * 1.5%));
    
    /* Centrado absoluto en la celda y desajuste 3D controlado por su posición en la pila */
    left: 50%;
    top: 50%;
    transform: translate(calc(-50% + (var(--index) * 3px)), calc(-50% + (var(--index) * -3px)));
    z-index: calc(10 + var(--index));
}

.ficha-ludo {
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), width 0.2s ease, height 0.2s ease;
}

/* Hover potente rompiendo el Stack dinámicamente */
.ficha-ludo:hover { 
    transform: translate(calc(-50% + (var(--index) * 2px)), calc(-50% + (var(--index) * -2px))) scale(1.25) !important; 
    z-index: 999 !important; 
}

.f-green { background: #39ff14; box-shadow: 0 0 12px #39ff14; }
.f-orange { background: #ff7b00; box-shadow: 0 0 12px #ff7b00; }
.f-blue { background: #00b7ff; box-shadow: 0 0 12px #00b7ff; }
.f-red { background: #ff0055; box-shadow: 0 0 12px #ff0055; }

/* Mantener el soporte para fichas que están fijas en los slots de las casas grandes */
.token-slot .ficha-ludo {
    position: absolute;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    z-index: 10;
}

.jump-bounce {
    animation: jumpBounce 0.18s ease-out;
}

@keyframes jumpBounce {
    0% { transform: translate(calc(-50% + (var(--index) * 3px)), calc(-50% + (var(--index) * -3px))) scale(1); }
    50% { transform: translate(calc(-50% + (var(--index) * 3px)), calc(-50% + (var(--index) * -3px) - 8px)) scale(1.3); box-shadow: 0 10px 15px rgba(0,0,0,0.6); }
    100% { transform: translate(calc(-50% + (var(--index) * 3px)), calc(-50% + (var(--index) * -3px))) scale(1); }
}

@media (max-width: 768px) {
    .ludo-viewport { flex-direction: column; padding: 12px; }
    .ludo-dashboard { width: 100%; flex-direction: row; flex-wrap: wrap; }
    .btn-volver-menu { flex: 1 1 100%; }
    .dash-panel { flex: 1; min-width: 90px; padding: 6px; }
    .zona-dado { flex-direction: row; flex: 2; min-width: 160px; }
    .base-white-panel { padding: 6px; gap: 6px; border-radius: 12px; }
}

/* ── PANEL DE FIN DE PARTIDA: Ganador / Jugar otra vez / Salir ──────── */
.ludo-overlay-fin {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 12, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: floatFinIn 0.3s ease-out;
}
.ludo-overlay-fin.oculto { display: none; }
@keyframes floatFinIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
.ludo-overlay-fin-caja {
    background: #0a1520;
    border: 1px solid rgba(0,183,255,0.4);
    box-shadow: 0 0 40px rgba(0,183,255,0.25);
    border-radius: 12px;
    padding: 28px 24px;
    text-align: center;
    max-width: 320px;
}
.ludo-overlay-fin-caja h2 {
    font-family: 'Chakra Petch', monospace;
    color: #39ff14;
    text-shadow: 0 0 12px rgba(57,255,20,0.7);
    margin: 0 0 10px;
    font-size: 1.4rem;
}
.ludo-overlay-fin-caja p {
    color: #aab4c0;
    font-size: 0.85rem;
    margin: 0 0 20px;
}
.ludo-overlay-fin-botones {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}