:root {
  --person-profile-bg: var(--root-bg, #FFFCF7);
  --person-profile-fg: var(--root-fg, #090C08);
  --person-profile-accent: var(--celtic-blue, #1E70D6);
  --person-profile-active-filter: #1E70D6;
  --person-profile-focus: #0B57B7;
  --person-profile-surface: #EFECE7;
  --person-profile-filter-bg: rgba(9, 12, 8, 0.08);
  --person-profile-placeholder-bg: rgba(0, 0, 0, 0.05);
  --person-profile-placeholder-logo: rgba(0, 0, 0, 0.08);
  --person-profile-highlight: #FECF01;
  --person-profile-success: #51BD51;
  --person-profile-success-fg: #000000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --person-profile-accent: #287BE0;
    --person-profile-focus: #78ADFF;
    --person-profile-surface: #1C1F1A;
    --person-profile-filter-bg: rgba(255, 252, 247, 0.10);
    --person-profile-placeholder-bg: rgba(255, 255, 255, 0.08);
    --person-profile-placeholder-logo: rgba(255, 255, 255, 0.20);
    --person-profile-success: #3BB33B;
    --person-profile-success-fg: #FFFFFF;
  }
}

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

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--person-profile-bg);
  color: var(--person-profile-fg);
  color-scheme: light dark;
  font-family: var(--font-sans);
}

body {
  overflow-x: hidden;
}

.person-page {
  min-height: 100vh;
  background: var(--person-profile-bg);
  color: var(--person-profile-fg);
}

.person-profile-main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-48, 48px);
  width: calc(100% - 32px);
  margin-inline: auto;
  padding-block: var(--spacing-32, 32px) var(--spacing-64, 64px);
}

.person-profile-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-24, 24px);
  margin: 0;
}

.person-profile-portrait {
  inline-size: 220px;
  block-size: 293px;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
}

.person-profile-media {
  position: relative;
  overflow: hidden;
  background: var(--person-profile-placeholder-bg);
}

.person-profile-media__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: var(--root-motion-fade-transition, opacity 0.22s ease-in-out);
}

.person-profile-media__placeholder::before {
  inline-size: calc(100% * 40 / 172);
  aspect-ratio: 1;
  background: var(--person-profile-placeholder-logo);
  content: "";
  mask: url("/main_placeholder.svg") center / contain no-repeat;
  -webkit-mask: url("/main_placeholder.svg") center / contain no-repeat;
}

.person-profile-media__image {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 1;
  transition: var(--root-motion-fade-transition, opacity 0.22s ease-in-out);
}

.person-profile-media.is-loading .person-profile-media__image,
.person-profile-media.is-failed .person-profile-media__image {
  opacity: 0;
}

.person-profile-media.is-loaded .person-profile-media__placeholder {
  opacity: 0;
}

.person-profile-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-12, 12px);
  inline-size: 100%;
  min-inline-size: 0;
}

.person-profile-identity h1,
.person-profile-identity p,
.person-profile-section h2,
.person-profile-section p,
.person-game-card h3,
.person-game-card p {
  margin: 0;
}

.person-profile-identity h1 {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
}

.person-profile-roles,
.person-profile-metadata {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  font-size: 15px;
  line-height: 20px;
}

.person-profile-roles {
  font-weight: 500;
}

.person-profile-thesis {
  max-inline-size: 760px;
  overflow-wrap: anywhere;
  font-size: 22px;
  font-weight: 400;
  line-height: 28px;
}

.person-profile-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-inline-size: 0;
}

.person-profile-section h2 {
  overflow-wrap: anywhere;
  color: var(--person-profile-accent);
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
}

.person-profile-career {
  gap: var(--spacing-16, 16px);
}

.person-profile-career__body {
  display: grid;
  gap: var(--spacing-24, 24px);
  max-inline-size: 1040px;
  font-size: 17px;
  font-weight: 400;
  line-height: 24px;
}

.person-profile-career__body p {
  overflow-wrap: anywhere;
}

.person-profile-facts,
.person-profile-games {
  gap: var(--spacing-24, 24px);
}

