/* style.css */

:root {
  --vh: 1vh;
}
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fffffb;
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.leaflet-container,
.leaflet-popup,
.leaflet-popup-content {
  font-family: "IBM Plex Sans JP", sans-serif;
}
/* =========================
   map
========================= */

#map {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: calc(var(--vh) * 100);
    z-index: auto;
    background: #fffffb;
}

.leaflet-container {
  background: #fffffb;
}

.leaflet-image-layer {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* =========================
   zoom
========================= */

.leaflet-control-zoom {
  display: none;
}


/* =========================
   ui
========================= */

.archive-ui {
  position: absolute;
  left: 23px;
  top: 70%;
  transform: translateY(-50%);
  will-change: transform;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 17px;
}

/* =========================
   archive links
========================= */

.archive-link {

  cursor: pointer;

  font-size: 14px;

  letter-spacing: 0.5px;

  color: #000;

  width: fit-content;

  text-decoration: none;

}



/* =========================
   marker
========================= */

.garden-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #111;
    box-shadow: 0 0 2.5px rgba(0,0,0,0.25);
}

/* =========================
   record marker
========================= */

.record-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #111;
    box-shadow: 0 0 2.5px rgba(0,0,0,0.25);
}
/* =========================
   active marker
========================= */

.active-marker .garden-dot,
.active-marker .record-dot {
    position: relative;
}

    .active-marker .garden-dot::before,
    .active-marker .garden-dot::after,
    .active-marker .record-dot::before,
    .active-marker .record-dot::after {
        content: "";
        position: absolute;
        background: rgba(0,0,0,0.18);
    }

    .active-marker .garden-dot::before,
    .active-marker .record-dot::before {
        width: 32px;
        height: 1px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .active-marker .garden-dot::after,
    .active-marker .record-dot::after {
        width: 1px;
        height: 32px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
.active-marker .dot::after {
  width: 1px;
  height: 32px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* =========================
   popup reset
========================= */

.map-archive-popup .leaflet-popup-content-wrapper {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.map-archive-popup .leaflet-popup-content {
  margin: 0;
}

.map-archive-popup .leaflet-popup-tip {
  display: none;
}

/* =========================
   popup
========================= */

.archive-popup {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.archive-content {
  color: rgba(0,0,0,0.82);
  line-height: 1.5;
}

.archive-name {
  font-size: 14px;
  letter-spacing: 1.5px;
  margin-bottom: 4px;
}

.archive-coords {
  font-size: 10px;
  opacity: 0.5;
  margin-bottom: 4px;
}

.archive-date {
  font-size: 10px;
  opacity: 0.5;
  margin-bottom: 8px;
  letter-spacing: 2px;
}

.archive-drawer-link {
  margin-top: 8px;
  font-size: 14px;
  cursor: pointer;
  opacity: 1;
}
.drawer {


  position: fixed;

  width: 300px;
  min-height: 200px;


  z-index: 100;

  overflow: visible;

  font-size: 13px;

  backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);

  box-shadow:
    12px 0 50px rgba(0,0,0,0.08);

  /* =========================
     animation base
  ========================= */

  opacity: 0;

  transform:
    translateY(8px)
    scale(0.985);

  transition:
    opacity 0.22s ease,
    transform 0.22s ease;

  visibility: hidden;

  opacity: 0;

  pointer-events: none;
}

/* open state */

.drawer.open {

  visibility: visible;

  opacity: 1;

  transform:
    translateY(0)
    scale(1);

  pointer-events: auto;
}


.drawer-inner {

  padding:23px;
}


.drawer-header {

  height: 10px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 10px;

  font-size: 13px;

  letter-spacing: 1px;

}
/* =========================
   drawer close button
========================= */

.drawer-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0.45;
    cursor: pointer;
    z-index: 20;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

    .drawer-close:hover {
        opacity: 1;
        transform: rotate(90deg);
    }
.drawer-body {
    display: block;
}
  .drawer-site-title {
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 6px;  /* ⭐加 */
}

.drawer-desc {
  opacity: 1;
  margin-bottom: 0px; /* ⭐加 */
}

.drawer-section-title {
  font-size: 10px;
  letter-spacing: 2px;
  opacity: 1;
  margin-bottom:0px;
}
/* =========================
   drawer sections spacing
========================= */

.drawer-section {
  margin-bottom: 0px;
}

.drawer-section.title {
  margin-bottom: 30px;
}

.drawer-section.desc {
  margin-bottom: 12px;
}

.drawer-section.tree {
  margin-top: 10px;
}
/* =========================
   attachment list
========================= */

.attachment-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.attachment-item {
  cursor: pointer;
  font-size: 11px;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.attachment-item:hover {
  opacity: 1;
}



/* =========================
   attachment viewer
========================= */

.attachment-viewer {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9000001;
    /* 1. 初始背景设为完全透明 */
    background: rgba(0, 0, 0, 0);
    /* 2. 加上 1 秒的背景过渡效果 */
    transition: background 1s ease;
}

    /* 当加上 .open 类时，背景在 1 秒内渐变到目标暗色（例如半透明黑色 0.5） */
    .attachment-viewer.open {
        display: flex;
        background: rgba(0, 0, 0, 0.5);
    }

.attachment-viewer.open {
  display: flex;
}
    .attachment-viewer.open .attachment-viewer-inner {
        animation: archiveFold 0.42s cubic-bezier(.16,1,.3,1);
    }

.attachment-viewer.closing .attachment-viewer-inner {

  opacity: 0;

  transform:
    perspective(1400px)
    scale(0.96)
    translateY(10px);

  transition:
    opacity 0.22s ease,
    transform 0.22s ease;

}

.attachment-viewer.closing {

  background: rgba(0,0,0,0);

  transition:
    background 0.22s ease;

}

.attachment-close {
  position: absolute;
  top: 16px;
  right: 18px;
  cursor: pointer;
  font-size: 18px;
  opacity: 0.6;
}

.attachment-meta {
  margin-top: 23px;
  margin-bottom:40px;
    margin-left: 23px;
}

.attachment-fragment,
.attachment-type {
  font-size: 13px;
  letter-spacing: 2px;
  opacity: 0.55;
  margin-bottom: 6px;
}

.attachment-divider {
  width: 100%;
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin-bottom: 24px;
}

.attachment-stage {
  width: 100%;
  margin-bottom: 24px;
}

.attachment-image,
.attachment-video {
  width: 100%;
  display: block;
}

.attachment-desc {
  font-size: 12px;
  line-height: 1.8;
  opacity: 0.75;
  margin-bottom:40px;
  margin-left: 23px;
}


/* =========================
   archive folio viewer
========================= */

.attachment-viewer {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: flex-end;
    padding-right: 423px; /* drawer width */
    z-index: 100001;
    background: rgba(0,0,0,0.4);
    transform: translateZ(0);
    transform: translate3d(0, 0, 1000px);
}

.attachment-viewer.open {
  display: flex;
}

/* =========================
   folio sheet
========================= */

.attachment-viewer-inner {
    width: min(65vw, 1000px);
    position: relative;
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 26px;
    box-sizing: border-box;
    background: transparent;
    box-shadow: -40px 0 60px rgba(0,0,0,0.08), -10px 0 20px rgba(0,0,0,0.06);
}
    /* Safari-safe aspect ratio */

    .attachment-viewer-inner::after {
        content: "";
        display: block;
        padding-top: 67%; /* 2:1 */
    }
    .attachment-viewer-inner > * {
        position: absolute;
    }
.attachment-sheet {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 26px;
    box-sizing: border-box;
}
    /* =========================
   viewer glass layer
========================= */

    .attachment-viewer-inner::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: rgba(255,255,255,0.07);
        backdrop-filter: blur(2px) brightness(1.05);
        -webkit-backdrop-filter: blur(2px) brightness(1.05);
        border: 1px solid rgba(255,255,255,0.08);
        pointer-events: none;
    }



/* =========================
   fold animation
========================= */

@keyframes archiveFold {

  from {

    opacity: 0;

    transform:
      perspective(1400px)
      rotateY(-16deg)
      translateX(60px);

  }

  to {

    opacity: 1;

    transform:
      perspective(1400px)
      rotateY(0deg)
      translateX(0);

  }

}
@keyframes archiveFoldClose {

  from {

    opacity: 1;

    transform:
      perspective(1400px)
      rotateY(0deg)
      translateX(0);

  }

  to {

    opacity: 0;

    transform:
      perspective(1400px)
      rotateY(6deg)
      translateX(24px)
      scale(0.985);

  }

}
.attachment-viewer.closing .attachment-viewer-inner {

  animation:
    archiveFoldClose 0.26s ease forwards;
}
/* =========================
   close
========================= */

.attachment-close {

  position: absolute;

  top: 14px;
  right: 16px;

  font-size: 16px;

  cursor: pointer;

  opacity: 0.45;

  transition: opacity 0.2s ease;
}

.attachment-close:hover {
  opacity: 0.9;
}

/* =========================
   metadata
========================= */

.attachment-meta {

  margin-bottom: 18px;

  font-size: 13px;

  letter-spacing: 1px;

  opacity: 0.6;

  line-height: 1.7;
}

/* =========================
   stage
========================= */

.attachment-stage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#score-card-shadow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 420px;
    height: 260px;
    transform: translate(-50%, -50%) translate(24px, 30px);
    border-radius: 6px;
    pointer-events: none;
    z-index: 1;
    background: rgba(0,0,0,0.16);
    filter: blur(32px);
    opacity: 0.45;
}

.attachment-image,
.attachment-video {

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;

  display: block;
}

/* =========================
   desc
========================= */

.attachment-desc {

  margin-top: 18px;

  font-size: 13px;

  line-height: 1.8;

  opacity: 0.72;
}

/* =========================
   minimal attachment viewer
========================= */

.attachment-meta {
  margin-bottom: 16px;
}

.attachment-filename,
.attachment-fragment,
.attachment-type,
.attachment-desc {
    font-size: 14px;
    letter-spacing: 1px;
    opacity: 1;
    margin-bottom: 6px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9); /* ⭐ 新增：改为白色 */
}

.attachment-desc {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 14px;
}

/* ensure no divider exists */
.attachment-divider {
  display: none;
}
/* =========================
   media fit fix (核心)
========================= */

.attachment-image,
.attachment-video {

  object-fit: contain;

  display: block;

  width: auto;
  height: auto;

  max-width: 100%;
  max-height: 100%;
}
/* video special fix */
.attachment-video {
  max-height: 100%;
}
.archive-link {
  cursor: pointer;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: #000;
  width: fit-content;
  text-decoration: none;
  position: relative;
  padding-left: 10px; /* 给 > 留空间 */
}

.attachment-filename {
  font-size: 13px;
  letter-spacing: 1px;
  opacity: 1;
  margin-bottom: 4px;
}
.attachment-viewer {
  pointer-events: auto;
}

.attachment-viewer-inner {
  position: relative;
  z-index: 2;
}

.attachment-close {
  position: absolute;
  z-index: 9999;
  pointer-events: auto;
}
.attachment-stage {
  pointer-events: auto;
}

.attachment-close {
  cursor: pointer;
}
.attachment-close {
  position: absolute;
  top: 16px;
  right: 18px;
  cursor: pointer;

  z-index: 9999999;
  pointer-events: auto;

  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.attachment-viewer {
  pointer-events: auto;
}
.attachment-viewer-inner {
  pointer-events: auto;
}

/* =========================
   base node
========================= */

/* hover */

.fault-node:hover,
.tree-file:hover {

  opacity: 1;
  font-weight: 300;
}

/* =========================
   architectural fracture tree
========================= */

.archive-tree {

  display: flex;
  flex-direction: column;

  font-size: 13px;

  line-height: 1.5;   /* 更紧凑 */

  letter-spacing: 0.2px;

  padding-top: 4px;

  color: #000;      /* 100% 黑 */
}

/* =========================
   text nodes
========================= */

.fault-node,
.tree-file {

  width: fit-content;

  opacity: 1;

  transition: transform 0.15s ease;
}

.fault-node:hover,
.tree-file:hover {

  opacity: 1;
}


/* =========================
   hierarchy offsets
========================= */

.fault-root {
  margin-left: 0px;
}

.fault-branch-a {
  margin-left: 34px;
}

.crack-a {
  margin-left: 78px;
}

.crack-b {
  margin-left: 114px;
}

.crack-c {
  margin-left: 62px;
}

/* =========================
   fracture lines
========================= */

.fault-line-a,
.fault-line-b,
.fault-line-c,
.fault-line-d,

.line-1,
.line-2,
.line-3,
.line-4,
.line-5 {

  height: 10px;       /* 行距减少 */

  line-height: 10px;

  opacity: 1;         /* 不透明 */

  color: #000;

  user-select: none;
}
.fault-line-c {
  margin-left: 96px;
}

.fault-line-d {
  margin-left: 68px;
}

.line-4 {
  margin-left: 96px;
}

.line-5 {
  margin-left: 68px;
}
/* =========================
   plague drawer fracture offsets
========================= */

.line-1 {
  margin-left: 18px;
}

.line-2 {
  margin-left: 34px;
}

.line-3 {
  margin-left: 76px;
}

.line-4 {
  margin-left: 108px;
}

.line-5 {
  margin-left: 116px;
}

/* each fracture offset */

.fault-line-a {
  margin-left: 18px;
}

.fault-line-b {
  margin-left: 56px;
}

.fault-line-c {
  margin-left: 108px;
}

.fault-line-d {
  margin-left: 96px;
}

/* =========================
   interaction
========================= */

.tree-file {

  cursor: pointer;
}

.tree-file:hover {

  transform: translateX(2px);
  will-change: transform;
}
/* =========================
   collapsible archive tree
========================= */

.tree-folder {

  cursor: pointer;

  user-select: none;
}

.tree-toggle {

  display: inline-block;

  width: 22px;

  opacity: 1;
}

.tree-collapse {

  display: none;
}
.hud,
#coords,
.archive-coords,
.attachment-meta 
{
  font-size: 9px;
  letter-spacing: 1px;
}

.attachment-hud,
.attachment-hud * {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

 .attachment-hud {

  position: absolute;

  left: calc(100%); /* viewer右边 */

  top: 50%;
  transform: translateY(-50%);
  will-change: transform;

  font-size: 10px;

  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;

  padding: 3px 3px;

  border: 1px solid rgba(255,255,255,0.25);

  border-radius: 2px;

  background: rgba(0,0,0,0.55);

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* 整体 HUD */
.attachment-hud {
  position: absolute;

  left: calc(100% + 10px);
  top: 60%;
  transform: translateY(-50%);
  will-change: transform;

  display: flex;
  flex-direction: column;   /* ⭐ 整体改纵向 */

  gap: 10px;

  padding: 4px;

  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.55);

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* 移动控制 */
.hud-move {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 4px;
}

/* 中间 ← → */
.hud-middle {
  display: flex;
  flex-direction: row;

  gap: 4px;
}

/* 缩放 */
.hud-zoom {
  display: flex;
  flex-direction: column;

  gap: 4px;

  padding-top: 6px;

  border-top: 1px solid rgba(255,255,255,0.15);
}

/* 所有按钮 */
.hud-move div,
.hud-zoom div {

  min-width: 22px;
  height: 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,0.2);

  cursor: pointer;
}


/* 可选：加分隔感 */
.hud-zoom {
  padding-left: 1px;
  border-left: 1px solid rgba(0,0,0,0.15);
}
.hud-zoom div,
.hud-move div {
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
    /* 将现有的逗号分隔规则加上 pdf 的控制按键 */
    .hud-move div,
    .hud-zoom div,
    #pdf-prev,
    #pdf-next {
        min-width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255,255,255,0.2);
        cursor: pointer;
    }

        #pdf-prev:hover,
        #pdf-prev:hover *,
        #pdf-next:hover,
        #pdf-next:hover * {
            cursor: crosshair !important;
        }

.media-wrapper {

  position: relative;

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  transform-origin: center center;

  transform: translate3d(0,0,0) scale(1);

  will-change: transform;
}
/* =========================
   cursor system
========================= */

/* 默认全站 = 十字准星 */
html,
body,
#map,
* {
  cursor: crosshair !important;
}

/* 永远禁用 I-beam */
input,
textarea,
[contenteditable="true"],
.leaflet-popup-content,
.archive-popup,
.archive-content,
.drawer,
.drawer *,
.attachment-viewer,
.attachment-viewer * {
  cursor: crosshair !important;
}

/* =========================
   interactive objects
========================= */

.archive-link,
.archive-drawer-link,
.attachment-item,
.tree-file,
.tree-folder,
.drawer-close,
.attachment-close,
.hud-move div,
.hud-zoom div,
button {

  transition: font-weight 0.08s linear;
}

/* =========================
   hover lock
========================= */

    .archive-link:hover,
    .archive-link:hover *,
    .archive-drawer-link:hover,
    .archive-drawer-link:hover *,
    .attachment-item:hover,
    .hover *,
    .tree-file:hover,
    .tree-file:hover *,
    .tree-folder:hover,
    .tree-folder:hover *,
    .drawer-close:hover,
    .drawer-close:hover *,
    .attachment-close:hover,
    .attachment-close:hover *,
    .hud-move div:hover,
    .hud-move div:hover *,
    .hud-zoom div:hover,
    .hud-zoom div:hover *,
    .ruin-marker:hover,
    .ruin-marker:hover *,
    .leaflet-marker-icon:hover,
    .leaflet-marker-icon:hover *,
    button:hover,
    button:hover *,
    #record-link:hover,
    .record-arrow:hover {
        cursor: none !important;
        font-weight: 700;
    }
/* =========================
   viewer hud cursor fix
========================= */

.hud-move div:hover,
.hud-move div:hover *,

.hud-zoom div:hover,
.hud-zoom div:hover * {

  cursor: crosshair !important;
}


/* =========================
   GLOBAL BRACKET SYSTEM
   (only UI navigation, NOT drawer)
========================= */

/* ONLY FOR UI LINKS (NOT DRAWER) */
.archive-ui .archive-link,
.archive-popup .archive-drawer-link,
.attachment-item {
    position: relative;
    font-weight: 300;
}

    .archive-ui .archive-link .label::before,
    .archive-popup .archive-drawer-link .label::before,
    .attachment-item::before{
        content: "[";
    }

    .archive-ui .archive-link .label::after,
    .archive-popup .archive-drawer-link .label::after,
    .attachment-item::after {
        content: "]";
    }

.is-text {
  font-weight: 300;
  cursor: default !important;
}

.is-text::after,
.is-text::before {
  content: none !important;
}
/* attachment item 不受 is-text 锁定 */

.attachment-item.is-text {

  font-weight: 300 !important;

  cursor: pointer !important;
}

.attachment-item.is-text:hover,
.attachment-item.is-text:hover * {

  font-weight: 700 !important;
}

/* pointer "<" */
.archive-link::after,
.archive-drawer-link::after,
.attachment-item::after {
  content: "<";
  position: absolute;

  opacity: 0;

  margin-left: 4px;

  transition: opacity 0.1s linear;

  font-weight: 700; /* ⭐ 加这个 */
}
#record-link:hover::before {
    content: "➢";
    font-size: 23px;
    font-weight: 300;
}
/* hover state (UI only) */
.archive-link:hover,
.archive-drawer-link:hover,
.attachment-item:hover {
  font-weight: 700;
}

.archive-link:hover::after,
.archive-drawer-link:hover::after,
.attachment-item:hover::after {
  opacity: 1;
}


/* =========================
   DRAWER POINTER SYSTEM ONLY
   (NO BRACKETS)
========================= */

.tree-file,
.tree-folder,
.fault-node {
  position: relative;
  font-weight: 300;
}

/* pointer for drawer items */
.tree-file::after,
.tree-folder::after,
.fault-node::after {
  content: "<";
  position: absolute;
  opacity: 0;
  margin-left: 6px;
  transition: opacity 0.1s linear;

  font-weight: 700;  /* ⭐关键：永远粗 */
}

/* hover: only pointer */
.tree-file:hover,
.tree-folder:hover {
  font-weight: 700 !important;
}

.fault-node:hover {
  font-weight: 300; /* 保持不变 */
}

.tree-file:hover::after,
.tree-folder:hover::after,
.fault-node:hover::after {
  opacity: 1;
}

/* =========================
   HUD BUTTON BASE
========================= */

.hud-btn {
  font-size: 10px;
  letter-spacing: 1px;

  color: rgba(255,255,255,0.85);

  padding: 4px 8px;

  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 2px;

  cursor: pointer;
  user-select: none;

  background: rgba(0,0,0,0.35);

  display: flex;
  align-items: center;
  justify-content: center;

  transition: all 0.15s ease;
}

.hud-btn:hover {
  background: rgba(0,0,0,0.55);
  transform: translateY(-1px);
  will-change: transform;
  font-weight: 700;
}
.hud-reset {
    min-width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    color: rgba(255, 255, 255, 0.85); /* ⭐ 改为白色 */
    font-size: 12px;
    user-select: none;
}


/* hover 统一风格 */
.hud-reset:hover {
  font-weight: 700;
}
#reset {
    min-width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85); /* ⭐ 新增白色 */
}
.video-ui {

  position: absolute;

  left: calc(100% + 6px);
  top: 55%;

  transform: translateY(-50%);
  will-change: transform;

  font-size: 11px;

  display: flex;

  flex-direction: row;   /* ⭐ 横向 */

  align-items: flex-start;

  gap: 8px;

  padding: 4px;

  background: rgba(0,0,0,0.35);

  border: 1px solid rgba(255,255,255,0.2);

  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(4px);
}
/* =========================
   chapter drawer
========================= */

