:root {
  /* San Francisco everywhere (Apple system font); generic sans-serif last resort. */
  --font-main: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    sans-serif;
  --bg: #09111a;
  --bg-soft: rgba(16, 29, 44, 0.82);
  --panel: rgba(10, 20, 32, 0.82);
  --panel-strong: rgba(12, 22, 36, 0.96);
  --surface-1: rgba(18, 32, 49, 0.76);
  --line: rgba(165, 210, 255, 0.14);
  --text: #edf4fb;
  --muted: #94abc2;
  --accent: #9ee37d;
  --accent-2: #ffb86f;
  --accent-3: #7ecbff;
  --danger: #ff7b72;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
  /* One focus affordance everywhere. The file had grown five ring colours
     (three alphas of --accent-3 plus two lime outliers) across 14 rules. */
  --focus-ring: 2px solid var(--accent-3);
  --focus-ring-offset: 2px;
  /* Motion: --dur-1 is state feedback (hover/press), --dur-2 an entrance.
     One ease-out curve; the looping pulse keeps its own timing. */
  --dur-1: 150ms;
  --dur-2: 260ms;
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  /* Spacing. These name values the design already used — the point is that one
     relationship stops being spelled three ways. */
  --pad-panel: 0.95rem; /* content inset of every .panel, hero included */
  /* Inset of the cards nested inside .detail-dialog. Equals --pad-panel from 800px
     up; below it gives inset back, because a phone pays for the modal three
     times over (overlay + dialog + card) before a row gets any width. */
  --pad-detail-card: clamp(0.7rem, 0.5rem + 0.9vw, 0.95rem);
  --space-panel: 1rem; /* panel → panel */
  --space-section: 0.75rem; /* section title → its content */
  --pad-card: 0.7rem 0.8rem; /* cards, trophy groups, status banners */
  --pad-card-compact: 0.55rem 0.75rem; /* dense rows: leaderboard, hero stats */
  --pad-chip: 0.28rem 0.6rem; /* pills and tags */
  --gap-chip: 0.4rem;
  --space-stack: 0.15rem; /* muted label → its value */
  /* The one display-size role: a large thin numeral for a page's headline
     stat (the game hero). Clamp keeps it responsive without media overrides. */
  --text-display: 200 clamp(1.9rem, 1.1rem + 3.3vw, 2.75rem)/1.02 var(--font-main);
  --text-title: 700 1.15rem/1.1 var(--font-main);
  --text-item: 700 0.9rem/1.25 var(--font-main);
  --text-body: 400 0.82rem/1.35 var(--font-main);
  --text-meta: 600 0.72rem/1.25 var(--font-main);
  --text-micro: 500 0.625rem/1.25 var(--font-main);
}

* {
  box-sizing: border-box;
}

html {
  /* Paints the canvas / overscroll ("rubber band") area so pulling past the
     page edge never flashes white — the body gradient alone doesn't cover it. */
  background-color: #081018;
}

body {
  margin: 0;
  font: var(--text-body);
  font-optical-sizing: auto;
  background:
    radial-gradient(circle at 82% 2%, rgba(126, 203, 255, 0.08), transparent 30rem),
    radial-gradient(circle at 8% 78%, rgba(158, 227, 125, 0.045), transparent 28rem),
    linear-gradient(180deg, #07101a 0%, #08111c 52%, #070e17 100%);
  color: var(--text);
  min-height: 100vh;
}

.backdrop {
  position: fixed;
  inset: auto;
  pointer-events: none;
  filter: blur(24px);
  opacity: 0.28;
}

.backdrop-a {
  width: 22rem;
  height: 22rem;
  top: 4rem;
  right: -4rem;
  background: radial-gradient(circle, rgba(255, 184, 111, 0.24), transparent 60%);
}

.backdrop-b {
  width: 28rem;
  height: 28rem;
  left: -6rem;
  bottom: -7rem;
  background: radial-gradient(circle, rgba(126, 203, 255, 0.24), transparent 62%);
}

.shell {
  position: relative;
  left: calc((100vw - 100%) / 2);
  width: min(1380px, calc(100vw - 2rem));
  margin: 0.75rem auto 2rem;
  display: grid;
  gap: var(--space-panel);
}

.panel {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.018), transparent 42%),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: var(--pad-panel);
}

.hero {
  background: var(--panel-strong);
}

.hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-section) 1rem;
  /* Horizontal inset matches .panel so the app title left-aligns with every
     section title below it (it used to sit 3.2px to their right). */
  padding: 0.8rem var(--pad-panel);
}

.hero-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.hero-brand .eyebrow {
  margin: 0;
}

.hero-title {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  font: var(--text-title);
  letter-spacing: 0.01em;
}

.version-tag {
  font: var(--text-meta);
  font-weight: 700;
  color: var(--accent);
  background: rgba(158, 227, 125, 0.08);
  border: 1px solid rgba(158, 227, 125, 0.25);
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

.version-tag:hover {
  background: rgba(158, 227, 125, 0.18);
  border-color: rgba(158, 227, 125, 0.5);
}

.eyebrow {
  margin: 0 0 0.35rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font: var(--text-meta);
  font-weight: 700;
}

h1,
h2,
h3 {
  font: var(--text-title);
  margin: 0;
}

h1 {
  max-width: 26ch;
}

.subtitle {
  margin: 0.45rem 0 0;
  max-width: 64ch;
  color: var(--muted);
  font: var(--text-body);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1 1 auto;
  justify-content: flex-end;
}

.hero-stat {
  flex: 0 1 auto;
  min-width: 116px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--pad-card-compact);
}

.hero-stat-link {
  appearance: none;
  color: inherit;
  font: var(--text-body);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}

.hero-stat-link:hover {
  background: rgba(126, 203, 255, 0.1);
  border-color: rgba(126, 203, 255, 0.32);
}

.hero-stat-link:active {
  transform: translateY(1px);
}

.hero-stat-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

#currentlyPlayingPanel {
  scroll-margin-top: 0.75rem;
}

.hero-stat span {
  display: block;
  font: var(--text-meta);
  color: var(--muted);
  margin-bottom: var(--space-stack);
}

.hero-stat strong {
  font: var(--text-item);
}

.backloggd-opinions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 0.6rem;
  margin-top: 0.7rem;
}

.backloggd-opinion {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
}

.backloggd-opinion.is-clickable {
  cursor: pointer;
}

.backloggd-opinion.is-clickable:hover {
  border-color: var(--accent);
}

.backloggd-opinion.is-clickable:focus {
  outline: none;
}

.backloggd-opinion.is-clickable:focus-visible {
  border-color: var(--accent-3);
  box-shadow: inset 0 0 0 1px var(--accent-3);
}

.backloggd-opinion-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.backloggd-person {
  color: var(--text);
  font: var(--text-item);
}

.backloggd-rating {
  color: var(--accent);
  font: var(--text-meta);
}

.backloggd-status {
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font: var(--text-meta);
}

.backloggd-status.is-completed,
.backloggd-status.is-mastered {
  color: #7ddca4;
}

.backloggd-status.is-abandoned {
  color: #f2937f;
}

.backloggd-status.is-shelved {
  color: #f0c076;
}

