/* ==========================================================================
   Éclats — l'habillage.

   LE PLATEAU EST UN CANEVAS, LE RESTE EST DE LA PAGE. Les cartes du haut et
   du bas (coups, objectif, score) sont du HTML, pas du dessin : le texte
   reste net à toutes les tailles, il se sélectionne, il se lit à la voix, et
   il ne coûte pas une image par seconde. Seuls les éclats ont besoin
   d'être peintes.

   LE MONDE GARDE SON SOLEIL EN MODE SOMBRE. Un jeu est un lieu, pas une
   page : on ne le repeint pas en gris parce que le site l'est. On baisse
   seulement l'intensité, pour ne pas éblouir quelqu'un qui joue le soir.
   ========================================================================== */

/* LES ?v=N DU DÉCOR SE CHANGENT À LA MAIN. Le .htaccess garde les images un
   mois chez le visiteur, et une feuille de style ne peut pas appeler
   `jeu_asset()` pour datter ses URL. Après chaque `python3
   outils/fond-eclats.py` qui change le décor, incrémenter ces numéros —
   sinon le nouveau fond n'arrive chez personne avant un mois.

   LE PAYSAGE VECTORIEL D'AVANT (decor-collines.svg, decor-nuages.svg,
   decor-soleil.svg, et outils/decor-eclats.py qui les cuit) reste sur le
   disque. Il ne sert plus, mais il marche : c'est le repli si l'on veut un
   décor qui ne pèse rien, ou une autre saison. */

/* --- l'écran ---------------------------------------------------------------
   UN MATCH 3 SE JOUE EN COLONNE. Le jeu occupait la scène entière du portail —
   jusqu'à onze cents pixels de large sur un grand écran — avec un plateau
   carré perdu au milieu et du vide de chaque côté. Le décor, lui, a tout
   intérêt à s'étendre ; c'est le CONTENU qu'on tient en colonne.

   Sur téléphone, la colonne fait toute la largeur : rien ne change, et c'est
   bien le but — le réglage de bureau ne doit pas coûter un pixel au format
   pour lequel le jeu est fait. */
.bs {
  position: relative;
  height: 100%;
  display: flex;
  overflow: hidden;
  /* LE DÉCOR EST UNE ILLUSTRATION, RÉPÉTÉE PAR SON REFLET.
     `outils/fond-eclats.py` colle l'image et son miroir : la tuile a la
     même colonne de pixels à gauche et à droite, donc la répétition ne laisse
     aucune couture — par construction, pas par chance.

     `auto 100%` : c'est la HAUTEUR qui se cale sur l'écran, la largeur suit.
     Un téléphone en 9/19 en voit une demi-tuile, un grand écran une et
     demie ; dans les deux cas l'horizon est au même endroit et rien n'est
     déformé.

     La couleur derrière est celle du ciel de l'image : elle couvre la seconde
     où le décor n'est pas encore arrivé, et l'écran ne part pas en blanc. */
  background: url("fond.webp?v=1") repeat-x bottom center / auto 100%, #a9d9ef;
}

.bs-ecran {
  /* AU-DESSUS DU DÉCOR. `.bs::after` est engendré en dernier : sans ce
     z-index, les collines se peignent PAR-DESSUS le plateau et le jeu
     disparaît derrière le paysage. */
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; max-width: 520px; height: 100%;
  margin: 0 auto; padding: 10px;
  justify-content: center;
}
@media (min-width: 1180px) { .bs-ecran { max-width: 560px; } }

/* --- l'accueil -------------------------------------------------------------
   UN ÉCRAN, PAS UNE FENÊTRE. Une carte posée au milieu se lit comme une
   interruption — « clique pour continuer » — alors que c'est la porte
   d'entrée du jeu, et le seul endroit où l'on voit ce qu'on possède. Elle
   prend donc toute la scène, sur le décor, et la colonne suit la même
   largeur que le plateau pour que l'œil ne se réajuste pas au passage.

   Le verre dépoli plutôt qu'un fond plein : l'illustration a coûté assez
   cher pour qu'on la laisse voir. */
.bs-accueil {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: linear-gradient(180deg, rgba(20,30,60,.32), rgba(20,30,60,.50));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  overflow-y: auto;
}
.bs-accueil[hidden] { display: none; }

.bs-accueil-col {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; align-items: stretch;
  text-align: center;
}

.bs-accueil-titre {
  margin: 0 0 4px; font-size: 44px; line-height: 1; letter-spacing: -.02em;
  color: #fff;
  /* LA COULEUR VIENT DU DÉCOR, PAS DE L'ANCIEN JEU. Le titre et le bouton
     étaient rouge corail : la couleur des petits monstres d'avant, du temps
     où le jeu s'appelait « Bestioles » et où ses pièces étaient dessinées au
     code. Sur un monde de cristaux lavande et menthe, ce rouge
     jurait : il n'appartenait plus à rien de ce qu'on voit.
     On prend donc les teintes qui SONT à l'écran : la lavande du décor pour
     le relief du titre, le turquoise des pièces pour le bouton. */
  text-shadow: 0 3px 0 #7b6bb0, 0 6px 16px rgba(30, 40, 80, .45);
}
.bs-accueil-texte {
  margin: 0 0 18px; font-size: 14.5px; line-height: 1.45; color: #fff;
  text-shadow: 0 1px 6px rgba(20, 30, 60, .6);
}

/* Trois par ligne : niveau, cœurs, pièces — puis les bonus en dessous. */
.bs-tuiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 0 0 20px;
}
.bs-tuile {
  background: rgba(255, 253, 246, .93);
  border: 3px solid rgba(240, 224, 196, .9);
  border-radius: 16px;
  padding: 9px 6px 8px;
  color: #4a3570;
  min-width: 0;
}
.bs-tuile i { display: block; font-style: normal; font-size: 19px; line-height: 1.1; }
.bs-tuile b { display: block; font-size: 19px; line-height: 1.2;
  font-variant-numeric: tabular-nums; }
