/* ===========================================================
   Polish layer — interactive feel + atmosphere.
   Loaded LAST so it overrides timings without rewriting earlier
   files. Honors prefers-reduced-motion via print.css's global
   reset (which strips animations entirely).
   =========================================================== */

/* ---------- Refined motion easings (shared tokens) ---------- */
:root{
  --ease-out-soft: cubic-bezier(.16,.84,.32,1);
  --ease-out-snap: cubic-bezier(.18,1.04,.36,1);
  --ease-in-out-warm: cubic-bezier(.6,.05,.2,1);
  --glow-gold: 0 0 24px rgba(233,200,112,.35), 0 0 60px rgba(201,162,74,.18);
  --glow-gold-strong: 0 0 32px rgba(233,200,112,.55), 0 0 80px rgba(201,162,74,.30);
  --lift: 0 16px 40px -10px rgba(0,0,0,.55);
}

/* ---------- Ambient starfield over the deep background ---------- */
body::after{
  content:"";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,244,194,.55), transparent 60%),
    radial-gradient(1px 1px at 78% 32%, rgba(168,196,226,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 42% 72%, rgba(233,200,112,.45), transparent 60%),
    radial-gradient(1px 1px at 88% 84%, rgba(255,244,194,.5), transparent 60%),
    radial-gradient(1px 1px at 22% 58%, rgba(168,196,226,.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 65% 12%, rgba(233,200,112,.6), transparent 60%);
  animation: drift 60s linear infinite;
  opacity: .85;
}
@keyframes drift{
  0%   { transform: translate3d(0,0,0) }
  50%  { transform: translate3d(-12px,6px,0) }
  100% { transform: translate3d(0,0,0) }
}
/* Make sure content stays above the starfield */
main, .progress, .home-btn, .site-footer { position: relative; z-index: 1; }

/* ---------- Buttons: shimmer + lift + press ---------- */
.btn, button.btn, .nav-btn, .return-btn, .testament-tab, a.btn {
  position: relative;
  overflow: hidden;
  transition:
    transform .35s var(--ease-out-snap),
    box-shadow .35s var(--ease-out-soft),
    border-color .35s ease,
    color .25s ease,
    background-color .25s ease;
  will-change: transform;
}
.btn::after, .nav-btn::after, .return-btn::after, .testament-tab::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,244,194,.18) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease-out-soft);
  pointer-events: none;
}
.btn:hover, .nav-btn:hover:not([disabled]), .return-btn:hover, .testament-tab:hover, a.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--lift), var(--glow-gold);
}
.btn:hover::after, .nav-btn:hover::after, .return-btn:hover::after, .testament-tab:hover::after {
  transform: translateX(120%);
}
.btn:active, .nav-btn:active, .return-btn:active, .testament-tab:active, a.btn:active {
  transform: translateY(0) scale(.985);
  transition-duration: .08s;
}

/* Primary CTA gets a slow gold breath */
.btn.primary{
  animation: gold-breath 4.6s var(--ease-in-out-warm) infinite;
}
@keyframes gold-breath{
  0%, 100% { box-shadow: 0 0 0 rgba(233,200,112,0), 0 8px 24px -8px rgba(0,0,0,.55); }
  50%      { box-shadow: 0 0 28px rgba(233,200,112,.35), 0 12px 32px -8px rgba(0,0,0,.6); }
}

/* ---------- Home button: subtle idle pulse, snap on hover ---------- */
.home-btn{
  transition: transform .25s var(--ease-out-snap), box-shadow .3s ease, background-color .25s ease;
}
.home-btn.visible{ animation: home-pulse 5s ease-in-out infinite; }
.home-btn:hover{ transform: scale(1.06); box-shadow: var(--glow-gold-strong); }
@keyframes home-pulse{
  0%,100%{ box-shadow: 0 0 0 rgba(233,200,112,0); }
  50%    { box-shadow: 0 0 22px rgba(233,200,112,.4); }
}

/* ---------- Progress bar shimmer ---------- */
.progress-fill{
  background-image: linear-gradient(90deg,
    var(--gold-deep) 0%,
    var(--gold) 35%,
    var(--gold-bright) 50%,
    var(--gold) 65%,
    var(--gold-deep) 100%);
  background-size: 240% 100%;
  animation: progress-shimmer 4s linear infinite;
}
@keyframes progress-shimmer{
  0%   { background-position: 0% 0%; }
  100% { background-position: 240% 0%; }
}

/* ---------- Book card: lift + gold edge + parchment glow ---------- */
.book-card{
  transition:
    transform .45s var(--ease-out-snap),
    box-shadow .45s var(--ease-out-soft),
    border-color .45s ease,
    background-color .45s ease;
  will-change: transform;
}
.book-card::before{
  content:"";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, rgba(233,200,112,.18), transparent 70%);
  opacity: 0; transition: opacity .45s ease;
  pointer-events: none;
}
.book-card{ position: relative; }
.book-card:hover{
  transform: translateY(-4px);
  border-color: var(--gold-bright) !important;
  box-shadow: var(--lift), var(--glow-gold);
}
.book-card:hover::before{ opacity: 1; }
.book-card h4{ transition: color .35s ease, letter-spacing .35s ease; }
.book-card:hover h4{ color: var(--gold-bright); letter-spacing: .03em; }

