/* ============================================================
   Fußball Challenge – Animations & Design
   ============================================================ */

/* ── HERO EINSCHWEBEN ── */
@keyframes heroFloat {
  from { opacity: 0; transform: translateY(-28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-anim-1 { animation: heroFloat 1s cubic-bezier(.16,1,.3,1) .1s both; }
.hero-anim-2 { animation: heroFloat 1.1s cubic-bezier(.16,1,.3,1) .35s both; }
.hero-anim-3 { animation: heroFloat 1.1s cubic-bezier(.16,1,.3,1) .6s both; }
.hero-anim-4 { animation: heroFloat 1s cubic-bezier(.16,1,.3,1) .85s both; }

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── GLASSMORPHISM CARDS ── */
.lb-row {
  background: rgba(15,27,46,.72) !important;
  backdrop-filter: blur(14px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  transition:
    background .35s ease,
    border-color .35s ease,
    transform .45s cubic-bezier(.16,1,.3,1),
    box-shadow .45s cubic-bezier(.16,1,.3,1) !important;
}
.lb-row:hover {
  background: rgba(25,44,72,.88) !important;
  border-color: rgba(59,130,246,.4) !important;
  transform: translateX(8px) translateY(-2px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(59,130,246,.18) !important;
}
.lb-row.rank-top-1 {
  border-color: rgba(245,158,11,.3) !important;
  background: rgba(245,158,11,.06) !important;
}
.lb-row.rank-top-2 {
  border-color: rgba(148,163,184,.2) !important;
}
.lb-row.rank-top-3 {
  border-color: rgba(205,127,50,.22) !important;
}

/* ── RANK BADGE GLOW ── */
.rank-1 {
  box-shadow: 0 0 18px rgba(245,158,11,.55), 0 0 36px rgba(245,158,11,.22) !important;
  animation: pulse-gold 2.8s ease-in-out infinite;
}
@keyframes pulse-gold {
  0%,100% { box-shadow: 0 0 18px rgba(245,158,11,.55), 0 0 36px rgba(245,158,11,.22); }
  50%      { box-shadow: 0 0 28px rgba(245,158,11,.9), 0 0 56px rgba(245,158,11,.38); }
}

/* ── SCORE GRADIENT RANK 1 ── */
.lb-row.rank-top-1 .score-main {
  background: linear-gradient(135deg, #f59e0b, #fde68a, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

/* ── TAB NAV GLASS ── */
.tab-nav {
  background: rgba(8,16,32,.85) !important;
  backdrop-filter: blur(24px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

/* ── SECTION TITLE ── */
.section-title::after { display: none !important; }
.section-title::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 3px;
  height: 1em;
  background: linear-gradient(180deg, #3b82f6, #7c3aed);
  border-radius: 2px;
}

/* ── RANG-VERÄNDERUNG ── */
.rank-change { font-size:.62rem; font-weight:800; letter-spacing:.3px; line-height:1; }
.rank-up     { color:#22c55e; }
.rank-down   { color:#f87171; }
.rank-same   { color:var(--muted); }

/* ── MOBILE OPTIMIERUNG ── */
@media (max-width: 600px) {

  /* Hero */
  .hero { padding: 2.5rem 1rem 2rem !important; }
  .hero h1 { font-size: clamp(1.3rem, 6vw, 2rem) !important; letter-spacing: -.5px !important; }
  .hero-sub { font-size: .75rem !important; letter-spacing: 1px !important; }
  .hero-ball { font-size: 2.4rem !important; }

  /* Tages-Quote */
  .hero p[style*="font-style:italic"] { font-size: .82rem !important; padding: 0 .5rem !important; }

  /* Countdown */
  #hero-countdown { gap: .35rem !important; }
  #hero-countdown > div { min-width: 44px !important; padding: .4rem .5rem !important; }
  #hero-countdown > div > div:first-child { font-size: 1rem !important; }

  /* Tab Nav */
  .tab-nav { padding: 0 .4rem !important; gap: 0 !important; flex-wrap: nowrap !important; overflow-x: auto !important; }
  .tab-nav-inner { gap: 0 !important; flex-shrink: 0 !important; }
  .tab-btn { padding: 0 .6rem !important; font-size: .75rem !important; height: 42px !important; line-height: 42px !important; white-space: nowrap !important; }
  .week-nav-inline { gap: .25rem !important; flex-shrink: 0 !important; }
  .week-nav-inline .wl-range { font-size: .65rem !important; }
  .week-nav-inline .week-badge { display: none !important; }
  .week-nav-inline .week-nav-btn { padding: .15rem .45rem !important; font-size: .75rem !important; }

  /* Section Header */
  .section > div[style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #person-search { width: 100% !important; box-sizing: border-box !important; }
  #person-search:focus { width: 100% !important; }

  /* Leaderboard Cards */
  .lb-row { padding: .75rem .8rem !important; gap: .5rem !important; grid-template-columns: 32px 1fr auto !important; }
  .rank { width: 32px !important; height: 32px !important; font-size: .78rem !important; }
  .rank-change { font-size: .55rem !important; }
  .row-name { font-size: .88rem !important; }
  .person-avatar { width: 22px !important; height: 22px !important; margin-right: .3rem !important; }
  .streak-badge { font-size: .6rem !important; padding: .08rem .3rem !important; }
  .score-main { font-size: 1rem !important; }
  .score-unit { font-size: .58rem !important; }
  .score-raw { font-size: .65rem !important; }
  .row-acts { font-size: .68rem !important; gap: .4rem !important; }
  .row-bar { display: none !important; }

  /* Section Title */
  .section-title { font-size: .82rem !important; letter-spacing: .8px !important; margin-top: 1.8rem !important; }

  /* Toggle */
  .view-toggle { padding: .15rem !important; }
  .vt-btn { padding: .25rem .7rem !important; font-size: .75rem !important; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr !important; padding: 1.2rem 1rem !important; }
  .footer-links { text-align: left !important; flex-direction: row !important; flex-wrap: wrap !important; gap: .5rem !important; }
  .footer-acts { gap: .35rem !important; flex-wrap: wrap !important; }
  .footer-act { font-size: .68rem !important; padding: .18rem .55rem !important; }

  /* Sections */
  .section { margin-bottom: 2rem !important; padding: 0 .75rem !important; }
}

/* ── FOOTER ADMIN HIDDEN ── */
.footer-admin {
  opacity: 0 !important;
  transition: opacity .3s ease !important;
}
.footer-admin:hover {
  opacity: 1 !important;
}

/* ── PROGRESS BAR SHIMMER ── */
.row-bar-fill {
  position: relative;
  overflow: hidden;
}
.row-bar-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: shimmer 2.6s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { left: -60%; }
  100% { left: 140%; }
}

/* ── HERO ORB ── */
.hero-orb {
  opacity: .2 !important;
  filter: blur(110px) !important;
  transition: opacity 1s ease !important;
}

/* ── LIVE DOT PULSE ── */
.live-dot {
  animation: live-pulse 2s ease-out infinite !important;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.65); }
  70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* ── WEEK NAV BUTTONS ── */
.week-nav-btn {
  transition: background .25s ease, border-color .25s ease, transform .2s cubic-bezier(.16,1,.3,1) !important;
}
.week-nav-btn:hover:not(.disabled) {
  transform: scale(1.1) !important;
  border-color: #3b82f6 !important;
}

/* ── TOGGLE BUTTON ── */
.vt-btn {
  transition: background .3s cubic-bezier(.16,1,.3,1), color .3s ease, transform .2s cubic-bezier(.16,1,.3,1) !important;
}
.vt-btn.active {
  box-shadow: 0 2px 16px rgba(59,130,246,.45);
}
.vt-btn:not(.active):hover {
  transform: scale(1.06);
}

/* ── FOOTER GLASS ── */
.site-footer {
  background: rgba(8,14,28,.92) !important;
  backdrop-filter: blur(14px);
}

/* ── SCORE FADE-IN ── */
@keyframes countUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.score-main {
  animation: countUp .55s cubic-bezier(.16,1,.3,1) forwards;
}

/* ── EMPTY STATE ── */
.empty-state {
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--muted);
}
.empty-icon {
  font-size: 3rem;
  margin-bottom: .75rem;
  display: block;
  animation: bounce-icon 1.6s ease-in-out infinite alternate;
}
@keyframes bounce-icon {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}
.empty-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .35rem;
}
.empty-sub {
  font-size: .85rem;
  color: var(--muted);
}

/* ── PERSON AVATAR ── */
.person-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: .45rem;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,.12);
}
.person-avatar-init {
  font-size: .75rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* ── SKELETON LOADING ── */
@keyframes skeleton-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #131f33 25%, #1e2f4a 50%, #131f33 75%);
  background-size: 600px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
.skeleton-card {
  background: rgba(15,27,46,.72);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  margin-bottom: .6rem;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 1rem;
  align-items: center;
}
.skeleton-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.skeleton-text-wrap { display: flex; flex-direction: column; gap: .5rem; }
.skeleton-line { height: 14px; }
.skeleton-line-short { width: 60%; }
.skeleton-score { width: 80px; height: 28px; border-radius: 6px; margin-left: auto; }