/* ============================================================================
   WISDOM GARDEN — Watercolor Dawn design system
   Soft washes, sunrise light, hand-lettered headings (Caveat) over a warm
   humanist serif (Fraunces). Cozy, reverent, tactile. Mobile-first.
   ============================================================================ */

:root {
  /* — dawn palette — */
  --paper:        #FCF6EC;
  --paper-2:      #F7EEDF;
  --dawn-peach:   #FBE3D0;
  --blush:        #F4C2C2;
  --rose:         #c3837d;
  --gold:         #E8A14B;
  --gold-ink:     #90642e;
  --apricot:      #F2B66D;
  --sage:         #A8C39A;
  --leaf:         #7BA06E;
  --deep-leaf:    #4b6946;
  --sky:          #BFD9E0;
  --soft-blue:    #9CC2CC;
  --lavender:     #C9B6D4;
  --bark:         #8A6A4F;
  --deep-bark:    #7a5940;
  --ink:          #5A4636;   /* warm — never pure black */
  --ink-soft:     #7a6656;

  /* — semantic — */
  --bg:           var(--paper);
  --card:         #FFFDF8;
  --card-edge:    #efe2cd;
  --accent:       var(--gold);
  --accent-2:     var(--leaf);
  --good:         var(--leaf);

  /* — type — */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --hand:  "Caveat", "Segoe Script", cursive;
  --fs-base: 17px;

  /* — shape & depth — */
  --r-sm: 12px;
  --r:    20px;
  --r-xl: 36px;
  --shadow-1: 0 1px 4px rgba(138,106,79,.07), 0 6px 18px rgba(138,106,79,.08);
  --shadow-2: 0 5px 14px rgba(138,106,79,.10), 0 18px 38px rgba(138,106,79,.10);
  --ring: 0 0 0 3px #90642e;

  /* — motion — */
  --ease-soft: cubic-bezier(.22,.68,.32,1);
  --ease-pop:  cubic-bezier(.34,1.56,.64,1);
  --t-fast: .18s;
  --t: .32s;
  --t-slow: .6s;

  --maxw: 560px;
  --nav-h: 68px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;            /* screens scroll internally */
  overscroll-behavior: none;
}
button { font-family: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--ring); }

/* large-text & high-contrast accessibility modes */
html[data-text="large"]    { --fs-base: 19px; }
html[data-contrast="high"] { --ink:#3a2c20; --ink-soft:#5a4636; --card:#fffefb; --card-edge:#d8c5a6; }

/* ===========================  DAWN BACKDROP  ============================ */
.dawn {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(125% 95% at 80% -10%, #FFF8EE 0%, #FBEAD8 38%, #F4DFCC 68%, #ECDDC6 100%);
}
.dawn__sun {
  position: absolute; top: -90px; right: -40px; width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,238,205,.95) 0%, rgba(242,182,109,.55) 38%, rgba(242,182,109,0) 70%);
  filter: blur(2px);
  animation: sunbreathe 9s var(--ease-soft) infinite;
}
.dawn__glow {
  position: absolute; left: -10%; bottom: -12%; width: 80%; height: 50%;
  background: radial-gradient(60% 80% at 40% 100%, rgba(168,195,154,.35), rgba(168,195,154,0) 70%);
}
@keyframes sunbreathe { 0%,100%{ transform:scale(1); opacity:.95 } 50%{ transform:scale(1.06); opacity:1 } }

/* ============================  APP SHELL  ============================== */
.app {
  position: relative; z-index: 1;
  max-width: var(--maxw); height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: linear-gradient(180deg, rgba(255,253,248,0) 0%, rgba(255,253,248,.35) 30%, rgba(255,253,248,.6) 100%);
}

