/* ============================================================
   BibleDo Snake — styles
   Theme palette is driven by CSS variables that JS swaps per level.
   ============================================================ */

:root {
  --bg-0: #0b1020;
  --bg-1: #131a33;
  --ink: #f4f1e8;
  --ink-dim: rgba(244, 241, 232, 0.62);
  --accent: #ffce5c;
  --accent-2: #6fe3c4;
  --good: #7ee787;
  --bad: #ff7a7a;
  --panel: rgba(10, 14, 28, 0.82);
  --panel-line: rgba(255, 255, 255, 0.12);
  --radius: var(--bd-r-surface, 18px);
  --font: "Georgia", "Iowan Old Style", "Palatino", serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: radial-gradient(120% 120% at 50% 0%, var(--bg-1), var(--bg-0) 70%);
  color: var(--ink);
  font-family: var(--font-ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

#app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
}

/* ---------- Top HUD ---------- */
#hud {
  width: min(92vw, 620px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-ui);
}
#hud .title-wrap { display: flex; flex-direction: column; min-width: 0; }
/* The fixed way-back chip floats over the top-left; the title steps aside for it. */
#hud #bdHome.bd-back--fixed:not([hidden]) ~ .level-title { margin-top: 50px; }
#hud .level-title {
  font-family: var(--font);
  font-size: clamp(15px, 2.6vw, 21px);
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#hud .level-ref { font-size: 12px; color: var(--accent); letter-spacing: 0.1px; text-transform: none; }
#hud .hud-right { display: flex; align-items: center; gap: 10px; }
#hud .stats { text-align: right; line-height: 1.25; white-space: nowrap; }
#hud .score { font-size: clamp(16px, 3vw, 22px); font-weight: 700; font-variant-numeric: tabular-nums; }
#hud .best { font-size: 11px; color: var(--ink-dim); letter-spacing: 0.4px; }
#hud .combo {
  display: inline-block;
  margin-left: 6px;
  color: var(--accent-2);
  font-weight: 700;
  font-size: 13px;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.15s, transform 0.15s;
}
#hud .combo.show { opacity: 1; transform: none; }

/* ---------- Board ---------- */
#board-wrap {
  position: relative;
  border-radius: var(--radius);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255,255,255,0.05);
  background: var(--bg-0);
  overflow: hidden;
  touch-action: none;
}
#game { display: block; border-radius: var(--radius); }

/* ---------- Verse progress bar ---------- */
#verse-bar {
  width: min(92vw, 620px);
  min-height: 30px;
  padding: 8px 14px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--bd-r-surface);
  font-family: var(--font);
  font-size: clamp(13px, 2.5vw, 17px);
  line-height: 1.5;
  text-align: center;
  color: var(--ink-dim);
  letter-spacing: 0.2px;
}
#verse-bar .w { color: var(--ink); transition: color 0.2s; }
/* --ink-dim is ALREADY translucent, so this extra opacity compounded the
   always-on-screen verse bar down to 2.58:1. Dropping the redundant opacity
   reaches 6.89:1 with the colour and the intended look unchanged. */
#verse-bar .blank { color: var(--ink-dim); }
#verse-bar .next {
  color: var(--accent);
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* ---------- Touch controls ---------- */
#dpad {
  display: none;
  width: min(60vw, 230px);
  aspect-ratio: 1;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
  opacity: 0.92;
}
#dpad button {
  border: 1px solid var(--panel-line);
  background: var(--panel);
  color: var(--ink);
  border-radius: var(--bd-r-control);
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
#dpad button:active { background: color-mix(in srgb, var(--accent) 30%, var(--panel)); }
#dpad .up { grid-area: 1 / 2; }
#dpad .left { grid-area: 2 / 1; }
#dpad .right { grid-area: 2 / 3; }
#dpad .down { grid-area: 3 / 2; }
body.touch #dpad { display: grid; }

