* {
    box-sizing: border-box;
    font-family: 'Press Start 2P', cursive;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background-color: black;
}

canvas {
    display: block;
    width: 100vw;
    height: 100vh;
    image-rendering: pixelated;
}

h1 {
    margin: 0;
    font-size: 16px;
}

button {
    border: 0;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #ccc;
}

.game-container {
    position: relative;
    display: inline-block;
}

#overlappingDiv {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background-color: black;
    opacity: 0;
}

#battleInterface {
    display: none;
}

.battle-controls {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    height: 140px;
    border-top: 4px solid black;
    background-color: white;
}

#dialogueBox {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: none;
    width: 66.66%;
    padding: 12px;
    border-left: 4px solid black;
    background: white url('./TestGame img/papyrus.jpg');
    cursor: pointer;
}

#runButton {
    display: grid;
    width: 33.33%;
}

#runButton button {
    background: url('./TestGame img/button.png');
}

.battle-message-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66.66%;
    padding: 15px;
    border-left: 4px solid black;
    background: url('./TestGame img/papyrus.jpg');
}

.touch-controls {
    display: none;
}

@media (hover: none) and (pointer: coarse) {
    .touch-controls {
        position: fixed;
        right: max(20px, env(safe-area-inset-right));
        bottom: max(20px, env(safe-area-inset-bottom));
        left: max(20px, env(safe-area-inset-left));
        z-index: 5;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        pointer-events: none;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }

    html:not([data-game-state="exploring"]) .touch-controls {
        display: none;
    }

    .touch-dpad {
        display: grid;
        grid-template: repeat(3, 58px) / repeat(3, 58px);
    }

    .touch-actions {
        display: flex;
        align-items: flex-end;
        gap: 18px;
    }

    .touch-button {
        width: 58px;
        height: 58px;
        padding: 0;
        border: 2px solid rgba(255, 255, 255, 0.75);
        border-radius: 50%;
        background: rgba(20, 24, 20, 0.48);
        color: white;
        font-size: 19px;
        line-height: 1;
        text-shadow: 0 1px 2px black;
        opacity: 0.75;
        pointer-events: auto;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
    }

    .touch-button:active,
    .touch-button.is-pressed {
        background: rgba(255, 255, 255, 0.48);
        opacity: 1;
    }

    .touch-up::before,
    .touch-left::before,
    .touch-down::before,
    .touch-right::before {
        content: '';
        display: block;
        width: 14px;
        height: 14px;
        margin: auto;
        border-top: 4px solid white;
        border-left: 4px solid white;
    }

    .touch-up {
        grid-area: 1 / 2;
    }

    .touch-up::before {
        transform: translateY(3px) rotate(45deg);
    }

    .touch-left {
        grid-area: 2 / 1;
    }

    .touch-left::before {
        transform: translateX(3px) rotate(-45deg);
    }

    .touch-down {
        grid-area: 2 / 2;
    }

    .touch-down::before {
        transform: translateY(-3px) rotate(-135deg);
    }

    .touch-right {
        grid-area: 2 / 3;
    }

    .touch-right::before {
        transform: translateX(-3px) rotate(135deg);
    }

    .touch-sound {
        width: 48px;
        height: 48px;
        font-size: 13px;
    }

    .touch-action {
        width: 72px;
        height: 72px;
        font-size: 22px;
    }

    .battle-controls {
        z-index: 6;
    }
}

.ajs-message,
.alertify .ajs-dialog,
.alertify .ajs-header,
.alertify .ajs-footer {
    background: url('./TestGame img/papyrus.jpg');
}

.alertify .ajs-content {
    padding: 18px 22px;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0;
}

.alertify .ajs-header,
.alertify .ajs-footer button,
.alertify .ajs-close {
    font-family: 'Press Start 2P', cursive;
}

.alertify .ajs-header {
    padding: 18px 22px 8px;
    font-size: 15px;
}

.alertify .ajs-footer {
    padding: 10px 18px 16px;
}

.alertify .ajs-footer button {
    min-width: 92px;
    min-height: 38px;
    font-size: 13px;
}

@media (max-width: 600px) {
    .alertify .ajs-content {
        padding: 16px;
        font-size: 16px;
    }
}