/* ==========================================================================
   Games page: hand-authored, not Nicepage output.
   Same purple/gold church palette as the rest of the site, dialled up for a
   game: a dark panel, gold highlights, motion on every correct answer.
   Body copy stays at 1.25rem (20px) and up for readability.

   Shared vs. Games-only: mbc-site.css supplies the header, footer, reading
   tools, page hero, bands, and .mbc-wrap; this file only styles the game
   itself and the page's own dark mode. Six color tokens below are aliased
   to the matching --mbc-* token so there is one source of truth for the
   value; only the game's own extra tones (purple-deep, purple-night, alarm,
   rule) are defined here. The game's buttons use .mbc-gbtn, not .mbc-btn,
   so this file never redefines the shared button class. See CLAUDE.md.
   ========================================================================== */

/* On :root rather than .mbc-games so the site footer, which sits outside
   <main>, can use the same palette. */

:root {
  --purple: var(--mbc-purple);
  --purple-deep: #3f0d86;
  --purple-night: #21093f;
  --gold: var(--mbc-gold);
  --gold-bright: var(--mbc-gold-bright);
  --ink: var(--mbc-ink);
  --ink-soft: var(--mbc-ink-soft);
  --cream: var(--mbc-cream);
  --alarm: #ff5a5f;
  --rule: rgba(92, 22, 189, 0.14);

  /* The game's labels, buttons and book cards use the site's own sans at
     bold weight: only two font families load site-wide. */
  --font-display: var(--mbc-font-body);
  --font-body: var(--mbc-font-body);
}

.mbc-games {
  background-color: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1.65;
  display: block;
}

.mbc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* .mbc-eyebrow is not redefined here: the page hero and the arena's "Game
   One" label both use the shared mbc-site.css component now, so the gold
   label style matches the rest of the site instead of the old purple one. */

/* The page's own hero (purple gradient, "Games" title) is gone: the page
   now uses the shared .mbc-hero.mbc-pagehero component in Games.html, with
   the scripture-reading photo. Nothing here styles .mbc-hero any more. */

/* ==========================================================================
   Arena: the intro copy above the game panel
   ========================================================================== */

/* Background and gutter/padding for .mbc-arena come from the shared
   .mbc-band class on the section in Games.html; .mbc-games supplies the
   cream/black background, so nothing is set here. */

/* ---------- dark mode switch ---------- */

.mbc-themebar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}

.mbc-theme {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border: 2px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink-soft);
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.mbc-theme:hover {
  color: var(--purple);
  border-color: var(--purple);
}

.mbc-theme:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
}

.mbc-theme__switch {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: rgba(92, 22, 189, 0.2);
  transition: background-color 0.2s ease;
}

.mbc-theme__knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--purple);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.mbc-theme[aria-pressed="true"] .mbc-theme__switch {
  background: rgba(246, 196, 69, 0.28);
}

.mbc-theme[aria-pressed="true"] .mbc-theme__knob {
  transform: translateX(20px);
  background: var(--gold-bright);
}

.mbc-arena__head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 14px;
}

.mbc-arena__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 4px;
  color: var(--ink);
}

.mbc-arena__sub {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--purple);
}

/* ==========================================================================
   The game panel
   ========================================================================== */

.mbc-game {
  position: relative;
  background:
    radial-gradient(circle at 50% 0%, rgba(146, 84, 232, 0.4), transparent 62%),
    linear-gradient(165deg, var(--purple-night) 0%, #2f0b5e 55%, var(--purple-deep) 100%);
  border: 3px solid rgba(246, 196, 69, 0.35);
  border-radius: 26px;
  padding: 20px 26px 30px;
  box-shadow: 0 26px 60px rgba(33, 9, 63, 0.35);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.mbc-game.is-right {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 6px rgba(246, 196, 69, 0.22), 0 26px 60px rgba(33, 9, 63, 0.35);
}

.mbc-game.is-wrong {
  border-color: var(--alarm);
  box-shadow: 0 0 0 6px rgba(255, 90, 95, 0.22), 0 26px 60px rgba(33, 9, 63, 0.35);
  animation: mbc-shake 0.42s ease;
}

@keyframes mbc-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-9px); }
  40%      { transform: translateX(9px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}

/* ---------- scoreboard ---------- */

.mbc-hud {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 16px;
}

.mbc-hud__stat {
  flex: 0 1 190px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(246, 196, 69, 0.28);
  border-radius: 14px;
  padding: 10px 14px;
  text-align: center;
}

.mbc-hud__label {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.mbc-hud__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--gold-bright);
}

