/* Identify who played each card in the current trick. Each label now belongs
   to the same wrapper as its card and sits in normal flow above it instead of
   overlaying the card face. */
#pepper-app .played-card-item {
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:4px !important;
  min-width:0 !important;
}

#pepper-app .played-card-label {
  position:static !important;
  display:block !important;
  flex:0 0 auto !important;
  margin:0 !important;
  padding:2px 5px !important;
  border:1px solid rgba(255,255,255,.28) !important;
  border-radius:999px !important;
  background:rgba(7,17,24,.90) !important;
  box-shadow:0 2px 5px rgba(0,0,0,.30) !important;
  color:#f4f7f9 !important;
  font-size:10px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  pointer-events:none !important;
  transform:none !important;
  z-index:8 !important;
}

html[data-pepper-theme="light"] #pepper-app .played-card-label {
  border-color:rgba(26,48,38,.25) !important;
  background:rgba(248,251,249,.94) !important;
  color:#203129 !important;
}

@media (min-width:1200px) {
  #pepper-app .played-card-item {
    width:82px !important;
  }

  #pepper-app .played-card-item:first-child {
    width:96px !important;
  }

  #pepper-app .played-card-label {
    width:82px !important;
    max-width:82px !important;
  }

  #pepper-app .played-card-item:first-child .played-card-label {
    width:96px !important;
    max-width:96px !important;
  }
}

@media (max-width:767px) {
  body[data-pepper-phase="playing"] #pepper-app .played-card-item {
    width:56px !important;
    gap:4px !important;
  }

  body[data-pepper-phase="playing"] #pepper-app .played-card-item:first-child {
    width:64px !important;
  }

  body[data-pepper-phase="playing"] #pepper-app .played-card-label {
    width:56px !important;
    max-width:56px !important;
    padding:2px 4px !important;
    font-size:9px !important;
  }

  body[data-pepper-phase="playing"] #pepper-app .played-card-item:first-child .played-card-label {
    width:64px !important;
    max-width:64px !important;
  }
}