/* === RESET === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* === THEME COLORS === */
:root {
  /* Backgrounds */
  --bg: #0d0d0d;
  --bg-alt: #161616;
  --header-bg: linear-gradient(135deg, #161616, #10131a);
  --card: #1b1b1b;
  --kortti1: #3b3939;
  --kortti2: #0e0b01;
  --korttiheader: #e0e0e0;
  --korttistatsit: #999;

  /* Text */
  --text: #e0e0e0;
  --text-muted: #999;
  --header-text: #ffffff;

  /* Main colors */
  --primary: #c9a227;
  --secondary: #ffffff;
  --border: #2a2a2a;
}

/* === BASE === */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--header-bg);
  color: var(--header-text);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  padding: 0.2rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Logo */
.logo-wrapper {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
}
.navbar-logo {
  height: 50px;
  width: auto;
  display: block;
}

/* Burger menu */
.menu-button {
  background: none;
  border: none;
  color: var(--header-text);
  cursor: pointer;
  font-size: 1.5rem;
}

/* Navigation */
nav {
  display: none;
}
nav a {
  color: var(--header-text);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s;
}
nav a:hover {
  color: var(--primary);
}

/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  color: var(--text);
}

/* Optional text-muted class */
.text-muted {
  color: var(--text-muted);
}

/* Example gradient background for body alternative */
body.alt-bg {
  background: var(--bg-alt);
}


/* Desktop: show nav centered */
@media (min-width: 768px) {
  header {
    justify-content: center; /* center everything */
    gap: 2rem;
    padding: 1rem 2rem; /* 👈 increase vertical & horizontal space on desktop */
  }

  .logo-wrapper {
    position: absolute;
    left: 1rem; /* keep logo left */
  }

  .menu-button {
    display: none; /* hide burger */
  }

  nav {
    display: flex;
    gap: 1rem;
  }
}


/* === CONTAINERS === */
.container {
  margin: 0.5rem auto;
  max-width: 1000px;
  padding: 0.5rem;
}
.seuraavat-container,
.content {
  margin: 1rem auto;
  max-width: 700px;
  padding: 0 1rem;
}

/* === HEADINGS === */
h2, h3 {
  color: var(--primary);
  margin-bottom: 0.6rem;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0px;
}

h2 {
  border-bottom: 1px solid var(--border);
  display: inline-block;
  padding-bottom: 0.2rem;
  font-size: 1.5rem;
}

h3 {
  border-bottom: 1px solid var(--border);
  display: inline-block;
  padding-bottom: 0.2rem;
  font-size: 1.1rem;
}

/* === ENHANCED TABLES === */


/* --- Table base --- */
table, .penalties-table {
  width: 100%;
  border-collapse: collapse; /* flat, no spacing */
  font-size: 0.9rem;
  background: var(--card);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none; /* remove 3D shadow */
  transition: none;  /* remove hover transform */
}

