/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TRICO INTELLIGENCE FIELD - RESPONSIVE ADAPTATIONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ────────────────────────────────────────────────────────────────────
   MOBILE PORTRAIT (< 768px)
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .debug-section {
    font-size: 9px;
    padding: 6px;
    min-width: 100px;
  }
  
  .debug-label {
    font-size: 8px;
  }
  
  .debug-value {
    font-size: 11px;
  }
  
  .debug-tl, .debug-tr, .debug-bl, .debug-br {
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    right: var(--spacing-sm);
    bottom: var(--spacing-sm);
  }
  
  .loading-pulse {
    width: 40px;
    height: 40px;
  }
  
  /* Reduce vignette intensity untuk screen kecil */
  #intelligence-field::before {
    background: radial-gradient(
      ellipse at center,
      transparent 0%,
      transparent 50%,
      rgba(10, 22, 40, 0.2) 85%,
      rgba(10, 22, 40, 0.4) 100%
    );
  }
}

/* ────────────────────────────────────────────────────────────────────
   TABLET PORTRAIT (768px - 1023px)
   ──────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .debug-section {
    font-size: 10px;
    padding: 7px;
  }
  
  .loading-pulse {
    width: 50px;
    height: 50px;
  }
}

/* ────────────────────────────────────────────────────────────────────
   LANDSCAPE MOBILE (height < 500px)
   ──────────────────────────────────────────────────────────────────── */
@media (max-height: 500px) {
  .debug-section {
    padding: 4px;
    font-size: 8px;
  }
  
  .debug-tl, .debug-tr, .debug-bl, .debug-br {
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
  }
  
  .loading-pulse {
    width: 30px;
    height: 30px;
  }
}

/* ────────────────────────────────────────────────────────────────────
   LARGE DESKTOP (> 1920px)
   ──────────────────────────────────────────────────────────────────── */
@media (min-width: 1920px) {
  .debug-section {
    font-size: 12px;
    padding: 10px;
    min-width: 140px;
  }
  
  .debug-label {
    font-size: 10px;
  }
  
  .debug-value {
    font-size: 14px;
  }
  
  .loading-pulse {
    width: 80px;
    height: 80px;
  }
}

/* ────────────────────────────────────────────────────────────────────
   TOUCH DEVICE OPTIMIZATIONS
   ──────────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover-dependent animations untuk touch devices */
  * {
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Prevent overscroll bounce */
  body {
    overscroll-behavior: none;
    position: fixed;
  }
}

/* ────────────────────────────────────────────────────────────────────
   HIGH DPI SCREENS
   ──────────────────────────────────────────────────────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Canvas akan handle DPR via JS, CSS hanya perlu ensure crispness */
  #intelligence-field {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* ────────────────────────────────────────────────────────────────────
   DARK MODE SUPPORT (redundant karena always dark, tapi untuk konsistensi)
   ──────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  /* Force dark mode regardless */
  body {
    background-color: var(--abyss);
    color: var(--beam);
  }
}