/* =====================================================================================
 *  JOUEURS EN VEDETTE DANS LE MARCHÉ (14/10/2026) — voir public/marche-vedette.js
 *  Préfixe mvo- : rien d'autre n'est touché.
 * ===================================================================================== */
.mvo-bloc { position: relative; overflow: hidden; container-type: inline-size; margin: 4px 0 18px; padding: 14px 14px 16px;
    border-radius: 18px; border: 2px solid #e8c46a; background: radial-gradient(circle at 20% 30%, #3a2a08, #140e03);
    box-shadow: 0 0 0 1px #00000080, 0 10px 30px #0008, 0 0 26px #e8c46a33, inset 0 1px 0 #fff3cf33; isolation: isolate; }
.mvo-paillettes { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
    background:
      radial-gradient(1.5px 1.5px at 12% 22%, #ffe9a8, transparent 60%),
      radial-gradient(1px 1px at 38% 12%, #fff, transparent 60%),
      radial-gradient(2px 2px at 64% 30%, #ffd76a, transparent 60%),
      radial-gradient(1px 1px at 82% 14%, #fff3cf, transparent 60%),
      radial-gradient(1.5px 1.5px at 92% 60%, #ffd76a, transparent 60%),
      radial-gradient(1px 1px at 6% 80%, #fff3cf, transparent 60%),
      linear-gradient(115deg, transparent 30%, #e8c46a14 45%, transparent 60%); }

/* ---------- l'en-tête ---------- */
.mvo-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.mvo-titre { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mvo-titre img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 3px 6px #0009); }
.mvo-titre small { display: block; font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: #ffd76a; }
.mvo-titre h3 { margin: 0; font-size: 22px; font-weight: 900; line-height: 1.1; color: #fff3cf;
    background: linear-gradient(180deg, #fff6d6, #e8c46a 60%, #b8862b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mvo-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mvo-cd { font-size: 13px; font-weight: 700; color: #e9d9a8; }
.mvo-cd b { display: inline-block; margin-left: 4px; padding: 3px 8px; border-radius: 8px; background: #0b0802; border: 1px solid #e8c46a66;
    color: #34e7b9; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.mvo-rafraichir { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e8c46a; border-radius: 10px; cursor: pointer;
    padding: 7px 10px; font: inherit; font-size: 13px; font-weight: 900; color: #ffe9a8; background: #1f1605; box-shadow: 0 3px 0 #000a; }
.mvo-rafraichir img { width: 20px; height: 20px; object-fit: contain; }
.mvo-rafraichir:hover:not(:disabled) { background: #33240a; }
.mvo-rafraichir:disabled { opacity: .6; cursor: wait; }

/* ---------- les cartes ---------- */
.mvo-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; perspective: 900px; }
/* huit cartes : une rangee de huit quand la place le permet, sinon deux rangees de quatre */
@container (min-width: 1080px) { .mvo-rail { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.mvo-carte { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mvo-face { --mvo-rx: 0deg; --mvo-ry: 0deg; --mvo-mx: 50%; --mvo-my: 30%;
    position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 10px 8px 10px; border-radius: 16px 16px 16px 16px; color: #2b1d03;
    background: linear-gradient(155deg, #fff2bf 0%, #f2d27a 22%, #d9a944 52%, #f4d98a 74%, #b98a2e 100%);
    border: 2px solid #fff0b8; box-shadow: 0 0 0 1px #6b4a0e, 0 8px 18px #000a, inset 0 0 18px #fff6d655;
    transform: perspective(700px) rotateX(var(--mvo-rx)) rotateY(var(--mvo-ry));
    transition: transform .25s ease, box-shadow .25s ease; will-change: transform; }
.mvo-coin { position: absolute; left: 8px; top: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; z-index: 2; }
.mvo-note { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 18px; color: #ffe9a8; background: radial-gradient(circle at 35% 30%, #4a3509, #140e03);
    border: 3px solid #e8c46a; box-shadow: 0 2px 6px #0007; }
.mvo-poste { font-size: 11px; font-weight: 900; letter-spacing: .06em; color: #4a3108; }
.mvo-visage { width: 100%; height: 118px; display: flex; align-items: flex-end; justify-content: center; margin-top: 2px; }
.mvo-photo { height: 100%; width: auto; max-width: 92%; object-fit: contain; mix-blend-mode: multiply; filter: saturate(1.05) contrast(1.03); }
.mvo-visage .mvo-avatar, .mvo-visage .avatar { width: 92px; height: 92px; border: 2px solid #6b4a0e; }
.mvo-nom { width: 100%; margin-top: 6px; padding-top: 6px; border-top: 1px solid #6b4a0e55; font-weight: 900; font-size: 15px; letter-spacing: .02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #1f1402; }
.mvo-nom[onclick] { cursor: pointer; }
.mvo-nom[onclick]:hover { text-decoration: underline; }
.mvo-club { width: 100%; font-size: 12px; font-weight: 800; color: #5a3d07; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mvo-age { width: 100%; font-size: 11px; font-weight: 700; color: #6b4a0e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* le reflet : une tache de lumière qui suit la souris + une bande qui passe à l'entrée du survol */
.mvo-reflet { position: absolute; inset: 0; pointer-events: none; z-index: 3; border-radius: inherit; opacity: 0; transition: opacity .25s ease;
    background: radial-gradient(circle at var(--mvo-mx) var(--mvo-my), #ffffffaa, #ffffff22 30%, transparent 55%); mix-blend-mode: soft-light; }
.mvo-face::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; pointer-events: none; z-index: 3;
    background: linear-gradient(100deg, transparent, #ffffffb0 50%, transparent); transform: skewX(-18deg) translateX(-120%); opacity: 0; }

/* ---------- le bouton d'achat ---------- */
.mvo-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; border: 0; border-radius: 12px;
    padding: 9px 6px; font: inherit; font-weight: 900; font-size: 15px; cursor: pointer; color: #05261f;
    background: linear-gradient(180deg, #34e7b9, #14b88f); box-shadow: 0 4px 0 #0b7a5f; }
.mvo-btn s { font-size: 12px; font-weight: 800; opacity: .65; text-decoration-color: #c4122f; text-decoration-thickness: 2px; }
.mvo-prix { display: inline-flex; align-items: center; gap: 4px; }
.mvo-prix img { width: 30px; height: 30px; margin: -6px -4px -6px 0; object-fit: contain; }   /* 14/10 (Ju) : lingot plus gros */
.mvo-btn:not(:disabled):hover { filter: brightness(1.08); }
.mvo-btn:not(:disabled):active { transform: translateY(2px); box-shadow: 0 2px 0 #0b7a5f; }
.mvo-btn:disabled { cursor: default; box-shadow: none; color: #e9d9a8; background: #2a1f08; border: 1px solid #e8c46a55; font-size: 13px; }
.mvo-btn-ok:disabled { color: #34e7b9; border-color: #34e7b966; }
.mvo-parti .mvo-face { filter: grayscale(.75) brightness(.7); }
.mvo-achete .mvo-face { box-shadow: 0 0 0 1px #6b4a0e, 0 0 0 3px #34e7b9aa, 0 8px 18px #000a; }

/* ---------- survol à la souris ---------- */
@media (hover: hover) and (pointer: fine) {
    .mvo-carte:hover .mvo-face { transform: perspective(700px) rotateX(var(--mvo-rx)) rotateY(var(--mvo-ry)) scale(1.05); transition: transform .08s linear, box-shadow .25s ease;
        box-shadow: 0 0 0 1px #6b4a0e, 0 16px 30px #000c, 0 0 24px #ffd76a88, inset 0 0 18px #fff6d688; z-index: 2; }
    .mvo-carte:hover .mvo-reflet { opacity: 1; }
    .mvo-carte:hover .mvo-face::after { animation: mvo-balayage .9s ease-out; }
}
/* au toucher (téléphone) : un petit éclat */
.mvo-touche .mvo-face { animation: mvo-pression .6s ease-out; }
.mvo-touche .mvo-face::after { animation: mvo-balayage .6s ease-out; }
@keyframes mvo-balayage { 0% { opacity: 0; transform: skewX(-18deg) translateX(-120%); } 20% { opacity: 1; } 100% { opacity: 0; transform: skewX(-18deg) translateX(480%); } }
@keyframes mvo-pression { 0% { transform: scale(1); } 35% { transform: scale(.97); } 100% { transform: scale(1); } }

/* ---------- téléphone : les cartes défilent à l'horizontale ---------- */
@container (max-width: 620px) {
    .mvo-titre h3 { font-size: 19px; }
    .mvo-actions { width: 100%; justify-content: space-between; }
    .mvo-rail { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: 4px 14px 8px; scroll-padding: 0 14px; scrollbar-width: none; }
    .mvo-rail::-webkit-scrollbar { display: none; }
    .mvo-carte { flex: 0 0 142px; scroll-snap-align: start; }
    .mvo-visage { height: 104px; }
}
@media (max-width: 420px) { .mvo-bloc { padding: 12px 12px 14px; } }

@media (prefers-reduced-motion: reduce) {
    .mvo-face, .mvo-carte:hover .mvo-face { transform: none !important; transition: none !important; animation: none !important; }
    .mvo-face::after, .mvo-carte:hover .mvo-face::after { animation: none !important; }
    .mvo-reflet { transition: none; }
}

/* le solde d'or et son « + » vers la boutique (14/10/2026, Ju : « un bouton pour acheter des or si on n'en a pas ») */
.mvo-solde { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 4px 0 10px; border-radius: 10px; background: #0b0802; border: 1px solid #e8c46a88; color: #fff3cf; font-weight: 900; font-size: 15px; }
.mvo-solde img { width: 22px; height: 22px; object-fit: contain; }
.mvo-plus { width: 26px; height: 26px; border-radius: 50%; border: 0; background: linear-gradient(180deg, #34e7b9, #14b88f); color: #05261f; font-weight: 900; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; box-shadow: 0 2px 0 #0b7a5f; }

/* 14/10/2026 (Ju) : sur un ecran tactile, la regle generale des boutons (min-height 44px) etirait le « + » en ovale. */
.mvo-plus { min-height: 0; min-width: 0; flex: none; aspect-ratio: 1; }