/* Scripture — modern Bible app design.

   System: bottom tab bar (native iOS/Android feel), big serif type,
   gradient hero verse card, floating compose button, intentional dark
   mode. Palette pulled from the logo. */

:root {
  /* Obsidian — crisp stealth. Neutral near-black with no chromatic
     tint; pure white text down a tight zinc ramp; a single icy sky-300
     accent used sparingly. Hairline rules instead of soft ones,
     shadows tight and short — flat surfaces over dimensional glow.
     Reads like Linear / Arc / Raycast in dark mode. */
  --bg: #0a0b0d;
  --bg-elev: #131418;
  --bg-muted: #1a1c21;
  --bg-grad: linear-gradient(180deg, #0a0b0d 0%, #0e1014 100%);
  --ink: #fafafa;
  --ink-2: #d4d4d8;
  --ink-3: #a1a1aa;
  --ink-soft: #71717a;
  --rule: rgba(255, 255, 255, .06);
  --rule-strong: rgba(255, 255, 255, .12);
  --accent: #7dd3fc;
  --accent-2: #38bdf8;
  --accent-soft: rgba(125, 211, 252, .10);
  --accent-warm: #fbbf24;
  --slate-1: #a1a1aa;
  --slate-2: #52525b;
  --hero-grad: linear-gradient(155deg, #131418 0%, #1c1f24 50%, #131418 100%);
  --hero-glow: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(125,211,252,.14) 0%, transparent 70%);
  --good: #4ade80;
  --bad: #f87171;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 6px 18px rgba(0,0,0,.5);
  --shadow-lg: 0 1px 0 rgba(255,255,255,.05) inset, 0 14px 36px rgba(0,0,0,.6);
  --shadow-glow: 0 0 0 1px rgba(125,211,252,.35), 0 4px 18px rgba(125,211,252,.18);
  --radius: 20px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --maxw: 760px;
  --tabbar-h: 64px;
  --font-serif: ui-serif, "New York", "Iowan Old Style", Charter, "Apple Garamond", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", Inter, Roboto, system-ui, sans-serif;
  --font-display: ui-serif, "New York", "Iowan Old Style", Charter, Georgia, serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* prefers-color-scheme override removed — Aurora is dark by default
   regardless of OS setting. If a light variant is desired later, this
   is where it would live. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
html, body { margin: 0; padding: 0; }
html { color-scheme: dark; }

body {
  background: var(--bg-grad);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  /* 100dvh churns during scroll on iOS Safari as the URL bar shows
     and hides. That churn was resizing the layout viewport under the
     scroll and dragging the position:fixed tabbar along with the
     page. 100lvh (the "large" viewport, URL bar hidden) is stable
     across scroll positions, so the tabbar stays glued to the
     bottom edge. Fallback to 100vh for older browsers where lvh
     is unsupported. */
  min-height: 100vh;
  min-height: 100lvh;
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--tabbar-h));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Kill browser zoom entirely — no double-tap zoom, no pinch zoom.
     App is a single fixed scale. `touch-action: manipulation` shuts
     down the 300ms double-tap gesture; the viewport meta locks scale
     to 1.0 for pinch. Boot code also cancels iOS Safari's gesture
     events since iOS 10+ ignores `user-scalable=no`. Users who want
     bigger reading text use Settings → Reading text size. */
  touch-action: manipulation;
}

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: saturate(140%) blur(20px);
  -webkit-backdrop-filter: saturate(140%) blur(20px);
  border-bottom: 1px solid var(--rule);
  padding-top: env(safe-area-inset-top);
}
.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex; align-items: center;
  padding: 10px 18px;
  gap: 12px;
}
a.brand {
  display: flex; align-items: center; gap: 10px;
  color: inherit;
  flex: 1;
  min-width: 0;
}
.brand-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background-image: url('/logo.jpg');
  background-size: 220% auto;
  background-position: 50% 38%;   /* crop to the book area */
  background-repeat: no-repeat;
  background-color: var(--bg-elev);
  box-shadow: var(--shadow-sm);
  flex: 0 0 auto;
}
.brand-text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.3px;
  color: var(--ink);
}
.brand-tag {
  font-size: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 3px;
  font-weight: 600;
}
.top-action {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  transition: background .15s var(--ease);
}
.top-action:hover, .top-action:active { background: var(--rule); }

/* ---------- layout ---------- */
main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 18px 32px;
}
.tab { display: block; animation: fadeUp .35s var(--ease); }
.tab.hidden { display: none; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.muted { color: var(--ink-3); }
.muted.small { font-size: 13px; }
.hidden { display: none !important; }

/* ---------- buttons ---------- */
.btn-primary {
  background: var(--ink-2);
  color: var(--bg);
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .15px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .12s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .5; cursor: progress; transform: none; }

.btn-accent {
  background: var(--accent);
  color: #1a1207;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: var(--shadow-glow);
}
.btn-accent:hover { background: var(--accent-2); color: #fff; transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--rule-strong);
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.btn-ghost:hover { background: var(--bg-muted); border-color: var(--ink-soft); }

.btn-step {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 50%;
  width: 40px; height: 40px;
  font-size: 18px; color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease);
}
.btn-step:hover { background: var(--bg-muted); }

/* ---------- TODAY (redesigned) ---------- */
.today-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 4px 4px 12px;
  gap: 12px;
}
.today-greeting {
  font-family: var(--font-display);
  font-size: clamp(24px, 6vw, 30px);
  line-height: 1.1;
  letter-spacing: -.5px;
  color: var(--ink);
  font-weight: 600;
}
.today-name {
  font-size: 14px;
  color: var(--ink-3);
  margin-top: 4px;
}
.today-head-actions { display: flex; gap: 8px; align-items: center; }
.streak-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-2);
  box-shadow: var(--shadow-sm);
  transition: transform .12s var(--ease);
}
.streak-chip:active { transform: scale(.95); }
.streak-chip svg { color: var(--accent); }

/* Verse of the Day — hero card with photo background + glass action bar */
.vod-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0 0 18px;
  box-shadow: var(--shadow-lg);
  isolation: isolate;
  background: var(--hero-grad);
  min-height: 260px;
  display: flex;
  flex-direction: column;
}
.vod-photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: opacity .4s var(--ease);
}
.vod-photo::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,15,31,0.20) 0%, rgba(10,15,31,0.0) 25%, rgba(10,15,31,0.45) 70%, rgba(10,15,31,0.85) 100%);
}
.vod-content {
  position: relative;
  padding: 18px 22px 14px;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.vod-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2.4px;
  color: rgba(243, 226, 196, 0.85);
  font-weight: 700;
  margin-bottom: 6px;
}
.vod-ref {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: #fbf6ea;
  margin-bottom: 8px;
  letter-spacing: -.3px;
}
.vod-text {
  font-family: var(--font-display);
  font-size: clamp(16px, 3.6vw, 19px);
  line-height: 1.4;
  color: #fbf6ea;
  font-weight: 400;
  letter-spacing: -.1px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vod-actions {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 10px 8px;
  background: rgba(8, 12, 26, 0.40);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.vod-act {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: #fbf6ea;
  background: transparent;
  padding: 4px 4px;
  transition: opacity .15s var(--ease), transform .12s var(--ease);
}
.vod-act svg { width: 20px; height: 20px; }
.vod-act:hover { opacity: .85; }
.vod-act:active { transform: scale(.92); }
.vod-act .vod-count {
  font-size: 11px;
  font-weight: 600;
  opacity: .82;
  letter-spacing: .2px;
}
.vod-act.reacted svg { fill: #ef4444; stroke: #ef4444; }

/* Section rails on Today */
.rail-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 4px 12px;
}
.rail-head h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.3px;
  color: var(--ink);
  margin: 0;
}
.continue-rail { margin: 8px 0 18px; }
.continue-track {
  display: flex; gap: 12px; overflow-x: auto;
  padding: 4px 4px 12px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.continue-track::-webkit-scrollbar { display: none; }
.continue-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.continue-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.continue-card .cc-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--accent-2); font-weight: 700; margin-bottom: 6px;
}
.continue-card .cc-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.continue-card .cc-meta {
  margin-top: 8px;
  font-size: 12px; color: var(--ink-soft);
}

