.pm-intro {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: .5rem clamp(.8rem,3vw,1.75rem);
  padding-block: .4rem .8rem;
}
.pm-intro > :not(img) { grid-column: 1; min-inline-size: 0; }
.pm-intro > div { grid-row: 1 / span 2; }
.pm-intro > img {
  grid-column: 2;
  grid-row: 1 / span 2;
  inline-size: clamp(64px,10vw,96px);
  block-size: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.pm-intro h1 {
  margin: 0;
  font-size: clamp(1.65rem,3.5vw,3rem);
  line-height: 1.13;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.pm-intro p {
  max-inline-size: 70ch;
  margin-block: .6rem 0;
  color: var(--sc-muted);
  font-size: clamp(.94rem,1.5vw,1.08rem);
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.pm-stats {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: .6rem 1rem;
  padding-block: .6rem 1rem;
  border-block-end: 1px solid var(--sc-stroke);
}
.pm-stats > :is(span,small) {
  display: grid;
  align-content: start;
  gap: .18rem;
  min-inline-size: 0;
  color: var(--sc-muted);
  font-size: .8rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.pm-stats strong {
  color: var(--sc-gold);
  font-size: clamp(1.25rem,2.6vw,1.8rem);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.pm-filters {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  align-items: end;
  gap: .7rem;
  margin-block: 1rem .7rem;
  padding: clamp(.7rem,2vw,1rem);
  border: 1px solid var(--sc-stroke);
  border-radius: 12px;
  background: var(--sc-panel);
}
.pm-filters > label {
  display: grid;
  gap: .3rem;
  min-inline-size: 0;
  color: var(--sc-muted);
  font-size: .8rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.pm-filters > label:first-of-type { grid-column: span 2; }
.pm-filters :is(input,select,button) {
  box-sizing: border-box;
  min-inline-size: 0;
  inline-size: 100%;
  max-inline-size: 100%;
  min-block-size: 44px;
  padding: .6rem .7rem;
  border: 1px solid var(--sc-stroke);
  border-radius: 8px;
  background: var(--sc-inset);
  color: var(--sc-ink);
  font: inherit;
  font-size: .92rem;
  line-height: 1.45;
}
.pm-filters :is(input,select) { appearance: auto; }
.pm-filters input::placeholder { color: var(--sc-muted); opacity: 1; }
.pm-filters button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  block-size: auto;
  font-weight: 650;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.pm-filters button:last-of-type {
  border-color: var(--sc-red);
  color: var(--sc-red);
}
.pm-filters button:disabled { cursor: default; color: var(--sc-muted); }
.pm-filters button > :is(svg,img) { flex: none; inline-size: 20px; block-size: 20px; }
[data-theme="light"] .pm-filters :is(input,select) { color-scheme: light; }
[data-theme="dark"] .pm-filters :is(input,select) { color-scheme: dark; }
.pm-results {
  margin-block: .65rem 1rem;
  color: var(--sc-muted);
  font-size: .9rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.pm-results p { margin-block: .3rem; }
.pm-results strong { color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.pm-results .pm-empty,
.pm-results [data-empty] {
  margin-block: .8rem;
  padding: .75rem .9rem;
  border-inline-start: 3px solid var(--sc-gold);
  background: var(--sc-inset);
  color: var(--sc-ink);
}
.pm-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  align-items: start;
  gap: clamp(.75rem,2vw,1.25rem);
}
.pc-panel.pm-card {
  display: grid;
  align-content: start;
  gap: .75rem;
  min-inline-size: 0;
  margin: 0;
  padding: clamp(.8rem,2vw,1.2rem);
  border-block-start: 2px solid var(--sc-stroke);
  border-radius: 14px;
  overflow-wrap: anywhere;
  scroll-margin-block-start: 7.5rem;
}
.pm-card > :is(h2,h3) {
  margin: 0;
  color: var(--sc-ink);
  font-size: clamp(1.05rem,1.8vw,1.35rem);
  line-height: 1.4;
}
.pm-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .2rem .65rem;
  min-inline-size: 0;
  color: var(--sc-muted);
  font-size: .77rem;
  line-height: 1.6;
}
.pm-meta time { font-variant-numeric: tabular-nums; }
.pm-teams {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem .7rem;
  min-inline-size: 0;
  color: var(--sc-ink);
  font-size: clamp(.98rem,1.7vw,1.15rem);
  font-weight: 680;
  line-height: 1.45;
}
.pm-teams :is(.pc-team-name,.pc-profile-link) { min-inline-size: 0; max-inline-size: 100%; }
.pm-teams .pc-team-name { flex-wrap: wrap; }
.pm-teams .pc-team-art { flex: none; inline-size: 30px; block-size: 30px; object-fit: contain; background: #f6f4ee; border: 1px solid var(--sc-stroke); }
.pm-teams .pm-team-spirit { background: #27252f; }
.pm-teams > :is(small,.pm-versus) { color: var(--sc-muted); font-weight: 450; }
.pm-heroes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  min-inline-size: 0;
  padding-block: .15rem;
}
.pm-heroes > :is(a,span) {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-block-size: 44px;
  min-inline-size: 0;
  max-inline-size: 100%;
  color: var(--sc-ink);
  font-size: .8rem;
  line-height: 1.4;
  text-decoration: none;
}
.pm-heroes img,
.pm-view img {
  box-sizing: border-box;
  flex: none;
  inline-size: 72px;
  block-size: 40px;
  max-inline-size: 100%;
  border: 1px solid var(--sc-stroke);
  border-radius: 5px;
  background: var(--sc-inset);
  object-fit: cover;
}
.pm-note {
  display: grid;
  grid-template-columns: 32px minmax(0,1fr);
  align-items: start;
  gap: .6rem;
  min-inline-size: 0;
  padding: .7rem;
  border-inline-start: 2px solid var(--sc-red);
  border-radius: 6px;
  background: var(--sc-inset);
}
.pm-note > img { inline-size: 32px; block-size: 32px; object-fit: contain; }
.pm-note blockquote {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--sc-ink);
  font-size: .9rem;
  font-style: normal;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.pm-note blockquote::before,
.pm-note blockquote::after { content: none; }
.pm-note blockquote > :first-child { margin-block-start: 0; }
.pm-note blockquote > :last-child { margin-block-end: 0; }
.pm-perspectives {
  min-inline-size: 0;
  border-block-start: 1px solid var(--sc-stroke);
}
.pm-perspectives > summary {
  box-sizing: border-box;
  min-block-size: 44px;
  padding-block: .65rem;
  color: var(--sc-ink);
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.55;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.pm-perspectives > summary::marker { color: var(--sc-red); }
.pm-perspectives[open] > summary { color: var(--sc-red); }
.pm-view-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  align-items: start;
  gap: .6rem;
  min-inline-size: 0;
  padding-block-end: .2rem;
}
.pm-view {
  display: grid;
  grid-template-columns: 72px minmax(0,1fr);
  align-content: start;
  align-items: start;
  gap: .3rem .55rem;
  min-inline-size: 0;
  padding: .7rem;
  border: 1px solid var(--sc-stroke);
  border-radius: 9px;
  background: var(--sc-inset);
  font-size: .85rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.pm-view > img { grid-column: 1; grid-row: 1 / span 2; }
.pm-view > :is(a,strong,small,.pc-meta) { grid-column: 2; min-inline-size: 0; }
.pm-view > :is(p,blockquote,.pm-actions) { grid-column: 1 / -1; margin: 0; }
.pm-view > div { grid-column: 1 / -1; display: flex; align-items: center; gap: .55rem; min-inline-size: 0; }
.pm-view > div > img { flex: none; inline-size: 72px; block-size: 40px; object-fit: cover; }
.pm-view h3 { margin: 0; min-inline-size: 0; font-size: 1rem; }
.pm-view > a { grid-column: 1 / -1; display: inline-flex; align-items: center; min-block-size: 44px; }
.pm-view a { line-height: 1.5; }
.pm-view small { color: var(--sc-muted); font-variant-numeric: tabular-nums; }
.pm-view p { color: var(--sc-ink); }
.pm-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  min-inline-size: 0;
  padding-block-start: .25rem;
}
.pm-actions a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-block-size: 44px;
  min-inline-size: 0;
  max-inline-size: 100%;
  margin: 0;
  padding: .45rem .65rem;
  border: 1px solid var(--sc-stroke);
  border-radius: 8px;
  background: var(--sc-inset);
  color: var(--sc-red);
  font-size: .8rem;
  line-height: 1.5;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.pc-page :is(.pm-filters,.pm-card) :is(a,button,input,select,summary):focus-visible {
  outline: 2px solid var(--sc-red);
  outline-offset: 3px;
}
.pm-intro[hidden],
.pm-stats[hidden],
.pm-filters[hidden],
.pm-grid[hidden],
.pm-grid [hidden],
.pm-filters [hidden],
.pm-results[hidden],
.pm-results [hidden],
.pm-card[hidden] { display: none !important; }
@media (max-width: 72rem) {
  .pm-view-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 54rem) {
  .pm-grid { grid-template-columns: minmax(0,1fr); }
  .pm-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pm-filters > label:first-of-type { grid-column: 1 / -1; }
}
@media (max-width: 34rem) {
  .pm-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pm-actions a { flex: 1 1 8rem; }
  .pm-intro > img { inline-size: 64px; }
}
@media (max-width: 23rem) {
  .pm-filters { grid-template-columns: minmax(0,1fr); }
  .pm-intro { gap: .5rem .6rem; }
  .pm-intro > img { inline-size: 52px; }
  .pm-note { gap: .45rem; padding: .6rem; }
}
@media (hover: hover) {
  .pm-filters button:not(:disabled):hover,
  .pm-actions a:hover { border-color: var(--sc-red); background: var(--sc-panel); }
  .pm-actions a:hover,
  .pm-heroes a:hover { text-decoration: underline; text-underline-offset: .16em; }
  .pm-card:hover { border-block-start-color: var(--sc-red); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .pm-actions a,
  .pm-filters button,
  .pm-card { transition: border-color 140ms ease,background-color 140ms ease; }
  .pm-heroes a img { transition: transform 140ms ease; }
  .pm-heroes a:hover img { transform: translateY(-1px); }
}