/* 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
 * pre-emit critique: P5 H5 E4 S5 R5 V4 · contrast: pass (40–41) · slop: 58/58
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30)
 * mobile: pass (34, 49, 50–57)
 */
@import url("../tokens.css");

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

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    overflow-x: clip;
    overflow-y: 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%, 37.5rem, calc((100dvh - 1.5rem) * 0.75));
    aspect-ratio: 3 / 4;
    display: grid;
    place-items: center;
    min-width: 0;
    overflow: clip;
    border: var(--rule-frame) solid var(--color-rule);
    border-radius: var(--radius-stage);
    background: var(--color-paper);
    box-shadow: var(--shadow-stage);
}

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

#game-container canvas {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

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

    #game-container {
        width: min(100%, calc(100dvh * 0.75));
        border: 0;
        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;
    }
}