/* =====================================================================
   BOT UNIFIÉ — css/bot.css
   Version 1.1 du 01/09/2026

   Une seule feuille pour les deux jeux. Les couleurs viennent de
   variables que le corps de page redéfinit selon le jeu : DBZDB tire
   vers l'orangé du Ki, SSDB vers l'or des Armures.
   ===================================================================== */

:root {
	--nuit:      #0b1020;
	--panneau:   #151c30;
	--bord:      #28304e;
	--texte:     #e9ecf5;
	--doux:      #8e9bbd;
	--faible:    #6b779a;
	--accent:    #f0a500;
	--accent-vif:#ffc94a;
	--rouge:     #d32027;
	--vert:      #3fae4b;
}

body.jeu-ssdb {
	--accent:     #d9a441;
	--accent-vif: #ffdd8a;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	/* Une fenêtre de discussion : hauteur fixe, le fil défile, la
	   saisie reste en bas. 100dvh plutôt que 100vh pour que la barre
	   d'adresse mobile ne mange pas la zone de saisie. */
	height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: var(--texte);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	background: var(--nuit);
	position: relative;
}

/* Le ciel étoilé, en CSS pur : trois couches de points de tailles
   différentes, sans la moindre image à télécharger. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(1100px 700px at 50% -10%,
			rgba(60, 90, 180, .30) 0%, transparent 60%),
		radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.85), transparent),
		radial-gradient(2px 2px at 75% 15%, rgba(255,255,255,.7), transparent),
		radial-gradient(1px 1px at 45% 60%, rgba(255,255,255,.6), transparent),
		radial-gradient(1px 1px at 85% 70%, rgba(255,255,255,.5), transparent),
		radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,.5), transparent),
		radial-gradient(2px 2px at 60% 40%, rgba(255,255,255,.6), transparent),
		linear-gradient(180deg, #0b1020 0%, #0e1428 100%);
	background-size: 100% 100%, 320px 320px, 420px 420px, 260px 260px,
		380px 380px, 300px 300px, 500px 500px, 100% 100%;
}

/* --- en-tête ----------------------------------------------------
   Le logo à gauche et grand, les liens à droite : c'est la
   disposition d'un site, pas d'une page d'accueil. */