/* --- Table cells --- */
th, td {
  padding: 0.5rem 0.75rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

/* --- Header --- */
thead th {
  background: var(--bg-alt); /* flat background */
  color: var(--primary);
  font-weight: 600;
  text-shadow: none; /* remove any 3D effect */
  box-shadow: none;
}

/* --- Hover effect --- */
tbody tr:hover {
  background: var(--kortti1);
}

/* --- Optional: remove border from last row --- */
tbody tr:last-child td {
  border-bottom: none;
}


/* === ARTICLES === */
.content .container {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s, box-shadow 0.2s;
}
.content .container:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.content article h3 {
  font-size: 1.2rem;
  color: var(--primary);
  margin-bottom: 0.4rem;
}
.content article p {
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.content article a {
  display: inline-block;
  background-color: var(--primary);
  color: #000;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  margin-top: 0.3rem;
  transition: transform 0.2s, background 0.3s;
}
.content article a:hover {
  background-color: #a8891f;
  transform: scale(1.05);
}

article a:active {
  transform: scale(0.95);
}

/* === BREADCRUMB === */
.breadcrumb {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0.8rem auto;
  max-width: 700px;
  padding: 0.4rem 0.6rem;
  text-align: center;
}
.breadcrumb a {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}
.breadcrumb-separator {
  color: var(--text-muted);
  margin: 0 0.3rem;
}
.breadcrumb span:last-child {
  color: var(--secondary);
  font-weight: 600;
}

/* === FOOTER === */
footer {
  background: #000;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 1rem;
  padding: 0.7rem;
  text-align: center;
}

footer a {
    color: var(--primary);
    text-decoration: none; /* optional, remove underline */
    font-weight: 600;       /* optional, make it stand out */
}

footer a:hover {
    text-decoration: underline; /* optional hover effect */
}

/* === MOBILE / RESPONSIVE NAV === */
@media (max-width: 768px) {
  .menu-button {
    display: block;
  }

  nav {
    display: none;              /* hidden by default */
    flex-direction: column;
    gap: 1rem;                  /* more spacing between links */
    background: var(--bg-alt);
    padding: 1rem;              /* more padding inside menu */
    position: absolute;
    top: 100%;
    right: 0;
    width: 220px;               /* slightly wider than before */
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    z-index: 1000;
  }

  nav.show {
    display: flex;              /* shown when JS toggles 'show' */
  }

  nav a {
    padding: 0.5rem 0.8rem;     /* easier to tap */
    font-size: 1rem;            /* slightly larger text */
    display: block;             /* make each link take its own line */
  }
}

#season-select,
#player-filter,
#sort-filter {
  appearance: none;
  background: var(--primary);
  background-image: linear-gradient(45deg, transparent 50%, #000 50%),
                    linear-gradient(135deg, #000 50%, transparent 50%);
  background-position: right 0.8rem top 50%, right 0.5rem top 50%;
  background-repeat: no-repeat;
  background-size: 0.5rem 0.5rem;
  border: none;
  border-radius: 6px;
  color: #000;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  padding-right: 2rem;
  transition: transform 0.2s ease, filter 0.2s ease, background 0.3s;
}

.dropdown {
  width: 270px;  /* adjust as needed */
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  background: #fff;
}

#season-select:hover {
  background: var(--primary);   /* slightly brighter than var(--primary) */
  transform: scale(1.05); /* subtle pop */
  filter: brightness(1.1); /* adds extra glow */
}

#season-select:focus {
  box-shadow: 0 0 4px var(--primary);
  outline: none;
}

#season-title {
  display: none;
  color: var(--primary);
  font-size: 1.1rem;
  margin: 1rem 0;
  text-align: center;
}
.season-header {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0rem 0;
}



/* === MATCH LINKS === */
.tapahtumat-link {
  background: var(--primary);
  border-radius: 4px;
  color: #000;
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  text-decoration: none;
  transition: background 0.3s, transform 0.2s;
}
.tapahtumat-link:hover {
  background: #a8891f;
  transform: scale(1.05);
}
.tapahtumat-link:active {
  transform: scale(0.95);
}

/* === TEAM HIGHLIGHT (standings) === */
.highlight-team {
  background: rgba(201, 162, 39, 0.15);
  color: var(--primary);
  font-weight: 700;
}
.highlight-team td:first-child {
  border-left: 3px solid var(--primary);
  padding-left: 0.6rem;
}

/* === SECTION LABELS === */
.section-label {
  background: var(--primary);
  color: #000;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
  margin: 1.2rem 0 0.6rem;
  display: inline-block;
  text-transform: none;
  letter-spacing: normal;
}

/* === MATCH CARDS === */
.match-card,
#tamu-players {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem auto;
  max-width: 700px;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.match-card:hover,
.match-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}


/* === MATCH CARDS === */
.match-card,
#tamu-players {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem auto;
  max-width: 700px;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.match-card:hover,
.match-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* === MATCH CARD CONTENT === */
.match-card .score,
.match-summary-card .match-summary-score {
  text-align: center;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 0.3rem; /* slightly more space */
}

