/**
 * PuckSheet design system.
 *
 * Hand-authored CSS (there is no LESS toolchain installed for this theme, and
 * the colour work here is done with CSS custom properties, which is what LESS
 * variables would otherwise have given us).
 *
 * Every colour below is lifted verbatim from the PuckSheet reference design.
 * Nothing here is NHL specific: the card reads generic "stat" values and takes
 * its labels from the data it is given, so the same markup serves any league.
 */

/* ---------------------------------------------------------------------------
 * 1. Tokens
 * ------------------------------------------------------------------------ */

:root {
  /* Surfaces */
  --pk-page-bg: oklch(0.965 0.004 250);
  --pk-surface: #fff;
  --pk-strip: oklch(0.975 0.003 250);
  --pk-track: oklch(0.955 0.004 250);

  /* Dark chrome (header and footer) */
  --pk-dark: oklch(0.19 0.006 250);
  --pk-dark-rule: oklch(0.27 0.008 250);
  --pk-dark-active: oklch(0.3 0.008 250);
  --pk-dark-hover: oklch(0.28 0.008 250);
  --pk-dark-field: oklch(0.26 0.008 250);
  --pk-dark-outline: oklch(0.45 0.008 250);

  /* Lines */
  --pk-border: oklch(0.91 0.005 250);
  --pk-border-hover: oklch(0.82 0.03 258);
  --pk-rule: oklch(0.93 0.005 250);
  --pk-rule-faint: oklch(0.945 0.004 250);
  --pk-row-rule: oklch(0.96 0.004 250);

  /* Text on light */
  --pk-text: oklch(0.22 0.02 250);
  --pk-text-strong: oklch(0.24 0.02 250);
  --pk-text-2: oklch(0.48 0.015 250);
  --pk-text-3: oklch(0.46 0.015 250);
  --pk-text-4: oklch(0.4 0.015 250);
  --pk-label: oklch(0.44 0.015 250);
  --pk-muted: oklch(0.55 0.012 250);
  --pk-muted-2: oklch(0.58 0.012 250);
  --pk-placeholder: oklch(0.68 0.008 250);

  /* Text on dark */
  --pk-on-dark: oklch(0.82 0.008 250);
  --pk-on-dark-2: oklch(0.8 0.008 250);
  --pk-on-dark-3: oklch(0.87 0.006 250);
  --pk-on-dark-dim: oklch(0.72 0.008 250);
  --pk-on-dark-label: oklch(0.68 0.008 250);
  --pk-on-dark-body: oklch(0.78 0.008 250);
  --pk-on-dark-badge: oklch(0.9 0.006 250);
  --pk-eyebrow: oklch(0.8 0.11 250);
  --pk-brand-accent: oklch(0.78 0.12 250);

  /* Interactive */
  --pk-accent: oklch(0.34 0.07 258);
  --pk-accent-hover: oklch(0.3 0.07 258);
  --pk-accent-strong: oklch(0.42 0.13 258);
  --pk-chip: oklch(0.93 0.004 250);
  --pk-chip-hover: oklch(0.89 0.006 250);
  --pk-chip-fg: oklch(0.34 0.018 250);
  --pk-link: oklch(0.45 0.14 255);
  --pk-link-hover: oklch(0.36 0.14 255);
  --pk-row-hover: oklch(0.955 0.008 258);

  /* Matchup tones: good = soft defence, mid = middling, bad = tough defence */
  --pk-good-fg: oklch(0.44 0.1 158);
  --pk-good-bg: oklch(0.97 0.02 158);
  --pk-mid-fg: oklch(0.46 0.09 70);
  --pk-mid-bg: oklch(0.975 0.022 80);
  --pk-bad-fg: oklch(0.48 0.14 25);
  --pk-bad-bg: oklch(0.97 0.02 25);

  /* Hit rate headline */
  --pk-pct-high: oklch(0.42 0.11 158);
  --pk-pct-mid: oklch(0.42 0.09 70);
  --pk-pct-low: oklch(0.46 0.14 25);

  /* Chart and gamelog */
  --pk-bar-hit: oklch(0.82 0.07 158);
  --pk-bar-miss: oklch(0.85 0.06 25);
  --pk-bar-zero: oklch(0.88 0.03 25);
  --pk-bar-hit-fg: oklch(0.4 0.1 158);
  --pk-bar-miss-fg: oklch(0.45 0.14 25);
  --pk-mini-hit: oklch(0.78 0.09 158);
  --pk-mini-miss: oklch(0.83 0.08 25);
  --pk-accent-hit: oklch(0.78 0.09 158);
  --pk-accent-miss: oklch(0.8 0.1 25);
  --pk-pill-hit: oklch(0.955 0.032 158);
  --pk-pill-miss: oklch(0.96 0.026 25);
  --pk-rank-soft: oklch(0.75 0.09 158);
  --pk-rank-mid: oklch(0.82 0.08 80);
  --pk-rank-tough: oklch(0.78 0.1 25);
  --pk-grid-line: oklch(0.945 0.004 250);
  --pk-avg-line: oklch(0.72 0.01 250);

  /* Badges */
  --pk-due-bg: oklch(0.52 0.13 70);
  --pk-due-fg: oklch(0.46 0.11 70);
  --pk-slump-bg: oklch(0.5 0.16 25);
  --pk-slump-fg: oklch(0.48 0.15 25);
  --pk-flag: oklch(0.5 0.11 70);

  /* Type and metrics */
  --pk-sans: Archivo, Helvetica, Arial, sans-serif;
  --pk-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pk-shell: 1236px;
  --pk-card: 1140px;
  --pk-shadow: 0 16px 36px oklch(0.2 0.02 250 / 0.24);
  --pk-shadow-soft: 0 16px 36px oklch(0.2 0.02 250 / 0.26);
}

