/* ═══════════════════════════════════════════════════════════════════════════
   GitaWisdom + iChing Oracle  ·  styles.css
   Author: WebKide
   Dark aesthetic — Discord-inspired.
   Typefaces: Waldemar (display) + Kelvinch / Noto Serif (body)

   Gita accent:   --accent       #F5A623 (saffron)
   iChing accent: --iching-accent #6276bb (indigo-blue)
                  --iching-dim   #5768a4
                  --iching-border #6761f6 (left border on intro sections)
   Red buttons:   #c8615f
   ═══════════════════════════════════════════════════════════════════════════ */

/* kelvinch-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Kelvinch';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/kelvinch-v42-latin-regular.woff2') format('woff2');
}

/* kelvinch-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Kelvinch';
  font-style: italic;
  font-weight: 400;
  src: url('../assets/fonts/kelvinch-v42-latin-italic.woff2') format('woff2');
}

/* kelvinch-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Kelvinch';
  font-style: normal;
  font-weight: 700;
  src: url('../assets/fonts/kelvinch-v42-latin-700.woff2') format('woff2');
}

/* kelvinch-700italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Kelvinch';
  font-style: italic;
  font-weight: 700;
  src: url('../assets/fonts/kelvinch-v42-latin-700italic.woff2') format('woff2');
}

/* noto-serif-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/noto-serif-v33-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-serif-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 400;
  src: url('../assets/fonts/noto-serif-v33-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-serif-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 500;
  src: url('../assets/fonts/noto-serif-v33-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-serif-500italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 500;
  src: url('../assets/fonts/noto-serif-v33-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-serif-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 600;
  src: url('../assets/fonts/noto-serif-v33-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-serif-600italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 600;
  src: url('../assets/fonts/noto-serif-v33-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-serif-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  src: url('../assets/fonts/noto-serif-v33-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-serif-700italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 700;
  src: url('../assets/fonts/noto-serif-v33-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-serif-800 - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 800;
  src: url('../assets/fonts/noto-serif-v33-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-serif-800italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 800;
  src: url('../assets/fonts/noto-serif-v33-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-serif-900 - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 900;
  src: url('../assets/fonts/noto-serif-v33-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-serif-900italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 900;
  src: url('../assets/fonts/noto-serif-v33-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* sansita-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Sansita';
  font-style: normal;
  font-weight: 700;
  src: url('../assets/fonts/sansita-v12-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* sansita-700italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Sansita';
  font-style: italic;
  font-weight: 700;
  src: url('../assets/fonts/sansita-v12-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* sansita-800 - latin */