/* ---------- Overlays ---------- */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center; /* pins to top when content overflows */
  text-align: center;
  gap: 14px;
  padding: 24px;
  background: rgba(8,11,22,0.98);
  z-index: 5;
  overflow-y: auto;             /* tall overlays (win / how-to) scroll */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;          /* body sets touch-action:none; allow scroll here */
  animation: fade 0.28s ease;
}
.overlay.hidden { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.overlay h1 {
  font-family: var(--font);
  font-size: clamp(28px, 7vw, 46px);
  margin: 0;
  letter-spacing: 0.5px;
}
.overlay h2 {
  font-family: var(--font);
  font-size: clamp(20px, 4.5vw, 30px);
  margin: 0;
}
.overlay .sub { color: var(--ink-dim); max-width: 30ch; font-size: 14px; line-height: 1.5; }
.overlay .ref { color: var(--accent); letter-spacing: 0.1px; text-transform: none; font-size: 13px; font-weight: 700; }

.overlay .verse-display {
  font-family: var(--font);
  font-size: clamp(18px, 4vw, 26px);
  line-height: 1.55;
  max-width: 24ch;
  color: var(--ink);
  text-wrap: balance;
}

.btn {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  color: #161616;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, white), var(--accent));
  border: none;
  border-radius: var(--bd-r-control);
  padding: 13px 30px;
  cursor: pointer;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: transform 0.08s ease, box-shadow 0.15s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
/* Every screen gets ONE solid gold button; every other action reads as a
   text link — no border, no fill, no pill — whose hairline extends on hover. */
.btn.ghost {
  background: none;
  color: var(--ink);
  border: none;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s, color 0.15s;
}
.btn.ghost:hover, .btn.ghost:focus-visible { color: var(--accent); text-decoration-color: currentColor; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Difficulty segmented control */
.seg { display: inline-flex; border: 1px solid var(--panel-line); border-radius: var(--bd-r-control); overflow: hidden; }
.seg button {
  font-family: var(--font-ui);
  background: transparent;
  color: var(--ink-dim);
  border: none;
  padding: 9px 16px;
  min-height: 44px;
  cursor: pointer;
  font-size: 14px;
}
.seg button.active { background: var(--accent); color: #161616; font-weight: 700; }

.field {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: min(86vw, 300px); font-size: 14px; color: var(--ink-dim);
}
.field label { text-align: left; }
.field input[type="range"] { accent-color: var(--accent); width: 150px; flex: none; }

/* ---------- Level select ---------- */
#level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
  width: min(90vw, 560px);
  max-height: 56vh;
  overflow-y: auto;
  padding: 4px;
}
.level-card {
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--bd-r-surface);
  padding: 12px 13px;
  cursor: pointer;
  color: var(--ink);
  transition: transform 0.08s, border-color 0.15s, background 0.15s;
  position: relative;
}
.level-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 55%, var(--panel-line)); }
.level-card .lc-ref { font-size: 11px; color: var(--accent); letter-spacing: 0.1px; text-transform: none; }
.level-card .lc-title { font-family: var(--font); font-size: 16px; margin-top: 3px; line-height: 1.2; }
.level-card .lc-best { font-size: 11px; color: var(--ink-dim); margin-top: 8px; font-variant-numeric: tabular-nums; }
.level-card .lc-num {
  position: absolute; top: 10px; right: 12px;
  font-size: 11px; color: var(--ink-dim); font-variant-numeric: tabular-nums;
}
.level-card.done { border-color: color-mix(in srgb, var(--good) 50%, var(--panel-line)); }
.level-card.done .lc-ref::after { content: " ✓"; color: var(--good); }

/* ---------- pause + sound controls (in the HUD, not over the board) ----------
   The sound switch (.bd-sound, GAME-KIT §5c) sits first in #mini-controls and
   carries its own look, so the button rules here are pause-only. */
#mini-controls {
  display: flex; gap: 8px;
}
#mini-controls #btn-pause {
  width: 44px; height: 44px;
  border-radius: var(--bd-r-control);
  border: 1px solid var(--panel-line);
  background: var(--panel);
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#mini-controls #btn-pause:active { background: color-mix(in srgb, var(--accent) 25%, var(--panel)); }

/* "Steer to begin" hint shown until the first input */
.ready {
  position: absolute;
  left: 50%; bottom: 18%;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  text-align: center;
  background: rgba(10, 12, 24, 0.98);
  border: 1px solid var(--panel-line);
  border-radius: var(--bd-r-control);
  padding: 10px 18px;
  animation: readyPulse 1.6s ease-in-out infinite;
}
.ready.hidden { display: none; }
.ready-ref { font-size: 11px; color: var(--accent); letter-spacing: 0.1px; text-transform: none; font-weight: 700; }
.ready-pass { font-family: var(--font); font-size: 21px; color: var(--ink); margin: 1px 0 2px; }
.ready-style { font-size: 12px; color: var(--accent-2); letter-spacing: 0.5px; margin-bottom: 7px; }
.ready-title { font-family: var(--font-ui); font-size: 14px; color: var(--ink-dim); }
.ready-keys { font-size: 12px; color: var(--accent); margin-top: 3px; letter-spacing: 1px; }
@keyframes readyPulse {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) translateY(0); }
  50% { opacity: 1; transform: translateX(-50%) translateY(-3px); }
}

