/* Écran d'échange — refonte du 2026-09-06 (handoff Otakard).

   La mise en page, les proportions et les interactions viennent du prototype. Les COULEURS et la
   TYPO sont celles du site (tokens.css) : le prototype propose une palette violette et deux polices
   qui lui sont propres, mais la carte est un composant partagé — adopter ses couleurs de rareté
   ferait rendre la MÊME carte différemment sur /collection et sur /echange. */

.tr-page { display: flex; flex-direction: column; gap: var(--s5); }

/* ── En-tête ── */
.tr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.tr-head-title { min-width: 0; }
.tr-eyebrow { display: block; font-size: 0.7rem; letter-spacing: 0.28em; color: var(--accent); text-transform: uppercase; }
.tr-head-title h1 { margin-top: var(--s2); letter-spacing: -0.02em; }
.tr-verdict { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; }
.tr-verdict-chip { font-size: 0.72rem; letter-spacing: 0.12em; font-weight: 600; }
.tr-verdict-chip.is-fair, .tr-verdict-chip.is-done { color: var(--success); }
.tr-verdict-chip.is-over, .tr-verdict-chip.is-under { color: var(--danger); }
.tr-verdict-chip.is-empty { color: var(--ink-dim); }
.tr-verdict-tip { font-size: 0.85rem; color: var(--ink-dim); }
.tr-verdict-tip::before { content: '— '; }

.tr-head-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.tr-tabs { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; }
.tr-tab { padding: 7px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-dim);
          font: inherit; font-size: 0.82rem; white-space: nowrap; cursor: pointer; transition: 0.18s; }
.tr-tab:hover { color: var(--ink); }
.tr-tab.is-active { background: var(--accent-soft); color: var(--accent); }
.tr-badge-free { padding: 5px 11px; border-radius: 999px; background: rgba(143, 214, 165, 0.12);
                 color: var(--success); font-size: 0.72rem; letter-spacing: 0.08em; white-space: nowrap; }

/* ── État vide ── */
.tr-void { padding: 66px 24px; text-align: center; border: 1px dashed var(--border);
           border-radius: 18px; background: rgba(188, 215, 255, 0.02); }
.tr-void-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto var(--s4);
                border-radius: 999px; border: 1px solid var(--border); color: var(--accent); font-size: 1.6rem;
                box-shadow: 0 0 30px var(--accent-soft); }
.tr-void h2 { font-size: 1.2rem; }
.tr-void p { max-width: 46ch; margin: var(--s3) auto var(--s5); color: var(--ink-dim); font-size: 0.88rem; line-height: 1.6; }

/* ── Sections ── */
.tr-section { padding: var(--s4); }
.tr-section + .tr-section { margin-top: var(--s5); }
.tr-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.tr-section-title { font-size: 1rem; }
.tr-meta { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ink-faint); }
.tr-empty-line { padding: var(--s4) 0; color: var(--ink-dim); font-size: 0.85rem; }

/* ── Sélection du joueur ── */
.tr-partner { display: grid; grid-template-columns: 44px minmax(0, 1fr) 190px 130px; align-items: center;
              gap: var(--s3); width: 100%; padding: var(--s3); border: 0; border-radius: 12px;
              background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
              transition: 0.16s; }
.tr-partner:hover { background: var(--accent-soft); }
.tr-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px;
             background: linear-gradient(150deg, var(--accent-deep), var(--bg-card)); color: var(--bg);
             font-weight: 600; overflow: hidden; }