.video-chapters {

  position: absolute;

  right: calc(100% + 8px);
  top: 0;

  display: flex;
  flex-direction: column;

  gap: 6px;

  min-width: 190px;

  padding: 10px;


  border: 1px solid rgba(255,255,255,0.18);

  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);

  opacity: 0;
  pointer-events: none;

  transform: translateX(-4px);
  will-change: transform;

  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

/* 打开状态 */

.video-chapters.open {

  opacity: 1;

  pointer-events: auto;

  transform: translateX(0);
  will-change: transform;
}/* 控制按钮 */
.video-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

    .video-controls div {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255,255,255,0.25);
        background: rgba(0,0,0,0.35);
        cursor: pointer;
        color: rgba(255, 255, 255, 0.85); /* ⭐ 新增白色 */
    }

/* 进度条 */
.video-progress {

  width: 2px;

  height: 96px;

  background: rgba(255,255,255,0.18);

  position: relative;

  overflow: hidden;

  margin-top: 2px;
}

#video-progress-bar {

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;

  height: 0%;

  background: rgba(255,255,255,0.9);

  transition: height 0.05s linear;
}

/* chapter buttons */
.video-chapters {
  display: flex;

}

    .video-chapters div {
        position: relative;
        cursor: pointer;
        padding: 6px 10px;
        font-size: 12px;
        letter-spacing: .08em;
        white-space: nowrap;
        background: rgba(0, 0, 0, 0.35); /* ⭐ 深色底 */
        border: 1px solid rgba(255, 255, 255, 0.25); /* ⭐ 边框 */
        color: rgba(255, 255, 255, 0.85); /* ⭐ 白色文字 */
        box-shadow: none; /* ⭐ 去掉原本高光阴影 */
        transform: translateY(0);
        transition: transform .08s ease, box-shadow .08s ease, font-weight .08s ease, background .08s ease;
    }

        .video-chapters div:hover {
            font-weight: 700;
            background: rgba(0, 0, 0, 0.55);
            color: #fff;
        }

        .video-chapters div:active {
            transform: translateY(2px);
        }

        .video-chapters div.active {
            font-weight: 700;
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.5);
            color: #fff;
        }
.chapter-button.active {
    font-weight: 700;
    background: rgba(0,0,0,.08);
    border-color: rgba(0,0,0,.25);
    transform: translateY(1px);
}
.chapter-button {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
}
.mode-image .attachment-hud {
  display: flex;
}

.mode-image .video-ui {
  display: none;
}
.mode-video .attachment-hud {
  display: none;
}

.mode-video .video-ui {
  display: flex;
}
.video-chapters {
    top: 100%;
    left: calc(100% + 15px);
    margin-top: 90px;
    right: auto;
    display: none;
    flex-direction: row;
    gap: 5px;
    min-width: 120px;
    padding: 4px; /* ⭐ 微调 */
    border: 1px solid rgba(255,255,255,0.2); /* ⭐ 统一边框风格 */
    background: rgba(0, 0, 0, 0.55); /* ⭐ 改为深色半透明面板 */
    backdrop-filter: blur(4px); /* ⭐ 统一毛玻璃力度 */
    -webkit-backdrop-filter: blur(4px);
}
.video-has-chapters .video-chapters {
  display: flex;
}

.score-hud {
    position: absolute;
    right: -390px;
    top: 15%;
    width: 300px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* =========================
     tracing paper effect
  ========================= */
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 4px 4px 7px rgba(0,0,0,.1), 0 0 30px rgba(255,255,255,.04), 0 0 80px rgba(0,0,0,.08);
    transition: box-shadow .35s ease, backdrop-filter .35s ease;
}

.score-header {
    padding: 4px;
    cursor: pointer;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: rgba(255, 255, 255, 0.9); /* ⭐ 新增：改为白色 */
}

.score-body {
  position: relative;
}

  .score-body img {

    width: 100%;

    display: block;

    opacity: 0.65;

    filter: contrast(1.05);

    backface-visibility: hidden;
}

/* 🎯 动态 playhead */
/* =========================
   SCORE PLAYHEAD BASE
========================= */

#score-playhead {
  position: absolute;
  pointer-events: none;
}

/* ========================================
   SCORE-1
   横向扫描（底部 1/5）
======================================== */
.score-linear #score-playhead {
    left: 15%;
    bottom: 2%;
    width: 2px;
    height: 18%;
    background: rgba(45, 10, 0, 0.9);
    /* 【新增】：为扫描条加上阴影效果 */
    box-shadow: 0 0 8px rgba(45, 10, 0, 0.8), 0 0 3px rgba(45, 10, 0, 0.5);
    transform: translateX(0px);
    will-change: transform;
    transition: transform 0.05s linear;
}

/* ========================================
   SCORE-2
   仪表盘旋转指针 (主指针)
======================================== */
.score-radial #score-playhead {
    left: 7.5%;
    top: 66.5%;
    width: 73%;
    height: 2px;
    /* 【修改】：微调基础色，高亮处偏白黄，暗部光晕偏灰暗的铁锈红 */
    background: #ffb870;
    box-shadow: 0 0 5px #ffdaaa, /* 白黄高光心 */
    0 0 12px #c45733, /* 饱和度较低、带微灰的橙红过渡 */
    0 0 22px #7a4336; /* 偏灰暗的鏽紅色外暈 */
    transform-origin: left center;
    transform: rotate(-60deg);
    transition: transform 0.2s linear;
}

/* ========================================
   SECOND RADIAL NEEDLE (独立系统副指针)
======================================== */
.score-radial #score-playhead-2 {
    position: absolute;
    left: 26%;
    top: 30%;
    width: 48%;
    height: 2px;
    /* 【修改】：同上，应用白黄心与灰暗外晕 */
    background: #ffb870;
    box-shadow: 0 0 5px #ffdaaa, 0 0 12px #c45733, 0 0 22px #7a4336;
    transform-origin: left center;
    transform: rotate(-70deg);
    transition: transform 0.03s linear;
    pointer-events: none;
}

/* 【附加修复】：Drop Shadow 统一调整为带点灰的橘黄色以匹配新主题 */
.score-radial #score-playhead,
.score-radial #score-playhead-2 {
    filter: drop-shadow(0 0 4px rgba(200, 90, 50, 0.85)) !important;
}
.score-hud.magnetic-lock
#score-playhead {
    filter: none;
}
.score-hud.magnetic-lock
#score-playhead-2 {
    filter: none;
}
#score-pulse {

  position: absolute;

  width:8px;
  height: 8px;

  border-radius: 70%;

  background: rgba(133, 47, 2, 0.95);
  box-shadow:
    0 0 8px rgba(133, 47, 2, 0.95);

  pointer-events: none;

  left: 15%;
  top: 0;

  z-index: 40;

  will-change:
    transform,
    opacity;
}
#score-pulse {
    filter: drop-shadow( 4px 4px 2.6px rgba(0,0,0,.7) );
    transition: filter .25s ease;
}
.score-hud.magnetic-lock
#score-pulse {
    filter: none;
}
.attachment-meta {
  margin-bottom: 16px;
}
.attachment-title {
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 1.4;
    margin-bottom: 6px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95); /* ⭐ 改为纯白色 */
}
.chapter-toggle {
  display: none;
}

/* =========================
   INTRO DRAWER
========================= */

.intro-drawer {

  position: fixed;

  top: 0;
  left: 0;

  width: 500px;
  height: calc(var(--vh) * 100);

  

  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  z-index: 850;

  overflow-y: auto;

  transform: translateX(-105%);
  will-change: transform;

  transition:
    transform 0.9s cubic-bezier(.16,1,.3,1);

  box-shadow:
    12px 0 50px rgba(0,0,0,0.08);
}

/* =========================
   OPEN
========================= */

.intro-drawer.open {

  transform: translateX(0);
  will-change: transform;
}

.intro-inner {

  padding:
46px
    42px
    140px;
}

