/* =========================================================
   MANCK STATS — homepage styles
   Edit colors/fonts in :root. Layout is a single center
   column ("wrap") capped at 880px so it reads well on any
   screen without a grid framework.
   ========================================================= */

:root{
  --bg: #12181B;
  --panel: #1B2328;
  --panel-alt: #212B30;
  --accent: #E8A33D;
  --accent-dark: #B97B22;
  --live: #D8442C;
  --text: #F2EFE9;
  --text-muted: #93A2AA;
  --border: rgba(242,239,233,0.12);

  --font-display: 'Oswald', Impact, sans-serif;
  --font-body: 'Inter', -apple-system, Segoe UI, Roboto, sans-serif;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
}

a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

img{ max-width: 100%; display: block; }

.wrap{
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}

h2.section-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 0.02em;
  margin: 0 0 20px;
  color: var(--text);
}

/* ---------- HEADER ---------- */
.site-header{
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.logo{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}
.logo span{ color: var(--accent); }
.logo:hover{ text-decoration: none; }
.site-nav a{
  color: var(--text-muted);
  font-weight: 500;
  font-size: 15px;
  margin-left: 28px;
}
.site-nav a:hover{ color: var(--accent); text-decoration: none; }

/* ---------- HERO ---------- */
.hero{
  padding: 64px 0 56px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}
.hero-inner{ text-align: center; }
.hero-sport{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--accent);
  margin-bottom: 10px;
}
.hero-sport span{
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--text-muted);
}
.sport-icon{
  width: 30px;
  height: auto;
  color: var(--accent);
  flex-shrink: 0;
}
.kicker{
  font-family: var(--font-display);
  font-size: 44px;
  letter-spacing: 0.08em;
  color: var(--live);
  margin: 0 0 20px;
}
.hero-matchup{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.hero-team{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 140px;
}
.hero-team img{ width: 84px; height: 84px; object-fit: contain; }
.hero-team span{ font-weight: 600; font-size: 16px; }
.hero-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 120px;
}
.hero-date{ font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.hero-vs{ color: var(--text-muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; margin: 2px 0; }
.hero-time{ color: var(--accent); font-weight: 600; }
.hero-site{
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 8px;
  white-space: nowrap;
}

.btn-live{
  display: inline-block;
  background: var(--live);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.03em;
  padding: 14px 36px;
  border-radius: 4px;
}
.btn-live:hover{ background: #c13a24; text-decoration: none; }

/* ---------- UPCOMING ---------- */
.upcoming{ padding: 56px 0; }

.game-list{ display: flex; flex-direction: column; gap: 14px; }

.game-card{
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--panel);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 18px 22px;
  flex-wrap: wrap;
}

.game-sport-icon{
  width: 26px;
  flex-shrink: 0;
}

.game-date{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 56px;
  flex-shrink: 0;
  font-family: var(--font-display);
}
.game-day{ font-size: 12px; color: var(--text-muted); letter-spacing: 0.05em; }
.game-num{ font-size: 26px; font-weight: 600; line-height: 1.1; }
.game-month{ font-size: 12px; color: var(--text-muted); letter-spacing: 0.05em; }

.game-teams{
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 320px;
}
.game-logo{ width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.game-matchup{
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 600;
  font-size: 16px;
}
.matchup-at{ color: var(--text-muted); font-weight: 400; font-size: 13px; }

/* The site/stadium line reuses .hero-vs inside .game-matchup, which is a
   horizontal flex row — flex-basis:100% forces it onto its own line under
   the team names instead of wrapping unpredictably mid-row. */
.game-matchup .hero-vs{
  flex-basis: 100%;
  margin-top: 2px;
  text-align: left;
}

.game-meta{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
.game-time{ color: var(--text-muted); font-size: 14px; }

.btn-outline{
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 18px;
  border-radius: 4px;
  white-space: nowrap;
}
.btn-outline:hover{ background: var(--accent); color: var(--bg); text-decoration: none; }

/* ---------- ARCHIVE ---------- */
.archive{
  padding: 56px 0 72px;
  border-top: 1px solid var(--border);
}

.tabs{
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.tab-btn{
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab-btn:hover{ color: var(--text); }
.tab-btn.is-active{
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.archive-panel{ display: none; }
.archive-panel.is-active{ display: block; }

.result-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.result-list > li{
  display: flex;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.result-list > li:last-child{ border-bottom: none; }

.result-date{
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 14px;
  width: 100px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* SPORT ICON for past events: football is the default for every row.
   To mark a specific row as a different sport, add a modifier class
   to its .result-date span, e.g. class="result-date sport-basketball".
   Add more modifiers below (sport-baseball, sport-soccer, etc.) the
   same way — just add a new class and a matching ::before rule. */
.result-date::before{
  content: "";
  width: 18px;
  height: 12px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cellipse cx='32' cy='20' rx='30' ry='18' fill='none' stroke='%23E8A33D' stroke-width='4'/%3E%3Cline x1='14' y1='20' x2='50' y2='20' stroke='%23E8A33D' stroke-width='4'/%3E%3Cline x1='27' y1='14' x2='27' y2='26' stroke='%23E8A33D' stroke-width='3'/%3E%3Cline x1='32' y1='13' x2='32' y2='27' stroke='%23E8A33D' stroke-width='3'/%3E%3Cline x1='37' y1='14' x2='37' y2='26' stroke='%23E8A33D' stroke-width='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.result-date.sport-basketball::before{
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='17' fill='none' stroke='%23E8A33D' stroke-width='3'/%3E%3Cline x1='20' y1='3' x2='20' y2='37' stroke='%23E8A33D' stroke-width='2.5'/%3E%3Cline x1='3' y1='20' x2='37' y2='20' stroke='%23E8A33D' stroke-width='2.5'/%3E%3Cpath d='M7,9 Q20,20 7,31' fill='none' stroke='%23E8A33D' stroke-width='2.5'/%3E%3Cpath d='M33,9 Q20,20 33,31' fill='none' stroke='%23E8A33D' stroke-width='2.5'/%3E%3C/svg%3E");
}
.result-desc{ color: var(--text); font-size: 15px; flex: 1; min-width: 0; }
.result-desc a{
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(232,163,61,0.4);
  text-underline-offset: 3px;
}
.result-desc a:hover{
  color: #f4bc63;
  text-decoration-color: currentColor;
}

/* Right-aligned marker per result: either "watched via video" (a
   monitor icon) or "personally live-statted" (the site's own live
   dot + label, reusing the same red already used for LIVE status
   elsewhere) — never both on the same entry. */
.result-icon{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  align-self: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.result-icon svg{ width: 16px; height: 16px; flex-shrink: 0; }
.result-icon.result-icon-live{ color: var(--live); }
.result-icon-live .result-icon-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  flex-shrink: 0;
}

.sub-list{
  list-style: none;
  margin: 8px 0 0;
  padding: 0 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sub-list a{ color: var(--accent); font-size: 14px; text-decoration: underline; text-decoration-color: rgba(232,163,61,0.4); text-underline-offset: 3px; }
.sub-list a:hover{ color: #f4bc63; text-decoration-color: currentColor; }

/* ---------- FOOTER ---------- */
.site-footer{
  border-top: 1px solid var(--border);
  padding: 32px 0;
}
.footer-inner p{
  margin: 0 0 6px;
  color: var(--text-muted);
  font-size: 14px;
}
.footer-inner a{ color: var(--text-muted); }
.footer-inner a:hover{ color: var(--accent); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 640px){
  .site-nav a{ margin-left: 16px; font-size: 14px; }
  .hero{ padding: 44px 0 40px; }
  .kicker{ font-size: 32px; }
  /* Stack team / center info / team vertically instead of letting flex-wrap
     break the row unevenly (2 items on one line, 1 orphaned on the next). */
  .hero-matchup{ flex-direction: column; gap: 20px; }
  .hero-team{ width: auto; }
  .hero-team img{ width: 64px; height: 64px; }
  .game-card{ padding: 16px; }
  .game-meta{ margin-left: 0; width: 100%; justify-content: space-between; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
}