:root {
  --reader-bg-1: #0a0f1d;
  --reader-bg-2: #111a30;
  --reader-panel: rgba(22, 31, 56, 0.88);
  --reader-panel-strong: rgba(30, 42, 74, 0.96);
  --reader-line: rgba(255, 255, 255, 0.08);
  --reader-soft: #9eafd2;
  --reader-accent: #df691a;
  --reader-greek: #f3f6ff;
  --reader-focus: rgba(255, 176, 122, 0.45);
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(223, 105, 26, 0.14), transparent 23%),
    radial-gradient(circle at top right, rgba(100, 128, 197, 0.18), transparent 28%),
    linear-gradient(180deg, var(--reader-bg-2) 0%, var(--reader-bg-1) 100%);
  color: #f4f7ff;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent);
}

.reader-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 1480px);
  max-width: 1480px;
}

.hg-offline-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  text-align: center;
  padding: 0.45rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  background: #b54b3a;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.hg-shortcut-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(5, 7, 20, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.hg-shortcut-card {
  background: #1c2342;
  color: #fff;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  overflow: auto;
  padding: 1.25rem 1.5rem;
}
.hg-shortcut-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.hg-shortcut-close {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}
.hg-shortcut-group + .hg-shortcut-group {
  margin-top: 1rem;
}
.hg-shortcut-group-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 0.5rem;
}
.hg-shortcut-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
}
.hg-shortcut-list dt {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  margin: 0;
}
.hg-shortcut-list dd {
  margin: 0;
  font-size: 0.92rem;
  opacity: 0.92;
}
.hg-shortcut-list kbd,
.hg-shortcut-hint kbd {
  font-family: inherit;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  font-size: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.hg-shortcut-hint {
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: 0.82rem;
  opacity: 0.65;
  text-align: center;
}

.site-footer {
  margin-top: 2.5rem;
  padding: 2rem 0 1rem;
  border-top: 1px solid var(--reader-line);
  color: var(--reader-soft);
  font-size: 0.85rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer-col-brand {
  gap: 0.6rem;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #f8fbff;
  font-weight: 800;
  font-size: 1.05rem;
}

.footer-sigil {
  width: 1.8rem;
  height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.45rem;
  background: var(--reader-accent);
  color: #121827;
  font-family: Georgia, serif;
  font-size: 1.15rem;
}

.footer-tagline {
  margin: 0;
  max-width: 24rem;
  line-height: 1.5;
}

.footer-heading {
  margin: 0 0 0.2rem;
  color: #f8fbff;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.footer-col a {
  color: var(--reader-soft);
  text-decoration: none;
  line-height: 1.6;
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: #ffffff;
  text-decoration: underline;
}

.footer-base {
  max-width: 1100px;
  margin: 1.75rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--reader-line);
  text-align: center;
}

@media (max-width: 720px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-col-brand {
    grid-column: 1 / -1;
  }
}

/* ── SEO landing / hub pages ── */
.landing {
  max-width: 920px;
  margin: 0 auto;
}

.landing-hero {
  text-align: center;
  padding: 1.5rem 0 2rem;
}

.landing-eyebrow {
  display: inline-block;
  margin-bottom: 0.75rem;
  color: var(--reader-accent);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.landing-hero h1 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
}

.landing-lede {
  max-width: 44rem;
  margin: 0 auto 1.5rem;
  color: var(--reader-soft);
  font-size: 1.15rem;
  line-height: 1.6;
}

.landing-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}

.landing-section {
  margin: 2.5rem 0;
}

.landing-section h2 {
  margin: 0 0 0.75rem;
  font-size: 1.6rem;
  font-weight: 800;
  color: #f8fbff;
}

.landing-section p {
  color: var(--reader-soft);
  font-size: 1.02rem;
  line-height: 1.7;
}

.landing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.landing-feature {
  padding: 1.25rem;
  border: 1px solid var(--reader-line);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
}

.landing-feature h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #f8fbff;
}

.landing-feature p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
}

.landing-faq {
  margin: 1rem 0 0;
}

.landing-faq-item {
  padding: 1rem 0;
  border-top: 1px solid var(--reader-line);
}

.landing-faq-item h3 {
  margin: 0 0 0.4rem;
  font-size: 1.08rem;
  font-weight: 700;
  color: #f8fbff;
}

.landing-faq-item p {
  margin: 0;
  color: var(--reader-soft);
  line-height: 1.65;
}

.landing-related {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.landing-related a {
  display: inline-flex;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--reader-line);
  border-radius: 999px;
  background: rgba(223, 105, 26, 0.1);
  color: #f4f7ff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
}

.landing-related a:hover,
.landing-related a:focus-visible {
  background: rgba(223, 105, 26, 0.22);
  color: #ffffff;
}

/* Skip-to-content link — off-screen until focused (keyboard users) */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 2000;
  padding: 0.5rem 0.9rem;
  border-radius: 0 0 0.5rem 0.5rem;
  background: var(--reader-accent, #df691a);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.app-nav {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: nowrap;
}

.brand-mark {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  color: #f8fbff;
  text-decoration: none;
  font-weight: 800;
}

.brand-mark:hover {
  color: #ffffff;
}

.brand-sigil {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.55rem;
  background: #df691a;
  color: #121827;
  font-family: Georgia, serif;
  font-size: 1.45rem;
  box-shadow: 0 12px 28px rgba(223, 105, 26, 0.25);
}

.brand-text {
  font-size: 1.1rem;
  letter-spacing: 0;
}

.view-tabs {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  justify-content: center;
  gap: 0.18rem;
  max-width: 100%;
  padding: 0.25rem;
  border: 1px solid var(--reader-line);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  overflow: visible;
}

.view-tab {
  flex: 0 1 auto;
  min-width: 0;
  /* 44px minimum tap target (WCAG 2.5.5 / Apple HIG) for mobile users. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.55rem;
  padding: 0.42rem 0.75rem;
  background: transparent;
  color: var(--reader-soft);
  font-weight: 700;
  text-decoration: none;
}

.view-tab:hover,
.view-tab.active {
  background: rgba(223, 105, 26, 0.22);
  color: #ffffff;
}

/* ── Grouped nav dropdowns (Read / Practice / Reference) ── */
.nav-group {
  position: relative;
  display: inline-flex;
}

.nav-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 44px;
  border: 0;
  border-radius: 0.55rem;
  padding: 0.42rem 0.8rem;
  background: transparent;
  color: var(--reader-soft);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.nav-group-toggle:hover,
.nav-group.active .nav-group-toggle,
.nav-group-toggle[aria-expanded="true"] {
  background: rgba(223, 105, 26, 0.22);
  color: #ffffff;
}

.nav-group-caret {
  font-size: 0.7em;
  opacity: 0.75;
  transition: transform 140ms ease;
}

.nav-group-toggle[aria-expanded="true"] .nav-group-caret {
  transform: rotate(180deg);
}

.nav-group-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 200;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  background: #1e2a3a;
  border: 1px solid var(--reader-line);
  border-radius: 0.6rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.nav-group-menu[hidden] {
  display: none;
}

.nav-group-link {
  display: block;
  padding: 0.6rem 1rem;
  color: #f4f7ff;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 120ms;
}

.nav-group-link:hover,
.nav-group-link:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  outline: none;
}

.nav-group-link.active {
  background: rgba(223, 105, 26, 0.22);
  color: #ffffff;
}

.nav-group-overview {
  border-bottom: 1px solid var(--reader-line);
  color: var(--reader-accent);
  font-weight: 700;
}

.nav-group-toggle:focus-visible {
  outline: 2px solid var(--reader-focus);
  outline-offset: 2px;
}

.profile-strip {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 0;
}

.login-dropdown-toggle {
  white-space: nowrap;
}

.login-form {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 200;
  background: #1a2236;
  border: 1px solid var(--reader-line);
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
  min-width: 18rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.login-form[hidden] {
  display: none;
}

.profile-chip {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
}

#login-username {
  width: 100%;
}

.password-field {
  display: grid;
  gap: 0.25rem;
  width: 100%;
}

.password-strength-meter {
  height: 0.28rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.password-strength-meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #8d99ae;
  transition: width 150ms ease, background-color 150ms ease;
}

.password-field.password-strength-weak .password-strength-meter span {
  width: 25%;
  background: #dc3545;
}

.password-field.password-strength-fair .password-strength-meter span {
  width: 50%;
  background: #df691a;
}

.password-field.password-strength-good .password-strength-meter span {
  width: 75%;
  background: #8fb3ff;
}

.password-field.password-strength-strong .password-strength-meter span {
  width: 100%;
  background: #39d98a;
}

.password-help-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  justify-content: space-between;
  color: var(--reader-soft);
  font-size: 0.68rem;
  line-height: 1.2;
}

#password-strength-label {
  color: #d7e1fb;
  font-weight: 700;
}

.login-form .password-help-row {
  display: none;
}

.forgot-password-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--reader-soft);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}

.forgot-password-link:hover {
  color: #ffffff;
}

.auth-actions {
  display: inline-flex;
  gap: 0.4rem;
  flex: 0 0 auto;
}

.auth-actions .btn {
  min-height: 2.15rem;
}

.login-error-inline {
  font-size: 0.8rem;
  color: #f08080;
  margin-top: 0.4rem;
  line-height: 1.4;
}

.login-error-link {
  color: #ffb07a;
  font-weight: 700;
  text-decoration: underline;
}

.discount-code-input {
  flex: 0 1 10.5rem;
  min-width: 9rem;
  text-transform: uppercase;
}

.signup-hint {
  color: var(--reader-soft);
  font-size: 0.78rem;
  white-space: nowrap;
}

.profile-chip {
  color: #f4f7ff;
  font-weight: 700;
  padding: 0.35rem 0.45rem 0.35rem 0.8rem;
  border: 1px solid var(--reader-line);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.04);
}

.flashcard-account-panel {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

.billing-panel {
  display: grid;
  gap: 0.55rem;
  justify-items: end;
  max-width: 28rem;
  padding: 0.75rem;
  border: 1px solid rgba(143, 179, 255, 0.2);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  text-align: right;
}

.billing-label {
  display: block;
  color: var(--reader-soft);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

#billing-status {
  color: #f4f7ff;
  font-weight: 800;
}

.billing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.billing-actions .btn,
.discount-code-form .btn {
  min-height: 2.15rem;
}

.discount-code-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
  width: 100%;
}

.billing-note {
  color: var(--reader-soft);
  font-size: 0.78rem;
}

.reader-topbar,
.reader-pane,
.info-pane,
.flashcards-view {
  background: var(--reader-panel);
  backdrop-filter: blur(10px);
  border: 1px solid var(--reader-line) !important;
  border-radius: 1.35rem;
}

.eyebrow {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bs-info);
  font-weight: 700;
}

.reader-copy,
.pane-copy,
.status-line,
.form-check-label {
  color: var(--reader-soft);
}

.reader-intro {
  max-width: 43rem;
}

.reader-headline {
  color: #ffffff;
  letter-spacing: 0;
}

.offer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  align-items: center;
}

.offer-cta {
  font-weight: 700;
}

.offer-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.86rem;
  line-height: 1.3;
}

.offer-price {
  color: #ffd9bf;
  font-weight: 650;
}

.offer-trust {
  color: var(--reader-soft);
}

/* Feature list — informational, deliberately NOT styled as buttons/pills. */
.feature-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  align-items: center;
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

.feature-strip li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: #dfe7ff;
}

.feature-strip li::before {
  content: "✓";
  color: #9cf0c9;
  font-weight: 700;
}

.controls-panel {
  min-width: min(100%, 42rem);
}

/* Reader pane header: title + verse-jump on one row */
.pane-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.pane-header-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.text-size-control {
  display: inline-flex;
  gap: 0.25rem;
}

.verse-jump-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.verse-jump-form .form-control {
  width: 6.5rem;
}

/* Friendly, recoverable reader error state */
.reader-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.5rem 0.25rem;
}

.reader-error-msg {
  margin: 0;
  color: var(--reader-soft);
  font-size: 1.02rem;
}

.reader-lock-detail {
  margin: 0;
  color: var(--reader-soft);
  font-size: 0.95rem;
  max-width: 46ch;
}