.intro-text {
 position: relative;

  line-height: 2.5;

  font-size: 14.5px;

  opacity: 1;
}
.intro-title {
    position: relative;
    line-height: 2.5;
    font-size: 17px;
    font-weight:500;
    opacity: 1;
}

/* ========================================
   TABLET / MOBILE
======================================== */

@media (max-width: 1100px) {

  .attachment-viewer {

    justify-content: center;

    padding-right: 0;

    padding:
      20px;

  }

  .attachment-viewer-inner {

    width: 100%;

    max-width: 100%;

    aspect-ratio: auto;

    height: auto;

    min-height: 70vh;

  }

  .score-hud {

    right: auto;

    left: 20px;

    top: auto;

    bottom: 20px;

    width: 180px;

  }

  .attachment-hud {

    left: auto;

    right: 14px;

    top: auto;

    bottom: 14px;

    transform: none;

  }

}
/* ========================================
   MOBILE  WER SYSTEM
======================================== */

@media (max-width: 768px) {

  /* =========================
     popup drawer
  ========================= */

  .drawer {

    width: calc(100vw - 24px);

    max-width: none;

    height: auto;

    max-height: calc(var(--vh) * 100 - 24px);

    left: 12px !important;
    top: 12px !important;

    overflow-y: auto;

    border: none;

    box-shadow:
      0 10px 40px rgba(0,0,0,0.12);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

  }

  @media (max-width: 768px) {

  .drawer {

    transform:
      translateY(20px)
      scale(0.98);

  }

  .drawer.open {

    transform:
      translateY(0)
      scale(1);

  }

}
  .drawer-inner {

    padding: 18px;

  }
   
  /* =========================
     attachment viewer
  ========================= */

  .attachment-viewer {

    padding: 12px;

    justify-content: center;

  }

  .attachment-viewer-inner {

    width: 100%;

    max-width: 100%;

    height: auto;

    min-height: 60vh;

    aspect-ratio: auto;

    padding: 14px;

  }

  /* =========================
     media
  ========================= */

  .attachment-image,
  .attachment-video {

    width: 100%;

    height: auto;

    max-height: 70vh;

  }

  /* =========================
     floating HUD
  ========================= */

  .attachment-hud,
  .video-ui {

    position: fixed;

    left: 12px;
    bottom: 12px;

    top: auto;
    right: auto;

    transform: none;

    z-index: 1000000;

  }

  /* =========================
     score HUD
  ========================= */

  .score-hud {

    width: 160px;

    right: 12px;

    left: auto;

    top: auto;

    bottom: 12px;

  }

  /* =========================
     typography
  ========================= */

  .drawer-body,
  .intro-text,
  .attachment-desc {

    font-size: 13px;

    line-height: 1.9;

  }

}
@media (max-width: 768px) {

  .archive-ui {

    top: auto;

    bottom: 28px;

    left: 20px;

    transform: none;

    gap: 10px;

  }

  .hud {

    left: 16px;

    bottom: 16px;

  }

}
@media (hover: none) {

  .archive-link:hover,
  .archive-drawer-link:hover,
  .tree-file:hover,
  .tree-folder:hover {

    transform: none;

    font-weight: 300;

  }

}
/* =========================
   drawer attachment hover fix
========================= */

.attachment-item:hover {
  font-weight: 700 !important;
}
/* FINAL FORCE */

.tree-file:hover,
.tree-file:hover * {

  font-weight: 700 !important;
}

/* ========================================
   SCORE-ARC CONDITIONAL DISPLAY
======================================== */

/* 让 SVG 容器完全覆盖它的父元素 (score-hud) */
.arc-overlay {
  display: none; /* 🔴 核心修改：默认处于隐藏状态，防止在 score-2 等其他面板中漏出 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 使其完全居中 */
  width: 100%;
  height: 100%;
  pointer-events: none; /* 确保它不会阻挡用户的鼠标点击事件 */
  z-index: 20; /* 确保它在乐谱图片的上一层 */
}

/* ⭐ 核心新增：只有当父级面板激活了 score-1 (.score-linear) 状态时，圆弧才会被显示 */
.score-linear .arc-overlay {
  display: block;
}

/* 定义弧形的颜色和基础粗细 */
.score-arc {
  fill: none;
  stroke: #65331da7;
  stroke-width: 1.5px;
  stroke-linecap: round;
  opacity: 0.8;

  /* 绑定你之前调慢后的扩散动画 */
  animation: arcSpreadAnimation 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.score-arc {
    filter: drop-shadow( 4px 4px 1px rgba(0,0,0,.7) );
    transition: filter .25s ease;
}
.score-hud.magnetic-lock
.score-arc {
    filter: none;
}
/* 扩散动画 */
@keyframes arcSpreadAnimation {
  from {
    stroke-dashoffset: 300; /* 起始状态 */
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;   /* 展开完成（可根据前一步需要改成 150 限制扩散行程） */
    opacity: 0.8;
  }
}
.score-card-space {

  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  perspective: 1400px;
  perspective-origin: center;

  transform: scale(0.4);

  transform-origin: center center;

}
.score-card {

  position: relative;

  width: min(90vw, 3000px);

  aspect-ratio: 1 / 1.1;

  transform-style: preserve-3d;

  cursor: grab;

  transition:
    transform 0.12s linear;

  will-change: transform;
  
}
.score-face {

  position: absolute;

  inset: 0;

  backface-visibility: hidden;

  border-radius: 2px;

  overflow: hidden;

  background: transparent;

  box-shadow: none;

}
.score-back {

  transform: rotateY(180deg);

}
.score-face img {

  width: 100%;
  height: 100%;

  object-fit: contain;

  display: block;

  image-rendering: high-quality;
  image-rendering: -webkit-optimize-contrast;


}

/* ========================================
   SCORE ROTATE HUD
======================================== */

.score-rotate-hud {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 8px;

  width: 100%;

  position: relative;

  z-index: 40;
}

/* ========================================
   ROTATE BLOCK
======================================== */

.hud-rotate {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 5px;

  position: relative;
}

/* ========================================
   ROTATE MIDDLE ROW
======================================== */

.hud-rotate-middle {

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: center;

  gap: 5px;
}

/* ========================================
   ROTATE BUTTONS
======================================== */

#rot-up,
#rot-left,
#rot-right,
#rot-down,
#score-flip {

  width: 24px;
  height: 24px;

  display: flex;

  align-items: center;
  justify-content: center;

  font-size: 10px;

  color: rgba(255,255,255,0.88);

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0.02)
    );

  border:
    1px solid rgba(255,255,255,0.16);

  box-shadow:
    inset 0 0 12px rgba(255,255,255,0.03),
    0 0 10px rgba(0,0,0,0.18);

  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);

  user-select: none;

  cursor: crosshair !important;

  transition:
    transform 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;

  position: relative;

  z-index: 60;

  pointer-events: auto;
}

/* ========================================
   HOVER
======================================== */

#rot-up:hover,
#rot-left:hover,
#rot-right:hover,
#rot-down:hover,
#score-flip:hover {

  transform: scale(1.08);

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.16),
      rgba(255,255,255,0.04)
    );

  border-color:
    rgba(255,255,255,0.32);

  box-shadow:
    0 0 18px rgba(255,255,255,0.08),
    0 0 32px rgba(255,255,255,0.06);

  font-weight: 700;
}

/* ========================================
   ACTIVE
======================================== */

#rot-up:active,
#rot-left:active,
#rot-right:active,
#rot-down:active,
#score-flip:active {

  transform: scale(0.94);

  opacity: 0.72;
}

/* ========================================
   DIVIDER
======================================== */

.score-rotate-hud .hud-divider {

  width: 100%;

  height: 1px;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(255,255,255,0.16),
      transparent
    );

  margin-bottom: 2px;
}

/* ========================================
   JOYSTICK
======================================== */

.joystick-wrap {

  width: 120px;
  height: 120px;

  display: flex;
  align-items: center;
  justify-content: center;

}

/* 底座 */

.joystick-base {

  position: relative;

  width: 90px;
  height: 90px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(255,255,255,0.08),
      rgba(0,0,0,0.45)
    );

  border:
    1px solid rgba(255,255,255,0.12);

  box-shadow:
    inset 0 0 20px rgba(0,0,0,0.45);

}

/* 摇杆 */

#joystick-knob {

  position: absolute;

  left: 50%;
  top: 50%;

  width: 26px;
  height: 26px;

  border-radius: 50%;

  transform:
    translate(-50%, -50%);

  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(255,255,255,0.16),
      rgba(0,0,0,0.82)
    );

  border:
    1px solid rgba(255,255,255,0.18);

  box-shadow:
    0 0 14px rgba(0,0,0,0.45);

  cursor: grab;

  transition:
    transform 0.04s linear;

}
/* ========================================
   JOYSTICK PANEL & LIGHT EFFECT (新增光影系统)
======================================== */

/* 承载刻度和光源的底层面板 */
.joystick-panel {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    overflow: hidden; /* 核心：让跑出去的光源被圆形边缘裁剪 */
    z-index: 1; /* 保持在摇杆下方 */
}

/* 动态光斑核心样式 */
.joystick-light {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70px;
    height: 70px;
    margin-left: -35px; /* 使其中心对齐 */
    margin-top: -35px;
    border-radius: 50%;
    /* 绘制一个中心高亮、边缘消散的聚光灯效果 */
    background: radial-gradient(circle, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.15) 40%, transparent 70%);
    /* 初始状态：居中且完全透明（无光） */
    transform: translate(0px, 0px);
    opacity: 0;
    /* 松开摇杆时的呼吸回弹动画 */
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
}

/* 四个方向的刻度指针（工业风细线） */
.joystick-tick {
    position: absolute;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.15); /* 微微的自发光 */
}

.tick-top {
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 6px;
}

.tick-bottom {
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 6px;
}

.tick-left {
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 2px;
}

.tick-right {
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 2px;
}

/* 确保你原来的摇杆旋钮永远在光源和面板的最上层 */
#joystick-knob {
    z-index: 2;
}
.archive-note {
    width: 70%;
    max-width: 700px;
    color: #ddd;
    font-size: 14px;
    line-height: 2;
    letter-spacing: 0.08em;
    white-space: pre-wrap;
}

.attachment-audio {
    width: 500px;
    max-width: 90%;
}

.wander-item.tree-folder {
    cursor: pointer;
    margin-left: 18px;
}

.tree-file {
    opacity: 0.85;
    cursor: pointer;
}

    .tree-file:hover {
        opacity: 1;
    }
/* =========================
   遺構錄子目錄
========================= */

.archive-record-folder {
    margin-left: 18px;
}

.archive-record-collapse {
    margin-left: 36px;
}

.archive-record-file {
    margin-left: 0 !important;
    letter-spacing: 0.02em;
}
.archive-record-subfolder {
    margin-left: 0;
    opacity: .9;
}

.archive-record-subcollapse {
    margin-left: 46px;
}

.archive-record-subfolder .tree-toggle {
    opacity: .8;
}
/* =========================
   遺構錄子目錄
========================= */

.archive-record-folder {
    margin-left: 18px;
}

.archive-record-collapse {
    margin-left: 50px;
}

.archive-record-file {
    margin-left: 0 !important;
    letter-spacing: 0.02em;
}
/* =========================
   signal archive tree
========================= */
.wander-tree .tree-file {
    margin-left: 42px;
    opacity: .85;
    cursor: pointer;
}

.wander-tree .tree-collapse {
    margin-left: 1px;
    padding-left: 1px;
}

.wander-tree .tree-children {
    display: none;
    margin-left: 0px;
    margin-bottom: 10px;
}
.sub-folder {
    padding-left: 24px;
    padding-top: 8px;
    padding-bottom: 4px;
    font-size: 13px;
    opacity: 0.85;
}

.tree-collapse .tree-file {
  padding-left: 0px;
}

/* ========================================================
   1. 初始与基础状态：找到控制 #score-hud 和 #score-hud-shadow 的地方
   ======================================================== */
#score-hud {
    opacity: 0.3 !important;
    pointer-events: none;
    
    /* 关键：给 transform 加上 cubic-bezier 缓动回弹曲线，让鼠标移开时的回弹像果冻一样优雅 */
    transition: opacity 1.2s ease-out, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

#score-hud-shadow {
    opacity: 0.7 !important;
    z-index: 0;
    pointer-events: none;
    
    /* 保持你原本要求的右下角错位固定不动，不要加 transform 的 transition 动画 */
    transform: translate(-13px, 18px) !important; 
    transition: opacity 0.8s ease-out !important;
}

/* ========================================================
   2. 激活显现状态：当 JS 触发 open 时的状态
   ======================================================== */
#score-hud.open {
    opacity: 1 !important;
    pointer-events: auto;
}

/* 联动激活底层阴影 */
#score-hud.open ~ #score-hud-shadow,
#score-hud.open + #score-hud-shadow,
#score-hud-shadow.open { 
    opacity: 1 !important; 
}

/* ========================================================
   3. 内部元素细节（保持你原有的设定）
   ======================================================== */
/* ========================================================
   绝对保守的安全补充：修复 shadow 显形与 hover 联动
   ======================================================== */

/* 1. 基础控制层（顺滑过渡） */
#score-hud {
    /* 移除 visibility 干扰，保留原有的定位，只为 transform 加缓动回弹 */
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 2. 阴影层（修复消失问题） */
#score-hud-shadow {
    /* 100% 保护：移除先前导致隐形的 opacity: 0 和 visibility: hidden */
    z-index: 0 !important;
    /* 保持你要求的精准错位 */
    transform: translate(-13px, 18px) !important;
    /* 当主层显示或隐藏时（display: block / none），让底层 shadow 瞬间跟随 */
    display: inherit;
}

/* 3. 联动控制：如果主层被 JS 隐藏（display: none），让底层阴影也自动隐藏 */
#score-hud[style*="display: none"] ~ #score-hud-shadow,
#score-hud[style*="display: none"] + #score-hud-shadow {
    display: none !important;
}

/* --- 4. 内部元素细节与透明度控制（完全遵照你的要求） --- */

/* 顶层主控制层图片：5% 透明度硫酸纸效果 */
#score-hud .score-body img {
    opacity: 0.05 !important;
    filter: contrast(1.05) !important;
}

/* 顶层 Header：文字靠右 */
#score-hud .score-header {
    text-align: right !important;
}

/* 底层阴影层图片：80% 透明度 */
#score-hud-shadow .score-body img {
    opacity: 0.8 !important;
    filter: contrast(1.05) !important;
}

/* 底层阴影层 Header：90% 透明度 */
#score-hud-shadow .score-header {
    opacity: 0.9 !important;
}

/* ========================================================
   终极解耦补丁：外壳互动空间、测绘风“四角十字”对焦框
   ======================================================== */

