body {
  margin: 0;
  font-family: 'EB Garamond', serif;
  min-height: 2200px; /* increased from 2000px */

  /* night-sky background: deep navy gradient + faint nebula + subtle star texture */
  background-color: #071028; /* deep navy base */
  background-image:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,0.03), transparent 12%),
    radial-gradient(circle at 80% 30%, rgba(80,120,160,0.06), transparent 20%),
    linear-gradient(180deg, #081427 0%, #071028 50%, #031822 100%),
    repeating-radial-gradient(circle at 50% 20%,
      rgba(255,255,255,0.008) 0 1px,
      rgba(0,0,0,0.01) 1px 2px);
  background-size: 40% 40%, 50% 40%, cover, 600px 600px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  color: #e9e6df; /* light, warm text color for legibility on dark sky */

  /* very slow, subtle drift for nebula feeling */
  animation: grassBreeze 90s linear infinite;
}

/* keep the existing animation keyframes name but slow it dramatically for a calm sky */
@keyframes grassBreeze {
  0% { background-position: 0 0, 0 0, 0 0, 0 0; }
  50% { background-position: 60px 0, -40px 0, 0 0, 0 0; }
  100% { background-position: 0 0, 0 0, 0 0, 0 0; }
}

/* subtle adjustment so the canvas blends gently with sky (optional tweak) */
#vector-field {
  mix-blend-mode: screen; /* stars blend nicely on top of dark sky */
  opacity: 0.95;
}

.paper {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  min-height: 2000px; /* increased from 2000px */
  background: none;
  z-index: 1;
}

.scroll-cap {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  position: relative;
}

.scroll-cap.top {
  height: 20px; /* Much thinner for authentic Japanese scroll look */
}

.scroll-cap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #f8ecd2;
  border: 2px solid #c2a77d;
  border-radius: 0;
  box-shadow: 
    inset -3px 0 6px rgba(139, 69, 19, 0.15),
    inset 3px 0 6px rgba(139, 69, 19, 0.15);
  z-index: 1;
}

