/* =========================================================
   ElderMT2 — Księga Wędrowca
   Starożytna księga — papirus ryżowy, ink painting
   Chiny / Japonia okresu średniowiecza
   ========================================================= */

:root {
  --book-w: min(92vw, 1100px);
  --book-h: min(72vh, 720px);

  /* papier ryżowy - wyblakłe, zbrązowiałe */
  --paper-1: #d9c38a;
  --paper-2: #bea66a;
  --paper-3: #a0854a;
  --paper-dk: #5a3c18;

  /* tusz - czarny z odcieniem sadzy */
  --ink: #1a0f06;
  --ink-soft: #3a2510;
  --ink-brown: #4a2d14;
  --ink-red: #5a1408;   /* rdzawa krew */

  /* złoto - przymatowione, wyblakłe */
  --gold: #9a7a2a;
  --gold-hi: #c9a85a;
  --gold-lo: #6a4a14;

  /* drewno / stare skóry na okładce */
  --wood: #2a1608;
  --wood-hi: #4a2a14;
  --wood-lo: #0e0502;
  --wood-crack: #08030a;

  /* pieczęć cynober - przyciemniony */
  --seal: #8a1410;
  --seal-dk: #4a0a08;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'EB Garamond', 'Noto Serif SC', serif;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 50% 120%, #14080a 0%, #080404 55%, #000 100%);
}

/* ---------- AMBIENT TŁO ---------- */
.ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.fog {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse at 20% 40%, rgba(110,50,20,.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 60%, rgba(60,30,10,.06) 0%, transparent 50%);
  filter: blur(50px);
  animation: fogDrift 80s ease-in-out infinite alternate;
}
.fog-b { animation-duration: 120s; animation-direction: alternate-reverse; opacity: .6; }
@keyframes fogDrift {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(-3%, 1%) scale(1.08); }
}
.vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.88) 100%);
}
.embers {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 12% 80%, rgba(200,100,50,.35) 0, transparent 1.5px),
    radial-gradient(circle at 30% 20%, rgba(180,120,60,.3) 0, transparent 1.5px),
    radial-gradient(circle at 70% 50%, rgba(180,90,40,.28) 0, transparent 1.5px),
    radial-gradient(circle at 90% 90%, rgba(200,110,50,.25) 0, transparent 1.5px),
    radial-gradient(circle at 50% 10%, rgba(200,130,70,.3) 0, transparent 1px);
  animation: emberFloat 18s linear infinite;
  opacity: .6;
}
@keyframes emberFloat {
  0% { transform: translateY(0); opacity: .5; }
  50% { opacity: .85; }
  100% { transform: translateY(-30px); opacity: .4; }
}

/* ---------- AURA WOKÓŁ KSIĘGI ---------- */
.book-aura {
  position: absolute;
  left: 50%; top: 50%;
  width: 1300px; height: 900px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse at center, rgba(200,100,40,.18) 0%, rgba(140,60,20,.12) 25%, transparent 55%),
    radial-gradient(ellipse at center, rgba(255,180,100,.08) 0%, transparent 40%);
  filter: blur(30px);
  opacity: .8;
  animation: auraPulse 6s ease-in-out infinite;
}
@keyframes auraPulse {
  0%,100% { opacity: .5; transform: translate(-50%,-50%) scale(.96); }
  50%     { opacity: .9; transform: translate(-50%,-50%) scale(1.05); }
}

/* ---------- DALEKIE LATARNIE ---------- */
.lantern {
  position: absolute;
  width: 16px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffb060 0%, #d05028 40%, transparent 70%);
  filter: blur(3px);
  box-shadow: 0 0 40px rgba(255,150,80,.55), 0 0 80px rgba(200,80,30,.35);
  animation: lanternSway 5s ease-in-out infinite;
}
.l1 { top: 18%; left: 8%; animation-delay: -1s; }
.l2 { top: 24%; right: 10%; animation-delay: -3s; transform: scale(.8); }
.l3 { bottom: 22%; left: 14%; animation-delay: -2s; transform: scale(1.1); }
@keyframes lanternSway {
  0%,100% { transform: translate(0,0) scale(var(--s,1)); opacity: .7; }
  50%     { transform: translate(3px,-4px) scale(calc(var(--s,1)*1.05)); opacity: 1; }
}

/* ---------- DYM KADZIDLA ---------- */
.incense {
  position: absolute;
  bottom: -20px;
  width: 60px; height: 80%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(200,160,120,.18) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%,  rgba(180,140,100,.12) 0%, transparent 45%);
  filter: blur(8px);
  opacity: .5;
  pointer-events: none;
  transform-origin: 50% 100%;
}
.ic-a { left: 8%;  animation: smokeRise 12s ease-in-out infinite; }
.ic-b { right: 10%; animation: smokeRise 15s ease-in-out infinite -5s; }
@keyframes smokeRise {
  0% { opacity: 0; transform: translateY(20px) scale(1, .3); }
  30% { opacity: .5; }
  70% { opacity: .3; }
  100% { opacity: 0; transform: translateY(-80px) scale(1.4, 1.1); }
}

