:root {
  --topbar-height: 76px;
  --controls-height: 84px;
  --page-height: clamp(430px, calc(100vh - 255px), 690px);
  --page-width: calc(var(--page-height) * 0.88);

  --blue: #1f3c88;
  --blue-dark: #162c66;
  --gold: #f4b400;
  --gold-dark: #c98d00;
  --paper: #fffdf9;
  --paper-border: #ddd6c8;
  --reader-bg: #f5efe6;
  --text-main: #222;
  --muted: #8a7d6a;
  --ornament-opacity: 0.18;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background:
    radial-gradient(
      circle at top center,
      rgba(255, 219, 117, 0.08),
      transparent 30%
    ),
    linear-gradient(to bottom, #f7f2e9 0%, #f2eadf 42%, #efe6d9 100%);
  color: var(--text-main);
  min-height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.popup-open {
  overflow: hidden;
}

/* =========================
   TOP BAR
========================= */
.topbar {
  background: linear-gradient(180deg, #22469b 0%, #1f3c88 100%);
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  gap: 14px;
  flex-wrap: wrap;
  box-shadow: 0 8px 24px rgba(16, 36, 84, 0.18);
  position: relative;
  z-index: 20;
}

.brand {
  background: #ffffff;
  color: var(--blue);
  font-size: 24px;
  font-weight: 700;
  border-radius: 0 0 24px 0;
  padding: 12px 18px 12px 12px;
  min-width: 240px;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.top-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  flex: 1;
}

.top-actions-reading {
  width: 100%;
  justify-content: flex-end;
}

.top-btn {
  background: #ffffff;
  color: var(--blue);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  border-radius: 14px;
  padding: 10px 18px;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border: none;
  cursor: pointer;
  transition:
    background 0.24s ease,
    transform 0.24s ease,
    box-shadow 0.24s ease,
    color 0.24s ease;
  white-space: nowrap;
}

.top-btn:hover {
  background: #eef3ff;
  transform: translateY(-2px);
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.top-btn.active-mode {
  background: linear-gradient(180deg, #f6c126 0%, #e8ab00 100%);
  color: #ffffff;
}

/* =========================
   STATISTICS BAR
========================= */
.stats-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-left: 4px;
}

.stat-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--blue);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 14px;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  min-height: 42px;
  border: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

button.stat-pill {
  cursor: pointer;
}

.stat-pill:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.stat-label {
  color: var(--blue);
}

.stat-value {
  color: var(--gold);
  font-weight: 800;
}

/* =========================
   MAIN READER AREA
========================= */
.reader-shell {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  padding: 14px 16px;
}

.reader-content {
  width: 100%;
  max-width: 1800px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 2600px;
  perspective-origin: center center;
}

/* =========================
   COVER PREMIUM STAGE
========================= */
.cover-stage {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cover-scene {
  position: relative;
  width: min(760px, 94vw);
  min-height: var(--page-height);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 34px 20px;
}

.cover-page {
  width: min(420px, 82vw);
  height: var(--page-height);
  background: var(--blue-dark);
  padding: 8px;
  border: 1px solid var(--paper-border);
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cover-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.24) 0%,
      rgba(255, 255, 255, 0) 28%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0));
}

.cover-page img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

*/ @keyframes floatParticle {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.65;
  }
  50% {
    transform: translateY(-14px) scale(1.12);
    opacity: 1;
  }
}

@keyframes coverGlowPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.82;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}

/* =========================
   BOOK STAGE
========================= */
.book-stage {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  perspective: 2600px;
  perspective-origin: center center;
}

.book {
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: calc((var(--page-width) * 2) + 24px);
  transform-style: preserve-3d;
  transition:
    transform 0.72s cubic-bezier(0.22, 0.8, 0.2, 1),
    opacity 0.35s ease;
  will-change: transform;
  position: relative;
}

.book::before {
  content: "";
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: -18px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(76, 58, 30, 0.2),
    rgba(76, 58, 30, 0)
  );
  filter: blur(8px);
  z-index: 0;
}

/* =========================
   PAGE
========================= */
.page {
  width: var(--page-width);
  height: var(--page-height);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.76),
      rgba(255, 251, 244, 0.76)
    ),
    var(--paper);
  padding: 32px 26px 46px;
  position: relative;
  border: 1px solid var(--paper-border);
  overflow: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition:
    transform 0.72s cubic-bezier(0.22, 0.8, 0.2, 1),
    box-shadow 0.72s cubic-bezier(0.22, 0.8, 0.2, 1),
    filter 0.45s ease,
    opacity 0.35s ease;
  will-change: transform, box-shadow, filter;
}

.page.left {
  transform-origin: right center;
  box-shadow:
    inset -10px 0 18px rgba(0, 0, 0, 0.06),
    0 18px 36px rgba(0, 0, 0, 0.14);
  border-radius: 10px 0 0 10px;
  z-index: 2;
}

.page.right {
  transform-origin: left center;
  box-shadow:
    inset 10px 0 18px rgba(0, 0, 0, 0.06),
    0 18px 36px rgba(0, 0, 0, 0.14);
  border-radius: 0 10px 10px 0;
  z-index: 1;
}

.page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.45s ease,
    transform 0.72s cubic-bezier(0.22, 0.8, 0.2, 1);
  z-index: 2;
}

.page.left::before {
  background: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.08) 18%,
    rgba(255, 255, 255, 0.04) 50%,
    rgba(255, 255, 255, 0) 78%
  );
}

.page.right::before {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.08) 18%,
    rgba(255, 255, 255, 0.04) 50%,
    rgba(255, 255, 255, 0) 78%
  );
}

/* Kyrgyz ornaments on page */

.page {
  padding-top: 30px;
  padding-bottom: 52px;
}

.page-ornament {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 29px;

  background-image: var(--kyrgyz-pattern-url);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;

  opacity: 1;
  pointer-events: none;
  z-index: 1;

  filter: contrast(120%);
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}

/* Kyrgyz ornaments on page */
.page-ornament-bottom {
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 100%;
  height: 24px;

  background-image: var(--kyrgyz-pattern-url);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;

  opacity: 1;
  pointer-events: none;
  z-index: 1;

  filter: contrast(120%);
  transform: scaleY(-1);

  /* 🔥 KEY: hide center, keep edges */
  mask-image: linear-gradient(
    to right,
    black 0%,
    black 18%,
    transparent 35%,
    transparent 65%,
    black 82%,
    black 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    black 0%,
    black 18%,
    transparent 35%,
    transparent 65%,
    black 82%,
    black 100%
  );
}
.spine {
  width: 16px;
  background: linear-gradient(
    to right,
    rgba(92, 62, 20, 0.28),
    rgba(255, 255, 255, 0.65),
    rgba(92, 62, 20, 0.18)
  );
  border-top: 1px solid var(--paper-border);
  border-bottom: 1px solid var(--paper-border);
  flex-shrink: 0;
  transform: translateZ(8px);
  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.08),
    0 6px 18px rgba(0, 0, 0, 0.12);
}

