/* Boxing-specific layout. The common player settings own handedness, size,
   spacing and theme; keep those preferences as the single source of truth. */
body[data-action-game="boxing"] .game { gap: 6px; }
body[data-action-game="boxing"] .hud strong,
body[data-action-game="boxing"] .vitals { font-variant-numeric: tabular-nums; }
body[data-action-game="boxing"] .hud strong { font-size: clamp(16px, 3.5vw, 22px); letter-spacing: .025em; }
body[data-action-game="boxing"] .vitals { font-size: clamp(12px, 2.9vw, 15px); font-weight: 700; }
body[data-action-game="boxing"] .health { height: 9px; }
body[data-action-game="boxing"] .stage { min-height: 120px; }
body[data-action-game="boxing"] .brief { line-height: 1.25; }
body[data-action-game="boxing"] .controls {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  grid-template-areas: "left high right jab cross hook" "back low forward body upper .";
  gap: 6px;
  width: 100%;
  max-width: 850px;
  align-self: center;
  padding: 3px;
}
body[data-action-game="boxing"] .controls [data-action="moveOut"] { grid-area: back; }
body[data-action-game="boxing"] .controls [data-action="moveIn"] { grid-area: forward; }
body[data-action-game="boxing"] .controls [data-action="dodgeLeft"] { grid-area: left; }
body[data-action-game="boxing"] .controls [data-action="block"] { grid-area: high; }
body[data-action-game="boxing"] .controls [data-action="blockLow"] { grid-area: low; }
body[data-action-game="boxing"] .controls [data-action="dodgeRight"] { grid-area: right; }
body[data-action-game="boxing"] .controls [data-action="jab"] { grid-area: jab; }
body[data-action-game="boxing"] .controls [data-action="cross"] { grid-area: cross; }
body[data-action-game="boxing"] .controls [data-action="hook"] { grid-area: hook; }
body[data-action-game="boxing"] .controls [data-action="body"] { grid-area: body; }
body[data-action-game="boxing"] .controls [data-action="uppercut"] { grid-area: upper; }
html[data-control-hand="right"] body[data-action-game="boxing"] .controls {
  grid-template-areas: "jab cross hook left high right" ". body upper back low forward";
}
body[data-action-game="boxing"] .controls button {
  min-width: 0; min-height: 52px; padding: 5px 2px; border-radius: 11px;
  line-height: 1.1; font-size: 11px; user-select: none;
}
body[data-action-game="boxing"] .controls button b { font-size: 19px; margin: 0 0 2px; }
body[data-action-game="boxing"] .controls button span { display: block; overflow-wrap: anywhere; }
body[data-action-game="boxing"] .controls button small { display: block; margin-top: 2px; font-size: 9px; }
body[data-action-game="boxing"] .controls button:focus-visible { outline: 3px solid #f4b84f; outline-offset: 2px; }
html[data-control-size="large"] body[data-action-game="boxing"] .controls button { min-height: 62px; }
html[data-control-size="xl"] body[data-action-game="boxing"] .controls button { min-height: 72px; }
html[data-control-gap="compact"] body[data-action-game="boxing"] .controls { gap: 3px; }
html[data-control-gap="wide"] body[data-action-game="boxing"] .controls { gap: 10px; }
@media(max-width: 420px) {
  body[data-action-game="boxing"] .game { padding: 6px; gap: 4px; }
  body[data-action-game="boxing"] .controls { gap: 4px; }
  body[data-action-game="boxing"] .controls button { min-height: 48px; font-size: 10px; }
  body[data-action-game="boxing"] .controls button b { font-size: 17px; }
  body[data-action-game="boxing"] .controls button small { font-size: 8px; }
}
@media(max-height: 480px) {
  body[data-action-game="boxing"] .vitals { position: static; pointer-events: auto; min-height: 14px; }
  body[data-action-game="boxing"] .controls { position: static; opacity: 1; pointer-events: auto; max-width: 850px; }
  body[data-action-game="boxing"] .controls button { max-width: none; min-height: 44px; }
  body[data-action-game="boxing"] .controls button b { font-size: 16px; }
  body[data-action-game="boxing"] .controls button small { display: none; }
  body[data-action-game="boxing"] .brief { display: none; }
}
.boxing-experience-settings { margin: 20px 0; padding: 12px 16px; border: 1px solid #7897a4; border-radius: 14px; }
.boxing-experience-settings legend { padding: 0 5px; font-weight: 750; }
.boxing-experience-settings .settings-row { margin: 12px 0; }
.boxing-settings-status:empty { display: none; }
.boxing-settings-status { font-size: 12px; line-height: 1.5; }
body[data-action-game="boxing"] .controls .boxing-end-training { grid-column: 1 / -1; min-height: 44px; }
/* Keep the game-specific grid above collection-wide layout overrides. */
body[data-action-game="boxing"] #controls { display:grid!important; grid-template-columns:repeat(6,minmax(0,1fr))!important; max-width:850px!important; }
body[data-action-game="boxing"] #controls [data-action="moveOut"] {grid-area:back!important}
body[data-action-game="boxing"] #controls [data-action="moveIn"] {grid-area:forward!important}
body[data-action-game="boxing"] #controls [data-action="dodgeLeft"] {grid-area:left!important}
body[data-action-game="boxing"] #controls [data-action="block"] {grid-area:high!important}
body[data-action-game="boxing"] #controls [data-action="blockLow"] {grid-area:low!important}
body[data-action-game="boxing"] #controls [data-action="dodgeRight"] {grid-area:right!important}
body[data-action-game="boxing"] #controls [data-action="jab"] {grid-area:jab!important}
body[data-action-game="boxing"] #controls [data-action="cross"] {grid-area:cross!important}
body[data-action-game="boxing"] #controls [data-action="hook"] {grid-area:hook!important}
body[data-action-game="boxing"] #controls [data-action="body"] {grid-area:body!important}
body[data-action-game="boxing"] #controls [data-action="uppercut"] {grid-area:upper!important}
body[data-action-game="boxing"] #controls .boxing-end-training {grid-area:3 / 1 / 4 / -1!important}