@import url("https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&family=Roboto+Flex:opsz,wght,XOPQ,XTRA,YOPQ,YTDE,YTFI,YTLC,YTUC@8..144,100..1000,96,468,79,-203,738,514,712&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

table {
}

.player {
  font-family: "Google Sans Code", monospace;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

.roboto-player {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

.sticky-element {
  position: sticky;
  top: 0;
  z-index: 1000; /* Keeps it above other content */
}

.layout-container {
  display: grid;
  grid-template-columns: 250px 1fr 250px; /* Adjust column widths as needed */
  gap: 20px;
  align-items: start; /* CRITICAL: Allows child columns to sit at top rather than stretch */
}

/* Sticky styling for Columns 1 & 3 */
.sticky-col {
  position: sticky;
  top: 20px; /* Distance from top of viewport when stuck */
  max-height: calc(
    100vh - 40px
  ); /* Prevents sticky col from overflowing if tall */
  overflow-y: auto; /* Adds inner scrollbar only if column content exceeds screen height */
}

/* Optional styling for scrolling middle column */
.scroll-col {
  min-width: 0; /* Prevents overflow issues in CSS Grid */
}