.match-card .team-names,
.match-summary-teams {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem; /* increased gap for bigger logos */
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.match-summary-teams .vs,
.match-card .vs {
  font-weight: 400;
  color: var(--text-muted);
}

/* Match logos bigger and responsive */
.match-summary-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.match-summary-logos img,
.match-card .team-logo {
  width: clamp(80px, 18vw, 120px); /* bigger than before, responsive */
  height: auto;
  object-fit: contain;
}

/* === TIMELINE STACKED === */
#timeline {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1rem auto;
  max-width: 700px;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* === TIMELINE EVENT CARDS === */
.event-card {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  background: var(--card);
  border-left: 4px solid transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  width: 100%;
  transition: transform 0.2s, box-shadow 0.2s;
}

.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.4);
}

.event-card.goal { border-left-color: #4caf50; }
.event-card.penalty,
.event-card.pr-tpr { border-left-color: #f44336; }
.event-card.timeout { border-left-color: #2196F3; }

.event-card,
.match-summary-card,
#tamu-players,
#tamu-stars {
  margin-bottom: 0.3rem; /* slightly more space between cards */
}


/* === TIMELINE / EVENT IMAGES BIGGER === */
.event-logo {
  width: 64px;           /* double size for visibility */
  height: 64px;          /* maintain square aspect */
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 6px;    /* slightly bigger rounded corners */
  margin-top: 0;         /* optional, reduce unnecessary gap */
  transition: transform 0.3s ease;
}

.event-card:hover .event-logo {
  transform: scale(1.1);  /* subtle pop on hover */
}


.event-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.event-time {
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.event-player div:first-child {
  font-weight: 700;
  font-size: 1rem;
  color: var(--primary);
}

.event-player {
  font-size: 0.9rem;
  color: var(--text);
}

/* === PLAYER CARD PHOTOS === */
.player-photo {
  width: 100%;            /* take full card width */
  max-width: 250px;       /* bigger than before */
  max-height: 300px;      /* taller for visual impact */
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  border: 3px solid var(--primary); /* gold border */
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);     /* deeper shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.player-card:hover .player-photo {
  transform: scale(1.05);  /* subtle zoom on hover */
  box-shadow: 0 6px 18px rgba(0,0,0,0.45); /* stronger hover shadow */
}

/* Make sure player cards resize nicely on small screens */
@media (max-width: 600px) {
  .player-photo {
    max-width: 180px;
    max-height: 220px;
  }
}



/* === TAMU PLAYERS CARD === */
#tamu-players {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem auto;
  max-width: 700px;
}

#tamu-players .tamucard-title {
  font-weight: 600;
  color: var(--primary);
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

#tamu-players .tamucard-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

#tamu-players .tamucard-player {
  display: flex;
  justify-content: space-between; /* keep stats on right */
  align-items: center;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border);
}

#tamu-players .tamucard-player {
  display: flex;
  justify-content: space-between; /* keep stats on right */
  align-items: center;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border);
}

#tamu-players .tamucard-stats {
  flex-shrink: 0;             /* never shrink */
  text-align: right;          /* align stats to right */
  min-width: 2.5rem;          /* ensure space for stats like 12+12 */
}


/* === SECTION HEADINGS SPACING === */
#standings-section h4,
#stats-section h4 {
  margin-top: 2rem;
  margin-bottom: 0.8rem;
  font-size: 1.05rem;
  color: var(--primary);
}

/* === ARTICLES TAGS === */
.tag-wrapper { margin-bottom: 8px; }
.tag {
  display: inline-block;
  background-color: #8d8b8b;
  color: #333;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
article h2, article h3 { margin: 1rem 0 0.5rem; }
article p { margin-bottom: 0.8rem; }

/* === MOBILE / RESPONSIVE === */
@media (min-width: 768px) {
  nav { display: flex !important; }
  .menu-button { display: none; }
}

/* Table logos (standings / player stats) */
.table-logo {
  width: 25px;       /* smaller size */
  height: 25px;
  object-fit: contain;
  vertical-align: middle;
}

/* Match summary / match cards logos */
.match-summary-logos img,
.team-logo.big {
  width: 80px;       /* slightly smaller than before */
  height: 80px;
  object-fit: contain;
}

/* VS logos / center alignment */
.logos-vs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;      /* less gap for smaller logos */
  margin: 0.6rem 0;
}

