/* ============================================================
   PASJANS — Heaven's Projects Studio — v0.12

   Kolejność pliku:
   1. Ustawienia bazowe i plansza
   2. Pasek sterowania
   3. Górny rząd i tableau
   4. Karty i pola kart
   5. Awers kart
   6. Pipsy
   7. Stosy, stany kart i drag & drop
   8. Okno zwycięstwa
   ============================================================ */


/* ============================================================
   1. USTAWIENIA BAZOWE I PLANSZA
   ============================================================ */

:root {
    --card-width: 110px;
    --card-height: 154px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;

    font-family: Arial, sans-serif;

    background: #087830;
}

.game {
    width: min(1200px, 96vw);

    margin: 0 auto;
    padding: 30px 20px;

    user-select: none;
}


/* ============================================================
   2. PASEK STEROWANIA
   ============================================================ */

.game-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 24px;
}

.toolbar-actions {
    display: flex;
    gap: 10px;
}

.toolbar-navigation {
    display: flex;
    gap: 10px;
}

.game-status {
    display: flex;
    gap: 24px;

    color: white;
}

.game-toolbar button,
.studio-link {
    padding: 8px 14px;

    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 6px;

    background: rgba(255, 255, 255, 0.12);
    color: white;

    font: inherit;
    text-decoration: none;

    cursor: pointer;
}

.game-toolbar button:disabled {
    opacity: 0.4;
    cursor: default;
}


/* ============================================================
   3. GÓRNY RZĄD I TABLEAU
   ============================================================ */

.top-row {
    display: flex;
    justify-content: space-between;

    margin-bottom: 40px;
}

.stock-area,
.foundations {
    display: flex;
    gap: 18px;
}

#waste {
    margin-left:
        clamp(
            4px,
            0.5vw,
            6px
        );
}

.tableau {
    display: grid;
    grid-template-columns:
        repeat(
            7,
            var(--card-width)
        );

    justify-content: space-between;

    gap: 0;
}

.tableau-column {
    position: relative;
    min-height: 500px;
}


/* ============================================================
   4. KARTY I POLA KART
   ============================================================ */

.card,
.card-slot {
    position: relative;
    width: var(--card-width);
    height: var(--card-height);

    border-radius: 8px;
}

.card-slot {
    border: 2px solid rgba(255, 255, 255, 0.35);
}

.card {
    position: absolute;

    background: #ffffff;

    border: 1px solid #333;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);

    user-select: none;
}

.card.red {
    color: #c51622;
}

.card.black {
    color: #111;
}

