/* Beginner pathway — contemporary Japan rooms (guided-song + study-room) */

.guided-stage {
  --guided-crossfade: 2.8s;
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #0b0b0c;
  padding: 3.25rem 0 0;
}

.guided-stage-frame {
  position: relative;
  width: 100%;
  margin: 0 auto;
  min-height: calc(100svh - 3.25rem);
  overflow: hidden;
  background: #0b0b0c;
}

.guided-stage-layers,
.guided-layer,
.guided-stage-shade {
  position: absolute;
  inset: 0;
}

.guided-stage-layers {
  z-index: 0;
}

.museum-page .guided-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity var(--guided-crossfade, 2.8s) cubic-bezier(0.4, 0, 0.2, 1);
}

.museum-page .guided-layer.is-active {
  opacity: 1;
}

.guided-stage-shade {
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(8, 8, 9, 0.28) 0%,
      transparent 28%,
      transparent 52%,
      rgba(8, 8, 9, 0.55) 78%,
      rgba(8, 8, 9, 0.82) 100%
    );
  pointer-events: none;
}

.guided-chrome {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.guided-chrome [data-romaji-toggle] {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(14, 12, 10, 0.42);
  border: 1px solid rgba(201, 164, 88, 0.32);
  border-radius: 2px;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.guided-chrome [data-romaji-toggle]:hover,
.guided-chrome [data-romaji-toggle]:focus-visible,
.guided-chrome [data-romaji-toggle][aria-pressed="true"] {
  color: var(--gold);
  border-color: var(--gold);
  outline: none;
}

.guided-welcome {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: clamp(1.5rem, 6vw, 4rem) clamp(1.25rem, 6vw, 4.5rem)
    clamp(2.5rem, 7vw, 4.75rem);
  max-width: 36rem;
}

.guided-welcome h1 {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.4vw, 3.5rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--ink);
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.45);
}

.guided-welcome-lead {
  margin: 0;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.65;
  color: color-mix(in srgb, var(--ink-soft) 94%, white);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.35);
}

.guided-welcome-hint {
  margin: 0.85rem 0 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--ink-quiet);
}

.guided-start {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.6rem;
  padding: 0.95rem 1.7rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  color: #171512;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
}

.guided-start:hover,
.guided-start:focus-visible {
  background: #d8b66a;
  border-color: #d8b66a;
  outline: none;
}

.guided-start:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.guided-start-icon {
  font-size: 0.78rem;
  line-height: 1;
}

.guided-welcome-next {
  display: block;
  margin-top: 1.15rem;
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--ink-soft) 88%, white);
  text-decoration: none;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.35);
}

.guided-welcome-next:hover,
.guided-welcome-next:focus-visible {
  color: var(--gold);
  outline: none;
}

.guided-chrome-next {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  background: rgba(14, 12, 10, 0.42);
  border: 1px solid rgba(201, 164, 88, 0.32);
  border-radius: 2px;
  padding: 0.4rem 0.75rem;
  backdrop-filter: blur(8px);
}

.guided-chrome-next:hover,
.guided-chrome-next:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
  outline: none;
}

.guided-lyric {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3.1rem;
  z-index: 2;
  padding: 3.5rem 8% 0.35rem;
  text-align: center;
  pointer-events: none;
}

.guided-lyric[data-align="start"] {
  text-align: left;
}

.guided-lyric[data-align="end"] {
  text-align: right;
}

.guided-lyric .jp-kana {
  font-size: clamp(1.65rem, 3.8vw, 2.45rem);
  letter-spacing: 0.16em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}

.guided-lyric .jp-romaji {
  font-size: 0.98rem;
  color: color-mix(in srgb, var(--ink-soft) 88%, white);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

.guided-transport {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 1rem 0.7rem;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(8, 8, 9, 0.62)
  );
}

.guided-transport button {
  flex: 0 0 auto;
  min-width: 4.2rem;
  padding: 0.35rem 0.7rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid rgba(201, 164, 88, 0.28);
  border-radius: 2px;
  cursor: pointer;
}

.guided-transport button:hover,
.guided-transport button:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
  outline: none;
}

