@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.
   It starts below the install banner for the same reason #root does: --app-height
   is already the banner-less height, so an offset of 0 would leave the layer short
   at the bottom instead of aligned with the canvas. */
body::before {
    content: '';
    position: fixed;
    top: var(--install-banner-height, 0px);
    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%;
}

/* The install banner is a real bar, not an overlay: the canvas fills the viewport, so a bar
   drawn on top of it would cover the HUD's currency counters. #root is pushed down by exactly
   the banner's height, and GameManager subtracts the same value (via InstallBannerLayout)
   from the height it gives the renderer. The variable is 0px until the banner shows itself. */
#root {
    position: relative;
    width: 100%;
    height: 100%;
    margin: var(--install-banner-height, 0px) auto 0;
    opacity: 0;
    touch-action: none;
}

/* Sits above the side-fill overlay (equal z-index, later in the DOM) so its controls are never
   clipped on a wide screen, and below #loader-screen so the boot sequence stays undisturbed.
   The 52px comes from InstallBannerView.BANNER_HEIGHT — the bar is sized in JS because the game
   canvas has to shrink by exactly the same number; keep the two in step. */
#install-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2147483646;
    height: var(--install-banner-height, 0px);
    padding-top: var(--safe-area-inset-top);
    background: #170b26;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.install-banner__body {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 520px;
    height: 100%;
    margin: 0 auto;
    padding: 0 8px;
}

/* Source order is the app-install-bar convention: dismiss far left, then icon and copy, then the
   call to action hard right. Flex lays these out in DOM order, so the rules below follow it. */
/* The box is the tap target; the glyph inside it is ~11px. Its width is therefore also what sets
   the air either side of the ×: the glyph is centred, so half of any width change lands on each
   gap. 30px is the 40 it started at less the 10 that trimmed 5px off both sides.
   Deliberately taller than it is wide — vertical room is free on a 52px bar, and it buys back
   some of the target that the narrowing costs.
   No negative margin pulling it to the screen edge: that made the gap left of the glyph exactly
   one flex-gap smaller than the gap right of it, and an optical wobble every player can see is a
   bad trade for a few pixels of extra target nobody can. */
.install-banner__close {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 40px;
    border: 0;
    background: transparent;
    color: #b9a6d6;
    font-family: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.install-banner__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.install-banner__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}

.install-banner__title,
.install-banner__reward {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.install-banner__title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.install-banner__reward {
    color: #b9a6d6;
    font-size: 12px;
    line-height: 1.2;
}

/* line-height is pinned rather than left at `normal` so the pill's height is 8 + 15.6 + 8 ≈ 32px
   whatever font the platform falls back to — it must stay shorter than the two copy lines, which
   are what the 52px bar is sized around. */
.install-banner__install {
    flex: 0 0 auto;
    max-width: 120px;
    padding: 8px 12px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: #f0a028;
    color: #2a1200;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

#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);
}