/* [project]/src/app/globals.css [app-client] (css) */
@font-face {
  font-family: Fustat;
  src: url("/fonts/Fustat/Fustat-VariableFont_wght.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --bg: #0f1319;
  --surface: #1a1d23;
  --tertiary: #24272d;
  --border: #2f3237;
  --text: #fff;
  --text-muted: #aaacae;
  --accent: #fe1252;
  --accent-hover: #fe5986;
  --accent-light: #b20d39;
  --accent-text: #0f1319;
  --danger: #fe1252;
  --overlay: #0f1319b3;
  --overlay-heavy: #0f1319e6;
  --radius: 8px;
  --radius-full: 999px;
  --shadow: 0 1px 3px #0f131966;
  --text-2xs: .6875rem;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 2rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
}

html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  flex-direction: column;
  font-family: Fustat, system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  display: flex;
}

.skip-link {
  width: 1px;
  height: 1px;
  position: absolute;
  top: auto;
  left: -9999px;
  overflow: hidden;
}

.skip-link:focus {
  background: var(--bg);
  width: auto;
  height: auto;
  color: var(--text);
  border-radius: var(--radius);
  outline: 2px solid var(--accent);
  z-index: 9999;
  font-size: var(--text-sm);
  padding: 8px 16px;
  font-weight: 600;
  text-decoration: none;
  position: fixed;
  top: 8px;
  left: 8px;
}

a {
  color: var(--text);
  text-decoration: none;
}

a:hover, .login-page a:hover {
  color: var(--text);
  text-underline-offset: 2px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  -webkit-text-decoration-color: var(--accent);
  text-decoration-color: var(--accent);
}

.game-card-started-title a:hover {
  text-decoration: none;
}

button {
  cursor: pointer;
  font: inherit;
  border: none;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

main .container {
  padding-bottom: 24px;
  padding-left: 32px;
  padding-right: 32px;
}

.container.profile-body {
  padding-top: 0;
}

.page-top {
  padding-top: 32px;
}

.header-site-name {
  letter-spacing: .04em;
  color: var(--text);
  font-weight: 800;
}

header .container {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: none;
  height: 100%;
  padding: 0 24px;
  display: flex;
}

header.home-dashboard-header {
  background: none;
}

.has-header main {
  padding-top: 60px;
}

.wordmark {
  font-size: var(--text-lg);
  color: var(--accent);
  letter-spacing: -.3px;
  font-weight: 800;
}

.sr-only {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.star-rating-input {
  cursor: pointer;
  align-items: center;
  gap: 2px;
  display: inline-flex;
}

.star-rating-cell {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  position: relative;
}

.star-rating-cell svg {
  width: 100%;
  height: 100%;
}

.star-rating-btn {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.star-rating-btn:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 1px;
  border-radius: 3px;
}

.btn {
  border-radius: var(--radius-full);
  height: 36px;
  font-size: var(--text-sm);
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-weight: 800;
  text-decoration: none;
  transition: background .15s;
  display: inline-flex;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: var(--text);
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-ghost {
  color: var(--text-muted);
  border: 2px solid var(--border);
  background: none;
}

.btn-ghost:hover {
  color: var(--text);
  background: var(--border);
}

.btn-sm {
  font-size: var(--text-sm);
  padding: 4px 14px;
}

.btn-basic {
  background: var(--tertiary);
  color: var(--text-muted);
  border: 1px solid #0000;
}

.btn-basic:hover {
  color: var(--text);
  background: var(--border);
}

.input {
  box-sizing: border-box;
  border-radius: var(--radius);
  background: var(--text);
  width: auto;
  height: 40px;
  font-size: var(--text-sm);
  color: var(--bg);
  border: 0;
  padding: 0 12px;
  transition: border-color .15s;
}

textarea.input {
  height: auto;
  padding: 10px 12px;
}

.input:focus {
  border-color: var(--accent);
  outline: none;
}

select.input {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f1319' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: opacity(.5);
  cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  filter: opacity();
}

.status {
  font-size: var(--text-xs);
  text-transform: uppercase;
  border-radius: 2px;
  margin-top: 6px;
  padding: 2px 6px;
  font-weight: normal;
  display: inline-block;
}

.status-backlogged, .status-playing, .status-started, .status-played, .status-completed, .status-mastered, .status-finished, .status-retired, .status-shelved, .status-abandoned, .status-wishlisted, .status-wishlist {
  background: var(--border);
  color: #fff;
}

.game-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  align-items: center;
  gap: 16px;
  padding: 16px;
  transition: background .15s;
  display: flex;
}

.game-card-edit-btn {
  color: var(--accent);
  font-size: var(--text-sm);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.game-card-edit-btn:hover {
  text-decoration: underline;
}

.game-card-cover {
  object-fit: cover;
  background: var(--tertiary);
  border-radius: 2px;
  flex-shrink: 0;
  width: 62px;
  height: 84px;
}

.game-card-cover-placeholder {
  background: var(--tertiary);
  width: 56px;
  height: 74px;
  font-size: var(--text-xl);
  border-radius: 4px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.game-card-body {
  min-width: 0;
  color: inherit;
  flex-direction: column;
  flex: 1;
  gap: 2px;
  text-decoration: none;
  display: flex;
}

.game-card-body:hover {
  color: inherit;
  text-decoration: none;
}

.game-card-platform {
  font-size: var(--text-xs);
  color: var(--accent-hover);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
}

.game-card-title {
  align-items: center;
  gap: 8px;
  font-weight: 800;
  display: flex;
  overflow: visible;
}

.game-card-title-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}

.game-card-title a {
  text-overflow: ellipsis;
  overflow: hidden;
}

.game-card-title a:hover {
  text-decoration: none;
}

.game-card-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.2;
}

.game-card-footer {
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  display: flex;
}

.game-list {
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
  display: flex;
}

.game-list .game-card .game-card-title {
  margin-bottom: -2px;
}

.game-list .game-list-divider {
  margin-top: 16px;
}

.game-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  display: grid;
}

.game-card-grid {
  background: var(--surface);
  border-radius: var(--radius);
  cursor: pointer;
  flex-direction: column;
  transition: border-color .15s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.game-card-grid-cover-wrap {
  position: relative;
}

.game-card-grid-cover-wrap:hover .browse-card-action {
  opacity: 1;
}

.game-card-grid-cover {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--tertiary);
  width: 100%;
  transition: opacity .15s;
  display: block;
}

.game-card-grid-placeholder {
  aspect-ratio: 3 / 4;
  background: var(--tertiary);
  width: 100%;
  font-size: var(--text-2xl);
  justify-content: center;
  align-items: center;
  display: flex;
}

.game-card-grid-info {
  border-radius: 0 0 var(--radius) var(--radius);
  color: inherit;
  flex-direction: column;
  flex-grow: 1;
  gap: 3px;
  padding: 16px;
  text-decoration: none;
  transition: background .15s;
  display: flex;
}

.game-card-grid-info:hover, .game-card-grid:hover .game-card-grid-info {
  color: inherit;
  text-decoration: none;
}

.game-card-grid-title {
  font-size: var(--text-base);
  align-items: center;
  gap: 5px;
  margin-top: 1px;
  font-weight: 800;
  line-height: 1.2;
  display: flex;
  overflow: visible;
}

.game-card-grid-title-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.game-card-grid-badges {
  gap: 5px;
  margin-top: auto;
  padding-top: 8px;
  display: flex;
}

.game-card-started-title, .game-card-grid-title-text {
  margin-top: 1px;
}

.game-card-grid-title a {
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
}

.game-card-grid-title a:hover {
  text-decoration: none;
}

.game-card-started {
  border-radius: var(--radius);
  background: var(--surface);
  flex-direction: column;
  grid-column: span 2;
  display: flex;
  overflow: hidden;
}

.game-card-started-banner {
  background-position: center;
  background-size: cover;
  background-color: var(--tertiary);
  flex: 1;
  min-height: 120px;
}

.game-card-started-bottom {
  background: var(--surface);
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  transition: background .15s;
  display: flex;
}

.game-card-started-cover-wrap {
  flex-shrink: 0;
  margin-top: -79px;
}

.game-card-started-cover {
  object-fit: cover;
  border-radius: 2px;
  width: 100px;
  height: 134px;
  display: block;
  box-shadow: 0 2px 8px #0006;
}

.game-card-started-info {
  min-width: 0;
  color: inherit;
  flex-direction: column;
  flex: 1;
  gap: 2px;
  text-decoration: none;
  display: flex;
}

.game-card-started-title {
  font-size: var(--text-base);
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-weight: 800;
  line-height: 1.2;
  display: flex;
  overflow: hidden;
}

.game-card-started-title-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 0 auto;
  min-width: 0;
  overflow: hidden;
}

.game-card-started-title a {
  text-overflow: ellipsis;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}

.game-card-started-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.2;
  text-decoration: none;
  display: block;
}

.game-card-started-meta:hover {
  color: var(--text-muted);
  text-decoration: none;
}

.card-badge {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color .15s;
  display: inline-flex;
  position: relative;
  top: -2px;
}

.card-badge.note-icon {
  top: 0;
}

.card-badge.card-badge--accent {
  color: var(--accent);
}

.card-badge-pill {
  text-transform: uppercase;
  letter-spacing: .08em;
  vertical-align: middle;
  background: color-mix(in srgb, var(--border) 75%, transparent);
  color: var(--text-muted);
  border-radius: 4px;
  flex-shrink: 0;
  align-items: center;
  padding: 2px 5px;
  font-size: .6rem;
  font-weight: 800;
  display: inline-flex;
  position: relative;
  top: -1px;
}

.card-badge:hover {
  color: var(--accent);
}

.card-badge[data-tooltip]:after {
  content: attr(data-tooltip);
  background: var(--surface-raised, var(--surface));
  color: var(--text);
  white-space: nowrap;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  pointer-events: none;
  opacity: 0;
  z-index: 10;
  padding: 3px 8px;
  font-size: .6875rem;
  font-weight: 600;
  transition: opacity .15s;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 8px #0000001f;
}

.card-badge[data-tooltip]:hover:after {
  opacity: 1;
}

.view-toggle {
  border-radius: var(--radius);
  display: flex;
  overflow: hidden;
}

.view-toggle-btn {
  height: 45px;
  color: var(--text-muted);
  background: none;
  background: var(--surface);
  border: none;
  padding: 0 18px;
  line-height: 1;
  transition: background .15s, color .15s;
}

.view-toggle-btn:hover, .view-toggle-btn.active {
  background: var(--tertiary);
  color: var(--text);
}

.tooltip-wrap {
  display: inline;
  position: relative;
}

.tooltip-trigger {
  color: var(--text);
  cursor: default;
  text-underline-offset: 2px;
  -webkit-text-decoration: underline dashed;
  text-decoration: underline dashed;
  text-decoration-thickness: 1px;
  -webkit-text-decoration-color: var(--text-muted);
  text-decoration-color: var(--text-muted);
}

.tooltip-trigger:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
  border-radius: 3px;
}