@font-face {
  font-display: swap;
  font-family: 'Sansita';
  font-style: normal;
  font-weight: 800;
  src: url('../assets/fonts/sansita-v12-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* sansita-800italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Sansita';
  font-style: italic;
  font-weight: 800;
  src: url('../assets/fonts/sansita-v12-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* sansita-900 - latin */
@font-face {
  font-display: swap;
  font-family: 'Sansita';
  font-style: normal;
  font-weight: 900;
  src: url('../assets/fonts/sansita-v12-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* sansita-900italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Sansita';
  font-style: italic;
  font-weight: 900;
  src: url('../assets/fonts/sansita-v12-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ─── Contents ──────────────────────────────────────────────────────────── */
/*
 * The .WOFF2 fonts are saved locally to use offline.
 *   - Colors for text, background, and other elements
 *   - Main Page design
 *   - Verse Card to read translation and purport, and Share
 *   - Share PNG Card design, out of sight
 */
:root {
  /* Base palette */
  --bg-base:       #1e1f22;
  --bg-mid:        #2b2d31;
  --bg-card:       #313338;
  --bg-card-alt:   #2e3035;
  --bg-input:      #1e1f22;

  /* Gita / saffron accent */
  --accent:        #f5a623;
  --accent-dim:    #c07d10;
  --accent-glow:   rgba(245, 166, 35, 0.18);

  /* iChing / indigo-blue accent */
  --iching-accent: #512f86;
  --iching-dim:    #7334d3;
  --iching-glow:   rgba(98, 118, 187, 0.20);
  --iching-border: #6761f6;  /* left-border on iChing intro sections */

  /* Lilac buttons (purport close / return) */
  --lilac-btn:       #512f86;
  --lilac-btn-hover: #7334d3;
  --red-btn:         #c8615f;

  /* Text */
  --text-primary:   #dbdee1;
  --text-secondary: #949ba4;
  --text-muted:     #5c6068;
  --text-heading:   #f2f3f5;

  /* Borders / shadows */
  --border:        rgba(255,255,255,0.06);
  --border-accent: rgba(245,166,35,0.35);
  --shadow-card:   0 8px 40px rgba(0,0,0,0.55);
  --shadow-glow:   0 0 28px rgba(245,166,35,0.14);

  /* Radii */
  --radius:        8px;
  --radius-lg:     12px;

  /* Typefaces */
  --font-display:  'Sansita', sans-serif;
  --font-body:     'Noto Serif', serif;
  --font-text:     'Kelvinch', serif;

  --transition:     0.22s ease;

  /* In-reader font size — controlled by JS font-size buttons */
  --lb-font-size:   16px;

  /* Share PNG footer font size */
  --share-footer-font-size: 24px;
}

/* ─── Reset / base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Show/hide layout ────────────────────────────────────────────────────
* {
  outline: 1px solid red;
} ─ */

/* ─── Full page ──────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family:            var(--font-text);
  font-size:              16px;
  background-color:       var(--bg-base);
  color:                  var(--text-primary);
  min-height:             100vh;
  -webkit-font-smoothing: antialiased;
  /* Subtle noise texture — pure CSS grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  /* to deal with swipe and page scroll */
  overscroll-behavior-x: none;
  position: relative;
  width: 100%;
}

/* ─── Utility ────────────────────────────────────────────────────────────── */
/* Used to toggle verse-section vs purport-section visibility */
.hidden { display: none !important; }

/* ─── Page layout ────────────────────────────────────────────────────────── */
.page-wrap {
  max-width:      680px;
  margin:         0 auto;
  padding:        0 20px 0;   /* footer handles bottom spacing */
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0;
}

/* ─── Banner ─────────────────────────────────────────────────────────────── */
.banner {
  width:      100%;
  max-width:  100%; /* ensure container doesn't exceed viewport */
  text-align: center;
  padding:    52px 0 32px;
}

.banner-lotus {
  display:               block;
  margin:                0 auto 16px;
  width:                 100%;      /* responsive width */
  padding-top: 50px;
  max-width:             360px;     /* optional, caps max size */
  height:                auto;      /* maintain aspect ratio */
  filter:                drop-shadow(0 0 18px rgba(245,166,35,0.4));
  animation:             lotus-pulse 4s ease-in-out infinite;
  -webkit-user-drag:     none;
  -webkit-touch-callout: none;
  user-select:           none;
  pointer-events:        none;
}

@keyframes lotus-pulse {
  0%, 100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-4px);
  }
}

.banner-subtitle {
  font-family:    var(--font-body);
  font-size:      0.95rem;
  color:          var(--text-secondary);
  margin-top:     6px;
  font-style:     italic;
  letter-spacing: 0.01em;
}

/* ─── Divider ────────────────────────────────────────────────────────────── */
.divider {
  width:      100%;
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:    0.3;
  margin:     24px 0;
}

/* ─── Separator ──────────────────────────────────────────────────────────── */
.separator {
  width:      100%;
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--text-muted), transparent);
  opacity:    0.3;
  margin:     24px 0;
}

/* ─── Intro text ─────────────────────────────────────────────────────────── */
.intro {
  width:         100%;
  background:    var(--bg-mid);
  border:        1px solid var(--border);
  border-left:   3px solid var(--accent);   /* Gita default: saffron */
  border-radius: var(--radius);
  padding:       18px 22px;
  font-size:     0.93rem;
  color:         var(--text-primary);
  line-height:   1.7;
}

/* iChing intro variant — indigo-blue left border */
.intro--iching {
  border-left-color: var(--iching-border);
}

.intro strong { color: var(--text-primary); font-weight: 600; }

.intro p {
  color:      var(--text-secondary);
  text-align: center;
  font-style: italic;
}

.intro code {
  background:    rgba(255,255,255,0.08);
  border-radius: 3px;
  padding:       1px 5px;
  font-family:   'Courier New', monospace;
  font-size:     0.88em;
  color:         var(--accent);
}

.intro--iching code {
  background: rgba(255,255,255,0.08);
  color: var(--accent);
}

.intro ul { margin: 8px 0 0 18px; list-style: disc; }
.intro ul li { margin-top: 3px; }

.intro-inner {
  display:     flex;
  align-items: center;
  gap:         16px;
  flex-wrap:   wrap;
}

.intro-inner ul { flex: 1; margin: 0; }

.btn-oracle--inline {
  flex-shrink: 0;
  width:       120px;
  min-width:   120px;
  height:      100px;
  font-size:   1rem;
  line-height: 1.6;
  text-align:  center;
}

@media (max-width: 420px) {
  .btn-oracle--inline {
    width:  100%;
    height: 56px;
  }
}

/* ─── Top navigation bar ─────────────────────────────────────────────────── */
#top-nav {
  position:     fixed;
  top:          0;
  left:         0;
  right:        0;
  z-index:      1999;
  background:   #18191c;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  padding:      10px 20px;
  transition:   opacity var(--transition);
}