.bs-tuile span { display: block; font-size: 10.5px; letter-spacing: .06em;
  font-weight: 700; color: #8a7aa8; text-transform: uppercase; }
.bs-tuile.bs-t-vide { opacity: .55; }
/* Le petit compte à rebours sous les cœurs. */
.bs-tuile em { display: block; font-style: normal; font-size: 11px; color: #8a7aa8;
  font-variant-numeric: tabular-nums; }

.bs-jouer {
  width: 100%; padding: 16px 18px;
  border: 0; border-radius: 18px; cursor: pointer;
  font: inherit; font-size: 21px; font-weight: 800; color: #fff;
  /* Le turquoise du losange, poussé d'un cran pour qu'un texte blanc tienne
     dessus : la teinte des pièces de jeu est trop claire pour un bouton. */
  background: linear-gradient(180deg, #3fd3c6, #14a89c);
  box-shadow: 0 5px 0 #0b8177, 0 10px 24px rgba(20, 60, 70, .3);
}
.bs-jouer:active { transform: translateY(3px); box-shadow: 0 2px 0 #0b8177; }
.bs-jouer:disabled { opacity: .62; cursor: default; box-shadow: none; transform: none; }

/* La boutique : deux boutons secondaires, clairement moins appuyés que
   « Jouer » — et grisés tant que la bourse ne suit pas, plutôt que cachés :
   savoir ce qu'on pourra s'offrir fait partie du jeu. */
.bs-boutique { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.bs-achat {
  padding: 10px 8px; border-radius: 14px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1.25;
  color: #6b5a1c;
  background: rgba(255, 249, 232, .94);
  border: 3px solid rgba(240, 214, 150, .95);
  box-shadow: 0 3px 0 rgba(150, 110, 30, .18);
}
.bs-achat:active { transform: translateY(2px); box-shadow: none; }
.bs-achat:disabled { opacity: .52; cursor: default; box-shadow: none; transform: none; }
.bs-achat b { display: block; font-size: 15px; }

.bs-accueil-record {
  margin: 12px 0 0; font-size: 13px; color: #fff; min-height: 1.2em;
  text-shadow: 0 1px 5px rgba(20, 30, 60, .6);
}

/* Discret exprès : on ne propose pas d'effacer sa progression avec le même
   poids qu'on propose de jouer. */
.bs-recommencer {
  margin-top: 4px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; color: rgba(255,255,255,.8); text-decoration: underline;
  align-self: center;
}
.bs-recommencer:hover { color: #fff; }
.bs-recommencer[hidden] { display: none; }

@media (max-width: 480px) {
  .bs-accueil-titre { font-size: 34px; }
  .bs-tuile b, .bs-tuile i { font-size: 17px; }
}

/* --- l'écran d'avant-niveau ------------------------------------------------
   Même mise en page que l'accueil (même colonne, même verre dépoli) : ce sont
   deux moments du même parcours, et changer de forme entre les deux donnerait
   l'impression d'avoir changé de jeu. */
.bs-avant {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: linear-gradient(180deg, rgba(20,30,60,.32), rgba(20,30,60,.50));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  overflow-y: auto;
}
.bs-avant[hidden] { display: none; }
.bs-avant-niveau {
  margin: 0 0 6px; font-size: 34px; line-height: 1; color: #fff;
  text-shadow: 0 3px 0 #7b6bb0, 0 6px 16px rgba(30, 40, 80, .45);
}
.bs-avant-but {
  margin: 0 0 18px; font-size: 15px; line-height: 1.45; color: #fff;
  text-shadow: 0 1px 6px rgba(20, 30, 60, .6);
}
.bs-avant-legende {
  margin: 0 0 8px; font-size: 12px; letter-spacing: .06em; font-weight: 700;
  text-transform: uppercase; color: rgba(255,255,255,.85);
  text-shadow: 0 1px 5px rgba(20, 30, 60, .6);
}

/* LES BONUS SE COCHENT, ILS NE SE LANCENT PAS. Un bouton qui part au premier
   clic emporterait une tornade pour un niveau facile, sans retour possible :
   on choisit, on voit son choix, et c'est « Commencer » qui engage. */
.bs-boosters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.bs-booster {
  position: relative;
  padding: 10px 4px 8px; border-radius: 16px; cursor: pointer;
  font: inherit; line-height: 1.15; color: #4a3570;
  background: rgba(255, 253, 246, .93);
  border: 3px solid rgba(240, 224, 196, .9);
  box-shadow: 0 3px 0 rgba(120, 80, 40, .14);
}
.bs-booster i { display: block; font-style: normal; font-size: 22px; }
.bs-booster span { display: block; font-size: 10px; letter-spacing: .03em;
  font-weight: 700; color: #8a7aa8; margin-top: 2px; }
.bs-booster b {
  position: absolute; right: -5px; top: -6px;
  min-width: 20px; height: 20px; padding: 0 4px;
  border-radius: 999px; background: #38d7cc; color: #08312e;
  border: 2px solid #fffdf6; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
/* CHOISI : le contour change, pas seulement la couleur de fond — sur un
   petit écran au soleil, une nuance de fond ne se voit pas. */
.bs-booster.bs-pris {
  border-color: #14a89c; background: #e6fbf9;
  box-shadow: 0 0 0 3px rgba(20, 168, 156, .3), 0 3px 0 rgba(11, 129, 119, .3);
}
.bs-booster.bs-achetable b { background: #ffc42e; color: #6b5a1c; }
.bs-booster:disabled { opacity: .45; cursor: default; box-shadow: none; }

/* --- les cartes ----------------------------------------------------------- */
.bs-carte {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: 20px;
  background: #fffdf6;
  border: 3px solid #f0e0c4;
  box-shadow: 0 4px 0 rgba(120, 80, 40, .10);
  color: #4a3570;
}
.bs-chiffre { text-align: center; line-height: 1; flex: none; }
.bs-chiffre span { display: block; font-size: 10.5px; letter-spacing: .09em;
  font-weight: 700; color: #8a7aa8; }
.bs-chiffre b { font-size: 30px; font-variant-numeric: tabular-nums; }

/* Les derniers coups se voient. Un compteur qui ne change pas d'aspect à
   quatre coups de la fin laisse le joueur découvrir sa défaite. */
.bs-chiffre.bs-urgent b, .bs-chiffre.bs-urgent span { color: #e03b4a; }

/* --- LES OBJECTIFS, EN IMAGES ---------------------------------------------
   Une phrase (« nettoyer les seize cases de sol ») se lit une fois et ne se
   relit plus. Une icône et un nombre se lisent à chaque coup, sans quitter le
   plateau des yeux — et deux objectifs tiennent côte à côte là où deux
   phrases ne tiendraient pas. */
.bs-niv {
  flex: none; font-size: 13px; line-height: 1.1; color: #8a7aa8;
  padding: 5px 10px; border-radius: 999px; background: rgba(120, 90, 160, .09);
}
.bs-niv b { display: block; font-size: 18px; color: #4a3570; }

/* LES VIES. Un cœur éteint garde sa place : la rangée ne se réorganise pas
   à chaque perte, et l'on voit ce qu'on avait au départ. */
.bs-vies { flex: none; font-size: 15px; letter-spacing: 1px; line-height: 1; }
.bs-vies i { font-style: normal; }
.bs-vies i.bs-morte { opacity: .28; filter: grayscale(1); }
/* Le compte à rebours de la prochaine vie, collé aux cœurs. */
.bs-vies b { margin-left: 5px; font-size: 12px; color: #8a7aa8;
  font-variant-numeric: tabular-nums; letter-spacing: 0; }

.bs-sous {
  flex: none; font-size: 13px; line-height: 1; white-space: nowrap;
  padding: 5px 9px; border-radius: 999px; background: rgba(255, 196, 46, .22);
  color: #8a6a1f; font-variant-numeric: tabular-nums; font-weight: 700;
}

.bs-buts { display: flex; gap: 8px; margin: 0 auto; }
.bs-but {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: 14px;
  background: rgba(120, 90, 160, .09);
}
.bs-but canvas { display: block; width: 30px; height: 30px; }
.bs-but b { font-size: 17px; font-variant-numeric: tabular-nums; }
.bs-but.bs-fait { background: rgba(56, 207, 126, .18); }
.bs-but.bs-fait b { color: #1f9a58; }

.bs-son {
  border: 3px solid #f0e0c4; background: #fffdf6; color: inherit;
  border-radius: 999px; width: 38px; height: 38px; cursor: pointer; font-size: 15px;
  flex: none;
}

/* --- le terrain ----------------------------------------------------------- */
/* LE TERRAIN N'A PLUS DE FOND À LUI : le décor est passé sur l'écran entier,
   et le plateau se dessine lui-même, case par case, sur le canevas. Lui garder
   une boîte donnerait un rectangle visible autour d'un plateau carré — deux
   cadres pour une seule chose. */
.bs-terrain {
  position: relative; flex: 1; min-height: 0;
  /* LE DOIGT JOUE, IL NE FAIT PAS DÉFILER LA PAGE. Sans cette ligne, glisser
     un éclat déplace le site sous le joueur. */
  touch-action: none;
}
.bs-terrain canvas { position: relative; display: block; width: 100%; height: 100%; }

/* --- le pied : les bonus d'un côté, le score de l'autre -------------------
   IL LUI FAUT UNE CARTE, COMME EN HAUT. Le pied flottait à même le décor :
   tant que le fond était un dégradé uni, ça passait ; posé sur des collines,
   des moutons et une rivière, le record en gris clair devient illisible et le
   score se confond avec l'herbe. Ce n'est pas une question de goût, c'est un
   chiffre que le joueur doit pouvoir lire.

   La barre du haut et celle du bas encadrent maintenant le plateau de la même
   façon — et c'est aussi ce qui fait qu'on lit l'écran comme un écran de jeu
   plutôt que comme des boutons posés sur une image. */
.bs-pied {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  border-radius: 20px;
  background: #fffdf6;
  border: 3px solid #f0e0c4;
  box-shadow: 0 4px 0 rgba(120, 80, 40, .10);
}
.bs-scores { margin-left: auto; text-align: right; line-height: 1.25; }
.bs-scores .bs-record { display: block; font-size: 12px; color: #8a7aa8; }
.bs-scores .bs-score { font-size: 22px; font-variant-numeric: tabular-nums; color: #4a3570; }

/* --- les bonus ------------------------------------------------------------
   Ils sont SOUS l'objectif, pas à côté du score : ce sont des outils pour
   atteindre le but, pas une récompense. */
.bs-bonus { display: flex; gap: 10px; }
.bs-bonus-btn {
  position: relative;
  width: 52px; height: 52px;
  /* PLUS CLAIR QUE LA CARTE, PAS IDENTIQUE : sur un pied devenu crème, un
     bouton crème sur fond crème n'a plus de relief et ne se donne plus pour
     un bouton. */
  border: 3px solid #f0e0c4; border-radius: 999px;
  background: #fff6e2; color: inherit; cursor: pointer;
  font: inherit; line-height: 1; font-size: 22px;
  box-shadow: 0 4px 0 rgba(120, 80, 40, .12);
}
/* La réserve est une pastille sur le bouton, pas un chiffre à côté : on doit
   pouvoir la lire sans quitter le plateau des yeux. */
.bs-bonus-btn b {
  position: absolute; right: -4px; bottom: -4px;
  min-width: 21px; height: 21px; padding: 0 4px;
  border-radius: 999px; background: #ff5a63; color: #fff;
  border: 2px solid #fffdf6;
  font-size: 12px; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
}
.bs-bonus-btn:disabled { opacity: .42; cursor: default; box-shadow: none; }
.bs-bonus-btn:disabled b { background: #9a92a8; }

/* ARMÉ : le bouton doit crier, parce que le clic suivant ne fera pas ce que
   le joueur croit — il cassera une case au lieu d'échanger deux éclats. */
.bs-bonus-btn.bs-arme {
  background: #ff5a63; border-color: #d83b48; color: #fff;
  animation: bs-pulse 1s ease-in-out infinite;
}

@keyframes bs-pulse { 50% { transform: translateY(-2px); } }

/* LA LIGNE D'AIDE, sur sa propre pastille. Même raison que le pied : posée
   sur l'herbe, elle disparaissait. Elle ne prend que la largeur de son texte,
   pour ne pas barrer le paysage quand elle est vide. */
.bs-aide {
  margin: 0 auto; align-self: center;
  text-align: center; font-size: 13px;
  min-height: 1.2em;
  color: #5a4a72;
  padding: 3px 12px; border-radius: 999px;
  background: rgba(255, 253, 246, .88);
}
.bs-aide:empty { background: none; }

/* --- le soir --------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bs {
    background: url("fond-nuit.webp?v=1") repeat-x bottom center / auto 100%, #2a3358;
  }
  :root:not([data-theme="light"]) .bs-aide {
    background: rgba(42, 35, 52, .88); color: #e6dcf0;
  }
  :root:not([data-theme="light"]) .bs-achat {
    background: rgba(42, 35, 52, .94); border-color: #4c4030; color: #f0d78a;
  }
  :root:not([data-theme="light"]) .bs-booster {
    background: rgba(42, 35, 52, .93); border-color: #43384f; color: #f0e7f6;
  }
  :root:not([data-theme="light"]) .bs-booster span { color: #a597b8; }
  :root:not([data-theme="light"]) .bs-booster.bs-pris { background: #143b39; border-color: #14a89c; }
  :root:not([data-theme="light"]) .bs-tuile {
    background: rgba(42, 35, 52, .93); border-color: #43384f; color: #f0e7f6;
  }
  :root:not([data-theme="light"]) .bs-tuile span,
  :root:not([data-theme="light"]) .bs-tuile em { color: #a597b8; }
  :root:not([data-theme="light"]) .bs-pied,
  :root:not([data-theme="light"]) .bs-carte,
  :root:not([data-theme="light"]) .bs-bonus-btn,
  :root:not([data-theme="light"]) .bs-son {
    background: #2a2334; border-color: #43384f; color: #f0e7f6;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .25);
  }
  :root:not([data-theme="light"]) .bs-chiffre span,
  :root:not([data-theme="light"]) .bs-scores .bs-record { color: #a597b8; }
  :root:not([data-theme="light"]) .bs-but,
  :root:not([data-theme="light"]) .bs-niv { background: rgba(255, 255, 255, .09); }
  :root:not([data-theme="light"]) .bs-niv b { color: #f0e7f6; }
  :root:not([data-theme="light"]) .bs-vies b { color: #a597b8; }
  :root:not([data-theme="light"]) .bs-sous { background: rgba(255,196,46,.16); color: #f0d78a; }
  :root:not([data-theme="light"]) .bs-scores .bs-score { color: #f0e7f6; }
}
:root[data-theme="dark"] .bs {
  background: url("fond-nuit.webp?v=1") repeat-x bottom center / auto 100%, #2a3358;
}
:root[data-theme="dark"] .bs-aide { background: rgba(42, 35, 52, .88); color: #e6dcf0; }
:root[data-theme="dark"] .bs-achat {
  background: rgba(42, 35, 52, .94); border-color: #4c4030; color: #f0d78a;
}
:root[data-theme="dark"] .bs-booster {
  background: rgba(42, 35, 52, .93); border-color: #43384f; color: #f0e7f6;
}
:root[data-theme="dark"] .bs-booster span { color: #a597b8; }
:root[data-theme="dark"] .bs-booster.bs-pris { background: #143b39; border-color: #14a89c; }
:root[data-theme="dark"] .bs-tuile {
  background: rgba(42, 35, 52, .93); border-color: #43384f; color: #f0e7f6;
}
:root[data-theme="dark"] .bs-tuile span,
:root[data-theme="dark"] .bs-tuile em { color: #a597b8; }
:root[data-theme="dark"] .bs-pied,
:root[data-theme="dark"] .bs-carte,
:root[data-theme="dark"] .bs-bonus-btn,
:root[data-theme="dark"] .bs-son {
  background: #2a2334; border-color: #43384f; color: #f0e7f6;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .25);
}
:root[data-theme="dark"] .bs-chiffre span,
:root[data-theme="dark"] .bs-scores .bs-record { color: #a597b8; }
:root[data-theme="dark"] .bs-but,
:root[data-theme="dark"] .bs-niv { background: rgba(255, 255, 255, .09); }
:root[data-theme="dark"] .bs-niv b { color: #f0e7f6; }
:root[data-theme="dark"] .bs-vies b { color: #a597b8; }
:root[data-theme="dark"] .bs-sous { background: rgba(255,196,46,.16); color: #f0d78a; }
:root[data-theme="dark"] .bs-scores .bs-score { color: #f0e7f6; }

/* --- sur petit écran ------------------------------------------------------- */
@media (max-width: 480px) {
  .bs-ecran { padding: 6px; gap: 8px; }
  .bs-carte { padding: 8px 10px; border-radius: 16px; gap: 8px; }
  .bs-chiffre b { font-size: 25px; }
  .bs-son { width: 34px; height: 34px; }
  .bs-but { padding: 3px 8px 3px 3px; gap: 4px; }
  .bs-but canvas { width: 26px; height: 26px; }
  .bs-but b { font-size: 15px; }
  .bs-niv { font-size: 11px; padding: 4px 8px; }
  .bs-vies { font-size: 12px; }
  .bs-sous { font-size: 11px; padding: 4px 7px; }
  .bs-niv b { font-size: 15px; }
  .bs-bonus-btn { width: 46px; height: 46px; font-size: 19px; }
  .bs-pied { padding: 6px 10px; border-radius: 16px; }
}

/* Quelqu'un qui demande moins d'animation en a une vraie raison. */
@media (prefers-reduced-motion: reduce) {
  .bs-bonus-btn.bs-arme { animation: none; }
}