.guided-seek {
  flex: 1 1 auto;
  appearance: none;
  height: 3px;
  border-radius: 1px;
  background: rgba(239, 233, 220, 0.28);
  accent-color: var(--gold);
  cursor: pointer;
}

.guided-time {
  flex: 0 0 auto;
  min-width: 6.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-quiet);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.beginner-after[hidden] {
  display: none;
}

.beginner-guided-page:not(.is-guided-complete) [data-guided-after],
.beginner-guided-page:not(.is-guided-complete) .museum-footer {
  display: none;
}

button.museum-btn {
  cursor: pointer;
}

.beginner-assist {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1.75rem;
}

.beginner-assist [data-study-music] {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ink-quiet);
  background: transparent;
  border: 1px solid rgba(201, 164, 88, 0.28);
  border-radius: 2px;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
}

.beginner-assist [data-study-music]:hover,
.beginner-assist [data-study-music]:focus-visible,
.beginner-assist [data-study-music][aria-pressed="true"] {
  color: var(--gold);
  border-color: var(--gold);
  outline: none;
}

@media (max-width: 720px) {
  .guided-stage {
    padding-top: 3.25rem;
  }

  .guided-stage-frame {
    min-height: calc(100svh - 3.25rem);
  }

  .guided-welcome {
    max-width: none;
  }

  .guided-lyric {
    bottom: 3.4rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .guided-time {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .museum-page .guided-layer {
    transition: none;
  }
}

.guided-stage--interlude {
  --guided-crossfade: 8.3s;
}

.museum-page .guided-stage--interlude .guided-layer {
  transition: opacity var(--guided-crossfade, 8.3s) cubic-bezier(0.37, 0, 0.63, 1);
}

@media (prefers-reduced-motion: reduce) {
  .museum-page .guided-stage--interlude .guided-layer {
    transition: none;
  }
}

.guided-stage--interlude .guided-stage-shade {
  background:
    linear-gradient(
      180deg,
      rgba(8, 8, 9, 0.16) 0%,
      transparent 20%,
      transparent 78%,
      rgba(8, 8, 9, 0.38) 100%
    );
}

.guided-continue {
  position: absolute;
  right: 1.15rem;
  bottom: 3.35rem;
  z-index: 4;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  background: rgba(14, 12, 10, 0.42);
  border: 1px solid rgba(201, 164, 88, 0.38);
  border-radius: 2px;
  padding: 0.45rem 0.85rem;
  backdrop-filter: blur(8px);
}

.guided-continue[hidden] {
  display: none;
}

.guided-stage--interlude.is-showing-verse .guided-stage-shade {
  background:
    linear-gradient(
      180deg,
      rgba(8, 8, 9, 0.16) 0%,
      transparent 20%,
      transparent 58%,
      rgba(8, 8, 9, 0.55) 82%,
      rgba(8, 8, 9, 0.78) 100%
    );
}

.guided-lyric--verse {
  bottom: 3.2rem;
  padding: 2.4rem 8% 0.85rem;
}

.guided-verse[hidden] {
  display: none;
}

.guided-verse p,
.guided-verse .jp-verse {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.22rem, 2.5vw, 1.65rem);
  font-weight: 500;
  line-height: 2.2;
  letter-spacing: 0.08em;
  color: var(--ivory);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}

.guided-verse--furigana {
  padding-top: 0.55rem;
}

.guided-verse ruby {
  ruby-position: over;
}

.guided-verse ruby rt {
  font-size: 0.46em;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.interlude-view-list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
}

.interlude-view-list li + li {
  margin-top: 0.9rem;
}

.interlude-view-list .museum-btn {
  font-size: 1.02rem;
  letter-spacing: 0.06em;
}

.interlude-keep {
  margin-top: 3.6rem;
}

.interlude-keep p {
  margin: 0 0 0.75rem;
  color: var(--ink-soft);
}

.interlude-keep .museum-btn {
  font-size: 1.02rem;
  letter-spacing: 0.06em;
}

.guided-continue:hover,
.guided-continue:focus-visible {
  color: #d8b66a;
  border-color: var(--gold);
  outline: none;
}

@media (max-width: 720px) {
  .guided-continue {
    bottom: 3.7rem;
    right: 0.85rem;
  }
}

/* Gold is a temporary visual cue, not a particle legend.
   .jp-signal means: pay attention to this signal right now.
   Use it in the introducing room, and optionally in the next room for
   one supported recognition. Then return to ordinary Japanese.
   Do not gold-code の・が・を・に・は merely because they are particles.
   Authentic KML verses stay unannotated.
   Current: を is gold in Rooms 18–19 only. */
.jp-signal {
  color: var(--gold);
  font-weight: 600;
}

.wo-signal {
  margin: 3.25rem 0 2.75rem;
}

.wo-signal .jp-block--solo {
  margin-bottom: 1.35rem;
}

.wo-signal .room-prose {
  max-width: 34rem;
  margin-top: 2.25rem;
}

#wo-beat {
  max-width: 34rem;
  margin: 2.4rem 0 1.75rem;
}