/* ---------- Chapter cell: gold glow on annotated, gentle scale ---------- */
.chapter-cell{
  transition:
    transform .25s var(--ease-out-snap),
    background-color .25s ease,
    color .25s ease,
    box-shadow .35s ease,
    border-color .25s ease;
  cursor: pointer;
}
.chapter-cell:hover{
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.55), 0 0 18px rgba(201,162,74,.35);
}
.chapter-cell.has-content{ position: relative; }
.chapter-cell.has-content::after{
  content: "";
  position: absolute; inset: -2px;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(201,162,74,.2) inset;
  opacity: .7; pointer-events: none;
  transition: opacity .35s ease, box-shadow .35s ease;
}
.chapter-cell.has-content:hover::after{
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(233,200,112,.55) inset, 0 0 24px rgba(233,200,112,.35);
}
.chapter-dot{
  display: inline-block;
  animation: dot-pulse 2.6s ease-in-out infinite;
}
@keyframes dot-pulse{
  0%,100%{ opacity: .55; transform: scale(1); }
  50%    { opacity: 1;   transform: scale(1.25); }
}

/* ---------- Cross-reference link: animated underline ---------- */
.cr-link{
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(var(--gold-bright), var(--gold-bright));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size .35s var(--ease-out-soft), color .25s ease;
}
.cr-link:hover{
  background-size: 100% 1px;
  color: var(--gold-bright);
}

/* ---------- Testament tabs: indicator slide ---------- */
.testament-tabs{ position: relative; }
.testament-tab{
  position: relative;
}
.testament-tab::before{
  content:"";
  position: absolute; left: 12%; right: 12%; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  transform: scaleX(0); transform-origin: center;
  transition: transform .45s var(--ease-out-snap);
}
.testament-tab.active::before, .testament-tab:hover::before{ transform: scaleX(1); }

/* ---------- Verse blocks: scroll-revealed ---------- */
.verse-block, .doctrine-block, .annot-section{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease-out-soft), transform .7s var(--ease-out-soft);
}
.verse-block.in-view, .doctrine-block.in-view, .annot-section.in-view{
  opacity: 1; transform: none;
}
/* Stagger inside a section */
.annot-section.in-view .verse-block:nth-child(odd){  transition-delay: .04s; }
.annot-section.in-view .verse-block:nth-child(even){ transition-delay: .09s; }

/* ---------- Verse number: illuminated cap feel ---------- */
.verse-num{
  position: relative;
  display: inline-block;
  transition: transform .35s var(--ease-out-snap), color .35s ease, text-shadow .35s ease;
}
.verse-block:hover .verse-num{
  color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(233,200,112,.6);
  transform: scale(1.06);
}

/* ---------- Key verse: gentle gold tint, no idle shimmer ---------- */
/* Reading content stays still. The italic styling + parchment-gold
   color already communicates that this is the quoted key verse. */
.key-verse-section .key-verse em{
  color: var(--gold-bright);
}
@keyframes key-verse-shimmer{
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ---------- Section headings drop in on first load ---------- */
.title{ animation: title-rise 1.1s var(--ease-out-soft) both; }
.eyebrow{ animation: eyebrow-fade 1.4s var(--ease-out-soft) .15s both; }
.lede{ animation: lede-fade 1.2s var(--ease-out-soft) .25s both; }
@keyframes title-rise{
  from{ opacity: 0; transform: translateY(18px); letter-spacing: .04em; filter: blur(2px); }
  to  { opacity: 1; transform: none;             letter-spacing: 0;     filter: blur(0); }
}
@keyframes eyebrow-fade{
  from{ opacity: 0; letter-spacing: .6em; }
  to  { opacity: 1; letter-spacing: .3em; }
}
@keyframes lede-fade{
  from{ opacity: 0; transform: translateY(8px); }
  to  { opacity: 1; transform: none; }
}

/* ---------- Site footer fade-in ---------- */
.site-footer{ animation: lede-fade 1.6s var(--ease-out-soft) both; }
.site-footer nav a{ transition: color .25s ease, transform .25s ease; }
.site-footer nav a:hover{ transform: translateY(-1px); }

/* ---------- Skip link slick reveal ---------- */
.skip-link{
  transition: transform .3s var(--ease-out-snap), left .3s var(--ease-out-snap);
}
.skip-link:focus{
  transform: translateY(0);
  animation: skip-glow 1.6s ease-in-out infinite;
}
@keyframes skip-glow{
  0%,100%{ box-shadow: 0 0 0 rgba(233,200,112,0); }
  50%    { box-shadow: 0 0 22px rgba(233,200,112,.55); }
}

/* ---------- Return button: arrow drift on hover ---------- */
.return-btn{ display: inline-flex; align-items: center; gap: .35rem; }
.return-btn::before{
  content: "\2190";
  display: inline-block;
  transition: transform .35s var(--ease-out-snap);
}
.return-btn{
  /* hide the literal "← " baked into the prerendered text — replaced by ::before */
  font-size: inherit;
}
.return-btn:hover::before{ transform: translateX(-4px); }

/* The prerendered HTML already includes "← " in text. To avoid doubling,
   we don't show ::before if the visible label starts with the arrow.
   Safer: only apply the ::before drift when no arrow exists. Toggle via
   a JS hook below. */
.return-btn.no-glyph::before{ content: "\2190"; }
.return-btn:not(.no-glyph)::before{ content: ""; }

/* ---------- Page transition: fade between screens ---------- */
#app > .screen{ animation: screen-in .55s var(--ease-out-soft) both; }
@keyframes screen-in{
  from{ opacity: 0; transform: translateY(10px); }
  to  { opacity: 1; transform: none; }
}

/* ---------- Outline list: cursor highlights row ---------- */
.outline-list li{
  padding: .35rem .25rem;
  border-left: 2px solid transparent;
  transition: border-color .3s ease, background-color .3s ease, padding-left .3s var(--ease-out-snap);
}
.outline-list li:hover{
  border-left-color: var(--gold);
  background-color: rgba(201,162,74,.06);
  padding-left: .75rem;
}

/* ---------- Doctrine card hover ---------- */
.doctrine-block{
  transition: transform .35s var(--ease-out-snap), box-shadow .35s ease, border-color .35s ease;
}
.doctrine-block:hover{
  transform: translateY(-2px);
  box-shadow: var(--lift);
}

/* ---------- Selection color ---------- */
::selection{ background: rgba(233,200,112,.35); color: var(--parchment); }

/* ---------- Smooth scrolling ---------- */
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

/* ===========================================================
   Gender / figure cards — SVG-only liveliness.
   Idle breathing, weight-shift sway, halo + lift on hover.
   No AI imagery. Pure vector + CSS transforms.
   =========================================================== */

.gender-card{
  position: relative;
  overflow: hidden;
  transition:
    transform .5s var(--ease-out-snap),
    box-shadow .55s var(--ease-out-soft),
    border-color .5s ease,
    background-color .5s ease;
  cursor: pointer;
}

/* Warm radial spotlight behind the figure */
.gender-card::before{
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,244,194,.14), transparent 55%),
    radial-gradient(circle at 50% 95%, rgba(201,162,74,.10), transparent 60%);
  opacity: .55;
  transition: opacity .6s ease, transform .8s var(--ease-out-soft);
  pointer-events: none;
}

