/* REVANCHE EN PERLES (2026-10-21) — cartes de l'écran de mort (#death-revenge).
   Direction artistique ANTIQUE (orichalque, terre cuite, vert-de-gris sur marbre crème) : des couleurs
   CHAUDES et désirables, hiérarchie unique par carte : BÉNÉFICE (nom + atouts) → PRIX (perles) → BOUTON.
   Chargée en dernier : tout est qualifié `html body #death-screen #death-revenge` pour battre les anciennes
   feuilles (style.css, charte-pastel, arcade-mort, règles injectées par shop-stripe.js).
   Contrastes WCAG AA vérifiés : encre #3b2a00 sur crème/or (≥ 9:1), blanc sur terre cuite #a8321f (≥ 7:1),
   blanc sur vert-de-gris #1f6a5e (≥ 6:1), manque de perles #8a2a1a sur crème (≥ 7:1). */

html body #death-screen #death-revenge {
  --rv-ink: #3b2a00; --rv-ink-dim: #6b5222; --rv-cream: #fbf1d6; --rv-cream-2: #f3dfae;
  --rv-gold: #e3b85a; --rv-gold-d: #b9871f; --rv-clay: #a8321f; --rv-clay-d: #6e1d10;
  --rv-teal: #1f6a5e; --rv-teal-d: #134339; --rv-pearl: #c9456b; --rv-short: #8a2a1a;
  display: flex; flex-direction: column; gap: 10px; width: 100%; margin: 6px 0 0; padding: 12px 12px 10px;
  box-sizing: border-box; border-radius: 6px;
  background: radial-gradient(120% 90% at 50% -10%, rgba(227, 184, 90, .32), transparent 62%), linear-gradient(180deg, #f8ebc8, #efd9a0) !important;
  border: 3px solid var(--rv-ink) !important; box-shadow: 0 3px 0 rgba(58, 47, 34, .55);
}
html body #death-screen #death-revenge.hidden { display: none !important; }

/* ---- en-tête : titre + portefeuille de perles ---- */
html body #death-screen #death-revenge .death-revenge-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; }
html body #death-screen #death-revenge .death-revenge-title {
  background: none !important; -webkit-text-fill-color: var(--rv-clay-d) !important; color: var(--rv-clay-d) !important;
  font: 900 15px/1.1 Georgia, 'Times New Roman', serif; letter-spacing: .08em; text-transform: uppercase;
}
html body #death-screen #death-revenge .rv-wallet {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; white-space: nowrap;
  background: #fffaf0 !important; border: 2px solid var(--rv-ink) !important; color: var(--rv-ink) !important;
  font: 700 12.5px/1 system-ui, 'Segoe UI', sans-serif;
}
html body #death-screen #death-revenge .rv-wallet b { color: var(--rv-ink) !important; font-weight: 900; font-size: 14px; }
html body #death-screen #death-revenge .rv-wallet span { color: var(--rv-ink) !important; }
html body #death-screen #death-revenge .rv-pearl { color: var(--rv-pearl) !important; font-size: 1.1em; line-height: 1; }
html body #death-screen #death-revenge-taunt { margin: 0; text-align: center; font: 700 12px/1.35 system-ui, sans-serif; color: var(--rv-clay-d) !important; background: none !important; border: 0 !important; padding: 0; animation: none; }
html body #death-screen #death-revenge-taunt b { color: var(--rv-clay) !important; }
html body #death-screen #death-revenge-taunt.hidden { display: none !important; }