/* ---------------------------------------------------------------------------
 * 2. Page reset
 *
 * The theme's older stylesheet paints a dark page in Chakra Petch. These rules
 * load after it and hand the page back to the PuckSheet palette.
 * ------------------------------------------------------------------------ */

body {
  margin: 0;
  background: var(--pk-page-bg);
  font-family: var(--pk-sans);
  color: var(--pk-text);
  overflow-x: hidden;
}

body a {
  color: var(--pk-link);
}

body a:hover {
  color: var(--pk-link-hover);
}

.pk-shell *,
.pk-shell *::before,
.pk-shell *::after {
  box-sizing: border-box;
}

.pk-shell input::placeholder {
  color: var(--pk-placeholder);
}

/* Neutralise the old global heading rules inside the new chrome. */
.pk-shell h1,
.pk-shell h2,
.pk-shell h3,
.pk-shell h4 {
  margin: 0;
  padding: 0;
  font-family: var(--pk-sans);
  text-transform: none;
  letter-spacing: normal;
}

.pk-mono {
  font-family: var(--pk-mono);
}

.pk-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * 3. Brand mark
 * ------------------------------------------------------------------------ */

.pk-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.pk-brand:hover {
  text-decoration: none;
}

.pk-brand__mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.pk-brand__mark::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pk-dark);
}

.pk-brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.pk-brand__mark.has-logo {
  background: transparent;
}

.pk-brand__mark.has-logo::after {
  display: none;
}

.pk-brand__word {
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 1;
}

.pk-brand__word b {
  font-weight: 700;
  color: #fff;
}

.pk-brand__word i {
  font-weight: 400;
  font-style: italic;
  color: var(--pk-brand-accent);
}

/* ---------------------------------------------------------------------------
 * 4. Header
 * ------------------------------------------------------------------------ */

.pk-header {
  background: var(--pk-dark);
  color: #fff;
  position: relative;
  z-index: 20;
}

.pk-header__bar {
  max-width: var(--pk-shell);
  margin: 0 auto;
  padding: 0 24px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.pk-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.pk-nav__item {
  position: relative;
}

.pk-nav__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--pk-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--pk-on-dark);
  text-decoration: none;
}

.pk-nav__btn:hover {
  background: var(--pk-dark-hover);
  color: #fff;
  text-decoration: none;
}

.pk-nav__item.is-current > .pk-nav__btn {
  background: var(--pk-dark-active);
  color: #fff;
}

.pk-nav__caret {
  font-size: 10px;
  opacity: 0.75;
}

.pk-nav__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 192px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--pk-shadow);
  padding: 8px;
  z-index: 30;
  display: none;
  flex-direction: column;
  gap: 2px;
}

.pk-nav__item.is-open .pk-nav__menu {
  display: flex;
}

.pk-nav__link {
  width: 100%;
  text-align: left;
  font-family: var(--pk-sans);
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  color: oklch(0.3 0.018 250);
  background: transparent;
  text-decoration: none;
  display: block;
}

.pk-nav__link:hover {
  background: oklch(0.96 0.004 250);
  color: oklch(0.3 0.018 250);
  text-decoration: none;
}

.pk-nav__link.is-active {
  font-weight: 600;
  color: #fff;
  background: var(--pk-accent-strong);
}

.pk-nav__link.is-active:hover {
  color: #fff;
  background: var(--pk-accent-strong);
}

/* Page title row ---------------------------------------------------------- */

.pk-header__title {
  border-top: 1px solid var(--pk-dark-rule);
}

.pk-header__title-inner {
  max-width: var(--pk-shell);
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.pk-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pk-title__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pk-eyebrow);
}

.pk-title__h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
}

.pk-header__tools {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.pk-updated {
  font-size: 13px;
  color: var(--pk-on-dark-2);
}

.pk-updated span {
  font-family: var(--pk-mono);
  color: #fff;
}

/* Search ------------------------------------------------------------------ */

.pk-search {
  position: relative;
}

.pk-search__field {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--pk-dark-field);
  border-radius: 8px;
  padding: 0 12px;
  height: 40px;
  width: 272px;
  max-width: 100%;
}

