/* ================================
   GLOBAL BASE
================================ */
:root{
  --gold: #f0c040;
  --glass: rgba(0, 0, 0, 0.85);
  --glass2: rgba(0, 0, 0, 0.86);
  --borderLite: rgba(255,255,255,0.10);
  --softWhite: rgba(255,255,255,0.06);
  --chalk: url('./img/bball_chalk.PNG');
  --fontMain: 'Segoe UI', sans-serif;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--chalk) no-repeat center center fixed;
  background-size: cover;
  font-family: var(--fontMain);
  color: #fff;
}

/* ================================
   CONTAINER (default matches results pages)
================================ */
.container{
  max-width: 800px;
  margin: 100px auto;
  background-color: var(--glass);
  padding: 40px;
  border-radius: 10px;
}

/* Optional widths for special pages (use if you want later) */
.container.w900{ max-width: 900px; }
.container.w1100{
  max-width: 1100px;
  margin: 60px auto;
  padding: 26px;
  border-radius: 12px;
  border: 1px solid var(--borderLite);
  background: var(--glass2);
}
.container.w950{ max-width: 950px; margin: 50px auto; padding: 34px; }
.container.w1050{ max-width: 1050px; margin: 50px auto; padding: 34px; }

/* ================================
   TYPOGRAPHY
================================ */
h1, h2{
  color: var(--gold);
  text-align: center;
}
h1{ margin-top: 0; }

p, li, textarea{
  font-size: 18px;
  line-height: 1.6;
}
ul{ margin-top: 0; }

/* index helpers */
.sub{
  text-align: center;
  opacity: 0.9;
  margin-top: -10px;
  margin-bottom: 25px;
  font-size: 14px;
}

label{
  display: block;
  width: 100%;
  margin-top: 15px;
  font-size: 16px;
}

input, select{
  display: block;
  width: 100%;
  margin-top: 8px;
  font-size: 16px;
  padding: 10px;
  border-radius: 6px;
  border: none;
}

/* ================================
   PROFILE PIC
================================ */
.profile-pic{
  text-align: center;
  margin-bottom: 30px;
}
.profile-pic img{
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--gold);
}

/* ================================
   RATINGS + SECTIONS
================================ */
.ratings{
  background-color: rgba(255,255,255,0.05);
  border: 1px solid #888;
  border-radius: 8px;
  padding: 15px;
  margin: 20px 0;
}
.ratings p{ margin: 5px 0; }

.section{ margin-top: 30px; }

/* ================================
   LEGENDS
================================ */
.legends{
  margin-top: 40px;
  border-top: 1px solid #888;
  padding-top: 20px;
}
.legend-card{
  display: flex;
  align-items: center;
  margin: 10px 0;
}
.legends img{
  width: 100px;
  height: auto;
  border-radius: 10px;
  margin-right: 10px;
}

/* ================================
   TEXTAREA
================================ */
#coachNotes {
  width: 100%;
  min-height: 650px;      /* YUGE */
  padding: 20px;
  font-size: 18px;
  line-height: 1.6;
  resize: vertical;
  box-sizing: border-box;
}

/* ================================
   BUTTONS
================================ */
button{
  width: 100%;
  padding: 12px;
  font-size: 16px;
  background-color: var(--gold);
  color: black;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
button.secondary{
  background-color: rgba(240,192,64,0.2);
  color: var(--gold);
  border: 1px solid rgba(240,192,64,0.7);
}
button:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

/* index grids */
.row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.btnRow{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

/* directory / status pill styles (shared name “pill”)
   Note: index and directory both use .pill, so we unify it */
.pill{
  display: inline-block;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(240,192,64,0.15);
  border: 1px solid rgba(240,192,64,0.55);
  color: var(--gold);
  margin-right: 8px;
  font-weight: 800;
  white-space: nowrap;
}

.status{
  margin-top: 14px;
  font-size: 13px;
  opacity: 0.9;
  line-height: 1.4;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 10px 12px;
  border-radius: 8px;
}
.mini{ opacity: 0.85; }

/* "Player Directory" top button on index */
.dirBtn{
  display:inline-block;
  margin: 0 0 12px 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(240,192,64,0.16);
  border: 1px solid rgba(240,192,64,0.55);
  color: var(--gold);
  font-weight: 900;
  text-decoration: none;
}
.dirBtn:hover{ background: rgba(240,192,64,0.22); }

.smallLink{
  color: var(--gold);
  text-decoration: underline;
  cursor: pointer;
}

/* ================================
   ACTION BUTTONS (GLOBAL + MOBILE FIX)
================================ */
.action-buttons{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 40px auto 20px;
  text-align: center; /* harmless fallback */
}

.action-buttons a{
  display: inline-block;
  padding: 12px 25px;
  background-color: var(--gold);
  border-radius: 6px;
  font-size: 18px;
  color: black;
  text-decoration: none;
  min-height: 44px;
  line-height: 1.1;
}

@media (max-width: 600px){
  .action-buttons{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .action-buttons a{
    width: 100%;
  }
}

/* ================================
   FEEDBACK BUTTON
================================ */
#getFeedbackBtn{
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 6px;
  background-color: var(--gold);
  color: black;
  border: none;
  cursor: pointer;
}

/* ================================
   RESULTS + COMPARE PAGES
================================ */
.grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}

.card{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 14px;
}

.k{ opacity: 0.75; font-size: 12px; margin-bottom: 3px; }
.v{ font-size: 16px; font-weight: 700; }

/* compare.html table */
table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 14px;
}
th, td{
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  text-align: left;
}
th{ color: var(--gold); font-weight: 700; }

