/* styles.css — Cut-Paper Collage UI. Type: Fredoka (display) + Patrick Hand (hand).
   Chunky paper cards, warm shadows, big tap targets, a rainbow motif. */

:root{
  --sky:#5BC0EB; --grass:#9BC53D; --grass-dk:#6FA02A; --grass-ink: #4a6c1c; --sun:#FDE74C; --clay:#E55934; --clay-ink: #b34529; --deep:#5A2A27;
  --paper:#FBF6E7; --paper-2:#F3E8C8; --ink:#3A2A26; --ink-soft:#6B524A;
  --gold:#986725;
  --shadow:0 10px 0 rgba(90,42,39,.18), 0 18px 34px rgba(90,42,39,.28);
  --shadow-sm:0 6px 0 rgba(90,42,39,.16), 0 10px 18px rgba(90,42,39,.22);
  --font-display:'Fredoka', system-ui, sans-serif;
  --font-hand:'Patrick Hand','Comic Sans MS',cursive;
}

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

/* ── HUD ─────────────────────────────────────────────────────────────────── */
#hud{
  position:fixed; top:0; left:0; right:0; z-index:5;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:max(14px, env(safe-area-inset-top)) 18px 0; pointer-events:none;
}
.hud-best, .hud-score{
  font-weight:600; color:var(--ink);
  background:var(--paper); border:3px solid var(--ink);
  border-radius:var(--bd-r-surface); box-shadow:var(--shadow-sm);
}
.hud-best{font-size:16px; padding:6px 12px; transform:rotate(-2deg);}
.hud-score{
  font-size:40px; line-height:1; padding:8px 20px; transform:rotate(1deg);
  position:absolute; left:50%; translate:-50% 0; color: var(--clay-ink);
}
.hud-spacer{width:64px;}

/* ── top-right controls ──────────────────────────────────────────────────── */
#controls{
  position:fixed; top:max(12px, env(safe-area-inset-top)); right:14px; z-index:6;
  display:flex; align-items:center; gap:10px;
}
.iconbtn{
  width:52px; height:52px; font-size:22px; cursor:pointer;
  background:var(--paper); border:3px solid var(--ink); border-radius:50%;
  box-shadow:var(--shadow-sm); transition:transform .08s ease;
}
.iconbtn:active{transform:translateY(3px) scale(.96);}

/* ── overlays + cards ────────────────────────────────────────────────────── */
.overlay{
  position:fixed; inset:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(58,42,38,.97);
}
.overlay.hidden, .hidden{display:none !important;}

.card{
  position:relative; width:min(440px, 92vw);
  background:var(--paper); color:var(--ink);
  border:4px solid var(--ink); border-radius:var(--bd-r-surface);
  box-shadow:var(--shadow);
  padding:30px 26px 24px; text-align:center;
  max-height:94vh; overflow-y:auto;
  animation:pop .32s cubic-bezier(.2,1.3,.5,1) both;
}
.card::before{ /* paper inner edge */
  content:""; position:absolute; inset:7px; border:2px dashed rgba(90,42,39,.22);
  border-radius:var(--bd-r-surface); pointer-events:none;
}
@keyframes pop{from{transform:scale(.86) translateY(10px); opacity:0;} to{transform:scale(1); opacity:1;}}

.rainbow{width:130px; height:72px; margin:-6px auto 2px; display:block;}

.title{
  font-weight:700; font-size:46px; line-height:1; margin:2px 0 4px;
  color: var(--clay-ink); letter-spacing:.5px;
  text-shadow:3px 3px 0 var(--sun), 6px 6px 0 rgba(90,42,39,.15);
}
.title.small{font-size:32px; text-shadow:2px 2px 0 var(--sun);}
.tag{font-family:var(--font-hand); font-size:21px; color:var(--ink-soft); margin:2px 0 18px;}

.btn{
  display:block; width:100%; margin:10px auto 0;
  font-family:var(--font-display); font-weight:600; font-size:24px;
  min-height:62px; padding:12px 22px; cursor:pointer;
  border:4px solid var(--ink); border-radius:var(--bd-r-surface);
  transition:transform .08s ease, box-shadow .08s ease;
}
.btn-primary{background:var(--clay); color:var(--paper); box-shadow:var(--shadow-sm);}
.btn-primary:active{transform:translateY(5px); box-shadow:0 2px 0 rgba(90,42,39,.18);}
.btn-ghost{background:var(--paper-2); color:var(--ink); box-shadow:var(--shadow-sm); font-size:19px; min-height:52px;}
.btn-ghost:active{transform:translateY(4px); box-shadow:0 2px 0 rgba(90,42,39,.16);}
/* kid-readable subtitle on the mode buttons */
.btn .sub{ display:block; font-family:var(--font-hand); font-weight:400; font-size:14px; opacity:.92; margin-top:1px; line-height:1.05; }
.btn-primary .sub{ color:var(--paper); }

