/* Motivation discovery: the site's arcade purple, dark glass and game artwork. */
html:has(body.page-motivation) {
  min-height: 100%;
  background-color: #0F0B24;
  background-image:
    radial-gradient(circle at 20% 0%, rgba(119, 81, 255, 0.22), transparent 34%),
    radial-gradient(circle at 80% 8%, rgba(232, 199, 109, 0.10), transparent 28%),
    linear-gradient(
      180deg,
      #171237 0%,
      #161236 18%,
      #141030 40%,
      #120e28 65%,
      #0F0B24 100%
    );
  background-repeat: no-repeat;
  background-size: 100% 100vh, 100% 85vh, 100% 100%;
  background-position: center top, center top, center top;
}
body.page-motivation { background: transparent; }
body.page-motivation .footer-content {
  background: transparent;
  border-top-color: rgba(62, 52, 120, 0.55);
}
.motive-page { max-width: 1400px; margin: 0 auto; padding: 1.5rem 2rem 3rem; }
.motive-page a { text-decoration: none; }
.motive-page a:focus-visible, .motive-page summary:focus-visible, .motive-page input:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 5px; }
.motive-page [hidden] { display: none !important; }
.motive-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; color: #afa8c9; font-size: .8rem; }
.motive-breadcrumb a:hover, .motive-back-link:hover { color: #c4b5fd; }
.motive-breadcrumb [aria-current] { color: #f0edfa; }
.motive-eyebrow { margin: 0 0 .8rem; color: #b4a0ff; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; }
.motive-hero { position: relative; display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 3rem; min-height: 270px; padding: 2rem 0; }
.motive-hero:has(.motive-switcher[open]) { z-index: 60; }
.motive-hero-copy { position: relative; z-index: 3; min-width: 0; }
.motive-hero h1 { margin: 0; color: #f0edfa; font-size: clamp(2.5rem,5vw,4.25rem); font-weight: 700; line-height: 1.1; letter-spacing: -.045em; overflow-wrap: anywhere; }
.motive-hero-description { max-width: 36rem; margin: 1rem 0 1.4rem; color: #c9c4e3; font-size: 1.1rem; line-height: 1.65; }
.motive-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.25rem; color: #afa8c9; font-size: .82rem; }
.motive-score-pill { border: 1px solid #57408f; border-radius: 2rem; padding: .3rem .6rem; background: rgba(119,81,255,.1); color: #c4b5fd; font-size: .7rem; }
.motive-hero-covers { position: relative; display: flex; align-items: center; justify-content: center; gap: .8rem; padding: 1rem; }
.motive-hero-covers::before { content: ''; position: absolute; inset: 12% -5%; border-radius: 50%; background: #7751ff; filter: blur(65px); opacity: .16; }
.motive-hero-covers > div { width: 29%; max-width: 140px; aspect-ratio: 3/4; border: 1px solid rgba(196,181,253,.22); border-radius: .7rem; overflow: hidden; box-shadow: 0 20px 40px #08061699; transform: rotate(-9deg) translateY(6px); }
.motive-hero-covers > div:nth-child(2) { z-index: 1; transform: translateY(-12px); }
.motive-hero-covers > div:nth-child(3) { transform: rotate(9deg) translateY(6px); }
.motive-hero-covers img, .motive-catalog-covers img { width: 100%; height: 100%; object-fit: cover; }
.motive-switcher { position: relative; width: fit-content; margin-top: 1.5rem; }
.motive-switcher summary { display: flex; align-items: center; gap: 1.25rem; cursor: pointer; color: #c4b5fd; font-size: .8rem; list-style: none; padding: .4rem 0; }
.motive-switcher summary::-webkit-details-marker { display: none; }
.motive-switcher[open] summary > span { transform: rotate(180deg); }
.motive-switcher-links { position: absolute; top: calc(100% + .5rem); left: 0; z-index: 10; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .3rem; width: min(570px,85vw); max-height: 360px; overflow-y: auto; padding: 1rem; border: 1px solid #493771; border-radius: .8rem; background: #1b1535; box-shadow: 0 20px 50px #0009; }
.motive-switcher-links a { padding: .55rem .6rem; border-radius: .4rem; color: #c9c4e3; font-size: .78rem; }
.motive-switcher-links a:hover, .motive-switcher-links [aria-current] { background: #7751ff33; color: #f0edfa; }
.motive-switcher-links .motive-switcher-all { grid-column: 1/-1; color: #c4b5fd; border-top: 1px solid #3a3155; border-radius: 0; margin-top: .4rem; padding-top: .8rem; }
.motive-tabs { display: flex; align-items: center; gap: .4rem; overflow-x: auto; padding: .65rem; border: 1px solid #342b50; border-radius: .8rem; background: #1b1535f5; }
.motive-tabs > a { display: flex; flex: 0 0 auto; align-items: center; gap: .65rem; padding: .8rem .95rem; border-radius: .5rem; color: #afa8c9; font-size: .82rem; font-weight: 600; transition: background .15s, color .15s; }
.motive-tabs > a:hover { color: #f0edfa; background: #7751ff22; }
.motive-tabs > a.is-active { color: #f0edfa; background: #7751ff; }
.motive-tabs a > span { font-size: .65rem; font-weight: 400; opacity: .85; }
.motive-tabs > .motive-tabs-refine { margin-left: auto; color: #c4b5fd; }
.motive-results { padding-top: 2.25rem; scroll-margin-top: 1.5rem; }
.motive-results-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.4rem; }
.motive-results h2, .motive-section-heading h2 { margin: 0; color: #f0edfa; font-size: 1.6rem; font-weight: 700; line-height: 1.3; letter-spacing: -.025em; }
.motive-results-heading > div > p, .motive-section-heading > p:last-child { max-width: 55rem; margin: .5rem 0 0; color: #afa8c9; font-size: .85rem; line-height: 1.6; }
.motive-back-link { display: inline-block; margin-bottom: .7rem; font-size: .75rem; color: #c4b5fd; }
.motive-refine-link { display: inline-block; margin-top: .65rem; color: #c4b5fd; font-size: .75rem; }
.motive-refine-link:hover { color: #f0edfa; }
.motive-score-legend { flex-shrink: 0; margin: 0; color: #c9c4e3; text-align: right; font-size: .72rem; line-height: 1.9; }
.motive-score-legend > span { padding: .15rem .4rem; margin-right: .3rem; background: #7751ff; border-radius: .4rem; color: #fff; font-weight: 700; }
.motive-score-legend small { color: #afa8c9; font-size: .65rem; }
.motive-games-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 1.25rem 1rem; }
.motive-games-grid .similar-games-card { height: 100%; border: 1px solid #362e52; border-radius: .6rem; background: #1a1431; transition: border-color .15s, transform .15s; }
.motive-games-grid .similar-games-card:hover { transform: translateY(-3px); border-color: #916eff; }
.motive-games-grid .similar-games-card:focus-visible { outline-offset: 3px; }
.motive-games-grid .similar-games-card-media { height: auto; aspect-ratio: 3/3.7; }
.motive-games-grid .similar-games-card-cover-img { object-position: center; }
.motive-games-grid .similar-games-card-badge { top: .55rem; right: .55rem; padding: .3rem .45rem; border: 1px solid #c4b5fd66; border-radius: .4rem; background: #38246def; font-size: .72rem; box-shadow: 0 2px 8px #0007; }
.motive-games-grid .similar-games-card-heading { flex-direction: column; align-items: start; gap: .4rem; padding: .8rem .75rem .5rem; }
.motive-games-grid .similar-games-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.8em; max-width: 100%; white-space: normal; color: #f0edfa; font-size: .84rem; line-height: 1.4; }
.motive-games-grid .similar-games-card-meta { font-size: .7rem; }
.motive-games-grid .similar-games-card-score { color: #c4b5fd; }
.motive-games-grid .similar-games-card-blurb { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0 .75rem .85rem; color: #afa8c9; font-size: .7rem; line-height: 1.55; }
.motive-pagination-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: 1.5rem; padding: 1rem 0; border-top: 1px solid #302744; }
.motive-pagination { display: flex; align-items: center; gap: .6rem; }
.motive-pagination a, .motive-pagination-current { padding: .55rem .7rem; border: 1px solid #3a3155; border-radius: .45rem; font-size: .75rem; }
.motive-pagination a:hover { background: #7751ff22; border-color: #7751ff; }
.motive-pagination-current { background: #7751ff22; color: #c4b5fd; border-color: #7751ff88; }
.motive-discover { display: grid; gap: 2.75rem; padding: 2.25rem 0 0; scroll-margin-top: 1.5rem; }
.motive-section-heading { margin-bottom: 1.25rem; }
.motive-section-heading .motive-eyebrow { margin-bottom: .5rem; }
.motive-discovery-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; }
.motive-discovery-card { display: flex; flex-direction: column; gap: .65rem; padding: 1.2rem; border: 1px solid #372c53; border-radius: .7rem; background: linear-gradient(130deg,#20183c,#17122c); transition: border-color .15s, background .15s; }
.motive-discovery-card:hover, .motive-discovery-card.is-active { border-color: #9d7fff; background: #271c4b; }
.motive-discovery-heading { display: flex; justify-content: space-between; gap: 1rem; color: #f0edfa; font-size: .9rem; }
.motive-discovery-heading > span { color: #b4a0ff; }
.motive-discovery-description { color: #afa8c9; font-size: .8rem; line-height: 1.6; }
.motive-explanation { display: flex; align-items: start; gap: 1rem; padding: 1.5rem 0 0; margin-top: 3rem; border-top: 1px solid #342b50; }
.motive-explanation > .material-icons { font-size: 1.3rem; color: #afa8c9; }
.motive-explanation h2 { margin: 0 0 .4rem; font-size: .85rem; color: #c9c4e3; font-weight: 600; }
.motive-explanation p { max-width: 48rem; margin: 0; font-size: .75rem; line-height: 1.65; color: #afa8c9; }
.motive-explanation > a { flex-shrink: 0; margin-left: auto; font-size: .75rem; color: #c4b5fd; }
.motive-index-header { padding: 3.5rem 0; text-align: center; }
.motive-index-header h1 { margin: 0; font-size: clamp(2rem,4.5vw,3.5rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.2; }
.motive-index-header h1 > span { display: block; color: #b4a0ff; }
.motive-index-header > p:last-child { margin: 1.25rem auto 0; font-size: 1rem; line-height: 1.7; color: #afa8c9; }
.motive-catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; color: #afa8c9; font-size: .85rem; }
.motive-catalog-toolbar strong { color: #f0edfa; }
.motive-search { display: flex; align-items: center; gap: .5rem; width: 19rem; max-width: 100%; padding: .65rem .85rem; border: 1px solid #463763; border-radius: .5rem; background: #19132d; }
.motive-search > span { font-size: 1.1rem; }
.motive-search input { width: 100%; min-width: 0; border: 0; color: #f0edfa; background: transparent; font: inherit; }
.motive-search input::placeholder { color: #a198b9; }
.motive-catalog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.25rem; }
.motive-catalog-card { min-width: 0; overflow: hidden; border: 1px solid #382c54; border-radius: .8rem; background: #1a1431; transition: border-color .15s, transform .15s; }
.motive-catalog-card:hover { border-color: #a083ff; transform: translateY(-3px); }
.motive-catalog-covers { display: grid; grid-template-columns: repeat(var(--motive-cover-count,3),minmax(0,1fr)); gap: 3px; height: 150px; overflow: hidden; background: #20183c; mask-image: linear-gradient(#000 70%,transparent); }
.motive-catalog-covers img { object-position: center 25%; }
.motive-catalog-copy { padding: .4rem 1.25rem 1.3rem; }
.motive-catalog-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.motive-catalog-card h2 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.motive-catalog-card-heading > span { color: #b4a0ff; }
.motive-catalog-copy > p { min-height: 3.2em; margin: .6rem 0 1rem; color: #afa8c9; font-size: .8rem; line-height: 1.6; }
.motive-empty { padding: 3rem 1.5rem; border: 1px dashed #4c3e68; border-radius: .75rem; text-align: center; color: #afa8c9; }
.motive-empty > .material-icons { color: #b4a0ff; font-size: 2rem; }
.motive-empty h3 { margin: .8rem 0; color: #f0edfa; font-weight: 600; }
.motive-empty p { font-size: .85rem; }
.motive-empty a { display: inline-block; margin-top: 1rem; color: #c4b5fd; font-size: .85rem; }
.motive-search-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1100px) {
  .motive-games-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .motive-hero { gap: 1rem; }
  .motive-tabs > .motive-tabs-refine { display: none; }
  .motive-explanation { flex-wrap: wrap; }
  .motive-explanation > a { margin-left: 2.3rem; }
}
@media (max-width: 760px) {
  .motive-page { padding: 1rem 1.25rem 2rem; }
  .motive-hero { min-height: 0; padding: 2.25rem 0; grid-template-columns: 1fr .45fr; gap: .5rem; }
  .motive-hero h1 { font-size: 2.5rem; }
  .motive-hero-description { font-size: .95rem; }
  .motive-hero-covers { padding: 0; }
  .motive-hero-covers > div { display: none; }
  .motive-hero-covers > div:nth-child(2) { display: block; width: 100%; transform: rotate(7deg); }
  .motive-tabs { border-radius: .6rem; gap: .2rem; padding: .4rem; }
  .motive-tabs > a { padding: .65rem .75rem; font-size: .75rem; }
  .motive-tabs a > span { display: none; }
  .motive-results-heading { align-items: start; flex-direction: column; gap: .8rem; }
  .motive-score-legend { text-align: left; }
  .motive-score-legend br, .motive-score-legend small { display: none; }
  .motive-games-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .85rem; }
  .motive-catalog-grid, .motive-discovery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .motive-explanation > div { flex: 1; }
  .motive-catalog-covers { height: 120px; }
  .motive-index-header { padding: 2.5rem 0; }
}
@media (max-width: 480px) {
  .motive-page { padding: 1rem 1rem 2rem; }
  .motive-hero { grid-template-columns: 1fr; padding: 2rem 0; }
  .motive-hero-covers { display: none; }
  .motive-hero h1 { font-size: 2.65rem; }
  .motive-hero-description { margin-bottom: 1rem; }
  .motive-switcher-links { width: calc(100vw - 2rem); grid-template-columns: repeat(2,minmax(0,1fr)); }
  .motive-games-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
  .motive-results h2, .motive-section-heading h2 { font-size: 1.4rem; }
  .motive-catalog-grid, .motive-discovery-grid { grid-template-columns: 1fr; }
  .motive-catalog-toolbar { align-items: start; flex-direction: column; }
  .motive-catalog-toolbar > p { margin: 0; }
  .motive-search { width: 100%; }
  .motive-catalog-covers { height: 150px; }
  .motive-catalog-copy > p { min-height: auto; }
  .motive-pagination-bar { justify-content: center; }
  .motive-discover { gap: 2rem; }
  .motive-index-header > p:last-child { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .motive-page a { transition: none !important; transform: none !important; }
}