/* Host-level styles only: the canvas and the pre-boot screens. Everything the player sees inside the game comes from the
   shared controls and the theme (Nosum.Wasm.Controls/wwwroot/nosum-theme.css). */

.game-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: block;
    outline: none;
    image-rendering: pixelated;
}

/* Shown by index.html while the .NET runtime downloads; Blazor replaces it when the app starts. */
.boot {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--u) * 5);
    background: #2b1608;
    color: var(--nosum-cream);
    font: 400 var(--nosum-fs-body) / var(--nosum-lh) var(--nosum-font);
}

.boot-title {
    font: 400 calc(var(--u) * 2 * 12.5) / 1 var(--nosum-font);
    text-shadow: var(--u) var(--u) 0 var(--nosum-edge), calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--nosum-edge);
}

.boot-bar {
    box-sizing: border-box;
    width: calc(var(--u) * 120);
    height: calc(var(--u) * 10);
    padding: var(--u);
    border: var(--u) solid var(--nosum-edge);
    background: #1a0c02;
}

.boot-bar i {
    display: block;
    width: var(--blazor-load-percentage, 0%);
    height: 100%;
    background: repeating-linear-gradient(to right, var(--nosum-gold) 0, var(--nosum-gold) calc(var(--u) * 3), var(--nosum-wood-light) 0, var(--nosum-wood-light) calc(var(--u) * 4));
}

.boot-text::after {
    content: var(--blazor-load-percentage-text, "Loading");
}

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    box-sizing: border-box;
    padding: calc(var(--u) * 3) calc(var(--u) * 5);
    border-top: calc(var(--u) * 2) solid var(--nosum-edge);
    background: var(--nosum-parchment);
    color: var(--nosum-danger);
    font: 400 var(--nosum-fs-body) / var(--nosum-lh) var(--nosum-font);
}

#blazor-error-ui .reload {
    margin-left: calc(var(--u) * 3);
    color: var(--nosum-ink);
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: calc(var(--u) * 4);
    top: calc(var(--u) * 3);
    cursor: pointer;
}

.blazor-error-boundary {
    padding: calc(var(--u) * 3);
    background: var(--nosum-danger);
    color: var(--nosum-ink-on-dark);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}