/* ==========================================================================
   Le Braquage — le coffre communautaire de la semaine
   --------------------------------------------------------------------------
   Une règle à ne pas oublier dans ce fichier : chaque classe à laquelle on donne
   un `display:` doit aussi avoir sa règle `[hidden] { display: none }`. Une règle
   d'auteur bat la règle `[hidden]` du navigateur, et l'élément resterait visible.
   ========================================================================== */

/* ---- l'en-tête ---- */
.heist-hero-note {
  margin-top: 8px; font-size: 12.5px; line-height: 1.6;
  color: var(--text-dim, #a7adb5);
}

/* ---- LE COFFRE ---- */
.heist-vault {
  display: flex; align-items: stretch; gap: 20px;
  margin: 0 0 22px; padding: 18px 20px; border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,138,0,.10), transparent 55%),
    var(--panel, #14171b);
  border: 1px solid var(--border, #262b31);
  position: relative; overflow: hidden;
}
.heist-vault[hidden] { display: none; }
.heist-vault[data-status="cracked"] { border-color: rgba(255,196,0,.5); }

/* La porte : décorative, elle tourne lentement tant que le coffre est ouvert. */
.heist-vault-door {
  flex: 0 0 92px; width: 92px; border-radius: 50%;
  align-self: center; aspect-ratio: 1;
  background: conic-gradient(from 210deg, #2a2f36, #171a1f 30%, #33383f 55%, #14171b 80%, #2a2f36);
  border: 3px solid #3a4048;
  display: grid; place-items: center;
  box-shadow: inset 0 0 24px rgba(0,0,0,.65), 0 6px 18px rgba(0,0,0,.4);
}
.heist-dial {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(150deg, #4a515a, #23272d);
  border: 2px solid #575e68; position: relative;
  animation: heist-dial-turn 9s linear infinite;
}
.heist-dial span {
  position: absolute; left: 50%; top: 4px; width: 3px; height: 15px;
  margin-left: -1.5px; border-radius: 2px; background: #ff8a00;
}
@keyframes heist-dial-turn {
  0% { transform: rotate(0deg); } 45% { transform: rotate(190deg); }
  55% { transform: rotate(150deg); } 100% { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) { .heist-dial { animation: none; } }

.heist-vault-body { flex: 1 1 auto; min-width: 0; }
.heist-vault-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.heist-vault-head .trade-section-title { margin: 0 0 10px; }
.heist-week { font-size: 11.5px; color: var(--text-dim, #a7adb5); }

/* ---- la barre : c'est elle, le cœur de la page ---- */
.heist-bar {
  position: relative; height: 30px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border, #262b31);
}
.heist-bar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #ff8a00, #ffc400);
  box-shadow: 0 0 22px rgba(255,138,0,.45);
  /* La barre monte visiblement quand quelqu'un d'autre verse : sans transition, le
     rafraîchissement toutes les cinq secondes ferait des sauts secs. */
  transition: width .7s cubic-bezier(.22,.9,.3,1);
}
.heist-bar-shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 55%);
}
.heist-bar-percent {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 800; letter-spacing: .4px;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8);
}

.heist-figures {
  display: grid; gap: 10px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.heist-figure {
  padding: 9px 12px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border, #262b31);
}
.heist-figure-label {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text-dim, #a7adb5);
}
.heist-figure b { font-size: 15px; }

/* ---- verser ---- */
.heist-deposit { margin-bottom: 22px; }
.heist-deposit[hidden] { display: none; }
.heist-deposit-box {
  padding: 16px; border-radius: 14px;
  background: var(--panel, #14171b); border: 1px solid var(--border, #262b31);
}
.heist-deposit-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.heist-deposit-label { font-size: 12.5px; color: var(--text-dim, #a7adb5); }
.heist-amount {
  flex: 1 1 160px; min-width: 0; padding: 10px 12px; border-radius: 10px;
  background: rgba(0,0,0,.28); border: 1px solid var(--border, #262b31);
  color: inherit; font-size: 15px; font-weight: 700;
}
.heist-amount:focus { outline: none; border-color: #ff8a00; }
.heist-go.is-busy { opacity: .6; pointer-events: none; }

.heist-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.heist-preset {
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font-size: 12px; font-weight: 700; color: inherit;
  background: rgba(255,255,255,.05); border: 1px solid var(--border, #262b31);
}
.heist-preset:hover { border-color: #ff8a00; color: #ffc400; }

.heist-deposit-note {
  margin-top: 11px; font-size: 12px; line-height: 1.6;
  color: var(--text-dim, #a7adb5);
}
.heist-error {
  margin-top: 10px; padding: 9px 12px; border-radius: 10px; font-size: 12.5px;
  background: rgba(235,75,75,.12); border: 1px solid rgba(235,75,75,.35); color: #ff9b9b;
}
.heist-error[hidden] { display: none; }

.heist-projection {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: linear-gradient(110deg, rgba(255,196,0,.12), rgba(255,138,0,.03));
  border: 1px solid rgba(255,196,0,.3); font-size: 13px;
}
.heist-projection[hidden] { display: none; }
.heist-projection-label { font-size: 11.5px; color: var(--text-dim, #a7adb5); }
.heist-projection-rank { font-size: 11.5px; color: var(--text-dim, #a7adb5); }

/* ---- l'équipe ---- */
.heist-team { margin-bottom: 22px; }
.heist-team-list { display: grid; gap: 8px; }
.heist-member {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 13px; border-radius: 12px;
  background: var(--panel, #14171b); border: 1px solid var(--border, #262b31);
}
.heist-member.is-me { border-color: rgba(255,138,0,.45); background: rgba(255,138,0,.06); }
.heist-member-rank {
  flex: 0 0 26px; text-align: center; font-size: 14px; font-weight: 800;
  color: var(--text-dim, #a7adb5);
}
/* Le visage : la silhouette est dessous, la photo par-dessus. Les deux occupent la
   même case, donc rien ne bouge quand une photo ne charge pas. `.avatar-sm` du site
   fait 24 px — on le force à 32 ici sans toucher à la règle d'origine, qui sert
   partout ailleurs. */
.heist-member-face { flex: 0 0 32px; width: 32px; height: 32px; }
.heist-member-face .heist-face-inner {
  position: relative; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(140deg, #2c323a, #191d22);
  border: 1px solid var(--border, #262b31);
  color: var(--text-dim, #a7adb5);
}
.heist-member-face .heist-face-inner svg { width: 17px; height: 17px; }
.heist-member-face .heist-face-inner img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
.heist-member.is-me .heist-member-face .heist-face-inner { border-color: rgba(255,138,0,.55); }
.heist-member-main { flex: 1 1 auto; min-width: 0; }
.heist-member-name {
  font-size: 13.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.heist-member-name i { font-weight: 400; font-size: 11.5px; color: var(--text-dim, #a7adb5); }
.heist-member-bar {
  height: 5px; margin-top: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.06);
}
.heist-member-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #ff8a00, #ffc400);
  transition: width .6s ease;
}
.heist-member-figures { flex: 0 0 auto; text-align: right; }
.heist-member-figures b { font-size: 13.5px; }
.heist-member-share {
  display: block; font-size: 11px; color: var(--text-dim, #a7adb5);
}
.heist-empty {
  padding: 18px; border-radius: 12px; text-align: center; font-size: 13px;
  color: var(--text-dim, #a7adb5);
  background: var(--panel, #14171b); border: 1px dashed var(--border, #262b31);
}

/* ---- mon butin ---- */
.heist-myreward { margin-bottom: 22px; }
.heist-myreward[hidden] { display: none; }
.heist-myreward-body {
  padding: 15px; border-radius: 14px;
  background: linear-gradient(140deg, rgba(255,196,0,.09), rgba(255,138,0,.02));
  border: 1px solid rgba(255,196,0,.3);
}
.heist-myreward-head { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 13px; }
.heist-myreward-chip {
  padding: 5px 11px; border-radius: 999px; font-size: 12px;
  background: rgba(0,0,0,.28); border: 1px solid var(--border, #262b31);
}

/* ---- le butin, en vignettes ---- */
.heist-loot-grid {
  display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
}
.heist-loot-item {
  padding: 10px 8px; border-radius: 11px; text-align: center;
  background: rgba(0,0,0,.26);
  border: 1px solid color-mix(in srgb, var(--rarity-color, #8847ff) 45%, transparent);
  box-shadow: inset 0 -22px 26px -22px var(--rarity-color, #8847ff);
}
.heist-loot-item .item-thumb { width: 78px; height: 58px; margin: 0 auto 6px; }
.heist-loot-name {
  font-size: 11.5px; font-weight: 700; line-height: 1.35;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.heist-loot-meta { font-size: 10px; color: var(--text-dim, #a7adb5); margin-top: 3px; }
.heist-loot-value {
  margin-top: 5px; font-size: 12px; font-weight: 800; color: #ffc400;
}

/* ---- l'historique ---- */
.heist-history { margin-bottom: 22px; }
.heist-history-list { display: grid; gap: 7px; }
.heist-history-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 13px; border-radius: 10px; font-size: 12.5px;
  background: var(--panel, #14171b); border: 1px solid var(--border, #262b31);
}
.heist-history-week { font-weight: 800; flex: 0 0 auto; }
.heist-history-total { flex: 1 1 auto; color: var(--text-dim, #a7adb5); }
.heist-history-people { color: var(--text-dim, #a7adb5); }
.heist-history-cracked .heist-history-status { color: #ffc400; }
.heist-history-refunded .heist-history-status { color: var(--text-dim, #a7adb5); }

/* ---- les règles ---- */
.heist-rules-list {
  margin: 0; padding: 15px 15px 15px 32px; border-radius: 14px;
  display: grid; gap: 8px; font-size: 12.5px; line-height: 1.6;
  color: var(--text-dim, #a7adb5);
  background: var(--panel, #14171b); border: 1px solid var(--border, #262b31);
}
.heist-rules-list b { color: var(--text, #e8eaed); }

/* ---- l'ouverture, en grand ---- */
.heist-crack-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: grid; place-items: center; padding: 20px;
  background: rgba(0,0,0,.82); backdrop-filter: blur(3px);
  overflow-y: auto;
}
.heist-crack-overlay[hidden] { display: none; }
.heist-crack-box {
  width: min(680px, 100%); padding: 26px 22px; border-radius: 18px; text-align: center;
  background: radial-gradient(120% 100% at 50% 0%, rgba(255,138,0,.16), transparent 60%), var(--panel, #14171b);
  border: 1px solid rgba(255,196,0,.45);
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.heist-crack-door {
  width: 92px; height: 92px; margin: 0 auto 14px; border-radius: 50%;
  background: conic-gradient(from 210deg, #2a2f36, #171a1f 30%, #33383f 55%, #14171b 80%, #2a2f36);
  border: 3px solid #3a4048; display: grid; place-items: center;
}
.heist-crack-dial {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(150deg, #ffc400, #ff8a00);
}
.heist-crack-door.is-blown { animation: heist-blow 1s cubic-bezier(.2,.9,.25,1); }
@keyframes heist-blow {
  0%   { transform: scale(1) rotate(0deg); filter: brightness(1); }
  35%  { transform: scale(1.16) rotate(160deg); filter: brightness(2.2); }
  60%  { transform: scale(.94) rotate(230deg); }
  100% { transform: scale(1) rotate(360deg); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) { .heist-crack-door.is-blown { animation: none; } }
.heist-crack-title { margin: 0 0 6px; font-size: 22px; }
.heist-crack-sub {
  margin: 0 0 16px; font-size: 13.5px; color: var(--text-dim, #a7adb5);
}
.heist-crack-loot { margin-bottom: 18px; max-height: 46vh; overflow-y: auto; }

/* ---- téléphone ---- */
@media (max-width: 620px) {
  .heist-vault { flex-direction: column; gap: 14px; padding: 15px; }
  .heist-vault-door { align-self: flex-start; flex-basis: 66px; width: 66px; }
  .heist-dial { width: 32px; height: 32px; }
  /* Sur téléphone, la colonne des chiffres ne tient plus à côté du pseudo : elle
     passe à la ligne, sinon le nom était rogné en « P… ». Il faut donc autoriser le
     retour à la ligne sur la rangée elle-même — sans flex-wrap, les deux colonnes se
     disputent la largeur au lieu de s'empiler. */
  .heist-member { flex-wrap: wrap; row-gap: 4px; }
  .heist-member-main { flex: 1 1 calc(100% - 82px); }
  .heist-member-figures {
    flex: 1 1 100%; text-align: left; padding-left: 70px;
    display: flex; align-items: baseline; gap: 9px;
  }
  .heist-member-share { display: inline; }
  .heist-history-row { font-size: 12px; }
}