/* ---- Players ---- */
.players h2 { margin-bottom: 14px; }

.players-toolbar {
  display: flex; justify-content: flex-end; margin-bottom: 12px;
}
.players-toolbar input[type="search"]{
  max-width: 360px; width: 100%;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid #ddd; background: rgba(255, 255, 255, 0);
}

/* Table */
.players-table{
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(4px);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  table-layout: fixed;
}
.players-table th, .players-table td{
  padding: 12px 14px; text-align: left;
  border-bottom: 1px solid #940303;
  word-wrap: break-word;
  color: #f1ebeb;
}
.players-table thead th{
  background: #ee090900; font-weight: 700; color: #f3eeee;
}
.players-table tbody tr:hover{ background: #940303; }

.players-table td.avatar {
  width: 72px;
}
.players-table td.avatar img{
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

.players-toolbar input[type="search"] {
  color: #f5f5f5;
}

/* Mobile: table -> cartes */
@media (max-width: 700px){
  .players-table thead{ display: none; }
  .players-table, .players-table tbody, .players-table tr, .players-table td{ display: block; width: 100%; }
  .players-table tr{ padding: 12px 12px 6px; border-bottom: 1px solid #eee; }
  .players-table td{
    display: grid; grid-template-columns: 130px 1fr; gap: 10px;
    border: 0; padding: 8px 0;
  }
  .players-table td.avatar{ grid-template-columns: 1fr; }
  .players-table td::before{
    content: attr(data-label);
    font-weight: 600; color: #666;
  }
}


/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  z-index: 2000;
  inset: 0;
  background: rgba(0,0,0,0.85);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
}
.lightbox img {
  max-width: 90%;
  max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.6);
}
.lightbox p {
  margin-top: 12px;
  color: #fff;
  font-size: 1.1rem;
  text-align: center;
}
.lightbox .close {
  position: absolute;
  top: 15px; right: 25px;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
}