/* Chrome for a canvas and nothing else: the game owns the whole viewport, and
   the loader borrows the terminal's palette (client/ui/palette.go). */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #000000;
    overflow: hidden;
    overscroll-behavior: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #ffffff;
}

canvas {
    width: 100% !important;
    height: 100% !important;
    /* The canvas owns every gesture on it: look and move are drags, and
       without this the browser claims the pan and zooms on a double tap. */
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    outline: none;
}

#loader {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

#loader-text {
    color: #5f5fff; /* Primary */
    font-size: 14px;
}

#loader-track {
    width: min(80%, 360px);
    height: 3px;
    background-color: #262626;
}

#loader-bar {
    width: 0;
    height: 100%;
    background-color: #5f5fff; /* Primary */
    transition: width 0.1s ease-out;
}

#loader.failed #loader-text {
    color: #ff0000; /* Danger */
}