/* ============================================
   ROSTER PAGE STYLES
   ============================================ */

.player-card {
  cursor: pointer;
  transition: all 0.3s;
}

.player-card:hover {
  box-shadow: 0 4px 12px rgba(94,24,37,0.2);
  border-color: #5D1725;
  transform: translateY(-2px);
}

/* CARD PHOTO FRAME - fixed size, all cards same height */
.card-photo-frame {
  width: 100%;
  height: 160px;
  background: linear-gradient(135deg, #5D1725, #3c0f17);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Real uploaded photo - fills frame */
.card-real-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Admiral logo placeholder - contained, not cropped */
.card-placeholder-logo {
  width: auto;
  height: 75%;
  object-fit: contain;
  display: block;
  opacity: 0.9;
}

/* Number badge - bottom left */
.card-number-badge {
  position: absolute;
  bottom: 6px;
  left: 8px;
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-shadow:
    1px 1px 3px rgba(0,0,0,0.9),
    -1px -1px 3px rgba(0,0,0,0.9),
    1px -1px 3px rgba(0,0,0,0.9),
    -1px 1px 3px rgba(0,0,0,0.9);
  z-index: 2;
}

/* Captain badge - bottom right - matches number style exactly */
.card-captain-badge {
  position: absolute;
  bottom: 6px;
  right: 8px;
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  text-shadow:
    1px 1px 3px rgba(0,0,0,0.9),
    -1px -1px 3px rgba(0,0,0,0.9),
    1px -1px 3px rgba(0,0,0,0.9),
    -1px 1px 3px rgba(0,0,0,0.9);
  z-index: 2;
}

/* Alternate captain badge - same style as C */
.card-alternate-badge {
  color: white;
  font-size: 1.5rem;
}

/* ============================================
   PROFILE MODAL
   ============================================ */

.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.75);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

.modal-overlay.active { display: flex; }

.modal {
  background: white;
  border-radius: 8px;
  max-width: 460px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

/* Floating close button - on the modal itself, top right corner */
.modal-close-float {
  position: absolute;
  top: 10px;
  right: 10px;
  background: white;
  border: 2px solid black;
  color: black;
  font-size: 1.2rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transition: all 0.2s;
  font-weight: 700;
}
.modal-close-float:hover { background: #f0f0f0; }

/* Modal photo wrap - fills entire maroon area */
.modal-photo-wrap {
  width: 100%;
  background: linear-gradient(135deg, #5D1725, #3c0f17);
  overflow: hidden;
  position: relative;
}

.modal-photo-container {
  position: relative;
  width: 100%;
}

/* Real photo - same 7:8 proportions as card, fills frame */
.modal-real-photo {
  width: 100%;
  aspect-ratio: 7 / 8;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Placeholder logo - centered on maroon, same proportions */
.modal-placeholder-logo {
  width: 100%;
  aspect-ratio: 7 / 8;
  object-fit: contain;
  display: block;
  padding: 2rem;
  opacity: 0.9;
}

/* Number badge on modal image - bottom left */
.modal-number-badge {
  position: absolute;
  bottom: 10px;
  left: 12px;
  color: white;
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  text-shadow:
    2px 2px 6px rgba(0,0,0,0.9),
    -2px -2px 6px rgba(0,0,0,0.9),
    2px -2px 6px rgba(0,0,0,0.9),
    -2px 2px 6px rgba(0,0,0,0.9);
  z-index: 2;
}

/* Captain/Alternate inline next to name */
.modal-captain-inline {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 700;
  margin-left: 0.5rem;
  vertical-align: middle;
  text-shadow: none;
}

.modal-captain-c { color: #d4a574; }
.modal-captain-a { color: #cccccc; }

/* Captain identifier tag - maroon box grey text */
.captain-identifier {
  display: inline-block;
  background: #5D1725;
  color: #cccccc;
  padding: 3px 10px;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.modal-body { padding: 1.5rem; }
.modal-name { font-size: 1.5rem; font-weight: 700; color: #5D1725; margin-bottom: 0.25rem; }
.modal-subtitle { color: #666; margin-bottom: 0.75rem; font-size: 0.95rem; }
.modal-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.modal-tag { background: #f0f0f0; color: #5D1725; padding: 4px 10px; border-radius: 3px; font-size: 0.8rem; font-weight: 600; }
.modal-bio { font-size: 0.9rem; color: #444; line-height: 1.7; }

/* SEASON SELECTOR */
.season-selector-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  padding: 1rem 1.5rem;
  background: white;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

.season-selector-wrap label {
  font-weight: 600;
  color: #5D1725;
  font-size: 0.95rem;
  white-space: nowrap;
}

.season-selector-public {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #111;
  background: white;
  min-width: 160px;
}

.season-selector-public:focus {
  outline: none;
  border-color: #5D1725;
}