/* Boxe (public/js/boxe.js) : tableau du combat en haut (énergie, endurance, round, compte de
   l'arbitre), grandes annonces au centre, touches et boutons des boxeurs en bas, palmarès. Verre
   et jetons de app.css. */

/* --- Tableau du combat, en bas au-dessus du dock, pour les boxeurs et les spectateurs proches ---
   (En haut, il cacherait les vignettes des conversations.) Pour un spectateur, il laisse la
   place de la bulle d'aide en dessous ; pour un boxeur, il porte aussi les touches. */

.boxe-hud {
  position: absolute;
  left: var(--dock-left);
  bottom: calc(var(--edge) + var(--dock-h) + var(--gap) + 46px);
  translate: -50% 0;
  transition:
    left var(--slide),
    bottom var(--slide);
  z-index: 8;
  width: min(560px, calc(100vw - 2 * var(--sp-3)));
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  animation: boxe-in var(--dur-slow) var(--ease-sheet) backwards;
}
body.boxing .boxe-hud {
  bottom: calc(var(--edge) + var(--dock-h) + var(--gap));
}
.boxe-score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
}
.boxe-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--hairline);
}
.boxe-controls[hidden] {
  display: none;
}
.boxe-hud.leaving {
  animation: boxe-out var(--dur-base) var(--ease-in) forwards;
}
@keyframes boxe-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}
@keyframes boxe-out {
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}
.boxe-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.boxe-side.empty {
  opacity: 0.45;
}
.boxe-side.blue {
  align-items: flex-end;
}
.boxe-name {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  font-size: var(--fs-sub);
  line-height: 1.2;
}
.boxe-side.blue .boxe-name {
  flex-direction: row-reverse;
}
.boxe-name b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.boxe-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #e63f38;
  box-shadow: inset 0 -2px 0 #a82b2d;
}
.boxe-side.blue .boxe-dot {
  background: #4995e3;
  box-shadow: inset 0 -2px 0 #416095;
}
/* Contre prêt (une esquive réussie) : le nom s'allume un instant. */
.boxe-side.counter .boxe-name b {
  color: #b8860b;
}

/* Barres : énergie (avec la trace de la perte, qui rattrape en douceur) et endurance. Le coin
   rouge part de la gauche, le bleu de la droite. */
.boxe-bar {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--fill-2);
  overflow: hidden;
}
.boxe-bar.st {
  height: 4px;
  width: 78%;
}
.boxe-bar i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: scaleX(var(--v, 1));
  transform-origin: left;
}
.boxe-side.blue .boxe-bar i {
  transform-origin: right;
}
.boxe-bar.hp .fill {
  background: linear-gradient(180deg, #fc5c46, #e63f38 60%, #c33a35);
  transition: transform 160ms var(--ease-out);
}
.boxe-side.blue .boxe-bar.hp .fill {
  background: linear-gradient(180deg, #50a7e8, #4995e3 60%, #3f7fc6);
}
.boxe-bar.hp .ghost {
  background: rgba(255, 255, 255, 0.85);
  transition: transform 520ms var(--ease-out) 260ms;
}
.boxe-bar.st .fill {
  background: #f2b22b;
  transition: transform 160ms linear;
}
.boxe-side.tired .boxe-bar.st {
  animation: boxe-tired 0.9s ease-in-out infinite;
}
@keyframes boxe-tired {
  50% {
    background: rgba(255, 159, 10, 0.35);
  }
}
.boxe-downs {
  display: flex;
  gap: 3px;
  min-height: 6px;
}
.boxe-downs i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-2);
  animation: pop-in var(--dur-base) var(--ease-spring) backwards;
}

