:root {
  color-scheme: dark;
  --bg: #151620;
  --panel: #20222f;
  --gold: #ebc46e;
  --muted: #9598ae
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px
}

body {
  margin: 0;
  background: #0e0f16;
  color: #f3f1f8;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px
}

button,
a {
  -webkit-tap-highlight-color: transparent
}

button {
  font: inherit;
  cursor: pointer
}

a {
  text-decoration: none;
  color: inherit
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid #f4cb77;
  outline-offset: 3px
}

button {
  color: inherit
}

img {
  max-width: 100%
}

.app {
  max-width: 640px;
  min-height: 100svh;
  margin: auto;
  background: var(--bg);
  box-shadow: 0 0 100px #0007;
  position: relative;
  padding-bottom: 85px
}

.topbar {
  height: 78px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: #151620f5;
  display: flex;
  align-items: center;
  padding: 12px 20px;
  gap: 10px;
  backdrop-filter: blur(15px)
}

.menu-button {
  width: 37px;
  height: 39px;
  border: 1px solid #454655;
  border-radius: 10px;
  background: linear-gradient(#272a39, #191b27);
  font-size: 20px
}

.wordmark {
  font-size: 31px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -1px;
  color: var(--gold);
  white-space: nowrap
}

.wordmark>span {
  display: inline-block;
  font-size: 24px;
  margin-right: 3px
}

.account {
  display: flex;
  gap: 9px;
  margin-left: auto
}

.login,
.gold {
  border-radius: 10px;
  padding: 11px 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  line-height: 1.3
}

.login {
  border: 1px solid #4a4a5d
}

.gold {
  background: linear-gradient(115deg, #ffdc94, #e7b35f);
  border: 1px solid #f9d69a;
  color: #39230c;
  box-shadow: 0 3px 14px #e9b95f18
}

main {
  padding: 0 20px
}

.banner {
  position: relative;
  height: 287px;
  overflow: hidden;
  border-radius: 17px;
  background: #281547
}

.banner>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}

.banner-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #1a0a35e8, transparent 85%)
}

.banner-copy {
  position: absolute;
  left: 24px;
  top: 35px;
  width: 64%
}

.eyebrow {
  font-size: 9px;
  letter-spacing: 1.6px;
  font-weight: bold;
  color: #e9c985
}

h1 {
  font-size: 31px;
  line-height: 1.15;
  letter-spacing: -.9px;
  margin: 15px 0 12px;
  color: #ffe6ab
}

.banner-copy p {
  font-size: 12px;
  line-height: 1.65;
  max-width: 250px;
  color: #d7c7e6;
  margin-bottom: 18px
}

.banner-copy .gold {
  font-size: 10px;
  padding: 11px 12px;
  border-radius: 7px
}

.banner-label {
  position: absolute;
  right: 15px;
  bottom: 14px;
  font-size: 8px;
  letter-spacing: 1px;
  color: #f8e2af
}

.dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  height: 32px
}

.dots button {
  width: 7px;
  height: 7px;
  background: #46475a;
  border: 0;
  border-radius: 99px;
  padding: 0
}

.dots button[aria-pressed=true] {
  width: 27px;
  background: var(--gold)
}

.dots button.pause {
  width: 20px;
  height: 20px;
  background: none;
  color: #aaa;
  font-size: 10px
}

section {
  margin-bottom: 25px
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px
}

.section-heading h2 {
  font-size: 18px;
  margin: 0;
  letter-spacing: -.3px
}

.section-heading h2 span {
  color: var(--gold);
  margin-right: 6px
}

.section-heading>a {
  font-size: 11px;
  color: var(--gold)
}

.muted {
  color: var(--muted);
  font-size: 10px
}

.recent-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 5px
}

.recent-track>a {
  flex: 0 0 88px;
  min-width: 0
}

.recent-track img {
  display: block;
  width: 88px;
  height: 103px;
  object-fit: cover;
  border-radius: 13px
}

.recent-track b {
  font-size: 10px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 7px
}

.recent-track small {
  font-size: 9px;
  color: var(--gold);
  display: block;
  margin-top: 4px
}

.quick-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 17px 12px;
  margin: 24px 0 30px
}

.quick-links a {
  text-align: center;
  font-size: 10px;
  color: #d6d2e4
}