.page-content {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  transform-origin: top center;
  padding: 20px 8px 0;
  transition:
    transform 0.3s ease,
    opacity 0.25s ease;
  position: relative;
  z-index: 3;
}

.page-content::-webkit-scrollbar {
  width: 6px;
}

.page-content::-webkit-scrollbar-thumb {
  background: #d8ccb7;
  border-radius: 10px;
}

.text-page,
.contents-page {
  display: flex;
  flex-direction: column;
}

/* =========================
   NORMAL PAGE TITLES
========================= */
.page-title {
  font-size: clamp(20px, 1.4vw, 26px);
  line-height: 1.25;
  text-align: center;
  color: #d89f04;
  margin: 0 0 5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.page-subtitle {
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.35;
  text-align: center;
  color: #1d4ed8;
  margin: 0 0 5px;
  font-weight: 600;
}
/* =========================
   NORMAL PAGE TEXT
========================= */
.page-text {
  font-size: clamp(10px, 1.00vw, 13px);
  line-height: 1.3;
  color: #060608;
  text-align: justify;
  word-break: break-word;
  font-weight: 200;
  white-space: normal;
  letter-spacing: 0.1px;
}

.page-text p {
  margin: 0 0 10px;
  text-indent: 1.5em;
}

.page-text p:last-child {
  margin-bottom: 0;
}

.page-text strong,
.page-text b {
  font-weight: 400;
}

.page-text em {
  font-style: italic;
  font-weight: 400;
}

/* =========================
   CONTENTS PAGE
========================= */
.contents-title {
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.2;
  text-align: center;
  color: var(--blue);
  margin: 0 0 14px;
  font-weight: 800;
  letter-spacing: 1px;
  border-bottom: 1px solid #d8cfbf;
  padding-bottom: 10px;
}

.contents-text strong {
  display: block;
  margin-top: 12px;
  margin-bottom: 5px;
  color: #f29a4a;
  font-size: clamp(16px, 1.2vw, 20px);
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
}

.contents-text p {
  margin: 0 0 8px;
}

.contents-text em {
  color: #5d69b3;
  font-style: normal;
  font-weight: 400;
}

.contents-text hr {
  border: none;
  border-top: 1px solid #e5dccd;
  margin: 8px 0;
}

/* =========================
   CLICKABLE WORDS
========================= */
.clickable-word {
  cursor: pointer;
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
  border-bottom: none;
  border-radius: 3px;
  padding: 0 1px;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.clickable-word:hover,
.clickable-word:focus {
  background: rgba(244, 180, 0, 0.16);
  color: inherit;
  outline: none;
  box-shadow: inset 0 -1px 0 rgba(244, 180, 0, 0.55);
}

.clickable-word.active-word {
  background: rgba(244, 180, 0, 0.22);
  color: inherit;
  box-shadow: inset 0 -2px 0 rgba(244, 180, 0, 0.85);
}

/* =========================
   AUTO DIFFICULT WORD
========================= */
.auto-difficult-word {
  background: rgba(255, 193, 7, 0.22);
  box-shadow:
    inset 0 -2px 0 rgba(244, 180, 0, 0.95),
    0 0 0 1px rgba(244, 180, 0, 0.18);
  border-radius: 4px;
  font-weight: 600;
}

.auto-difficult-word:hover,
.auto-difficult-word:focus {
  background: rgba(255, 193, 7, 0.3);
  box-shadow:
    inset 0 -2px 0 rgba(244, 180, 0, 1),
    0 0 0 1px rgba(244, 180, 0, 0.28);
}

.auto-difficult-word.active-word {
  background: rgba(255, 193, 7, 0.4);
  box-shadow:
    inset 0 -3px 0 rgba(230, 150, 0, 1),
    0 0 0 1px rgba(230, 150, 0, 0.35);
}

/* =========================
   POPUPS
========================= */
.audio-popup,
.word-popup {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
  padding: 16px;
}

.audio-popup.hidden,
.word-popup.hidden {
  display: none !important;
}

.word-popup {
  z-index: 10000;
}

.audio-popup-box,
.word-popup-box {
  width: min(460px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  border: 2px solid #e3d7c2;
}

.audio-popup-header,
.word-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.audio-popup-header h3,
.word-popup-header h3 {
  margin: 0;
  font-size: 20px;
  color: var(--blue);
  line-height: 1.3;
}

.audio-close-btn,
.word-close-btn {
  border: none;
  background: var(--gold);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 19px;
  cursor: pointer;
  font-weight: bold;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(244, 180, 0, 0.3);
}

.audio-popup-body,
.word-popup-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#popupAudioPlayer,
#popupWordAudio {
  width: 100%;
}

.speed-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.speed-controls label {
  font-weight: 700;
  color: var(--blue);
}

.speed-controls select {
  padding: 8px 10px;
  border-radius: 10px;
  border: 2px solid var(--gold);
  font-size: 15px;
  background: white;
}

.word-popup-body p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.word-audio-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.word-audio-row strong {
  color: #2b2b2b;
  line-height: 1.5;
}

.word-error {
  color: #c0392b;
  min-height: 20px;
}

.popup-word-audio.hidden {
  display: none;
}

/* =========================
   PAGE MEDIA
========================= */
.page-image {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  display: block;
  margin: 12px auto 0;
  border-radius: 4px;
}

.hidden-audio {
  display: none;
}

/* =========================
   PAGE NUMBER
========================= */
.page-number {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  text-align: center;
  color: #1762bd;
  font-size: 13px;
  font-weight: 600;
  z-index: 3;
}

.empty-page {
  color: #999;
  font-style: italic;
  text-align: center;
  margin-top: 80px;
}

/* =========================
   CONTROLS
========================= */
.controls-bar {
  background: linear-gradient(180deg, #23479e 0%, #1f3c88 100%);
  border-top: 2px solid var(--blue-dark);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.16);
  padding: 10px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  min-height: var(--controls-height);
  position: relative;
  z-index: 20;
}

.controls-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.controls-label {
  font-size: 16px;
  font-weight: 700;
  color: white;
}

.circle-btn,
.turn-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(180deg, #f8c520 0%, #e7ab00 100%);
  color: white;
  font-size: 21px;
  font-weight: bold;
  cursor: pointer;
  box-shadow:
    0 8px 16px rgba(244, 180, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease;
}

.rect-btn {
  border: none;
  background: linear-gradient(180deg, #f8c520 0%, #e7ab00 100%);
  color: white;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    0 8px 16px rgba(244, 180, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease;
}

.circle-btn:hover,
.turn-btn:hover,
.rect-btn:hover,
.audio-close-btn:hover,
.word-close-btn:hover {
  filter: brightness(0.99);
  transform: translateY(-2px);
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.circle-btn:disabled,
.turn-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.goto-input {
  width: 90px;
  height: 42px;
  border: 2px solid var(--gold);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 16px;
  text-align: center;
  background: white;
}

.hidden-link {
  display: none;
}

/* =========================
   SINGLE PAGE MODES
========================= */
.book.single-left .page.right,
.book.single-left .spine {
  display: none;
}

.book.single-right .page.left,
.book.single-right .spine {
  display: none;
}

.book.single-left,
.book.single-right {
  max-width: calc(var(--page-width) + 12px);
}

.book.single-left .page.left,
.book.single-right .page.right {
  border-radius: 10px;
}

/* =========================
   PAGE TRANSITIONS - STRONGER 3D
========================= */
.book.reader-ready {
  animation: readerFadeIn 0.4s ease;
}

.book.flipping-next {
  transform: translateX(-20px) rotateY(-14deg) scale(0.992);
}

.book.flipping-prev {
  transform: translateX(20px) rotateY(14deg) scale(0.992);
}

.book.flipping-next .page.left {
  transform: rotateY(-38deg) translateZ(18px) scale(0.985);
  box-shadow:
    inset -18px 0 28px rgba(0, 0, 0, 0.14),
    -12px 12px 30px rgba(0, 0, 0, 0.16);
  filter: brightness(0.98);
  z-index: 3;
}

.book.flipping-next .page.left::before {
  opacity: 1;
}

.book.flipping-next .page.right {
  transform: rotateY(-6deg) translateX(-6px) translateZ(-8px) scale(0.995);
  box-shadow:
    inset 12px 0 18px rgba(0, 0, 0, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.12);
  filter: brightness(1.01);
}

.book.flipping-prev .page.right {
  transform: rotateY(38deg) translateZ(18px) scale(0.985);
  box-shadow:
    inset 18px 0 28px rgba(0, 0, 0, 0.14),
    12px 12px 30px rgba(0, 0, 0, 0.16);
  filter: brightness(0.98);
  z-index: 3;
}

.book.flipping-prev .page.right::before {
  opacity: 1;
}

.book.flipping-prev .page.left {
  transform: rotateY(6deg) translateX(6px) translateZ(-8px) scale(0.995);
  box-shadow:
    inset -12px 0 18px rgba(0, 0, 0, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.12);
  filter: brightness(1.01);
}

.book.flipping-next .page-content,
.book.flipping-prev .page-content {
  opacity: 0.93;
  transform: scale(0.995);
}

@keyframes readerFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) rotateX(3deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0);
  }
}

/* =========================
   REVISION PANEL
========================= */
.revision-trigger {
  cursor: pointer;
  border: none;
}

.revision-panel {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.18);
  transition: opacity 0.25s ease;
}

.revision-panel.hidden {
  display: none;
}

.revision-panel-box {
  width: min(450px, 94vw);
  height: 100vh;
  background: #f9f6ef;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  animation: revisionSlideIn 0.28s ease;
  border-left: 1px solid #e5d8c3;
}

.revision-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #e7dcc8;
  background: #f2ecdf;
}

.revision-panel-header h3 {
  margin: 0;
  color: #1f4690;
  font-size: 1.35rem;
  line-height: 1.25;
}

.revision-panel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.revision-clear-btn {
  padding-inline: 14px;
}

.revision-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 18px 28px;
}

