/* LOT : ui — styles de l'interface (HUD, cinq écrans, bannière, compte à rebours, flèches de bord d'écran).

   Règles du contrat (ARCHITECTURE.md § Q et § V) :
   - aucune des trois propriétés interdites par le § Q (flou d'arrière-plan, filtre, mode de fusion) : le canvas est
     redessiné à chaque image derrière l'interface ;
   - barres en transform: scaleX sur un élément de largeur fixe, jamais width ;
   - un écran masqué est en display: none, jamais seulement transparent ;
   - animations et transitions sur transform et opacity seulement, aucune transition sur une propriété que ui.js
     réécrit en continu (les remplissages des barres n'en ont pas) ;
   - une seule police chargée, Pixelta (assets/polices/, servie avec le jeu, complétée des accents français par
     outils/completer_pixelta.py), les polices du système en repli ; aucune ressource externe.

   Parti pris, accordé à la direction artistique low-poly du cahier : des aplats sans dégradé ni flou, des formes
   coupées en biais comme des facettes (parallélogrammes pour le HUD et les boutons, coins rabattus pour les
   panneaux), la palette du cahier et rien d'autre. Le cyan est la couleur du joueur (fragments, dash, ce qu'on peut
   acheter), le rouge celle du danger (boss, PV bas, flèches), le vert celle de l'XP.

   Toutes les cotes sont en rem : ui.js règle la taille de base sur la fenêtre (UI.scale dans config.js), si bien
   que la même mise en page se lit à 1280 × 720 comme à 1920 × 1080. */

/* Pixelta n'a qu'une graisse et qu'une largeur : déclarée pour toutes les graisses et largeurs demandées plus bas
   (600 à 800, condensed), elle n'est jamais grossie ni étirée par le navigateur. Agrandie de 12 % : à taille égale,
   étroite comme elle est, elle paraissait plus petite que les polices du système qu'elle remplace. */
@font-face {
  font-family: 'Pixelta';
  src: url('assets/polices/Pixelta.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 50% 200%;
  size-adjust: 112%;
  font-display: block;
}

:root {
  /* Palette du cahier. ui.js réécrit ces variables depuis PALETTE (config.js) : source unique. */
  --sr-sand: #d9a066;
  --sr-rock: #8f5e3b;
  --sr-rock-dark: #6f4729;
  --sr-bone: #ede6d6;
  --sr-cyan: #3fe0d0;
  --sr-red: #ff3b3b;
  --sr-xp: #4be36a;
  /* Dérivées : l'ombre de la roche (fonds), trois crans du plus sombre au plus clair, et un sable éteint (texte
     secondaire). */
  --sr-ink: #21160e;
  --sr-ink-2: #2d2016;
  --sr-ink-3: #46321f;
  --sr-muted: #c2a888;
  --sr-cyan-hi: #8df2e7;
  --sr-skew: -14deg;
  /* Durées, réécrites par ui.js depuis UI (config.js). */
  --sr-pop-s: 0.25s;
  --sr-screen-s: 0.14s;
  --sr-bump-s: 0.22s;
  --sr-arrow: 1.75rem;
  /* Tous les textes en Pixelta ; repli : une linéale étroite et grasse du système. Chaque « font » qui s'en sert
     demande aussi la largeur « condensed », pour les familles du repli à largeur variable (Bahnschrift sous Windows). */
  --sr-display: 'Pixelta', 'Avenir Next Condensed', 'DIN Condensed', Bahnschrift, 'Roboto Condensed', 'Arial Narrow',
    'Helvetica Neue', Arial, sans-serif;
  --sr-text: 'Pixelta', 'Avenir Next', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Roboto, Arial, sans-serif;
}

html {
  /* Repli si ui.js n'a pas encore réglé l'échelle : 16 px à 1280 × 720, 24 px à 1920 × 1080. */
  font-size: clamp(11px, min(2.2223vh, 1.25vw), 32px);
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #6f4729;
  color: var(--sr-bone);
  font-family: var(--sr-text);
  font-synthesis: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

/* Le canvas #game se dimensionne lui-même (render.js). Ancre du contrat (§ A), à ne jamais retirer : la racine
   de l'interface est positionnée AU-DESSUS du canvas. */
#ui-root {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

#ui-root,
#ui-root * {
  box-sizing: border-box;
}

/* Planche des icônes (symboles SVG) : présente dans le document, sans surface. */
.sr-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sr-ic {
  display: block;
  flex: none;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.sr-num {
  font-variant-numeric: tabular-nums;
}

/* ===================================================================================================================
   Formes communes
   =================================================================================================================== */

/* Facette : panneau à deux coins rabattus, liseré de 2 px. Le liseré est le fond de l'élément, le remplissage un
   pseudo-élément en retrait découpé de la même façon. */
.sr-facet {
  --cut: 1.25rem;
  --bw: 2px;
  --edge: var(--sr-rock);
  --fill: var(--sr-ink);
  position: relative;
  isolation: isolate;
  background: var(--edge);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}

.sr-facet::before {
  --c2: calc(var(--cut) - 0.586 * var(--bw));
  content: '';
  position: absolute;
  inset: var(--bw);
  z-index: -1;
  background: var(--fill);
  clip-path: polygon(0 0, calc(100% - var(--c2)) 0, 100% var(--c2), 100% 100%, var(--c2) 100%, 0 calc(100% - var(--c2)));
}

/* Touche de clavier. */
.sr-key {
  display: inline-block;
  min-width: 1.5rem;
  padding: 0.2rem 0.4rem 0.15rem;
  font: 700 0.75rem/1.1 var(--sr-text);
  text-align: center;
  white-space: nowrap;
  color: var(--sr-bone);
  background: var(--sr-ink-3);
  box-shadow:
    inset 0 0 0 1px rgba(237, 230, 214, 0.32),
    0 0.125rem 0 rgba(0, 0, 0, 0.5);
}

/* Bouton : parallélogramme. Le fond est un pseudo-élément incliné, le texte reste droit. */
.sr-btn {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-width: 13.5rem;
  margin: 0;
  padding: 0.75rem 1.5rem 0.7rem;
  border: 0;
  background: none;
  color: var(--sr-bone);
  font: 700 condensed 1.125rem/1 var(--sr-display);
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: transform 0.08s ease-out;
}

.sr-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sr-ink-3);
  box-shadow: inset 0 0 0 2px var(--sr-rock);
  transform: skewX(var(--sr-skew));
}

.sr-btn:hover {
  transform: translateY(-0.0625rem);
}

.sr-btn:hover::before {
  background: #5a4129;
  box-shadow: inset 0 0 0 2px var(--sr-bone);
}

.sr-btn:active {
  transform: translateY(0.0625rem) scale(0.985);
}

.sr-primary {
  color: var(--sr-ink);
}

.sr-primary::before {
  background: var(--sr-cyan);
  box-shadow: none;
}

.sr-primary:hover::before {
  background: var(--sr-cyan-hi);
  box-shadow: none;
}

.sr-primary .sr-key {
  color: var(--sr-ink);
  background: rgba(33, 22, 14, 0.16);
  box-shadow: inset 0 0 0 1px rgba(33, 22, 14, 0.45);
}

/* Curseur de réglage : libellé et valeur sur une ligne, piste dessous. La part remplie suit --v (écrit par ui.js
   au moment où la valeur change). */
.sr-settings {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.sr-slider {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  row-gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--sr-muted);
}

.sr-slider-value {
  font: 700 condensed 1rem/1 var(--sr-display);
  font-variant-numeric: tabular-nums;
  color: var(--sr-bone);
}

.sr-slider input {
  -webkit-appearance: none;
  appearance: none;
  grid-column: 1 / -1;
  width: 100%;
  height: 1.25rem;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
}

.sr-slider input::-webkit-slider-runnable-track {
  height: 0.375rem;
  background: linear-gradient(to right, var(--sr-cyan) 0 var(--v, 50%), var(--sr-ink-3) var(--v, 50%) 100%);
}

.sr-slider input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0.625rem;
  height: 1.25rem;
  margin-top: -0.4375rem;
  border: 0;
  border-radius: 0;
  background: var(--sr-bone);
  box-shadow: 0 0 0 2px var(--sr-ink);
}

.sr-slider input::-moz-range-track {
  height: 0.375rem;
  background: var(--sr-ink-3);
}

.sr-slider input::-moz-range-progress {
  height: 0.375rem;
  background: var(--sr-cyan);
}

.sr-slider input::-moz-range-thumb {
  width: 0.625rem;
  height: 1.25rem;
  border: 0;
  border-radius: 0;
  background: var(--sr-bone);
  box-shadow: 0 0 0 2px var(--sr-ink);
}

/* Cellule « grand nombre, petit libellé » (meilleur score, bilan de fin de partie). Quand la place manque (12 345
   robots, 62:05, fenêtre étroite), les cellules passent à la ligne ENTIÈRES au lieu de rétrécir : sans flex-wrap, la
   seule cellule qui peut rétrécir est celle dont le libellé a une espace, et il passait sur deux lignes pendant que
   ses voisins restaient sur une. */
.sr-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
}

.sr-cell-num {
  font: 800 condensed 2.5rem/1 var(--sr-display);
  font-variant-numeric: tabular-nums;
  color: var(--sr-bone);
}

.sr-cell-label {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--sr-muted);
}

/* Crans de niveau (stat d'arme, empilement d'un bonus). */
.sr-pips {
  display: flex;
  gap: 0.1875rem;
}

.sr-pip {
  width: 0.5rem;
  height: 0.75rem;
  background: var(--sr-ink-3);
  transform: skewX(var(--sr-skew));
}

.sr-pip.sr-on {
  background: var(--wc, var(--sr-cyan));
}

.sr-pip.sr-new {
  animation: sr-pip-in var(--sr-bump-s) ease-out both;
}

/* ===================================================================================================================
   HUD
   =================================================================================================================== */

.sr-hud {
  position: absolute;
  inset: 0;
  display: none;
}

/* Barre d'XP : pleine largeur, tout en haut. */
.sr-xp {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0.5rem;
  background: rgba(33, 22, 14, 0.78);
  border-bottom: 2px solid var(--sr-ink);
}

.sr-xp-fill {
  width: 100%;
  height: 100%;
  background: var(--sr-xp);
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}

.sr-hud-top {
  position: absolute;
  top: 1.125rem;
  left: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Pastille « libellé + nombre » : seul le nombre est réécrit. */
.sr-chip {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.3rem 0.9rem 0.2rem;
  font: 600 condensed 0.9375rem/1 var(--sr-display);
  letter-spacing: 0.02em;
  color: var(--sr-muted);
}

.sr-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(33, 22, 14, 0.82);
  transform: skewX(var(--sr-skew));
}

.sr-chip .sr-num {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--sr-bone);
}

.sr-frag {
  margin-left: auto;
  align-items: center;
  gap: 0.35rem;
  color: var(--sr-cyan);
}

.sr-frag .sr-ic {
  font-size: 1.125rem;
}

.sr-frag .sr-num {
  color: var(--sr-cyan);
}

/* Barre de vie du boss : centrée sous les pastilles. */
.sr-boss {
  position: absolute;
  left: 50%;
  top: 3.625rem;
  width: 44%;
  margin-left: -22%;
  display: none;
  align-items: center;
  gap: 0.75rem;
}

.sr-boss-name {
  position: relative;
  isolation: isolate;
  padding: 0.3rem 0.8rem 0.2rem;
  font: 800 condensed 1rem/1 var(--sr-display);
  letter-spacing: 0.14em;
  color: var(--sr-ink);
}

