:root {
  --deep-space: #0d1326;
  --surface: #151b33;
  --surface-2: #1a2238;
  --border: rgba(45, 123, 255, 0.18);
  --text: #f2f4f8;
  --text-muted: #8b93a7;
  --fresh-blue: #2d7bff;
  --gradient-brand: linear-gradient(
    90deg,
    #5b36f6 0%,
    #ff4ec4 25%,
    #ffb020 50%,
    #30d256 75%,
    #2d7bff 100%
  );
  --font-sans: "Nunito", "Noto Sans SC", "PingFang SC", "Microsoft YaHei",
    sans-serif;
  --nav-h: 4.25rem;
  --max: 68rem;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 0.75rem);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--deep-space);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  backdrop-filter: blur(14px);
  background: rgba(13, 19, 38, 0.82);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  width: min(100% - 2rem, var(--max));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.brand-lockup {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand-lockup img {
  height: 2rem;
  width: auto;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  margin-left: auto;
  font-size: 0.95rem;
  font-weight: 600;
}

.nav a {
  color: var(--text-muted);
  transition: color 0.15s ease;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--text);
}

.nav__lang {
  color: var(--fresh-blue);
}

.nav__dev {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
}

.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  display: grid;
  align-items: end;
  isolation: isolate;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

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

.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgba(13, 19, 38, 0.35) 0%,
      rgba(13, 19, 38, 0.55) 42%,
      rgba(13, 19, 38, 0.96) 100%
    ),
    radial-gradient(
      ellipse 80% 55% at 70% 20%,
      rgba(91, 54, 246, 0.28),
      transparent 70%
    );
}

.hero__content {
  width: min(100% - 2rem, var(--max));
  margin: 0 auto;
  padding: 4.5rem 0 3.5rem;
}

.hero__brand {
  margin: 0 0 1rem;
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__slogan {
  margin: 0 0 0.75rem;
  font-size: clamp(1.55rem, 3.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  max-width: 18ch;
}

.hero__tagline {
  margin: 0 0 1.75rem;
  color: var(--text-muted);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  max-width: 28ch;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.btn--primary {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: 0 10px 30px rgba(91, 54, 246, 0.28);
}

.section {
  padding: 4.5rem 0;
}

.section__inner {
  width: min(100% - 2rem, var(--max));
  margin-inline: auto;
}

.section__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.section__lead {
  margin: 0 0 2rem;
  color: var(--text-muted);
  max-width: 42rem;
}

.section--alt {
  background: linear-gradient(
    180deg,
    rgba(21, 27, 51, 0.55),
    rgba(13, 19, 38, 0)
  );
}

.steps {
  display: grid;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

@media (min-width: 720px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.steps li {
  counter-increment: step;
  padding: 1.25rem 1.25rem 1.4rem;
  border-radius: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
}

.steps li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.85rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
  background: var(--gradient-brand);
  color: #fff;
}

.steps h3 {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
}

.steps p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.98rem;
}

.game-strip {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .game-strip {
    grid-template-columns: minmax(0, 22rem);
  }
}

.game-tile {
  display: grid;
  gap: 0.75rem;
}

.game-tile__cover {
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
}

.game-tile__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-tile h3 {
  margin: 0;
  font-size: 1.15rem;
}

.game-tile p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.download-panel {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  max-width: 36rem;
}

.download-panel__badge {
  display: inline-flex;
  width: fit-content;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  background: rgba(45, 123, 255, 0.16);
  color: #9ec0ff;
}

.download-panel ul {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--text-muted);
}

.about-copy {
  margin: 0;
  max-width: 40rem;
  color: var(--text-muted);
  font-size: 1.08rem;
}

.site-footer {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.9rem;
}

.site-footer__inner {
  width: min(100% - 2rem, var(--max));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 720px) {
  .nav {
    gap: 0.25rem 0.75rem;
    font-size: 0.88rem;
  }

  .brand-lockup img {
    height: 1.65rem;
  }
}

/* ===== Legal pages (privacy policy) ===== */
.legal {
  padding: 3.5rem 0 4.5rem;
}

.legal__inner {
  width: min(100% - 2rem, 52rem);
  margin-inline: auto;
}

.legal__kicker {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ec0ff;
}

.legal h1 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.legal__meta {
  margin: 0 0 2.5rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.legal__updated {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.legal h2 {
  margin: 2.2rem 0 0.6rem;
  font-size: 1.25rem;
  font-weight: 800;
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}

.legal h3 {
  margin: 1.4rem 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.legal p,
.legal li {
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.7;
}

.legal p {
  margin: 0 0 0.9rem;
}

.legal ul,
.legal ol {
  margin: 0 0 1rem;
  padding-left: 1.35rem;
}

.legal li {
  margin: 0 0 0.45rem;
}

.legal strong {
  color: var(--text);
  font-weight: 700;
}

.legal .legal__note {
  padding: 0.9rem 1.1rem;
  border-radius: 0.9rem;
  background: rgba(45, 123, 255, 0.08);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 1.2rem 0;
}

.legal .legal__toc {
  padding: 1.25rem 1.5rem;
  border-radius: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  margin: 0 0 2.2rem;
}

.legal .legal__toc h2 {
  margin: 0 0 0.6rem;
}

.legal .legal__toc ol {
  margin: 0;
  padding-left: 1.2rem;
}

.legal .legal__toc li {
  margin-bottom: 0.3rem;
}

.legal .legal__toc a {
  color: #9ec0ff;
  transition: color 0.15s ease;
}

.legal .legal__toc a:hover,
.legal .legal__toc a:focus-visible {
  color: var(--text);
}

.legal__contact {
  padding: 1.25rem 1.5rem;
  border-radius: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  margin-top: 1rem;
}

.legal__contact p {
  margin: 0 0 0.35rem;
}

.legal__contact a {
  color: #9ec0ff;
  transition: color 0.15s ease;
}

.legal__contact a:hover,
.legal__contact a:focus-visible {
  color: var(--text);
}

/* ===== Bare mode (embedded in the app's legal dialog) ===== */
html.body--bare .site-header,
html.body--bare .site-footer {
  display: none;
}

html.body--bare .legal {
  padding-top: 1.5rem;
}

/* ===== OAuth bounce (Google / Apple callback) ===== */
.oauth-bounce {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 50% 55% at 88% 78%, rgba(255, 78, 196, 0.16), transparent 55%),
    radial-gradient(ellipse 42% 48% at 8% 12%, rgba(91, 54, 246, 0.22), transparent 50%),
    var(--deep-space);
}

.oauth-bounce__header {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--border);
  background: rgba(13, 19, 38, 0.72);
  backdrop-filter: blur(14px);
}

.oauth-bounce__main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem 3rem;
}

.oauth-bounce__card {
  width: min(100%, 28rem);
  padding: 2rem 1.75rem 1.75rem;
  border-radius: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.oauth-bounce__card::before {
  content: "";
  display: block;
  height: 4px;
  margin: -2rem -1.75rem 1.5rem;
  border-radius: 1.25rem 1.25rem 0 0;
  background: var(--gradient-brand);
}

.oauth-bounce h1 {
  margin: 0 0 0.65rem;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.oauth-bounce__lead {
  margin: 0 0 1.35rem;
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.55;
}

.oauth-bounce .btn {
  width: 100%;
}
/* ===== Shared nav / button additions ===== */
.nav__active {
  color: var(--text);
}
.nav__active:hover,
.nav__active:focus-visible {
  color: var(--text);
}

.btn--secondary {
  background: rgba(45, 123, 255, 0.14);
  color: #fff;
  border: 1px solid var(--border);
}
.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  color: var(--text);
  filter: none;
  transform: none;
}
.btn--disabled {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: default;
  pointer-events: none;
}
.btn[disabled] {
  opacity: 0.55;
  cursor: default;
  transform: none;
  filter: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  background: rgba(45, 123, 255, 0.14);
  color: #9ec0ff;
  border: 1px solid transparent;
}
.pill--active {
  background: rgba(45, 123, 255, 0.16);
  color: #9ec0ff;
}
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0;
}
.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1.5rem;
}

/* ===== Store page ===== */
.store-hero {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.store-banner {
  position: relative;
  min-height: clamp(14rem, 34vw, 22rem);
  display: flex;
  align-items: end;
  isolation: isolate;
}
.store-banner img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.store-banner__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(13,19,38,0.2) 0%, rgba(13,19,38,0.9) 100%);
}
.store-banner__content {
  width: min(100% - 2rem, var(--max));
  margin-inline: auto;
  padding: 2.4rem 0 2.2rem;
}
.store-banner__content h1 {
  margin: 0;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.45);
}
.store-empty {
  color: var(--text-muted);
  padding: 1.5rem 0;
}
.store-error {
  padding: 3rem 1rem;
}
.section__title + .store-section,
.store-section {
  margin-bottom: 2.5rem;
}
.game-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 520px) {
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.game-card {
  display: block;
  border-radius: 1.1rem;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.game-card:hover,
.game-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(45, 123, 255, 0.5);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}
.game-card__cover {
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.game-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.game-card__ph {
  color: var(--text-muted);
  font-size: 1.4rem;
  font-weight: 800;
}
.game-card__body {
  padding: 0.85rem 1rem 1rem;
  display: grid;
  gap: 0.4rem;
}
.game-card__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}
.game-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.88rem;
}
.game-card__price {
  color: #9ec0ff;
  font-weight: 700;
}
.game-card__heat {
  color: var(--text-muted);
  font-size: 0.85rem;
}
.sort-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.sort-pill {
  cursor: pointer;
}
.sort-pill.is-active {
  background: var(--gradient-brand);
  color: #fff;
}
.store-empty-grid {
  grid-column: 1 / -1;
}

/* ===== Game detail page ===== */
.game-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.game-breadcrumb a { color: #9ec0ff; }
.game-breadcrumb a:hover { color: var(--text); }
.crumb-sep { opacity: 0.5; }
.crumb-current { color: var(--text); }
.game-hero {
  display: grid;
  gap: 1.25rem;
  padding: 1.5rem;
  border-radius: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
}
@media (min-width: 720px) {
  .game-hero { grid-template-columns: auto 1fr; }
}
.game-hero__icon {
  width: clamp(8rem, 16vw, 12rem);
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.game-hero__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.game-hero__icon span {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text-muted);
}
.game-hero__title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.game-hero__title-row h1 {
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.game-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin-top: 0.75rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.game-layout {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
@media (min-width: 960px) {
  .game-layout { grid-template-columns: minmax(0, 1fr) 22rem; }
}
.game-main {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}
.game-aside {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}
.aside-card {
  padding: 1.25rem;
  border-radius: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
}
.aside-card--cta { }
.price {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 0.9rem;
}
.game-cta {
  display: grid;
  gap: 0.75rem;
}
.game-cta .btn { width: 100%; }
.game-cta__hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}
.game-media,
.game-intro,
.game-reviews,
.game-purchases {
  display: grid;
  gap: 0.9rem;
  padding: 1.25rem;
  border-radius: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
}
.game-media h3,
.game-intro h3,
.game-reviews h3,
.game-purchases h3 {
  margin: 0;
  font-size: 1.05rem;
}
.game-media__stage {
  aspect-ratio: 16 / 9;
  border-radius: 0.9rem;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.game-media__stage img,
.game-media__stage video,
.game-media__stage iframe {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
}
.game-thumbs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
}
.game-thumb {
  flex: 0 0 auto;
  width: 6rem;
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  padding: 0;
  position: relative;
}
.game-thumb img { width: 100%; height: 100%; object-fit: cover; }
.game-thumb.is-active { border-color: var(--fresh-blue); }
.game-thumb__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  background: rgba(0,0,0,0.35);
}
.game-intro p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.7;
  white-space: pre-wrap;
}
.game-intro h3 + p { margin-top: 0; }
.rating-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rating-avg { font-size: 1.6rem; font-weight: 800; }
.rating-stars { color: #ffb020; letter-spacing: 0.05em; }
.rating-count { color: var(--text-muted); }
.dist { display: grid; gap: 0.35rem; }
.dist-row { display: grid; grid-template-columns: 1.4rem 1fr 2rem; gap: 0.5rem; align-items: center; font-size: 0.9rem; }
.dist-star { color: #ffb020; }
.dist-track { height: 0.4rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.dist-fill { display: block; height: 100%; background: var(--gradient-brand); border-radius: 999px; }
.dist-count { color: var(--text-muted); text-align: right; }
.review-list { display: grid; gap: 0.9rem; }
.review-item { padding-top: 0.25rem; }
.review-item__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.review-item__id { display: flex; align-items: center; gap: 0.5rem; }
.avatar {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #5b36f6, #ff4ec4);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  flex: 0 0 auto;
}
.review-item__name { font-weight: 700; }
.review-item__stars { color: #ffb020; letter-spacing: 0.05em; }
.review-item__body { margin: 0.4rem 0 0; color: var(--text-muted); line-height: 1.6; }
.muted { margin: 0; color: var(--text-muted); }
.purchase-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
}
.purchase-meta { display: grid; gap: 0.15rem; }
.purchase-name { font-weight: 700; font-size: 0.95rem; }
.purchase-date { color: var(--text-muted); font-size: 0.85rem; }
.purchase-check { margin-left: auto; color: #30d256; font-weight: 800; }
.fab-btn { width: 100%; margin-top: 0.5rem; }

/* ===== Modals ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(6, 10, 22, 0.72);
}
.modal[hidden] { display: none; }
.modal__card {
  position: relative;
  width: min(100%, 30rem);
  max-height: 82vh;
  overflow: auto;
  padding: 1.5rem;
  border-radius: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.modal__card h3 { margin: 0 0 0.75rem; font-size: 1.1rem; }
.modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
}
.feed-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
}
.feed-date { color: var(--text-muted); font-size: 0.85rem; }
.launch-card { text-align: center; }
.launch-card p { color: var(--text-muted); line-height: 1.6; }
.launch-actions {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

/* ===== Download page ===== */
.dl-header { margin-bottom: 2rem; }
.dl-header .hero__brand { margin-bottom: 0.5rem; }
.download-grid {
  display: grid;
  gap: 1rem;
  margin: 1.25rem 0 1.5rem;
}
@media (min-width: 520px) {
  .download-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .download-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.download-card {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem;
  border-radius: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  align-content: start;
}
.download-card h3 { margin: 0; font-size: 1.1rem; }
.download-card__meta { margin: 0; color: var(--text-muted); font-size: 0.9rem; }
.download-arch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-top: 0.5rem;
}
.download-arch__name { font-weight: 700; }
.download-arch__actions { display: flex; align-items: center; gap: 0.6rem; }
.download-arch__actions .btn { min-height: 2.4rem; padding: 0.45rem 0.9rem; font-size: 0.9rem; }
.download-meta { color: var(--text-muted); font-size: 0.82rem; }
.store-badge { color: var(--text-muted); font-size: 0.9rem; }
.dl-changelog {
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  border-radius: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
}
.dl-changelog h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.dl-changelog p { margin: 0; color: var(--text-muted); white-space: pre-wrap; }

.dl-note {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  border-radius: 0.9rem;
  background: rgba(45, 123, 255, 0.08);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* ===== Store search box ===== */
.store-search-section {
  padding: 1.5rem 0 1.25rem;
}
.store-search {
  display: flex;
  gap: 0.6rem;
  max-width: 34rem;
}
.store-search input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
}
.store-search input::placeholder {
  color: var(--text-muted);
}
.store-search input:focus {
  outline: none;
  border-color: var(--fresh-blue);
}

/* ===== Game list page ===== */
.game-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1rem 0 1.25rem;
}
.game-list-count {
  color: var(--text-muted);
  font-size: 0.95rem;
}
.game-list-sort {
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
}
.game-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 1.75rem 0 0.5rem;
}
.game-pager__info {
  color: var(--text-muted);
  font-size: 0.92rem;
}

.game-pager .btn[disabled] {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* ===== Game list filter bar ===== */
.catalog-filter-bar {
  display: grid;
  gap: 0.6rem;
  margin: 0.9rem 0 1.1rem;
}
.catalog-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.catalog-filter-label {
  min-width: 3.4rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.catalog-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.catalog-pill-row .pill {
  cursor: pointer;
}
.catalog-filter-select {
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  max-width: 14rem;
}
.catalog-clear {
  background: transparent;
  border: none;
  color: #9ec0ff;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
}
.catalog-clear:hover {
  color: var(--text);
}
/* Selected filter / sort / current page pill — clear highlight. */
.catalog-pill-row .pill--active,
.game-pager .pill--active {
  background: var(--gradient-brand);
  color: #fff;
  border-color: transparent;
}
.game-pager .pill[disabled] {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.game-pager .pill {
  cursor: pointer;
}

/* ===== Homepage "browse the full store" card ===== */
.game-card--more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  min-height: 100%;
  padding: 1.25rem;
  border-style: dashed;
  border-color: rgba(45, 123, 255, 0.4);
  background: transparent;
}
.game-card--more:hover,
.game-card--more:focus-visible {
  transform: translateY(-2px);
  border-color: var(--fresh-blue);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}
.game-card__more-icon {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 999px;
  background: var(--gradient-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
}
.game-card__more-label {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}
.game-card__more-sub {
  font-size: 0.9rem;
  color: var(--text-muted);
}