/* 🚀 核心解耦：让外壳承载 3D 视角与鼠标微动，主 JS 高频刷新内部时绝对不会冲刷到位移 */
.hud-interaction-wrapper {
    position: fixed;
    left: 24px;
    bottom: 240px; /* 保持与你原有定位一致 */
    z-index: 99999 !important;
    perspective: 1000px;
    pointer-events: none; /* 穿透不影响地图 */
}

/* 强行允许内部容器溢出显示，防止对焦框在位移时被斩首裁剪 */
.hud-interaction-wrapper,
#score-hud,
#score-hud-shadow,
.score-body {
    overflow: visible !important;
}

/* 响应鼠标事件的实际控制层 */
#score-hud {
    pointer-events: auto !important;
}

.score-hud-shadow.focus-confirm{

animation:
focusConfirm
300ms
cubic-bezier(.2,.8,.2,1);

}
.focus-corners {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.corner {
    position: absolute;
    width: 18px;
    height: 18px;
    opacity: 0.95; /* 將透明度改為 0.95 */
    transition: all .35s cubic-bezier(.2,.8,.2,1);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); /* 加入白色的 Glow 發光效果 */
}

/* 將四個角的邊框顏色從黑色 (#111) 改為純白 (#fff) */
.tl {
    left: 10px;
    top: 10px;
    border-left: 1px solid #fff;
    border-top: 1px solid #fff;
}

.tr {
    right: 10px;
    top: 10px;
    border-right: 1px solid #fff;
    border-top: 1px solid #fff;
}

.bl {
    left: 10px;
    bottom: 10px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.br {
    right: 10px;
    bottom: 10px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

/* 鎖定狀態下的對準框，同步調整透明度並增強發光效果 */
#score-hud.magnetic-lock .corner {
    opacity: 0.95;
    width: 46px;
    height: 46px;
    border-width: 2px;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1)); /* 鎖定時的光暈更亮 */
}

@keyframes snapLock {

    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.03);
    }

    100% {
        transform: scale(1);
    }
}
.score-hud-shadow.locked {
    animation: snapLock 180ms cubic-bezier(.17,.84,.44,1);
}
.score-hud.magnetic-lock {
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
    transform: translate(0px,0px) !important;
    backdrop-filter: blur(0px) !important;
    -webkit-backdrop-filter: blur(0px) !important;
}
#score-hud-shadow {
    box-shadow: 0 0 20px rgba(0,0,0,.08), 0 0 28px rgba(0,0,0,.05);
}
/* ========================================================
   🎯 【新需求修改】将 HUD 面板的 header 移到右侧并保持上下居中
   ======================================================== */

/* 1. 重置之前 column-reverse 的逻辑，改为横向弹性布局 */
#score-hud, 
#score-hud-shadow {

    flex-direction: row !important;       /* 主体与 header 左右横向排列 */
    align-items: stretch !important;      /* 让 header 的高度自然撑满侧边 */
}

/* 2. 强行将 score-body 放在左侧，header 挤到右侧 */
.score-body {
    order: 1 !important;
}

#score-hud .score-header,
#score-hud-shadow .score-header {
    order: 2 !important;                  /* 确保 header 在物理顺序的右侧 */
    
    /* 3. 开启竖排文字核心 */
    writing-mode: vertical-rl !important; /* 文字从上往下、从右往左竖排 */
    
    /* 4. 🚀 关键修改：让竖排文字在侧边栏中绝对上下居中 */
    display: flex !important;
    justify-content: center !important;   /* 在竖排模式下，这对应了物理上的“上下居中” */
    align-items: center !important;       /* 在竖排模式下，这对应了物理上的“左右居中” */
    
    /* 5. 间距与宽度修正 */
    margin: 0 !important;                 /* 清除原有的上下 margin */
    padding: 0 6px !important;            /* 左右留出 6px 的舒适呼吸感，上下靠 flex 自动居中 */
    width: auto !important;               /* 让宽度由竖排文字自动撑开 */
    
    /* 6. 侧边辅助线修正 */
    border-bottom: none !important;        /* 移除原本下方的分割线 */
    border-left: 1px solid rgba(255,255,255,0.1) !important; /* 在与主体图片交界处加一条竖向分割线 */
}

/* 7. 额外修正：如果有绝对定位的伪元素细线，也一并重置 */
#score-hud .score-header::after,
#score-hud-shadow .score-header::after {
    display: none !important;             /* 隐藏原有的横向细线，避免视觉冲突 */
}
#score-hud-shadow .score-header {
    justify-content: flex-start !important;
    padding-top: 12px !important;
}
#score-hud .score-header {
    justify-content: flex-end !important;
    padding-bottom: 12px !important;
}

.score-hud.magnetic-lock {
    box-shadow: 0 0 30px rgba(255,255,255,.04), 0 0 80px rgba(0,0,0,.08);
}

    #score-hud::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.07);
        pointer-events: none;
        z-index: 20;
        transition: opacity .35s ease;
    }

    #score-hud.magnetic-lock::before {
        opacity: 0;
    }

/* =========================
   Compass Overlay (穿透与透明化修改版)
========================= */
.compass-overlay {
    position: fixed;
    inset: 0;
    /* 👇 将原本的 z-index: 20; 改为 550 */
    /* 这样它会处于地图底层之上，但在 Marker 和 Popup 之下 */
    z-index: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

    /* 必须配合 hidden 类来控制真实的隐藏 */
    .compass-overlay.hidden {
        display: none !important;
    }

    .compass-overlay.show {
        display: flex !important;
        opacity: 1;
        /* 4. 显示时依然保持 pointer-events: none，确保可以随时透过罗盘和地图互动 */
        pointer-events: none !important;
    }

/* ===================================================
   1. 罗盘定位：彻底鼠标透明
   =================================================== */
.compass-container {
    position: fixed !important;
    transform: translate(-50%, -50%); /* 保持居中锚点 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    z-index: 0;
    pointer-events: none !important;
}
/* ========================================================
   羅盤把手 (Compass Handle) 樣式修改
   ======================================================== */
.compass-handle {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    width: 53px;
    height: 57px;
    border-radius: 50%;
    border: 1px dashed rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px); /* 兼容 Safari */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    /* 增加對 backdrop-filter 與 background 的平滑過渡設定 */
    transition: all 0.3s ease, backdrop-filter 0.3s ease, background 0.3s ease;
    pointer-events: auto !important;
    cursor: grab;
}

    /* 當使用者按住 (Hold) 時的狀態 */
    .compass-handle:active {
        cursor: grabbing;
        transform: translate(-50%, -50%) scale(0.95);
        /* 毛玻璃效果與背景白色半透明層完全淡出 */
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
        background: rgba(255, 255, 255, 0);
    }

/* ========================================================
   🌟 優化需求：羅盤側邊操作手冊 (首次3秒淡出 + 完美純淨Hover)
   ======================================================= */
.compass-manual {
    position: absolute;
    /* 基於羅盤容器中心點，向左偏移（半徑約 38.5vmin + 4vmin 間距） */
    left: 75%;
    top: 80%;
    transform: translateY(-50%);
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    text-align: left;
    /* 允許滑鼠交互以觸發 hover */
    pointer-events: auto;
    /* 🟢 核心修改 1：基底狀態設為完全透明 */
    opacity: 0;
    /* 🟢 核心修改 2：專門控管「之後」滑鼠移入/移出時的 0.3 秒絲滑淡入淡出 */
    transition: opacity 0.3s ease;
}

/* 🟢 核心修改 3：只有當羅盤被開啟（父級移除 .hidden）時，才觸發一次性登場動畫 */
/* 注意：這裡刻意不加 forwards！動畫播完就消失，不留痕跡，把控制權完全還給 transition */
#compass-overlay:not(.hidden) .compass-manual {
    animation: manualIntroTimeline 4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 🟢 核心修改 4：利用 !important 確保不論是在自動動畫期間、還是結束後，Hover 都能絕對強制顯現 */
.compass-manual:hover {
    opacity: 1 !important;
}

.compass-manual .manual-title {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    color: rgba(0, 0, 0, 0.7);
    padding-bottom: 6px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
    margin-bottom: 2px;
    width: fit-content;
}

.compass-manual .manual-item {
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.5px;
    color: rgba(0, 0, 0, 0.45);
    font-weight: 300;
}


/* ===================================================
   2. 椭圆形环：倾斜 45 度 + 残缺裁剪
   =================================================== */
.compass-ring {
    position: relative;
    width: 77vmin;
    height: 36vmin;
    border: 1px dashed rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    opacity:0.9;
    /* 🚀 核心 1：直接让整个罗盘倾斜 45 度 */
    transform: rotate(45deg);
    /* 🎨 核心 2：在倾斜的坐标系内部进行裁剪。
       这个坐标切掉了一大块右下角的扇形，在外部看恰好保留了屏幕左上方的残缺弧线 */
    clip-path: polygon(-50% -50%, 150% -50%, 150% 30%, 50% 50%, 30% 150%, -50% 150%);
}

/* ===================================================
   3. 指针基座：完全归零为圆心
   =================================================== */
.compass-pointer {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 0;
    height: 0;
    /* 🚀 核心修复：让指针的内部坐标系也跟着圆环一起倾斜 45 度 */
    transform: rotate(45deg);
}

/* ===================================================
   4. 箭头自身：抵消宽高，实现完美滑行
   =================================================== */
.compass-arrow {
    position: absolute;
    margin-left: -7px;
    margin-top: -12px;
    font-size: 23px;
    color: #000;
    transition: transform 0.1s ease-out;
}
/* ===================================================
   当罗盘处于打开状态时 (.compass-active)，
   强行关闭 CSS 的 ::before 伪元素，防止与 JS 插入的箭头重叠
=================================================== */
#record-link.compass-active::before {
    content: none !important;
}
/* ===================================================
   当罗盘处于打开状态时 (.compass-active)，
   让 record-link 的文字保持加粗 (700) 状态
=================================================== */
#record-link.compass-active {
    font-weight: 700 !important;
}

/* ===================================================
   5. 精准米字刻度：8 轴线，从圆心向外发散
   =================================================== */
.compass-asterisk {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 0;
    height: 0;
    pointer-events: none;
}

    .compass-asterisk .line {
        position: absolute;
        height: 1px;
        border-top: 1px dashed rgba(0, 0, 0, 0.5);
        opacity:0.4;
        /* 使用变量动态控制每根线的角度和长度 */
        transform: rotate(var(--deg));
        width: var(--len);
        /* 关键：将线条起点固定在圆心 */
        transform-origin: left center;
    }
.archive-pdf-frame {
    width: 100%;
    height: 100%;
    border: none;
    background: white;
}
/* ⭐ 把 #image-page-num 也加进来，并统一下放白色字体 */
#pdf-prev, #pdf-next, #pdf-page-num, #image-page-num {
    z-index: 10000 !important;
    position: relative;
    pointer-events: auto !important;
    color: rgba(255, 255, 255, 0.85); /* ⭐ 新增：改为白色文字 */
}
/* 假设您找到的类名是 .your-class-name */
.archive-text-frame {
    width: 530px; /* 设置宽度 */
    height: 450px; /* 高度自适应 */
    max-width: 90%; /* 响应式适配，防止在手机上溢出 */
}
/* =========================
   相框文字与坐标定位
========================= */
#top-title {
    position: fixed;
    top: 9px;
    left: 52%;
    /* 🌟 改用 3D 透视：让顶部往后倾斜，呈现上小下大 */
    transform: perspective(400px) rotateX(-23deg) translateX(-50%);
    font-size: 23px;
    font-weight: 400;
    color: rgba(0,0,0,0.67);
    letter-spacing: 12px;
    z-index: 1001;
    transform-origin: center bottom; /* 以底部为旋转基准点 */
}

/* =========================
   hud
========================= */
#coords {
    position: fixed;
    top: 48px;
    left: 52%;
    /* 🌟 稍微调整角度，形成微弱的层级错落 */
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 200 !important;
    color: rgba(0,0,0,0.34);
    z-index: 1001;
    transform-origin: center bottom;
}


/* =========================
   相框文字定位更新
========================= */
#bottom-labels {
    position: absolute;
    bottom: 17px;
    left: 210px;
    right: 148px; /* 同步边框宽度 */
    display: flex;
    justify-content: space-between; /* 保证两侧文字分别贴紧左右边缘 */
    transform: perspective(400px) rotateX(7deg);
    transform-origin: center top;
    font-weight: 400;
    font-size: 18px;
    color: rgba(0,0,0,0.67);
    pointer-events: auto;
    z-index: 1001;
}

/* 🌟 “遺構館”独立居中，同时同步父级的 3D 景深旋转 */
#bottom-center-label {
    letter-spacing: 17px;
    font-size: 21px;
    position: absolute;
    left: 50%;
    transform: perspective(400px) rotateX(23deg) translateX(-50%);
    transform-origin: center top;
}

/* 修改底部按钮的基础交互样式，应用到所有 trigger */
.bottom-trigger {
    transition: font-weight 0.2s ease, transform 0.1s ease;
    display: inline-block;
}

    .bottom-trigger:hover,
    .bottom-trigger.active-trigger {
        font-weight: 700;
    }

    .bottom-trigger:active {
        font-weight: 900;
        transform: scale(0.95);
    }

/* 确保中间的遗构馆在 active 缩放时不会丢失它的 3D 旋转属性 */
#bottom-center-label:active {
    transform: perspective(400px) rotateX(23deg) translateX(-50%) scale(0.95);
}
/* =========================
   档案堆栈与交互动画
========================= */

.file-stack {
    position: fixed;
    /* 🌟 修改 1：删掉这里的 bottom，把高度控制权交给下面的独立类 */
    z-index: 860;
}

/* 🌟 修改 2：在这里单独控制左侧文件堆的基准高度 */
.position-left {
    left: -38px;
    bottom: 425px; /* 这里控制左侧的高低，数值你可以随意调整 */
}

/* 🌟 修改 3：在这里单独控制右侧文件堆的基准高度 */
.position-right {
    right: -101px;
    bottom: 120px; /* 这里控制右侧的高低，数值你可以随意调整，比如这里我设为了250px，它就会比左边低 */
}

/* 档案实体基础设定 (后面的代码全部保持你原来的样子即可) */
/* =========================
   档案实体基础设定
========================= */
.archive-doc {
    position: absolute;
    width: 240px;
    height: 350px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.5);
    padding: 12px;
    cursor: pointer;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.05);
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), top 0.4s cubic-bezier(0.19, 1, 0.22, 1), bottom 0.4s cubic-bezier(0.19, 1, 0.22, 1), margin-top 0.4s cubic-bezier(0.19, 1, 0.22, 1), background 0.3s, color 0.3s;
    pointer-events: auto;
}
    /* ⭐️ 新增：只在抽出時添加毛玻璃與高級陰影 */
    .archive-doc.extracted {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        will-change: transform; /* 提示瀏覽器優化 */
    }
