html, body {
    height: 100%;
    overflow: hidden;
    margin: 0;
}
body {
  position: relative;
  background-color: transparent;
  font-family: 'Courier New', Courier, monospace;
  overflow-x: hidden;                                 /* prevent horizontal scrolling */
  padding-left: 10px;
  color: #e2e0dc;

  background-color: #212324;
}

.titulum{
    position: absolute;
    top: 5vh;          /* vertical distance from top of page */
    right: 5vw;       /* distance from right side */
    z-index: 9999;        /* ALWAYS on top */
}
.titulum h1 {
    font-size: 3vw;      /* scales smoothly with screen width */
    margin: 0;
}
.titulum p {
    font-size: 1.5vw;
    margin: 0;
    text-align: center;
}
#values{
    position: absolute;
    top: 20vh;          /* vertical distance from top of page */
    right: 12vw;       /* distance from right side */
    z-index: 9999;        /* ALWAYS on top */
    font-weight: bold;
    font-size: 2.8vmin;
    margin: 0;
    text-align: center;
}

:root {
    --card-size: 11vmax;   /* default desktop size */
    --faszmano-size: 9vmax;
    --polaroid-size: 7vmax;
    --vinyl-size: 8vmax;
    --thinker-size: 6vmax;
    --deck-size: 4vmax;
}

.cards {
    height: var(--card-size);
    width: auto;
    filter: 
    drop-shadow(0 14px 45px rgba(0,0,0,0.55));
}
.cards[src=""],
.cards:not([src]) {
    display: none;
}

.container {
    position: absolute;
    inset: 0;           /* full viewport */
    width: 100vw;
    height: 100vh;

    overflow: hidden;
    padding: 10px;
}



.pokertable,
.pokertable-opp,
.pokertable-dealing {
    opacity: 1; /* 0 to 1 */
    pointer-events: none;
}
/* RED */
.table-opp {
    position: absolute;
    top: 2vh;
    left: 2vw;
    width: 70vw;
    max-width: 1400px;
}
.pokertable-opp {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 20px #000000);
}
.flexy-opp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: row;          /* row of opponent cards */
    align-items: center;
    justify-content: center;
    gap: 2vw;                    /* distance between opponent cards */
    transform: translate(-3vw, -10vh);   /* move left + higher, like .flexy */
}


/* GREEN */
.table {
    position: absolute;
    bottom: 10vh;
    right: 5vw;
    width: 70vw;
    max-width: 1500px;
}
.pokertable {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 20px #000000);
}
/* row containing pile + hand */
/* row containing pile + hand (also acts as overlay) */
.flexy {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: flex;
    /* row of cards */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2vw;                 /* distance between the 4 cards */
    transform: translate(-3vw, -2vh);   /* move cards left */
}
/* SPLIT */
/* all my cards become absolute, free from flex slots */
.flexy.split-mode .cards {
    position: absolute;
}
/* ===== LEFT HAND (4 cards) ===== */
.flexy.split-mode #card_one_me {
    top: 53%;
    left: 25%;
    transform: translate(-50%, -50%) rotate(-6deg);
    z-index: 1;
}
.flexy.split-mode #card_two_me {
    top: 56%;
    left: 28%;
    transform: translate(-48%, -50%) rotate(-1deg);
    z-index: 2;
}
.flexy.split-mode #card_three_me {
    top: 59%;
    left: 31%;
    transform: translate(-46%, -50%) rotate(3deg);
    z-index: 3;
}
.flexy.split-mode #card_four_me {
    top: 61%;
    left: 33%;
    transform: translate(-54%, -50%) rotate(-2deg);
    z-index: 4;
}
.flexy.split-mode #card_five_me {
    top: 63%;
    left: 38%;
    transform: translate(-52%, -46%) rotate(-1deg);
    z-index: 5;
}
/* ===== RIGHT HAND (4 cards) ===== */
.flexy.split-mode #card_six_me {
    top: 50%;
    left: 55%;
    transform: translate(-50%, -47%) rotate(-3deg);
    z-index: 1;
}
.flexy.split-mode #card_seven_me {
    top: 53%;
    left: 58%;
    transform: translate(-48%, -50%) rotate(-1deg);
    z-index: 2;
}
.flexy.split-mode #card_eight_me {
    top: 56%;
    left: 61%;
    transform: translate(-51%, -50%) rotate(1deg);
    z-index: 3;
}
.flexy.split-mode #card_nine_me {
    top: 59%;
    left: 63%;
    transform: translate(-50%, -50%) rotate(4deg);
    z-index: 4;
}
.flexy.split-mode #card_ten_me {
    top: 62%;
    left: 66%;
    transform: translate(-51%, -50%) rotate(7deg);
    z-index: 5;
}


