/* ========================================================
   「野迹」WildTrack · 顶尖移动端自然博物 App 专属设计系统
   设计语言：Cyber-Naturalist (赛博博物学) + iOS 26 仿生流体美学
   ======================================================== */

:root {
  --bg-deep: #080c09;
  --bg-surface: #0f1611;
  --bg-card: rgba(18, 26, 20, 0.75);
  --bg-card-hover: rgba(26, 38, 29, 0.85);
  --border-subtle: rgba(74, 222, 128, 0.12);
  --border-glow: rgba(74, 222, 128, 0.35);
  --neon-emerald: #10b981;
  --neon-mint: #34d399;
  --neon-lime: #a3e635;
  --neon-gold: #f59e0b;
  --neon-amber: #fbbf24;
  --text-primary: #f0fdf4;
  --text-secondary: #a7f3d0;
  --text-muted: #6ee7b7;
  --text-dim: #4b6354;
  --spring-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --spring-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 移动端全屏无边框与防橡皮筋拉拽 + 动态视口高度适配 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  min-height: -webkit-fill-available;
  background-color: var(--bg-deep);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

/* ========================================================
   移动端安全区域适配 (Safe Area Insets: 避开刘海/灵动岛/底部横条)
   ======================================================== */
.safe-top {
  padding-top: max(1rem, env(safe-area-inset-top, 1rem)) !important;
}

.safe-bottom {
  padding-bottom: max(2.5rem, calc(env(safe-area-inset-bottom, 0px) + 2rem)) !important;
}

.safe-scroll-bottom {
  padding-bottom: max(9.5rem, calc(env(safe-area-inset-bottom, 0px) + 8.5rem)) !important;
}

.safe-modal-bottom {
  padding-bottom: max(2rem, calc(env(safe-area-inset-bottom, 0px) + 1.5rem)) !important;
}

.bottom-nav-pill {
  bottom: max(1.25rem, calc(env(safe-area-inset-bottom, 0px) + 0.8rem)) !important;
}

/* 顶级毛玻璃拟态容器 */
.glass-panel {
  background: rgba(14, 22, 16, 0.72);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(74, 222, 128, 0.15);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.6);
}

.glass-pill {
  background: rgba(22, 34, 25, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(74, 222, 128, 0.2);
}

/* 自然博物探险微纸纹底色 */
.bg-naturalist-canvas {
  background-color: #090e0a;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 100% 60%, rgba(245, 158, 11, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(52, 211, 153, 0.08) 0%, transparent 50%);
}

/* 全息卡牌反射渐变与发光边框 */
.hologram-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(20, 32, 24, 0.9) 0%, rgba(10, 16, 12, 0.95) 100%);
  border: 1px solid rgba(74, 222, 128, 0.25);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 0.3s var(--spring-smooth), box-shadow 0.3s ease;
}

.hologram-card:active {
  transform: scale(0.97);
}

.hologram-card::after {
  content: '';
  position: absolute;
  inset: -100%;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.08) 40%, rgba(74, 222, 128, 0.12) 50%, transparent 70%);
  transform: rotate(25deg);
  pointer-events: none;
  transition: opacity 0.5s ease;
  opacity: 0.6;
}

/* 声波音浪微动画 (模拟鸟叫鸣声播放) */
@keyframes waveGrow {
  0%, 100% { height: 4px; }
  50% { height: 16px; }
}

.soundwave-bar {
  width: 3px;
  background: #34d399;
  border-radius: 2px;
  animation: waveGrow 1.2s ease-in-out infinite;
}
.soundwave-bar:nth-child(2) { animation-delay: 0.2s; }
.soundwave-bar:nth-child(3) { animation-delay: 0.4s; }
.soundwave-bar:nth-child(4) { animation-delay: 0.1s; }
.soundwave-bar:nth-child(5) { animation-delay: 0.3s; }

/* 赛博声呐雷达扫描 */
@keyframes radarSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.sonar-sweep-beam {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 70%, rgba(16, 185, 129, 0.35) 100%);
  animation: radarSweep 4s linear infinite;
}

/* 声呐探测目标微点闪烁 */
@keyframes sonarBlip {
  0% { transform: scale(0.8); opacity: 0.3; }
  50% { transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 8px #10b981); }
  100% { transform: scale(0.8); opacity: 0.3; }
}

.sonar-blip {
  animation: sonarBlip 2.2s ease-in-out infinite;
}

/* 相机对焦框专业 HUD 动画 */
@keyframes hudReticleBreathe {
  0% { transform: scale(1); opacity: 0.85; filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.4)); }
  50% { transform: scale(1.05); opacity: 1; filter: drop-shadow(0 0 16px rgba(52, 211, 153, 0.8)); }
  100% { transform: scale(1); opacity: 0.85; filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.4)); }
}

.hud-focus-reticle {
  animation: hudReticleBreathe 2.5s ease-in-out infinite;
}

/* 激光水平扫描线 */
@keyframes laserScan {
  0% { top: 6%; opacity: 0.2; }
  50% { top: 92%; opacity: 0.95; }
  100% { top: 6%; opacity: 0.2; }
}

.hud-laser-line {
  position: absolute;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #34d399, #a3e635, transparent);
  box-shadow: 0 0 14px #34d399;
  animation: laserScan 2.4s ease-in-out infinite;
}

/* 物理快门震动与机械快门叶片光圈动效 */
@keyframes shutterFlash {
  0% { opacity: 0; }
  40% { opacity: 0.85; }
  100% { opacity: 0; }
}

.shutter-flash-overlay {
  animation: shutterFlash 0.3s ease-out forwards;
}

/* 拍立得相纸复古风格卡片 */
.polaroid-card {
  background: #fbfbfa;
  color: #1c1917;
  border-radius: 8px 8px 12px 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s var(--spring-smooth);
}

.polaroid-card:active {
  transform: scale(0.98) rotate(0deg) !important;
}

/* 和纸胶带贴纸质感 */
.washi-tape {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 20px;
  background: rgba(245, 158, 11, 0.45);
  backdrop-filter: blur(2px);
  border-left: 2px dashed rgba(255, 255, 255, 0.4);
  border-right: 2px dashed rgba(255, 255, 255, 0.4);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 博物学家火漆金色印章重重盖下 */
@keyframes waxStampThud {
  0% { transform: scale(3.5) rotate(-35deg); opacity: 0; filter: blur(4px); }
  50% { transform: scale(0.92) rotate(-8deg); opacity: 1; filter: blur(0); }
  75% { transform: scale(1.05) rotate(-10deg); }
  100% { transform: scale(1) rotate(-9deg); opacity: 1; }
}

.wax-stamp-anim {
  animation: waxStampThud 0.48s var(--spring-bounce) forwards;
}

/* 屏幕震颤动效 (盖章瞬间震感) */
@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  20%, 60% { transform: translate(-3px, 2px); }
  40%, 80% { transform: translate(3px, -2px); }
}

.screen-shake-anim {
  animation: screenShake 0.25s ease-in-out;
}

/* 浮动胶囊底栏与指示器平滑滑移 */
.bottom-nav-pill {
  box-shadow: 0 16px 40px -6px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(74, 222, 128, 0.15);
}

/* 未探明生物黑金神秘剪影 */
.undiscovered-silhouette {
  filter: brightness(0) invert(0.12) opacity(0.65) drop-shadow(0 0 1px rgba(255, 255, 255, 0.1));
}

/* 自定义无边滚动条 */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }