@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

body.stitch-page .material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  font-feature-settings: 'liga' !important;
  -webkit-font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
}

body.stitch-profile .pg-page,
body.stitch-progress .pg-page {
  margin-left: 60px !important;
  padding: 110px 0 48px !important;
  background: transparent !important;
}

body.stitch-profile .nexus-shell,
body.stitch-progress .nexus-shell {
  display: block !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

body.stitch-profile .nexus-main,
body.stitch-progress .nexus-main {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  padding: 48px 24px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

body.stitch-profile .nexus-main > .nexus-hero,
body.stitch-progress .nexus-main > .nexus-hero {
  display: block !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  height: 256px !important;
  min-height: 256px !important;
  max-height: 256px !important;
  margin: 0 0 24px !important;
  grid-column: 1 / -1 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

body.stitch-profile .nexus-hero-bg,
body.stitch-progress .nexus-hero-bg {
  background-image: url('../images/progress/hero_player.png') !important;
}

body.stitch-profile .nexus-hero-gold .nexus-hero-bg {
  background-image: url('../images/progress/hero_gold_player.png') !important;
}

body.stitch-leaderboard .leaderboard-hero-bg {
  background-image: url('../images/progress/hero_leaderboard.png') !important;
}

body.stitch-subscribe .gold-lounge-bg {
  background-image:
    linear-gradient(to bottom right, rgba(138,43,226,0.3), rgba(18,19,26,0.8), rgba(18,19,26,0.95)),
    radial-gradient(ellipse at top, rgba(255,215,0,0.15), transparent 45%),
    url('../images/progress/sub_background.png') !important;
}

body.stitch-profile .nexus-main > .nexus-grid,
body.stitch-progress .nexus-main > .nexus-grid {
  display: grid !important;
  clear: both !important;
  width: 100% !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 16px 24px !important;
  align-items: stretch !important;
}

body.stitch-profile .nexus-hero-content,
body.stitch-progress .nexus-hero-content {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 24px !important;
  padding: 24px !important;
  text-align: left !important;
}

body.stitch-profile .nexus-avatar-ring,
body.stitch-progress .nexus-avatar-ring {
  width: 128px !important;
  height: 128px !important;
}

body.stitch-profile .nexus-stats,
body.stitch-progress .nexus-stats {
  grid-column: 1 / span 8 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: auto !important;
}

body.stitch-profile .nexus-milestone,
body.stitch-progress .nexus-milestone {
  grid-column: 9 / span 4 !important;
  width: auto !important;
  min-width: 0 !important;
}

body.stitch-profile .nexus-activity,
body.stitch-progress .nexus-activity {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin-top: 16px !important;
}

body.stitch-profile .nexus-activity-grid,
body.stitch-progress .nexus-activity-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

body.stitch-profile .nexus-game-activity-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  color: inherit !important;
  text-decoration: none !important;
}

body.stitch-profile .nexus-game-activity-card[href] {
  cursor: pointer !important;
}

body.stitch-profile .nexus-game-activity-card[href]:hover .nexus-activity-body h4 {
  color: var(--st-cyan) !important;
}

body.stitch-profile .nexus-game-thumb {
  overflow: hidden !important;
  padding: 0 !important;
}

body.stitch-profile .nexus-game-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

body.stitch-profile .nexus-bottom-link,
body.stitch-progress .nexus-bottom-link {
  display: block !important;
  width: 100% !important;
  margin: 24px 0 0 !important;
  text-align: center !important;
}

body.stitch-devices .pg-page {
  margin-left: 60px !important;
  min-height: 100vh !important;
  padding: 110px 24px 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}

body.stitch-devices .device-manager {
  display: block !important;
  width: 100% !important;
  max-width: 1024px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.stitch-devices .device-manager-header {
  display: block !important;
  width: 100% !important;
  margin: 0 0 48px !important;
  text-align: center !important;
}

body.stitch-devices .device-manager-grid {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 32px !important;
  align-items: stretch !important;
}

body.stitch-devices .device-status-panel {
  grid-column: 1 / span 1 !important;
}

body.stitch-devices .linked-devices-panel {
  grid-column: 2 / span 2 !important;
  min-height: 420px !important;
}

@media (max-width: 976px) {
  body.stitch-profile .pg-page,
  body.stitch-progress .pg-page,
  body.stitch-devices .pg-page {
    margin-left: 0 !important;
    padding-top: 90px !important;
  }
}

@media (max-width: 980px) {
  body.stitch-profile .nexus-stats,
  body.stitch-progress .nexus-stats,
  body.stitch-profile .nexus-milestone,
  body.stitch-progress .nexus-milestone,
  body.stitch-profile .nexus-activity,
  body.stitch-progress .nexus-activity {
    grid-column: 1 / -1 !important;
  }

  body.stitch-devices .device-manager-grid {
    grid-template-columns: 1fr !important;
  }

  body.stitch-devices .device-status-panel,
  body.stitch-devices .linked-devices-panel {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  body.stitch-profile .nexus-main,
  body.stitch-progress .nexus-main {
    padding: 16px !important;
  }

  body.stitch-profile .nexus-main > .nexus-hero,
  body.stitch-progress .nexus-main > .nexus-hero {
    height: 360px !important;
    min-height: 360px !important;
    max-height: none !important;
  }

  body.stitch-profile .nexus-hero-content,
  body.stitch-progress .nexus-hero-content {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    text-align: center !important;
  }

  body.stitch-profile .nexus-avatar-ring,
  body.stitch-progress .nexus-avatar-ring {
    width: 104px !important;
    height: 104px !important;
  }

  body.stitch-profile .nexus-stats,
  body.stitch-progress .nexus-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.stitch-profile .nexus-activity-grid,
  body.stitch-progress .nexus-activity-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  body.stitch-profile .nexus-stats,
  body.stitch-progress .nexus-stats {
    grid-template-columns: 1fr !important;
  }

  body.stitch-devices .pg-page {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}