/* how-to-play strip in Settings + the grown-ups note on the finale */
.howto{ font-family:var(--font-hand); color:var(--ink-soft); font-size:15px; line-height:1.4; background:var(--paper-2); border:2px dashed rgba(90,42,39,.25); border-radius:var(--bd-r-control,10px); padding:8px 10px; margin:6px 2px 10px; text-align:center; }
.grownups{ font-family:var(--font-hand); color:var(--ink-soft); font-size:14px; line-height:1.4; margin:12px 8px 8px; padding-top:10px; border-top:2px dashed rgba(90,42,39,.2); }

.best{font-weight:600; color:var(--ink-soft); margin:14px 0 6px; font-size:17px;}
.hint{font-family:var(--font-hand); color:var(--ink-soft); font-size:17px; margin:14px 4px 2px;}
.hint b{color: var(--clay-ink);}
.verse{
  font-family:var(--font-hand); font-size:18px; color:var(--ink-soft);
  margin:16px 6px 2px; line-height:1.35; border-top:2px dashed rgba(90,42,39,.2); padding-top:12px;
}
.verse .ref{display:block; font-size:14px; margin-top:7px; color:var(--ink-soft);}
.verse-label{display:block; font-family:var(--font-display); font-weight:600; color: var(--clay-ink); font-size:13px; letter-spacing:.4px; margin-bottom:7px;}

.scorebig{font-weight:700; font-size:72px; line-height:1; color: var(--clay-ink); margin:6px 0 2px;
  text-shadow:3px 3px 0 var(--sun);}
.newbest{font-family:var(--font-hand); color:#986725; font-size:22px; margin:4px 0; animation:wob 1.2s ease-in-out infinite;}
@keyframes wob{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg);}}

/* ── settings ────────────────────────────────────────────────────────────── */
.btn-row{ display:flex; gap:8px; }
/* three secondary buttons in one row on a 320px phone: without a shrink floor
   below their own text width, "Collection" alone pushes the row past the
   card edge (measured 375px overflow before this fix) */
.btn-row .btn{ flex:1; min-width:0; font-size:16px; padding:11px 6px; }
.setting-group-title{ font-family:var(--font-display); font-weight:600; color:var(--ink-soft); font-size:13px; letter-spacing:.4px; text-align:left; margin:16px 2px 2px; padding-top:10px; border-top:2px dashed rgba(90,42,39,.2); }
.setting-group-title:first-of-type{ border-top:none; padding-top:0; margin-top:10px; }
.setting{ text-align:left; margin:14px 2px; }
.setting > label{ display:block; font-weight:600; color:var(--ink); font-size:15px; margin-bottom:7px; }
.seg{ display:flex; gap:7px; }
.seg.wrap{ flex-wrap:wrap; }
.seg button{ flex:1 1 0; font-family:var(--font-display); font-weight:600; font-size:14px;
  padding:11px 6px; min-height:46px; cursor:pointer; color:var(--ink);
  background:var(--paper); border:3px solid var(--ink); border-radius:var(--bd-r-control,10px); transition:transform .06s ease; }
.seg button:active{ transform:translateY(2px); }
.seg button.active{ background:var(--clay); color:var(--paper); box-shadow:inset 0 -3px 0 rgba(90,42,39,.25); }
.seg.wrap button{ flex:1 1 44%; }
.setting input[type=range]{ width:100%; height:34px; accent-color:var(--clay); cursor:pointer; }

