/* The rules in floating_zone override the rules in board. */
@layer board, floating_zone;

:root {
    --base-space: 0.3rem;
    --base-border-radius: 0.3rem;

    /* We use colours from the palette HEPT32 https://lospec.com/palette-list/hept32 */
    --gray: #686b72;
    --blueish_gray: #8b97b6;
    --light_gray: #c5cddb;
    --dark_brown: #8a4926;
    --brown: #b66831;
    --light_brown: #de9751;
    --pale: #fbbe82;
    --light_green: #47f641;
    --green: #08b23b;
    --deep_green: #005f41;
    --transparent: #00000000;
    --red: #f94e6d;
    --orange: #ef6e10;
    --purple: #3d083b;

    /* Each zone takes 1/6th of the screen, - 4px for the two 2px borders - 1/6*2 of the body margins */
    --zone_height: calc((100vh / 6) - 4px - (var(--base-space) / 3));

    /* Real cards are 6.3 * 8.8 cm */
    --card_ratio: 63/88;
}

body {
    display: grid;
    grid-template-columns: 2fr 6fr;
    gap: var(--base-space);
    margin: var(--base-space);
    font-family: Arial, Helvetica, sans-serif;
}


/* || Left menu */
#menu {
    max-height: calc(100vh - 2 * var(--base-space));
    display: grid;
    /* Give the button just the space they need, and distribute the rest equally to the rest. */
    grid-template-rows: 10fr 1fr 10fr;
    gap: var(--base-space);
    overflow-wrap: anywhere;
}


/* || Card details */
#big_card {
    border-radius: var(--base-border-radius);
    border: 2px solid var(--brown);
    overflow: auto;
}

#text_mode p {
    padding-left: 1rem;
    padding-right: 1rem;
}

#text_mode p.flavor {
    font-style: italic;
}

#card_image {
    display: none;
    aspect-ratio: var(--card_ratio);
    margin-left: auto;
    margin-right: auto;
    max-height: 100%;
    border-radius: 10px;
}

#card_image.active {
    display: block;
}


/* || Buttons */
#buttons {
    padding: 1rem;
    border-radius: var(--base-border-radius);
    border: 2px solid var(--brown);
}

button {
    font-weight: bold;
    border: 1px solid var(--brown);
    border-radius: var(--base-border-radius);
    background-color: var(--light_brown);
    font-size: large;
    margin: 0.15rem 0;
}

button:hover {
    background-color: var(--pale);
}

button:active {
    box-shadow: inset 3px 3px 1px var(--light_brown);
}

button.yes {
    border: 1px solid var(--deep_green);
    background-color: var(--green);
}

button.yes:hover {
    background-color: var(--light_green);
}

button.yes:active {
    box-shadow: inset 3px 3px 1px var(--green);
}

button:disabled {
    border: 1px solid var(--gray);
    background-color: var(--light_gray);
}

button:disabled:hover {
    background-color: var(--light_gray);
}

button:disabled:active {
    box-shadow: unset;
}


/* || Logs */
#log {
    border-radius: var(--base-border-radius);
    border: 2px solid var(--brown);
    overflow: auto;
    padding: 0.5rem;
}

#log>p {
    margin-top: 0;
}

#log>p:first-child {
    font-weight: bold;
}


