* { margin: 0; padding: 0; box-sizing: border-box; cursor: none !important; }
body, html { width: 100%; height: 100%; overflow: hidden; font-family: "STSong", "SimSun", serif; background: #000; color: white; }

#app-stage { position: relative; width: 100vw; height: 100vh; overflow: hidden; background: #000; transition: all 0.3s ease; }
@media (orientation: portrait) {
    #app-stage { overflow-y: auto !important; height: auto; min-height: 100vh; } /* 允许竖屏滚动，避免黑屏 */
    .scene { height: auto; min-height: 100vh; position: relative; } /* 场景自适应高度 */
    .bg-video { object-fit: cover; height: auto; min-height: 100vh; width: 100%; } /* 视频竖屏满宽 */
    .hotspot, .book-spine, .sun-btn, #book-trigger-btn { transform: scale(0.8); pointer-events: auto !important; } /* 缩小元素，避免挤压 */
    .shelf-container { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)) !important; padding: 15px !important; min-height: 100vh; } /* 书架竖屏优化 */
    .speech-bubble, .btn-ui { transform: scale(0.8); } /* 弹窗/按钮缩小 */
    .entry-title { font-size: 40px; } /* 标题缩小 */
    .universal-container { height: 60vh; } /* 阅读器适配 */
}

#cursor-dot, #cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99999; border-radius: 50%; }
#cursor-dot { width: 8px; height: 8px; background: #d500f9; box-shadow: 0 0 10px #d500f9; }
#cursor-ring { width: 40px; height: 40px; border: 1px solid rgba(213, 0, 249, 0.6); transition: width 0.2s, height 0.2s, background 0.2s, transform 0.08s; transform: translate(-50%, -50%); mix-blend-mode: screen; }
@media (pointer: coarse) { #cursor-dot, #cursor-ring { display: none !important; } * { cursor: auto !important; } .hotspot, .entry-btn, .sun-btn, #book-trigger-btn { cursor: pointer !important; } }

#entry-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20000; background: url('TP/000.webp') no-repeat center center; background-size: cover; }
.entry-title { position: absolute; top: 10%; left: 10%; writing-mode: vertical-rl; font-size: 60px; color: gold; letter-spacing: 15px; font-weight: bold; text-shadow: 0 0 30px #d35400, 0 0 60px #ffd700; z-index: 5; font-family: "LiSu", serif; }

.sun-btn {
    position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%);
    width: 130px; height: 130px; background: url('TP/sun_btn.webp') no-repeat center center; background-size: contain;
    mix-blend-mode: screen; cursor: pointer; z-index: 10; animation: sunPulse 3s infinite ease-in-out;
}
.sun-btn::after {
    content: ''; position: absolute; top: -20%; left: -20%; width: 140%; height: 140%;
    border-radius: 50%; border: 2px dashed rgba(255,215,0,0.6); animation: rotateRing 10s linear infinite; pointer-events: none;
}
.sun-btn:hover { transform: translate(-50%, -50%) scale(1.1); filter: brightness(1.3); }
@keyframes rotateRing { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sunPulse { 0%, 100% { opacity: 0.9; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } }

.gold-particle { position: absolute; border-radius: 50%; pointer-events: none; background: #ffd700; box-shadow: 0 0 10px #ffd700; opacity: 0; animation: floatGold 8s infinite linear; }
@keyframes floatGold { 0% { transform: translateY(100px) scale(0.5); opacity: 0; } 20% { opacity: 0.8; } 80% { opacity: 0.8; } 100% { transform: translateY(-100px) scale(1.2); opacity: 0; } }

.whiteout-exit { animation: whiteout 1.5s cubic-bezier(0.6, 0, 0.4, 1) forwards; pointer-events: none; }
@keyframes whiteout { 0% { filter: brightness(1); opacity: 1; transform: scale(1); } 100% { filter: brightness(20); opacity: 0; transform: scale(1.5); } }

.scene-container { width: 100%; height: 100%; position: relative; overflow: hidden; perspective: 1000px; }
.scene {
    width: 100%; height: 100%; position: absolute; top: 0; left: 0;
    opacity: 0; visibility: hidden; transition: opacity 0.8s ease; z-index: 1;
}
.active-scene { opacity: 1 !important; visibility: visible !important; z-index: 10; }

.bg-video { width: 100%; height: 100%; object-fit: fill; z-index: 0; pointer-events: none; background: #000; }
#scene1 { background: url('TP/001.webp') no-repeat center center; background-size: 100% 100%; }
#scene2 { background: url('TP/003.webp') no-repeat center center; background-size: 100% 100%; }
#scene3 { background: url('TP/006.webp') no-repeat center center; background-size: 100% 100%; }
#scene4 { background: url('TP/007.webp') no-repeat center center; background-size: 100% 100%; }

.hotspot { position: absolute; cursor: none; z-index: 999; border: 1px solid transparent; }
.hotspot:hover { border: 1px solid rgba(213, 0, 249, 0.6); background: rgba(213, 0, 249, 0.05); }

.hint-dot { position: absolute; width: 16px; height: 16px; background: rgba(213, 0, 249, 0.9); border-radius: 50%; pointer-events: none; z-index: 20; box-shadow: 0 0 20px #d500f9; animation: pulsePurple 2s infinite; }
@keyframes pulsePurple { 0% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.6); opacity: 0.4; } 100% { transform: scale(1); opacity: 0.9; } }

.speech-bubble { 
    position: absolute; background: rgba(255,255,255,0.95); padding: 25px; 
    border-radius: 15px; color: #333; font-size: 20px; font-weight: bold; line-height: 1.6;
    display: none; z-index: 2000; box-shadow: 0 10px 40px rgba(0,0,0,0.6); min-width: 250px;
}

.zoom-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 100% 100%; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; z-index: 1500; }
.zoom-active { opacity: 1 !important; pointer-events: auto !important; }

#lady-video-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 1600; }
#lady-video { width: 100%; height: 100%; object-fit: fill; }
#lady-static-layer { position: absolute; top:0; left:0; width:100%; height:100%; background: url('TP/004.webp') no-repeat center center; background-size: 100% 100%; opacity: 0; transition: opacity 0.8s; pointer-events: none; }
#desk-static-layer { position: absolute; top:0; left:0; width:100%; height:100%; background: url('TP/005.webp') no-repeat center center; background-size: 100% 100%; display: none; }
#desk-app-hotspot {
    position: absolute;
    left: 48%;
    top: 36%;
    width: 20%;
    height: 19%;
    transform: translateX(-50%);
    display: none;
    z-index: 1700;
    background: transparent;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
}

#desk-screen-glow {
    position: absolute;
    left: 48%;
    top: 43%;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 140, 255, 0.95) 0%, rgba(255, 80, 255, 0.2) 70%);
    box-shadow: 0 0 12px rgba(255, 153, 255, 0.95), 0 0 30px rgba(255, 102, 255, 0.75);
    opacity: 0;
    pointer-events: none;
    animation: pulseGlow 1.6s ease-in-out infinite;
    transform: translate(-50%, -50%);
    display: none;
}
#desk-screen-glow::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    border: 2px solid rgba(255, 120, 255, 0.55);
    opacity: 0;
    animation: pulseGlowRing 1.6s ease-out infinite;
}

