/* El solitario. Lo común de la hoja está en `la-hoja.css`.

   El alto de la carta (`--alto`) lo pone el motor, midiendo el ancho que le
   toca a cada columna: con siete en fila, en un móvil cada carta mide poco más
   de cuatro centímetros, y en un ordenador el doble. */

.solitario .tapete {
    --verde: #1f6f4a;
    padding: 10px;
    border-radius: 14px;
    background: radial-gradient(circle at 50% 0%, #2a8a5d, var(--verde));
}

.solitario .fila-de-arriba,
.solitario .columnas {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.solitario .fila-de-arriba { margin-bottom: 12px; }

.solitario .sitio { position: relative; height: var(--alto, 84px); }

.solitario .columna { position: relative; min-height: var(--alto, 84px); }

.solitario .carta,
.solitario .hueco-de-carta {
    width: 100%;
    height: var(--alto, 84px);
    padding: 0;
    border: 0;
    border-radius: 7px;
    font: inherit;
    cursor: pointer;
}

.solitario .columna .carta { position: absolute; left: 0; }

.solitario .carta {
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 0, 0, .12);
    overflow: hidden;
}

.solitario .carta.roja { color: #c62828; }
.solitario .carta.negra { color: #1b2530; }

.solitario .carta .esquina {
    position: absolute;
    top: 3px;
    left: 4px;
    font-size: clamp(.78rem, 3.2vw, 1.05rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.solitario .carta .centro {
    position: absolute;
    inset: 38% 0 0;
    display: grid;
    place-items: center;
    font-size: clamp(1.2rem, 6vw, 2.2rem);
    line-height: 1;
}

/* El dorso: el mismo de las parejas, para que se reconozca la casa. */
.solitario .carta.tapada {
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .14) 0 5px, transparent 5px 10px),
        #3f52a8;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), 0 1px 0 rgba(0, 0, 0, .25);
}

.solitario .hueco-de-carta {
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
    color: rgba(255, 255, 255, .6);
    font-size: 1.3rem;
    font-weight: 800;
}

/* Elegida: se levanta y se rodea en amarillo. El contorno se ve también sin color. */
.solitario .carta.elegida {
    box-shadow: 0 0 0 3px #f2c530, 0 4px 10px rgba(0, 0, 0, .35);
    transform: translateY(-2px);
}

.solitario .carta:focus-visible,
.solitario .hueco-de-carta:focus-visible { outline: 3px solid #f2c530; outline-offset: 1px; }

.solitario .herramientas { margin-top: 12px; }

@media (max-width: 420px) {
    .solitario .tapete { padding: 6px; border-radius: 10px; }
    .solitario .fila-de-arriba,
    .solitario .columnas { gap: 4px; }
    .solitario .carta,
    .solitario .hueco-de-carta { border-radius: 5px; }
    .solitario .carta .esquina { top: 2px; left: 2px; }
}