/* The Lit Page — storybook ink. Warm ivory and sooty brown, a hand-drawn feel. The
   Pixi #stage and RoughJS #overlay sit behind a DOM book that opens; once the prose
   becomes the level, the book fades and the play field shows through. */

:root {
  --ink: #2a211a;
  --paper: #f1e4c9;
  --paper-deep: #e6d4ad;
  --gold: #caa45a;
  --shadow: rgba(40, 28, 16, 0.35);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--paper);
  font-family: "Caveat", "Gloria Hallelujah", cursive;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#field { position: fixed; inset: 0; }

#stage, #overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block;
}
#overlay { pointer-events: none; }

/* ---------- The book ---------- */
#book {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  perspective: 2200px;
  z-index: 20;
  transition: opacity 0.9s ease;
}
#book.gone { opacity: 0; pointer-events: none; }

.book-cover, .book-page {
  position: absolute;
  width: min(86vw, 760px);
  height: min(82vh, 540px);
  border-radius: 6px 14px 14px 6px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.7);
}

/* cover */
.book-cover {
  background:
    radial-gradient(120% 140% at 30% 20%, #5e4326, #3c2a16 70%);
  border: 2px solid #2c1d0f;
  transform-origin: left center;
  transform: rotateY(0deg);
  transition: transform 1.05s cubic-bezier(.5,.05,.2,1), opacity .4s ease;
  z-index: 3;
  display: grid; place-items: center;
  backface-visibility: hidden;
}
.cover-plate {
  text-align: center; color: #e9d6a8;
  text-shadow: 0 2px 0 rgba(0,0,0,.4);
  padding: 2rem; border: 2px solid #8a6a3a55; border-radius: 8px;
}
.cover-title { font-size: clamp(2.4rem, 7vw, 4.6rem); font-weight: 700; letter-spacing: .04em; }
.cover-sub { font-size: clamp(1.1rem, 3vw, 1.7rem); opacity: .8; margin-top: .3rem; }
.cover-hint { margin-top: 2.2rem; font-size: 1.2rem; opacity: .65; animation: pulse 1.8s ease-in-out infinite; }

#book.opening .book-cover, #book.open .book-cover { transform: rotateY(-158deg); }

/* ---------- 3D page turn between rooms ---------- */
/* A leaf that holds a snapshot of the room being left and rotates around the spine,
   revealing the live stage (already reframed to the new room) underneath. Sits above
   the canvases but below the book (z20) and HUD. */
.pageturn {
  position: absolute; inset: 0; z-index: 18;
  perspective: 2000px; pointer-events: none; overflow: hidden;
}
.pt-leaf {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.5,.04,.25,1);
  will-change: transform;
}
.pageturn.fwd .pt-leaf { transform-origin: left center; transform: rotateY(0deg); }
.pageturn.bwd .pt-leaf { transform-origin: right center; transform: rotateY(0deg); }
.pageturn.fwd.turning .pt-leaf { transform: rotateY(-179deg); }
.pageturn.bwd.turning .pt-leaf { transform: rotateY(179deg); }

.pt-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  box-shadow: 0 24px 60px -16px rgba(0,0,0,.75);
  overflow: hidden;
}
.pt-front { background: var(--paper); }  /* matches the stage clear colour behind the snap */
.pt-front.pt-blank,
.pt-back {                               /* the leaf's underside reads as a blank page */
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(0deg, transparent 0 33px, rgba(120,90,50,.05) 33px 34px),
    radial-gradient(140% 120% at 70% 10%, var(--paper), var(--paper-deep) 80%);
}
.pt-front.pt-blank { transform: none; }
.pt-snap { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* a shadow that deepens toward the lifting edge to fake the curl */
.pt-sheen {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,6,3,0) 45%, rgba(10,6,3,.45) 100%);
  opacity: 0; transition: opacity .62s ease;
}
.pageturn.bwd .pt-sheen { background: linear-gradient(270deg, rgba(10,6,3,0) 45%, rgba(10,6,3,.45) 100%); }
.pageturn.turning .pt-sheen { opacity: 1; }

/* a soft shadow cast onto the new page near the spine, fading as the leaf lies flat */
.pt-spine {
  position: absolute; top: 0; bottom: 0; width: 42%;
  pointer-events: none; opacity: .55; transition: opacity .62s ease;
}
.pageturn.fwd .pt-spine { left: 0; background: linear-gradient(90deg, rgba(8,5,2,.5), rgba(8,5,2,0)); }
.pageturn.bwd .pt-spine { right: 0; background: linear-gradient(270deg, rgba(8,5,2,.5), rgba(8,5,2,0)); }
.pageturn.turning .pt-spine { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .pt-leaf { transition-duration: .18s; }
  .pt-sheen, .pt-spine { transition-duration: .18s; }
}

