/* ================================
   SKILL BACKGROUND
================================ */

.skill-wrapper{
  padding:20px;
  position:relative;
  overflow:hidden;
}

/* ================================
   DISCO LIGHT EFFECT
================================ */

.skill-bg-effects{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
  radial-gradient(circle at 20% 30%, rgba(255,0,100,.2), transparent 40%),
  radial-gradient(circle at 70% 60%, rgba(0,255,200,.2), transparent 40%),
  radial-gradient(circle at 40% 80%, rgba(255,255,0,.15), transparent 40%);
  animation:discoMove 8s infinite linear;
}

@keyframes discoMove{
  0%{transform:translateY(0)}
  50%{transform:translateY(-30px)}
  100%{transform:translateY(0)}
}


/* ================================
   HEADER
================================ */

.skill-header{
  font-size:22px;
  font-weight:700;
  margin-bottom:18px;
}


/* ================================
   TOP CARD
================================ */

.skill-topcard{
  background:linear-gradient(120deg,#440000,#880000,#220000);
  color:white;
  padding:18px;
  border-radius:14px;
  margin-bottom:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  position:relative;
  overflow:hidden;
}

/* disco shine */

.skill-topcard::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:60%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.6),
    transparent
  );
  transform:skewX(-20deg);
  animation:shineMove 3s infinite;
}

@keyframes shineMove{
  0%{left:-120%}
  100%{left:130%}
}

.skill-username{
  font-size:18px;
  font-weight:600;
}

.skill-level{
  font-size:13px;
  opacity:.8;
}

.skill-total{
  position:absolute;
  right:16px;
  top:16px;
  font-weight:700;
}


/* ================================
   CATEGORY
================================ */

.skill-category{
  margin-top:16px;
  margin-bottom:6px;
  font-weight:700;
  color:#355;
}


/* ================================
   ROW
================================ */

.skill-row{
  display:flex;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
}


/* ================================
   STARS
================================ */

.skill-stars{
  font-size:16px;
}

.star{
  animation:starGlow 2s infinite alternate;
}

.star.off{
  opacity:.25;
}

@keyframes starGlow{
  0%{filter:drop-shadow(0 0 2px gold)}
  100%{filter:drop-shadow(0 0 8px gold)}
}


/* ================================
   FLOATING STARS
================================ */

.skill-wrapper::after{
  content:"✨ 💛 ⭐ 💖 ⭐ ✨ 💛";
  position:absolute;
  top:-20px;
  left:0;
  width:100%;
  text-align:center;
  font-size:24px;
  animation:floatStars 12s linear infinite;
  opacity:.25;
}

@keyframes floatStars{
  0%{transform:translateY(-40px)}
  100%{transform:translateY(900px)}
}


/* ================================
   STAR EXPLOSION
================================ */

.explosion-star{

  position:absolute;
  font-size:18px;
  pointer-events:none;
  animation:starExplode 1.6s ease-out forwards;
  filter:drop-shadow(0 0 6px gold);

}

@keyframes starExplode{

  0%{
    transform:translate(0,0) scale(.6);
    opacity:1;
  }

  100%{
    transform:translate(var(--x),var(--y)) scale(1.6);
    opacity:0;
  }

}

.star{
  font-size:20px;
  color:#555;           /* kosong */
  cursor:pointer;
  margin-right:4px;
  transition:0.2s;
}

.star.active{
  color:#FFD700;        /* kuning gold */
}
.star:hover{
  transform:scale(1.2);
}

.star{
  user-select:none;
}

.skill-actions {
  position: relative;
  z-index: 10;
}

.sheet-overlay {
  pointer-events: none;
}