.sr-boss-name::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sr-red);
  transform: skewX(var(--sr-skew));
}

.sr-boss-bar {
  position: relative;
  flex: 1 1 auto;
  height: 0.875rem;
  overflow: hidden;
  background: rgba(33, 22, 14, 0.82);
  box-shadow: 0 0 0 2px var(--sr-ink);
  transform: skewX(var(--sr-skew));
}

.sr-boss-fill {
  width: 100%;
  height: 100%;
  background: var(--sr-red);
  transform-origin: left center;
  will-change: transform;
}

/* Repère du passage en phase 2. */
.sr-boss-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--sr-ink);
}

/* Bas à gauche : armes, PV, dash. */
.sr-hud-bottom {
  position: absolute;
  left: 1.5rem;
  bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.sr-weapons {
  display: flex;
  gap: 0.3rem;
  margin-left: 0.35rem;
}

.sr-weapon {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 2.75rem;
  color: var(--wc);
}

.sr-weapon::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(33, 22, 14, 0.82);
  box-shadow: inset 0 -0.1875rem 0 var(--wc);
  transform: skewX(var(--sr-skew));
}

.sr-weapon .sr-ic {
  font-size: 1.75rem;
  margin: -0.3rem 0 0 -0.5rem;
}

.sr-weapon-level {
  position: absolute;
  right: 0.3rem;
  bottom: 0.3rem;
  font: 700 condensed 0.875rem/1 var(--sr-display);
  font-variant-numeric: tabular-nums;
  color: var(--sr-bone);
}

/* Emplacement libre : une case creuse, sans icône. */
.sr-weapon.sr-empty::before {
  background: rgba(33, 22, 14, 0.38);
  box-shadow: inset 0 0 0 2px rgba(33, 22, 14, 0.55);
}

.sr-weapon.sr-empty > * {
  display: none;
}

/* Bandeau « libellé, barre, valeur ». */
.sr-vital {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.9rem 0.3rem 0.8rem;
}

.sr-vital::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(33, 22, 14, 0.82);
  transform: skewX(var(--sr-skew));
}

.sr-vital-label {
  width: 2.1rem;
  font: 700 condensed 0.9375rem/1 var(--sr-display);
  letter-spacing: 0.02em;
  color: var(--sr-muted);
}

.sr-hp,
.sr-dash {
  position: relative;
  overflow: hidden;
  background: var(--sr-ink-3);
  transform: skewX(var(--sr-skew));
}

.sr-hp {
  width: 13.5rem;
  height: 1rem;
}

.sr-dash {
  width: 13.5rem;
  height: 0.4375rem;
}

.sr-hp-fill,
.sr-dash-fill {
  width: 100%;
  height: 100%;
  transform-origin: left center;
  will-change: transform;
}

.sr-hp-fill {
  background: var(--sr-bone);
}

.sr-dash-fill {
  background: var(--sr-cyan);
}

.sr-hp-text {
  min-width: 4.6rem;
  font: 700 condensed 1.125rem/1 var(--sr-display);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  color: var(--sr-bone);
}

.sr-hp-sep {
  margin: 0 0.2rem;
  color: var(--sr-muted);
}

.sr-hp-max {
  color: var(--sr-muted);
}

/* PV bas : le remplissage passe au rouge et bat. */
.sr-vital.sr-low .sr-hp-fill {
  background: var(--sr-red);
}

.sr-vital.sr-low .sr-hp {
  animation: sr-beat 0.7s ease-in-out infinite;
}

.sr-vital.sr-low .sr-hp-now {
  color: var(--sr-red);
}

/* Dash en recharge : remplissage éteint ; prêt : libellé cyan. */
.sr-vital-dash {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.sr-vital-dash .sr-vital-label {
  font-size: 0.8125rem;
  color: var(--sr-cyan);
}

.sr-vital-dash.sr-charging .sr-vital-label {
  color: var(--sr-muted);
}

.sr-vital-dash.sr-charging .sr-dash-fill {
  opacity: 0.5;
}

/* Flèches de bord d'écran : ui.js écrit --x, --y (position sur le bord) et --r (direction du robot). La couche est
   la dernière du HUD (ui.js, buildHud) : une flèche passe AU-DESSUS des pastilles, de la barre du boss et des bandes
   du bas. Le contour sombre du tracé la détache de ce qu'elle recouvre. */
.sr-arrows {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sr-arrow {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  width: var(--sr-arrow);
  height: var(--sr-arrow);
  margin: calc(var(--sr-arrow) / -2) 0 0 calc(var(--sr-arrow) / -2);
  transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--r, 0deg));
  will-change: transform;
}

.sr-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: sr-nudge 0.8s ease-in-out infinite;
}

.sr-arrow path {
  fill: var(--sr-red);
  stroke: var(--sr-ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
  paint-order: stroke;
}

/* ===================================================================================================================
   Bannière et compte à rebours
   =================================================================================================================== */

.sr-banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 13%;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font: 800 condensed 4.25rem/1 var(--sr-display);
  letter-spacing: 0.02em;
  color: var(--sr-bone);
  text-shadow:
    0 0.06em 0 var(--sr-ink),
    0.03em 0.03em 0 var(--sr-ink),
    -0.03em 0.03em 0 var(--sr-ink);
}

/* Trait sous le texte : la couleur dit de quoi il s'agit (blanc cassé : vague, cyan : vague finie, rouge : boss). */
.sr-banner::after {
  content: '';
  width: 7rem;
  height: 0.375rem;
  background: var(--sr-bone);
  box-shadow: 0 0 0 2px var(--sr-ink);
  transform: skewX(var(--sr-skew));
}

.sr-banner.sr-done::after {
  background: var(--sr-cyan);
}

.sr-banner.sr-alert {
  font-size: 6rem;
  letter-spacing: 0.16em;
  color: var(--sr-red);
}

.sr-banner.sr-alert::after {
  width: 14rem;
  background: var(--sr-red);
}

.sr-countdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 17%;
  display: none;
  text-align: center;
  font: 800 condensed 10rem/1 var(--sr-display);
  font-variant-numeric: tabular-nums;
  color: var(--sr-bone);
  text-shadow:
    0 0.05em 0 var(--sr-ink),
    0.025em 0.025em 0 var(--sr-ink),
    -0.025em 0.025em 0 var(--sr-ink);
  transform-origin: 50% 60%;
}

/* ===================================================================================================================
   Écrans
   =================================================================================================================== */

/* Fond : trois grandes facettes sombres à bords nets (aplats, pas un dégradé). */
.sr-screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: 1.5rem;
  overflow: auto;
  pointer-events: auto;
  background: linear-gradient(
    112deg,
    rgba(24, 16, 10, 0.9) 0 31%,
    rgba(33, 22, 14, 0.84) 31% 68%,
    rgba(24, 16, 10, 0.88) 68% 100%
  );
  animation: sr-fade-in var(--sr-screen-s) ease-out both;
}

.sr-screen h1,
.sr-screen h2,
.sr-screen p {
  margin: 0;
}

.sr-screen h2 {
  font: 800 condensed 2.75rem/1 var(--sr-display);
  letter-spacing: 0.01em;
}

.sr-lead {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--sr-muted);
}

/* Panneau centré (pause, fin de partie). margin: auto et non justify-content : le haut reste atteignable si la
   fenêtre est plus petite que le panneau. */
.sr-panel {
  --cut: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  width: 27rem;
  max-width: 100%;
  margin: auto;
  padding: 2.25rem 2.5rem 2rem;
  animation: sr-rise var(--sr-screen-s) ease-out backwards;
}

.sr-btn-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  width: 100%;
  padding: 0 0.3rem;
}

.sr-rule {
  width: 100%;
  height: 2px;
  background: var(--sr-ink-3);
}

/* ----- Titre : le décor 3D sur tout l'écran, logo centré en haut, « Jouer » centré en bas, infos repliables en bas à
   droite. Cadres et boutons en pixel art (assets/ui/, générés dans ChatGPT puis remis sur leur grille par
   outils/kit-ui/) : étirés en 9-slice, un pixel d'art = --px pixels écran, toujours un nombre entier. ----- */
.sr-title {
  align-items: center;
  justify-content: space-between;
  padding: 2.75rem 2rem 3.25rem;
  background: none;
  overflow: hidden;
}

.sr-logo {
  position: relative;
  animation: sr-rise var(--sr-screen-s) ease-out backwards;
}

.sr-logo img {
  display: block;
  width: 36rem;
  max-width: calc(100vw - 4rem);
  height: auto;
  image-rendering: pixelated;
  user-select: none;
}

.sr-hidden {
  display: none;
}

.sr-title-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  animation: sr-rise var(--sr-screen-s) ease-out backwards;
}

.sr-title .sr-title-status {
  font-size: 0.875rem;
  color: var(--sr-bone);
  text-shadow: 0 0.125rem 0 var(--sr-ink);
}

/* Panneau d'infos : replié, une ligne « Meilleur score  Vague 12 » et son chevron ; déplié, le détail dessous. */
.sr-infos {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  width: 25rem;
  max-width: calc(100vw - 3rem);
  animation: sr-rise var(--sr-screen-s) ease-out backwards;
}

.sr-infos-head {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sr-bone);
  font: inherit;
  text-align: left;
  outline: none;
}

.sr-infos-record {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.sr-infos-label {
  font: 700 condensed 0.9375rem/1 var(--sr-display);
  letter-spacing: 0.03em;
  color: var(--sr-sand);
}

.sr-infos-record .sr-num {
  font: 800 condensed 1.25rem/1 var(--sr-display);
  color: var(--sr-bone);
}

/* Bascule : le petit bouton carré du kit, chevron haut quand c'est replié (on peut déplier), bas quand c'est ouvert. */
.sr-infos-chevron {
  flex: none;
  width: calc(18 * var(--px));
  height: calc(17 * var(--px));
  background: url('assets/ui/bascule-haut.png') 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
}

.sr-infos.sr-open .sr-infos-chevron {
  background-image: url('assets/ui/bascule-bas.png');
}

.sr-infos-head:hover .sr-infos-chevron {
  transform: translateY(-1px);
}

.sr-infos-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.85rem;
}

.sr-infos .sr-best .sr-cell-num {
  font-size: 1.625rem;
}

.sr-infos .sr-best .sr-cell-label {
  margin-top: 0.1rem;
  font-size: 0.75rem;
}

.sr-infos .sr-cells {
  gap: 0.5rem 1.25rem;
}

.sr-infos-rule {
  font-size: 0.875rem;
}

.sr-infos .sr-settings {
  gap: 0.6rem;
}

/* ----- Pause ----- */
.sr-pause .sr-settings {
  margin-top: 0.1rem;
}

/* ----- Choix de bonus ----- */
.sr-levelup {
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
}

.sr-levelup-head {
  text-align: center;
}

.sr-levelup-head h2 {
  font-size: 3.75rem;
  color: var(--sr-xp);
}

.sr-levelup-head .sr-lead {
  margin-top: 0.5rem;
  font-size: 1.0625rem;
  color: var(--sr-bone);
}

.sr-pending {
  margin-top: 0.3rem;
  font-size: 0.875rem;
  color: var(--sr-muted);
}