.pathway-door {
  margin: 3.75rem 0 1.6rem;
  max-width: 34rem;
}

.pathway-door p + p {
  margin-top: 0.8rem;
}

.pathway-kml-verse {
  margin-bottom: 2.75rem;
}

/* Complete authentic verse → Kanji Studies doorway.
   Use only when the learner can read the whole verse, not a fragment.
   Markup: aside.pathway-source[data-pathway-source] */
.pathway-source {
  margin: 4.25rem 0 0;
  max-width: 34rem;
}

.pathway-source .room-section-head {
  margin-bottom: 1.1rem;
}

.pathway-source .room-prose {
  max-width: 34rem;
}

.pathway-source .pathway-verse {
  margin: 1.6rem 0 1.75rem;
  text-align: left;
}

.pathway-source-link {
  margin: 1.35rem 0 0;
}

.pathway-source-link a {
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
}

.pathway-source-link a:hover,
.pathway-source-link a:focus-visible {
  color: #d8b66a;
  border-bottom-color: var(--gold);
  outline: none;
}

.pathway-verse {
  margin: 0 0 0.2rem;
  text-align: center;
}

.pathway-verse .jp-verse {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 2.6vw, 1.72rem);
  font-weight: 500;
  line-height: 2.4;
  letter-spacing: 0.06em;
  color: var(--ivory);
}

.pathway-verse ruby {
  ruby-position: over;
}

.pathway-verse ruby rt {
  /* Early Start Here → KML bridges: same size/position as now, but a
     little heavier and clearer than standard KML furigana. Keep this
     until learners are used to ruby; then return to the subtler treatment. */
  font-size: 0.46em;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

.museum-page .chat-sensei--bridge {
  margin-top: 1.15rem;
}

.museum-page .chat-sensei-flourish {
  color: var(--gold);
  opacity: 0.78;
}

.museum-page .chat-sensei-flourish:hover,
.museum-page .chat-sensei-flourish:focus-visible,
.museum-page .chat-sensei.is-open .chat-sensei-flourish {
  color: var(--gold);
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(201, 164, 88, 0.35));
}

/* Room 19 hero: same stone.png, CSS only — stone to the right of the title,
   luminous wet forest. Exhibit images below are untouched. */
[data-beginner-lesson="19"] .room-hero-inner h1,
[data-beginner-lesson="21"] .room-hero-inner h1,
[data-beginner-lesson="22"] .room-hero-inner h1,
[data-beginner-lesson="23"] .room-hero-inner h1 {
  max-width: 22ch;
}

[data-beginner-lesson="19"] .room-hero-media img {
  object-position: 4% 54%;
  filter: brightness(2.18) contrast(1.06) saturate(1.04);
  animation: room-19-hero-drift 32s ease-in-out infinite alternate;
}

[data-beginner-lesson="19"] .room-hero-veil {
  background:
    linear-gradient(
      90deg,
      rgba(8, 8, 9, 0.72) 0%,
      rgba(8, 8, 9, 0.38) 26%,
      rgba(8, 8, 9, 0.08) 48%,
      transparent 66%
    ),
    linear-gradient(
      180deg,
      rgba(8, 8, 9, 0.18) 0%,
      transparent 24%,
      rgba(8, 8, 9, 0.16) 80%,
      rgba(8, 8, 9, 0.5) 100%
    );
}