.pk-search__icon {
  width: 13px;
  height: 13px;
  border: 2px solid oklch(0.74 0.008 250);
  border-radius: 50%;
  flex: none;
}

.pk-search__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: var(--pk-sans);
  font-size: 14px;
  height: 100%;
  box-shadow: none;
}

.pk-search__clear {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: oklch(0.45 0.01 250);
  color: #fff;
  font-family: var(--pk-sans);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.pk-search__clear:hover {
  background: oklch(0.58 0.012 250);
}

.pk-search.has-query .pk-search__clear {
  display: flex;
}

.pk-search__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  max-width: 90vw;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--pk-shadow-soft);
  padding: 8px;
  z-index: 40;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
  display: none;
}

.pk-search.is-open .pk-search__menu {
  display: flex;
}

.pk-search__result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: left;
  font-family: var(--pk-sans);
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: transparent;
}

.pk-search__result:hover,
.pk-search__result.is-highlighted {
  background: oklch(0.96 0.004 250);
}

.pk-search__result-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--pk-text-strong);
}

.pk-search__result-meta {
  font-family: var(--pk-mono);
  font-size: 11px;
  color: oklch(0.45 0.015 250);
  white-space: nowrap;
}

.pk-search__empty {
  padding: 12px;
  font-size: 13px;
  color: oklch(0.45 0.015 250);
  display: none;
}

.pk-search.is-empty .pk-search__empty {
  display: block;
}

/* ---------------------------------------------------------------------------
 * 5. Board (the scrolling column of cards)
 * ------------------------------------------------------------------------ */

.pk-board {
  padding: 24px 0 56px;
  overflow-x: auto;
}

.pk-board__inner {
  width: max-content;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Toolbar ----------------------------------------------------------------- */

/*
 * One row, always.
 *
 * The board is a fixed 1140px canvas, so this bar never gets more room. The
 * longest sort labels ("worst matchup", "highest hit rate") ran it about 4px
 * over and tipped the sort buttons onto a second line, so the bar no longer
 * wraps and the "sorted by" text shrinks instead if a longer label is ever
 * added. The gap here is only a minimum separation under space-between, so
 * trimming it changes nothing until the two groups nearly touch.
 */
.pk-toolbar {
  width: var(--pk-card);
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--pk-border);
  border-radius: 12px;
  flex-wrap: nowrap;
}

.pk-toolbar__left,
.pk-toolbar__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* The sort buttons keep their full width; the left group gives way first. */
.pk-toolbar__left {
  min-width: 0;
}

.pk-toolbar__right {
  gap: 8px;
  flex: none;
}

.pk-segment {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--pk-track);
  border-radius: 10px;
  flex: none;
}

.pk-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.pk-count__n {
  font-size: 14px;
  font-weight: 700;
  color: var(--pk-text);
  white-space: nowrap;
  flex: none;
}

.pk-count__by {
  font-size: 13px;
  color: oklch(0.46 0.015 250);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pk-eyebrow-sm {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pk-label);
}

.pk-sorts {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* Shared chip button ------------------------------------------------------ */

.pk-chip {
  font-family: var(--pk-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  background: var(--pk-chip);
  color: var(--pk-chip-fg);
  line-height: 1.2;
}

.pk-chip:hover {
  background: var(--pk-chip-hover);
  color: var(--pk-chip-fg);
}

.pk-chip.is-active,
.pk-chip.is-active:hover {
  background: var(--pk-accent);
  color: #fff;
}

.pk-chip.is-active:hover {
  background: var(--pk-accent-hover);
}

.pk-chip--sm {
  padding: 6px 12px;
}

.pk-chip--mono {
  font-family: var(--pk-mono);
  font-weight: 700;
  padding: 6px 12px;
}

/* ---------------------------------------------------------------------------
 * 6. Player card: shared pieces
 * ------------------------------------------------------------------------ */

.pk-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pk-cards.is-full {
  gap: 16px;
}

/* One card element per player. The view toggle swaps which body shows. */
.pk-card__compact {
  display: none;
}

.pk-card__full {
  display: none;
}

.pk-cards.is-compact .pk-card__compact {
  display: grid;
}

.pk-cards.is-full .pk-card__full {
  display: block;
}

.pk-card.is-hidden {
  display: none;
}

/* Avatar and badges ------------------------------------------------------- */

.pk-avatar-wrap {
  position: relative;
  flex: none;
}

/* The headshot sits over the initials, so a missing image falls back to them. */
.pk-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: repeating-linear-gradient(135deg, oklch(0.92 0.006 250) 0 6px, oklch(0.955 0.004 250) 6px 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pk-mono);
  font-size: 12px;
  font-weight: 700;
  color: oklch(0.45 0.015 250);
  overflow: hidden;
}

.pk-avatar__initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pk-avatar img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: none;
  margin: 0;
}

