/* ── Player / Auth ── */
.role-badge {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.7);
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.1em;
  margin-left: 8px;
  padding: 2px 8px;
  text-transform: uppercase;
  vertical-align: middle;
}
.role-fieldset {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  margin-bottom: 16px;
  padding: 12px 16px;
}
.role-option {
  cursor: pointer;
  display: block;
  font-size: 14px;
  margin-bottom: 8px;
  opacity: 0.85;
}

/* ── Player level cards ──────────────────────────────── */
.player-level {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  margin-bottom: 14px;
  padding: 20px 22px;
}
.player-level--active {
  border-color: rgba(255, 255, 255, 0.28);
}
.player-level--locked {
  opacity: 0.4;
}
.player-level-body {
  margin-top: 14px;
}
.player-level-body .admin-label {
  margin-bottom: 4px;
}
.player-level-desc {
  font-size: 13px;
  margin-top: 8px;
  opacity: 0.5;
}
.player-level-header {
  align-items: center;
  display: flex;
  gap: 10px;
}
.player-level-num {
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  height: 22px;
  justify-content: center;
  letter-spacing: 0;
  width: 22px;
}
.player-level--active .player-level-num {
  background: rgba(255, 255, 255, 0.22);
}
.player-level-status {
  font-size: 10px;
  letter-spacing: 0.1em;
  margin-left: auto;
  opacity: 0.35;
  text-transform: uppercase;
}
.player-level-status--on {
  color: rgba(140, 220, 140, 0.85);
  opacity: 1;
}
.player-level-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.player-score-card {
  background: rgba(255, 255, 255, 0.05);
  border:     1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding:    14px;
}
.player-score-card--button {
  appearance: none;
  color:      inherit;
  cursor:     pointer;
  font-family: inherit;
  text-align:  left;
  transition:  background 0.15s, border-color 0.15s, transform 0.15s;
  width:       100%;
}
.player-score-card--button:focus-visible,
.player-score-card--button:hover {
  background:   rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
  transform:    translateY(-1px);
}
.player-score-grid {
  display: grid;
  gap:     10px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin-top: 16px;
}
.player-score-label {
  font-size:      10px;
  letter-spacing: 0.08em;
  opacity:        0.45;
  text-transform: uppercase;
}
.player-score-note {
  font-size: 11px;
  margin-top: 5px;
  opacity:    0.5;
}
.player-score-value {
  font-size:   26px;
  font-weight: 800;
  line-height: 1;
  margin-top:  8px;
}
.score-definition-body {
  font-size:   14px;
  line-height: 1.55;
  opacity:     0.72;
}
.score-definition-close {
  align-items:     center;
  background:      rgba(255, 255, 255, 0.08);
  border:          1px solid rgba(255, 255, 255, 0.14);
  border-radius:   50%;
  color:           rgba(255, 255, 255, 0.78);
  cursor:          pointer;
  display:         flex;
  font-size:       18px;
  height:          30px;
  justify-content: center;
  line-height:     1;
  position:        absolute;
  right:           12px;
  top:             12px;
  width:           30px;
}
.score-definition-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color:      rgba(255, 255, 255, 0.95);
}
.score-definition-dialog {
  background:    rgba(12, 12, 12, 0.96);
  border:        1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  box-shadow:    0 18px 70px rgba(0, 0, 0, 0.45);
  color:         rgba(255, 255, 255, 0.9);
  max-width:     340px;
  padding:       22px 46px 22px 22px;
  position:      relative;
  width:         100%;
}
.score-definition-modal {
  align-items:     center;
  background:      rgba(0, 0, 0, 0.48);
  display:         flex;
  inset:           0;
  justify-content: center;
  padding:         20px;
  position:        fixed;
  z-index:         80;
}
.score-definition-modal[hidden] {
  display: none;
}
.score-definition-title {
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.08em;
  margin-bottom:  10px;
  text-transform: uppercase;
}
.animals-played--score-grid {
  display:               grid;
  gap:                   10px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  margin-top:            0;
}
.animals-played--score-grid .animal-played-row {
  align-items:     center;
  background:      rgba(255, 255, 255, 0.05);
  border:          1px solid rgba(255, 255, 255, 0.1);
  border-radius:   8px;
  color:           inherit;
  gap:             10px;
  min-width:       0;
  padding:         10px;
  text-decoration: none;
  transition:      background 0.15s, border-color 0.15s, transform 0.15s;
}
.animals-played--score-grid .animal-played-row--score-card:hover {
  background:   rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
  transform:    translateY(-1px);
}
.animals-played--score-grid .animal-played-thumb {
  border-radius: 8px;
  height:        58px;
  width:         58px;
}
.animals-played--score-grid .animal-played-info {
  align-self: center;
  min-width:  0;
}
.animals-played--score-grid .animal-played-header {
  align-items:   flex-start;
  flex-wrap:     nowrap;
  gap:           8px;
  margin-bottom: 4px;
}
.animals-played--score-grid .animal-played-name {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display:            -webkit-box;
  font-size:          13px;
  line-height:        1.2;
  overflow:           hidden;
}
.animals-played--score-grid .animal-played-score {
  background:    rgba(255, 255, 255, 0.08);
  border:        1px solid rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  color:         rgba(255, 255, 255, 0.72);
  font-size:     11px;
  padding:       2px 6px;
}
.animals-played--score-grid .animal-played-date {
  color:          rgba(255, 255, 255, 0.45);
  display:        flex;
  flex-direction: column;
  font-size:      10px;
  gap:            2px;
  line-height:    1.25;
  margin-bottom:  0;
}
.animals-played--score-grid .animal-played-date span {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.player-taxonomy-focus {
  display:        grid;
  font-size:      12px;
  gap:            5px;
  margin-top:     12px;
  opacity:        0.65;
}
.player-taxonomy-label {
  font-size:   12px;
  font-weight: 600;
  min-width:   82px;
}
.player-taxonomy-meter {
  background:    rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  flex:          1;
  height:        8px;
  overflow:      hidden;
}
.player-taxonomy-meter span {
  background: #ffffff;
  display:    block;
  height:     100%;
}
.player-taxonomy-report {
  margin-top: 18px;
}
.player-taxonomy-row {
  align-items: center;
  display:     flex;
  gap:         10px;
  margin-top:  9px;
}
.player-taxonomy-score {
  display:     grid;
  font-size:   12px;
  font-weight: 700;
  gap:         2px;
  opacity:     0.65;
  text-align:  right;
  width:       68px;
}
.player-taxonomy-score span {
  font-size:   10px;
  font-weight: 500;
  opacity:     0.72;
}
.player-attr {
  margin-bottom: 14px;
}
.player-attr-val {
  font-size: 15px;
  margin-top: 4px;
  opacity: 0.85;
}
.player-edit-form {
  margin-bottom: 16px;
}
.player-edit-row {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.player-edit-row .admin-input {
  flex: 1;
}
.toggle-switch {
  cursor:   pointer;
  display:  inline-block;
  height:   22px;
  position: relative;
  width:    42px;
}
.toggle-switch input {
  height: 0;
  opacity: 0;
  width: 0;
}
.toggle-slider {
  background:    rgba(255, 255, 255, 0.15);
  border-radius: 22px;
  bottom:        0;
  cursor:        pointer;
  left:          0;
  position:      absolute;
  right:         0;
  top:           0;
  transition:    background 0.2s;
}
.toggle-slider:before {
  background:    rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  bottom:        3px;
  content:       '';
  height:        16px;
  left:          3px;
  position:      absolute;
  transition:    transform 0.2s;
  width:         16px;
}
.toggle-switch input:checked + .toggle-slider {
  background: rgba(100, 200, 120, 0.45);
}
.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
}
.toggle-label {
  font-size:   13px;
  margin-left: 10px;
  opacity:     0.7;
  vertical-align: middle;
}

@media (max-width: 520px) {
  .animals-played--score-grid {
    grid-template-columns: 1fr;
  }
  .animals-played--score-grid .animal-played-thumb {
    height: 54px;
    width:  54px;
  }
}