*{
    box-sizing: border-box;
}


body {
    margin: 0;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 32px 24px;
    color: #f1f3fa;
    background: #151722;
    font-family: system-ui, sans-serif;
}

.scene {
    width: min(320px, 100%);
    aspect-ratio: 672 / 936;
    margin-inline: auto;
    /* Prospettiva empirica, più alto -> più piatto, più basso -> più effetto*/
    perspective: 600px;
    touch-action: none;
}


main {
    width: 100%;
    text-align: center;
}

h1 {
    margin: 0 0 8px;
}

p {
    margin: 0 0 32px;
    color: #b9bfd3;
}

.card-front > img {
    z-index: 0;
}

.glare {
    z-index: 2;
}


/* Apertura della carta al centro della finestra. */
.card { cursor: pointer; }

.card-placeholder {
    width: min(320px, 100%);
    aspect-ratio: 672 / 936;
    margin-inline: auto;
}
.card-popover {
    padding: 0;
    border: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    max-width: none;
    max-height: none;
    overflow: visible;
    background: transparent;
    color: #f1f3fa;
}
.card-popover::backdrop { background: rgb(8 10 18 / 78%); }
.card-popover .scene {
    width: min(560px, 90vw, calc(82svh * 672 / 936));
    touch-action: none;
}
.card-popover .card { cursor: pointer; }