/* ═══════════════════════════════════════════
   THEME VARIABLES — Light / Dark
   ═══════════════════════════════════════════ */
:root {
  --serif: 'Cormorant Garamond', 'Georgia', serif;
  --serif-sc: 'Cormorant SC', 'Georgia', serif;
  --sans: 'DM Sans', 'Helvetica Neue', sans-serif;
  --gold: #C4A35A;
  --gold-soft: #D4B97A;
  --gold-glow: rgba(196, 163, 90, 0.15);
  --green: #4A7C59;
  --green-glow: rgba(74, 124, 89, 0.2);
  --red: #8B3A3A;
  --red-glow: rgba(139, 58, 58, 0.15);
  --miss: #B8863A;
  --miss-glow: rgba(184, 134, 58, 0.15);
  /* Spring physics */
  --spring-press: cubic-bezier(0.2, 0, 0, 1);
  --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --spring-snappy: cubic-bezier(0.5, 1.5, 0.5, 1);
  /* Safe areas */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* ── LIGHT THEME ── */
[data-theme="light"] {
  --bg: #F5F0E8;
  --bg-raised: #FAF8F4;
  --ink: #1A1F2E;
  --ink-light: #3A3F4E;
  --ink-muted: #6B7084;
  --ink-faint: rgba(26, 31, 46, 0.06);
  --border: rgba(26, 31, 46, 0.07);
  --border-strong: rgba(26, 31, 46, 0.12);
  /* Glass recipe — the Apple triple */
  --glass-bg: rgba(255, 255, 255, 0.35);
  --glass-blur: blur(40px) saturate(1.8) brightness(1.05);
  --glass-border: rgba(255, 255, 255, 0.45);
  --glass-border-outer: rgba(26, 31, 46, 0.06);
  --glass-shadow: 0 2px 8px rgba(26, 31, 46, 0.04), 0 8px 32px rgba(26, 31, 46, 0.06);
  --glass-inner-glow: inset 0 0.5px 0 rgba(255, 255, 255, 0.6);
  --glass-highlight-color: rgba(255, 255, 255, 0.7);
  /* Ambient */
  --ambient-1: rgba(196, 163, 90, 0.06);
  --ambient-2: rgba(196, 163, 90, 0.04);
  --ambient-3: rgba(139, 115, 70, 0.03);
  /* Tab bar */
  --tab-bg: rgba(245, 240, 232, 0.88);
  --tab-border: rgba(26, 31, 46, 0.06);
  /* Immersive practice overlay */
  --immersive-bg: rgba(245, 240, 232, 0.72);
  --immersive-glass: rgba(255, 255, 255, 0.40);
  --immersive-glass-border: rgba(255, 255, 255, 0.65);
  --immersive-glass-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 8px 32px rgba(26,31,46,0.06), 0 2px 8px rgba(26,31,46,0.04);
}

/* ── DARK THEME ── */
[data-theme="dark"] {
  --bg: #0C0E14;
  --bg-raised: #141720;
  --ink: #E8E4DC;
  --ink-light: #B8B4AC;
  --ink-muted: #7A7880;
  --ink-faint: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.1);
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-blur: blur(40px) saturate(1.6) brightness(0.95);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-border-outer: rgba(0, 0, 0, 0.3);
  --glass-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 12px 40px rgba(0, 0, 0, 0.25);
  --glass-inner-glow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
  --glass-highlight-color: rgba(255, 255, 255, 0.12);
  --gold: #D4B97A;
  --gold-glow: rgba(196, 163, 90, 0.12);
  --green: #6BAF7E;
  --green-glow: rgba(107, 175, 126, 0.15);
  --red: #C06060;
  --red-glow: rgba(192, 96, 96, 0.12);
  --miss: #D4A050;
  --miss-glow: rgba(212, 160, 80, 0.15);
  --ambient-1: rgba(196, 163, 90, 0.03);
  --ambient-2: rgba(196, 163, 90, 0.02);
  --ambient-3: rgba(100, 80, 50, 0.02);
  --tab-bg: rgba(12, 14, 20, 0.92);
  --tab-border: rgba(255, 255, 255, 0.06);
  /* Immersive practice overlay */
  --immersive-bg: rgba(12, 14, 20, 0.82);
  --immersive-glass: rgba(255, 255, 255, 0.055);
  --immersive-glass-border: rgba(255, 255, 255, 0.13);
  --immersive-glass-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 32px rgba(0,0,0,0.20), 0 2px 8px rgba(0,0,0,0.12);
}

/* ═══════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  transition: background 0.5s ease, color 0.3s ease;
}

/* Ambient parchment light */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, var(--ambient-1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, var(--ambient-2) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, var(--ambient-3) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  transition: background 0.5s ease;
}

/* ═══════════════════════════════════════════
   GLASS — the core material
   ═══════════════════════════════════════════ */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-inner-glow), var(--glass-shadow);
  position: relative;
  overflow: hidden;
}

/* Light refraction highlight — follows pointer via JS */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    600px circle at var(--light-x, 50%) var(--light-y, 30%),
    var(--glass-highlight-color) 0%,
    transparent 50%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.glass:hover::before,
.glass.touching::before {
  opacity: 1;
}

/* Top edge highlight — simulates overhead light source */
.glass::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-highlight-color), transparent);
  pointer-events: none;
}

/* ═══════════════════════════════════════════
   3D TACTILE — press, tilt, bounce
   ═══════════════════════════════════════════ */
.tactile {
  transition:
    transform 0.15s var(--spring-press),
    box-shadow 0.15s var(--spring-press);
  will-change: transform;
  transform-style: preserve-3d;
}

.tactile:active,
.tactile.pressing {
  /* JS overrides with precise tilt — this is the fallback */
  transform: scale(0.97) translateZ(0);
}

/* Release bounce — applied briefly by JS after touch end */
.tactile.bouncing {
  transition: transform 0.45s var(--spring-bounce);
}

/* ═══════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════ */
#app {
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 520px;
  margin: 0 auto;
  padding-top: var(--sat);
}

.app-pad {
  padding-left: calc(24px + var(--sal));
  padding-right: calc(24px + var(--sar));
}

/* Screens */
.screen { display: none; flex-direction: column; flex: 1; min-height: 0; }
.screen.active { display: flex; animation: screenIn 0.45s var(--spring-smooth) both; }
.home-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
}
.home-scroll::-webkit-scrollbar { display: none; }
@keyframes screenIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════════
   TAB BAR — glass material
   ═══════════════════════════════════════════ */
.tab-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 24px;
  padding-bottom: calc(10px + var(--sab));
  background: var(--tab-bg);
  backdrop-filter: blur(30px) saturate(1.6);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  border-top: 0.5px solid var(--tab-border);
}

.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0 4px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ink-muted);
  transition: color 0.2s, transform 0.3s var(--spring-bounce);
}

.tab-btn.active { color: var(--ink); }
.tab-btn.active svg { transform: scale(1.1); }
.tab-btn svg {
  width: 22px; height: 22px;
  transition: transform 0.3s var(--spring-bounce);
}
.tab-btn span {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ═══════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════ */
.app-header {
  padding: 16px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.app-logo {
  font-family: var(--serif-sc);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.app-logo b { color: var(--gold); font-weight: 400; }

.header-right { display: flex; align-items: center; gap: 12px; }

.stat-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
}
.stat-badge .v { color: var(--ink); font-weight: 600; }

/* Theme toggle — a beautiful glass pill */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inner-glow), 0 2px 8px rgba(0,0,0,0.04);
  border: 0.5px solid var(--glass-border);
  color: var(--gold);
  transition: transform 0.35s var(--spring-bounce), background 0.3s;
}
.theme-toggle:active { transform: scale(0.88) rotate(-15deg); }

/* ═══════════════════════════════════════════
   HOME SCREEN
   ═══════════════════════════════════════════ */
.home-greeting { padding: 20px 0 4px; }
.home-greeting h1 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
  line-height: 1.25;
}
.home-greeting h1 em { font-style: italic; font-weight: 400; }
.home-sub { font-size: 14px; color: var(--ink-muted); margin-top: 5px; }

/* Daily card — full glass treatment */
.daily-card {
  margin-top: 18px;
  padding: 22px;
  border-radius: 22px;
  cursor: pointer;
}

.dc-label {
  font-family: var(--serif-sc);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.dc-poem {
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 14px;
}
.dc-meta { display: flex; align-items: center; justify-content: space-between; }
.dc-author {
  font-family: var(--serif-sc);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-light);
}
.dc-action {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gold);
}
.dc-action svg {
  transition: transform 0.2s var(--spring-smooth);
}
.daily-card:hover .dc-action svg,
.daily-card.pressing .dc-action svg {
  transform: translateX(3px);
}