/* ---------- CHIŃSKIE ZNAKI DRYFUJĄCE ---------- */
.drift-chi {
  position: absolute;
  left: var(--dx);
  top: var(--dy);
  font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
  font-size: clamp(60px, 8vw, 120px);
  color: rgba(200,140,80,.07);
  pointer-events: none;
  animation: driftChi var(--dur) ease-in-out infinite var(--delay);
  filter: blur(.5px);
  text-shadow: 0 0 20px rgba(200,100,40,.1);
}
@keyframes driftChi {
  0%   { transform: translate(0,0) rotate(-3deg); opacity: 0; }
  25%  { opacity: .55; }
  50%  { transform: translate(10px,-14px) rotate(2deg); opacity: .35; }
  75%  { opacity: .45; }
  100% { transform: translate(-8px,-8px) rotate(-1deg); opacity: 0; }
}

/* ---------- ISKRY / OGIEŃ ---------- */
.sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.sparks span {
  position: absolute;
  left: var(--lx);
  bottom: -20px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6c0 0%, #ffc060 25%, #ff6020 55%, #8a1a08 90%, transparent 100%);
  box-shadow:
    0 0 4px rgba(255,180,80,.95),
    0 0 10px rgba(255,120,40,.75),
    0 0 22px rgba(240,80,20,.45);
  animation: sparkRise var(--dur) linear infinite var(--delay);
  opacity: 0;
}
.sparks span.big {
  width: 6px; height: 6px;
  background: radial-gradient(circle, #fffad0 0%, #ffd070 20%, #ff7028 50%, #6a1004 85%, transparent 100%);
  box-shadow:
    0 0 6px rgba(255,200,100,1),
    0 0 16px rgba(255,140,50,.85),
    0 0 34px rgba(240,80,20,.5);
}
@keyframes sparkRise {
  0%   { transform: translate(0, 0) scale(.6); opacity: 0; }
  8%   { opacity: 1; transform: translate(0, -6vh) scale(1); }
  30%  { opacity: .95; transform: translate(calc(var(--sway) * .4), -35vh) scale(1); }
  55%  { opacity: .8;  transform: translate(calc(var(--sway) * .8), -65vh) scale(.85); }
  80%  { opacity: .4;  transform: translate(var(--sway), -90vh) scale(.55); }
  100% { opacity: 0;   transform: translate(calc(var(--sway) * 1.1), -110vh) scale(.1); }
}

/* ---------- STAGE ---------- */
.stage {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  perspective: 2400px;
  perspective-origin: 50% 40%;
}

/* ---------- KSIĘGA ---------- */
.book {
  position: relative;
  width: var(--book-w);
  height: var(--book-h);
  transform-style: preserve-3d;
  transform: rotateX(7deg);
  transition: transform 1.5s cubic-bezier(.25,.8,.25,1);
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.85));
}

.shadow-under {
  position: absolute;
  left: 3%; right: 3%;
  bottom: -50px;
  height: 70px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.8) 0%, transparent 70%);
  filter: blur(16px);
  z-index: -1;
}

.spine {
  position: absolute;
  top: 1.5%; bottom: 1.5%;
  left: 50%;
  width: 24px;
  transform: translateX(-50%);
  background:
    /* głębokie cienie grzbietu */
    linear-gradient(90deg,
      rgba(0,0,0,.95) 0%,
      rgba(10,4,2,.7) 18%,
      rgba(30,14,6,.6) 50%,
      rgba(10,4,2,.7) 82%,
      rgba(0,0,0,.95) 100%);
  pointer-events: none;
  z-index: 50;
  box-shadow: 0 0 12px rgba(0,0,0,.9);
}
.spine::before, .spine::after {
  content: "";
  position: absolute;
  left: 5px; right: 5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(154,122,42,.4), transparent);
}
.spine::before { top: 14%; }
.spine::after  { bottom: 14%; }

/* ---------- LIŚĆ ---------- */
.leaf {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1500ms cubic-bezier(.25,.8,.25,1);
  will-change: transform;
}
.leaf.flipped { transform: rotateY(-180deg); }
.leaf.flipping { transition-duration: 1400ms; }

.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow: hidden;
  border-radius: 1px 5px 5px 1px;
}
.leaf .front { transform: rotateY(0deg); }
.leaf .back  { transform: rotateY(180deg); border-radius: 5px 1px 1px 5px; }

/* =========================================================
   PAPIER RYŻOWY / PAPIRUS — mocno postarzony
   ========================================================= */