.backloggd-review {
  margin: 0;
  padding-left: 0.7rem;
  border-left: 2px solid var(--line);
  color: var(--text);
  font: var(--text-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.backloggd-review-link {
  color: var(--muted);
  font: var(--text-meta);
}

.finish-note {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font: var(--text-meta);
}

.finish-board {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: finish;
}

.finish-row {
  border: 1px solid var(--line);
  border-radius: 0.6rem;
}

.finish-row,
.finish-link {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
}

.finish-link {
  padding: 0;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.finish-row:has(.finish-link) {
  padding: 0.5rem 0.7rem;
}

.finish-link:hover .finish-name,
.finish-link:focus-visible .finish-name {
  color: var(--accent);
  text-decoration: underline;
}

.finish-place {
  min-width: 1.6rem;
  color: var(--muted);
  font: var(--text-meta);
}

.finish-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: var(--text-body);
}

.finish-count {
  font: var(--text-item);
}

.milestone-feed {
  display: flex;
  flex-direction: column;
  margin-top: 0.7rem;
}

.milestone-feed.is-scrollable {
  max-height: var(--milestone-visible-height, 45rem);
  overflow-y: auto;
  padding-right: 0.25rem;
  overscroll-behavior: contain;
  scrollbar-color: rgba(126, 203, 255, 0.36) rgba(255, 255, 255, 0.04);
  scrollbar-width: thin;
}

.milestone-feed.is-scrollable::-webkit-scrollbar {
  width: 8px;
}

.milestone-feed.is-scrollable::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}

.milestone-feed.is-scrollable::-webkit-scrollbar-thumb {
  background: rgba(126, 203, 255, 0.36);
  border-radius: 999px;
}

.milestone-row {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 4.5rem 1.875rem minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
  min-height: 3.25rem;
  padding: 0.5rem 0.2rem;
}

.milestone-row + .milestone-row {
  border-top: 1px solid var(--line);
}

.milestone-row.is-player-context {
  grid-template-columns: 4.5rem minmax(0, 1fr);
}

.milestone-date {
  color: var(--muted);
  font: var(--text-meta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.milestone-project-logo {
  width: 1.875rem;
  height: 1.875rem;
  flex: 0 0 auto;
}

.milestone-project-logo img {
  display: block;
  width: 100%;
  height: 100%;
}

.milestone-user-avatar {
  display: grid;
  place-items: center;
}

.milestone-user-avatar .trophy-avatar {
  width: 1.875rem;
  height: 1.875rem;
}

.milestone-row.is-clickable {
  cursor: pointer;
  border-radius: 8px;
}

.milestone-row.is-clickable:hover,
.milestone-row.is-clickable:focus-visible {
  background: rgba(255, 255, 255, 0.035);
  outline: none;
}

.milestone-copy {
  min-width: 0;
}

.milestone-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15rem 0.45rem;
}

.milestone-copy h3 {
  margin: 0;
  font: var(--text-item);
  text-wrap: pretty;
}

.milestone-copy p {
  margin: 0.12rem 0 0;
  color: var(--muted);
  font: var(--text-meta);
}

.milestone-type {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.08rem 0.38rem;
  font: var(--text-micro);
  font-weight: 700;
  white-space: nowrap;
}

.milestone-type.is-personal {
  color: #c9b6ff;
  background: rgba(184, 155, 255, 0.14);
}

.milestone-type.is-session {
  color: oklch(87% 0.095 28);
  background: oklch(31% 0.065 28);
}

.milestone-type.is-personal-week {
  color: oklch(88% 0.1 160);
  background: oklch(30% 0.055 160);
}

.milestone-type.is-group,
.milestone-type.is-activity {
  color: var(--accent-3);
  background: rgba(126, 203, 255, 0.12);
}

.milestone-type.is-trophies {
  color: #e3cd8f;
  background: rgba(212, 192, 138, 0.12);
}

.milestone-type.is-games,
.milestone-type.is-sessions {
  color: var(--accent);
  background: rgba(158, 227, 125, 0.11);
}

.milestone-type.is-project {
  color: #ff91f3;
  background: rgba(255, 58, 235, 0.12);
}

@media (max-width: 560px) {
  .milestone-feed.is-scrollable {
    padding-right: 0;
    scrollbar-width: none;
  }

  .milestone-feed.is-scrollable::-webkit-scrollbar {
    display: none;
  }

  .milestone-row {
    grid-template-columns: 1.875rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    gap: 0.2rem 0.625rem;
    min-height: 0;
    padding: 0.65rem 0.1rem;
  }

  .milestone-date {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .milestone-project-logo,
  .milestone-user-avatar {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
  }

  .milestone-copy {
    grid-column: 2;
    grid-row: 2;
  }

  .milestone-heading {
    align-items: flex-start;
    gap: 0.3rem 0.45rem;
  }

  .milestone-copy h3 {
    flex: 1 1 8rem;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .milestone-copy p {
    margin-top: 0.25rem;
    font: var(--text-body);
  }

  .milestone-row.is-player-context {
    grid-template-columns: minmax(0, 1fr);
  }

  .milestone-row.is-player-context .milestone-date,
  .milestone-row.is-player-context .milestone-copy {
    grid-column: 1;
  }
}

.summary-grid,
.grid-two {
  display: grid;
  gap: 0.7rem;
}

.summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.summary-card {
  padding: 0.65rem 0.8rem;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.summary-card span {
  display: block;
  color: var(--muted);
  font: var(--text-meta);
  margin-bottom: 0.25rem;
}

.summary-card strong {
  display: block;
  font: var(--text-title);
}

.grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.section-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: var(--space-section);
}

.section-head .eyebrow {
  margin: 0;
}

.section-title {
  color: var(--text);
  font: var(--text-title);
}

.panel-status {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.75rem;
  padding: var(--pad-card);
  border-radius: 10px;
  background: rgba(126, 203, 255, 0.08);
  color: var(--muted);
  font: var(--text-meta);
}

.panel-status[hidden] {
  display: none;
}

.panel-status > span:not(.panel-status-skeleton) {
  display: grid;
  gap: var(--space-stack);
  min-width: 0;
}

.panel-status strong {
  color: var(--text);
  font: var(--text-body);
  font-weight: 700;
}

.panel-status small {
  color: var(--muted);
  font: var(--text-meta);
}

.panel-status.is-error {
  background: rgba(255, 123, 114, 0.1);
}

.panel-status.is-error strong {
  color: var(--danger);
}

.hero-status {
  flex: 1 0 100%;
  margin: 0;
}

.panel-status-action {
  min-height: 2.25rem;
  margin-left: auto;
  border: 0;
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  background: rgba(126, 203, 255, 0.16);
  color: var(--accent-3);
  font: var(--text-meta);
  font-weight: 700;
  cursor: pointer;
}

.panel-status-action:hover {
  background: rgba(126, 203, 255, 0.24);
}

.panel-status-action:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.panel-status-skeleton {
  display: grid;
  gap: 0.2rem;
  width: 3.5rem;
}

.panel-status-skeleton i {
  display: block;
  height: 4px;
  border-radius: 4px;
  background: rgba(126, 203, 255, 0.24);
  animation: status-pulse 1.2s ease-in-out infinite alternate;
}

.panel-status-skeleton i:nth-child(2) {
  width: 78%;
}

.panel-status-skeleton i:nth-child(3) {
  width: 58%;
}

.section-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  min-width: 0;
}

#statsPanel > .section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0.75rem;
}

#statsPanel > .section-head .section-tools {
  width: 100%;
  justify-content: stretch;
}

.subpanel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.game-search {
  appearance: none;
  flex: 0 1 220px;
  min-width: 0;
  padding: var(--pad-chip);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(5, 13, 23, 0.58);
  color: var(--text);
  font: var(--text-meta);
}

.game-search::placeholder {
  color: var(--muted);
}

.game-search:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.collapse-btn {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

.collapse-btn:hover,
.collapse-btn:focus-visible {
  border-color: rgba(126, 203, 255, 0.32);
  background: rgba(126, 203, 255, 0.1);
  color: var(--text);
}

.collapse-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.collapse-btn span {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--dur-1) var(--ease-out);
}

.collapsible-panel.is-collapsed > .section-head,
.collapsible-panel.is-collapsed > .subpanel-head {
  margin-bottom: 0;
}

.collapsible-panel.is-collapsed > .collapse-body {
  display: none;
}

.collapsible-panel.is-collapsed > .section-head .section-tools > :not(.collapse-btn) {
  display: none;
}

.collapsible-panel.is-collapsed > .section-head .collapse-btn span,
.collapsible-panel.is-collapsed > .subpanel-head .collapse-btn span {
  transform: rotate(-45deg);
}

.stack,
.list-grid,
.leaderboard,
.timeline,
.friends-table,
.trophy-feed {
  display: grid;
  gap: 0.5rem;
}

/* Pin the single-column lists to minmax(0, 1fr) so a wide nowrap row (avatar +
   name + badges + value pill) can't grow the implicit auto track past its
   container and overflow on narrow screens. */
.stack,
.leaderboard,
.timeline,
.friends-table,
.trophy-feed {
  grid-template-columns: minmax(0, 1fr);
}

.list-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.gallery-strip {
  display: flex;
  gap: 0.55rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.2rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.gallery-strip::-webkit-scrollbar {
  height: 8px;
}

.gallery-strip::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}

.gallery-strip::-webkit-scrollbar-thumb {
  background: rgba(126, 203, 255, 0.26);
  border-radius: 999px;
}

.gallery-card {
  appearance: none;
  position: relative;
  flex: 0 0 clamp(132px, 17vw, 190px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0;
  background: var(--panel-strong);
  color: var(--text);
  cursor: pointer;
  scroll-snap-align: start;
}

.gallery-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-1) var(--ease-out);
}

.gallery-card:hover img,
.gallery-card:focus-visible img {
  transform: scale(1.035);
}

/* Inset ring: .gallery-strip is an overflow scroller, so an outset one is clipped. */
.gallery-card:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -2px;
}

.gallery-card-meta {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.36rem 0.45rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
  color: var(--text);
  font: var(--text-meta);
}

.gallery-card-meta strong,
.gallery-card-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-card-meta strong {
  font-weight: 800;
}

.gallery-card-play {
  position: absolute;
  top: 0.4rem;
  right: 0.45rem;
  padding: 0.14rem 0.42rem;
  border-radius: 999px;
  background: rgba(5, 11, 18, 0.68);
  color: rgba(231, 238, 247, 0.92);
  font: var(--text-meta);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.live-card,
.game-card,
.friend-row,
.event-row,
.leader-row {
  background: var(--panel-strong);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: var(--pad-card);
}

.rank-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--panel-strong);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: var(--pad-card-compact);
}

.rank-num {
  flex: 0 0 auto;
  min-width: 1.4rem;
  font: var(--text-meta);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.26);
}

.rank-body {
  display: grid;
  gap: var(--space-stack);
  flex: 1 1 auto;
  min-width: 0;
}

.rank-body strong {
  display: block;
  font: var(--text-item);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-sub {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  font: var(--text-meta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.name-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.name-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Curated "сетевая дрочильня" mark next to a game's name in the top. */
.grind-badge {
  flex: 0 0 auto;
  font: var(--text-meta);
  line-height: 1;
  cursor: default;
  filter: saturate(0.8);
  opacity: 0.85;
}

.plat-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  font: var(--text-meta);
  font-weight: 800;
  padding: 0.12rem 0.42rem;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: default;
  vertical-align: middle;
}

.plat-badge-logo {
  width: 1.75rem;
  height: 0.58rem;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
}

.plat-badge.psn {
  background: rgba(0, 112, 204, 0.16);
  border-color: rgba(0, 112, 204, 0.42);
  color: #4da3e6;
}

.plat-badge.steam {
  background: rgba(102, 192, 244, 0.16);
  border-color: rgba(102, 192, 244, 0.34);
  color: #66c0f4;
}

.plat-badge.nintendo {
  background: rgba(230, 0, 18, 0.16);
  border-color: rgba(230, 0, 18, 0.34);
  color: #ff5b66;
}

.plat-badge.xbox {
  background: rgba(16, 124, 16, 0.18);
  border-color: rgba(82, 196, 82, 0.36);
  color: #79c83d;
}

.plat-badge.ps3 {
  background: rgba(184, 155, 255, 0.16);
  border-color: rgba(184, 155, 255, 0.34);
  color: #b89bff;
}

.plat-badge.psvita {
  background: rgba(79, 209, 197, 0.16);
  border-color: rgba(79, 209, 197, 0.34);
  color: #4fd1c5;
}

.platform-inline-badge {
  margin: 0;
}

.rank-row .value-pill {
  flex: 0 0 auto;
}

/* Compound selector so it outranks the later .avatar rule; otherwise the small
   list avatar silently renders at the full 36px. */
.avatar.avatar-sm {
  width: 30px;
  height: 30px;
}

.live-card-head,
.game-card-head,
.friend-row-head,
.leader-row-head {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: start;
}

.status-pill,
.trophy-count-pill,
.value-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-chip);
  border-radius: 999px;
  padding: var(--pad-chip);
  font: var(--text-meta);
  font-weight: 700;
  white-space: nowrap;
  flex: 0 0 auto;
  background: rgba(126, 203, 255, 0.12);
  color: var(--accent-3);
}

.trophy-count-pill {
  background: rgba(212, 192, 138, 0.1);
  color: #cdbd8c;
}

.status-pill.online {
  background: rgba(158, 227, 125, 0.12);
  color: var(--accent);
}

.status-pill.offline {
  background: rgba(255, 123, 114, 0.12);
  color: var(--danger);
}

.meta-line,
.players-line {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Same chip as .status-pill / .value-pill — they co-occur inside one card, so
   they share one geometry instead of differing by fractions of a pixel. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-chip);
  border-radius: 999px;
  padding: var(--pad-chip);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font: var(--text-meta);
}

.platform-icon {
  width: 1.45rem;
  height: 0.72rem;
  object-fit: contain;
  object-position: center;
  vertical-align: -1px;
  margin: 0 0.12rem;
  flex: none;
}

.bar-row {
  display: grid;
  gap: 0.45rem;
}

.bar-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

.bar-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font: var(--text-body);
}

.leaderboard {
  counter-reset: leaderboard;
}

.stats-leaderboard {
  max-height: 37rem; /* 10 rows at 3.25rem plus 9 leaderboard gaps. */
  overflow-y: auto;
  padding-right: 0.25rem;
  overscroll-behavior: contain;
  scrollbar-color: rgba(126, 203, 255, 0.36) rgba(255, 255, 255, 0.04);
  scrollbar-width: thin;
}

.stats-leaderboard::-webkit-scrollbar {
  width: 8px;
}

.stats-leaderboard::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}

.stats-leaderboard::-webkit-scrollbar-thumb {
  background: rgba(126, 203, 255, 0.36);
  border-radius: 999px;
}

.stats-leaderboard .rank-row {
  min-height: 3.25rem;
}

.leader-row {
  display: grid;
  gap: 0.55rem;
}

.leader-row::before {
  counter-increment: leaderboard;
  content: counter(leaderboard, decimal-leading-zero);
  color: rgba(255, 255, 255, 0.26);
  font: var(--text-meta);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.event-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.timeline.is-scrollable {
  max-height: 430px;
  overflow-y: auto;
  padding-right: 0.25rem;
  scrollbar-color: rgba(126, 203, 255, 0.36) rgba(255, 255, 255, 0.04);
  scrollbar-width: thin;
}

.timeline.is-scrollable::-webkit-scrollbar {
  width: 8px;
}

.timeline.is-scrollable::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}

