*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-void: #020304;
    --bg-wall: #0d0a0c;
    --blood-deep: #5e0d19;
    --blood-bright: #aa2131;
    --bone: #dfd3bc;
    --fog: rgba(215, 228, 255, 0.06);
    --gold-ash: #ab9361;
}

html,
body {
    min-height: 100%;
}

body {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    padding: 0;
    font-family: 'JetBrains Mono', monospace;
    color: #f3ead9;
    background:
        radial-gradient(circle at 50% 22%, rgba(157, 17, 38, 0.16) 0%, rgba(157, 17, 38, 0.02) 18%, transparent 34%),
        radial-gradient(circle at 15% 18%, rgba(126, 11, 24, 0.26) 0%, transparent 30%),
        radial-gradient(circle at 85% 26%, rgba(74, 0, 12, 0.24) 0%, transparent 24%),
        linear-gradient(180deg, #161114 0%, #060708 54%, #020304 100%);
}

body::before,
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body::before {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08) 0%, transparent 20%),
        repeating-linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.02) 0,
            rgba(255, 255, 255, 0.02) 1px,
            transparent 1px,
            transparent 4px
        );
    mix-blend-mode: screen;
    opacity: 0.3;
    animation: screenFlicker 0.18s steps(2) infinite;
}

body::after {
    background:
        radial-gradient(circle at 50% 50%, transparent 48%, rgba(0, 0, 0, 0.62) 100%),
        radial-gradient(circle at 50% 115%, rgba(170, 33, 49, 0.18) 0%, transparent 30%);
}

#game-wrapper {
    position: relative;
    width: min(100vw, 720px);
    height: min(100dvh, 1280px);
    max-width: 100vw;
    max-height: 100dvh;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(169, 23, 40, 0.45);
    background:
        linear-gradient(180deg, rgba(17, 10, 14, 0.88) 0%, rgba(4, 4, 5, 0.94) 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 0 50px rgba(115, 6, 22, 0.28),
        0 0 140px rgba(70, 0, 10, 0.36),
        0 36px 90px rgba(0, 0, 0, 0.82);
    animation: wrapperBreath 5s ease-in-out infinite alternate;
}

#game-wrapper::before,
#game-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 100;
}

#game-wrapper::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 16%, transparent 84%, rgba(255, 0, 55, 0.08) 100%),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08) 0%, transparent 18%);
    mix-blend-mode: screen;
    opacity: 0.4;
}

#game-wrapper::after {
    background:
        radial-gradient(circle at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.52) 100%),
        repeating-linear-gradient(
            180deg,
            transparent 0,
            transparent 2px,
            rgba(0, 0, 0, 0.12) 2px,
            rgba(0, 0, 0, 0.12) 4px
        );
    opacity: 0.7;
}

#game-container {
    position: relative;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 224, 163, 0.06) 0%, transparent 18%),
        linear-gradient(180deg, #0f0a0d 0%, #050506 100%);
}

#game-container canvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 22px;
    filter: saturate(0.94) contrast(1.08);
}

.boot-error {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    width: 100%;
    height: 100%;
    padding: 32px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    color: #f3ead9;
    background:
        radial-gradient(circle at 50% 20%, rgba(170, 33, 49, 0.18) 0%, transparent 28%),
        linear-gradient(180deg, #140b0e 0%, #040405 100%);
}

.boot-error h1 {
    font-size: 34px;
    font-family: 'Cinzel', serif;
    color: #f2ddbd;
}

.boot-error p {
    font-size: 16px;
    line-height: 1.6;
    color: #c7bbab;
}

.boot-error code {
    color: #fff1d6;
}

@keyframes wrapperBreath {
    0% {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.03) inset,
            0 0 44px rgba(115, 6, 22, 0.2),
            0 0 120px rgba(70, 0, 10, 0.28),
            0 36px 90px rgba(0, 0, 0, 0.82);
    }
    100% {
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.04) inset,
            0 0 65px rgba(170, 18, 40, 0.28),
            0 0 160px rgba(100, 0, 18, 0.42),
            0 36px 100px rgba(0, 0, 0, 0.9);
    }
}

@keyframes screenFlicker {
    0% { opacity: 0.24; }
    50% { opacity: 0.32; }
    100% { opacity: 0.28; }
}

@media (max-aspect-ratio: 9/16) {
    #game-wrapper {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
        border: none;
        box-shadow: none;
        animation: none;
    }

    #game-wrapper::before,
    #game-wrapper::after,
    #game-container canvas {
        border-radius: 0;
    }
}