/* The menu's printed fight-poster language, sized for thumbs. */
.fight-button-mark,.fight-button-recovery { display: none; }
.touch-fight .attack-controls { gap: 7px; }
.touch-fight .attack-controls button {
  --pad-fill: var(--red); --pad-ink: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  position: relative; isolation: isolate; overflow: hidden; padding: 4px 3px;
  border: 3px solid var(--ink); border-radius: 0 !important;
  background-color: var(--pad-fill);
  background-image: repeating-linear-gradient(112deg,transparent 0 5px,#00000008 5px 6px);
  color: var(--pad-ink); box-shadow: 3px 4px 0 var(--ink);
  transform: none; transition: transform .06s,box-shadow .06s;
  -webkit-tap-highlight-color: transparent;
}
.touch-fight #leftHook,.touch-fight #rightHook { --pad-fill: var(--yellow); --pad-ink: var(--ink); }
.touch-fight .attack-controls strong {
  position: relative; z-index: 1; font: 900 13px/1 var(--display);
  text-transform: uppercase; letter-spacing: .2px; text-align: center;
}
.touch-fight .fight-button-mark { display: block; flex: none; width: 25px; height: 23px; pointer-events: none; }
.touch-fight .fight-button-mark svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.touch-fight .right-glove svg { transform: scaleX(-1); }
.touch-fight .attack-controls button:active,.touch-fight .attack-controls .punch-throwing {
  background-color: var(--pad-fill); color: var(--pad-ink);
  transform: translate(2px,3px); box-shadow: 1px 1px 0 var(--ink),inset 0 0 0 2px var(--paper);
}
.touch-fight .attack-controls .punch-recovering { background-image: linear-gradient(#14141438,#14141438); }
.touch-fight .fight-button-recovery {
  display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: currentColor; transform: scaleX(var(--punch-recovery,1)); transform-origin: left;
  opacity: 0; pointer-events: none;
}
.touch-fight .punch-recovering .fight-button-recovery { opacity: .85; }
.touch-fight .attack-controls .punch-queued { box-shadow: 3px 4px 0 var(--ink),inset 0 0 0 2px var(--paper); }
.touch-fight .attack-controls .unaffordable { --pad-fill: #605b52; --pad-ink: #d7d0c3; }
.touch-fight .attack-controls button:disabled { opacity: .45; transform: none; box-shadow: 3px 4px 0 var(--ink); }
.touch-fight .attack-controls .punch-uppercut .fight-button-mark { transform: rotate(-25deg); }
.touch-fight .attack-controls .showboat { --pad-fill: var(--paper); --pad-ink: var(--ink); }
.touch-fight .attack-controls .showboat strong { font-size: 12px; }
.touch-fight #block {
  --pad-fill: var(--yellow); --pad-ink: var(--ink);
  flex-direction: row; gap: 8px; padding: 5px 7px;
  border: 3px solid var(--ink); background-color: var(--pad-fill); color: var(--pad-ink);
  box-shadow: 3px 4px 0 var(--ink); border-radius: 0 !important;
}
.touch-fight #block .fight-button-mark { width: 23px; height: 23px; }
.touch-fight #block:not(.guard-latched):not(.held) .fight-button-mark svg>path:first-child { fill: none; stroke: currentColor; stroke-width: 4; }
.touch-fight #block:not(.guard-latched):not(.held) .fight-button-mark svg>path:last-child { display: none; }
.touch-fight #block strong { font-size: 17px; }
.touch-fight #block.guard-latched,.touch-fight #block.held {
  border-color: var(--ink); box-shadow: 3px 4px 0 var(--ink),inset 0 0 0 2px var(--paper);
}
.touch-fight #block.guard-open,.touch-fight #block.guard-broken {
  --pad-fill: var(--ink); --pad-ink: var(--yellow);
  border: 3px dashed var(--yellow); background: var(--ink); color: var(--yellow);
  box-shadow: 3px 4px 0 var(--ink);
}
.touch-fight #block.guard-broken { --pad-ink: var(--paper); border-color: var(--red); }
.touch-fight #feint,.touch-fight .touch-fight-tools button {
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink); border-radius: 0 !important;
  font-family: var(--display); font-weight: 900;
}
.touch-fight #feint { text-transform: uppercase; font-size: 16px; }
.touch-fight #feint:active,.touch-fight .touch-fight-tools button:active { background: var(--yellow); transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.touch-fight .stick { border: 3px solid var(--ink); background: #141414a6; box-shadow: 3px 4px 0 #141414b0; }
.touch-fight .stick-nub { border: 3px solid var(--ink); background: var(--paper); }
@media (orientation: landscape) and (max-height: 500px) {
  .touch-fight .attack-controls { gap: 5px; }
  .touch-fight .attack-controls button { padding: 3px 2px; gap: 1px; }
  .touch-fight .attack-controls strong { font-size: 12px; }
  .touch-fight .fight-button-mark { width: 20px; height: 18px; }
  .touch-fight #block strong { font-size: 16px; }
}
@media (max-width: 380px) and (orientation: portrait) {
  .touch-fight .attack-controls { width: min(158px,calc(50vw - max(12px,env(safe-area-inset-right)))); }
}