/* ========== MISCELLANEOUS ========== */
/* IMPORT FONTS */
@import url('https://fonts.googleapis.com/css2?family=Manjari:wght@100;400;700&display=swap');


/* ========== RESET & BASE ========== */
body {
    height: 100%;
    width: 100%;
    font-family: 'Manjari', sans-serif;
    color: #222;
    background-color: #f5f5f5;
    padding-top: 35px;
}

a {
    color: #000;;
    font-weight: bold;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.arrow-icon {
  font-size: 2rem;
  color: #0000FF;
  margin: 0 1rem;
  animation: flashArrow 1s infinite alternate;
  text-shadow:
    0 0 10px #fffb00,
    0 0 20px #fffb00,
    0 0 4px #fffb00;
}

body {
  padding-top: 70px; /* height of your navbar + slight buffer */
}

/* ========== LAYOUT & STRUCTURE ========== */
.navbar {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  min-height: 50px;
}

.navbar-brand img.logo {
  height: auto;
  width: auto;
  max-height: 60px;    /* Adjust as needed */
  max-width: 100%;     /* Prevents overflow */
}

.logo-chleb-nav {
  height: 30px;
  width: auto; /* Maintain aspect ratio */
  margin-left: 0.5rem;
  border-radius: 8px; /* or adjust as needed */
  box-shadow: 0 0 4px rgba(0,0,0,0.3); /* optional */
}

@media (max-width: 950px) {
  .logo-jch-wrapper {
    display: none !important;
  }
}

.logo-chleb-footer {
  height: 20px;
  width: auto; /* Maintain aspect ratio */
  margin-left: 0.5rem;
  margin-top: 0rem;
  border-radius: 8px; /* or adjust as needed */
  box-shadow: 0 0 4px rgba(0,0,0,0.3); /* optional */
}

.created-footer-text {
  font-size: 1rem; /* Adjust size as needed */
  margin-right: 0px; /* Space between text and logo */
  margin-top: 8px;
  color: inherit;    /* Keeps link color consistent */
}

.footer-title {
  font-size: 1.3rem; /* Slightly larger than normal */
}

.navbar-nav li {
    padding-right: 20px
}

.nav-link {
    font-size: 1.1em !important;
}

footer {
    background-color: #3f3f3f;
    color: #d5d5d5;
    padding-top: 2rem;
}

footer a {
    color: #d5d5d5;
}

footer p {
    margin-bottom: 0%;
}

footer h5 {
    margin-top: .5em;
}

footer div h5 {
    font-size: .8rem;
}

footer div p {
    font-size: .6rem;
}

.navbar, .navbar .nav-link {
    font-family: 'Manjari', sans-serif !important;
}

.footer-full {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background-color: #3f3f3f;
}

section.d-flex {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

section {
    padding: 60px 0;
}

.nfl-background .footer-full {
  margin: 0;
  padding: 0.5rem 0;
  background-color: #2c2f33;
  color: white;
  text-align: center;
}

/* ========== TYPOGRAPHY ========== */
h2, h1, h3, h4, h5, h6 {
    font-family: 'Manjari', sans-serif;
}

/* ========== IMAGES & MEDIA ========== */
img {
    image-orientation: from-image;
}

.logo {
    margin-right: 3px;
}

@media screen and (orientation: portrait) {
    img.img-header {
        max-width: 90%;
    }
  }

@media screen and (orientation: landscape) {
    img.img-header {
        max-height: 90%;
    }
  }

  @media (max-width: 576px) {
    .nfl-title {
      margin-top: 4rem; /* or adjust as needed */
    }
  }
    
  @media (max-width: 1024px) {
    .nfl-embed-scaled-matchups {
      height: 467px; /* 550 * 0.85 */
    }
  }
  
  @media (max-width: 768px) {
    .nfl-embed-scaled-matchups {
      height: 385px; /* 550 * 0.7 */
    }
  }
  
  @media (max-width: 576px) {
    .nfl-embed-scaled-matchups {
      height: 225px; /* 550 * 0.55 */
    }
  }
  
  @media (max-width: 1024px) {
    .nfl-embed-scaled-results {
      height: 383px; /* 450 * 0.85 */
    }
  }
  
  @media (max-width: 768px) {
    .nfl-embed-scaled-results {
      height: 315px; /* 450 * 0.7 */
    }
  }
  
  @media (max-width: 576px) {
    .nfl-embed-scaled-results {
      height: 248px; /* 450 * 0.55 */
      max-width: 250px;
    }
  }
  
  @media (max-width: 1024px) {
    .nfl-embed-scaled-standings {
      height: 300px;             /* 400px × 0.75 */
      max-width: 320px;
    }
  }
  
  @media (max-width: 768px) {
    .nfl-embed-scaled-standings {
      height: 260px;             /* 400px × 0.65 */
      max-width: 285px;
    }
  }
  
  @media (max-width: 576px) {
    .nfl-embed-scaled-standings {
      height: 180px;             /* 400px × 0.55 */
      max-width: 200px;
    }
  }

@media (max-width: 768px) {
  .site-login-wrapper {
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    gap: 1.5rem;
  }

  .site-login-box {
    width: 90%;
    max-width: 400px;
    padding: 2rem 1.5rem;
  }

  .site-login-logo {
    height: 100px;
  }

  .site-login-password-container {
    width: 90% !important;
  }

  .site-login-input {
    width: 100% !important;
    font-size: 1rem;
  }

  .toggle-password {
    height: 18px;
    width: 25px;
    right: 10px;
  }

  .site-login-button {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    width: 100%;
  }
}


/* ========== CUSTOM COMPONENTS ========== */
.nfl-overlay {
  background-color: rgba(255, 255, 255, 0.4); /* Lightened overlay */
  min-height: 100vh;
  padding-top: 100px;
  color: black;
}

.nfl-btn {
  background-color: #013369; /* NFL Blue */
  border: 2px solid #D02131; /* NFL Red */
  color: white;
  font-weight: bold;
  margin: 0.5rem;
  padding-top: 10px;
}

.nfl-section {
  margin-bottom: 4rem;
  text-align: center;
}


/* ========== PAGES - NFL POOL.HTML ========== */
.nfl-week-title {
  font-size: 2rem;
  font-weight: bold;
  background-color: green;
  color: white;
  padding: 0.75rem 3rem 0.3rem 3rem; /* top right bottom left */
  border-radius: 0.5rem;
  display: inline-block;
  margin-bottom: 4rem;
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
}

#week-title-container {
  margin-top: 2rem;      /* Push down from the buttons */
  margin-bottom: -3rem;  /* Pull up closer to "Matchups" */
  text-align: center;
}

#week-title-container > * {
  padding: .5rem 5rem .1rem 5rem;  /* Effect button size, top -- right -- bottom -- left */
  font-size: 2rem;  /* Can effect button height */
  border-radius: 0.5rem;  /* Effects button radius */
  background-color: green;
  color: white;
  font-weight: bold;
  display: inline-block;
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
}

