/* Readable controls on compact screens. The fight stick's own rules are in stick.css. */
.site-menu{position:relative}.site-menu summary{cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center;padding:0 12px;border:1px solid var(--line);border-radius:4px;font-size:var(--text-sm)}.site-menu summary::-webkit-details-marker{display:none}.site-menu[open] summary{background:var(--inset)}.site-menu nav{position:absolute;z-index:20;right:0;top:calc(100% + 8px);min-width:190px;padding:6px;display:grid;gap:2px;border:1px solid var(--line);border-radius:6px;background:var(--surface);box-shadow:0 14px 34px rgb(0 0 0/.24)}.site-menu a{padding:10px 12px;border-radius:4px;text-decoration:none;font-size:var(--text-sm);white-space:nowrap}.site-menu a:hover,.site-menu a:focus-visible{background:var(--inset)}
@media(max-width:1100px) {
  .health>div:first-child b,.stage-corner {font-size:12px}
}
@media(max-width:850px) {
  .practice {display:block;columns:initial}
  .practice>.practice-divider {display:block}
}
@media(max-width:560px) {
  .brand span,.stage-status,.stage-heading .eyebrow,
  .intro .eyebrow,.intro-note,.phase-legend,.telemetry,
  .feedback,.combo span,.pause-card .eyebrow,footer {font-size:12px}
  .brand span {letter-spacing:0}
  .stage-status {max-width:48%;flex-wrap:wrap;justify-content:flex-end;gap:4px}
  .health>div:first-child {flex-direction:column;gap:0;line-height:1.2}
  .health>div:first-child b,.health>div:first-child>span,.gauge {font-size:12px}
  .target-health>div:first-child {text-align:right}
  .target-caption,#capture-label {display:none}
  .stage-corner {font-size:12px}
  .frame-readout {flex-wrap:wrap}
  .phase-legend {margin-left:0}
  .feedback {top:39%;max-width:90%;white-space:normal;text-align:center}
  .combo {top:46%}
  .combo strong {font-size:24px}
  .combo span {display:none}
  .intro h2 {font-size:26px}
  .intro .eyebrow {letter-spacing:.04em}
}