/* Floor-shadow ellipse under the figure */
.gender-card::after{
  content: "";
  position: absolute;
  left: 22%; right: 22%;
  bottom: 22%;
  height: 14px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.45), transparent 70%);
  filter: blur(2px);
  opacity: .55;
  transform-origin: center;
  animation: floor-shadow 4.2s var(--ease-in-out-warm) infinite;
  pointer-events: none;
}

.gender-card svg{
  transform-origin: 50% 70%;
  animation:
    figure-breathe 4.2s var(--ease-in-out-warm) infinite,
    figure-sway   7.6s var(--ease-in-out-warm) infinite;
  transition: transform .5s var(--ease-out-snap), filter .5s ease;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.55));
  will-change: transform;
}

/* Subtle chest rise/fall — the whole figure inflates ~1.5% */
@keyframes figure-breathe{
  0%, 100% { transform: scale(1)       translateY(0); }
  50%      { transform: scale(1.015)   translateY(-2px); }
}

/* Weight-shift — barely 0.6deg, like standing at rest */
@keyframes figure-sway{
  0%, 100% { transform: rotate(0deg)   translateX(0); }
  25%      { transform: rotate(.6deg)  translateX(2px); }
  75%      { transform: rotate(-.6deg) translateX(-2px); }
}

/* The shadow shrinks as the figure rises — matches the breath */
@keyframes floor-shadow{
  0%, 100% { transform: scale(1);    opacity: .55; }
  50%      { transform: scale(.92);  opacity: .42; }
}

.gender-card h3{
  position: relative;
  z-index: 2;
  transition: color .4s ease, letter-spacing .4s ease, text-shadow .4s ease;
}

/* Hover state: gold halo, lift, figure leans toward you */
.gender-card:hover{
  transform: translateY(-6px);
  border-color: var(--gold-bright) !important;
  box-shadow:
    0 24px 50px -16px rgba(0,0,0,.65),
    var(--glow-gold-strong);
}
.gender-card:hover::before{
  opacity: 1;
  transform: scale(1.05);
}
.gender-card:hover svg{
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.6))
          drop-shadow(0 0 22px rgba(233,200,112,.35));
  animation-play-state: running;
  /* Compose hover-scale on top by upping the breathe range slightly */
  animation-name: figure-breathe-strong, figure-sway;
}
@keyframes figure-breathe-strong{
  0%, 100% { transform: scale(1.03)   translateY(-2px); }
  50%      { transform: scale(1.055)  translateY(-5px); }
}
.gender-card:hover h3{
  color: var(--gold-bright);
  letter-spacing: .04em;
  text-shadow: 0 0 18px rgba(233,200,112,.35);
}

/* Keyboard focus parity with hover */
.gender-card:focus-visible{
  transform: translateY(-6px);
  outline: 2px solid var(--gold-bright);
  outline-offset: 4px;
  box-shadow:
    0 24px 50px -16px rgba(0,0,0,.65),
    var(--glow-gold-strong);
}

/* When a selection is made, dim the unchosen sibling */
.gender-grid:has(.gender-card.is-choosing) .gender-card:not(.is-choosing){
  opacity: .35;
  filter: saturate(.6);
}

/* Gentle pull on the selection hint to invite the click */
.selection-hint{
  animation: hint-breath 3.4s var(--ease-in-out-warm) infinite;
}
@keyframes hint-breath{
  0%, 100% { opacity: .55; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-2px); }
}

/* ===========================================================
   3D + WAVE MOTION LAYER
   ===========================================================
   Adds depth and a gentle scroll-linked wave. Uses modern CSS
   scroll-driven animations where supported; older browsers
   simply keep the existing fade-in transitions.
   =========================================================== */

/* Set a viewing perspective on the document so child translateZ
   transforms actually feel three-dimensional. */
html{
  perspective: 1400px;
  perspective-origin: 50% 30%;
}

