/* =========================================================
   CSS Reset & Base Styles
   ========================================================= */
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
html {
  color: var(--font-color);
  font-size: 16px;
}
body {
  color: var(--font-color);
  background-color: var(--bg-color);
  margin: 0px;
  overflow: auto;
  font-family: -apple-system,BlinkMacSystemFont,"Roboto","Arial","Helvetica Neue","Helvetica",sans-serif;
}

/* =========================================================
   CSS Variables
   ========================================================= */
:root {
  --light-color: #69b551;
  --heading-color: #424242;
  --font-color: #545454;
  --font-colorh: #616060;
  --border-bg: #fff;
  --icon-c: #fff;
  --close-icon-c: rgba(0,0,0,0.3);
  --alert-color: rgba(255,255,255,1);
  --alert-bg: rgba(212, 175, 55, 0.99);
  --bg-color: #fff;
  --bg-colora: rgba(255,255,255,0);
  --tr-color: #F0F0F0;
  --border-color: #dbdbdb;
  --slider-bg: rgba(0,0,0,0.1);
  --slider-c: rgba(0,0,0,0.8);
  --highlight-color1: #99d98f;
  --highlight-color2: #cceba4;
  --date: "Today";
  --timezone: "PT";
  --pt: inline;
  --ct: none;
  --et: none;
  --orderc: "Division";
  --order: block;
  --order3: table-row;
  --border: none;
  --border2: 6px;
  --division: inline;
  --wc: none;
  --yesterday: none;
  --today: block;
  --tomorrow: none;
  --modalc: rgba(255, 255, 255, 0.35);
  --modalc2: rgba(0, 0, 0, 0.35);
  --modalc3: rgba(0, 0, 0, 0.35);
  --shadowl: 0;
  --pos: flex;
   --borderb: 0.12em solid var(--bg-colora);
  --glass-bg: rgba(255,255,255,0.85);
  --glass-border-table: rgba(255,255,255,0.6);
  --glass-border: rgba(255,255,255,0.4);
  --glass-shadow: rgba(255,255,255,0.5);
  --glass-inset: rgba(255,255,255,0.3);
  --glass-backdrop: blur(16px) saturate(180%);
}
[data-date="yesterday"] {
  --date: "Yesterday";
  --yesterday: block;
  --today: none;
  --tomorrow: none;
}
[data-date="tomorrow"] {
  --date: "Tomorrow";
  --yesterday: none;
  --today: none;
  --tomorrow: block;
}
[data-time="ct"] {
  --timezone: "CT";
  --pt: none;
  --ct: inline;
  --et: none;
}
[data-time="et"] {
  --timezone: "ET";
  --pt: none;
  --ct: none;
  --et: inline;
}
[data-order="wc"] {
  --orderc: "Wildcard";
  --order: none;
  --order3: none;
  --border: 6px;
  --border2: none;
  --shadowl:5px 5px 15px -2px  var(--modalc2);
  --division: none;
  --wc: inline;
  --pos: relative;
  --borderb: 0.12em solid var(--bg-color);
  --borderb0:0.12em solid var(--bg-colora);
}
[data-order="div"] {
  --orderc: "Division";
  --order: block;
  --order3: table-row;
  --border: none;
  --border2: 6px;
  --shadowl: 0;
  --division: inline;
  --wc: none;
  --pos: flex;
  --borderb: 0.12em solid var(--bg-colora);
  --borderb0: 0.12em solid var(--bg-color);
}

/* =========================================================
   Typography & Headings
   ========================================================= */
h1 {
  font-size: 1.8rem;
  color: var(--heading-color);
}
#header #heading1 {
  color: var(--heading-color);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 2.25rem;
}

/* =========================================================
   Links & Buttons
   ========================================================= */
a {
  text-decoration: none;
  color: var(--light-color);
  text-align: center;
}
button, a {
  cursor: pointer;
}

/* =========================================================
   Layout & Wrappers
   ========================================================= */
