:root[data-theme="dark"] {
  color-scheme: dark;
  /* Figma variables, dark mode (180:29388). */
  --canvas: #0b0b0b;
  --canvas-soft: #0b0b0b;
  --surface: #101010;
  --surface-2: #101010;
  --surface-3: #01060b;
  --stroke: rgba(180, 180, 180, .28);
  --stroke-strong: #738078;
  --text: #f4f7f5;
  --muted: #a8b8bf;
  --muted-2: #718077;
  --accent-text: #c2f970;
  --accent-ink: #031508;
  --violet: #c2f970;
  --violet-soft: #01060b;
}
body { background: var(--canvas); color: var(--text); }
.eyebrow, .reason, .btn.text, .news-meta, .source-link, .free, .verified-price { color: var(--accent-text); }
.btn, .btn.ghost { border-color: var(--stroke-strong); background: var(--surface-3); color: var(--text); }
.btn.primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.header-inner { width: 100%; max-width: none; padding-inline: 48px; }
.header-actions { flex-shrink: 0; }
.account-control { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--muted); font-size: 12px; }
.account-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.account-avatar-fallback { display: grid; place-items: center; border: 1px solid var(--stroke); background: var(--surface-3); color: var(--accent-text); font-weight: 700; }
.search-icon, .search-icon img, .mobile-actions .icon-button img { display: block; width: 20px; height: 20px; object-fit: contain; }
.modal-close img { display: block; width: 10px; height: 10px; object-fit: contain; }