/* The starfield gets parallax depth via a slower scroll-timeline */
@supports (animation-timeline: scroll()){
  body::after{
    animation: drift 60s linear infinite, star-parallax linear;
    animation-timeline: auto, scroll(root);
  }
  @keyframes star-parallax{
    from { transform: translate3d(0,    0, 0); }
    to   { transform: translate3d(0, -120px, 0); }
  }
}

/* ---- Scroll-driven WAVE reveal for verses, doctrines, cards ----
   Each block enters from below with a slight sideways sway and
   subtle Z-depth push, then settles. Uses view-timeline so the
   animation tracks the element's own intersection. */
@supports (animation-timeline: view()){
  .verse-block,
  .doctrine-block,
  .book-card,
  .chapter-cell.has-content {
    /* Disable the JS-class-based reveal — scroll-timeline owns it */
    opacity: 1;
    transform: none;
    animation: wave-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }
  @keyframes wave-rise{
    0%   { opacity: 0; transform: translate3d(-12px, 48px, -80px) rotateX(8deg); filter: blur(2px); }
    60%  { opacity: 1; transform: translate3d(  4px, -4px,   0px) rotateX(-1deg); filter: blur(0); }
    100% { opacity: 1; transform: translate3d(  0,    0,     0) rotateX(0deg);    filter: blur(0); }
  }

  /* Stagger an off-phase sway on alternating items so a list of
     verses reads like a slow wave moving down the page. */
  .verse-block:nth-child(even){
    animation-name: wave-rise-alt;
  }
  @keyframes wave-rise-alt{
    0%   { opacity: 0; transform: translate3d(12px, 48px, -80px) rotateX(8deg); filter: blur(2px); }
    60%  { opacity: 1; transform: translate3d(-4px, -4px,   0px) rotateX(-1deg); filter: blur(0); }
    100% { opacity: 1; transform: translate3d( 0,    0,     0) rotateX(0deg);    filter: blur(0); }
  }
}

/* ---- Parallax on big headings & ledes (scroll-linked drift) ---- */
@supports (animation-timeline: scroll()){
  .stage > .title,
  .stage > .eyebrow,
  .stage > .lede{
    animation: hero-parallax linear;
    animation-timeline: scroll(root);
    animation-range: 0 80vh;
  }
  @keyframes hero-parallax{
    from { transform: translateY(0)     scale(1);   opacity: 1; }
    to   { transform: translateY(-40px) scale(.985); opacity: .85; }
  }
}

/* ---- 3D depth on book cards: hover tilt baseline (CSS only) ----
   The mouse-tracked version below adds finer control via JS. */
.book-grid, .gender-grid{ transform-style: preserve-3d; }
.book-card, .gender-card{
  transform-style: preserve-3d;
  transition:
    transform .45s var(--ease-out-snap),
    box-shadow .55s var(--ease-out-soft),
    border-color .45s ease;
}
.book-card{ will-change: transform; }

/* JS sets these custom properties on mousemove. Defaults are zero. */
.book-card{
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --tilt-lift: 0px;
  --glare-x: 50%;
  --glare-y: 50%;
}
.book-card.tilting{
  transform:
    translate3d(0, var(--tilt-lift), 0)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));
  box-shadow:
    0 24px 50px -16px rgba(0,0,0,.65),
    var(--glow-gold-strong);
}
/* Glare highlight that tracks the cursor */
.book-card::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--glare-x) var(--glare-y),
    rgba(255,244,194,.22), transparent 45%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.book-card.tilting::after{ opacity: 1; }

/* ---- Screen transitions: slide with a hint of Z-depth ---- */
#app > .screen{
  animation: screen-in-3d .7s var(--ease-out-soft) both;
}
@keyframes screen-in-3d{
  from{ opacity: 0; transform: translate3d(0, 24px, -60px) rotateX(2deg); filter: blur(1px); }
  to  { opacity: 1; transform: translate3d(0, 0,     0)    rotateX(0deg); filter: blur(0); }
}

/* ---- The chapter detail floats forward slightly when scrolling ---- */
@supports (animation-timeline: view()){
  .chapter-header{
    animation: chapter-header-rise linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 40%;
  }
  @keyframes chapter-header-rise{
    from{ transform: translateZ(-30px) translateY(0); opacity: .9; }
    to  { transform: translateZ(0)     translateY(-8px); opacity: 1; }
  }
}

/* ---- Reduced-motion: kill all of the above ---- */
@media (prefers-reduced-motion: reduce){
  html{ perspective: none; }
  .verse-block, .doctrine-block, .book-card, .chapter-cell.has-content,
  .stage > .title, .stage > .eyebrow, .stage > .lede,
  .chapter-header, #app > .screen{
    animation: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}

/* ===========================================================
   CHAPTER PLACEHOLDER — "Annotation in progress"
   Replaces the dim original layout with a warm, animated card
   in the site's gold/parchment language. Fixes the invisible
   2 Peter quote (was --ink on a navy background).
   =========================================================== */

.chapter-stub{
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(233,200,112,.10), transparent 65%),
    radial-gradient(ellipse at 50% 100%, rgba(201,162,74,.06), transparent 60%),
    linear-gradient(180deg, rgba(244,235,217,.04), rgba(244,235,217,.015));
  border: 1px solid rgba(201,162,74,.32);
  border-radius: 8px;
  padding: 3.2rem 2.4rem 2.6rem;
  text-align: center;
  margin: 3rem auto;
  max-width: 760px;
  overflow: hidden;
  box-shadow:
    0 24px 60px -24px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,244,194,.05);
  animation: stub-rise .9s var(--ease-out-soft) both;
}
@keyframes stub-rise{
  from{ opacity: 0; transform: translateY(20px); }
  to  { opacity: 1; transform: none; }
}

