/* Hallmark · genre: modern-minimal · macrostructure: Map / Diagram · theme: Coral · enrichment: functional Phaser vectors · nav: N9 · footer: Ft2
 * audience: casual players · use: time one precise shot · tone: precise arcade
 * responsive stage: classic 3:4 + phone 9:16 + phone tall, selected at runtime
 */
@import url("../tokens.css");

:root {
    --layout-width: 600;
    --layout-height: 800;
    --layout-aspect: 0.75;
    --layout-max-width: 600px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    overflow: clip;
    background: var(--color-paper-2);
    color: var(--color-ink);
    font-family: var(--font-body);
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

body {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: max(var(--space-sm), env(safe-area-inset-top))
        max(var(--space-sm), env(safe-area-inset-right))
        max(var(--space-sm), env(safe-area-inset-bottom))
        max(var(--space-sm), env(safe-area-inset-left));
}

#game-container {
    width: min(
        100%,
        var(--layout-max-width),
        calc((100dvh - 1.5rem) * var(--layout-aspect))
    );
    aspect-ratio: var(--layout-width) / var(--layout-height);
    display: grid;
    place-items: center;
    min-width: 0;
    max-height: calc(100dvh - 1.5rem);
    overflow: clip;
    border-radius: var(--radius-stage);
    background: var(--color-paper);
    box-shadow:
        inset 0 0 0 var(--rule-frame) var(--color-rule),
        var(--shadow-stage);
}

#game-container:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: var(--space-2xs);
}

#game-container canvas {
    display: block;
}

html[data-layout-family="phone"] body {
    padding: 0;
}

html[data-layout-family="phone"] #game-container {
    width: min(100vw, calc(100dvh * var(--layout-aspect)));
    max-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 40rem), (max-height: 43rem) {
    body {
        padding: 0;
    }

    #game-container {
        width: min(100vw, calc(100dvh * var(--layout-aspect)));
        max-height: 100dvh;
        border-radius: 0;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 150ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 150ms !important;
    }
}