/* ===========================================================
   HockeyData Game Report — NHL-Gamecenter-style detail overlay.
   Same dark "Flutlicht" tokens + backdrop/panel pattern as
   jungpanther_manageAPI_games' jpms-modal.css, just wider — this
   carries a full boxscore, not a compact summary.
   =========================================================== */

.jphd-report {
  --jphd-bg: var(--jp-panel, #101c3a);
  --jphd-bg-2: var(--jp-panel-2, #142346);
  --jphd-line: var(--jp-line, rgba(255,255,255,.14));
  --jphd-text: var(--jp-text, #eaf0fd);
  --jphd-dim: var(--jp-muted, #93a3c4);
  --jphd-accent: var(--jp-cyan, #8ec9ff);
  --jphd-home: var(--jp-cyan, #8ec9ff);
  --jphd-away: #93a3c4;
}

.jphd-report[aria-hidden="true"] { display: none; }
.jphd-report {
  position: fixed;
  inset: 0;
  z-index: 999999;
  font-family: inherit;
}

.jphd-report__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4,7,18,.78);
  backdrop-filter: blur(6px);
}

.jphd-report__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.97);
  width: min(760px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  background: var(--jphd-bg);
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  overflow: hidden;
  border: 1px solid var(--jphd-line);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.jphd-report[aria-hidden="false"] .jphd-report__panel {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .jphd-report__panel { transition: none; }
}

.jphd-report__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--jphd-line);
  background: rgba(255,255,255,.06);
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--jphd-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
  z-index: 10;
}
.jphd-report__close:hover { background: rgba(255,255,255,.12); transform: scale(1.05); }
.jphd-report__close:focus-visible { outline: 2px solid var(--jphd-accent); outline-offset: 2px; }

.jphd-report__scroll {
  max-height: calc(100vh - 24px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.jphd-report__loading,
.jphd-report__error {
  padding: 60px 24px;
  text-align: center;
  color: var(--jphd-dim);
  font-style: italic;
}

/* Lock page scroll while open */
.jphd-report-open { overflow: hidden; }

/* ---------- header ---------- */
.jphd-head {
  padding: 22px 56px 18px 24px;
}

.jphd-head__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.jphd-pill {
  display: inline-block;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 3px 9px;
  background: rgba(255,255,255,.08);
  color: var(--jphd-dim);
}
.jphd-pill--live {
  background: #e11d48;
  color: #fff;
  animation: jpms-live-pulse 1.8s ease-in-out infinite;
}
.jphd-pill--final { background: var(--jp-accent, #2f83f7); color: #fff; }
@keyframes jpms-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .jphd-pill--live { animation: none; }
}

.jphd-head__comp {
  font-size: 0.85rem;
  color: var(--jphd-dim);
}

.jphd-head__face {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}

.jphd-head__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  opacity: .82;
}
.jphd-head__team.is-winner { opacity: 1; }

.jphd-head__logo { width: 56px; height: 56px; object-fit: contain; }
.jphd-head__short {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  color: var(--jphd-text);
}
.jphd-head__full {
  font-size: 0.72rem;
  color: var(--jphd-dim);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jphd-head__score {
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  color: var(--jphd-text);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.jphd-head__time {
  font-weight: 800;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--jphd-accent);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.jphd-head__sub {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--jphd-dim);
  text-align: center;
}

/* ---------- linescore ---------- */
.jphd-linescore {
  width: calc(100% - 48px);
  margin: 0 24px 18px;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.jphd-linescore th,
.jphd-linescore td {
  padding: 7px 8px;
  text-align: center;
  border-bottom: 1px solid var(--jphd-line);
  color: var(--jphd-text);
  font-variant-numeric: tabular-nums;
}
.jphd-linescore thead th {
  color: var(--jphd-dim);
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--jphd-line);
}
.jphd-linescore tbody th {
  text-align: left;
  font-weight: 700;
}
.jphd-linescore__total { font-weight: 800; color: var(--jphd-accent); }
.jphd-linescore__sog-group tr:first-child th {
  text-align: left;
  color: var(--jphd-dim);
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: none;
  padding-top: 14px;
}
.jphd-linescore tbody:last-child tr:last-child th,
.jphd-linescore tbody:last-child tr:last-child td { border-bottom: none; }

/* ---------- sections ---------- */
.jphd-section {
  margin: 0 24px 20px;
}
.jphd-section__title {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jphd-accent);
  margin-bottom: 10px;
}

/* ---------- scoring summary ---------- */
.jphd-scoring__row {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  align-items: start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--jphd-line);
}
.jphd-scoring__row:last-child { border-bottom: none; }
.jphd-scoring__row--away { opacity: .88; }

.jphd-scoring__time {
  font-size: 0.72rem;
  color: var(--jphd-dim);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.jphd-scoring__main { min-width: 0; }
.jphd-scoring__team {
  display: inline-block;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jphd-dim);
  margin-right: 8px;
}
.jphd-scoring__scorer {
  font-weight: 700;
  color: var(--jphd-text);
}
.jphd-scoring__assists {
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--jphd-dim);
}
.jphd-scoring__score {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--jphd-text);
  padding-top: 1px;
}

.jphd-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(142,201,255,.14);
  color: var(--jphd-accent);
  vertical-align: middle;
}
.jphd-tag--gwg { background: rgba(255,193,7,.16); color: #ffcf4d; }

/* ---------- penalties ---------- */
.jphd-penalty__row {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  align-items: start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--jphd-line);
}
.jphd-penalty__row:last-child { border-bottom: none; }
.jphd-penalty__row--away { opacity: .88; }
.jphd-penalty__time {
  font-size: 0.72rem;
  color: var(--jphd-dim);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.jphd-penalty__team {
  display: inline-block;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jphd-dim);
  margin-right: 8px;
}
.jphd-penalty__player { font-weight: 700; color: var(--jphd-text); }
.jphd-penalty__offence { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--jphd-dim); }
.jphd-penalty__minutes {
  font-weight: 800;
  color: var(--jphd-text);
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
}