.nfl-title h1 {
  color: #D02131;
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  text-shadow: 
    -2px -2px 0 white,
     2px -2px 0 white,
    -2px  2px 0 white,
     2px  2px 0 white;
  /*margin-bottom: .5rem;*/
  font-size: 5rem;
}

.nfl-section h1 {
  color:#D02131;
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  text-shadow: 
    -2px -2px 0 white,
     2px -2px 0 white,
    -2px  2px 0 white,
     2px  2px 0 white;
  margin-bottom: 0rem;
}

.nfl-background {
  min-height: 100vh;
  background: url('/assets/images/nfl-stadium-bg.jpg') no-repeat center center fixed;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
}

.nfl-background .nfl-overlay {
  flex-grow: 1;
}

.nfl-section {
  margin-bottom: 1.5rem;
  text-align: center;
}

.nfl-section table {
  margin-top: .5rem;
  margin-right: auto;
  margin-left: auto;
  font-size: 0.85rem;
  width: 50%;
  text-align: center;
  line-height: .9;
}

.nfl-section table th {
  background-color: #D02131;
  color: white;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
}

.nfl-section table td {
  background-color: black;
  color: white;
  text-align: center;
  vertical-align: middle;
}

.nfl-section {
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.nfl-section table {
  margin-top: 0.5rem;  /* Tighten space between title and table */
  margin-bottom: 0.5rem; /* Tighten space after table */
}

#player-picks-table-container table {
  font-size: 0.85rem;
  overflow-x: auto;
}

