:root {
    --color-rojo-pieza: #E74C3C;
    --color-verde-pieza: #2ECC71;
    --color-amarillo-pieza: #F1C40F;
    --color-azul-pieza: #3498DB;
    /* --color-principal-titulo: #c0392b; */ /* Comentado ya que los títulos ahora tienen colores específicos */
    --color-texto-oscuro: #393939;
    --color-violeta-oscuro: #6c3483;
    --color-naranja-oscuro: #d37f00; /* Un naranja oscuro más intenso */
}

body {
    font-family: 'Outfit', sans-serif;
    text-transform: lowercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    background-color: #f0f0f0;
    color: #333;
}

h1 { /* Título principal del juego */
    color: #c0392b; /* Mantenemos el rojo original para el H1 */
    font-weight: 500;
    font-size: 2.5em;
    margin-bottom: 30px;
}

h2 { /* Estilo base para H2, será sobrescrito por IDs específicos */
    font-weight: 500;
    font-size: 1.5em;
    margin-bottom: 15px;
}

#palette-container h2 {
    color: var(--color-violeta-oscuro);
}

#board-container h2 { /* o #board-title */
    color: var(--color-naranja-oscuro);
}


.game-setup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 95%;
    max-width: 830px;
    margin-bottom: 30px;
    padding: 15px 20px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.setup-left, .setup-center, .setup-right {
    display: flex;
    align-items: center;
}

.setup-left {
    gap: 8px;
}
.setup-center {
    gap: 20px;
}
.setup-right {
    gap: 10px;
}


.game-setup select {
    padding: 8px 12px;
    border-radius: 20px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    font-family: 'Outfit', sans-serif;
    text-transform: lowercase;
    font-weight: 500;
    cursor: pointer;
}
.game-setup select:hover {
    background-color: #f0f0f0;
}

.game-setup .action-button {
    padding: 8px 15px;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    border: none;
    border-radius: 20px;
    color: white;
    font-family: 'Outfit', sans-serif;
    text-transform: lowercase;
    transition: background-color 0.2s, transform 0.1s ease-out, box-shadow 0.1s ease-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#start-new-game-button {
    background-color: var(--color-amarillo-pieza);
    color: var(--color-texto-oscuro);
    border: 1px solid #e6a700;
}
#start-new-game-button:hover {
    background-color: #f5d061;
}

.game-stat {
    font-size: 1em;
    font-weight: 500;
    color: #555;
    background-color: #f0f0f0;
    padding: 7px 14px;
    border-radius: 18px;
    border: 1px solid #ddd;
    min-width: 90px; /* Aumentado para "acciones:" */
    text-align: center;
}


#reset-button {
    background-color: var(--color-rojo-pieza);
}
#reset-button:hover {
    background-color: #d62c1a;
}

#hint-button {
    background-color: var(--color-azul-pieza);
}
#hint-button:hover {
    background-color: #2980b9;
}

#solve-button {
    background-color: var(--color-verde-pieza);
}
#solve-button:hover {
    background-color: #27ae60;
}

.game-setup .action-button:active {
    transform: scale(0.95);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset;
}


.game-area {
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: flex-start;
    width: auto;
    margin-bottom: 30px;
}

#palette-container, #board-container {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    box-sizing: border-box;
}

#palette, #puzzle-board {
    box-sizing: border-box;
}

#palette {
    display: grid;
    gap: 15px;
    padding: 15px;
    border: 3px dashed var(--color-violeta-oscuro); /* Borde violeta */
    border-radius: 12px;
    align-items: start;
    justify-items: start;
}
.palette-grid-2x2 {
    grid-template-columns: repeat(2, 150px);
    grid-template-rows: repeat(2, 150px);
    width: calc(150px * 2 + 15px * 1 + 15px * 2 + 2px * 2);
}
.palette-grid-3x3 {
    grid-template-columns: repeat(3, 112px);
    grid-template-rows: repeat(3, 112px);
    width: calc(112px * 3 + 15px * 2 + 15px * 2 + 2px * 2);
}


#puzzle-board {
    display: grid;
    gap: 8px;
    border: 3px solid var(--color-naranja-oscuro); /* Borde naranja */
    padding: 8px;
    background-color: #ffffff; /* Color de fondo interno del tablero, se puede cambiar si se desea */
    border-radius: 8px;
}

.grid-2x2 {
    grid-template-columns: repeat(2, calc((349px - 8px * 1 - 8px * 2 - 3px * 2) / 2));
    grid-template-rows: repeat(2, calc((349px - 8px * 1 - 8px * 2 - 3px * 2) / 2));
    width: 349px;
}
.grid-3x3 {
    grid-template-columns: repeat(3, calc((400px - 8px * 2 - 8px * 2 - 3px * 2) / 3));
    grid-template-rows: repeat(3, calc((400px - 8px * 2 - 8px * 2 - 3px * 2) / 3));
    width: 400px;
}

.puzzle-piece-2x2 { width: 150px; height: 150px; }
.puzzle-piece-3x3 { width: 112px; height: 112px; }


.board-cell {
    background-color: #fff;
    border: 1px dashed #d37f00;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 6px;
}

.puzzle-piece {
    cursor: grab;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: box-shadow 0.2s, transform 0.1s;
    background-color: #D9D9D9; /* Nuevo color base de pieza */
    box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.25), /* Sombra más marcada */
                0px 4px 7px rgba(0, 0, 0, 0.22);
    border-radius: 12px;
}
.puzzle-piece:active:not(.dragging) {
    transform: scale(0.97);
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.2), /* Sombra ajustada para active */
                0px 2px 4px rgba(0, 0, 0, 0.18);
}

.puzzle-piece:hover {
    box-shadow: 0px 10px 22px rgba(0, 0, 0, 0.3), /* Sombra ajustada para hover */
                0px 5px 10px rgba(0, 0, 0, 0.25);
}
.puzzle-piece.dragging {
    opacity: 0.6;
    cursor: grabbing;
    box-shadow: 0px 12px 25px rgba(0,0,0,0.35); /* Sombra ajustada para dragging */
}

.puzzle-piece svg {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.drag-over {
    background-color: #ffe8cc;
    border: 2px dashed #ffab73;
}
.palette-drag-over {
    border-color: #d2b4de;
    background-color: #f4ecf7;
}

.piece-id-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background-color: rgba(50, 50, 50, 0.75);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    font-weight: 600;
    pointer-events: none;
    z-index: 10;
}

.numbers-hidden .piece-id-display {
    display: none !important;
}

#win-message {
    margin-top: 25px;
    font-size: 1.4em;
    color: #205f3a;
    font-weight: 600;
}
.hidden { display: none !important; }