:root {
  --bg:        #3b2f27;
  --bg-deep:   #2e241d;
  --parchment: #f4e9cf;
  --parchment-2: #ece0c0;
  --ink:       #3a2c1c;
  --gold:      #c9a24a;
  --gold-soft: #e3c878;
  --leather:   #5a3a24;
  --leather-2: #6b4326;
  --shadow:    rgba(0,0,0,.45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(1200px 800px at 50% -10%, #4a3a2e 0%, var(--bg) 45%, var(--bg-deep) 100%);
  color: var(--parchment);
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
}

body { padding: 28px 16px 80px; }

/* ---- header ---- */
header.masthead { text-align: center; margin: 8px 0 26px; }

h1.title {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  margin: 0;
  color: var(--gold-soft);
  font-weight: 700;
  letter-spacing: .5px;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
/* (the old highlighted "Cultivator" mark has been removed) */
.subtitle {
  font-style: italic;
  color: #d8c6a0;
  margin: 8px 0 0;
  font-size: clamp(.95rem, 1.6vw, 1.15rem);
  opacity: .92;
}

/* ---- layout ---- */
main.stage {
  display: flex;
  gap: 26px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 1380px;
  margin: 0 auto;
}

/* ---- the grimoire book ---- */
.book-col { display: flex; flex-direction: column; align-items: center; }

.book-wrap { perspective: 2400px; }

.grimoire-book {
  position: relative;
  perspective: 2600px;          /* gives the turning leaf its depth */
  background:
    linear-gradient(90deg, rgba(0,0,0,.12), transparent 6%, transparent 94%, rgba(0,0,0,.12)),
    repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0 2px, transparent 2px 4px),
    var(--parchment);
  border: 1px solid rgba(90,58,36,.5);
  border-radius: 8px;
  padding: 20px;
  box-shadow:
    0 22px 50px var(--shadow),
    inset 0 0 60px rgba(120,80,40,.18);
  display: flex;
  align-items: stretch;
}

/* each physical page = 2 columns x 3 rows of specimens.
   FIXED width + height so the book never changes size between spreads,
   even when a page holds fewer (or zero) specimens. */
.page {
  display: grid;
  grid-template-columns: repeat(2, 168px);
  grid-auto-rows: min-content;
  align-content: start;
  gap: 16px 20px;
  padding: 0 16px;
  width: 376px;                 /* 2*168 + 20 gap + 2*16 padding */
  height: 772px;                /* 3 rows of specimens, constant */
  box-sizing: border-box;
  backface-visibility: hidden;
}

/* ---- turning leaf (book-style page flip) ---- */
.leaf {
  position: absolute;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 6;
  transition: transform .55s cubic-bezier(.42, 0, .25, 1);
}
.leaf-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0 2px, transparent 2px 4px),
    var(--parchment);
  box-shadow: inset 0 0 40px rgba(120,80,40,.15);
  overflow: hidden;
}
.leaf-face.back { transform: rotateY(180deg); }
/* a soft shading that deepens as the leaf stands upright, for depth */
.leaf-face::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,0) 40%);
  opacity: 0;
  transition: opacity .55s ease;
}
.leaf.turning .leaf-face::after { opacity: 1; }
/* the central spine between the two "pages" */
.grimoire-book::before {
  content: "";
  position: absolute;
  top: 14px; bottom: 14px; left: 50%;
  width: 2px; transform: translateX(-50%);
  background: linear-gradient(rgba(90,58,36,0), rgba(90,58,36,.35), rgba(90,58,36,0));
}

.specimen {
  margin: 0;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
}
.specimen .frame {
  border: 1px solid rgba(58,44,28,.55);
  background: #d9cba6;
  padding: 5px;
  border-radius: 3px;
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .12s ease, opacity .2s ease, filter .2s ease;
}
/* a specimen whose torn-page is currently popped out is dimmed in place */
.specimen.popped { cursor: default; }
.specimen.popped .frame { opacity: .32; filter: grayscale(.8); }
.specimen.popped figcaption { opacity: .45; }
/* the greyed tile lights up when its torn-page is dragged back over it */
.specimen.return-target .frame {
  outline: 3px dashed var(--gold);
  outline-offset: 2px;
  opacity: .6;
  filter: grayscale(.3);
}
.specimen:hover .frame {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0,0,0,.28);
}
.specimen img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 2px;
  pointer-events: none;
}
.specimen figcaption {
  margin-top: 6px;
  text-align: center;
  color: var(--ink);
  font-size: .72rem;
  font-style: italic;
  letter-spacing: .2px;
}