/* ---- grille de cartes : 2 colonnes, 3 quand l'offre rare est tirée ---- */
html body #death-screen #death-revenge .rv-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 10px; align-items: stretch; width: 100%; }
html body #death-screen #death-revenge .rv-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0;
  padding: 26px 10px 10px; box-sizing: border-box; text-align: center; overflow: hidden; border-radius: 5px;
  background: linear-gradient(180deg, #fffaf0, var(--rv-cream)) !important; border: 3px solid var(--rv-ink) !important;
  box-shadow: 0 3px 0 rgba(58, 47, 34, .6); transition: transform .14s ease, box-shadow .14s ease;
}
html body #death-screen #death-revenge .rv-card.hidden { display: none !important; }
html body #death-screen #death-revenge .rv-card:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(58, 47, 34, .55), 0 10px 18px rgba(80, 50, 10, .25); }
html body #death-screen #death-revenge .rv-card--crush {
  background: radial-gradient(90% 60% at 50% 0%, rgba(255, 226, 140, .75), transparent 70%), linear-gradient(180deg, #fff3cf, #f6d98a) !important;
  border-color: var(--rv-gold-d) !important; box-shadow: 0 3px 0 #7a5410, 0 0 0 2px var(--rv-ink), 0 0 18px rgba(227, 184, 90, .55);
}
html body #death-screen #death-revenge .rv-card--bonus {
  background: radial-gradient(90% 60% at 50% 0%, rgba(120, 214, 190, .55), transparent 70%), linear-gradient(180deg, #f2fbf4, #cfeadb) !important;
  border-color: var(--rv-teal) !important;
}

/* ---- ruban de la carte ---- */
html body #death-screen #death-revenge .rv-ribbon {
  position: absolute; top: 0; left: 0; right: 0; padding: 4px 6px; text-align: center;
  font: 900 10.5px/1.1 system-ui, 'Segoe UI', sans-serif; letter-spacing: .09em; text-transform: uppercase;
  background: var(--rv-clay) !important; color: #fff !important; border-bottom: 2px solid var(--rv-ink);
}
html body #death-screen #death-revenge .rv-ribbon--best { background: linear-gradient(180deg, #f3cf6e, var(--rv-gold)) !important; color: var(--rv-ink) !important; }
html body #death-screen #death-revenge .rv-ribbon--rare { background: var(--rv-teal) !important; color: #fff !important; }

/* ---- navire / bonus ---- */
html body #death-screen #death-revenge .rv-stage { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; min-height: 0; height: auto; }
html body #death-screen #death-revenge .rv-stage .rc-ship { width: 100%; max-width: 118px; height: auto; display: block; }
html body #death-screen #death-revenge .rc-uparrow { position: absolute; top: 0; right: 6px; color: var(--rv-clay) !important; font-size: 18px; animation: rvArrow 1.4s ease-in-out infinite; }
html body #death-screen #death-revenge .rv-bonus-ico { position: absolute; top: 0; right: 4px; font-size: 24px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25)); }
@keyframes rvArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
html body #death-screen #death-revenge .rv-hull { color: var(--rv-ink-dim) !important; font: 700 11px/1.2 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
html body #death-screen #death-revenge .rv-hull span { color: var(--rv-ink-dim) !important; }

/* ---- bénéfice : nom + atouts ---- */
html body #death-screen #death-revenge .rv-name { margin: 0; color: var(--rv-ink) !important; font: 900 19px/1.1 Georgia, 'Times New Roman', serif; }
html body #death-screen #death-revenge .rv-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; width: 100%; }
html body #death-screen #death-revenge .rv-perks li {
  position: relative; padding: 3px 6px 3px 22px; text-align: left; border-radius: 4px; background: rgba(255, 255, 255, .6);
  color: var(--rv-ink) !important; font: 600 11.5px/1.3 system-ui, 'Segoe UI', sans-serif;
}
html body #death-screen #death-revenge .rv-perks li::before { content: '✦'; position: absolute; left: 6px; top: 3px; color: var(--rv-gold-d); font-size: 10px; }

/* ---- prix en perles (gros, lisible) ---- */
html body #death-screen #death-revenge .rv-price { display: inline-flex; align-items: baseline; gap: 5px; margin-top: auto; padding-top: 4px; color: var(--rv-ink) !important; }
html body #death-screen #death-revenge .rv-price b { color: var(--rv-ink) !important; font: 900 26px/1 Georgia, 'Times New Roman', serif; }
html body #death-screen #death-revenge .rv-price span { color: var(--rv-ink-dim) !important; font: 700 12px/1 system-ui, sans-serif; }
html body #death-screen #death-revenge .rv-price .rv-pearl { color: var(--rv-pearl) !important; font-size: 18px; }
html body #death-screen #death-revenge .rv-short { color: var(--rv-short) !important; font: 800 11.5px/1.2 system-ui, sans-serif; }
html body #death-screen #death-revenge .rv-short.hidden { display: none !important; }