.pk-badge {
  position: absolute;
  top: -8px;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  display: none;
  z-index: 2;
}

.pk-badge--due {
  left: -10px;
  background: var(--pk-due-bg);
}

.pk-badge--slump {
  left: -18px;
  background: var(--pk-slump-bg);
}

.pk-card.is-due .pk-badge--due,
.pk-card.is-slumping .pk-badge--slump {
  display: flex;
}

/* If both fire, the slump badge wins the outer slot. */
.pk-card.is-due.is-slumping .pk-badge--due {
  display: none;
}

/* ---------------------------------------------------------------------------
 * 7. Compact card
 * ------------------------------------------------------------------------ */

.pk-card__compact {
  width: var(--pk-card);
  max-width: 100%;
  grid-template-columns: 220px 140px 112px 150px 176px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid var(--pk-border);
  border-radius: 12px;
}

.pk-card__compact:hover {
  border-color: var(--pk-border-hover);
}

.pk-ident {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.pk-ident:hover {
  text-decoration: none;
  color: inherit;
}

.pk-ident__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pk-ident__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--pk-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.pk-ident__meta {
  font-size: 12px;
  color: var(--pk-text-2);
  white-space: nowrap;
}

.pk-ident__meta .pk-mono {
  font-family: var(--pk-mono);
}

.pk-play {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pk-play__label {
  font-size: 15px;
  font-weight: 700;
  color: var(--pk-text);
  white-space: nowrap;
}

.pk-odds {
  font-family: var(--pk-mono);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--pk-accent);
  border-radius: 6px;
  padding: 3px 7px;
  white-space: nowrap;
}

.pk-rate {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pk-rate__pct {
  font-family: var(--pk-mono);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pk-rate__hits {
  font-size: 12px;
  color: oklch(0.46 0.015 250);
  white-space: nowrap;
}

.pk-tick {
  font-weight: 700;
  color: var(--pk-good-fg);
}

.pk-cross {
  font-weight: 700;
  color: oklch(0.5 0.14 25);
}

.pk-mini {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 40px;
}

.pk-mini__bar {
  flex: 1;
  border-radius: 2px;
}

.pk-edge {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  padding: 5px 10px;
  justify-self: start;
  white-space: nowrap;
}

.pk-edge__label,
.pk-edge__value {
  font-size: 13px;
  font-weight: 700;
}

.pk-edge__value {
  font-family: var(--pk-mono);
}

.pk-edge__break {
  font-size: 12px;
  color: var(--pk-label);
}

.pk-next-brief {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: right;
}

.pk-next-brief__summary {
  font-size: 13px;
  font-weight: 700;
}

.pk-next-brief__line {
  font-size: 12px;
  color: oklch(0.46 0.015 250);
}

/* Tone helpers (set by the server, kept in sync by the script) ------------- */

.pk-tone-good {
  color: var(--pk-good-fg);
}

.pk-tone-mid {
  color: var(--pk-mid-fg);
}

.pk-tone-bad {
  color: var(--pk-bad-fg);
}

.pk-tonebg-good {
  background: var(--pk-good-bg);
}

.pk-tonebg-mid {
  background: var(--pk-mid-bg);
}

.pk-tonebg-bad {
  background: var(--pk-bad-bg);
}

.pk-pct-high {
  color: var(--pk-pct-high);
}

.pk-pct-mid {
  color: var(--pk-pct-mid);
}

.pk-pct-low {
  color: var(--pk-pct-low);
}

/* ---------------------------------------------------------------------------
 * 8. Full detail card
 * ------------------------------------------------------------------------ */

.pk-card__full {
  width: var(--pk-card);
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--pk-border);
  border-radius: 16px;
  overflow: hidden;
}

.pk-full__head {
  display: grid;
  grid-template-columns: 400px 1fr 288px;
  gap: 24px;
  align-items: center;
  padding: 24px;
}

.pk-full__ident {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
}

.pk-full__ident:hover {
  text-decoration: none;
  color: inherit;
}

.pk-full__ident .pk-avatar {
  width: 120px;
  height: 120px;
  font-size: 28px;
}

.pk-full__ident .pk-badge {
  padding: 3px 9px;
  font-size: 10.5px;
}

.pk-full__ident .pk-badge--due {
  left: -12px;
}

.pk-full__ident .pk-badge--slump {
  left: -20px;
}

.pk-full__names {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.pk-full__name {
  font-size: 20px;
  font-weight: 700;
  color: var(--pk-text);
  letter-spacing: -0.01em;
  line-height: 1;
}

.pk-full__meta {
  font-size: 13px;
  color: var(--pk-text-2);
}

.pk-full__note {
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  display: none;
}

.pk-full__note--due {
  color: var(--pk-due-fg);
}

.pk-full__note--slump {
  color: var(--pk-slump-fg);
}

.pk-card.is-due .pk-full__note--due,
.pk-card.is-slumping .pk-full__note--slump {
  display: flex;
}

.pk-card.is-due.is-slumping .pk-full__note--due {
  display: none;
}

/* Hit rate block ---------------------------------------------------------- */

.pk-hitrate {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 24px;
  border-left: 1px solid var(--pk-rule);
}

.pk-eyebrow-lg {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pk-label);
}

.pk-hitrate__row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.pk-hitrate__pct {
  font-family: var(--pk-mono);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.pk-hitrate__play {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pk-hitrate__play-label {
  font-size: 20px;
  font-weight: 700;
  color: var(--pk-text);
  letter-spacing: -0.01em;
}

.pk-hitrate__play .pk-odds {
  font-size: 16px;
  border-radius: 8px;
  padding: 4px 8px;
  line-height: 1.2;
}

.pk-hitrate__facts {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.pk-hitrate__sub {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--pk-text-4);
}

.pk-hitrate__facts .pk-edge {
  padding: 4px 8px;
  justify-self: auto;
}

/* Next game panel --------------------------------------------------------- */

.pk-next {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 12px;
}

.pk-next__teams {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--pk-text);
}

.pk-next__teams .pk-mono {
  font-family: var(--pk-mono);
}

.pk-next__at {
  font-size: 13px;
  color: var(--pk-text-2);
  font-weight: 500;
}

.pk-next__summary {
  font-size: 13px;
  font-weight: 700;
}

.pk-next__allowed {
  font-size: 12px;
  color: var(--pk-label);
}

.pk-next__allowed b {
  font-family: var(--pk-mono);
  font-weight: 700;
  color: oklch(0.3 0.018 250);
}

/* Controls strip ---------------------------------------------------------- */

.pk-controls {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  background: var(--pk-strip);
  flex-wrap: wrap;
}

.pk-controls__group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pk-controls__buttons {
  display: flex;
  gap: 4px;
}

.pk-controls__note {
  margin-left: auto;
  font-size: 12px;
  color: oklch(0.46 0.015 250);
}

/* Chart ------------------------------------------------------------------- */

.pk-chart {
  padding: 16px 24px 8px;
}

.pk-chart__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 8px;
  flex-wrap: wrap;
}

.pk-chart__stats {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--pk-text-4);
  flex-wrap: wrap;
}

.pk-chart__stats b {
  font-family: var(--pk-mono);
  font-weight: 700;
  color: var(--pk-text-strong);
}

.pk-chart__plot {
  position: relative;
}

.pk-chart__plot svg {
  width: 100%;
  height: auto;
  display: block;
}

/*
 * The plot's SVG is preserveAspectRatio="none", so a forced height on narrow
 * screens stretches the y-axis. These are all horizontal rules, which would
 * thicken with it, so their stroke is measured after the stretch instead.
 */
.pk-chart__grid-line,
.pk-chart__avg-line,
.pk-chart__line-line {
  vector-effect: non-scaling-stroke;
}

.pk-chart__grid-line {
  stroke: var(--pk-grid-line);
  stroke-width: 1;
}

.pk-chart__avg-line {
  stroke: var(--pk-avg-line);
  stroke-width: 1.25;
  stroke-dasharray: 4 5;
}

.pk-chart__line-line {
  stroke: var(--pk-accent);
  stroke-width: 2;
}

.pk-chart__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pk-chart__ytick {
  position: absolute;
  left: 0;
  width: 10.4%;
  text-align: right;
  transform: translateY(-50%);
  font-family: var(--pk-mono);
  font-size: 11px;
  color: var(--pk-muted);
}

.pk-chart__yaxis {
  position: absolute;
  left: 2%;
  top: 42%;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: oklch(0.5 0.012 250);
}

.pk-chart__value {
  position: absolute;
  transform: translate(-50%, -100%);
  font-family: var(--pk-mono);
  font-size: 13px;
  font-weight: 700;
}

.pk-chart__date {
  position: absolute;
  top: 89%;
  transform: translateX(-50%);
  font-family: var(--pk-mono);
  font-size: 11px;
  color: var(--pk-muted);
}

.pk-chart__avg-label {
  position: absolute;
  right: 2%;
  transform: translateY(-100%);
  font-size: 11px;
  font-weight: 600;
  color: oklch(0.45 0.012 250);
}

.pk-chart__line-label {
  position: absolute;
  left: 2%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--pk-accent);
  border-radius: 8px;
  padding: 4px 10px;
}