.wrapper {
  max-width: 95vw;
  z-index: 100;
  margin: 0 auto;
  position: relative;
}
.content {
  margin: auto;
}
#header {
  text-align: left;
  padding-bottom: 1.5em;
  padding-top: 25px;
  position: relative;
}

/* =========================================================
   Table Styles
   ========================================================= */
table {
  opacity: 0;
  transition: opacity 0.5s ease;
  display: table-row;
  border-spacing: 0;
  table-layout: auto;
  position: relative;
  font-size: 1.05rem;
  color: var(--font-color);
}
body.js-loaded table {
  opacity: 1;
}
tbody{
    border-radius: 10px;
    padding-bottom: 0.5em;
}
#al table tbody td.row0,
#nl table tbody td.row0 {
  border-right: none;
  height: 0px;
  padding-top: 0.15rem;
}
#al table tbody th.row0,
#nl table tbody th.row0 {
  padding-top: 0rem;
  line-height: 1em !important;
}
#al table tbody th.row0 > span.row100,
#nl table tbody th.row0 > span.row100 {
  padding-top: 0rem;
  line-height: 1em !important;
  padding-bottom: 0.22rem;
}
tr:nth-child(2)>td:nth-child(3),tr:nth-child(2)>td:nth-child(4),tr:nth-child(2)>td:nth-child(6),tr:nth-child(2)>td:nth-child(8),tr:nth-child(2)>td:nth-child(9),
tr:nth-child(3)>td:nth-child(3),tr:nth-child(3)>td:nth-child(4),tr:nth-child(3)>td:nth-child(6),tr:nth-child(3)>td:nth-child(8),tr:nth-child(3)>td:nth-child(9),
tr:nth-child(4)>td:nth-child(3),tr:nth-child(4)>td:nth-child(4),tr:nth-child(4)>td:nth-child(6),tr:nth-child(4)>td:nth-child(8),tr:nth-child(4)>td:nth-child(9),
tr:nth-child(5)>td:nth-child(3),tr:nth-child(5)>td:nth-child(4),tr:nth-child(5)>td:nth-child(6),tr:nth-child(5)>td:nth-child(8),tr:nth-child(5)>td:nth-child(9),
tr:nth-child(6)>td:nth-child(3),tr:nth-child(6)>td:nth-child(4),tr:nth-child(6)>td:nth-child(6),tr:nth-child(6)>td:nth-child(8),tr:nth-child(6)>td:nth-child(9),
tr:nth-child(8)>td:nth-child(3),tr:nth-child(8)>td:nth-child(4),tr:nth-child(8)>td:nth-child(6),tr:nth-child(8)>td:nth-child(8),tr:nth-child(8)>td:nth-child(9),
tr:nth-child(9)>td:nth-child(3),tr:nth-child(9)>td:nth-child(4),tr:nth-child(9)>td:nth-child(6),tr:nth-child(9)>td:nth-child(8),tr:nth-child(9)>td:nth-child(9),
tr:nth-child(10)>td:nth-child(3),tr:nth-child(10)>td:nth-child(4),tr:nth-child(10)>td:nth-child(6),tr:nth-child(10)>td:nth-child(8),tr:nth-child(10)>td:nth-child(9),
tr:nth-child(11)>td:nth-child(3),tr:nth-child(11)>td:nth-child(4),tr:nth-child(11)>td:nth-child(6),tr:nth-child(11)>td:nth-child(8),tr:nth-child(11)>td:nth-child(9),
tr:nth-child(12)>td:nth-child(3),tr:nth-child(12)>td:nth-child(4),tr:nth-child(12)>td:nth-child(6),tr:nth-child(12)>td:nth-child(8),tr:nth-child(12)>td:nth-child(9),
tr:nth-child(14)>td:nth-child(3),tr:nth-child(14)>td:nth-child(4),tr:nth-child(14)>td:nth-child(6),tr:nth-child(14)>td:nth-child(8),tr:nth-child(14)>td:nth-child(9),
tr:nth-child(15)>td:nth-child(3),tr:nth-child(15)>td:nth-child(4),tr:nth-child(15)>td:nth-child(6),tr:nth-child(15)>td:nth-child(8),tr:nth-child(15)>td:nth-child(9), 
tr:nth-child(16)>td:nth-child(3),tr:nth-child(16)>td:nth-child(4),tr:nth-child(16)>td:nth-child(6),tr:nth-child(16)>td:nth-child(8),tr:nth-child(16)>td:nth-child(9),
tr:nth-child(17)>td:nth-child(3),tr:nth-child(17)>td:nth-child(4),tr:nth-child(17)>td:nth-child(6),tr:nth-child(17)>td:nth-child(8),tr:nth-child(17)>td:nth-child(9),
tr:nth-child(18)>td:nth-child(3),tr:nth-child(18)>td:nth-child(4),tr:nth-child(18)>td:nth-child(6),tr:nth-child(18)>td:nth-child(8),tr:nth-child(18)>td:nth-child(9){
    position: relative;
    box-shadow: 
      5px 5px 15px -2px var(--modalc2),
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}
tr:nth-child(7)>td:nth-child(3),tr:nth-child(7)>td:nth-child(4),tr:nth-child(7)>td:nth-child(6),tr:nth-child(7)>td:nth-child(8),tr:nth-child(7)>td:nth-child(9),
tr:nth-child(13)>td:nth-child(3),tr:nth-child(13)>td:nth-child(4),tr:nth-child(13)>td:nth-child(6),tr:nth-child(13)>td:nth-child(8),tr:nth-child(13)>td:nth-child(9){
    position: var(--pos);
    box-shadow: var(--shadowl);
}
tr:nth-child(17), tr:nth-child(18){
  display: var(--order3);
}

