@font-face {
    font-family: "DepartureMono-Regular";
    src:
            url("games/labyrinth/fonts/DepartureMono-Regular.woff2") format("woff2"),
            url("games/labyrinth/fonts/DepartureMono-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

#game-intro {
    padding: 1vmin;
    menu {
        display: flex;
        list-style: none;
        padding: 0;

        width: 400px;

        li {
            flex-grow: 1;
            margin: 2vmin;

            button {
                width: 100%;
            }
        }
    }
}

@keyframes pan-background {
    0% {
        background-position: center;
    }
    10% {
        background-position: center;
    }
    40% {
        background-position: bottom;
    }
    100% {
        background-position: top;
    }
}

@media (orientation: landscape) {
    #rpg-layout {
        display: flex;
        flex-direction: column;

        #top-pane {
            flex: 4;
            display: flex;
            flex-direction: row;

            #top-left-pane {
                flex: 4;
                display: flex;
                flex-direction: column;

                #player-location-pane {
                    flex: 4;

                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    padding: 1vmax;
                    p {
                        margin-bottom: 0;
                    }
                }

                #player-actions-pane {
                    flex: 1;
                    flex-direction: row;
                    display: flex;

                    .player-action-space {
                        flex: 1;
                        display: flex;
                    }
                }
            }

            #extra-widgets-pane {
                flex: 1;
                display: flex;
                flex-direction: column;

                #extra-buttons {
                    display: flex;
                    flex-direction: column;
                    flex: 3;
                }

                #mini-map {
                    flex: 2;
                }
            }

            #qr-code-scanner-pane {
                flex: 1;
                display: flex;
            }
        }

        #inventory-pane {
            flex: 1;
            display: flex;
            flex-direction: row;
        }

        #current-inventory-pane {
            flex: 3;
            display: flex;
            flex-direction: row;

            .inventory-slot {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .inventory-slot-name {
                    font-size: 2.5vmin;
                }

                img {
                    max-height: 5vmin;
                    width: 100%;
                    object-fit: contain;
                }

                .inventory-slot-label {
                    font-size: 2.5vmin;
                }
            }
        }

        #selected-item-pane {
            flex: 1;
            display: flex;
            flex-direction: row;

            #use-item-pane {
                display: flex;
                padding: 0.25vmax;
                button {
                    font-size: 2.5vmin;
                }
            }

            #drop-item-pane {
                display: flex;
                padding: 0.25vmax;
                button {
                    font-size: 2.5vmin;
                }
            }
        }
    }
}

@media (orientation: portrait) {
    #rpg-layout {
        display: flex;
        flex-direction: column;

        #player-location-pane {
            flex: 4;

            display: flex;
            flex-direction: column;
            justify-content: space-between;

            padding: 2vmax;

            p {
                margin-bottom: 0;
            }
        }

        #player-actions-pane {
            flex: 1;

            flex-direction: row;
            display: flex;

            .player-action-space {
                flex: 1;
                display: flex;
            }
        }

        #inventory-pane {
            flex: 1;

            display: flex;
            flex-direction: row;
        }

        #current-inventory-pane {
            flex: 5;

            display: flex;
            flex-direction: row;

            .inventory-slot {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                font-size: 1vmax;
            }
        }

        #selected-item-pane {
            display: flex;
            flex-direction: column;
            flex: 3;

            #use-item-pane {
                flex: 1;
                display: flex;
                padding: 0.25vmax;
            }

            #drop-item-pane {
                flex: 1;
                display: flex;
                padding: 0.25vmax;
            }

            button {
                width: 100%;
                flex: 1;
                padding: 0.25vmax;
                font-size: 1.5vmax;
            }
        }

        #qr-code-scanner-pane {
            flex: 1;
            display: flex;
        }

        #extra-widgets-pane {
            display: flex;
            flex-direction: row;
            flex: 2;

            #extra-buttons {
                display: flex;
                flex-direction: column;
                flex: 3;
            }

            #mini-map {
                flex: 2;
            }
        }
    }
}

@keyframes shimmer {
    0% {
        left: -50%;
    }
    100% {
        left: 100%;
    }
}

#rpg-layout {
    font-family: DepartureMono-Regular, monospace;
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;

    #player-location-pane {
        background-size: cover;

        animation: pan-background 30s linear infinite;
        animation-direction: alternate;

        #scene-description {
            padding: 1vmax;
            border-radius: 2vmin;
        }

        h1 {
            font-size: 2vmax;
            text-shadow:
                -1px -1px 0 var(--pico-muted-border-color),
                1px -1px 0 var(--pico-muted-border-color),
                -1px 1px 0 var(--pico-muted-border-color),
                1px 1px 0 var(--pico-muted-border-color);
        }

        p {
            font-size: 1.5vmax;
        }
    }

    #player-actions-pane {
        .player-action-space {
            padding: 1vmax;

            button {
                flex: 1;
                font-size: 1.5vmax;
                padding: 0.25vmax;
            }
        }
    }

    #current-inventory-pane {
        .inventory-slot {
            margin: 0.25em;
            padding: 0.25em;

            border: 0.2vmax solid black;

            .inventory-slot-name {
                text-align: center;
            }

            .inventory-slot-label {
                text-align: center;
            }
        }

        .selected-inventory-slot {
            border: 0.2vmax solid darkolivegreen;
        }

        .can-use-item {
            border: 0.2vmax solid orange;
            position: relative;
            overflow: hidden;
        }

        .can-use-item:before {
            content: "";
            position: absolute;
            top: 0;
            left: -50%;
            width: 200%;
            height: 100%;
            background: linear-gradient(
                90deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.5) 50%,
                rgba(255, 255, 255, 0) 100%
            );
            animation: shimmer 1.5s infinite;
        }
    }

    #selected-item-pane {
        overflow: hidden;

        #selected-item {
            img {
                width: 100%;
                height: 100%;
                object-fit: cover; /* Cover the container's area fully */
                object-position: center; /* Center the image */
                max-height: 8vmax;
            }
        }
    }

    #extra-widgets-pane {
        padding: 1vmax;

        #extra-buttons {
            button {
                font-size: 1.5vmax;
                padding: 0.25vmax;
                margin: 0.25vmax;
            }
        }

        #mini-map {
            padding: 0.5vmax;
        }
    }

    #qr-code-scanner-pane {
        padding: 0.5vmax;
        button {
            width: 100%;
            font-size: 1.5vmax;
        }
    }
}

@media (prefers-color-scheme: dark) {
    #scene-description {
        background-color: var(--pico-contrast-focus);
        backdrop-filter: blur(0.25vmax) brightness(50%);
        -webkit-backdrop-filter: brightness(50%) blur(0.25vmax);
    }
}

@media (prefers-color-scheme: light) {
    #scene-description {
        background-color: var(--pico-contrast-focus);
        backdrop-filter: blur(0.1vmax) invert(0.25) brightness(2);
        -webkit-backdrop-filter: brightness(2.5) blur(0.25vmax);
        text-shadow: 0 0 1px var(--pico-background-color);

    }
}