.revision-helper-text {
  margin: 0 0 16px;
  color: #6a5f50;
  font-size: 0.98rem;
  line-height: 1.45;
}

.revision-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.revision-empty {
  margin: 0;
  padding: 16px;
  border-radius: 14px;
  background: #f7f1e5;
  color: #7a6d5e;
  line-height: 1.45;
}

.revision-item {
  background: #ffffff;
  border: 1px solid #eadfcb;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

.revision-item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.revision-word-btn {
  border: none;
  background: none;
  padding: 0;
  font-size: 1.12rem;
  font-weight: 700;
  color: #1f4690;
  cursor: pointer;
  text-align: left;
  line-height: 1.35;
}

.revision-word-btn:hover {
  text-decoration: underline;
}

.revision-remove-btn {
  border: none;
  background: #f3e4c4;
  color: #8a5a00;
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
}

.revision-meta {
  display: grid;
  gap: 7px;
  color: #3f3a34;
  font-size: 0.97rem;
  line-height: 1.45;
}

.revision-meta strong {
  color: #8a5a00;
}

.revision-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}

.revision-value-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

.revision-value-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.revision-translation-value,
.revision-language-value,
.revision-click-count {
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-block;
}

.translation-ky,
.language-ky {
  color: #0f766e;
  background: rgba(15, 118, 110, 0.1);
}

.translation-en,
.language-en {
  color: #1d4ed8;
  background: rgba(29, 78, 216, 0.1);
}

.revision-click-count {
  color: #8a5a00;
  background: rgba(244, 180, 0, 0.14);
}

.revision-difficult-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 5px 11px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.87rem;
  border: 1px solid transparent;
  margin-top: 2px;
}

.difficulty-easy {
  color: #166534;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.28);
}

.difficulty-medium {
  color: #9a6700;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.3);
}

.difficulty-hard {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.28);
}

