/**
 * moj.golf - Ranking Page Styles v25
 * Design System zgodny z docs/styleguide.md
 * Wymaga: global-25.css, components-25.css, header-nav-25.css, footer-25.css
 */

/* =============================================================================
   0. PAGE SETUP
   ============================================================================= */

/* Prevent horizontal scroll on ranking page */
body {
  overflow-x: hidden;
  position: relative;
}

/* Hero section, header i nav overrides są w header-nav-25.css */

/* =============================================================================
   1. PODIUM (TOP 3) - specyficzne dla strony ranking
   ============================================================================= */

.podium-section {
  margin-bottom: var(--spacing-10);
}

.podium-title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark-primary);
  margin-bottom: var(--spacing-6);
  text-align: center;
}

@media (min-width: 768px) {
  .podium-title {
    text-align: left;
  }
}

.podium {
  display: grid;
  gap: var(--spacing-4);
  grid-template-columns: 1fr;
  max-width: 100%;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .podium {
    grid-template-columns: 1fr;
  }

  .podium-place.place-1 {
    order: 1;
  }

  .podium-place.place-2 {
    order: 2;
  }

  .podium-place.place-3 {
    order: 3;
  }
}

@media (min-width: 768px) {
  .podium {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-6);
    max-width: 960px;
  }

  .podium-place.place-1 {
    transform: translateY(-12px);
  }
}

/* Podium Card */
.podium-place {
  background-color: var(--color-white);
  border-radius: 12px;
  padding: var(--spacing-8) var(--spacing-6) var(--spacing-6);
  box-shadow: var(--shadow-lg);
  text-align: center;
  transition: all var(--duration-normal) var(--ease-out);
  border: 3px solid transparent;
  position: relative;
  overflow: hidden;
}

.podium-place::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, transparent, var(--color-gray-300), transparent);
}

.podium-place:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  transform: translateY(-6px);
}

.podium-place.place-1 {
  border-color: var(--color-gold);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, var(--color-white) 100%);
}

.podium-place.place-1::before {
  background: linear-gradient(90deg, var(--color-gold), #FFD700, var(--color-gold));
  height: 8px;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
}

.podium-place.place-1:hover {
  transform: translateY(-20px);
  box-shadow: 0 24px 48px rgba(212, 175, 55, 0.25);
}

.podium-place.place-2 {
  border-color: #C0C0C0;
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.05) 0%, var(--color-white) 100%);
}

.podium-place.place-2::before {
  background: linear-gradient(90deg, #C0C0C0, #E8E8E8, #C0C0C0);
}

.podium-place.place-3 {
  border-color: #CD7F32;
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.05) 0%, var(--color-white) 100%);
}