.mbc-hud__value.is-pop {
  animation: mbc-pop 0.4s cubic-bezier(0.34, 1.7, 0.5, 1);
}

@keyframes mbc-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ---------- timer ---------- */

.mbc-timer {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  transition: opacity 0.25s ease;
}

.mbc-timer.is-idle {
  opacity: 0.3;
}

.mbc-timer__track {
  flex: 1 1 auto;
  height: 18px;
  background: rgba(0, 0, 0, 0.32);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
}

.mbc-timer__bar {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-bright) 0%, #ffdd6b 100%);
  box-shadow: 0 0 14px rgba(246, 196, 69, 0.55);
  /* The script steps the width every 50ms; this smooths the gaps. */
  transition: width 0.09s linear, background-color 0.2s ease;
}

.mbc-timer.is-low .mbc-timer__bar {
  background: linear-gradient(90deg, #d63a3f 0%, var(--alarm) 100%);
  box-shadow: 0 0 14px rgba(255, 90, 95, 0.6);
}

.mbc-timer__clock {
  flex: 0 0 auto;
  min-width: 4.2em;
  margin: 0;
  text-align: right;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--gold-bright);
}

.mbc-timer.is-low .mbc-timer__clock {
  color: var(--alarm);
  animation: mbc-blink 0.7s steps(2, end) infinite;
}

@keyframes mbc-blink {
  50% { opacity: 0.35; }
}

/* ==========================================================================
   Screens
   ========================================================================== */

.mbc-screen {
  text-align: center;
  color: #fff;
}

.mbc-screen[hidden] {
  display: none;
}

.mbc-screen__flag {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 8px;
}

.mbc-screen__flag--stop {
  color: var(--alarm);
}

.mbc-screen__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  margin: 0 0 20px;
  color: #fff;
}

.mbc-screen__foot {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 16px 0 0;
}

.mbc-rules {
  max-width: 560px;
  margin: 0 auto 26px;
  padding: 0;
  list-style: none;
  counter-reset: rule;
  text-align: left;
}

.mbc-rules li {
  counter-increment: rule;
  position: relative;
  padding: 10px 0 10px 52px;
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mbc-rules li:last-child {
  border-bottom: 0;
}

.mbc-rules li::before {
  content: counter(rule);
  position: absolute;
  left: 0;
  top: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--purple-night);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 34px;
  text-align: center;
}

.mbc-rules strong {
  color: var(--gold-bright);
}

/* ==========================================================================
   Buttons: the game's own gold pill buttons (Start Game, Lock It In,
   Clear, Play Again). Named .mbc-gbtn, not .mbc-btn, so this never
   collides with the shared header/footer/hero button style loaded from
   mbc-site.css on this same page.
   ========================================================================== */

.mbc-gbtn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 16px 40px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.14s ease, box-shadow 0.2s ease,
              background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.mbc-gbtn--go {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  color: var(--purple-night);
  box-shadow: 0 10px 26px rgba(224, 168, 0, 0.35);
}

.mbc-gbtn--go:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(224, 168, 0, 0.45);
}

.mbc-gbtn--ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.35);
  padding: 16px 30px;
}

.mbc-gbtn--ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.mbc-gbtn:active:not(:disabled) {
  transform: translateY(1px);
}

.mbc-gbtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mbc-gbtn:focus-visible,
.mbc-book__btn:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
}

