/* ==========================================================================
   Reset
   ========================================================================== */

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

html,
body {
    width: 100%;
    height: 100%;
}

body {
    background: #f0f0f0;
    overflow: hidden;
    font-family: 'Lexend', sans-serif;
}

[hidden] {
    display: none !important;
}

body.cursor-hidden canvas {
    cursor: none;
}

/* ==========================================================================
   UI theme
   ========================================================================== */

#ui-root {
    /* Colors */
    --ui-fill: #f9f9f9;
    --ui-ink: #4b5499;
    --ui-outline: #4b5499;
    --ui-font: 'Lexend', sans-serif;
}

#ui-root.ui-state-how-to-play {
    --card-width: min(660px, calc(100vw - 32px));
}

/* ==========================================================================
   Screens
   ========================================================================== */

.splash {
    min-height: 1.4em;
    text-align: center;
}

.test-note {
    font-size: var(--text-sm);
}

/* Scores */
.run-table {
    --table-columns: 2em 1fr 1fr 1fr 1.4fr;
}

/* Game Over */
.run-details {
    --table-columns: 1fr auto;
    border: var(--ui-stroke) solid var(--ui-outline);
    border-radius: var(--ui-radius-sm);
}

.run-details .table-row {
    padding: var(--space-1) var(--space-3);
}

.run-details .table-row + .table-row {
    border-top: var(--ui-stroke) solid var(--ui-outline);
}

.changelog-block {
    padding: var(--space-4);
    max-height: min(480px, 40vh);
    overflow-y: auto;
}

/* Options > Controls */
.control-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    gap: var(--space-3);
}

.how-to-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

@container (width < 600px) {
    .how-to-content {
        flex-direction: column;
        align-items: center;
    }
}

/* ==========================================================================
   HUD
   ========================================================================== */

/* Stat panel plus test-run note. */
.hud-top {
    position: absolute;
    top: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    width: var(--card-width);
    transition: opacity var(--transition);
}

.hud-corner {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
}

@media (max-width: 640px) {
    .hud-top {
        left: var(--space-4);
        transform: none;
        width: auto;
        justify-items: start;
    }

    .hud-top .stat-panel {
        grid-template-columns: auto;
        width: auto;
        min-width: 132px;
        padding: var(--space-1) 0;
    }

    .hud-top .stat {
        grid-template-columns: auto auto;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--space-3);
        padding: var(--space-1) var(--space-3);
    }

    .hud-top .stat + .stat {
        border-left: none;
        border-top: var(--ui-stroke-thin) solid var(--ui-outline);
    }

    .hud-top .stat .label { font-size: var(--text-xs); }
    .hud-top .stat-value { font-size: var(--text-md); }
    .hud-top .badge--note { max-width: 160px; font-size: var(--text-xs); }
}