.pos{ font-weight: 700; }
.up{ color: #9cffb4; }
.down{ color: #ffb2b2; }

/* results.html extra row + bar + pre */
.row3{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.bar{
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
  margin-top: 8px;
}
.bar > div{
  height: 100%;
  width: 0%;
  background: var(--gold);
}

pre{
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 12px;
  border-radius: 10px;
  margin-top: 14px;
  font-size: 12px;
  opacity: 0.95;
}

/* Mobile */
@media (max-width: 760px){
  .grid{ grid-template-columns: 1fr; }
  .btnRow{ grid-template-columns: 1fr; }
  .row3{ grid-template-columns: 1fr; }
  .container{ margin: 30px 14px; padding: 26px; }
}

/* Print rules (results page) */
@media print{
  button{ display: none !important; }
  body{ background: none; color: black; }
  .container{ background: white; border: none; }
  .card{ background: white; border: 1px solid #ddd; }
  h1{ color: black; }
}

/* ================================
   BADGE EMOJI GLOW
================================ */
.badge-emoji{
  display: inline-block;
  font-size: 20px;
  line-height: 1;
}
.badge-emoji.glow{
  text-shadow:
    0 0 6px rgba(240,192,64,0.95),
    0 0 12px rgba(240,192,64,0.75),
    0 0 18px rgba(240,192,64,0.55);
}

/* ================================
   DIRECTORY PAGE
================================ */
.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin: 14px 0 16px 0;
}
.searchWrap{
  flex: 1 1 380px;
  display:flex;
  gap:10px;
  align-items:center;
}
input[type="search"]{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06);
  color:#fff;
  outline:none;
  font-size:14px;
}
input[type="search"]::placeholder{ color:rgba(255,255,255,0.55); }

.tableWrap{
  overflow:auto;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
}
table{
  width:100%;
  border-collapse:collapse;
  min-width: 980px;
  background:rgba(0,0,0,0.25);
}
thead th{
  position:sticky;
  top:0;
  background:rgba(0,0,0,0.92);
  z-index:1;
  text-align:left;
  padding:12px 10px;
  font-size:13px;
  color: var(--gold);
  border-bottom:1px solid rgba(255,255,255,0.12);
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
thead th .sort{
  opacity:0.75;
  font-size:12px;
  margin-left:6px;
}
tbody td{
  padding:11px 10px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  font-size:13.5px;
  white-space:nowrap;
}
tbody tr:hover{ background:rgba(255,255,255,0.06); }

.muted{ opacity:0.75; }
.idLink{
  color: var(--gold);
  font-weight:900;
  text-decoration:none;
}
.idLink:hover{ text-decoration:underline; }

.tag{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  font-weight:800;
  font-size:12px;
}
.tag.pos{
  border-color: rgba(240,192,64,0.55);
  color: var(--gold);
  background:rgba(240,192,64,0.10);
}
.tag.tier{ border-color: rgba(255,255,255,0.16); }

.right{ text-align:right; }
.empty{ padding:18px; text-align:center; opacity:0.8; }
.footerHint{ margin-top:12px; opacity:0.7; font-size:12px; text-align:center; }

/* ================================
   FOOTER
================================ */
footer{
  background-color: black;
  text-align: center;
  padding: 20px 0;
  margin-top: 40px;
}
footer img{
  height: 100px;
  width: auto;
}

/* index footer tweaks */
footer.indexFooter{
  padding: 18px 0;
  margin-top: 60px;
}
footer.indexFooter img{ height: 90px; }

/* ================================
   RESPONSIVE (index layout)
================================ */
@media (max-width: 760px){
  .row, .btnRow{ grid-template-columns: 1fr; }
  .container{ margin: 30px 14px; padding: 28px; }
}

/* ================================
   PRINT OPTION FOR COACH NOTES
================================ */
@media print {

  #coachNotes {
    height: auto !important;
    min-height: 650px;
    overflow: visible !important;
    white-space: pre-wrap;
    page-break-inside: auto;
  }

}