/* JoinoFoundation — oneScreen primitives.

   Provides a stable three-row layout (header / body / footer) that fits
   on a phone in portrait without scrolling. Games opt-in by:
     1. Adding class `body.scene-locked` (locks page scroll).
     2. Wrapping their active-phase root in `.scene--fixed`.
     3. Using `.scene__header`, `.scene__body`, `.scene__footer` rows.

   We intentionally keep selectors low-specificity so per-game CSS
   stays in charge. These primitives are additive — a game that doesn't
   apply the body class is unaffected.

   Tested viewports: 360×740, 390×844, 414×896. */

body.scene-locked {
  overflow: hidden;
  height: 100dvh;
  height: 100svh;
  /* iOS Safari sometimes lets a single rubber-band escape; pin the body
     for the duration of the active scene. */
  position: fixed;
  inset: 0;
  width: 100%;
}

.scene--fixed {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 100%;
  /* 100dvh on supported browsers, with a 100svh fallback for iOS. */
  height: 100svh;
  height: 100dvh;
  max-height: 100svh;
  max-height: 100dvh;
  overflow: hidden;
  box-sizing: border-box;
}

.scene__header,
.scene__footer {
  flex: 0 0 auto;
  min-height: 0;
}

.scene__body {
  min-height: 0;
  /* Body row owns the only allowed in-scene scroll (e.g. a long player
     list within a card). Games that want true no-scroll override this
     with `overflow: hidden` in their own CSS. */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Helper for elements that should sit on the bottom of the screen on a
   phone but not push the rest of the page. Use INSIDE .scene__footer. */
.scene__cta-row {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* When games render a "Played again?" finished screen we want the
   buttons large enough to tap, and exiting always visible. */
.scene-finished-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  align-items: stretch;
}

@media (min-width: 480px) {
  .scene-finished-cta {
    flex-direction: row;
    justify-content: center;
  }
}