@keyframes pulseGlow {
    0% {
        transform: translate(-50%, -50%) scale(0.55);
        opacity: 0.45;
        box-shadow: 0 0 10px rgba(255, 153, 255, 0.7), 0 0 24px rgba(255, 102, 255, 0.5);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
        box-shadow: 0 0 18px rgba(255, 153, 255, 1), 0 0 36px rgba(255, 102, 255, 0.8);
    }
    100% {
        transform: translate(-50%, -50%) scale(0.75);
        opacity: 0.55;
    }
}

@keyframes pulseGlowRing {
    0% {
        transform: scale(0.6);
        opacity: 0.15;
    }
    70% {
        transform: scale(1.4);
        opacity: 0.45;
    }
    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}
#jewelHover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: auto 65%; background-position: center; background-repeat: no-repeat; background-color: rgba(0,0,0,0.7); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; z-index: 40; }

.btn-ui { position: absolute; top: 25px; left: 25px; z-index: 2000; padding: 12px 25px; font-size: 16px; background: rgba(0,0,0,0.8); color: white; border: 1px solid #fff; border-radius: 30px; cursor: none; transition: 0.3s; }
.btn-zoom-back { background: #8b0000; border-color: gold; }
.desk-app-close { left: 25px; top: 25px; z-index: 6100; }

.btn-admin { display: none; } 
.btn-scan { left: auto; right: 25px; background: #27ae60; border: none; }
.btn-export { left: auto; right: 150px; background: #2980b9; border: none; }
.btn-import { left: auto; right: 280px; background: #8e44ad; border: none; }
.btn-unsaved { background: #c0392b !important; animation: pulseRed 0.5s infinite alternate; }
@keyframes pulseRed { from { transform: scale(1); } to { transform: scale(1.1); box-shadow: 0 0 15px red; } }

/* 🚀 魔法书本开关 */
#book-trigger-btn {
    position: absolute; bottom: 8%; right: 8%;
    width: 280px; height: 280px; cursor: pointer; z-index: 800;
    background: url('TP/books_btn.webp') no-repeat center center;
    background-size: contain;
    animation: floatBook 4s infinite ease-in-out;
    transition: 0.3s; filter: drop-shadow(0 5px 25px rgba(0,0,0,0.6));
}
#book-trigger-btn:hover { transform: scale(1.1); filter: brightness(1.2) drop-shadow(0 0 35px gold); }
@keyframes floatBook { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

/* 🚀 书架 UI */
#shelf-ui-content { 
    display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    z-index: 999999; background: rgba(0,0,0,0.5); 
}

.shelf-nav { position: absolute; top: 25px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; gap: 20px; background: rgba(0,0,0,0.8); padding: 10px 30px; border-radius: 50px; border: 1px solid gold; user-select: none; }
.nav-tab { padding: 5px 15px; border-radius: 20px; color: #aaa; transition: 0.3s; cursor: none; font-size: 16px; }
.nav-tab.active { color: #000; background: gold; font-weight: bold; }
.search-box-container { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); z-index: 100; width: 350px; }
#libSearch { width: 100%; padding: 12px; border-radius: 25px; border: 1px solid #555; background: rgba(0, 0, 0, 0.7); color: gold; outline: none; text-align: center; font-size: 16px; transition: 0.3s; }
#libSearch:focus { border-color: gold; box-shadow: 0 0 15px rgba(255,215,0,0.3); background: #000; }
        
.shelf-container {
    position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); width: 92%; height: 65vh !important; /* 固定稍小高度，强制滚动条出现 */
    background: #2b1b17;
    background-image: repeating-linear-gradient(0deg, #1a0f0a 0px, #1a0f0a 4px, transparent 4px, transparent 200px), linear-gradient(90deg, rgba(0,0,0,0.5), transparent 10%, transparent 90%, rgba(0,0,0,0.5));
    border: 15px solid #1a0f0a; border-radius: 6px; padding: 40px 30px; 
    display: grid; grid-template-columns: repeat(auto-fill, minmax(45px, 1fr)); 
    gap: 10px; row-gap: 40px; overflow-y: scroll !important; /* 强制显示滚动条 */
    z-index: 30; box-shadow: inset 0 0 100px #000;
}

.book-spine { height: 190px; border-radius: 3px 6px 6px 3px; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; position: relative; box-shadow: inset 5px 0 5px rgba(255,255,255,0.15); margin-top: auto; cursor: pointer; transition: 0.1s; }
.book-spine.spotlight { transform: scale(1.1); z-index: 100; box-shadow: 0 0 20px gold; border: 1px solid gold; }
.book-spine.dimmed { opacity: 0.2; filter: grayscale(100%); }
.spine-text { writing-mode: vertical-rl; text-orientation: mixed; font-size: 11px; font-family: "Times New Roman", serif; letter-spacing: 2px; color: #e0c38c; pointer-events: none; max-height: 90%; overflow: hidden; }
        
#color-palette { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.9); border: 1px solid gold; padding: 10px; border-radius: 50px; display: none; gap: 10px; z-index: 500; }
.palette-swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid #555; }
.palette-swatch:hover, .palette-swatch.active { transform: scale(1.2); border-color: gold; }
.palette-close { width: 30px; height: 30px; border-radius: 50%; background: #333; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; cursor: pointer; }
        
#book-animation-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2500; perspective: 1500px; }
.flying-book { position: absolute; width: 50px; height: 200px; transform-style: preserve-3d; transition: all 1.2s; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.flying-book.centered { top: 50% !important; left: 50% !important; width: 300px !important; height: 400px !important; transform: translate(-50%, -50%); }
.fb-cover { position: absolute; width: 100%; height: 100%; background: inherit; border-radius: 4px; transform-origin: left; transition: 0.8s ease 0.6s; z-index: 2; border: 2px solid gold; backface-visibility: hidden; display:flex; justify-content:center; align-items:center; }
.flying-book.open .fb-cover { transform: rotateY(-135deg); }
.fb-pages { position: absolute; top: 2px; left: 2px; width: 98%; height: 98%; background: #fdf5e6; z-index: 1; }
.fb-title { color: white; font-size: 24px; font-weight: bold; writing-mode: vertical-rl; display: flex; justify-content: center; align-items: center; height: 100%; }

  /* 弹窗修正 */

#desk-app-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    display: none;
    z-index: 6000;
}
#desk-app-frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: #000;
}
  #reader-modal, #qrModal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 4000; justify-content: center; align-items: center; flex-direction: column; }
  /* 🌟 二维码修正：允许弹窗自适应 */
  #qrModal div {
      background: white; padding: 20px; border-radius: 15px; 
      text-align: center; max-width: 95%; max-height: 90vh;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  #qrModal img { 
      max-height: 60vh; 
      max-width: 100%; object-fit: contain; 
      display: block; margin-bottom: 15px;
  }

  .universal-container { position: relative; width: 90%; max-width: 1000px; height: 75vh; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 0 50px rgba(255,215,0,0.3); }
  iframe, video, img { width: 100%; height: 100%; border: none; display: block; object-fit: contain; }
  #book-tooltip { position: fixed; pointer-events: none; z-index: 3000; background: rgba(0,0,0,0.9); color: gold; border: 1px solid gold; padding: 6px 12px; border-radius: 4px; font-size: 14px; display: none; transform: translate(-50%, -120%); box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
  
  #preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 50000; display: flex; justify-content: center; align-items: center; flex-direction: column; transition: opacity 0.8s ease; }
  .loader-text { color: gold; font-size: 24px; letter-spacing: 5px; margin-bottom: 20px; }
  .loader-spinner { width: 50px; height: 50px; border: 3px solid rgba(213,0,249,0.2); border-top: 3px solid #d500f9; border-radius: 50%; animation: spin 1s linear infinite; }
  
  footer.seo-footer { position: fixed; bottom: 0; width: 100%; text-align: center; z-index: 0; pointer-events: none; opacity: 0.1; font-size: 10px; }
  footer.seo-footer a { color: #fff; text-decoration: none; }

  #orientation-guard { 
      display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.95); 
      z-index: 999999; color: gold; font-size: 24px; text-align: center; 
      justify-content: center; align-items: center; padding: 20px; 
  }
  @media (orientation: portrait) { #orientation-guard { display: flex !important; } }

/* 备案容器 - 固定右下角，层级最高 */
.beian-container {
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px; /* ICP和公安备案之间的间距 */
}

/* ICP备案样式 - 匹配页面金色风格 */
.icp-beian {
  font-size: 12px;
  color: rgba(255, 215, 0, 0.8); /* 半透金色 */
  text-decoration: none;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.6); /* 半透黑底，不遮挡背景 */
  border-radius: 3px;
  transition: all 0.3s ease;
  /* 新增：确保ICP备案链接是行内块，不换行 */
  display: inline-flex;
  align-items: center;
}

/* 公安备案样式 - 核心修复 */
.police-beian {
  font-size: 12px;
  color: rgba(255, 215, 0, 0.8);
  text-decoration: none;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 3px;
  transition: all 0.3s ease;
  /* 关键修复1：强制横向排列，且不换行 */
  display: inline-flex !important; 
  /* 关键修复2：垂直居中对齐图标和文字 */
  align-items: center !important; 
  /* 关键修复3：固定图标和文字间距，防止挤在一起 */
  gap: 4px !important; 
  /* 关键修复4：禁止文字换行 */
  white-space: nowrap !important;
}

/* 公安备案图标样式 - 核心修复 */
.police-icon-img {
  width: 16px;   /* 图标宽度 */
  height: 16px;  /* 图标高度，和宽度一致避免变形 */
  object-fit: contain; /* 保持图标比例 */
  /* 关键修复：强制图标为行内块，不独占一行 */
  display: inline-block !important;
  /* 可选：防止图标被挤压 */
  flex-shrink: 0;
}

/* 悬浮效果 - 增强交互 */
.icp-beian:hover, .police-beian:hover {
  color: gold; /* 高亮金色 */
  background: rgba(0, 0, 0, 0.8);
}