/* components.css - Extracted from index.php */
/* Generated: 2026-02-19 */

/* ============================================================ */
/* radar-glow-animations (originally lines 13507-13559) */
/* ============================================================ */

            @keyframes radarPulse {
              0% { transform: scale(0.8); opacity: 0; }
              50% { opacity: 0.5; }
              100% { transform: scale(1.8); opacity: 0; }
            }
            
            @keyframes glow {
              0%, 100% { opacity: 0.3; transform: scale(1); }
              50% { opacity: 0.6; transform: scale(1.1); }
            }
            
            @keyframes pulse {
              0%, 100% { opacity: 0.3; transform: scale(1); }
              50% { opacity: 0.8; transform: scale(1.15); }
            }
            
            @keyframes floatUpDown {
              0%, 100% { transform: translateY(0px); }
              50% { transform: translateY(-15px); }
            }
            
            @keyframes hirschGlow {
              0%, 100% { filter: drop-shadow(0 0 20px rgba(124,92,255,0.8)) brightness(1.2); }
              50% { filter: drop-shadow(0 0 30px rgba(168,85,247,1)) brightness(1.4); }
            }
            
            @keyframes radarScan {
              0% { transform: rotate(0deg); }
              100% { transform: rotate(360deg); }
            }
            
            @keyframes orbit {
              0% { transform: rotate(0deg) translateX(50px); opacity: 0.3; }
              50% { opacity: 1; }
              100% { transform: rotate(360deg) translateX(50px); opacity: 0.3; }
            }
            
            @keyframes gradientSlide {
              0% { background-position: 0% center; }
              100% { background-position: 200% center; }
            }
            
            @keyframes scan {
              0% { transform: translateX(-100%); }
              100% { transform: translateX(300%); }
            }
            
            @keyframes float {
              0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0; }
              50% { transform: translateY(-30px) translateX(10px); opacity: 1; }
            }


/* ============================================================ */
/* welcome-title-animation (originally lines 14497-14506) */
/* ============================================================ */

    @keyframes slideGradient {
        0% { background-position: 0% 50%; }
        100% { background-position: 200% 50%; }
    }
    
    #welcome-title:hover {
        animation: slideGradient 3s linear infinite;
    }