.match-summary-periods {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.match-card .date,
.match-card .venue {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.match-card .venue {
  margin-top: 0.2rem;
}

/* === MATCH CARD COLORS === */
.match-card.win      { border-left: 4px solid #4caf50; }  /* green for win */
.match-card.loss     { border-left: 4px solid #e53935; }  /* red for loss */
.match-card.tie      { border-left: 4px solid #ffb300; }  /* yellow for tie */
.match-card.upcoming { border-left: 4px solid #777; }     /* grey for upcoming */

/* === MATCH CARD LINKS CENTERED === */
.match-card .links {
  display: flex;
  justify-content: center;   /* center horizontally */
  gap: 0.5rem;               /* spacing between links */
  flex-wrap: wrap;           /* wrap if too many */
  margin-top: 0.5rem;
}

.match-card .links .tapahtumat-link {
  display: inline-block;
  background: var(--primary);
  color: #000;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  text-decoration: none;
  transition: transform 0.2s, background 0.3s;
}
.match-card .links .tapahtumat-link:hover {
  background: #a8891f;
  transform: scale(1.05);
}
.match-card .links .tapahtumat-link:active {
  transform: scale(0.95);
}

/* Make sure the tag wraps its text and doesn't stretch */
.event-tag {
  display: inline-block;
  width: auto;
  padding: 0 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 2px;
  white-space: nowrap;
  vertical-align: middle;
  margin-top: 0.2rem;
}

.goal-tag {
  background-color: #4CAF50; /* green */
  color: #fff;
}

.penalty-tag {
  background-color: #f44336; /* red */
  color: #fff;
}

.timeout-tag {
  background-color: #2196F3; /* blue */
  color: #fff;
}

/* Ensure parent does not stretch tags */
.event-content, .event-player {
  display: block;
  width: auto;
}

/* === Kauden ennätyksiä - korttipohja teeman väreillä === */
#records-section {
  margin-top: 2rem;
}

#records-section h4 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--primary);
}

.records-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 600px) {
  .records-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.record-card {
  background-color: var(--card);
  border: 1px solid var(--border);  /* same subtle border */
  border-radius: 8px;
  padding: 1rem 1.25rem;
  color: var(--text);
  display: block;
  white-space: normal;
}


.record-card h5 {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: var(--primary);
}

.record-card p {
  display: block;
  margin: 0.3rem 0;
  line-height: 1.4;
  white-space: normal;
}

#tamu-stars {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  margin: 1rem auto;
  max-width: 700px;
}

#tamu-stars .tamucard-title {
  font-weight: 600;
  color: var(--primary);
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

#tamu-stars .tamucard-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

#tamu-stars .tamucard-player {
  display: flex;
  justify-content: flex-start; /* left-align everything */
  align-items: center;         /* vertically center stars + name */
  gap: 0.5rem;                 /* space between stars and player name */
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--border);
}

#tamu-stars .tamucard-player:last-child {
  border-bottom: none;
}


.star-emoji.yellow { color: var(--primary) }  /* gold */
.star-emoji.grey   { color: #929191; }  /* grey */
.star-emoji { margin-right: 0.3rem; font-size: 1.2rem; }


/* Article Tabs - match archive pagination style */
.match-articles {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0;
}

.article-tab {
  background: var(--card);         /* Darker background for non-active tabs */
  color: var(--text);              /* Text color */
  border: 1px solid var(--border);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  position: relative;
}

.article-tab:hover {
  background: var(--primary);   /* gold background for hover */
  color: #000;                  /* black text for contrast */
  transform: scale(1.05);
  border-color: var(--primary);
}

.match-articles .article-tab:hover {
  background: var(--primary);  /* gold background */
  color: #000 !important;      /* force black text */
  transform: scale(1.05);
  border-color: var(--primary);
}


.article-tab:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}