.tr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tr-partner-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tr-partner-id strong { display: flex; align-items: center; gap: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-presence { width: 7px; height: 7px; border-radius: 999px; background: var(--ink-faint); flex: 0 0 auto; }
.tr-presence.is-on { background: var(--success); }
.tr-partner-wants { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tr-wants { color: var(--accent); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-partner-go { color: var(--accent); font-size: 0.82rem; text-align: right; white-space: nowrap; }

/* ── Les deux containers d'offre ── */
.tr-boards { display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); align-items: start; }
.tr-offer { padding: var(--s4); border: 1px solid var(--border); border-radius: 18px;
            background: linear-gradient(180deg, rgba(188, 215, 255, 0.045), rgba(188, 215, 255, 0.015)); }
.tr-offer.is-locked { border-color: rgba(143, 214, 165, 0.4); }
.tr-offer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
/* Le groupe de titre se comprime, le bloc de points jamais : sinon la valeur se casse en deux
   lignes dès qu'un pseudo est long (piège explicitement signalé par le handoff). */
.tr-offer-who { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.tr-offer-who h2 { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--ink-faint); flex: 0 0 auto; }
.tr-dot.is-mine { background: var(--accent); }
.tr-count { padding: 2px 8px; border-radius: 999px; background: rgba(188, 215, 255, 0.08);
            color: var(--ink-dim); font-size: 0.72rem; flex: 0 0 auto; }
.tr-offer-points { flex: 0 0 auto; white-space: nowrap; text-align: right; }
.tr-offer-points strong { display: block; font-size: 1.2rem; }
.tr-offer-points.is-over strong { color: var(--danger); }
.tr-lock-status { font-size: 0.68rem; letter-spacing: 0.1em; color: var(--ink-faint); }
.tr-offer.is-locked .tr-lock-status { color: var(--success); }

.tr-offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
                 gap: 12px; max-height: 352px; overflow-y: auto; align-content: start; }
.tr-ghost { display: grid; place-items: center; aspect-ratio: 63 / 88; border: 1px dashed var(--border);
            border-radius: 11px; color: var(--ink-faint); font-size: 1.1rem; }

.tr-lock-btn { width: 100%; margin-top: var(--s4); padding: 12px; border: 1px solid var(--border);
               border-radius: 11px; background: transparent; color: var(--ink); font: inherit;
               font-size: 0.85rem; cursor: pointer; transition: 0.16s; }
.tr-lock-btn:hover { border-color: var(--border-strong); }
.tr-lock-btn.is-locked { background: rgba(143, 214, 165, 0.12); border-color: rgba(143, 214, 165, 0.4); color: var(--success); }
.tr-lock-btn.is-done { background: var(--accent-soft); border-color: var(--border-strong); color: var(--accent); }

.tr-bridge { display: grid; place-items: center; align-self: stretch; position: relative; }
.tr-bridge::before, .tr-bridge::after { content: ''; position: absolute; left: 50%; width: 1px;
    background: linear-gradient(180deg, transparent, var(--border), transparent); }
.tr-bridge::before { top: 12px; height: calc(50% - 42px); }
.tr-bridge::after { bottom: 12px; height: calc(50% - 42px); }
.tr-bridge-ring { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 999px;
                  border: 1px solid var(--border); background: var(--bg-raised); color: var(--accent); }

/* ── Barre de sélection ── */
.tr-toolbar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.tr-tabs-sm .tr-tab { font-size: 0.78rem; padding: 6px 12px; }
.tr-search { flex: 1; min-width: 200px; }
.tr-sort { width: auto; }
.tr-rarities { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.tr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border);
           border-radius: 999px; background: transparent; color: var(--ink-dim); font: inherit;
           font-size: 0.75rem; letter-spacing: 0.06em; cursor: pointer; transition: 0.16s; }
.tr-chip:hover { color: var(--ink); }
.tr-chip.is-active { background: var(--accent-soft); border-color: var(--border-strong); color: var(--accent); }
.tr-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
                  gap: 14px; max-height: 440px; overflow-y: auto; align-content: start; }
/* Carte déjà posée : visible mais hors d'atteinte — la retirer de la grille ferait sauter la
   mise en page à chaque clic et perdrait le repère visuel du joueur. */
.tr-picker-grid .is-picked { opacity: 0.3; pointer-events: none; }

/* ── Lignes (offres reçues et historique) ── */
.tr-row { display: grid; align-items: center; gap: var(--s3); padding: var(--s3) 0;
          border-top: 1px solid var(--border); }
