/* CSGuessr homepage priority layout.
   Visual order only. No gameplay, auth, economy or case behavior. */

/* Keep the requested order visually stable even while older startup enhancers
   are still hydrating/retrying. CSS order applies to both flex and grid items. */
.page-home .home-stage-copy{order:10!important}
.page-home .home-rating-card{order:20!important}
.page-home .v33-mode-priority-heading{order:30!important}
.page-home .center-mode-grid{order:40!important}
.page-home .v33-home-account-tools{order:50!important}
.page-home .home-tools{order:60!important}

.page-home .home-rating-card.v33-home-rank-first{
  width:min(1120px,100%)!important;
  margin:18px auto 14px!important;
}

/* The comma in ratings such as 10,000 descends below the tight display-font
   line box. Reserve a clean gap before the stage label. */
.page-home .home-rating-card strong + span{
  margin-top:10px!important;
}

.page-home .v33-mode-priority-heading{
  margin-top:8px!important;
}

/* Trade Up, Sign Out and Progress Hub are one compact three-button row. */
.page-home .v33-home-account-tools{
  width:min(680px,100%)!important;
  margin:4px auto 14px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  align-items:stretch!important;
}
.page-home .v33-home-account-tools>.v18-home-auth,
.page-home .v33-home-account-tools>.v18-mini-tools{
  display:contents!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
}
.page-home .v33-home-account-tools>.v18-home-auth>button,
.page-home .v33-home-account-tools>.v18-mini-tools>button{
  box-sizing:border-box!important;
  width:100%!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  margin:0!important;
  padding:7px 12px!important;
  border-radius:8px!important;
  font-size:8px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.page-home .v33-home-account-tools>.v18-mini-tools>[data-v18-home="trade"]{order:1!important}
.page-home .v33-home-account-tools>.v18-home-auth>button{order:2!important}
.page-home .v33-home-account-tools>.v18-mini-tools>[data-v18-home="progress"]{order:3!important}

.page-home .home-tools.v33-home-feature-tools{
  width:min(1120px,100%);
  margin:0 auto 10px!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:10px!important;
  opacity:1!important;
}
.page-home .home-tools.v33-home-feature-tools>button{
  min-width:0;
}
.page-home .home-tools.v33-home-feature-tools>[data-v33-home-feature="leaderboard"]{
  border-color:color-mix(in srgb,var(--v332-gold,#f6c945) 28%,#34434d)!important;
}

@media(max-width:980px){
  .page-home .home-tools.v33-home-feature-tools{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media(max-width:760px){
  .page-home .home-rating-card.v33-home-rank-first{
    margin:12px auto 10px!important;
  }
  .page-home .home-tools.v33-home-feature-tools{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
}

@media(max-width:700px){
  .page-home .v33-home-account-tools{
    width:min(360px,100%)!important;
    grid-template-columns:1fr!important;
  }
}

@media(max-width:430px){
  .page-home .home-tools.v33-home-feature-tools{
    grid-template-columns:1fr!important;
  }
}