.entete {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	flex-shrink: 0;
	padding: .8rem 1rem .6rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.marque { display: flex; flex-direction: column; align-items: flex-start; }
.entete .logo {
	height: 72px;
	width: auto;
	max-width: 100%;
	display: block;
}
.entete .role {
	color: var(--doux);
	font-size: .88rem;
	margin: .2rem 0 0 .15rem;
	letter-spacing: .02em;
}

.liens {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
}
/* Assez contrastés pour se voir : un fond, une bordure marquée, et le
   texte en clair. Les boutons fantômes se perdaient sur le ciel. */
/* Assez voyants pour être vus du premier coup d'œil : bordure dorée,
   texte clair, léger halo. Un bouton discret sur un ciel étoilé
   disparaît. */
.liens a, .liens .menu-bouton {
	display: inline-flex;
	align-items: center;
	gap: .42rem;
	color: var(--accent-vif);
	text-decoration: none;
	border: 1px solid var(--accent);
	border-radius: 999px;
	padding: .46rem 1.15rem;
	font-size: .88rem;
	font-weight: 700;
	background: rgba(240, 165, 0, .10);
	cursor: pointer;
	transition: background .12s, color .12s, box-shadow .12s;
}
.liens a:hover, .liens .menu-bouton:hover {
	background: var(--accent);
	color: #1a1206;
	box-shadow: 0 0 14px rgba(240, 165, 0, .35);
}
.lien-discord svg { flex-shrink: 0; }
/* Discord garde sa couleur de marque : on la reconnaît sans lire. */
.liens a.lien-discord {
	background: #5865f2;
	border-color: #5865f2;
	color: #fff;
}
.liens a.lien-discord:hover {
	background: #4752c4;
	border-color: #4752c4;
	color: #fff;
	box-shadow: 0 0 14px rgba(88, 101, 242, .45);
}

/* la liste déroulante des livrets */
.menu { position: relative; display: inline-block; }
.menu-liste {
	position: absolute;
	top: calc(100% + .4rem);
	/* Alignée à droite : le bouton est en bord de page, une liste
	   centrée déborderait de l'écran. */
	right: 0;
	background: var(--panneau);
	border: 1px solid var(--bord);
	border-radius: 10px;
	padding: .4rem;
	min-width: 260px;
	z-index: 40;
	text-align: left;
	box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.menu-liste.cachee { display: none; }
/* Posée par le script sur les éléments à masquer. Déclarée ici pour
   qu'elle s'applique dès le rendu, avant l'exécution du script. */
.cachee { display: none !important; }
.menu-liste .groupe {
	color: var(--faible);
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: .4rem .6rem .2rem;
}
.menu-liste a {
	display: block;
	border: 0;
	border-radius: 7px;
	padding: .35rem .6rem;
	color: var(--texte);
	font-size: .86rem;
}
.menu-liste a:hover { background: #1d2440; color: var(--accent-vif); }
.menu-liste .note {
	color: var(--faible);
	font-size: .72rem;
	padding: .2rem .6rem .5rem;
	line-height: 1.4;
}

/* --- la discussion ------------------------------------------------ */
.chat {
	flex: 1;
	min-height: 0;
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	padding: 0 1rem;
	display: flex;
	flex-direction: column;
}

/* Le fil défile ; le reste est fixe. */
#fil {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: .2rem .1rem .6rem;
	margin-top: 0;
	scrollbar-width: thin;
	scrollbar-color: #2a3355 transparent;
}
#fil::-webkit-scrollbar { width: 9px; }
#fil::-webkit-scrollbar-thumb {
	background: #2a3355;
	border-radius: 9px;
}

.accueil {
	color: var(--faible);
	text-align: center;
	padding: 2.5rem 1rem;
	font-size: .92rem;
}

/* --- la saisie, ancrée en bas -------------------------------------- */
.composer { flex-shrink: 0; padding-bottom: .5rem; }

.boite-question {
	display: flex;
	align-items: flex-end;
	gap: .5rem;
	background: var(--panneau);
	border: 1px solid var(--bord);
	border-radius: 14px;
	padding: .55rem .6rem;
}
.boite-question:focus-within { border-color: var(--accent); }
.boite-question textarea {
	flex: 1;
	min-height: 2.5rem;
	max-height: 9rem;
	resize: none;
	background: transparent;
	border: 0;
	color: var(--texte);
	font: inherit;
	padding: .55rem .5rem;
	line-height: 1.45;
}
.boite-question textarea:focus { outline: none; }
.btn {
	background: linear-gradient(160deg, var(--accent-vif), var(--accent));
	color: #1a1206;
	font-weight: 700;
	border: 0;
	border-radius: 9px;
	padding: .5rem 1.3rem;
	cursor: pointer;
	font-size: .95rem;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-plat {
	background: transparent;
	color: var(--doux);
	border: 1px solid var(--bord);
	border-radius: 999px;
	padding: .25rem .8rem;
	font-size: .8rem;
	cursor: pointer;
}
.btn-plat:hover { border-color: var(--accent); color: var(--accent); }

/* --- exemples -----------------------------------------------------
   Au-dessus de la saisie et TOUJOURS visibles : ils rappellent ce
   qu'on peut demander, y compris après plusieurs questions. */
.exemples {
	margin: 0 0 .45rem;
	display: flex;
	gap: .35rem;
	overflow-x: auto;
	padding-bottom: .15rem;
	scrollbar-width: none;
}
.exemples::-webkit-scrollbar { display: none; }
.puce { white-space: nowrap; flex-shrink: 0; }
.puce {
	display: inline-block;
	margin: 0 .35rem .35rem 0;
	padding: .3rem .75rem;
	border: 1px solid var(--bord);
	border-radius: 999px;
	color: var(--doux);
	font-size: .82rem;
	cursor: pointer;
	background: transparent;
}
.puce:hover { border-color: var(--accent); color: var(--accent-vif); }

/* --- fil des échanges --------------------------------------------- */
#fil { margin-top: 1.4rem; }

/* Un échange = un bloc. La question et sa réponse se lisent ensemble ;
   les séparer en deux cadres cassait le lien entre les deux. */
.echange {
	border-radius: 14px;
	border: 1px solid var(--bord);
	background: var(--panneau);
	margin-bottom: .9rem;
	overflow: hidden;
}
.echange .question {
	background: #101728;
	border-bottom: 1px solid var(--bord);
	padding: .6rem 1rem;
	color: var(--doux);
}
.echange .question::before {
	content: "❯ ";
	color: var(--accent);
	font-weight: 700;
}
.echange .corps { padding: .85rem 1rem; }
.reponse { white-space: pre-wrap; }

/* La réponse elle-même : plus grande, plus claire, un peu détachée.
   Elle doit se lire seule, sans que les détails la noient. */
.reponse .tete {
	margin: 0 0 .7rem;
	font-size: 1.08rem;
	line-height: 1.55;
	font-weight: 600;
	color: #fff;
	border-left: 3px solid var(--accent);
	padding-left: .7rem;
}
/* Les détails restent lisibles, mais s'effacent devant la réponse. */
.reponse .suite {
	color: var(--doux);
	font-size: .94rem;
	line-height: 1.6;
}
.reponse .suite .lien-carte { color: var(--accent-vif); }

.meta { color: var(--faible); font-size: .78rem; margin-top: .3rem; }

.attente { color: var(--doux); font-size: .9rem; }
.attente::after {
	content: "";
	display: inline-block;
	width: .8em;
	text-align: left;
	animation: points 1.2s steps(4, end) infinite;
}
@keyframes points {
	0%   { content: ""; }
	25%  { content: "."; }
	50%  { content: ".."; }
	75%  { content: "..."; }
}

/* un nom de carte cliquable dans une réponse */
.lien-carte {
	color: var(--accent-vif);
	border-bottom: 1px dotted rgba(240,165,0,.55);
	cursor: pointer;
	font-weight: 600;
}
.lien-carte:hover { color: #fff; border-bottom-color: var(--accent); }

/* --- fiches de cartes ---------------------------------------------
   Un encadré à part, avec son propre fond : la fiche doit se lire
   comme une carte posée sur la page, pas comme un paragraphe illustré. */
.carte-ligne {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	background: #101728;
	border: 1px solid var(--bord);
	border-left: 3px solid var(--accent);
	border-radius: 12px;
	padding: .85rem;
	margin-top: .7rem;
}
.carte-ligne:first-child { margin-top: 0; }
.vignette {
	width: 112px;
	border-radius: 7px;
	flex-shrink: 0;
	box-shadow: 0 3px 14px rgba(0,0,0,.6);
}
.carte-corps { flex: 1; min-width: 0; }
.carte-nom {
	font-weight: 800;
	color: var(--accent-vif);
	font-size: 1.08rem;
	display: flex;
	align-items: center;
	gap: .4rem;
	flex-wrap: wrap;
}
/* Le rang se lit à son icône, comme sur la carte : elle prend la place
   des mots « rang argent ». */
.carte-nom .ico { height: 1.15em; }
.identite {
	color: var(--doux);
	font-size: .84rem;
	margin: .3rem 0 .55rem;
	display: flex;
	align-items: center;
	gap: .45rem;
	flex-wrap: wrap;
}
.identite .ico { height: 1.2em; }
/* Le TYPE de carte est une étiquette, pas une classe : sans quoi
   « Personnage · Humain » se lit comme deux classes. */
.identite .type {
	background: #232c4a;
	border: 1px solid var(--bord);
	border-radius: 5px;
	padding: .05rem .45rem;
	font-size: .78rem;
	color: var(--texte);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.identite .sep { color: #3d476b; }
.valeurs {
	display: flex;
	flex-wrap: wrap;
	gap: .2rem .9rem;
	margin-bottom: .5rem;
	font-size: .88rem;
	color: var(--doux);
}
.valeurs span { display: inline-flex; align-items: center; gap: .12rem; }
.valeurs b { color: var(--texte); font-weight: 700; }
/* Une icône se lit comme une lettre : à hauteur de texte, collée au
   chiffre qui la précède. */
.ico { height: 1.15em; width: auto; vertical-align: -.2em; }
.effet .ico { height: 1.25em; vertical-align: -.28em; }

/* Les cases d'effet, comme sur la carte imprimée.
   Effets de JEU sur le bandeau crème, effets de TERRAIN sur la bande
   noire du bas : ce n'est pas une alternance, c'est la nature de
   l'effet qui décide. */
.effet {
	border-radius: 7px;
	padding: .5rem .7rem;
	margin-bottom: .3rem;
	font-size: .9rem;
	line-height: 1.5;
	background: #f6f3e2;
	color: #1d2331;
	border: 1px solid #cfc9ae;
}
.effet.terrain {
	background: #1b1b1b;
	color: #ececec;
	border-color: #3a3a3a;
}
.effet .mot { font-weight: 700; font-style: italic; padding-right: .35rem; }
/* Un nom de carte ou de classe cité dans un effet est en italique
   SEULEMENT : le gras le ferait ressortir plus que le mot-clef. */
.effet em { font-style: italic; font-weight: inherit; }
.effet .ico { height: 1.25em; vertical-align: -.28em; }

/* La couleur officielle de chaque mot-clef. */
.mot-miseenjeu   { color: #2196d6; }
.mot-arrivee     { color: #66ccff; }
.mot-defausser,
.mot-blesser,
.mot-immobiliser,
.mot-detruire    { color: #d32027; }
.mot-vaincu,
.mot-vsortie     { color: #ff5a5a; }
.mot-sortie,
.mot-decouverte  { color: #d8cf3a; }
.mot-marque      { color: #c400e0; }
.mot-geler       { color: #66ccff; }
.mot-entrave     { color: #c400e0; }
.mot-talent,
.mot-deftalent   { color: #d32027; }
.mot-capacite    { color: #2196d6; }
.mot-apparition  { color: #66ccff; }
.mot-aneanti     { color: #ff5a5a; }
.mot-enfers      { color: #d8cf3a; }
.mot-fin_epopee,
.mot-fin_partie  { color: #d8cf3a; }

/* Une technique de plateau. Les éclairs à gauche, comme sur le carton :
   c'est le coût qu'on lit en premier quand on choisit son pouvoir. */
.plateau-tech {
	border: 1px solid var(--bord);
	border-radius: 9px;
	padding: .5rem .7rem .55rem;
	margin-bottom: .4rem;
	background: #0d1424;
}
.plateau-tech .tete {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin-bottom: .35rem;
}
.plateau-tech .ki {
	display: inline-flex;
	align-items: center;
	gap: .1rem;
	/* Une largeur fixe aligne les noms, que la technique coûte zéro
	   éclair ou trois. */
	min-width: 3.6em;
}
.plateau-tech .ki .ico { height: 1.3em; vertical-align: middle; }
.sans-ki { color: var(--faible); font-size: .74rem; font-style: italic; }
.plateau-tech .nom {
	font-weight: 700;
	color: var(--accent-vif);
	font-size: .98rem;
}

/* Le coût supplémentaire : une condition à remplir AVANT d'utiliser la
   technique. Sur un fond distinct pour qu'on ne le confonde pas avec
   l'effet lui-même. */
.cout-sup {
	background: rgba(211, 32, 39, .10);
	border: 1px solid rgba(211, 32, 39, .35);
	border-radius: 6px;
	padding: .35rem .6rem;
	margin-bottom: .3rem;
	font-size: .86rem;
	color: var(--texte);
}
.cout-sup .mot {
	font-weight: 700;
	font-style: italic;
	padding-right: .2rem;
}
.cout-sup em { font-style: italic; }
.cout-sup .ico { height: 1.2em; vertical-align: -.25em; }

/* La vignette d'un plateau est horizontale : elle mérite plus de large. */
.vignette-plateau { width: 190px; }

/* --- notation et dépliants ---------------------------------------- */
.retour {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-top: .7rem;
	padding-top: .55rem;
	border-top: 1px solid var(--bord);
}
.retour-txt { color: var(--faible); font-size: .78rem; }
.retour-btn {
	background: transparent;
	border: 1px solid var(--bord);
	border-radius: 7px;
	padding: .1rem .45rem;
	cursor: pointer;
	font-size: .9rem;
	filter: grayscale(1);
	opacity: .6;
}
.retour-btn:hover { border-color: var(--accent); filter: none; opacity: 1; }
.retour-btn.choisi {
	border-color: var(--accent);
	filter: none;
	opacity: 1;
	background: rgba(240,165,0,.12);
}

details.sources { margin-top: .6rem; }
details.sources summary {
	color: var(--faible);
	font-size: .78rem;
	cursor: pointer;
	list-style: none;
}
details.sources summary::-webkit-details-marker { display: none; }
details.sources summary::before { content: "▸ "; }
details.sources[open] summary::before { content: "▾ "; }
details.sources ul { margin: .4rem 0 0; padding-left: 1.1rem; }
details.sources li { color: var(--doux); font-size: .8rem; }

/* --- pied compact, sous la saisie ---------------------------------- */
.pied {
	margin: .45rem 0 0;
	color: #4d5878;
	font-size: .7rem;
	text-align: center;
	line-height: 1.5;
}
.pied a { color: #5f6b8c; }
.pied .version { display: block; opacity: .7; }

/* --- agrandissement d'une carte ------------------------------------ */
.loupe {
	position: fixed;
	inset: 0;
	z-index: 80;
	background: rgba(4, 7, 16, .88);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	cursor: zoom-out;
}
.loupe img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 10px;
	box-shadow: 0 10px 50px rgba(0, 0, 0, .8);
}
.vignette { cursor: zoom-in; }

@media (max-width: 700px) {
	.entete {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.marque { align-items: center; }
	.menu-liste { right: auto; left: 50%; transform: translateX(-50%); }
}

@media (max-width: 560px) {
	.entete .logo { height: 62px; }
	.vignette { width: 68px; }
	body { font-size: 14px; }
}