/* Brick breaker, project 16.

   The stage is drawn in canvas; everything around it is the site design
   system. The legend below is the one piece that matters for accessibility:
   the bricks are colour coded on the stage, so every colour has its name
   written next to it here, and status is never carried by colour alone. */

.bb__about {
  margin-block-start: var(--s-5);
  color: var(--text-2);
  max-width: 68ch;
}

/* ---------------------------------------------------------------- legend */

.bb__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-block: var(--s-5) var(--s-4);
  padding: 0;
  list-style: none;
}

.bb__legendItem {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text-2);
  font-size: var(--t-sm);
}

.bb__swatch {
  width: 22px;
  height: 12px;
  border-radius: 3px;
  flex: none;
}

/* The same values the canvas draws with. Kept here rather than generated, so
   a swatch that stops matching its brick is a visible, findable difference. */
.bb__swatch[data-type="D"] { background: #FF8080; }
.bb__swatch[data-type="I"] { background: #F5B84D; }
.bb__swatch[data-type="P"] { background: #FF9DC8; }
.bb__swatch[data-type="V"] { background: #B08CFF; }
.bb__swatch[data-type="S"] { background: #6EDB8F; }
.bb__swatch[data-type="B"] { background: #5A6A82; width: 34px; }

/* ------------------------------------------------------------------- hud */

.bb__hud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-block-end: var(--s-4);
}

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

.bb__statValue {
  font-family: "Mono", ui-monospace, monospace;
  color: var(--text-1);
  font-size: 1rem;
}

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

.bb__stageWrap {
  position: relative;
  max-width: 720px;
}

.bb__canvas {
  display: block;
  width: 100%;
  /* Without this, dragging a finger across the stage scrolls the page instead
     of moving the paddle, and the browser holds the first pointer events back
     while it decides which of the two the gesture was. The game wants every
     touch on the stage, and nothing here needs to scroll. */
  touch-action: none;
  aspect-ratio: 4 / 3;
  height: auto;
  background: #0B1220;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.bb__canvas:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The end-of-game panel. In flow above the canvas rather than a dialog: it
   has one action, nothing behind it needs guarding, and a real dialog would
   mean a focus trap for no benefit. */
.bb__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  background: rgb(11 18 32 / 0.92);
  border-radius: var(--r-card);
  text-align: center;
  padding: var(--s-5);
}

.bb__outcome {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  font-weight: 620;
  color: var(--text-1);
}

.bb__final {
  margin: 0;
  color: var(--text-2);
  font-family: "Mono", ui-monospace, monospace;
  font-size: var(--t-sm);
}

.bb__status {
  margin-block-start: var(--s-4);
  color: var(--text-2);
  font-size: var(--t-sm);
  min-height: 1.5em;
}

/* -------------------------------------------------------------- controls */

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

.bb__panel {
  margin-block-start: var(--s-7);
  max-width: 68ch;
}

.bb__panelTitle {
  font-size: var(--t-lg);
  margin-block-end: var(--s-3);
}

.bb__keys {
  margin: 0;
  padding-inline-start: var(--s-6);
  color: var(--text-2);
}

.bb__keys li {
  padding-block: 3px;
}

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

kbd {
  padding: 1px 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: "Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--text-1);
}