/* SnappyGames desktop game frame (Views/ContentPage/play-game.cshtml).

   Markup:  header.sg-bar (logo)  +  #sgHost.sg-host > #sgGame.sg-game > the game's own HTML
   The game is rendered straight into the page (no iframe).

   Breakpoint: the frame only turns on for a real desktop: a viewport at least 1024 x 600 AND a mouse-type
   primary pointer (hover:hover + pointer:fine). Width alone is not enough: iPads in landscape are 1024-1366px
   wide, and they should keep the full-screen game. Everything else (phones, tablets, small windows) gets the
   old page unchanged, because the wrappers are display:contents and the bar is hidden.

   Modes (class on <html>, set by the template):
     sg-mode-fill   game opted in (data-sg-frame="fill") and sizes itself to #sgGame
     sg-mode-fixed  legacy fixed-size game, centred at its native size (--sg-w x --sg-h)
     sg-mode-none   legacy responsive game not converted yet: no frame, old full-window behaviour

   Positioning (class on <html>, set by the template):
     sg-pos-fit     scale to fit (default): fill the window/frame; old fixed games are scaled to fit on touch devices
     sg-pos-center  native size, centred, scaled down only if the screen is smaller (all devices) */

:root {
    --sg-bar: 52px;      /* top bar with the logo */
    --sg-edge: 12px;     /* border on the left, right and bottom */
    --sg-bg: #0b1020;
    --sg-yellow: #ffcc29;
    --sg-glow:
        radial-gradient(1200px 500px at 10% -20%, rgba(255, 204, 41, .10), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(99, 199, 47, .07), transparent 60%);
}

/* ---------- Default (mobile / tablet / small window): no frame, nothing changes ---------- */
.sg-bar { display: none; }
.sg-host, .sg-game { display: contents; }

/* A game that fills the frame measures #sgGame, so on small screens #sgGame is simply the whole window. */
.sg-mode-fill .sg-game { display: block; position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }

/* ---------- Desktop frame ---------- */
@media (min-width: 1024px) and (min-height: 600px) and (hover: hover) and (pointer: fine) {
    /* html[class] matches the specificity of game.css's html.snappy.<lang> loading-splash rule; this file loads later, so it wins. */
    html[class].sg-mode-fill, html[class].sg-mode-fixed {
        background: var(--sg-bg) fixed;
        background-image: var(--sg-glow);
        background-size: auto, auto;
        background-repeat: no-repeat, no-repeat;
        background-attachment: fixed;
    }
    .sg-mode-fill body, .sg-mode-fixed body { background: transparent; }

    .sg-mode-fill .sg-bar, .sg-mode-fixed .sg-bar {
        display: flex; align-items: center;
        position: fixed; left: 0; top: 0; right: 0; height: var(--sg-bar);
        padding: 0 calc(var(--sg-edge) + 6px);
        box-sizing: border-box;
        z-index: 1000;
    }
    .sg-logo { display: block; line-height: 0; }
    .sg-logo img { height: 36px; width: auto; display: block; border: 0; }

    /* The inner area: everything except the bar and the thin border. */
    .sg-mode-fill .sg-host, .sg-mode-fixed .sg-host {
        display: grid; place-items: center;
        position: fixed;
        top: var(--sg-bar); left: var(--sg-edge); right: var(--sg-edge); bottom: var(--sg-edge);
        overflow: hidden;
        border-radius: 10px;
        background: #000;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 12px 40px rgba(0, 0, 0, .5);
    }

    /* #sgGame is the game's "window". transform makes it the containing block for the game's own
       position:fixed elements, so they stay inside the frame instead of the browser window. */
    .sg-mode-fill .sg-game, .sg-mode-fixed .sg-game {
        display: block; position: relative; overflow: hidden;
        transform: translateZ(0);
    }
    .sg-mode-fill .sg-game { inset: auto; width: 100%; height: 100%; }

    /* A fill game narrower or shorter than the frame (sgframe.js centres it and sets sg-narrow): show a faint
       version of the frame background around it instead of flat black. The game's own container stays black. */
    html[class].sg-mode-fill.sg-narrow .sg-host { background: rgba(255, 255, 255, .025); }
    .sg-mode-fill.sg-narrow [data-sg-frame="fill"] { background-color: #000; }
    .sg-mode-fixed .sg-game { width: var(--sg-w); height: var(--sg-h); }

    /* Center: #sgGame is at most the native size (keeps the aspect ratio), so fill games
       scale <= 1; the host grid centres it. (Fixed games are already native size and centred in the frame.) */
    html[class].sg-mode-fill.sg-pos-center .sg-host { background: rgba(255, 255, 255, .025); }
    html[class].sg-mode-fill.sg-pos-center .sg-game {
        position: relative; left: auto; top: auto; translate: none;
        width: min(var(--sg-w), 100%, calc((100vh - var(--sg-bar) - var(--sg-edge)) * var(--sg-ar)));
        height: auto; aspect-ratio: var(--sg-ar);
        box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
    }
}

/* ---------- Positioning outside the desktop frame (touch devices, or Center in a small window) ---------- */
/* sg-place (set by sgframe.js): touch devices, or Center in a window too small for the desktop frame */
html.sg-place.sg-mode-fixed, html.sg-place.sg-mode-fill.sg-pos-center {
    background: var(--sg-bg) fixed;
    background-image: var(--sg-glow);
    background-size: auto, auto;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed;
}

html.sg-place.sg-mode-fixed body, html.sg-place.sg-mode-fill.sg-pos-center body {
    background: transparent;
}

/* Fixed-size games on touch devices or small windows */
html.sg-place.sg-mode-fixed .sg-game {
    display: block;
    position: fixed;
    left: var(--sg-x, 0);
    top: var(--sg-y, 0);
    width: var(--sg-w);
    height: var(--sg-h);
    overflow: hidden;
    transform-origin: 0 0;
    transform: scale(var(--sg-k, 1));
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Fill games in center mode on touch devices or small windows */
html.sg-place.sg-pos-center.sg-mode-fill .sg-game {
    position: fixed;
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    width: min(var(--sg-w), 100vw, calc(100vh * var(--sg-ar)));
    height: auto;
    aspect-ratio: var(--sg-ar);
    translate: -50% -50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

@supports (height: 100dvh) {
    html.sg-place.sg-pos-center.sg-mode-fill .sg-game {
        width: min(var(--sg-w), 100dvw, calc(100dvh * var(--sg-ar)));
    }
}