/* Repairs to the inherited room UI, not a new scene or navigation system. */
/* Native scramble nodes still receive their timelines/callbacks. Their complete
   visible labels live beside them so A–Z transition tails cannot leak out. */
html[lang='zh-CN'] :is(.nav-buttons-wrap, .nav-mess-wrap) [data-jc-native-nav-label] {
  display: none !important;
}

html[lang='zh-CN'] .nav-buttons-wrap .btn-inner > [data-jc-nav-label] {
  font-size: .8rem;
  line-height: 1;
}

html[lang='zh-CN'] .nav-buttons-wrap [data-jc-nav-label] {
  transition: opacity 140ms ease;
}

html[lang='zh-CN'] .nav-buttons-wrap.is-closed .btn-wrap:not(.is-1) [data-jc-nav-label] {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html[lang='zh-CN'] .nav-buttons-wrap [data-jc-nav-label] { transition: none; }
}

html[lang='zh-CN'] .btn-toggle .btn-inner.is-toggle {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
}

html[lang='zh-CN'] .btn-toggle .btn-icon.toggle {
  flex: 0 0 clamp(18px, 1.5em, 24px);
  width: clamp(18px, 1.5em, 24px);
  height: clamp(18px, 1.5em, 24px);
  max-width: none;
  object-fit: contain;
}

html[lang='zh-CN'] .btn-toggle:focus-visible {
  outline: 2px solid #2d55d7;
  outline-offset: 3px;
}

/* Keep the room's centered text position without its English-only splitter
   or the float-text attribute targeted by the legacy scramble-out animation. */
html[lang='zh-CN'] [data-jc-intro] {
  position: absolute;
  inset-inline: 0;
  transform: translate(0, -50%);
  display: grid;
  grid-template-columns: 1em minmax(0, 1fr);
  column-gap: .65em;
  align-items: baseline;
  width: 100%;
  height: auto;
  margin: 0;
  letter-spacing: -.025em;
  text-transform: none;
}

html[lang='zh-CN'] [data-jc-intro-copy] {
  display: block;
  min-width: 0;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
  text-wrap: pretty;
}

html[lang='zh-CN'] [data-jc-intro] .jc-intro-term {
  white-space: nowrap;
}

/* Empty compatibility target for the archived engine's about timeline. It
   carries no content; the actual paragraph is never split or scrambled. */
[data-jc-intro-legacy] {
  display: none !important;
}

/* Retain the small inherited labels; enlarge only the surrounding touch area.
   The native timelines still own menu transforms, opacity and visibility. */
@media (max-width: 991px) {
  html[lang='zh-CN']:not([data-jc-art-study]) :is(.nav-buttons-wrap, .nav-mess-wrap) {
    --jc-nav-hit-padding: 4.5px;
    /* The HUD's 1.25em bottom inset scales with the scene. Compensate for it
       rather than changing the HUD height and the engine's measured geometry. */
    bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) - 1.25em);
    padding-block: 0;
    row-gap: 3px;
  }

  html[lang='zh-CN']:not([data-jc-art-study]) :is(.nav-buttons-wrap, .nav-mess-wrap) .btn-wrap {
    min-height: 44px;
    padding-block: var(--jc-nav-hit-padding);
  }

  html[lang='zh-CN']:not([data-jc-art-study]) :is(.nav-buttons-wrap, .nav-mess-wrap) .btn-bg {
    /* The hover fill follows the existing label, not the larger hit area. */
    inset-block: var(--jc-nav-hit-padding);
  }

  html[lang='zh-CN']:not([data-jc-art-study]) .nav-scroll-wrap {
    bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) - 1.25em);
  }

  html[lang='zh-CN']:not([data-jc-art-study]) .nav-scroll-wrap > a {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
  }
}

/* Short screens need fewer rows, not smaller targets. Keep each native link
   and timeline intact; only let the flex layout use the available floor. */