footer .container h4 {
  margin-top: 7px;
  margin-bottom: 0;
}

/* LANDING */
.landing-hero {
  height: 60vh;
  padding-top: 1px;
  background: linear-gradient(to bottom right, #779eb2, #f5f5f5);
  color: #222;
  margin-top: 0;
}

.landing-hero h1 {
  font-size: 3rem;
  font-weight: 700;
  color: #222;
}

.landing-hero .lead {
  font-size: 1.25rem;
  max-width: 700px;
  margin: 0 auto 2rem auto;
}


/* ========== LOGIN PAGE ========== */
#site-login {
  background-color: #eaeaea;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  flex-wrap: wrap;
}

.site-login-box {
  background-image: url('/assets/images/login-desert-sunset.jpg');
  background-size: cover;
  background-position: center;
  color: white;
  text-shadow: 1px 1px 2px black;
  padding: 4rem 3rem;
  width: 900px;
  height: 290px;
  border-radius: 2px;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  text-align: center;
}

.site-login-logo {
  height: 150px;
  max-width: 100%;
  object-fit: contain;
}

.site-login-input-wrapper {
  position: relative;
  margin-bottom: 1rem;
}

.site-login-input {
  padding: 0.75rem 2.5rem 0.75rem 0.75rem;
  width: 70%;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
}

.toggle-password {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
  height: 18px;
  width: 25px;
}

.site-login-button {
  background-color: #4faeb4fe;
  color: #4a0000fe;
  padding: 0.6rem 1.25rem .3rem 1.25rem;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
}

.site-login-button:hover {
  background-color: #4faeb4fe;
}

.site-login-error {
  display: none; /* ✅ Hide by default */
  color: #ff4444;
  margin-top: 0.75rem;
  font-weight: bold;
}

.site-login-password-container {
  position: relative;
  width: 50%;
  margin: 0 auto 1rem; /* Centered with spacing below */
}

.site-login-eye {
  position: absolute;
  top: 50%;
  right: 70px;
  transform: translateY(-50%);
  height: 18px;
  width: auto;
  cursor: pointer;
}


/* ========== LOGIN PAGE DARK MODE ========== */
.dark-mode .site-login-input::placeholder {
  color: #ffffff;         /* bright white */
  opacity: 1;             /* override dimmed default */
}

.dark-mode body {
  background-color: #1e1e1e;
}
.dark-mode #site-login {
  background-color: #3b3939;
  color: #ffffff;
}

.dark-mode .site-login-box {
  background-color: #2c2c2c;
  text-shadow: 1px 1px 2px #000;
  border: 1px solid #555;
}

.dark-mode .site-login-input {
  background-color: #3a3a3a;
  color: #ffffff;
  border: 1px solid #777;
}

.dark-mode .site-login-button {
  background-color: #ffc627;
  color: #4a0000fe;
}

.dark-mode .site-login-error {
  color:white;
}

/* ========== RESPONSIVE LOGIN ========== */

@media (max-width: 768px) {
  .site-login-wrapper {
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    gap: 1.5rem;
  }

  .site-login-box {
    width: 90vw;
    padding: 1.5rem;
  }

  .site-login-logo {
    height: 100px;
  }

  .site-login-input {
    font-size: 1rem;
  }

  .toggle-password {
    font-size: 1.2rem;
  }

  .site-login-button {
    font-size: 0.9rem;
    padding: 0.4rem 1rem;
    width: auto;
    min-width: 120px;
    max-width: 80%;
    display: block;
    margin: 0 auto;
  }
}

/* ========== INDEX LANDING PAGE STYLES ========== */

.landing-wrapper {
  min-height: 100vh;
  background-color: #1e1e1e;
  padding: 2rem;
  padding-top: 120px;
}