.podium-place.place-3::before {
  background: linear-gradient(90deg, #CD7F32, #E6A75C, #CD7F32);
}

/* Podium Rank - Large Medal Style */
.podium-rank {
  font-size: 72px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  margin-bottom: var(--spacing-3);
  background: linear-gradient(135deg, var(--color-dark-primary), var(--color-dark-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.podium-place.place-1 .podium-rank {
  background: linear-gradient(135deg, var(--color-gold), #FFD700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 4px rgba(212, 175, 55, 0.3));
}

.podium-place.place-2 .podium-rank {
  background: linear-gradient(135deg, #A8A8A8, #D3D3D3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.podium-place.place-3 .podium-rank {
  background: linear-gradient(135deg, #CD7F32, #E6A75C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Player Name - Hero Element */
.podium-name {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-4);
  word-break: break-word;
  line-height: var(--line-height-tight);
}

/* Stats Container */
.podium-stats {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding-top: var(--spacing-3);
  border-top: 2px solid var(--color-gray-100);
}

/* XP - Primary Stat */
.podium-xp {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark-primary);
  margin-bottom: var(--spacing-1);
}

/* Level - Secondary */
.podium-level {
  font-size: var(--font-size-body);
  color: var(--color-gray-600);
  font-weight: var(--font-weight-semibold);
}

/* Achievements - Tertiary */
.podium-achievements {
  font-size: var(--font-size-body-sm);
  color: var(--color-gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  margin-top: var(--spacing-2);
}

/* =============================================================================
   2. RANKING LIST
   ============================================================================= */

.ranking-intro {
  font-size: var(--font-size-body);
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-700);
  background: var(--color-white);
  padding: var(--spacing-6);
  border-left: 4px solid var(--color-green-fairway);
  border-radius: 8px;
  margin-bottom: var(--spacing-6);
  box-shadow: var(--shadow-sm);
}

.ranking-intro + .ranking-intro {
  margin-top: calc(var(--spacing-6) * -1 + var(--spacing-3));
  border-top: 1px solid var(--color-gray-200);
  padding-top: var(--spacing-4);
}

.ranking-link {
  color: var(--color-green-fairway);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
  border-bottom: 2px solid transparent;
}

.ranking-link:hover {
  color: var(--color-green-green);
  border-bottom-color: var(--color-green-green);
}

@media (max-width: 767px) {
  .ranking-intro {
    font-size: var(--font-size-body-sm);
    padding: var(--spacing-4);
  }

  .ranking-intro + .ranking-intro {
    padding-top: var(--spacing-3);
  }
}

.ranking-section {
  margin-bottom: var(--spacing-8);
}

.section-title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-dark-primary);
  margin-bottom: var(--spacing-5);
  text-align: left;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

/* Ranking Item */
.ranking-item {
  background-color: var(--color-white);
  border-radius: 8px;
  padding: var(--spacing-4);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  transition: all var(--duration-normal) var(--ease-out);
  border: 2px solid var(--color-gray-200);
  position: relative; /* Dla absolute positioning rank badge na mobile */
}

.ranking-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--color-dark-primary);
}

/* Top 3 colored borders */
.ranking-item.rank-1 {
  border-color: var(--color-gold);
  border-width: 3px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, var(--color-white) 100%);
}

.ranking-item.rank-1:hover {
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.2);
  border-color: var(--color-gold);
}

.ranking-item.rank-2 {
  border-color: #C0C0C0;
  border-width: 3px;
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.03) 0%, var(--color-white) 100%);
}

.ranking-item.rank-2:hover {
  box-shadow: 0 8px 24px rgba(192, 192, 192, 0.2);
  border-color: #C0C0C0;
}

.ranking-item.rank-3 {
  border-color: #CD7F32;
  border-width: 3px;
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.03) 0%, var(--color-white) 100%);
}

.ranking-item.rank-3:hover {
  box-shadow: 0 8px 24px rgba(205, 127, 50, 0.2);
  border-color: #CD7F32;
}

/* Ranking Rank Badge */
.ranking-rank {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  background-color: var(--color-dark-primary);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .ranking-rank {
    width: 56px;
    height: 56px;
    font-size: var(--font-size-h3);
  }
}