/* Subtle shimmering gold edge */
.chapter-stub::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    transparent 0%,
    rgba(233,200,112,.45) 35%,
    transparent 55%,
    rgba(233,200,112,.35) 80%,
    transparent 100%);
  background-size: 200% 200%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: stub-edge 7s linear infinite;
}
@keyframes stub-edge{
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 200%; }
}

/* The sparkle becomes a slow-rotating, breathing illumination */
.chapter-stub .stub-icon{
  font-size: 2.6rem;
  color: var(--gold-bright);
  text-align: center;
  margin-bottom: .8rem;
  text-shadow:
    0 0 18px rgba(233,200,112,.55),
    0 0 38px rgba(201,162,74,.35);
  animation:
    stub-spin 18s linear infinite,
    stub-breathe 3.6s var(--ease-in-out-warm) infinite;
  display: inline-block;
}
@keyframes stub-spin{
  from{ transform: rotate(0deg); }
  to  { transform: rotate(360deg); }
}
@keyframes stub-breathe{
  0%,100%{ filter: brightness(.95); }
  50%    { filter: brightness(1.25) drop-shadow(0 0 12px rgba(233,200,112,.6)); }
}

.chapter-stub h3{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem;
  color: var(--gold-bright);
  font-style: italic;
  margin: .4rem 0 1.1rem;
  letter-spacing: .01em;
}

.chapter-stub > p{
  color: var(--parchment-dim);
  line-height: 1.75;
  font-size: 1.08rem;
  max-width: 56ch;
  margin: 0 auto 1.1rem;
}

.chapter-stub .stub-meta{
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin: 1.6rem 0 1rem;
  opacity: .9;
}

/* The "what you'll find here" mini-list */
.chapter-stub .stub-promises{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem .85rem;
  margin: 1.4rem auto 1.6rem;
  max-width: 600px;
  padding: 0;
  list-style: none;
}
.chapter-stub .stub-promises li{
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--parchment-dim);
  background: rgba(201,162,74,.08);
  border: 1px solid rgba(201,162,74,.22);
  padding: .35rem .75rem;
  border-radius: 999px;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--ease-out-snap);
}
.chapter-stub .stub-promises li::before{
  content: "✓ ";
  color: var(--gold-bright);
  font-weight: 700;
  margin-right: .15rem;
}
.chapter-stub .stub-promises li:hover{
  transform: translateY(-2px);
  background: rgba(233,200,112,.16);
  border-color: rgba(233,200,112,.45);
  color: var(--parchment);
}

/* The bottom quote — was invisible. Now properly readable with a
   candle-glow shimmer matching the key-verse treatment elsewhere. */
.chapter-stub .stub-quote{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--parchment);            /* not --ink ! */
  text-align: center;
  margin: 1.8rem auto 0;
  max-width: 560px;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(201,162,74,.28);
  opacity: .92;
}
.chapter-stub .stub-quote em{
  background: linear-gradient(90deg, var(--parchment), var(--gold-bright) 50%, var(--parchment) 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: key-verse-shimmer 12s ease-in-out infinite;
}
.chapter-stub .stub-quote .stub-quote-ref{
  display: block;
  margin-top: .6rem;
  font-style: normal;
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .9;
}

/* The "jump to the latest annotated chapter" CTA */
.chapter-stub .stub-cta{
  display: inline-block;
  margin-top: 1.6rem;
  padding: .7rem 1.4rem;
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--bg-deep);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border: none;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  transition: transform .3s var(--ease-out-snap), box-shadow .35s ease;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.55);
}
.chapter-stub .stub-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px rgba(0,0,0,.6), 0 0 28px rgba(233,200,112,.45);
}

@media (prefers-reduced-motion: reduce){
  .chapter-stub, .chapter-stub::before, .chapter-stub .stub-icon,
  .chapter-stub .stub-quote em{
    animation: none !important;
  }
}

/* ===========================================================
   LANGUAGE BANNER + SWITCHER
   =========================================================== */

.lang-banner{
  position: fixed; left: 50%; bottom: 1.2rem;
  transform: translateX(-50%) translateY(140%);
  z-index: 9000;
  max-width: min(540px, calc(100vw - 1.5rem));
  background: linear-gradient(180deg, rgba(20,24,38,.98), rgba(10,14,26,.98));
  border: 1px solid rgba(201,162,74,.35);
  border-radius: 14px;
  box-shadow: 0 22px 60px -16px rgba(0,0,0,.7), 0 0 24px rgba(233,200,112,.18);
  backdrop-filter: blur(8px);
  transition: transform .45s var(--ease-out-snap), opacity .35s ease;
  opacity: 0;
}
.lang-banner-shown{ transform: translateX(-50%) translateY(0); opacity: 1; }
.lang-banner-leaving{ transform: translateX(-50%) translateY(140%); opacity: 0; }

.lang-banner-inner{
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.lang-banner-text{
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
  color: var(--parchment);
  flex: 1 1 220px;
  text-align: center;
}
.lang-banner-text strong{ color: var(--gold-bright); }
.lang-banner-btn{
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .55rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(201,162,74,.45);
  background: transparent;
  color: var(--parchment);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, transform .25s var(--ease-out-snap);
}
.lang-banner-btn.switch{
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--bg-deep);
  border-color: transparent;
  font-weight: 600;
}
.lang-banner-btn:hover{ transform: translateY(-1px); }
.lang-banner-btn.switch:hover{ box-shadow: 0 8px 22px -6px rgba(233,200,112,.5); }

