/*
 * Gamers & Collectors
 * Cloudflare Production Mobile Polish — Consolidated Pass
 *
 * Scope:
 * 1. Login/auth header density
 * 2. Game page phone density
 * 3. Members Hub mobile width
 * 4. Profile active-rotation readability
 * 5. Browse Games mobile catalogue density
 *
 * Desktop layouts are intentionally left unchanged.
 */


/******************************************************
 * 1. Authentication — compact phone header
 ******************************************************/

@media (max-width: 520px){

  .authPage header > .container{
    padding:
      max(8px, env(safe-area-inset-top))
      14px
      0;
  }

  .authPage .appShell > .container{
    padding:
      0
      14px
      calc(28px + env(safe-area-inset-bottom));
  }

  .authPage .appHeader{
    padding:
      0
      0
      4px;
  }

  .authPage .appLogo{
    width:
      min(176px, 44vw);

    height:
      auto;

    margin:
      0
      auto
      3px;
  }

  .authPage .title{
    font-size:
      clamp(23px, 6vw, 27px);

    line-height:
      1.04;

    letter-spacing:
      -0.03em;
  }

  .authPage .subtitle{
    max-width:
      300px;

    margin:
      4px
      auto
      0;

    font-size:
      12px;

    line-height:
      1.35;
  }

  .authPage .headerDivider{
    width:
      64%;

    margin-top:
      8px;
  }

  .authPage .flowNavigation{
    margin-bottom:
      10px;
  }

  .authPage .authHomeLink.navButton{
    gap:
      6px;

    padding:
      7px
      10px;

    font-size:
      12px;
  }

  .authPage .authHomeIcon{
    width:
      17px;

    height:
      17px;
  }

}

@media (max-width: 390px){

  .authPage .appLogo{
    width:
      min(160px, 42vw);
  }

  .authPage .title{
    font-size:
      23px;
  }

}


/******************************************************
 * 2. Individual Game — tighter phone hero
 ******************************************************/

@media (max-width: 520px){

  body.gameDetailPage{
    scroll-padding-bottom:
      calc(118px + env(safe-area-inset-bottom));
  }

  .gameDetailPage .container{
    padding-left:
      10px;

    padding-right:
      10px;

    padding-bottom:
      calc(122px + env(safe-area-inset-bottom));
  }

  .gameDetailPage .gameHeroIdentity{
    grid-template-columns:
      92px
      minmax(0, 1fr);

    gap:
      12px;

    padding:
      14px;
  }

  .gameDetailPage .gameHeroCoverButton,
  .gameDetailPage .gameHeroCover{
    width:
      92px;
  }

  .gameDetailPage .gameHeroCover{
    height:
      129px;
  }

  .gameDetailPage .gameHeroTitleRow{
    gap:
      7px;
  }

  .gameDetailPage .gameHeroTitle{
    font-size:
      clamp(20px, 5.5vw, 23px);

    line-height:
      1.06;

    letter-spacing:
      -0.035em;

    overflow-wrap:
      normal;

    word-break:
      normal;
  }

  .gameDetailPage .gameHeroCreators{
    gap:
      4px;

    margin-top:
      6px;

    font-size:
      10px;
  }

  .gameDetailPage .gameHeroTitleRow .gameRating{
    width:
      48px;

    min-width:
      48px;

    height:
      48px;

    padding:
      5px;

    border-radius:
      13px;
  }

  .gameDetailPage .gameHeroTitleRow .gameRatingScore{
    font-size:
      18px;
  }

  .gameDetailPage .gameHeroMetaStrip{
    min-height:
      54px;

    gap:
      8px;

    margin-top:
      10px;

    padding:
      8px
      10px;
  }

  .gameDetailPage .gameHeroPlatformSection{
    padding:
      10px
      14px;
  }

  .gameDetailPage .gameHeroCollectionSection{
    padding:
      11px
      14px
      14px;
  }

  .gameDetailPage .gameHeroCollectionSection .heroActions{
    gap:
      6px;
  }

  .gameDetailPage .gameHeroCollectionSection .gameActionBtn{
    min-height:
      52px;

    padding:
      6px
      2px;

    font-size:
      8px;
  }

  .gameDetailPage #gameTabs{
    margin-top:
      11px;
  }

}