/* ==========================================================================
   Play screen: the board of books
   ========================================================================== */

.mbc-prompt {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 22px;
}

.mbc-board {
  list-style: none;
  margin: 0 auto 22px;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* Few cards should be big cards, not stretched-out slabs. */
.mbc-board[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 600px;
}

.mbc-board[data-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 840px;
}

.mbc-board[data-count="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mbc-book {
  display: block;
}

.mbc-book__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 108px;
  padding: 18px 14px;
  background: var(--cream);
  border: 3px solid transparent;
  border-radius: 18px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  transition: transform 0.14s ease, box-shadow 0.2s ease,
              background-color 0.2s ease, border-color 0.2s ease;
}

.mbc-book__btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.34);
}

.mbc-book__btn:active {
  transform: translateY(0);
}

.mbc-book__name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--purple-deep);
  overflow-wrap: break-word;
  hyphens: none;
}

.mbc-book__btn.is-picked {
  background: linear-gradient(150deg, var(--gold-bright) 0%, var(--gold) 100%);
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(246, 196, 69, 0.3), 0 14px 26px rgba(0, 0, 0, 0.34);
}

.mbc-book__btn.is-picked .mbc-book__name {
  color: var(--purple-night);
}

.mbc-book__badge {
  position: absolute;
  top: -12px;
  left: -12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  border: 3px solid var(--cream);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 36px;
  text-align: center;
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.34, 1.7, 0.5, 1);
}

.mbc-book__btn.is-picked .mbc-book__badge {
  transform: scale(1);
}

.mbc-chosen {
  font-size: 1.15rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 22px;
  min-height: 1.7em;
}

.mbc-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.mbc-hint {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 18px 0 0;
}

.mbc-hint kbd {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: #fff;
}

/* ==========================================================================
   Game over screen
   ========================================================================== */

.mbc-reason {
  font-size: 1.35rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 18px;
}

.mbc-final {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 26px;
}

.mbc-final__num {
  display: inline-block;
  min-width: 1.6em;
  margin-left: 8px;
  font-size: clamp(2.6rem, 7vw, 4rem);
  font-weight: 800;
  line-height: 1;
  color: var(--gold-bright);
  vertical-align: -0.14em;
}

.mbc-answerbox {
  max-width: 720px;
  margin: 0 auto 28px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(246, 196, 69, 0.28);
  border-radius: 16px;
}

.mbc-answerbox__label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 14px;
}

.mbc-answer {
  list-style: none;
  counter-reset: answer;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.mbc-answer__item {
  counter-increment: answer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  background: var(--cream);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--purple-deep);
}

.mbc-answer__item::before {
  content: counter(answer);
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  font-size: 1rem;
  line-height: 30px;
  text-align: center;
}

/* ==========================================================================
   Confetti: a burst of gold on every correct answer
   ========================================================================== */

.mbc-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.mbc-confetti__bit {
  position: absolute;
  top: -18px;
  width: 11px;
  height: 16px;
  border-radius: 2px;
  background: var(--gold-bright);
  opacity: 0;
  animation: mbc-fall 1.25s ease-in forwards;
}

.mbc-confetti__bit.is-purple {
  background: #9d5ce8;
}

@keyframes mbc-fall {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift, 0), 460px, 0) rotate(var(--spin, 360deg));
  }
}

/* ==========================================================================
   More games coming
   ========================================================================== */

.mbc-more {
  padding: 56px 0 64px;
  text-align: center;
}

.mbc-more__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--ink);
}

.mbc-more__text {
  font-size: 1.25rem;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto;
}

/* ==========================================================================
   Back to top: floating button. Games-only; the shared footer (below) has
   no back-to-top link of its own.
   ========================================================================== */

.mbc-totop {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(33, 9, 63, 0.42);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease,
              background-color 0.2s ease;
}

.mbc-totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mbc-totop:hover {
  background: var(--purple-deep);
}

.mbc-totop__arrow {
  font-size: 1.7rem;
  line-height: 1;
}

