/* MINUIT — la vitrine des meilleurs drops de la soirée (js/armurerie-vitrine.js) et le rejeu « Revoir ». Une tablette de laiton dans la
   nuit : chaque drop debout sur son socle, éclairé d'en haut par la lumière de son palier (la même que celle de la bande à l'arrêt) ;
   le n° 1 plus grand, dans ses équerres. Couleurs de rareté par data-r (css/armurerie-commun.css) ; aucune couleur de rareté en dur. */

/* (plus de cadre autour de la vitrine : les pièces sont ses seules surfaces — aucun panneau dans un panneau) */
.armv { position: relative; display: grid; gap: 12px; min-width: 0; }

/* ---------- la tête ---------- */
/* le classement « Valeur / Multiplicateur » suit le titre (il était à l'autre bout de la bande, à 1 700 px des pièces : revue 12) */
.armv-tete { display: flex; align-items: flex-end; justify-content: flex-start; gap: 8px 28px; flex-wrap: wrap; min-width: 0; }
.armv-tete-t { min-width: 0; }
.armv-titre { margin: 0; font: 400 24px/1.15 var(--font-display); letter-spacing: .05em; color: var(--gold-hi); }
.armv-sous { margin: 4px 0 0; font: 500 14px/1.4 var(--font-ui); color: var(--text-dim); }
.armv-tri > button { height: 32px; padding: 0 14px; font-size: 13px; }
.armv.is-seule .armv-tri { display: none; }

/* ---------- la tablette ---------- */
/* à partir de quatre pièces : une tablette de laiton, chaque drop debout sur son socle, éclairé d'en haut par la lumière de son
   palier. Les pièces se partagent toute la largeur (--armv-cols : leur nombre, posé par le module) : de quatre à sept, elles sont
   larges et leur image grandit ; de huit à douze, elles se serrent (sous 134 px la tablette défile). Plus aucune place vide n'est
   dessinée. Leurs lignes s'alignent d'une pièce à l'autre (sous-grille) : l'image, le nom entier, la valeur, le multiplicateur, le
   pote, d'où et quand, « Revoir ». Sous quatre pièces : la bande basse, plus bas. */
.armv-bande { min-width: 0; }
.armv-liste { --armv-min: 134px; --armv-cols: 4; position: relative; list-style: none; margin: 0; padding: 6px 2px 0; display: grid; grid-auto-flow: column; justify-content: safe center;
  grid-auto-columns: minmax(var(--armv-min), calc((100% - (var(--armv-cols) - 1) * 12px) / var(--armv-cols)));
  grid-template-rows: auto auto auto auto auto auto auto; column-gap: 12px; row-gap: 0;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 2px;
  scrollbar-width: thin; scrollbar-color: var(--gold-lo) transparent;
  border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, transparent, var(--line-strong) 6%, var(--gold) 50%, var(--line-strong) 94%, transparent) 1; }
.armv-liste[hidden] { display: none; }

/* une pièce : son socle, la lumière de son palier par-dessus */
.armv-piece { position: relative; min-width: 0; grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; justify-items: center; row-gap: 6px; padding: 26px 12px 14px; scroll-snap-align: start;
  border: 1px solid rgba(222,184,92,.14); border-bottom: 0; border-radius: 6px 6px 0 0;
  background: radial-gradient(95% 42% at 50% 0%, color-mix(in srgb, var(--arm-rc) 24%, transparent), transparent 78%), linear-gradient(180deg, rgba(22,28,56,.6), rgba(8,10,20,.15)); }
.armv-rang { position: absolute; left: 10px; top: 8px; font: 700 13px/1 var(--font-num); letter-spacing: .02em; color: var(--text-dim); }
/* la carte du socle, réduite à l'image et à la barre du palier : le nom s'écrit dessous, en entier (sur la carte il était coupé) */
.armv-carte { grid-row: 1; align-self: end; width: min(100%, 240px); }
.armv-carte .arm-carte { width: 100%; height: auto; aspect-ratio: 1 / .86; }
.armv-carte .arm-carte-c { box-shadow: inset 0 1px 0 rgba(247,221,143,.07), 0 10px 18px rgba(0,0,0,.45); }
.armv-carte .arm-corps { padding: 10px 10px 14px; }
.armv-carte .arm-carte-t { display: none; }
.armv-info { display: contents; }
.armv-info p { margin: 0; max-width: 100%; text-align: center; }
.armv-arme { grid-row: 2; font: 600 13px/1.3 var(--font-ui); color: var(--text); overflow-wrap: anywhere; text-wrap: balance; }
.armv-arme.is-st::before { content: "StatTrak™ "; color: var(--arm-t-st); }
.armv-valeur { grid-row: 3; font: 700 20px/1.15 var(--font-num); font-variant-numeric: tabular-nums; color: var(--gold-hi); white-space: nowrap; }
.armv-piece.is-sobre .armv-valeur { color: var(--text); }          /* sous le prix : rien ne brille */
.armv-mult { grid-row: 4; font: 500 13px/1.3 var(--font-ui); color: var(--text-dim); }
.armv-qui { grid-row: 5; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; font: 600 14px/1.3 var(--font-ui); color: var(--text); }
.armv-piece.is-mien .armv-nom { color: var(--gold-hi); }
.armv-nom { min-width: 0; overflow-wrap: anywhere; }
.armv-av { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; line-height: 1;
  background: color-mix(in srgb, var(--pc, var(--gold)) 26%, #0a0d18); box-shadow: 0 0 0 1px var(--pc, var(--gold)); }
.armv-av.is-vide::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--pc, var(--gold)); }
.armv-piece.is-mien .armv-av { display: none; }
.armv-ou { grid-row: 6; font: 500 12px/1.3 var(--font-ui); color: var(--text-dim); }
.armv-actions { grid-row: 7; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 6px; padding-top: 4px; }
.armv-revoir { gap: 6px; padding: 0 12px 0 10px; }
.armv-revoir svg { flex: none; width: 15px; height: 15px; }