.timeline.is-scrollable::-webkit-scrollbar-thumb {
  background: rgba(126, 203, 255, 0.36);
  border-radius: 999px;
}

.event-row time {
  flex: 0 0 auto;
  color: var(--muted);
  font: var(--text-meta);
  font-variant-numeric: tabular-nums;
}

.event-lines {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.event-text {
  min-width: 0;
  font: var(--text-body);
}

.search-wrap {
  display: grid;
  gap: 0.35rem;
  min-width: 220px;
}

.search-wrap span {
  color: var(--muted);
  font: var(--text-meta);
}

.search-wrap input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.75rem 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: var(--text-body);
}

.friend-row {
  display: grid;
  gap: 0.65rem;
}

.friend-name-wrap {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  flex: 1 1 auto;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Preserve transparent profile artwork instead of forcing it into a framed
   circle. Initial-only fallbacks keep the standard avatar chip. */
.avatar.person-avatar.has-img,
.avatar.partner-avatar.has-img {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.avatar.person-avatar.has-img img,
.avatar.partner-avatar.has-img img {
  object-fit: contain;
}

.game-icon {
  position: relative;
  display: grid;
  place-items: center;
  border: 0;
  color: var(--muted);
  font: var(--text-meta);
  font-weight: 800;
}

/* A shared game signature. The ring sits above the artwork so it also covers
   thin borders already baked into SteamGridDB icons. */
.game-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: linear-gradient(135deg, #12a9dc 0%, #347ad4 48%, #6840b3 100%);
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.muted {
  color: var(--muted);
}

.empty {
  color: var(--muted);
  padding: 1rem 0;
}

/* Trophy feed — grouped by person + game + day (Stratege-style sessions) */
.trophy-group {
  background: var(--panel-strong);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: var(--pad-card);
}

.trophy-group-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.trophy-avatar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--text-item);
  font-weight: 800;
  color: #f4f9ff;
  background: hsl(var(--hue, 210) 42% 32%);
  border: 1px solid hsl(var(--hue, 210) 45% 48%);
}

.trophy-avatar.has-img {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.trophy-avatar.has-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.trophy-group-meta {
  min-width: 0;
  font: var(--text-body);
}

.trophy-group-who {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trophy-group-who strong {
  color: var(--accent-3);
  font-weight: 700;
}

.trophy-group-player-link.is-clickable,
.trophy-avatar.is-clickable {
  cursor: pointer;
}

.trophy-group-player-link.is-clickable:hover strong {
  color: var(--text);
  text-decoration: underline;
}

.trophy-group-player-link.is-clickable:focus-visible,
.trophy-avatar.is-clickable:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.trophy-group-sub {
  font: var(--text-meta);
  color: var(--muted);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trophy-group-head.is-actor-hidden {
  padding-left: 0.15rem;
}

.trophy-group-head.is-actor-hidden .trophy-group-sub {
  color: var(--text);
  font-weight: 700;
}

.trophy-group-game {
  color: var(--text);
  font-weight: 600;
}

.trophy-group-rows {
  display: grid;
  gap: 0.1rem;
}

.trophy-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.4rem 0.3rem;
  border-radius: 10px;
  min-width: 0;
}

.trophy-row.is-platinum {
  border: 1px solid rgba(159, 212, 255, 0.34);
  background:
    linear-gradient(90deg, rgba(126, 203, 255, 0.16), rgba(158, 227, 125, 0.08) 58%, rgba(255, 255, 255, 0.03));
  box-shadow: 0 0 22px rgba(126, 203, 255, 0.12);
}

.trophy-row + .trophy-row {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.trophy-time {
  flex: 0 0 auto;
  width: 2.6rem;
  padding-top: 0.7rem;
  font: var(--text-meta);
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.trophy-feed.is-scrollable {
  max-height: min(1280px, 80vh);
  overflow-y: auto;
  padding-right: 0.25rem;
  scrollbar-color: rgba(126, 203, 255, 0.36) rgba(255, 255, 255, 0.04);
  scrollbar-width: thin;
}

.trophy-feed.is-scrollable::-webkit-scrollbar {
  width: 8px;
}

.trophy-feed.is-scrollable::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}

.trophy-feed.is-scrollable::-webkit-scrollbar-thumb {
  background: rgba(126, 203, 255, 0.36);
  border-radius: 999px;
}

.trophy-more {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(126, 203, 255, 0.22);
  border-radius: 12px;
  background: rgba(126, 203, 255, 0.06);
  color: var(--accent-3);
  font: var(--text-body);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

.trophy-more:hover {
  background: rgba(126, 203, 255, 0.12);
  border-color: rgba(126, 203, 255, 0.4);
}

.trophy-more:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-color: rgba(126, 203, 255, 0.4);
  background: rgba(126, 203, 255, 0.12);
}

.trophy-more:disabled {
  cursor: wait;
  opacity: 0.55;
}

.trophy-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.trophy-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trophy-emoji {
  font: var(--text-title);
}

.trophy-body {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0.1rem;
}

.trophy-name-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.trophy-grade {
  flex: 0 0 auto;
}

.trophy-grade-platinum {
  width: 1em;
  height: 1.22em;
  background: url("/trophy-platinum.png") center / contain no-repeat;
  transform: translateY(0.05em);
}

.trophy-name {
  font: var(--text-item);
  color: var(--accent-3);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trophy-rarities {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.trophy-rarity {
  font: var(--text-meta);
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Second figure: Stratege community rarity — quieter than the PSN one. */
.trophy-rarity-community {
  font: var(--text-meta);
  color: var(--muted);
  opacity: 0.62;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.trophy-detail {
  font: var(--text-body);
  color: var(--muted);
  margin: 0.15rem 0 0.05rem;
}

/* Hidden-trophy description: blurred until the reader taps to reveal. */
.trophy-detail.is-spoiler {
  display: inline-block;
  filter: blur(4px);
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
  /* The plate fades out with the blur; transitioning filter alone snapped it. */
  transition: filter var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}

.trophy-detail.is-spoiler.is-revealed {
  filter: none;
  background: transparent;
  box-shadow: none;
  user-select: text;
}

.trophy-detail.is-spoiler:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.stats-toggles {
  display: grid;
  grid-template-columns: minmax(10rem, auto) minmax(28rem, 1fr) minmax(20rem, auto);
  grid-template-areas: "scope platform period";
  align-items: end;
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
}

.filter-group {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
  width: 100%;
}

.filter-group-scope {
  grid-area: scope;
}

.filter-group-platform {
  grid-area: platform;
}

.filter-group-period {
  grid-area: period;
}

@keyframes status-pulse {
  to {
    opacity: 0.38;
  }
}

.stats-toggles .seg {
  min-width: 0;
  width: 100%;
}

#scopeTabs .seg-btn,
#periodTabs .seg-btn {
  flex: 1 1 0;
}

#platformTabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.seg {
  display: inline-flex;
  max-width: 100%;
  overflow-x: auto;
  padding: 0.25rem;
  gap: 0.2rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  scrollbar-width: none;
}

.seg::-webkit-scrollbar {
  display: none;
}

.seg-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  background: transparent;
  color: var(--muted);
  font: var(--text-body);
  font-weight: 700;
  white-space: nowrap;
  min-height: 2.25rem;
  /* Includes border-color/box-shadow: .platform-filter-btn.is-active animates all
     four at once, so omitting them snapped the border while the fill faded. */
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}

.seg-btn:hover {
  color: var(--text);
}

.seg-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}

.seg-btn.is-active {
  background: var(--accent-3);
  color: #0b1c2b;
}

.period-history-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
}

.period-history-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.platform-seg {
  gap: 0.25rem;
}

.platform-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  /* Match the plain .seg-btn min-height (2.25rem) so the platform group is the
     same height as the Группа/Период toggles beside it — the logo (0.74rem +
     padding) fits with room to spare, 2.5rem just made this group 4px taller. */
  min-height: 2.25rem;
  padding: 0.34rem 0.56rem;
  border: 1px solid transparent;
}

.platform-filter-btn .plat-badge-logo {
  display: block;
  width: 2.1rem;
  height: 0.74rem;
  opacity: 0.66;
  transition: opacity var(--dur-1) var(--ease-out);
}

.platform-filter-btn:hover .plat-badge-logo,
.platform-filter-btn.is-active .plat-badge-logo {
  opacity: 1;
}

.platform-filter-btn.platform-all {
  min-width: 0;
  padding-inline: 0.8rem;
}

.stats-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.75rem;
  border-block: 1px solid var(--line);
}

.stats-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  color: var(--muted);
  font: var(--text-meta);
}

.stats-total + .stats-total {
  border-left: 1px solid var(--line);
}

.stats-total strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font: var(--text-item);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-filter-btn.platform-psn.is-active {
  background: rgba(0, 112, 204, 0.2);
  border-color: rgba(0, 112, 204, 0.54);
  box-shadow: inset 0 0 0 1px rgba(0, 112, 204, 0.2);
}

.platform-filter-btn.platform-ps3.is-active {
  background: rgba(184, 155, 255, 0.2);
  border-color: rgba(184, 155, 255, 0.48);
  box-shadow: inset 0 0 0 1px rgba(184, 155, 255, 0.18);
}

.platform-filter-btn.platform-psvita.is-active {
  background: rgba(79, 209, 197, 0.2);
  border-color: rgba(79, 209, 197, 0.48);
  box-shadow: inset 0 0 0 1px rgba(79, 209, 197, 0.18);
}

.platform-filter-btn.platform-steam.is-active {
  background: rgba(102, 192, 244, 0.2);
  border-color: rgba(102, 192, 244, 0.48);
  box-shadow: inset 0 0 0 1px rgba(102, 192, 244, 0.18);
}

.platform-filter-btn.platform-nintendo.is-active {
  background: rgba(230, 0, 18, 0.2);
  border-color: rgba(230, 0, 18, 0.48);
  box-shadow: inset 0 0 0 1px rgba(230, 0, 18, 0.18);
}

.platform-filter-btn.platform-xbox.is-active {
  background: rgba(16, 124, 16, 0.22);
  border-color: rgba(82, 196, 82, 0.5);
  box-shadow: inset 0 0 0 1px rgba(82, 196, 82, 0.18);
}

.stats-grid {
  margin-top: 1rem;
}

#statsContent[hidden] {
  display: none;
}

.subpanel {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: var(--space-section) 0 0;
  display: grid;
  gap: var(--space-section);
  align-content: start;
}

.byday-panel {
  margin-top: 1rem;
}

.byday-panel[hidden] {
  display: none;
}

.byday {
  --byday-col-width: 58px;
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
  min-height: 154px;
  overflow-x: auto;
  padding: 0.15rem 0 0.35rem;
  scrollbar-gutter: stable;
  scrollbar-color: rgba(126, 203, 255, 0.36) rgba(255, 255, 255, 0.04);
  scrollbar-width: thin;
}

.byday::-webkit-scrollbar {
  height: 8px;
}

.byday::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}

.byday::-webkit-scrollbar-thumb {
  background: rgba(126, 203, 255, 0.36);
  border-radius: 999px;
}

.byday-col {
  flex: 1 0 var(--byday-col-width);
  display: grid;
  gap: 0.4rem;
  justify-items: center;
  grid-template-rows: 1.1rem 110px auto;
  align-content: end;
  min-width: var(--byday-col-width);
}

.byday-col.is-clickable {
  cursor: pointer;
  border-radius: 10px;
}

