@font-face {
    font-family: 'Old London';
    src: url('fonts/OldLondon.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('fonts/JosefinSans.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

:root {
    --bg-color: #1a1a1a;
    --fg-color: #f1f1f1;
    --btn-color-primary: #3d3d3d;
    --btn-color-primary-hover: #555555;
    --link-color: #5a5a5a;
    --link-color-hover: #777777;
}

body {
    background-color: var(--bg-color);
    color: var(--fg-color);
    font-family: 'Josefin Sans', sans-serif;
    height: 100dvh;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-size: 24px;
}

h1 {
    font-family: 'Old London', serif;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: clamp(45px, 5vw, 64px);
}

p {
    text-align: justify;

    &.center {
        text-align: center;
    }
}

ol {
    list-style-type: lower-roman;
    padding-left: 1.5rem;
    margin-left: 1.5rem;
    padding-right: 1rem;
}

button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 5px;
    background-color: var(--btn-color-primary);
    cursor: pointer;
    transition: background-color 0.3s;
    width: 250px;
    color: var(--fg-color);

    &:hover {
        background-color: var(--btn-color-primary-hover);
    }
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.3s, text-decoration 0.3s;

    &:hover {
        text-decoration: underline;
        color: var(--link-color-hover);
    }
}

#container {
    flex: 1;
    width: 95dvw;
    max-width: 800px;
    margin: 0 auto;

    #play-area {
        height: 100%;
        position: relative;
        display: block; 
        overflow: visible;

        #deck {
            width: 150px;
            aspect-ratio: 2/3;
            border: 2px solid #333;
            border-radius: 8px;
            margin-left: auto;
            margin-right: auto;
            background-image: url('/images/doom_pilgrim.webp');
            background-size: cover;
            background-position: center;
            cursor: pointer;
        }

        #next-option {
            position: absolute;
            top: 50%;
            width: 100%;
            text-align: center;
        }

        .dummy {
            position: absolute;
            width: 150px;
            aspect-ratio: 2/3;
            border: 2px solid #333;
            border-radius: 8px;
            background-image: url('/images/doom_pilgrim.webp');
            background-size: cover;
            background-position: center;
            z-index: 2000; /* Ensure it's on top */
            pointer-events: none; /* Don't allow clicks on the animation */
            
            /* Apply the animation */
            transform-origin: center center;
            animation: draw-card 1s ease-in-out forwards;
        }

        .card {
            --base-transform: rotate(0deg) translateX(0px); /* per-card default */
            transform: var(--base-transform);
            position: absolute;
            bottom: 5dvh;
            left: calc(50% - 50px); 
            width: 100px;
            aspect-ratio: 2/3;
            background-color: white;
            background-repeat: no-repeat;
            background-size: cover;
            border: 2px solid #333;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transform-origin: bottom center;
            cursor: pointer;
            transition: transform 0.25s cubic-bezier(.25,.8,.25,1);

            &:not(.enlarged):hover {
                transform: var(--base-transform) scale(1.1);
                z-index: 1000;
            }

            &.enlarged {
                position: fixed;
                top: 50%;
                left: 50%;
                width: min(80vw, 300px);
                aspect-ratio: 2/3;
                transform: translate(-50%, -50%) scale(1.2) !important;
                z-index: 3000;
                transition: transform .35s ease, 
                            top .35s ease, 
                            left .35s ease,
                            width .35s ease;
                box-shadow: 0 8px 24px rgba(0,0,0,.4);
                cursor: zoom-out;

                @media (max-width: 600px) {
                    width: min(90vw, 300px);
                    transform: translate(-50%, -50%) scale(1) !important;
                    font-size: clamp(1.2rem, 5vw, 2rem);
                }
            }

            &.hidden {
                display: none;
            }
        }

        .option-button {
            position: absolute;
            bottom: 10%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3000;
            width: 150px;
            padding: 1rem;
        }
    }

    #intro,
    #pre-game,
    #instructions {
        p {
            margin-bottom: 1rem;
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .buttons {
            display: flex;
            justify-content: center;
            gap: 1rem;
        }
    }

    #pre-game {
        .buttons {
            align-items: center;
            flex-direction: column;
        }
    }
}

#footer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

/* Backdrop layer */
.card-backdrop {
  position: fixed;
  inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0 */
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
  z-index: 2500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;

  &.active {
    opacity: 1;
    pointer-events: all;
  }
}

@keyframes draw-card {
  0% {
    transform: translateY(0) scale(1); /* rotateY(0deg); */
    opacity: 1;
  }
  50% {
    /* Move halfway down the screen and rotate to be edge-on */
    transform: translateY(25vh) scale(0.8); /* rotateY(90deg); */
    opacity: 1;
  }
  100% {
    /* Move to the hand's position, shrink to card size, complete the flip, and fade out */
    transform: translateY(50vh) scale(0.67); /* rotateY(180deg); */
    opacity: 0;
  }
}