/* ==========================================================================
 * GF-UTILITY — BLOC COMPÉTENCES MONSTRE
 * ==========================================================================
 *
 * NAMESPACE :
 *
 *   .gf-monster-skills
 *
 * Toutes les règles propres aux compétences doivent rester sous ce parent.
 * Cela permet de modifier librement le rendu des compétences sans toucher :
 *
 * - aux cartes des autres composants ;
 * - aux listes des autres composants ;
 * - aux corps de section des autres pages ;
 * - aux styles historiques de mission.
 *
 * Le composant n’utilise plus les classes structurelles génériques du site.
 * Son HTML, son CSS et son JavaScript sont isolés sous ce namespace.
 * ======================================================================= */

/* --------------------------------------------------------------------------
 * Variables principales du composant.
 *
 * Pour changer rapidement le design, commencer ici.
 * ----------------------------------------------------------------------- */
.gf-monster-skills{
	--gf-monster-skills-gap:12px;
	--gf-monster-skills-card-min-width:310px;

	--gf-monster-skills-card-radius:12px;
	--gf-monster-skills-card-bg:rgba(0,0,0,.18);
	--gf-monster-skills-card-border:rgba(255,255,255,.10);

	--gf-monster-skills-head-bg-top:rgba(67,67,67,.96);
	--gf-monster-skills-head-bg-bottom:rgba(43,43,43,.98);
	--gf-monster-skills-head-border:rgba(255,255,255,.11);

	--gf-monster-skills-popover-bg:rgba(27,27,29,.985);
	--gf-monster-skills-popover-head-bg:rgba(42,42,44,.98);
	--gf-monster-skills-popover-border:rgba(255,255,255,.22);

	--gf-monster-skills-text:#fff;
	--gf-monster-skills-text-muted:rgba(255,255,255,.72);

	--gf-monster-skills-button-bg-top:rgba(70,70,70,.96);
	--gf-monster-skills-button-bg-bottom:rgba(42,42,42,.98);
	--gf-monster-skills-button-border:rgba(255,255,255,.22);

	/*
	 * Le namespace est aussi un point d'ancrage pratique si l'on veut
	 * ajouter plus tard un thème spécifique au bloc.
	 */
	position:relative;
	min-width:0;

	border:1px solid rgba(255,255,255,.08);
	border-radius:16px;
	background:rgba(0,0,0,.30);
	box-shadow:0 8px 22px rgba(0,0,0,.22);

	/*
	 * Indispensable pour que le panneau "+ Infos" puisse dépasser
	 * verticalement du cadre Compétences sans être rogné.
	 */
	overflow:visible!important;
}

/* --------------------------------------------------------------------------
 * Structure du bloc
 * ----------------------------------------------------------------------- */
.gf-monster-skills .gf-monster-skills__heading{
	background:rgba(0,0,0,0.55);
	border-bottom:1px solid rgba(255,255,255,0.08);
	color:#fff;
	margin:0;
	padding:10px 14px;
	font-size:16px;
	font-weight:500;
	border-radius:16px 16px 0 0;
}

.gf-monster-skills .gf-monster-skills__body{
	min-width:0;
	background:#999a9d;
	border:2px solid #333;
	border-top:0;
	border-radius:0 0 10px 10px;
	margin-bottom:5px;
	padding:12px 14px;
}

.gf-monster-skills .gf-monster-skills__list{
	display:grid;
	grid-template-columns:
		repeat(
			auto-fit,
			minmax(var(--gf-monster-skills-card-min-width),1fr)
		);
	gap:var(--gf-monster-skills-gap);
}

/* --------------------------------------------------------------------------
 * Carte de compétence
 * ----------------------------------------------------------------------- */
.gf-monster-skills .gf-monster-skill{
	position:relative;
	min-width:0;
	padding:7px 7px;
	overflow:visible;
	border:1px solid rgba(255,255,255,.27);
	border-radius:9px;
	background:rgba(255,255,255,.035);
	box-shadow:none;
}

.gf-monster-skills .gf-monster-skill.gf-monster-skill--open{
	z-index:10040;
}

.gf-monster-skills .gf-monster-skill h3{
	font-size:1rem;
	border-radius:var(--gf-monster-skills-card-radius);
}

.gf-monster-skills .gf-monster-skill h4{
	font-size:.92rem;
	margin:13px 0 7px;
}

.gf-monster-skills .gf-monster-skill p:last-child{
	margin-bottom:0;
}