/* ── pairs counter + collection book ─────────────────────────────────────── */
.hud-pairs{
  font-weight:600; color:var(--ink);
  background:var(--paper); border:3px solid var(--ink); border-radius:var(--bd-r-surface);
  box-shadow:var(--shadow-sm); font-size:15px; padding:6px 12px; transform:rotate(2deg);
  margin-top:58px;   /* drop below the mute/pause controls so they don't overlap */
}
.card-wide{ width:min(560px,94vw); max-height:88vh; overflow-y:auto; }
#book-content{ display:flex; flex-direction:column; gap:14px; margin:12px 0 16px; }
.habitat{ border:3px solid var(--ink); border-radius:var(--bd-r-surface); padding:10px 10px 12px; background:var(--paper-2); }
/* .55 compounded with nested caption text below AA. The lock icon carries the
   meaning; the fade can be gentler. */
.habitat.locked{ opacity:.8; }
.habitat h3{ margin:2px 0 4px; font-size:19px; color: var(--clay-ink); font-weight:600; }
.habitat .blurb{ font-family:var(--font-hand); font-size:14px; color:var(--ink-soft); margin:0 0 8px; }
.species-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.species{ width:80px; text-align:center; }
.species canvas{ display:block; width:64px; height:64px; margin:0 auto; background:var(--paper); border:2px solid var(--ink); border-radius:var(--bd-r-control,10px); }
.species.done canvas{ border-color:var(--grass-dk); box-shadow:0 0 0 2px var(--grass); }
.species .nm{ font-family:var(--font-hand); font-size:12px; color:var(--ink-soft); margin-top:3px; line-height:1.05; }
.species .pip{ font-size:13px; font-weight:600; color:var(--deep); }
.species .pip.full{ color: var(--grass-ink); }
.passage-card{ margin-top:10px; border-top:2px dashed rgba(90,42,39,.25); padding-top:8px;
  font-family:var(--font-hand); color:var(--ink-soft); font-size:14px; line-height:1.35; }
.passage-card .ref{ display:block; color: var(--clay-ink); font-weight:600; margin-top:4px; }
.helpers{ margin:6px 2px 2px; text-align:left; border-top:2px dashed rgba(90,42,39,.22); padding-top:12px; }
.helpers h3{ margin:0 0 8px; font-size:18px; color: var(--clay-ink); font-weight:600; text-align:center; }
.helper-row{ font-family:var(--font-hand); color:var(--ink-soft); font-size:15px; line-height:1.7; }
.helper-row b{ font-size:18px; font-weight:400; }
.credit{ font-family:var(--font-hand); color:var(--ink-soft); font-size:12px; text-align:center; margin:14px 2px 2px; padding-top:10px; border-top:2px dashed rgba(90,42,39,.2); }
/* ── journey ─────────────────────────────────────────────────────────────── */
#journey-banner{ position:fixed; top:calc(max(10px, env(safe-area-inset-top)) + 62px); left:50%; translate:-50% 0; z-index:5;
  width:min(440px,90vw); background:var(--paper); border:3px solid var(--ink); border-radius:var(--bd-r-surface);
  box-shadow:var(--shadow-sm); padding:8px 14px 10px; text-align:center; pointer-events:none; }
#jb-title{ font-family:var(--font-display); font-weight:600; color: var(--clay-ink); font-size:17px; }
#jb-bar{ height:8px; background:var(--paper-2); border:2px solid var(--ink); border-radius:var(--bd-r-control,10px); overflow:hidden; margin:5px auto; max-width:320px; }
#jb-fill{ height:100%; width:0%; background:#5d8a1e; transition:width .18s linear; }
#jb-verse{ font-family:var(--font-hand); color:var(--ink-soft); font-size:14px; line-height:1.25; min-height:1.2em; }
.passage-full{ font-family:var(--font-hand); color:var(--ink); font-size:17px; line-height:1.4; text-align:left;
  margin:12px 0 16px; max-height:46vh; overflow-y:auto; }
.passage-full .v{ display:block; margin:7px 0; }
.passage-full .ref{ display:block; text-align:center; color: var(--clay-ink); font-weight:600; margin-top:10px; }
.versecontext{ font-family:var(--font-hand); color:var(--ink-soft); font-size:17px; line-height:1.3; margin:8px 10px 0; }
.heartverse{ font-family:var(--font-hand); color:var(--ink); font-size:25px; line-height:1.35; margin:6px 8px 6px; }
.heartverse .ref{ display:block; color: var(--clay-ink); font-weight:600; font-size:15px; margin-top:7px; font-family:var(--font-display); }
.legdots{ display:flex; gap:8px; justify-content:center; align-items:center; margin:4px 0 8px; }
.legdots .dot{ width:11px; height:11px; border-radius:50%; background:var(--paper-2); border:2px solid var(--ink); }
.legdots .dot.on{ background:var(--clay); }
.legdots .dot.fin{ width:auto; height:auto; border:none; background:none; font-size:16px; line-height:1; }
.passage-more{ margin:4px 0 14px; text-align:center; }
.passage-more summary{ font-family:var(--font-display); font-weight:600; color:var(--ink-soft); font-size:14px; cursor:pointer; list-style:none; padding:6px; }
.passage-more summary::-webkit-details-marker{ display:none; }
.passage-more summary::before{ content:'▸ '; }
.passage-more[open] summary::before{ content:'▾ '; }
.passage-more .passage-full{ max-height:34vh; margin-top:6px; }