/* ---------- team stats comparison ---------- */
.jphd-stats__head,
.jphd-stats__row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  align-items: center;
  gap: 10px;
}
.jphd-stats__head {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--jphd-line);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--jphd-text);
}
.jphd-stats__head span:first-child { text-align: left; }
.jphd-stats__head span:last-child { text-align: right; }
.jphd-stats__row { padding: 8px 0; border-bottom: 1px solid var(--jphd-line); }
.jphd-stats__row:last-child { border-bottom: none; }
.jphd-stats__val {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--jphd-text);
}
.jphd-stats__row .jphd-stats__val:first-child { text-align: left; }
.jphd-stats__row .jphd-stats__val:last-child { text-align: right; }
.jphd-stats__label {
  text-align: center;
  font-size: 0.72rem;
  color: var(--jphd-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- goalies ---------- */
.jphd-goalie__grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.jphd-goalie__row + .jphd-goalie__row {
  margin-top: 8px;
}
.jphd-goalie__name {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--jphd-text);
}
.jphd-goalie__stat {
  font-size: 0.78rem;
  color: var(--jphd-dim);
  margin-top: 1px;
}
.jphd-goalie__pct {
  color: var(--jphd-accent);
  font-weight: 700;
}

/* ---------- roster / boxscore (collapsible — a full skater list is a lot
   of rows, so it stays tucked away until someone actually wants it) ---------- */
.jphd-roster {
  margin-bottom: 20px;
}
.jphd-roster__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.jphd-roster__summary::-webkit-details-marker { display: none; }
.jphd-roster__summary::before {
  content: '▸';
  display: inline-block;
  transition: transform .15s ease;
  color: var(--jphd-accent);
}
.jphd-roster[open] .jphd-roster__summary::before {
  transform: rotate(90deg);
}
.jphd-roster__grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 12px;
}
.jphd-roster__team {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jphd-dim);
  margin-bottom: 6px;
}
.jphd-roster__head,
.jphd-roster__row {
  display: grid;
  grid-template-columns: 26px 1fr 18px 18px 24px 22px;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
}
.jphd-roster__head {
  color: var(--jphd-dim);
  font-weight: 700;
  font-size: 0.62rem;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--jphd-line);
}
.jphd-roster__head span { text-align: center; }
.jphd-roster__row {
  padding: 4px 0;
  border-bottom: 1px solid var(--jphd-line);
}
.jphd-roster__row:last-child { border-bottom: none; }
.jphd-roster__jersey {
  color: var(--jphd-dim);
  font-variant-numeric: tabular-nums;
}
.jphd-roster__name {
  color: var(--jphd-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.jphd-roster__stat {
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--jphd-dim);
}
.jphd-roster__stat--pts {
  color: var(--jphd-accent);
  font-weight: 700;
}
.jphd-roster__empty {
  font-size: 0.78rem;
  color: var(--jphd-dim);
  font-style: italic;
}

/* ---------- meta footer ---------- */
.jphd-meta {
  margin: 0 24px 22px;
  padding-top: 14px;
  border-top: 1px solid var(--jphd-line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.jphd-meta__row {
  display: flex;
  gap: 10px;
  font-size: 0.8rem;
}
.jphd-meta__lbl {
  flex: 0 0 120px;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jphd-dim);
}
.jphd-meta__val { color: var(--jphd-text); }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  .jphd-head { padding: 18px 48px 14px 16px; }
  .jphd-head__logo { width: 44px; height: 44px; }
  .jphd-head__score,
  .jphd-head__time { font-size: 1.5rem; }
  .jphd-linescore { width: calc(100% - 32px); margin: 0 16px 16px; font-size: 0.74rem; }
  .jphd-section { margin: 0 16px 18px; }
  .jphd-meta { margin: 0 16px 18px; }
  .jphd-meta__lbl { flex-basis: 96px; }
  .jphd-scoring__row,
  .jphd-penalty__row { grid-template-columns: 54px 1fr auto; }
  .jphd-goalie__grid2,
  .jphd-roster__grid2 { grid-template-columns: 1fr; gap: 16px; }
}