/* Live (in-page) player layer on top of the shared composition styles. */
html.live, html.live body { width: 100%; height: 100%; overflow: hidden; background: #0a0e16; }
html.live #root { position: absolute; left: 0; top: 0; transform-origin: 0 0; cursor: grab; touch-action: none; user-select: none; }
html.live #root.dragging { cursor: grabbing; }
html.live #root.pick { cursor: pointer; }
html.live #root.aim { cursor: crosshair; }

/* elements that become clickable in the live version */
html.live .live-hit { pointer-events: auto; cursor: pointer; }
html.live .stat.live-hit, html.live .partners .pt.live-hit, html.live .cta .live-hit, html.live .forms .live-hit, html.live .steps li.live-hit {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
html.live .stat.live-hit:hover { transform: translateY(-8px); border-color: rgba(255, 255, 255, 0.4); }
html.live .partners .pt.live-hit:hover, html.live .cta .url.live-hit:hover { color: #fff; background: rgba(255, 255, 255, 0.16); }
html.live .cta .btn.live-hit:hover { transform: scale(1.04); }
html.live .forms div.live-hit:hover { border-color: #5fe3d0; opacity: 1 !important; }
html.live .steps li.live-hit:hover b { text-decoration: underline; text-underline-offset: 8px; }
html.live .tags.live-hit span, html.live .foot.live-hit, html.live #s2l.live-hit { transition: color 160ms; }
html.live .foot.live-hit:hover, html.live #s2l.live-hit:hover { color: #fff !important; text-decoration: underline; text-underline-offset: 6px; }
html.live .stat .go, html.live .foot .go { color: var(--or); font-weight: 700; }
html.live #chapterWrap { pointer-events: none; }
html.live #chapters .ch { pointer-events: auto; cursor: pointer; padding-top: 10px; }
html.live #chapters .ch:hover span { color: #fff !important; }
html.live #chapters .ch:hover .bar { background: rgba(255, 255, 255, 0.3); }

/* live UI chrome (inside #root, so it scales with the composition) */
.live-ui { position: absolute; z-index: 20; pointer-events: auto; font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif; }
#liveHint {
  right: 60px; top: 38px; display: flex; align-items: center; gap: 14px; pointer-events: none;
  font-size: 22px; color: #e7eaee; padding: 10px 22px; border-radius: 999px;
  background: rgba(12, 17, 27, 0.72); border: 1.5px solid rgba(255, 255, 255, 0.16); transition: opacity 300ms;
}
#liveHint i { width: 12px; height: 12px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 0 rgba(238, 125, 85, 0.7); animation: livePulse 1.6s infinite; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 14px rgba(238, 125, 85, 0); } 100% { box-shadow: 0 0 0 0 rgba(238, 125, 85, 0); } }
#liveHint button {
  display: none; font: inherit; font-size: 21px; font-weight: 800; color: #1a0d07; background: var(--or);
  border: 0; border-radius: 999px; padding: 5px 18px; margin-right: -12px; cursor: pointer;
}
#liveHint.holding { pointer-events: auto; background: rgba(60, 30, 20, 0.85); border-color: rgba(238, 125, 85, 0.7); }
#liveHint.holding button { display: inline-block; }
#liveCtl { right: 56px; bottom: 34px; display: flex; gap: 14px; }
#liveCtl button {
  width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.22);
  background: rgba(12, 17, 27, 0.7); color: #fff; cursor: pointer; display: grid; place-items: center; padding: 0;
}
#liveCtl button:hover { background: rgba(255, 255, 255, 0.14); }
#liveCtl svg { width: 26px; height: 26px; fill: currentColor; }
#liveCtl button:focus-visible, #liveHint button:focus-visible, .live-hit:focus-visible { outline: 3px solid var(--or); outline-offset: 4px; }

#sciCard {
  display: none; left: 130px; top: 740px; width: 680px; padding: 24px 28px 22px; border-radius: 18px;
  background: rgba(16, 14, 34, 0.94); border: 1.5px solid rgba(167, 151, 255, 0.55); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
#sciCard b { display: block; font-size: 32px; font-weight: 800; color: #d9d2ff; }
#sciCard p { margin-top: 10px; font-size: 24px; line-height: 1.6; color: #e6e3f7; }
#sciCard .go { margin-top: 14px; font-size: 22px; font-weight: 700; color: var(--vio); cursor: pointer; display: inline-block; }
#sciCard .go:hover { text-decoration: underline; text-underline-offset: 6px; }

#liveFull {
  display: none; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 64px; font-weight: 800; color: #1a0d07; background: var(--or); border: 0;
  border-radius: 999px; padding: 36px 80px; cursor: pointer; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
html.narrow #liveFull { display: block; }
html.narrow #liveHint, html.narrow #liveCtl { display: none; }