/******************************************************
 * 3. Members Hub — use the phone width properly
 ******************************************************/

@media (max-width: 620px){

  .gcMembersContainer{
    width:
      calc(100% - 12px);
  }

  .gcMembersToolbar{
    gap:
      8px;

    padding:
      7px;

    border-radius:
      19px;
  }

  .gcMembersToolbarTop{
    gap:
      7px;
  }

  .gcMembersSearch{
    width:
      100%;

    height:
      46px;

    padding:
      0
      12px;

    border-radius:
      13px;
  }

  .gcMembersClearFilters{
    min-height:
      44px;
  }

  .gcMembersFilterGrid{
    gap:
      7px;
  }

  .gcMembersFilter{
    height:
      42px;

    padding:
      0
      10px;
  }

  .gcMembersResultMeta{
    margin-bottom:
      9px;
  }

  .gcMembersState{
    min-height:
      210px;

    padding:
      26px
      16px;

    border-radius:
      22px;
  }

  .gcMembersStateOrb{
    width:
      72px;

    height:
      72px;

    margin-bottom:
      13px;

    border-radius:
      21px;
  }

  .gcMembersState h2{
    font-size:
      20px;
  }

}


/******************************************************
 * 4. Profile active rotation — readable mobile cards
 ******************************************************/

@media (max-width: 620px){

  .gcProfileGameGrid{
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      10px;
  }

  .gcProfileGameBody{
    padding:
      9px;
  }

  .gcProfileGameTitle{
    min-height:
      30px;

    display:
      -webkit-box;

    overflow:
      hidden;

    font-size:
      11px;

    line-height:
      1.35;

    text-overflow:
      clip;

    white-space:
      normal;

    -webkit-box-orient:
      vertical;

    -webkit-line-clamp:
      2;
  }

  .gcProfileGameMeta{
    min-height:
      25px;

    display:
      -webkit-box;

    overflow:
      hidden;

    margin-top:
      5px;

    font-size:
      9px;

    line-height:
      1.35;

    text-overflow:
      clip;

    white-space:
      normal;

    -webkit-box-orient:
      vertical;

    -webkit-line-clamp:
      2;
  }

}


/******************************************************
 * 5. Browse Games — compact mobile catalogue
 ******************************************************/

@media (max-width: 600px){

  .browseGamesPage .browseGamesContainer{
    padding-left:
      10px;

    padding-right:
      10px;
  }

  .browseGamesPage .pageSubtitle{
    margin-bottom:
      14px;
  }

  .browseGamesPage .browseControls{
    margin:
      10px
      0
      14px;
  }

  .browseGamesPage .browseFilterRow{
    width:
      100%;

    display:
      flex;

    flex-wrap:
      wrap;

    gap:
      6px;

    margin:
      0;

    padding:
      0;

    overflow:
      visible;
  }

  .browseGamesPage .browseFilterDivider{
    display:
      none;
  }

  .browseGamesPage .browseFilter{
    min-height:
      34px;

    padding:
      0
      10px;

    font-size:
      10px;
  }

  .browseActiveFilters{
    min-height:
      22px;

    gap:
      5px;

    margin-top:
      8px;
  }

  .browseSortShell{
    margin-top:
      8px;
  }

  .browseGamesPage .browseSort{
    min-height:
      40px;
  }

  /*
   * Phone cards become compact catalogue rows.
   * This keeps cover art visible without allowing giant
   * portrait images to dominate the viewport.
   */
  .browseGamesPage .browseResults{
    grid-template-columns:
      1fr;

    gap:
      10px;
  }

  .browseGamesPage .gameHubCard{
    min-height:
      132px;

    display:
      flex;

    flex-direction:
      row;

    align-items:
      stretch;

    border-radius:
      16px;
  }

  .browseGamesPage .browseCoverShell{
    width:
      94px;

    min-width:
      94px;

    flex:
      0
      0
      94px;

    aspect-ratio:
      .716;
  }

  .browseGamesPage .gameHubInfo{
    min-width:
      0;

    padding:
      10px
      11px;
  }

  .browseGamesPage .gameHubTitle{
    min-height:
      0;

    font-size:
      13px;

    line-height:
      1.24;
  }

  .browseGamesPage .gameHubDeveloper{
    min-height:
      0;

    margin-top:
      4px;

    font-size:
      10px;

    line-height:
      1.3;
  }

  .browseGamesPage .gameHubMeta{
    margin-top:
      6px;
  }

  .browseGamesPage .browseReleaseMeta{
    padding:
      4px
      7px;

    font-size:
      8px;
  }

  .browseGamesPage .gameHubPlatforms{
    gap:
      4px;

    padding-top:
      6px;
  }

  .browseGamesPage .browsePlatformIcon{
    width:
      26px;

    height:
      24px;
  }

}

