/* ---- Palette — pulled from the actual game jersey (red/white/blue) ---- */
:root {
  --rink-navy: #13314c;
  --rink-navy-light: #1f4a6d;
  --rink-blue: #2f7aa5;
  --rink-ice: #f7fafc;
  --rink-red: #c8283a;
  --rink-steel: #6b7684;
  --border-radius: 10px;
  --max-width: 1100px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--rink-ice);
  color: var(--rink-navy);
}

h1, h2, h3, .section-title, .score, .btn, nav.tabs button, .league-switch button {
  font-family: 'Oswald', 'Inter', -apple-system, sans-serif;
}

a { color: inherit; }

header.site-header {
  background: var(--rink-navy);
  color: white;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 20;
}
header.site-header img.logo {
  height: 44px;
  width: 44px;
  object-fit: contain;
  border-radius: 50%;
  background: var(--rink-ice);
  box-shadow: 0 0 0 2px var(--rink-blue);
}
header.site-header h1 {
  font-size: 1.2rem;
  margin: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---- Sticky header dropdown menu ---- */
.site-menu {
  margin-left: auto;
  position: relative;
  flex-shrink: 0;
}
.site-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: white;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.site-menu-btn:hover { background: rgba(255,255,255,0.1); }
.site-menu-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 16px;
  height: 12px;
  flex-shrink: 0;
}
.site-menu-icon span {
  display: block;
  height: 2px;
  background: white;
  border-radius: 1px;
}
.site-menu-label { display: none; }
@media (min-width: 480px) {
  .site-menu-label { display: inline; }
}
.site-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border-radius: var(--border-radius);
  box-shadow: 0 6px 20px rgba(11,31,58,0.35);
  min-width: 190px;
  overflow: hidden;
  z-index: 30;
}
.site-menu-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid #e5eaf0;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--rink-navy);
  cursor: pointer;
}
.site-menu-dropdown button:last-child { border-bottom: none; }
.site-menu-dropdown button:hover { background: #f0f6fb; }
.site-menu-dropdown button.active { color: var(--rink-red); }

/* ---- Cover photo: sized to its own aspect ratio - no fixed height means
   no letterbox bars above/below on typical screens. Width always fills the
   container; height follows automatically from the image's real
   proportions. max-height is only a safety cap for very large desktop
   windows, where it's centered instead (side gutters, not top/bottom -
   still never cropped). ---- */
.cover-photo-wrap {
  width: 100%;
  background: var(--rink-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cover-photo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px;
}
.shop-banner {
  display: block;
  text-align: center;
  background: var(--rink-red);
  color: white;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 0.85rem;
  padding: 10px 12px;
  text-decoration: none;
}
.shop-banner:hover {
  background: #a81f2e;
}

nav.tabs {
  display: flex;
  background: var(--rink-navy-light);
  overflow-x: auto;
}
nav.tabs button {
  flex: 1;
  min-width: 90px;
  background: none;
  border: none;
  color: #cfe0f0;
  padding: 12px 8px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}
nav.tabs button.active {
  color: white;
  border-bottom-color: var(--rink-red);
}

.league-switch {
  display: flex;
  justify-content: space-evenly;
  gap: 8px;
  margin: 16px auto 16px;
  max-width: var(--max-width);
  padding: 0 12px;
}
.league-switch button {
  flex: 1;
  max-width: 220px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 2px solid var(--rink-navy);
  background: white;
  color: var(--rink-navy);
  font-weight: 700;
  cursor: pointer;
}
.league-switch button.active {
  background: var(--rink-navy);
  color: white;
}

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 12px 48px;
}
/* Admin has wider tables (the Games list alone is 9 columns) than the
   public site's content, so it isn't capped to the same reading-width
   max-width - let it use whatever screen space is actually available. */
body.admin-page main {
  max-width: none;
}

select, input[type=text], input[type=password], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input[type=email], input[type=tel], textarea {
  padding: 8px 10px;
  border: 1px solid #c7d2dc;
  border-radius: 6px;
  font-size: 1rem;
  width: 100%;
  font-family: inherit;
}

.controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.controls-row > * { flex: 1; min-width: 200px; }

.card {
  background: white;
  border-radius: var(--border-radius);
  box-shadow: 0 1px 3px rgba(11,31,58,0.12);
  padding: 14px;
  margin-bottom: 14px;
}

.team-badge {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--rink-blue);
  border: 1px solid rgba(0,0,0,0.25);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
th, td {
  padding: 8px 6px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #e5eaf0;
  white-space: nowrap;
}
th { color: var(--rink-steel); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--rink-blue); }
tbody tr:hover { background: #f0f6fb; }
.table-scroll { overflow-x: auto; }
/* The Games table (Schedule & Scores admin tab) is wide - Date, Round,
   Location, Tailgate Menu, Matchup controls, Away/Home scores, Result,
   actions - and can also get tall once a season fills up. Constraining its
   own height means its horizontal scrollbar sits right under the visible
   rows, reachable without first scrolling the whole page down past
   everything else on the tab; the sticky header keeps column labels in
   view while scrolling vertically inside it. Cells wrap instead of forcing
   nowrap width, so short text doesn't add to the horizontal scroll need
   unless the row's actual inputs (selects, edit fields) require it. */
.games-table-scroll {
  overflow: auto;
  max-height: 65vh;
  border: 1px solid #e5eaf0;
  border-radius: 8px;
}
.games-table-scroll table { margin: 0; }
.games-table-scroll th, .games-table-scroll td { white-space: normal; }
.games-table-scroll thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  box-shadow: 0 1px 0 #e5eaf0;
}
/* Overrides the th/td nowrap above - this cell holds stacked selects and
   text inputs (see .edit-matchup-row in admin.js) that are each width:100%
   and rely on being able to wrap onto their own line. With nowrap
   inherited, they instead render side-by-side and overflow into the
   neighboring Away/Home columns instead of stacking as intended. */