.page {
  background:
    /* kółka od herbaty/wody - nieregularne */
    radial-gradient(ellipse 200px 140px at 12% 18%, rgba(90,50,15,.22) 0%, rgba(90,50,15,.06) 55%, transparent 72%),
    radial-gradient(ellipse 160px 100px at 88% 78%, rgba(110,60,20,.28) 0%, rgba(90,50,15,.05) 55%, transparent 72%),
    radial-gradient(ellipse 100px 90px at 72% 20%, rgba(70,35,10,.22) 0%, transparent 60%),
    radial-gradient(ellipse 140px 80px at 18% 88%, rgba(90,45,15,.2) 0%, transparent 65%),
    radial-gradient(ellipse 70px 100px at 55% 55%, rgba(60,30,8,.12) 0%, transparent 70%),
    radial-gradient(ellipse 50px 40px at 38% 70%, rgba(70,35,10,.18) 0%, transparent 70%),
    /* kropki pleśni / drobiny */
    radial-gradient(circle 1.8px at 12% 34%, rgba(40,20,5,.55), transparent 2.5px),
    radial-gradient(circle 1.2px at 46% 12%, rgba(50,25,5,.5), transparent 2px),
    radial-gradient(circle 2px at 72% 88%, rgba(40,20,5,.55), transparent 3px),
    radial-gradient(circle 1.4px at 88% 22%, rgba(50,25,5,.5), transparent 2px),
    radial-gradient(circle 1px at 35% 66%, rgba(50,25,5,.5), transparent 1.8px),
    radial-gradient(circle 1.6px at 58% 44%, rgba(40,20,5,.55), transparent 2.5px),
    radial-gradient(circle 1.2px at 25% 50%, rgba(50,25,5,.5), transparent 2px),
    radial-gradient(circle 1.8px at 80% 40%, rgba(40,20,5,.55), transparent 2.5px),
    radial-gradient(circle 1.3px at 8% 70%, rgba(50,25,5,.5), transparent 2px),
    radial-gradient(circle 1.5px at 65% 75%, rgba(40,20,5,.5), transparent 2.2px),
    /* ciemniejsze brzegi - winieta */
    radial-gradient(ellipse at center,
      rgba(217,195,138,1) 20%,
      rgba(180,148,88,1) 60%,
      rgba(120,80,30,1) 90%,
      rgba(70,40,10,1) 100%),
    /* podstawowe tło */
    linear-gradient(180deg, var(--paper-1), var(--paper-2));
  box-shadow:
    inset 0 0 100px rgba(60,30,5,.45),
    inset 0 0 20px rgba(50,25,5,.55),
    inset 0 0 3px rgba(30,15,3,.7);
}

/* warstwa 1: podłużne włókna bambusa/ryżu */
.page::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* długie, pionowe linie jak włókna ryżu */
    repeating-linear-gradient(91deg,
      transparent 0 160px,
      rgba(70,40,10,.08) 160px 161px,
      transparent 161px 320px),
    repeating-linear-gradient(89deg,
      transparent 0 240px,
      rgba(50,28,8,.06) 240px 241px),
    /* nierówności rzeczywistego papieru */
    repeating-linear-gradient(2deg,
      transparent 0 22px,
      rgba(80,45,15,.04) 22px 23px),
    repeating-linear-gradient(-3deg,
      transparent 0 28px,
      rgba(70,40,12,.035) 28px 29px);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
}

/* warstwa 2: zagniecenia i fałdy */
.page > .page-inner::after,
.page-inner > .creases {
  display: none;
}

/* ciemny cień przy grzbiecie + dynamiczny cień na obrocie */
.leaf .front > .page-inner::before {
  /* kompletnie inaczej - obsługujemy przez zewnętrzny wrapper */
}

/* cień przy grzbiecie księgi (bez konfliktu z torn edges) */
.face.page {
  background-attachment: local;
}
.face.page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    /* cień od grzbietu (ciemny pasek przy zszywce) */
    linear-gradient(90deg,
      rgba(0,0,0,.55) 0,
      rgba(0,0,0,.2) 14px,
      rgba(0,0,0,0) 48px,
      rgba(0,0,0,0) 96%,
      rgba(0,0,0,.1) 100%);
}
.leaf .back.page::after {
  background: linear-gradient(-90deg,
      rgba(0,0,0,.55) 0,
      rgba(0,0,0,.2) 14px,
      rgba(0,0,0,0) 48px,
      rgba(0,0,0,0) 96%,
      rgba(0,0,0,.1) 100%);
}

/* cień ruchomy podczas flipa */
.leaf.flipping .face.page {
  filter: brightness(.92) contrast(1.05);
}

/* =========================================================
   WYPALENIA OD ISKIER NA KARTKACH
   Nieregularne kształty dzięki wielu nakładającym się
   gradientom z losowymi pozycjami + SVG displacement filter
   ========================================================= */
