:root {
    /* Mapeo de colores de Qwixx a la paleta de la app */
    --qwixx-red: var(--danger-color);
    --qwixx-yellow: var(--yellow);
    --qwixx-green: var(--primary-color);
    --qwixx-blue: var(--info-color);
    --qwixx-white: var(--front-darker);
    --qwixx-box-bg: var(--bg-light);
    --qwixx-box-hover-bg: var(--bg-lightest);

    /* Tamaños fluidos para responsividad */
    --box-size: clamp(32px, 8.5vw, 38px);
    --mark-font-size: clamp(26px, 7vw, 30px);
}

/* Filas de colores */
.qwixx-row {
    padding: 0.75rem;
    border-left: 6px solid;
    transition: opacity 0.3s ease, filter 0.3s ease;
    background-color: var(--section-deep);
    border-radius: var(--border-radius-lg);
    margin-bottom: 1rem;
}
#row-red    { border-color: var(--qwixx-red); }
#row-yellow { border-color: var(--qwixx-yellow); }
#row-green  { border-color: var(--qwixx-green); }
#row-blue   { border-color: var(--qwixx-blue); }

.qwixx-row.locked {
    opacity: 0.6;
    filter: grayscale(50%);
}
.qwixx-row.locked * {
    cursor: not-allowed !important;
}

/* Contenedor de las casillas de números */
.numbers-container {
    margin-bottom: 0.75rem;
}

/* Filas de números (arriba y abajo) */
.numbers-part1,
.numbers-part2 {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    justify-content: center; /* Modificado para centrar */
}
.numbers-part1 {
    margin-bottom: 5px;
}

/* Estilo base para todas las casillas clickeables */
.number-box, .lock-box, .penalty-box {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: var(--box-size);
    height: var(--box-size);
    background-color: var(--qwixx-box-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease, transform 0.1s ease;
    position: relative;
    flex-shrink: 0;
}

/* Interacción con las casillas */
.number-box:hover:not(.marked):not(.skipped),
.lock-box:hover:not(.marked),
.penalty-box:hover:not(.marked) {
    background-color: var(--qwixx-box-hover-bg);
}
.number-box:active:not(.marked):not(.skipped),
.lock-box:active:not(.marked),
.penalty-box:active:not(.marked) {
    transform: scale(0.95);
}

/* Estado MARCADO de las casillas */
.number-box.marked, .lock-box.marked, .penalty-box.marked {
    color: var(--text-color-light);
    border-color: transparent;
    cursor: not-allowed;
}

/* Colores de fondo para casillas marcadas */
#row-red    .number-box.marked, #row-red    .lock-box.marked { background-color: var(--qwixx-red); }
#row-yellow .number-box.marked, #row-yellow .lock-box.marked { background-color: var(--qwixx-yellow); color: var(--bg-darkest); }
#row-green  .number-box.marked, #row-green  .lock-box.marked { background-color: var(--qwixx-green); }
#row-blue   .number-box.marked, #row-blue   .lock-box.marked { background-color: var(--qwixx-blue); }
.penalty-box.marked { background-color: var(--qwixx-red); }

/* La 'X' de la marca */
.number-box.marked::before, .lock-box.marked::before, .penalty-box.marked::before {
    content: '✕';
    position: absolute;
    font-size: var(--mark-font-size);
    line-height: 1;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

/* Estado SALTADO de las casillas */
.number-box.skipped {
    background-color: transparent;
    border-style: dashed;
    border-color: var(--disabled-border-color);
    color: var(--disabled-text-color);
    cursor: not-allowed;
}

/* Controles dentro de cada fila */
.row-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
    color: var(--text-muted-color);
}
.row-score .score-value, .row-score .marks-count {
    color: var(--text-color);
    font-weight: bold;
    min-width: 1.5em;
    display: inline-block;
    text-align: center;
}
.manual-lock-button {
    padding: 0.25rem 0.6rem;
    font-size: 0.8em;
    min-width: 80px;
}

/* Guía de puntuación */
.scoring-guide {
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background-color: var(--section-deep);
}
.scoring-guide summary {
    cursor: pointer;
    font-weight: bold;
    color: var(--text-muted-color);
}
.points-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.75rem;
    justify-content: center;
}
.points-list span {
    background-color: var(--bg-light);
    padding: 0.2rem 0.5rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.8em;
}

/* Secciones de Fallos y Dados */
.penalties-section, .dice-section {
    padding: var(--base-padding);
    background-color: var(--section-deep);
    border-radius: var(--border-radius-lg);
    margin-bottom: 1rem; /* Modificado para espaciar verticalmente */
}
.penalties-section h2, .dice-section h2 {
    margin-bottom: 0.75rem;
    padding-bottom: 0;
    border-bottom: none;
    font-size: 1.1rem;
}

/* Contenedor de fallos y dados */
.penalty-container {
    display: flex;
    justify-content: space-around;
    gap: 5px;
}
.dice-section .dice-container {
    gap: 5px;
    padding: 0;
    margin-bottom: 0;
    justify-content: space-around;
}
.dice-section .dice {
    --dice-size: var(--box-size);
}

/* Modificadores de color para los dados */
.dice-red    { background-color: var(--qwixx-red);    color: var(--text-color-light); }
.dice-yellow { background-color: var(--qwixx-yellow); color: var(--bg-darkest);       }
.dice-green  { background-color: var(--qwixx-green);  color: var(--text-color-light); }
.dice-blue   { background-color: var(--qwixx-blue);   color: var(--text-color-light); }
.dice-white  { background-color: var(--qwixx-white);  color: var(--bg-darkest);       }

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

/* Estado de Fin de Juego */
body.game-over {
    --qwixx-box-hover-bg: var(--qwixx-box-bg);
}
body.game-over .number-box:not(.marked):not(.skipped),
body.game-over .lock-box:not(.marked),
body.game-over .penalty-box:not(.marked),
body.game-over .manual-lock-button,
body.game-over #roll-button {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}
body.game-over #roll-button {
    background-color: var(--disabled-bg-color);
    color: var(--disabled-text-color);
}