/* Music layer: notation font and piano-key targets. Bravura is licensed under the SIL Open Font License (fonts/OFL.txt). */
@font-face { font-family: "Bravura"; src: url("fonts/Bravura.woff2") format("woff2"); font-display: block; }

/* A white key is chalk-coloured, so the engine's chalk focus ring would not show on it. */
.pkey { outline: none; }
.pkey .ring { stroke: var(--quiz); stroke-width: 4; }
.pkey:hover .ring, .pkey:focus .ring { stroke-opacity: 1; fill: rgba(134, 201, 232, .28); }
.pkey.good .ring { stroke: var(--good); fill: rgba(143, 214, 176, .6); }
.pkey.bad .ring { stroke: var(--bad); fill: rgba(240, 140, 122, .5); }

.replay { margin-bottom: 12px; }

/* A band card's answer column must not squeeze the question: let long option rows wrap instead of widening. */
.card.band { grid-template-columns: auto minmax(300px, 1fr) minmax(0, max-content) auto; }
.card.band .body { max-width: 640px; }
.card.band .opts { flex-wrap: wrap; justify-content: flex-end; }