/* 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; }
/* la carte des coups (à droite, sous l'aide) : dégâts et image où chaque coup touche, les spéciaux et le passif */
.px.trc { pointer-events: none; }
.px.trc.top { z-index: 5; }
.px .trc-box { position: absolute; right: 10px; top: 26px; width: 236px; padding: 4px 7px 5px; background: rgba(18, 10, 26, .9); border: 2px solid #000;
  box-shadow: -3px 3px 0 var(--cc, var(--blood)); transform: rotate(.8deg); color: var(--bone); font: 800 7px/9px var(--px-small); }
.px .trc-h { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.px .trc-h img { width: 20px; height: 20px; object-fit: cover; border: 1px solid #000; background: var(--cc); }
.px .trc-h b { font: 13px/14px var(--px-font); letter-spacing: 1px; color: var(--cc); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.px .trc-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
.px .trc-r { display: grid; grid-template-columns: 44px 1fr 30px 11px; column-gap: 2px; align-items: baseline; }
.px .trc-r .k, .px .trc-x .k { color: var(--cap); white-space: nowrap; }
.px .trc-r i { font-style: normal; opacity: .75; }
.px .trc-r b { text-align: right; color: #fff; }
.px .trc-r em { text-align: right; font-style: normal; color: #9dd8ff; }
.px .trc-cols { opacity: .55; border-bottom: 1px solid rgba(255, 243, 214, .25); margin-bottom: 1px; }
.px .trc-s { margin-top: 2px; color: var(--cc); font: 9px/10px var(--px-font); letter-spacing: 1px; }
.px .trc-x { display: grid; grid-template-columns: 34px 1fr; column-gap: 3px; margin-bottom: 1px; }
/* les touches en pictos (src/ui/glyphs.js) : serrés, dans les lignes de 9 px de la carte et de l'aide */
.px .trc-box .pg, .px .trn-help .pg { margin: 0 0.02em; }
.px .trc-box .pg-key { font-size: 0.9em; margin: 0 0.04em; }
.px .trc-x small { font-size: 7px; color: #9dd8ff; white-space: nowrap; }
.px .trc-f { margin-top: 3px; opacity: .5; font-size: 6px; line-height: 7px; }