/* Playit — the standalone guest play page ("/play/{id}") — page-scoped styles only. The gallery
   ("/play") has its own sheet, gallery.css. Shared design tokens live in kit.css / global.css. */

/* ---- Standalone play page: full-bleed, only the header remains ----
   Same trick as the IDE's own full-viewport shell (ide.css's .page-ide): swap the standard
   centred/padded/1140px-capped scaffold for one that fills the whole area below the header. */
.page-play {
  height: 100vh;   /* fallback for browsers without dvh */
  /* The DYNAMIC viewport unit, not vh: on phones `100vh` is the LARGE viewport (browser toolbars
     collapsed), so this page ran 50-90px taller than what was actually visible — and with
     `overflow: hidden` that strip could never be scrolled to. It is exactly where the game frame
     puts its touch pad and the game-over SAVE button (seen live on a real iPhone). dvh is the
     height that is really there right now. */
  height: 100dvh;
  overflow: hidden;
  /* the containing block for the floating header of `.is-filled` below */
  position: relative;
}
.page-play .page-main {
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
}
/* Flex-column so the bottom bar (below) is a real sibling that takes its own space — never an
   overlay, which would cover the bottom of the actual game. */
.play-standalone {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.play-game-area {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}
/* No background of its own: an iframe is transparent until its document paints, and the loader
   below is what the player sees until then — never a black box. */
.play-standalone-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* This page used to hide its header on a phone lying sideways (~310px of visible height on an
   iPhone, and the header was costing a sixth of it). That rule is gone now that the header carries
   FULL SCREEN: a control the player needs most in exactly that orientation can't be the one that
   disappears there. Fullscreen itself buys back far more height than the 50px the header uses —
   the browser's whole chrome — so the trade is the right way round. */

/* ---- The LOADER over the frame (html/play/game.html) ----
   Fills the game area above the iframe from the page's first paint, and fades once the frame
   says its start screen is on screen (static/js/play_loader.js). Its content is the site's own
   backdrop partial — whose layers are position:fixed for the full page — pinned inside this box
   instead, so the grid, glows, sprites and CRT glass stay within the game area. */
.play-loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* the page body's own backdrop (global.css), so the loader is the site, not a new surface */
  background-color: var(--color-ink);
  background-image: radial-gradient(1100px 700px at 50% -10%,
    var(--color-bg-top) 0%, var(--color-panel-raised) 45%, var(--color-ink) 100%);
  transition: opacity .3s;
}
.play-loader.is-done { opacity: 0; }
.play-loader[hidden] { display: none; }
.play-loader .bg-grid,
.play-loader .glow,
.play-loader .scanlines,
.play-loader .vignette,
.play-loader .floating-sprite { position: absolute; }

/* The cabinet: the card modal's shell (game_grid.css `.modal-dialog.cabinet`) with its marquee
   band carrying the game's name, and one friendly line under it. */
.play-loader-card {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 380px;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(180deg, #241f47, #14112e);
  border: 3px solid var(--color-ink);
  border-radius: 16px 16px 10px 10px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.play-loader-card .cabinet-marquee { justify-content: center; padding: 13px 14px; }
/* The name wraps (a loader has no ✕ to share the band with) and glitches like the landing's title:
   the same shake, the same cyan + magenta ghosts — here fed by data-text, since the name is the
   game's own. */
.play-loader-title {
  position: relative;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.5;
  animation: glitch-shake 4s steps(1) infinite;
}
.play-loader-title::before,
.play-loader-title::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  text-shadow: none;
  pointer-events: none;
  opacity: 0;
}
.play-loader-title::before { color: var(--color-cyan); animation: glitch-cyan 4s steps(1) infinite; }
.play-loader-title::after  { color: var(--color-pink); animation: glitch-magenta 4s steps(1) infinite; }
.play-loader-hint {
  margin: 0;
  padding: 22px 16px 20px;
  font-family: var(--font-body);
  font-size: 20px;
  color: var(--color-muted);
}
@media (prefers-reduced-motion: reduce) {
  .play-loader-title,
  .play-loader-title::before,
  .play-loader-title::after { animation: none; }
}


/* ---- The slim TOP bar (html/play/partial/header.html) ----
   The site header stripped to two controls: the way back to the gallery, and FULL SCREEN at the
   far end (the header's own space-between does that placement — no rule needed). It keeps the
   `.site-header` class, so the glass and the border come free, and only tightens the padding —
   the height it gives up goes to the game. */
.site-header-play { padding: 5px 14px 8px; }

/* Both controls are plain ghost buttons from the shared .btn system, so they lift and sink like
   every other button on the site — they only trim their padding to fit a slim bar. The 8px above
   leaves room for the ledge to GROW on hover without the page's `overflow: hidden` clipping it. */
.site-header-play .btn { padding: 7px 12px; }
.play-back-icon,
.play-fullscreen-icon { display: inline-flex; }
/* FULL SCREEN is a lone glyph at the far end (the header's own space-between puts it there), so it
   gets a square rather than a wide pill. */
.play-fullscreen-btn { padding: 7px 9px; }

/* ---- The BOTTOM bar (html/play/partial/bar.html) ----
   A real flex sibling of the game area, never an overlay. Three parts: the share button, the
   game's own name in the middle, and the create + full-screen controls at the end. */
.play-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Roomier below than above, so a button's ledge can grow on hover without the page's
     `overflow: hidden` shaving it off. */
  padding: 5px 14px 8px;
  background: var(--color-panel);
  border-top: 3px solid var(--color-line);
}
/* The two ends get equal width so the middle stays TRULY centred no matter how long the game's
   name or the play count is. */
