@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700&display=swap');
    
    :root {
      --font-stack: 'Rajdhani', 'Orbitron', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    }
    
    body {
      font-family: var(--font-stack);
      background-color: #020617;
      color: #f8fafc;
      overflow: hidden;
      touch-action: manipulation;
      overscroll-behavior-y: none;
      -webkit-overflow-scrolling: touch;
      -webkit-tap-highlight-color: transparent;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      min-height: 100dvh; /* 鍔ㄦ€佽鍙ｉ珮搴︼紝閫傞厤iOS閿洏 */
    }

    /* iOS 閿洏寮瑰嚭鏃剁殑瑙嗗彛璋冩暣 */
    @supports (height: 100dvh) {
      body {
        height: 100dvh;
      }
    }

    /* Full-screen background with overlay */
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url('https://images.unsplash.com/photo-1514565131-fce0801e5785?w=1920&q=80');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: -2;
    }

    /* Fallback gradient background if image fails to load */
    body.bg-fallback::before {
      background: linear-gradient(
        135deg,
        #0a0e1a 0%,
        #0f172a 15%,
        #134e4a 30%,
        #1e3a3a 45%,
        #1e293b 60%,
        #0f172a 80%,
        #0a0e1a 100%
      );
      animation: gradientShift 15s ease-in-out infinite alternate;
    }
    
    @keyframes gradientShift {
      0% {
        filter: hue-rotate(0deg) brightness(1);
      }
      100% {
        filter: hue-rotate(15deg) brightness(1.1);
      }
    }

    /* Dark overlay for readability */
    body::after {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        to bottom,
        rgba(2, 6, 23, 0.92) 0%,
        rgba(2, 6, 23, 0.88) 50%,
        rgba(2, 6, 23, 0.95) 100%
      );
      z-index: -1;
    }

    /* Desktop phone container constraint */
    #app {
      position: relative;
      width: 100%;
      height: 100dvh;
      max-width: 100%;
      max-height: 100%;
      margin: 0 auto;
      padding-bottom: env(safe-area-inset-bottom);
    }

    /* Desktop viewing mode: phone container simulation */
    @media (min-width: 501px) {
      #app {
        max-width: 430px;
        height: 932px;
        max-height: 95vh;
        border-radius: 40px;
        box-shadow: 
          0 0 0 1px rgba(255, 255, 255, 0.1),
          0 0 60px rgba(0, 0, 0, 0.5),
          0 20px 80px rgba(0, 0, 0, 0.4);
        overflow: hidden;
      }
    }

    /* Typography System - Cyberpunk/Tech (EN) + Modern Readable (CN) */
    .typo-h1 {
      font-size: 1.875rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    @media (min-width: 768px) {
      .typo-h1 { font-size: 2.25rem; }
    }
    
    .typo-h2 {
      font-size: 1.25rem;
      font-weight: 600;
      color: #22d3ee;
    }
    @media (min-width: 768px) {
      .typo-h2 { font-size: 1.5rem; }
    }
    
    .typo-body {
      font-size: 1rem;
      line-height: 1.625;
      color: #cbd5e1;
      font-weight: 300;
    }
    
    .typo-label {
      font-size: 0.875rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    
    /* Chinese: tighter tracking for dense characters */
    .lang-cn .typo-h1,
    .lang-cn .typo-h2 {
      letter-spacing: 0.02em;
    }
    
    /* English: wider tracking for headers */
    .lang-en .typo-h1,
    .lang-en .typo-h2 {
      letter-spacing: 0.05em;
    }
    
    /* Story narrative: relaxed leading for Chinese density */
    .font-story {
      font-family: var(--font-stack);
      line-height: 1.625;
    }

    h1, h2, h3 {
      font-family: var(--font-stack);
    }

    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    /* Modal custom scrollbar - emerald cyberpunk style */
    .modal-scroll {
      scrollbar-width: thin;
      scrollbar-color: rgba(16, 185, 129, 0.5) transparent;
    }
    .modal-scroll::-webkit-scrollbar {
      width: 4px;
    }
    .modal-scroll::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 99px;
    }
    .modal-scroll::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, rgba(16,185,129,0.6) 0%, rgba(20,184,166,0.4) 100%);
      border-radius: 99px;
      border: none;
    }
    .modal-scroll::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, rgba(16,185,129,0.9) 0%, rgba(20,184,166,0.7) 100%);
    }

    /* Unified Page Transition - Fast & Smooth */
    .fade-enter-active {
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .fade-leave-active {
      transition: opacity 0.25s cubic-bezier(0.4, 0, 1, 1);
    }
    .fade-enter-from,
    .fade-leave-to {
      opacity: 0;
    }

    @keyframes floatOrb {
      0%, 100% { transform: translateY(0px) scale(1); opacity: 0.9; }
      50% { transform: translateY(-16px) scale(1.05); opacity: 1; }
    }

    @keyframes fadeUpSoft {
      0% { opacity: 0; transform: translateY(12px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    @keyframes loadingProgress {
      0% { width: 0%; }
      100% { width: 100%; }
    }

    .loading-progress {
      width: 0%;
      animation: loadingProgress 2.5s ease-in-out forwards;
    }

    .loading-orb {
      position: absolute;
      border-radius: 9999px;
      filter: blur(10px);
      opacity: 0.75;
      mix-blend-mode: screen;
      animation: floatOrb 9s ease-in-out infinite;
    }

    .loading-title {
      animation: fadeUpSoft 1.2s ease-out forwards;
    }

    .loading-subtitle {
      animation: fadeUpSoft 1.4s ease-out forwards;
      animation-delay: 0.1s;
    }

    @keyframes staggerUp {
      0% { opacity: 0; transform: translateY(18px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    @keyframes neonGlow {
      0%, 100% { 
        box-shadow: 0 0 30px rgba(16,185,129,0.6), inset 0 0 20px rgba(16,185,129,0.15), 0 0 10px rgba(16,185,129,0.4);
      }
      50% { 
        box-shadow: 0 0 50px rgba(16,185,129,0.9), inset 0 0 30px rgba(16,185,129,0.25), 0 0 15px rgba(16,185,129,0.6);
      }
    }

    @keyframes scanline {
      0% { transform: translateY(-100%); }
      100% { transform: translateY(100%); }
    }

    @keyframes breathingGlow {
      0%, 100% { 
        box-shadow: 0 0 20px rgba(16,185,129,0.4), inset 0 0 15px rgba(16,185,129,0.1);
        border-color: rgba(16,185,129,0.5);
      }
      50% { 
        box-shadow: 0 0 35px rgba(16,185,129,0.7), inset 0 0 25px rgba(16,185,129,0.2);
        border-color: rgba(16,185,129,0.8);
      }
    }

    @keyframes pulseArrow {
      0%, 100% { 
        transform: scale(1);
        opacity: 1;
      }
      50% { 
        transform: scale(1.2);
        opacity: 0.8;
      }
    }

    @keyframes floatGift {
      0%, 100% { 
        transform: translateY(0px) rotate(0deg);
      }
      50% { 
        transform: translateY(-20px) rotate(5deg);
      }
    }

    @keyframes scanlineMove {
      0% { top: -100%; }
      100% { top: 100%; }
    }

    .guide-pulse {
      animation: pulseArrow 1.5s ease-in-out infinite;
    }

    .glassmorphism {
      background: rgba(15, 23, 42, 0.7);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(148, 163, 184, 0.2);
    }

    .glassmorphism-dark {
      background: rgba(2, 6, 23, 0.85);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(16, 185, 129, 0.3);
    }

    .qr-scanner {
      position: relative;
      overflow: hidden;
    }

    .qr-scanner::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(16,185,129,0.8), transparent);
      animation: scanlineMove 2s linear infinite;
      box-shadow: 0 0 10px rgba(16,185,129,0.6);
    }

    .stagger-1 { animation: staggerUp 0.55s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards; animation-delay: 0.05s; opacity: 0; }
    .stagger-2 { animation: staggerUp 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards; animation-delay: 0.12s; opacity: 0; }
    .stagger-3 { animation: staggerUp 0.65s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards; animation-delay: 0.18s; opacity: 0; }
    .stagger-4 { animation: staggerUp 0.7s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards; animation-delay: 0.24s; opacity: 0; }

    .perspective-1000 { perspective: 1000px; }
    .rotate-y-180 { transform: rotateY(180deg); }
    .transform-style-3d { transform-style: preserve-3d; }
    .backface-hidden { backface-visibility: hidden; }

    /* Perspective for 3D transforms */
    .perspective-1000 {
      perspective: 1000px;
    }

    /* Tactical Dashboard - Checklist Row Styles */
    .checklist-row {
      position: relative;
      overflow: hidden;
      -webkit-tap-highlight-color: transparent;
    }
    
    .checklist-row::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 3px;
      height: 100%;
      background: linear-gradient(180deg, rgba(16, 185, 129, 0.8), rgba(5, 150, 105, 0.6));
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .checklist-row:hover::before,
    .checklist-row:active::before {
      opacity: 1;
    }
    
    /* Ripple effect on tap */
    .checklist-row::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(16, 185, 129, 0.3);
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
      pointer-events: none;
    }
    
    .checklist-row:active::after {
      width: 200%;
      height: 200%;
    }
    
    /* Smooth icon scale on check */
    @keyframes iconPop {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
      }
    }
    
    .checklist-row:active .shrink-0:first-child {
      animation: iconPop 0.3s ease-out;
    }

    select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2310b981' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.75rem center;
      background-size: 12px;
      appearance: none;
      padding-right: 2.5rem;
    }
    
    select option {
      background-color: #1e293b;
      color: #a7f3d0;
    }

    /* Mobile Input Fix: Prevent iOS auto-zoom */
    input, select, textarea {
      font-size: 16px !important;
    }

    /* Loading fade-out transition - Smooth & No Bounce */
    @keyframes curtainReveal {
      0% { 
        opacity: 1;
        transform: scale(1);
      }
      100% { 
        opacity: 0;
        transform: scale(1.05);
      }
    }

    .loading-fade-out {
      animation: curtainReveal 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
    }

    /* Flip card hint animation */
    @keyframes tapHint {
      0%, 100% {
        transform: translateY(0px);
        opacity: 1;
      }
      50% {
        transform: translateY(-8px);
        opacity: 0.6;
      }
    }

    .tap-hint {
      animation: tapHint 1.5s ease-in-out infinite;
    }

    /* Auto-fade out after first interaction */
    .tap-hint.faded {
      animation: none;
      opacity: 0;
      transition: opacity 0.3s ease-out;
    }

    /* Highlight keywords in survival tips */
    .highlight-key {
      color: #6ee7b7;
      font-weight: 700;
    }

    /* Better text spacing for readability (Optimized) */
    .text-relaxed {
      line-height: 1.65;
      letter-spacing: 0.01em;
    }

    .text-loose {
      line-height: 1.8;
      letter-spacing: 0.015em;
    }
    
    /* Enhanced Typography */
    h1, h2, h3 {
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    p, span, div {
      text-rendering: optimizeSpeed;
    }

    /* Mobile-First: Prevent content from being hidden by system UI */
    @supports (padding: max(0px)) {
      .safe-content {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-top: max(0.75rem, env(safe-area-inset-top));
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
      }
    }

    /* Scroll container optimization for mobile */
    .mobile-scroll-container {
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
    }

    /* Safe area support for iOS */
    .safe-bottom {
      padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }

    .safe-bottom-fixed {
      padding-bottom: env(safe-area-inset-bottom);
    }

    /* Journey-specific safe area for action buttons */
    .pb-safe-journey {
      padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    }

    /* Ensure touch targets are at least 44x44 (Apple HIG) */
    button {
      min-height: 44px;
      -webkit-tap-highlight-color: transparent;
    }

    /* Prevent system gestures from interfering with bottom buttons */
    .bottom-action-area {
      padding-bottom: max(1rem, env(safe-area-inset-bottom));
      margin-bottom: env(safe-area-inset-bottom);
    }

    /* iOS 杈撳叆妗嗕紭鍖?*/
    input, textarea, select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      font-size: 16px; /* 闃叉 iOS 鑷姩缂╂斁 */
    }

    /* 3D Coverflow Carousel Styles */
    .carousel-container {
      perspective: 1200px;
      position: relative;
      overflow: hidden;
    }

    .carousel-track {
      display: flex;
      transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transform-style: preserve-3d;
    }

    .carousel-card {
      flex-shrink: 0;
      transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transform-style: preserve-3d;
    }

    .carousel-card.side {
      transform: scale(0.8) translateZ(-100px);
      opacity: 0.5;
      filter: brightness(0.6);
    }

    .carousel-card.center {
      transform: scale(1) translateZ(0px);
      opacity: 1;
      filter: brightness(1);
      z-index: 10;
    }

    /* Holographic Character Showcase Styles */
    .companion-hero-image {
      filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.5));
      animation: gentleFloat 8s ease-in-out infinite;
    }

    .companion-emoji-fallback {
      filter: drop-shadow(0 10px 30px rgba(16, 185, 129, 0.4));
      animation: gentleFloat 6s ease-in-out infinite;
    }

    @keyframes gentleFloat {
      0%, 100% { 
        transform: translateY(0px) scale(1); 
      }
      50% { 
        transform: translateY(-15px) scale(1.02); 
      }
    }
    
    @keyframes float {
      0%, 100% { 
        transform: translateY(0px); 
      }
      50% { 
        transform: translateY(-20px); 
      }
    }

    /* Holographic Scanline Overlay Effect - Enhanced */
    .holographic-scanline {
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        rgba(16, 185, 129, 0.025) 0px,
        rgba(16, 185, 129, 0.025) 1px,
        transparent 1px,
        transparent 3px
      );
      pointer-events: none;
      opacity: 0.6;
      z-index: 5;
      animation: scanline-move 8s linear infinite;
    }

    @keyframes scanline-move {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(20px);
      }
    }

    /* Holographic Corner Brackets */
    .holo-brackets {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 10;
    }

    .holo-brackets::before,
    .holo-brackets::after {
      content: '';
      position: absolute;
      width: 40px;
      height: 40px;
      border: 2px solid rgba(16, 185, 129, 0.5);
    }

    .holo-brackets::before {
      top: 24px;
      left: 24px;
      border-right: none;
      border-bottom: none;
      animation: bracketPulse 3s ease-in-out infinite;
    }

    .holo-brackets::after {
      bottom: 24px;
      right: 24px;
      border-left: none;
      border-top: none;
      animation: bracketPulse 3s ease-in-out infinite 1.5s;
    }
    
    @keyframes bracketPulse {
      0%, 100% {
        opacity: 0.5;
        transform: scale(1);
      }
      50% {
        opacity: 0.8;
        transform: scale(1.05);
      }
    }

    /* Hero Slide Transition - SIGNAL GLITCH EFFECT (信号刺啦切换) */
    .hero-slide-enter-active {
      animation: signal-glitch-in 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .hero-slide-leave-active {
      animation: signal-glitch-out 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    @keyframes signal-glitch-out {
      0% {
        opacity: 1;
        filter: brightness(1) contrast(1);
        transform: translateX(0);
      }
      20% {
        opacity: 1;
        filter: brightness(1.3) contrast(1.5) saturate(1.5);
        transform: translateX(-2px);
      }
      40% {
        opacity: 0.7;
        filter: brightness(1.8) contrast(2) saturate(0.5);
        transform: translateX(2px);
      }
      60% {
        opacity: 0.3;
        filter: brightness(2.5) contrast(3) saturate(0);
        transform: translateX(-1px) scaleY(0.98);
      }
      80% {
        opacity: 0.1;
        filter: brightness(3) contrast(5) blur(2px);
        transform: translateX(1px) scaleY(1.02);
      }
      100% {
        opacity: 0;
        filter: brightness(5) contrast(10) blur(4px);
        transform: translateX(0) scaleY(0.95);
      }
    }

    @keyframes signal-glitch-in {
      0% {
        opacity: 0;
        filter: brightness(5) contrast(10) blur(4px);
        transform: translateX(0) scaleY(0.95);
      }
      25% {
        opacity: 0.2;
        filter: brightness(3) contrast(5) blur(2px);
        transform: translateX(-2px) scaleY(1.05);
      }
      50% {
        opacity: 0.5;
        filter: brightness(1.8) contrast(2.5) saturate(0.3);
        transform: translateX(2px) scaleY(1.02);
      }
      75% {
        opacity: 0.8;
        filter: brightness(1.3) contrast(1.5) saturate(0.8);
        transform: translateX(-1px) scaleY(0.99);
      }
      100% {
        opacity: 1;
        filter: brightness(1) contrast(1) saturate(1);
        transform: translateX(0) scaleY(1);
      }
    }

    /* Navigation Arrows */
    .nav-arrow {
      background: linear-gradient(135deg, rgba(2, 6, 23, 0.92), rgba(15, 23, 42, 0.88));
      backdrop-filter: blur(24px);
      border: 1.5px solid rgba(16, 185, 129, 0.35);
      color: #10b981;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .nav-arrow:hover:not(:disabled) {
      transform: translateY(-50%) scale(1.15);
      border-color: rgba(16, 185, 129, 0.7);
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(20, 184, 166, 0.12));
      box-shadow: 0 12px 32px rgba(16, 185, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    .nav-arrow:active:not(:disabled) {
      transform: translateY(-50%) scale(1.05);
      box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3);
    }
    
    .nav-arrow:disabled {
      opacity: 0.25;
      cursor: not-allowed;
      border-color: rgba(71, 85, 105, 0.3);
    }

    /* HUD Panel (Glassmorphism) - HIGHLY TRANSPARENT for Character Visibility */
    .hud-panel {
      background: linear-gradient(135deg, rgba(2, 6, 23, 0.45), rgba(2, 6, 23, 0.35));
      backdrop-filter: blur(12px) saturate(140%);
      border: 1px solid rgba(16, 185, 129, 0.2);
      border-radius: 20px;
      padding: 12px 14px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    /* Tech Badge (Optimized) */
    .tech-badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(20, 184, 166, 0.15));
      border: 1px solid rgba(16, 185, 129, 0.4);
      border-radius: 10px;
      font-size: 9px;
      font-weight: 600;
      color: #a7f3d0;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
    }

    /* Description Panel (Optimized) */
    .description-panel {
      padding: 10px;
      background: rgba(15, 23, 42, 0.5);
      border-radius: 10px;
      border: 1px solid rgba(71, 85, 105, 0.3);
    }

    /* Typewriter Effect */
    .typewriter-text {
      overflow: hidden;
      white-space: normal;
      animation: typewriter 1s steps(60, end);
    }

    @keyframes typewriter {
      from { 
        max-height: 0;
        opacity: 0;
      }
      to { 
        max-height: 200px;
        opacity: 1;
      }
    }

    /* Select Companion Button - Unified Style */
    .select-companion-btn {
      background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
      color: #020617;
      font-weight: 800;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }
    
    .select-companion-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .select-companion-btn:hover::before {
      left: 100%;
    }

    .select-companion-btn:hover {
      transform: translateY(-2px) scale(1.03);
      box-shadow: 0 12px 32px rgba(16, 185, 129, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    .select-companion-btn:active {
      transform: translateY(0) scale(0.97);
      box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
      transition: all 0.1s cubic-bezier(0.4, 0, 1, 1);
    }

    .select-companion-btn.selected {
      background: linear-gradient(135deg, #059669 0%, #0d9488 100%);
      box-shadow: 0 8px 24px rgba(5, 150, 105, 0.45), inset 0 2px 8px rgba(0, 0, 0, 0.25);
      animation: selectedPulse 2s ease-in-out infinite;
    }
    
    @keyframes selectedPulse {
      0%, 100% {
        box-shadow: 0 8px 24px rgba(5, 150, 105, 0.45), inset 0 2px 8px rgba(0, 0, 0, 0.25);
      }
      50% {
        box-shadow: 0 12px 32px rgba(5, 150, 105, 0.6), inset 0 2px 8px rgba(0, 0, 0, 0.25);
      }
    }

    /* Indicator Dots */
    .indicator-dot {
      position: relative;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(71, 85, 105, 0.4);
      border: 2px solid rgba(71, 85, 105, 0.6);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .indicator-dot:hover {
      transform: scale(1.3);
      border-color: rgba(16, 185, 129, 0.7);
    }

    .indicator-dot.active {
      width: 14px;
      height: 14px;
      background: linear-gradient(135deg, #10b981, #14b8a6);
      border-color: #10b981;
      box-shadow: 0 0 24px rgba(16, 185, 129, 0.7);
    }

    .indicator-label {
      position: absolute;
      bottom: -22px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 9px;
      font-weight: 700;
      color: #64748b;
      white-space: nowrap;
      opacity: 0;
      transition: opacity 0.3s;
      pointer-events: none;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .indicator-dot:hover .indicator-label {
      opacity: 1;
    }

    /* Unified HUD Slide Transition - Fast & Smooth */
    .hud-slide-up-enter-active {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .hud-slide-up-leave-active {
      transition: all 0.25s cubic-bezier(0.4, 0, 1, 1);
    }

    .hud-slide-up-enter-from {
      opacity: 0;
      transform: translateY(30px);
    }

    .hud-slide-up-leave-to {
      opacity: 0;
      transform: translateY(20px);
    }

    /* Slow Pulse Animation */
    @keyframes pulse-slow {
      0%, 100% {
        opacity: 0.3;
      }
      50% {
        opacity: 0.6;
      }
    }

    .animate-pulse-slow {
      animation: pulse-slow 4s ease-in-out infinite;
    }

    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    .bounce-hint {
      animation: gentleBounce 2.5s ease-in-out infinite;
    }
    
    @keyframes gentleBounce {
      0%, 100% { 
        transform: translateY(0px); 
        opacity: 0.85;
      }
      50% { 
        transform: translateY(-6px); 
        opacity: 1;
      }
    }

    /* Expand/Collapse Transition for Description Accordion */
    .expand-enter-active,
    .expand-leave-active {
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
    }

    .expand-enter-from,
    .expand-leave-to {
      max-height: 0;
      opacity: 0;
      margin-top: 0 !important;
      padding-top: 0 !important;
    }

    .expand-enter-to,
    .expand-leave-from {
      max-height: 500px;
      opacity: 1;
    }

    /* Holographic Shimmer Animation for Pass Card */
    @keyframes holographicShimmer {
      0%, 100% {
        background-position: -200% center;
      }
      50% {
        background-position: 200% center;
      }
    }

    /* Stamp Animation */
    @keyframes stampDrop {
      0% {
        transform: scale(0) rotate(-20deg);
        opacity: 0;
      }
      50% {
        transform: scale(1.2) rotate(12deg);
        opacity: 1;
      }
      70% {
        transform: scale(0.9) rotate(12deg);
        opacity: 1;
      }
      100% {
        transform: scale(1) rotate(12deg);
        opacity: 1;
      }
    }

    /* Scale-In Animation for Companion Detail Modal */
    @keyframes scaleIn {
      0% {
        transform: scale(0.85);
        opacity: 0;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    .animate-scale-in {
      animation: scaleIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    .stamp-animation {
      animation: stampDrop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    /* Stamp Transition */
    .stamp-enter-active {
      animation: stampDrop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .stamp-leave-active {
      animation: stampDrop 0.3s ease-out reverse;
    }

    /* ================================
       UNIFIED DESIGN SYSTEM
       统一设计语言系统
       ================================ */
    
    /* Primary Button - 主要按钮统一样式 */
    .btn-primary-unified {
      background: linear-gradient(to right, #10b981, #14b8a6);
      color: #020617;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      border-radius: 9999px;
      padding: 1rem 0;
      box-shadow: 0 20px 25px -5px rgba(16, 185, 129, 0.4);
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      min-height: 52px;
    }

    .btn-primary-unified:hover {
      box-shadow: 0 25px 50px -12px rgba(16, 185, 129, 0.6);
      transform: scale(1.05);
    }

    .btn-primary-unified:active {
      transform: scale(0.95);
    }

    /* Selection Item - 选择项统一样式 */
    .selection-item-unified {
      background: rgba(15, 23, 42, 0.7);
      border: 1px solid rgba(71, 85, 105, 0.6);
      border-radius: 0.75rem;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .selection-item-unified:hover {
      border-color: rgba(52, 211, 153, 0.7);
      background: rgba(15, 23, 42, 1);
    }

    .selection-item-unified:active {
      transform: scale(0.98);
    }

    .selection-item-unified.selected {
      background: rgba(16, 185, 129, 0.05);
      border-color: rgba(52, 211, 153, 0.8);
      box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
    }

    /* Check Mark Animation - 勾选动画 */
    @keyframes checkPop {
      0% {
        transform: scale(0);
        opacity: 0;
      }
      50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    .check-icon-unified {
      color: #6b7280;
      transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .check-icon-unified.checked {
      color: #10b981;
      animation: checkPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Glow Effect - 发光效果 */
    @keyframes glowPulse {
      0%, 100% {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
      }
      50% {
        box-shadow: 0 0 30px rgba(16, 185, 129, 0.6);
      }
    }

    .glow-unified {
      animation: glowPulse 2s ease-in-out infinite;
    }