body {
          background-color: #111;
          color: #eee;
          font-family: sans-serif;
          margin: 0;
          padding: 1rem;
      }

h1 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    font-weight: bold;
    color: #f9e17b; /* Un amarillo suave, no tan chillón */
}


h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 0.8rem;
    font-weight: bold;
    color: #f9e17b; /* Un amarillo suave, no tan chillón */
}

      .date-list {
    display: flex;
    flex-direction: column; /* ← de fila a columna */
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 0;
    scroll-snap-type: none; /* opcional: ya no hace falta */
    overflow-x: unset; /* ← quita el scroll horizontal */
}


      .date-list::-webkit-scrollbar {
          height: 6px;
      }

      .date-list::-webkit-scrollbar-thumb {
          background-color: #444;
          border-radius: 999px;
      }

      .date-button {
          scroll-snap-align: start;
          flex-shrink: 0;
      }

      .date-list-wrapper {
          overflow-x: auto;
          display: flex;
          justify-content: center;
          scroll-padding: 1rem;
      }

.date-button {
  background-color: transparent;
  color: white;
  padding: 0.5rem 1.2rem;
  font-size: 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  font-weight: bold;
  position: relative;
  z-index: 0;
  overflow: hidden;
  min-width: 140px;
  text-align: center;
  box-shadow: none;
  border: none;
}

.date-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 999px;
  padding: 2px; /* thickness of the border */
  background: linear-gradient(90deg, red 50%, yellow 50%);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}



.date-button:hover {
  background: linear-gradient(90deg, #F9E17B 50%, #D0021B 50%);
  color: #111;
}



      /* Modal Styles */
      .modal {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100vw;
          height: 100vh;
          background-color: rgba(0, 0, 0, 0.85);
          z-index: 999;
          align-items: center;
          justify-content: center;
      }

      .modal-content {
          background-color: #1a1a1a;
          padding: 2rem;
          border-radius: 10px;
          max-width: 600px;
          width: 90%;
          max-height: 80vh;
          overflow-y: auto;
          position: relative;
      }

      .modal-header {
          font-size: 1.5rem;
          margin-bottom: 1rem;
          text-align: center;
      }

      .modal-close {
          position: absolute;
          top: 10px;
          right: 15px;
          background: none;
          border: none;
          color: #fff;
          font-size: 1.5rem;
          cursor: pointer;
      }

      .match-section {
          margin-top: 1rem;
      }

      .match-section h3 {
          color: #ffcc00;
          font-size: 1.2rem;
          margin-bottom: 0.5rem;
      }

      .combo-entry {
          margin-left: 1rem;
          margin-bottom: 0.3rem;
      }

      .pmad-tagline {
          display: block;
          text-align: center;
          margin-top: -1rem;
          margin-bottom: 2rem;
          font-style: italic;
          font-weight: 500;
          color: #aaa;
          letter-spacing: 0.6px;
          font-size: 0.92rem;
      }

      .hit {
          color: #ffcc33;
          font-weight: bold;
      }

      .wb-sum {
    margin-top: -0.5rem;
    margin-bottom: 1rem;
    font-weight: bold;
    color: #ffaa00;
    font-size: 1rem;
}

.sum-badge {
    font-size: 0.85rem;
    font-weight: 600;
    margin-left: 1rem;
    color: #ffaa00;
}

      /* Responsive Tweaks */
      @media (max-width: 480px) {
          h1 {
              font-size: 1.4rem;
              margin-bottom: 1.5rem;
          }

          .date-button {
              font-size: 0.85rem;
              padding: 0.4rem 1rem;
              min-width: 180px;
              box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
          }

          .modal-content {
              padding: 1rem;
              width: 95%;
              max-height: 85vh;
              border-radius: 8px;
          }

          .modal-header {
              font-size: 1.2rem;
          }

          .combo-entry {
              font-size: 0.85rem;
              margin-left: 0.5rem;
          }

          .match-section h3 {
              font-size: 1rem;
          }

          .modal-close {
              font-size: 1.3rem;
              top: 8px;
              right: 10px;
          }
      }

      @media (max-width: 375px) {
          .date-button {
              font-size: 0.8rem;
              padding: 0.35rem 0.9rem;
              min-width: 160px;
          }

          .modal-content {
              width: 98%;
          }
      }