/* ============================================================
   Manna Maze — Neon Scripture Arcade
   Bundled offline fonts: Monoton (neon-tube logo) + Chakra Petch.
   ============================================================ */

@font-face {
  font-family: 'Monoton';
  src: url('../assets/fonts/monoton-400.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('../assets/fonts/chakra-400.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('../assets/fonts/chakra-500.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url('../assets/fonts/chakra-700.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

:root {
  --bg0: #070512;
  --bg1: #0f0a22;
  --cyan: #4fd6c4;          /* jewel teal (legacy var name) */
  --magenta: #ff9ec0;
  --gold: #f2cd6b;
  --gold-soft: #ffe9a8;
  --text: #f3e7c4;
  --dim: #9a8fb0;
  --panel: rgba(16, 12, 34, 0.74);
  --accent: var(--gold);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Visible keyboard focus for every interactive control (WCAG 2.4.7). */
.icon-btn:focus-visible, .big-btn:focus-visible, .mbtn:focus-visible, .seg:focus-visible,
.dbtn:focus-visible, .back-btn:focus-visible, .level-cell:focus-visible,
input:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: var(--bd-r-control,10px);
}

/* Respect a system-level reduce-motion preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
html, body { height: 100%; margin: 0; }
body {
  font-family: 'Chakra Petch', system-ui, sans-serif;
  background:
    radial-gradient(1200px 800px at 50% -10%, #10193a 0%, transparent 60%),
    radial-gradient(900px 700px at 50% 120%, #1a0a2e 0%, transparent 55%),
    var(--bg0);
  color: var(--text);
  overflow: hidden;
  display: grid; place-items: center;
  user-select: none;
}

#app {
  position: relative;
  width: 100%; height: 100%;
  display: grid; place-items: center;
}

/* ---------- the screen panel ---------- */
#board-wrap {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  width: min(96vw, 700px, calc((100dvh - 130px) * 0.9));
  background: linear-gradient(180deg, #070a17, #05060d);
  border: 1px solid rgba(80, 160, 255, 0.18);
  border-radius: var(--bd-r-surface,18px);
  padding: 8px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 30px 80px rgba(0,0,0,0.6),
              0 0 60px rgba(242, 205, 107, 0.09);
}

#game {
  order: 1;
  width: 100%;
  aspect-ratio: 21 / 23;
  display: block;
  border-radius: var(--bd-r-control,10px);
}

.crt {
  position: absolute; inset: 0; border-radius: var(--bd-r-surface,18px);
  pointer-events: none; z-index: 5;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0,0,0,0.5) 100%);
  mix-blend-mode: multiply;
  opacity: 0.55;
}

/* ---------- HUD ---------- */
#hud {
  order: 0;
  width: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 8px; padding: 4px 8px 8px; z-index: 6;
}
#hud.hidden, #verse-bar.hidden, #dpad.hidden { display: none; }
.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; }
.hud-label { font-size: 10px; letter-spacing: 0.18em; color: var(--dim); text-transform: uppercase; }
#hud-score { font-weight: 700; font-size: 22px; color: var(--gold); text-shadow: 0 0 12px rgba(255,210,63,0.4); line-height: 1; }
.hud-mult { font-weight: 700; font-size: 13px; line-height: 1; margin-top: 3px; min-height: 13px; letter-spacing: 0.04em; color: var(--cyan); transition: color .2s, text-shadow .2s; }
.hud-mult.m2 { color: #7be0a0; }
.hud-mult.m3 { color: #ffb45e; text-shadow: 0 0 10px rgba(255,180,94,.5); }
.hud-mult.m4 { color: #ff6ea0; text-shadow: 0 0 12px rgba(255,110,160,.6); }
.hud-center { text-align: center; }
#hud-ref { font-weight: 700; font-size: 14px; letter-spacing: 0.04em; color: var(--cyan); text-shadow: 0 0 10px rgba(25,214,255,0.4); }
#hud-title { font-size: 11px; color: var(--dim); }
.hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.lives { display: flex; gap: 5px; min-height: 14px; }
.life { width: 11px; height: 11px; border-radius: 2px 60% 60% 60%;
  background: radial-gradient(circle at 50% 35%, #fff, var(--gold) 70%);
  box-shadow: 0 0 8px rgba(255,210,63,0.7); transform: rotate(-45deg); }
.no-life { color: var(--dim); }
.hud-buttons { display: flex; gap: 6px; align-items: center; }  /* the 44px sound chip beside the 30px pause on desktop */
.icon-btn {
  display: grid; place-items: center;
  background: none; border: 1px solid rgba(255,255,255,0.16);
  color: var(--text); border-radius: var(--bd-r-control,10px); width: 30px; height: 26px; cursor: pointer; font-size: 13px;
}
.icon-btn:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
.icon-btn svg { width: 15px; height: 15px; }
@media (pointer: coarse) { .icon-btn { width: 44px; height: 44px; } }

/* ---------- verse reveal ---------- */
#verse-bar {
  order: 2; width: 100%; min-height: 46px; padding: 8px 10px 4px; z-index: 6;
  text-align: center; line-height: 1.5;
}
.v-ref { display: inline-block; font-weight: 700; color: var(--accent); margin-right: 6px;
  font-size: 12px; letter-spacing: 0.05em; }
.v-words { font-size: 13px; }
.w { transition: color 0.2s, text-shadow 0.2s; }
.w.on { color: var(--gold-soft); text-shadow: 0 0 10px rgba(255,210,63,0.35); }
.w.off { color: var(--dim); letter-spacing: 1px; }

/* ---------- touch d-pad ---------- */
#dpad {
  order: 3; margin-top: 6px; z-index: 7;
  display: none;
  grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(2, 44px);
  gap: 6px; justify-content: center;
}
@media (pointer: coarse) { #dpad:not(.hidden) { display: grid; } }
.dbtn {
  background: none; border: 1px solid rgba(25,214,255,0.3);
  color: var(--cyan); border-radius: var(--bd-r-control,10px); font-size: 16px; cursor: pointer;
  transition: transform 0.1s, border-color 0.1s;
}
.dbtn:active { border-color: var(--cyan); transform: scale(0.92); }
.dbtn.up { grid-area: 1 / 2; } .dbtn.left { grid-area: 2 / 1; }
.dbtn.right { grid-area: 2 / 3; } .dbtn.down { grid-area: 2 / 2; }

/* ---------- banner (Get Ready) ---------- */
#banner {
  position: absolute; inset: 0; display: none; place-items: center; z-index: 8;
  pointer-events: none;
}
#banner.show { display: grid; }
.ready {
  text-align: center; animation: pop 0.3s ease;
  background: rgba(5, 6, 14, 0.98);
  padding: 22px 36px; border-radius: var(--bd-r-surface,18px);
  border: 1px solid rgba(140, 190, 255, 0.22);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);
}
.ready-eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #c2bad6; }
.ready-title { font-size: 30px; font-weight: 700; margin: 4px 0; }
.ready-ref { font-size: 16px; color: #6fe6d6; text-shadow: 0 0 10px rgba(80, 224, 214, 0.45); }
.ready-go { margin-top: 12px; color: var(--gold); font-size: 14px; letter-spacing: 0.1em; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.3; } }
@keyframes pop { from { transform: scale(0.9); opacity: 0; } }

/* ---------- modal dialogs ---------- */
#modal {
  position: absolute; inset: 0; display: none; place-items: center; z-index: 20;
  background: rgba(3, 5, 12, 0.98); border-radius: var(--bd-r-surface,18px);
}
#modal.show { display: grid; }
#modal-card {
  width: min(88%, 440px); text-align: center; padding: 26px 22px;
  background: linear-gradient(180deg, rgba(23,28,52,0.99), rgba(11,13,26,0.995));
  border: 1px solid rgba(140,190,255,0.28); border-radius: var(--bd-r-surface,18px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(25,214,255,0.1);
  animation: pop 0.25s ease;
}
.m-eyebrow { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #bcb2d2; }
.m-title { font-size: 26px; margin: 6px 0 4px; font-weight: 700; }
/* the one expressive win moment: the gathered verse settles into place
   (~350ms; the global reduced-motion rule above collapses this to instant). */
.m-passage { font-size: 17px; line-height: 1.65; color: #fff1c9; margin: 14px 4px; text-shadow: 0 0 5px rgba(255,210,63,0.10);
  animation: verse-settle 0.35s ease .05s backwards; }
@keyframes verse-settle { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.m-sub { color: #bcc6dd; font-size: 13.5px; margin-bottom: 4px; }
.m-next { margin: 12px auto 0; font-size: 13px; color: var(--gold-soft); border: 1px solid rgba(242,205,107,0.25); border-radius: var(--bd-r-control,10px); padding: 8px 12px; display: inline-block; }
.m-next span { color: var(--cyan); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; margin-right: 6px; }
.modal-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.mbtn {
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  padding: 12px; border-radius: var(--bd-r-control,10px); border: 1px solid rgba(255,255,255,0.16);
  background: none; color: var(--text); transition: 0.15s;
}
.mbtn:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
.mbtn.primary {
  background: linear-gradient(180deg, var(--gold), #f3a712); color: #1a1206; border: none;
  box-shadow: 0 0 24px rgba(255,210,63,0.4);
}

/* ---------- accent text ---------- */
[data-accent] {
  background: linear-gradient(180deg, #fff, var(--gold) 60%, #f3a712);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---------- menu screens ---------- */
#screens { position: fixed; inset: 0; display: grid; place-items: center; z-index: 30; }
#screens.hidden { display: none; }
.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  padding: 28px 20px; overflow-y: auto;
  background:
    radial-gradient(1000px 700px at 50% -5%, rgba(25,60,140,0.4), transparent 60%),
    radial-gradient(800px 600px at 50% 120%, rgba(80,20,120,0.35), transparent 55%),
    var(--bg0);
}
.screen.hidden { display: none; }
#screen-title { justify-content: center; text-align: center; }
.eyebrow { letter-spacing: 0.3em; color: var(--cyan); font-size: 12px; margin: 0 0 6px; }
.logo {
  font-family: 'Monoton', 'Chakra Petch', cursive; font-weight: 400;
  font-size: clamp(40px, 12vw, 76px); margin: 0; line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 14px rgba(255,210,63,0.7), 0 0 40px rgba(255,158,44,0.5), 0 0 80px rgba(255,45,183,0.3);
}
.tag { font-size: 16px; letter-spacing: 0.16em; color: var(--cyan); text-transform: uppercase; margin: 14px 0 0; text-shadow: 0 0 12px rgba(25,214,255,0.5); }
.title-progress { color: var(--dim); font-size: 13px; margin: 8px 0 0; letter-spacing: 0.03em; }
.title-progress span { color: var(--gold-soft); }
.blurb { max-width: 460px; color: #b7c6e6; font-size: 14px; line-height: 1.6; margin: 18px 0 8px; }
/* Retro arcade selection menu: icon + uppercase label + selector caret. */
.menu { display: flex; flex-direction: column; gap: 0; margin: 18px 0 10px; width: min(90vw, 330px); }
/* Retro arcade selection menu: Play is the one solid gold action; every other
   route is a text row under a hairline (GAME-KIT §2 A4 - budget is one solid
   button per screen). */
.big-btn {
  position: relative;
  display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 12px;
  font-family: inherit; font-weight: 600; font-size: 15px; letter-spacing: 0.04em;
  text-transform: none; text-align: left; cursor: pointer; color: var(--text);
  padding: 13px 4px; min-height: 44px; border-radius: 0;
  background: none; border: 0; border-bottom: 1px solid rgba(150,190,255,0.16);
  transition: color .12s, border-color .12s;
}
.big-btn:last-child { border-bottom: 0; }
.big-btn .cur { display: none; }
.big-btn .bi { display: grid; place-items: center; color: var(--cyan); }
.big-btn .bi svg { width: 19px; height: 19px; display: block; }
.big-btn::after {
  content: ''; position: absolute; left: 4px; right: 4px; bottom: -1px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.big-btn:hover, .big-btn:focus-visible {
  outline: none; color: var(--gold-soft); border-bottom-color: transparent;
}
.big-btn:hover::after, .big-btn:focus-visible::after { transform: scaleX(1); }
.big-btn:hover .bi, .big-btn:focus-visible .bi { color: var(--gold); }
.big-btn.primary {
  color: #1a1206; background: linear-gradient(180deg, #ffd861, #f0a814);
  border: none; border-radius: var(--bd-r-control,10px); padding: 14px 16px;
  grid-template-columns: 24px 1fr; box-shadow: 0 0 24px rgba(255,210,63,0.4);
  margin-bottom: 8px;
}
.big-btn.primary::after { display: none; }
.big-btn.primary .bi { color: #1a1206; }
.big-btn.primary:hover { filter: brightness(1.05); }
.foot { color: var(--dim); font-size: 12px; margin-top: 8px; }
/* A fresh player (no passage completed) sees Play + How to play only; the
   rest unlock once a passage is gathered (see ui.js _updateProgress). */
#screen-title.fresh .more-only { display: none; }

.screen-head { width: min(96vw, 620px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 16px; }
.screen-head h2 { margin: 0; font-size: 22px; letter-spacing: 0.04em; }
.back-btn { justify-self: start; font-family: inherit; font-size: 15px; background: none; border: none; color: var(--cyan); cursor: pointer; padding: 11px 8px; min-height: 44px; }

/* ---------- level grid ---------- */
.level-grid { width: min(96vw, 620px); display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.level-cell {
  position: relative; text-align: left; cursor: pointer; font-family: inherit; color: var(--text);
  background: linear-gradient(180deg, rgba(20,28,56,0.8), rgba(10,14,30,0.8));
  border: 1px solid rgba(120,180,255,0.18); border-radius: var(--bd-r-control,10px); padding: 12px 12px 10px;
  display: flex; flex-direction: column; gap: 2px; transition: 0.15s;
}
.level-cell:hover { transform: translateY(-2px); border-color: var(--cyan); box-shadow: 0 0 22px rgba(25,214,255,0.18); }
.lc-num { font-weight: 700; font-size: 12px; color: var(--cyan); }
.lc-ref { font-weight: 700; font-size: 15px; color: var(--gold-soft); }
.lc-title { font-size: 12px; color: #b7c6e6; }
.lc-style { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin-top: 2px; }
.lc-done { position: absolute; top: 10px; right: 10px; font-size: 12px; display: none; }
.level-cell.done .lc-done { display: block; color: #3df58a; }
.level-cell.shake { animation: shake 0.4s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------- settings ---------- */
.settings { width: min(94vw, 460px); display: flex; flex-direction: column; gap: 6px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.set-row label { font-size: 15px; }
.segmented { display: flex; gap: 6px; }
.seg { font-family: inherit; font-size: 13px; cursor: pointer; padding: 8px 12px; border-radius: var(--bd-r-control,10px);
  background: none; border: 1px solid rgba(255,255,255,0.2); color: var(--text); }
.seg.on { background: linear-gradient(180deg, var(--cyan), #0a8fb8); color: #04121a; border: none; box-shadow: 0 0 16px rgba(25,214,255,0.4); }
input[type=range] { width: 180px; accent-color: var(--gold); }
.chk { width: 22px; height: 22px; accent-color: var(--cyan); }
.set-row.chk-row { cursor: pointer; min-height: 44px; }
.set-note { font-size: 12px; color: var(--dim); line-height: 1.6; margin-top: 12px; }

/* ---------- file:// warning ---------- */
#file-warn { position: fixed; inset: 0; display: none; place-items: center; z-index: 50; background: rgba(3,5,12,0.92); padding: 20px; }
#file-warn.show { display: grid; }
.warn-card { max-width: 420px; text-align: center; background: #0c1226; border: 1px solid rgba(120,180,255,0.25); border-radius: var(--bd-r-surface,18px); padding: 26px; }
.warn-card h2 { margin-top: 0; }
.warn-card code { display: block; margin: 14px 0; padding: 10px; background: #05060d; border-radius: var(--bd-r-control,10px); color: var(--cyan); font-size: 14px; }

/* ---------- how-to + verses + extras ---------- */
.link-btn { background: none; border: none; color: var(--cyan); font-family: inherit; font-size: 14px; cursor: pointer; padding: 13px 16px; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.set-hint { color: var(--dim); font-size: 12px; font-weight: 400; }
.lc-best { font-size: 10px; color: var(--gold-soft); margin-top: 4px; letter-spacing: 0.04em; }

.howto { text-align: left; font-size: 15px; line-height: 1.65; color: #eef3ff; margin: 8px 2px 2px; }
.howto p { margin: 8px 0; }
.howto b { color: var(--gold-soft); }
.cast-title { font-size: 13px; color: var(--gold-soft); margin: 12px 0 8px; text-align: center; }
.cast { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.cast-item { display: flex; align-items: center; gap: 9px; text-align: left; }
.cast-ic { flex: 0 0 auto; }
.cast-name { font-size: 12.5px; font-weight: 700; color: var(--text); }
.cast-tell { font-size: 11px; color: var(--dim); line-height: 1.25; }

.verses-intro { max-width: 620px; text-align: center; color: var(--dim); font-size: 13px; line-height: 1.6; margin: -4px auto 14px; }
.verses-list { width: min(96vw, 640px); display: flex; flex-direction: column; gap: 10px; padding-bottom: 24px; }
.verse-card { background: linear-gradient(180deg, rgba(20,28,56,0.7), rgba(10,14,30,0.7)); border: 1px solid rgba(120,180,255,0.14); border-radius: var(--bd-r-surface,18px); padding: 12px 14px; text-align: left; }
.verse-card.done { border-color: rgba(242,205,107,0.3); }
.vv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.vv-ref { font-weight: 700; color: var(--gold-soft); font-size: 15px; }
.vv-style { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.vv-title { font-size: 12px; color: var(--cyan); margin-top: 2px; }
.vv-text { font-size: 15px; line-height: 1.6; color: var(--gold-soft); margin: 8px 0 0; text-shadow: 0 0 12px rgba(255,210,63,0.12); }
.vv-locked { font-size: 13px; color: var(--dim); font-style: italic; margin: 8px 0 0; }

/* ---------- retro title chrome (CRT scanlines + neon flicker) ---------- */
#screen-title::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.13) 0 1px, transparent 1px 3px);
  opacity: 0.4; mix-blend-mode: multiply;
}
@keyframes neon-flicker { 0%,16%,18%,42%,44%,100% { opacity: 1; } 17%,43% { opacity: 0.78; } }
.logo { animation: neon-flicker 8s infinite steps(1, end); }
.eyebrow { font-size: 11px; }
.title-progress { color: var(--gold-soft); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; margin: 10px 0 2px; }
.title-progress span { color: #fff; }

@media (max-width: 420px) {
  #board-wrap { width: 96vw; border-radius: var(--bd-r-surface,18px); }
  .m-passage { font-size: 15px; }
}

/* ── BibleDo house kit v1 ── do not edit in place; edit _MASTER/GAME-KIT.md ── */
:root{
  --bd-ground:#0c1024; --bd-edge:#242b52; --bd-ink:#f4ecd9;
  --bd-muted:#b7bfd6; --bd-faint:#a5aec8; --bd-gold:#ffc46b;
  --bd-r-surface:18px; --bd-r-control:10px;
  --bd-t-utility:150ms; --bd-t-expressive:400ms;
}
/* The game's key art IS its title screen. The painting owns a band across the
   top and fades out into solid ground; the name and the one gold button stand
   on that ground, so nothing a player must read ever sits on a lit part of the
   picture. The band is a real element, not a background layer, so `cover`
   crops honestly and no padding or stacking context has to be fought.
   --bd-art-y picks which part of the painting the band shows;
   --bd-pad is the plate's own padding, which the band bleeds back out over. */
.bd-plate{
  background:var(--bd-ground);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.bd-band{
  flex:0 0 auto; align-self:stretch; order:-1;
  width:auto; height:clamp(124px,28vh,286px);
  margin:calc(-1 * var(--bd-pad,24px)) calc(-1 * var(--bd-pad,24px)) 6px;
  background:var(--bd-art,none) center var(--bd-art-y,50%) / cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 40%,rgba(0,0,0,.34) 78%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 40%,rgba(0,0,0,.34) 78%,transparent 100%);
  overflow:hidden; pointer-events:none;
}
/* Where the screen is one centred column - and ALWAYS on a daylight palette,
   where a bled night band would tear the page in half - the painting is a
   contained plate above the name instead. */
.bd-band.bd-card{
  width:min(430px,86vw); height:clamp(126px,21vh,186px);
  margin:0 auto 14px; border-radius:var(--bd-r-surface);
  -webkit-mask-image:none; mask-image:none;
  box-shadow:0 12px 30px rgba(6,9,22,.32);
}
.bd-band::after{
  content:""; display:block; height:100%;
  box-shadow:inset 0 -1px 0 0 var(--bd-chroma,var(--bd-gold));
  border-radius:inherit; opacity:.30;
}
@media (prefers-reduced-motion:reduce){ .bd-plate{ animation:none!important } }
/* ── the way back ─────────────────────────────────────────────────────────
   One control, in every game. It was seventeen links in ten hand-tuned
   variants, half of them a translucent tint over an unknown page, so its
   contrast differed (and could not be measured) game to game.

   It does NOT take the game's chroma. It is the only element that appears in
   all sixteen, so it is the brand's connective tissue: the same gold
   everywhere is what makes it instantly recognisable as the way out. Opaque,
   so it carries its own ground and no page behind it can change its numbers.
   Measured: the label reads 11.98:1 on its own chip; the chip presents an
   edge of at least 3:1 on every ground it ships on - the border carries it on
   the dark games (3.44 at worst, on Critter Courier's lit dusk) and the fill
   carries it on the paper ones (13.8 at worst).

   The label is a destination, not a dingbat. "✦ Arcade" never said it went
   BACK; an arrow and the word do, and the accessible name stays the full
   "Back to the Arcade". */
.bd-back{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 13px; min-height:38px; border-radius:var(--bd-r-control,10px);
  background:#0c1024; border:1.5px solid #b68e56; color:var(--bd-gold,#ffc46b);
  font:600 13px/1 'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  letter-spacing:.02em; text-decoration:none; white-space:nowrap; cursor:pointer}
.bd-back:hover,.bd-back:focus-visible{border-color:var(--bd-gold,#ffc46b); color:#fff3d8}
.bd-back:focus-visible{outline:2px solid var(--bd-gold,#ffc46b); outline-offset:2px}
.bd-back svg{flex:0 0 auto; display:block}
@media (pointer:coarse){ .bd-back{min-height:44px; padding:11px 14px} }
/* WHERE it sits is layout and differs by game, so it is a modifier rather than
   sixteen private styles. Games that draw into a canvas or a full-bleed stage
   float it; games with a normal column let it sit at the top of the flow. */
.bd-back--fixed{position:fixed; top:12px; left:12px; z-index:2147483000}
.bd-back--flow{align-self:flex-start; margin-bottom:4px}
/* display:flex above would otherwise beat the hidden attribute, and a game
   that hides the way back during play (Beatkeeper, Manna Maze) could not */
.bd-back[hidden]{display:none}
/* ── end BibleDo house kit v1 ── */
/* ── BibleDo sound switch v1 ── copy from _MASTER/GAME-KIT.md §5c, never edit in place ── */
.bd-sound{display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:44px; height:44px; padding:0; margin:0; border-radius:var(--bd-r-control,10px);
  background:#0c1024; border:1.5px solid #b68e56; color:var(--bd-gold,#ffc46b);
  cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation}
.bd-sound:hover,.bd-sound:focus-visible{border-color:var(--bd-gold,#ffc46b); color:#fff3d8}
.bd-sound:focus-visible{outline:2px solid var(--bd-gold,#ffc46b); outline-offset:2px}
.bd-sound svg{display:block; width:20px; height:20px; pointer-events:none}
.bd-sound .bd-snd-off{display:none}
.bd-sound[aria-pressed="false"] .bd-snd-on{display:none}
.bd-sound[aria-pressed="false"] .bd-snd-off{display:block}
.bd-sound--fixed{position:fixed; top:12px; right:12px; z-index:2147483000}
.bd-sound[hidden]{display:none}
/* ── end BibleDo sound switch v1 ── */

/* wire — Manna Maze's title screen is its own key art */
#screen-title{ --bd-art:url(../../shots/art/manna-maze-800.webp); --bd-chroma:#5fe3e0 ; --bd-art-y:50% }
#screen-title .title-glow{ display:none }