.reader-lock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.25rem;
}

/* Brief highlight when jumping to a verse */
.verse-card-highlight {
  animation: verseJumpFlash 1.6s ease-out;
}

@keyframes verseJumpFlash {
  0%   { background: rgba(223, 105, 26, 0.22); }
  100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .verse-card-highlight { animation: none; }
}

.english-toggle {
  padding-top: 1.9rem;
  min-width: 12rem;
}

.reader-inline-toggles .english-toggle {
  padding-top: 0;
}

.reader-inline-toggles {
  column-gap: 1rem;
  row-gap: 0.7rem;
}

.reader-inline-toggles .form-check {
  margin-bottom: 0;
}

.reader-inline-toggles .english-toggle,
.reader-inline-toggles .gloss-toggle-control {
  flex: 0 0 auto;
  min-width: auto;
  padding-top: 0;
}

.status-line {
  min-height: 1.4rem;
  font-size: 0.95rem;
}

.form-control:focus,
.form-select:focus,
.btn:focus-visible,
.view-tab:focus-visible,
.brand-mark:focus-visible {
  border-color: var(--reader-focus);
  box-shadow: 0 0 0 0.2rem rgba(223, 105, 26, 0.18);
  outline: none;
}

.btn:disabled,
.btn[disabled] {
  opacity: 1;
  color: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.06);
  cursor: not-allowed;
}

.audio-toolbar {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.8rem 0.9rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--reader-line);
}

.audio-toolbar .btn {
  min-height: 2.15rem;
}

.audio-loop-mode,
.audio-loop-range,
.audio-speed {
  min-height: 2.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.audio-loop-mode .form-select {
  width: 7.5rem;
}

.audio-speed .form-select {
  width: 5.5rem;
}

.audio-loop-range .form-control {
  width: 4.4rem;
  text-align: center;
}

.audio-status {
  color: var(--reader-soft);
  font-size: 0.92rem;
  min-height: 1.4rem;
  flex: 1 1 16rem;
}

.floating-player {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1050;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 1rem 0.55rem 1.25rem;
  background: var(--reader-card);
  border: 1px solid var(--reader-line);
  border-radius: 2rem;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  max-width: calc(100vw - 2rem);
}

.floating-player[hidden] {
  display: none;
}

body.floating-player-visible {
  padding-bottom: 5.5rem;
}

.floating-player-ref {
  color: var(--reader-soft);
  font-size: 0.9rem;
}

.flashcard-body {
  padding: 1.1rem;
}

.flashcard-page-grid {
  display: grid;
  gap: 1rem;
  align-items: start;
}

.flashcard-column {
  display: contents;
}

.flashcard-widget-menu {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  align-items: center;
  padding: 0.45rem;
  border: 1px solid var(--reader-line);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.flashcard-widget-tab {
  min-height: 2.35rem;
  flex: 0 0 auto;
  min-width: 8.5rem;
  border: 0;
  border-radius: 0.65rem;
  padding: 0.45rem 0.7rem;
  background: transparent;
  color: var(--reader-soft);
  font-weight: 800;
  text-align: center;
  scroll-snap-align: start;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.flashcard-widget-tab:hover,
.flashcard-widget-tab:focus-visible,
.flashcard-widget-tab.active {
  background: rgba(223, 105, 26, 0.22);
  color: #ffffff;
  outline: none;
}

.flashcard-widget-tab:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(223, 105, 26, 0.18);
}

.flashcards-view[hidden] {
  display: none;
}

.flashcard-subtab-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  padding: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 0.85rem;
}

.flashcard-subtab-menu[hidden] {
  display: none;
}

.flashcard-subtab {
  flex: 1 1 auto;
  min-width: 7rem;
  border: 0;
  border-radius: 0.55rem;
  padding: 0.4rem 0.7rem;
  background: transparent;
  color: var(--reader-soft);
  font-weight: 700;
  font-size: 0.92rem;
  text-align: center;
  transition: background-color 140ms ease, color 140ms ease;
}

.flashcard-subtab:hover,
.flashcard-subtab:focus-visible,
.flashcard-subtab.active {
  background: rgba(143, 179, 255, 0.18);
  color: #ffffff;
  outline: none;
}

.flashcard-subtab:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(143, 179, 255, 0.18);
}

.morpheme-body {
  display: grid;
  gap: 0.85rem;
}

.morpheme-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--reader-line);
  border-radius: 0.65rem;
  padding: 0.2rem;
  background: rgba(255, 255, 255, 0.04);
  gap: 0.2rem;
  width: fit-content;
}

.morpheme-mode-btn {
  border: 0;
  background: transparent;
  color: var(--reader-soft);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.35rem 0.85rem;
  border-radius: 0.5rem;
  transition: background-color 140ms ease, color 140ms ease;
}

.morpheme-mode-btn:hover,
.morpheme-mode-btn:focus-visible,
.morpheme-mode-btn.active {
  background: rgba(223, 105, 26, 0.22);
  color: #ffffff;
  outline: none;
}

.morpheme-mode-hint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--reader-soft);
}

.morpheme-deck-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

@media (max-width: 767.98px) {
  .morpheme-deck-list {
    grid-template-columns: 1fr;
  }
}

.morpheme-deck-card {
  min-height: 9rem;
}

.morpheme-section-header {
  grid-column: 1 / -1;
  margin: 0.25rem 0 -0.15rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--reader-soft);
  font-weight: 800;
}

.morpheme-deck-surface {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffd9b9;
}

.morpheme-deck-title-rest {
  color: var(--reader-soft);
  font-weight: 600;
  font-size: 0.92rem;
}

.morpheme-answer-block {
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 176, 122, 0.25);
  border-radius: 0.75rem;
  background: rgba(223, 105, 26, 0.08);
  margin-top: 0.5rem;
}

.morpheme-answer-gloss {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffe7d6;
}

.morpheme-answer-notes {
  margin: 0;
  font-size: 0.95rem;
  color: var(--reader-soft);
  line-height: 1.45;
}

.morpheme-exemplar-list {
  display: grid;
  gap: 0.35rem;
}

.morpheme-exemplar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.3rem 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.morpheme-exemplar-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.morpheme-exemplar-lemma {
  font-weight: 700;
  color: #ffd9b9;
  min-width: 7rem;
}

.morpheme-exemplar-gloss {
  color: var(--reader-soft);
  font-size: 0.92rem;
}

.study-card.study-card-morpheme .form-meaning-panel,
.study-card.study-card-morpheme .answer-grid,
.study-card.study-card-morpheme .context-line {
  display: none;
}

.grammar-profile-note {
  color: var(--reader-soft);
  font-size: 0.95rem;
  text-align: right;
}

.grammar-code-strip {
  min-width: min(100%, 28rem);
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255, 176, 122, 0.25);
  border-radius: 0.9rem;
  background: rgba(223, 105, 26, 0.1);
}

.grammar-code-strip span,
.grammar-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.85rem;
  padding: 0.25rem 0.55rem;
  border-radius: 0.45rem;
  background: rgba(143, 179, 255, 0.14);
  color: #dbe6ff;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.grammar-code-strip strong {
  display: block;
  margin-top: 0.45rem;
  color: #ffffff;
  font-size: 0.98rem;
  line-height: 1.45;
}

.grammar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  max-width: 72rem;
  margin-inline: auto;
}

.grammar-panel {
  background: var(--reader-panel);
  backdrop-filter: blur(10px);
  border: 1px solid var(--reader-line) !important;
  border-radius: 1.35rem;
}

.grammar-primer,
.grammar-wide {
  grid-column: 1 / -1;
}

.grammar-code-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.grammar-code-grid article,
.grammar-callout,
.grammar-example,
.grammar-steps > div {
  padding: 1rem;
  border: 1px solid var(--reader-line);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.035);
}

.grammar-code-grid h3 {
  margin: 0.85rem 0 0.35rem;
  color: #ffffff;
  font-size: 1rem;
}

.grammar-code-grid p,
.grammar-callout p,
.grammar-example p,
.grammar-steps p {
  margin: 0;
  color: #cbd5ef;
  line-height: 1.55;
}

.grammar-list {
  display: grid;
  gap: 0.65rem;
}

.grammar-list div {
  display: grid;
  gap: 0.25rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--reader-line);
}

.grammar-list div:last-child {
  border-bottom: 0;
}

.grammar-list strong {
  color: #ffffff;
}

.grammar-list span {
  color: #cbd5ef;
  line-height: 1.5;
}

.grammar-list.compact div {
  padding: 0.65rem 0;
}

.grammar-callout {
  margin-bottom: 0.85rem;
}

.grammar-callout p {
  margin-top: 0.65rem;
}

.grammar-example span {
  display: block;
  color: var(--reader-greek);
  font-size: clamp(1.45rem, 4vw, 2.25rem);
  line-height: 1.15;
}

.grammar-example p {
  margin-top: 0.55rem;
}

.grammar-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.grammar-steps span {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.7rem;
  border-radius: 50%;
  background: #df691a;
  color: #111827;
  font-weight: 900;
}

.grammar-topic-tabs {
  display: grid;
  gap: 0.75rem;
}

.grammar-topic {
  border: 1px solid var(--reader-line);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.grammar-topic summary {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: space-between;
  min-height: 3.65rem;
  padding: 0.9rem 1rem;
  cursor: pointer;
  list-style: none;
}

.grammar-topic summary::-webkit-details-marker {
  display: none;
}

.grammar-topic summary::after {
  content: "+";
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(143, 179, 255, 0.14);
  color: #ffffff;
  font-weight: 900;
}

.grammar-topic[open] summary {
  background: rgba(223, 105, 26, 0.1);
  border-bottom: 1px solid var(--reader-line);
}

.grammar-topic[open] summary::after {
  content: "-";
  background: rgba(223, 105, 26, 0.24);
}

.grammar-topic summary span {
  color: #ffffff;
  font-weight: 800;
}

.grammar-topic summary small {
  color: var(--reader-soft);
  font-size: 0.86rem;
  text-align: right;
}

.grammar-topic-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(16rem, 0.85fr);
  gap: 1rem;
  padding: 1rem;
}

.grammar-topic-body h3 {
  margin: 0 0 0.45rem;
  color: #ffffff;
  font-size: 1rem;
}

.grammar-topic-body p,
.grammar-topic-body li {
  color: #cbd5ef;
  line-height: 1.55;
}

.grammar-topic-body ul {
  margin: 0;
  padding-left: 1.1rem;
}

.grammar-mini-table {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem 0.75rem;
  align-content: start;
  padding: 0.85rem;
  border: 1px solid var(--reader-line);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.035);
}

.grammar-mini-table span {
  color: #dbe6ff;
  font-weight: 800;
  white-space: nowrap;
}

.grammar-mini-table p {
  margin: 0;
}

.compact-callout {
  margin: 0;
}

/* ── Grammar Quick Reference ──────────────────────────────────────────────── */
.grammar-quickref {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.grammar-quickref-group {
  display: grid;
  align-content: start;
  gap: 0.5rem;
}

.grammar-quickref-label {
  margin: 0 0 0.35rem;
  color: var(--reader-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Grammar Parse Examples ───────────────────────────────────────────────── */
.grammar-parse-section {
  display: grid;
  gap: 1.5rem;
}

.grammar-parse-example {
  border: 1px solid var(--reader-line);
  border-radius: 0.85rem;
  overflow: hidden;
}

.grammar-parse-header {
  padding: 0.85rem 1rem;
  background: rgba(223, 105, 26, 0.08);
  border-bottom: 1px solid var(--reader-line);
}

.grammar-parse-ref {
  display: inline-block;
  margin-bottom: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(223, 105, 26, 0.2);
  color: #df691a;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.grammar-parse-greek {
  margin: 0.35rem 0 0.2rem;
  color: var(--reader-greek);
  font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  line-height: 1.25;
}

.grammar-parse-english {
  margin: 0;
  color: var(--reader-soft);
  font-size: 0.92rem;
  font-style: italic;
}

.grammar-parse-words {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.75rem;
  padding: 0.85rem 1rem;
}

.grammar-parse-word {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  padding: 0.75rem;
  border: 1px solid var(--reader-line);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.03);
}

.grammar-parse-greek-word {
  color: var(--reader-greek);
  font-size: 1.35rem;
  line-height: 1.2;
}


.grammar-parse-gloss {
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
}

.grammar-parse-note {
  color: var(--reader-soft);
  font-size: 0.8rem;
  line-height: 1.45;
}

.sources-layout {
  display: grid;
  gap: 1rem;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 48rem);
  justify-content: center;
}

.contact-form {
  display: grid;
  gap: 1rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.sources-wide {
  grid-column: 1 / -1;
}

.sources-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.source-card,
.sources-resource-list article {
  display: grid;
  gap: 0.65rem;
  align-content: start;
  padding: 1rem;
  border: 1px solid var(--reader-line);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.035);
}

.source-card h3,
.sources-resource-list h3 {
  margin: 0.2rem 0 0;
  color: #ffffff;
  font-size: 1.05rem;
}

.source-card p,
.sources-resource-list p {
  margin: 0;
  color: #cbd5ef;
  line-height: 1.55;
}

.source-card a,
.sources-resource-list a {
  color: #8fb3ff;
  font-weight: 800;
  text-decoration: none;
}

.source-card a:hover,
.sources-resource-list a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.sources-resource-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.knowledge-meter {
  padding: 1rem;
  border: 1px solid var(--reader-line);
  border-radius: 0.9rem;
  background:
    linear-gradient(135deg, rgba(223, 105, 26, 0.1), transparent 42%),
    rgba(255, 255, 255, 0.035);
}

.knowledge-value {
  color: #ffffff;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1;
  font-weight: 800;
}

.knowledge-progress {
  height: 0.7rem;
  margin: 1rem 0 0.7rem;
  background: rgba(255, 255, 255, 0.08);
}

.flashcard-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.flashcard-stats > div {
  min-height: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.8rem;
  border: 1px solid var(--reader-line);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.035);
}

.flashcard-stats > div:first-child {
  background: rgba(223, 105, 26, 0.1);
  border-color: rgba(255, 176, 122, 0.25);
}

.flashcard-stats > div:last-child {
  background: rgba(224, 72, 72, 0.12);
  border-color: rgba(255, 121, 121, 0.28);
}

.stat-value {
  color: #ffffff;
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 800;
}

.stat-label {
  margin-top: 0.35rem;
  color: var(--reader-soft);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.flashcard-empty,
.study-card {
  border: 1px solid var(--reader-line);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.035);
}

.flashcard-empty {
  padding: 2.35rem 1.4rem;
  color: var(--reader-soft);
  text-align: center;
  min-height: 9rem;
  display: grid;
  place-items: center;
}

.study-card {
  padding: clamp(1rem, 3vw, 2rem);
  min-height: 21rem;
}

.study-card-reference {
  color: #ffb07a;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
}

.study-card-front {
  margin: 0.6rem 0 1.2rem;
  color: var(--reader-greek);
  font-size: clamp(2.4rem, 7vw, 5.2rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.study-card-answer {
  margin-top: 1.1rem;
}

.form-meaning-panel {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 1rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(255, 176, 122, 0.28);
  border-radius: 0.8rem;
  background: rgba(223, 105, 26, 0.12);
}

.form-meaning-value {
  color: #ffffff;
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  line-height: 1.15;
  font-weight: 800;
}

.answer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.context-line {
  margin: 0.5rem 0 0;
}

.flashcard-word-highlight {
  display: inline;
  padding: 0.02rem 0.18rem 0.05rem;
  border-radius: 0.28rem;
  background: rgba(255, 176, 122, 0.26);
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(255, 176, 122, 0.32);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.rating-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0.2rem 0 1.05rem;
}

/* Tab guide in page header */
.tab-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem 1.2rem;
  margin: 0;
  padding: 0;
}

.tab-guide-item {
  display: block;
}

.tab-guide dt {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #ffb07a;
  margin: 0;
  padding-top: 0.1rem;
}

.tab-guide dd {
  font-size: 0.78rem;
  color: var(--reader-soft);
  margin: 0 0 0.3rem;
  line-height: 1.4;
}

/* Card rating block — sits between the word and the answer detail */
.card-rating {
  margin: 1rem 0 0.5rem;
}

.rating-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.rating-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  border-radius: 0.55rem;
  border: 2px solid;
  background: transparent;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  width: 100%;
  text-align: left;
}

.rating-btn-again  { border-color: #e05c5c; color: #e05c5c; }
.rating-btn-hard   { border-color: #9e9e9e; color: #9e9e9e; }
.rating-btn-good   { border-color: #5bc0de; color: #5bc0de; }
.rating-btn-easy   { border-color: #5cb85c; color: #5cb85c; }

.rating-btn-again:hover,  .rating-btn-again:focus  { background: rgba(224, 92, 92, 0.18);  color: #f07070; }
.rating-btn-hard:hover,   .rating-btn-hard:focus   { background: rgba(158,158,158, 0.15);  color: #bdbdbd; }
.rating-btn-good:hover,   .rating-btn-good:focus   { background: rgba(91,192,222, 0.15);   color: #79d0ea; }
.rating-btn-easy:hover,   .rating-btn-easy:focus   { background: rgba(92,184,92, 0.15);    color: #72cc72; }

.rating-btn-label {
  flex: 1;
}

.rating-interval {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
  margin-right: 0.35rem;
}

@keyframes rating-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.rating-submitting .rating-btn {
  animation: rating-pulse 0.75s ease-in-out infinite;
}

.shortcuts-off .rating-key {
  opacity: 0.2;
  text-decoration: line-through;
}

.rating-key {
  display: inline-block;
  font-family: inherit;
  font-size: 0.65rem;
  font-weight: 700;
  color: inherit;
  opacity: 0.55;
  border: 1px solid currentColor;
  border-radius: 0.2rem;
  padding: 0.05rem 0.28rem;
  line-height: 1.4;
  margin-left: 0.4rem;
  letter-spacing: 0;
}

.shortcut-toggle {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.72rem;
  color: var(--reader-soft);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.shortcut-toggle:hover { opacity: 1; }

.shortcut-toggle[aria-pressed="true"] {
  color: #5bc0de;
  opacity: 1;
}

.undo-review-button {
  margin-left: 0.85rem;
  color: #ffcfad;
}

.saved-card-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0.15rem 0.45rem;
  border: 1px solid rgba(92, 184, 92, 0.28);
  border-radius: 999px;
  background: rgba(92, 184, 92, 0.12);
  color: #b9efb9;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.study-insights {
  display: grid;
  gap: 0.85rem;
}

.dashboard-actions {
  display: flex;
  justify-content: flex-start;
}

.insight-panel {
  display: grid;
  gap: 0.75rem;
  padding: 0.95rem;
  border: 1px solid var(--reader-line);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.035);
}

.insight-panel-head {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  justify-content: space-between;
}

.insight-pill,
.leech-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 176, 122, 0.28);
  background: rgba(223, 105, 26, 0.12);
  color: #ffcfad;
  font-size: 0.74rem;
  line-height: 1;
  font-weight: 800;
}

.leech-badge {
  border-color: rgba(255, 121, 121, 0.35);
  background: rgba(224, 72, 72, 0.14);
  color: #ffb8b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.review-calendar-list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.45rem;
}

.review-calendar-item {
  display: grid;
  gap: 0.2rem;
  justify-items: center;
  min-height: 3.6rem;
  padding: 0.5rem 0.25rem;
  border: 1px solid rgba(143, 179, 255, 0.14);
  border-radius: 0.65rem;
  background: rgba(143, 179, 255, 0.07);
  color: var(--reader-soft);
  font-size: 0.72rem;
}

.review-calendar-item strong {
  color: #ffffff;
  font-size: 1.05rem;
}

.weak-spot-list {
  display: grid;
  gap: 0.55rem;
}

.weak-spot-item {
  position: relative;
  display: grid;
  gap: 0.25rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.03);
}

.weak-spot-item .leech-badge {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
}

.weak-spot-title {
  color: #f4f7ff;
  font-weight: 800;
  padding-right: 4.5rem;
}

.weak-topic-item .weak-spot-title {
  padding-right: 0;
}

.insight-empty {
  color: var(--reader-soft);
  font-size: 0.9rem;
}

.deck-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.deck-card {
  padding: 1rem;
  border: 1px solid var(--reader-line);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.035);
  display: grid;
  align-content: start;
  min-height: 10rem;
}

.deck-manager {
  display: grid;
  gap: 1rem;
}

.deck-manager-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.75fr) auto auto;
  gap: 0.6rem;
}

.deck-library-summary {
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(143, 179, 255, 0.18);
  border-radius: 0.75rem;
  background: rgba(143, 179, 255, 0.08);
  color: #dbe6ff;
  font-weight: 700;
}

.deck-library-summary.flashcard-empty {
  min-height: 5.5rem;
}

.library-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.library-pagination[hidden] {
  display: none;
}

.library-page-label {
  color: var(--reader-soft);
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
}

.deck-group-list,
.card-library-list {
  display: grid;
  gap: 0.65rem;
}

.deck-group-card,
.library-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.9rem;
  border: 1px solid var(--reader-line);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.035);
}

.library-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: baseline;
}

.library-card-greek {
  color: var(--reader-greek);
  font-size: 1.45rem;
  line-height: 1.1;
  font-weight: 800;
}

.library-card-schedule {
  color: #b9c8e8;
  font-size: 0.82rem;
}

.nt-search-tools {
  display: grid;
  gap: 1rem;
}

.word-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
}

.passage-deck-tools {
  display: grid;
  gap: 1rem;
}

.passage-help-note {
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(143, 179, 255, 0.18);
  border-radius: 0.75rem;
  background: rgba(143, 179, 255, 0.08);
  color: #dbe6ff;
  font-size: 0.92rem;
}

.passage-help-note strong {
  color: #ffffff;
}

.passage-deck-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: end;
}

.passage-verse-range {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: end;
}

.passage-skip-existing {
  min-height: 3.4rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--reader-line);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.035);
}

.passage-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  grid-column: span 2;
}

.passage-deck-summary {
  margin-top: 0.25rem;
}

.word-search-results,
.occurrence-list {
  display: grid;
  gap: 0.65rem;
}

.search-result-card,
.occurrence-card {
  padding: 0.9rem;
  border: 1px solid var(--reader-line);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.035);
}

.search-result-head {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.search-result-greek {
  color: var(--reader-greek);
  font-size: 1.45rem;
  line-height: 1.1;
}

.occurrence-list {
  margin-top: 1rem;
}

.occurrence-audio {
  width: 100%;
  margin-top: 0.65rem;
}

.reader-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(22rem, 0.85fr);
  grid-template-areas:
    "greek info";
  gap: 1rem;
  align-items: start;
}

.info-pane {
  grid-area: info;
}

.info-pane-handle {
  display: none;
}

.greek-pane {
  grid-area: greek;
}

.pane-header {
  padding: 1rem 1.1rem 0.9rem;
  border-bottom: 1px solid var(--reader-line);
  background: rgba(255, 255, 255, 0.03);
}

.pane-body {
  padding: 0.75rem 1rem 1rem;
  max-height: calc(100vh - 14rem);
  overflow: auto;
}