.face.page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  /* każda "dziura" = wiele małych gradientów ustawionych blisko siebie,
     później zniekształcamy wszystko filtrem turbulencji = nieregularna forma */
  background:
    /* WYPALENIE #1 - prawy górny róg (duża dziura + postrzępiony kontur) */
    radial-gradient(circle 22px at 94% 2%,  rgba(12,5,2,.85) 0%, rgba(12,5,2,.6) 40%, transparent 75%),
    radial-gradient(circle 28px at 97% 6%,  rgba(20,8,3,.75) 0%, rgba(20,8,3,.4) 50%, transparent 80%),
    radial-gradient(circle 18px at 91% 8%,  rgba(30,12,4,.7) 0%, rgba(30,12,4,.35) 45%, transparent 75%),
    radial-gradient(circle 12px at 98% 12%, rgba(25,10,3,.7) 0%, transparent 70%),
    /* pierścień zwęglenia wokół dziury #1 */
    radial-gradient(circle 45px at 95% 5%,  transparent 0%, transparent 55%, rgba(80,40,15,.45) 62%, rgba(110,55,20,.25) 75%, transparent 92%),
    radial-gradient(circle 55px at 96% 4%,  transparent 0%, transparent 68%, rgba(120,65,25,.25) 78%, transparent 95%),
    /* rozrzucone plamki sadzy dookoła #1 */
    radial-gradient(circle 5px at 86% 12%, rgba(30,12,4,.6) 0%, transparent 80%),
    radial-gradient(circle 3px at 83% 6%,  rgba(30,12,4,.5) 0%, transparent 80%),
    radial-gradient(circle 4px at 89% 18%, rgba(40,18,6,.55) 0%, transparent 85%),
    radial-gradient(circle 2px at 80% 14%, rgba(30,12,4,.55) 0%, transparent 90%),

    /* WYPALENIE #2 - mniejsze, przy prawej krawędzi środek */
    radial-gradient(circle 10px at 97% 46%, rgba(15,6,2,.85) 0%, rgba(15,6,2,.4) 50%, transparent 80%),
    radial-gradient(circle 14px at 99% 50%, rgba(25,10,3,.65) 0%, transparent 70%),
    radial-gradient(circle 8px  at 94% 52%, rgba(30,12,4,.6) 0%, transparent 75%),
    radial-gradient(circle 22px at 96% 48%, transparent 0%, transparent 60%, rgba(80,40,15,.35) 72%, transparent 92%),
    radial-gradient(circle 4px  at 90% 42%, rgba(30,12,4,.5) 0%, transparent 85%),
    radial-gradient(circle 3px  at 88% 56%, rgba(40,18,6,.5) 0%, transparent 90%),

    /* WYPALENIE #3 - osmolenie lewy dolny róg (plama, nie dziura) */
    radial-gradient(ellipse 60px 40px at 2% 94%, rgba(10,5,2,.65) 0%, rgba(30,14,5,.4) 40%, transparent 80%),
    radial-gradient(ellipse 80px 55px at 8% 98%, rgba(25,10,4,.4) 0%, rgba(60,30,10,.25) 50%, transparent 90%),
    radial-gradient(circle 8px at 16% 90%, rgba(30,12,4,.4) 0%, transparent 80%),
    radial-gradient(circle 5px at 22% 96%, rgba(30,12,4,.3) 0%, transparent 85%),

    /* delikatne osmolenie krawędzi */
    linear-gradient(90deg, transparent 88%, rgba(40,16,5,.2) 96%, rgba(20,8,3,.35) 100%),
    linear-gradient(180deg, rgba(25,10,4,.2) 0%, transparent 6%),
    linear-gradient(0deg,   rgba(25,10,4,.18) 0%, transparent 6%);
  mix-blend-mode: multiply;
  filter: url(#burn);
}

/* dodatkowa warstwa z pod-displacement dla jeszcze bardziej postrzępionego wyglądu */
.face.page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  /* tlący się pomarańczowy obrys wokół wypaleń - mocniej poszarpany */
  background:
    radial-gradient(circle 38px at 95% 5%,
      transparent 0%, transparent 55%,
      rgba(255,140,50,.5) 62%, rgba(255,100,30,.25) 72%, transparent 85%),
    radial-gradient(circle 18px at 97% 48%,
      transparent 0%, transparent 55%,
      rgba(255,130,40,.4) 65%, transparent 85%);
  mix-blend-mode: screen;
  filter: url(#burn2);
  animation: embPulse 3.5s ease-in-out infinite;
}

/* =========================================================
   WARIACJE — różne wzory wypaleń na różnych stronach
   ========================================================= */