/* BEIGE */
.table-dealing {
    position: absolute;
    left: -2vw;
    bottom: 13vh;
    width: 40vw;
    max-width:50vw;
    transform: rotate(60deg);
}
.pokertable-dealing {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 15px #000000);
}
/* row of two dealing piles – acts as full overlay on beige smudge */
.flexy-dealing {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;          /* two piles next to each other */
    align-items: center;
    justify-content: center;
    gap: 10vh;                    /* distance between two piles */
    transform: translate(0vw, 0vh); /* move piles up a bit – tweak if needed */
}
/* each pile (stack of 5 cards) */
.card-pile-dealing-new {
    position: relative;
    left: 0vw;
    top: 0vh;
    transform: translate(-17vw, 0vh) rotate(-60deg);
}
.card-pile-dealing-used {
    position: relative;
    left: 0vw;
    top: 0vh;
    transform: translate(-2vw, 3vh) rotate(-60deg);
}
 
/* hide used pile slots that have no image yet */
img[src=""] {
    opacity: 0;
    box-shadow: none;
}
/* stack cards inside each dealing pile on top of each other */
.card-pile-dealing-new img,
.card-pile-dealing-used img {
    position: absolute;
    top: 0;
    left: 0;
}
.cardsleft {
    transform: rotate(-6deg);
}
#new_one{
    transform: translate(0.1vw, 0.4vh) rotate(3deg);
}
#new_two{
    transform: translate(0.2vw, 0.8vh) rotate(-2deg);
}
#new_three{
    transform: translate(-0.2vw, 0.6vh) rotate(-3deg);
}
#new_four{
    transform: translate(0.1vw, -0.4vh) rotate(2deg);
}

#used_one{
    transform: translate(1.6vw, 2vh) rotate(10deg);
}
#used_two{
    transform: translate(0.2vw, 1.3vh) rotate(-3deg);
}
#used_three{
    transform: translate(0.4vw, -1.4vh) rotate(9deg);
}
#used_four{
    transform: translate(0.0vw, -3.4vh) rotate(-4deg);
}
#used_five{
    transform: translate(2.4vw, -1vh) rotate(-15deg);
}

#card_one_me{
    transform: translate(-0.1vw, 0.4vh) rotate(3deg);
}
#card_two_me{
    transform: translate(0.7vw, -0.3vh) rotate(-1deg);
}
#card_three_me{
    transform: translate(-0.1vw, -0.6vh) rotate(2deg);
}
#card_four_me{
    transform: translate(0.1vw, -0.3vh) rotate(1deg);
}
#card_five_me{
    transform: translate(0vw, 0.2vh) rotate(-2deg);
}

#card_one_opp{
    transform: translate(-1.3vw, -0.5vh) rotate(-2deg);
}
#card_two_opp{
    transform: translate(-0.3vw, 0.6vh) rotate(4deg);
}
#card_three_opp{
    transform: translate(0.3vw, -0.2vh) rotate(2deg);
}
#card_four_opp{
    transform: translate(0.1vw, -0.3vh) rotate(1deg);
}
#card_four_opp{
    transform: translate(0.4vw, -0.2vh) rotate(3deg);
}

.buttons{
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    position: absolute;

    filter: drop-shadow(0 0 15px #000000);

    z-index: 9999;
}

#hitme {
    background-image: url("../assets/faszmano.png");
    width: var(--faszmano-size);
    height: var(--faszmano-size);

    bottom: 50vh;
    right: 32vw;
    transform: rotate(11deg);
}
#hitme.split-first {
    transform: rotate(50deg);
}
#hitme.split-second {
    transform: rotate(-10deg);
}

#stand {
    background-image: url("../assets/polaroid.png");
    width: var(--polaroid-size);
    height: var(--polaroid-size);
    
    bottom: 48vh; 
    right: 25vw;
    transform: rotate(-8deg);
}
#stand.split-first {
    transform: rotate(53deg);
}
#stand.split-second {
    transform: rotate(20deg);
}

#split {
    background-image: url("../assets/vinyl.png");

    width: var(--vinyl-size);
    height: var(--vinyl-size);

    top: 43vh; 
    right: 14vw;
    transform: rotate(30deg);
}
#split.can-split {
    background-image: url("../assets/vinyl-broken.png");
}

#info {
    background-image: url("../assets/gondolkodo.png");
    width: var(--thinker-size);
    height: var(--thinker-size);

    bottom: 2.4vh; 
    left: -1vw;
    filter: drop-shadow(0 0 15px #282525);
}

