/* Bug muncher. Playful freedoms per design-system.md section 10: the stage
   sets its own art direction, the page around it keeps the site system,
   focus visibility, keyboard operability and reduced motion. */

.bm {
  --bm-field: #070C18;
  --bm-wire: #4FA3FF;
}

.bm__intro {
  max-width: var(--measure);
  color: var(--text-2);
}

.bm__panel {
  margin-block-start: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.bm__panelTitle {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-2);
  margin-block-end: var(--s-3);
}

.bm__keys {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-2) var(--s-5);
  color: var(--text-2);
  font-size: var(--t-sm);
}

.bm__keys kbd {
  display: inline-block;
  min-width: 24px;
  padding: 2px var(--s-2);
  border: 1px solid var(--line-control);
  border-radius: var(--r-control);
  background: var(--bg-0);
  color: var(--text-1);
  font-size: var(--t-xs);
  text-align: center;
}

/* The three chasers, named and shaped. Shape and name carry the meaning so
   nothing here depends on colour alone. */
.bm__cast {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-3) var(--s-5);
}

.bm__castItem {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}

.bm__castName {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
}

.bm__castGlyph {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.bm__castText {
  margin: 0;
  color: var(--text-2);
  font-size: var(--t-sm);
}

/* ------------------------------------------------------------ the stage */

.bm__stage {
  margin-block-start: var(--s-5);
}

.bm__canvas {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
  aspect-ratio: 456 / 360;
  /* The stage takes the swipe itself so the rest of the page keeps normal
     touch scrolling. */
  touch-action: none;
  background: var(--bm-field);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

/* Integer render scale is preferred, so the stage picks the largest whole
   multiple that fits instead of stretching to an arbitrary width. Chosen in
   the module by swapping these classes, because a style attribute would
   fail the content policy. */
.bm__canvas--s1 { max-width: 456px; }
.bm__canvas--s2 { max-width: 912px; }

.bm__hud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-block-start: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--text-1);
}

.bm__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-start: var(--s-4);
}

.bm__note {
  margin-block-start: var(--s-4);
  color: var(--text-2);
  font-size: var(--t-sm);
}

@media (max-width: 480px) {
  .bm__hud {
    font-size: var(--t-xs);
    gap: var(--s-2) var(--s-4);
  }
}