/* Footer language switcher */
.lang-switcher{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: .8rem auto 0;
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--parchment-dim);
}
.lang-switcher select{
  background: rgba(10,14,26,.6);
  color: var(--parchment);
  border: 1px solid rgba(201,162,74,.3);
  border-radius: 6px;
  padding: .35rem .6rem;
  font-family: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.lang-switcher select:focus-visible{ outline: 2px solid var(--gold-bright); }

/* Localized commentary-in-progress notice on chapter pages */
.commentary-i18n-notice{
  margin: 1.2rem auto;
  max-width: 720px;
  padding: .85rem 1.1rem;
  border: 1px dashed rgba(201,162,74,.4);
  border-radius: 8px;
  background: rgba(201,162,74,.06);
  color: var(--parchment-dim);
  font-family: 'Inter', sans-serif;
  font-size: .88rem;
  text-align: center;
}
.commentary-i18n-notice strong{ color: var(--gold-bright); }

/* ===========================================================
   TRANSLATED-IN-LOCALE INDICATOR
   ===========================================================
   On a /<locale>/ book page, chapters that have a translation
   in the active locale glow brightly. Chapters that only have
   English commentary keep the subdued gold dot. Placeholders
   stay neutral. Saves the reader from hunting through 1,189
   cells looking for what's actually in their language.
   =========================================================== */

.chapter-cell.in-locale{
  background: linear-gradient(180deg, rgba(233,200,112,.18), rgba(201,162,74,.10));
  border-color: rgba(233,200,112,.6);
  box-shadow:
    0 0 0 1px rgba(233,200,112,.45) inset,
    0 0 18px rgba(233,200,112,.35),
    0 6px 16px -6px rgba(0,0,0,.55);
  position: relative;
  z-index: 1;
}
.chapter-cell.in-locale a{
  color: var(--gold-bright);
  font-weight: 600;
  text-shadow: 0 0 12px rgba(233,200,112,.5);
}
.chapter-cell.in-locale:hover{
  transform: translateY(-3px) scale(1.07);
  box-shadow:
    0 0 0 1px rgba(255,244,194,.7) inset,
    0 0 32px rgba(233,200,112,.55),
    0 12px 24px -8px rgba(0,0,0,.6);
}

/* The locale-dot (sparkle ✦) instead of the English bullet */
.chapter-cell.in-locale .chapter-dot.locale-dot{
  color: var(--gold-bright);
  font-size: 1.05em;
  display: inline-block;
  filter: drop-shadow(0 0 6px rgba(233,200,112,.7));
  animation: locale-dot-pulse 2.8s ease-in-out infinite;
}
@keyframes locale-dot-pulse{
  0%, 100% { transform: scale(1)   rotate(0deg); opacity: .8; }
  50%      { transform: scale(1.25) rotate(180deg); opacity: 1; }
}

/* English-only annotated cells: keep dot but dim against locale ones */
.chapter-cell.has-content:not(.in-locale) .chapter-dot{
  color: var(--gold);
  opacity: .55;
}
.chapter-cell.has-content:not(.in-locale){
  background: rgba(244,235,217,.02);
}

/* Legend at the top of the book grid */
.chapter-legend{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: 1.2rem auto 1.8rem;
  padding: .75rem 1rem;
  border-radius: 10px;
  background: rgba(20,24,38,.4);
  border: 1px solid rgba(201,162,74,.18);
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  color: var(--parchment-dim);
  max-width: 760px;
}
.chapter-legend .legend-item{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.chapter-legend .legend-swatch{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1rem;
  border: 1px solid rgba(201,162,74,.4);
}
.chapter-legend .swatch-locale{
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(233,200,112,.22), rgba(201,162,74,.10));
  border-color: rgba(233,200,112,.6);
  box-shadow: 0 0 12px rgba(233,200,112,.35);
}
.chapter-legend .swatch-en{
  color: var(--gold);
  background: rgba(244,235,217,.04);
  opacity: .75;
}
.chapter-legend .swatch-stub{
  color: var(--parchment-dim);
  background: transparent;
  opacity: .55;
}

@media (prefers-reduced-motion: reduce){
  .chapter-cell.in-locale .chapter-dot.locale-dot{ animation: none; }
}

/* ===========================================================
   CARD-GAME STYLE BOOK HUB
   ===========================================================
   Each book becomes a collectible-style card. Tier reflects
   translation completion in the active locale:
     tier-complete  → all chapters in user's language: bright glow
     tier-partial   → some chapters: mid-glow
     tier-en-only   → English commentary only: muted gold dot
     tier-empty     → unwritten: dim "coming soon"
   English hub uses the same tiers based on annotation completeness.
   =========================================================== */

.book-card-game{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.4rem 1.1rem;
  min-height: 130px;
  border: 1px solid rgba(201,162,74,.22);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(20,24,38,.92), rgba(10,14,26,.92));
  overflow: hidden;
  transform-style: preserve-3d;
  text-decoration: none;
  color: inherit;
}
.book-card-game h4,
.book-card-game .theme,
.book-card-game .card-ribbon{
  text-decoration: none;
}