.tr-row:first-of-type { border-top: 0; }
.tr-row-inbox { grid-template-columns: 168px minmax(0, 1fr) 30px minmax(0, 1fr) 84px 196px; }
.tr-row-hist { grid-template-columns: 190px minmax(0, 1fr) 34px minmax(0, 1fr) 92px 104px; }
.tr-row.is-handled { opacity: 0.45; }
.tr-row-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tr-row-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-swap { color: var(--ink-faint); text-align: center; }
.tr-balance { font-size: 0.85rem; font-weight: 600; text-align: right; white-space: nowrap; }
.tr-balance.is-up { color: var(--success); }
.tr-balance.is-down { color: var(--danger); }
.tr-balance.is-void { color: var(--ink-faint); }
.tr-row-actions { display: flex; gap: var(--s2); justify-content: flex-end; }
.tr-refuse:hover { border-color: var(--danger); color: var(--danger); }
.tr-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.tr-status { padding: 3px 9px; border-radius: 999px; font-size: 0.7rem; letter-spacing: 0.06em; white-space: nowrap; }
.tr-status.is-accepted { background: rgba(143, 214, 165, 0.12); color: var(--success); }
.tr-status.is-cancelled { background: rgba(188, 215, 255, 0.06); color: var(--ink-dim); }
.tr-status.is-declined { background: rgba(255, 143, 160, 0.12); color: var(--danger); }
.tr-filters { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }

/* ── Piles de miniatures ──
   min-width:0 + overflow:hidden sont obligatoires : dans une colonne minmax(0,1fr), une pile
   longue pousse sinon la colonne voisine hors de l'écran (piège signalé par le handoff). */
.tr-pile { display: flex; align-items: center; min-width: 0; overflow: hidden; }
.tr-pile-item { flex: 0 0 auto; width: 44px; transition: transform 0.16s; }
.tr-pile-item + .tr-pile-item { margin-left: -18px; }
.tr-pile-item:hover { transform: translateY(-6px); z-index: 1; }
.tr-pile-more { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 62px; margin-left: -18px;
                border: 1px dashed var(--border); border-radius: 6px; background: var(--bg-raised);
                color: var(--ink-dim); font-size: 0.72rem; }
.tr-pile-empty { color: var(--ink-faint); font-size: 0.8rem; }

@media (max-width: 900px) {
  /* Sous 900px, deux offres côte à côte deviennent deux colonnes de 130px : on empile, et la
     passerelle centrale passe à l'horizontale. */
  .tr-boards { grid-template-columns: 1fr; gap: var(--s4); }
  .tr-bridge { height: 54px; }
  .tr-bridge::before, .tr-bridge::after { display: none; }
  .tr-partner { grid-template-columns: 44px minmax(0, 1fr); }
  .tr-partner-wants, .tr-partner-go { display: none; }
  .tr-row-inbox, .tr-row-hist { grid-template-columns: minmax(0, 1fr) auto; }
  .tr-row .tr-pile, .tr-row .tr-swap { display: none; }
}

/* ── Appoint en cristaux (2026-09-06) ──
   Placé entre l'en-tête et la grille : c'est une composante de l'offre au même titre que les
   cartes, pas une option reléguée en bas du container. */
.tr-appoint { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3);
              padding: var(--s2) var(--s3); border: 1px solid var(--border); border-radius: 11px;
              background: rgba(188, 215, 255, 0.03); }
.tr-appoint-label { flex: 0 0 auto; font-size: 0.7rem; letter-spacing: 0.12em;
                    text-transform: uppercase; color: var(--ink-faint); }
.tr-appoint-input { flex: 1; min-width: 0; padding: 6px 10px; font-size: 0.9rem; }
/* Les flèches natives du champ nombre volent de la place et invitent au clic répété alors que
   les montants utiles se comptent en centaines. */
.tr-appoint-input::-webkit-outer-spin-button,
.tr-appoint-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tr-appoint-input { -moz-appearance: textfield; appearance: textfield; }
.tr-appoint-fill { flex: 0 0 auto; padding: 6px 11px; border: 1px solid var(--border);
                   border-radius: 999px; background: transparent; color: var(--accent);
                   font: inherit; font-size: 0.72rem; white-space: nowrap; cursor: pointer;
                   transition: 0.16s; }
.tr-appoint-fill:hover { background: var(--accent-soft); border-color: var(--border-strong); }
.tr-appoint.is-readonly { justify-content: space-between; }
.tr-appoint.is-readonly strong { font-size: 0.9rem; }