@font-face {
  font-family: "Lato";
  src: url("/aabits/fonts/Lato-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}
:root { color-scheme: light; }
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
body {
  margin: 0; height: 100dvh; overflow: hidden;
  background: #f2efe9 url("/aabits/images/taust.png") repeat;
  background-size: 300px 165px;
  font-family: "Lato", system-ui, sans-serif;
  font-weight: 300;
  color: #314151; text-shadow: 1px 1px 4px #fff;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-shadow: inherit; }
.said {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden;
}
#book {
  display: grid; grid-template-rows: auto 1fr auto;
  height: 100dvh;
  padding: max(10px, env(safe-area-inset-top)) 0 calc(12px + env(safe-area-inset-bottom));
}

/* The two quiet words in the corners. */
#age, #case {
  position: fixed; top: max(10px, env(safe-area-inset-top)); z-index: 3;
  font-size: clamp(15px, 2.3vmin, 19px); letter-spacing: .08em;
  color: rgb(49 65 81 / .62); padding: 8px 10px;
}
#age { left: 8px; }
#case { right: 8px; }
#age:hover, #case:hover { color: #314151; }

/* The word is the headline. Each letter sways on its own beat, in depth —
   a printed row that is quietly alive. */
#word {
  display: flex; justify-content: center; align-items: baseline;
  gap: clamp(6px, 1.6vmin, 14px);
  padding: clamp(6px, 2vmin, 18px) 64px 0;
  min-height: clamp(44px, 9vmin, 76px);
  perspective: 700px;
}
/* A phone's width puts the corners and the headline on one line; the book's
   own answer is the original's — the word steps under them. */
@media (max-width: 560px) {
  #word { padding-top: 44px; }
}
#word .slot {
  min-width: .72em; text-align: center;
  font-size: clamp(30px, 7vmin, 58px);
  letter-spacing: .04em; line-height: 1.15;
  cursor: pointer;
  transform-style: preserve-3d;
  animation: sway 3.4s ease-in-out infinite;
}
@keyframes sway {
  0%, 100% { transform: rotateY(-11deg) translateY(0); }
  50% { transform: rotateY(11deg) translateY(-3px); }
}
/* The missing letter is a gap in the print, not a coloured box. */
#word .slot.gap {
  color: rgb(49 65 81 / .38);
  border-bottom: 3px solid rgb(49 65 81 / .3);
}
#word .slot.landed { animation: land .5s ease; color: #22aa66; }
@keyframes land { 0% { transform: scale(.4) rotateX(90deg); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* The drawing floats on the paper — no card, no frame. */
/* One `minmax(0, 1fr)` track each way, or the figure's percentage height
   resolves against an auto row and the elephant stands through the
   alphabet: a definite track is what the drawing's 100% can mean. */
#stage {
  min-height: 0; display: grid;
  grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
  padding: clamp(4px, 1.5vmin, 16px) clamp(44px, 9vw, 96px);
}
#card {
  margin: 0; min-height: 0; min-width: 0; display: grid;
  grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
  cursor: pointer;
}
#drawing {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform .2s ease;
}
#card:active #drawing { transform: scale(.96); }
/* Once a painter has the drawing, the plain one only holds the box. */
#book[data-engine] #drawing { visibility: hidden; }

/* The painters' sheets: over the page, under the corners, touching nothing. */
#gl, #fx { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
#gl { width: 100%; height: 100%; }
#fx { perspective-origin: 50% 50%; transform-style: preserve-3d; overflow: hidden; }
#fx > * { position: absolute; left: 50%; top: 50%; transform-origin: center; will-change: transform; }
#fx img { object-fit: contain; }
.fx-glyph { display: grid; place-items: center; line-height: 1; letter-spacing: .04em; }
.fx-star {
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, #ffe9a8 50%, transparent 70%);
}
#engine {
  position: fixed; left: 10px; bottom: 6px; z-index: 3;
  font-size: 11px; letter-spacing: .1em; color: rgb(49 65 81 / .5);
}

/* The way to the next page is the next page, peeking in — the original's
   own gesture: half a drawing at the edge, leaning in under the pointer. */
#prev, #next {
  position: fixed; top: 50%; z-index: 2;
  width: clamp(72px, 13vmin, 128px); aspect-ratio: 1;
  transition: transform .25s ease;
}
#prev { left: 0; transform: translate(-55%, -50%); }
#next { right: 0; transform: translate(55%, -50%); }
#prev:hover, #prev:active { transform: translate(-38%, -50%) scale(1.06); }
#next:hover, #next:active { transform: translate(38%, -50%) scale(1.06); }
#prev img, #next img { width: 100%; height: 100%; object-fit: contain; opacity: .85; }

/* The alphabet is a printed row, every letter a sound — and a letter leans
   back off the page when a pointer reaches for it. */
#letters {
  display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: clamp(4px, 1.4vmin, 14px);
  padding: 0 10px;
  perspective: 600px;
}
#letters button {
  min-width: clamp(30px, 5.4vmin, 48px); min-height: 44px;
  font-size: clamp(22px, 4.6vmin, 40px);
  letter-spacing: .02em; line-height: 1;
  transform-style: preserve-3d;
  transition: transform .16s ease;
}
#letters button:hover { transform: rotateX(-24deg) translateY(-3px) scale(1.08); }
#letters button:active { transform: scale(.9); }
#letters button.wrong { animation: wiggle .4s ease; }
@keyframes wiggle { 25% { transform: translateX(-6px) rotate(-4deg); } 75% { transform: translateX(6px) rotate(4deg); } }

#cheer { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
#cheer span { position: absolute; font-size: 1.8rem; animation: fall 1.4s ease-in forwards; }
@keyframes fall {
  from { transform: translateY(-10vh) rotate(0); opacity: 1; }
  to { transform: translateY(70vh) rotate(300deg); opacity: 0; }
}

/* A short window keeps the book: the print shrinks before anything folds. */
@media (max-height: 620px) {
  #word .slot { font-size: clamp(24px, 5.6vmin, 40px); }
  #letters button { font-size: clamp(18px, 3.8vmin, 30px); min-height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  #word .slot { animation: none; }
  #letters button { transition: none; }
}