#deck{
    background-image: url("../assets/cards_steadman/deck.png");
    width: var(--deck-size);
    height: var(--deck-size);

    bottom: 6vh; 
    right: 3vw;
    filter: drop-shadow(0 0 15px #282525);
}


#info::after { /* infobox with text, and where to position it */
    content: "gondolkodik tehát van.";
    position: absolute;
    left: 2vw;
    top: -7vh;
    background-color: rgba(0, 0, 0, 0.895); /*background color of the info box*/
    color: white;
    padding: 0.5vw;
    border-radius: 5px;
    opacity: 0;
    font-size: small;
    text-align: center;
    font-style: italic;
    font-family: "Courier New", monospace;
    z-index: 9999;
}
#info:hover::after { /* needed for hover effect to show the text */
    opacity: 1;
}
#rules {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;      /* <-- TRUE vertical centering */
    text-align: center;

    position: fixed;
    inset: 0;

    padding: 0;                   /* <-- remove padding pushing down */

    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);

    font-style: italic;
    font-size: 2vmin;
    gap: 4vh;

    z-index: 999999 !important;
    pointer-events: auto;
}
#rules > div {
    max-width: 50vw;            /* narrower, centered block */
}
.pictext {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    gap: 2.5vw;                 /* more compact spacing */
    max-width: 50vw;            /* same width as text blocks */
}
.pictext img {
    width: auto;                 /* slightly smaller */
    height: 10vh;
}
.pictext p {
    text-align: left;
    line-height: 1.3;           /* tighter text block */
}


@media (max-width: 600px) {
    /* smaller cards & buttons */
    :root { 
        --card-size: 60px;
        --faszmano-size: 85px;
        --polaroid-size: 65px;
        --vinyl-size: 200px;
        --thinker-size: 60px;
    }

    /* OPPONENT (red) – top */
    .table-opp {
        position: absolute;
        top: 3vh;
        left: 50%;
        width: 90vw;
        max-width: 90vw;
        transform: translateX(-50%);
    }
    .flexy-opp {
        transform: translate(-8vw, -7vh);
    }
    .titulum{
        top: 39vh;
        right: 10vw;
    }
    .titulum h1 {
        font-size: 5vw;      /* scales smoothly with screen width */
        margin: 0;
    }
    .titulum p {
        font-size: 3vw;
        margin: 0;
        text-align: center;
    }

    /* DEALING (beige) – middle */
    .table-dealing {
        position: absolute;
        left: 30%;
        bottom: 45vh;
        width: 55vw;
        max-width: 55vw;
        transform: translateX(-50%) rotate(60deg);
    }
    .flexy-dealing {
        transform: translate(-4vw, -2vh);
    }

    /* PLAYER (green) – bottom */
    .table {
        position: absolute;
        bottom: 17vh;
        left: 50%;
        right: auto;
        width: 96vw;
        max-width: 96vw;
        transform: translateX(-50%);
    }
    .flexy {
        transform: translate(-3vw, -2vh);
    }

    /* BUTTONS – around bottom center */
    #hitme {
        top: auto;
        bottom: 12vh;
        left: 18vw;
        right: auto;
        cursor: pointer;
        transform: rotate(-15deg);
        z-index: 9999;
    }
    #hitme.split-first {
        transform: rotate(10deg);
    }
    #hitme.split-second {
        transform: rotate(55deg);
    }
    #stand {
        top: auto;
        bottom: 14vh;
        right: 20vw;
        left: auto;
        cursor: pointer;
        transform: rotate(20deg);
        z-index: 9999;
    }
    #stand.split-first {
        transform: rotate(-55deg);
    }
    #stand.split-second {
        transform: rotate(-35deg);
    }
    #split {
        top: auto;
        bottom: -10vh;
        left: 50%;
        right: auto;
        transform: translateX(-50%) rotate(0deg);
        z-index: 9999;
    }
  
    #rules {
        margin: 0;
        justify-content: flex-start;    /* start at top, easier to scroll */
        padding-top: 1vh;
        font-size: clamp(0.6rem, 1.4vmin, 0.9rem);    
    }
    #rules > div,
    .pictext {
        max-width: 90vw;               /* almost full width on phones */
    }
    .pictext {
        flex-direction: column;        /* image above text */
        align-items: center;
        text-align: center;
        gap: 1.5vh;
    }
    .pictext p {
        text-align: center;
    }
    .pictext img {
        height: clamp(40px, 10vh, 90px);
    }

    #values{
        top: 2vh;          /* vertical distance from top of page */
        right: 4vw;       /* distance from right side */
    }
}