/*
 * M22 task-02: self-hosted Noto Sans webfonts, one @font-face per locale
 * font-stack (see `public/fonts/LICENSE.txt` for the OFL license, and
 * `src/i18n/fontFamilies.ts` for the single source of truth these family
 * names must match — `fontLoader.ts`'s `document.fonts` registration and
 * `text.ts`'s `font()` both key off the same names). `font-display: swap`
 * so text paints immediately with a fallback glyph rather than blocking on
 * the font fetch; `--i18n-font-stack` is set at runtime by `fontLoader.ts`
 * on boot/locale-switch so DOM inputs (AccountLink, EquipmentLibrary preset
 * name, DuelLobby join code) track the active locale's font stack.
 */
@font-face {
    font-family: "Noto Sans";
    src: url("fonts/NotoSans-Regular.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans KR";
    src: url("fonts/NotoSansKR-Regular.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans JP";
    src: url("fonts/NotoSansJP-Regular.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans SC";
    src: url("fonts/NotoSansSC-Regular.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans TC";
    src: url("fonts/NotoSansTC-Regular.woff2") format("woff2");
    font-display: swap;
}

:root {
    --i18n-font-stack: "Noto Sans", "Trebuchet MS", Verdana, sans-serif;
}

body {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.87);
    background-color: #000000;
}

#app {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*
 * M26 task-11: iOS safe-area plumbing. `viewport-fit=cover` (index.html) is
 * required for these env() reads to resolve to anything but 0 on iOS; the
 * 0px fallback keeps desktop/non-notched browsers unaffected. See
 * specs/context/capacitor-mobile-port.md §4.3.
 */
:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
}

/*
 * M26 task-11: suppress native scroll/zoom/callout gestures on the game
 * canvas so touch controls (Route B sticks/buttons) don't fight the
 * browser/webview. Scoped to `html`/`body`/`canvas` — NOT `*` — so the
 * `this.add.dom` <input> fields (AccountLink / CharacterSelect /
 * EquipmentLibrary / DuelLobby) keep text selection and the on-screen
 * keyboard (specs/context/capacitor-mobile-port.md §8.3).
 */
html, body {
    touch-action: none;
    overscroll-behavior: none;
}

canvas {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}