.page{ --page-w: 1080px; }

.page__meta{
  max-width: 680px;
  line-height: 1.4;
}

.roleplay{
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.roleplayBtn{
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(219,219,219,.16);
  background: rgba(12,15,16,.55);
  color: rgba(219,219,219,.88);
  font-family: "LazyDog", system-ui, sans-serif;
  letter-spacing: .05em;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease, background .15s ease;
}
.roleplayBtn:hover{ border-color: rgba(255,190,90,.45); }
.roleplayBtn--primary{
  background: rgba(61,206,97,.14);
  border-color: rgba(61,206,97,.50);
  color: var(--green);
}
.roleplayBtn--primary:hover{
  border-color: rgba(61,206,97,.75);
  box-shadow: 0 0 0 1px rgba(61,206,97,.16);
}

/* =========================
   SELECTION DU NOMBRE DE JOUEURS
========================= */
.roleplayPicker{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.roleplayPicker__label{
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(219,219,219,.60);
}
.roleplayPicker__buttons{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.roleplayPickBtn{
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(219,219,219,.18);
  background: rgba(255,255,255,.03);
  color: rgba(219,219,219,.80);
  font-family: "LazyDog", system-ui, sans-serif;
  letter-spacing: .04em;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.roleplayPickBtn:hover{ border-color: rgba(255,190,90,.45); }
.roleplayPickBtn.is-active{
  border-color: rgba(255,190,90,.65);
  background: rgba(255,190,90,.12);
  color: #ffbe5a;
}

.roleplayEmpty{
  margin: 0;
  text-align: center;
  padding: 30px 16px;
  border-radius: 14px;
  border: 1px dashed rgba(219,219,219,.20);
  color: rgba(219,219,219,.55);
  font-size: 12px;
  letter-spacing: .03em;
}
.roleplayEmpty[hidden]{ display: none; }

/* =========================
   CARTES DE ROLES
========================= */
.roleplayCards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.roleplayCards[hidden]{ display: none; }

.roleplayCard{
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,190,90,.28);
  background: linear-gradient(155deg, rgba(20,14,26,.75), rgba(10,8,12,.85));
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
}
.roleplayCard.is-in{
  opacity: 1;
  transform: translateY(0);
}

.roleplayCard__player{
  justify-self: start;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,190,90,.45);
  background: rgba(255,190,90,.10);
  color: #ffbe5a;
  font-size: 9px;
  letter-spacing: .08em;
  line-height: 1.6;
}

.roleplayCard__name{
  margin: 0;
  font-family: "LazyDog", system-ui, sans-serif;
  font-size: 17px;
  color: rgba(219,219,219,.96);
}

.roleplayCard__desc{
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: .01em;
  color: rgba(219,219,219,.68);
}

.roleplayCard__equip{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.roleplayTag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(219,219,219,.18);
  background: rgba(255,255,255,.04);
  color: rgba(219,219,219,.78);
  font-size: 9.5px;
  letter-spacing: .03em;
  line-height: 1.6;
}

.roleplayActions{
  display: flex;
  justify-content: center;
}
.roleplayActions[hidden]{ display: none; }

/* =========================
   REGLES DU JEU
========================= */
.roleplayRules{
  border-radius: 14px;
  border: 1px solid rgba(219,219,219,.12);
  background: rgba(12,15,16,.40);
  padding: 4px 16px;
}
.roleplayRules summary{
  padding: 12px 0;
  cursor: pointer;
  font-family: "LazyDog", system-ui, sans-serif;
  letter-spacing: .05em;
  font-size: 13px;
  color: rgba(219,219,219,.85);
  list-style: none;
}
.roleplayRules summary::-webkit-details-marker{ display: none; }
.roleplayRules summary::before{
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: #ffbe5a;
  transition: transform .15s ease;
}
.roleplayRules[open] summary::before{ transform: rotate(90deg); }

.roleplayRules__body{
  padding: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.roleplayRules__body h3{
  margin: 6px 0 0;
  font-size: 11px;
  letter-spacing: .07em;
  color: #ffbe5a;
}
.roleplayRules__body p{
  margin: 0;
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: .01em;
  color: rgba(219,219,219,.70);
}
.roleplayRules__body ul{
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.roleplayRules__body li{
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(219,219,219,.70);
}
.roleplayRules__body strong{ color: rgba(219,219,219,.90); }

@media (prefers-reduced-motion: reduce){
  .roleplayBtn, .roleplayPickBtn, .roleplayCard{ transition: none; }
}