/* Ikony sekcji strony głównej dopasowane do wybranego stylu (data-styl).
   Zmieniają się razem ze stylem z „Dostosuj" - tak jak ikony menu.
   Dotyczy: .ghp-head-ic (Aktualności, Gorący hit), .rk30-ic (rankingi),
   .lc-ic (Ostatnio ukończone). Klasyczny (brak data-styl) zostaje bez zmian. */

/* ---------- Fantasy: złoto, wytłaczane (karczma) ---------- */
:root[data-styl="fantasy"] .ghp-head-ic,
:root[data-styl="fantasy"] .rk30-ic,
:root[data-styl="fantasy"] .lc-ic {
  background: linear-gradient(145deg, #f6d78a, #b8862f);
  border: 1px solid #8a5a1e;
  box-shadow: 0 6px 14px rgba(184,134,47,.4), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -5px 8px rgba(80,50,10,.4);
}
:root[data-styl="fantasy"] .ghp-head-ic svg,
:root[data-styl="fantasy"] .rk30-ic svg,
:root[data-styl="fantasy"] .lc-ic svg { fill: #3a260c; filter: drop-shadow(0 1px 0 rgba(255,255,255,.3)); }

/* ---------- Neon: cyjan, świecąca kontura ---------- */
:root[data-styl="neon"] .ghp-head-ic,
:root[data-styl="neon"] .rk30-ic,
:root[data-styl="neon"] .lc-ic {
  background: #0f1720;
  border: 1px solid rgba(34,211,238,.4);
  box-shadow: 0 0 14px rgba(34,211,238,.33), inset 0 0 10px rgba(34,211,238,.13);
}
:root[data-styl="neon"] .ghp-head-ic svg,
:root[data-styl="neon"] .rk30-ic svg,
:root[data-styl="neon"] .lc-ic svg {
  fill: none; stroke: #34e3f0; stroke-width: 1.7; filter: drop-shadow(0 0 4px rgba(34,211,238,.8));
}

/* ---------- Graficzny: militarny czerwony ---------- */
:root[data-styl="graficzny"] .ghp-head-ic,
:root[data-styl="graficzny"] .rk30-ic,
:root[data-styl="graficzny"] .lc-ic {
  background: linear-gradient(145deg, #e23b3b, #7a1414);
  border: 1px solid #5a0f0f;
  box-shadow: 0 6px 14px rgba(200,40,40,.4), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -5px 9px rgba(60,0,0,.45);
}
:root[data-styl="graficzny"] .ghp-head-ic svg,
:root[data-styl="graficzny"] .rk30-ic svg,
:root[data-styl="graficzny"] .lc-ic svg { fill: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }

/* ---------- Karty: matowe szkło ---------- */
:root[data-styl="karty"] .ghp-head-ic,
:root[data-styl="karty"] .rk30-ic,
:root[data-styl="karty"] .lc-ic {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 8px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
:root[data-styl="karty"] .ghp-head-ic svg,
:root[data-styl="karty"] .rk30-ic svg,
:root[data-styl="karty"] .lc-ic svg { fill: #cbd3ff; }

/* ---------- Material: kolorowe kółka, biały glif ---------- */
:root[data-styl="material"] .ghp-head-ic,
:root[data-styl="material"] .rk30-ic,
:root[data-styl="material"] .lc-ic {
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,.3);
}
:root[data-styl="material"] .ghp-head-ic { background: #7c4dff; }
:root[data-styl="material"] .rk30-ic { background: #26a69a; }
:root[data-styl="material"] .lc-ic { background: #ef5350; }
:root[data-styl="material"] .ghp-head-ic svg,
:root[data-styl="material"] .rk30-ic svg,
:root[data-styl="material"] .lc-ic svg { fill: #fff; }

/* ---------- Neon + kolor: gaming, magenta→fiolet, mocna poświata ---------- */
:root[data-styl="neon-kolor"] .ghp-head-ic,
:root[data-styl="neon-kolor"] .rk30-ic,
:root[data-styl="neon-kolor"] .lc-ic {
  background: linear-gradient(145deg, #ff4fd8, #7c3aed);
  border: 1px solid rgba(255,79,216,.5);
  box-shadow: 0 0 16px rgba(168,85,247,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
:root[data-styl="neon-kolor"] .ghp-head-ic svg,
:root[data-styl="neon-kolor"] .rk30-ic svg,
:root[data-styl="neon-kolor"] .lc-ic svg { fill: #fff; filter: drop-shadow(0 0 3px rgba(255,79,216,.8)); }

/* ---------- Holo: tęczowa obwódka + szklane wnętrze ---------- */
:root[data-styl="holo"] .ghp-head-ic,
:root[data-styl="holo"] .rk30-ic,
:root[data-styl="holo"] .lc-ic {
  background: conic-gradient(from 210deg, #5eead4, #818cf8, #e879f9, #5eead4);
  box-shadow: 0 6px 16px rgba(129,140,248,.4), inset 0 1px 0 rgba(255,255,255,.5);
  position: relative;
}
:root[data-styl="holo"] .ghp-head-ic::after,
:root[data-styl="holo"] .rk30-ic::after,
:root[data-styl="holo"] .lc-ic::after {
  content: ""; position: absolute; inset: 2px; border-radius: inherit; background: rgba(14,16,22,.9);
}
:root[data-styl="holo"] .ghp-head-ic svg,
:root[data-styl="holo"] .rk30-ic svg,
:root[data-styl="holo"] .lc-ic svg { fill: #e8ecfb; position: relative; z-index: 1; }