/* TYLNE strony - wypalenia z drugiej strony (lustrzane + inaczej) */
.leaf .back.face.page::before {
  background:
    /* duża dziura lewy górny */
    radial-gradient(circle 20px at 6% 4%,  rgba(12,5,2,.85) 0%, transparent 80%),
    radial-gradient(circle 26px at 3% 8%,  rgba(20,8,3,.75) 0%, transparent 80%),
    radial-gradient(circle 16px at 9% 10%, rgba(30,12,4,.65) 0%, transparent 80%),
    radial-gradient(circle 10px at 2% 14%, rgba(25,10,3,.7) 0%, transparent 80%),
    radial-gradient(circle 42px at 5% 6%,  transparent 0%, transparent 55%, rgba(80,40,15,.45) 65%, transparent 92%),
    radial-gradient(circle 5px at 14% 12%, rgba(30,12,4,.6) 0%, transparent 85%),
    radial-gradient(circle 3px at 17% 6%,  rgba(30,12,4,.5) 0%, transparent 85%),
    radial-gradient(circle 4px at 11% 18%, rgba(40,18,6,.5) 0%, transparent 85%),

    /* mała dziura lewy środek-dół */
    radial-gradient(circle 9px  at 2% 68%,  rgba(15,6,2,.85) 0%, transparent 80%),
    radial-gradient(circle 13px at 5% 72%,  rgba(25,10,3,.6) 0%, transparent 80%),
    radial-gradient(circle 20px at 3% 70%,  transparent 0%, transparent 60%, rgba(80,40,15,.4) 72%, transparent 92%),
    radial-gradient(circle 3px  at 12% 76%, rgba(40,18,6,.5) 0%, transparent 90%),

    /* osmolenie prawy dolny */
    radial-gradient(ellipse 65px 45px at 98% 94%, rgba(10,5,2,.6) 0%, transparent 80%),
    radial-gradient(ellipse 85px 60px at 92% 98%, rgba(25,10,4,.35) 0%, transparent 85%),
    radial-gradient(circle 8px at 84% 92%, rgba(30,12,4,.4) 0%, transparent 85%),
    radial-gradient(circle 4px at 78% 96%, rgba(40,18,6,.35) 0%, transparent 90%),

    /* dodatkowa plamka pośrodku góry - przypadkowa */
    radial-gradient(circle 6px at 48% 3%, rgba(25,10,3,.55) 0%, transparent 80%),
    radial-gradient(circle 10px at 50% 5%, transparent 0%, transparent 55%, rgba(80,40,15,.3) 70%, transparent 90%),

    linear-gradient(-90deg, transparent 88%, rgba(40,16,5,.2) 96%, rgba(20,8,3,.35) 100%),
    linear-gradient(180deg, rgba(25,10,4,.18) 0%, transparent 6%),
    linear-gradient(0deg,   rgba(25,10,4,.2) 0%, transparent 6%);
  mix-blend-mode: multiply;
  filter: url(#burn2);
}

.leaf .back.face.page::after {
  background:
    radial-gradient(circle 36px at 5% 6%,
      transparent 0%, transparent 55%,
      rgba(255,140,50,.5) 62%, transparent 85%),
    radial-gradient(circle 16px at 3% 70%,
      transparent 0%, transparent 55%,
      rgba(255,130,40,.4) 65%, transparent 85%);
  filter: url(#burn);
}

/* Zróżnicowanie między konkretnymi stronami — używamy nth-child żeby każda
   kartka miała trochę inne rozmieszczenie wypaleń */
.leaf[data-leaf="1"] .front.face.page::before { transform: scale(1,-1); opacity: .9; }
.leaf[data-leaf="2"] .front.face.page::before { transform: scaleX(-1); }
.leaf[data-leaf="3"] .front.face.page::before { transform: rotate(180deg); }
.leaf[data-leaf="1"] .back.face.page::before  { transform: scaleY(-1); }
.leaf[data-leaf="2"] .back.face.page::before  { transform: rotate(180deg); opacity: .85; }
.leaf[data-leaf="3"] .back.face.page::before  { transform: scaleX(-1); }

@keyframes embPulse {
  0%,100% { opacity: .5; }
  50%     { opacity: 1; }
}

/* =========================================================
   OKŁADKA — stare drewno / skóra z poczerniałym złotem
   Matowa, pęknięta, żadnych błyszczących powierzchni
   ========================================================= */
.cover .cover-front,
.cover-back-face {
  background:
    /* plamy pleśni / śniedzi złota */
    radial-gradient(ellipse 260px 200px at 25% 30%, rgba(90,60,20,.2) 0%, transparent 60%),
    radial-gradient(ellipse 200px 140px at 80% 70%, rgba(70,40,15,.18) 0%, transparent 60%),
    radial-gradient(ellipse 140px 90px at 10% 85%, rgba(50,25,10,.25) 0%, transparent 65%),
    radial-gradient(ellipse 160px 100px at 90% 20%, rgba(40,20,5,.22) 0%, transparent 60%),
    /* kropki zniszczeń */
    radial-gradient(circle 2px at 20% 40%, rgba(0,0,0,.5), transparent 3px),
    radial-gradient(circle 1.5px at 65% 25%, rgba(0,0,0,.45), transparent 2px),
    radial-gradient(circle 2.5px at 85% 75%, rgba(0,0,0,.55), transparent 3.5px),
    radial-gradient(circle 1.2px at 42% 80%, rgba(0,0,0,.4), transparent 2px),
    radial-gradient(circle 1.8px at 30% 72%, rgba(0,0,0,.4), transparent 2.5px),
    radial-gradient(circle 1.2px at 58% 48%, rgba(0,0,0,.35), transparent 2px),
    /* faktura drewna/skóry - tylko tekstura, żadnych długich linii */
    repeating-linear-gradient(86deg, rgba(0,0,0,.08) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-5deg, rgba(255,180,80,.02) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(33deg, rgba(0,0,0,.04) 0 2px, transparent 2px 11px),
    /* podstawa - ciemne matowe drewno */
    radial-gradient(ellipse at 50% 40%, var(--wood-hi) 0%, var(--wood) 55%, var(--wood-lo) 100%);
  color: var(--gold-hi);
  box-shadow:
    inset 0 0 120px rgba(0,0,0,.85),
    inset 0 0 4px rgba(0,0,0,.9);
  border-radius: 1px 5px 5px 1px;
}
.cover-back-face { border-radius: 5px 1px 1px 5px; }

/* zdobiona ramka - stara i matowa */
.silk-border {
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(154,122,42,.45);
  box-shadow:
    inset 0 0 0 3px rgba(0,0,0,.4),
    inset 0 0 0 4px rgba(106,74,20,.35);
  pointer-events: none;
}

.cover-inner {
  position: absolute;
  inset: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* chińskie znaki w rogach - matowe, wyblakłe */
.chinese-corner {
  position: absolute;
  font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
  font-size: 32px;
  color: var(--gold);
  opacity: .55;
  z-index: 2;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  text-shadow: 0 1px 0 rgba(0,0,0,.7);
  filter: blur(.2px);
}
.chinese-corner.tl { top: 22px; left: 22px; }
.chinese-corner.tr { top: 22px; right: 22px; }
.chinese-corner.bl { bottom: 22px; left: 22px; }
.chinese-corner.br { bottom: 22px; right: 22px; }

/* smok/wzór na tle okładki */
.dragon-watermark {
  position: absolute;
  inset: 10%;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  z-index: 0;
}
.dragon-watermark svg {
  width: 100%; height: 100%;
  opacity: .5;
  filter: blur(.3px);
}

/* logo ElderMT2 */
.cover-logo {
  position: relative;
  z-index: 2;
  margin-bottom: 14px;
}
.cover-logo img {
  width: min(340px, 68%);
  height: auto;
  opacity: .88;
  /* obraz jest już przerobiony na złoto przez canvas -
     dodajemy emboss przez wiele drop-shadow (wytłoczenie w skórze) */
  filter:
    drop-shadow(0 -1px 0 rgba(0,0,0,.95))
    drop-shadow(-1px 0 0 rgba(0,0,0,.6))
    drop-shadow(0 1px 0 rgba(255,210,130,.25))
    drop-shadow(1px 1px 0 rgba(255,190,100,.12))
    drop-shadow(0 3px 6px rgba(0,0,0,.7))
    drop-shadow(0 0 18px rgba(0,0,0,.45));
  mix-blend-mode: normal;
}

/* =========================================================
   UNIWERSALNY STYL "RYTU" DLA OBRAZÓW W KSIĘDZE
   Obrazy są preprocesowane przez canvas w book.js (klasa .engraved),
   tutaj CSS dokłada blend-mode aby wtopić je w papier/skórę.
   ========================================================= */
.book img {
    /* fallback gdy canvas pre-processing się nie powiedzie (np. CORS) */
    filter: none;
}
.book img.engraved {
  /* gdy obraz już jest ciemny-sepia, zdejmujemy filter */
  filter: none;
}

/* na stronach papirusu - multiply przyciemnia papier w miejscu rysunku */
.page .page-inner img {
  mix-blend-mode: multiply;
  opacity: .92;
}

/* figura z podpisem - ilustracja wpuszczona w papirus */
.plate {
  margin: 14px 0;
  padding: 0;
  text-align: center;
  position: relative;
}
.plate img {
  display: block;
  max-width: 92%;
  margin: 0 auto;
  /* lekka ramka rytownicza */
  border: 1px solid rgba(90,50,20,.35);
  padding: 4px;
  background: rgba(120,70,20,.05);
  box-shadow:
    inset 0 0 0 1px rgba(255,220,160,.2),
    0 1px 3px rgba(50,20,5,.3);
}
.plate figcaption {
  margin-top: 6px;
  font-family: 'IM Fell English', 'EB Garamond', serif;
  font-style: italic;
  font-size: .92em;
  color: rgba(74,45,20,.85);
  letter-spacing: .02em;
}

/* na okładce (ciemna skóra) - złote kolory już ustalone przez canvas,
   pokazujemy normalnie, emboss przez drop-shadow w .cover-logo img */
.cover-front img,
.cover-back-face img {
  mix-blend-mode: normal;
  opacity: .88;
}

.cover-sub {
  position: relative;
  z-index: 2;
  font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
  letter-spacing: .3em;
  font-size: clamp(17px, 2vw, 25px);
  color: var(--gold);
  margin-top: 4px;
  text-shadow: 0 1px 0 rgba(0,0,0,.7);
  opacity: .75;
}
.cover-sub-pl {
  position: relative;
  z-index: 2;
  font-family: 'ZCOOL XiaoWei', 'EB Garamond', serif;
  letter-spacing: .28em;
  font-size: clamp(12px, 1.3vw, 16px);
  color: rgba(201,168,90,.6);
  margin-top: 10px;
  text-transform: uppercase;
  font-weight: 400;
}

/* pieczęć - rzucona, zatarta */
.cover-seal {
  position: relative;
  z-index: 2;
  margin-top: 22px;
  font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
  font-weight: 900;
  font-size: 26px;
  width: 56px; height: 56px;
  line-height: 56px;
  color: #e4c78a;
  background:
    repeating-linear-gradient(23deg, rgba(0,0,0,.15) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-40deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, var(--seal) 0%, var(--seal-dk) 100%);
  border: 2px solid var(--seal-dk);
  box-shadow:
    inset 0 0 12px rgba(0,0,0,.55),
    0 1px 3px rgba(0,0,0,.7);
  transform: rotate(-6deg);
  opacity: .9;
}
.cover-seal.big { font-size: 38px; width: 82px; height: 82px; line-height: 82px; margin-top: 32px; }
.cover-seal.small { font-size: 18px; width: 42px; height: 42px; line-height: 42px; margin: 6px auto; }

.cover-foot {
  position: absolute;
  bottom: 8px; left: 0; right: 0;
  font-family: 'IM Fell English', serif;
  font-style: italic;
  color: rgba(154,122,42,.6);
  font-size: 13px;
  letter-spacing: .1em;
  animation: pulse 3.2s ease-in-out infinite;
  z-index: 2;
}
@keyframes pulse { 0%,100% { opacity: .35; } 50% { opacity: .85; } }

/* =========================================================
   TREŚĆ STRON
   ========================================================= */
.page-inner {
  position: relative;
  height: 100%;
  padding: 58px 58px 58px 46px;
  display: flex;
  flex-direction: column;
  z-index: 4;
}
.leaf .back .page-inner { padding: 58px 46px 58px 58px; }

.page-inner h2 {
  font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
  font-weight: 700;
  font-size: 2.3em;
  margin: 0 0 14px 0;
  color: var(--ink-red);
  letter-spacing: .05em;
  padding-bottom: 10px;
  position: relative;
}
.page-inner h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 65%;
  height: 2px;
  background:
    linear-gradient(90deg,
      var(--ink-red) 0%,
      var(--ink-red) 40%,
      rgba(90,20,8,.5) 75%,
      transparent 100%);
  border-radius: 1px;
  filter: blur(.3px);
}
.page-inner h2.sub {
  font-size: 1.9em;
  margin-bottom: 14px;
}

.chapter-tag {
  font-family: 'Ma Shan Zheng', 'ZCOOL XiaoWei', serif;
  letter-spacing: .2em;
  font-size: 14px;
  color: var(--gold-lo);
  margin-bottom: 4px;
  opacity: .85;
}

.page-inner p {
  font-size: 1.12em;
  line-height: 1.75;
  margin: 0 0 12px;
  color: var(--ink-soft);
  text-align: justify;
  font-family: 'EB Garamond', 'Noto Serif SC', serif;
}

.drop-cap {
  float: left;
  font-family: 'Ma Shan Zheng', serif;
  font-weight: 900;
  font-size: 3.8em;
  line-height: .9;
  padding: 3px 12px 0 0;
  color: var(--ink-red);
  /* matowa, nieco rozmyta - jak tusz na papierze ryżowym */
  text-shadow: 0 0 2px rgba(106,20,8,.3);
  filter: blur(.15px);
}

.quote {
  font-style: italic;
  font-family: 'IM Fell English', 'Noto Serif SC', serif;
  padding: 12px 22px;
  border-left: 3px solid var(--ink-red);
  background: rgba(90,20,8,.05);
  margin: 14px 0 !important;
  position: relative;
  color: var(--ink-brown);
}
.quote::before {
  content: "「";
  position: absolute;
  top: -10px; left: 2px;
  font-size: 32px; color: var(--ink-red); opacity: .45;
  font-family: 'Ma Shan Zheng', serif;
}
.quote .att {
  display: block;
  margin-top: 6px;
  font-size: .9em;
  color: var(--gold-lo);
  font-style: italic;
}

.runes {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}
.runes li {
  position: relative;
  padding: 7px 0 7px 26px;
  font-size: 1.05em;
  line-height: 1.5;
  color: var(--ink-soft);
  border-bottom: 1px dashed rgba(70,40,15,.22);
}
.runes li:last-child { border-bottom: none; }
.runes li::before {
  content: "·";
  position: absolute;
  left: 6px; top: 2px;
  color: var(--ink-red);
  font-size: 1.8em;
  font-weight: 900;
}

.class-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.class-card {
  padding: 12px;
  border: 1px solid rgba(90,20,8,.25);
  background: rgba(120,70,20,.06);
  text-align: center;
  position: relative;
}
.class-card::before {
  content: "";
  position: absolute; inset: 3px;
  border: 1px solid rgba(90,20,8,.12);
  pointer-events: none;
}
.class-sigil {
  font-family: 'Ma Shan Zheng', serif;
  font-size: 32px;
  color: var(--ink-red);
  line-height: 1;
  margin-bottom: 4px;
}
.class-name {
  font-family: 'ZCOOL XiaoWei', serif;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink);
  font-size: 1.05em;
}
.class-line {
  font-style: italic;
  font-size: .9em;
  color: rgba(74,42,18,.75);
  margin-top: 2px;
}

.page-title { align-items: center; text-align: center; justify-content: center; }
.page-title h2 { text-align: center; }
.page-title h2::after { left: 17.5%; width: 65%; background: linear-gradient(90deg, transparent 0%, var(--ink-red) 30%, var(--ink-red) 70%, transparent 100%); }
.page-title p { text-align: center; }
.page-title .small { font-size: .9em; color: var(--gold-lo); font-style: italic; }

/* ogromny wyblakły znak chiński w tle */
.vertical-chi {
  font-family: 'Long Cang', 'Ma Shan Zheng', serif;
  font-size: 160px;
  color: rgba(90,20,8,.08);
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  font-weight: 900;
}

/* pieczęć czerwona - zatarta, przekrzywiona */
.stamp {
  position: absolute;
  font-family: 'Ma Shan Zheng', serif;
  font-weight: 900;
  font-size: 26px;
  width: 50px; height: 50px;
  line-height: 50px;
  text-align: center;
  color: #f0dcaa;
  background:
    repeating-linear-gradient(23deg, rgba(0,0,0,.18) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-40deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, var(--seal) 0%, var(--seal-dk) 100%);
  border: 2px solid var(--seal-dk);
  box-shadow: inset 0 0 8px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.5);
  transform: rotate(-8deg);
  opacity: .88;
  z-index: 5;
}
.stamp.tr { top: 44px; right: 44px; }
.stamp.bl { bottom: 70px; left: 44px; transform: rotate(6deg); }
.stamp.br { bottom: 70px; right: 44px; }

.filigree {
  width: 55%;
  height: 12px;
  margin: 4px auto;
  background:
    linear-gradient(90deg, transparent, var(--gold-lo), transparent) center / 100% 1px no-repeat,
    radial-gradient(circle, var(--gold-lo) 1.5px, transparent 2px) center / 12px 12px no-repeat;
  opacity: .55;
}

.folio {
  position: absolute;
  bottom: 20px;
  left: 0; right: 0;
  text-align: center;
  font-family: 'Ma Shan Zheng', serif;
  font-style: italic;
  color: rgba(106,74,20,.75);
  font-size: 16px;
  letter-spacing: .3em;
  z-index: 5;
}

/* =========================================================
   STANY KSIĘGI
   ========================================================= */
.book[data-state="closed"] {
  transform: translateX(-25%) rotateX(14deg) rotateY(-6deg);
}
.book[data-state="closed"][data-side="back"] {
  transform: translateX(25%) rotateX(14deg) rotateY(6deg);
}
.book[data-state="closed"] .cover .front { cursor: pointer; }

/* krawędzie stron z boku zamkniętej książki */
.book[data-state="closed"] .spine { opacity: 0; }
.book[data-state="closed"][data-side="front"] .cover .front {
  box-shadow:
    inset 0 0 120px rgba(0,0,0,.85),
    inset 0 0 4px rgba(0,0,0,.9),
    8px 0 0 -2px #ba9a62,
    10px 0 0 -3px #8a6a36,
    12px 0 0 -4px #5a4218,
    14px 0 0 -5px #3a2812,
    0 0 30px rgba(0,0,0,.7);
}
.book[data-state="closed"][data-side="back"] .back-cover .back {
  box-shadow:
    inset 0 0 120px rgba(0,0,0,.85),
    inset 0 0 4px rgba(0,0,0,.9),
    -8px 0 0 -2px #ba9a62,
    -10px 0 0 -3px #8a6a36,
    -12px 0 0 -4px #5a4218,
    -14px 0 0 -5px #3a2812,
    0 0 30px rgba(0,0,0,.7);
}

/* ---------- z-index fallback ---------- */
.leaf[data-leaf="0"] { z-index: 100; }
.leaf[data-leaf="1"] { z-index: 99; }
.leaf[data-leaf="2"] { z-index: 98; }
.leaf[data-leaf="3"] { z-index: 97; }
.leaf[data-leaf="4"] { z-index: 96; }

/* =========================================================
   HINT + CONTROLS
   ========================================================= */
.hint {
  color: rgba(201,168,90,.55);
  font-family: 'IM Fell English', serif;
  font-style: italic;
  letter-spacing: .12em;
  font-size: 13px;
  user-select: none;
}
.key {
  display: inline-block;
  padding: 1px 8px;
  margin: 0 3px;
  border: 1px solid rgba(201,168,90,.25);
  border-radius: 2px;
  background: rgba(0,0,0,.45);
  color: #c9a85a;
}

.controls {
  display: flex;
  align-items: center;
  gap: 22px;
}
.ctl {
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(154,122,42,.4);
  background:
    radial-gradient(circle at 30% 30%, rgba(180,100,50,.1), transparent 60%),
    linear-gradient(160deg, #1e0604, #0a0302);
  color: var(--gold-hi);
  font-size: 26px; line-height: 1;
  cursor: pointer;
  transition: transform .2s, box-shadow .3s;
  font-family: 'Ma Shan Zheng', serif;
}
.ctl:hover { transform: translateY(-2px); box-shadow: 0 0 14px rgba(180,80,40,.3); }
.ctl:disabled { opacity: .3; cursor: not-allowed; transform: none; }

.progress {
  width: 150px;
  height: 2px;
  background: rgba(201,168,90,.15);
  overflow: hidden;
}
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--ink-red), var(--gold));
  transition: width .6s cubic-bezier(.2,.7,.2,1);
}