.person-profile-facts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-12, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.person-profile-facts__grid li {
  min-block-size: 144px;
  padding: var(--spacing-20, 20px);
  overflow-wrap: anywhere;
  border-radius: 8px;
  background: var(--person-profile-surface);
  font-size: 17px;
  font-weight: 400;
  line-height: 24px;
}

.person-profile-role-filters {
  display: flex;
  gap: var(--spacing-8, 8px);
  min-inline-size: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.person-profile-role-filters::-webkit-scrollbar {
  display: none;
}

.person-profile-role-filter {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  min-block-size: 34px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--person-profile-filter-bg);
  color: var(--person-profile-fg);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.person-profile-role-filter.is-active {
  background: var(--person-profile-active-filter);
  color: #FFFFFF;
}

.person-profile-role-filter:focus-visible {
  outline: 3px solid var(--person-profile-focus);
  outline-offset: 2px;
}

.person-profile-games__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-12, 12px);
}

.person-game-card {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: var(--spacing-12, 12px);
  min-block-size: 152px;
  padding: var(--spacing-16, 16px);
  overflow: hidden;
  border-radius: 8px;
  background: var(--person-profile-surface);
}

.person-game-card__poster {
  inline-size: 80px;
  block-size: 120px;
  border-radius: 4px;
}

.person-game-card__content {
  display: flex;
  flex-direction: column;
  align-self: center;
  gap: 4px;
  min-inline-size: 0;
  padding-inline-end: 56px;
}

