:root { color-scheme: dark; }
        * { box-sizing: border-box; }
        @font-face {
            font-family: 'Fredoka';
            src: url('../assets/fonts/fredoka-variable.ttf') format('truetype');
            font-weight: 300 700;
            font-style: normal;
        }
        body {
            margin: 0;
            min-height: 100vh;
            display: grid;
            place-items: center;
            overflow: hidden;
            background: #082d45;
            font-family: 'Fredoka', sans-serif;
        }
        #game-container {
            width: min(100vw, 66.6667vh);
            aspect-ratio: 2 / 3;
            max-height: 100vh;
        }
        canvas {
            display: block;
            width: 100%;
            height: 100%;
            border: 2px solid #bdebf0;
            touch-action: none;
            user-select: none;
            background: #14708a;
        }

/* Match the visible viewport when mobile browser bars expand/collapse. */
@supports (height: 100dvh) {
    body { min-height: 100dvh; }
    #game-container { width: min(100vw, 66.6667dvh); max-height: 100dvh; }
}