:root {
  --bg: #fff;
  --card: #fff;
  --ink: #111;
  --danger: #c0392b;
  --border: 1.5px solid #111;
  --side-padding: 64px;
  --success: #1e7d32;
  --success-bg: #e6f4ea;
  --primary: #1a56db;
  --secondary: #6b7280;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow-x: hidden;
}

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--side-padding) 56px;
}

/* Header: white background, bold uppercase wordmark + nav, one font family.
   Grid (not flex+absolute) so logo/countdown/nav share one true baseline. */
.site-header {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  padding: 20px var(--side-padding) 8px;
  gap: 28px;
}

/* Digital-clock countdown, centered in the header row -- disabled, uncomment to restore.
.countdown-clock {
  justify-self: center;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.countdown-value,
.countdown-colon {
  font-family: "Anton", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.9em;
  letter-spacing: 0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
*/

.logo-mark {
  justify-self: start;
  font-weight: 800;
  font-size: 1.6em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.logo-subtitle {
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.main-nav {
  /* grid-column: 3 keeps nav in the header's original 3rd column now that the
     countdown timer (previously in column 2) is disabled -- remove this if
     the countdown is restored. */
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}

.main-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.6em;
}

.main-nav a:hover {
  text-decoration: underline;
}

.info-asterisk {
  font-size: 1.6em;
  vertical-align: middle;
}


/* Page title treatment: bold uppercase, on white */
.page-title {
  text-align: center;
  margin: 24px 0 32px;
}

.page-title h1 {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 2.4em;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.15;
}

.page-title p {
  font-family: "Courier Prime", monospace;
  color: var(--ink);
  font-size: 1.05em;
  margin: 0;
  text-align: center;
}

/* Home page hero: image + content centered together as one unit, filling
   the space between header and footer (via body's flex column) so it never
   forces a page scrollbar regardless of viewport size. */
.hero-stage {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  min-height: 420px;
  width: min(1536px, 96vw);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.game-hero {
  display: flex;
  align-items: stretch;
  gap: 88px;
  width: 100%;
  height: 100%;
}

.game-hero-image {
  /* Matches the carousel photos' native 1600x1066 (3:2) resolution so
     object-fit: cover never has to crop away real content to fill the box. */
  flex: 1 1 58%;
  aspect-ratio: 3 / 2;
  align-self: center;
  overflow: hidden;
  position: relative;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
}

.game-hero-image::before,
.game-hero-image::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 35%;
  pointer-events: none;
  z-index: 2;
}

.game-hero-image::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 100%);
}

.game-hero-image::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 100%);
}

.hero-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-carousel-track {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  cursor: grab;
  /* JS drives transform: translateX(-n * 100%); this transition is
     skipped mid-drag (see hero-carousel.js) and restored on release. */
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero-carousel-track.is-dragging {
  cursor: grabbing;
  transition: none;
}

.hero-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.hero-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.hero-carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
}

.hero-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.55);
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.hero-carousel-dot.is-active {
  background: #fff;
  transform: scale(1.3);
}

.game-hero-content {
  flex: 1 1 42%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}

.game-hero-content h1 {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 2.2em;
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
}

.game-hero-content p {
  color: var(--ink);
  font-size: 1.05em;
  margin: 0 0 8px;
}

.game-hero-content .card {
  width: 100%;
  margin: 8px 0 0;
}