.byday-col.is-clickable:hover .byday-bar-track,
.byday-col.is-clickable:focus-visible .byday-bar-track {
  box-shadow: 0 0 0 2px rgba(126, 203, 255, 0.42);
}

.byday-col.is-clickable:focus-visible {
  outline: none;
}

.byday-value {
  font: var(--text-meta);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  max-width: 100%;
  min-height: 1.1rem;
  text-align: center;
}

.byday-value--zero {
  visibility: hidden;
}

.byday-bar-track {
  display: flex;
  align-items: flex-end;
  height: 110px;
  width: min(100%, 48px);
  justify-self: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.byday-bar {
  width: 100%;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}

.byday-label {
  font: var(--text-meta);
  color: var(--muted);
  white-space: nowrap;
  text-align: center;
}

.byday-weekday {
  display: block;
  font: var(--text-meta);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 1120px) {
  .summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* minmax(0, 1fr), not 1fr: a bare 1fr track resolves to minmax(auto, 1fr),
     whose auto floor lets nowrap leaderboard rows blow the column past the
     panel and get clipped by the panel's overflow:hidden. */
  .grid-two {
    grid-template-columns: minmax(0, 1fr);
  }

  .stats-toggles {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "scope period"
      "platform platform";
  }
}

@media (max-width: 900px) {
  .stats-toggles {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .shell {
    width: min(100vw - 1rem, 100%);
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Even 2-up grid instead of a right-aligned flex row that strands the last
     stat card awkwardly off to the side. */
  .hero-meta {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-stat {
    min-width: 0;
  }

  .section-head {
    flex-direction: column;
    align-items: stretch;
  }

  .section-tools {
    justify-content: space-between;
  }

  #statsPanel > .section-head {
    display: flex;
  }

  #statsPanel > .section-head .section-tools {
    width: auto;
  }

  .stats-toggles {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "scope"
      "platform"
      "period";
    gap: 0.65rem;
    width: 100%;
    max-width: 100%;
  }

  /* Desktop padding (0.85rem per side) + the clock icon make the four nowrap
     period buttons wider than the phone viewport, scrolling «Всё время» off
     the edge. */
  #periodTabs .seg-btn,
  .detail-period .seg-btn {
    padding: 0.45rem 0.25rem;
  }

  /* Same reason inside the player modal: give the toggle the full row so the
     four buttons fit instead of scrolling «Всё время» past the edge. */
  .detail-period .seg {
    width: 100%;
    justify-content: space-between;
  }

  /* The scope toggle splits that row into equal halves, like the main page's
     own Все/GWM tabs — space-between alone would strand «GWM» at the edge. */
  .detail-scope-seg .seg-btn {
    flex: 1 1 0;
  }

  .period-history-icon {
    display: none;
  }

  .platform-seg {
    gap: 0.2rem;
  }

  .platform-seg .platform-filter-btn {
    width: 100%;
    min-width: 0;
    padding: 0.34rem 0.25rem;
  }

  .platform-filter-btn .plat-badge-logo {
    width: min(2.35rem, 100%);
  }

  .collapsible-panel > .section-head {
    flex-direction: row;
    align-items: center;
  }

  .collapsible-panel > .section-head .section-tools {
    margin-left: auto;
    justify-content: flex-end;
  }

  .gallery-card {
    flex-basis: calc((100% - 0.55rem) / 2);
  }

  .gallery-strip {
    touch-action: pan-x;
  }

  /* Stack card heads, but keep pills hugging their content instead of
     stretching to full width. */
  .live-card-head,
  .game-card-head,
  .friend-row-head,
  .leader-row-head {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Reclaim a little horizontal room for the (ellipsized) name on phones. */
  .rank-row {
    gap: 0.5rem;
    padding: 0.52rem 0.6rem;
  }

  .rank-num {
    min-width: 1.1rem;
  }
}

.app-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  justify-content: center;
  margin: 1.25rem auto 2rem;
  padding: 0 1rem;
  text-align: center;
}

.footer-note {
  margin: 0;
  color: rgba(148, 171, 194, 0.72);
  font: var(--text-meta);
  font-weight: 600;
}

.footer-status-link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  color: var(--accent-3);
  font: var(--text-meta);
  text-decoration: none;
}

.footer-status-link:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.footer-status-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: 4px;
}

/* Game-detail modal (a generic detail shell — a player view will reuse it). */
[data-open-game] {
  cursor: pointer;
}

.detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Horizontal gutter shrinks on a phone: it is the outermost of three nested
     insets, and the least useful one once the dialog reads as a sheet. */
  padding: clamp(1rem, 4vh, 3rem) clamp(0.5rem, 0.14rem + 1.6vw, 1rem);
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 15%, rgba(33, 71, 105, 0.18), transparent 44rem),
    rgba(3, 8, 14, 0.74);
  backdrop-filter: blur(12px) saturate(0.72);
  animation: fade-in 180ms ease both;
}

.detail-overlay[hidden] {
  display: none;
}

.detail-overlay.is-gallery-viewer {
  align-items: center;
  padding: clamp(0.5rem, 2vh, 1rem);
  overflow: hidden;
}

body.modal-open {
  overflow: hidden;
}

.detail-dialog {
  /* One inset governs the dialog's content padding, the close/share controls,
     and the hero's negative margin — which is exactly why they stay aligned.
     Clamped rather than media-overridden so the modal stops eating a fifth of
     a 375px screen. */
  --detail-control-inset: clamp(0.85rem, 0.55rem + 1.4vw, 1.25rem);
  --detail-control-size: 2rem;
  --detail-control-gap: 0.35rem;
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin: auto;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(22, 40, 61, 0.42), transparent 38%),
    rgba(8, 18, 30, 0.985);
  border: 1px solid rgba(165, 210, 255, 0.17);
  border-radius: 22px;
  box-shadow: 0 36px 110px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(0, 0, 0, 0.24);
  padding: var(--detail-control-inset);
  animation: rise-in var(--dur-2) var(--ease-out) both;
}

.detail-dialog:focus {
  outline: none;
}

.detail-nav {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2rem;
  margin: 0 2.6rem 0.8rem 0;
}

.detail-nav[hidden] {
  display: none;
}

.detail-back {
  min-height: 2rem;
  border: 1px solid rgba(126, 203, 255, 0.18);
  border-radius: 999px;
  padding: 0.35rem 0.55rem;
  background: rgba(5, 13, 23, 0.58);
  color: var(--accent-3);
  font: var(--text-meta);
  font-weight: 700;
  cursor: pointer;
}

.detail-back:hover {
  background: rgba(126, 203, 255, 0.18);
}

.detail-back:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.detail-overlay.is-gallery-viewer .detail-dialog {
  width: min(96vw, calc(177.78vh - 6.2rem), 1760px);
  width: min(96vw, calc(177.78dvh - 6.2rem), 1760px);
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
}

.detail-close {
  position: absolute;
  top: var(--detail-control-inset);
  right: var(--detail-control-inset);
  width: var(--detail-control-size);
  height: var(--detail-control-size);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(4, 11, 19, 0.58);
  color: transparent;
  line-height: 0;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}

.detail-overlay.is-gallery-viewer .detail-close {
  top: 1.4rem;
  right: 1.4rem;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-color: var(--line);
  background: rgba(5, 11, 18, 0.62);
  backdrop-filter: blur(10px);
}

.detail-close::before,
.detail-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.78rem;
  height: 2px;
  border-radius: 999px;
  background: var(--muted);
  transition: background var(--dur-1) var(--ease-out);
}

.detail-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.detail-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.detail-close:hover,
.detail-close:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}

/* The modal's primary escape hatch — it fell back to the UA ring while its
   sibling .detail-back carried the accent one. */
.detail-close:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.detail-overlay.is-gallery-viewer .detail-close:hover {
  border-color: rgba(126, 203, 255, 0.36);
  background: rgba(126, 203, 255, 0.14);
}

.detail-close:hover::before,
.detail-close:hover::after,
.detail-close:focus-visible::before,
.detail-close:focus-visible::after {
  background: var(--text);
}

/* Share affordance — sits just left of the close button and mirrors its shape.
   Hidden when the active detail has neither a ranked list nor an og-card. */
.detail-share {
  position: absolute;
  top: var(--detail-control-inset);
  right: calc(var(--detail-control-inset) + var(--detail-control-size) + var(--detail-control-gap));
  width: var(--detail-control-size);
  height: var(--detail-control-size);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(4, 11, 19, 0.58);
  color: var(--muted);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}

.detail-share[hidden] {
  display: none;
}

.detail-share svg {
  width: 0.95rem;
  height: 0.95rem;
}

.detail-share:hover,
.detail-share:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.detail-share:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.detail-dialog:has(.detail-game-hero) .detail-share {
  z-index: 2;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(3, 10, 18, 0.72);
  backdrop-filter: blur(12px);
}

.detail-overlay.is-gallery-viewer .detail-share {
  display: none;
}

/* Share mini-window — a small centered dialog layered above the detail modal. */
.share-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.share-sheet[hidden] {
  display: none;
}

.share-scrim {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 14, 0.6);
  backdrop-filter: blur(4px);
}

.share-panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  background:
    linear-gradient(160deg, rgba(22, 40, 61, 0.5), transparent 42%),
    rgba(9, 19, 31, 0.99);
  border: 1px solid rgba(165, 210, 255, 0.2);
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  padding: 1.35rem 1.35rem 1.45rem;
  animation: rise-in var(--dur-2) var(--ease-out) both;
}

.share-panel:focus {
  outline: none;
}

.share-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(4, 11, 19, 0.58);
  color: var(--muted);
  font: var(--text-title);
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.share-close:hover,
.share-close:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.share-close:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.share-header {
  display: grid;
  gap: 0.2rem;
  padding-right: 2rem;
}

.share-heading {
  margin: 0;
  font: var(--text-title);
  color: var(--text);
}

.share-sub {
  font: var(--text-meta);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-card-preview {
  margin-top: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  aspect-ratio: 40 / 21;
}

.share-card-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.share-note {
  margin-top: 0.55rem;
  font: var(--text-meta);
  color: var(--muted);
}

.share-actions {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
}

.share-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(126, 203, 255, 0.28);
  background: rgba(126, 203, 255, 0.1);
  color: var(--text);
  font: var(--text-item);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

.share-action:hover {
  background: rgba(126, 203, 255, 0.2);
}

.share-action:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.share-action.is-secondary {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.04);
}

.share-action.is-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
}

.detail-loading,
.detail-error {
  padding: 2rem 0.5rem;
  text-align: center;
  color: var(--muted);
}

.detail-error {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
}

.detail-error strong {
  color: var(--danger);
  font: var(--text-item);
}

.detail-error span {
  color: var(--muted);
  font: var(--text-body);
}

.detail-error .panel-status-action {
  justify-self: center;
  margin: 0.25rem 0 0;
}

.changelog .detail-title {
  margin-bottom: 1.1rem;
}

.changelog-entry {
  padding: 0.9rem 0 1rem;
  border-top: 1px solid var(--line);
}

.changelog-entry:first-of-type {
  border-top: none;
  padding-top: 0;
}

.changelog-entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  margin-bottom: 0.55rem;
}

.changelog-version {
  color: var(--accent);
  font: var(--text-item);
}

.changelog-date {
  color: var(--muted);
  font: var(--text-meta);
}

.changelog-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.3rem;
}