/* Hover -------------------------------------------------------------------
 *
 * Each bar gets an invisible full height column so the whole slot responds,
 * not just the drawn bar. A zero-shot game has almost no bar to aim at.
 */

.pk-chart__hit {
  fill: transparent;
  cursor: default;
}

.pk-chart__hit:hover {
  fill: oklch(0.55 0.02 258 / 0.06);
}

/* The bar the tooltip is describing, whether it was hovered on the chart or
   through its row in the table. */
.pk-chart__bar.is-hovered {
  stroke: var(--pk-accent);
  stroke-width: 2;
}

.pk-chart__tip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--pk-dark);
  box-shadow: 0 8px 20px oklch(0.2 0.02 250 / 0.28);
  transform: translate(-50%, -100%);
  margin-top: -10px;
  pointer-events: none;
}

/* Flipped below the bar top when there is no room above it. */
.pk-chart__tip.is-below {
  transform: translate(-50%, 0);
  margin-top: 10px;
}

.pk-chart__tip[hidden] {
  display: none;
}

.pk-chart__tip-opp {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.pk-chart__tip-value {
  font-family: var(--pk-mono);
  font-size: 13px;
  font-weight: 700;
}

.pk-chart__tip-value.is-hit {
  color: oklch(0.82 0.12 158);
}

.pk-chart__tip-value.is-miss {
  color: oklch(0.8 0.1 25);
}

/* Gamelog table ----------------------------------------------------------- */

.pk-log__head,
.pk-log__row {
  display: grid;
  grid-template-columns: 88px 1fr 152px 152px 104px 96px;
  align-items: center;
  padding: 0 24px;
}

.pk-log__head {
  height: 40px;
  background: var(--pk-strip);
}

.pk-log__head > div {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(0.46 0.015 250);
}

.pk-log__head .pk-right,
.pk-log__row .pk-right {
  text-align: right;
}

.pk-log__row {
  position: relative;
  height: 48px;
  background: #fff;
  box-shadow: inset 0 -1px 0 var(--pk-row-rule);
}

.pk-log__row:hover {
  background: var(--pk-row-hover);
}

.pk-log__accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}

