/* ═══ Skin »Igriv« (playful) — 2026-10-16 ═══════════════════════════════════════════════════════════════
   Ena datoteka = en skin. Vsa pravila pod .skin-playful:
     .profil-kartica.skin-playful  → kartica (Skupnost, vstopna stran)
     body.skin-playful             → stran profila (oseba.php)
   Grafika: skini/playful/ (vzorec.svg konfeti, pentlja.svg darilna pentlja, balon.svg balonček).
   Zvok + konfeti ob odprtju profila: skini/skin.js (melodija v config.php SKINI['playful']['zvok']). */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700&display=swap');
@import url('luci.css'); /* trak lučk na kartici profila (skupna knjižnica) */

.skin-playful {
  --pl-roza: #ff6fb5;
  --pl-roza-t: #ff4f9d;
  --pl-modra: #7cd3ff;
  --pl-rumena: #ffd166;
  --pl-meta: #8be0b4;
  --pl-besedilo: #4a2c5a;
  --pl-besedilo-2: #8a6a9a;
  --pl-ozadje: #fff4fa;
  --pl-trak: repeating-linear-gradient(45deg, #ff6fb5 0 7px, #fff 7px 10px, #7cd3ff 10px 17px, #fff 17px 20px, #ffd166 20px 27px, #fff 27px 30px);
}

/* ─── KARTICA ──────────────────────────────────────────────────────────────────────────────────────── */
.profil-kartica.skin-playful {
  position: relative;
  border: 3px solid var(--pl-roza) !important;
  border-radius: 22px;
  background: var(--pl-ozadje) url('playful/vzorec.svg') repeat;
  background-size: 120px;
  /* box-shadow NAMERNO ne spreminjamo: spolna žarnica pod kartico (.glow-moski/.glow-zenska, barva in smer)
     mora ostati enaka pri vseh skinih (zahteva uporabnika 2026-10-16). */
}

/* Darilni trak okrog slike (okvir v mavričnih črtah) — slika je vedno 3:4 na vrhu kartice. */
.profil-kartica.skin-playful::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 3 / 4;
  border: 6px solid transparent; border-image: var(--pl-trak) 6;
  pointer-events: none; z-index: 2;
}
/* Pentlja na vrhu slike — rahlo se ziba. */
.profil-kartica.skin-playful::before {
  content: ""; position: absolute; top: 1px; left: 50%; width: 58px; height: 35px; margin-left: -29px;
  background: url('playful/pentlja.svg') center / contain no-repeat;
  pointer-events: none; z-index: 4;
  transform-origin: 50% 60%; animation: pl-pentlja 4s ease-in-out infinite;
}
.profil-kartica.skin-playful .profil-kartica-info {
  position: relative; padding-right: 1.9rem;
  background: rgba(255,255,255,.72); color: var(--pl-besedilo);
  font-family: 'Nunito', sans-serif; border-top: 2px dashed #ffc2e0;
}
.profil-kartica.skin-playful .profil-kartica-ime { font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 600; color: var(--pl-roza-t); letter-spacing: .01em; }
.profil-kartica.skin-playful .profil-kartica-meta { color: var(--pl-besedilo-2); }
/* Animirana ikona: balonček lebdi v spodnjem desnem kotu. */
.profil-kartica.skin-playful .profil-kartica-info::after {
  content: ""; position: absolute; right: 7px; bottom: 6px; width: 17px; height: 28px;
  background: url('playful/balon.svg') center / contain no-repeat;
  animation: pl-balon 3.2s ease-in-out infinite; pointer-events: none;
}

/* ─── STRAN PROFILA ────────────────────────────────────────────────────────────────────────────────── */
body.skin-playful {
  --bg: #fff4fa; --surface: #ffffff; --surface-2: #ffe6f3; --border: #ffc2e0;
  --text: #4a2c5a; --text-sec: #8a6a9a; --accent: #ff4f9d; --accent-dark: #e0458f;
  background: var(--pl-ozadje) url('playful/vzorec.svg') repeat;
  background-size: 140px;
  color: var(--pl-besedilo);
  font-family: 'Nunito', sans-serif;
}
body.skin-playful .card {
  background: rgba(255,255,255,.9);
  border: 2px solid #ffc2e0;
  border-radius: 24px;
  /* žareča kartica — nežen, stalen roza sij (mavrično »dihanje« pl-sij je na voljo, a izpuščeno: lučke že utripajo) */
  box-shadow: 0 0 0 1px rgba(255,111,181,.25), 0 0 22px -4px rgba(255,111,181,.5);
}
body.skin-playful h2, body.skin-playful h3, body.skin-playful .card strong { font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 600; }
body.skin-playful h2 { color: var(--pl-roza-t); }
body.skin-playful .btn-primary { background: linear-gradient(135deg, #ff6fb5, #ff9a8b); border-radius: 999px; }
/* Darilni trak + pentlja okrog vsake slike profila (oseba.php ovije sliko v .skin-foto-okvir). */
body.skin-playful .skin-foto-okvir { position: relative; display: inline-block; line-height: 0; border-radius: 14px; overflow: hidden; }
body.skin-playful .skin-foto-okvir::after {
  content: ""; position: absolute; inset: 0; border: 7px solid transparent; border-image: var(--pl-trak) 7;
  pointer-events: none; z-index: 2;
}
body.skin-playful .skin-foto-okvir::before {
  content: ""; position: absolute; top: 2px; left: 50%; width: 64px; height: 38px; margin-left: -32px;
  background: url('playful/pentlja.svg') center / contain no-repeat; pointer-events: none; z-index: 3;
  transform-origin: 50% 60%; animation: pl-pentlja 4s ease-in-out infinite;
}

/* Konfeti ob odprtju profila (skini/skin.js doda .skin-konfeti > i). */
.skin-konfeti { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.skin-konfeti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; opacity: .9; animation: pl-pada linear forwards; }

/* ─── ANIMACIJE ────────────────────────────────────────────────────────────────────────────────────── */
@keyframes pl-pentlja { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) scale(1.04); } }
@keyframes pl-balon { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-5px) rotate(6deg); } }
@keyframes pl-sij {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,111,181,.25), 0 0 22px -4px rgba(255,111,181,.55); }
  33%      { box-shadow: 0 0 0 1px rgba(124,211,255,.3),  0 0 26px -4px rgba(124,211,255,.65); }
  66%      { box-shadow: 0 0 0 1px rgba(255,209,102,.3),  0 0 24px -4px rgba(255,209,102,.6); }
}
@keyframes pl-pada { to { transform: translateY(110vh) rotate(720deg); } }

@media (prefers-reduced-motion: reduce) {
  .skin-playful *, .skin-playful::before, .skin-playful .profil-kartica-info::after, body.skin-playful .card { animation: none !important; }
  .skin-konfeti { display: none; }
}