.changelog-list li {
  color: var(--text);
  font: var(--text-body);
}

.detail-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-right: 2.2rem;
  margin-bottom: var(--space-panel);
}

/* Title + scope toggle on one line (see renderDetailHeadRow). The toggle takes
   over the head's clearance for the absolutely-positioned close button, and
   only needs it when the back nav isn't already reserving that corner. */
.detail-head-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: var(--space-panel);
}

.detail-head-row > .detail-head,
.detail-head-row > .detail-period {
  margin-bottom: 0;
}

.detail-head-row > .detail-head {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 0;
}

.detail-head-row > .detail-period {
  flex: 0 0 auto;
}

/* With the back nav hidden the head row is the dialog's top row, so it has to
   clear the floating close button — and the share button too when the active
   detail has one, since both live in that corner. */
.detail-dialog:has(.detail-nav[hidden]) .detail-head-row {
  padding-right: calc(var(--detail-control-size) + var(--detail-control-gap));
}

.detail-dialog:has(.detail-nav[hidden]):has(.detail-share:not([hidden])) .detail-head-row {
  padding-right: calc(2 * var(--detail-control-size) + 2 * var(--detail-control-gap));
}

.detail-game-hero {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  /* Bleeds the artwork to the dialog edge, so the inset must mirror the
     dialog's padding exactly — express it, never re-type the number. */
  margin: calc(0rem - var(--detail-control-inset)) calc(0rem - var(--detail-control-inset)) var(--space-panel);
  overflow: hidden;
  border-radius: 21px 21px 0 0;
  background: linear-gradient(135deg, rgba(126, 203, 255, 0.14), rgba(7, 17, 29, 0.98));
  isolation: isolate;
}

.detail-dialog:has(.detail-game-hero) .detail-close {
  z-index: 2;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(3, 10, 18, 0.72);
  backdrop-filter: blur(12px);
}

.detail-dialog:has(.detail-game-hero) .detail-nav {
  position: absolute;
  top: var(--detail-control-inset);
  right: calc(var(--detail-control-inset) + var(--detail-control-size) + var(--detail-control-gap));
  left: var(--detail-control-inset);
  z-index: 2;
  margin: 0;
}

.detail-game-hero-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.detail-game-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(3, 9, 17, 0.9) 0%, rgba(3, 9, 17, 0.38) 52%, rgba(3, 9, 17, 0.18) 76%, rgba(3, 9, 17, 0.5) 100%),
    linear-gradient(0deg, rgba(8, 18, 30, 0.99) 0%, rgba(8, 18, 30, 0.78) 18%, transparent 64%),
    linear-gradient(180deg, rgba(3, 9, 17, 0.32), transparent 38%);
}

.detail-game-hero.has-logo-only {
  min-height: 168px;
}

.detail-game-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.9rem 2rem;
  width: 100%;
  min-width: 0;
  /* Left inset tracks the dialog's own so hero content and body content share
     one left edge; the hero bleeds past that padding, so it must re-add it. */
  padding: 4.2rem 1.6rem 1.4rem var(--detail-control-inset);
}

.detail-game-brand-main {
  flex: 1 1 320px;
  min-width: 0;
}

/* Player/identity hero: shorter than a game hero (no logo to clear) and its
   avatar sits inline with the name at the bottom edge. */
.detail-identity-hero {
  min-height: 208px;
}

.detail-identity-brand {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}

.detail-identity-brand .detail-art {
  width: 84px;
  height: 84px;
}

.detail-identity-brand .detail-art:not(.has-img) {
  border: 2px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}

.detail-identity-brand .detail-title-row {
  min-width: 0;
  padding-bottom: 0.3rem;
}

/* The crew's record, stated in the hero itself — the one large display moment
   in an interface that otherwise never exceeds small bold text. */
.detail-hero-stat {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
}

.detail-hero-ranks {
  display: grid;
  justify-items: end;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}

.detail-hero-rank {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border: 1px solid rgba(158, 227, 125, 0.34);
  border-radius: 999px;
  background: rgba(158, 227, 125, 0.14);
  color: var(--accent);
  font: var(--text-meta);
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* The overall standing is the headline rank — blue sets it apart from the
   narrower year/genre ranks below it. */
.detail-hero-rank-overall {
  border-color: rgba(126, 203, 255, 0.34);
  background: rgba(126, 203, 255, 0.14);
  color: var(--accent-3);
}

.detail-hero-rank-grind {
  border-color: rgba(255, 176, 92, 0.34);
  background: rgba(255, 176, 92, 0.14);
  color: #ffc48a;
}

.detail-hero-rank-link {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.detail-hero-rank-link:hover {
  background: rgba(158, 227, 125, 0.24);
  border-color: rgba(158, 227, 125, 0.5);
}

.detail-hero-rank-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

.detail-hero-stat-value {
  font: var(--text-display);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.7);
}

.detail-hero-stat-label {
  margin-top: 0.2rem;
  font: var(--text-meta);
  color: rgba(237, 244, 251, 0.78);
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
}

.detail-hero-stat-caption {
  font: var(--text-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(237, 244, 251, 0.62);
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
  margin-bottom: 0.15rem;
}

.detail-hero-stat-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  margin-top: 0.5rem;
}

/* Games / trophies / platinums share one type ramp so the stack reads as one unit. */
.detail-hero-stat-line {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font: var(--text-meta);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(237, 244, 251, 0.82);
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
}

.player-platinum-toggle {
  appearance: none;
  border: 0;
  border-radius: 5px;
  padding: 0.12rem 0.2rem;
  background: transparent;
  color: var(--accent-3);
  font: var(--text-meta);
  font-weight: inherit;
  text-shadow: inherit;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}

.player-platinum-toggle:hover {
  background: rgba(126, 203, 255, 0.12);
  color: var(--text);
}

.player-platinum-toggle:active {
  background: rgba(126, 203, 255, 0.18);
}

.player-platinum-toggle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* As a hero stat line the button's own `font` shorthand resets the weight and
   numeric variant, so restate them to match the 🎮/🏆 lines above it. */
.detail-hero-stat-line.player-platinum-toggle {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.player-platinum-toggle-chevron {
  width: 0.38rem;
  height: 0.38rem;
  margin-left: 0.08rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.08rem) rotate(45deg);
  transition: transform var(--dur-1) var(--ease-out);
}

.player-platinum-toggle[aria-expanded="true"] .player-platinum-toggle-chevron {
  transform: translateY(0.08rem) rotate(225deg);
}

.detail-hero-stat-icon {
  line-height: 1;
}

.detail-game-logo-link {
  display: inline-block;
  max-width: min(66%, 520px);
  border-radius: 4px;
}

.detail-game-logo-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 5px;
}

.detail-game-logo {
  display: block;
  width: auto;
  max-width: min(66%, 520px);
  max-height: 118px;
  object-fit: contain;
  object-position: left bottom;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.42));
}

.detail-game-logo-link .detail-game-logo {
  max-width: 100%;
}

.detail-game-logo + .detail-title-row,
.detail-game-logo-link + .detail-title-row {
  margin-top: 0.7rem;
}

.detail-game-hero .detail-title {
  color: var(--text);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
}

.detail-game-hero .detail-title-link:focus-visible {
  outline-color: rgba(255, 255, 255, 0.72);
}

.detail-game-hero ~ .detail-game-metadata {
  margin-top: 0;
}

/* The text column must be allowed to shrink, otherwise a long unbreakable
   title token (e.g. "ver.1.22474487139.9182958") forces the row wider than
   the dialog instead of wrapping. */
.detail-head > div {
  min-width: 0;
}

.detail-art {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(126, 203, 255, 0.12);
  color: var(--accent-3);
  font: var(--text-title);
  overflow: hidden;
}

/* Initial-only player fallbacks stay round. Real profile artwork keeps its
   transparent canvas without a frame or circular clipping. */
.detail-art.is-round {
  border-radius: 50%;
}

.detail-art.is-round.has-img {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.detail-art.is-round.has-img img {
  object-fit: contain;
}

/* Trophy icons are square — keep the PS5 trophy artwork un-rounded. */
.detail-art.is-square {
  border-radius: 0;
}

.detail-art.has-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-company-logo {
  width: min(220px, 56%);
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.detail-company-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.28));
}

/* Some IGDB logos are opaque RGB images with a white canvas despite being
   delivered as PNG. Invert + screen makes that canvas disappear against the
   dark modal while retaining the logo's original hues. True-alpha logos are
   rendered untouched. */
.detail-company-logo.is-flattened img {
  filter: invert(1) hue-rotate(180deg) drop-shadow(0 3px 8px rgba(0, 0, 0, 0.28));
  mix-blend-mode: screen;
}

.detail-company-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.detail-company-copy {
  display: grid;
  gap: 0.28rem;
}

.detail-company-founded {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  color: var(--muted);
  font: var(--text-meta);
}

.detail-company-founded strong {
  color: var(--text);
  font-weight: 700;
}

.detail-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.detail-title {
  margin: 0;
  font: var(--text-title);
  color: var(--muted);
  min-width: 0;
  overflow-wrap: anywhere;
}

.detail-title-link {
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.detail-title-link:hover,
.detail-title-link:focus-visible {
  color: var(--accent-3);
  text-decoration: underline;
}

.detail-title-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: 3px;
}

.detail-external-mark {
  margin-left: 0.22em;
  font: var(--text-meta);
  vertical-align: text-top;
}

.detail-platform {
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  font: var(--text-meta);
  font-weight: 700;
  background: rgba(126, 203, 255, 0.14);
  color: var(--accent-3);
}

.detail-platform.steam {
  background: rgba(158, 227, 125, 0.14);
  color: var(--accent);
}

.detail-platform.nintendo {
  background: rgba(230, 0, 18, 0.16);
  color: #ff5b66;
}

.detail-title-platform .plat-badge-logo {
  width: 2.25rem;
  height: 0.82rem;
}

/* Brand-favicon links (IGDB / SteamGridDB / HLTB) beside the platform pills. Rounded
   like the platform badges but kept square so the baked-in logos aren't clipped. */
.detail-service-link {
  display: inline-flex;
  flex: 0 0 auto;
  line-height: 0;
  border-radius: 6px;
}

.detail-service-logo {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 6px;
  object-fit: cover;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}

.detail-service-link:hover .detail-service-logo {
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px var(--accent-3);
}

.detail-service-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.detail-metrics,
.detail-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}

/* Every metrics row holds a variable count (2 on a game, 3 on an aggregate,
   2–3 on a player once trophies fold in), so auto-fit distributes them across
   the full width instead of leaving a dangling empty 4th column. */
.detail-metrics {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: var(--space-section);
}

.detail-aggregate-metrics {
  margin-bottom: var(--space-panel);
}

/* The player profile's own platform + period toggles, right under the hero. */
.detail-period {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: var(--space-panel);
}

.detail-period .seg.is-busy {
  opacity: 0.55;
  pointer-events: none;
}

.detail-metric,
.detail-chips .tag {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-stack);
  height: 58px;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.58rem 0.72rem;
  border: 1px solid rgba(165, 210, 255, 0.075);
  border-radius: 13px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 64%),
    var(--surface-1);
}

.detail-metric.is-total {
  background:
    linear-gradient(135deg, rgba(126, 203, 255, 0.11), rgba(158, 227, 125, 0.08)),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(126, 203, 255, 0.2);
}