.landing-hero { height: 867px; }
.landing-hero-content { bottom: 105px; }
.landing-hero-progress { position: absolute; bottom: -54px; left: 0; display: flex; align-items: center; gap: 5px; }
.landing-hero-progress span, .landing-hero-progress i { width: 10px; height: 8px; border-radius: 25px; background: #01060b; }
.landing-hero-progress span { width: 86px; background: var(--accent); }
.creator-invite-inner > .btn { width: auto; align-self: center; padding-inline: 30px; }

.registry-page.latest-registry { width: 100%; max-width: none; padding: 0; overflow: hidden; }
/* Explore: Figma "Tracker content" (133:10415 dark, 223:47066 light). */
/* Figma color/mutedOnImage: dark #a8b8bf, light #c8d3cd. Chips use --color-surface and --color-border. */
:root[data-theme="dark"] { --chip-bg: rgba(200, 211, 205, .05); --chip-text: #a8b8bf; --chip-border: rgba(180, 180, 180, .28); --chip-solid: #101010; --panel-border: rgba(168, 184, 191, .25); }
.recommendation-section { padding: 0 48px; }
.recommendation-section > h1, .registry-heading { margin: 0; padding: 50px 0 47px; color: var(--text); font-size: 32px; font-weight: 700; line-height: 46.4px; letter-spacing: -.64px; }
.recommendation-stage { position: relative; transform-style: preserve-3d; }
.recommendation-stage.is-transitioning { overflow: hidden; }
.recommendation-stage.is-transitioning .release-recommendation { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transform-style: preserve-3d; backface-visibility: hidden; will-change: transform, opacity, filter; }
/* The hero card is dark in both themes, so its text stays light. */
.release-recommendation { display: grid; grid-template-columns: minmax(0, 1160fr) minmax(0, 590fr); aspect-ratio: 1834 / 655; min-height: 0; overflow: hidden; padding: 16px; border: 1px solid var(--stroke); border-radius: 32px; background: linear-gradient(173.87deg, #131b24 11.557%, #101902 34.569%, #03070b 77.333%); box-shadow: 0 4px 82.7px rgba(194, 249, 112, .15); color: #f4f7f5; }
.recommendation-art { position: relative; min-width: 0; min-height: 0; overflow: hidden; isolation: isolate; contain: paint; border: 1px solid var(--stroke); border-radius: 16px; clip-path: inset(0 round 16px); }
.recommendation-art img { display: block; width: 100%; max-width: 100%; height: 100%; max-height: 100%; object-fit: cover; }
.recommendation-art > span { position: absolute; z-index: 1; top: 18px; left: 18px; color: #a8b8bf; font-size: 10px; font-weight: 700; line-height: 14.5px; }
.recommendation-art > b { position: absolute; z-index: 1; top: 60.8%; left: 68.5%; color: #f4f7f5; font-size: 24px; line-height: 24px; letter-spacing: -1.44px; }
/* Figma spacing at 1920px wide, scaled down with the viewport. */
.recommendation-copy { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; gap: 16px; padding: clamp(24px, 5.26vw, 101px) clamp(16px, 1.58vw, 30.394px) clamp(16px, 1.58vw, 30.394px); }
.recommendation-top { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 1.67vw, 32px); }
.recommendation-copy .eyebrow { margin: 0; color: #c2f970; font-size: 10.727px; line-height: 15.554px; }
.recommendation-copy h2 { margin: 0; color: #f4f7f5; font-size: clamp(32px, 3.23vw, 61.931px); line-height: 1.3; letter-spacing: -.02em; }
.recommendation-description { max-width: 519.46px; margin: 0; color: #a8b8bf; font-size: clamp(13px, .87vw, 16.68px); line-height: 1.45; }
.recommendation-copy .game-stats { font-size: clamp(14px, 1.06vw, 20.321px); font-weight: 400; }
.recommendation-copy .chips { display: flex; gap: 7.151px; margin: 0; }
.recommendation-copy .chips span { min-height: 25px; display: flex; align-items: center; padding: 5.364px 8.939px; border-radius: 6.258px; background: var(--surface-3); color: var(--muted); font-size: 9.833px; font-weight: 700; line-height: 14.258px; }
.recommendation-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 190px)); gap: 8.939px; }
.recommendation-actions .btn { min-height: 39.33px; padding: 9.833px 17.879px; border-width: .894px; border-radius: 7.151px; font-size: 10.727px; line-height: 15.554px; }
.recommendation-actions .btn.primary { border-color: #16251b; background: var(--accent); color: var(--surface-3); }
.recommendation-actions .btn.ghost { border-color: #738078; background: var(--surface-3); color: var(--text); }
.recommendation-progress { display: flex; align-items: center; gap: 10.727px; }
.recommendation-progress > span { flex: 1; height: 15px; padding: 2.4px 2.6px; overflow: hidden; border: .5px solid rgba(174, 174, 174, .22); border-radius: 8.939px; background: rgba(207, 217, 209, .09); }
.recommendation-progress i { display: block; width: 100%; height: 10px; border-radius: 64px; background: radial-gradient(circle at 83% 33%, #608c1f, #739342); box-shadow: inset 0 4px 4px rgba(0, 0, 0, .25); transform: scaleX(0); transform-origin: left center; will-change: transform; }
.recommendation-progress small { color: #718077; font-size: 9.833px; line-height: 14.258px; white-space: nowrap; }
.recommendation-progress button { padding: 0; border: 0; background: none; color: #c2f970; font-size: 10.727px; font-weight: 700; line-height: 15.554px; white-space: nowrap; cursor: pointer; }

/* Plays and upvotes, shared by the hero and the release cards. */
.game-stats { display: flex; align-items: center; gap: 9px; margin: 0; color: #f4f7f5; font-size: 13.712px; font-weight: 700; line-height: 1.45; white-space: nowrap; }
.game-stats > span { display: flex; align-items: center; gap: 4px; }
.game-stats img { width: 1.25em; height: 1.25em; }
.game-stats .game-stats-dot { width: 3.2px; height: 3.2px; }

.registry-body { padding: 0 48px 24px; }
.browse-controls { display: flex; align-items: center; gap: 61px; min-height: 120px; padding-block: 25px; }
.browse-fixed { display: flex; flex: 0 0 auto; gap: 17.773px; height: 54.687px; }
.browse-chip { display: flex; align-items: center; justify-content: center; gap: 11.621px; height: 100%; border: .684px solid var(--chip-border); border-radius: 5.469px; color: var(--text); font-size: 16.406px; line-height: 1.45; }
.browse-chip img { width: 28.71px; height: 28.71px; }
.browse-more { width: 57.421px; padding: 0 8.203px; background: transparent; cursor: pointer; }
.browse-more img { width: 23.925px; height: 4.785px; }
.browse-all { width: 98.436px; padding: 0 14.355px 0 12.988px; background: var(--chip-solid); }
.browse-all.active { border-color: var(--accent-text); }
.browse-scroll { display: flex; flex: 1; min-width: 0; align-items: center; gap: 26px; }
.browse-arrow { flex: 0 0 auto; width: 30.711px; height: 30.711px; padding: 0; border: 0; background: none; cursor: pointer; }
.browse-arrow img { width: 100%; height: 100%; transform: rotate(180deg) scaleY(-1); }
.browse-arrow.next img { transform: none; }
.category-current { display: flex; flex: 0 0 193.726px; align-items: center; gap: 10.064px; height: 67.091px; padding: 10.064px; border: .839px solid var(--accent-text); border-radius: 13.418px; background: rgba(194, 249, 112, .25); color: var(--text); font-size: 20.127px; font-weight: 700; line-height: 1.45; }
.category-current img { width: 46.964px; height: 46.964px; border-radius: 10.064px; object-fit: cover; }
/* The row shows the site's slim scrollbar, inside the component, only while scrolling. */
.category-row { display: flex; flex: 1; min-width: 0; gap: 16px; padding-bottom: 8px; overflow-x: auto; scroll-snap-type: x proximity; }
.category-tile { display: flex; flex: 0 0 140px; align-items: center; gap: 12px; height: 70px; padding: 8px; overflow: hidden; border: 0; border-radius: 16px; background: var(--chip-bg); color: var(--chip-text); font-size: 12px; line-height: 1.45; scroll-snap-align: start; }
.category-art { position: relative; flex: 0 0 auto; width: 58px; height: 54px; overflow: hidden; border: 1px solid rgba(207, 217, 209, .25); border-radius: 12px; }
.category-art img { width: 100%; height: 100%; object-fit: cover; }
/* Figma: artwork fades to #131b24 at the bottom in both themes. */
.category-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(19, 27, 36, 0) 35%, #131b24 92%); }
.category-tile.active { color: var(--text); font-weight: 700; }
.registry-toolbar { display: flex; justify-content: space-between; align-items: center; min-height: 44px; margin: 0; padding: 0; border: 0; font-size: 11px; }
.registry-toolbar > span { color: var(--muted); }
.art-release-grid { display: grid; grid-template-columns: 459fr 459fr 459fr 445fr; gap: 4px; }
/* Release cards are dark artwork in both themes, so their text stays light. */
.art-release-card { position: relative; min-width: 0; aspect-ratio: 459 / 318; overflow: hidden; border: 1px solid var(--stroke); border-radius: 12px; background: var(--surface); }
.art-release-visual { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.art-release-visual > img { position: absolute; width: 100%; height: 100%; object-fit: cover; transition: transform 220ms cubic-bezier(.23,1,.32,1); }
.art-release-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(8, 14, 21, 0) 52%, rgba(9, 13, 18, .96) 84%); }
.art-release-copy { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 26px; padding: 16px; color: #f4f7f5; transition: transform 210ms cubic-bezier(.23,1,.32,1); }
.art-release-copy > div { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.art-release-copy h3 { margin: 0; color: #f4f7f5; font-size: 24px; font-weight: 700; line-height: 20px; }
.art-release-copy p { margin: 0; overflow: hidden; color: #a8b8bf; font-size: 12px; font-weight: 700; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.art-release-copy .game-stats img { position: static; width: 17.14px; height: 17.14px; }
.art-release-copy .game-stats .game-stats-dot { width: 3.2px; height: 3.2px; }
.art-release-actions { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 70px; padding: 12px 14px; border-top: 1px solid var(--stroke); background: #131b24; opacity: 0; transform: translateY(100%); transition: transform 210ms cubic-bezier(.23,1,.32,1), opacity 140ms ease-out; }
.art-release-actions .btn { min-height: 42px; padding: 10px 16px; white-space: nowrap; }
/* The row must fit the narrowest card: plays may shorten, buttons never overflow. */
.art-release-action-plays { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.art-release-actions .release-votes { gap: 2px; }
.art-release-actions .release-votes button { width: 32px; height: 32px; }
.art-release-actions .release-votes img { width: 22px; height: 22px; }
.art-release-action-plays { display: flex; align-items: center; gap: 6px; color: #f4f7f5; font-size: 13px; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: transform 180ms cubic-bezier(.23,1,.32,1), opacity 140ms ease-out; }
.art-release-action-plays img { width: 18px; height: 18px; }
.release-votes { display: flex; align-items: center; gap: 8px; }
.release-votes button { display: grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 0; background: transparent; opacity: 0; transform: translateY(6px); cursor: pointer; transition: transform 180ms cubic-bezier(.23,1,.32,1), opacity 140ms ease-out, background-color 140ms ease-out; }
.release-votes img { width: 24px; height: 24px; }
/* icon-vote-up.svg is exported from Figma as the thumbs-down glyph; flip it upright. */
.release-votes img[src$="icon-vote-up.svg"] { transform: scaleY(-1); }
.load-more-games { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 32px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.load-more-games .btn { min-width: 190px; min-height: 44px; border-color: #738078; }

@media (hover: hover) and (pointer: fine) {
  .art-release-card:hover .art-release-visual > img { transform: scale(1.035) translateY(-2px); }
  .art-release-card:hover .art-release-copy { transform: translateY(-66px); transition-delay: 35ms; }
  .art-release-card:hover .art-release-copy .game-stats { opacity: 0; }
  .art-release-card:hover .art-release-actions { opacity: 1; transform: translateY(0); }
  .art-release-card:hover .art-release-action-plays { opacity: 1; transform: translateY(0); transition-delay: 70ms; }
  .art-release-card:hover .release-votes button { opacity: 1; transform: translateY(0); }
  .art-release-card:hover .release-votes button:first-child { transition-delay: 100ms; }
  .art-release-card:hover .release-votes button:last-child { transition-delay: 130ms; }
}
.art-release-card:focus-within .art-release-copy { transform: translateY(-66px); transition-duration: 0s; }
.art-release-card:focus-within .art-release-copy .game-stats { opacity: 0; }
.art-release-card:focus-within .art-release-actions, .art-release-card:focus-within .art-release-action-plays, .art-release-card:focus-within .release-votes button { opacity: 1; transform: translateY(0); transition-duration: 0s; }

/* Gamer update from the week: Figma "Section" (222:42460 dark, 223:47210 light). */
.gamer-update { padding-top: 24px; }
.gamer-update .registry-heading { padding: 10px 0 27px; }
.gamer-update-grid { display: grid; grid-template-columns: 1048fr 728fr; gap: 58px; align-items: stretch; }
.gamer-update-lead { display: grid; grid-template-columns: 635fr 328fr; gap: 45px; align-items: center; min-height: 432px; padding: 20px; border: 1px solid var(--panel-border); border-radius: 16px; color: var(--text); }
.gamer-update-lead img { width: 100%; height: 100%; min-height: 0; border-right: 1.59px solid rgba(180, 180, 180, .28); border-radius: 7.95px; object-fit: cover; }
.gamer-update-lead > div { display: flex; flex-direction: column; gap: 19.752px; }
.gamer-update-lead h3 { margin: 0; font-size: clamp(22px, 2vw, 31.109px); line-height: 1.3; letter-spacing: -.02em; text-wrap: balance; }
.gamer-update-lead p { margin: 0; color: var(--muted); font-size: 11.287px; line-height: 16.366px; }
.gamer-update-lead small, .gamer-update-list small { color: var(--muted); font-size: 11.287px; line-height: 1.4; }
.gamer-update-side { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 16px; }
.gamer-update-list { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.gamer-update-list a { display: flex; align-items: center; gap: 8px; padding: 8px; color: var(--text); }
.gamer-update-list img { width: 156px; height: 101px; flex: 0 0 auto; border-right: 1px solid rgba(180, 180, 180, .28); border-radius: 5px; object-fit: cover; }
.gamer-update-list a > div { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.gamer-update-list h3 { margin: 0; font-size: 12.468px; line-height: 16.208px; letter-spacing: -.25px; }
.gamer-update-list small { font-size: 10px; }
.gamer-update-side .btn { min-height: 44px; padding: 11px 20px; border-color: #738078; }
.gamer-update-lead:hover h3, .gamer-update-list a:hover h3 { color: var(--accent-text); }

/* Game detail: Figma "Go North / Desktop / Game detail" (180:29388 dark, 223:46765 light).
   Colours come from the Figma variables through the theme tokens:
   --color-bg = --canvas, --color-surface = --surface, --color-raised = --surface-3,
   --color-border = --stroke, --color-text = --text, --color-muted = --muted. */
.latest-detail { width: 100%; max-width: none; padding: 96px 48px 56px; }
.detail-context { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.detail-context a { color: var(--muted); }
.detail-context span { color: var(--text); }
.detail-context small { margin-left: auto; color: var(--muted); font-size: 12px; }
.latest-detail .verified-title { display: flex; flex-direction: column; gap: 10px; margin: 24px 0 28px; }
.latest-detail .verified-title .eyebrow { margin: 0; color: var(--accent-text); font-size: 12px; font-weight: 700; line-height: 1.45; }
.latest-detail .verified-title h1 { margin: 0; color: var(--text); font-size: 48px; font-weight: 600; line-height: 1.03; letter-spacing: -.96px; }
.latest-detail .verified-title > p:last-child { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.detail-gallery-layout { display: grid; grid-template-columns: minmax(0, 1fr) 436px; gap: 32px; align-items: start; }
.detail-primary-column { display: flex; min-width: 0; flex-direction: column; gap: 47px; }
.detail-gallery { display: flex; flex-direction: column; gap: 28px; min-width: 0; }

/* Artwork placeholders: label top-left, "16:9" and a rule along the bottom. */
.detail-main-art, .detail-thumbnails button { position: relative; overflow: hidden; margin: 0; border: 1px solid var(--stroke); border-radius: 12px; background: var(--canvas); }
.detail-main-art { aspect-ratio: 1356 / 765; }
.detail-main-art > img, .detail-thumbnails img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.artwork-pending { position: absolute; z-index: 1; top: 24px; left: 24px; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.45; }
.artwork-format { position: absolute; z-index: 1; right: 24px; bottom: 24px; left: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.artwork-format b { color: #f4f7f5; font-size: 24px; font-weight: 700; line-height: 1.45; }
.artwork-format i { width: 100%; height: 1px; background: var(--stroke); }
.detail-thumbnails { display: flex; gap: 39px; overflow-x: auto; overflow-y: clip; padding-bottom: 8px; }
.detail-thumbnails button { flex: 0 0 202.667px; height: 133px; padding: 0; cursor: pointer; }
.detail-thumbnails button[aria-pressed="true"] { border-color: var(--accent-text); }

/* Comments: Figma "Source record" (180:29466 / 223:46811). */
.comments-preview { display: flex; flex-direction: column; gap: 24px; padding: 24px; border: 1px solid var(--stroke); border-radius: 12px; background: var(--surface); }
.comments-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.comments-heading h2 { margin: 0; color: var(--text); font-size: 20px; font-weight: 700; line-height: 1.45; }
.comments-heading span { display: flex; align-items: center; gap: 4px; color: var(--text); font-size: 16px; line-height: 1.45; }
.comments-heading img { width: 20px; height: 20px; transform: scaleY(-1); }
.comment-list { display: flex; flex-direction: column; gap: 25px; }
.comment-list .preview-comment + .preview-comment, #more-comments .preview-comment { border-top: 1px dashed var(--stroke); padding-top: 18px; }
#more-comments:not([hidden]) { display: flex; flex-direction: column; gap: 25px; }
.preview-comment { display: flex; gap: 12px; padding: 0; border: 0; }
.comment-avatar { display: grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--text); font-size: 12px; font-weight: 700; }
.preview-comment > div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; color: var(--muted); }
.preview-comment strong { color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.45; }
.preview-comment p { margin: 0 0 10px; color: var(--muted); font-size: 16px; line-height: 1.68; }
.preview-comment small { display: flex; gap: 12px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.preview-comment small b { font-weight: 700; }
.comments-more { align-self: center; padding: 0; border: 0; background: none; color: var(--muted); font-size: 16px; line-height: 1.45; cursor: pointer; }
.comments-status { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.68; }
.comment-composer { display: flex; flex-direction: column; gap: 24px; margin: 0; padding: 24px; border-radius: 12px; background: var(--canvas); }
.comment-composer h3 { margin: 0; color: var(--text); font-size: 16px; font-weight: 700; line-height: 1.45; }
.composer-box { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--stroke); border-radius: 15px; }
.composer-box > strong { margin-bottom: -10px; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.45; }
.comment-composer textarea { width: 100%; min-height: 122.5px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--muted); font: 400 16px/1.68 Geist, Arial, sans-serif; resize: vertical; }
.comment-composer textarea:focus { outline: none; }
.composer-box:focus-within { border-color: var(--accent-text); }
/* Figma uses a fixed #2b3a46 dashed rule here in both themes. */
.composer-actions { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 79px; padding: 20px 12px; border-top: 1px dashed #2b3a46; }
.composer-votes { display: flex; flex: 1; gap: 3.377px; }
.composer-votes button { display: grid; width: 27.015px; height: 27.015px; padding: 0; border: 0; background: none; cursor: pointer; }
.composer-votes button:first-child img { transform: scaleY(-1); }
.composer-votes button[aria-pressed="false"] { opacity: .7; }
.composer-votes img { width: 100%; height: 100%; }
.composer-send { width: 54px; height: 58px; padding: 0; border: 0; background: none; cursor: pointer; }
.composer-send img { display: block; width: 54px; height: 58px; }
.composer-signed-out p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.68; }

/* Sign-up success and creator routes: Figma "Creator welcome" (187:86639 / 223:46886). */
.creator-welcome { display: flex; align-items: flex-end; gap: 24px; max-width: 820px; padding-top: 0; }
.creator-welcome-intro { display: flex; flex: 0 0 405px; flex-direction: column; align-items: flex-start; gap: 12px; }
.success-symbol { display: grid; width: 64px; height: 64px; place-items: center; margin-bottom: 12px; border: 1px solid var(--stroke); border-radius: 16px; background: var(--surface-3); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); }
.success-symbol img { width: 32px; height: 32px; }
.creator-welcome-intro .eyebrow { margin: 0; color: var(--accent-text); font-size: 12px; font-weight: 700; line-height: 1.45; }
.creator-welcome h2 { margin: 0; color: var(--text); font-size: 28px; font-weight: 500; line-height: 1.45; letter-spacing: .28px; }
.creator-welcome-routes { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 24px; }
.creator-welcome-routes .join-band-routes { align-items: flex-start; }
.creator-welcome-routes .btn { min-height: 40px; padding-inline: 14px; font-size: 14px; font-weight: 700; text-transform: none; }

/* Right rail: purchase panel, About this release, More games like this. */
.detail-info-rail { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 28px; }
.detail-info-rail > .purchase-panel, .detail-info-rail > .about-release { padding: 24px; border: 1px solid var(--stroke); border-radius: 12px; background: var(--surface); }
.detail-info-rail .purchase-panel { display: flex; flex-direction: column; justify-content: space-between; height: 379px; min-height: 379px; gap: 0; }
.purchase-top { display: flex; flex-direction: column; gap: 48px; }
.purchase-bottom { display: flex; flex-direction: column; gap: 32px; }
.purchase-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.purchase-header .badge { padding: 6px 12px; border: 0; border-radius: 8px; background: var(--surface-3); color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.45; }
.purchase-header > strong { color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.45; }
.purchase-price { display: flex; flex-direction: column; gap: 4px; }
.purchase-price small { color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.45; }
.purchase-price .verified-price { margin: 0; color: var(--accent-text); font-size: 36px; font-weight: 600; line-height: 1.45; }
.purchase-panel .purchase-facts { margin: 0; }
.purchase-panel .purchase-facts > div { display: flex; justify-content: space-between; min-height: 0; padding: 12px 0; border-bottom: 1px solid var(--stroke); font-size: 12px; font-weight: 700; line-height: 1.45; }
.purchase-panel .purchase-facts dt { color: var(--muted); }
.purchase-panel .purchase-facts dd { margin: 0; color: var(--text); }
.purchase-actions { display: flex; gap: 12px; height: 48px; }
.purchase-actions .purchase-primary { flex: 0 1 249px; min-width: 0; min-height: 48px; padding-inline: 12px; }
.purchase-secondary { display: flex; flex: 1; gap: 8px; }
.purchase-secondary button { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0 12px; overflow: hidden; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
/* Figma: the heart sits on --color-bg in dark mode and --color-raised in light mode. */
.purchase-secondary .purchase-wish { background: var(--canvas); }
.purchase-secondary .purchase-wish img { width: 22.98px; height: 22.98px; }
.purchase-secondary button:not(.purchase-wish) img { width: 24px; height: 24px; }
.purchase-secondary small { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.45; text-transform: none; }
.about-release { display: flex; flex-direction: column; gap: 20px; }
.about-release h2 { margin: 0; color: var(--text); font-size: 20px; font-weight: 700; line-height: 1.45; }
.about-release > p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.68; }
.about-release .release-metadata { display: flex; flex-direction: column; gap: 24px; margin: 0; padding-top: 20px; border-top: 1px solid var(--stroke); }
.about-release .release-metadata > div { display: flex; flex-direction: column; gap: 6px; }
.about-release .release-metadata dt { color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.45; }
.about-release .release-metadata dd { margin: 0; color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.45; }
.detail-info-rail > .similar-releases { display: flex; flex-direction: column; gap: 15px; padding-top: 34px; border-top: 1px solid var(--stroke); }
.similar-releases h2 { margin: 0 0 14px; color: var(--text); font-size: 20px; font-weight: 700; line-height: 1.45; }
.similar-releases .art-release-card { aspect-ratio: 436 / 318; }
/* Figma: primary buttons carry a dark outline in light mode. */

.news-heading { min-height: 170px; }
.news-heading > div { width: 100%; }
.news-heading h1 { max-width: 780px; }
.news-media.has-editorial-art { position: relative; overflow: hidden; }
.news-media.has-editorial-art img { width: 100%; height: 100%; object-fit: cover; }
.news-media.has-editorial-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(11, 11, 11,.25)); }
.news-media.has-editorial-art span, .news-media.has-editorial-art b { position: absolute; z-index: 1; }
.news-media.has-editorial-art span { top: 16px; left: 16px; }
.news-media.has-editorial-art b { right: 16px; bottom: 16px; }
.news-page .more-news-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.article-heading { display: block; max-width: 900px; margin: 70px auto 0; text-align: center; }
.article-heading h1 { max-width: 900px; margin-inline: auto; }
.article-media { max-width: 1236px; margin-inline: auto; }
.article-layout { display: block; max-width: 840px; margin: 58px auto 0; }
.article-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; }
.article-actions a { color: var(--accent-text); font-size: 11px; font-weight: 700; }

.submission-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-top: 36px; }
.submission-heading h1 { margin-top: 14px; font-size: 48px; }
.submission-heading p:last-child { margin-top: 12px; color: var(--muted); }
.submission-wizard { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 36px; margin-top: 34px; }
.submission-steps { display: grid; align-content: start; gap: 16px; }
.submission-steps a { display: flex; min-height: 58px; flex-direction: column; justify-content: center; align-items: stretch; gap: 6px; padding: 9px 16px; border: 1px solid var(--stroke); border-radius: 8px; color: var(--muted); font-size: 12px; }
.submission-steps a.active { border-color: var(--accent-text); color: var(--accent-text); }
.submission-steps a > small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; }
.submission-steps a > small i { width: 6px; height: 6px; border-radius: 50%; background: #f3a75b; box-shadow: 0 0 0 3px rgba(243,167,91,.1); }
.submission-steps a.complete > small { color: var(--accent-text); }
.submission-steps a.complete > small i { background: var(--accent); box-shadow: 0 0 0 3px rgba(194,249,112,.1); }
.submission-steps a.optional > small i { background: var(--muted); box-shadow: none; }
.submission-progress { display: grid; gap: 12px; margin-bottom: 24px; }
.submission-progress strong { font-size: 18px; }
.submission-progress strong span { color: var(--accent); }
.submission-progress > i { height: 5px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.submission-progress > i b { display: block; height: 100%; background: var(--accent); transition: width 240ms cubic-bezier(.23,1,.32,1); }
.submission-wizard .submission-form { gap: 18px; }
.submission-wizard .submission-form > section { min-height: 610px; padding: 28px; }
.submission-form select { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--stroke); border-radius: 8px; background: var(--surface); color: var(--text); }
.submission-form .upload-box { position: relative; }
.submission-form .upload-box input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.wizard-actions { display: flex; align-items: center; gap: 12px; }
.wizard-actions .btn.text { margin-left: 4px; }


dialog:has(.account-gate) { width: min(1048px, calc(100% - 32px)); max-width: 1048px; padding: 0; border: 0; border-radius: 24px; background: #0b0b0b; }
.account-gate { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; padding: 14px 16px 19px; background: #0b0b0b; color: #f4f7f5; }
.gate-art { position: relative; min-height: 668px; overflow: hidden; border: 1px solid var(--stroke); border-radius: 12px; }
.gate-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, #101010 92%); }
.gate-art > img { width: 100%; height: 100%; object-fit: cover; }
.gate-art > div { position: absolute; z-index: 1; right: 30px; bottom: 28px; left: 30px; display: grid; gap: 34px; }
.gate-art p { display: flex; gap: 14px; }
.gate-art p > b { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(180, 180, 180, .28); border-radius: 8px; background: #101010; color: #f4f7f5; }
.gate-art p > b img { width: 20px; height: 20px; object-fit: contain; }
.gate-art p > span { display: grid; gap: 4px; }
.gate-art small { color: #c8d3cd; }
.gate-art strong { color: #f4f7f5; }
.gate-panel { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 32px; }
.gate-panel h2 { padding: 0; color: #f4f7f5; font-size: 36px; }
.gate-panel .auth-symbol { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 8px; background: #01060b; }
.gate-panel .auth-symbol img { width: 24px; height: 24px; object-fit: contain; }
.gate-panel .provider-card { display: flex; gap: 14px; align-items: center; padding: 16px; border: 1px solid rgba(180, 180, 180, .28); border-radius: 8px; background: #0b0b0b; color: #f4f7f5; }
.gate-panel .provider-card > img { width: 24px; height: 24px; object-fit: contain; }
.gate-panel .provider-card span { display: grid; gap: 4px; }
.gate-panel .provider-card small { color: #a8b8bf; }
.gate-panel .btn.text { color: #c2f970; }
.gate-panel .or-divider { background: rgba(180, 180, 180, .28); }
.gate-panel .or-divider span { background: #0b0b0b; color: #a8b8bf; font-size: 12px; }
.gate-email-form { display: grid; gap: 12px; }
.gate-email-form label { display: grid; gap: 6px; color: #c8d3cd; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.gate-email-form input { width: 100%; padding: 12px 14px; border: 1px solid rgba(180, 180, 180, .28); border-radius: 8px; background: #101010; color: #f4f7f5; font-size: 15px; letter-spacing: 0; }
.gate-email-form input::placeholder { color: #6f818a; }
.gate-email-form input:focus-visible { outline: 2px solid #c2f970; outline-offset: 1px; }
.gate-email-form .btn.ghost { border-color: rgba(180, 180, 180, .28); color: #f4f7f5; }
.gate-email-form .btn[disabled] { opacity: .6; cursor: progress; }
.gate-email-error { margin: 0; color: #ff9b8f; font-size: 13px; }
.gate-email-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.gate-email-links .btn.text { padding-inline: 0; }

/* The header keeps the chosen theme while scrolling. */
#header,
#header.is-scrolled {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  border: 0;
  border-bottom: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--canvas) 96%, transparent);
  box-shadow: none;
  backdrop-filter: blur(18px);
}
#header.is-scrolled { box-shadow: 0 12px 34px color-mix(in srgb, var(--canvas) 70%, transparent); }
.header-inner { min-height: 80px; padding-inline: 48px; }
.desktop-links { gap: 20px; }
.desktop-links a { padding: 8px 0; background: transparent; color: var(--text); }
.desktop-links a:hover,
.desktop-links a.active { background: transparent; color: var(--accent-text); }
.logo { color: var(--accent-text); font-size: 20px; font-weight: 700; }

dialog:has(.category-dialog) { width: min(393px, calc(100% - 32px)); max-width: 393px; padding: 0; border-radius: 24px; }
.category-dialog { gap: 12px; padding: 34px 16px 0; }
.category-dialog h2 { padding: 0; font-size: 14px; }
.category-dialog > .row > span { color: var(--muted); font-size: 12px; }
.category-search { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 1px solid var(--stroke); border-radius: 8px; }
.category-search input { padding: 0; border: 0; background: transparent; }
.category-options { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; }
.category-option { display: flex; min-height: 76px; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--stroke); border-radius: 16px; background: var(--surface); color: var(--text); text-align: left; }
.category-option img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
.category-option > span { display: grid; flex: 1; gap: 3px; }
.category-option small { color: var(--accent-text); }
.category-option.active { border-color: var(--accent-text); background: rgba(194,249,112,.06); }
.category-option > b { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #102015; color: #fff; }
.category-dialog-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-inline: -16px; padding: 24px 16px; border-top: 1px solid var(--stroke); background: var(--canvas); }
.category-dialog-footer > div { display: grid; gap: 5px; }
.category-dialog-footer small { color: var(--muted); }
.category-dialog-footer .btn { padding-inline: 14px; }

@media (max-width: 1120px) {
  .header-inner { padding-inline: 24px; }
  .account-control > span:not(.account-avatar) { display: none; }
  .art-release-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .gamer-update-grid { grid-template-columns: 1fr; }
  .browse-controls { gap: 24px; }
  .detail-gallery-layout { grid-template-columns: minmax(0,1fr) 340px; }
  .submission-wizard { grid-template-columns: 220px minmax(0,1fr); }
}
@media (max-width: 820px) {
  .release-recommendation, .detail-gallery-layout, .submission-wizard { grid-template-columns: 1fr; }
  .release-recommendation { gap: 0; aspect-ratio: auto; padding: 10px; }
  .recommendation-art { min-height: 360px; }
  .recommendation-copy { gap: 32px; padding: 32px 24px 24px; }
  .art-release-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .gamer-update-lead { grid-template-columns: 1fr; gap: 20px; }
  .gamer-update-lead img { height: auto; aspect-ratio: 635 / 392; border-right: 0; }
  .browse-fixed { display: none; }
  .detail-info-rail { position: static; grid-row: 1; }
  .latest-detail { padding: 72px 24px 40px; }
  .submission-steps { display: flex; overflow-x: auto; }
  .submission-steps a { min-width: 180px; min-height: 60px; }
}
@media (max-width: 560px) {
  .header-inner { padding-inline: 16px; }
  .landing-hero { height: 730px; min-height: 730px; }
  .landing-hero-content { bottom: 100px; }
  .landing-hero-progress { bottom: -46px; }
  .recommendation-section { padding: 0 16px; }
  .recommendation-section > h1, .registry-heading { padding: 28px 0 20px; font-size: 26px; }
  .release-recommendation { border-radius: 18px; }
  .recommendation-art { min-height: 220px; }
  .recommendation-copy { padding: 24px 12px 12px; }
  .recommendation-actions { grid-template-columns: 1fr 1fr; }
  .registry-body { padding: 0 16px 32px; }
  .browse-controls { min-height: 0; padding-block: 8px 20px; }
  .browse-arrow, .category-current { display: none; }
  .gamer-update-list { grid-template-columns: 1fr; }
  .gamer-update-list img { width: 120px; height: 78px; }
  .registry-toolbar { min-height: 38px; }
  .registry-toolbar > span { display: none; }
  .art-release-grid { grid-template-columns: 1fr; gap: 10px; }
  .art-release-card { aspect-ratio: auto; }
  .art-release-card > .art-release-visual { height: auto; aspect-ratio: 459 / 318; }
  .art-release-copy { flex-wrap: wrap; gap: 8px; }
  .load-more-games { padding-inline: 0; }
  .release-desk-grid .news-card { min-height: 0; }
  .release-desk-grid .news-media { width: 100%; min-height: 200px; }
  .latest-detail { padding: 48px 16px 32px; }
  .detail-context small { display: none; }
  .latest-detail .verified-title h1 { font-size: 38px; }
  .detail-thumbnails { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .comments-preview { padding: 18px 14px; }
  .detail-info-rail .purchase-panel { height: auto; min-height: 379px; }
  .purchase-actions .purchase-primary { flex: 1 1 auto; }
  .creator-welcome { flex-direction: column; align-items: flex-start; }
  .creator-welcome-intro { flex-basis: auto; }
  .detail-thumbnails button { flex-basis: 160px; height: 105px; }
  .composer-actions { padding-inline: 0; }
  .preview-comment { grid-template-columns: 32px 1fr; }
  .preview-comment > b { display: none; }
  .news-page .more-news-grid { grid-template-columns: 1fr; }
  .article-heading { margin-top: 36px; }
  .article-heading h1 { font-size: 36px; }
  .article-actions { align-items: flex-start; flex-direction: column; }
  .submission-heading { align-items: flex-start; flex-direction: column; }
  .submission-heading h1 { font-size: 38px; }
  .submission-wizard .submission-form > section { min-height: 0; padding: 20px; }
  .wizard-actions { flex-wrap: wrap; }
  .account-gate { grid-template-columns: 1fr; padding: 10px; }
  .gate-art { min-height: 280px; }
  .gate-art > div { right: 18px; bottom: 18px; left: 18px; gap: 14px; }
  .gate-panel { padding: 20px 10px; }
  .category-dialog-footer { align-items: stretch; flex-direction: column; }
}
@media (hover: none), (pointer: coarse) {
  .art-release-card { aspect-ratio: auto; }
  .art-release-card > .art-release-visual { height: auto; aspect-ratio: 459 / 318; }
  .art-release-actions { position: relative; opacity: 1; transform: none; }
  .art-release-action-plays, .release-votes button { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .art-release-actions, .art-release-copy, .art-release-action-plays, .release-votes button, .art-release-visual > img { transition: none; }
}
.category-option[hidden] { display: none; }
.category-empty { margin: 0; color: var(--muted); text-align: center; }
.comments-status { margin: 12px 0; color: var(--muted); font-size: 13px; }
.release-votes button[aria-pressed="true"] { border-radius: 6px; background: rgba(194, 249, 112, .16); }
.release-votes button:last-child[aria-pressed="true"] { color: #ff9b8f; background: rgba(255, 155, 143, .14); }
.comment-composer > p { margin: 0; color: var(--muted); }

/* Join band and footer — Figma "Welcome and next step" (187:86605 / 223:47273) and "Footer" (223:45051 / 223:47281). */
:root[data-theme="dark"] {
  --footer-bg: #0b0b0b;
  --footer-logo: #686868;
  --footer-link: #f4f7f5;
  --footer-outline: #c2f970;
  --join-glow: radial-gradient(ellipse 262% 262% at 50% -91.6%, rgba(11, 11, 11, 0) 34.624%, rgba(103, 130, 61, .075) 43.99%, rgba(194, 249, 112, .15) 53.356%, rgba(103, 130, 61, .2) 60.388%, rgba(57, 70, 36, .225) 63.904%, rgba(11, 11, 11, .25) 67.42%), #0b0b0b;
  --join-route: #f4f7f5;
  --join-muted: #a8b8bf;
  --join-link: #c2f970;
}
.join-band { display: flex; justify-content: center; padding: 70px 16px; background: var(--join-glow); }
.join-band-inner { width: min(560px, 100%); display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.join-band h2 { margin: 0; color: var(--text); font-size: 36px; font-weight: 600; line-height: 1.45; }
.join-band .btn { min-height: 40px; padding-inline: 14px; font-size: 14px; font-weight: 700; text-transform: none; }
.join-band-routes { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 14px; line-height: 1.45; }
.join-band-routes a { color: var(--join-route); font-weight: 700; text-decoration: underline; text-underline-position: from-font; }
.join-band-routes p { margin: 0; color: var(--join-muted); }
.join-band-routes button { padding: 0; border: 0; background: none; color: var(--join-link); font: inherit; cursor: pointer; }

#footer { border-top: 0; background: var(--footer-bg); }
.site-footer { container-type: inline-size; overflow: hidden; padding: 24px 48px 0; }
.site-footer-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-footer-social { display: flex; align-items: center; gap: 26px; }
.site-footer-social > span:first-child { color: var(--join-muted); font-size: 12px; line-height: 1.45; }
.site-footer-links { display: flex; align-items: center; gap: 20.235px; }
.site-footer-links > span { display: flex; align-items: center; gap: 10.118px; color: var(--text); font-size: 15.176px; line-height: 1.45; }
.site-footer-links img { display: block; }
.site-footer-copyright { margin: 0; color: var(--join-muted); font-size: 12px; line-height: 1.45; }
/* Spans the footer width (its rendered width is 7.02× the font size); Figma clips it at the footer's bottom edge. */
.site-footer-wordmark { height: .765em; margin: 42px 0 0; overflow: hidden; color: transparent; -webkit-text-stroke: 1px var(--footer-outline); font-size: min(266.708px, 100cqw / 7.02); font-weight: 600; line-height: 1.3; white-space: nowrap; user-select: none; }
.join-band-routes a:hover { color: var(--accent-text); }

@media (max-width: 820px) {
  .join-band { padding-block: 56px; }
  .join-band h2 { font-size: 28px; }
  .site-footer { padding-inline: 16px; }
  .site-footer-bar { flex-direction: column; align-items: flex-start; gap: 16px; }
  .site-footer-wordmark { margin-top: 24px; }
}

/* Release News: Figma "Release News / Desktop / Index" (133:10479) and "Article" (133:10555).
   Token colours follow the theme; the fixed values below are literals in the design. */
.news-page, .article-page { width: 100%; max-width: none; padding: 40px 48px 56px; }
.news-page .news-heading { display: flex; flex-direction: column; gap: 10px; min-height: 0; max-width: 800px; margin: 0 0 28px; }
.news-heading .eyebrow, .article-heading .eyebrow { margin: 0; color: var(--accent-text); font-size: 12px; font-weight: 700; line-height: 1.45; }
.news-heading h1, .article-heading h1 { margin: 0; color: var(--text); font-size: 48px; font-weight: 600; line-height: 1.03; letter-spacing: -.96px; }
.news-heading > p:last-child { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.news-page .news-categories { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 12px; overflow: hidden; border: 1px solid rgba(180, 180, 180, .15); border-radius: 12px; background: var(--surface-3); }
.news-chip { display: flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 8px; background: var(--surface-3); color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.45; white-space: nowrap; }
.news-chip.active { background: #c2f970; color: var(--surface-3); }

/* Cards share the Figma media treatment: label, 16:9 and a quiet rule. */
.news-page .news-card, .article-page .news-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--stroke); border-radius: 12px; background: var(--surface); }
.news-card .news-media { position: relative; display: block; width: 100%; min-height: 0; overflow: hidden; border: 1px solid var(--stroke); background: var(--canvas); }
.news-card .news-media > span:first-child { position: absolute; top: 15px; left: 15px; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.45; }
.news-card .news-media > b { position: absolute; right: 13px; bottom: 26px; color: var(--text); font-size: 20px; font-weight: 700; line-height: 1.45; }
.news-card .news-media > i { position: absolute; right: 13px; bottom: 20px; left: 15px; height: 1px; background: var(--stroke); }
.news-card .news-media img { width: 100%; height: 100%; object-fit: cover; }
.news-compact .news-media { aspect-ratio: 338 / 164; }
.news-card .news-card-body { display: flex; flex-direction: column; gap: 10px; min-height: 234px; padding: 16px; line-height: 1.45; }
.news-card .news-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; min-height: 22px; font-size: 12px; font-weight: 700; }
.news-card .news-meta span:first-child { color: var(--accent-text); }
.news-card .news-meta span:last-child { color: var(--muted); }
.news-card h3 { margin: 0; color: var(--text); font-size: 20px; font-weight: 700; line-height: 1.45; }
.news-card .news-card-body > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.news-card .news-link { color: var(--accent-text); font-size: 12px; font-weight: 700; line-height: 1.45; }
.news-card h3 a:hover, .news-card .news-link:hover { text-decoration: underline; }

.news-page .lead-news-grid { display: grid; grid-template-columns: minmax(0, 1144fr) minmax(0, 664fr); gap: 16px; align-items: start; margin: 0 0 28px; }
.news-lead .news-media { aspect-ratio: 698 / 288; }
.news-lead .news-media::after { content: ""; position: absolute; inset: 0; background: rgba(22, 37, 27, .25); }
.news-lead .news-media > b { z-index: 1; right: 16px; bottom: 16px; color: #f4f7f5; }
.news-lead .news-media > i { z-index: 1; right: -17px; bottom: -1px; left: 15px; }
.news-lead .news-card-body { min-height: 232px; }
.news-lead h3 { font-size: 28px; font-weight: 500; letter-spacing: .28px; }
.news-page .supporting-news { display: flex; flex-direction: column; gap: 16px; }
.news-page .news-row { flex-direction: row; height: 244px; }
.news-row > a { flex: 0 0 220px; }
.news-row .news-media { height: 100%; border-radius: 12px; }
.news-row .news-media > span:first-child { top: 17px; left: 17px; }
.news-row .news-media > b { right: 20px; bottom: 16px; color: var(--muted); font-size: 28px; font-weight: 500; letter-spacing: .28px; }
.news-row .news-media > i { display: none; }
.news-page .news-row .news-card-body { min-height: 0; padding: 18px; overflow: hidden; }
.news-page .news-row .news-row-meta { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.news-row h3 { font-size: 24px; }

.news-section-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 28px; font-weight: 700; line-height: 1.45; }
.news-section-line h2 { margin: 0; color: var(--text); font-size: 24px; font-weight: 700; }
.news-section-line a { color: var(--accent-text); font-size: 12px; white-space: nowrap; }
.news-page .gamer-update { margin-bottom: 28px; padding-top: 0; }
.news-page .more-news-grid, .article-page .article-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.article-page { padding-inline: 200px; }
.article-breadcrumb { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
.article-breadcrumb a { color: var(--muted); }
.article-page .article-heading { display: flex; flex-direction: column; align-items: center; gap: 21px; max-width: 880px; margin: 70px auto 60px; text-align: center; }
.article-heading > p:last-child { max-width: 860px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.article-page .article-media { position: relative; max-width: 1236px; height: 420px; margin: 0 auto; overflow: hidden; border: 1px solid var(--stroke); border-radius: 12px; background: var(--surface); }
.article-media.blank-media > span { position: absolute; top: 17px; left: 17px; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.45; }
.article-media.blank-media > b { position: absolute; right: 20px; bottom: 20px; color: var(--muted); font-size: 28px; font-weight: 500; letter-spacing: .28px; }
.article-media.has-image img { width: 100%; height: 100%; object-fit: cover; }
.article-page .article-copy { display: flex; flex-direction: column; gap: 22px; max-width: 840px; margin: 0 auto; padding: 25px 0 87px; }
.article-copy > p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.68; }
.article-copy > .article-deck { color: var(--text); font-size: 20px; line-height: 1.45; }
.article-copy blockquote { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 20px 22px; border: 1px solid var(--stroke); border-radius: 12px; background: var(--surface); font-weight: 700; line-height: 1.45; }
.article-copy blockquote small { color: var(--accent-text); font-size: 12px; }
.article-copy blockquote strong { color: var(--text); font-size: 24px; }
/* WordPress post bodies use the same article type: the opening paragraph is the deck,
   and a pull quote takes the key-finding card. */
.cms-copy > p:first-child { color: var(--text); font-size: 20px; line-height: 1.45; }
.cms-copy h2, .cms-copy h3, .cms-copy h4 { margin: 14px 0 0; color: var(--text); font-weight: 700; line-height: 1.45; }
.cms-copy h2 { font-size: 24px; }
.cms-copy h3 { font-size: 20px; }
.cms-copy h4 { font-size: 16px; }
.cms-copy ul, .cms-copy ol { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 22px; color: var(--muted); font-size: 16px; line-height: 1.68; }
.cms-copy a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.cms-copy strong, .cms-copy b { color: var(--text); }
.cms-copy figure { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.cms-copy img { display: block; max-width: 100%; height: auto; border: 1px solid var(--stroke); border-radius: 12px; }
.cms-copy figcaption { color: var(--muted); font-size: 12px; line-height: 1.45; }
.cms-copy hr { width: 100%; height: 1px; margin: 0; border: 0; background: var(--stroke); }
.cms-copy blockquote p { margin: 0; color: var(--text); font-size: 24px; }
.cms-copy blockquote cite { color: var(--accent-text); font-size: 12px; font-style: normal; }
/* Related cards use a fixed rgba(92,92,92,.28) border in Figma. */
.article-related .news-card, .article-related .news-card .news-media { border-color: rgba(92, 92, 92, .28); }
.article-related .news-card .news-media > i { background: rgba(92, 92, 92, .28); }

@media (max-width: 1120px) {
  .article-page { padding-inline: 48px; }
  .news-page .lead-news-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .news-page, .article-page { padding: 28px 16px 40px; }
  .news-heading h1, .article-heading h1 { font-size: 36px; }
  .news-page .more-news-grid, .article-page .article-related { grid-template-columns: 1fr; }
  .news-page .news-row { flex-direction: column; height: auto; }
  .news-row > a { flex-basis: auto; aspect-ratio: 16 / 9; }
  .article-page .article-media { height: auto; aspect-ratio: 16 / 9; }
  .article-page .article-heading { margin: 36px auto 32px; }
  .news-section-line { flex-direction: column; }
}

/* Custom scrollbars for the page and every scrolling component: a slim rounded thumb on a
   transparent track, with no arrow buttons. Colours come from the Figma palette. */
:root[data-theme="dark"] { --scroll-thumb: #738078; --scroll-thumb-hover: #a8b8bf; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: var(--scroll-thumb) padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
/* Firefox has no ::-webkit-scrollbar; its thin scrollbars have no arrows. */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
  .category-row { scrollbar-color: transparent transparent; }
  .category-row.is-scrolling { scrollbar-color: var(--scroll-thumb) transparent; }
}
/* The category row keeps its scrollbar's space (so nothing shifts) but only shows the
   thumb while it is being scrolled; app.js toggles .is-scrolling. */
.category-row::-webkit-scrollbar-thumb { background-color: transparent; }
.category-row.is-scrolling::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb); }

/* Account: Figma "gamesforNaija / Desktop / Account management" (133:10023 … dark, 223:46152 … light).
   Content is 1424px wide at 1920px, so the side padding grows with the viewport. */
.account-page { width: 100%; max-width: none; padding: 28px max(48px, calc((100% - 1424px) / 2)) 56px; }
.account-intro { display: flex; flex-direction: column; gap: 24px; padding-bottom: 39px; border-bottom: 1px dashed #2b3a46; }
.account-crumb { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.account-crumb a { color: var(--muted); }
.account-crumb span { color: var(--text); }
.account-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.account-heading > div { display: flex; flex-direction: column; gap: 10px; }
.account-heading .eyebrow { margin: 0; color: var(--accent-text); font-size: 12px; font-weight: 700; line-height: 1.45; }
.account-heading h1 { margin: 0; color: var(--text); font-size: 48px; font-weight: 600; line-height: 1.03; letter-spacing: -.96px; }
.account-heading p:last-child { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.68; }
.account-heading .btn:disabled { opacity: .45; cursor: not-allowed; }
.account-library-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 25px 0 24px; }
.account-library-heading h2 { margin: 0; color: var(--text); font-size: 24px; font-weight: 700; line-height: 1.45; }
.account-library-heading span { color: var(--muted); font-size: 12px; }
.account-page .account-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; margin: 0; }

/* Tabs: Figma "Collection summaries". The active number and label use --color-accent in both themes. */
.account-page .account-tabs { display: flex; flex-direction: column; gap: 16px; }
.account-tab { display: flex; align-items: center; justify-content: space-between; padding: 16px; border: 1px solid var(--stroke); border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 12px; line-height: 1.45; }
.account-tab img { width: 18px; height: 18px; }
.account-tab.active { flex-direction: column; align-items: stretch; gap: 8px; border-color: var(--accent-text); background: transparent; color: var(--accent); font-size: 16px; font-weight: 700; }
.account-tab-top { display: flex; align-items: center; justify-content: space-between; }
.account-tab-top strong { color: var(--accent); font-size: 24px; line-height: 1.45; }
.account-tab.active img { width: 34px; height: 34px; }

/* Collection area: dashed-rule heading, tools and count pill. */
.account-main { min-width: 0; }
.account-collection-view { display: flex; flex-direction: column; gap: 16px; padding: 0 20px 20px; }
.collection-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 67px; padding-bottom: 18px; border-bottom: .5px dashed var(--chip-text); }
.collection-heading h2 { display: flex; align-items: center; gap: 18.437px; margin: 0; color: var(--accent-text); font-size: 30.728px; font-weight: 700; line-height: 1.45; white-space: nowrap; }
.collection-heading h2 img { width: 30.728px; height: 30.728px; }
.collection-tools { display: flex; flex: 1; align-items: center; gap: 14px; color: var(--muted); font-size: 16px; line-height: 1.68; }
.collection-tools label { position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.collection-tools input { position: absolute; opacity: 0; pointer-events: none; }
.collection-tools label img { width: 20.396px; height: 20.396px; }
.collection-tools .dot { width: 3.563px; height: 3.563px; }
.collection-tools button { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.collection-tools label:focus-within, .collection-tools button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.collection-count { padding: 7.696px 19.239px; border-radius: 11.543px; background: var(--surface-3); color: var(--accent-text); font-size: 23.087px; font-weight: 400; line-height: 1.45; white-space: nowrap; }

.account-page .account-game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; margin-top: 54px; }
.account-game-item { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.account-game-item > .art-release-card { flex: 1; aspect-ratio: auto; height: 318px; }
.account-select { position: relative; flex: 0 0 auto; width: 20.396px; height: 20.396px; cursor: pointer; }
.account-select input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.account-select img { width: 100%; height: 100%; }
.account-select .tick { display: none; }
.account-select:has(input:checked) { width: 32.865px; height: 32.865px; }
.account-select:has(input:checked) .box { display: none; }
.account-select:has(input:checked) .tick { display: block; }
.account-select:focus-within { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 4px; }
.account-game-item:has(input:checked) > .art-release-card { border: 1.5px solid var(--accent-text); }
.collection-more { align-self: flex-start; margin-top: 18px; padding: 0; border: 0; background: none; color: var(--accent-text); font-size: 16px; font-weight: 700; line-height: 1.45; cursor: pointer; }

/* Credentials: Figma "Profile", "Sign-in method" and "Preferences and privacy". */
.credentials-profile { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 20px; border: 1px solid var(--stroke); border-radius: 12px; background: var(--surface); }
.profile-identity { display: flex; align-items: center; gap: 12px; }
.profile-avatar { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border: 1px solid var(--stroke); border-radius: 50%; background: var(--surface-3); color: var(--accent-text); font-size: 16px; font-weight: 700; object-fit: cover; }
.profile-identity strong { display: block; color: var(--text); font-size: 20px; font-weight: 700; line-height: 1.45; }
.profile-identity small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.change-avatar { position: relative; color: var(--accent-text); font-size: 12px; font-weight: 700; line-height: 1.45; cursor: pointer; }
.change-avatar input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.change-avatar:focus-within { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.credentials-profile hr, .credential-card hr { width: 100%; height: 1px; margin: 0; border: 0; background: var(--stroke); }
.credentials-profile h3, .credential-card h3 { margin: 0; color: var(--text); font-size: 16px; font-weight: 700; line-height: 1.45; }
.profile-field { display: flex; flex-direction: column; gap: 8px; width: 100%; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.45; }
.profile-field input { width: 100%; padding: 12px; border: 1px solid var(--stroke); border-radius: 8px; background: var(--canvas); color: var(--text); font: 400 14px/1.45 Geist, Arial, sans-serif; }
.profile-locked { position: relative; display: block; }
.profile-locked img { position: absolute; top: 50%; right: 12px; width: 14px; height: 14px; transform: translateY(-50%); }
.credentials-profile > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.credential-cards { display: flex; gap: 16px; }
.credential-card { display: flex; flex: 1; min-width: 0; flex-direction: column; justify-content: space-between; gap: 16px; padding: 20px; border: 1px solid var(--stroke); border-radius: 12px; background: var(--surface); }
.credential-card > div { display: flex; flex-direction: column; gap: 16px; }
.credential-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.provider-line { display: flex; align-items: center; gap: 12px; }
.provider-line .provider-mark { width: 40.398px; height: 40.398px; }
.provider-line .provider-mark.small { width: 24px; height: 24px; margin: 8px; }
.provider-line > span { display: flex; flex: 1; flex-direction: column; gap: 4px; line-height: 1.45; }
.provider-line strong { color: var(--text); font-size: 14px; }
.provider-line small { color: var(--accent-text); font-size: 12px; }
.provider-line > img:last-child { width: 18px; height: 18px; }
.settings-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; background: none; color: var(--text); font-size: 14px; line-height: 1.45; text-align: left; cursor: pointer; }
.settings-link img { width: 16px; height: 16px; }
.settings-link span { flex: 1; }
.settings-link b { color: var(--muted); font-weight: 400; }
.credential-card .danger-link { align-self: flex-start; padding: 0; border: 0; background: none; color: #ff5b5b; font-size: 12px; line-height: 1.45; cursor: pointer; }

/* Your games: Pending / Accepted filter and submission cards. */
.submission-filter { display: flex; gap: 9.631px; margin-top: 27px; }
.submission-filter a { display: flex; align-items: center; min-height: 33.707px; padding: 7.223px 12.038px; border: 1.204px solid var(--stroke); border-radius: 8.427px; color: var(--chip-text); font-size: 13.242px; line-height: 19.201px; }
.submission-filter a.active { border-color: transparent; background: var(--surface-3); color: var(--text); font-weight: 700; }
.account-page .submission-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 7px; }
/* Submission cards are artwork, so their text stays light in both themes. */
.submission-card { position: relative; display: block; height: 215px; overflow: hidden; border: 1px solid var(--stroke); border-radius: 16px; background: #101010; }
.submission-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.submission-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(8, 14, 21, 0) 57.858%, rgba(9, 13, 18, .95) 81.063%); }
.submission-copy { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 16px; }
.submission-copy > span { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.submission-copy strong { overflow: hidden; color: #f4f7f5; font-size: 24px; font-weight: 700; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.submission-copy small { color: #a8b8bf; font-size: 12px; line-height: 1.45; }
.submission-copy b { flex: 0 0 auto; font-size: 13.712px; font-weight: 400; line-height: 1.45; }
.status-pending .submission-copy b { color: #ffb25b; }
.status-accepted .submission-copy b { color: #c2f970; }
.status-rejected .submission-copy b { color: #ff5b5b; }
.status-draft .submission-copy b { color: #c2f970; }

.email-preferences { display: flex; flex-direction: column; gap: 14px; }
.email-preferences .check-row { align-items: flex-start; }
.email-preferences .check-row span { display: flex; flex-direction: column; gap: 2px; }
.email-preferences .check-row small { color: var(--muted); }

@media (max-width: 1120px) {
  .account-page .account-layout { grid-template-columns: 260px minmax(0, 1fr); }
  .collection-heading { flex-wrap: wrap; }
  .account-page .submission-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .account-page { padding-inline: 16px; }
  .account-heading { flex-direction: column; align-items: flex-start; }
  .account-heading h1 { font-size: 36px; }
  .account-page .account-layout { grid-template-columns: 1fr; }
  .account-page .account-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 8px; }
  .account-tab { flex: 0 0 180px; }
  .account-collection-view { padding: 0; }
  .collection-heading h2 { font-size: 24px; }
  .account-page .account-game-grid, .account-page .submission-card-grid { grid-template-columns: 1fr; margin-top: 24px; }
  .credential-cards { flex-direction: column; }
}

/* Your games: spacing, empty states, edit actions and reviewer notes. */
.account-collection-view .submission-filter { margin: 24px 0 8px; }
.account-page .submission-card-grid { gap: 12px; margin-top: 8px; }
.account-empty { display: grid; justify-items: start; gap: 10px; margin-top: 8px; padding: 32px; border: 1px dashed var(--stroke); border-radius: 16px; }
.account-empty h3 { margin: 0; font-size: 20px; line-height: 1.3; }
.account-empty p { max-width: 46ch; margin: 0 0 8px; color: var(--muted); line-height: 1.55; }
.submission-card-actions { position: absolute; z-index: 2; top: 12px; right: 12px; display: flex; gap: 6px; }
.submission-action { padding: 6px 12px; border: 1px solid rgba(244, 247, 245, .25); border-radius: 999px; background: rgba(9, 13, 18, .72); color: #f4f7f5; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; backdrop-filter: blur(6px); }
.submission-action:hover, .submission-action:focus-visible { border-color: var(--accent-text); color: var(--accent-text); }
.submission-action[disabled] { opacity: .6; cursor: progress; }
.submission-note { display: -webkit-box; overflow: hidden; margin: 2px 0 0; color: #ffd2cc; font-size: 12px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.submission-heading-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
@media (max-width: 760px) {
  .account-empty { padding: 24px; }
  .submission-heading-actions { align-items: flex-start; }
}
/* Titles wrap to two lines instead of cutting off after a few letters. */
.submission-copy strong { display: -webkit-box; font-size: 20px; line-height: 1.15; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.submission-copy .submission-note strong { display: inline; overflow: visible; color: inherit; font-size: inherit; font-weight: 700; line-height: inherit; white-space: normal; -webkit-line-clamp: unset; }