/* ── Discovery Feed ── */
.hero-card {
  margin-top: 18px;
  border-radius: 22px;
  cursor: pointer;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-inner-glow), var(--glass-shadow);
  animation: fadeUp 0.5s var(--spring-smooth) both;
  overflow: hidden;
}
.hero-art {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center 30%;
  background-color: var(--ink-faint);
  position: relative;
}
.hero-art::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to top, var(--bg), transparent);
  pointer-events: none;
}
.hero-body {
  padding: 22px 22px 16px;
}
.hero-art + .hero-body {
  padding-top: 4px;
}
.hero-credit {
  padding: 0 22px 14px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  opacity: 0.6;
}
.hero-credit:empty { display: none; }
.hero-label {
  font-family: var(--serif-sc);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.hero-tagline {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.25;
  margin: 0 0 4px;
  color: var(--ink);
}
.hero-subtitle {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-muted);
  margin: 0 0 16px;
}
.hero-preview {
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-light, var(--ink-muted));
  margin: 0 0 16px;
}
.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hero-author {
  font-family: var(--serif-sc);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.hero-action {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-action svg {
  transition: transform 0.2s var(--spring-smooth);
}
.hero-card:hover .hero-action svg,
.hero-card.pressing .hero-action svg {
  transform: translateX(3px);
}

/* Discovery collections row */
.discover-scroll {
  display: flex;
  overflow-x: auto;
  padding: 4px 0 16px;
  gap: 12px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.discover-scroll::-webkit-scrollbar { display: none; }
.discover-card {
  flex-shrink: 0;
  width: 152px;
  border-radius: 16px;
  cursor: pointer;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-inner-glow), var(--glass-shadow);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  animation: cardSlideIn 0.4s var(--spring-smooth) both;
  overflow: hidden;
}
.discover-card-art {
  width: 100%;
  height: 88px;
  background-size: cover;
  background-position: center;
  background-color: var(--ink-faint);
  position: relative;
}
.discover-card-art::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 36px;
  background: linear-gradient(to top, var(--bg), transparent);
  pointer-events: none;
}
.discover-card-body {
  padding: 10px 14px 14px;
}
.discover-card:nth-child(1) { animation-delay: 0.05s; }
.discover-card:nth-child(2) { animation-delay: 0.1s; }
.discover-card:nth-child(3) { animation-delay: 0.15s; }
.discover-card:nth-child(4) { animation-delay: 0.2s; }
.discover-card:nth-child(5) { animation-delay: 0.25s; }
.discover-card:nth-child(6) { animation-delay: 0.3s; }
@keyframes cardSlideIn {
  from { opacity: 0; transform: translateX(20px) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
.discover-card:active {
  transform: scale(0.95);
}
.discover-card.active {
  box-shadow: var(--glass-inner-glow), 0 0 0 1.5px var(--gold);
}
.discover-card-name {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 6px;
}
.discover-card-count {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.03em;
}

/* Collection expansion */
#collection-expand { overflow: hidden; }
.collection-expand-inner {
  padding-top: 4px;
}
.collection-poem {
  padding: 14px 0;
  border-bottom: 0.5px solid var(--border, rgba(0,0,0,0.06));
  animation: poemRowIn 0.3s var(--spring-smooth) both;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.collection-poem:nth-child(1) { animation-delay: 0s; }
.collection-poem:nth-child(2) { animation-delay: 0.04s; }
.collection-poem:nth-child(3) { animation-delay: 0.08s; }
.collection-poem:nth-child(4) { animation-delay: 0.12s; }
.collection-poem:nth-child(5) { animation-delay: 0.16s; }
@keyframes poemRowIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.collection-poem:last-child { border-bottom: none; }
.collection-poem:active { opacity: 0.6; }
.collection-poem-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.collection-poem-author {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
}
.collection-poem .added-badge {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--green);
  margin-left: 8px;
}

/* Section labels */
.section-label {
  font-family: var(--serif-sc);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  text-transform: uppercase;
  margin: 22px 0 10px;
}

/* Poem list */
.poem-list-wrap {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
}
.poem-list-wrap::-webkit-scrollbar { display: none; }

.poem-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--ink-faint);
  cursor: pointer;
  transition: opacity 0.15s;
}
.poem-item:active { opacity: 0.6; }

.pi-level {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
  transition: transform 0.3s var(--spring-bounce);
}
.pi-level.new { background: var(--ink-faint); color: var(--ink-muted); }
.pi-level.learning { background: var(--gold-glow); color: var(--gold); }
.pi-level.mastered { background: var(--green-glow); color: var(--green); }

.pi-info { flex: 1; min-width: 0; }
.pi-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pi-author { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }

.pi-bar {
  width: 48px; height: 4px;
  background: var(--ink-faint);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.pi-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s var(--spring-smooth);
}
.pi-bar-fill.new { width: 0; }
.pi-bar-fill.learning { background: var(--gold); }
.pi-bar-fill.mastered { width: 100%; background: var(--green); }

.empty-state { text-align: center; padding: 48px 20px; color: var(--ink-muted); }
.empty-state p { font-family: var(--serif); font-size: 18px; font-style: italic; margin-bottom: 8px; }
.empty-state small { font-size: 13px; }

/* ═══════════════════════════════════════════
   LIBRARY SCREEN
   ═══════════════════════════════════════════ */
.search-wrap { position: relative; margin: 12px 0 6px; }
.search-wrap input {
  width: 100%;
  padding: 13px 16px 13px 42px;
  border-radius: 16px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
  /* Glass input */
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-inner-glow);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-wrap input::placeholder { color: var(--ink-muted); }
.search-wrap input:focus {
  border-color: var(--gold);
  box-shadow: var(--glass-inner-glow), 0 0 0 3px var(--gold-glow);
}
.search-wrap svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  pointer-events: none;
}

.collections-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.collections-row::-webkit-scrollbar { display: none; }

.coll-chip {
  flex-shrink: 0;
  padding: 9px 18px;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
  /* Glass chip */
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-inner-glow), 0 1px 4px rgba(0,0,0,0.03);
  transition: all 0.2s var(--spring-smooth), transform 0.15s var(--spring-press);
}
.coll-chip:active { transform: scale(0.95); }
.coll-chip.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  box-shadow: 0 2px 12px rgba(26, 31, 46, 0.2);
}

.lib-results {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
}
.lib-results::-webkit-scrollbar { display: none; }

.lib-poem {
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-faint);
  cursor: pointer;
  transition: opacity 0.15s;
}
.lib-poem:active { opacity: 0.6; }
.lib-poem-title { font-family: var(--serif); font-size: 17px; font-weight: 500; }
.lib-poem-author { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.lib-poem-line {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-light);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lib-poem .added-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  margin-left: 8px;
}

.lib-loading { text-align: center; padding: 40px 0; color: var(--ink-muted); font-size: 14px; }
.lib-loading .spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-bottom: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════
   POEM VIEW
   ═══════════════════════════════════════════ */
.poem-view-header {
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.back-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  /* Glass button */
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-inner-glow), 0 2px 6px rgba(0,0,0,0.04);
  transition: transform 0.3s var(--spring-bounce), box-shadow 0.15s;
}
.back-btn:active {
  transform: scale(0.88);
  box-shadow: var(--glass-inner-glow), 0 1px 2px rgba(0,0,0,0.04);
}

.pv-meta { flex: 1; min-width: 0; }
.pv-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pv-author {
  font-family: var(--serif-sc);
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.03em;
}

/* Phase badge — subtle status label (not a button) */
.phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  font-family: var(--serif-sc);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  background: none;
  border: none;
  transition: color 0.3s var(--spring-smooth);
}
.phase-badge.read { color: var(--ink-muted); }
.phase-badge.easy { color: var(--gold); }
.phase-badge.medium { color: var(--gold); }
.phase-badge.hard { color: var(--red); }
.phase-badge.recall { color: var(--green); }

/* Progress strip */
.progress-strip { display: flex; align-items: center; gap: 8px; padding: 0 0 8px; flex-shrink: 0; }
.progress-dots { display: flex; gap: 4px; flex: 1; }
.progress-dot {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: var(--ink-faint);
  transition: background 0.5s var(--spring-smooth), transform 0.3s var(--spring-bounce);
}
.progress-dot.done { background: var(--gold); }
.progress-dot.current { background: var(--ink); transform: scaleY(1.3); }
.progress-label { font-size: 12px; color: var(--ink-muted); font-weight: 500; white-space: nowrap; }

/* Poem text — read mode (scrollable, full poem) */
.poem-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 20px;
  position: relative;
}
.poem-scroll::-webkit-scrollbar { display: none; }

/* ── CHUNK FOCUS MODE — immersive fullscreen overlay ── */
.chunk-focus {
  display: none;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 50;
  /* Semi-transparent so blurred background shows through — real frosted glass */
  background-color: var(--immersive-bg);
  /* Warm amber radial glow behind the poem stage — like a reading lamp */
  background-image: radial-gradient(ellipse 90% 60% at 50% 44%, var(--gold-glow), transparent 72%);
  padding: env(safe-area-inset-top, 20px) 24px env(safe-area-inset-bottom, 20px);
  /* overflow: hidden removed — iOS Safari blocks input focus inside overflow:hidden fixed elements */
}
.chunk-focus::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Stronger blur + boost colours from background art */
  backdrop-filter: blur(36px) saturate(1.8) brightness(1.02);
  -webkit-backdrop-filter: blur(36px) saturate(1.8) brightness(1.02);
  z-index: -1;
  pointer-events: none;
}
.chunk-focus.active {
  display: flex;
  animation: immersiveIn 0.4s var(--spring-smooth) both;
}
@keyframes immersiveIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Immersive header — back, progress, peek */
.immersive-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 8px;
  flex-shrink: 0;
}
.chunk-back-btn {
  border: none;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 10px;
  transition: opacity 0.2s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chunk-back-btn:active { opacity: 0.4; }
.immersive-dots {
  flex: 1;
  display: flex;
  gap: 4px;
  align-items: center;
}
.immersive-dot {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: var(--ink-faint);
  transition: background 0.5s var(--spring-smooth), transform 0.4s var(--spring-bounce), box-shadow 0.4s;
}
.immersive-dot.done {
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold-glow);
}
.immersive-dot.current {
  background: var(--ink);
  transform: scaleY(2.2);
  box-shadow: 0 0 4px rgba(0,0,0,0.15);
}

