/* Game view (DESIGN §15.6, UIKIT §19): the #game iframe, the game bar (#game-controls), the focus-mode
   goo tab and the error panel's look (#hop-error, filled by game/error.js).
   Owner: gameview (design/CONTRACTS.md). Loaded by site/index.html; portal/build.sh versions it.

   Painters (DESIGN §16.1): the bar, its keys, thumb, title, meta and live pill are GPU bodies painted by the
   game-top-bar surface from these twins (kit.css section 7 makes the marked twins transparent under
   html.gpu-paint); without the GPU kit.css draws the same markup (the CSS theme). The tab's focus ring and
   tooltip are always CSS. Modes on <html> (shell/game-controls.js):
     game-focus   focus mode: the bar tucks into the goo tab, the iframe starts at 32 (one rect switch)
     game-tuck    phones in landscape: the bar tucks into a 44 x 44 side tab in a 52 px left gutter */

/* ---- the iframe's rect -------------------------------------------------------------------------
   The bar + its goo gutter sit above the game: TOP_BAR_H 72 (58 + 14); phones 62 + the top safe area
   (kit.css --top-bar-h). Focus mode: 32. Landscape tuck: a left gutter of max(inset, 52). The rect only
   ever switches in one step (no animated resize: the game gets one resize event). */
html { --gv-top: var(--top-bar-h, 72px); --gv-left: 0px; --gv-right: 0px; --gv-inset: 0px; }
html.game-focus { --gv-top: var(--focus-mode-top, 32px); }
html.game-tuck { --gv-top: 0px; --gv-left: max(env(safe-area-inset-left, 0px), 52px); --gv-right: env(safe-area-inset-right, 0px); }
@media (max-width: 759.98px) { html { --gv-inset: env(safe-area-inset-top, 0px); } }

#game {
  position: fixed; z-index: 2; left: var(--gv-left); top: var(--gv-top);
  width: calc(100% - var(--gv-left) - var(--gv-right)); height: calc(100% - var(--gv-top));
  border: 0; outline: 0; background: var(--void-0, #0C0716); pointer-events: auto; touch-action: none;
}
#game[hidden] { display: none; }

/* ---- the bar ---------------------------------------------------------------------------------- */
/* #game-controls exists only while a game is shown (base.css: html.game-active); it is click-through,
   its parts opt back in. z 7: above #game (2), under the hop overlay (11). */
#game-controls { position: fixed; z-index: 7; left: 0; top: 0; width: 100%; height: 0; pointer-events: none; }
#game-controls[hidden] { display: none; }

/* 58 px (+ the top safe area on phones); kit.css .k-bar paints the CSS theme: bar fill, 3 px strip, the
   dormant goo band + gutter (::after). The GPU paints the same body under the transparent twin and moves
   it for the drop-in (game/top-bar.js writes the same offset to this element's transform). */
.game-bar {
  position: absolute; left: 0; top: 0; width: 100%;
  height: calc(var(--bar-h, 58px) + var(--gv-inset)); align-items: flex-start; gap: 0;
  padding: var(--gv-inset) max(17px, calc(env(safe-area-inset-right, 0px) + 8px)) 0 max(17px, calc(env(safe-area-inset-left, 0px) + 8px));
  pointer-events: auto;
}
html.game-focus .game-bar, html.game-tuck .game-bar { display: none; }

/* keys: 38 px faces + the ink (a 44 px box, the board's keys), 15 / 16 px labels, a 6 px top margin */
.game-key-wrap { display: block; flex: none; margin-top: 6px; }
.game-bar .game-key { --k-h: 44px; font-size: 15px; padding: 0 21px; }
.game-bar .game-key.k-key--icon { width: var(--k-h); padding: 0; }
.game-bar #game-back { font-size: 16px; }
.game-key__tip { white-space: nowrap; }
/* the edge keys' tips open inward (never past the viewport); the arrow still points at the key */
.game-key-wrap--back > .game-key__tip { left: -4px; transform: none; }
.game-key-wrap--back > .game-key__tip::before { left: 15.5px; }
.game-key-wrap--fullscreen > .game-key__tip { left: auto; right: -4px; transform: none; }
.game-key-wrap--fullscreen > .game-key__tip::before { left: auto; right: 15.5px; }
.game-bar:not([data-layout~="icons"]) .game-key-wrap:not(.game-key-wrap--back) .game-key__tip,
.game-bar:not([data-layout~="iconback"]) .game-key-wrap--back .game-key__tip { display: none; }
.game-bar[data-layout~="icons"] #game-focus .game-key__label,
.game-bar[data-layout~="icons"] #game-fullscreen .game-key__label,
.game-bar[data-layout~="iconback"] #game-back .game-key__label { display: none; }
.game-key-wrap + .game-key-wrap { margin-left: 8px; }

/* box-art thumb 30 x 45, -5 deg (kit.css .k-boxart--thumb) */
.game-bar__thumb { margin: 6px 0 0 15px; }

/* title (Gluten 800 26, lip 2.5, one line + ellipsis) over the meta line (Fredoka 500 13) */
.game-bar__text { display: flex; flex-direction: column; flex: 0 1 auto; min-width: 0; margin: 8px 0 0 16px; }
.game-bar__title { margin: 0; padding: 0 0 1px; line-height: 30px; }
.game-bar__meta { margin: -1px 0 0 1px; overflow: hidden; text-overflow: ellipsis; line-height: 16px; }
.game-bar[data-layout~="nometa"] .game-bar__meta { display: none; }
.game-bar[data-layout~="nometa"] .game-bar__text { margin-top: 13px; }

/* live pill: "14 playing" (a static dot while a game plays) / "212 plays today" */
.game-bar__live { flex: none; margin: 14px 0 0 22px; }
.game-bar[data-layout~="nopill"] .game-bar__live { display: none; }