/* =========================================================
   Component & Modal Styles
   ========================================================= */
.option-window {
      position: fixed;
      background-color: var(--modalc);
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 999;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      transition: none;
      text-align: center;
      }

.option-window > div {
    width: 475px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 1rem;
    transform: translate(-50%, -50%);
    padding: 1.25em;
    background: var(--glass-bg, rgba(255,255,255,0.55));
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0,0,0,0.10);
    border: 2px solid var(--glass-border, rgba(255,255,255,0.35));
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
  }

.modal-window.active,
.option-window.active {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

.modal-window {
  position: fixed;
  background: var(--modalc); /* optional dim */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: none;
  }

.modal-window > div {
    width: 475px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 1.25rem;
    transform: translate(-50%, -50%);
    border: 2.5px solid var(--glass-border, rgba(255,255,255,0.35));
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0,0,0,0.10);
    opacity: 0.98;
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    padding: 2em;
    background: var(--glass-bg, rgba(255,255,255,0.55));
  }

.modal-close {
  color: var(--close-icon-c);
  position: absolute;
  right: 5%;
  top: 5%;
  text-align: center;
  font-size: 1.3em;
  text-decoration: none;
  background: var(--glass-bg, rgba(255,255,255,0.55));
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 1.5px 6px rgba(0,0,0,0.07);
  padding: 0.25em 0.5em;
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  transition: filter 0.2s, box-shadow 0.2s;
  opacity: 0.98;
}
.modal-close:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
}

.modal-window div:not(:last-of-type) {
  margin-bottom: 15px;
}

#no_hitter{
  font-size:0.72rem;
  background-color:var(--alert-bg);
  backdrop-filter: blur(80px);
  -webkit-backdrop-filter: blur(80px);
  color:var(--alert-color);
  border-radius: 0.25em;
  position:absolute;
  display:table-cell;
  top:-28%;
  width: 52%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  line-height:0.95rem;
}

.row100 {
  display: var(--order);
  font-size: 0.8em!important;
  line-height: 1.5em;
  max-width: 4.5rem;
  text-align: left;
  padding-left: 0.3rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
  letter-spacing: 0.02em;
}


#division {
  display: var(--division);
}