.detail-metric-label {
  font: var(--text-meta);
  color: var(--muted);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-metric-value {
  font: var(--text-meta);
  font-weight: 700;
  color: var(--text);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Platinum tally folded into the Трофеи tile — a muted count with the platinum
   glyph, secondary to the total trophy figure it sits beside. */
.detail-metric-plat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  margin-left: 0.45rem;
  color: var(--muted);
  font-weight: 650;
}

.detail-metric-plat.player-platinum-toggle {
  vertical-align: baseline;
}

/* The badge sits inline beside the trophy count, so its icon must ride the text
   baseline — the default 1.18em glyph (baseline-aligned) grows the value line
   box and drops the digits ~1.4px below the neighbouring Всего/Игр tiles. */
.detail-metric-plat .platinum-icon {
  height: 0.9em;
  transform: translateY(0.1em);
}

.player-platinum-list {
  margin-bottom: 1rem;
  padding: 0.8rem;
  border: 1px solid rgba(126, 203, 255, 0.18);
  border-radius: 14px;
  background: var(--surface-1);
}

.player-platinum-list[hidden] {
  display: none;
}

.player-platinum-list-head {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.player-platinum-list-head .detail-section-title {
  margin: 0;
}

.player-platinum-list-count {
  color: var(--muted);
  font: var(--text-meta);
  font-variant-numeric: tabular-nums;
}

.player-platinum-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}

.player-platinum-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.5rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--panel-strong);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

.player-platinum-row:hover,
.player-platinum-row:focus-visible {
  border-color: rgba(126, 203, 255, 0.2);
  background: rgba(126, 203, 255, 0.08);
}

.player-platinum-row:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}

.player-platinum-art {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 9px;
  background: rgba(126, 203, 255, 0.07);
}

.player-platinum-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-platinum-art .platinum-icon {
  width: 1.35rem;
  height: 1.68rem;
}

.player-platinum-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.player-platinum-game {
  overflow: hidden;
  color: var(--text);
  font: var(--text-item);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-platinum-meta {
  overflow: hidden;
  color: var(--muted);
  font: var(--text-meta);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-gallery-strip {
  margin-bottom: 0.8rem;
}

.detail-gallery-strip .gallery-card {
  flex-basis: clamp(118px, 16vw, 164px);
}

.gallery-detail {
  display: grid;
  gap: 0.7rem;
}

.detail-overlay.is-gallery-viewer .gallery-detail {
  display: block;
  min-height: 0;
}

.gallery-detail-frame {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
}

.gallery-detail-frame img,
.gallery-detail-frame video {
  display: block;
  width: 100%;
  max-height: min(72vh, 760px);
  object-fit: contain;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.24);
}

.detail-overlay.is-gallery-viewer .gallery-detail-frame img,
.detail-overlay.is-gallery-viewer .gallery-detail-frame video {
  max-width: 100%;
  max-height: calc(100vh - 3.5rem);
  max-height: min(calc(100dvh - 3.5rem), 920px);
}

/* Native video controls live at the bottom — keep the meta bar out of their way. */
.gallery-detail-frame.is-video .gallery-detail-bar {
  inset: 0.65rem 0.65rem auto;
}

.gallery-detail-bar {
  position: absolute;
  inset: auto 0.65rem 0.65rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  pointer-events: none;
}

.gallery-detail-meta {
  min-width: 0;
  max-width: min(72%, 44rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.38rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(5, 11, 18, 0.58);
  color: rgba(231, 238, 247, 0.86);
  font: var(--text-meta);
  backdrop-filter: blur(10px);
  pointer-events: auto;
}

.gallery-download,
.gallery-nav {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}

.gallery-download {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(5, 11, 18, 0.62);
  backdrop-filter: blur(10px);
  pointer-events: auto;
}

.gallery-download-icon {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
}

.gallery-download-icon::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 1px;
  width: 2px;
  height: 9px;
  border-radius: 999px;
  background: currentColor;
}

.gallery-download-icon::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.gallery-download:hover,
.gallery-nav:hover,
.gallery-download:focus-visible,
.gallery-nav:focus-visible {
  border-color: rgba(126, 203, 255, 0.36);
  background: rgba(126, 203, 255, 0.14);
}

/* Stepping through media is a keyboard flow; these carried hover only. */
.gallery-download:focus-visible,
.gallery-nav:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(5, 11, 18, 0.62);
  color: transparent;
  backdrop-filter: blur(10px);
}

.gallery-nav::before,
.gallery-nav::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 2px;
  border-radius: 999px;
  background: var(--text);
}

.gallery-nav-prev {
  left: 0.6rem;
}

.gallery-nav-prev::before,
.gallery-nav-prev::after {
  left: calc(50% - 4px);
  transform-origin: left center;
}

.gallery-nav-prev::before {
  transform: translateY(-50%) rotate(-45deg);
}

.gallery-nav-prev::after {
  transform: translateY(-50%) rotate(45deg);
}

.gallery-nav-next {
  right: 0.6rem;
}

.gallery-nav-next::before,
.gallery-nav-next::after {
  left: calc(50% - 6px);
  transform-origin: right center;
}

.gallery-nav-next::before {
  transform: translateY(-50%) rotate(45deg);
}

.gallery-nav-next::after {
  transform: translateY(-50%) rotate(-45deg);
}

.platinum-icon {
  display: inline-block;
  width: 0.95em;
  height: 1.18em;
  flex: 0 0 auto;
  background: url("/trophy-platinum.png") center / contain no-repeat;
  transform: translateY(0.08em);
}

.detail-chips {
  margin-bottom: var(--space-panel);
}

/* IGDB reference facts render as a quiet hairline "passport" inside the card —
   the rows are separated, not boxed, so they never read as measured tiles. */
.detail-game-metadata {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.2rem;
  margin-bottom: var(--space-panel);
}

.detail-chips.detail-game-metadata .tag {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.9rem;
  height: auto;
  min-height: 0;
  padding: 0.52rem 0.15rem;
  border: 0;
  /* Separators sit on top of each row, so the last row leaves no dangling
     hairline above the card's padding. The first grid row is always the first
     two children — the only row position CSS can name in an auto-flow grid. */
  border-top: 1px solid rgba(165, 210, 255, 0.09);
  border-radius: 0;
  background: none;
}

.detail-chips.detail-game-metadata .tag:nth-child(-n + 2) {
  border-top: 0;
}

.detail-game-times-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.detail-game-times-card-head .detail-section-title {
  margin-bottom: 0.12rem;
}

.detail-game-times-hint {
  color: var(--muted);
  font: var(--text-meta);
}

.detail-game-times-load {
  appearance: none;
  flex: 0 0 auto;
  padding: 0.48rem 0.78rem;
  border: 1px solid rgba(126, 203, 255, 0.26);
  border-radius: 999px;
  background: rgba(126, 203, 255, 0.12);
  color: var(--accent-3);
  font: var(--text-meta);
  font-weight: 700;
  cursor: pointer;
}

.detail-game-times-load:hover:not(:disabled) {
  border-color: rgba(126, 203, 255, 0.45);
  background: rgba(126, 203, 255, 0.18);
  color: var(--text);
}

.detail-game-times-load:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

.detail-game-times-load:disabled {
  cursor: wait;
  opacity: 0.66;
}

.detail-game-times-load.is-icon {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  padding: 0;
  font: var(--text-body);
}

.detail-game-times-load.is-loading span {
  animation: detail-game-times-spin 0.8s linear infinite;
}

@keyframes detail-game-times-spin {
  to {
    transform: rotate(360deg);
  }
}

.detail-game-times {
  min-width: 0;
  margin-top: 0.7rem;
}

.detail-game-time-row {
  display: grid;
  grid-template-columns: minmax(11rem, 1.35fr) minmax(7rem, 0.75fr) minmax(7rem, 0.75fr);
  align-items: baseline;
  gap: 1rem;
  min-width: 0;
  padding: 0.5rem 0.15rem;
  border-top: 1px solid rgba(165, 210, 255, 0.09);
  font: var(--text-meta);
}

.detail-game-time-head {
  border-top: 0;
  color: var(--muted);
  font-weight: 700;
}

.detail-game-time-head span:not(:first-child),
.detail-game-time-value {
  text-align: right;
}

.detail-game-time-source {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  color: var(--accent-3);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.detail-game-time-source:hover {
  color: var(--text);
}

.detail-game-time-source:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

.detail-game-time-value {
  color: var(--accent-3);
  font-weight: 700;
  white-space: nowrap;
}

.detail-game-metadata .detail-metric-label {
  flex: 0 0 auto;
}

.detail-game-metadata .detail-genre-list {
  justify-content: flex-end;
  text-align: right;
}

.detail-game-metadata .detail-metadata-link {
  text-align: right;
}

.detail-game-metadata .detail-metric-value {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.detail-genre-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem;
  min-width: 0;
}

.detail-metadata-link {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  color: var(--accent-3);
  font: var(--text-meta);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}

.detail-metadata-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.detail-metadata-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: 3px;
}

.detail-genre-separator {
  color: var(--muted);
}

.detail-chips .tag {
  align-items: stretch;
}

.detail-cols {
  display: grid;
  /* minmax(0, …) so the nowrap trophy/player rows can shrink instead of
     blowing the track (and the dialog) past the viewport on narrow screens. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-panel);
}

.detail-cols > section {
  min-width: 0;
}

.detail-cols.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.detail-game-cols,
.detail-player-cols {
  align-items: stretch;
}

.detail-game-main-col,
.detail-game-trophy-col,
.detail-player-main-col,
.detail-player-trophy-col {
  min-height: 0;
}

/* Every block of a detail page is a card — one outline, one radius, one
   background — so nothing reads as loose text between framed sections. The
   aggregate pages (genre/company/year) are in the list too: they used to render
   their columns unframed, which made one detail type look unlike the others. */
.detail-panel,
.detail-game-metadata,
.detail-game-player-top,
.detail-game-cols > section,
.detail-player-cols > section,
.detail-aggregate-cols > section {
  padding: var(--pad-detail-card);
  border: 1px solid rgba(165, 210, 255, 0.08);
  border-radius: 15px;
  background: rgba(11, 23, 38, 0.58);
}

.detail-panel,
.detail-game-player-top {
  margin-bottom: var(--space-panel);
}

.detail-panel:last-child {
  margin-bottom: 0;
}

.detail-game-trophy-col,
.detail-player-trophy-col {
  display: flex;
  flex-direction: column;
}

.detail-game-trophy-col .detail-trophies.is-scroll,
.detail-player-trophy-col .detail-trophies.is-scroll {
  flex: 1 1 auto;
  height: 0;
  max-height: none;
}

.detail-section-title {
  font: var(--text-title);
  color: var(--text);
  margin: 0 0 var(--space-section);
}

.detail-section-title + .detail-section-title,
.detail-players + .detail-section-title,
.detail-weekdays + .detail-section-title,
.detail-heatmap + .detail-section-title,
.detail-platforms + .detail-section-title,
.detail-series + .detail-section-title,
.detail-data-source-list + .detail-section-title,
.detail-trophies + .detail-section-title,
.detail-log + .detail-section-title {
  margin-top: var(--space-panel);
}

.detail-milestones {
  margin: var(--space-panel) 0 0;
}

.detail-milestone-feed {
  margin-top: 0;
}

.detail-historical-note {
  margin: -0.25rem 0 0.6rem;
  font: var(--text-body);
}

.detail-hint {
  margin: -0.25rem 0 0.6rem;
  color: var(--muted);
  font: var(--text-meta);
}

.detail-source-divider {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 1.25rem 0 1rem;
  color: var(--accent-3);
  font: var(--text-meta);
  font-weight: 700;
}

.detail-source-divider::before,
.detail-source-divider::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: linear-gradient(90deg, transparent, rgba(126, 203, 255, 0.34));
}

