:root{
  --bg1:#2a1540;
  --bg2:#130a1f;
  --card:rgba(11,9,20,.62);
  --card2:rgba(16,12,28,.72);
  --stroke:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --brand1:#ffb300;
  --brand2:#ff6a00;
  --blue:#3aa7ff;
  --shadow:0 18px 60px rgba(0,0,0,.45);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  overflow:hidden;
  background: radial-gradient(1200px 600px at 20% 0%, #3c1a5e 0%, transparent 55%),
              radial-gradient(900px 500px at 85% 15%, rgba(255,120,0,.22) 0%, transparent 55%),
              radial-gradient(900px 700px at 50% 100%, #0b0613 0%, #070510 55%, #05040d 100%);
}

.bg{position:fixed; inset:0; z-index:-2;}
.bgGlow{
  position:absolute; inset:-120px;
  background:
    radial-gradient(circle at 55% 35%, rgba(255,140,0,.25), transparent 60%),
    radial-gradient(circle at 25% 30%, rgba(58,167,255,.16), transparent 55%),
    radial-gradient(circle at 70% 65%, rgba(166,74,255,.16), transparent 55%);
  filter: blur(60px);
  opacity:.95;
}
.bgSmoke{
  position:absolute; inset:-40px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.05), transparent 62%);
  filter: blur(55px);
  animation: drift 18s ease-in-out infinite;
  opacity:.45;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-40px,24px,0)}
  100%{transform:translate3d(0,0,0)}
}

.topbar{
  position:fixed;
  top:0; left:0; right:0;
  padding: calc(env(safe-area-inset-top) + 12px) 14px 12px;
  display:flex; align-items:center; justify-content:space-between;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0));
  backdrop-filter: blur(10px);
  z-index:10;
}

.profile{display:flex; gap:10px; align-items:center;}
.avatar{
  width:42px; height:42px; border-radius:14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(58,167,255,.30), rgba(166,74,255,.22));
  border:1px solid var(--stroke);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  font-weight:800;
}
.meta .name{font-weight:800; letter-spacing:.2px;}
.rankline{display:flex; gap:10px; align-items:center; margin-top:2px;}
.pill{
  font-size:12px; padding:4px 8px; border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid var(--stroke);
}
.muted{color:var(--muted); font-size:12px;}
.small{font-size:12px;}

.wallet{display:flex; gap:10px; align-items:center;}
.coins{
  display:flex; gap:8px; align-items:center;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(0,0,0,.28);
  border:1px solid var(--stroke);
}
.coinDot{width:10px; height:10px; border-radius:99px;
  background: radial-gradient(circle at 30% 30%, #fff, var(--brand1));
  box-shadow:0 0 16px rgba(255,160,40,.55);
}
.iconBtn{
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.28);
  display:grid; place-items:center;
  cursor:pointer;
}
.iconBtn img{width:18px; height:18px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.4));}

.app{
  height:100%;
  padding: 92px 14px calc(86px + env(safe-area-inset-bottom));
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.page{display:none;}
.page.active{display:block;}

.card, .heroCard, .gameCard{
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
  padding:14px;
}
.heroCard{padding:14px; margin-bottom:12px;}
.logoWrap{display:flex; justify-content:center; padding:6px 0 10px;}
.logo{width:min(520px, 92%); height:auto; display:block;}

.statsRow{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.stat{
  padding:12px 10px;
  border-radius:16px;
  background: rgba(0,0,0,.25);
  border:1px solid var(--stroke);
}
.stat .label{font-size:12px; color:var(--muted);}
.stat .value{font-size:20px; font-weight:900; margin-top:4px;}
.stat .hint{font-size:11px; color:rgba(255,255,255,.72); margin-top:2px;}

.gameCard{margin-bottom:10px;}
.gameHeader{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.title{font-weight:900; font-size:16px;}
.xpPill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,160,40,.16);
  border:1px solid rgba(255,160,40,.25);
  color: rgba(255,230,210,.95);
}


.board.small{min-height:220px; grid-template-columns: repeat(3, 1fr);}

.hole {
  position: relative !important;
  width: 100% !important;
  height: 0 !important;
  padding-bottom: 100% !important;
  border-radius: 22px !important;
  overflow: hidden !important; /* Меняем на hidden чтобы крот не вылазил за пределы */
  cursor: pointer !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: transform 0.2s ease !important;
}

.hole::before{
  content:"";
  position:absolute; inset:12% 10% 18%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.90), rgba(0,0,0,.65) 55%, rgba(0,0,0,.0) 72%);
  filter: blur(.3px);
  opacity:.95;
}

.mole{
  position:absolute;
  left:50%;
  bottom:-8%;
  transform: translate(-50%, 70%);
  width:70%;
  height:auto;
  transition: transform .18s ease;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.6));
  pointer-events:none;
}
.hole.missFlash{ animation: missFlash .18s ease; }
@keyframes missFlash{ 0%{box-shadow:0 0 0 rgba(255,255,255,0)} 50%{box-shadow:0 0 0 3px rgba(255,255,255,.18)} 100%{box-shadow:0 0 0 rgba(255,255,255,0)} }

.hammer{
  position:absolute;
  width:72%;
  left: 56%;
  top: 10%;
  transform-origin: 10% 10%;
  transform: translate(-50%, -50%) rotate(-55deg);
  opacity:0;
  pointer-events:none;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.6));
}
.hole.swing .hammer{
  opacity:1;
  animation: swing .18s ease-out forwards;
}
@keyframes swing{
  0%{transform: translate(-50%,-50%) rotate(-65deg) scale(1.02)}
  100%{transform: translate(-50%, 5%) rotate(25deg) scale(.98)}
}

.gameFooter{display:flex; gap:10px; margin-top:12px;}
.btn{
  flex:1;
  border:0;
  border-radius: 22px;
  padding:14px 14px;
  font-weight:900;
  cursor:pointer;
  background: linear-gradient(135deg, var(--brand1), var(--brand2));
  color:#1b0f26;
  box-shadow: 0 14px 40px rgba(255,120,0,.35);
}
.btn.ghost{
  background: rgba(255,255,255,.06);
  border:1px solid var(--stroke);
  color: var(--text);
  box-shadow:none;
}
.btn:disabled{opacity:.55; cursor:not-allowed;}

