/* =========================
   USERBAR – DESKTOP
   ========================= */
.userbar{
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--team-primary) 18%, #1a1a1a) 0%, #101010 100%);
  border-top: 2px solid color-mix(in srgb, var(--team-primary) 72%, var(--accent));
  border-bottom: 2px solid color-mix(in srgb, var(--team-primary) 72%, var(--accent));
}

.userbar-inner{
  max-width: 1400px;         /* desktopowy tor */
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

/* Avatar + Login */
.user-profile{
  display: flex;
  align-items: center;
  gap: 8px;
}
.user-profile i{
  font-size: 32px;
  color: var(--accent);
}

.user-profile .user-message-indicator.has-unread-messages{
  color:#facc15;
  filter:drop-shadow(0 0 10px rgba(250,204,21,.7));
  animation:userMessagePulse 1.2s ease-in-out infinite;
}

@keyframes userMessagePulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.08); opacity:.78; }
}

/* Pojedyncza statystyka */
.userbar .stat{
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: #ddd;
  font-size: 14px;
  white-space: nowrap;
}
.userbar .stat i{
  color: var(--accent);
  font-size: 16px;
}
.userbar .stat .label{ opacity: .9; }
.userbar .stat .value{
  color: #fff;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--team-primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--team-primary) 34%, transparent);
}

.user-link{
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}
.user-link:hover{ color: var(--accent); }

/* Dzielnik między statami */
.userbar .divider{
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,.08);
}

/* pchacz na prawo (żeby sezon siedział na końcu) */
.userbar .grow{ flex: 1; }

/* Sezon – lekko przygaszona etykieta */
.userbar .season .label{ opacity: .8; }

/* =========================
   SEZON – DROPDOWN
   ========================= */
.season-switch{ position:relative }
.season-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:0; color:inherit; cursor:pointer;
  padding:0;
}
.season-btn .value{
  color:#fff; font-weight:700; padding:2px 8px; border-radius:999px;
  background:color-mix(in srgb, var(--team-primary) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--team-primary) 34%, transparent);
}
.season-btn .chev{ font-size:12px; opacity:.7 }