/* 字号与排版保持原样 */
.position-left .archive-doc {
    font-size: 13px;
    text-align: right;
}

.position-right .archive-doc {
    font-size: 13px;
    text-align: left;
}

.doc-title {
    font-weight: 400;
    font-size: 16px;
    margin-top: -3px;
    margin-bottom: 66px;
    letter-spacing: 1px;
}

.doc-meta {
    margin-top: -8px;
    color: #666;
    margin-bottom: 66px;
    font-size: 11px;
}

.archive-doc.extracted .doc-meta {
    color: #aaa;
}

.doc-coord-btn {
    display: inline-block;
    padding: 4px 8px;
    border: 1px solid #000;
    transition: all 0.2s;
}

    .doc-coord-btn:hover {
        background: #000;
        color: #fff;
    }
    .doc-coord-btn.active {
        background: #000;
        color: #fff;
    }

.archive-doc:hover {
    transform: translateY(-8px);
 
}
.archive-doc .doc-title {
    cursor: pointer;
    font-weight: 400;
    font-size: 16px;
    margin-top: -3px;
    margin-bottom: 46px;
    letter-spacing: 1px;
    transition: font-weight 0.2s;
}

    /* 🌟 核心：悬停 doc-title 时，自身加粗，同时让下方的按钮呈现悬停样式 */
    .archive-doc .doc-title:hover {
        font-weight: 600;
    }

        .archive-doc .doc-title:hover ~ .doc-coord-btn {
            background: #000;
            color: #fff;
        }

/* =========================
   提取状态 (Extracted) 核心修复
========================= */

/* 🌟 左侧抽出状态 */
.position-right .archive-doc.extracted {
    /* 保持原本的横向抽出和微微倾斜 */
    transform: translateX(-230px) skewY(1.5deg) !important;
    /* 🌟 核心修改 2：强行覆盖 top，彻底打破原有的堆叠错位！
       -200px 的补偿会让它刚好停留在屏幕合适的“中间高度” */
    top: -233px !important;
    bottom: auto !important;
    margin-top: 0 !important; /* 清除可能存在的额外错位 */
    box-shadow: 10px 10px 30px rgba(0,0,0,0.3);
}

/* 🌟 右侧抽出状态 */
.position-left .archive-doc.extracted {
    /* 保持原本的横向抽出和微微倾斜 */
    transform: translateX(200px) skewY(-1.5deg) !important;
    /* 🌟 核心修改 3：由于右侧文件堆的基准线(278px)比左侧(95px)高出 183px，
       为了让左右抽出后在视觉上对齐在“同一个绝对高度”，这里的 top 只需微负即可 */
    top: -10px !important;
    bottom: auto !important;
    margin-top: 0 !important; /* 清除可能存在的额外错位 */
    box-shadow: -10px 10px 30px rgba(0,0,0,0.3);
}

/* ========================================================
   🌟 新增需求：地圖初始操作提示 (0.5s - 5s)
   ======================================================== */
.map-init-hint {
    position: fixed;
    bottom: 200px; /* 置於屏幕中下方，避開底部梯形文字 */
    left: 51%;
    transform: translateX(50%);
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 3px;
    color: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    /* 總時長 4.5s + 延遲 0.5s = 5s 精准結束 */
    animation: mapHintTimeline 5.5s cubic-bezier(0.25, 1, 1, 1) 0.5s forwards;
}

@keyframes mapHintTimeline {
    0% {
        opacity: 0;
        transform: translate(-40%, -10px);
    }

    12% {
        opacity: 1;
        transform: translate(-40%, 0);
    }

    88% {
        opacity: 1;
        transform: translate(-40%, 0);
    }

    100% {
        opacity: 0;
        transform: translate(-40%, 10px);
    }
}

/* ========================================================
   🌟 🟢 核心修改 5：精準的一次性登場時間線 (總長 4 秒)
   ======================================================== */
@keyframes manualIntroTimeline {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }
    /* 0.4秒內快速完成完美的初次淡入 */
    75% {
        opacity: 1;
    }
    /* 準確維持到第 3 秒結束 (3s / 4s = 75%) */
    100% {
        opacity: 0;
    }
    /* 最後 1 秒平滑地自我淡出隱藏 */
}
/* ========================================================
   1. 基础公共样式 (默认全部隐藏)
   ======================================================== */
.hud-manual {
    position: absolute;
    top: 0px;
    left: 100%;
    right: auto;
    width: 300px;
    display: none; /* 🔴 默认隐藏，防止堆叠冲突 */
    flex-direction: column;
    gap: 8px;
    text-align: left;
    background: transparent;
    z-index: 10;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.4s ease-in-out !important;
}

/* ========================================================
   2. 严格互斥的显示与动画规则（对接真实的 view-* 类名）
   ======================================================== */

/* TXT 文本模式 */
#attachment-viewer.view-txt .hud-manual#manual-txt,
#attachment-viewer.view-text .hud-manual#manual-txt,
#attachment-viewer.mode-txt .hud-manual#manual-txt {
    display: flex;
}

#attachment-viewer.view-txt:not(.closing) #manual-txt,
#attachment-viewer.view-text:not(.closing) #manual-txt,
#attachment-viewer.mode-txt:not(.closing) #manual-txt {
    animation: hudIntroTimeline 4.5s cubic-bezier(0.25, 1, 0.5, 1) 0.5s;
}

/* PDF 文档模式 */
#attachment-viewer.view-pdf .hud-manual#manual-pdf,
#attachment-viewer.mode-pdf .hud-manual#manual-pdf {
    display: flex;
}

#attachment-viewer.view-pdf:not(.closing) #manual-pdf,
#attachment-viewer.mode-pdf:not(.closing) #manual-pdf {
    animation: hudIntroTimeline 4.5s cubic-bezier(0.25, 1, 0.5, 1) 0.5s;
}

/* Score / Joystick 摇杆图形记谱模式 */
#attachment-viewer.view-score .hud-manual#manual-score,
#attachment-viewer.mode-score .hud-manual#manual-score,
#attachment-viewer.mode-joystick .hud-manual#manual-score {
    display: flex;
}

#attachment-viewer.view-score:not(.closing) #manual-score,
#attachment-viewer.mode-score:not(.closing) #manual-score,
#attachment-viewer.mode-joystick:not(.closing) #manual-score {
    animation: hudIntroTimeline 4.5s cubic-bezier(0.25, 1, 0.5, 1) 0.5s;
}

/* Video / Folly 叠合解析层模式 */
#attachment-viewer.view-folly .hud-manual#manual-folly,
#attachment-viewer.mode-video .hud-manual#manual-folly,
#attachment-viewer.mode-folly .hud-manual#manual-folly {
    display: flex;
}

#attachment-viewer.view-folly:not(.closing) #manual-folly,
#attachment-viewer.mode-video:not(.closing) #manual-folly,
#attachment-viewer.mode-folly:not(.closing) #manual-folly {
    animation: hudIntroTimeline 4.5s cubic-bezier(0.25, 1, 0.5, 1) 0.5s;
}

/* Image 图像模式 —— 严格排除 txt、pdf、score、folly 等其他所有模式，防止乱显 */
#attachment-viewer.view-image:not(.view-txt):not(.view-text):not(.view-pdf):not(.view-score):not(.view-folly):not(.mode-txt):not(.mode-pdf):not(.mode-score):not(.mode-video) .hud-manual#manual-image,
#attachment-viewer.mode-image:not(.view-txt):not(.view-text):not(.view-pdf):not(.view-score):not(.view-folly):not(.mode-txt):not(.mode-pdf):not(.mode-score):not(.mode-video) .hud-manual#manual-image {
    display: flex;
}

#attachment-viewer.view-image:not(.closing):not(.view-txt):not(.view-text):not(.view-pdf):not(.view-score):not(.view-folly):not(.mode-txt):not(.mode-pdf):not(.mode-score):not(.mode-video) #manual-image,
#attachment-viewer.mode-image:not(.closing):not(.view-txt):not(.view-text):not(.view-pdf):not(.view-score):not(.view-folly):not(.mode-txt):not(.mode-pdf):not(.mode-score):not(.mode-video) #manual-image {
    animation: hudIntroTimeline 4.5s cubic-bezier(0.25, 1, 0.5, 1) 0.5s;
}

/* ========================================================
   3. 各专属面板结构与间距微调
   ======================================================== */


/* 【1. Folly 视频专属面板 —— 🌟 独立修改为朝上显示】 */
#manual-folly {
    /* 1. 清除公共样式中“靠右”和“靠顶部”的设定 */
    top: auto;
    left: 50%; /* 让面板相对于呼出按钮水平居中 */
    /* 2. 设定为向上弹出，距离按钮上方 20px */
    bottom: calc(100% + 20px);
    /* 3. 使用 transform 修正居中偏移量 */
    transform: translateX(-50%);
}

    #manual-folly .manual-intro {
        margin-bottom: 12px;
    }

/* 【2. Score 摇杆专属面板】 */
#manual-score {
    width: 230px;
    top: -75px;
}

    #manual-score .manual-group {
        gap: 15px;
    }

    #manual-score .group-reset {
        margin-bottom: 70px;
    }

    #manual-score .group-joystick {
        margin-bottom: 75px;
    }

    #manual-score .group-translate {
        margin-bottom: 40px;
    }

/* 【3. PDF 阅读器专属面板】 */
#manual-pdf {
    top: -5px;
}

    #manual-pdf .manual-group {
        gap: 18px;
    }

    #manual-pdf .group-reset {
        margin-bottom: 30px;
    }

    #manual-pdf .group-page {
        margin-bottom: 50px;
    }

    #manual-pdf .group-translate {
        margin-bottom: 35px;
    }

/* 【4. Image 图像专属面板】 */
#manual-image {
    top: -5px;
}

#manual-image .manual-group {
    gap: 18px;
}

#manual-image .group-reset {
    margin-bottom: 30px;
}

#manual-image .group-page {
    margin-bottom: 50px;
}

#manual-image .group-translate {
    margin-bottom: 35px;
}

/* 【5. TXT 文本专属面板】 */
#manual-txt {
    top: -5px;
}

    #manual-txt .manual-group {
        gap: 18px;
    }

    #manual-txt .group-reset {
        margin-bottom: 45px;
    }

    #manual-txt .group-translate {
        margin-bottom: 35px;
    }

/* ========================================================
   4. 全局文字排版、Hover 交互与动画定义
   ======================================================== */
.hud-manual:hover {
    opacity: 1 !important;
}

.hud-manual .manual-line {
    font-size: 13px;
    line-height: 20px;
    color: #666;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.95); /* ⭐ 改为白色 */
}

.hud-manual .manual-intro {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.95); /* ⭐ 改为浅白 */
    line-height: 1.5;
    margin-bottom: 16px;
}

.hud-manual .offset-line {
    padding-left: 6px;
}

.hud-manual .manual-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hud-manual .group-reset,
.hud-manual .group-joystick,
.hud-manual .group-page,
.hud-manual .group-translate {
    margin-bottom: 50px;
}

.hud-manual .hud-manual-title {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.9); /* ⭐ 改为偏白 */
    padding-bottom: 6px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.25); /* ⭐ 顺带把分割线调浅 */
    width: fit-content;
}

.hud-manual .hud-manual-content {
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: 0.5px;
    color: rgba(0, 0, 0, 0.45);
    font-weight: 300;
}

@keyframes hudIntroTimeline {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
#manual-score {
    top: -30px; /* 👈 调大负数可以整体向上提，数字越小（越负）位置越高 */
}
#manual-image,
#manual-txt {
    top: -30px; /* 👈 调大负数可以整体向上提，数字越小（越负）位置越高 */
}

#manual-pdf{
    top: -30px; /* 👈 调大负数可以整体向上提，数字越小（越负）位置越高 */
}
/* ========================================================
   GLOW EFFECTS (抗深色背景干扰光晕)
   ======================================================== */

/* 1. 如果 HUD Manual 是纯文字或包含文本的按钮 */
.hud-manual,
#manual-score,
#manual-pdf,
#manual-txt,
#manual-image {
    text-shadow: 0 0 5px rgba(255, 255, 255, 1), 0 0 9px rgba(255, 255, 255, 1);
}

#archive-drawer .tree-file {
    white-space: nowrap; /* 强制不换行 */
    
}
/* 底部抽屉整体样式 */
#bottom-index-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65vh; /* 根据你 ideal effect 图的高度，可调整为 60vh ~ 70vh */
    background: rgba(255, 255, 255, 0.9); /* 底部不透明白底 */
    backdrop-filter: blur(12px); /* 磨砂玻璃质感 */
    /* 初始状态隐藏主体，只露出 60px 高度的触发文字区域 */
    transform: translateY(calc(100% - 60px));
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.05);
}

    /* 抽屉打开时的状态 */
    #bottom-index-drawer.open {
        transform: translateY(0);
    }

/* 底部文字标签区域（触发器） */
#bottom-drawer-trigger {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    cursor: pointer;
    font-weight: bold;
    user-select: none;
}

/* 内容区域，利用 flex 占据剩余空间并允许滚动 */
.bottom-drawer-content {
    flex: 1;
    padding: 20px 60px;
    overflow-y: auto;
}

/* --- 底部索引系統排版 (居中并排、带顶部标题) --- */
/* 1. 确保父容器（比如 #index-drawer）开启了相对定位 */
#index-drawer {
    position: relative;
}

/* 2. 将索引系统绝对定位到底部 */
.archive-index-system {
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 23px;
    padding: 17px 0;
    box-sizing: border-box;
}

/* 顶部新增的“——索引——”居中标题样式 */
.archive-index-title {
    width: 100%; /* 独占一行 */
    text-align: center; /* 文字居中 */
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 0px; /* 与下方索引内容拉开一点间距 */
    letter-spacing: 5px; /* 增加一点字间距，让装饰效果更好看 */
}

.index-row {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;

}

.index-category {
    cursor: pointer;
    font-weight: 500;
    min-width: auto;
    text-align: left;
    transition: color 0.2s;
    pointer-events: none;
}

.index-separator {
    margin: 0px 9px;
    color: #999;
}

.index-tags-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}


#index-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    /* 🌟 核心修改 1：利用自身动态高度的 100% 向下隐藏，并扣除把手的 60px，确保把手永远外露 */
    transform: translateY(calc(100% - 60px));
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 9999;
}

    /* 保持不变：打开时依然回到 0 */
    #index-drawer.open {
        transform: translateY(0);
    }
/* 抽屉把手区域 */
#index-drawer-handle {
    position: relative;
    width: 100%;
    height: 60px;
    cursor: pointer;
    pointer-events: none;
}
    #index-drawer-handle .frosted-shape {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 1px solid rgba(0, 0, 0, 0.4);
        border-bottom: none;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        /* 🌟 核心修改：使用 CSS 变量读取位置 */
        clip-path: polygon( 0 100%, var(--frame-left, 230px) 0, var(--frame-right, calc(100% - 172px)) 0, 100% 100% );
        pointer-events: none;
    }