.specimen.dragging .frame { opacity: .35; }

/* floating drag clone */
.drag-ghost {
  position: fixed;
  z-index: 1000;
  width: 120px;
  pointer-events: none;
  border: 2px solid var(--gold);
  border-radius: 4px;
  box-shadow: 0 18px 36px rgba(0,0,0,.5);
  transform: translate(-50%, -50%) rotate(-4deg);
}
.drag-ghost img { width: 100%; display: block; border-radius: 2px; }

/* ---- inspect popover ---- */
.popover {
  position: fixed;
  z-index: 900;
  max-width: 240px;
  background: #fff7e4;
  color: var(--ink);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 14px 30px rgba(0,0,0,.4);
  font-size: .9rem;
  line-height: 1.45;
}
.popover h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--leather);
}
.popover .fig { font-style: italic; opacity: .7; font-size: .8rem; }
.popover::after {
  content: "";
  position: absolute;
  left: var(--arrow, 50%);
  bottom: -9px;
  transform: translateX(-50%);
  border: 9px solid transparent;
  border-top-color: #fff7e4;
  filter: drop-shadow(0 1px 0 var(--gold));
}

/* ---- crucible ---- */
.crucible {
  width: 300px;
  background:
    radial-gradient(120% 100% at 50% 0%, #fbf3dd 0%, var(--parchment-2) 70%);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 22px 22px 26px;
  box-shadow: 0 22px 50px var(--shadow);
  color: var(--ink);
  text-align: center;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.crucible h2 {
  font-size: 1.5rem;
  color: var(--leather);
  margin: 2px 0 18px;
}
.crucible.armed { outline: 3px dashed var(--gold); outline-offset: -10px; }

.crucible-orb {
  width: 190px; height: 190px;
  border-radius: 50%;
  border: 3px solid var(--leather);
  overflow: hidden;
  background: #e9dcbb;
  box-shadow: 0 10px 24px rgba(0,0,0,.3), inset 0 0 30px rgba(90,58,36,.3);
  display: grid; place-items: center;
  margin: 6px 0 20px;
}
.crucible-orb img { width: 100%; height: 100%; object-fit: cover; }

.crucible-text {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 1.05rem;
  line-height: 1.6;
  padding: 0 4px;
}
.crucible-text .hint { color: #8a6f48; font-style: italic; }

.btn {
  font-family: inherit;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: 9px 18px;
  font-size: .95rem;
  background: linear-gradient(var(--leather-2), var(--leather));
  color: var(--parchment);
  box-shadow: 0 4px 0 #3a2415, 0 6px 12px rgba(0,0,0,.3);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #3a2415, 0 2px 6px rgba(0,0,0,.3); }
.btn.ghost {
  background: transparent;
  color: var(--leather);
  border: 1px solid var(--leather);
  box-shadow: none;
}
.crucible .btn.back { margin-top: 18px; align-self: flex-start; }
.crucible .btn.back[hidden] { display: none; }

/* ---- Cultivator's Pen launcher ---- */
.pen-launch {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 1rem;
  background: linear-gradient(var(--leather-2), var(--leather));
  color: var(--gold-soft);
  border: 1px solid var(--gold);
  padding: 12px 18px;
  border-radius: 30px;
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
  transition: transform .1s ease;
}
.pen-launch:hover { transform: translateY(-2px); }

/* ---- pager ---- */
.pager {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
}
.pager[hidden] { display: none; }
.page-indicator {
  color: var(--gold-soft);
  font-style: italic;
  font-size: .95rem;
  min-width: 120px;
  text-align: center;
}
.page-btn {
  font-family: inherit;
  cursor: pointer;
  width: 42px; height: 42px;
  font-size: 1.3rem; line-height: 1;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: linear-gradient(var(--leather-2), var(--leather));
  color: var(--gold-soft);
  box-shadow: 0 5px 12px rgba(0,0,0,.4);
  transition: transform .1s ease, opacity .1s ease;
}
.page-btn:hover:not(:disabled) { transform: translateY(-2px); }
.page-btn:disabled { opacity: .35; cursor: default; }

/* dim + curl shadow while a page turns */
.grimoire-book.flipping::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.28));
  border-radius: 8px;
  pointer-events: none;
}

/* ---- torn-page pop-out (free-floating, draggable) ---- */
.torn-page {
  position: fixed; z-index: 820;
  width: min(280px, 84vw);
  padding: 22px 24px 24px;
  color: var(--ink);
  background:
    repeating-linear-gradient(0deg, rgba(120,80,40,.045) 0 3px, transparent 3px 6px),
    radial-gradient(120% 90% at 30% 10%, #fffaf0, #efe3c4 70%, #e6d7b3 100%);
  box-shadow: 0 22px 50px rgba(0,0,0,.5);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transform: rotate(-2deg);
  /* torn parchment edge */
  clip-path: polygon(
    2% 5%, 11% 2%, 19% 6%, 28% 2%, 37% 5%, 47% 2%, 56% 6%, 66% 2%, 75% 6%, 84% 2%, 93% 6%, 99% 4%,
    97% 13%, 99% 23%, 96% 34%, 99% 45%, 97% 56%, 99% 67%, 96% 78%, 99% 89%, 97% 96%,
    88% 99%, 78% 96%, 68% 99%, 58% 95%, 48% 99%, 38% 96%, 28% 99%, 18% 95%, 9% 98%, 2% 95%,
    4% 88%, 1% 77%, 4% 66%, 1% 55%, 3% 44%, 1% 33%, 4% 22%, 2% 12%
  );
}
/* one-shot entrance — removed in JS once it has played, so dragging never replays it */
.torn-page.appear { animation: tear-in .4s cubic-bezier(.2,.9,.25,1.2) both; }
.torn-page.grabbing { cursor: grabbing; box-shadow: 0 30px 60px rgba(0,0,0,.6); }
.torn-page.over-crucible { outline: 3px dashed var(--gold); outline-offset: -8px; }
@keyframes tear-in {
  0%   { transform: rotate(-11deg) scale(.55); opacity: 0; }
  55%  { transform: rotate(-1deg)  scale(1.05); opacity: 1; }
  100% { transform: rotate(-2deg)  scale(1); }
}
.torn-page .torn-img {
  border: 1px solid rgba(58,44,28,.5);
  background: #d9cba6;
  padding: 5px;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  margin-bottom: 12px;
}
.torn-page .torn-img img {
  display: block; width: 100%; height: 200px; object-fit: cover;
  pointer-events: none;
}
.torn-page .torn-fig { font-style: italic; opacity: .65; font-size: .82rem; }
.torn-page h3 {
  margin: 2px 0 8px; font-size: 1.3rem; color: var(--leather);
}
.torn-page p { margin: 0; line-height: 1.5; font-size: .95rem; }
.torn-close {
  position: absolute; top: 8px; right: 12px;
  border: none; background: transparent; cursor: pointer;
  font-size: 1.1rem; color: var(--leather); opacity: .6;
}
.torn-close:hover { opacity: 1; }

/* orb swap pulse when the crucible is refilled */
.crucible-orb.swap { animation: orb-swap .45s ease; }
@keyframes orb-swap {
  0%   { transform: scale(.6) rotate(-8deg); opacity: .2; }
  60%  { transform: scale(1.06) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

/* ---- responsive ---- */
@media (max-width: 920px) {
  .page {
    grid-template-columns: repeat(2, 130px);
    padding: 0 8px;
    width: 296px;
    height: 636px;
  }
  .specimen img { height: 168px; }
}
@media (max-width: 560px) {
  .page { grid-template-columns: repeat(2, 96px); width: 248px; height: 560px; padding: 0 8px; }
  .specimen img { height: 118px; }
  .specimen figcaption { font-size: .62rem; }
}