/* Szerokość/pozycja – spójnie z Twoją ostatnią wersją */
#stats-bar{
  width: 98%;
  max-width: 1100px;
  margin: -1.8rem auto 0.4rem;
  padding: 0;
}

.sb-card{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
}

/* Smuga */
.sb-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(220px 140px at var(--smx,50%) var(--smy,50%),
      rgba(123,255,162,.14), rgba(123,255,162,0) 60%);
  transition: background-position .12s ease-out;
}

.sb-slider{ position:relative; min-height:64px; }
.sb-slide{
  display:grid; grid-template-columns:1fr auto; gap:.5rem; align-items:center;
  padding:.3rem .7rem .35rem;
  opacity:0; transform:translateY(5px); pointer-events:none; position:absolute; inset:0;
  transition:opacity .3s ease, transform .3s ease;
}
.sb-slide.is-active{ opacity:1; transform:none; pointer-events:auto; position:relative; }

/* Tekst i liczby */
.sb-left .sb-title{
  font-family:'Russo One',sans-serif; color:var(--text,#fff); text-transform:uppercase;
  letter-spacing:.6px; line-height:1.1; font-size:clamp(.75rem,1.6vw,.9rem);
}
.sb-right{ display:flex; align-items:center; gap:.35rem; }
.sb-logo{ width:22px; height:22px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.sb-value{
  font-family:'Russo One',sans-serif; color:#fff; white-space:nowrap; letter-spacing:.5px;
  font-size:clamp(.9rem,3.2vw,1.3rem);
}

/* Pasek postępu */
.sb-progress{ grid-column:1/-1; height:3px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.sb-progress-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, rgba(123,255,162,.1), rgba(123,255,162,.65));
  box-shadow:0 0 10px rgba(123,255,162,.45);
  transition:width .8s cubic-bezier(.25,.85,.32,1);
}

/* Kropki (paginacja) */
.sb-dots{
  display:flex; justify-content:center; align-items:center; gap:.3rem;
  padding:.25rem 0 .3rem;
}
.sb-dot{
  width:5px; height:5px; border-radius:999px; background:rgba(255,255,255,.35);
  border:0; cursor:pointer; transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.sb-dot.is-active{ background: rgba(123,255,162,.9); box-shadow: 0 0 6px rgba(123,255,162,.55); transform: scale(1.1); }

/* Przycisk Pokaż/Ukryj mapę – lewy dolny róg paska */
.sb-map-toggle{
  position: absolute; left: 10px; bottom: 6px;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .55rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .3px;
  color: #fff; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, transform .05s ease;
  backdrop-filter: blur(6px);
}
.sb-map-toggle:hover{
  background: rgba(123,255,162,.12);
  box-shadow: inset 0 0 0 2px rgba(123,255,162,.2);
}
.sb-map-toggle:active{ transform: scale(.98); }
.sb-map-toggle.is-open{
  background: rgba(123,255,162,.18);
  box-shadow: 0 0 12px rgba(123,255,162,.35);
}

.sb-map-dot{
  width: .5rem; height: .5rem; border-radius: 50%;
  background: #4CAF50;
  box-shadow: 0 0 10px rgba(76,175,80,.7);
  animation: sbDot 1.6s ease-in-out infinite;
}
@keyframes sbDot { 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.25) } }

@media (max-width:480px){
  #stats-bar{ width: 96%; margin: -1.6rem auto 0.3rem; }
  .sb-logo{ width:20px; height:20px; }
  .sb-map-toggle{ left: 8px; bottom: 6px; font-size: .74rem; padding: .22rem .5rem; }
}