.tip{
  padding: 10px 6px;
  color: rgba(255,255,255,.75);
  font-size:12px;
  text-align:center;
}

.cardTitle{font-weight:900; margin-bottom:10px;}
.list{display:flex; flex-direction:column; gap:10px;}
.row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px;
  border-radius: 22px;
  background: rgba(0,0,0,.22);
  border:1px solid var(--stroke);
}
.row .left{display:flex; gap:10px; align-items:center;}
.badge{
  font-size:12px; padding:6px 10px; border-radius:999px;
  background: rgba(58,167,255,.16);
  border: 1px solid rgba(58,167,255,.24);
}
.price{display:flex; gap:8px; align-items:center; font-weight:900;}
.price .coinDot{width:8px; height:8px}

.bottomNav{
  position:fixed;
  left:0; right:0; bottom:0;
  padding: 10px 14px calc(env(safe-area-inset-bottom) + 10px);
  display:grid;
  grid-template-columns: 1fr 1fr 84px 1fr 1fr;
  align-items:end;
  gap:10px;
  z-index:20;
}

.bottomNav::before{
  content:'';
  position:absolute;
  left:12px; right:12px;
  bottom: calc(env(safe-area-inset-bottom) + 6px);
  height:64px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgb(24 0 1), rgb(67 10 2));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.65);
}
.bottomNav > *{ position:relative; z-index:1; }
.navItem{
  height:60px;
  border-radius: 999px;
  background: transparent;
  border:none;
  color: var(--text);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
}
.navItem img{width:50px; height:50px; opacity:.92;}
.navItem span{font-size:11px; color:rgba(255,255,255,.78);}
.navItem.active{border-color: rgba(255,160,40,.35); box-shadow:0 0 0 2px rgba(255,160,40,.12) inset;}

.navCenter{
  position:relative;
  height:84px;
  border:0;
  background: transparent;
  cursor:pointer;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.centerRing{
  position:absolute;
  width:84px; height:84px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,160,40,.28);
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 24px rgba(255,120,0,.20);
}
.centerHead{
  position:relative;
  width:178px; height:128px;
  transform: translateY(25px);
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.55));
  border-radius: 999px;
}

.pvpBox{margin-top:12px; padding:12px; border-radius:16px; background:rgba(0,0,0,.22); border:1px solid var(--stroke);}
.pvpRow{display:flex; gap:10px; margin-top:10px;}
.pvpStatus{font-weight:800;}
.pvpMatch{margin-top:12px;}
.pvpMatch.hidden{display:none;}
.pvpTimer{font-size:34px; font-weight:1000; text-align:center; margin-bottom:6px;}
.pvpScore{display:flex; justify-content:space-between; color:rgba(255,255,255,.86); margin-bottom:10px;}

.refBox{display:flex; flex-direction:column; gap:10px;}
.refLink{
  padding:12px; border-radius:16px;
  background: rgba(0,0,0,.22);
  border:1px solid var(--stroke);
  word-break: break-all;
}

#fx{position:fixed; inset:0; pointer-events:none; z-index:5;}

/* ====== ОСНОВНЫЕ ИСПРАВЛЕНИЯ ДЛЯ СЕТКИ ЛУНОК ====== */

/* Контейнер для игрового поля */
.board {
  width: 100% !important;
  min-height: 320px !important;
  max-width: 500px !important;
  margin: 0 auto !important;
  padding: 12px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 24px !important;
  box-shadow: 
    inset 0 2px 10px rgba(0, 0, 0, 0.5),
    0 10px 40px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(10px) !important;
  overflow: visible !important;
}

/* Сетка лунок - ФИКС РАЗМЕРА */
#holesGrid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  padding: 8px !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important; /* Делаем квадрат */
  max-height: 500px !important;
  margin: 0 auto !important;
}

/* Каждая лунка - правильные размеры */
.hole {
  position: relative !important;
  width: 100% !important;
  height: 0 !important;
  padding-bottom: 100% !important; /* Делаем квадрат */
  border-radius: 22px !important;
  overflow: visible !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: transform 0.2s ease !important;
}

/* Эффект при нажатии */
.hole:active {
  transform: scale(0.95) !important;
}

/* Внутренний контейнер для позиционирования */
.hole-inner {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important; /* Важно! Обрезаем все что вылазит */
  border-radius: 22px !important;
}

/* Лунка (дыра) */
.holeImg {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* Меняем на cover для заполнения */
  pointer-events: none !important;
  z-index: 1 !important;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.7)) !important;
}

.moleImg {
  position: absolute !important;
  left: 50% !important;
  bottom: -60% !important; /* Полностью скрыт под лункой */
  transform: translateX(-50%) !important;
  width: 80% !important; /* Немного уменьшаем для аккуратности */
  height: auto !important;
  object-fit: contain !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transition: bottom 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.5) !important; /* Более плавная анимация */
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.8)) !important;
  will-change: bottom !important;
}

/* Крот появляется - ПРАВИЛЬНАЯ ВЫСОТА */
.moleImg.up {
  bottom: 15% !important; /* Появляется из лунки, но не слишком высоко */
}

/* Попадание по кроту */
.moleImg.hit {
  filter: drop-shadow(0 0 20px rgba(255, 50, 50, 0.8)) brightness(1.3) !important;
  animation: hitEffect 0.3s ease !important;
}

@keyframes hitEffect {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.1); }
}

/* Бонусный крот */
.moleImg.bonus {
  filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.9)) brightness(1.2) !important;
  animation: bonusGlow 1.5s infinite ease-in-out !important;
}

@keyframes bonusGlow {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6)) brightness(1.1); }
  50% { filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1)) brightness(1.3); }
}

