/* styles.css — inky-woodcut UI: bone panels, heavy ink borders, hard offset
   shadows (like a pressed print), flat fills. Display type Fredoka; scripture
   in Patrick Hand. Self-hosted OFL fonts (assets/fonts/fonts.css). */

:root {
  --ink: #17150f;
  --bone: #efe7d3;
  --paper: #f3ecda;
  --paperDk: #e2d6b8;
  --gold: #e7b23c;
  --teal: #2f7d80; --teal-ink: #276668;
  --tealDk: #1d4f55;
  --font-display: 'Fredoka', system-ui, -apple-system, sans-serif;
  --font-hand: 'Patrick Hand', 'Comic Sans MS', cursive;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: var(--tealDk);
  color: var(--ink);
  font-family: var(--font-display);
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
#game { position: fixed; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
.hidden { display: none !important; }

/* ── HUD ─────────────────────────────────────────────────────────────────── */
#hud { position: fixed; top: 0; right: 0; padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 0 0; display: flex; gap: 8px; z-index: 6; }
/* The sound switch (#hudSound, GAME-KIT 5c) is its own fixed chip so it floats above the pause and
   settings overlays (z-index 10) and a parent can mute from either. It keeps the top-right corner the
   HUD always gave it; #hud leaves that 44px slot + the 8px gap clear. */
#hud { padding-right: calc(max(10px, env(safe-area-inset-right)) + 52px); }
#hudSound { top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); }
.iconbtn {
  width: 44px; height: 44px; border: 3px solid var(--ink); border-radius: var(--bd-r-control,10px);
  background: var(--bone); color: var(--ink); font-size: 16px; font-family: var(--font-display);
  cursor: pointer; box-shadow: 3px 3px 0 rgba(23,21,15,.35); line-height: 1;
}
.iconbtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(23,21,15,.35); }

/* ── Verse banner ────────────────────────────────────────────────────────── */
#banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; pointer-events: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(23,21,15,.42), rgba(23,21,15,0));
}
#banner-title { font-size: 13px; letter-spacing: .04em; color: var(--bone); opacity: .92; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
#banner-verse {
  font-family: var(--font-hand); font-size: clamp(18px, 4.4vw, 26px); line-height: 1.25;
  color: #fff8ec; text-shadow: 0 2px 3px rgba(0,0,0,.6); margin-top: 2px; max-width: 760px;
}
#banner .bar { margin-top: 8px; height: 6px; background: #2b2820; border-radius: 4px; overflow: hidden; max-width: 760px; }
#banner-fill { height: 100%; width: 0%; background: var(--gold); transition: width .12s linear; }

/* ── Overlays + panels ───────────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(10,20,25,.55);
}
.panel {
  background: var(--paper); border: 4px solid var(--ink); border-radius: var(--bd-r-surface);
  box-shadow: 9px 9px 0 rgba(23,21,15,.30);
  padding: 26px 24px; width: 100%; max-width: 520px; text-align: center;
  max-height: 92vh; overflow-y: auto;
}
.kicker { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 600; color: var(--teal-ink); }
.kicker.brand { text-transform: none; }
.panel h1 { font-size: clamp(34px, 8vw, 52px); margin: 6px 0 2px; font-weight: 700; letter-spacing: .01em; }
.panel h2 { font-size: clamp(24px, 6vw, 34px); margin: 6px 0 6px; font-weight: 700; }
.subtitle { margin: 2px 0 8px; font-size: 16px; opacity: .85; }
.muted { opacity: .7; font-size: 14px; margin: 6px 0; }
.ref { font-style: italic; opacity: .7; font-size: 14px; margin: 2px 0 8px; }
.credit { font-size: 11px; opacity: .55; margin-top: 14px; }
.hint { margin-top: 10px; font-size: 14px; color: var(--teal-ink); font-weight: 600; }

.verse { font-family: var(--font-hand); font-size: clamp(19px, 4.6vw, 24px); line-height: 1.35; margin: 8px 0 14px; }
.passage { font-family: var(--font-hand); font-size: clamp(17px, 4.2vw, 21px); line-height: 1.4; text-align: left; margin: 8px 0 12px; }
.passage .v { display: inline; }
.passage .ref, .verse .ref { display: block; font-style: italic; opacity: .65; font-size: 14px; margin-top: 8px; text-align: right; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  border: 3px solid var(--ink); border-radius: var(--bd-r-control,10px); background: var(--bone); color: var(--ink);
  padding: 11px 22px; margin: 6px 5px; cursor: pointer; box-shadow: 4px 4px 0 rgba(23,21,15,.30);
}
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(23,21,15,.30); }
.btn.primary { background: var(--gold); }
.btn.big { font-size: 21px; padding: 14px 40px; }
/* the one solid (gold) button per screen is `.btn.primary`; every other action
   here is a text link, not a second bordered pill (GAME-KIT §2, A4) */