/* Discover ("More for you") */
.discover { margin: 16px 0 8px; }
.discover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.dscv {
  text-align: left;
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 18px 18px;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
  position: relative;
}
.dscv:hover { transform: translateY(-2px); border-color: var(--rule-strong); box-shadow: var(--shadow); }
.dscv-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: 2.4px;
  color: var(--accent); font-weight: 700; margin-bottom: 4px;
}
.dscv-title {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600;
  color: var(--ink); line-height: 1.3; margin-bottom: 4px;
}
.dscv-sub { font-size: 13.5px; color: var(--ink-3); line-height: 1.45; }

/* Daily verse — legacy fallback (kept for compatibility) */
.daily-card {
  position: relative;
  background: var(--hero-grad);
  border-radius: var(--radius-lg);
  padding: 32px 28px 24px;
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  margin: 8px 0 24px;
  overflow: hidden;
  isolation: isolate;
}
.daily-card {
  position: relative;
  background: var(--hero-grad);
  border-radius: var(--radius-lg);
  padding: 32px 28px 24px;
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  margin: 8px 0 24px;
  overflow: hidden;
  isolation: isolate;
}
.daily-card::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--hero-glow);
  z-index: -1;
}
.daily-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.4px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 10px;
}
.daily-ref {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: rgba(243, 226, 196, .8);
  margin-bottom: 12px;
  letter-spacing: .2px;
}
.daily-text {
  font-family: var(--font-display);
  font-size: clamp(20px, 4.5vw, 26px);
  line-height: 1.45;
  color: #fbf6ea;
  font-weight: 400;
  letter-spacing: -.2px;
}
.daily-actions {
  margin-top: 22px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.daily-actions button {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(243, 226, 196, .25);
  color: #fbf6ea;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(8px);
  transition: background .15s var(--ease);
}
.daily-actions button:hover { background: rgba(255,255,255,.16); }

/* Quick action cards */
.quickgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.quick {
  text-align: left;
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 20px 18px;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
  box-shadow: var(--shadow-sm);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}
.quick::after {
  content: '→';
  position: absolute;
  top: 18px; right: 18px;
  color: var(--ink-soft);
  font-size: 18px;
  transition: transform .2s var(--ease), color .15s var(--ease);
}
.quick:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--rule-strong);
}
.quick:hover::after { transform: translateX(4px); color: var(--accent); }
.quick-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: 2.4px;
  color: var(--accent); font-weight: 700;
}
.quick-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  padding-right: 28px;
}
.quick-sub { font-size: 14px; color: var(--ink-3); line-height: 1.5; }

/* ---------- READ ---------- */
/* Toolbar reorganized into two rows so nothing overflows on narrow
   phones. Row 1 (nav) = book + chapter stepper, the primary
   navigation. Row 2 (actions) = icon buttons + version selector,
   which used to push the whole page off-screen when there was no
   room. Belt-and-suspenders overflow lock lives on .tab further
   down so no future addition can ever slide the page again. */
.read-toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-bottom: 16px;
  position: sticky;
  top: calc(env(safe-area-inset-top) + 64px);
  z-index: 5;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.read-toolbar-nav {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
}
.read-toolbar-actions {
  display: flex; align-items: center; justify-content: space-around; gap: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--rule);
  min-width: 0;
}
.read-toolbar-actions > button {
  flex: 1 1 0;
  min-width: 0;
}

/* Selects in Settings blocks — matches the field styling used
   elsewhere (subtle bg, hairline border, chevron on the right). */
.settings-select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  padding: 10px 32px 10px 14px;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
  cursor: pointer;
}
.settings-select:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}
.read-toolbar select {
  flex: 1; min-width: 0;
  background: transparent;
  border: 0;
  padding: 10px 26px 10px 12px;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 14px 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.read-toolbar #book-select { flex: 1 1 auto; min-width: 0; }
.chapter-stepper { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }

/* Never let a tab's contents force horizontal page scroll — the
   only thing that should ever pan side to side is a rail that
   opts in with its own overflow-x rules. Kept scoped to .tab (never
   main) because iOS Safari has a known bug where overflow: clip on
   an in-flow parent detaches position: fixed siblings — the bottom
   tab bar was intermittently rendering at document-bottom instead
   of viewport-bottom. */
.tab { min-width: 0; overflow-x: clip; }
main { min-width: 0; }

.chapter {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  padding: 32px 28px 36px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--rule);
}
.chapter-heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 36px);
  font-weight: 600;
  letter-spacing: -.5px;
  margin: 0 0 22px;
  color: var(--ink);
}
/* ---------- Explore (curated topics + plans) ---------- */
.explore-head { margin-bottom: 16px; }
.explore-head h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 6px;
}
.explore-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.explore-tile {
  position: relative;
  border-radius: 16px;
  padding: 18px 16px 16px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
  text-align: left;
  background-size: cover;
  background-position: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.explore-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.explore-tile-topic {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
}
.explore-tile-meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: .85;
}
.explore-tile-progress {
  position: absolute;
  top: 10px; right: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px 8px;
  border-radius: 999px;
  text-shadow: none;
}
.explore-plan-cover {
  height: 180px;
  border-radius: 14px;
  margin-bottom: 14px;
  background: var(--bg-muted);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px var(--rule);
}
.explore-plan-topic {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 700;
}
.explore-plan-days {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.explore-plan-days li {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--ink-2);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.explore-plan-days li.done { opacity: .55; }
.explore-plan-days li.current {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}
.explore-plan-days .epd-theme { flex: 1; min-width: 0; }
.explore-plan-days .epd-day {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
}
.explore-day-passages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.explore-day-passages .epp-chip {
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
}
.explore-day-passages .epp-chip:hover {
  border-color: var(--accent);
  color: var(--ink);
}
.explore-day-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  white-space: pre-wrap;
}
.explore-day-talk {
  margin-top: 18px;
  background: var(--accent-soft);
  border-radius: 14px;
  padding: 14px 16px;
}
.explore-day-talk.hidden { display: none; }
.explore-day-talk-eyebrow {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 700;
  margin-bottom: 6px;
}

/* ---------- Split-view notes pad on the Read tab ---------- */
.notes-pad {
  margin-top: 16px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.notes-pad-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.notes-pad-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.notes-pad-eyebrow {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent-2); font-weight: 700;
}
.notes-pad-title #notes-pad-ref {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notes-pad-tabs {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.notes-pad-tab {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--ink-soft);
  border-radius: 999px;
  cursor: pointer;
}
.notes-pad-tab.active {
  background: var(--accent-soft);
  color: var(--accent-2);
}
#notes-pad-text {
  width: 100%;
  min-height: 180px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  resize: vertical;
  font-family: var(--font-sans);
}
.notes-pad-ai-view {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  white-space: pre-wrap;
  min-height: 180px;
}
.notes-pad-ai-view.hidden { display: none; }
.notes-pad-ai-view.empty { color: var(--ink-soft); font-style: italic; }
.notes-pad-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.notes-pad-actions .btn-primary {
  padding: 10px 18px;
  font-size: 13px;
}

/* When the notes pad is open, the chapter scrolls inside its own area
   so both halves stay visible without scrolling the whole page. */
body.notes-split #chapter {
  max-height: 48vh;
  overflow: auto;
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 18px 18px 6px;
  background: var(--bg-elev);
}
body.notes-split #chapter-heading { margin-top: 0; }

.chapter-body {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.75;
  color: var(--ink);
  letter-spacing: .1px;
}

/* Reading text size — scale only the verse body, not the toolbar,
   nav, headings, or anything else. Controlled by a select in
   Settings ("Reading text size"), persisted to localStorage. Class
   toggled on <body> at boot. sm/md/lg/xl. */