/* Chunk center — vertically centered content, MUST have min-height:0 to shrink in flex */
.chunk-center {
  flex: 1;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}

.chunk-lines {
  padding: 16px 8px max(24px, var(--kb-height, 24px));
  flex-shrink: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: 20px;
  position: relative;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 2.1;
  /* No card background — text floats on the immersive overlay */
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}
/* No specular highlight needed without card */
.chunk-lines::before { display: none; }

.chunk-lines .poem-line {
  opacity: 1;
  filter: none;
  animation: chunkLineIn 0.4s var(--spring-smooth) both;
  position: relative;
  z-index: 2;
}
.chunk-lines .poem-line:nth-child(1) { animation-delay: 0s; }
.chunk-lines .poem-line:nth-child(2) { animation-delay: 0.04s; }
.chunk-lines .poem-line:nth-child(3) { animation-delay: 0.08s; }
.chunk-lines .poem-line:nth-child(4) { animation-delay: 0.12s; }
.chunk-lines .poem-line:nth-child(5) { animation-delay: 0.16s; }

@keyframes chunkLineIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.chunk-lines.exiting .poem-line {
  animation: chunkLineOut 0.25s ease-in both;
}
@keyframes chunkLineOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}

/* Cleared chunk summary (faded context above) */
.chunk-context {
  padding: 0 4px;
  max-height: 60px;
  overflow: hidden;
  flex-shrink: 0;
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  margin-bottom: 8px;
}
.chunk-context .poem-line {
  opacity: 0.25;
  min-height: 28px;
  font-size: 16px;
  line-height: 1.6;
}
.chunk-context .poem-line .line-number { font-size: 9px; }

/* Input section inside chunk focus — always visible, never moves */
.chunk-input {
  flex-shrink: 0;
  padding: 10px 0 12px;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}

/* ── Peek pill — translucent glass morphism ── */
.peek-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  cursor: pointer;
  background: linear-gradient(
    168deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.04) 50%,
    rgba(0,0,0,0.05) 100%
  );
  backdrop-filter: blur(40px) saturate(1.5);
  -webkit-backdrop-filter: blur(40px) saturate(1.5);
  border: 0.5px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.12),
    0 4px 20px rgba(0,0,0,0.10);
  transition: transform 0.15s var(--spring-press), opacity 0.2s;
  flex-shrink: 0;
  margin-left: auto;
}
.peek-pill:active { transform: scale(0.92); opacity: 0.7; }
.peek-pill svg { opacity: 0.5; flex-shrink: 0; }
.peek-count {
  background: var(--gold);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme="light"] .peek-pill {
  background: linear-gradient(
    168deg,
    rgba(255,255,255,0.65) 0%,
    rgba(255,255,255,0.40) 50%,
    rgba(235,230,220,0.30) 100%
  );
  border-color: rgba(26, 31, 46, 0.06);
}

/* Peeking state — reveal blanked words temporarily in gold */
.poem-word.blanked.peeking {
  color: var(--gold);
  opacity: 0.6;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.poem-word.blanked.peeking .hint-first,
.poem-word.blanked.peeking .hint-rest {
  color: var(--gold);
}
.poem-word.blanked.peeking::after {
  opacity: 0.2;
}
/* Smooth fade-out when peek ends (peek uses 0.5s; reveal/miss is instant via animation) */

/* Peeking state — type-mode blanks */
.blank-target.peeking {
  border-color: color-mix(in srgb, var(--gold) 50%, transparent);
}
.blank-target.peeking .stealth-input { opacity: 0; }
.blank-target.peeking .peek-word {
  color: var(--gold);
  opacity: 0.65;
  font-family: var(--serif);
  font-size: inherit;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

/* ── Phase: Choose (multiple choice pills) ── */
.choice-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 14px 0 6px;
}
.choice-pill {
  padding: 13px 28px;
  border-radius: 100px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.015em;
  cursor: pointer;
  color: var(--ink);
  /* Liquid glass: tinted gradient + deep blur */
  background: linear-gradient(
    168deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.04) 50%,
    rgba(0,0,0,0.05) 100%
  );
  backdrop-filter: blur(40px) saturate(1.6) brightness(1.05);
  -webkit-backdrop-filter: blur(40px) saturate(1.6) brightness(1.05);
  border: 0.5px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.15),
    inset 0 -0.5px 0 rgba(0,0,0,0.08),
    0 4px 24px rgba(0,0,0,0.12),
    0 1px 4px rgba(0,0,0,0.06);
  transition: transform 0.12s var(--spring-press), box-shadow 0.18s, background 0.2s, border-color 0.2s;
  position: relative;
  overflow: hidden;
  animation: pillIn 0.32s var(--spring-bounce) both;
}
.choice-pill:nth-child(1) { animation-delay: 0.00s; }
.choice-pill:nth-child(2) { animation-delay: 0.04s; }
.choice-pill:nth-child(3) { animation-delay: 0.08s; }
.choice-pill:nth-child(4) { animation-delay: 0.12s; }
@keyframes pillIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Specular top highlight — subtle curved edge light */
.choice-pill::after {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 0.5px;
  border-radius: 100px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  pointer-events: none;
}
.choice-pill:hover:not(.pressing) {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.18),
    0 8px 32px rgba(0,0,0,0.16),
    0 2px 8px rgba(0,0,0,0.08);
}
.choice-pill:active:not(.pressing) { transform: scale(0.96); }
.choice-pill.correct {
  background: linear-gradient(
    168deg,
    color-mix(in srgb, var(--green) 18%, transparent) 0%,
    color-mix(in srgb, var(--green) 8%, transparent) 100%
  );
  border-color: color-mix(in srgb, var(--green) 35%, transparent);
  color: var(--green);
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.15),
    0 0 0 1.5px color-mix(in srgb, var(--green) 12%, transparent),
    0 4px 20px color-mix(in srgb, var(--green) 10%, transparent);
  animation: pillCorrect 0.45s var(--spring-bounce) both;
}
.choice-pill.wrong {
  background: linear-gradient(
    168deg,
    color-mix(in srgb, var(--red) 14%, transparent) 0%,
    color-mix(in srgb, var(--red) 6%, transparent) 100%
  );
  border-color: color-mix(in srgb, var(--red) 30%, transparent);
  color: var(--red);
  animation: pillWrong 0.42s var(--spring-press) both;
}
@keyframes pillCorrect {
  0%   { transform: scale(0.93); }
  40%  { transform: scale(1.07); }
  70%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}
@keyframes pillWrong {
  0%, 100% { transform: translateX(0); }
  15%  { transform: translateX(-7px); }
  35%  { transform: translateX(5px); }
  55%  { transform: translateX(-3px); }
  75%  { transform: translateX(2px); }
}
.choice-skip {
  display: block;
  margin: 8px auto 0;
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-light);
  cursor: pointer;
  padding: 8px 14px;
  opacity: 0.55;
  transition: opacity 0.2s;
}
.choice-skip:active { opacity: 1; }

/* ── Pills: theme overrides ── */
/* Light: warm frosted glass over parchment */
[data-theme="light"] .choice-pill {
  background: linear-gradient(
    168deg,
    rgba(255,255,255,0.72) 0%,
    rgba(255,255,255,0.50) 50%,
    rgba(235,230,220,0.40) 100%
  );
  border-color: rgba(26, 31, 46, 0.08);
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.9),
    0 4px 20px rgba(26,31,46,0.06),
    0 1px 3px rgba(26,31,46,0.04);
  color: var(--ink);
}
[data-theme="light"] .choice-pill::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
}
/* Dark: deep tinted liquid glass */
[data-theme="dark"] .choice-pill {
  background: linear-gradient(
    168deg,
    rgba(255,255,255,0.08) 0%,
    rgba(255,255,255,0.03) 50%,
    rgba(0,0,0,0.06) 100%
  );
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(232, 228, 220, 0.88);
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.10),
    inset 0 -0.5px 0 rgba(0,0,0,0.15),
    0 4px 24px rgba(0,0,0,0.25);
}

/* ── Phase: First-letter hint in blank ── */
.poem-word.blanked.hint-mode {
  color: transparent;
}
.poem-word.blanked.hint-mode .hint-first {
  color: var(--gold);
  font-weight: 500;
}
.poem-word.blanked.hint-mode .hint-rest {
  color: transparent;
}
/* Keep underline visible in hint mode with gold tint */
.poem-word.blanked.hint-mode::after {
  background: var(--gold);
  opacity: 0.4;
}

/* Peeking overrides hint-mode — must come after hint-mode rules */
.poem-word.blanked.hint-mode.peeking .hint-rest {
  color: var(--gold);
  opacity: 0.6;
}