@keyframes revisionSlideIn {
  from {
    transform: translateX(32px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1200px) {
  :root {
    --page-width: calc(var(--page-height) * 0.8);
  }

  .reader-content {
    max-width: 1500px;
  }

  .cover-scene {
    width: min(700px, 96vw);
  }
}

@media (max-width: 950px) {
  body {
    overflow: auto;
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .brand {
    min-width: auto;
  }

  .top-actions,
  .top-actions-reading {
    justify-content: center;
  }

  .stats-bar {
    justify-content: center;
  }

  .book {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 100%;
    transform: none !important;
  }

  .spine {
    display: none !important;
  }

  .page {
    width: min(94vw, 720px);
    height: auto;
    min-height: 420px;
    border-radius: 8px;
    transform: none !important;
  }

  .page.left,
  .page.right {
    border-radius: 8px;
  }

  .page::before {
    display: none;
  }

  .page-content {
    max-height: none;
    padding-top: 18px;
  }

  .cover-scene {
    min-height: auto;
    padding: 24px 12px;
  }

  .cover-page {
    width: min(94vw, 560px);
    height: auto;
    min-height: 500px;
  }

  .cover-ornament {
    width: min(220px, 46vw);
  }

  .page-ornament {
    width: 120px;
  }

  .revision-panel-box {
    width: 100%;
  }
}


.page-text h5 {
    text-align: center;
    color: #1d4ed8;
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: clamp(13px, 0.95vw, 16px);

}


/* =========================
   RICH VOCABULARY POPUP
========================= */

.word-popup-box {
  width: min(640px, 94vw);
  max-height: 88vh;
}

.word-popup-body {
  gap: 12px;
}

.vocab-primary-card,
.vocab-info-card,
.vocab-image-card {
  background: #ffffff;
  border: 1px solid #eadfcb;
  border-radius: 14px;
  padding: 12px 14px;
}

.vocab-primary-card {
  display: grid;
  gap: 8px;
  background: #fffaf0;
}

.vocab-detail-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
}

.vocab-detail-row strong,
.vocab-info-card strong,
.vocab-image-card strong {
  color: var(--blue);
  font-weight: 700;
}

#popupWordText {
  font-size: 1.25rem;
  font-weight: 800;
  color: #222222;
}

#popupTranslationText {
  font-size: 1.1rem;
  font-weight: 700;
  color: #8a5a00;
}

#popupCanonicalText {
  font-weight: 700;
  color: #5f574d;
}

.vocab-info-card p {
  margin: 7px 0 0;
  line-height: 1.55;
  color: #333333;
}

.vocab-context-card {
  background: #f7f3ea;
}

.vocab-image-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#popupVocabularyImage {
  display: block;
  width: 100%;
  max-height: 230px;
  object-fit: contain;
  border-radius: 10px;
  background: #f8f6f1;
}

.word-audio-row {
  background: #ffffff;
  border: 1px solid #eadfcb;
  border-radius: 14px;
  padding: 10px 14px;
}

@media (max-width: 640px) {
  .word-popup {
    padding: 10px;
  }

  .word-popup-box {
    width: 96vw;
    max-height: 92vh;
    padding: 16px;
  }

  .vocab-detail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  #popupVocabularyImage {
    max-height: 190px;
  }
}



/* ===== LANGUAGE NARRATION POPUP ===== */

.audio-popup-box {
  width: min(500px, 92vw);
  padding: 22px 24px;
  border-radius: 20px;
  border: 1px solid rgba(31, 60, 136, 0.16);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.22),
    0 4px 14px rgba(0, 0, 0, 0.12);
}

.audio-popup-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(31, 60, 136, 0.12);
}

.audio-popup-header h3 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.audio-title-divider,
.audio-speed-divider {
  color: var(--gold);
  padding: 0 3px;
}

.audio-popup-body {
  gap: 16px;
}

.audio-language-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.audio-language-label {
  color: var(--blue);
  font-size: 14px;
  font-weight: 700;
}

.audio-language-label span {
  color: var(--gold);
  padding: 0 3px;
}

.audio-language-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.audio-language-btn {
  min-height: 46px;
  border: 2px solid var(--gold);
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    #f8c520 0%,
    #e7ab00 100%
  );
  color: white;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow:
    0 6px 14px rgba(244, 180, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

.audio-language-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 8px 16px rgba(244, 180, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.audio-language-btn:active:not(:disabled) {
  transform: translateY(0);
}

.audio-language-btn:disabled {
  background: #eef0f4;
  border-color: #d5d9e2;
  color: #9298a5;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

.audio-language-play {
  font-size: 13px;
}

#audioStatusText {
  margin: 0;
  min-height: 20px;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(31, 60, 136, 0.055);
  color: #4a4f5b;
  font-size: 13px;
  line-height: 1.4;
}

#popupAudioPlayer {
  display: block;
  width: 100%;
  height: 46px;
}

.audio-popup-body > .speed-controls {
  padding-top: 2px;
}

.audio-popup-body > .speed-controls label {
  font-size: 14px;
}

.audio-popup-body > .speed-controls select {
  min-width: 82px;
  padding: 7px 10px;
}

@media (max-width: 520px) {
  .audio-popup-box {
    padding: 18px;
  }

  .audio-language-buttons {
    grid-template-columns: 1fr;
  }

  .audio-language-btn {
    min-height: 44px;
  }
}

/* CLEAN_ENLARGED_BOOK_COVER_V1
   ---------------------------------------------------------
   Cover page:
   - remove blue background
   - remove blue frame
   - remove internal padding
   - enlarge real cover image
   - preserve original cover proportions
   --------------------------------------------------------- */


/* =========================================================
   COVER STAGE
========================================================= */

.cover-stage {

    width: 100% !important;

    display: flex !important;

    justify-content: center !important;
    align-items: center !important;
}


/* =========================================================
   COVER SCENE
========================================================= */

.cover-scene {

    width: 100% !important;

    min-height:
        var(--page-height) !important;

    padding:
        8px 16px !important;

    display: flex !important;

    justify-content: center !important;
    align-items: center !important;
}


/* =========================================================
   REMOVE BLUE COVER CONTAINER
========================================================= */

.cover-page {

    /* Let the real cover define the visible shape */
    width:
        auto !important;

    height:
        var(--page-height) !important;

    max-width:
        92vw !important;

    padding:
        0 !important;

    margin:
        0 !important;

    background:
        transparent !important;

    border:
        none !important;

    border-radius:
        0 !important;

    overflow:
        visible !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    position:
        relative !important;

    box-shadow:
        none !important;
}


/* =========================================================
   REMOVE OLD BLUE/GLOSS OVERLAY
========================================================= */

.cover-page::before {

    content:
        none !important;

    display:
        none !important;
}


/* =========================================================
   ACTUAL BOOK COVER IMAGE
========================================================= */

.cover-page img {

    display:
        block !important;

    width:
        auto !important;

    height:
        100% !important;

    max-width:
        92vw !important;

    max-height:
        var(--page-height) !important;

    object-fit:
        contain !important;

    object-position:
        center center !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    border:
        none !important;

    border-radius:
        4px !important;

    background:
        transparent !important;

    /*
       Keep a subtle realistic book shadow,
       but no blue rectangle.
    */
    box-shadow:
        0 14px 30px
        rgba(
            0,
            0,
            0,
            .20
        ) !important;
}


/* =========================================================
   TABLET / SMALL SCREEN
========================================================= */

@media (max-width: 950px) {

    .cover-scene {

        min-height:
            auto !important;

        padding:
            18px 12px !important;
    }


    .cover-page {

        width:
            auto !important;

        height:
            min(
                72vh,
                650px
            ) !important;

        min-height:
            0 !important;

        max-width:
            94vw !important;
    }


    .cover-page img {

        width:
            auto !important;

        height:
            100% !important;

        max-width:
            94vw !important;

        max-height:
            min(
                72vh,
                650px
            ) !important;
    }
}


/* END_CLEAN_ENLARGED_BOOK_COVER_V1 */

/* PREMIUM_COVER_SHOWCASE_V2_START */


/* =========================================================
   COVER STAGE
========================================================= */

.cover-stage {

    width: 100% !important;

    position: relative !important;

    display: flex !important;

    justify-content: center !important;
    align-items: center !important;

    isolation: isolate !important;
}


/* =========================================================
   SOFT SPOTLIGHT BEHIND COVER
========================================================= */

.cover-stage::before {

    content: "";

    position: absolute;

    width: min(620px, 70vw);
    height: min(620px, 70vw);

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 218, 125, .23) 0%,
            rgba(255, 231, 179, .12) 35%,
            rgba(255, 246, 226, .05) 58%,
            rgba(255, 255, 255, 0) 75%
        );

    filter:
        blur(3px);

    pointer-events:
        none;

    z-index:
        -2;
}