/* Молоток */
.hammerImg {
  position: absolute !important;
  left: 60% !important;
  top: 8% !important;
  transform: translateX(-50%) rotate(-25deg) !important;
  transform-origin: 20% 80% !important;
  width: 85% !important; /* Увеличиваем молоток */
  height: auto !important;
  max-height: 85% !important;
  object-fit: contain !important;
  pointer-events: none !important;
  z-index: 3 !important;
  opacity: 0 !important;
  transition: opacity 0.15s ease !important;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.9)) !important;
}

/* Анимация молотка */
.hammerImg.swing {
  opacity: 1 !important;
  animation: hammerSwing 0.3s ease-out !important;
}

@keyframes hammerSwing {
  0% { 
    transform: translateX(-50%) rotate(-35deg) scale(1.15);
  }
  50% {
    transform: translateX(-50%) rotate(20deg) scale(0.9);
  }
  100% { 
    transform: translateX(-50%) rotate(-25deg) scale(1);
  }
}

/* ====== АДАПТИВНОСТЬ ====== */

/* Мобильные устройства (до 400px) */
@media (max-width: 400px) {
  #holesGrid {
    gap: 8px !important;
    padding: 6px !important;
  }
  
  .board {
    min-height: 280px !important;
    padding: 8px !important;
  }
  
  .hole {
    border-radius: 18px !important;
  }
  
  .moleImg {
    width: 95% !important;
  }
  
  .hammerImg {
    width: 90% !important;
  }
}

/* Планшеты и большие телефоны (401px - 767px) */
@media (min-width: 401px) and (max-width: 767px) {
  #holesGrid {
    gap: 10px !important;
    padding: 10px !important;
  }
  
  .board {
    min-height: 350px !important;
    max-width: 450px !important;
  }
}

/* Десктоп (768px и выше) */
@media (min-width: 768px) {
  #holesGrid {
    gap: 14px !important;
    padding: 12px !important;
    max-width: 500px !important;
  }
  
  .board {
    min-height: 400px !important;
    max-width: 550px !important;
    padding: 16px !important;
  }
  
  .hole {
    border-radius: 24px !important;
  }
}

/* Очень большие экраны */
@media (min-width: 1024px) {
  #holesGrid {
    max-width: 600px !important;
  }
  
  .board {
    max-width: 650px !important;
    min-height: 450px !important;
  }
}

/* ====== УБИРАЕМ СТАРЫЕ СТИЛИ КОТОРЫЕ МЕШАЮТ ====== */

/* Убираем все ненужные псевдоэлементы */
.hole::before,
.hole::after {
  display: none !important;
}

/* Убираем старые классы анимаций если они есть */
.hole.swing .hammer,
.hole.missFlash {
  display: none !important;
}

/* ====== ПРЕДЗАГРУЗКА ДЛЯ ПЛАВНОСТИ ====== */
.hole * {
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* ====== ИСПРАВЛЕНИЕ ДЛЯ ИГРОВОГО ЭКРАНА ====== */
#game,
.game-field {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Убираем отступы которые могут сжимать поле */
.app main,
.app .page {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Центрируем игровую карточку */
.gameCard {
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto 20px !important;
}

/* ====== ДОПОЛНИТЕЛЬНЫЕ ЭФФЕКТЫ ====== */

/* Подсветка активной лунки */
.hole.active-hole {
  box-shadow: 0 0 0 3px rgba(255, 180, 0, 0.5) !important;
}

/* Эффект промаха */
@keyframes missShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.hole.miss {
  animation: missShake 0.3s ease !important;
}

/* ====== ИСПРАВЛЕНИЕ ОТОБРАЖЕНИЯ В TELEGRAM ====== */
:root {
  --tg-viewport-height: 100vh;
}

body {
  min-height: var(--tg-viewport-height, 100vh);
  overflow-x: hidden;
}

/* Фикс для Safari */
@supports (-webkit-touch-callout: none) {
  #holesGrid {
    gap: 10px !important;
  }
  
  .hole {
    -webkit-transform: translateZ(0);
  }
}

/* Новая шапка со статистикой */
.stats-header {
    margin-bottom: 20px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.stat-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    padding: 15px;
    text-align: center;
    backdrop-filter: blur(10px);
}

.stat-icon {
    font-size: 24px;
    margin-bottom: 8px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.stat-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-label {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}

.stat-value {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.stat-value .small {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
}

.stat-hint {
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
}

/* Улучшенные ранги в лидерборде */
.rank {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
}

.rank-1 {
    background: linear-gradient(135deg, #ffd700, #ffa500);
    color: #000;
}

.rank-2 {
    background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
    color: #000;
}

.rank-3 {
    background: linear-gradient(135deg, #cd7f32, #a6692e);
    color: #000;
}

/* Статистика в лидерборде */
.stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.coinDot.small {
    width: 6px;
    height: 6px;
}

/* Стили для реферальной статистики */
.ref-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 15px;
    padding: 12px;
    background: rgba(0,0,0,0.2);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
}

.ref-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.ref-stat-label {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
}

.ref-stat-value {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}

/* Улучшенный статус в рефералах */
.status {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Анимация для активных бустов */
@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

.active-boost {
    animation: pulse 2s infinite;
}

/* Улучшенный PVP интерфейс */
.pvp-timer {
    font-size: 32px;
    font-weight: 800;
    text-align: center;
    background: linear-gradient(135deg, #ff6b00, #ffa500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 10px 0;
}

.pvp-score {
    display: flex;
    justify-content: space-around;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}

.pvp-score span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.pvp-score b {
    font-size: 24px;
    color: #ffb300;
}

/* PVP стили */
.pvp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.pvp-hole {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: rgba(0,0,0,0.3);
    border-radius: 16px;
    border: 2px solid rgba(255,255,255,0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.pvp-hole:hover {
    transform: scale(1.05);
}

.pvp-hole.active {
    border-color: #ffb300;
    box-shadow: 0 0 20px rgba(255, 180, 0, 0.5);
    background: rgba(255, 180, 0, 0.1);
}

.pvp-hole:active {
    transform: scale(0.95);
}

/* ====== МАГАЗИН БУСТОВ ====== */
.shop-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 0 10px;
}

.shop-title-image {
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 auto 10px;
  display: block;
  filter: drop-shadow(0 10px 30px rgba(255, 180, 0, 0.3));
  border-radius: 20px;
}

.shop-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  text-align: center;
  margin-top: 5px;
}

.shop-card {
  background: linear-gradient(135deg, 
    rgba(30, 20, 50, 0.9), 
    rgba(15, 10, 30, 0.9));
  border: 2px solid rgba(255, 180, 0, 0.3);
  box-shadow: 0 15px 40px rgba(255, 120, 0, 0.2);
  margin-bottom: 16px;
}

.active-boosts-card {
  background: linear-gradient(135deg, 
    rgba(20, 30, 50, 0.9), 
    rgba(10, 15, 30, 0.9));
  border: 2px solid rgba(58, 167, 255, 0.3);
  box-shadow: 0 15px 40px rgba(58, 167, 255, 0.2);
}

/* Список бустов в магазине */
.shop-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.boost-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.boost-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 180, 0, 0.5), 
    transparent);
}

.boost-item:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 180, 0, 0.5);
  box-shadow: 0 10px 25px rgba(255, 180, 0, 0.2);
  background: rgba(0, 0, 0, 0.6);
}

.boost-item-left {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
}

.boost-icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  flex-shrink: 0;
}

.boost-icon img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.boost-info {
  flex: 1;
}

.boost-name {
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  margin-bottom: 4px;
}

.boost-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

.boost-price {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand1), var(--brand2));
  color: #1b0f26;
  font-weight: 800;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(255, 120, 0, 0.4);
}