/* Top 3 rank badge colors */
.ranking-item.rank-1 .ranking-rank {
  background: linear-gradient(135deg, var(--color-gold), #FFD700);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.ranking-item.rank-2 .ranking-rank {
  background: linear-gradient(135deg, #A8A8A8, #D3D3D3);
  box-shadow: 0 4px 12px rgba(192, 192, 192, 0.3);
}

.ranking-item.rank-3 .ranking-rank {
  background: linear-gradient(135deg, #CD7F32, #E6A75C);
  box-shadow: 0 4px 12px rgba(205, 127, 50, 0.3);
}

/* Ranking Achievements Gallery */
.ranking-achievements-gallery {
  display: flex;
  gap: var(--spacing-1);
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  max-width: 60%;
}

.ranking-achievement-img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  transition: transform var(--duration-fast) var(--ease-out);
  cursor: pointer;
}

.ranking-achievement-img:hover {
  transform: scale(1.15);
  z-index: 10;
}

@media (min-width: 768px) {
  .ranking-achievement-img {
    width: 48px;
    height: 48px;
  }
}

/* Mobile-first responsive design */
@media (max-width: 640px) {
  /* Ranking item na mobile - layout kolumnowy */
  .ranking-item {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
  }

  /* Header row: rank + nazwa + poziom */
  .ranking-item > * {
    width: 100%;
  }

  /* Ranking rank - mniejszy i inline z nazwą */
  .ranking-rank {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-h5);
    position: absolute;
    top: var(--spacing-3);
    left: var(--spacing-3);
  }

  /* Info section - dodaj padding dla rank badge */
  .ranking-info {
    padding-left: 56px; /* 40px rank + 16px gap */
    min-height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Nazwa gracza - mniejsza czcionka */
  .ranking-name {
    font-size: var(--font-size-body);
    margin-bottom: 2px;
  }

  /* Meta info - bardziej kompaktowe */
  .ranking-meta {
    font-size: 12px;
    gap: var(--spacing-1);
  }

  /* Galeria osiągnięć - pełna szerokość, wyśrodkowana */
  .ranking-achievements-gallery {
    max-width: 100%;
    justify-content: center;
    margin-top: var(--spacing-3);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--color-gray-200);
    gap: var(--spacing-2);
  }

  .ranking-achievement-img {
    width: 36px;
    height: 36px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .ranking-achievement-img:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }

  /* Lista rankingu - mniejsze odstępy */
  .ranking-list {
    gap: var(--spacing-2);
  }
}

/* Bardzo małe ekrany (do 380px) */
@media (max-width: 380px) {
  .ranking-achievement-img {
    width: 30px;
    height: 30px;
  }

  .ranking-meta {
    font-size: 11px;
  }

  .ranking-separator {
    display: none; /* Ukryj separatory na bardzo małych ekranach */
  }

  .ranking-rank {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .ranking-info {
    padding-left: 48px;
  }

  .ranking-name {
    font-size: 14px;
  }

  /* Podium na bardzo małych ekranach */
  .podium-rank {
    font-size: 48px;
  }

  .podium-place {
    padding: var(--spacing-5) var(--spacing-4) var(--spacing-4);
  }
}

/* Ranking Info */
.ranking-info {
  flex: 1;
  min-width: 0;
}

.ranking-name {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-1);
  word-break: break-word;
}

.ranking-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  align-items: center;
  font-size: var(--font-size-body-sm);
  color: var(--color-gray-600);
}

.ranking-level {
  font-weight: var(--font-weight-semibold);
  color: var(--color-dark-primary);
}

.ranking-xp {
  font-weight: var(--font-weight-semibold);
  color: var(--color-dark-primary);
}

.ranking-achievements {
  color: var(--color-gray-600);
}

.ranking-separator {
  color: var(--color-gray-400);
}

/* =============================================================================
   3. LOADING STATE
   ============================================================================= */

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  padding: var(--spacing-12) var(--spacing-4);
  color: var(--color-gray-600);
  text-align: center;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--color-gray-200);
  border-top-color: var(--color-green-fairway);
  border-radius: 50%;
  animation: spinner-rotation 0.8s linear infinite;
}

@keyframes spinner-rotation {
  to {
    transform: rotate(360deg);
  }
}

/* =============================================================================
   4. EMPTY STATE
   ============================================================================= */

.empty-state {
  text-align: center;
  padding: var(--spacing-8);
  color: var(--color-gray-600);
}

.empty-state p {
  font-size: var(--font-size-body-lg);
  margin-bottom: 0;
}

/* =============================================================================
   5. RESPONSIVE ADJUSTMENTS
   ============================================================================= */

/* Mobile optimizations */
@media (max-width: 767px) {
  .page-header {
    padding: var(--spacing-4) 0;
    margin-bottom: var(--spacing-6);
  }

  .podium-section {
    margin-bottom: var(--spacing-8);
  }

  /* Podium cards - więcej paddingu dla czytelności */
  .podium-place {
    padding: var(--spacing-6) var(--spacing-5) var(--spacing-5);
  }

  /* Podium rank - mniejszy na mobile */
  .podium-rank {
    font-size: 56px;
  }

  /* Podium name - mniejsza czcionka */
  .podium-name {
    font-size: var(--font-size-h5);
  }

  /* Podium meta - bardziej kompaktowe */
  .podium-meta {
    font-size: 13px;
    gap: var(--spacing-1);
  }
}

/* Desktop optimizations */
@media (min-width: 1024px) {
  .page-header {
    margin-bottom: var(--spacing-10);
  }

  .podium-section {
    margin-bottom: var(--spacing-12);
  }
}