/* Comic "Blobby und der Junge": 3D book (book.js). Sizes inside a page are cqw (% of the page width). */
:root {
  --bg: #10142e; --ink: #15121f; --paper: #fffaf0; --sun: #ffd23f; --sky: #4cc3ff;
  --pink: #ff4fa3; --mint: #3ee08f; --red: #e2233b;
  --title: 'Bangers', 'Fredoka', 'Impact', sans-serif;
  --comic: 'Comic Neue', 'Fredoka', 'Comic Sans MS', sans-serif;
  --body: 'Fredoka', 'Trebuchet MS', sans-serif;
  --vh: 100vh; --chrome: 150px;
  /* page width: 2 pages side by side */
  --pw: min(720px, calc((100vw - 56px) / 2), calc((var(--vh) - var(--chrome)) * .75));
}
@supports (height: 100dvh) { :root { --vh: 100dvh; } }
/* narrow screen: 1 page (same query as book.js) */
@media (max-aspect-ratio: 1/1), (max-width: 700px) {
  :root { --pw: min(720px, calc(100vw - 20px), calc((var(--vh) - var(--chrome)) * .75)); }
}

* { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  margin: 0; min-height: var(--vh); display: flex; flex-direction: column; overflow-x: clip;
  font-family: var(--body); color: #fff;
  background:
    radial-gradient(55% 40% at 8% 92%, #b0527a40, transparent 70%),
    radial-gradient(45% 35% at 95% 85%, #4cc3ff33, transparent 70%),
    radial-gradient(40% 30% at 85% 8%, #8f6bff30, transparent 70%),
    radial-gradient(#ffffff18 1px, transparent 1.6px) 0 0 / 34px 34px,
    var(--bg);
}
body::after { content: ''; position: fixed; inset: auto 0 0; height: 6px; background: var(--mint); opacity: .8; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px max(16px, env(safe-area-inset-left)); }
.back { color: #fff; text-decoration: none; white-space: nowrap; font-weight: 600; opacity: .8; }
.back:hover { opacity: 1; color: var(--sun); }
.tagline { font: 1.1rem var(--title); letter-spacing: .08em; color: var(--sun); text-align: center; }

main { flex: 1; display: grid; place-items: center; padding: 6px 10px 0; }

/* --- book --- */
.stage {
  position: relative; width: calc(var(--pw) * 2); height: calc(var(--pw) / .75);
  cursor: pointer; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
@media (max-aspect-ratio: 1/1), (max-width: 700px) {
  .stage { width: var(--pw); overflow: clip; overflow-clip-margin: 14px; }
}
.book {
  position: absolute; top: 0; left: 50%; width: calc(var(--pw) * 2); height: 100%;
  perspective: calc(var(--pw) * 5); transform: translateX(-50%) translateX(-25%);
  transition: transform .9s cubic-bezier(.45, .05, .25, 1);
}
.leaf {
  position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
  transform-origin: 0 50%; transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.45, .05, .25, 1);
}
.leaf.turned { transform: rotateY(-180deg); }
@media (hover: hover) {
  .book[data-p="0"] .leaf:first-child:hover { transform: rotateY(-12deg); }
}
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; container-type: inline-size; }
.face.left { transform: rotateY(180deg); }
.page {
  position: absolute; inset: 0; overflow: hidden; color: var(--ink);
  background: radial-gradient(#0000000b 1px, transparent 1.3px) 0 0 / 1.6cqw 1.6cqw, var(--paper);
  border-radius: 0 1.6cqw 1.6cqw 0; box-shadow: 0 .6cqw 2cqw #0005;
}
.left .page { border-radius: 1.6cqw 0 0 1.6cqw; }
/* shadow at the spine */
.page::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(90deg, #0000002e, #0000 7%); }
.left .page::after { background: linear-gradient(270deg, #0000002e, #0000 7%); }
.num { position: absolute; bottom: 2.2cqw; font: 3.6cqw var(--title); color: #9a8f78; }
.right .num { right: 5cqw; }
.left .num { left: 5cqw; }

/* --- cover --- */
.k-cover { background: #111; border-radius: 0 2.4cqw 2.4cqw 0; }
.k-cover .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-tag {
  position: absolute; top: 4cqw; left: 5cqw; z-index: 2; padding: .4cqw 2.2cqw;
  background: var(--red); color: #fff; font: 5cqw/1.1 var(--title); letter-spacing: .06em;
  border: .5cqw solid var(--ink); transform: rotate(-6deg); box-shadow: .6cqw .6cqw 0 var(--ink);
}
.c-title {
  position: absolute; top: 10cqw; left: 5cqw; right: 5cqw; z-index: 2; margin: 0; text-align: center;
  font: 400 15cqw/.92 var(--title); letter-spacing: .02em; color: var(--sun); text-wrap: balance;
  -webkit-text-stroke: .6cqw var(--ink); paint-order: stroke fill;
  text-shadow: 1cqw 1cqw 0 var(--ink), 0 0 7cqw #ffd23f66; transform: rotate(-3deg);
}
.c-by {
  position: absolute; bottom: 5cqw; left: 0; right: 0; z-index: 2; margin: 0; text-align: center;
  font: 600 4.2cqw var(--body); color: #fff; text-shadow: 0 .3cqw 1cqw #000, 0 0 2cqw #000;
}

/* --- story pages: 3 panels --- */
.k-story { padding: 5cqw 5cqw 0; display: flex; flex-direction: column; }
.grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; margin-bottom: 7.5cqw; }
.A .grid { grid-template-rows: 1.1fr 1fr; }
.B .grid { grid-template-rows: 1fr 1.1fr; }
.panel { position: relative; overflow: hidden; min-height: 0; border: .6cqw solid var(--ink); border-radius: .8cqw; background: #e8e2d4; }
.panel.wide { grid-column: span 2; }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.say, .cap, .msg {
  position: absolute; z-index: 2; width: max-content; margin: 0;
  font: 700 3.1cqw/1.16 var(--comic); color: var(--ink); text-wrap: balance;
  overflow-wrap: break-word;
}
.say {
  --bb: #fff; background: var(--bb); text-align: center;
  border: .45cqw solid var(--ink); border-radius: 3.5cqw; padding: 1.1cqw 2.1cqw;
}
.say.blobby { --bb: #d9f2ff; }
.say::before, .say::after { content: ''; position: absolute; left: var(--tx, 30%); border-style: solid; }
.say.down::before { top: 100%; margin-left: -1.6cqw; border-width: 2.85cqw 1.6cqw 0; border-color: var(--ink) transparent transparent; }
.say.down::after { top: calc(100% - .1cqw); margin-left: -1.14cqw; border-width: 2.03cqw 1.14cqw 0; border-color: var(--bb) transparent transparent; }
.say.up::before { bottom: 100%; margin-left: -1.6cqw; border-width: 0 1.6cqw 2.85cqw; border-color: transparent transparent var(--ink); }
.say.up::after { bottom: calc(100% - .1cqw); margin-left: -1.14cqw; border-width: 0 1.14cqw 2.03cqw; border-color: transparent transparent var(--bb); }
.cap {
  background: var(--sun); border: .45cqw solid var(--ink); border-radius: .5cqw;
  padding: .8cqw 1.5cqw; font-size: 2.85cqw; box-shadow: .5cqw .5cqw 0 var(--ink);
}
.msg {
  background: #d0142f; color: #fff; text-align: center; padding: 1.4cqw 2cqw; font-size: 3cqw; line-height: 1.22;
  border: .5cqw solid #fff; outline: .45cqw solid var(--ink); border-radius: .6cqw;
  box-shadow: 0 0 4cqw 1cqw #ff2d4f; animation: alarm 1.6s ease-in-out infinite;
}
@keyframes alarm { 50% { box-shadow: 0 0 1.5cqw .3cqw #ff2d4f; } }
.end {
  position: absolute; left: 0; right: 0; top: 5%; z-index: 2; text-align: center;
  font: 400 15cqw/1 var(--title); text-transform: uppercase; letter-spacing: .04em; color: var(--sun);
  -webkit-text-stroke: .6cqw var(--ink); paint-order: stroke fill;
  text-shadow: .9cqw .9cqw 0 var(--ink); transform: rotate(-8deg);
}

/* --- figures (inside of the cover) --- */
.k-figures {
  padding: 6cqw 6cqw 9cqw; display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto; gap: 4cqw 4cqw;
}
.f-title { grid-column: span 2; margin: 0; text-align: center; font: 400 11cqw/1 var(--title); letter-spacing: .03em; color: var(--ink); }
.fig {
  display: flex; flex-direction: column; align-items: center; min-height: 0; text-align: center;
  background: #fff; border: .6cqw solid var(--ink); border-radius: 2.4cqw; padding: 3cqw 2.4cqw;
  box-shadow: 1cqw 1cqw 0 var(--ink);
}
.fig img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.fig h3 { margin: 2cqw 0 1cqw; font: 400 7.5cqw/1 var(--title); letter-spacing: .03em; color: var(--red); }
.fig.blobby h3 { color: #1d9be0; }
.fig p { margin: 0; font: 600 3.2cqw/1.3 var(--body); }
.credit { grid-column: span 2; margin: 0; text-align: center; font: 500 2.7cqw var(--body); color: #776d5c; }

/* --- back cover --- */
.k-back {
  padding: 7cqw 7cqw 0; color: #fff; border-radius: 2.4cqw 0 0 2.4cqw !important;
  background:
    radial-gradient(60% 30% at 10% 100%, #b0527a66, transparent 70%),
    radial-gradient(50% 30% at 100% 95%, #4cc3ff44, transparent 70%),
    radial-gradient(#ffffff1c 1px, transparent 1.5px) 0 0 / 4cqw 4cqw, var(--bg);
}
.b-title { margin: 0 0 2.5cqw; font: 400 9.5cqw/1 var(--title); letter-spacing: .03em; color: var(--sun); }
.b-where { margin: 0; font: 600 3.8cqw/1.35 var(--body); }
.b-where a { color: var(--sky); font-weight: 700; }
.b-play {
  display: inline-block; margin: 3cqw 0 2cqw; padding: 1.4cqw 5cqw; border: .6cqw solid var(--ink); border-radius: 99px;
  background: var(--mint); color: var(--ink); font: 400 6.4cqw/1.1 var(--title); letter-spacing: .05em; text-decoration: none;
  box-shadow: 0 1cqw 0 #178a55;
}
.b-play:hover { background: #6bf0ad; }
.b-h { margin: 2cqw 0 1cqw; font: 400 7cqw/1 var(--title); letter-spacing: .04em; color: var(--pink); }
.b-rules { margin: 0; padding-left: 6cqw; font: 500 3.3cqw/1.32 var(--body); }
.b-rules li { margin: 1.1cqw 0; padding-left: .8cqw; }
.b-rules li::marker { color: var(--sun); font: 400 4cqw var(--title); }
.b-blobby { position: absolute; right: 6cqw; bottom: 4cqw; width: 19cqw; }
.b-save { left: 6cqw; bottom: 13cqw; max-width: 64%; --tx: 92%; font-size: 3.4cqw; }

/* --- controls --- */
.ctrl { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
.nb {
  height: 50px; min-width: 50px; padding: 0 14px; border: 3px solid var(--ink); border-radius: 99px;
  background: var(--sun); color: var(--ink); font: 600 20px/1 var(--body); cursor: pointer;
  box-shadow: 0 5px 0 #a8820c; transition: transform .1s, box-shadow .1s;
  touch-action: manipulation;
}
.nb:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #a8820c; }
.nb:disabled { opacity: .3; cursor: default; }
.nb:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.nb.wide { padding: 0 24px; font-size: 19px; white-space: nowrap; }
.count { min-width: 9em; text-align: center; font: 600 15px var(--body); color: #cfd3ff; }
@media (max-width: 480px) {
  .tagline { display: none; }
  .ctrl { gap: 10px; }
  .count { min-width: 0; flex: 1; max-width: 9em; font-size: 14px; }
  .nb.wide { padding: 0 16px; font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .book, .leaf { transition-duration: .2s; }
  .msg { animation: none; }
}