/* =========================================================
   SUBTLE FLOOR SHADOW
========================================================= */

.cover-stage::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom:
        18px;

    transform:
        translateX(-50%);

    width:
        min(390px, 58vw);

    height:
        34px;

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse,
            rgba(62, 45, 27, .22) 0%,
            rgba(62, 45, 27, .09) 40%,
            rgba(62, 45, 27, 0) 75%
        );

    filter:
        blur(8px);

    pointer-events:
        none;

    z-index:
        -1;
}


/* =========================================================
   COVER SCENE
========================================================= */

.cover-scene {

    width:
        100% !important;

    min-height:
        var(--page-height) !important;

    padding:
        4px 16px !important;

    display:
        flex !important;

    justify-content:
        center !important;

    align-items:
        center !important;
}


/* =========================================================
   COVER WRAPPER
========================================================= */

.cover-page {

    width:
        auto !important;

    /*
       Slightly taller than before.
       Still constrained by the reader area.
    */
    height:
        calc(var(--page-height) + 8px) !important;

    max-height:
        calc(100vh - 235px) !important;

    max-width:
        92vw !important;

    padding:
        0 !important;

    margin:
        0 !important;

    background:
        transparent !important;

    border:
        none !important;

    border-radius:
        0 !important;

    overflow:
        visible !important;

    box-shadow:
        none !important;

    position:
        relative !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    transform:
        translateY(-1px);

    transition:
        transform .25s ease,
        filter .25s ease;
}


/* =========================================================
   REMOVE OLD COVER OVERLAY
========================================================= */

.cover-page::before {

    content:
        none !important;

    display:
        none !important;
}


/* =========================================================
   REAL COVER IMAGE
========================================================= */

.cover-page img {

    display:
        block !important;

    width:
        auto !important;

    height:
        100% !important;

    max-width:
        92vw !important;

    max-height:
        100% !important;

    object-fit:
        contain !important;

    object-position:
        center !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        none !important;

    border-radius:
        3px !important;

    background:
        transparent !important;

    /*
       Multi-layer shadow creates depth
       without adding another visible frame.
    */

    box-shadow:
        0 2px 3px
        rgba(0, 0, 0, .18),

        0 10px 20px
        rgba(0, 0, 0, .16),

        0 24px 42px
        rgba(73, 49, 20, .16)
        !important;

    filter:
        saturate(1.02)
        contrast(1.01);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


/* =========================================================
   VERY SUBTLE HOVER
========================================================= */

@media (hover: hover) {

    .cover-page:hover {

        transform:
            translateY(-4px);
    }


    .cover-page:hover img {

        box-shadow:
            0 3px 5px
            rgba(0, 0, 0, .16),

            0 14px 26px
            rgba(0, 0, 0, .17),

            0 28px 48px
            rgba(73, 49, 20, .17)
            !important;
    }
}


/* =========================================================
   SMALL SCREENS
========================================================= */

@media (max-width: 950px) {

    .cover-stage::before {

        width:
            90vw;

        height:
            90vw;
    }


    .cover-stage::after {

        width:
            62vw;
    }


    .cover-scene {

        min-height:
            auto !important;

        padding:
            16px 10px !important;
    }


    .cover-page {

        width:
            auto !important;

        height:
            min(
                72vh,
                650px
            ) !important;

        min-height:
            0 !important;

        max-width:
            94vw !important;
    }


    .cover-page img {

        width:
            auto !important;

        height:
            100% !important;

        max-width:
            94vw !important;
    }
}


/* PREMIUM_COVER_SHOWCASE_V2_END */

/* COMPACT_DRAGGABLE_AUDIO_V4_START */


/* =========================================================
   FLOATING AUDIO AREA
========================================================= */

.audio-popup {

    /*
     * No dark modal background.
     *
     * The reader remains visually clear underneath.
     */

    background:
        transparent !important;

    padding:
        12px !important;

    /*
     * Let reader remain usable around the controller.
     */

    pointer-events:
        none !important;
}


/* =========================================================
   COMPACT CONTROLLER CARD
========================================================= */

.audio-popup-box {

    pointer-events:
        auto !important;

    width:
        min(
            400px,
            calc(100vw - 28px)
        ) !important;

    max-height:
        calc(100vh - 28px)
        !important;

    padding:
        10px 15px 14px
        !important;

    border:
        1px solid
        rgba(
            31,
            60,
            136,
            .18
        ) !important;

    border-radius:
        16px !important;

    background:
        rgba(
            255,
            253,
            249,
            .985
        ) !important;

    box-shadow:
        0 16px 38px
        rgba(
            22,
            44,
            102,
            .19
        ),

        0 3px 10px
        rgba(
            0,
            0,
            0,
            .10
        )
        !important;

    overflow:
        hidden !important;

    transform:
        translate3d(
            0,
            0,
            0
        );

    will-change:
        transform;
}


/* =========================================================
   DRAGGING BAR
========================================================= */

.audio-popup-header {

    position:
        relative;

    min-height:
        30px !important;

    margin:
        -2px 0 7px !important;

    padding:
        0 !important;

    border:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-end !important;

    cursor:
        grab !important;

    touch-action:
        none;

    user-select:
        none;
}


/*
 * No unnecessary Narration title.
 */

.audio-popup-header h3 {

    display:
        none !important;
}


/*
 * Elegant draggable grip
 */

.audio-popup-header::before {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        9px;

    width:
        48px;

    height:
        5px;

    transform:
        translateX(-50%);

    border-radius:
        999px;

    background:
        rgba(
            31,
            60,
            136,
            .20
        );

    pointer-events:
        none;
}


.audio-popup-header.is-dragging {

    cursor:
        grabbing !important;
}


/* =========================================================
   CLOSE
========================================================= */

.audio-popup .audio-close-btn {

    width:
        30px !important;

    height:
        30px !important;

    min-width:
        30px !important;

    min-height:
        30px !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        50% !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    font-size:
        15px !important;

    line-height:
        1 !important;

    box-shadow:
        0 3px 8px
        rgba(
            244,
            180,
            0,
            .22
        )
        !important;
}


/* =========================================================
   CONTENT
========================================================= */

.audio-popup-body {

    gap:
        9px !important;
}


/* =========================================================
   LANGUAGE TITLE
========================================================= */

.audio-language-section {

    gap:
        7px !important;
}


.audio-language-label {

    margin:
        0 !important;

    color:
        var(--blue) !important;

    font-size:
        12.5px !important;

    line-height:
        1.25 !important;

    font-weight:
        750 !important;

    text-align:
        center !important;
}


/* =========================================================
   LANGUAGE BUTTONS
========================================================= */

.audio-language-buttons {

    display:
        grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        ) !important;

    gap:
        8px !important;
}


