/* Estilos específicos para Splitter */
:root {
    --splitter-cell-size: clamp(32px, 8.5vw, 38px); /* Similar a Qwixx */
    --splitter-gap: 5px;
    --splitter-highlight: var(--info-color);
}

/* Reutilizando .scoresheet de main.css/qwixx.css si existiera globalmente, pero aquí definimos comportamiento interno */
.scoresheet {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

/* Grilla */
#grid-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 0.5rem;
    background-color: var(--section-deep);
    padding: 1rem;
    border-radius: var(--border-radius-lg);
}

.splitter-row {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.cell {
    width: var(--splitter-cell-size);
    height: var(--splitter-cell-size);
    background-color: var(--bg-light); 
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s, transform 0.1s;
    color: var(--text-color);
    position: relative;
}

.cell.empty:hover {
    background-color: var(--bg-lightest);
}

.cell:active {
    transform: scale(0.95);
}

/* Celda espejo resaltada */
.cell.mirror-highlight {
    background-color: var(--bg-lightest);
    box-shadow: 0 0 5px var(--info-color);
    border-color: var(--info-color);
}

/* Celdas ocupadas */
.cell.filled {
    background-color: var(--front-light); /* Color neutral claro */
    color: var(--bg-darkest);
    font-weight: 800;
    z-index: 1; /* Asegura que el número esté por encima */
}

/* Separador central */
.cell.mid-gap {
    margin-right: 12px;
    position: relative;
}
/* Línea punteada central usando pseudo-elemento en el contenedor o borde */
.cell.mid-gap::after {
    content: '';
    position: absolute;
    right: -8px; /* Centrado en el gap de 12px (-4px gap real + margen) */
    top: 0;
    bottom: 0;
    width: 0;
    border-right: 2px dashed var(--border-color-light);
    pointer-events: none;
    height: 100%;
}


/* Modal mejorado */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(2px);
}
.modal.hidden { display: none; }

.modal-content {
    background: var(--section-bg);
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--box-shadow-md);
    text-align: center;
    min-width: 250px;
}
.modal-content h3 {
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

.modal-dice-container {
    justify-content: center; /* Centrar dice container por si acaso */
    margin-bottom: 1.5rem;
}

.clickable-die {
    cursor: pointer;
    transition: transform 0.1s;
}
.clickable-die:hover {
    transform: scale(1.1);
    box-shadow: 0 0 8px var(--primary-color);
}
.clickable-die:active {
    transform: scale(0.95);
}


/* Puntuación Final */
.total-score {
    padding: 1rem;
    text-align: center;
    background-color: var(--section-deep);
    border-radius: var(--border-radius-lg);
    width: 100%;
}
.total-score.finished {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color-light);
}
.total-score h2 {
    border-bottom: none;
    margin: 0;
    font-size: 1.2rem;
}
#score {
    font-weight: bold;
    color: var(--warning-color-light);
}

/* Game Over */
body.game-over .cell,
body.game-over #btn-roll {
    opacity: 0.5;
    pointer-events: none;
}
body.game-over #btn-roll {
    background-color: var(--disabled-bg-color);
    color: var(--disabled-text-color);
}

.dice-section .dice {
    --dice-size: 3rem;
}

.btn-swap {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5rem;
    align-self: center;
}
.btn-swap:hover {
    filter: brightness(1.2);
}

/* Manual Input Grid */
.manual-input-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 1rem;
}
.btn-die-input {
    background-color: var(--bg-light);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 10px;
    font-size: 1.2rem;
    cursor: pointer;
}
.btn-die-input:hover {
    background-color: var(--primary-color-light);
    color: var(--bg-darkest);
}
.current-selection {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: var(--info-color-light);
}
.modal-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.dice-section {
    padding: var(--base-padding);
    background-color: var(--section-deep);
    border-radius: var(--border-radius-lg);
}

.dice-section h2 {
    margin-bottom: 0.75rem;
    padding-bottom: 0;
    border-bottom: none;
    font-size: 1.1rem;
    text-align: center;
}

.dice-section .dice-container {
    display: flex;
    justify-content: space-around;
    gap: 5px;
    padding: 0;
    margin-bottom: 0;
}

.clickable-dice-area {
    cursor: pointer;
}

/* Grupos Puntuados */
.scored-group {
    background-color: var(--primary-color-dark) !important; 
    color: var(--text-color-light) !important;
    border-color: var(--primary-color-light) !important;
}

/* Estrellas */
.cell.star::before {
    content: "★";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    color: var(--warning-color);
    opacity: 0.25;
    pointer-events: none;
    z-index: 0;
}

.cell.filled {
    background-color: var(--front-light);
    color: var(--bg-darkest);
    font-weight: 800;
    z-index: 1; /* Por encima de la estrella */
}