h1{margin:0; font-size:40px; letter-spacing:-.6px}
.subtitle{margin:8px 0 16px; color:var(--color-muted); max-width:60ch}

.filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:10px;
  border:1px solid var(--color-border);
  border-radius:16px;
  background: var(--surface-04);
  width: fit-content;
}
.filter-btn{
  cursor:pointer;
  border:1px solid var(--color-border);
  background: var(--color-btn);
  color:var(--color-text);
  border-radius:999px;
  padding:8px 12px;
  font-weight:600;
  min-height: 44px;
}
.filter-btn:hover{background: var(--color-hover)}
.filter-btn.is-active{
  background: var(--surface-14);
  border-color: var(--surface-22);
}

.team-block{
  margin:22px 0 28px;
}

.team-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px;
  border:1px solid var(--color-border);
  border-radius:16px;
  background: var(--surface-04);
}

.team-header h2{
  margin:0;
  font-size:20px;
  letter-spacing:-.2px;
}

.pill{
  font-size:12px;
  font-weight:800;
  letter-spacing:.8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--color-border);
  background: var(--surface-06);
}

.team-header.team-blue {
  background: rgba(var(--team-blue-rgb-dark), var(--a-35));
  outline: 3px solid rgba(var(--team-blue-rgb), var(--team-outline-a));
}
.team-header.team-red {
  background: rgba(var(--team-red-rgb-dark), var(--a-35));
  outline: 3px solid rgba(var(--team-red-rgb), var(--team-outline-a));
}
.team-header.team-green {
  background: rgba(var(--team-green-rgb-dark), var(--a-35));
  outline: 3px solid rgba(var(--team-green-rgb), var(--team-outline-a));
}


.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin-top:14px;
  width: 100%;
}

@media (max-width: 950px){
  .grid{grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 700px){
  .grid{grid-template-columns: repeat(2, 1fr);}
  h1{font-size:32px}
}
@media (max-width: 420px){
  .grid{grid-template-columns: 1fr;}
}

@media (max-width: 420px) {
  .card img { height: 220px; }  /* taller looks better on phone */
}



.card{
  cursor:pointer;
  text-align:left;
  border:1px solid var(--color-border);
  border-radius:18px;
  overflow:hidden;
  padding:0;
  color:inherit;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.card:hover{
  transform: translateY(-2px);
}
.card img{
  width:100%;
  height:190px;
  object-fit:cover;
  display:block;
}
.card-meta{
  padding:12px 12px 14px;
}
.card-name{
  font-weight:800;
}
.card-sub{
  margin-top:4px;
  color:var(--color-muted);
  font-size:13px;
}

/* Selected card highlight (variable-driven) */
.card.is-selected { transform: translateY(-2px); }

/* Blue */
.card.is-selected[data-team="blue"]{
  border-color: var(--team-blue-color) ;
  background-color: rgba(var(--team-blue-rgb), var(--team-selected-bg-a)) ;
  box-shadow: 0 0 0 2px rgba(var(--team-blue-rgb), var(--team-selected-ring-a));
}

/* Red */
.card.is-selected[data-team="red"]{
  border-color: var(--team-red-color) ;
  background-color: rgba(var(--team-red-rgb), var(--team-selected-bg-a)) ;
  box-shadow: 0 0 0 2px rgba(var(--team-red-rgb), var(--team-selected-ring-a));
}

/* Green */
.card.is-selected[data-team="green"]{
  border-color: var(--team-green-color) ;
  background-color: rgba(var(--team-green-rgb), var(--team-selected-bg-a)) ;
  box-shadow: 0 0 0 2px rgba(var(--team-green-rgb), var(--team-selected-ring-a));
}




/* Modal */

@media (max-width: 520px) {
  .modal{
    padding: 10px;
    align-items: flex-start;        /* keeps top visible */
  }
  .modal-panel{
    width: 100%;
    max-height: calc(100dvh - 20px);
    border-radius: 16px;
  }

  .modal-name { font-size: 38px; }
  .modal-team { font-size: 18px; }
  .modal-number { font-size: 160px; }

  .modal-text { padding: 14px; }

  .modal-close{
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
  }
}

.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:50;
  --modal-bgd-rgb: var(--team-neutral-rgb);
  background: rgba(var(--modal-bgd-rgb), var(--a-14)); /* tinted */
  border: 1px solid rgba(var(--modal-bgd-rgb), var(--a-22));

  overflow: hidden;
}
.modal.is-open{display:flex;}

/* Per-team override
.modal[data-team="blue"]   { --modal-bgd-rgb: var(--team-blue-rgb); }
.modal[data-team="red"]    { --modal-bgd-rgb: var(--team-red-rgb); }
.modal[data-team="green"]  { --modal-bgd-rgb: var(--team-green-rgb); }
*/

.modal-panel{
  position:relative;
  width:min(820px, 96vw);
  max-height: calc(100dvh - 24px);
  border:1px solid var(--color-border);
  border-radius:18px;
  --modal-panel-rgb:  var(--team-neutral-rgb);
  background: rgb(var(--modal-panel-rgb));
  overflow:auto;
}

.modal[data-team="blue"] .modal-panel  { --modal-panel-rgb: var(--team-blue-rgb-dark); }
.modal[data-team="red"]  .modal-panel  { --modal-panel-rgb: var(--team-red-rgb-dark); }
.modal[data-team="green"] .modal-panel { --modal-panel-rgb: var(--team-green-rgb-dark); }

.modal-close{
  position:absolute;
  z-index: 5;
  top:10px;
  right:10px;
  border:1px solid var(--color-border);
  background: var(--surface-06);
  color:var(--color-text);
  border-radius:12px;
  padding:6px 10px;
  cursor:pointer;
}
.modal-close:hover{background: var(--surface-10)}

.modal-content{
  display:grid;
  grid-template-columns: 1.1fr .95fr;
}
@media (max-width: 760px){
  .modal-content{grid-template-columns: 1fr;}
}
.modal-img{
  width:100%;
  height:100%;
  max-height:420px;
  object-fit:cover;
  display:block;
}
.modal-text{
  padding:18px;
  position: relative;
}

.modal-bio{
  margin-left: 6px;
  margin-top: -1px;
  position: relative;
  font-size:18px;
  color:var(--color-highlight);
}
.modal-team{
  font-weight:900;
  letter-spacing:.8px;
  text-transform:uppercase;
  font-size:20px;
  color:var(--color-highlight);
  margin-bottom: 0;
  margin-top: -15px;
  margin-left: 6px;
  position: relative;
}
.modal-name{
  margin:6px 0 8px;
  font-size:50px;
  margin-left: 6px;
  position: relative;
}

.modal-number{
  font-size: 250px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  margin-top: -30px;
  text-align: center;
  width: 100%;
  position: relative;

  /* subtle sporty look */
  color: color-mix(in srgb, var(--color-highlight) 85%, transparent);
}