/* PRISM Games 27.4.11 / WS 11.1.31 — BALANCED COMPACT
   Conserve la composition compacte validée et ajoute une respiration légère
   sans réintroduire de hauteurs artificielles. Chargé en dernier sur toutes les pages jeux. */

/* =========================================================
   Catalogue /game/ — composition restaurée et compacte
   ========================================================= */
body.p8-games{
  overflow-x:hidden !important;
}
body.p8-games .p8-header{
  width:min(1440px,calc(100% - 48px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body.p8-games .games-page{
  width:min(1440px,calc(100% - 48px)) !important;
  max-width:none !important;
  margin:14px auto 28px !important;
  padding:0 !important;
}
body.p8-games .player-banner{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(360px,.9fr) !important;
  align-items:center !important;
  gap:22px !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:18px 22px !important;
  overflow:hidden !important;
  border:1px solid rgba(240,213,138,.20) !important;
  border-radius:3px !important;
  background:linear-gradient(145deg,rgba(25,18,22,.96),rgba(10,8,11,.94)) !important;
}
body.p8-games .player-banner__identity{
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
}
body.p8-games .player-avatar{
  width:64px !important;
  height:64px !important;
  flex:0 0 64px !important;
  border-radius:50% !important;
}
body.p8-games .player-banner__name .games-kicker{margin:0 0 2px !important}
body.p8-games .player-banner__name h1{
  margin:0 !important;
  font-size:clamp(2.15rem,3.7vw,3.8rem) !important;
  line-height:.95 !important;
}
body.p8-games .player-banner__name>a{margin-top:5px !important}
body.p8-games .player-banner__progress{
  display:grid !important;
  grid-template-columns:92px minmax(0,1fr) !important;
  align-items:stretch !important;
  gap:10px !important;
}
body.p8-games .player-level,
body.p8-games .player-xp{
  min-height:0 !important;
  height:auto !important;
  border-radius:14px !important;
}
body.p8-games .player-level{padding:10px !important}
body.p8-games .player-level strong{font-size:2.05rem !important}
body.p8-games .player-xp{padding:10px 12px !important}
body.p8-games .player-xp__track{margin:8px 0 6px !important;height:5px !important}

body.p8-games .games-section{
  margin:18px 0 0 !important;
  padding:0 !important;
}
body.p8-games .games-section::before{
  content:"LES DIVERTISSEMENTS DE LA COUR" !important;
  display:block !important;
  margin:0 auto 2px !important;
  text-align:center !important;
  color:rgba(240,213,138,.62) !important;
  font-size:.62rem !important;
  font-weight:800 !important;
  letter-spacing:.22em !important;
}
body.p8-games .games-section__head{
  display:block !important;
  margin:0 0 14px !important;
  padding:0 !important;
  text-align:center !important;
}
body.p8-games .games-section__head .games-kicker{margin:0 0 2px !important}
body.p8-games .games-section__head h2{
  margin:0 !important;
  font-size:clamp(2.35rem,4.5vw,4.6rem) !important;
  line-height:.95 !important;
}
body.p8-games .games-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-auto-rows:max-content !important;
  align-items:start !important;
  align-content:start !important;
  gap:14px !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}
body.p8-games .game-card,
body.p8-games .game-card:nth-child(5),
body.p8-games .game-card--werewolf{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  align-self:start !important;
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  margin:0 !important;
  padding:17px 18px !important;
  gap:10px !important;
  overflow:hidden !important;
  border:1px solid rgba(240,213,138,.18) !important;
  border-radius:3px !important;
  background:linear-gradient(145deg,rgba(23,16,20,.96),rgba(10,8,10,.96)) !important;
  box-shadow:none !important;
}
body.p8-games .game-card--werewolf,
body.p8-games .game-card:nth-child(5){grid-column:1/-1 !important}
body.p8-games .game-card__topline{
  order:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
}
body.p8-games .chess-mark,
body.p8-games :is(.checkers-mark,.go-mark,.connect4-mark,.werewolf-mark){
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  flex:0 0 28px !important;
  margin:0 !important;
}
body.p8-games .chess-mark{padding:2px !important;grid-template-columns:repeat(3,4px) !important;gap:3px !important}
body.p8-games .chess-mark span{width:4px !important}
body.p8-games .availability-badge{
  padding:4px 7px !important;
  gap:10px !important;
  border-radius:7px !important;
  font-size:.61rem !important;
  line-height:1 !important;
}
body.p8-games .game-card__body{
  order:2 !important;
  display:block !important;
  align-self:stretch !important;
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
}
body.p8-games .game-card__eyebrow{
  margin:0 0 4px !important;
  font-size:.59rem !important;
  line-height:1.1 !important;
  letter-spacing:.14em !important;
}
body.p8-games .game-card__body h3{
  margin:0 0 5px !important;
  font-size:clamp(2rem,3vw,2.8rem) !important;
  line-height:.95 !important;
}
body.p8-games .game-card__body>p:last-child{
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  font-size:.8rem !important;
  line-height:1.35 !important;
}
body.p8-games .game-card__tags{
  order:3 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  align-self:flex-start !important;
  gap:4px !important;
  min-height:0 !important;
  height:auto !important;
  margin:3px 0 0 !important;
  padding:0 !important;
}
body.p8-games .game-card__tags span{
  padding:4px 7px !important;
  border-radius:5px !important;
  font-size:.59rem !important;
  line-height:1.1 !important;
}
body.p8-games .game-card__footer{
  order:4 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  min-height:0 !important;
  height:auto !important;
  margin:3px 0 0 !important;
  padding:9px 0 0 !important;
  border-top:1px solid rgba(240,213,138,.11) !important;
}
body.p8-games .game-card__reward{display:flex !important;flex-direction:column !important;gap:0 !important;margin:0 !important}
body.p8-games .game-card__reward small{font-size:.53rem !important;line-height:1.1 !important}
body.p8-games .game-card__reward strong{font-size:.72rem !important;line-height:1.15 !important}
body.p8-games .play-button{
  min-height:34px !important;
  height:34px !important;
  padding:0 12px !important;
  gap:6px !important;
  border-radius:7px !important;
  font-size:.7rem !important;
}
body.p8-games .play-button svg{width:13px !important}

/* =========================================================
   Échecs / Dames / Go / Puissance 4 — menus uniquement
   ========================================================= */
body > main.app-shell{
  width:min(1380px,calc(100% - 32px)) !important;
  max-width:none !important;
  margin:0 auto !important;
  padding:12px 0 20px !important;
}
body > main.app-shell .topbar{min-height:46px !important;margin:0 0 8px !important}
body > main.app-shell .menu-view{
  width:min(1080px,100%) !important;
  margin:0 auto !important;
  padding:0 0 10px !important;
}
body > main.app-shell .menu-hero{
  max-width:760px !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 auto 8px !important;
  padding:0 !important;
}
body > main.app-shell .menu-hero h1{
  margin:3px 0 !important;
  font-size:clamp(2.3rem,4.8vw,4.2rem) !important;
  line-height:.92 !important;
}
body > main.app-shell .menu-hero p{margin:0 auto !important;line-height:1.35 !important}
body > main.app-shell .player-progress-card{
  min-height:0 !important;
  height:auto !important;
  margin:0 auto 12px !important;
  padding:11px 14px !important;
  gap:6px 10px !important;
  border-radius:12px !important;
}
body > main.app-shell .mode-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-auto-rows:max-content !important;
  align-items:start !important;
  gap:10px !important;
  margin:0 !important;
  padding:0 0 8px !important;
}
body > main.app-shell .menu-view .mode-card,
body > main.app-shell .menu-view .mode-card--tournament{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  align-self:start !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  margin:0 !important;
  padding:18px 20px !important;
  gap:10px !important;
  border-radius:14px !important;
}
body > main.app-shell .menu-view .mode-icon{
  width:44px !important;
  height:44px !important;
  min-height:0 !important;
  margin:0 0 4px !important;
  border-radius:12px !important;
  font-size:25px !important;
}
body > main.app-shell .menu-view .mode-card .eyebrow,
body > main.app-shell .menu-view .mode-card .mode-eyebrow{margin:0 !important}
body > main.app-shell .menu-view .mode-card h2{
  margin:0 0 4px !important;
  font-size:clamp(1.7rem,2.8vw,2.35rem) !important;
  line-height:.96 !important;
}
body > main.app-shell .menu-view .mode-card>p:not(.mode-note){
  min-height:0 !important;
  height:auto !important;
  margin:0 0 5px !important;
  font-size:.78rem !important;
  line-height:1.35 !important;
}
body > main.app-shell .menu-view .difficulty-cards{gap:4px !important;margin:0 !important}
body > main.app-shell .menu-view .difficulty-cards button{
  min-height:46px !important;
  height:auto !important;
  padding:5px !important;
  border-radius:8px !important;
}
body > main.app-shell .menu-view .mode-action{
  min-height:36px !important;
  height:36px !important;
  margin-top:3px !important;
}
body > main.app-shell .menu-view .mode-note{margin:2px 0 0 !important}
body > main.app-shell .menu-view .join-divider{margin:3px 0 !important}
body > main.app-shell .menu-view .join-form{margin:0 !important}

/* =========================================================
   Loup-Garou Royal — menu seulement
   ========================================================= */
body[data-world] .menu-view{padding-top:4px !important;padding-bottom:8px !important}
body[data-world] .menu-hero{
  min-height:0 !important;
  height:auto !important;
  margin:0 0 8px !important;
}
body[data-world] .menu-hero__copy{justify-content:flex-start !important;padding:18px 20px !important}
body[data-world] .menu-hero h1{margin:2px 0 4px !important;font-size:clamp(2.3rem,4vw,3.8rem) !important;line-height:.92 !important}
body[data-world] .menu-hero__copy>p{margin:0 !important;line-height:1.35 !important}
body[data-world] .hero-actions{margin-top:6px !important}
body[data-world] .reward-note{margin-top:4px !important}
body[data-world] .menu-dashboard{gap:8px !important;margin-top:6px !important}
body[data-world] :is(.profile-card,.join-card,.role-teaser){min-height:0 !important;height:auto !important;padding:16px 18px !important}
body[data-world] .role-teaser{margin-top:6px !important}

@media(max-width:980px){
  body.p8-games .player-banner{grid-template-columns:1fr !important}
}
@media(max-width:760px){
  body.p8-games .p8-header,
  body.p8-games .games-page{width:calc(100% - 20px) !important}
  body.p8-games .games-grid,
  body > main.app-shell .mode-grid{grid-template-columns:1fr !important}
  body.p8-games .player-banner{padding:12px !important}
  body.p8-games .game-card,
  body.p8-games .game-card:nth-child(5),
  body.p8-games .game-card--werewolf{padding:11px 12px !important}
  body > main.app-shell{width:calc(100% - 20px) !important}
  body > main.app-shell .menu-view .mode-card{padding:12px !important}
}


/* =========================================================
   27.4.11 — respiration légère validée
   ========================================================= */
body.p8-games .game-card,
body.p8-games .game-card:nth-child(5),
body.p8-games .game-card--werewolf{
  padding:18px 20px !important;
  gap:8px !important;
}
body.p8-games .games-grid{gap:14px !important}
body.p8-games .game-card__topline{margin-bottom:2px !important}
body.p8-games .game-card__body h3{margin-bottom:5px !important}
body.p8-games .game-card__body>p:last-child{line-height:1.45 !important}
body.p8-games .game-card__tags{margin-top:4px !important;gap:5px !important}
body.p8-games .game-card__footer{margin-top:4px !important;padding-top:10px !important}
body.p8-games .player-banner{padding:20px 24px !important;gap:24px !important}

body > main.app-shell .menu-view .mode-card,
body > main.app-shell .menu-view .mode-card--tournament{
  padding:18px 20px !important;
  gap:9px !important;
}
body > main.app-shell .mode-grid{gap:12px !important}
body > main.app-shell .player-progress-card{padding:12px 14px !important;margin-bottom:12px !important}
body > main.app-shell .menu-hero{margin-bottom:12px !important}
body > main.app-shell .menu-view .mode-card>p:not(.mode-note){line-height:1.45 !important;margin-bottom:5px !important}
body > main.app-shell .menu-view .mode-action{margin-top:5px !important}

body[data-world] .menu-hero__copy{padding:18px 20px !important}
body[data-world] .menu-dashboard{gap:12px !important;margin-top:10px !important}
body[data-world] :is(.profile-card,.join-card,.role-teaser){padding:16px 18px !important}

@media(max-width:760px){
  body.p8-games .player-banner{padding:16px !important}
  body.p8-games .game-card,
  body.p8-games .game-card:nth-child(5),
  body.p8-games .game-card--werewolf{padding:16px !important}
  body > main.app-shell .menu-view .mode-card,
  body > main.app-shell .menu-view .mode-card--tournament{padding:16px !important}
}