.btn.ghost {
  background: none; border: none; box-shadow: none; border-radius: 0;
  padding: 11px 6px; color: var(--teal-ink); font-weight: 600;
  border-bottom: 2px solid transparent;
}
.btn.ghost:hover, .btn.ghost:focus-visible { border-bottom-color: var(--gold); }
.btn.ghost:active { transform: none; box-shadow: none; }
.row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }

/* ── Virtue medals ───────────────────────────────────────────────────────── */
.medal-row { margin: 6px 0 4px; min-height: 26px; }
.medal { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 16px; padding: 4px 14px; border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 rgba(23,21,15,.25); }
.medal.calm { background: #cfe6e6; }
.medal.steady { background: var(--bone); }
.medal.faithful { background: var(--gold); }
.newbest { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--teal-ink); margin-left: 8px; }

/* ── Stage dots ──────────────────────────────────────────────────────────── */
.dots { display: flex; gap: 7px; justify-content: center; margin: 10px 0 14px; flex-wrap: wrap; }
.dots .dot { width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 50%; background: transparent; }
.dots .dot.on { background: #8a6512; }
.dots .dot.cur { box-shadow: 0 0 0 3px var(--ink); }

/* ── The illuminated Book of Jonah ───────────────────────────────────────── */
.book-panel { max-width: 600px; }
.book-content { max-height: 58vh; overflow-y: auto; text-align: left; margin: 10px 0 14px; padding-right: 4px; }
.book-page { border: 3px solid var(--ink); border-radius: var(--bd-r-control,10px); padding: 11px 14px; margin: 10px 0; background: var(--bone); box-shadow: 4px 4px 0 rgba(23,21,15,.16); }
/* .5 compounded with the nested .muted text down to ~2:1. The dashed border
   already signals "locked", so the fade only needs to be a hint. */
.book-page.locked { opacity: .78; border-style: dashed; }
.book-page.m-faithful { border-color: #b8860b; box-shadow: 4px 4px 0 rgba(231,178,60,.45); }
.book-page.m-steady { box-shadow: 4px 4px 0 rgba(23,21,15,.28); }
.bp-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bp-act { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-ink); font-weight: 600; }
.book-page h3 { margin: 4px 0 6px; font-size: 19px; }
.bp-verse { font-family: var(--font-hand); font-size: 17px; line-height: 1.3; margin: 4px 0; }
.bp-ref { font-style: italic; opacity: .6; font-size: 12px; text-align: right; }
.medal.sm { font-size: 12px; padding: 2px 9px; box-shadow: 2px 2px 0 rgba(23,21,15,.2); }

/* ── Settings ────────────────────────────────────────────────────────────── */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; flex-wrap: wrap; text-align: left; }
.set-row > label { font-size: 15px; font-weight: 600; }
.set-row .sub { font-weight: 400; opacity: .6; font-size: 13px; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg.wrap { max-width: 320px; justify-content: flex-end; }
.seg button {
  font-family: var(--font-display); font-size: 14px; border: 2px solid var(--ink); border-radius: var(--bd-r-control,10px);
  background: var(--bone); color: var(--ink); padding: 7px 12px; cursor: pointer;
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
.seg button.active { background: var(--gold); box-shadow: inset 0 0 0 2px var(--ink); }
#set-vol { width: 160px; accent-color: var(--teal); }

.btn:focus-visible, .iconbtn:focus-visible, .seg button:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

/* ── 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 — Cast & Called's start screen is its own key art */
#overlay-title .panel{ --bd-art:url(../../shots/art/jonah-runs-800.webp); --bd-chroma:#66c9d6; --bd-art-y:46%; --bd-pad:24px; padding-top:0; overflow:hidden }
#overlay-title .panel .bd-band{ margin:0 -24px 10px; border-radius:18px 18px 0 0; -webkit-mask-image:none; mask-image:none }