/* Custom styles and animations for ps99clan.xyz Web Portal */

:root {
  --bg-main: #0B0F17;
  --bg-card: #0F1622;
  --bg-card-hover: #141D2D;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-accent: rgba(14, 165, 233, 0.3);
  --accent-cyan: #06B6D4;
  --accent-emerald: #10B981;
  --accent-gold: #F59E0B;
  --accent-rose: #F43F5E;
}

body {
  background-color: var(--bg-main);
  color: #E2E8F0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0B0F17;
}
::-webkit-scrollbar-thumb {
  background: #1E293B;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* Card glassmorphism */
.glass-panel {
  background: rgba(15, 22, 34, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
}

.glass-panel:hover {
  border-color: rgba(255, 255, 255, 0.14);
}

/* Live Pulse Indicator */
@keyframes pulseGlow {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.5;
  }
}

.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #10B981;
  box-shadow: 0 0 10px #10B981;
  animation: pulseGlow 2s infinite ease-in-out;
}

/* In-place update highlight animation */
@keyframes flashGain {
  0% {
    background-color: rgba(16, 185, 129, 0.35);
  }
  100% {
    background-color: transparent;
  }
}

.cell-updated {
  animation: flashGain 1.2s ease-out;
}

/* Sparkline SVG styling */
.sparkline-svg {
  display: block;
  overflow: visible;
}
.sparkline-path {
  fill: none;
  stroke: #06B6D4;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sparkline-area {
  fill: rgba(6, 182, 212, 0.12);
}

/* Status Badges */
.badge-grinding {
  background: rgba(16, 185, 129, 0.15);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.badge-idle {
  background: rgba(245, 158, 11, 0.15);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.badge-disconnected {
  background: rgba(244, 63, 94, 0.15);
  color: #FB7185;
  border: 1px solid rgba(244, 63, 94, 0.35);
}

/* Tactical Rank Badges */
.rank-top1 {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #111827;
  font-weight: 800;
}
.rank-top2 {
  background: linear-gradient(135deg, #94A3B8, #64748B);
  color: #0F172A;
  font-weight: 800;
}
.rank-top3 {
  background: linear-gradient(135deg, #D97706, #B45309);
  color: #FEF3C7;
  font-weight: 800;
}

/* Clan War Room Subtabs */
.clan-subtab {
  user-select: none;
  touch-action: manipulation;
  cursor: pointer;
}
.clan-subtab:active {
  transform: scale(0.97);
}

/* Radar & Ladder highlight */
.ladder-our-clan {
  background: rgba(6, 182, 212, 0.12) !important;
  border-left: 4px solid #06B6D4 !important;
  box-shadow: inset 0 0 16px rgba(6, 182, 212, 0.08);
}

/* At-risk indicator */
.badge-at-risk {
  background: rgba(244, 63, 94, 0.2);
  color: #FDA4AF;
  border: 1px solid rgba(244, 63, 94, 0.45);
}

/* Scrollbar utilities */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Color-Coded Avatar Status Glows */
.avatar-status-grinding {
  border: 2px solid #10B981 !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.45) !important;
}

.avatar-status-idle {
  border: 2px solid #F59E0B !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.45) !important;
}

.avatar-status-disconnected {
  border: 2px solid #F43F5E !important;
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.45) !important;
}

/* Battle Rewards Badges & Glows */
.garg-glow {
  border: 1.5px solid rgba(239, 68, 68, 0.7);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.35);
}
.rainbow-border {
  border: 1.5px solid transparent !important;
  background:
    linear-gradient(#0f172a, #0f172a) padding-box,
    linear-gradient(135deg, #f43f5e, #fbbf24, #10b981, #06b6d4, #a855f7) border-box !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 0 14px rgba(236, 72, 153, 0.25);
}
.gold-glow {
  border: 1.5px solid rgba(245, 158, 11, 0.6);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.25);
}
.titanic-glow {
  border: 1.5px solid rgba(168, 85, 247, 0.5);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.2);
}
.garg-badge {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #f87171;
}
.rainbow-badge {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(245, 158, 11, 0.2), rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.2), rgba(168, 85, 247, 0.2));
  border: 1px solid rgba(236, 72, 153, 0.5);
  color: #f472b6;
}
.gold-badge {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}
.titan-badge {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #c084fc;
}

/* League Squad Current Player Card (Glowing Cyan Highlight) */
.current-player-card {
  border: 2px solid #22d3ee !important;
  box-shadow: 0 0 25px rgba(6, 182, 212, 0.25);
  background: linear-gradient(180deg, rgba(11, 29, 53, 0.9) 0%, rgba(8, 20, 39, 0.85) 100%) !important;
}

/* Mode-dependent visibility switching (Battle vs Leagues) */
[data-active-mode="battle"] [data-mode="league"] {
  display: none !important;
}

[data-active-mode="leagues"] [data-mode="clan"] {
  display: none !important;
}