/* --------------------------------------------------------------------------
 * Head : icône + nom + ID
 * ----------------------------------------------------------------------- */
.gf-monster-skills .gf-monster-skill__head{
	padding:0;
	border:0;
	border-radius:0;
	background:transparent;
}

.gf-monster-skills .gf-monster-skill__title{
	display:flex;
	align-items:center;
	gap:7px;
	min-width:0;
	margin:0!important;
	font-size:1rem;
	font-weight:700;
	border-radius:6px;
	cursor:pointer;
	user-select:none;
}

.gf-monster-skills .gf-monster-skill__title:focus-visible{
	outline:2px solid rgba(255,255,255,.45);
	outline-offset:3px;
}

.gf-monster-skills .gf-monster-skill__title[aria-expanded="true"]{
	opacity:.88;
}

.gf-monster-skills .gf-monster-skill__icon{
	width:27px;
	height:27px;
	flex:0 0 27px;
	display:block;
	object-fit:contain;

	border:1px solid rgba(255,255,255,.16);
	border-radius:3px;
	background:rgba(0,0,0,.3);
}

.gf-monster-skills .gf-monster-skill__name{
	min-width:0;
	overflow-wrap:anywhere;
}

.gf-monster-skills .gf-monster-skill__id{
	flex:0 0 auto;
	white-space:nowrap;

	opacity:.5;
	font-family:ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size:.86rem;
}

/* --------------------------------------------------------------------------
 * Citation SpellShout toujours visible
 * ----------------------------------------------------------------------- */
.gf-monster-skills .gf-monster-skill__quotes{
	display:grid;
	gap:5px;
	padding:8px 0 2px 47px;
	text-align:right;
}

.gf-monster-skills .gf-monster-skill__quote{
	margin:0;

	color:rgba(255,255,255,.88);

	font-style:italic;
	line-height:1.45;
	text-align:right;
}

/* --------------------------------------------------------------------------
 * Overlay + Infos
 *
 * IMPORTANT :
 * - position:absolute ;
 * - largeur = 100 % de l'article ;
 * - hors du flux ;
 * - ne pousse jamais le contenu suivant.
 * ----------------------------------------------------------------------- */
.gf-monster-skills .gf-monster-skill__popover{
	position:absolute;
	z-index:10050;

	top:calc(100% + 4px);
	left:0;

	width:100%;
	max-height:min(72vh,760px);

	overflow:auto;

	padding:0;

	border:1px solid var(--gf-monster-skills-popover-border);
	border-radius:
		0
		0
		var(--gf-monster-skills-card-radius)
		var(--gf-monster-skills-card-radius);

	background:var(--gf-monster-skills-popover-bg);
	color:#fff;

	box-shadow:
		0 18px 50px rgba(0,0,0,.58),
		0 0 0 1px rgba(0,0,0,.38);

	backdrop-filter:blur(7px);
}

.gf-monster-skills .gf-monster-skill__popover[hidden]{
	display:none!important;
}

.gf-monster-skills .gf-monster-skill__close{
	float:right;
	width:28px;
	height:28px;
	margin:0 0 8px 10px;
	border:1px solid rgba(255,255,255,.2);
	border-radius:7px;
	background:rgba(0,0,0,.24);
	color:#fff;
	font-size:18px;
	line-height:1;
	cursor:pointer;
}

.gf-monster-skills .gf-monster-skill__close:hover{
	background:rgba(255,255,255,.09);
}

.gf-monster-skills .gf-monster-skill__popover-content{
	padding:12px 13px 14px;
}

/* --------------------------------------------------------------------------
 * Informations IA / comportement
 * ----------------------------------------------------------------------- */
.gf-monster-skills .gf-monster-skill__runtime{
	margin-top:12px;
	padding-top:11px;

	border-top:1px solid rgba(255,255,255,.12);
}

.gf-monster-skills .gf-monster-skill__runtime-block + .gf-monster-skill__runtime-block{
	margin-top:12px;
}

.gf-monster-skills .gf-monster-skill__runtime-title{
	margin:0 0 7px!important;

	font-size:.88rem!important;
	opacity:.9;
}

.gf-monster-skills .gf-monster-skill__runtime-badges{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
}

.gf-monster-skills .gf-monster-skill__runtime-note{
	margin:8px 0 0;

	font-size:.82rem;
	opacity:.78;
}