/* 抽屉内容区 */
/* 找到现有的 #index-drawer-content，修改 flex 布局方向 */
#index-drawer-content {
    /* 🌟 核心修改 2：取消 50vh，让内部的 title 和 three-columns 自动撑开高度 */
    height: auto;
    /* 🌟 安全防线：限制最大高度（例如屏幕高度的 85% 减去把手高度），配合底部的 overflow-y: auto 允许滚动 */
    max-height: calc(85vh - 60px);
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    /* 🌟 体验优化：原本是 padding: 0px 230px; 建议在底部加上 padding (如 40px)，防止抽屉打开时文字紧贴屏幕最底边缘 */
    padding: 46px 168px 23px 230px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
}

/* 新增：靠上居中的一行文字样式 */
.index-top-title {
    text-align: center;
    font-size: 15px;
    letter-spacing: 2px;
    color: #333;
    margin-bottom: 9px; /* 与下方分栏文字拉开距离 */
    width: 100%;
}

.index-three-columns {
    column-count: 2;
    column-gap: 70px;
    font-size: 15px;
    line-height: 2;
    color: #333;
    margin-bottom: 9px;
    text-align: justify;
    /* ⭐ 新增核心修改：限制边界与换行规则 */
    column-width: 200px; /* 设定每列的最小安全宽度，屏幕过窄时它会自动减为2列或1列，不再乱挤 */
    word-break: break-word; /* 强制长段落、长英文单词换行，绝不溢出到其他列或外部 */
    overflow-wrap: break-word; /* 兼容性处理，防止内容撑破容器 */
    width: 100%; /* 确保它在父级中占据完整的可用宽度 */
    display: block; /* 强化块级独立性，防止被 Flex 容器的规则意外拉扯 */
}
/* ===================================================================
   🌟 底部索引抽屉：结语样式 (与 index-top-title 格式一致)
   =================================================================== */
.index-conclusion {
    text-align: center;
    font-size: 15px;
    letter-spacing: 2px;
    color: #333;
    margin-bottom: 46px;
    width: 100%;
}
/* 当屏幕宽度小于 1100px 时，缩小抽屉的左右留白 */
@media (max-width: 1100px) {
    #index-drawer-content {
        padding: 0px 80px 40px 80px !important;
    }
}

/* 当屏幕宽度小于 768px（手机或极窄窗口）时，进一步缩小留白 */
@media (max-width: 768px) {
    #index-drawer-content {
        padding: 0px 20px 40px 20px !important;
    }

    /* 顺便将三栏在手机上强制转为单栏或双栏，体验更好 */
    .index-three-columns {
        column-count: 1 !important;
    }
}
/* ===================================================================
   🌟 核心修改：统一提取黑点的基础样式，并利用父级类名控制左右位置
   =================================================================== */

/* 1. 基础标点样式（统一设定大小、颜色、动画等，但不规定左右位置） */
.archive-doc.matched-tag::after {
    content: '';
    position: absolute;
    top: -4px; /* 调整 Y 轴位置，数值可微调 */
    width: 6px; /* 标点大小 */
    height: 6px;
    background-color: #111; /* 黑色标点 */
    border-radius: 50%;
    z-index: 1000;
    pointer-events: none; /* 避免挡住鼠标点击汉字 */
    /* 引入你之前写的弹出动画效果 */
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

/* 激活状态下：显示标点 */
.archive-doc.matched-tag::after {
    opacity: 1;
    transform: scale(1);
}

/* 2. 👈 左侧文件堆：标点放在右上角 */
.position-left .archive-doc.matched-tag::after {
    right: -4px;
    left: auto; /* 确保清除左侧定位干扰 */
}

/* 3. 👉 右侧文件堆：标点放在左上角 */
.position-right .archive-doc.matched-tag::after {
    left: -4px;
    right: auto; /* 确保清除右侧定位干扰 */
}

/* =================================================================== */
/* 确保标签本身是相对定位，这样底部的小黑点才能准确跟随它 */
.index-tag {
    position: relative;
}

    /* 悬停 (Hover) 或 选中 (Active) 状态下：在文字正下方生成一个小黑点 */
    .index-tag:hover::after,
    .index-tag.active::after {
        content: '';
        position: absolute;
        left: 50%; /* 配合下面的 translateX 实现水平居中 */
        transform: translateX(-50%);
        bottom: -6px; /* 控制小黑点距离文字底部的距离，数值可微调 */
        width: 4px; /* 小黑点的宽度 */
        height: 4px; /* 小黑点的高度 */
        background-color: #111; /* 黑色 */
        border-radius: 50%; /* 变成圆形 */
        pointer-events: none; /* 防止黑点影响鼠标点击 */
    }

    /* =========================
   Index Tag Disabled State (禁用/非候选状态)
========================= */
    .index-tag.disabled,
    .index-category.disabled {
        color: #777 !important;
        pointer-events: none !important; /* 强制禁止鼠标点击，同时自动屏蔽 hover 效果 */
        cursor: not-allowed !important;
        opacity: 0.5; /* 降低不透明度增加置灰感 */
    }
/* =========================
   Index Layout Disabled State
========================= */
.index-three-columns.disabled,
.index-conclusion.disabled,
.index-top-title.disabled {
    color: #888 !important;
    opacity: 0.8; /* 可选：稍微降低透明度让变灰更自然 */
    transition: color 0.2s ease, opacity 0.2s ease;
}

    /* 如果你的这些容器内部还有特定的文本标签，强制让它们的子元素也变灰 */
    .index-three-columns.disabled *,
 .index-conclusion.disabled *,
    .index-top-title.disabled * {
        color: #777 !important;
        transition: color 0.2s ease;
    }
/* ===================================================================
   🌟 修复：当屏幕宽度小于 1100px 时，缩小抽屉的左右留白（补全你漏掉的括号）
   =================================================================== */
@media (max-width: 1100px) {
    #index-drawer-content {
        padding: 30px 40px;
    }
    #bottom-labels {
        left: 40px;
        right: 40px;
    }
}
/* ========================================================
   🌟 顶部标题梯形框 (Trapezoid Title Handle)
   ======================================================== */
#top-title-wrapper {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 260px; /* 顶部平齐段的宽度 */
    height: var(--frame-top);
    z-index: 1000; /* 放在主边框之上，用来覆盖住中间的边框线条 */
    pointer-events: none;
}

    #top-title-wrapper .frosted-shape {
        position: absolute;
        top: 0;
        left: -30px; /* 向外延展的斜角宽度 */
        right: -30px;
        height: calc(100% + 2px); /* 稍微往下延伸 2px，彻底遮盖住原本的主边框横线 */
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        /* 裁切出梯形：上方窄，下方宽并与边框相连 */
        clip-path: polygon(30px 0, calc(100% - 30px) 0, 100% 100%, 0 100%);
    }

/* 梯形顶部的实线 */
.title-top-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(0,0,0,0.4);
}

/* 左右两根斜线，通过 SVG 绘制以保证边缘锐利，与主框架斜线一致 */
.title-perspective-line {
    position: absolute;
    top: 0;
    width: 30px;
    height: 100%;
    pointer-events: none;
}

    .title-perspective-line.title-left {
        left: -30px;
    }

    .title-perspective-line.title-right {
        right: -30px;
    }

    .title-perspective-line line {
        stroke: rgba(0, 0, 0, 0.4);
        stroke-width: 1;
    }
@media (max-width: 768px) {
    /* --------------------------------------
       1. 隐藏旧的文件堆叠
    -------------------------------------- */
    .file-stack {
        display: none !important;
    }

    /* --------------------------------------
       2. 底部三条杠 (汉堡菜单) 样式
    -------------------------------------- */
    .mobile-menu-btn {
        display: inline-block;
        font-size: 22px;
        font-weight: 300;
        line-height: 1;
        cursor: pointer;
        padding-bottom: 2px;
    }

    /* 重新排版底部标签，使其在极窄屏幕上也能对齐两侧 */
    #bottom-labels {
        display: flex;
        justify-content: space-between;
        align-items: center;
        left: 10px !important;
        right: 10px !important;
        width: calc(100% - 20px);
    }

    /* --------------------------------------
       3. 罗盘 (Compass Module) 对齐到视窗右上角
    -------------------------------------- */
    .global-compass-module {
        /* 使用 CSS 变量对齐到透视相框的内边界，并加上一点边距 */
        top: calc(var(--frame-top) + 12px) !important;
        right: calc(var(--frame-right) + 12px) !important;
        transform: scale(0.85); /* 稍微缩小以适应手机屏幕 */
        transform-origin: top right;
    }

    /* =========================================================
   4. 修改手机端左右侧边栏样式 (带完美切角描边)
========================================================= */

    :root {
        --side-handle-width: 16px;
    }

    .mobile-side-drawer {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 260px !important;
        z-index: 1008;
        transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
        background: transparent;
        pointer-events: none;
    }

        .mobile-side-drawer.open {
            pointer-events: auto;
        }

        /* 🌟 公共设置：创建底层黑框和上层玻璃 */
        .mobile-side-drawer::before,
        .mobile-side-drawer::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            pointer-events: auto;
        }

        /* 🌟 公共设置：删除底层黑框，保留上层玻璃 */
        .mobile-side-drawer::before {
            display: none !important; /* 移除底层，防止毛玻璃模糊黑底变成纯灰色 */
        }

        .mobile-side-drawer::after {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: -1;
        }

    /* =========================================================
   左侧栏：形状与偏移逻辑
========================================================= */
    #mobile-left-drawer {
        left: 0;
        transform: translateX(calc(-100% + var(--side-handle-width)));
        /* 🌟 核心魔法：使用 drop-shadow 完美生成跟随 6 边形的 1px 右侧描边 */
        filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.4));
    }

        #mobile-left-drawer.open {
            transform: translateX(0);
        }

        #mobile-left-drawer::after {
            clip-path: polygon( 0 0, calc(100% - var(--side-handle-width)) 0, 100% var(--frame-top), 100% calc(100% - var(--frame-bottom)), calc(100% - var(--side-handle-width)) 100%, 0 100% );
            left: 0;
            width: 100%; /* 恢复 100% 宽度，直接覆盖全区 */
        }

    /* =========================================================
   右侧栏：形状与偏移逻辑
========================================================= */
    #mobile-right-drawer {
        right: 0;
        transform: translateX(calc(100% - var(--side-handle-width)));
        /* 🌟 核心魔法：使用 drop-shadow 完美生成跟随 6 边形的 1px 左侧描边 */
        filter: drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.4));
    }

        #mobile-right-drawer.open {
            transform: translateX(0);
        }

        #mobile-right-drawer::after {
            clip-path: polygon( 0 var(--frame-top), var(--side-handle-width) 0, 100% 0, 100% 100%, var(--side-handle-width) 100%, 0 calc(100% - var(--frame-bottom)) );
            right: 0;
            width: 100%; /* 恢复 100% 宽度，直接覆盖全区 */
        }
    /* =========================================================
   侧边栏内容区设置
========================================================= */
    .mobile-drawer-content {
        position: relative;
        height: 100%;
        overflow-y: auto;
        padding: calc(var(--frame-top) + 20px) 20px calc(var(--frame-bottom) + 20px) 20px;
        box-sizing: border-box;
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
    }

    .mobile-side-drawer.open .mobile-drawer-content {
        opacity: 1;
        transition-delay: 0.15s;
    }

    .mobile-list-item {
        font-size: 14px;
        line-height: 2.4;
        letter-spacing: 1.5px;
        color: rgba(0, 0, 0, 0.85);
        cursor: pointer;
        white-space: nowrap;
        transition: font-weight 0.2s, transform 0.2s;
    }

        .mobile-list-item:hover, .mobile-list-item:active {
            font-weight: 700;
            transform: translateX(3px);
        }
}
/* ========================================================
   🌟 遗构馆视窗透视相框 (响应式联动系统)
   ======================================================== */
:root {
    /* 核心：将向内压缩的四个边距定义为全局变量，成为唯一的控制源 */
    --frame-top: 40px;
    --frame-bottom: 60px;
    --frame-left: 230px;
    --frame-right: 168px;
}

/* 1. 内部主视窗黑框 */
#main-viewport-frame {
    position: fixed;
    top: var(--frame-top);
    bottom: var(--frame-bottom);
    left: var(--frame-left);
    right: var(--frame-right);
    border: 1px solid rgba(0, 0, 0, 0.4);
    z-index: 9;
    pointer-events: none;
    /* 加入缓动：当屏幕改变大小或切换设备时，框架会有呼吸感的弹性缩放 */
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 2. 透视切割线通用设定 */
.perspective-line,
.drawer-perspective-line {
    z-index: 9;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.perspective-line {
    position: fixed;
}

/* 抽屉里的底部线条必须是绝对定位，才能跟从抽屉 */
.drawer-perspective-line {
    position: absolute;
    bottom: 0;
}

/* 统一线条颜色和粗细 */
.perspective-line line,
.drawer-perspective-line line {
    stroke: rgba(0, 0, 0, 0.4);
    stroke-width: 1;
}

/* 3. 分配四大角的几何尺寸与定位（全部读取变量！） */
.perspective-line.top-left {
    top: 0; left: 0;
    width: var(--frame-left); height: var(--frame-top);
}
.perspective-line.top-right {
    top: 0; right: 0;
    width: var(--frame-right); height: var(--frame-top);
}
.drawer-perspective-line.bottom-left {
    left: 0;
    width: var(--frame-left); height: var(--frame-bottom);
}
.drawer-perspective-line.bottom-right {
    right: 0;
    width: var(--frame-right); height: var(--frame-bottom);
}

/* ========================================================
   📱 透视相框的移动端响应式降级
   ======================================================== */
@media (max-width: 1100px) {
    :root {
        /* 平板尺寸下：缩小两侧深邃的景深，避免遮挡地图视野 */
        --frame-left: 120px;
        --frame-right: 120px;
    }
}

@media (max-width: 768px) {
    :root {
        /* 手机端尺寸下：由于屏幕太窄，长方形黑框会大幅度收缩，变成一个极简的细边框 */
        --frame-top: 45px;
        /* 底部留给抽屉把手 60px 的空间保持不变 */
        --frame-bottom: 60px; 
        --frame-left: 16px;
        --frame-right: 16px;
    }
}
/* ========================================================
   视频初始开场 5秒 Manual (框内悬浮 & 靠右对齐)
   ======================================================== */

.startup-video-manual {
    position: absolute;
    top: 50%;
    right: 40px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    text-align: right;
    pointer-events: none !important;
    z-index: 1000;
}

    /* 文本行内部采用 Flex 布局，保证文字和破折号横向对齐 */
    .startup-video-manual .manual-line {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        letter-spacing: 2px;
    }
    /* 1. 核心：给“文字本身”加上黑底白字和内边距（即黑底框效果） */
    .startup-video-manual .manual-text {
        background-color: rgba(0, 0, 0, 0.55); /* ⭐ 改为深色半透明 */
        border: 1px solid rgba(255, 255, 255, 0.2); /* ⭐ 加入与 HUD 统一的浅色描边 */
        backdrop-filter: blur(4px); /* ⭐ 毛玻璃 */
        -webkit-backdrop-filter: blur(4px);
        color: #ffffff; /* 白色文字 */
        padding: 6px 10px; /* 上下、左右的内边距，让黑底撑开成为一个好看的框 */
        border-radius: 2px; /* 可选：微圆角，让黑底框更有质感 */
    }

    /* 2. 核心：右侧的破折号，保持无背景、纯白色（或继承），紧贴黑底框右侧 */
    .startup-video-manual .manual-dash {
        color: rgba(255, 255, 255, 0.85); /* ⭐ 改为白色 */
        background: transparent; /* 明确声明没有背景 */
        margin-left: 2px; /* 破折号与黑底框之间的微小间距 */
    }

    /* 3. 结构与分组间距控制 */
    .startup-video-manual .hud-manual-content {
        display: flex;
        flex-direction: column;
    }

    .startup-video-manual .manual-group {
        display: flex;
        flex-direction: column;
        gap: 160px; /* 组内行距 */
    }

    /* 如果有多个分组，可按需设置组间距 */
    .startup-video-manual .group-indicator {
        margin-bottom: 45px;
    }

    .startup-video-manual .group-playback {
        margin-bottom: 35px;
    }

    .startup-video-manual .manual-group:last-child {
        margin-bottom: 0;
    }
/* 3. 专属 2.5 秒开场生命周期动画 (从淡入到完全消失) */
@keyframes startupVideoIntro {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }
    /* 0.5秒内跟随黑屏一起淡入完成 */
    70% {
        opacity: 1;
    }
    /* 保持显示状态 */
    100% {
        opacity: 0;
    }
    /* 2.5秒时完美淡出并隐身 */
}

