/* La Boulette (public/js/boulette.js) : le tableau du bas, la boulette en main. Le vent s'y lit à
   sa flèche (sa direction) et à ses chevrons (sa force), avec des mots : jamais la couleur seule.
   Verre et jetons de app.css, placé comme le tableau du combat de Smapimon. */

.blt-hud {
  position: absolute;
  left: var(--dock-left);
  bottom: calc(var(--edge) + var(--dock-h) + var(--gap));
  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) var(--sp-2);
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  animation: blt-in var(--dur-slow) var(--ease-sheet) backwards;
}
.blt-hud.leaving {
  animation: blt-out var(--dur-base) var(--ease-in) forwards;
}
@keyframes blt-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}
@keyframes blt-out {
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

.blt-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.blt-title {
  font-size: var(--fs-callout);
}
.blt-wind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--fs-footnote);
  color: var(--text-2);
}
.blt-arrow {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  color: var(--text);
}
.blt-chevrons {
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text);
}
.blt-aim {
  margin-left: auto;
  font-size: var(--fs-footnote);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.blt-records {
  margin: 0;
  font-size: var(--fs-footnote);
  color: var(--text-2);
}
.blt-tip {
  margin: 0;
  font-size: var(--fs-footnote);
  font-weight: 600;
}
.blt-tip kbd {
  margin: 0 1px;
}
.blt-last {
  margin: 0;
  font-size: var(--fs-sub);
  font-weight: 600;
  text-wrap: balance;
}
.blt-keys {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--text-3);
}
.blt-keys kbd {
  margin: 0 1px;
}

@media (max-width: 640px) {
  .blt-row {
    flex-wrap: wrap;
    gap: 4px var(--sp-2);
  }
  .blt-aim {
    margin-left: 0;
  }
}