.verse-card {
  padding: 0.95rem 0 1rem;
  border-bottom: 1px solid var(--reader-line);
  scroll-margin-top: 1rem;
  transition: background-color 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.verse-card:last-child {
  border-bottom: 0;
}

.verse-card-playing {
  background: rgba(74, 148, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(143, 179, 255, 0.2);
  border-radius: 0.9rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.verse-meta {
  margin-bottom: 0.45rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.verse-ref {
  display: inline-flex;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: rgba(223, 105, 26, 0.12);
  color: #ffb07a;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.verse-text {
  margin: 0;
  line-height: 1.9;
}

.greek-text {
  color: var(--reader-greek);
  font-size: calc(1.18rem * var(--greek-scale, 1));
}

.english-text {
  color: #dfe7ff;
  font-size: 1rem;
}

.verse-inline-english {
  margin-top: 0.65rem;
  padding-left: 0.7rem;
  border-left: 2px solid rgba(143, 179, 255, 0.25);
  color: #d7e1fb;
}

.greek-word {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: bottom;
  cursor: pointer;
  border-radius: 0.35rem;
  margin-inline-end: 0.18em;
  padding: 0.08rem 0.05rem;
  scroll-margin-top: 6rem;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
  -webkit-tap-highlight-color: rgba(223, 105, 26, 0.2);
}

.greek-word:last-child {
  margin-inline-end: 0;
}

.greek-word-gloss {
  display: block;
  font-size: 0.72rem;
  line-height: 1.25;
  min-height: 0.9rem;
  color: rgba(255, 176, 122, 0.8);
  font-style: italic;
  white-space: nowrap;
  max-width: 6.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  user-select: none;
}

.greek-word-gloss-hidden {
  visibility: hidden;
  width: 0;
  max-width: 0;
}

.greek-word-gloss-collapsed {
  display: none;
}

.gloss-controls {
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: min(100%, 18rem);
}

.gloss-freq-control {
  flex: 1 1 20rem;
  min-width: min(100%, 18rem);
  max-width: 28rem;
}

.gloss-freq-slider {
  flex: 1 1 15rem;
  width: auto;
  min-width: 14rem;
  height: 1.35rem;
}

.gloss-freq-label {
  min-width: 8.25rem;
  font-size: 0.78rem;
  text-align: right;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.greek-word:hover,
.greek-word:focus-visible {
  background: rgba(223, 105, 26, 0.18);
  color: #fff0e5;
  outline: none;
}

.greek-word-audio {
  box-shadow: inset 0 -1px 0 rgba(143, 179, 255, 0.45);
}

.greek-word-active {
  background: rgba(74, 148, 255, 0.26);
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(143, 179, 255, 0.35);
}

.word-tooltip {
  position: fixed;
  z-index: 30;
  width: min(18rem, calc(100vw - 1.25rem));
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(255, 176, 122, 0.24);
  border-radius: 0.55rem;
  background:
    linear-gradient(180deg, rgba(35, 47, 82, 0.98), rgba(17, 25, 45, 0.98));
  color: #f7f9ff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  opacity: 0;
  transform: translateY(0.25rem) scale(0.98);
  transform-origin: center bottom;
  pointer-events: none;
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

.word-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.42rem;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 1px solid rgba(255, 176, 122, 0.24);
  border-bottom: 1px solid rgba(255, 176, 122, 0.24);
  background: rgba(17, 25, 45, 0.98);
  transform: translateX(-50%) rotate(45deg);
}

.word-tooltip-below {
  transform-origin: center top;
}

.word-tooltip-below::after {
  top: -0.42rem;
  bottom: auto;
  border: 0;
  border-left: 1px solid rgba(255, 176, 122, 0.24);
  border-top: 1px solid rgba(255, 176, 122, 0.24);
  background: rgba(35, 47, 82, 0.98);
}

.word-tooltip-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.word-tooltip-greek {
  margin-bottom: 0.55rem;
  color: var(--reader-greek);
  font-size: 1.28rem;
  line-height: 1.15;
  font-weight: 750;
}

.word-tooltip-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
}

.word-tooltip .info-key {
  margin-bottom: 0.12rem;
  color: #ffbd8f;
  font-size: 0.67rem;
  letter-spacing: 0.1em;
}

.word-tooltip .info-value {
  display: block;
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.word-tooltip-summary {
  margin: 0.65rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #cfdaf2;
  font-size: 0.82rem;
  line-height: 1.35;
}

.word-tooltip-factoids {
  margin-top: 0.65rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.word-tooltip-factoid-list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.word-tooltip-factoid-list li {
  position: relative;
  padding-left: 0.75rem;
  color: #e6ecfb;
  font-size: 0.82rem;
  line-height: 1.4;
}

.word-tooltip-factoid-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #ffbd8f;
}

.card-factoids {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.6rem;
  background: rgba(38, 49, 84, 0.55);
  border: 1px solid rgba(255, 176, 122, 0.18);
}

.card-factoid-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card-factoid-list li {
  position: relative;
  padding-left: 0.9rem;
  color: #e6ecfb;
  font-size: 0.92rem;
  line-height: 1.45;
}

.card-factoid-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #ffbd8f;
}

.verse-audio-button {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: #edf3ff;
  opacity: 0;
  transform: translateY(2px);
  pointer-events: none;
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}

.verse-card:hover .verse-audio-button,
.verse-card:focus-within .verse-audio-button,
.verse-card-playing .verse-audio-button {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.verse-audio-button:hover,
.verse-audio-button:focus-visible {
  background: rgba(223, 105, 26, 0.2);
  border-color: rgba(255, 176, 122, 0.45);
  color: #fff3ea;
  outline: none;
}

.verse-fav-button {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: #edf3ff;
  font-size: 0.85rem;
  opacity: 0;
  transform: translateY(2px);
  pointer-events: none;
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease;
}

.verse-card:hover .verse-fav-button,
.verse-card:focus-within .verse-fav-button {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.verse-fav-button:hover,
.verse-fav-button:focus-visible {
  background: rgba(99, 149, 255, 0.18);
  border-color: rgba(147, 185, 255, 0.45);
  outline: none;
}

.verse-fav-active {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  background: rgba(99, 149, 255, 0.22);
  border-color: rgba(147, 185, 255, 0.55);
}

.verse-grammar-button {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: #edf3ff;
  font-size: 0.95rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(2px);
  pointer-events: none;
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease;
}

.verse-card:hover .verse-grammar-button,
.verse-card:focus-within .verse-grammar-button {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.verse-grammar-button:hover,
.verse-grammar-button:focus-visible {
  background: rgba(147, 220, 184, 0.18);
  border-color: rgba(160, 230, 200, 0.45);
  color: #e8fff3;
  outline: none;
}

.verse-grammar-active {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  background: rgba(147, 220, 184, 0.22);
  border-color: rgba(160, 230, 200, 0.55);
}

.verse-grammar-notes {
  margin-top: 0.65rem;
  padding: 0.55rem 0.7rem 0.55rem 0.85rem;
  border-left: 2px solid rgba(160, 230, 200, 0.45);
  background: rgba(160, 230, 200, 0.05);
  border-radius: 0 0.35rem 0.35rem 0;
  color: #e3f4ec;
}

.verse-grammar-beginner {
  margin: 0 0 0.5rem;
  font-style: italic;
  font-size: 0.92rem;
  color: #cfe6da;
}

.verse-grammar-bullets {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.95rem;
  line-height: 1.45;
}

.verse-grammar-bullets li {
  margin: 0;
}

.verse-grammar-greek {
  font-weight: 600;
  color: var(--reader-greek);
}

.info-body {
  padding: 1rem 1.05rem 1.1rem;
  display: block;
}

.info-block {
  min-width: 0;
}

.info-label {
  margin: 0 0 0.55rem;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bs-info);
  font-weight: 700;
}

.empty-info {
  color: var(--reader-soft);
}

.info-reference {
  margin: 0 0 0.35rem;
  color: #ffb07a;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.info-headword {
  margin: 0 0 0.8rem;
  font-size: 1.55rem;
  color: var(--reader-greek);
}

.info-lemma-line {
  margin: -0.45rem 0 0.95rem;
  color: #8fb3ff;
  font-size: 0.95rem;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
}

.info-key {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--reader-soft);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.info-value {
  color: #f4f7ff;
  line-height: 1.45;
}

.info-notes {
  margin-top: 1rem;
  display: block;
}

.info-note-block {
  padding-top: 0.8rem;
  border-top: 1px solid var(--reader-line);
}

.info-note-block:first-child {
  border-top: 0;
  padding-top: 0;
}

.info-note {
  margin: 0.3rem 0 0;
  color: #eef3ff;
  line-height: 1.65;
}

.answer-grid .info-note {
  display: block;
  color: #bfc9e6;
  font-size: 0.88rem;
  line-height: 1.45;
}

.word-structure-headword {
  margin: 0.3rem 0 0.65rem;
  color: var(--reader-greek);
  font-size: 1.1rem;
  font-weight: 800;
}

.word-structure-list {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.45rem;
}

.word-structure-row {
  display: grid;
  grid-template-columns: minmax(4.4rem, auto) minmax(4.2rem, auto) minmax(0, 1fr);
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--reader-line);
  border-radius: 0.65rem;
  background: rgba(255, 255, 255, 0.035);
}

.word-structure-piece {
  color: var(--reader-greek);
  font-weight: 900;
}

.word-structure-type {
  color: var(--reader-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.word-structure-gloss {
  color: #eef3ff;
  line-height: 1.4;
}

.word-structure-whole {
  margin: 0.65rem 0 0;
  color: #eef3ff;
  line-height: 1.5;
}

.word-structure-source {
  margin: 0.5rem 0 0;
  color: var(--reader-soft);
  font-size: 0.78rem;
}

.word-structure-mnemonic {
  margin: 0.75rem 0 0;
  color: #c8d6f0;
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.55;
  border-left: 2px solid rgba(160, 180, 240, 0.35);
  padding-left: 0.65rem;
}

.word-structure-cognates {
  margin: 0.65rem 0 0;
  font-size: 0.84rem;
  line-height: 1.5;
}

.word-structure-cognates-label {
  color: var(--reader-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 0.2rem;
}

.word-structure-cognates-words {
  color: #a8c4ff;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.word-structure-family {
  margin: 0.75rem 0 0;
}

.word-structure-family-label {
  display: block;
  color: var(--reader-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.word-structure-family-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.word-structure-family-pill {
  display: inline-block;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: rgba(168, 196, 255, 0.12);
  border: 1px solid rgba(168, 196, 255, 0.25);
  color: var(--reader-greek);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: default;
  transition: background 0.15s;
}

.word-structure-family-pill:hover {
  background: rgba(168, 196, 255, 0.22);
}

.pane-body::-webkit-scrollbar {
  width: 10px;
}

.pane-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

@media (max-width: 1399.98px) {
  .grammar-profile-note {
    text-align: center;
  }

  .reader-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "greek"
      "info";
  }

  .register-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .register-pitch {
    padding-top: 0;
  }

  .info-block + .info-block {
    border-top: 1px solid var(--reader-line);
    padding-top: 1rem;
  }
}

@media (max-width: 1099.98px) {
  .app-nav {
    display: grid;
    grid-template-columns: 1fr;
  }

  .brand-mark,
  .view-tabs,
  .profile-strip {
    justify-self: stretch;
  }

  .view-tabs,
  .login-form,
  .profile-chip {
    justify-content: center;
  }

  .view-tabs {
    width: 100%;
    display: grid;
    /* Three intent groups (Read, Practice, Reference) share the row evenly. */
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
  }

  .view-tab {
    text-align: center;
  }

  .nav-group {
    display: flex;
  }

  .nav-group-toggle {
    width: 100%;
    justify-content: center;
  }

  .nav-group-menu {
    /* Edge-safe: a centered 14rem menu on a 1/3-width toggle overflowed the
       viewport on small phones. Pin within the viewport and cap the width. */
    left: 0;
    right: auto;
    transform: none;
    min-width: 12rem;
    max-width: calc(100vw - 1.5rem);
  }

  .nav-group:last-child .nav-group-menu {
    left: auto;
    right: 0;
  }

  .profile-strip {
    margin-left: 0;
    width: 100%;
  }

  .login-form {
    flex-wrap: wrap;
  }
}

@media (max-width: 991.98px) {
  .reader-shell {
    padding-right: 0.75rem !important;
    padding-left: 0.75rem !important;
  }

  .reader-topbar,
  .reader-pane,
  .flashcards-view,
  .grammar-panel {
    border-radius: 0.95rem;
  }

  .info-pane {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    margin: 0;
    border-radius: 1rem 1rem 0 0;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    transform: translateY(calc(100% - 3.4rem));
    transition: transform 240ms ease;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6);
  }

  .info-pane.expanded {
    transform: translateY(0);
  }

  .info-pane-handle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.85rem 0.95rem 0.7rem;
    background: transparent;
    border: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--reader-line);
    touch-action: none;
  }

  .info-pane-handle-nudge {
    animation: info-pane-handle-nudge 900ms ease;
  }

  @keyframes info-pane-handle-nudge {
    0%   { background: transparent; }
    30%  { background: rgba(255, 176, 122, 0.18); }
    100% { background: transparent; }
  }

  @media (prefers-reduced-motion: reduce) {
    .info-pane-handle-nudge { animation: none; }
  }

  .info-pane-handle-grip {
    position: absolute;
    top: 0.35rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.5rem;
    height: 0.28rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
  }

  .info-pane-handle-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
  }

  .info-pane-handle-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffb07a;
  }

  .info-pane-handle-summary {
    font-size: 0.9rem;
    color: var(--reader-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .info-pane-handle-chevron {
    font-size: 1.1rem;
    line-height: 1;
    color: var(--reader-soft);
    transition: transform 200ms ease;
    flex: 0 0 auto;
    padding: 0 0.25rem;
  }

  .info-pane.expanded .info-pane-handle-chevron {
    transform: rotate(180deg);
  }

  .info-pane .card-header {
    display: none;
  }

  .info-pane .info-body {
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .reader-shell {
    padding-bottom: 4rem !important;
  }

  .floating-player {
    bottom: 4rem;
  }

  body.floating-player-visible {
    padding-bottom: 0;
  }

  .controls-panel,
  .grammar-code-strip {
    min-width: 0;
    width: 100%;
  }

  .gloss-controls,
  .gloss-freq-control {
    width: 100%;
    max-width: none;
    justify-content: flex-start;
  }

  .gloss-freq-slider {
    min-width: 0;
  }

  .flashcard-account-panel,
  .billing-panel,
  .billing-actions,
  .discount-code-form {
    justify-items: stretch;
    justify-content: stretch;
    width: 100%;
    max-width: none;
    text-align: left;
  }

  .billing-actions .btn,
  .discount-code-form .btn,
  .discount-code-form .form-control {
    width: 100%;
  }

  .reader-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "greek"
      "info";
  }

  .pane-body {
    max-height: none;
  }

  .info-grid {
    grid-template-columns: 1fr 1fr;
  }

  .info-notes {
    grid-template-columns: 1fr;
  }

  .flashcard-stats,
  .answer-grid,
  .deck-list,
  .grammar-code-grid,
  .grammar-steps,
  .grammar-topic-body,
  .sources-grid,
  .sources-resource-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grammar-quickref {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flashcard-page-grid,
  .grammar-layout,
  .contact-layout,
  .word-search-form,
  .deck-manager-actions,
  .passage-deck-form {
    grid-template-columns: 1fr;
  }

  .passage-verse-range {
    grid-template-columns: 1fr;
  }

  .passage-actions {
    grid-column: auto;
  }
}

@media (max-width: 575.98px) {
  .reader-shell {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  .brand-mark {
    justify-content: center;
  }

  .view-tabs {
    justify-self: stretch;
    /* Phone widths: one column per intent group (Read / Practice / Reference). */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
  }

  .view-tab {
    padding: 0.5rem 0.45rem;
    line-height: 1.15;
    /* Keep the 44px tap target on phones; inherit from the base rule above. */
  }

  .login-form {
    display: grid;
    grid-template-columns: 1fr;
  }

  .password-field {
    min-width: 0;
  }

  .auth-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .auth-actions .btn {
    width: 100%;
  }

  .reader-topbar > .card-body,
  .flashcards-view > .card-body,
  .grammar-panel > .card-body,
  .register-card > .card-body {
    padding: 1rem !important;
  }

  .reader-copy,
  .pane-copy,
  .status-line,
  .audio-status,
  .billing-note {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .eyebrow {
    letter-spacing: 0.11em;
  }

  .english-toggle {
    min-width: 0;
    padding-top: 0.45rem;
  }

  .audio-toolbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.65rem;
  }

  .audio-toolbar .btn {
    width: 100%;
    padding-right: 0.45rem;
    padding-left: 0.45rem;
  }

  .audio-loop-mode,
  .audio-loop-range,
  .audio-speed,
  .audio-status {
    grid-column: 1 / -1;
  }

  .audio-loop-mode,
  .audio-loop-range,
  .audio-speed {
    justify-content: space-between;
    width: 100%;
  }

  .audio-loop-mode .form-select {
    width: min(100%, 8rem);
  }

  .audio-loop-range .form-control {
    width: 4.4rem;
  }

  .flashcard-widget-menu {
    margin-right: -0.75rem;
    margin-left: -0.75rem;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .flashcard-widget-tab {
    min-width: 7.8rem;
  }

  .profile-chip {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: stretch;
    text-align: center;
  }

  .review-calendar-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .deck-group-card,
  .library-card {
    grid-template-columns: 1fr;
  }

  .flashcard-body {
    padding: 0.85rem;
  }

  .study-card {
    min-height: 16rem;
  }

  .deck-manager-actions,
  .word-search-form,
  .passage-deck-form,
  .library-pagination,
  .coupon-row {
    grid-template-columns: 1fr;
  }

  .coupon-row {
    display: grid;
  }

  .passage-skip-existing {
    min-height: auto;
  }

  .library-pagination {
    display: grid;
  }

  .deck-group-card,
  .library-card,
  .search-result-head,
  .insight-panel-head,
  .grammar-topic summary {
    align-items: stretch;
  }

  .search-result-head,
  .insight-panel-head {
    flex-direction: column;
  }

  .weak-spot-item .leech-badge {
    position: static;
    justify-self: start;
  }

  .weak-spot-title {
    padding-right: 0;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .word-structure-row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .flashcard-stats,
  .answer-grid,
  .deck-list,
  .contact-grid,
  .passage-actions,
  .grammar-code-grid,
  .grammar-steps,
  .grammar-topic-body,
  .grammar-quickref,
  .sources-grid,
  .sources-resource-list {
    grid-template-columns: 1fr;
  }

  .grammar-parse-words {
    grid-template-columns: 1fr 1fr;
  }

  .grammar-topic summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .grammar-topic summary::after {
    position: absolute;
    right: 1rem;
  }

  .grammar-topic {
    position: relative;
  }

  .grammar-topic summary small {
    max-width: calc(100% - 2.4rem);
    text-align: left;
  }

  .signup-hint {
    white-space: normal;
  }

  .offer-row {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .offer-cta {
    width: 100%;
  }

  .offer-meta {
    align-items: center;
  }

  .feature-strip {
    justify-content: center;
  }

  .reader-headline {
    font-size: 1.55rem;
  }

  .verse-card {
    padding-top: 0.85rem;
    padding-bottom: 0.9rem;
  }

  .verse-text {
    line-height: 1.8;
  }

  .greek-text {
    font-size: calc(1.08rem * var(--greek-scale, 1));
  }

  .verse-audio-button {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .hg-modal-backdrop {
    align-items: flex-end;
    padding: 0.75rem;
  }

  .hg-modal {
    width: 100%;
    max-height: calc(100vh - 1.5rem);
    overflow: auto;
    border-radius: 0.9rem;
  }

  .hg-modal-footer {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hg-modal-footer .btn {
    width: 100%;
  }
}

@media (max-width: 399.98px) {
  .view-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .nav-group-toggle {
    padding: 0.42rem 0.4rem;
    font-size: 0.92rem;
  }
}

/* ── Profile dropdown ── */
.profile-name-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.profile-name-btn:focus-visible {
  outline: 2px solid var(--reader-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.profile-dropdown-arrow {
  font-size: 0.7em;
  opacity: 0.7;
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 200;
  min-width: 11rem;
  background: #1e2a3a;
  border: 1px solid var(--reader-line);
  border-radius: 0.6rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.profile-chip {
  position: relative;
}

.profile-dropdown-item {
  display: block;
  width: 100%;
  padding: 0.6rem 1rem;
  background: none;
  border: none;
  color: #f4f7ff;
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  transition: background 120ms;
}

.profile-dropdown-item:hover,
.profile-dropdown-item:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  outline: none;
}

.profile-dropdown-item-danger {
  color: #e07070;
}

.profile-dropdown-item-danger:hover,
.profile-dropdown-item-danger:focus-visible {
  background: rgba(220, 53, 69, 0.15);
}

/* ── Modals ── */
.hg-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 1rem;
}

.hg-modal {
  width: min(28rem, 100%);
  background: #1a2535;
  border: 1px solid var(--reader-line);
  border-radius: 0.85rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.hg-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--reader-line);
}

.hg-modal-body {
  padding: 1.25rem;
}

.hg-modal-footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--reader-line);
}

.hg-modal-close {
  background: none;
  border: none;
  color: var(--reader-soft);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  line-height: 1;
}

.hg-modal-close:hover {
  color: #f4f7ff;
}

.hg-info-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1rem;
  align-items: baseline;
}

.hg-info-label {
  color: var(--reader-soft);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hg-info-value {
  font-weight: 600;
}

.hg-modal-error {
  color: #e07070;
  font-size: 0.88rem;
  min-height: 1.2em;
}

.hg-modal-danger-zone {
  border-top: 1px solid rgba(220, 80, 80, 0.25);
  padding: 1rem 1.25rem 1.1rem;
}

.hg-danger-zone-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #c06060;
  margin: 0 0 0.35rem;
}

.hg-danger-zone-text {
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 0.75rem;
}

/* ── Register page ── */
.register-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(22rem, 34rem);
  gap: 1.25rem;
  align-items: start;
  padding: 1rem 0 3rem;
}

.register-pitch {
  padding: 1rem 0.25rem;
}

.register-card {
  width: 100%;
}

.register-fields {
  display: grid;
  gap: 0.25rem;
}

.register-pricing {
  padding: 1rem;
  border: 1px solid rgba(143, 179, 255, 0.2);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.04);
}

.benefit-list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #d7e1fb;
}

.benefit-list li {
  position: relative;
  padding-left: 1.25rem;
}

.benefit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--reader-accent);
  box-shadow: 0 0 0 0.18rem rgba(223, 105, 26, 0.16);
}

.coupon-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.84rem;
  font-weight: 600;
  color: #8fb3ff;
  cursor: pointer;
}

.coupon-toggle:hover {
  text-decoration: underline;
}

.coupon-toggle::before {
  content: "+";
  display: inline-block;
  font-weight: 700;
  line-height: 1;
}

.coupon-toggle[aria-expanded="true"]::before {
  content: "−";
}

.coupon-toggle .coupon-toggle-hint {
  font-weight: 400;
  color: #9fb0d6;
}

.coupon-collapse {
  margin-top: 0.55rem;
}

.trial-reassurance {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.86rem;
  font-weight: 500;
  color: #39d98a;
}

.trial-reassurance-check {
  flex: 0 0 auto;
  font-weight: 700;
}

.coupon-row {
  display: flex;
  gap: 0.5rem;
}

.coupon-row input {
  flex: 1;
  text-transform: uppercase;
}

.pricing-amount {
  font-weight: 700;
  font-size: 1.05rem;
}

.pricing-amount.pricing-loading {
  opacity: 0.55;
  font-weight: 500;
  font-style: italic;
}

.coupon-status {
  font-size: 0.84rem;
  min-height: 1.1em;
}

.coupon-status.coupon-ok {
  color: #39d98a;
}

.coupon-status.coupon-err {
  color: #e07070;
}

.password-strength-bar {
  height: 0.28rem;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.password-strength-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: #8d99ae;
  transition: width 150ms ease, background-color 150ms ease;
}

.password-strength-text {
  font-size: 0.72rem;
}

.register-status {
  padding: 0.6rem 0.9rem;
  border-radius: 0.5rem;
  font-size: 0.88rem;
  background: rgba(220, 53, 69, 0.15);
  color: #e07070;
}

.register-status.register-status-ok {
  background: rgba(57, 217, 138, 0.12);
  color: #39d98a;
}

.register-status.register-status-error {
  background: rgba(220, 53, 69, 0.15);
  color: #e07070;
}

.alpha-feedback-link {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(10, 14, 25, 0.88);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 0.45rem 1.25rem rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(10px);
}

.alpha-feedback-link:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

@media (max-width: 1399.98px) {
  .register-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .register-pitch {
    padding-top: 0;
  }
}

@media (max-width: 575.98px) {
  .register-shell {
    gap: 0.85rem;
    padding-top: 0.5rem;
  }
}

.contact-char-count {
  font-size: 0.75rem;
  color: var(--reader-soft);
}

.contact-char-over {
  color: #e07070;
  font-weight: 700;
}

.site-footer-link {
  margin-left: 1rem;
  color: var(--reader-soft);
  text-decoration: none;
  opacity: 0.7;
}
.site-footer-link:hover { opacity: 1; color: inherit; }

.forgot-password-link {
  display: block;
  flex: 0 0 100%;
  background: none;
  border: none;
  padding: 0;
  margin: -0.1rem 0 0;
  font-size: 0.8rem;
  color: var(--reader-soft);
  cursor: pointer;
  text-align: right;
  opacity: 0.75;
}
.forgot-password-link:hover { opacity: 1; }

/* ── Word Structure page ──────────────────────────────────────────────────── */
.word-structure-lede {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.85fr);
  gap: 1rem;
  align-items: start;
}

.word-structure-side-stack,
.word-structure-note-body {
  display: grid;
  gap: 1rem;
}

.word-structure-lede > .grammar-panel,
.word-structure-side-stack > .grammar-panel {
  min-width: 0;
}

.word-structure-note-body h3 {
  margin: 0 0 0.45rem;
  color: #ffffff;
  font-size: 1rem;
}

.word-structure-note-body p {
  margin: 0;
  color: #cbd5ef;
  line-height: 1.55;
}

.morph-prefix-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.morph-prefix-grid > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.15rem 0.75rem;
  padding: 0.7rem 0.5rem;
  border-bottom: 1px solid var(--reader-line);
  align-items: baseline;
}

.morph-prefix-grid > div:nth-last-child(-n+2) {
  border-bottom: 0;
}

.morph-prefix-grid strong {
  color: var(--reader-greek);
  font-size: 0.95rem;
  white-space: nowrap;
}

.morph-prefix-grid span {
  color: #cbd5ef;
  font-size: 0.85rem;
  line-height: 1.4;
}

.morph-seam {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin-top: 0.6rem;
  font-size: 0.95rem;
}

.morph-seam-plus {
  color: var(--reader-soft);
  font-weight: 700;
}

.morph-seam-result {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

.morph-seam-arrow {
  color: var(--reader-soft);
}

.morph-seam-gloss {
  color: #cbd5ef;
  font-style: italic;
}

@media (max-width: 991.98px) {
  .word-structure-lede {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .morph-prefix-grid {
    grid-template-columns: 1fr;
  }
  .morph-prefix-grid > div:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--reader-line);
  }
  .morph-prefix-grid > div:last-child {
    border-bottom: 0;
  }
}

@media (prefers-color-scheme: light) {
  /* Force the dark theme even for users with light OS preference, since the
     site design is dark-only. Without this, some browsers render certain
     browser-default elements (inputs, selects) in a jarring light style. */
  :root {
    color-scheme: dark;
  }
}

@media print {
  body { background: #fff; color: #000; }
  .app-nav, .site-footer, .audio-toolbar, .alpha-feedback-link,
  .profile-strip, .hg-modal-backdrop { display: none !important; }
  .reader-shell { max-width: 100%; }
  .greek-text { color: #000; font-size: 1rem; }
}

/* ── Admin dashboard (moved out of admin.html <style> block so CSP can drop unsafe-inline for <style> elements). */
.admin-tab-bar { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.admin-tab { padding: 0.4rem 1.1rem; border-radius: 6px; border: 1px solid rgba(255,255,255,0.15); background: transparent; color: inherit; cursor: pointer; font-size: 0.9rem; }
.admin-tab.active { background: var(--bs-danger); border-color: var(--bs-danger); color: #fff; }
.admin-tab-pane { display: none; }
.admin-tab-pane.active { display: block; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 1rem; text-align: center; }
.stat-value { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.stat-label { font-size: 0.78rem; opacity: 0.65; margin-top: 0.3rem; }
.stat-card.highlight .stat-value { color: var(--bs-danger); }
.admin-toolbar { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.admin-toolbar input[type=text] { flex: 1; min-width: 180px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.admin-table th { text-align: left; padding: 0.5rem 0.6rem; opacity: 0.7; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.1); white-space: nowrap; }
.admin-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.06); vertical-align: top; }
.admin-table tr.unread td { font-weight: 600; }
.admin-table tr.expandable { cursor: pointer; }
.admin-table tr.expandable:hover td { background: rgba(255,255,255,0.04); }
.expand-row td { background: rgba(0,0,0,0.2); padding: 0.75rem 0.6rem; }
.msg-body { white-space: pre-wrap; font-size: 0.85rem; opacity: 0.85; margin-bottom: 0.5rem; }
.admin-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.badge-status { display: inline-block; padding: 0.2em 0.6em; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.badge-active { background: #198754; }
.badge-free { background: rgba(255,255,255,0.15); }
.badge-cancelled { background: #6c757d; }
.badge-unread { background: var(--bs-danger); }
.badge-read { background: rgba(255,255,255,0.12); }
.refund-inline { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-top: 0.5rem; }
.refund-inline input { width: 100px; }
.refund-inline select { min-width: 220px; }
.admin-pagination { display: flex; gap: 0.4rem; align-items: center; margin-top: 1rem; }
.truncate { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }

/* Admin refund form */
.refund-form-flex { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.refund-amount-prefix { font-size: 0.85rem; }
.refund-amount { width: 100px; }
.refund-empty { font-size: 0.82rem; opacity: 0.55; }
.refund-result { font-size: 0.82rem; }
.refund-result-ok { color: #2ecc71; }

/* Register confirm-password error (replaces former inline style="color:#e07070"). */
.password-confirm-error { color: #e07070; }

/* Brief highlight when a fresh login lands on a page so users on contact/sources/etc.
   get a visible affordance beyond the small status string. */
@keyframes profile-chip-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(223, 105, 26, 0); }
  35%      { box-shadow: 0 0 0 4px rgba(223, 105, 26, 0.55); }
}
.profile-chip-flash {
  animation: profile-chip-flash 1.6s ease-in-out 1;
  border-radius: 0.55rem;
}

/* Inline feedback chip next to the Add To Flashcards button. */
.add-card-feedback {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.85rem;
  opacity: 0.85;
  transition: opacity 200ms ease;
}
.add-card-feedback:empty { opacity: 0; }
.add-card-feedback-ok    { color: #2ecc71; }
.add-card-feedback-warn  { color: #e0a060; }
.add-card-feedback-error { color: #e07070; }

/* Keyboard shortcut hint row beneath the rating buttons. */
.shortcut-hint {
  font-size: 0.78rem;
  opacity: 0.7;
  text-align: center;
  margin-bottom: 0;
}
.shortcut-hint kbd {
  font-size: 0.78rem;
  padding: 0.05rem 0.32rem;
  margin: 0 0.05rem;
}

/* 404 page layout (replaces inline style="..."). */
.page-404-panel { max-width: 480px; margin: 0 auto; text-align: center; }
.page-404-links { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }

/* ── Graded Readers ──────────────────────────────────────────────────────────── */
.readers-layout { display: flex; flex-direction: column; gap: 1rem; }

.readers-hub > * + * { margin-top: 1.5rem; }

.readers-level-section {
  --level-accent: #dfe7ff;
  border-left: 4px solid var(--level-accent);
  padding: 0.65rem 0 0.65rem 1rem;
  margin-bottom: 1.1rem;
}

/* When rendered as <details>, hide the default disclosure triangle and
   give the summary a button-like feel. */
.readers-level-section[open] > summary .readers-level-chevron {
  transform: rotate(180deg);
}
.readers-level-section > summary::-webkit-details-marker { display: none; }
.readers-level-section > summary::marker { content: ""; }

.readers-level-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 0.2rem 0.1rem;
  border-radius: 0.45rem;
  transition: background-color 120ms ease;
}

.readers-level-header:hover {
  background: rgba(255, 255, 255, 0.04);
}

.readers-level-meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.readers-level-chevron {
  display: inline-flex;
  width: 1.4rem;
  height: 1.4rem;
  align-items: center;
  justify-content: center;
  color: rgba(223, 231, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font-size: 0.9rem;
  line-height: 1;
  transition: transform 180ms ease;
}

.readers-level-locked {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffbd8f;
  background: rgba(255, 176, 122, 0.12);
  border: 1px solid rgba(255, 176, 122, 0.28);
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

.readers-signup-tile {
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 176, 122, 0.12), rgba(223, 105, 26, 0.08));
  border-color: rgba(255, 176, 122, 0.35);
}

.readers-signup-tile:hover,
.readers-signup-tile:focus-visible {
  background: linear-gradient(180deg, rgba(255, 176, 122, 0.22), rgba(223, 105, 26, 0.14));
  border-color: rgba(255, 176, 122, 0.55);
}

.readers-signup-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.readers-signup-cta {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: #ffbd8f;
  font-weight: 700;
}

.readers-level-title-stack { display: flex; flex-direction: column; gap: 0.15rem; }

.readers-level-pill {
  --level-accent: var(--level-accent, #dfe7ff);
  align-self: flex-start;
  display: inline-block;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--level-accent) 22%, transparent);
  color: var(--level-accent);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.readers-level-tag {
  color: rgba(223, 231, 255, 0.7);
  font-size: 0.85rem;
}

.readers-level-progress {
  color: rgba(223, 231, 255, 0.78);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
}

.readers-story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
}

.readers-story-card-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  text-align: left;
  padding: 0.85rem 0.95rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(35, 47, 82, 0.55), rgba(17, 25, 45, 0.55));
  color: #edf3ff;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.readers-story-card-tile:hover,
.readers-story-card-tile:focus-visible {
  border-color: color-mix(in srgb, var(--level-accent, #dfe7ff) 55%, transparent);
  background: linear-gradient(180deg, rgba(55, 70, 110, 0.65), rgba(25, 36, 60, 0.65));
  transform: translateY(-1px);
  outline: none;
}

.readers-story-card-tile.is-read {
  border-color: rgba(74, 222, 128, 0.35);
}

.readers-story-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

.readers-story-card-blurb {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(223, 231, 255, 0.78);
  line-height: 1.35;
}

.readers-story-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.readers-story-card-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  font-size: 0.72rem;
  color: rgba(223, 231, 255, 0.7);
}

.readers-story-card-stats strong { color: #fff0e5; font-weight: 700; }
.readers-story-card-stats em { font-style: normal; }
.readers-story-card-check { color: #4ade80 !important; }

.readers-tip { background: rgba(35, 47, 82, 0.5); }
.readers-guest-cta {
  background: linear-gradient(135deg, rgba(181, 75, 58, 0.18), rgba(35, 47, 82, 0.55));
  border-left: 4px solid #e07060;
}
.readers-guest-cta .eyebrow {
  color: #ffb59e;
}
.readers-toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%) translateY(20px);
  background: rgba(20, 26, 48, 0.95);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  padding: 0.55rem 1rem;
  border-radius: 0.6rem;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 220ms ease;
  z-index: 60;
}
.readers-toast.readers-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.readers-tip .reader-copy { color: rgba(223, 231, 255, 0.85); }

/* Single-story view — match the main reader's panel instead of Bootstrap's
   default teal card background (--bs-card-bg). */
.readers-story-card {
  overflow: hidden;
  --bs-card-bg: var(--reader-panel);
  border: 1px solid var(--reader-line) !important;
  border-radius: 1.35rem;
}

.readers-story-header { padding: 1rem 1.1rem 0.6rem; background: rgba(35, 47, 82, 0.45); }

.readers-story-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.3rem;
}

.readers-stat-pill {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(223, 231, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

.readers-preteach {
  margin: 0.4rem 0 1.2rem;
  padding: 0.7rem 0.85rem;
  background: rgba(74, 148, 255, 0.07);
  border: 1px solid rgba(74, 148, 255, 0.18);
  border-radius: 0.5rem;
}

.readers-preteach-label {
  margin: 0 0 0.45rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: #ffbd8f;
  text-transform: uppercase;
  font-weight: 700;
}

.readers-preteach-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.readers-preteach-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.32rem 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.4rem;
}

.readers-preteach-greek { color: var(--reader-greek); font-weight: 700; }
.readers-preteach-en { color: rgba(223, 231, 255, 0.78); font-size: 0.85rem; }

.readers-text { display: flex; flex-direction: column; gap: 1.1rem; }

.readers-sentence { padding-bottom: 0.4rem; }

.readers-sentence-greek {
  margin: 0 0 0.35rem;
  line-height: 2.05;
  font-size: 1.22rem;
}

.readers-sentence-en {
  margin: 0;
  padding-left: 0.7rem;
  border-left: 2px solid rgba(143, 179, 255, 0.25);
  color: #d7e1fb;
  font-size: 0.98rem;
  line-height: 1.5;
}

/* The interactive Greek word in a story sentence. Mirrors .greek-word from the
   main reader so the hover/tap behavior feels consistent across the site. */
.reader-word {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: bottom;
  cursor: pointer;
  border-radius: 0.35rem;
  padding: 0.05rem 0.1rem;
  margin-inline-end: 0.05em;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
  -webkit-tap-highlight-color: rgba(223, 105, 26, 0.2);
}

.reader-word:hover,
.reader-word:focus-visible,
.reader-word-active {
  background: rgba(223, 105, 26, 0.18);
  color: #fff0e5;
  outline: none;
}

.reader-word-active {
  background: rgba(74, 148, 255, 0.26);
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(143, 179, 255, 0.35);
}

.reader-word-text { display: block; }

.reader-word-gloss {
  display: none;
  font-size: 0.7rem;
  line-height: 1.2;
  color: rgba(255, 176, 122, 0.85);
  font-style: italic;
  white-space: nowrap;
  max-width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  user-select: none;
}

.readers-show-glosses .reader-word-gloss { display: block; }

.reader-word-unknown {
  cursor: default;
  color: rgba(255, 255, 255, 0.85);
}

.readers-story-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.reader-toolbar-actions .form-check-label { color: rgba(223, 231, 255, 0.85); font-size: 0.85rem; }
/* The toolbar is only relevant in the single-story view. Bootstrap's d-flex
   utility class otherwise wins over the [hidden] attribute on the hub. */
.reader-toolbar-actions[hidden] { display: none !important; }

@media (max-width: 640px) {
  .readers-level-section { padding-left: 0.7rem; }
  .readers-story-grid { grid-template-columns: 1fr; }
  .readers-sentence-greek { font-size: 1.12rem; line-height: 1.95; }
}

/* ─── Falling Words (arcade) ─────────────────────────────────────────────── */
/* Visual treatment: dark space lane with parallax starfield, glowing serif
   meteor-words, neon-accent HUD/chips. Every interactive element has a
   visible keyboard shortcut badge (a/s/d/f/g/h) to match the arcade feel. */

.fw-page { display: flex; flex-direction: column; gap: 0; }
.fw-panel { background: var(--reader-panel); }

.fw-setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  margin-bottom: 1rem;
}

/* ── Setup tabs (Graded Drill / Custom) ─────────────────────────────────── */
.fw-mode-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 0;
}
.fw-mode-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  color: var(--reader-soft);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.55rem 1rem;
  border-radius: 0.5rem 0.5rem 0 0;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.12s ease, color 0.12s ease;
  margin-bottom: -1px;
}
.fw-mode-tab:hover { color: var(--reader-greek); background: rgba(255, 255, 255, 0.03); }
.fw-mode-tab-active {
  color: #ffd9a8;
  background: linear-gradient(180deg, rgba(223, 105, 26, 0.18), rgba(223, 105, 26, 0.03));
  border-color: rgba(223, 105, 26, 0.45);
  border-bottom-color: var(--reader-panel);
  text-shadow: 0 0 8px rgba(255, 176, 122, 0.4);
}
.fw-pane { padding-top: 0.2rem; }
.fw-pane-intro {
  color: rgba(223, 231, 255, 0.85);
  font-size: 0.92rem;
  margin: 0 0 0.9rem;
  line-height: 1.45;
}

/* ── Drill picker cards ─────────────────────────────────────────────────── */
.fw-drill-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 0.9rem; }
.fw-drill-list-loading {
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
  margin: 0.5rem 0;
}
.fw-drill-tier { display: flex; flex-direction: column; gap: 0.5rem; }
.fw-drill-tier-title {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--reader-soft);
  margin: 0 0 0.2rem;
  font-weight: 700;
}
.fw-drill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.55rem;
}
.fw-drill-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-radius: 0.55rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--reader-greek);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease;
}
.fw-drill-card:hover {
  background: rgba(223, 105, 26, 0.10);
  border-color: rgba(223, 105, 26, 0.45);
  transform: translateY(-1px);
}
.fw-drill-card-selected {
  background: linear-gradient(180deg, rgba(223, 105, 26, 0.24), rgba(223, 105, 26, 0.04)) !important;
  border-color: var(--reader-accent) !important;
  box-shadow: 0 0 0 1px var(--reader-accent) inset, 0 6px 18px rgba(0,0,0,0.4);
}
.fw-drill-card-title {
  font-weight: 800;
  font-size: 0.98rem;
  color: #ffe7c8;
}
.fw-drill-card-rule {
  font-size: 0.84rem;
  color: rgba(223, 231, 255, 0.78);
  line-height: 1.35;
}
.fw-drill-card-example {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding-top: 0.25rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  margin-top: 0.15rem;
}
.fw-drill-card-greek {
  font-family: 'Cardo', 'EB Garamond', 'SBL Greek', serif;
  font-size: 1.05rem;
  color: var(--reader-greek);
}
.fw-drill-card-gloss {
  font-size: 0.8rem;
  color: var(--reader-soft);
  font-style: italic;
}
.fw-drill-card-ref {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  font-variant-numeric: tabular-nums;
}

/* Detail panel that appears when a drill is selected. */
.fw-drill-detail {
  background: rgba(223, 105, 26, 0.08);
  border: 1px solid rgba(223, 105, 26, 0.35);
  border-radius: 0.55rem;
  padding: 0.75rem 0.95rem;
  margin-bottom: 0.7rem;
}
.fw-drill-detail-title {
  font-size: 1rem;
  font-weight: 800;
  color: #ffe7c8;
  margin: 0 0 0.25rem;
}
.fw-drill-detail-rule {
  font-size: 0.9rem;
  color: rgba(223, 231, 255, 0.9);
  margin: 0 0 0.4rem;
  line-height: 1.4;
}
.fw-drill-detail-example {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  font-size: 0.88rem;
}
.fw-drill-example-label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--reader-soft);
  font-weight: 700;
}
.fw-drill-example-greek {
  font-family: 'Cardo', serif;
  color: var(--reader-greek);
  font-size: 1.1rem;
}
.fw-drill-example-gloss { color: rgba(223, 231, 255, 0.78); font-style: italic; }
.fw-drill-example-ref { color: var(--reader-soft); font-variant-numeric: tabular-nums; }

/* Difficulty fieldset can be wider when used alone (outside the 3-col grid). */
.fw-difficulty-fieldset { margin-top: 0.7rem; margin-bottom: 1rem; }
.fw-difficulty-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
}
.fw-difficulty-row .fw-radio { padding: 0.32rem 0.4rem; }
.fw-fieldset {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.6rem;
  padding: 0.8rem 0.9rem 0.7rem;
  margin: 0;
}
.fw-legend {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--reader-soft);
  padding: 0 0.4rem;
  width: auto;
  margin-bottom: 0.4rem;
}
.fw-radio {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.32rem 0.2rem;
  border-radius: 0.4rem;
  cursor: pointer;
  color: rgba(223, 231, 255, 0.92);
  font-size: 0.92rem;
  min-height: 36px;
}
.fw-radio:hover { background: rgba(223, 105, 26, 0.10); }
.fw-radio input[type="radio"] { accent-color: var(--reader-accent); margin: 0; }
.fw-radio small.fw-auth-note {
  color: var(--reader-soft);
  font-size: 0.72rem;
  margin-left: auto;
}
.fw-radio-disabled { opacity: 0.55; cursor: not-allowed; }
.fw-radio-disabled:hover { background: transparent; }

