/* Elaris — autel de fusion : grande fenêtre sur la collection (fusion.js / fusion-view.js).
   Structure du design Claude Design (templates/, 2026-09-14) dans les tokens Afterglow. La couleur
   Toutes les cartes (piles, emplacements, résultat) sont LE composant carte du site (partial card,
   rendu serveur) : un seul design de carte, rareté et valeur comprises (retour Noé 2026-09-14). */

.br-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }

.fu-veil { align-items: flex-start; overflow-y: auto; padding: var(--s6) var(--s4); }
.fu-modal {
  position: relative; width: min(1180px, 100%); margin: 0 auto; padding: var(--s5); border-radius: 14px;
  background: linear-gradient(180deg, rgba(14, 22, 40, 0.97), rgba(5, 7, 13, 0.97));
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-2); animation: modal-in var(--t-med) var(--ease-spring);
  display: flex; flex-direction: column; gap: var(--s4);
}
.fu-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding-right: 40px; }
.fu-title { margin-top: 6px; font-size: 1.6rem; font-weight: 500; letter-spacing: var(--track-wide); }
.fu-head-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.fu-coins {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 10px;
  background: rgba(143, 214, 165, 0.1); box-shadow: inset 0 0 0 1px rgba(143, 214, 165, 0.28); font-variant-numeric: tabular-nums;
}
.fu-coin-ico { color: var(--success); }
.fu-coins strong { color: var(--ink); font-size: 0.85rem; }
.fu-coins-lbl { font-size: 0.6rem; letter-spacing: 0.12em; color: var(--ink-faint); }
.fu-auto {
  padding: 9px 15px; border-radius: 10px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tier-l); box-shadow: inset 0 0 0 1px rgba(255, 179, 64, 0.4); transition: color var(--t-fast), background var(--t-fast);
}
.fu-auto:hover { color: var(--ink); background: rgba(255, 179, 64, 0.1); }
.fu-auto strong { font-variant-numeric: tabular-nums; }
.fu-auto.is-empty { color: var(--ink-faint); box-shadow: inset 0 0 0 1px var(--border); }
.fu-auto.is-empty:hover { background: none; color: var(--ink-dim); }

/* ── Autel ── */
.fu-altar {
  padding: var(--s5); border-radius: 12px; border: 1px solid var(--border);
  background: radial-gradient(560px 300px at 50% 0%, rgba(188, 215, 255, 0.14), transparent 72%),
              linear-gradient(180deg, rgba(20, 31, 54, 0.6), rgba(8, 12, 22, 0.7));
}
.fu-recipe { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.fu-slots { display: flex; gap: 12px; }
.fu-slot, .fu-result {
  position: relative; width: 118px; aspect-ratio: var(--card-ratio); border-radius: 12px; overflow: hidden;
  display: grid; place-items: center; text-align: center;
}
.fu-slot { border: 1.5px dashed var(--border-strong); background: rgba(5, 7, 13, 0.5); transition: transform var(--t-fast); }
.fu-slot span { font-size: 0.56rem; letter-spacing: 0.14em; line-height: 2; color: var(--ink-faint); }
.fu-slot.is-filled { display: block; border: 0; background: none; overflow: visible; cursor: pointer; padding: 0; }
.fu-slot.is-filled .tcg, .fu-result.is-done .tcg, .fu-tile .tcg { width: 100%; pointer-events: none; }
.fu-slot .qty-chip { display: none; }
.fu-slot.is-filled:hover { transform: translateY(-4px); }
.fu-arrow { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink-faint); }
.fu-arrow span { font-size: 1.5rem; }
.fu-arrow small { font-size: 0.56rem; letter-spacing: 0.14em; }
.fu-arrow.is-ready { color: var(--tier-l); }
.fu-result { width: 140px; border-radius: 13px; background: rgba(5, 7, 13, 0.45); box-shadow: inset 0 0 0 2px var(--border); }
.fu-result span { font-size: 0.56rem; letter-spacing: 0.14em; line-height: 1.9; color: var(--ink-faint); padding: 12px; }
.fu-result.is-ready { box-shadow: inset 0 0 0 2px rgba(255, 179, 64, 0.5), 0 0 34px rgba(255, 179, 64, 0.16); }
.fu-result.is-ready span { color: var(--tier-l); }
.fu-result.is-done { display: block; overflow: visible; background: none; box-shadow: none; filter: drop-shadow(0 0 24px rgba(255, 179, 64, 0.35));
  animation: ms-prize-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }

.fu-actions { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.fu-go { min-height: 46px; padding: 0 30px; border-radius: 12px; border: 1px solid var(--border); color: var(--ink-faint); }
.fu-go.is-ready { color: #1a1204; border-color: transparent; background: linear-gradient(180deg, #ffd27a, var(--tier-l));
  box-shadow: 0 12px 30px rgba(255, 179, 64, 0.22); }
.fu-go.is-ready:hover { transform: translateY(-2px); }
.fu-clear { min-height: 46px; border-radius: 12px; }
.fu-note { margin-top: 12px; text-align: center; font-size: 0.78rem; color: var(--ink-dim); }

/* ── Outils + grille ── */
.fu-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fu-search { flex: 1 1 240px; max-width: 400px; height: 42px; border-radius: 11px; }
.fu-toggle {
  height: 42px; display: inline-flex; align-items: center; gap: 9px; padding: 0 15px; border-radius: 11px;
  font-size: 0.8rem; font-weight: 600; color: var(--ink-dim); background: rgba(5, 7, 13, 0.7); box-shadow: inset 0 0 0 1px var(--border);
}
.fu-toggle.is-on { color: var(--ink); background: var(--accent-soft); }
.fu-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border-strong); }
.fu-toggle.is-on .fu-dot { background: var(--accent); }
.fu-summary { margin-left: auto; font-size: 0.64rem; letter-spacing: 0.12em; color: var(--ink-faint); }

.fu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 14px; }
.fu-tile {
  position: relative; display: flex; flex-direction: column; gap: 7px; padding: 0; text-align: left; min-width: 0;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.fu-tile:hover { transform: translateY(-4px); }
.fu-tile .tcg { transition: outline-color var(--t-fast); outline: 2px solid transparent; outline-offset: 2px; }
.fu-tile.is-full .tcg { outline-color: rgba(255, 179, 64, 0.55); }
.fu-tile.is-in .tcg { outline-color: var(--success); }
.fu-tile-body { display: flex; flex-direction: column; gap: 4px; padding: 0 2px; }
.fu-tile.is-locked { opacity: 0.35; }
.fu-tile[aria-disabled="true"] { cursor: default; }
.fu-tile[aria-disabled="true"]:not(.is-locked) { opacity: 0.6; }
.fu-tile[aria-disabled="true"]:hover { transform: none; }
.fu-tile-bar { height: 4px; border-radius: 999px; background: rgba(188, 215, 255, 0.14); overflow: hidden; }
.fu-tile-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.fu-tile.is-full .fu-tile-bar span { background: var(--tier-l); box-shadow: 0 0 10px var(--tier-l); }
.fu-tile-state { font-size: 0.6rem; letter-spacing: 0.1em; color: var(--ink-dim); }
.fu-tile.is-full .fu-tile-state { color: var(--tier-l); }
.fu-tile.is-in .fu-tile-state { color: var(--success); }
.fu-empty { grid-column: 1 / -1; padding: 40px; text-align: center; border-radius: 12px; background: rgba(8, 12, 22, 0.5);
  box-shadow: inset 0 0 0 1px var(--border); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--ink-faint); }

@media (max-width: 640px) {
  .fu-veil { padding: 0; }
  .fu-modal { border-radius: 0; min-height: 100%; padding: var(--s4); }
  .fu-slot { width: 76px; } .fu-result { width: 96px; }
  .fu-recipe { gap: 10px; } .fu-slots { gap: 6px; }
  .fu-summary { margin-left: 0; width: 100%; }
  .fu-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 110px), 1fr)); gap: 10px; }
}