/* ===================================
   LEVEL SYSTEM - AVATAR BORDER FRAMES
   Using PNG overlay images (League of Legends style)
   
   NOTE: This file ONLY adds ::before overlays for PNG borders.
   Base avatar sizing is handled by each page's CSS (cf-avatar, etc.)
   =================================== */

/* Base requirements for PNG overlays (do NOT set width/height here) */
.player-avatar,
.dropdown-avatar {
  position: relative !important;
  isolation: isolate;
  overflow: visible !important;
}

/* Standalone dropdown avatar (not in coinflip) */
.dropdown-avatar:not(.cf-avatar) {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

/* Border Frame Overlay (using ::before for PNG image) */
.player-avatar::before,
.dropdown-avatar::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.95;
}

.player-avatar::before {
  width: 80px;
  height: 80px;
}

.dropdown-avatar::before {
  width: 70px;
  height: 70px;
}

/* ===== LEVEL 1-4: ROOKIE (No frame) ===== */
.player-avatar.avatar-rookie::before,
.dropdown-avatar.avatar-rookie::before {
  display: none;
}

/* ===== LEVEL 5-9: BRONZE ===== */
.player-avatar.avatar-bronze::before,
.dropdown-avatar.avatar-bronze::before {
  background-image: url('/static/img/borders/Bronzeborder.png');
  filter: drop-shadow(0 0 8px rgba(205, 127, 50, 0.6));
}

/* ===== LEVEL 10-14: SILVER ===== */
.player-avatar.avatar-silver::before,
.dropdown-avatar.avatar-silver::before {
  background-image: url('/static/img/borders/Silverborder.png');
  filter: drop-shadow(0 0 10px rgba(192, 192, 192, 0.7));
}

/* ===== LEVEL 15-19: GOLD ===== */
.player-avatar.avatar-gold::before,
.dropdown-avatar.avatar-gold::before {
  background-image: url('/static/img/borders/Goldborder.png');
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.8));
}

/* ===== LEVEL 20-29: RUBY ===== */
.player-avatar.avatar-gold-elite::before,
.dropdown-avatar.avatar-gold-elite::before,
.player-avatar.avatar-platinum::before,
.dropdown-avatar.avatar-platinum::before {
  background-image: url('/static/img/borders/Rubyborder.png');
  filter: drop-shadow(0 0 15px rgba(220, 20, 60, 0.9));
}

.player-avatar.avatar-gold-elite::before,
.player-avatar.avatar-platinum::before {
  width: 85px;
  height: 85px;
}

.dropdown-avatar.avatar-gold-elite::before,
.dropdown-avatar.avatar-platinum::before {
  width: 75px;
  height: 75px;
}

/* ===== LEVEL 30-39: DIAMOND ===== */
.player-avatar.avatar-diamond::before,
.dropdown-avatar.avatar-diamond::before {
  background-image: url('/static/img/borders/Diamondborder.png');
  filter: drop-shadow(0 0 18px rgba(185, 242, 255, 1));
}

.player-avatar.avatar-diamond::before {
  width: 90px;
  height: 90px;
}

.dropdown-avatar.avatar-diamond::before {
  width: 80px;
  height: 80px;
}

/* ===== LEVEL 40+: CHALLENGER (Mythic & Legendary) ===== */
.player-avatar.avatar-mythic::before,
.dropdown-avatar.avatar-mythic::before,
.player-avatar.avatar-legendary::before,
.dropdown-avatar.avatar-legendary::before {
  background-image: url('/static/img/borders/Challengerborder.png');
  filter: drop-shadow(0 0 25px rgba(255, 215, 0, 1)) drop-shadow(0 0 35px rgba(157, 78, 221, 0.8));
}

.player-avatar.avatar-mythic::before,
.player-avatar.avatar-legendary::before {
  width: 100px;
  height: 100px;
}

.dropdown-avatar.avatar-mythic::before,
.dropdown-avatar.avatar-legendary::before {
  width: 90px;
  height: 90px;
}

/* Subtle hover effect */
.player-avatar:hover::before,
.dropdown-avatar:hover::before {
  transform: translate(-50%, -50%) scale(1.05);
  transition: transform 0.3s ease;
}