.article-tab.active {
  background: var(--primary);      /* Gold background for active */
  color: #000;
  border-color: var(--primary);
  pointer-events: none;            /* Can't click active tab */
  transform: scale(1.05);          /* Slightly bigger */
}

/* Mobile: equal width tabs */
@media (max-width: 480px) {
  .match-articles {
    justify-content: flex-start; /* optional, left-align for scrollable tabs */
    overflow-x: auto;            /* allow horizontal scroll if needed */
  }

  .article-tab {
    flex: 1 0 auto;              /* grow only as needed */
    min-width: 80px;             /* ensure they are not too small */
    max-width: 140px;            /* prevent oversized tab */
    text-align: center;          /* center text inside tab */
    white-space: nowrap;         /* keep text in one line */
    overflow: hidden;
    text-overflow: ellipsis;     /* truncate if too long */
  }
}

#article-content > * {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

#article-content > *:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

#article-content:empty {
  display: none;
}
#article-content,
#article-tabs-container {
  max-width: 700px;      /* same as cards */
  margin: 1rem auto;     /* auto left/right centers it */
  padding: 1 1rem;
}
/* Upcoming matches section */
#upcoming-matches {
  display: flex;
  flex-wrap: wrap;           /* allow wrapping if necessary */
  justify-content: space-between;
  gap: 0.5rem;               /* smaller gap on mobile */
}

/* Ensure upcoming matches are side by side on mobile */
@media (max-width: 600px) {
  #upcoming-matches {
    flex-wrap: nowrap;         /* prevent stacking */
    overflow-x: auto;          /* allow horizontal scroll if needed */
  }
}

.upcoming-small {
  flex: 0 0 calc(50% - 0.25rem); /* half width minus half the gap */
  box-sizing: border-box;
  margin-bottom: 0.5rem;
}


/* Each card 50% width */
.upcoming-small {
  flex: 0 0 48%; /* 50% minus gap */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.8rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* Logo and name */
.upcoming-small .opponent-logo img {
  width: 80px;   /* adjust */
  height: 80px;
  object-fit: contain;
  margin-bottom: 0.3rem;
}

.upcoming-small .opponent-name {
  display: block;
  font-weight: 600;
  color: var(--text);
  margin-top: 0.2rem;
}

/* Time styling */
.upcoming-small .match-date-time {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.8rem; /* more space between time and logo */
}

/* Above cards: date + venue */
.upcoming-header {
  font-weight: 600;
  margin-bottom: 0.8rem;
  color: var(--text);
}

/* Player card grid */
.player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* was 240px */
  gap: 1rem;
  margin-top: 1rem;
}




/* Individual player card pelaajakortti*/ 
.player-card {
  position: relative;
  background: linear-gradient(135deg, var(--kortti1), var(--kortti2));
  border: 1px solid #444;
  border-radius: 12px;
  padding: 0.7rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.player-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
}

/* Player photo with colored border */
/* Make player photos always take full card width */
.player-photo {
  width: 100%;
  height: auto;               /* natural ratio */
  max-height: 220px;          /* limit so they don’t get crazy tall */
  object-fit: cover;
  border-radius: 8px;
  margin: 0 auto 0.6rem;      /* center + space below */
  display: block;
}

/* Mobile tweak: tighter card padding, smaller photo cap */
@media (max-width: 600px) {
  .player-grid {
    grid-template-columns: 1fr; /* one card per row */
    gap: 0.5rem;                /* small gap */
    margin: 0;                  /* remove container margin */
    padding: 0.5rem;            /* optional small padding */
  }

  .player-card {
    width: 100%;                /* force full width */
    max-width: 100%;            /* ignore any max-width */
    padding: 0.5rem;            /* adjust inner padding */
  }
}
@media (max-width: 600px) {
  .player-photo {
    width: 90%;     /* stretch to card width */
    max-width: 100%; /* ignore previous max-width */
    border-radius: 6px;
  }
}