.landing-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
  margin: auto;
  color: white;
  text-align: center;
}

.landing-title {
  font-size: 2.5rem;
  font-weight: bold;
  text-shadow: 1px 1px 2px black;
}

.landing-box {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}

.landing-image {
  max-width: 100%;
  max-height: 500px; /* Adjust this height limit as needed */
  height: auto;
  width: auto;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0,0,0,0.4);
  object-fit: contain;
}

.landing-logo {
  width: 150px;
  height: auto;
  filter: drop-shadow(1px 1px 2px black);
}

.landing-subtitle {
  font-size: 1.25rem;
  text-shadow: 1px 1px 2px black;
  max-width: 600px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .landing-title {
    font-size: 2rem;
  }

  @media (max-width: 768px) {
  .landing-image {
    max-height: 200px;
  }
}

  .landing-subtitle {
    font-size: 1rem;
  }

  .landing-logo {
    width: 100px;
  }

  .landing-box {
    padding: 2rem;
  }
}


/* Let content decide width */
#matchup-table-container table {
  table-layout: auto;
}

/* Record (A) and Record (H) */
#matchup-table-container th:nth-child(3),
#matchup-table-container td:nth-child(3),
#matchup-table-container th:nth-child(6),
#matchup-table-container td:nth-child(6) {
  min-width: 80px;     /* fits values like 1-1-0 */
  white-space: nowrap; 
  text-align: center;
}

/* Last (A) and Last (H) */
#matchup-table-container th:nth-child(4),
#matchup-table-container td:nth-child(4),
#matchup-table-container th:nth-child(7),
#matchup-table-container td:nth-child(7) {
  min-width: 50px;     /* enough space for W/L/T */
  white-space: nowrap; 
  text-align: center;
}

/*SUPERBOWL SQUARES*/
/* Keep everything inside your existing "nfl-" layout */
    .sb-wrap {
      max-width: 980px;
      margin: 0 auto;
    }

    .sb-toolbar {
      display: flex;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
      margin: 10px 0 0 0;
    }

    /* 10x10 grid */
.sb-grid {
  display: grid;
  grid-template-columns: 90px 56px repeat(10, 62px); /* AFC title | row nums | 10 squares */
  grid-template-rows: 58px 62px repeat(10, 62px);   /* NFC title | col nums | 10 squares */
  gap: 6px;
  margin-top: 6px;
  user-select: none;
  min-width: calc(90px + 56px + (10 * 62px) + (11 * 6px));
}

/* Horizontal scroll wrapper (like nflpool Player Picks) */
.sb-scroll {
  -webkit-overflow-scrolling: touch;  /* smooth iOS scrolling */
  overflow-x: auto;
  overflow-y: hidden;
}

