:root {
  --bg: #0a0d10;
  --panel: #11161b;
  --line: #d97817;
  --text: #eeeeee;
  --muted: #9da5ad;
  --book-w: 1240px;
  --page-w: 600px;
  --page-h: 776px;
  --turn-time: 720ms;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 35%, rgba(217,120,23,.08), transparent 38%),
    var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}

.viewer {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 18px 20px;
}

.viewer-header { text-align: center; margin-bottom: 14px; }
.viewer-header h1 {
  margin: 0;
  font-size: 19px;
  letter-spacing: .08em;
  font-weight: 600;
}
.eyebrow {
  margin-top: 4px;
  color: var(--line);
  font-size: 10px;
  letter-spacing: .22em;
}

.book-wrap {
  width: min(var(--book-w), 94vw);
  height: var(--page-h);
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1800px;
}

.book {
  position: relative;
  width: var(--book-w);
  height: var(--page-h);
  transform: translateX(0);
  transition: transform 500ms ease;
}

.cover,
.sheet,
.back-cover {
  position: absolute;
  top: 0;
  width: var(--page-w);
  height: var(--page-h);
}

.cover {
  left: calc(50% - var(--page-w) / 2);
  transform-origin: left center;
  transform-style: preserve-3d;
  z-index: 50;
  background: #fff;
  box-shadow: 0 0 24px rgba(0,0,0,.55);
  transition: transform var(--turn-time) cubic-bezier(.22,.7,.18,1), z-index 0s linear var(--turn-time);
  overflow: hidden;
}
.cover-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow: hidden;
  background: #fff;
}
.cover-front { transform: rotateY(0deg); }
.cover-back { transform: rotateY(180deg); }
.cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
}
.cover.open { transform: rotateY(-180deg); z-index: 1; }



.sheet {
  left: calc(50% - var(--page-w) / 2);
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform var(--turn-time) cubic-bezier(.22,.7,.18,1);
  z-index: 40;
  box-shadow: 4px 0 12px rgba(0,0,0,.18);
}





.sheet:nth-of-type(2) { z-index: 49; }
.sheet:nth-of-type(3) { z-index: 48; }
.sheet:nth-of-type(4) { z-index: 47; }
.sheet:nth-of-type(5) { z-index: 46; }
.sheet:nth-of-type(6) { z-index: 45; }
.sheet:nth-of-type(7) { z-index: 44; }
.sheet:nth-of-type(8) { z-index: 43; }
.sheet:nth-of-type(9) { z-index: 42; }

          .sheet.turned { transform: rotateY(-180deg);
        }

                         
.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow: hidden;
  border-radius: 0 4px 4px 0;
  background: #fff;
  padding: 12px;
}

.face.back { transform: rotateY(180deg); border-radius: 4px 0 0 4px; }





/* Page artwork is inset slightly from the paper edge for a cleaner framed look. */
.face img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
  border: 1px solid #c9c9c9;
}

.page-hit {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.cover-hit { cursor: pointer; }

.back-cover {
  left: calc(50% - var(--page-w) / 2);
  z-index: 0;
  background: #12171c;
  border-radius: 4px;
  box-shadow: 0 0 24px rgba(0,0,0,.55);
}



.controls {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.controls button {
  border: 1px solid var(--line);
  background: #11161b;
  color: var(--text);
  padding: 7px 11px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}
.controls button:hover { background: #1b2229; }
.controls button:disabled { opacity: .35; cursor: default; }
#counter { min-width: 86px; text-align: center; color: var(--muted); font-size: 11px; }
.hint { margin: 8px 0 0; color: #727b84; font-size: 10px; }
.back-link { margin-top: 8px; color: var(--line); font-size: 10px; text-decoration: none; letter-spacing: .08em; }
.back-link:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .book-wrap { transform: scale(.82); transform-origin: center; margin: -34px 0; }
  .controls { margin-top: 4px; }
}