/* Hide when lightbox is open */
body.lb-active #top-nav { opacity: 0; pointer-events: none; }

.top-nav-inner {
  max-width:   640px;
  margin:      0 auto;
  display:     flex;
  align-items: center;
  gap:         10px;
}

.top-nav-icon {
  width:         202.85px;
  height:        25px;
  border-radius: 0;
  object-fit:    cover;
  flex-shrink:   0;
  opacity:       0;
  transition:    opacity 0.4s ease;
  -webkit-user-drag:     none;
  -webkit-touch-callout: none;
  user-select:           none;
  pointer-events:        none;
}

@media (max-width: 520px) {
  .top-nav-icon {
    width:  104px;
    height: 14px;
  }
}

.top-nav-icon.visible { opacity: 0.7; }

.top-nav-links {
  display:     flex;
  gap:         8px;
  margin-left: auto;
}

.top-nav-btn {
  font-family:    var(--font-display);
  font-size:      0.72rem;
  letter-spacing: 0.06em;
  padding:        6px 14px;
  border-radius:  var(--radius);
  border:         1px solid var(--border);
  color:          var(--text-secondary);
  text-decoration: none;
  transition:     color var(--transition), border-color var(--transition),
                  background var(--transition);
}

.top-nav-btn:hover {
  color:        var(--text-primary);
  border-color: var(--border-accent);
  background:   var(--bg-mid);
}

.top-nav-btn--oracle {
  color:        var(--accent);
  border-color: var(--border-accent);
}

.top-nav-btn--oracle:hover { background: var(--accent-glow); }

/* Push page content below the fixed bar */
.page-wrap { padding-top: 52px; }

/* ─── Search panel ───────────────────────────────────────────────────────── */
.search-panel {
  width:          100%;
  margin-top:     28px;
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.search-row {
  display:     flex;
  gap:         10px;
  width:       100%;
  align-items: stretch;
}

.verse-input {
  flex:          none;
  background:    var(--bg-input);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  color:         var(--text-primary);
  font-family:   var(--font-body);
  font-size:     1rem;
  padding:       11px 16px;
  outline:       none;
  transition:    border-color var(--transition), box-shadow var(--transition),
                 background var(--transition);
  /* Remove browser spinner arrows */
  -moz-appearance: textfield;
}

.verse-input::-webkit-outer-spin-button,
.verse-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ─── Error message ──────────────────────────────────────────────────────── */
.error-msg {
  display:       none;   /* hidden by default; shown via .visible */
  min-height:    0;
  font-size:     0.92rem;
  font-weight:   600;
  color:         #ff5555;
  background:    rgba(255, 60, 60, 0.12);
  border:        1px solid rgba(255, 60, 60, 0.35);
  border-left:   3px solid #ff5555;
  border-radius: var(--radius);
  padding:       10px 14px;
  text-align:    left;
}

.error-msg.visible {
  display:    block;
  min-height: 22px;
  animation:  error-in 0.25s ease;
}

@keyframes error-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}

.shake { animation: shake 0.42s ease; }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  font-family:    var(--font-display);
  font-size:      0.78rem;
  letter-spacing: 0.06em;
  font-weight:    400;
  padding:        11px 22px;
  border:         none;
  border-radius:  var(--radius);
  cursor:         pointer;
  transition:     background var(--transition), transform 0.12s, box-shadow var(--transition);
  white-space:    nowrap;
  user-select:    none;
}

.btn:active   { transform: scale(0.96); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Gita "Look up" button — saffron */
.btn-primary {
  background: var(--accent);
  color:      #1a1000;
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-dim);
  box-shadow: var(--shadow-glow);
}

/* iChing "Toss Coins" button — indigo-blue */
.btn-primary--iching {
  background: var(--iching-accent);
  color:      #ffffff;
}

.btn-primary--iching:hover:not(:disabled) {
  background: var(--iching-dim);
  box-shadow: 0 0 28px rgba(98,118,187,0.28);
}

/* Oracle random button — Gita */
.btn-oracle {
  background: var(--bg-card);
  color:      var(--accent);
  border:     1px solid var(--border-accent);
  margin-top: 16px;
}

.btn-oracle:hover:not(:disabled) {
  background: var(--bg-card-alt);
  box-shadow: var(--shadow-glow);
}

/* Oracle random button — iChing variant */
.btn-oracle--iching {
  color:        var(--iching-accent);
  border-color: rgba(98,118,187,0.35);
}

.btn-oracle--iching:hover:not(:disabled) {
  box-shadow: 0 0 28px rgba(98,118,187,0.18);
}

/* ─── Lightbox overlay ───────────────────────────────────────────────────── */
.lightbox {
  display:         none;
  position:        fixed;
  inset:           0;
  z-index:         1900;
  align-items:     flex-start;
  justify-content: center;
  padding:         24px 16px 40px;
  overflow-y:      auto;
}

.lightbox.open {
  display:   flex;
  animation: overlay-in 0.22s ease;
}

@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lb-overlay {
  position:                fixed;
  inset:                   0;
  background:              rgba(0,0,0,0.82);
  backdrop-filter:         blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index:                 -1;
}

body.lb-active { overflow: hidden; }

/* ─── Lightbox card ──────────────────────────────────────────────────────── */
.lb-card {
  width:         100%;
  max-width:     640px;
  background:    var(--bg-card);
  border-radius: var(--radius-lg);
  border:        1px solid var(--border);
  border-top:    3px solid var(--accent);
  box-shadow:    var(--shadow-card), var(--shadow-glow);
  overflow:      hidden;
  position:      relative;
  animation:     card-enter 0.38s cubic-bezier(0.34, 1.36, 0.64, 1) forwards;
  font-size:     var(--lb-font-size);
}

@keyframes card-enter {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.lb-card.loading { opacity: 0.6; pointer-events: none; transition: opacity 0.2s; }

/* ─── Card header ────────────────────────────────────────────────────────── */
.lb-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         12px 16px 10px;
  background:      var(--bg-card-alt);
  border-bottom:   1px solid var(--border);
  gap:             10px;
}

.lb-author {
  display:     flex;
  align-items: center;
  gap:         9px;
  min-width:   0;
}

.lb-author-icon {
  width:         28px;
  height:        28px;
  border-radius: 50%;
  object-fit:    cover;
  flex-shrink:   0;
  border:        1.5px solid var(--border-accent);
}