.play-bar-side { flex: 1 1 0; display: flex; align-items: center; gap: 10px; min-width: 0; }
.play-bar-side-end { justify-content: flex-end; }

/* SHARE LINK is a .btn (the shared system, with its lift/sink), trimmed to fit a slim bar. */
.play-bar .btn { padding: 7px 12px; }
.play-bar-icon { display: inline-flex; }

/* Every glyph on these two bars is drawn at ONE size. The pixel icons are shared partials, each
   authored for whatever button it was first drawn for (the "+" is the IDE's big ASSETS one, at 22px),
   so left alone they gave the bar three buttons of three different heights. */
.site-header-play .btn svg,
.play-bar .btn svg { width: 14px; height: 14px; }

/* The game's identity: its name, and how many times it has been played. */
.play-bar-mid {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  overflow: hidden;
}
.play-bar-title {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* "by @maker" beside the title — the name in the maker pink (game_grid.css .game-maker-name). */
.play-bar-maker {
  flex: none;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-muted);
  white-space: nowrap;
}

/* FULL SCREEN: the page shell itself becomes the whole screen (static/js/play_frame.js), so it
   must measure against the screen rather than the window it used to sit in. Both bars ride along
   — the toggle back OUT is on the top one. */
.page-play:fullscreen { width: 100vw; height: 100vh; }

/* ---- FILLED: the game and nothing else ----
   What FULL SCREEN looks like however the player got there (static/js/play_frame.js sets this on a
   real full screen AND as the whole-page fallback for a browser with no Fullscreen API — an iPhone
   before iOS 26 has none). Both bars step aside; only the toggle stays, floating over the game as
   the way back. Worth ~110px on its own — a quarter of the height on a phone lying sideways — and a
   real full screen adds the browser's own chrome to that. */
.page-play.is-filled .play-bar { display: none; }
.page-play.is-filled .site-header {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  z-index: 60;
  padding: 6px;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
}
/* Only the toggle stays — ALL GAMES would sit on top of the game for no reason, and it comes back
   the moment the player shrinks it again. */
.page-play.is-filled .site-header .btn:not(.play-fullscreen-btn) { display: none; }
/* The toggle is now sitting ON the game rather than on the bar's own panel, and a game can paint
   anything behind it — a bright sky would swallow a transparent ghost button. Give it the panel
   back so it is always findable. */
.page-play.is-filled .play-fullscreen-btn { background: var(--color-panel); }

@media (max-width: 560px) {
  /* A phone has no room for the game's name between the buttons — the buttons win, and the name
     is already on the game's own start screen and in the browser tab. */
  .play-bar-mid { display: none; }
}

/* Fingers, not a mouse — every control on both bars clears the 44px tap target. A second query for
   the SAME phone lying sideways: at 844x390 it is past the 560px width above, so it was being sized
   for a mouse it doesn't have. */
@media (max-width: 560px), (orientation: landscape) and (max-height: 560px) {
  .play-bar .btn,
  .site-header-play .btn { min-height: 44px; }
}