/* The old .mbc-footer / .mbc-footer__top / .mbc-footer__note mini footer is
   gone: the page now carries the real shared footer from mbc-site.css
   (see Games.html), which already covers this section's own selector,
   so nothing here overrides it. */

/* ==========================================================================
   Dark mode
   Only the cream band around the game changes: it goes black and its text
   goes gold. The hero and the game panel are already dark by design, and the
   shared site footer stays its usual plum, so both are left alone.
   The class lands on <html> from a script in <head>, before first paint.
   ========================================================================== */

.mbc-dark .mbc-games {
  background-color: #000;
  color: var(--gold-bright);
}

.mbc-dark .mbc-eyebrow,
.mbc-dark .mbc-arena__title,
.mbc-dark .mbc-arena__sub,
.mbc-dark .mbc-more__title,
.mbc-dark .mbc-more__text {
  color: var(--gold-bright);
}

/* The panel's drop shadow is invisible on black, so give it a thin gold
   edge instead to keep it from bleeding into the background. */
.mbc-dark .mbc-game {
  box-shadow: 0 0 0 1px rgba(246, 196, 69, 0.14), 0 20px 50px rgba(0, 0, 0, 0.75);
}

.mbc-dark .mbc-theme {
  color: var(--gold-bright);
  border-color: rgba(246, 196, 69, 0.42);
}

.mbc-dark .mbc-theme:hover {
  color: #fff;
  border-color: var(--gold-bright);
  background: rgba(246, 196, 69, 0.12);
}

.mbc-dark .mbc-theme:focus-visible {
  outline-color: var(--gold-bright);
}

/* ==========================================================================
   Responsive: desktop first, matching the site's breakpoint order
   ========================================================================== */

@media (max-width: 991px) {
  .mbc-game {
    padding: 22px 18px 28px;
    border-radius: 20px;
  }

  .mbc-board[data-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .mbc-arena__head {
    margin-bottom: 14px;
  }

  /* Three across is unreadable on a phone: two, always. */
  .mbc-board,
  .mbc-board[data-count="2"],
  .mbc-board[data-count="3"],
  .mbc-board[data-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    gap: 12px;
  }

  .mbc-book__btn {
    min-height: 92px;
    padding: 14px 10px;
  }

  .mbc-hud {
    gap: 8px;
  }

  .mbc-hud__stat {
    flex: 1 1 0;
    padding: 8px 6px;
  }

  .mbc-hud__label {
    /* Never below the 1.125rem label floor; the label may wrap instead. */
    font-size: 1.125rem;
    letter-spacing: 0.02em;
  }

  /* Both buttons full width and stacked, so nothing is a small target. */
  .mbc-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .mbc-gbtn {
    width: 100%;
    padding: 16px 20px;
  }

  /* No keyboard to press 1-9 on. */
  .mbc-hint {
    display: none;
  }

  .mbc-totop {
    right: 14px;
    bottom: 14px;
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 575px) {
  .mbc-hud__stat--wide .mbc-hud__label {
    /* "Books this round" wraps to two lines in a narrow cell rather than
       shrinking below the 1.125rem label floor. */
    font-size: 1.125rem;
  }

  .mbc-timer__clock {
    font-size: 1.25rem;
    min-width: 3.6em;
  }

  .mbc-rules li {
    padding-left: 46px;
    font-size: 1.15rem;
  }

  .mbc-answer__item {
    font-size: 1.05rem;
  }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .mbc-game.is-wrong,
  .mbc-hud__value.is-pop,
  .mbc-timer.is-low .mbc-timer__clock,
  .mbc-confetti__bit {
    animation: none;
  }

  .mbc-gbtn,
  .mbc-book__btn,
  .mbc-book__badge,
  .mbc-theme__knob,
  .mbc-totop {
    transition: none;
  }

  .mbc-gbtn--go:hover:not(:disabled),
  .mbc-book__btn:hover {
    transform: none;
  }
}