.fw-passage-fields {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
  padding: 0.5rem 0.2rem 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.fw-inline-field {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--reader-soft);
}
.fw-inline-field select { min-width: 100px; }

.fw-setup-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.fw-setup-actions .status-line.status-error { color: #f08080; }

/* ── Game body ───────────────────────────────────────────────────────────── */
.fw-game-body { padding: 0.75rem 0.9rem 1rem; }

/* HUD: a single arcade strip. Each stat is its own pill so it never wraps
   into a "label\n value" stack on narrow screens. */
.fw-hud {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.6rem;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.25));
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.7rem;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.fw-hud-stat {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.2rem 0.6rem;
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.04);
  min-width: 0;
}
.fw-hud-label {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--reader-soft);
  font-weight: 700;
}
.fw-hud-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffd9a8;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255, 176, 122, 0.55);
}
.fw-hud-actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

/* ── The lane: deep-space canvas ─────────────────────────────────────────── */
.fw-lane {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 380px;
  max-height: 720px;
  border-radius: 0.75rem;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(223, 105, 26, 0.16), transparent 55%),
    radial-gradient(ellipse at 50% -10%, rgba(80, 140, 255, 0.10), transparent 55%),
    linear-gradient(180deg, #050714 0%, #0a1126 55%, #0b1f3a 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, 0.7),
    inset 0 0 1px rgba(223, 105, 26, 0.2);
  overflow: hidden;
  contain: layout paint;
}