@media (max-width: 380px){

  .browseGamesPage .browseCoverShell{
    width:
      86px;

    min-width:
      86px;

    flex-basis:
      86px;
  }

}


/******************************************************
 * V3 follow-up — auth, browse, favourites, Admin mobile
 ******************************************************/

/*
 * AUTH
 * The first consolidated pass still left too much vertical
 * space on iPhone. This second pass deliberately makes the
 * brand/header and Korma guidance much more compact.
 */
@media (max-width: 520px){

  .authPage .appLogo{
    width:min(122px,30vw);
    margin:0 auto 2px;
  }

  .authPage .title{
    font-size:clamp(21px,5.5vw,24px);
  }

  .authPage .subtitle{
    margin-top:3px;
    font-size:11px;
  }

  .authPage .headerDivider{
    width:54%;
    margin-top:6px;
  }

  .authPage .flowNavigation{
    margin-bottom:7px;
  }

  .authPage .kormaCard{
    min-height:108px;
    grid-template-columns:78px minmax(0,1fr);
    margin:7px 0 10px;
    padding:8px;
    border-radius:18px;
  }

  .authPage .kormaAvatar{
    width:92px;
    margin:0 -10px -8px -7px;
  }

  .authPage .kormaSpeech{
    min-height:90px;
    padding:11px 12px 11px 14px;
    border-radius:15px;
  }

  .authPage .kormaName{
    font-size:16px;
  }

  .authPage .kormaTitle{
    margin:3px 0 5px;
    font-size:8px;
  }

  .authPage .kormaSpeech p{
    font-size:12px;
    line-height:1.42;
  }

  .authPage .card{
    padding:14px 13px;
    border-radius:18px;
  }

  .authPage .registrationProgress{
    margin-bottom:15px;
  }

  .authPage .identityResults{
    min-height:112px;
    max-height:235px;
    margin-top:10px;
  }

  .authPage .authContentSpacer{
    min-height:24px;
  }

  .authPage .btn{
    min-height:48px;
    margin-bottom:9px;
    padding:12px 15px;
    border:1px solid rgba(111,230,239,.20);
    border-radius:14px;
    background:
      linear-gradient(135deg,#25b6c8 0%,#49d6e5 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      0 10px 24px rgba(20,177,196,.16);
    color:#032129;
    font-size:14px;
    font-weight:900;
    letter-spacing:.01em;
  }

  .authPage .btn:not(:disabled):active{
    transform:translateY(1px) scale(.99);
  }

  .authPage .btn:disabled{
    border-color:rgba(111,230,239,.08);
    background:rgba(26,132,146,.48);
    box-shadow:none;
    color:rgba(222,247,250,.58);
    opacity:1;
  }

}


/*
 * BROWSE GAMES
 * Keep the improved wrapped filters, but restore the more
 * natural cover-above-details card structure on phones.
 */
@media (max-width: 600px){

  .browseGamesPage .browseResults{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .browseGamesPage .gameHubCard{
    min-height:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    border-radius:16px;
  }

  .browseGamesPage .browseCoverShell{
    width:100%;
    min-width:0;
    height:clamp(150px,41vw,184px);
    flex:0 0 auto;
    aspect-ratio:auto;
  }

  .browseGamesPage .gameHubInfo{
    padding:8px 9px 10px;
  }

  .browseGamesPage .gameHubTitle{
    min-height:31px;
    font-size:12px;
    line-height:1.26;
  }

  .browseGamesPage .gameHubDeveloper{
    min-height:23px;
    margin-top:3px;
    font-size:9px;
    line-height:1.3;
  }

  .browseGamesPage .gameHubMeta{
    margin-top:5px;
  }

  .browseGamesPage .browseReleaseMeta{
    padding:4px 6px;
    font-size:7.5px;
  }

  .browseGamesPage .gameHubPlatforms{
    gap:4px;
    padding-top:5px;
  }

  .browseGamesPage .browsePlatformIcon{
    width:24px;
    height:22px;
  }

}


/*
 * PROFILE FAVOURITES
 * Favourite Games are capped at three, so use one fixed
 * three-card row on mobile instead of wrapping card #3.
 */
@media (max-width: 620px){

  .gcProfileAreaFavourite .gcProfileGameGrid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    max-width:none;
  }

  .gcProfileAreaFavourite .gcProfileGameBody{
    padding:6px;
  }

  .gcProfileAreaFavourite .gcProfileGameTitle{
    min-height:25px;
    font-size:9px;
    line-height:1.3;
    -webkit-line-clamp:2;
  }

  .gcProfileAreaFavourite .gcProfileGameMeta{
    min-height:0;
    margin-top:3px;
    font-size:7.5px;
    line-height:1.25;
    -webkit-line-clamp:1;
  }

}


/*
 * ADMIN DASHBOARD — logical ordering
 *
 * No JavaScript reorder is required: CSS Grid honours the
 * `order` property. Platform Status is also moved beneath
 * Quick Actions via :has(), which is supported by current
 * iOS Safari.
 */
.adminDashboardPage #adminDashboard{
  display:flex;
  flex-direction:column;
}