/* ---- bouton d'achat ---- */
html body #death-screen #death-revenge .rv-buy {
  width: 100%; min-height: 44px; margin: 0; padding: 8px 10px; cursor: pointer; border-radius: 4px !important;
  border: 3px solid var(--rv-ink) !important; background: linear-gradient(180deg, #c9482f, var(--rv-clay)) !important; color: #fff !important;
  font: 900 14px/1.1 system-ui, 'Segoe UI', sans-serif; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 3px 0 var(--rv-clay-d); transition: transform .1s ease, box-shadow .1s ease, filter .12s ease;
}
html body #death-screen #death-revenge .rv-buy .rv-buy-txt { color: inherit !important; }
html body #death-screen #death-revenge .rv-card--crush .rv-buy { background: linear-gradient(180deg, #f6d36f, var(--rv-gold)) !important; color: var(--rv-ink) !important; box-shadow: 0 3px 0 #7a5410; }
html body #death-screen #death-revenge .rv-card--bonus .rv-buy { background: linear-gradient(180deg, #2b8372, var(--rv-teal)) !important; color: #fff !important; box-shadow: 0 3px 0 var(--rv-teal-d); }
html body #death-screen #death-revenge .rv-buy:hover:not(:disabled) { filter: brightness(1.07); }
html body #death-screen #death-revenge .rv-buy:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
html body #death-screen #death-revenge .rv-buy:focus-visible { outline: 3px solid var(--rv-ink); outline-offset: 2px; }
html body #death-screen #death-revenge .rv-buy:disabled { opacity: .6; cursor: default; filter: grayscale(.4); }
/* état « pas assez de perles » : le bouton devient une invitation à recharger (or sur encre — pas grisé) */
html body #death-screen #death-revenge .rv-card.is-short .rv-buy {
  background: linear-gradient(180deg, #4a3a1c, #2d2210) !important; color: #ffe29a !important; box-shadow: 0 3px 0 #120d04;
}
html body #death-screen #death-revenge .rv-card.is-short .rv-price b { color: var(--rv-short) !important; }

@media (prefers-reduced-motion: reduce) {
  html body #death-screen #death-revenge .rc-uparrow { animation: none; }
  html body #death-screen #death-revenge .rv-card, html body #death-screen #death-revenge .rv-buy { transition: none; }
}

/* ---- MOBILE : cartes empilées, ligne compacte (navire à gauche, détail à droite) ---- */
@media (max-width: 700px) {
  html body #death-screen #death-revenge .rv-cards { grid-auto-flow: row; grid-template-columns: 1fr; gap: 8px; }
  html body #death-screen #death-revenge .rv-card {
    display: grid; grid-template-columns: 92px 1fr; grid-template-areas: "stage name" "stage perks" "stage hull" "price price" "short short" "buy buy";
    column-gap: 10px; row-gap: 3px; text-align: left; padding: 28px 10px 10px; align-items: center;
  }
  html body #death-screen #death-revenge .rv-stage { grid-area: stage; }
  html body #death-screen #death-revenge .rv-stage .rc-ship { max-width: 92px; }
  html body #death-screen #death-revenge .rv-name { grid-area: name; font-size: 17px; }
  html body #death-screen #death-revenge .rv-hull { grid-area: hull; }
  html body #death-screen #death-revenge .rv-perks { grid-area: perks; flex-direction: row; flex-wrap: wrap; gap: 3px; }
  html body #death-screen #death-revenge .rv-perks li { padding: 2px 6px 2px 18px; font-size: 10.5px; }
  html body #death-screen #death-revenge .rv-perks li::before { left: 5px; top: 2px; }
  html body #death-screen #death-revenge .rv-price { grid-area: price; justify-self: center; margin-top: 2px; }
  html body #death-screen #death-revenge .rv-short { grid-area: short; justify-self: center; }
  html body #death-screen #death-revenge .rv-buy { grid-area: buy; }
  html body #death-screen #death-revenge .rv-card:hover { transform: none; }
}