/* Light theme counterpart to your existing dark styles */

/* Page */
body {
  background-color: #f7f7f7; /* light page background */
  color: #111827;            /* dark text */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;

  background: url(background.png);
  background-size: cover;
  background-position-x: center;
  background-attachment: fixed;
}

/* Headings */
h1 {
  color: #0f172a;            /* near-black for title */
  text-align: center;
  margin-bottom: 30px;
}

/* Full-width grid card */
.match-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background-color: #ffffff;        /* lifted white card */
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.26); /* subtle shadow on light bg */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(15, 23, 42, 0.04); /* fine border for separation */
}

/* Left team aligned left */
.team-left {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
}

/* Right team aligned right */
.team-right {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
}

.team-right .inner {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: end;
}

/* VS always centered */
.vs {
  justify-self: center;
  text-align: center;
  color: #0ea5a4; /* teal similar to dark version */
  font-weight: 700;
  font-size: 0.6rem;
}

/* Team names */
.team-name {
  font-size: 1rem;
  font-weight: 600;
  color: #0b1220;      /* dark but warm on light background */
/*  white-space: nowrap;*/
  cursor: pointer;
}

.team-place {
  opacity: 0.35;
  display: block;
  font-size: 0.8em;
  margin-top: -0.3em;
}

.league-name {
  cursor: pointer;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

/* Lane numbers (rounded squares) */
.lane-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;

  font-size: 3em;
  opacity: 0.35;
  width: 30px;
  height: 50px;
  font-weight: lighter;

/*  font-size: 1.2rem;
  width: 30px;
  height: 30px;
  background: #ff9800; 
  color: #ffffff;      
*/  border-radius: 8px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(16,24,40,0.08);
}

/* Small accessibility/touch improvements */
.match-card:focus-within,
.match-card:hover {
/*  box-shadow: 0 8px 22px rgba(16,24,40,0.08);*/
/*  transform: translateY(-1px);*/
}

/* Optional small utilities (kept minimal) */
.container-fluid {
  padding-left: 16px;
  padding-right: 16px;
}

/* Ensure long team names truncate gracefully if needed */
.team-name.truncate {
  max-width: 60ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-sub-link {
  display: block;
}

.container {
  max-width: 900px;
}