/* ==========================================================================
   Panneau Point Pirate

   Fiche modale : en-tete avec coordonnees, portrait du commandant a gauche,
   butin et rapport de force a droite, bouton d'attaque en pied. Cadre bleu
   technique et accent rouge, conformement a la direction artistique du mockup.
   ========================================================================== */

.pirate-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--space-3);
  background: rgba(2, 7, 20, 0.72);
  backdrop-filter: blur(2px);
}

/* `display: grid` ci-dessus l'emporterait sur la regle globale `[hidden]`. */
.pirate-panel[hidden] {
  display: none;
}

.pirate-frame {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: min(46rem, 100%);
  max-height: min(92dvh, 52rem);
  padding: var(--space-3);
  border: 2px solid rgba(74, 158, 232, 0.55);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 0%, rgba(30, 84, 158, 0.4), transparent 62%),
    linear-gradient(180deg, rgba(8, 24, 54, 0.98), rgba(3, 11, 30, 0.99));
  box-shadow: 0 0 2rem rgba(40, 130, 230, 0.28), var(--shadow-2);
  overflow: hidden;
}

/* --- En-tete --- */

.pirate-panel-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(74, 158, 232, 0.4);
  border-radius: var(--radius-md);
  background: rgba(10, 30, 66, 0.7);
}

.pirate-header-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.pirate-header-title strong {
  color: #7cc4ff;
  font-family: var(--font-display);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.pirate-header-pin {
  color: #4a9ee8;
}

.pirate-header-coords {
  flex: 1;
  padding-left: var(--space-2);
  border-left: 1px solid rgba(74, 158, 232, 0.32);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.pirate-header-actions {
  display: flex;
  gap: 0.35rem;
}

.pirate-icon-button {
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(74, 158, 232, 0.45);
  border-radius: var(--radius-md);
  background: rgba(12, 34, 72, 0.8);
  color: #8ec8ff;
  font-size: var(--text-sm);
}

.pirate-icon-button.is-active {
  border-color: rgba(255, 205, 110, 0.75);
  background: linear-gradient(180deg, rgba(255, 199, 88, 0.9), rgba(190, 124, 20, 0.9));
  color: #16110a;
}

.pirate-icon-button--close {
  border-color: rgba(120, 170, 220, 0.45);
}

/* --- Corps : portrait a gauche, butin a droite --- */

.pirate-panel-body {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-3);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pirate-panel-identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.pirate-portrait {
  position: relative;
  /* Bornee en hauteur : sans cela le portrait, plus haut que large, chassait
     l'identite et la puissance hors de la fiche. */
  max-height: 20rem;
  aspect-ratio: 317 / 404;
  border: 1px solid rgba(74, 158, 232, 0.38);
  border-radius: var(--radius-lg);
  background: var(--pirate-art) center top / cover no-repeat;
  background-color: #05122c;
  box-shadow: inset 0 -3rem 3rem rgba(3, 11, 30, 0.85);
}

.pirate-skull-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid rgba(120, 190, 255, 0.55);
  border-radius: var(--radius-md);
  background: rgba(8, 26, 58, 0.86);
  color: #8ed4ff;
  font-size: 1.1rem;
}

.pirate-identity {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  text-align: center;
}

.pirate-identity small {
  color: #6fb6f5;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.pirate-identity strong {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.pirate-identity em {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-style: normal;
}

.pirate-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr));
  gap: var(--space-2);
}

.pirate-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid rgba(74, 158, 232, 0.34);
  border-radius: var(--radius-md);
  background: rgba(10, 28, 62, 0.66);
  text-align: center;
}

.pirate-stat small {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.pirate-stat b {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--text-md);
}

/* --- Butin --- */

.pirate-panel-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

/* La grille de butin absorbe l'espace restant : sans cela, la colonne droite
   se tassait en haut et laissait un grand vide sous l'avertissement. */
.pirate-panel-rewards {
  flex: 1;
  display: flex;
  align-items: center;
}

.pirate-panel-rewards .pirate-rewards-grid {
  width: 100%;
}

.pirate-section-title {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.pirate-panel-rewards {
  padding: var(--space-2);
  border: 1px solid rgba(74, 158, 232, 0.34);
  border-radius: var(--radius-md);
  background: rgba(8, 24, 54, 0.6);
}

.pirate-rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(6rem, 100%), 1fr));
  gap: var(--space-2);
}

