/* =========================================================
   PLUS.CSS — add-on styles (compact socials, 5-col grid)
   ========================================================= */

/* Background ornament + subtle animated shine */
.bg-ornament {
  background-image:
    radial-gradient(80% 100% at 50% 0%, #13131b 0%, #0a0a10 60%),
    radial-gradient(1200px 200px at 50% -10%, rgba(255,255,255,.06), transparent 60%);
  background-attachment: fixed, scroll;
}
.sheen { position: relative; overflow: hidden; }
.sheen::after{
  content:""; position:absolute; inset:0 -200%;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  transform:translateX(-60%); transition:transform .8s ease;
}
.sheen:hover::after{ transform:translateX(60%); }

/* Top nav links */
.nav-link{
  color: var(--gold-2);
  text-decoration:none; font-weight:700;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:8px 12px; margin-right:6px;
  opacity:.92;
}
.nav-link:hover{ filter:brightness(1.1) }

/* Parallax */
.parallax-wrap{ perspective: 600px }
.parallax{ transition: transform .15s linear; will-change: transform }

/* =========================
   COMMUNITY (social section)
   ========================= */
.community{ padding: 16px 0 36px }
.community h2{ margin-bottom: 6px }

/* Grid: 5 in a row on desktop */
.social-grid{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(5, minmax(0,1fr));
  margin-top:12px;
}

/* Compact card */
.social-card{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px;
  background: var(--panel);
  border:1px solid rgba(200,155,60,.35);
  border-radius:14px;
  text-decoration:none; color:var(--gold-2);
  transition: transform .2s ease, filter .2s ease;
}
.social-card:hover{ filter:brightness(1.06); transform: translateY(-1px) }

/* ICON as IMG (preferred) — zero clipping */
.social-card .icon-img{
  width:28px; height:28px; aspect-ratio:1/1;
  display:grid; place-items:center;
  background:rgba(255,255,255,.06);
  border-radius:8px;
}
.social-card .icon-img .brand{
  width:20px; height:20px; display:block; object-fit:contain;
}

/* Label */
.social-card .label{
  font-weight:700; font-size:.95rem;
  color:var(--gold-2); white-space:nowrap;
}

/* If old SVG-injected icon exists, hide it to avoid double icons */
.social-card .icon{ display:none !important; }
.social-card .icon svg{ width:20px; height:20px; display:block; } /* fallback if ever shown */

/* Brand tints (when using SVG fallback); harmless with IMG */
.social-card.fb .icon svg{ fill:#1877F2 }
.social-card.yt .icon svg{ fill:#FF0000 }
.social-card.dc .icon svg{ fill:#5865F2; transform:scale(.92); transform-origin:center } /* anti-clip */
.social-card.tt .icon svg{ fill:#000000 }
.social-card.x  .icon svg{ stroke:#FFFFFF } /* X uses stroke */

/* Helpers */
.tiny{ font-size:.85rem }

/* =======
   PATCHES
   ======= */
.patches{ padding: 16px 0 54px }
.patches-head{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.patch{
  background: var(--panel);
  border:1px solid rgba(200,155,60,.35);
  border-radius:16px;
  padding:12px 14px
}
.patch + .patch{ margin-top:10px }
.patch .meta{ display:flex; gap:10px; align-items:center; color:var(--gold-2) }
.patch .ver{ font-weight:800; letter-spacing:.3px }
.patch .date{ color:var(--muted) }
.patch .title{ margin:.2rem 0 .3rem }
.patch ul{ margin:.3rem 0 .2rem 1.1rem }
.patch details[open]{ outline: 1px dashed rgba(200,155,60,.35); border-radius: 12px; }

/* Floaty hover */
.floaty{ transition: transform .2s ease, box-shadow .2s ease }
.floaty:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.25) }

/* =================
   Responsive tweaks
   ================= */
@media (max-width: 980px){
  .social-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .patches-head{ flex-direction:column; align-items:flex-start }
}
@media (max-width: 560px){
  .social-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* =========================================================
   HEADER — RESPONSYWNY UKŁAD (zachowuje WSZYSTKIE linki)
   ========================================================= */

/* Bazowo: jeden rząd, nic się nie ucina */
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:nowrap;
}
.brand{ display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; }
.brand .logo{ height:48px; max-width:100%; object-fit:contain; }
.top-actions{
  display:flex; align-items:center; gap:8px;
  flex:0 0 auto;
}
.top-actions a,
.top-actions button{
  white-space:nowrap;           /* żadnych łamań „Społeczność”, „Aktualizacje”, „Graj” */
}
.top-actions .nav-link{ margin-right:0; padding:8px 10px; font-size:0.95rem; }
.top-actions .btn.ghost{ padding:8px 10px; font-size:.95rem; border-radius:10px; }
.top-actions .btn.primary{ padding:9px 12px; font-size:1rem; border-radius:10px; }

/* <= 820px — lekka kompresja, wciąż jeden rząd na większości telefonów w poziomie */
@media (max-width: 820px){
  .brand .logo{ height:40px; }
  .top-actions{ gap:6px; }
  .top-actions .nav-link{ padding:7px 9px; font-size:.9rem; }
  .top-actions .btn.ghost{ padding:6px 8px; font-size:.9rem; }
  .top-actions .btn.primary{ padding:8px 10px; font-size:.95rem; }
}

/* <= 600px — przejście na DWA rzędy: wszystkie linki zostają, nic nie znika */
@media (max-width: 600px){
  .site-header .container{
    flex-wrap:wrap;             /* brand w 1. rzędzie, akcje w 2. */
    row-gap:8px;
  }
  .brand{ flex:1 1 100%; }      /* logo zajmuje pełną szerokość 1. rzędu */
  .top-actions{
    flex:1 1 100%;
    justify-content:flex-start; /* linki + PL + Graj w 2. rzędzie */
    flex-wrap:wrap;
    row-gap:6px;
  }
  .top-actions .nav-link{ padding:6px 8px; font-size:.9rem; }
  .top-actions .btn.ghost{ padding:6px 8px; font-size:.9rem; }
  .top-actions .btn.primary{ padding:8px 12px; font-size:.95rem; margin-left:auto; } /* „Graj” na prawo, jeśli jest miejsce */
}

/* <= 380px — ultra kompakt, dalej wszystko widać */
@media (max-width: 380px){
  .brand .logo{ height:34px; }
  .top-actions{ gap:5px; }
  .top-actions .nav-link{ padding:5px 7px; font-size:.85rem; }
  .top-actions .btn.ghost{ padding:5px 7px; font-size:.85rem; }
  .top-actions .btn.primary{ padding:7px 10px; font-size:.9rem; }
}