.edit-matchup-row {
  white-space: normal;
}

.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.pill-w { background: #e3f6e9; color: #1c7c3f; }
.pill-otw { background: #dff0ff; color: #0d5f9a; }
.pill-l { background: #fbe6e9; color: var(--rink-red); }
.pill-otl { background: #fff2d6; color: #a06c00; }
.pill-t { background: #e6edf7; color: var(--rink-navy); }

.schedule-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #e5eaf0;
}
.schedule-item:last-child { border-bottom: none; }
.schedule-item .teams { font-weight: 600; }
.schedule-item .meta { font-size: 0.8rem; color: var(--rink-steel); }
.score { font-weight: 800; font-size: 1.05rem; color: var(--rink-navy); }

/* ---- Scoreboard-style schedule ---- */
.scoreboard-night {
  background: var(--rink-navy);
  border-radius: var(--border-radius);
  padding: 16px 14px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(11,31,58,0.25);
}
.scoreboard-night-header {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 0.8rem;
  color: #ffffff;
  font-family: 'Oswald', sans-serif;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 10px;
  margin-bottom: 4px;
}
.scoreboard-night-round {
  font-weight: 700;
  color: #ffffff;
}
.scoreboard-game {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
.scoreboard-round-badge {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rink-blue);
  margin-bottom: 4px;
}
.scoreboard-round-badge-playoff {
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: #f2c85a;
  margin-bottom: 8px;
}
.scoreboard-round-badge-championship {
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  font-weight: 800;
  color: #ffd76a;
  text-shadow: 0 0 10px rgba(255,215,106,0.45);
  margin-bottom: 10px;
}
.scoreboard-game:last-child { border-bottom: none; }
.scoreboard-team {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1rem;
  color: #eef4fa;
  letter-spacing: 0.02em;
  width: 100%;
  min-width: 0;
}
.scoreboard-team.away { text-align: right; }
.scoreboard-team.home { text-align: left; }
.team-name-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.2);
  text-align: center;
}
.team-name-badge.clickable {
  text-decoration: none;
}
.scoreboard-team-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.scoreboard-team.away .scoreboard-team-inline {
  flex-direction: row-reverse;
  justify-content: flex-start;
}
.scoreboard-team.home .scoreboard-team-inline {
  flex-direction: row;
  justify-content: flex-start;
}
.scoreboard-goalie {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
}
.scoreboard-ha-label {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-top: 4px;
}
.scoreboard-place {
  color: #f2c85a;
  font-weight: 700;
}
.scoreboard-team-record {
  font-family: 'Oswald', sans-serif;
  margin-top: 6px;
}
.scoreboard-record-row {
  display: flex;
  gap: 8px;
}
.scoreboard-team.away .scoreboard-record-row { justify-content: flex-end; }
.scoreboard-team.home .scoreboard-record-row { justify-content: flex-start; }
.scoreboard-record-header span {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.scoreboard-record-values span {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 700;
  color: #e4f0fb;
  margin-top: 1px;
}
.scoreboard-h2h {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8fd0f0;
  margin-top: 6px;
}
.scoreboard-center {
  text-align: center;
  min-width: 92px;
}
.scoreboard-score {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: 0.03em;
  color: var(--rink-red);
  line-height: 1;
}
.scoreboard-score-upcoming {
  color: rgba(255,255,255,0.5);
  font-size: 1.3rem;
}
.scoreboard-meta {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  margin-top: 2px;
}
.scoreboard-location {
  font-size: 0.72rem;
  font-weight: 600;
  color: #ffffff;
  margin-top: 2px;
}
.scoreboard-bye {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0 4px;
  border-top: 1px dashed rgba(255,255,255,0.15);
  margin-top: 6px;
}
.scoreboard-tailgate {
  text-align: center;
  padding: 12px 0 4px;
  margin-top: 6px;
  border-top: 1px dashed rgba(255,255,255,0.15);
}
.tailgate-label-row {
  font-size: 0.92rem;
}
.tailgate-label {
  display: inline-block;
  background: #f2c85a;
  color: var(--rink-navy);
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}
.tailgate-menu-text {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #f2c85a;
  margin-top: 4px;
}
.playoff-scenario-slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  align-items: center;
}
@media (min-width: 600px) {
  .playoff-scenario-slot {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 16px;
  }
}
/* Away stays right-aligned, home stays left-aligned, matching every other
   team column on the schedule (.scoreboard-team-inline / .scoreboard-record-row
   already follow this same split). */
.scoreboard-team.away .playoff-scenario-slot { justify-content: flex-end; }
.scoreboard-team.home .playoff-scenario-slot { justify-content: flex-start; }
.playoff-scenario-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.scenario-condition-text {
  font-size: 0.78rem;
  font-weight: 600;
  color: #eef4fa;
  opacity: 0.9;
  letter-spacing: 0.02em;
}
.scenario-opponent-pills {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.team-name-badge-sm {
  padding: 3px 9px;
  font-size: 0.78rem;
}
.scenario-slash {
  opacity: 0.6;
  font-size: 0.78rem;
}
.scenario-pending-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.scenario-pending-label {
  font-size: 0.65rem;
  color: #f2c85a;
  opacity: 0.9;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.scenario-pending-vs {
  font-size: 0.65rem;
  color: #eef4fa;
  opacity: 0.6;
  text-transform: uppercase;
}
/* Team pill + its regular-season finish, stacked - used anywhere a
   scenario preview names a team (see teamPillWithPlaceHtml). */
.scenario-pill-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.scenario-pill-place {
  font-size: 0.65rem;
  color: #eef4fa;
  opacity: 0.75;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* Full-width card for the Semifinal -> Championship/Consolation preview
   (see the isSimpleSlot branch in scoreboardRow) - stacks the two "winner
   of" pairs on narrow screens, sits them side by side with a "vs" once
   there's enough width, and puts the one-line home-ice rule underneath.
   Each pair gets its own bordered card so the two groups (who's coming
   from which Semifinal) read as clearly separate at a glance. */
.scoreboard-game-scenario {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.scoreboard-game-scenario:last-child { border-bottom: none; }
.scenario-simple-pairs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}
@media (min-width: 500px) {
  .scenario-simple-pairs {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
  }
  .scenario-simple-pair .team-name-badge {
    padding: 7px 16px;
    font-size: 0.9rem;
  }
}
.scenario-simple-pair {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 10px 18px;
}
.scenario-simple-pair .scenario-pending-pair { gap: 6px; }
.scenario-simple-vs {
  font-size: 0.85rem;
  font-weight: 700;
  color: #f2c85a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scenario-note {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
  text-align: center;
  max-width: 460px;
  margin: 0 auto;
}
.scoreboard-center-scenario {
  text-align: center;
}
.scoreboard-bye-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
}
@media (max-width: 480px) {
  .scoreboard-team { font-size: 0.85rem; }
  .scoreboard-score { font-size: 1.5rem; }
  .team-name-badge { padding: 6px 10px; }
  .scoreboard-team.away .scoreboard-team-inline,
  .scoreboard-team.home .scoreboard-team-inline {
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .scoreboard-team.away,
  .scoreboard-team.home {
    text-align: center;
  }
  .scoreboard-team.away .scoreboard-record-row,
  .scoreboard-team.home .scoreboard-record-row {
    justify-content: center;
  }
  .scoreboard-record-row { gap: 5px; }
  .scoreboard-record-header span,
  .scoreboard-record-values span { min-width: 18px; }
  .scoreboard-record-header span { font-size: 0.56rem; }
  .scoreboard-record-values span { font-size: 0.8rem; }
}

.clickable { cursor: pointer; text-decoration: underline dotted; }
.logo.clickable { text-decoration: none; }

.section-title {
  font-size: 1.3rem;
  margin: 4px 0 10px;
  color: var(--rink-navy);
  border-left: 4px solid var(--rink-red);
  padding-left: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 500;
}

.empty-state {
  text-align: center;
  color: var(--rink-steel);
  padding: 30px 10px;
}

.btn {
  background: var(--rink-navy);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}
.btn.secondary { background: white; color: var(--rink-navy); border: 2px solid var(--rink-navy); }
.btn.danger { background: var(--rink-red); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.error-banner {
  background: #fbe6e9;
  color: var(--rink-red);
  border: 1px solid var(--rink-red);
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 0.9rem;
}
.success-banner {
  background: #e3f6e9;
  color: #1c7c3f;
  border: 1px solid #1c7c3f;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 0.9rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.grid-2 > .card {
  /* Without this, a grid item's default min-width is its content's
     min-content size, which can force the card past its grid track and
     off the edge of the page instead of staying within its column. */
  min-width: 0;
}
/* One player selected: let its card take the full row instead of sitting
   in a half-width column with empty space next to it. */
.grid-2 > .card:only-child {
  grid-column: 1 / -1;
}
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

.h2h-modal-backdrop {
  position: fixed; inset: 0; background: rgba(11,31,58,0.55);
  display: flex; align-items: flex-end; justify-content: center; z-index: 50;
}
@media (min-width: 640px) {
  .h2h-modal-backdrop { align-items: center; }
}
.h2h-modal {
  background: white; border-radius: 14px 14px 0 0; padding: 18px; width: 100%; max-width: 480px; max-height: 85vh; overflow-y: auto;
}
@media (min-width: 640px) {
  .h2h-modal { border-radius: 14px; }
}
.h2h-modal h3 { margin-top: 0; }

/* ---- Clinch icons (standings) ---- */
.clinch-icon {
  display: inline-block;
  margin-left: 5px;
  font-size: 0.85rem;
  cursor: default;
}
.clinch-icon-bye { color: #0d5f9a; font-weight: 700; }
.clinch-icon-spot { color: #1c7c3f; font-weight: 700; }
.standings-icons-cell,
.standings-icons-header {
  text-align: right;
}
.standings-clinch-icons {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.standings-clinch-icons .clinch-icon {
  margin-left: 0;
  line-height: 1;
}
.standings-team-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clinch-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 10px 0 0;
  padding: 10px 12px;
  background: #f7f9fb;
  border-radius: var(--border-radius);
  font-size: 0.78rem;
  color: var(--rink-steel);
}
.clinch-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.clinch-legend-item .clinch-icon { margin-left: 0; }

/* ---- Playoff results (trophy) card ---- */
.trophy-card {
  background: linear-gradient(180deg, #fffaf0, white);
  border: 1px solid #f0dfae;
}
.trophy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  text-align: center;
}
.trophy-slot { min-width: 100px; }
.trophy-icon { font-size: 2rem; line-height: 1; }
.trophy-label {
  font-family: 'Oswald', sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rink-steel);
  margin-top: 4px;
}
.trophy-team {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  margin-top: 2px;
}

/* ---- History page ---- */
.history-search-results {
  margin-top: 8px;
  border-radius: var(--border-radius);
  overflow: hidden;
}
.history-search-results button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: white;
  border: 1px solid #e5eaf0;
  border-top: none;
  font-size: 0.95rem;
  cursor: pointer;
  color: var(--rink-navy);
}
.history-search-results button:first-child { border-top: 1px solid #e5eaf0; border-radius: 6px 6px 0 0; }
.history-search-results button:last-child { border-radius: 0 0 6px 6px; }
.history-search-results button:hover { background: #f0f6fb; }
.history-selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--rink-navy);
  color: white;
  border-radius: 999px;
  padding: 6px 8px 6px 14px;
  font-weight: 600;
  font-size: 0.85rem;
  margin: 4px 8px 4px 0;
}
.history-selected-chip button {
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
}
.history-totals {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 4px 0 14px;
}
.history-totals div { text-align: center; }
.history-totals .num { font-family: 'Oswald', sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--rink-navy); }
.history-totals .lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rink-steel); }
.history-season-row td.champ { color: #a06c00; font-weight: 700; }
.history-table-wrap {
  /* No overflow-x here on purpose - the season table below wraps its own
     cell text (see .history-table) instead of scrolling sideways, so
     everything stays visible without a left-right scrollbar. */
  overflow-x: hidden;
}
.history-table th,
.history-table td {
  white-space: normal;
  word-break: break-word;
}
@media (max-width: 480px) {
  .history-table { font-size: 0.8rem; }
  .history-table th, .history-table td { padding: 6px 4px; }
}

/* Standings has 12 columns (#, icons, Team, GP, W, L, OTW, OTL, PTS, GF, GA,
   +/-), too many to fit a phone in portrait at normal size - table-layout:
   fixed plus explicit per-column percentage widths forces it to always fit
   the screen width instead of triggering .table-scroll's horizontal
   scroll. Team name gets the largest remaining share; overflow is clipped
   since .standings-team-name already handles long names with an ellipsis. */
@media (max-width: 480px) {
  .standings-table {
    table-layout: fixed;
    width: 100%;
  }
  .standings-table th,
  .standings-table td {
    padding: 6px 2px;
    font-size: 0.7rem;
    overflow: hidden;
  }
  .standings-table th:nth-child(1), .standings-table td:nth-child(1) { width: 6%; }
  .standings-table th:nth-child(2), .standings-table td:nth-child(2) { width: 11%; }
  .standings-table th:nth-child(3), .standings-table td:nth-child(3) { width: 25%; }
  .standings-table th:nth-child(4), .standings-table td:nth-child(4) { width: 6%; }
  .standings-table th:nth-child(5), .standings-table td:nth-child(5) { width: 6%; }
  .standings-table th:nth-child(6), .standings-table td:nth-child(6) { width: 6%; }
  .standings-table th:nth-child(7), .standings-table td:nth-child(7) { width: 7%; }
  .standings-table th:nth-child(8), .standings-table td:nth-child(8) { width: 7%; }
  .standings-table th:nth-child(9), .standings-table td:nth-child(9) { width: 7%; }
  .standings-table th:nth-child(10), .standings-table td:nth-child(10) { width: 6%; }
  .standings-table th:nth-child(11), .standings-table td:nth-child(11) { width: 6%; }
  .standings-table th:nth-child(12), .standings-table td:nth-child(12) { width: 7%; }
  .standings-table .clinch-icon { font-size: 0.7rem; }
}

/* Playoff Stats has a different shape (9 columns: Team, GP, W, L, OTW, OTL,
   GF, GA, +/-, no leading #/icon columns) from the 12-column regular
   standings above, so it needs its own nth-child widths - reusing the
   main table's rules put Team (this table's 1st column) under the width
   meant for the main table's "#" column, cutting names off. */
@media (max-width: 480px) {
  .playoff-standings-table {
    table-layout: fixed;
    width: 100%;
  }
  .playoff-standings-table th,
  .playoff-standings-table td {
    padding: 6px 2px;
    font-size: 0.7rem;
    overflow: hidden;
  }
  .playoff-standings-table th:nth-child(1), .playoff-standings-table td:nth-child(1) { width: 30%; }
  .playoff-standings-table th:nth-child(2), .playoff-standings-table td:nth-child(2) { width: 8%; }
  .playoff-standings-table th:nth-child(3), .playoff-standings-table td:nth-child(3) { width: 8%; }
  .playoff-standings-table th:nth-child(4), .playoff-standings-table td:nth-child(4) { width: 8%; }
  .playoff-standings-table th:nth-child(5), .playoff-standings-table td:nth-child(5) { width: 9%; }
  .playoff-standings-table th:nth-child(6), .playoff-standings-table td:nth-child(6) { width: 9%; }
  .playoff-standings-table th:nth-child(7), .playoff-standings-table td:nth-child(7) { width: 9%; }
  .playoff-standings-table th:nth-child(8), .playoff-standings-table td:nth-child(8) { width: 9%; }
  .playoff-standings-table th:nth-child(9), .playoff-standings-table td:nth-child(9) { width: 10%; }
}

/* ---- Message of the Day ---- */
.motd-banner {
  background: var(--rink-red);
  color: white;
  text-align: center;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: 0.9rem;
  padding: 10px 16px;
  width: 100%;
  border: none;
  display: block;
}
.motd-banner-link {
  cursor: pointer;
}
.motd-banner-link:hover, .motd-banner-link:focus-visible {
  background: #a81f2e;
}
.motd-banner-link::after {
  content: ' \2192'; /* right arrow, signals "this leads somewhere" */
}

/* ---- Merch Shop (public) ---- */
.merch-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 560px) {
  .merch-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 860px) {
  .merch-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.merch-card {
  background: white;
  border-radius: var(--border-radius);
  box-shadow: 0 1px 3px rgba(11,31,58,0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}
.merch-card:hover, .merch-card:focus-visible {
  box-shadow: 0 4px 12px rgba(11,31,58,0.2);
  transform: translateY(-2px);
}
.merch-card-image {
  aspect-ratio: 1 / 1;
  background: var(--rink-ice);
  cursor: pointer;
  overflow: hidden;
}
.merch-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.merch-card-noimg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rink-steel);
  font-size: 0.85rem;
}
.merch-card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.merch-card-title {
  margin: 0;
  font-size: 1.05rem;
  cursor: pointer;
}
.merch-card-title:hover { text-decoration: underline; }
.merch-card-desc {
  margin: 0;
  color: var(--rink-steel);
  font-size: 0.85rem;
  flex: 1;
}
.merch-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.85rem;
}
.merch-price {
  font-weight: 700;
  color: var(--rink-navy);
}
.merch-availability { font-weight: 600; }
.merch-availability.in-stock { color: #1c7c3f; }
.merch-availability.out-of-stock { color: var(--rink-steel); }
.merch-availability.backorder { color: var(--rink-blue); }
.merch-card-body > .btn { margin-top: 4px; width: 100%; }

/* ---- Merch modals (detail + buy) ---- */
.merch-detail-modal, .merch-buy-modal { position: relative; }
.modal-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--rink-steel);
  cursor: pointer;
  padding: 4px 8px;
}
.merch-gallery {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 12px;
  padding-bottom: 4px;
}
.merch-gallery img {
  height: 160px;
  border-radius: 8px;
  flex-shrink: 0;
}
.merch-buy-modal form label {
  display: block;
  margin-top: 10px;
  margin-bottom: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--rink-steel);
}
.merch-buy-modal form button[type="submit"] {
  margin-top: 16px;
  width: 100%;
}
/* Honeypot field (routes/public.js's POST /merch/orders) - positioned
   off-screen rather than display:none, since some scripted form-fillers
   skip display:none fields but still find/fill ones that are merely
   positioned out of the viewport. Real users never see or reach it. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  overflow: hidden;
}

/* ---- Admin: Site & Merch tab ---- */
.admin-merch-items { display: flex; flex-direction: column; gap: 12px; }
.admin-merch-item-card {
  border: 1px solid #e5eaf0;
  border-radius: var(--border-radius);
  padding: 12px 14px;
}
.admin-merch-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-merch-item-header h4 { margin: 0; }
.admin-merch-item-header .pill-inactive {
  background: #eef1f4; color: var(--rink-steel); font-size: 0.72rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; text-transform: uppercase;
}
.admin-merch-image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.admin-merch-image-thumb {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e5eaf0;
}
.admin-merch-image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-merch-image-thumb button {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(11,31,58,0.75);
  color: white;
  border: none;
  border-radius: 4px;
  width: 20px;
  height: 20px;
  line-height: 1;
  cursor: pointer;
  font-size: 0.85rem;
}
.admin-merch-field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #f0f3f6;
  font-size: 0.85rem;
}
.admin-merch-field-row:last-child { border-bottom: none; }
.admin-merch-field-row .field-label { font-weight: 600; flex: 1; min-width: 120px; }
.admin-merch-field-row .field-type { color: var(--rink-steel); }
.admin-orders-table td { white-space: normal; }
.admin-orders-table .order-fields { font-size: 0.8rem; color: var(--rink-steel); }
.reorder-btns { display: inline-flex; flex-direction: column; gap: 1px; }
.reorder-btn {
  background: #eef1f4;
  border: none;
  border-radius: 4px;
  width: 20px;
  height: 16px;
  line-height: 1;
  font-size: 0.7rem;
  color: var(--rink-navy);
  cursor: pointer;
  padding: 0;
}
.reorder-btn:hover:not(:disabled) { background: #dfe4e9; }
.reorder-btn:disabled { color: #c7d2dc; cursor: default; }
.admin-merch-field-edit-form { padding: 6px 0; border-bottom: 1px solid #f0f3f6; }