/* =====================================================================
   MINEVANE - History page
   Player rosters across four past seasons. Builds on the shared "Living
   Stone" tokens in styles.css - only page-specific bits here.
   ===================================================================== */

/* ---------- Season switching, without scripting ----------
   One radio per season sits at the top of .history, visually hidden. The
   labels in .season-tabs check them, and the sibling combinator lights up the
   matching tab and reveals the matching panel. Radios rather than :target so
   a season stays selected on load and arrow keys move between tabs. */
/* appearance: none first — Safari paints the native radio widget regardless of
   opacity, so hiding it needs the control itself switched off, not just made
   transparent. clip-path then removes it from the layout entirely. */
.season-radio {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.season-panel { display: none; }

#season-1:checked ~ .season-panels .season-panel-1,
#season-2:checked ~ .season-panels .season-panel-2,
#season-3:checked ~ .season-panels .season-panel-3,
#season-4:checked ~ .season-panels .season-panel-4 { display: block; }

#season-1:checked ~ .season-tabs label[for="season-1"],
#season-2:checked ~ .season-tabs label[for="season-2"],
#season-3:checked ~ .season-tabs label[for="season-3"],
#season-4:checked ~ .season-tabs label[for="season-4"] {
  color: #04130a;
  background: linear-gradient(135deg, var(--emerald-bright), var(--emerald));
  box-shadow: 0 8px 20px -10px rgba(14, 199, 92, 0.6);
}

/* The radio is invisible, so its focus ring has to be drawn on the label
   instead or keyboard users lose track of where they are. */
.season-radio:focus-visible ~ .season-tabs label[for="season-1"],
.season-radio:focus-visible ~ .season-tabs label[for="season-2"],
.season-radio:focus-visible ~ .season-tabs label[for="season-3"],
.season-radio:focus-visible ~ .season-tabs label[for="season-4"] { outline: none; }
#season-1:focus-visible ~ .season-tabs label[for="season-1"],
#season-2:focus-visible ~ .season-tabs label[for="season-2"],
#season-3:focus-visible ~ .season-tabs label[for="season-3"],
#season-4:focus-visible ~ .season-tabs label[for="season-4"] {
  outline: 2px solid var(--emerald-bright);
  outline-offset: 2px;
}

/* ---------- Season tabs ---------- */
/* A segmented control: one pill-shaped track, labels inside it. Scrolls
   horizontally on narrow screens rather than wrapping, so the active tab
   never jumps position when the row overflows. */
.season-tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.35rem;
  margin-bottom: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.season-tabs::-webkit-scrollbar { display: none; }

.season-tab {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.season-tab:hover { color: var(--text); }

/* ---------- Season panel ---------- */
/* Hidden panels are display: none, so the inactive seasons' cards never lay
   out or paint even though all four are present in the markup. A brief
   fade-in plays on the one being shown; the global prefers-reduced-motion
   block in styles.css already neutralises it. */
.season-panel {
  animation: history-panel-in 0.35s var(--ease);
}
@keyframes history-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Season stats strip ---------- */
/* Dashed top/bottom rule, same treatment as .dl-meta in downloads.css. */
.season-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  padding: 1rem 0;
  margin-bottom: 2rem;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}
.season-stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
/* Scoped overrides - styles.css already defines a looser .stat-label for the
   homepage counters, this keeps the two from fighting over spacing. */
.season-stat .stat-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.season-stat .stat-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text);
}

/* ---------- Player grid ---------- */
/* Auto-fill grid, every column the same width. A Minecraft name maxes out at
   16 characters, which measures 120px in the mono face at this size; add the
   32px head, the gap, the padding and the border and a card needs 185px for
   the longest name to fit whole. 190px gives that a little headroom, so no
   name is ellipsised on a normal screen. */
.player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.5rem;
}

/* A season can be 1300 cards, and laying every one out on load is what makes
   the page feel slow to appear. content-visibility lets the browser skip
   layout and paint for cards outside the viewport until they are scrolled to.
   contain-intrinsic-size holds the right space for a skipped card so the
   scrollbar stays honest; it matches the real card height. Browsers without
   support simply ignore both and behave as before. */
.player-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 44px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--r-sm);
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
/* Gentler lift than .staff-card - with hundreds of cards on screen a big
   hover jump gets restless fast. */
.player-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.7);
}

.player-card img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #0a120d;
  /* Source heads are 8x8px PNGs blown up to 32px - without this they render
     as a blurry smear instead of crisp Minecraft pixels. */
  image-rendering: pixelated;
}

/* Username text - the last child of the card, whatever tag it ends up being.
   Targeting by position rather than a class keeps this working regardless
   of how the markup wraps the name. Names run up to 16 characters, so this
   clips with an ellipsis rather than wrapping and breaking the grid. */
.player-card > :last-child {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Quiet marker for players whose recorded name/skin may post-date the
   season (e.g. matched via a later lookup). A small dot, not a badge -
   it should read as a footnote, not a warning. */
.player-card.is-approx::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-mute);
  box-shadow: 0 0 0 2px var(--surface);
}

/* ---------- Empty state ---------- */
.player-empty {
  grid-column: 1 / -1;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-mute);
  font-size: 0.95rem;
}

/* ---------- Footnote ---------- */
.history-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  color: var(--text-mute);
  font-size: 0.82rem;
  text-align: center;
}
/* Echoes the .is-approx dot so the footnote visually ties back to it. */
.history-note::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--text-mute);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  /* Same 190px floor as desktop, so names stay whole here too. */
  .season-stats { gap: 1.1rem 1.8rem; }
}
/* On a phone everything shrinks together so two cards still fit per row while
   a full 16-character name stays whole. At 0.7rem that name measures about
   108px; with a 26px head, the gap, the padding and the border the card needs
   roughly 158px, and a 390px screen leaves about 160px per column. Any wider
   a floor here and the grid drops to a single column, which wastes half the
   width and doubles an already long scroll. */
@media (max-width: 560px) {
  .player-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 0.4rem; }
  .player-card { padding: 0.4rem 0.45rem; gap: 0.45rem; }
  .player-card img { width: 26px; height: 26px; }
  .player-card > :last-child { font-size: 0.7rem; }
  .season-stats { gap: 0.9rem 1.4rem; }
}