/* La training room (src/ui/training.js) : le cartouche du combo en haut à gauche, l'aide en haut à droite, la tête
   du mannequin rembourré dans le HUD (il n'a pas de portrait) */
.px.trn { pointer-events: none; }
.px .trn-box { position: absolute; left: 10px; top: 10px; width: 150px; padding: 4px 8px 6px; background: var(--ink); border: 2px solid #000;
  box-shadow: 3px 3px 0 var(--blood); transform: rotate(-1.5deg); color: var(--bone); font: 800 9px/1.2 var(--px-small); transition: opacity .3s; }
.px .trn-title { display: inline-block; padding: 0 5px; margin-bottom: 1px; background: var(--cap); color: var(--ink); font: 13px/15px var(--px-font); letter-spacing: 1px; }
.px .trn-combo { font: 30px/30px var(--px-font); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--blood); transform-origin: 0 60%; }
.px .trn-combo small { font-size: 14px; color: var(--cap); }
.px .trn-combo.pop { animation: trn-pop .2s ease-out; }
@keyframes trn-pop { from { transform: scale(1.45) rotate(-4deg); } to { transform: none; } }
.px .trn-row { display: flex; justify-content: space-between; }
.px .trn-row b { color: var(--cap); }
.px .trn-box.end .trn-combo { opacity: .45; }
.px .trn-help { position: absolute; right: 10px; top: 10px; padding: 2px 6px; background: rgba(18, 10, 26, .82); border: 1px solid #000; color: var(--bone); font: 800 8px/11px var(--px-small); }
.px .trn-help b { color: var(--cap); }
.px .phc .pp .trn-pp { position: absolute; left: 6px; bottom: 4px; font-size: 34px; line-height: 40px; }