/* 🔥 Target Switching Test Stylesheet (style.css) */

:root {
  --test-accent: #00f0ff;
  --test-accent-soft: rgba(0, 240, 255, 0.12);
  --test-accent-border: rgba(0, 240, 255, 0.3);
  --arena-bg: #060912;
  --arena-border: rgba(0, 240, 255, 0.2);
}

/* ── CRISP WHITE AIM CURSOR ── */
.target-switching-arena,
.target-switching-arena canvas,
.target-switching-arena *,
body:has(#panelTask.active),
body:has(#panelTask.active) * {
  cursor: var(--cursor-fps-crosshair) !important;
}

.top-header .restart-pill,
.top-header button {
  cursor: pointer !important;
}

/* ── FULLSCREEN FIT-TO-SCREEN ARENA DURING GAMEPLAY ── */
body:has(#panelTask.active) {
  overflow: hidden !important;
}

body:has(#panelTask.active) header.panda-header,
body:has(#panelTask.active) .panda-nav,
body:has(#panelTask.active) footer.panda-footer,
body:has(#panelTask.active) .t-ambient-glow,
body:has(#panelTask.active) .t-seo-container,
body:has(#panelTask.active) .t-nav {
  display: none !important;
}

body:has(#panelTask.active) .t-shell {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body:has(#panelTask.active) .t-card {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: #060912 !important;
  box-shadow: none !important;
  z-index: 9999 !important;
  overflow: hidden !important;
}

body:has(#panelTask.active) #panelTask,
body:has(#panelTask.active) .t-task {
  position: absolute !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

/* Arena Container - Fills Entire Viewport */
.target-switching-arena {
  position: absolute;
  inset: 0;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background-color: #060912;
  box-shadow: none !important;
  overflow: hidden;
  user-select: none;
  touch-action: none;
}

.target-switching-arena::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(4, 7, 13, 0.7) 100%);
  pointer-events: none;
  z-index: 2;
}

#webgl-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#webgl-container canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Minimalist Top HUD Header: Only Timer & Restart (Standard) */
.top-header {
  position: absolute !important;
  top: 14px !important;
  left: 16px !important;
  right: 16px !important;
  width: calc(100% - 32px) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  z-index: 20 !important;
  pointer-events: none !important;
}

.round-pill {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(13, 18, 28, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 8px;
  padding: 6px 14px;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.pulse-dot {
  width: 7px;
  height: 7px;
  background: #00f0ff;
  border-radius: 50%;
  box-shadow: 0 0 8px #00f0ff;
  animation: pulseCyan 1.5s infinite;
}

@keyframes pulseCyan {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

#level {
  margin: 0;
  font-family: var(--font-m, 'JetBrains Mono', monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff;
}

.header-actions {
  display: flex !important;
  align-items: center !important;
  margin-left: auto !important;
  pointer-events: auto !important;
}

.restart-pill {
  pointer-events: auto;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #f87171 !important;
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: all 0.15s ease;
  margin-left: auto !important;
}

.restart-pill:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════
   VISUAL PREVIEW BOX (How It Works Animation)
   ═══════════════════════════════════════════════════════════════ */
.switching-preview-box {
  position: relative;
  width: 280px;
  height: 140px;
  margin: 18px auto;
  background: rgba(6, 9, 18, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 24px rgba(0, 240, 255, 0.05);
}

.switching-preview-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(0, 240, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

.switching-preview-target {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.switching-preview-target.t1 {
  left: 65px;
  top: 70px;
  animation: target1Cycle 5s infinite;
}

.switching-preview-target.t2 {
  left: 140px;
  top: 50px;
  animation: target2Cycle 5s infinite;
}

.switching-preview-target.t3 {
  left: 215px;
  top: 80px;
  animation: target3Cycle 5s infinite;
}

@keyframes target1Cycle {
  0%, 25% {
    background: radial-gradient(circle at 35% 35%, #67e8f9, #00d8f6 60%, #003d52 100%);
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.8), inset 0 0 6px rgba(255, 255, 255, 0.4);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
  26%, 95% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }
  100% {
    background: radial-gradient(circle at 35% 35%, #67e8f9, #00d8f6 60%, #003d52 100%);
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.8), inset 0 0 6px rgba(255, 255, 255, 0.4);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

@keyframes target2Cycle {
  0%, 24% {
    background: radial-gradient(circle at 35% 35%, #1e3a5f, #0a1e35 70%, #040e1a 100%);
    border: 1.5px solid rgba(0, 240, 255, 0.25);
    box-shadow: none;
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0.9);
  }
  25%, 58% {
    background: radial-gradient(circle at 35% 35%, #67e8f9, #00d8f6 60%, #003d52 100%);
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.8), inset 0 0 6px rgba(255, 255, 255, 0.4);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
  59%, 95% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }
  100% {
    background: radial-gradient(circle at 35% 35%, #1e3a5f, #0a1e35 70%, #040e1a 100%);
    border: 1.5px solid rgba(0, 240, 255, 0.25);
    box-shadow: none;
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

@keyframes target3Cycle {
  0%, 57% {
    background: radial-gradient(circle at 35% 35%, #1e3a5f, #0a1e35 70%, #040e1a 100%);
    border: 1.5px solid rgba(0, 240, 255, 0.25);
    box-shadow: none;
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0.9);
  }
  58%, 90% {
    background: radial-gradient(circle at 35% 35%, #67e8f9, #00d8f6 60%, #003d52 100%);
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.8), inset 0 0 6px rgba(255, 255, 255, 0.4);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
  91%, 95% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }
  100% {
    background: radial-gradient(circle at 35% 35%, #1e3a5f, #0a1e35 70%, #040e1a 100%);
    border: 1.5px solid rgba(0, 240, 255, 0.25);
    box-shadow: none;
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

/* Rigid 20px Bounding Box Cursor with Index Fingertip Alignment */
.switching-preview-click {
  position: absolute;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #ffffff;
  z-index: 10;
  animation: cursorSwitchMove 5s infinite cubic-bezier(0.25, 1, 0.5, 1);
}

.switching-preview-click span {
  font-size: 20px;
  line-height: 1;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
}

@keyframes cursorSwitchMove {
  /* Start near origin */
  0% {
    left: 20px;
    top: 110px;
    transform: translate(-35%, -15%) scale(1);
  }
  /* Flick to Target 1 */
  18% {
    left: 65px;
    top: 70px;
    transform: translate(-35%, -15%) scale(1);
  }
  /* Click Target 1 */
  22%, 24% {
    left: 65px;
    top: 70px;
    transform: translate(-35%, -15%) scale(0.85);
  }
  /* Switch / Flick to Target 2 */
  38% {
    left: 140px;
    top: 50px;
    transform: translate(-35%, -15%) scale(1);
  }
  /* Click Target 2 */
  54%, 56% {
    left: 140px;
    top: 50px;
    transform: translate(-35%, -15%) scale(0.85);
  }
  /* Switch / Flick to Target 3 */
  70% {
    left: 215px;
    top: 80px;
    transform: translate(-35%, -15%) scale(1);
  }
  /* Click Target 3 */
  86%, 88% {
    left: 215px;
    top: 80px;
    transform: translate(-35%, -15%) scale(0.85);
  }
  /* Return */
  96%, 100% {
    left: 20px;
    top: 110px;
    transform: translate(-35%, -15%) scale(1);
  }
}

.switching-preview-caption {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted, #94a3b8);
  max-width: 480px;
  margin: 0 auto 20px;
  line-height: 1.5;
}