/* Two parallax star layers. Each uses a tiled background that scrolls
   downward at a different speed for depth. */
.fw-lane::before,
.fw-lane::after {
  content: '';
  position: absolute;
  inset: -200px 0 -200px 0;
  pointer-events: none;
  background-repeat: repeat;
}
.fw-lane::before {
  background-image:
    radial-gradient(1px 1px at 12px 30px, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1px 1px at 60px 110px, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 120px 50px, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 180px 200px, rgba(180,210,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 220px 90px, rgba(255,255,255,0.5), transparent 60%);
  background-size: 240px 240px;
  animation: fw-stars 14s linear infinite;
  opacity: 0.85;
}
.fw-lane::after {
  background-image:
    radial-gradient(1px 1px at 30px 80px, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(2px 2px at 150px 160px, rgba(255,210,170,0.8), transparent 60%),
    radial-gradient(1px 1px at 70px 180px, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 200px 40px, rgba(255,255,255,0.7), transparent 60%);
  background-size: 320px 320px;
  animation: fw-stars 28s linear infinite;
  opacity: 0.7;
}
@keyframes fw-stars {
  from { transform: translateY(-120px); }
  to   { transform: translateY(120px); }
}

/* Subtle horizon line near the bottom (the "target zone") */
.fw-lane-grid {
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 80px;
  background: linear-gradient(180deg, transparent, rgba(223, 105, 26, 0.18));
  border-top: 1px dashed rgba(223, 105, 26, 0.45);
  pointer-events: none;
  z-index: 2;
}

/* The falling word — a glowing meteor */
.fw-word {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  font-family: 'Cardo', 'EB Garamond', 'SBL Greek', serif;
  font-size: clamp(2.6rem, 5.2vw, 4.2rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff;
  padding: 0.1rem 0.3rem;
  text-shadow:
    0 0 12px rgba(255, 215, 170, 0.85),
    0 0 24px rgba(223, 105, 26, 0.55),
    0 0 48px rgba(223, 105, 26, 0.25);
  animation: fw-fall var(--fw-fall-ms, 6000ms) linear forwards,
             fw-pulse 1.2s ease-in-out infinite alternate;
  will-change: top, transform, text-shadow;
  z-index: 3;
}
.fw-word::after {
  /* trailing flame */
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  width: 60%;
  height: 90px;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 176, 122, 0.55), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  opacity: 0.85;
}
.fw-word.fw-word-paused {
  animation-play-state: paused, paused;
}
.fw-word.fw-word-resume {
  animation: fw-fall-resume var(--fw-fall-ms, 6000ms) linear forwards,
             fw-pulse 1.2s ease-in-out infinite alternate;
}
.fw-word.fw-word-resolved {
  animation: fw-resolve 0.32s ease-out forwards !important;
}

@keyframes fw-fall {
  from { top: 0; }
  to   { top: 100%; }
}
@keyframes fw-fall-resume {
  to { top: 100%; }
}
@keyframes fw-pulse {
  from { text-shadow: 0 0 12px rgba(255, 215, 170, 0.75), 0 0 24px rgba(223, 105, 26, 0.45), 0 0 48px rgba(223, 105, 26, 0.20); }
  to   { text-shadow: 0 0 18px rgba(255, 235, 200, 1.0), 0 0 36px rgba(223, 105, 26, 0.75), 0 0 64px rgba(223, 105, 26, 0.40); }
}
@keyframes fw-resolve {
  from { opacity: 1; filter: blur(0); }
  to   { opacity: 0; filter: blur(6px); transform: translate(-50%, -100%) scale(1.18); }
}

/* Flash overlays on hit/miss */
.fw-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  animation: fw-flash-fade 0.32s ease-out forwards;
}
.fw-flash-hit  { background: radial-gradient(circle at center, rgba(92, 184, 92, 0.55), transparent 70%); }
.fw-flash-miss { background: radial-gradient(circle at center, rgba(224, 92, 92, 0.55), transparent 70%); }
@keyframes fw-flash-fade {
  from { opacity: 0.85; }
  to   { opacity: 0; }
}

.fw-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: center;
  justify-content: center;
  background: rgba(5, 7, 20, 0.78);
  color: #ffd9a8;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 1.1rem;
  text-shadow: 0 0 12px rgba(255, 176, 122, 0.6);
  z-index: 6;
}
.fw-overlay-title {
  font-size: 1.4rem;
}
.fw-overlay-hint {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.75;
  text-shadow: none;
}
.fw-overlay-hint kbd {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  font-family: inherit;
}