/* ========================================================
   严格互斥的显示与动画触发逻辑
   ======================================================== */

/* 当 Viewer 处于乐器视频模式时显示 */
#attachment-viewer.mode-instrument .hud-manual#startup-manual-instrument {
    display: flex;
}

#attachment-viewer.mode-instrument:not(.closing) #startup-manual-instrument {
    animation: startupVideoIntro 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 当 Viewer 处于废墟园林视频模式时显示 */
#attachment-viewer.mode-folly-video .hud-manual#startup-manual-folly {
    display: flex;
}

#attachment-viewer.mode-folly-video:not(.closing) #startup-manual-folly {
    animation: startupVideoIntro 5s cubic-bezier(0.25, 3.5, 0.5, 1) forwards;
}
/* =========================
   標題語言滾輪 (Cipher Wheel)
========================= */
.title-wheel-container {
    position: fixed;
    top: 9px;
    left: 52%;
    /* 完全繼承原有的 3D 空間透視 */
    transform: perspective(400px) rotateX(-23deg) translateX(-46%);
    transform-origin: center bottom;
    z-index: 1002;
    /* 限制高度並隱藏溢出，形成窺視孔 */
    height: 30px;
    overflow: hidden;
    display: flex;
    align-items: flex-start; /* 🌟 核心修正：改為頂部對齊，防止軌道被拉偏 */
    cursor: crosshair;
    user-select: none;
    padding-right: 15px;
}

/* 滾輪軌道 */
.wheel-track {
    display: flex;
    flex-direction: column;
    margin-top: 0;
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: transform;
}

/* 單個標題項目 */
.wheel-item {
    height: 30px;
    line-height: 30px;
    font-size: 21px;
    font-weight: 300;
    color: #333; /* 稍微調淡非當前語言的顏色 */
    letter-spacing: 17px;
    text-align: center;
    margin-right: 8px; /* 留一點空間給右側黑點 */
    filter: blur(2px);
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

    /* 當前啟用的標題 */
    .wheel-item.active {
        font-weight: 400; /* 🌟 找回你原本 top-title 的字重 */
        color: #333;
        filter: blur(0px);
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
    }

/* 懸停交互：發光與加粗 */
.title-wheel-container:hover .wheel-item.active {
    font-weight: 600;
    color: #333;
    text-shadow: 0 0 12px rgba(255, 255, 255, 1);
}

/* 側邊機械刻度 - 方案一：拉伸指針 */
.wheel-indicators {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px; /* 稍微拉大一点间距，让机械结构有呼吸空间 */
}

.wheel-dot {
    width: 3px;
    height: 1px; /* 变成横向短线 */
    background: rgba(0, 0, 0, 0.2); /* 未激活时像暗淡的刻度 */
    border-radius: 1px;
    /* 加入宽度和形变的弹性过渡，模拟机械阻尼 */
    transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

    .wheel-dot.active {
        width: 10px; /* 激活时向左横向拉长，像指针弹出 */
        height: 2px; /* 微微加粗 */
        background: rgba(0, 0, 0, 0.85);
        box-shadow: 0 0 6px rgba(255, 255, 255, 1);
        transform: translateX(-2px); /* 整体向左微移，增加动态打击感 */
    }
/* 👇 强行拔高 Leaflet 的弹窗 (Popup) 与图标 (Marker) 所在的面板层级 */
.leaflet-popup-pane {
    z-index: 2000 !important;
    pointer-events: auto !important;
}

.leaflet-marker-pane {
    z-index: 1999 !important;
}
/* ========================================================
   🎯 可拖拽对象（Joystick, Compass, Score Card 等）光标系统
   ======================================================== */

/* 1. 默认可抓取状态 (Hover / 鼠标移入) */
#joystick-knob,
.compass-handle,
.score-card {
    cursor: grab !important;
}

    /* 2. 抓握中状态 (Active / 鼠标按下瞬间) */
    #joystick-knob:active,
    .compass-handle:active,
    .score-card:active {
        cursor: grabbing !important;
    }

    /* 3. 兼容可能带有子元素的嵌套场景（确保子元素也继承抓握光标） */
    #joystick-knob *,
    .compass-handle *,
    .score-card * {
        cursor: inherit;
    }
/* ========================================================
   右上角全局罗盘 (Global Compass Module - 完整五边形闭合边框版)
   ======================================================== */
.global-compass-module {
    position: fixed;
    top: 53px;
    right: 190px;
    z-index: 10;
    transition: opacity 0.3s ease; /* 增加漸變過渡效果 */
}

    /* 🌟 核心 2：當滑鼠移入整個羅盤模組（或處於展開狀態）時，恢復完全不透明 */
    .global-compass-module:hover,
    .global-compass-module.expanded {
        opacity: 1;
    }

/* 🌟 1. 外层：采用标准的 5 点五边形，负责毛玻璃与形状 */
.compass-pentagon-outer {
    position: relative;
    padding: 0;
    /* 严格的 5 个点五边形路径 */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 35px 100%, 0 calc(100% - 35px));
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

    /* 🌟 2. 核心补救：利用 border 画 4 条边，利用 background 渐变补齐第 5 条斜边 */
    .compass-pentagon-outer::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        /* 画常规的 4 条边（左下角的直角边会被下方的 clip-path 自动切掉） */
        border: 1px solid rgba(0, 0, 0, 0.35);
        /* 画第 5 条斜边：利用渐变在左下角 35x35 的区域内画一条精准的 45 度对角线 */
        background: linear-gradient( to top right, transparent 50%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.35) calc(50% + 1.2px), /* 1.2px 倾斜厚度视觉上恰好等同于 1px 边框 */
        transparent calc(50% + 1.2px) );
        background-size: 35px 35px; /* 严格匹配 clip-path 切掉的 35px 尺寸 */
        background-position: bottom left;
        background-repeat: no-repeat;
        /* 同步父级的裁切，确保渐变线条精准贴合边缘，不破坏外部透明度 */
        clip-path: polygon(0 0, 100% 0, 100% 100%, 35px 100%, 0 calc(100% - 35px));
    }

/* 🌟 3. 内层：彻底解放，完全透明，只负责排版 */
.compass-pentagon-inner {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    clip-path: none;
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    height: 90px;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
/* -------------------------------------
   罗盘触发器与十字图标绘制
-------------------------------------- */
.global-compass-btn {
    width: 96px;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: crosshair;
    flex-shrink: 0;
    background: transparent;
    transition: background 0.2s;
}

/* 展开时，给罗盘左侧添加一条细微的分割线 */
.global-compass-module.expanded .global-compass-btn {
    box-shadow: -1px 0 0 rgba(0, 0, 0, 0.1);
}

/* 罗盘外部正圆（調小尺寸） */
.compass-circle-icon {
    position: relative;
    width: 28px; /* 🌟 原為 40px，調小 */
    height: 28px; /* 🌟 原為 40px，調小 */
    border: 1px dashed #555;
    border-radius: 50%;
}

    /* 水平贯穿准星 */
    .compass-circle-icon::before {
        content: '';
        position: absolute;
        top: 50%;
        left: -8px; /* 🌟 配合圓圈縮小，同步縮短延伸長度 */
        right: -8px; /* 🌟 配合圓圈縮小，同步縮短延伸長度 */
        height: 1px;
        background: #555;
        transform: translateY(-50%);
    }

    /* 垂直贯穿准星 */
    .compass-circle-icon::after {
        content: '';
        position: absolute;
        left: 50%;
        top: -8px; /* 🌟 配合圓圈縮小，同步縮短延伸長度 */
        bottom: -8px; /* 🌟 配合圓圈縮小，同步縮短延伸長度 */
        width: 1px;
        background: #555;
        transform: translateX(-50%);
    }

/* 内部右上角的小型指示折角 (L型箭头) */
.compass-icon-arrow {
    position: absolute;
    top: 4px; /* 🌟 微調位置適配縮小後的圓圈 */
    right: 4px; /* 🌟 微調位置適配縮小後的圓圈 */
    width: 5px; /* 🌟 縮小折角尺寸 */
    height: 5px; /* 🌟 縮小折角尺寸 */
    border-top: 2px solid #555;
    border-right: 2px solid #555;
}
/* -------------------------------------
   隐藏滚轮包装器与动画 (无限滚轮版)
-------------------------------------- */
.compass-wheel-wrapper {
    /* 删除原有的 width: 0; */
    max-width: 0; /* 🌟 核心 1：改用 max-width 控制闭合状态 */
    width: max-content; /* 🌟 核心 2：让宽度自动撑开，贴合最长文本 */
    opacity: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    /* 🌟 核心 3：将 transition 监听的属性从 width 改为 max-width */
    transition: max-width 0.4s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s ease;
}

.global-compass-module.expanded .compass-wheel-wrapper {
    /* 删除原有的 width: 170px; */
    max-width: 500px; /* 🌟 核心 4：给定一个足够大的上限，容器会自然停留在 max-content 的真实宽度，不影响动画 */
    opacity: 1;
}
/* 滚轮列表自身 */
.compass-site-wheel {
    /* 删除原有的 width: 230px; */
    width: max-content; /* 🌟 核心 5：内部列表同样跟随最长文本宽度 */
    padding-left: 46px; /* 🌟 新增：补充原本因固定宽度而产生的左右安全留白 */
    padding-right: 46px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 100%;
    scrollbar-width: none;
    text-align: center;
    align-items: center;
    scroll-snap-type: y mandatory;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
}
    .compass-site-wheel::-webkit-scrollbar {
        display: none;
    }

/* 单个列表项 */
.compass-wheel-item {
    width: 100%;
    /* 🌟 核心：强制给定绝对高度，确保 JS 循环跳转时像素完美对齐 */
    height: 18px;
    box-sizing: border-box;
    font-size: 13px;
    letter-spacing: 2px;
    cursor: crosshair;
    white-space: nowrap;
    color: rgba(0, 0, 0, 0.35);
    background: transparent;
    transition: all 0.2s ease;
    scroll-snap-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* 防止被 flex 压缩 */
}

    .compass-wheel-item:hover,
    .compass-wheel-item.active {
        font-weight: 600;
        color: #333;
        transform: scale(1.08);
    }
/* Score / Joystick 摇杆图形记谱模式 */
#attachment-viewer.view-score .hud-manual#manual-score,
#attachment-viewer.mode-score .hud-manual#manual-score,
#attachment-viewer.mode-joystick .hud-manual#manual-score,
/* 🌟 新增下方這一行 */
#attachment-viewer.view-score .hud-manual#manual-score-intro {
    display: flex;
}

#attachment-viewer.view-score:not(.closing) #manual-score,
#attachment-viewer.mode-score:not(.closing) #manual-score,
#attachment-viewer.mode-joystick:not(.closing) #manual-score,
/* 🌟 新增下方這一行 */
#attachment-viewer.view-score:not(.closing) #manual-score-intro {
    animation: hudIntroTimeline 4.5s cubic-bezier(0.25, 1, 0.5, 1) 0.5s;
}
/* 🌟 獨立出來的搖桿操作介紹框 */
#manual-score-intro {
    top: auto;
    bottom: 40px; /* 固定在視窗底部 */
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 60%;
    text-align: center;
    background: rgba(0, 0, 0, 0.65); /* 半透明黑底提升對比度 */
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 12px 24px;
    border-radius: 4px;
}

    /* ========================================================
   搖桿操作介紹文字發光 (Glow)
   ======================================================== */
    #manual-score-intro .manual-intro {
        color: rgba(255, 255, 255, 0.95); /* 轉為白字 */
        font-size: 15px;
        margin-bottom: 0;
        /* ⭐ 移除原本的 text-shadow: none，加上多層次發光效果 */
        text-shadow: 0 0 6px rgba(255, 255, 255, 0.8), 0 0 12px rgba(255, 255, 255, 0.6) !important;
    }
/* 將現有的逗號分隔規則擴充，加入 image 的控制按鍵 */
.hud-move div,
.hud-zoom div,
#pdf-prev,
#pdf-next,
#image-prev,
#image-next {
    min-width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    color: rgba(255, 255, 255, 0.85); /* ⭐ 新增白色 */
}

    #pdf-prev:hover,
    #pdf-prev:hover *,
    #pdf-next:hover,
    #pdf-next:hover *,
    #image-prev:hover,
    #image-prev:hover *,
    #image-next:hover,
    #image-next:hover * {
        cursor: crosshair !important;
    }
/* ========================================================
   罗盘触发器图标 - 悬停加粗与动画过渡效果
   ======================================================== */