.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top,0px) + 14px) 20px 6px;
}
.app-header__title { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
/* the shared sound switch sits top-right, level with the way back; the streak hangs under it so the brand never wraps at 375px */
.app-header__end { display: flex; flex-direction: column; align-items: flex-end; align-self: flex-start; gap: 6px; flex: 0 0 auto; }
.brand {
  font-family: var(--hand);
  font-size: 2.35rem; font-weight: 700;
  color: var(--deep-leaf);
  letter-spacing: .5px;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.brand-sub {
  font-family: var(--serif); font-size: .82rem; font-style: italic;
  color: var(--ink-soft); margin-top: 2px; opacity: .9;
}

.streak {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--card); border: 1px solid var(--card-edge);
  border-radius: 999px; padding: 8px 14px; min-height: 44px; box-sizing: border-box;
  box-shadow: var(--shadow-1); cursor: pointer;
  transition: transform var(--t-fast) var(--ease-pop), box-shadow var(--t-fast);
}
.streak:hover { transform: translateY(-1px); }
.streak:active { transform: scale(.96); }
.streak__flame { display: inline-flex; color: var(--leaf); }
.streak__flame svg { width: 15px; height: 15px; display: block; }
.streak__count { font-weight: 700; font-size: 1.25rem; color: var(--gold-ink); font-feature-settings:"tnum"; }
.streak__label { font-size: .72rem; color: var(--ink-soft); }
.streak.pulse .streak__count { animation: pop .5s var(--ease-pop); }
@keyframes pop { 0%{ transform:scale(1) } 40%{ transform:scale(1.4) } 100%{ transform:scale(1) } }

/* ============================  SCREENS  =============================== */
.app-main { position: relative; overflow: hidden; }
.screen {
  position: absolute; inset: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 6px 18px calc(var(--nav-h) + 20px);
  opacity: 0; transform: translateY(8px) scale(.995);
  pointer-events: none;
  transition: opacity var(--t) var(--ease-soft), transform var(--t) var(--ease-soft);
}
.screen.is-active { opacity: 1; transform: none; pointer-events: auto; }
.screen[hidden] { display: none; }

/* ============================  TODAY  ================================ */
.today { padding-top: 8px; }
.today__date {
  font-family: var(--serif); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .15em; color: var(--ink-soft);
  margin: 4px 2px 12px;
}

/* weekly-theme ribbon (compact, one slim line) */
.theme-ribbon {
  --theme: #A8C39A; --theme-accent: #E8A14B;
  display: flex; align-items: center; gap: 9px;
  background: linear-gradient(100deg, var(--theme) -24%, #FFFDF8 58%);
  border: 1px solid var(--card-edge); border-left: 5px solid var(--theme-accent);
  border-radius: 999px; padding: 7px 16px; margin: 0 0 14px; box-shadow: var(--shadow-1);
}
.theme-ribbon__eyebrow { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.theme-ribbon__name { font-family: var(--hand); font-size: 1.5rem; color: var(--deep-leaf); line-height: 1; }
.theme-ribbon__dots { display: flex; gap: 6px; margin-left: auto; }
.rdot { width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 1px solid var(--card-edge); }
.rdot.on { background: var(--theme-accent); border: 2px solid var(--gold-ink); }

.puzzle-card {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  padding: 24px 22px 26px;
  position: relative; overflow: hidden;
}
.puzzle-card::before { /* faint paper grain */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
.theme-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .76rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--deep-leaf);
  background: linear-gradient(180deg, #fff, var(--paper-2));
  border: 1px solid var(--card-edge);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.theme-chip__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }

.puzzle-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.puzzle-ref { font-family: var(--hand); font-size: 1.5rem; color: var(--deep-leaf); line-height: 1; }
.puzzle-topic { font-family: var(--serif); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); }
.verse {
  font-family: var(--serif);
  font-size: 1.5rem; line-height: 1.5; font-weight: 400;
  color: var(--ink);
  letter-spacing: .1px;
}
.verse .blank {
  display: inline-block; min-width: 96px;
  text-align: center; font-weight: 600; color: var(--gold-ink);
  border-bottom: 3px dashed var(--gold-ink);
  padding: 0 8px 1px; margin: 0 2px; border-radius: var(--r-sm);
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t) var(--ease-pop);
}
.verse .blank.filled { color: var(--deep-leaf); border-bottom-style: solid; border-color: var(--leaf); }
.verse .blank.correct { background: rgba(123,160,110,.16); border-color: var(--leaf); animation: fillpop .45s var(--ease-pop); }
.verse .blank.wrong { color: var(--rose); border-color: var(--rose); animation: shake .4s; }
@keyframes fillpop { 0%{ transform:scale(.8) } 55%{ transform:scale(1.18) } 100%{ transform:scale(1) } }
@keyframes shake { 0%,100%{ transform:translateX(0) } 20%{ transform:translateX(-5px) } 40%{ transform:translateX(5px) } 60%{ transform:translateX(-3px) } 80%{ transform:translateX(3px) } }

.tiles {
  display: flex; flex-wrap: wrap; gap: 11px; margin-top: 24px;
}
.tile {
  appearance: none; border: 1px solid var(--card-edge);
  background: linear-gradient(180deg, #fff 0%, var(--paper-2) 100%);
  color: var(--ink); font-family: var(--serif); font-size: 1.12rem; font-weight: 500;
  padding: 12px 20px; border-radius: 999px; cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform var(--t-fast) var(--ease-pop), box-shadow var(--t-fast), background var(--t), color var(--t), border-color var(--t);
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.tile:active { transform: scale(.95); }
.tile.is-correct { background: linear-gradient(180deg,#cfe3c2,#bcd6ac); color: var(--deep-leaf); border-color: var(--leaf); transform: scale(1.02); }
.tile.is-wrong { background: linear-gradient(180deg,#f6dad6,#efc6c1); color: #994d47; border-color: var(--rose); }
.tile.is-spent { opacity: .35; pointer-events: none; filter: grayscale(.3); }

.puzzle-hint {
  margin-top: 18px; display: flex; align-items: center; gap: 8px;
  font-size: .92rem; color: var(--ink-soft); min-height: 22px;
}
.hint-btn {
  background: none; border: 1px dashed var(--bark); color: var(--deep-bark);
  border-radius: 999px; padding: 5px 12px; font-size: .82rem; cursor: pointer;
  transition: background var(--t-fast);
}
.hint-btn:hover { background: rgba(185,140,106,.1); }

/* ---- shared puzzle-type bits ---- */
.puzzle-instr { display: inline-block; font-size: .9rem; font-weight: 600; color: var(--deep-leaf);
  background: var(--paper-2); border: 1px solid var(--card-edge); border-radius: 999px; padding: 5px 14px; margin: 0 0 16px; }
.verse--quote { font-style: italic; font-size: 1.32rem; line-height: 1.5; }
.shakeit { animation: shake .4s; }
.tiles--center { justify-content: center; }

/* ---- verse-order ---- */
.order-target {
  min-height: 60px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 14px; border-radius: var(--r); background: linear-gradient(180deg,#fff,var(--paper-2));
  border: 2px dashed var(--gold-ink); margin-bottom: 18px; transition: border-color var(--t), background var(--t);
}
.order-target.solved { border-style: solid; border-color: var(--leaf); background: rgba(123,160,110,.14); }
.order-ph { color: var(--ink-soft); font-style: italic; font-size: .95rem; }
.order-bank { display: flex; flex-wrap: wrap; gap: 9px; }
.chunk {
  border: 1px solid var(--card-edge); background: linear-gradient(180deg,#fff,var(--paper-2));
  color: var(--ink); font-family: var(--serif); font-size: 1.04rem; padding: 10px 14px; border-radius: var(--r-sm);
  cursor: pointer; box-shadow: var(--shadow-1); transition: transform var(--t-fast) var(--ease-pop), box-shadow var(--t-fast);
}
.chunk:hover { transform: translateY(-2px); } .chunk:active { transform: scale(.95); }
.chunk.in-target { background: linear-gradient(180deg,#f5ebd4,#ecdcbb); border-color: var(--apricot); }

/* ---- paraphrase choices ---- */
.choices { display: flex; flex-direction: column; gap: 11px; margin-top: 18px; }
.choice {
  text-align: left; border: 1px solid var(--card-edge); background: linear-gradient(180deg,#fff,var(--paper-2));
  color: var(--ink); font-family: var(--serif); font-size: 1.05rem; line-height: 1.4; padding: 14px 16px;
  border-radius: var(--r); cursor: pointer; box-shadow: var(--shadow-1);
  transition: transform var(--t-fast) var(--ease-pop), border-color var(--t), background var(--t);
}
.choice:hover { transform: translateY(-2px); } .choice:active { transform: scale(.98); }
.choice.is-correct { background: linear-gradient(180deg,#cfe3c2,#bcd6ac); border-color: var(--leaf); color: var(--deep-leaf); }
.choice.is-wrong { background: linear-gradient(180deg,#f6dad6,#efc6c1); border-color: var(--rose); }
.choice.is-spent { opacity: .4; pointer-events: none; }

/* ---- image-symbol ---- */
.symbol-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 18px; }
.symcard {
  background: linear-gradient(180deg,#fff,var(--paper-2)); border: 1px solid var(--card-edge);
  border-radius: var(--r); padding: 10px 10px 12px; cursor: pointer; box-shadow: var(--shadow-1);
  transition: transform var(--t-fast) var(--ease-pop), border-color var(--t), background var(--t);
}
.symcard:hover { transform: translateY(-2px); } .symcard:active { transform: scale(.96); }
.symcard__art { width: 100%; aspect-ratio: 1.5; display: grid; place-items: center; }
.symcard__art svg { width: 70%; height: 70%; }
.symcard__name { font-size: .92rem; color: var(--ink); }
.symcard.is-correct { background: linear-gradient(180deg,#cfe3c2,#bcd6ac); border-color: var(--leaf); }
.symcard.is-wrong { background: linear-gradient(180deg,#f6dad6,#efc6c1); border-color: var(--rose); }
.symcard.is-spent { opacity: .4; pointer-events: none; }

/* ---- word-grid (original cozy colors — not green/yellow/gray) ---- */
.find-label { text-align: center; font-size: 1.02rem; color: var(--ink-soft); margin: 6px 0 12px; }
.find-label b { color: var(--gold-ink); font-family: var(--hand); font-size: 1.5rem; letter-spacing: .06em; }
.wordgrid { display: grid; gap: 2px; margin: 0 -18px; width: calc(100% + 36px); max-width: calc(100% + 36px); } /* bleeds into the card's 22px padding, never past it (a -40px bleed clipped the outer columns at 375px) */
.gridcell {
  aspect-ratio: 1; border: 1px solid var(--card-edge); border-radius: var(--r-sm);
  background: linear-gradient(180deg,#fff,var(--paper-2)); color: var(--ink);
  font-family: var(--serif); font-weight: 600; font-size: .98rem; cursor: pointer; box-shadow: var(--shadow-1);
  transition: transform var(--t-fast), background var(--t), color var(--t);
}
.gridcell:hover { transform: scale(1.06); }
.gridcell.sel { background: linear-gradient(180deg,var(--apricot),var(--gold)); color: #4a2f0c; border-color: var(--gold-ink); box-shadow: var(--shadow-1), inset 0 0 0 2px var(--gold-ink); }
.gridcell.found { background: linear-gradient(180deg,#5f7f52,var(--deep-leaf)); color: #fff; border-color: var(--deep-leaf); animation: fillpop .45s var(--ease-pop); }

/* solved / done state */
.done-card { text-align: center; padding: 8px 4px; }
.done-card .done-mark {
  width: 64px; height: 64px; margin: 6px auto 10px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff, var(--sage));
  display: grid; place-items: center; font-size: 2rem; color: var(--deep-leaf);
  box-shadow: var(--shadow-1);
}
.done-card h2 { font-family: var(--hand); font-size: 2rem; color: var(--deep-leaf); margin: 4px 0 2px; }
.done-card p { color: var(--ink-soft); margin: 6px 0; }
.done-verse {
  font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--ink);
  margin: 16px auto; max-width: 30ch;
}
.done-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

/* primary / soft buttons */
.btn {
  appearance: none; cursor: pointer; border: none;
  font-family: var(--serif); font-size: 1.02rem; font-weight: 600;
  padding: 13px 22px; border-radius: 999px;
  transition: transform var(--t-fast) var(--ease-pop), box-shadow var(--t-fast), filter var(--t-fast);
}
.btn:active { transform: scale(.96); }
.btn--primary { background: linear-gradient(180deg, var(--apricot), var(--gold)); color: #4a2f0c; box-shadow: 0 6px 16px rgba(232,161,75,.4); }
.btn--primary:hover { filter: brightness(1.04); transform: translateY(-1px); }
.btn--ghost { background: var(--card); color: var(--deep-leaf); border: 1px solid var(--card-edge); box-shadow: var(--shadow-1); }
.btn--leaf { background: linear-gradient(180deg,#5f7f52,var(--deep-leaf)); color:#fff; box-shadow:0 6px 16px rgba(79,111,74,.34); }

/* ============================  GARDEN  =============================== */
.garden { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.garden__stage-wrap {
  position: relative;
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-2);
  border: 1px solid var(--card-edge);
  background: linear-gradient(180deg,#FFF3DF 0%, #FBE3D0 26%, #F3D8C8 48%, #E8D9B8 64%, #D9CC9E 82%, #CFC495 100%);
  aspect-ratio: 4 / 5;
}
.garden__stage { position: absolute; inset: 0; }
.garden__bd { position: absolute; inset: 0; }
.garden__bd svg { width: 100%; height: 100%; display: block; }
.garden__empty {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  padding: 24px; color: var(--deep-bark);
}
.garden__empty[hidden] { display: none; }
.garden__empty p { margin: 4px 0; font-size: 1.05rem; }
.garden__empty-cta { font-family: var(--hand); font-size: 1.5rem; color: var(--rose); }
.garden__info {
  min-height: 26px; text-align: center; font-style: italic; color: var(--ink-soft);
  font-size: .98rem;
}
.garden__info b { font-style: normal; color: var(--deep-leaf); font-family: var(--hand); font-size: 1.3rem; }
.garden__stats { display: flex; gap: 12px; justify-content: center; }
.stat {
  background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--r);
  padding: 10px 16px; text-align: center; box-shadow: var(--shadow-1); min-width: 88px;
}
.stat b { display: block; font-size: 1.5rem; color: var(--gold-ink); font-family: var(--serif); }
.stat span { font-size: .74rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }

/* a growing sprite in the scene */
.sprite { position: absolute; transform-origin: 50% 100%; filter: drop-shadow(0 6px 8px rgba(138,106,79,.18)); }
.sprite svg { width: 100%; height: auto; display: block; overflow: visible; }
.sprite.grow { animation: sprout 1.1s var(--ease-pop) both; }
@keyframes sprout {
  0%   { transform: translateY(8px) scale(.1) rotate(-6deg); opacity: 0; }
  55%  { transform: translateY(0) scale(1.12) rotate(2deg); opacity: 1; }
  72%  { transform: scale(.96) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.sprite.sway { animation: sway 6s ease-in-out infinite; }
@keyframes sway { 0%,100%{ transform: rotate(-1.4deg) } 50%{ transform: rotate(1.4deg) } }
.sprite__tap {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: max(100%, 44px); height: max(100%, 44px);
  background: none; border: none; cursor: pointer;
}

/* fireflies / motes for delight */
.mote { position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, #fff6d8, rgba(255,221,150,0)); pointer-events: none; z-index: 40;
  box-shadow: 0 0 6px 2px rgba(255,228,160,.6); }
@keyframes motefloat {
  0%   { transform: translate(0,0) scale(.8); opacity: .2; }
  25%  { opacity: 1; }
  50%  { transform: translate(14px,-22px) scale(1.1); opacity: .9; }
  75%  { opacity: .6; }
  100% { transform: translate(-6px,-40px) scale(.7); opacity: 0; }
}

/* =========================  COLLECTION  ============================= */
.collection { padding-top: 8px; }
.tabs { display: flex; gap: 6px; background: var(--paper-2); border:1px solid var(--card-edge);
  padding: 5px; border-radius: 999px; margin-bottom: 16px; }
.tab {
  flex: 1; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 9px 6px; border-radius: 999px; font-size: .92rem; font-weight: 600; color: var(--ink-soft);
  transition: background var(--t), color var(--t);
}
.tab.is-active { background: var(--card); color: var(--deep-leaf); box-shadow: var(--shadow-1), inset 0 0 0 2px var(--gold-ink); }
.collection__body { padding-bottom: 8px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px,1fr)); gap: 12px; }
.cell {
  background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--r);
  padding: 10px 8px 12px; text-align: center; box-shadow: var(--shadow-1);
  transition: transform var(--t-fast) var(--ease-pop);
}
.cell:hover { transform: translateY(-2px); }
.cell.locked { opacity: .5; filter: grayscale(.6); }
.cell__art { width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.cell__art svg { width: 84%; height: 84%; }
.cell__name { font-size: .8rem; color: var(--ink); margin-top: 4px; line-height: 1.2; }
.locked .cell__art::after { content: "✦"; color: var(--bark); font-size: 1.6rem; }

.card-list { display: flex; flex-direction: column; gap: 12px; }
.memory-card {
  background: linear-gradient(180deg,#fff, var(--paper-2));
  border: 1px solid var(--card-edge); border-left: 5px solid var(--gold);
  border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow-1);
}
.memory-card .ref { font-family: var(--hand); font-size: 1.4rem; color: var(--gold-ink); }
.memory-card .txt { font-style: italic; color: var(--ink); margin-top: 4px; }

.page-row { display: flex; align-items: center; gap: 14px; background: var(--card);
  border: 1px solid var(--card-edge); border-radius: var(--r); padding: 12px; box-shadow: var(--shadow-1); margin-bottom: 12px; }
.page-row .thumb { width: 64px; height: 80px; border-radius: var(--r-sm); background:#fff; border:1px solid var(--card-edge);
  display:grid; place-items:center; overflow:hidden; flex: 0 0 auto; }
.page-row .thumb svg { width: 100%; height: 100%; }
.page-row .meta { flex: 1; }
.page-row .meta b { color: var(--deep-leaf); }
.page-row .meta span { display:block; font-size:.82rem; color: var(--ink-soft); }

.empty-note { text-align: center; color: var(--ink-soft); font-style: italic; padding: 30px 12px; }
.empty-note .big { font-family: var(--hand); font-size: 1.6rem; color: var(--rose); font-style: normal; display:block; margin-bottom:4px;}

/* ===========================  SETTINGS  ============================= */
.settings { padding-top: 8px; display: flex; flex-direction: column; gap: 12px; }
.set-group { background: var(--card); border:1px solid var(--card-edge); border-radius: var(--r); box-shadow: var(--shadow-1); overflow: hidden; }
.set-group h3 { margin: 0; padding: 14px 18px 6px; font-family: var(--hand); font-size: 1.5rem; color: var(--deep-leaf); font-weight: 700; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 18px; border-top: 1px solid var(--paper-2); }
.set-row:first-of-type { border-top: none; }
.set-row .label b { display:block; }
.set-row .label span { font-size: .8rem; color: var(--ink-soft); }

/* toggle */
.switch { position: relative; width: 52px; height: 30px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; background: var(--bark); border-radius: 999px; transition: background var(--t); }
.switch .thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.18); transition: transform var(--t) var(--ease-pop); }
.switch input:checked + .track { background: linear-gradient(180deg,#6E9560,var(--deep-leaf)); }
.switch input:checked ~ .thumb { transform: translateX(22px); }
.switch input:focus-visible + .track { box-shadow: var(--ring); }

.slider { width: 130px; }
input[type="range"] { accent-color: var(--gold-ink); }

.about { text-align: center; font-size: .86rem; color: var(--ink-soft); padding: 8px 0 4px; line-height: 1.6; }
.about .brand-mini { font-family: var(--hand); font-size: 1.5rem; color: var(--deep-leaf); }
.danger { color: #a56458; }

/* ============================  NAV  ================================= */
.app-nav {
  display: grid; grid-template-columns: repeat(4,1fr);
  background: rgba(255,253,248,.97); backdrop-filter: blur(6px);
  border-top: 1px solid var(--card-edge);
  padding: 8px 8px calc(8px + var(--safe-b));
}
.navbtn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; cursor: pointer; padding: 6px 2px;
  color: var(--ink-soft); transition: color var(--t), transform var(--t-fast);
  border-radius: var(--r-sm);
}
.navbtn__icon { display: grid; place-items: center; line-height: 1; transition: transform var(--t) var(--ease-pop); }
.navbtn__icon svg { width: 23px; height: 23px; display: block; }
.navbtn__label { font-size: .72rem; font-weight: 600; }
.navbtn.is-active { color: var(--deep-leaf); }
.navbtn.is-active .navbtn__icon { color: var(--gold-ink); transform: translateY(-2px) scale(1.18); }
.navbtn:active { transform: scale(.92); }

/* ===========================  REVEAL  ============================== */
.reveal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 22px; }
.reveal[hidden] { display: none; }
.reveal__scrim { position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 50% 38%, rgba(255,244,222,.86), rgba(243,216,200,.92) 60%, rgba(225,196,180,.96));
  animation: fade var(--t) ease both; }
.reveal__card {
  position: relative; width: 100%; max-width: 380px; text-align: center;
  background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--r-xl);
  box-shadow: var(--shadow-2); padding: 26px 24px 24px;
  animation: revealin .55s var(--ease-pop) both;
}
@keyframes revealin { 0%{ transform: translateY(20px) scale(.9); opacity: 0 } 100%{ transform:none; opacity:1 } }
@keyframes fade { from{opacity:0} to{opacity:1} }
.reveal__eyebrow { font-family: var(--hand); font-size: 1.6rem; color: var(--rose); }
.reveal__art {
  width: 168px; height: 168px; margin: 6px auto 4px; position: relative;
  display: grid; place-items: center;
}
.reveal__art svg { width: 100%; height: 100%; animation: sprout 1s var(--ease-pop) both; }
.reveal__halo { position:absolute; inset:-12%; border-radius:50%; z-index:-1;
  background: radial-gradient(circle, rgba(255,236,196,.9), rgba(255,236,196,0) 68%); animation: sunbreathe 4s infinite; }
.reveal__name { font-family: var(--serif); font-weight: 600; font-size: 1.45rem; color: var(--deep-leaf); margin: 2px 0; }
.reveal__kind { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bark); }
.reveal__verse { font-style: italic; color: var(--ink); margin: 14px auto 4px; max-width: 30ch; }
.reveal__verse .vref { display:block; font-style:normal; font-family:var(--hand); color: var(--gold-ink); font-size:1.2rem; margin-top:6px; }
.reveal__streak { margin: 16px 0 4px; color: var(--ink-soft); }
.reveal__streak b { color: var(--gold-ink); font-size: 1.3rem; }
.reveal__actions { display:flex; flex-direction:column; gap:10px; margin-top: 16px; }

/* confetti petals */
.petal { position: fixed; top: -20px; z-index: 49; pointer-events: none; border-radius: 50%; }

/* =========================  DASHBOARD  =========================== */
.dash { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 18px; }
.dash[hidden] { display: none; }
.dash__scrim { position: absolute; inset: 0; background: rgba(90,70,54,.34); animation: fade var(--t) ease both; }
.dash__card {
  position: relative; width: 100%; max-width: 460px; max-height: 86vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--r-xl);
  box-shadow: var(--shadow-2); padding: 24px 22px; animation: revealin .45s var(--ease-pop) both;
}
.dash__close {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--card-edge); background: var(--paper-2); color: var(--ink-soft); cursor: pointer;
}
.dash__close:hover { background: #fff; }
.dash__title { font-family: var(--hand); font-size: 2rem; color: var(--deep-leaf); margin: 2px 0; }
.dash__sub { font-size: .9rem; color: var(--ink-soft); margin: 0 0 16px; }
.dash__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px,1fr)); gap: 10px; }
.dash__stat { background: linear-gradient(180deg,#fff,var(--paper-2)); border: 1px solid var(--card-edge); border-radius: var(--r); padding: 10px 6px; text-align: center; }
.dash__stat b { display: block; font-size: 1.5rem; color: var(--gold-ink); }
.dash__stat span { font-size: .67rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.dash__h3 { font-family: var(--hand); font-size: 1.5rem; color: var(--deep-leaf); margin: 20px 0 8px; }
.dash__verses { display: flex; flex-direction: column; gap: 8px; }
.dash__verse { border-left: 4px solid var(--apricot); background: var(--paper-2); border-radius: var(--r-sm); padding: 8px 12px; }
.dash__verse b { color: var(--gold-ink); font-family: var(--hand); font-size: 1.15rem; display: block; line-height: 1.2; }
.dash__verse span { font-size: .92rem; font-style: italic; color: var(--ink); }
.dash__actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.dash__actions .btn { flex: 1; }

/* spaced-repetition review */
.review__eyebrow { font-family: var(--hand); font-size: 1.9rem; color: var(--rose); text-align: center; }
.review__count { text-align: center; font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-soft); margin: 2px 0 16px; }
.review__ref { font-family: var(--hand); font-size: 1.7rem; color: var(--gold-ink); text-align: center; margin-bottom: 12px; }
.review__cue { text-align: center; font-family: var(--serif); font-weight: 600; font-size: 1.35rem; letter-spacing: .16em;
  color: var(--deep-leaf); background: var(--paper-2); border: 1px solid var(--card-edge); border-radius: var(--r); padding: 14px 12px; margin-bottom: 16px; }
.review__verse { font-style: italic; color: var(--ink); text-align: center; font-size: 1.15rem; margin: 6px 0 8px; }
.review__grade { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.review__grade[hidden] { display: none; }
#review-card > .btn, .review__grade .btn { width: 100%; }
.review-banner { display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg,#fff,var(--paper-2));
  border: 1px solid var(--card-edge); border-left: 5px solid var(--leaf); border-radius: var(--r); padding: 11px 14px; margin-bottom: 14px; box-shadow: var(--shadow-1); }
.review-banner .rb-text { flex: 1; font-size: .95rem; }
.review-banner .rb-text b { color: var(--gold-ink); }

/* ===========================  TOAST  ============================== */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + 20px + var(--safe-b)); transform: translateX(-50%) translateY(10px);
  background: var(--deep-leaf); color: #fff; padding: 11px 18px; border-radius: 999px;
  font-size: .92rem; box-shadow: var(--shadow-2); opacity: 0; z-index: 60;
  transition: opacity var(--t), transform var(--t) var(--ease-pop);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast[hidden] { display: block; }

/* =====================  REDUCED MOTION  =========================== */
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .08s !important;
}
@media (prefers-reduced-motion: reduce) {
  .dawn__sun, .sprite.sway, .reveal__halo { animation: none; }
}

/* =====================  RESPONSIVE (desktop)  =====================
   On a wide screen, show a centered phone-style frame instead of a tall
   full-height strip. The dawn backdrop fills the space behind it. */
@media (min-width: 700px) {
  :root { --fs-base: 18px; }
  body { display: grid; place-items: center; padding: 20px; }
  .app {
    width: 100%;
    max-width: 416px;
    height: min(860px, 94vh);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--card-edge), 0 40px 90px rgba(138,106,79,.22);
  }
  .verse { font-size: 1.55rem; }
}

/* The back button, copied from _MASTER/kit-block.css. This game does not carry
   the whole house kit (it is not swept yet), but the way back must be identical
   in all sixteen games, so the component comes across on its own. */
/* ── 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}

/* ── 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 ── */