/* page */
.book-page {
  background:
    repeating-linear-gradient(0deg, transparent 0 33px, rgba(120,90,50,.05) 33px 34px),
    radial-gradient(140% 120% at 70% 10%, var(--paper), var(--paper-deep) 80%);
  border: 2px solid #cbb888;
  color: var(--ink);
  z-index: 2;
  padding: clamp(1.4rem, 4vw, 3rem);
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transition: opacity .5s ease .25s;
}
#book.open .book-page, #book.reading .book-page, #book.revealing .book-page { opacity: 1; }

.prose {
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  line-height: 1.7; margin: 0; text-align: left;
}
.filler { transition: opacity .7s ease, filter .7s ease; }
.word {
  position: relative; color: var(--ink); font-weight: 700;
  transition: opacity .6s ease, transform .6s ease, text-shadow .6s ease, color .6s ease;
}
.page-hint {
  margin-top: 1.6rem; align-self: center; font-size: 1.2rem;
  color: #8a6a3a; opacity: 0; transition: opacity .5s ease;
  animation: pulse 1.8s ease-in-out infinite;
}
#book.reading .page-hint { opacity: .8; }

/* the reveal: filler fades, action words glow + lift */
#book.revealing .filler { opacity: 0; filter: blur(1px); }
#book.revealing .page-hint { opacity: 0; }
#book.revealing .word {
  color: #b5832c;
  text-shadow: 0 0 16px rgba(220,170,80,.9), 0 0 34px rgba(220,150,60,.5);
  transform: translateY(-4px) scale(1.06);
}
#book.revealing .word.flown { opacity: 0; }

/* ---------- HUD ---------- */
#ui-layer { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
#hud {
  position: absolute; top: 14px; left: 16px; right: 16px;
  display: flex; gap: 18px; align-items: center;
  font-size: 1.5rem; color: var(--ink);
  text-shadow: 0 1px 2px rgba(255,248,230,.85);
  transition: opacity .5s ease;
}
#hud.hidden { opacity: 0; }
.hud-item b { color: #9c7322; }
.hud-item i { font-style: normal; opacity: .7; }
.hud-tip { margin-left: auto; font-size: 1.25rem; opacity: .8; }

/* the death tally — a badge of honor, IWBTG-style */
#hudDeaths {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  font-size: 2rem; color: #b8532e;
  text-shadow: 0 1px 2px rgba(255,248,230,.8);
}
#hudDeaths b { color: #d3431c; }

/* the letter bag + current form (Kirby ability box, bottom-centre) */
#bagbar {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 6px 14px; border-radius: 10px;
  background: rgba(241, 228, 201, 0.82); border: 1.5px solid #cbb888;
  box-shadow: 0 4px 14px -6px rgba(40,28,16,.4);
  transition: opacity .4s ease;
}
#bagbar.hidden { opacity: 0; }
#bagLetters { display: flex; gap: 5px; }
.chip {
  font-style: normal; font-family: "Caveat", cursive; font-weight: 700;
  font-size: 1.7rem; color: var(--ink);
  min-width: 1.1em; text-align: center; line-height: 1;
  padding: 2px 6px; border-radius: 6px; background: rgba(156,115,34,.22);
}
.chip.empty { color: #9a8970; background: none; }
#bagForm { font-size: 1.8rem; font-weight: 700; color: #e8623e; letter-spacing: .06em; }
#bagForm.active { text-shadow: 0 0 14px rgba(232,98,62,.6); }

/* boss health bar (top-centre, under the death tally) */
#bossbar {
  position: absolute; left: 50%; top: 48px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: opacity .4s ease;
}
#bossbar.hidden { opacity: 0; }
.boss-name { font-family: "Caveat", cursive; font-weight: 700; font-size: 1.5rem; color: #d8483a; letter-spacing: .14em; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.boss-track { display: block; width: 320px; height: 12px; border-radius: 7px; background: rgba(40,16,12,.7); border: 1.5px solid #6a2018; overflow: hidden; }
#bossFill { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #e8623e, #b8392b); transition: width .25s ease; }

/* corner word-list reference (minimizable) */
#wordlist {
  position: absolute; top: 44px; right: 14px; z-index: 32;
  min-width: 132px; padding: 6px 8px 7px;
  background: rgba(241, 228, 201, 0.85); border: 1.5px solid #cbb888; border-radius: 10px;
  box-shadow: 0 4px 14px -6px rgba(40,28,16,.4);
  color: var(--ink); font-family: "Caveat", cursive; pointer-events: auto;
  transition: opacity .4s ease;
}
#wordlist.hidden { opacity: 0; pointer-events: none; }
.wl-head { display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  font-size: 1.1rem; letter-spacing: .12em; color: #9c7322; }
.wl-head button { background: none; border: none; color: var(--ink); font-size: 1.4rem;
  line-height: 1; cursor: pointer; font-family: inherit; padding: 0 4px; }
#wordlist ul { list-style: none; margin: 4px 0 0; padding: 0; }
#wordlist.min ul { display: none; }
#wordlist li { display: flex; justify-content: space-between; gap: 12px; font-size: 1.35rem; opacity: .82; }
#wordlist li b { color: var(--ink); font-weight: 700; }
#wordlist li i { font-style: normal; font-size: 1rem; opacity: .6; align-self: center; }
#wordlist li.on { opacity: 1; }
#wordlist li.on b { color: #e8623e; text-shadow: 0 0 10px rgba(232,98,62,.5); }

#toast {
  position: absolute; left: 50%; top: 22%; transform: translateX(-50%);
  font-size: 1.8rem; color: var(--ink); text-shadow: 0 1px 3px rgba(255,248,230,.85);
  opacity: 0; transition: opacity .35s ease;
}
#toast.show { opacity: 1; }