/* Header: name + captain/goalie */
.player-header {
  font-weight: 600;
  color: var(--korttiheader);
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

/* Matches under name */
.player-matches {
  margin-bottom: 0.4rem;
  margin-top: 0.4rem;
  font-size: 0.95rem;
  color: var(--korttiheader);
}

/* Stats row: O, M, S, P, RM */
.player-stats {
  display: flex;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--korttistatsit);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.4rem;
}

.player-stats div {
  background: rgba(255,255,255,0.05);
  padding: 0.2rem 0.4rem;   /* smaller padding */
  border-radius: 6px;
  text-align: center;
  min-width: 38px;          /* narrower box */
}

.player-stats div strong {
  display: block;
  font-size: 0.95rem;
  color: var(--primary);
}

/* Additional player info: birthyear, position, handedness */
.player-info {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.player-info span {
  margin: 0 0.3rem;
}

#playerStatsGrid h3,h2 {
  grid-column: 1 / -1;   /* span all columns */
  width: 100%;           /* just in case */
  text-align: left;      /* optional alignment */
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

#match-stars {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

/* --- Lists inside content/cards --- */
.content ul,
.content ol {
  padding-left: 1.2rem;       /* indent the list items */
  margin-bottom: 1rem;        /* space after the list */
  list-style-position: inside; /* bullets inside */
}

.content li {
  margin-bottom: 0.4rem;      /* spacing between items */
  line-height: 1.4;           /* consistent with text */
  color: var(--text);         /* match body text */
}

.content li ul {
  padding-left: 1rem;         /* nested list indentation */
  margin-bottom: 0;           /* remove extra space */
}

/* === PERIOD TITLES === */
.period-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text); /* or var(--text-secondary) */
  text-align: center;
  margin: 1rem 0;
  position: relative;
}

.period-title::before,
.period-title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: #555; /* or var(--border) */
}

.period-title::before {
  left: 0;
}

.period-title::after {
  right: 0;
}

/* ------------------------- */
/* MATCH-LIST layout */
/* left: date/team names + centered logos/score + periods under total score */
/* ------------------------- */

.match-card {
  border-radius: 8px;
  margin-bottom: 1rem;
  padding: 0.6rem 0.8rem; /* enough space for content + button */
  display: flex;
  flex-direction: column;
  position: relative; /* needed for other elements if needed */
}

/* Middle: left info + centered logos/score */
.match-card .match-middle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Left info: date/time + teams + venue */
.match-card .match-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}

/* Venue row */
.match-card .match-info .venue {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Date/time */
.match-card .match-date-time {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0;
}

.match-card .team-names span {
  margin: 0;
  padding: 0;
  line-height: 1.1;
}

/* Logos + score column */
.match-card .logos-score {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.match-card .logos-score .team-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.match-card .score-block {
  text-align: center;
  min-width: 84px;
}

.match-card .score {
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--text)
}

.match-card .periods {
  color: var(--text-muted);
  font-size: 1rem;
  margin-top: 0.15rem;
}

/* ------------------------- */
/* Tilasto/Yhteenveto button */
/* no absolute positioning, spacing handled by margin-top */
/* ------------------------- */
.match-card .tilasto-button {
  display: inline-block;
  background: var(--primary);
  color: #000;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  text-decoration: none;
  margin-top: 0.3rem; /* spacing from content above */
  transition: transform 0.2s, background 0.3s;
}

.match-card .tilasto-button:hover {
  background: var(--primary);
  transform: scale(1.05);
}

.match-card .tilasto-button:active {
  transform: scale(0.95);
}

/* Venue + date container (optional extra spacing) */
.match-card .match-top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

/* ------------------------- */
/* Small-screen fallback */
/* ------------------------- */
@media (max-width: 520px) {
  .match-card .match-middle {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
  }

  .match-card .logos-score {
    justify-content: center;
    margin-top: 0.4rem;
  }

  .match-card .match-info {
    align-items: center;
    margin-bottom: 0.2rem;
  }

  .match-card .match-top {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.2rem;
  }

  /* Button in normal flow */
  .match-card .tilasto-button {
    position: static;
  }
}

/* === ARTICLE META: DATE & AUTHOR === */
#article-page p em {
  font-style: normal;      /* keeps italics subtle if you want, or remove for true italics */
  font-weight: 500;        /* slightly bolder than normal text */
  color: var(--text-muted); /* match subtitle/date style */
  display: block;          /* each on its own line */
  margin-bottom: 0.5rem;  /* spacing after date/author */
}

