@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* Panel geometry. The game canvas is 518x632 (see config in js/game.js), and the
   dashboard and leaderboard are sized to match its *outer* box so every panel
   across the site is the same size. Sizing off the outer box rather than the
   bitmap means the canvas is never scaled, which would blur the pixel art. */
:root {
    --panel-border: 3px;
    --panel-border-color: greenyellow;
    --panel-width: 518px;
    --panel-height: 632px;
    --panel-outer-width: calc(var(--panel-width) + var(--panel-border) * 2);
    --panel-outer-height: calc(var(--panel-height) + var(--panel-border) * 2);
}

* {
    box-sizing: border-box;
    background-color: black;
}

/* `html` keeps a definite height so page containers have something to size
   against; `body` only takes it as a *minimum* so content taller than the
   viewport grows the body rather than overflowing a box fixed at 100%. That's
   what lets short windows scroll instead of clipping. */
html {
    height: 100%;
    background-color: black;
}

/* The default 8px UA margin has to go: the page containers are sized with
   100dvh, so any margin around them overflows the viewport by exactly that much
   and produces a permanent scrollbar on a page that otherwise fits. */
body {
    min-height: 100%;
    margin: 0;
    background-color: black;
}

/* Fluid width, fixed maximum: identical to the old fixed 524px on any window
   wide enough for it, and shrinks to fit once the viewport is narrower. */
.panel {
    width: 100%;
    max-width: var(--panel-outer-width);
    height: var(--panel-outer-height);
    border: var(--panel-border) solid var(--panel-border-color);
}

.button-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/* `color` is not optional next to `background-color`. A control with no colour
   of its own takes the UA's, which is a *system* colour rather than black: iOS
   Safari paints button labels in the system accent, so these read light blue on
   the white face, and in dark mode `buttontext` resolves to white and the label
   disappears into the button entirely. Desktop Chrome happens to default to
   black, which is why this only ever showed up on a phone. */
.button {
    align-items: center;
    background-color: white;
    color: black;
    margin-top: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 60%;
    min-width: min(200px, 100%);
    max-width: 100%;
    font-size: 20px;
    font-family: 'Press Start 2P', cursive;
}

/* Press Start 2P is a wide face: at 20px, "Return to Game" is ~280px of label,
   which overflows a 60%-wide button once the panel narrows. One step down at
   the mobile breakpoint rather than scaling with the viewport, so the type
   holds its original size everywhere above it. */
@media (max-width: 560px) {
    .button {
        font-size: 11px;
    }
}

/* 16px is the floor below which iOS Safari auto-zooms the page when an input is
   focused — that rescales the whole layout mid-login, so it must not go under.

   `color` pairs with `background-color` for the same reason as .button above:
   the Login and Sign Up submits carry this class and are left on the white face,
   so without it their labels are a system colour and vanish on a phone. The text
   and password fields override both halves in css/login.css — that rule is
   `input[type="…"].form-field` and outweighs this one, so they stay white on
   dark. */
.form-field {
    background-color: white;
    color: black;
    font-size: max(16px, 1rem);
    padding: 8px;
    width: 100%;
}