.sr-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.sr-card {
  -webkit-appearance: none;
  appearance: none;
  --cut: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  width: 17.5rem;
  min-height: 15.5rem;
  margin: 0;
  padding: 1.35rem 1.4rem 1.2rem;
  border: 0;
  color: var(--sr-bone);
  font: inherit;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: transform 0.09s ease-out;
  /* backwards et non both : une fois l'entrée finie, le survol reprend la main sur transform. */
  animation: sr-rise var(--sr-screen-s) ease-out backwards;
}

.sr-card:hover {
  --edge: var(--sr-cyan);
  --fill: var(--sr-ink-2);
  transform: translateY(-0.3rem);
}

.sr-card:active {
  transform: translateY(-0.1rem) scale(0.99);
}

.sr-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding-right: 0.9rem;
}

.sr-card .sr-ic {
  font-size: 2.75rem;
  color: var(--sr-cyan);
}

.sr-card-name {
  margin-top: 0.35rem;
  font: 700 condensed 1.625rem/1.05 var(--sr-display);
}

.sr-card-desc {
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--sr-muted);
}

.sr-card-stacks {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.5rem;
  font: 600 condensed 0.875rem/1 var(--sr-display);
  font-variant-numeric: tabular-nums;
  color: var(--sr-muted);
}

.sr-card-stacks .sr-pip {
  width: 0.625rem;
  height: 0.875rem;
}

/* Le cran que ce choix allume. */
.sr-pip.sr-next {
  background: none;
  box-shadow: inset 0 0 0 2px var(--sr-cyan);
}

/* ----- Boutique : l'écran le plus dense. En-tête (titre, solde), grille 3 × 2 des six armes, pied. ----- */
.sr-shop {
  gap: 0.625rem;
  padding: 1.1rem 1.5rem 1rem;
  /* Plein écran et opaque : ni le jeu ni le HUD ne se lisent au travers. */
  background: linear-gradient(112deg, #1a110b 0 31%, #21160e 31% 68%, #1a110b 68% 100%);
}

.sr-shop-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex: none;
  padding: 0 0.25rem;
}

.sr-shop-head h2 {
  font-size: 2.5rem;
}

.sr-shop-next {
  margin-top: 0.2rem;
  font-size: 0.9375rem;
  color: var(--sr-muted);
}

.sr-shop-next .sr-num {
  font-weight: 700;
  color: var(--sr-bone);
}

.sr-shop-balance {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sr-cyan);
}

.sr-shop-balance .sr-ic {
  font-size: 1.75rem;
}

.sr-shop-balance .sr-num {
  display: inline-block;
  font: 800 condensed 2.75rem/0.9 var(--sr-display);
  /* ui.js change animation-name quand le solde change : le nombre rebondit. */
  transform-origin: left center;
  animation-duration: var(--sr-bump-s);
  animation-timing-function: ease-out;
}

.sr-shop-balance-label {
  align-self: flex-end;
  padding-bottom: 0.2rem;
  font-size: 0.875rem;
  color: var(--sr-muted);
}

.sr-shop-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(min-content, 1fr);
  gap: 0.625rem;
  min-height: min-content;
}

/* Hauteur d'une carte à 1280 × 720 : marges 2 × 9,6 + en-tête 34 + description 30 (deux lignes) et sa marge 3,2 +
   stats 176 + deux écarts de 4,8 = 272 px pour une rangée de 277 px. Toute cote ajoutée ici se paie en défilement
   de la boutique (tests/ui.test.mjs : « pas de défilement », aux deux tailles). */
.sr-wcard {
  --cut: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.6rem 0.9rem 0.6rem;
}

.sr-wcard-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.125rem;
  padding-right: 0.5rem;
}

.sr-wcard-head > .sr-ic {
  font-size: 2rem;
  color: var(--wc);
}

.sr-wname {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font: 700 condensed 1.375rem/1.1 var(--sr-display);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Description : deux lignes au plus, et la place de deux lignes TOUJOURS réservée. Le texte vient de la région du
   lot weapons : une phrase un peu plus longue que celles de la fondation passe à la ligne au lieu de finir en « … »,
   et les lignes de stat des six cartes restent à la même hauteur quelle que soit la longueur de chaque description. */
.sr-wdesc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  height: 2.5em;
  margin-bottom: 0.2rem;
  overflow: hidden;
  font-size: 0.75rem;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--sr-muted);
}

/* À droite de l'en-tête, une seule de ces trois pièces selon l'état de l'arme. */
.sr-wlevel,
.sr-wlock,
.sr-buy {
  display: none;
  flex: none;
}

.sr-wlevel {
  align-items: baseline;
  gap: 0.3rem;
  font: 600 condensed 0.875rem/1 var(--sr-display);
  color: var(--sr-muted);
}

.sr-wlevel .sr-num {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--wc);
}

.sr-wlock {
  align-items: center;
  gap: 0.35rem;
  font: 700 condensed 0.9375rem/1 var(--sr-display);
  color: var(--sr-muted);
}

.sr-wlock .sr-ic {
  font-size: 1rem;
  color: var(--sr-muted);
}

.sr-owned .sr-wlevel,
.sr-locked .sr-wlock {
  display: flex;
}

.sr-buyable .sr-buy {
  display: inline-flex;
}

/* « Acheter » : petit bouton cyan, prix compris. */
.sr-buy {
  min-width: 0;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem 0.45rem;
  font-size: 1rem;
  color: var(--sr-ink);
}

.sr-buy::before {
  background: var(--sr-cyan);
  box-shadow: none;
}

.sr-buy:hover::before {
  background: var(--sr-cyan-hi);
  box-shadow: none;
}

.sr-buy .sr-ic {
  font-size: 0.875rem;
}

.sr-buy .sr-num {
  font-weight: 800;
}

/* Arme verrouillée : carte en retrait, icône éteinte. */
.sr-wcard.sr-locked {
  --edge: var(--sr-ink-3);
  --fill: #1a110b;
}

.sr-wcard.sr-locked .sr-wcard-head > .sr-ic,
.sr-wcard.sr-locked .sr-wname {
  color: #8d7a64;
}

.sr-wcard.sr-buyable {
  --edge: var(--sr-rock-dark);
}

.sr-stats {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Une ligne de stat = un bouton : libellé, crans, valeur, prix. */
.sr-stat {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(7.4rem, auto) 3.6rem;
  align-items: center;
  column-gap: 0.6rem;
  width: 100%;
  height: 2rem;
  margin: 0;
  padding: 0 0.55rem 0 0.6rem;
  border: 0;
  background: none;
  color: var(--sr-bone);
  font: inherit;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.sr-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(237, 230, 214, 0.07);
}

.sr-stat:hover::before {
  background: rgba(63, 224, 208, 0.2);
  box-shadow: inset 0.1875rem 0 0 var(--sr-cyan);
}

.sr-stat:active::before {
  background: rgba(63, 224, 208, 0.32);
}

/* Libellé : une ligne d'ordinaire ; un libellé plus long que sa colonne (« Rayon d'explosion ») passe sur deux
   lignes, qui tiennent dans la hauteur de la ligne de stat, au lieu d'être coupé. Un mot plus large que la colonne
   est coupé plutôt que masqué. */
.sr-stat-label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: 600 condensed 0.9375rem/1 var(--sr-display);
  letter-spacing: 0.01em;
  overflow-wrap: break-word;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.sr-stat-value {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sr-val-cur {
  color: var(--sr-muted);
}

.sr-val-arrow {
  color: var(--sr-rock);
}

.sr-val-next {
  font-weight: 700;
  color: var(--sr-bone);
}

.sr-val-unit {
  font-size: 0.75rem;
  color: var(--sr-muted);
}

.sr-stat-price {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  font: 700 condensed 1rem/1 var(--sr-display);
  font-variant-numeric: tabular-nums;
  color: var(--sr-cyan);
}

.sr-stat-price .sr-ic {
  font-size: 0.8125rem;
}

.sr-stat-max {
  display: none;
  font: 700 condensed 0.8125rem/1 var(--sr-display);
  letter-spacing: 0.04em;
  color: var(--sr-sand);
}

/* États d'une ligne. Trop chère : grisée, sans réaction au survol. */
.sr-stat.sr-disabled,
.sr-buy.sr-disabled {
  cursor: default;
}

.sr-stat.sr-disabled::before,
.sr-stat.sr-disabled:hover::before {
  background: rgba(237, 230, 214, 0.03);
  box-shadow: none;
}

.sr-stat.sr-poor .sr-stat-label,
.sr-stat.sr-poor .sr-val-next,
.sr-stat.sr-poor .sr-stat-price {
  color: #8d7a64;
}

.sr-stat.sr-poor .sr-val-cur,
.sr-stat.sr-poor .sr-val-unit {
  color: #7a6954;
}

.sr-stat.sr-poor .sr-pip.sr-on {
  opacity: 0.5;
}

/* Niveau maximal : la valeur finale, plus de prix. */
.sr-stat.sr-max .sr-val-arrow,
.sr-stat.sr-max .sr-val-next,
.sr-stat.sr-max .sr-stat-cost,
.sr-stat.sr-none .sr-val-arrow,
.sr-stat.sr-none .sr-val-next,
.sr-stat.sr-none .sr-stat-cost {
  display: none;
}

.sr-stat.sr-max .sr-val-cur {
  font-weight: 700;
  color: var(--sr-bone);
}

.sr-stat.sr-max .sr-stat-max {
  display: block;
}

/* Arme pas encore achetée : aperçu des valeurs du niveau 1, éteint. */
.sr-stat.sr-none .sr-stat-label,
.sr-stat.sr-none .sr-val-cur,
.sr-stat.sr-none .sr-val-unit {
  color: #8d7a64;
}

.sr-buy.sr-disabled {
  color: #8d7a64;
}

.sr-buy.sr-disabled::before,
.sr-buy.sr-disabled:hover::before {
  background: var(--sr-ink-3);
  box-shadow: none;
}

.sr-buy.sr-disabled:hover,
.sr-buy.sr-disabled:active {
  transform: none;
}

.sr-shop-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  padding: 0 0.5rem 0 0.25rem;
}

.sr-shop-foot .sr-btn {
  min-width: 15rem;
}

/* ----- Fin de partie ----- */
/* Le panneau fait au moins 36 rem et s'élargit avec le bilan : les quatre cellules d'une longue partie tiennent sur
   une ligne, à l'intérieur de ses marges. */
.sr-gameover .sr-panel {
  --edge: var(--sr-red);
  width: max-content;
  min-width: min(36rem, 100%);
}

.sr-gameover h2 {
  font-size: 4rem;
}

.sr-over-flag {
  display: none;
  position: relative;
  isolation: isolate;
  padding: 0.3rem 0.8rem 0.2rem;
  font: 700 condensed 1rem/1 var(--sr-display);
  letter-spacing: 0.04em;
  color: var(--sr-ink);
}

.sr-over-flag::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sr-cyan);
  transform: skewX(var(--sr-skew));
}

.sr-gameover .sr-cells {
  gap: 0.75rem 2.25rem;
}

.sr-gameover .sr-cell-num {
  font-size: 3.25rem;
}

.sr-over-best {
  font-size: 0.9375rem;
  color: var(--sr-muted);
}

.sr-btn-row {
  display: flex;
  gap: 0.9rem;
  padding: 0 0.3rem;
}

/* ===================================================================================================================
   Animations (transform et opacity seulement)
   =================================================================================================================== */

@keyframes sr-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sr-rise {
  from {
    transform: translateY(0.6rem);
  }
  to {
    transform: none;
  }
}

