.main-container {
    --card-width: 8rem;
    --card-height: 12rem;

    position: relative;
    width: 100%;
    height: calc(100% + calc(var(--card-height) * 2));
    background-color: #2d4a2d;
    display: flex;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background-color: #2d4a2d;
    background-blend-mode: multiply;
}

.card-sized {
    width: var(--card-width);
    min-height: var(--card-height);
}

.card {
    translate: 0px var(--starting-offset);
    z-index: 1;

    width: var(--card-width);
    height: var(--card-height);
    background-color: whitesmoke;

    padding: 0.5rem;
    border: 1px solid black;
    border-radius: 10px;
    color: pink;

    transition: transform 0.2s ease-in;

    user-select: none;
    cursor: grab;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.card:after {
    content: '';
    right: 0px;
    bottom: 0px;
    position: absolute;
    top: 0px;
    left: 0px;

    /* border: 1px solid black; */
    border-radius: 10px;
    background-image: url("/images/card_back.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;

    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);

    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.card.face-down {
    transform: rotateY(180deg);
}

.card.red {
    color: red;
}

.card.black {
    color: black;
}

.deck-container {
    position: relative;
    width: calc(4 * var(--card-width));
    height: var(--card-height);
    margin: 1rem;
}

.deck-container>.card {
    position: absolute;
    top: 0;
    left: 0;
}



.player-container {
    color: white;
    /* border: 3px solid #4a4a4a;
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.3); */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cdefs%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -1.5 1.5'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='%23505050' filter='url(%23noise)' opacity='0.3'/%3E%3Cpath d='M50,100 Q60,95 80,110 M150,50 L170,80 M300,200 Q310,190 330,210 M100,300 L130,330 M250,150 Q260,145 280,165' stroke='%23383838' stroke-width='1.5' fill='none' opacity='0.6'/%3E%3Cpath d='M200,100 L220,140 M80,250 Q90,240 110,260 M350,80 L370,110 M120,180 Q130,175 150,195' stroke='%23404040' stroke-width='1' fill='none' opacity='0.4'/%3E%3C/svg%3E");
}

.health-container {
    /* border: 3px solid #4a4a4a;
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.3); */
}

.room-container {
    display: flex;
    position: relative;
    padding: 1rem;
}

.room-container .card-container {
    width: var(--card-width);
    height: var(--card-height);
    margin: 1rem;
}

.room-container .card-container .card {
    background-color: #e8e5d9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.room-container .card-container .card:hover {
    background-color: #f5f0e8;
    transform: translate(3px, -3px);
    -webkit-transform: translate(3px, -3px);
    box-shadow:
        2px 4px 8px rgba(0, 0, 0, 0.3),
        1px 2px 4px rgba(0, 0, 0, 0.2);
}