#wc {
  display: var(--wc);
}

#hamburger:hover {
  filter: brightness(123%);
}

input {
  display: none;
}

input:checked + .slider {
  background-color: var(--slider-bg);
}

input:checked + .slider:before {
  transform: translateX(35px);
}

.sliderO,
.sliderY {
  font-size: 1.1rem;
  font-weight: 700;
  width: 100px;
  height: 30px;
  min-width: 100px;
  border-radius: 10px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: box-shadow 0.15s ease-in-out;
}

.sliderO:before {
  content: var(--orderc);
  display: inline-block;
  padding: 0 0.5em;
  text-align: center;
}

.sliderY:before {
  content: var(--date);
  display: inline-block;
  padding: 0 0.5em;
  text-align: center;
}

.sliderO:active,
.sliderY:active {
  box-shadow: inset 4px 4px 4px rgba(0, 0, 0, 0.2);
}

label:hover {
  filter: brightness(110%);
  color: var(--font-colorh);
}

#hamburger {
  font-size: 2.25rem;
  cursor: pointer;
  content: '';
  color: white;
  width: 1em;
  height: 1em;
  display: inline-block;
  z-index: 2;
  top:30px;
  position: static;
  padding-top: 5px;
}

.bar {
  display: block;
  width: 22px;
  height: 4px;
  margin: 4px auto;
  background: var(--font-color, #333);
  border-radius: 2px;
  opacity: 0.95;
}

#hamburger:hover .bar {
  background: var(--font-colorh);
  opacity: 1;
}

#yesterday {
  display: var(--yesterday);
}

#today {
  display: var(--today);
}

#tomorrow {
  display: var(--tomorrow);
}

#pt {
  display: var(--pt);
}

#et {
  display: var(--et);
}

#ct {
  display: var(--ct);
}

.gameip { 
  background: rgba(255,255,255,0.95) !important;
  border: 2.5px solid var(--glass-border, rgba(255,255,255,0.35)); 
  border-radius: 6px; 
  width: 100%; 
  min-width: 0; 
  box-sizing: border-box; 
  display: flex; 
  align-items: stretch; 
  position: relative; 
  box-shadow: inset 0 0 8px 3px var(--glass-shadow, rgba(255,255,255,0.35)), 0 2px 8px rgba(0,0,0,0.10); 
  margin: 0; 
  padding: 2px 0; 
}

.gameip #game1 {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  gap: 0.5rem;
}

.row_heading {
  padding-right: 0.5rem;
  width:1rem;
}

.col1, .col2, .col4, .col5, .col6 {
  padding: 4.8px 4.8px 4.8px 4.8px;
}

.col7 {
  min-width: 8.75rem;;
}

#footer {
  font-size: 1em;
  padding-bottom: 2rem;
  padding-top: 0.5rem;
  padding-left: 12px;
  display: block;
  text-align: left;
}

/* Wildcard GB sign styling */
.gb-sign { font-size:0.82em; display:inline-block; transform:translateY(-1px); padding-right:0.05em; opacity:1; }
.gb-sign.gb-dim { opacity:0.6; }

#abr2, .col0, .col3, .col5, .col8, .col9  {
  display: none;
}

.col1 {
  font-size: 1.05rem;
  width: 2.6rem;
  min-width: 2.6rem;
  text-align: right !important;
}

td.col1, td.col2, td.col4, td.col6 {
  font-size: 1.05rem;
}
.col2 {
  width: 2.6rem;
  min-width: 2.6rem;
  font-size: 1.05rem;
  text-align: right !important;
}

.col4, .col6 {
  width: 3.25rem;
  min-width:3.25rem;
  font-size: 1.05rem;
  text-align: center !important;
}

.col7 {
  width: 8.75rem;
  max-height: 15vh;
  text-align: center !important;
}

#icons {
  width: 1.4rem;
  height: 1.4rem;
}