.boost-price:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(255, 120, 0, 0.6);
}

.boost-price:active {
  transform: scale(0.95);
}

.boost-price:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.boost-price .coinDot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #ffd700);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
}

/* Активные бусты */
.active-boosts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.active-boost {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(58, 167, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.active-boost::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(58, 167, 255, 0.5), 
    transparent);
}

.active-boost-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(58, 167, 255, 0.1);
  border: 2px solid rgba(58, 167, 255, 0.3);
  overflow: hidden;
  flex-shrink: 0;
}

.active-boost-icon img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.active-boost-info {
  flex: 1;
}

.active-boost-name {
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  margin-bottom: 4px;
}

.active-boost-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.timer-icon {
  font-size: 14px;
}

.active-boost-time {
  font-weight: 600;
  color: #3aa7ff;
}

.no-boosts {
  text-align: center;
  padding: 30px 20px;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  font-size: 14px;
}

/* Анимация для активных бустов */
@keyframes boostPulse {
  0% { border-color: rgba(58, 167, 255, 0.3); }
  50% { border-color: rgba(58, 167, 255, 0.6); }
  100% { border-color: rgba(58, 167, 255, 0.3); }
}

.active-boost {
  animation: boostPulse 2s infinite;
}

/* Иконки бустов */
.boost-icon.x2 {
  background: linear-gradient(135deg, 
    rgba(255, 180, 0, 0.2), 
    rgba(255, 120, 0, 0.1));
  border-color: rgba(255, 180, 0, 0.4);
}

.boost-icon.auto {
  background: linear-gradient(135deg, 
    rgba(58, 167, 255, 0.2), 
    rgba(0, 100, 255, 0.1));
  border-color: rgba(58, 167, 255, 0.4);
}

.boost-icon.slow {
  background: linear-gradient(135deg, 
    rgba(166, 74, 255, 0.2), 
    rgba(120, 0, 255, 0.1));
  border-color: rgba(166, 74, 255, 0.4);
}

/* Эффект недостатка монет */
.not-enough {
  opacity: 0.7;
  position: relative;
}

.not-enough::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 50, 50, 0.1);
  border-radius: 18px;
}

/* Бейдж "Популярное" */
.boost-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ff4757, #ff3838);
  color: white;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 1;
}

/* Адаптивность для магазина */
@media (max-width: 480px) {
  .shop-title-image {
    max-width: 300px;
  }
  
  .boost-item {
    padding: 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .boost-item-left {
    width: 100%;
  }
  
  .boost-price {
    width: 100%;
    justify-content: center;
    padding: 12px;
  }
  
  .boost-icon {
    width: 50px;
    height: 50px;
  }
  
  .active-boost {
    padding: 14px;
  }
  
  .active-boost-icon {
    width: 45px;
    height: 45px;
  }
}

/* Эффект покупки */
@keyframes purchaseSuccess {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.purchase-success {
  animation: purchaseSuccess 0.5s ease;
}

/* ====== PVP РЕЖИМ ====== */
.pvp-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 0 10px;
}

.pvp-title-image {
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 auto 10px;
  display: block;
  filter: drop-shadow(0 10px 30px rgba(255, 50, 50, 0.3));
  border-radius: 20px;
}

.pvp-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  text-align: center;
  margin-top: 5px;
  background: linear-gradient(90deg, #ff4757, #ff3838);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pvp-card {
  background: linear-gradient(135deg, 
    rgba(40, 20, 30, 0.95), 
    rgba(20, 10, 15, 0.95));
  border: 2px solid rgba(255, 50, 50, 0.3);
  box-shadow: 0 15px 40px rgba(255, 50, 50, 0.2);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.pvp-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 50, 50, 0.5), 
    transparent);
}

/* Карточка статуса */
.pvp-status-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 18px;
  margin-bottom: 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.pvp-status-icon {
  font-size: 40px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
  flex-shrink: 0;
}

.pvp-status-content {
  flex: 1;
}