#toast {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translateX(-50%) translateY(12px);
  z-index: 60;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  color: var(--ink);
  padding: 10px 18px;
  border-radius: var(--bd-r-control);
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

#file-warn {
  position: fixed; inset: 0; z-index: 50;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(8,11,22,0.96); padding: 30px; text-align: center;
}
#file-warn .card { max-width: 460px; }
#file-warn code {
  display: inline-block; margin: 10px 0; padding: 10px 14px;
  background: #000; border-radius: var(--bd-r-control); color: var(--accent-2); font-size: 14px;
}

/* ---------- progress + link buttons (start screen) ---------- */
/* Progressive disclosure: brand-new players (no progress) see only Play +
   How to play/Settings; the rest appears once they've learned a verse. */
#ov-start.fresh .more-only { display: none; }
/* The explainer is shown only to brand-new players; returning players already
   know the game, so we drop it for a faster read. */
#ov-start:not(.fresh) .fresh-only { display: none; }
/* Returning players are already branded by the HUD title — hide the giant
   duplicate so the eye lands on Continue; keep a smaller title for newcomers. */
#ov-start:not(.fresh) h1 { display: none; }
#ov-start.fresh h1 { font-size: clamp(26px, 6vw, 34px); }
/* Start actions: one consistent-width column so edges align — Continue/Play
   (gold hero) on top, Choose a passage, then the paired alternate modes. */
.start-actions {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  width: min(92vw, 320px); margin: 2px 0;
}
.start-actions > .btn { width: 100%; }
.start-actions #btn-play { font-size: 17px; padding: 15px 32px; } /* hero weight */
.mode-row { display: flex; gap: 10px; }
.mode-row .btn { flex: 1; font-size: 14px; padding: 12px 10px; white-space: nowrap; }
.btn.small { font-size: 13px; min-height: 44px; padding: 11px 20px; box-shadow: none; }
.link-row { margin-top: 10px; }

/* Pause: Resume is the hero; everything else is quiet and secondary. */
#ov-pause #btn-resume { min-width: 220px; font-size: 17px; padding: 15px 32px; margin-top: 2px; }
.set-label { font-size: 12px; color: var(--ink-dim); letter-spacing: 0.1px; text-transform: none; margin-bottom: -4px; }
/* Section headers in the Settings panel — left-aligned over the control column. */
.set-label.section { margin-top: 8px; align-self: center; width: min(86vw, 300px); text-align: left; color: var(--accent-2); font-weight: 700; }
.progress { font-size: 14px; color: var(--accent-2); letter-spacing: 0.3px; margin: -2px 0 2px; }
.link-row { gap: 6px; align-items: center; }
.linkbtn {
  background: none; border: none; color: var(--ink-dim);
  font-family: var(--font-ui); font-size: 14px; cursor: pointer;
  text-decoration: none; text-underline-offset: 3px;
  min-height: 44px; display: inline-flex; align-items: center; padding: 8px 8px;
}
.linkbtn:hover { color: var(--ink); text-decoration: underline; }
.link-row .dot { color: var(--ink-dim); }

/* Visible keyboard focus for all interactive controls */
.btn:focus-visible,
.linkbtn:focus-visible,
.seg button:focus-visible,
#mini-controls #btn-pause:focus-visible,
#dpad button:focus-visible,
.level-card:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--bd-r-control);
  color: var(--ink);
}

/* ---------- how-to list ---------- */
.howto {
  text-align: left; max-width: 34ch; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 14px; line-height: 1.45; color: var(--ink-dim);
}
.howto li { padding-left: 22px; position: relative; }
.howto li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }
.howto b { color: var(--ink); font-weight: 600; }

/* ---------- win stars ---------- */
.stars { display: flex; gap: 8px; font-size: 30px; line-height: 1; }
.stars span { color: rgba(255,255,255,0.34); transition: transform 0.2s; }
.stars span.on { color: var(--accent); text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 70%, transparent); animation: starPop 0.4s ease both; }
.stars span.on:nth-child(2) { animation-delay: 0.12s; }
.stars span.on:nth-child(3) { animation-delay: 0.24s; }
@keyframes starPop { 0% { transform: scale(0.2) rotate(-30deg); opacity: 0; } 70% { transform: scale(1.25); } 100% { transform: scale(1); opacity: 1; } }