/* menu */
.season-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  background:#0f0f0f; border:1px solid #222; border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  padding:6px; min-width:150px; max-height:260px; overflow:auto;
  list-style:none; margin:0; display:none; z-index:50;
}
.season-menu.open{ display:block }
.season-option{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  color:#ddd; text-decoration:none; padding:8px 10px; border-radius:8px;
}
.season-option:hover{ background:var(--accent); color:#fff }
.season-option.is-current{ font-weight:700; color:#fff }

.badge{
  background:color-mix(in srgb, var(--team-primary) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--team-primary) 34%, transparent);
  padding:0 6px; height:18px; display:inline-flex; align-items:center;
  border-radius:999px; font-size:11px; color:#fff;
}

/* na wąskich ekranach menu nie wyjeżdża poza ekran */
@media (max-width:600px){ .season-menu{ right:auto; left:0 } }

/* =========================
   KARTY (Zasady / Osiągnięcia) – stylistyka
   ========================= */
.pp-card { --pp-accent: #f1c40f; } /* złoty akcent */

/* header */
.pp-card .card__header{
  padding: 10px 14px;
  border-bottom: 1px solid #27272a;
}
.pp-card .card__title{
  display:flex; align-items:center; gap:10px;
  font-weight: 800;
  color:#e7e7ee;
  font-size: clamp(18px, 2.1vw, 20px);
}
.pp-card .pp-icon{
  color: var(--pp-accent);
  background: rgba(241,196,15,.12);
  border: 1px solid rgba(241,196,15,.25);
  width:28px; height:28px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
}

/* statystyki */
.pp-card .card__body{ padding: 12px 14px; }
.pp-stats{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.pp-stat{
  background:#121218;
  border:1px solid #2b2b33;
  border-radius:12px;
  padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between;
}
.pp-label{ color:#c7c7d1; font-weight:600; }
.pp-value{ color: var(--pp-accent); font-weight:800; }

/* akcent dla karty osiągnięć */
.ach-card { --ach-accent: #7c3aed; } /* fiolet */

/* header */
.ach-card .card__header{
  padding:10px 14px;
  border-bottom:1px solid #27272a;
}
.ach-card .card__title{
  display:flex; align-items:center; gap:10px;
  font-weight:800;
  color:#e7e7ee;
  font-size:clamp(18px, 2.1vw, 20px);
}
.ach-card .ach-icon{
  color: var(--ach-accent);
  background: color-mix(in srgb, var(--ach-accent) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--ach-accent) 28%, transparent);
  width:28px; height:28px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
}

/* lista osiągnięć */
.ach-card .card__body{ padding:12px 14px; }
.ach-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
.ach-row{
  background:#121218;
  border:1px solid #2b2b33;
  border-radius:12px;
  padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between;
}
.ach-name{ color:#e7e7ee; font-weight:600; }
.ach-points{ color:var(--ach-accent); font-weight:800; }

/* lewa część wiersza (ikonka + tekst) */
.ach-card .ach-left{ display:flex; align-items:center; gap:8px; }

/* „pigułka” ikonki */
.ach-card .ach-ico{
  width:28px; height:28px; border-radius:9999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#121218; border:1px solid #2b2b33; color:#c7c7d1;
  font-weight:800; line-height:1;
}
.ach-card .ach-ico i{ font-size:14px; }
.ach-card .ach-ico .num{
  font-size:12px;
  font-variant-numeric: tabular-nums;
  letter-spacing:-0.2px;
}

/* WARIANT: zakresy (5–7, 8–10) -> pil (auto szerokość) */
.ach-card .ach-ico--range{
  width:auto; min-width:28px;
  padding:0 8px;
  border-radius:9999px;
}

/* warianty kolorystyczne */
.ach-card .ach-ico--gold{
  color:#f1c40f; background:rgba(241,196,15,.12); border-color:rgba(241,196,15,.28);
}
.ach-card .ach-ico--amber{
  color:#f59e0b; background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.28);
}
.ach-card .ach-ico--blue{
  color:#3b82f6; background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.28);
}
.ach-card .ach-ico--slate{
  color:#94a3b8; background:rgba(148,163,184,.12); border-color:rgba(148,163,184,.28);
}

/* Osiągnięcia – strefy */
.achz-card{ --achz-accent:#22d3ee; --neg:#f43f5e; }
.achz-block{
  background:#121218;
  border:1px solid #2b2b33;
  border-radius:12px;
  padding:10px 12px;
}
.achz-block + .achz-block{ margin-top:8px; }
.achz-top{ display:flex; align-items:center; gap:10px; padding-bottom:10px; }
.achz-name{ color:#e7e7ee; font-weight:700; }

.achz-list, .achz-items{ list-style:none; padding-left:0; margin:0; }
.achz-list{ display:flex; flex-direction:column; gap:8px; }
.achz-list > li, .achz-items > li{ list-style:none; }
.achz-list > li::marker, .achz-items > li::marker{ content:none; }

.achz-item{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:10px;
  padding:6px 0;
  border-top:1px solid #2b2b33;
}
.achz-item:first-child{ border-top:0; padding-top:0; }

.achz-ico{
  min-width:32px; height:32px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center; gap:2px;
  font-size:16px; border-radius:9999px;
  background:#0f0f13; border:1px solid #2b2b33;
}

/* badge + warianty */
.badge{
  padding:4px 10px;
  border-radius:9999px;
  font-weight:700;
  line-height:1;
  border:1px solid #2b2b33;
  background:#0f0f13;
  color:#c7c7d1;
  justify-self:start;
}
.badge--pts{
  color:var(--achz-accent);
  border-color:color-mix(in srgb, var(--achz-accent) 28%, transparent);
  justify-self:end;
}
.badge--pts.is-neg{
  color:var(--neg);
  border-color:color-mix(in srgb, var(--neg) 28%, transparent);
  background:color-mix(in srgb, var(--neg) 10%, transparent);
}

/* Pasek flag */
.achz-card .achz-flags{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;
  padding-left: calc(32px + 10px);
}
.achz-card .achz-flags .flag{
  width:22px; height:22px; border-radius:50%;
  object-fit:cover; border:1px solid #2b2b33;
  box-shadow:0 1px 6px rgba(0,0,0,.25);
  display:block;
}

/* =========================
   MOBILE OVERRIDES (≤768px)
   – pełna szerokość userbara, zawijanie, bez rozpychania
   ========================= */
@media (max-width: 768px){
  .userbar-inner{
    max-width: 100% !important;  /* zdejmujemy 1400px */
    width: 100% !important;
    margin: 0 !important;        /* zdejmujemy centrowanie */
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  .userbar .divider{ display:none; }
  .userbar .stat{ padding: 2px 0; }

  /* drobna redukcja „szumu” na bardzo wąskich ekranach */
  @media (max-width: 380px){
    .userbar .stat .label{ display:none; }  /* zostają ikonki + wartości */
  }
}


/* Okrągła ikonka wylogowania – jak „power” bubble */
.userbar .logout-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  margin-left:8px;
  border-radius:999px;
  background:rgba(225,6,0,.12);                  /* lekko czerwone tło */
  border:1px solid rgba(225,6,0,.25);            /* delikatna ramka */
  color:var(--accent);                           /* czerwona ikonka */
  text-decoration:none;
  flex:0 0 28px;
  line-height:1;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.userbar .logout-ico i{ font-size:14px; }

.userbar .logout-ico:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#111;                                    /* kontrast na hover */
}

/* Focus pod klawiaturę */
.userbar .logout-ico:focus-visible{
  outline:2px solid color-mix(in srgb, var(--accent) 60%, white);
  outline-offset:2px;
}

/* Mobile – trochę mniejsze */
@media (max-width: 900px){
  .userbar .logout-ico{ width:26px; height:26px; margin-left:6px; }
  .userbar .logout-ico i{ font-size:13px; }
}