.pvp-status-title {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.pvp-status-text {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Кнопки управления */
.pvp-controls {
  display: flex;
  gap: 12px;
  margin-bottom: 25px;
}

.pvp-btn-primary {
  flex: 2;
  background: linear-gradient(135deg, #ff4757, #ff3838);
  border: none;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 8px 25px rgba(255, 50, 50, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.pvp-btn-primary:hover {
  background: linear-gradient(135deg, #ff3838, #ff2e2e);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255, 50, 50, 0.6);
}

.pvp-btn-primary:active {
  transform: translateY(0);
}

.pvp-btn-secondary {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pvp-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-icon {
  font-size: 20px;
}

/* Матч PVP */
.pvp-match {
  animation: slideIn 0.5s ease-out;
}

.pvp-match-header {
  text-align: center;
  margin-bottom: 20px;
}

.pvp-timer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50px;
  border: 2px solid rgba(255, 50, 50, 0.3);
}

.pvp-timer-icon {
  font-size: 24px;
}

.pvp-timer-value {
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  min-width: 60px;
}

/* Табло счета */
.pvp-scoreboard {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 25px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.pvp-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.pvp-player-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.pvp-player-score {
  font-size: 48px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  min-width: 60px;
  text-align: center;
}

.pvp-vs {
  font-size: 24px;
  font-weight: 900;
  color: rgba(255, 50, 50, 0.8);
  padding: 0 20px;
}

/* Игровое поле PVP */
.pvp-board-container {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 25px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.pvp-board-title {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 15px;
}

.pvp-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 300px;
  margin: 0 auto 15px;
}

.pvp-hole {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 16px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.pvp-hole::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, 
    rgba(255, 255, 255, 0.05) 0%, 
    transparent 70%);
}

.pvp-hole:hover {
  transform: scale(1.05);
  border-color: rgba(255, 180, 0, 0.5);
}

.pvp-hole.active {
  border-color: #ffb300;
  box-shadow: 0 0 25px rgba(255, 180, 0, 0.7);
  background: rgba(255, 180, 0, 0.15);
}

.pvp-hole.active::after {
  content: '🐭';
  font-size: 32px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8));
}

.pvp-hole.hit {
  border-color: #4CAF50;
  box-shadow: 0 0 25px rgba(76, 175, 80, 0.7);
  background: rgba(76, 175, 80, 0.15);
  animation: hitFlash 0.3s ease;
}

.pvp-hole.miss {
  border-color: #f44336;
  box-shadow: 0 0 25px rgba(244, 67, 54, 0.7);
  background: rgba(244, 67, 54, 0.15);
  animation: missShake 0.3s ease;
}

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

@keyframes missShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.pvp-hint {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 10px;
}

/* Статистика матча */
.pvp-match-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 25px;
}

.pvp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pvp-stat-icon {
  font-size: 24px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.pvp-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.pvp-stat-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Правила и награды */
.pvp-rules {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 18px;
  padding: 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.pvp-rules-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pvp-rules-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.pvp-rules-list li {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
}

.pvp-rules-list li::before {
  content: '•';
  color: #ff4757;
  font-size: 20px;
  position: absolute;
  left: 0;
  top: -3px;
}

.pvp-rules-list li strong {
  color: #ffb300;
}

.pvp-rewards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pvp-reward-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.pvp-reward-icon {
  font-size: 20px;
}

.pvp-reward-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}

/* Анимации */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.searching {
  animation: searchingPulse 1.5s infinite;
}

/* Состояния статуса */
.status-waiting {
  color: #ffb300;
}

.status-active {
  color: #4CAF50;
}

.status-finished {
  color: #3aa7ff;
}

/* Адаптивность */
@media (max-width: 480px) {
  .pvp-title-image {
    max-width: 280px;
  }
  
  .pvp-controls {
    flex-direction: column;
  }
  
  .pvp-scoreboard {
    gap: 15px;
    padding: 15px;
  }
  
  .pvp-player-score {
    font-size: 36px;
  }
  
  .pvp-vs {
    font-size: 20px;
    padding: 0 10px;
  }
  
  .pvp-board {
    max-width: 260px;
    gap: 8px;
  }
  
  .pvp-match-stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .pvp-rewards {
    flex-direction: column;
  }
}

/* Эффекты для таймера */
@keyframes timerPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.timer-warning {
  animation: timerPulse 1s infinite;
  color: #ff4757 !important;
}

/* Эффект победы/поражения */
.victory {
  background: linear-gradient(135deg, 
    rgba(76, 175, 80, 0.1), 
    rgba(76, 175, 80, 0.05)) !important;
  border-color: rgba(76, 175, 80, 0.5) !important;
}

.defeat {
  background: linear-gradient(135deg, 
    rgba(244, 67, 54, 0.1), 
    rgba(244, 67, 54, 0.05)) !important;
  border-color: rgba(244, 67, 54, 0.5) !important;
}

/* ====== ТАБЛИЦА ЛИДЕРОВ ====== */
.leaders-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 0 10px;
}

.leaders-title-image {
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 auto 10px;
  display: block;
  filter: drop-shadow(0 10px 30px rgba(255, 215, 0, 0.3));
  border-radius: 20px;
}

.leaders-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  text-align: center;
  margin-top: 5px;
  background: linear-gradient(90deg, #ffd700, #ffa500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.leaders-card {
  background: linear-gradient(135deg, 
    rgba(40, 35, 20, 0.95), 
    rgba(20, 15, 10, 0.95));
  border: 2px solid rgba(255, 215, 0, 0.3);
  box-shadow: 0 15px 40px rgba(255, 215, 0, 0.2);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.leaders-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 215, 0, 0.5), 
    transparent);
}

/* Фильтры */
.leaders-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 15px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 215, 0, 0.3);
}

.filter-btn.active {
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.2), 
    rgba(255, 165, 0, 0.1));
  border-color: rgba(255, 215, 0, 0.5);
  color: #ffd700;
  box-shadow: 0 5px 15px rgba(255, 215, 0, 0.2);
}

.filter-btn i {
  font-size: 16px;
}

/* Контейнер списка */
.leaders-list-container {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 20px;
  padding-right: 5px;
}

/* Кастомный скроллбар */
.leaders-list-container::-webkit-scrollbar {
  width: 6px;
}

.leaders-list-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.leaders-list-container::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.5);
  border-radius: 3px;
}

.leaders-list-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 215, 0, 0.7);
}

/* Список лидеров */
.leaders-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.leader-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.leader-item:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 215, 0, 0.3);
  box-shadow: 0 8px 20px rgba(255, 215, 0, 0.1);
  background: rgba(0, 0, 0, 0.6);
}

.leader-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 215, 0, 0.3), 
    transparent);
}

