@font-face {
    font-family: 'Medium';
    src: url(fonts/Rubik-Bold.ttf) format('truetype');
}

:root {
    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-right: env(safe-area-inset-right);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-left: env(safe-area-inset-left);
    --boot-bg-half-width: 62.96182266vh;
    --html-side-fill-width: max(0px, calc(50vw - var(--boot-bg-half-width)));
    --html-side-texture-width: 35px;
}

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overscroll-behavior-x: contain;
    font-family: sans-serif;

    background-color: #05000c;

    display: flex;
    justify-content: center;
    isolation: isolate;
}

/* The background lives on a fixed, viewport-pinned layer sized by --app-height
   (set by GameManager.onResize and frozen while a text input is focused), so the
   soft keyboard overlays it instead of rescaling it together with the body. */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--app-height, 100%);
    z-index: -1;
    pointer-events: none;

    background: #05000c url(assets/bg.9d34be52b3c0b68a6ed1.jpg) no-repeat 50% 70%;
    background-image: image-set(url(assets/bg.843b40cfdef4b2ff8601.webp) type("image/webp"), url(assets/bg.9d34be52b3c0b68a6ed1.jpg) type("image/jpeg"));
    background-size: auto 93%;
}

#root {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    opacity: 0;
    touch-action: none;
}

#html-side-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    pointer-events: none;
}

.html-side-panel {
    position: absolute;
    top: 0;
    display: flex;
    width: calc(var(--html-side-fill-width) + var(--html-side-texture-width));
    height: 100%;
    height: 100dvh;
}

.html-side-fill {
    flex: 0 0 var(--html-side-fill-width);
    height: 100%;
    background: #05000c;
}

.html-side-texture {
    flex: 0 0 var(--html-side-texture-width);
    height: 100%;
    background-image: url(assets/side_fade.355941e966ebe0ace6a1.png);
    background-image: image-set(url(assets/side_fade.b6c6979475bc198fca9f.webp) type("image/webp"), url(assets/side_fade.355941e966ebe0ace6a1.png) type("image/png"));
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.html-side-panel--left {
    left: 0;
}

.html-side-panel--right {
    right: 0;
}

.html-side-panel--right .html-side-texture {
    transform: scaleX(-1);
}

@media (max-aspect-ratio: 2045 / 1624) {
    #html-side-overlay {
        display: none;
    }
}

#canvas, canvas {
    display: block;
    width: 100%;
    height: 100%;
}

#loader-screen {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 2147483647;
    top: 0;
    left: 0;
}

#progress-bar {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translate(-50%, 0);
    box-sizing: border-box;
    width: 320px;
    height: 34px;
    padding: 0 1px;
    border: 2px solid transparent;
    border-image: url(assets/progress_bar_bg.f878abbcb8801313733e.png) 30 56 fill / 17px 31px / 0 stretch;
    border-image-source: image-set(url(assets/progress_bar_bg.9b9a7e2c55fd5a45b310.webp) type("image/webp"), url(assets/progress_bar_bg.f878abbcb8801313733e.png) type("image/png"));
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.7));
}

#progress-bar-fill {
    width: 0;
    min-width: 54px;
    height: calc(100% - 6px);
    margin-top: 3px;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-image: url(assets/progress_fill.d1cc427ca8cab7faa4b7.png) 29 45 fill / 17px 25.5px / 0 stretch;
    border-image-source: image-set(url(assets/progress_fill.7f3ab5dd8e08a133b3cb.webp) type("image/webp"), url(assets/progress_fill.d1cc427ca8cab7faa4b7.png) type("image/png"));
}

#progress-bar-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.75), 0 0 4px rgba(0, 0, 0, 0.6);
}