/* Meaning splash: shown briefly when a word resolves so the user sees
   what the form they just parsed actually means. */
.fw-meaning {
  position: absolute;
  left: 50%;
  bottom: 22%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.5rem 0.9rem;
  border-radius: 0.55rem;
  background: rgba(5, 7, 20, 0.78);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  animation: fw-meaning-in 0.32s ease-out;
  max-width: 90%;
  text-align: center;
}
.fw-meaning-lemma {
  font-family: 'Cardo', 'EB Garamond', 'SBL Greek', serif;
  font-size: 1.4rem;
  color: #ffe7c8;
  text-shadow: 0 0 8px rgba(255, 176, 122, 0.45);
  line-height: 1.1;
}
.fw-meaning-gloss {
  font-size: 0.95rem;
  color: #d3e2ff;
  font-style: italic;
  line-height: 1.2;
}
.fw-meaning-hit  { border-color: rgba(92, 184, 92, 0.65); box-shadow: 0 0 24px rgba(92, 184, 92, 0.35); }
.fw-meaning-miss { border-color: rgba(224, 92, 92, 0.65); box-shadow: 0 0 24px rgba(224, 92, 92, 0.35); }
.fw-meaning-miss .fw-meaning-lemma { color: #ffcbcb; }
@keyframes fw-meaning-in {
  from { opacity: 0; transform: translate(-50%, 8px) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* ── Chips: arcade keypad ────────────────────────────────────────────────── */
.fw-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.55rem;
  margin: 0 0 0.7rem;
}
.fw-chip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f3f6ff;
  border-radius: 0.55rem;
  padding: 0.6rem 0.7rem;
  font-weight: 600;
  font-size: 0.95rem;
  min-height: 58px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease;
  text-align: left;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 10px rgba(0,0,0,0.35);
}
.fw-chip-key {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 0.4rem;
  background: rgba(223, 105, 26, 0.22);
  border: 1px solid rgba(223, 105, 26, 0.65);
  color: #ffd9a8;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-weight: 800;
  font-size: 0.92rem;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255, 176, 122, 0.5);
}
.fw-chip-label {
  flex: 1 1 auto;
  text-align: left;
  line-height: 1.15;
}
.fw-chip:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(223, 105, 26, 0.28), rgba(223, 105, 26, 0.10));
  border-color: var(--reader-accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.45), 0 0 0 1px rgba(223,105,26,0.4) inset;
}
.fw-chip:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.fw-chip:disabled { cursor: default; opacity: 0.7; }
.fw-chip-correct {
  background: linear-gradient(180deg, rgba(92, 184, 92, 0.35), rgba(92, 184, 92, 0.15)) !important;
  border-color: #5cb85c !important;
  color: #d6f5d6 !important;
  box-shadow: 0 0 18px rgba(92, 184, 92, 0.55) !important;
}
.fw-chip-correct .fw-chip-key {
  background: rgba(92, 184, 92, 0.35);
  border-color: rgba(92, 184, 92, 0.9);
  color: #e6ffe6;
}
.fw-chip-wrong {
  background: linear-gradient(180deg, rgba(224, 92, 92, 0.35), rgba(224, 92, 92, 0.15)) !important;
  border-color: #e05c5c !important;
  color: #f8d6d6 !important;
  box-shadow: 0 0 18px rgba(224, 92, 92, 0.55) !important;
}
.fw-chip-wrong .fw-chip-key {
  background: rgba(224, 92, 92, 0.35);
  border-color: rgba(224, 92, 92, 0.9);
  color: #ffe6e6;
}