body.rsz-sm .chapter-body { font-size: 17px; line-height: 1.7; }
body.rsz-md .chapter-body { font-size: 19px; line-height: 1.75; }   /* default */
body.rsz-lg .chapter-body { font-size: 22px; line-height: 1.75; }
body.rsz-xl .chapter-body { font-size: 26px; line-height: 1.7; }
body.rsz-xl .verse-num,
body.rsz-lg .verse-num { font-size: .68em; }
.verse { display: inline; }
.verse-num {
  font-family: var(--font-sans);
  font-size: 10px;
  vertical-align: super;
  color: var(--accent-2);
  font-weight: 700;
  margin-right: 5px;
  user-select: none;
  letter-spacing: .5px;
}
.verse-text { padding: 2px 3px; border-radius: 4px; cursor: text; transition: background .15s var(--ease); }
.verse.selected .verse-text { background: var(--accent-soft); }

/* ---------- SEARCH ---------- */
.search-bar {
  display: flex; gap: 8px; align-items: center;
  background: var(--bg-elev);
  border-radius: 999px;
  padding: 6px 6px 6px 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--rule);
  margin-bottom: 16px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.search-bar:focus-within {
  border-color: var(--ink-soft);
  box-shadow: var(--shadow);
}
.search-bar input[type=search] {
  flex: 1;
  background: transparent; border: 0; outline: 0;
  padding: 12px 4px;
  font-size: 16px;
  min-width: 0;
}
.search-bar select {
  background: var(--bg-muted);
  border: 0;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}
.search-bar .btn-primary { padding: 11px 18px; }
.search-meta { color: var(--ink-soft); font-size: 13px; margin: 4px 6px 12px; font-weight: 500; }
.search-results { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.search-result {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  transition: transform .12s var(--ease), border-color .15s var(--ease);
}
.search-result:hover {
  transform: translateY(-1px);
  border-color: var(--rule-strong);
}
.search-result .ref {
  font-size: 11px;
  color: var(--accent-2); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-bottom: 6px;
}
.search-result .txt {
  font-family: var(--font-display);
  font-size: 16px; line-height: 1.5; color: var(--ink);
}
.search-result mark {
  background: var(--accent-soft); color: inherit;
  padding: 0 3px; border-radius: 3px;
  font-weight: 500;
}

/* ---------- CHAT ---------- */
.chat-intro { margin-bottom: 16px; padding: 8px 4px; }
.chat-intro h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 30px);
  margin: 0 0 8px;
  letter-spacing: -.4px;
  font-weight: 600;
}
.chat-intro p { color: var(--ink-3); margin: 0 0 16px; line-height: 1.5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .12s var(--ease);
}
.chip:hover { background: var(--bg-muted); border-color: var(--rule-strong); transform: translateY(-1px); }

.chat-log { display: flex; flex-direction: column; gap: 12px; padding: 6px 0 16px; }
.bubble {
  max-width: 88%;
  padding: 14px 18px;
  border-radius: 22px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 15.5px;
  animation: bubbleIn .25s var(--ease);
}
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.bubble.user {
  align-self: flex-end;
  background: var(--ink-2);
  color: var(--bg);
  border-bottom-right-radius: 8px;
  font-weight: 500;
}
.bubble.assistant {
  align-self: flex-start;
  background: var(--bg-elev);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-bottom-left-radius: 8px;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.65;
  box-shadow: var(--shadow-sm);
}
.bubble.assistant strong { color: var(--accent-2); font-weight: 700; }
.bubble.error {
  background: #fee2e2; color: var(--bad);
  border: 1px solid #fecaca;
  font-family: var(--font-sans); font-size: 14px;
}
.bubble.error { background: rgba(255,122,138,.12); border-color: rgba(255,122,138,.30); color: var(--bad); }
.typing {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 14px;
  padding: 6px 2px;
  display: inline-flex; align-items: center; gap: 4px;
}
.typing::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.chat-form {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom) + var(--tabbar-h));
  padding: 12px 18px 14px;
  background: linear-gradient(180deg, transparent, var(--bg) 30%);
  display: flex; gap: 10px; align-items: flex-end;
  max-width: var(--maxw); margin: 0 auto;
  z-index: 10;
}
.chat-form textarea {
  flex: 1;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 24px;
  padding: 13px 18px;
  font-size: 16px;
  line-height: 1.4;
  resize: none;
  max-height: 180px;
  outline: 0;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.chat-form textarea:focus { border-color: var(--ink-soft); box-shadow: var(--shadow); }
.chat-form .btn-primary {
  padding: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Make space below chat log for the fixed composer */
.tab[data-tab="chat"] { padding-bottom: 88px; }

/* ---------- STUDY ---------- */
.study-builder {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--rule);
  margin-bottom: 20px;
}
.study-builder h2 {
  font-family: var(--font-display);
  margin: 0 0 6px;
  font-size: 24px;
  letter-spacing: -.4px;
  font-weight: 600;
}
.study-form { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.field input {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 13px 14px;
  font-size: 15px;
  outline: 0;
  transition: border-color .15s var(--ease);
}
.field input:focus { border-color: var(--ink-soft); }
.day-picker {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14px;
}
.day-picker > span { color: var(--ink-3); font-weight: 600; margin-right: 6px; }
.day-picker label {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-2);
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.day-picker label:has(input:checked) {
  background: var(--ink-2);
  color: var(--bg);
  border-color: var(--ink-2);
}
.day-picker input[type=radio] { display: none; }

.study-status {
  margin: 16px 0;
  padding: 16px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink-2);
  display: flex; align-items: center; gap: 12px;
}
.study-status::before {
  content: ''; width: 16px; height: 16px;
  border: 2px solid var(--rule-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  flex: 0 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.study-output {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--rule);
}
.study-output h2 {
  font-family: var(--font-display);
  margin: 0 0 6px;
  font-size: 28px;
  letter-spacing: -.5px;
  color: var(--ink);
  font-weight: 600;
}
.study-output .topic { color: var(--ink-3); font-size: 14px; margin-bottom: 20px; }
.study-day {
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.study-day:first-of-type { border-top: 0; padding-top: 4px; }
.study-day h3 {
  font-family: var(--font-display);
  font-size: 22px; margin: 4px 0 6px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -.3px;
}
.study-day .day-meta {
  font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--accent-2); font-weight: 700;
}
.study-day .passage-text {
  font-family: var(--font-display); font-size: 17px; line-height: 1.65;
  background: var(--bg);
  border-left: 3px solid var(--accent);
  padding: 14px 18px;
  border-radius: 0 14px 14px 0;
  margin: 12px 0 16px;
  color: var(--ink-2);
}
.study-day h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--ink-soft); margin: 18px 0 6px; font-weight: 700;
}
.study-day p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.65; color: var(--ink); }
.study-day .memory {
  display: inline-block; margin-top: 12px;
  background: var(--accent-soft); color: var(--accent-2);
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
}

.my-studies { margin-top: 28px; }
.my-studies h3 {
  font-family: var(--font-display);
  font-size: 20px; margin: 0 0 12px;
  color: var(--ink-2);
  font-weight: 600;
  letter-spacing: -.3px;
}
.study-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.study-list li {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  transition: border-color .15s var(--ease);
}
.study-list li:hover { border-color: var(--rule-strong); }
.study-list .title { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.study-list .meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.study-list .actions { display: flex; gap: 6px; flex: 0 0 auto; }
.study-list button {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  transition: background .15s var(--ease);
}
.study-list button:hover { background: var(--bg-muted); }

/* ---------- SETTINGS ---------- */
section[data-tab="settings"] h2 {
  font-family: var(--font-display);
  font-size: 28px;
  margin: 0 0 18px;
  letter-spacing: -.4px;
  font-weight: 600;
}
.setting-block {
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--rule);
}
.setting-block h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-2);
}
.billing-actions {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0;
}
.billing-actions input[type=email] {
  flex: 1 1 220px;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
  outline: 0;
  transition: border-color .15s var(--ease);
}
.billing-actions input[type=email]:focus { border-color: var(--ink-soft); }