.pk-log__row.is-hit .pk-log__accent {
  background: var(--pk-accent-hit);
}

.pk-log__row.is-miss .pk-log__accent {
  background: var(--pk-accent-miss);
}

.pk-log__date {
  font-family: var(--pk-mono);
  font-size: 12px;
  color: var(--pk-muted-2);
}

.pk-log__opp {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--pk-text);
  font-weight: 500;
  min-width: 0;
}

.pk-log__loc {
  display: inline-block;
  width: 20px;
  font-family: var(--pk-mono);
  font-size: 12px;
  color: var(--pk-muted-2);
  flex: none;
}

.pk-log__opp-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pk-log__rank {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.pk-log__rank-glyph {
  font-size: 12px;
  font-weight: 700;
}

.pk-log__rank-track {
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: oklch(0.94 0.004 250);
  overflow: hidden;
  flex: none;
}

.pk-log__rank-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
}

.pk-log__rank-label {
  font-family: var(--pk-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--pk-text-strong);
  width: 32px;
  text-align: right;
}

.pk-log__allowed {
  text-align: right;
  font-family: var(--pk-mono);
  font-size: 14px;
  color: oklch(0.32 0.018 250);
}

.pk-log__stat {
  display: flex;
  justify-content: flex-end;
}

.pk-log__pill {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  min-width: 56px;
  font-family: var(--pk-mono);
  font-size: 15px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 8px;
}

.pk-log__row.is-hit .pk-log__pill {
  color: var(--pk-bar-hit-fg);
  background: var(--pk-pill-hit);
}

.pk-log__row.is-miss .pk-log__pill {
  color: var(--pk-bar-miss-fg);
  background: var(--pk-pill-miss);
}

.pk-log__pill-glyph {
  font-family: var(--pk-sans);
  font-size: 12px;
}

.pk-log__toi {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
}

.pk-log__toi-flag {
  font-size: 12px;
  font-weight: 700;
  color: var(--pk-flag);
  display: none;
}

.pk-log__row.is-low-minutes .pk-log__toi-flag {
  display: inline;
}

.pk-log__toi-value {
  font-family: var(--pk-mono);
  font-size: 12px;
  color: oklch(0.56 0.012 250);
}

/* Legend ------------------------------------------------------------------ */

.pk-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 24px;
  background: var(--pk-strip);
  flex-wrap: wrap;
}

.pk-legend__note {
  font-size: 12px;
  color: var(--pk-label);
}

.pk-legend__note b {
  font-family: var(--pk-mono);
  font-weight: 700;
  color: var(--pk-flag);
}

.pk-legend__keys {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: oklch(0.42 0.015 250);
  flex: none;
}

.pk-legend__keys span {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Empty state ------------------------------------------------------------- */

.pk-empty {
  width: var(--pk-card);
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--pk-border);
  border-radius: 12px;
  padding: 56px 24px;
  text-align: center;
}