#icons2 {
  width: 0.9rem;
  height: 0.9rem;
}
#icons3 {
  width: 1.2rem;
  height: 1.2rem;
  vertical-align: middle;
  line-height: 1.5rem;
}
th {
  font-size: 1.2em !important;
}

tr:first-child > th:not(:last-child),
tr:last-child > th:nth-child(3), td:nth-child(3),
tr:last-child > th:nth-child(4), td:nth-child(4),
tr:last-child > th:nth-child(6), td:nth-child(6),
tr:last-child > th:nth-child(8), td:nth-child(8), td:nth-child(8)   {
  border-right: 0.12em solid var(--glass-border-table);
}

tr:nth-child(2) td,tr:nth-child(3) td,tr:nth-child(4) td,tr:nth-child(5) td,
tr:nth-child(8) td,tr:nth-child(9) td,tr:nth-child(10) td,tr:nth-child(11) td,
tr:nth-child(14) td,tr:nth-child(15) td,tr:nth-child(17) td {
  border-bottom: 0.12em solid var(--glass-border-table);
}

tr:nth-child(6) td,tr:nth-child(7) td,tr:nth-child(12) td,tr:nth-child(13) td {
  border-bottom: var(--borderb);
}

tr:nth-child(16) td {
  border-bottom: var(--borderb0);
}

/* Remove bottom border from last team in each division when in division view */
[data-order="div"] tr:nth-child(6)>td:nth-child(3),
[data-order="div"] tr:nth-child(6)>td:nth-child(4),
[data-order="div"] tr:nth-child(6)>td:nth-child(6),
[data-order="div"] tr:nth-child(6)>td:nth-child(8),
[data-order="div"] tr:nth-child(6)>td:nth-child(9),
[data-order="div"] tr:nth-child(12)>td:nth-child(3),
[data-order="div"] tr:nth-child(12)>td:nth-child(4),
[data-order="div"] tr:nth-child(12)>td:nth-child(6),
[data-order="div"] tr:nth-child(12)>td:nth-child(8),
[data-order="div"] tr:nth-child(12)>td:nth-child(9),
[data-order="div"] tr:nth-child(18) td {
  border-bottom: none !important;
}

/* Ensure no bottom border on mobile for division view */
@media (max-width: 50rem) {
  [data-order="div"] tr:nth-child(6)>td:nth-child(3),
  [data-order="div"] tr:nth-child(6)>td:nth-child(4),
  [data-order="div"] tr:nth-child(6)>td:nth-child(6),
  [data-order="div"] tr:nth-child(6)>td:nth-child(8),
  [data-order="div"] tr:nth-child(6)>td:nth-child(9),
  [data-order="div"] tr:nth-child(12)>td:nth-child(3),
  [data-order="div"] tr:nth-child(12)>td:nth-child(4),
  [data-order="div"] tr:nth-child(12)>td:nth-child(6),
  [data-order="div"] tr:nth-child(12)>td:nth-child(8),
  [data-order="div"] tr:nth-child(12)>td:nth-child(9),
  [data-order="div"] tr:nth-child(18) td {
    border-bottom: none !important;
  }
}

#game1 {
  align-content: center;
}

#game3, #game4, #game5 {
  align-content: center !important;
  text-align: center;
  vertical-align: middle;
  display: inline;
  font-size:1rem;
}

#game2 {
  align-content: center !important;
  text-align: center;
  vertical-align: middle;
  display: none;
  font-size:0.9rem;
}

#game2c {
  align-content: center !important;
  text-align: center;
  vertical-align: middle;
  display: inline;
  font-size:1rem;
}


tr:nth-child(16) td:nth-child(3) {
  border-bottom-left-radius: var(--border);
}

tr:nth-child(16) td:nth-child(9) {
  border-bottom-right-radius: var(--border);
}

tr:nth-child(2) td:nth-child(3) {
  border-top-left-radius: 6px;
}


tr:nth-child(2) td:nth-child(9) {
  border-top-right-radius: 6px;
}