/* Top title (NFC) */
.sb-title-top {
  font-family: inherit; /* matches nflpool */
  font-weight: 900;
  font-size: 2.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Left title container (AFC) */
.sb-title-left {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Number headers */
.sb-num {
  font-weight: 900;
  font-size: 1.6rem;
  color: #fff;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.9),
    0 0 6px rgba(0,0,0,0.6);
}

    .sb-cell {
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 8px;
      min-height: 62px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      background: rgba(0,0,0,0.50);
      transition: transform 0.06s ease-in-out, background 0.12s ease-in-out;
      padding: 6px;
      text-align: center;
    }

    .sb-cell:hover {
      transform: translateY(-1px);
      background: rgba(255,255,255,0.08);
    }

    .sb-header {
      pointer-events: none;
    }

    .sb-cell.claimed {
      cursor: not-allowed;
      background: rgba(0,0,0,0.65);
      border-color: rgba(255,255,0,0.30);
    }

    .sb-initials {
      font-size: 1.15rem;
      font-weight: 900;
      letter-spacing: 1px;
      color: #fff;
      text-shadow: 
        0 1px 2px rgba(0,0,0,0.9),
        0 0 6px rgba(0,0,0,0.6);
    }

    .sb-name {
      margin-top: 3px;
      padding: 2px 6px;
      border-radius: 6px;
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: 0.4px;
      text-transform: lowercase;
      color: #fff;
      background: rgba(0,0,0,0.35);
      line-height: 1.1;
      text-shadow: 0 1px 2px rgba(0,0,0,0.85);
    }

    .sb-status {
      margin-top: 10px;
      font-size: 0.95rem;
      opacity: 0.95;
      min-height: 22px;
    }

    #sb-status:empty {
      display: none;
    }

    /* Make grid usable on phones */
    @media (max-width: 575.98px) {
      .sb-grid { gap: 4px; }
      .sb-cell { min-height: 52px; border-radius: 7px; }
      .sb-initials { font-size: 0.95rem; }
      .sb-name { font-size: 0.72rem; }
    }

/* Header cells (top row & left col) */
.sb-header {
  cursor: default;
  font-weight: 900;
  border-color: rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Numbers override */
.sb-header.sb-num {
  font-weight: 900;
  font-size: 1.6rem;
  background: rgba(0,0,0,0.58);
  border-bottom: 3px solid rgba(0,0,0,0.45);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

/* Titles override */
.sb-header.sb-title-top {
  font-weight: 900;
  font-size: 2rem;
}

.sb-header.sb-title-left {
  font-weight: 900;
  font-size: 2.4rem;
}

/* Special top-left corner that holds both labels */
.sb-corner {
  position: relative;
  overflow: hidden;
}

.sb-header-top {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 800;
  opacity: 0.95;
}

.sb-header-left {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
  font-size: 0.85rem;
  font-weight: 800;
  opacity: 0.95;
  white-space: nowrap;
}

/* ===== Super Bowl Squares Titles ===== */

/* Shared title bar */
.sb-title-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
}

/* NFC Champion text ONLY */
.sb-title-text {
  color:#013369;
  font-family: 'Comfortaa', sans-serif;
  font-weight: 900;
  font-size: 2.2rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 
    -2px -2px 0 white,
     2px -2px 0 white,
    -2px  2px 0 white,
     2px  2px 0 white;
  margin-bottom: 0rem;
}

/* Logos */
.sb-title-logo {
  height: 42px;
}

.sb-title-logo-vert {
  width: 42px;
}

/* Vertical title content */
.sb-title-bar-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* Rotated AFC Champion text ONLY */
.sb-title-text-vert {
  color:#D02131;
  font-family: 'Comfortaa', sans-serif;
  font-weight: 900;
  font-size: 2.2rem;
  letter-spacing: 1px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-transform: uppercase;
  text-shadow: 
    -2px -2px 0 white,
     2px -2px 0 white,
    -2px  2px 0 white,
     2px  2px 0 white;
  margin-bottom: 0rem;
}

/*Grid Locked Note*/
.sb-locked-note{
  margin-top: 10px;
  text-align: center;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: .9rem;

  /* subtle, readable over stadium */
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);

  /* light “badge” feel */
  display: inline-block;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.20);
}

/*Helper text under Grid*/
/* Shared pill style (used for status + help) */
.sb-pill {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}

/* Help text variation */
.sb-help {
  font-size: 0.9rem;
  opacity: 0.95;
}

/* Locked message (already exists, shown for clarity) */
.sb-locked {
  font-size: 0.95rem;
}

/* ===== Winner highlights (Q1–Q4) ===== */
.sb-cell.win-q1 { box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.85) inset; }
.sb-cell.win-q2 { box-shadow: 0 0 0 3px rgba(0, 200, 255, 0.85) inset; }
.sb-cell.win-q3 { box-shadow: 0 0 0 3px rgba(140, 255, 140, 0.85) inset; }
.sb-cell.win-q4 { box-shadow: 0 0 0 3px rgba(255, 120, 220, 0.85) inset; }

/* If the winning square is also "claimed", give it a tiny extra pop */
.sb-cell.claimed.win-q1,
.sb-cell.claimed.win-q2,
.sb-cell.claimed.win-q3,
.sb-cell.claimed.win-q4 {
  filter: brightness(1.05);
}

