/* Shared machine picker. The arena stays clear; information lives beside it. */
#screen-select { padding: 18px 16px; background: rgba(18,16,26,.94); }
.yard-panel { width: min(100%, 960px); padding: 18px 22px; background: var(--ink-2); border-top: 3px solid var(--sodium); }
.yard-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-right: 24px; }
.yard-heading h1 { margin: 0; font: 700 24px 'Chakra Petch', sans-serif; text-transform: uppercase; }
.yard-roster { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 7px; margin: 16px 0 12px; }
.yard-roster button { color: var(--bone); background: transparent; border: 1px solid var(--line); padding: 5px 2px; cursor: pointer; min-width: 0; }
.yard-roster button[aria-pressed="true"] { border-color: var(--sodium); background: rgba(255,182,63,.12); }
.yard-roster canvas { display: block; width: 60px; height: 52px; max-width: 100%; margin: auto; }
.yard-roster b { display: block; font: 700 11px 'Chakra Petch', sans-serif; }
.yard-panel button:focus-visible, .yard-panel select:focus-visible, #practice-stage:focus-visible { outline: 2px solid var(--sodium); outline-offset: 3px; }
.yard-mobile-picker { display: none; font-size: 12px; color: var(--dim); margin: 12px 0; }
.yard-mobile-picker select { display: block; width: 100%; font: 16px 'Chakra Petch', sans-serif; margin-top: 4px; color: var(--bone); background: var(--ink); border: 1px solid var(--line); padding: 10px; }
.yard-identity { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin: 12px 0; }
.yard-identity h2 { font: 700 19px 'Chakra Petch', sans-serif; margin: 0; color: var(--sodium); }
#yard-role { font-size: 12px; color: var(--dim); }
#yard-stats { margin-left: auto; font-size: 13px; color: var(--bone); }
.yard-abilities { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 12px 0; border-block: 1px solid var(--line); }
.yard-abilities section { min-width: 0; }
.yard-ability-label { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; font-size: 12px; color: #b9b0c4; }
.yard-ability-label b { color: var(--sodium); letter-spacing: .1em; text-transform: uppercase; }
.yard-abilities h3 { margin: 5px 0 4px; font: 600 16px 'Chakra Petch', sans-serif; }
.yard-abilities p { margin: 0; font-size: 15px; line-height: 1.3; min-height: 2.6em; }
.yard-abilities .yard-stat-line { min-height: 0; font-size: 12px; color: #b9b0c4; margin-top: 7px; }
.yard-range-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px; font-size: 12px; margin: 12px 0 7px; }
.yard-range-heading span:last-child { color: var(--volt); }
#practice-stage { display: block; width: 100%; height: clamp(280px, 38vh, 400px); background: var(--ink); touch-action: none; border: 1px solid var(--line); }
.yard-controls { display: flex; gap: 12px 24px; flex-wrap: wrap; align-items: center; padding: 12px 0; color: #b9b0c4; font-size: 12px; }
.yard-control { display: flex; gap: 9px; align-items: center; }
.yard-controls b { display: block; color: var(--bone); font-size: 13px; }
.yard-keys { display: grid; grid-template-columns: repeat(3,25px); grid-template-rows: repeat(2,24px); gap: 3px; }
.yard-keys kbd:first-child { grid-column: 2; }.yard-keys kbd:nth-child(2) { grid-column: 1; }
.yard-panel kbd { display: inline-grid; place-items: center; min-width: 25px; padding: 3px 5px; border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 3px; background: var(--steel); font: 12px system-ui, sans-serif; color: var(--bone); }
.yard-mouse { width: 44px; height: 55px; display: grid; grid-template-columns: 1fr 1fr; align-content: start; overflow: hidden; border: 1px solid var(--line); border-radius: 18px 18px 14px 14px; }
.yard-mouse i { font: 11px system-ui, sans-serif; text-align: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.yard-mouse i:first-child { border-right: 1px solid var(--line); }
.yard-panel .key-down { color: var(--ink); background: var(--sodium); }
.yard-focus-hint { margin-left: auto; max-width: 170px; }
.yard-footer { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); }
.yard-footer > span { font-size: 13px; color: #b9b0c4; }
.yard-footer .btn { font-size: 14px; padding: 12px 20px; }
#screen-select .yard-touch { display: none; }
#screen-select.touch-controls .yard-desktop { display: none; }
#screen-select.touch-controls .yard-touch { display: flex; }
@media (max-width: 650px), (pointer: coarse) and (max-width: 1000px) {
  .yard-roster { display: none; }.yard-mobile-picker { display: block; }
  .yard-panel { padding: 14px; }.yard-heading h1 { font-size: 21px; }
  #yard-stats { width: 100%; margin: 0; }
  .yard-abilities { gap: 14px; }.yard-abilities p { font-size: 14px; }
  #practice-stage { height: clamp(300px, 45vh, 460px); }
  .yard-focus-hint { margin-left: 0; }
}
@media (max-width: 430px) {
  #screen-select { padding: 10px 6px; }.yard-panel { padding: 12px; }
  .yard-abilities { grid-template-columns: 1fr; gap: 12px; }
  .yard-abilities section + section { border-top: 1px solid var(--line); padding-top: 12px; }
  .yard-abilities p { min-height: 0; }.yard-footer { flex-wrap: wrap; }
}
@media (orientation: landscape) and (max-height: 550px) {
  #screen-select { padding: 6px; }.yard-panel { padding: 8px 12px; }
  .yard-roster { display: none; }.yard-mobile-picker { display: block; float: right; width: 180px; margin: 4px 0; }
  .yard-heading { padding-right: 38px; }.yard-heading h1 { font-size: 18px; }
  .yard-identity { margin: 8px 0; }#yard-stats { margin-left: 0; width: auto; }
  .yard-abilities { clear: both; padding: 8px 0; }.yard-abilities p { min-height: 0; font-size: 13px; }
  #practice-stage { height: max(250px, 65vh); }.yard-controls { padding: 7px 0; }
}