/* ── Active blank ── */
.poem-word.blanked.active-blank {
  border-radius: 6px;
}
/* Light mode: warm gold line, fits the parchment aesthetic */
.poem-word.blanked.active-blank::after {
  background: var(--gold);
  height: 2px;
  animation: blankPulse 2s ease-in-out infinite;
  box-shadow: none;
}
/* Dark mode: soft cream breath-line, no neon glow */
[data-theme="dark"] .poem-word.blanked.active-blank::after {
  background: rgba(232, 228, 220, 0.55);
  height: 1.5px;
  opacity: 1;
  box-shadow: none;
}
.poem-word.blanked.active-blank::before {
  content: '';
  position: absolute;
  inset: -8px -10px;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 50% 85%, rgba(196, 163, 90, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
  animation: emberGlow 1.6s ease-in-out infinite;
}
[data-theme="dark"] .poem-word.blanked.active-blank::before {
  display: none;
}
@keyframes emberGlow {
  0%, 100% { opacity: 0.4; transform: scaleX(1); }
  50%       { opacity: 1.0; transform: scaleX(1.04); }
}

/* ── Phase results panel ── */
.phase-result-card {
  border-radius: 22px;
  padding: 20px;
  text-align: center;
  /* Tinted glass */
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-inner-glow), var(--glass-shadow);
  position: relative;
  overflow: hidden;
  animation: fadeUp 0.35s var(--spring-smooth) both;
}
.phase-result-card::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-highlight-color), transparent);
  pointer-events: none;
}
.phase-result-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 4px;
}
.phase-result-score {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 300;
  margin: 8px 0;
  transition: color 0.3s;
}
.phase-result-score.perfect { color: var(--green); animation: scorePop 0.5s var(--spring-bounce) 0.2s both; }
.phase-result-score.good { color: var(--gold); animation: scorePop 0.5s var(--spring-bounce) 0.2s both; }
.phase-result-score.weak { color: var(--red); animation: scorePop 0.5s var(--spring-bounce) 0.2s both; }
@keyframes scorePop {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}
.phase-result-hint {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 16px;
  line-height: 1.4;
}
.phase-result-btns {
  display: flex;
  gap: 10px;
}
.phase-result-btns .glass-btn {
  padding: 12px 16px;
}

.poem-text {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 2.0;
  padding: 0 4px;
}

.poem-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-bottom: 3px;
  min-height: 40px;
  transition: opacity 0.5s var(--spring-smooth), filter 0.5s var(--spring-smooth), transform 0.4s var(--spring-smooth);
}
.poem-line.stanza-break { height: 20px; min-height: 20px; }

/* ── Focus system: chunk-based (handled by chunk-focus container) ── */

/* Chunk progress indicator */
.chunk-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0 4px;
  flex-shrink: 0;
}
.chunk-dots {
  display: flex;
  gap: 5px;
}
.chunk-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
  transition: all 0.4s var(--spring-bounce);
}
.chunk-dot.done {
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold-glow);
}
.chunk-dot.active {
  background: var(--ink);
  transform: scale(1.35);
}
.chunk-label {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 500;
}

/* Chunk group transition flash */
.chunk-group-flash {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif-sc);
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--gold);
  animation: groupFlash 0.8s var(--spring-smooth) both;
  z-index: 5;
}
@keyframes groupFlash {
  0% { opacity: 0; transform: scale(0.9); }
  30% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* Chunk cleared — handled by chunk-lines.exiting animation */

.line-number {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-faint);
  width: 22px;
  text-align: right;
  margin-right: 10px;
  flex-shrink: 0;
  user-select: none;
  padding-top: 4px;
}
[data-theme="dark"] .line-number { color: rgba(255,255,255,0.08); }

.poem-word {
  display: inline-block;
  margin: 0 4.5px 3px 0;
  transition: opacity 0.3s, color 0.3s;
}

/* ── Glass pill blanks — faint outline, word-proportioned ── */
.poem-word.blanked {
  position: relative;
  color: transparent;
  background: linear-gradient(
    170deg,
    rgba(255,255,255,0.07) 0%,
    rgba(255,255,255,0.02) 60%,
    rgba(0,0,0,0.04) 100%
  );
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 0.5px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 2px 8px;
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.10),
    0 2px 12px rgba(0,0,0,0.08);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.2s;
  line-height: 1.15;
  vertical-align: middle;
}
.poem-word.blanked::after { display: none; }

[data-theme="light"] .poem-word.blanked {
  background: linear-gradient(
    170deg,
    rgba(255,255,255,0.60) 0%,
    rgba(255,255,255,0.35) 60%,
    rgba(235,230,220,0.25) 100%
  );
  border-color: rgba(0,0,0,0.08);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.8), 0 2px 10px rgba(0,0,0,0.04);
}

/* Active blank — gold outline + gentle breath */
.poem-word.blanked.active-blank {
  background: linear-gradient(
    170deg,
    rgba(255,255,255,0.09) 0%,
    rgba(255,255,255,0.03) 60%,
    rgba(0,0,0,0.04) 100%
  );
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--gold) 10%, transparent),
    inset 0 0.5px 0 rgba(255,255,255,0.12),
    0 4px 20px rgba(0,0,0,0.10);
  animation: pillBreath 2.5s ease-in-out infinite;
}
[data-theme="light"] .poem-word.blanked.active-blank {
  background: rgba(255,255,255,0.75);
}

@keyframes pillBreath {
  0%, 100% {
    box-shadow: 0 1px 8px rgba(0,0,0,0.22), 0 0 0 2px color-mix(in srgb, var(--gold) 12%, transparent), inset 0 1.5px 0 rgba(255,255,255,0.16);
    border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  }
  50% {
    box-shadow: 0 2px 14px rgba(0,0,0,0.28), 0 0 8px color-mix(in srgb, var(--gold) 22%, transparent), inset 0 1.5px 0 rgba(255,255,255,0.22);
    border-color: color-mix(in srgb, var(--gold) 72%, transparent);
  }
}

/* ── Correct word — pill flashes green, word drops in 3D ── */
.poem-word.blanked.revealed {
  color: var(--green);
  transition: none;
  animation: wordDrop 0.46s cubic-bezier(0.34, 1.45, 0.64, 1) both, pillAccept 0.42s ease-out forwards;
}

/* 3D word drop — arrives from above with perspective */
@keyframes wordDrop {
  0%   { opacity: 0; transform: perspective(280px) rotateX(-16deg) translateY(-4px) scale(0.90); }
  55%  { opacity: 1; transform: perspective(280px) rotateX(3deg) translateY(1px) scale(1.05); }
  80%  { transform: perspective(280px) rotateX(-0.5deg) scale(0.99); }
  100% { opacity: 1; transform: perspective(280px) rotateX(0deg) translateY(0) scale(1); }
}

/* Pill flashes green then dissolves */
@keyframes pillAccept {
  0%   { background: color-mix(in srgb, var(--green) 18%, transparent); border-color: color-mix(in srgb, var(--green) 50%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--green) 22%, transparent), inset 0 1px 0 rgba(255,255,255,0.2); }
  40%  { background: color-mix(in srgb, var(--green) 5%, transparent); border-color: color-mix(in srgb, var(--green) 14%, transparent); }
  100% { background: transparent; border-color: transparent; box-shadow: none; padding: 1px 5px; }
}

/* Radial glow burst on correct placement */
.poem-word.blanked.revealed::before {
  content: '';
  position: absolute;
  inset: -18px -24px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--green) 0%, transparent 65%);
  animation: glowBurst 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
}
@keyframes glowBurst {
  0%   { opacity: 0.55; transform: scale(0.4); }
  30%  { opacity: 0.30; transform: scale(0.85); }
  100% { opacity: 0;    transform: scale(1.7); }
}

/* ── Missed word — pill dissolves, word shakes in amber ── */
.poem-word.blanked.missed {
  color: var(--miss);
  transition: none;
  animation: wordShake 0.5s var(--spring-press) both, pillMiss 0.35s ease-out forwards;
}

@keyframes pillMiss {
  0%   { background: color-mix(in srgb, var(--miss) 14%, transparent); border-color: color-mix(in srgb, var(--miss) 40%, transparent); }
  100% { background: transparent; border-color: transparent; box-shadow: none; }
}

@keyframes wordShake {
  0%  { transform: translateX(0); opacity: 0; }
  15% { transform: translateX(-5px); opacity: 0.7; }
  30% { transform: translateX(4px); opacity: 1; }
  45% { transform: translateX(-3px); }
  60% { transform: translateX(2px); }
  75% { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}

/* ── Inline stealth input — glass pill for type / firstletter phases ── */
.blank-target {
  display: inline-flex;
  align-items: center;
  position: relative;
  vertical-align: middle;
  min-width: 3ch;
  overflow: hidden;
  background: linear-gradient(
    170deg,
    rgba(255,255,255,0.07) 0%,
    rgba(255,255,255,0.02) 60%,
    rgba(0,0,0,0.04) 100%
  );
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 0.5px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 2px 8px;
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.10),
    0 2px 12px rgba(0,0,0,0.08);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.2s;
  cursor: text;
  touch-action: manipulation;
  line-height: 1.15;
}
[data-theme="light"] .blank-target {
  background: linear-gradient(
    170deg,
    rgba(255,255,255,0.60) 0%,
    rgba(255,255,255,0.35) 60%,
    rgba(235,230,220,0.25) 100%
  );
  border-color: rgba(0,0,0,0.08);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.8), 0 2px 10px rgba(0,0,0,0.04);
}
.blank-target.active-blank {
  background: linear-gradient(
    170deg,
    rgba(255,255,255,0.09) 0%,
    rgba(255,255,255,0.03) 60%,
    rgba(0,0,0,0.04) 100%
  );
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--gold) 10%, transparent),
    inset 0 0.5px 0 rgba(255,255,255,0.12),
    0 4px 20px rgba(0,0,0,0.10);
  animation: pillBreath 2.5s ease-in-out infinite;
}
[data-theme="light"] .blank-target.active-blank {
  background: rgba(255,255,255,0.75);
}
.blank-target.revealed,
.blank-target.missed {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 0 3px;
  transform: none;
  transition: none;
  animation: none;
}