.tooltip-trigger:hover {
  text-decoration-style: solid;
  -webkit-text-decoration-color: var(--accent);
  text-decoration-color: var(--accent);
  color: var(--text);
  cursor: default;
  text-decoration-thickness: 2px;
}

.tooltip-trigger-icon {
  color: var(--text-muted);
  cursor: default;
  align-items: center;
  text-decoration: none;
  display: inline-flex;
  position: relative;
  top: 2px;
}

.tooltip-trigger-icon:hover {
  color: var(--text);
  text-decoration: none;
}

.tooltip-popover {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--tertiary);
  font-size: var(--text-sm);
  color: var(--text);
  white-space: normal;
  text-align: left;
  pointer-events: none;
  z-index: 300;
  text-wrap: pretty;
  opacity: 0;
  visibility: hidden;
  width: 228px;
  padding: 12px 16px;
  line-height: 1.5;
  transition: opacity .15s, transform .15s, visibility .15s;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%)translateY(4px);
  box-shadow: 0 4px 16px #000c;
}

.tooltip-popover-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%)translateY(0);
}

.login-page {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  min-height: 100vh;
  padding: 32px 16px;
  display: flex;
}

.login-page a {
  color: var(--text-muted);
  text-decoration: none;
}

.login-box {
  background: var(--surface);
  border-radius: var(--radius);
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow);
  text-align: left;
  padding: 32px;
}

.login-box h2 {
  font-size: var(--text-xl);
  margin-bottom: 4px;
}

.login-box p {
  color: var(--text);
  font-size: var(--text-sm);
  margin-bottom: 20px;
}

.login-box .input-row {
  gap: 8px;
  display: flex;
}

.login-box .input-row .input {
  flex: 1;
  min-width: 0;
}

.login-box .input-row .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 64px 16px;
}

.empty-state h3 {
  color: var(--text);
  margin-bottom: 8px;
}

main {
  flex: 1;
}

.page-header {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 32px 0;
  display: flex;
}

.page-header.social {
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  height: 41px;
  display: grid;
}

.game-list-divider {
  font-size: var(--text-xl);
  letter-spacing: -.5px;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  display: flex;
}

.game-list-divider.profile-lists {
  margin-top: 2px;
  margin-bottom: 14px;
}

.game-list .game-list-divider:first-child, .game-grid .game-list-divider:first-child {
  margin-top: 0;
}

.game-grid .game-list-divider {
  grid-column: 1 / -1;
  margin-top: 8px;
  margin-bottom: -6px;
}

.game-list-divider-count {
  font-size: var(--text-base);
  color: var(--text-muted);
  font-weight: 500;
}

.my-games-main {
  min-width: 0;
}

.my-games-main .game-grid {
  grid-template-columns: repeat(4, 1fr);
}