.detail-source-divider::after {
  background: linear-gradient(90deg, rgba(126, 203, 255, 0.34), transparent);
}

.detail-source-divider span {
  flex: 0 0 auto;
}

/* Round person avatar (no game-icon ring) with a centered initial fallback. */
.partner-avatar {
  display: grid;
  place-items: center;
  color: var(--muted);
  font: var(--text-meta);
  font-weight: 800;
}

.detail-player {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.4rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.018);
  overflow: hidden;
}

/* Rows that carry --fill (top players) read as a quiet proportional chart. */
.detail-player::before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--fill, 0%);
  background: linear-gradient(90deg, rgba(126, 203, 255, 0.13), rgba(126, 203, 255, 0.02));
  pointer-events: none;
}

.detail-player + .detail-player {
  margin-top: 0.25rem;
}

/* The "Показать ещё" collapse marks the tail rows [hidden], but .detail-player's
   own display:flex outranks the UA [hidden] rule — without this reset the whole
   catalogue renders and the profile grows to tens of thousands of pixels. */
.detail-player[hidden] {
  display: none;
}

/* Platinumed games get a quieter take on the trophy feed's platinum row, so the
   profile's game list reads them at a glance. */
.detail-player.is-platinum {
  border-color: rgba(159, 212, 255, 0.3);
  background:
    linear-gradient(90deg, rgba(126, 203, 255, 0.15), rgba(158, 227, 125, 0.07) 58%, rgba(255, 255, 255, 0.03));
  box-shadow: 0 0 18px rgba(126, 203, 255, 0.1);
}

.detail-player-body {
  flex: 1 1 auto;
  min-width: 0;
}

.detail-player-name {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font: var(--text-item);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-player-plat {
  height: 0.95em;
  transform: translateY(0.04em);
}

.detail-player-sub {
  font: var(--text-meta);
}

.detail-player-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.28rem;
}

.trophy-progress-pill {
  display: inline-flex;
  /* Stretch both segments to the pill's full height so the tinted platform
     part fills the rounded left edge without gaps. */
  align-items: stretch;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(212, 192, 138, 0.1);
  color: #cdbd8c;
  font: var(--text-micro);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.trophy-progress-platform {
  display: inline-flex;
  align-items: center;
  gap: 0.26rem;
  padding: 0.24rem 0.38rem;
  background: rgba(212, 192, 138, 0.12);
  font-weight: 700;
}

.trophy-progress-logo {
  width: auto;
  max-width: 1.6rem;
  height: 0.5rem;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
}

/* Brand tints mirroring the dashboard .plat-badge palette. */
.trophy-progress-pill.is-psn .trophy-progress-platform {
  background: rgba(0, 112, 204, 0.22);
  color: #4da3e6;
}

.trophy-progress-pill.is-steam .trophy-progress-platform {
  background: rgba(102, 192, 244, 0.18);
  color: #66c0f4;
}

.trophy-progress-pill.is-xbox .trophy-progress-platform {
  background: rgba(16, 124, 16, 0.24);
  color: #79c83d;
}

.trophy-progress-pill.is-ps3 .trophy-progress-platform {
  background: rgba(184, 155, 255, 0.18);
  color: #b89bff;
}

.trophy-progress-value {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.24rem 0.45rem 0.24rem 0.38rem;
  color: var(--text);
  font-weight: 650;
}

/* Completed sets — platinum or plain 100% — get the trophy-feed treatment:
   light-blue outline + glow. Platinum additionally shows the icon (added in JS);
   a 100%-no-platinum pill glows the same way, just without the icon. */
.trophy-progress-pill.has-platinum,
.trophy-progress-pill.is-complete {
  border: 1px solid rgba(159, 212, 255, 0.45);
  background: linear-gradient(90deg, rgba(126, 203, 255, 0.22), rgba(255, 255, 255, 0.04));
  box-shadow:
    0 0 18px rgba(126, 203, 255, 0.22),
    inset 0 0 0 1px rgba(190, 226, 255, 0.12);
}

.trophy-progress-value .platinum-icon {
  width: 0.8rem;
  height: 0.8rem;
}

.detail-weekdays {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  height: 88px;
}

.detail-wd-value {
  font: var(--text-meta);
  min-height: 0.7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.detail-wd.is-peak .detail-wd-value {
  color: var(--text);
}

.detail-wd {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  height: 100%;
}

.detail-wd-track {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: flex-end;
}

.detail-wd-bar {
  width: 100%;
  min-height: 0;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(180deg, var(--accent-3), rgba(126, 203, 255, 0.45));
}

.detail-wd.is-peak .detail-wd-bar {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}

.detail-wd-label {
  font: var(--text-meta);
  color: var(--muted);
}

.detail-dayparts .detail-wd-label {
  font: var(--text-meta);
}

.detail-wd.is-peak .detail-wd-label {
  color: var(--text);
}

/* GitHub-style activity calendar: a year of Monday-first week columns with month
   labels above. Wide containers distribute the columns edge to edge; narrow
   containers retain the grid's intrinsic width and scroll horizontally. */
.heatmap-scroll {
  overflow-x: auto;
  padding-bottom: 0.3rem;
  scrollbar-color: rgba(126, 203, 255, 0.36) rgba(255, 255, 255, 0.04);
  scrollbar-width: thin;
}

.heatmap-months,
.heatmap-grid {
  display: flex;
  justify-content: space-between;
  gap: 3px;
  width: max-content;
  min-width: 100%;
}

.heatmap-months {
  margin-bottom: 3px;
}

/* One label slot per week column; the text of a starting month spills right
   over the following (empty) slots. min-width: 0 keeps the slot at its 11px
   basis — with the default min-width: auto the nowrap text would widen the
   slot and drift the labels out of alignment with their week columns. */
.heatmap-month {
  flex: 0 0 11px;
  min-width: 0;
  font: var(--text-meta);
  color: var(--muted);
  white-space: nowrap;
}

.heatmap-week {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.heatmap-week.is-year-boundary {
  position: relative;
}

.heatmap-week.is-year-boundary::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -2px;
  border-left: 1px dashed rgba(126, 203, 255, 0.42);
  pointer-events: none;
}

.heatmap-month.is-year-boundary {
  color: var(--accent-3);
}

.heatmap-cell {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 3px;
}

.heatmap-cell.is-before-tracking {
  visibility: hidden;
}

.heatmap-cell.is-clickable {
  cursor: pointer;
}

.heatmap-cell.is-clickable:hover,
.heatmap-cell.is-clickable:focus-visible {
  outline: 1px solid rgba(237, 244, 251, 0.7);
  outline-offset: -1px;
}

.heatmap-level-0 {
  background: rgba(165, 210, 255, 0.08);
}

.heatmap-level-1 {
  background: rgba(126, 203, 255, 0.24);
}

.heatmap-level-2 {
  background: rgba(126, 203, 255, 0.45);
}

.heatmap-level-3 {
  background: rgba(126, 203, 255, 0.7);
}

.heatmap-level-4 {
  background: var(--accent-3);
}

.detail-trophies .trophy-group + .trophy-group {
  margin-top: 0.6rem;
}

/* The trophy row is reused from the wide feed. Inside the narrower modal column
   both the grid-item row and its nowrap name keep their default min-width:auto,
   so they refuse to shrink and overflow. Clamp both so the row ellipsizes. */
.detail-trophies .trophy-row,
.detail-trophies .trophy-name {
  min-width: 0;
}

/* A player accrues years of trophies; cap the feed and scroll the overflow so
   the modal stays a sane height instead of an endless page. */
.detail-trophies.is-scroll {
  max-height: 460px;
  overflow-y: auto;
  padding-right: 0.25rem;
  scrollbar-color: rgba(126, 203, 255, 0.36) rgba(255, 255, 255, 0.04);
  scrollbar-width: thin;
}

.detail-trophies.is-scroll::-webkit-scrollbar {
  width: 8px;
}

.detail-trophies.is-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}

.detail-trophies.is-scroll::-webkit-scrollbar-thumb {
  background: rgba(126, 203, 255, 0.36);
  border-radius: 999px;
}

.detail-log {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.detail-log-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 34px;
  padding: 0.35rem 0.5rem;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.018);
  font: var(--text-meta);
}