/* le n° 1 : éclairé plus fort, dans les équerres de laiton, sa valeur en grand */
.armv-piece.is-un { border-color: var(--line-strong);
  background: radial-gradient(95% 46% at 50% 0%, color-mix(in srgb, var(--arm-rc) 34%, transparent), transparent 80%), linear-gradient(180deg, rgba(30,36,72,.72), rgba(8,10,20,.2)); }
.armv-piece.is-un::before { content: ""; position: absolute; inset: 5px 5px 0; pointer-events: none; --q: 13px; --t: 1.5px; --qc: rgba(222,184,92,.62);
  background: linear-gradient(var(--qc), var(--qc)) 0 0 / var(--q) var(--t), linear-gradient(var(--qc), var(--qc)) 0 0 / var(--t) var(--q),
    linear-gradient(var(--qc), var(--qc)) 100% 0 / var(--q) var(--t), linear-gradient(var(--qc), var(--qc)) 100% 0 / var(--t) var(--q);
  background-repeat: no-repeat; }
.armv-piece.is-un .armv-rang { left: 14px; top: 11px; color: var(--gold-hi); font-size: 14px; }
.armv-piece.is-un .armv-rang::before { content: "N° "; font: 600 12px/1 var(--font-ui); letter-spacing: .1em; }
.armv-piece.is-un .armv-valeur { font-size: 24px; }

/* ---------- la bande basse : moins de quatre pièces ---------- */
/* la ou les pièces, couchées (l'image, puis le nom, la valeur, le pote ; « Revoir » au bout), et la phrase d'attente qui remplit le
   reste de la bande — comme « Derniers drops ». Plus aucune place vide dessinée en pointillé. */
.armv.is-basse .armv-bande { display: flex; align-items: stretch; gap: 12px; min-height: 152px; }
.armv.is-vide .armv-bande { min-height: 0; }
.armv.is-basse .armv-liste { flex: 0 1 auto; display: flex; gap: 12px; padding: 0; overflow: visible; border: 0; border-image: none; }
.armv.is-basse .armv-liste[hidden] { display: none; }
.armv.is-basse .armv-piece { flex: 0 1 432px; min-width: 300px; grid-row: auto; grid-template-rows: repeat(5, auto); grid-template-columns: 148px minmax(0, 1fr) auto;
  grid-template-areas: "carte arme arme" "carte valeur valeur" "carte mult act" "carte qui act" "carte ou act"; align-content: center; justify-items: start; column-gap: 16px; row-gap: 2px; padding: 12px 16px 14px 12px;
  border: 1px solid rgba(222,184,92,.14); border-radius: 6px; box-shadow: inset 0 1px 0 rgba(247,221,143,.06), 0 6px 14px rgba(0,0,0,.4);
  background: radial-gradient(70% 120% at 14% 0%, color-mix(in srgb, var(--arm-rc) 22%, transparent), transparent 78%), linear-gradient(180deg, rgba(22,28,56,.72), rgba(10,13,24,.9)); }
.armv.is-basse .armv-piece.is-un::before { content: none; }
.armv.is-basse .armv-rang { display: none; }
.armv.is-basse .armv-carte { grid-area: carte; align-self: center; width: 148px; }
.armv.is-basse .armv-info p { text-align: left; }
.armv.is-basse .armv-arme { grid-area: arme; font-size: 15px; }
.armv.is-basse .armv-valeur, .armv.is-basse .armv-piece.is-un .armv-valeur { grid-area: valeur; font-size: 24px; }
.armv.is-basse .armv-mult { grid-area: mult; }
.armv.is-basse .armv-qui { grid-area: qui; justify-content: flex-start; margin-top: 4px; }
.armv.is-basse .armv-ou { grid-area: ou; }
.armv.is-basse .armv-actions { grid-area: act; align-self: end; justify-self: end; flex-direction: column; padding-top: 0; }