/* ---------- BOTTOM TAB BAR ---------- */
.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-top: 1px solid var(--rule);
  z-index: 25;
  padding-bottom: env(safe-area-inset-bottom);
  /* iOS Safari momentum-scroll bug: position: fixed elements visually
     drift during inertial scroll unless they live on their own GPU
     layer. Force compositing so the bar stays glued to the bottom. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tabbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  height: var(--tabbar-h);
}
.tabbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  /* Idle color: was --ink-soft (#71717a) which read as ghost text
     against the blurred bar. Bumped to --ink-2 (#d4d4d8) so the
     labels have real contrast, and font-weight bumped to 700 so
     they hold their shape at small sizes. */
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  transition: color .15s var(--ease), transform .15s var(--ease);
  padding: 6px 4px 4px;
}
.tabbtn svg {
  width: 24px; height: 24px;
  stroke-width: 2.2;
  transition: transform .2s var(--ease);
}
.tabbtn:active { transform: scale(.94); }
.tabbtn.active { color: var(--accent-2); }
.tabbtn.active svg { transform: translateY(-1px); stroke-width: 2.4; }
.tabbtn .label {
  opacity: 1;
}
.tabbtn.active .label { color: var(--accent-2); }

/* Small red count badge overlaying a tab icon (Community tab today,
   more later). Positioned relative to the tab button. Auto-sizes for
   1-digit vs 2-digit counts. */
.tabbtn-badge {
  position: absolute;
  top: 4px;
  right: 30%;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}

/* Home banner shown when the visitor has pending friend requests. */
.friend-requests-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 16px;
  padding: 12px 14px;
  margin: 0 0 14px;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font: inherit;
  transition: transform .12s var(--ease), background .12s var(--ease);
}
.friend-requests-banner:hover { transform: translateY(-1px); }
.frb-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.frb-body { flex: 1; min-width: 0; }
.frb-title {
  font-weight: 700; font-size: 14.5px; line-height: 1.2;
}
.frb-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.frb-chevron { color: var(--accent); flex: 0 0 auto; }

/* ---------- QUIZ ---------- */
.quiz-picker h2 {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -.4px;
  margin: 0 0 4px;
  font-weight: 600;
}
.quiz-picker > p { color: var(--ink-3); margin: 0 0 18px; }
.quiz-controls {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.quiz-meta { display: flex; gap: 14px; flex-wrap: wrap; }
.quiz-meta .field { flex: 1; min-width: 130px; }
.quiz-meta select {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  outline: 0;
}
.quiz-topic-search {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 22px;
}
.quiz-topic-search input {
  flex: 1;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 15px;
  outline: 0;
  min-width: 0;
}
.quiz-topic-search input:focus { border-color: var(--ink-soft); }
.quiz-section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--ink-soft); font-weight: 700;
  margin: 0 0 12px;
}
.quiz-topics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.quiz-topic {
  text-align: left;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
  cursor: pointer;
}
.quiz-topic:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--rule-strong);
}
.quiz-topic .qt-cat {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.8px;
  color: var(--accent-2); font-weight: 700;
}
.quiz-topic .qt-label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

/* Quiz runner */
.quiz-runner { animation: fadeUp .3s var(--ease); }
.quiz-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.quiz-progress { flex: 1; }
.quiz-progress-text { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.quiz-progress-bar {
  margin-top: 6px;
  height: 6px;
  background: var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
#quiz-progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width .35s var(--ease);
  border-radius: 3px;
}
.quiz-card {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
}
.quiz-question {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.4;
  letter-spacing: -.2px;
  color: var(--ink);
  margin-bottom: 22px;
  font-weight: 500;
}
.quiz-choices {
  display: flex; flex-direction: column; gap: 10px;
}
.quiz-choice {
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 14px 18px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.4;
  display: flex; align-items: center; gap: 12px;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .12s var(--ease);
  cursor: pointer;
}
.quiz-choice:hover { background: var(--bg-muted); border-color: var(--rule-strong); transform: translateX(2px); }
.quiz-choice .qc-letter {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--rule);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  flex: 0 0 auto;
}
.quiz-choice[data-state="correct"] {
  background: rgba(22,101,52,.10);
  border-color: var(--good);
  color: var(--good);
  font-weight: 600;
}
.quiz-choice[data-state="correct"] .qc-letter { background: var(--good); color: #fff; }
.quiz-choice[data-state="wrong"] {
  background: rgba(185,28,28,.10);
  border-color: var(--bad);
  color: var(--bad);
}
.quiz-choice[data-state="wrong"] .qc-letter { background: var(--bad); color: #fff; }
.quiz-choice[data-state="dim"] { opacity: .55; pointer-events: none; }
.quiz-choice:disabled { cursor: default; transform: none; }
.quiz-feedback {
  margin-top: 18px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  animation: fadeUp .2s var(--ease);
}
.quiz-feedback-head {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
}
.quiz-feedback-head[data-correct="1"] { color: var(--good); }
.quiz-feedback-head[data-correct="0"] { color: var(--bad); }
.quiz-feedback-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.quiz-feedback-ref {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-2);
  cursor: pointer;
}
.quiz-feedback-ref:hover { color: var(--ink); }
.quiz-actions {
  margin-top: 18px;
  display: flex; justify-content: flex-end;
}

/* Result */
.quiz-result {
  text-align: center;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 36px 24px;
  box-shadow: var(--shadow);
  animation: fadeUp .35s var(--ease);
}
.quiz-score-ring {
  width: 140px; height: 140px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--hero-grad);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  color: #fbf6ea;
  box-shadow: 0 6px 30px rgba(26,39,72,.18);
}
.quiz-result h2 {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -.4px;
  margin: 0 0 6px;
  font-weight: 600;
}
.quiz-result-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 18px;
}
.quiz-review-list { margin-top: 24px; text-align: left; display: grid; gap: 10px; }
.quiz-review-item {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 14px 16px;
}
.quiz-review-q { font-weight: 600; color: var(--ink); margin-bottom: 6px; font-size: 15px; }
.quiz-review-meta { font-size: 13px; color: var(--ink-3); }
.quiz-review-meta strong { color: var(--good); }
.quiz-review-meta em { color: var(--bad); font-style: normal; }

/* Loading */
.quiz-loading {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-3);
}
.quiz-loading-spinner {
  width: 36px; height: 36px;
  margin: 0 auto 16px;
  border: 3px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* ---------- VIDEO RAIL (From the team) ---------- */
.video-rail { margin: 8px 0 18px; }
.video-rail-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 4px 10px;
}
.video-rail-head h3 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0;
}
.video-rail-track {
  display: flex; gap: 12px;
  overflow-x: auto;
  padding: 4px 4px 12px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.video-rail-track::-webkit-scrollbar { display: none; }
.video-card {
  flex: 0 0 auto;
  width: 260px;
  scroll-snap-align: start;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.video-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.video-card .video-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000 center/cover no-repeat;
  position: relative;
}
.video-card .video-thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.35) 100%);
}
.video-card .play-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  transition: transform .2s var(--ease);
}
.video-card:hover .play-overlay { transform: translate(-50%, -50%) scale(1.06); }
.video-card .play-overlay::before {
  content: '';
  width: 0; height: 0;
  border-left: 14px solid var(--ink-2);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.video-card .video-meta { padding: 12px 14px 14px; }
.video-card .video-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-card .video-date {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--ink-soft); font-weight: 600;
  margin-top: 4px;
}

.video-modal-panel { max-width: 760px; }
.video-modal-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow);
}
.video-modal-frame iframe {
  width: 100%; height: 100%;
  display: block;
  border: 0;
}