.pk-empty h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--pk-text);
  margin-bottom: 8px;
}

.pk-empty p {
  font-size: 14px;
  color: var(--pk-text-2);
  margin: 0;
}

/* ---------------------------------------------------------------------------
 * 9. Footer
 * ------------------------------------------------------------------------ */

.pk-footer {
  background: var(--pk-dark);
  color: var(--pk-on-dark);
}

.pk-footer__cols {
  max-width: var(--pk-shell);
  margin: 0 auto;
  padding: 48px 24px 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}

.pk-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}

.pk-footer__brand .pk-brand__mark {
  width: 20px;
  height: 20px;
}

.pk-footer__brand .pk-brand__mark::after {
  width: 8px;
  height: 8px;
}

.pk-footer__brand .pk-brand__word {
  font-size: 18px;
}

.pk-footer__blurb {
  font-size: 13px;
  line-height: 1.6;
  color: var(--pk-on-dark-body);
  text-wrap: pretty;
}

.pk-footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pk-footer__heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pk-on-dark-label);
}

.pk-footer__col a {
  font-size: 13px;
  color: var(--pk-on-dark-3);
  text-decoration: none;
}

.pk-footer__col a:hover {
  color: #fff;
  text-decoration: none;
}

.pk-footer__legal {
  border-top: 1px solid var(--pk-dark-rule);
}