.stealth-input {
  font-family: var(--serif);
  font-size: inherit;
  line-height: inherit;
  color: var(--ink);
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  min-width: 3ch;
  caret-color: var(--gold);
  -webkit-appearance: none;
  position: relative;
  z-index: 2;
  vertical-align: baseline;
  touch-action: manipulation;
  -webkit-user-select: text;
  user-select: text;
}

/* Dot hints inside blank pill — middle dots proportional to word length */
/* Letter count — tiny corner hallmark */
.letter-count {
  position: absolute;
  bottom: 2px;
  right: 5px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--gold) 35%, transparent);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.25s ease, transform 0.25s ease;
  line-height: 1;
}
/* Fade out when typing, answered, or not active */
.blank-target.has-input .letter-count {
  opacity: 0;
  transform: scale(0.8);
}
.blank-target.revealed .letter-count,
.blank-target.missed .letter-count {
  opacity: 0;
}

/* Active blank: slow shimmer refraction */
.blank-target.active-blank::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 30%,
    color-mix(in srgb, var(--gold) 8%, transparent) 45%,
    color-mix(in srgb, var(--gold) 14%, transparent) 50%,
    color-mix(in srgb, var(--gold) 8%, transparent) 55%,
    transparent 70%
  );
  background-size: 250% 100%;
  animation: glassShimmer 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes glassShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Inner glow builds as user types — activated via JS class */
.blank-target.has-input {
  box-shadow:
    inset 0 0 12px color-mix(in srgb, var(--gold) 8%, transparent),
    inset 0 0.5px 0 rgba(255,255,255,0.12),
    0 4px 20px rgba(0,0,0,0.10);
}

/* Inactive blanks: gentle breathing */
.blank-target:not(.active-blank):not(.revealed):not(.missed) {
  animation: blankBreath 4s ease-in-out infinite;
}
@keyframes blankBreath {
  0%, 100% { border-color: rgba(255,255,255,0.08); }
  50%      { border-color: rgba(255,255,255,0.14); }
}
[data-theme="light"] .blank-target:not(.active-blank):not(.revealed):not(.missed) {
  animation: blankBreathLight 4s ease-in-out infinite;
}
@keyframes blankBreathLight {
  0%, 100% { border-color: rgba(0,0,0,0.06); }
  50%      { border-color: rgba(0,0,0,0.12); }
}

/* Hide placeholder — no longer used */
.stealth-input::placeholder {
  color: transparent;
}

/* Underline hidden — pill border handles active state */
.blank-underline { display: none; }

/* Ghost hint — first letter, gold, shown only on active blank in recall mode */
.ghost-hint {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-family: var(--serif);
  font-size: inherit;
  line-height: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.2s;
}
.blank-target.active-blank .ghost-hint { opacity: 0.75; }
.blank-target.has-input .ghost-hint { opacity: 0; }

/* Revealed: hide input/underline, snap in the correct word via ::after */
.blank-target.revealed .stealth-input,
.blank-target.missed .stealth-input,
.blank-target.revealed .blank-underline,
.blank-target.missed .blank-underline,
.blank-target.revealed .ghost-hint,
.blank-target.missed .ghost-hint { display: none; }

/* Revealed word — 3D drop animation, same as choose mode */
.blank-target .revealed-word {
  color: var(--green);
  display: inline-block;
  animation: wordDrop 0.46s cubic-bezier(0.34, 1.45, 0.64, 1) both;
}
.blank-target.missed .revealed-word {
  color: var(--miss);
  animation: wordShake 0.5s var(--spring-press) both;
}

/* Glow burst on reveal — reuses glowBurst keyframes */
.blank-target.revealed::before {
  content: '';
  position: absolute;
  inset: -18px -24px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--green) 0%, transparent 65%);
  animation: glowBurst 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
}


/* ═══════════════════════════════════════════
   TOOLBARS — glass material
   ═══════════════════════════════════════════ */
.glass-toolbar { flex-shrink: 0; padding: 10px 0 14px; }

.glass-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 22px;
  /* Full glass treatment */
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-inner-glow), var(--glass-shadow);
  position: relative;
  overflow: hidden;
}

.glass-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-highlight-color), transparent);
  pointer-events: none;
}

.glass-btn {
  flex: 1;
  padding: 13px 14px;
  border: none;
  border-radius: 14px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  color: var(--ink-muted);
  transition:
    transform 0.15s var(--spring-press),
    background 0.2s,
    box-shadow 0.2s;
}
.glass-btn:active { transform: scale(0.96); }

.glass-btn.primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.glass-btn.primary:active {
  transform: scale(0.96);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.glass-btn.gold {
  background: var(--gold);
  color: #fff;
  box-shadow: 0 2px 12px rgba(196, 163, 90, 0.3);
}
.glass-btn.gold:active {
  transform: scale(0.96);
  box-shadow: 0 1px 6px rgba(196, 163, 90, 0.2);
}

/* Input bar — glass */
.input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border-radius: 22px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-inner-glow), var(--glass-shadow);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input-bar:focus-within {
  border-color: var(--gold);
  box-shadow:
    var(--glass-inner-glow),
    0 0 0 3px var(--gold-glow),
    0 4px 24px rgba(196, 163, 90, 0.14),
    0 8px 40px rgba(196, 163, 90, 0.07);
}
[data-theme="light"] .input-bar:focus-within {
  background: rgba(255, 255, 255, 0.55);
}
[data-theme="dark"] .input-bar:focus-within {
  background: rgba(255, 255, 255, 0.10);
}

.input-bar input {
  flex: 1;
  padding: 11px 14px;
  border: none;
  background: transparent;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
}
.input-bar input::placeholder { color: var(--ink-muted); font-style: italic; opacity: 0.5; }

.input-bar button {
  width: 46px; height: 46px;
  border-radius: 14px;
  border: none;
  background: var(--ink);
  color: var(--bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s var(--spring-press), box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.input-bar button:active { transform: scale(0.9); }

.skip-btn {
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-light);
  cursor: pointer;
  padding: 8px 14px;
  display: block;
  margin: 2px auto 0;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.skip-btn:active { opacity: 1; }

/* ── Skip Row (counter + skip button) ── */
.skip-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 6px;
}
.skip-row .choice-skip,
.skip-row .skip-btn {
  display: inline-block;
  margin: 0;
}

/* ── Blank Counter ── */
.blank-counter {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-light);
  opacity: 0.5;
}

/* ── Streak Aura (Hades-style screen-edge vignette) ── */
.streak-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  background: radial-gradient(
    ellipse 120% 80% at 50% 100%,
    color-mix(in srgb, var(--gold) 25%, transparent) 0%,
    transparent 60%
  );
  mix-blend-mode: screen;
}
.streak-aura.active {
  transition: opacity 0.4s ease;
}
/* Pulse on each correct during streak */
.streak-aura.pulse {
  animation: auraPulse 0.5s ease-out;
}
@keyframes auraPulse {
  0%   { filter: brightness(2); }
  100% { filter: brightness(1); }
}

/* Milestone bloom — radial flash at 5/10/15/20 */
.streak-bloom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}
.streak-bloom.fire {
  animation: bloomFlash 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes bloomFlash {
  0%   {
    opacity: 0.7;
    background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--gold) 40%, transparent) 0%, transparent 50%);
  }
  50%  {
    opacity: 0.4;
    background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--gold) 20%, transparent) 0%, transparent 70%);
  }
  100% {
    opacity: 0;
    background: radial-gradient(circle at 50% 60%, transparent 0%, transparent 100%);
  }
}

/* Ember counter — ambient number in header */
.streak-ember {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  text-shadow: 0 0 12px color-mix(in srgb, var(--gold) 50%, transparent);
  margin-left: auto;
  margin-right: 8px;
}
.streak-ember.active {
  opacity: 0.7;
  transform: translateY(0);
}

/* ── First-Letter Hint on Miss ── */
.miss-hint-flash {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 1.3em;
  font-weight: 500;
  font-style: italic;
  color: var(--gold);
  opacity: 0;
  pointer-events: none;
  animation: hintFlash 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes hintFlash {
  0%   { transform: scale(0.6); opacity: 0; filter: blur(4px); }
  20%  { transform: scale(1.08); opacity: 1; filter: blur(0px); }
  70%  { transform: scale(1.0);  opacity: 0.9; filter: blur(0px); }
  100% { transform: scale(0.95); opacity: 0; filter: blur(2px); }
}

/* Ensure blank-target can host the absolute hint */
.blank-target { position: relative; }
.poem-word.blanked { position: relative; }

/* ── Chunk Lines Scroll Padding ── */
.chunk-lines {
  scroll-padding-block: 40vh;
}

/* ═══════════════════════════════════════════
   ADD YOUR OWN POEM
   ═══════════════════════════════════════════ */
.add-own-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gold);
  background: none;
  border: 0.5px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-radius: 100px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.add-own-btn:active {
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}
.add-own-btn svg { opacity: 0.7; }

