/* ============ A game takes the whole screen ============
 *
 * Modelled on myGaze's activity screen. A game used to open as a card inset
 * from the window, under a header bar of six controls (Back, the badge and
 * title, Favourite, More, the gaze eye, Full screen) and a rule in the game's
 * hue. Now the card is gone and the game runs to the edges, and the header is
 * two round corners with the game's name between them: Options on the left,
 * Close on the right. Everything the header bar carried that is not one of
 * those two was already an entry in the Options menu, so nothing became
 * harder to reach; it just stopped sitting over the game.
 *
 * The header is still a row in the screen's flow rather than floating over the
 * game. Forty-two games lay out their first row from the top of the screen,
 * and a corner drawn over that row would cover a control in some of them; in
 * flow, every game keeps the layout fit.js and the fit check hold it to.
 *
 * Loaded last, after access.css, because it replaces the header and panel
 * looks those files give a game screen. Home and Guided paths are untouched:
 * every rule here is under body:not(.on-hub).
 */

/* ---- The screen ---- */
body:not(.on-hub) .stage {
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    gap: 0;
}
body:not(.on-hub) .screen.panel {
    border: 0; border-radius: 0; box-shadow: none;
    background-color: var(--bg);
    padding: clamp(10px, calc(1.6 * var(--vh)), 18px) clamp(12px, 1.8vw, 24px) clamp(12px, calc(2 * var(--vh)), 24px);
}
/* The tone's hairline marked the top edge of a card; there is no card. The
   wash out of the corner stays, so a screen still wears its game's hue. */
body:not(.on-hub) .screen.panel::before { display: none; }
body.is-tight:not(.on-hub) .screen.panel { padding: 8px clamp(10px, 1.6vw, 20px) 10px; }
body.is-tighter:not(.on-hub) .screen.panel { padding: 6px 10px 8px; }

/* ---- The header: two corners and a name ---- */
body:not(.on-hub) .screen.panel > .game-head {
    --corner: clamp(56px, min(calc(10.5 * var(--vh)), 17vw), 88px);
    /* Every child starts on the same top edge, the name included (it stretches
       to the corners' height and centres itself inside). The fit check counts
       a header's rows by its children's tops, and a short name centred beside
       two tall discs read as a second row once the gaze preset's 115% scale
       took the header past 90px. */
    display: flex; align-items: stretch; justify-content: space-between; gap: 12px;
    min-height: var(--corner);
    margin: 0 0 clamp(6px, calc(1.4 * var(--vh)), 14px);
    padding: 0; border: 0;
}
/* The corners are the first thing a crowded screen takes back: as fit.js steps
   a screen down it shrinks them, so a game is never pushed into its own
   tighter step by the frame around it. */
body.is-tight:not(.on-hub) .screen.panel > .game-head { --corner: clamp(56px, min(calc(8 * var(--vh)), 15vw), 68px); }
body.is-tighter:not(.on-hub) .screen.panel > .game-head { --corner: 56px; }
body:not(.on-hub) .game-head > .game-more-wrap { order: 0; flex: 0 0 auto; }
body:not(.on-hub) .game-head > .game-title { order: 1; }
body:not(.on-hub) .game-head > .back-btn { order: 2; }
/* Their entries are in the Options menu, and are shown there below. */
body:not(.on-hub) .game-head > .fav-btn,
body:not(.on-hub) .game-head > .game-gaze-status,
body:not(.on-hub) .game-head > .tool-btn { display: none !important; }

/* The corners. myGaze's own: a disc of dark glass with a hairline, the icon
   over a one-word label, sized from the screen and never under the gaze
   target floor. Fixed colours rather than theme ones, because the disc is
   glass over the game, and the game's ground is not the theme's. */