tr:nth-child(6) td:nth-child(3),
tr:nth-child(12) td:nth-child(3), 
tr:nth-child(18) td:nth-child(3) {
  border-bottom-left-radius: var(--border2);
}

tr:nth-child(6) td:nth-child(9),
tr:nth-child(12) td:nth-child(9),
tr:nth-child(18) td:nth-child(9) {
  border-bottom-right-radius: var(--border2);
}

tr:nth-child(8) td:nth-child(3) {
  border-top-left-radius: var(--border2);
  box-shadow:var(--shadowl);
}

tr:nth-child(14) td:nth-child(3) {
  border-top-left-radius: var(--border2);
}

tr:nth-child(8) td:nth-child(9),
tr:nth-child(14) td:nth-child(9) {
  border-top-right-radius: var(--border2);
}

/* Wildcard corner rounding (override all base nth-child rounding) */
[data-order="wc"] tbody tr td {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
[data-order="wc"] tr.wc-first td { border-top: none; }
[data-order="wc"] tr.wc-first td { box-shadow: var(--shadowl); }
/* Corner rounding now driven by row classes only */
[data-order="wc"] tr.wc-first td:first-child { border-top-left-radius: 6px !important; }
[data-order="wc"] tr.wc-first td:last-child  { border-top-right-radius: 6px !important; }
[data-order="wc"] tr.wc-last td:first-child  { border-bottom-left-radius: 6px !important; }
[data-order="wc"] tr.wc-last td:last-child   { border-bottom-right-radius: 6px !important; }
[data-order="wc"] tr.wc-first td.wc-corner-left { border-top-left-radius: 6px !important; }
[data-order="wc"] tr.wc-first td.wc-corner-right { border-top-right-radius: 6px !important; }
[data-order="wc"] tr.wc-last td.wc-corner-left { border-bottom-left-radius: 6px !important; }
[data-order="wc"] tr.wc-last td.wc-corner-right { border-bottom-right-radius: 6px !important; }

/* ---------------------------------------------
   NOTE: Row gap issue source (division-mode rules):
   The large nth-child selector groups earlier set border-bottom only for specific
   physical row indices (2-6,8-11,etc.) leaving the first wildcard row (after sort)
   without a strong separating border when in wc mode. We neutralize by explicitly
   adding a bottom border to the first wildcard row here.
---------------------------------------------- */
[data-order="wc"] tr.wc-first td {
  border-bottom: 0.12em solid var(--glass-border-table) !important;
}
/* Hide bottom border on the last wildcard row for clean flush end */
[data-order="wc"] tr.wc-last td {
  border-bottom: none !important;
}

/* Wildcard table1: gap between thead and first data row without extending thead background */
[data-order="wc"] .table1 tbody { position: relative; }
[data-order="wc"] .table1 tbody::before {
  content: "";
  display: block;
  height: 0.5rem; /* adjust gap size as needed */
}
[data-order="wc"] .table2 tbody { position: relative; }
[data-order="wc"] .table2 tbody::before {
  content: "";
  display: block;
  height: 0.5rem; /* match table1 gap */
}

/* =========================================================
   Frosted Glass & Neumorphism Effects
   ========================================================= */
.neumorph-glass {
  display: none;
  background: rgba(255,255,255,0.25); /* Light mode: frosted white */
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.06), 0 1.5px 6px rgba(0,0,0,0.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.18);
  opacity: 0.98;
  font-family: "Inter", "Roboto", "Arial", sans-serif;
  font-weight: 500;
  color: var(--font-color);
  text-shadow: 0 1px 6px rgba(0,0,0,0.10);
  letter-spacing: 0.01em;
}
.game-status-box {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  align-items: stretch;
  min-height: 1.8rem;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.game-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
.game-time {
  width: 4.65rem;
  text-align: right;
  font-size: 0.95rem;
  margin-right: 0.2rem;
}
.game-vs {
  width: 1.5rem;
  min-width: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  margin-right: 0.15rem;
}
.game-result {
  width: 3.3rem;
  text-align: center;
  opacity: 0.8;
  font-size: 0.9rem;
  margin-right: 0.15rem;
}

.game-logo {
  width: 1.6rem;
  min-width: 1.6rem;
  text-align: center;
  margin-right: 0.15rem;
}
.game-nohitter {
  margin-left: 0.2rem;
}

.game-status-box, .game-row {
  position: relative;
}
.game-hover-text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 0.3em 0.7em;
  border-radius: 6px;
  z-index: 1;
  font-size: 0.95rem;
  white-space: normal;
  display: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.game-hover-text a {
  font-size: 0.9rem;
}
.game-hover-text a {
  color: var(--font-color) !important;
}
.game-status-box:hover {
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.game-status-box:hover .game-hover-text {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}



  .game-status-box {
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(105, 181, 81, 0.3);
  }
  .game-status-box:hover {
    background-color: rgba(255, 255, 255, 0.5);
  }

td.col7, th.col7 {
  padding: 0 !important;
}

table {
  border-spacing: 0 !important;
}

.game-status-box, .game-hover-text {
  margin: 0;
  border: none;
}

#modal-blur-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 100; /* below modal */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
#modal-blur-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-glass-btn {
  display: inline-block;
  padding: 0.45em 1.1em;
  margin: 0.25em 0.25em 0.25em 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--font-color);
  background: var(--glass-bg, rgba(255,255,255,0.55));
  border-radius: 1.2em;
  border: 1.5px solid var(--glass-border, rgba(255,255,255,0.35));
  box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 1.5px 6px rgba(0,0,0,0.07);
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  text-shadow: 0 1px 6px rgba(0,0,0,0.10);
  transition: filter 0.18s, box-shadow 0.18s;
  opacity: 0.98;
  text-decoration: none;
}
.modal-glass-btn:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
}

