/* ── ESTILOS EXCLUSIVOS DE LA MESA DE BLACKJACK NOWEY ────────────── */

:root {
  --color-neon-blue: #00b7ff;
  --color-neon-green: #39ff14;
  --color-neon-orange: #ff6c00;
}

body {
    background-color: #050a0e;
    color: #e2e8f0;
    font-family: 'Chakra Petch', 'Courier New', monospace;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Banner del juego (reemplaza al SVG "site-banner" anterior) */
.logo-header {
    width: 100%;
    text-align: center;
    padding: 8px 0;
    background: #050a0e;
}

/* ── NAVEGACIÓN (antes dependía del CSS global del sitio) ────────── */
.main-header {
    background: #020508;
    border-bottom: 1px solid rgba(0, 183, 255, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto 20px auto;
    border-radius: 6px;
}

h1.titulo-juego {
    font-family: 'Chakra Petch', 'Orbitron', monospace;
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-align: center;
    padding: 15px 0 5px 0;
    margin: 0;
    background: linear-gradient(90deg, #00b7ff, #39ff14, #ff7b00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(0,183,255,.4));
}

/* ── MENÚ DE SELECCIÓN DE MODO (mismo patrón que Brisca/Damas) ──── */
.menu-contenedor {
    background: linear-gradient(180deg, rgba(11,19,36,.95), rgba(5,10,14,.98));
    border: 1px solid rgba(0,183,255,.15);
    border-radius: 12px;
    padding: 36px 30px;
    max-width: 400px;
    margin: 40px auto;
    box-shadow: 0 10px 40px rgba(0,0,0,.8), inset 0 0 15px rgba(0,183,255,0.1);
}
.menu-titulo {
    font-family: 'Chakra Petch', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #00b7ff;
    text-align: center;
    margin-bottom: 24px;
    text-shadow: 0 0 6px rgba(0,183,255,0.3);
}
.btn-menu {
    display: block; width: 100%;
    padding: 14px; margin: 12px 0;
    border-radius: 6px; border: none;
    font-family: 'Chakra Petch', monospace;
    font-size: 0.85rem; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; transition: all .25s ease;
    box-sizing: border-box;
}
.btn-menu-ia { background: linear-gradient(135deg, #ff7b00, #ff9900); color: #000; box-shadow: 0 4px 15px rgba(255,123,0,0.3); }
.btn-menu-ia:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,123,0,0.5); }
.btn-menu-multi { background: transparent; border: 1px solid #00b7ff; color: #00b7ff; box-shadow: inset 0 0 8px rgba(0,183,255,0.1); }
.btn-menu-multi:hover:not(:disabled) { background: rgba(0,183,255,0.1); transform: translateY(-2px); box-shadow: 0 0 15px rgba(0,183,255,0.4); }
.btn-menu-multi:disabled {
    border-color: #4a5568;
    color: #4a5568;
    cursor: not-allowed;
    box-shadow: none;
}

.mesa {
    max-width: 1200px;
    height: 75vh;
    min-height: 620px;
    margin: 20px auto;
    border-radius: 16px;
    border: 1px solid rgba(0,183,255,.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    position: relative;
    background: radial-gradient(ellipse at center, #0a1628 0%, #050a0e 100%);
    box-shadow: 0 20px 60px rgba(0,0,0,.8);
    box-sizing: border-box;
}

.mesa::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 80%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 50%, rgba(13,31,58,0.5), rgba(7,16,32,0.85));
    border: 2px dashed rgba(57,255,20,.1);
    box-shadow: inset 0 0 50px rgba(0,0,0,.8);
    pointer-events: none;
    z-index: 0;
}

.marcador-box, .zona-jugador, .zona-centro, .zona-controles-bottom {
    position: relative;
    z-index: 1;
}

.marcador-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(5,10,14,.85);
    border: 1px solid rgba(0,183,255,.15);
    border-radius: 6px;
    padding: 8px 16px;
    font-family: 'Chakra Petch', monospace;
    font-size: 0.75rem;
    color: #ff7b00;
    text-transform: uppercase;
    width: 100%;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    box-sizing: border-box;
}

.marcador-box span b {
    color: #00b7ff;
    text-shadow: 0 0 4px rgba(0,183,255,0.4);
}

#txt-fichas b {
    color: #39ff14;
    text-shadow: 0 0 4px rgba(57,255,20,0.4);
}

.fullscreen-action-btn {
    background: #050b14;
    border: 1px solid #ff7b00;
    color: #ff7b00;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 9px;
    font-family: 'Chakra Petch', monospace;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(255,123,0,0.1);
    transition: all 0.1s ease;
}

.fullscreen-action-btn:hover {
    background: rgba(255,123,0,0.15);
    box-shadow: 0 0 10px rgba(255,123,0,0.3);
}

.zona-jugador {
    width: 100%;
    flex-shrink: 0;
    text-align: center;
}

.nombre-jugador {
    font-family: 'Chakra Petch', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8a97ad;
    margin-bottom: 6px;
    display: inline-block;
}

.score-badge {
    background: rgba(0,0,0,0.4);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255,123,0,0.3);
    color: #ff7b00;
    margin-left: 6px;
}

.zona-centro {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    min-height: 160px;
}

/* Diseño de Naipes de Neon */
.grid-cartas {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px;
    min-height: 115px;
}

.carta-bj {
    width: 72px;
    height: 108px;
    background: #0b1324;
    border-radius: 8px;
    box-shadow: 0 0 12px rgba(0,183,255,.2);
    border: 2px solid #00b7ff;
    margin-left: -20px;
    transition: all .2s ease;
    position: relative;
    color: #00b7ff;
    font-family: 'Chakra Petch', monospace;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 6px;
    box-sizing: border-box;
    text-shadow: 0 0 4px rgba(0,183,255,0.5);
    animation: entradaCarta 0.25s ease-out forwards;
}

.grid-cartas .carta-bj:first-child {
    margin-left: 0;
}

.carta-bj.rojo {
    color: #ff0050;
    border-color: #ff0050;
    box-shadow: 0 0 12px rgba(255,0,80,.2);
    text-shadow: 0 0 4px rgba(255,0,80,0.5);
}

.carta-bj.oculta {
    background: repeating-linear-gradient(45deg, #050a0e, #050a0e 6px, #0b1324 6px, #0b1324 12px);
    border: 2px solid #8a97ad;
    box-shadow: none;
    color: transparent;
    text-shadow: none;
}

.carta-bj .rank-top { font-size: 1rem; font-weight: 700; text-align: left; line-height: 1; }
.carta-bj .suit-center { font-size: 1.8rem; text-align: center; align-self: center; line-height: 1; }
.carta-bj .rank-bottom { font-size: 1rem; font-weight: 700; text-align: right; line-height: 1; transform: rotate(180deg); }

@keyframes entradaCarta {
    0% { opacity: 0; transform: translateY(20px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Área de Apuestas */
.panel-apuestas { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.fichas-selector { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; max-width: 90%; }

.btn-ficha {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px dashed #39ff14;
    background: rgba(57,255,20,0.05);
    color: #39ff14;
    font-family: 'Chakra Petch', monospace;
    font-weight: 700;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-ficha:hover {
    background: rgba(57,255,20,0.15);
    transform: scale(1.08);
    box-shadow: 0 0 10px rgba(57,255,20,0.4);
}

/* Billetes chilenos */
.btn-ficha.f1k { border-color: #00b7ff; color: #00b7ff; background: rgba(0,183,255,0.05); }
.btn-ficha.f1k:hover { box-shadow: 0 0 10px rgba(0,183,255,0.4); }
.btn-ficha.f2k { border-color: #ff0050; color: #ff0050; background: rgba(255,0,80,0.05); }
.btn-ficha.f2k:hover { box-shadow: 0 0 10px rgba(255,0,80,0.4); }
.btn-ficha.f5k { border-color: #ff7b00; color: #ff7b00; background: rgba(255,123,0,0.05); }
.btn-ficha.f5k:hover { box-shadow: 0 0 10px rgba(255,123,0,0.4); }
.btn-ficha.f10k { border-color: #39ff14; color: #39ff14; background: rgba(57,255,20,0.05); }
.btn-ficha.f10k:hover { box-shadow: 0 0 10px rgba(57,255,20,0.4); }
.btn-ficha.f20k { border-color: #cc00ff; color: #cc00ff; background: rgba(204,0,255,0.05); }
.btn-ficha.f20k:hover { box-shadow: 0 0 10px rgba(204,0,255,0.4); }

#resultado-estado {
    font-family: 'Chakra Petch', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    margin: 10px 0;
    min-height: 28px;
    letter-spacing: 1px;
}

.status-win { color: #39ff14; text-shadow: 0 0 10px rgba(57,255,20,0.5); }
.status-lose { color: #ff0050; text-shadow: 0 0 10px rgba(255,0,80,0.5); }
.status-push { color: #8a97ad; text-shadow: 0 0 6px rgba(138,151,173,0.4); }

/* Controles de Acción */
.zona-controles-bottom {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 6px 10px;
    min-height: 50px;
    box-sizing: border-box;
}

.btn-accion {
    background: linear-gradient(135deg, #ff7b00, #ff9900);
    color: #000;
    border: none;
    padding: 10px 22px;
    font-family: 'Chakra Petch', monospace;
    font-size: .75rem;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(255,123,0,0.2);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-accion:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.btn-accion:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-secundario-arcade {
    background: rgba(0,183,255,.05);
    border: 1px solid #00b7ff;
    color: #00b7ff;
    padding: 6px 14px;
    font-size: 0.65rem;
    box-shadow: none;
}

.btn-secundario-arcade:hover:not(:disabled) {
    background: rgba(0,183,255,.15);
    box-shadow: 0 0 12px rgba(0,183,255,0.3);
}

.btn-doblar-neon {
    background: linear-gradient(135deg, #00b7ff, #0066ff);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,183,255,0.2);
}

/* ── CONFIGURACIÓN DEL ENGINE DE FULLSCREEN NATIVO ── */
.mesa:fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    margin: 0;
    border-radius: 0;
    border: none;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: radial-gradient(ellipse at center, #0a1628 0%, #050a0e 100%);
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .mesa {
        height: auto;
        min-height: calc(100vh - 70px);
        overflow: visible;
        margin: 10px auto;
        padding: 8px;
    }
    .carta-bj { width: 62px; height: 93px; margin-left: -18px; }
    .carta-bj .suit-center { font-size: 1.4rem; }
    .zona-controles-bottom { padding-bottom: 25px; }
    .btn-ficha { width: 46px; height: 46px; font-size: 0.55rem; }
    .menu-contenedor { margin: 20px auto; max-width: calc(100% - 24px); }
}

/* ── FOOTER GLOBAL (mismo patrón que Damas/Dominó/Cacho/Tetris) ──── */
.site-footer {
    background-color: #020508;
    padding: 25px 0;
    text-align: center;
    font-family: 'Chakra Petch', 'Courier New', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    border-top: 1px solid rgba(0, 183, 255, 0.2);
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.8);
    margin-top: auto;
}

/* Cartas con imagen neón */
.carta-bj.carta-img {
    padding: 0;
    overflow: hidden;
    background: #05080b;
    border: 1px solid rgba(0, 183, 255, 0.35);
    box-shadow: 0 0 14px rgba(0, 183, 255, 0.25);
}

.carta-bj.carta-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}