@media only screen and (max-width: 768px) {
  .hero-stage {
    min-height: 0;
    padding: 24px 0;
  }

  .game-hero {
    flex-direction: column;
    gap: 56px;
  }

  .game-hero-image {
    /* Reset the desktop 58% flex-basis -- .game-hero is a column here, so
       that percentage (and the flex-grow/shrink that come with it) applies
       to height instead of width, fighting the explicit height below and
       throwing off how space is split with .game-hero-content. */
    flex: none;
    width: 100%;
    /* A fixed height (260px, previously) only matches the images' 3:2 ratio
       at exactly 390px wide -- any wider (larger phones, tablets up to the
       768px breakpoint) makes the box proportionally wider than tall, so
       object-fit: cover has to crop the top/bottom to fill it, cutting into
       slide content like the Extra Entry Games header. Using the same
       aspect-ratio as desktop instead means the box always matches the
       images exactly, so cover never has to crop anything. */
    aspect-ratio: 3 / 2;
    height: auto;
  }

  .game-hero-content {
    /* Same reset as above -- without it this still carries flex-grow: 1
       from the desktop 42% basis, so it stretches to fill leftover
       vertical space and centers its children inside that, which is what
       pushed the card away from the text above it and left a dead gap
       below the card instead of a natural, evenly-spaced stack. */
    flex: none;
    align-items: center;
    text-align: center;
    padding: 0 24px;
    gap: 22px;
  }

  .game-hero-content h1 {
    margin-bottom: 4px;
  }

  .site-footer {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .footer-center {
    position: static;
    transform: none;
  }

  .footer-annotation {
    display: none;
  }
}

/* Footer: three-part info bar, bold uppercase, matches header treatment.
   The center item is absolutely positioned to stay truly centered
   regardless of how wide the left/right items are. */
.site-footer {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px var(--side-padding);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1em;
}

.site-footer a {
  color: var(--ink);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.social-icon-link {
  display: inline-flex;
  color: var(--ink);
}

.social-icon-link:hover {
  opacity: 0.6;
}

/* Handwritten callout arrows pointing at footer links */
.footer-annotation {
  position: absolute;
  bottom: 100%;
  margin-bottom: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.footer-annotation-left {
  left: calc(var(--side-padding) + 80px);
  align-items: flex-start;
}

.footer-annotation-center {
  left: 50%;
  transform: translateX(-50%);
}

.handwritten-note {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: 1.5em;
  color: var(--ink);
  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
}

.arrow-svg {
  display: block;
}

/* Minimal card: thin black border, sharp corners, no shadow */
.card {
  background-color: var(--card);
  border: var(--border);
  padding: 28px;
  margin: 24px 0;
}

h2 {
  color: var(--ink);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.3em;
  margin: 0 0 12px;
}

p {
  text-align: left;
  margin: 10px 0;
  line-height: 1.5;
}

form {
  margin: 0;
}

/* Buttons: bold uppercase, thin border, sharp corners, invert on hover */
button {
  font-family: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.85em;
  color: var(--ink);
  background-color: var(--card);
  border: var(--border);
  border-radius: 0;
  padding: 10px 20px;
  margin: 6px 8px 6px 0;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

button:hover {
  background-color: var(--ink);
  color: var(--card);
}

.red-btn {
  color: var(--danger);
}

.red-btn:hover {
  background-color: var(--danger);
  color: var(--card);
  border-color: var(--danger);
}

/* Status badge + entry detail rows (My Entry / home page entered state) */
.status-badge {
  display: inline-block;
  background-color: var(--success-bg);
  color: var(--success);
  font-weight: 700;
  font-size: 0.9em;
  padding: 8px 14px;
  margin-bottom: 16px;
}

.status-badge-muted {
  background-color: #f0f0f0;
  color: var(--secondary);
}

.entry-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.entry-detail-row:last-of-type {
  border-bottom: none;
  margin-bottom: 16px;
}

.entry-detail-label {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.03em;
  color: var(--secondary);
}

/* Primary action: solid fill, unmistakably the main button */
a.btn-primary {
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.85em;
  color: #fff;
  background-color: var(--primary);
  border: 1.5px solid var(--primary);
  padding: 10px 20px;
  text-decoration: none;
  margin: 6px 8px 6px 0;
}

a.btn-primary:hover {
  background-color: #1544ad;
  border-color: #1544ad;
}

/* Secondary action: outlined, deliberately lower-contrast than primary */
.btn-secondary {
  font-family: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.85em;
  color: var(--secondary);
  background-color: var(--card);
  border: 1.5px solid #d1d5db;
  padding: 10px 20px;
  margin: 6px 8px 6px 0;
  cursor: pointer;
}

.btn-secondary:hover {
  background-color: #f3f4f6;
  color: var(--ink);
}

/* Retro touch dialed down: same border/shadow-free look as every other
   card on the site, just the typewriter font + two soft-blue accents to
   keep a little character. */
.retro-card {
  background-color: #fff;
  border: 5px double #111;
  position: relative;
  padding: 24px;
}

.retro-card p,
.retro-card .entry-detail-label,
.retro-card .entry-detail-row span {
  font-family: "Courier Prime", monospace;
}

.retro-card .entry-detail-label {
  color: #111;
}

.retro-card .entry-detail-row {
  border-bottom-color: #ddd;
}

.retro-card .status-badge {
  background-color: #dbe7f2;
  color: #00356b;
  font-family: "Courier Prime", monospace;
  font-weight: 700;
}

.retro-card .status-badge-muted {
  background-color: #e6e6e6;
  color: #555;
}

.retro-card .btn-primary {
  font-family: "Courier Prime", monospace;
  background-color: #00356b;
  border-color: #111;
}

.retro-card .btn-primary:hover {
  background-color: #00234a;
}

.retro-card .btn-secondary,
.retro-card button {
  font-family: "Courier Prime", monospace;
  border-color: #111;
  color: #111;
}

.retro-card .btn-secondary:hover,
.retro-card button:hover {
  background-color: #f0f0f0;
  color: #111;
}

.retro-card a.btn-link {
  font-family: "Courier Prime", monospace;
  border-color: #111;
  color: #111;
}

.retro-card a.btn-link:hover {
  background-color: #111;
  color: #fff;
}

a.btn-link {
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.85em;
  color: var(--ink);
  background-color: var(--card);
  border: var(--border);
  padding: 10px 20px;
  text-decoration: none;
}

a.btn-link:hover {
  background-color: var(--ink);
  color: var(--card);
}

/* Filter/search bar */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: var(--card);
  border: var(--border);
  padding: 14px 18px;
  margin: 16px 0;
  flex-wrap: wrap;
}

.filter-bar label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.8em;
  color: var(--ink);
}

.filter-bar input[type="text"],
.filter-bar select {
  border: 1px solid #111;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.9em;
  background-color: var(--card);
  color: var(--ink);
}

ul.attendance-box {
  border: var(--border);
  padding: 8px 8px 8px 28px;
  max-height: 300px;
  width: 100%;
  overflow-y: auto;
  margin: 10px 0;
  background-color: var(--card);
  list-style: disc;
}

.row-div {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin: 10px 0;
}

.row-div > div {
  flex: 1;
  min-width: 220px;
}

.users-table {
  width: 100%;
  margin: 10px 0;
  border-collapse: collapse;
  background-color: var(--card);
}

.users-table th, .users-table td {
  border-bottom: 1px solid #111;
  padding: 10px 12px;
  text-align: center;
  font-size: 0.9em;
}

.users-table th {
  color: var(--ink);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.75em;
}

.users-table th a {
  color: inherit;
  text-decoration: none;
}

.users-table th a:hover {
  text-decoration: underline;
}

.users-table form {
  display: inline-block;
  margin: 0 4px;
}

.users-table input[type="text"] {
  width: 4em;
  border: 1px solid #111;
  padding: 4px;
  font-family: inherit;
  background-color: var(--card);
  color: var(--ink);
}

::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

dialog {
  border: var(--border);
  padding: 24px;
}

@media only screen and (max-width: 768px) {
  /* The desktop side-padding (64px) eats too much of a phone's width --
     everything (header, content, footer) reads as squeezed into a narrow
     center column. Scale it down for mobile; every rule below still just
     references var(--side-padding), so this alone loosens all of them up. */
  :root {
    --side-padding: 24px;
  }

  button {
    width: 100%;
    margin: 6px 0;
  }

  ul.attendance-box {
    width: 100%;
  }

  .row-div {
    flex-direction: column;
  }

  .site-header {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding-bottom: 20px;
  }

  .logo-mark,
  .countdown-clock,
  .main-nav {
    grid-column: auto;
    justify-self: center;
  }

  .page-title h1 {
    font-size: 1.8em;
  }

  /* The earlier mobile block's `.footer-annotation { display: none; }` and
     `.footer-center { position: static; transform: none; }` (around lines
     249-256) are dead code -- the unconditional rules further down the file
     (for the desktop layout: arrow callouts, absolutely-centered ticket
     link) have equal specificity and later source order, so they always win
     the cascade regardless of viewport. Repeating both overrides here,
     after those unconditional rules, actually takes effect and stops the
     handwritten arrow labels and the ticket link from overlapping other
     footer content on mobile. */
  .footer-annotation {
    display: none;
  }

  .footer-center {
    position: static;
    transform: none;
    /* Nowrap (set unconditionally further up, for the desktop layout
       where this is absolutely centered) made "THE GAME AT FENWAY PARK"
       overflow past the edge of the screen on narrow phone widths
       instead of wrapping. */
    white-space: normal;
  }
}

/* Extra Entry Games list (Info page): opponent logo + date/matchup/meta rows.
   Uses the retro-card look (double border, typewriter font) to match the
   "The Game" info card above it, plus extra bottom margin so the double
   border doesn't crowd the footer's handwritten arrow annotations. */
.extra-games-section {
  margin-bottom: 64px;
}

.extra-games-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.extra-game-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}

.extra-game-item:last-child {
  border-bottom: none;
}

.game-logo {
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.extra-game-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.extra-game-date {
  font-family: "Courier Prime", monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.75em;
  color: var(--secondary);
}

.extra-game-match {
  font-family: "Courier Prime", monospace;
  font-weight: 700;
  font-size: 1.05em;
  color: var(--ink);
}

.extra-game-meta {
  font-family: "Courier Prime", monospace;
  font-size: 0.85em;
  color: var(--ink);
}

.extra-games-footnote {
  font-family: "Courier Prime", monospace;
  font-size: 0.75em;
  color: var(--secondary);
  margin: 16px 0 0;
}

@media only screen and (max-width: 768px) {
  .extra-game-item {
    gap: 14px;
  }
}

p.session-status {
  font-family: "Courier Prime", monospace;
  font-size: 0.75em;
  color: var(--secondary);
}

.inline-logout-link {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-decoration: underline;
}

.inline-logout-link:hover {
  color: var(--ink);
}