/* un drop qui vient d'entrer : il monte à sa place, un losange d'or le marque quelques secondes */
.armv-piece.is-neuf { animation: armv-entree .42s var(--arm-ease-sortie, cubic-bezier(.16, 1, .3, 1)) both; }
.armv-piece.is-neuf::after { content: ""; position: absolute; right: 9px; top: 8px; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold-hi);
  box-shadow: 0 0 0 2px rgba(5,6,11,.8), 0 0 10px rgba(247,221,143,.65); }

/* ---------- la phrase d'attente ---------- */
/* seule quand la vitrine est vide, à la suite des pièces tant qu'il y en a moins de quatre : le cartouche de la phrase d'attente des
   « Derniers drops » (son filet et son losange de laiton de part et d'autre) */
.armv-attente { flex: 1 1 320px; min-width: 0; display: flex; container: armv-attente / inline-size; }
.armv-attente[hidden] { display: none; }
.armv-attente-c { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) fit-content(64ch) minmax(0, 1fr); grid-template-areas: "g t d" "g s d"; align-items: center; column-gap: 18px; row-gap: 4px;
  min-height: 112px; padding: 16px 28px; box-sizing: border-box; border: 1px solid rgba(222,184,92,.12); border-radius: 6px; text-align: center;
  background: radial-gradient(70% 140% at 50% 50%, rgba(22,28,56,.5), rgba(10,13,24,.28)); box-shadow: inset 0 1px 0 rgba(247,221,143,.05); }
.armv-attente-c::before, .armv-attente-c::after { content: ""; grid-area: g; justify-self: end; width: 100%; max-width: 280px; height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M4.5 .9 8.1 4.5 4.5 8.1 .9 4.5Z' fill='none' stroke='%23deb85c' stroke-opacity='.62'/%3E%3C/svg%3E") right center / 9px 9px no-repeat,
    linear-gradient(90deg, rgba(222,184,92,0), rgba(222,184,92,.34)) left center / calc(100% - 15px) var(--filet, 1px) no-repeat; }
.armv-attente-c::after { grid-area: d; justify-self: start; transform: scaleX(-1); }
.armv-attente-t { grid-area: t; align-self: end; margin: 0; font: 500 15px/1.35 var(--font-ui); color: var(--text); text-wrap: balance; }
.armv-attente-s { grid-area: s; align-self: start; margin: 0; font: 500 14px/1.5 var(--font-ui); color: var(--text-dim); text-wrap: balance; }
@container armv-attente (max-width: 560px) {
  .armv-attente-c { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "s"; padding: 16px 20px; }
  .armv-attente-c::before, .armv-attente-c::after { content: none; }
}
/* à l'étroit (téléphone) : les pièces couchées l'une sous l'autre, la phrase dessous */
@media (max-width: 760px) {
  .armv.is-basse .armv-bande { flex-wrap: wrap; }
  .armv.is-basse .armv-liste { flex: 1 1 100%; flex-wrap: wrap; }
  .armv.is-basse .armv-piece { flex: 1 1 100%; min-width: 0; grid-template-columns: 112px minmax(0, 1fr) auto; column-gap: 12px; }
  .armv.is-basse .armv-carte { width: 112px; }
}

/* ---------- le rejeu (fenêtre du casino) ---------- */
.modal.armv-theatre { width: min(1500px, 100%); max-height: calc(calc(100 * var(--vh, 1vh)) - 32px); border-radius: 4px; }
.armv-theatre .modal-head { padding: 16px 24px 4px; }
.armv-theatre .modal-body { padding: 4px 24px 6px; }
.armv-theatre .modal-actions { padding: 6px 24px 18px; }
.armv-theatre-fond { background: rgba(3,4,8,.84); }
.armv-th { display: grid; gap: 14px; min-width: 0; }
.armv-th-sous { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 500 14px/1.35 var(--font-ui); color: var(--text-dim); }
.armv-th-t { min-width: 0; }
.armv-th-t .armv-av { margin: 0 6px 0 2px; vertical-align: -5px; }
.armv-th-sous b { color: var(--text); font-weight: 600; }
.armv-th-k { margin-right: 4px; }
.armv-th-scene.arm-scene { --arm-carte-l: clamp(118px, calc(6.8 * var(--vw, 1vw)) + 42px, 198px); }
.armv-th-note { margin: 0; max-width: 90ch; font: 500 14px/1.5 var(--font-ui); color: var(--text-dim); }

/* ---------- animations réduites, qualité allégée ---------- */
.reduce-motion .armv-piece.is-neuf { animation: none; }
.perf-low .armv-carte .arm-carte-c { box-shadow: none; }

@keyframes armv-entree { from { opacity: 0; transform: translateY(10px); } }