/* =========================================================
   XS MINES // SOLITARIO KLONDIKE
   Estilo retro Web 1.0 / Frutiger Aero
   Basado en la estructura original
   ========================================================= */

body {
    margin: 0;
    padding: 16px;

    font-family: "Tahoma", "Verdana", sans-serif;

    color: #073b4c;

    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.8) 0 2px, transparent 3px),
        radial-gradient(circle at 80% 15%, rgba(255,255,255,.65) 0 2px, transparent 3px),
        linear-gradient(
            to bottom,
            #7de9ff 0%,
            #dfffff 45%,
            #62dff2 100%
        );

    background-size:
        140px 140px,
        190px 190px,
        100% 100%;

    user-select: none;
}


/* =========================================================
   TITULO
   ========================================================= */

h1 {
    font-size: 13px;

    background:
        linear-gradient(
            to bottom,
            #51e7ff,
            #009ee5
        );

    color: #ffffff;

    padding: 6px 10px;

    border: 2px solid;
    border-color:
        #ffffff
        #005b91
        #005b91
        #ffffff;

    margin-bottom: 10px;

    text-shadow: 1px 1px 0 #005b91;

    box-shadow:
        3px 3px 0 rgba(0, 91, 145, .35);
}


/* =========================================================
   TEXTO DE CARGA
   ========================================================= */

p {
    font-size: 11px;

    background:
        linear-gradient(
            to bottom,
            #ffffff,
            #dffaff
        );

    padding: 6px;

    border: 2px solid;
    border-color:
        #ffffff
        #7aa9b5
        #7aa9b5
        #ffffff;

    box-shadow:
        3px 3px 0 rgba(0, 91, 145, .25);
}


/* =========================================================
   MENSAJE
   ========================================================= */

#msg {
    font-size: 12px;
    font-weight: bold;

    color: #073b4c;

    background:
        linear-gradient(
            to bottom,
            #ffffdd,
            #fff4a8
        );

    padding: 4px 8px;

    border: 2px solid;
    border-color:
        #ffffff
        #8a8a70
        #8a8a70
        #ffffff;

    margin: 10px 0;

    height: 18px;

    box-shadow:
        2px 2px 0 rgba(0, 91, 145, .25);
}


/* =========================================================
   TABLERO
   IMPORTANTE:
   Se mantiene display/flex/gap/padding del original
   ========================================================= */

.board {
    display: flex;
    flex-direction: column;

    gap: 18px;

    background:
        linear-gradient(
            135deg,
            #eaffff,
            #bdeff7
        );

    padding: 12px;

    border: 3px solid;
    border-color:
        #ffffff
        #005b91
        #005b91
        #ffffff;

    box-shadow:
        5px 5px 0 rgba(0, 91, 145, .35);
}


/* =========================================================
   FILAS
   ========================================================= */

.row {
    display: flex;

    gap: 12px;
}


/* =========================================================
   PILAS
   Mantiene exactamente la estructura antigua
   ========================================================= */

.pile {
    background:
        linear-gradient(
            to bottom,
            #ffffff,
            #dffaff
        );

    border: 2px solid;

    border-color:
        #ffffff
        #005b91
        #005b91
        #ffffff;

    width: 72px;
    min-height: 110px;

    padding: 4px;

    text-align: center;

    cursor: pointer;

    box-sizing: border-box;

    box-shadow:
        2px 2px 0 rgba(0, 91, 145, .25);
}


/* =========================================================
   PILA SELECCIONADA
   ========================================================= */

.pile.selected {
    border-color: #009ee5;

    box-shadow:
        inset 0 0 0 2px #51e7ff,
        2px 2px 0 rgba(0, 91, 145, .3);
}


/* =========================================================
   CARTAS COMO IMAGEN
   Mantiene tamaño y posiciones originales
   ========================================================= */

.card {
    width: 60px;
    height: 86px;

    margin: 0 auto;

    cursor: grab;

    position: relative;
}


/* =========================================================
   SUPERPOSICIÓN DE CARTAS
   ========================================================= */

.pile .card {
    margin-top: -65px;
}

.pile .card:first-child {
    margin-top: 0;
}


/* =========================================================
   IMAGEN DE CARTA
   ========================================================= */

.card img {
    width: 60px;
    height: 86px;

    display: block;
}


/* =========================================================
   CARTAS BOCA ABAJO
   ========================================================= */

.card.hidden img {
    filter: brightness(0.6);

    cursor: default;
}


/* =========================================================
   HOVER SUTIL
   No cambia el tamaño de las pilas
   ========================================================= */

.pile:hover {
    border-color: #009ee5;

    box-shadow:
        inset 0 0 0 1px #51e7ff,
        2px 2px 0 rgba(0, 91, 145, .3);
}


/* =========================================================
   MAZO
   ========================================================= */

#deck {
    background:
        linear-gradient(
            135deg,
            #0078b8,
            #00bfe8
        );

    color: white;

    font-family: "Courier New", monospace;
    font-weight: bold;

    text-shadow:
        1px 1px 0 #005b91;
}

#deck:hover {
    background:
        linear-gradient(
            135deg,
            #00bfe8,
            #51e7ff
        );

    color: #005b91;
}


/* =========================================================
   FUNDACIONES
   ========================================================= */

#f-H,
#f-D,
#f-C,
#f-S {
    background:
        linear-gradient(
            to bottom,
            #ffffff,
            #eaffea
        );
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #c9f7ff;

    border: 2px solid #005b91;
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            to bottom,
            #51e7ff,
            #009ee5
        );

    border: 2px solid #005b91;
}


/* =========================================================
   SELECCIÓN DE TEXTO
   ========================================================= */

::selection {
    background: #ffe84a;
    color: #005b91;
}