body:not(.on-hub) .game-head .more-btn,
body:not(.on-hub) .game-head .back-btn {
    width: var(--corner); height: var(--corner); min-width: 0; min-height: 0; flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 0; border: 0; border-radius: 50%;
    background: rgba(16, 15, 13, 0.55);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px rgba(255, 246, 230, 0.24);
    color: #F6F2EA; font: 800 clamp(12px, calc(var(--corner) * 0.17), 15px)/1 'Nunito', sans-serif;
    cursor: pointer; transform: none;
    transition: background-color .18s ease, box-shadow .18s ease;
}
body:not(.on-hub) .game-head .more-btn .ico,
body:not(.on-hub) .game-head .back-btn .ico { width: calc(var(--corner) * 0.34); height: calc(var(--corner) * 0.34); }
body:not(.on-hub) .game-head .more-btn span,
body:not(.on-hub) .game-head .back-label { display: block; }
body:not(.on-hub) .game-head .more-btn:hover,
body:not(.on-hub) .game-head .more-btn:focus-visible,
body:not(.on-hub) .game-head .more-btn[aria-expanded="true"],
body:not(.on-hub) .game-head .back-btn:hover,
body:not(.on-hub) .game-head .back-btn:focus-visible {
    transform: none; border: 0;
    background: rgba(16, 15, 13, 0.78);
    box-shadow: inset 0 0 0 3px var(--tone, var(--accent));
}
/* On a short screen the word goes and the disc keeps its icon; the name is
   still the button's accessible name. */
body.is-tighter:not(.on-hub) .game-head .more-btn span,
body.is-tighter:not(.on-hub) .game-head .back-label { display: none; }

/* The name, centred between the corners, in the display face Home uses. The
   badge was the game's card art at 40px, and the corners are the frame now. */
body:not(.on-hub) .game-head > .game-title {
    flex: 1 1 auto; min-width: 0; align-self: stretch;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font: 700 clamp(19px, 2.3vw, 28px)/1.1 'Arvo', 'Fredoka', serif; letter-spacing: -0.01em;
    text-align: center;
}
body:not(.on-hub) .game-head > .game-title .em { display: none; }
body:not(.on-hub) .game-head > .game-title > [id^="head-title-"] {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body:not(.on-hub) .game-head .path-status {
    font: 800 13px/1.2 'Nunito', sans-serif; letter-spacing: 0; color: var(--ink-dim);
}
/* The heading is the first thing a phone gives up: two corners of 64px leave
   the name about 200px, and a long name there is a one-word ellipsis. */
@media (max-width: 380px) {
    body:not(.on-hub) .game-head > .game-title { font-size: 18px; }
}

/* ---- Options: a panel over the game, not a dropdown off a button ----
 *
 * The menu opened as a 230px list of 46px rows hanging off the button, which
 * was a fine mouse menu and a poor gaze one. It is now what myGaze's Options is:
 * a panel of full-size choices in the middle of a dimmed screen. The dimming
 * is the wrap's ::before, so a press on it lands on the wrap and screens.js
 * closes the menu; the Options corner stays above it and still toggles. */
body:not(.on-hub) .game-head .more-btn[aria-expanded="true"] { position: relative; z-index: 96; }
body:not(.on-hub) .game-more-wrap:has(> .more-btn[aria-expanded="true"])::before {
    content: ''; position: fixed; inset: 0; z-index: 94;
    background: rgba(8, 7, 6, 0.78);
}
body:not(.on-hub) .game-head .game-more-menu {
    position: fixed; z-index: 95; top: 50%; left: 50%; right: auto;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 32px)); max-height: calc(100% - 32px); overflow: auto;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
    padding: 16px;
    border: 1px solid rgba(255, 246, 230, 0.09); border-radius: 32px;
    background: var(--surface);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 250, 240, 0.05);
}
body:not(.on-hub) .game-head .game-more-menu[hidden] { display: none; }
body:not(.on-hub) .game-head .game-more-menu button {
    min-height: 72px; padding: 12px 16px; gap: 12px;
    border-radius: 18px;
    background: var(--surface-2);
    font: 800 17px/1.15 'Nunito', sans-serif;
}
body:not(.on-hub) .game-head .game-more-menu button:hover,
body:not(.on-hub) .game-head .game-more-menu button:focus-visible {
    background: color-mix(in srgb, var(--tone, var(--accent)) 16%, var(--surface-2));
    box-shadow: inset 0 0 0 2px var(--tone, var(--accent));
}
body:not(.on-hub) .game-head .game-more-menu .ico { width: 24px; height: 24px; flex-shrink: 0; }
/* The header no longer carries Favourite, the gaze session or Full screen at
   any width, so the menu offers them at every width. (Above 1024px it hid them
   as duplicates of header buttons that are gone.) */