.pirate-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.4rem;
  border: 1px solid rgba(74, 158, 232, 0.3);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(16, 44, 92, 0.6), rgba(5, 16, 40, 0.8));
}

.pirate-reward-amount {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--text-sm);
}

.pirate-reward-art {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
}

.pirate-reward-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.15rem 0.35rem rgba(0, 0, 0, 0.6));
}

.pirate-reward-fallback {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-style: normal;
}

.pirate-reward-count {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-style: normal;
}

.pirate-rewards-empty {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-align: center;
}

/* --- Avertissement : le ton suit le rapport de force reel --- */

.pirate-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid rgba(74, 158, 232, 0.34);
  border-radius: var(--radius-md);
  background: rgba(8, 24, 54, 0.6);
}

.pirate-warning strong {
  display: block;
  color: #7cc4ff;
  font-size: var(--text-sm);
}

.pirate-warning p {
  margin: 0.1rem 0 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.pirate-warning-glyph {
  flex: 0 0 auto;
  color: #7cc4ff;
  font-size: 1.2rem;
}

.pirate-warning.is-danger {
  border-color: rgba(255, 110, 90, 0.5);
  background: rgba(120, 26, 22, 0.28);
}

.pirate-warning.is-danger strong,
.pirate-warning.is-danger .pirate-warning-glyph {
  color: #ff9a86;
}

.pirate-warning.is-safe {
  border-color: rgba(90, 220, 160, 0.5);
  background: rgba(24, 96, 70, 0.24);
}

.pirate-warning.is-safe strong,
.pirate-warning.is-safe .pirate-warning-glyph {
  color: #86eec0;
}

/* --- Attaque --- */

.pirate-panel-footer {
  flex: 0 0 auto;
}

.pirate-attack-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid rgba(255, 90, 70, 0.85);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(150, 28, 22, 0.95), rgba(84, 12, 12, 0.98));
  box-shadow: 0 0 1.4rem rgba(255, 70, 50, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #ffd9d2;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.pirate-attack-button[disabled] {
  border-color: rgba(150, 160, 180, 0.4);
  background: linear-gradient(180deg, rgba(40, 56, 84, 0.9), rgba(18, 28, 48, 0.95));
  box-shadow: none;
  color: var(--text-secondary);
}

.pirate-attack-glyph {
  font-size: 1.2rem;
}

@media (max-width: 34rem) {
  .pirate-panel-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .pirate-portrait {
    max-height: 14rem;
    aspect-ratio: auto;
    height: 14rem;
    background-position: center 22%;
  }
}

/* --- Rapport de force ------------------------------------------------------

   Le ton suit la regle de jeu : vert si l'on domine, jaune si l'on est en
   dessous, rouge s'il reste moins d'un quart de leur puissance. */

.pirate-power-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid rgba(74, 158, 232, 0.34);
  border-radius: var(--radius-md);
  background: rgba(8, 24, 54, 0.66);
}

.pirate-power {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  text-align: center;
}

.pirate-power small {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.pirate-power b {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.pirate-power--enemy b {
  color: #ffb3a4;
}

.pirate-power-versus {
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-display);
}

.pirate-power-ratio {
  grid-column: 1 / -1;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-style: normal;
  text-align: center;
}

.pirate-power-compare.is-safe {
  border-color: rgba(90, 220, 160, 0.6);
  background: rgba(24, 96, 70, 0.24);
}

.pirate-power-compare.is-safe .pirate-power--mine b {
  color: #86eec0;
}

.pirate-power-compare.is-warn {
  border-color: rgba(255, 205, 110, 0.62);
  background: rgba(120, 88, 16, 0.24);
}

.pirate-power-compare.is-warn .pirate-power--mine b {
  color: #ffd88a;
}

.pirate-power-compare.is-danger {
  border-color: rgba(255, 110, 90, 0.62);
  background: rgba(120, 26, 22, 0.28);
}

.pirate-power-compare.is-danger .pirate-power--mine b {
  color: #ff9a86;
}

/* Niveau appose sur le portrait : il libere une ligne dans l'identite. */
.pirate-level-badge {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid rgba(120, 190, 255, 0.55);
  border-radius: var(--radius-pill);
  background: rgba(8, 26, 58, 0.9);
  color: #8ed4ff;
  font-family: var(--font-display);
  font-size: var(--text-xs);
}