/* «Ἀναλόγιο» — ἀνάγνωσι κειμένου τῶν βιβλίων. Θέματα: φῶς · περγαμηνή · νύχτα · κερί. */

.vv-analogio {
  --a-bg: #fbf8f1; --a-paper: #fffdf8; --a-ink: #241c12; --a-ink-2: #6b5d48; --a-line: rgba(80, 60, 30, .14);
  --a-accent: color-mix(in srgb, var(--xr, #7a1420) 70%, #6b4a12); --a-glow: transparent; --a-mark: rgba(212, 176, 106, .38);
  /* μέγεθος γραμμάτων: μεγαλώνει μὲ τὴν ὀθόνη (1280px → 20px, 1920px → 23px) × ἡ ἐπιλογὴ Α−/Α+ τοῦ ἀναγνώστη */
  --a-size: calc(clamp(1.18rem, 0.9rem + 0.45vw, 1.5rem) * var(--a-klimaka, 1));
  position: relative; isolation: isolate; min-height: calc(100vh - var(--vv-header-h, 72px));
  background: var(--a-bg); color: var(--a-ink); transition: background .5s, color .5s;
  padding-bottom: 72px;
}
.vv-analogio[data-thema=pergamini] {
  --a-bg: #e9dcbf; --a-paper: #f3e7cc; --a-ink: #3a2a17; --a-ink-2: #7a6343; --a-line: rgba(90, 60, 20, .2);
  --a-mark: rgba(160, 110, 30, .3);
}
.vv-analogio[data-thema=pergamini] .vv-analogio__selida {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(120, 80, 30, .16));
}
.vv-analogio[data-thema=nyxta] {
  --a-bg: #0d1018; --a-paper: #141925; --a-ink: #e3dccd; --a-ink-2: #a39a88; --a-line: rgba(227, 220, 205, .12);
  --a-accent: #d4b06a; --a-mark: rgba(212, 176, 106, .22);
}
.vv-analogio[data-thema=keri] {
  --a-bg: #0c0806; --a-paper: #150e09; --a-ink: #ecd9b4; --a-ink-2: #a68d66; --a-line: rgba(236, 217, 180, .12);
  --a-accent: #e6b45c; --a-glow: rgba(255, 166, 64, .3); --a-mark: rgba(255, 180, 80, .22);
}
.vv-analogio[data-thema=keri] .vv-analogio__selida { background-image: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255, 170, 70, .1), transparent 70%); }

/* στὸ «Κερί» τὸ κόσμημα τοῦ τέλους γίνεται φλόγα */
.vv-analogio[data-thema=keri] .vv-analogio__kosmima { font-size: 0; opacity: 1; height: 34px; position: relative; }
.vv-analogio[data-thema=keri] .vv-analogio__kosmima::before { content: ""; position: absolute; left: 50%; bottom: 8px; width: 11px; height: 22px; translate: -50% 0;
  border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%; transform-origin: 50% 100%;
  background: radial-gradient(ellipse at 50% 72%, #fff6d6 0 18%, #ffd16b 34%, #f08a24 64%, rgba(200, 60, 10, .2) 82%, transparent);
  box-shadow: 0 0 18px 6px rgba(255, 150, 50, .35), 0 0 42px 14px rgba(255, 120, 30, .14); animation: vv-floga-mikri 2.3s infinite ease-in-out; }
.vv-analogio[data-thema=keri] .vv-analogio__kosmima::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 2px; height: 9px; translate: -50% 0;
  background: linear-gradient(#3a2412, #120a05); border-radius: 1px; }
@keyframes vv-floga-mikri {
  0%, 100% { transform: scale(1, 1) rotate(-1deg); } 22% { transform: scale(.95, 1.07) rotate(2deg); } 41% { transform: scale(1.04, .96) rotate(-2deg); }
  63% { transform: scale(.97, 1.05) rotate(1deg); } 81% { transform: scale(1.02, .98) rotate(-1.5deg); }
}

/* τὸ φῶς τοῦ κεριοῦ: θερμὴ λάμψι ποὺ τρεμοπαίζει */
.vv-analogio__fos { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .8s; }
.vv-analogio[data-thema=keri] .vv-analogio__fos { opacity: 1; }
.vv-analogio__fos::before, .vv-analogio__fos::after { content: ""; position: absolute; left: 50%; top: -10vh; width: 120vmax; height: 120vmax; translate: -50% 0;
  background: radial-gradient(circle at 50% 22%, var(--a-glow), rgba(255, 140, 40, .05) 30%, transparent 55%); }
.vv-analogio__fos::after { animation: vv-floga 4.7s infinite ease-in-out; mix-blend-mode: screen; }
@keyframes vv-floga {
  0%, 100% { opacity: .85; transform: scale(1); } 17% { opacity: 1; transform: scale(1.015); } 31% { opacity: .78; }
  48% { opacity: .95; transform: scale(.99); } 63% { opacity: .82; } 79% { opacity: 1; transform: scale(1.01); }
}

/* κεφαλὴ */
.vv-analogio__kefali { position: sticky; top: var(--a-top, 0px); z-index: 5; display: flex; align-items: center; gap: 12px; padding: 10px max(16px, calc(50% - 560px));
  background: color-mix(in srgb, var(--a-bg) 82%, transparent); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--a-line); }
.vv-analogio__piso { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.vv-analogio__piso img { width: 28px; height: 40px; object-fit: cover; border-radius: 2px 4px 4px 2px; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5); flex: none; }
.vv-analogio__piso span { display: grid; min-width: 0; }
.vv-analogio__piso b { font: 400 1.05rem/1.2 var(--vv-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vv-analogio__piso small { font: 500 .74rem var(--vv-sans); color: var(--a-ink-2); letter-spacing: .03em; }
.vv-analogio__ergaleia { display: flex; gap: 6px; flex: none; }
.vv-abtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--a-line); background: color-mix(in srgb, var(--a-paper) 70%, transparent); color: inherit; font: 600 .82rem var(--vv-sans);
  cursor: pointer; text-decoration: none; transition: background .2s, border-color .2s, transform .15s; }
.vv-abtn svg { width: 20px; height: 20px; }
.vv-abtn:hover { border-color: var(--a-accent); }
.vv-abtn:active { transform: scale(.96); }
.vv-abtn:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }
.vv-abtn[aria-pressed=true] { background: var(--a-accent); border-color: var(--a-accent); color: #fff; }
.vv-abtn--akroasi[aria-pressed=true] svg { animation: vv-palmos 1.2s infinite; }
@keyframes vv-palmos { 50% { transform: scale(1.15); } }
.vv-analogio__proodos { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.vv-analogio__proodos i { display: block; height: 100%; background: linear-gradient(90deg, var(--a-accent), #d4b06a); transition: width .6s cubic-bezier(.2, .7, .2, 1); }

/* ρυθμίσεις */
.vv-analogio__rythmiseis { position: sticky; top: calc(var(--a-top, 0px) + 62px); z-index: 6; width: min(420px, calc(100% - 32px)); margin: 8px 16px 0 auto; margin-right: max(16px, calc(50% - 560px));
  padding: 14px; border-radius: 16px; background: var(--a-paper); border: 1px solid var(--a-line); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .6);
  display: grid; gap: 12px; font: 500 .85rem var(--vv-sans); animation: vv-anadysi .25s ease-out; }
.vv-analogio__rythmiseis[hidden] { display: none; }
@keyframes vv-anadysi { from { opacity: 0; transform: translateY(-6px); } }
.vv-ar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vv-ar__lb { min-width: 82px; color: var(--a-ink-2); }
.vv-ar output { min-width: 48px; text-align: center; }
.vv-ar select { font: inherit; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--a-line); background: var(--a-bg); color: inherit; }
.vv-ar--themata { display: grid; grid-template-columns: repeat(4, 1fr); }
.vv-ar--themata button { display: grid; justify-items: center; gap: 6px; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--a-line);
  background: none; color: inherit; font: inherit; cursor: pointer; }
.vv-ar--themata button[aria-checked=true] { border-color: var(--a-accent); box-shadow: inset 0 0 0 1px var(--a-accent); }
.vv-ar--themata i { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); }
[data-vv-thema=fos] i { background: #fffdf8; }
[data-vv-thema=pergamini] i { background: #ead9b5; }
[data-vv-thema=nyxta] i { background: #141925; }
[data-vv-thema=keri] i { background: radial-gradient(circle at 50% 35%, #ffcf7a, #b4610f 45%, #150e09 70%); }

/* ἡ σελίδα */
.vv-analogio__selida { position: relative; width: min(42em, calc(100% - 32px)); margin: 28px auto 0; padding: clamp(28px, 6vw, 64px) clamp(20px, 6vw, 68px) 40px;
  background-color: var(--a-paper); border-radius: 6px; border: 1px solid var(--a-line);
  box-shadow: 0 1px 0 var(--a-line), 0 30px 60px -36px rgba(40, 25, 10, .55), inset 0 0 80px rgba(120, 90, 40, .06);
  font: 400 var(--a-size)/1.78 var(--vv-text); font-feature-settings: "kern", "liga", "onum"; hyphens: auto; -webkit-hyphens: auto;
  view-transition-name: vv-selida; transition: background-color .5s; }
.vv-analogio[data-thema=nyxta] .vv-analogio__selida, .vv-analogio[data-thema=keri] .vv-analogio__selida { box-shadow: 0 30px 70px -30px #000, inset 0 0 90px rgba(0, 0, 0, .35); }
.vv-analogio__arithmos { text-align: center; margin: -10px 0 26px; font: 500 .75rem var(--vv-sans); letter-spacing: .3em; color: var(--a-ink-2); }
.vv-analogio__arithmos span::before, .vv-analogio__arithmos span::after { content: "—"; margin: 0 .8em; opacity: .5; }
.vv-analogio__selida p { margin: 0; text-align: justify; text-indent: 1.6em; }
.vv-analogio__selida p.synexeia, .vv-analogio__selida p:first-of-type, .vv-analogio__selida h2 + p { text-indent: 0; }
.vv-analogio__selida p.kentro { text-align: center; text-indent: 0; margin: .45em 0; font-family: var(--vv-serif); font-size: 1.15em; line-height: 1.45; }
.vv-analogio__selida p.kentro:first-of-type { margin-top: 1.6em; }
.vv-analogio__selida p.stixoi { white-space: pre-line; text-align: left; text-indent: 0; margin: 0 0 1.1em clamp(0px, 8%, 3em); line-height: 1.7; hyphens: none; }
.vv-analogio__selida h2 { margin: 1.2em 0 .9em; text-align: center; font: 400 1.35em/1.3 var(--vv-serif); color: var(--a-accent); letter-spacing: .02em; text-wrap: balance; }
.vv-analogio__selida h2::after { content: "❧"; display: block; margin-top: .35em; font-size: .7em; opacity: .55; }
.vv-analogio__selida p.arxi::first-letter { float: left; font: 400 3.55em/.82 var(--vv-serif); margin: .08em .1em 0 0; color: var(--a-accent);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25); }
.vv-analogio__keni { text-align: center !important; text-indent: 0 !important; color: var(--a-ink-2); font-style: italic; padding: 3em 0; }
.vv-analogio__keni a { color: var(--a-accent); }
.vv-analogio__telos { margin-top: 2.4em; text-align: center; }
.vv-analogio__kosmima { display: block; color: var(--a-accent); opacity: .6; font-size: 1.1rem; margin-bottom: 1.2em; }
.vv-analogio__plohgisi { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; font: 600 .86rem var(--vv-sans); }
.vv-analogio__plohgisi a { color: var(--a-accent); text-decoration: none; padding: 10px 4px; }
.vv-analogio__plohgisi a:first-child { justify-self: start; }
.vv-analogio__plohgisi a:last-child { justify-self: end; }
.vv-analogio__plohgisi a:hover { text-decoration: underline; text-underline-offset: 4px; }
.vv-analogio__lepta { color: var(--a-ink-2); font-weight: 500; font-size: .78rem; }
.vv-analogio__simeiosi { width: min(42em, calc(100% - 32px)); margin: 18px auto 0; text-align: center; font: 400 .78rem/1.5 var(--vv-sans); color: var(--a-ink-2); opacity: .8; }

/* ἀκρόασι: ἡ πρότασι ποὺ ἀκούγεται */
.vv-protasi { border-radius: 4px; transition: background .3s, box-shadow .3s; }
.vv-protasi.fonazei { background: var(--a-mark); box-shadow: 0 0 0 3px var(--a-mark); }

/* κάρτα ἀποφθέγματος */
.vv-kartabtn { position: absolute; z-index: 20; translate: -50% -100%; padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: #1c140c; color: #f3dfa6; font: 600 .82rem var(--vv-sans); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .6); animation: vv-anadysi .2s; }
.vv-kartabtn::after { content: ""; position: absolute; left: 50%; bottom: -5px; translate: -50% 0; border: 6px solid transparent; border-bottom: 0; border-top-color: #1c140c; }
.vv-karta { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(10, 6, 4, .78); backdrop-filter: blur(6px); }
.vv-karta__in { display: grid; gap: 14px; justify-items: center; max-height: 100%; }
.vv-karta canvas { width: min(420px, 86vw, calc((100vh - 120px) * .8)); height: auto; border-radius: 10px; box-shadow: 0 30px 80px -20px #000; }
.vv-karta__btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.vv-karta__btns button { padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(243, 223, 166, .4); background: #1c140c; color: #f3dfa6;
  font: 600 .88rem var(--vv-sans); cursor: pointer; }
.vv-karta__btns button:first-child { background: #d4b06a; color: #1c140c; border-color: #d4b06a; }

/* ξεφύλλισμα (View Transitions) */
::view-transition-old(vv-selida) { animation: vv-fevgei .38s cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(vv-selida) { animation: vv-erxetai .46s cubic-bezier(.2, .7, .2, 1) both; }
.vv-piso::view-transition-old(vv-selida) { animation-name: vv-fevgei-piso; }
.vv-piso::view-transition-new(vv-selida) { animation-name: vv-erxetai-piso; }
@keyframes vv-fevgei { to { opacity: 0; transform: translateX(-6%) rotateY(8deg); filter: blur(2px); } }
@keyframes vv-erxetai { from { opacity: 0; transform: translateX(7%) rotateY(-8deg); filter: blur(2px); } }
@keyframes vv-fevgei-piso { to { opacity: 0; transform: translateX(6%) rotateY(-8deg); filter: blur(2px); } }
@keyframes vv-erxetai-piso { from { opacity: 0; transform: translateX(-7%) rotateY(8deg); filter: blur(2px); } }

/* ἀλλαγὴ σελίδας χωρὶς κύλισι: πλαϊνὰ βέλη (ὀθόνη) — μπάρα κάτω (κινητό) */
.vv-analogio__plaina button { position: fixed; top: 50%; translate: 0 -50%; z-index: 6; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--a-line); background: color-mix(in srgb, var(--a-paper) 88%, transparent); color: var(--a-accent); cursor: pointer; opacity: .85;
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .5); transition: opacity .2s, transform .15s; }
/* δίπλα στὴ σελίδα: ἡ σελίδα ἔχει πλάτος 42em στὸ ἴδιο μέγεθος γραμμάτων (--a-size), ἄρα 21em ἀπὸ τὸ κέντρο + 1 κουμπί */
.vv-analogio__plaina { font-size: var(--a-size); }
.vv-analogio__plaina button { font-size: inherit; }        /* τὰ κουμπιὰ δὲν κληρονομοῦν μέγεθος· ἀλλιῶς τὸ em εἶναι 13px */
.vv-plaino--prohg { left: max(8px, calc(50% - 21em - 68px)); }
.vv-plaino--epomeni { right: max(8px, calc(50% - 21em - 68px)); }
/* περιεχόμενα: τίτλος … ἀριθμὸς σελίδας */
.vv-analogio__selida p.periexomena { display: flex; align-items: baseline; gap: .5em; text-indent: 0; margin: .15em 0; }
.vv-analogio__selida p.periexomena i { flex: 1; border-bottom: 1px dotted var(--a-ink-2); opacity: .55; min-width: 2em; transform: translateY(-.3em); }
.vv-analogio__selida p.periexomena b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--a-ink-2); }
.vv-analogio__selida p.periexomena--titlos { margin-top: .7em; font-weight: 600; }
.vv-analogio__plaina button:hover { opacity: 1; transform: scale(1.05); }
.vv-analogio__plaina button:active { transform: scale(.95); }
.vv-analogio__plaina button:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }
.vv-analogio__plaina button:disabled { opacity: .22; cursor: default; transform: none; }
.vv-analogio__plaina svg { width: 28px; height: 28px; }
.vv-analogio__mpara { display: none; }

/* πλήρης ὀθόνη / κινητό */
.vv-analogio:fullscreen { overflow-y: auto; }
@media (max-width: 900px) {
  .vv-analogio__plaina { display: none; }
  .vv-analogio { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .vv-analogio__mpara { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch;
    height: calc(54px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); font: 600 .92rem var(--vv-sans);
    background: color-mix(in srgb, var(--a-bg) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--a-line); }
  .vv-analogio__mpara button { border: 0; background: none; color: var(--a-accent); font: inherit; padding: 0 18px; cursor: pointer; white-space: nowrap; }
  .vv-analogio__mpara button:first-child { text-align: left; }
  .vv-analogio__mpara button:last-child { text-align: right; }
  .vv-analogio__mpara button:disabled { opacity: .3; }
  .vv-mpara__selida { color: var(--a-ink-2) !important; border-inline: 1px solid var(--a-line); min-width: 88px; font-variant-numeric: tabular-nums; }
  /* τὸ κουμπὶ προσβασιμότητος καὶ ὁ μεταφραστὴς ἀνεβαίνουν πάνω ἀπὸ τὴ μπάρα */
  body.view-analogio .vv-pv-btn, body.view-analogio .cc-fab, body.view-analogio #gpt_float_wrapper { bottom: calc(66px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 640px) {
  .vv-abtn--akroasi span { display: none; }
  .vv-analogio__selida { margin-top: 14px; border-radius: 0; border-inline: 0; width: 100%; }
  .vv-analogio__rythmiseis { margin-inline: 16px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .vv-analogio__fos::after, .vv-abtn--akroasi[aria-pressed=true] svg { animation: none; }
  ::view-transition-old(vv-selida), ::view-transition-new(vv-selida) { animation: none; }
}
@media print {
  .vv-analogio__kefali, .vv-analogio__rythmiseis, .vv-analogio__plohgisi, .vv-analogio__simeiosi, .vv-analogio__plaina, .vv-analogio__mpara { display: none; }
  .vv-analogio__selida { box-shadow: none; border: 0; }
}