body:not(.on-hub) .game-more-menu [data-fav-for],
body:not(.on-hub) .game-more-menu [data-more-action="gaze"],
body:not(.on-hub) .game-more-menu [data-more-action="fullscreen"] { display: flex; }
body:not(.on-hub) .game-more-menu [data-more-action="options"][hidden] { display: none; }
@media (max-width: 420px), (max-height: 520px) and (min-aspect-ratio: 5/4) {
    body:not(.on-hub) .game-head .game-more-menu { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; border-radius: 24px; }
    body:not(.on-hub) .game-head .game-more-menu button { min-height: 56px; }
}
@media (max-height: 520px) and (min-aspect-ratio: 5/4) {
    body:not(.on-hub) .game-head .game-more-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(560px, calc(100vw - 32px)); }
}

/* ---- A phone held sideways: the corners stand down the left side ----
 *
 * adaptive-upgrades.css already turns the header into a column on a short,
 * wide screen, which is the one place a header row costs more height than the
 * game can give. The corners keep that: Options at the top of the column and
 * Close under it, as discs without words, and no rule beside them. */
@media (max-height: 520px) and (min-aspect-ratio: 5/4) {
    body:not(.on-hub) .stage { padding: 0; }
    body:not(.on-hub) .screen.panel.active > .game-head {
        --corner: 52px;
        justify-content: flex-start; gap: 10px;
        border-right: 0;
    }
    body:not(.on-hub) .game-head .more-btn span,
    body:not(.on-hub) .game-head .back-label { display: none; }
    body:not(.on-hub) .game-head > .game-title { display: none; }
    body:not(.on-hub) .game-head > .back-btn { order: 1; }
}

/* ---- Settings that change the corners ---- */
body.big-targets:not(.on-hub) .screen.panel > .game-head { --corner: clamp(64px, min(calc(11 * var(--vh)), 19vw), 88px); }
body.big-targets.is-tight:not(.on-hub) .screen.panel > .game-head { --corner: clamp(60px, min(calc(8.5 * var(--vh)), 16vw), 72px); }
body.big-targets.is-tighter:not(.on-hub) .screen.panel > .game-head { --corner: 60px; }
body[data-contrast="high"]:not(.on-hub) .game-head .more-btn,
body[data-contrast="high"]:not(.on-hub) .game-head .back-btn {
    background: #000; -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: inset 0 0 0 3px #fff;
}
body[data-contrast="high"]:not(.on-hub) .game-head .more-btn:hover,
body[data-contrast="high"]:not(.on-hub) .game-head .more-btn:focus-visible,
body[data-contrast="high"]:not(.on-hub) .game-head .more-btn[aria-expanded="true"],
body[data-contrast="high"]:not(.on-hub) .game-head .back-btn:hover,
body[data-contrast="high"]:not(.on-hub) .game-head .back-btn:focus-visible { box-shadow: inset 0 0 0 5px var(--accent); }
body[data-contrast="high"]:not(.on-hub) .screen[data-tone] > .game-head { border-bottom: 0; }

/* ---- The panels Options opens ----
 * How to play and Game options open over the game from the same corner, so
 * they take the same 32px corners and display face as the Options panel. */
body:not(.on-hub) .game-help { border: 1px solid var(--line-strong); border-radius: 32px; }
body:not(.on-hub) .game-help-head h3 { font-family: 'Arvo', 'Fredoka', serif; font-weight: 700; letter-spacing: -0.01em; }
body:not(.on-hub) .screen.options-open > .partner-game-options {
    border: 1px solid var(--line-strong); border-radius: 32px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}