/* === Responsive Adjustments === */

/* Bigger sport buttons (taller + larger font) */
.sport-button {
  height: 40px;
  line-height: 40px;      /* vertical centering */
  padding: 0 20px;
  font-size: 16px;
  font-weight: bold;
  background-color: rgb(215 231 255);
  border-radius: 8px;
  border: 1px solid #aaa;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: background-color 0.3s ease;
}


.sport-button:hover {
  background-color: rgba(153, 194, 255, 0.4);
}
.sport-button.selected-sport {
  background-color: #3766a3;
  color: white;
  border: 2px solid #041329;
}

.score-row {
  font-weight: 500;
  font-size: 2px;
  line-height: 1.1;
  margin-bottom: 2px;
  background-color: #fcffd1;
}

.score-inline {
  display: inline;
  font-size: 11px;
  font-weight: 500;
  margin: 0 2px;
  white-space: nowrap;
}

.game-status-pill {
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 6px;
  background-color: #fcffd1;
}

/* Compact sticky ribbon: keep everything visible on slightly smaller widths */
@media (max-width: 1940px){
  #controls-sticky .sticky-inner { column-gap: 8px; row-gap: 1px; padding: 4px 4px; }

  .starter-toggle-wrapper,
  .heatmap-toggle-wrapper { font-size: 14px; height: 14px;}   /* was 16 */

  .sport-button{
    font-size: 16px;
    height: 40px;          /* was 40px */
    line-height: 40px;
    padding: 0 14px;       /* was 0 20px */
    min-width: 60px;
  }

  #odds-filters .odds-label{
    font-size: 12px;       /* was 16 */
    padding: 2px 10px;     /* slightly tighter */
    border-radius: 18px;
  }
}

/* Right-side odds toggles: centered title over pills (content remains in right column) */
#odds-filters.odds-with-title{
  display: inline-flex;
  flex-direction: column;
  align-items: center;      /* center title relative to the pills */
}
#odds-filters .odds-title{
  font-size: 14px;          /* slightly larger title */
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1.1;
  margin-bottom: 6px;
  text-align: center;
}
#odds-filters .odds-row{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;      /* single line for pills */
}
#odds-filters .odds-label{
  font-size: 12px;          /* slightly smaller pills for balance */
  padding: 2px 10px;
  border-radius: 18px;
}

@media (max-width: 1940px){
  #odds-filters .odds-title{ font-size: 14px; margin-bottom: 4px; }
}

@media (max-width: 950px) {
  /* Hide left column content first */
  .top-left,
  .bottom-left { display: none; }

  /* Keep center + right in a single row */
  .sticky-inner {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
    gap: 6px;
  }

  .center-span { grid-column: 1; grid-row: 1; justify-self: center; }
  .top-right   { grid-column: 2; grid-row: 1; justify-self: end; }
  .bottom-right { display: none; } /* ensure no extra row is created */

  /* Keep sport buttons on one line; no wrapping */
  #sport-buttons {
    flex-wrap: nowrap;
    gap: 8px;  /* Tighen space between sports buttons */
    overflow-x: auto;
    scrollbar-width: none;
  }
  #sport-buttons::-webkit-scrollbar { display: none; }
}

/* Hide odds toggles before they start overlapping */
@media (max-width: 950px) {
  .top-right { display: none; }

  .sticky-inner {
    grid-template-columns: 1fr;   /* right column gone; center gets full width */
    grid-template-rows: auto;
  }

  .center-span { 
    grid-column: 1; 
    grid-row: 1; 
    justify-self: stretch;  /* occupy the empty space */
    width: 100%;
  }

  /* keep buttons centered within the stretched center area */
  #sport-buttons { justify-content: center; }
}

/* Wide screens: explicit 2-row grid; remove empty space and tighten left gap */
@media (min-width: 1281px){
  /* Use full ribbon width */
  #controls-sticky .main-container{ max-width: none; width: 100%; }

  #controls-sticky .sticky-inner{
    display: grid;
    width: 100%;
    grid-template-columns: auto 1fr auto;   /* left | center | right */
    grid-template-rows: auto auto;          /* left column uses two rows */
    align-items: center;
    column-gap: 14px;
    row-gap: 1px;                            /* smaller vertical gap */
    padding-top: 4px;
    padding-bottom: 4px;
  }

  /* Left column (stacked) */
  .top-left    { grid-column: 1; grid-row: 1; justify-self: start; }
  .bottom-left { grid-column: 1; grid-row: 2; justify-self: start; }
  .controls-left-extra{ margin: 0; display: grid; row-gap: 0; }  /* no space between the two */

  /* Center spans both rows, stays centered */
  .center-span{
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: center;
    min-width: 0;
  }

  /* Right spans both rows to remove blank area below */
  .top-right{
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: center;
  }
}

/* Trim left-column vertical spacing inside the sticky bar */
#controls-sticky .controls-left-extra{ margin: 0; }