.audio-language-btn {

    min-height:
        39px !important;

    padding:
        7px 10px !important;

    border:
        1.5px solid
        var(--gold)
        !important;

    border-radius:
        10px !important;

    font-size:
        13.5px !important;

    line-height:
        1 !important;

    font-weight:
        800 !important;

    box-shadow:
        0 4px 9px
        rgba(
            244,
            180,
            0,
            .15
        )
        !important;
}


.audio-language-play {

    font-size:
        11px !important;
}


/* ---------------------------------------------------------
   SELECTED LANGUAGE
--------------------------------------------------------- */

.audio-language-btn.is-playing {

    outline:
        3px solid
        rgba(
            31,
            60,
            136,
            .13
        );

    outline-offset:
        1px;

    transform:
        translateY(
            -1px
        ) !important;

    box-shadow:
        0 5px 12px
        rgba(
            244,
            180,
            0,
            .24
        ),

        inset
        0 0 0 1px
        rgba(
            255,
            255,
            255,
            .45
        )
        !important;
}


/* ---------------------------------------------------------
   UNAVAILABLE LANGUAGE
--------------------------------------------------------- */

.audio-language-btn:disabled {

    background:
        #eef0f4 !important;

    border-color:
        #d4d8e1 !important;

    color:
        #9298a5 !important;

    opacity:
        .58 !important;

    box-shadow:
        none !important;

    cursor:
        not-allowed !important;
}


/* =========================================================
   REMOVE EXTRA MESSAGE
========================================================= */

#audioStatusText {

    display:
        none !important;
}


/* =========================================================
   PLAYER
========================================================= */

#popupAudioPlayer {

    display:
        block !important;

    width:
        100% !important;

    height:
        40px !important;

    margin:
        1px 0 0
        !important;
}


/* =========================================================
   SPEED ROW
========================================================= */

.audio-popup-body
> .speed-controls {

    min-height:
        34px;

    padding:
        0 !important;

    gap:
        8px !important;

    flex-wrap:
        nowrap !important;
}


.audio-popup-body
> .speed-controls
label {

    font-size:
        12.5px !important;

    line-height:
        1.2 !important;

    font-weight:
        750 !important;

    white-space:
        nowrap;
}


.audio-popup-body
> .speed-controls
select {

    min-width:
        70px !important;

    height:
        34px !important;

    padding:
        4px 7px !important;

    border:
        1.5px solid
        var(--gold)
        !important;

    border-radius:
        9px !important;

    font-size:
        13px !important;

    background:
        white !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 520px
) {

    .audio-popup {

        padding:
            7px !important;
    }


    .audio-popup-box {

        width:
            calc(
                100vw -
                14px
            )
            !important;

        padding:
            9px 11px 12px
            !important;
    }


    .audio-language-buttons {

        grid-template-columns:
            1fr 1fr
            !important;
    }


    .audio-language-btn {

        min-height:
            38px !important;

        font-size:
            12.5px !important;
    }
}


/* COMPACT_DRAGGABLE_AUDIO_V4_END */

/* ULTRA_COMPACT_FLAG_AUDIO_V5_START */


/* =========================================================
   SMALLER FLOATING CARD
========================================================= */

.audio-popup-box {

    width:
        min(
            338px,
            calc(100vw - 20px)
        ) !important;

    padding:
        7px 10px 10px
        !important;

    border-radius:
        14px !important;

    box-shadow:
        0 12px 30px
        rgba(
            22,
            44,
            102,
            .17
        ),

        0 3px 8px
        rgba(
            0,
            0,
            0,
            .08
        )
        !important;
}


/* =========================================================
   SMALL DRAG BAR
========================================================= */

.audio-popup-header {

    min-height:
        25px !important;

    margin:
        -1px 0 4px
        !important;
}


.audio-popup-header::before {

    top:
        7px !important;

    width:
        42px !important;

    height:
        4px !important;

    background:
        rgba(
            31,
            60,
            136,
            .18
        ) !important;
}


/* =========================================================
   SMALL CLOSE BUTTON
========================================================= */

.audio-popup .audio-close-btn {

    width:
        27px !important;

    height:
        27px !important;

    min-width:
        27px !important;

    min-height:
        27px !important;

    flex:
        0 0 27px !important;

    font-size:
        13px !important;
}


/* =========================================================
   BODY SPACING
========================================================= */

.audio-popup-body {

    gap:
        6px !important;
}


/* =========================================================
   LANGUAGE HEADING
========================================================= */

.audio-language-section {

    gap:
        5px !important;
}


.audio-language-label {

    font-size:
        11px !important;

    line-height:
        1.15 !important;

    margin:
        0 !important;
}


/* =========================================================
   FLAG BUTTON ROW
========================================================= */

.audio-language-buttons {

    display:
        grid !important;

    grid-template-columns:
        1fr 1fr !important;

    gap:
        7px !important;
}