.lb-author-name {
  font-family:    var(--font-display);
  font-size:      0.68rem;
  color:          var(--accent);
  letter-spacing: 0.03em;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

.lb-header-actions {
  display:     flex;
  gap:         6px;
  flex-shrink: 0;
  align-items: center;
}

/* ─── Icon buttons (header) ──────────────────────────────────────────────── */
.lb-icon-btn {
  background:     transparent;
  border:         1px solid var(--border);
  border-radius:  var(--radius);
  color:          var(--text-secondary);
  padding:        6px 10px;
  font-size:      0.7rem;
  font-family:    var(--font-display);
  letter-spacing: 0.04em;
  cursor:         pointer;
  transition:     background var(--transition), color var(--transition),
                  border-color var(--transition);
  white-space:    nowrap;
}

.lb-icon-btn:hover {
  background:   var(--bg-mid);
  color:        var(--accent);
  border-color: var(--border-accent);
}

/* --> Top purport button — green tint to stand out from other icon buttons
.lb-purport-top-btn {
  color:        #4caf7d;
  border-color: rgba(76, 175, 125, 0.35);
}

.lb-purport-top-btn:hover {
  background:   rgba(76,175,125,0.12);
  color:        #6fcf97;
  border-color: rgba(76,175,125,0.55);
} */

/* --> Active state — when purport is showing
.lb-icon-btn.active {
  background:   var(--accent-glow);
  color:        var(--accent);
  border-color: var(--border-accent);
  font-weight:  700;
} */

/* Font-size buttons */
.lb-font-btn {
  padding:     6px 8px;
  font-size:   0.8rem;
  font-family: var(--font-body);
  font-weight: 600;
}

/* Close button #c8615f --red-pink*/
.lb-close-btn {
  background:    var(--red-btn);
  border:        1px solid var(--red-btn);
  color:         var(--text-primary);
  font-size:     1.4rem;
  font-weight:   700;
  line-height:   1;
  cursor:        pointer;
  padding:       2px 15px;
  border-radius: 4px;
  flex-shrink:   0;
  transition:    color var(--transition), background var(--transition);
}

.lb-close-btn:hover {
  background: var(--shadow-card);
  color:      var(--red-btn);
  border:     1px solid var(--red-btn);
}

/* ─── Card body ──────────────────────────────────────────────────────────── */
.lb-body { padding: 20px 22px 6px; }

/* Chapter / hexagram heading */
.lb-chapter-heading {
  font-family:    var(--font-display);
  font-size:      clamp(0.78rem, 2vw, 0.92rem);
  font-weight:    700;
  color:          var(--text-heading);
  letter-spacing: 0.03em;
  line-height:    1.35;
  margin-bottom:  18px;
  padding:        8px 12px;
  background:     rgba(81,47,134,0.23);
  border-radius:  var(--radius);
  border-left:    3px solid var(--text-primary);
}

/* ─── Section labels ─────────────────────────────────────────────────────── */
.section-label {
  font-family:    var(--font-display);
  font-size:      0.68rem;
  letter-spacing: 0.12em;
  color:          var(--text-secondary);
  text-transform: uppercase;
  margin-bottom:  8px;
  margin-top:     18px;

  display: flex;           /* enable horizontal flex layout */
  align-items: center;     /* vertically center text and line */
}

.section-label::after {
  content: '';             /* empty content for the line */
  flex-grow: 1;            /* take up remaining horizontal space */
  margin-left: 8px;        /* space between text and line */
  border-bottom: 1px solid var(--text-secondary); /* solid line */
  opacity: 0.5;            /* optional: make it a bit lighter than text */
}

/* ─── Translation / Judgment — shown FIRST in verse view ─────────────────── */
.lb-translation {
  background:    rgba(30, 32, 37, 0.96);
  border-left:   3px solid #7188d8;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding:       12px 16px;
  font-size:     calc(var(--lb-font-size) * 1.08);  /* slightly larger: main feature */
  font-weight:   400;
  color:         var(--text-heading);
  line-height:   1.75;
  font-style:    normal;
  margin-top:    4px;
  margin-bottom: 4px;
}

/* ─── Sanskrit / hexagram lines — shown SECOND ───────────────────────────── */
.lb-sanskrit {
  text-align:    center;
  font-family:   var(--font-body);
  font-size:     calc(var(--lb-font-size) * 1.0);
  font-style:    italic;
  color:         var(--text-primary);
  line-height:   1.8;
  margin-bottom: 18px;
  white-space:   normal;
}

/* ─── Synonyms / judgment lines — shown THIRD ────────────────────────────── */
.lb-synonyms-wrap {
  background:    var(--bg-mid);
  border-radius: var(--radius);
  border:        1px solid var(--border);
  padding:       12px 14px;
  font-size:     calc(var(--lb-font-size) * 0.88);
  line-height:   1.8;
  color:         var(--text-secondary);
}

.syn-word    { font-style: italic; font-weight: 600; color: var(--text-primary); }
.syn-dash    { color: var(--text-muted); }
.syn-meaning { color: var(--text-secondary); }
.syn-sep     { color: var(--accent); margin: 0 2px; }
.syn-plain   { color: var(--text-secondary); }

/* ─── Bottom action buttons (65% width, right-aligned) ───────────────────── */
/*
 * Two bottom buttons share base styles:
 *   .lb-open-purport-btn — shown in VERSE view  — dark-theme blue
 *   .lb-return-btn       — shown in PURPORT view — red (#c8615f)
 *
 * Visibility is managed via .visible class (never inline style).
 */
.lb-bottom-btn {
  display:        none;   /* hidden by default */
  width:          65%;
  margin-top:     20px;
  margin-left:    auto;   /* right-align */
  padding:        10px 0;
  font-family:    var(--font-display);
  font-size:      0.78rem;
  font-weight:    700;
  letter-spacing: 0.07em;
  border:         none;
  border-radius:  var(--radius);
  cursor:         pointer;
  transition:     background var(--transition);
  text-align:     center;
}

.lb-bottom-btn.visible {
  display:   block;
  animation: purport-in 0.28s ease;
}

/* Blue — "Read Purport / Commentary" */
.lb-open-purport-btn {
  background: var(--iching-accent);
  color:      #ffffff;
}

.lb-open-purport-btn:hover { background: var(--iching-dim); }

/* Red — "Return to Verse / Hexagram" */
.lb-return-btn {
  background: var(--lilac-btn);
  color:      #ffffff;
}

.lb-return-btn:hover { background: var(--lilac-btn-hover); }

/* ─── Purport / commentary section ──────────────────────────────────────── */
.lb-purport-dedicatory-top {
  font-family:   var(--font-text);
  font-style:    italic;
  font-size:     calc(var(--lb-font-size) * 0.82);
  color:         var(--text-secondary);
  text-align:    left;
  padding:       10px 14px 0 14px;
  margin-bottom: 0;
}

.lb-purport-dedicatory {
  font-family:   var(--font-text);
  font-style:    normal;
  font-size:     calc(var(--lb-font-size) * 0.82);
  color:         var(--text-secondary);
  text-align:    left;
  padding:       10px 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  line-height:   1.7;
}

.lb-purport {
  font-size:   calc(var(--lb-font-size) * 0.93);
  color:       var(--text-primary);
  line-height: 1.85;
  margin-top:  4px;
}

.lb-purport p            { margin-bottom: 12px; }
.lb-purport p:last-child { margin-bottom: 0; }
.lb-purport .no-purport  { font-style: italic; color: var(--text-muted); }

/* ─── Signature image ────────────────────────────────────────────────────── */
.lb-signature {
  display:               block;
  width:                 100%;
  max-height:            54px;
  object-fit:            contain;
  object-position:       left;
  margin-top:            20px;
  opacity:               0.7;
  filter:                brightness(0.85);
  -webkit-user-drag:     none;
  -webkit-touch-callout: none;
  user-select:           none;
  pointer-events:        none;
}

/* ─── Chapter-end colophon ───────────────────────────────────────────────── */
.lb-chapter-end {
  display:       none;
  margin-top:    16px;
  padding:       10px 14px;
  background:    rgba(245,166,35,0.06);
  border:        1px solid var(--border-accent);
  border-radius: var(--radius);
  font-size:     0.83rem;
  font-style:    italic;
  color:         var(--text-secondary);
  text-align:    center;
}

.lb-chapter-end.visible {
  display:   block;
  animation: purport-in 0.3s ease;
}

.lb-no-purport {
  display:       block;
  margin-top:    16px;
  padding:       10px 14px;
  background:    rgba(245,166,35,0.06);
  border:        1px solid var(--border-accent);
  border-radius: var(--radius);
  font-size:     0.83rem;
  font-style:    italic;
  color:         var(--text-primary);
  text-align:    center;
  animation:     purport-in 0.3s ease;
}

/* ─── Card footer / navigation bar ──────────────────────────────────────── */
.lb-footer-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 16px 14px;
  gap:             8px;
  border-top:      1px solid var(--border);
  margin-top:      16px;
  flex-wrap:       wrap;
}