.hint-inline{ font-family:var(--font-hand); font-weight:400; color:var(--ink-soft); font-size:13px; }
.goals{ display:flex; flex-direction:column; gap:3px; margin:8px auto 6px; max-width:260px; text-align:left; }
.goal{ font-family:var(--font-hand); font-size:16px; color:var(--ink-soft); }
.goal.met{ color: var(--grass-ink); font-weight:600; }
.tip{ font-family:var(--font-hand); color:var(--ink-soft); font-size:15px; margin-top:8px; }
#go-reveal{ margin:10px 0 2px; }
#go-reveal .rev{ font-family:var(--font-hand); color: var(--grass-ink); font-size:17px; margin:4px 0; }
#go-reveal .rev.allpairs{ color: var(--clay-ink); font-weight:700; font-size:18px; }
#go-reveal .passage{ font-family:var(--font-hand); color:var(--ink-soft); font-size:14px;
  background:var(--paper-2); border:2px dashed rgba(90,42,39,.25); border-radius:var(--bd-r-control,10px); padding:9px; margin-top:8px; line-height:1.35; }
#go-reveal .passage .ref{ display:block; color: var(--clay-ink); font-weight:600; margin-top:4px; }

.filewarn{
  position:fixed; left:50%; bottom:16px; translate:-50% 0; z-index:30;
  background:var(--clay); color:#fff; padding:10px 16px; border-radius:var(--bd-r-control,10px);
  border:3px solid var(--ink); font-size:14px; max-width:90vw; text-align:center;
}
.filewarn code{background:rgba(0,0,0,.2); padding:1px 5px; border-radius:4px;}

/* ── live run-goals strip (endless HUD) ──────────────────────────────────── */
#hud-goals{
  position:absolute; top:calc(max(14px, env(safe-area-inset-top)) + 46px); left:18px;
  display:flex; flex-direction:column; gap:5px; pointer-events:none; max-width:48vw;
}
#hud-goals .hg{
  font-family:var(--font-hand); font-size:14px; color:var(--ink);
  background:var(--paper); border:2px solid var(--ink); border-radius:var(--bd-r-control,10px);
  padding:3px 10px; box-shadow:var(--shadow-sm); transform:rotate(-1.5deg);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#hud-goals .hg.met{ color: var(--grass-ink); border-color:var(--grass-dk); }

/* personal records on the game-over card */
.records{ font-family:var(--font-hand); color:var(--ink-soft); font-size:15px; margin-top:10px; line-height:1.45; }
.records b{ color: var(--grass-ink); }

/* ── accessibility helpers ───────────────────────────────────────────────── */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.btn:focus-visible, .seg button:focus-visible, .iconbtn:focus-visible,
.passage-more summary:focus-visible, input[type=range]:focus-visible{
  /* two-tone: the paper ring reads on the dark storm sky, the ink ring on light skies */
  outline:3px solid var(--ink); outline-offset:3px; box-shadow:0 0 0 3px var(--paper);
}

@media (max-width:380px){
  .title{font-size:38px;} .scorebig{font-size:60px;}
}
@media (prefers-reduced-motion: reduce){
  .card{animation:none;} .newbest{animation:none;}
}

/* ── 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 — Two by Two's start screen is its own key art */
#overlay-title .card{ --bd-art:url(../../shots/art/two-by-two-800.webp); --bd-chroma:#6ad0d8; --bd-art-y:54%; --bd-pad:26px; padding-top:0 }
#overlay-title .card .bd-band{ margin:0 -26px 14px; border-radius:18px 18px 0 0; -webkit-mask-image:none; mask-image:none; height:clamp(124px,23vh,286px) } /* 28vh pushed the verse 31px below the card at 375x812 */