/* The same quiet keyboard legend sits below every standalone 4:3 screen. */
.arcade-key-help[hidden] { display: none; }
.arcade-key-help {
  position: fixed; left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 1300; display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 2.4vw, 28px); width: min(560px, calc(100vw - 210px));
  min-height: 23px; padding: 0; transform: translateX(-50%);
  color: #a8b5ac; background: none; pointer-events: none;
  font: clamp(14px, 1.5vw, 17px)/1 'Jersey 15', sans-serif;
}
.arcade-key-help-item { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.arcade-key-help kbd {
  padding: 0; border: 0; background: none; color: #f3f0df;
  font: inherit; white-space: nowrap;
}
@media (max-width: 760px) {
  body:not(.arcade-home-body) .arcade-key-help {
    position: relative; left: auto; bottom: auto; width: calc(100% - 72px);
    min-height: 24px; margin: 12px auto 44px; transform: none;
    flex-wrap: wrap; gap: 6px 16px; font-size: 14px;
  }
  body.arcade-home-body .arcade-key-help {
    bottom: max(8px, env(safe-area-inset-bottom));
    min-height: 21px;
    width: calc(100vw - 72px); gap: 6px 12px; font-size: 14px;
  }
  .arcade-key-help-item:nth-child(n+4) { display: none; }
}
@media (max-width: 480px) {
  .arcade-key-help-item:nth-child(n+3) { display: none; }
}

/* Emotes de l'entraînement, sous l'écran de l'accueil (arcade-home.js) : même barre que sous l'écran
   d'un match en ligne (match-arcade.css), affichée pendant la partie à la place des touches. */
.arcade-emote-dock[hidden], body:not(.is-training-play) .arcade-emote-dock { display: none !important; }
.arcade-emote-dock {
  position: fixed; left: 50%; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 1300;
  display: flex; gap: 6px; align-items: center; transform: translateX(-50%);
}
.arcade-emote-dock .emote-button {
  display: inline-flex; flex: 0 1 auto; gap: 7px; align-items: center; width: auto; min-width: 0; max-width: none; height: 30px; padding: 0 11px 0 6px;
  border: 1px solid #34483f; border-radius: 0; background: #0e1613; color: #d6dccf; box-shadow: 0 2px #060d09;
  font: 19px/1 'Jersey 15', 'PixelArt', monospace; white-space: nowrap; cursor: pointer;
}
.arcade-emote-dock .emote-button:is(:hover, :focus-visible):not(:disabled) { outline: none; border-color: #f6cd72; color: #f6cd72; }
.arcade-emote-dock .emote-button:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
/* La touche : petit keycap pixel (dessus clair, tranche sombre) qui s'allume en or au survol. */
.arcade-emote-dock .emote-key {
  position: static; display: grid; place-items: center; flex: none; width: 18px; height: 18px; padding: 0 0 2px; border: 0; border-radius: 0;
  background: #23332c; color: #f6cd72; font: 15px/1 'PixelArt', monospace; box-shadow: inset 0 -2px #060d09, inset 0 1px #3e554a;
}
.arcade-emote-dock .emote-button:is(:hover, :focus-visible):not(:disabled) .emote-key {
  background: #f6cd72; color: #101817; box-shadow: inset 0 -2px #a8812c, inset 0 1px #fde7b0;
}
.arcade-emote-dock .emote-button:disabled { cursor: default; }
.arcade-emote-dock .emote-label { overflow: hidden; text-overflow: ellipsis; }
.arcade-emote-dock .emote-button:disabled :is(.emote-key, .emote-label) { opacity: .55; }
@media (min-width: 761px) {
  .arcade-emote-dock {
    bottom: var(--arcade-control-bottom); height: var(--arcade-control-height);
    max-width: min(var(--arcade-frame-width), calc(100vw - 400px));
  }
}
@media (max-width: 760px) {
  .arcade-emote-dock { gap: 4px; }
  .arcade-emote-dock .emote-key { display: none; }
  .arcade-emote-dock .emote-button { max-width: 19vw; padding: 0 6px; font-size: 14px; }
  .arcade-emote-dock .emote-label { overflow: hidden; text-overflow: ellipsis; }
}