/* ==========================================================================
   Full-screen trigger — the outermost control of the top-right chrome rail.

   Deliberately cut from the same cloth as the audio trigger beside it (same
   diameter, same glass, same hover lift), because the two read as one cluster
   at the corner of every lobby-side surface. Its geometry comes entirely from
   the `--mf-rail-*` tokens in main.css; nothing here re-derives a size.

   The element exists only where the Fullscreen API does — fullscreen-toggle.js
   never builds it otherwise — so these rules never style a dead control.
   ========================================================================== */

#fullscreen-toggle {
    position: fixed;
    top: var(--mf-rail-top);
    right: var(--mf-rail-edge);
    z-index: 1000;
}

.fullscreen-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--mf-rail-btn);
    height: var(--mf-rail-btn);
    padding: 0;
    margin: 0;
    border-radius: 999px;
    border: 1px solid rgba(238, 219, 241, 0.4);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    color: #eedbf1;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.fullscreen-toggle:hover {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(238, 219, 241, 0.7);
    transform: scale(1.05);
}

.fullscreen-toggle:active {
    transform: scale(0.96);
}

.fullscreen-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(238, 219, 241, 0.45);
}

.fullscreen-toggle-glyph {
    width: 55%;
    height: 55%;
    display: block;
    pointer-events: none;
}

/* One glyph at a time. Both paths ship in the same <svg> so the swap is a
   style change rather than a re-render, which keeps the icon from flickering
   through a blank frame as the document enters or leaves full screen. */
.fullscreen-toggle[data-state='enter'] .fullscreen-toggle-path--exit,
.fullscreen-toggle[data-state='exit'] .fullscreen-toggle-path--enter {
    display: none;
}

/* NO BATTLE SEAT, AND NO BATTLE FADE.

   Both used to live here. The trigger was a free-floating corner button, so it
   carried a JS-measured battle seat (fullscreen-toggle.js placed it one slot
   outboard of the audio trigger) and faded to `opacity: 0.4` "so neither
   competes with the board", lifting again on hover.

   The seating was deleted when the button became a row inside the chrome menu
   — see the long note in fullscreen-toggle.js — but the FADE was left behind,
   and it is inherited by the row. `body.game-active #fullscreen-toggle` is
   (1,1,1) against the panel's `.chrome-menu-panel #fullscreen-toggle` at
   (1,1,0), so the donated rule won: in a match, Full screen rendered at 40%
   next to Go to Lobby at 100%. Reported as "full screen buttn still seems
   ungghiglighted compared to go to lobby button if pressing menu buttn in
   game", and it directly contradicts the earlier instruction that the menu
   must not "highlight some options more than others".

   The phone tier was worse: the same block sized the trigger to 36x36 for a
   rail that no longer exists, so the panel showed a 36px stub at 85% opacity
   beside 44px rows in a 276px-wide panel.

   Nothing replaces them. The panel owns the row's seat, size and opacity, and
   a control that lives in exactly one place needs no per-surface seat at all.
   Contract: tests/unit/styles/chromeRail.test.js. */

/* A phone can't hover, so the trigger must be a real target rather than a
   34px decoration; --mf-touch is the WCAG 2.5.5 floor used across the app. */
@media (hover: none), (pointer: coarse),
       (orientation: portrait) and (max-width: 768px),
       (orientation: landscape) and (max-height: 560px) {
    .fullscreen-toggle {
        min-width: var(--mf-touch);
        min-height: var(--mf-touch);
        touch-action: manipulation;
    }

}

/* THE PHONE BATTLE COLUMN — and ONLY the phone battle.
   Everything below used to sit in the broad touch block above, which asks
   `(pointer: coarse)` with NO size bound. Its own comment says the 36px exists
   to "MATCH THE RAIL-MATE EXACTLY", and the rail-mate is mobile.css's audio
   trigger — banded `(orientation: landscape) and (max-height: 560px) and
   (max-width: 932px)`. Two rules that must agree, scoped differently, agree
   only by luck: on an iPad the phone's 36px reached THIS trigger and nothing
   reached the audio one, so the battle rail carried a 36px circle beside a
   48px circle. Matching the band is what makes "exactly" true by construction.
   Contract: tests/e2e-playwright/tablet-chrome.spec.js. */


/* ==========================================================================
   THE GESTURE'S RECEIPT.

   `fullscreen-gesture.js` lets a player double-press anywhere inert to toggle
   full screen. A gesture that silently rearranges the whole screen leaves them
   unsure what they just did and where to undo it, so the press rings THIS
   control — the visible thing responsible, and the place they will look next.

   Drawn on a pseudo-element rather than the button. The button's own
   `transform` is already spoken for by `:hover` and `:active` through a
   transition, and an animation on the same property wins for its whole
   duration; the ring has a transform nothing else touches.
   ========================================================================== */
.fullscreen-toggle::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 2px solid rgba(238, 219, 241, 0.9);
    opacity: 0;
    pointer-events: none;
}

.fullscreen-toggle.fullscreen-toggle-pulsing::after {
    animation: fullscreen-toggle-ping 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fullscreen-toggle-ping {
    from {
        opacity: 0.9;
        transform: scale(0.92);
    }

    to {
        opacity: 0;
        transform: scale(1.75);
    }
}

/* The class is taken off again on `animationend`, which never arrives when
   there is no animation — fullscreen-gesture.js carries a timeout for exactly
   this branch, so the control cannot be left ringed. */
@media (prefers-reduced-motion: reduce) {
    .fullscreen-toggle.fullscreen-toggle-pulsing::after {
        animation: none;
    }
}