.boxe-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 112px;
  line-height: 1.1;
}
.boxe-round {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.boxe-clock {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.boxe-clock.count {
  color: var(--red);
  animation: pop-in var(--dur-fast) var(--ease-spring);
}
.boxe-clock.result {
  font-size: var(--fs-title);
}
.boxe-cards {
  font-size: var(--fs-caption);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.boxe-cards:empty {
  display: none;
}

/* --- Grandes annonces : round, au tapis, KO, victoire -------------------------------------- */

.boxe-banner {
  position: absolute;
  top: 24%;
  left: var(--stage-center);
  translate: -50% 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 28px 12px;
  border-radius: var(--r-2xl);
  background: rgba(28, 22, 46, 0.62);
  -webkit-backdrop-filter: var(--glass-blur, blur(14px) saturate(160%));
  backdrop-filter: var(--glass-blur, blur(14px) saturate(160%));
  box-shadow: 0 1rem 2.5rem -1rem rgba(31, 23, 53, 0.45);
  pointer-events: none;
  text-align: center;
  animation: boxe-banner-in 420ms var(--ease-spring) backwards;
}
/* Sans l'effet verre (app.css) : plus sombre, le ring ne s'efface plus derrière. */
:root[data-glass="off"] .boxe-banner {
  background: rgba(28, 22, 46, 0.88);
}
.boxe-banner b {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 2px 0 #3a3a50;
  white-space: nowrap;
}
.boxe-banner span {
  font-size: var(--fs-callout);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
}
.boxe-banner.alert b {
  color: #ffd84a;
}
.boxe-banner.go b {
  color: #f2e9ff;
}
.boxe-banner.leaving {
  animation: boxe-banner-out 260ms var(--ease-in) forwards;
}
@keyframes boxe-banner-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
@keyframes boxe-banner-out {
  to {
    opacity: 0;
    transform: translateY(-10px) scale(1.04);
  }
}

/* --- Touches et boutons des boxeurs ----------------------------------------------------------- */

body.boxing #hint {
  display: none !important;
}
.boxe-legend[hidden] {
  display: none;
}
.boxe-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  font-size: var(--fs-footnote);
  color: var(--text-2);
}
.boxe-legend span {
  white-space: nowrap;
}
.boxe-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.boxe-wait {
  font-size: var(--fs-footnote);
  color: var(--text-2);
}
.boxe-mash {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 300px;
  font-size: var(--fs-sub);
  animation: pop-in var(--dur-base) var(--ease-spring) backwards;
}
.boxe-mash[hidden] {
  display: none;
}
.boxe-bar.mash .fill {
  background: linear-gradient(90deg, #ff9f0a, #34c759);
  transition: transform 120ms var(--ease-out);
}

/* --- Palmarès ------------------------------------------------------------------------------ */

.boxe-board-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.boxe-board-head h2 {
  margin: 0;
  font-size: var(--fs-title);
}
.boxe-board-head p {
  margin: 2px 0 0;
  color: var(--text-2);
  font-size: var(--fs-sub);
}
.boxe-board-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: #e63f38;
  color: #ffffff;
}
.boxe-board-icon svg {
  width: 22px;
  height: 22px;
}
.boxe-board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.boxe-board li {
  display: grid;
  grid-template-columns: 24px 1fr auto 52px;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--fill);
  font-size: var(--fs-body);
}
.boxe-rank {
  font-weight: 700;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.boxe-board li:first-child .boxe-rank {
  color: #d4a017;
}
.boxe-record,
.boxe-kos {
  font-size: var(--fs-sub);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.boxe-empty,
.boxe-rules {
  color: var(--text-2);
  font-size: var(--fs-sub);
}
.boxe-fastest {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sub);
}
.boxe-fastest svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--accent);
}

@media (max-width: 640px) {
  .boxe-hud {
    padding: var(--sp-2) var(--sp-3);
  }
  .boxe-score {
    gap: var(--sp-2);
  }
  .boxe-center {
    min-width: 80px;
  }
  .boxe-banner b {
    font-size: 32px;
  }
}

/* Sombre : les barres vides restent lisibles sur le verre foncé. */
:root[data-theme="dark"] .boxe-bar {
  background: rgba(255, 255, 255, 0.12);
}
:root[data-theme="dark"] .boxe-side.counter .boxe-name b {
  color: #ffd84a;
}