/* Deux noms pour la même animation : en changer la relance sans lecture de mise en page. */
@keyframes sr-pop-a {
  from {
    opacity: 0;
    transform: scale(1.7);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sr-pop-b {
  from {
    opacity: 0;
    transform: scale(1.7);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sr-ban-in-a {
  from {
    opacity: 0;
    transform: translateY(0.8rem) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sr-ban-in-b {
  from {
    opacity: 0;
    transform: translateY(0.8rem) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sr-ban-out-a {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

@keyframes sr-ban-out-b {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

@keyframes sr-bump-a {
  from {
    transform: scale(1.22);
  }
  to {
    transform: none;
  }
}

@keyframes sr-bump-b {
  from {
    transform: scale(1.22);
  }
  to {
    transform: none;
  }
}

@keyframes sr-swap-a {
  from {
    opacity: 0;
    transform: translateY(0.6rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sr-swap-b {
  from {
    opacity: 0;
    transform: translateY(0.6rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sr-pip-in {
  from {
    transform: skewX(var(--sr-skew)) scale(2.2);
  }
  to {
    transform: skewX(var(--sr-skew));
  }
}

@keyframes sr-beat {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

@keyframes sr-nudge {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: translateX(15%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #ui-root *,
  #ui-root *::before {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
}

/* Fenêtre étroite : la boutique passe sur deux colonnes et défile. */
@media (max-aspect-ratio: 5 / 4) {
  .sr-shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#debug-overlay {
  z-index: 100;
}

/* Modèles des unités en cours de chargement (ARCHITECTURE.md § Z quinquies) : « Jouer » attend, sans changer de place. */
.sr-btn.sr-attente {
  opacity: 0.6;
  cursor: progress;
}

/* ===================================================================================================================
   Kit pixel art (assets/ui/) et curseur de la souris
   =================================================================================================================== */

:root {
  /* Un pixel d'art = un nombre entier de pixels écran : 3 px à 1280 × 720, 4 px à 1920 × 1080. */
  --px: round(down, 0.1875rem, 1px);
}

/* Cadre orné : 9-slice du petit panneau (coins 11 px d'art). Le contenu commence à 8 px d'art du bord : seuls les
   ornements des coins débordent dans le retrait. */
.sr-cadre {
  border: calc(8 * var(--px)) solid transparent;
  border-image: url('assets/ui/panneau-petit.png') 11 fill / calc(11 * var(--px)) / 0 stretch;
  image-rendering: pixelated;
  padding: 0.4rem 0.6rem;
}

/* Boutons du kit (écran titre) : normal, survol, principal. 9-slice : 4 px d'art en haut, 5 en bas (le rebord),
   5 sur les côtés. */
.sr-title .sr-btn {
  min-width: 17rem;
  padding: 1rem 2.25rem calc(1rem + 1 * var(--px));
  font-size: 1.5rem;
  color: var(--sr-bone);
  image-rendering: pixelated;
  border: solid transparent;
  border-width: calc(4 * var(--px)) calc(5 * var(--px)) calc(5 * var(--px));
  border-image: url('assets/ui/bouton.png') 4 5 5 fill / calc(4 * var(--px)) calc(5 * var(--px)) calc(5 * var(--px)) stretch;
}

.sr-title .sr-btn::before {
  content: none;
}

.sr-title .sr-btn:hover {
  border-image-source: url('assets/ui/bouton-survol.png');
}

.sr-title .sr-btn.sr-primary {
  color: var(--sr-ink);
  border-image-source: url('assets/ui/bouton-principal.png');
}

.sr-title .sr-btn.sr-primary:hover {
  transform: translateY(calc(-1 * var(--px)));
}

.sr-title .sr-btn.sr-primary .sr-key {
  color: var(--sr-ink);
  background: rgba(21, 5, 2, 0.14);
  box-shadow: inset 0 0 0 1px rgba(21, 5, 2, 0.5);
}

/* Curseur pixel art (assets/ui/curseur*.png, pointe en 1 1 ; @2x pour les écrans Retina, net au plus proche voisin),
   caché en partie : la souris n'y sert à rien. Trois écritures : la première pour les navigateurs sans image-set(). */
html,
body,
#ui-root * {
  cursor: url('assets/ui/curseur.png') 1 1, default;
  cursor: -webkit-image-set(url('assets/ui/curseur.png') 1x, url('assets/ui/curseur@2x.png') 2x) 1 1, default;
  cursor: image-set(url('assets/ui/curseur.png') 1x, url('assets/ui/curseur@2x.png') 2x) 1 1, default;
}

#ui-root button,
#ui-root input,
#ui-root .sr-stat {
  cursor: url('assets/ui/curseur-survol.png') 1 1, pointer;
  cursor: -webkit-image-set(url('assets/ui/curseur-survol.png') 1x, url('assets/ui/curseur-survol@2x.png') 2x) 1 1, pointer;
  cursor: image-set(url('assets/ui/curseur-survol.png') 1x, url('assets/ui/curseur-survol@2x.png') 2x) 1 1, pointer;
}

#ui-root .sr-btn.sr-attente {
  cursor: progress;
}

html.sr-en-jeu,
html.sr-en-jeu body,
html.sr-en-jeu #ui-root * {
  cursor: none;
}

/* ===================================================================================================================
   DA « carte mère » : UI cyber minimaliste (14/11/2026, docs/da-carte-mere.md § 8)
   Demande de Femz : « lignes moins épaisses, un délire plus cyber minimaliste ». Active quand le décor est la carte
   mère (ui.js pose data-sr-theme sur <html> depuis PEINT.theme) ; « ?theme=desert » garde l'interface d'avant.
   - Filets de 1 px : un trait neutre (--cy-line) pour la structure, cyan pour ce qui est actif ou achetable, rouge
     pour le danger. Aucun parallélogramme, aucun relief : des rectangles nets, coins coupés seulement sur les panneaux,
     une équerre cyan dans le coin haut-gauche de chaque panneau.
   - Fonds : aplats sombres translucides (le § Q interdit le flou d'arrière-plan), trame de 2 rem à peine visible sur
     les écrans plein cadre.
   - Typographie : Pixelta pour les grands titres seulement (titres d'écran, bannière, compte à rebours) ; tout le reste
     en « Determination » (police pixel choisie par Femz le 14/11 ; FontStruct, anonymous-1438277, CC BY 3.0 :
     assets/polices/Determination-licence.txt, crédit obligatoire). JetBrains Mono essayée puis refusée (« ça fait trop
     cramé, c'est Claude IA »). Plancher des tests : 12 px à 720 p, soit 0,75 rem.
   =================================================================================================================== */

@font-face {
  font-family: 'Determination';
  src: url('assets/polices/Determination.ttf') format('truetype');
  font-weight: 100 900;
  font-display: block;
}

:root[data-sr-theme='carte-mere'] {
  --cy-bg: rgba(6, 10, 15, 0.8);
  --cy-bg-2: rgba(14, 22, 30, 0.86);
  --cy-solid: #070b10;
  --cy-line: rgba(150, 205, 230, 0.24);
  --cy-line-2: rgba(150, 205, 230, 0.12);
  --cy-text: #e4ebf1;
  --cy-muted: #7d8a99;
  --cy-dim: #4b5664;
  --cy-trame: repeating-linear-gradient(0deg, rgba(120, 200, 230, 0.035) 0 1px, transparent 1px 2rem),
    repeating-linear-gradient(90deg, rgba(120, 200, 230, 0.035) 0 1px, transparent 1px 2rem);
  --sr-mono: 'Determination', 'Pixelta', ui-monospace, Menlo, monospace;
  --sr-text: var(--sr-mono);
  --sr-skew: 0deg;
  --sr-ink: var(--cy-solid);
  --sr-ink-2: var(--cy-bg-2);
  --sr-ink-3: rgba(150, 205, 230, 0.14);
  --sr-muted: var(--cy-muted);
}

[data-sr-theme='carte-mere'],
[data-sr-theme='carte-mere'] body {
  background: var(--cy-solid);
  color: var(--cy-text);
  font-family: var(--sr-mono);
}

/* ----- Formes communes ----- */
[data-sr-theme='carte-mere'] .sr-facet {
  --cut: 0.75rem;
  --bw: 1px;
  --edge: var(--cy-line);
  --fill: var(--cy-bg);
}

[data-sr-theme='carte-mere'] .sr-facet::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-top: 1px solid var(--sr-cyan);
  border-left: 1px solid var(--sr-cyan);
  pointer-events: none;
}

[data-sr-theme='carte-mere'] .sr-key {
  min-width: 1.25rem;
  padding: 0.15rem 0.35rem 0.1rem;
  font: 500 0.75rem/1.1 var(--sr-mono);
  color: var(--cy-muted);
  background: none;
  box-shadow: inset 0 0 0 1px var(--cy-line);
}

[data-sr-theme='carte-mere'] .sr-btn {
  min-width: 12rem;
  padding: 0.7rem 1.4rem 0.65rem;
  color: var(--cy-text);
  font: 500 0.8125rem/1 var(--sr-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

[data-sr-theme='carte-mere'] .sr-btn::before {
  background: rgba(150, 205, 230, 0.04);
  box-shadow: inset 0 0 0 1px var(--cy-line);
  transform: none;
}

[data-sr-theme='carte-mere'] .sr-btn:hover {
  color: var(--sr-cyan);
}

[data-sr-theme='carte-mere'] .sr-btn:hover::before {
  background: rgba(63, 224, 208, 0.08);
  box-shadow: inset 0 0 0 1px var(--sr-cyan);
}

[data-sr-theme='carte-mere'] .sr-primary {
  color: var(--sr-cyan);
}

[data-sr-theme='carte-mere'] .sr-primary::before {
  background: rgba(63, 224, 208, 0.12);
  box-shadow: inset 0 0 0 1px var(--sr-cyan);
}

[data-sr-theme='carte-mere'] .sr-primary:hover {
  color: var(--cy-solid);
}

[data-sr-theme='carte-mere'] .sr-primary:hover::before {
  background: var(--sr-cyan);
}

[data-sr-theme='carte-mere'] .sr-primary .sr-key {
  color: inherit;
  background: none;
  box-shadow: inset 0 0 0 1px currentColor;
}

[data-sr-theme='carte-mere'] .sr-slider {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-sr-theme='carte-mere'] .sr-slider-value {
  font: 500 0.8125rem/1 var(--sr-mono);
  letter-spacing: 0;
}

[data-sr-theme='carte-mere'] .sr-slider input::-webkit-slider-runnable-track {
  height: 1px;
  background: linear-gradient(to right, var(--sr-cyan) 0 var(--v, 50%), var(--cy-line) var(--v, 50%) 100%);
}

[data-sr-theme='carte-mere'] .sr-slider input::-webkit-slider-thumb {
  width: 2px;
  height: 0.875rem;
  margin-top: -0.4375rem;
  background: var(--sr-cyan);
  box-shadow: none;
}

[data-sr-theme='carte-mere'] .sr-slider input::-moz-range-track {
  height: 1px;
  background: var(--cy-line);
}

[data-sr-theme='carte-mere'] .sr-slider input::-moz-range-progress {
  height: 1px;
}

[data-sr-theme='carte-mere'] .sr-slider input::-moz-range-thumb {
  width: 2px;
  height: 0.875rem;
  background: var(--sr-cyan);
  box-shadow: none;
}

[data-sr-theme='carte-mere'] .sr-cell-num {
  font: 500 2.125rem/1 var(--sr-mono);
  letter-spacing: -0.02em;
}

[data-sr-theme='carte-mere'] .sr-cell-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-sr-theme='carte-mere'] .sr-pips {
  gap: 0.125rem;
}

[data-sr-theme='carte-mere'] .sr-pip {
  width: 0.3125rem;
  height: 0.625rem;
  background: var(--cy-line);
}

[data-sr-theme='carte-mere'] .sr-pip.sr-next {
  background: none;
  box-shadow: inset 0 0 0 1px var(--sr-cyan);
}

/* ----- HUD ----- */
[data-sr-theme='carte-mere'] .sr-xp {
  height: 3px;
  background: rgba(6, 10, 15, 0.6);
  border-bottom: 0;
}

[data-sr-theme='carte-mere'] .sr-chip {
  padding: 0.35rem 0.7rem 0.3rem;
  font: 500 0.75rem/1 var(--sr-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

[data-sr-theme='carte-mere'] .sr-chip::before {
  background: var(--cy-bg);
  box-shadow: inset 1px 0 0 var(--cy-line), inset 0 -1px 0 var(--cy-line-2);
}

[data-sr-theme='carte-mere'] .sr-chip .sr-num {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
}

[data-sr-theme='carte-mere'] .sr-frag::before {
  box-shadow: inset -1px 0 0 var(--sr-cyan), inset 0 -1px 0 var(--cy-line-2);
}

[data-sr-theme='carte-mere'] .sr-boss-name {
  padding: 0.3rem 0.6rem 0.25rem;
  font: 600 0.8125rem/1 var(--sr-mono);
  letter-spacing: 0.24em;
  color: var(--sr-red);
}

[data-sr-theme='carte-mere'] .sr-boss-name::before {
  background: rgba(255, 59, 59, 0.08);
  box-shadow: inset 0 0 0 1px var(--sr-red);
  transform: none;
}

[data-sr-theme='carte-mere'] .sr-boss-bar {
  height: 0.375rem;
  background: rgba(6, 10, 15, 0.7);
  box-shadow: 0 0 0 1px rgba(255, 59, 59, 0.45);
  transform: none;
}

[data-sr-theme='carte-mere'] .sr-boss-tick {
  width: 1px;
  margin-left: 0;
  background: var(--cy-text);
}

[data-sr-theme='carte-mere'] .sr-weapons {
  gap: 0.25rem;
  margin-left: 0;
}

[data-sr-theme='carte-mere'] .sr-weapon {
  width: 2.625rem;
  height: 2.625rem;
}

[data-sr-theme='carte-mere'] .sr-weapon::before {
  background: var(--cy-bg);
  box-shadow: inset 0 0 0 1px var(--cy-line), inset 0 -2px 0 var(--wc);
  transform: none;
}

[data-sr-theme='carte-mere'] .sr-weapon .sr-ic {
  font-size: 1.375rem;
  margin: -0.2rem 0 0 -0.2rem;
}

[data-sr-theme='carte-mere'] .sr-weapon-level {
  right: 0.25rem;
  bottom: 0.3rem;
  font: 500 0.75rem/1 var(--sr-mono);
  color: var(--cy-muted);
}

[data-sr-theme='carte-mere'] .sr-weapon.sr-empty::before {
  background: rgba(6, 10, 15, 0.35);
  box-shadow: inset 0 0 0 1px var(--cy-line-2);
}

[data-sr-theme='carte-mere'] .sr-vital {
  gap: 0.6rem;
  padding: 0.35rem 0.7rem;
}

[data-sr-theme='carte-mere'] .sr-vital::before {
  background: var(--cy-bg);
  box-shadow: inset 1px 0 0 var(--cy-line);
  transform: none;
}

[data-sr-theme='carte-mere'] .sr-vital-label {
  width: 2.4rem;
  font: 500 0.75rem/1 var(--sr-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

[data-sr-theme='carte-mere'] .sr-hp,
[data-sr-theme='carte-mere'] .sr-dash {
  background: var(--cy-line-2);
  transform: none;
}

[data-sr-theme='carte-mere'] .sr-hp {
  height: 0.375rem;
}

[data-sr-theme='carte-mere'] .sr-dash {
  height: 2px;
}

[data-sr-theme='carte-mere'] .sr-hp-text {
  font: 500 0.875rem/1 var(--sr-mono);
}

[data-sr-theme='carte-mere'] .sr-vital-dash .sr-vital-label {
  font-size: 0.75rem;
}

[data-sr-theme='carte-mere'] .sr-arrow path {
  stroke: var(--cy-solid);
  stroke-width: 1.5;
}

/* ----- Bannière et compte à rebours (Pixelta : grands titres) ----- */
[data-sr-theme='carte-mere'] .sr-banner {
  text-shadow: 0 0.04em 0 var(--cy-solid);
}

[data-sr-theme='carte-mere'] .sr-banner::after {
  width: 6rem;
  height: 1px;
  box-shadow: none;
  transform: none;
}

[data-sr-theme='carte-mere'] .sr-banner.sr-alert::after {
  width: 12rem;
}

[data-sr-theme='carte-mere'] .sr-countdown {
  text-shadow: 0 0.04em 0 var(--cy-solid);
}

/* ----- Écrans ----- */
[data-sr-theme='carte-mere'] .sr-screen {
  background: var(--cy-trame), rgba(4, 7, 11, 0.82);
}

[data-sr-theme='carte-mere'] .sr-title {
  background: none;
}

[data-sr-theme='carte-mere'] .sr-lead {
  font-size: 0.8125rem;
  line-height: 1.5;
}

[data-sr-theme='carte-mere'] .sr-panel {
  gap: 1.1rem;
  padding: 2rem 2.25rem 1.85rem;
}

[data-sr-theme='carte-mere'] .sr-rule {
  height: 1px;
  background: var(--cy-line-2);
}

[data-sr-theme='carte-mere'] .sr-title .sr-title-status {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-shadow: none;
}

/* Écran titre : cadre et boutons du kit pixel art remplacés par les filets */
[data-sr-theme='carte-mere'] .sr-cadre {
  border: 0;
  border-image: none;
  padding: 0.9rem 1.1rem;
  background: var(--cy-bg);
  box-shadow: inset 0 0 0 1px var(--cy-line);
}

[data-sr-theme='carte-mere'] .sr-infos-label {
  font: 500 0.75rem/1 var(--sr-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cy-muted);
}

[data-sr-theme='carte-mere'] .sr-infos-record .sr-num {
  font: 500 1rem/1 var(--sr-mono);
}

[data-sr-theme='carte-mere'] .sr-infos-chevron {
  width: 1.5rem;
  height: 1.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 14l5-5 5 5' fill='none' stroke='%233fe0d0' stroke-width='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  box-shadow: inset 0 0 0 1px var(--cy-line);
  image-rendering: auto;
}

[data-sr-theme='carte-mere'] .sr-infos.sr-open .sr-infos-chevron {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%233fe0d0' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* meilleur score d'une longue partie (42 · 23456 · 51 · 66:40) : quatre cellules sur une ligne dans les 25 rem */
[data-sr-theme='carte-mere'] .sr-infos .sr-best .sr-cell-num {
  font-size: 1.125rem;
}

[data-sr-theme='carte-mere'] .sr-infos .sr-best .sr-cell-label {
  letter-spacing: 0.02em;
}

[data-sr-theme='carte-mere'] .sr-infos .sr-cells {
  gap: 0.5rem 0.9rem;
}

[data-sr-theme='carte-mere'] .sr-infos-rule {
  font-size: 0.75rem;
}

[data-sr-theme='carte-mere'] .sr-title .sr-btn {
  min-width: 15rem;
  padding: 0.95rem 2rem 0.9rem;
  border: 0;
  border-image: none;
  font: 500 1rem/1 var(--sr-mono);
  letter-spacing: 0.24em;
  image-rendering: auto;
  color: var(--cy-text);
}

[data-sr-theme='carte-mere'] .sr-title .sr-btn::before {
  content: '';
}

/* « Jouer » posé sur le décor 3D : fond sombre sous le filet cyan, sinon il se perd dans la scène */
[data-sr-theme='carte-mere'] .sr-title .sr-btn.sr-primary {
  color: var(--sr-cyan);
}

[data-sr-theme='carte-mere'] .sr-title .sr-btn.sr-primary::before {
  background: linear-gradient(rgba(63, 224, 208, 0.16), rgba(63, 224, 208, 0.16)), rgba(6, 10, 15, 0.82);
}

[data-sr-theme='carte-mere'] .sr-title .sr-btn.sr-primary:hover::before {
  background: var(--sr-cyan);
}

[data-sr-theme='carte-mere'] .sr-title .sr-btn.sr-primary:hover {
  color: var(--cy-solid);
  transform: translateY(-1px);
}

[data-sr-theme='carte-mere'] .sr-title .sr-btn.sr-primary .sr-key {
  color: inherit;
  background: none;
  box-shadow: inset 0 0 0 1px currentColor;
}

/* Choix de bonus */
[data-sr-theme='carte-mere'] .sr-levelup-head .sr-lead {
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cy-muted);
}

[data-sr-theme='carte-mere'] .sr-card {
  --cut: 0.75rem;
  gap: 0.6rem;
  padding: 1.25rem 1.3rem 1.1rem;
}

[data-sr-theme='carte-mere'] .sr-card:hover {
  --edge: var(--sr-cyan);
  --fill: var(--cy-bg-2);
}

[data-sr-theme='carte-mere'] .sr-card .sr-ic {
  font-size: 2.25rem;
}

[data-sr-theme='carte-mere'] .sr-card-name {
  font: 600 1.0625rem/1.25 var(--sr-mono);
  letter-spacing: -0.01em;
}

[data-sr-theme='carte-mere'] .sr-card-desc {
  font-size: 0.8125rem;
  line-height: 1.45;
}

[data-sr-theme='carte-mere'] .sr-card-stacks {
  font: 500 0.75rem/1 var(--sr-mono);
}

[data-sr-theme='carte-mere'] .sr-card-stacks .sr-pip {
  width: 0.375rem;
  height: 0.75rem;
}

/* Boutique */
[data-sr-theme='carte-mere'] .sr-shop {
  background: var(--cy-trame), var(--cy-solid);
}

[data-sr-theme='carte-mere'] .sr-shop-next {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-sr-theme='carte-mere'] .sr-shop-balance .sr-ic {
  font-size: 1.375rem;
}

[data-sr-theme='carte-mere'] .sr-shop-balance .sr-num {
  font: 500 2.25rem/0.9 var(--sr-mono);
  letter-spacing: -0.02em;
}

[data-sr-theme='carte-mere'] .sr-shop-balance-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-sr-theme='carte-mere'] .sr-wcard {
  --cut: 0.625rem;
}

[data-sr-theme='carte-mere'] .sr-wcard-head > .sr-ic {
  font-size: 1.625rem;
}

/* Determination est large : 0,875 rem pour que « Disques orbitaux » tienne à côté du niveau (ui.test : aucun texte coupé) */
[data-sr-theme='carte-mere'] .sr-wname {
  font: 600 0.875rem/1.2 var(--sr-mono);
  letter-spacing: 0;
}

[data-sr-theme='carte-mere'] .sr-wdesc {
  font-size: 0.75rem;
}

[data-sr-theme='carte-mere'] .sr-wlevel,
[data-sr-theme='carte-mere'] .sr-wlock {
  font: 500 0.75rem/1 var(--sr-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-sr-theme='carte-mere'] .sr-wlevel .sr-num {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}

[data-sr-theme='carte-mere'] .sr-buy {
  padding: 0.45rem 0.75rem 0.4rem;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--sr-cyan);
}

[data-sr-theme='carte-mere'] .sr-buy::before {
  background: rgba(63, 224, 208, 0.12);
  box-shadow: inset 0 0 0 1px var(--sr-cyan);
}

[data-sr-theme='carte-mere'] .sr-buy:hover {
  color: var(--cy-solid);
}

[data-sr-theme='carte-mere'] .sr-buy:hover::before {
  background: var(--sr-cyan);
}

[data-sr-theme='carte-mere'] .sr-wcard.sr-locked {
  --edge: var(--cy-line-2);
  --fill: rgba(6, 10, 15, 0.6);
}

[data-sr-theme='carte-mere'] .sr-wcard.sr-locked::after {
  border-color: var(--cy-dim);
}

[data-sr-theme='carte-mere'] .sr-wcard.sr-locked .sr-wcard-head > .sr-ic,
[data-sr-theme='carte-mere'] .sr-wcard.sr-locked .sr-wname,
[data-sr-theme='carte-mere'] .sr-stat.sr-poor .sr-stat-label,
[data-sr-theme='carte-mere'] .sr-stat.sr-poor .sr-val-next,
[data-sr-theme='carte-mere'] .sr-stat.sr-poor .sr-stat-price,
[data-sr-theme='carte-mere'] .sr-stat.sr-none .sr-stat-label,
[data-sr-theme='carte-mere'] .sr-stat.sr-none .sr-val-cur,
[data-sr-theme='carte-mere'] .sr-stat.sr-none .sr-val-unit,
[data-sr-theme='carte-mere'] .sr-buy.sr-disabled {
  color: var(--cy-dim);
}

[data-sr-theme='carte-mere'] .sr-stat.sr-poor .sr-val-cur,
[data-sr-theme='carte-mere'] .sr-stat.sr-poor .sr-val-unit {
  color: #3f4955;
}

[data-sr-theme='carte-mere'] .sr-buy.sr-disabled::before,
[data-sr-theme='carte-mere'] .sr-buy.sr-disabled:hover::before {
  background: none;
  box-shadow: inset 0 0 0 1px var(--cy-line-2);
}

[data-sr-theme='carte-mere'] .sr-wcard.sr-buyable {
  --edge: rgba(63, 224, 208, 0.4);
}

[data-sr-theme='carte-mere'] .sr-stats {
  gap: 0.1875rem;
}

[data-sr-theme='carte-mere'] .sr-stat::before {
  background: rgba(150, 205, 230, 0.035);
}

[data-sr-theme='carte-mere'] .sr-stat:hover::before {
  background: rgba(63, 224, 208, 0.1);
  box-shadow: inset 1px 0 0 var(--sr-cyan);
}

[data-sr-theme='carte-mere'] .sr-stat:active::before {
  background: rgba(63, 224, 208, 0.18);
}

[data-sr-theme='carte-mere'] .sr-stat.sr-disabled::before,
[data-sr-theme='carte-mere'] .sr-stat.sr-disabled:hover::before {
  background: rgba(150, 205, 230, 0.015);
  box-shadow: none;
}

[data-sr-theme='carte-mere'] .sr-stat-label {
  font: 500 0.75rem/1.1 var(--sr-mono);
  letter-spacing: -0.01em;
}

[data-sr-theme='carte-mere'] .sr-stat-value {
  font-size: 0.75rem;
  letter-spacing: -0.02em;
}

[data-sr-theme='carte-mere'] .sr-val-arrow {
  color: var(--cy-dim);
}

[data-sr-theme='carte-mere'] .sr-stat-price {
  font: 600 0.8125rem/1 var(--sr-mono);
}

[data-sr-theme='carte-mere'] .sr-stat-max {
  font: 600 0.75rem/1 var(--sr-mono);
  letter-spacing: 0.12em;
  color: var(--cy-muted);
}

[data-sr-theme='carte-mere'] .sr-shop-foot .sr-lead {
  font-size: 0.75rem;
}

/* Fin de partie */
/* fond presque opaque : le voile rouge de la mort (derrière l'écran) ne teinte pas le panneau en bordeaux */
[data-sr-theme='carte-mere'] .sr-gameover .sr-panel {
  --edge: rgba(255, 59, 59, 0.55);
  --fill: rgba(7, 9, 13, 0.94);
}

[data-sr-theme='carte-mere'] .sr-gameover .sr-panel::after {
  border-color: var(--sr-red);
}

[data-sr-theme='carte-mere'] .sr-over-flag {
  padding: 0.3rem 0.6rem 0.25rem;
  font: 600 0.75rem/1 var(--sr-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sr-cyan);
}

[data-sr-theme='carte-mere'] .sr-over-flag::before {
  background: rgba(63, 224, 208, 0.1);
  box-shadow: inset 0 0 0 1px var(--sr-cyan);
  transform: none;
}

[data-sr-theme='carte-mere'] .sr-gameover .sr-cell-num {
  font-size: 2.75rem;
}

[data-sr-theme='carte-mere'] .sr-over-best {
  font-size: 0.8125rem;
}

/* Curseur : flèche fine (filet cyan sur fond sombre), pointe en 1 1, à la place du curseur pixel art */
[data-sr-theme='carte-mere'],
[data-sr-theme='carte-mere'] body,
[data-sr-theme='carte-mere'] #ui-root * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M1.5 1.5l15 6.2-6.4 1.9-1.9 6.4z' fill='%23070b10' fill-opacity='.85' stroke='%233fe0d0' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 1 1, default;
}

[data-sr-theme='carte-mere'] #ui-root button,
[data-sr-theme='carte-mere'] #ui-root input,
[data-sr-theme='carte-mere'] #ui-root .sr-stat {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M1.5 1.5l15 6.2-6.4 1.9-1.9 6.4z' fill='%233fe0d0' stroke='%23070b10' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 1 1, pointer;
}

[data-sr-theme='carte-mere'] #ui-root .sr-btn.sr-attente {
  cursor: progress;
}

html.sr-en-jeu[data-sr-theme='carte-mere'],
html.sr-en-jeu[data-sr-theme='carte-mere'] body,
html.sr-en-jeu[data-sr-theme='carte-mere'] #ui-root * {
  cursor: none;
}

/* ===================================================================================================================
   UI cyber — pilote « FUI » (14/11/2026, docs/da-carte-mere.md § 12), réfs de Femz : écran d'Octatrack (sélection
   inversée, barre de titre à chemin), inventaire pixel art, « FUI Field-Guide 01 » (animations d'apparition).
   Pilote sur la PAUSE et la MONTÉE DE NIVEAU (et la fin de partie, même panneau). Animations : opacité et transform
   seulement (§ Q) ; les clignotements sont volontairement en à-coups (steps), courts (≤ 0,3 s), et seulement à
   l'apparition — jamais pendant un mouvement.
   =================================================================================================================== */

/* ----- Sélection inversée (Octatrack) : l'élément visé devient une barre pleine, texte sombre ----- */
[data-sr-theme='carte-mere'] .sr-btn:hover,
[data-sr-theme='carte-mere'] .sr-btn:focus-visible {
  color: var(--cy-solid);
}

[data-sr-theme='carte-mere'] .sr-btn:hover::before,
[data-sr-theme='carte-mere'] .sr-btn:focus-visible::before {
  background: var(--sr-cyan);
  box-shadow: none;
}

[data-sr-theme='carte-mere'] .sr-btn:hover .sr-key,
[data-sr-theme='carte-mere'] .sr-btn:focus-visible .sr-key {
  color: inherit;
  box-shadow: inset 0 0 0 1px currentColor;
}

[data-sr-theme='carte-mere'] .sr-card:hover,
[data-sr-theme='carte-mere'] .sr-card:focus-visible {
  --edge: var(--sr-cyan);
  --fill: var(--sr-cyan);
  color: var(--cy-solid);
}

[data-sr-theme='carte-mere'] .sr-card:hover .sr-ic,
[data-sr-theme='carte-mere'] .sr-card:hover .sr-card-desc,
[data-sr-theme='carte-mere'] .sr-card:hover .sr-card-stacks,
[data-sr-theme='carte-mere'] .sr-card:hover .sr-key {
  color: var(--cy-solid);
}

[data-sr-theme='carte-mere'] .sr-card:hover .sr-key {
  box-shadow: inset 0 0 0 1px currentColor;
}

[data-sr-theme='carte-mere'] .sr-card:hover .sr-pip {
  background: rgba(7, 11, 16, 0.25);
}

[data-sr-theme='carte-mere'] .sr-card:hover .sr-pip.sr-on,
[data-sr-theme='carte-mere'] .sr-card:hover .sr-pip.sr-next {
  background: var(--cy-solid);
  box-shadow: none;
}

/* ----- Barre de titre à chemin (Octatrack) : petite ligne en capitales au-dessus du grand titre Pixelta ----- */
[data-sr-theme='carte-mere'] .sr-pause h2::before,
[data-sr-theme='carte-mere'] .sr-gameover h2::before,
[data-sr-theme='carte-mere'] .sr-levelup-head h2::before {
  display: block;
  margin-bottom: 0.55rem;
  padding-bottom: 0.4rem;
  font: 500 0.75rem/1 var(--sr-mono);
  letter-spacing: 0.12em;
  color: var(--cy-muted);
  border-bottom: 1px solid var(--cy-line-2);
}

[data-sr-theme='carte-mere'] .sr-pause h2::before {
  content: 'SYSTÈME / PAUSE';
}

[data-sr-theme='carte-mere'] .sr-gameover h2::before {
  content: 'AGENT / ÉTAT';
  color: rgba(255, 59, 59, 0.75);
}

[data-sr-theme='carte-mere'] .sr-levelup-head h2::before {
  content: 'AGENT / MISE À NIVEAU';
  border-bottom: 0;
  padding-bottom: 0;
}

/* ----- Apparitions (FUI) ----- */
/* Ouverture de panneau (pause, fin de partie, cartes de bonus) : un trait fin naît au centre, s'étire en largeur, puis
   le panneau se déplie en hauteur ; le contenu entre ensuite ligne par ligne en glissant. 1re version (cadre qui
   clignote, hachures figées) refusée par Femz : « juste une texture figée de traits qui pop ». fill-mode backwards : une
   fois ouvert, le survol reprend la main sur transform. */
[data-sr-theme='carte-mere'] .sr-panel {
  animation: cy-ouvre 0.34s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

[data-sr-theme='carte-mere'] .sr-panel > * {
  animation: cy-entre 0.2s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
  animation-delay: 0.3s;
}

[data-sr-theme='carte-mere'] .sr-panel > :nth-child(2) { animation-delay: 0.34s; }
[data-sr-theme='carte-mere'] .sr-panel > :nth-child(3) { animation-delay: 0.38s; }
[data-sr-theme='carte-mere'] .sr-panel > :nth-child(4) { animation-delay: 0.42s; }
[data-sr-theme='carte-mere'] .sr-panel > :nth-child(5) { animation-delay: 0.46s; }
[data-sr-theme='carte-mere'] .sr-panel > :nth-child(6) { animation-delay: 0.5s; }
[data-sr-theme='carte-mere'] .sr-panel > :nth-child(n + 7) { animation-delay: 0.54s; }

/* Montée de niveau : le titre descend, les trois cartes s'ouvrent l'une après l'autre, leur contenu entre ensuite. */
[data-sr-theme='carte-mere'] .sr-levelup-head {
  animation: cy-descend 0.24s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

[data-sr-theme='carte-mere'] .sr-card {
  animation: cy-ouvre 0.3s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

[data-sr-theme='carte-mere'] .sr-card > * {
  animation: cy-entre 0.2s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

[data-sr-theme='carte-mere'] .sr-card:nth-child(1) { animation-delay: 0.06s; }
[data-sr-theme='carte-mere'] .sr-card:nth-child(2) { animation-delay: 0.14s; }
[data-sr-theme='carte-mere'] .sr-card:nth-child(3) { animation-delay: 0.22s; }
[data-sr-theme='carte-mere'] .sr-card:nth-child(1) > * { animation-delay: 0.32s; }
[data-sr-theme='carte-mere'] .sr-card:nth-child(2) > * { animation-delay: 0.4s; }
[data-sr-theme='carte-mere'] .sr-card:nth-child(3) > * { animation-delay: 0.48s; }

@keyframes cy-ouvre {
  0% { transform: scale(0.06, 0.012); opacity: 0; }
  12% { opacity: 1; }
  45% { transform: scale(1, 0.012); }
  100% { transform: none; opacity: 1; }
}

@keyframes cy-entre {
  from { transform: translateX(-0.6rem); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes cy-descend {
  from { transform: translateY(-0.8rem); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ----- Extension des apparitions FUI (14/11/2026) : boutique, bannières, compte à rebours, PV touchés ----- */
/* Boutique : l'en-tête descend, les six cartes d'armes s'ouvrent en cascade, leurs lignes entrent, le pied suit.
   Fini en ≈ 0,5 s (Entrée et « J'ai fini » sont ignorés 0,4 s : SHOP.minOpenSeconds). */
[data-sr-theme='carte-mere'] .sr-shop-head {
  animation: cy-descend 0.22s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

[data-sr-theme='carte-mere'] .sr-wcard {
  animation: cy-ouvre 0.26s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

[data-sr-theme='carte-mere'] .sr-wcard > * {
  animation: cy-entre 0.18s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

[data-sr-theme='carte-mere'] .sr-wcard:nth-child(1) { animation-delay: 0.04s; }
[data-sr-theme='carte-mere'] .sr-wcard:nth-child(2) { animation-delay: 0.08s; }
[data-sr-theme='carte-mere'] .sr-wcard:nth-child(3) { animation-delay: 0.12s; }
[data-sr-theme='carte-mere'] .sr-wcard:nth-child(4) { animation-delay: 0.16s; }
[data-sr-theme='carte-mere'] .sr-wcard:nth-child(5) { animation-delay: 0.2s; }
[data-sr-theme='carte-mere'] .sr-wcard:nth-child(6) { animation-delay: 0.24s; }
[data-sr-theme='carte-mere'] .sr-wcard:nth-child(1) > * { animation-delay: 0.24s; }
[data-sr-theme='carte-mere'] .sr-wcard:nth-child(2) > * { animation-delay: 0.28s; }
[data-sr-theme='carte-mere'] .sr-wcard:nth-child(3) > * { animation-delay: 0.32s; }
[data-sr-theme='carte-mere'] .sr-wcard:nth-child(4) > * { animation-delay: 0.36s; }
[data-sr-theme='carte-mere'] .sr-wcard:nth-child(5) > * { animation-delay: 0.4s; }
[data-sr-theme='carte-mere'] .sr-wcard:nth-child(6) > * { animation-delay: 0.44s; }

[data-sr-theme='carte-mere'] .sr-shop-foot {
  animation: cy-entre 0.2s 0.36s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

/* Bannières : ui.js pose en style direct « sr-ban-in-a|b …, sr-ban-out-a|b … » (a/b alternés pour relancer) ; on ne
   remplace que les NOMS (durées, délais et sortie restent ceux d'ui.js). Vague : glisse puis clignote ; BOSS : glitch
   rouge (à-coups latéraux et en biais, c'est l'AGI qui parle). */
/* Toutes les bannières en GLITCH, d'après la case « GLITCH » de la réf FUI (Femz 14/11) : le texte est DÉCOUPÉ en
   trois bandes horizontales de sa couleur d'origine (haut : ::before, milieu : le libellé, bas : ::after ; copies via
   data-texte, ui.js), chaque bande saute latéralement par états tenus — bande seule, décalages, disparition, deux
   tranches — puis le texte se recale net. Pas de couleur ajoutée, pas de torsion (2e version refusée : décalage
   cyan / rouge et texte tordu « imaginés »). Bandes fixes (clip-path statique), seuls translateX et l'opacité bougent.
   L'entrée d'ui.js devient un simple fondu. */
[data-sr-theme='carte-mere'] .sr-banner[style*='sr-ban-in-a'] {
  animation-name: cy-fondu-a, sr-ban-out-a !important;
}

[data-sr-theme='carte-mere'] .sr-banner[style*='sr-ban-in-b'] {
  animation-name: cy-fondu-b, sr-ban-out-b !important;
}

/* Le libellé garde son texte (logique, tests) mais devient transparent ; les trois bandes sont trois copies de sa
   couleur d'origine (--cy-ban) : haut = libellé ::before, bas = libellé ::after, milieu = bannière ::before (posé sur
   le libellé, en tête de la colonne de la bannière). */
[data-sr-theme='carte-mere'] .sr-banner {
  --cy-ban: var(--sr-bone);
}

[data-sr-theme='carte-mere'] .sr-banner.sr-alert {
  --cy-ban: var(--sr-red);
}

[data-sr-theme='carte-mere'] .sr-banner-label {
  position: relative;
  display: inline-block;
  color: transparent;
  text-shadow: none;
}

[data-sr-theme='carte-mere'] .sr-banner-label::before,
[data-sr-theme='carte-mere'] .sr-banner-label::after,
[data-sr-theme='carte-mere'] .sr-banner::before {
  content: attr(data-texte);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  white-space: nowrap;
  color: var(--cy-ban);
  text-shadow: 0 0.04em 0 var(--cy-solid);
  pointer-events: none;
}

[data-sr-theme='carte-mere'] .sr-banner-label::before {
  clip-path: inset(-0.2em -2em 62% -2em);
  animation: cy-tranche-haut 0.9s steps(1, end) both;
}

[data-sr-theme='carte-mere'] .sr-banner::before {
  clip-path: inset(37% -2em 31% -2em);
  line-height: 1;
  animation: cy-tranche-milieu 0.9s steps(1, end) both;
}

[data-sr-theme='carte-mere'] .sr-banner-label::after {
  clip-path: inset(68% -2em -0.6em -2em);
  animation: cy-tranche-bas 0.9s steps(1, end) both;
}

/* Compte à rebours : chaque chiffre se construit en trois paliers (« build on »), au lieu de rétrécir depuis 1,7. */
[data-sr-theme='carte-mere'] .sr-countdown[style*='sr-pop-a'] {
  animation-name: cy-compte-a !important;
}

[data-sr-theme='carte-mere'] .sr-countdown[style*='sr-pop-b'] {
  animation-name: cy-compte-b !important;
}

/* PV touchés (ui.js : cy-touche-a|b quand la barre baisse) : le bandeau surgit puis clignote (« crash-n-blink »). */
[data-sr-theme='carte-mere'] .sr-vital-hp {
  transform-origin: left center;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-fill-mode: none;
}





@keyframes cy-compte-a {
  0% { opacity: 0; transform: scale(0.4); }
  33% { opacity: 0.6; transform: scale(0.4); }
  34% { transform: scale(0.75); }
  66% { opacity: 0.85; transform: scale(0.75); }
  67% { transform: none; }
  100% { opacity: 1; transform: none; }
}

@keyframes cy-compte-b {
  0% { opacity: 0; transform: scale(0.4); }
  33% { opacity: 0.6; transform: scale(0.4); }
  34% { transform: scale(0.75); }
  66% { opacity: 0.85; transform: scale(0.75); }
  67% { transform: none; }
  100% { opacity: 1; transform: none; }
}

@keyframes cy-touche-a {
  0% { transform: scale(1.06, 1.35); opacity: 1; }
  30% { transform: none; opacity: 0.25; }
  50% { opacity: 1; }
  70% { opacity: 0.35; }
  100% { transform: none; opacity: 1; }
}

@keyframes cy-touche-b {
  0% { transform: scale(1.06, 1.35); opacity: 1; }
  30% { transform: none; opacity: 0.25; }
  50% { opacity: 1; }
  70% { opacity: 0.35; }
  100% { transform: none; opacity: 1; }
}

@keyframes cy-fondu-a {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cy-fondu-b {
  from { opacity: 0; }
  to { opacity: 1; }
}




/* États du glitch (réf FUI, case « GLITCH ») : 0 % invisible → 6 % bande du milieu seule, décalée → 16 % trois bandes
   décalées → 30 % autre découpe → 42 % net → 58 % nouvelle découpe → 66 % invisible → 70 % deux tranches → 80 % net. */
@keyframes cy-tranche-haut {
  0% { opacity: 0; transform: none; }
  16% { opacity: 1; transform: translateX(0.2em); }
  30% { transform: translateX(-0.32em); }
  42% { transform: none; }
  58% { transform: translateX(0.06em); }
  66% { opacity: 0; }
  70% { opacity: 1; transform: translateX(-0.24em); }
  80% { transform: none; }
  100% { opacity: 1; transform: none; }
}

@keyframes cy-tranche-milieu {
  0% { opacity: 0; transform: none; }
  6% { opacity: 1; transform: translateX(-0.28em); }
  16% { transform: translateX(-0.12em); }
  30% { transform: translateX(0.08em); }
  42% { transform: none; }
  58% { transform: translateX(0.22em); }
  66% { opacity: 0; }
  70% { opacity: 1; transform: translateX(0.12em); }
  80% { transform: none; }
  100% { opacity: 1; transform: none; }
}

@keyframes cy-tranche-bas {
  0% { opacity: 0; transform: none; }
  16% { opacity: 1; transform: translateX(0.24em); }
  30% { transform: none; }
  42% { transform: none; }
  58% { transform: translateX(-0.16em); }
  66% { opacity: 0; }
  70% { opacity: 1; transform: translateX(0.12em); }
  80% { transform: none; }
  100% { opacity: 1; transform: none; }
}

/* ----- Icônes des armes : pixel art des vrais modèles (assets/ui/armes, 24 × 24), à une taille multiple de 24 px
   pour que chaque pixel d'art reste un carré net ; arme verrouillée éteinte par l'opacité (le filtre est interdit). */
[data-sr-theme='carte-mere'] .sr-weapon .sr-ic {
  width: round(nearest, 1.4rem, 24px);
  height: round(nearest, 1.4rem, 24px);
  margin: 0;
}

[data-sr-theme='carte-mere'] .sr-wcard-head > .sr-ic {
  width: round(down, 1.625rem, 24px);
  height: round(down, 1.625rem, 24px);
}

[data-sr-theme='carte-mere'] .sr-wcard.sr-locked .sr-wcard-head > .sr-ic {
  opacity: 0.35;
}

/* ===================================================================================================================
   Fiche de l'agent (pause, DA carte mère, 14/11/2026) — réfs de Femz : inventaire pixel art (portrait entre les
   emplacements, grille d'objets, bilan en pied), Octatrack (deux panneaux côte à côte). La fiche à gauche, le panneau
   système (reprendre, réglages, touches) à droite, inchangé.
   =================================================================================================================== */
[data-sr-theme='carte-mere'] .sr-pause {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

[data-sr-theme='carte-mere'] .sr-pause > .sr-panel {
  margin: 0;
}

[data-sr-theme='carte-mere'] .sr-fiche {
  --cut: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 24rem;
  max-width: 100%;
  padding: 2rem 1.75rem 1.5rem;
  animation: cy-ouvre 0.34s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

[data-sr-theme='carte-mere'] .sr-fiche > * {
  animation: cy-entre 0.2s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
  animation-delay: 0.3s;
}

[data-sr-theme='carte-mere'] .sr-fiche > :nth-child(2) { animation-delay: 0.34s; }
[data-sr-theme='carte-mere'] .sr-fiche > :nth-child(3) { animation-delay: 0.38s; }
[data-sr-theme='carte-mere'] .sr-fiche > :nth-child(4) { animation-delay: 0.42s; }
[data-sr-theme='carte-mere'] .sr-fiche > :nth-child(5) { animation-delay: 0.46s; }

[data-sr-theme='carte-mere'] .sr-fiche h2::before {
  content: 'AGENT / FICHE';
  display: block;
  margin-bottom: 0.55rem;
  padding-bottom: 0.4rem;
  font: 500 0.75rem/1 var(--sr-mono);
  letter-spacing: 0.12em;
  color: var(--cy-muted);
  border-bottom: 1px solid var(--cy-line-2);
}

/* niveau et XP */
[data-sr-theme='carte-mere'] .sr-fiche-niv {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

[data-sr-theme='carte-mere'] .sr-fiche-lab {
  font: 500 0.75rem/1 var(--sr-mono);
  letter-spacing: 0.12em;
  color: var(--cy-muted);
}

[data-sr-theme='carte-mere'] .sr-fiche-niv-n {
  font: 500 1.375rem/1 var(--sr-mono);
  color: var(--sr-cyan);
}

[data-sr-theme='carte-mere'] .sr-fiche-xp {
  flex: 1 1 auto;
  height: 3px;
  margin: 0 0.25rem;
  background: var(--cy-line-2);
  overflow: hidden;
}

[data-sr-theme='carte-mere'] .sr-fiche-xp-fill {
  width: 100%;
  height: 100%;
  background: var(--sr-xp);
  transform-origin: left center;
}

[data-sr-theme='carte-mere'] .sr-fiche-xp-txt {
  font: 500 0.75rem/1 var(--sr-mono);
  color: var(--cy-muted);
}

/* portrait entre les deux colonnes d'armes */
[data-sr-theme='carte-mere'] .sr-fiche-corps {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
}

[data-sr-theme='carte-mere'] .sr-fiche-col {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

[data-sr-theme='carte-mere'] .sr-fiche-arme {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  color: var(--wc);
  background: rgba(6, 10, 15, 0.6);
  box-shadow: inset 0 0 0 1px var(--cy-line), inset 0 -2px 0 var(--wc);
}

[data-sr-theme='carte-mere'] .sr-fiche-arme .sr-ic {
  width: round(nearest, 1.6rem, 24px);
  height: round(nearest, 1.6rem, 24px);
}

[data-sr-theme='carte-mere'] .sr-fiche-arme-niv {
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  font: 500 0.75rem/1 var(--sr-mono);
  color: var(--cy-text);
}

[data-sr-theme='carte-mere'] .sr-fiche-arme.sr-vide {
  background: rgba(6, 10, 15, 0.3);
  box-shadow: inset 0 0 0 1px var(--cy-line-2);
}

[data-sr-theme='carte-mere'] .sr-fiche-arme.sr-vide .sr-ic {
  opacity: 0.18;
}

[data-sr-theme='carte-mere'] .sr-fiche-portrait {
  display: grid;
  place-items: center;
  padding: 0.5rem 0;
  background: repeating-linear-gradient(0deg, rgba(120, 200, 230, 0.05) 0 1px, transparent 1px 0.6rem);
}

[data-sr-theme='carte-mere'] .sr-fiche-portrait img {
  display: block;
  width: round(nearest, 9rem, 48px);
  height: auto;
  image-rendering: pixelated;
}

/* grille des dix bonus */
[data-sr-theme='carte-mere'] .sr-fiche-bonus {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
}

[data-sr-theme='carte-mere'] .sr-fiche-b {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.2rem 0.35rem;
  color: var(--sr-cyan);
  background: rgba(6, 10, 15, 0.55);
  box-shadow: inset 0 0 0 1px var(--cy-line);
}

[data-sr-theme='carte-mere'] .sr-fiche-b .sr-ic {
  font-size: 1.1rem;
}

[data-sr-theme='carte-mere'] .sr-fiche-b .sr-num {
  font: 500 0.75rem/1 var(--sr-mono);
  color: var(--cy-text);
}

[data-sr-theme='carte-mere'] .sr-fiche-b.sr-vide {
  box-shadow: inset 0 0 0 1px var(--cy-line-2);
}

[data-sr-theme='carte-mere'] .sr-fiche-b.sr-vide .sr-ic,
[data-sr-theme='carte-mere'] .sr-fiche-b.sr-vide .sr-num {
  color: var(--cy-dim);
}

[data-sr-theme='carte-mere'] .sr-fiche-pied {
  padding-top: 0.6rem;
  font: 500 0.75rem/1.3 var(--sr-mono);
  letter-spacing: 0.06em;
  color: var(--cy-muted);
  border-top: 1px solid var(--cy-line-2);
}

/* ===================================================================================================================
   Cadres pixel « composant » (14/11/2026) — Femz : « les UI fenêtre sont trop clean, faudrait plus un look composant
   pixelisé tout en restant fin » ; réf : inventaire pixel art. Cadres 9-slice (assets/ui/carte/, outils/kit_ui_carte.py)
   affichés au plus proche voisin : traits d'UN pixel d'art (--pxa : 2 px à 720 p, 3 px à 1080 p), coins crantés, cadre à
   deux tons, broches le long des bords et repère cyan (broche 1) sur les panneaux, cases en creux, barres de rivets.
   Les cadres débordent hors de la boîte (border-image-outset) : la mise en page bouge à peine.
   =================================================================================================================== */
:root[data-sr-theme='carte-mere'] {
  --pxa: round(down, 0.125rem, 1px);
}

/* fenêtres : panneaux, cartes de bonus, cartes d'armes, fiche de l'agent */
[data-sr-theme='carte-mere'] .sr-facet {
  clip-path: none;
  background: none;
  border: calc(2 * var(--pxa)) solid transparent;
  border-image: url('assets/ui/carte/panneau.png') 5 fill / calc(5 * var(--pxa)) / calc(3 * var(--pxa)) round;
  image-rendering: pixelated;
}

[data-sr-theme='carte-mere'] .sr-facet::before,
[data-sr-theme='carte-mere'] .sr-facet::after {
  content: none;
}

[data-sr-theme='carte-mere'] .sr-card:hover,
[data-sr-theme='carte-mere'] .sr-card:focus-visible {
  border-image-source: url('assets/ui/carte/panneau-actif.png');
}

[data-sr-theme='carte-mere'] .sr-wcard.sr-locked {
  border-image-source: url('assets/ui/carte/panneau-eteint.png');
}

[data-sr-theme='carte-mere'] .sr-gameover .sr-panel {
  border-image-source: url('assets/ui/carte/panneau-rouge.png');
}

/* boutons : case à coins crantés ; principal en filet cyan ; visé = bloc cyan plein (sélection inversée) */
[data-sr-theme='carte-mere'] .sr-btn::before,
[data-sr-theme='carte-mere'] .sr-title .sr-btn::before {
  background: none;
  box-shadow: none;
  border: calc(3 * var(--pxa)) solid transparent;
  border-image: url('assets/ui/carte/bouton.png') 3 fill / calc(3 * var(--pxa)) round;
  image-rendering: pixelated;
}

[data-sr-theme='carte-mere'] .sr-primary::before,
[data-sr-theme='carte-mere'] .sr-title .sr-btn.sr-primary::before,
[data-sr-theme='carte-mere'] .sr-buy::before {
  background: none;
  border-image-source: url('assets/ui/carte/bouton-cyan.png');
}

[data-sr-theme='carte-mere'] .sr-title .sr-btn.sr-primary::before {
  background: rgba(6, 10, 15, 0.82);
}

[data-sr-theme='carte-mere'] .sr-btn:hover::before,
[data-sr-theme='carte-mere'] .sr-btn:focus-visible::before,
[data-sr-theme='carte-mere'] .sr-title .sr-btn.sr-primary:hover::before,
[data-sr-theme='carte-mere'] .sr-buy:hover::before {
  background: none;
  border-image-source: url('assets/ui/carte/bouton-actif.png');
}

[data-sr-theme='carte-mere'] .sr-buy.sr-disabled::before,
[data-sr-theme='carte-mere'] .sr-buy.sr-disabled:hover::before {
  border-image-source: url('assets/ui/carte/bouton.png');
}

/* cases : armes du HUD, cases de la fiche (armes, bonus) */
[data-sr-theme='carte-mere'] .sr-weapon::before,
[data-sr-theme='carte-mere'] .sr-fiche-arme,
[data-sr-theme='carte-mere'] .sr-fiche-b {
  background: none;
  border: calc(1 * var(--pxa)) solid transparent;
  border-image: url('assets/ui/carte/case.png') 3 fill / calc(3 * var(--pxa)) / calc(2 * var(--pxa)) round;
  image-rendering: pixelated;
}

[data-sr-theme='carte-mere'] .sr-weapon::before,
[data-sr-theme='carte-mere'] .sr-fiche-arme {
  box-shadow: inset 0 calc(-1 * var(--pxa)) 0 var(--wc);
}

[data-sr-theme='carte-mere'] .sr-fiche-b,
[data-sr-theme='carte-mere'] .sr-weapon.sr-empty::before,
[data-sr-theme='carte-mere'] .sr-fiche-arme.sr-vide,
[data-sr-theme='carte-mere'] .sr-fiche-b.sr-vide {
  box-shadow: none;
}

[data-sr-theme='carte-mere'] .sr-weapon.sr-empty::before,
[data-sr-theme='carte-mere'] .sr-fiche-arme.sr-vide,
[data-sr-theme='carte-mere'] .sr-fiche-b.sr-vide {
  opacity: 0.55;
}

/* séparateurs : barres de rivets */
[data-sr-theme='carte-mere'] .sr-rule {
  height: calc(3 * var(--pxa));
  background: url('assets/ui/carte/rivets.png') 0 0 / calc(8 * var(--pxa)) calc(3 * var(--pxa)) repeat-x;
  image-rendering: pixelated;
}

[data-sr-theme='carte-mere'] .sr-fiche-pied {
  border-top: 0;
  padding-top: calc(0.6rem + 3 * var(--pxa));
  background: url('assets/ui/carte/rivets.png') 0 0 / calc(8 * var(--pxa)) calc(3 * var(--pxa)) repeat-x;
  image-rendering: pixelated;
}

/* le cadre (2 pixels d'art par côté) est repris sur le retrait des cartes d'armes : « Disques orbitaux » tient toujours */
[data-sr-theme='carte-mere'] .sr-wcard {
  padding-inline: calc(0.9rem - 2 * var(--pxa));
}