/* || Game board */
@layer board {
    .player_board {
        user-select: none;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
    }

    .zone {
        height: var(--zone_height);
        border-radius: var(--base-border-radius);
        border: 2px solid var(--blueish_gray);
        overflow: hidden;
        display: flex;
        align-content: center;
        justify-content: center;
        flex-wrap: wrap;
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto 60%;
    }

    /* Show only the topmost card of a zone. */
    #play_area .zone .card:not(:first-child) {
        display: none;
    }

    #play_area .mana .card:not(:first-child),
    #play_area .hand .card:not(:first-child) {
        display: unset;
    }

    .zone.dragover {
        background-color: var(--blueish_gray);
    }

    .hand {
        grid-column-start: span 5;
        background-image: url("./assets/main.png");
    }

    .vp {
        border: unset;
        text-align: center;
        font-size: xx-large;
        cursor: pointer;
        background-image: url("./assets/points.png");
    }

    .discard {
        background-image: url("./assets/cimetiere.png");
    }

    .mana {
        background-image: url("./assets/mana.png");
    }

    .favour {
        background-image: url("./assets/faveur.png");
    }

    .deck {
        background-image: url("./assets/deck.png");
    }

    .commander {
        background-image: url("./assets/commandant.png");
    }

    .second {
        border: 2px solid var(--orange);
    }

    .undertaker {
        border: 2px solid var(--purple);
    }

    .card {
        /* 90% of a zone height. We use calc and not just 90% so the card size remains constant even
        when the zone changes size (when shown as a pop-up). */
        height: calc(0.9 * var(--zone_height));
        aspect-ratio: var(--card_ratio);
        margin: 0 0.1rem;
        background: center / contain no-repeat;
        background-color: var(--light_gray);
        border-radius: var(--base-border-radius);
        font-size: 90%;
        cursor: grab;
        transition: 0.2s ease-in-out;
        overflow-wrap: anywhere;
        overflow: hidden;
        transform: perspective(100px);
    }

    .card img {
        max-width: 100%;
        max-height: 100%;
    }

    .card:active {
        cursor: grabbing;
    }

    #play_area .mana .card {
        height: calc(0.35 * var(--zone_height));
        font-size: xx-small;
    }

    /* || card transformations */
    .card.tapped {
        transform: perspective(100px) rotate(-0.25turn);
    }

    .card.facedown {
        transform: perspective(100px) rotateY(0.5turn);
        background-image: url(./assets/cardkback.png);
    }

    .card.tapped.facedown {
        transform: rotate(-0.25turn) rotateY(0.5turn);
    }

    .card.facedown * {
        /* Hide the contents of cards that are facedown */
        display: none;
    }

    .hand .card.facedown.visible_in_hand {
        transform: unset;
        background-image: unset;
    }

    .hand .card.facedown.visible_in_hand * {
        display: unset;
    }

    .hand .card.facedown.visible_in_hand.tapped {
        transform: perspective(100px) rotate(-0.25turn);
    }

    .hand .card:hover {
        translate: 0 -0.2rem;
    }

    .card .counters {
        margin: 0.5rem;
        padding: 0.5rem;
        color: black;
        background-color: var(--red);
        border-radius: 5rem;
        max-width: fit-content;
        position: absolute;
        top: 3rem;
        left: 0.5rem;
    }

    /* Now rotate the opponent board */
    .opponent {
        rotate: 0.5turn;
    }

    .opponent .vp>span {
        rotate: 0.5turn;
    }

    /* And apply the 3D effect */
    #perspective_container {
        perspective: 1000px; /* arbitrary value */
        display: flex;
        justify-content: center;
        overflow: hidden;
    }

    #play_area {
        transform: rotateX(15deg);
        /* reduce width because the tilted angle makes the neared side larger. Also center (with
        flex in the parent), and push upward to center vertically */
        max-width: 85%;
        flex: auto; /* avoid shrinking */
        /* If this could be done with flex or something automagic instead of a deduced number… */
        position: relative;
        bottom: 6%;
    }
}


/* || Floating zone window */
@layer floating_zone {
    body.moving_floating_window {
        user-select: none;
    }

    #floating_window {
        display: none;
        position: absolute;
        border-radius: var(--base-border-radius);
        border: 2px solid var(--green);
        background-color: white;
        text-align: center;
        /* The face down cards appear on top (stacking context on transform property). */
        z-index: 1;
    }

    #floating_window .handle {
        height: 1rem;
        background-color: var(--green);
        cursor: move;
    }

    #floating_window .title {
        margin: 0.5rem 1rem;
    }

    #floating_window .content {
        padding: 0.5rem;
    }

    #floating_window .content .zone {
        min-width: 5rem;
        max-width: calc(4 * var(--zone_height));
        height: unset;
        min-height: 5rem;
        max-height: calc(3 * var(--zone_height));
        align-content: unset;
        overflow: auto;
    }

    #floating_window button {
        margin-bottom: 0.5rem;
        background-color: var(--green);
        border: 1px solid var(--deep_green);
    }

    #floating_window button:hover {
        background-color: var(--light_green);
    }

    #floating_window button:active {
        box-shadow: inset 3px 3px 1px var(--green);
    }

    .placeholder {
        border-radius: var(--base-border-radius);
        background-color: var(--green);
    }

    /* || card transformations */
    /* When looking at a zone, show the cards that you have the right to see (as in your hand). */
    #floating_window .card.facedown.visible_in_hand {
        transform: unset;
        background-image: unset;
        background-color: var(--light_gray);
    }

    #floating_window .card.tapped.facedown {
        transform: rotate(-0.25turn);
    }

    #floating_window .card.facedown.visible_in_hand * {
        display: unset;
    }
}


/* || Card context menu */
#card_context_menu {
    display: none;
    position: absolute;
    background-color: white;
    border-radius: var(--base-border-radius);
    border: 2px solid var(--brown);
    list-style: none;
    padding: 0;
    user-select: none;
    /* Appear in front of the floating window. */
    z-index: 2;
}

#card_context_menu .context_menu {
    padding: 0.5rem;
}

#card_context_menu .context_menu:hover {
    background-color: var(--pale);
    cursor: pointer;
}

hr {
    margin: 0 1rem;
    color: var(--dark_brown);
}


/* || Pop-up dialog */
::backdrop {
    background-color: var(--light_gray);
    opacity: 0.3;
}

dialog {
    border-radius: var(--base-border-radius);
    border: 2px solid var(--brown);
    max-width: 35%;
}

dialog form {
    text-align: center;
}

dialog h2 {
    margin-top: 0;
}

dialog p {
    overflow: auto;
    max-height: 40rem;
}


/* || media queries */
@media (prefers-reduced-motion: reduce) {
    /* Deactivate all animations. Since all animations are in layers, this takes priority. */
    * {
        transition: unset;
    }
}