:root {
  --gold: #b88732;
  --gold-dark: #7d561c;
  --paper: #f6eee6;
  --bg-a: #fbf4ec;
  --bg-b: #ead8c4;
  --shadow: rgba(47, 31, 13, 0.28);
  --radius: clamp(12px, 1.8vw, 24px);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

html {
  background: var(--bg-b);
}

body {
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.9), transparent 34rem),
    radial-gradient(circle at 86% 18%, rgba(184,136,50,.18), transparent 30rem),
    linear-gradient(140deg, var(--bg-a), var(--bg-b) 52%, #f8efe6);
  -webkit-tap-highlight-color: transparent;
}

button {
  appearance: none;
  border: 0;
  padding: 0;
  font: inherit;
}

.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  overflow: hidden;
}

.book-shell {
  width: min(96vw, calc((100vh - 24px) * 1.333333), 1420px);
  aspect-ratio: 4 / 3;
  perspective: 2600px;
  user-select: none;
  touch-action: pan-y;
}

.book {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  filter: drop-shadow(0 34px 46px var(--shadow));
}

.book::before,
.book::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 0;
  background: linear-gradient(140deg, #fffaf4, var(--paper));
  border: 1px solid rgba(184,136,50,.28);
  box-shadow: inset 0 0 26px rgba(115,72,24,.08);
}

.book::before {
  left: 0;
  border-radius: var(--radius) 0 0 var(--radius);
}

.book::after {
  right: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.gutter {
  position: absolute;
  z-index: 800;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 34px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.24), rgba(0,0,0,.08) 34%, transparent 70%);
  opacity: .46;
}

.paper {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 780ms cubic-bezier(.2,.78,.18,1);
  will-change: transform;
}

.paper.flipped {
  transform: rotateY(-180deg);
}

.paper.turning {
  z-index: 2000 !important;
}

.face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid rgba(184,136,50,.26);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.front {
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: inset 13px 0 24px rgba(67,41,16,.05), 10px 0 18px rgba(50,30,10,.12);
}

.back {
  transform: rotateY(180deg);
  border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: inset -13px 0 24px rgba(67,41,16,.05), -10px 0 18px rgba(50,30,10,.1);
}

.page-wrap,
.phone-page {
  position: relative;
  width: 100%;
  height: 100%;
}

.page-wrap img,
.phone-page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.blank {
  width: 100%;
  height: 100%;
  background: linear-gradient(140deg, #fffaf4, #f1e3d3);
}

.hotspot,
.phone-hotspots a {
  position: absolute;
  z-index: 20;
  display: block;
  text-decoration: none;
  background: transparent;
  outline: none;
  border-radius: 10px;
  cursor: pointer;
}

.hotspot:focus-visible,
.phone-hotspots a:focus-visible {
  box-shadow: 0 0 0 3px rgba(184,136,50,.55);
  background: rgba(184,136,50,.08);
}

.arrow {
  position: fixed;
  z-index: 5000;
  top: 50%;
  width: clamp(42px, 4.8vw, 64px);
  height: clamp(42px, 4.8vw, 64px);
  transform: translateY(-50%);
  border-radius: 999px;
  color: white;
  background: linear-gradient(145deg, rgba(190,143,55,.95), rgba(125,86,28,.95));
  box-shadow: 0 15px 34px rgba(75,48,18,.26);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 5vw, 58px);
  line-height: .82;
  cursor: pointer;
  transition: transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease;
}

.arrow:hover:not(:disabled) {
  transform: translateY(-50%) scale(1.045);
  box-shadow: 0 18px 40px rgba(75,48,18,.32);
}

.arrow:active:not(:disabled) {
  transform: translateY(-50%) scale(.97);
}

.arrow:disabled {
  opacity: .28;
  cursor: default;
}

.arrow-left { left: clamp(8px, 2vw, 28px); }
.arrow-right { right: clamp(8px, 2vw, 28px); }

.phone-shell {
  display: none;
}

@media (max-width: 820px) {
  body {
    overflow: hidden;
    background:
      radial-gradient(circle at 20% 5%, rgba(255,255,255,.9), transparent 22rem),
      linear-gradient(150deg, #fbf3eb, #ead7c3);
  }

  .book-shell {
    display: none;
  }

  .phone-shell {
    display: grid;
    place-items: center;
    width: min(94vw, calc((100vh - 22px) * .666667));
    aspect-ratio: 2 / 3;
    max-height: calc(100vh - 22px);
    perspective: 1500px;
    user-select: none;
    touch-action: pan-y;
  }

  .phone-page {
    overflow: hidden;
    border-radius: 18px;
    background: var(--paper);
    box-shadow: 0 24px 38px rgba(55,37,15,.28);
    transform-origin: center center;
    will-change: transform, opacity, filter;
  }

  .phone-page.next-out {
    animation: nextOut 210ms ease forwards;
  }

  .phone-page.next-in {
    animation: nextIn 260ms ease forwards;
  }

  .phone-page.prev-out {
    animation: prevOut 210ms ease forwards;
  }

  .phone-page.prev-in {
    animation: prevIn 260ms ease forwards;
  }

  .arrow {
    width: 42px;
    height: 42px;
    font-size: 38px;
    top: auto;
    bottom: max(14px, env(safe-area-inset-bottom));
    transform: none;
    background: linear-gradient(145deg, rgba(190,143,55,.88), rgba(125,86,28,.88));
  }

  .arrow:hover:not(:disabled),
  .arrow:active:not(:disabled) {
    transform: none;
  }

  .arrow-left { left: max(12px, env(safe-area-inset-left)); }
  .arrow-right { right: max(12px, env(safe-area-inset-right)); }
}

@keyframes nextOut {
  to { transform: translateX(-12px) rotateY(-25deg) scale(.985); opacity: .55; filter: brightness(.96); }
}

@keyframes nextIn {
  from { transform: translateX(14px) rotateY(18deg) scale(.988); opacity: .58; filter: brightness(.96); }
  to { transform: translateX(0) rotateY(0) scale(1); opacity: 1; filter: brightness(1); }
}

@keyframes prevOut {
  to { transform: translateX(12px) rotateY(25deg) scale(.985); opacity: .55; filter: brightness(.96); }
}

@keyframes prevIn {
  from { transform: translateX(-14px) rotateY(-18deg) scale(.988); opacity: .58; filter: brightness(.96); }
  to { transform: translateX(0) rotateY(0) scale(1); opacity: 1; filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}