/* Sheet backdrop + container */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.sheet-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.add-poem-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  margin: 0 auto;
  border-radius: 22px 22px 0 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.06) 100%
  );
  backdrop-filter: blur(50px) saturate(1.6);
  -webkit-backdrop-filter: blur(50px) saturate(1.6);
  border: 0.5px solid rgba(255,255,255,0.10);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
}
[data-theme="light"] .add-poem-sheet {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.88) 0%,
    rgba(245,240,232,0.92) 100%
  );
  border-color: rgba(0,0,0,0.06);
}
.add-poem-sheet.open {
  transform: translateY(0);
}
.sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.15);
  margin: 10px auto 0;
}
[data-theme="light"] .sheet-handle {
  background: rgba(0,0,0,0.12);
}
.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px 12px;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
}
[data-theme="light"] .sheet-header {
  border-bottom-color: rgba(0,0,0,0.06);
}
.sheet-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}
.sheet-close {
  background: none;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 6px;
}
.sheet-close:active { color: var(--ink); }

/* Form */
.add-poem-form {
  padding: 16px 22px 32px;
}
.add-poem-label {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.add-poem-label:not(:first-child) {
  margin-top: 16px;
}
.add-poem-opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.6;
}
.add-poem-input,
.add-poem-textarea {
  display: block;
  width: 100%;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
[data-theme="light"] .add-poem-input,
[data-theme="light"] .add-poem-textarea {
  background: rgba(255,255,255,0.5);
  border-color: rgba(0,0,0,0.10);
}
.add-poem-input:focus,
.add-poem-textarea:focus {
  border-color: color-mix(in srgb, var(--gold) 50%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 10%, transparent);
}
.add-poem-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.7;
  font-size: 15px;
}
.add-poem-hint {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-muted);
  opacity: 0.6;
  margin-top: 6px;
}
.add-poem-submit {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--gold);
  cursor: pointer;
  transition: transform 0.12s, opacity 0.2s;
}
.add-poem-submit:active {
  transform: scale(0.97);
  opacity: 0.9;
}
.add-poem-error {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--red, #c94);
  margin-top: 8px;
  min-height: 1em;
}
/* Delete button on custom poems */
.lib-poem-delete {
  float: right;
  background: none;
  border: none;
  font-size: 18px;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.5;
  transition: opacity 0.2s, color 0.2s;
}
.lib-poem-delete:active {
  opacity: 1;
  color: var(--red, #c94);
}

/* ═══════════════════════════════════════════
   COMPLETION SCREEN
   ═══════════════════════════════════════════ */
.completion-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

/* Seal — glass + gold */
.completion-seal {
  width: 88px; height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  /* Glass seal */
  background: var(--gold-glow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid var(--gold);
  box-shadow:
    0 0 0 4px var(--gold-glow),
    0 4px 24px rgba(196, 163, 90, 0.2);
  animation: sealIn 0.6s var(--spring-bounce) both;
}
@keyframes sealIn {
  from { opacity: 0; transform: scale(0.4) rotate(-25deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
.completion-seal svg { color: var(--gold); }

.comp-title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 6px;
  animation: fadeUp 0.5s 0.15s var(--spring-smooth) both;
}
.comp-sub {
  font-size: 14px;
  color: var(--ink-muted);
  max-width: 280px;
  line-height: 1.5;
  animation: fadeUp 0.5s 0.25s var(--spring-smooth) both;
}

.comp-stats {
  display: flex;
  gap: 24px;
  margin-top: 28px;
  animation: fadeUp 0.5s 0.35s var(--spring-smooth) both;
}
.comp-stat { text-align: center; }
.comp-stat-val { font-family: var(--serif); font-size: 30px; font-weight: 300; }
.comp-stat-lbl { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }

.srs-preview {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: fadeUp 0.5s 0.45s var(--spring-smooth) both;
}
.srs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); transition: background 0.3s; }
.srs-dot.next { background: var(--gold); box-shadow: 0 0 6px var(--gold-glow); }
.srs-line { width: 18px; height: 1px; background: var(--ink-faint); }
.srs-label { font-size: 11px; color: var(--ink-muted); margin-left: 6px; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Weak Words ── */
.weak-words-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--glass-border);
}
.weak-words-label {
  font-family: 'Cormorant SC', serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.weak-words-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.weak-word-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  color: var(--ink);
}
.weak-count {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: var(--ink-muted);
  opacity: 0.7;
}

/* ── Weak Words Drill ── */
.drill-label {
  font-family: 'Cormorant SC', serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  opacity: 0.8;
}
.drill-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.drill-progress-bar {
  flex: 1;
  height: 3px;
  background: var(--glass-border);
  border-radius: 2px;
  overflow: hidden;
}
.drill-progress-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.35s ease;
}
.drill-counter {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: var(--ink-muted);
  flex-shrink: 0;
}
.context-dim {
  opacity: 0.45;
}
.drill-target-line .poem-word:not(.blanked) {
  opacity: 0.7;
}

/* ── Gold shimmer on completion ── */
.shimmer-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  background: radial-gradient(circle at 50% 40%, rgba(196, 163, 90, 0.15) 0%, transparent 60%);
  animation: shimmerPulse 1.2s ease-out both;
}
@keyframes shimmerPulse {
  0% { opacity: 0; transform: scale(0.3); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: scale(2.5); }
}

/* Score flash */
.score-flash {
  position: fixed;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 300;
  pointer-events: none;
  z-index: 100;
  animation: scoreFlash 0.75s var(--spring-smooth) both;
}
.score-flash.correct {
  color: var(--green);
  text-shadow: 0 0 12px var(--green-glow), 0 0 32px rgba(74,124,89,0.20);
}
.score-flash.wrong {
  color: var(--red);
  text-shadow: 0 0 12px var(--red-glow), 0 0 32px rgba(139,58,58,0.18);
}
@keyframes scoreFlash {
  0%   { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.8); }
  28%  { opacity: 1; transform: translateX(-50%) translateY(-2px) scale(1.08); }
  55%  { transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-16px); }
}

/* ═══════════════════════════════════════════
   RESPONSIVE & KEYBOARD — iOS visual viewport fix
   ═══════════════════════════════════════════ */
@media (max-width: 390px) {
  .poem-text { font-size: 18px; }
  .home-greeting h1 { font-size: 24px; }
  .app-pad { padding-left: calc(18px + var(--sal)); padding-right: calc(18px + var(--sar)); }
}

/* When keyboard is up — minimal adjustments, no scroll fighting */
.keyboard-up .tab-bar { display: none; }
.keyboard-up .poem-view-header { padding: 4px 0; }
.keyboard-up .progress-strip { padding-bottom: 2px; }
.keyboard-up .chunk-indicator { padding-top: 0; padding-bottom: 0; }

/* Immersive overlay keyboard adjustments — JS pins top/height to visual viewport */
.keyboard-up .chunk-focus { padding-bottom: 6px; }
/* Collapse context entirely */
.keyboard-up .chunk-context { max-height: 0; overflow: hidden; padding: 0; margin: 0; }
/* Poem lines: shrink font when keyboard is open */
.keyboard-up .chunk-lines {
  font-size: 18px;
  line-height: 1.75;
  padding: 8px 8px max(8px, var(--kb-height, 8px));
}
.keyboard-up .chunk-input { padding-bottom: 2px; padding-top: 4px; }
.keyboard-up .immersive-header { padding-top: 2px; padding-bottom: 2px; }
.keyboard-up .peek-pill { padding: 4px 10px; font-size: 11px; }
.keyboard-up .skip-btn { padding: 3px 12px; }
.keyboard-up .choice-pills { gap: 6px; }
.keyboard-up .choice-pill { padding: 9px 14px; font-size: 14px; }

/* ── Mobile: compact poem type, more horizontal room, centred in available space ── */
@media (max-width: 430px) {
  /* Keep centre alignment — poem floats in middle of available space */
  .chunk-lines {
    font-size: 19px;
    line-height: 1.55;
    padding: 8px 4px 12px;
  }
  /* Narrower side padding so long lines have more room before wrapping */
  .chunk-focus {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* Slightly smaller pills on mobile */
  .choice-pill {
    padding: 11px 20px;
    font-size: 16px;
  }
  .choice-pills {
    padding: 8px 0 2px;
    gap: 8px;
  }
  /* Context lines smaller on mobile */
  .chunk-context .poem-line {
    font-size: 14px;
    line-height: 1.5;
  }
}

/* Wrong answer correction label — inline after the word */
.correction {
  display: block;
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 500;
  color: var(--green);
  opacity: 0;
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  white-space: nowrap;
  animation: correctionIn 0.3s 0.15s var(--spring-smooth) forwards, correctionOut 0.3s 2s ease both;
  pointer-events: none;
  z-index: 5;
}
@keyframes correctionIn {
  from { opacity: 0; }
  to { opacity: 0.7; }
}
@keyframes correctionOut {
  from { opacity: 0.7; }
  to { opacity: 0; }
}

/* Resume card — glass material */
.resume-card {
  margin-top: 10px;
  padding: 16px 20px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-inner-glow), var(--glass-shadow);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s var(--spring-press);
}
.resume-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-highlight-color), transparent);
  pointer-events: none;
}
.resume-card:active { transform: scale(0.98); }
.resume-info {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.4;
}
.resume-info strong {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 3px;
}
.resume-actions { display: flex; gap: 10px; align-items: center; }
.resume-dismiss {
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 6px 10px;
  transition: opacity 0.15s;
}
.resume-dismiss:active { opacity: 0.5; }
.resume-go {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  border: none;
  background: var(--gold-glow);
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 10px;
  transition: transform 0.15s var(--spring-press);
}
.resume-go:active { transform: scale(0.95); }