/* ---------- INSTALL INSTRUCTIONS POPUP ---------- */
.install-steps {
  margin: 0;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.install-steps li { margin-bottom: 8px; }
.install-steps strong { color: var(--ink); font-weight: 700; }
.install-icon {
  display: inline-block;
  width: 16px; height: 16px;
  vertical-align: -3px;
  margin: 0 1px;
}

/* ---------- SHARE CARD MODAL ---------- */
.card-modal {
  position: fixed; inset: 0; z-index: 95;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  padding: 16px;
}
.card-modal:not(.hidden) { pointer-events: auto; }
.card-modal-scrim {
  position: absolute; inset: 0;
  background: rgba(10, 14, 26, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.card-modal:not(.hidden) .card-modal-scrim { opacity: 1; }
.card-modal-panel {
  position: relative;
  background: var(--bg-elev);
  border-radius: 24px;
  padding: 22px;
  padding-top: 56px;     /* room for the close X above content */
  max-width: 460px;
  width: 100%;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  box-shadow: var(--shadow-lg);
  /* Fade-in only — NO transform. `transform` (including
     `transform: scale(1)`) turns the panel into a containing block
     for its fixed-positioned descendants (per CSS Transforms spec),
     which meant our .card-close `position: fixed` was being anchored
     to the panel and env(safe-area-inset-top) pushed it right into
     the content on iPhones with a Dynamic Island. Opacity-only keeps
     the X anchored to the viewport where it belongs. */
  opacity: 0;
  transition: opacity .2s var(--ease);
  display: flex;
  flex-direction: column;
}
.card-modal:not(.hidden) .card-modal-panel { opacity: 1; }
.card-close {
  /* Absolute-anchored to the panel's top-right — the panel is now
     transform-free so a plain position:absolute stays put across
     scroll (per browser layout, absolute descendants of the
     scroll-container don't move with the scrolled content). Sits in
     the padding-top gutter we reserved on .card-modal-panel so it
     never overlaps the title or body text. */
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.card-close:hover { background: var(--rule); }
.card-modal-title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600;
  margin: 0 0 16px;
  padding-right: 40px;
  letter-spacing: -.3px;
}
.card-preview {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-muted);
  margin-bottom: 14px;
}
#card-canvas {
  display: block;
  width: 100%; height: 100%;
}
.card-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  background: var(--bg-muted);
  font-size: 13px;
  transition: opacity .2s var(--ease);
}
.card-loading.hidden { opacity: 0; pointer-events: none; }
.card-themes {
  display: flex; gap: 6px; overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 14px;
  scrollbar-width: none;
}
.card-themes::-webkit-scrollbar { display: none; }
.card-theme {
  flex: 0 0 auto;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.card-theme:hover { background: var(--bg-muted); color: var(--ink-2); }
.card-theme.active {
  background: var(--ink-2);
  color: var(--bg);
  border-color: var(--ink-2);
}
.card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 8px;
  margin-bottom: 10px;
}
.card-actions button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
}
.card-credit {
  font-size: 11px;
  color: var(--ink-soft);
  text-align: center;
  margin: 0;
  letter-spacing: .2px;
}
.card-credit a { color: var(--ink-3); text-decoration: underline; }

/* ---------- VERSE HIGHLIGHTS + NOTES ---------- */
.verse[data-hl="amber"]  .verse-text { background: #fde68a; }
.verse[data-hl="yellow"] .verse-text { background: #fef08a; }
.verse[data-hl="green"]  .verse-text { background: #bbf7d0; }
.verse[data-hl="blue"]   .verse-text { background: #bfdbfe; }
.verse[data-hl="pink"]   .verse-text { background: #fbcfe8; }
.verse[data-hl="purple"] .verse-text { background: #e9d5ff; }
.verse[data-hl="amber"]  .verse-text { background: rgba(253,230,138,.20); color: #fde68a; }
.verse[data-hl="yellow"] .verse-text { background: rgba(254,240,138,.20); color: #fef08a; }
.verse[data-hl="green"]  .verse-text { background: rgba(187,247,208,.18); color: #bbf7d0; }
.verse[data-hl="blue"]   .verse-text { background: rgba(191,219,254,.18); color: #bfdbfe; }
.verse[data-hl="pink"]   .verse-text { background: rgba(251,207,232,.18); color: #fbcfe8; }
.verse[data-hl="purple"] .verse-text { background: rgba(233,213,255,.18); color: #e9d5ff; }
.verse[data-note="1"] .verse-num::after {
  content: '•';
  color: var(--accent);
  margin-left: 1px;
  font-size: 16px;
  vertical-align: -1px;
}

/* ---------- VERSE ACTION SHEET ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: flex-end;
  pointer-events: none;
}
.sheet:not(.hidden) { pointer-events: auto; }
.sheet-scrim {
  position: absolute; inset: 0;
  background: rgba(10, 14, 26, .35);
  opacity: 0;
  transition: opacity .25s var(--ease);
  backdrop-filter: blur(2px);
}
.sheet:not(.hidden) .sheet-scrim { opacity: 1; }
.sheet-panel {
  position: relative;
  background: var(--bg-elev);
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  border-radius: 24px 24px 0 0;
  padding: 8px 22px calc(env(safe-area-inset-bottom) + 22px);
  box-shadow: var(--shadow-lg);
  transform: translateY(110%);
  transition: transform .32s var(--ease);
}
.sheet:not(.hidden) .sheet-panel { transform: translateY(0); }
@media (min-width: 768px) {
  .sheet-panel { border-radius: 24px; margin-bottom: 24px; max-width: 480px; }
}
.sheet-handle {
  width: 36px; height: 4px;
  background: var(--rule-strong);
  border-radius: 2px;
  margin: 0 auto 14px;
}
.sheet-ref {
  font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--accent-2); font-weight: 700;
}
.sheet-quote {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  margin: 6px 0 16px;
  max-height: 6em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheet-section { margin-bottom: 14px; }
.sheet-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.8px;
  color: var(--ink-soft); font-weight: 700;
  margin-bottom: 8px;
}
.hl-row {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.hl {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--rule);
  cursor: pointer;
  transition: transform .12s var(--ease), border-color .12s var(--ease);
}
.hl:hover { transform: scale(1.1); }
.hl.active { border-color: var(--ink-2); transform: scale(1.1); }
.hl-clear {
  background: transparent;
  position: relative;
}
.hl-clear::after {
  content: ''; position: absolute; inset: 50% 4px auto 4px;
  height: 2px; background: var(--ink-3); transform: rotate(-45deg) translateY(-1px);
  border-radius: 1px;
}
.sheet-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.sheet-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 8px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.sheet-btn:hover { background: var(--bg-muted); border-color: var(--rule-strong); }
.sheet-btn[data-active="1"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-2);
}
.note-editor {
  margin-top: 14px;
  display: flex; flex-direction: column; gap: 10px;
  animation: fadeUp .2s var(--ease);
}
.note-editor textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  min-height: 80px;
  outline: 0;
}
.note-editor textarea:focus { border-color: var(--ink-soft); }
.note-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ---------- FRIENDS / COMMUNITY ---------- */
.friends-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.friends-head h2 {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -.4px;
  font-weight: 600;
  margin: 0;
}
.friends-empty {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 30px 24px 28px;
  text-align: left;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.friends-empty h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.3px;
  margin: 0 0 8px;
}
.friends-empty p {
  color: var(--ink-3);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 16px;
}
.friends-empty-avatars {
  position: absolute;
  top: 24px; right: 24px;
  display: flex;
}
.friends-empty-avatars span {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--slate-1), var(--ink-2));
  border: 2px solid var(--bg-elev);
}
.friends-empty-avatars span:nth-child(2) {
  margin-left: -10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.friends-empty-avatars span:nth-child(3) {
  margin-left: -10px;
  background: linear-gradient(135deg, var(--slate-2), var(--slate-1));
}

/* ---- Friends search / requests / nudges (revamp) ---- */
/* Top-of-page pair of "Add friends" affordances — Invite-by-link
   (people who don't have the app) and Search (people who do). Both
   rendered as tap cards so the two paths are obvious side by side. */
.friends-actions { display: grid; gap: 8px; margin: 0 0 6px; }
.friend-action-card {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font: inherit;
  transition: background .12s var(--ease), border-color .12s var(--ease);
}
.friend-action-card:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.friend-action-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.friend-action-body { flex: 1; min-width: 0; }
.friend-action-title { font-weight: 700; font-size: 15px; line-height: 1.2; }
.friend-action-sub   { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.35; }
.friend-action-chevron { color: var(--ink-3); flex: 0 0 auto; }

.friends-search { margin: 0 0 14px; position: relative; }
.friends-search-input-wrap {
  position: relative;
}
.friends-search-icon {
  position: absolute;
  left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}
.friends-search input[type="search"] {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 12px 14px 12px 40px;
  font: inherit;
  color: var(--ink);
  -webkit-appearance: none; appearance: none;
}
.friends-search input[type="search"]:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}
.friends-search-results {
  display: grid; gap: 6px;
  margin-top: 8px;
}
.friends-search-empty { margin-top: 8px; }
.user-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 10px 12px;
}
.user-row .ur-info { flex: 1; min-width: 0; }
.user-row .ur-name { font-weight: 600; font-size: 14px; line-height: 1.2; }
.user-row .ur-meta { font-size: 12px; color: var(--ink-soft); margin-top: 2px; word-break: break-all; }
.user-row .ur-action {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  padding: 7px 14px; cursor: pointer; white-space: nowrap;
}
.user-row .ur-action:hover { background: var(--accent); color: var(--bg); }
.user-row .ur-action[disabled] { opacity: .6; pointer-events: none; }
.user-row .ur-action-ghost {
  background: transparent;
  color: var(--ink-3);
  border-color: var(--rule);
}

.friends-section-title {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 22px 0 10px;
}
.friends-requests, .friends-nudges { display: block; }
#friends-incoming, #friends-outgoing, #friends-nudges-list {
  display: grid; gap: 6px;
}

.nudge-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 12px 14px;
}
.nudge-row .nr-emoji { font-size: 22px; line-height: 1; }
.nudge-row .nr-text { flex: 1; min-width: 0; font-size: 14px; }
.nudge-row .nr-name { font-weight: 600; }
.nudge-row .nr-when { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.nudge-row.unread { background: var(--accent-soft); border-color: var(--rule-strong); }

.nudge-choices { display: grid; gap: 8px; }
.nudge-choice {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 12px 16px;
  cursor: pointer;
  text-align: left;
  font: inherit; color: var(--ink);
  transition: background .12s var(--ease), border-color .12s var(--ease);
}
.nudge-choice:hover { background: var(--accent-soft); border-color: var(--accent); }
.nudge-choice .nc-emoji { font-size: 24px; line-height: 1; }
.nudge-choice .nc-label { font-weight: 600; }

.friends-list { display: grid; gap: 8px; }
.friend-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.friend-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--slate-1), var(--ink-2));
  color: #fbf6ea;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  flex: 0 0 auto;
}
.friend-info { flex: 1; min-width: 0; }
.friend-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 2px;
}
.friend-meta {
  font-size: 12px;
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 8px;
}
.friend-streak {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--accent-2);
  font-weight: 700;
}

.invites-pending { margin-top: 24px; }
.invite-row {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
}
.invite-row .invite-row-info { flex: 1; min-width: 0; font-size: 14px; }
.invite-row .invite-row-meta { font-size: 12px; color: var(--ink-soft); }

.invite-banner {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}
.invite-banner-text { flex: 1; min-width: 200px; color: var(--ink-2); font-size: 14px; }
.invite-banner-actions { display: flex; gap: 8px; }
.invite-banner { background: var(--accent-soft); border-color: rgba(125,211,252,.30); }

/* ---------- DAILY PAUSE + WALKS + BREATHS ---------- */
.pause-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 16px;
}
.pause-card {
  text-align: left;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--bg-elev);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
  min-height: 148px;   /* room for the photo to breathe */
}
.pause-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.pause-card.done { opacity: .6; }
.pause-card.done .pause-card-cta svg { display: none; }
.pause-card-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: 2.4px;
  font-weight: 700; color: var(--accent);
}
.pause-card-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pause-card-ref {
  font-size: 11px; color: var(--ink-soft); font-weight: 600;
}
.pause-card-cta {
  margin-top: auto;                /* pins CTA to the bottom over the photo */
  display: flex; align-items: center; gap: 4px;
  color: var(--ink-2);
  font-size: 13px; font-weight: 700;
}

