:root {
    --crop-size-x: 0%;
    --crop-size-y: 0%;
    --border-radius-x: 4.761904761904761904761904761905%;
    --border-radius-y: 3.409090909090909090909090909091%;
    --card-aspect-ratio: calc(63.0 / 88.0);
    --holder-padding: 5vw;
}

.tcg-card-collection-display {
    display: flex;
}

.tcg-card-collection-holder {
    display: flex;
    flex-grow: 1;
    padding: 2.5vw 0;

    /* Center horizontally */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.tcg-card-collection {
    display: flex;
    white-space: nowrap;

    /* Center horizontally */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.tcg-card {
    aspect-ratio: 63 / 88;

    /* Round corners */
    border-radius: var(--border-radius-x) / var(--border-radius-y);

    /* Drop shadow */
    box-shadow: 0 0 0.5rem 0.5rem rgba(0, 0, 0, 0.2);

    /* Image */
    background: url(https://itschotsch.github.io/tcg-maker/tcg-arena/images/public/486.jpg) no-repeat center center;
    background-size: 100% 100%;
    background-size: calc(100% + calc(var(--crop-size-x) * 2)) calc(100% + calc(var(--crop-size-y) * 2));

    cursor: pointer;
}

.tcg-card-presented {
    display: inline-block;
    max-height: 25rem;
}

.tcg-card-presented-summary {
    height: min(33vh, 24.5vw);
}

.tcg-card-presented-kinds {
    width: 100%;
}

.tcg-card-holder {
    position: relative;
    display: inline-block;
    width: 100%;

    /* Animate transform */
    transition: all 0.25s ease;
}

.tcg-card-holder+h2 {
    margin-top: 2rem;
}

/* .tcg-card-holder.left-card {
    transform: translateX(50%) rotateZ(-5deg);
    margin-left: -100%;
}

.tcg-card-holder.right-card {
    transform: translateX(-50%) rotateZ(5deg);
    margin-right: -100%;
} */

/* .tcg-card-holder.top-card {
    transform: translateY(-5%);
    z-index: 1;
} */

.tcg-card-holder:hover {
    z-index: 100 !important;
    /* opacity: 1; */
}

/* .tcg-card-holder-fullsize {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none !important;
    z-index: 1000 !important;
} */

/* .container {
    border: 1px solid red;
} */

#tcg-card-focus {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0;
    z-index: 10;
}

.tcg-card-focus-holder {
    display: flex;
    padding: var(--holder-padding);
    width: inherit;
    /* margin-left: auto;
    margin-right: auto;
    transform: translateX(-50%); */
}

.tcg-card-focus-card {
    margin: auto;

    width: 100%;
    height: 100%;
    aspect-ratio: calc(63.0 / 88.0);
    max-width: calc(((100vh - 2 * var(--holder-padding)) * 63.0) / (88.0));
    max-height: calc(((100vw - 2 * var(--holder-padding)) * 88.0) / (63.0));
}

#tcg-card-focus .tcg-card {
    z-index: 1;
}

.js-tilt-glare {
    z-index: 2;
}

.js-tilt-glare-inner {
    width: max(120vw, 120vh) !important;
    height: max(120vw, 120vh) !important;
}

/* Responsive behaviour for phones. */
@media only screen and (max-width: 768px) {

    #tcg-card-focus .tcg-card-holder {
        display: inherit;
    }

    .tcg-card-presented-summary {
        height: 40vw !important;
    }
}

/* Desktop */
@media only screen and (max-width: 1024px) {

    .tcg-card-presented-kinds {
        width: auto;
        height: 20rem;
    }

}