/*
 * Rejouage cinématique de combat — « La Dragonnerie »
 * Pilote replay : en-tête, carte, overlays intro/victoire, bandeau de contrôles.
 * La SCÈNE partagée (portraits, barres, pastilles, FX, journal) vit dans combat-scene.css,
 * chargé AVANT ce fichier. Préfixe .rjc- pour ne pas collisionner avec l'ancien écran (.rej-).
 * Aucune dépendance : polices système, emojis, dégradés (pas d'image bitmap).
 */

.rjc { max-width: 1120px; margin: 0 auto; }
.rjc-serif { font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; }

/* ---------- En-tête ---------- */
.rjc-head { text-align: center; margin-bottom: 22px; }
.rjc-kicker {
  display: inline-block; background: rgba(20, 12, 5, .6); border: 1px solid #6b4c22;
  color: #e3b768; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  padding: 5px 16px; border-radius: 20px;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
}
.rjc-title {
  font-size: 40px; margin-top: 14px; display: flex; align-items: center;
  justify-content: center; gap: 16px; flex-wrap: wrap; line-height: 1.15;
}
.rjc-title .name-l { color: #e0876a; }
.rjc-title .name-r { color: #e3b768; }
.rjc-title .cross  { font-size: 26px; opacity: .7; }
.rjc-title .crown  { font-size: 22px; }
.rjc-sub { color: #b79a63; font-size: 15px; font-style: italic; margin-top: 6px; }
.rjc-orn { color: #6f5a30; margin-top: 12px; letter-spacing: 6px; }

/* ---------- Carte ---------- */
.rjc-card {
  border: 1px solid #604324; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6); background: linear-gradient(160deg, #2a1c0d, #160f07);
}

/* ---------- Couronne de scène (posée sur le portrait du vainqueur) ---------- */
.rjc-crown { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: 19px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); z-index: 2; }

/* ---------- Overlays intro / victoire ---------- */
.rjc-overlay { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; }
.rjc-overlay.intro { background: radial-gradient(circle at 50% 45%, rgba(46,32,9,.55), rgba(10,7,3,.96)); gap: 26px; }
.rjc-overlay.victory { flex-direction: column; background: radial-gradient(circle at 50% 40%, rgba(70,52,14,.6), rgba(10,7,3,.93)); animation: rjc-vicIn .5s ease both; }
.rjc-overlay[hidden] { display: none; }

.rjc-flash { position: absolute; inset: 0; background: #fff; animation: rjc-flashWhite .5s ease .5s both; pointer-events: none; }
.rjc-intro-port { width: 76px; height: 76px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.rjc-intro-port.l { background: radial-gradient(circle at 35% 30%, #7a2b24, #2a0f0c); border: 2px solid #c05a4f; animation: rjc-slideL .5s ease both; }
.rjc-intro-port.l .ini { font-size: 34px; color: #f0c9a0; }
.rjc-intro-port.r { background: radial-gradient(circle at 35% 30%, #6a5a2c, #241a08); border: 2px solid #e3b768; animation: rjc-slideR .5s ease both; }
.rjc-intro-port.r .ini { font-size: 34px; color: #f0dca0; }
.rjc-intro-mid { text-align: center; }
.rjc-intro-clash { font-size: 40px; display: block; filter: drop-shadow(0 3px 8px rgba(0,0,0,.7)); animation: rjc-clashPop .55s ease .3s both; }
.rjc-intro-line { font-size: 18px; color: #f0dca0; margin-top: 6px; animation: rjc-introTitle .5s ease .55s both; }

.rjc-vic-crown { font-size: 20px; }
.rjc-vic-title { font-size: 38px; color: #f0dca0; text-shadow: 0 3px 12px rgba(0,0,0,.7); letter-spacing: 2px; }
.rjc-vic-sub { color: #e3b768; font-size: 15px; margin-top: 2px; }

/* ---------- Boutons ---------- */
.rjc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid #6b4c22; border-radius: 10px; background: linear-gradient(180deg, #3a2a12, #241809);
  color: #f0dca0; font-size: 14px; font-weight: 600; padding: 9px 14px; cursor: pointer;
  transition: filter .15s ease, transform .12s ease; font-family: "Segoe UI", system-ui, sans-serif;
}
.rjc-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.rjc-btn:focus-visible { outline: 2px solid #e3b768; outline-offset: 2px; }
.rjc-btn.primary { background: linear-gradient(150deg, #e0bb65, #c9a24a 55%, #a8842f); color: #2a1d0e; border-color: #8a6d2f; font-weight: 700; }
.rjc-btn.ico { width: 40px; height: 40px; padding: 0; font-size: 16px; }

/* ---------- Bandeau contrôles ---------- */
.rjc-controls { padding: 13px 22px; background: #161009; border-top: 1px solid #4a3418; display: flex; align-items: center; gap: 12px; }
.rjc-controls .speed { min-width: 52px; }
.rjc-turn { font-size: 13px; color: #e3b768; white-space: nowrap; }

.rjc-range { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 6px; background: #2a1d0e; border: 1px solid #4a3418; outline: none; cursor: pointer; flex: 1; }
.rjc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(180deg, #e0bb65, #a8842f); border: 1px solid #2a1d0e; box-shadow: 0 1px 4px rgba(0,0,0,.6); }
.rjc-range::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: 50%; background: linear-gradient(180deg, #e0bb65, #a8842f); }

/* ---------- Animations (intro / victoire) ---------- */
@keyframes rjc-slideL { 0% { transform: translateX(-90px) rotate(-7deg); opacity: 0; } 100% { transform: translateX(0) rotate(0); opacity: 1; } }
@keyframes rjc-slideR { 0% { transform: translateX(90px) rotate(7deg); opacity: 0; } 100% { transform: translateX(0) rotate(0); opacity: 1; } }
@keyframes rjc-clashPop {
  0%   { transform: scale(0) rotate(-50deg); opacity: 0; }
  55%  { transform: scale(1.6) rotate(12deg); opacity: 1; }
  78%  { transform: scale(.9) rotate(-4deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes rjc-flashWhite { 0% { opacity: 0; } 40% { opacity: .85; } 100% { opacity: 0; } }
@keyframes rjc-introTitle { 0% { transform: translateY(12px); opacity: 0; letter-spacing: 6px; } 100% { transform: translateY(0); opacity: 1; letter-spacing: 2px; } }
@keyframes rjc-vicIn { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .rjc-overlay, .rjc-intro-port, .rjc-intro-clash, .rjc-intro-line, .rjc-flash { animation: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .rjc-title { font-size: 30px; }
  .rjc-controls { flex-wrap: wrap; }
  .rjc-range { order: 5; flex-basis: 100%; }
}