/* ═══════════════════════════════════════════
   PROGRESS SCREEN
   ═══════════════════════════════════════════ */
.progress-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 32px;
}
.progress-body::-webkit-scrollbar { display: none; }

.progress-empty { text-align: center; padding: 40px 20px; color: var(--ink-muted); }
.progress-empty p { font-family: var(--serif); font-size: 17px; font-style: italic; margin-bottom: 6px; }
.progress-empty small { font-size: 13px; }

/* Memory Landscape */
.memory-poem {
  padding: 12px 0;
  border-bottom: 1px solid var(--ink-faint);
  cursor: pointer;
  transition: opacity 0.15s;
}
.memory-poem:active { opacity: 0.6; }
.memory-poem-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.memory-poem-meta { flex: 1; min-width: 0; }
.memory-poem-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.memory-poem-author { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.memory-poem-due {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 3px;
}
.memory-poem-due.overdue { color: var(--red); }
.memory-poem-due.due-today { color: var(--gold); }
.memory-poem-due.upcoming { color: var(--ink-muted); }
.memory-bar-track {
  height: 4px;
  background: var(--ink-faint);
  border-radius: 2px;
  overflow: hidden;
}
.memory-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.7s var(--spring-smooth);
}
.memory-bar-fill.mastered { background: var(--green); }
.memory-bar-fill.learning { background: var(--gold); }
.memory-bar-fill.new { background: var(--ink-muted); }

/* Practice Calendar */
.cal-months {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  gap: 2.5px;
  margin-bottom: 8px;
}
.cal-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--ink-faint);
}
.cal-cell.future { background: transparent; }
.cal-cell.lv1 { background: rgba(196, 163, 90, 0.3); }
.cal-cell.lv2 { background: rgba(196, 163, 90, 0.6); }
.cal-cell.lv3 { background: var(--gold); }
.cal-cell.today { outline: 1.5px solid var(--ink-muted); outline-offset: 1px; }
.cal-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.cal-legend .cal-cell { width: 10px; height: 10px; aspect-ratio: unset; flex-shrink: 0; }

/* Milestones */
.milestone-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-faint);
}
.milestone-card.locked { opacity: 0.35; }
.milestone-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--gold-glow);
  color: var(--gold);
}
.milestone-card.locked .milestone-icon { background: var(--ink-faint); color: var(--ink-muted); }
.milestone-text { flex: 1; min-width: 0; }
.milestone-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
}
.milestone-date { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }

/* ── Bookmark Shelf (Phase C) ── */
#bookmark-shelf { flex-shrink: 0; }
.bookmark-scroll {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: visible;
  padding: 4px 20px 24px;
  gap: 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.bookmark-scroll::-webkit-scrollbar { display: none; }
.bookmark-card {
  --era: #C4A35A;
  flex-shrink: 0;
  width: 138px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-inner-glow), var(--glass-shadow);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.bookmark-card:active {
  transform: scale(0.93);
}
.bookmark-era-stripe {
  height: 4px;
  background: var(--era);
  flex-shrink: 0;
}
.bookmark-portrait-mono {
  width: 100%;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-faint);
  overflow: hidden;
  flex-shrink: 0;
}
.bookmark-portrait-mono img {
  width: 100%;
  height: 88px;
  object-fit: cover;
  display: block;
}
.bookmark-body {
  padding: 9px 10px 10px;
}
.bookmark-title {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bookmark-author {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bookmark-bar-wrap {
  height: 3px;
  background: var(--ink-faint);
  border-radius: 2px;
  overflow: hidden;
}
.bookmark-bar {
  height: 100%;
  border-radius: 2px;
  background: var(--era);
  transition: width 0.4s ease;
}

/* Library retry button */
.retry-btn {
  color: var(--gold);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Settings Panel ── */
.settings-btn {
  background: none;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 6px;
  margin-left: 2px;
  transition: color 0.2s ease;
}
.settings-btn:active { color: var(--gold); }
.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.settings-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.settings-sheet {
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  border-radius: 22px 22px 0 0;
  padding: 0;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--glass-border);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.12);
}
.settings-overlay.open .settings-sheet {
  transform: translateY(0);
}
.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 12px;
  border-bottom: 0.5px solid var(--border, rgba(0,0,0,0.06));
}
.settings-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
}
.settings-close {
  background: none;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 6px;
}
.settings-close:active { color: var(--ink); }
.settings-body {
  padding: 8px 22px 32px;
}
.setting-row {
  padding: 16px 0;
  border-bottom: 0.5px solid var(--border, rgba(0,0,0,0.06));
}
.setting-row:last-child { border-bottom: none; }
.setting-info { margin-bottom: 10px; }
.setting-label {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.setting-desc {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* Toggle switch */
.setting-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  float: right;
  margin-top: -28px;
}
.toggle-track {
  display: block;
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: var(--ink-faint);
  position: relative;
  transition: background 0.25s ease;
}
.setting-toggle.on .toggle-track {
  background: var(--gold);
}
.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.setting-toggle.on .toggle-thumb {
  transform: translateX(18px);
}

/* Pill selectors */
.setting-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.setting-pill {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}
.setting-pill:active { transform: scale(0.95); }
.setting-pill.active {
  background: var(--gold);
  color: white;
  border-color: var(--gold);
}

/* Font size classes applied to poem text */
.font-small .poem-text,
.font-small .chunk-lines { font-size: 17px; line-height: 1.8; }
.font-large .poem-text,
.font-large .chunk-lines { font-size: 24px; line-height: 2.0; }

/* ═══════════════════════════════════════════
   CELESTIAL TAB
   ═══════════════════════════════════════════ */
#screen-celestial {
  position: relative;
  color: #E8E4DC;
}

/* Cosmic background — always dark */
.celestial-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, #1a1033 0%, #0d0b1a 40%, #0a0f1c 100%);
  z-index: 0;
}
.celestial-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 15% 25%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 85% 15%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 45% 65%, rgba(255,255,255,0.25), transparent),
    radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 25% 90%, rgba(255,255,255,0.2), transparent),
    radial-gradient(1px 1px at 92% 50%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 5% 55%, rgba(255,255,255,0.15), transparent),
    radial-gradient(1px 1px at 60% 10%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 35% 40%, rgba(255,255,255,0.2), transparent),
    radial-gradient(1px 1px at 78% 35%, rgba(255,255,255,0.25), transparent),
    radial-gradient(1.5px 1.5px at 50% 50%, rgba(155,139,255,0.3), transparent),
    radial-gradient(1px 1px at 10% 75%, rgba(255,255,255,0.2), transparent),
    radial-gradient(1px 1px at 88% 88%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 42% 92%, rgba(255,255,255,0.15), transparent),
    radial-gradient(1px 1px at 65% 45%, rgba(255,255,255,0.2), transparent);
  animation: starTwinkle 8s ease-in-out infinite alternate;
}
.celestial-bg::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 60%;
  background: radial-gradient(ellipse at center, rgba(123,104,238,0.06) 0%, transparent 70%);
  pointer-events: none;
}
@keyframes starTwinkle { from { opacity: 0.6; } to { opacity: 1; } }

.celestial-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 1;
  padding-bottom: 16px;
}
.celestial-scroll::-webkit-scrollbar { display: none; }

/* Onboard header */
.celestial-header {
  text-align: center;
  padding: 40px 0 24px;
}
.celestial-orb {
  margin: 0 auto 20px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: orbPulse 4s ease-in-out infinite;
}
@keyframes orbPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.06); opacity: 1; }
}
.celestial-title {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 10px;
  animation: fadeUp 0.6s var(--spring-smooth) both;
}
.celestial-title em {
  color: #9B8BFF;
  font-style: italic;
}
.celestial-sub {
  font-family: var(--sans);
  font-size: 14px;
  color: #8B87A0;
  line-height: 1.5;
  animation: fadeUp 0.6s 0.1s var(--spring-smooth) both;
}

/* Form */
.celestial-form.glass {
  --glass-bg: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.1);
  --glass-blur: blur(40px) saturate(1.6);
  --glass-inner-glow: inset 0 0.5px 0 rgba(255,255,255,0.08);
  --glass-shadow: 0 4px 24px rgba(0,0,0,0.3);
  border-radius: 22px;
  padding: 24px;
  animation: fadeUp 0.6s 0.2s var(--spring-smooth) both;
}
.celestial-field {
  margin-bottom: 20px;
  position: relative;
}
.celestial-label {
  display: block;
  font-family: var(--serif-sc);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #8B87A0;
  margin-bottom: 8px;
}
.celestial-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  color: #E8E4DC;
  font-family: var(--serif);
  font-size: 17px;
  padding: 8px 0;
  outline: none;
  transition: border-color 0.2s ease;
}
.celestial-input:focus {
  border-bottom-color: #9B8BFF;
}
.celestial-input::placeholder {
  color: rgba(255,255,255,0.25);
}
/* Fix date/time input color on webkit */
.celestial-input::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
}
.celestial-hint {
  font-family: var(--sans);
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  margin-top: 4px;
}
.celestial-calc-btn {
  width: 100%;
  padding: 16px;
  margin-top: 8px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #7B68EE, #6355D0);
  color: white;
  font-family: var(--serif-sc);
  font-size: 15px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.15s var(--spring-press), box-shadow 0.15s ease;
}
.celestial-calc-btn:active {
  transform: scale(0.97);
}

