/* Mobile-first, touch-first, landscape. Gameplay gestures must never scroll or zoom the page. */

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background-color: #232328;
    color: rgba(255, 255, 255, 0.87);
    font-family:
        system-ui,
        -apple-system,
        sans-serif;
}

#app {
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* §13.1 — the stage letterboxes inside the SAFE-AREA-REDUCED box, not the raw viewport:
       on an iPhone in landscape the sensor housing would otherwise cover most of the outer
       arrow, and the home-indicator band would eat the boot cluster's first touch. */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
        env(safe-area-inset-left);
    box-sizing: border-box;
}

/* Phaser's FIT scale mode measures the parent, so the parent must fill the viewport —
   otherwise it measures the canvas's own intrinsic size and never scales down on a phone. */
/* §8 carrier 2 — the LETTERBOX. [SPEC CALL I]: a flat fill of the wall colour, so the canvas
   edge is seamless with the arena inside it. */
#game-container {
    background-color: #232328;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#game-container canvas {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* M5 spec §7.4 — the shared shell. These buttons are created ONCE at game level and outlive
   every scene, so their styling lives here rather than in a scene's inline cssText. Positioned
   inside the safe area: on an iPhone in landscape the sensor housing sits exactly where an
   8px-from-the-edge button would be. */
.fg-chrome-btn {
    position: fixed;
    top: calc(8px + env(safe-area-inset-top));
    z-index: 10;
    width: 36px;
    height: 36px;
    background: #141417;
    color: #e8e8ec;
    border: 1px solid #4a4a55;
    border-radius: 8px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
}

.fg-chrome-btn[data-role='mute'] {
    left: calc(8px + env(safe-area-inset-left));
}

.fg-chrome-btn[data-role='fullscreen'] {
    left: calc(52px + env(safe-area-inset-left));
}

.fg-chrome-btn[data-role='telemetry'] {
    left: calc(96px + env(safe-area-inset-left));
}

/* The rotate prompt is a DOM overlay, not a canvas one: it has to SWALLOW the pointer so that
   nothing behind it — PLAY on the menu, a touch button in a match — is tappable while it is up. */
#rotate-overlay {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    color: #e8e8ec;
    font-family: 'Lilita One', system-ui, sans-serif;
    font-size: clamp(24px, 5vw, 48px);
    letter-spacing: 0.04em;
    text-align: center;
}

#rotate-overlay.is-visible {
    display: flex;
}