.card.back {
    background-image: url("images/card-back.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 1px solid #333;
    outline: none;
}


/* ============================================================
   5. AWERS KART
   ============================================================ */

.card-corner {
    position: absolute;

    width: 22px;

    text-align: center;

    font-family: Georgia, "Times New Roman", serif;
    font-weight: bold;

    line-height: 1;
}

.card-corner-top {
    top: 6px;
    left: 5px;
}

.card-corner-bottom {
    right: 5px;
    bottom: 6px;

    transform: rotate(180deg);
}

.corner-value {
    font-size: 18px;
}

.corner-suit {
    margin-top: 1px;

    font-size: 16px;
}

.face-card {
    position: absolute;

    inset: 32px 27px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    border: 1px solid currentColor;
    border-radius: 5px;

    font-family: Georgia, "Times New Roman", serif;
}

.face-letter {
    font-size: 42px;
    font-weight: bold;

    line-height: 0.9;
}

.face-suit {
    margin-top: 5px;

    font-size: 26px;
}


/* ============================================================
   6. PIPSY
   ============================================================ */

.card-pips {
    position: absolute;

    top: 22px;
    right: 19px;
    bottom: 22px;
    left: 19px;
}

.pip {
    position: absolute;

    transform: translate(-50%, -50%);

    font-size: 25px;
    line-height: 1;
}

.pip-mc:only-child {
    font-size: 48px;
}

/* Górny rząd */

.pip-tl {
    left: 18%;
    top: 18%;
}

.pip-tc {
    left: 50%;
    top: 18%;
}

.pip-tr {
    left: 82%;
    top: 18%;
}

/* Górny środek */

.pip-ul {
    left: 18%;
    top: 35%;
}

.pip-uc {
    left: 50%;
    top: 35%;
}

.pip-ur {
    left: 82%;
    top: 35%;
}

/* Środek */

.pip-ml {
    left: 18%;
    top: 50%;
}

.pip-mc {
    left: 50%;
    top: 50%;
}

.pip-mr {
    left: 82%;
    top: 50%;
}

/* Dolny środek */

.pip-ll {
    left: 18%;
    top: 65%;
}

.pip-lc {
    left: 50%;
    top: 65%;
}

.pip-lr {
    left: 82%;
    top: 65%;
}

.pip-ll,
.pip-lc,
.pip-lr {
    transform: translate(-50%, -50%) rotate(180deg);
}

/* Dolny rząd */

.pip-bl {
    left: 18%;
    top: 82%;

    transform: translate(-50%, -50%) rotate(180deg);
}

.pip-bc {
    left: 50%;
    top: 82%;

    transform: translate(-50%, -50%) rotate(180deg);
}

.pip-br {
    left: 82%;
    top: 82%;

    transform: translate(-50%, -50%) rotate(180deg);
}


/* ============================================================
   7. STOSY, STANY KART I DRAG & DROP
   ============================================================ */

/*
   Wizualna grubość stosów.

   Dolne karty pozostają nieruchomo.
   Każda kolejna karta leży nieco dalej
   w prawo i w dół.
*/

/*
   Karty znajdujące się wewnątrz stosu
   są widoczne, ale nieinteraktywne.
*/

.stack-covered-card {
    pointer-events: none;
}

/* Najniższa widoczna karta stosu. */

.card-slot[data-stack-size="2"]::before,
.card-slot[data-stack-size="3"]::before {
    top: 0;
    left: 0;

    z-index: 0;
}


/* Druga warstwa większego stosu. */

.card-slot[data-stack-size="3"]::after {
    top: 2px;
    left: 2px;

    z-index: 1;
}


/*
   Karta znajdująca się bezpośrednio
   pod kartą wierzchnią.
*/

.card-slot[data-stack-size="2"]
    > .card.underlying-card {

    top: 0;
    left: 0;

    z-index: 1;
}

.card-slot[data-stack-size="3"]
    > .card.underlying-card {

    top: 2px;
    left: 2px;

    z-index: 2;
}


/*
   Wierzchnia karta stosu.
*/

.card-slot > .card:not(.underlying-card) {
    top: 0;
    left: 0;

    z-index: 3;
}

.card-slot[data-stack-size="2"]
    > .card:not(.underlying-card) {

    top: 2px;
    left: 2px;
}

.card-slot[data-stack-size="3"]
    > .card:not(.underlying-card) {

    top: 4px;
    left: 4px;
}

.card.selected {
    outline: 3px solid #ffd000;
    outline-offset: -3px;
}

.drag-preview {
    position: fixed;

    width: var(--card-width);

    pointer-events: none;

    z-index: 1000;
}

.drag-preview .card {
    position: absolute;
}

.card.drag-source-hidden {
    visibility: hidden;
}

body.dragging-cards {
    cursor: grabbing;
}


/* ============================================================
   8. OKNO ZWYCIĘSTWA
   ============================================================ */

.modal {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.45);
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: white;
    padding: 28px 36px;

    border-radius: 12px;

    text-align: center;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.options-content {
    width: min(440px, 90vw);

    text-align: left;
}

.options-content h2 {
    text-align: center;
}

.option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    margin: 24px 0;
}

.option-row input {
    width: 20px;
    height: 20px;

    flex-shrink: 0;

    cursor: pointer;
}

#options-close {
    display: block;

    margin: 0 auto;
    padding: 8px 18px;

    cursor: pointer;
}

/* ============================================================
   9. RESPONSYWNOŚĆ — TELEFONY I MNIEJSZE EKRANY
   ============================================================ */

