/* --- Light theme --- */
body { background:#f8f9fa; color:#212529; padding-top: 40px; /* adjust to match your navbar height */}
.navbar{ background:#ffffff; border-bottom:1px solid #dee2e6; }
.navbar .nav-link{ color:#212529 }
.navbar .nav-link:hover{ color:#0d6efd }
.brand-title{ color:#0d6efd; font-weight:700 }
.section-title{ color:#212529 }
.section-subtitle{ color:#495057 }
.logo-grid img{ object-fit:contain; height:56px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.1)) }
.card{ border-radius:14px; border:1px solid #dee2e6; }
.game-card{ background:#fff; color:#212529; border:1px solid #dee2e6 }
.btn-ghost{ color:#212529; border-color:#ced4da }
.btn-ghost:hover{ background:#f1f3f5; color:#0d6efd }
/* Rich game layout */
.game-card .team{ display:flex; align-items:center; gap:.5rem }
.game-card .team img{ width:36px; height:36px; object-fit:contain; border-radius:6px; background:#f8f9fa }
.game-card .meta{ font-size:.875rem }
.game-card .headline{ font-weight:700 }
.linescore{ width:100%; font-size:.875rem }
.linescore th,.linescore td{
	padding:.25rem .5rem;
	border-bottom:1px solid #e9ecef;
	text-align:center
}
.leaders .leader{ display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem }
.leaders .avatar{ width:32px; height:32px; border-radius:50%; object-fit:cover; background:#f8f9fa }
footer{ background:#f1f3f5; }

  /* tune this once and all score columns stay identical */
  :root { --score-col-width: 3.2ch; } /* fits 2–3 digits comfortably */

  .linescore {
    table-layout: fixed; /* prevents content from resizing columns */
    width: 100%;
    border-collapse: collapse;
  }

  /* First column (team) can take remaining space */
  .linescore th:first-child,
  .linescore td:first-child {
    width: auto;
  }

  /* Score columns: identical fixed width + centered */
  .linescore th:not(:first-child),
  .linescore td:not(:first-child) {
    width: var(--score-col-width);
    text-align: center;
    white-space: nowrap;
  }

  /* Team cell layout */
  .linescore .team {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0; /* enables ellipsis below */
  }
  .linescore .team img {
    width: 28px; height: 28px; object-fit: contain; flex: 0 0 auto;
  }
  .linescore .team .flex-grow-1 {
    min-width: 0; /* required for text-overflow to work in flex */
  }
  .linescore .team .fw-semibold {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* long names won’t shove columns */
  }
.linescore th:first-child {
  font-weight: normal;
}

/*--------- weekly selection ---------------*/
/* viewport: horizontal scroll, no scrollbar */
  #ws-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;            /* Firefox */
  }
  #ws-viewport::-webkit-scrollbar {   /* WebKit */
    display: none;
  }

  /* rail items */
  #ws-rail li {
    flex: 0 0 auto;            /* don’t shrink */
    width: 120px;              /* tune to taste */
    text-align: center;
    padding: .25rem .5rem;
    margin: 0 .25rem;
    cursor: pointer;
    user-select: none;
    line-height: 1.1;
    border-radius: .25rem;
    white-space: nowrap;
  }

  /* top line: WEEK X */
  #ws-rail .wk-top {
    font-size: .85rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #6c757d;            /* muted */
    font-weight: 600;
  }
  /* bottom line: dates */
  #ws-rail .wk-bot {
    font-size: .8rem;
    color: #6c757d;
  }

  /* active/selected look */
  #ws-rail li.active .wk-top,
  #ws-rail li.active .wk-bot {
    color: #212529;            /* darker */
    font-weight: 700;
  }

  /* subtle hover */
  #ws-rail li:hover {
    background-color: #f8f9fa;
  }

  /* disabled chevron state */
  #ws-prev.disabled, #ws-next.disabled {
    opacity: .35;
    pointer-events: none;
  }

  @media (min-width: 992px) {
    #ws-rail li { width: 140px; }
  }


.back-to-top {
      position: fixed;
      bottom: 40px;
      right: 40px;
      display: none;
      border-radius: 50%;
      padding: 12px 16px;
      font-size: 22px;
      z-index: 999;
    }

/*--------------- vertical side bar ---------------------*/
/* Only show the divider on desktop (≥992px) */

@media (min-width: 992px) {
  .matchup-sidebar {
    position: relative;       /* anchor the pseudo-element */
    padding-left: .7rem;       /* optional spacing from divider */
  }
  .matchup-sidebar::before {
    content: "";
    position: absolute;
    left: -0.0005rem;           /* sits in the gutter; adjust as needed */
    top: 0;
    bottom: 0;
    width: 1px;
    background: #F0F0F0;      /* matches Bootstrap border color */
    pointer-events: none;
  }
}


.gameday-weather {
  
}

.gameday-weather h4 {
  margin-bottom: 10px;
  font-weight: bold;
  text-align: left; /* stays left */
}

.weather-icon-wrapper {
  text-align: center; /* centers the icon only */
}

.weather-icon {
  font-size: 50px;
  padding: 15px;  

  display: inline-block;
}

.high-temp {
  font-size: 1.2rem;
  margin-top: 10px;
  text-align: left; /* keeps temp text left */
}

.game-header {
  /*background: linear-gradient(to right, #00274C 50%, #BB0000 50%);*/ /* Example: Akron blue → Ohio State red */
  padding: 20px;
  border-radius: 10px;
  color: white;
}

.team-logo {
  max-width: 120px;
  height: auto;
}

.team-score {
  font-size: 2rem;
  font-weight: bold;
  margin-top: 10px;
}

.vs-text {
  font-size: 2.5rem;
  font-weight: bold;
  color: #fff;
  padding: 0 20px;
}

.boxscore {
  display: flex;
  justify-content: center; /* centers horizontally */
  align-items: center;     /* centers vertically (if they have height) */
  gap: 20px;               /* optional spacing between items */
  text-align: center;      /* centers text inside each child div */
}

..leader-row {
  display: flex;
  justify-content: space-between; /* pushes left & right players out */
  align-items: center;
}

.player-col {
  width: 30%; /* keeps them aligned nicely */
}

.category-col {
  width: 40%; /* center section */
  text-align: center;
}

.player-img-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #f0f0f0;
  overflow: hidden;
  margin-bottom: 5px;
}

.player-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.leader-category {
  font-size: 1rem;
  text-transform: uppercase;
  color: #444;
}

/* Scoring Plays */
.scoring-card .quarter-header{
  padding: .5rem .75rem;
  font-size: .875rem;
  text-transform: uppercase;
  color: #6c757d;
  background: #f6f7f9;
  border-top: 1px solid #eef0f2;
  border-bottom: 1px solid #eef0f2;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
  overflow: hidden; /* Keeps interior backgrounds from covering rounded corners */
}

.score-item{
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: .75rem;
  align-items: center;
  padding: .75rem .75rem;
  border-bottom: 1px solid #f0f2f4;
}
.score-item:last-child{ border-bottom: none; }

.team-badge{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #f1f3f5;
  object-fit: cover;             /* image to the edge of circle */
  display: block;
}

.si-top{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: baseline;
}
.si-title{
  font-weight: 600;
}
.si-meta{
  font-size: .85rem;
  color: #6c757d;
}
.si-desc{
  font-size: .95rem;
}
.si-drive{
  font-size: .8rem;
  color: #6c757d;
}

.si-right{ margin-left: .5rem; }
.si-score{
  min-width: 98px;
  padding: .35rem .5rem;
  border: 1px solid #e9ecef;
  border-radius: .5rem;
  text-align: center;
}
.si-team{
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6c757d;
  line-height: 1;
}
.si-points{
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.1;
justify-self: center;
}
.si-divider{
  padding: 0 .35rem;
  color: #adb5bd;
}

/* compact on mobile */
@media (max-width: 576px){
  .score-item {
    grid-template-columns: 36px 1fr auto; /* badge | main | score */
    align-items: start;
    gap: .5rem;
  }
  .team-badge { width: 36px; height: 36px; }
  .si-score { min-width: 80px; } /* shrink a bit for small screens */
  .si-right { margin-left: 0; } /* remove extra gap */
}


/* --- Chart Wrapper --- */
.wp-chart-wrapper {
  position: relative;
  width: 100%;
  height: 200px;
  margin-top: .25rem;
}
#wp-chart {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Quarter Labels --- */
.wp-xlabels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  font-size: .75rem;
  color: #6c757d;
  margin-top: 4px;
}
.wp-xlabels span {
  text-align: center;
}

/* --- Callout Box --- */
.wp-callout {
  border: 1px solid #eef0f2;
  border-radius: 8px;
  padding: .6rem .75rem;
  margin-top: .75rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  font-size: .875rem;
}
.wp-callout .small {
  font-size: .75rem;
  color: #6c757d;
  margin-bottom: 2px;
}

/* --- Responsive Adjustment --- */
@media (max-width: 576px) {
  .wp-chart-wrapper {
    height: 160px;
  }
}

/* Chart area */
.wp-container{position:relative;}
#wp-chart{width:100%;height:280px;} /* a bit taller + big grid top -> no overlap */

/* Corner badges */
.team-corner{
  position:absolute;top:10px;display:flex;align-items:center;gap:.5rem;
  background:#fff;border:1px solid var(--border);padding:.25rem .6rem;border-radius:999px;
  box-shadow:0 1px 2px rgba(0,0,0,.04); z-index:2;
}
.team-left{left:10px;}
.team-right{right:10px;flex-direction:row-reverse;}
.team-corner img{width:28px;height:28px;object-fit:contain;}
.team-text{display:flex;flex-direction:column;line-height:1;}
.team-name{font-weight:700;font-size:.9rem;}
.team-pct{font-size:.9rem;}

.wp-xlabels{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:.35rem;color:var(--muted);font-size:.75rem;}
.wp-xlabels span{text-align:center;}

.wp-callout{border:1px solid var(--border);border-radius:10px;padding:.75rem .9rem;margin-top:.75rem;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04);font-size:.92rem;}
.wp-callout .sub{color:var(--muted);font-size:.8rem;margin-top:.25rem;}

@media (max-width:576px){
  #wp-chart{height:240px;}
  .team-corner img{width:24px;height:24px;}
  .team-name,.team-pct{font-size:.82rem;}
}

.video-card { overflow:hidden; border-radius:.75rem; }
.thumb-wrap { position:relative; }
.thumb-wrap img { display:block; width:100%; height:auto; }
/* safety: prevent any pseudo-element text from other CSS leaking onto thumbnails */
.thumb-wrap *::before, .thumb-wrap *::after { content: normal !important; }

.team-block + .team-block { margin-top: 1rem; }
  .team-block h4 {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 1.1rem;
    margin: 0 0 .5rem;
  }
  .team-block .table thead th {
    font-size: .8rem;
    text-transform: uppercase;
    color: #666;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
  }
  .team-block .table td,
  .team-block .table th {
    border-bottom: 1px solid #eee;
    vertical-align: middle;
  }
  .team-block .player {
    font-weight: 600;
    white-space: nowrap;
  }

  /* Add alternating row shading */
  .team-block .table tbody tr:nth-child(even) {
    background-color: #f7f7f7;  /* light gray */
  }

  /* Optional: a little hover effect for polish */
  .team-block .table tbody tr:hover {
    background-color: #ececec;
  }

.live_hash { stroke:#e6f3e9; stroke-width:2; opacity:.6 }
#live_playList .active { background:#0d6efd; color:#fff }

/*--------- Claude CSS ------------*/
/* Field Container */
.field-container {
  position: sticky;
  top: 80px;
  background: #fff;
  border-radius: 14px;
  padding: 1.5rem;
  border: 1px solid #dee2e6;
  margin-bottom: 1rem;
}

/* Football Field */
#footballField {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.field-info {
  text-align: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e9ecef;
}

.field-info h5 {
  font-size: .9rem;
  color: #6c757d;
  margin-bottom: .5rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
}

.field-info .current-play {
  font-size: 1rem;
  font-weight: 600;
  color: #212529;
}

/* Play-by-Play Styles */
.pbp-card { margin-bottom: 1rem; }
.quarter-header{
  padding: .75rem 1rem;
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #495057;
  background: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
}

.play-item{
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: .875rem;
  padding: .875rem 1rem;
  border-bottom: 1px solid #f0f2f4;
  transition: all .2s;
  cursor: pointer;
}
.play-item:last-child{ border-bottom: none; }
.play-item:hover{ background-color: #f8f9fa; }
.play-item.active{
  background-color: #e7f3ff;
  border-left: 4px solid #0d6efd;
}

.team-badge{
  width: 48px; 
  height: 48px;
  border-radius: 8px;
  background: #f1f3f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .875rem;
  color: #495057;
  flex-shrink: 0;
}

.play-content{ min-width: 0; }

.play-header{
  display: flex;
  gap: .625rem;
  flex-wrap: wrap;
  align-items: baseline;
  margin-bottom: .375rem;
}

.play-clock{
  font-size: .8rem;
  color: #6c757d;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.play-situation{
  font-size: .8rem;
  color: #6c757d;
  font-weight: 500;
}

.play-description{
  font-size: .95rem;
  line-height: 1.5;
  color: #212529;
}

/* Highlight special plays */
.play-item.scoring{
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
}
.play-item.scoring:hover, .play-item.scoring.active{
  background-color: #ffeaa7;
}

.play-item.turnover{
  background-color: #f8d7da;
  border-left: 4px solid #dc3545;
}
.play-item.turnover:hover, .play-item.turnover.active{
  background-color: #f5c2c7;
}

.play-item.penalty{
  background-color: #fff3e0;
  border-left: 4px solid #ff9800;
}
.play-item.penalty:hover, .play-item.penalty.active{
  background-color: #ffe0b2;
}

.badge-scoring{ background-color: #ffc107; color: #000; }
.badge-turnover{ background-color: #dc3545; color: #fff; }
.badge-penalty{ background-color: #ff9800; color: #fff; }

.play-badge{
  font-size: .7rem;
  padding: .25rem .5rem;
  border-radius: .25rem;
  font-weight: 600;
  text-transform: uppercase;
}

.empty-state{
  padding: 3rem 1rem;
  text-align: center;
  color: #6c757d;
}

/* Mobile adjustments */
@media (max-width: 991px){
  .field-container {
    position: relative;
    top: 0;
  }
}

@media (max-width: 576px){
  .play-item {
    grid-template-columns: 40px 1fr;
    gap: .625rem;
    padding: .75rem .875rem;
  }
  .team-badge { width: 40px; height: 40px; font-size: .8rem; }
  .play-description { font-size: .9rem; }
}


.stat-card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}
.stat-label {
  font-size: 0.85rem;
  color: #6c757d;
  font-weight: 500;
  margin-bottom: 5px;
}
.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #212529;
}
.team-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.team-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
}
.vs-divider {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #6c757d;
  margin: 20px 0;
}
.advantage-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 5px;
}
.advantage-high {
  background: #198754;
  color: white;
}
.advantage-medium {
  background: #ffc107;
  color: #000;
}
.advantage-low {
  background: #dc3545;
  color: white;
}
.metric-bar {
  height: 8px;
  background: #e9ecef;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 8px;
}
.metric-fill {
  height: 100%;
  background: linear-gradient(90deg, #0d6efd 0%, #0b5ed7 100%);
  transition: width 0.3s ease;
}
.prediction-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 25px;
  border-radius: 8px 8px 0 0;
  margin: -16px -16px 20px -16px;
}

/* Fix Safari mobile backdrop issue */
.modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important; /* Dynamic viewport height for mobile browsers */
  min-height: 100vh !important;
  min-height: 100dvh !important;
  min-height: -webkit-fill-available !important;
}

.modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  min-height: -webkit-fill-available !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Prevent body scroll when modal is open - helps with Safari */
body.modal-open {
  position: fixed !important;
  width: 100% !important;
  overflow: hidden !important;
}
.win-prob-lg {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
}