.pk-footer__legal-inner {
  max-width: var(--pk-shell);
  margin: 0 auto;
  padding: 16px 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.pk-footer__copy,
.pk-footer__play {
  font-size: 12px;
  color: var(--pk-on-dark-dim);
}

.pk-footer__play {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pk-footer__age {
  border: 1px solid var(--pk-dark-outline);
  border-radius: 6px;
  padding: 2px 8px;
  font-family: var(--pk-mono);
  font-weight: 700;
  color: var(--pk-on-dark-badge);
}

/* ---------------------------------------------------------------------------
 * 10. Drupal regions kept inside the new shell
 * ------------------------------------------------------------------------ */

.pk-region {
  max-width: var(--pk-shell);
  margin: 0 auto;
  padding: 0 24px;
}

/*
 * The page title only prints outside the board view (system/page-title.html.
 * twig), which sits on the light page background, not the dark header. The
 * older style.css still paints every h1 white for that header, so this needs
 * its own color rather than inheriting it.
 */
.pk-page-title {
  color: var(--pk-text-strong);
}

.pk-region:empty {
  display: none;
}

.pk-content--plain {
  max-width: var(--pk-shell);
  margin: 0 auto;
  padding: 24px;
  background: transparent;
  color: var(--pk-text);
}

/* ---------------------------------------------------------------------------
 * 11. Narrow screens
 *
 * Above 1180px the board is the fixed 1140px canvas the reference draws. Below
 * that the canvas is dropped and everything inside reflows: --pk-card becomes
 * 100%, so the toolbar, both card bodies and the empty state follow the window
 * instead of forcing a sideways scroll.
 *
 * The compact row and the full card head are both grids with fixed pixel
 * columns, so each one is re-laid-out by name at the widths where its columns
 * stop fitting. The gamelog drops its least useful columns rather than
 * squeezing all six.
 * ------------------------------------------------------------------------ */

@media (max-width: 1180px) {
  :root {
    --pk-card: 100%;
  }

  .pk-board {
    overflow-x: visible;
  }

  .pk-board__inner {
    width: 100%;
    max-width: 1140px;
    padding: 0 24px;
  }

  /* Proportional versions of the fixed columns, same order. */
  .pk-card__compact {
    grid-template-columns:
      minmax(0, 1.7fr) minmax(0, 1.1fr) minmax(0, 0.9fr)
      minmax(90px, 1fr) minmax(0, 1.25fr) minmax(0, 1.4fr);
    gap: 12px;
    padding: 14px 16px;
  }

  .pk-full__head {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr) minmax(0, 264px);
    gap: 20px;
  }

  .pk-hitrate {
    padding-left: 20px;
  }
}

@media (max-width: 1100px) {
  .pk-footer__cols {
    grid-template-columns: 1fr 1fr;
  }
}

/* ------------------------------------------------------------- tablet width */

@media (max-width: 1024px) {
  /*
   * The toolbar is nowrap by default because on the fixed canvas it always had
   * room for one line. Off that canvas the sort buttons collide with the view
   * toggle, so both groups are allowed to wrap.
   */
  .pk-toolbar {
    flex-wrap: wrap;
    gap: 12px;
  }

  .pk-toolbar__left,
  .pk-toolbar__right {
    flex-wrap: wrap;
  }

  /* Off the fixed canvas the sort group has to give way, not overflow. */
  .pk-toolbar__right {
    flex: 1 1 auto;
    min-width: 0;
  }

  /*
   * The next-game panel is the widest of the three head blocks and the least
   * urgent, so it drops to its own full-width row first.
   */
  .pk-full__head {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  }

  .pk-full__head .pk-next {
    grid-column: 1 / -1;
  }

  .pk-log__head,
  .pk-log__row {
    grid-template-columns: 76px minmax(0, 1fr) 132px 116px 96px 84px;
    padding: 0 16px;
  }
}

/* ------------------------------------------------------------- narrow width */

@media (max-width: 900px) {
  /*
   * Six columns will not fit, so the compact row becomes two rows. Names are
   * assigned here rather than in the base rules because the single-row layout
   * above needs no areas at all.
   */
  .pk-card__compact {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "ident rate"
      "play  edge"
      "mini  next";
    gap: 12px 16px;
    align-items: center;
  }

  .pk-card__compact .pk-ident {
    grid-area: ident;
  }

  .pk-card__compact .pk-play {
    grid-area: play;
  }

  .pk-card__compact .pk-rate {
    grid-area: rate;
    justify-content: flex-end;
  }

  .pk-card__compact .pk-mini {
    grid-area: mini;
    height: 32px;
  }

  .pk-card__compact .pk-edge {
    grid-area: edge;
    justify-self: end;
  }

  .pk-card__compact .pk-next-brief {
    grid-area: next;
  }

  /* Allowed-per-game is derivable from the rank bar next to it, so it goes. */
  .pk-log__head,
  .pk-log__row {
    grid-template-columns: 72px minmax(0, 1fr) 128px 92px 80px;
  }

  .pk-log__head > div:nth-child(4),
  .pk-log__allowed {
    display: none;
  }

  .pk-full__head {
    padding: 20px 16px;
  }

  .pk-controls,
  .pk-legend {
    padding-left: 16px;
    padding-right: 16px;
  }

  .pk-chart {
    padding: 16px 16px 8px;
  }
}

/* --------------------------------------------------------------- phone width */

@media (max-width: 760px) {
  .pk-header__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
  }

  .pk-header__title-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }

  .pk-search__field {
    width: 100%;
  }

  .pk-search__menu {
    right: auto;
    left: 0;
  }

  .pk-board__inner {
    padding: 0 16px;
  }

  /* Long names and meta lines are allowed to clip rather than force a scroll. */
  .pk-ident__name,
  .pk-ident__meta {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pk-full__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  /* The rule that separated hit rate from the ident now sits above it. */
  .pk-hitrate {
    padding-left: 0;
    padding-top: 16px;
    border-left: 0;
    border-top: 1px solid var(--pk-rule);
  }

  .pk-hitrate__pct {
    font-size: 36px;
  }

  .pk-hitrate__row {
    gap: 16px;
  }

  .pk-controls {
    gap: 12px;
  }

  .pk-controls__note {
    margin-left: 0;
    flex-basis: 100%;
  }

  .pk-chart__head {
    gap: 8px;
  }

  .pk-chart__stats {
    gap: 12px;
    font-size: 12px;
  }

  .pk-chart__ytick,
  .pk-chart__date,
  .pk-chart__value {
    font-size: 9px;
  }

  .pk-chart__yaxis {
    display: none;
  }

  /*
   * Scaled to width alone the plot collapses to about 70px tall and the bars
   * become unreadable, so the height is set outright.
   */
  .pk-chart__plot svg {
    height: 190px;
  }

  /* Opponent rank goes too; the log keeps date, opponent, stat and ice time. */
  .pk-log__head,
  .pk-log__row {
    grid-template-columns: 60px minmax(0, 1fr) 76px 68px;
  }

  .pk-log__head > div:nth-child(3),
  .pk-log__rank {
    display: none;
  }

  .pk-footer__cols {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 16px 16px;
  }

  .pk-footer__legal-inner {
    padding: 16px;
  }
}


/* --------------------------------------------------------------- small phone */

@media (max-width: 560px) {
  /* One column. Every block gets the full width and reads top to bottom. */
  .pk-card__compact {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "ident"
      "rate"
      "play"
      "mini"
      "edge"
      "next";
    gap: 10px;
    align-items: stretch;
  }

  .pk-card__compact .pk-rate,
  .pk-card__compact .pk-edge {
    justify-content: flex-start;
    justify-self: start;
  }

  .pk-card__compact .pk-next-brief {
    text-align: left;
  }

  .pk-full__name {
    font-size: 18px;
  }

  .pk-full__ident {
    gap: 12px;
  }

  .pk-log__head,
  .pk-log__row {
    grid-template-columns: 52px minmax(0, 1fr) 68px;
    padding: 0 12px;
  }

  /* Ice time is the last column that can go without breaking the read. */
  .pk-log__head > div:nth-child(6),
  .pk-log__toi {
    display: none;
  }

  /* Already stated in the chart header, and it lands on top of a bar here. */
  .pk-chart__avg-label {
    display: none;
  }

  .pk-legend {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}