/* GAME RANDOMIZER FINAL CONSOLIDATED DESIGN V74
   Generated from the exact active V73 installation.
   This is the only stylesheet loaded by the site. */

/* ===== BEGIN styles.css ===== */
:root {
  --bg: #10131b;
  --panel: rgba(25, 29, 42, 0.88);
  --text: #f5f7fb;
  --muted: #aab2c1;
  --line: rgba(255,255,255,0.12);
  --accent: #64d2ff;
  --danger: #ff5f6d;
  --tile: rgba(255,255,255,0.07);
  --shadow: 0 22px 80px rgba(0,0,0,0.45);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, Segoe UI, Arial, sans-serif;
  background: radial-gradient(circle at top, #1b2437 0%, var(--bg) 48%, #07090e 100%);
  color: var(--text);
}
button, select {
  font: inherit;
}
button {
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  background: var(--accent);
  color: #061018;
  cursor: pointer;
  font-weight: 900;
  box-shadow: var(--shadow);
}
button.secondary { background: #2d3548; color: var(--text); }
button.danger { background: var(--danger); color: white; }
button:disabled { opacity: .45; cursor: not-allowed; }

.control-page {
  min-height: 100vh;
  padding: 22px;
}
.control-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 18px;
  max-width: 1550px;
  margin: 0 auto;
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow);
}
.h1 {
  margin: 0 0 4px;
  font-size: 28px;
  font-weight: 950;
}
.muted { color: var(--muted); }
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0;
}
.stat {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  text-align: center;
}
.stat strong { display: block; font-size: 24px; }
.current-art {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 18px;
  background: #07090e;
  border: 1px solid var(--line);
  margin-top: 12px;
  transition: transform 90ms ease, filter 90ms ease, box-shadow 90ms ease;
}
.current-title {
  margin: 12px 0;
  font-size: 25px;
  font-weight: 950;
  line-height: 1.1;
}
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.rank-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rank-buttons button { font-size: 22px; padding: 14px; }
.spin-status {
  margin-top: 10px;
  color: var(--muted);
  font-weight: 800;
  min-height: 22px;
}

.tier-board { display: grid; gap: 10px; }
.tier-row {
  display: grid;
  grid-template-columns: 82px 1fr;
  min-height: 106px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.tier-label {
  display: grid;
  place-items: center;
  font-size: 38px;
  font-weight: 1000;
  color: #05070b;
}
.tier-S .tier-label { background: #ff7f7f; }
.tier-A .tier-label { background: #ffbf7f; }
.tier-B .tier-label { background: #ffff7f; }
.tier-C .tier-label { background: #7fff7f; }
.tier-D .tier-label { background: #7fbfff; }
.tier-F .tier-label { background: #bf7fff; }
.tier-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  align-items: flex-start;
}
.game-chip {
  width: 76px;
  position: relative;
}
.game-chip img {
  width: 76px;
  height: 112px;
  object-fit: cover;
  border-radius: 9px;
  background: #080a10;
  border: 1px solid var(--line);
}
.game-chip .small-title {
  font-size: 10px;
  line-height: 1.05;
  margin-top: 3px;
  color: #dfe5f3;
  max-height: 22px;
  overflow: hidden;
}
.editable-chip {
  width: 96px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  background: rgba(0,0,0,0.16);
}
.editable-chip img {
  width: 84px;
  height: 126px;
}
.chip-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  margin-top: 5px;
}
.chip-actions select {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #111827;
  color: var(--text);
  padding: 4px 6px;
  font-size: 12px;
  font-weight: 900;
}
.chip-actions .mini-back {
  width: 100%;
  border-radius: 8px;
  padding: 5px 4px;
  font-size: 11px;
  background: #2d3548;
  color: var(--text);
  box-shadow: none;
}

.overlay-page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: transparent;
}
.overlay-wrap {
  width: 100vw;
  height: 100vh;
  padding: 34px;
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 26px;
}
.overlay-current, .overlay-board {
  background: rgba(9, 12, 20, 0.80);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 28px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.overlay-current {
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.overlay-current h1 {
  margin: 0 0 16px;
  font-size: 34px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
}
.overlay-current img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #07090e;
  transition: transform 90ms ease, filter 90ms ease, box-shadow 90ms ease;
}
.overlay-current h2 {
  margin: 18px 0 0;
  font-size: 42px;
  line-height: 1.05;
}
.overlay-board { padding: 18px; overflow: hidden; }
.overlay-board .tier-row { min-height: 118px; grid-template-columns: 86px 1fr; }
.overlay-board .game-chip { width: 82px; }
.overlay-board .game-chip img { width: 82px; height: 122px; }
.overlay-board .small-title { display: none; }
.empty-current {
  display: grid;
  place-items: center;
  height: 100%;
  text-align: center;
  color: var(--muted);
  font-size: 28px;
  font-weight: 800;
}

.is-spinning .spinning-art {
  transform: scale(1.025);
  filter: saturate(1.18) contrast(1.05);
  box-shadow: 0 0 0 2px rgba(100,210,255,0.32), 0 22px 70px rgba(100,210,255,0.18);
}
.is-spinning-box {
  border-color: rgba(100,210,255,0.56);
}

@media (max-width: 1000px) {
  .control-grid { grid-template-columns: 1fr; }
}

/* Clean OBS spinner source: no card outline, no top text, transparent background. */
.spinner-only-wrap {
  width: 100vw;
  height: 100vh;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
}

.spinner-page .spinner-current {
  width: min(72vw, 720px);
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.spinner-page .spinner-current h1,
.ranking-page .ranking-current h1 {
  display: none;
}

.spinner-page .spinner-current img {
  width: auto;
  max-width: min(72vw, 720px);
  height: auto;
  max-height: 78vh;
  aspect-ratio: auto;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.spinner-page .spinner-current h2 {
  margin: 16px 0 0;
  width: 100%;
  font-size: clamp(42px, 6vw, 92px);
  line-height: 0.96;
  text-align: center;
  text-shadow: 0 6px 24px rgba(0,0,0,0.95), 0 2px 4px rgba(0,0,0,0.95);
}

.spinner-page .empty-current {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.spinner-page.is-spinning .spinning-art,
.spinner-page .is-spinning .spinning-art {
  transform: scale(1.025);
  filter: saturate(1.14) contrast(1.04);
  box-shadow: none;
}

.spinner-page .is-spinning-box {
  border-color: transparent;
}

/* Ranking OBS source keeps the board, but removes the unnecessary heading above the current game. */
.ranking-page .ranking-current {
  justify-content: center;
}

.ranking-page .ranking-current h2 {
  margin-top: 18px;
}


/* --- Gentle winner reveal --- */
.winner-bounce {
  animation: winnerBounce 950ms cubic-bezier(0.2, 0.85, 0.2, 1);
  transform-origin: center center;
}

@keyframes winnerBounce {
  0% {
    transform: scale(0.92) translateY(18px);
    opacity: 0.78;
  }
  38% {
    transform: scale(1.035) translateY(-10px);
    opacity: 1;
  }
  68% {
    transform: scale(0.992) translateY(2px);
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.winner-bounce-box {
  border-color: rgba(100,210,255,0.34);
}

/* OBS pages: no bottom text under the current winner art */
.spinner-page .overlay-current h2,
.ranking-page .overlay-current h2 {
  display: none;
}

/* Ranking board source: art only, no tiny text at all */
.ranking-page .overlay-board .small-title,
.spinner-page .overlay-board .small-title {
  display: none;
}


/* --- Spinner winner: keep gently breathing/bouncing after it lands --- */
.spinner-page .winner-bounce {
  animation: spinnerWinnerFloat 2.8s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes spinnerWinnerFloat {
  0%, 100% {
    transform: scale(1) translateY(0);
    filter: saturate(1.05) contrast(1.02);
  }
  50% {
    transform: scale(1.035) translateY(-14px);
    filter: saturate(1.12) contrast(1.04);
  }
}

/* --- 4K OBS layout for ranking source --- */
.ranking-page.overlay-page {
  width: 100vw;
  height: 100vh;
  background: transparent;
}

.ranking-page .overlay-wrap {
  width: 100vw;
  height: 100vh;
  padding: 48px;
  display: grid;
  grid-template-columns: 560px minmax(0, 1fr);
  gap: 34px;
}

.ranking-page .ranking-current {
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ranking-page .ranking-current img {
  width: min(100%, 500px);
  max-height: calc(100vh - 110px);
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ranking-page .overlay-board {
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
}

.ranking-page .tier-board {
  height: 100%;
  display: grid;
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.ranking-page .tier-row {
  min-height: 0;
  height: 100%;
  grid-template-columns: 92px 1fr;
  border-radius: 14px;
}

.ranking-page .tier-label {
  font-size: 44px;
}

.ranking-page .tier-items {
  height: 100%;
  padding: 10px;
  gap: 10px;
  overflow: hidden;
  align-items: center;
  align-content: center;
}

.ranking-page .game-chip {
  width: 92px;
}

.ranking-page .game-chip img {
  width: 92px;
  height: 138px;
  border-radius: 8px;
  border: 0;
  background: transparent;
}

/* Smaller cards when tiers get crowded in the 4K ranking board */
.ranking-page .tier-items:has(.game-chip:nth-child(12)) .game-chip {
  width: 78px;
}
.ranking-page .tier-items:has(.game-chip:nth-child(12)) .game-chip img {
  width: 78px;
  height: 117px;
}
.ranking-page .tier-items:has(.game-chip:nth-child(18)) .game-chip {
  width: 66px;
}
.ranking-page .tier-items:has(.game-chip:nth-child(18)) .game-chip img {
  width: 66px;
  height: 99px;
}

/* 4K spinner source clean framing */
.spinner-page .spinner-only-wrap {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 64px;
}

.spinner-page .spinner-current {
  width: min(900px, 86vw);
  height: min(1320px, 88vh);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  display: grid;
  place-items: center;
}

.spinner-page .spinner-current img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}


/* --- Bigger 4K ranking tiles --- */
.ranking-page .game-chip {
  width: 210px;
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
  transform-origin: center center;
  z-index: 1;
}

.ranking-page .game-chip img {
  width: 210px;
  height: 315px;
  border-radius: 14px;
  border: 0;
  background: transparent;
}

.ranking-page .tier-items {
  gap: 18px;
  padding: 18px;
  overflow: visible;
}

.ranking-page .tier-row {
  overflow: visible;
}

.ranking-page .overlay-board {
  overflow: visible;
}

.ranking-page .game-chip:hover,
.ranking-page .game-chip.has-review:hover {
  transform: scale(1.12);
  filter: saturate(1.18) contrast(1.08);
  z-index: 50;
}

.ranking-page .game-chip:hover img,
.control-page .game-chip:hover img {
  box-shadow: 0 0 0 5px #ffd166, 0 24px 80px rgba(255, 209, 102, 0.36);
}

.ranking-page .game-chip.has-review img {
  box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.65);
}

/* Auto-size down only when a tier starts getting crowded */
.ranking-page .tier-items:has(.game-chip:nth-child(9)) .game-chip {
  width: 175px;
}
.ranking-page .tier-items:has(.game-chip:nth-child(9)) .game-chip img {
  width: 175px;
  height: 262px;
}
.ranking-page .tier-items:has(.game-chip:nth-child(14)) .game-chip {
  width: 140px;
}
.ranking-page .tier-items:has(.game-chip:nth-child(14)) .game-chip img {
  width: 140px;
  height: 210px;
}
.ranking-page .tier-items:has(.game-chip:nth-child(20)) .game-chip {
  width: 112px;
}
.ranking-page .tier-items:has(.game-chip:nth-child(20)) .game-chip img {
  width: 112px;
  height: 168px;
}

/* Control page review form */
.review-editor {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,0.055);
}
.review-title {
  font-weight: 950;
  margin-bottom: 8px;
}
.review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.review-grid label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.review-grid select {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #111827;
  color: var(--text);
  padding: 7px 8px;
  font-weight: 900;
}
.review-editor textarea {
  width: 100%;
  min-height: 96px;
  margin-top: 10px;
  resize: vertical;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0d111b;
  color: var(--text);
  padding: 10px;
  font: inherit;
}
.small-help {
  font-size: 12px;
  margin-top: 7px;
}

/* Big clickable info bubble / modal */
.game-info-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.game-info-modal.open {
  display: block;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.58);
  backdrop-filter: blur(5px);
}
.modal-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1420px, calc(100vw - 96px));
  max-height: calc(100vh - 96px);
  transform: translate(-50%, -50%);
  overflow: auto;
  border-radius: 28px;
  border: 2px solid rgba(255,209,102,0.65);
  background: rgba(10, 14, 24, 0.96);
  box-shadow: 0 32px 130px rgba(0,0,0,0.72), 0 0 70px rgba(255,209,102,0.22);
  padding: 30px;
}
.modal-close {
  position: absolute;
  right: 22px;
  top: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 34px;
  padding: 0;
  line-height: 1;
  background: rgba(255,255,255,0.1);
  color: white;
  box-shadow: none;
}
.info-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 30px;
  align-items: start;
}
.info-art {
  width: 360px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 18px 80px rgba(0,0,0,0.46);
}
.info-kicker {
  color: #ffd166;
  font-size: 24px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.info-main h1 {
  margin: 6px 58px 18px 0;
  font-size: 54px;
  line-height: 1.02;
}
.overall-score {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 12px 18px;
  border-radius: 18px;
  background: rgba(255,209,102,0.12);
  border: 1px solid rgba(255,209,102,0.32);
  margin-bottom: 18px;
}
.overall-score span {
  color: var(--muted);
  font-weight: 900;
  font-size: 18px;
}
.overall-score strong {
  color: #ffd166;
  font-size: 34px;
}
.score-list {
  display: grid;
  gap: 10px;
}
.score-row {
  display: grid;
  grid-template-columns: 160px 1fr 76px;
  gap: 12px;
  align-items: center;
}
.score-name {
  font-weight: 900;
  color: #e8edf8;
}
.score-bar {
  height: 16px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
}
.score-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #64d2ff, #ffd166);
}
.score-value {
  text-align: right;
  font-weight: 1000;
  color: #ffd166;
}
.notes-box {
  margin-top: 22px;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255,255,255,0.065);
  border: 1px solid rgba(255,255,255,0.12);
}
.notes-box h2 {
  margin: 0 0 8px;
  color: #ffd166;
}
.notes-box p {
  margin: 0;
  color: #f4f7ff;
  font-size: 22px;
  line-height: 1.35;
}

@media (max-width: 1100px) {
  .info-layout {
    grid-template-columns: 1fr;
  }
  .info-art {
    width: min(360px, 100%);
  }
  .info-main h1 {
    font-size: 38px;
  }
}


/* Larger synced info popup for the 4K OBS ranking source */
.ranking-page .game-info-modal .modal-card {
  width: min(1680px, calc(100vw - 140px));
}
.ranking-page .game-info-modal .info-main h1 {
  font-size: 64px;
}
.ranking-page .game-info-modal .notes-box p {
  font-size: 26px;
}


/* Popup/hover is intentionally disabled on the spinner OBS source */
.spinner-page .game-info-modal {
  display: none !important;
}

.spinner-page .game-chip {
  pointer-events: none;
}

/* Ranking board only: hover/click feedback stays here */
.ranking-page .game-chip {
  pointer-events: auto;
}


/* Pending rank confirmation flow */
.confirm-rank-row {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.pending-tier-status {
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
}
.confirm-rank-button {
  width: 100%;
  font-size: 18px;
}
.rank-buttons button.selected-rank {
  outline: 4px solid #ffd166;
  box-shadow: 0 0 0 4px rgba(255,209,102,0.24), var(--shadow);
  transform: translateY(-2px);
}

/* Hover sync from control page to the 4K ranking OBS source */
.ranking-page .game-chip.synced-hover,
.ranking-page .game-chip:hover {
  transform: scale(1.16);
  filter: saturate(1.22) contrast(1.1);
  z-index: 80;
}

.ranking-page .game-chip.synced-hover img,
.ranking-page .game-chip:hover img {
  box-shadow: 0 0 0 6px #ffd166, 0 28px 90px rgba(255, 209, 102, 0.46);
}

.ranking-page .game-chip.synced-hover::after {
  content: '';
  position: absolute;
  inset: -16px;
  border: 4px solid rgba(255,209,102,0.88);
  border-radius: 22px;
  animation: syncedHoverBob 1.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes syncedHoverBob {
  0%, 100% {
    transform: scale(1);
    opacity: 0.76;
  }
  50% {
    transform: scale(1.055);
    opacity: 1;
  }
}

/* Modal edit tools on the private control page */
.modal-edit-panel {
  margin-top: 22px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(255,209,102,0.28);
  background: rgba(255,209,102,0.07);
}
.modal-edit-panel h2 {
  margin: 0 0 12px;
  color: #ffd166;
}
.modal-edit-panel label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 900;
  margin-bottom: 10px;
}
.modal-edit-panel select,
.modal-edit-panel textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #0d111b;
  color: var(--text);
  padding: 9px 10px;
  font: inherit;
}
.modal-score-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.modal-edit-panel textarea {
  min-height: 130px;
  resize: vertical;
}
.modal-edit-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}


/* Fluid workflow: rank first, then save feedback */
.feedback-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.feedback-actions button {
  box-shadow: none;
}

.current-rank-status {
  color: #ffd166;
  font-weight: 950;
  font-size: 13px;
  white-space: nowrap;
}

.chip-actions {
  grid-template-columns: 1fr;
}

.chip-actions .mini-edit {
  width: 100%;
  border-radius: 8px;
  padding: 5px 4px;
  font-size: 11px;
  background: #ffd166;
  color: #10131b;
  box-shadow: none;
}

.review-editor {
  border-color: rgba(100,210,255,0.22);
}

.review-title::after {
  content: ' — save anytime';
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}


/* Control button/dropdown reliability */
.control-page .chip-actions select,
.control-page .chip-actions button {
  pointer-events: auto;
}

.control-page .editable-chip {
  pointer-events: auto;
}


/* --- Platform badges --- */
.platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  color: #f7fbff;
  background: rgba(12, 18, 30, 0.78);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
}

.platform-badge svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.platform-badge .platform-letter {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 13px;
  font-weight: 1000;
}

.platform-steam { background: rgba(23, 26, 33, 0.86); color: #dff3ff; }
.platform-playstation { background: rgba(0, 67, 156, 0.86); color: #ffffff; }
.platform-xbox { background: rgba(16, 124, 16, 0.86); color: #ffffff; }
.platform-switch { background: rgba(230, 0, 18, 0.86); color: #ffffff; }

.chip-art-wrap,
.current-art-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}

.chip-platform {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 5px;
}

.chip-platform span:not(.platform-letter) {
  display: none;
}

.chip-platform svg {
  width: 16px;
  height: 16px;
}

.current-platform {
  position: absolute;
  right: 16px;
  bottom: 16px;
  font-size: 18px;
  padding: 10px 14px;
}

.current-platform svg {
  width: 24px;
  height: 24px;
}

.title-platform {
  vertical-align: middle;
  margin-left: 8px;
}

.info-topline {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.info-platform {
  font-size: 18px;
  padding: 9px 13px;
}

.info-platform svg {
  width: 23px;
  height: 23px;
}

.scan-status {
  min-height: 22px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

/* Keep image sizing correct after wrapping art in chip-art-wrap */
.game-chip .chip-art-wrap img {
  width: 100%;
}

.overlay-current .current-art-wrap img {
  width: 100%;
}

/* --- Cleaner OBS info popup: no pulsing glow/bob effect --- */
.ranking-page .game-chip.synced-hover::after,
.ranking-page .game-chip:hover::after {
  display: none !important;
  animation: none !important;
}

.ranking-page .game-chip.synced-hover,
.ranking-page .game-chip:hover {
  transform: scale(1.08) !important;
  filter: saturate(1.08) contrast(1.04) !important;
}

.ranking-page .game-chip.synced-hover img,
.ranking-page .game-chip:hover img {
  box-shadow: 0 0 0 5px #ffd166, 0 18px 55px rgba(255, 209, 102, 0.22) !important;
}

/* --- Make the info bubble much bigger on the 4K ranking OBS source --- */
.ranking-page .game-info-modal .modal-card {
  width: min(2500px, calc(100vw - 220px)) !important;
  max-height: calc(100vh - 180px) !important;
  padding: 46px !important;
  border-radius: 34px !important;
}

.ranking-page .game-info-modal .info-layout {
  grid-template-columns: 560px 1fr !important;
  gap: 48px !important;
}

.ranking-page .game-info-modal .info-art {
  width: 560px !important;
  border-radius: 22px !important;
}

.ranking-page .game-info-modal .info-kicker {
  font-size: 34px !important;
}

.ranking-page .game-info-modal .info-main h1 {
  font-size: 92px !important;
  line-height: 0.98 !important;
  margin-bottom: 26px !important;
}

.ranking-page .game-info-modal .overall-score {
  padding: 18px 26px !important;
  border-radius: 22px !important;
  margin-bottom: 28px !important;
}

.ranking-page .game-info-modal .overall-score span {
  font-size: 28px !important;
}

.ranking-page .game-info-modal .overall-score strong {
  font-size: 52px !important;
}

.ranking-page .game-info-modal .score-list {
  gap: 18px !important;
}

.ranking-page .game-info-modal .score-row {
  grid-template-columns: 260px 1fr 120px !important;
  gap: 22px !important;
}

.ranking-page .game-info-modal .score-name {
  font-size: 28px !important;
}

.ranking-page .game-info-modal .score-bar {
  height: 26px !important;
}

.ranking-page .game-info-modal .score-value {
  font-size: 28px !important;
}

.ranking-page .game-info-modal .notes-box {
  margin-top: 34px !important;
  padding: 32px !important;
  border-radius: 26px !important;
}

.ranking-page .game-info-modal .notes-box h2 {
  font-size: 42px !important;
}

.ranking-page .game-info-modal .notes-box p {
  font-size: 38px !important;
  line-height: 1.35 !important;
}

.ranking-page .game-info-modal .modal-close {
  width: 70px !important;
  height: 70px !important;
  font-size: 46px !important;
}


/* Fix platform patch: keep ranked tile controls clickable while hover-sync/platform badges are active */
.control-page .editable-chip .chip-actions,
.control-page .editable-chip .chip-actions *,
.control-page .editable-chip select,
.control-page .editable-chip button {
  pointer-events: auto !important;
}

.control-page .editable-chip .chip-actions {
  position: relative;
  z-index: 80;
}

.control-page .editable-chip .mini-edit,
.control-page .editable-chip .mini-back,
.control-page .editable-chip select {
  position: relative;
  z-index: 90;
}

.control-page .editable-chip .chip-platform {
  pointer-events: none !important;
}


/* Spinner sound is generated in-browser. Use /spinner?sound=0 to mute or /spinner?volume=0.15 to lower it. */


/* --- Platform badge visibility cleanup ---
   Platform is only shown inside the clicked game info popout. */
.chip-platform,
.current-platform,
.title-platform {
  display: none !important;
}

.game-info-modal .info-platform {
  display: inline-flex !important;
}

/* --- 4K spinner sizing fix ---
   Make the spinner artwork large again on a 3840x2160 OBS canvas. */
.spinner-page .spinner-only-wrap {
  width: 100vw !important;
  height: 100vh !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
}

.spinner-page .spinner-current {
  width: 100vw !important;
  height: 100vh !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  display: grid !important;
  place-items: center !important;
}

.spinner-page .spinner-current .current-art-wrap {
  width: auto !important;
  height: 92vh !important;
  max-width: 92vw !important;
  aspect-ratio: 2 / 3 !important;
  display: block !important;
}

.spinner-page .spinner-current img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Keep the winner bounce from shrinking the art too much visually */
.spinner-page .winner-bounce {
  transform-origin: center center !important;
}


/* Spinner sound control panel */
.sound-options-box {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.055);
}

.sound-options-box label {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.sound-options-box input[type="range"] {
  width: 100%;
}

.sound-check {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.sound-check input {
  width: auto;
}

.modal-artwork-help {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin-top: -4px;
  margin-bottom: 8px;
}


/* Viewer feedback threads */
.viewer-feedback-section{margin-top:30px;padding:24px;border-radius:24px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12)}
.viewer-feedback-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.viewer-feedback-header h2{margin:0;font-size:28px;line-height:1}
.viewer-feedback-sub,.viewer-feedback-rules,.viewer-feedback-date,.viewer-feedback-empty{color:var(--muted);font-size:13px;font-weight:800}
.viewer-feedback-form{display:grid;grid-template-columns:1fr 150px;gap:10px;margin-bottom:18px}
.viewer-feedback-form textarea{grid-column:1/-1;min-height:88px;resize:vertical}
.viewer-feedback-form button,.viewer-feedback-form .viewer-feedback-rules{grid-column:1/-1}
.viewer-feedback-form input,.viewer-feedback-form select,.viewer-feedback-form textarea{width:100%;border-radius:14px;border:1px solid var(--line);background:#0d111b;color:var(--text);padding:12px;font:inherit;font-weight:800}
.viewer-feedback-list{display:grid;gap:12px}
.viewer-feedback-item{padding:16px;border-radius:18px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.1)}
.viewer-feedback-top{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:16px}
.viewer-feedback-top span{color:#ffd166;font-weight:1000}
.viewer-feedback-item p{margin:10px 0;color:var(--text);line-height:1.35}
.feedback-delete{margin-top:10px;padding:8px 10px;border-radius:12px;font-size:12px;background:rgba(255,80,80,.15);border:1px solid rgba(255,80,80,.3);color:#ffd0d0}
.viewer-page .chip-actions,.viewer-page .modal-edit,.viewer-page .modal-edit-actions,.viewer-page .feedback-delete{display:none!important}
.viewer-page .viewer-feedback-form,.viewer-page .viewer-feedback-form input,.viewer-page .viewer-feedback-form select,.viewer-page .viewer-feedback-form textarea,.viewer-page .viewer-feedback-form button{display:block!important}
.viewer-page .viewer-feedback-form{display:grid!important}
.ranking-page .game-info-modal .viewer-feedback-section{margin-top:34px;padding:32px}
.ranking-page .game-info-modal .viewer-feedback-header h2{font-size:42px}
.ranking-page .game-info-modal .viewer-feedback-sub,.ranking-page .game-info-modal .viewer-feedback-rules,.ranking-page .game-info-modal .viewer-feedback-date,.ranking-page .game-info-modal .viewer-feedback-empty{font-size:22px}
.ranking-page .game-info-modal .viewer-feedback-top{font-size:28px}
.ranking-page .game-info-modal .viewer-feedback-item p{font-size:28px}
.ranking-page .game-info-modal .viewer-feedback-form input,.ranking-page .game-info-modal .viewer-feedback-form select,.ranking-page .game-info-modal .viewer-feedback-form textarea,.ranking-page .game-info-modal .viewer-feedback-form button{font-size:24px}


/* Playtime review stats */
.playtime-box {
  margin: 18px 0;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.12);
}
.playtime-box h2 { margin: 0 0 12px; }
.playtime-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.playtime-grid div {
  padding: 14px;
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.08);
}
.playtime-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.playtime-grid strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
  font-weight: 1000;
}
.playtime-box p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

/* Viewer feedback threads */
.viewer-feedback-section{margin-top:30px;padding:24px;border-radius:24px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12)}
.viewer-feedback-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.viewer-feedback-header h2{margin:0;font-size:28px;line-height:1}
.viewer-feedback-sub,.viewer-feedback-rules,.viewer-feedback-date,.viewer-feedback-empty{color:var(--muted);font-size:13px;font-weight:800}
.viewer-feedback-form{display:grid;grid-template-columns:1fr 150px;gap:10px;margin-bottom:18px}
.viewer-feedback-form textarea{grid-column:1/-1;min-height:88px;resize:vertical}
.viewer-feedback-form button,.viewer-feedback-form .viewer-feedback-rules{grid-column:1/-1}
.viewer-feedback-form input,.viewer-feedback-form select,.viewer-feedback-form textarea{width:100%;border-radius:14px;border:1px solid var(--line);background:#0d111b;color:var(--text);padding:12px;font:inherit;font-weight:800}
.viewer-feedback-list{display:grid;gap:12px}
.viewer-feedback-item{padding:16px;border-radius:18px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.1)}
.viewer-feedback-top{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:16px}
.viewer-feedback-top span{color:#ffd166;font-weight:1000}
.viewer-feedback-item p{margin:10px 0;color:var(--text);line-height:1.35}.feedback-delete{margin-top:10px;padding:8px 10px;border-radius:12px;font-size:12px;background:rgba(255,80,80,.15);border:1px solid rgba(255,80,80,.3);color:#ffd0d0}
.viewer-page .chip-actions,.viewer-page .modal-edit-panel,.viewer-page .modal-edit,.viewer-page .modal-edit-actions,.viewer-page .feedback-delete{display:none!important}
.viewer-page .viewer-feedback-form,.viewer-page .viewer-feedback-form input,.viewer-page .viewer-feedback-form select,.viewer-page .viewer-feedback-form textarea,.viewer-page .viewer-feedback-form button{display:block!important}
.viewer-page .viewer-feedback-form{display:grid!important}
.ranking-page .game-info-modal .playtime-box{margin:24px 0;padding:28px}.ranking-page .game-info-modal .playtime-grid span{font-size:20px}.ranking-page .game-info-modal .playtime-grid strong{font-size:38px}.ranking-page .game-info-modal .playtime-box p{font-size:20px}
.ranking-page .game-info-modal .viewer-feedback-section{margin-top:34px;padding:32px}.ranking-page .game-info-modal .viewer-feedback-header h2{font-size:42px}.ranking-page .game-info-modal .viewer-feedback-sub,.ranking-page .game-info-modal .viewer-feedback-rules,.ranking-page .game-info-modal .viewer-feedback-date,.ranking-page .game-info-modal .viewer-feedback-empty{font-size:22px}.ranking-page .game-info-modal .viewer-feedback-top{font-size:28px}.ranking-page .game-info-modal .viewer-feedback-item p{font-size:28px}.ranking-page .game-info-modal .viewer-feedback-form input,.ranking-page .game-info-modal .viewer-feedback-form select,.ranking-page .game-info-modal .viewer-feedback-form textarea,.ranking-page .game-info-modal .viewer-feedback-form button{font-size:24px}
@media (max-width: 800px) {.playtime-grid{grid-template-columns:1fr}.viewer-feedback-form{grid-template-columns:1fr}.ranking-page .game-info-modal .viewer-feedback-header h2{font-size:30px}.ranking-page .game-info-modal .viewer-feedback-top,.ranking-page .game-info-modal .viewer-feedback-item p{font-size:20px}.ranking-page .game-info-modal .playtime-grid strong{font-size:28px}}


/* === Bigger viewer/community modal + full community scoring === */
.game-info-modal .modal-card {
  width: min(96vw, 1560px) !important;
  max-height: 96vh !important;
  padding: 28px !important;
  border-radius: 28px !important;
}

.game-info-modal .info-layout {
  grid-template-columns: 360px minmax(0, 1fr) !important;
  gap: 30px !important;
}

.game-info-modal .info-art {
  width: 360px !important;
  max-height: 82vh !important;
}

.game-info-modal .info-main h1 {
  font-size: clamp(42px, 4vw, 76px) !important;
  line-height: .95 !important;
}

.score-summary-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 14px 0 20px;
}

.score-summary-row .overall-score {
  min-width: 230px;
}

.community-score strong {
  color: #64d2ff;
}

.playtime-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.regular-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(100, 210, 255, .14);
  border: 1px solid rgba(100, 210, 255, .32);
  color: #9be6ff;
  font-size: 13px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.regular-play-box {
  border-color: rgba(100, 210, 255, .35) !important;
}

.viewer-feedback-section {
  padding: 28px !important;
}

.viewer-feedback-header h2 {
  font-size: 34px !important;
}

.viewer-feedback-sub {
  font-size: 16px !important;
}

.viewer-feedback-form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  margin: 20px 0 24px !important;
}

.feedback-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.community-score-grid,
.modal-score-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 12px;
}

.community-score-grid label,
.modal-score-grid label {
  font-weight: 950;
}

.viewer-feedback-form input,
.viewer-feedback-form select,
.viewer-feedback-form textarea,
.viewer-feedback-form button {
  font-size: 18px !important;
  min-height: 46px;
}

.viewer-feedback-form textarea {
  min-height: 130px !important;
}

.viewer-feedback-item {
  padding: 20px !important;
}

.viewer-feedback-top {
  font-size: 22px !important;
}

.viewer-feedback-top span em {
  margin-left: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: var(--muted);
  font-style: normal;
  text-transform: uppercase;
  font-size: 12px;
}

.viewer-feedback-item p {
  font-size: 20px !important;
}

.viewer-score-mini {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.viewer-score-mini span {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  padding: 8px;
  color: var(--muted);
  font-weight: 850;
}

.viewer-score-mini b {
  display: block;
  color: var(--text);
  font-size: .82em;
}

.feedback-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.feedback-admin-actions button {
  padding: 8px 12px;
  font-size: 13px;
}

.status-pending {
  border-color: rgba(255, 209, 102, .35) !important;
  background: rgba(255, 209, 102, .06) !important;
}

.status-approved {
  border-color: rgba(100, 210, 255, .25) !important;
}

.status-hidden {
  opacity: .65;
}

.viewer-page .game-info-modal .modal-card {
  width: min(98vw, 1500px) !important;
}

.viewer-page .game-info-modal .info-layout {
  grid-template-columns: 340px minmax(0, 1fr) !important;
}

.viewer-page .game-info-modal .info-art {
  width: 340px !important;
}

@media (max-width: 900px) {
  .game-info-modal .modal-card {
    width: 98vw !important;
    padding: 16px !important;
  }

  .game-info-modal .info-layout,
  .viewer-page .game-info-modal .info-layout {
    grid-template-columns: 1fr !important;
  }

  .game-info-modal .info-art,
  .viewer-page .game-info-modal .info-art {
    width: 100% !important;
    max-height: 42vh !important;
    object-fit: contain !important;
  }

  .community-score-grid,
  .modal-score-grid,
  .viewer-score-mini {
    grid-template-columns: 1fr 1fr;
  }
}


/* === Wide readable community tier modal === */
.game-info-modal .modal-card {
  width: min(98vw, 1900px) !important;
  max-height: 96vh !important;
  padding: 34px !important;
}

.game-info-modal .info-layout,
.viewer-page .game-info-modal .info-layout {
  grid-template-columns: 420px minmax(0, 1fr) !important;
  gap: 38px !important;
}

.game-info-modal .info-art,
.viewer-page .game-info-modal .info-art {
  width: 420px !important;
  max-height: 84vh !important;
}

.game-info-modal .info-main h1 {
  font-size: clamp(52px, 4.2vw, 92px) !important;
  max-width: 100% !important;
}

.score-summary-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
  gap: 16px !important;
}

.score-summary-row .overall-score {
  width: 100% !important;
  min-width: 0 !important;
  padding: 16px 18px !important;
}

.score-summary-row .overall-score span {
  font-size: 16px !important;
}

.score-summary-row .overall-score strong {
  font-size: 34px !important;
}

.community-tier-score strong {
  color: #ffd166;
}

.playtime-box {
  padding: 22px !important;
}

.playtime-box h2,
.viewer-feedback-header h2,
.notes-box h2 {
  font-size: 34px !important;
}

.playtime-grid {
  grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
  gap: 14px !important;
}

.playtime-grid div {
  padding: 16px !important;
}

.playtime-grid span {
  font-size: 13px !important;
}

.playtime-grid strong {
  font-size: 32px !important;
}

.playtime-box p,
.viewer-feedback-rules,
.feedback-helper {
  font-size: 16px !important;
  line-height: 1.35 !important;
}

.viewer-feedback-form {
  gap: 18px !important;
}

.feedback-form-row {
  display: grid !important;
  grid-template-columns: 1fr 320px !important;
  gap: 16px !important;
}

.feedback-form-row label {
  display: grid;
  gap: 8px;
  font-weight: 1000;
}

.feedback-form-row label span {
  color: var(--muted);
  font-size: .85em;
  font-weight: 800;
}

.community-score-grid {
  grid-template-columns: repeat(7, minmax(120px, 1fr)) !important;
  gap: 10px !important;
}

.community-score-grid label {
  display: grid;
  gap: 7px;
  font-size: 14px !important;
}

.viewer-feedback-form input,
.viewer-feedback-form select,
.viewer-feedback-form textarea,
.viewer-feedback-form button {
  font-size: 18px !important;
  min-height: 52px !important;
  padding: 13px 14px !important;
}

.viewer-feedback-form textarea {
  min-height: 150px !important;
}

.viewer-feedback-list {
  gap: 16px !important;
}

.viewer-feedback-item {
  padding: 24px !important;
}

.viewer-feedback-top {
  font-size: 24px !important;
}

.viewer-score-mini {
  grid-template-columns: repeat(7, minmax(110px, 1fr)) !important;
}

.viewer-score-mini span {
  font-size: 14px !important;
}

.viewer-feedback-item p {
  font-size: 22px !important;
  line-height: 1.4 !important;
}

.viewer-feedback-empty,
.viewer-feedback-date,
.viewer-feedback-sub {
  font-size: 16px !important;
}

@media (max-width: 1200px) {
  .game-info-modal .info-layout,
  .viewer-page .game-info-modal .info-layout {
    grid-template-columns: 320px minmax(0, 1fr) !important;
  }

  .game-info-modal .info-art,
  .viewer-page .game-info-modal .info-art {
    width: 320px !important;
  }

  .community-score-grid,
  .viewer-score-mini {
    grid-template-columns: repeat(4, minmax(120px, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .game-info-modal .info-layout,
  .viewer-page .game-info-modal .info-layout {
    grid-template-columns: 1fr !important;
  }

  .game-info-modal .info-art,
  .viewer-page .game-info-modal .info-art {
    width: 100% !important;
  }

  .score-summary-row,
  .playtime-grid,
  .feedback-form-row,
  .community-score-grid,
  .viewer-score-mini {
    grid-template-columns: 1fr !important;
  }
}


/* === Viewer repair: wide responsive page, visible rankings, cleaner text, fieldset titles === */
html {
  scroll-behavior: smooth;
}

body.viewer-page,
.viewer-page.overlay-page {
  width: 100% !important;
  height: auto !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background:
    radial-gradient(circle at top left, rgba(100, 210, 255, .18), transparent 32%),
    radial-gradient(circle at top right, rgba(255,255,255,.10), transparent 30%),
    #10131b !important;
  padding: clamp(14px, 2vw, 34px) !important;
}

.viewer-about-shell,
.viewer-howto-shell,
.viewer-page .overlay-wrap {
  width: min(96vw, 2240px) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.viewer-about-card {
  border-radius: 36px !important;
  background: linear-gradient(115deg, rgba(93,205,255,.96), rgba(220,248,255,.98) 42%, #fff) !important;
  padding: clamp(24px, 3vw, 60px) !important;
  color: #07111d !important;
  box-shadow: 0 30px 110px rgba(0,0,0,.30) !important;
}

.viewer-about-hero {
  display: grid !important;
  grid-template-columns: clamp(170px, 13vw, 260px) minmax(0, 1fr) !important;
  gap: clamp(24px, 3vw, 52px) !important;
  align-items: center !important;
  margin-bottom: clamp(32px, 4vw, 64px) !important;
}

.viewer-about-photo-wrap {
  width: clamp(170px, 13vw, 260px) !important;
  height: clamp(170px, 13vw, 260px) !important;
  position: relative;
}

.viewer-about-photo-wrap::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  background: conic-gradient(from 180deg, #9146ff, #64d2ff, #fff, #ff0033, #9146ff);
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.24));
}

.viewer-about-avatar {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  border: 8px solid rgba(255,255,255,.96) !important;
}

.viewer-about-kicker {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(13px, .85vw, 18px) !important;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 900 !important;
  color: rgba(7,17,29,.62) !important;
}

.viewer-about-intro h1 {
  margin: 0 !important;
  font-size: clamp(72px, 6.5vw, 150px) !important;
  line-height: .84 !important;
  letter-spacing: -.06em;
  color: #07111d !important;
}

.viewer-about-handle {
  margin: 12px 0 22px !important;
  font-size: clamp(22px, 1.7vw, 42px) !important;
  font-weight: 900 !important;
  color: rgba(7,17,29,.72) !important;
}

.viewer-about-socials {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  justify-content: flex-start !important;
}

.social-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 54px !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.74) !important;
  color: #07111d !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  font-size: clamp(14px, .82vw, 17px) !important;
  border: 1px solid rgba(7,17,29,.12) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.12) !important;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
}

.social-link svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.social-link:hover {
  transform: translateY(-5px) scale(1.04);
  background: #fff !important;
  box-shadow: 0 22px 46px rgba(0,0,0,.20) !important;
}

.social-twitch { color: #5d22c8 !important; }
.social-x { color: #000 !important; }
.social-instagram { color: #d62976 !important; }
.social-youtube { color: #ff0033 !important; }

.viewer-skip-button {
  display: inline-flex;
  width: fit-content;
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 999px;
  background: #07111d;
  color: white;
  text-decoration: none;
  font-weight: 900;
  font-size: clamp(14px, .82vw, 17px);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.viewer-skip-button:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 24px 54px rgba(0,0,0,.28);
}

.viewer-about-content {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(24px, 2vw, 38px) !important;
  padding: 0 !important;
}

.viewer-about-block,
.viewer-howto-card {
  position: relative !important;
  margin-top: 24px !important;
  border: 2px solid rgba(7,17,29,.16) !important;
  border-radius: 30px !important;
  background: rgba(255,255,255,.76) !important;
  padding: clamp(32px, 2.4vw, 46px) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.10) !important;
  color: #07111d !important;
}

.viewer-about-block h2,
.viewer-howto-card h2 {
  position: absolute;
  top: 0;
  left: clamp(22px, 2vw, 38px);
  transform: translateY(-52%);
  margin: 0 !important;
  padding: 0 18px !important;
  background: linear-gradient(90deg, #e8faff, #ffffff) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(34px, 2.5vw, 58px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.035em;
  font-weight: 800 !important;
  color: #07111d !important;
  border-radius: 999px;
}

.viewer-about-block h2 span,
.viewer-howto-card h2 span {
  display: inline-block;
}

.viewer-about-block p {
  margin: 0 0 16px 0 !important;
  color: rgba(7,17,29,.82) !important;
  font-size: clamp(16px, .9vw, 21px) !important;
  line-height: 1.62 !important;
  font-weight: 520 !important;
}

.viewer-about-block p:last-child {
  margin-bottom: 0 !important;
}

.viewer-favourites-block {
  overflow: hidden !important;
}

.favourite-carousel {
  position: relative;
  overflow: hidden;
  min-height: clamp(260px, 22vw, 420px);
  border-radius: 26px;
  background: linear-gradient(90deg, rgba(7,17,29,.08), rgba(255,255,255,.42), rgba(7,17,29,.08));
  border: 1px solid rgba(7,17,29,.10);
  padding: 24px 0;
}

.favourite-carousel::before,
.favourite-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  width: 90px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.favourite-carousel::before {
  left: 0;
  background: linear-gradient(90deg, rgba(239,251,255,1), rgba(239,251,255,0));
}

.favourite-carousel::after {
  right: 0;
  background: linear-gradient(270deg, rgba(239,251,255,1), rgba(239,251,255,0));
}

.favourite-carousel-track {
  display: flex;
  gap: 18px;
  width: max-content;
  min-height: clamp(230px, 20vw, 370px);
  animation: favourite-scroll 55s linear infinite;
  padding: 0 18px;
}

.favourite-carousel:hover .favourite-carousel-track {
  animation-play-state: paused;
}

.favourite-card {
  width: clamp(135px, 10vw, 210px);
  aspect-ratio: 2 / 3;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(7,17,29,.16);
  box-shadow: 0 18px 44px rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.55);
  flex: 0 0 auto;
}

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

/* How-to steps */
.viewer-howto-shell {
  margin-top: 28px !important;
  margin-bottom: 34px !important;
  scroll-margin-top: 28px;
}

.viewer-howto-card h2 {
  background: #ffffff !important;
}

.viewer-howto-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.viewer-howto-steps div {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 20px;
  background: rgba(100,210,255,.13);
  border: 1px solid rgba(7,17,29,.08);
}

.viewer-howto-steps strong {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: #07111d;
  color: white;
  font-size: 24px;
  font-weight: 1000;
}

.viewer-howto-steps span {
  font-size: clamp(15px, .9vw, 19px);
  line-height: 1.35;
  font-weight: 650;
  color: rgba(7,17,29,.82);
}

/* Critical rankings repair */
.viewer-page .overlay-wrap {
  display: block !important;
  height: auto !important;
  min-height: 360px !important;
  padding: 0 0 140px 0 !important;
  overflow: visible !important;
}

.viewer-page .overlay-current,
.viewer-page #overlayCurrent {
  display: none !important;
}

.viewer-page .overlay-board {
  display: block !important;
  width: 100% !important;
  min-height: 420px !important;
  padding: clamp(16px, 1.5vw, 28px) !important;
  background: rgba(9, 12, 20, .80) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 28px !important;
}

.viewer-page .tier-board {
  display: grid !important;
  gap: 14px !important;
  width: 100% !important;
}

.viewer-page .tier-row {
  display: grid !important;
  grid-template-columns: clamp(76px, 5vw, 118px) minmax(0, 1fr) !important;
  min-height: clamp(150px, 12vw, 235px) !important;
}

.viewer-page .tier-label {
  font-size: clamp(36px, 3vw, 62px) !important;
}

.viewer-page .tier-items {
  gap: clamp(10px, 1vw, 20px) !important;
  padding: clamp(12px, 1.2vw, 22px) !important;
}

.viewer-page .game-chip {
  width: clamp(92px, 7.8vw, 158px) !important;
}

.viewer-page .game-chip img,
.viewer-page .chip-art-wrap img {
  width: 100% !important;
}

.viewer-page .small-title {
  font-size: clamp(11px, .72vw, 15px) !important;
  line-height: 1.14 !important;
}

@keyframes favourite-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 1300px) {
  .viewer-about-content,
  .viewer-howto-steps {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 780px) {
  .viewer-about-hero {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .viewer-about-socials {
    justify-content: center !important;
  }

  .social-link span {
    display: none !important;
  }

  .viewer-about-block h2,
  .viewer-howto-card h2 {
    left: 18px;
    font-size: 32px !important;
  }

  .viewer-howto-steps div {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .viewer-howto-steps strong {
    width: 42px;
    height: 42px;
    font-size: 20px;
  }
}


/* === Polished fixes for favourite section and ranking steps === */

/* Give the fieldset style enough room so titles never clip */
.viewer-about-block,
.viewer-howto-card {
  overflow: visible !important;
  padding-top: clamp(42px, 3vw, 62px) !important;
}

.viewer-about-block h2,
.viewer-howto-card h2 {
  z-index: 4 !important;
  max-width: calc(100% - 48px) !important;
  white-space: normal !important;
  overflow: visible !important;
}

/* Favourite title was being clipped by the carousel card */
.viewer-favourites-block {
  overflow: visible !important;
}

.viewer-favourites-block .favourite-carousel {
  overflow: hidden !important;
  margin-top: 8px !important;
}

/* Make the favourite artwork feel intentional and premium */
.favourite-carousel {
  min-height: clamp(300px, 22vw, 430px) !important;
  background:
    linear-gradient(90deg, rgba(7,17,29,.06), rgba(255,255,255,.70), rgba(7,17,29,.06)) !important;
  border: 1px solid rgba(7,17,29,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 12px 28px rgba(0,0,0,.08) !important;
}

.favourite-carousel-track {
  min-height: clamp(260px, 20vw, 385px) !important;
  gap: clamp(14px, 1.2vw, 24px) !important;
  animation-duration: 62s !important;
}

.favourite-card {
  width: clamp(150px, 10.5vw, 225px) !important;
  border-radius: 24px !important;
  background: #111827 !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.28) !important;
  border: 2px solid rgba(255,255,255,.72) !important;
  transform: translateZ(0);
}

.favourite-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* The steps card looked muddy. Make it match the rest of the page. */
.viewer-howto-card {
  background:
    linear-gradient(135deg, rgba(235, 250, 255, .96), rgba(255,255,255,.94)) !important;
  border: 2px solid rgba(100,210,255,.30) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.20) !important;
}

.viewer-howto-card h2 {
  background:
    linear-gradient(90deg, #e9faff 0%, #ffffff 80%) !important;
  color: #07111d !important;
}

.viewer-howto-steps {
  gap: clamp(14px, 1.4vw, 24px) !important;
}

.viewer-howto-steps div {
  min-height: 92px !important;
  padding: clamp(16px, 1.4vw, 24px) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(219,246,255,.86)) !important;
  border: 1px solid rgba(7,17,29,.10) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.08) !important;
}

.viewer-howto-steps strong {
  background:
    linear-gradient(135deg, #07111d, #12395c) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(7,17,29,.25) !important;
}

.viewer-howto-steps span {
  color: rgba(7,17,29,.78) !important;
  font-weight: 720 !important;
}

/* Keep large desktop layouts professional without crushing content */
.viewer-about-card {
  width: 100% !important;
}

.viewer-about-content {
  grid-template-columns: repeat(2, minmax(420px, 1fr)) !important;
}

@media (max-width: 1200px) {
  .viewer-about-content {
    grid-template-columns: 1fr !important;
  }

  .viewer-howto-steps {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .viewer-about-block,
  .viewer-howto-card {
    padding-top: 44px !important;
  }

  .viewer-about-block h2,
  .viewer-howto-card h2 {
    max-width: calc(100% - 24px) !important;
  }

  .favourite-card {
    width: 135px !important;
  }
}


/* === Better skip CTA, popout scroll hint, and community tierlist === */

/* Make the skip button more visible and obviously clickable */
.viewer-skip-button {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  background: linear-gradient(135deg, #061018 0%, #12395c 55%, #061018 100%) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.28),
    0 0 0 3px rgba(100,210,255,.18) !important;
  animation: skip-pulse 2.6s ease-in-out infinite;
}

.viewer-skip-button::before {
  content: "";
  position: absolute;
  inset: -30% -70%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.85) 48%, transparent 62%);
  transform: translateX(-70%);
  animation: skip-shine 3.4s ease-in-out infinite;
  z-index: -1;
}

.viewer-skip-button::after {
  content: "↓";
  margin-left: 10px;
  font-size: 1.08em;
  animation: skip-arrow-bounce 1.2s ease-in-out infinite;
}

@keyframes skip-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

@keyframes skip-shine {
  0%, 20% { transform: translateX(-75%); }
  55%, 100% { transform: translateX(75%); }
}

@keyframes skip-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* Helpful temporary hint inside viewer popout */
.viewer-page .game-info-modal.open .modal-card::after {
  content: "Scroll down to leave your own community tier, scores, and feedback";
  position: sticky;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: table;
  margin: 18px auto 0 auto;
  max-width: min(92%, 720px);
  padding: 12px 18px 12px 46px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 22px 50%, #64d2ff 0 7px, transparent 8px),
    linear-gradient(135deg, rgba(7,17,29,.94), rgba(18,57,92,.94));
  color: white;
  font-size: clamp(13px, .85vw, 16px);
  font-weight: 900;
  text-align: center;
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
  z-index: 10;
  pointer-events: none;
  animation: community-scroll-hint 8s ease forwards;
}

@keyframes community-scroll-hint {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
  10%, 72% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(12px); visibility: hidden; }
}

/* Section headers above Kyle and Community tierlists */
.tierlist-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 22px;
  margin: 0 0 18px 0;
  padding: 18px 22px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(100,210,255,.08));
  border: 1px solid rgba(255,255,255,.14);
}

.tierlist-section-header span {
  display: block;
  margin-bottom: 4px;
  color: #9be6ff;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 13px;
}

.tierlist-section-header h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(30px, 2.2vw, 52px);
  line-height: .95;
  letter-spacing: -.04em;
}

.tierlist-section-header p {
  max-width: 660px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(14px, .85vw, 18px);
  line-height: 1.35;
  font-weight: 750;
}

.community-tierlist-section {
  margin-top: clamp(34px, 4vw, 72px);
  padding-top: clamp(20px, 2vw, 34px);
  border-top: 1px solid rgba(100,210,255,.22);
}

.community-tierlist-section .tierlist-section-header {
  background:
    linear-gradient(135deg, rgba(100,210,255,.14), rgba(145,70,255,.12)),
    rgba(255,255,255,.04);
  border-color: rgba(100,210,255,.25);
}

.community-tierlist-section .tierlist-section-header span {
  color: #d7b7ff;
}

.community-tier-board {
  display: grid;
  gap: 14px;
}

/* Community tier rows use a different palette to make it visually separate from Kyle's */
.community-tier-row {
  background: rgba(17, 24, 39, .72) !important;
  border: 1px solid rgba(100,210,255,.18) !important;
  box-shadow: 0 14px 44px rgba(0,0,0,.16);
}

.community-tier-row .tier-label {
  color: white !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.community-tier-S .tier-label { background: linear-gradient(135deg, #7c3aed, #ec4899) !important; }
.community-tier-A .tier-label { background: linear-gradient(135deg, #2563eb, #06b6d4) !important; }
.community-tier-B .tier-label { background: linear-gradient(135deg, #0891b2, #22c55e) !important; }
.community-tier-C .tier-label { background: linear-gradient(135deg, #16a34a, #84cc16) !important; }
.community-tier-D .tier-label { background: linear-gradient(135deg, #f59e0b, #f97316) !important; }
.community-tier-F .tier-label { background: linear-gradient(135deg, #ef4444, #7f1d1d) !important; }

.community-chip .chip-art-wrap {
  position: relative;
}

.community-tier-chip-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(7,17,29,.88);
  color: white;
  font-size: 13px;
  font-weight: 1000;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 8px 18px rgba(0,0,0,.30);
}

.community-chip-meta {
  margin-top: 5px;
  font-size: clamp(10px, .62vw, 13px);
  font-weight: 850;
  color: #9be6ff;
  text-align: center;
  line-height: 1.15;
}

.community-empty-tier {
  display: flex;
  align-items: center;
  min-height: 80px;
  color: rgba(255,255,255,.38);
  font-weight: 900;
  font-size: clamp(13px, .82vw, 18px);
  padding: 12px 18px;
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 16px;
}

@media (max-width: 900px) {
  .tierlist-section-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .viewer-page .game-info-modal.open .modal-card::after {
    border-radius: 18px;
    padding-left: 18px;
    background: linear-gradient(135deg, rgba(7,17,29,.94), rgba(18,57,92,.94));
  }
}


/* === Fun but cleaner tierlist headings and favourite movies === */

/* Kill the robotic header boxes above tierlists */
.tierlist-section-header {
  display: block !important;
  margin: 0 0 22px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tierlist-section-header div {
  display: block !important;
}

.tierlist-section-header span {
  display: inline-flex !important;
  align-items: center;
  width: fit-content;
  margin: 0 0 6px 0 !important;
  padding: 7px 12px !important;
  border-radius: 999px;
  background: rgba(100,210,255,.13);
  color: #9be6ff !important;
  border: 1px solid rgba(100,210,255,.22);
  font-size: clamp(12px, .72vw, 15px) !important;
  font-weight: 1000 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
}

.tierlist-section-header h2 {
  margin: 0 !important;
  font-family: "Segoe Script", "Bradley Hand ITC", "Comic Sans MS", cursive !important;
  font-size: clamp(44px, 4.1vw, 88px) !important;
  line-height: .98 !important;
  font-weight: 900 !important;
  letter-spacing: -.06em;
  color: #f5f7fb !important;
  text-shadow: 0 8px 26px rgba(0,0,0,.42);
}

.tierlist-section-header p {
  max-width: 820px !important;
  margin: 10px 0 0 0 !important;
  color: rgba(245,247,251,.72) !important;
  font-size: clamp(15px, .9vw, 19px) !important;
  line-height: 1.42;
  font-weight: 650 !important;
}

.community-tierlist-section {
  margin-top: clamp(48px, 5vw, 96px) !important;
  padding-top: clamp(28px, 3vw, 48px) !important;
  border-top: 1px solid rgba(100,210,255,.22) !important;
}

.community-tierlist-section .tierlist-section-header span {
  background: rgba(145,70,255,.16) !important;
  border-color: rgba(215,183,255,.26) !important;
  color: #d7b7ff !important;
}

.community-tierlist-section .tierlist-section-header h2 {
  color: #f2e9ff !important;
}

/* More visual character for the tierlist containers without boxing in the title */
.kyle-tier-board,
.community-tier-board {
  display: grid;
  gap: 14px;
}

/* Make favourite title fieldset behave properly */
.viewer-favourites-block,
.viewer-movies-block {
  overflow: visible !important;
}

/* Shared carousel styling for favourite games and movies */
.favourite-carousel,
.movie-carousel {
  position: relative;
  overflow: hidden !important;
  min-height: clamp(300px, 22vw, 430px) !important;
  border-radius: 26px;
  background:
    linear-gradient(90deg, rgba(7,17,29,.06), rgba(255,255,255,.70), rgba(7,17,29,.06)) !important;
  border: 1px solid rgba(7,17,29,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 12px 28px rgba(0,0,0,.08) !important;
  padding: 24px 0;
}

.favourite-carousel::before,
.favourite-carousel::after,
.movie-carousel::before,
.movie-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  width: 90px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.favourite-carousel::before,
.movie-carousel::before {
  left: 0;
  background: linear-gradient(90deg, rgba(239,251,255,1), rgba(239,251,255,0));
}

.favourite-carousel::after,
.movie-carousel::after {
  right: 0;
  background: linear-gradient(270deg, rgba(239,251,255,1), rgba(239,251,255,0));
}

.favourite-carousel-track,
.movie-carousel-track {
  display: flex;
  gap: clamp(14px, 1.2vw, 24px);
  width: max-content;
  min-height: clamp(260px, 20vw, 385px);
  animation: favourite-scroll 62s linear infinite;
  padding: 0 18px;
}

.movie-carousel-track {
  animation-duration: 72s;
}

.favourite-carousel:hover .favourite-carousel-track,
.movie-carousel:hover .movie-carousel-track {
  animation-play-state: paused;
}

.favourite-card,
.movie-card {
  width: clamp(150px, 10.5vw, 225px);
  aspect-ratio: 2 / 3;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #111827;
  box-shadow: 0 20px 48px rgba(0,0,0,.28);
  border: 2px solid rgba(255,255,255,.72);
  flex: 0 0 auto;
}

.favourite-card img,
.movie-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Control page favourite movie picker */
.favourite-movie-admin-panel {
  grid-column: 1 / -1;
}

.favourite-movie-admin-panel input {
  width: 100%;
  margin: 8px 0;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0d111b;
  color: var(--text);
  padding: 12px;
  font: inherit;
  font-weight: 800;
}

.fav-movie-admin-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.fav-movie-admin-item {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.05);
}

.fav-movie-admin-item img {
  width: 50px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 8px;
}

.fav-movie-admin-item span {
  font-weight: 900;
}

.movie-carousel-empty {
  padding: 34px;
  font-weight: 800;
  color: rgba(7,17,29,.70);
}

/* Reset the previous blocky how-to colours if this patch is installed on top */
.viewer-howto-card {
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(7,17,29,.14) !important;
}

@media (max-width: 1100px) {
  .tierlist-section-header h2 {
    font-size: 44px !important;
  }
}


/* === Control approval inbox and favourite media manager === */
.feedback-approval-inbox,
.favourite-media-manager {
  grid-column: 1 / -1;
}

.feedback-inbox-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.feedback-inbox-heading h2,
.favourite-media-manager h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1;
}

.feedback-inbox-heading p,
.favourite-media-manager p {
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 800;
}

#pendingFeedbackCount {
  min-width: 120px;
  text-align: center;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(255, 209, 102, .18);
  color: #ffd166;
  border: 1px solid rgba(255, 209, 102, .32);
  font-weight: 1000;
}

.pending-feedback-list {
  display: grid;
  gap: 14px;
}

.pending-feedback-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.12);
}

.pending-feedback-card > img {
  width: 96px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 14px;
  background: #07090e;
}

.pending-feedback-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pending-feedback-top h3 {
  margin: 0;
  font-size: 22px;
}

.pending-feedback-top span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(100,210,255,.14);
  color: #9be6ff;
  font-weight: 1000;
  white-space: nowrap;
}

.pending-user,
.pending-scores,
.pending-comment {
  margin: 8px 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.35;
}

.pending-comment {
  color: var(--text);
  font-weight: 750;
}

.pending-feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.pending-feedback-actions button {
  padding: 9px 12px;
}

.pending-feedback-empty {
  padding: 24px;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.18);
  color: var(--muted);
  font-weight: 900;
}

.media-manager-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}

.media-manager-grid section {
  padding: 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.12);
}

.media-manager-grid h3 {
  margin: 0 0 12px;
  font-size: 22px;
}

.media-manager-grid input {
  width: 100%;
  margin-bottom: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0d111b;
  color: var(--text);
  padding: 12px;
  font: inherit;
  font-weight: 800;
}

.media-drop-zone {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 140px;
  margin-bottom: 12px;
  padding: 18px;
  border-radius: 18px;
  border: 2px dashed rgba(100,210,255,.38);
  background: rgba(100,210,255,.08);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.media-drop-zone input {
  display: none;
}

.media-drop-zone strong {
  color: #9be6ff;
  font-size: 20px;
}

.media-drop-zone span {
  color: var(--muted);
  font-weight: 800;
}

.media-drop-zone.dragging,
.media-drop-zone.has-image {
  transform: scale(1.015);
  background: rgba(100,210,255,.16);
  border-color: rgba(100,210,255,.72);
}

.fav-media-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.fav-media-item {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
}

.fav-media-item img {
  width: 58px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 8px;
}

.fav-media-item span {
  font-weight: 900;
}

.fav-media-item button {
  padding: 8px 10px;
}

@media (max-width: 900px) {
  .media-manager-grid {
    grid-template-columns: 1fr;
  }

  .pending-feedback-card {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .pending-feedback-card > img {
    width: 72px;
  }
}


/* === Fix duplicate favourite movie panel, Mantinia-like headers, and top scroll hint === */

/* Hide/remove the older Favourite movies URL panel so only the new drag/drop manager remains */
#favouriteMovieAdminPanel {
  display: none !important;
}

/* The real Mantinia font is not bundled here. If installed, the browser can use it.
   Otherwise this uses a similar fantasy/serif stack. */
.tierlist-section-header h2 {
  font-family: Mantinia, "Cinzel Decorative", Cinzel, "Trajan Pro", "Palatino Linotype", Palatino, Georgia, serif !important;
  letter-spacing: -0.035em !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

.viewer-about-block h2,
.viewer-howto-card h2 {
  font-family: Mantinia, "Cinzel Decorative", Cinzel, "Trajan Pro", "Palatino Linotype", Palatino, Georgia, serif !important;
  letter-spacing: -0.025em !important;
  font-weight: 700 !important;
}

/* Remove the bottom floating helper from the game popout */
.viewer-page .game-info-modal.open .modal-card::after {
  display: none !important;
  content: none !important;
}

/* Put the helper right at the top next to the platform badge */
.viewer-page .game-info-modal.open .info-topline::after {
  content: "Scroll down to add your own community tier, scores, and feedback";
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(620px, 100%);
  margin-left: 10px;
  padding: 9px 13px 9px 34px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 18px 50%, #64d2ff 0 6px, transparent 7px),
    linear-gradient(135deg, rgba(100,210,255,.18), rgba(145,70,255,.16));
  border: 1px solid rgba(100,210,255,.32);
  color: #dff7ff;
  font-size: clamp(12px, .72vw, 15px);
  font-weight: 950;
  letter-spacing: .01em;
  line-height: 1.15;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  animation: top-community-hint 7s ease forwards;
}

@keyframes top-community-hint {
  0% { opacity: 0; transform: translateY(-4px); }
  10%, 78% { opacity: 1; transform: translateY(0); }
  100% { opacity: .28; transform: translateY(0); }
}

/* Keep the top row flexible so the helper does not crush the title area */
.viewer-page .game-info-modal .info-topline {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Make the score summary cards stop colliding on narrower widths */
.viewer-page .score-summary-row {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
}

.viewer-page .score-summary-row .overall-score {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 12px !important;
}

.viewer-page .score-summary-row .overall-score strong {
  white-space: nowrap !important;
}

/* Movie carousel should only show one managed section on viewer, but duplicate cards remain inside the track for smooth looping */
.viewer-movies-block {
  display: block !important;
}


/* =========================================================
   CLEAN RECOVERY FIX
   Restores viewer styling, modal fit, and shiny how-to steps.
   Keep this block at the very bottom of styles.css.
   ========================================================= */

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

/* Viewer page base. This prevents the viewer from behaving like the transparent OBS page. */
body.viewer-page,
.viewer-page.overlay-page {
  width: 100% !important;
  min-height: 100vh !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(100,210,255,.18), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(145,70,255,.12), transparent 32%),
    #10131b !important;
  color: var(--text) !important;
}

/* Main page width */
.viewer-page .viewer-about-shell,
.viewer-page .viewer-howto-shell,
.viewer-page .overlay-wrap {
  width: min(96vw, 2240px) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Fix huge social icons if SVG sizing breaks */
.viewer-page .social-link svg,
.viewer-page .viewer-about-socials svg {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  flex: 0 0 auto !important;
  fill: currentColor !important;
  display: block !important;
}

.viewer-page .social-link,
.viewer-page .viewer-about-socials a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
  height: auto !important;
  min-height: 44px !important;
}

/* Profile photo sizing */
.viewer-page .viewer-about-avatar {
  display: block !important;
  width: clamp(170px, 13vw, 260px) !important;
  height: clamp(170px, 13vw, 260px) !important;
  max-width: 260px !important;
  max-height: 260px !important;
  object-fit: cover !important;
  border-radius: 999px !important;
}

/* Viewer ranking board should be full page, not OBS split layout */
.viewer-page .overlay-wrap {
  height: auto !important;
  min-height: 360px !important;
  display: block !important;
  overflow: visible !important;
  padding: 0 0 140px 0 !important;
}

.viewer-page .overlay-current,
.viewer-page #overlayCurrent {
  display: none !important;
}

.viewer-page .overlay-board {
  display: block !important;
  width: 100% !important;
  min-height: 420px !important;
  overflow: visible !important;
  padding: clamp(16px, 1.5vw, 28px) !important;
  background: rgba(9,12,20,.80) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 28px !important;
}

.viewer-page .tier-board {
  width: 100% !important;
  display: grid !important;
  gap: 14px !important;
}

/* =========================================================
   POPUP FIT FIX
   ========================================================= */

.viewer-page .game-info-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: none !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: clamp(10px, 1.4vw, 20px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
}

.viewer-page .game-info-modal.open {
  display: flex !important;
}

.viewer-page .game-info-modal .modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
}

.viewer-page .game-info-modal .modal-card {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: min(94vw, 1420px) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  margin: 0 auto 60px auto !important;
  padding: clamp(18px, 1.6vw, 30px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-radius: clamp(20px, 1.8vw, 30px) !important;
}

.viewer-page .game-info-modal.open .modal-card::after {
  display: none !important;
  content: none !important;
}

.viewer-page .game-info-modal .info-layout {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr) !important;
  gap: clamp(16px, 2vw, 30px) !important;
  align-items: start !important;
}

.viewer-page .game-info-modal .info-art {
  width: 100% !important;
  max-width: 340px !important;
  height: auto !important;
  max-height: calc(100dvh - 112px) !important;
  object-fit: contain !important;
  position: sticky !important;
  top: 0 !important;
  border-radius: 18px !important;
}

.viewer-page .game-info-modal .info-main {
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}

.viewer-page .game-info-modal .info-main h1 {
  max-width: 100% !important;
  margin-right: clamp(44px, 5vw, 76px) !important;
  font-size: clamp(36px, 4.4vw, 72px) !important;
  line-height: .96 !important;
  overflow-wrap: anywhere !important;
}

/* Top helper hint */
.viewer-page .game-info-modal .info-topline {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
  min-width: 0 !important;
}

.viewer-page .game-info-modal.open .info-topline::after {
  content: "Scroll down to add your own community tier, scores, and feedback";
  flex: 1 1 260px !important;
  max-width: 560px !important;
  min-width: 0 !important;
  padding: 8px 12px 8px 32px !important;
  border-radius: 999px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  background:
    radial-gradient(circle at 17px 50%, #64d2ff 0 6px, transparent 7px),
    linear-gradient(135deg, rgba(100,210,255,.18), rgba(145,70,255,.16)) !important;
  border: 1px solid rgba(100,210,255,.32) !important;
  color: #dff7ff !important;
  font-size: clamp(11px, .75vw, 14px) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
}

/* Summary cards stay inside */
.viewer-page .score-summary-row {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)) !important;
  gap: 10px !important;
}

.viewer-page .score-summary-row .overall-score {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 14px !important;
  margin: 0 !important;
}

.viewer-page .score-summary-row .overall-score span {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  font-size: clamp(13px, .9vw, 18px) !important;
  line-height: 1.15 !important;
}

.viewer-page .score-summary-row .overall-score strong {
  white-space: nowrap !important;
  font-size: clamp(22px, 2vw, 38px) !important;
  line-height: 1 !important;
}

/* Fit internal sections */
.viewer-page .playtime-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)) !important;
  gap: 10px !important;
}

.viewer-page .playtime-box {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: clamp(14px, 1.2vw, 20px) !important;
}

.viewer-page .playtime-box p {
  overflow-wrap: anywhere !important;
  font-size: clamp(11px, .75vw, 14px) !important;
}

.viewer-page .score-row {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(110px, 190px) minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
}

.viewer-page .score-name {
  overflow-wrap: anywhere !important;
}

.viewer-page .score-bar {
  min-width: 0 !important;
  width: 100% !important;
}

.viewer-page .viewer-feedback-section {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: clamp(16px, 1.4vw, 24px) !important;
}

.viewer-page .feedback-form-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(min(100%, 220px), 300px) !important;
  gap: 12px !important;
  width: 100% !important;
}

.viewer-page .community-score-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)) !important;
  gap: 9px !important;
  width: 100% !important;
}

.viewer-page .viewer-feedback-form input,
.viewer-page .viewer-feedback-form select,
.viewer-page .viewer-feedback-form textarea {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.viewer-page .game-info-modal .modal-close {
  position: sticky !important;
  top: 8px !important;
  margin-left: auto !important;
  z-index: 80 !important;
}

/* Stack when zoomed/narrow */
@media (max-width: 1120px) {
  .viewer-page .game-info-modal .info-layout {
    grid-template-columns: 1fr !important;
  }

  .viewer-page .game-info-modal .info-art {
    position: relative !important;
    max-width: min(420px, 100%) !important;
    max-height: 420px !important;
    margin: 0 auto !important;
  }

  .viewer-page .score-row {
    grid-template-columns: 1fr !important;
  }

  .viewer-page .score-value {
    justify-self: end !important;
  }
}

@media (max-width: 760px) {
  .viewer-page .game-info-modal {
    padding: 10px !important;
  }

  .viewer-page .game-info-modal .modal-card {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
  }

  .viewer-page .feedback-form-row {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   SHINY HOW-TO STEPS
   ========================================================= */

.viewer-howto-card {
  overflow: visible !important;
  background:
    linear-gradient(135deg, rgba(235,250,255,.98), rgba(255,255,255,.96)) !important;
  border: 2px solid rgba(100,210,255,.28) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.20) !important;
}

.viewer-howto-steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.4vw, 24px) !important;
  align-items: stretch !important;
}

.viewer-howto-steps div {
  position: relative !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: clamp(42px, 3vw, 58px) minmax(0, 1fr) !important;
  gap: clamp(12px, 1vw, 18px) !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 96px !important;
  padding: clamp(16px, 1.4vw, 24px) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(219,246,255,.92)) !important;
  border: 1px solid rgba(7,17,29,.10) !important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.80) !important;
}

.viewer-howto-steps div::before {
  content: "";
  position: absolute;
  inset: -60% -90%;
  background: linear-gradient(
    110deg,
    transparent 34%,
    rgba(255,255,255,.95) 48%,
    rgba(100,210,255,.32) 54%,
    transparent 66%
  );
  transform: translateX(-75%);
  animation: step-shine-final 4.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.viewer-howto-steps div:nth-child(2)::before {
  animation-delay: .9s;
}

.viewer-howto-steps div:nth-child(3)::before {
  animation-delay: 1.8s;
}

.viewer-howto-steps strong,
.viewer-howto-steps span {
  position: relative !important;
  z-index: 1 !important;
}

.viewer-howto-steps strong {
  display: grid !important;
  place-items: center !important;
  width: clamp(42px, 3vw, 58px) !important;
  height: clamp(42px, 3vw, 58px) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #07111d, #12395c) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(7,17,29,.25) !important;
  font-size: clamp(19px, 1.2vw, 28px) !important;
  font-weight: 1000 !important;
}

.viewer-howto-steps span {
  min-width: 0 !important;
  color: rgba(7,17,29,.78) !important;
  font-size: clamp(14px, .95vw, 20px) !important;
  line-height: 1.35 !important;
  font-weight: 750 !important;
  overflow-wrap: anywhere !important;
}

@keyframes step-shine-final {
  0%, 18% {
    transform: translateX(-76%);
    opacity: 0;
  }
  34% {
    opacity: .92;
  }
  56%, 100% {
    transform: translateX(76%);
    opacity: 0;
  }
}

@media (max-width: 1250px) {
  .viewer-howto-steps {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .viewer-howto-steps div::before {
    animation: none !important;
  }
}



/* === Bigger profile photo and TV show section === */
.viewer-page .viewer-about-hero {
  grid-template-columns: clamp(230px, 16vw, 340px) minmax(0, 1fr) !important;
  gap: clamp(30px, 3.5vw, 64px) !important;
}

.viewer-page .viewer-about-photo-wrap {
  width: clamp(230px, 16vw, 340px) !important;
  height: clamp(230px, 16vw, 340px) !important;
}

.viewer-page .viewer-about-avatar {
  width: clamp(230px, 16vw, 340px) !important;
  height: clamp(230px, 16vw, 340px) !important;
  max-width: 340px !important;
  max-height: 340px !important;
}

.viewer-page .viewer-about-intro h1 {
  font-size: clamp(86px, 7.2vw, 168px) !important;
}

.viewer-page .viewer-about-handle {
  font-size: clamp(26px, 2vw, 48px) !important;
}

.viewer-tvshows-block {
  overflow: visible !important;
}

.movie-carousel,
.tv-carousel {
  position: relative;
  overflow: hidden !important;
  min-height: clamp(300px, 22vw, 430px) !important;
  border-radius: 26px;
  background:
    linear-gradient(90deg, rgba(7,17,29,.06), rgba(255,255,255,.70), rgba(7,17,29,.06)) !important;
  border: 1px solid rgba(7,17,29,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 12px 28px rgba(0,0,0,.08) !important;
  padding: 24px 0;
}

.movie-carousel::before,
.movie-carousel::after,
.tv-carousel::before,
.tv-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  width: 90px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.movie-carousel::before,
.tv-carousel::before {
  left: 0;
  background: linear-gradient(90deg, rgba(239,251,255,1), rgba(239,251,255,0));
}

.movie-carousel::after,
.tv-carousel::after {
  right: 0;
  background: linear-gradient(270deg, rgba(239,251,255,1), rgba(239,251,255,0));
}

.movie-carousel-track,
.tv-carousel-track {
  display: flex;
  gap: clamp(14px, 1.2vw, 24px);
  width: max-content;
  min-height: clamp(260px, 20vw, 385px);
  animation: favourite-scroll 72s linear infinite;
  padding: 0 18px;
}

.tv-carousel-track {
  animation-duration: 78s;
}

.movie-carousel:hover .movie-carousel-track,
.tv-carousel:hover .tv-carousel-track {
  animation-play-state: paused;
}

.movie-card,
.tv-card {
  width: clamp(150px, 10.5vw, 225px);
  aspect-ratio: 2 / 3;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #111827;
  box-shadow: 0 20px 48px rgba(0,0,0,.28);
  border: 2px solid rgba(255,255,255,.72);
  flex: 0 0 auto;
}

.movie-card img,
.tv-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Three clean manager columns in Control */
.media-manager-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.tv-carousel-empty,
.movie-carousel-empty {
  padding: 34px;
  font-weight: 800;
  color: rgba(7,17,29,.70);
}

@media (max-width: 1300px) {
  .media-manager-grid-three {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .viewer-page .viewer-about-hero {
    grid-template-columns: 1fr !important;
  }

  .viewer-page .viewer-about-photo-wrap,
  .viewer-page .viewer-about-avatar {
    width: 190px !important;
    height: 190px !important;
  }
}



/* === Cleaner community review section inside game popup === */
.community-clean-section {
  padding: clamp(18px, 1.5vw, 28px) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), rgba(100,210,255,.035)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  overflow: hidden !important;
}

.community-clean-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}

.community-eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(100,210,255,.12);
  border: 1px solid rgba(100,210,255,.22);
  color: #9be6ff;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
}

.community-clean-header h2 {
  margin: 0;
  font-size: clamp(28px, 2vw, 44px) !important;
  line-height: 1;
  color: var(--text);
}

.community-clean-header p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: clamp(13px, .82vw, 16px);
  font-weight: 750;
  line-height: 1.35;
}

.community-summary-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(86px, 1fr));
  gap: 8px;
  min-width: min(100%, 340px);
}

.community-summary-pills > div {
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.10);
  text-align: center;
}

.community-summary-pills span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.community-summary-pills strong {
  display: block;
  margin-top: 3px;
  color: #ffd166;
  font-size: 22px;
  line-height: 1;
}

.community-summary-pills .pending-pill strong {
  color: #9be6ff;
}

.community-submit-panel {
  margin: 16px 0 20px;
  border-radius: 22px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(100,210,255,.16);
  overflow: hidden;
}

.community-submit-panel summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background:
    linear-gradient(135deg, rgba(100,210,255,.10), rgba(145,70,255,.08));
}

.community-submit-panel summary::-webkit-details-marker {
  display: none;
}

.community-submit-panel summary span {
  color: var(--text);
  font-size: clamp(18px, 1.1vw, 24px);
  font-weight: 1000;
}

.community-submit-panel summary b {
  color: var(--muted);
  font-size: clamp(12px, .72vw, 15px);
  font-weight: 800;
}

.community-submit-body {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.community-score-wrap {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
}

.community-score-wrap .community-score-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
}

.community-comment-label {
  display: grid;
  gap: 8px;
  color: var(--text);
  font-weight: 1000;
}

.community-comment-label textarea {
  min-height: 120px !important;
  resize: vertical;
}

.community-submit-button {
  min-height: 46px;
  border-radius: 14px;
  font-weight: 1000;
}

.community-review-list {
  display: grid;
  gap: 14px;
}

.community-review-card {
  padding: 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
}

.community-review-card.status-pending {
  background: rgba(255,209,102,.07);
  border-color: rgba(255,209,102,.24);
}

.community-review-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.community-review-card-head strong {
  display: block;
  color: var(--text);
  font-size: 18px;
  line-height: 1.1;
}

.community-review-card-head span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.community-review-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.community-review-badges b,
.community-review-badges em {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(100,210,255,.12);
  color: #9be6ff;
  border: 1px solid rgba(100,210,255,.20);
  font-style: normal;
  font-size: 12px;
  font-weight: 1000;
}

.community-review-badges em {
  color: #ffd166;
  background: rgba(255,209,102,.10);
  border-color: rgba(255,209,102,.20);
}

.community-review-card .viewer-score-mini {
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)) !important;
  margin-top: 10px;
}

.community-review-card .viewer-score-mini span {
  padding: 8px 10px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
}

.community-review-comment {
  margin: 12px 0 0;
  padding: 14px 16px;
  border-left: 4px solid rgba(100,210,255,.45);
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  color: rgba(245,247,251,.86);
  font-size: clamp(14px, .86vw, 17px);
  line-height: 1.45;
  font-weight: 650;
}

.community-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

.community-empty-state {
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.16);
  color: var(--muted);
}

.community-empty-state strong {
  color: var(--text);
  font-size: 17px;
}

.community-empty-state span {
  font-weight: 750;
}

@media (max-width: 900px) {
  .community-clean-header {
    grid-template-columns: 1fr;
  }

  .community-summary-pills {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
  }

  .community-submit-panel summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .community-review-card-head {
    flex-direction: column;
  }

  .community-review-badges {
    justify-content: flex-start;
  }
}



/* === Tabbed game popup layout === */
.game-info-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 18px;
  padding: 8px;
  border-radius: 22px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
}

.game-info-tab-button {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  text-align: left;
  overflow: hidden;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

.game-info-tab-button::before {
  content: "";
  position: absolute;
  inset: -50% -80%;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  transform: translateX(-70%);
  opacity: 0;
  pointer-events: none;
}

.game-info-tab-button:hover {
  transform: translateY(-2px);
  color: var(--text);
  background: rgba(255,255,255,.07);
}

.game-info-tab-button.active {
  color: #fff;
  background:
    linear-gradient(135deg, rgba(100,210,255,.18), rgba(255,209,102,.10)),
    rgba(255,255,255,.06);
  border-color: rgba(100,210,255,.34);
  box-shadow: 0 14px 34px rgba(0,0,0,.20);
}

.game-info-tab-button.active::before {
  animation: tab-shine 3.2s ease-in-out infinite;
  opacity: 1;
}

.game-info-tab-button span {
  position: relative;
  z-index: 1;
  min-width: 0;
  font-size: clamp(16px, .95vw, 22px);
  font-weight: 1000;
  overflow-wrap: anywhere;
}

.game-info-tab-button b {
  position: relative;
  z-index: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.24);
  color: #ffd166;
  font-size: clamp(13px, .78vw, 18px);
  font-weight: 1000;
  white-space: nowrap;
}

.game-info-tab-panel {
  display: none;
}

.game-info-tab-panel.active {
  display: block;
  animation: tab-panel-in .18s ease-out;
}

/* Keep the old helper from visually clashing now that tabs exist */
.viewer-page .game-info-modal.open .info-topline::after {
  content: "Community reviews are in the second tab";
  flex: 0 1 auto !important;
  max-width: 360px !important;
}

@keyframes tab-shine {
  0%, 30% { transform: translateX(-72%); }
  55%, 100% { transform: translateX(72%); }
}

@keyframes tab-panel-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .game-info-tabs {
    grid-template-columns: 1fr;
  }

  .game-info-tab-button {
    min-height: 52px;
  }
}



/* === Wider popup, larger form fields, and comparison tab === */
.viewer-page .game-info-modal .modal-card {
  width: min(97vw, 1780px) !important;
  max-width: calc(100vw - 24px) !important;
}

.viewer-page .game-info-modal .info-layout {
  grid-template-columns: minmax(260px, 430px) minmax(0, 1fr) !important;
  gap: clamp(22px, 2.4vw, 42px) !important;
}

.viewer-page .game-info-modal .info-art {
  max-width: 430px !important;
}

.game-info-tabs-three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.game-info-tab-button {
  min-height: 66px !important;
  padding: 15px 18px !important;
}

.game-info-tab-button span {
  font-size: clamp(17px, 1.05vw, 24px) !important;
}

.game-info-tab-button b {
  font-size: clamp(14px, .86vw, 19px) !important;
}

/* Bigger, clearer community form fields */
.community-submit-panel summary {
  padding: 20px 22px !important;
}

.community-submit-panel summary span {
  font-size: clamp(22px, 1.3vw, 30px) !important;
}

.community-submit-panel summary b {
  font-size: clamp(14px, .85vw, 17px) !important;
}

.community-submit-body {
  gap: 18px !important;
  padding: 22px !important;
}

.community-submit-body label,
.feedback-form-row label,
.community-comment-label {
  font-size: clamp(14px, .88vw, 18px) !important;
  font-weight: 1000 !important;
}

.viewer-page .viewer-feedback-form input,
.viewer-page .viewer-feedback-form select,
.viewer-page .viewer-feedback-form textarea,
.community-submit-body input,
.community-submit-body select,
.community-submit-body textarea {
  min-height: 52px !important;
  padding: 13px 14px !important;
  font-size: clamp(16px, .95vw, 20px) !important;
  border-radius: 14px !important;
  background: #101522 !important;
  color: #f5f7fb !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}

.community-submit-body textarea,
.community-comment-label textarea {
  min-height: 150px !important;
  line-height: 1.35 !important;
}

.viewer-page .community-score-grid {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
  gap: 12px !important;
}

.community-score-wrap {
  padding: 18px !important;
}

.community-submit-button {
  min-height: 54px !important;
  font-size: clamp(16px, .95vw, 20px) !important;
}

/* Comparison tab */
.comparison-section {
  padding: clamp(20px, 1.7vw, 32px);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(100,210,255,.035));
  border: 1px solid rgba(255,255,255,.12);
}

.comparison-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  margin-bottom: 22px;
}

.comparison-eyebrow {
  display: inline-flex;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,209,102,.12);
  border: 1px solid rgba(255,209,102,.24);
  color: #ffd166;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
}

.comparison-header h2 {
  margin: 0;
  font-size: clamp(32px, 2.2vw, 50px);
  line-height: 1;
}

.comparison-header p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: clamp(14px, .88vw, 18px);
  font-weight: 750;
  line-height: 1.35;
}

.comparison-review-count {
  min-width: 150px;
  padding: 14px 16px;
  border-radius: 18px;
  text-align: center;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
}

.comparison-review-count span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.comparison-review-count strong {
  display: block;
  margin-top: 5px;
  color: #9be6ff;
  font-size: 34px;
  line-height: 1;
}

.comparison-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.comparison-summary-grid div {
  padding: 16px;
  border-radius: 18px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
}

.comparison-summary-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.comparison-summary-grid strong {
  display: block;
  margin-top: 6px;
  color: #ffd166;
  font-size: clamp(24px, 1.7vw, 38px);
  line-height: 1;
}

.tier-comparison-callout {
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(100,210,255,.11), rgba(145,70,255,.10));
  border: 1px solid rgba(100,210,255,.20);
  color: #dff7ff;
  font-size: clamp(15px, .92vw, 19px);
  font-weight: 900;
}

.comparison-table {
  display: grid;
  gap: 8px;
}

.comparison-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) 1fr 1fr minmax(110px, .8fr);
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.comparison-row strong {
  color: var(--text);
  font-size: clamp(15px, .92vw, 19px);
}

.comparison-row span,
.comparison-row em {
  color: var(--muted);
  font-style: normal;
  font-size: clamp(14px, .86vw, 18px);
  font-weight: 850;
}

.comparison-row em {
  text-align: right;
}

.comparison-row em.positive {
  color: #8ee99a;
}

.comparison-row em.negative {
  color: #ff8c8c;
}

.comparison-row em.neutral {
  color: #ffd166;
}

.comparison-head {
  background: rgba(100,210,255,.10);
}

.comparison-head span,
.comparison-head em {
  color: #9be6ff;
  font-weight: 1000;
}

@media (max-width: 1100px) {
  .viewer-page .game-info-modal .info-layout {
    grid-template-columns: 1fr !important;
  }

  .game-info-tabs-three,
  .comparison-summary-grid {
    grid-template-columns: 1fr !important;
  }

  .comparison-header {
    grid-template-columns: 1fr;
  }

  .comparison-row {
    grid-template-columns: 1fr 1fr;
  }

  .comparison-head {
    display: none;
  }

  .comparison-row em {
    text-align: left;
  }
}

@media (max-width: 760px) {
  .game-info-tabs-three {
    grid-template-columns: 1fr !important;
  }
}


/* === Make Favourite TV Shows manager clearly separate === */
.favourite-media-manager section[data-media-panel="tv"] {
  border-color: rgba(145, 70, 255, .28) !important;
  background:
    linear-gradient(135deg, rgba(145,70,255,.08), rgba(255,255,255,.035)) !important;
}

.favourite-media-manager section[data-media-panel="tv"] h3::after {
  content: "TV";
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(145,70,255,.18);
  color: #d7b7ff;
  font-size: 12px;
  vertical-align: middle;
}



/* === Clearer tabs and Kyle-style community tab formatting === */

/* Make the three tabs easier to understand */
.game-info-tabs,
.game-info-tabs-three {
  padding: 10px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  gap: 12px !important;
}

.game-info-tab-button {
  min-height: 72px !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.018)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(245,247,251,.72) !important;
}

.game-info-tab-button span {
  font-size: clamp(18px, 1.08vw, 26px) !important;
  font-weight: 1000 !important;
  letter-spacing: -.02em;
}

.game-info-tab-button b {
  min-width: 46px;
  text-align: center;
  font-size: clamp(15px, .9vw, 21px) !important;
  background: rgba(0,0,0,.30) !important;
}

.game-info-tab-button.active {
  color: #fff !important;
  background:
    linear-gradient(135deg, rgba(100,210,255,.24), rgba(255,209,102,.10)),
    rgba(255,255,255,.08) !important;
  border-color: rgba(100,210,255,.55) !important;
  box-shadow:
    0 16px 36px rgba(0,0,0,.24),
    inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

.game-info-tab-button.active b {
  color: #ffd166 !important;
}

.game-info-tab-button[data-tab="community"].active {
  background:
    linear-gradient(135deg, rgba(100,210,255,.22), rgba(145,70,255,.16)),
    rgba(255,255,255,.08) !important;
  border-color: rgba(145,70,255,.45) !important;
}

.game-info-tab-button[data-tab="compare"].active {
  background:
    linear-gradient(135deg, rgba(255,209,102,.18), rgba(100,210,255,.16)),
    rgba(255,255,255,.08) !important;
  border-color: rgba(255,209,102,.38) !important;
}

/* Community tab now follows the same visual rhythm as Kyle's tab */
.community-kyle-style-section {
  display: grid;
  gap: 18px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}

.community-tab-summary-row {
  margin-bottom: 0 !important;
}

.community-tab-summary-row .overall-score {
  min-height: 78px !important;
}

.pending-score-card strong {
  color: #9be6ff !important;
}

.community-intro-box,
.community-review-form-box,
.community-review-list-box {
  width: 100%;
}

.community-intro-box h2,
.community-review-form-box h2,
.community-review-list-box h2 {
  color: #ffd166;
}

.community-intro-box p,
.community-review-form-box p {
  color: var(--muted);
  font-size: clamp(14px, .88vw, 18px);
  font-weight: 750;
  line-height: 1.38;
}

.community-form-subtitle {
  margin-top: -6px !important;
  margin-bottom: 14px !important;
}

.community-review-form-box {
  background:
    linear-gradient(135deg, rgba(100,210,255,.06), rgba(145,70,255,.045)),
    rgba(255,255,255,.045) !important;
  border-color: rgba(100,210,255,.18) !important;
}

.community-submit-body {
  padding: 0 !important;
  gap: 18px !important;
}

.community-score-wrap {
  background: rgba(0,0,0,.16) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px;
}

.community-score-wrap .community-score-grid {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
}

.community-submit-body input,
.community-submit-body select,
.community-submit-body textarea {
  min-height: 52px !important;
  font-size: clamp(16px, .96vw, 20px) !important;
  border-radius: 14px !important;
  background: #101522 !important;
  color: #f5f7fb !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}

.community-submit-body textarea {
  min-height: 150px !important;
}

.community-submit-button {
  min-height: 54px !important;
  border-radius: 14px !important;
  font-size: clamp(16px, .96vw, 20px) !important;
  font-weight: 1000 !important;
}

.community-review-list {
  display: grid;
  gap: 14px;
}

.community-review-card {
  border-radius: 18px !important;
  background: rgba(0,0,0,.16) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  padding: 16px !important;
}

.community-review-card-head strong {
  font-size: clamp(17px, 1vw, 21px) !important;
}

.community-review-comment {
  background: rgba(255,255,255,.045) !important;
  border-left-color: rgba(100,210,255,.56) !important;
}

/* Hide the older cluttered header if an older override still appears */
.community-clean-header,
.community-submit-panel {
  display: none !important;
}

/* But do not hide the new review form box */
.community-review-form-box .community-submit-body {
  display: grid !important;
}

@media (max-width: 980px) {
  .game-info-tabs-three {
    grid-template-columns: 1fr !important;
  }
}




/* === Kyle score/tier tidy + TV manager final clarity === */
.kyle-only-summary-row {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.kyle-tier-summary-card strong {
  color: #ffd166 !important;
}

.viewer-page .info-topline .info-kicker {
  display: none !important;
}

.favourite-media-manager section[data-media-panel="tv"] {
  border-color: rgba(145,70,255,.35) !important;
  background:
    linear-gradient(135deg, rgba(145,70,255,.10), rgba(255,255,255,.035)) !important;
}

.favourite-media-manager section[data-media-panel="tv"] h3::after {
  content: "TV shows";
  margin-left: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(145,70,255,.20);
  color: #d7b7ff;
  font-size: 12px;
  vertical-align: middle;
}

@media (max-width: 760px) {
  .kyle-only-summary-row {
    grid-template-columns: 1fr !important;
  }
}



/* =========================================================
   FINAL CLEAN RECOVERY CSS
   Fixes broken viewer layout, restores about page, hides side panel,
   polishes tabs, and adds stable left-to-right vanish-in effect.
   ========================================================= */

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

body.viewer-page,
.viewer-page.overlay-page {
  width: 100% !important;
  min-height: 100vh !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(100,210,255,.18), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(145,70,255,.12), transparent 32%),
    #10131b !important;
  color: var(--text) !important;
  padding: clamp(14px, 2vw, 34px) !important;
}

/* Proper full viewer page width */
.viewer-page .viewer-about-shell,
.viewer-page .viewer-howto-shell,
.viewer-page .overlay-wrap {
  width: min(96vw, 2240px) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hide OBS current game panel on viewer */
.viewer-page .overlay-current,
.viewer-page #overlayCurrent,
body.viewer-page .ranking-current {
  display: none !important;
}

/* Full width ranking area */
.viewer-page .overlay-wrap {
  display: block !important;
  height: auto !important;
  min-height: 360px !important;
  overflow: visible !important;
  padding: 0 0 140px 0 !important;
}

.viewer-page .overlay-board {
  display: block !important;
  width: 100% !important;
  min-height: 420px !important;
  overflow: visible !important;
  padding: clamp(16px, 1.5vw, 28px) !important;
  background: rgba(9,12,20,.80) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 28px !important;
}

.viewer-page .tier-board {
  display: grid !important;
  gap: 14px !important;
  width: 100% !important;
}

.viewer-page .tier-row {
  display: grid !important;
  grid-template-columns: clamp(76px, 5vw, 118px) minmax(0, 1fr) !important;
  min-height: clamp(150px, 12vw, 235px) !important;
}

.viewer-page .tier-items {
  gap: clamp(10px, 1vw, 20px) !important;
  padding: clamp(12px, 1.2vw, 22px) !important;
}

.viewer-page .game-chip {
  width: clamp(92px, 7.8vw, 158px) !important;
}

/* Profile/social safety */
.viewer-page .social-link svg,
.viewer-page .viewer-about-socials svg {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  fill: currentColor !important;
}

.viewer-page .viewer-about-photo-wrap,
.viewer-page .viewer-about-avatar {
  width: clamp(230px, 16vw, 340px) !important;
  height: clamp(230px, 16vw, 340px) !important;
  max-width: 340px !important;
  max-height: 340px !important;
}

/* Popup fit */
.viewer-page .game-info-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: none !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: clamp(10px, 1.4vw, 20px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.viewer-page .game-info-modal.open {
  display: flex !important;
}

.viewer-page .game-info-modal .modal-card {
  width: min(97vw, 1780px) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  margin: 0 auto 60px auto !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  padding: clamp(18px, 1.6vw, 30px) !important;
}

.viewer-page .game-info-modal .modal-close,
.game-info-modal .modal-close {
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
  left: auto !important;
  margin: 0 !important;
  z-index: 100 !important;
}

.viewer-page .game-info-modal .info-layout {
  grid-template-columns: minmax(260px, 430px) minmax(0, 1fr) !important;
  gap: clamp(22px, 2.4vw, 42px) !important;
}

.viewer-page .game-info-modal .info-art {
  max-width: 430px !important;
}

/* Clean tabs, no score badges in the tab buttons */
.polished-tabs,
.game-info-tabs-three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 10px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

.polished-tabs .game-info-tab-button,
.game-info-tabs-three .game-info-tab-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 62px !important;
  padding: 14px 18px !important;
  border-radius: 18px !important;
  color: rgba(245,247,251,.72) !important;
  text-align: center !important;
}

.polished-tabs .game-info-tab-button b,
.game-info-tabs-three .game-info-tab-button b {
  display: none !important;
}

.polished-tabs .game-info-tab-button span,
.game-info-tabs-three .game-info-tab-button span {
  font-size: clamp(16px, .95vw, 22px) !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: -.015em !important;
}

.polished-tabs .game-info-tab-button.active,
.game-info-tabs-three .game-info-tab-button.active {
  color: #fff !important;
  background:
    linear-gradient(135deg, rgba(100,210,255,.20), rgba(145,70,255,.14)),
    rgba(255,255,255,.075) !important;
  border-color: rgba(100,210,255,.48) !important;
}

/* Kyle review summary only has Kyle score + Kyle tier */
.kyle-only-summary-row {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.kyle-tier-summary-card strong {
  color: #ffd166 !important;
}

/* Cleaner, less chunky copy */
.community-intro-box h2,
.community-review-form-box h2,
.community-review-list-box h2,
.notes-box h2,
.comparison-header h2 {
  font-size: clamp(28px, 1.85vw, 42px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.025em !important;
  font-weight: 850 !important;
}

.community-intro-box p,
.community-review-form-box p,
.community-clean-header p,
.comparison-header p,
.notes-box p,
.viewer-feedback-rules,
.feedback-helper {
  font-size: clamp(14px, .82vw, 17px) !important;
  line-height: 1.45 !important;
  font-weight: 620 !important;
  color: rgba(245,247,251,.68) !important;
}

.community-review-form-box .community-form-subtitle {
  font-size: clamp(15px, .9vw, 18px) !important;
  font-weight: 620 !important;
  color: rgba(245,247,251,.70) !important;
}

.community-submit-body label,
.feedback-form-row label,
.community-comment-label {
  font-size: clamp(13px, .78vw, 16px) !important;
  line-height: 1.25 !important;
  font-weight: 820 !important;
  color: rgba(245,247,251,.90) !important;
}

/* Scores visible and vanish-in from left to right, one card at a time */
.score-summary-row .overall-score,
.comparison-summary-grid > div {
  position: relative !important;
  overflow: hidden !important;
}

.game-info-tab-panel.active .reveal-card,
.game-info-tab-panel.active .community-tab-summary-row .overall-score,
.game-info-tab-panel.active .comparison-summary-grid > div {
  opacity: 0 !important;
  clip-path: none !important;
  transform: translateX(-18px) scale(.985) !important;
  filter: blur(7px) saturate(1.12) !important;
  animation-name: dust-fade-in-left-to-right !important;
  animation-duration: .72s !important;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1) !important;
  animation-fill-mode: forwards !important;
}

/* sequential reveal */
.game-info-tab-panel.active .reveal-card:nth-child(1),
.game-info-tab-panel.active .community-tab-summary-row .overall-score:nth-child(1),
.game-info-tab-panel.active .comparison-summary-grid > div:nth-child(1) {
  animation-delay: 0s !important;
}

.game-info-tab-panel.active .reveal-card:nth-child(2),
.game-info-tab-panel.active .community-tab-summary-row .overall-score:nth-child(2),
.game-info-tab-panel.active .comparison-summary-grid > div:nth-child(2) {
  animation-delay: .82s !important;
}

.game-info-tab-panel.active .community-tab-summary-row .overall-score:nth-child(3),
.game-info-tab-panel.active .comparison-summary-grid > div:nth-child(3) {
  animation-delay: 1.64s !important;
}

.game-info-tab-panel.active .community-tab-summary-row .overall-score:nth-child(4),
.game-info-tab-panel.active .comparison-summary-grid > div:nth-child(4) {
  animation-delay: 2.46s !important;
}

@keyframes dust-fade-in-left-to-right {
  0% {
    opacity: 0;
    transform: translateX(-18px) scale(.985);
    filter: blur(8px) saturate(1.20);
  }
  45% {
    opacity: .62;
    filter: blur(3px) saturate(1.12);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0) saturate(1);
  }
}

.game-info-tab-panel.active .reveal-card::after,
.game-info-tab-panel.active .community-tab-summary-row .overall-score::after,
.game-info-tab-panel.active .comparison-summary-grid > div::after {
  content: "" !important;
  position: absolute !important;
  inset: -35% -80% !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 38% 50%, rgba(255,255,255,.34) 0 2px, transparent 3px),
    radial-gradient(circle at 43% 40%, rgba(100,210,255,.28) 0 1px, transparent 3px),
    radial-gradient(circle at 48% 58%, rgba(255,209,102,.24) 0 1px, transparent 3px),
    linear-gradient(100deg, transparent 34%, rgba(255,255,255,.13) 50%, transparent 66%) !important;
  opacity: 0 !important;
  transform: translateX(-70%) !important;
  animation-name: dust-sparkle-left-to-right !important;
  animation-duration: .72s !important;
  animation-timing-function: ease !important;
  animation-fill-mode: both !important;
}

.game-info-tab-panel.active .reveal-card:nth-child(1)::after,
.game-info-tab-panel.active .community-tab-summary-row .overall-score:nth-child(1)::after,
.game-info-tab-panel.active .comparison-summary-grid > div:nth-child(1)::after {
  animation-delay: .02s !important;
}

.game-info-tab-panel.active .reveal-card:nth-child(2)::after,
.game-info-tab-panel.active .community-tab-summary-row .overall-score:nth-child(2)::after,
.game-info-tab-panel.active .comparison-summary-grid > div:nth-child(2)::after {
  animation-delay: .84s !important;
}

.game-info-tab-panel.active .community-tab-summary-row .overall-score:nth-child(3)::after,
.game-info-tab-panel.active .comparison-summary-grid > div:nth-child(3)::after {
  animation-delay: 1.66s !important;
}

.game-info-tab-panel.active .community-tab-summary-row .overall-score:nth-child(4)::after,
.game-info-tab-panel.active .comparison-summary-grid > div:nth-child(4)::after {
  animation-delay: 2.48s !important;
}

@keyframes dust-sparkle-left-to-right {
  0% {
    opacity: 0;
    transform: translateX(-70%);
  }
  22% {
    opacity: .85;
  }
  100% {
    opacity: 0;
    transform: translateX(70%);
  }
}

/* TV manager clarity */
.favourite-media-manager section[data-media-panel="tv"] {
  border-color: rgba(145,70,255,.35) !important;
  background:
    linear-gradient(135deg, rgba(145,70,255,.10), rgba(255,255,255,.035)) !important;
}

.favourite-media-manager section[data-media-panel="tv"] h3::after {
  content: "TV shows";
  margin-left: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(145,70,255,.20);
  color: #d7b7ff;
  font-size: 12px;
  vertical-align: middle;
}

@media (max-width: 1100px) {
  .viewer-page .game-info-modal .info-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 980px) {
  .polished-tabs,
  .game-info-tabs-three {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .kyle-only-summary-row {
    grid-template-columns: 1fr !important;
  }
  .viewer-page .viewer-about-photo-wrap,
  .viewer-page .viewer-about-avatar {
    width: 190px !important;
    height: 190px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-info-tab-panel.active .reveal-card,
  .game-info-tab-panel.active .community-tab-summary-row .overall-score,
  .game-info-tab-panel.active .comparison-summary-grid > div {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }

  .game-info-tab-panel.active .reveal-card::after,
  .game-info-tab-panel.active .community-tab-summary-row .overall-score::after,
  .game-info-tab-panel.active .comparison-summary-grid > div::after {
    display: none !important;
    animation: none !important;
  }
}




/* === FINAL SCORE VISIBILITY + PROFESSIONAL TAB TEXT + DUST FADE IN === */

/* Professional font stack and less clunky text inside popout */
.viewer-page .game-info-modal,
.viewer-page .game-info-modal input,
.viewer-page .game-info-modal select,
.viewer-page .game-info-modal textarea,
.viewer-page .game-info-modal button {
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.polished-tabs,
.game-info-tabs-three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 10px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

.polished-tabs .game-info-tab-button,
.game-info-tabs-three .game-info-tab-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 58px !important;
  padding: 13px 18px !important;
  border-radius: 18px !important;
  color: rgba(245,247,251,.72) !important;
  text-align: center !important;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.polished-tabs .game-info-tab-button b,
.game-info-tabs-three .game-info-tab-button b {
  display: none !important;
}

.polished-tabs .game-info-tab-button span,
.game-info-tabs-three .game-info-tab-button span {
  font-size: clamp(15px, .9vw, 21px) !important;
  font-weight: 760 !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
}

.polished-tabs .game-info-tab-button.active,
.game-info-tabs-three .game-info-tab-button.active {
  color: #fff !important;
  background:
    linear-gradient(135deg, rgba(100,210,255,.20), rgba(145,70,255,.14)),
    rgba(255,255,255,.075) !important;
  border-color: rgba(100,210,255,.48) !important;
}

/* Better copy typography inside all three tabs */
.community-intro-box h2,
.community-review-form-box h2,
.community-review-list-box h2,
.notes-box h2,
.comparison-header h2,
.comparison-section h2 {
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: clamp(24px, 1.55vw, 36px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
  font-weight: 760 !important;
}

.community-intro-box p,
.community-review-form-box p,
.community-clean-header p,
.comparison-header p,
.notes-box p,
.viewer-feedback-rules,
.feedback-helper,
.community-form-subtitle {
  font-size: clamp(13px, .78vw, 16px) !important;
  line-height: 1.5 !important;
  font-weight: 520 !important;
  color: rgba(245,247,251,.70) !important;
  letter-spacing: 0 !important;
}

.community-submit-body label,
.feedback-form-row label,
.community-comment-label {
  font-size: clamp(12px, .72vw, 15px) !important;
  line-height: 1.25 !important;
  font-weight: 720 !important;
  color: rgba(245,247,251,.90) !important;
}

/* Scores must be visible by default */
.reveal-card,
.community-tab-summary-row .overall-score,
.comparison-summary-grid > div {
  opacity: 1 !important;
  clip-path: none !important;
  transform: none !important;
  filter: none !important;
  visibility: visible !important;
}

/* Only animate when JS adds score-reveal-active */
.game-info-tab-panel.score-reveal-active .reveal-card,
.game-info-tab-panel.score-reveal-active .comparison-summary-grid > div {
  opacity: 0 !important;
  transform: translateX(-18px) scale(.985) !important;
  filter: blur(7px) saturate(1.12) !important;
  animation: dust-fade-in-left-to-right .72s cubic-bezier(.16, 1, .3, 1) forwards !important;
  animation-delay: var(--reveal-delay, 0ms) !important;
}

.game-info-tab-panel.score-reveal-active .reveal-card::after,
.game-info-tab-panel.score-reveal-active .comparison-summary-grid > div::after {
  content: "" !important;
  position: absolute !important;
  inset: -35% -80% !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 38% 50%, rgba(255,255,255,.34) 0 2px, transparent 3px),
    radial-gradient(circle at 43% 40%, rgba(100,210,255,.28) 0 1px, transparent 3px),
    radial-gradient(circle at 48% 58%, rgba(255,209,102,.24) 0 1px, transparent 3px),
    linear-gradient(100deg, transparent 34%, rgba(255,255,255,.13) 50%, transparent 66%) !important;
  opacity: 0 !important;
  transform: translateX(-70%) !important;
  animation: dust-sparkle-left-to-right .72s ease forwards !important;
  animation-delay: var(--reveal-delay, 0ms) !important;
}

@keyframes dust-fade-in-left-to-right {
  0% {
    opacity: 0;
    transform: translateX(-18px) scale(.985);
    filter: blur(8px) saturate(1.20);
  }
  45% {
    opacity: .62;
    filter: blur(3px) saturate(1.12);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0) saturate(1);
  }
}

@keyframes dust-sparkle-left-to-right {
  0% {
    opacity: 0;
    transform: translateX(-70%);
  }
  22% {
    opacity: .85;
  }
  100% {
    opacity: 0;
    transform: translateX(70%);
  }
}

/* Media manager: title is now optional if a poster is dropped */
.media-drop-zone.has-image + button::after,
.favourite-media-manager button::after {
  content: "";
}

.favourite-media-manager input::placeholder {
  color: rgba(245,247,251,.42) !important;
}

.favourite-media-manager section[data-media-panel="game"] input::placeholder {
  content: "";
}

@media (max-width: 980px) {
  .polished-tabs,
  .game-info-tabs-three {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-info-tab-panel.score-reveal-active .reveal-card,
  .game-info-tab-panel.score-reveal-active .comparison-summary-grid > div {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }

  .game-info-tab-panel.score-reveal-active .reveal-card::after,
  .game-info-tab-panel.score-reveal-active .comparison-summary-grid > div::after {
    display: none !important;
    animation: none !important;
  }
}




/* =========================================================
   ABSOLUTE FINAL VIEWER REPAIR CSS
   ========================================================= */

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

body.viewer-page,
.viewer-page.overlay-page {
  width: 100% !important;
  min-height: 100vh !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(100,210,255,.18), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(145,70,255,.12), transparent 32%),
    #10131b !important;
  color: var(--text) !important;
  padding: clamp(14px, 2vw, 34px) !important;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Restore proper viewer page layout and hide the OBS side panel */
.viewer-page .viewer-about-shell,
.viewer-page .viewer-howto-shell,
.viewer-page .overlay-wrap {
  width: min(96vw, 2240px) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.viewer-page .overlay-current,
.viewer-page #overlayCurrent,
body.viewer-page .ranking-current {
  display: none !important;
}

.viewer-page .overlay-wrap {
  display: block !important;
  height: auto !important;
  min-height: 360px !important;
  overflow: visible !important;
  padding: 0 0 140px 0 !important;
}

.viewer-page .overlay-board {
  display: block !important;
  width: 100% !important;
  min-height: 420px !important;
  overflow: visible !important;
  padding: clamp(16px, 1.5vw, 28px) !important;
  background: rgba(9,12,20,.80) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 28px !important;
}

.viewer-page .tier-board {
  display: grid !important;
  gap: 14px !important;
  width: 100% !important;
}

.viewer-page .tier-row {
  display: grid !important;
  grid-template-columns: clamp(76px, 5vw, 118px) minmax(0, 1fr) !important;
  min-height: clamp(150px, 12vw, 235px) !important;
}

.viewer-page .tier-items {
  gap: clamp(10px, 1vw, 20px) !important;
  padding: clamp(12px, 1.2vw, 22px) !important;
}

.viewer-page .game-chip {
  width: clamp(92px, 7.8vw, 158px) !important;
}

/* Profile and social safeguards */
.viewer-page .social-link svg,
.viewer-page .viewer-about-socials svg {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  fill: currentColor !important;
}

.viewer-page .viewer-about-photo-wrap,
.viewer-page .viewer-about-avatar {
  width: clamp(230px, 16vw, 340px) !important;
  height: clamp(230px, 16vw, 340px) !important;
  max-width: 340px !important;
  max-height: 340px !important;
}

/* Popup fit and close button */
.viewer-page .game-info-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: none !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: clamp(10px, 1.4vw, 20px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.viewer-page .game-info-modal.open {
  display: flex !important;
}

.viewer-page .game-info-modal .modal-card {
  width: min(97vw, 1780px) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  margin: 0 auto 60px auto !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  padding: clamp(18px, 1.6vw, 30px) !important;
}

.viewer-page .game-info-modal .modal-close,
.game-info-modal .modal-close {
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
  left: auto !important;
  margin: 0 !important;
  z-index: 100 !important;
}

.viewer-page .game-info-modal .info-layout {
  grid-template-columns: minmax(260px, 430px) minmax(0, 1fr) !important;
  gap: clamp(22px, 2.4vw, 42px) !important;
}

.viewer-page .game-info-modal .info-art {
  max-width: 430px !important;
}

/* Professional tabs: no score badges in top tab buttons */
.polished-tabs,
.game-info-tabs-three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 10px !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

.polished-tabs .game-info-tab-button,
.game-info-tabs-three .game-info-tab-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 58px !important;
  padding: 13px 18px !important;
  border-radius: 18px !important;
  color: rgba(245,247,251,.74) !important;
  text-align: center !important;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.polished-tabs .game-info-tab-button b,
.game-info-tabs-three .game-info-tab-button b {
  display: none !important;
}

.polished-tabs .game-info-tab-button span,
.game-info-tabs-three .game-info-tab-button span {
  font-size: clamp(15px, .9vw, 21px) !important;
  font-weight: 740 !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
}

.polished-tabs .game-info-tab-button.active,
.game-info-tabs-three .game-info-tab-button.active {
  color: #fff !important;
  background:
    linear-gradient(135deg, rgba(100,210,255,.20), rgba(145,70,255,.14)),
    rgba(255,255,255,.075) !important;
  border-color: rgba(100,210,255,.48) !important;
}

/* Score/tier cards */
.kyle-only-summary-row {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  margin-bottom: 18px !important;
}

.kyle-tier-summary-card strong {
  color: #ffd166 !important;
}

.score-summary-row .overall-score,
.comparison-summary-grid > div {
  position: relative !important;
  overflow: hidden !important;
}

/* Visible by default, so they never disappear if animation fails */
.reveal-card,
.community-tab-summary-row .overall-score,
.comparison-summary-grid > div {
  opacity: 1 !important;
  clip-path: none !important;
  transform: none !important;
  filter: none !important;
  visibility: visible !important;
}

/* Animation only after JS applies score-reveal-active */
.game-info-tab-panel.score-reveal-active .reveal-card,
.game-info-tab-panel.score-reveal-active .comparison-summary-grid > div {
  opacity: 0 !important;
  transform: translateX(-16px) scale(.985) !important;
  filter: blur(7px) saturate(1.12) !important;
  animation: dust-fade-in-left-to-right .72s cubic-bezier(.16, 1, .3, 1) forwards !important;
  animation-delay: var(--reveal-delay, 0ms) !important;
}

.game-info-tab-panel.score-reveal-active .reveal-card::after,
.game-info-tab-panel.score-reveal-active .comparison-summary-grid > div::after {
  content: "" !important;
  position: absolute !important;
  inset: -35% -80% !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 38% 50%, rgba(255,255,255,.34) 0 2px, transparent 3px),
    radial-gradient(circle at 43% 40%, rgba(100,210,255,.28) 0 1px, transparent 3px),
    radial-gradient(circle at 48% 58%, rgba(255,209,102,.24) 0 1px, transparent 3px),
    linear-gradient(100deg, transparent 34%, rgba(255,255,255,.13) 50%, transparent 66%) !important;
  opacity: 0 !important;
  transform: translateX(-70%) !important;
  animation: dust-sparkle-left-to-right .72s ease forwards !important;
  animation-delay: var(--reveal-delay, 0ms) !important;
}

@keyframes dust-fade-in-left-to-right {
  0% {
    opacity: 0;
    transform: translateX(-16px) scale(.985);
    filter: blur(8px) saturate(1.20);
  }
  45% {
    opacity: .62;
    filter: blur(3px) saturate(1.12);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0) saturate(1);
  }
}

@keyframes dust-sparkle-left-to-right {
  0% {
    opacity: 0;
    transform: translateX(-70%);
  }
  22% {
    opacity: .85;
  }
  100% {
    opacity: 0;
    transform: translateX(70%);
  }
}

/* Cleaner typography inside all three tabs */
.viewer-page .game-info-modal,
.viewer-page .game-info-modal input,
.viewer-page .game-info-modal select,
.viewer-page .game-info-modal textarea,
.viewer-page .game-info-modal button {
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.community-intro-box h2,
.community-review-form-box h2,
.community-review-list-box h2,
.notes-box h2,
.comparison-header h2,
.comparison-section h2 {
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: clamp(24px, 1.55vw, 36px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em !important;
  font-weight: 760 !important;
}

.community-intro-box p,
.community-review-form-box p,
.community-clean-header p,
.comparison-header p,
.notes-box p,
.viewer-feedback-rules,
.feedback-helper,
.community-form-subtitle {
  font-size: clamp(13px, .78vw, 16px) !important;
  line-height: 1.5 !important;
  font-weight: 520 !important;
  color: rgba(245,247,251,.70) !important;
  letter-spacing: 0 !important;
}

.community-submit-body label,
.feedback-form-row label,
.community-comment-label {
  font-size: clamp(12px, .72vw, 15px) !important;
  line-height: 1.25 !important;
  font-weight: 720 !important;
  color: rgba(245,247,251,.90) !important;
}

/* Media manager title is optional with a dropped poster */
.favourite-media-manager section[data-media-panel="tv"] {
  border-color: rgba(145,70,255,.35) !important;
  background:
    linear-gradient(135deg, rgba(145,70,255,.10), rgba(255,255,255,.035)) !important;
}

.favourite-media-manager section[data-media-panel="tv"] h3::after {
  content: "TV shows";
  margin-left: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(145,70,255,.20);
  color: #d7b7ff;
  font-size: 12px;
  vertical-align: middle;
}

@media (max-width: 1100px) {
  .viewer-page .game-info-modal .info-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 980px) {
  .polished-tabs,
  .game-info-tabs-three {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .kyle-only-summary-row {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-info-tab-panel.score-reveal-active .reveal-card,
  .game-info-tab-panel.score-reveal-active .comparison-summary-grid > div {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }

  .game-info-tab-panel.score-reveal-active .reveal-card::after,
  .game-info-tab-panel.score-reveal-active .comparison-summary-grid > div::after {
    display: none !important;
    animation: none !important;
  }
}




/* === FIX: Score and tier cards visible, with safe left-to-right fade reveal === */

/* Force the Kyle cards row to exist visually */
.viewer-page .kyle-only-summary-row,
.viewer-page .community-tab-summary-row,
.viewer-page .comparison-summary-grid {
  display: grid !important;
  gap: 12px !important;
  margin: 18px 0 22px !important;
  visibility: visible !important;
}

.viewer-page .kyle-only-summary-row {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.viewer-page .community-tab-summary-row {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
}

/* Cards are visible by default. This prevents the invisible-card bug permanently. */
.viewer-page .reveal-card,
.viewer-page .community-tab-summary-row .overall-score,
.viewer-page .comparison-summary-grid > div,
.viewer-page .score-summary-row .overall-score {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  min-height: 76px !important;
}

/* Clean card text */
.viewer-page .score-summary-row .overall-score span,
.viewer-page .comparison-summary-grid span {
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: clamp(12px, .72vw, 15px) !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  color: rgba(245,247,251,.72) !important;
}

.viewer-page .score-summary-row .overall-score strong,
.viewer-page .comparison-summary-grid strong {
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: clamp(26px, 1.8vw, 42px) !important;
  font-weight: 850 !important;
  letter-spacing: -.035em !important;
  color: #ffd166 !important;
}

/* Dust/fade reveal: no inline styles, no wipe, one card at a time */
.viewer-page .game-info-tab-panel.score-reveal-active .reveal-card,
.viewer-page .game-info-tab-panel.score-reveal-active .comparison-summary-grid > div {
  opacity: 0 !important;
  transform: translateX(-16px) scale(.985) !important;
  filter: blur(7px) saturate(1.12) !important;
  animation: safe-dust-fade-in-left-right .62s cubic-bezier(.16, 1, .3, 1) forwards !important;
  animation-delay: var(--reveal-delay, 0ms) !important;
}

@keyframes safe-dust-fade-in-left-right {
  0% {
    opacity: 0;
    transform: translateX(-16px) scale(.985);
    filter: blur(7px) saturate(1.12);
  }
  55% {
    opacity: .72;
    transform: translateX(-4px) scale(.995);
    filter: blur(2px) saturate(1.06);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0) saturate(1);
  }
}

/* Small dust sweep that appears while each card fades in */
.viewer-page .game-info-tab-panel.score-reveal-active .reveal-card::after,
.viewer-page .game-info-tab-panel.score-reveal-active .comparison-summary-grid > div::after {
  content: "" !important;
  position: absolute !important;
  inset: -40% -80% !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 38% 45%, rgba(255,255,255,.34) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 56%, rgba(100,210,255,.25) 0 1px, transparent 3px),
    radial-gradient(circle at 51% 42%, rgba(255,209,102,.22) 0 1px, transparent 3px),
    linear-gradient(100deg, transparent 34%, rgba(255,255,255,.12) 50%, transparent 66%) !important;
  opacity: 0 !important;
  transform: translateX(-70%) !important;
  animation: safe-dust-sweep-left-right .62s ease forwards !important;
  animation-delay: var(--reveal-delay, 0ms) !important;
}

@keyframes safe-dust-sweep-left-right {
  0% {
    opacity: 0;
    transform: translateX(-70%);
  }
  25% {
    opacity: .85;
  }
  100% {
    opacity: 0;
    transform: translateX(70%);
  }
}

/* Tidy font weights on the three tab pages */
.viewer-page .game-info-modal,
.viewer-page .game-info-modal input,
.viewer-page .game-info-modal select,
.viewer-page .game-info-modal textarea,
.viewer-page .game-info-modal button {
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.viewer-page .notes-box h2,
.viewer-page .community-intro-box h2,
.viewer-page .community-review-form-box h2,
.viewer-page .community-review-list-box h2,
.viewer-page .comparison-header h2 {
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 780 !important;
  letter-spacing: -.025em !important;
  font-size: clamp(24px, 1.55vw, 36px) !important;
}

.viewer-page .notes-box p,
.viewer-page .community-intro-box p,
.viewer-page .community-review-form-box p,
.viewer-page .comparison-header p,
.viewer-page .viewer-feedback-rules,
.viewer-page .community-form-subtitle {
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 520 !important;
  line-height: 1.5 !important;
  color: rgba(245,247,251,.70) !important;
  font-size: clamp(13px, .78vw, 16px) !important;
}

@media (max-width: 760px) {
  .viewer-page .kyle-only-summary-row {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .viewer-page .game-info-tab-panel.score-reveal-active .reveal-card,
  .viewer-page .game-info-tab-panel.score-reveal-active .comparison-summary-grid > div {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }

  .viewer-page .game-info-tab-panel.score-reveal-active .reveal-card::after,
  .viewer-page .game-info-tab-panel.score-reveal-active .comparison-summary-grid > div::after {
    display: none !important;
  }
}




/* =========================================================
   EMERGENCY FIX: remove score reveal animation completely.
   Scores and tiers must always show.
   ========================================================= */

.viewer-page .score-summary-row,
.viewer-page .kyle-only-summary-row,
.viewer-page .community-tab-summary-row,
.viewer-page .comparison-summary-grid {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.viewer-page .kyle-only-summary-row {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 18px 0 22px !important;
}

.viewer-page .community-tab-summary-row {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 12px !important;
  margin: 18px 0 22px !important;
}

.viewer-page .comparison-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 18px 0 22px !important;
}

/* Kill every reveal/dust animation state */
.viewer-page .reveal-card,
.viewer-page .score-summary-row .overall-score,
.viewer-page .community-tab-summary-row .overall-score,
.viewer-page .comparison-summary-grid > div,
.viewer-page .game-info-tab-panel.active .reveal-card,
.viewer-page .game-info-tab-panel.active .community-tab-summary-row .overall-score,
.viewer-page .game-info-tab-panel.active .comparison-summary-grid > div,
.viewer-page .game-info-tab-panel.score-reveal-active .reveal-card,
.viewer-page .game-info-tab-panel.score-reveal-active .community-tab-summary-row .overall-score,
.viewer-page .game-info-tab-panel.score-reveal-active .comparison-summary-grid > div {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  animation: none !important;
  min-height: 76px !important;
}

/* Kill the sparkle/dust overlay */
.viewer-page .reveal-card::after,
.viewer-page .score-summary-row .overall-score::after,
.viewer-page .community-tab-summary-row .overall-score::after,
.viewer-page .comparison-summary-grid > div::after,
.viewer-page .game-info-tab-panel.active .reveal-card::after,
.viewer-page .game-info-tab-panel.active .community-tab-summary-row .overall-score::after,
.viewer-page .game-info-tab-panel.active .comparison-summary-grid > div::after,
.viewer-page .game-info-tab-panel.score-reveal-active .reveal-card::after,
.viewer-page .game-info-tab-panel.score-reveal-active .community-tab-summary-row .overall-score::after,
.viewer-page .game-info-tab-panel.score-reveal-active .comparison-summary-grid > div::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  animation: none !important;
}

/* Make the cards readable */
.viewer-page .score-summary-row .overall-score,
.viewer-page .comparison-summary-grid > div {
  align-content: center !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
  background: rgba(31, 27, 20, .92) !important;
  border: 1px solid rgba(255, 209, 102, .28) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.viewer-page .score-summary-row .overall-score span,
.viewer-page .comparison-summary-grid span {
  display: block !important;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: clamp(12px, .72vw, 15px) !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  color: rgba(245,247,251,.72) !important;
}

.viewer-page .score-summary-row .overall-score strong,
.viewer-page .comparison-summary-grid strong {
  display: block !important;
  margin-top: 6px !important;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: clamp(28px, 1.9vw, 44px) !important;
  font-weight: 850 !important;
  letter-spacing: -.035em !important;
  line-height: 1 !important;
  color: #ffd166 !important;
}

.viewer-page .community-score strong,
.viewer-page .comparison-summary-grid > div:nth-child(2) strong {
  color: #64d2ff !important;
}

@media (max-width: 900px) {
  .viewer-page .kyle-only-summary-row,
  .viewer-page .community-tab-summary-row,
  .viewer-page .comparison-summary-grid {
    grid-template-columns: 1fr !important;
  }
}




/* =========================================================
   WORKING SCORE REVEAL ANIMATION
   Uses the .score-reveal-run class added by JS after the tab is visible.
   This avoids the old issue where the browser had already completed the animation before you saw it.
   ========================================================= */

/* Keep the current safe visible state by default */
.viewer-page .score-summary-row .overall-score,
.viewer-page .community-tab-summary-row .overall-score,
.viewer-page .comparison-summary-grid > div {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}

/* While reveal is running, cards fade/assemble in one at a time */
.viewer-page .game-info-tab-panel.score-reveal-run .reveal-card,
.viewer-page .game-info-tab-panel.score-reveal-run .comparison-summary-grid > div {
  opacity: 0 !important;
  transform: translateY(10px) scale(.94) !important;
  filter: blur(14px) saturate(1.35) !important;
  animation: reverse-snap-score-reveal 1.25s cubic-bezier(.16, 1, .3, 1) forwards !important;
  animation-delay: var(--score-reveal-delay, 0ms) !important;
}

/* Dust overlay while each score comes in */
.viewer-page .game-info-tab-panel.score-reveal-run .reveal-card::after,
.viewer-page .game-info-tab-panel.score-reveal-run .comparison-summary-grid > div::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -45% -85% !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background:
    radial-gradient(circle at 32% 46%, rgba(255,255,255,.52) 0 1px, transparent 3px),
    radial-gradient(circle at 39% 59%, rgba(100,210,255,.34) 0 1px, transparent 3px),
    radial-gradient(circle at 48% 38%, rgba(255,209,102,.32) 0 1px, transparent 3px),
    radial-gradient(circle at 58% 56%, rgba(255,255,255,.26) 0 1px, transparent 3px),
    radial-gradient(circle at 66% 45%, rgba(100,210,255,.22) 0 1px, transparent 3px),
    linear-gradient(100deg, transparent 34%, rgba(255,255,255,.18) 50%, transparent 66%) !important;
  transform: translateX(-80%) scale(.96) !important;
  filter: blur(1px) !important;
  animation: reverse-snap-dust-pass 1.25s ease forwards !important;
  animation-delay: var(--score-reveal-delay, 0ms) !important;
}

@keyframes reverse-snap-score-reveal {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(.94);
    filter: blur(14px) saturate(1.35);
  }
  34% {
    opacity: .28;
    transform: translateY(7px) scale(.965);
    filter: blur(9px) saturate(1.25);
  }
  68% {
    opacity: .78;
    transform: translateY(2px) scale(.992);
    filter: blur(3px) saturate(1.10);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) saturate(1);
  }
}

@keyframes reverse-snap-dust-pass {
  0% {
    opacity: 0;
    transform: translateX(-80%) scale(.96);
    filter: blur(2px);
  }
  24% {
    opacity: .95;
  }
  55% {
    opacity: .45;
    filter: blur(.8px);
  }
  100% {
    opacity: 0;
    transform: translateX(80%) scale(1.05);
    filter: blur(0);
  }
}

/* Keep card contents readable during the animation */
.viewer-page .game-info-tab-panel.score-reveal-run .reveal-card > *,
.viewer-page .game-info-tab-panel.score-reveal-run .comparison-summary-grid > div > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Manual test helper: add ?debugreveal=1 then click tabs/open games */
@media (prefers-reduced-motion: reduce) {
  .viewer-page .game-info-tab-panel.score-reveal-run .reveal-card,
  .viewer-page .game-info-tab-panel.score-reveal-run .comparison-summary-grid > div {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }

  .viewer-page .game-info-tab-panel.score-reveal-run .reveal-card::after,
  .viewer-page .game-info-tab-panel.score-reveal-run .comparison-summary-grid > div::after {
    display: none !important;
  }
}




/* =========================================================
   SIMPLE LEFT-TO-RIGHT FADE REVEAL
   This disables the dust/Thanos reveal and uses a clean left-to-right reveal.
   ========================================================= */

/* Disable older dust reveal class completely */
.viewer-page .game-info-tab-panel.score-reveal-run .reveal-card,
.viewer-page .game-info-tab-panel.score-reveal-run .community-tab-summary-row .overall-score,
.viewer-page .game-info-tab-panel.score-reveal-run .comparison-summary-grid > div {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  animation: none !important;
}

.viewer-page .game-info-tab-panel.score-reveal-run .reveal-card::after,
.viewer-page .game-info-tab-panel.score-reveal-run .community-tab-summary-row .overall-score::after,
.viewer-page .game-info-tab-panel.score-reveal-run .comparison-summary-grid > div::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

/* Cards remain visible by default */
.viewer-page .reveal-card,
.viewer-page .score-summary-row .overall-score,
.viewer-page .community-tab-summary-row .overall-score,
.viewer-page .comparison-summary-grid > div {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}

/* Simple reveal starts from the left and opens to the right */
.viewer-page .game-info-tab-panel.simple-left-reveal-run .reveal-card,
.viewer-page .game-info-tab-panel.simple-left-reveal-run .community-tab-summary-row .overall-score,
.viewer-page .game-info-tab-panel.simple-left-reveal-run .comparison-summary-grid > div {
  opacity: 0 !important;
  clip-path: inset(0 100% 0 0 round 18px) !important;
  transform: translateX(-8px) !important;
  filter: blur(2px) !important;
  animation: simple-score-left-reveal 1s cubic-bezier(.16, 1, .3, 1) forwards !important;
  animation-delay: var(--simple-reveal-delay, 0ms) !important;
}

/* One soft highlight passes across as it reveals */
.viewer-page .game-info-tab-panel.simple-left-reveal-run .reveal-card::after,
.viewer-page .game-info-tab-panel.simple-left-reveal-run .community-tab-summary-row .overall-score::after,
.viewer-page .game-info-tab-panel.simple-left-reveal-run .comparison-summary-grid > div::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, .16) 48%,
    transparent 78%
  ) !important;
  transform: translateX(-120%) !important;
  animation: simple-score-highlight 1s ease forwards !important;
  animation-delay: var(--simple-reveal-delay, 0ms) !important;
}

@keyframes simple-score-left-reveal {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0 round 18px);
    transform: translateX(-8px);
    filter: blur(2px);
  }

  35% {
    opacity: .55;
    filter: blur(1px);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 18px);
    transform: translateX(0);
    filter: blur(0);
  }
}

@keyframes simple-score-highlight {
  0% {
    opacity: 0;
    transform: translateX(-120%);
  }

  30% {
    opacity: .75;
  }

  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

/* Keep the card text above the highlight */
.viewer-page .game-info-tab-panel.simple-left-reveal-run .reveal-card > *,
.viewer-page .game-info-tab-panel.simple-left-reveal-run .community-tab-summary-row .overall-score > *,
.viewer-page .game-info-tab-panel.simple-left-reveal-run .comparison-summary-grid > div > * {
  position: relative !important;
  z-index: 2 !important;
}

@media (prefers-reduced-motion: reduce) {
  .viewer-page .game-info-tab-panel.simple-left-reveal-run .reveal-card,
  .viewer-page .game-info-tab-panel.simple-left-reveal-run .community-tab-summary-row .overall-score,
  .viewer-page .game-info-tab-panel.simple-left-reveal-run .comparison-summary-grid > div {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }

  .viewer-page .game-info-tab-panel.simple-left-reveal-run .reveal-card::after,
  .viewer-page .game-info-tab-panel.simple-left-reveal-run .community-tab-summary-row .overall-score::after,
  .viewer-page .game-info-tab-panel.simple-left-reveal-run .comparison-summary-grid > div::after {
    display: none !important;
  }
}




/* =========================================================
   FINAL STABLE FIX: remove ALL score/tier animations.
   Scores and tiers stay visible. No reveal. No fade. No wipe.
   ========================================================= */

/* Disable every animation trigger class used so far */
.viewer-page .game-info-tab-panel.score-reveal-run .reveal-card,
.viewer-page .game-info-tab-panel.simple-left-reveal-run .reveal-card,
.viewer-page .game-info-tab-panel.score-reveal-active .reveal-card,
.viewer-page .game-info-tab-panel.active .reveal-card,
.viewer-page .game-info-tab-panel.score-reveal-run .community-tab-summary-row .overall-score,
.viewer-page .game-info-tab-panel.simple-left-reveal-run .community-tab-summary-row .overall-score,
.viewer-page .game-info-tab-panel.score-reveal-active .community-tab-summary-row .overall-score,
.viewer-page .game-info-tab-panel.active .community-tab-summary-row .overall-score,
.viewer-page .game-info-tab-panel.score-reveal-run .comparison-summary-grid > div,
.viewer-page .game-info-tab-panel.simple-left-reveal-run .comparison-summary-grid > div,
.viewer-page .game-info-tab-panel.score-reveal-active .comparison-summary-grid > div,
.viewer-page .game-info-tab-panel.active .comparison-summary-grid > div {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  animation: none !important;
}

/* Remove every shimmer/dust/reveal overlay */
.viewer-page .reveal-card::after,
.viewer-page .score-summary-row .overall-score::after,
.viewer-page .community-tab-summary-row .overall-score::after,
.viewer-page .comparison-summary-grid > div::after,
.viewer-page .game-info-tab-panel.score-reveal-run .reveal-card::after,
.viewer-page .game-info-tab-panel.simple-left-reveal-run .reveal-card::after,
.viewer-page .game-info-tab-panel.score-reveal-active .reveal-card::after,
.viewer-page .game-info-tab-panel.active .reveal-card::after,
.viewer-page .game-info-tab-panel.score-reveal-run .community-tab-summary-row .overall-score::after,
.viewer-page .game-info-tab-panel.simple-left-reveal-run .community-tab-summary-row .overall-score::after,
.viewer-page .game-info-tab-panel.score-reveal-active .community-tab-summary-row .overall-score::after,
.viewer-page .game-info-tab-panel.active .community-tab-summary-row .overall-score::after,
.viewer-page .game-info-tab-panel.score-reveal-run .comparison-summary-grid > div::after,
.viewer-page .game-info-tab-panel.simple-left-reveal-run .comparison-summary-grid > div::after,
.viewer-page .game-info-tab-panel.score-reveal-active .comparison-summary-grid > div::after,
.viewer-page .game-info-tab-panel.active .comparison-summary-grid > div::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  animation: none !important;
}

/* Keep score/tier card layout locked and readable */
.viewer-page .score-summary-row,
.viewer-page .kyle-only-summary-row,
.viewer-page .community-tab-summary-row,
.viewer-page .comparison-summary-grid {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  gap: 12px !important;
  margin: 18px 0 22px !important;
}

.viewer-page .kyle-only-summary-row {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.viewer-page .community-tab-summary-row {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
}

.viewer-page .comparison-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.viewer-page .reveal-card,
.viewer-page .score-summary-row .overall-score,
.viewer-page .community-tab-summary-row .overall-score,
.viewer-page .comparison-summary-grid > div {
  display: grid !important;
  align-content: center !important;
  min-height: 76px !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
  background: rgba(31, 27, 20, .92) !important;
  border: 1px solid rgba(255, 209, 102, .28) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  animation: none !important;
  overflow: hidden !important;
}

.viewer-page .score-summary-row .overall-score span,
.viewer-page .comparison-summary-grid span {
  display: block !important;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: clamp(12px, .72vw, 15px) !important;
  font-weight: 800 !important;
  color: rgba(245,247,251,.72) !important;
}

.viewer-page .score-summary-row .overall-score strong,
.viewer-page .comparison-summary-grid strong {
  display: block !important;
  margin-top: 6px !important;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: clamp(28px, 1.9vw, 44px) !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  color: #ffd166 !important;
}

.viewer-page .community-score strong,
.viewer-page .comparison-summary-grid > div:nth-child(2) strong {
  color: #64d2ff !important;
}

@media (max-width: 900px) {
  .viewer-page .kyle-only-summary-row,
  .viewer-page .community-tab-summary-row,
  .viewer-page .comparison-summary-grid {
    grid-template-columns: 1fr !important;
  }
}




/* =========================================================
   POLISHED POPUP TAB TYPOGRAPHY
   Clean, modern, readable font styling for all game popout tabs.
   ========================================================= */

:root {
  --popup-font: Inter, ui-sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --popup-heading-font: "Plus Jakarta Sans", Inter, ui-sans-serif, "Segoe UI", Roboto, Arial, sans-serif;
  --popup-serif-accent: "Fraunces", "Playfair Display", Georgia, serif;
}

/* Overall popup type */
.viewer-page .game-info-modal,
.viewer-page .game-info-modal input,
.viewer-page .game-info-modal select,
.viewer-page .game-info-modal textarea,
.viewer-page .game-info-modal button,
.game-info-modal,
.game-info-modal input,
.game-info-modal select,
.game-info-modal textarea,
.game-info-modal button {
  font-family: var(--popup-font) !important;
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased !important;
  font-variant-numeric: tabular-nums !important;
}

/* Game title: less chunky, still bold and premium */
.viewer-page .game-info-modal .info-main h1,
.game-info-modal .info-main h1 {
  font-family: var(--popup-heading-font) !important;
  font-weight: 820 !important;
  letter-spacing: -0.065em !important;
  line-height: .92 !important;
  color: #f8fbff !important;
  text-wrap: balance !important;
}

/* Top platform/regular chips */
.viewer-page .info-topline,
.game-info-modal .info-topline {
  font-family: var(--popup-font) !important;
}

.viewer-page .info-platform,
.viewer-page .regular-pill,
.game-info-modal .info-platform,
.game-info-modal .regular-pill {
  font-family: var(--popup-font) !important;
  font-size: clamp(12px, .72vw, 14px) !important;
  font-weight: 760 !important;
  letter-spacing: .025em !important;
  text-transform: uppercase !important;
}

/* Tab buttons */
.viewer-page .polished-tabs,
.viewer-page .game-info-tabs-three,
.game-info-modal .polished-tabs,
.game-info-modal .game-info-tabs-three {
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.025)) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.viewer-page .polished-tabs .game-info-tab-button,
.viewer-page .game-info-tabs-three .game-info-tab-button,
.game-info-modal .polished-tabs .game-info-tab-button,
.game-info-modal .game-info-tabs-three .game-info-tab-button {
  font-family: var(--popup-font) !important;
  min-height: 56px !important;
  border-radius: 16px !important;
  color: rgba(245,247,251,.70) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.012)) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  transition: transform .16s ease, border-color .16s ease, color .16s ease, background .16s ease !important;
}

.viewer-page .polished-tabs .game-info-tab-button:hover,
.viewer-page .game-info-tabs-three .game-info-tab-button:hover,
.game-info-modal .polished-tabs .game-info-tab-button:hover,
.game-info-modal .game-info-tabs-three .game-info-tab-button:hover {
  transform: translateY(-1px) !important;
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(100,210,255,.26) !important;
  background:
    linear-gradient(135deg, rgba(100,210,255,.08), rgba(255,255,255,.035)) !important;
}

.viewer-page .polished-tabs .game-info-tab-button.active,
.viewer-page .game-info-tabs-three .game-info-tab-button.active,
.game-info-modal .polished-tabs .game-info-tab-button.active,
.game-info-modal .game-info-tabs-three .game-info-tab-button.active {
  color: #ffffff !important;
  background:
    linear-gradient(135deg, rgba(100,210,255,.18), rgba(145,70,255,.13)),
    rgba(255,255,255,.065) !important;
  border-color: rgba(100,210,255,.44) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.07) !important;
}

.viewer-page .polished-tabs .game-info-tab-button span,
.viewer-page .game-info-tabs-three .game-info-tab-button span,
.game-info-modal .polished-tabs .game-info-tab-button span,
.game-info-modal .game-info-tabs-three .game-info-tab-button span {
  font-family: var(--popup-font) !important;
  font-size: clamp(15px, .86vw, 20px) !important;
  font-weight: 680 !important;
  letter-spacing: -0.012em !important;
  line-height: 1.12 !important;
}

/* Score cards */
.viewer-page .score-summary-row .overall-score span,
.viewer-page .comparison-summary-grid span,
.game-info-modal .score-summary-row .overall-score span,
.game-info-modal .comparison-summary-grid span {
  font-family: var(--popup-font) !important;
  font-size: clamp(11px, .68vw, 14px) !important;
  font-weight: 720 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
  color: rgba(245,247,251,.64) !important;
}

.viewer-page .score-summary-row .overall-score strong,
.viewer-page .comparison-summary-grid strong,
.game-info-modal .score-summary-row .overall-score strong,
.game-info-modal .comparison-summary-grid strong {
  font-family: var(--popup-heading-font) !important;
  font-size: clamp(28px, 1.85vw, 44px) !important;
  font-weight: 780 !important;
  letter-spacing: -0.055em !important;
  line-height: .94 !important;
}

/* Section cards */
.viewer-page .notes-box,
.viewer-page .community-intro-box,
.viewer-page .community-review-form-box,
.viewer-page .community-review-list-box,
.viewer-page .comparison-section,
.game-info-modal .notes-box,
.game-info-modal .community-intro-box,
.game-info-modal .community-review-form-box,
.game-info-modal .community-review-list-box,
.game-info-modal .comparison-section {
  font-family: var(--popup-font) !important;
}

/* Section headings: trendy but still readable */
.viewer-page .notes-box h2,
.viewer-page .community-intro-box h2,
.viewer-page .community-review-form-box h2,
.viewer-page .community-review-list-box h2,
.viewer-page .comparison-header h2,
.viewer-page .comparison-section h2,
.game-info-modal .notes-box h2,
.game-info-modal .community-intro-box h2,
.game-info-modal .community-review-form-box h2,
.game-info-modal .community-review-list-box h2,
.game-info-modal .comparison-header h2,
.game-info-modal .comparison-section h2 {
  font-family: var(--popup-heading-font) !important;
  font-size: clamp(24px, 1.45vw, 36px) !important;
  font-weight: 760 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.02 !important;
  color: #f8fbff !important;
  text-wrap: balance !important;
}

/* Body copy: softer, less blocky */
.viewer-page .notes-box p,
.viewer-page .community-intro-box p,
.viewer-page .community-review-form-box p,
.viewer-page .comparison-header p,
.viewer-page .viewer-feedback-rules,
.viewer-page .community-form-subtitle,
.viewer-page .community-empty-state span,
.game-info-modal .notes-box p,
.game-info-modal .community-intro-box p,
.game-info-modal .community-review-form-box p,
.game-info-modal .comparison-header p,
.game-info-modal .viewer-feedback-rules,
.game-info-modal .community-form-subtitle,
.game-info-modal .community-empty-state span {
  font-family: var(--popup-font) !important;
  font-size: clamp(13px, .78vw, 16px) !important;
  font-weight: 460 !important;
  line-height: 1.55 !important;
  letter-spacing: -0.005em !important;
  color: rgba(245,247,251,.72) !important;
}

/* Form labels and fields */
.viewer-page .community-submit-body label,
.viewer-page .feedback-form-row label,
.viewer-page .community-comment-label,
.viewer-page .modal-edit-panel label,
.game-info-modal .community-submit-body label,
.game-info-modal .feedback-form-row label,
.game-info-modal .community-comment-label,
.game-info-modal .modal-edit-panel label {
  font-family: var(--popup-font) !important;
  font-size: clamp(12px, .72vw, 15px) !important;
  font-weight: 650 !important;
  letter-spacing: .005em !important;
  color: rgba(245,247,251,.86) !important;
}

.viewer-page .community-submit-body input,
.viewer-page .community-submit-body select,
.viewer-page .community-submit-body textarea,
.viewer-page .modal-edit-panel input,
.viewer-page .modal-edit-panel select,
.viewer-page .modal-edit-panel textarea,
.game-info-modal .community-submit-body input,
.game-info-modal .community-submit-body select,
.game-info-modal .community-submit-body textarea,
.game-info-modal .modal-edit-panel input,
.game-info-modal .modal-edit-panel select,
.game-info-modal .modal-edit-panel textarea {
  font-family: var(--popup-font) !important;
  font-size: clamp(14px, .82vw, 17px) !important;
  font-weight: 480 !important;
  letter-spacing: -.005em !important;
}

/* Score breakdown rows */
.viewer-page .score-name,
.viewer-page .score-value,
.game-info-modal .score-name,
.game-info-modal .score-value {
  font-family: var(--popup-font) !important;
  font-weight: 650 !important;
  letter-spacing: -.01em !important;
}

/* Community review cards */
.viewer-page .community-review-card-head strong,
.game-info-modal .community-review-card-head strong {
  font-family: var(--popup-heading-font) !important;
  font-size: clamp(17px, .95vw, 21px) !important;
  font-weight: 720 !important;
  letter-spacing: -.025em !important;
}

.viewer-page .community-review-comment,
.game-info-modal .community-review-comment {
  font-family: var(--popup-font) !important;
  font-size: clamp(14px, .82vw, 17px) !important;
  font-weight: 450 !important;
  line-height: 1.55 !important;
  letter-spacing: -.005em !important;
}

/* Comparison table */
.viewer-page .comparison-row strong,
.viewer-page .comparison-row span,
.viewer-page .comparison-row em,
.game-info-modal .comparison-row strong,
.game-info-modal .comparison-row span,
.game-info-modal .comparison-row em {
  font-family: var(--popup-font) !important;
  font-size: clamp(13px, .78vw, 17px) !important;
  line-height: 1.25 !important;
}

.viewer-page .comparison-row strong,
.game-info-modal .comparison-row strong {
  font-weight: 720 !important;
  letter-spacing: -.01em !important;
}

.viewer-page .comparison-row span,
.viewer-page .comparison-row em,
.game-info-modal .comparison-row span,
.game-info-modal .comparison-row em {
  font-weight: 560 !important;
}

/* Buttons inside popup */
.viewer-page .community-submit-button,
.viewer-page .modal-edit-actions button,
.viewer-page .community-review-actions button,
.game-info-modal .community-submit-button,
.game-info-modal .modal-edit-actions button,
.game-info-modal .community-review-actions button {
  font-family: var(--popup-font) !important;
  font-size: clamp(13px, .78vw, 16px) !important;
  font-weight: 720 !important;
  letter-spacing: -.005em !important;
}

/* Make placeholder text less harsh */
.viewer-page .game-info-modal ::placeholder,
.game-info-modal ::placeholder {
  font-family: var(--popup-font) !important;
  font-weight: 430 !important;
  color: rgba(245,247,251,.40) !important;
}




/* =========================================================
   COMMUNITY REVIEWER POINTS LEADERBOARD
   ========================================================= */

.viewer-page .community-leaderboard-section {
  width: 100% !important;
  margin: clamp(22px, 2.2vw, 42px) 0 !important;
  padding: clamp(18px, 1.6vw, 30px) !important;
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(255,209,102,.12), transparent 32%),
    radial-gradient(circle at 88% 10%, rgba(100,210,255,.12), transparent 34%),
    rgba(9,12,20,.78) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.30) !important;
  font-family: var(--popup-font, Inter, "Segoe UI", Roboto, Arial, sans-serif) !important;
}

.viewer-page .community-leaderboard-header {
  display: flex !important;
  justify-content: space-between !important;
  gap: 20px !important;
  align-items: end !important;
  margin-bottom: 16px !important;
}

.viewer-page .community-leaderboard-header span {
  display: block !important;
  margin-bottom: 5px !important;
  color: #ffd166 !important;
  font-size: clamp(11px, .7vw, 14px) !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.viewer-page .community-leaderboard-header h2 {
  margin: 0 !important;
  font-family: var(--popup-heading-font, Inter, "Segoe UI", Roboto, Arial, sans-serif) !important;
  font-size: clamp(32px, 2.2vw, 56px) !important;
  line-height: .95 !important;
  font-weight: 820 !important;
  letter-spacing: -.06em !important;
  color: #f8fbff !important;
}

.viewer-page .community-leaderboard-header p {
  max-width: 540px !important;
  margin: 0 !important;
  color: rgba(245,247,251,.68) !important;
  font-size: clamp(13px, .8vw, 16px) !important;
  line-height: 1.5 !important;
  font-weight: 470 !important;
}

.viewer-page .community-points-rules {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 18px !important;
}

.viewer-page .community-points-rules span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 8px 11px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(245,247,251,.74) !important;
  font-size: clamp(12px, .72vw, 14px) !important;
  font-weight: 650 !important;
}

.viewer-page .community-points-rules b {
  color: #ffd166 !important;
}

.viewer-page .community-leaderboard-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)) !important;
  gap: 12px !important;
}

.viewer-page .community-leader-card {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 14px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.028)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.viewer-page .community-leader-card.rank-1 {
  border-color: rgba(255,209,102,.42) !important;
  background:
    linear-gradient(135deg, rgba(255,209,102,.13), rgba(255,255,255,.035)) !important;
}

.viewer-page .community-leader-card.rank-2 {
  border-color: rgba(200,220,255,.32) !important;
}

.viewer-page .community-leader-card.rank-3 {
  border-color: rgba(255,154,90,.32) !important;
}

.viewer-page .community-leader-rank {
  width: 56px !important;
  height: 56px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 18px !important;
  background: rgba(0,0,0,.22) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  color: #ffd166 !important;
  font-size: 20px !important;
  font-weight: 850 !important;
}

.viewer-page .community-leader-main {
  min-width: 0 !important;
}

.viewer-page .community-leader-top {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 7px !important;
}

.viewer-page .community-leader-top strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-family: var(--popup-heading-font, Inter, "Segoe UI", Roboto, Arial, sans-serif) !important;
  font-size: clamp(18px, 1vw, 24px) !important;
  font-weight: 780 !important;
  letter-spacing: -.035em !important;
  color: #f8fbff !important;
}

.viewer-page .community-leader-top b {
  flex: 0 0 auto !important;
  color: #ffd166 !important;
  font-size: clamp(15px, .9vw, 20px) !important;
  font-weight: 820 !important;
}

.viewer-page .community-leader-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}

.viewer-page .community-leader-stats span {
  padding: 5px 8px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.055) !important;
  color: rgba(245,247,251,.72) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.viewer-page .community-leader-recent {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.viewer-page .community-leader-recent span {
  max-width: 210px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  padding: 5px 8px !important;
  border-radius: 10px !important;
  background: rgba(100,210,255,.075) !important;
  color: rgba(218,241,255,.78) !important;
  font-size: 12px !important;
  font-weight: 620 !important;
}

.viewer-page .community-leader-empty {
  grid-column: 1 / -1 !important;
  padding: 24px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px dashed rgba(255,255,255,.18) !important;
  color: rgba(245,247,251,.76) !important;
}

.viewer-page .community-leader-empty strong {
  display: block !important;
  margin-bottom: 4px !important;
  color: #f8fbff !important;
  font-size: 18px !important;
}

.viewer-page .community-leaderboard-mini {
  margin: 16px 0 !important;
  padding: 14px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

.viewer-page .community-leaderboard-mini h3 {
  margin: 0 0 10px !important;
  color: #f8fbff !important;
  font-size: 18px !important;
}

.viewer-page .community-mini-row {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 0 !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

.viewer-page .community-mini-row span {
  color: rgba(245,247,251,.78) !important;
  font-weight: 650 !important;
}

.viewer-page .community-mini-row strong {
  color: #ffd166 !important;
}

@media (max-width: 860px) {
  .viewer-page .community-leaderboard-header {
    display: block !important;
  }

  .viewer-page .community-leaderboard-header p {
    margin-top: 10px !important;
  }

  .viewer-page .community-leaderboard-list {
    grid-template-columns: 1fr !important;
  }
}


/* === TWITCH REVIEW LOGIN STYLES === */
.twitch-login-button,
.twitch-logout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
  border: 0;
  border-radius: 10px;
  background: #9146ff;
  color: #fff;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.twitch-logout-button {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.1);
}

.twitch-reviewer-chip,
.viewer-feedback-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.twitch-reviewer-chip {
  flex-wrap: wrap;
  padding: 12px;
  border-radius: 12px;
  background: rgba(145, 70, 255, 0.1);
  border: 1px solid rgba(145, 70, 255, 0.28);
}

.twitch-reviewer-chip > div,
.viewer-feedback-identity > div {
  display: grid;
  gap: 2px;
}

.twitch-review-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(145, 70, 255, 0.75);
  background: #18181b;
}

.twitch-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #9146ff;
  color: #fff;
  font-weight: 900;
}

.verified-twitch-badge {
  display: inline-flex;
  width: fit-content;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(145, 70, 255, 0.18);
  color: #c9a7ff;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.twitch-review-login-card {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.twitch-review-login-card p {
  margin: 0;
  opacity: 0.8;
}


/* === GAME_LIBRARY_MANAGER_STYLES_V1 === */

.control-page .library-manager-card {
  grid-column: 1 / -1;
  min-width: 0;
}

.library-manager-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.library-manager-heading .h1 {
  margin-bottom: 5px;
}

.library-manager-toolbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(150px, 1fr));
  gap: 12px;
  margin: 20px 0 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(13, 17, 27, 0.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.library-manager-toolbar label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.library-manager-toolbar input,
.library-manager-toolbar select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #0d111b;
  color: var(--text);
  padding: 10px 11px;
  font: inherit;
}

.library-manager-summary {
  min-height: 24px;
  margin: 8px 0 14px;
  color: #ffd166;
  font-weight: 900;
}

.library-game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 15px;
  max-height: 78vh;
  overflow-y: auto;
  padding: 4px 8px 18px 2px;
  scrollbar-gutter: stable;
}

.library-game-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 17px;
  background: rgba(8, 12, 20, 0.86);
  box-shadow: 0 12px 30px rgba(0,0,0,0.28);
  transition: transform .16s ease, border-color .16s ease, opacity .16s ease;
}

.library-game-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 209, 102, 0.55);
}

.library-game-card.is-excluded {
  opacity: 0.58;
  border-color: rgba(255, 90, 90, 0.35);
}

.library-game-card.is-excluded:hover {
  opacity: 0.9;
}

.library-game-art {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: linear-gradient(145deg, #171d2a, #080b12);
}

.library-game-art img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.library-game-art-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.library-remove-button {
  position: absolute;
  z-index: 5;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.78);
  background: rgba(205, 43, 55, .96);
  color: #fff;
  font-size: 25px;
  line-height: 1;
  font-weight: 1000;
  box-shadow: 0 8px 22px rgba(0,0,0,.48);
}

.library-remove-button:hover {
  transform: scale(1.09);
  background: #f04455;
}

.library-excluded-banner {
  position: absolute;
  z-index: 5;
  top: 10px;
  left: 10px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(205, 43, 55, .94);
  color: white;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.library-game-details {
  display: grid;
  gap: 9px;
  padding: 11px;
}

.library-game-details > strong {
  min-width: 0;
  min-height: 2.55em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--text);
  font-size: 13px;
  line-height: 1.28;
}

.library-game-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.library-platform,
.library-tier-badge {
  width: fit-content;
  max-width: 100%;
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
}

.library-platform-steam {
  color: #dff3ff;
  background: rgba(23, 26, 33, .92);
}

.library-platform-playstation {
  color: #fff;
  background: rgba(0, 67, 156, .92);
}

.library-tier-badge {
  color: #17130a;
  background: #ffd166;
}

.library-restore-button {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  background: #52d273;
  color: #07140b;
  font-size: 12px;
  font-weight: 1000;
  box-shadow: none;
}

.library-manager-empty {
  grid-column: 1 / -1;
  padding: 36px 18px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  color: var(--muted);
  text-align: center;
  font-weight: 900;
}

@media (max-width: 1050px) {
  .library-manager-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .library-manager-toolbar {
    position: static;
    grid-template-columns: 1fr;
  }

  .library-game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
  }
}

/* === END GAME_LIBRARY_MANAGER_STYLES_V1 === */


/* === GAME_ARTWORK_PICKER_STYLES_V1 === */

.library-game-art.artwork-picker-launch {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  text-align: inherit;
}

.library-game-art.artwork-picker-launch:hover {
  transform: none;
}

.library-artwork-edit-badge,
.library-custom-art-badge {
  position: absolute;
  z-index: 6;
  padding: 6px 9px;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 7px 20px rgba(0,0,0,.38);
}

.library-artwork-edit-badge {
  left: 8px;
  bottom: 8px;
  background: rgba(14, 18, 29, .88);
  border: 1px solid rgba(255,255,255,.25);
}

.library-custom-art-badge {
  left: 8px;
  top: 8px;
  background: rgba(92, 63, 211, .94);
}

.library-game-card.has-custom-artwork {
  border-color: rgba(150, 118, 255, .52);
}

.library-artwork-button {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(111, 79, 255, .95);
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
  box-shadow: none;
}

.library-artwork-button:hover {
  background: #8063ff;
}

body.artwork-picker-open {
  overflow: hidden !important;
}

.artwork-picker-modal {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 22px;
  overflow-y: auto;
}

.artwork-picker-modal.open {
  display: flex;
}

.artwork-picker-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 4, 9, .86);
  backdrop-filter: blur(12px);
}

.artwork-picker-panel {
  position: relative;
  z-index: 2;
  width: min(1500px, calc(100vw - 30px));
  min-height: 580px;
  margin: 10px auto 60px;
  padding: clamp(18px, 2vw, 32px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(111,79,255,.20), transparent 34%),
    #0d111b;
  box-shadow: 0 30px 100px rgba(0,0,0,.68);
  color: var(--text);
}

.artwork-picker-close {
  position: absolute;
  z-index: 4;
  top: 15px;
  right: 15px;
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  box-shadow: none;
}

.artwork-picker-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 560px);
  align-items: end;
  gap: 22px;
  padding-right: 52px;
}

.artwork-picker-header > div:first-child > span {
  color: #a997ff;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.artwork-picker-header h2 {
  margin: 5px 0 5px;
  font-size: clamp(30px, 4vw, 62px);
  line-height: .98;
  overflow-wrap: anywhere;
}

.artwork-picker-header p {
  margin: 0;
  color: var(--muted);
  font-weight: 900;
}

.artwork-picker-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.artwork-picker-search input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #090d15;
  color: var(--text);
  padding: 12px 13px;
  font: inherit;
}

.artwork-picker-preview-row {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(150px, 220px) minmax(240px, 1fr);
  gap: 18px;
  align-items: stretch;
  margin: 24px 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.025);
}

.artwork-preview-card {
  display: grid;
  gap: 8px;
}

.artwork-preview-card > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.artwork-preview-image {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 14px;
  background: #060910;
  color: var(--muted);
  text-align: center;
}

.artwork-preview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artwork-picker-actions {
  align-self: center;
  display: grid;
  gap: 10px;
}

.artwork-picker-actions button {
  width: 100%;
}

.artwork-picker-actions p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.artwork-apply-button {
  background: #7c5cff;
  color: #fff;
}

.artwork-apply-button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.artwork-picker-loading,
.artwork-picker-error,
.artwork-picker-empty {
  margin: 18px 0;
  padding: 18px;
  border-radius: 15px;
  font-weight: 900;
}

.artwork-picker-loading {
  color: #dcd4ff;
  background: rgba(111,79,255,.13);
  border: 1px solid rgba(111,79,255,.35);
}

.artwork-picker-error {
  color: #ffd5d8;
  background: rgba(205,43,55,.16);
  border: 1px solid rgba(255,86,99,.4);
}

.artwork-picker-empty {
  color: var(--muted);
  background: rgba(255,255,255,.035);
  border: 1px dashed var(--line);
  text-align: center;
}

.artwork-match-section {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid rgba(255,209,102,.28);
  border-radius: 18px;
  background: rgba(255,209,102,.05);
}

.artwork-match-section h3 {
  margin: 0 0 4px;
}

.artwork-match-section p {
  margin: 0 0 14px;
  color: var(--muted);
}

.artwork-match-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.artwork-match-button {
  display: grid;
  justify-items: start;
  gap: 4px;
  min-height: 70px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #111725;
  color: var(--text);
  box-shadow: none;
  text-align: left;
}

.artwork-match-button:hover {
  border-color: #ffd166;
  transform: translateY(-2px);
}

.artwork-match-button span {
  color: var(--muted);
  font-size: 11px;
}

.artwork-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  align-items: start;
}

.artwork-option {
  position: relative;
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 7px;
  border: 2px solid transparent;
  border-radius: 15px;
  background: rgba(255,255,255,.04);
  color: var(--text);
  box-shadow: none;
  text-align: left;
}

.artwork-option:hover {
  transform: translateY(-3px);
  border-color: rgba(255,209,102,.45);
}

.artwork-option.selected {
  border-color: #ffd166;
  background: rgba(255,209,102,.11);
  box-shadow: 0 0 0 3px rgba(255,209,102,.12);
}

.artwork-option img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: #05070c;
}

.artwork-option span {
  padding: 0 2px;
  color: var(--text);
  font-size: 11px;
  font-weight: 950;
}

.artwork-option small {
  padding: 0 2px 2px;
  color: var(--muted);
  font-size: 10px;
}

@media (max-width: 900px) {
  .artwork-picker-header {
    grid-template-columns: 1fr;
  }

  .artwork-picker-preview-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .artwork-picker-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .artwork-picker-modal {
    padding: 7px;
  }

  .artwork-picker-panel {
    width: 100%;
    padding: 16px;
    border-radius: 20px;
  }

  .artwork-picker-header {
    padding-right: 42px;
  }

  .artwork-picker-search {
    grid-template-columns: 1fr;
  }

  .artwork-picker-preview-row {
    grid-template-columns: 1fr 1fr;
    padding: 10px;
    gap: 10px;
  }

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

/* === END GAME_ARTWORK_PICKER_STYLES_V1 === */


/* === TWITCH_REVIEWER_PROFILES_STYLES_V1 === */

.reviewer-profile-toolbar {
  margin-top: 16px;
}

.reviewer-profile-signin,
.reviewer-profile-own-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 9px 14px;
  border: 1px solid rgba(145, 70, 255, .48);
  border-radius: 15px;
  background: rgba(83, 44, 150, .36);
  color: #fff;
  text-decoration: none;
  box-shadow: none;
}

.reviewer-profile-own-button {
  text-align: left;
}

.reviewer-profile-own-button span {
  display: grid;
  gap: 2px;
}

.reviewer-profile-own-button small {
  color: #d7c5ff;
  font-size: 11px;
  font-weight: 800;
}

.reviewer-toolbar-avatar,
.reviewer-member-avatar,
.reviewer-profile-large-avatar,
.reviewer-admin-avatar {
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 999px;
  object-fit: cover;
  background: #6441a5;
  color: #fff;
}

.reviewer-toolbar-avatar {
  width: 34px;
  height: 34px;
}

.reviewer-member-avatar {
  width: 58px;
  height: 58px;
}

.reviewer-profile-large-avatar {
  width: 112px;
  height: 112px;
  border: 4px solid rgba(255,255,255,.88);
  box-shadow: 0 16px 45px rgba(0,0,0,.38);
}

.reviewer-admin-avatar {
  width: 54px;
  height: 54px;
}

.reviewer-profile-avatar-fallback {
  display: grid;
  place-items: center;
  font-weight: 1000;
}

.reviewer-members-section {
  margin-top: 60px;
  padding: clamp(20px, 3vw, 38px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 30px;
  background:
    radial-gradient(circle at top right, rgba(100,65,165,.21), transparent 35%),
    rgba(10, 14, 23, .88);
}

.reviewer-members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.reviewer-member-card {
  --profile-accent: #8d68ff;
  display: grid;
  gap: 15px;
  min-width: 0;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--profile-accent) 48%, transparent);
  border-radius: 22px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--profile-accent) 14%, #0e1420), #0a0e16);
  color: #fff;
  text-align: left;
  box-shadow: 0 18px 40px rgba(0,0,0,.30);
}

.reviewer-member-card:hover {
  transform: translateY(-5px);
  border-color: var(--profile-accent);
}

.accent-purple { --profile-accent: #8d68ff; }
.accent-gold { --profile-accent: #ffd166; }
.accent-blue { --profile-accent: #55b8ff; }
.accent-red { --profile-accent: #ff6675; }
.accent-green { --profile-accent: #58d47b; }

.reviewer-member-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.reviewer-member-head > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.reviewer-member-head strong {
  overflow: hidden;
  color: #fff;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reviewer-member-head span {
  color: var(--profile-accent);
  font-size: 11px;
  font-weight: 950;
}

.reviewer-member-card > p {
  min-height: 4.2em;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: #dce4f5;
  font-size: 13px;
  line-height: 1.4;
}

.reviewer-member-games {
  display: flex;
  gap: 8px;
  min-height: 75px;
}

.reviewer-member-games img,
.reviewer-member-games > span {
  width: 48px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255,255,255,.08);
}

.reviewer-member-games > span {
  display: grid;
  place-items: center;
  font-weight: 1000;
}

.reviewer-member-stats {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.reviewer-member-stats span {
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: #cbd5e8;
  font-size: 11px;
  font-weight: 850;
}

.reviewer-member-stats b {
  color: var(--profile-accent);
}

.reviewer-profile-review-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  text-align: left;
}

.reviewer-profile-review-link:hover,
.reviewer-profile-clickable:hover {
  transform: none;
  opacity: .86;
}

.reviewer-profile-clickable {
  cursor: pointer;
}

.twitch-profile-card-button {
  padding: 8px 10px;
  border-radius: 10px;
  background: #6441a5;
  color: #fff;
  font-size: 11px;
  box-shadow: none;
}

body.reviewer-profile-modal-open {
  overflow: hidden !important;
}

.reviewer-profile-modal {
  position: fixed;
  inset: 0;
  z-index: 24000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 22px;
  overflow-y: auto;
}

.reviewer-profile-modal.open {
  display: flex;
}

.reviewer-profile-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2,4,9,.88);
  backdrop-filter: blur(13px);
}

.reviewer-profile-modal-card {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100vw - 30px));
  margin: 14px auto 80px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 30px;
  background: #0d111b;
  box-shadow: 0 35px 110px rgba(0,0,0,.70);
  color: #fff;
}

.reviewer-profile-modal-close {
  position: absolute;
  z-index: 8;
  top: 15px;
  right: 15px;
  width: 43px;
  height: 43px;
  min-width: 43px;
  padding: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.52);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  box-shadow: none;
}

.reviewer-profile-view {
  --profile-accent: #8d68ff;
  padding: clamp(22px, 4vw, 48px);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--profile-accent) 30%, transparent), transparent 38%),
    linear-gradient(160deg, color-mix(in srgb, var(--profile-accent) 8%, #0d111b), #0b0f17 58%);
}

.reviewer-profile-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-right: 56px;
}

.reviewer-profile-hero > div {
  min-width: 0;
}

.reviewer-profile-verified {
  color: var(--profile-accent);
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.reviewer-profile-hero h2 {
  margin: 5px 0;
  overflow-wrap: anywhere;
  font-size: clamp(38px, 6vw, 76px);
  line-height: .95;
}

.reviewer-profile-hero a {
  color: #c9d3e8;
  text-decoration: none;
  font-weight: 850;
}

.reviewer-profile-pending-notice {
  margin-top: 20px;
  padding: 13px 15px;
  border: 1px solid rgba(255,209,102,.42);
  border-radius: 14px;
  background: rgba(255,209,102,.10);
  color: #ffe4a3;
  font-weight: 900;
}

.reviewer-profile-about {
  margin-top: 28px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  background: rgba(255,255,255,.045);
}

.reviewer-profile-about > span {
  color: var(--profile-accent);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.reviewer-profile-about p {
  margin: 8px 0 0;
  color: #f2f5fb;
  font-size: 18px;
  line-height: 1.48;
}

.reviewer-profile-genre {
  margin-top: 14px;
  color: #bdc8dd;
}

.reviewer-profile-genre b {
  color: var(--profile-accent);
}

.reviewer-profile-favourites {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, .75fr);
  gap: 22px;
  margin-top: 24px;
}

.reviewer-profile-favourites h3 {
  margin: 0 0 12px;
  color: var(--profile-accent);
  font-size: 24px;
}

.reviewer-profile-game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.reviewer-profile-game-grid article {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
}

.reviewer-profile-game-grid img,
.reviewer-profile-no-art {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: #070a10;
}

.reviewer-profile-no-art {
  display: grid;
  place-items: center;
  color: #8994a9;
  font-size: 12px;
}

.reviewer-profile-game-grid strong,
.reviewer-profile-game-grid small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reviewer-profile-game-grid strong {
  margin-top: 8px;
  color: #fff;
  font-size: 13px;
}

.reviewer-profile-game-grid small {
  margin-top: 3px;
  color: #99a6bc;
  font-size: 10px;
}

.reviewer-favourite-rank {
  position: absolute;
  z-index: 3;
  top: 15px;
  left: 15px;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 999px;
  background: var(--profile-accent);
  color: #0b0f17;
  font-weight: 1000;
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
}

.reviewer-profile-movie-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 24px;
}

.reviewer-profile-movie-list li {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 13px;
  background: rgba(255,255,255,.04);
  color: #fff;
  font-weight: 900;
}

.reviewer-profile-movie-list li::marker {
  color: var(--profile-accent);
  font-weight: 1000;
}

.reviewer-profile-empty {
  color: #8f9bb0 !important;
  font-style: italic;
}

.reviewer-profile-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.reviewer-profile-stat-grid > div {
  padding: 18px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  text-align: center;
}

.reviewer-profile-stat-grid strong,
.reviewer-profile-stat-grid span {
  display: block;
}

.reviewer-profile-stat-grid strong {
  color: var(--profile-accent);
  font-size: 30px;
}

.reviewer-profile-stat-grid span {
  margin-top: 4px;
  color: #9ca8bc;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.reviewer-profile-own-actions {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.reviewer-profile-own-actions span {
  color: #ffe4a3;
  font-size: 12px;
  font-weight: 900;
}

.reviewer-profile-editor {
  padding: clamp(22px, 4vw, 42px);
}

.reviewer-profile-editor > header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-right: 52px;
  margin-bottom: 25px;
}

.reviewer-profile-editor > header span {
  color: #a98dff;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.reviewer-profile-editor > header h2 {
  margin: 4px 0;
  font-size: clamp(32px, 5vw, 58px);
}

.reviewer-profile-editor > header p {
  margin: 0;
  color: #9da9bc;
}

.reviewer-profile-editor label {
  display: grid;
  gap: 7px;
  color: #aeb9cb;
  font-size: 12px;
  font-weight: 950;
}

.reviewer-profile-editor input,
.reviewer-profile-editor select,
.reviewer-profile-editor textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  background: #080c13;
  color: #fff;
  padding: 11px 12px;
  font: inherit;
}

.reviewer-profile-editor textarea {
  min-height: 130px;
  resize: vertical;
}

.reviewer-profile-full-field {
  margin-bottom: 16px;
}

.reviewer-profile-editor-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, .6fr);
  gap: 13px;
}

.reviewer-profile-edit-section {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}

.reviewer-profile-edit-section h3 {
  margin: 0;
  color: #a98dff;
}

.reviewer-profile-edit-section > p {
  margin: 5px 0 14px;
  color: #929fb4;
  font-size: 12px;
}

.reviewer-profile-game-selects,
.reviewer-profile-movie-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.reviewer-profile-editor-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 21px;
}

.reviewer-profile-editor-note {
  color: #9aa6ba;
  font-size: 12px;
}

.reviewer-profile-admin-panel {
  grid-column: 1 / -1;
}

.reviewer-profile-admin-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.reviewer-profile-admin-grid {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.reviewer-profile-admin-card {
  padding: 16px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px;
  background: rgba(0,0,0,.20);
}

.reviewer-profile-admin-card.is-hidden {
  opacity: .63;
}

.reviewer-profile-admin-card > header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reviewer-profile-admin-card > header > div:nth-child(2) {
  display: grid;
  min-width: 0;
}

.reviewer-profile-admin-card > header strong {
  color: #fff;
}

.reviewer-profile-admin-card > header span {
  color: #9da9bc;
  font-size: 11px;
}

.reviewer-admin-statuses {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}

.reviewer-admin-statuses b {
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255,209,102,.13);
  color: #ffd166;
  font-size: 10px;
}

.reviewer-admin-profile-content {
  display: grid;
  gap: 7px;
  margin: 14px 0;
  color: #b8c3d6;
  font-size: 12px;
}

.reviewer-admin-profile-content p {
  margin: 0;
  color: #fff;
  line-height: 1.45;
}

.reviewer-profile-admin-card footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.reviewer-profile-admin-error,
.reviewer-profile-admin-empty {
  margin-top: 16px;
  padding: 18px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 15px;
  color: #a6b1c4;
}

.reviewer-profile-admin-error {
  color: #ffd0d4;
  border-color: rgba(255,90,105,.35);
}

@media (max-width: 820px) {
  .reviewer-profile-favourites {
    grid-template-columns: 1fr;
  }

  .reviewer-profile-editor-row,
  .reviewer-profile-game-selects,
  .reviewer-profile-movie-inputs {
    grid-template-columns: 1fr;
  }

  .reviewer-profile-game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 570px) {
  .reviewer-profile-modal {
    padding: 7px;
  }

  .reviewer-profile-modal-card {
    width: 100%;
    border-radius: 20px;
  }

  .reviewer-profile-hero,
  .reviewer-profile-editor > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .reviewer-profile-large-avatar {
    width: 88px;
    height: 88px;
  }

  .reviewer-profile-stat-grid {
    grid-template-columns: 1fr;
  }

  .reviewer-profile-game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* === END TWITCH_REVIEWER_PROFILES_STYLES_V1 === */


/* === REVIEWER_MEDIA_AND_LEVELS_STYLES_V1 === */

.reviewer-member-card,
.reviewer-profile-view {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.reviewer-member-card > *,
.reviewer-profile-view > * {
  position: relative;
  z-index: 2;
}

.reviewer-level-pattern {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0;
  pointer-events: none;
  opacity: .48;
}

.reviewer-level-badge {
  display: inline-flex;
  width: fit-content;
  margin-top: 4px;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(0,0,0,.24);
  color: var(--level-primary, #a78bfa);
  font-size: 10px !important;
  font-weight: 1000 !important;
  line-height: 1.1;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.reviewer-level-progress-block {
  display: grid;
  gap: 8px;
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  background: rgba(0,0,0,.23);
}

.reviewer-level-progress-block > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.reviewer-level-progress-block span {
  color: #aab5c8;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.reviewer-level-progress-block b {
  color: var(--level-primary, #a78bfa);
}

.reviewer-level-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
}

.reviewer-level-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      var(--level-primary, #a78bfa),
      var(--level-secondary, #60a5fa)
    );
  box-shadow: 0 0 18px var(--level-primary, #a78bfa);
}

.reviewer-level-progress-block small {
  color: #909cb1;
  font-size: 10px;
  font-weight: 850;
}

/* Level 1: solid purple with a restrained diagonal texture. */
.reviewer-level-1 {
  --level-primary: #9b72ff;
  --level-secondary: #6846c7;
}

.reviewer-level-1 .reviewer-level-pattern {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(155,114,255,.09) 0 10px,
      transparent 10px 24px
    );
}

/* Level 2: blue/purple speed lines. */
.reviewer-level-2 {
  --level-primary: #63b8ff;
  --level-secondary: #8d68ff;
  border-color: rgba(99,184,255,.55) !important;
}

.reviewer-level-2 .reviewer-level-pattern {
  background:
    linear-gradient(120deg, rgba(99,184,255,.18), transparent 45%),
    repeating-linear-gradient(
      120deg,
      transparent 0 22px,
      rgba(141,104,255,.12) 22px 25px
    );
}

/* Level 3: green/teal hex-like lattice. */
.reviewer-level-3 {
  --level-primary: #5ee3a2;
  --level-secondary: #37b8c8;
  border-color: rgba(94,227,162,.58) !important;
}

.reviewer-level-3 .reviewer-level-pattern {
  background:
    radial-gradient(circle at 20% 30%, rgba(94,227,162,.18), transparent 24%),
    linear-gradient(30deg, rgba(94,227,162,.08) 12%, transparent 12.5%, transparent 87%, rgba(94,227,162,.08) 87.5%),
    linear-gradient(150deg, rgba(55,184,200,.08) 12%, transparent 12.5%, transparent 87%, rgba(55,184,200,.08) 87.5%);
  background-size: auto, 34px 58px, 34px 58px;
}

/* Level 4: gold geometric critic frame. */
.reviewer-level-4 {
  --level-primary: #ffd166;
  --level-secondary: #f6a93b;
  border-color: rgba(255,209,102,.72) !important;
  box-shadow:
    0 0 0 1px rgba(255,209,102,.18),
    0 22px 55px rgba(128,82,8,.25) !important;
}

.reviewer-level-4 .reviewer-level-pattern {
  background:
    linear-gradient(135deg, rgba(255,209,102,.20), transparent 35%),
    repeating-linear-gradient(
      45deg,
      rgba(255,209,102,.08) 0 2px,
      transparent 2px 18px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(246,169,59,.06) 0 2px,
      transparent 2px 18px
    );
}

/* Level 5: legendary red/gold aura and animated embers. */
.reviewer-level-5 {
  --level-primary: #ff6b6b;
  --level-secondary: #ffd166;
  border-color: rgba(255,107,107,.75) !important;
  box-shadow:
    0 0 0 1px rgba(255,209,102,.18),
    0 0 42px rgba(255,86,76,.20),
    0 28px 70px rgba(0,0,0,.42) !important;
}

.reviewer-level-5 .reviewer-level-pattern {
  opacity: .62;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,209,102,.26) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 30%, rgba(255,107,107,.24) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 82%, rgba(255,209,102,.20) 0 2px, transparent 3px),
    conic-gradient(from 190deg at 82% 16%, rgba(255,107,107,.20), transparent 32%, rgba(255,209,102,.16), transparent 68%);
  background-size: 54px 54px, 72px 72px, 86px 86px, auto;
  animation: reviewerLegendPattern 10s linear infinite;
}

/* Level 6: animated mythic holographic pattern. */
.reviewer-level-6 {
  --level-primary: #69f0ff;
  --level-secondary: #ff71d4;
  border-color: rgba(105,240,255,.82) !important;
  box-shadow:
    0 0 0 1px rgba(255,113,212,.32),
    0 0 50px rgba(105,240,255,.24),
    0 30px 90px rgba(0,0,0,.48) !important;
}

.reviewer-level-6 .reviewer-level-pattern {
  opacity: .74;
  background:
    conic-gradient(
      from var(--mythic-angle, 0deg),
      rgba(105,240,255,.26),
      rgba(255,113,212,.22),
      rgba(255,223,107,.19),
      rgba(127,255,164,.19),
      rgba(105,240,255,.26)
    ),
    repeating-linear-gradient(
      115deg,
      transparent 0 15px,
      rgba(255,255,255,.07) 15px 17px
    );
  filter: saturate(1.15);
  animation: reviewerMythicPattern 8s linear infinite;
}

@keyframes reviewerLegendPattern {
  to { background-position: 54px -54px, -72px 72px, 86px 86px, center; }
}

@keyframes reviewerMythicPattern {
  0% { filter: hue-rotate(0deg) saturate(1.15); transform: scale(1); }
  50% { filter: hue-rotate(120deg) saturate(1.3); transform: scale(1.025); }
  100% { filter: hue-rotate(360deg) saturate(1.15); transform: scale(1); }
}

.reviewer-profile-favourites-v2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reviewer-profile-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.reviewer-profile-media-grid article {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
}

.reviewer-profile-media-grid img,
.reviewer-profile-media-grid .reviewer-profile-no-art {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 10px;
}

.reviewer-profile-media-grid strong,
.reviewer-profile-media-grid small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reviewer-profile-media-grid strong {
  margin-top: 8px;
  color: #fff;
  font-size: 13px;
}

.reviewer-profile-media-grid small {
  margin-top: 3px;
  color: #99a6bc;
  font-size: 10px;
}

.reviewer-media-attribution {
  display: block;
  margin-top: 18px;
  color: #7f8ba0;
  font-size: 10px;
}

.reviewer-media-selection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.reviewer-media-selection-slot {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  background: rgba(0,0,0,.20);
}

.reviewer-media-selection-slot img,
.reviewer-media-slot-placeholder {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  object-fit: cover;
  background: #070a10;
}

.reviewer-media-slot-placeholder {
  display: grid;
  place-items: center;
  padding: 14px;
  color: #8895aa;
  text-align: center;
  font-size: 11px;
  font-weight: 850;
}

.reviewer-media-slot-number {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 16px;
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border-radius: 999px;
  background: #8d68ff;
  color: #fff;
  font-weight: 1000;
}

.reviewer-media-selection-slot strong,
.reviewer-media-selection-slot small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reviewer-media-selection-slot strong {
  color: #fff;
  font-size: 13px;
}

.reviewer-media-selection-slot small {
  color: #96a3b8;
  font-size: 10px;
}

.reviewer-media-selection-slot > div:last-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.reviewer-media-selection-slot button {
  min-width: 0;
  padding: 8px;
  border-radius: 9px;
  font-size: 11px;
  box-shadow: none;
}

.reviewer-media-picker-modal {
  position: fixed;
  inset: 0;
  z-index: 26000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.reviewer-media-picker-modal.open {
  display: flex;
}

.reviewer-media-picker-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(1,3,8,.90);
  backdrop-filter: blur(13px);
}

.reviewer-media-picker-panel {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100vw - 24px));
  margin: 12px auto 60px;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(141,104,255,.22), transparent 34%),
    #0d111b;
  box-shadow: 0 35px 110px rgba(0,0,0,.72);
  color: #fff;
}

.reviewer-media-picker-panel > header > span {
  color: #9f80ff;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.reviewer-media-picker-panel h2 {
  margin: 5px 0;
  font-size: clamp(32px, 5vw, 58px);
}

.reviewer-media-picker-panel header p {
  margin: 0;
  color: #9ba7bb;
}

.reviewer-media-picker-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 43px;
  height: 43px;
  min-width: 43px;
  padding: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.50);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  box-shadow: none;
}

.reviewer-media-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  margin: 22px 0;
}

.reviewer-media-search-row input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  background: #070b12;
  color: #fff;
  padding: 12px 13px;
  font: inherit;
}

.reviewer-media-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 14px;
}

.reviewer-media-result-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 15px;
  background: rgba(255,255,255,.045);
  color: #fff;
  text-align: left;
  box-shadow: none;
}

.reviewer-media-result-card:hover {
  transform: translateY(-4px);
  border-color: #9f80ff;
}

.reviewer-media-result-card img {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  object-fit: cover;
  background: #05070b;
}

.reviewer-media-result-card strong,
.reviewer-media-result-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reviewer-media-result-card strong {
  color: #fff;
  font-size: 12px;
}

.reviewer-media-result-card span {
  color: #99a5ba;
  font-size: 10px;
}

.reviewer-media-picker-loading,
.reviewer-media-picker-error {
  margin-bottom: 18px;
  padding: 15px;
  border-radius: 14px;
  font-weight: 900;
}

.reviewer-media-picker-loading {
  color: #d9ceff;
  background: rgba(141,104,255,.13);
  border: 1px solid rgba(141,104,255,.35);
}

.reviewer-media-picker-error {
  color: #ffd3d7;
  background: rgba(216,55,73,.14);
  border: 1px solid rgba(255,91,107,.38);
}

.reviewer-media-picker-panel footer {
  margin-top: 20px;
  color: #7f8ba0;
  font-size: 10px;
}

@media (max-width: 850px) {
  .reviewer-profile-favourites-v2 {
    grid-template-columns: 1fr;
  }

  .reviewer-media-selection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .reviewer-profile-media-grid,
  .reviewer-media-selection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .reviewer-media-picker-modal {
    padding: 6px;
  }

  .reviewer-media-picker-panel {
    width: 100%;
    padding: 16px;
    border-radius: 20px;
  }

  .reviewer-media-search-row {
    grid-template-columns: 1fr;
  }

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

/* === END REVIEWER_MEDIA_AND_LEVELS_STYLES_V1 === */


/* === UNIFIED_REVIEWER_FAVOURITES_PICKER_STYLES_V1 === */

.reviewer-favourite-selection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.reviewer-favourite-selection-slot {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  background: rgba(0,0,0,.20);
}

.reviewer-favourite-selection-slot img,
.reviewer-favourite-slot-placeholder {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  object-fit: cover;
  background: #070a10;
}

.reviewer-favourite-slot-placeholder {
  display: grid;
  place-items: center;
  padding: 14px;
  color: #8895aa;
  text-align: center;
  font-size: 11px;
  font-weight: 850;
}

.reviewer-favourite-slot-number {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 16px;
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border-radius: 999px;
  background: #8d68ff;
  color: #fff;
  font-weight: 1000;
  box-shadow: 0 8px 22px rgba(0,0,0,.42);
}

.reviewer-favourite-selection-slot strong,
.reviewer-favourite-selection-slot small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reviewer-favourite-selection-slot strong {
  color: #fff;
  font-size: 13px;
}

.reviewer-favourite-selection-slot small {
  color: #96a3b8;
  font-size: 10px;
}

.reviewer-favourite-slot-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.reviewer-favourite-selection-slot button {
  min-width: 0;
  padding: 8px;
  border-radius: 9px;
  font-size: 11px;
  box-shadow: none;
}

.reviewer-favourite-picker-modal {
  position: fixed;
  inset: 0;
  z-index: 27000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.reviewer-favourite-picker-modal.open {
  display: flex;
}

.reviewer-favourite-picker-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(1,3,8,.90);
  backdrop-filter: blur(13px);
}

.reviewer-favourite-picker-panel {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100vw - 24px));
  margin: 12px auto 60px;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 28px;
  background:
    radial-gradient(
      circle at top right,
      rgba(141,104,255,.22),
      transparent 34%
    ),
    #0d111b;
  box-shadow: 0 35px 110px rgba(0,0,0,.72);
  color: #fff;
}

.reviewer-favourite-picker-panel > header > span {
  color: #9f80ff;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.reviewer-favourite-picker-panel h2 {
  margin: 5px 0;
  font-size: clamp(32px, 5vw, 58px);
}

.reviewer-favourite-picker-panel header p {
  margin: 0;
  color: #9ba7bb;
}

.reviewer-favourite-picker-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 43px;
  height: 43px;
  min-width: 43px;
  padding: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.50);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  box-shadow: none;
}

.reviewer-favourite-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  margin: 22px 0;
}

.reviewer-favourite-search-row input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  background: #070b12;
  color: #fff;
  padding: 12px 13px;
  font: inherit;
}

.reviewer-favourite-result-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(145px, 1fr));
  gap: 14px;
}

.reviewer-favourite-result-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 15px;
  background: rgba(255,255,255,.045);
  color: #fff;
  text-align: left;
  box-shadow: none;
}

.reviewer-favourite-result-card:hover {
  transform: translateY(-4px);
  border-color: #9f80ff;
}

.reviewer-favourite-result-card img,
.reviewer-favourite-result-placeholder {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  object-fit: cover;
  background: #05070b;
}

.reviewer-favourite-result-placeholder {
  display: grid;
  place-items: center;
  color: #8895aa;
  font-size: 11px;
  text-align: center;
}

.reviewer-favourite-result-card strong,
.reviewer-favourite-result-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reviewer-favourite-result-card strong {
  color: #fff;
  font-size: 12px;
}

.reviewer-favourite-result-card span {
  color: #99a5ba;
  font-size: 10px;
}

.reviewer-favourite-picker-loading,
.reviewer-favourite-picker-error {
  margin-bottom: 18px;
  padding: 15px;
  border-radius: 14px;
  font-weight: 900;
}

.reviewer-favourite-picker-loading {
  color: #d9ceff;
  background: rgba(141,104,255,.13);
  border: 1px solid rgba(141,104,255,.35);
}

.reviewer-favourite-picker-error {
  color: #ffd3d7;
  background: rgba(216,55,73,.14);
  border: 1px solid rgba(255,91,107,.38);
}

.reviewer-favourite-picker-panel footer {
  margin-top: 20px;
  color: #7f8ba0;
  font-size: 10px;
}

@media (max-width: 620px) {
  .reviewer-favourite-selection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .reviewer-favourite-picker-modal {
    padding: 6px;
  }

  .reviewer-favourite-picker-panel {
    width: 100%;
    padding: 16px;
    border-radius: 20px;
  }

  .reviewer-favourite-search-row {
    grid-template-columns: 1fr;
  }

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

/* === END UNIFIED_REVIEWER_FAVOURITES_PICKER_STYLES_V1 === */


/* === REVIEWER_ALL_GAMES_IGDB_STYLES_V1 === */

.reviewer-profile-edit-section .reviewer-media-attribution {
  display: block;
  margin-top: 11px;
}

.reviewer-favourite-result-card span {
  min-height: 1.2em;
}

.reviewer-favourite-picker-panel footer {
  display: block;
}

/* === END REVIEWER_ALL_GAMES_IGDB_STYLES_V1 === */


/* === REVIEWER_STEAMGRIDDB_ARTWORK_STYLES_V1 === */

.reviewer-sgdb-required-note {
  margin: -8px 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(111,79,255,.35);
  border-radius: 13px;
  background: rgba(111,79,255,.10);
  color: #dcd4ff;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.45;
}

.reviewer-favourite-step-actions {
  margin: 20px 0;
}

.reviewer-sgdb-match-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(220px, 1fr));
  gap: 11px;
}

.reviewer-sgdb-match-card {
  display: grid;
  justify-items: start;
  gap: 5px;
  min-height: 78px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  color: #fff;
  text-align: left;
  box-shadow: none;
}

.reviewer-sgdb-match-card:hover {
  transform: translateY(-3px);
  border-color: #9f80ff;
}

.reviewer-sgdb-match-card strong {
  color: #fff;
  font-size: 14px;
}

.reviewer-sgdb-match-card span {
  color: #9ca8bc;
  font-size: 10px;
}

.reviewer-sgdb-artwork-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(145px, 1fr));
  gap: 14px;
}

.reviewer-sgdb-artwork-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 15px;
  background: rgba(255,255,255,.045);
  color: #fff;
  text-align: left;
  box-shadow: none;
}

.reviewer-sgdb-artwork-card:hover {
  transform: translateY(-4px);
  border-color: #ffd166;
}

.reviewer-sgdb-artwork-card img {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  object-fit: cover;
  background: #05070b;
}

.reviewer-sgdb-artwork-card strong,
.reviewer-sgdb-artwork-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reviewer-sgdb-artwork-card strong {
  color: #fff;
  font-size: 11px;
}

.reviewer-sgdb-artwork-card span {
  color: #99a5ba;
  font-size: 10px;
}

/* === END REVIEWER_STEAMGRIDDB_ARTWORK_STYLES_V1 === */


/* === REVIEWER_DIRECT_ARTWORK_PICKERS_STYLES_V1 === */

.reviewer-favourite-slot-actions-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reviewer-favourite-slot-actions-three button {
  padding-left: 5px;
  padding-right: 5px;
  font-size: 10px;
}

.reviewer-favourite-slot-actions-three .artwork {
  background: #8d68ff;
  color: #fff;
}

.reviewer-tmdb-artwork-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(145px, 1fr));
  gap: 14px;
}

.reviewer-tmdb-artwork-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 15px;
  background: rgba(255,255,255,.045);
  color: #fff;
  text-align: left;
  box-shadow: none;
}

.reviewer-tmdb-artwork-card:hover {
  transform: translateY(-4px);
  border-color: #55c8f4;
}

.reviewer-tmdb-artwork-card img {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  object-fit: cover;
  background: #05070b;
}

.reviewer-tmdb-artwork-card strong,
.reviewer-tmdb-artwork-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reviewer-tmdb-artwork-card strong {
  color: #fff;
  font-size: 11px;
}

.reviewer-tmdb-artwork-card span {
  color: #99a5ba;
  font-size: 10px;
}

/* === END REVIEWER_DIRECT_ARTWORK_PICKERS_STYLES_V1 === */


/* === CONTROL_CATALOGUE_FAVOURITES_STYLES_V1 === */

.control-favourite-manager-v2 {
  grid-column: 1 / -1;
}

.control-favourite-manager-header h1 {
  margin: 0;
  font-size: clamp(26px, 3vw, 42px);
}

.control-favourite-manager-header p {
  margin: 4px 0 0;
  color: #a6b0c3;
  font-weight: 750;
}

.control-favourite-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.control-favourite-column {
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 19px;
  background: rgba(255,255,255,.035);
}

.control-favourite-tv {
  border-color: rgba(141,104,255,.48);
  background:
    linear-gradient(
      145deg,
      rgba(141,104,255,.08),
      rgba(255,255,255,.025)
    );
}

.control-favourite-column h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 13px;
  color: #fff;
  font-size: 22px;
}

.control-favourite-type-chip {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(141,104,255,.32);
  color: #cfbdff;
  font-size: 10px;
}

.control-favourite-search-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.control-favourite-search-box input,
.control-favourite-manual-title {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background: #0a0e17;
  color: #fff;
  padding: 11px 12px;
  font: inherit;
}

.control-favourite-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 13px 0;
  color: #7e899d;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.control-favourite-divider::before,
.control-favourite-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.08);
}

.control-favourite-drop {
  display: grid;
  place-items: center;
  min-height: 118px;
  margin-top: 10px;
  padding: 16px;
  border: 2px dashed rgba(96,204,255,.52);
  border-radius: 17px;
  background: rgba(96,204,255,.07);
  color: #74d6ff;
  text-align: center;
  cursor: pointer;
}

.control-favourite-drop span {
  color: #a8b2c5;
  font-size: 11px;
}

.control-favourite-drop.dragging,
.control-favourite-drop.has-file {
  border-color: #8d68ff;
  background: rgba(141,104,255,.12);
}

.control-favourite-manual-add {
  margin-top: 10px;
}

.control-favourite-list {
  display: grid;
  gap: 9px;
  margin-top: 13px;
}

.control-favourite-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 13px;
  background: rgba(0,0,0,.17);
}

.control-favourite-item img,
.control-favourite-no-art {
  width: 48px;
  height: 72px;
  border-radius: 7px;
  object-fit: cover;
  background: #070a10;
}

.control-favourite-no-art {
  display: grid;
  place-items: center;
  color: #8490a4;
  font-size: 9px;
  text-align: center;
}

.control-favourite-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #fff;
  font-size: 13px;
}

.control-favourite-item-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.control-favourite-item-actions button {
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 10px;
  box-shadow: none;
}

.control-favourite-picker-modal {
  position: fixed;
  inset: 0;
  z-index: 28000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.control-favourite-picker-modal.open {
  display: flex;
}

.control-favourite-picker-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(1,3,8,.91);
  backdrop-filter: blur(13px);
}

.control-favourite-picker-panel {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100vw - 24px));
  margin: 12px auto 60px;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 28px;
  background:
    radial-gradient(
      circle at top right,
      rgba(141,104,255,.22),
      transparent 34%
    ),
    #0d111b;
  box-shadow: 0 35px 110px rgba(0,0,0,.72);
  color: #fff;
}

.control-favourite-picker-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 43px;
  height: 43px;
  min-width: 43px;
  padding: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.50);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  box-shadow: none;
}

.control-favourite-picker-panel header > span {
  color: #9f80ff;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.control-favourite-picker-panel h2 {
  margin: 5px 0;
  font-size: clamp(32px, 5vw, 58px);
}

.control-favourite-picker-panel header p {
  margin: 0;
  color: #9ba7bb;
}

.control-favourite-modal-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  margin: 22px 0;
}

.control-favourite-modal-search input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  background: #070b12;
  color: #fff;
  padding: 12px 13px;
  font: inherit;
}

.control-favourite-result-grid,
.control-favourite-artwork-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(145px, 1fr));
  gap: 14px;
}

.control-favourite-result-grid button,
.control-favourite-artwork-grid button {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 15px;
  background: rgba(255,255,255,.045);
  color: #fff;
  text-align: left;
  box-shadow: none;
}

.control-favourite-result-grid button:hover,
.control-favourite-artwork-grid button:hover {
  transform: translateY(-4px);
  border-color: #9f80ff;
}

.control-favourite-result-grid img,
.control-favourite-artwork-grid img,
.control-favourite-result-placeholder {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  object-fit: cover;
  background: #05070b;
}

.control-favourite-result-placeholder {
  display: grid;
  place-items: center;
  color: #8490a4;
  font-size: 10px;
}

.control-favourite-result-grid strong,
.control-favourite-result-grid span,
.control-favourite-artwork-grid strong,
.control-favourite-artwork-grid span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-favourite-result-grid strong,
.control-favourite-artwork-grid strong {
  color: #fff;
  font-size: 12px;
}

.control-favourite-result-grid span,
.control-favourite-artwork-grid span {
  color: #99a5ba;
  font-size: 10px;
}

.control-favourite-match-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(220px, 1fr));
  gap: 11px;
  margin-top: 20px;
}

.control-favourite-match-grid button {
  display: grid;
  justify-items: start;
  gap: 5px;
  min-height: 76px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  color: #fff;
  text-align: left;
  box-shadow: none;
}

.control-favourite-match-grid button:hover {
  transform: translateY(-3px);
  border-color: #9f80ff;
}

.control-favourite-match-grid span {
  color: #9ca8bc;
  font-size: 10px;
}

.control-favourite-picker-loading,
.control-favourite-picker-error {
  margin: 18px 0;
  padding: 15px;
  border-radius: 14px;
  font-weight: 900;
}

.control-favourite-picker-loading {
  color: #d9ceff;
  background: rgba(141,104,255,.13);
  border: 1px solid rgba(141,104,255,.35);
}

.control-favourite-picker-error {
  color: #ffd3d7;
  background: rgba(216,55,73,.14);
  border: 1px solid rgba(255,91,107,.38);
}

@media (max-width: 1000px) {
  .control-favourite-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .control-favourite-picker-modal {
    padding: 6px;
  }

  .control-favourite-picker-panel {
    width: 100%;
    padding: 16px;
    border-radius: 20px;
  }

  .control-favourite-modal-search {
    grid-template-columns: 1fr;
  }

  .control-favourite-result-grid,
  .control-favourite-artwork-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .control-favourite-item {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .control-favourite-item img,
  .control-favourite-no-art {
    width: 42px;
    height: 63px;
  }

  .control-favourite-item-actions {
    grid-column: 1 / -1;
  }
}

/* === END CONTROL_CATALOGUE_FAVOURITES_STYLES_V1 === */


/* === NONSTEAM_DESKTOP_SYNC_STYLES_V1 === */

.nonsteam-sync-panel {
  grid-column: 1 / -1;
}

.nonsteam-sync-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
}

.nonsteam-sync-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.nonsteam-sync-stats > div {
  padding: 15px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  text-align: center;
}

.nonsteam-sync-stats strong,
.nonsteam-sync-stats span {
  display: block;
}

.nonsteam-sync-stats strong {
  color: #67d3ff;
  font-size: 28px;
}

.nonsteam-sync-stats span {
  margin-top: 4px;
  color: #9ba7bb;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.nonsteam-sync-details {
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 13px;
  background: rgba(255,255,255,.03);
}

.nonsteam-sync-details p {
  margin: 5px 0;
  color: #bdc7d8;
}

.nonsteam-sync-command {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 13px;
  padding: 12px 14px;
  border: 1px solid rgba(141,104,255,.35);
  border-radius: 13px;
  background: rgba(141,104,255,.10);
}

.nonsteam-sync-command span {
  color: #c8b8ff;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.nonsteam-sync-command code {
  color: #fff;
  font-weight: 900;
}

.nonsteam-sync-note {
  margin-top: 12px;
}

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

/* === END NONSTEAM_DESKTOP_SYNC_STYLES_V1 === */


/* === NONSTEAM_PLATFORM_OVERRIDES_STYLES_V1 === */

.nonsteam-platform-heading-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.nonsteam-platform-summary {
  margin-top: 11px;
}

.nonsteam-platform-modal {
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 18px;
  overflow-y: auto;
}

.nonsteam-platform-modal.open {
  display: flex;
}

.nonsteam-platform-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(1,3,8,.92);
  backdrop-filter: blur(13px);
}

.nonsteam-platform-panel {
  position: relative;
  z-index: 2;
  width: min(1320px, calc(100vw - 20px));
  margin: 10px auto 60px;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  background:
    radial-gradient(
      circle at top right,
      rgba(96,204,255,.16),
      transparent 31%
    ),
    radial-gradient(
      circle at top left,
      rgba(141,104,255,.17),
      transparent 28%
    ),
    #0c111a;
  color: #fff;
  box-shadow: 0 35px 110px rgba(0,0,0,.72);
}

.nonsteam-platform-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 43px;
  height: 43px;
  min-width: 43px;
  padding: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.50);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  box-shadow: none;
}

.nonsteam-platform-header > span {
  color: #75d7ff;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.nonsteam-platform-header h2 {
  margin: 5px 0;
  padding-right: 54px;
  font-size: clamp(30px, 5vw, 56px);
}

.nonsteam-platform-header p {
  max-width: 900px;
  margin: 0;
  color: #9eaabc;
  line-height: 1.5;
}

.nonsteam-platform-toolbar {
  display: grid;
  grid-template-columns:
    minmax(240px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  margin: 22px 0 15px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
}

.nonsteam-platform-toolbar input[type="search"] {
  width: 100%;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 11px;
  background: #070b12;
  color: #fff;
  font: inherit;
}

.nonsteam-platform-toolbar label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #c0cad9;
  font-size: 11px;
  font-weight: 850;
}

.nonsteam-platform-counts {
  color: #9aa6b9;
  font-size: 11px;
  white-space: nowrap;
}

.nonsteam-platform-counts b {
  color: #fff;
}

.nonsteam-platform-rows {
  display: grid;
  gap: 9px;
}

.nonsteam-platform-row {
  display: grid;
  grid-template-columns:
    50px minmax(200px, 1fr) minmax(135px, .55fr) minmax(220px, .75fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(0,0,0,.18);
}

.nonsteam-platform-row.has-override {
  border-color: rgba(141,104,255,.43);
  background:
    linear-gradient(
      90deg,
      rgba(141,104,255,.09),
      rgba(0,0,0,.17)
    );
}

.nonsteam-platform-row img,
.nonsteam-platform-no-art {
  width: 50px;
  height: 75px;
  border-radius: 8px;
  object-fit: cover;
  background: #05070b;
}

.nonsteam-platform-no-art {
  display: grid;
  place-items: center;
  color: #7d899c;
  font-size: 9px;
  text-align: center;
}

.nonsteam-platform-game-info,
.nonsteam-platform-current,
.nonsteam-platform-control {
  min-width: 0;
}

.nonsteam-platform-game-info strong,
.nonsteam-platform-game-info span,
.nonsteam-platform-game-info small,
.nonsteam-platform-current span,
.nonsteam-platform-current b,
.nonsteam-platform-current small {
  display: block;
}

.nonsteam-platform-game-info strong {
  overflow-wrap: anywhere;
  color: #fff;
  font-size: 14px;
}

.nonsteam-platform-game-info span,
.nonsteam-platform-current span {
  margin-top: 4px;
  color: #8f9bad;
  font-size: 10px;
}

.nonsteam-platform-game-info span b {
  display: inline;
  color: #bdc7d7;
}

.nonsteam-platform-game-info small {
  margin-top: 4px;
  color: #ffbf69;
}

.nonsteam-platform-current b {
  margin-top: 3px;
  color: #72d7ff;
  font-size: 14px;
}

.nonsteam-platform-row.has-override
.nonsteam-platform-current b {
  color: #bda8ff;
}

.nonsteam-platform-current small {
  margin-top: 3px;
  color: #8894a6;
}

.nonsteam-platform-control {
  display: flex;
  align-items: center;
  gap: 7px;
}

.nonsteam-platform-control select {
  width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: #080c14;
  color: #fff;
  font: inherit;
}

.nonsteam-platform-control button {
  flex: 0 0 auto;
  padding: 9px 10px;
  font-size: 10px;
  box-shadow: none;
}

.nonsteam-platform-loading,
.nonsteam-platform-error,
.nonsteam-platform-empty {
  padding: 20px;
  border-radius: 14px;
  text-align: center;
  font-weight: 850;
}

.nonsteam-platform-loading {
  color: #d9ceff;
  background: rgba(141,104,255,.12);
}

.nonsteam-platform-error {
  color: #ffd3d7;
  background: rgba(216,55,73,.14);
}

.nonsteam-platform-empty {
  color: #9ca8bb;
  background: rgba(255,255,255,.035);
}

@media (max-width: 900px) {
  .nonsteam-platform-toolbar {
    grid-template-columns: 1fr;
  }

  .nonsteam-platform-counts {
    white-space: normal;
  }

  .nonsteam-platform-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .nonsteam-platform-row img,
  .nonsteam-platform-no-art {
    width: 44px;
    height: 66px;
  }

  .nonsteam-platform-current,
  .nonsteam-platform-control {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .nonsteam-platform-modal {
    padding: 5px;
  }

  .nonsteam-platform-panel {
    width: 100%;
    padding: 15px;
    border-radius: 20px;
  }

  .nonsteam-platform-control {
    align-items: stretch;
    flex-direction: column;
  }
}

/* === END NONSTEAM_PLATFORM_OVERRIDES_STYLES_V1 === */


/* === FULL_LIBRARY_METADATA_EDITOR_STYLES_V1 === */

.library-game-card.has-custom-metadata {
  border-color: rgba(78, 204, 255, .54);
}

.library-edited-badge {
  width: fit-content;
  max-width: 100%;
  padding: 5px 7px;
  border-radius: 999px;
  color: #07131a;
  background: #68d6ff;
  font-size: 10px;
  font-weight: 1000;
}

.library-card-action-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.library-edit-details-button,
.library-card-action-grid
.library-artwork-button {
  width: 100%;
  min-width: 0;
  padding: 8px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 1000;
  box-shadow: none;
}

.library-edit-details-button {
  background: #38bde8;
  color: #06131a;
}

.library-edit-details-button:hover {
  background: #67d7ff;
}

body.library-metadata-editor-open {
  overflow: hidden !important;
}

.library-metadata-editor-modal {
  position: fixed;
  inset: 0;
  z-index: 24000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.library-metadata-editor-modal.open {
  display: flex;
}

.library-metadata-editor-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(1, 3, 8, .90);
  backdrop-filter: blur(13px);
}

.library-metadata-editor-panel {
  position: relative;
  z-index: 2;
  width: min(820px, calc(100vw - 24px));
  margin: 25px auto 60px;
  padding: clamp(20px, 4vw, 36px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 27px;
  background:
    radial-gradient(
      circle at top right,
      rgba(56, 189, 232, .19),
      transparent 35%
    ),
    radial-gradient(
      circle at top left,
      rgba(124, 92, 255, .15),
      transparent 31%
    ),
    #0d111b;
  color: #fff;
  box-shadow:
    0 35px 110px rgba(0,0,0,.72);
}

.library-metadata-editor-close {
  position: absolute;
  z-index: 5;
  top: 14px;
  right: 14px;
  width: 43px;
  height: 43px;
  min-width: 43px;
  padding: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.48);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  box-shadow: none;
}

.library-metadata-editor-header {
  display: grid;
  grid-template-columns:
    105px minmax(0, 1fr);
  align-items: center;
  gap: 17px;
  padding-right: 45px;
}

.library-metadata-editor-header img,
.library-metadata-editor-no-art {
  width: 105px;
  aspect-ratio: 2 / 3;
  border-radius: 13px;
  object-fit: cover;
  background: #05070c;
}

.library-metadata-editor-no-art {
  display: grid;
  place-items: center;
  color: #8b97aa;
  font-size: 11px;
  text-align: center;
}

.library-metadata-editor-header span {
  color: #72d7ff;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.library-metadata-editor-header h2 {
  margin: 4px 0;
  font-size: clamp(30px, 5vw, 50px);
  line-height: 1;
}

.library-metadata-editor-header p {
  margin: 0;
  color: #9ca8ba;
  line-height: 1.45;
}

.library-metadata-editor-form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.library-metadata-editor-form label {
  display: grid;
  gap: 7px;
  color: #d8deea;
  font-size: 12px;
  font-weight: 950;
}

.library-metadata-editor-form input,
.library-metadata-editor-form select {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  background: #080c14;
  color: #fff;
  padding: 12px 13px;
  font: inherit;
}

.library-metadata-editor-form small {
  color: #8793a5;
  font-size: 10px;
  font-weight: 750;
}

.library-metadata-custom-platform[hidden] {
  display: none;
}

.library-metadata-readonly {
  display: grid;
  gap: 6px;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 13px;
  background: rgba(255,255,255,.03);
  color: #929eb0;
  font-size: 10px;
  overflow-wrap: anywhere;
}

.library-metadata-readonly b {
  color: #c3ccda;
}

.library-metadata-editor-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.library-metadata-editor-actions button {
  flex: 1 1 180px;
}

.library-metadata-editor-note {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(56,189,232,.30);
  border-radius: 13px;
  background: rgba(56,189,232,.08);
  color: #b9eaff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

/* Retire the optional non-Steam-only editor after the all-library editor. */
.nonsteam-platform-heading-actions
button[onclick*="openNonSteamPlatformManager"],
.nonsteam-platform-summary {
  display: none !important;
}

@media (max-width: 560px) {
  .library-metadata-editor-modal {
    padding: 6px;
  }

  .library-metadata-editor-panel {
    width: 100%;
    padding: 16px;
    border-radius: 20px;
  }

  .library-metadata-editor-header {
    grid-template-columns:
      75px minmax(0, 1fr);
    padding-right: 38px;
  }

  .library-metadata-editor-header img,
  .library-metadata-editor-no-art {
    width: 75px;
  }

  .library-card-action-grid {
    grid-template-columns: 1fr;
  }
}

/* === END FULL_LIBRARY_METADATA_EDITOR_STYLES_V1 === */


/* === REVIEWER_LEADERBOARD_TWITCH_CARDS_STYLES_V1 === */

.community-leaderboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.community-leaderboard-card {
  position: relative;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at top right, rgba(83, 205, 255, .08), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
}

.community-leaderboard-card.rank-1 {
  border-color: rgba(255, 200, 74, .45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(255, 200, 74, .08);
}

.community-leaderboard-card.rank-2 {
  border-color: rgba(188, 197, 214, .35);
}

.community-leaderboard-card.rank-3 {
  border-color: rgba(217, 142, 85, .35);
}

.community-leader-card-top {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.community-leader-rank-badge {
  min-width: 52px;
  height: 52px;
  padding: 0 12px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(8, 13, 23, .86);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 24px;
  font-weight: 900;
}

.community-leader-avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid rgba(128, 94, 255, .75);
  background: linear-gradient(135deg, #1a2237, #090d16);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 0 0 3px rgba(255,255,255,.04);
}

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

.community-leader-identity {
  min-width: 0;
}

.community-leader-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.community-leader-name-row strong {
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.03em;
}

.community-leader-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(145, 95, 255, .16);
  border: 1px solid rgba(145, 95, 255, .3);
  color: #c9b1ff;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.community-leader-verified span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: #8b5cf6;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.community-leader-headline {
  margin-top: 6px;
  color: #98a4b9;
  font-size: 13px;
  line-height: 1.4;
}

.community-leader-points-block {
  min-width: 100px;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(9, 16, 30, .7);
  border: 1px solid rgba(255,255,255,.08);
  text-align: right;
}

.community-leader-points-block span {
  display: block;
  color: #8a97ab;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.community-leader-points-block b {
  display: block;
  margin-top: 3px;
  color: #ffd15b;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.03em;
}

.community-leader-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.community-leader-stats-row span {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: #bec8d7;
  font-size: 12px;
  font-weight: 800;
}

.community-leader-stats-row b {
  color: #fff;
}

.community-leader-recent-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.community-leader-game-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(102, 214, 255, .12);
  border: 1px solid rgba(102, 214, 255, .14);
  color: #c5f1ff;
  font-size: 12px;
  font-weight: 800;
}

.community-leader-comment {
  margin: 14px 0 0;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  color: #d8e0ec;
  font-size: 14px;
  line-height: 1.5;
}

.community-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.community-mini-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.community-mini-rank {
  min-width: 38px;
  text-align: center;
  font-weight: 900;
}

.community-mini-row .community-leader-avatar {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  font-size: 12px;
  border-width: 2px;
}

.community-mini-meta {
  min-width: 0;
}

.community-mini-meta strong,
.community-mini-meta small {
  display: block;
}

.community-mini-meta strong {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.community-mini-meta small {
  color: #93a0b4;
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 1180px) {
  .community-leaderboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .community-leader-card-top {
    grid-template-columns: auto auto 1fr;
  }

  .community-leader-points-block {
    grid-column: 1 / -1;
    text-align: left;
  }

  .community-leader-name-row strong {
    font-size: 22px;
  }
}

@media (max-width: 560px) {
  .community-leaderboard-card {
    padding: 16px;
    border-radius: 20px;
  }

  .community-leader-card-top {
    grid-template-columns: auto 1fr;
    gap: 12px;
  }

  .community-leader-rank-badge {
    width: 48px;
    min-width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .community-leader-avatar {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }

  .community-leader-identity {
    grid-column: 1 / -1;
  }

  .community-leader-points-block {
    grid-column: 1 / -1;
    min-width: 0;
  }
}

/* === END REVIEWER_LEADERBOARD_TWITCH_CARDS_STYLES_V1 === */


/* === REVIEWER_PROFILE_INTERACTIONS_SECURITY_STYLES_V1 === */


.community-leader-rank-badge {
  min-width: 52px;
  height: 52px;
  padding: 0 12px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(8, 13, 23, .86);
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: 24px;
  font-weight: 900;
}

.community-leader-avatar {
  width: 58px;
  height: 58px;
  min-width: 58px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid rgba(128, 94, 255, .75);
  background: linear-gradient(135deg, #1a2237, #090d16);
  color: #fff;
  font-size: 17px;
  font-weight: 1000;
  object-fit: cover;
}

.community-leader-card-top {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.community-leader-points-block {
  min-width: 95px;
  text-align: right;
}

.community-leader-points-block span,
.community-leader-points-block b {
  display: block;
}

.community-leader-points-block span {
  color: #8f9caf;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.community-leader-points-block b {
  color: #ffd15b;
  font-size: 28px;
}

.community-leader-stats-row,
.community-leader-recent-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

.community-leader-stats-row span,
.community-leader-game-pill {
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .055);
  color: #c1cad8;
  font-size: 11px;
  font-weight: 850;
}

.community-leader-comment {
  margin: 13px 0 0;
  padding: 12px 14px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .035);
  color: #d8e0eb;
  font-size: 12px;
  line-height: 1.45;
}
.reviewer-member-card.is-interactive,
.community-leaderboard-card.is-interactive,
.interactive-reviewer-identity,
.interactive-community-mini-row,
.interactive-reviewed-game-card,
.interactive-game-pill {
  cursor: pointer;
}

.reviewer-member-card.is-interactive:hover,
.community-leaderboard-card.is-interactive:hover {
  transform: translateY(-3px);
  border-color: rgba(112, 216, 255, .55);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .34),
    0 0 0 1px rgba(112, 216, 255, .08);
}

.reviewer-card-open-label,
.interactive-profile-open-hint {
  color: #70d8ff !important;
  font-weight: 950 !important;
}

.interactive-profile-open-hint {
  display: inline-flex;
  margin-top: 13px;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.interactive-reviewer-profile {
  position: relative;
  overflow: hidden;
}

.interactive-reviewer-level-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background:
    radial-gradient(
      circle at 94% 4%,
      rgba(123, 88, 255, .5),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      transparent 0 47%,
      rgba(255, 255, 255, .035) 47% 49%,
      transparent 49% 100%
    );
  background-size:
    auto,
    28px 28px;
}

.interactive-reviewer-profile > * {
  position: relative;
  z-index: 1;
}

.interactive-reviewer-hero {
  display: grid;
  grid-template-columns:
    auto minmax(0, 1fr) minmax(190px, 270px);
  align-items: center;
  gap: 20px;
}

.interactive-reviewer-large-avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(133, 94, 255, .82);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, .045),
    0 16px 42px rgba(0, 0, 0, .36);
}

.interactive-reviewer-avatar-fallback {
  display: inline-grid;
  place-items: center;
  background:
    linear-gradient(135deg, #32245f, #101624);
  color: #fff;
  font-weight: 1000;
}

.interactive-reviewer-hero-copy h2 {
  margin: 8px 0 5px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: .95;
  letter-spacing: -.045em;
}

.interactive-reviewer-hero-copy p {
  margin: 0;
  color: #9aa7ba;
}

.interactive-reviewer-level-card {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  background: rgba(5, 10, 20, .66);
}

.interactive-reviewer-level-card > span {
  display: block;
  color: #a991ff;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.interactive-reviewer-level-card > strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
}

.interactive-reviewer-level-track {
  height: 7px;
  margin: 13px 0 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
}

.interactive-reviewer-level-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #7c5cff, #55d6ff);
}

.interactive-reviewer-level-card small {
  color: #8f9caf;
  font-size: 10px;
  font-weight: 800;
}

.interactive-reviewer-stat-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.interactive-reviewer-stat-grid > div {
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 17px;
  background: rgba(255, 255, 255, .035);
}

.interactive-reviewer-stat-grid strong,
.interactive-reviewer-stat-grid span {
  display: block;
}

.interactive-reviewer-stat-grid strong {
  font-size: 27px;
  color: #fff;
}

.interactive-reviewer-stat-grid span {
  margin-top: 2px;
  color: #929fb2;
  font-size: 11px;
  font-weight: 850;
}

.interactive-reviewer-about {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px;
  background: rgba(255, 255, 255, .03);
}

.interactive-reviewer-about > span,
.interactive-reviewer-section-heading span {
  color: #76d9ff;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.interactive-reviewer-about p {
  margin: 8px 0 0;
  color: #d3dbe7;
  line-height: 1.55;
}

.interactive-reviewer-favourite-columns {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 15px;
  margin-top: 18px;
}

.interactive-reviewer-section {
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px;
  background: rgba(255, 255, 255, .025);
}

.interactive-reviewer-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 13px;
}

.interactive-reviewer-section-heading h3 {
  margin: 3px 0 0;
  font-size: 23px;
}

.interactive-reviewer-section-heading > b {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(112, 216, 255, .1);
  color: #c9f3ff;
  font-size: 11px;
}

.interactive-reviewer-favourites {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.interactive-reviewer-favourite-card {
  position: relative;
  min-width: 0;
}

.interactive-reviewer-favourite-card img,
.interactive-reviewer-no-art {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  object-fit: cover;
  background: #050810;
}

.interactive-reviewer-no-art {
  display: grid;
  place-items: center;
  color: #748096;
  font-size: 10px;
  text-align: center;
}

.interactive-reviewer-favourite-rank {
  position: absolute;
  z-index: 2;
  top: 7px;
  left: 7px;
  padding: 5px 7px;
  border-radius: 999px;
  background: #805cff;
  color: #fff;
  font-size: 10px;
  font-weight: 1000;
}

.interactive-reviewer-favourite-card strong,
.interactive-reviewer-favourite-card small {
  display: block;
}

.interactive-reviewer-favourite-card strong {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.25;
}

.interactive-reviewer-favourite-card small {
  margin-top: 3px;
  color: #8f9bad;
  font-size: 9px;
}

.interactive-reviewed-games-section {
  margin-top: 18px;
}

.interactive-reviewed-games-grid {
  display: grid;
  gap: 10px;
}

.interactive-reviewed-game-card {
  display: grid;
  grid-template-columns:
    68px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px;
  background: rgba(7, 12, 22, .78);
  color: #fff;
  text-align: left;
  box-shadow: none;
}

.interactive-reviewed-game-card:hover {
  border-color: rgba(103, 214, 255, .48);
  background: rgba(17, 30, 46, .9);
  transform: translateX(3px);
}

.interactive-reviewed-game-art {
  width: 68px;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #050810;
  color: #fff;
  font-size: 22px;
  font-weight: 1000;
}

.interactive-reviewed-game-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.interactive-reviewed-game-copy {
  min-width: 0;
}

.interactive-reviewed-game-copy strong,
.interactive-reviewed-game-copy small {
  display: block;
}

.interactive-reviewed-game-copy strong {
  font-size: 17px;
}

.interactive-reviewed-game-copy small {
  margin-top: 3px;
  color: #8f9bad;
  font-size: 10px;
}

.interactive-reviewed-game-copy p {
  margin: 8px 0 0;
  color: #c5cedb;
  font-size: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.interactive-reviewed-game-badges {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 6px;
}

.interactive-reviewed-game-badges span,
.interactive-reviewed-game-badges em {
  padding: 6px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.interactive-reviewed-game-badges span {
  background: rgba(128, 92, 255, .16);
  color: #c9b8ff;
}

.interactive-reviewed-game-badges em {
  color: #76dcff;
  background: rgba(91, 209, 255, .09);
}

.interactive-reviewer-empty,
.interactive-reviewer-loading {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 24px;
  border: 1px dashed rgba(255, 255, 255, .13);
  border-radius: 17px;
  color: #8996a9;
  text-align: center;
}

.interactive-reviewer-loading strong,
.interactive-reviewer-loading span {
  display: block;
}

.interactive-reviewer-loading strong {
  color: #fff;
  font-size: 20px;
}

.interactive-reviewer-loading span {
  margin-top: 7px;
}

.interactive-reviewer-error {
  gap: 12px;
}

.interactive-reviewer-privacy-note {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(83, 209, 255, .17);
  border-radius: 14px;
  background: rgba(83, 209, 255, .055);
  color: #9edff5;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.interactive-reviewer-identity {
  appearance: none;
  width: auto;
  min-width: 0;
  padding: 6px 9px;
  margin: -6px -9px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: inherit;
  text-align: left;
  box-shadow: none;
}

.interactive-reviewer-identity:hover {
  border-color: rgba(112, 216, 255, .3);
  background: rgba(112, 216, 255, .07);
}

.interactive-reviewer-identity em {
  display: inline-flex;
  margin-top: 5px;
  color: #70d8ff;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.community-leaderboard-card.is-interactive:focus-visible,
.reviewer-member-card.is-interactive:focus-visible,
.interactive-reviewed-game-card:focus-visible,
.interactive-reviewer-identity:focus-visible {
  outline: 3px solid rgba(107, 216, 255, .72);
  outline-offset: 3px;
}

.interactive-game-pill {
  border: 1px solid rgba(102, 214, 255, .14);
  box-shadow: none;
}

.interactive-game-pill:hover {
  background: rgba(102, 214, 255, .22);
}

.interactive-community-mini-row {
  width: 100%;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: inherit;
  box-shadow: none;
  text-align: left;
}

.interactive-community-mini-row:hover {
  border-color: rgba(112, 216, 255, .25);
  background: rgba(112, 216, 255, .055);
}

.interactive-community-mini-row:disabled {
  opacity: 1;
  cursor: default;
}

@media (max-width: 920px) {
  .interactive-reviewer-hero {
    grid-template-columns:
      auto minmax(0, 1fr);
  }

  .interactive-reviewer-level-card {
    grid-column: 1 / -1;
  }

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

  .interactive-reviewer-favourite-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .interactive-reviewer-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .interactive-reviewer-large-avatar {
    margin: 0 auto;
  }

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

  .interactive-reviewed-game-card {
    grid-template-columns:
      55px minmax(0, 1fr);
  }

  .interactive-reviewed-game-art {
    width: 55px;
  }

  .interactive-reviewed-game-badges {
    grid-column: 1 / -1;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .interactive-reviewer-favourites {
    gap: 7px;
  }
}

/* === END REVIEWER_PROFILE_INTERACTIONS_SECURITY_STYLES_V1 === */


/* === SPINNER_STABLE_RECOVERY_STYLES_V1 === */

/*
 * Tier meanings are displayed with CSS only.
 * No JavaScript observer or animation code is involved.
 * No dash punctuation is used in the visible labels.
 */

.control-page .tier-row.tier-S > .tier-label,
.viewer-page .tier-row.tier-S > .tier-label {
  background: #ff7f7f !important;
}

.control-page .tier-row.tier-A > .tier-label,
.viewer-page .tier-row.tier-A > .tier-label {
  background: #ffbf7f !important;
}

.control-page .tier-row.tier-B > .tier-label,
.viewer-page .tier-row.tier-B > .tier-label {
  background: #ffff7f !important;
}

.control-page .tier-row.tier-C > .tier-label,
.viewer-page .tier-row.tier-C > .tier-label {
  background: #7fff7f !important;
}

.control-page .tier-row.tier-D > .tier-label,
.viewer-page .tier-row.tier-D > .tier-label {
  background: #7fbfff !important;
}

.control-page .tier-row.tier-F > .tier-label,
.viewer-page .tier-row.tier-F > .tier-label {
  background: #bf7fff !important;
}

.control-page .tier-label,
.viewer-page .tier-label {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
  color: #07090d !important;
  text-align: center;
}

.control-page .tier-label::after,
.viewer-page .tier-label::after {
  display: block;
  max-width: 112px;
  color: rgba(5, 7, 11, .78);
  font-size: 9px;
  font-weight: 950;
  line-height: 1.18;
  white-space: normal;
}

.control-page .tier-row.tier-S > .tier-label::after,
.viewer-page .tier-row.tier-S > .tier-label::after {
  content: "🔥 Most definitely playing again";
}

.control-page .tier-row.tier-A > .tier-label::after,
.viewer-page .tier-row.tier-A > .tier-label::after {
  content: "🤩 Definitely playing again";
}

.control-page .tier-row.tier-B > .tier-label::after,
.viewer-page .tier-row.tier-B > .tier-label::after {
  content: "👍 Would happily play again";
}

.control-page .tier-row.tier-C > .tier-label::after,
.viewer-page .tier-row.tier-C > .tier-label::after {
  content: "🙂 Enjoyed it, probably done";
}

.control-page .tier-row.tier-D > .tier-label::after,
.viewer-page .tier-row.tier-D > .tier-label::after {
  content: "😕 Unlikely to play again";
}

.control-page .tier-row.tier-F > .tier-label::after,
.viewer-page .tier-row.tier-F > .tier-label::after {
  content: "🗑️ Rubbish, never playing again";
}

/*
 * OBS ranking stays compact.
 */
.ranking-page .tier-label::after,
.spinner-page .tier-label::after {
  display: none !important;
}

/*
 * Safe spinner performance reduction.
 * This does not replace or interfere with the original spinner JavaScript.
 */
.spinner-page .spinning-art,
.ranking-page .spinning-art,
.control-page .spinning-art {
  filter: none !important;
  box-shadow: none !important;
}

.spinner-page .winner-bounce {
  animation: winnerBounce 700ms cubic-bezier(.2, .85, .2, 1) 1 !important;
  filter: none !important;
}

.spinner-page .spinner-current,
.spinner-page .spinner-current img {
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.spinner-page .spinner-current img {
  will-change: auto !important;
}

/*
 * Remove all visible remnants from the two experimental tier patches.
 */
.game-tier-guide-main,
.game-tier-select-guide,
.tier-meaning-caption,
.tier-display-guide-v2,
.tier-display-meaning {
  display: none !important;
}

/* === END SPINNER_STABLE_RECOVERY_STYLES_V1 === */



/* === SPINNER_PRELOADED_CANVAS_STYLES_V1 === */

.preloaded-spinner-surface,
.preloaded-spinner-wrap {
  contain: layout paint style;
}

.preloaded-spinner-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.preloaded-spinner-layer {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0 !important;
  visibility: hidden !important;
  filter: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: translateZ(0) scale(1.008);
  transition: opacity 55ms linear !important;
  animation: none !important;
  backface-visibility: hidden;
}

.preloaded-spinner-layer + .preloaded-spinner-layer {
  position: absolute;
  inset: 0;
}

.preloaded-spinner-layer.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
}

.preloaded-spinner-platform
.current-platform {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 5;
}

.preloaded-control-spinner-image,
.is-spinning .preloaded-control-spinner-image {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: none !important;
  animation: none !important;
  transform: translateZ(0) scale(1.008);
}

.preloaded-spinner-land {
  animation:
    preloadedSpinnerWinnerLanding
    720ms
    cubic-bezier(.2, .85, .2, 1)
    1 !important;
}

@keyframes preloadedSpinnerWinnerLanding {
  0% {
    transform:
      translateZ(0)
      scale(.95);
    opacity: .9;
  }

  48% {
    transform:
      translateZ(0)
      scale(1.03);
    opacity: 1;
  }

  75% {
    transform:
      translateZ(0)
      scale(.994);
  }

  100% {
    transform:
      translateZ(0)
      scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preloaded-spinner-layer {
    transition: none !important;
  }

  .preloaded-spinner-land {
    animation: none !important;
  }
}

/* === END SPINNER_PRELOADED_CANVAS_STYLES_V1 === */


/* === CINEMATIC_TENSION_SPINNER_STYLES_V1 === */

.preloaded-spinner-wrap,
.preloaded-control-spinner-image {
  transition: transform 260ms ease !important;
}

.spinner-tension-fast
.preloaded-spinner-wrap,
.spinner-tension-fast
.preloaded-control-spinner-image {
  transform: translateZ(0) scale(1.004) !important;
}

.spinner-tension-build
.preloaded-spinner-wrap,
.spinner-tension-build
.preloaded-control-spinner-image {
  transform: translateZ(0) scale(1.012) !important;
}

.spinner-tension-suspense
.preloaded-spinner-wrap,
.spinner-tension-suspense
.preloaded-control-spinner-image {
  transform: translateZ(0) scale(1.024) !important;
}

.spinner-tension-pulse
.preloaded-spinner-wrap,
.spinner-tension-pulse
.preloaded-control-spinner-image {
  transform: translateZ(0) scale(1.034) !important;
}

.preloaded-spinner-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border: 0 solid rgba(255, 255, 255, 0);
  opacity: 0;
  transition:
    opacity 260ms ease,
    border-width 260ms ease,
    border-color 260ms ease;
}

.spinner-tension-build
.preloaded-spinner-wrap::after {
  border-width: 3px;
  border-color: rgba(255, 255, 255, .2);
  opacity: .65;
}

.spinner-tension-suspense
.preloaded-spinner-wrap::after {
  border-width: 6px;
  border-color: rgba(255, 255, 255, .42);
  opacity: 1;
}

.preloaded-spinner-land {
  animation:
    cinematicTensionWinnerLanding
    880ms
    cubic-bezier(.2, .85, .2, 1)
    1 !important;
}

@keyframes cinematicTensionWinnerLanding {
  0% {
    transform: translateZ(0) scale(.93);
    opacity: .84;
  }

  42% {
    transform: translateZ(0) scale(1.045);
    opacity: 1;
  }

  68% {
    transform: translateZ(0) scale(.988);
  }

  100% {
    transform: translateZ(0) scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preloaded-spinner-wrap,
  .preloaded-control-spinner-image {
    transition: none !important;
  }
}

/* === END CINEMATIC_TENSION_SPINNER_STYLES_V1 === */



/* === OBS_SEQUENCE_PRELOAD_FIX_STYLES_V2 === */

.spinner-page.obs-sequence-spinner-active
.preloaded-spinner-layer {
  filter: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.spinner-page
.preloaded-spinner-wrap {
  contain: layout paint style;
}

.spinner-page
.preloaded-spinner-layer {
  transition:
    opacity 36ms linear !important;
}

.spinner-page
#overlayCurrent {
  filter: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* === END OBS_SEQUENCE_PRELOAD_FIX_STYLES_V2 === */


/* === SERVER_DRIVEN_CANVAS_SPINNER_STYLES_V4 === */

.spinner-page.server-canvas-spinner-active
#overlayCurrent {
  contain: layout paint style;
  filter: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.spinner-page
.server-spinner-canvas-wrap {
  position: relative;
  width: auto !important;
  height: 92vh !important;
  max-width: 92vw !important;
  aspect-ratio: 2 / 3 !important;
  overflow: hidden;
  transform: translateZ(0);
  contain: layout paint style;
}

.spinner-page
.server-spinner-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  image-rendering: auto;
}

.spinner-page
.server-spinner-winner-land {
  animation:
    serverSpinnerWinnerLanding
    820ms
    cubic-bezier(.2, .85, .2, 1)
    1 !important;
}

@keyframes serverSpinnerWinnerLanding {
  0% {
    transform: translateZ(0) scale(.94);
    opacity: .88;
  }

  48% {
    transform: translateZ(0) scale(1.035);
    opacity: 1;
  }

  76% {
    transform: translateZ(0) scale(.992);
  }

  100% {
    transform: translateZ(0) scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner-page
  .server-spinner-winner-land {
    animation: none !important;
  }
}

/* === END SERVER_DRIVEN_CANVAS_SPINNER_STYLES_V4 === */


/* === ULTRA_LOCAL_CACHED_SPINNER_STYLES_V5 === */

/* One identical frame size before, during and after the spin. */
.spinner-page #overlayCurrent.ultra-spinner-surface-v5,
.spinner-page #overlayCurrent {
  width: 100vw !important;
  height: 100vh !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  contain: strict;
}

.spinner-page .ultra-spinner-wrap-v5 {
  position: relative !important;
  display: block !important;
  width: auto !important;
  height: min(86vh, 1320px) !important;
  max-width: 90vw !important;
  aspect-ratio: 2 / 3 !important;
  overflow: hidden !important;
  contain: layout paint style !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

.spinner-page .ultra-spinner-canvas-v5 {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  image-rendering: auto;
}

/* Disable every older zoom/tension rule on the new persistent surface. */
.spinner-page.is-spinning .ultra-spinner-wrap-v5,
.spinner-page.ultra-spinner-active-v5 .ultra-spinner-wrap-v5,
.spinner-page.ultra-spinner-landed-v5 .ultra-spinner-wrap-v5,
.spinner-page.is-spinning .ultra-spinner-canvas-v5,
.spinner-page.ultra-spinner-active-v5 .ultra-spinner-canvas-v5,
.spinner-page.ultra-spinner-landed-v5 .ultra-spinner-canvas-v5 {
  transform: none !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Landing feedback uses opacity only, never a size change. */
.spinner-page.ultra-spinner-landed-v5 .ultra-spinner-canvas-v5 {
  animation: ultraSpinnerLandingOpacityV5 420ms ease-out 1 !important;
}

@keyframes ultraSpinnerLandingOpacityV5 {
  0% { opacity: .82; }
  100% { opacity: 1; }
}

/* Kinder, evenly scaled tier descriptions. */
.control-page .tier-row.tier-S > .tier-label::after,
.viewer-page .tier-row.tier-S > .tier-label::after {
  content: "An all-time favourite" !important;
}

.control-page .tier-row.tier-A > .tier-label::after,
.viewer-page .tier-row.tier-A > .tier-label::after {
  content: "Loved it, definitely playing again" !important;
}

.control-page .tier-row.tier-B > .tier-label::after,
.viewer-page .tier-row.tier-B > .tier-label::after {
  content: "Really enjoyed it, would play again" !important;
}

.control-page .tier-row.tier-C > .tier-label::after,
.viewer-page .tier-row.tier-C > .tier-label::after {
  content: "Enjoyed it, but probably done" !important;
}

.control-page .tier-row.tier-D > .tier-label::after,
.viewer-page .tier-row.tier-D > .tier-label::after {
  content: "Not really for me" !important;
}

.control-page .tier-row.tier-F > .tier-label::after,
.viewer-page .tier-row.tier-F > .tier-label::after {
  content: "It's just not for me at all" !important;
}

/* === END ULTRA_LOCAL_CACHED_SPINNER_STYLES_V5 === */


/* === PERSISTENT_LOCAL_SMOOTH_SPINNER_STYLES_V6 === */

/* One fixed canvas size is used before, during and after every spin. */
.spinner-page #overlayCurrent.smooth-spinner-surface-v6,
.spinner-page #overlayCurrent {
  width: 100vw !important;
  height: 100vh !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  contain: strict !important;
}

.spinner-page .smooth-spinner-wrap-v6 {
  position: relative !important;
  display: block !important;
  width: auto !important;
  height: min(86vh, 1320px) !important;
  max-width: 90vw !important;
  aspect-ratio: 2 / 3 !important;
  overflow: hidden !important;
  contain: layout paint style !important;
  transform: none;
  transition: none !important;
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.spinner-page .smooth-spinner-canvas-v6 {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  image-rendering: auto !important;
}

.spinner-page.is-spinning .smooth-spinner-wrap-v6,
.spinner-page.smooth-spinner-active-v6 .smooth-spinner-wrap-v6,
.spinner-page.smooth-spinner-landed-v6 .smooth-spinner-wrap-v6,
.spinner-page.is-spinning .smooth-spinner-canvas-v6,
.spinner-page.smooth-spinner-active-v6 .smooth-spinner-canvas-v6,
.spinner-page.smooth-spinner-landed-v6 .smooth-spinner-canvas-v6 {
  transform: none !important;
  transition: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.spinner-page.smooth-spinner-landed-v6 .smooth-spinner-canvas-v6 {
  animation: smoothSpinnerLandingOpacityV6 360ms ease-out 1 !important;
}

@keyframes smoothSpinnerLandingOpacityV6 {
  0% { opacity: .86; }
  100% { opacity: 1; }
}

/*
 * Tier meanings use the same tone on the control board and public viewer.
 * The viewer page also carries ranking-page, so it needs an explicit display
 * override while the compact OBS ranking source remains unchanged.
 */
.control-page .tier-label::after,
.viewer-page .tier-label::after,
.ranking-page.viewer-page .tier-label::after {
  display: block !important;
  max-width: 132px !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
}

.control-page .tier-row.tier-S > .tier-label::after,
.viewer-page .tier-row.tier-S > .tier-label::after {
  content: "I'm gonna play the hell out of this game, PEAK!" !important;
}

.control-page .tier-row.tier-A > .tier-label::after,
.viewer-page .tier-row.tier-A > .tier-label::after {
  content: "I loved this, I'm absolutely playing it again!" !important;
}

.control-page .tier-row.tier-B > .tier-label::after,
.viewer-page .tier-row.tier-B > .tier-label::after {
  content: "That was great, I'd happily play it again!" !important;
}

.control-page .tier-row.tier-C > .tier-label::after,
.viewer-page .tier-row.tier-C > .tier-label::after {
  content: "I enjoyed it, but I'm probably done with it." !important;
}

.control-page .tier-row.tier-D > .tier-label::after,
.viewer-page .tier-row.tier-D > .tier-label::after {
  content: "It wasn't really for me, I doubt I'll go back." !important;
}

.control-page .tier-row.tier-F > .tier-label::after,
.viewer-page .tier-row.tier-F > .tier-label::after {
  content: "It's just not for me at all." !important;
}

/* === END PERSISTENT_LOCAL_SMOOTH_SPINNER_STYLES_V6 === */

/* === SPINNER_AUDIO_REVIEWER_AVERAGE_STYLES_V7 === */

.spinner-audio-unlock-v7 {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 99999;
  transform: translateX(-50%);
  display: grid;
  gap: 3px;
  min-width: 260px;
  padding: 13px 20px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 16px;
  background: rgba(12, 12, 18, .92);
  color: #fff;
  font: inherit;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 12px 40px rgba(0,0,0,.38);
  backdrop-filter: blur(14px);
}

.spinner-audio-unlock-v7 b { font-size: 15px; }
.spinner-audio-unlock-v7 span { font-size: 12px; opacity: .72; }

.reviewer-average-grade-v7 {
  white-space: nowrap;
}

.reviewer-average-grade-v7 b {
  font-size: 1.08em;
}

/* === END SPINNER_AUDIO_REVIEWER_AVERAGE_STYLES_V7 === */

/* === RELIABLE_SPINNER_AUDIO_AND_TIER_COPY_STYLES_V9 === */

.spinner-sound-test-row-v9 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.spinner-sound-test-row-v9 .muted {
  font-size: 12px;
}

.control-page .tier-label::after,
.viewer-page .tier-label::after,
.ranking-page.viewer-page .tier-label::after {
  display: block !important;
  max-width: 150px !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

.control-page .tier-row.tier-S > .tier-label::after,
.viewer-page .tier-row.tier-S > .tier-label::after,
.viewer-page .tier-row.community-tier-S > .tier-label::after {
  content: "🔥 Peak! Playing 100%" !important;
}

.control-page .tier-row.tier-A > .tier-label::after,
.viewer-page .tier-row.tier-A > .tier-label::after,
.viewer-page .tier-row.community-tier-A > .tier-label::after {
  content: "❤️ I love this game! Playing more for sure" !important;
}

.control-page .tier-row.tier-B > .tier-label::after,
.viewer-page .tier-row.tier-B > .tier-label::after,
.viewer-page .tier-row.community-tier-B > .tier-label::after {
  content: "🎮 Great game! I will check it out more!" !important;
}

.control-page .tier-row.tier-C > .tier-label::after,
.viewer-page .tier-row.tier-C > .tier-label::after,
.viewer-page .tier-row.community-tier-C > .tier-label::after {
  content: "👍 It's a good game... but not a priority." !important;
}

.control-page .tier-row.tier-D > .tier-label::after,
.viewer-page .tier-row.tier-D > .tier-label::after,
.viewer-page .tier-row.community-tier-D > .tier-label::after {
  content: "🤷 Not for me, and that's ok!" !important;
}

.control-page .tier-row.tier-F > .tier-label::after,
.viewer-page .tier-row.tier-F > .tier-label::after,
.viewer-page .tier-row.community-tier-F > .tier-label::after {
  content: "❌ .... Not my cup of tea at all, I'm sorry!" !important;
}

/* === END RELIABLE_SPINNER_AUDIO_AND_TIER_COPY_STYLES_V9 === */

/* === CINEMATIC_SPINNER_AUDIO_TENSION_STYLES_V11 === */

.spinner-page .smooth-spinner-wrap-v6::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 18px;
  opacity: 0;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0),
    0 0 0 rgba(255, 184, 64, 0);
}

.spinner-page.spinner-tension-mid-v11 .smooth-spinner-wrap-v6::before {
  opacity: .38;
  animation: spinnerTensionPulseV11 1.25s ease-in-out infinite;
}

.spinner-page.spinner-tension-high-v11 .smooth-spinner-wrap-v6::before {
  opacity: .62;
  animation: spinnerTensionPulseV11 .82s ease-in-out infinite;
}

.spinner-page.spinner-tension-final-v11 .smooth-spinner-wrap-v6::before {
  opacity: .9;
  animation: spinnerTensionPulseV11 .48s ease-in-out infinite;
}

.spinner-page.smooth-spinner-landed-v11 .smooth-spinner-wrap-v6 {
  transform-origin: center center !important;
  animation: spinnerWinnerBobV11 2.05s cubic-bezier(.2, .8, .2, 1) both !important;
}

.spinner-page.smooth-spinner-landed-v11 .smooth-spinner-wrap-v6::before {
  opacity: .88;
  animation: spinnerWinnerGlowV11 2.05s ease-out both;
}

@keyframes spinnerTensionPulseV11 {
  0%, 100% {
    box-shadow:
      inset 0 0 0 2px rgba(255, 255, 255, .08),
      0 0 18px rgba(255, 184, 64, .16);
  }
  50% {
    box-shadow:
      inset 0 0 0 3px rgba(255, 255, 255, .28),
      0 0 46px rgba(255, 184, 64, .46);
  }
}

@keyframes spinnerWinnerBobV11 {
  0%   { transform: scale(1) translateY(0); }
  15%  { transform: scale(1.045) translateY(-10px); }
  31%  { transform: scale(.992) translateY(5px); }
  48%  { transform: scale(1.03) translateY(-7px); }
  65%  { transform: scale(.997) translateY(3px); }
  82%  { transform: scale(1.015) translateY(-3px); }
  100% { transform: scale(1) translateY(0); }
}

@keyframes spinnerWinnerGlowV11 {
  0% {
    box-shadow:
      inset 0 0 0 3px rgba(255, 255, 255, .45),
      0 0 64px rgba(255, 184, 64, .76);
  }
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0),
      0 0 8px rgba(255, 184, 64, 0);
  }
}

/* === END CINEMATIC_SPINNER_AUDIO_TENSION_STYLES_V11 === */

/* === VIEWER_MOBILE_MONTHLY_LEADERBOARD_STYLES_V14 === */

/* More readable tier meanings on the public viewer. */
.viewer-page .tier-row {
  grid-template-columns: clamp(190px, 15vw, 270px) minmax(0, 1fr) !important;
  min-height: clamp(170px, 13vw, 235px) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}

.viewer-page .tier-label {
  min-width: 0 !important;
  padding: 18px 16px !important;
  gap: 12px !important;
  font-size: clamp(38px, 3vw, 60px) !important;
  font-weight: 1000 !important;
  line-height: .9 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.3) !important;
}

.viewer-page .tier-label::after,
.ranking-page.viewer-page .tier-label::after {
  max-width: 220px !important;
  font-size: clamp(13px, .95vw, 17px) !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.viewer-page .tier-items {
  align-content: center !important;
}

/* Professional monthly and all-time leaderboard shell. */
.community-leaderboard-v14 {
  position: relative;
  margin-top: clamp(28px, 4vw, 64px) !important;
  padding: clamp(18px, 2.4vw, 38px) !important;
  border: 1px solid rgba(148, 188, 255, .2) !important;
  border-radius: 32px !important;
  background:
    radial-gradient(circle at 5% 0%, rgba(70, 195, 255, .13), transparent 30%),
    radial-gradient(circle at 96% 0%, rgba(146, 86, 255, .14), transparent 34%),
    linear-gradient(180deg, rgba(14, 20, 34, .98), rgba(8, 12, 22, .98)) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05) !important;
  overflow: hidden;
}

.community-vip-banner {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 215, 105, .42);
  border-radius: 24px;
  background:
    linear-gradient(115deg, rgba(255, 197, 65, .2), rgba(255,255,255,.07) 42%, rgba(145, 85, 255, .13)),
    rgba(10, 14, 25, .82);
  box-shadow: 0 18px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
  overflow: hidden;
}

.community-vip-banner[role="button"] { cursor: pointer; }
.community-vip-banner::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -70% -25%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.24) 49%, transparent 56%);
  transform: translateX(-55%);
  animation: communityVipShineV14 6s ease-in-out infinite;
}

.community-vip-banner > * { position: relative; z-index: 1; }
.community-vip-crown { font-size: 38px; filter: drop-shadow(0 8px 18px rgba(255,193,55,.35)); }
.community-vip-banner .community-leader-avatar { width: 62px; height: 62px; flex-basis: 62px; }
.community-vip-copy { min-width: 0; }
.community-vip-copy span,
.community-vip-banner.is-waiting span {
  display: block;
  color: #ffd86b;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.community-vip-copy strong,
.community-vip-banner.is-waiting strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: clamp(20px, 2vw, 32px);
  line-height: 1;
}
.community-vip-copy p,
.community-vip-banner.is-waiting p { margin: 7px 0 0; color: #c3ccda; line-height: 1.45; }
.community-vip-badge {
  padding: 10px 15px;
  border: 1px solid rgba(255,225,135,.52);
  border-radius: 999px;
  background: linear-gradient(135deg, #ffcf4f, #fff0a8, #eaa52b);
  color: #251706;
  font-size: 15px;
  font-weight: 1000;
  box-shadow: 0 8px 26px rgba(255,193,55,.25);
}
.community-vip-banner.is-waiting { grid-template-columns: auto minmax(0,1fr); }

.community-leaderboard-v14 .community-leaderboard-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.community-leaderboard-v14 .community-leaderboard-header h2 {
  margin: 5px 0 0;
  font-size: clamp(30px, 3.3vw, 54px);
  letter-spacing: -.045em;
  line-height: .94;
}
.community-leaderboard-v14 .community-leaderboard-header > div > span {
  color: #72ddff;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .15em;
}
.community-leaderboard-v14 .community-leaderboard-header p {
  max-width: 670px;
  margin: 0;
  color: #aeb9ca;
  font-size: 14px;
  line-height: 1.55;
}

.community-leaderboard-toolbar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0;
}
.community-leaderboard-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: rgba(0,0,0,.22);
}
.community-leaderboard-tabs button {
  display: grid;
  gap: 3px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: #92a0b5;
  text-align: left;
  cursor: pointer;
}
.community-leaderboard-tabs button span { font-size: 14px; font-weight: 950; }
.community-leaderboard-tabs button small { color: inherit; font-size: 10px; font-weight: 800; opacity: .78; }
.community-leaderboard-tabs button.is-active {
  border-color: rgba(111, 217, 255, .34);
  background: linear-gradient(135deg, rgba(69, 195, 255, .19), rgba(139, 92, 246, .18));
  color: #fff;
  box-shadow: 0 8px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
}
.community-leaderboard-period-note {
  min-width: 220px;
  display: grid;
  align-content: center;
  justify-items: end;
  padding: 10px 14px;
  color: #fff;
}
.community-leaderboard-period-note b { font-size: 14px; }
.community-leaderboard-period-note span { margin-top: 3px; color: #8f9db1; font-size: 11px; font-weight: 800; }

.community-leaderboard-v14 .community-points-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.community-leaderboard-v14 .community-points-rules span {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: #aeb9c9;
  font-size: 11px;
  font-weight: 850;
}
.community-leaderboard-v14 .community-points-rules b { color: #fff; }

.community-leaderboard-v14 .community-leaderboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.community-leaderboard-card-v14 {
  isolation: isolate;
  min-width: 0;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(100,210,255,.09), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022)) !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.community-leaderboard-card-v14.is-interactive:hover {
  transform: translateY(-4px);
  border-color: rgba(115, 220, 255, .38) !important;
  box-shadow: 0 20px 46px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.community-card-shine {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
.community-leaderboard-card-v14 > :not(.community-card-shine) { position: relative; z-index: 1; }
.community-leaderboard-card-v14.is-podium .community-card-shine::after {
  content: "";
  position: absolute;
  inset: -55% -60%;
  background: linear-gradient(108deg, transparent 43%, rgba(255,255,255,.32) 49%, transparent 56%);
  transform: translateX(-48%);
  animation: communityCardShineV14 5.5s ease-in-out infinite;
}
.community-leaderboard-card-v14.rank-1 {
  border-color: rgba(255, 210, 79, .62) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(255,245,174,.36), transparent 36%),
    linear-gradient(135deg, rgba(173,112,13,.55), rgba(255,219,91,.18) 44%, rgba(71,43,5,.64)) !important;
  box-shadow: 0 18px 52px rgba(190,123,12,.22), inset 0 1px 0 rgba(255,250,205,.38) !important;
}
.community-leaderboard-card-v14.rank-2 {
  border-color: rgba(216, 229, 245, .55) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(255,255,255,.28), transparent 37%),
    linear-gradient(135deg, rgba(105,119,143,.48), rgba(221,231,244,.15) 45%, rgba(42,52,69,.65)) !important;
  box-shadow: 0 18px 52px rgba(139,157,181,.16), inset 0 1px 0 rgba(255,255,255,.32) !important;
}
.community-leaderboard-card-v14.rank-3 {
  border-color: rgba(230, 154, 89, .55) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(255,211,164,.25), transparent 37%),
    linear-gradient(135deg, rgba(139,74,31,.52), rgba(224,139,77,.15) 45%, rgba(63,34,23,.68)) !important;
  box-shadow: 0 18px 52px rgba(161,83,35,.17), inset 0 1px 0 rgba(255,221,186,.26) !important;
}
.community-leaderboard-card-v14 .community-leader-card-top {
  grid-template-columns: auto auto minmax(0, 1fr);
}
.community-leaderboard-card-v14 .community-leader-points-block {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  text-align: left;
}
.community-leaderboard-card-v14 .community-leader-rank-badge {
  min-width: 58px;
  height: 58px;
  align-content: center;
  gap: 2px;
}
.community-leaderboard-card-v14 .community-leader-rank-badge span { display: block; line-height: 1; }
.community-leaderboard-card-v14 .community-leader-rank-badge small { display: block; color: #8492a6; font-size: 8px; font-weight: 950; text-transform: uppercase; letter-spacing: .07em; }
.community-leaderboard-card-v14 .community-leader-name-row strong { font-size: clamp(20px, 1.8vw, 28px); overflow-wrap: anywhere; }
.community-leaderboard-card-v14 .community-leader-points-block b { font-size: 34px; }
.community-average-grade { border-color: rgba(126,219,255,.2) !important; background: rgba(70,191,241,.1) !important; color: #c9f3ff !important; }

@keyframes communityCardShineV14 {
  0%, 52% { transform: translateX(-55%); opacity: 0; }
  58% { opacity: 1; }
  78%, 100% { transform: translateX(55%); opacity: 0; }
}
@keyframes communityVipShineV14 {
  0%, 58% { transform: translateX(-58%); opacity: 0; }
  64% { opacity: 1; }
  82%, 100% { transform: translateX(58%); opacity: 0; }
}

/* Full portrait mobile layout. */
@media (max-width: 980px) {
  .community-leaderboard-v14 .community-leaderboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .community-leaderboard-v14 .community-leaderboard-header { align-items: start; flex-direction: column; }
}

@media (max-width: 720px) {
  body.viewer-page,
  .viewer-page.overlay-page { padding: max(8px, env(safe-area-inset-top)) 8px max(24px, env(safe-area-inset-bottom)) !important; }
  .viewer-page .viewer-about-shell,
  .viewer-page .viewer-howto-shell,
  .viewer-page .overlay-wrap { width: 100% !important; }
  .viewer-page .viewer-about-card,
  .viewer-page .viewer-howto-card,
  .viewer-page .overlay-board { border-radius: 20px !important; }
  .viewer-page .viewer-about-card { padding: 16px !important; }
  .viewer-page .viewer-about-hero { grid-template-columns: 1fr !important; text-align: center !important; gap: 16px !important; }
  .viewer-page .viewer-about-photo-wrap,
  .viewer-page .viewer-about-avatar { width: 132px !important; height: 132px !important; margin: 0 auto !important; }
  .viewer-page .viewer-about-intro h1 { font-size: clamp(48px, 17vw, 72px) !important; }
  .viewer-page .viewer-about-socials { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; }
  .viewer-page .viewer-about-socials a { justify-content: center !important; min-width: 0 !important; }
  .viewer-page .viewer-about-content { grid-template-columns: 1fr !important; gap: 12px !important; }
  .viewer-page .viewer-about-block,
  .viewer-page .viewer-howto-card { padding: 18px !important; }
  .viewer-page .viewer-about-block h2,
  .viewer-page .viewer-howto-card h2 { font-size: 25px !important; }
  .viewer-page .viewer-howto-steps { grid-template-columns: 1fr !important; }
  .viewer-page .overlay-board { min-height: 0 !important; padding: 8px !important; }
  .viewer-page .tier-board { gap: 10px !important; }
  .viewer-page .tier-row {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    border-radius: 18px !important;
  }
  .viewer-page .tier-label {
    min-height: 82px !important;
    padding: 13px 16px !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    font-size: 42px !important;
    text-align: left !important;
  }
  .viewer-page .tier-label::after,
  .ranking-page.viewer-page .tier-label::after {
    max-width: none !important;
    font-size: 14px !important;
    line-height: 1.28 !important;
    text-align: left !important;
  }
  .viewer-page .tier-items {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    min-height: 110px !important;
    padding: 10px !important;
  }
  .viewer-page .game-chip { width: 100% !important; min-width: 0 !important; }
  .viewer-page .small-title { font-size: 10px !important; line-height: 1.2 !important; }
  .community-leaderboard-v14 { margin-top: 18px !important; padding: 12px !important; border-radius: 22px !important; }
  .community-vip-banner { grid-template-columns: auto minmax(0,1fr); padding: 14px; border-radius: 18px; }
  .community-vip-banner .community-leader-avatar { display: none; }
  .community-vip-badge { grid-column: 1 / -1; justify-self: start; }
  .community-leaderboard-toolbar { flex-direction: column; }
  .community-leaderboard-tabs { width: 100%; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .community-leaderboard-tabs button { padding: 10px; }
  .community-leaderboard-period-note { min-width: 0; justify-items: start; padding: 0 3px; }
  .community-leaderboard-v14 .community-leaderboard-grid { grid-template-columns: 1fr; }
  .community-leaderboard-card-v14 { padding: 14px !important; border-radius: 19px !important; }
}

@media (max-width: 460px) {
  .viewer-page .viewer-about-socials { grid-template-columns: 1fr !important; }
  .viewer-page .tier-items { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .viewer-page .tier-label { align-items: center !important; font-size: 38px !important; }
  .community-leaderboard-tabs button span { font-size: 12px; }
  .community-leaderboard-card-v14 .community-leader-card-top { grid-template-columns: auto minmax(0,1fr); }
  .community-leaderboard-card-v14 .community-leader-avatar { width: 50px; height: 50px; flex-basis: 50px; }
  .community-leaderboard-card-v14 .community-leader-identity { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .community-vip-banner::after,
  .community-leaderboard-card-v14 > :not(.community-card-shine) { position: relative; z-index: 1; }
.community-leaderboard-card-v14.is-podium .community-card-shine::after { animation: none !important; }
}

/* === END VIEWER_MOBILE_MONTHLY_LEADERBOARD_STYLES_V14 === */

/* === REVIEWER_OWN_CARD_GUEST_MEDIA_STYLES_V16 === */

/* Keep Kyle's original hero proportions, then use the unused right side for
   only the current visitor's own reviewer card. */
@media (min-width: 1500px) {
  .viewer-page .viewer-about-hero {
    display: grid !important;
    grid-template-columns: clamp(230px, 16vw, 340px) minmax(430px, 620px) minmax(420px, 1fr) !important;
    grid-template-areas: "photo intro reviewer" !important;
    align-items: center !important;
    gap: clamp(28px, 3vw, 58px) !important;
  }
  .viewer-page .viewer-about-photo-wrap { grid-area: photo !important; align-self: center !important; }
  .viewer-page .viewer-about-intro { grid-area: intro !important; min-width: 0 !important; max-width: 620px !important; align-self: center !important; }
  .viewer-page .reviewer-own-panel-v16 { grid-area: reviewer !important; }
}

@media (min-width: 721px) and (max-width: 1499px) {
  .viewer-page .viewer-about-hero {
    display: grid !important;
    grid-template-columns: clamp(220px, 22vw, 320px) minmax(0, 1fr) !important;
    grid-template-areas: "photo intro" "reviewer reviewer" !important;
    align-items: center !important;
    gap: 28px 40px !important;
  }
  .viewer-page .viewer-about-photo-wrap { grid-area: photo !important; }
  .viewer-page .viewer-about-intro { grid-area: intro !important; min-width: 0 !important; }
  .viewer-page .reviewer-own-panel-v16 { grid-area: reviewer !important; }
}

.reviewer-own-panel-v16 {
  min-width: 0;
  width: 100%;
  align-self: stretch;
  display: grid;
  align-content: stretch;
  color: #fff;
}

.reviewer-own-loading-v16,
.reviewer-own-join-v16,
.reviewer-own-empty-v16,
.reviewer-own-card-v16 {
  min-height: 330px;
  height: 100%;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 24px 58px rgba(13,66,91,.2), inset 0 1px 0 rgba(255,255,255,.14);
  overflow: hidden;
}

.reviewer-own-loading-v16,
.reviewer-own-join-v16,
.reviewer-own-empty-v16 {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 10px;
  padding: clamp(24px, 2.2vw, 38px);
  background:
    radial-gradient(circle at 100% 0%, rgba(88,220,255,.26), transparent 40%),
    linear-gradient(145deg, #16273e, #111827 58%, #251941);
}

.reviewer-own-loading-v16 span,
.reviewer-own-join-v16 > span {
  color: #79e0ff;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .14em;
}

.reviewer-own-loading-v16 strong { font-size: clamp(20px, 1.5vw, 30px); }
.reviewer-own-join-v16 h2,
.reviewer-own-empty-v16 h2 { margin: 0; font-size: clamp(30px, 2.35vw, 48px); line-height: .95; letter-spacing: -.04em; }
.reviewer-own-join-v16 p,
.reviewer-own-empty-v16 p { max-width: 560px; margin: 0; color: #c5cfdd; font-size: 14px; line-height: 1.55; }
.reviewer-own-join-v16 > div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.reviewer-own-join-v16 button,
.reviewer-own-join-v16 a,
.reviewer-own-empty-v16 > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: #6fddff;
  color: #07111d;
  font-weight: 1000;
  text-decoration: none;
  cursor: pointer;
}
.reviewer-own-join-v16 a { background: rgba(255,255,255,.12); color: #fff; }

.reviewer-own-card-v16 {
  isolation: isolate;
  position: relative;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: clamp(20px, 1.8vw, 32px);
  background:
    radial-gradient(circle at 100% 0%, rgba(88,220,255,.28), transparent 42%),
    linear-gradient(145deg, #17283f, #111827 58%, #241640);
}
.reviewer-own-card-v16.has-background {
  background-image:
    linear-gradient(115deg, rgba(5,9,17,.94), rgba(5,9,17,.68) 54%, rgba(5,9,17,.88)),
    var(--reviewer-own-bg-v16);
  background-size: cover;
  background-position: center;
}
.reviewer-own-card-v16 > * { position: relative; z-index: 1; }
.reviewer-own-shade-v16 { position: absolute; inset: 0; z-index: 0 !important; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 34%, rgba(0,0,0,.15)); pointer-events: none; }

.reviewer-own-kicker-v16 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reviewer-own-kicker-v16 > span { color: #80e2ff; font-size: 10px; font-weight: 1000; letter-spacing: .14em; }
.reviewer-own-kicker-v16 > b { padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,.11); color: #dbe6f4; font-size: 8px; font-weight: 1000; letter-spacing: .06em; }
.reviewer-own-kicker-v16 > b.is-approved { background: rgba(87,226,145,.16); color: #a7f4c8; }
.reviewer-own-kicker-v16 > b.is-pending { background: rgba(255,196,78,.17); color: #ffe19a; }

.reviewer-own-card-v16 header { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 15px; }
.reviewer-own-avatar-v16 { width: 74px; height: 74px; border-radius: 21px; object-fit: cover; border: 2px solid rgba(255,255,255,.7); box-shadow: 0 12px 28px rgba(0,0,0,.28); }
.reviewer-own-card-v16 header div { min-width: 0; }
.reviewer-own-card-v16 header small { display: block; color: #81e3ff; font-size: 9px; font-weight: 1000; letter-spacing: .07em; text-transform: uppercase; }
.reviewer-own-card-v16 header h2 { margin: 4px 0 2px; color: #fff; font-size: clamp(25px, 1.8vw, 38px); line-height: .95; overflow-wrap: anywhere; }
.reviewer-own-card-v16 header p { margin: 0; color: #c6d0dd; font-size: 12px; font-weight: 800; }
.reviewer-own-bio-v16 { min-height: 42px; margin: 0; color: #e5ebf4; font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.reviewer-own-games-v16 { display: flex; gap: 9px; }
.reviewer-own-games-v16 img,
.reviewer-own-games-v16 > span { width: 52px; height: 74px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; object-fit: cover; background: rgba(255,255,255,.08); }
.reviewer-own-games-v16 > span { display: grid; place-items: center; color: #fff; font-weight: 1000; }

.reviewer-own-card-v16 footer { display: flex; align-items: end; flex-wrap: wrap; gap: 13px; margin-top: auto; }
.reviewer-own-card-v16 footer > div { display: grid; gap: 1px; min-width: 48px; }
.reviewer-own-card-v16 footer strong { font-size: 20px; line-height: 1; }
.reviewer-own-card-v16 footer span { color: #aeb9c8; font-size: 8px; font-weight: 1000; letter-spacing: .07em; }
.reviewer-own-card-v16 footer button { padding: 10px 13px; border: 1px solid rgba(255,255,255,.23); border-radius: 999px; background: rgba(255,255,255,.13); color: #fff; font-size: 10px; font-weight: 1000; cursor: pointer; }
.reviewer-own-card-v16 footer button:first-of-type { margin-left: auto; background: #fff; color: #101828; }
.reviewer-own-card-v16 footer button.secondary { background: rgba(111,221,255,.15); color: #bdefff; }
.reviewer-own-session-v16 { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); }
.reviewer-own-session-v16 span { color: #9faabc; font-size: 9px; font-weight: 800; }
.reviewer-own-session-v16 button { padding: 0; border: 0; background: transparent; color: #c7d1df; font-size: 9px; font-weight: 950; cursor: pointer; }

.reviewer-participation-v16,
.reviewer-recovery-result-v16 { padding: clamp(24px, 4vw, 48px); color: #fff; }
.reviewer-participation-v16 header > span,
.reviewer-recovery-result-v16 > span { color: #6fddff; font-size: 11px; font-weight: 1000; text-transform: uppercase; letter-spacing: .13em; }
.reviewer-participation-v16 h2,
.reviewer-recovery-result-v16 h2 { margin: 7px 0; font-size: clamp(30px, 4vw, 54px); line-height: .95; }
.reviewer-participation-v16 header p,
.reviewer-recovery-result-v16 p { max-width: 720px; color: #b6c1d0; line-height: 1.55; }
.reviewer-participation-options-v16 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; margin: 24px 0; }
.reviewer-participation-options-v16 > button,
.reviewer-participation-options-v16 > a { display: grid; gap: 8px; min-height: 180px; padding: 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: linear-gradient(145deg, rgba(90,208,255,.12), rgba(147,86,255,.08)); color: #fff; text-align: left; text-decoration: none; cursor: pointer; }
.reviewer-participation-options-v16 b { font-size: 22px; }
.reviewer-participation-options-v16 span { color: #b8c3d1; line-height: 1.5; }
.reviewer-participation-options-v16 em { align-self: end; color: #71ddff; font-size: 10px; font-style: normal; font-weight: 1000; text-transform: uppercase; letter-spacing: .1em; }
.reviewer-recovery-v16 { padding: 17px; margin-bottom: 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(0,0,0,.18); }
.reviewer-recovery-v16 h3 { margin: 0 0 10px; }
.reviewer-recovery-v16 > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.reviewer-recovery-v16 input { min-width: 0; padding: 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(0,0,0,.26); color: #fff; }
.reviewer-recovery-result-v16 code { display: block; margin: 22px 0; padding: 18px; border: 1px solid rgba(111,221,255,.26); border-radius: 16px; background: #080b11; color: #a5ebff; font-size: 13px; overflow-wrap: anywhere; user-select: all; }
.reviewer-recovery-result-v16 > div { display: flex; flex-wrap: wrap; gap: 10px; }

.reviewer-custom-media-v16 { order: -1; }
.reviewer-upload-grid-v16 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.reviewer-upload-grid-v16 article { padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(255,255,255,.035); }
.reviewer-upload-grid-v16 h4 { margin: 12px 0 4px; font-size: 17px; }
.reviewer-upload-grid-v16 article > p { margin: 0 0 11px; color: #9ca9bc; font-size: 11px; }
.reviewer-upload-grid-v16 article > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
.reviewer-upload-preview-v16 { display: grid; place-items: center; min-height: 150px; border: 1px dashed rgba(255,255,255,.2); border-radius: 14px; background: rgba(0,0,0,.2); background-size: cover; background-position: center; overflow: hidden; }
.reviewer-upload-preview-v16.is-avatar { width: 150px; border-radius: 999px; }
.reviewer-upload-preview-v16.is-background { width: 100%; aspect-ratio: 16/8; }
.reviewer-upload-preview-v16 span { max-width: 150px; padding: 7px 9px; border-radius: 999px; background: rgba(0,0,0,.68); color: #fff; font-size: 9px; font-weight: 900; text-align: center; }
.reviewer-upload-button-v16 { display: inline-flex !important; padding: 10px 13px !important; border-radius: 10px !important; background: #6fddff !important; color: #07111d !important; font-size: 11px !important; font-weight: 1000 !important; cursor: pointer; }
.reviewer-upload-button-v16 input { display: none; }
.reviewer-rights-check-v16 { display: flex !important; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(0,0,0,.15); }
.reviewer-rights-check-v16.needs-confirmation { border-color: rgba(255,197,79,.55); box-shadow: 0 0 0 3px rgba(255,197,79,.08); }
.reviewer-rights-check-v16 input { width: auto !important; margin-top: 3px; }
.reviewer-rights-check-v16 span { color: #c4cfdd; font-size: 11px; line-height: 1.45; }

.reviewer-member-card.has-custom-background-v16,
.interactive-reviewer-profile.has-custom-background-v16,
.reviewer-profile-view.has-custom-background-v16 { position: relative; isolation: isolate; overflow: hidden; background-image: linear-gradient(135deg, rgba(7,10,17,.94), rgba(7,10,17,.64) 48%, rgba(7,10,17,.9)), var(--reviewer-card-background-v16) !important; background-size: cover !important; background-position: center !important; }
.reviewer-member-card.has-custom-background-v16 > *,
.interactive-reviewer-profile.has-custom-background-v16 > *,
.reviewer-profile-view.has-custom-background-v16 > * { position: relative; z-index: 1; }

.reviewer-choice-card-v16 > div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.reviewer-choice-card-v16 button { padding: 12px 17px; border: 0; border-radius: 999px; background: #6fddff; color: #07111d; font-weight: 1000; }
.manual-reviewer-badge-v16 { background: rgba(111,221,255,.13) !important; color: #a9edff !important; }

.reviewer-admin-v16 { position: relative; overflow: hidden; }
.reviewer-admin-v16 > * { position: relative; z-index: 1; }
.reviewer-admin-background-v16 { position: absolute !important; inset: 0; z-index: 0 !important; background-size: cover; background-position: center; opacity: .16; }
.reviewer-admin-media-v16 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 0 16px 14px; }
.reviewer-admin-media-v16 figure { margin: 0; padding: 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(0,0,0,.2); }
.reviewer-admin-media-v16 img { width: 100%; height: 140px; border-radius: 8px; object-fit: cover; }
.reviewer-admin-media-v16 figcaption { margin-top: 6px; color: #9ca9b8; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.reviewer-rights-confirmed-v16 { color: #8aefb3 !important; }

@media (max-width: 720px) {
  .viewer-page .viewer-about-hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "photo" "intro" "reviewer" !important;
    gap: 16px !important;
  }
  .viewer-page .viewer-about-photo-wrap { grid-area: photo !important; }
  .viewer-page .viewer-about-intro { grid-area: intro !important; }
  .viewer-page .reviewer-own-panel-v16 { grid-area: reviewer !important; text-align: left !important; }
  .reviewer-own-loading-v16,
  .reviewer-own-join-v16,
  .reviewer-own-empty-v16,
  .reviewer-own-card-v16 { min-height: 0; border-radius: 20px; }
  .reviewer-own-card-v16 { padding: 17px; }
  .reviewer-own-card-v16 footer button:first-of-type { margin-left: 0; }
  .reviewer-own-session-v16 { align-items: flex-start; flex-direction: column; }
  .reviewer-participation-options-v16,
  .reviewer-upload-grid-v16 { grid-template-columns: 1fr; }
  .reviewer-recovery-v16 > div { grid-template-columns: 1fr; }
  .reviewer-upload-preview-v16.is-avatar { margin: 0 auto; }
  .reviewer-admin-media-v16 { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .reviewer-own-join-v16 > div,
  .reviewer-own-card-v16 footer { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .reviewer-own-join-v16 button,
  .reviewer-own-join-v16 a { width: 100%; }
  .reviewer-own-card-v16 footer > div { min-width: 0; }
  .reviewer-own-card-v16 footer button { width: 100%; }
  .reviewer-own-session-v16 { grid-column: 1 / -1; }
  .reviewer-participation-v16,
  .reviewer-recovery-result-v16 { padding: 20px; }
}

/* === END REVIEWER_OWN_CARD_GUEST_MEDIA_STYLES_V16 === */

/* === MANUAL_RECOMMENDED_GAMES_STYLES_V17 === */

.library-manager-heading-actions-v17 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

#addManualGameButtonV17 {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  box-shadow: 0 12px 30px rgba(79, 70, 229, .25);
}

.manual-game-modal-v17 {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  place-items: center;
  padding: 24px;
}

.manual-game-modal-v17.open {
  display: grid;
}

.manual-game-backdrop-v17 {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, .76);
  backdrop-filter: blur(10px);
}

.manual-game-panel-v17 {
  position: relative;
  width: min(760px, 100%);
  max-height: min(880px, calc(100vh - 40px));
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 28px;
  padding: 30px;
  background:
    radial-gradient(circle at 100% 0, rgba(124, 58, 237, .24), transparent 36%),
    linear-gradient(155deg, #111827, #080d18 72%);
  color: #f8fafc;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .55);
}

.manual-game-close-v17 {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
  font-size: 28px;
  line-height: 1;
  background: rgba(255,255,255,.1);
  color: #fff;
}

.manual-game-heading-v17 span {
  color: #93c5fd;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.manual-game-heading-v17 h2 {
  margin: 8px 0 8px;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1;
}

.manual-game-heading-v17 p {
  max-width: 620px;
  margin: 0;
  color: #cbd5e1;
  line-height: 1.55;
}

.manual-game-form-v17 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 26px;
}

.manual-game-form-v17 label {
  display: grid;
  gap: 8px;
  color: #e2e8f0;
  font-weight: 800;
}

.manual-game-form-v17 label span {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
}

.manual-game-form-v17 input,
.manual-game-form-v17 select,
.manual-game-form-v17 textarea {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 14px;
  padding: 13px 14px;
  background: rgba(15, 23, 42, .92);
  color: #fff;
}

.manual-game-form-v17 textarea {
  min-height: 100px;
  resize: vertical;
}

.manual-game-wide-v17 {
  grid-column: 1 / -1;
}

.manual-game-help-v17 {
  border: 1px solid rgba(96, 165, 250, .2);
  border-radius: 16px;
  padding: 13px 15px;
  background: rgba(37, 99, 235, .1);
  color: #bfdbfe;
  line-height: 1.5;
}

.manual-game-actions-v17 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

body.manual-game-modal-open-v17 {
  overflow: hidden;
}

.library-game-card.is-manual-game-v17 {
  border-color: rgba(96, 165, 250, .38);
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .12);
}

.library-manual-badge-v17 {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 4px 8px;
  background: linear-gradient(135deg, rgba(37, 99, 235, .24), rgba(124, 58, 237, .28));
  color: #c4b5fd;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.library-card-action-grid:has(.library-delete-manual-v17) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.library-delete-manual-v17 {
  grid-column: 1 / -1;
  background: rgba(239, 68, 68, .1);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, .22);
}

@media (max-width: 720px) {
  .library-manager-heading-actions-v17 {
    width: 100%;
    justify-content: stretch;
  }

  .library-manager-heading-actions-v17 > button {
    flex: 1 1 180px;
  }

  .manual-game-modal-v17 {
    padding: 10px;
    align-items: end;
  }

  .manual-game-panel-v17 {
    max-height: calc(100vh - 20px);
    border-radius: 24px 24px 16px 16px;
    padding: 24px 18px;
  }

  .manual-game-form-v17 {
    grid-template-columns: 1fr;
  }

  .manual-game-wide-v17 {
    grid-column: auto;
  }

  .manual-game-actions-v17 {
    flex-direction: column-reverse;
  }

  .manual-game-actions-v17 button {
    width: 100%;
  }
}

/* === END MANUAL_RECOMMENDED_GAMES_STYLES_V17 === */

/* === REVIEWER_FAVOURITES_MOBILE_SUGGESTIONS_STYLES_V18 === */

.reviewer-own-favourites-v18 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.reviewer-own-favourites-v18 section {
  min-width: 0;
}

.reviewer-own-favourites-v18 section > small {
  display: block;
  margin-bottom: 7px;
  color: #aeb9c8;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.reviewer-own-games-v16,
.reviewer-own-media-v18 {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.reviewer-own-media-v18 img,
.reviewer-own-media-v18 > span {
  width: 52px;
  height: 74px;
  flex: 0 0 52px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  object-fit: cover;
  background: rgba(255,255,255,.08);
}

.reviewer-own-media-v18 > span {
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 1000;
}

.game-suggestion-hero-button-v18 {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon title" "icon subtitle";
  align-items: center;
  gap: 2px 11px;
  margin-top: 12px;
  padding: 13px 16px;
  border: 1px solid rgba(7,17,29,.16);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(221,248,255,.94));
  color: #07111d;
  text-align: left;
  box-shadow: 0 14px 34px rgba(11,73,101,.16);
}

.game-suggestion-hero-button-v18 > span {
  grid-area: icon;
  font-size: 25px;
}

.game-suggestion-hero-button-v18 > strong {
  grid-area: title;
  font-size: 13px;
  font-weight: 1000;
}

.game-suggestion-hero-button-v18 > small {
  grid-area: subtitle;
  color: rgba(7,17,29,.64);
  font-size: 10px;
  font-weight: 800;
}

.game-suggestion-hero-button-v18:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(11,73,101,.22);
}

.reviewer-favourite-save-summary-v18 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid rgba(111,221,255,.23);
  border-radius: 14px;
  background: rgba(111,221,255,.08);
  color: #d9f7ff;
}

.reviewer-favourite-save-summary-v18 strong {
  font-size: 12px;
  font-weight: 1000;
}

.reviewer-favourite-save-summary-v18 span {
  color: #aab8ca;
  font-size: 11px;
  font-weight: 800;
}

.game-suggestion-modal-v18 {
  position: fixed;
  inset: 0;
  z-index: 16000;
  display: none;
  place-items: center;
  padding: 20px;
}

.game-suggestion-modal-v18.open {
  display: grid;
}

.game-suggestion-backdrop-v18 {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 15, .82);
  backdrop-filter: blur(12px);
}

.game-suggestion-panel-v18 {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100vh - 30px);
  overflow: auto;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(148, 208, 255, .24);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0, rgba(111,221,255,.18), transparent 35%),
    radial-gradient(circle at 0 100%, rgba(139,92,246,.18), transparent 35%),
    linear-gradient(155deg, #121b2b, #080d17 72%);
  color: #f8fafc;
  box-shadow: 0 36px 110px rgba(0,0,0,.62);
}

.game-suggestion-close-v18 {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  color: #fff;
  font-size: 27px;
  line-height: 1;
}

.game-suggestion-eyebrow-v18 {
  color: #7de3ff;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.game-suggestion-panel-v18 h2 {
  margin: 8px 0 8px;
  font-size: clamp(32px, 6vw, 54px);
  line-height: .95;
  letter-spacing: -.04em;
}

.game-suggestion-panel-v18 > p {
  max-width: 570px;
  margin: 0 0 24px;
  color: #b8c4d3;
  line-height: 1.55;
}

.game-suggestion-panel-v18 form,
.game-suggestion-panel-v18 label {
  display: grid;
  gap: 8px;
}

.game-suggestion-panel-v18 form {
  gap: 17px;
}

.game-suggestion-panel-v18 label {
  color: #ecf3fb;
  font-size: 12px;
  font-weight: 900;
}

.game-suggestion-panel-v18 label span {
  color: #8f9db0;
  font-weight: 700;
}

.game-suggestion-panel-v18 input,
.game-suggestion-panel-v18 select,
.game-suggestion-panel-v18 textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  padding: 13px 14px;
  background: rgba(0,0,0,.27);
  color: #fff;
  font: inherit;
}

.game-suggestion-panel-v18 textarea {
  min-height: 120px;
  resize: vertical;
}

.game-suggestion-row-v18 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.game-suggestion-note-v18 {
  padding: 12px 14px;
  border: 1px solid rgba(111,221,255,.16);
  border-radius: 13px;
  background: rgba(111,221,255,.07);
  color: #b9dce7;
  font-size: 11px;
  line-height: 1.45;
}

.game-suggestion-actions-v18 {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

body.game-suggestion-modal-open-v18 {
  overflow: hidden !important;
}

.game-suggestions-admin-v18 {
  grid-column: 1 / -1;
}

.game-suggestion-admin-heading-v18 {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.game-suggestion-admin-heading-v18 > div:first-child > span {
  color: #78e2ff;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.game-suggestion-admin-heading-v18 h2 {
  margin: 5px 0;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
}

.game-suggestion-admin-heading-v18 p {
  margin: 0;
  color: var(--muted);
}

#gameSuggestionAdminSummaryV18 {
  display: grid;
  justify-items: end;
  gap: 3px;
  padding: 12px 15px;
  border: 1px solid rgba(111,221,255,.2);
  border-radius: 15px;
  background: rgba(111,221,255,.07);
}

#gameSuggestionAdminSummaryV18 strong {
  color: #fff;
  font-size: 18px;
}

#gameSuggestionAdminSummaryV18 span {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 800;
}

.game-suggestion-admin-list-v18 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.game-suggestion-admin-card-v18 {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 17px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 19px;
  background:
    radial-gradient(circle at 100% 0, rgba(111,221,255,.1), transparent 34%),
    rgba(255,255,255,.035);
}

.game-suggestion-admin-card-v18.status-added {
  border-color: rgba(78, 221, 139, .28);
}

.game-suggestion-admin-card-v18.status-dismissed {
  opacity: .72;
}

.game-suggestion-admin-card-v18 header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.game-suggestion-admin-card-v18 header span {
  color: #7de3ff;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.game-suggestion-admin-card-v18 header h3 {
  margin: 5px 0 0;
  font-size: 21px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.game-suggestion-admin-card-v18 header small {
  color: #7f8b9d;
  font-size: 9px;
  text-align: right;
}

.game-suggestion-admin-meta-v18 {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.game-suggestion-admin-meta-v18 span {
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: #c4cfdd;
  font-size: 9px;
  font-weight: 850;
}

.game-suggestion-admin-card-v18 p {
  min-height: 50px;
  margin: 0;
  color: #dce4ef;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.game-suggestion-admin-card-v18 p.is-empty {
  color: #758196;
  font-style: italic;
}

.game-suggestion-admin-card-v18 footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.game-suggestion-admin-card-v18 footer button {
  flex: 1 1 120px;
  padding: 10px;
  box-shadow: none;
  font-size: 10px;
}

.game-suggestion-admin-empty-v18 {
  grid-column: 1 / -1;
  padding: 28px;
  border: 1px dashed rgba(255,255,255,.13);
  border-radius: 18px;
  color: var(--muted);
  text-align: center;
}

/* Final mobile containment. This block is intentionally last so older viewer
   layouts cannot force Safari into a wide min-content page. */
@media (max-width: 720px) {
  html,
  body.viewer-page,
  body.viewer-page.overlay-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  body.viewer-page,
  .viewer-page.overlay-page {
    display: block !important;
    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left)) !important;
  }

  .viewer-page *,
  .viewer-page *::before,
  .viewer-page *::after {
    box-sizing: border-box !important;
  }

  .viewer-page img,
  .viewer-page svg,
  .viewer-page video,
  .viewer-page canvas {
    max-width: 100%;
  }

  .viewer-page .viewer-about-shell,
  .viewer-page .viewer-howto-shell,
  .viewer-page .overlay-wrap,
  .viewer-page .viewer-about-card,
  .viewer-page .viewer-about-hero,
  .viewer-page .viewer-about-intro,
  .viewer-page .viewer-about-content,
  .viewer-page .viewer-about-block,
  .viewer-page .viewer-howto-card,
  .viewer-page .overlay-board,
  .viewer-page .tier-board,
  .viewer-page .tier-row,
  .viewer-page .tier-items,
  .viewer-page .reviewer-own-panel-v16,
  .viewer-page .reviewer-own-card-v16,
  .viewer-page .reviewer-own-join-v16,
  .viewer-page .reviewer-own-empty-v16,
  .viewer-page .community-leaderboard-v14 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .viewer-page .viewer-about-shell,
  .viewer-page .viewer-howto-shell,
  .viewer-page .overlay-wrap {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .viewer-page .viewer-about-card {
    display: block !important;
    overflow: hidden !important;
  }

  .viewer-page .viewer-about-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "photo" "intro" "reviewer" !important;
  }

  .viewer-page .viewer-about-photo-wrap {
    grid-area: photo !important;
  }

  .viewer-page .viewer-about-intro {
    grid-area: intro !important;
    overflow-wrap: anywhere;
  }

  .viewer-page .reviewer-own-panel-v16 {
    grid-area: reviewer !important;
    display: grid !important;
    align-content: start !important;
  }

  .viewer-page .viewer-about-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .viewer-page .viewer-about-block,
  .viewer-page .viewer-howto-card {
    overflow: hidden !important;
  }

  .viewer-page .viewer-about-block h2,
  .viewer-page .viewer-howto-card h2 {
    max-width: calc(100% - 20px) !important;
    white-space: normal !important;
  }

  .viewer-page .favourite-carousel,
  .viewer-page .movie-carousel,
  .viewer-page .tv-carousel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    contain: layout paint !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .viewer-page .favourite-carousel::before,
  .viewer-page .favourite-carousel::after,
  .viewer-page .movie-carousel::before,
  .viewer-page .movie-carousel::after,
  .viewer-page .tv-carousel::before,
  .viewer-page .tv-carousel::after {
    display: none !important;
  }

  .viewer-page .favourite-carousel-track,
  .viewer-page .movie-carousel-track,
  .viewer-page .tv-carousel-track {
    width: max-content !important;
    max-width: none !important;
    min-width: 100% !important;
    transform: none !important;
    animation: none !important;
    padding: 8px !important;
  }

  .viewer-page .favourite-card,
  .viewer-page .movie-card,
  .viewer-page .tv-card {
    width: clamp(92px, 29vw, 122px) !important;
    min-width: clamp(92px, 29vw, 122px) !important;
    flex: 0 0 clamp(92px, 29vw, 122px) !important;
    scroll-snap-align: start;
    border-radius: 14px !important;
  }

  .viewer-page .tier-items {
    overflow: hidden !important;
  }

  .viewer-page .game-chip,
  .viewer-page .game-chip img,
  .viewer-page .chip-art-wrap,
  .viewer-page .chip-art-wrap img {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .reviewer-own-favourites-v18 {
    grid-template-columns: 1fr !important;
  }

  .reviewer-own-card-v16 footer,
  .reviewer-own-join-v16 > div {
    width: 100% !important;
  }

  .game-suggestion-hero-button-v18 {
    margin-top: 10px;
  }

  .game-suggestion-modal-v18 {
    align-items: end;
    padding: 8px;
  }

  .game-suggestion-panel-v18 {
    width: 100%;
    max-height: calc(100dvh - 16px);
    padding: 24px 17px 18px;
    border-radius: 24px 24px 15px 15px;
  }

  .game-suggestion-row-v18 {
    grid-template-columns: 1fr;
  }

  .game-suggestion-actions-v18 {
    flex-direction: column-reverse;
  }

  .game-suggestion-actions-v18 button {
    width: 100%;
  }
}

@media (max-width: 1100px) {
  .game-suggestion-admin-list-v18 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .game-suggestion-admin-heading-v18 {
    align-items: stretch;
    flex-direction: column;
  }

  #gameSuggestionAdminSummaryV18 {
    justify-items: start;
  }

  .game-suggestion-admin-list-v18 {
    grid-template-columns: 1fr;
  }
}

/* === END REVIEWER_FAVOURITES_MOBILE_SUGGESTIONS_STYLES_V18 === */

/* === REVIEWER_FAVOURITES_RECOMMENDATION_POINTS_STYLES_V19 === */

.reviewer-sgdb-required-note {
  border-color: rgba(97, 218, 251, .2) !important;
  background: rgba(97, 218, 251, .08) !important;
  color: #c9f3ff !important;
}

.community-recommendation-rules-v19 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 13px 15px;
  border: 1px solid rgba(125, 227, 255, .18);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(125, 227, 255, .08), rgba(139, 92, 246, .08));
}

.community-recommendation-rules-v19 strong {
  margin-right: 4px;
  color: #e8f9ff;
  font-size: 11px;
  letter-spacing: .04em;
}

.community-recommendation-rules-v19 span,
.community-recommendation-stat-v19 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: #b9c7d8;
  font-size: 9px;
  font-weight: 800;
}

.community-recommendation-rules-v19 b,
.community-recommendation-stat-v19 b {
  color: #7de3ff;
}

/* The decorative white title pills used negative positioning. V18 then hid
 * overflow to contain mobile carousels, which clipped those titles. Keep the
 * carousel containment while putting mobile headings back in normal flow. */
@media (max-width: 720px) {
  .viewer-page .viewer-howto-shell {
    overflow: visible !important;
    padding-top: 8px !important;
  }

  .viewer-page .viewer-howto-card {
    overflow: visible !important;
    margin-top: 14px !important;
    padding-top: 18px !important;
  }

  .viewer-page .viewer-howto-card h2,
  .viewer-page .viewer-about-block h2 {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 13px !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  .viewer-page .viewer-howto-card h2 span,
  .viewer-page .viewer-about-block h2 span {
    position: static !important;
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 7px 13px !important;
    transform: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.05 !important;
  }

  .viewer-page .viewer-howto-steps,
  .viewer-page .viewer-howto-steps > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .community-recommendation-rules-v19 {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .community-recommendation-rules-v19 strong {
    grid-column: 1 / -1;
  }

  .community-recommendation-rules-v19 span {
    border-radius: 11px;
    white-space: normal;
  }
}

@media (max-width: 420px) {
  .community-recommendation-rules-v19 {
    grid-template-columns: 1fr;
  }
}

/* === END REVIEWER_FAVOURITES_RECOMMENDATION_POINTS_STYLES_V19 === */

/* === REVIEWER_FAVOURITES_SIMPLE_STYLES_V20 === */
.reviewer-favourite-slot-actions-v20 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

.reviewer-favourite-simple-v20 .reviewer-favourite-slot-placeholder {
  min-height: 260px;
}

.prominent-game-suggestion-v20 {
  width: min(1500px, calc(100% - 36px));
  margin: 34px auto;
  padding: 28px 30px;
  border: 1px solid rgba(125, 211, 252, 0.34);
  border-radius: 26px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  color: #f8fbff;
  background:
    radial-gradient(circle at 10% 10%, rgba(125, 211, 252, 0.23), transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(168, 85, 247, 0.2), transparent 38%),
    linear-gradient(135deg, rgba(17, 28, 49, 0.98), rgba(24, 23, 48, 0.98));
  box-shadow: 0 22px 60px rgba(5, 10, 28, 0.28);
  overflow: hidden;
}

.prominent-game-suggestion-icon-v20 {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  font-size: 34px;
  background: linear-gradient(145deg, rgba(125, 211, 252, 0.25), rgba(168, 85, 247, 0.28));
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.prominent-game-suggestion-copy-v20 span {
  display: block;
  margin-bottom: 5px;
  color: #7dd3fc;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.prominent-game-suggestion-copy-v20 h2 {
  margin: 0 0 7px;
  color: #fff;
  font-size: clamp(22px, 2vw, 34px);
  line-height: 1.06;
}

.prominent-game-suggestion-copy-v20 p {
  margin: 0;
  max-width: 760px;
  color: rgba(239, 246, 255, 0.78);
  font-size: 15px;
  line-height: 1.55;
}

.prominent-game-suggestion-v20 > button {
  min-width: 180px;
  padding: 15px 22px;
  border-radius: 999px;
  color: #07111f;
  background: linear-gradient(135deg, #7dd3fc, #c084fc);
  box-shadow: 0 12px 30px rgba(125, 211, 252, 0.22);
  font-weight: 950;
}

@media (max-width: 760px) {
  .prominent-game-suggestion-v20 {
    width: calc(100% - 20px);
    margin: 24px auto;
    padding: 22px 18px;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    border-radius: 22px;
  }

  .prominent-game-suggestion-icon-v20 {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    font-size: 27px;
  }

  .prominent-game-suggestion-copy-v20 h2 {
    font-size: 23px;
  }

  .prominent-game-suggestion-copy-v20 p {
    font-size: 14px;
  }

  .prominent-game-suggestion-v20 > button {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .reviewer-favourite-simple-v20 .reviewer-favourite-slot-placeholder {
    min-height: 210px;
  }
}
/* === END REVIEWER_FAVOURITES_SIMPLE_STYLES_V20 === */

/* === REVIEWER_ARTWORK_CARD_REELS_STYLES_V21 === */

/* Optional artwork buttons are back, but V20's simple slot model still owns
   the saved data. */
.reviewer-favourite-slot-actions-v21 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.reviewer-favourite-slot-actions-v21 .artwork {
  color: #fff !important;
  background: linear-gradient(135deg, #7657e8, #985cff) !important;
  border-color: rgba(190, 159, 255, 0.48) !important;
  box-shadow: 0 8px 18px rgba(118, 87, 232, 0.22);
}

/* Make the signed-in visitor's own reviewer card readable at a glance. */
@media (min-width: 900px) {
  .viewer-page .reviewer-own-card-v16 {
    min-height: 390px;
    padding: clamp(25px, 1.8vw, 34px);
    gap: 17px 26px;
    grid-template-columns: minmax(260px, 0.88fr) minmax(330px, 1.12fr);
    grid-template-areas:
      "kicker kicker"
      "identity favourites"
      "bio favourites"
      "stats stats"
      "session session";
    align-content: stretch;
  }

  .viewer-page .reviewer-own-card-v16 .reviewer-own-kicker-v16 {
    grid-area: kicker;
  }

  .viewer-page .reviewer-own-card-v16 > header {
    grid-area: identity;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-self: end;
  }

  .viewer-page .reviewer-own-avatar-v16 {
    width: 92px;
    height: 92px;
    border-radius: 25px;
  }

  .viewer-page .reviewer-own-card-v16 header small {
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .viewer-page .reviewer-own-card-v16 header h2 {
    margin-top: 6px;
    font-size: clamp(36px, 2.55vw, 52px);
    line-height: 0.92;
  }

  .viewer-page .reviewer-own-card-v16 header p {
    margin-top: 5px;
    font-size: 14px;
  }

  .viewer-page .reviewer-own-bio-v16 {
    grid-area: bio;
    min-height: 50px;
    margin: 0;
    align-self: start;
    font-size: 15px;
    line-height: 1.55;
    -webkit-line-clamp: 3;
  }

  .viewer-page .reviewer-own-favourites-v18 {
    grid-area: favourites;
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 17px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 22px;
    background: rgba(4, 9, 18, 0.38);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(6px);
  }

  .viewer-page .reviewer-own-favourites-v18 section {
    min-width: 0;
    align-content: end;
  }

  .viewer-page .reviewer-own-favourites-v18 section > small {
    margin-bottom: 9px;
    font-size: 10px;
    letter-spacing: 0.09em;
  }

  .viewer-page .reviewer-own-games-v16,
  .viewer-page .reviewer-own-media-v18 {
    gap: 11px;
  }

  .viewer-page .reviewer-own-games-v16 img,
  .viewer-page .reviewer-own-games-v16 > span,
  .viewer-page .reviewer-own-media-v18 img,
  .viewer-page .reviewer-own-media-v18 > span {
    width: clamp(62px, 4.3vw, 78px);
    height: clamp(88px, 6.1vw, 110px);
    flex: 0 0 clamp(62px, 4.3vw, 78px);
    border-radius: 13px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34);
  }

  .viewer-page .reviewer-own-card-v16 > footer {
    grid-area: stats;
    align-items: center;
    gap: 18px;
    padding-top: 2px;
  }

  .viewer-page .reviewer-own-card-v16 footer > div {
    min-width: 64px;
  }

  .viewer-page .reviewer-own-card-v16 footer strong {
    font-size: 28px;
  }

  .viewer-page .reviewer-own-card-v16 footer span {
    margin-top: 3px;
    font-size: 9px;
  }

  .viewer-page .reviewer-own-card-v16 footer button {
    min-height: 43px;
    padding: 11px 17px;
    font-size: 11px;
  }

  .viewer-page .reviewer-own-session-v16 {
    grid-area: session;
    font-size: 10px;
  }
}

@media (min-width: 1500px) {
  .viewer-page .viewer-about-hero {
    grid-template-columns: clamp(230px, 16vw, 340px) minmax(430px, 600px) minmax(620px, 1fr) !important;
  }
}

@media (max-width: 899px) {
  .viewer-page .reviewer-own-card-v16 {
    gap: 15px;
  }

  .viewer-page .reviewer-own-avatar-v16 {
    width: 82px;
    height: 82px;
  }

  .viewer-page .reviewer-own-card-v16 header h2 {
    font-size: clamp(31px, 8vw, 42px);
  }

  .viewer-page .reviewer-own-bio-v16 {
    font-size: 14px;
  }

  .reviewer-favourite-slot-actions-v21 {
    gap: 6px !important;
  }

  .reviewer-favourite-slot-actions-v21 button {
    padding-inline: 7px !important;
    font-size: 10px !important;
  }
}

/* Slow portrait reels behind the recommendation call-to-action. */
.prominent-game-suggestion-v21 {
  position: relative;
  isolation: isolate;
  min-height: clamp(390px, 38vw, 560px);
  padding: 0 !important;
  display: grid !important;
  place-items: center;
  overflow: hidden;
  background: #0b1322 !important;
  border-color: rgba(143, 214, 255, 0.38) !important;
}

.recommendation-reels-v21 {
  position: absolute;
  z-index: 0;
  inset: -17% -4%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 18px);
  opacity: 0.42;
  transform: rotate(-2.5deg) scale(1.08);
  filter: saturate(0.92) contrast(1.03);
  pointer-events: none;
}

.recommendation-reel-v21 {
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.recommendation-reel-track-v21 {
  display: grid;
  gap: clamp(10px, 1vw, 17px);
  will-change: transform;
  animation: recommendation-reel-up-v21 78s linear infinite;
}

.recommendation-reel-v21:nth-child(even) .recommendation-reel-track-v21 {
  animation-name: recommendation-reel-down-v21;
  animation-duration: 92s;
}

.recommendation-reel-v21:nth-child(3n) .recommendation-reel-track-v21 {
  animation-duration: 106s;
}

.recommendation-reel-card-v21 {
  position: relative;
  margin: 0;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: clamp(12px, 1vw, 18px);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.34);
}

.recommendation-reel-card-v21 img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.recommendation-reel-card-v21 figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 8px 7px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.88);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.86));
  font-size: 9px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recommendation-reels-shade-v21 {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(9, 18, 35, 0.2), rgba(9, 18, 35, 0.82) 58%, rgba(5, 10, 20, 0.97) 100%),
    linear-gradient(90deg, rgba(5, 10, 20, 0.82), transparent 28%, transparent 72%, rgba(5, 10, 20, 0.82));
  pointer-events: none;
}

.prominent-game-suggestion-content-v21 {
  position: relative;
  z-index: 2;
  width: min(820px, calc(100% - 44px));
  margin: 38px auto;
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 30px;
  color: #fff;
  background: linear-gradient(145deg, rgba(8, 16, 31, 0.88), rgba(25, 20, 48, 0.83));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  text-align: center;
  backdrop-filter: blur(12px);
}

.prominent-game-suggestion-icon-v21 {
  width: 72px;
  height: 72px;
  margin: 0 auto 15px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(125, 211, 252, 0.28), rgba(192, 132, 252, 0.3));
  box-shadow: 0 14px 35px rgba(95, 181, 255, 0.18);
  font-size: 34px;
}

.prominent-game-suggestion-eyebrow-v21 {
  display: block;
  margin-bottom: 7px;
  color: #8be4ff;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.prominent-game-suggestion-content-v21 h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 3vw, 48px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.prominent-game-suggestion-content-v21 > p {
  max-width: 680px;
  margin: 15px auto 0;
  color: rgba(235, 244, 255, 0.82);
  font-size: 16px;
  line-height: 1.58;
}

.recommendation-points-v21 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 22px 0;
}

.recommendation-points-v21 span {
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: rgba(237, 245, 255, 0.86);
  background: rgba(255, 255, 255, 0.075);
  font-size: 11px;
  font-weight: 850;
}

.recommendation-points-v21 b {
  color: #91e7ff;
  font-size: 13px;
}

.prominent-game-suggestion-content-v21 > button {
  min-width: 210px;
  min-height: 50px;
  padding: 14px 24px;
  border: 0;
  border-radius: 999px;
  color: #07111f;
  background: linear-gradient(135deg, #82ddff, #c68cff);
  box-shadow: 0 15px 36px rgba(115, 205, 255, 0.25);
  font-size: 14px;
  font-weight: 1000;
  cursor: pointer;
}

@keyframes recommendation-reel-up-v21 {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -50%, 0); }
}

@keyframes recommendation-reel-down-v21 {
  from { transform: translate3d(0, -50%, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@media (max-width: 760px) {
  .prominent-game-suggestion-v21 {
    min-height: 470px;
  }

  .recommendation-reels-v21 {
    inset: -10% -12%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    opacity: 0.34;
    transform: rotate(-2deg) scale(1.09);
  }

  .recommendation-reel-v21:nth-child(n + 5) {
    display: none;
  }

  .prominent-game-suggestion-content-v21 {
    width: calc(100% - 28px);
    margin: 26px auto;
    padding: 27px 18px;
    border-radius: 24px;
  }

  .prominent-game-suggestion-content-v21 h2 {
    font-size: 31px;
  }

  .prominent-game-suggestion-content-v21 > p {
    font-size: 14px;
  }

  .recommendation-points-v21 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recommendation-points-v21 span {
    text-align: center;
  }

  .prominent-game-suggestion-content-v21 > button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recommendation-reel-track-v21 {
    animation: none !important;
    transform: translateY(-18%);
  }
}

/* === END REVIEWER_ARTWORK_CARD_REELS_STYLES_V21 === */

/* === REVIEWER_HERO_LIBRARY_REELS_STYLES_V22 === */

/* Make the signed-in viewer card cleaner, larger and easier to scan. */
@media (min-width: 1200px) {
  .viewer-page .viewer-about-hero {
    grid-template-columns: clamp(230px, 16vw, 340px) minmax(420px, 560px) minmax(780px, 1.3fr) !important;
    gap: clamp(28px, 2vw, 42px) !important;
    align-items: start !important;
  }

  .viewer-page .reviewer-own-card-v16 {
    min-height: 430px;
    padding: clamp(28px, 1.9vw, 38px);
    gap: 18px 28px;
    grid-template-columns: minmax(290px, 0.9fr) minmax(410px, 1.1fr);
    grid-template-areas:
      "kicker kicker"
      "identity favourites"
      "bio favourites"
      "stats stats"
      "session session";
  }

  .viewer-page .reviewer-own-favourites-v18 {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(4, 8, 16, 0.56), rgba(14, 20, 34, 0.42));
  }

  .viewer-page .reviewer-own-favourites-v18 section {
    padding: 13px 14px 14px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 18px;
    background: rgba(255,255,255,.035);
  }

  .viewer-page .reviewer-own-favourites-v18 section > small {
    display: block;
    margin-bottom: 11px;
    color: #d3f6ff;
    font-size: 12px;
    font-weight: 1000;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .viewer-page .reviewer-own-games-v16,
  .viewer-page .reviewer-own-media-v18 {
    gap: 13px;
    flex-wrap: nowrap;
  }

  .viewer-page .reviewer-own-games-v16 img,
  .viewer-page .reviewer-own-games-v16 > span,
  .viewer-page .reviewer-own-media-v18 img,
  .viewer-page .reviewer-own-media-v18 > span {
    width: clamp(82px, 5vw, 96px);
    height: clamp(116px, 7vw, 134px);
    flex: 0 0 clamp(82px, 5vw, 96px);
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 14px 28px rgba(0,0,0,.34);
  }

  .viewer-page .reviewer-own-card-v16 > footer {
    gap: 18px;
  }

  .viewer-page .reviewer-own-card-v16 footer strong { font-size: 30px; }
  .viewer-page .reviewer-own-card-v16 footer span { font-size: 9px; }
}

@media (max-width: 1199px) {
  .viewer-page .reviewer-own-favourites-v18 section > small {
    display: block;
    margin-bottom: 8px;
    color: #d3f6ff;
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .viewer-page .reviewer-own-games-v16 img,
  .viewer-page .reviewer-own-games-v16 > span,
  .viewer-page .reviewer-own-media-v18 img,
  .viewer-page .reviewer-own-media-v18 > span {
    width: clamp(76px, 20vw, 90px);
    height: clamp(108px, 27vw, 126px);
    flex: 0 0 clamp(76px, 20vw, 90px);
  }
}

/* Widen the recommendation section and show more of the library with less
 * immediate repetition. */
.prominent-game-suggestion-v22 {
  width: calc(100% - 36px);
  max-width: none;
  min-height: clamp(420px, 42vw, 600px);
}

.recommendation-reels-v22 {
  inset: -12% -2%;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(10px, .9vw, 16px);
  opacity: .44;
  transform: rotate(-2deg) scale(1.04);
}

.recommendation-reels-v22 .recommendation-reel-track-v21 {
  animation-duration: var(--recommendation-reel-duration-v22, 120s);
}

.recommendation-reels-v22 .recommendation-reel-v21:nth-child(even) .recommendation-reel-track-v21 {
  animation-duration: calc(var(--recommendation-reel-duration-v22, 120s) + 16s);
}

.prominent-game-suggestion-content-v22 {
  width: min(980px, calc(100% - 48px));
}

@media (max-width: 900px) {
  .prominent-game-suggestion-v22 {
    width: calc(100% - 20px);
  }

  .recommendation-reels-v22 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    inset: -8% -10%;
    opacity: .36;
  }

  .recommendation-reels-v22 .recommendation-reel-v21:nth-child(n + 5) {
    display: none;
  }

  .prominent-game-suggestion-content-v22 {
    width: calc(100% - 26px);
  }
}

/* === END REVIEWER_HERO_LIBRARY_REELS_STYLES_V22 === */

/* === VIEWER_COMMUNITY_EXPERIENCE_STYLES_V24 === */

.game-suggestion-hero-button-v18,
#viewerTabsV23,
#viewerTabHostV23,
#viewerTabsV22B,
#prominentGameSuggestionV20:not(.prominent-game-suggestion-v22) {
  display: none !important;
}

.viewer-tabs-loading-v24 > .viewer-about-shell,
.viewer-tabs-loading-v24 > .viewer-howto-shell,
.viewer-tabs-loading-v24 > .overlay-wrap {
  visibility: hidden;
  opacity: 0;
}

.viewer-tabs-v24 {
  width: min(1960px, calc(100% - 36px));
  margin: 18px auto 14px;
  position: sticky;
  top: 10px;
  z-index: 70;
}

.viewer-tabs-row-v24 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(118, 198, 235, .25);
  border-radius: 22px;
  background: rgba(9, 17, 31, .88);
  box-shadow: 0 17px 44px rgba(4, 9, 20, .28);
  backdrop-filter: blur(14px);
}

.viewer-tabs-row-v24 button {
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 15px;
  color: rgba(239, 246, 255, .84);
  background: rgba(255, 255, 255, .055);
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.viewer-tabs-row-v24 button.is-active {
  color: #08111e;
  border-color: transparent;
  background: linear-gradient(135deg, #7dd3fc, #c084fc);
  box-shadow: 0 10px 27px rgba(125, 211, 252, .24);
}

.viewer-tab-host-v24,
.viewer-tab-panel-v24 {
  width: 100%;
  min-width: 0;
}

.viewer-tab-panel-v24[hidden] {
  display: none !important;
}

.viewer-tab-panel-v24 > .viewer-about-shell,
.viewer-tab-panel-v24 > .viewer-howto-shell,
.viewer-tab-panel-v24 > .overlay-wrap,
.viewer-tab-panel-v24 > .community-tierlist-section,
.viewer-tab-panel-v24 > .reviewer-members-section,
.viewer-tab-panel-v24 > .community-leaderboard-section,
.viewer-tab-panel-v24 > .prominent-game-suggestion-v22 {
  margin-top: 0 !important;
}

/* Tier Lists owns both Kyle's board and the community board. */
.viewer-tab-panel-v24[data-panel="tierlists"] > .community-tierlist-section {
  width: min(1960px, calc(100% - 36px));
  margin: 28px auto 42px !important;
}

/* Recommend fills the available screen below the tab navigation. */
body[data-viewer-tab-v24="recommend"] {
  height: 100dvh;
  overflow: hidden;
}

body[data-viewer-tab-v24="recommend"] .viewer-tabs-v24 {
  margin-bottom: 12px;
}

body[data-viewer-tab-v24="recommend"] #viewerTabHostV24,
body[data-viewer-tab-v24="recommend"] .viewer-tab-panel-v24[data-panel="recommend"] {
  height: calc(100dvh - 102px);
  min-height: 0;
  overflow: hidden;
}

body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-v22 {
  width: calc(100% - 36px) !important;
  height: calc(100% - 14px) !important;
  min-height: 0 !important;
  margin: 0 auto 14px !important;
  border-radius: 28px;
}

body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-content-v21 {
  max-height: calc(100% - 46px);
  overflow: auto;
}

/* The full-library portrait background is intentionally slow and ambient. */
.recommendation-reels-v22 .recommendation-reel-track-v21 {
  animation-duration: var(--recommendation-reel-duration-v22, 360s) !important;
}

.recommendation-reels-v22 .recommendation-reel-v21:nth-child(even) .recommendation-reel-track-v21 {
  animation-duration: calc(var(--recommendation-reel-duration-v22, 360s) + 32s) !important;
}

/* Community Hub */
.community-hub-v24 {
  width: min(1960px, calc(100% - 36px));
  margin: 0 auto 28px;
  display: grid;
  gap: 22px;
}

.community-hub-header-v24 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px;
  padding: clamp(26px, 3vw, 44px);
  border: 1px solid rgba(125, 211, 252, .25);
  border-radius: 30px;
  color: #f8fbff;
  background:
    radial-gradient(circle at 8% 0%, rgba(88, 210, 255, .22), transparent 36%),
    radial-gradient(circle at 92% 0%, rgba(192, 132, 252, .21), transparent 35%),
    linear-gradient(135deg, rgba(12, 24, 43, .98), rgba(27, 21, 52, .98));
  box-shadow: 0 24px 70px rgba(3, 8, 20, .25);
}

.community-hub-header-v24 > div:first-child > span,
.recent-reviews-heading-v24 span {
  display: block;
  margin-bottom: 7px;
  color: #8be4ff;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.community-hub-header-v24 h1 {
  margin: 0;
  font-size: clamp(38px, 4vw, 68px);
  line-height: .95;
  letter-spacing: -.045em;
}

.community-hub-header-v24 p {
  max-width: 780px;
  margin: 13px 0 0;
  color: rgba(235, 244, 255, .78);
  font-size: 16px;
  line-height: 1.55;
}

.community-pulse-v24 {
  display: grid;
  grid-template-columns: repeat(3, minmax(112px, 1fr));
  gap: 10px;
}

.community-pulse-v24 > div {
  min-width: 112px;
  padding: 17px 18px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 19px;
  background: rgba(255,255,255,.06);
  text-align: center;
}

.community-pulse-v24 strong {
  display: block;
  font-size: 29px;
  line-height: 1;
}

.community-pulse-v24 span {
  display: block;
  margin-top: 5px;
  color: rgba(225, 235, 246, .7);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.community-competition-v24 {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 18px;
}

.community-champion-v24,
.community-quest-v24 {
  position: relative;
  overflow: hidden;
  padding: 25px 27px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 25px;
  color: #f8fbff;
  background: linear-gradient(145deg, rgba(18, 26, 44, .98), rgba(18, 18, 35, .98));
  box-shadow: 0 18px 50px rgba(3, 8, 20, .18);
}

.community-champion-v24::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 10%, rgba(255, 207, 79, .23), transparent 45%);
  pointer-events: none;
}

.community-champion-v24 > *,
.community-quest-v24 > * {
  position: relative;
}

.community-champion-v24 > span,
.community-quest-v24 > span {
  display: block;
  color: #ffd878;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.community-champion-v24 > strong {
  display: block;
  margin-top: 10px;
  font-size: clamp(28px, 2.6vw, 44px);
  line-height: 1;
}

.community-champion-v24 p {
  margin: 10px 0 19px;
  color: rgba(235, 244, 255, .75);
  line-height: 1.5;
}

.community-champion-v24 button,
.community-quest-v24 button {
  min-height: 42px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  color: #07111f;
  background: linear-gradient(135deg, #7dd3fc, #c084fc);
  font-weight: 1000;
  cursor: pointer;
}

.community-quest-v24 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 12px;
}

.community-quest-v24 > span,
.community-quest-v24 > button {
  grid-column: 1 / -1;
  justify-self: start;
}

.community-quest-v24 > div {
  min-height: 88px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
}

.community-quest-v24 b,
.community-quest-v24 small {
  display: block;
}

.community-quest-v24 b {
  color: #fff;
  font-size: 13px;
}

.community-quest-v24 small {
  margin-top: 5px;
  color: rgba(226, 236, 247, .65);
  line-height: 1.4;
}

.recent-reviews-v24 {
  padding: clamp(22px, 2.3vw, 34px) 0 28px;
  overflow: hidden;
  border: 1px solid rgba(125, 211, 252, .2);
  border-radius: 28px;
  background: linear-gradient(150deg, rgba(10, 19, 34, .98), rgba(16, 18, 34, .98));
}

.recent-reviews-heading-v24 {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  padding: 0 clamp(22px, 2.3vw, 34px) 21px;
}

.recent-reviews-heading-v24 h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1;
}

.recent-reviews-heading-v24 p {
  margin: 8px 0 0;
  color: rgba(229, 239, 250, .68);
}

.recent-review-controls-v24 {
  display: flex;
  gap: 8px;
}

.recent-review-controls-v24 button {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.07);
  font-size: 28px;
  cursor: pointer;
}

.recent-review-track-v24 {
  display: flex;
  gap: 18px;
  padding: 12px max(22px, calc((100vw - min(1960px, 100vw - 36px)) / 2 + 22px)) 24px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 50%;
  scrollbar-width: none;
}

.recent-review-track-v24::-webkit-scrollbar { display: none; }

.recent-review-card-v24 {
  flex: 0 0 min(680px, 68vw);
  min-height: 290px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  overflow: hidden;
  scroll-snap-align: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  color: #f8fbff;
  background: rgba(255,255,255,.045);
  box-shadow: 0 15px 40px rgba(0,0,0,.22);
  opacity: .5;
  transform: scale(.9);
  transition: transform .5s ease, opacity .5s ease, border-color .5s ease, box-shadow .5s ease;
  cursor: pointer;
}

.recent-review-card-v24.is-focused {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(125, 211, 252, .45);
  box-shadow: 0 22px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(192,132,252,.14);
}

.recent-review-art-v24 {
  position: relative;
  min-height: 290px;
  overflow: hidden;
  background: #080e18;
}

.recent-review-art-v24 img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.recent-review-art-v24::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 50%, rgba(0,0,0,.88));
}

.recent-review-art-v24 > span {
  position: absolute;
  z-index: 1;
  left: 13px;
  right: 13px;
  bottom: 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
}

.recent-review-no-art-v24 {
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 50px;
}

.recent-review-copy-v24 {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.recent-review-reviewer-v24 {
  width: max-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.recent-review-reviewer-v24:disabled { cursor: default; }

.recent-review-reviewer-v24 > img,
.recent-review-reviewer-v24 > span:first-child {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 15px;
  object-fit: cover;
  background: linear-gradient(145deg, #3b506e, #69528c);
  font-weight: 1000;
}

.recent-review-reviewer-v24 strong,
.recent-review-reviewer-v24 small {
  display: block;
}

.recent-review-reviewer-v24 strong { font-size: 16px; }
.recent-review-reviewer-v24 small { margin-top: 2px; color: #8be4ff; font-size: 10px; font-weight: 900; }

.recent-review-badges-v24 {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 17px 0;
}

.recent-review-badges-v24 > * {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: rgba(235, 244, 255, .82);
  background: rgba(255,255,255,.06);
  font-size: 10px;
  font-style: normal;
}

.recent-review-copy-v24 blockquote {
  margin: 0;
  color: #fff;
  font-size: clamp(16px, 1.35vw, 21px);
  font-weight: 750;
  line-height: 1.48;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.recent-review-open-v24 {
  margin-top: auto;
  padding-top: 16px;
  color: #8be4ff;
  font-weight: 900;
}

.recent-review-progress-v24 {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0 20px;
}

.recent-review-progress-v24 button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.2);
  transition: width .25s ease, background .25s ease;
  cursor: pointer;
}

.recent-review-progress-v24 button.is-active {
  width: 28px;
  background: linear-gradient(90deg, #7dd3fc, #c084fc);
}

.recent-review-empty-v24 {
  width: 100%;
  min-height: 180px;
  display: grid;
  place-content: center;
  text-align: center;
  color: #fff;
}

.recent-review-empty-v24 span { margin-top: 5px; color: rgba(235,244,255,.65); }

/* More playful, interactive reviewer roster. */
.community-reviewer-roster-v24 {
  width: min(1960px, calc(100% - 36px));
  margin: 0 auto 42px !important;
  padding: clamp(24px, 2.5vw, 38px);
  border: 1px solid rgba(192, 132, 252, .2);
  border-radius: 30px;
  background:
    radial-gradient(circle at 85% 0%, rgba(192,132,252,.14), transparent 35%),
    linear-gradient(145deg, rgba(12,20,35,.98), rgba(19,17,36,.98));
}

.community-reviewer-roster-v24 .reviewer-members-grid {
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 16px;
}

.community-reviewer-roster-v24 .reviewer-member-card {
  position: relative;
  min-height: 285px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  background-color: rgba(255,255,255,.045);
  background-size: cover;
  background-position: center;
  box-shadow: 0 16px 40px rgba(0,0,0,.2);
  transform: translateY(0);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.community-reviewer-roster-v24 .reviewer-member-card::before {
  content: '#' attr(data-community-number-v24);
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: rgba(255,255,255,.7);
  background: rgba(5,10,20,.45);
  font-size: 9px;
  font-weight: 1000;
}

.community-reviewer-roster-v24 .reviewer-member-card:hover,
.community-reviewer-roster-v24 .reviewer-member-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(125,211,252,.38);
  box-shadow: 0 23px 55px rgba(0,0,0,.32), 0 0 0 1px rgba(192,132,252,.13);
}

.reviewer-profile-open-v24 {
  display: block;
  margin-top: auto;
  padding-top: 12px;
  color: #8be4ff;
  font-size: 11px;
  font-weight: 1000;
}

@media (max-width: 1000px) {
  .community-hub-header-v24,
  .community-competition-v24 {
    grid-template-columns: 1fr;
  }

  .community-pulse-v24 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .community-quest-v24 { grid-template-columns: 1fr; }
  .community-quest-v24 > span,
  .community-quest-v24 > button { grid-column: auto; }
}

@media (max-width: 900px) {
  .viewer-tabs-v24 {
    width: calc(100% - 18px);
    top: 6px;
    margin: 9px auto 10px;
  }

  .viewer-tabs-row-v24 {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 9px;
  }

  .viewer-tabs-row-v24::-webkit-scrollbar { display: none; }

  .viewer-tabs-row-v24 button {
    flex: 0 0 auto;
    min-width: 118px;
    min-height: 42px;
    scroll-snap-align: start;
    font-size: 12px;
  }

  body[data-viewer-tab-v24="recommend"] #viewerTabHostV24,
  body[data-viewer-tab-v24="recommend"] .viewer-tab-panel-v24[data-panel="recommend"] {
    height: calc(100dvh - 78px);
  }

  body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-v22 {
    width: calc(100% - 18px) !important;
    height: calc(100% - 8px) !important;
    margin-bottom: 8px !important;
    border-radius: 22px;
  }

  .community-hub-v24,
  .community-reviewer-roster-v24,
  .viewer-tab-panel-v24[data-panel="tierlists"] > .community-tierlist-section {
    width: calc(100% - 18px);
  }

  .community-hub-header-v24 { padding: 25px 20px; }
  .community-pulse-v24 { gap: 7px; }
  .community-pulse-v24 > div { min-width: 0; padding: 13px 8px; }
  .community-pulse-v24 strong { font-size: 23px; }
  .community-pulse-v24 span { font-size: 8px; }

  .recent-reviews-heading-v24 {
    align-items: start;
    padding-inline: 18px;
  }

  .recent-review-card-v24 {
    flex-basis: min(87vw, 590px);
    grid-template-columns: 135px minmax(0, 1fr);
    min-height: 250px;
  }

  .recent-review-art-v24 { min-height: 250px; }
  .recent-review-copy-v24 { padding: 17px; }
}

@media (max-width: 560px) {
  .community-pulse-v24 { grid-template-columns: 1fr; }
  .recent-review-controls-v24 { display: none; }
  .recent-review-card-v24 {
    flex-basis: calc(100vw - 44px);
    grid-template-columns: 105px minmax(0, 1fr);
    min-height: 230px;
  }
  .recent-review-art-v24 { min-height: 230px; }
  .recent-review-copy-v24 blockquote { font-size: 14px; -webkit-line-clamp: 5; }
  .recent-review-reviewer-v24 > img,
  .recent-review-reviewer-v24 > span:first-child { width: 40px; height: 40px; flex-basis: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .recent-review-card-v24 { transition: none; }
}

/* === END VIEWER_COMMUNITY_EXPERIENCE_STYLES_V24 === */

/* === VIEWER_CONSOLIDATED_SAFE_POLISH_STYLES_V27 === */

/* This final layer intentionally contains no keyframe animation, no repeating
   reveal, no DOM replacement, and no layout timers. */

/* Overview hero spacing. */
.viewer-page .viewer-about-intro {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  min-width: 0 !important;
  padding-block: clamp(4px, .6vw, 10px) !important;
}

.viewer-page .viewer-about-kicker {
  margin: 0 0 clamp(10px, .75vw, 15px) !important;
  line-height: 1.15 !important;
}

.viewer-page .viewer-about-intro h1 {
  margin: 0 !important;
  line-height: .86 !important;
}

.viewer-page .viewer-about-handle {
  margin: clamp(11px, .9vw, 16px) 0 0 !important;
  line-height: 1 !important;
}

.viewer-page .viewer-about-socials {
  margin-top: clamp(19px, 1.35vw, 26px) !important;
}

.viewer-page .viewer-skip-button {
  margin-top: clamp(17px, 1.2vw, 23px) !important;
}

/* Community reviewer cards: more readable without becoming oversized. */
.community-reviewer-roster-v24 .reviewer-members-grid {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 20px;
}

.community-reviewer-roster-v24 .reviewer-member-card {
  min-height: 320px;
  padding: 24px;
  gap: 17px;
  border-radius: 24px;
}

.community-reviewer-roster-v24 .reviewer-member-head {
  gap: 15px;
  padding-right: 48px;
}

.community-reviewer-roster-v24 .reviewer-member-avatar {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 18px;
}

.community-reviewer-roster-v24 .reviewer-member-head strong {
  font-size: clamp(21px, 1.35vw, 27px);
  line-height: 1.06;
}

.community-reviewer-roster-v24 .reviewer-level-badge,
.community-reviewer-roster-v24 .reviewer-member-head span {
  font-size: 11px;
}

.community-reviewer-roster-v24 .reviewer-member-card > p {
  min-height: 3.1em;
  font-size: 15px;
  line-height: 1.52;
  -webkit-line-clamp: 3;
}

.community-reviewer-roster-v24 .reviewer-member-games {
  min-height: 104px;
  gap: 11px;
}

.community-reviewer-roster-v24 .reviewer-member-games img,
.community-reviewer-roster-v24 .reviewer-member-games > span {
  width: 68px;
  height: 100px;
  border-radius: 12px;
}

.community-reviewer-roster-v24 .reviewer-member-stats {
  gap: 9px;
}

.community-reviewer-roster-v24 .reviewer-member-stats span {
  padding: 8px 11px;
  font-size: 12px;
}

.community-reviewer-roster-v24 .reviewer-member-stats b {
  font-size: 13px;
}

.community-reviewer-roster-v24 .reviewer-profile-open-v24 {
  padding-top: 14px;
  font-size: 13px;
}

/* Hover is user-triggered only. Nothing moves automatically. */
@media (hover: hover) {
  .viewer-page .viewer-about-photo-wrap,
  .community-reviewer-roster-v24 .reviewer-member-card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }

  .viewer-page .viewer-about-photo-wrap:hover {
    transform: translateY(-3px) rotate(.35deg);
  }

  .community-reviewer-roster-v24 .reviewer-member-card:hover,
  .community-reviewer-roster-v24 .reviewer-member-card:focus-visible {
    transform: translateY(-3px);
  }
}

@media (max-width: 900px) {
  .viewer-page .viewer-about-intro {
    align-items: center !important;
    text-align: center !important;
  }

  .viewer-page .viewer-about-socials {
    justify-content: center !important;
  }

  .community-reviewer-roster-v24 .reviewer-members-grid {
    grid-template-columns: 1fr;
  }

  .viewer-tab-panel-v24[data-panel="tierlists"]::before,
  .viewer-tab-panel-v24[data-panel="community"]::before {
    height: 340px;
    opacity: .12;
    background-size:
      100% 100%,
      100% 100%,
      92px 138px,
      92px 138px,
      92px 138px,
      92px 138px,
      92px 138px,
      92px 138px;
    background-position:
      center,
      center,
      30% 20px,
      49% 72px,
      68% 12px,
      87% 66px,
      106% 20px,
      125% 76px;
  }
}

@media (max-width: 560px) {
  .community-reviewer-roster-v24 .reviewer-member-card {
    min-height: 0;
    padding: 20px;
  }

  .community-reviewer-roster-v24 .reviewer-member-avatar {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }

  .community-reviewer-roster-v24 .reviewer-member-head strong {
    font-size: 21px;
  }

  .community-reviewer-roster-v24 .reviewer-member-games img,
  .community-reviewer-roster-v24 .reviewer-member-games > span {
    width: 62px;
    height: 92px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .viewer-page .viewer-about-photo-wrap,
  .community-reviewer-roster-v24 .reviewer-member-card {
    transition: none !important;
    transform: none !important;
  }
}

/* === END VIEWER_CONSOLIDATED_SAFE_POLISH_STYLES_V27 === */

/* === VIEWER_FIREFOX_TIER_SCALING_STYLES_V28 === */

/* Firefox and DuckDuckGo must never allow the horizontal recent-review rail
   to anchor or move the document's vertical scrollbar. */
#recentReviewTrackV24 {
  overflow-anchor: none !important;
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: none !important;
  scroll-snap-type: x proximity !important;
}

#recentReviewTrackV24 .recent-review-card-v24 {
  overflow-anchor: none !important;
}

/* A stable gutter prevents the page width changing when Firefox shows or
   hides its scrollbar. */
html:has(body.viewer-page) {
  scrollbar-gutter: stable;
}

body.viewer-page {
  overflow-anchor: auto;
}

/* Remove the old reserved OBS-style space from the public Tier Lists tab. */
body[data-viewer-tab-v24="tierlists"] .viewer-tab-panel-v24[data-panel="tierlists"] > .overlay-wrap {
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 0 !important;
  margin-bottom: 28px !important;
}

body[data-viewer-tab-v24="tierlists"] .viewer-tab-panel-v24[data-panel="tierlists"] .overlay-board {
  min-height: 0 !important;
  height: auto !important;
}

body[data-viewer-tab-v24="tierlists"] .viewer-tab-panel-v24[data-panel="tierlists"] .tier-board {
  align-content: start !important;
}

/* Ranked games use an auto-fitting portrait grid. New games wrap onto new
   rows and each tier grows naturally instead of overflowing or leaving a
   fixed empty area. */
.viewer-page .tier-row,
.viewer-page .community-tier-row {
  height: auto !important;
  align-items: stretch !important;
}

.viewer-page .tier-items {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(clamp(102px, 7vw, 144px), 1fr)) !important;
  align-content: start !important;
  align-items: start !important;
  justify-items: center !important;
  overflow: visible !important;
}

.viewer-page .tier-items .game-chip {
  width: 100% !important;
  max-width: 158px !important;
  min-width: 0 !important;
}

.viewer-page .tier-items .game-chip img,
.viewer-page .tier-items .chip-art-wrap,
.viewer-page .tier-items .chip-art-wrap img {
  width: 100% !important;
  max-width: 158px !important;
  height: auto !important;
  aspect-ratio: 2 / 3 !important;
  object-fit: cover !important;
}

.viewer-page .tier-items .small-title {
  width: 100% !important;
  overflow-wrap: anywhere;
}

/* === END VIEWER_FIREFOX_TIER_SCALING_STYLES_V28 === */

/* === FULL_TAB_BACKDROPS_AND_SUGGESTION_PICKER_STYLES_V29 === */

/* Search-first game recommendation modal. */
.game-suggestion-panel-v29 {
  width: min(1040px, calc(100vw - 30px));
  max-height: min(900px, calc(100dvh - 30px));
  overflow-y: auto;
}

.game-suggestion-search-label-v29 {
  display: grid;
  gap: 8px;
}

.game-suggestion-search-row-v29 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.game-suggestion-search-row-v29 input {
  min-width: 0;
}

.game-suggestion-search-row-v29 button {
  min-width: 110px;
  border: 0;
  border-radius: 13px;
  padding: 0 18px;
  color: #07111f;
  background: linear-gradient(135deg, #79d8ff, #bc89ff);
  font-weight: 950;
  cursor: pointer;
}

.game-suggestion-results-v29 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 11px;
  max-height: 390px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
}

.game-suggestion-result-card-v29 {
  min-width: 0;
  min-height: 142px;
  padding: 9px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 17px;
  color: #f7fbff;
  background: rgba(255, 255, 255, .055);
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}

.game-suggestion-result-card-v29:hover,
.game-suggestion-result-card-v29:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(126, 222, 255, .62);
  background: rgba(125, 211, 252, .11);
  outline: none;
}

.game-suggestion-result-card-v29 img {
  width: 82px;
  height: 123px;
  object-fit: cover;
  border-radius: 11px;
  background: #080d16;
}

.game-suggestion-result-card-v29 > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
}

.game-suggestion-result-card-v29 strong {
  max-width: 100%;
  font-size: 15px;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.game-suggestion-result-card-v29 small {
  color: #abb8ca;
  font-size: 11px;
  line-height: 1.4;
}

.game-suggestion-result-card-v29 b {
  margin-top: auto;
  color: #84e4ff;
  font-size: 11px;
}

.game-suggestion-search-status-v29 {
  grid-column: 1 / -1;
  min-height: 88px;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px dashed rgba(255, 255, 255, .13);
  border-radius: 15px;
  color: #aebacd;
  text-align: center;
  background: rgba(255, 255, 255, .025);
}

.game-suggestion-search-status-v29.is-error {
  color: #ffbec6;
  border-color: rgba(255, 105, 125, .28);
}

.game-suggestion-selected-v29 {
  min-height: 112px;
}

.game-suggestion-selected-empty-v29 {
  min-height: 106px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  padding: 16px;
  border: 1px dashed rgba(255, 255, 255, .13);
  border-radius: 17px;
  color: #aebacd;
  text-align: center;
  background: rgba(255, 255, 255, .025);
}

.game-suggestion-selected-empty-v29 > span {
  font-size: 25px;
}

.game-suggestion-selected-empty-v29 strong {
  color: #eff7ff;
}

.game-suggestion-selected-card-v29 {
  padding: 12px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 15px;
  border: 1px solid rgba(125, 221, 255, .42);
  border-radius: 19px;
  background: linear-gradient(135deg, rgba(54, 153, 204, .17), rgba(132, 84, 211, .14));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

.game-suggestion-selected-card-v29 img {
  width: 96px;
  height: 144px;
  object-fit: cover;
  border-radius: 13px;
}

.game-suggestion-selected-card-v29 > div {
  min-width: 0;
  align-self: center;
}

.game-suggestion-selected-card-v29 small {
  color: #81e3ff;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .1em;
}

.game-suggestion-selected-card-v29 h3 {
  margin: 5px 0;
  color: #fff;
  font-size: clamp(21px, 2vw, 30px);
  line-height: 1;
}

.game-suggestion-selected-card-v29 p {
  margin: 0 0 12px;
  color: #bdc8d8;
  font-size: 12px;
}

.game-suggestion-selected-card-v29 button {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: 9px 13px;
  color: #d8f6ff;
  background: rgba(255, 255, 255, .07);
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.game-suggestion-admin-card-v29 {
  display: grid !important;
  grid-template-columns: 105px minmax(0, 1fr);
  gap: 15px;
}

.game-suggestion-admin-cover-v29 {
  width: 105px;
  height: 158px;
  object-fit: cover;
  border-radius: 14px;
  background: #080d16;
}

.game-suggestion-admin-body-v29 {
  min-width: 0;
}

@media (max-width: 700px) {
  body.viewer-page[data-viewer-tab-v24] {
    background-attachment: scroll, scroll !important;
    background-size: auto 100dvh, auto 100dvh !important;
    background-position: center, center top !important;
  }

  .game-suggestion-panel-v29 {
    width: calc(100vw - 18px);
    max-height: calc(100dvh - 18px);
  }

  .game-suggestion-search-row-v29 {
    grid-template-columns: 1fr;
  }

  .game-suggestion-search-row-v29 button {
    min-height: 44px;
  }

  .game-suggestion-results-v29 {
    grid-template-columns: 1fr;
  }

  .game-suggestion-result-card-v29 {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .game-suggestion-result-card-v29 img {
    width: 72px;
    height: 108px;
  }

  .game-suggestion-selected-card-v29 {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .game-suggestion-selected-card-v29 img {
    width: 76px;
    height: 114px;
  }

  .game-suggestion-admin-card-v29 {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .game-suggestion-admin-cover-v29 {
    width: 76px;
    height: 114px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-suggestion-result-card-v29 {
    transition: none;
  }
}

/* === END FULL_TAB_BACKDROPS_AND_SUGGESTION_PICKER_STYLES_V29 === */

/* === VIEWER_UNIFIED_PORTRAIT_PANELS_STYLES_V33 === */

:root {
  --viewer-frame-width-v33: min(1960px, calc(100% - 36px));
  --viewer-frame-border-v33: rgba(125, 211, 252, .3);
  --viewer-frame-bg-v33: rgba(5, 12, 24, .52);
  --viewer-surface-v33: rgba(8, 15, 29, .86);
  --viewer-surface-strong-v33: rgba(7, 13, 26, .92);
  --viewer-text-v33: #edf6ff;
  --viewer-muted-v33: #b9c9d9;
}

body.viewer-page.viewer-unified-portrait-panels-v33 {
  color: var(--viewer-text-v33);
  background:
    radial-gradient(circle at 10% 0%, rgba(69, 190, 235, .16), transparent 31%),
    radial-gradient(circle at 90% 0%, rgba(169, 105, 244, .15), transparent 33%),
    linear-gradient(180deg, #071321, #091126 54%, #0a1020) !important;
}

/* Every tab now uses the same large bordered page frame as Recommend a Game. */
.viewer-page #viewerTabHostV24 {
  width: 100%;
  min-width: 0;
}

.viewer-page .viewer-tab-panel-v24 {
  width: var(--viewer-frame-width-v33) !important;
  min-width: 0;
  margin: 0 auto 24px !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid var(--viewer-frame-border-v33) !important;
  border-radius: 28px !important;
  background: var(--viewer-frame-bg-v33) !important;
  box-shadow:
    0 28px 78px rgba(2, 7, 18, .34),
    inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.viewer-page .viewer-tab-panel-v24[data-panel="overview"],
.viewer-page .viewer-tab-panel-v24[data-panel="tierlists"],
.viewer-page .viewer-tab-panel-v24[data-panel="community"],
.viewer-page .viewer-tab-panel-v24[data-panel="leaderboard"] {
  min-height: calc(100dvh - 108px);
  padding: 20px 0 34px;
}

/* A real portrait-card grid sits inside the active tab panel. It is static,
   caption-free and never waits for a reveal class before becoming visible. */
.viewer-static-portrait-layer-v33 {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #071321;
}

.viewer-static-portrait-grid-v33 {
  position: absolute;
  inset: -52px;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-auto-rows: clamp(218px, 19vw, 342px);
  align-content: start;
  gap: clamp(10px, .9vw, 17px);
  opacity: .25;
  transform: rotate(-1.8deg) scale(1.045);
  transform-origin: center top;
  filter: saturate(.91) contrast(1.04) brightness(.94);
}

.viewer-static-portrait-card-v33 {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: clamp(12px, 1vw, 18px);
  background:
    radial-gradient(circle at 50% 34%, rgba(125, 211, 252, .16), transparent 46%),
    linear-gradient(145deg, rgba(22, 34, 54, .98), rgba(10, 15, 29, .98));
  box-shadow: 0 14px 30px rgba(0, 0, 0, .34);
}

.viewer-static-portrait-card-v33::before {
  content: "🎮";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(183, 219, 241, .24);
  font-size: 26px;
}

.viewer-static-portrait-card-v33 img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 1 !important;
}

.viewer-static-portrait-shade-v33 {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(5, 13, 26, .25), rgba(5, 13, 26, .58) 62%, rgba(4, 9, 19, .84) 100%),
    linear-gradient(90deg, rgba(5, 12, 24, .62), rgba(7, 15, 29, .22) 24%, rgba(7, 15, 29, .22) 76%, rgba(5, 12, 24, .62));
}

.viewer-page .viewer-tab-panel-v24 > :not(.viewer-static-portrait-layer-v33) {
  position: relative !important;
  z-index: 3 !important;
}

/* The Recommend page keeps its moving full-library reels. Its own section now
   fills the same outer page frame, rather than creating a second border. */
body[data-viewer-tab-v24="recommend"] .viewer-tab-panel-v24[data-panel="recommend"] {
  height: calc(100dvh - 102px) !important;
  min-height: 0 !important;
  padding: 0 !important;
}

body[data-viewer-tab-v24="recommend"] .viewer-tab-panel-v24[data-panel="recommend"] > .prominent-game-suggestion-v22 {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #081321 !important;
}

body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-content-v21,
body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-content-v22 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  place-self: center !important;
  margin: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

.recommendation-reel-card-v21 {
  background:
    radial-gradient(circle at 50% 34%, rgba(125, 211, 252, .13), transparent 48%),
    linear-gradient(145deg, #15233a, #0b1120);
}

.recommendation-reel-card-v21 figcaption {
  display: none !important;
}

.recommendation-reel-card-v21 img {
  opacity: 1 !important;
}

/* Consistent dark, translucent content surfaces let the portrait background
   remain visible while preserving strong contrast for every tab. */
.viewer-page .viewer-about-shell,
.viewer-page .viewer-howto-shell {
  background: transparent !important;
  box-shadow: none !important;
}

.viewer-page .viewer-about-card,
.viewer-page .viewer-howto-card,
.viewer-page .overlay-wrap,
.viewer-page .community-tierlist-section,
.viewer-page .community-hub-v24,
.viewer-page .reviewer-members-section,
.viewer-page .community-leaderboard-section {
  color: var(--viewer-text-v33) !important;
  border-color: rgba(132, 211, 255, .18) !important;
  background: rgba(7, 14, 28, .72) !important;
  box-shadow: 0 22px 60px rgba(2, 7, 18, .27) !important;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.viewer-page .viewer-about-block,
.viewer-page .viewer-howto-steps > div,
.viewer-page .overlay-board,
.viewer-page .community-tierlist-card,
.viewer-page .community-hub-header-v24,
.viewer-page .community-champion-v24,
.viewer-page .community-quest-v24,
.viewer-page .recent-reviews-v24,
.viewer-page .community-reviewer-roster-v24,
.viewer-page .reviewer-member-card,
.viewer-page .community-leaderboard-card,
.viewer-page .community-vip-banner-v14 {
  color: var(--viewer-text-v33) !important;
  border-color: rgba(255, 255, 255, .11) !important;
  background-color: rgba(8, 15, 29, .86) !important;
}

.viewer-page .viewer-about-block {
  background:
    radial-gradient(circle at 12% 0%, rgba(69, 190, 235, .09), transparent 35%),
    rgba(8, 15, 29, .86) !important;
}

.viewer-page .viewer-about-kicker,
.viewer-page .viewer-about-handle,
.viewer-page .viewer-about-intro h1,
.viewer-page .viewer-about-block h2,
.viewer-page .viewer-about-block h2 span,
.viewer-page .viewer-howto-card h2,
.viewer-page .viewer-howto-card h2 span,
.viewer-page .community-hub-v24 h1,
.viewer-page .community-hub-v24 h2,
.viewer-page .reviewer-members-section h2,
.viewer-page .community-leaderboard-section h1,
.viewer-page .community-leaderboard-section h2 {
  color: #f8fbff !important;
}

.viewer-page .viewer-about-kicker,
.viewer-page .community-hub-header-v24 > div:first-child > span,
.viewer-page .recent-reviews-heading-v24 span {
  color: #8ce8ff !important;
}

.viewer-page .viewer-about-block p,
.viewer-page .viewer-howto-card p,
.viewer-page .viewer-howto-steps > div span,
.viewer-page .community-hub-v24 p,
.viewer-page .reviewer-members-section p,
.viewer-page .community-leaderboard-section p {
  color: #d5e2ee !important;
}

.viewer-page .viewer-howto-card {
  padding-top: 34px !important;
}

.viewer-page .viewer-howto-steps > div {
  background: rgba(14, 25, 43, .91) !important;
}

.viewer-page .viewer-howto-steps > div strong {
  color: #f8fbff !important;
  background: linear-gradient(145deg, #173653, #16264a) !important;
}

/* Keep tier labels readable while darkening only the game-holding surfaces. */
.viewer-page .tier-row,
.viewer-page .community-tier-row {
  background-color: rgba(6, 12, 24, .9) !important;
  border-color: rgba(255, 255, 255, .1) !important;
}

.viewer-page .tier-items {
  background: rgba(6, 12, 24, .48) !important;
}

.viewer-page .community-reviewer-roster-v24 .reviewer-member-card > p,
.viewer-page .community-reviewer-roster-v24 .reviewer-profile-open-v24,
.viewer-page .recent-review-copy-v24,
.viewer-page .recent-review-copy-v24 blockquote {
  color: #dce8f4 !important;
}

@media (max-width: 1100px) {
  .viewer-static-portrait-grid-v33 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: clamp(198px, 28vw, 302px);
  }
}

@media (max-width: 760px) {
  :root {
    --viewer-frame-width-v33: calc(100% - 18px);
  }

  .viewer-page .viewer-tab-panel-v24 {
    border-radius: 20px !important;
    margin-bottom: 14px !important;
  }

  .viewer-page .viewer-tab-panel-v24[data-panel="overview"],
  .viewer-page .viewer-tab-panel-v24[data-panel="tierlists"],
  .viewer-page .viewer-tab-panel-v24[data-panel="community"],
  .viewer-page .viewer-tab-panel-v24[data-panel="leaderboard"] {
    padding: 10px 0 22px;
  }

  .viewer-static-portrait-grid-v33 {
    inset: -24px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(165px, 52vw, 244px);
    gap: 9px;
    opacity: .2;
    transform: rotate(-1deg) scale(1.025);
  }

  .viewer-page .viewer-about-card,
  .viewer-page .viewer-howto-card,
  .viewer-page .overlay-wrap,
  .viewer-page .community-tierlist-section,
  .viewer-page .community-hub-v24,
  .viewer-page .reviewer-members-section,
  .viewer-page .community-leaderboard-section {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recommendation-reel-track-v21 {
    animation-play-state: paused !important;
  }
}

/* === END VIEWER_UNIFIED_PORTRAIT_PANELS_STYLES_V33 === */

/* === VIEWER_REVIEWER_EXPERIENCE_STYLES_V35 === */

/* A visible portrait border now surrounds every content tab on all four sides. */
.viewer-page #viewerTabHostV24 {
  width: min(2020px, calc(100% - 24px)) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.viewer-page .viewer-tab-panel-v24[data-panel="overview"],
.viewer-page .viewer-tab-panel-v24[data-panel="tierlists"],
.viewer-page .viewer-tab-panel-v24[data-panel="community"],
.viewer-page .viewer-tab-panel-v24[data-panel="leaderboard"] {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 30px !important;
  padding: clamp(24px, 2.2vw, 42px) !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(122, 211, 255, .34) !important;
  border-radius: 28px !important;
  box-shadow: 0 30px 80px rgba(2, 7, 18, .34), inset 0 0 0 1px rgba(180, 125, 255, .08) !important;
}

.viewer-page .viewer-tab-panel-v24[data-panel="overview"] > :not(.viewer-static-portrait-layer-v33),
.viewer-page .viewer-tab-panel-v24[data-panel="tierlists"] > :not(.viewer-static-portrait-layer-v33),
.viewer-page .viewer-tab-panel-v24[data-panel="community"] > :not(.viewer-static-portrait-layer-v33),
.viewer-page .viewer-tab-panel-v24[data-panel="leaderboard"] > :not(.viewer-static-portrait-layer-v33) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.viewer-page .viewer-static-portrait-grid-v33 {
  inset: -28px !important;
  min-height: calc(100% + 56px) !important;
  opacity: .58 !important;
}

.viewer-page .viewer-static-portrait-shade-v33 {
  background:
    linear-gradient(90deg, rgba(4, 10, 22, .28) 0%, rgba(4, 10, 22, .57) 9%, rgba(5, 12, 25, .78) 23%, rgba(5, 12, 25, .78) 77%, rgba(4, 10, 22, .57) 91%, rgba(4, 10, 22, .28) 100%),
    linear-gradient(180deg, rgba(4, 10, 22, .26) 0%, rgba(5, 12, 25, .63) 13%, rgba(5, 12, 25, .68) 84%, rgba(4, 10, 22, .26) 100%) !important;
}

body[data-viewer-tab-v24="overview"] .viewer-about-card,
body[data-viewer-tab-v24="overview"] .viewer-about-shell,
body[data-viewer-tab-v24="overview"] .viewer-about-hero,
body[data-viewer-tab-v24="tierlists"] .viewer-howto-shell,
body[data-viewer-tab-v24="tierlists"] .viewer-howto-card,
body[data-viewer-tab-v24="tierlists"] .overlay-wrap,
body[data-viewer-tab-v24="community"] .community-hub-v24,
body[data-viewer-tab-v24="community"] .reviewer-members-section,
body[data-viewer-tab-v24="leaderboard"] .community-leaderboard-section {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body[data-viewer-tab-v24="overview"] .viewer-about-card {
  overflow: hidden !important;
}

body[data-viewer-tab-v24="overview"] .viewer-about-hero > *,
body[data-viewer-tab-v24="overview"] .reviewer-own-panel-v16,
body[data-viewer-tab-v24="overview"] .reviewer-own-card-v16 {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* High contrast title pills, no more white text disappearing into white. */
.viewer-page .viewer-about-block h2,
.viewer-page .viewer-howto-card h2 {
  color: #07111f !important;
  -webkit-text-fill-color: #07111f !important;
  background: linear-gradient(135deg, #bdeeff 0%, #e2d0ff 100%) !important;
  border: 1px solid rgba(255, 255, 255, .76) !important;
  box-shadow: 0 12px 30px rgba(1, 8, 20, .28) !important;
  text-shadow: none !important;
}

.viewer-page .viewer-about-block h2 span,
.viewer-page .viewer-howto-card h2 span {
  color: #07111f !important;
  -webkit-text-fill-color: #07111f !important;
  background: transparent !important;
  text-shadow: none !important;
}

.viewer-page .viewer-howto-steps > div,
.viewer-page .viewer-howto-steps > div strong,
.viewer-page .viewer-howto-steps > div span {
  color: #edf7ff !important;
  -webkit-text-fill-color: #edf7ff !important;
}

.viewer-page .viewer-howto-steps > div {
  background: rgba(12, 24, 43, .94) !important;
  border-color: rgba(131, 216, 255, .25) !important;
}

/* Keep the recommendation card exactly in the visual centre. */
body[data-viewer-tab-v24="recommend"] .viewer-tab-panel-v24[data-panel="recommend"] {
  position: relative !important;
}

body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-v22,
body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-v21 {
  position: relative !important;
  width: calc(100% - 36px) !important;
  margin: 0 auto !important;
}

body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-content-v20,
body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-content-v21,
body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-content-v22 {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  place-self: auto !important;
  justify-self: auto !important;
  align-self: auto !important;
  z-index: 5 !important;
}

/* Leaderboards use the reviewer's background. Podium status is an outline. */
.community-leaderboard-card-v14 {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: rgba(12, 21, 38, .94) !important;
  border: 2px solid rgba(126, 215, 255, .22) !important;
}

.community-leaderboard-card-v14.has-reviewer-background-v35::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image:
    linear-gradient(110deg, rgba(5, 11, 23, .78), rgba(8, 15, 31, .62) 56%, rgba(9, 15, 31, .82)),
    var(--community-reviewer-background-v35) !important;
  background-size: cover !important;
  background-position: center !important;
  filter: saturate(.88) contrast(1.04);
}

.community-leaderboard-card-v14.has-reviewer-background-v35::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 10, 20, .08), rgba(4, 10, 20, .52));
  pointer-events: none;
}

.community-leaderboard-card-v14.rank-1 { border-color: #f6cf55 !important; box-shadow: 0 0 0 1px rgba(246, 207, 85, .35), 0 20px 44px rgba(111, 77, 5, .22) !important; }
.community-leaderboard-card-v14.rank-2 { border-color: #d5e0ee !important; box-shadow: 0 0 0 1px rgba(213, 224, 238, .3), 0 20px 44px rgba(83, 99, 120, .2) !important; }
.community-leaderboard-card-v14.rank-3 { border-color: #d99363 !important; box-shadow: 0 0 0 1px rgba(217, 147, 99, .3), 0 20px 44px rgba(106, 55, 30, .2) !important; }
.community-leaderboard-card-v14.rank-other { border-color: rgba(125, 220, 255, .28) !important; }

.community-leaderboard-card-v14 .community-card-shine {
  opacity: .22 !important;
}

.community-leaderboard-card-v14 > * {
  position: relative;
  z-index: 2;
}

/* Reviewer roster cards now show both games and movie or TV favourites. */
.reviewer-member-card-v35 {
  gap: 15px !important;
  min-height: 390px !important;
  text-align: left !important;
}

.reviewer-member-favourites-v35 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.reviewer-member-favourites-v35 > section {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(5, 11, 24, .44);
}

.reviewer-member-favourites-v35 small {
  display: block;
  margin-bottom: 9px;
  color: #8ce8ff;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.reviewer-member-favourites-v35 section > div {
  display: flex;
  gap: 8px;
  align-items: center;
}

.reviewer-member-favourites-v35 img,
.reviewer-member-favourites-v35 section > div > span {
  width: 58px;
  aspect-ratio: 2 / 3;
  flex: 0 0 58px;
  object-fit: cover;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(13, 23, 41, .9);
}

.reviewer-member-favourites-v35 section > div > span {
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 1000;
}

/* Character selector and profile portrait groups. */
.reviewer-character-section-v35 {
  display: grid;
  gap: 18px;
}

.reviewer-character-heading-v35 span,
.reviewer-character-game-copy-v35 > span,
.reviewer-character-showcase-kicker-v35 {
  color: #8ce8ff;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.reviewer-character-heading-v35 h3 {
  margin: 4px 0 5px;
  color: #f7fbff;
  font-size: 26px;
}

.reviewer-character-heading-v35 p,
.reviewer-character-game-copy-v35 p {
  margin: 0;
  color: rgba(226, 237, 249, .75);
}

.reviewer-character-games-v35 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.reviewer-character-game-v35 {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(135, 214, 255, .18);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(17, 29, 49, .94), rgba(20, 16, 44, .92));
}

.reviewer-character-game-copy-v35 h4 {
  margin: 3px 0 5px;
  color: #fff;
  font-size: 20px;
}

.reviewer-character-selected-strip-v35,
.reviewer-character-showcase-groups-v35 section > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 64px;
}

.reviewer-character-selected-v35 {
  width: 56px;
  height: 64px;
  flex: 0 0 56px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px;
  background: #111a2d;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .28);
}

.reviewer-character-selected-v35 img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.reviewer-character-empty-v35 {
  color: rgba(220, 233, 247, .52);
  font-size: 12px;
}

.reviewer-character-game-actions-v35 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.reviewer-character-game-actions-v35 button,
.reviewer-character-modal-v35 button,
.community-review-modal-v35 button {
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  color: #07111f;
  background: linear-gradient(135deg, #81dcff, #c48cff);
  font-weight: 950;
  cursor: pointer;
}

.reviewer-character-game-actions-v35 button.secondary,
.reviewer-character-modal-v35 button.secondary,
.community-review-modal-v35 button.secondary {
  color: #eaf5ff;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .08);
}

.reviewer-character-modal-v35,
.community-review-modal-v35 {
  position: fixed;
  z-index: 10050;
  inset: 0;
  display: none;
  place-items: center;
  padding: 18px;
}

.reviewer-character-modal-v35.open,
.community-review-modal-v35.open {
  display: grid;
}

.reviewer-character-modal-backdrop-v35,
.community-review-modal-backdrop-v35 {
  position: absolute;
  inset: 0;
  background: rgba(1, 5, 14, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.reviewer-character-modal-panel-v35,
.community-review-modal-panel-v35 {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  border: 1px solid rgba(133, 219, 255, .3);
  border-radius: 24px;
  color: #edf7ff;
  background: linear-gradient(145deg, rgba(8, 17, 31, .99), rgba(18, 15, 42, .99));
  box-shadow: 0 34px 100px rgba(0, 0, 0, .58);
}

.reviewer-character-modal-panel-v35 > header {
  position: sticky;
  z-index: 5;
  top: 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  background: rgba(8, 17, 31, .96);
}

.reviewer-character-modal-panel-v35 > header span {
  color: #8ce8ff;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.reviewer-character-modal-panel-v35 h2,
.reviewer-character-modal-panel-v35 h3 {
  margin: 4px 0;
  color: #fff;
}

.reviewer-character-modal-panel-v35 > header p,
.reviewer-character-picker-group-v35 header p {
  margin: 0;
  color: rgba(225, 237, 249, .7);
}

.reviewer-character-modal-body-v35 {
  display: grid;
  gap: 22px;
  padding: 22px;
}

.reviewer-character-modal-panel-v35 > footer {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  padding: 15px 22px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  background: rgba(8, 17, 31, .96);
}

.reviewer-character-picker-group-v35 > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.reviewer-character-picker-group-v35 > header strong {
  min-width: 54px;
  padding: 8px 11px;
  text-align: center;
  border-radius: 999px;
  color: #08111f;
  background: #8ce8ff;
}

.reviewer-character-picker-grid-v35 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 11px;
}

.reviewer-character-option-v35 {
  position: relative;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 8px !important;
  border: 2px solid transparent !important;
  border-radius: 16px !important;
  color: #eaf5ff !important;
  background: rgba(255, 255, 255, .055) !important;
}

.reviewer-character-option-v35.is-selected {
  border-color: #8ce8ff !important;
  background: rgba(89, 193, 245, .16) !important;
  box-shadow: 0 0 0 3px rgba(196, 140, 255, .17);
}

.reviewer-character-option-v35 img {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
  border-radius: 11px;
  background: #0d1729;
}

.reviewer-character-option-v35 span {
  overflow: hidden;
  color: #edf7ff;
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reviewer-character-loading-v35,
.reviewer-character-load-error-v35 {
  display: grid;
  place-items: center;
  gap: 12px;
  min-height: 220px;
  padding: 24px;
  text-align: center;
  color: #eaf5ff;
}

.reviewer-character-loading-v35 > span {
  width: 42px;
  height: 42px;
  border: 4px solid rgba(255, 255, 255, .15);
  border-top-color: #8ce8ff;
  border-radius: 50%;
  animation: reviewer-character-spin-v35 .85s linear infinite;
}

@keyframes reviewer-character-spin-v35 { to { transform: rotate(360deg); } }

.reviewer-character-showcase-v35 {
  display: grid;
  gap: 11px;
  padding: 15px;
  border: 1px solid rgba(128, 215, 255, .15);
  border-radius: 18px;
  background: rgba(4, 10, 23, .4);
}

.reviewer-character-showcase-groups-v35 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 11px;
}

.reviewer-character-showcase-groups-v35 section {
  min-width: 0;
}

.reviewer-character-showcase-groups-v35 small {
  display: block;
  margin-bottom: 7px;
  color: rgba(231, 241, 251, .72);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.reviewer-character-showcase-v35.is-compact {
  padding: 10px;
}

.reviewer-character-showcase-v35.is-compact .reviewer-character-selected-v35 {
  width: 44px;
  height: 50px;
  flex-basis: 44px;
}

.reviewer-member-card-v35 .reviewer-character-showcase-v35 {
  margin-top: 0;
}

/* Specific review modal. */
.community-review-modal-panel-v35 {
  width: min(980px, calc(100vw - 32px));
  overflow: hidden;
}

.community-review-modal-close-v35 {
  position: absolute;
  z-index: 5;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  padding: 0 !important;
  font-size: 25px;
}

.community-review-detail-v35 {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.45fr);
  min-height: 520px;
}

.community-review-detail-art-v35 {
  min-height: 100%;
  background: #0c1629;
}

.community-review-detail-art-v35 img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.community-review-detail-art-v35 > span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 70px;
}

.community-review-detail-copy-v35 {
  display: grid;
  align-content: center;
  gap: 17px;
  padding: clamp(28px, 4vw, 54px);
}

.community-review-detail-kicker-v35 {
  color: #8ce8ff;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.community-review-detail-copy-v35 h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1;
}

.community-review-detail-reviewer-v35 {
  display: flex;
  align-items: center;
  gap: 11px;
}

.community-review-detail-reviewer-v35 > img,
.community-review-detail-reviewer-v35 > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  object-fit: cover;
  border-radius: 50%;
  background: #18233a;
}

.community-review-detail-reviewer-v35 div {
  display: grid;
}

.community-review-detail-reviewer-v35 span {
  color: rgba(226, 238, 249, .68);
  font-size: 12px;
}

.community-review-detail-badges-v35,
.community-review-detail-actions-v35 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.community-review-detail-badges-v35 > * {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 999px;
  color: #eaf5ff;
  background: rgba(255, 255, 255, .07);
}

.community-review-score-grid-v35 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.community-review-score-grid-v35 > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .055);
}

.community-review-score-grid-v35 span {
  text-transform: capitalize;
  color: rgba(226, 238, 249, .7);
}

.community-review-detail-copy-v35 blockquote {
  margin: 0;
  padding: 17px;
  border-left: 4px solid #8ce8ff;
  border-radius: 0 14px 14px 0;
  color: #fff;
  background: rgba(255, 255, 255, .06);
  font-size: 18px;
  line-height: 1.55;
}

body.reviewer-character-modal-open-v35,
body.community-review-modal-open-v35 {
  overflow: hidden !important;
}

@media (max-width: 1000px) {
  .reviewer-character-games-v35 { grid-template-columns: 1fr; }
  .reviewer-member-favourites-v35 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .viewer-page #viewerTabHostV24 { width: calc(100% - 10px) !important; }
  .viewer-page .viewer-tab-panel-v24[data-panel="overview"],
  .viewer-page .viewer-tab-panel-v24[data-panel="tierlists"],
  .viewer-page .viewer-tab-panel-v24[data-panel="community"],
  .viewer-page .viewer-tab-panel-v24[data-panel="leaderboard"] {
    padding: 13px !important;
    border-radius: 19px !important;
  }

  body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-content-v20,
  body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-content-v21,
  body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-content-v22 {
    width: calc(100% - 26px) !important;
    max-width: 560px !important;
  }

  .reviewer-member-favourites-v35 { grid-template-columns: 1fr; }
  .reviewer-character-picker-grid-v35 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reviewer-character-option-v35 span { font-size: 9px; }
  .community-review-detail-v35 { grid-template-columns: 1fr; }
  .community-review-detail-art-v35 { min-height: 280px; max-height: 38dvh; }
  .community-review-detail-copy-v35 { padding: 24px 18px; }
}

/* === END VIEWER_REVIEWER_EXPERIENCE_STYLES_V35 === */

/* === VIEWER_REVIEWER_EXPERIENCE_FINAL_REFINEMENTS_V35 === */

:root {
  --viewer-frame-width-v33: min(2040px, calc(100% - 18px));
}

/* The portrait layer is the full panel background. Content receives a real
   inset so portraits remain visible on the top, both sides and the bottom. */
.viewer-page #viewerTabHostV24 {
  width: min(2040px, calc(100% - 18px)) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

.viewer-page .viewer-tab-panel-v24[data-panel="overview"],
.viewer-page .viewer-tab-panel-v24[data-panel="tierlists"],
.viewer-page .viewer-tab-panel-v24[data-panel="community"],
.viewer-page .viewer-tab-panel-v24[data-panel="leaderboard"] {
  width: 100% !important;
  max-width: none !important;
  padding: clamp(32px, 3.1vw, 58px) !important;
  border-radius: 30px !important;
  box-sizing: border-box !important;
}

.viewer-page .viewer-tab-panel-v24[data-panel="overview"] > :not(.viewer-static-portrait-layer-v33),
.viewer-page .viewer-tab-panel-v24[data-panel="tierlists"] > :not(.viewer-static-portrait-layer-v33),
.viewer-page .viewer-tab-panel-v24[data-panel="community"] > :not(.viewer-static-portrait-layer-v33),
.viewer-page .viewer-tab-panel-v24[data-panel="leaderboard"] > :not(.viewer-static-portrait-layer-v33) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

.viewer-static-portrait-layer-v33 {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
}

.viewer-static-portrait-grid-v33 {
  inset: -70px !important;
  min-width: calc(100% + 140px) !important;
  min-height: calc(100% + 140px) !important;
  grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
  grid-auto-rows: clamp(220px, 17vw, 350px) !important;
  align-content: start !important;
  opacity: .43 !important;
  transform: rotate(-1.35deg) scale(1.035) !important;
  transform-origin: center center !important;
}

.viewer-static-portrait-shade-v33 {
  background:
    linear-gradient(90deg, rgba(3, 9, 20, .30) 0%, rgba(4, 11, 23, .55) 8%, rgba(5, 12, 25, .79) 19%, rgba(5, 12, 25, .79) 81%, rgba(4, 11, 23, .55) 92%, rgba(3, 9, 20, .30) 100%),
    linear-gradient(180deg, rgba(3, 9, 20, .28) 0%, rgba(5, 12, 25, .64) 12%, rgba(5, 12, 25, .70) 87%, rgba(3, 9, 20, .28) 100%) !important;
}

/* Readable pale title chips. These selectors beat the V33 blanket white rule. */
.viewer-page .viewer-about-block > h2,
.viewer-page .viewer-howto-card > h2 {
  color: #07111f !important;
  -webkit-text-fill-color: #07111f !important;
  background: linear-gradient(135deg, #bceeff, #e4d2ff) !important;
  border: 1px solid rgba(255, 255, 255, .78) !important;
  text-shadow: none !important;
}

.viewer-page .viewer-about-block > h2 > span,
.viewer-page .viewer-howto-card > h2 > span {
  color: #07111f !important;
  -webkit-text-fill-color: #07111f !important;
  background: transparent !important;
  text-shadow: none !important;
}

/* Keep every instructional card readable over the portrait grid. */
.viewer-page .viewer-howto-steps > div,
.viewer-page .viewer-howto-steps > div span {
  color: #edf7ff !important;
  -webkit-text-fill-color: #edf7ff !important;
}

/* Recommendation content is centred independently of older left-positioning. */
body[data-viewer-tab-v24="recommend"] .viewer-tab-panel-v24[data-panel="recommend"] > .prominent-game-suggestion-v22 {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-content-v20,
body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-content-v21,
body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-content-v22 {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  justify-self: auto !important;
  align-self: auto !important;
  z-index: 6 !important;
}

/* Portrait-only character chooser. Names remain available to screen readers
   and as native hover titles, but no text label is rendered under portraits. */
.reviewer-character-option-v35 {
  aspect-ratio: 1 / 1 !important;
  padding: 7px !important;
}

.reviewer-character-option-v35 img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

.reviewer-character-option-v35 > span {
  display: none !important;
}

/* Custom reviewer backgrounds remain the visual identity. Medal position is
   communicated by a clean outline rather than replacing that background. */
.community-leaderboard-card-v14.rank-1 {
  border: 3px solid #f6cf55 !important;
  background-color: rgba(10, 17, 31, .90) !important;
}
.community-leaderboard-card-v14.rank-2 {
  border: 3px solid #d5e0ee !important;
  background-color: rgba(10, 17, 31, .90) !important;
}
.community-leaderboard-card-v14.rank-3 {
  border: 3px solid #d99363 !important;
  background-color: rgba(10, 17, 31, .90) !important;
}

/* Reviewer preview cards grow naturally with games, media and optional
   character groups. No blank placeholder rows are reserved. */
.reviewer-member-card-v35 {
  min-height: 0 !important;
  height: auto !important;
}

.reviewer-member-favourites-v35 > section:empty,
.reviewer-character-showcase-v35:empty {
  display: none !important;
}

@media (max-width: 1180px) {
  .viewer-static-portrait-grid-v33 {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-auto-rows: clamp(205px, 24vw, 320px) !important;
  }
}

@media (max-width: 760px) {
  :root { --viewer-frame-width-v33: calc(100% - 8px); }

  .viewer-page #viewerTabHostV24 {
    width: calc(100% - 8px) !important;
  }

  .viewer-page .viewer-tab-panel-v24[data-panel="overview"],
  .viewer-page .viewer-tab-panel-v24[data-panel="tierlists"],
  .viewer-page .viewer-tab-panel-v24[data-panel="community"],
  .viewer-page .viewer-tab-panel-v24[data-panel="leaderboard"] {
    padding: 16px !important;
    border-radius: 20px !important;
  }

  .viewer-static-portrait-grid-v33 {
    inset: -34px !important;
    min-width: calc(100% + 68px) !important;
    min-height: calc(100% + 68px) !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: clamp(170px, 52vw, 250px) !important;
    opacity: .34 !important;
  }

  body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-content-v20,
  body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-content-v21,
  body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-content-v22 {
    width: min(560px, calc(100% - 24px)) !important;
  }
}

/* === END VIEWER_REVIEWER_EXPERIENCE_FINAL_REFINEMENTS_V35 === */


/* === VIEWER_CHARACTER_THEMES_LOCAL_SYNC_STYLES_V36 === */

/* Let each tab's portrait frame break out of the old centred content column.
   The navigation remains comfortably readable while the illustrated panel
   reaches almost to both edges of the browser. */
body.viewer-page {
  overflow-x: clip !important;
}

.viewer-page #viewerTabHostV24 {
  position: relative !important;
  left: 50% !important;
  width: min(2380px, calc(100vw - 24px)) !important;
  max-width: none !important;
  margin: 0 0 28px !important;
  transform: translateX(-50%) !important;
}

.viewer-page .viewer-tab-panel-v24 {
  max-width: none !important;
}

.viewer-page .viewer-tab-panel-v24[data-panel="overview"],
.viewer-page .viewer-tab-panel-v24[data-panel="tierlists"],
.viewer-page .viewer-tab-panel-v24[data-panel="community"],
.viewer-page .viewer-tab-panel-v24[data-panel="leaderboard"] {
  width: 100% !important;
  padding: clamp(28px, 2.5vw, 52px) !important;
}

.viewer-page .viewer-static-portrait-grid-v33 {
  inset: -82px !important;
  min-width: calc(100% + 164px) !important;
  min-height: calc(100% + 164px) !important;
  grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
  grid-auto-rows: clamp(210px, 14vw, 330px) !important;
}

/* Reliable recommendation centring. This uses normal flex layout rather than
   competing absolute offsets from previous versions. */
body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-v22 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin-inline: auto !important;
}

body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-content-v21,
body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-content-v22 {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: auto !important;
  transform: none !important;
  place-self: auto !important;
}

/* Game themed editor cards. */
.reviewer-character-game-v36 {
  --character-accent-v36: #8ce8ff;
  --character-accent-2-v36: #c48cff;
  --character-deep-v36: #111a2d;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 300px;
  border-color: color-mix(in srgb, var(--character-accent-v36) 44%, transparent) !important;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--character-accent-v36) 25%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--character-deep-v36) 92%, black), #0a1020) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.06),
    0 18px 44px rgba(0,0,0,.22);
  transition: transform 190ms ease, border-color 190ms ease, box-shadow 190ms ease;
}

.reviewer-character-game-v36:hover {
  transform: translateY(-4px);
  border-color: var(--character-accent-v36) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    0 24px 58px color-mix(in srgb, var(--character-accent-v36) 18%, rgba(0,0,0,.4));
}

.reviewer-character-game-glow-v36 {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .78;
  background:
    linear-gradient(125deg, transparent 0 60%, color-mix(in srgb, var(--character-accent-2-v36) 18%, transparent)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 14px);
}

.theme-overwatch-v36 {
  --character-accent-v36: #f99e1a;
  --character-accent-2-v36: #f6f7f9;
  --character-deep-v36: #202631;
}

.theme-marvel-rivals-v36 {
  --character-accent-v36: #ff4b56;
  --character-accent-2-v36: #58c8ff;
  --character-deep-v36: #181529;
}

.theme-dead-by-daylight-v36 {
  --character-accent-v36: #e8e8e8;
  --character-accent-2-v36: #d84d52;
  --character-deep-v36: #171719;
}

.reviewer-character-brand-v36 {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.reviewer-character-brand-icon-v36 {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--character-accent-v36) 50%, rgba(255,255,255,.14));
  border-radius: 17px;
  background:
    radial-gradient(circle at 35% 20%, rgba(255,255,255,.18), transparent 42%),
    color-mix(in srgb, var(--character-deep-v36) 82%, black);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}

.reviewer-character-brand-icon-v36 img {
  width: 78%;
  height: 78%;
  display: block;
  object-fit: contain;
}

.reviewer-character-brand-copy-v36 {
  display: grid;
  min-width: 0;
}

.reviewer-character-brand-copy-v36 small {
  color: var(--character-accent-v36);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.reviewer-character-brand-copy-v36 strong {
  overflow-wrap: anywhere;
  color: #fff;
  font-size: 20px;
  line-height: 1.05;
}

.reviewer-character-brand-v36.is-compact .reviewer-character-brand-icon-v36 {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: 13px;
}

.reviewer-character-brand-v36.is-compact .reviewer-character-brand-copy-v36 strong {
  font-size: 16px;
}

/* Portraits pop out on hover, with no constant motion or flashing. */
.reviewer-character-selected-v35,
.reviewer-character-option-v35 {
  transform-origin: 50% 85%;
  transition:
    transform 180ms cubic-bezier(.2,.85,.25,1.3),
    filter 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease !important;
}

.reviewer-character-selected-v35:hover,
.reviewer-character-option-v35:hover {
  z-index: 5;
  transform: translateY(-10px) scale(1.07) rotate(-1deg);
  filter: saturate(1.1) brightness(1.08);
  border-color: var(--character-accent-v36, #8ce8ff) !important;
  box-shadow:
    0 18px 34px rgba(0,0,0,.48),
    0 0 0 3px color-mix(in srgb, var(--character-accent-v36, #8ce8ff) 38%, transparent) !important;
}

.reviewer-character-option-v35:nth-child(even):hover {
  transform: translateY(-10px) scale(1.07) rotate(1deg);
}

.reviewer-character-option-v35.is-selected {
  border-color: var(--character-accent-v36, #8ce8ff) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--character-accent-v36, #8ce8ff) 45%, transparent),
    0 16px 34px rgba(0,0,0,.38) !important;
}

/* The character picker must sit above the reviewer profile editor. */
.reviewer-character-modal-v35 {
  z-index: 65000 !important;
}

.reviewer-character-modal-panel-v35 {
  --character-accent-v36: #8ce8ff;
  --character-accent-2-v36: #c48cff;
  --character-deep-v36: #111a2d;
  border-color: color-mix(in srgb, var(--character-accent-v36) 56%, transparent) !important;
  background:
    radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--character-accent-v36) 20%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--character-deep-v36) 92%, #08111f), #090d18) !important;
  box-shadow:
    0 34px 110px rgba(0,0,0,.72),
    0 0 0 1px color-mix(in srgb, var(--character-accent-v36) 18%, transparent) !important;
}

.reviewer-character-modal-v35.theme-overwatch-v36 .reviewer-character-modal-panel-v35 {
  --character-accent-v36: #f99e1a;
  --character-accent-2-v36: #f6f7f9;
  --character-deep-v36: #202631;
}

.reviewer-character-modal-v35.theme-marvel-rivals-v36 .reviewer-character-modal-panel-v35 {
  --character-accent-v36: #ff4b56;
  --character-accent-2-v36: #58c8ff;
  --character-deep-v36: #181529;
}

.reviewer-character-modal-v35.theme-dead-by-daylight-v36 .reviewer-character-modal-panel-v35 {
  --character-accent-v36: #e8e8e8;
  --character-accent-2-v36: #d84d52;
  --character-deep-v36: #171719;
}

.reviewer-character-modal-panel-v35 > header,
.reviewer-character-modal-panel-v35 > footer {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--character-deep-v36) 96%, black), rgba(8,17,31,.96)) !important;
}

.reviewer-character-modal-brand-v36 {
  margin-bottom: 12px;
}

.reviewer-character-picker-group-v35 {
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--character-accent-v36) 20%, rgba(255,255,255,.08));
  border-radius: 20px;
  background: rgba(5,10,20,.46);
}

.reviewer-character-picker-group-v35 > header strong {
  background: var(--character-accent-v36) !important;
}

.reviewer-character-picker-grid-v35 {
  grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)) !important;
  gap: 14px !important;
}

.reviewer-character-option-v35 {
  overflow: visible !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--character-accent-v36) 14%, transparent), transparent 58%),
    rgba(8,14,25,.92) !important;
}

.reviewer-character-option-v35 img {
  border-radius: 12px;
}

/* Control-page local portrait updater. */
.reviewer-character-sync-box-v36 {
  display: grid;
  gap: 13px;
  margin: 18px 0;
  padding: 18px;
  border: 1px solid rgba(126, 215, 255, .22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 0%, rgba(196,140,255,.16), transparent 35%),
    linear-gradient(145deg, rgba(12,25,43,.95), rgba(18,15,42,.94));
}

.reviewer-character-sync-heading-v36 {
  display: flex;
  align-items: center;
  gap: 14px;
}

.reviewer-character-sync-heading-v36 strong {
  color: #f4fbff;
  font-size: 18px;
}

.reviewer-character-sync-heading-v36 p {
  margin: 4px 0 0;
  color: #aebbd0;
  font-size: 12px;
  line-height: 1.45;
}

.reviewer-character-sync-icons-v36 {
  display: flex;
  flex: 0 0 auto;
}

.reviewer-character-sync-icons-v36 img {
  width: 46px;
  height: 46px;
  margin-left: -8px;
  padding: 7px;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 13px;
  background: #10192b;
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
}

.reviewer-character-sync-icons-v36 img:first-child {
  margin-left: 0;
}

.reviewer-character-sync-actions-v36 {
  align-items: center;
}

.reviewer-character-sync-actions-v36 code {
  overflow-wrap: anywhere;
  color: #8ce8ff;
  font-size: 11px;
}

.reviewer-character-sync-progress-v36 {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.reviewer-character-sync-progress-v36 span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #81dcff, #c48cff);
  transition: width 220ms ease;
}

@media (max-width: 1080px) {
  .reviewer-character-games-v35 {
    grid-template-columns: 1fr !important;
  }

  .reviewer-character-game-v36 {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  body.viewer-page {
    overflow-x: hidden !important;
  }

  .viewer-page #viewerTabHostV24 {
    width: calc(100vw - 8px) !important;
  }

  .viewer-page .viewer-tab-panel-v24[data-panel="overview"],
  .viewer-page .viewer-tab-panel-v24[data-panel="tierlists"],
  .viewer-page .viewer-tab-panel-v24[data-panel="community"],
  .viewer-page .viewer-tab-panel-v24[data-panel="leaderboard"] {
    padding: 13px !important;
  }

  .viewer-page .viewer-static-portrait-grid-v33 {
    inset: -38px !important;
    min-width: calc(100% + 76px) !important;
    min-height: calc(100% + 76px) !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .reviewer-character-modal-v35 {
    padding: 7px !important;
  }

  .reviewer-character-modal-panel-v35 {
    width: 100% !important;
    max-height: calc(100dvh - 14px) !important;
    border-radius: 20px !important;
  }

  .reviewer-character-picker-grid-v35 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .reviewer-character-picker-group-v35 {
    padding: 12px;
  }

  .reviewer-character-sync-heading-v36 {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* === END VIEWER_CHARACTER_THEMES_LOCAL_SYNC_STYLES_V36 === */



/* === VIEWER_RECOVERY_TABS_CHARACTERS_STYLES_V38 === */

/* One consistent near-edge frame for every tab. The recommend tab keeps its
   moving grid, the other four use the static V33 portrait layer. */
.viewer-page #viewerTabHostV24 {
  position: relative !important;
  left: 50% !important;
  width: min(2380px, calc(100vw - 24px)) !important;
  max-width: none !important;
  margin: 0 0 28px !important;
  transform: translateX(-50%) !important;
}

.viewer-page .viewer-tab-panel-v24 {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(125, 211, 255, .30) !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.viewer-page .viewer-tab-panel-v24[hidden],
.viewer-page .viewer-tab-panel-v24:not(.is-active) {
  display: none !important;
}

.viewer-page .viewer-tab-panel-v24[data-panel="overview"],
.viewer-page .viewer-tab-panel-v24[data-panel="tierlists"],
.viewer-page .viewer-tab-panel-v24[data-panel="community"],
.viewer-page .viewer-tab-panel-v24[data-panel="leaderboard"] {
  min-height: calc(100dvh - 126px) !important;
  padding: clamp(34px, 3vw, 64px) !important;
  background: rgba(5, 12, 25, .72) !important;
}

.viewer-page .viewer-tab-panel-v24[data-panel="recommend"] {
  min-height: calc(100dvh - 126px) !important;
  padding: 0 !important;
  background: rgba(5, 12, 25, .76) !important;
}

.viewer-page .viewer-static-portrait-layer-v33 {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.viewer-page .viewer-static-portrait-grid-v33 {
  position: absolute !important;
  inset: -96px !important;
  min-width: calc(100% + 192px) !important;
  min-height: calc(100% + 192px) !important;
  grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
  grid-auto-rows: clamp(220px, 14vw, 340px) !important;
  align-content: stretch !important;
  opacity: .46 !important;
}

.viewer-page .viewer-static-portrait-shade-v33 {
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(3,9,20,.24), rgba(5,12,25,.73) 16%, rgba(5,12,25,.79) 50%, rgba(5,12,25,.73) 84%, rgba(3,9,20,.24)),
    linear-gradient(180deg, rgba(3,9,20,.23), rgba(5,12,25,.66) 13%, rgba(5,12,25,.69) 86%, rgba(3,9,20,.23)) !important;
  z-index: 1 !important;
}

.viewer-page .viewer-tab-panel-v24 > :not(.viewer-static-portrait-layer-v33) {
  position: relative !important;
  z-index: 2 !important;
}

/* The recommendation feature belongs only to its own tab and sits in the
   exact visual centre without writing display styles onto the tab panel. */
body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-v22 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: calc(100dvh - 126px) !important;
  margin: 0 !important;
}

body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-content-v20,
body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-content-v21,
body[data-viewer-tab-v24="recommend"] .prominent-game-suggestion-content-v22 {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: auto !important;
  transform: none !important;
}

/* Clear, readable title chips. */
.viewer-page .viewer-about-block > h2,
.viewer-page .viewer-howto-card > h2,
.viewer-page .viewer-about-block > h2 > span,
.viewer-page .viewer-howto-card > h2 > span {
  color: #07111f !important;
  -webkit-text-fill-color: #07111f !important;
  text-shadow: none !important;
}

/* Character picker and profile editor are both restored. The picker always
   sits above the editor and its local portraits remain the main focus. */
.reviewer-character-modal-v35 {
  z-index: 90000 !important;
}

.reviewer-character-modal-backdrop-v35 {
  z-index: 0 !important;
}

.reviewer-character-modal-panel-v35 {
  position: relative !important;
  z-index: 1 !important;
}

.reviewer-character-section-v35,
.reviewer-character-games-v35,
.reviewer-character-game-v35 {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Owned catalogue results are visible but cannot be submitted. */
.game-suggestion-result-card-v29.is-already-owned-v38 {
  cursor: not-allowed !important;
  opacity: .68 !important;
  border-color: rgba(255, 169, 95, .52) !important;
  filter: saturate(.72) !important;
}

.game-suggestion-result-card-v29.is-already-owned-v38 b {
  color: #ffd29b !important;
}

@media (max-width: 1180px) {
  .viewer-page .viewer-static-portrait-grid-v33 {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-auto-rows: clamp(205px, 24vw, 320px) !important;
  }
}

@media (max-width: 760px) {
  .viewer-page #viewerTabHostV24 {
    width: calc(100vw - 8px) !important;
  }

  .viewer-page .viewer-tab-panel-v24[data-panel="overview"],
  .viewer-page .viewer-tab-panel-v24[data-panel="tierlists"],
  .viewer-page .viewer-tab-panel-v24[data-panel="community"],
  .viewer-page .viewer-tab-panel-v24[data-panel="leaderboard"] {
    padding: 16px !important;
    border-radius: 20px !important;
  }

  .viewer-page .viewer-static-portrait-grid-v33 {
    inset: -38px !important;
    min-width: calc(100% + 76px) !important;
    min-height: calc(100% + 76px) !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: clamp(170px, 52vw, 252px) !important;
    opacity: .36 !important;
  }
}

/* === END VIEWER_RECOVERY_TABS_CHARACTERS_STYLES_V38 === */
/* ===== END styles.css ===== */

/* ===== BEGIN reviewer-recovery-v50.css ===== */
/* Consolidated recovery V50. This is the only post-V38 reviewer stylesheet loaded. */

html.recovery-v50 .viewer-static-portrait-layer-v33,
html.recovery-v50 #spinnerAudioUnlockV7 {
  display: none !important;
}

/* Stable overview rows. */
html.recovery-v50 .viewer-page .favourite-carousel,
html.recovery-v50 .viewer-page .movie-carousel,
html.recovery-v50 .viewer-page .tv-carousel {
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  padding: 14px !important;
  border: 1px solid rgba(154, 180, 220, .25) !important;
  border-radius: 20px !important;
  background: rgba(8, 16, 29, .78) !important;
  box-shadow: none !important;
}

html.recovery-v50 .viewer-page .favourite-carousel::before,
html.recovery-v50 .viewer-page .favourite-carousel::after,
html.recovery-v50 .viewer-page .movie-carousel::before,
html.recovery-v50 .viewer-page .movie-carousel::after,
html.recovery-v50 .viewer-page .tv-carousel::before,
html.recovery-v50 .viewer-page .tv-carousel::after {
  display: none !important;
}

html.recovery-v50 .viewer-page .overview-track-v50 {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: clamp(112px, 10vw, 176px) !important;
  align-items: start !important;
  justify-content: start !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 0 6px !important;
  transform: none !important;
  animation: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

html.recovery-v50 .viewer-page .overview-poster-v50 {
  width: 100%;
  min-width: 0;
  scroll-snap-align: start;
}

html.recovery-v50 .reviewer-poster-button-v50 {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: inherit !important;
  cursor: pointer !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transform: none !important;
}

html.recovery-v50 .reviewer-poster-button-v50:hover,
html.recovery-v50 .reviewer-poster-button-v50:focus-visible {
  transform: translateY(-2px) !important;
  outline: none !important;
  box-shadow: 0 13px 30px rgba(0, 0, 0, .34) !important;
}

html.recovery-v50 .reviewer-poster-button-v50 img,
html.recovery-v50 .reviewer-poster-button-v50 > span {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 2 / 3 !important;
  height: auto !important;
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 14px !important;
  object-fit: cover !important;
  background: linear-gradient(160deg, #14243d, #080f1b) !important;
}

html.recovery-v50 .overview-empty-v50 {
  min-height: 120px;
  display: grid;
  place-items: center;
  margin: 0;
  color: rgba(224,235,250,.68);
}

/* Reviewer own card favourites: no overlap, fixed independent poster cells. */
html.recovery-v50 .viewer-page .reviewer-own-favourites-v18 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
  min-width: 0 !important;
}

html.recovery-v50 .viewer-page .reviewer-own-favourites-v18 > section {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 12px !important;
  margin: 0 !important;
  border-radius: 16px !important;
}

html.recovery-v50 .viewer-page .reviewer-own-games-v16,
html.recovery-v50 .viewer-page .reviewer-own-media-v18,
html.recovery-v50 .viewer-page .reviewer-member-favourites-v35 section > div {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

html.recovery-v50 .viewer-page .reviewer-own-games-v16 .reviewer-poster-button-v50,
html.recovery-v50 .viewer-page .reviewer-own-media-v18 .reviewer-poster-button-v50,
html.recovery-v50 .viewer-page .reviewer-member-favourites-v35 .reviewer-poster-button-v50 {
  min-width: 0 !important;
  width: 100% !important;
}

/* Selected characters: four horizontal groups along the card bottom. */
html.recovery-v50 .viewer-page .reviewer-character-showcase-v50 {
  width: 100% !important;
  margin: 12px 0 0 !important;
  padding: 12px !important;
  border: 1px solid rgba(129, 181, 236, .22) !important;
  border-radius: 17px !important;
  background: rgba(7, 16, 29, .73) !important;
}

html.recovery-v50 .viewer-page .reviewer-character-showcase-groups-v50 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
}

html.recovery-v50 .viewer-page .reviewer-character-showcase-groups-v50 > section {
  display: block !important;
  min-width: 0 !important;
}

html.recovery-v50 .viewer-page .reviewer-character-showcase-groups-v50 small {
  display: block !important;
  margin: 0 0 8px !important;
  color: #b8c6d9 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}

html.recovery-v50 .viewer-page .reviewer-character-showcase-groups-v50 section > div {
  display: flex !important;
  flex-flow: row nowrap !important;
  gap: 8px !important;
  align-items: center !important;
  overflow: visible !important;
}

html.recovery-v50 .reviewer-character-selected-v50 {
  appearance: none !important;
  flex: 0 0 clamp(58px, 4.8vw, 76px) !important;
  width: clamp(58px, 4.8vw, 76px) !important;
  height: clamp(58px, 4.8vw, 76px) !important;
  padding: 3px !important;
  margin: 0 !important;
  border: 1px solid rgba(124, 188, 255, .34) !important;
  border-radius: 14px !important;
  background: linear-gradient(165deg, rgba(34, 64, 101, .94), rgba(9, 17, 30, .96)) !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

html.recovery-v50 .reviewer-character-selected-v50 img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  background: transparent !important;
  transform: none !important;
}

html.recovery-v50 .reviewer-character-selected-v50:hover,
html.recovery-v50 .reviewer-character-selected-v50:focus-visible {
  border-color: #82dcff !important;
  transform: translateY(-2px) !important;
  outline: none !important;
}

/* Fast character picker: no eager bulk loading and no cropped heads. */
html.recovery-v50 .reviewer-character-modal-v35 {
  z-index: 85000 !important;
}

html.recovery-v50 .reviewer-character-modal-panel-v35 {
  width: min(1500px, calc(100vw - 24px)) !important;
  max-height: calc(100vh - 18px) !important;
}

html.recovery-v50 .reviewer-character-picker-group-v50 {
  content-visibility: auto;
  contain-intrinsic-size: 900px;
}

html.recovery-v50 .reviewer-character-picker-grid-v50 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
  gap: 10px !important;
}

html.recovery-v50 .reviewer-character-option-v35 {
  display: grid !important;
  grid-template-rows: minmax(128px, 1fr) auto !important;
  min-width: 0 !important;
  min-height: 174px !important;
  padding: 6px !important;
  gap: 6px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

html.recovery-v50 .reviewer-character-option-v35 > span.reviewer-character-image-v50 {
  display: grid !important;
  place-items: end center !important;
  min-height: 128px !important;
  width: 100% !important;
  padding: 3px !important;
  border-radius: 11px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #172a46, #08111f) !important;
}

html.recovery-v50 .reviewer-character-option-v35 img {
  display: block !important;
  width: 100% !important;
  height: 128px !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  background: transparent !important;
}

html.recovery-v50 .reviewer-character-option-v35 > b {
  display: block !important;
  min-height: 28px !important;
  color: #f3f6fb !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
}

/* Tabs: misplaced sections must never be visible inside Tier Lists. */
html.recovery-v50 #viewerTabHostV24 [data-panel="tierlists"] > .reviewer-members-section,
html.recovery-v50 #viewerTabHostV24 [data-panel="tierlists"] > .community-leaderboard-section,
html.recovery-v50 #viewerTabHostV24 [data-panel="tierlists"] .reviewer-members-section,
html.recovery-v50 #viewerTabHostV24 [data-panel="tierlists"] .community-leaderboard-section {
  display: none !important;
}

/* Details modal always sits above reviewer profile and character picker. */
html.recovery-v50 .reviewer-details-modal-v50 {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: none;
  overflow-y: auto;
  padding: 24px;
}

html.recovery-v50 .reviewer-details-modal-v50.open {
  display: block !important;
}

html.recovery-v50 .reviewer-details-backdrop-v50 {
  position: fixed;
  inset: 0;
  background: rgba(3, 8, 17, .82);
  backdrop-filter: blur(13px);
}

html.recovery-v50 .reviewer-details-panel-v50 {
  position: relative;
  width: min(1040px, calc(100vw - 24px));
  min-height: 260px;
  margin: 12px auto 40px;
  padding: 24px;
  border: 1px solid rgba(155, 197, 240, .26);
  border-radius: 26px;
  background: linear-gradient(155deg, rgba(18, 30, 50, .99), rgba(7, 13, 24, .99));
  box-shadow: 0 32px 90px rgba(0,0,0,.58);
  color: #f5f8ff;
}

html.recovery-v50 .reviewer-details-close-v50 {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 29px;
  cursor: pointer;
}

html.recovery-v50 .reviewer-details-content-v50 {
  display: grid;
  gap: 18px;
}

html.recovery-v50 .reviewer-details-content-v50.media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(7,13,24,.96), rgba(7,13,24,.78)), var(--v50-backdrop) center / cover;
  opacity: .55;
}

html.recovery-v50 .reviewer-details-hero-v50 {
  display: grid;
  grid-template-columns: clamp(180px, 24vw, 290px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

html.recovery-v50 .reviewer-details-art-v50 {
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: 10px;
  border-radius: 20px;
  background: linear-gradient(160deg, #19304e, #07101c);
  overflow: hidden;
}

html.recovery-v50 .reviewer-details-art-v50 img {
  display: block;
  width: 100%;
  height: min(54vh, 440px);
  border-radius: 14px;
  object-fit: contain;
  object-position: center center;
}

html.recovery-v50 .reviewer-details-art-v50:not(.character) img {
  object-fit: cover;
  aspect-ratio: 2 / 3;
}

html.recovery-v50 .reviewer-details-hero-v50 > div:last-child > span {
  display: block;
  margin: 4px 0 8px;
  color: #85dfff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html.recovery-v50 .reviewer-details-hero-v50 h2 {
  margin: 0 54px 12px 0;
  color: #fff;
  font-size: clamp(34px, 5vw, 64px);
  line-height: .96;
}

html.recovery-v50 .reviewer-details-hero-v50 p,
html.recovery-v50 .reviewer-details-content-v50 section p,
html.recovery-v50 .reviewer-details-hero-v50 blockquote {
  color: rgba(235,242,252,.84);
  font-size: 15px;
  line-height: 1.6;
}

html.recovery-v50 .reviewer-details-content-v50 section {
  padding: 17px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 17px;
  background: rgba(255,255,255,.045);
}

html.recovery-v50 .reviewer-details-content-v50 h3 {
  margin: 0 0 12px;
  font-size: 17px;
}

html.recovery-v50 .reviewer-details-pills-v50 {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 14px;
}

html.recovery-v50 .reviewer-details-pills-v50 span {
  padding: 6px 9px;
  border: 1px solid rgba(154,207,255,.19);
  border-radius: 999px;
  background: rgba(93,160,223,.11);
  color: #dcebfa;
  font-size: 11px;
  font-weight: 750;
}

html.recovery-v50 .reviewer-details-score-grid-v50 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

html.recovery-v50 .reviewer-details-score-grid-v50 > div {
  padding: 13px;
  border-radius: 14px;
  background: rgba(5,12,22,.58);
}

html.recovery-v50 .reviewer-details-score-grid-v50 small {
  display: block;
  color: #a9b7c8;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

html.recovery-v50 .reviewer-details-score-grid-v50 strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 24px;
}

html.recovery-v50 .reviewer-detail-cards-v50 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

html.recovery-v50 .reviewer-detail-cards-v50 article {
  display: flex;
  gap: 11px;
  padding: 13px;
  border-radius: 14px;
  background: rgba(5,12,22,.57);
}

html.recovery-v50 .reviewer-detail-cards-v50 img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

html.recovery-v50 .reviewer-detail-cards-v50 p {
  margin: 5px 0 0;
  font-size: 13px !important;
}

html.recovery-v50 .reviewer-details-cast-v50 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

html.recovery-v50 .reviewer-details-cast-v50 article {
  display: grid;
  gap: 4px;
}

html.recovery-v50 .reviewer-details-cast-v50 img {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 11px;
  object-fit: cover;
}

html.recovery-v50 .reviewer-details-cast-v50 small {
  color: #aeb9c9;
}

html.recovery-v50 .reviewer-details-link-v50 {
  justify-self: start;
  padding: 11px 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6cd9ff, #b58aff);
  color: #0a1423;
  font-weight: 900;
  text-decoration: none;
}

html.recovery-v50 .spinner-sound-test-v50 {
  margin-top: 10px;
}

@media (max-width: 1000px) {
  html.recovery-v50 .viewer-page .reviewer-character-showcase-groups-v50 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  html.recovery-v50 .viewer-page .reviewer-own-favourites-v18,
  html.recovery-v50 .viewer-page .reviewer-character-showcase-groups-v50 {
    grid-template-columns: 1fr !important;
  }
  html.recovery-v50 .reviewer-details-modal-v50 { padding: 8px; }
  html.recovery-v50 .reviewer-details-panel-v50 { padding: 17px; }
  html.recovery-v50 .reviewer-details-hero-v50 { grid-template-columns: 1fr; }
  html.recovery-v50 .reviewer-details-art-v50 { min-height: 220px; }
  html.recovery-v50 .reviewer-character-picker-grid-v50 { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)) !important; }
}
/* ===== END reviewer-recovery-v50.css ===== */

/* ===== BEGIN viewer-portrait-background-v52.css ===== */
/* V52: separate lightweight game portrait backgrounds per Viewer tab. */

html.portrait-background-v52 .viewer-page .viewer-tab-panel-v24[data-panel="overview"],
html.portrait-background-v52 .viewer-page .viewer-tab-panel-v24[data-panel="tierlists"],
html.portrait-background-v52 .viewer-page .viewer-tab-panel-v24[data-panel="community"],
html.portrait-background-v52 .viewer-page .viewer-tab-panel-v24[data-panel="leaderboard"] {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: rgba(5, 12, 25, .70) !important;
}

html.portrait-background-v52 .viewer-page .viewer-portrait-layer-v52 {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(69, 190, 235, .17), transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(169, 105, 244, .15), transparent 36%),
    #071321 !important;
}

html.portrait-background-v52 .viewer-page .viewer-portrait-grid-v52 {
  position: absolute !important;
  inset: -82px !important;
  display: grid !important;
  grid-template-columns: repeat(var(--portrait-columns-v52, 9), minmax(0, 1fr)) !important;
  grid-auto-rows: clamp(208px, 15vw, 330px) !important;
  align-content: start !important;
  gap: clamp(9px, .8vw, 16px) !important;
  opacity: .40 !important;
  transform: rotate(-1.25deg) scale(1.035) !important;
  transform-origin: center top !important;
  filter: saturate(.92) contrast(1.04) brightness(.93) !important;
}

html.portrait-background-v52 .viewer-page .viewer-portrait-card-v52 {
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: clamp(11px, .9vw, 17px) !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(125, 211, 252, .15), transparent 46%),
    linear-gradient(145deg, rgba(22, 34, 54, .98), rgba(10, 15, 29, .98)) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .34) !important;
}

html.portrait-background-v52 .viewer-page .viewer-portrait-card-v52 img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  opacity: 1 !important;
}

html.portrait-background-v52 .viewer-page .viewer-portrait-shade-v52 {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(90deg, rgba(3, 9, 20, .26), rgba(5, 12, 25, .70) 15%, rgba(5, 12, 25, .80) 50%, rgba(5, 12, 25, .70) 85%, rgba(3, 9, 20, .26)),
    linear-gradient(180deg, rgba(3, 9, 20, .24), rgba(5, 12, 25, .65) 13%, rgba(5, 12, 25, .70) 87%, rgba(3, 9, 20, .24)) !important;
}

html.portrait-background-v52 .viewer-page .viewer-tab-panel-v24 > :not(.viewer-portrait-layer-v52) {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 760px) {
  html.portrait-background-v52 .viewer-page .viewer-portrait-grid-v52 {
    inset: -42px !important;
    grid-auto-rows: 184px !important;
    gap: 8px !important;
    opacity: .34 !important;
  }
}
/* ===== END viewer-portrait-background-v52.css ===== */

/* ===== BEGIN reviewer-infinite-media-carousel-v57.css ===== */
/* V57: centred reviewer game icons, evenly aligned characters, and automatic draggable overview showcases. */

html.reviewer-character-layout-v57 .viewer-page .reviewer-character-showcase-v57 {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 12px 0 0 !important;
  padding: clamp(14px, 1.25vw, 19px) !important;
  container-type: inline-size;
}

@media (min-width: 900px) {
  html.reviewer-character-layout-v57 .viewer-page .reviewer-own-card-v16 {
    grid-template-areas:
      "kicker kicker"
      "identity favourites"
      "bio favourites"
      "stats stats"
      "session session"
      "characters characters" !important;
  }

  html.reviewer-character-layout-v57 .viewer-page .reviewer-own-card-v16 > .reviewer-character-showcase-v57 {
    grid-area: characters !important;
    grid-column: 1 / -1 !important;
    align-self: stretch !important;
  }
}

html.reviewer-character-layout-v57 .viewer-page .reviewer-character-showcase-groups-v57 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) !important;
  gap: clamp(14px, 1.35vw, 22px) !important;
  align-items: start !important;
  justify-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
}

html.reviewer-character-layout-v57 .viewer-page .reviewer-character-game-v57 {
  display: grid !important;
  grid-template-rows: 58px 16px auto !important;
  align-content: start !important;
  justify-items: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

html.reviewer-character-layout-v57 .viewer-page .reviewer-character-game-v57.is-dbd-v57 {
  grid-template-rows: 58px auto !important;
}

html.reviewer-character-layout-v57 .viewer-page .reviewer-character-game-header-v57 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}

html.reviewer-character-layout-v57 .viewer-page .reviewer-game-icon-v57 {
  display: block !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  justify-self: center !important;
  margin: 0 !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  filter: drop-shadow(0 7px 13px rgba(0, 0, 0, .38)) !important;
}

html.reviewer-character-layout-v57 .viewer-page .reviewer-game-icon-v57.is-overwatch {
  width: 58px !important;
  height: 58px !important;
  background-image: url('/reviewer-game-icon-overwatch-v57.png?v=57') !important;
}

html.reviewer-character-layout-v57 .viewer-page .reviewer-game-icon-v57.is-marvelRivals {
  width: 88px !important;
  height: 54px !important;
  background-image: url('/reviewer-game-icon-marvel-rivals-v57.png?v=57') !important;
}

html.reviewer-character-layout-v57 .viewer-page .reviewer-game-icon-v57.is-dbd {
  width: 82px !important;
  height: 55px !important;
  background-image: url('/reviewer-game-icon-dbd-v57.png?v=57') !important;
}

html.reviewer-character-layout-v57 .viewer-page .reviewer-character-category-label-v57,
html.reviewer-character-layout-v57 .viewer-page .reviewer-character-dbd-category-v57 > small {
  display: block !important;
  height: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
  color: rgba(223, 234, 248, .8) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 16px !important;
  letter-spacing: .09em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

html.reviewer-character-layout-v57 .viewer-page .reviewer-character-game-row-v57 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(7px, .7vw, 11px) !important;
  align-items: center !important;
  justify-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

html.reviewer-character-layout-v57 .viewer-page .reviewer-character-dbd-groups-v57 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.15vw, 20px) !important;
  width: 100% !important;
  min-width: 0 !important;
}

html.reviewer-character-layout-v57 .viewer-page .reviewer-character-dbd-category-v57 {
  display: grid !important;
  grid-template-rows: 16px auto !important;
  min-width: 0 !important;
}

html.reviewer-character-layout-v57 .viewer-page .reviewer-character-selected-v57 {
  appearance: none !important;
  display: block !important;
  justify-self: center !important;
  width: min(100%, 84px) !important;
  min-width: 0 !important;
  max-width: 84px !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  padding: 4px !important;
  margin: 0 !important;
  border: 1px solid rgba(124, 188, 255, .42) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(69, 124, 181, .24), transparent 55%),
    linear-gradient(165deg, rgba(31, 57, 91, .96), rgba(7, 14, 25, .98)) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .24) !important;
  overflow: hidden !important;
}

html.reviewer-character-layout-v57 .viewer-page .reviewer-character-selected-v57 img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  background: transparent !important;
  transform: scale(1.16) !important;
  transform-origin: center bottom !important;
}

html.reviewer-character-layout-v57 .viewer-page .reviewer-character-selected-v57.is-overwatch img,
html.reviewer-character-layout-v57 .viewer-page .reviewer-character-selected-v57.is-marvelRivals img {
  transform: scale(1.17) !important;
  transform-origin: center center !important;
}

html.reviewer-character-layout-v57 .viewer-page .reviewer-character-selected-v57.is-dbdSurvivors img,
html.reviewer-character-layout-v57 .viewer-page .reviewer-character-selected-v57.is-dbdKillers img {
  transform: scale(1.2) !important;
  transform-origin: center bottom !important;
}

html.reviewer-character-layout-v57 .viewer-page .reviewer-character-selected-v57:hover,
html.reviewer-character-layout-v57 .viewer-page .reviewer-character-selected-v57:focus-visible {
  border-color: #8be3ff !important;
  box-shadow: 0 10px 24px rgba(71, 190, 255, .2) !important;
  transform: translateY(-2px) !important;
  outline: none !important;
}

html.reviewer-character-layout-v57 .viewer-page .reviewer-member-card .reviewer-character-game-v57 {
  padding: 9px !important;
  border-radius: 14px !important;
  background: rgba(5, 12, 23, .34) !important;
}

html.reviewer-character-layout-v57 .viewer-page .reviewer-member-card .reviewer-character-selected-v57 {
  width: min(100%, 68px) !important;
  max-width: 68px !important;
}

/* Recent Reviews keeps vertical page scrolling and supports click-and-drag horizontally. */
.viewer-page .recent-review-track-v24 {
  cursor: grab !important;
  scroll-snap-type: x proximity !important;
  touch-action: pan-y pinch-zoom !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.viewer-page .recent-review-track-v24.is-pointer-down-v57,
.viewer-page .recent-review-track-v24.is-dragging-v57 {
  cursor: grabbing !important;
  scroll-behavior: auto !important;
}

.viewer-page .recent-review-track-v24 img {
  -webkit-user-drag: none !important;
  user-drag: none !important;
  pointer-events: none !important;
}

.viewer-page .recent-review-track-v24.is-dragging-v57 .recent-review-card-v24 {
  transition: none !important;
}

/* Overview favourites: seamless forward-only infinite carousel, hidden scrollbars, drag control, and fuller poster sizing. */
html.recovery-v50 .viewer-page .favourite-carousel,
html.recovery-v50 .viewer-page .movie-carousel,
html.recovery-v50 .viewer-page .tv-carousel {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: clamp(290px, 21vw, 350px) !important;
  min-height: clamp(290px, 21vw, 350px) !important;
  overflow: hidden !important;
  padding: 12px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html.recovery-v50 .viewer-page .favourite-carousel::-webkit-scrollbar,
html.recovery-v50 .viewer-page .movie-carousel::-webkit-scrollbar,
html.recovery-v50 .viewer-page .tv-carousel::-webkit-scrollbar,
html.recovery-v50 .viewer-page #favouritePortraitTrack::-webkit-scrollbar,
html.recovery-v50 .viewer-page #favouriteMovieTrack::-webkit-scrollbar,
html.recovery-v50 .viewer-page #favouriteTvShowTrack::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html.recovery-v50 .viewer-page #favouritePortraitTrack.overview-showcase-track-v57,
html.recovery-v50 .viewer-page #favouriteMovieTrack.overview-showcase-track-v57,
html.recovery-v50 .viewer-page #favouriteTvShowTrack.overview-showcase-track-v57 {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  gap: clamp(12px, 1vw, 18px) !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  overscroll-behavior-x: contain !important;
  touch-action: pan-y pinch-zoom !important;
  cursor: grab !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  will-change: scroll-position;
  padding: 6px !important;
}

html.recovery-v50 .viewer-page .overview-showcase-track-v57 .overview-poster-v50 {
  flex: 0 0 clamp(150px, 11.5vw, 205px) !important;
  width: clamp(150px, 11.5vw, 205px) !important;
  min-width: clamp(150px, 11.5vw, 205px) !important;
  max-width: clamp(150px, 11.5vw, 205px) !important;
  scroll-snap-align: none !important;
}

html.recovery-v50 .viewer-page .overview-showcase-track-v57 .reviewer-poster-button-v50 {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  border-radius: 16px !important;
}

html.recovery-v50 .viewer-page .overview-showcase-track-v57 .reviewer-poster-button-v50 img,
html.recovery-v50 .viewer-page .overview-showcase-track-v57 .reviewer-poster-button-v50 > span {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 3 !important;
  border-radius: 16px !important;
  object-fit: cover !important;
}

html.recovery-v50 .viewer-page .overview-showcase-track-v57.is-pointer-down-v57,
html.recovery-v50 .viewer-page .overview-showcase-track-v57.is-dragging-v57 {
  cursor: grabbing !important;
  scroll-behavior: auto !important;
}

html.recovery-v50 .viewer-page .overview-showcase-track-v57 img {
  -webkit-user-drag: none !important;
  user-drag: none !important;
}

html.recovery-v50 .viewer-page .overview-showcase-track-v57.is-dragging-v57 .reviewer-poster-button-v50 {
  pointer-events: none !important;
}

/* Plex-style media information sheet with clearly marked ratings. */
html.recovery-v50 .reviewer-details-panel-v50.is-media-plex-v57 {
  overflow: hidden !important;
  background: linear-gradient(150deg, rgba(15, 25, 41, .99), rgba(5, 10, 19, .99)) !important;
}

html.recovery-v50 .reviewer-details-panel-v50.is-media-plex-v57 .reviewer-details-content-v50.media {
  position: relative !important;
  isolation: isolate !important;
}

html.recovery-v50 .reviewer-details-panel-v50.is-media-plex-v57 .reviewer-details-score-grid-v50 > div {
  position: relative !important;
  min-height: 82px !important;
  padding: 14px 14px 14px 52px !important;
}

html.recovery-v50 .reviewer-details-panel-v50.is-media-plex-v57 .reviewer-details-score-grid-v50 > div::before {
  position: absolute;
  left: 15px;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 23px;
}

html.recovery-v50 .reviewer-details-panel-v50.is-media-plex-v57 .is-tomatometer-v57::before { content: '🍅'; }
html.recovery-v50 .reviewer-details-panel-v50.is-media-plex-v57 .is-popcornmeter-v57::before { content: '🍿'; }
html.recovery-v50 .reviewer-details-panel-v50.is-media-plex-v57 .is-tmdb-v57::before { content: '★'; color: #90e5c2; }
html.recovery-v50 .reviewer-details-panel-v50.is-media-plex-v57 .is-imdb-v57::before { content: '★'; color: #f5c518; }
html.recovery-v50 .reviewer-details-panel-v50.is-media-plex-v57 .is-metascore-v57::before { content: 'M'; color: #7fe291; font-weight: 900; }

/* Leaderboard must always render inside its own tab and its period controls remain clickable. */
html.recovery-v50 .viewer-page [data-panel="leaderboard"].is-active {
  display: block !important;
}

html.recovery-v50 .viewer-page [data-panel="leaderboard"] > .community-leaderboard-section {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

html.recovery-v50 .viewer-page .community-leaderboard-toolbar,
html.recovery-v50 .viewer-page .community-leaderboard-tabs,
html.recovery-v50 .viewer-page .community-leaderboard-tabs button {
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

html.recovery-v50 .viewer-page .community-leaderboard-tabs button {
  cursor: pointer !important;
}

@container (max-width: 760px) {
  html.reviewer-character-layout-v57 .viewer-page .reviewer-character-showcase-groups-v57 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html.reviewer-character-layout-v57 .viewer-page .reviewer-character-game-v57.is-dbd-v57 {
    grid-column: 1 / -1 !important;
  }
}

@container (max-width: 480px) {
  html.reviewer-character-layout-v57 .viewer-page .reviewer-character-showcase-groups-v57 {
    grid-template-columns: 1fr !important;
  }

  html.reviewer-character-layout-v57 .viewer-page .reviewer-character-game-v57.is-dbd-v57 {
    grid-column: auto !important;
  }
}

@media (max-width: 620px) {
  html.reviewer-character-layout-v57 .viewer-page .reviewer-character-dbd-groups-v57 {
    grid-template-columns: 1fr !important;
  }

  html.reviewer-character-layout-v57 .viewer-page .reviewer-character-selected-v57 {
    max-width: 78px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.recovery-v50 .viewer-page .overview-track-v50.overview-showcase-track-v57 {
    scroll-behavior: auto !important;
  }
}

@media (max-width: 760px) {
  html.recovery-v50 .viewer-page .favourite-carousel,
  html.recovery-v50 .viewer-page .movie-carousel,
  html.recovery-v50 .viewer-page .tv-carousel {
    height: 270px !important;
    min-height: 270px !important;
  }

  html.recovery-v50 .viewer-page .overview-showcase-track-v57 .overview-poster-v50 {
    flex-basis: 145px !important;
    width: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
  }
}
/* ===== END reviewer-infinite-media-carousel-v57.css ===== */

/* ===== BEGIN reviewer-carousel-dbd-selection-fix-v60.css ===== */
/* V60: compact verified character picker, compact control approvals, and shared carousel marker. */
html.recovery-v50 .viewer-page .overview-showcase-track-v60 {
  animation: none !important;
}

/* Fixed-size centred tiles. This removes the stretched 1fr rows that broke DBD. */
html.recovery-v50 .reviewer-character-picker-group-v60 {
  content-visibility: visible !important;
  contain: none !important;
}
html.recovery-v50 .reviewer-character-picker-group-v60 > header {
  align-items: flex-start !important;
  gap: 16px !important;
}
html.recovery-v50 .reviewer-character-picker-grid-v60 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, 112px) !important;
  justify-content: center !important;
  align-items: start !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}
html.recovery-v50 .reviewer-character-option-v60 {
  display: grid !important;
  grid-template-rows: 138px auto auto !important;
  align-content: start !important;
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  min-height: 184px !important;
  height: auto !important;
  padding: 7px !important;
  gap: 5px !important;
  overflow: hidden !important;
}
html.recovery-v50 .reviewer-character-option-v60 > span.reviewer-character-image-v50 {
  width: 98px !important;
  height: 138px !important;
  min-height: 138px !important;
  padding: 2px !important;
  place-items: end center !important;
}
html.recovery-v50 .reviewer-character-option-v60 img {
  display: block !important;
  width: 98px !important;
  height: 134px !important;
  max-width: 98px !important;
  max-height: 134px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  margin: 0 auto !important;
  border: 0 !important;
  background: transparent !important;
}
html.recovery-v50 .reviewer-character-option-v60 > b {
  width: 100% !important;
  min-height: 25px !important;
  font-size: 10px !important;
  line-height: 1.14 !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
}
html.recovery-v50 .reviewer-character-variant-v60 {
  display: block !important;
  width: 100% !important;
  color: #8bdcff !important;
  font-size: 8px !important;
  line-height: 1.15 !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
}

/* Control-page approval media must never expand to poster-height. */
html.recovery-v50 .control-page .reviewer-admin-media-v16 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
  padding: 0 16px 14px !important;
}
html.recovery-v50 .control-page .reviewer-admin-media-v16 figure {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
html.recovery-v50 .control-page .reviewer-admin-media-v16 img {
  display: block !important;
  width: 100% !important;
  height: 150px !important;
  max-height: 150px !important;
  object-fit: cover !important;
  object-position: center !important;
}
html.recovery-v50 .control-page .reviewer-character-selected-v35,
html.recovery-v50 .control-page .reviewer-character-selected-v50 {
  width: 74px !important;
  height: 86px !important;
  max-width: 74px !important;
  max-height: 86px !important;
}
html.recovery-v50 .control-page .reviewer-character-selected-v35 img,
html.recovery-v50 .control-page .reviewer-character-selected-v50 img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

@media (max-width: 760px) {
  html.recovery-v50 .reviewer-character-picker-grid-v60 {
    grid-template-columns: repeat(auto-fit, 94px) !important;
    gap: 9px !important;
  }
  html.recovery-v50 .reviewer-character-option-v60 {
    width: 94px !important;
    min-width: 94px !important;
    max-width: 94px !important;
    grid-template-rows: 118px auto auto !important;
    min-height: 163px !important;
  }
  html.recovery-v50 .reviewer-character-option-v60 > span.reviewer-character-image-v50,
  html.recovery-v50 .reviewer-character-option-v60 img {
    width: 80px !important;
    max-width: 80px !important;
    height: 116px !important;
    max-height: 116px !important;
    min-height: 116px !important;
  }
  html.recovery-v50 .control-page .reviewer-admin-media-v16 { grid-template-columns: 1fr !important; }
}
/* ===== END reviewer-carousel-dbd-selection-fix-v60.css ===== */

/* ===== BEGIN reviewer-character-routing-control-tabs-v63.css ===== */
/* V63 supplied game icons and private control page tabs. */
html.recovery-v50 .reviewer-game-icon-v57 {
  display: block !important;
  width: 64px !important;
  height: 48px !important;
  margin-inline: auto !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
html.recovery-v50 .reviewer-game-icon-v57.is-overwatch {
  background-image: url('/reviewer-game-icon-overwatch-v63.png?v=63') !important;
}
html.recovery-v50 .reviewer-game-icon-v57.is-marvelRivals {
  background-image: url('/reviewer-game-icon-marvel-rivals-v63.png?v=63') !important;
}
html.recovery-v50 .reviewer-game-icon-v57.is-dbd {
  width: 72px !important;
  background-image: url('/reviewer-game-icon-dbd-v63.png?v=63') !important;
}
html.recovery-v50 .reviewer-character-brand-icon-v63,
html.recovery-v50 .reviewer-character-brand-icon-v36 {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}
html.recovery-v50 .reviewer-character-brand-icon-v63 img,
html.recovery-v50 .reviewer-character-brand-icon-v36 img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 72px !important;
  max-height: 58px !important;
  object-fit: contain !important;
  object-position: center !important;
}
html.recovery-v50 .reviewer-character-game-header-v57 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
}

.control-page .control-tabs-v63 {
  position: sticky;
  top: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
  width: min(1500px, calc(100% - 24px));
  margin: 12px auto 16px;
  padding: 8px;
  border: 1px solid var(--line, #304159);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel, #111827) 92%, transparent);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .28);
  backdrop-filter: blur(18px);
}
.control-page .control-tabs-v63 button {
  min-height: 46px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .045);
  color: var(--text, #f6f8ff);
  font-weight: 900;
  cursor: pointer;
}
.control-page .control-tabs-v63 button:hover {
  border-color: rgba(127, 219, 255, .65);
  background: rgba(127, 219, 255, .1);
}
.control-page .control-tabs-v63 button.is-active {
  color: #07111d;
  border-color: transparent;
  background: linear-gradient(110deg, #7edcff, #bb83ff);
  box-shadow: 0 8px 24px rgba(128, 175, 255, .28);
}
.control-page .control-grid > .control-panel-hidden-v63 {
  display: none !important;
}
.control-page .control-grid > [data-control-tab-v63]:not(.control-panel-hidden-v63) {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
}
.control-page #reviewerProfileAdminPanel .reviewer-admin-media-v16 img {
  height: 150px !important;
  max-height: 150px !important;
  object-fit: cover !important;
}
.control-page #reviewerProfileAdminPanel .reviewer-character-selected-v35,
.control-page #reviewerProfileAdminPanel .reviewer-character-selected-v50 {
  width: 72px !important;
  height: 84px !important;
  max-width: 72px !important;
  max-height: 84px !important;
}
.control-page #reviewerProfileAdminPanel .reviewer-character-selected-v35 img,
.control-page #reviewerProfileAdminPanel .reviewer-character-selected-v50 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

@media (max-width: 760px) {
  .control-page .control-tabs-v63 {
    display: flex;
    overflow-x: auto;
    grid-template-columns: none;
    scrollbar-width: thin;
  }
  .control-page .control-tabs-v63 button {
    flex: 0 0 130px;
  }
  html.recovery-v50 .reviewer-game-icon-v57 {
    width: 54px !important;
    height: 42px !important;
  }
}
/* ===== END reviewer-character-routing-control-tabs-v63.css ===== */

/* ===== BEGIN reviewer-local-portraits-favourites-v64.css ===== */

/* V64 local portrait readiness and Overview information modal. */
html.recovery-v50.reviewer-portraits-ready-v64 .reviewer-character-option-v35 img,
html.recovery-v50.reviewer-portraits-ready-v64 .reviewer-character-selected-v35 img,
html.recovery-v50.reviewer-portraits-ready-v64 .reviewer-character-selected-v50 img {
  transition: none !important;
}

.overview-details-modal-v64 {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
}
.overview-details-modal-v64.open { display: block; }
.overview-details-backdrop-v64 {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 16, .82);
  backdrop-filter: blur(12px);
}
.overview-details-panel-v64 {
  position: relative;
  width: min(1000px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  margin: 20px auto;
  padding: 24px;
  border: 1px solid rgba(145, 193, 255, .25);
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(17, 27, 46, .99), rgba(7, 12, 23, .99));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
}
.overview-details-close-v64 {
  position: sticky;
  z-index: 3;
  top: 0;
  float: right;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}
.overview-details-hero-v64 {
  display: grid;
  grid-template-columns: minmax(170px, 240px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.overview-details-art-v64 img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.4);
}
.overview-details-hero-v64 > div:last-child > span {
  color: #8fddff;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .1em;
}
.overview-details-hero-v64 h2 {
  margin: 8px 0 12px;
  font-size: clamp(34px, 6vw, 62px);
  line-height: .96;
}
.overview-details-hero-v64 p,
.overview-details-hero-v64 blockquote {
  color: rgba(255,255,255,.8);
  line-height: 1.55;
}
.overview-details-content-v64 section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.overview-details-content-v64 h3 { margin: 0 0 12px; }
.overview-details-pills-v64,
.overview-details-scores-v64 {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.overview-details-pills-v64 span,
.overview-details-scores-v64 > div {
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.07);
}
.overview-details-scores-v64 > div span {
  display: block;
  color: rgba(255,255,255,.65);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.overview-details-scores-v64 > div strong {
  display: block;
  margin-top: 2px;
  font-size: 22px;
}
.overview-details-cast-v64 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  gap: 12px;
}
.overview-details-cast-v64 article {
  min-width: 0;
  padding: 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
}
.overview-details-cast-v64 img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 10px;
}
.overview-details-cast-v64 strong,
.overview-details-cast-v64 small { display: block; margin-top: 5px; }
.overview-details-cast-v64 small { color: rgba(255,255,255,.62); }
.overview-details-link-v64 {
  display: inline-flex;
  margin-top: 20px;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(110deg, #7edcff, #bb83ff);
  color: #07111d;
  font-weight: 900;
  text-decoration: none;
}
.overview-details-loading-v64 { padding: 80px 20px; text-align: center; font-size: 20px; }

@media (max-width: 700px) {
  .overview-details-panel-v64 { padding: 16px; }
  .overview-details-hero-v64 { grid-template-columns: 1fr; }
  .overview-details-art-v64 { max-width: 220px; }
}
/* ===== END reviewer-local-portraits-favourites-v64.css ===== */

/* ===== BEGIN reviewer-character-cache-click-fix-v65.css ===== */

html.recovery-v50 .reviewer-character-modal-v35 .reviewer-character-picker-grid-v35 {
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)) !important;
  gap: 12px !important;
}
html.recovery-v50 .reviewer-character-modal-v35 .reviewer-character-option-v35 {
  min-height: 190px !important;
}
html.recovery-v50 .reviewer-character-modal-v35 .reviewer-character-portrait-frame-v39 {
  min-height: 150px !important;
}
html.recovery-v50 .reviewer-character-modal-v35 .reviewer-character-option-v35 img {
  min-height: 142px !important;
  max-height: 158px !important;
  object-fit: contain !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-character-showcase-v35,
body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-character-showcase-v50 {
  max-width: 680px !important;
  padding: 12px !important;
}
body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-character-selected-v35,
body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-character-selected-v50,
body:not(.viewer-page) #reviewerProfileAdminPanel [class*="reviewer-character-selected-v"] {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;
}
body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-character-selected-v35 img,
body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-character-selected-v50 img,
body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-character-showcase-v35 img {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;
  object-fit: contain !important;
}

.favourite-info-modal-v65 { position:fixed; inset:0; z-index:120000; display:none; }
.favourite-info-modal-v65.open { display:block; }
.favourite-info-backdrop-v65 { position:absolute; inset:0; background:rgba(2,7,15,.84); backdrop-filter:blur(12px); }
.favourite-info-panel-v65 { position:relative; width:min(1000px,calc(100vw - 32px)); max-height:calc(100vh - 40px); overflow:auto; margin:20px auto; padding:24px; border:1px solid rgba(140,200,255,.24); border-radius:26px; background:linear-gradient(160deg,#111c31,#070d19); box-shadow:0 30px 90px rgba(0,0,0,.65); }
.favourite-info-panel-v65 > button { position:sticky; top:0; float:right; z-index:4; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.08); color:white; font-size:28px; }
.favourite-info-hero-v65 { display:grid; grid-template-columns:minmax(170px,240px) minmax(0,1fr); gap:24px; }
.favourite-info-hero-v65 > div img { width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:18px; }
.favourite-info-hero-v65 h2 { margin:8px 0 12px; font-size:clamp(34px,6vw,62px); line-height:.96; }
.favourite-info-hero-v65 p { line-height:1.55; color:rgba(255,255,255,.8); }
.favourite-info-content-v65 > section { margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); }
.favourite-info-pills-v65,.favourite-info-scores-v65 { display:flex; flex-wrap:wrap; gap:9px; }
.favourite-info-pills-v65 span,.favourite-info-scores-v65 > div { padding:9px 12px; border-radius:12px; background:rgba(255,255,255,.07); }
.favourite-info-scores-v65 small,.favourite-info-scores-v65 strong { display:block; }
.favourite-info-scores-v65 strong { font-size:22px; }
.favourite-info-cast-v65 { display:grid; grid-template-columns:repeat(auto-fill,minmax(105px,1fr)); gap:12px; }
.favourite-info-cast-v65 article { padding:8px; border-radius:14px; background:rgba(255,255,255,.05); }
.favourite-info-cast-v65 img { width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:10px; }
.favourite-info-cast-v65 strong,.favourite-info-cast-v65 small { display:block; margin-top:5px; }
.favourite-info-loading-v65 { padding:80px 20px; text-align:center; }
@media(max-width:700px) {
  .favourite-info-hero-v65 { grid-template-columns:1fr; }
  .favourite-info-hero-v65 > div { max-width:220px; }
}
/* ===== END reviewer-character-cache-click-fix-v65.css ===== */

/* ===== BEGIN control-reviewer-layout-v66.css ===== */

/* V66: tidy private Control reviewer profile approval cards only. */
body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-profile-admin-grid {
  display: grid !important;
  gap: 18px !important;
  margin-top: 18px !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-profile-admin-card {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-columns: minmax(250px, .8fr) minmax(420px, 1.4fr) !important;
  grid-template-areas:
    "header header"
    "details characters"
    "media media"
    "footer footer" !important;
  gap: 14px 18px !important;
  padding: 18px !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(16, 23, 39, .96), rgba(8, 13, 24, .94)) !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-admin-background-v16 {
  position: absolute !important;
  z-index: -2 !important;
  inset: 0 !important;
  opacity: .18 !important;
  background-position: center !important;
  background-size: cover !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-profile-admin-card::after {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(7, 12, 23, .92) 0%, rgba(7, 12, 23, .72) 45%, rgba(7, 12, 23, .86) 100%) !important;
  pointer-events: none !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-profile-admin-card > header {
  grid-area: header !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding-bottom: 13px !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-admin-avatar {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  border-radius: 15px !important;
  object-fit: cover !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-profile-admin-card > header strong {
  display: block !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-profile-admin-card > header span {
  display: block !important;
  margin-top: 3px !important;
  font-size: 11px !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-admin-profile-content {
  grid-area: details !important;
  align-self: start !important;
  display: grid !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 15px !important;
  background: rgba(4, 10, 22, .64) !important;
  font-size: 12px !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-admin-profile-content::before {
  content: "PROFILE DETAILS" !important;
  display: block !important;
  margin-bottom: 2px !important;
  color: #8edfff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-admin-profile-content > span {
  display: block !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.045) !important;
  line-height: 1.4 !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-rights-confirmed-v16 {
  color: #72efad !important;
  background: rgba(55, 196, 119, .09) !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-character-showcase-v35,
body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-character-showcase-v43,
body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-character-showcase-v44,
body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-character-showcase-v50,
body:not(.viewer-page) #reviewerProfileAdminPanel [class*="reviewer-character-showcase-v"] {
  grid-area: characters !important;
  align-self: start !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 14px !important;
  border-radius: 15px !important;
  background: rgba(4, 10, 22, .64) !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-character-showcase-v35::before,
body:not(.viewer-page) #reviewerProfileAdminPanel [class*="reviewer-character-showcase-v"]::before {
  content: "SELECTED CHARACTERS" !important;
  display: block !important;
  margin-bottom: 10px !important;
  color: #8edfff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-character-showcase-kicker-v35 {
  display: none !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-character-showcase-groups-v35,
body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-character-showcase-groups-v43,
body:not(.viewer-page) #reviewerProfileAdminPanel [class*="reviewer-character-showcase-groups-v"] {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-character-showcase-groups-v35 section,
body:not(.viewer-page) #reviewerProfileAdminPanel [class*="reviewer-character-showcase-groups-v"] section {
  min-width: 0 !important;
  padding: 10px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.045) !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-character-showcase-groups-v35 section > div,
body:not(.viewer-page) #reviewerProfileAdminPanel [class*="reviewer-character-showcase-groups-v"] section > div,
body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-character-inline-row-v43 {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  gap: 7px !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-character-showcase-groups-v35 small,
body:not(.viewer-page) #reviewerProfileAdminPanel [class*="reviewer-character-showcase-groups-v"] small {
  min-height: 24px !important;
  margin-bottom: 8px !important;
  color: rgba(238, 246, 255, .76) !important;
  line-height: 1.2 !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel [class*="reviewer-character-selected-v"] {
  display: block !important;
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 54px !important;
  min-width: 48px !important;
  min-height: 54px !important;
  max-width: 48px !important;
  max-height: 54px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #152a49, #091424) !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel [class*="reviewer-character-selected-v"] img,
body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-character-showcase-v35 img {
  display: block !important;
  width: 48px !important;
  height: 54px !important;
  min-width: 48px !important;
  min-height: 54px !important;
  max-width: 48px !important;
  max-height: 54px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-admin-media-v16 {
  grid-area: media !important;
  display: grid !important;
  grid-template-columns: minmax(180px, .42fr) minmax(360px, 1.58fr) !important;
  gap: 12px !important;
  padding: 0 !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-admin-media-v16 figure {
  display: grid !important;
  grid-template-rows: 120px auto !important;
  margin: 0 !important;
  padding: 8px !important;
  border-radius: 14px !important;
  background: rgba(4, 10, 22, .64) !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-admin-media-v16 img {
  width: 100% !important;
  height: 120px !important;
  min-height: 120px !important;
  max-height: 120px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-admin-media-v16 figure:first-child img {
  object-position: center 28% !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-admin-media-v16 figcaption {
  margin: 7px 2px 1px !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-profile-admin-card > footer {
  grid-area: footer !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding-top: 13px !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
}

@media (max-width: 1100px) {
  body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-profile-admin-card {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "header"
      "details"
      "characters"
      "media"
      "footer" !important;
  }
  body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-character-showcase-groups-v35,
  body:not(.viewer-page) #reviewerProfileAdminPanel [class*="reviewer-character-showcase-groups-v"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-profile-admin-card > header {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }
  body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-admin-statuses {
    grid-column: 1 / -1 !important;
    margin-left: 0 !important;
  }
  body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-character-showcase-groups-v35,
  body:not(.viewer-page) #reviewerProfileAdminPanel [class*="reviewer-character-showcase-groups-v"] {
    grid-template-columns: 1fr !important;
  }
  body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-admin-media-v16 {
    grid-template-columns: 1fr !important;
  }
  body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-profile-admin-card > footer {
    justify-content: flex-start !important;
  }
}
/* ===== END control-reviewer-layout-v66.css ===== */

/* ===== BEGIN onboarding-v68.css ===== */
/* === ONBOARDING_COMMUNITY_ACCOUNTS_STYLE_V68 === */
body.onboarding-pending-v68 {
  overflow: hidden !important;
}

.onboarding-v68 {
  --onboarding-blue: #66d7ff;
  --onboarding-purple: #a978ff;
  --onboarding-pink: #ff6fc8;
  position: fixed;
  inset: 0;
  z-index: 250000;
  overflow: auto;
  color: #f8fbff;
  background: #050914;
  opacity: 1;
  animation: onboardingFadeInV68 .72s cubic-bezier(.2,.75,.2,1) both;
}

.onboarding-v68[hidden] { display: none !important; }

.onboarding-v68.is-leaving {
  pointer-events: none;
  animation: onboardingFadeOutV68 .52s ease both;
}

.onboarding-backdrop-v68 {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 12%, rgba(74,180,255,.22), transparent 34%),
    radial-gradient(circle at 86% 78%, rgba(164,91,255,.22), transparent 38%),
    linear-gradient(145deg, #050914 0%, #081224 48%, #100b25 100%);
}

.onboarding-backdrop-v68::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3,7,16,.92) 0%, rgba(3,7,16,.68) 45%, rgba(3,7,16,.78) 100%);
  backdrop-filter: blur(8px);
}

.onboarding-tiles-v68 {
  position: absolute;
  inset: -12vh -6vw;
  display: grid;
  grid-template-columns: repeat(9, minmax(110px, 1fr));
  gap: 14px;
  transform: rotate(-7deg) scale(1.08);
  opacity: .36;
  filter: saturate(.85);
}

.onboarding-tiles-v68 span {
  min-height: 210px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  animation: onboardingTileFloatV68 10s ease-in-out infinite alternate;
  animation-delay: var(--tile-delay);
}

.onboarding-tiles-v68 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.onboarding-orb-v68 {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .26;
  animation: onboardingOrbV68 8s ease-in-out infinite alternate;
}
.onboarding-orb-one-v68 { left: 4%; top: 2%; background: #3cc8ff; }
.onboarding-orb-two-v68 { right: 2%; bottom: 0; background: #ab5dff; animation-delay: -3s; }

.onboarding-noise-v68 {
  position: absolute;
  inset: 0;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.onboarding-shell-v68 {
  position: relative;
  z-index: 2;
  width: min(1500px, calc(100vw - 56px));
  min-height: 100%;
  margin: auto;
  padding: clamp(34px, 6vh, 76px) 0;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  gap: clamp(34px, 6vw, 92px);
  align-items: center;
}

.onboarding-brand-v68 {
  max-width: 760px;
  animation: onboardingRiseV68 .78s .08s cubic-bezier(.2,.8,.2,1) both;
}

.onboarding-logo-v68 {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(88,214,255,.22), rgba(162,105,255,.24));
  box-shadow: 0 24px 60px rgba(55,147,255,.2), inset 0 1px rgba(255,255,255,.18);
}
.onboarding-logo-v68 span {
  font-size: 38px;
  font-weight: 1000;
  background: linear-gradient(130deg, #fff, #82dcff 48%, #ca9aff);
  -webkit-background-clip: text;
  color: transparent;
}

.onboarding-eyebrow-v68,
.onboarding-step-heading-v68 > span {
  color: var(--onboarding-blue);
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .16em;
}

.onboarding-brand-v68 h1 {
  margin: 15px 0 22px;
  max-width: 820px;
  font-size: clamp(48px, 5.6vw, 88px);
  line-height: .96;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.onboarding-brand-v68 > div > p {
  max-width: 650px;
  margin: 0;
  color: rgba(236,245,255,.72);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
}

.onboarding-progress-v68 {
  width: min(580px, 100%);
  margin-top: 36px;
}
.onboarding-progress-v68 > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 9px;
  color: rgba(235,245,255,.68);
  font-size: 12px;
  font-weight: 800;
}
.onboarding-progress-track-v68 {
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.35);
}
.onboarding-progress-track-v68 i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--onboarding-blue), var(--onboarding-purple), var(--onboarding-pink));
  box-shadow: 0 0 25px rgba(93,211,255,.48);
  transition: width .5s cubic-bezier(.2,.8,.2,1);
}

.onboarding-card-v68 {
  min-height: 610px;
  padding: 1px;
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(117,218,255,.42), rgba(255,255,255,.08) 36%, rgba(170,103,255,.38));
  box-shadow: 0 40px 100px rgba(0,0,0,.5);
  animation: onboardingCardInV68 .8s .14s cubic-bezier(.2,.8,.2,1) both;
}

.onboarding-screen-v68 {
  min-height: 608px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 31px;
  background:
    linear-gradient(160deg, rgba(16,27,47,.96), rgba(8,13,26,.98)),
    rgba(8,13,26,.98);
  backdrop-filter: blur(28px);
}

.onboarding-loading-card-v68 {
  min-height: 510px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  text-align: center;
}
.onboarding-loading-card-v68 strong { font-size: 24px; }
.onboarding-loading-card-v68 p { max-width: 350px; margin: 0; color: rgba(255,255,255,.62); line-height: 1.5; }
.onboarding-spinner-v68 {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(255,255,255,.12);
  border-top-color: var(--onboarding-blue);
  border-radius: 50%;
  animation: onboardingSpinV68 .8s linear infinite;
}

.onboarding-step-v68 {
  animation: onboardingStepV68 .42s cubic-bezier(.2,.8,.2,1) both;
}

.onboarding-step-heading-v68 { margin-bottom: 28px; }
.onboarding-step-heading-v68.centred { text-align: center; }
.onboarding-step-heading-v68 h2 {
  margin: 8px 0 10px;
  font-size: clamp(31px, 4vw, 48px);
  line-height: 1.03;
  letter-spacing: -.035em;
}
.onboarding-step-heading-v68 p {
  margin: 0;
  color: rgba(236,245,255,.67);
  line-height: 1.55;
}

.onboarding-choice-grid-v68 {
  display: grid;
  gap: 12px;
}

.onboarding-choice-v68 {
  appearance: none;
  width: 100%;
  min-height: 82px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px;
  color: #f7fbff;
  background: rgba(255,255,255,.045);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}
.onboarding-choice-v68:hover,
.onboarding-choice-v68:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(104,216,255,.5);
  background: rgba(102,215,255,.09);
  box-shadow: 0 16px 36px rgba(0,0,0,.22);
}
.onboarding-choice-v68.community:hover { border-color: rgba(181,126,255,.56); background: rgba(169,120,255,.1); }
.onboarding-choice-icon-v68 {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(94,213,255,.2), rgba(162,105,255,.22));
  font-size: 22px;
  font-weight: 1000;
}
.onboarding-choice-v68 strong,
.onboarding-choice-v68 small { display: block; }
.onboarding-choice-v68 strong { font-size: 16px; }
.onboarding-choice-v68 small { margin-top: 4px; color: rgba(255,255,255,.58); line-height: 1.35; }
.onboarding-choice-v68 i {
  padding: 7px 9px;
  border-radius: 999px;
  color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.07);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.onboarding-explore-v68 {
  width: 100%;
  margin-top: 16px;
  padding: 14px;
  border: 0;
  color: rgba(255,255,255,.75);
  background: transparent;
  cursor: pointer;
  font-weight: 900;
}
.onboarding-explore-v68 span {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.42);
  font-size: 11px;
  font-weight: 600;
}
.onboarding-privacy-v68,
.onboarding-form-foot-v68 {
  margin: 18px 0 0;
  color: rgba(255,255,255,.42);
  font-size: 11px;
  text-align: center;
}

.onboarding-back-v68 {
  margin: -7px 0 18px;
  padding: 8px 0;
  border: 0;
  color: rgba(255,255,255,.65);
  background: transparent;
  cursor: pointer;
  font-weight: 800;
}

.onboarding-form-v68 {
  display: grid;
  gap: 15px;
}
.onboarding-form-v68 label > span {
  display: block;
  margin-bottom: 7px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  font-weight: 900;
}
.onboarding-form-v68 input {
  width: 100%;
  box-sizing: border-box;
  height: 52px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  outline: none;
  color: #fff;
  background: rgba(255,255,255,.055);
  font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.onboarding-form-v68 input:focus {
  border-color: rgba(102,215,255,.62);
  background: rgba(102,215,255,.07);
  box-shadow: 0 0 0 4px rgba(102,215,255,.09);
}
.onboarding-input-wrap-v68 em {
  display: block;
  min-height: 17px;
  margin-top: 6px;
  color: rgba(255,255,255,.44);
  font-size: 11px;
  font-style: normal;
}
.onboarding-input-wrap-v68 em.available { color: #78f0bd; }
.onboarding-input-wrap-v68 em.unavailable { color: #ff9cae; }

.onboarding-submit-v68,
.onboarding-secondary-v68 {
  min-height: 52px;
  padding: 0 18px;
  border-radius: 15px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 1000;
}
.onboarding-submit-v68 {
  color: #06111d;
  background: linear-gradient(120deg, #71dcff, #ad91ff);
  box-shadow: 0 15px 35px rgba(84,186,255,.2);
}
.onboarding-submit-v68:disabled { opacity: .55; cursor: wait; }
.onboarding-secondary-v68 {
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.055);
}
.onboarding-message-v68 {
  min-height: 18px;
  color: rgba(255,255,255,.66);
  font-size: 12px;
}
.onboarding-message-v68.error { color: #ff9daf; }
.onboarding-message-v68.success { color: #7ff1be; }

.onboarding-form-links-v68,
.onboarding-form-foot-v68 {
  display: flex;
  justify-content: center;
  gap: 18px;
}
.onboarding-form-links-v68 { margin-top: 20px; }
.onboarding-form-links-v68 button,
.onboarding-form-foot-v68 button {
  padding: 0;
  border: 0;
  color: var(--onboarding-blue);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}

.onboarding-success-mark-v68 {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin: 4px auto 22px;
  border-radius: 24px;
  color: #071421;
  background: linear-gradient(135deg, #77ecbd, #79d9ff);
  box-shadow: 0 18px 45px rgba(92,225,194,.2);
  font-size: 32px;
  font-weight: 1000;
}

.onboarding-recovery-v68,
.onboarding-account-summary-v68 {
  margin: 22px 0;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
}
.onboarding-recovery-v68 > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.onboarding-recovery-v68 span,
.onboarding-account-summary-v68 span {
  display: block;
  color: rgba(255,255,255,.46);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.onboarding-recovery-v68 strong {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  color: #aeeaff;
  font-size: 18px;
  letter-spacing: .06em;
  user-select: all;
}
.onboarding-recovery-v68 > button {
  width: 100%;
  margin-top: 13px;
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 11px;
  color: #fff;
  background: rgba(255,255,255,.06);
  cursor: pointer;
  font-weight: 900;
}
.onboarding-recovery-v68 p {
  margin: 10px 0 0;
  color: rgba(255,255,255,.48);
  font-size: 11px;
  line-height: 1.45;
}
.onboarding-account-summary-v68 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.onboarding-account-summary-v68 > div {
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
}
.onboarding-account-summary-v68 strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
}

.onboarding-finish-actions-v68 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.onboarding-launcher-v68 {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70000;
  max-width: 240px;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px 7px 8px;
  border: 1px solid rgba(145,208,255,.25);
  border-radius: 999px;
  color: #fff;
  background: rgba(9,17,31,.88);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(0,0,0,.36);
  cursor: pointer;
}
.onboarding-launcher-v68 span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #071421;
  background: linear-gradient(135deg, #7adeff, #b98cff);
  font-weight: 1000;
}
.onboarding-launcher-v68 strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

@keyframes onboardingFadeInV68 { from { opacity: 0; } to { opacity: 1; } }
@keyframes onboardingFadeOutV68 { to { opacity: 0; transform: scale(1.012); } }
@keyframes onboardingRiseV68 { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes onboardingCardInV68 { from { opacity:0; transform:translateY(28px) scale(.975); } to { opacity:1; transform:none; } }
@keyframes onboardingStepV68 { from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:none; } }
@keyframes onboardingSpinV68 { to { transform: rotate(360deg); } }
@keyframes onboardingTileFloatV68 { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
@keyframes onboardingOrbV68 { from { transform: translate3d(-20px,-10px,0) scale(.95); } to { transform:translate3d(30px,20px,0) scale(1.08); } }

@media (max-width: 1050px) {
  .onboarding-shell-v68 {
    width: min(760px, calc(100vw - 32px));
    grid-template-columns: 1fr;
    padding: 32px 0 48px;
  }
  .onboarding-brand-v68 { text-align: center; margin: auto; }
  .onboarding-logo-v68 { margin-left: auto; margin-right: auto; }
  .onboarding-brand-v68 > div > p,
  .onboarding-progress-v68 { margin-left: auto; margin-right: auto; }
  .onboarding-brand-v68 h1 { font-size: clamp(42px, 9vw, 68px); }
  .onboarding-card-v68 { min-height: 0; }
  .onboarding-screen-v68 { min-height: 0; }
  .onboarding-tiles-v68 { grid-template-columns: repeat(6, minmax(100px, 1fr)); }
}

@media (max-width: 620px) {
  .onboarding-shell-v68 { width: min(100% - 20px, 560px); padding: 22px 0 34px; gap: 24px; }
  .onboarding-logo-v68 { width: 58px; height: 58px; border-radius: 18px; margin-bottom: 16px; }
  .onboarding-brand-v68 h1 { margin: 10px 0 14px; font-size: 40px; }
  .onboarding-brand-v68 > div > p { font-size: 15px; }
  .onboarding-progress-v68 { margin-top: 22px; }
  .onboarding-screen-v68 { padding: 23px 18px; border-radius: 24px; }
  .onboarding-card-v68 { border-radius: 25px; }
  .onboarding-choice-v68 { grid-template-columns: 43px minmax(0,1fr); padding: 12px; }
  .onboarding-choice-v68 i { display: none; }
  .onboarding-choice-icon-v68 { width: 43px; height: 43px; }
  .onboarding-account-summary-v68 { grid-template-columns: 1fr; }
  .onboarding-finish-actions-v68 { grid-template-columns: 1fr; }
  .onboarding-recovery-v68 > div { display: block; }
  .onboarding-recovery-v68 strong { display: block; margin-top: 7px; font-size: 15px; }
  .onboarding-launcher-v68 { right: 10px; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-v68,
  .onboarding-brand-v68,
  .onboarding-card-v68,
  .onboarding-step-v68,
  .onboarding-tiles-v68 span,
  .onboarding-orb-v68,
  .onboarding-spinner-v68 {
    animation: none !important;
  }
  .onboarding-progress-track-v68 i { transition: none; }
}
/* === END ONBOARDING_COMMUNITY_ACCOUNTS_STYLE_V68 === */
/* ===== END onboarding-v68.css ===== */

/* ===== BEGIN community-settings-accessibility-v71.css ===== */
/* === COMMUNITY_SETTINGS_ACCESSIBILITY_AND_TOUR_STYLE_V71 === */

/* Host welcome presentation */
.onboarding-logo-v68.onboarding-host-profile-v71 {
  position: relative;
  width: 116px;
  height: 116px;
  margin-bottom: 13px;
  padding: 5px;
  overflow: visible;
  border: 0;
  border-radius: 34px;
  background: linear-gradient(135deg, #72ddff, #ad78ff 58%, #ff78c7);
  box-shadow: 0 28px 75px rgba(55,147,255,.28), 0 0 0 8px rgba(255,255,255,.055);
  transform: rotate(-2deg);
}
.onboarding-logo-v68.onboarding-host-profile-v71::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2px solid rgba(255,255,255,.66);
  border-radius: 29px;
  pointer-events: none;
}
.onboarding-host-profile-v71 > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 29px;
  background: #111b2c;
}
.onboarding-host-wave-v71 {
  position: absolute;
  right: -16px;
  bottom: -12px;
  width: 45px !important;
  height: 45px;
  display: grid;
  place-items: center;
  border: 3px solid #0a1220;
  border-radius: 50%;
  color: initial !important;
  background: #fff !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
  font-size: 23px !important;
  animation: onboardingHostWaveV71 2.4s ease-in-out infinite;
  -webkit-background-clip: initial !important;
}
.onboarding-host-caption-v71 {
  display: grid;
  grid-template-columns: auto auto;
  width: max-content;
  max-width: 100%;
  gap: 2px 8px;
  align-items: baseline;
  margin: 0 0 22px 4px;
}
.onboarding-host-caption-v71 span {
  color: rgba(255,255,255,.45);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .13em;
}
.onboarding-host-caption-v71 strong { color: #fff; font-size: 16px; font-weight: 1000; }
.onboarding-host-caption-v71 small {
  grid-column: 1 / -1;
  color: #81ddff;
  font-size: 12px;
  font-weight: 800;
}
.onboarding-fun-chips-v71 {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}
.onboarding-fun-chips-v71 span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  color: rgba(245,250,255,.78);
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(12px);
  font-size: 11px;
  font-weight: 900;
}
.onboarding-fun-chips-v71 b { font-size: 15px; }
.onboarding-tour-note-v71 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 11px 13px;
  border: 1px solid rgba(121,218,255,.18);
  border-radius: 14px;
  color: rgba(232,244,255,.7);
  background: rgba(103,205,255,.055);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

/* Account launcher */
.onboarding-launcher-v68 {
  min-width: 0;
  max-width: min(300px, calc(100vw - 24px));
  gap: 9px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.onboarding-launcher-v68:hover,
.onboarding-launcher-v68:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(126,220,255,.52);
  box-shadow: 0 20px 52px rgba(0,0,0,.42), 0 0 0 4px rgba(104,210,255,.11);
}
.onboarding-launcher-v68 > i {
  margin-left: 1px;
  color: rgba(255,255,255,.58);
  font-size: 11px;
  font-style: normal;
}
.onboarding-launcher-v68 .community-launcher-avatar-v71 {
  overflow: hidden;
  color: #071421;
  background: linear-gradient(135deg, #7adeff, #b98cff);
}
.community-launcher-avatar-v71 img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Settings popover */
.community-settings-root-v71 {
  position: fixed;
  inset: 0;
  z-index: 275000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}
.community-settings-root-v71[hidden] { display: none !important; }
.community-settings-root-v71.is-visible { opacity: 1; visibility: visible; }
.community-settings-shade-v71 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(2,6,14,.42);
  box-shadow: none;
  backdrop-filter: blur(2px);
  pointer-events: auto;
}
.community-settings-panel-v71 {
  position: absolute;
  right: 18px;
  bottom: 76px;
  width: min(440px, calc(100vw - 24px));
  max-height: min(760px, calc(100vh - 96px));
  overflow: hidden;
  border: 1px solid rgba(130,216,255,.28);
  border-radius: 25px;
  color: #f5f9ff;
  background:
    radial-gradient(circle at 100% 0, rgba(161,104,255,.2), transparent 40%),
    linear-gradient(160deg, rgba(17,29,49,.985), rgba(7,13,25,.99));
  box-shadow: 0 35px 110px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.08);
  transform: translateY(14px) scale(.975);
  transition: transform .24s cubic-bezier(.2,.8,.2,1);
  pointer-events: auto;
}
.community-settings-root-v71.is-visible .community-settings-panel-v71 { transform: none; }
.community-settings-panel-v71:focus { outline: none; }
.community-settings-header-v71 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.025);
}
.community-settings-identity-v71 {
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  gap: 13px;
  align-items: center;
}
.community-settings-avatar-v71 {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 17px;
  color: #071421;
  background: linear-gradient(135deg, #73ddff, #b78cff);
  box-shadow: 0 12px 30px rgba(60,164,255,.16);
  font-size: 22px;
  font-weight: 1000;
}
.community-settings-avatar-v71 img { width: 100%; height: 100%; object-fit: cover; }
.community-settings-identity-v71 small {
  display: block;
  margin-bottom: 3px;
  color: #76dcff;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.community-settings-identity-v71 h2 {
  overflow: hidden;
  margin: 0;
  color: #fff;
  font-size: 21px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-settings-identity-v71 p {
  margin: 5px 0 0;
  color: rgba(237,245,255,.6);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}
.community-settings-close-v71 {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.055);
  box-shadow: none;
  font-size: 22px;
}
.community-settings-scroll-v71 {
  max-height: calc(min(760px, 100vh - 96px) - 94px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 7px 18px 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(124,213,255,.35) transparent;
}
.community-settings-section-v71 {
  padding: 16px 2px;
  border-bottom: 1px solid rgba(255,255,255,.075);
}
.community-settings-section-v71:last-child { border-bottom: 0; }
.community-settings-section-title-v71 {
  display: grid;
  grid-template-columns: 32px minmax(0,1fr);
  gap: 9px;
  align-items: start;
  margin-bottom: 11px;
}
.community-settings-section-title-v71 > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(115,213,255,.085);
  font-size: 15px;
}
.community-settings-section-title-v71 h3 { margin: 1px 0 2px; color: #fff; font-size: 13px; }
.community-settings-section-title-v71 p { margin: 0; color: rgba(237,245,255,.5); font-size: 10px; line-height: 1.35; }
.community-settings-actions-v71 { display: grid; gap: 7px; }
.community-settings-actions-v71 > button {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.095);
  border-radius: 14px;
  color: #eef5ff;
  background: rgba(255,255,255,.045);
  box-shadow: none;
  text-align: left;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.community-settings-actions-v71 > button:hover,
.community-settings-actions-v71 > button:focus-visible {
  border-color: rgba(116,217,255,.38);
  background: rgba(107,205,255,.09);
  transform: translateY(-1px);
}
.community-settings-actions-v71 > button > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  font-size: 16px;
}
.community-settings-actions-v71 > button strong { display: block; color: inherit; font-size: 11px; }
.community-settings-actions-v71 > button small { display: block; margin-top: 2px; color: rgba(236,245,255,.5); font-size: 9px; font-weight: 700; line-height: 1.3; }
.community-settings-actions-v71 > button.is-primary {
  border-color: rgba(114,219,255,.28);
  color: #071421;
  background: linear-gradient(120deg, #73dcff, #b99bff);
}
.community-settings-actions-v71 > button.is-primary small { color: rgba(7,20,33,.66); }
.community-settings-actions-v71 > button.is-danger { border-color: rgba(255,128,148,.17); }
.community-settings-actions-v71 > button.is-danger:hover { border-color: rgba(255,128,148,.38); background: rgba(255,94,123,.09); }
.community-theme-options-v71 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.community-theme-options-v71 button {
  min-height: 62px;
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  color: rgba(240,247,255,.65);
  background: rgba(255,255,255,.04);
  box-shadow: none;
  font-size: 10px;
}
.community-theme-options-v71 button span { font-size: 19px; }
.community-theme-options-v71 button.is-selected {
  border-color: rgba(116,220,255,.5);
  color: #fff;
  background: linear-gradient(145deg, rgba(87,203,255,.17), rgba(170,112,255,.15));
  box-shadow: 0 0 0 3px rgba(106,211,255,.08);
}
.community-settings-toggles-v71 { display: grid; gap: 7px; }
.community-settings-toggle-v71 {
  position: relative;
  min-height: 55px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 43px;
  gap: 12px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  cursor: pointer;
}
.community-settings-toggle-v71 strong { display: block; color: #eef5ff; font-size: 11px; }
.community-settings-toggle-v71 small { display: block; margin-top: 2px; color: rgba(237,245,255,.5); font-size: 9px; font-weight: 700; line-height: 1.3; }
.community-settings-toggle-v71 input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.community-settings-toggle-v71 > i {
  position: relative;
  width: 43px;
  height: 24px;
  border-radius: 99px;
  background: rgba(255,255,255,.13);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.25);
  transition: background .16s ease;
}
.community-settings-toggle-v71 > i::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f7fbff;
  box-shadow: 0 3px 9px rgba(0,0,0,.35);
  transition: transform .18s ease;
}
.community-settings-toggle-v71 input:checked + i { background: linear-gradient(90deg, #54cfff, #9d75ff); }
.community-settings-toggle-v71 input:checked + i::after { transform: translateX(19px); }
.community-settings-toggle-v71 input:focus-visible + i { outline: 3px solid #ffe56f; outline-offset: 3px; }
.community-screen-reader-info-v71 {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  margin-top: 9px;
  padding: 10px;
  border: 1px solid rgba(127,228,185,.14);
  border-radius: 14px;
  background: rgba(86,218,155,.055);
}
.community-screen-reader-info-v71 > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #7de8b9;
  background: rgba(103,231,177,.1);
  font-size: 17px;
}
.community-screen-reader-info-v71 strong { display: block; color: #eafaf3; font-size: 10px; }
.community-screen-reader-info-v71 small { display: block; margin-top: 3px; color: rgba(230,248,239,.55); font-size: 9px; font-weight: 700; line-height: 1.35; }

/* Tour */
.viewer-quick-tour-v71 {
  position: fixed;
  inset: 0;
  z-index: 280000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .34s ease, visibility .34s ease;
}
.viewer-quick-tour-v71.is-visible { opacity: 1; visibility: visible; }
.viewer-quick-tour-v71[hidden] { display: none !important; }
.viewer-tour-shade-v71 {
  position: absolute;
  inset: 0;
  background: rgba(3,7,15,.72);
  backdrop-filter: blur(3px);
  animation: viewerTourShadeInV71 .3s ease both;
}
body.viewer-tour-open-v71 { overflow: hidden !important; }
body.viewer-tour-open-v71 #viewerTabsV24 { position: relative; z-index: 280002 !important; }
#viewerTabsV24 button.is-tour-target-v71 {
  position: relative;
  z-index: 280003 !important;
  color: #07111d !important;
  border-color: #a9edff !important;
  background: linear-gradient(120deg, #78ddff, #c0a1ff) !important;
  box-shadow: 0 0 0 5px rgba(112,222,255,.22), 0 0 0 12px rgba(112,222,255,.08), 0 18px 50px rgba(0,0,0,.45) !important;
  transform: translateY(-2px) scale(1.035);
  animation: viewerTourTargetPulseV71 1.5s ease-in-out infinite;
}
.viewer-tour-card-v71 {
  position: fixed;
  z-index: 280004;
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid rgba(133,221,255,.38);
  border-radius: 22px;
  color: #f8fbff;
  background: radial-gradient(circle at 100% 0, rgba(169,112,255,.2), transparent 40%), linear-gradient(155deg, rgba(18,31,52,.98), rgba(7,13,25,.99));
  box-shadow: 0 28px 90px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.09);
  pointer-events: auto;
  animation: viewerTourCardInV71 .35s cubic-bezier(.2,.8,.2,1) both;
}
.viewer-tour-card-v71:focus { outline: none; }
.viewer-tour-card-v71 header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.viewer-tour-card-v71 header > div { display: flex; align-items: center; gap: 10px; }
.viewer-tour-card-v71 header span { color: #79dcff; font-size: 10px; font-weight: 1000; letter-spacing: .12em; }
.viewer-tour-card-v71 header b { padding: 5px 8px; border-radius: 999px; color: rgba(255,255,255,.65); background: rgba(255,255,255,.07); font-size: 10px; }
.viewer-tour-card-v71 header button { padding: 7px 9px; border: 0; color: rgba(255,255,255,.66); background: transparent; box-shadow: none; font-size: 11px; font-weight: 900; }
.viewer-tour-progress-v71 { height: 5px; overflow: hidden; margin: 14px 0 19px; border-radius: 99px; background: rgba(255,255,255,.09); }
.viewer-tour-progress-v71 i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #70dcff, #a879ff, #ff79c5); transition: width .3s ease; }
.viewer-tour-copy-v71 { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 15px; align-items: center; }
.viewer-tour-copy-v71 > div:first-child { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(145deg, rgba(99,214,255,.17), rgba(174,112,255,.18)); box-shadow: inset 0 1px rgba(255,255,255,.1); font-size: 27px; }
.viewer-tour-copy-v71 h2 { margin: 0 0 7px; font-size: 28px; line-height: 1; letter-spacing: -.03em; }
.viewer-tour-copy-v71 p { margin: 0; color: rgba(239,247,255,.68); font-size: 13px; line-height: 1.5; }
.viewer-tour-card-v71 footer { display: grid; grid-template-columns: .7fr 1.3fr; gap: 10px; margin-top: 20px; }
.viewer-tour-card-v71 footer button { min-height: 44px; border-radius: 13px; box-shadow: none; font-size: 12px; font-weight: 1000; }
.viewer-tour-back-v71 { border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.75); background: rgba(255,255,255,.055); }
.viewer-tour-back-v71:disabled { opacity: .35; cursor: default; }
.viewer-tour-next-v71 { border: 0; color: #07121d; background: linear-gradient(120deg, #71dcff, #b99aff); box-shadow: 0 12px 30px rgba(87,194,255,.18) !important; }
.viewer-tour-finished-v71 {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 290000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 17px;
  border: 1px solid rgba(121,235,189,.35);
  border-radius: 999px;
  color: #fff;
  background: rgba(8,20,27,.94);
  box-shadow: 0 20px 55px rgba(0,0,0,.4);
  opacity: 0;
  transform: translate(-50%, 20px);
  transition: opacity .25s ease, transform .25s ease;
}
.viewer-tour-finished-v71.is-visible { opacity: 1; transform: translate(-50%, 0); }
.viewer-tour-finished-v71 span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #062017; background: #7de8b9; font-weight: 1000; }
.viewer-tour-finished-v71 strong { font-size: 12px; }

/* Screen reader and keyboard foundation */
.sr-only-v71 {
  position: fixed !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.viewer-skip-link-v71 {
  position: fixed;
  left: 14px;
  top: 12px;
  z-index: 300000;
  padding: 11px 15px;
  border: 3px solid #111;
  border-radius: 10px;
  color: #071421;
  background: #fff27a;
  box-shadow: 0 12px 35px rgba(0,0,0,.35);
  font-size: 14px;
  font-weight: 1000;
  transform: translateY(-160%);
  transition: transform .16s ease;
}
.viewer-skip-link-v71:focus { transform: translateY(0); }
body.viewer-page :focus-visible {
  outline: 3px solid #ffe56f !important;
  outline-offset: 3px !important;
}

/* Large text */
html[data-community-text-v71="large"] { font-size: 18px; }
html[data-community-text-v71="large"] body.viewer-page :is(p, li, label, input, select, textarea, button, small) { line-height: 1.5; }
html[data-community-text-v71="large"] .viewer-tabs-v24 button { font-size: 15px !important; }
html[data-community-text-v71="large"] .community-settings-panel-v71 { width: min(475px, calc(100vw - 24px)); }
html[data-community-text-v71="large"] .community-settings-actions-v71 > button strong,
html[data-community-text-v71="large"] .community-settings-toggle-v71 strong { font-size: 13px; }
html[data-community-text-v71="large"] .community-settings-actions-v71 > button small,
html[data-community-text-v71="large"] .community-settings-toggle-v71 small,
html[data-community-text-v71="large"] .community-settings-identity-v71 p { font-size: 11px; }

/* High contrast */
html[data-community-contrast-v71="high"] {
  --line: rgba(255,255,255,.42);
  --muted: #d8e1ef;
}
html[data-community-contrast-v71="high"] body.viewer-page,
html[data-community-contrast-v71="high"] .community-settings-panel-v71,
html[data-community-contrast-v71="high"] .viewer-tour-card-v71 { color: #fff; }
html[data-community-contrast-v71="high"] body.viewer-page :is(.viewer-about-card, .viewer-howto-card, .overlay-current, .overlay-board, .community-hub-v24, .reviewer-members-section, .community-leaderboard-section, .prominent-game-suggestion-v22) {
  border-color: rgba(255,255,255,.48) !important;
}
html[data-community-contrast-v71="high"] body.viewer-page :focus-visible { outline-width: 4px !important; }

/* Light theme */
html[data-community-resolved-theme-v71="light"] {
  color-scheme: light;
  --bg: #eef3fb;
  --panel: rgba(255,255,255,.94);
  --text: #17243b;
  --muted: #53637d;
  --line: rgba(34,56,88,.18);
  --accent: #167ebc;
  --tile: rgba(35,62,99,.07);
  --shadow: 0 20px 65px rgba(40,59,87,.16);
}
html[data-community-resolved-theme-v71="light"] body.viewer-page {
  color: var(--text);
  background: radial-gradient(circle at top, #ffffff 0%, #edf3fb 52%, #dfe8f5 100%) !important;
}
html[data-community-resolved-theme-v71="light"] body.viewer-page .viewer-tabs-v24 {
  border-color: rgba(36,61,96,.15) !important;
  background: rgba(247,250,255,.9) !important;
  box-shadow: 0 12px 35px rgba(42,63,94,.12) !important;
}
html[data-community-resolved-theme-v71="light"] body.viewer-page .viewer-tabs-v24 button {
  color: #33455f !important;
  background: rgba(34,61,99,.055) !important;
}
html[data-community-resolved-theme-v71="light"] body.viewer-page .viewer-tabs-v24 button.is-active {
  color: #071421 !important;
  background: linear-gradient(120deg, #69d5ff, #b4a0ff) !important;
}
html[data-community-resolved-theme-v71="light"] body.viewer-page :is(
  .viewer-about-card,
  .viewer-howto-card,
  .overlay-current,
  .overlay-board,
  .community-hub-v24,
  .reviewer-members-section,
  .community-leaderboard-section,
  .prominent-game-suggestion-v22,
  .community-competition-v24 > article,
  .recent-review-card-v24,
  .reviewer-member-card,
  .community-leaderboard-card,
  .community-submit-card,
  .reviewer-profile-editor,
  .interactive-reviewer-profile,
  .game-info-modal-content,
  .reviewer-profile-modal-content
) {
  color: #17243b !important;
  border-color: rgba(34,56,88,.16) !important;
  background-color: rgba(255,255,255,.92) !important;
  box-shadow: 0 18px 55px rgba(42,62,91,.13) !important;
}
html[data-community-resolved-theme-v71="light"] body.viewer-page :is(
  .viewer-about-card,
  .viewer-howto-card,
  .community-hub-v24,
  .reviewer-members-section,
  .community-leaderboard-section,
  .prominent-game-suggestion-v22,
  .recent-review-card-v24,
  .reviewer-member-card,
  .community-submit-card,
  .reviewer-profile-editor,
  .interactive-reviewer-profile
) :is(h1,h2,h3,h4,strong,label) { color: #17243b; }
html[data-community-resolved-theme-v71="light"] body.viewer-page :is(p,small,.muted) { color: #53637d; }
html[data-community-resolved-theme-v71="light"] body.viewer-page :is(input,select,textarea) {
  color: #17243b !important;
  border-color: rgba(34,56,88,.22) !important;
  background: #f7faff !important;
}
html[data-community-resolved-theme-v71="light"] .onboarding-launcher-v68 {
  color: #17243b;
  border-color: rgba(40,73,115,.2);
  background: rgba(249,252,255,.94);
  box-shadow: 0 14px 40px rgba(42,61,91,.18);
}
html[data-community-resolved-theme-v71="light"] .onboarding-launcher-v68 > i { color: #5b6c85; }
html[data-community-resolved-theme-v71="light"] .community-settings-shade-v71 { background: rgba(46,62,85,.25); }
html[data-community-resolved-theme-v71="light"] .community-settings-panel-v71 {
  color: #17243b;
  border-color: rgba(38,74,118,.2);
  background: radial-gradient(circle at 100% 0, rgba(178,144,255,.2), transparent 40%), linear-gradient(160deg, rgba(255,255,255,.995), rgba(239,245,253,.995));
  box-shadow: 0 30px 90px rgba(40,58,84,.28), inset 0 1px #fff;
}
html[data-community-resolved-theme-v71="light"] .community-settings-header-v71,
html[data-community-resolved-theme-v71="light"] .community-settings-section-v71 { border-color: rgba(39,66,100,.12); }
html[data-community-resolved-theme-v71="light"] .community-settings-identity-v71 h2,
html[data-community-resolved-theme-v71="light"] .community-settings-section-title-v71 h3,
html[data-community-resolved-theme-v71="light"] .community-settings-actions-v71 > button strong,
html[data-community-resolved-theme-v71="light"] .community-settings-toggle-v71 strong { color: #17243b; }
html[data-community-resolved-theme-v71="light"] .community-settings-identity-v71 p,
html[data-community-resolved-theme-v71="light"] .community-settings-section-title-v71 p,
html[data-community-resolved-theme-v71="light"] .community-settings-actions-v71 > button small,
html[data-community-resolved-theme-v71="light"] .community-settings-toggle-v71 small { color: #5a6a82; }
html[data-community-resolved-theme-v71="light"] .community-settings-close-v71,
html[data-community-resolved-theme-v71="light"] .community-settings-actions-v71 > button,
html[data-community-resolved-theme-v71="light"] .community-theme-options-v71 button,
html[data-community-resolved-theme-v71="light"] .community-settings-toggle-v71 {
  color: #263853;
  border-color: rgba(38,67,103,.13);
  background: rgba(255,255,255,.7);
}
html[data-community-resolved-theme-v71="light"] .community-theme-options-v71 button.is-selected { color: #17243b; }
html[data-community-resolved-theme-v71="light"] .viewer-tour-card-v71 {
  color: #17243b;
  border-color: rgba(40,83,126,.24);
  background: radial-gradient(circle at 100% 0, rgba(180,145,255,.22), transparent 40%), linear-gradient(155deg, rgba(255,255,255,.99), rgba(239,245,253,.99));
  box-shadow: 0 28px 90px rgba(35,54,80,.28), inset 0 1px #fff;
}
html[data-community-resolved-theme-v71="light"] .viewer-tour-card-v71 header b,
html[data-community-resolved-theme-v71="light"] .viewer-tour-card-v71 p,
html[data-community-resolved-theme-v71="light"] .viewer-tour-card-v71 header button { color: #5c6c83; }
html[data-community-resolved-theme-v71="light"] .viewer-tour-back-v71 { color: #344760; border-color: rgba(38,67,103,.18); background: rgba(39,66,100,.06); }

/* User controlled reduced motion */
html[data-community-motion-v71="reduced"] *,
html[data-community-motion-v71="reduced"] *::before,
html[data-community-motion-v71="reduced"] *::after {
  scroll-behavior: auto !important;
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  transition-delay: 0s !important;
}

@keyframes onboardingHostWaveV71 {
  0%, 55%, 100% { transform: rotate(0); }
  65% { transform: rotate(14deg); }
  75% { transform: rotate(-10deg); }
  85% { transform: rotate(9deg); }
}
@keyframes viewerTourShadeInV71 { from { opacity: 0; } to { opacity: 1; } }
@keyframes viewerTourCardInV71 { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes viewerTourTargetPulseV71 {
  0%, 100% { box-shadow: 0 0 0 5px rgba(112,222,255,.22), 0 0 0 12px rgba(112,222,255,.08), 0 18px 50px rgba(0,0,0,.45); }
  50% { box-shadow: 0 0 0 7px rgba(112,222,255,.3), 0 0 0 16px rgba(112,222,255,.05), 0 18px 50px rgba(0,0,0,.45); }
}

@media (max-width: 1050px) {
  .onboarding-host-caption-v71 { margin-left: auto; margin-right: auto; }
  .onboarding-fun-chips-v71 { justify-content: center; }
}
@media (max-width: 620px) {
  .onboarding-logo-v68.onboarding-host-profile-v71 { width: 88px; height: 88px; border-radius: 26px; }
  .onboarding-logo-v68.onboarding-host-profile-v71::after,
  .onboarding-host-profile-v71 > img { border-radius: 21px; }
  .onboarding-host-wave-v71 { right: -13px; bottom: -10px; width: 38px !important; height: 38px; font-size: 19px !important; }
  .onboarding-host-caption-v71 { margin-bottom: 16px; }
  .onboarding-fun-chips-v71 { gap: 6px; margin-top: 18px; }
  .onboarding-fun-chips-v71 span { padding: 7px 9px; font-size: 10px; }
  .community-settings-panel-v71 {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-height: calc(100vh - 16px);
    border-radius: 23px;
  }
  .community-settings-scroll-v71 { max-height: calc(100vh - 112px); }
  .community-settings-header-v71 { padding: 17px; }
  .community-settings-identity-v71 { grid-template-columns: 46px minmax(0,1fr); gap: 10px; }
  .community-settings-avatar-v71 { width: 46px; height: 46px; border-radius: 15px; }
  .viewer-tour-card-v71 { padding: 17px; border-radius: 19px; }
  .viewer-tour-copy-v71 { grid-template-columns: 48px minmax(0,1fr); gap: 12px; }
  .viewer-tour-copy-v71 > div:first-child { width: 48px; height: 48px; border-radius: 15px; font-size: 23px; }
  .viewer-tour-copy-v71 h2 { font-size: 24px; }
  .viewer-tour-copy-v71 p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .onboarding-host-wave-v71,
  #viewerTabsV24 button.is-tour-target-v71,
  .viewer-tour-shade-v71,
  .viewer-tour-card-v71 { animation: none !important; }
  .community-settings-root-v71,
  .community-settings-panel-v71,
  .viewer-quick-tour-v71,
  .viewer-tour-progress-v71 i,
  .viewer-tour-finished-v71,
  .viewer-skip-link-v71 { transition: none !important; }
}
/* Programmatic dialog focus should not draw the global keyboard ring around the entire panel. */
.community-settings-panel-v71:focus-visible,
.viewer-tour-card-v71:focus-visible {
  outline: none !important;
}

/* === END COMMUNITY_SETTINGS_ACCESSIBILITY_AND_TOUR_STYLE_V71 === */
/* ===== END community-settings-accessibility-v71.css ===== */

/* ===== BEGIN control-favourite-artwork-v72.css ===== */
/* V72: exact selected favourite artwork in private Control profile approvals. */
body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-profile-admin-card {
  grid-template-areas:
    "header header"
    "details characters"
    "submitted submitted"
    "media media"
    "footer footer" !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-submitted-favourites-v72 {
  grid-area: submitted !important;
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 15px !important;
  background: rgba(4, 10, 22, .72) !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-art-heading-v72 {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
  margin-bottom: 13px !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-art-heading-v72 > div > span {
  color: #8edfff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-art-heading-v72 p {
  max-width: 820px !important;
  margin: 4px 0 0 !important;
  color: rgba(238,246,255,.68) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-art-heading-v72 > b {
  flex: 0 0 auto !important;
  padding: 6px 9px !important;
  border-radius: 999px !important;
  background: rgba(126, 220, 255, .11) !important;
  color: #a9e8ff !important;
  font-size: 10px !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-art-grid-v72 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-art-group-v72 {
  min-width: 0 !important;
  padding: 10px !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.04) !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-art-group-v72 > header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 9px !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-art-group-v72 > header strong {
  font-size: 12px !important;
  font-weight: 850 !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-art-group-v72 > header span {
  display: grid !important;
  place-items: center !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.07) !important;
  color: rgba(238,246,255,.64) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-art-list-v72 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important;
  gap: 9px !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-art-card-v72 {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 6px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 11px !important;
  background: rgba(2,7,16,.76) !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-art-image-v72 {
  width: 100% !important;
  aspect-ratio: 2 / 3 !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #132541, #08111f) !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-artwork-link-v72 {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  color: inherit !important;
  text-decoration: none !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-artwork-link-v72 img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  transition: transform .18s ease, filter .18s ease !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-artwork-link-v72 > span {
  position: absolute !important;
  right: 5px !important;
  bottom: 5px !important;
  left: 5px !important;
  padding: 5px 6px !important;
  border-radius: 7px !important;
  background: rgba(3, 8, 18, .86) !important;
  color: #fff !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  text-align: center !important;
  opacity: 0 !important;
  transform: translateY(4px) !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-artwork-link-v72:hover img,
body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-artwork-link-v72:focus-visible img {
  transform: scale(1.04) !important;
  filter: brightness(.72) !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-artwork-link-v72:hover > span,
body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-artwork-link-v72:focus-visible > span {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-artwork-link-v72:focus-visible {
  outline: 3px solid #8edfff !important;
  outline-offset: -3px !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-artwork-missing-v72 {
  display: grid !important;
  place-content: center !important;
  justify-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  height: 100% !important;
  padding: 8px !important;
  color: rgba(238,246,255,.66) !important;
  text-align: center !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-artwork-missing-v72 b {
  font-size: 28px !important;
  line-height: 1 !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-artwork-missing-v72 span {
  font-size: 8px !important;
  font-weight: 750 !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-art-card-v72 figcaption {
  margin: 7px 1px 1px !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-art-card-v72 figcaption strong,
body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-art-card-v72 figcaption small {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-art-card-v72 figcaption strong {
  min-height: 28px !important;
  color: rgba(255,255,255,.93) !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}

body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-art-card-v72 figcaption small {
  margin-top: 3px !important;
  color: rgba(238,246,255,.54) !important;
  font-size: 8px !important;
  white-space: nowrap !important;
}

@media (max-width: 1100px) {
  body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-profile-admin-card {
    grid-template-areas:
      "header"
      "details"
      "characters"
      "submitted"
      "media"
      "footer" !important;
  }

  body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-art-grid-v72 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 700px) {
  body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-art-heading-v72 {
    display: grid !important;
  }

  body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-art-heading-v72 > b {
    justify-self: start !important;
  }

  body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-art-list-v72 {
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-artwork-link-v72 img,
  body:not(.viewer-page) #reviewerProfileAdminPanel .reviewer-favourite-artwork-link-v72 > span {
    transition: none !important;
  }
}
/* ===== END control-favourite-artwork-v72.css ===== */

/* ===== BEGIN reviewer-dbd-portrait-fit-v73.css ===== */
/* V73: lift and enlarge Dead by Daylight portraits inside the character picker only. */

html.recovery-v50 .reviewer-character-modal-v35.theme-dead-by-daylight-v36 .reviewer-character-image-v50,
html.recovery-v50 .reviewer-character-modal-v35[data-character-theme-v36="deadByDaylight"] .reviewer-character-image-v50,
html.recovery-v50 .reviewer-character-modal-v35.theme-dead-by-daylight-v36 .reviewer-character-portrait-frame-v39,
html.recovery-v50 .reviewer-character-modal-v35[data-character-theme-v36="deadByDaylight"] .reviewer-character-portrait-frame-v39 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 150px !important;
  min-height: 150px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html.recovery-v50 .reviewer-character-modal-v35.theme-dead-by-daylight-v36 .reviewer-character-option-v35 img,
html.recovery-v50 .reviewer-character-modal-v35[data-character-theme-v36="deadByDaylight"] .reviewer-character-option-v35 img {
  display: block !important;
  width: 118% !important;
  min-width: 118% !important;
  max-width: none !important;
  height: 176px !important;
  min-height: 176px !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: translateY(-10px) !important;
  transform-origin: center center !important;
}

/* Keep the selected outline around the card rather than around the enlarged image. */
html.recovery-v50 .reviewer-character-modal-v35.theme-dead-by-daylight-v36 .reviewer-character-option-v35,
html.recovery-v50 .reviewer-character-modal-v35[data-character-theme-v36="deadByDaylight"] .reviewer-character-option-v35 {
  isolation: isolate !important;
}

@media (max-width: 760px) {
  html.recovery-v50 .reviewer-character-modal-v35.theme-dead-by-daylight-v36 .reviewer-character-image-v50,
  html.recovery-v50 .reviewer-character-modal-v35[data-character-theme-v36="deadByDaylight"] .reviewer-character-image-v50,
  html.recovery-v50 .reviewer-character-modal-v35.theme-dead-by-daylight-v36 .reviewer-character-portrait-frame-v39,
  html.recovery-v50 .reviewer-character-modal-v35[data-character-theme-v36="deadByDaylight"] .reviewer-character-portrait-frame-v39 {
    height: 142px !important;
    min-height: 142px !important;
  }

  html.recovery-v50 .reviewer-character-modal-v35.theme-dead-by-daylight-v36 .reviewer-character-option-v35 img,
  html.recovery-v50 .reviewer-character-modal-v35[data-character-theme-v36="deadByDaylight"] .reviewer-character-option-v35 img {
    height: 166px !important;
    min-height: 166px !important;
    transform: translateY(-9px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.recovery-v50 .reviewer-character-modal-v35.theme-dead-by-daylight-v36 .reviewer-character-option-v35 img,
  html.recovery-v50 .reviewer-character-modal-v35[data-character-theme-v36="deadByDaylight"] .reviewer-character-option-v35 img {
    transition: none !important;
  }
}
/* ===== END reviewer-dbd-portrait-fit-v73.css ===== */

/* === FINAL_DBD_WIKI_DETAILS_STYLES_V76 === */
html.recovery-v50 .reviewer-details-content-v50.is-dbd-v76 {
  --dbd-v76-panel: rgba(4, 11, 21, .72);
  --dbd-v76-border: rgba(127, 214, 255, .18);
  --dbd-v76-text: rgba(235, 243, 253, .88);
  --dbd-v76-muted: rgba(193, 207, 225, .72);
  --dbd-v76-accent: #7edfff;
}

html.recovery-v50 .reviewer-details-content-v50.is-dbd-v76 .reviewer-details-hero-v50 > div:last-child > p {
  max-width: 820px;
  margin: 14px 0 0;
}

html.recovery-v50 .reviewer-dbd-section-heading-v76 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 12px;
}

html.recovery-v50 .reviewer-dbd-section-heading-v76 h3 {
  margin: 2px 0 0;
}

html.recovery-v50 .reviewer-dbd-section-heading-v76 small {
  display: block;
  color: var(--dbd-v76-accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

html.recovery-v50 .reviewer-dbd-section-heading-v76 > a,
html.recovery-v50 .reviewer-dbd-perk-source-v76 {
  color: #9fe7ff;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

html.recovery-v50 .reviewer-dbd-section-heading-v76 > a:hover,
html.recovery-v50 .reviewer-dbd-section-heading-v76 > a:focus-visible,
html.recovery-v50 .reviewer-dbd-perk-source-v76:hover,
html.recovery-v50 .reviewer-dbd-perk-source-v76:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

html.recovery-v50 .reviewer-dbd-lore-v76 {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(82, 171, 218, .15), transparent 42%),
    linear-gradient(145deg, rgba(17, 30, 48, .82), rgba(5, 12, 23, .82)) !important;
  border-color: var(--dbd-v76-border) !important;
}

html.recovery-v50 .reviewer-dbd-lore-v76 > p {
  margin: 0;
  color: var(--dbd-v76-text) !important;
  white-space: pre-line;
}

html.recovery-v50 .reviewer-dbd-attribution-v76 {
  display: block;
  margin-top: 13px;
  color: var(--dbd-v76-muted);
  font-size: 10px;
  line-height: 1.45;
}

html.recovery-v50 .reviewer-dbd-perks-v76 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

html.recovery-v50 .reviewer-detail-cards-v50 .reviewer-dbd-perk-card-v76 {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: start;
  min-height: 170px;
  padding: 15px;
  border: 1px solid rgba(130, 197, 240, .14);
  background:
    linear-gradient(145deg, rgba(18, 32, 52, .9), rgba(5, 12, 23, .9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

html.recovery-v50 .reviewer-detail-icon-wrap-v76 {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(159, 219, 255, .18);
  border-radius: 16px;
  background:
    radial-gradient(circle, rgba(87, 156, 211, .24), transparent 67%),
    rgba(1, 7, 15, .78);
  overflow: hidden;
}

html.recovery-v50 .reviewer-detail-cards-v50 .reviewer-detail-icon-wrap-v76 img {
  display: block;
  width: 84px;
  height: 84px;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 7px 14px rgba(0,0,0,.5));
}

html.recovery-v50 .reviewer-detail-icon-wrap-v76.is-missing {
  color: rgba(191, 214, 238, .45);
  font-size: 38px;
}

html.recovery-v50 .reviewer-dbd-perk-card-v76 > div:last-child {
  min-width: 0;
}

html.recovery-v50 .reviewer-dbd-perk-card-v76 strong {
  display: block;
  color: #fff;
  font-size: 16px;
  line-height: 1.18;
}

html.recovery-v50 .reviewer-dbd-perk-card-v76 p {
  margin: 7px 0 10px !important;
  color: var(--dbd-v76-text) !important;
  line-height: 1.48 !important;
}

html.recovery-v50 .reviewer-dbd-perk-source-v76 {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
}

html[data-community-resolved-theme-v71="light"] .reviewer-details-content-v50.is-dbd-v76 {
  --dbd-v76-panel: rgba(244, 248, 253, .96);
  --dbd-v76-border: rgba(36, 88, 132, .18);
  --dbd-v76-text: #33445c;
  --dbd-v76-muted: #64738a;
  --dbd-v76-accent: #0678a5;
}

html[data-community-resolved-theme-v71="light"] .reviewer-details-content-v50.is-dbd-v76 .reviewer-dbd-lore-v76,
html[data-community-resolved-theme-v71="light"] .reviewer-details-content-v50.is-dbd-v76 .reviewer-dbd-perk-card-v76 {
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(235,242,250,.98)) !important;
  border-color: rgba(36, 88, 132, .17) !important;
}

html[data-community-resolved-theme-v71="light"] .reviewer-details-content-v50.is-dbd-v76 .reviewer-detail-icon-wrap-v76 {
  background: linear-gradient(145deg, #dce9f7, #edf4fb);
  border-color: rgba(36, 88, 132, .17);
}

html[data-community-resolved-theme-v71="light"] .reviewer-details-content-v50.is-dbd-v76 .reviewer-dbd-perk-card-v76 strong {
  color: #15243a;
}

html[data-community-resolved-theme-v71="light"] .reviewer-details-content-v50.is-dbd-v76 :is(.reviewer-dbd-section-heading-v76 > a, .reviewer-dbd-perk-source-v76) {
  color: #096a93;
}

html[data-community-high-contrast-v71="true"] .reviewer-details-content-v50.is-dbd-v76 :is(.reviewer-dbd-lore-v76, .reviewer-dbd-perk-card-v76, .reviewer-detail-icon-wrap-v76) {
  border-width: 2px;
  border-color: currentColor !important;
}

@media (max-width: 980px) {
  html.recovery-v50 .reviewer-dbd-perks-v76 {
    grid-template-columns: 1fr;
  }

  html.recovery-v50 .reviewer-detail-cards-v50 .reviewer-dbd-perk-card-v76 {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  html.recovery-v50 .reviewer-dbd-section-heading-v76 {
    display: grid;
  }

  html.recovery-v50 .reviewer-detail-cards-v50 .reviewer-dbd-perk-card-v76 {
    grid-template-columns: 72px minmax(0, 1fr);
    padding: 12px;
  }

  html.recovery-v50 .reviewer-detail-icon-wrap-v76 {
    width: 72px;
    height: 72px;
    border-radius: 13px;
  }

  html.recovery-v50 .reviewer-detail-cards-v50 .reviewer-detail-icon-wrap-v76 img {
    width: 66px;
    height: 66px;
  }
}
/* === END FINAL_DBD_WIKI_DETAILS_STYLES_V76 === */


/* === FINAL_STABILITY_FIXES_STYLES_V77 === */
html.recovery-v50 .reviewer-detail-icon-wrap-v76.is-missing {
  display: grid !important;
  place-items: center !important;
}
html.recovery-v50 .reviewer-detail-icon-wrap-v76.is-missing::before {
  content: '◇';
  color: rgba(183, 220, 255, .78);
  font-size: 2rem;
  line-height: 1;
}
html.recovery-v50 .reviewer-detail-icon-wrap-v76.is-missing img {
  display: none !important;
}