#timezone-picker {
  font-size: 1.1rem;
  padding: 0.5em 1.2em;
  border-radius: 1.2em;
  border: 1.5px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--font-color);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 1.5px 6px rgba(0,0,0,0.07);
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  font-weight: 500;
  appearance: none;
  outline: none;
  transition: box-shadow 0.2s, border 0.2s;
  text-align: center;
  font-family: "Inter", "Roboto", "Arial", sans-serif;
}
#timezone-picker:hover {
box-shadow: 0 6px 24px rgba(0,0,0,0.18);
}
#timezone-picker option {
  background: var(--glass-bg);
  color: var(--font-color);
}

.slider-label {
display: block;
font-size: 0.75em;
color: #888;
letter-spacing: 0.02em;
}

.header-flex-row {
display: flex;
justify-content: space-between;
}

.slider-header-row {
display: flex;
flex: 1 1 0;
padding-left: 1.2em;
align-items: center;
min-width: 0;
}

.slider-group {
display: flex;
flex-direction: column;
align-items: center;
}

thead.is-sticky {
background-color: var(--bg-color);
backdrop-filter: blur(80px);
-webkit-backdrop-filter: blur(80px);
box-shadow: 0 4px 24px 0 rgba(0,0,0,0.06), 0 6px 6px -4px rgba(0,0,0,0.07);
transition: backdrop-filter 0.2s;
}

.table1 { order: 1; }
.table2 { order: 2; }

.tables-container {
display: flex;
flex-direction: row;
gap: 1.25rem;
align-items: flex-start;
 margin-left: -0.35rem; /* compensate for label left padding so overall block realigns */
}

/* Legend alignment (division/wildcard key) */
#key { display: inline-flex; align-items: center; justify-content: flex-start; text-align:left; gap:0.6rem; }
@media (max-width: 50rem) {
  #key { justify-content: center; width:100%; }
}