/* --------------------------------------------------------------------------
 * SpellShout / dialogues
 * ----------------------------------------------------------------------- */
.gf-monster-skills .gf-monster-skill__shout-list{
	display:grid;
	gap:8px;
}

.gf-monster-skills .gf-monster-skill__shout{
	padding:9px 10px;

	border:1px solid rgba(255,255,255,.10);
	border-radius:9px;

	background:rgba(255,255,255,.045);
}

.gf-monster-skills .gf-monster-skill__shout-head{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:6px;

	margin-bottom:5px;
}

.gf-monster-skills .gf-monster-skill__shout-text{
	font-style:italic;
	line-height:1.45;
}

.gf-monster-skills .gf-monster-skill__shout-id{
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		monospace;

	font-size:.78rem;
	opacity:.72;
}

.gf-monster-skills .gf-monster-skill__badge--cast{
	border-color:rgba(100,190,255,.45);
	background:rgba(50,125,185,.18);
}

.gf-monster-skills .gf-monster-skill__badge--blast{
	border-color:rgba(255,177,82,.48);
	background:rgba(170,98,32,.18);
}

/* --------------------------------------------------------------------------
 * Description technique d'une compétence
 * ----------------------------------------------------------------------- */
.gf-monster-skills .gf-monster-skill__description{
	margin-top:10px;
	padding-top:10px;

	border-top:1px solid rgba(255,255,255,.1);
}

.gf-monster-skills .gf-monster-skill__description:first-child{
	margin-top:0;
	padding-top:0;
	border-top:0;
}

.gf-monster-skills .gf-monster-skill__description-list{
	display:grid;
	grid-template-columns:
		minmax(145px,auto)
		minmax(0,1fr);

	gap:7px 14px;

	margin:0;
}

.gf-monster-skills .gf-monster-skill__description-list dt{
	font-weight:700;
	color:rgba(255,255,255,.75);
}

.gf-monster-skills .gf-monster-skill__description-list dd{
	margin:0;
	overflow-wrap:anywhere;
}

.gf-monster-skills .gf-monster-skill__description-value{
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		monospace;
}

.gf-monster-skills .gf-monster-skill__description-note{
	display:block;

	margin-top:2px;

	color:rgba(255,255,255,.62);

	font-family:inherit;
	font-size:.82rem;
}

/* --------------------------------------------------------------------------
 * Utilitaires utilisés DANS les compétences
 *
 * Ces règles sont volontairement namespacées. Ainsi, une future modification
 * ici ne changera pas les badges, textes ou notes des autres groupes.
 * ----------------------------------------------------------------------- */
.gf-monster-skills .gf-monster-skill__badge{
	display:inline-flex;
	align-items:center;

	padding:4px 9px;

	border:1px solid rgba(255,255,255,.2);
	border-radius:999px;

	background:rgba(255,255,255,.08);

	font-size:.82rem;
}

.gf-monster-skills .gf-monster-skill__muted{
	opacity:.76;
	font-size:.9rem;
}

.gf-monster-skills .gf-monster-skill__empty{
	opacity:.7;
	font-style:italic;
}

.gf-monster-skills .gf-monster-skill__game-text{
	line-height:1.5;
	overflow-wrap:anywhere;
}

.gf-monster-skills .gf-tip-main{
	color:#e6d18d;
}

.gf-monster-skills .gf-tip-note{
	color:#d49ac8;
}

.gf-monster-skills .gf-token{
	opacity:.65;
	font-family:monospace;
}

.gf-monster-skills .gf-token-value{
	font-weight:700;
	color:inherit;
}

.gf-monster-skills .gf-link{
	color:inherit;

	text-decoration:underline;
	text-decoration-style:dotted;
	text-underline-offset:3px;
}

/* --------------------------------------------------------------------------
 * Responsive uniquement pour les compétences
 * ----------------------------------------------------------------------- */
@media(max-width:650px){
	.gf-monster-skills .gf-monster-skills__list{
		grid-template-columns:1fr;
	}

	.gf-monster-skills .gf-monster-skill__popover{
		max-height:76vh;
	}
}

@media(max-width:560px){
	.gf-monster-skills .gf-monster-skill__description-list{
		grid-template-columns:1fr;
		gap:3px;
	}

	.gf-monster-skills .gf-monster-skill__description-list dd{
		margin-bottom:7px;
	}
}

/* ==========================================================================
 * FIN DU BLOC CSS COMPÉTENCES
 * ======================================================================= */