.scroll-cap::after {
  content: "";
  position: absolute;
  left: -35px;
  right: -35px;
  top: 8px;
  bottom: 8px;
  background: 
    radial-gradient(ellipse 70% 100% at center 30%, 
      rgba(205, 133, 63, 0.8) 0%, 
      #8B4513 15%, 
      #654321 35%, 
      #4A2C17 60%, 
      #3E2723 80%, 
      #2C1810 100%),
    linear-gradient(180deg, 
      #A0522D 0%, 
      #8B4513 20%, 
      #654321 40%, 
      #4A2C17 60%, 
      #3E2723 80%, 
      #2C1810 100%);
  border-radius: 50px;
  box-shadow: 
    0 6px 18px rgba(0,0,0,0.5),
    inset 0 -3px 6px rgba(0,0,0,0.4),
    inset 0 3px 8px rgba(139, 69, 19, 0.3),
    inset 2px 0 4px rgba(205, 133, 63, 0.2),
    inset -2px 0 4px rgba(0,0,0,0.3);
  z-index: 0;
}

/* Remove decorative wooden caps from top scroll cap only */
.scroll-cap.top::after {
  display: block;
  top: 0;
  bottom: 0;
  left: -8px;   /* narrower rectangular edges */
  right: -8px;
  border-radius: 0; /* make them rectangles */
}

.scroll-cap.top { position: relative; z-index: 11; }
.scroll-cap.bottom {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) rotate(180deg);
  width: 700px;
  height: 60px;
  margin: 0;
  z-index: 50;
}

.paper::before {
  /* removed the white sheet / drop-shadow behind the scroll */
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 20px; bottom: 60px; /* retained spacing to keep layout intact */
  background: transparent;  /* cleared the background that caused the white rectangle */
  box-shadow: none;         /* removed the drop shadow */
  z-index: 0;
  pointer-events: none;
}

.letter {
  box-sizing: border-box;       /* ensure padding is included in max-height calculations */
  background: linear-gradient(to bottom, #f8ecd2 0%, #f6e8dc 100%);
  padding: 0 3rem;              /* collapsed: remove vertical padding so it doesn't show */
  /* removed strong sheet-like shadow so the page feels softer */
  box-shadow: none;
  line-height: 1.8;
  border-left: 2px solid #c2a77d;
  border-right: 2px solid #c2a77d;
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;                   /* fully hidden until revealed */
  transition:
    max-height 1.2s cubic-bezier(.77,0,.18,1),
    padding 1.2s cubic-bezier(.77,0,.18,1),
    opacity 0.5s ease;
}

h1 {
  font-family: 'Dancing Script', cursive;
  font-size: 3rem;
  margin-bottom: 2rem;
  color: #4b3a2f;
}
p {
  margin-bottom: 3rem;
  color: #4b3a2f;
}
.closing {
  text-align: right;
  font-style: italic;
  color: #4b3a2f;
}

.vine {
  position: absolute;
  top: 0;
  height: 100%;
  width: 120px;
  pointer-events: none;
  z-index: 4;
}
.vine-left  { left: -65px; }   /* moved slightly outward */
.vine-right { right: -65px; transform: scaleX(-1); } /* moved slightly outward */

.scroll-wrapper {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  z-index: 80; /* lowered so the scroll-string (z-index:90) can sit above the top cap */
  transition: top 1s cubic-bezier(.77,0,.18,1), transform 1s cubic-bezier(.77,0,.18,1);
}

.scroll-wrapper.move-top {
  top: 0;
  transform: translate(-50%, 0);
}

.scroll-wrapper.unravelled {
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  width: 700px;
  z-index: 70; /* keep elevated while transitioning so ribbon and wrapper remain on top */
}

.scroll-wrapper.unravelled .scroll-cap.top { position: relative; }
.scroll-wrapper.unravelled .scroll-cap.bottom {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  width: 700px;
  height: 60px;
  margin: 0;
  z-index: 11;
}

.scroll-wrapper.unravelled .letter {
  max-height: 3000px; /* increased from 2000px */
  padding: 5rem 3rem;           /* restore vertical padding on reveal */
  opacity: 1;
}

/* Ensure the letter expands even when .letter is outside the scroll-wrapper */
.paper.unravelled .letter {
  max-height: 3000px; /* increased from 2000px */
  padding: 5rem 3rem;           /* restore vertical padding on reveal */
  opacity: 1;
}

.unravel-btn {
  /* move the knot to the root stacking context so it can sit above the string */
  position: fixed; /* changed from absolute -> fixed */
  left: 50%;
  top: 50%;
  /* move the knot 20px down */
  transform: translate(-50%, -50%) translateY(20px);
  /* Make the button chrome invisible so only the SVG path remains visible */
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  cursor: pointer;
  transition: opacity 0.5s;
  z-index: 1200; /* ensure this is bigger than .scroll-string (90) */
  width: auto;
  height: auto;
  display: inline-block;
  -webkit-appearance: none;
  appearance: none;
}
.unravel-btn:hover { background: transparent; }
.scroll-wrapper.move-top ~ .unravel-btn { opacity: 0; pointer-events: none; }
.scroll-wrapper.unravelled ~ .unravel-btn { display: none; }

/* Ribbon/knot control (replaces .unravel-btn) */
.ribbon-knot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 110; /* keep ribbon-knot above the string as well (was 85) */
  outline: none;
}
.ribbon-knot:focus { box-shadow: 0 0 0 4px rgba(194,167,125,0.18); border-radius: 12px; }
.ribbon-knot .visually-hidden { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Knot pieces initial styles */
.ribbon-knot .knot .loop { transform-origin: center; transition: transform 700ms cubic-bezier(.2,.9,.2,1), opacity 400ms ease; }
.ribbon-knot .knot .tie { transition: transform 700ms cubic-bezier(.2,.9,.2,1), opacity 400ms ease; }

/* Untie animation: move loops outward and drop the tie */
.ribbon-knot.untied .knot .loop.left { transform: translateX(-34px) rotate(-20deg); }
.ribbon-knot.untied .knot .loop.right { transform: translateX(34px) rotate(20deg); }
.ribbon-knot.untied .knot .tie { transform: translateY(18px) rotate(8deg); opacity: 0; }

/* After untie: fade out entire ribbon band slowly */
.ribbon-knot.untied rect { transition: opacity 900ms ease 600ms; opacity: 0.15; }

/* Hide the ribbon control once the scroll is unravelled to avoid duplicate controls */
.scroll-wrapper.unravelled .ribbon-knot { display: none; }

/* Vertical variant styles */
.scroll-cap.top .ribbon-knot.vertical {
  width: 64px;
  height: 150px; /* increased by +10px to match SVG */
  left: 50%;
  bottom: 0; /* anchor to bottom of the top cap */
  transform: translateX(-50%) translateY(calc(42% + 40px)); /* move knot + string down another 10px */
  pointer-events: auto;
}

/* ensure the inline svg scales to the declared height */
.ribbon-knot.vertical svg { display: block; width: 64px; height: 150px; margin: 0 auto; }

/* Keep the knot group horizontal while controlling its children via transforms */
.ribbon-knot.vertical .knot { transform-origin: 50% 68px; transition: transform 700ms cubic-bezier(.2,.9,.2,1); }
.ribbon-knot.vertical .knot .loop { transform-origin: center; transition: transform 700ms cubic-bezier(.2,.9,.2,1), opacity 400ms ease; }
.ribbon-knot.vertical .knot .tie { transition: transform 700ms cubic-bezier(.2,.9,.2,1), opacity 400ms ease; }

/* When untied: retract the vertical ribbon upward (shorten height visually)
   by scaling its height from the bottom origin, leaving the knot to fall away. */
    .ribbon-knot.vertical .ribbon-line { transform-origin: 50% 150px; transition: transform 520ms cubic-bezier(.2,.9,.2,1), opacity 420ms ease; }
.ribbon-knot.vertical.untied .ribbon-line { transform: scaleY(0); opacity: 0.25; }

/* Move loops apart horizontally, keep them roughly level (knot stays horizontal) */
  .ribbon-knot.vertical.untied .knot .loop.left { transform: translate(-12px, 0) rotate(-6deg); }
  .ribbon-knot.vertical.untied .knot .loop.right { transform: translate(12px, 0) rotate(6deg); }
  .ribbon-knot.vertical.untied .knot .tie { transform: translateY(14px) rotate(6deg); opacity: 0; }

/* Slight bounce for a nicer feel */
  .ribbon-knot.vertical.untied .knot { transform: translateY(2px); }

.scroll-cap-bottom-anim {
  position: fixed;
  left: 50%;
  width: 700px;
  height: 60px;
  transform: translate(-50%, 0) rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  top: calc(50% + 10px); /* Adjusted to connect with thinner top cap */
  pointer-events: none;
  transition: top 1s cubic-bezier(.77,0,.18,1), transform 1s cubic-bezier(.77,0,.18,1);
}

/* Move the bottom cap up higher when the scroll wrapper is moved to top.
   20px aligns the top of the bottom cap with the bottom edge of the thinner top cap (height: 20px). */
.scroll-wrapper.move-top ~ .scroll-cap-bottom-anim,
.scroll-wrapper.move-top + .scroll-cap-bottom-anim {
  top: 20px;
  transform: translate(-50%, 0) rotate(180deg);
}

.scroll-cap-bottom-anim::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #f8ecd2;
  border: 2px solid #c2a77d;
  border-radius: 4px;
  box-shadow: 
    inset -3px 0 6px rgba(139, 69, 19, 0.15),
    inset 3px 0 6px rgba(139, 69, 19, 0.15);
  z-index: 1;
}

.scroll-cap-bottom-anim::after {
  content: "";
  position: absolute;
  left: -35px;
  right: -35px;
  top: 8px;
  bottom: 8px;
  background: 
    radial-gradient(ellipse 70% 100% at center 30%, 
      rgba(205, 133, 63, 0.8) 0%, 
      #8B4513 15%, 
      #654321 35%, 
      #4A2C17 60%, 
      #3E2723 80%, 
      #2C1810 100%),
    linear-gradient(180deg, 
      #A0522D 0%, 
      #8B4513 20%, 
      #654321 40%, 
      #4A2C17 60%, 
      #3E2723 80%, 
      #2C1810 100%);
  border-radius: 50px;
  box-shadow: 
    0 6px 18px rgba(0,0,0,0.5),
    inset 0 -3px 6px rgba(0,0,0,0.4),
    inset 0 3px 8px rgba(139, 69, 19, 0.3),
    inset 2px 0 4px rgba(205, 133, 63, 0.2),
    inset -2px 0 4px rgba(0,0,0,0.3);
  z-index: 0;
}

/* Knot path appearance and transition (unravel = stroke erasing) */
.knot-path {
  transition: stroke-dashoffset 700ms cubic-bezier(.2,.9,.2,1), opacity 420ms ease, transform 700ms cubic-bezier(.2,.9,.2,1);
  transform-origin: 50% 50%;
  pointer-events: none; /* visual only */
  /* initial values will be set/read in JS (stroke-dasharray / stroke-dashoffset) */
}

/* When the control receives .untied, nudge the knot down and fade it while the path stroke erases */
.ribbon-knot.untied .knot-path {
  opacity: 0.12;
  transform: translateY(10px) scale(0.98);
}

/* String that visually ties the top and bottom caps together */
.scroll-string {
  position: fixed;
  left: 50%;
  top: calc(50% - 40px + 25px);
  transform: translate(-50%, 0);
  width: 6px;
  height: 90px;
  border-radius: 6px;
  /* changed to a red ribbon */
  background: linear-gradient(to bottom, #ff6b6b 0%, #c62828 50%, #8b0000 100%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.05), 0 6px 14px rgba(0,0,0,0.12);
  z-index: 90;
  opacity: 1;
  pointer-events: none;
  transition: opacity 520ms cubic-bezier(.2,.9,.2,1), transform 520ms cubic-bezier(.2,.9,.2,1);
}

/* Ensure the SVG knot stroke uses the SVG gradient; keep stroke-width and transitions */
.knot-path,
.unravel-btn path {
  stroke-width: 6;
  transition: stroke-dashoffset 700ms cubic-bezier(.2,.9,.2,1), opacity 420ms ease, transform 700ms cubic-bezier(.2,.9,.2,1);
}

/* When the scroll is moved/opened, fade the string and nudge it so it appears to fall away. */
.scroll-wrapper.unravelled + .scroll-string,
.scroll-wrapper.move-top + .scroll-string {
  opacity: 0;
  transform: translate(-50%, -20px) scaleY(0.6);
}

/* Ensure the string fades when the knot is untied (body.untied added by JS).
   This works even though the knot was moved to fixed positioning. */
body.untied .scroll-string {
  opacity: 0;
  transform: translate(-50%, -20px) scaleY(0.6);
  transition: opacity 520ms cubic-bezier(.2,.9,.2,1), transform 520ms cubic-bezier(.2,.9,.2,1);
}

/* Puzzle Modal Styles */
.puzzle-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 30% 20%, rgba(139, 90, 43, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
    rgba(7, 16, 40, 0.92);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 1;
  transition: opacity 0.6s ease;
}

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

.puzzle-content {
  background: 
    linear-gradient(135deg, rgba(248, 236, 210, 0.98) 0%, rgba(246, 232, 220, 0.95) 100%);
  padding: 3.5rem 3rem;
  border: 1px solid rgba(194, 167, 125, 0.8);
  border-radius: 20px;
  box-shadow: 
    0 25px 80px rgba(0,0,0,0.4),
    0 10px 30px rgba(139, 90, 43, 0.2),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(139, 90, 43, 0.1);
  max-width: 520px;
  width: 90%;
  text-align: center;
  position: relative;
  transform: translateY(-20px);
  animation: modalAppear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes modalAppear {
  from {
    opacity: 0;
    transform: translateY(-40px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(-20px) scale(1);
  }
}

.puzzle-ornament {
  font-size: 1.8rem;
  color: #8B5A2B;
  margin-bottom: 1rem;
  opacity: 0.7;
  text-shadow: 0 2px 4px rgba(139, 90, 43, 0.3);
}

.puzzle-ornament.bottom {
  margin-top: 1.5rem;
  margin-bottom: 0;
  transform: rotate(180deg);
}

.puzzle-content h2 {
  font-family: "Crimson Text", Georgia, "Times New Roman", serif;
  font-size: 2rem;
  color: #4b3a2f;
  margin-bottom: 2rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.1);
  font-weight: 600;
  letter-spacing: -0.5px;
}

.puzzle-question {
  font-family: "Crimson Text", Georgia, serif;
  font-size: 1.2rem;
  color: #5d4a3f;
  margin-bottom: 2.5rem;
  line-height: 1.6;
  font-style: italic;
  text-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.word-definition {
  text-align: left;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(139, 90, 43, 0.05);
  border-radius: 12px;
  border-left: 4px solid #8B5A2B;
}

.word-definition p {
  margin-bottom: 1rem;
  font-family: "Crimson Text", Georgia, serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #4b3a2f;
}

.word-definition p:last-child {
  margin-bottom: 0;
}

.definition-text {
  font-style: italic;
}

.part-of-speech {
  color: #6b5b50;
  font-weight: 600;
}

.example-sentence em {
  background: rgba(139, 90, 43, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
  font-style: normal;
  font-weight: 600;
}

#puzzle-answer {
  width: 100%;
  padding: 16px 20px;
  font-family: "Crimson Text", Georgia, serif;
  font-size: 1.1rem;
  border: 2px solid rgba(194, 167, 125, 0.6);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: #4b3a2f;
  margin-bottom: 2rem;
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    inset 0 2px 4px rgba(0,0,0,0.05),
    0 2px 8px rgba(139, 90, 43, 0.1);
}

#puzzle-answer:focus {
  border-color: #8B5A2B;
  box-shadow: 
    0 0 0 4px rgba(139, 90, 43, 0.15),
    inset 0 2px 4px rgba(0,0,0,0.05),
    0 4px 16px rgba(139, 90, 43, 0.2);
  transform: translateY(-1px);
}

#puzzle-answer::placeholder {
  color: rgba(75, 58, 47, 0.5);
  font-style: italic;
}

#puzzle-submit {
  background: linear-gradient(135deg, #8B5A2B 0%, #A0522D 50%, #8B5A2B 100%);
  color: white;
  border: none;
  padding: 14px 36px;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 4px 16px rgba(139, 90, 43, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#puzzle-submit:hover {
  background: linear-gradient(135deg, #A0522D 0%, #CD853F 50%, #A0522D 100%);
  transform: translateY(-2px);
  box-shadow: 
    0 8px 24px rgba(139, 90, 43, 0.4),
    inset 0 1px 0 rgba(255,255,255,0.3);
}

#puzzle-submit:active {
  transform: translateY(-1px);
  box-shadow: 
    0 4px 12px rgba(139, 90, 43, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.2);
}

.puzzle-feedback {
  margin-top: 1.5rem;
  font-family: "Crimson Text", Georgia, serif;
  font-size: 1rem;
  min-height: 1.5rem;
  transition: all 0.4s ease;
  font-style: italic;
}

.puzzle-feedback.correct {
  color: #2d5016;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(45, 80, 22, 0.2);
}

.puzzle-feedback.incorrect {
  color: #8b0000;
  text-shadow: 0 1px 2px rgba(139, 0, 0, 0.2);
}

body.no-scroll {
  overflow: hidden;               /* block wheel/keyboard scrolling */
  overscroll-behavior: none;      /* prevent touch-driven bounce/overscroll */
  touch-action: none;             /* block pointer/touch scrolling on some devices */
  height: 100vh;                  /* avoid layout shifts on some browsers when overflow hidden */
}

#vector-field {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;               /* sits above background but behind paper (paper z-index:1) */
  pointer-events: none;     /* don't block interaction */
  mix-blend-mode: multiply; /* subtle blending with grass tones */
  opacity: 0.95;
}

/* ensure content remains above the canvas */
.paper { z-index: 1; }
  pointer-events: none;     /* don't block interaction */
  mix-blend-mode: multiply; /* subtle blending with grass tones */
  opacity: 0.95;


/* ensure content remains above the canvas */
.paper { z-index: 1; }