@media (min-width: 540px) and (max-width: 991px) and (max-height: 500px) {
  html[lang='zh-CN']:not([data-jc-art-study]) .nav-buttons-wrap {
    flex-direction: row;
    width: min(calc(100% - 64px), calc(36rem + 9px));
    gap: 3px;
  }

  html[lang='zh-CN']:not([data-jc-art-study]) .nav-buttons-wrap .btn-wrap {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (max-width: 539px) and (max-height: 650px) {
  html[lang='zh-CN']:not([data-jc-art-study]) .nav-buttons-wrap {
    flex-direction: row;
    flex-wrap: wrap;
    width: min(100%, calc(18rem + 3px));
    gap: 3px;
  }

  html[lang='zh-CN']:not([data-jc-art-study]) .nav-buttons-wrap .btn-wrap {
    flex: 0 1 calc((100% - 3px) / 2);
    min-width: 0;
  }

  /* The optional scroll hint would share the two-row menu's footprint.
     Scrolling and the existing skip link remain available. The loading
     fallback can set inline visibility, so this one hint stays suppressed. */
  html[lang='zh-CN']:not([data-jc-art-study]) .nav-scroll-wrap {
    visibility: hidden !important;
    pointer-events: none;
  }
}

/* A visible underline survives the native overflow/mask used for animation;
   an outer focus rectangle would be clipped or resemble another button box. */
html[lang='zh-CN']:not([data-jc-art-study]) :is(.nav-buttons-wrap, .nav-mess-wrap) .btn-wrap:focus-visible {
  outline: none;
}

html[lang='zh-CN']:not([data-jc-art-study]) :is(.nav-buttons-wrap, .nav-mess-wrap) .btn-wrap:focus-visible .btn-inner > .btn-txt {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* A local object has one exit. Retain the native menu's geometry and animation
   state, but remove both its visible controls and keyboard targets until the
   local caption closes. Descendants can carry their own GSAP visibility. */
html[lang='zh-CN']:has(.jc-local-scene.is-open[aria-hidden='false'])
  :is(.nav-buttons-wrap, .nav-mess-wrap, .nav-scroll-wrap),
html[lang='zh-CN']:has(.jc-local-scene.is-open[aria-hidden='false'])
  :is(.nav-buttons-wrap, .nav-mess-wrap, .nav-scroll-wrap) * {
  visibility: hidden !important;
  pointer-events: none !important;
}

html[lang='zh-CN'] .jc-local-scene {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

/* Do not leave a fading caption underneath the restored room navigation. */
html[lang='zh-CN'] .jc-local-scene:not(.is-open) {
  visibility: hidden;
}

html[lang='zh-CN'] .jc-local-scene > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Local object focus temporarily removes reading content from the camera view,
   without removing its layout or changing its saved scrolling position. */
html[lang='zh-CN'] .main-wrapper[data-jc-local-focus-hidden='true'] {
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  touch-action: none !important;
  overscroll-behavior: none !important;
}

html[lang='zh-CN'] .jc-local-scene__back {
  min-height: 44px;
  justify-self: end;
}

@media (max-width: 600px) {
  html[lang='zh-CN'] .jc-local-scene {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

/* Formal room: a small annotation in the scene margin, not a floating modal
   card. The study page keeps its separately authored caption treatment. */
html[lang='zh-CN']:not([data-jc-art-study]) .jc-local-scene {
  --jc-caption-ink: #222824;
  --jc-caption-line: rgba(34, 40, 36, .3);
  --jc-caption-gutter: clamp(20px, 2.2vw, 32px);
  /* The lower side margins can contain foreground furniture. Keep this small
     annotation over the open floor below the focused subject instead. */
  left: 50%;
  translate: -50% 0;
  bottom: max(var(--jc-caption-gutter), env(safe-area-inset-bottom, 0px));
  width: min(420px, calc(100vw - 2 * var(--jc-caption-gutter) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 12px 0 0;
  color: var(--jc-caption-ink);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--jc-caption-line);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[lang='zh-CN'].dark:not([data-jc-art-study]) .jc-local-scene {
  --jc-caption-ink: #edf0ec;
  --jc-caption-line: rgba(237, 240, 236, .35);
}

html[lang='zh-CN']:not([data-jc-art-study]) .jc-local-scene__eyebrow {
  margin: 0 0 5px;
  color: inherit;
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  opacity: 1;
}

html[lang='zh-CN']:not([data-jc-art-study]) .jc-local-scene__title {
  margin: 0;
  color: inherit;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.015em;
}

html[lang='zh-CN']:not([data-jc-art-study]) .jc-local-scene__detail {
  margin: 5px 0 0;
  color: inherit;
  font-size: 13px;
  line-height: 1.5;
}

html[lang='zh-CN']:not([data-jc-art-study]) .jc-local-scene__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--jc-caption-line);
  text-underline-offset: 6px;
  transition: text-decoration-color 160ms ease-out;
}

html[lang='zh-CN']:not([data-jc-art-study]) .jc-local-scene__back:is(:hover, :focus-visible) {
  color: inherit;
  background: transparent;
  text-decoration-color: currentColor;
}

html[lang='zh-CN']:not([data-jc-art-study]) .jc-local-scene__back:focus-visible {
  /* A strengthened underline is the keyboard indicator, not another box. */
  outline: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

@media (max-width: 359px) {
  html[lang='zh-CN']:not([data-jc-art-study]) .jc-local-scene {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[lang='zh-CN']:not([data-jc-art-study]) :is(.jc-local-scene, .jc-local-scene__back) {
    transition: none;
  }
}

/* Keep keyboard feedback inside the native overflow masks. */
html[lang='zh-CN']:not([data-jc-art-study]) [hero-trigger] a[data-hiring-link]:focus-visible > .btn-inner > .btn-txt {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

html[lang='zh-CN']:not([data-jc-art-study]) .hud-mode-wrap > .btn-toggle[color-state]:focus-visible > .btn-inner {
  outline: 2px solid currentColor;
  outline-offset: -3px;
}

/* A listening annotation attached to the guitar, in the room's existing ink.
   Mounting precedes focus: this CSS participates in the first camera HUD fit. */
html[lang='zh-CN'] .jc-guitar-music {
  display: none;
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font-size: 13px;
  line-height: 1.5;
}

html[lang='zh-CN'][data-jc-local-focus-target='吉他'] .jc-guitar-music {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 0;
}

html[lang='zh-CN'][data-jc-local-focus-target='吉他'] .jc-local-scene {
  row-gap: 10px;
}

html[lang='zh-CN'][data-jc-local-focus-target='吉他'] [data-cursor-wrap] {
  /* The room's shake hint does not describe transport controls. */
  visibility: hidden !important;
}

html[lang='zh-CN'] .jc-guitar-music :is(p, h3) {
  margin: 0;
  color: inherit;
}

html[lang='zh-CN'] .jc-guitar-music__title {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}

html[lang='zh-CN'] .jc-guitar-music__artist {
  /* Attribution has its own linked line below the transport. */
  display: none;
}

html[lang='zh-CN'] .jc-guitar-music__transport {
  display: flex;
  align-items: center;
  gap: 2px;
}

html[lang='zh-CN'] .jc-guitar-music button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 5px;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  font: inherit;
  cursor: pointer;
  text-underline-offset: 5px;
}

html[lang='zh-CN'] .jc-guitar-music button:is(:hover, :focus-visible) {
  text-decoration: underline;
}

html[lang='zh-CN'] .jc-guitar-music :is(button, a):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

html[lang='zh-CN'] .jc-guitar-music button:disabled {
  cursor: default;
  opacity: .55;
}

html[lang='zh-CN'] .jc-guitar-music__timeline {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

html[lang='zh-CN'] .jc-guitar-music input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}

html[lang='zh-CN'] .jc-guitar-music input[type='range']::-webkit-slider-runnable-track {
  height: 1px;
  background: var(--jc-caption-line, currentColor);
}

html[lang='zh-CN'] .jc-guitar-music input[type='range']::-moz-range-track {
  height: 1px;
  background: var(--jc-caption-line, currentColor);
}

html[lang='zh-CN'] .jc-guitar-music input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: currentColor;
}

html[lang='zh-CN'] .jc-guitar-music input[type='range']::-moz-range-thumb {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 50%;
  background: currentColor;
}

html[lang='zh-CN'] .jc-guitar-music input[type='range']:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

html[lang='zh-CN'] .jc-guitar-music input[type='range']:disabled {
  cursor: default;
}

html[lang='zh-CN'] .jc-guitar-music__time {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

html[lang='zh-CN'] .jc-guitar-music__volume {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 136px;
  font-size: 12px;
  white-space: nowrap;
}

html[lang='zh-CN'] .jc-guitar-music__status {
  grid-column: 1;
  grid-row: 3;
  min-height: 40px;
  display: flex;
  align-items: center;
  font-size: 12px;
}

html[lang='zh-CN'] .jc-guitar-music__credits {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  font-size: 12px;
}

html[lang='zh-CN'] .jc-guitar-music__credits a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--jc-caption-line, currentColor);
  text-underline-offset: 4px;
}

/* Ready-time audio control, sharing the upper-right lamp's margin.
   One small transport control remains available after returning to the room. */
html[lang='zh-CN'] .jc-music-toggle {
  position: fixed;
  z-index: 22;
  top: max(12px, 1.25em, env(safe-area-inset-top, 0px));
  right: calc(max(12px, 1.25em, env(safe-area-inset-right, 0px)) + 50px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #222824;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

html[lang='zh-CN'].dark .jc-music-toggle {
  color: #edf0ec;
}

/* Music may start while the native loading screen (z-index: 155) is visible. */
html[lang='zh-CN'][data-jc-ready='false'] .jc-music-toggle {
  z-index: 156;
}

html[lang='zh-CN'] .jc-music-toggle[hidden] {
  display: none;
}

html[lang='zh-CN'] .jc-music-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -7px;
}

html[lang='zh-CN'] .jc-music-toggle::before {
  content: '♪';
  font-size: 23px;
  line-height: 1;
}

html[lang='zh-CN'] .jc-music-toggle[aria-pressed='true']::before {
  content: '';
  box-sizing: border-box;
  width: 9px;
  height: 13px;
  border-inline: 2px solid currentColor;
}

html[lang='zh-CN'] .jc-music-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 1199px) {
  html[lang='zh-CN'] .jc-music-toggle {
    /* The small native grid has no spare column beside its status text. */
    top: calc(max(12px, 1.322vw, env(safe-area-inset-top, 0px)) + 50px);
    right: max(8px, 1.322vw, env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 479px) {
  html[lang='zh-CN'] .jc-music-toggle {
    top: max(90px, calc(env(safe-area-inset-top, 0px) + 82px));
    right: max(2vw, env(safe-area-inset-right, 0px));
  }
}

/* Mobile HUD: readable labels and forgiving targets within the native controls. */
@media (max-width: 1199px) {
  html[lang='zh-CN']:not([data-jc-art-study]) .hud-mode-wrap .loc-item > .text-small {
    font-size: 12px;
    line-height: 1.2;
  }

  html[lang='zh-CN']:not([data-jc-art-study]) [hero-trigger] a[data-hiring-link] {
    min-height: 44px;
    padding-block: 4.5px;
  }

  html[lang='zh-CN']:not([data-jc-art-study]) [hero-trigger] a[data-hiring-link] > .btn-bg {
    inset-block: 4.5px;
  }

  html[lang='zh-CN']:not([data-jc-art-study]) .hud-mode-wrap > .btn-toggle[color-state] {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 6px;
  }

  html[lang='zh-CN']:not([data-jc-art-study]) .hud-mode-wrap > .btn-toggle[color-state] > .btn-bg {
    /* Keep the native slide outside the whole target when idle. */
    inset-block: 6px;
    inset-inline: 0;
    clip-path: inset(0 6px);
  }
}