/* PRISM Games UI 27.4.13 / Webservices 11.1.33
   Navigation harmonisée + cartes Solo/Multi strictement de même hauteur.
   Chargé en dernier sur toutes les pages jeux. */

/* =========================================================
   Catalogue /game/ — navbar publique mieux cadrée
   ========================================================= */
@media (min-width: 901px){
  body.p8-games .p8-header{
    position:relative !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:center !important;
    gap:24px !important;
    width:min(1440px,calc(100% - 32px)) !important;
    min-height:66px !important;
    margin:10px auto 0 !important;
    padding:8px 12px 8px 18px !important;
    border-radius:12px !important;
  }
  body.p8-games .p8-brand{
    display:inline-flex !important;
    align-items:center !important;
    gap:12px !important;
    min-width:210px !important;
    min-height:46px !important;
  }
  body.p8-games .p8-brand img{
    width:24px !important;
    height:24px !important;
  }
  body.p8-games .p8-brand span{
    font-size:1.55rem !important;
    line-height:1 !important;
    letter-spacing:.22em !important;
  }
  body.p8-games .p8-nav{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:4px !important;
    min-width:0 !important;
  }
  body.p8-games .p8-nav a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:40px !important;
    padding:0 12px !important;
    white-space:nowrap !important;
  }
  body.p8-games .p8-nav .p8-nav-cta{
    min-height:46px !important;
    padding:0 20px !important;
  }
}

/* =========================================================
   Navbar interne des jeux : Échecs / Dames / Go / Puissance 4
   ========================================================= */
body > main.app-shell .topbar{
  position:relative !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:18px !important;
  width:100% !important;
  min-height:62px !important;
  height:auto !important;
  margin:0 0 14px !important;
  padding:8px 10px 8px 14px !important;
  border-radius:12px !important;
  overflow:visible !important;
}
body > main.app-shell .topbar .brand{
  display:inline-flex !important;
  align-items:center !important;
  gap:11px !important;
  min-width:0 !important;
  width:max-content !important;
  max-width:100% !important;
}
body > main.app-shell .topbar .brand-mark{
  width:22px !important;
  height:28px !important;
  flex:0 0 22px !important;
}
body > main.app-shell .topbar .brand-copy{
  display:flex !important;
  align-items:baseline !important;
  gap:9px !important;
  min-width:0 !important;
}
body > main.app-shell .topbar .brand-copy strong{
  font-size:.88rem !important;
  line-height:1 !important;
  letter-spacing:.20em !important;
  white-space:nowrap !important;
}
body > main.app-shell .topbar .brand-copy small{
  font-size:.58rem !important;
  line-height:1 !important;
  letter-spacing:.18em !important;
  white-space:nowrap !important;
}
body > main.app-shell .topbar .topbar-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex-wrap:nowrap !important;
  gap:7px !important;
  min-width:0 !important;
}
body > main.app-shell .topbar .member-pill{
  grid-template-columns:34px minmax(0,auto) !important;
  min-height:42px !important;
  height:42px !important;
  padding:4px 10px 4px 5px !important;
  gap:8px !important;
  border-radius:11px !important;
}
body > main.app-shell .topbar .member-pill__avatar{
  width:32px !important;
  height:32px !important;
  border-radius:9px !important;
}
body > main.app-shell .topbar .member-pill strong{
  max-width:140px !important;
  font-size:.68rem !important;
  line-height:1.1 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
body > main.app-shell .topbar .member-pill small{
  font-size:.52rem !important;
  line-height:1.1 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
}
body > main.app-shell .topbar .icon-button{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  border-radius:11px !important;
}
body > main.app-shell .topbar .button--ghost{
  min-height:40px !important;
  height:40px !important;
  padding:0 13px !important;
  border-radius:11px !important;
}

/* =========================================================
   Menu de jeu : cartes Solo / Multijoueur parfaitement égales
   La plus haute détermine automatiquement la hauteur de la ligne.
   Aucun min-height arbitraire.
   ========================================================= */
body > main.app-shell .menu-view .mode-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-auto-rows:1fr !important;
  align-items:stretch !important;
  gap:12px !important;
}
body > main.app-shell .menu-view .mode-card,
body > main.app-shell .menu-view .mode-card--tournament{
  align-self:stretch !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  padding:20px 22px !important;
  gap:10px !important;
}
body > main.app-shell .menu-view .mode-card--solo .mode-action{
  margin-top:auto !important;
}
body > main.app-shell .menu-view .mode-card--multi .mode-note{
  margin-top:auto !important;
}
body > main.app-shell .menu-view .mode-card .difficulty-cards{
  margin-top:2px !important;
}

/* Garde le header, le profil et les cartes sur une largeur commune. */
body > main.app-shell .menu-view{
  width:min(1100px,100%) !important;
}
body > main.app-shell .menu-hero,
body > main.app-shell .player-progress-card,
body > main.app-shell .mode-grid{
  width:100% !important;
  max-width:100% !important;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:900px){
  body > main.app-shell .topbar{
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:10px !important;
    padding:7px 8px 7px 11px !important;
  }
  body > main.app-shell .topbar .brand-copy small{
    display:none !important;
  }
  body > main.app-shell .topbar .member-pill strong{
    max-width:92px !important;
  }
}
@media (max-width:760px){
  body > main.app-shell .menu-view .mode-grid{
    grid-template-columns:1fr !important;
    grid-auto-rows:auto !important;
  }
  body > main.app-shell .menu-view .mode-card,
  body > main.app-shell .menu-view .mode-card--tournament{
    height:auto !important;
  }
  body > main.app-shell .topbar{
    min-height:56px !important;
    margin-bottom:10px !important;
  }
  body > main.app-shell .topbar .member-pill{
    max-width:150px !important;
  }
}
@media (max-width:540px){
  body > main.app-shell .topbar .member-pill{
    grid-template-columns:32px !important;
    width:42px !important;
    padding:4px !important;
  }
  body > main.app-shell .topbar .member-pill > span:last-child{
    display:none !important;
  }
}