/*
  Player shell chrome for the hosted arcade games (/play/<slug>/).
  Extracted from apps/kids-arcade/player.html (kids-arcade repo) and restyled to the
  site's editorial-workbench tokens (workbench.css :root, repo root): paper bar,
  ink text, cobalt focus. No fetch("/api/games.json") and no /g/<slug> src lookup:
  each shell page carries its own title/controls/src in markup.

  Contrast (WCAG, computed 2026-08-28):
    ink #151515 on paper #F5F0E5 (title)        16.07:1
    muted #675F53 on paper #F5F0E5 (sub/dim)     5.53:1
    ink #151515 on white #FFFDF7 (button text)  17.95:1
*/
:root {
  --bar-h: 56px;
  --bar-bg: #F5F0E5;      /* workbench --paper */
  --bar-edge: #E9E0CD;    /* workbench --paper-deep */
  --bar-ink: #151515;     /* workbench --ink */
  --bar-dim: #675F53;     /* workbench --muted, 5.53:1 on the paper bar */
  --btn-bg: #FFFDF7;      /* workbench --white */
  --focus: #1557D6;       /* workbench --blue / --cobalt */
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: #000; }
body { font-family: "IBM Plex Mono", "Courier New", monospace; }

/* Top bar is anchored to the screen edge, so it pays the notch inset.
   height must GROW by the inset: border-box eats padding-top on its own. */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  height: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(10px, env(safe-area-inset-left, 0px));
  padding-right: max(10px, env(safe-area-inset-right, 0px));
  display: flex; align-items: center; gap: 10px;
  background: var(--bar-bg); color: var(--bar-ink);
  border-bottom: 2px solid var(--bar-edge);
  transition: transform .18s ease;
}
body.immersive .bar { transform: translateY(-100%); }

.btn {
  display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap;
  font-family: "IBM Plex Mono", "Courier New", monospace; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bar-ink); background: var(--btn-bg);
  border: 2px solid var(--bar-edge);
  border-radius: 4px; padding: 9px 14px; cursor: pointer;
  min-height: 40px; /* thumb-sized for kids on a tablet */
  text-decoration: none;
}
.btn:hover { background: #fff; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.title { font-weight: 700; font-size: 1.1rem; flex: none; white-space: nowrap; }
/* Long controls strings (Emberfall, Cat-A-Vac) must not wrap the bar on a phone: one line, ellipsis. */
.sub { color: var(--bar-dim); flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; margin-left: 6px; }
.spacer { margin-left: auto; }

.stage {
  position: absolute; inset: 0;
  padding-top: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
  transition: padding-top .18s ease;
}
body.immersive .stage { padding-top: 0; }
iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }

/* Peek strip: in immersive mode this is how you get the bar back. */
.peek {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9;
  height: calc(28px + env(safe-area-inset-top, 0px));
  display: none; border: 0; padding: 0; cursor: pointer;
  background: linear-gradient(rgba(255,255,255,.18), transparent);
}
body.immersive .peek { display: block; }
.peek:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
  .bar, .stage { transition: none; }
}