/* Ранг */
.leader-rank {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: #000;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.leader-rank.gold {
  background: linear-gradient(135deg, #ffd700, #ffa500);
  box-shadow: 0 6px 15px rgba(255, 215, 0, 0.4);
}

.leader-rank.silver {
  background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
  box-shadow: 0 6px 15px rgba(192, 192, 192, 0.4);
}

.leader-rank.bronze {
  background: linear-gradient(135deg, #cd7f32, #a6692e);
  box-shadow: 0 6px 15px rgba(205, 127, 50, 0.4);
}

.leader-rank.normal {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1), 
    rgba(255, 255, 255, 0.05));
  color: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.15);
}

/* Аватар лидера */
.leader-avatar {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: white;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: 2px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  flex-shrink: 0;
}

.leader-avatar.has-photo {
  background: transparent !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Информация о лидере */
.leader-info {
  flex: 1;
  min-width: 0;
}

.leader-name {
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leader-username {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 6px;
}

.leader-stats {
  display: flex;
  gap: 15px;
}

.leader-stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.leader-stat-item i {
  color: #ffd700;
  font-size: 11px;
}

/* Статистика лидера */
.leader-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}

.leader-level {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 5px;
}

.leader-level i {
  color: #ffd700;
  font-size: 16px;
}

.leader-xp {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Общая статистика */
.leaders-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 20px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 18px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.leader-stat {
  display: flex;
  align-items: center;
  gap: 15px;
}

.leader-stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.2), 
    rgba(255, 165, 0, 0.1));
  border: 2px solid rgba(255, 215, 0, 0.3);
}

.leader-stat-icon i {
  font-size: 22px;
  color: #ffd700;
}

.leader-stat-content {
  flex: 1;
}

.leader-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.leader-stat-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Футер лидерборда */
.leaders-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.leaders-update {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.leaders-update i {
  color: #ffd700;
}

.leaders-refresh {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.leaders-refresh:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 215, 0, 0.5);
}

.leaders-refresh:active i {
  animation: spin 0.5s linear;
}

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

/* Бейджи для достижений */
.leader-badges {
  display: flex;
  gap: 5px;
  margin-top: 5px;
}