#article-page p i {
  font-style: italic;      /* for published date */
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.2rem;
}


#article-page {
  max-width: 700px;
  margin: 1.5rem auto;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#article-page h1 {
  color: var(--primary);
  margin-bottom: 1rem;
  font-size: 1.4rem;
}

#article-page h3 {
  border-bottom: 1px solid var(--border);
  margin: 1rem 0 0.5rem;
  padding-bottom: 0.2rem;
  color: var(--primary);
}

#article-page p {
  color: var(--text);
  margin-bottom: 0.8rem;
  line-height: 1.5;
}

#article-page a {
  color: var(--primary);
  text-decoration: underline;
}

.publish-info {
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-size: 0.9rem;
}


/* === ARCHIVE PAGINATION WITH ARROWS === */
.archive-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin: 1.2rem 0 2rem;
  flex-wrap: wrap;
}

.archive-pagination button {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  position: relative;
}

.archive-pagination button:hover {
  background: var(--primary);
  color: #000;
  transform: scale(1.05);
  border-color: var(--primary);
}

.archive-pagination button:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}

.archive-pagination button.active {
  background: var(--primary);
  color: #000;
  border-color: var(--primary);
  pointer-events: none;
  transform: scale(1.05);
}

/* Arrows for prev/next */
.archive-pagination button.prev::before {
  content: "◀";
  margin-right: 0.3rem;
}

.archive-pagination button.next::after {
  content: "▶";
  margin-left: 0.3rem;
}

/* Optional: smaller buttons on mobile */
@media (max-width: 480px) {
  .archive-pagination button {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
  }
}

.player-meta {
  margin-bottom: 8px;   /* gives nice gap before stats */
  font-weight: 500;
}

.player-number-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 55px;               /* fixed square size */
  height: 55px;              /* same as width */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: #000;

  /* Gradient background for depth */
  background: linear-gradient(145deg, var(--primary), var(--secondary));

  /* Rounded corners + border */
  border-radius: 8px;
  border: 2px solid #d2c8c8;

  /* Subtle inset shadow + outer shadow for pop */
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.25), 
              0 2px 6px rgba(0,0,0,0.4);

  /* Optional glow */
  /* text-shadow: 0 0 2px #ffd700; */

  z-index: 2;
  text-align: center;
}

/* Move the badge inside the wrapper */
.player-card .player-number {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 36px;               /* fixed square size */
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: #000;
  border-radius: 8px;
  border: 2px solid #d2c8c8;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.4);

  z-index: 2;
  text-align: center;
}

/* Score row */
.match-score {
  font-size: 1.5rem;
  font-weight: 700;      /* bold */
  color: var(--text);       /* white */
  margin-bottom: 0.25rem;
}

/* Period scores */
.match-periods {
  font-size: 0.9rem;
  color: var(--text-muted);     /* grey */
  font-weight: 400;      /* not bold */
  margin-bottom: 0.25rem;
}

/* Team names */
.match-teams {
  font-size: 1rem;
  font-weight: 700;      /* bold */
  color: var(--text)    /* white */
}

.match-summary-card {
  display: flex;
  flex-direction: column; /* stack vertically */
  align-items: center;    
  justify-content: center; 
  gap: 0.25rem;           
  text-align: center;     
  padding: 1rem;
  border-radius: 8px;
  background-color: var(--bg-alt); 
  color: var(--text);

  /* Shadow & border */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);

  /* New width control */
  max-width: 700px;      /* limits how wide it can grow */
  margin: 1rem auto;      /* centers horizontally and adds vertical spacing */
}

.penalties-table {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
}

.penalties-table th, 
.penalties-table td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
}