.detail-log-time {
  flex: 0 0 auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.detail-log-who {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.detail-log-dur {
  flex: 0 0 auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* «Впервые в игре» — the person's first recorded session of the game. */
.detail-log-first {
  flex: 0 0 auto;
  font: var(--text-micro);
  color: rgba(158, 227, 125, 0.68);
}

.detail-log-game.is-clickable {
  color: var(--accent-3);
  cursor: pointer;
  font-weight: 700;
}

.detail-log-game.is-clickable:hover {
  text-decoration: underline;
}

.trophy-group-head.is-clickable {
  cursor: pointer;
  border-radius: 10px;
}

.trophy-group-head.is-clickable:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Player entry points: clickable rows/tags that open the player-detail modal,
   plus the player modal's own clickable game rows (which open the game modal). */
.rank-row.is-clickable,
.tag.is-clickable,
.detail-player.is-clickable,
.detail-log-who.is-clickable {
  cursor: pointer;
}

.rank-row.is-clickable:hover {
  border-color: var(--accent);
}

/* These rows are articles with button semantics, so Chromium otherwise draws
   its native outline outside the scrollable leaderboard and clips its right
   edge. Keep the keyboard affordance inside the row instead. */
.rank-row.is-clickable:focus {
  outline: none;
}

.leaderboard .rank-row.is-clickable:focus-visible {
  outline: none;
  border-color: var(--accent-3);
  box-shadow: inset 0 0 0 1px var(--accent-3);
}

.tag.is-clickable:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.detail-player.is-clickable:hover {
  border-color: rgba(126, 203, 255, 0.16);
  background: rgba(126, 203, 255, 0.065);
}

.detail-platforms {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.detail-platform-chart {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.detail-platform-chart::after {
  content: "";
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  background: var(--panel-strong);
  box-shadow: inset 0 0 0 1px rgba(165, 210, 255, 0.1);
}

.detail-platform-legend {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.detail-platform-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  font: var(--text-meta);
}

.detail-platform-badge {
  justify-self: start;
}

.detail-genre-legend-link,
.detail-genre-legend-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  justify-self: start;
  color: var(--text);
  font: var(--text-meta);
  font-weight: 700;
}

.detail-genre-legend-link {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.detail-genre-legend-link:hover {
  color: var(--accent-3);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.detail-genre-legend-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: 3px;
}

.detail-genre-swatch {
  width: 0.65rem;
  height: 0.65rem;
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.detail-series {
  display: grid;
  gap: 0.55rem;
}

.detail-series-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  min-width: 0;
}

.detail-series-link {
  appearance: none;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  color: var(--text);
  font: var(--text-meta);
  font-weight: 700;
  cursor: pointer;
}

.detail-series-link:hover {
  color: var(--accent-3);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.detail-series-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: 3px;
}

.detail-series-track {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.detail-series-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}

.detail-platform-name {
  color: var(--text);
  font-weight: 700;
}

.detail-platform-meta {
  min-width: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.detail-data-source-name {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  color: var(--text);
  font-weight: 700;
}

.detail-data-source-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.detail-data-source-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-data-source-link {
  color: inherit;
  text-decoration: none;
}

.detail-data-source-link:hover {
  text-decoration: underline;
}

.detail-log-who.is-clickable:hover {
  color: var(--text);
  text-decoration: underline;
}

.detail-log-who.is-player-link {
  color: var(--accent-3);
  font-weight: 700;
}

.detail-log-who.is-clickable:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: 3px;
}

/* Trophy entry point: a feed row that opens the per-trophy "who else earned it"
   modal. (The group header still opens the game modal; they never overlap.) */
.trophy-row.is-clickable {
  cursor: pointer;
  border-radius: 8px;
}

.trophy-row.is-clickable:hover {
  background: rgba(126, 203, 255, 0.065);
}

/* Trophy-detail header: the trophy icon is the subject, over the game's artwork
   — the same hero pattern as the game and player modals, one step shorter. */
/* A trophy is one small object and a short list of who earned it — the 1040px
   canvas the game and player details need leaves it stranded. */
.detail-dialog:has(.detail-trophy-hero) {
  max-width: 760px;
}

/* A trophy has no logo to clear, so the band is only as tall as its content —
   the two-class selector keeps that true under the narrow-screen overrides. */
.detail-game-hero.detail-trophy-hero {
  min-height: 0;
}

.detail-trophy-brand {
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 0.9rem;
  padding: 3.4rem 1.6rem 1.25rem 1.35rem;
}

.detail-trophy-art {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 15px;
  overflow: hidden;
  background: rgba(8, 16, 26, 0.72);
  /* The grade tints the frame, so a gold trophy reads as gold before the chip
     is read. Ungraded (Steam) art keeps the neutral outline. */
  border: 1px solid var(--grade, rgba(255, 255, 255, 0.18));
}

.detail-trophy-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* No icon (rare): the feed's emoji fallback, scaled to fill the frame. Scaling
   rather than a font-size keeps the type scale the single source of sizes. */
.detail-trophy-art .trophy-emoji {
  display: block;
  transform: scale(2.1);
}

/* Basis 0 (not auto): a long trophy name must wrap inside the column instead of
   pushing it below the icon. */
.detail-trophy-brand-main {
  flex: 1 1 0;
  min-width: 0;
  padding-bottom: 0.15rem;
}

.detail-trophy-grade {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: var(--pad-chip);
  font: var(--text-meta);
  font-weight: 700;
  color: var(--grade, var(--muted));
  background: rgba(255, 255, 255, 0.08);
}

/* Rarity tier, next to the grade: same chip shape, tier colour. */
.detail-trophy-tier {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: var(--pad-chip);
  font: var(--text-meta);
  font-weight: 700;
  white-space: nowrap;
  color: var(--tier, var(--muted));
  background: rgba(255, 255, 255, 0.08);
}

.grade-bronze {
  --grade: #c87b46;
}

.grade-silver {
  --grade: #d7deea;
}

.grade-gold {
  --grade: #f0c24b;
}

.grade-platinum {
  --grade: #9fd4ff;
}

/* Trophy-detail header: game name under the title. */
.detail-trophy-game {
  margin-top: 0.15rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font: var(--text-body);
}

.detail-trophy-game-link {
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.detail-trophy-game-link:hover,
.detail-trophy-game-link:focus-visible {
  color: var(--accent-3);
  text-decoration: underline;
}

.detail-trophy-game-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: 3px;
}

.detail-trophy-platform .plat-badge-logo {
  width: 2rem;
  height: 0.72rem;
}

/* Rarity, one bar per source: the fill is the share of players who earned the
   trophy, so an ultra-rare one reads as a sliver before the number is read. The
   platform's own figure carries the tier colour; the community one stays
   neutral, so the two are never confused. */
.detail-trophy-rarity {
  margin-bottom: 1rem;
}

.detail-rarity-rows {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 0.7rem;
}

.detail-rarity-source {
  font: var(--text-meta);
  color: var(--muted);
  white-space: nowrap;
}

.detail-rarity-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.detail-rarity-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--tier, var(--muted));
}

.detail-rarity-figure {
  font: var(--text-item);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--tier, var(--muted));
}

/* One tier palette, shared by the header chip and the bar + figure below. */
.detail-trophy-tier.ultra,
.detail-rarity-rows .ultra {
  --tier: #ffd166;
}

.detail-trophy-tier.veryrare,
.detail-rarity-rows .veryrare {
  --tier: #f0abfc;
}

.detail-trophy-tier.rare,
.detail-rarity-rows .rare {
  --tier: #7cc7ff;
}

.detail-trophy-tier.uncommon,
.detail-rarity-rows .uncommon {
  --tier: #aeb9d4;
}

.detail-trophy-tier.common,
.detail-rarity-rows .common {
  --tier: #9fabc6;
}

/* The community figure is a second opinion, not a second tier — its bar stays
   neutral and quieter than the platform's own. */
.detail-rarity-fill.is-community {
  background: rgba(148, 171, 194, 0.5);
}

/* Second figure: Stratege / SteamHunters community rarity — a link out. */
.detail-rarity-community.is-link {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}

.detail-rarity-community.is-link:hover {
  color: var(--accent-3);
}

.detail-rarity-community.is-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: 3px;
}

.detail-rarity-external {
  margin-left: 0.2rem;
}

/* Community difficulty (platinum only): the score leads, the verdict and the
   time bucket explain it, the vote link closes the row. Three bands so a bare
   0-10 number doesn't need calibrating. */
.detail-trophy-difficulty {
  margin-bottom: 1rem;
}

.detail-difficulty-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.detail-difficulty-score {
  font: var(--text-title);
  font-variant-numeric: tabular-nums;
  color: var(--band, var(--muted));
  white-space: nowrap;
}

.detail-difficulty-scale {
  font: var(--text-meta);
  color: var(--muted);
}

.detail-difficulty-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.detail-difficulty-label {
  overflow: hidden;
  color: var(--text);
  font: var(--text-item);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-difficulty-votes {
  color: var(--muted);
  font: var(--text-meta);
}

.detail-difficulty-link {
  margin-left: auto;
  color: var(--muted);
  font: var(--text-meta);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out);
}

.detail-difficulty-link:hover {
  color: var(--accent-3);
}

.detail-difficulty-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: 3px;
}

/* Shared difficulty palette: the modal score and the platinum-list chip. */
.detail-difficulty-score.is-easy,
.player-platinum-score.is-easy {
  --band: #7fd1a3;
}

.detail-difficulty-score.is-medium,
.player-platinum-score.is-medium {
  --band: #7ecbff;
}

.detail-difficulty-score.is-hard,
.player-platinum-score.is-hard {
  --band: #ff9f7e;
}

.player-platinum-score {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--band);
  font: var(--text-meta);
  font-variant-numeric: tabular-nums;
}

/* Who got there first — the one ordinal the earners list needs. The name is
   wrapped so it, not the marker, is what gives way on a narrow screen. */
.detail-player-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-player-first {
  flex: 0 0 auto;
  margin-left: 0.1rem;
  font: var(--text-micro);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Press feedback. The file had exactly one :active rule (.hero-stat-link); these
   extend that same 1px dip to the controls that acknowledged a click not at all. */
.version-tag:active,
.collapse-btn:active,
.seg-btn:active,
.panel-status-action:active,
.trophy-more:not(:disabled):active,
.detail-back:active,
.detail-close:active,
.gallery-card:active,
.gallery-download:active {
  transform: translateY(1px);
}

/* Composed with the control's own centring transform, which a bare
   translateY(1px) would overwrite. */
.gallery-nav:active {
  transform: translateY(calc(-50% + 1px));
}

:is(
  [data-open-game],
  [data-open-player],
  [data-open-day],
  [data-open-trophy],
  [data-open-changelog],
  .rank-row.is-clickable,
  .tag.is-clickable
):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

@media (max-width: 720px) {
  :root {
    --text-body: 400 0.875rem/1.4 var(--font-main);
    --text-meta: 600 0.75rem/1.3 var(--font-main);
    --text-micro: 500 0.6875rem/1.3 var(--font-main);
  }

  .detail-dialog {
    --detail-control-size: 44px;
  }

  .collapse-btn,
  .detail-close,
  .detail-share,
  .detail-back,
  .panel-status-action,
  .seg-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* No room to share the title's line on a phone — the scope toggle drops back
     below it and takes the whole row, so the head keeps its own clearance for
     the floating controls. Declared after the desktop rules, not next to the
     other .detail-period phone tweaks, so it wins on equal specificity. */
  .detail-head-row {
    display: block;
  }

  .detail-dialog:has(.detail-nav[hidden]) .detail-head-row,
  .detail-dialog:has(.detail-nav[hidden]):has(.detail-share:not([hidden])) .detail-head-row {
    padding-right: 0;
  }

  .detail-head-row > .detail-head {
    padding-right: 2.2rem;
    margin-bottom: var(--space-panel);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .gallery-card:hover img,
  .gallery-card:focus-visible img {
    transform: none;
  }
}

@media (max-width: 560px) {
  .detail-game-hero {
    min-height: 192px;
  }

  .detail-game-hero.has-logo-only {
    min-height: 142px;
  }

  .detail-game-brand {
    padding: 2.5rem var(--detail-control-inset) 0.95rem;
    row-gap: 0.55rem;
  }

  /* Taller top inset than the game hero: the trophy's name row starts at the
     very top of the band and would otherwise run under the close button. The
     icon tops out with the name once the text wraps to three lines. */
  .detail-trophy-brand {
    align-items: flex-start;
    padding: 3.4rem 1.2rem 1.05rem;
  }

  .detail-trophy-art {
    width: 68px;
    height: 68px;
    border-radius: 12px;
  }

  .detail-trophy-art .trophy-emoji {
    transform: scale(1.6);
  }

  .detail-hero-stat {
    margin-left: 0;
    text-align: left;
  }

  .detail-hero-stat-lines {
    align-items: flex-start;
  }

  .detail-hero-ranks {
    justify-items: start;
  }

  .detail-game-logo,
  .detail-game-logo-link {
    max-width: min(78%, 320px);
  }

  .detail-game-logo {
    max-height: 76px;
  }

  .detail-chips {
    grid-template-columns: repeat(2, 1fr);
  }

  .player-platinum-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-chips.detail-game-metadata {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One column: only the very first child opens the list, so the second row
     gets its separator back. */
  .detail-chips.detail-game-metadata .tag:nth-child(2) {
    border-top: 1px solid rgba(165, 210, 255, 0.09);
  }

  .detail-game-time-row {
    grid-template-columns: minmax(8.5rem, 1.25fr) minmax(5.25rem, 0.75fr) minmax(5.25rem, 0.75fr);
    gap: 0.55rem;
  }

  .detail-game-times-card-head {
    align-items: flex-start;
  }

  .detail-game-times-load {
    padding-inline: 0.68rem;
  }

  .detail-game-times-load.is-icon {
    padding-inline: 0;
  }

  .detail-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-game-trophy-col .detail-trophies.is-scroll,
  .detail-player-trophy-col .detail-trophies.is-scroll {
    height: auto;
    max-height: 460px;
  }

  .detail-platforms {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .detail-platform-chart {
    width: 88px;
    height: 88px;
  }

  .detail-platform-chart::after {
    inset: 22px;
  }
}