@media (max-width: 900px) {

    /*
       Siedem kart zawsze mieści się
       na szerokości ekranu.

       Dla większych ekranów rozmiar
       zatrzymuje się na 110 × 154 px.
    */

    :root {
        /*
        48 px — zielone marginesy:
        po 24 px z każdej strony.

        30 px — sześć odstępów
        pomiędzy siedmioma kolumnami:
        po około 5 px.
        */

        --card-width:
            min(
                110px,
                calc((100vw - 78px) / 7)
            );

        --card-height:
            min(
                154px,
                calc((100vw - 78px) / 5)
            );
    }

    body {
        overflow-x: hidden;
    }


    /* Plansza */

    .game {
        width: calc(100% - 48px);

        margin: 0 auto;

        padding:
            10px
            0
            18px;
    }


    /* Pasek sterowania */

    .game-toolbar {
        display: grid;
        grid-template-columns:
            1fr
            auto;

        gap: 8px 10px;

        margin-bottom: 14px;
    }

    .toolbar-actions {
        grid-column: 1 / -1;

        justify-content: center;

        gap: 6px;
    }

    .toolbar-navigation {
        justify-content: flex-end;

        gap: 6px;
    }

    .game-status {
        gap: 14px;

        font-size: 13px;
    }

    .game-toolbar button,
    .studio-link {
        padding: 6px 8px;

        font-size: 13px;

        white-space: nowrap;
    }


    /* Stock, waste i foundations */

    .top-row {
        margin-bottom: 18px;
    }

    .stock-area {
        gap: 10px;
    }

    .foundations {
        gap: 4px;
    }


    /* Tableau */

    .tableau {
        grid-template-columns:
            repeat(
                7,
                var(--card-width)
            );

        justify-content: space-between;

        gap: 0;
    }

    .tableau-column {
        min-height: 320px;
    }


    /* Karty */

    .card,
    .card-slot {
        border-radius:
            clamp(
                4px,
                1vw,
                8px
            );
    }


    /* Narożniki kart */

    .card-corner {
        width:
            calc(
                var(--card-width) * 0.16
            );
    }

    .card-corner-top {
        top:
            clamp(
                2px,
                0.75vw,
                6px
            );

        left:
            calc(
                var(--card-width) * 0.015
            );
    }

    .card-corner-bottom {
        right:
            calc(
                var(--card-width) * 0.015
            );

        bottom:
            clamp(
                2px,
                0.75vw,
                6px
            );
    }

    .corner-value {
        font-size:
            calc(
                var(--card-width) * 0.13
            );
    }

    .corner-suit {
        font-size:
            calc(
                var(--card-width) * 0.11
            );
    }


    /* Symbole kart 1–10 */

    .card-pips {
        top:
            clamp(
                10px,
                2.75vw,
                22px
            );

        right:
            clamp(
                8px,
                2.375vw,
                19px
            );

        bottom:
            clamp(
                10px,
                2.75vw,
                22px
            );

        left:
            clamp(
                8px,
                2.375vw,
                19px
            );
    }

    .pip {
        font-size:
            calc(
                var(--card-width) * 0.13
            );
    }

    .pip-mc:only-child {
        font-size:
            calc(
                var(--card-width) * 0.30
            );
    }


    /* Figury J/Q/K */

    .face-card {
        inset:
            clamp(
                14px,
                4vw,
                32px
            )
            clamp(
                11px,
                3.375vw,
                27px
            );

        border-radius: 3px;
    }

    .face-letter {
        font-size:
            calc(
                var(--card-width) * 0.24
            );
    }

    .face-suit {
        margin-top: 2px;

        font-size:
            calc(
                var(--card-width) * 0.15
            );
    }


    /* Zaznaczenie */

    .card.selected {
        outline-width: 2px;
    }


    /* Okna modalne */

    .modal-content {
        max-width:
            calc(100vw - 24px);

        padding: 20px 18px;
    }


    /*
       Ułatwia szybkie klikanie/double tap
       bez przypadkowego powiększania strony.
    */

    .card,
    .card-slot,
    .game-toolbar button,
    .studio-link {
        touch-action: manipulation;
    }
}

/* ============================================================
   WIDOK TELEFONU W POZIOMIE
   ============================================================ */

@media (
    orientation: landscape
) and (
    max-height: 600px
) {

    /*
       W poziomie wielkość kart zależy
       od WYSOKOŚCI ekranu, a nie od jego
       dużej szerokości.

       Dzięki temu obrót telefonu nie
       powoduje ponownego powiększenia gry.
    */

    :root {
        --card-width:
            min(
                110px,
                14dvh
            );

        --card-height:
            calc(
                var(--card-width) * 1.4
            );
    }

    /*
       Sama plansza również jest węższa
       i wyśrodkowana. Powstaje więcej
       zielonego stołu po bokach.
    */

    .game {
        width:
            min(
                calc(100% - 48px),
                110dvh
            );

        margin: 0 auto;
    }

    .top-row {
        margin-bottom: 12px;
    }

    /*
       Symbole kart zachowują te same
       proporcje co w pionowym widoku.
    */

    .pip {
        font-size:
            calc(
                var(--card-width) * 0.13
            );
    }

    .pip-mc:only-child {
        font-size:
            calc(
                var(--card-width) * 0.30
            );
    }

    .corner-value {
        font-size:
            calc(
                var(--card-width) * 0.13
            );
    }

    .corner-suit {
        font-size:
            calc(
                var(--card-width) * 0.11
            );
    }

    .face-letter {
        font-size:
            calc(
                var(--card-width) * 0.24
            );
    }

    .face-suit {
        font-size:
            calc(
                var(--card-width) * 0.15
            );
    }
}