/**
 * bwb-game-ui.css — makes the games feel like games.
 *
 * Nothing here changes a game's own look. It fixes the three things that made
 * every game feel like a web page with a quiz embedded in it:
 *
 *   1. Dead space. The play area sat in the middle of a tall document with
 *      150-250px of empty black above and below it.
 *   2. Site furniture during play. A breadcrumb strip, a newsletter button, a
 *      chat bubble and a floating rank card all competed with the question.
 *   3. No reaction. Answering right or wrong looked identical for a moment,
 *      which is what makes a quiz feel flat.
 *
 * Everything is scoped to html[data-bwb-playing], set by bwb-game-ui.js only
 * while a round is actually running, so lobbies and results pages are
 * untouched and the site chrome comes straight back when the round ends.
 */

/* ── 1. Reclaim the screen while a round is running ────────────────────── */

html[data-bwb-playing] body {
  /* The game owns the viewport; nothing should scroll it sideways. */
  overflow-x: hidden;
}

/* The site furniture, by the selectors the widgets' own scripts actually use.
   Looked up in a live page rather than guessed: the breadcrumb is a sticky
   nav.bwb-crumbs, the chat bubble is #bwb-bite-widget, and the newsletter is
   a fab plus a permanently-present (opacity:0) overlay. */
html[data-bwb-playing] nav.bwb-crumbs,
html[data-bwb-playing] #bwb-bite-widget,
html[data-bwb-playing] #bwbSubFab,
html[data-bwb-playing] #bwbSubOverlay,
html[data-bwb-playing] #bwb-hud,
html[data-bwb-playing] #bwb-panel,
html[data-bwb-playing] [data-bwb-game-hide] {
  display: none !important;
}

/* The site header shrinks rather than disappearing - players still need the
   way out, and removing it entirely made the page jump. */
html[data-bwb-playing] [data-bwb-game-shrink] {
  transform: scale(.88);
  transform-origin: left center;
  opacity: .55;
  transition: opacity .18s ease, transform .18s ease;
}
html[data-bwb-playing] [data-bwb-game-shrink]:hover {
  opacity: 1;
  transform: scale(1);
}

/* The active screen fills what is left and centres its contents.
 *
 * The children must NOT stretch. Quiz Race's .game box was being stretched to
 * the full 851px, and its question area absorbed every spare pixel - which is
 * exactly the 280px of dead black below the answers. Pinning children to their
 * natural height and centring the stack puts that space back where it belongs,
 * half above and half below.
 */
html[data-bwb-playing] .screen.on {
  min-height: calc(100vh - var(--bwb-chrome, 120px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 2vh, 22px);
  padding-top: clamp(8px, 1.5vh, 18px);
  padding-bottom: clamp(8px, 1.5vh, 18px);
}
/* The board hugs its content instead of being stretched to the viewport, so
   the leftover space ends up evenly above and below it rather than pooled
   under the answers. Games set this min-height themselves (Quiz Race uses
   calc(100vh - 49px)); it is only relaxed while a round is running. */
html[data-bwb-playing] .screen.on > * {
  flex: 0 0 auto;
  min-height: 0;
}

/* Boards genuinely taller than the viewport (memory match, escape room) scroll
   from the top instead of being centred into a clipped overflow. */
html[data-bwb-playing] .screen.on[data-bwb-tall] {
  justify-content: flex-start;
}

/* ── 2. Reaction ───────────────────────────────────────────────────────── */

@keyframes bwbFlashOk   { 0% { opacity: 0 } 18% { opacity: .5 } 100% { opacity: 0 } }
@keyframes bwbFlashBad  { 0% { opacity: 0 } 18% { opacity: .5 } 100% { opacity: 0 } }
@keyframes bwbShake {
  0%, 100% { transform: translateX(0) }
  15% { transform: translateX(-9px) }
  30% { transform: translateX(8px) }
  45% { transform: translateX(-6px) }
  60% { transform: translateX(5px) }
  80% { transform: translateX(-2px) }
}

#bwb-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
}
#bwb-flash.ok {
  background: radial-gradient(ellipse at center, rgba(74,222,128,.34), transparent 68%);
  animation: bwbFlashOk .5s ease-out;
}
#bwb-flash.bad {
  background: radial-gradient(ellipse at center, rgba(248,113,113,.34), transparent 68%);
  animation: bwbFlashBad .5s ease-out;
}
.bwb-shake { animation: bwbShake .42s cubic-bezier(.36,.07,.19,.97); }

/* Points flying off the answer that earned them. */
@keyframes bwbFloatUp {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(.7) }
  22%  { opacity: 1; transform: translate(-50%, -18px) scale(1.12) }
  100% { opacity: 0; transform: translate(-50%, -74px) scale(1) }
}
.bwb-pop {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  font-family: 'Epilogue', system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  text-shadow: 0 2px 14px rgba(0,0,0,.65);
  animation: bwbFloatUp 1s ease-out forwards;
  white-space: nowrap;
}

/* ── 3. Respect the people who need it ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  #bwb-flash, .bwb-pop { animation-duration: .01ms !important; }
  .bwb-shake { animation: none !important; }
}

/* ── 4. Phones ─────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  html[data-bwb-playing] .screen.on {
    min-height: calc(100vh - var(--bwb-chrome, 84px));
    gap: 10px;
  }
  .bwb-pop { font-size: 1.2rem; }
}