@keyframes spring-pop {
      0% { transform: scale(0.92); opacity: 0; }
      60% { transform: scale(1.04); }
      100% { transform: scale(1); opacity: 1; }
    }
    @keyframes success-bounce {
      0%, 100% { transform: translateY(0) scale(1); }
      25% { transform: translateY(-10px) scale(1.06) rotate(-2deg); }
      50% { transform: translateY(-3px) scale(1.03) rotate(2deg); }
      75% { transform: translateY(-6px) scale(1.04) rotate(-1deg); }
    }
    @keyframes error-shake {
      0%, 100% { transform: translateX(0); }
      20%, 60% { transform: translateX(-6px); }
      40%, 80% { transform: translateX(6px); }
    }
    @keyframes sound-wave {
      0%, 100% { height: 4px; }
      50% { height: 16px; }
    }
    @keyframes xray-scan {
      0% { top: 4%; opacity: 0.8; }
      50% { opacity: 1; }
      100% { top: 96%; opacity: 0.8; }
    }

    .animate-spring { animation: spring-pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
    .animate-success { animation: success-bounce 0.65s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .animate-error { animation: error-shake 0.45s ease-in-out; }
    .wave-bar-1 { animation: sound-wave 0.6s ease-in-out infinite; }
    .wave-bar-2 { animation: sound-wave 0.8s ease-in-out infinite 0.15s; }
    .wave-bar-3 { animation: sound-wave 0.5s ease-in-out infinite 0.3s; }

    .glass-panel {
      background: rgba(15, 23, 42, 0.88);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .glass-card {
      background: rgba(30, 41, 59, 0.78);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.07);
    }

    .organ-model {
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }
    .organ-model:hover {
      filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.9)) brightness(1.25);
    }
    .organ-model.dimmed {
      opacity: 0.16;
      filter: grayscale(90%) brightness(0.45);
    }
    .organ-model.active-organ {
      opacity: 1 !important;
      filter: drop-shadow(0 0 16px rgba(56, 189, 248, 1)) drop-shadow(0 0 28px rgba(14, 165, 233, 0.85)) brightness(1.35) !important;
    }

    /* MODO RAYOS-X */
    #anatomy-body-stage.xray-mode {
      background: radial-gradient(circle at 50% 35%, #05233d 0%, #021220 55%, #01070e 100%) !important;
      border-color: #38bdf8 !important;
      box-shadow: 0 0 35px rgba(56, 189, 248, 0.45), inset 0 0 30px rgba(2, 132, 199, 0.3) !important;
    }
    #anatomy-body-stage.xray-mode::after {
      content: "";
      position: absolute;
      left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent, #38bdf8 20%, #ffffff 50%, #38bdf8 80%, transparent);
      box-shadow: 0 0 14px #38bdf8, 0 0 25px #0284c7;
      animation: xray-scan 2.6s ease-in-out infinite alternate;
      pointer-events: none;
      z-index: 40;
    }
    .xray-mode #body-skeleton-layer {
      opacity: 0.95 !important;
      transition: opacity 0.3s ease;
    }
    .xray-mode #body-skeleton-layer path.skeleton-bone,
    .xray-mode #body-skeleton-layer rect.skeleton-bone {
      stroke: #ffffff !important;
      fill: none !important;
      filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 10px #38bdf8) !important;
      stroke-width: 2.2px !important;
    }
    .xray-mode #body-skeleton-layer path.body-contour {
      stroke: #0284c7 !important;
      stroke-width: 2px !important;
      fill: rgba(3, 30, 54, 0.55) !important;
    }
    .xray-mode .organ-model {
      filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.85)) brightness(1.35) contrast(1.4) saturate(1.8) !important;
      opacity: 0.88;
      mix-blend-mode: screen;
    }
    .xray-mode .organ-model:hover,
    .xray-mode .organ-model.active-organ {
      filter: drop-shadow(0 0 16px #ffffff) drop-shadow(0 0 25px #38bdf8) brightness(1.7) contrast(1.6) !important;
      opacity: 1 !important;
    }
    #xray-hud-badge { display: none; }
    .xray-mode #xray-hud-badge { display: flex !important; }

    /* ZERO-SCROLL MOBILE STRICT ENGINE */
    html, body {
      height: 100% !important;
      height: 100dvh !important;
      max-height: 100dvh !important;
      overflow: hidden !important;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      -webkit-user-select: none;
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
    }
    
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    #fx-canvas {
      width: 100vw !important;
      height: 100% !important;
      height: 100dvh !important;
      max-width: 100vw !important;
      max-height: 100dvh !important;
      overflow: hidden !important;
      position: fixed !important;
      inset: 0 !important;
      pointer-events: none !important;
      box-sizing: border-box !important;
    }

    /* En Desktop (>768px), permitir overflow natural */
    @media (min-width: 768px) {
      html, body {
        position: static !important;
        overflow-y: auto !important;
      }
    }

    /* Strict Mobile clearance and overflow prevention */
    @media (max-width: 768px) {
      html, body {
        max-width: 100vw !important;
        width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
      }

      .hbq-app-shell,
      #app-shell {
        padding-top: 74px !important;
        max-width: 100vw !important;
        width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
      }

      /* Compact control bar on mobile so it never exceeds 360px */
      #ui-anatomy-title {
        display: none !important;
      }

      #btn-xray-toggle #ui-xray-label {
        display: none !important;
      }

      #btn-xray-toggle {
        padding: 2px 6px !important;
      }
    }