/* =========================================================
   FLAG LANGUAGE BUTTON
========================================================= */

.audio-language-btn {

    min-height:
        38px !important;

    height:
        38px !important;

    padding:
        4px 8px !important;

    display:
        flex !important;

    flex-direction:
        row !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        7px !important;

    border:
        1px solid
        rgba(
            31,
            60,
            136,
            .17
        )
        !important;

    border-radius:
        9px !important;

    background:
        #ffffff !important;

    color:
        var(--blue) !important;

    font-size:
        11.5px !important;

    line-height:
        1 !important;

    font-weight:
        800 !important;

    cursor:
        pointer !important;

    box-shadow:
        0 3px 7px
        rgba(
            24,
            44,
            91,
            .08
        )
        !important;

    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease
        !important;
}


/* =========================================================
   FLAG IMAGE
========================================================= */

.audio-language-flag {

    width:
        34px !important;

    height:
        22px !important;

    flex:
        0 0 34px !important;

    display:
        block !important;

    object-fit:
        cover !important;

    object-position:
        center !important;

    border-radius:
        3px !important;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            .11
        );

    box-shadow:
        0 1px 3px
        rgba(
            0,
            0,
            0,
            .10
        );
}


.audio-language-name {

    display:
        inline-block;

    white-space:
        nowrap;
}


/* =========================================================
   HOVER
========================================================= */

.audio-language-btn:hover:not(:disabled) {

    background:
        #fffaf0 !important;

    border-color:
        var(--gold) !important;

    transform:
        translateY(-1px)
        !important;

    box-shadow:
        0 4px 9px
        rgba(
            244,
            180,
            0,
            .15
        )
        !important;
}


/* =========================================================
   ACTIVE LANGUAGE
========================================================= */

.audio-language-btn.is-playing {

    background:
        #fff8df !important;

    border-color:
        var(--gold) !important;

    outline:
        2px solid
        rgba(
            244,
            180,
            0,
            .18
        ) !important;

    outline-offset:
        1px !important;

    color:
        var(--blue-dark)
        !important;

    transform:
        none !important;

    box-shadow:
        inset
        0 0 0 1px
        rgba(
            244,
            180,
            0,
            .12
        ),

        0 3px 8px
        rgba(
            244,
            180,
            0,
            .13
        )
        !important;
}


/* =========================================================
   DISABLED
========================================================= */

.audio-language-btn:disabled {

    background:
        #f3f4f6 !important;

    border-color:
        #d9dde5 !important;

    color:
        #9ba1ad !important;

    opacity:
        .55 !important;

    filter:
        grayscale(.7);

    box-shadow:
        none !important;
}


/* =========================================================
   OLD PLAY TRIANGLE
========================================================= */

.audio-language-play {

    display:
        none !important;
}


/* =========================================================
   AUDIO PLAYER — SMALLER
========================================================= */

#popupAudioPlayer {

    width:
        100% !important;

    height:
        34px !important;

    margin:
        0 !important;
}


/* =========================================================
   SPEED ROW — SMALLER
========================================================= */

.audio-popup-body
> .speed-controls {

    min-height:
        30px !important;

    gap:
        5px !important;
}


.audio-popup-body
> .speed-controls
label {

    font-size:
        11px !important;

    line-height:
        1 !important;
}


.audio-popup-body
> .speed-controls
select {

    min-width:
        62px !important;

    width:
        62px !important;

    height:
        30px !important;

    padding:
        2px 5px !important;

    border-width:
        1px !important;

    border-radius:
        7px !important;

    font-size:
        11.5px !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 420px
) {

    .audio-popup-box {

        width:
            calc(
                100vw -
                14px
            )
            !important;
    }


    .audio-language-flag {

        width:
            30px !important;

        height:
            20px !important;

        flex-basis:
            30px !important;
    }


    .audio-language-btn {

        gap:
            5px !important;

        padding:
            4px 5px !important;
    }
}


/* ULTRA_COMPACT_FLAG_AUDIO_V5_END */

/* FLAG_ONLY_AUDIO_BUTTONS_V6_START */


/* =========================================================
   EVEN SMALLER CONTROLLER
========================================================= */

.audio-popup-box {

    width:
        min(
            320px,
            calc(100vw - 18px)
        ) !important;

    padding:
        6px 9px 9px
        !important;

    border-radius:
        13px !important;
}


/* =========================================================
   TOP DRAG HANDLE
========================================================= */

.audio-popup-header {

    min-height:
        23px !important;

    margin:
        0 0 3px
        !important;
}


.audio-popup-header::before {

    width:
        38px !important;

    height:
        4px !important;

    top:
        6px !important;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.audio-popup .audio-close-btn {

    width:
        25px !important;

    height:
        25px !important;

    min-width:
        25px !important;

    min-height:
        25px !important;

    flex-basis:
        25px !important;

    font-size:
        12px !important;
}


/* =========================================================
   LANGUAGE HEADING
========================================================= */

.audio-language-label {

    font-size:
        10.5px !important;

    margin:
        0 !important;

    line-height:
        1.1 !important;
}


/* =========================================================
   FLAG BUTTON AREA
========================================================= */

.audio-language-buttons {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        12px !important;

    margin:
        1px 0 2px
        !important;
}


/* =========================================================
   FLAG-ONLY BUTTON
========================================================= */

.audio-language-btn {

    width:
        62px !important;

    min-width:
        62px !important;

    max-width:
        62px !important;

    height:
        40px !important;

    min-height:
        40px !important;

    padding:
        3px !important;

    flex:
        0 0 62px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        0 !important;

    border:
        1px solid
        rgba(
            31,
            60,
            136,
            .16
        )
        !important;

    border-radius:
        9px !important;

    background:
        #ffffff !important;

    overflow:
        hidden !important;

    box-shadow:
        0 2px 6px
        rgba(
            22,
            44,
            102,
            .09
        )
        !important;
}


/* =========================================================
   ACTUAL FLAG
========================================================= */

.audio-language-flag {

    display:
        block !important;

    width:
        54px !important;

    height:
        32px !important;

    max-width:
        none !important;

    flex:
        none !important;

    object-fit:
        cover !important;

    object-position:
        center center !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        6px !important;

    box-shadow:
        none !important;
}


/* =========================================================
   REMOVE OLD TEXT COMPLETELY
========================================================= */

.audio-language-name,
.audio-language-play {

    display:
        none !important;
}


/* =========================================================
   HOVER
========================================================= */

.audio-language-btn:hover:not(:disabled) {

    border-color:
        var(--gold)
        !important;

    background:
        #fffaf0
        !important;

    transform:
        translateY(-1px)
        !important;

    box-shadow:
        0 4px 9px
        rgba(
            244,
            180,
            0,
            .16
        )
        !important;
}


/* =========================================================
   CURRENTLY SELECTED FLAG
========================================================= */

.audio-language-btn.is-playing {

    border-color:
        var(--gold)
        !important;

    background:
        #fff9e8
        !important;

    outline:
        2px solid
        rgba(
            244,
            180,
            0,
            .22
        ) !important;

    outline-offset:
        1px !important;

    transform:
        none !important;
}


/* =========================================================
   DISABLED FLAG
========================================================= */

.audio-language-btn:disabled {

    opacity:
        .42 !important;

    filter:
        grayscale(.75);

    cursor:
        not-allowed !important;
}


/* =========================================================
   PLAYER
========================================================= */

#popupAudioPlayer {

    height:
        32px !important;

    margin:
        0 !important;
}