.lb-footer-text {
  font-size:  0.78rem;
  color:      var(--text-muted);
  font-style: italic;
  flex:       1;
  min-width:  0;
}

.lb-nav-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-shrink: 0;
}

.lb-nav-btn {
  background:    var(--bg-mid);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  color:         var(--text-secondary);
  padding:       6px 12px;
  font-size:     1rem;
  cursor:        pointer;
  line-height:   1;
  transition:    background var(--transition), color var(--transition),
                 border-color var(--transition);
}

.lb-nav-btn:hover {
  background:   var(--bg-card-alt);
  color:        var(--accent);
  border-color: var(--border-accent);
}

/* ─── Animations ─────────────────────────────────────────────────────────── */
@keyframes purport-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Load-in (landing page stagger) ────────────────────────────────────── */
.fade-in {
  opacity:   0;
  transform: translateY(14px);
  animation: fade-up 0.55s ease forwards;
}

.fade-in:nth-child(1) { animation-delay: 0.05s; }
.fade-in:nth-child(2) { animation-delay: 0.15s; }
.fade-in:nth-child(3) { animation-delay: 0.25s; }
.fade-in:nth-child(4) { animation-delay: 0.35s; }
.fade-in:nth-child(5) { animation-delay: 0.42s; }

/* ─── Page footer ────────────────────────────────────────────────────────── */
/*
 * Full-width darker block, lighter grey top border, Discord embed style.
 * Contains a circular 28×28 image (imgfooter.png — see TODO in index.html).
 * The page-wrap's padding-bottom is removed; footer provides its own spacing.
 */