/* City results dropdown */
.city-results {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  max-height: 200px;
  overflow-y: auto;
  background: rgba(20,18,35,0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  z-index: 10;
  display: none;
}
.city-results.open { display: block; }
.city-result {
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 14px;
  color: #E8E4DC;
  cursor: pointer;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
}
.city-result:last-child { border-bottom: none; }
.city-result:active { background: rgba(155,139,255,0.15); }
.city-result-country {
  color: #8B87A0;
  font-size: 12px;
  margin-left: 6px;
}

/* Chart header */
.celestial-chart-header {
  text-align: center;
  padding: 32px 0 20px;
}
.celestial-sigil {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 12px;
  animation: orbPulse 4s ease-in-out infinite;
}
.celestial-sign-name {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 4px;
  animation: fadeUp 0.5s 0.1s var(--spring-smooth) both;
}
.celestial-sign-sub {
  font-family: var(--sans);
  font-size: 13px;
  color: #8B87A0;
  animation: fadeUp 0.5s 0.2s var(--spring-smooth) both;
}

/* Triad cards */
.celestial-triad {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
  animation: fadeUp 0.5s 0.3s var(--spring-smooth) both;
}
.triad-item.glass {
  --glass-bg: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.1);
  --glass-blur: blur(40px) saturate(1.6);
  --glass-inner-glow: inset 0 0.5px 0 rgba(255,255,255,0.08);
  --glass-shadow: 0 2px 12px rgba(0,0,0,0.2);
  flex: 1;
  text-align: center;
  padding: 20px 8px;
  border-radius: 18px;
}
.triad-glyph {
  font-size: 28px;
  margin-bottom: 8px;
}
#triad-sun .triad-glyph { color: #FFD700; }
#triad-moon .triad-glyph { color: #C0C0D0; }
#triad-rising .triad-glyph { color: #9B8BFF; }
.triad-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8B87A0;
  margin-bottom: 4px;
}
.triad-sign {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  color: #E8E4DC;
}

/* Section label override */
.celestial-section-label {
  font-family: var(--serif-sc);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #8B87A0;
  margin-bottom: 14px;
}

/* Poem cards */
.celestial-poem-card.glass {
  --glass-bg: rgba(255,255,255,0.05);
  --glass-border: rgba(255,255,255,0.08);
  --glass-blur: blur(30px) saturate(1.4);
  --glass-inner-glow: inset 0 0.5px 0 rgba(255,255,255,0.06);
  --glass-shadow: 0 2px 12px rgba(0,0,0,0.15);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 12px;
  cursor: pointer;
  animation: celestialCardIn 0.4s var(--spring-smooth) both;
}
.celestial-poem-card:nth-child(1) { animation-delay: 0s; }
.celestial-poem-card:nth-child(2) { animation-delay: 0.06s; }
.celestial-poem-card:nth-child(3) { animation-delay: 0.12s; }
.celestial-poem-card:nth-child(4) { animation-delay: 0.18s; }
.celestial-poem-card:nth-child(5) { animation-delay: 0.24s; }
.celestial-poem-card:nth-child(6) { animation-delay: 0.3s; }
@keyframes celestialCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.celestial-poem-card:active { transform: scale(0.98); }
.celestial-poem-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  color: #E8E4DC;
  margin-bottom: 4px;
}
.celestial-poem-author {
  font-family: var(--sans);
  font-size: 12px;
  color: #8B87A0;
}
.celestial-poem-reason {
  font-family: var(--sans);
  font-size: 11px;
  color: #9B8BFF;
  font-style: italic;
  margin-top: 6px;
}

/* Reset button */
.celestial-reset {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  background: transparent;
  color: #8B87A0;
  font-family: var(--sans);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.celestial-reset:active { border-color: #9B8BFF; }

/* Empty state */
.celestial-empty {
  text-align: center;
  padding: 32px 16px;
  font-family: var(--sans);
  font-size: 14px;
  color: #8B87A0;
}

/* Loading state on poem card */
.celestial-poem-card.loading {
  opacity: 0.7;
  pointer-events: none;
}
.celestial-loading-bar {
  height: 2px;
  margin-top: 10px;
  border-radius: 1px;
  background: rgba(123,104,238,0.3);
  overflow: hidden;
  position: relative;
}
.celestial-loading-bar::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 40%;
  background: #7B68EE;
  border-radius: 1px;
  animation: celestialLoad 1s ease-in-out infinite;
}
@keyframes celestialLoad {
  0% { left: -40%; }
  100% { left: 100%; }
}

/* Toast */
.celestial-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: rgba(30,25,50,0.92);
  backdrop-filter: blur(20px);
  color: #E8E4DC;
  font-family: var(--sans);
  font-size: 13px;
  padding: 10px 20px;
  border-radius: 20px;
  border: 0.5px solid rgba(255,255,255,0.1);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 100;
  pointer-events: none;
}
.celestial-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════
   DESKTOP & TABLET — responsive layout
   Sidebar nav replaces bottom tab bar.
   Content expands to fill available width.
   ═══════════════════════════════════════════ */

/* ── Sidebar width token ── */
:root { --sidebar-w: 216px; }

@media (min-width: 900px) {

  /* ─── Ambient background — beautiful on wide screens ─── */
  body {
    background-image:
      radial-gradient(ellipse 55% 65% at 18% 35%, var(--ambient-1), transparent 65%),
      radial-gradient(ellipse 45% 55% at 82% 68%, var(--ambient-2), transparent 65%),
      radial-gradient(ellipse 35% 45% at 55% 8%,  var(--ambient-3), transparent 75%);
  }

  /* ─── Tab bar → fixed left sidebar ─── */
  .tab-bar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0 10px 32px;
    border-top: none;
    border-right: 0.5px solid var(--tab-border);
    border-radius: 0;
    gap: 2px;
    /* Always visible — except during immersive practice */
    display: flex !important;
    z-index: 20;
  }
  /* Hide sidebar completely during immersive practice overlay */
  body.immersive-active .tab-bar { display: none !important; }

  /* Sidebar logo — "VERSED" wordmark at top */
  .tab-bar::before {
    content: 'Versed';
    display: block;
    font-family: var(--serif-sc);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--gold);
    padding: 32px 16px 28px;
    flex-shrink: 0;
  }

  /* Tab buttons — icon left of label, full-width rows */
  .tab-btn {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    padding: 12px 16px;
    gap: 13px;
    border-radius: 12px;
    min-height: 0;
    width: 100%;
    text-align: left;
  }
  .tab-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
  .tab-btn span { font-size: 14px; letter-spacing: 0.01em; }
  .tab-btn.active {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  .tab-btn.active svg { transform: none; }

  /* ─── Main app area — shift right of sidebar ─── */
  #app {
    margin-left: var(--sidebar-w);
    max-width: none;
    width: calc(100% - var(--sidebar-w));
  }

  /* Content areas — comfortable reading max-width, centred */
  .app-pad {
    padding-left: 52px;
    padding-right: 52px;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    width: 100%;
  }

  /* Progress body & lib results also need max-width */
  .progress-body,
  .lib-results,
  .poem-list-wrap {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 52px;
    padding-right: 52px;
    box-sizing: border-box;
    width: 100%;
  }

  /* Slightly larger type for comfortable desktop reading */
  .poem-text { font-size: 22px; line-height: 2.0; }
  .chunk-lines { font-size: 22px; line-height: 2.0; }
  .home-greeting h1 { font-size: 36px; }

  /* Hide the in-header logo on desktop — sidebar ::before handles branding */
  .app-header .app-logo { display: none; }

  /* ─── Home screen — wider hero + collection grid ─── */

  /* Hero card: art taller on desktop */
  .hero-art { height: 240px; }

  /* Discovery collections: grid instead of horizontal scroll */
  .discover-scroll {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    overflow: visible !important;
    padding: 0 !important;
    /* No scroll snap on desktop */
    scroll-snap-type: none;
  }
  .discover-card {
    width: auto !important;
    flex-shrink: unset !important;
    /* Entry animation stagger stays — just resets direction */
    animation-name: cardFadeIn;
  }
  @keyframes cardFadeIn {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
  }
  .discover-card-art { height: 100px; }

  /* Collection expand area spans full grid width */
  #collection-expand { width: 100%; }

  /* Bookmark shelf — align with padded content columns */
  #bookmark-shelf {
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
  }
  /* Bookmark shelf cards — slightly larger */
  .bookmark-card { width: 150px; }

  /* ─── Practice overlay stays fullscreen for immersion ─── */
  /* .chunk-focus inset:0 is intentional — covers sidebar for full focus */

  /* Wider chunk-center on desktop */
  .chunk-center { max-width: 640px; }
  .chunk-input  { max-width: 640px; }

  /* Phase results card: wider */
  .phase-result-card { max-width: 540px; margin: 0 auto; }

  /* ─── Poem view — comfortable reading column ─── */
  .poem-scroll { max-width: 820px; margin: 0 auto; }

  /* ─── Completion screen ─── */
  .completion-content { max-width: 580px; margin: 0 auto; }
}

/* ── Mid-tablet (640–899px) — just widen a little ── */
@media (min-width: 640px) and (max-width: 899px) {
  #app {
    max-width: 680px;
  }
  .app-pad {
    padding-left: 36px;
    padding-right: 36px;
  }
}