/* 1. 为所有图标组件添加平滑的过渡动画，让加粗过程不生硬 */
.compass-circle-icon,
.compass-circle-icon::before,
.compass-circle-icon::after,
.compass-icon-arrow {
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 2. 悬停（或展开状态）时：外部虚线圆圈加粗并加深颜色 */
.global-compass-btn:hover .compass-circle-icon,
.global-compass-module.expanded .compass-circle-icon {
    border-width: 1.5px;
    border-color: #333;
}

    /* 3. 悬停时：水平贯穿准星加粗 */
    .global-compass-btn:hover .compass-circle-icon::before,
    .global-compass-module.expanded .compass-circle-icon::before {
        height: 1.5px;
        background: #333;
    }

    /* 4. 悬停时：垂直贯穿准星加粗 */
    .global-compass-btn:hover .compass-circle-icon::after,
    .global-compass-module.expanded .compass-circle-icon::after {
        width: 1.5px;
        background: #333;
    }

/* 5. 悬停时：内部右上角折角 (L型箭头) 加粗 */
.global-compass-btn:hover .compass-icon-arrow,
.global-compass-module.expanded .compass-icon-arrow {
    border-top-width: 2px;
    border-right-width: 2px;
    border-color: #333;
}
/* ========================================================
   🌟 仅在移动端（<= 768px）显示汉堡菜单，桌面端自动隐藏
   ======================================================== */
.mobile-menu-btn {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-menu-btn {
        display: inline-block !important;
    }
}
@media (max-width: 768px) {
    /* ====== 1. 顶部语言切换滚轮 (Top Title Wheel) ====== */
    .wheel-item {
        white-space: normal; /* 允许长文本自然折行 */
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 80px; /* 强制英文折行，中文则因为字数少仍保持单行 */
        height: 30px !important; /* 必须严守 30px！否则 JS 滚轮位移会错乱 */
        font-size: 17px; /* 缩小字号 */
        line-height: 0.7; /* 极紧凑的行距，让两行字能挤进 30px 内 */
        letter-spacing: 3px; /* 缩减字间距防止越界 */
        padding: 0;
    }

    /* ====== 2. 底部中央标签 (Bottom Center Label) ====== */
    #bottom-center-label {
        white-space: normal; /* 允许长文本自然折行 */
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 85px; /* 强制英文折行为两行 */
        font-size: 20px;
        line-height: 0.9;
        letter-spacing: 3px;
        /* 重新校准手机端多行文本的 3D 绝对垂直居中 */
        top: 50%;
        transform: perspective(400px) rotateX(23deg) translate(-50%, -50%);
        transform-origin: center center;
    }
    #bottom-trigger-record {
        font-size: 15px;
    }
    #bottom-trigger-ruin {
        font-size: 15px;
    }

        /* 修正底部的悬停按压交互缩放，确保按下时依然保持居中定位 */
        #bottom-center-label:active {
            transform: perspective(400px) rotateX(23deg) translate(-50%, -50%) scale(0.95) !important;
        }
}
/* =========================================================
   Mobile Drawer Title & Index Linkage System
========================================================= */

/* 手机端侧边栏标题样式 */
.mobile-drawer-title {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2px;
    color: #333;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    opacity: 0.9;
}

/* 赋予移动端列表和罗盘列表相对定位，作为伪元素的锚点 */
.mobile-list-item,
.compass-wheel-item {
    position: relative;
}

    /* ====================================
   侧边栏 & 罗盘地点 黑点基础状态 (隐藏)
==================================== */
    .mobile-list-item::after,
    .compass-wheel-item::after {
        content: '';
        position: absolute;
        top: 50%;
        margin-top: -3px;
        width: 6px;
        height: 6px;
        background-color: #111;
        border-radius: 50%;
        z-index: 1000;
        pointer-events: none;
        opacity: 0;
        transform: scale(0.5);
        transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    }

    /* ====================================
   黑点激活状态 (显示)
==================================== */
    .mobile-list-item.matched-tag::after,
    .compass-wheel-item.matched-tag::after {
        opacity: 1;
        transform: scale(1);
    }

    /* ====================================
   精准定位控制
==================================== */
    /* 罗盘滚轮黑点靠右 */
    .compass-wheel-item::after {
        right: -16px;
    }

/* 左侧栏遗构录：黑点靠左 */
#mobile-left-drawer .mobile-list-item::after {
    left: -14px;
}

/* 右侧栏废墟园林：文字靠右对齐，黑点靠右 */
#mobile-right-drawer .mobile-drawer-title,
#mobile-right-drawer .mobile-list-item {
    text-align: right;
}

    #mobile-right-drawer .mobile-list-item::after {
        right: -14px;
    }
/* =========================================================
   修复：强制在电脑端隐藏所有手机端侧边栏及相关内容
========================================================= */
@media (min-width: 769px) {
    .mobile-side-drawer,
    #mobile-left-drawer,
    #mobile-right-drawer {
        display: none !important;
    }
}
@media (max-width: 768px) and (orientation: portrait) {
    .compass {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
}
@media (max-width: 768px) {
    .attachment-viewer-inner {
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* 改為從上往下排 */
        padding: 0 !important;
        height: 100vh;
        overflow-y: auto; /* 允許垂直滾動 */
        background: rgba(255, 255, 255, 0.95);
    }

    .attachment-sheet {
        position: relative;
        padding: 0;
        display: block;
    }

    /* 影片區域置頂吸附 */
    .attachment-stage {
        position: sticky;
        top: 0;
        width: 100vw;
        height: 56vw; /* 保持大約 16:9 或適合的比例 */
        z-index: 50;
        background: #000;
        margin-bottom: 20px;
    }

    /* 解除原本媒體組件的絕對定位限制 */
    .media-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
    }

    /* 文字資訊區塊 */
    .attachment-meta,
    .attachment-desc {
        padding: 0 20px;
        margin-bottom: 20px;
        position: relative;
        z-index: 10;
    }
}
/* ========================================================
   📱 竖屏手机版特调: Folly Viewer 与 Drawer 终极修复
   ======================================================== */
@media (max-width: 768px) {

    /* ==========================================
     1. 修复 Popup Drawer (精准限制在透视内框中)
     ========================================== */
    .drawer {
        /* 在内框变量的基础上，向内再缩进 8px 的安全距离 */
        top: calc(var(--frame-top) + 8px) !important;
        left: calc(var(--frame-left) + 8px) !important;
        /* 动态计算宽度和高度：100vw/vh 减去两侧框距再减去留白 */
        width: calc(100vw - var(--frame-left) - var(--frame-right) - 16px) !important;
        max-height: calc(var(--vh, 1vh) * 100 - var(--frame-top) - var(--frame-bottom) - 16px) !important;
        box-sizing: border-box !important;
    }

    /* ==========================================
     2. Folly Viewer 网格排版优化 (乐谱与按键)
     ========================================== */
    .view-folly .attachment-sheet,
    .view-folly .attachment-stage {
        display: contents !important;
    }

    .view-folly .attachment-viewer-inner {
        display: grid !important;
        grid-template-columns: 1fr 1.5fr;
        grid-template-rows: auto auto auto auto auto; /* 扩充为 5 行结构 */
        gap: 15px 10px;
        background: #fffffb !important;
        padding: 0 0 50px 0 !important;
        align-items: start;
        height: 100vh !important;
        overflow-y: auto !important;
    }

    /* --- 第 1,2,3 行左侧：元信息、视频、文本 --- */
    .view-folly .attachment-meta {
        grid-column: 1 / -1;
        grid-row: 1;
        margin: 15px 20px 0 20px !important;
    }

    .view-folly .media-wrapper {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100vw !important;
        height: 56vw !important;
        background: #000 !important;
        position: relative !important;
    }

    .view-folly .attachment-desc {
        grid-column: 1;
        grid-row: 3;
        margin: 0 !important;
        padding: 10px 0 0 20px !important;
        font-size: 13px !important;
    }

    /* --- 【核心修复】将 shadow 移出隐藏名单 --- */
    .view-folly .score-header,
    .view-folly .chapter-toggle,
    .view-folly .attachment-divider {
        display: none !important;
    }

    /* --- 第三行右侧：乐谱主体与阴影同处一个 Grid 单元格，完美叠加 --- */
    .view-folly .score-hud,
    .view-folly #score-hud-shadow,
    .view-folly .score-hud-shadow {
        grid-column: 2;
        grid-row: 3;
        position: relative !important;
        width: 75% !important; /* 缩小整体尺寸，留出呼吸空间 */
        max-width: none !important;
        margin: 10px auto 0 !important; /* 居中对齐 */
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    /* 顶层透明本体 */
    .view-folly .score-hud {
        z-index: 2 !important;
        transform: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* 底层实体阴影（恢复原有的硫酸纸交叠质感） */
    .view-folly #score-hud-shadow,
    .view-folly .score-hud-shadow {
        z-index: 1 !important;
        display: flex !important; /* 取消隐藏 */
        transform: translate(-8px, 12px) !important; /* 在手机端等比缩小错位距离 */
    }

    /* --- 第四行：Chapter 按钮缩小并塞入一行 --- */
    .view-folly .video-chapters {
        grid-column: 1 / -1; /* 横跨整列宽度，给按钮留出充足空间 */
        grid-row: 4;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* 【核心】强制不换行 */
        overflow-x: auto !important; /* 如果按钮太多则允许横向微调滑动 */
        justify-content: center !important;
        gap: 4px !important; /* 缩小间距 */
        margin: 10px 20px 0 20px !important;
        padding: 0 0 10px 0 !important;
        background: transparent !important;
        border: none !important;
    }

        .view-folly .chapter-button,
        .view-folly .video-chapters div {
            writing-mode: vertical-rl !important;
            text-orientation: mixed !important;
            padding: 6px 4px !important; /* 缩小内边距 */
            font-size: 11px !important; /* 缩小字号 */
            margin: 0 !important;
            flex-shrink: 0 !important; /* 【核心】防止因为不换行导致字体被严重挤压变形 */
        }

    /* --- 第五行：播放器 UI 控制面板 --- */
    .view-folly .video-ui {
        grid-column: 1 / -1;
        grid-row: 5;
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        margin: 10px 20px 30px 20px !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        background: transparent !important;
        border: none !important;
    }
}
/* ========================================================
   📱 竖屏手机版特调: Folly Viewer 终极修复 (彻底解绑嵌套)
======================================================== */
@media (max-width: 768px) {

    /* 1. 核心魔法：消除 video-ui 和 video-stack 的父级物理包裹限制，
          让内部的章节、控制按钮直接成为 Grid 的自由子元素 */
    .view-folly .video-ui,
    .view-folly .video-stack {
        display: contents !important;
    }

    /* 2. 章节：留在 Grid 网格中，精准对齐到乐谱正下方 */
    .view-folly .video-chapters {
        grid-column: 2 !important; /* 和乐谱 (score-hud) 保持同一列 */
        grid-row: 4 !important; /* 放在乐谱 (Row 3) 的正下方 */
        /* 排版：横向、单行、允许横向滑动 */
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        /* 间距：距离上方乐谱约 10px 间距 */
        margin: 10px 0 0 0 !important;
        padding: 0 0 10px 0 !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important;
    }

        /* 重置章节文字方向，确保是横排显示 */
        .view-folly .chapter-button,
        .view-folly .video-chapters div {
            writing-mode: horizontal-tb !important;
            text-orientation: mixed !important;
            padding: 6px 10px !important;
            font-size: 11px !important;
            white-space: nowrap !important;
            flex-shrink: 0 !important; /* 防止字被挤压换行 */
            margin: 0 !important;
        }

    /* 3. 播放组件：彻底脱离 Grid 限制，固定在屏幕左下角（同 instrument 体验） */
    .view-folly .video-controls {
        position: fixed !important;
        left: 12px !important;
        bottom: 12px !important;
        z-index: 1000000 !important;
        /* 恢复原本被 video-ui 承载的毛玻璃背景和外框样式 */
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        padding: 4px !important;
        background: rgba(0,0,0,0.35) !important;
        border: 1px solid rgba(255,255,255,0.2) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }

    /* 4. 进度条：跟着固定在左下角，并对齐在控制按钮的正上方 */
    .view-folly .video-progress {
        position: fixed !important;
        left: 28px !important; /* 居中对齐底部的按钮 */
        bottom: 100px !important;
        z-index: 1000000 !important;
        margin: 0 !important;
    }

    /* 5. 确保操作提示框不被网格打乱，强制悬浮在右侧 */
    .view-folly .startup-video-manual {
        position: fixed !important;
        top: 50% !important;
        right: 20px !important;
        z-index: 1000000 !important;
    }

    /* ========================================================
   🖼️ 全局附件视图: 完美契合内框 (Fit to box)
======================================================== */
    .attachment-viewer {
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important; /* 防止溢出撑破内框 */
    }

        /* 确保内部的媒体元素也严格遵守 Fit 规则 */
        .attachment-viewer img,
        .attachment-viewer video,
        .attachment-viewer iframe {
            width: 100% !important;
            height: 100% !important;
            max-width: 100% !important;
            max-height: 100% !important;
            object-fit: contain !important; /* 核心：完美内嵌，不裁切，不变形 */
            box-sizing: border-box !important;
        }
}

/* ========================================================
   📱 竖屏专属: Chapters 竖向排布与极限缩小
======================================================== */
@media (max-width: 768px) {
    /* 章节容器：改为竖向列表，限制高度 */
    .view-folly .video-chapters {
        grid-column: 2 !important;
        grid-row: 4 !important;
        /* 排版：竖向堆叠，允许上下滑动 */
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        overflow-y: auto !important; /* 空间不够时允许纵向滚动 */
        overflow-x: hidden !important;
        gap: 4px !important; /* 按钮之间的微小间距 */
        /* 限制最大高度，让它完美塞进“那块小地方” */
        max-height: 120px !important;
        margin: 8px 0 0 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

        /* 章节按钮：极致缩小，适应窄框 */
        .view-folly .chapter-button,
        .view-folly .video-chapters div {
            writing-mode: horizontal-tb !important;
            text-orientation: mixed !important;
            /* 尺寸与字体缩减 */
            padding: 4px 6px !important;
            font-size: 9px !important; /* 缩小字号 */
            line-height: 1.2 !important;
            text-align: center !important;
            /* 允许文字在小按钮内自然换行，防止撑破 */
            white-space: normal !important;
            width: 100% !important;
            box-sizing: border-box !important;
            flex-shrink: 0 !important;
            margin: 0 !important;
        }
}
/* 修复 Safari 伪元素悬停换行 Bug */
.tree-folder,
.tree-file,
.fault-node {
    /* 强制文本不换行，防止 Safari 误判边界 */
    white-space: nowrap;
    /* 确保容器宽度恰好包裹文字，为绝对定位的 '<' 提供稳固的参照边界 */
    width: fit-content;
    /* 补充：让节点保持内联块级特性，避免占用整行宽度导致误触发 hover */
    display: inline-block;
}