.social-search-avatar {
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

.social-search-avatar-placeholder {
  background: var(--tertiary);
}

.social-search-result {
  cursor: default;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.social-search-actor {
  min-width: 0;
  color: inherit;
  flex: 1;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  display: flex;
}

.social-search-actor:hover {
  text-decoration: none;
}

.social-feed {
  flex-direction: column;
  display: flex;
}

.feed-item {
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  display: flex;
}

.feed-item:nth-child(odd) {
  background: var(--surface);
  border-radius: var(--radius);
}

.feed-item:last-child {
  border-bottom: none;
}

.feed-main {
  flex-wrap: wrap;
  flex: 1;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.feed-status {
  color: var(--text-muted);
}

.feed-item-time {
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  font-size: .875rem;
}

.feed-avatar-link {
  flex-shrink: 0;
}

.feed-avatar {
  object-fit: cover;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: block;
}

.feed-avatar-placeholder {
  background: var(--tertiary);
}

.feed-text {
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
}

.feed-username {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}

.feed-game-title {
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  max-width: 40ch;
  display: inline-block;
  overflow: hidden;
}

.feed-game-title-btn {
  font: inherit;
  color: var(--text);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.feed-game-title-btn:hover {
  text-underline-offset: 2px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  -webkit-text-decoration-color: var(--accent);
  text-decoration-color: var(--accent);
}

.feed-game-cover {
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  width: 32px;
  height: 42px;
}

.social-body {
  align-items: flex-start;
  gap: 24px;
  display: flex;
}

.social-left {
  flex: 1;
  min-width: 0;
}

.social-right {
  background: var(--surface);
  border-radius: var(--radius);
  flex-shrink: 0;
  width: 350px;
  padding: 24px;
  position: sticky;
  top: 80px;
}

.social-section-title {
  font-size: var(--text-lg);
  align-items: center;
  gap: 8px;
  font-weight: 800;
  display: flex;
}

.follows-list {
  flex-direction: column;
  margin-top: 8px;
  display: flex;
}

.follow-list-item {
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 0;
  display: flex;
}

.follow-list-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.follow-list-item-link {
  min-width: 0;
  color: inherit;
  flex: 1;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  display: flex;
}

.follow-list-item-link:hover, .follow-list-item-link:hover .follow-name {
  text-decoration: none;
}

.follow-card {
  border-radius: var(--radius);
  background: var(--surface);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  text-decoration: none;
  transition: background .15s;
  display: flex;
}

.follow-card:hover {
  background: var(--tertiary);
}

.follow-avatar {
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.follow-avatar-placeholder {
  background: var(--tertiary);
}

.follow-info {
  min-width: 0;
}

.follow-name {
  font-size: var(--text-sm);
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  overflow: hidden;
}

.follow-handle {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.lists-grid {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.list-card {
  background: var(--surface);
  border-radius: var(--radius);
  cursor: pointer;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  transition: background .15s;
  display: flex;
}

.list-card:hover {
  background: color-mix(in srgb, var(--surface) 85%, var(--tertiary));
}

.list-card-covers {
  isolation: isolate;
  flex-shrink: 0;
  display: flex;
}

.list-card-cover {
  object-fit: cover;
  background: var(--tertiary);
  border-radius: 2px;
  flex-shrink: 0;
  width: 82px;
  height: 110px;
  display: block;
  box-shadow: -3px 0 6px #0000004d;
}

.list-card-cover:first-child {
  box-shadow: none;
  z-index: 5;
  margin-left: 0;
  scale: 88%;
}

.list-card-cover:nth-of-type(2) {
  z-index: 100;
  scale: 100%;
}

.list-card-cover:nth-of-type(3) {
  z-index: 999;
  scale: 115%;
}

.list-card-cover:nth-of-type(4) {
  z-index: 100;
  scale: 100%;
}

.list-card-cover:last-of-type {
  z-index: 5;
  scale: 88%;
}

.list-card-cover + .list-card-cover {
  margin-left: -18px;
}

.list-card-info {
  flex-direction: column;
  flex: 1;
  gap: 0;
  min-width: 0;
  display: flex;
}

.list-card-name {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 800;
  overflow: hidden;
}

.list-card-count {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.list-card-actions {
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  display: flex;
}

.community-list-card {
  background: var(--surface);
  border-radius: var(--radius);
  cursor: pointer;
  flex-direction: column;
  padding: 16px;
  transition: background .15s, transform .15s;
  display: flex;
}

.community-list-card:hover {
  background: color-mix(in srgb, var(--surface) 85%, var(--tertiary));
  transform: translateY(-4px);
}

.community-list-card-covers {
  background: color-mix(in srgb, var(--surface) 93%, #000);
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  padding: 24px 16px;
  display: flex;
}

.community-list-card-info {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.community-list-card-name {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
  overflow: hidden;
}

.community-list-card-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.community-list-card-creator {
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  display: flex;
}

.community-list-card-avatar {
  object-fit: cover;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

.community-list-card-avatar-placeholder {
  background: var(--tertiary);
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

.community-list-card-username {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  overflow: hidden;
}

.lists-community-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  display: grid;
}

.list-overflow-wrap {
  line-height: 0;
  position: relative;
}

.list-overflow-btn {
  color: var(--text-muted);
  font-size: var(--text-sm);
  letter-spacing: 0;
  border: 2px solid var(--border);
  padding: 9px;
  line-height: 1;
}

.list-overflow-menu {
  background: var(--surface);
  border: 1px solid var(--tertiary);
  border-radius: var(--radius);
  z-index: 200;
  min-width: 180px;
  padding: 4px 0;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  box-shadow: 0 4px 16px #00000080;
}

.list-overflow-option {
  text-align: left;
  width: 100%;
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: none;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  font-family: inherit;
  transition: color .15s, background .15s;
  display: flex;
}

.list-overflow-option > span {
  font-size: var(--text-xs);
  color: var(--accent);
  flex-shrink: 0;
}

.list-overflow-option:hover {
  color: var(--text);
  background: var(--bg);
}

.list-overflow-option-danger {
  color: var(--danger) !important;
}

.list-overflow-option-danger:hover {
  background: var(--bg);
  color: var(--danger) !important;
}

.list-overflow-divider {
  background: var(--tertiary);
  height: 1px;
  margin: 4px 0;
}

.list-overflow-confirm {
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  display: flex;
}

.modal-tall {
  flex-direction: column;
  max-height: 90vh;
  display: flex;
  overflow-y: auto;
}

.modal-wide {
  max-width: 520px !important;
}

.modal-lg {
  max-width: 680px !important;
}

.modal .form-field {
  margin-bottom: 16px;
}

.list-edit-header {
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  display: flex;
}

.list-edit-name-input {
  font-size: var(--text-base);
  flex-shrink: 0;
  width: 100%;
  max-width: 400px;
  font-family: inherit;
  font-weight: 600;
}

.list-edit-footer {
  border-top: 2px solid var(--border);
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 24px 0;
  display: flex;
}

.list-edit-search-wrap {
  flex-shrink: 0;
  width: 280px;
  margin-right: 4px;
  position: relative;
}

.list-edit-search-input, .input.header-search-input.list-edit-search-input {
  width: 100%;
  height: 36px;
}

.list-edit-search-results {
  max-height: 480px;
  overflow-y: auto;
}

.list-edit-items {
  flex-direction: column;
  display: flex;
}

.list-edit-item {
  border-radius: var(--radius);
  cursor: grab;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  transition: background .1s;
  display: flex;
}

.list-edit-item:active {
  cursor: grabbing;
}

.list-edit-item:nth-child(odd) {
  background: var(--surface);
}

.list-edit-item:hover {
  background: color-mix(in srgb, var(--surface) 60%, var(--tertiary));
}

.list-edit-item-over {
  outline: 1px dashed var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
}

.public-list-items {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.public-list-item {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.public-list-cover {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface);
  width: 100%;
  display: block;
}

.public-list-meta {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.public-list-rank {
  font-size: var(--text-xs);
  color: var(--accent-hover);
  font-weight: 800;
  line-height: 1;
}

.public-list-title {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 500;
  line-height: 1.2;
  display: -webkit-box;
  overflow: hidden;
}

.public-list-award {
  font-size: var(--text-sm);
  color: var(--text-muted);
  align-items: center;
  gap: 4px;
  margin-top: -2px;
  display: flex;
}

.list-award-wrap {
  flex-shrink: 0;
  position: relative;
}

.list-award-btn {
  border: 1px dashed var(--border);
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border-radius: 20px;
  padding: 3px 10px;
  font-family: inherit;
  transition: color .15s, border-color .15s;
}

.list-award-btn:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

.list-award-btn.list-award-btn-set {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent);
}

.list-award-picker {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 50;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 320px;
  padding: 6px;
  display: grid;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
}

.list-award-option {
  border: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: none;
  border-radius: 20px;
  padding: 5px 10px;
  font-family: inherit;
  transition: color .15s, border-color .15s, background .15s;
  overflow: hidden;
}

.list-award-option:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

.list-award-option.selected {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.list-award-custom {
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding-top: 4px;
  display: flex;
}

.list-edit-drag-handle {
  color: var(--text-muted);
  cursor: grab;
  flex-shrink: 0;
  align-items: center;
  display: flex;
}

.list-modal-body {
  gap: 20px;
  margin-bottom: 4px;
  display: flex;
}

.list-modal-left {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.list-modal-right {
  flex-direction: column;
  flex-shrink: 0;
  width: 260px;
  display: flex;
}

.list-modal-section-label {
  color: var(--text);
  margin-bottom: 12px;
  font-weight: 800;
  display: block;
}

.list-modal-empty {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
  border: 1px dashed var(--tertiary);
  border-radius: var(--radius);
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 24px 0;
  display: flex;
}

.list-modal-results-label {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding: 4px 2px 6px;
  font-weight: 800;
}

.list-modal-add-item-year {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 6px;
}

.list-modal-add-item-platforms {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  max-width: 160px;
  overflow: hidden;
}

.list-modal-items {
  flex-direction: column;
  flex: 1;
  gap: 4px;
  max-height: 340px;
  display: flex;
  overflow-y: auto;
}

.list-modal-item {
  background: var(--bg);
  border-radius: var(--radius);
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  display: flex;
}

.list-modal-item-rank {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: right;
  flex-shrink: 0;
  width: 22px;
}

.list-modal-item-cover {
  object-fit: cover;
  background: var(--tertiary);
  border-radius: 1px;
  flex-shrink: 0;
  width: 28px;
  height: 36px;
}

.list-modal-item-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.list-modal-item-actions {
  flex-shrink: 0;
  gap: 0;
  display: flex;
}

.list-modal-item-btn {
  color: var(--text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 2px;
  padding: 2px 5px;
  line-height: 1;
  transition: color .15s;
}

.list-modal-item-btn:hover:not(:disabled) {
  color: var(--text);
}

.list-modal-item-btn:disabled {
  opacity: .25;
  cursor: default;
}

.list-modal-item-btn-remove:hover:not(:disabled) {
  color: var(--danger);
}

.list-modal-add {
  border-top: 1px solid var(--tertiary);
  margin-top: 12px;
  padding-top: 14px;
}

.list-modal-add-title {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 500;
}

.list-modal-add-results {
  flex-direction: column;
  flex: 1;
  max-height: 340px;
  display: flex;
  overflow-y: auto;
}

.list-modal-add-item {
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius);
  background: none;
  border: none;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  transition: background .1s;
  display: flex;
}

.list-modal-add-item:hover, .list-modal-add-item:focus-visible {
  background: var(--bg);
}

.list-modal-add-item-cover {
  object-fit: cover;
  background: var(--tertiary);
  border-radius: 1px;
  flex-shrink: 0;
  width: 28px;
  height: 36px;
}

.list-modal-add-item-info {
  flex-direction: column;
  gap: 2px;
  display: flex;
  overflow: hidden;
}

.list-modal-add-item-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.share-modal-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  display: flex;
}

.modal-close-btn {
  color: var(--text-muted);
  border-radius: var(--radius);
  background: none;
  border: none;
  align-items: center;
  padding: 4px;
  transition: color .15s;
  display: flex;
}

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

.share-preview {
  border-radius: var(--radius);
  background: var(--tertiary);
  justify-content: center;
  align-items: center;
  width: 100%;
  max-height: 320px;
  display: flex;
  overflow: hidden;
}

.share-preview img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 320px;
  display: block;
}

.share-link-field {
  align-items: center;
  display: flex;
}

.share-link-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--text-muted);
  flex: 1;
  overflow: hidden;
}

.share-link-copy {
  font-size: var(--text-xs);
  color: var(--accent);
  flex-shrink: 0;
}

.page-header h1 {
  font-size: var(--text-xl);
  font-weight: 800;
}

.search-wrapper {
  flex: 1;
  position: relative;
}

.header-search {
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.input.header-search-input {
  border-radius: var(--radius);
  background: var(--surface);
  border: 2px solid var(--border);
  width: 100%;
  height: 45px;
  color: var(--text);
  font-size: var(--text-sm);
  padding: 0 16px 0 44px;
  transition: all .2s;
}

.input.header-search-input::placeholder {
  color: var(--text-muted);
}

.input.header-search-input:focus {
  border-color: var(--accent);
  outline: none;
}

.header-search-icon {
  color: var(--text-muted);
  pointer-events: none;
  transition: color .2s;
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
}

.input.header-search-input:focus + .header-search-icon {
  color: var(--accent);
}

.search-wrapper input {
  width: 100%;
}

.search-results {
  background: var(--surface);
  border: 1px solid var(--tertiary);
  border-radius: var(--radius);
  z-index: 100;
  max-height: 360px;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  overflow-y: auto;
  box-shadow: 0 4px 16px #0009;
}

.search-result-item {
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border: none;
  border-bottom: 1px solid var(--tertiary);
  background: none;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  display: flex;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover, .search-result-item:focus-visible {
  background: var(--bg);
}

.search-result-cover {
  object-fit: cover;
  background: var(--tertiary);
  border-radius: 2px;
  flex-shrink: 0;
  width: 32px;
  height: 42px;
}

.search-result-info {
  min-width: 0;
  overflow: hidden;
}

.search-result-info strong {
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
}

.search-result-info span {
  font-size: var(--text-xs);
  text-transform: uppercase;
  color: var(--text-muted);
}

.search-result-platforms, .search-result-info .search-result-platforms {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.modal-overlay {
  background: var(--overlay);
  z-index: 200;
  justify-content: center;
  align-items: center;
  padding: 16px;
  display: flex;
  position: fixed;
  inset: 0;
}

.modal {
  background: var(--surface);
  border-radius: var(--radius);
  width: 100%;
  max-width: 440px;
  padding: 28px;
  box-shadow: 0 8px 32px #00000029;
}

.modal .input {
  width: 100%;
}

.modal h2 {
  font-size: var(--text-lg);
  margin-bottom: 8px;
}

.form-field {
  margin-bottom: 24px;
}

.form-field.add-modal-field {
  margin-bottom: 0;
}

.form-field label {
  font-size: var(--text-sm);
  color: var(--text);
  margin-bottom: 8px;
  font-weight: 800;
  display: block;
}

.form-field input[type="checkbox"] {
  appearance: none;
  cursor: pointer;
  border: 2px solid var(--border);
  background: none;
  border-radius: 5px;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  transition: background .15s, border-color .15s;
}

.form-field input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2308121D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

.checkbox-wrap {
  align-items: center;
  display: flex;
}

.form-row {
  gap: 16px;
  margin-bottom: 16px;
  display: grid;
}

.form-row .form-field {
  min-width: 0;
  margin-bottom: 0;
}

.form-row-triple, .form-row-dates {
  grid-template-columns: 1fr 1fr 1fr;
}

.form-span-2 {
  grid-column: span 2;
}

.form-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  display: flex;
}

p.error-msg {
  color: var(--danger);
  font-size: var(--text-sm);
  margin: 16px 0 0;
}

.filter-tabs {
  background: none;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  display: flex;
  overflow-x: auto;
}

.filter-tab {
  font-size: var(--text-sm);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 8px;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  transition: all .15s;
  display: inline-flex;
}

.my-games-main .filter-tab, .profile-content .filter-tab {
  gap: 0;
}

.filter-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--tertiary) 85%, var(--border));
}

.filter-tab.active {
  background: var(--border);
  color: var(--text) !important;
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-menu {
  background: var(--surface);
  border: 1px solid var(--tertiary);
  border-radius: var(--radius);
  z-index: 200;
  min-width: 130px;
  padding: 4px 0;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  box-shadow: 0 4px 16px #00000080;
}

.nav-dropdown-item {
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
  padding: 8px 14px;
  text-decoration: none;
  transition: color .15s, background .15s;
  display: block;
}

.nav-dropdown-item:hover {
  color: var(--text);
  background: var(--bg);
  text-decoration: none;
}

.nav-dropdown-item-active {
  color: var(--accent) !important;
}

.nav-dropdown-chevron {
  transition: transform .15s;
}

.nav-dropdown-chevron.open {
  transform: rotate(180deg);
}

.nav-link {
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s, background .15s;
  display: inline-flex;
}

.nav-link:hover {
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
}

.nav-link-active {
  color: var(--text);
  background: var(--surface);
}

.now-playing-block {
  background: var(--bg);
  position: relative;
}

.now-playing-block .container {
  z-index: 10;
  padding-top: 78px;
  padding-bottom: 52px;
  position: relative;
}

.now-playing-content {
  max-width: 800px;
  margin: 0 auto;
}

.now-playing-bg {
  pointer-events: none;
  opacity: .2;
  -webkit-mask-image: linear-gradient(to bottom, var(--bg) 20%, transparent 85%);
  mask-image: linear-gradient(to bottom, var(--bg) 20%, transparent 85%);
  -webkit-mask-image: linear-gradient(to bottom, var(--bg) 20%, transparent 85%);
  background-position: center;
  background-size: cover;
  position: absolute;
  inset: 0 0 -280px;
}

.now-playing-title {
  font-size: var(--text-3xl);
  margin-bottom: 16px;
  font-weight: 800;
}

.now-playing-input {
  width: 100%;
  padding: 12px 16px;
}

.profile-banner-img {
  background-color: var(--tertiary);
  width: 100%;
  height: 320px;
  position: relative;
  overflow: hidden;
}

.profile-banner-overlay {
  background: var(--bg);
  pointer-events: none;
  z-index: 1;
  opacity: .5;
  position: absolute;
  inset: 0;
}

.profile-banner-content-wrap {
  z-index: 2;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.profile-banner-content {
  align-items: flex-end;
  gap: 24px;
  padding: 24px 0;
  display: flex;
}

.profile-banner-identity {
  align-items: flex-end;
  gap: 24px;
  display: flex;
}

.profile-banner-avatar {
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
  width: 90px;
  height: 90px;
}

@keyframes rpg-walk-down {
  0%, 100% {
    background-position-x: 0;
  }

  25% {
    background-position-x: -90px;
  }

  50% {
    background-position-x: -180px;
  }

  75% {
    background-position-x: -90px;
  }
}

.profile-sidebar-sprite {
  border: 3px solid var(--bg);
  background: linear-gradient(#87ceeb 0%, #e0f0ff 60%, #90b060 60%, #608040 100%);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 140px;
  height: 140px;
  margin-top: -67px;
  margin-bottom: 16px;
  display: flex;
  box-shadow: 0 4px 20px #00000059;
}

.profile-sidebar-sprite-inner {
  width: 90px;
  height: 90px;
  image-rendering: pixelated;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 270px 360px;
  flex-shrink: 0;
  animation: .6s step-end infinite rpg-walk-down;
}

.profile-follow-btn--following:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--text);
}

.follow-state-default, .follow-state-hover {
  display: contents;
}

.profile-follow-btn--following .follow-state-hover, .profile-follow-btn--following:hover .follow-state-default {
  display: none;
}

.profile-follow-btn--following:hover .follow-state-hover {
  display: contents;
}

.social-links {
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  display: flex;
}

.social-link {
  opacity: .6;
  align-items: center;
  text-decoration: none;
  transition: opacity .15s;
  display: inline-flex;
}

.social-link svg {
  width: 100%;
  height: 100%;
}

.social-link img {
  filter: brightness(0) invert();
}

a.social-link:hover {
  opacity: 1;
}

.social-links .tooltip-trigger {
  color: inherit;
  cursor: default;
  border-bottom: none;
}

.social-links .tooltip-trigger:hover {
  color: inherit;
  border-bottom: none;
}

.settings-banner-preview {
  aspect-ratio: 1600 / 380;
  background: var(--tertiary);
  border-radius: var(--radius);
  background-position: center;
  background-size: cover;
  width: 100%;
}

.settings-subtext {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: -8px;
  margin-bottom: 8px;
  font-style: italic;
  display: block;
}

.settings-subtext-link {
  color: var(--text-muted);
  text-decoration: none;
}

.settings-subtext-link:hover {
  color: var(--text);
  text-decoration: underline;
  -webkit-text-decoration-color: var(--danger);
  text-decoration-color: var(--danger);
}

.faq-section-container {
  max-width: 480px;
}

.feedback-form .input {
  width: 100%;
}

.faq-section {
  margin-bottom: 24px;
}

.faq-section-container .faq-section:last-of-type {
  margin-bottom: -20px;
}

.faq-section-heading {
  font-size: var(--text-xl);
  letter-spacing: -.5px;
  margin-bottom: 16px;
  font-weight: 800;
}

.faq-item {
  margin-bottom: 24px;
}

.faq-question {
  margin-bottom: 8px;
  font-weight: 800;
}

.faq-answer {
  color: var(--text);
  text-wrap: pretty;
  line-height: 1.4;
}

p.faq-answer a {
  color: var(--text);
  text-underline-offset: 2px;
  -webkit-text-decoration: underline dashed;
  text-decoration: underline dashed;
  text-decoration-thickness: 1px;
  -webkit-text-decoration-color: var(--text);
  text-decoration-color: var(--text);
}

p.faq-answer a:hover {
  color: var(--text);
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  -webkit-text-decoration-color: var(--accent);
  text-decoration-color: var(--accent);
}

.container .browse-section {
  margin-top: 32px;
  scroll-margin-top: 72px;
}

#recent, #upcoming {
  margin-top: 32px;
}

.discover-pills {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  display: flex;
}

.discover-pill {
  color: var(--text-muted);
  background: var(--tertiary);
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  text-decoration: none;
  transition: color .15s, background .15s;
  display: inline-flex;
}

.discover-pill:hover {
  color: var(--text);
  background: var(--border);
  text-decoration: none;
}

.back-to-top {
  z-index: 40;
  background: var(--accent);
  width: 52px;
  height: 52px;
  color: var(--text);
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: color .15s, border-color .15s;
  display: flex;
  position: fixed;
  bottom: 40px;
  right: 40px;
}

.back-to-top:hover {
  background: var(--accent-hover);
}

.browse-section-header {
  align-items: baseline;
  gap: 16px;
  margin-bottom: 18px;
  display: flex;
}

.browse-section-header .browse-section-title {
  margin-bottom: 0;
}

.browse-section-more {
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
  text-decoration: none;
}

.browse-section-more:hover {
  color: var(--text);
  text-decoration: none;
}

.browse-section-title {
  font-size: var(--text-3xl);
  letter-spacing: -.5px;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-weight: 800;
  line-height: 1.05;
  display: flex;
}

.section-page-header {
  align-items: center;
  gap: 16px;
  padding: 0 0 24px;
  display: flex;
}

.section-page-back {
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 0;
  display: inline-flex;
}

.section-page-back:hover {
  color: var(--text);
}

.browse-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  display: grid;
}

.community-title-row {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  display: flex;
}

.community-title-search {
  flex-shrink: 0;
  width: 272px;
}

.community-page-header {
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 24px;
  display: grid;
}

.community-page-header .filter-tabs {
  grid-column: 1 / 4;
}

.community-page-header .community-search {
  grid-column: 4;
}

.browse-card {
  color: inherit;
  display: block;
}

.browse-card-cover-wrap {
  position: relative;
}

.browse-card-cover-wrap a {
  line-height: 0;
  display: block;
}

.browse-card-cover {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface);
  width: 100%;
  transition: opacity .15s;
  display: block;
}

.browse-card-action {
  border-radius: var(--radius) var(--radius) 0 0;
  background: color-mix(in srgb, var(--accent) 90%, transparent);
  cursor: pointer;
  color: var(--text);
  font-size: var(--text-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: 0;
  z-index: 2;
  border: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  font-weight: 800;
  transition: opacity .18s;
  display: flex;
  position: absolute;
  inset: 0;
}

.game-card-badge {
  z-index: 1;
  pointer-events: none;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  border-radius: 4px;
  padding: 3px 6px;
  font-weight: 800;
  position: absolute;
  top: 8px;
  left: 8px;
}

.game-card-badge--completed, .game-card-badge--mastered, .game-card-badge--finished, .game-card-badge--retired, .game-card-badge--abandoned, .game-card-badge--shelved {
  background: var(--surface);
  color: var(--text-muted);
}

.playthrough-dropdown {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  z-index: 10;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  overflow: hidden;
  box-shadow: 0 4px 16px #0006;
}

.playthrough-dropdown-item {
  text-align: left;
  cursor: pointer;
  width: 100%;
  font-size: var(--text-sm);
  color: var(--text);
  background: none;
  border: none;
  padding: 10px 14px;
  display: block;
}

.playthrough-dropdown-item:hover {
  background: var(--tertiary);
}

.playthrough-dropdown-divider {
  background: var(--border);
  height: 1px;
  margin: 4px 0;
}

.playthrough-dropdown-new {
  color: var(--accent);
}

.browse-card-cover-placeholder {
  font-size: var(--text-2xl);
  justify-content: center;
  align-items: center;
  display: flex;
}

.browse-card-cover-wrap:hover ~ .browse-card-title a {
  text-underline-offset: 2px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  -webkit-text-decoration-color: var(--accent);
  text-decoration-color: var(--accent);
}

.browse-card-title {
  margin-top: 10px;
  font-weight: normal;
  line-height: 1.4;
}

.browse-card-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.2;
}

.game-card-star-rating {
  height: auto;
  padding: 0;
  line-height: 1;
}

.select {
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  position: relative;
}

.select-trigger {
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: none;
  align-items: center;
  padding: 0;
  display: flex;
}

.select-trigger:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

.select-arrow {
  flex-shrink: 0;
  transition: transform .15s;
}

.select-arrow.open {
  transform: rotate(180deg);
}

.select-menu {
  background: var(--surface);
  border: 1px solid var(--tertiary);
  border-radius: var(--radius);
  z-index: 200;
  min-width: 100%;
  max-height: 260px;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  overflow-y: auto;
  box-shadow: 0 4px 16px #00000080;
}

.select-option {
  font-size: var(--text-sm);
  cursor: pointer;
  white-space: nowrap;
  color: var(--text-muted);
  padding: 8px 14px;
  text-decoration: none;
}

.select-option:hover, .select-option.active {
  color: var(--text);
  background: var(--bg);
  text-decoration: none;
}

.select-option.selected {
  color: var(--accent);
}

.select-option--indent {
  padding-left: 26px;
}

.select-option-header {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  pointer-events: none;
  padding: 8px 14px 4px;
  font-weight: 800;
}

.select-filter .select-trigger, .lists-page-header {
  font-size: var(--text-xl);
  color: var(--text);
  gap: 6px;
  padding: 4px 0;
  font-weight: 800;
}

.select-filter .select-arrow {
  color: var(--text);
  width: 18px;
  height: 18px;
}

.select-sort {
  height: 31px;
}

.select-sort .select-trigger {
  height: 31px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--tertiary);
  border-radius: var(--radius);
  gap: 6px;
  padding: 0 10px;
}

.select-sort .select-arrow {
  color: var(--text-muted);
}

.select-input {
  width: 100%;
}

.select-input .select-trigger {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  font-size: var(--text-sm);
  color: var(--bg);
  background: var(--text);
  border-radius: var(--radius);
  border: 0;
  justify-content: space-between;
  padding: 0 12px;
}

.select-input .select-trigger > span {
  text-overflow: ellipsis;
  overflow: hidden;
}

.select-input .select-arrow {
  color: var(--bg);
  opacity: .5;
}

.select-input .select-menu {
  width: 100%;
}

.filter-select {
  appearance: none;
  color: var(--text);
  cursor: pointer;
  font-size: var(--text-lg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 4px center no-repeat;
  border: none;
  padding: 4px 28px 4px 0;
  font-weight: 800;
}

.filter-select:focus {
  outline: none;
}

.sort-select {
  appearance: none;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center;
  border: 1px solid var(--tertiary);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--text-xs);
  height: 31px;
  padding: 0 28px 0 10px;
}

.sort-select:focus {
  border-color: var(--accent);
  color: var(--text);
  outline: none;
}

.handle-typeahead {
  flex: 1;
  min-width: 0;
  position: relative;
}

.handle-typeahead .input {
  width: 100%;
}

.handle-suggestions {
  background: var(--surface);
  border: 1px solid var(--tertiary);
  border-radius: var(--radius);
  z-index: 100;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  overflow: hidden;
  box-shadow: 0 4px 16px #0009;
}

.handle-suggestion {
  cursor: pointer;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  transition: background .1s;
  display: flex;
}

.handle-suggestion + .handle-suggestion {
  border-top: 1px solid var(--tertiary);
}

.handle-suggestion:hover, .handle-suggestion.active {
  background: var(--bg);
}

.handle-suggestion-avatar {
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.handle-suggestion-avatar-placeholder {
  background: var(--tertiary);
}

.handle-suggestion-name {
  font-size: var(--text-sm);
  font-weight: 500;
}

.handle-suggestion-handle {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.header-menu {
  margin-left: 6px;
  position: relative;
}

.header-menu-trigger {
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  gap: 5px;
  padding: 4px 2px;
  transition: color .15s;
  display: flex;
}

.header-menu-trigger:hover, .header-menu-trigger-active {
  color: var(--text);
}

.header-menu-chevron {
  transition: transform .15s;
}

.header-menu-chevron.open {
  transform: rotate(180deg);
}

.header-menu-dropdown {
  background: var(--surface);
  border: 1px solid var(--tertiary);
  border-radius: var(--radius);
  z-index: 200;
  min-width: 160px;
  padding: 4px 0;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  box-shadow: 0 4px 16px #00000080;
}

.header-menu-item {
  text-align: left;
  width: 100%;
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px 14px;
  text-decoration: none;
  transition: color .15s, background .15s;
  display: block;
}

.header-menu-item:hover {
  color: var(--text);
  background: var(--bg);
  text-decoration: none;
}

.header-menu-item-signout, .header-menu-item-signout:hover {
  color: var(--danger, #e05252);
}

.header-menu-divider {
  background: var(--tertiary);
  height: 1px;
  margin: 4px 0;
}

.header-left {
  flex-shrink: 0;
  align-items: center;
  gap: 20px;
  display: flex;
}

.header-nav-left {
  align-items: center;
  gap: 4px;
  display: flex;
}

.header-middle {
  flex: 1;
  justify-content: center;
  max-width: 480px;
  margin: 0 16px;
  display: flex;
  position: relative;
}

.header-right {
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  display: flex;
}

.header-desktop-nav-right {
  align-items: center;
  gap: 12px;
  display: flex;
}

.mobile-menu {
  display: none;
  position: relative;
}

.mobile-menu-trigger {
  border-radius: var(--radius);
  width: 36px;
  height: 36px;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  transition: color .15s, background .15s;
  display: flex;
}

.mobile-menu-trigger:hover {
  color: var(--text);
  background: var(--surface);
}

.mobile-menu-dropdown {
  background: var(--surface);
  border: 1px solid var(--tertiary);
  border-radius: var(--radius);
  z-index: 200;
  min-width: 180px;
  padding: 4px 0;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  box-shadow: 0 4px 16px #00000080;
}

.mobile-menu-item {
  text-align: left;
  width: 100%;
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px 16px;
  font-family: inherit;
  text-decoration: none;
  transition: color .15s, background .15s;
  display: block;
}

.mobile-menu-item:hover {
  color: var(--text);
  background: var(--bg);
  text-decoration: none;
}

.mobile-menu-item-signout, .mobile-menu-item-signout:hover {
  color: var(--danger, #e05252);
}

.mobile-menu-divider {
  background: var(--tertiary);
  height: 1px;
  margin: 4px 0;
}

.profile-content-layout {
  align-items: flex-start;
  gap: 32px;
  display: flex;
}

.profile-sidebar {
  flex-direction: column;
  flex-shrink: 0;
  gap: 0;
  width: 100%;
  min-width: 0;
  display: flex;
}

.profile-content {
  flex: 1;
  min-width: 0;
  padding-top: 16px;
}

.profile-content .game-grid {
  margin-top: 12px;
}

.profile-status-pills {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.profile-status-dropdown {
  display: none;
}

.profile-sidebar .btn {
  margin-bottom: 24px;
}

.game-detail-banner-img {
  background-color: var(--tertiary);
  width: 100%;
  height: 320px;
  position: relative;
  overflow: hidden;
}

.game-detail-banner-overlay {
  background: var(--bg);
  pointer-events: none;
  z-index: 1;
  opacity: .5;
  position: absolute;
  inset: 0;
}

.game-detail-banner-content-wrap {
  z-index: 3;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.game-detail-banner-content {
  color: #fff;
  grid-template-columns: 260px 1fr;
  align-items: end;
  gap: 32px;
  padding: 24px 0;
  display: grid;
}

.game-detail-banner-spacer {
  align-self: start;
  height: 0;
  overflow: visible;
}

.game-detail-banner-cover-img {
  border-radius: var(--radius);
  background: var(--tertiary);
  width: 100%;
  display: block;
  box-shadow: 0 4px 24px #0006;
}

.game-detail-banner-title-area {
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
  display: flex;
}

.game-detail-cover {
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--tertiary);
  flex-shrink: 0;
  width: 100%;
  height: auto;
  margin-bottom: 16px;
  display: block;
  position: relative;
  box-shadow: 0 4px 24px #0006;
}

.game-detail-title {
  font-size: var(--text-2xl);
  color: #fff;
  margin: 0;
  font-weight: 800;
  line-height: 1.1;
}

.game-detail-banner-sub {
  color: #ffffffa6;
  overflow-wrap: break-word;
  margin: 0;
}

.game-detail-layout {
  z-index: 4;
  grid-template-columns: 260px 1fr;
  align-items: start;
  gap: 32px;
  padding-top: 0;
  padding-bottom: 24px;
  display: grid;
  position: relative;
}

.game-detail-add-mobile {
  display: none;
}

.game-detail-add-desktop {
  display: block;
}

.game-detail-stats-mobile {
  display: none;
}

.game-detail-stats-desktop {
  display: block;
}

.game-detail-cover-mobile, .game-detail-mobile-top, .game-detail-meta-mobile {
  display: none;
}

.game-detail-meta-desktop {
  display: block;
}

.game-detail-sidebar {
  min-width: 0;
  padding-top: 0;
}

.game-detail-sidebar .game-detail-cover {
  visibility: hidden;
  margin-top: calc(-1 * (24px + var(--game-title-section-height, 44px)));
}

.game-detail-meta-section {
  margin-bottom: 16px;
}

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

.game-detail-meta-value {
  font-size: var(--text-base);
  color: var(--text);
  line-height: 1.5;
}

.game-players-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 8px;
  display: grid;
}

.game-player-avatar-wrap {
  aspect-ratio: 1;
  border-radius: 50%;
  width: 100%;
  transition: opacity .15s;
  display: block;
}

.game-player-avatar-wrap:hover {
  opacity: .8;
}

.game-player-avatar {
  object-fit: cover;
  aspect-ratio: 1;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: block;
}

.game-player-avatar--placeholder {
  background: var(--tertiary);
}

.game-detail-links {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.game-detail-link {
  color: var(--text);
  font-size: var(--text-sm);
}

.game-detail-link:hover {
  color: var(--text);
  text-underline-offset: 2px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  -webkit-text-decoration-color: var(--accent);
  -webkit-text-decoration-color: var(--accent);
  text-decoration-color: var(--accent);
}

.game-detail-content {
  min-width: 0;
  padding-top: 24px;
}

.game-detail-related {
  margin-top: 24px;
}

.game-detail-related-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.game-detail-summary {
  color: var(--text);
  margin-bottom: 24px;
  line-height: 1.6;
}

.read-more-btn {
  cursor: pointer;
  color: var(--text);
  font-size: inherit;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  text-decoration: underline;
  transition: color .15s;
}

.read-more-btn:hover {
  color: var(--accent);
}

.game-detail-screenshots {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  display: grid;
}

.game-updates {
  margin-top: 24px;
}

.game-updates-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  display: flex;
}

.game-updates-title {
  font-size: var(--text-xl);
  letter-spacing: -.5px;
  font-weight: 800;
}

.game-updates-nav-row {
  gap: 4px;
  display: flex;
}

.game-updates-nav-btn {
  background: var(--tertiary);
  width: 28px;
  height: 28px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: background .15s, color .15s;
  display: flex;
}

.game-updates-nav-btn:hover {
  background: var(--border);
  color: var(--text);
}

.game-updates-carousel {
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  gap: 12px;
  padding-bottom: 4px;
  display: flex;
  overflow-x: auto;
}

.game-updates-carousel::-webkit-scrollbar {
  display: none;
}

.game-cover-carousel {
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  gap: 12px;
  padding-bottom: 4px;
  display: flex;
  overflow-x: auto;
}

.game-cover-carousel::-webkit-scrollbar {
  display: none;
}

.game-cover-carousel-card {
  scroll-snap-align: start;
  flex: 0 0 230px;
}

.game-update-card {
  scroll-snap-align: start;
  background: var(--surface);
  border-radius: var(--radius);
  color: var(--text);
  flex-direction: column;
  flex: 0 0 240px;
  gap: 10px;
  padding: 16px;
  display: flex;
}

.game-update-link {
  text-decoration: underline;
}

.game-update-link:hover {
  color: var(--text);
  text-underline-offset: 2px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  -webkit-text-decoration-color: var(--accent);
  -webkit-text-decoration-color: var(--accent);
  text-decoration-color: var(--accent);
}

.game-update-img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: calc(var(--radius) - 2px);
  width: 100%;
  display: block;
}

.game-update-text {
  font-size: var(--text-sm);
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  flex: 1;
  margin: 0;
  line-height: 1.55;
  display: -webkit-box;
  overflow: hidden;
}

.game-update-time {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: auto;
  text-decoration: none;
}

.game-update-time:hover {
  color: var(--text);
  text-decoration: underline;
}

.blog-post-carousel-card {
  min-height: 330px;
}

.blog-post-carousel-title {
  font-size: var(--text-xl);
  -webkit-line-clamp: 4;
  text-wrap: pretty;
  font-weight: 800;
  line-height: 1.2;
}

.blog-post-carousel-title a {
  text-decoration: none;
}

.blog-post-carousel-title a:hover {
  color: var(--text);
  text-decoration: none;
}

.blog-post-carousel-link {
  color: var(--text);
}

.blog-post-read-more-card {
  justify-content: center;
  align-items: center;
  display: flex;
}

.blog-post-read-more-link {
  font-size: var(--text-base);
  color: var(--text-muted);
  align-items: center;
  gap: 4px;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s;
  display: flex;
}

.blog-post-read-more-link:hover {
  color: var(--text);
  -webkit-text-decoration-color: var(--text);
  text-decoration-color: var(--text);
}

.screenshot-thumb-btn {
  cursor: pointer;
  border-radius: var(--radius);
  background: none;
  border: none;
  padding: 0;
  display: block;
}

.screenshot-thumb-btn:hover .game-detail-screenshot {
  opacity: .8;
}

.game-detail-screenshot {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--tertiary);
  width: 100%;
  transition: opacity .15s;
  display: block;
}

.game-video-section {
  margin-top: 24px;
}

.game-video-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  display: grid;
}

.game-video-item {
  border-radius: var(--radius);
  background: var(--tertiary);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.game-video-thumb-btn {
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  height: 100%;
  padding: 0;
  display: block;
  position: relative;
}

.game-video-thumb {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: opacity .15s;
  display: block;
}

.game-video-thumb-btn:hover .game-video-thumb {
  opacity: .8;
}

.game-video-play-btn {
  color: #fff;
  background: #0000004d;
  justify-content: center;
  align-items: center;
  transition: background .15s;
  display: flex;
  position: absolute;
  inset: 0;
}

.game-video-thumb-btn:hover .game-video-play-btn {
  background: #00000080;
}

.game-video-play-btn svg {
  filter: drop-shadow(0 1px 3px #0009);
  width: 36px;
  height: 36px;
}

.game-video-label {
  font-size: var(--text-xs);
  color: #fff;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: linear-gradient(to top, #000000b3 0%, #0000 100%);
  padding: 6px 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.game-video-iframe {
  border: none;
  width: 100%;
  height: 100%;
  display: block;
}

.lightbox-overlay {
  z-index: 1000;
  background: var(--overlay-heavy);
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.lightbox-img {
  object-fit: contain;
  border-radius: var(--radius);
  max-width: 90vw;
  max-height: 85vh;
  display: block;
}

.lightbox-close {
  color: #fff;
  cursor: pointer;
  opacity: .7;
  background: none;
  border: none;
  padding: 4px 8px;
  font-size: 1.5rem;
  line-height: 1;
  position: absolute;
  top: 16px;
  right: 20px;
}

.lightbox-close:hover {
  opacity: 1;
}

.lightbox-nav {
  color: #fff;
  cursor: pointer;
  opacity: .75;
  -webkit-user-select: none;
  user-select: none;
  background: #00000073;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  transition: opacity .15s, background .15s;
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-nav:hover {
  opacity: 1;
  background: #000000a6;
}

.lightbox-prev {
  left: 16px;
}

.lightbox-next {
  right: 16px;
}

.lightbox-counter {
  color: #fff9;
  font-size: var(--text-sm);
  pointer-events: none;
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}

footer {
  background: var(--surface);
  margin-top: auto;
  padding: 24px 0;
}

footer .container {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 24px;
  padding: 0 24px;
  display: flex;
}

.footer-wordmark {
  font-size: var(--text-sm);
  color: var(--text);
  align-items: center;
  gap: 10px;
  font-weight: 800;
  display: flex;
}

.footer-links {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  display: flex;
}

.footer-links a {
  font-size: var(--text-sm);
  color: var(--text-muted);
  border-radius: var(--radius);
  transition: color .15s, background .15s;
}

.footer-links a:hover, .footer-links a.footer-link-active {
  color: var(--text);
  text-decoration: none;
}

.footer-icon {
  background-color: var(--text-muted);
  width: 16px;
  height: 16px;
  transition: background-color .15s;
  display: block;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.footer-icon--lg {
  width: 18px;
  height: 18px;
}

.footer-icon-link:hover .footer-icon {
  background-color: var(--text);
}

.profile-stats {
  gap: 32px;
  display: flex;
}

.profile-tabs {
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
  display: flex;
}

.profile-tab {
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: none;
  border-bottom: 4px solid #0000;
  margin-bottom: -1px;
  padding: 14px 20px;
  font-family: inherit;
  font-weight: 500;
  transition: color .15s, border-color .15s;
}

.profile-tab:hover {
  color: var(--text);
}

.profile-tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
}

.profile-stat-count {
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.1;
}

.profile-stat-label {
  color: #ffffffa6;
  font-size: var(--text-base);
  margin-top: 0;
}

.profile-layout {
  z-index: 2;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  padding-bottom: 24px;
  display: grid;
  position: relative;
}

.profile-sidebar-avatar {
  object-fit: cover;
  border: 3px solid var(--bg);
  background: var(--tertiary);
  border-radius: 50%;
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  margin-top: -67px;
  margin-bottom: 16px;
  display: block;
  box-shadow: 0 4px 20px #00000059;
}

.profile-sidebar-name {
  font-size: var(--text-2xl);
  overflow-wrap: anywhere;
  font-weight: 800;
  line-height: 1.1;
}

.profile-sidebar-sub {
  color: var(--text-muted);
  font-size: var(--text-base);
  overflow-wrap: anywhere;
  margin: 0 0 8px;
}

.profile-pronouns-badge {
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--tertiary);
  border-radius: var(--radius-full);
  vertical-align: middle;
  white-space: nowrap;
  margin-left: 8px;
  padding: 2px 8px;
  font-weight: 500;
  line-height: 1.4;
  display: inline-block;
}

.profile-sidebar-bio {
  font-size: var(--text-base);
  color: var(--text);
  -webkit-line-clamp: 8;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
  margin: 0 0 16px;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
}

.profile-bio-mention, .checkbox-wrap a {
  color: var(--text);
  text-decoration: underline;
}

.profile-bio-mention:hover, .checkbox-wrap a:hover {
  color: var(--text);
  text-underline-offset: 2px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  -webkit-text-decoration-color: var(--accent);
  text-decoration-color: var(--accent);
}

.profile-sidebar-links {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  display: flex;
}

.profile-sidebar-stats {
  flex-wrap: wrap;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  display: grid;
}

.game-detail-sidebar .profile-sidebar-stats {
  margin-top: 24px;
}

.profile-sidebar-stats button {
  background: var(--surface);
  border-radius: var(--radius);
  text-align: left;
  padding: 16px;
  transition: all .2s;
}

.profile-sidebar-stats button:hover {
  background: var(--tertiary);
}

.profile-sidebar-stats .profile-stat-label {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.profile-sidebar-stats .profile-stat-count {
  color: var(--text);
  font-size: var(--text-xl);
}

.profile-sidebar-badges {
  grid-template-columns: repeat(6, 32px);
  gap: 8px;
  display: grid;
}

.profile-sidebar-badge {
  cursor: default;
  position: relative;
}

.profile-sidebar-badge img {
  aspect-ratio: 1;
  border-radius: 8px;
  width: 100%;
  display: block;
}

.profile-sidebar-badge--unearned img {
  opacity: .25;
  filter: grayscale();
}

.profile-badge-popover {
  width: 180px;
  padding: 10px 12px;
}

.profile-badge-popover strong {
  font-size: var(--text-sm);
  margin-bottom: 2px;
  font-weight: 800;
  display: block;
}

.profile-badge-popover span {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.site-sidebar {
  background: var(--surface);
  z-index: 100;
  flex-direction: column;
  width: 260px;
  padding: 24px 16px 16px;
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
}

.site-sidebar a:hover {
  text-decoration: none;
}

.sidebar-nav {
  flex-direction: column;
  flex: 1;
  gap: 4px;
  padding: 0;
  display: flex;
}

.sidebar-nav-link {
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 16px;
  font-weight: 500;
  transition: all .2s;
  display: flex;
}

.sidebar-nav-link:hover {
  color: var(--text);
  background: var(--tertiary);
  text-decoration: none;
}

.sidebar-nav-link-active {
  color: var(--text);
  background: var(--tertiary);
}

.sidebar-nav-link svg {
  color: var(--text-muted);
  transition: color .2s;
}

.sidebar-nav-link:hover svg, .sidebar-nav-link-active svg {
  color: var(--text);
}

.sidebar-profile {
  background: var(--tertiary);
  border-radius: var(--radius);
  position: relative;
}

.sidebar-profile-trigger {
  border-radius: var(--radius);
  width: 100%;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 16px;
  font-family: inherit;
  transition: background .2s;
  display: flex;
}

.sidebar-profile-avatar {
  border-radius: var(--radius-full);
  background: var(--surface);
  width: 36px;
  height: 36px;
  color: var(--text-muted);
  font-weight: 800;
  font-size: var(--text-xs);
  letter-spacing: .5px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.sidebar-profile-info {
  flex: 1;
  min-width: 0;
}

.sidebar-profile-handle {
  font-size: var(--text-sm);
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: -2px 0;
  font-weight: 800;
  display: block;
  overflow: hidden;
}

.sidebar-profile-chevron {
  color: var(--text-muted);
  transition: transform .2s;
}

.sidebar-profile-chevron.open {
  transform: rotate(180deg);
}

.sidebar-profile-dropdown {
  background: var(--surface);
  border: 1px solid var(--tertiary);
  border-radius: var(--radius);
  z-index: 110;
  width: 228px;
  padding: 6px 0;
  animation: .15s ease-out slideUp;
  position: absolute;
  bottom: calc(100% + 2px);
  left: 0;
  box-shadow: 0 4px 16px #00000080;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sidebar-profile-item {
  width: 100%;
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px 16px;
  font-family: inherit;
  text-decoration: none;
  transition: all .15s;
  display: block;
}

.sidebar-profile-item:hover {
  color: var(--text);
  background: var(--tertiary);
  text-decoration: none;
}

.sidebar-profile-item-signout {
  color: var(--danger);
}

.sidebar-profile-item-signout:hover {
  color: var(--danger);
  background: #ff36681a;
}

.sidebar-profile-divider {
  background: var(--border);
  height: 2px;
  margin: 6px 16px;
}

.header-left-group {
  flex: 1;
  align-items: center;
  gap: 16px;
  max-width: 480px;
  display: flex;
}

.header-search-container {
  flex: 1;
  position: relative;
}

.mobile-only-header-right {
  display: none;
}

.mobile-banner-logo-link {
  text-decoration: none;
  display: none;
}

.mobile-banner-logo {
  display: none;
}

.mobile-banner-logo-text {
  font-size: var(--text-xl);
  color: var(--text);
  font-weight: 700;
}

a.mobile-banner-logo-link:active, .mobile-banner-logo-text:active {
  text-decoration: none;
}

.mobile-footer-nav-wrap {
  z-index: 100;
  position: sticky;
  bottom: 0;
}

.mobile-footer-nav {
  height: calc(60px + env(safe-area-inset-bottom));
  background: var(--surface);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  position: relative;
}

.mobile-footer-tab {
  color: var(--text-muted);
  cursor: pointer;
  letter-spacing: .02em;
  background: none;
  border: none;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 3px;
  padding: 6px 0;
  font-size: .625rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s;
  display: flex;
}

.mobile-footer-tab.active, .mobile-footer-tab:hover {
  color: var(--accent);
  text-decoration: none;
}

.mobile-footer-avatar {
  background: var(--tertiary);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  display: flex;
  overflow: hidden;
}

.mobile-more-backdrop {
  z-index: 200;
  background: #0006;
  position: fixed;
  inset: 0;
}

.mobile-more-sheet {
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  z-index: 201;
  padding-bottom: env(safe-area-inset-bottom);
  flex-direction: column;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.mobile-more-header {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 12px;
  display: flex;
}

.mobile-more-user {
  align-items: center;
  gap: 12px;
  display: flex;
}

.mobile-more-avatar {
  background: var(--tertiary);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
  overflow: hidden;
}

.mobile-more-name {
  font-size: var(--text-sm);
  color: var(--text);
  font-weight: 800;
  line-height: 1.2;
}

.mobile-more-handle {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.mobile-more-close {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  padding: 4px;
  display: flex;
}

.mobile-more-links {
  border-bottom: 1px solid var(--border);
  flex-direction: column;
  padding: 8px 0;
  display: flex;
}

.mobile-more-item {
  font-size: var(--text-sm);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  padding: 13px 20px;
  font-weight: 600;
  text-decoration: none;
  transition: background .12s;
}

.mobile-more-item:hover, .mobile-more-item.active {
  background: var(--tertiary);
}

.mobile-more-footer {
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px 20px;
  display: flex;
}

.mobile-more-footer-links {
  gap: 16px;
  display: flex;
}

.mobile-more-footer-link {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-decoration: none;
}

.mobile-more-footer-link:hover {
  color: var(--text);
}

.mobile-more-signout {
  font-size: var(--text-sm);
  color: var(--danger, #e53e3e);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-weight: 600;
}

.sidebar-footer {
  flex-direction: column;
  gap: 10px;
  padding: 0 0 16px;
  display: flex;
}

.sidebar-footer-links {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.sidebar-footer-link {
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--text-sm);
  align-items: center;
  padding: 8px 16px;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s;
  display: flex;
}

.sidebar-footer-link:hover {
  color: var(--text);
  background: var(--tertiary);
  text-decoration: none;
}

.sidebar-footer-socials {
  align-items: center;
  gap: 12px;
  display: flex;
}

.sidebar-footer-socials a {
  height: 16px;
}

.sidebar-footer-social-icon {
  background-color: var(--text-muted);
  cursor: pointer;
  width: 16px;
  height: 16px;
  transition: background-color .15s;
  display: inline-block;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.sidebar-footer-social-icon:hover {
  background-color: var(--text);
}

.home-dashboard-header {
  margin-bottom: 24px;
}

.home-dashboard-subtitle {
  font-size: var(--text-base);
  color: var(--text-muted);
}

.home-section {
  margin-bottom: 24px;
}

.home-dashboard .home-section:last-of-type {
  margin-bottom: 0;
}

.home-section-title {
  font-size: var(--text-xl);
  letter-spacing: -.5px;
  color: var(--text);
  padding-bottom: 12px;
  font-weight: 800;
}

.home-empty-playing, .home-empty-feed {
  background: var(--surface);
  border-radius: var(--radius);
  text-align: center;
  color: var(--text-muted);
  padding: 36px;
}

.home-empty-playing p, .home-empty-feed p {
  font-size: var(--text-sm);
  margin: 0;
}

.home-horizontal-stats {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  display: grid;
}

.home-stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  text-align: left;
  color: var(--text);
  padding: 24px;
  text-decoration: none;
  transition: all .2s cubic-bezier(.16, 1, .3, 1);
}

.home-stat-card:hover {
  background: var(--tertiary);
  text-decoration: none;
}

.home-stat-card .stat-value {
  font-size: var(--text-3xl);
  color: var(--text);
  font-weight: 800;
}

.home-stat-card .stat-label {
  font-size: var(--text-base);
  color: var(--text-muted);
  font-weight: 500;
}

.game-ttb-section {
  flex-wrap: wrap;
  column-gap: 16px;
  margin-top: 24px;
  display: flex;
}

.game-ttb-section .game-list-divider {
  width: 100%;
}

.game-ttb-card {
  cursor: default;
  flex: 1;
  padding: 16px;
  transition: none;
}

.game-ttb-card:hover {
  background: var(--surface);
}

.game-ttb-card .stat-value {
  font-size: var(--text-xl);
  margin-bottom: -5px;
}

.game-ttb-card .stat-label {
  font-size: var(--text-sm);
}

.feed-time-text {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  text-align: right;
  width: auto;
  display: inline-block;
}

.home-dashboard-main .game-grid {
  grid-template-columns: 1fr;
}

.home-dashboard-main .game-card-started {
  grid-column: span 1;
}

.home-dashboard-main .game-card-started-banner {
  height: 220px;
}

.social-grid-user-top {
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer;
  align-items: center;
  gap: 12px;
  padding: 16px;
  transition: background .15s;
  display: flex;
}

.game-card-grid:has(.social-grid-user-top:hover) .game-card-grid-info {
  background: var(--surface) !important;
}

.social-grid-user-top a {
  text-decoration: none;
  color: var(--text) !important;
}

.social-grid-user-top a:hover {
  text-decoration: none;
}

.social-grid-avatar-link {
  flex-shrink: 0;
  line-height: 0;
  display: block;
}

.social-grid-avatar {
  object-fit: cover;
  background-color: var(--tertiary);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: block;
}

.social-grid-avatar-placeholder {
  background: var(--tertiary);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: block;
}

.social-grid-user-text {
  flex-direction: column;
  flex-grow: 1;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.social-grid-user-meta {
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  display: flex;
}

.social-grid-username {
  font-size: var(--text-base);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  color: var(--text) !important;
}

.social-grid-time {
  font-size: var(--text-sm);
  line-height: 1.2;
  color: var(--text-muted) !important;
}

.social-grid-action {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-muted) !important;
}

.blog-posts-grid {
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
  display: grid;
}

.profile-overview {
  flex-direction: column;
  gap: 24px;
  display: flex;
}

.profile-overview-section {
  flex-direction: column;
  display: flex;
}

.profile-overview .home-section-title {
  padding-bottom: 12px;
}

.profile-overview-highlight-row {
  grid-template-columns: 1fr 3fr;
  align-items: stretch;
  gap: 16px;
  display: grid;
}

.profile-overview-highlight-row > * {
  min-width: 0;
}

.profile-overview-stats {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  display: grid;
}

.profile-overview-stat {
  background: var(--surface);
  border-radius: var(--radius);
  text-align: left;
  min-width: 0;
  padding: 16px;
}

.profile-overview-stat-btn {
  cursor: pointer;
  color: inherit;
  transition: background .15s;
}

.profile-overview-stat-btn:hover {
  background: var(--surface-hover, var(--surface));
  filter: brightness(1.08);
}

.profile-overview-stat .profile-stat-count {
  font-size: var(--text-xl);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.profile-overview-stat .profile-stat-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.overview-fav-card {
  align-items: center;
  gap: 12px;
  padding: 12px;
  flex-direction: row !important;
}

.overview-fav-card .game-card-grid-cover-wrap {
  flex-shrink: 0;
  width: 40px;
}

.overview-fav-card .game-card-grid-cover {
  aspect-ratio: 3 / 4;
  width: 40px;
  height: 54px;
}

.overview-fav-card .game-card-grid-info {
  border-radius: 0;
  padding: 0;
}

.fav-game-card {
  background: var(--surface);
  border-radius: var(--radius);
  color: inherit;
  align-items: center;
  gap: 12px;
  padding: 12px;
  text-decoration: none;
  transition: box-shadow .2s;
  display: flex;
}

.fav-game-card:hover {
  color: inherit;
  text-decoration: none;
  box-shadow: 0 8px 30px #0000001f;
}

.fav-game-card-cover {
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  width: 40px;
  height: 54px;
  box-shadow: 0 2px 6px #0000004d;
}

.fav-game-card-info {
  flex: 1;
  min-width: 0;
}

.fav-game-card-title {
  font-size: var(--text-base);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 800;
  line-height: 1.3;
  overflow: hidden;
}

.profile-bio-card {
  background: var(--surface);
  border-radius: var(--radius);
  flex-direction: column;
  gap: 12px;
  min-height: 120px;
  padding: 20px;
  display: flex;
}

.profile-bio-description {
  font-size: var(--text-base);
  color: var(--text);
  -webkit-line-clamp: 6;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
  margin: 0;
  line-height: 1.6;
  display: -webkit-box;
  overflow: hidden;
}

.profile-bio-links {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
  display: flex;
}

.profile-bio-link {
  border-radius: var(--radius-full);
  background: var(--tertiary);
  color: #fff;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  text-decoration: none;
  transition: background .15s;
  display: flex;
}

.profile-bio-link:hover {
  background: var(--border);
}

.profile-bio-link-icon {
  object-fit: contain;
  filter: brightness(0) invert();
  width: 16px;
  height: 16px;
}

.blog-post-card {
  background: var(--surface);
  border-radius: var(--radius);
  flex-direction: column;
  justify-content: space-between;
  min-height: 235px;
  padding: 16px;
  transition: box-shadow .2s;
  display: flex;
}

.blog-post-card:hover {
  box-shadow: 0 8px 30px #0000001f;
}

.blog-post-card-header {
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.blog-post-card-body {
  flex: 1;
}

.blog-post-card-footer {
  margin-top: 16px;
}

.blog-post-thumbnail {
  object-fit: cover;
  border-radius: var(--radius);
  flex-shrink: 0;
  width: 72px;
  height: 72px;
}

.blog-post-title-link {
  color: var(--text);
  font-size: var(--text-xl);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 2px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition: color .15s;
  display: -webkit-box;
  overflow: hidden;
}

.blog-post-title-link:hover {
  color: var(--text);
  text-decoration: none;
}

.blog-post-date {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 0;
}

.sidebar-search-trigger {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm);
  text-align: left;
  -webkit-user-select: none;
  user-select: none;
  background: none;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  transition: all .15s;
  display: flex;
}

.sidebar-search-trigger:hover {
  color: var(--text);
  border: 2px solid var(--text-muted);
}

.sidebar-search-trigger:hover .search-modal-icon {
  color: inherit;
}

.search-modal-overlay {
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  background: #000000b3;
  justify-content: center;
  align-items: flex-start;
  padding: 15vh 16px 16px;
  display: flex;
  position: fixed;
  inset: 0;
}

.search-modal-card {
  background: var(--surface);
  border-radius: var(--radius);
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  display: flex;
  overflow: hidden;
  box-shadow: 0 20px 50px #00000080;
}

.search-modal-header {
  align-items: center;
  gap: 16px;
  padding: 16px;
  display: flex;
}

.search-modal-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.search-modal-input {
  flex: 1;
  color: var(--text) !important;
  box-shadow: none !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
  font-size: 1.125rem !important;
}

.search-modal-input::placeholder {
  color: var(--text-muted);
}

.search-modal-esc:hover {
  background: var(--accent);
  color: var(--accent-text);
}

.search-modal-divider {
  background: var(--border);
  width: 100%;
  height: 1px;
}

.search-modal-body {
  max-height: 400px;
  padding: 0;
  overflow-y: auto;
}

.search-modal-info {
  text-align: center;
  color: var(--text-muted);
  padding: 24px;
  font-size: .9375rem;
}

.search-modal-results {
  background: var(--tertiary);
  flex-direction: column;
  display: flex;
}

.search-modal-item {
  width: 100%;
  color: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  font-family: inherit;
  transition: background .15s;
  display: flex;
}

.search-modal-item:hover, .search-modal-item:focus-visible {
  background: var(--border);
}

.search-modal-item:focus-visible {
  outline: none;
}

.search-modal-cover {
  object-fit: cover;
  background: var(--border);
  border-radius: 4px;
  flex-shrink: 0;
  width: 36px;
  height: 48px;
}

.search-modal-item-info {
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
  display: flex;
}

.search-modal-item-title {
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .9375rem;
  font-weight: 800;
  overflow: hidden;
}

.search-modal-item-meta {
  color: var(--text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .8125rem;
  overflow: hidden;
}

.modal-fullscreen-overlay {
  background: var(--bg);
  z-index: 200;
  padding: 0;
  display: block;
  position: fixed;
  inset: 0;
  overflow-y: auto;
}

.modal-fullscreen {
  background: var(--bg);
  width: 100%;
  max-width: 640px;
  min-height: 100dvh;
  padding: 48px 24px calc(48px + env(safe-area-inset-bottom));
  box-shadow: none;
  border-radius: 0;
  flex-direction: column;
  margin: 0 auto;
  display: flex;
}

.modal-fullscreen h2 {
  font-size: var(--text-2xl);
  letter-spacing: -.02em;
  margin: 0;
  font-weight: 800;
}

.list-modal-fullscreen {
  max-width: 900px;
}

.list-modal-fullscreen .list-modal-items {
  max-height: calc(100vh - 380px);
}

.list-modal-fullscreen .list-modal-add-results {
  max-height: calc(100vh - 380px);
  overflow-y: auto;
}

.status-pill-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 8px;
  display: grid;
}

.status-pill-grid-subs {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px dashed var(--border);
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 4px;
  margin-bottom: 16px;
  padding: 12px;
  display: grid;
}

.status-pill {
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  -webkit-user-select: none;
  user-select: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 68px;
  padding: 12px 16px;
  transition: all .2s;
  display: flex;
}

.status-pill:hover {
  background: var(--border);
  color: var(--text);
}

.status-pill:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.status-pill:disabled:hover {
  background: var(--surface);
  color: var(--text-muted);
}

.status-pill-unreleased-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 8px 0 0;
  font-style: italic;
}

.status-pill.active {
  background: var(--border);
  color: var(--text);
}

.status-pill-title {
  font-size: var(--text-sm);
  color: var(--text);
  font-weight: 800;
  line-height: 1.2;
}

.status-pill-subtitle {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 3px;
  font-weight: 500;
  line-height: 1.3;
}

.status-pill.active .status-pill-title {
  color: var(--text);
}

.status-pill.active .status-pill-subtitle {
  color: #ffffffb3;
}

.sub-status-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  grid-column: 1 / -1;
  margin-bottom: 2px;
  font-weight: 800;
}

.played-details-group {
  flex-direction: column;
  gap: 8px;
  margin-top: -16px;
  display: flex;
}

.ownership-grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 280px;
  margin-top: 8px;
  margin-bottom: 12px;
  display: grid;
}

.ownership-pill {
  border-radius: var(--radius);
  background: var(--surface);
  height: 38px;
  color: var(--text-muted);
  font-size: var(--text-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  transition: all .2s;
  display: flex;
}

.ownership-pill:hover {
  background: var(--border);
  color: var(--text);
}

.ownership-pill.active {
  background: var(--border);
  color: var(--text);
  border-color: var(--border);
}

.sprite-avatar-still {
  image-rendering: pixelated;
  background-image: var(--sprite-url), linear-gradient(to bottom, #87ceeb 0%, #e0f0ff 60%, #90b060 60%, #608040 100%);
  background-position: -6px 3px, 0 0;
  background-repeat: no-repeat, no-repeat;
  background-size: 420% 560%, 100% 100%;
}

.profile-game-grid .game-list-divider {
  margin-bottom: -8px;
}

@media (min-width: 576px) {
  .home-dashboard-main .game-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .has-sidebar main {
    padding-top: 0;
    padding-left: 260px;
  }

  .has-sidebar .modal-fullscreen-overlay {
    padding-left: 260px;
  }

  .mobile-footer-nav-wrap, .has-sidebar footer, body.has-sidebar footer {
    display: none;
  }

  .home-horizontal-stats {
    grid-template-columns: repeat(4, 1fr);
  }

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

@media (min-width: 1081px) {
  .blog-posts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .browse-grid {
    gap: 16px;
  }
}

@media (max-width: 1080px) {
  .game-grid, .my-games-main .game-grid, .browse-grid, .home-dashboard-main .game-grid, .community-page-header {
    grid-template-columns: repeat(3, 1fr);
  }

  .community-page-header .filter-tabs {
    grid-column: 1 / 3;
  }

  .community-page-header .community-search {
    grid-column: 3;
  }

  .profile-game-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .profile-game-grid .game-card-grid {
    grid-column: span 2;
  }

  .profile-game-grid .game-card-started {
    grid-column: span 3;
  }

  .upcoming-hide-at-1080 {
    display: none;
  }

  .upcoming-hide-below-768 {
    display: block;
  }

  .lists-community-grid, .game-detail-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .form-row-triple {
    grid-template-columns: 1fr 1fr;
  }

  .form-row-triple > .form-field:first-child {
    grid-column: 1 / -1;
  }

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

  .form-row-dates > .form-span-2 {
    grid-column: auto;
  }

  .star-rating-input {
    gap: 6px;
    width: calc(50% - 8px);
  }

  .star-rating-cell {
    aspect-ratio: 1;
    flex: 1;
    width: auto;
    height: auto;
  }

  .community-title-row {
    flex-direction: column;
    align-items: stretch;
  }

  .community-title-search {
    width: 100%;
  }

  main .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .page-top {
    padding-top: 24px;
  }

  .page-header {
    margin: 24px 0;
  }

  .browse-section-title {
    letter-spacing: -.75px;
    margin-bottom: 16px;
    font-size: 2rem;
  }

  .lists-community-grid {
    grid-template-columns: 1fr;
  }

  .browse-grid, .status-pill-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .game-grid, .game-detail-related-grid, .public-list-items, .my-games-main .game-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .upcoming-hide-below-768 {
    display: none;
  }

  .game-card-started {
    grid-column: 1 / -1;
  }

  header {
    padding: 0;
  }

  .header-site-name, .header-nav-left, .header-desktop-nav-right, .profile-stats {
    display: none;
  }

  .header-middle {
    max-width: none;
    margin: 0 8px;
  }

  .profile-overview {
    gap: 16px;
  }

  .input.header-search-input {
    height: 32px;
    font-size: var(--text-xs);
    padding: 0 12px 0 32px;
  }

  .header-search-icon {
    width: 14px;
    height: 14px;
    left: 11px;
  }

  .mobile-menu {
    display: block;
  }

  .site-sidebar, .community-page-header .community-search, .social-grid-avatar {
    display: none;
  }

  .social-grid-user-top {
    gap: 0;
  }

  .back-to-top {
    bottom: 88px;
    right: 24px;
  }

  .mobile-only-header-left, .mobile-only-header-right {
    display: block;
  }

  .mobile-banner-logo-link {
    top: calc(16px + env(safe-area-inset-top));
    z-index: 100;
    align-items: center;
    gap: 8px;
    display: flex;
    position: fixed;
    left: 16px;
  }

  .mobile-banner-logo-link .mobile-banner-logo {
    height: 26px;
    display: block;
  }

  .mobile-footer-nav-wrap {
    display: block;
  }

  .has-header main {
    padding-top: calc(60px + env(safe-area-inset-top));
    padding-bottom: 24px;
  }

  .now-playing-title {
    margin-bottom: 24px;
    line-height: 1.2;
  }

  .profile-content-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .profile-content .game-grid {
    margin-top: 0;
  }

  .profile-sidebar {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .profile-status-pills {
    display: none;
  }

  .profile-status-dropdown {
    display: block;
  }

  .feed-item {
    align-items: flex-start;
  }

  .feed-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .feed-item .feed-game-title {
    white-space: normal;
    max-width: none;
  }

  .feed-item-time {
    flex-shrink: 0;
  }

  .profile-overview-highlight-row {
    grid-template-columns: 1fr;
  }

  .profile-overview-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-post-title-link {
    -webkit-line-clamp: none;
  }

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

  .profile-game-grid .game-card-grid {
    grid-column: span 1;
  }

  .profile-game-grid .game-card-started {
    grid-column: 1 / -1;
  }

  .game-detail-banner-block {
    display: none;
  }

  .profile-banner-img {
    height: 200px;
    margin-top: calc(-60px - env(safe-area-inset-top));
  }

  .game-detail-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 32px;
    padding-bottom: 24px;
  }

  .game-detail-content {
    order: -1;
    padding-top: 0;
  }

  .game-detail-sidebar {
    padding-top: 0;
  }

  .game-detail-add-mobile {
    margin-bottom: 20px;
    display: block;
  }

  .game-detail-add-desktop {
    display: none;
  }

  .game-detail-mobile-top {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
    display: flex;
  }

  .game-detail-cover-mobile {
    flex-shrink: 0;
    width: 130px;
    height: auto;
    margin-top: 0;
    display: block;
  }

  .game-detail-mobile-title {
    font-size: var(--text-2xl);
    color: var(--text);
    margin: 0 0 4px;
    font-weight: 800;
    line-height: 1.1;
  }

  .game-detail-mobile-sub {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
  }

  .game-detail-meta-mobile {
    margin-top: 24px;
    display: block;
  }

  .game-detail-meta-desktop, .game-detail-sidebar .game-detail-cover {
    display: none;
  }

  .game-detail-stats-mobile {
    margin-top: 24px;
    display: block;
  }

  .game-detail-stats-desktop {
    display: none;
  }

  .game-detail-screenshots {
    grid-template-columns: 1fr;
  }

  .filter-tabs {
    scrollbar-width: none;
  }

  .filter-tabs::-webkit-scrollbar {
    display: none;
  }

  .game-list-divider {
    margin-bottom: 0;
  }

  .list-modal-item-title {
    font-size: var(--text-sm);
  }

  .list-edit-body {
    flex-direction: column-reverse;
    gap: 24px;
  }

  .list-edit-right {
    box-sizing: border-box;
    width: 100%;
  }

  .social-body {
    flex-direction: column;
    gap: 24px;
  }

  .social-right {
    box-sizing: border-box;
    width: 100%;
    position: static;
  }

  .list-collection-section {
    display: none;
  }

  footer .container {
    flex-direction: column;
    gap: 16px;
  }

  .footer-links {
    justify-content: flex-start;
  }

  .profile-tabs {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overflow-x: auto;
  }

  .profile-tabs::-webkit-scrollbar {
    display: none;
  }

  .profile-tab {
    flex-shrink: 0;
    padding: 12px 14px;
  }

  .profile-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .profile-sidebar {
    padding-bottom: 16px;
  }

  .profile-sidebar-avatar {
    width: 90px;
    height: 90px;
    margin-top: -36px;
  }

  .profile-content {
    padding-top: 0;
  }

  .profile-banner-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 16px;
  }

  .profile-banner-identity {
    align-items: center;
    gap: 12px;
  }

  .profile-banner-avatar {
    width: 60px;
    height: 60px;
  }
}

.epilogue-list {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.epilogue-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  gap: 14px;
  padding: 16px;
  display: flex;
}

.epilogue-card-cover {
  object-fit: cover;
  border-radius: 6px;
  width: 56px;
  height: 75px;
}

.epilogue-card-body {
  min-width: 0;
}

.epilogue-card-title {
  font-weight: 800;
  font-size: var(--text-base);
  color: var(--text);
  text-decoration: none;
  display: inline-block;
}

.epilogue-card-title:hover {
  color: var(--accent);
}

.epilogue-card-tags {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  display: flex;
}

.epilogue-tag {
  border: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  border-radius: 20px;
  padding: 3px 9px;
}

.epilogue-card-text {
  font-size: var(--text-sm);
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin: 8px 0 0;
  line-height: 1.55;
}

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

/*# sourceMappingURL=src_app_globals_162hn9o.css.map*/