/* Decorative card frame — corner brackets */
.book-card-game .card-frame{
  position: absolute; inset: 6px;
  border-radius: 8px;
  pointer-events: none;
  background:
    linear-gradient(135deg, currentColor 0 14px, transparent 14px) top    left    / 22px 22px no-repeat,
    linear-gradient(225deg, currentColor 0 14px, transparent 14px) top    right   / 22px 22px no-repeat,
    linear-gradient(45deg,  currentColor 0 14px, transparent 14px) bottom left    / 22px 22px no-repeat,
    linear-gradient(-45deg, currentColor 0 14px, transparent 14px) bottom right   / 22px 22px no-repeat;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1.5px;
  opacity: .55;
  color: var(--gold);
  transition: opacity .4s ease, color .4s ease;
}

/* Glow halo behind the card content */
.book-card-game .card-glow{
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(233,200,112,.18), transparent 70%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

/* Top-right gem badge */
.book-card-game .card-badge{
  position: absolute;
  top: .65rem; right: .65rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .55rem;
  font-family: 'Inter', sans-serif;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
  border-radius: 999px;
  background: rgba(10,14,26,.7);
  border: 1px solid rgba(201,162,74,.3);
  color: var(--parchment-dim);
}
.book-card-game .badge-gem{
  font-size: .85rem;
  line-height: 1;
}

.book-card-game h4{
  position: relative;
  z-index: 2;
  margin-top: .2rem;
}
.book-card-game .theme{
  position: relative;
  z-index: 2;
}

/* ---- Tier: complete (fully in user's language) ---- */
.book-card-game.tier-complete{
  border-color: rgba(233,200,112,.6);
  box-shadow:
    0 0 0 1px rgba(233,200,112,.45) inset,
    0 0 24px rgba(233,200,112,.28),
    0 14px 32px -10px rgba(0,0,0,.55);
}
.book-card-game.tier-complete .card-frame{ color: var(--gold-bright); opacity: .9; }
.book-card-game.tier-complete .card-glow{ opacity: .65; /* steady halo, no breath — was distracting */ }
.book-card-game.tier-complete .card-badge{
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-color: transparent;
  color: var(--bg-deep);
}
.book-card-game.tier-complete .badge-gem{
  color: var(--bg-deep);
  filter: drop-shadow(0 0 4px rgba(255,244,194,.5));
  animation: locale-dot-pulse 2.8s ease-in-out infinite;
}
.book-card-game.tier-complete h4{
  color: var(--gold-bright);
  text-shadow: 0 0 14px rgba(233,200,112,.4);
}

/* ---- Tier: partial ---- */
.book-card-game.tier-partial{
  border-color: rgba(201,162,74,.4);
  box-shadow:
    0 0 16px rgba(201,162,74,.15),
    0 10px 24px -8px rgba(0,0,0,.5);
}
.book-card-game.tier-partial .card-frame{ color: var(--gold); opacity: .7; }
.book-card-game.tier-partial .card-glow{ opacity: .35; }
.book-card-game.tier-partial .card-badge{
  background: rgba(201,162,74,.18);
  border-color: rgba(201,162,74,.5);
  color: var(--gold-bright);
}

/* ---- Tier: English-only (translated locale hubs) ---- */
.book-card-game.tier-en-only{
  border-color: rgba(201,162,74,.22);
}
.book-card-game.tier-en-only .card-frame{ opacity: .35; }
.book-card-game.tier-en-only .card-badge{
  background: rgba(10,14,26,.7);
  border-color: rgba(201,162,74,.22);
  color: var(--parchment-dim);
}
.book-card-game.tier-en-only h4{ color: var(--parchment); opacity: .85; }

/* ---- Tier: empty / coming soon ---- */
.book-card-game.tier-empty{
  border-color: rgba(201,162,74,.12);
  background: linear-gradient(160deg, rgba(20,24,38,.6), rgba(10,14,26,.6));
}
.book-card-game.tier-empty .card-frame{ opacity: .2; }
.book-card-game.tier-empty .card-badge{
  background: transparent;
  border-color: rgba(201,162,74,.15);
  color: var(--parchment-dim);
  opacity: .6;
}
.book-card-game.tier-empty h4{ color: var(--parchment-dim); opacity: .7; }
.book-card-game.tier-empty .theme{ opacity: .55; }

/* ---- Hover for all tiers — lifts + brighter glow ---- */
.book-card-game:hover{
  transform: translateY(-6px);
  border-color: var(--gold-bright);
}
.book-card-game:hover .card-frame{ opacity: 1; color: var(--gold-bright); }
.book-card-game:hover .card-glow{ opacity: 1; }
.book-card-game:hover h4{ color: var(--gold-bright); }

@keyframes card-breath{
  0%, 100% { opacity: .65; }
  50%      { opacity: 1; }
}

/* ===========================================================
   AVAILABILITY RIBBON — bottom of each book card
   Clear, prominent language-availability signal so the user
   never has to hunt for what's in their language.
   =========================================================== */
.card-ribbon{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .85rem;
  align-self: flex-start;
  padding: .38rem .8rem;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .015em;
  /* Sentence case — reads as content, not a button label */
  z-index: 2;
  position: relative;
}
.card-ribbon .ribbon-check{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  font-size: .85rem;
  font-weight: 800;
  line-height: 1;
}

/* AVAILABLE — bright emerald-green pill */
.card-ribbon.ribbon-complete{
  background: linear-gradient(180deg, #2db971, #1a8f50);
  color: #f4ffe8;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 8px 18px -6px rgba(26,143,80,.55),
    0 0 18px rgba(45,185,113,.35);
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
.card-ribbon.ribbon-complete .ribbon-check{
  background: rgba(255,255,255,.22);
  color: #f4ffe8;
}

/* PARTIAL — gold pill */
.card-ribbon.ribbon-partial{
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--bg-deep);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.1) inset,
    0 6px 14px -6px rgba(0,0,0,.45);
}

/* READ IN ENGLISH — muted parchment, no all-caps */
.card-ribbon.ribbon-english{
  background: rgba(244,235,217,.06);
  border: 1px solid rgba(201,162,74,.25);
  color: var(--parchment-dim);
  font-size: .76rem;
}

/* IN PROGRESS — very dim */
.card-ribbon.ribbon-soon{
  background: rgba(244,235,217,.035);
  border: 1px solid rgba(201,162,74,.14);
  color: var(--parchment-dim);
  opacity: .65;
  font-size: .76rem;
  font-style: italic;
}

/* ===========================================================
   LANGUAGE SWITCHER (footer) — anchor-link pill bar
   Real <a> elements so navigation works without JS. Cookie
   write happens on click so the preference persists.
   =========================================================== */
.lang-switcher{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  margin-top: 1.4rem;
}
.lang-switcher .lang-switcher-label{
  font-size: .75rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  opacity: .8;
}
.lang-switcher .lang-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem .55rem;
  max-width: 720px;
}
.lang-switcher .lang-link{
  display: inline-flex;
  align-items: center;
  padding: .45rem .95rem;
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  color: var(--parchment-dim);
  background: rgba(244,235,217,.04);
  border: 1px solid rgba(201,162,74,.22);
  border-radius: 999px;
  text-decoration: none;
  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s var(--ease-out-snap);
}
.lang-switcher .lang-link:hover{
  background: rgba(201,162,74,.12);
  border-color: rgba(233,200,112,.55);
  color: var(--parchment);
  transform: translateY(-2px);
}
.lang-switcher .lang-link.is-active{
  background: linear-gradient(180deg, #2db971, #1a8f50);
  color: #f4ffe8;
  border-color: transparent;
  font-weight: 600;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 6px 14px -4px rgba(26,143,80,.5),
    0 0 16px rgba(45,185,113,.3);
}
.lang-switcher .lang-link.is-active:hover{
  transform: translateY(-2px);
}

/* ===========================================================
   OTHER BOOKS — collapsed section on locale hubs
   Hides books that aren't in the user's language behind a
   click. Keeps the visible grid focused on what they can read.
   =========================================================== */
.other-books{
  margin: 3rem auto 1rem;
  max-width: 1100px;
  border: 1px solid rgba(201,162,74,.16);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20,24,38,.4), rgba(10,14,26,.4));
  overflow: hidden;
}
.other-books > summary{
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: 'Inter', sans-serif;
  transition: background-color .25s ease;
}
.other-books > summary::-webkit-details-marker{ display: none; }
.other-books > summary:hover{ background: rgba(201,162,74,.06); }
.other-books .other-books-title{
  font-size: 1rem;
  font-weight: 500;
  color: var(--parchment);
}
.other-books .other-books-count{
  font-size: .85rem;
  color: var(--parchment-dim);
  margin-left: auto;
}
.other-books .other-books-chevron{
  color: var(--gold);
  font-size: .75rem;
  transition: transform .3s ease;
}
.other-books[open] .other-books-chevron{
  transform: rotate(180deg);
}
.other-books > .book-grid{
  padding: 0 1.4rem 1.4rem;
  opacity: .85;
}