.fw-feedback-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.7rem;
  gap: 1rem;
  min-height: 24px;
  font-size: 0.92rem;
}
.fw-last-result { font-weight: 700; }
.fw-result-hit { color: #8de28d; text-shadow: 0 0 8px rgba(92, 184, 92, 0.5); }
.fw-result-miss { color: #f0a0a0; text-shadow: 0 0 8px rgba(224, 92, 92, 0.4); }
.fw-current-ref { color: var(--reader-soft); font-size: 0.85rem; font-variant-numeric: tabular-nums; }

.fw-final-line { font-size: 1.05rem; color: var(--reader-greek); margin: 0.2rem 0; }
.fw-final-line strong { color: #ffd9a8; text-shadow: 0 0 8px rgba(255, 176, 122, 0.45); }
.fw-final-note { color: var(--reader-soft); margin: 0.3rem 0 0; font-size: 0.92rem; }
.fw-game-over-actions {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  margin-top: 1.1rem;
  flex-wrap: wrap;
}

/* ── Round debrief ───────────────────────────────────────────────────────── */
.fw-debrief-body { padding: 1.1rem 1.2rem 1.2rem; text-align: left; }
.fw-debrief-header { text-align: center; margin-bottom: 1rem; }
.fw-debrief-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-bottom: 0.5rem;
}
.fw-debrief-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.55rem;
  padding: 0.75rem 0.85rem;
}
.fw-debrief-title {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--reader-soft);
  font-weight: 700;
  margin: 0 0 0.6rem;
}
.fw-debrief-empty { color: var(--reader-soft); font-style: italic; font-size: 0.88rem; margin: 0; }

.fw-debrief-forms { display: flex; flex-direction: column; gap: 0.45rem; }
.fw-debrief-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px minmax(60px, auto);
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.fw-debrief-form-label {
  color: var(--reader-greek);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fw-debrief-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}
.fw-debrief-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.fw-bar-good { background: linear-gradient(90deg, #5cb85c, #8de28d); }
.fw-bar-mid  { background: linear-gradient(90deg, #df691a, #ffb07a); }
.fw-bar-bad  { background: linear-gradient(90deg, #b54747, #e05c5c); }
.fw-debrief-form-count {
  color: var(--reader-soft);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  text-align: right;
}

.fw-debrief-misses { display: flex; flex-direction: column; gap: 0.5rem; }
.fw-debrief-miss-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.15rem 0.6rem;
  padding: 0.55rem 0.7rem;
  background: rgba(224, 92, 92, 0.06);
  border: 1px solid rgba(224, 92, 92, 0.25);
  border-radius: 0.5rem;
}
.fw-debrief-miss-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  grid-column: 1;
}
.fw-debrief-miss-greek {
  font-family: 'Cardo', 'EB Garamond', serif;
  font-size: 1.15rem;
  color: var(--reader-greek);
}
.fw-debrief-miss-lemma {
  font-size: 0.85rem;
  color: var(--reader-soft);
  font-style: italic;
}
.fw-debrief-miss-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  align-items: baseline;
  font-size: 0.82rem;
  grid-column: 1;
}
.fw-debrief-miss-correct { color: #ffb07a; font-weight: 600; }
.fw-debrief-miss-gloss   { color: rgba(223, 231, 255, 0.85); font-style: italic; }
.fw-debrief-miss-ref     { color: var(--reader-soft); font-variant-numeric: tabular-nums; }
.fw-debrief-add-btn {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .fw-debrief-cols { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .fw-word { font-size: clamp(1.9rem, 7vw, 2.6rem); }
  .fw-lane { height: 52vh; min-height: 320px; }
  .fw-hud { gap: 0.35rem; padding: 0.4rem 0.5rem; }
  .fw-hud-stat { padding: 0.15rem 0.45rem; }
  .fw-hud-value { font-size: 0.95rem; }
  .fw-hud-label { font-size: 0.6rem; letter-spacing: 0.1em; }
  .fw-chips { grid-template-columns: 1fr 1fr; }
  .fw-chip { font-size: 0.85rem; min-height: 52px; padding: 0.5rem 0.55rem; }
  .fw-chip-key { width: 26px; height: 26px; font-size: 0.78rem; }
}

/* ── Walkthrough / guided tour ──────────────────────────────────────────── */
.hg-tour-overlay {
  position: fixed;
  inset: 0;
  pointer-events: auto;
}
.hg-tour-shade {
  position: fixed;
  background: rgba(6, 10, 22, 0.72);
  transition: top 0.18s ease, left 0.18s ease, width 0.18s ease, height 0.18s ease;
}
.hg-tour-spotlight {
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 0 0 2px var(--reader-accent), 0 0 0 6px rgba(223, 105, 26, 0.25);
  pointer-events: none;
  transition: top 0.18s ease, left 0.18s ease, width 0.18s ease, height 0.18s ease;
}
.hg-tour-bubble {
  position: fixed;
  width: min(420px, calc(100vw - 24px));
  background: var(--reader-panel-strong);
  border: 1px solid var(--reader-line);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  color: var(--reader-greek);
  font-size: 0.95rem;
  line-height: 1.45;
  outline: none;
  transition: top 0.2s ease;
}
.hg-tour-bubble-inner {
  padding: 1rem 1.1rem 0.9rem;
}
.hg-tour-bubble-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}
.hg-tour-step-count {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--reader-soft);
}
.hg-tour-close {
  background: none;
  border: none;
  color: var(--reader-soft);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.15rem 0.35rem;
  cursor: pointer;
  border-radius: 4px;
}
.hg-tour-close:hover, .hg-tour-close:focus { color: var(--reader-greek); background: rgba(255, 255, 255, 0.08); }
.hg-tour-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
  color: var(--reader-greek);
}
.hg-tour-body {
  margin: 0 0 0.8rem;
  color: var(--reader-greek);
}
.hg-tour-bubble-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.hg-tour-nav { display: flex; gap: 0.4rem; }
.hg-tour-back:disabled { opacity: 0.45; cursor: not-allowed; }
.hg-tour-pulse {
  animation: hg-tour-pulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(223, 105, 26, 0.5);
}
@keyframes hg-tour-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(223, 105, 26, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(223, 105, 26, 0); }
  100% { box-shadow: 0 0 0 0   rgba(223, 105, 26, 0); }
}
/* Tour overlay shades must not block scrolling — user needs to scroll to see
   the spotlighted element if it's offscreen. The shades stay click-through. */
.hg-tour-overlay { pointer-events: none; }
.hg-tour-shade { pointer-events: none; }
.hg-tour-bubble { pointer-events: auto; }
.hg-tour-spotlight { pointer-events: none; }

@media (max-width: 720px) {
  .hg-tour-bubble {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none;
    border-radius: 14px;
  }
}