/* Once the daily nature photo has loaded (applyPauseCardCover adds
   .has-cover), swap the palette to something that reads on top of
   the scrim: crisp white type with a light shadow for legibility,
   and the accent stays warm so the eyebrow still pops. */
.pause-card.has-cover .pause-card-eyebrow,
.pause-card.has-cover .pause-card-title,
.pause-card.has-cover .pause-card-ref,
.pause-card.has-cover .pause-card-cta {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.pause-card.has-cover .pause-card-eyebrow { color: var(--accent-2); }
.pause-card.has-cover .pause-card-ref     { color: rgba(255,255,255,.85); }

/* Parallel translation rendering on Read tab */
.parallel-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.parallel-row:last-child { border-bottom: 0; }
.parallel-cell {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.6;
}
.parallel-cell .pv-num {
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 700;
  color: var(--accent-2);
  letter-spacing: .5px;
  margin-right: 4px;
  vertical-align: super;
}
.parallel-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.8px;
  color: var(--ink-soft); font-weight: 700;
  margin-bottom: 4px;
  text-align: center;
}
.parallel-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 0 8px;
  border-bottom: 2px solid var(--rule);
  margin-bottom: 6px;
}
@media (max-width: 520px) {
  .parallel-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .parallel-row .parallel-cell:last-child { padding-left: 12px; border-left: 3px solid var(--rule); color: var(--ink-3); }
  .parallel-header { grid-template-columns: 1fr 1fr; }
}

/* Prayer journal rows */
.prayer-row {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex; gap: 12px; align-items: flex-start;
}
.prayer-row.answered { opacity: .7; }
.prayer-row .pr-kind {
  flex: 0 0 auto;
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px;
  font-weight: 700;
  padding: 4px 8px; border-radius: 6px;
}
.prayer-row .pr-kind.request    { background: rgba(199,154,94,.15); color: var(--accent-2); }
.prayer-row .pr-kind.gratitude  { background: rgba(22,101,52,.12); color: var(--good); }
.prayer-row .pr-kind.confession { background: rgba(122,141,176,.16); color: var(--slate-1); }
.prayer-row .pr-kind.lament     { background: rgba(185,28,28,.10); color: var(--bad); }
.prayer-row .pr-body { flex: 1; min-width: 0; }
.prayer-row .pr-title { font-weight: 700; font-size: 15px; color: var(--ink); }
.prayer-row .pr-text { font-size: 13px; color: var(--ink-3); line-height: 1.5; margin-top: 4px; }
.prayer-row .pr-meta { font-size: 11px; color: var(--ink-soft); margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.prayer-row .pr-actions { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.prayer-row .pr-actions button {
  background: transparent; border: 1px solid var(--rule);
  border-radius: 999px; padding: 5px 10px;
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  cursor: pointer;
}
.prayer-row .pr-actions button:hover { background: var(--bg); color: var(--ink-2); }
.prayer-row .pr-answer {
  margin-top: 8px;
  background: rgba(22,101,52,.08); border: 1px solid rgba(22,101,52,.25);
  border-radius: 10px; padding: 8px 12px;
  font-size: 13px; line-height: 1.45; color: var(--good);
}

.prayer-filter.active {
  background: var(--ink-2); color: var(--bg); border-color: var(--ink-2);
}

/* Today's reading plan card */
.plan-today {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 18px 20px 16px;
  margin: 0 0 16px;
  box-shadow: var(--shadow-sm);
}
.plan-today-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 2.4px;
  color: var(--accent-2); font-weight: 700;
}
.plan-today-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 4px;
}
.plan-today-readings {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 10px 0 14px;
}
.plan-today-readings .reading-chip {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s var(--ease);
}
.plan-today-readings .reading-chip:hover { background: var(--bg-muted); }
.plan-today-actions { display: flex; gap: 8px; }
.plan-today-actions .btn-ghost { flex: 1; padding: 9px 14px; font-size: 13px; }
.plan-today-actions .btn-primary { flex: 1; padding: 9px 14px; font-size: 13px; }