/* When the section is collapsed, the dim books behind it don't render */
.other-books .book-card-game{
  /* Slightly de-emphasize since they're explicitly "other" */
  opacity: .9;
}

/* ===========================================================
   EMPTY-STATE — locale has nothing in the active testament
   =========================================================== */
.hub-empty-state{
  text-align: center;
  padding: 3rem 1.5rem;
  margin: 2rem auto;
  max-width: 600px;
  border: 1px dashed rgba(201,162,74,.3);
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 0%, rgba(233,200,112,.08), transparent 60%);
}
.hub-empty-state .empty-icon{
  font-size: 2.4rem;
  color: var(--gold-bright);
  margin-bottom: 1rem;
}
.hub-empty-state h3{
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  color: var(--parchment);
  margin-bottom: .8rem;
  font-style: italic;
}
.hub-empty-state p{
  color: var(--parchment-dim);
  font-size: 1rem;
}
.hub-empty-state a{
  color: var(--gold-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Locale banner above the divisions */
.hub-locale-banner{
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: 760px;
  margin: 1.4rem auto 0;
  padding: .85rem 1.1rem;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(201,162,74,.12), rgba(201,162,74,.04));
  border: 1px solid rgba(233,200,112,.35);
  box-shadow: 0 0 24px rgba(233,200,112,.12);
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  color: var(--parchment);
}
.hub-locale-banner-dot{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--bg-deep);
  font-size: 1.1rem;
  flex-shrink: 0;
  animation: locale-dot-pulse 3.2s ease-in-out infinite;
}
.hub-locale-banner strong{ color: var(--gold-bright); }

@media (prefers-reduced-motion: reduce){
  .book-card-game.tier-complete .card-glow,
  .book-card-game.tier-complete .badge-gem,
  .hub-locale-banner-dot{ animation: none !important; }
}

/* ---------- Mobile tap-target sanity ---------- */
@media (max-width: 640px){
  .chapter-cell{ min-width: 44px; min-height: 44px; }
  .btn, .nav-btn, .return-btn{ min-height: 44px; }
}