.adminDashboardPage #adminDashboard > .adminIdentityCard{
  order:1;
}

.adminDashboardPage #adminDashboard > .adminDashboardSection:has(.adminActionGrid){
  order:2;
}

.adminDashboardPage #adminDashboard > .adminDashboardSection:has(.adminOverviewGrid){
  order:3;
}

.adminDashboardPage #adminDashboard > .adminDashboardSection:has(.adminActivityCard){
  order:4;
}

.adminDashboardPage #adminActionMembers{order:1;}
.adminDashboardPage #adminActionApplications{order:2;}
.adminDashboardPage #adminActionGames{order:3;}
.adminDashboardPage #adminActionAnnouncements{order:4;}
.adminDashboardPage #adminActionEvents{order:5;}
.adminDashboardPage #adminActionMemberChanges{order:6;}
.adminDashboardPage #adminReviewsActionCard{order:7;}
.adminDashboardPage #adminActionGamingArticles{order:8;}
.adminDashboardPage #adminActionProgression{order:9;}
.adminDashboardPage #adminActionRanks{order:10;}
.adminDashboardPage #adminActionBadges{order:11;}
.adminDashboardPage #adminActionRecaps{order:12;}
.adminDashboardPage #adminActionSync{order:13;}
.adminDashboardPage #adminMetacriticActionCard{order:14;}
.adminDashboardPage #adminRawgMetacriticActionCard{order:15;}
.adminDashboardPage #adminActionCodes{order:16;}