.leader-badge {
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.leader-badge.top1 {
  background: linear-gradient(135deg, #ffd700, #ffa500);
  color: #000;
}

.leader-badge.streak {
  background: linear-gradient(135deg, #ff4757, #ff3838);
  color: #fff;
}

.leader-badge.booster {
  background: linear-gradient(135deg, #3aa7ff, #2b8cdb);
  color: #fff;
}

/* Анимации */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.leader-item {
  animation: fadeIn 0.5s ease-out;
  animation-fill-mode: both;
}

.leader-item:nth-child(1) { animation-delay: 0.1s; }
.leader-item:nth-child(2) { animation-delay: 0.2s; }
.leader-item:nth-child(3) { animation-delay: 0.3s; }
.leader-item:nth-child(4) { animation-delay: 0.4s; }
.leader-item:nth-child(5) { animation-delay: 0.5s; }

/* Эффект для топ-3 */
.leader-item:nth-child(-n+3) {
  border-color: rgba(255, 215, 0, 0.2);
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.05), 
    rgba(255, 165, 0, 0.02));
}

/* Адаптивность */
@media (max-width: 480px) {
  .leaders-title-image {
    max-width: 280px;
  }
  
  .leaders-filters {
    flex-direction: column;
  }
  
  .leader-item {
    padding: 14px;
  }
  
  .leader-avatar {
    width: 45px;
    height: 45px;
    font-size: 16px;
  }
  
  .leader-rank {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  
  .leader-stats {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .leaders-stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .leaders-footer {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .leaders-refresh {
    width: 100%;
    justify-content: center;
  }
}

/* Текущий пользователь */
.leader-item.current-user {
  border-color: rgba(58, 167, 255, 0.5);
  background: linear-gradient(135deg, 
    rgba(58, 167, 255, 0.1), 
    rgba(0, 100, 255, 0.05));
  position: relative;
}

.leader-item.current-user::after {
  content: 'Вы';
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 8px;
  background: linear-gradient(135deg, #3aa7ff, #2b8cdb);
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Fallback для изображения */
.leaders-title-image:not([src]), 
.leaders-title-image[src=""],
.leaders-title-image[src*="error"] {
    content: '';
    display: block;
    width: 100%;
    height: 200px;
    max-width: 400px;
    margin: 0 auto;
    background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.3), 
        rgba(255, 165, 0, 0.1));
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.leaders-title-image:not([src])::before, 
.leaders-title-image[src=""]::before,
.leaders-title-image[src*="error"]::before {
    content: '🏆 Лидеры 🏆';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: 900;
    color: white;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    text-align: center;
}

/* ====== СТРАНИЦА ДРУЗЕЙ ====== */
.friends-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 0 10px;
}

.friends-title-image {
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 auto 10px;
  display: block;
  filter: drop-shadow(0 10px 30px rgba(58, 167, 255, 0.3));
  border-radius: 20px;
}

.friends-subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  text-align: center;
  margin-top: 5px;
  background: linear-gradient(90deg, #3aa7ff, #2b8cdb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.friends-card {
  background: linear-gradient(135deg, 
    rgba(20, 30, 50, 0.95), 
    rgba(10, 15, 30, 0.95));
  border: 2px solid rgba(58, 167, 255, 0.3);
  box-shadow: 0 15px 40px rgba(58, 167, 255, 0.2);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.friends-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(58, 167, 255, 0.5), 
    transparent);
}

/* Реферальная секция */
.referral-section {
  padding: 20px;
}

.referral-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.referral-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, 
    rgba(58, 167, 255, 0.2), 
    rgba(0, 100, 255, 0.1));
  border: 2px solid rgba(58, 167, 255, 0.3);
}

.referral-icon i {
  font-size: 24px;
  color: #3aa7ff;
}

.referral-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

/* Реферальная ссылка */
.referral-link-container {
  display: flex;
  gap: 12px;
  margin-bottom: 25px;
}

.referral-link {
  flex: 1;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  font-family: monospace;
  font-size: 14px;
  word-break: break-all;
  display: flex;
  align-items: center;
  min-height: 56px;
}

.referral-copy {
  padding: 0 25px;
  background: linear-gradient(135deg, #3aa7ff, #2b8cdb);
  border: none;
  color: white;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(58, 167, 255, 0.4);
}

.referral-copy:hover {
  background: linear-gradient(135deg, #2b8cdb, #1a7cdb);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(58, 167, 255, 0.6);
}

.referral-copy:active {
  transform: translateY(0);
}

/* Статистика рефералов */
.referral-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 25px;
}

.referral-stat {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.referral-stat-icon {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, 
    rgba(58, 167, 255, 0.2), 
    rgba(0, 100, 255, 0.1));
  border: 2px solid rgba(58, 167, 255, 0.3);
}

.referral-stat-icon i {
  font-size: 20px;
  color: #3aa7ff;
}

.referral-stat-content {
  flex: 1;
}

.referral-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.referral-stat-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Информация о наградах */
.referral-rewards {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 18px;
  padding: 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.reward-info {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.reward-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, 
    rgba(255, 180, 0, 0.2), 
    rgba(255, 120, 0, 0.1));
  border: 2px solid rgba(255, 180, 0, 0.3);
  flex-shrink: 0;
}

.reward-icon i {
  font-size: 24px;
  color: #ffb300;
}

.reward-details {
  flex: 1;
}

.reward-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.reward-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

.reward-desc p {
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.reward-desc i {
  color: #4CAF50;
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}

.reward-desc strong {
  color: #ffb300;
}

/* Карточка со списком друзей */
.friends-list-card {
  background: linear-gradient(135deg, 
    rgba(30, 20, 40, 0.95), 
    rgba(15, 10, 20, 0.95));
  border: 2px solid rgba(166, 74, 255, 0.3);
  box-shadow: 0 15px 40px rgba(166, 74, 255, 0.2);
}

.friends-list-card::before {
  background: linear-gradient(90deg, 
    transparent, 
    rgba(166, 74, 255, 0.5), 
    transparent);
}

.friends-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.friends-list-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.friends-list-title i {
  color: #a64aff;
  font-size: 20px;
}

.friends-count {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(166, 74, 255, 0.1);
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid rgba(166, 74, 255, 0.2);
}

/* Контейнер списка друзей */
.friends-list-container {
  max-height: 400px;
  overflow-y: auto;
  padding: 5px 20px 20px;
}

/* Список друзей */
.friends-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.friend-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.friend-item:hover {
  transform: translateY(-2px);
  border-color: rgba(166, 74, 255, 0.3);
  box-shadow: 0 8px 20px rgba(166, 74, 255, 0.1);
  background: rgba(0, 0, 0, 0.6);
}

.friend-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(166, 74, 255, 0.3), 
    transparent);
}

/* Аватар друга */
.friend-avatar {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: white;
  background: linear-gradient(135deg, #a64aff, #764ba2);
  border: 2px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
  flex-shrink: 0;
}

.friend-avatar.has-photo {
  background: transparent !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Информация о друге */
.friend-info {
  flex: 1;
  min-width: 0;
}

.friend-name {
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-details {
  display: flex;
  gap: 15px;
  margin-bottom: 8px;
}

.friend-detail {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.friend-detail i {
  color: #a64aff;
  font-size: 12px;
}

/* Статус друга */
.friend-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  max-width: fit-content;
}

.friend-status.invited {
  background: rgba(255, 180, 0, 0.1);
  color: #ffb300;
  border: 1px solid rgba(255, 180, 0, 0.2);
}

.friend-status.played {
  background: rgba(76, 175, 80, 0.1);
  color: #4CAF50;
  border: 1px solid rgba(76, 175, 80, 0.2);
}

.friend-status.rewarded {
  background: rgba(58, 167, 255, 0.1);
  color: #3aa7ff;
  border: 1px solid rgba(58, 167, 255, 0.2);
}

/* Награда за друга */
.friend-reward {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.reward-amount {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  color: #ffb300;
}

.reward-amount i {
  font-size: 14px;
}

.reward-status {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Состояние "нет друзей" */
.friends-empty {
  text-align: center;
  padding: 40px 20px;
  display: none;
}

.friends-empty.show {
  display: block;
}

.empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, 
    rgba(166, 74, 255, 0.1), 
    rgba(120, 0, 255, 0.05));
  border: 2px solid rgba(166, 74, 255, 0.3);
}

.empty-icon i {
  font-size: 36px;
  color: #a64aff;
}

.empty-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.empty-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  max-width: 300px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Анимации */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.friend-item {
  animation: slideInRight 0.5s ease-out;
  animation-fill-mode: both;
}

.friend-item:nth-child(1) { animation-delay: 0.1s; }
.friend-item:nth-child(2) { animation-delay: 0.2s; }
.friend-item:nth-child(3) { animation-delay: 0.3s; }
.friend-item:nth-child(4) { animation-delay: 0.4s; }
.friend-item:nth-child(5) { animation-delay: 0.5s; }

/* Анимация копирования */
@keyframes copySuccess {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.copy-success {
  animation: copySuccess 0.3s ease;
}

.copy-success i {
  color: #4CAF50 !important;
}

/* Адаптивность */
@media (max-width: 480px) {
  .friends-title-image {
    max-width: 280px;
  }
  
  .referral-link-container {
    flex-direction: column;
  }
  
  .referral-stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .reward-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
  }
  
  .friend-item {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .friend-details {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .friend-reward {
    align-items: center;
    width: 100%;
  }
  
  .friends-list-header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  
  .friends-count {
    align-self: flex-start;
  }
}

@media (max-width: 360px) {
  .friend-details {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }
}

/* Fallback для изображения */
.friends-title-image:not([src]), 
.friends-title-image[src=""],
.friends-title-image[src*="error"] {
    content: '';
    display: block;
    width: 100%;
    height: 200px;
    max-width: 400px;
    margin: 0 auto;
    background: linear-gradient(135deg, 
        rgba(58, 167, 255, 0.3), 
        rgba(0, 100, 255, 0.1));
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.friends-title-image:not([src])::before, 
.friends-title-image[src=""]::before,
.friends-title-image[src*="error"]::before {
    content: '👥 Друзья 👥';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: 900;
    color: white;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    text-align: center;
}

/* ====== КРИТИЧЕСКИ ВАЖНЫЕ СТИЛИ ДЛЯ АНИМАЦИИ КРОТОВ ====== */

/* Контейнер для лунки - ДОЛЖЕН БЫТЬ visible для отображения крота */
.hole {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 22px;
    overflow: visible !important; /* ВАЖНО: видно что за пределами */
    cursor: pointer;
    background: transparent;
    isolation: isolate; /* Создает новый stacking context */
}

/* Внутренний контейнер - обрезает только фон лунки */
.hole-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 22px;
    overflow: hidden; /* Только лунка обрезается */
    z-index: 1;
}

/* Изображение лунки */
.holeImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.7));
    transition: filter 0.3s ease;
}

/* Подсветка активной лунки */
.hole.active .holeImg {
    filter: brightness(1.3) drop-shadow(0 0 20px rgba(255, 180, 0, 0.7));
}

/* Изображение лунки после удара */
.holeImg.hit {
    filter: brightness(1.2) drop-shadow(0 0 15px rgba(255, 50, 50, 0.7));
}

/* ====== КРОТ - КЛЮЧЕВЫЕ СТИЛИ ====== */
.moleImg {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    height: auto;
    z-index: 2; /* Выше лунки */
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    
    /* ИСХОДНАЯ ПОЗИЦИЯ - ПОД ЛУНКОЙ */
    bottom: -60% !important;
    
    /* Плавная анимация для движения */
    transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.5) !important;
    
    /* Эффекты */
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.8));
    will-change: bottom, transform, filter;
}

/* Позиция когда крот показался */
.moleImg.up {
    bottom: 15% !important;
}

/* Эффект попадания */
.moleImg.hit {
    animation: moleHit 0.3s ease-out forwards;
    filter: drop-shadow(0 0 20px rgba(255, 50, 50, 0.8)) brightness(1.3);
}

/* Бонусный крот */
.moleImg.bonus {
    filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.9)) brightness(1.2);
    animation: bonusGlow 1.5s infinite ease-in-out;
}