.walks-rail { margin: 6px 0 18px; }
.walks-rail .rail-head { margin-bottom: 10px; }
.rail-more {
  background: transparent; border: 0;
  font-size: 12px; font-weight: 700;
  color: var(--accent-2);
  letter-spacing: .3px;
  cursor: pointer;
}
.walks-track {
  display: flex; gap: 12px; overflow-x: auto;
  padding: 4px 4px 12px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.walks-track::-webkit-scrollbar { display: none; }
.walk-tile {
  flex: 0 0 220px;
  scroll-snap-align: start;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.walk-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.walk-tile-cover {
  width: 100%; aspect-ratio: 16/9;
  background: var(--hero-grad);
  background-size: cover; background-position: center;
}
.walk-tile-body { padding: 12px 14px 14px; }
.walk-tile-title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  color: var(--ink); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.walk-tile-meta {
  font-size: 11px; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 1.4px;
  font-weight: 700; margin-top: 4px;
}
.walk-tile-progress { color: var(--accent-2); }

/* Walk detail modal */
.walk-cover {
  width: 100%; aspect-ratio: 16/9;
  background: var(--hero-grad);
  background-size: cover; background-position: center;
  border-radius: 14px;
  margin-bottom: 16px;
}
.walk-days { padding-left: 22px; margin: 0; max-height: 280px; overflow-y: auto; }
.walk-days li {
  padding: 6px 0;
  font-size: 14px;
  color: var(--ink-2);
}
.walk-days li.done { color: var(--good); font-weight: 600; }
.walk-days li.current { color: var(--accent-2); font-weight: 700; }
.walk-days .wd-ref { font-size: 11px; color: var(--ink-soft); margin-left: 6px; }

/* Breath verses */
.breaths-list {
  list-style: none; padding: 0; margin: 0;
  max-height: 60vh; overflow-y: auto;
  display: grid; gap: 8px;
}
.breaths-list li {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 12px 14px;
}
.breaths-list .b-text {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600; line-height: 1.4;
  color: var(--ink);
}
.breaths-list .b-ref {
  font-size: 11px; color: var(--accent-2);
  text-transform: uppercase; letter-spacing: 1.4px;
  font-weight: 700; margin-top: 4px;
}

/* Pause player — full screen, photo background */
.pause-modal {
  position: fixed; inset: 0; z-index: 95;
  background: #0a0f1f;
  display: flex; align-items: center; justify-content: center;
}
.pause-modal.hidden { display: none; }
.pause-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: opacity .5s var(--ease);
  z-index: 0;
}
.pause-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at center, rgba(8,12,26,0) 0%, rgba(8,12,26,.65) 100%),
    linear-gradient(180deg, rgba(8,12,26,.55) 0%, rgba(8,12,26,.35) 30%, rgba(8,12,26,.55) 70%, rgba(8,12,26,.85) 100%);
  z-index: 1;
}
.pause-close {
  position: absolute; top: calc(env(safe-area-inset-top) + 16px); right: 16px;
  z-index: 3;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 0; border-radius: 50%;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fbf6ea;
  cursor: pointer;
}
.pause-content {
  position: relative; z-index: 2;
  max-width: 560px;
  padding: 60px 28px calc(env(safe-area-inset-bottom) + 40px);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  color: #fbf6ea;
  min-height: 100dvh;
}
.pause-eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 3px;
  color: rgba(243,226,196,.85); font-weight: 700;
}
.pause-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 5.5vw, 32px); font-weight: 700;
  color: #fbf6ea; margin: 8px 0 6px;
  letter-spacing: -.3px;
}
.pause-ref {
  font-size: 13px; color: rgba(243,226,196,.7);
  font-weight: 600; letter-spacing: .5px;
}
.pause-stage {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: safe center;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--font-display);
  font-size: clamp(18px, 4vw, 22px);
  line-height: 1.55;
  color: #fbf6ea;
  padding: 28px 8px;
  max-width: 32ch;
  white-space: pre-wrap;
  text-align: center;
  scrollbar-width: thin;
  scrollbar-color: rgba(243,226,196,.35) transparent;
}
.pause-stage::-webkit-scrollbar { width: 4px; }
.pause-stage::-webkit-scrollbar-thumb {
  background: rgba(243,226,196,.3);
  border-radius: 2px;
}
.pause-breath {
  font-family: var(--font-display);
  font-size: 14px; font-style: italic;
  color: rgba(243,226,196,.65);
  margin-bottom: 16px;
  min-height: 20px;
  text-align: center;
}
.pause-progress {
  display: flex; gap: 8px; margin-bottom: 18px;
}
.pause-prog-dot {
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  font-weight: 700;
  color: rgba(243,226,196,.4);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(243,226,196,.15);
}
.pause-prog-dot.active { color: var(--accent); border-color: var(--accent); background: rgba(199,154,94,.08); }
.pause-prog-dot.done { color: rgba(243,226,196,.6); }
.pause-controls {
  display: flex; align-items: center; gap: 16px;
}
.pause-btn {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: #fbf6ea;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s var(--ease), transform .12s var(--ease);
}
.pause-btn:hover { background: rgba(255,255,255,.16); }
.pause-btn:active { transform: scale(.92); }
.pause-play-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1207;
  width: 72px; height: 72px;
}
.pause-play-btn:hover { background: var(--accent-2); color: #fff; }
.pause-done {
  margin-top: 18px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #fbf6ea;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.pause-done.hidden { display: none; }
.pause-done:hover { background: rgba(255,255,255,.20); }

/* ---------- AUDIO PLAYER ---------- */
.verse.now-speaking .verse-text {
  background: rgba(125, 211, 252, 0.16);
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.45);
  border-radius: 4px;
}

.audio-player {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(env(safe-area-inset-bottom) + var(--tabbar-h) + 8px);
  background: var(--bg-elev);
  border: 1px solid var(--rule-strong);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  z-index: 40;
  max-width: var(--maxw);
  margin: 0 auto;
  animation: audio-slide-up .25s var(--ease);
}
@keyframes audio-slide-up { from { transform: translateY(110%); opacity: 0; } to { transform: none; opacity: 1; } }
.audio-info { flex: 1; min-width: 0; }
.audio-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.audio-meta {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: .3px;
  margin-top: 2px;
}
.audio-controls { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.audio-btn {
  background: transparent;
  border: 0;
  color: var(--ink-2);
  padding: 8px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s var(--ease), transform .1s var(--ease);
  cursor: pointer;
}
.audio-btn:active { transform: scale(.92); }
.audio-btn:hover { background: var(--bg-muted); }
.audio-play-btn {
  background: var(--ink-2);
  color: var(--bg);
  width: 44px; height: 44px;
  border-radius: 50%;
}
.audio-play-btn:hover { background: var(--ink); }
.audio-speed {
  background: var(--bg-muted);
  border: 0;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  appearance: none; -webkit-appearance: none;
}

/* When audio is active, give the chapter body extra bottom padding
   so the sticky player doesn't cover the last verses */
body.audio-active main { padding-bottom: calc(env(safe-area-inset-bottom) + var(--tabbar-h) + 90px); }

/* ---------- TOAST ---------- */
.toast {
  position: fixed; left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + var(--tabbar-h) + 16px);
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--bg);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  z-index: 100;
  max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 520px) {
  .quickgrid { grid-template-columns: 1fr; }
  .chapter { padding: 28px 22px 32px; }
  .study-output { padding: 24px 20px; }
  .topbar-inner { padding: 8px 14px; }
  main { padding: 14px 14px 32px; }
  .daily-card { padding: 28px 22px 22px; }
}
@media (min-width: 768px) {
  .tabbar { border-radius: 22px; bottom: 16px; left: 16px; right: 16px; border: 1px solid var(--rule); box-shadow: var(--shadow-lg); }
  .tabbar-inner { height: 60px; }
  body { padding-bottom: calc(env(safe-area-inset-bottom) + var(--tabbar-h) + 24px); }
  .toast { bottom: calc(env(safe-area-inset-bottom) + var(--tabbar-h) + 32px); }
  .chat-form { bottom: calc(env(safe-area-inset-bottom) + var(--tabbar-h) + 28px); border-radius: 22px; margin: 0 16px; width: calc(100% - 32px); max-width: calc(var(--maxw) - 32px); left: 50%; transform: translateX(-50%); }
}

/* Hide selects' native chevron consistency */
select { font-family: inherit; }

