/* Tactical micro-interactions: subtle, fast, touch-friendly, GPU-accelerated. */
:root { --mini-gold: #f4ce70; --mini-cyan: #69d9e5; --mini-glow: rgba(105,217,229,.22); }

/* === Smooth scroll & overscroll === */
html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
body { overscroll-behavior-y: contain; }

@keyframes mini-tap { 0% { transform: scale(1); } 45% { transform: scale(.955); } 100% { transform: scale(1); } }
@keyframes mini-ripple { from { transform: scale(0); opacity: .55; } to { transform: scale(3.2); opacity: 0; } }
@keyframes mini-shimmer { from { transform: translateX(-125%); } to { transform: translateX(125%); } }
@keyframes mini-enter { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes mini-pulse-border { 0%,100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px var(--mini-glow); } }

/* === Staggered entrance for cards === */
@keyframes mini-stagger {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mini-stagger-in { animation: mini-stagger .42s cubic-bezier(.23,1,.32,1) both; will-change: opacity, transform; }

/* GPU acceleration hints for interactive elements */
#root button, #root .action-card, #root .product-card, #root .target-row,
#command-center-overlay button, #command-center-overlay .cc-card, #command-center-overlay .cc-action {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: transform .16s cubic-bezier(.23,1,.32,1), filter .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
#root button:hover, #command-center-overlay button:hover { filter: brightness(1.12); }
#root button:active, #command-center-overlay button:active,
#root .action-card:active, #root .product-card:active { transform: scale(.965) translateZ(0); filter: brightness(.98); }
#root button:focus-visible, #command-center-overlay button:focus-visible,
#root .action-card:focus-visible { outline: 2px solid var(--mini-gold); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(244,206,112,.16); }
#root .action-card:hover, #root .product-card:hover, #root .target-row:hover,
#command-center-overlay .cc-card:hover, #command-center-overlay .cc-action:hover {
  transform: translateY(-2px) translateZ(0);
  border-color: rgba(244,206,112,.48);
  box-shadow: 0 10px 24px rgba(0,0,0,.22), 0 0 18px rgba(105,217,229,.08);
}
#root .action-card:before, #root .product-card:before,
#command-center-overlay .cc-card:before, #command-center-overlay .cc-action:before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.10) 47%, transparent 68%);
  transform: translateX(-125%);
}
#root .action-card:hover:before, #root .product-card:hover:before,
#command-center-overlay .cc-card:hover:before, #command-center-overlay .cc-action:hover:before { animation: mini-shimmer .7s ease both; }
#root .primary-button:hover, #root .outline-button:hover, #root .danger-button:hover,
#command-center-overlay .cc-button:hover, #command-center-overlay .cc-button-secondary:hover,
#command-center-overlay .cc-danger:hover, #command-center-overlay .cc-mini-btn:hover { box-shadow: 0 0 15px rgba(105,217,229,.19), inset 0 1px rgba(255,255,255,.10); }
#root .bottom-nav button:hover span, #root #special-ops-launcher:hover span,
#root .alliance-launcher:hover span, #command-center-launcher:hover span,
#command-center-overlay .cc-hero-mark { filter: drop-shadow(0 0 7px rgba(105,217,229,.38)); transition: transform .18s ease, filter .18s ease; }
#root .bottom-nav button:hover span, #root #special-ops-launcher:hover span,
#root .alliance-launcher:hover span, #command-center-launcher:hover span { transform: translateY(-2px) scale(1.08); }
.mini-ripple { position: absolute; pointer-events: none; width: 18px; height: 18px; border-radius: 50%; background: rgba(166,239,247,.42); transform: scale(0); animation: mini-ripple .55s ease-out forwards; z-index: 4; will-change: transform, opacity; }
.mini-busy { cursor: wait !important; filter: saturate(.65) brightness(.9) !important; }
.mini-busy:after { content: ""; position: absolute; width: 13px; height: 13px; margin: auto; inset: 0; border: 2px solid rgba(255,255,255,.35); border-top-color: var(--mini-gold); border-radius: 50%; animation: mini-spin .65s linear infinite; }
@keyframes mini-spin { to { transform: rotate(360deg); } }
#command-center-overlay .cc-shell { animation: mini-enter .28s cubic-bezier(.23,1,.32,1) both; }
#command-center-overlay .cc-body > * { animation: mini-enter .28s ease both; }
#command-center-overlay .cc-body > *:nth-child(2) { animation-delay: .035s; }
#command-center-overlay .cc-body > *:nth-child(3) { animation-delay: .07s; }
@media (prefers-reduced-motion: reduce) {
  #root *, #command-center-overlay * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
.bottom-nav .special-ops-nav-launcher {
  position: relative;
  left: auto;
  bottom: auto;
  z-index: auto;
  min-width: 62px;
}

/* === Success/error burst particles === */
@keyframes mini-burst {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--bx), var(--by)) scale(0); opacity: 0; }
}
.mini-burst-particle {
  position: fixed; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; z-index: 99999;
  animation: mini-burst .6s cubic-bezier(.23,1,.32,1) forwards; will-change: transform, opacity;
}

/* === Pull-to-refresh indicator === */
.mini-pull-indicator {
  position: fixed; top: -40px; left: 50%; margin-left: -18px; width: 36px; height: 36px;
  z-index: 99998; pointer-events: none; opacity: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s ease; will-change: transform, opacity;
}
.mini-pull-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid rgba(105,217,229,.3); border-top-color: var(--mini-cyan);
  display: block;
}
.mini-pull-active .mini-pull-spinner { animation: mini-spin .6s linear infinite; }
.mini-pulling { touch-action: pan-y; }

/* === Enhanced toast feedback (reduce robotic feel) === */
@keyframes mini-toast-in {
  0%   { opacity: 0; transform: translateY(-14px) scale(.96); filter: blur(3px); }
  60%  { opacity: 1; transform: translateY(2px) scale(1.01); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mini-toast-glow {
  0%,100% { box-shadow: 0 8px 28px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.06); }
  50%     { box-shadow: 0 10px 34px rgba(0,0,0,.46), 0 0 22px var(--mini-glow); }
}
[data-hot-toast], .react-hot-toast, go-toaster > * {
  animation: mini-toast-in .42s cubic-bezier(.23,1,.32,1) both, mini-toast-glow 2.4s ease-in-out infinite;
  border-radius: 14px !important;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.10) !important;
  font-weight: 600;
  letter-spacing: .01em;
}
[data-hot-toast]::after, .react-hot-toast::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px 0 0 4px;
}
[data-hot-toast][class*="error"]::after, .react-hot-toast[class*="error"]::after { background: linear-gradient(#ff6b6b,#c92a2a); }
[data-hot-toast][class*="success"]::after, .react-hot-toast[class*="success"]::after { background: linear-gradient(#51cf66,#2b8a3e); }