.page-footer {
  width:        calc(100% + 40px);  /* bleed past .page-wrap's 20px padding */
  margin-left:  -20px;
  margin-right: -20px;
  margin-top:   40px;
  background:   #18191c;            /* darker than --bg-base */
  border-top:   1px solid rgba(255,255,255,0.10);
  padding:      16px 20px 20px;     /* compact height as requested */
}

.footer-inner {
  max-width:   640px;
  margin:      0 auto;
  display:     flex;
  align-items: center;
  gap:         10px;
}

/* Circular footer icon — mirrors Discord embed footer icon style */
.footer-icon {
  width:         28px;
  height:        28px;
  border-radius: 50%;
  object-fit:    cover;
  flex-shrink:   0;
  opacity:       0.7;
  /* TODO: update src in index.html to "assets/images/imgfooter.png" */
}

.page-footer p {
  font-size:   0.8rem;
  color:       var(--text-muted);
  font-style:  normal;
  font-family: var(--font-text);
  line-height: 1.5;
}

.page-footer a { color: var(--accent); text-decoration: none; opacity: 0.8; }
.page-footer a:hover { opacity: 1; }

/* ─── Share image template ───────────────────────────────────────────────── */
#share-png-card {
  position:            fixed;
  left:                -9999px;
  top:                 0;
  width:               1080px;
  height:              1350px;
  padding:             170px 140px 150px;
  background-color:    var(--bg-card);
  background-image:    url('../assets/images/card_bg.png');
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
  color:               var(--text-primary);
  font-family:         var(--font-body);
  display:             flex;
  flex-direction:      column;
  justify-content:     flex-start;
  align-items:         center;
  text-align:          center;
  box-sizing:          border-box;
  --share-verse-size:  120px;
}

.share-png-title {
  width:           800px;
  height:          225px;
  flex-shrink:     0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  font-size:       58px;
  font-weight:     bold;
  color:           var(--accent);
  line-height:     1.25;
  overflow:        visible;
  text-align:      center;
  margin:          0;
}

.share-png-verse {
  width:           800px;
  height:          800px;
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       var(--share-verse-size);  /* change this line */
  line-height:     1.5;
  overflow:        hidden;  /* hide anything that escapes during measurement */
  text-align:      center;
  margin:          0;
}

.share-png-footer {
  font-size:   var(--share-footer-font-size);
  font-family: var(--font-text);
  font-style:  italic;
  color:       var(--text-secondary);
  opacity:     0.7;
}

/* ─── Custom dropdown ────────────────────────────────────────────────────── */
.custom-select {
  position: relative;
  flex:     none;
  width:    320px;
  z-index:  300;
}

.custom-select.open { z-index: 1200; }

.search-panel { position: relative; z-index: 600; }
.intro        { position: relative; z-index: 1; }

.custom-select-trigger {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  padding:         11px 14px;
  background:      #1a1f2a;
  border:          1px solid #1e3a5a;
  border-radius:   var(--radius);
  color:           var(--text-primary);
  font-family:     var(--font-text);
  font-size:       0.95rem;
  cursor:          pointer;
  text-align:      left;
  white-space:     normal;
  overflow:        visible;
  text-overflow:   unset;
  transition:      border-color var(--transition), box-shadow var(--transition);
}

.custom-select-trigger:focus,
.custom-select[aria-expanded="true"] .custom-select-trigger {
  border-color: var(--accent);
  box-shadow:   0 0 0 3px var(--accent-glow);
  outline:      none;
}

.custom-select-arrow {
  font-size:   0.65rem;
  margin-left: 8px;
  flex-shrink: 0;
  color:       var(--text-muted);
  transition:  transform var(--transition);
}

.custom-select.open .custom-select-arrow { transform: rotate(180deg); }

/* Dropdown list — opens upward to avoid overlap with oracle button below
.custom-select-list {
  display:       none;
  position:      absolute;
  bottom:        calc(100% + 4px);
  top:           auto;
  left:          0;
  width:         300px;
  max-height:    340px;
  overflow-y:    auto;
  background:    var(--bg-card);
  border:        1px solid var(--border-accent);
  border-radius: var(--radius);
  box-shadow:    var(--shadow-card);
  list-style:    none;
  padding:       4px 0;
  z-index:       400;
} */

/* Dropdown list — opens centered for ease of use */
.custom-select-list {
  display:       none;
  position:      fixed;
  top:           50%;
  left:          50%;
  transform:     translate(-50%, -50%);
  width:         min(340px, 90vw);
  max-height:    60vh;
  overflow-y:    auto;
  background:    var(--bg-card);
  border:        1px solid var(--border-accent);
  border-radius: var(--radius);
  box-shadow:    var(--shadow-card);
  list-style:    none;
  padding:       4px 0;
  z-index:       460;
}

.custom-select.open .custom-select-list {
  display:   block;
  animation: purport-in 0.18s ease;
}

.custom-select-option {
  display:        flex;
  flex-direction: column;
  padding:        9px 14px;
  cursor:         pointer;
  transition:     background var(--transition);
  border-bottom:  1px solid var(--border);
}

.custom-select-option:last-child { border-bottom: none; }

.custom-select-option:hover,
.custom-select-option[aria-selected="true"] {
  background: rgba(98,118,187,0.15);
}

.custom-select-option[aria-selected="true"] b { color: var(--iching-accent); }

.custom-select-option b {
  font-size:   0.88rem;
  font-weight: 700;
  color:       var(--accent);
  line-height: 1.3;
}

.custom-select-option b .verse-count {
  font-weight: 400;
  color:       var(--text-muted);
  font-size:   0.82em;
}

.custom-select-option small {
  font-size:   0.78rem;
  color:       var(--text-primary);
  margin-top:  2px;
  line-height: 1.35;
  white-space: normal;
}

.custom-select-list::-webkit-scrollbar       { width: 4px; }
.custom-select-list::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 2px; }

.custom-select-backdrop {
  display:  none;
  position: fixed;
  inset:    0;
  z-index:  1099;
}

.custom-select.open .custom-select-backdrop { display: block; }

/* Scrollbar track (background behind the thumb) */
::-webkit-scrollbar-track {
  background: var(--bg-card);
}

/* Scrollbar itself (the draggable part) */
::-webkit-scrollbar-thumb {
  background-color: var(--bg-input);  /* thumb color */
  border-radius:    10px;              /* rounded corners */
  border:           2px solid #2b2d31; /* optional border */
}

/* Scrollbar color for Firefox */
* { scrollbar-color: var(--bg-card) var(--bg-input); }

/* ─── Verse / hexagram input field ──────────────────────────────────────── */
.verse-field {
  width:        140px;
  background:   #1a1f2a;
  border-color: #1e3a5a;
  text-align:   center;
}

.verse-field:focus {
  border-color: var(--iching-accent);
  box-shadow:   0 0 0 3px rgba(98,118,187,0.2);
  background:   #1a2235;
  outline:      none;
}

/* iChing input — same base, slightly different focus ring colour already
   handled by verse-field:focus using --iching-accent */
.verse-field--iching::placeholder { color: var(--text-muted); }

/* ─── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .page-wrap       { padding: 0 12px 0; }
  .banner          { padding: 36px 0 24px; }
  .banner-lotus    { font-size: 40px; }
  .search-row      { flex-wrap: wrap; }
  .btn             { width: 100%; text-align: center; }
  .verse-input     { font-size: 0.97rem; }
  .custom-select,
  .custom-select-list,
  .verse-field     { width: 100%; text-align: left; }
  .lightbox        { padding: 12px 8px 32px; }
  .lb-body         { padding: 16px 15px 6px; }
  .lb-header       { padding: 10px 12px 8px; }
  .lb-author-name  { display: none; }
  .lb-footer-bar   { flex-direction: column; align-items: flex-start; }
  .lb-nav-row      { width: 100%; justify-content: space-between; }
  .lb-footer-text  { width: 100%; }
  .lb-font-btn     { padding: 6px 6px; }
  /* Bottom buttons full-width on mobile */
  .lb-bottom-btn   { width: 100%; }
  /* Footer bleeds correctly on narrow screens */
  .page-footer     { width: calc(100% + 24px); margin-left: -12px; margin-right: -12px; }
}

/* ─── Scrollbar (webkit) ─────────────────────────────────────────────────── */
::-webkit-scrollbar             { width: 6px; }
::-webkit-scrollbar-track       { background: var(--bg-base); }
::-webkit-scrollbar-thumb       { background: var(--text-muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* Selection highlight */
::selection { background: rgba(245,166,35,0.25); color: var(--text-heading); }