:root {
  --text: #fff;
  --panel: #1c1c1c;
  --green: #4CAF50;
}

/* Sekcja – blisko przycisku z HERO (niewielki odstęp) */
.live {
  margin-top: .25rem;
}

/* ===== Pasek (badge + przycisk) – TERAZ UKRYWAMY, bo sterowanie jest w stats-bar ===== */
.live .live-inline {
  display: none !important;
}

/* (gdybyś kiedyś chciał wrócić do paska w sekcji, odkomentuj i usuń powyższą regułę)
.live-inline{
  display:flex; align-items:center; justify-content:center;
  gap:.6rem; flex-wrap:nowrap; max-width:100%;
}
.live-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .7rem;
  border:1.5px solid rgba(255,255,255,.7);
  border-radius:999px; color:#fff;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  flex:1 1 auto;
  white-space:nowrap;
}
.live-badge-text{ font-weight:800; font-size:.9rem; }
.live-badge-live{ font-weight:900; margin-left:.25rem; }
.live-dot{ width:.45rem; height:.45rem; border-radius:50%; background:var(--green); box-shadow:0 0 8px rgba(76,175,80,.6); animation:dotPulse 1.4s ease-in-out infinite; }
@keyframes dotPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.2); } }

.live-inline-btn{
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:800; font-size:.85rem;
  padding:.35rem .75rem;
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,.85);
  background:transparent; color:#fff; cursor:pointer;
}
.chev{ width:.55rem; height:.55rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform .2s ease; }
.live-inline-btn[aria-expanded="true"] .chev{ transform:rotate(135deg); }
*/

/* ===== Panel z mapą ===== */
.live-panel{
  margin-top:.4rem;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(8px);
  overflow:hidden;
  position:relative;
  isolation:isolate;
}

/* Rozmazane logo w tle panelu */
.panel-bg{
  position:absolute; inset:0;
  background: url('/assets/logo.png') center/240% no-repeat;
  filter: blur(26px);
  opacity:.1;
}

/* Obszar mapy */
.live-map{
  position:relative; z-index:2;
  width:100%; aspect-ratio:16/9;
  background:#0f0f0f center/contain no-repeat;
}

/* Mgiełka / poświaty na mapie */
.map-fog{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 600px at 30% 20%, rgba(76,175,80,.08), rgba(76,175,80,0) 60%),
    radial-gradient(900px 500px at 70% 80%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%);
}

/* Radar w lewym dolnym rogu mapy */
.radar{
  position:absolute; z-index:4;
  left:14px; bottom:14px;
  width:58px; height:58px;
  border-radius:50%;
  background:
    radial-gradient(circle at center, rgba(76,175,80,.35) 0 2px, transparent 2px 100%),
    radial-gradient(circle at center, rgba(76,175,80,.16) 0 26px, transparent 26px);
  box-shadow: 0 4px 14px rgba(0,0,0,.35), inset 0 0 12px rgba(76,175,80,.25);
  overflow:hidden; opacity:.9;
}
.radar::before{
  content:""; position:absolute; inset:-5%;
  background: conic-gradient(from 0turn, rgba(76,175,80,.0) 0deg, rgba(76,175,80,.55) 22deg, rgba(76,175,80,.0) 60deg);
  animation: radar-spin 4.5s linear infinite;
}
.radar::after{
  content:""; position:absolute; left:50%; top:50%; width:6px; height:6px;
  transform:translate(-50%,-50%);
  border-radius:50%; background:#4CAF50;
  box-shadow:0 0 12px rgba(76,175,80,.8);
  animation: radar-pulse 2.4s ease-in-out infinite;
}
@keyframes radar-spin { to { transform: rotate(360deg); } }
@keyframes radar-pulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.4); } }

/* Markery (logo) – pojawienie + pompowanie + zanik */
.live-marker{
  position:absolute; left:0; top:0;
  pointer-events:none; z-index:5;
  transform-origin:center;
  transform: translate(-50%, -50%) scale(1.0) rotate(var(--rot, 0deg));
  opacity:0;
}
.live-marker--shrink{
  animation: icon-shrink-fade 1.2s cubic-bezier(.22,.8,.36,1) forwards;
}
@keyframes icon-shrink-fade{
  0%   { transform:translate(-50%,-50%) scale(1.0) rotate(var(--rot,0deg)); opacity:0; }
  15%  { transform:translate(-50%,-50%) scale(1.05) rotate(var(--rot,0deg)); opacity:1; }
  55%  { transform:translate(-50%,-50%) scale(0.9)  rotate(var(--rot,0deg)); opacity:.85; }
  100% { transform:translate(-50%,-50%) scale(0.0)  rotate(var(--rot,0deg)); opacity:0; }
}

/* Responsywność */
@media (max-width: 420px){
  .live { margin-top: .2rem; }
  .live-panel{ margin-top: .35rem; border-radius:12px; }
  .radar{ left:10px; bottom:10px; width:52px; height:52px; }
}