.quick-links a>span {
  display: grid;
  place-items: center;
  width: 64px;
  height: 62px;
  margin: 0 auto 8px;
  font-size: 34px;
  color: #ffe5a4;
  border: 1px solid #b18a4e;
  border-radius: 15px;
  background: radial-gradient(ellipse at 60% 10%, #8d4ec0, #34134c 60%, #591e2e);
  box-shadow: inset 0 0 17px #df9e3c33, 0 5px 15px #0003;
  text-shadow: 0 0 13px #ffe0ab88
}

.category-tabs {
  display: flex;
  gap: 7px;
  padding: 5px;
  background: #20212d;
  border-radius: 13px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 22px
}

.category-tabs button {
  border: 0;
  background: none;
  white-space: nowrap;
  padding: 12px 14px;
  color: #b8b8cd;
  border-radius: 10px;
  font-size: 12px
}

.category-tabs button[aria-selected=true] {
  background: linear-gradient(110deg, #f7d48c, #deb05b);
  color: #35240d;
  font-weight: bold
}

.catalog-note {
  font-size: 10px;
  color: #9294a8;
  margin: -5px 0 15px;
  line-height: 1.6
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px 12px
}

.game-card {
  position: relative;
  min-width: 0
}

.card-art {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 15px;
  background: #252532
}

.card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s
}

.card-art:hover img {
  transform: scale(1.04)
}

.tag {
  position: absolute;
  left: 7px;
  top: 8px;
  background: #242032cc;
  font-size: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  color: #ffdf91
}

.favorite {
  position: absolute;
  right: 7px;
  top: 7px;
  width: 27px;
  height: 27px;
  background: #19151dbb;
  border: 1px solid #ffffff28;
  border-radius: 50%;
  font-size: 17px
}

.favorite[aria-pressed=true] {
  color: #ffd077;
  background: #682a6b
}

.game-card h3 {
  font-size: 12px;
  margin: 8px 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.game-card p {
  margin: 0;
  font-size: 9px;
  color: #9294aa
}

#empty-state {
  padding: 30px;
  text-align: center;
  color: #b7a3c5;
  line-height: 1.8
}

.download-banner {
  display: flex;
  gap: 15px;
  align-items: center;
  background: radial-gradient(at right, #6a3490, #2e2146 75%);
  padding: 23px 18px;
  border: 1px solid #a3704b77;
  border-radius: 16px;
  margin: 30px 0
}

.download-icon {
  flex-shrink: 0;
  border-radius: 16px;
  display: grid;
  place-items: center;
  width: 53px;
  height: 60px;
  background: linear-gradient(140deg, #fae2a1, #c58c39);
  color: #472819;
  font-size: 36px
}

.download-banner small {
  font-size: 8px;
  color: #e3c17a;
  letter-spacing: 1px
}

.download-banner h2 {
  font-size: 19px;
  margin: 7px 0
}

.download-banner p {
  font-size: 10px;
  color: #c3b4d4;
  margin: 0;
  line-height: 1.5
}

.round-arrow {
  margin-left: auto;
  font-size: 25px;
  color: #f3cf83
}

.guide-row {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 17px 0;
  border-bottom: 1px solid #2c2c3b
}

.guide-row>span {
  color: #b49056;
  background: #2a2335;
  border: 1px solid #8c634b44;
  padding: 10px;
  border-radius: 10px;
  font-size: 12px
}

.guide-row h3 {
  font-size: 13px;
  margin: 0 0 6px
}

.guide-row p {
  font-size: 10px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0
}

.guide-row>b {
  margin-left: auto;
  color: var(--gold)
}

.about {
  padding-top: 12px
}

.about h2 {
  font-size: 21px;
  line-height: 1.4;
  margin: 13px 0
}

.about>p,
.about details p {
  font-size: 12px;
  line-height: 1.9;
  color: #a9a9bd
}

.about details {
  padding: 17px 0;
  border-bottom: 1px solid #2d2d3b
}

.about summary {
  font-size: 13px;
  cursor: pointer
}

footer {
  text-align: center;
  padding: 26px 0 15px;
  color: #89899f
}

footer .wordmark {
  font-size: 29px
}

footer p {
  font-size: 10px
}

footer>span {
  font-size: 8px;
  letter-spacing: 2px
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  max-width: 640px;
  width: 100%;
  height: 75px;
  background: #252737f5;
  backdrop-filter: blur(20px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-radius: 20px 20px 0 0;
  padding: 10px 8px max(7px, env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px #0003
}

.bottom-nav a {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
  color: #999bb8
}

.bottom-nav a>span {
  font-size: 27px;
  line-height: 30px
}

.bottom-nav a.active {
  color: var(--gold)
}

.bottom-nav .center-nav>span {
  background: linear-gradient(135deg, #bb4dff, #6c1cf9);
  color: #ffe58f;
  border: 5px solid #b561fb;
  box-shadow: 0 0 0 4px #2f263f, 0 0 25px #a63aff55;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translateY(-24px);
  margin-bottom: -24px;
  font-size: 36px
}

.help-float {
  position: fixed;
  left: calc(50% + 242px);
  bottom: 96px;
  width: 45px;
  height: 45px;
  background: #262434;
  border: 2px solid var(--gold);
  color: var(--gold);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 24px;
  z-index: 26
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: #0009
}

.drawer {
  position: fixed;
  left: max(0px, calc(50% - 320px));
  top: 0;
  bottom: 0;
  z-index: 40;
  background: #1d1d2b;
  width: 280px;
  padding: 25px;
  box-shadow: 10px 0 40px #0006
}

.drawer>div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  color: var(--gold);
  font-size: 27px
}

.drawer button {
  border: 0;
  background: transparent;
  font-size: 30px
}

.drawer>a {
  display: block;
  padding: 17px 0;
  border-bottom: 1px solid #343447
}

.drawer[hidden],
.drawer-backdrop[hidden] {
  display: none
}

@media(min-width:1000px) {
  body {
    background: radial-gradient(ellipse at top, #26213c, #0e0f16 70%)
  }

  .app {
    border-left: 1px solid #ffffff09;
    border-right: 1px solid #ffffff09
  }
}

@media(max-width:640px) {
  .help-float {
    left: auto;
    right: 17px
  }
}

@media(max-width:390px) {
  main {
    padding: 0 13px
  }

  .topbar {
    padding: 10px 13px;
    gap: 7px
  }

  .wordmark {
    font-size: 26px
  }

  .wordmark>span {
    font-size: 20px
  }

  .account {
    gap: 6px
  }

  .login,
  .gold {
    padding: 10px 12px;
    font-size: 12px
  }

  .banner {
    height: 256px
  }

  .banner-copy {
    left: 19px;
    top: 28px;
    width: 70%
  }

  h1 {
    font-size: 27px
  }

  .banner-copy p {
    font-size: 11px;
    max-width: 205px
  }

  .quick-links {
    gap: 14px 6px
  }

  .quick-links a>span {
    width: 57px;
    height: 57px
  }

  .section-heading h2 {
    font-size: 16px
  }

  .game-grid {
    gap: 16px 9px
  }

  .game-card h3 {
    font-size: 11px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  * {
    transition: none !important
  }
}

/* Nine standalone portrait covers */
.card-art {
  aspect-ratio: 3/4;
  border-radius: 14px
}

.card-art img {
  object-fit: contain
}

.hot-tag {
  position: absolute;
  top: 7px;
  left: 5px;
  background: #eb425e;
  color: white;
  border-radius: 12px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1
}

.card-art .tag {
  top: auto;
  bottom: 7px;
  left: 7px;
  background: #ffffff77;
  color: white;
  font-size: 9px;
  padding: 3px 5px;
  font-weight: bold
}

.game-card .favorite {
  z-index: 2;
  background: #29112c35;
  border-color: #fff7;
  color: white
}

.game-card h3 {
  font-size: 11px
}

.game-grid {
  gap: 13px 10px
}

@media(max-width:390px) {
  .hot-tag {
    font-size: 10px;
    padding: 4px 6px
  }

  .game-card .favorite {
    width: 24px;
    height: 24px;
    right: 4px;
    top: 4px;
    font-size: 16px
  }

  .game-card h3 {
    font-size: 10px
  }
}

.site-copyright {
  padding: 26px 12px 20px;
  text-align: center
}

.site-copyright .copyright-line {
  font-size: 11px;
  color: #b6afc5;
  line-height: 1.9;
  margin: 0 0 10px
}

.site-copyright .age-notice {
  font-size: 11px;
  line-height: 1.9;
  color: #d0bd9d;
  max-width: 460px;
  margin: 0 auto;
  letter-spacing: 0
}

.site-copyright .age-notice strong {
  display: inline-block;
  color: #ffe0a0;
  border: 1px solid #9e7b45;
  border-radius: 5px;
  padding: 0 5px;
  margin-right: 5px;
  font-size: 11px
}


/* Long-form home reading */
.batch-reading {
  margin: 20px 16px;
  padding: 22px;
  border: 1px solid rgba(236, 194, 101, .22);
  border-radius: 20px;
  background: linear-gradient(145deg, #251735, #161522);
  line-height: 1.85;
  color: #c8c4d4;
}
.batch-reading h2, .batch-reading h3 { color: #f1d58e; line-height: 1.4; }
.batch-reading h2 { font-size: 22px; }
.batch-reading h3 { font-size: 17px; margin-top: 24px; }
.batch-reading p { margin: 12px 0; }