.sb-winner-q1 { box-shadow: 0 0 0 3px #00c853 inset; }
.sb-winner-q2 { box-shadow: 0 0 0 3px #2979ff inset; }
.sb-winner-q3 { box-shadow: 0 0 0 3px #ffab00 inset; }
.sb-winner-q4 { box-shadow: 0 0 0 3px #d50000 inset; }

.sb-legend {
  margin: 14px auto 6px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sb-legend-item {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
  background: rgba(0,0,0,0.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}

/* Match EXACT winner colors */
.sb-legend-item.win-q1 { border-left: 6px solid rgba(255,215,0,0.9); }
.sb-legend-item.win-q2 { border-left: 6px solid rgba(0,200,255,0.9); }
.sb-legend-item.win-q3 { border-left: 6px solid rgba(140,255,140,0.9); }
.sb-legend-item.win-q4 { border-left: 6px solid rgba(255,120,220,0.9); }

/* Mobile tweak */
@media (max-width: 575px) {
  .sb-legend-item {
    font-size: 0.8rem;
    padding: 6px 12px;
  }
}

/* ===== Super Bowl Squares – Number Header Styling (Top + Left) ===== */
/* Applies to BOTH: top row numbers + left column numbers */
.sb-grid > .sb-header.sb-num {
  background: rgba(1, 51, 105, 0.85); /* NFL blue */
  /*...OR...background-color: #013369; /* to easily pick another color*/
  color: #fff;

  /* keep readable on stadium bg */
  text-shadow:
    0 1px 2px rgba(0,0,0,0.85),
    0 0 6px rgba(0,0,0,0.6);

  /* subtle edge so it feels consistent with board */
  border-color: rgba(255,255,255,0.25);
}

  /*PRINT FINAL BOARD*/
/* =========================
   Super Bowl Squares – PRINT / PDF
   ========================= */
@media print {

  /* Make color fills actually render in print/PDF */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Hard-kill the stadium background (it’s on .nfl-background) */
  html, body {
    background: #fff !important;
    background-image: none !important;
  }

  .nfl-background {
    background: none !important;
    background-image: none !important;
  }

  /* Overlay can stay lightly tinted on screen, but print clean */
  .nfl-overlay,
  .container,
  .container-fluid {
    background: transparent !important;
    background-image: none !important;
  }

  /* Hide nav/buttons/modals/etc (keep the board only) */
  nav,
  .navbar,
  .sb-toolbar,
  .submit-picks-highlight,
  .modal,
  .btn {
    display: none !important;
  }

  /* If you *don’t* want the "Print / Save as PDF" link to appear */
  a[onclick*="window.print"] {
    display: none !important;
  }

  /* Tighten spacing for a clean one-page print */
  h1, h2, h3 { margin: 0 0 8px !important; }
  #sb-help, #sb-locked, #sb-status { margin: 6px 0 10px !important; }

  /* The grid: crisp, visible separation */
  .sb-grid {
    margin: 0 auto !important;
    gap: 6px !important;
  }

  /* Base cells: printable contrast */
  .sb-cell,
  .sb-header {
    background: #f3f3f3 !important;
    border: 2px solid #cfcfcf !important;
    box-shadow: none !important;
  }

  /* Claimed squares */
  .sb-cell.claimed {
    background: #1f1f1f !important;
    border-color: #9a9a9a !important;
    color: #fff !important;
  }

  /* Blue number headers (top row + left column) */
  .sb-header.sb-num {
    background: #013369 !important;
    color: #fff !important;
    border-color: #ffffff !important;
    text-shadow: none !important;
  }

  /* Title bars */
  .sb-header.sb-title-top,
  .sb-header.sb-title-left {
    background: #e9e9e9 !important;
    color: #111 !important;
    border: 2px solid #cfcfcf !important;
    text-shadow: none !important;
  }

  /* Winner highlights: keep borders but remove glow */
  .win-q1, .win-q2, .win-q3, .win-q4 {
    filter: none !important;
  }

  @page {
    size: letter portrait;
    margin: 0.5in;
  }
}

.print-link {
  display: inline-block;
}