/* ============================================================
   FlameCraft – moduł „Gracze online” (widget + powiadomienie + lista). Logika: online.js
   ============================================================ */

/* ---------- Widget (przyciski cookies/do góry: 62 px, odstęp 14 px) ---------- */
.live-widget{
  position:fixed; z-index:55; right:92px; bottom:24px; display:flex; align-items:center; gap:12px; height:46px; padding:0 19px; border-radius:999px;
  background:rgba(13,12,16,.86); border:1px solid rgba(255,138,31,.4); color:var(--c-text);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font:600 18px/1.3 var(--f-ui); white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.45);
}
.live-widget .dot{width:12px; height:12px}
.live-widget b{color:var(--c-flame-hi); font-weight:800}
.live-widget.joined{animation:lwFlash 1.5s ease-out}
@keyframes lwFlash{
  0%{box-shadow:0 0 0 0 rgba(255,138,31,.85), 0 4px 14px rgba(0,0,0,.45); border-color:var(--c-flame-hi)}
  100%{box-shadow:0 0 0 14px rgba(255,138,31,0), 0 4px 14px rgba(0,0,0,.45)}
}

/* ---------- Powiadomienie „ktoś dołączył” ---------- */
.live-pop{
  position:absolute; right:0; bottom:calc(100% + 14px); width:max-content; max-width:min(420px,calc(100vw - 32px));
  display:flex; align-items:center; gap:14px; padding:14px 20px; border-radius:10px; white-space:normal;
  background:rgba(13,12,16,.94); border:1px solid rgba(255,138,31,.6); border-left:4px solid var(--c-flame);
  box-shadow:0 14px 40px rgba(0,0,0,.55), 0 0 26px rgba(255,138,31,.28);
  font:600 14px/1.4 var(--f-ui); color:var(--c-text);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.96); pointer-events:none;
  transition:opacity .3s, transform .45s var(--ease-out), visibility 0s .45s;
}
.live-pop.show{opacity:1; visibility:visible; transform:none; transition-delay:0s}
.live-pop b{color:var(--c-flame-hi); font-weight:800}
.lp-ico{flex:none; width:26px; height:30px; background:url("img/ref/flame-small.png") center/contain no-repeat; filter:drop-shadow(0 0 8px rgba(255,138,31,.7))}

/* ---------- Sekcja: lista graczy online ---------- */
.online{background:radial-gradient(ellipse 60% 60% at 50% 0,rgba(255,138,31,.07),transparent 70%),var(--c-night)}
.online .wrap{max-width:1000px}
.online-panel{padding:clamp(20px,3vw,34px) clamp(16px,3vw,38px)}
.online-meta{margin-bottom:20px; text-align:center; font:600 13px/1.4 var(--f-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--c-muted)}
.online-list{column-count:3; column-gap:clamp(12px,3vw,40px)}
.pl-item{display:flex; align-items:center; gap:12.5px; min-width:0; padding:9px 0; break-inside:avoid; border-bottom:1px solid rgba(223,227,234,.08)}
.pl-av{
  flex:none; width:32px; height:32px; display:grid; place-items:center; border-radius:3px;
  background:hsl(var(--h) 55% 38%); box-shadow:inset 0 -3px 0 rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.14);
  font:800 16px/1 var(--f-ui); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.5);
  position:relative; overflow:hidden;
}
.pl-av img{position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; opacity:0}
.pl-av.has-head{background:none; box-shadow:none; color:transparent; text-shadow:none}
.pl-av.has-head img{opacity:1}
.pl-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 19px/1.3 var(--f-ui); color:#f3eee6}
.online-note{margin-top:14px; text-align:center; font-size:14px; color:var(--c-muted)}
.online-note:empty{display:none}
.online-list:empty + .online-note{margin-top:0; font-size:16px}

@media (max-width:640px){
  .live-widget{left:50%; right:auto; transform:translateX(-50%); max-width:calc(100vw - 184px); gap:10px; padding:0 14px; font-size:15px}
  .live-widget .dot{width:10px; height:10px}
  .lw-l{display:none}
  #liveText{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .live-pop{right:auto; left:50%; transform:translate(-50%,14px) scale(.96); font-size:14.5px; padding:12px 16px}
  .live-pop.show{transform:translateX(-50%)}
  .online-list{column-gap:10px}
  .pl-item{gap:9px}
  .pl-av{width:25px; height:25px; font-size:14px}
  .pl-name{font-size:16px}
}
@media (max-width:400px){
  .pl-av{display:none}
  .pl-name{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){
  .live-widget.joined{animation:none}
  .live-pop{transform:none}
}