/* Panenka: match pages. Requires tokens.css and panenka.css (docs/design.md). */

/* ------------------------------------------------------------------ the page */
.pk-match { display: grid; gap: var(--pk-s6); }
.pk-match__body, .pk-match__live { display: grid; gap: var(--pk-s6); align-items: start; }
.pk-match__body > *, .pk-match__live > * { min-width: 0; }

@media (min-width: 960px) {
  .pk-match__body { grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); }
  .pk-match__live {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "pitch feed" "stats feed";
  }
  .pk-match__pitch { grid-area: pitch; }
  .pk-match__feedcol { grid-area: feed; }
  .pk-match__statscol { grid-area: stats; }
}

/* ------------------------------------------------------------------ the scoreboard's extras */
.pk-match__ko { font-size: clamp(1.3rem, 4vw, 2rem); white-space: nowrap; }
.pk-match__after { display: block; margin-top: var(--pk-s1); font-size: var(--pk-fs-small); letter-spacing: 0.06em; text-shadow: none; }
.pk-match__onair {
  display: inline-block;
  padding: 0 6px;
  background: var(--pk-led);
  color: var(--pk-night-3);
  font: 800 var(--pk-fs-label)/1.6 var(--pk-font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pk-match__scorers { grid-row: 2; display: grid; gap: 2px; font-size: var(--pk-fs-small); color: var(--pk-chalk-2); min-width: 0; }
.pk-match__scorers--home { grid-column: 1; text-align: right; }
.pk-match__scorers--away { grid-column: 3; }
.pk-match__scorers a { color: var(--pk-chalk-1); text-decoration: none; }
.pk-match__scorers a:hover { color: var(--pk-led); }
.pk-scoreboard__meta a { color: var(--pk-chalk-1); }

/* ------------------------------------------------------------------ the pitch from above */
.pk-pitch { display: block; width: 100%; height: auto; }
.pk-pitch__ball { fill: var(--pk-paper-0); stroke: var(--pk-night-3); stroke-width: 0.3; }
.pk-pitch__trail { fill: none; }
.pk-pitch__trail--home { fill: var(--pk-paper-0); }
.pk-pitch__trail--away { fill: var(--pk-night-1); }
.pk-pitch__shot { stroke: var(--pk-line); stroke-width: 0.5; stroke-dasharray: 1.2 0.8; }

.pk-match__view { border-bottom: 4px solid var(--pk-grass-1); }
.pk-match__caption {
  min-height: 2.4em;
  padding: var(--pk-s2) var(--pk-s3);
  background: var(--pk-night-1);
  color: var(--pk-chalk-1);
  font-size: var(--pk-fs-small);
}

/* ------------------------------------------------------------------ the minute-by-minute */
.pk-match__feed { background: var(--pk-night-1); color: var(--pk-chalk-1); }
.pk-match__live .pk-match__feed { max-height: 32rem; overflow-y: auto; }
.pk-match__feed a { color: var(--pk-chalk-1); }
.pk-match__feed a:hover { color: var(--pk-led); }
.pk-feed { display: grid; }
.pk-feed__item {
  display: grid;
  grid-template-columns: 3.4em 4em minmax(0, 1fr);
  gap: var(--pk-s2);
  align-items: baseline;
  padding: var(--pk-s2) var(--pk-s3);
  border-bottom: 1px solid var(--pk-night-edge);
  font-size: var(--pk-fs-data);
}
.pk-feed__item:last-child { border-bottom: 0; }
.pk-feed__min { color: var(--pk-led); font: 700 var(--pk-fs-data)/1.4 var(--pk-font-display); font-variant-numeric: tabular-nums; }
.pk-feed__icon { display: flex; align-items: center; min-height: 1.3em; }
.pk-feed__tag {
  padding: 0 4px;
  border: 1px solid var(--pk-night-edge);
  color: var(--pk-chalk-2);
  font: 700 0.66rem/1.5 var(--pk-font-display);
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pk-feed__ball { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 50%; background: var(--pk-chalk-1); box-shadow: inset 0 0 0 2px var(--pk-night-3); }
.pk-feed__score { color: var(--pk-led); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-feed__item--goal { background: var(--pk-night-2); font-weight: 600; }
.pk-feed__item--goal .pk-feed__text { color: var(--pk-chalk-1); }
.pk-feed__item--other .pk-feed__text { color: var(--pk-chalk-2); }
.pk-feed__item--whistle .pk-feed__text { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--pk-fs-small); }
.pk-feed__empty { padding: var(--pk-s3); color: var(--pk-chalk-2); font-style: italic; }

/* ------------------------------------------------------------------ stats key */
.pk-match__key { white-space: nowrap; }
.pk-match__key i { display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 8px; vertical-align: -1px; }
.pk-match__key i.pk-match__key--home { background: var(--pk-grass-1); }
.pk-match__key i.pk-match__key--away { background: var(--pk-ink-2); }

/* ------------------------------------------------------------------ both elevens on the pitch */
.pk-xi { position: relative; max-width: 28rem; margin: 0 auto var(--pk-s4); }
.pk-xi__team {
  display: flex;
  align-items: center;
  gap: var(--pk-s2);
  max-width: 28rem;
  margin: 0 auto;
  padding: var(--pk-s2) 0;
  font: 700 var(--pk-fs-h3)/1.1 var(--pk-font-display);
  text-transform: uppercase;
}
.pk-xi__team span { margin-left: auto; color: var(--pk-ink-3); font-size: var(--pk-fs-small); }
.pk-xi__spot {
  position: absolute;
  width: 5.2rem;
  transform: translate(-50%, -0.85rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: var(--pk-line);
  text-decoration: none;
  text-align: center;
}
.pk-xi__spot:hover { color: var(--pk-line); }
.pk-xi__spot:hover .pk-xi__name { text-decoration: underline; }
.pk-xi__shirt {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  font: 700 0.74rem/1 var(--pk-font-display);
  font-variant-numeric: tabular-nums;
}
.pk-xi__spot--home .pk-xi__shirt { background: var(--pk-paper-0); color: var(--pk-ink-1); box-shadow: 0 0 0 1.5px var(--pk-ink-1); }
.pk-xi__spot--away .pk-xi__shirt { background: var(--pk-night-1); color: var(--pk-chalk-1); box-shadow: 0 0 0 1.5px var(--pk-line); }
.pk-xi__name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 0.7rem/1.2 var(--pk-font);
  text-shadow: 0 1px 2px var(--pk-night-3);
}
.pk-xi__marks { display: flex; align-items: center; gap: 3px; }
.pk-xi__marks:empty { display: none; }
.pk-xi__rating {
  padding: 0 3px;
  background: var(--pk-night-1);
  color: var(--pk-chalk-1);
  font: 700 0.68rem/1.4 var(--pk-font-display);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.pk-xi__spot.is-motm .pk-xi__rating { background: var(--pk-you); color: var(--pk-ink-1); }
.pk-xi__goal { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--pk-paper-0); box-shadow: 0 0 0 1px var(--pk-night-3); }
.pk-xi__note { font: 600 0.62rem/1.2 var(--pk-font); font-style: normal; text-shadow: 0 1px 2px var(--pk-night-3); white-space: nowrap; }

/* ------------------------------------------------------------------ ratings */
.pk-match__ratings tr.is-sub td { color: var(--pk-ink-2); }
.pk-match__ratings td:first-child { color: var(--pk-ink-3); font-size: var(--pk-fs-small); font-weight: 600; }

/* ------------------------------------------------------------------ head to head */
.pk-match__tally { margin-bottom: var(--pk-s3); color: var(--pk-ink-2); }
.pk-match__h2h li { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); align-items: center; padding-left: 10px; border-bottom: 1px solid var(--pk-rule-1); }
.pk-match__h2h li:last-child { border-bottom: 0; }
.pk-match__h2h .pk-fix { border-bottom: 0; padding-left: 0; }

/* ------------------------------------------------------------------ on the air (the live page) */
.pk-onair-list { display: grid; gap: 2px; }
.pk-onair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--pk-s3);
  align-items: center;
  padding: var(--pk-s3);
  background: var(--pk-night-1);
  color: var(--pk-chalk-1);
  border-left: 4px solid transparent;
  text-decoration: none;
}
.pk-onair:hover { background: var(--pk-night-2); color: var(--pk-chalk-1); }
.pk-onair.is-you { border-left-color: var(--pk-led); }
.pk-onair__side { display: flex; align-items: center; gap: var(--pk-s2); min-width: 0; font: 700 var(--pk-fs-body)/1.15 var(--pk-font-display); text-transform: uppercase; overflow-wrap: anywhere; }
.pk-onair__side--home { justify-content: flex-end; text-align: right; }
.pk-onair__mid { display: grid; justify-items: center; min-width: 4.5em; }
.pk-onair__mid b { color: var(--pk-led); font: 800 1.6rem/1 var(--pk-font-display); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.pk-onair__mid small { color: var(--pk-led); font: 700 var(--pk-fs-label)/1.6 var(--pk-font); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }