:root { color-scheme: dark; font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif; background: #01060a; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: #01060a; }
button, a { font: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.desktop-portal { min-height: 100vh; }
.desktop-canvas { position: relative; width: 100%; aspect-ratio: 8001 / 4501; }
.desktop-artwork { display: block; width: 100%; height: auto; }
.desktop-card { position: absolute; padding: 0; border: 0; border-radius: 24px; color: transparent; background: transparent; text-decoration: none; }
a.desktop-card { cursor: pointer; }
button.desktop-card { cursor: not-allowed; }
.desktop-card:not([disabled]):hover, .desktop-card:not([disabled]):focus-visible { outline: 2px solid #c9e3f0; outline-offset: 4px; }
.mobile-portal { display: none; }

@media (max-width: 700px) {
  .desktop-portal { display: none; }
  .mobile-portal { position: relative; display: block; min-height: 100svh; overflow: hidden; background: #01060a url('assets/portal-bg.jpg') 50% 0 / auto 100svh no-repeat; }
  .mobile-header { position: relative; z-index: 2; padding: 24px 22px 0; }
  .sprite { position: relative; display: block; overflow: hidden; aspect-ratio: var(--sprite-ratio); }
  .sprite img { position: absolute; display: block; max-width: none; height: auto; }
  .mobile-logo { width: 200px; max-width: 72%; }
  .mobile-values { display: flex; max-width: 370px; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-top: 18px; color: #dfeaf4; font-size: 7px; font-weight: 600; letter-spacing: .09em; white-space: nowrap; }
  .mobile-platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; padding: 56px 22px 44px; }
  .mobile-card { display: block; min-width: 0; width: 100%; overflow: hidden; padding: 0; border: 0; border-radius: 18px; background: transparent; }
  a.mobile-card { cursor: pointer; }
  button.mobile-card { cursor: not-allowed; opacity: .78; }
  .mobile-card:last-child { grid-column: 1 / -1; width: calc((100% - 18px) / 2); justify-self: center; }
  .mobile-card:not([disabled]):focus-visible { outline: 2px solid #d9efff; outline-offset: 4px; }
}

@media (max-width: 390px) {
  .mobile-header { padding: 22px 18px 0; }
  .mobile-logo { width: 180px; }
  .mobile-values { gap: 10px 14px; }
  .mobile-platforms { gap: 16px 12px; padding: 44px 16px 36px; }
  .mobile-card:last-child { width: calc((100% - 12px) / 2); }
}

@media (prefers-reduced-motion: no-preference) {
  a.mobile-card { transition: transform 160ms ease, filter 160ms ease; }
  a.mobile-card:hover { transform: translateY(-3px); filter: brightness(1.06); }
}