/* ============================================================ */
/* welcome-tabs-cookie (originally lines 15265-15548) */
/* ============================================================ */

  .welcome-tab { padding: 10px 20px; border-radius: 8px; font-weight: 500; font-size: 0.9rem; cursor: pointer; transition: all 0.3s; background: rgba(255,255,255,.08); color: var(--muted); border: 1px solid rgba(255,255,255,.14); }
  .welcome-tab:hover { background: rgba(255,255,255,.12); color: var(--text); }
  .welcome-tab.active { background: var(--accent); color: white; border-color: var(--accentBorder); box-shadow: 0 4px 12px rgba(124,92,255,.3); }
  .tab-content { animation: fadeIn 0.3s ease-out; }
  
  /* Mobile Footer-Tabs: 3x2 Grid */
  @media (max-width: 600px) {
    #welcome-tabs {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px !important;
      padding: 0 10px;
    }
    .welcome-tab {
      padding: 10px 8px !important;
      font-size: 0.78rem !important;
      text-align: center;
      width: 100%;
    }
  }
  
  /* Schönere Scrollbar für Tab-Inhalte */
  .tab-content::-webkit-scrollbar { width: 8px; }
  .tab-content::-webkit-scrollbar-track { 
    background: rgba(0,0,0,.2); 
    border-radius: 10px;
  }
  .tab-content::-webkit-scrollbar-thumb { 
    background: rgba(124,92,255,.4); 
    border-radius: 10px;
    border: 2px solid rgba(0,0,0,.2);
  }
  .tab-content::-webkit-scrollbar-thumb:hover { 
    background: rgba(124,92,255,.6); 
  }
  
  /* Firefox */
  .tab-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(124,92,255,.4) rgba(0,0,0,.2);
  }
  #tab-content-statistik { scrollbar-width: none; }
  #tab-content-statistik::-webkit-scrollbar { display: none; }
  
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  @keyframes statLoadBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }
  .domian-photo-container { perspective: 1000px; }
  .photo-layer { will-change: transform; }

  /* === STATISTIK TAB STYLES === */
  .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; }
  .stat-card {
    background: linear-gradient(135deg, rgba(124,92,255,.08), rgba(255,64,129,.05));
    border: 1px solid rgba(124,92,255,.2);
    border-radius: 12px; padding: 16px; text-align: center;
    transition: all 0.3s; position: relative; overflow: hidden;
  }
  .stat-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--accent), #ff4081); border-radius: 12px 12px 0 0;
  }
  .stat-card:hover { transform: translateY(-2px); border-color: rgba(124,92,255,.4); box-shadow: 0 8px 24px rgba(124,92,255,.15); }
  .stat-card .stat-icon { font-size: 1.6rem; margin-bottom: 6px; }
  .stat-card .stat-number { font-size: 1.5rem; font-weight: 800; color: var(--text); line-height: 1.2; }
  .stat-card .stat-label { font-size: 0.75rem; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }

  .stat-section { margin-bottom: 28px; }

  .chart-scroll {
    overflow-x: auto;
    scrollbar-width: none;   /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }
  .chart-scroll::-webkit-scrollbar { display: none; } /* Chrome/Safari */
  .stat-section-title {
    font-size: 1rem; font-weight: 700; color: var(--accent); margin: 0 0 14px;
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 8px; border-bottom: 1px solid rgba(124,92,255,.15);
  }

  .stat-bar-container { margin-bottom: 8px; }
  .stat-bar-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 0.85rem; }
  .stat-bar-label .name { color: var(--text); font-weight: 500; }
  .stat-bar-label .count { color: var(--muted); font-size: 0.8rem; }
  .stat-bar-track { height: 8px; background: rgba(255,255,255,.06); border-radius: 6px; overflow: hidden; }
  .stat-bar-fill { height: 100%; border-radius: 6px; transition: width 1s ease-out; min-width: 4px; }
  .stat-bar-fill.purple { background: linear-gradient(90deg, rgba(124,92,255,.9), rgba(167,139,250,.7)); }
  .stat-bar-fill.pink { background: linear-gradient(90deg, rgba(255,64,129,.9), rgba(255,105,180,.7)); }
  .stat-bar-fill.cyan { background: linear-gradient(90deg, rgba(0,194,255,.9), rgba(100,200,255,.7)); }
  .stat-bar-fill.amber { background: linear-gradient(90deg, rgba(243,156,18,.9), rgba(241,196,15,.7)); }
  .stat-bar-fill.green { background: linear-gradient(90deg, rgba(46,204,113,.9), rgba(39,174,96,.7)); }
  .stat-bar-fill.rose { background: linear-gradient(90deg, rgba(255,99,132,.9), rgba(255,159,170,.7)); }

  .stat-gender-split { display: flex; gap: 16px; margin-bottom: 20px; }
  .stat-gender-card {
    flex: 1; padding: 16px; border-radius: 12px; text-align: center;
    position: relative; overflow: hidden;
  }
  .stat-gender-card.male { background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(59,130,246,.03)); border: 1px solid rgba(59,130,246,.25); }
  .stat-gender-card.female { background: linear-gradient(135deg, rgba(236,72,153,.12), rgba(236,72,153,.03)); border: 1px solid rgba(236,72,153,.25); }
  .stat-gender-card .gender-icon { font-size: 2rem; margin-bottom: 4px; }
  .stat-gender-card .gender-count { font-size: 1.8rem; font-weight: 800; }
  .stat-gender-card.male .gender-count { color: rgba(96,165,250,.95); }
  .stat-gender-card.female .gender-count { color: rgba(244,114,182,.95); }
  .stat-gender-card .gender-label { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
  .stat-gender-card .gender-pct { font-size: 0.85rem; color: var(--faint); margin-top: 4px; font-weight: 600; }

  .stat-top-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
  .stat-top-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 0.85rem; }
  .stat-top-rank {
    width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.72rem; flex-shrink: 0;
  }
  .stat-top-rank.gold { background: rgba(255,193,7,.2); color: #ffc107; }
  .stat-top-rank.silver { background: rgba(192,192,192,.2); color: #c0c0c0; }
  .stat-top-rank.bronze { background: rgba(205,127,50,.2); color: #cd7f32; }
  .stat-top-rank.normal { background: rgba(255,255,255,.06); color: var(--muted); }
  .stat-top-name { flex: 1; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stat-top-count { color: var(--muted); font-size: 0.8rem; font-weight: 500; flex-shrink: 0; }

  .stat-played-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.03); margin-bottom: 6px; transition: all 0.2s; }
  .stat-played-item:hover { background: rgba(124,92,255,.08); }
  .stat-played-rank { font-size: 1.1rem; width: 28px; text-align: center; flex-shrink: 0; }
  .stat-played-info { flex: 1; min-width: 0; }
  .stat-played-title { font-size: 0.85rem; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stat-played-date { font-size: 0.75rem; color: var(--muted); }
  .stat-played-count { font-size: 0.85rem; font-weight: 700; color: var(--accent); flex-shrink: 0; padding: 3px 8px; background: rgba(124,92,255,.12); border-radius: 6px; }

  @media (max-width: 600px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .stat-card { padding: 12px; }
    .stat-card .stat-number { font-size: 1.2rem; }
    .stat-gender-split { flex-direction: column; gap: 8px; }
    .stat-top-list { grid-template-columns: 1fr; }
    .stat-gender-card .gender-count { font-size: 1.4rem; }
  }
  
  /* Mobile Styles - MEHRERE Queries damit es SICHER greift */
  @media (max-width: 1024px), 
         (max-device-width: 768px),
         (orientation: portrait) and (max-width: 768px) {
    
    #tab-content-start { 
      flex-direction: column !important; 
      align-items: center !important; 
    } 
    
    .welcome-tab { 
      padding: 8px 14px; 
      font-size: 0.85rem; 
    }
    
    /* Äußere Box: Kein Padding, kein Hintergrund auf Mobile */
    #guest-member-container {
      background: none !important;
      border: none !important;
      padding: 0 !important;
      margin-bottom: 20px !important;
    }
    
    /* Überschrift kleiner auf Mobile */
    #guest-member-title {
      font-size: 1rem !important;
      margin-bottom: 12px !important;
    }
    
    /* Gast vs. Mitglied Grid - KOMPLETT UNTEREINANDER auf Mobile */
    #guest-member-grid {
      display: block !important;
      width: 100% !important;
    }
    
    #guest-member-grid > div {
      display: block !important;
      width: 100% !important;
      margin-bottom: 12px !important;
      box-sizing: border-box !important;
      float: none !important;
    }
    
    #guest-member-grid > div:last-child {
      margin-bottom: 0 !important;
    }
    
    /* Search Tooltip - KOMPLETT KLEINER auf Mobile */
    #search-help-tooltip {
      padding: 8px 10px !important;
      border-radius: 8px !important;
      max-width: 92vw !important;
    }
    
    #search-help-tooltip > div:first-child {
      gap: 8px !important;
      margin-bottom: 8px !important;
    }
    
    /* Emoji kleiner */
    #search-help-tooltip > div:first-child > div:first-child {
      font-size: 1.1rem !important;
    }
    
    /* Überschrift kleiner */
    #search-help-tooltip > div:first-child > div:last-child > div:first-child {
      font-size: 0.75rem !important;
      margin-bottom: 6px !important;
    }
    
    /* Beschreibungstext kleiner */
    #search-help-tooltip > div:first-child > div:last-child > div:last-child {
      font-size: 0.7rem !important;
      line-height: 1.4 !important;
    }
    
    /* Labels (Basis, +Pflicht, etc.) kleiner */
    #search-help-tooltip span {
      font-size: 0.7rem !important;
    }
    
    /* Code-Blöcke kleiner */
    #search-help-tooltip code {
      font-size: 0.65rem !important;
      padding: 1px 4px !important;
    }
    
    /* Beispiel-Chips kleiner */
    #search-help-tooltip button {
      font-size: 0.7rem !important;
      padding: 3px 8px !important;
    }
    
    /* "Beispiele zum Ausprobieren" Text kleiner */
    #search-help-tooltip > div:nth-child(2) > div:first-child {
      font-size: 0.7rem !important;
    }
  }
  
  /* ========================================
     HAND ANIMATION (hoch und runter - nur 5x)
     ======================================== */
  @keyframes handBounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-15px);
    }
  }
  
  @keyframes handBounceDown {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(15px); /* Nach UNTEN statt hoch */
    }
  }
  
  .animated-hand {
    display: inline-block;
    animation: handBounce 1.2s ease-in-out 5; /* 5x dann stoppen */
    animation-fill-mode: forwards; /* Bleibt am Ende stehen */
    font-size: 1.3em;
    margin-right: 8px;
  }
  
  .animated-hand-down {
    display: inline-block;
    animation: handBounceDown 1.2s ease-in-out 5; /* 5x nach UNTEN */
    animation-fill-mode: forwards;
    font-size: 1.3em;
    margin: 0 8px;
  }
  
  /* ========================================
     KLICKBARE STATS PILLS
     ======================================== */
  .stat-pill {
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .stat-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0.9;
  }
  
  .stat-pill:active {
    transform: translateY(0);
  }