/* the free middle (birb's ledge chrome:game:<slug> is the whole bar; it finds its spot here, clear of the twins) */
.game-bar__gap { flex: 1 1 0; min-width: 0; align-self: stretch; }

/* the bar never scrolls; its text never wraps */
.game-bar, .game-bar * { white-space: nowrap; }

/* phones: 52 px + the top safe area, a 10 px gutter; Back and Fullscreen are icon keys (44 px faces, the
   board's), the title is Gluten 20; no thumb, meta, live pill or Focus key (DESIGN §15.6 mobile) */
@media (max-width: 759.98px) {
  .game-bar { padding-left: max(8px, calc(env(safe-area-inset-left, 0px) + 8px)); padding-right: max(8px, calc(env(safe-area-inset-right, 0px) + 8px)); }
  .game-key-wrap { margin-top: 0; }
  .game-bar .game-key { --k-h: 50px; }  /* a 44 px face (the board's) + its ink */
  .game-bar #game-back .game-key__label, .game-bar #game-fullscreen .game-key__label { display: none; }
  .game-bar__thumb, .game-bar__meta, .game-bar__live, .game-key-wrap--focus { display: none !important; }
  .game-bar__text { margin: 12px 0 0 12px; }
  .game-bar__title { line-height: 26px; }
  .game-key__tip { display: none !important; }
}
/* no Focus key on touch (DESIGN §15.6) */
@media (pointer: coarse) { .game-key-wrap--focus { display: none !important; } }

/* Reduce motion: no drop-in; the bar fades in over 150 ms (the GPU follows this opacity, R3). */
@keyframes gv-fade-in { from { opacity: 0; } }
html[data-motion="reduce"].game-active #game-controls { animation: gv-fade-in 150ms linear both; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]).game-active #game-controls { animation: gv-fade-in 150ms linear both; }
}

/* ---- the goo tab (focus mode) ---------------------------------------------------------------------
   A drip-shaped handle 96 x 21 (hit 96 x 24) at top 8 in the 32 px gutter, a real <button> right before the
   iframe; its tooltip "Show game bar" and focus ring are CSS (the ring may overlap the game by 8 px).
   Landscape phones: a 44 x 44 side tab in the left gutter. */
.game-tab { position: fixed; z-index: 7; top: var(--tab-top, 8px); left: calc(50% - 48px); width: 96px; height: 24px; pointer-events: auto; }
.game-tab[hidden] { display: none; }
#game-bar-tab { display: block; width: 100%; height: 100%; }
.game-tab__tip { white-space: nowrap; }
html.game-tuck .game-tab { top: max(18px, calc(env(safe-area-inset-top, 0px) + 10px)); left: 2px; width: 44px; height: 44px; }
/* the side tab (the board's shape: a goo pad with a flat left edge; the GPU adds its drip); kit.css .k-tab--side is a disc */
#game-bar-tab.k-tab--side { border-radius: 0 14px 14px 0; border-left-width: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5,9.5 L12,15 L17.5,9.5' fill='none' stroke='%2307030D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 55% / 26px 26px no-repeat, var(--goo-5); }
/* forced colours: the baked goo is gone; a system-colour outline and chevron keep the tab visible */
@media (forced-colors: active) {
  #game-bar-tab, #game-bar-tab.k-tab--side { border: 2px solid ButtonText; background: ButtonFace; }
  #game-bar-tab::after { content: ""; position: absolute; left: calc(50% - 5px); top: calc(50% - 8px); width: 8px; height: 8px;
    border: solid ButtonText; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
}
/* GPU mode: the tab's body is painted on the canvas (top-bar.js marks it); the ring stays CSS */
html.gpu-paint #game-bar-tab[data-gv-gpu] { background: transparent; border-color: transparent; box-shadow: none; }
html.gpu-paint #game-bar-tab[data-gv-gpu]:focus-visible { box-shadow: var(--k-ring); }

/* Fullscreen: the whole page goes fullscreen (documentElement); the bar and the goo gutter stay, so
   "Exit fullscreen" and Back are always there. Focus game gives the game the most room. */

/* ---- the error panel in the hop overlay (DESIGN §15.6, §15.10; base.css centres .hop-error) ----------
   Munch (grumpy) stands on an ink panel over the membrane; the copy never sits on goo. */
.gv-error { padding-top: 30px; overflow: visible; }
.gv-error__art { position: absolute; left: 50%; bottom: calc(100% - 10px); width: 115px; height: 126px; margin-left: -57.5px;
  pointer-events: none; user-select: none; }
.gv-error .hop-error__title { font: 800 var(--fs-display-state-l, 28px)/var(--lh-display-state-l, 1.02) var(--f-display);
  color: var(--text-hi); --k-lip: var(--tl-display-state-l, 3px); -webkit-text-stroke: max(1.2px, .07em) var(--ink); paint-order: stroke fill;
  text-shadow: 0 var(--k-lip) 0 var(--ink), .5px var(--k-lip) 0 var(--ink), -.5px var(--k-lip) 0 var(--ink); text-wrap: balance; }
.gv-error .hop-error__text { font: 500 16px/1.4 var(--f-body); color: var(--text); text-wrap: balance; }
.gv-error .hop-error__keys { gap: 14px; margin-top: 12px; }
@media (max-width: 759.98px) {
  .gv-error { padding-left: 14px; padding-right: 14px; }
  .gv-error .hop-error__keys { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; width: 100%; gap: 12px; }
  .gv-error .hop-error__keys .k-key { width: 100%; --k-h: 52px; }
  .gv-error .hop-error__keys .k-key--goo { font-size: 22px; }
}
@media (forced-colors: active) { .gv-error__art { display: none; } }