/* Hide existing Spotify card */
.spotify-card { display: none !important; }

/* Lanyard / Discord status card — matches site visual style */
.ly-card{
  width:100%;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
  overflow:hidden;
  transition:all .4s cubic-bezier(.23,1,.32,1);
}
.ly-card:hover{ border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.05); }

.ly-card.is-playing{ border-color:rgba(58,86,212,.55); background:rgba(58,86,212,.06); }
.ly-card.is-working{ border-color:rgba(58,86,212,.45); background:rgba(58,86,212,.05); }
.ly-card.is-sleeping{ border-color:rgba(155,155,155,.35); background:rgba(255,255,255,.03); }
.ly-card.is-error{ border-color:rgba(255,99,99,.4); }

.ly-card.is-working .ly-badge,
.ly-card.is-working .ly-sub{ display:none; }

.ly-card.is-sleeping .ly-badge,
.ly-card.is-sleeping .ly-sub{ display:none; }

.ly-card.is-playing .ly-badge{ display:none; }

.ly-inner{ display:flex; align-items:center; gap:16px; padding:16px 18px; }

.ly-art{ flex:0 0 auto; }
.ly-art-inner{
  position:relative;
  width:64px; height:64px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  color:rgba(255,255,255,.7);
}
.ly-img{ width:100%; height:100%; object-fit:cover; display:none; }
.ly-icon{ display:none; align-items:center; justify-content:center; width:100%; height:100%; }

/* Spinner ring */
.ly-spinner{
  display:none;
  width:30px; height:30px;
  border-radius:50%;
  border:2.5px solid rgba(255,255,255,.12);
  border-top-color:rgba(58,86,212,.9);
  animation:ly-spin 1s linear infinite;
}
.ly-card.is-loading .ly-spinner{ border-top-color:rgba(255,255,255,.6); }
@keyframes ly-spin{ to{ transform:rotate(360deg);} }

.ly-info{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:6px; }

.ly-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; line-height:1; color:rgba(255,255,255,.65);
  padding:6px 10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  width:max-content; max-width:100%;
}
.ly-dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.4);
}
.ly-card.is-playing .ly-dot{ background:#3A56D4; box-shadow:0 0 0 4px rgba(58,86,212,.18); }
.ly-card.is-working .ly-dot{ background:#3A56D4; box-shadow:0 0 0 4px rgba(58,86,212,.18); animation:ly-pulse 1.6s ease-in-out infinite; }
.ly-card.is-sleeping .ly-dot{ background:#888; }
.ly-card.is-error .ly-dot{ background:#ff6b6b; }

@keyframes ly-pulse{
  0%,100%{ box-shadow:0 0 0 4px rgba(58,86,212,.15); }
  50%{ box-shadow:0 0 0 8px rgba(58,86,212,.05); }
}

.ly-title{
  margin:0;
  font-size:16px; font-weight:600;
  color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ly-sub{
  margin:0;
  font-size:13px; color:rgba(255,255,255,.55);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

@media (max-width:860px){
  .ly-art-inner{ width:56px; height:56px; }
  .ly-title{ font-size:15px; }
  .ly-sub{ font-size:12px; }
}


/* Subtle glass effect for project / work / archive cards */
.project-card-content[data-v-7f313281]{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.10) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
}
.project-card-content[data-v-7f313281] .bg-overlay{
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%) !important;
}