/* ============================================================ */
/* tooltip-animations (originally lines 32147-32187) */
/* ============================================================ */

  @keyframes tooltipSlideIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  
  @keyframes slideIn {
    from {
      opacity: 0;
      transform: scale(0.9) translateY(-20px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }


/* ============================================================ */
/* profile-modal (originally lines 39400-39487) */
/* ============================================================ */

/* Profil-Modal Base Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow-y: auto;
}

.modal-content {
    position: relative;
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100px);
    }
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@media (max-width: 768px) {
    #profile-modal .modal-content {
        margin: 10px;
        max-width: calc(100% - 20px) !important;
        border-radius: 12px !important;
    }
    
    #profile-modal [style*="grid-template-columns:repeat(2,1fr)"] {
        grid-template-columns: 1fr !important;
    }
    
    #profile-modal .modal-content > div {
        max-height: 90vh;
        overflow-y: auto;
    }
}


/* ============================================================ */
/* token-loading-keyframes (originally lines 42802-42811) */
/* ============================================================ */

    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.1); }
    }
    @keyframes shimmer {
        0% { background-position: -200% 0; }
        100% { background-position: 200% 0; }
    }


/* ============================================================ */
/* Search Loading WOW Animation                                 */
/* ============================================================ */

.sl-ember {
    position: absolute;
    bottom: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124,92,255,1), rgba(168,85,247,0.3));
    box-shadow: 0 0 6px 2px rgba(124,92,255,0.6);
    animation: slEmberRise 2.8s ease-in infinite;
    pointer-events: none;
}

