/* ============================================================
   漢字 — an old writing book
   ============================================================ */
:root {
  --paper: #f8f3e8;
  --paper-2: #f0e9d8;
  --paper-edge: #dccca9;
  --ink: #14110c;
  --ink-soft: #5b5142;
  --seal: #b23a2b;
  --gold: #a58c58;
  --line: rgba(120, 96, 52, 0.22);
  --cover: #dccbac;
  --cover-2: #cbb78d;
  --desk: #e9e2d4;
  --blush: #e7c9c4;
  --blush-2: #dcb9b3;
  --wash: #cfbca7;
  --grid-red: rgba(198, 88, 84, 0.6);
  --grid-guide: rgba(198, 88, 84, 0.32);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: "EB Garamond", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

/* The notebook rests on a warm wooden desk (soft shoji light from the left) */
body {
  min-height: 100vh;
  background-color: #3a2b1c;
  background-image:
    /* soft vignette so the eye settles on the notebook */
    radial-gradient(1400px 1000px at 50% 46%, transparent 58%, rgba(28, 17, 7, 0.22) 100%),
    url("assets/img/desk-flatlay.png");
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  /* anchor to the top so vertical window resizing only trims the (unseen)
     bottom instead of re-cropping around the centre */
  background-position: center top, center top;
  background-attachment: fixed, fixed;
  padding: 60px 20px 84px;
}

/* ============================================================
   The book — leather cover wrapping the pages
   ============================================================ */
/* The outer container is now invisible — it only centres the content.
   The title and picker sit directly on the desk; the .spread below is the
   only thing that looks like a physical notebook. */
.book {
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
  background: none;
  box-shadow: none;
  position: relative;
}
.book::before { display: none; }

/* Just a transparent layout wrapper now (no paper, no cover) */
.book-inner {
  position: relative;
  padding: 0;
  background: none;
  box-shadow: none;
}
.book-inner::before,
.book-inner::after { display: none; }

/* ============================================================
   Decorative watercolour washes + botanical line art + seal
   ============================================================ */
/* the watercolour washes belonged to the paper block, which is gone now */
.decor { display: none; }
.book-inner > *:not(.decor):not(.seal-mark) { position: relative; z-index: 1; }

.wash {
  position: absolute;
  border-radius: 50%;
  filter: blur(34px);
  opacity: 0.55;
}
.wash--tl {
  top: -110px; left: -120px;
  width: 380px; height: 320px;
  background: radial-gradient(circle at 60% 60%, var(--blush-2), var(--blush) 45%, transparent 72%);
}
.wash--tl2 {
  top: -40px; left: 120px;
  width: 260px; height: 200px;
  background: radial-gradient(circle at 50% 50%, var(--wash), transparent 70%);
  opacity: 0.4;
}
.wash--br {
  bottom: -130px; right: -120px;
  width: 420px; height: 360px;
  background: radial-gradient(circle at 40% 40%, var(--blush), var(--wash) 50%, transparent 74%);
}
.wash--br2 {
  bottom: 40px; right: 160px;
  width: 230px; height: 190px;
  background: radial-gradient(circle at 50% 50%, var(--blush-2), transparent 70%);
  opacity: 0.32;
}

.botanical {
  position: absolute;
  stroke: rgba(60, 50, 40, 0.32);
  stroke-width: 1;
  fill: none;
  opacity: 0.8;
}
.botanical--tl { top: -6px; left: -12px; width: 236px; transform: rotate(26deg); }
.botanical--br { bottom: -6px; right: -12px; width: 248px; transform: rotate(206deg); }

/* red seal (hanko) */
.seal-mark {
  position: absolute;
  bottom: 30px;
  left: 40px;
  width: 52px;
  height: 52px;
  border: 2.5px solid var(--seal);
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  padding: 3px;
  color: var(--seal);
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
  opacity: 0.9;
  transform: rotate(-1deg);
  box-shadow: 0 0 0 1px rgba(178, 58, 43, 0.15);
  z-index: 1;
}
.seal-mark span { display: block; }

/* ============================================================
   Running head (title)
   ============================================================ */
.running-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 26px;
}
.running-head .rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(243, 232, 205, 0.5), transparent);
}
.running-head-text { text-align: center; white-space: nowrap; }
.title {
  margin: 0;
  font-family: "Shippori Mincho", serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  letter-spacing: 0.14em;
  color: #f7efdc;
  text-shadow: 0 1px 2px rgba(20, 12, 4, 0.55), 0 2px 10px rgba(20, 12, 4, 0.4);
}
.subtitle {
  margin: 4px 0 0;
  font-style: italic;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  color: #e9dcc0;
  text-shadow: 0 1px 6px rgba(20, 12, 4, 0.5);
}