/* ====== МОЛОТОК ====== */
.hammerImg {
    position: absolute;
    left: 60%;
    top: 8%;
    transform: translateX(-50%) rotate(-25deg);
    transform-origin: 20% 80%;
    width: 85%;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.15s ease;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.9));
}

/* Анимация удара молотком */
.hammerImg.swing {
    opacity: 1 !important;
    animation: hammerSwing 0.3s ease-out;
}

/* ====== КЛЮЧЕВЫЕ КАДРЫ АНИМАЦИЙ ====== */
@keyframes moleAppear {
    0% {
        bottom: -60%;
        opacity: 0;
        transform: translateX(-50%) scale(0.8);
    }
    70% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
    100% {
        bottom: 15%;
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

@keyframes moleDisappear {
    0% {
        bottom: 15%;
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
    100% {
        bottom: -60%;
        opacity: 0;
        transform: translateX(-50%) scale(0.8);
    }
}

@keyframes moleHit {
    0% {
        transform: translateX(-50%) scale(1);
    }
    25% {
        transform: translateX(-50%) scale(1.2) rotate(-5deg);
    }
    50% {
        transform: translateX(-50%) scale(0.9) rotate(5deg);
        filter: brightness(2) drop-shadow(0 0 25px rgba(255, 50, 50, 1));
    }
    75% {
        transform: translateX(-50%) scale(1.1);
    }
    100% {
        transform: translateX(-50%) scale(1);
        filter: brightness(1.5) drop-shadow(0 0 15px rgba(255, 50, 50, 0.8));
    }
}

@keyframes hammerSwing {
    0% {
        transform: translateX(-50%) rotate(-35deg) scale(1.15);
        opacity: 1;
    }
    50% {
        transform: translateX(-50%) rotate(20deg) scale(0.9);
    }
    100% {
        transform: translateX(-50%) rotate(-25deg) scale(1);
        opacity: 1;
    }
}

@keyframes bonusGlow {
    0%, 100% {
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6)) brightness(1.1);
    }
    50% {
        filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1)) brightness(1.3);
    }
}

/* ====== ЭФФЕКТ ПРОМАХА ====== */
@keyframes missShake {
    0%, 100% {
        transform: translateX(-50%);
    }
    25% {
        transform: translateX(calc(-50% - 3px));
    }
    75% {
        transform: translateX(calc(-50% + 3px));
    }
}

.hole.miss .moleImg {
    animation: missShake 0.3s ease;
}

/* ====== УБИРАЕМ ЛЮБЫЕ КОНФЛИКТУЮЩИЕ СТИЛИ ====== */

/* Убираем любые transform от родительских элементов */
#holesGrid,
#holesGrid > div,
.hole,
.hole-inner {
    transform: none !important;
}

/* Гарантируем что крот выше лунки */
.hole-inner > * {
    position: absolute;
}

/* Фикс для z-index */
.holeImg { z-index: 1; }
.moleImg { z-index: 2; }
.hammerImg { z-index: 3; }

/* ====== ДЕБАГ СТИЛИ ====== */
.debug-mode .moleImg {
    outline: 2px solid red !important;
    background: rgba(255, 0, 0, 0.1) !important;
}

.debug-mode .hole.active {
    outline: 2px solid yellow !important;
}

/* ====== ТЕСТОВЫЙ РЕЖИМ ====== */
.test-mole {
    position: fixed !important;
    top: 50px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100px !important;
    height: auto !important;
    z-index: 10000 !important;
    border: 3px solid #00ff00 !important;
    background: rgba(0, 255, 0, 0.1) !important;
    animation: testMole 2s infinite alternate !important;
}

@keyframes testMole {
    0% {
        bottom: -60px !important;
        opacity: 0;
    }
    100% {
        bottom: 50px !important;
        opacity: 1;
    }
}