.person-game-card__title {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.person-game-card__roles {
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-game-card__date {
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-game-card__rating {
  position: absolute;
  inset-block-start: var(--spacing-16, 16px);
  inset-inline-end: var(--spacing-16, 16px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 22px;
  padding: 3px 8px;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}

.person-game-card__rating--highlight {
  background: var(--person-profile-highlight);
  color: #000000;
}

.person-game-card__rating--success {
  background: var(--person-profile-success);
  color: var(--person-profile-success-fg);
}

.person-game-card__rating--warning {
  background: #FFB30F;
  color: #000000;
}

.person-game-card__rating--danger {
  background: #D0180B;
  color: #FFFFFF;
}

.person-page [hidden] {
  display: none !important;
}

.person-game-card__title a {
  color: inherit;
  text-decoration: none;
}

.person-game-card__title a::after {
  position: absolute;
  inset: 0;
  content: "";
}

.person-game-card:has(a:focus-visible) {
  outline: 3px solid var(--person-profile-focus);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .person-game-card:has(a) {
    transform-origin: center;
    transition: transform 0.2s ease-in-out;
  }

  .person-game-card:has(a):hover {
    transform: scale(1.02);
    z-index: 1;
  }
}

.person-navigation-error {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 16px;
  text-align: center;
}

.person-profile-skeleton i,
.person-skeleton-block {
  display: block;
  background: var(--person-profile-filter-bg);
  border-radius: 4px;
}

.person-profile-skeleton .person-profile-portrait {
  border-radius: 16px;
}

.person-skeleton-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  inline-size: 100%;
}

.person-skeleton-name { block-size: 40px; }
.person-skeleton-name i { inline-size: 46%; block-size: 24px; }
.person-skeleton-roles { block-size: 20px; }
.person-skeleton-roles i { inline-size: 62%; block-size: 14px; }
.person-skeleton-thesis { block-size: 84px; gap: 8px; max-inline-size: 760px; }
.person-skeleton-thesis i { inline-size: 94%; block-size: 18px; }
.person-skeleton-thesis i:nth-child(2) { inline-size: 78%; }
.person-skeleton-thesis i:nth-child(3) { inline-size: 52%; }
.person-skeleton-metadata { block-size: 20px; }
.person-skeleton-metadata i { inline-size: 42%; block-size: 14px; }
.person-skeleton-heading { block-size: 40px; }
.person-skeleton-heading i { inline-size: 42%; max-inline-size: 328px; block-size: 20px; }
.person-profile-facts .person-skeleton-heading i { inline-size: 52%; }
.person-profile-games .person-skeleton-heading i { inline-size: 58%; }
.person-skeleton-body { max-inline-size: 1040px; display: grid; gap: 4px; padding-block: 2px; }
.person-skeleton-body i { inline-size: 96%; block-size: 16px; }
.person-skeleton-body i:nth-child(4n + 2) { inline-size: 91%; }
.person-skeleton-body i:nth-child(4n + 3) { inline-size: 84%; }
.person-skeleton-body i:nth-child(4n) { inline-size: 72%; }
.person-profile-skeleton .person-profile-career { gap: 12px; }
.person-profile-main.person-profile-skeleton { gap: 32px; }
.person-profile-skeleton .person-profile-facts,
.person-profile-skeleton .person-profile-games { gap: 16px; }
.person-skeleton-fact { display: flex; flex-direction: column; gap: 8px; }
.person-skeleton-fact i { block-size: 14px; inline-size: 96%; }
.person-skeleton-fact i:nth-child(2) { inline-size: 91%; }
.person-skeleton-fact i:last-child { inline-size: 68%; }
.person-skeleton-filter { flex: 0 0 94px; block-size: 34px; border-radius: 999px; }
.person-skeleton-filter:first-child { flex-basis: 71px; }
.person-skeleton-game { gap: 10px; }
.person-skeleton-game i { block-size: 12px; inline-size: 56%; }
.person-skeleton-game i:first-child { block-size: 16px; inline-size: 78%; }
.person-skeleton-game i:last-child { inline-size: 38%; }
.person-profile-skeleton .person-game-card__rating { inline-size: 30px; }

@media (min-width: 761px) {
  .person-profile-main.person-profile-skeleton { gap: 40px; }
  .person-skeleton-thesis { block-size: 56px; }
  .person-skeleton-thesis i { inline-size: 72%; }
  .person-skeleton-thesis i:nth-child(2) { inline-size: 54%; }
  .person-skeleton-thesis i:nth-child(3) { display: none; }
  .person-skeleton-roles i { inline-size: 58%; }
  .person-skeleton-metadata i { inline-size: 36%; }
  .person-skeleton-body { padding-block: 6px; }
  .person-skeleton-body i:nth-child(n + 9) { display: none; }
  .person-skeleton-heading i { inline-size: 27%; }
  .person-profile-career .person-skeleton-heading i { inline-size: 23%; }
  .person-profile-facts .person-skeleton-heading i { inline-size: 27%; }
  .person-profile-games .person-skeleton-heading i { inline-size: 140px; }
  .person-profile-main {
    gap: var(--spacing-56, 56px);
    width: min(calc(100% - 128px), 1216px);
    padding-block: var(--spacing-48, 48px) var(--spacing-96, 96px);
  }

  .person-profile-hero {
    display: grid;
    grid-template-columns: 256px minmax(0, 1fr);
    align-items: center;
    gap: var(--spacing-48, 48px);
  }

  .person-profile-portrait {
    inline-size: 256px;
    block-size: 341px;
  }

  .person-profile-facts__grid,
  .person-profile-games__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-16, 16px);
  }

  .person-profile-facts__grid li {
    min-block-size: 184px;
    padding: var(--spacing-24, 24px);
  }

  .person-game-card {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--spacing-20, 20px);
    min-block-size: 176px;
  }

  .person-game-card__poster {
    inline-size: 96px;
    block-size: 144px;
  }

  .person-game-card__content {
    padding-inline-end: 72px;
  }
}

@media (min-width: 1200px) {
  .person-skeleton-name { block-size: 56px; }
  .person-skeleton-name i { inline-size: 44%; block-size: 32px; }
  .person-profile-main {
    gap: var(--spacing-64, 64px);
  }

  .person-profile-hero {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: var(--spacing-64, 64px);
  }

  .person-profile-portrait {
    inline-size: 320px;
    block-size: 426px;
  }

  .person-profile-identity h1 {
    font-size: 48px;
    line-height: 56px;
  }

  .person-profile-facts__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .person-profile-role-filter,
  .person-profile-media__placeholder,
  .person-profile-media__image {
    transition: none;
  }
}

html[dir="rtl"] .person-profile-identity,
html[dir="rtl"] .person-profile-section,
html[dir="rtl"] .person-game-card__content {
  text-align: start;
}