/* ---------- Screens (win) ---------- */
#screen {
  position: absolute; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(30,20,10,.55), rgba(8,6,4,.92));
  color: var(--paper); text-align: center;
  transition: opacity .6s ease;
}
#screen.hidden { opacity: 0; pointer-events: none; }
.screen-card { padding: 2rem; }
.screen-title { font-size: clamp(3rem, 9vw, 6rem); color: var(--gold); font-weight: 700; }
.screen-sub { font-size: clamp(1.2rem, 3vw, 1.9rem); opacity: .85; margin-top: .6rem; line-height: 1.5; }
.screen-hint { margin-top: 1.8rem; font-size: 1.3rem; opacity: .7; animation: pulse 1.8s ease-in-out infinite; }

.hidden { opacity: 0; pointer-events: none; }

@keyframes pulse { 0%,100% { opacity: .4; } 50% { opacity: .9; } }

/* ---------- Touch controls (mobile) ---------- */
#touch { position: absolute; inset: 0; z-index: 35; display: none; pointer-events: none; }
#touch.on { display: block; }
.pad { position: absolute; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 10px; }
.pad-left { left: calc(12px + env(safe-area-inset-left)); }
.climb { display: flex; flex-direction: column; gap: 6px; margin-right: 4px; }
.pad-right { right: calc(12px + env(safe-area-inset-right)); flex-wrap: wrap; justify-content: flex-end; max-width: 48vw; }
.tbtn {
  pointer-events: auto; touch-action: none; user-select: none;
  -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  border: 2px solid rgba(202,164,90,.5); background: rgba(20,14,8,.42);
  color: var(--paper); font-family: "Caveat", cursive; font-weight: 700;
  border-radius: 14px; display: grid; place-items: center;
  width: 17vmin; height: 17vmin; max-width: 84px; max-height: 84px; font-size: 3.6vmin;
}
.tbtn.dir { font-size: 7vmin; border-radius: 50%; }
.tbtn.act { background: rgba(60,30,16,.5); }
.tbtn.jump { width: 21vmin; height: 21vmin; max-width: 104px; max-height: 104px; background: rgba(120,60,24,.5); border-color: rgba(232,150,90,.7); }
.tbtn.small { width: 12vmin; height: 12vmin; max-width: 58px; max-height: 58px; font-size: 2.9vmin; }
.tbtn.down { background: rgba(202,164,90,.55); color: #221; transform: scale(.94); }

/* lift the bag bar above the controls on touch devices */
body.has-touch #bagbar { bottom: calc(23vmin + env(safe-area-inset-bottom)); }

/* on touch (mobile), drop the WORDS reference and the keyboard control hint — the
   on-screen buttons + form toasts carry the same info without crowding the page */
body.has-touch #wordlist,
body.has-touch .hud-tip { display: none; }

/* rotate-to-landscape nudge (portrait phones) */
#rotate {
  position: absolute; inset: 0; z-index: 60; display: none;
  background: var(--paper); color: var(--ink); place-items: center; text-align: center;
  font-family: "Caveat", cursive; font-size: clamp(1.6rem, 7vw, 2.6rem);
}
#rotate div { opacity: .85; line-height: 1.5; }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: grid; } }

/* tighten the HUD on small screens */
@media (max-width: 820px) {
  #hud { font-size: 1.15rem; gap: 10px; }
  #hudDeaths { font-size: 1.5rem; }
  .hud-tip { display: none; }
  .chip { font-size: 1.3rem; padding: 1px 5px; }
  #bagForm { font-size: 1.4rem; }
  .boss-track { width: 200px; }
}