:root{
  --gold:#e4bd63;
  --gold2:#fff0b8;
  --paper:#f4e4c2;
  --deep:#120805;
  --wine:#1c0d07;
}
*{box-sizing:border-box}
html,body{
  margin:0;width:100%;height:100%;overflow:hidden;
  background:
    radial-gradient(circle at 50% 18%,rgba(230,177,82,.22),transparent 34%),
    linear-gradient(180deg,#251307,#100704 72%,#070302);
  font-family:Georgia,"Times New Roman",serif;color:var(--paper);
  overscroll-behavior:none;-webkit-text-size-adjust:100%;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 50%,transparent 50%,rgba(0,0,0,.46) 100%),
    linear-gradient(90deg,rgba(255,255,255,.035),transparent 16%,transparent 84%,rgba(255,255,255,.035));
}
.app{position:relative;width:100vw;height:100svh;display:grid;place-items:center;overflow:hidden}
.book{
  position:relative;width:min(100vw,540px);height:100svh;max-height:940px;overflow:hidden;
  background:#100604;border-radius:clamp(0px,2.4vw,26px);
  box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 0 1px rgba(255,232,168,.12);
}
.chapter-frame{
  position:absolute;inset:0;width:100%;height:100%;border:0;background:#100604;
  opacity:1;transform:scale(1);
  transition:opacity .72s ease,transform .9s cubic-bezier(.22,1,.36,1),filter .9s ease;
}
.book.transitioning .chapter-frame{opacity:.12;transform:scale(1.035);filter:blur(6px) brightness(1.18)}
.cover{
  position:absolute;inset:0;z-index:100;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 36%,rgba(255,232,156,.20),transparent 36%),
             linear-gradient(180deg,#2b170a,#110704 74%);
  transition:opacity .8s ease,visibility .8s ease;
}
.cover.hide{opacity:0;visibility:hidden}
.cover-card{
  width:min(84%,380px);padding:38px 28px;text-align:center;border-radius:30px;
  border:1px solid rgba(255,230,160,.24);background:rgba(22,10,5,.56);
  box-shadow:0 24px 80px rgba(0,0,0,.52),inset 0 0 60px rgba(255,232,170,.05);
  backdrop-filter:blur(16px);
}
.cover-card .eyebrow{margin:0 0 12px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,231,170,.74)}
.cover-card h1{margin:0;font-size:clamp(36px,9vw,58px);line-height:1.06;font-weight:400;color:#ffe7aa}
.cover-card p{margin:14px auto 0;max-width:280px;color:rgba(255,235,190,.76);line-height:1.45}
.enter{
  margin-top:26px;border:1px solid rgba(255,231,170,.68);border-radius:999px;padding:14px 22px;
  background:linear-gradient(90deg,rgba(78,45,17,.92),rgba(172,113,38,.92),rgba(78,45,17,.92));
  color:#fff0c8;font-family:Georgia,"Times New Roman",serif;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;box-shadow:0 12px 34px rgba(0,0,0,.34),0 0 28px rgba(229,184,88,.18);
}
.enter:active{transform:scale(.97)}
.top{
  position:absolute;left:0;right:0;top:0;z-index:50;display:flex;align-items:flex-start;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 0;pointer-events:none;
}
.back{
  pointer-events:auto;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,230,160,.48);
  background:rgba(18,8,4,.54);color:#ffe7aa;display:grid;place-items:center;cursor:pointer;
  backdrop-filter:blur(10px);box-shadow:0 12px 32px rgba(0,0,0,.28);
  opacity:0;transform:translateX(-6px);transition:opacity .5s ease,transform .5s ease;font-size:30px;line-height:1;
}
.back.show{opacity:1;transform:translateX(0)}
.pill{
  max-width:72%;padding:9px 12px;border-radius:999px;border:1px solid rgba(255,230,160,.18);
  background:rgba(18,8,4,.48);backdrop-filter:blur(10px);box-shadow:0 12px 32px rgba(0,0,0,.26);
}
.pill strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ffe7aa;font-size:11px;letter-spacing:.13em;text-transform:uppercase}
.pill span{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,235,190,.66);font-size:10px}
.progress{
  position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);transform:translateX(-50%);
  z-index:55;display:flex;gap:8px;padding:8px 12px;border-radius:999px;
  border:1px solid rgba(255,230,160,.16);background:rgba(18,8,4,.40);backdrop-filter:blur(10px);
}
.dot{width:7px;height:7px;border-radius:50%;background:rgba(255,232,168,.28);transition:.45s ease}
.dot.active{background:#f4d98c;box-shadow:0 0 14px rgba(255,219,122,.75)}
.diamond{
  position:absolute;z-index:60;right:max(14px,3.6vw);top:50%;width:62px;height:62px;
  transform:translateY(-50%) rotate(45deg) scale(.84);opacity:0;pointer-events:none;
  border:1px solid rgba(255,238,178,.96);
  background:radial-gradient(circle at 30% 24%,rgba(255,255,240,.98),transparent 18%),
             linear-gradient(135deg,rgba(255,226,126,.98),rgba(158,94,28,.96) 52%,rgba(255,230,142,.98));
  box-shadow:0 0 22px rgba(255,216,105,.52),0 0 60px rgba(255,196,70,.38),0 16px 38px rgba(0,0,0,.42),inset 0 0 18px rgba(255,255,220,.38);
  cursor:pointer;transition:opacity .65s ease,transform .45s cubic-bezier(.22,1,.36,1);
}
.diamond.show{opacity:1;pointer-events:auto;animation:sparkle 2.35s ease-in-out infinite}
.diamond span{position:absolute;inset:0;display:grid;place-items:center;transform:rotate(-45deg);color:#5d330d;font-size:25px;text-shadow:0 1px 0 rgba(255,244,190,.9)}
.diamond:before{
  content:"";position:absolute;inset:-14px;border-radius:10px;opacity:0;
  background:linear-gradient(90deg,transparent 34%,rgba(255,255,230,.9),transparent 66%);
  transform:translateX(-70%);
}
.diamond.show:before{animation:glint 2.7s ease-in-out infinite}
.label{
  position:absolute;z-index:59;right:calc(max(14px,3.6vw) + 76px);top:50%;transform:translateY(-50%);
  color:rgba(255,238,190,.96);font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 2px 14px rgba(0,0,0,.8);
  opacity:0;pointer-events:none;transition:opacity .65s ease;
}
.label.show{opacity:1}
@keyframes sparkle{
  0%,100%{box-shadow:0 0 22px rgba(255,216,105,.52),0 0 60px rgba(255,196,70,.38),0 16px 38px rgba(0,0,0,.42),inset 0 0 18px rgba(255,255,220,.38)}
  50%{box-shadow:0 0 34px rgba(255,235,150,.82),0 0 84px rgba(255,196,70,.56),0 18px 44px rgba(0,0,0,.44),inset 0 0 28px rgba(255,255,230,.56)}
}
@keyframes glint{0%,58%,100%{opacity:0;transform:translateX(-70%)}68%{opacity:1}82%{opacity:0;transform:translateX(70%)}}
.turn{
  position:absolute;z-index:70;inset:-8%;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 0 38%,rgba(255,244,202,.28) 48%,rgba(92,48,14,.48) 56%,transparent 74%),
             radial-gradient(ellipse at 0% 50%,rgba(255,230,160,.24),transparent 55%);
  transform:translateX(-68%) skewX(-9deg);
}
.turn.play{animation:pageTurn 1.12s cubic-bezier(.22,1,.36,1) forwards}
@keyframes pageTurn{0%{opacity:0;transform:translateX(-70%) skewX(-9deg)}18%{opacity:.95}100%{opacity:0;transform:translateX(72%) skewX(-9deg)}}
.wash{
  position:absolute;z-index:69;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,rgba(255,241,190,.96),rgba(224,170,73,.50) 30%,rgba(23,10,4,.78) 100%);
}
.wash.play{animation:wash 1.05s ease forwards}
@keyframes wash{0%{opacity:0}38%{opacity:.90}100%{opacity:0}}
.note{
  position:absolute;z-index:65;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 56px);transform:translateX(-50%) translateY(8px);
  min-width:220px;max-width:82%;text-align:center;padding:10px 14px;border-radius:999px;
  border:1px solid rgba(255,230,160,.18);background:rgba(18,8,4,.46);backdrop-filter:blur(10px);
  color:rgba(255,238,190,.90);font-size:10px;letter-spacing:.11em;text-transform:uppercase;opacity:0;
  transition:opacity .62s ease,transform .62s ease;pointer-events:none;
}
.note.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:700px){
  .book{width:100vw;height:100svh;border-radius:0}
  .diamond{right:12px;width:52px;height:52px}
  .diamond span{font-size:22px}
  .label{right:72px;font-size:10px}
}