/* ============================================================
   Section label + picker (chapter index)
   ============================================================ */
.section-label {
  font-family: "Shippori Mincho", serif;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ecdfc2;
  text-shadow: 0 1px 5px rgba(20, 12, 4, 0.5);
  text-align: center;
  margin: 0 0 16px;
}
.section-label::before,
.section-label::after { content: "❦"; color: var(--gold); margin: 0 12px; font-size: 0.9em; }

.picker-wrap { margin-top: 42px; }
/* One connected sheet of rice-paper practice grid (米字格) resting on the desk */
.picker {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  background: linear-gradient(180deg, #f6efdc, #eee4cc);
  border: 1.5px solid var(--grid-red);
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 14px 30px -12px rgba(18, 10, 3, 0.55);
  overflow: hidden;
}
.tile {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  background-color: transparent;
  border: 0;
  /* shared cell walls form the connected grid */
  border-right: 1px solid var(--grid-red);
  border-bottom: 1px solid var(--grid-red);
  transition: background-color 0.12s ease;
}
.tile:hover { background-color: rgba(120, 96, 52, 0.12); }
.tile-char {
  position: relative;
  z-index: 1;
  font-family: "Yuji Boku", "Shippori Mincho", serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  color: var(--ink);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.tile-meaning {
  position: relative;
  z-index: 1;
  font-size: 0.68rem;
  font-style: italic;
  line-height: 1;
  color: var(--ink-soft);
}
.tile.is-active { background-color: rgba(198, 88, 84, 0.16); }
.tile.is-active .tile-char { color: var(--seal); }
.tile.is-active .tile-meaning { color: var(--seal); opacity: 0.8; }

/* ============================================================
   The open-book spread
   ============================================================ */
.spread {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  perspective: 2200px;
  perspective-origin: center;
  /* The spread IS the notebook: a block of stacked pages. Give it its own
     paper surface and real thickness at the top and bottom edges. */
  padding: 22px 26px;
  border-radius: 3px 3px 5px 5px;
  background:
    radial-gradient(circle at 80% 92%, rgba(150, 120, 70, 0.06), transparent 40%),
    linear-gradient(180deg, #fdf9f0, #f6efdd);
  box-shadow:
    /* crisp top sheet + soft inner rounding */
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 0 26px rgba(120, 95, 55, 0.06) inset,
    /* bottom sheet stack (thicker — we look slightly down onto the block) */
    0 2px 0 0 #f3ecd9,
    0 4px 0 -0.5px #ece4cd,
    0 6px 0 -1px #e6ddc5,
    0 8px 0 -1.5px #e0d6bb,
    0 10px 0 -2px #d9ceaf,
    0 12px 0 -2.5px #d2c6a3,
    0 14px 0 -3px #cbbe97,
    0 16px 0 -3.5px #c4b78c,
    /* tight contact shadow right under the page block */
    0 26px 22px -14px rgba(40, 24, 8, 0.5),
    /* mid cast shadow */
    0 44px 52px -20px rgba(30, 18, 6, 0.55),
    /* broad, soft ambient shadow so the notebook floats above the desk */
    0 70px 100px -34px rgba(14, 8, 2, 0.62),
    /* a soft shadow tucked under the top edge (no visible page stack here) */
    0 -3px 10px -6px rgba(70, 52, 28, 0.22);
}

/* the turning page (right leaf pivoting on the spine).
   Position against the spread itself — not the inner grid rows — so the
   leaf covers the full notebook paper, including the spread's padding. */
.page-flip {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  width: auto;
  transform-origin: left center;
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  background:
    linear-gradient(90deg,
      rgba(90, 65, 30, 0.16),
      #f5eede 7%,
      #fcf8ef 50%,
      #efe7d3 100%);
  border-radius: 0 3px 5px 0;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  will-change: transform, opacity, box-shadow;
}
/* backward turn: the leaf sits on the LEFT page and pivots on the spine at
   its right edge (used by the drag-to-flip "previous" gesture) */
.page-flip--back {
  left: 0;
  right: 50%;
  transform-origin: right center;
  border-radius: 3px 0 0 5px;
  background:
    linear-gradient(270deg,
      rgba(90, 65, 30, 0.16),
      #f5eede 7%,
      #fcf8ef 50%,
      #efe7d3 100%);
}

/* pages invite a grab; controls keep their own cursors */
.page { cursor: grab; }
.controls, .btn, .btn:disabled { cursor: auto; }
.btn:not(:disabled) { cursor: pointer; }
body.flip-dragging { cursor: grabbing; user-select: none; }
body.flip-dragging * { cursor: grabbing !important; }

/* lighting/curl sheen + soft shadow that plays across the leaf */
.page-flip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    rgba(45, 30, 12, 0.24) 0%,
    rgba(45, 30, 12, 0.04) 16%,
    rgba(255, 253, 246, 0.4) 50%,
    rgba(45, 30, 12, 0.08) 82%,
    rgba(45, 30, 12, 0.18) 100%);
  opacity: 0;
}

.page-flip.is-flipping {
  animation: page-turn 0.95s cubic-bezier(0.42, 0.03, 0.24, 1) forwards;
}
.page-flip.is-flipping::before {
  animation: page-sheen 0.95s cubic-bezier(0.42, 0.03, 0.24, 1) forwards;
}

@keyframes page-turn {
  0% {
    transform: rotateY(0deg);
    opacity: 1;
    box-shadow: -4px 0 16px rgba(70, 50, 20, 0.14);
  }
  45% {
    box-shadow: -22px 6px 40px rgba(70, 50, 20, 0.34);
  }
  92% {
    opacity: 1;
    box-shadow: 10px 4px 22px rgba(70, 50, 20, 0.16);
  }
  100% {
    transform: rotateY(-180deg);
    opacity: 0;
    box-shadow: 4px 0 14px rgba(70, 50, 20, 0.1);
  }
}
@keyframes page-sheen {
  0%   { opacity: 0; }
  48%  { opacity: 0.85; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .page-flip.is-flipping { animation: none; }
  .page-flip.is-flipping::before { animation: none; }
}
/* center binding gutter shadow */
.spread::before {
  content: "";
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 50%;
  width: 70px;
  transform: translateX(-35px);
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(80, 55, 25, 0.05) 30%,
    rgba(80, 55, 25, 0.20) 48%,
    rgba(80, 55, 25, 0.24) 50%,
    rgba(80, 55, 25, 0.20) 52%,
    rgba(80, 55, 25, 0.05) 70%,
    transparent);
}
.page { padding: 8px 0; }
.page-left,
.page-right {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
}
.page-left { padding-right: 42px; }
.page-right {
  position: relative;
  padding-left: 42px;
  overflow: visible;
}
.page-visual {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.page-meta { padding-top: 18px; }
.page-left .page-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- writing square (genko) ---------- */
.genko {
  padding: 12px;
  background: #f7efd9;
  border: 1px solid var(--paper-edge);
  border-radius: 3px;
  box-shadow: inset 0 0 22px rgba(120, 90, 40, 0.10);
}
.genko-grid {
  position: relative;
  width: 300px;
  height: 300px;
  background: #fbf6e7;
  border: 2px solid var(--ink-soft);
}
.guide { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.guide line { stroke: rgba(120, 96, 52, 0.4); stroke-width: 0.5; stroke-dasharray: 3 3; }
.target { position: absolute; inset: 0; }
.target svg { display: block; width: 100%; height: 100%; }

/* ink-spot pointer while tracing — sized to the character stroke */
.brush-tip {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--brush, 22px);
  height: var(--brush, 22px);
  border-radius: 50%;
  background: #181510;
  opacity: 0.86;
  pointer-events: none;
  z-index: 8;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 2px rgba(20, 12, 4, 0.28);
}
.genko-grid.is-practicing,
.genko-grid.is-practicing * {
  cursor: none !important;
}

.stroke-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 324px;
  max-width: 100%;
  margin: 0 0 12px;
}
.stroke-counter {
  margin: 0;
  flex: 1;
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-size: 1.15rem;
  color: var(--ink);
}
.stroke-counter #strokeNow { font-weight: 700; }
.stroke-counter .slash { margin: 0 4px; color: var(--gold); }
.stroke-counter #strokeTotal { color: var(--ink-soft); }
.counter-label { margin-left: 8px; font-family: "EB Garamond", serif; font-style: italic; color: var(--ink-soft); }

.controls {
  display: flex;
  width: 324px;
  max-width: 100%;
  gap: 8px;
  margin-bottom: 14px;
}
.controls .btn { flex: 1; }
.btn {
  font-family: "EB Garamond", serif;
  font-size: 0.98rem;
  padding: 7px 15px;
  border-radius: 3px;
  border: 1px solid var(--ink-soft);
  background: rgba(255, 252, 240, 0.5);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.1s ease, background 0.12s ease, color 0.12s ease;
}
.btn:hover { transform: translateY(-1px); background: rgba(120, 96, 52, 0.12); }
.btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.btn--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--ink:hover { background: #000; color: #fff; }
.btn--ghost { border-style: dashed; background: transparent; }

/* ---------- right page: association illustration ---------- */
.assoc {
  margin: 0;
  text-align: center;
}
.assoc-img,
.assoc-emoji {
  /* a touch larger than the writing square now the caption is gone */
  width: 344px;
  height: 344px;
  margin: 0 auto;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 4px;
  object-fit: cover;
  /* keep the page-flip drag instead of the browser's native image drag */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  /* no hard frame — feather all four edges of the square so it melts into the
     page (intersect a horizontal + vertical soft gradient) */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 20%, #000 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 20%, #000 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
  mask-composite: intersect;
}
.assoc-emoji {
  display: grid;
  place-items: center;
  font-size: 6rem;
  line-height: 1;
}

/* ---------- right page: meaning & memory ---------- */
.memory-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.mem-meaning {
  font-family: "Shippori Mincho", serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--ink);
  text-transform: capitalize;
  line-height: 1;
  margin-bottom: 6px;
}
.mem-pronounce {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--gold);
}
.btn-speak-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mem-romaji {
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  line-height: 1;
}
.mem-pronounce:hover { color: var(--ink); }
.mem-pronounce:hover .mem-romaji { color: var(--ink); }
.mem-readings { margin-top: 8px; font-size: 1rem; color: var(--ink-soft); }
.mem-readings .rk { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.mem-readings .dot { margin: 0 8px; color: var(--line); }
.mem-char {
  font-family: "Yuji Boku", "Shippori Mincho", serif;
  font-size: 4.6rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 0.9;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.memory-story h3 {
  margin: 0 0 12px;
  font-family: "Shippori Mincho", serif;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mem-emoji { font-size: 1.5rem; }
.memory-story p {
  margin: 0;
  font-size: 1.22rem;
  line-height: 1.7;
  color: var(--ink);
}
.memory-foot { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.pill {
  font-size: 0.8rem;
  font-style: italic;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(120, 96, 52, 0.12);
  color: var(--ink-soft);
}

/* ============================================================
   Colophon (footer)
   ============================================================ */
.colophon {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.colophon p { margin: 0; font-style: italic; font-size: 1.02rem; color: var(--ink-soft); }
.colophon::before {
  content: "❦";
  display: block;
  color: var(--gold);
  margin-bottom: 8px;
}

/* ============================================================
   Responsive — book folds to a single page
   ============================================================ */
@media (max-width: 820px) {
  .book-inner {
    display: flex;
    flex-direction: column;
    padding: 30px 26px 26px;
  }
  .running-head { order: 1; }
  .picker-wrap {
    order: 2;
    margin-top: 0;
    margin-bottom: 28px;
  }
  .spread { order: 3; }
  .picker { grid-template-columns: repeat(6, 1fr); }
  .spread { grid-template-columns: 1fr; grid-template-rows: none; gap: 8px; }
  .spread::before { display: none; }
  .page-flip { display: none; }
  .page { cursor: auto; }
  .page-left,
  .page-right {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    align-items: center;
  }
  .page-left {
    padding-right: 0;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
  }
  .page-right {
    padding-left: 0;
    padding-top: 24px;
  }
  .memory-head { width: 100%; max-width: 300px; }
  .genko-grid { width: 260px; height: 260px; }
  .stroke-nav,
  .controls { width: 286px; }
  .assoc-img, .assoc-emoji { width: 260px; height: 260px; }
}
@media (max-width: 520px) {
  .picker { grid-template-columns: repeat(5, 1fr); }
}