@keyframes room-19-hero-drift {
  from {
    transform: scale(1.48) translate3d(40%, 3%, 0);
  }
  to {
    transform: scale(1.54) translate3d(44%, 1%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-beginner-lesson="19"] .room-hero-media img {
    animation: none !important;
    transform: scale(1.5) translate3d(42%, 2%, 0) !important;
  }
}

/* Room 29 hero: partition.png — keep the bun-sharing in the open right,
   lift the afternoon light through the veil. Exhibit stays part.png. */
[data-beginner-lesson="29"] .room-hero-media img {
  object-position: 68% 40%;
  filter: brightness(1.16) contrast(1.04) saturate(1.06);
}

/* Room 34 hero: dream.png — the lower-left is a dark silhouette under the
   title. Keep that foreground in frame, lift it just enough to read through
   the veil. Exhibit stays untouched. */
[data-beginner-lesson="34"] .room-hero-media img {
  object-position: 22% 48%;
  filter: brightness(1.2) contrast(1.06) saturate(1.05);
}

[data-beginner-lesson="34"] .room-hero-veil {
  background:
    linear-gradient(
      90deg,
      rgba(8, 8, 9, 0.46) 0%,
      rgba(8, 8, 9, 0.2) 30%,
      rgba(8, 8, 9, 0.08) 56%,
      transparent 76%
    ),
    linear-gradient(
      180deg,
      rgba(8, 8, 9, 0.2) 0%,
      transparent 28%,
      rgba(8, 8, 9, 0.2) 78%,
      rgba(8, 8, 9, 0.58) 100%
    );
}

/* Room 35 hero: bed.png — keep the sleeping figure in the open right.
   Leave the room dark; a very slight local lift on the dog only.
   Exhibit stays untouched. */
[data-beginner-lesson="35"] .room-hero-media img {
  object-position: 78% 62%;
  filter: brightness(1.1) contrast(1.04);
}

[data-beginner-lesson="35"] .room-hero-veil {
  background:
    linear-gradient(
      105deg,
      rgba(8, 8, 9, 0.88) 0%,
      rgba(8, 8, 9, 0.52) 34%,
      rgba(8, 8, 9, 0.18) 62%,
      rgba(8, 8, 9, 0.12) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8, 8, 9, 0.32) 0%,
      transparent 30%,
      rgba(8, 8, 9, 0.22) 78%,
      rgba(8, 8, 9, 0.48) 100%
    ),
    radial-gradient(
      ellipse 38% 44% at 78% 70%,
      rgba(255, 232, 200, 0.2),
      transparent 70%
    );
}

/* Room 38: give the completed 46/46 grid a little air.
   The filled chart is the event; do not decorate it. */
[data-beginner-lesson="38"] .kana-puzzle-section {
  margin: 3.75rem 0 2.75rem;
}

[data-beginner-lesson="38"] .kana-puzzle {
  margin: 1.85rem 0 0;
  max-width: 44rem;
}

[data-beginner-lesson="38"] .kana-puzzle-complete {
  margin: 1.85rem 0 0;
  max-width: 40rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.pathway-film {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0b0b0c;
  border-radius: 2px;
  overflow: hidden;
}

.pathway-film iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Room 39 close: air after the film. No trophy treatment. */
.pathway-close {
  margin: 4.5rem 0 1.5rem;
  padding-top: 3rem;
  max-width: 34rem;
  border-top: 1px solid rgba(201, 164, 88, 0.14);
}

.pathway-close .jp-block--solo {
  margin: 0 0 1.75rem;
  text-align: left;
}

.pathway-close .room-prose {
  margin-bottom: 0;
}

.pathway-close .room-prose + .room-prose {
  margin-top: 1.75rem;
}

.pathway-close-count {
  margin: 2.25rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--gold) 78%, transparent);
}

.pathway-close-actions {
  margin-top: 2.25rem;
}

.pathway-close-back {
  margin: 1.85rem 0 0;
}