/* Local to the tree-root clue; the sphere and existing dialogue remain unchanged. */
.tree-root-hotspot {
  position: absolute;
  z-index: 3;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}
.tree-root-hotspot[hidden] { display: none; }
.tree-root-hotspot:focus-visible {
  outline: 3px solid #f4dfb1;
  outline-offset: -3px;
  background: rgb(255 255 255 / 16%);
}
.fair-panorama-shell.is-over-tree-root:not(.is-dragging) { cursor: pointer; }
.tree-root-dialog {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #353f30;
  overflow: hidden;
  overscroll-behavior: none;
}
.tree-root-dialog:not([open]),
.tree-root-dialog [hidden] { display: none !important; }
.tree-root-dialog::backdrop { background: rgb(0 0 0 / 78%); }
.tree-root-dialog > .game-music { z-index: 1500; }
#treeRootSignalClose {
  /* Keep the site's white X, with a thin dark edge against sunlit leaves. */
  text-shadow: -1px 0 2px rgb(0 0 0 / 85%), 1px 0 2px rgb(0 0 0 / 85%),
    0 -1px 2px rgb(0 0 0 / 85%), 0 1px 2px rgb(0 0 0 / 85%), 0 0 7px rgb(255 255 255 / 70%) !important;
}
.tree-root-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  user-select: none;
  pointer-events: none;
}
.tree-root-signal-panel {
  position: absolute;
  top: max(80px, calc(env(safe-area-inset-top) + 60px));
  left: max(6%, env(safe-area-inset-left));
  right: max(6%, env(safe-area-inset-right));
  max-width: 1050px;
  margin-inline: auto;
  color: rgb(255 255 255 / 96%);
  font-family: var(--xinling-narrative-font, "I.MingCP", "Noto Serif TC", "Songti TC", "PMingLiU", serif);
  font-weight: 600;
  isolation: isolate;
}
/* Broad, soft ambient shade, like inner thoughts, not a framed speech bubble. */
.tree-root-signal-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -60px -90px;
  /* closest-side reaches full transparency before every rectangular edge. */
  background: radial-gradient(ellipse closest-side, rgb(20 26 18 / 42%), rgb(20 26 18 / 14%) 60%, transparent 100%);
  pointer-events: none;
}
.tree-root-signal-text {
  position: relative;
  min-height: 1.72em;
  margin: 0;
  font-size: clamp(23px, 2.45vw, 40px);
  line-height: 1.72;
  letter-spacing: .13em;
  text-align: left;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  transition: opacity .12s ease-out;
}
.tree-root-signal-text.is-signal-dim { opacity: .82; }
.tree-root-dialog[data-typing="false"]:is([data-phase="success"], [data-phase="wrong"]) .tree-root-signal-text { cursor: pointer; }
/* Attribute-only echoes do not add duplicate text to selection or announcements.
   Only two small horizontal slices shift; the main sentence stays readable. */
#treeRootSignalText.is-signal-glitch::before,
#treeRootSignalText.is-signal-glitch::after {
  content: attr(data-signal-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  white-space: inherit;
  overflow-wrap: inherit;
  text-shadow: none !important;
}
#treeRootSignalText.is-signal-glitch::before {
  color: rgb(114 255 244 / 75%);
  transform: translateX(var(--signal-shift, 2px));
  clip-path: inset(var(--signal-band-top, 22%) 0 var(--signal-band-bottom, 64%) 0);
}
#treeRootSignalText.is-signal-glitch::after {
  color: rgb(255 135 220 / 70%);
  transform: translateX(calc(-1 * var(--signal-shift, 2px)));
  clip-path: inset(var(--signal-echo-top, 57%) 0 var(--signal-echo-bottom, 29%) 0);
}
.tree-root-signal-glyph { animation: tree-root-glyph-appear .22s ease-out both; }
.tree-root-signal-text,
.tree-root-signal-text *,
.tree-root-answer,
.tree-root-answer * {
  text-shadow: 0 0 1px rgb(255 255 255 / 62%), 0 0 4px rgb(255 255 255 / 28%) !important;
}
@keyframes tree-root-glyph-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}
.tree-root-answer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.tree-root-answer .ebook-fold-clue-input { width: 8em; max-width: calc(100% - 64px); }
.tree-root-answer .ebook-fold-clue-submit { flex: 0 0 auto; }
.tree-root-signal-next {
  display: block;
  min-height: 44px;
  margin: 12px 0 0 auto;
  padding: 6px 0 6px 12px;
  color: white;
  border: 0;
  border-bottom: 1px solid rgb(255 255 255 / 78%);
  background: transparent;
  font: 600 clamp(16px, 1.5vw, 22px)/1.4 "Microsoft JhengHei", "PingFang TC", sans-serif;
  cursor: pointer;
}
#treeRootSignalNext,
#treeRootSignalNext:is(:hover, :focus, :focus-visible, :active) {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border: 0;
  border-bottom: 1px solid rgb(255 255 255 / 78%);
}
#treeRootSignalNext:hover { border-bottom-color: white; }
/* A brighter, thicker underline identifies keyboard focus without a box. */
#treeRootSignalNext:focus-visible {
  border-bottom-width: 2px;
  border-bottom-color: white;
  text-shadow: 0 0 4px rgb(255 255 255 / 42%) !important;
}
.tree-root-dialog[data-phase="loading"] .tree-root-signal-panel,
.tree-root-dialog[data-phase="error"] .tree-root-signal-panel { visibility: hidden; }
@media (max-width: 760px) {
  .tree-root-signal-panel { left: max(6%, 16px); right: max(6%, 16px); top: max(70px, calc(env(safe-area-inset-top) + 56px)); }
  .tree-root-signal-text { font-size: clamp(20px, 5.65vw, 27px); line-height: 1.65; letter-spacing: .075em; }
}
@media (max-height: 500px) {
  .tree-root-signal-panel { top: max(56px, env(safe-area-inset-top)); }
  .tree-root-signal-text { font-size: clamp(18px, 3vw, 24px); line-height: 1.45; letter-spacing: .06em; }
  .tree-root-answer { margin-top: 8px; }
  .tree-root-signal-next { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .tree-root-signal-text { transition: none; }
  .tree-root-signal-text.is-signal-dim { opacity: 1; }
  #treeRootSignalText.is-signal-glitch::before,
  #treeRootSignalText.is-signal-glitch::after { content: none; }
  .tree-root-signal-glyph { animation: none; }
}