/* Layout: one book, full-screen on a phone, dark velvet ground so the pages glow. Single deliberate look (no light/dark swap). */
:root{
  --ground:#2b1520;
  --ground-2:#46202f;
  --ink:#fbeef2;
  --ink-soft:#d9b3c1;
  --paper:#fbf6f1;
  --blush:#ff8fb1;
  --ui:"Mali","Comic Sans MS","Segoe Print",system-ui,sans-serif;
  color-scheme:dark;
}
html,body{height:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);font-family:var(--ui);
  background-image:radial-gradient(120% 80% at 50% 40%,var(--ground-2) 0%,var(--ground) 70%);
  overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;touch-action:none;
}
.stage{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding-inline:16px;box-sizing:border-box}
.book{
  --w:min(calc(100vw - 32px),calc((100dvh - 110px) / 1.5),520px);
  width:var(--w);aspect-ratio:2/3;max-width:100%;position:relative;
}
/* drop shadow under the closed book */
.book::before{content:"";position:absolute;inset:0;border-radius:4px 10px 10px 4px;box-shadow:0 22px 50px -12px rgba(0,0,0,.65),0 6px 14px rgba(0,0,0,.35);z-index:0}

/* Each leaf is one page. Turning folds it from the right edge towards the spine:
   the front is clipped at the fold line, the flap is the paper's reverse lying on top,
   and a soft shadow falls on the page underneath. */
.leaf{position:absolute;inset:0;z-index:var(--z);overflow:hidden;border-radius:3px 9px 9px 3px}
.leaf.gone{visibility:hidden}
.front{position:absolute;inset:0;background:var(--paper);will-change:clip-path}
.front img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
/* gutter shading on every page */
.front::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.06) 3%,transparent 7%,transparent 94%,rgba(255,255,255,.08) 100%)}
.hard{border-radius:4px 12px 12px 4px}
.hard .front::after{background:linear-gradient(90deg,rgba(0,0,0,.35) 0%,rgba(255,255,255,.12) 2.2%,transparent 5%,transparent 97%,rgba(0,0,0,.15) 100%)}

.flap,.cast{position:absolute;top:0;bottom:0;left:0;pointer-events:none;visibility:hidden;will-change:transform}
.turning .flap,.turning .cast{visibility:visible}
.flap{
  width:0;border-radius:9px 0 0 9px;
  background:linear-gradient(90deg,#e9ded5 0%,#f6efe8 30%,#fdf9f5 70%,#fffdfb 88%,#e4d8ce 100%);
  box-shadow:-4px 0 14px rgba(0,0,0,.25);
}
.hard .flap{background:linear-gradient(90deg,#d97a98 0%,#ef9fb8 55%,#f6b4c8 85%,#cf6f8e 100%)}
.cast{width:44px;background:linear-gradient(90deg,rgba(0,0,0,.32),rgba(0,0,0,.1) 40%,rgba(0,0,0,0))}

.bar{display:flex;align-items:center;gap:18px;padding-bottom:env(safe-area-inset-bottom,0px)}
.bar button{
  font:600 22px/1 var(--ui);color:var(--ink);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  width:44px;height:44px;border-radius:50%;cursor:pointer;display:grid;place-items:center;transition:opacity .2s,background .2s;
}
.bar button:active{background:rgba(255,255,255,.18)}
.bar button:disabled{opacity:.25}
.bar button:focus-visible{outline:2px solid var(--blush);outline-offset:3px}
.count{font-size:15px;color:var(--ink-soft);min-width:5.5em;text-align:center;font-variant-numeric:tabular-nums}
.hint{position:absolute;right:10px;bottom:12px;z-index:1000;font-size:13px;color:#fff;background:rgba(43,21,32,.72);
  padding:7px 12px;border-radius:99px;pointer-events:none;transition:opacity .4s;display:flex;gap:6px;align-items:center}
.hint.off{opacity:0}
.hint span{display:inline-block;animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
@media (prefers-reduced-motion:reduce){.hint span{animation:none}}

.home-link{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);left:calc(env(safe-area-inset-left,0px) + 10px);z-index:1001;
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;font-size:13px;color:#fff;
  background:rgba(43,21,32,.72);text-decoration:none;touch-action:manipulation}
.home-link:focus-visible{outline:2px solid var(--blush);outline-offset:3px}