/* stars on level cards */
.level-card .lc-stars { color: var(--accent); font-size: 13px; letter-spacing: 2px; margin-top: 6px; }
.level-card .lc-stars .off { color: rgba(255,255,255,0.34); }
.verse-card .vc-stars { color: var(--accent); letter-spacing: 1px; }
.verse-card .vc-stars .off { color: rgba(255,255,255,0.46); }

/* ---------- verses-learned gallery ---------- */
#verses-list {
  display: flex; flex-direction: column; gap: 10px;
  width: min(90vw, 560px); max-height: 56vh; overflow-y: auto; padding: 4px;
  text-align: left;
}
.verse-card {
  background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: var(--bd-r-surface); padding: 12px 14px;
}
.verse-card .vc-ref { font-size: 11px; color: var(--accent); letter-spacing: 0.1px; text-transform: none; font-weight: 700; }
.verse-card .vc-text { font-family: var(--font); font-size: 15px; line-height: 1.45; margin-top: 5px; color: var(--ink); }
.verses-empty { color: var(--ink-dim); max-width: 30ch; font-size: 14px; line-height: 1.5; }

/* real pill toggle switch (reduce-motion / speech options) */
.field input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: none;
  width: 46px; height: 26px; border-radius: var(--bd-r-control);
  background: #858a8c; border: 1px solid var(--panel-line);
  cursor: pointer; transition: background 0.15s;
}
.field input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform 0.16s ease;
}
.field input[type="checkbox"]:checked { background: var(--accent); }
.field input[type="checkbox"]:checked::after { transform: translateX(20px); }
.field input[type="checkbox"]:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 480px) {
  #app { justify-content: flex-start; padding-top: 8px; }
  /* Cover the whole viewport on phones so the CTA sits where the thumb is,
     not floating in the middle of the small square board. */
  .overlay { position: fixed; }
}

/* Hide the idle d-pad whenever a menu/overlay is up (swipe still steers). */
body.touch.menu #dpad { display: none; }

/* In touch landscape there's little vertical room — rely on swipe and
   hide the d-pad so the verse bar / board never get clipped. */
@media (orientation: landscape) and (pointer: coarse) {
  body.touch #dpad { display: none; }
}

/* With the d-pad hidden in touch landscape, keep a small always-on
   reminder that swipe still steers (the "ready" hint only shows before
   the first move). */
#swipe-hint { display: none; }
@media (orientation: landscape) and (pointer: coarse) {
  body.touch:not(.menu) #swipe-hint {
    display: block;
    position: absolute;
    right: 10px; bottom: 8px;
    z-index: 3;
    pointer-events: none;
    font-size: 14px;
    color: var(--ink-dim);
    background: rgba(10, 12, 24, 0.98);
    padding: 4px 10px;
    border-radius: var(--bd-r-control);
  }
}

/* Honor reduced-motion — both the OS preference and the in-app toggle
   (html.reduce-motion, set from the Reduce motion switch). Canvas juice
   is gated separately via effects.reduced. */
@media (prefers-reduced-motion: reduce) {
  .ready, .overlay, .stars span.on, .btn { animation: none !important; }
  * { scroll-behavior: auto !important; }
}
html.reduce-motion .ready,
html.reduce-motion .overlay,
html.reduce-motion .stars span.on,
html.reduce-motion .btn { animation: none !important; }

/* Reset-progress confirm (replaces window.confirm; sits above the
   settings overlay it's opened from). */
#reset-confirm {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 11, 22, 0.82);
  padding: 24px;
}
#reset-confirm.hidden { display: none; }
#reset-confirm .card {
  background: var(--panel); border: 1px solid var(--panel-line);
  border-radius: var(--bd-r-surface); padding: 20px; max-width: 32ch; text-align: center;
}
#reset-confirm .card h2 { margin: 0 0 8px; }
#reset-confirm .card p { margin: 0 0 16px; color: var(--ink-dim); font-size: 14px; line-height: 1.5; }
#reset-confirm .btn-row { justify-content: center; }

/* ── 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 — Snake's start screen is its own key art */
#ov-start{ --bd-art:url(../../shots/art/snake-800.webp); --bd-chroma:#d7e04a ; --bd-art-y:30% }