.leaf .face { cursor: pointer; }

/* =========================================================
   TOOLTIP W STYLU METIN2
   Pokazuje się po najechaniu na element z data-tip-title/desc
   ========================================================= */
.mt2-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  min-width: 170px;
  max-width: 300px;
  padding: 0;
  background: none;
  color: #e8d8b0;
  font-family: 'EB Garamond', 'Noto Serif SC', serif;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.9));
}
.mt2-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}

/* wewnętrzna "skorupa" tooltipa - dwie warstwy z dziurą w kolorze */
.mt2-tooltip .tip-frame {
  position: relative;
  padding: 2px;
  background:
    linear-gradient(180deg, #a07840 0%, #7a5028 40%, #5a3818 100%);
  border-radius: 7px;
  box-shadow:
    inset 0 0 0 1px rgba(255,200,120,.25),
    inset 0 0 0 2px rgba(0,0,0,.5);
}
.mt2-tooltip .tip-inner {
  padding: 8px 12px 9px;
  background:
    /* subtelna tekstura drewna */
    repeating-linear-gradient(2deg, transparent 0 4px, rgba(0,0,0,.08) 4px 5px),
    linear-gradient(180deg, #3a2416 0%, #2a1810 55%, #1e1008 100%);
  border-radius: 5px;
  box-shadow:
    inset 0 0 18px rgba(0,0,0,.7),
    inset 0 0 2px rgba(0,0,0,.9);
}

.mt2-tooltip .tip-title {
  font-weight: 700;
  font-size: 14px;
  color: #ffd680;
  margin-bottom: 3px;
  letter-spacing: .02em;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(0,0,0,.95), 0 0 6px rgba(255,180,80,.25);
  font-family: 'Cinzel', 'EB Garamond', serif;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255,180,80,.2);
}
.mt2-tooltip .tip-desc {
  font-size: 12.5px;
  color: #c8b48c;
  line-height: 1.4;
  text-shadow: 0 1px 0 rgba(0,0,0,.9);
  white-space: pre-wrap;
}
.mt2-tooltip .tip-meta {
  margin-top: 5px;
  padding-top: 4px;
  border-top: 1px dashed rgba(255,180,80,.18);
  font-size: 11px;
  font-style: italic;
  color: rgba(255,200,120,.55);
  letter-spacing: .02em;
}

/* wskaźnik że obraz jest interaktywny */
.page-inner img[data-tip-title],
.page-inner [data-tip-title] {
  cursor: help;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 720px) {
  :root { --book-w: 96vw; --book-h: 62vh; }
  .page-inner, .leaf .back .page-inner { padding: 28px 22px; font-size: .9em; }
  .cover-inner { inset: 28px; }
  .class-grid { grid-template-columns: 1fr; }
  .cover-logo img { width: 80%; }
  .vertical-chi { font-size: 100px; }
}