:root {
  --app-width: 100vw;
  --app-height: 100vh;
  --ui-scale: 1;
  color-scheme: dark;
  font-family: "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  background: #000;
}

/* Wide, pannable chapter archive. */
.chapters-dialog::before { position: absolute; inset: 0; z-index: 3; content: ""; background: linear-gradient(90deg, rgba(1, 5, 7, 0.9), transparent 13%, transparent 87%, rgba(1, 5, 7, 0.9)), linear-gradient(180deg, rgba(1, 5, 7, 0.82), transparent 19%, transparent 86%, rgba(1, 5, 7, 0.72)); pointer-events: none; }
.chapter-viewport { position: absolute; inset: 0; z-index: 1; display: flex; overflow: auto; outline: none; cursor: grab; scrollbar-color: rgba(189, 121, 57, 0.55) rgba(3, 7, 8, 0.6); scrollbar-width: thin; touch-action: pan-x pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.chapter-viewport.is-dragging { cursor: grabbing; user-select: none; }.chapter-viewport { scrollbar-width: none; }.chapter-viewport::-webkit-scrollbar { width: 0; height: 0; }
.chapter-scene { position: relative; inset: auto; flex: 0 0 5000px; width: 5000px; height: 850px; margin: 50vh 50vw; }.chapter-scene::after { position: absolute; inset: 0; z-index: 0; content: ""; background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.18) 88%); pointer-events: none; }
.chapter-scene .chapter-lines { position: absolute; inset: 0; z-index: 1; width: 5000px; height: 830px; overflow: visible; pointer-events: none; }.chapter-scene .chapter-lines path { fill: none; stroke: #d58b40; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(255, 137, 43, 0.95)); path-length: 1; stroke-dasharray: 1; animation: chapter-route-flow 7s linear infinite; }.chapter-scene .route-lower path { stroke: #ad7c55; }
.chapters-dialog .chapter-scene button { position: absolute; top: var(--y); left: var(--x); z-index: 4; width: 190px; height: 160px; animation: chapter-node-enter 520ms both; }.chapter-scene button:nth-of-type(2n) { animation-delay: 70ms; }.chapter-scene button:nth-of-type(3n) { animation-delay: 140ms; }.chapter-scene button img { pointer-events: none; }.chapter-scene button.is-available { animation: chapter-node-enter 520ms both; }.chapter-scene button:not(.is-complete) img { filter: brightness(0.46) saturate(0.4); }.chapters-dialog .chapter-scene button:not(.is-complete):hover, .chapters-dialog .chapter-scene button:not(.is-complete):focus-visible { filter: none; }.chapter-scene .chapter-state { font-size: 9px; }
.chapter-scene .chapter-event { position: absolute; top: var(--y); left: var(--x); z-index: 3; width: 170px; height: 150px; overflow: hidden; border: 2px solid rgba(173, 115, 57, 0.76); border-radius: 16px; color: #ddc39a; background: linear-gradient(155deg, rgba(30, 18, 10, 0.96), rgba(5, 7, 7, 0.98)); box-shadow: inset 0 0 0 2px rgba(69, 38, 18, 0.9), 0 0 13px rgba(0, 0, 0, 0.8); animation: chapter-node-enter 520ms 160ms both; pointer-events: none; }.chapter-scene .chapter-event img { display: block; width: calc(100% - 10px); height: 88px; margin: 5px; object-fit: cover; border-radius: 11px; filter: brightness(0.78) saturate(0.72); }.chapter-scene .chapter-event span { position: absolute; right: 8px; bottom: 7px; left: 8px; font-family: "Microsoft YaHei", sans-serif; font-size: 12px; line-height: 1.25; }.chapter-scene .chapter-event b { display: block; margin-bottom: 2px; color: #ffd08a; font-family: "Noto Serif SC", serif; font-size: 15px; font-weight: 500; }.chapter-scene .chapter-event:not(:has(img)) span { top: 50%; bottom: auto; transform: translateY(-50%); text-align: center; }
.chapters-dialog .chapter-scene .chapter-event:is(.is-complete, .is-available) { cursor: pointer; pointer-events: auto; transition: border-color 150ms ease, box-shadow 150ms ease, filter 150ms ease, transform 150ms ease; }.chapters-dialog .chapter-scene .chapter-event:is(.is-complete, .is-available):hover, .chapters-dialog .chapter-scene .chapter-event:is(.is-complete, .is-available):focus-visible { outline: 0; border-color: #e4b66e; box-shadow: inset 0 0 0 2px rgba(104, 62, 28, 0.94), 0 0 22px rgba(226, 145, 63, 0.58); filter: brightness(1.12); transform: translateY(-3px); }
.chapter-scene .is-interaction { border-color: #d48830; background: linear-gradient(155deg, rgba(111, 52, 9, 0.96), rgba(25, 11, 4, 0.98)); box-shadow: inset 0 0 0 2px rgba(94, 42, 9, 0.9), 0 0 16px rgba(222, 119, 31, 0.46); }.chapter-scene .is-failure { border-color: #81372e; background: linear-gradient(155deg, rgba(70, 16, 14, 0.97), rgba(16, 5, 6, 0.99)); }.chapter-scene .is-failure b { color: #f29a7f; }.chapter-scene .is-success, .chapter-scene .is-ending { border-color: #b9924f; background: linear-gradient(155deg, rgba(73, 52, 15, 0.96), rgba(17, 13, 5, 0.99)); }.chapter-scene .is-choice { border-color: #8f79ad; background: linear-gradient(155deg, rgba(48, 34, 66, 0.96), rgba(13, 9, 20, 0.99)); }
.chapter-scene .chapter-event:not(.is-complete) img, .chapter-scene button:not(.is-complete) img { filter: brightness(0.36) saturate(0.32); }.chapters-dialog .chapter-scene button:not(.is-complete):hover, .chapters-dialog .chapter-scene button:not(.is-complete):focus-visible { filter: none; }.chapters-dialog .chapter-scene button:not(.is-complete):hover img, .chapters-dialog .chapter-scene button:not(.is-complete):focus-visible img { filter: brightness(0.36) saturate(0.32); }.chapter-scene button.is-available::before { border-color: rgba(113, 82, 50, 0.72); box-shadow: inset 0 0 0 2px #3b2819, inset 0 0 12px rgba(0, 0, 0, 0.86); }.chapter-scene button.is-available > span { color: #9f8b6f; border-color: #765b3d; }.chapters-dialog .chapter-scene .chapter-state, .chapter-scene .chapter-lock-state, .chapter-scene .chapter-node-state { position: absolute; z-index: 5; box-sizing: border-box; padding: 2px 5px; border: 1px solid rgba(210, 168, 108, 0.42); border-radius: 4px; color: #e0c59a; background: rgba(3, 4, 4, 0.88); font-family: "Microsoft YaHei", sans-serif; font-size: 10px; font-style: normal; font-weight: 400; line-height: 1.2; white-space: nowrap; }.chapters-dialog .chapter-scene .chapter-state, .chapter-scene .chapter-lock-state { top: 10px; right: 13px; }.chapter-scene .chapter-node-state { top: 7px; right: 7px; }
.chapter-scene .chapter-lines path.is-hidden { display: none; }
.chapter-fork-badge { position: absolute; z-index: 5; display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid #c68a48; border-radius: 50%; color: #f2c887; background: radial-gradient(circle, #402816, #0b0d0d 72%); box-shadow: inset 0 0 0 2px #25150b, 0 0 12px rgba(229, 133, 54, 0.58); font-size: 20px; pointer-events: none; }.fork-04-a { top: 220px; left: 1305px; }.fork-04-b { top: 520px; left: 1305px; }.fork-06-a { top: 185px; left: 2485px; }.fork-06-b { top: 330px; left: 2375px; }.fork-09-a { top: 445px; left: 2180px; }.fork-09-b { top: 620px; left: 2180px; }.fork-10-a { top: 445px; left: 2615px; }.fork-10-b { top: 620px; left: 2615px; }
.chapter-swipe-hint { position: absolute; right: 50%; bottom: 2.7%; z-index: 6; display: flex; align-items: center; gap: 12px; color: rgba(232, 194, 140, 0.78); font-size: clamp(10px, 0.82vw, 14px); letter-spacing: 0.08em; transform: translateX(50%); pointer-events: none; }.chapter-swipe-hint i { width: 54px; height: 1px; background: linear-gradient(90deg, transparent, #d18a44); animation: chapter-hint-slide 1.25s ease-in-out infinite alternate; }.chapter-swipe-hint i:last-child { transform: scaleX(-1); }.chapters-heading, .chapters-close, .chapter-progress { z-index: 6; }.chapters-heading > p, .chapter-summary strong { display: block; }.chapter-detail-list { display: none; }
@keyframes chapter-route-flow { to { stroke-dashoffset: -2; } }@keyframes chapter-node-enter { from { opacity: 0; transform: translateY(14px) scale(0.94); } to { opacity: 1; transform: none; } }@keyframes chapter-available-glow { to { filter: brightness(1.18) drop-shadow(0 0 9px rgba(244, 154, 70, 0.65)); } }@keyframes chapter-hint-slide { from { opacity: 0.35; transform: translateX(-7px); } to { opacity: 0.9; transform: translateX(7px); } }@media (prefers-reduced-motion: reduce) { .chapter-scene *, .chapter-lines path, .chapter-swipe-hint i { animation: none !important; scroll-behavior: auto !important; } }

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

body {
  display: grid;
  place-items: center;
}

.rotate-device {
  display: none;
}

button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

#stage {
  position: relative;
  width: min(var(--app-width), calc(var(--app-height) * 16 / 9));
  height: min(var(--app-height), calc(var(--app-width) * 9 / 16));
  overflow: hidden;
  background: #000;
}

#player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.home-menu { position: absolute; bottom: 2%; left: 2.2%; z-index: 9; display: grid; width: min(24vw, 42vh, 460px); gap: clamp(1px, 0.2vh, 4px); }
.home-menu[hidden] { display: none; }
.home-menu button { display: block; width: 100%; padding: 0; border: 0; outline: 0; background: transparent; cursor: pointer; filter: brightness(0.56) saturate(0.48); opacity: 0.86; transition: filter 140ms ease, transform 140ms ease, opacity 140ms ease; }
.home-menu img { display: block; width: 100%; height: auto; pointer-events: none; }
.home-menu #menu-start.is-default,
.home-menu button:hover,
.home-menu button:focus-visible { z-index: 1; filter: brightness(1.2) saturate(1.08) drop-shadow(0 0 16px rgba(224, 125, 72, 0.78)); opacity: 1; transform: translateX(8px) scale(1.035); }
.home-menu button:active { transform: translateX(5px) scale(0.99); }

@media (max-width: 760px) {
  .home-menu { bottom: 1.5%; left: 2%; width: min(36vw, 40vh, 310px); gap: 0; }
}

.health-bar {
  position: absolute;
  top: max(4.5%, env(safe-area-inset-top));
  left: 50%;
  z-index: 6;
  width: min(660px, 68%);
  aspect-ratio: 1811 / 471;
  transform: translateX(-50%);
  isolation: isolate;
  pointer-events: none;
}

.health-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("./media/images/health-frame.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.68)) drop-shadow(0 0 4px rgba(87, 50, 21, 0.42));
  pointer-events: none;
}

.health-heading {
  position: absolute;
  top: 16%;
  right: 13.5%;
  left: 14.5%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.health-label,
.health-count,
.health-hint {
  color: #efe5c7;
  font-family: "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-size: clamp(14px, 1.45vw, 21px);
  font-weight: 800;
  text-shadow: 0 2px 2px rgba(24, 12, 4, 0.95), 0 0 3px rgba(0, 0, 0, 0.9);
}

.health-label {
  color: #f0dfb7;
  letter-spacing: 0.14em;
}

.health-count {
  min-width: 48px;
  color: #dff28b;
  text-align: right;
}

.health-track {
  position: absolute;
  top: 43%;
  right: 14%;
  left: 18%;
  z-index: 2;
  height: 19%;
  transform: translate(30px, 5px);
  overflow: hidden;
  border: 2px solid rgba(74, 49, 25, 0.94);
  border-radius: 5px;
  background: linear-gradient(#182207, #28320b 48%, #121b05);
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(179, 146, 78, 0.28), 0 2px 3px rgba(0, 0, 0, 0.55);
}

.health-track::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  content: "";
  background: repeating-linear-gradient(
    90deg,
    transparent 0 calc(20% - 3px),
    rgba(28, 24, 8, 0.86) calc(20% - 3px) calc(20% - 1px),
    rgba(217, 220, 115, 0.2) calc(20% - 1px) 20%
  );
  box-shadow: inset 0 0 0 1px rgba(226, 221, 151, 0.12);
  pointer-events: none;
}

.health-fill {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 2px;
}

.health-segment {
  min-width: 0;
  height: 100%;
  border-radius: 2px;
  background: url("./media/images/health-fill.webp") center / 100% 100% no-repeat;
  box-shadow: 0 0 7px rgba(184, 224, 55, 0.5), inset 0 2px rgba(246, 255, 183, 0.38);
  animation: health-segment-in 180ms ease-out both;
}

.health-gloss {
  position: absolute;
  inset: 3px 4px auto;
  height: 30%;
  z-index: 2;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(247, 255, 194, 0.38), rgba(255, 255, 255, 0.04));
}

@keyframes health-segment-in {
  from { opacity: 0; transform: scaleX(0.7); }
  to { opacity: 1; transform: scaleX(1); }
}

.health-hint {
  position: absolute;
  right: 14%;
  bottom: 12%;
  left: 14%;
  z-index: 3;
  color: rgba(224, 215, 183, 0.92);
  font-size: clamp(11px, 1.12vw, 16px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
  text-shadow: 0 1px 3px #000;
}

.click-effect {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(113, 255, 122, 0) 28%, rgba(93, 255, 105, 0.08) 52%, rgba(19, 142, 43, 0.58) 100%);
  animation: heal-edge-flash 1s ease-out both;
}

.click-effect::before {
  position: absolute;
  inset: 0;
  content: "";
  box-shadow: inset 0 0 78px 30px rgba(28, 165, 48, 0.62);
  animation: heal-edge-pulse 1s ease-out both;
}

.heal-number {
  position: absolute;
  color: #56ff68;
  font-family: Arial, sans-serif;
  font-size: clamp(72px, 12vw, 168px);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 0 10px rgba(23, 155, 44, 0.95), 0 0 28px rgba(117, 255, 129, 0.8);
  transform: translate(-50%, -50%) scale(0.58);
  animation: heal-number-pop 1s cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

.heal-tap-guide {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 8;
  width: clamp(195px, 23.4vw, 364px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.heal-tap-guide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 12px rgba(255, 220, 126, 0.56));
  animation: heal-tap-hand 1.05s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.heal-tap-guide span {
  display: none;
}

.talisman-progress {
  position: absolute;
  top: max(4.5%, env(safe-area-inset-top));
  left: 50%;
  z-index: 8;
  width: min(808px, 50%);
  aspect-ratio: 1422 / 151;
  transform: translateX(-50%);
  pointer-events: none;
}

.talisman-progress::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  background: url("./media/images/talisman-progress-frame.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, 0.72));
}

.talisman-track {
  position: absolute;
  top: 43.5%;
  right: 7.4%;
  bottom: 38.5%;
  left: 10.6%;
  z-index: 3;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(4, 3, 1, 0.88);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.9);
}

.talisman-fill {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #d77908, #ffd93e 38%, #fff493 72%, #f3ad13);
  box-shadow: inset 0 2px rgba(255, 255, 210, 0.72), inset 0 -3px rgba(155, 71, 0, 0.55), 0 0 12px rgba(255, 199, 34, 0.95);
  transition: width 260ms cubic-bezier(0.2, 0.8, 0.25, 1);
}

.talisman-track strong {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: #fff0ba;
  font-size: clamp(8px, 0.85vw, 14px);
  line-height: normal;
  text-shadow: 0 2px 3px #000, 0 0 5px #000;
}

.talisman-layer {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.talisman-instruction {
  position: absolute;
  top: 15%;
  left: 50%;
  z-index: 4;
  padding: 10px 22px;
  border: 1px solid rgba(232, 184, 91, 0.72);
  border-radius: 999px;
  color: #ffe5a5;
  background: rgba(17, 8, 3, 0.78);
  box-shadow: inset 0 0 16px rgba(100, 42, 10, 0.48), 0 0 18px rgba(0, 0, 0, 0.72);
  font-family: "Microsoft YaHei", sans-serif;
  font-size: clamp(16px, 1.65vw, 28px);
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 2px 4px #000, 0 0 8px rgba(190, 91, 24, 0.58);
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.talisman-layer img {
  position: absolute;
  top: calc(58% + 30px);
  left: 50%;
  width: clamp(180px, 24vw, 380px);
  max-height: 68%;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255, 218, 105, 0.48)) drop-shadow(0 0 24px rgba(255, 174, 38, 0.3));
  transform: translate(-50%, -50%) perspective(700px) rotateX(45deg);
  transform-origin: 50% 85%;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform, opacity, filter;
}

.talisman-layer img:active {
  cursor: grabbing;
}

.talisman-swipe-guide {
  position: absolute;
  top: calc(59% + 30px);
  left: 50%;
  z-index: 2;
  width: clamp(150px, 16vw, 250px);
  height: clamp(290px, 42vh, 450px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.talisman-swipe-guide,
.talisman-swipe-guide * {
  pointer-events: none;
  touch-action: none;
  user-select: none;
}

.talisman-swipe-guide img {
  position: absolute;
  right: 10%;
  bottom: calc(-1% + 60px);
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.82)) drop-shadow(0 0 13px rgba(239, 183, 74, 0.68));
  animation: talisman-swipe-hand 1s cubic-bezier(0.36, 0, 0.2, 1) infinite;
  cursor: default;
}

.talisman-swipe-trail {
  position: absolute;
  top: 15%;
  bottom: 23%;
  left: 50%;
  width: 7px;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(to top, transparent, rgba(143, 22, 8, 0.3) 12%, rgba(214, 61, 20, 0.9) 52%, rgba(255, 221, 125, 0.96));
  box-shadow: 0 0 8px rgba(169, 27, 9, 0.88), 0 0 16px rgba(244, 180, 58, 0.72);
  transform: translateX(-50%) scaleY(0.25);
  transform-origin: bottom;
  animation: talisman-swipe-trail 1s ease-out infinite;
}

.talisman-swipe-arrow {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 24px;
  height: 24px;
  border-top: 5px solid #ffe3a0;
  border-left: 5px solid #ffe3a0;
  opacity: 0;
  filter: drop-shadow(0 0 5px #b8250e) drop-shadow(0 0 10px #efad37);
  transform: translateX(-50%) rotate(45deg) scale(0.65);
  animation: talisman-swipe-arrow 1s ease-out infinite;
}

.rapid-click-layer {
  --rapid-x: 45.5%;
  --rapid-y: 34%;
  --rapid-size: 18%;
  position: absolute;
  inset: 0;
  z-index: 9;
  overflow: hidden;
  pointer-events: none;
  touch-action: none;
  user-select: none;
}

.rapid-vignette { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0; transition: opacity 100ms linear; pointer-events: none; }
.rapid-copy {
  position: absolute;
  top: max(4.5%, env(safe-area-inset-top));
  left: 50%;
  z-index: 5;
  display: grid;
  gap: 2px;
  width: max-content;
  max-width: 72%;
  padding: 5px 34px 8px;
  color: #ddecf5;
  text-align: center;
  background: linear-gradient(90deg, transparent, rgba(3, 12, 19, 0.72) 22%, rgba(3, 12, 19, 0.72) 78%, transparent);
  text-shadow: 0 3px 5px #000, 0 0 12px rgba(130, 190, 225, 0.7);
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
}
.rapid-copy strong { font-size: clamp(26px, 3.4vw, 54px); letter-spacing: 0.08em; }
.rapid-copy span { color: rgba(200, 225, 240, 0.82); font-size: clamp(13px, 1.35vw, 22px); letter-spacing: 0.12em; }
.rapid-click-layer.is-warning .rapid-copy { opacity: 1; }
.rapid-target {
  position: absolute;
  top: var(--rapid-y);
  left: var(--rapid-x);
  z-index: 4;
  width: var(--rapid-size);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}
.rapid-target:disabled { cursor: default; }
.rapid-target > img { position: absolute; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.rapid-ring { inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; filter: drop-shadow(0 0 12px rgba(190, 228, 250, 0.8)); }
.rapid-branch-highlight { top: 50%; left: 50%; width: 250%; max-width: none; transform: translate(-50%, -50%) rotate(-8deg); opacity: 0; filter: contrast(4) brightness(1.2); mix-blend-mode: screen; }
.rapid-trail { right: 45%; bottom: 30%; width: 180%; max-width: none; transform: rotate(-12deg); opacity: 0; mix-blend-mode: screen; }
.rapid-click-layer.is-teaching .rapid-ring, .rapid-click-layer.is-active .rapid-ring { opacity: 0.92; animation: rapid-ring-pulse 550ms ease-in-out infinite; }
.rapid-click-layer.is-warning .rapid-branch-highlight { opacity: 0.18; }
.rapid-click-layer.is-hit .rapid-trail { animation: rapid-trail-flash 180ms ease-out; }
.rapid-segments { position: absolute; inset: 8%; transform: rotate(-90deg); pointer-events: none; }
.rapid-segments i { position: absolute; top: 0; left: 44%; width: 12%; height: 20%; border-radius: 50%; opacity: 0; background: #f5fcff; box-shadow: 0 0 12px #ddecff, 0 0 24px rgba(128, 190, 225, 0.9); transform-origin: 50% 210%; transition: opacity 100ms ease-out; }
.rapid-segments i:nth-child(2) { transform: rotate(72deg); }
.rapid-segments i:nth-child(3) { transform: rotate(144deg); }
.rapid-segments i:nth-child(4) { transform: rotate(216deg); }
.rapid-segments i:nth-child(5) { transform: rotate(288deg); }
.rapid-segments i.is-active { opacity: 0.92; }
.rapid-bursts { position: absolute; inset: 0; pointer-events: none; }
.rapid-impact, .rapid-debris { position: absolute; top: 50%; left: 50%; width: 62%; transform: translate(-50%, -50%); animation: rapid-impact 200ms ease-out both; pointer-events: none; }
.rapid-debris { width: 78%; animation-name: rapid-debris; }
.rapid-shatter { position: absolute; z-index: 6; display: none; transform: translate(-50%, -50%); pointer-events: none; }
.rapid-click-layer.is-success .rapid-ring { opacity: 1; animation: rapid-lock 320ms ease-out both; }
.rapid-click-layer.is-success .rapid-copy, .rapid-click-layer.is-failure .rapid-copy { top: 39%; z-index: 8; opacity: 1; }
.rapid-click-layer.is-success .rapid-copy strong { color: #f2fbff; }
.rapid-click-layer.is-failure .rapid-ring, .rapid-click-layer.is-failure .rapid-segments { display: none; }
.rapid-click-layer.is-failure .rapid-shatter { display: block; animation: rapid-shatter 300ms ease-out both; }
.rapid-click-layer.is-failure .rapid-copy strong { color: #e2c4c8; text-shadow: 0 3px 5px #000, 0 0 16px #b51f2e; }

.restraint-layer { --restraint-progress: 0; position: absolute; inset: 0; z-index: 10; overflow: hidden; pointer-events: none; touch-action: none; user-select: none; }
.restraint-vignette { position: absolute; inset: 0; opacity: 0; background-position: center; background-size: 100% 100%; mix-blend-mode: screen; transition: opacity 120ms linear; }
.restraint-copy { position: absolute; top: max(3.5%, env(safe-area-inset-top)); left: 50%; z-index: 5; display: grid; gap: 2px; width: max-content; max-width: 70%; padding: 7px 24px; color: #eadbd0; text-align: center; background: linear-gradient(90deg, transparent, rgba(30, 4, 2, 0.84) 20%, rgba(30, 4, 2, 0.84) 80%, transparent); text-shadow: 0 2px 4px #000, 0 0 12px rgba(165, 25, 15, 0.9); transform: translateX(-50%); opacity: 0; }
.restraint-layer.is-warning .restraint-copy { opacity: 1; }
.restraint-copy strong { color: #ffd8bc; font-size: clamp(19px, 2.15vw, 32px); letter-spacing: 0.12em; }
.restraint-copy span { color: rgba(236, 217, 198, 0.74); font-size: clamp(11px, 1vw, 16px); letter-spacing: 0.08em; }
.restraint-progress { position: absolute; top: 11%; left: 50%; z-index: 5; width: min(620px, 36%); min-width: 300px; aspect-ratio: 1774 / 887; transform: translate(-50%, -25%); opacity: 0; pointer-events: none; }
.restraint-layer.is-teaching .restraint-progress, .restraint-layer.is-active .restraint-progress, .restraint-layer.is-success .restraint-progress, .restraint-layer.is-failure .restraint-progress { opacity: 1; }
.restraint-progress > img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.85)); }
.restraint-knot-orbs { position: absolute; inset: 36% 5% 33%; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5%; }
.restraint-knot-orbs i { position: relative; top: -5px; left: -5px; width: 9%; aspect-ratio: 1; border-radius: 50%; opacity: 0; background: radial-gradient(circle at center, #b86d08 0%, #d99112 22%, #f0bd3b 45%, #ffe58a 66%, rgba(255, 243, 176, 0.46) 82%, transparent 100%); box-shadow: 0 0 8px rgba(255, 226, 117, 0.82), 0 0 18px rgba(241, 180, 45, 0.68), 0 0 32px rgba(211, 119, 7, 0.42); mix-blend-mode: screen; transform: scale(0.2); transition: opacity 100ms ease-out, transform 180ms cubic-bezier(0.2, 1.5, 0.45, 1); }
.restraint-knot-orbs i.is-active { opacity: 1; transform: scale(1); animation: restraint-knot-orb-pulse 700ms ease-in-out infinite alternate; }
.restraint-time { position: absolute; right: 17%; bottom: 29%; left: 17%; height: 3px; overflow: hidden; background: rgba(30, 0, 0, 0.7); }
.restraint-time i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #9f100a, #ff5941); box-shadow: 0 0 8px #df2114; transform-origin: right; }
.restraint-target { position: absolute; z-index: 4; top: 48%; bottom: 12%; width: 22%; padding: 0; border: 0; appearance: none; background: transparent; pointer-events: auto; cursor: pointer; }
.restraint-target:disabled { cursor: default; }
.restraint-left { left: 29%; }
.restraint-right { right: 8%; }
.restraint-target img { position: absolute; top: 40%; left: 50%; width: 92%; max-height: 120%; object-fit: contain; opacity: 0.25; transform: translate(-50%, -50%) scale(0.85); filter: grayscale(0.55) sepia(0.25) drop-shadow(0 0 7px rgba(184, 158, 106, 0.45)); pointer-events: none; transition: opacity 100ms ease, filter 100ms ease, transform 100ms ease; }
.restraint-layer.is-teaching .restraint-target img { opacity: 0.52; animation: restraint-teach 300ms ease-out both; }
.restraint-layer.is-teaching .restraint-right img { animation-delay: 150ms; }
.restraint-layer.is-active .restraint-target.is-next img { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: brightness(1.35) saturate(0.35) drop-shadow(0 0 13px #e9d79c) drop-shadow(0 0 24px rgba(218, 190, 111, 0.75)); animation: restraint-target-pulse 420ms ease-in-out infinite alternate; }
.restraint-target span { position: absolute; top: 56%; left: 50%; width: 32%; height: 15%; opacity: 0; background: repeating-linear-gradient(90deg, rgba(230, 236, 225, 0.8) 0 2px, transparent 2px 7px); transform: translateX(-50%); }
.restraint-target.is-hit span { animation: restraint-speed-lines 150ms ease-out; }
.restraint-target.is-hit img { animation: restraint-hand-flash 150ms ease-out; }
.restraint-bursts { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.restraint-burst { position: absolute; width: 13%; transform: translate(-50%, -50%); filter: saturate(0.15) hue-rotate(165deg) brightness(1.35); mix-blend-mode: screen; animation: restraint-burst 240ms ease-out forwards; }
.restraint-burst.is-weak { opacity: 0.32; filter: grayscale(1); }
.restraint-layer.is-hit { animation: restraint-stage-hit 130ms ease-out; }
.restraint-shatter, .restraint-slash { position: absolute; z-index: 8; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.restraint-shatter { inset: 14% 13% 2%; width: 74%; height: 84%; object-fit: contain; }
.restraint-slash { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.restraint-layer.is-success .restraint-target img { opacity: 0.85; animation: restraint-success-close 520ms ease-out forwards; }
.restraint-layer.is-success .restraint-copy { top: 39%; z-index: 9; opacity: 1; background: rgba(20, 14, 6, 0.82); animation: restraint-copy-impact 280ms ease-out; }
.restraint-layer.is-success .restraint-copy strong { color: #f5d98c; font-size: clamp(26px, 3.3vw, 50px); }
.restraint-layer.is-success .restraint-knot-orbs i { opacity: 1; transform: scale(1.08); filter: brightness(1.2); }
.restraint-layer.is-failure { animation: restraint-failure-shake 420ms ease-out; }
.restraint-layer.is-failure .restraint-shatter { animation: restraint-shatter 430ms ease-out forwards; }
.restraint-layer.is-failure .restraint-slash { animation: restraint-slash 620ms 130ms ease-in forwards; }
.restraint-layer.is-failure .restraint-copy { top: 41%; z-index: 9; opacity: 1; background: rgba(18, 0, 0, 0.78); animation: restraint-copy-impact 240ms ease-out; }
.restraint-layer.is-failure .restraint-copy strong { color: #eee0dc; font-size: clamp(28px, 3.7vw, 56px); }
@keyframes restraint-knot-orb-pulse { to { filter: brightness(1.22); box-shadow: 0 0 11px #fff4b0, 0 0 24px #f5c342, 0 0 42px rgba(226, 139, 14, 0.9); } }
@keyframes restraint-teach { from { opacity: 0; transform: translate(-50%, -50%) scale(0.55); } to { opacity: 0.52; transform: translate(-50%, -50%) scale(0.85); } }
@keyframes restraint-target-pulse { to { transform: translate(-50%, -50%) scale(1.08); } }
@keyframes restraint-hand-flash { 50% { opacity: 1; filter: brightness(1.8) drop-shadow(0 0 24px #eaf7ff); } }
@keyframes restraint-speed-lines { 20% { opacity: 0.9; transform: translate(-50%, -7px); } 100% { opacity: 0; transform: translate(-50%, 14px); } }
@keyframes restraint-burst { from { opacity: 0.95; transform: translate(-50%, -50%) scale(0.4); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.3); } }
@keyframes restraint-stage-hit { 45% { transform: translateY(4px); } }
@keyframes restraint-success-close { 50% { filter: brightness(1.65) drop-shadow(0 0 28px #f2d78f); transform: translate(-50%, -50%) scale(1.1); } to { transform: translate(-50%, -50%) scale(0.72); } }
@keyframes restraint-copy-impact { from { opacity: 0; transform: translate(-50%, 10px) scale(0.94); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes restraint-failure-shake { 20%, 60% { transform: translateX(-12px); } 40%, 80% { transform: translateX(12px); } }
@keyframes restraint-shatter { 0% { opacity: 0; transform: scale(0.72); } 35% { opacity: 1; } to { opacity: 0; transform: scale(1.35); } }
@keyframes restraint-slash { 0% { opacity: 0; transform: translateX(-18%) scale(1.15); } 35% { opacity: 1; } 100% { opacity: 1; transform: translateX(0) scale(1); filter: brightness(0.55); } }

.gu-seal-layer { position: absolute; inset: 0; z-index: 10; overflow: hidden; touch-action: none; user-select: none; pointer-events: none; }.gu-seal-layer.is-armed { pointer-events: auto; cursor: crosshair; }.gu-seal-layer.is-success, .gu-seal-layer.is-failure { cursor: default; }
.gu-edge { position: absolute; inset: 0; opacity: 0.32; background: radial-gradient(circle, transparent 52%, rgba(85, 0, 0, 0.3) 78%, rgba(105, 0, 0, 0.72)); box-shadow: inset 0 0 100px rgba(168, 0, 0, 0.42); animation: gu-edge-breathe 1.2s ease-in-out infinite alternate; }
.gu-copy { position: absolute; top: max(6%, env(safe-area-inset-top)); left: 50%; z-index: 5; display: grid; gap: 4px; min-width: min(520px, 72%); padding: 12px 28px; border: 1px solid rgba(190, 62, 41, 0.45); border-radius: 4px; color: #e9d7bd; text-align: center; background: linear-gradient(90deg, transparent, rgba(27, 4, 2, 0.86) 18%, rgba(27, 4, 2, 0.86) 82%, transparent); transform: translateX(-50%); text-shadow: 0 2px 4px #000, 0 0 14px rgba(159, 25, 13, 0.7); }
.gu-copy strong { color: #ffd7a0; font-size: clamp(20px, 2.25vw, 34px); letter-spacing: 0.12em; }
.gu-copy span { color: rgba(235, 211, 181, 0.74); font-size: clamp(12px, 1.15vw, 18px); letter-spacing: 0.08em; }
.gu-jar-target { --jar-left: 48%; --jar-top: 40%; --jar-size: 17%; position: absolute; top: var(--jar-top); left: var(--jar-left); z-index: 4; width: var(--jar-size); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; appearance: none; color: #f7d78b; background: transparent; transform: translate(-50%, -50%); pointer-events: none; cursor: default; }
.gu-jar-target:disabled { cursor: default; }
.gu-jar-target img { position: absolute; max-width: none; pointer-events: none; }
.gu-danger-pulse, .gu-seal-ring { object-fit: contain; }
.gu-danger-pulse { inset: 37.5%; width: 25%; height: 25%; z-index: 0; mix-blend-mode: screen; animation: gu-danger-spin 4s linear infinite, gu-danger-pulse 760ms ease-in-out infinite alternate; }
.gu-seal-ring { inset: 36.5%; width: 27%; height: 27%; z-index: 1; opacity: 0; filter: drop-shadow(0 0 12px rgba(255, 190, 54, 0.72)); }
.gu-seal-layer.is-armed .gu-seal-ring { transition: opacity 160ms ease, transform 180ms ease; }
.gu-danger-icon { top: -30%; left: 50%; z-index: 3; width: 34%; transform: translateX(-50%); filter: drop-shadow(0 0 10px rgba(255, 34, 20, 0.9)); animation: gu-icon-pulse 540ms ease-in-out infinite alternate; }
.gu-count { position: absolute; top: -5%; left: 50%; z-index: 5; padding: 4px 10px; border: 1px solid rgba(255, 205, 92, 0.55); border-radius: 999px; font-size: clamp(15px, 1.55vw, 24px); background: rgba(31, 8, 2, 0.86); transform: translate(-50%, -100%); text-shadow: 0 0 8px #000; opacity: 0; }
.gu-seal-layer.is-armed .gu-count { opacity: 1; }
.gu-bursts { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.gu-tap-burst { position: absolute; width: 58%; transform: translate(-50%, -50%); mix-blend-mode: screen; animation: gu-burst 320ms ease-out forwards; }
.gu-jar-target.is-hit { animation: gu-jar-hit 190ms ease-out; }
.gu-timer { position: absolute; right: 22%; bottom: max(5.5%, env(safe-area-inset-bottom)); left: 22%; z-index: 5; height: 5px; overflow: hidden; border: 1px solid rgba(129, 27, 18, 0.7); background: rgba(15, 2, 1, 0.7); opacity: 0; }
.gu-seal-layer.is-armed .gu-timer { opacity: 1; }
.gu-timer span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #ffcb55, #a91f12); box-shadow: 0 0 14px #c7371f; transform-origin: left; }
.gu-failure { position: absolute; inset: -7%; z-index: 7; width: 114%; height: 114%; object-fit: cover; opacity: 0; pointer-events: none; }
.gu-seal-layer.is-failure .gu-failure { animation: gu-failure-spread 1.15s ease-in forwards; }
.gu-seal-layer.is-failure .gu-copy { z-index: 8; top: 43%; color: #ead7c7; background: rgba(13, 0, 0, 0.76); animation: gu-copy-impact 400ms 350ms both; }
.gu-seal-layer.is-failure .gu-copy strong { color: #e8d6cf; font-size: clamp(28px, 4vw, 62px); }
.gu-seal-layer.is-success::after { content: ""; position: absolute; inset: 0; z-index: 6; background: #fff7d6; animation: gu-success-flash 760ms ease-out forwards; }
.gu-seal-layer.is-success .gu-seal-ring { opacity: 1; animation: gu-seal-close 700ms ease-out forwards; }
.gu-seal-layer.is-success .gu-copy { z-index: 8; top: 41%; border-color: rgba(255, 211, 95, 0.75); background: rgba(31, 20, 3, 0.82); animation: gu-copy-impact 400ms both; }
.gu-seal-layer.is-success .gu-copy strong { color: #fff0b2; font-size: clamp(26px, 3.2vw, 50px); }
@keyframes gu-edge-breathe { to { opacity: 0.7; box-shadow: inset 0 0 140px rgba(194, 8, 0, 0.7); } }
@keyframes gu-danger-spin { to { transform: rotate(360deg); } }
@keyframes gu-danger-pulse { from { filter: brightness(0.7); } to { filter: brightness(1.35); } }
@keyframes gu-icon-pulse { to { transform: translateX(-50%) scale(1.13); filter: drop-shadow(0 0 20px rgba(255, 48, 20, 1)); } }
@keyframes gu-burst { from { opacity: 1; transform: translate(-50%, -50%) scale(0.35); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.35); } }
@keyframes gu-jar-hit { 45% { filter: brightness(1.7); transform: translate(-50%, -50%) scale(0.92); } }
@keyframes gu-success-flash { 0% { opacity: 0; } 18% { opacity: 0.92; } 100% { opacity: 0; } }
@keyframes gu-seal-close { 50% { filter: drop-shadow(0 0 34px #ffd76a) brightness(1.7); transform: rotate(14deg) scale(1.12); } }
@keyframes gu-failure-spread { from { opacity: 0; transform: scale(0.12); } 35% { opacity: 0.75; } to { opacity: 1; transform: scale(1); } }
@keyframes gu-copy-impact { from { opacity: 0; transform: translate(-50%, 12px) scale(0.92); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

@keyframes rapid-ring-pulse {
  0% { opacity: 0.4; transform: scale(1.15); }
  50% { opacity: 0.9; }
  100% { opacity: 0.4; transform: scale(0.9); }
}

@keyframes rapid-trail-flash { 0% { opacity: 0; transform: rotate(-12deg) scale(0.65); } 35% { opacity: 0.8; } 100% { opacity: 0; transform: rotate(-12deg) scale(1.08); } }
@keyframes rapid-impact { from { opacity: 1; transform: translate(-50%, -50%) scale(0.35); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.35); } }
@keyframes rapid-debris { from { opacity: 0.65; transform: translate(-50%, -50%) scale(0.55); } to { opacity: 0; transform: translate(-50%, -58%) scale(1.1); } }
@keyframes rapid-lock { 0% { transform: scale(1.08); filter: brightness(1); } 55% { transform: scale(0.72); filter: brightness(2); } 100% { transform: scale(0.82); filter: brightness(1.25); } }
@keyframes rapid-shatter { from { opacity: 1; transform: translate(-50%, -50%) scale(0.65); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.45); } }

@keyframes heal-edge-flash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes heal-edge-pulse {
  0%, 100% { opacity: 0; }
  18% { opacity: 1; }
  55% { opacity: 0.5; }
}

@keyframes heal-number-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.58); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -170%) scale(0.88); }
}

@keyframes heal-tap-hand {
  0%, 18% { opacity: 0; transform: translateY(-18%) scale(0.94); }
  28% { opacity: 1; }
  62% { opacity: 1; transform: translateY(5%) scale(0.9); }
  76%, 100% { opacity: 0; transform: translateY(5%) scale(0.9); }
}

@keyframes heal-tap-ripple {
  0%, 48% { opacity: 0; transform: translateX(-50%) scale(0.3); }
  58% { opacity: 0.95; }
  90%, 100% { opacity: 0; transform: translateX(-50%) scale(1.45); }
}

@keyframes talisman-swipe-hand {
  0%, 12% { opacity: 0; transform: translateY(0) scale(0.82) rotate(-90deg); }
  22% { opacity: 0.92; }
  68% { opacity: 0.92; transform: translateY(-60%) scale(0.82) rotate(-90deg); }
  82%, 100% { opacity: 0; transform: translateY(-66%) scale(0.82) rotate(-90deg); }
}

@keyframes talisman-swipe-trail {
  0%, 17% { opacity: 0; transform: translateX(-50%) scaleY(0.12); }
  30% { opacity: 0.95; }
  70% { opacity: 0.82; transform: translateX(-50%) scaleY(1); }
  86%, 100% { opacity: 0; transform: translateX(-50%) scaleY(1); }
}

@keyframes talisman-swipe-arrow {
  0%, 48% { opacity: 0; transform: translateX(-50%) translateY(10px) rotate(45deg) scale(0.65); }
  65% { opacity: 1; }
  84%, 100% { opacity: 0; transform: translateX(-50%) translateY(-7px) rotate(45deg) scale(1); }
}

.start-screen,
.message,
.settings-dialog,
.ending {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(108, 79, 40, 0.18), transparent 38%),
    rgba(0, 0, 0, 0.84);
}

.start-panel,
.message-panel {
  width: min(520px, 82%);
  padding: clamp(24px, 5vh, 52px);
  border: 1px solid rgba(190, 147, 86, 0.7);
  border-radius: 4px;
  background: rgba(15, 13, 11, 0.94);
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.8);
}

.message-panel.is-image {
  width: min(1120px, 92%, 165vh);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.message-image {
  display: block;
  width: 100%;
  height: auto;
}

.message-image[hidden] {
  display: none;
}

.message-panel.is-image .message-actions {
  margin-top: clamp(14px, 2vh, 22px);
}

.message-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vh, 22px);
}

.choices.is-message-obscured {
  visibility: hidden;
}

.message-charge {
  display: grid;
  place-items: center;
  width: clamp(210px, 25vw, 320px);
  aspect-ratio: 1200 / 249;
  padding: 0 42px;
  color: #ffe3a4;
  background: url("./media/images/charging-cta-frame.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 7px 14px rgba(0, 0, 0, 0.65));
  font-family: "Noto Serif SC", "Microsoft YaHei", serif;
  font-size: clamp(16px, 1.8vw, 24px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-decoration: none;
  text-shadow: 0 2px 4px #260502, 0 0 10px rgba(255, 178, 74, 0.44);
  transition: filter 160ms ease, transform 160ms ease;
  animation: charging-cta-glow 1.8s ease-in-out infinite alternate;
}

.message-charge:hover,
.message-charge:focus-visible {
  outline: none;
  filter: brightness(1.2) drop-shadow(0 0 15px rgba(229, 145, 48, 0.48));
  transform: scale(1.035);
}

.message-charge:active {
  transform: scale(0.98);
}

@keyframes charging-cta-glow {
  from { filter: brightness(0.94) drop-shadow(0 7px 14px rgba(0, 0, 0, 0.65)); }
  to { filter: brightness(1.08) drop-shadow(0 0 13px rgba(224, 135, 43, 0.42)); }
}

.ending[hidden] { display: none; }
.ending { background: radial-gradient(ellipse at 50% 50%, rgba(111, 17, 11, 0.28), transparent 42%), rgba(0, 0, 0, 0.88); backdrop-filter: blur(6px); }
.ending-panel { position: relative; width: min(880px, 94%, 158vh); aspect-ratio: 1672 / 941; }
.ending-frame, .ending-content { position: absolute; inset: 0; width: 100%; height: 100%; }
.ending-frame { object-fit: contain; pointer-events: none; }
.ending-content { z-index: 1; }
.ending-copy { position: absolute; top: 18%; left: 16%; display: grid; place-content: center; width: 68%; height: 34%; text-align: center; }
.ending-copy h2 { margin: 0; color: #ffe1ad; font-family: "Noto Serif SC", Georgia, serif; font-size: clamp(30px, 4vw, 58px); font-weight: 500; letter-spacing: 0.2em; text-indent: 0.2em; text-shadow: 0 2px 5px #240402, 0 0 18px rgba(255, 145, 72, 0.44); }
.ending-copy p { margin: 12px 0 0; color: rgba(239, 201, 155, 0.72); font-family: "Noto Serif SC", serif; font-size: clamp(12px, 1.45vw, 19px); letter-spacing: 0.12em; }
.ending #restart { position: absolute; top: 65%; left: 31%; width: 38%; height: 16%; padding: 0; border: 0; color: #ffe1b1; background: transparent; font-family: "Noto Serif SC", serif; font-size: clamp(20px, 2.5vw, 36px); letter-spacing: 0.2em; text-indent: 0.2em; text-shadow: 0 2px 4px #250402, 0 0 12px rgba(255, 160, 87, 0.38); cursor: pointer; transition: filter 140ms ease, transform 140ms ease; }
.ending #restart:hover, .ending #restart:focus-visible { filter: brightness(1.25) drop-shadow(0 0 10px rgba(220, 80, 37, 0.54)); transform: scale(1.035); outline: none; }

.settings-dialog[hidden] { display: none; }
.settings-dialog { background: rgba(0, 0, 0, 0.86); backdrop-filter: blur(6px); }
.pause-menu, .exit-confirm { position: absolute; inset: 0; z-index: 18; display: grid; place-items: center; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(2px); }
.pause-menu nav { display: grid; gap: clamp(18px, 3.6vh, 42px); min-width: 220px; text-align: center; }
.pause-menu button, .exit-confirm button { padding: 4px 22px 8px; border: 0; color: rgba(255, 255, 255, 0.9); background: transparent; font-family: "Noto Serif SC", "STKaiti", "KaiTi", serif; font-size: clamp(26px, 2.2vw, 42px); letter-spacing: 0.14em; text-shadow: 0 2px 8px #000; cursor: pointer; transition: color 150ms ease, transform 150ms ease, text-shadow 150ms ease; }
.pause-menu button:hover, .pause-menu button:focus-visible, .exit-confirm button:hover, .exit-confirm button:focus-visible { outline: 0; color: #f4d49b; text-shadow: 0 0 12px rgba(225, 154, 78, 0.72), 0 2px 8px #000; transform: scale(1.08); }
.pause-menu button:active, .exit-confirm button:active { transform: scale(0.98); }
.exit-confirm > div { min-width: min(76vw, 520px); padding: clamp(34px, 6vh, 66px) clamp(38px, 6vw, 82px); border: 1px solid rgba(202, 146, 78, 0.52); background: radial-gradient(circle at 50% 20%, rgba(70, 42, 22, 0.78), rgba(8, 8, 8, 0.96) 72%); box-shadow: inset 0 0 0 3px rgba(75, 43, 22, 0.72), 0 20px 60px rgba(0, 0, 0, 0.72); text-align: center; }
.exit-confirm h2 { margin: 0 0 clamp(28px, 5vh, 48px); color: #f0dfbd; font-family: "Noto Serif SC", "STKaiti", "KaiTi", serif; font-size: clamp(28px, 2.5vw, 46px); font-weight: 400; letter-spacing: 0.16em; text-shadow: 0 2px 8px #000; }
.exit-confirm nav { display: flex; justify-content: center; gap: clamp(36px, 7vw, 90px); }
.exit-confirm button { font-size: clamp(22px, 1.65vw, 32px); }
.settings-panel { position: relative; width: min(920px, 96%, 128vh); aspect-ratio: 1448 / 1086; color: #e8cfaa; }
.settings-frame, .settings-content { position: absolute; inset: 0; width: 100%; height: 100%; }
.settings-frame { object-fit: contain; pointer-events: none; }
.settings-content { z-index: 1; }
.settings-heading { position: absolute; top: 4.8%; left: 23%; display: grid; place-content: center; width: 54%; height: 12%; text-align: center; }
.settings-heading h2 { margin: 0; color: #ffe5b7; font-family: "Noto Serif SC", Georgia, serif; font-size: clamp(24px, 2.45vw, 38px); font-weight: 500; letter-spacing: 0.2em; text-indent: 0.2em; text-shadow: 0 2px 4px #1c0302, 0 0 14px rgba(255, 166, 91, 0.42); }
.settings-subtitle { margin: 3px 0 0; color: rgba(223, 181, 134, 0.62); font-size: clamp(9px, 0.9vw, 12px); letter-spacing: 0.13em; }
.settings-row { position: absolute; left: 18.2%; display: grid; grid-template-columns: minmax(175px, 1fr) auto; align-items: center; gap: 22px; width: 63.6%; height: 17.8%; padding: 2.2% 4%; }
.settings-screen { top: 19.3%; }
.settings-sound { top: 40.9%; }
.settings-speed { top: 62.6%; }
.settings-row > span { display: grid; gap: 5px; }
.settings-row strong { color: #f4d3a4; font-family: "Noto Serif SC", "Microsoft YaHei", serif; font-size: clamp(16px, 1.65vw, 21px); font-weight: 500; letter-spacing: 0.12em; text-shadow: 0 1px 4px #190403; }
.settings-row small { color: rgba(205, 166, 126, 0.62); font-size: clamp(9px, 0.9vw, 12px); line-height: 1.4; }
.settings-options { display: flex; gap: 5px; padding: 3px; border: 1px solid rgba(151, 75, 48, 0.52); border-radius: 3px; background: rgba(8, 3, 3, 0.68); box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.82); }
.settings-options button, .settings-close { border: 1px solid rgba(126, 68, 47, 0.54); border-radius: 2px; color: #aa8c77; background: linear-gradient(#24100d, #100706); cursor: pointer; transition: filter 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; }
.settings-options button { min-width: 78px; padding: 9px 16px; }
.settings-speed .settings-options button { min-width: 142px; padding-inline: 12px; font-size: 13px; white-space: nowrap; }
.settings-options button.is-active { color: #fff0c9; border-color: #d4824e; background: radial-gradient(ellipse at 50% 20%, #a32f1d, #68170f 52%, #300907); box-shadow: inset 0 2px 0 rgba(255, 191, 126, 0.5), inset 0 -4px 10px rgba(32, 2, 1, 0.75), 0 0 15px rgba(210, 75, 32, 0.46); text-shadow: 0 1px 3px #2a0503, 0 0 9px rgba(255, 199, 137, 0.48); }
.settings-options button:hover, .settings-options button:focus-visible { color: #fff1ca; border-color: #e4a06b; filter: brightness(1.18); transform: translateY(-1px); box-shadow: 0 0 13px rgba(211, 88, 43, 0.46); outline: none; }
.settings-close { position: absolute; top: 85%; left: 32.2%; width: 35.6%; height: 7.6%; padding: 0; color: #efd0a1; border-color: transparent; background: transparent; font-family: "Noto Serif SC", serif; font-size: clamp(15px, 1.45vw, 20px); letter-spacing: 0.22em; text-shadow: 0 1px 4px #1d0403; }
.settings-close:hover, .settings-close:focus-visible { color: #fff1ca; border-color: transparent; background: transparent; filter: brightness(1.18) drop-shadow(0 0 6px rgba(224, 142, 77, 0.5)); box-shadow: none; outline: none; }

.chapters-dialog { position: absolute; inset: 0; z-index: 21; overflow: hidden; background: #020608; font-family: "Noto Serif SC", "Microsoft YaHei", serif; }
.chapters-dialog[hidden] { display: none; }
.chapters-dialog::after { position: absolute; inset: 0; z-index: 0; content: ""; background: linear-gradient(180deg, rgba(1, 5, 8, 0.18), rgba(1, 5, 8, 0.62)), radial-gradient(circle at 50% 48%, transparent 25%, rgba(0, 0, 0, 0.28) 85%); pointer-events: none; }
.chapters-dialog > .chapters-map { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(0.58) saturate(0.72); pointer-events: none; }
.chapters-heading { position: absolute; top: 2.8%; left: 4%; z-index: 2; width: 52%; color: #e7bd78; text-align: left; pointer-events: none; }
.chapters-heading > p { margin: 0 0 3px; color: rgba(211, 163, 99, 0.58); font-size: clamp(9px, 0.8vw, 13px); letter-spacing: 0.24em; }
.chapters-heading h2 { margin: 0; color: #f1c77f; font-size: clamp(23px, 2.65vw, 43px); font-weight: 500; letter-spacing: 0.08em; text-shadow: 0 2px 7px rgba(0, 0, 0, 0.9), 0 0 12px rgba(208, 111, 45, 0.28); }
.chapter-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 14px; margin-top: 6px; color: rgba(222, 186, 137, 0.7); }
.chapter-summary strong { color: #e9bd79; font-size: clamp(12px, 1.1vw, 18px); font-weight: 500; white-space: nowrap; }
.chapter-summary span { overflow: hidden; font-size: clamp(10px, 0.85vw, 14px); letter-spacing: 0.06em; text-overflow: ellipsis; white-space: nowrap; }
.chapter-progress { position: absolute; bottom: 5.5%; left: 5%; z-index: 2; display: flex; align-items: baseline; gap: 10px; color: rgba(205, 166, 111, 0.7); }
.chapter-progress span { font-size: clamp(10px, 0.85vw, 14px); letter-spacing: 0.12em; }
.chapter-progress strong { color: #edc17d; font-size: clamp(14px, 1.25vw, 20px); font-weight: 500; }
.chapters-close { position: absolute; top: 3%; right: 3%; z-index: 2; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(205, 133, 78, 0.75); border-radius: 50%; color: #f4d19d; background: rgba(25, 8, 7, 0.82); font-size: 30px; line-height: 1; cursor: pointer; box-shadow: 0 0 14px rgba(184, 73, 34, 0.34); }
.chapters-close:hover { color: #fff1ca; filter: brightness(1.25); transform: scale(1.05); }

/* Ornate chapter frames mirror the visual language of 剧情进度总览.png. */
.chapter-tree button { aspect-ratio: 1.42 / 1; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.chapter-tree button::before { position: absolute; top: 0; right: 0; left: 0; z-index: 2; height: 69%; border: 2px solid #b77a3e; border-radius: 18% / 24%; content: ""; pointer-events: none; box-shadow: inset 0 0 0 2px #4b2b15, inset 0 0 0 4px rgba(221, 165, 92, 0.32), inset 0 0 18px rgba(0, 0, 0, 0.95), 0 0 0 1px #2c170d, 0 0 10px rgba(221, 133, 57, 0.28); }
.chapter-tree button::after { position: absolute; top: -4%; left: 50%; z-index: 3; width: 24%; height: 12%; border-top: 2px solid #d09a5a; border-radius: 50%; content: ""; pointer-events: none; box-shadow: 0 -2px 0 #513019; transform: translateX(-50%); }
.chapter-tree button img { position: absolute; top: 5%; left: 5%; z-index: 1; display: block; width: 90%; height: 59%; margin: 0; object-fit: cover; object-position: center; border-radius: 14% / 20%; clip-path: inset(0 round 14% 14% 14% 14%); filter: brightness(0.58) saturate(0.55); }
.chapter-tree button > span { position: absolute; right: 9%; bottom: 0; left: 9%; z-index: 3; height: 21%; padding: 0 5%; border: 1px solid #a66d36; border-radius: 999px; color: rgba(221, 184, 128, 0.66); background: linear-gradient(180deg, rgba(34, 21, 12, 0.98), rgba(8, 8, 7, 0.98)); box-shadow: inset 0 0 0 2px rgba(63, 36, 18, 0.95), 0 0 7px rgba(0, 0, 0, 0.8); }
.chapter-tree button > span::before, .chapter-tree button > span::after { position: absolute; top: -38%; width: 1px; height: 38%; content: ""; background: #b77a3e; box-shadow: 0 0 2px #e0aa65; }
.chapter-tree button > span::before { left: 22%; }
.chapter-tree button > span::after { right: 22%; }
.chapter-tree button small { flex: 0 0 auto; font-size: clamp(6px, 0.46vw, 9px); }
.chapter-tree button strong { overflow: hidden; font-size: clamp(7px, 0.59vw, 11px); font-weight: 500; text-overflow: clip; white-space: nowrap; }
.chapter-state { top: 6%; right: 7%; z-index: 4; }
.chapter-tree button.is-complete, .chapter-tree button.is-available { border: 0; box-shadow: none; }
.chapter-tree button.is-complete::before { border-color: #e0a15a; box-shadow: inset 0 0 0 2px #633519, inset 0 0 0 4px rgba(242, 180, 99, 0.42), inset 0 0 15px rgba(0, 0, 0, 0.82), 0 0 12px rgba(231, 132, 51, 0.52); }
.chapter-tree button.is-available::before { border-color: #f0bd73; box-shadow: inset 0 0 0 2px #7a421d, inset 0 0 0 4px rgba(255, 204, 126, 0.5), inset 0 0 15px rgba(0, 0, 0, 0.8), 0 0 17px rgba(244, 160, 72, 0.68); }
.chapter-tree button.is-complete > span, .chapter-tree button.is-available > span { color: #edc98e; border-color: #d99b55; }
.chapter-tree button:hover, .chapter-tree button:focus-visible { filter: brightness(1.12); transform: translateY(-2px) scale(1.025); }
.chapter-common > i, .route-chapters > i { position: relative; height: 2px; background: linear-gradient(90deg, #74431f, #eca75a 45%, #74431f); box-shadow: 0 0 9px rgba(238, 139, 52, 0.68); }
.chapter-common > i::after, .route-chapters > i::after { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border: 1px solid #dda05b; border-radius: 50%; content: ""; background: #4a2514; box-shadow: 0 0 7px #d97c30; transform: translate(-50%, -50%); }
.chapter-route { border-color: rgba(177, 114, 57, 0.48); border-radius: 14px; background: linear-gradient(180deg, rgba(4, 12, 14, 0.74), rgba(2, 7, 9, 0.88)); box-shadow: inset 0 0 0 1px rgba(61, 34, 17, 0.75), inset 0 0 28px rgba(0, 0, 0, 0.62), 0 0 16px rgba(0, 0, 0, 0.42); }
.route-branches article { border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(45, 25, 14, 0.7); }
.route-branches article img { display: block; width: calc(100% - 8px); height: 52%; margin: 4px; object-fit: cover; object-position: center; border-radius: 5px; clip-path: inset(0 round 5px); }

.chapters-heading { top: 2.2%; left: 3.2%; z-index: 4; width: 72%; }
.chapters-heading > p { margin-bottom: 2px; font-size: clamp(8px, 0.68vw, 12px); }
.chapters-heading h2 { font-size: clamp(22px, 2.35vw, 40px); }
.chapter-summary { display: flex; align-items: baseline; gap: 12px; margin-top: 3px; }
.chapter-summary strong { font-size: clamp(11px, 0.92vw, 16px); }
.chapter-summary span { font-size: clamp(9px, 0.72vw, 13px); }
.chapter-detail-list { display: flex; flex-wrap: wrap; gap: 3px 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.chapter-detail-list li { padding: 2px 6px; border: 1px solid rgba(176, 115, 65, 0.38); border-radius: 999px; color: rgba(232, 199, 155, 0.72); background: rgba(5, 7, 8, 0.66); font-family: "Microsoft YaHei", sans-serif; font-size: clamp(7px, 0.55vw, 10px); }
.chapter-tree { position: absolute; inset: 15% 3.2% 8%; z-index: 2; }
.chapter-common { position: absolute; top: 0; left: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr) 30px) minmax(0, 1fr); align-items: center; width: 43%; }
.chapter-common > i, .route-chapters > i { height: 2px; background: linear-gradient(90deg, #81522c, #e2a65b, #81522c); box-shadow: 0 0 8px rgba(227, 132, 55, 0.55); }
.chapter-tree button { position: relative; min-width: 0; aspect-ratio: 16 / 10; padding: 0; overflow: hidden; border: 1px solid rgba(196, 135, 76, 0.7); border-radius: 10px; color: #dcb97e; background: #060707; cursor: default; box-shadow: inset 0 0 0 2px rgba(57, 29, 16, 0.9), 0 0 10px rgba(0, 0, 0, 0.65); transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
.chapter-tree button img { width: 100%; height: 68%; object-fit: cover; filter: brightness(0.58) saturate(0.55); }
.chapter-tree button > span { position: absolute; right: 3px; bottom: 3px; left: 3px; display: flex; align-items: center; justify-content: center; gap: 4px; height: 28%; color: inherit; white-space: nowrap; }
.chapter-tree button small { font-size: clamp(6px, 0.48vw, 9px); }
.chapter-tree button strong { font-size: clamp(7px, 0.61vw, 11px); font-weight: 500; }
.chapter-state { position: absolute; top: 5px; right: 5px; padding: 2px 5px; border-radius: 999px; color: #d6bc93; background: rgba(3, 4, 4, 0.72); font-family: "Microsoft YaHei", sans-serif; font-size: clamp(6px, 0.45vw, 9px); font-weight: 400; }
.chapter-tree button.is-complete, .chapter-tree button.is-available { cursor: pointer; }
.chapter-tree button.is-complete { border-color: #dfa25c; box-shadow: inset 0 0 0 2px rgba(101, 49, 20, 0.9), 0 0 14px rgba(222, 120, 48, 0.42); }
.chapter-tree button.is-complete img { filter: brightness(0.94) saturate(0.88); }
.chapter-tree button.is-available { border-color: #f0c078; box-shadow: inset 0 0 0 2px rgba(128, 66, 24, 0.9), 0 0 18px rgba(242, 158, 72, 0.58); }
.chapter-tree button.is-available img { filter: brightness(0.8) saturate(0.72); }
.chapter-tree button:hover, .chapter-tree button:focus-visible { z-index: 2; outline: none; transform: translateY(-2px) scale(1.025); }
.chapter-fork { position: absolute; top: 0; left: 44%; display: grid; gap: 5px; width: 17%; color: #e3b871; font-family: "Microsoft YaHei", sans-serif; font-size: clamp(7px, 0.56vw, 10px); }
.chapter-fork span { padding: 5px 8px; border-left: 2px solid #c47a37; background: linear-gradient(90deg, rgba(94, 35, 17, 0.72), transparent); }
.chapter-route { position: absolute; right: 0; width: 55%; padding: 7px 9px; border: 1px solid rgba(156, 94, 49, 0.4); border-radius: 10px; background: rgba(2, 7, 9, 0.7); box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.55); }
.chapter-route-up { top: 0; height: 45%; }
.chapter-route-down { bottom: 0; height: 43%; }
.chapter-route > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; height: 13%; color: #e6b469; }
.chapter-route > header strong { font-size: clamp(10px, 0.82vw, 15px); font-weight: 500; }
.chapter-route > header span { color: rgba(218, 176, 120, 0.64); font-size: clamp(7px, 0.55vw, 10px); }
.route-chapters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr) 18px) minmax(0, 1fr); align-items: center; height: 42%; }
.chapter-route-down .route-chapters { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); width: 48%; }
.route-branches { display: flex; align-items: stretch; gap: 5px; height: 42%; margin-top: 3px; overflow: hidden; }
.route-branches article { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border: 1px solid rgba(150, 104, 61, 0.55); border-radius: 6px; color: #ddc29c; background: rgba(11, 10, 9, 0.88); font-family: "Microsoft YaHei", sans-serif; }
.route-branches article img { width: 100%; height: 55%; object-fit: cover; filter: brightness(0.72) saturate(0.68); }
.route-branches article span { position: absolute; right: 3px; bottom: 3px; left: 3px; display: block; font-size: clamp(5px, 0.42vw, 8px); line-height: 1.15; }
.route-branches article:not(:has(img)) span { top: 50%; bottom: auto; transform: translateY(-50%); text-align: center; }
.route-branches article b { display: block; margin-bottom: 2px; color: #f0c27e; font-size: clamp(6px, 0.49vw, 9px); }
.route-branches .is-interaction { border-color: rgba(219, 139, 43, 0.85); background: linear-gradient(145deg, rgba(118, 55, 12, 0.9), rgba(34, 14, 5, 0.94)); }
.route-branches .is-failure { border-color: rgba(148, 52, 38, 0.9); background: linear-gradient(145deg, rgba(72, 17, 14, 0.92), rgba(21, 6, 6, 0.96)); }
.route-branches .is-success, .route-branches .is-ending { border-color: rgba(215, 164, 77, 0.9); background: linear-gradient(145deg, rgba(86, 57, 16, 0.92), rgba(24, 17, 6, 0.96)); }
.route-branches .is-choice { border-color: rgba(132, 104, 181, 0.8); background: linear-gradient(145deg, rgba(43, 31, 65, 0.92), rgba(15, 10, 23, 0.96)); }
.chapter-progress { bottom: 2.5%; left: 3.5%; z-index: 4; }
.chapters-close { z-index: 4; }

/* Keep the ornate frame rules above the legacy chapter-card declarations. */
.chapters-dialog .chapter-tree button { aspect-ratio: 1.42 / 1; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.chapters-dialog .chapter-tree button img { position: absolute; top: 5%; left: 5%; z-index: 1; display: block; width: 90%; height: 59%; margin: 0; object-fit: cover; object-position: center; border-radius: 14% / 20%; clip-path: inset(0 round 14% 14% 14% 14%); }
.chapters-dialog .chapter-tree button > span { position: absolute; right: 9%; bottom: 0; left: 9%; z-index: 3; display: grid; align-content: center; justify-items: center; gap: 1px; height: 23%; padding: 1% 5%; border: 1px solid #a66d36; border-radius: 999px; color: rgba(221, 184, 128, 0.66); background: linear-gradient(180deg, rgba(34, 21, 12, 0.98), rgba(8, 8, 7, 0.98)); box-shadow: inset 0 0 0 2px rgba(63, 36, 18, 0.95), 0 0 7px rgba(0, 0, 0, 0.8); line-height: 1; white-space: nowrap; }
.chapters-dialog .chapter-tree button strong { max-width: 100%; overflow: visible; font-size: clamp(6px, 0.55vw, 10px); font-weight: 500; text-align: center; white-space: nowrap; }
.chapters-dialog .chapter-tree button.is-complete, .chapters-dialog .chapter-tree button.is-available { border: 0; box-shadow: none; }
.chapters-dialog .chapter-tree button:hover, .chapters-dialog .chapter-tree button:focus-visible { filter: brightness(1.12); transform: translateY(-2px) scale(1.025); }
.chapters-dialog .chapter-common > i, .chapters-dialog .route-chapters > i { position: relative; height: 2px; background: linear-gradient(90deg, #74431f, #eca75a 45%, #74431f); box-shadow: 0 0 9px rgba(238, 139, 52, 0.68); }
.chapters-dialog .chapter-route { border-color: rgba(177, 114, 57, 0.48); border-radius: 14px; background: linear-gradient(180deg, rgba(4, 12, 14, 0.74), rgba(2, 7, 9, 0.88)); box-shadow: inset 0 0 0 1px rgba(61, 34, 17, 0.75), inset 0 0 28px rgba(0, 0, 0, 0.62), 0 0 16px rgba(0, 0, 0, 0.42); }
.chapters-dialog .route-branches article img { display: block; width: calc(100% - 8px); height: 52%; margin: 4px; object-fit: cover; object-position: center; border-radius: 5px; clip-path: inset(0 round 5px); }

.chapter-overview { inset: 14% 5% 9%; }
.chapter-overview .chapter-lines { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; }
.chapter-overview .chapter-lines path { fill: none; stroke: #d18b43; stroke-width: 2.4; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(238, 132, 48, 0.9)); }
.chapter-overview .chapter-lines .branch-line { stroke: #e0a154; stroke-dasharray: 6 4; }
.chapter-overview button { position: absolute; z-index: 2; width: 14.4%; }
.chapter-overview button:nth-of-type(1) { top: 5%; left: 3.2%; }
.chapter-overview button:nth-of-type(2) { top: 5%; left: 22.1%; }
.chapter-overview button:nth-of-type(3) { top: 5%; left: 41%; }
.chapter-overview button:nth-of-type(4) { top: 5%; left: 59.9%; }
.chapter-overview button:nth-of-type(5) { top: 5%; left: 78.8%; }
.chapter-overview button:nth-of-type(6) { top: 53%; left: 78.8%; }
.chapter-overview button:nth-of-type(7) { top: 53%; left: 59.9%; }
.chapter-overview button:nth-of-type(8) { top: 53%; left: 41%; }
.chapter-overview button:nth-of-type(9) { top: 53%; left: 22.1%; }
.chapter-overview button:nth-of-type(10) { top: 53%; left: 3.2%; }
.branch-label, .branch-note { position: absolute; z-index: 3; padding: 3px 7px; border: 1px solid rgba(182, 118, 57, 0.58); border-radius: 999px; color: #e6bd7d; background: rgba(6, 9, 9, 0.86); font-family: "Microsoft YaHei", sans-serif; font-size: clamp(7px, 0.56vw, 11px); white-space: nowrap; box-shadow: 0 0 8px rgba(0, 0, 0, 0.8); pointer-events: none; }
.branch-a { top: 33%; left: 75%; color: #f0c889; }
.branch-b { top: 42%; left: 42%; color: #f0c889; }
.branch-note { border-color: rgba(123, 78, 42, 0.52); color: rgba(222, 190, 148, 0.76); font-size: clamp(6px, 0.47vw, 9px); }
.note-05 { top: 30%; left: 79.2%; }
.note-06 { top: 82%; left: 79.2%; }
.note-07 { top: 82%; left: 60.3%; }
.note-08 { top: 82%; left: 41.4%; }
.note-09 { top: 82%; left: 22.5%; }
.note-10 { top: 82%; left: 3.6%; }
.chapter-detail-list { max-width: 70%; }
.chapters-map { filter: brightness(0.76) saturate(0.82); }
.chapters-dialog::after { background: linear-gradient(180deg, rgba(1, 5, 8, 0.1), rgba(1, 5, 8, 0.24)), radial-gradient(circle at 50% 48%, transparent 35%, rgba(0, 0, 0, 0.18) 90%); }
.chapters-heading > p, .chapter-summary strong, .chapter-detail-list { display: none; }
.chapters-heading { top: 2.7%; left: 3.7%; width: 58%; }
.chapters-heading h2 { font-size: clamp(25px, 2.45vw, 42px); letter-spacing: 0.04em; }
.chapter-summary { margin-top: 5px; }
.chapter-summary span { color: rgba(220, 180, 119, 0.72); font-size: clamp(10px, 0.9vw, 15px); letter-spacing: 0.08em; }
.chapter-progress { bottom: 3%; left: 3.2%; display: grid; place-items: center; width: clamp(76px, 6.4vw, 112px); aspect-ratio: 1; border: 1px solid rgba(185, 125, 64, 0.72); border-radius: 50%; background: radial-gradient(circle, rgba(31, 22, 14, 0.94), rgba(5, 8, 8, 0.96)); box-shadow: inset 0 0 0 4px rgba(68, 42, 22, 0.72), 0 0 12px rgba(0, 0, 0, 0.76); }
.chapter-progress::after { position: absolute; top: 50%; left: 100%; width: clamp(120px, 16vw, 300px); height: 12px; content: ""; background: radial-gradient(circle at 6px 50%, #b87937 0 3px, transparent 4px) 0 50% / 24px 12px repeat-x; opacity: 0.7; transform: translateY(-50%); }
.chapter-progress span { z-index: 1; font-size: clamp(10px, 0.86vw, 15px); letter-spacing: 0.08em; }
.chapter-progress strong { z-index: 1; margin-top: -30%; font-size: clamp(10px, 0.9vw, 16px); }

@media (max-width: 640px) {
  .settings-panel { width: 98%; }
  .settings-heading h2 { font-size: clamp(18px, 5vw, 26px); }
  .settings-subtitle { display: none; }
  .settings-row { grid-template-columns: 1fr auto; gap: 6px; padding: 2% 4%; }
  .settings-row small { display: none; }
  .settings-row strong { font-size: clamp(12px, 3vw, 16px); }
  .settings-options button { flex: 1; min-width: 0; }
}

@media (max-height: 720px) {
  .settings-panel { width: min(790px, 96%, 128vh); }
  .settings-row small { display: none; }
  .settings-row strong { font-size: 16px; }
  .settings-options button { padding: 6px 14px; }
}

.eyebrow {
  margin: 0 0 10px;
  color: #a98a5c;
  font-family: Georgia, serif;
  font-size: clamp(10px, 1.5vw, 14px);
  letter-spacing: 0.28em;
}

.start-panel h1 {
  margin: 0;
  color: #ecd19e;
  font-family: Georgia, "Microsoft YaHei", serif;
  font-size: clamp(32px, 7vw, 70px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-shadow: 0 3px 16px rgba(214, 171, 101, 0.22);
}

.start-note,
.start-tip {
  color: #b8aea0;
}

.start-note {
  margin: 16px 0 30px;
  font-size: clamp(13px, 2vw, 18px);
  letter-spacing: 0.12em;
}

.start-tip {
  margin: 20px 0 0;
  font-size: 12px;
}

.start-panel button,
.message button {
  padding: 11px 32px;
  border: 1px solid #bd945c;
  border-radius: 3px;
  color: #f7e3bd;
  background: #281e14;
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease;
}

.start-panel button:hover,
.start-panel button:active,
.message button:hover,
.message button:active {
  background: #45311d;
  transform: scale(1.035);
}

.message p {
  margin: 0 0 28px;
  color: #f0d3a0;
  font-size: clamp(26px, 4vw, 44px);
}

.choices {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.choice {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  will-change: transform, filter;
  transition: filter 140ms ease, transform 140ms ease;
}

.choice img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.choice-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 6%;
  color: #f5dfa7;
  font-family: "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-size: clamp(14px, 2.1vw, 38px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 2px 3px #000, 0 0 2px #000;
  pointer-events: none;
}

.choice:hover,
.choice:active,
.choice.is-hovered {
  z-index: 1;
  filter: brightness(1.2) drop-shadow(0 0 16px rgba(224, 183, 112, 0.78));
  transform: scale(1.035);
}

.choice:focus-visible {
  outline: 2px solid rgba(240, 207, 148, 0.9);
  outline-offset: 4px;
}

.choices.episode-4 .choice {
  left: 20.2%;
  width: 59.4%;
}

.choices.episode-3 .choice {
  top: 78.6%;
  left: 28.1%;
  width: 38.3%;
}

.choices.episode-3 #choice-b {
  display: none;
}

.choices.episode-4 .choice-label,
.choices.episode-5 .choice-label,
.choices.episode-9 .choice-label {
  inset: auto 4% 82% auto;
  display: block;
  width: auto;
  padding: 0.32em 0.72em;
  border: 1px solid rgba(255, 220, 139, 0.8);
  border-radius: 999px;
  color: #2b1905;
  font-size: clamp(12px, 1.5vw, 25px);
  line-height: 1;
  text-shadow: none;
  background: linear-gradient(180deg, #ffe8a8, #d8a94f);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.55);
}

.choices .choice-label:empty {
  display: none;
}

.message p {
  white-space: pre-line;
}

.choices.episode-4 #choice-a {
  top: 68.7%;
}

.choices.episode-4 #choice-b {
  top: 84%;
}

.choices.episode-5 .choice {
  width: 35.5%;
}

.choices.episode-5 #choice-a {
  top: 81.2%;
  left: 13.4%;
}

.choices.episode-5 #choice-b {
  top: 82.1%;
  left: 51.4%;
  width: 32.7%;
}

.choices.episode-6 .choice {
  top: 73.8%;
  width: 34%;
  min-width: 0;
  padding: 0;
}

.choices.episode-6 #choice-a {
  left: 15.5%;
}

.choices.episode-6 #choice-b {
  left: 50.5%;
}

.choices.episode-6 .choice img {
  position: static;
  width: 100%;
  height: auto;
}

.choices.episode-7 .choice {
  min-width: 0;
}

.choices.episode-7 #choice-a {
  top: 75%;
  left: 10.5%;
  width: 37.5%;
}

.choices.episode-7 #choice-b {
  top: 75.6%;
  left: 49%;
  width: 39.6%;
}

.choices.episode-7 .choice img {
  position: static;
  width: 100%;
  height: auto;
}

.choices.episode-9 .choice {
  top: 79.2%;
  width: 36.8%;
  min-width: 0;
}

.choices.episode-9 #choice-a {
  left: 11.8%;
}

.choices.episode-9 #choice-b {
  left: 51.4%;
}

.choices.episode-9 .choice img {
  position: static;
  width: 100%;
  height: auto;
}

.choices.episode-9b .choice {
  top: 76%;
  width: 37.3%;
  min-width: 0;
}

.choices.episode-9b #choice-a {
  left: 12.6%;
}

.choices.episode-9b #choice-b {
  left: 49.8%;
  width: 37.5%;
}

.choices.episode-9b .choice img {
  position: static;
  width: 100%;
  height: auto;
}

.choices.episode-4 .choice {
  right: auto;
  left: 20.2%;
  width: 59.4%;
}

.choices.episode-3 .choice img,
.choices.episode-4 .choice img,
.choices.episode-5 .choice img,
.choices.episode-6 .choice img,
.choices.episode-7 .choice img,
.choices.episode-9 .choice img,
.choices.episode-9b .choice img {
  width: 100%;
  max-width: none;
  height: auto;
}

.loading,
.error {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 40px;
  color: #ddd;
  font-size: 20px;
  text-align: center;
  white-space: pre-line;
  background: rgba(0, 0, 0, 0.92);
}

.loading {
  align-content: center;
  justify-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(102, 13, 9, 0.42), transparent 28%),
    radial-gradient(ellipse at center, rgba(20, 7, 5, 0.9), rgba(0, 0, 0, 0.98) 72%);
}

.loading-card {
  position: relative;
  display: grid;
  justify-items: center;
  width: min(440px, 76vw);
  animation: loading-reveal 360ms ease-out both;
}

.loading-mark {
  width: clamp(220px, 35vw, 400px);
  height: auto;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 15px rgba(205, 127, 48, 0.28));
  animation: loading-mark-breathe 2.2s ease-in-out infinite alternate;
}

.loading-copy {
  display: grid;
  justify-items: center;
  gap: 7px;
  margin-top: clamp(-12px, -1vw, -5px);
  text-align: center;
}

.loading-copy strong {
  color: #f1d28b;
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", sans-serif;
  font-size: clamp(18px, 2.25vw, 32px);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.35;
  text-shadow: 0 2px 3px #000, 0 0 16px rgba(218, 139, 54, 0.32);
}

.loading-copy span {
  color: rgba(226, 202, 158, 0.58);
  font-size: clamp(10px, 1.05vw, 14px);
  letter-spacing: 0.34em;
}

.loading-track {
  position: relative;
  width: min(220px, 42vw);
  height: 2px;
  margin-top: 18px;
  overflow: hidden;
  background: linear-gradient(90deg, transparent, rgba(174, 119, 49, 0.28), transparent);
}

.loading-track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, #efcc7c, transparent);
  filter: drop-shadow(0 0 5px #cf6a2d);
  animation: loading-track-sweep 1.35s ease-in-out infinite;
}

@keyframes loading-mark-breathe {
  from { opacity: 0.78; transform: scale(0.985); filter: drop-shadow(0 0 8px rgba(205, 127, 48, 0.18)); }
  to { opacity: 1; transform: scale(1.015); filter: drop-shadow(0 0 20px rgba(205, 127, 48, 0.42)); }
}

@keyframes loading-track-sweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(340%); }
}

@keyframes loading-reveal {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .loading-mark,
  .loading-track i,
  .loading-card {
    animation: none;
  }
}

.error {
  color: #ffd2d2;
}

.test-panel {
  position: absolute;
  top: max(142px, calc(env(safe-area-inset-top) + 142px));
  left: max(14px, env(safe-area-inset-left));
  z-index: 40;
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 4px 14px;
  max-width: min(720px, calc(100% - 28px));
  padding: 10px 14px;
  border: 1px solid rgba(238, 207, 153, 0.5);
  border-radius: 4px;
  color: #f9e1ae;
  font-size: clamp(10px, 1.4vw, 16px);
  line-height: 1.35;
  background: rgba(0, 0, 0, 0.72);
  pointer-events: none;
}

.test-help {
  grid-column: 1 / -1;
  color: #d7d7d7;
  font-size: 0.88em;
}

.touch-controls {
  position: absolute;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(238, 207, 153, 0.45);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.78);
  transform: translateX(-50%);
}

.touch-controls button {
  min-width: 64px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid rgba(189, 148, 92, 0.75);
  border-radius: 3px;
  color: #f7e3bd;
  background: #281e14;
  cursor: pointer;
  touch-action: manipulation;
}

.touch-controls button:active {
  background: #594027;
  transform: scale(0.96);
}

.choices:not([hidden]) ~ .touch-controls {
  display: none !important;
}

.player-ui { position: absolute; inset: 0; z-index: 8; opacity: 0; transition: opacity 260ms ease; pointer-events: none; }.player-ui::after { position: absolute; right: 0; bottom: 0; left: 0; height: 26%; content: ""; background: linear-gradient(180deg, transparent, rgba(2,3,3,.76) 58%, rgba(1,2,2,.94)); pointer-events: none; }.player-ui.is-visible { opacity: 1; }.player-chapter { position: absolute; top: 3.2%; left: 3.2%; display: flex; align-items: baseline; gap: 12px; color: #e7c47f; font-family: "Noto Serif SC","Microsoft YaHei",serif; text-shadow: 0 2px 5px #000,0 0 12px rgba(195,127,51,.42); letter-spacing: .12em; }.player-chapter span { font-size: clamp(12px,1.05vw,19px); opacity: .76; }.player-chapter strong { font-size: clamp(15px,1.45vw,27px); font-weight: 500; }.quick-tools { position: absolute; top: 27%; right: 3.4%; z-index: 2; display: grid; gap: clamp(10px,1.7vh,22px); pointer-events: auto; }.quick-tools button { position: relative; display: grid; place-items: center; width: clamp(48px,4.7vw,78px); aspect-ratio: 1; padding: 15%; border: 1px solid rgba(213,164,86,.52); border-radius: 50%; color: #e8c77e; background: radial-gradient(circle,rgba(73,56,34,.76),rgba(19,19,17,.72) 64%,rgba(4,5,5,.74)); box-shadow: inset 0 0 0 4px rgba(134,97,50,.12),0 5px 16px rgba(0,0,0,.44); cursor: pointer; transition: transform 150ms ease,color 150ms ease,border-color 150ms ease,box-shadow 150ms ease; }.quick-tools button:hover,.quick-tools button:focus-visible { outline: 0; color: #ffe6a7; border-color: #efc77d; box-shadow: inset 0 0 0 4px rgba(180,126,54,.2),0 0 18px rgba(216,151,70,.46); transform: scale(1.08); }.quick-tools button:active { transform: scale(.96); }.quick-tools button:disabled { opacity: .38; cursor: default; transform: none; }.quick-tools svg,.playback-controls svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }.tool-count { position: absolute; top: -3px; right: -3px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; color: #1b1207; font-size: 11px; font-weight: 700; background: #e7bd70; }.playback-controls { position: absolute; right: 3.2%; bottom: 2.5%; left: 3.2%; z-index: 2; display: grid; grid-template-columns: clamp(44px,4.2vw,68px) minmax(160px,1fr) auto auto clamp(44px,4.2vw,68px); align-items: center; gap: clamp(10px,1.55vw,28px); min-height: clamp(70px,8vw,118px); padding: clamp(10px,1.1vw,18px) clamp(14px,1.5vw,28px); border-top: 1px solid rgba(202,157,84,.34); border-bottom: 1px solid rgba(202,157,84,.18); background: linear-gradient(90deg,rgba(8,9,8,.32),rgba(38,31,22,.52) 45%,rgba(7,8,8,.42)); pointer-events: auto; }.playback-controls button { color: #e8c77e; cursor: pointer; }.control-icon { display: grid; place-items: center; width: 100%; aspect-ratio: 1; padding: 18%; border: 0; color: #e8c77e; background: transparent; }.control-icon:hover,.control-icon:focus-visible { outline: 0; color: #ffe7a9; filter: drop-shadow(0 0 7px rgba(228,173,91,.6)); }.control-icon svg { fill: currentColor; stroke: none; }.control-play .icon-play,.control-play.is-paused .icon-pause { display: none; }.control-play.is-paused .icon-play { display: block; }.progress-group { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; min-width: 0; }.progress-group output { min-width: 108px; color: #e7c98e; font-variant-numeric: tabular-nums; font-size: clamp(12px,1vw,17px); white-space: nowrap; }.playback-progress { grid-column: 1; width: 100%; height: 18px; margin: 0; accent-color: #d7a552; cursor: pointer; }.playback-progress.is-locked { cursor: not-allowed; filter: grayscale(.65); opacity: .52; }.playback-lock { position: absolute; bottom: calc(100% + 8px); left: 0; padding: 5px 8px; border: 1px solid rgba(202,157,84,.3); border-radius: 4px; color: #d9bd8c; font-size: 11px; background: rgba(7,7,6,.82); white-space: nowrap; opacity: 0; transition: opacity 150ms ease; }.progress-group:hover .playback-lock { opacity: 1; }.control-pill { min-width: clamp(72px,7vw,112px); min-height: clamp(36px,3.4vw,54px); padding: 5px 15px; border: 1px solid rgba(219,171,91,.62); border-radius: 18px; color: #e5c27c; font-size: clamp(13px,1.15vw,20px); background: linear-gradient(#28251e,#121413); }.volume-control { display: flex; align-items: center; width: clamp(92px,10vw,174px); }.volume-control .control-icon { flex: 0 0 clamp(42px,3.9vw,64px); }.icon-muted,.is-muted .icon-volume { display: none; }.is-muted .icon-muted { display: block; }.volume-slider { width: clamp(48px,6vw,108px); accent-color: #d7a552; }.gallery-dialog { position: absolute; inset: 0; z-index: 70; padding: clamp(22px,3vw,58px); color: #ead5ad; background: radial-gradient(circle at 50% 15%,rgba(76,49,24,.26),transparent 35%),rgba(3,5,5,.97); overflow: auto; }.gallery-dialog header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid rgba(208,151,75,.35); background: linear-gradient(rgba(3,5,5,.98) 70%,transparent); }.gallery-dialog header p { margin: 0 0 4px; color: #9d7448; font-size: 11px; letter-spacing: .28em; }.gallery-dialog h2 { margin: 0; color: #e6c181; font-family: "Noto Serif SC",serif; font-weight: 500; letter-spacing: .12em; }.gallery-dialog header button,.preview-close { width: 42px; height: 42px; border: 1px solid #8c6034; border-radius: 50%; color: #e6c181; font-size: 28px; background: #17130f; cursor: pointer; }.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(260px,100%),1fr)); gap: 20px; padding: 24px 0; }.gallery-card { overflow: hidden; padding: 0; border: 1px solid rgba(173,119,56,.58); border-radius: 10px; color: #ead1a4; text-align: left; background: #0c0d0c; cursor: pointer; }.gallery-card img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }.gallery-card span { display: grid; gap: 5px; padding: 12px; }.gallery-card strong { font-size: 14px; }.gallery-card small { color: #9e8a6a; }.gallery-empty { display: grid; min-height: 55%; place-items: center; color: #8b7a62; }.gallery-preview { position: absolute; inset: 0; z-index: 80; display: grid; grid-template-rows: minmax(0,1fr) auto; place-items: center; padding: 4%; background: rgba(0,0,0,.96); }.gallery-preview>img { max-width: 92%; max-height: 76vh; object-fit: contain; border: 1px solid rgba(215,166,89,.45); }.gallery-preview>div { display: flex; align-items: center; gap: 14px; max-width: 92%; padding-top: 16px; color: #d9bd8c; }.gallery-preview>div span { color: #9e8a6a; }.gallery-preview>div button,.gallery-preview>div a { padding: 8px 14px; border: 1px solid #79532d; border-radius: 4px; color: #e4c38a; text-decoration: none; background: #1d1711; cursor: pointer; }.preview-close { position: absolute; top: 20px; right: 22px; }.capture-toast { position: absolute; right: 50%; bottom: 16%; z-index: 90; padding: 9px 18px; border: 1px solid rgba(220,173,94,.6); border-radius: 20px; color: #f3d596; background: rgba(18,14,10,.9); transform: translateX(50%); }@media (max-width:760px) { .quick-tools { top: 22%; right: 2%; gap: 7px; }.quick-tools button { width: 42px; }.playback-controls { right: 1.5%; bottom: 1.5%; left: 1.5%; grid-template-columns: 38px minmax(90px,1fr) auto 38px; gap: 5px; min-height: 58px; padding: 7px 8px; }.volume-control { width: 38px; }.volume-slider { display: none; }.progress-group { gap: 5px; }.progress-group output { min-width: 76px; font-size: 10px; }.control-pill { min-width: 55px; min-height: 30px; padding: 3px 8px; font-size: 11px; }.playback-controls>#control-settings { display: none; }.gallery-preview>div { flex-wrap: wrap; justify-content: center; }.player-ui::after { height: 34%; } }

.volume-control .control-icon svg, #control-settings svg { fill: none; stroke: currentColor; stroke-width: 2.8; }.volume-control .control-icon svg path:first-child { fill: currentColor; stroke: currentColor; }

.player-ui.is-interaction-active { opacity: 0; pointer-events: none; }
.player-ui.is-obscured { opacity: 0; pointer-events: none; }
.player-ui:not(.is-visible) .quick-tools,
.player-ui:not(.is-visible) .playback-controls,
.player-ui.is-interaction-active .quick-tools,
.player-ui.is-interaction-active .playback-controls,
.player-ui.is-obscured .quick-tools,
.player-ui.is-obscured .playback-controls { pointer-events: none; }

.chapters-dialog .chapter-scene button.is-locked { display: none; }
.chapters-dialog .chapter-scene .chapter-event.is-locked { display: none; }

[hidden] {
  display: none !important;
}

@media (hover: none), (max-width: 700px) {
  .start-panel,
  .message-panel {
    padding: 22px;
  }

  .test-panel {
    right: 72px;
    max-width: none;
    grid-template-columns: 1fr auto;
  }

  .test-panel #test-state {
    display: none;
  }

  .test-help {
    display: none;
  }

  .touch-controls {
    width: calc(100% - 20px);
    justify-content: center;
    gap: 5px;
    padding: 6px;
  }

  .touch-controls button {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    padding: 7px 4px;
    font-size: 12px;
  }
}

/* The wide chapter canvas must override the legacy fixed chapter-tree layout. */
.chapters-dialog .chapter-viewport .chapter-scene {
  position: relative;
  inset: auto;
  z-index: auto;
  flex: 0 0 5000px;
  width: 5000px;
  height: 850px;
  min-width: 5000px;
  margin: 50vh 50vw;
  padding: 0;
}

.chapters-dialog .chapter-scene button small {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}

.chapters-dialog .chapter-scene button strong {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25;
}

.chapter-scene .chapter-state,
.chapter-scene .chapter-lock-state {
  padding: 3px 6px;
  font-size: 11px;
}

.chapter-scene .chapter-event span {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25;
}

.chapter-scene .chapter-event b {
  margin-bottom: 3px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}

/* Refined playback bar. */
.player-ui::after { height: 30%; background: linear-gradient(180deg, transparent, rgba(2, 4, 4, 0.48) 38%, rgba(1, 2, 2, 0.9) 78%, #010202); }
.playback-controls { right: 4%; bottom: 3.2%; left: 4%; grid-template-columns: clamp(48px, 4vw, 64px) minmax(220px, 1fr) auto auto clamp(48px, 4vw, 64px); gap: clamp(12px, 1.35vw, 24px); min-height: clamp(68px, 6.8vw, 98px); padding: clamp(10px, 0.9vw, 15px) clamp(16px, 1.35vw, 26px); border: 1px solid rgba(229, 184, 106, 0.3); border-radius: clamp(18px, 1.8vw, 28px); background: linear-gradient(110deg, rgba(8, 10, 10, 0.1), rgba(34, 29, 21, 0.1) 48%, rgba(8, 10, 10, 0.1)); box-shadow: inset 0 1px rgba(255, 235, 190, 0.08), inset 0 0 28px rgba(199, 139, 63, 0.06), 0 14px 42px rgba(0, 0, 0, 0.5); backdrop-filter: blur(18px) saturate(1.18); }
.progress-group { gap: clamp(10px, 1vw, 18px); }
.progress-group output { min-width: 112px; color: #e8d0a1; font-family: Consolas, "Microsoft YaHei", monospace; font-size: clamp(11px, 0.9vw, 15px); letter-spacing: 0.03em; text-align: right; }
.playback-progress, .volume-slider { height: 20px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.playback-progress::-webkit-slider-runnable-track { height: 4px; border: 1px solid rgba(225, 178, 94, 0.18); border-radius: 999px; background: linear-gradient(90deg, rgba(225, 172, 80, 0.95) 0 var(--playback-progress, 0%), rgba(62, 50, 34, 0.82) var(--playback-progress, 0%) 100%); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 8px rgba(208, 142, 57, 0.13); }
.volume-slider::-webkit-slider-runnable-track { height: 4px; border: 1px solid rgba(225, 178, 94, 0.18); border-radius: 999px; background: linear-gradient(90deg, rgba(225, 172, 80, 0.9), rgba(118, 82, 38, 0.9)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 8px rgba(208, 142, 57, 0.13); }
.playback-progress::-webkit-slider-thumb, .volume-slider::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -6px; appearance: none; border: 2px solid #f1d29a; border-radius: 50%; background: #b97931; box-shadow: 0 0 0 3px rgba(218, 158, 71, 0.14), 0 0 10px rgba(231, 177, 94, 0.5); }
.playback-progress:focus-visible, .volume-slider:focus-visible { outline: none; filter: brightness(1.2); }
.playback-progress.is-locked { pointer-events: none; opacity: 0.72; }
.control-pill { min-width: clamp(66px, 5.8vw, 92px); min-height: clamp(38px, 3vw, 48px); border-color: rgba(222, 177, 98, 0.42); border-radius: 999px; color: #edd09a; font-family: Consolas, monospace; font-size: clamp(12px, 1vw, 16px); letter-spacing: 0.04em; background: linear-gradient(180deg, rgba(64, 51, 33, 0.78), rgba(15, 17, 16, 0.9)); box-shadow: inset 0 1px rgba(255, 235, 190, 0.09), 0 5px 14px rgba(0, 0, 0, 0.28); }
.control-pill:hover, .control-pill:focus-visible { border-color: #e9be77; color: #ffe6b0; background: linear-gradient(180deg, rgba(90, 65, 34, 0.82), rgba(20, 20, 17, 0.94)); box-shadow: inset 0 1px rgba(255, 241, 207, 0.12), 0 0 16px rgba(218, 151, 62, 0.22); }
.volume-control { gap: 2px; width: clamp(112px, 9vw, 160px); }
.volume-control .control-icon { flex: 0 0 clamp(50px, 4.4vw, 70px); padding: 5px; }
.volume-slider { flex: 1 1 auto; min-width: 0; width: clamp(58px, 5.4vw, 94px); }

@media (max-width: 760px) {
  .playback-controls { right: 2%; bottom: 2%; left: 2%; grid-template-columns: 40px minmax(90px, 1fr) auto 40px; gap: 7px; min-height: 58px; padding: 8px 10px; border-radius: 18px; }
  .progress-group output { min-width: 74px; font-size: 10px; }
  .control-pill { min-width: 54px; min-height: 32px; padding: 3px 8px; font-size: 11px; }
  .volume-control { width: 40px; }
  .volume-control .control-icon { flex-basis: 40px; padding: 4px; }
  .volume-slider { display: none; }
}

@media (hover: none) and (max-width: 760px) {
  html.is-mobile-portrait {
    overflow: hidden;
  }

  html.is-mobile-portrait body {
    display: block;
  }

  html.is-mobile-portrait #stage {
    visibility: hidden;
  }

  html.is-mobile-portrait .rotate-device {
    display: grid;
  }

  body {
    min-height: var(--app-height);
  }

  .rotate-device {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    min-height: var(--app-height);
    overflow: hidden;
    padding: 0;
    color: #efd4a2;
    text-align: center;
    background:
      linear-gradient(180deg, rgba(1, 5, 7, 0.08), rgba(1, 4, 5, 0.14) 55%, rgba(0, 2, 3, 0.54)),
      radial-gradient(circle at 50% 39%, transparent 16%, rgba(0, 0, 0, 0.08) 53%, rgba(0, 0, 0, 0.5) 100%),
      url("./media/images/rotate-device-village-bg.webp") center / cover no-repeat;
  }

  .rotate-device::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.28));
    pointer-events: none;
  }

  .rotate-device-logo {
    position: absolute;
    top: max(7.5vh, env(safe-area-inset-top));
    left: 50%;
    z-index: 2;
    width: min(72vw, 330px);
    height: auto;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.96)) drop-shadow(0 0 18px rgba(219, 145, 57, 0.28));
    transform: translateX(-50%);
    pointer-events: none;
  }

  .rotate-device-card {
    position: absolute;
    top: 33%;
    left: 50%;
    z-index: 2;
    display: grid;
    justify-items: center;
    width: min(86vw, 390px);
    padding: 22px 22px 20px;
    border: 1px solid rgba(229, 175, 86, 0.88);
    border-radius: 4px;
    background:
      radial-gradient(ellipse at 50% 28%, rgba(176, 118, 48, 0.15), transparent 48%),
      linear-gradient(155deg, rgba(12, 12, 10, 0.9), rgba(2, 6, 7, 0.94));
    box-shadow: inset 0 0 0 3px rgba(74, 48, 22, 0.52), inset 0 0 52px rgba(151, 93, 34, 0.11), 0 22px 62px rgba(0, 0, 0, 0.82), 0 0 24px rgba(178, 106, 37, 0.18);
    transform: translateX(-50%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  .rotate-device-card::before,
  .rotate-device-card::after {
    position: absolute;
    width: 26px;
    height: 26px;
    content: "";
    pointer-events: none;
  }

  .rotate-device-card::before {
    top: 7px;
    left: 7px;
    border-top: 2px solid #e7b25f;
    border-left: 2px solid #e7b25f;
    box-shadow: -4px -4px 0 -2px #6e421d;
  }

  .rotate-device-card::after {
    right: 7px;
    bottom: 7px;
    border-right: 2px solid #e7b25f;
    border-bottom: 2px solid #e7b25f;
    box-shadow: 4px 4px 0 -2px #6e421d;
  }

  .rotate-device-visual {
    position: relative;
    width: min(48vw, 190px);
    height: 128px;
    margin: -5px 0 5px;
    overflow: visible;
    isolation: isolate;
  }

  .rotate-device-visual::before {
    position: absolute;
    top: 20px;
    left: calc(50% + 20px);
    z-index: 1;
    width: 52px;
    height: 52px;
    border-top: 3px solid #f1c477;
    border-right: 3px solid #f1c477;
    border-radius: 50%;
    content: "";
    filter: drop-shadow(0 0 7px rgba(239, 178, 83, 0.72));
    transform: rotate(18deg);
    animation: rotate-device-arrow 2.8s ease-in-out infinite;
    pointer-events: none;
  }

  .rotate-device-visual::after {
    position: absolute;
    top: 56px;
    left: calc(50% + 65px);
    z-index: 1;
    width: 12px;
    height: 12px;
    border-right: 3px solid #f1c477;
    border-bottom: 3px solid #f1c477;
    content: "";
    filter: drop-shadow(0 0 5px rgba(239, 178, 83, 0.72));
    transform: rotate(5deg);
    animation: rotate-device-arrow 2.8s ease-in-out infinite;
  }

  .rotate-device-icon {
    position: absolute;
    top: 7px;
    left: 50%;
    z-index: 2;
    display: block;
    width: 68px;
    height: auto;
    filter: drop-shadow(0 0 11px rgba(226, 157, 65, 0.38));
    transform: translateX(-50%) rotate(0deg);
    transform-origin: 50% 50%;
    animation: rotate-device-phone-fall 2.8s cubic-bezier(0.55, 0.04, 0.3, 1) infinite;
  }

  .rotate-device-card p {
    width: 100%;
    margin: 0;
    padding: 2px 0 14px;
    border-bottom: 1px solid rgba(224, 172, 88, 0.72);
    color: #f7d99e;
    font-family: "Noto Serif SC", "Microsoft YaHei", serif;
    font-size: clamp(23px, 7vw, 30px);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-shadow: 0 2px 6px #000, 0 0 18px rgba(224, 148, 54, 0.22);
  }

  .rotate-device-card small {
    max-width: 310px;
    margin: 14px 0 18px;
    color: rgba(245, 218, 171, 0.84);
    font-size: clamp(12px, 3.4vw, 14px);
    line-height: 1.7;
    text-shadow: 0 2px 4px #000;
  }

  .rotate-device-card button {
    width: min(78%, 280px);
    min-height: 50px;
    padding: 10px 26px;
    border: 1px solid #e6b968;
    border-radius: 999px;
    color: #ffedc1;
    background:
      linear-gradient(90deg, transparent, rgba(255, 210, 127, 0.15) 50%, transparent),
      linear-gradient(180deg, rgba(139, 88, 30, 0.96), rgba(46, 25, 10, 0.98));
    box-shadow: inset 0 1px rgba(255, 235, 190, 0.38), inset 0 -8px 18px rgba(38, 14, 3, 0.45), 0 0 18px rgba(219, 145, 54, 0.3), 0 8px 22px rgba(0, 0, 0, 0.48);
    font-family: "Noto Serif SC", "Microsoft YaHei", serif;
    font-size: 18px;
    letter-spacing: 0.12em;
    text-shadow: 0 2px 4px #2b1405;
    touch-action: manipulation;
  }

  .rotate-device-card button:active {
    filter: brightness(1.2);
    transform: scale(0.97);
  }

  @keyframes rotate-device-phone-fall {
    0%, 20% { transform: translateX(-50%) rotate(0deg) scale(0.98); filter: drop-shadow(0 0 8px rgba(226, 157, 65, 0.3)); }
    56%, 80% { transform: translateX(-50%) rotate(90deg) scale(1.04); filter: drop-shadow(0 0 18px rgba(240, 181, 91, 0.7)); }
    100% { transform: translateX(-50%) rotate(0deg) scale(0.98); filter: drop-shadow(0 0 8px rgba(226, 157, 65, 0.3)); }
  }

  @keyframes rotate-device-arrow {
    0%, 16%, 100% { opacity: 0.28; }
    38%, 72% { opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .rotate-device-icon {
    animation-duration: 5.6s;
  }

  .rotate-device-visual::before,
  .rotate-device-visual::after {
    animation-duration: 5.6s;
  }
}

@media (hover: none) and (max-height: 540px) {
  html:not(.is-mobile-landscape) .rotate-device {
    display: none;
  }

  html.is-mobile-landscape .rotate-device {
    display: none;
  }

  html,
  body {
    width: var(--app-width);
    height: var(--app-height);
  }

  #stage {
    max-width: var(--app-width);
    max-height: var(--app-height);
  }

  .home-menu {
    bottom: 1.5%;
    left: 2%;
    width: min(27vw, 42vh, 280px);
  }

  .player-chapter {
    top: max(2.5%, env(safe-area-inset-top));
    left: max(2.8%, env(safe-area-inset-left));
    gap: 7px;
  }

  .player-chapter span {
    font-size: 11px;
  }

  .player-chapter strong {
    font-size: 14px;
  }

  .quick-tools {
    top: 22%;
    right: max(2%, env(safe-area-inset-right));
    gap: 8px;
  }

  .quick-tools #capture-frame,
  .quick-tools #open-gallery {
    display: none;
  }

  .quick-tools button {
    width: 46px;
    min-width: 46px;
    min-height: 46px;
  }

  .playback-controls {
    right: max(2%, env(safe-area-inset-right));
    bottom: max(2%, env(safe-area-inset-bottom));
    left: max(2%, env(safe-area-inset-left));
    grid-template-columns: 44px minmax(120px, 1fr) 54px 44px 44px;
    gap: 7px;
    min-height: 54px;
    padding: 5px 9px;
    border-radius: 16px;
  }

  .control-icon,
  .volume-control .control-icon {
    min-width: 44px;
    min-height: 44px;
  }

  .control-pill {
    min-width: 54px;
    min-height: 40px;
    padding: 3px 7px;
    font-size: 11px;
  }

  .progress-group {
    gap: 5px;
  }

  .progress-group output {
    min-width: 68px;
    font-size: 9px;
  }

  .volume-control {
    width: 44px;
  }

  .volume-control .control-icon {
    flex-basis: 44px;
    padding: 5px;
  }

  .volume-slider {
    display: none;
  }

  .chapters-heading {
    top: max(2%, env(safe-area-inset-top));
    left: max(3%, env(safe-area-inset-left));
  }

  .chapters-heading h2 {
    font-size: 21px;
  }

  .chapter-summary span {
    font-size: 10px;
  }

  .chapters-close {
    top: max(2%, env(safe-area-inset-top));
    right: max(2%, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
  }

  .chapter-progress {
    bottom: max(2%, env(safe-area-inset-bottom));
    left: max(2%, env(safe-area-inset-left));
    width: 72px;
  }

  .chapter-swipe-hint {
    bottom: max(2%, env(safe-area-inset-bottom));
    font-size: 10px;
  }

  .chapters-dialog .chapter-viewport .chapter-scene {
    flex-basis: 3500px;
    width: 3500px;
    min-width: 3500px;
    height: 595px;
    margin: calc(50vh / 0.7) calc(50vw / 0.7);
    zoom: 0.7;
  }

  .settings-panel {
    width: min(720px, 94%, 128vh);
  }

  .settings-row small,
  .settings-subtitle {
    display: none;
  }

  .settings-options button {
    min-height: 40px;
  }

  .pause-menu button,
  .exit-confirm button {
    min-height: 44px;
  }
}

/* Final stage-relative sizing overrides viewport and fixed-pixel legacy rules. */
#stage { font-size: 1rem; }
.home-menu { width: 24%; gap: 0.25rem; }
.home-menu button:hover, .home-menu button:focus-visible { transform: translateX(0.5rem) scale(1.035); }
.home-menu button:active { transform: translateX(0.3125rem) scale(0.99); }
.health-bar { width: 34.375%; }
.health-label, .health-count, .health-hint { font-size: 1.3125rem; }
.rapid-copy strong { font-size: 3.375rem; }
.rapid-copy span { font-size: 1.375rem; }
.restraint-copy strong { font-size: 2rem; }
.restraint-copy span { font-size: 1rem; }
.gu-copy strong { font-size: 2.125rem; }
.gu-copy span { font-size: 1.125rem; }
.gu-count { font-size: 1.5rem; }
.gu-seal-layer:is(.is-failure, .is-success) .gu-copy strong { font-size: 3.125rem; }
.ending-copy h2 { font-size: 3.625rem; }
.ending-copy p { font-size: 1.1875rem; }
.ending #restart { font-size: 2.25rem; }
.pause-menu button, .exit-confirm button { min-height: 2.75rem; font-size: 2.625rem; }
.exit-confirm h2 { font-size: 2.875rem; }
.exit-confirm button { font-size: 2rem; }
.settings-heading h2 { font-size: 2.375rem; }
.settings-panel { width: 47.9167%; }
.settings-row { grid-template-columns: minmax(0, 1fr) minmax(0, 54%); gap: 1.375rem; }
.settings-row > span { min-width: 0; }
.settings-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; min-width: 0; }
.settings-subtitle, .settings-row small { font-size: 0.75rem; }
.settings-row strong { font-size: 1.3125rem; }
.settings-options button { overflow: hidden; width: 100%; min-width: 0; min-height: 2.5rem; padding: 0.5625rem 0.5rem; text-overflow: ellipsis; white-space: nowrap; }
.settings-speed .settings-options button { min-width: 0; font-size: 0.625rem; }
.settings-close { font-size: 1.25rem; }
.player-chapter { gap: 0.75rem; }
.player-chapter span { font-size: 1.1875rem; }
.player-chapter strong { font-size: 1.6875rem; }
.quick-tools { gap: 1.375rem; }
.quick-tools button { width: 4.875rem; min-width: 0; min-height: 0; }
.tool-count { top: -0.1875rem; right: -0.1875rem; min-width: 1.25rem; height: 1.25rem; padding-inline: 0.3125rem; border-radius: 0.625rem; font-size: 0.6875rem; }
.playback-controls { grid-template-columns: 4rem minmax(13.75rem, 1fr) auto auto 4rem; gap: 1.5rem; min-height: 6.125rem; padding: 0.9375rem 1.625rem; border-radius: 1.75rem; }
.progress-group { gap: 1.125rem; }
.progress-group output { min-width: 7rem; font-size: 0.9375rem; }
.control-pill { min-width: 5.75rem; min-height: 3rem; padding: 0.1875rem 0.5rem; font-size: 1rem; }
.volume-control { display: flex; width: 10rem; min-width: 0; }
.volume-control .control-icon { flex-basis: 4.375rem; min-width: 0; min-height: 0; }
.volume-slider { display: block; flex: 1 1 auto; width: 5.875rem; min-width: 0; }
.playback-controls > #control-settings { display: grid; min-width: 0; min-height: 0; }
.chapters-close { width: 3rem; height: 3rem; font-size: 1.875rem; }
.chapters-heading h2 { font-size: 2.625rem; }
.chapter-summary strong { font-size: 1rem; }
.chapter-summary span { font-size: 0.9375rem; }
.chapter-swipe-hint { gap: 0.75rem; font-size: 0.875rem; }
.chapter-swipe-hint i { width: 3.375rem; }
.chapter-progress { width: auto; }
.chapter-progress span { font-size: 0.9375rem; }
.chapter-progress strong { font-size: 1.25rem; }
.loading, .error, .touch-controls button, .test-panel { font-size: 1rem; }

@media (hover: none) and (max-height: 540px) {
  .settings-row { grid-template-columns: minmax(0, 1fr) minmax(0, 52%); gap: 0.5rem; padding-inline: 3%; }
  .settings-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 0.1875rem; padding: 0.1875rem; }
  .settings-options button,
  .settings-speed .settings-options button { width: 100%; min-width: 0; min-height: 2.25rem; padding: 0.25rem 0.375rem; font-size: 0.75rem; }
}