/* ==================== Games hub ==================== */
.games-hub h2 { margin: 0 0 4px; }
.games-hub > .muted { margin: 0 0 16px; }
.games-hub-grid { display: grid; gap: 10px; }
.game-card {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 16px 18px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #2a1a4a, #5a3a9a);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
  min-height: 96px;
  box-shadow: var(--shadow-sm);
}
.game-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.game-card-wordle      { background: linear-gradient(135deg, #143b3f, #2e7f86); }
.game-card-connections { background: linear-gradient(135deg, #3b2c1a, #8a6b3a); }
.game-card-trivia      { background: linear-gradient(135deg, #1f2a4d, #3a4a78); }
.game-card-eyebrow {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 700; opacity: .8;
}
.game-card-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  margin: 4px 0 4px;
}
.game-card-sub { font-size: 13px; opacity: .9; line-height: 1.4; }

.game-panel { padding: 0; }
.game-panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0 16px;
  flex-wrap: wrap;
}
.game-panel-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  flex: 1; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.game-info-btn {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--rule-strong);
  background: transparent;
  color: var(--ink-3);
  font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
  line-height: 1;
  padding: 0;
}
.game-info-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* How-to-play modal body */
.game-info-body { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.game-info-body p { margin: 0 0 10px; }
.game-info-body ul, .game-info-body ol { margin: 0 0 10px 20px; padding: 0; }
.game-info-body li { margin-bottom: 6px; }
.game-info-body strong { color: var(--ink); }
.gi-swatch {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 4px;
  transform: translateY(-1px);
}
.gi-swatch.wt-green  { background: #4ade80; }
.gi-swatch.wt-yellow { background: #facc15; }
.gi-swatch.wt-gray   { background: #3f3f46; }

/* ---- Featured "Read the Bible in a Year" card on Study tab ---- */
.year-plan-card {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 22px 20px;
  margin: 0 0 20px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #1f2a4d, #3a4a78);
  background-size: cover;
  background-position: center;
  min-height: 148px;
  box-shadow: var(--shadow);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.year-plan-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.year-plan-eyebrow {
  font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-2);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.year-plan-title {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 700;
  line-height: 1.15;
  margin: 6px 0 8px;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.year-plan-sub {
  font-size: 13.5px;
  line-height: 1.45;
  opacity: .95;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  max-width: 34em;
}
.year-plan-cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 700;
  color: #fff;
  padding-top: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.game-panel-status {
  font-size: 12px; color: var(--ink-3);
  min-width: 100px; text-align: right;
}
.game-back { padding: 6px 12px; font-size: 13px; }

/* ---- Wordle ---- */
.wordle-board {
  display: grid; grid-template-rows: repeat(6, 1fr);
  gap: 6px;
  max-width: 340px;
  margin: 0 auto 16px;
}
.wordle-row {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.wordle-tile {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--rule-strong);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 26px; font-weight: 800;
  color: var(--ink);
  text-transform: uppercase;
  background: transparent;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.wordle-tile.filled { border-color: var(--ink-3); }
.wordle-tile.wt-green  { background: #4ade80; border-color: #4ade80; color: #0a0b0d; }
.wordle-tile.wt-yellow { background: #facc15; border-color: #facc15; color: #0a0b0d; }
.wordle-tile.wt-gray   { background: #3f3f46; border-color: #3f3f46; color: #d4d4d8; }
.wordle-msg {
  text-align: center;
  font-size: 13px;
  color: var(--ink-2);
  min-height: 18px;
  margin: 6px 0 12px;
}
.wordle-hint {
  background: var(--accent-soft);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  padding: 10px 14px;
  color: var(--ink);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.4;
  text-align: left;
  margin-bottom: 8px;
}
.game-hint-row {
  display: flex;
  justify-content: center;
  margin: 4px 0 14px;
}
.game-hint-btn {
  padding: 6px 16px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 999px;
}
.game-hint-btn[disabled] {
  opacity: .5;
  cursor: default;
}
.conn-hint {
  background: var(--accent-soft);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  padding: 8px 14px;
  margin-bottom: 6px;
  font-size: 13px;
  text-align: center;
  color: var(--ink);
}
.conn-hint strong { color: var(--accent); }

/* ---- Strands ---- */
.game-card-strands { background: linear-gradient(135deg, #0f3a2e, #2f7d5a); }

.strands-theme {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 12px;
}
.strands-board {
  display: grid;
  grid-template-columns: repeat(var(--cols, 6), 1fr);
  gap: 5px;
  max-width: 360px;
  margin: 0 auto 12px;
}
.strand-cell {
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(15px, 4.2vw, 20px);
  font-weight: 800;
  cursor: pointer;
  transition: background .12s var(--ease), transform .1s var(--ease), box-shadow .12s var(--ease);
  text-transform: uppercase;
  padding: 0;
}
.strand-cell:hover { background: var(--rule-strong); }
.strand-cell.selected {
  background: var(--ink-2);
  color: var(--bg);
  transform: scale(.95);
  box-shadow: 0 0 0 3px var(--accent-2);
}
.strand-cell.word-solved {
  background: rgba(125, 211, 252, .35);
  color: var(--ink);
  cursor: default;
}
.strand-cell.spangram-solved {
  background: rgba(251, 191, 36, .55);
  color: #1a1207;
  cursor: default;
}
.strand-cell.hinted {
  animation: strand-hint-pulse 1.2s ease-in-out infinite;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, .75);
}
@keyframes strand-hint-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(251, 191, 36, .55); }
  50%      { box-shadow: 0 0 0 5px rgba(251, 191, 36, .95); }
}
.strands-current {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--accent-2);
  min-height: 24px;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.strands-msg {
  text-align: center;
  font-size: 13px;
  color: var(--ink-2);
  min-height: 18px;
  margin: 4px 0 12px;
}
.strands-actions {
  display: flex; gap: 8px; justify-content: center;
}
.strands-actions button { flex: 1 1 0; }
.wordle-keyboard {
  display: grid; gap: 6px; max-width: 500px; margin: 0 auto;
}
.wordle-kb-row {
  display: flex; gap: 4px; justify-content: center;
}
.wordle-key {
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
  border: 0;
  border-radius: 6px;
  background: var(--bg-muted);
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s var(--ease);
}
.wordle-key:hover { background: var(--rule-strong); }
.wordle-key.wt-green  { background: #4ade80; color: #0a0b0d; }
.wordle-key.wt-yellow { background: #facc15; color: #0a0b0d; }
.wordle-key.wt-gray   { background: #3f3f46; color: #a1a1aa; }
.wordle-key-wide { flex: 1.6 1 0; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }

/* ---- Connections ---- */
.connections-solved { display: grid; gap: 6px; margin-bottom: 8px; }
.connections-solved-bar {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 10px 14px;
  text-align: center;
}
.connections-solved-bar .cs-name {
  font-weight: 700; font-size: 13px; color: var(--accent);
  text-transform: uppercase; letter-spacing: 1.5px;
}
.connections-solved-bar .cs-items {
  margin-top: 4px; font-size: 13px; color: var(--ink);
}
.connections-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.conn-tile {
  aspect-ratio: 1;
  border: 0;
  border-radius: 10px;
  background: var(--bg-muted);
  color: var(--ink);
  font-weight: 700; font-size: 11px;
  padding: 4px;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  word-break: break-word;
  transition: background .12s var(--ease), transform .1s var(--ease);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.conn-tile:hover { background: var(--rule-strong); }
.conn-tile.selected {
  background: var(--ink-2); color: var(--bg);
  transform: scale(.96);
}
.conn-tile[disabled] { opacity: .5; cursor: default; }
.connections-msg {
  min-height: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.conn-reveal { text-align: left; line-height: 1.5; font-size: 13px; }
.connections-actions {
  display: flex; gap: 8px; justify-content: center;
}
.connections-actions button { flex: 1 1 0; }

/* ---- Friend profile modal ---- */
.fp-hero {
  display: flex; align-items: center; gap: 14px;
  margin: 4px 0 14px;
}
.fp-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.fp-hero-info { flex: 1; min-width: 0; }
.fp-name {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  line-height: 1.15;
}
.fp-meta {
  font-size: 13px; color: var(--ink-3);
  margin-top: 4px;
}
.fp-stats { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.fp-actions {
  display: flex; gap: 8px;
  margin: 6px 0 18px;
}
.fp-actions button { flex: 1 1 0; }
.fp-like-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.fp-like-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.fp-like-btn.active svg { fill: var(--accent); }
.fp-section-title {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 6px 0 10px;
}
.fp-plans { display: grid; gap: 8px; }
.fp-plan-row {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 10px 14px;
}
.fp-plan-kind {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.fp-plan-title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600;
  margin: 3px 0 2px;
}
.fp-plan-progress {
  font-size: 12px;
  color: var(--ink-3);
}