/* =========================================================
   COMPACT SPEED ROW
========================================================= */

.audio-popup-body
> .speed-controls {

    min-height:
        27px !important;

    gap:
        4px !important;
}


.audio-popup-body
> .speed-controls
label {

    font-size:
        10px !important;
}


.audio-popup-body
> .speed-controls
select {

    width:
        58px !important;

    min-width:
        58px !important;

    height:
        28px !important;

    padding:
        1px 4px !important;

    border-radius:
        6px !important;

    font-size:
        10.5px !important;
}


/* =========================================================
   OVERALL BODY GAP
========================================================= */

.audio-popup-body {

    gap:
        5px !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 380px
) {

    .audio-popup-box {

        width:
            calc(
                100vw -
                12px
            )
            !important;
    }
}


/* FLAG_ONLY_AUDIO_BUTTONS_V6_END */

/* AUDIO_DEFAULT_LEFT_POSITION_V7_START */


/* =========================================================
   DEFAULT DESKTOP POSITION

   Open the narration controller in the free left-hand
   reading area instead of covering the book.
========================================================= */

.audio-popup {

    /*
     * Horizontal:
     * move the controller to the LEFT.
     */

    justify-content:
        flex-start !important;


    /*
     * Vertical:
     * keep it approximately centered in the reader area.
     */

    align-items:
        center !important;


    /*
     * Small comfortable distance from browser edge.
     */

    padding:
        12px 12px 12px 18px
        !important;
}


/* =========================================================
   CONTROLLER
========================================================= */

.audio-popup-box {

    /*
     * Start exactly at its natural left-side position.
     * The existing JavaScript transform then takes over
     * whenever the user drags it.
     */

    margin:
        0 !important;
}


/* =========================================================
   LARGE DESKTOPS

   Give it slightly more breathing room from the edge.
========================================================= */

@media (
    min-width: 1400px
) {

    .audio-popup {

        padding-left:
            22px !important;
    }
}


/* =========================================================
   MEDIUM SCREENS

   Keep it close to the left edge but not touching it.
========================================================= */

@media (
    min-width: 951px
)
and (
    max-width: 1399px
) {

    .audio-popup {

        padding-left:
            14px !important;
    }
}


/* =========================================================
   TABLETS / SMALL SCREENS

   There may no longer be enough empty space beside
   the book, so return to centered positioning.
========================================================= */

@media (
    max-width: 950px
) {

    .audio-popup {

        justify-content:
            center !important;

        align-items:
            center !important;

        padding:
            8px !important;
    }
}


/* AUDIO_DEFAULT_LEFT_POSITION_V7_END */

/* CLEAN_VOCABULARY_WORDS_V1_START */


/* =========================================================
   CLEAN CLICKABLE VOCABULARY WORDS

   Words remain fully clickable and trackable.
   Only the visual highlighting is removed.
========================================================= */


/* ---------------------------------------------------------
   NORMAL CLICKABLE WORD
--------------------------------------------------------- */

.clickable-word {

    color:
        inherit !important;

    background:
        transparent !important;

    font-weight:
        inherit !important;

    text-decoration:
        none !important;

    border:
        0 !important;

    border-bottom:
        0 !important;

    border-radius:
        0 !important;

    padding:
        0 !important;

    box-shadow:
        none !important;

    outline:
        none !important;

    cursor:
        pointer !important;
}


/* ---------------------------------------------------------
   HOVER / KEYBOARD FOCUS

   Keep words visually identical to ordinary text.
--------------------------------------------------------- */

.clickable-word:hover,
.clickable-word:focus,
.clickable-word:focus-visible {

    color:
        inherit !important;

    background:
        transparent !important;

    font-weight:
        inherit !important;

    text-decoration:
        none !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    outline:
        none !important;
}


/* ---------------------------------------------------------
   CURRENTLY CLICKED WORD

   JS may still internally add .active-word.
   We intentionally make it visually invisible.
--------------------------------------------------------- */

.clickable-word.active-word {

    color:
        inherit !important;

    background:
        transparent !important;

    font-weight:
        inherit !important;

    text-decoration:
        none !important;

    border:
        0 !important;

    border-bottom:
        0 !important;

    box-shadow:
        none !important;

    outline:
        none !important;
}


/* ---------------------------------------------------------
   AUTO-DIFFICULT WORD

   Adaptive-learning tracking remains enabled,
   but no yellow marker is shown inside the book.
--------------------------------------------------------- */

.auto-difficult-word {

    color:
        inherit !important;

    background:
        transparent !important;

    font-weight:
        inherit !important;

    text-decoration:
        none !important;

    border:
        0 !important;

    border-bottom:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    outline:
        none !important;
}


/* ---------------------------------------------------------
   DIFFICULT WORD — HOVER / FOCUS
--------------------------------------------------------- */

.auto-difficult-word:hover,
.auto-difficult-word:focus,
.auto-difficult-word:focus-visible {

    color:
        inherit !important;

    background:
        transparent !important;

    font-weight:
        inherit !important;

    text-decoration:
        none !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    outline:
        none !important;
}


/* ---------------------------------------------------------
   CLICKED + DIFFICULT
--------------------------------------------------------- */

.auto-difficult-word.active-word,
.clickable-word.auto-difficult-word.active-word {

    color:
        inherit !important;

    background:
        transparent !important;

    font-weight:
        inherit !important;

    text-decoration:
        none !important;

    border:
        0 !important;

    border-bottom:
        0 !important;

    box-shadow:
        none !important;

    outline:
        none !important;
}


/* CLEAN_VOCABULARY_WORDS_V1_END */