.score-badge {
  position: absolute;
  left: 8px !important;
  right: auto !important;
  bottom: 8px !important;
  top: auto !important;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: #f5f1ff;
  background: linear-gradient(180deg, rgba(36, 25, 58, 0.94), rgba(20, 15, 35, 0.90));
  border: 1px solid rgba(181, 124, 255, 0.42);
  box-shadow: 0 10px 20px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
  box-sizing: border-box;
}
.score-badge svg{ color: #d9c2ff; flex: 0 0 auto; }
.score-badge-art{
  left: auto !important;
  right: 10px !important;
  bottom: 10px !important;
  z-index: 2;
  backdrop-filter: blur(6px);
}

/* Shared media UI bits (badges, collection button) */

.language-badge {
  position: absolute;
  bottom: 8px !important;
  right: 8px !important;
  top: auto !important;
  left: auto !important;
  min-height: 28px;
  min-width: 82px;
  max-width: 120px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  z-index: 2;
  box-sizing: border-box;
}

/* Small heart button for collections */
.collection-btn{
  position:absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #2a2a2a;
  background: rgba(0,0,0,.55);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.collection-btn:hover{ background: rgba(0,0,0,.75); border-color:#3a3a3a; }

/* Filled state when media is in ANY collection */
.collection-btn.in-collection svg path{
  fill: #b57cff;
  stroke: #8e4dff;
}

/* Make the heart fill more of the circle */
.collection-btn svg{ width:20px; height:20px; transform: scale(1.12); }

@media (max-width: 480px) {
  .collection-btn{ width: 40px; height: 40px; font-size: 18px; z-index: 5; }
  .score-badge,
  .language-badge{
    min-width: 76px;
    min-height: 26px;
    padding: 4px 9px;
    font-size: 11px;
  }
}

/* Color codes for language */
.language-unknown { background-color: #777; }
.language-english { background: linear-gradient(135deg, #b57cff, #7c3aed); }
.language-sub { background: linear-gradient(135deg, #ff1f47, #ff4d6d); }
.language-dub { background: linear-gradient(135deg, #1aa7ff, #2563eb); }
.language-sub-dub{
  background: linear-gradient(
    90deg,
    #ff1f47 0%,
    #ff1f47 28%,
    #b57cff 50%,   /* your site purple blend */
    #2563eb 72%,
    #2563eb 100%
  );
  /* Prevent tiny opposing-color fringes on rounded corners. */
  box-shadow: inset 2px 0 0 #ff1f47, inset -2px 0 0 #2563eb;
  background-clip: padding-box;
}

/* Ensure common poster containers can host absolutely-positioned badges/buttons */
.thumb-item,
.poster-wrap,
.poster-link,
.poster-frame,
.poster {
  position: relative;
}

/* Collections modal (shared across Home/Libraries/Detail) */
.collections-modal{background:#171717; border:1px solid #2a2a2a; border-radius:20px; overflow:hidden;}
.collections-modal .modal-header{border-bottom:1px solid #2a2a2a;}
.collections-modal .modal-footer{border-top:1px solid #2a2a2a;}
.collections-create{display:flex; gap:10px; margin-bottom: 12px;}
.collections-create input{flex:1; padding:10px 12px; border-radius: 12px; border:1px solid #2a2a2a; background:#111; color:#fff;}
.collections-list{display:flex; flex-direction:column; gap: 8px;}
.collections-item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid #2a2a2a; background:#1d1d1d;}
.collections-item .actions{display:flex; gap:8px;}
.collections-item button{border:none; background:transparent; color:#b7b7b7;}
.collections-item button:hover{color:#fff;}
.collections-item button.danger:hover{color:#ff6b6b;}

/* Save to collections: custom checkbox + icon buttons */
.pmu-check-row{display:flex; gap:10px; align-items:center; margin:0; cursor:pointer; user-select:none; flex:1;}
.pmu-check-input{position:absolute; opacity:0; pointer-events:none;}
.pmu-check-box{width:22px; height:22px; display:grid; place-items:center; border-radius:7px; border:1px solid #2a2a2a; background:#111; color:transparent; flex:0 0 auto;}
.pmu-check-label{color:#fff;}
.pmu-check-row:hover .pmu-check-box{border-color:#b57cff;}
.pmu-check-input:checked + .pmu-check-box{background:#b57cff22; border-color:#b57cff; color:#b57cff;}
.pmu-check-box svg{display:block;}
.collections-item .actions button{width:34px; height:34px; border-radius:10px; display:grid; place-items:center;}
.collections-item .actions button:hover{background:#111;}


/* Share modal */
.share-modal-shell .modal-body{display:flex;flex-direction:column;gap:14px;}
.share-media-meta{padding:12px 14px;border-radius:14px;border:1px solid #2a2a2a;background:#1d1d1d;}
.share-media-kicker{font-size:12px;text-transform:uppercase;letter-spacing:.08em;}
.share-media-title{margin-top:4px;font-weight:800;font-size:18px;color:#fff;}
.share-user-picker{display:flex;flex-direction:column;gap:8px;}
.share-field-label{font-weight:700;}
.share-user-select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #2a2a2a;background:#111;color:#fff;outline:none;}
.share-user-select:focus{border-color:#b57cff;box-shadow:0 0 0 3px rgba(181,124,255,.16);}
.share-status{min-height:20px;}
.share-status.is-error{color:#ff8b8b;}
.share-status.is-success{color:#9fe3ae;}

.shared-collection-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
.shared-collection-preview-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid #2a2a2a;background:#1d1d1d;color:#fff;min-height:62px;}
.shared-collection-preview-item img,.shared-collection-preview-fallback{width:38px;height:54px;border-radius:10px;object-fit:cover;background:#111;flex:0 0 auto;}
.shared-collection-preview-item span{font-weight:700;line-height:1.2;}
@media (max-width: 640px){
  .shared-collection-preview{grid-template-columns:1fr;}
}


/* Thumb-grid-only badge row. Keeps poster-grid score/language pills aligned without changing the Popular Right Now panel. */
.thumb-item .thumb-badge-row{
  position:absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 6px;
  pointer-events:none;
}

.thumb-item .thumb-badge-row .score-badge,
.thumb-item .thumb-badge-row .language-badge{
  position: static !important;
  inset: auto !important;
  min-width: 0;
  min-height: 26px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  max-width: calc(50% - 3px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex: 0 1 auto;
}

.thumb-item .thumb-badge-row .score-badge{
  color:#f4edff;
  background: linear-gradient(180deg, rgba(43,31,68,.94), rgba(23,17,39,.90));
  border-color: rgba(181,124,255,.42);
}

.thumb-item .thumb-badge-row .score-badge svg{
  color:#d9c2ff;
}

@media (max-width: 520px){
  .thumb-item .thumb-badge-row{
    left: 7px;
    right: 7px;
    bottom: 7px;
    gap: 5px;
  }
  .thumb-item .thumb-badge-row .score-badge,
  .thumb-item .thumb-badge-row .language-badge{
    height: 24px;
    min-height: 24px;
    padding: 0 8px;
    font-size: 11px;
  }
}

/* Poster grid bottom badge row: keeps score + language aligned without collisions. */
.thumb-badge-row,
.poster-badges{
  position:absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 6px;
  pointer-events:none;
}
.thumb-badge-row .score-badge,
.poster-badges .score-badge,
.thumb-badge-row .language-badge,
.poster-badges .language-badge{
  position: relative !important;
  inset: auto !important;
  min-height: 26px;
  max-width: calc(50% - 3px);
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  flex: 0 1 auto;
}
.thumb-badge-row .score-badge,
.poster-badges .score-badge{
  min-width: 72px;
}
.thumb-badge-row .language-badge,
.poster-badges .language-badge{
  min-width: 68px;
}
@media (max-width: 480px){
  .thumb-badge-row,
  .poster-badges{ left: 7px; right: 7px; bottom: 7px; gap: 5px; }
  .thumb-badge-row .score-badge,
  .poster-badges .score-badge,
  .thumb-badge-row .language-badge,
  .poster-badges .language-badge{
    min-height: 24px;
    padding: 4px 8px;
    font-size: 11px;
  }
  .thumb-badge-row .score-badge,
  .poster-badges .score-badge{ min-width: 66px; }
  .thumb-badge-row .language-badge,
  .poster-badges .language-badge{ min-width: 62px; }
}