:root {
    --md-canvas-bg: #333333;
    --md-hud-panel: rgba(0, 0, 0, 0.60);
    --md-hud-panel-soft: rgba(0, 0, 0, 0.50);
    --md-hud-panel-strong: #000000;
    --md-hud-text: #ffffff;
    --md-hud-muted: rgba(255, 255, 255, 0.72);
    --md-hud-blue: #3c66b0;
    --md-hud-cyan: #00dcff;
    --md-hud-red: #d12b2f;
    --md-hud-close-red: #500000;
    --md-hud-yellow: #ffff00;
    --md-edge: 10px;
    --md-edge-mobile: 5px;
    --md-gap: 2px;
    --md-control: 52px;
    --md-font: "Open Sans", Arial, sans-serif;
}

html {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    background-color: var(--md-canvas-bg);
}
body {
    position: absolute;
    inset: 0;
    margin: 0;
    max-height: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--md-canvas-bg);
    color: var(--md-hud-text);
    font-family: var(--md-font);
    width: 100%;
    user-select: none;

    -webkit-tap-highlight-color: transparent;
}

#application-canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#application-canvas.fill-mode-NONE {
    margin: auto;
}
#application-canvas.fill-mode-KEEP_ASPECT {
    width: 100%;
    height: auto;
    margin: 0;
}
#application-canvas.fill-mode-FILL_WINDOW {
    width: 100%;
    height: 100%;
    margin: 0;
}

canvas:focus {
    outline: none;
}

.md-hud-button {
    width: var(--md-control);
    height: var(--md-control);
    min-width: var(--md-control);
    padding: 0 6px;
    border: 0;
    border-radius: 0;
    background: var(--md-hud-panel);
    color: var(--md-hud-text);
    cursor: pointer;
    font: 700 13px/26px var(--md-font);
    letter-spacing: 0;
    text-align: center;
    box-sizing: border-box;
}

.md-hud-button:hover,
.md-hud-button:focus-visible {
    background: var(--md-hud-panel-strong);
    outline: none;
}

.md-hud-button.is-active {
    background: var(--md-hud-blue);
}

.md-hud-button.is-danger {
    background: var(--md-hud-close-red);
}

.md-hud-button-wide {
    width: auto;
    min-width: var(--md-control);
    padding: 0 12px;
    font-size: 13px;
    font-weight: 400;
}

.md-hud-panel {
    background: var(--md-hud-panel);
    color: var(--md-hud-text);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font: 13px/26px var(--md-font);
    letter-spacing: 0;
    box-sizing: border-box;
}

.md-hud-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 0;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.42);
    color: var(--md-hud-text);
    font: 13px/18px var(--md-font);
}

.md-hud-input:focus {
    outline: 1px solid var(--md-hud-blue);
    outline-offset: 0;
}

@media (max-width: 640px), (max-height: 560px) {
    :root {
        --md-edge: var(--md-edge-mobile);
    }
}