#table-order-options {
  margin-top: 0.5em;
}
.options-label {
  display: block;
  color: var(--slider-c);
  opacity: 0.75;
  font-size: 1rem;
  margin-top: 1em;
  margin-bottom: 0.5em;
}
.options-credit {
  color: var(--slider-c);
  opacity: 0.65;
  font-size: 0.8rem;
  text-decoration: none;
}
#table-order-options label {
  font-size: 1rem;
  color:var(--font-color);
  margin-right: 0.7em;
  font-weight: 500;
}
#table-order-select {
  font-size: 1.1rem;
  padding: 0.45em 1.2em;
  border-radius: 1.2em;
  border: 1.5px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--font-color);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 1.5px 6px rgba(0,0,0,0.07);
  font-weight: 500;
  appearance: none;
  outline: none;
  transition: box-shadow 0.2s, border 0.2s;
  margin-left: 0.5em;
  text-align: center;
  font-family: "Inter", "Roboto", "Arial", sans-serif;
}
#table-order-select:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
}

/* Lock icon/name index column width (pandas Styler index header+cells appear as row_heading / col0 hidden; col1 for W) */
table thead th.row_heading,
table tbody th.row_heading {
  width: 1.75em !important;
  min-width: 1.75em !important;
  max-width: 1.75em !important;
  padding-right: 0.25rem;
}

/* =========================================================
   Media Queries
   ========================================================= */
@media (max-width: 50rem) {
  .tables-container {
    flex-direction: column;
    gap: 1.3rem;
    align-items: center;
  }
  
  .header-flex-row {
    flex-direction: column;
    align-items: stretch;
    position: relative;
  }
  #hamburger {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
  }
  #heading1 {
    width: 100%;
    text-align: left;
  }
  .slider-header-row {
    width: 100%;
    justify-content: center;
    padding-left: 0em !important;
    margin-top: 0.75em;
  }
  .slider-group {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: auto;
    margin-top: 0.5em;
  }
  .slider-group label {
    align-items: center;
    justify-content: center;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  #heading1 {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  #header {
    padding-bottom: 0.75em;
  }

  .table1 thead {
  background-color: var(--bg-color);
  }

  /* (moved abbreviation toggle to unified block below) */

  #al, #nl {
  display:inline-block;
  }
  

th.blank { background-color: var(--bg-color); box-shadow: -20px 0 0 var(--bg-color); padding:0!important; border:none!important; }
[data-order="wc"] th.blank { box-shadow: -20px 0 0 var(--bg-color); }

/* Hide table2 header in one-column narrow layout */
@media (max-width: 50rem) {
  .table2 thead, .table2 thead tr, .table2 thead th { display: none !important; }
}
  }
  
  /* (moved abbreviation toggle to unified block below) */

/* Abbreviation toggle (CENTRAL -> CENT.) */
#abr { display: inline; }
#abr2 { display: none; }
@media (max-width:50rem) {
  #abr { display: none; }
  #abr2 { display: inline; }
}

  #heading1{
  z-index:-1;
  }

 .option-window > div {
    width:90%;
    max-width: 475px;

  }

 .modal-window > div {
    width: 90%;
    max-width:475px;
  }
  
  .content{
    padding-left: 0;
    position: static;
    text-align: center;
    display: block;
    width: 100%;
  }
  
  .wrapper {
    position: static;
    left: unset;
    right: unset;
    width: 100%;
  }
  
  /* Only apply sticky positioning in one-column (narrow) layout */
  @media (max-width:50rem) {
    thead {
      position: sticky;
      position: -webkit-sticky;
      top: 0;
      z-index: 20;
    }
  }

.table1 .col_heading.level0.col7 {
  box-shadow: 35px 0px 0px var(--bg-color);
  }
  
.table1 .col_heading.level0.col1 {
    box-shadow: -20px 0px 0px var(--bg-color);
  }




  #header {
    text-align: center;
    position: relative;
  }

@media (max-width: 24rem) {
  .col4 {
    display: none;
  
    }
  .content {
    padding-left: 0px;
  
  }
  
  }

@media (max-width: 480px) {
  #game3, #game4, #game5 {
    display: block;
    text-align: center;
    margin: 0.5em auto;
  }
  .modal-glass-btn {
    width: 90%;
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}