.sl-ember-cyan {
    background: radial-gradient(circle, rgba(0,198,255,1), rgba(0,198,255,0.3));
    box-shadow: 0 0 6px 2px rgba(0,198,255,0.6);
}

.sl-ember-pink {
    background: radial-gradient(circle, rgba(255,45,135,1), rgba(255,45,135,0.3));
    box-shadow: 0 0 6px 2px rgba(255,45,135,0.6);
}

.sl-title-gradient {
    background: linear-gradient(90deg, #7c5cff, #a855f7, #00c6ff, #ff2d87, #7c5cff);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: slTitleSweep 3s linear infinite;
    display: inline-block;
}

@keyframes slEmberRise {
    0%   { transform: translateY(0) scale(1);    opacity: 0; }
    10%  { opacity: 0.85; }
    80%  { opacity: 0.35; }
    100% { transform: translateY(-180px) scale(0.2); opacity: 0; }
}

@keyframes slTitleSweep {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

@keyframes nebulaPulse {
    0%, 100% { opacity: 0.6; }
    50%       { opacity: 1; }
}

@keyframes wowPulse {
    0%   { transform: scale(1);    opacity: 0.55; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}

@keyframes radarSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes radarSpinRev {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

@keyframes haloPulse {
    0%, 100% { opacity: 0.65; transform: scale(1); }
    50%       { opacity: 1;    transform: scale(1.12); }
}

@keyframes wowFloat {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-8px); }
}

@keyframes auraBreath {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%       { opacity: 1;    transform: scale(1.1); }
}

@keyframes wowHirsch {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(124,92,255,0.8)); }
    50%       { filter: drop-shadow(0 0 16px rgba(255,45,135,0.7)); }
}

@keyframes wowOrbit1 {
    from { transform: rotate(0deg)   translateX(82px)  rotate(0deg); }
    to   { transform: rotate(360deg) translateX(82px)  rotate(-360deg); }
}

@keyframes wowOrbit2 {
    from { transform: rotate(0deg)   translateX(96px)  rotate(0deg); }
    to   { transform: rotate(360deg) translateX(96px)  rotate(-360deg); }
}

@keyframes wowOrbit3 {
    from { transform: rotate(0deg)   translateX(108px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(108px) rotate(-360deg); }
}

@keyframes labelFade {
    0%, 100% { opacity: 0.45; }
    50%       { opacity: 1; }
}

@keyframes wowScan {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes dotBlink {
    0%, 100% { opacity: 0.2; transform: scale(0.75); }
    50%       { opacity: 1;   transform: scale(1.25); }
}