/*
 * ADMIN DASHBOARD — compact native-app rows on mobile.
 */
@media (max-width: 620px){

  .adminDashboardPage .adminDashboardContainer{
    width:calc(100% - 18px);
  }

  .adminDashboardPage .adminIdentityCard{
    margin-bottom:18px;
  }

  .adminDashboardPage .adminDashboardSection{
    margin-top:22px;
  }

  .adminDashboardPage .adminActionGrid{
    gap:8px;
  }

  .adminDashboardPage .adminActionCard{
    min-height:82px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:10px;
    row-gap:2px;
    padding:11px 12px;
    border-radius:17px;
  }

  .adminDashboardPage .adminActionTop{
    display:contents;
  }

  .adminDashboardPage .adminActionIcon{
    grid-column:1;
    grid-row:1 / 3;
    width:42px;
    height:42px;
    border-radius:13px;
    font-size:19px;
  }

  .adminDashboardPage .adminActionTop > .adminActionBadge{
    grid-column:3;
    grid-row:1;
    align-self:start;
    justify-self:end;
    padding:5px 7px;
    font-size:8px;
  }

  .adminDashboardPage .adminActionTitle{
    grid-column:2;
    grid-row:1;
    align-self:end;
    margin:0;
    font-size:15px;
    line-height:1.18;
  }

  .adminDashboardPage .adminActionDescription{
    grid-column:2;
    grid-row:2;
    min-width:0;
    display:-webkit-box;
    overflow:hidden;
    margin:2px 0 0;
    font-size:10px;
    line-height:1.3;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
  }

  .adminDashboardPage .adminActionFooter{
    grid-column:3;
    grid-row:2;
    align-self:end;
    justify-self:end;
    margin:0;
    padding:0;
    font-size:16px;
  }

  .adminDashboardPage .adminActionFooter span:first-child{
    display:none;
  }

  .adminDashboardPage .adminOverviewGrid{
    gap:7px;
  }

  .adminDashboardPage .adminOverviewCard{
    min-height:70px;
    gap:8px;
    padding:10px;
    border-radius:15px;
  }

  .adminDashboardPage .adminOverviewIcon{
    width:31px;
    height:31px;
    border-radius:10px;
    font-size:14px;
  }

  .adminDashboardPage .adminOverviewLabel{
    font-size:9px;
  }

  .adminDashboardPage .adminOverviewValue{
    font-size:15px;
  }

}


/******************************************************
 * ADMIN DASHBOARD — compact signed-in identity card
 ******************************************************/

@media (max-width: 620px){

  .adminDashboardPage .adminIdentityCard{
    min-height:
      0;

    flex-direction:
      row;

    align-items:
      center;

    justify-content:
      space-between;

    gap:
      10px;

    padding:
      11px
      12px;

    margin-bottom:
      18px;

    border-radius:
      18px;
  }


  .adminDashboardPage .adminIdentityMain{
    min-width:
      0;

    gap:
      10px;
  }


  .adminDashboardPage .adminIdentityAvatar{
    width:
      42px;

    height:
      42px;

    border-radius:
      13px;

    font-size:
      14px;
  }


  .adminDashboardPage .adminIdentityLabel{
    font-size:
      8px;

    line-height:
      1.2;
  }


  .adminDashboardPage .adminIdentityName{
    max-width:
      210px;

    margin-top:
      2px;

    overflow:
      hidden;

    font-size:
      14px;

    line-height:
      1.2;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  .adminDashboardPage .adminIdentityRole{
    margin-top:
      2px;

    font-size:
      10px;

    line-height:
      1.2;
  }


  .adminDashboardPage .adminVerifiedBadge{
    flex:
      0
      0
      auto;

    gap:
      5px;

    margin-left:
      0;

    padding:
      5px
      7px;

    font-size:
      9px;
  }


  .adminDashboardPage .adminVerifiedDot{
    width:
      6px;

    height:
      6px;
  }

}