[hidden] { display: none !important; }
* { box-sizing: border-box; }
:root {
  color-scheme: dark;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #25313a;
  background: #282e32;
  font-synthesis: none;
  --bb-cyan: #b7d4e5;
  --bb-amber: #ffd183;
  --bb-yellow: #ffe16b;
  --bb-readout: 'SFMono-Regular', Menlo, Consolas, monospace;
  --bb-metal: url('./alloy-grain.svg'), linear-gradient(112deg, #dddedd, #bcbdbd 43%, #cfd0d0 74%, #aeb1b2);
}
body { min-height: 100svh; margin: 0; padding: 30px 20px 66px; background: radial-gradient(ellipse at 42% 22%, #424344, #252728 75%); }
button { font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: none; }
button:disabled { cursor: default; }
#bb-pairs { max-width: 400px; margin: auto; }
.bb-device { position: relative; perspective: 1800px; transform: perspective(1800px) rotateX(12deg); }
.bb-machine, .bb-rules-panel {
  border: 1px solid #dfe1e1; border-radius: 9px; background: var(--bb-metal);
  box-shadow: inset 0 1px 0 #ffffffd9, inset -1px 0 0 #757879, 0 18px 0 #555859, 0 22px 0 #17191a, 0 24px 7px #0008, 0 43px 29px #0007;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform 420ms cubic-bezier(.2, .75, .2, 1);
}
.bb-machine { position: relative; isolation: isolate; padding: 16px 16px 14px; transform: rotateY(0deg); }
.bb-machine::after { content: ''; position: absolute; z-index: -1; left: -1px; right: -1px; bottom: -19px; height: 20px; border: 1px solid #696b6c; border-top: 1px solid #f2f3f3; border-radius: 0 0 8px 8px; background: url('./alloy-grain.svg'), linear-gradient(#b2b4b4 0%, #919494 25%, #656869 77%, #4b4e4f); box-shadow: inset 0 1px 0 #ffffff4d, 0 4px 0 #17191a; pointer-events: none; }
.bb-rules-panel { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #71818b #c8d0d5; transform: rotateY(-180deg); }
.bb-device[data-face="rules"] .bb-machine { transform: rotateY(180deg); }
.bb-device[data-face="rules"] .bb-rules-panel { transform: rotateY(0deg); }
.bb-nameplate { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -3px 0 11px; }
.bb-wordmark { display: flex; align-items: center; color: #25313a; font-size: 27px; line-height: 1; font-weight: 700; letter-spacing: -1.2px; text-shadow: 0 1px 0 #ffffff70; }
.bb-brand-mark { display: inline-flex; align-items: end; gap: 3px; height: 20px; margin-right: 8px; }
.bb-brand-mark i { width: 4px; height: 12px; background: currentColor; }
.bb-brand-mark i:nth-child(2) { height: 20px; }
.bb-brand-mark i:nth-child(3) { height: 15px; }
.bb-screen { position: relative; padding: 16px 14px 15px; border: 1px solid #090c0f; border-radius: 4px; background: linear-gradient(120deg, #1c242b, #11181e 72%, #1b2228); box-shadow: 0 1px 0 #ffffffbd, 0 -1px 0 #62676b, inset 0 2px 4px #000c, inset 1px 0 2px #0008; color: #e8eff3; }
.bb-groove { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 10px; padding-bottom: 17px; }
.bb-genre { font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -.7px; }
.bb-mode { display: grid; gap: 6px; }
.bb-score { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 0; }
.bb-score-label { color: #bac8d1; font-size: 10px; }
.bb-objective { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: -5px 0 12px; color: #bac8d1; font: 11px/1.4 var(--bb-readout); }
.bb-target { text-align: right; margin-left: auto; }
.bb-intro-display .bb-intro-target { font-size: clamp(24px, 6vw, 36px); white-space: nowrap; }
.bb-objective[data-cleared="true"] .bb-target { color: #9ce7c9; }
.bb-score-value { color: #e8eff3; font-family: inherit; font-size: 36px; line-height: 1; font-weight: 500; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.bb-tempo { white-space: nowrap; color: #b8c9d3; font-family: var(--bb-readout); font-size: 17px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.bb-patterns { margin: 0 0 13px; padding-bottom: 14px; border-bottom: 1px solid #54677570; }
.bb-pattern-row { display: flex; align-items: center; min-height: 25px; }
.bb-steps { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); align-items: end; flex: 1; gap: 4px; height: 25px; }
.bb-step { min-width: 0; height: 4px; border-radius: 1px; background: #435562; }
.bb-step.bb-hit { background: #a9c2d2; box-shadow: inset 0 1px 0 #e0edf470; }
.bb-step.bb-now { background: var(--bb-amber); box-shadow: 0 0 6px #ffc46a99; }
.bb-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; }
.bb-instrument { color: #e1eaf0; font-size: 18px; line-height: 1.2; font-weight: 600; letter-spacing: -.35px; }
.bb-progress-slot { height: 13px; }
.bb-run-length { color: #b8c9d3; font-family: var(--bb-readout); font-size: 10px; line-height: 13px; white-space: nowrap; }
/* Lock progress: four LEDs, the lit ones glowing. */
.bb-lock-progress { display: flex; align-items: center; gap: 6px; height: 13px; }
.bb-lock-progress span { width: 6px; height: 6px; border-radius: 50%; background: #41525f; }
.bb-lock-progress .bb-filled { background: #b7d4e5; box-shadow: 0 0 4px #b7d4e5aa; }
.bb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.bb-error { margin-top: 10px; color: #ffc0c8; font-size: 12px; line-height: 1.4; }

.bb-preview { display: grid; grid-template-columns: minmax(0, 1fr); }
.bb-preview > * { grid-area: 1 / 1; }
/* Transport: play, pause, forward (next level) and eject (back to the level screen) as four rubber keys, cassette-deck style. */
.bb-playback { position: relative; padding: 6px 8px 20px; }
.bb-transport { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.bb-transport-icon { width: 19px; height: 19px; fill: currentColor; }
.bb-transport-icon.bb-stroke-mark { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* Legended keys, MPC style: a drawn mark over an engraved word. Play's legend swaps with its mark. */
.bb-key-legend { font-size: 9px; line-height: 1; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: #3f5566; text-shadow: 0 1px 0 #ffffffb0; white-space: nowrap; }
.bb-transport-key:disabled .bb-key-legend { color: #98a5ad; }
.bb-transport-key[aria-pressed="true"] .bb-key-legend { color: #c9770f; }
.bb-play[aria-pressed="true"] .bb-legend-play, .bb-play[aria-pressed="false"] .bb-legend-pause { display: none; }
/* One key plays and pauses: the triangle shows while stopped, the bars while the beat runs (aria-pressed). */
.bb-play[aria-pressed="true"] .bb-play-mark, .bb-play[aria-pressed="false"] .bb-pause-mark { display: none; }
.bb-transport-key[aria-pressed="true"] { color: #c9770f; }
.bb-transport-key[aria-pressed="true"] .bb-transport-icon { filter: drop-shadow(0 0 5px #ffc46a99); }
.bb-transport-key:disabled { color: #98a5ad; }
.bb-machine[data-finished="true"] .bb-queue, .bb-machine[data-idle="true"] .bb-queue,
.bb-machine[data-finished="true"] .bb-columns { visibility: hidden; }
.bb-machine[data-finished="true"][data-alarm="true"] .bb-queue { visibility: visible; }
.bb-machine[data-alarm="true"] .bb-socket .bb-token { --coin-rgb: 255, 87, 66; }
/* The loaded slot (design/transport-queue-2026-09-10.md, queue option 1): the current token seated in a recessed well on the
   left, the next two smaller and dimmer behind chevrons that point into the well, the lane entrance labelled at the right. */
.bb-queue { display: flex; align-items: center; gap: 8px; overflow: hidden; padding: 12px 8px 13px; }
/* Synth-panel lane marks: dots that grow toward the well in each gap, chasing from gap 2 to gap 1 like step LEDs so the lane
   shows its own direction. A small chrome Pause key sits at the lane's entrance. */
/* The lane's Pause key is one of the raised transport keys (.bb-transport-key) set into the panel's right end. It stretches
   to the panel's inner height and its negative margins take 2px of the lane's padding, leaving a 3px reveal (2px on the
   narrow layout) on top, right and bottom between the frame's border and the key plus its edge: a 48px face (44px narrow)
   over a 4px chrome edge, with a tight shadow on the recessed floor instead of the board keys' 5px edge and long drop.
   The right corners take the frame's radius less the border and the reveal (6 - 1 - 3 = 2px) so they follow the panel's
   corner; the press travels 3px, the edge's height, and stays inside the reveal. Overrides .bb-transport-key by specificity. */
.bb-queue .bb-lane-pause { align-self: stretch; min-width: 56px; min-height: 44px; margin: -2px -2px 2px auto; padding: 4px 4px 3px; border-radius: 4px 2px 2px 4px; box-shadow: 0 3px 0 #7d8f9b, 0 4px 0 #3f4c54, 0 4px 2px -1px #0006, inset 0 1px 0 #f7fafc, inset 0 -1px 0 #ffffff40; }
.bb-queue .bb-lane-pause:not(:disabled):active { transform: translateY(3px); box-shadow: 0 0 0 #7d8f9b, 0 1px 0 #3f4c54, inset 0 1px 0 #f7fafc; }
.bb-flow { flex-shrink: 0; width: 20px; height: 10px; fill: #aeb9bf; color: #aeb9bf; }
.bb-rail-line { fill: none; stroke: currentColor; stroke-width: .8; stroke-linecap: round; opacity: .38; }
.bb-flow circle { animation: bb-dot-chase 2.4s linear infinite; opacity: .45; }

.bb-flow-2 circle:nth-of-type(1) { animation-delay: .75s; } .bb-flow-2 circle:nth-of-type(2) { animation-delay: .9s; } .bb-flow-2 circle:nth-of-type(3) { animation-delay: 1.05s; }
.bb-flow-1 circle:nth-of-type(1) { animation-delay: 1.35s; } .bb-flow-1 circle:nth-of-type(2) { animation-delay: 1.5s; } .bb-flow-1 circle:nth-of-type(3) { animation-delay: 1.65s; }
@keyframes bb-dot-chase { 0%, 100% { opacity: .45; } 6% { opacity: 1; } 22% { opacity: .45; } }
.bb-queue-item { position: relative; }
.bb-queue-item[data-ahead="2"] { opacity: .6; }
.bb-queue-item[data-ahead="1"] { opacity: .8; }
.bb-queue-item[data-ahead="1"] .bb-token { transform: scale(.84); }
.bb-queue-item[data-ahead="2"] .bb-token { transform: scale(.7); }
/* The lane is one cut-out panel holding all three tokens: a bordered frame, slightly transparent, so the alloy reads as
   running underneath it. The current token is seated at its left edge. */
.bb-lane { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 60px; padding: 5px 5px 5px 8px; border: 1px solid #56626a; border-top-color: #3c4548; border-bottom-color: #7b878e; border-radius: 6px; background: linear-gradient(rgba(9, 12, 14, .46), rgba(16, 19, 21, .36)); box-shadow: 0 1px 0 #ffffffc4, inset 0 2px 3px #000a, inset 0 0 0 1px #0a0c0d40; }
.bb-socket { display: grid; place-items: center; }
.bb-socket .bb-token { box-shadow: inset 0 1px 1px #ffffff2e, inset 1px 0 1px #ffffff0d, inset -1px -2px 1px #000b, 0 3px 0 #0c0d0e, 0 4px 0 rgba(var(--coin-rgb), .7), 0 5px 0 1px #08090a; }
/* The badge only exists through the last measure, so it sits up over the panel edge, centred on the token. */
.bb-countdown { position: absolute; z-index: 2; top: -9px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px; border: 1px solid #c9770f; border-radius: 2px; background: #15191c; color: #ffc46a; font-family: var(--bb-readout); font-size: 11px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; text-shadow: 0 0 4px #ffc46a80; box-shadow: 0 0 0 1px #0009, 0 0 6px #ffc46a33; pointer-events: none; }
/* The final beat inverts the readout window to solid amber (app.mjs pulseCount sets data-urgent). */
.bb-countdown[data-urgent="true"] { border-color: #ffe16b; background: #ffc46a; color: #2b1d07; text-shadow: none; box-shadow: 0 0 0 1px #0009, 0 0 9px #ffc46ab0; }
.bb-countdown:empty { visibility: hidden; }
/* The count-in digits use the LCD's score face (the page's Helvetica stack), not the monospace readout: Menlo's flat-topped 3 at this size reads as terminal text. */
.bb-count-in { position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ffc46a; font-family: inherit; font-size: 104px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -3px; text-shadow: 0 0 8px #ffd18355; pointer-events: none; }
.bb-count-in:empty { display: none; }
/* During the count-in only the big digits show; the readouts fade in over one beat once the digits clear (app.mjs lightScreen). */
.bb-screen > :not(.bb-count-in) { transition: opacity calc(var(--bb-beat, .5s) / 2) ease-out; }
.bb-screen[data-counting="true"] > :not(.bb-count-in) { opacity: 0; transition: none; }
.bb-token {
  --coin-rgb: 116, 206, 255;
  position: relative; isolation: isolate; display: grid; place-items: center; width: 48px; height: 46px;
  border: 1px solid rgba(var(--coin-rgb), .88); border-radius: 5px;
  background: radial-gradient(ellipse at 43% 30%, #303132, #202123 65%, #18191b);
  box-shadow: inset 0 1px 1px #ffffff2e, inset 1px 0 1px #ffffff0d, inset -1px -2px 1px #000b, 0 3px 0 #0c0d0e, 0 4px 0 rgba(var(--coin-rgb), .7), 0 5px 0 1px #08090a, 0 6px 1px 1px #ffffff70;
}
.bb-token::before { content: ''; position: absolute; z-index: -1; inset: 2px 2px 3px; border-radius: 3px; background: url('./rubber-grain.svg') repeat; background-size: 112px 112px; opacity: .32; mix-blend-mode: soft-light; pointer-events: none; }
.bb-token::after { content: ''; position: absolute; left: 3px; right: 3px; bottom: -3px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(var(--coin-rgb), .12), rgb(var(--coin-rgb)) 28%, rgb(var(--coin-rgb)) 72%, rgba(var(--coin-rgb), .12)); box-shadow: 0 1px 4px rgba(var(--coin-rgb), .3); pointer-events: none; }
.bb-token[data-kind="expression"] { --coin-rgb: 198, 168, 255; }
.bb-token[data-kind="add"] { --coin-rgb: 255, 209, 131; }
.bb-token[data-kind="subtract"] { --coin-rgb: 124, 242, 192; }
.bb-token[data-kind="special"] { --coin-rgb: 255, 142, 211; }
.bb-token[data-kind="wild"] { --coin-rgb: 236, 240, 243; }
.bb-symbol { position: relative; display: block; width: 43px; height: 41px; overflow: visible; }
.bb-legend-core { stop-color: color-mix(in srgb, white var(--legend-light, 70%), rgb(var(--coin-rgb))); }
.bb-legend-color { stop-color: rgb(var(--coin-rgb)); }
.bb-legend-edge { stop-color: color-mix(in srgb, rgb(var(--coin-rgb)) 78%, #06080a); }
.bb-legend-spill { fill: rgb(var(--coin-rgb)); opacity: var(--legend-bloom, .85); }
.bb-legend-rim { fill: none; stroke: #d9dadd40; stroke-width: 1.4; stroke-linejoin: round; }
.bb-legend-socket { fill: #050607; stroke: #060708; stroke-width: 1.2; stroke-linejoin: round; }
.bb-legend-face { stroke: rgba(var(--coin-rgb), .3); stroke-width: .25; stroke-linejoin: round; }
.bb-queue .bb-symbol { width: 31px; height: 29px; }

.bb-playfield { position: relative; --bb-gap: 8px; --bb-bank-padding: 3px; --bb-tap-height: 48px; }
.bb-board { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bb-gap); overflow: hidden; padding: var(--bb-bank-padding); border: 1px solid transparent; border-radius: 5px; background: transparent; pointer-events: none; }
.bb-pad { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; aspect-ratio: 1; border: 1px solid #838788; border-top-color: #e5e6e6; border-left-color: #d8dada; border-radius: 5px; background: linear-gradient(132deg, #b9bcbd, #a2a6a8 74%, #929799); box-shadow: inset 1px 1px 1px #ffffff7a, inset -1px -3px 2px #51585a80, 0 3px 0 #363a3c, 0 4px 0 1px #171a1b, 0 5px 1px 1px #ffffff80; }
.bb-pad::before { content: ''; position: absolute; inset: 2px 2px 4px; border-radius: 3px; background: url('./rubber-grain.svg') repeat; background-size: 112px 112px; opacity: .18; mix-blend-mode: soft-light; }
.bb-number { position: absolute; z-index: 2; top: 5px; left: 5px; color: #555d62; text-shadow: 0 1px 0 #e9eded80; font-family: var(--bb-readout); font-size: 8px; line-height: 1; font-weight: 600; letter-spacing: .8px; }
.bb-pad:has(.bb-token), .bb-pad.bb-locked, .bb-pad.bb-blocked, .bb-falling { background: #151719; border-color: #111315; border-top-color: #6c6f70; border-left-color: #747879; box-shadow: inset 0 1px 0 #060708, 0 3px 0 #08090a, 0 4px 0 1px #0c0e0f, 0 5px 1px 1px #ffffff80; }
.bb-pad:has(.bb-token)::before { content: none; }
.bb-pad .bb-token, .bb-falling .bb-token { position: absolute; inset: 0 0 3px; width: 100%; height: auto; border: 1px solid #ffffff14; border-top-color: #ffffff30; border-radius: 4px; box-shadow: inset 0 1px 1px #ffffff12, inset -1px -2px 1px #000b, 0 3px 0 #08090a; }
.bb-pad:has(.bb-token) .bb-number, .bb-locked .bb-number, .bb-blocked .bb-number { color: #a3adb3; text-shadow: 0 1px 0 #08090a; }
.bb-landing { border-bottom-color: #6b8290; }
.bb-ghost { position: relative; color: #526673; font-size: 10px; font-weight: 500; }
.bb-match { outline: 1px solid #657f8e; outline-offset: -3px; }
/* A tile lights amber the moment its pop begins (app.mjs resolveMove); the pop itself is a compositor-only animation. */
.bb-pad.bb-popping .bb-token { background: #ffd183; --coin-rgb: 36, 28, 48; --legend-light: 0%; --legend-bloom: 0; }
.bb-pad.bb-final { outline: 2px dashed #b17a29; outline-offset: -3px; animation: bb-lock-light 1.5s ease-in-out infinite; }
.bb-final .bb-ghost { color: #735321; font-weight: 600; }
.bb-pad.bb-locked { background: radial-gradient(ellipse at 43% 30%, #303335, #202426 70%, #171b1d); box-shadow: inset 1px 1px 1px #ffffff26, inset -1px -3px 1px #000b, 0 3px 0 #08090a, 0 4px 0 1px #0c0e0f, 0 5px 1px 1px #ffffff80; }
/* Saved drum: a step button, a hairline frame whose square LED lights while the drum sounds (design/glyphs-2026-09-10.md,
   option C). An empty frame at rest, lit and glowing on a hit, the whole mark dimmed when muted; the name beneath in the
   readout face. */
.bb-lock-icon { display: block; width: 12px; height: 12px; margin-bottom: 5px; fill: none; stroke: #b7d4e5; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.bb-lock-icon .bb-lock-led { fill: none; stroke: none; }
.bb-locked.bb-sounding .bb-lock-icon { stroke: #e2f5ff; filter: drop-shadow(0 0 3px #b7d4e5); }
.bb-locked.bb-sounding .bb-lock-icon .bb-lock-led { fill: #e2f5ff; }
.bb-layer { position: relative; color: #dce3e7; font: 600 10px/1 var(--bb-readout); letter-spacing: 1px; text-transform: uppercase; }
.bb-pad.bb-locked.bb-sounding { background: radial-gradient(ellipse at 50% 75%, #3b4850, #242a2f 75%); border-color: #90a3af; box-shadow: inset 0 1px 1px #d8e4ed40, 0 3px 0 #08090a, 0 4px 0 1px #0c0e0f, 0 5px 1px 1px #ffffff80; }
.bb-pad.bb-blocked, .bb-falling.bb-blocked { background: repeating-linear-gradient(135deg, transparent 0 5px, #ffffff05 5px 6px), #25282b; border-color: #64696c; }
.bb-blocker { width: 26px; height: 26px; fill: none; stroke: #c1cbd1; stroke-width: 1.8; stroke-linecap: round; filter: drop-shadow(0 2px 0 #17212a); }
/* The falling piece is the pad tile it becomes (dark pad, flat token, striped X), so nothing changes at touchdown. */
.bb-falling { position: absolute; z-index: 3; display: grid; place-items: center; border: 1px solid; border-radius: 5px; pointer-events: none; }
.bb-points { position: absolute; z-index: 5; top: 12%; bottom: 12%; left: 0; right: 0; overflow: hidden; text-align: center; pointer-events: none; color: #fff0d6; font-family: var(--bb-readout); font-weight: 750; letter-spacing: -1.5px; text-shadow: 0 3px 0 #16212b, 0 0 8px #16212b, 0 0 18px #16212b, 0 0 30px #f6a44570; }
.bb-reward { position: absolute; top: 50%; left: 0; right: 0; font-size: clamp(36px, 10vw, 44px); line-height: 1; }
.bb-columns { position: absolute; z-index: 4; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 calc(var(--bb-bank-padding) - var(--bb-gap) / 2 + 1px); }
.bb-column { position: relative; display: flex; align-items: flex-end; justify-content: center; min-width: 0; padding: 0 0 20px; border: 0; border-radius: 4px; background: transparent; }
.bb-tap-indicator { position: relative; display: block; width: 31px; height: 8px; border-radius: 5px; background: #666f74; box-shadow: inset 0 1px 2px #20282d80, 0 1px 0 #f2f4f4; }
.bb-tap-indicator::after { content: ''; position: absolute; inset: 3px 10px; border-radius: 1px; background: #3d494f; }
.bb-selected .bb-tap-indicator { background: #60849a; }
.bb-selected .bb-tap-indicator::after { background: #e1f2fa; box-shadow: 0 0 4px #d6eaff; }
.bb-column:disabled .bb-tap-indicator { opacity: .4; }
/* The column button is an invisible strip: it never draws a box. The tap indicator below the pad carries hover, focus and press. */
.bb-column:focus-visible .bb-tap-indicator, .bb-column:not(:disabled):active .bb-tap-indicator { background: #60849a; }
.bb-column:focus-visible .bb-tap-indicator::after, .bb-column:not(:disabled):active .bb-tap-indicator::after { background: #e1f2fa; box-shadow: 0 0 4px #d6eaff; }
.bb-controls { position: relative; height: var(--bb-tap-height); }
.bb-end { position: absolute; inset: 0 8px; display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 3px; }
/* Share beat sits alone in the 48px tap lane, so it is shorter than a dialog key. */
.bb-end .bb-share { min-height: 40px; align-self: start; padding-block: 8px; }
/* The hint line sits between the token lane and the pads, so the lane under the board belongs to Share alone. */
.bb-tap-hint { min-height: 16px; margin: -4px 0 6px; text-align: center; color: #4f646f; font-size: 10px; line-height: 16px; }
.bb-pad.bb-toggle { cursor: pointer; pointer-events: auto; }
.bb-pad.bb-toggle:focus-visible { outline: none; }
.bb-intro-history:focus, .bb-intro-rules:focus { outline: none; }
.bb-pad.bb-locked.bb-muted { background: #121416; border-top-color: #3a3e40; border-left-color: #3a3e40; box-shadow: inset 0 2px 5px #0009; }
.bb-pad.bb-muted .bb-layer, .bb-pad.bb-muted .bb-lock-icon { opacity: .35; }
.bb-dialog-action { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 0; padding: 10px 12px; border: 1px solid #5b6063; border-top-color: #8a8e90; border-bottom-color: #111416; border-radius: 4px; background: linear-gradient(145deg, #36393b, #202325 78%); color: #e0e5e8; box-shadow: 0 3px 0 #111416, 0 4px 0 #ffffff60, inset 0 1px 1px #ffffff26, inset 0 -2px 1px #0008; font-size: 14px; font-weight: 600; }
.bb-intro-start, .bb-finish-restart { border-top-color: #afb9be; color: #eff5f8; }
.bb-dialog-action::after { content: ''; position: absolute; z-index: -1; inset: 2px; border-radius: 2px; background: url('./rubber-grain.svg') repeat; background-size: 112px 112px; opacity: .25; mix-blend-mode: soft-light; pointer-events: none; }
.bb-audio-status { position: absolute; bottom: 3px; inset-inline: 8px; color: #425c6b; font-size: 11px; line-height: 1.4; text-align: center; }

.bb-dialog { width: min(400px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 40px); padding: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #71818b #c8d0d5; border: 1px solid #edf2f4; border-radius: 8px; background: var(--bb-metal); color: #25313a; box-shadow: inset 0 1px 0 #fff, 0 5px 0 #7d8d98, 0 8px 0 #253139, 0 25px 70px #081015b0; }
.bb-dialog::backdrop { background: #141e27b0; backdrop-filter: blur(3px); }
.bb-dialog[open] { animation: bb-dialog-enter 380ms cubic-bezier(.3, .7, .4, 1); }
.bb-dialog[data-enter="side"][open] { animation: bb-dialog-enter-side 380ms cubic-bezier(.3, .7, .4, 1); }
.bb-dialog-heading { position: sticky; z-index: 1; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid #7d909e70; background: #c8d1d7; }
.bb-dialog-heading h1 { margin: 0; font-size: 23px; line-height: 1.2; font-weight: 650; letter-spacing: -.5px; }
.bb-dialog-close, .bb-rules-close, .bb-share, .bb-transport-key { flex-shrink: 0; min-height: 36px; padding: 6px 10px; border: 1px solid #9eadb6; border-bottom-color: #718591; border-radius: 4px; background: linear-gradient(#d7e0e5, #b6c3cc); color: #2e4555; font-size: 12px; font-weight: 600; box-shadow: 0 2px 0 #8395a1, inset 0 1px 0 #f5f9fc; }
.bb-dialog-body { padding: 18px 20px 20px; }
/* The intro LCD is the main display's rows: genre and tempo on the left, the target number where the score goes with its label right under it, then the divider and the kit name where the moves go. */
.bb-intro-display .bb-groove { align-items: start; }
/* Level, target and the finish verdict are engraved into the heading plate like the Drum Kit label: dark ink, a light lower edge, a faint dark upper edge. */
.bb-intro-title, .bb-finish-title { color: #3a4244; text-shadow: 0 1px 0 #ffffffb8, 0 -.5px 0 #30343565; }
/* Embossed rule between the readouts and the pads on the intro and results screens, with air on both sides. */
/* Intro and results bodies share one height (the results body's natural height with the points-short line) and
 * anchor the rule and pads to the bottom, so the two screens are the same size and the pads sit in the same place. */
.bb-intro-dialog .bb-dialog-body, .bb-finish-dialog .bb-dialog-body { display: flex; flex-direction: column; min-height: 348px; box-sizing: border-box; }
.bb-intro-start, .bb-finish-restart { position: relative; width: 100%; min-height: 48px; margin-top: 22px; }
.bb-intro-start:focus-visible, .bb-finish-restart:focus-visible { outline: none; }
.bb-intro-start:focus-visible::after, .bb-finish-restart:focus-visible::after { content: ''; position: absolute; bottom: 5px; left: calc(50% - 10px); width: 20px; height: 2px; border-radius: 1px; background: #d5edf7; box-shadow: 0 0 4px #d5edf766; }
.bb-intro-error, .bb-finish-error { margin: 16px 0 0; color: #8d3343; font-size: 13px; line-height: 1.5; }
.bb-rules-heading { position: sticky; z-index: 1; top: 0; display: grid; gap: 14px; padding: 16px 18px; border-bottom: 1px solid #8297a570; background: #c8d1d7; box-shadow: 0 1px 0 #eef4f870; }
.bb-rules-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bb-rules-heading h1 { margin: 0; color: #3e5564; font-size: 20px; line-height: 1.2; font-weight: 650; letter-spacing: -.5px; text-shadow: 0 1px 0 #eef5f8; }
.bb-restart { min-height: 44px; flex: 0 0 auto; margin-left: auto; padding: 8px 4px; border: 0; border-radius: 4px; background: transparent; color: #4f6675; font-size: 12px; }
.bb-rules-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid #8295a2; border-radius: 5px; background: #9eadb7; box-shadow: inset 0 1px 3px #4d637066; }
.bb-rule-tab { position: relative; min-height: 40px; padding: 8px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #3a5262; font-size: 13px; font-weight: 600; }
.bb-rule-tab[aria-selected="true"] { border-color: #657d8c; background: linear-gradient(#3a4e5c, #2b3e4b); color: #e5f0f8; box-shadow: 0 1px 2px #18293366; }
.bb-rule-tab[aria-selected="true"]::after { content: ''; position: absolute; bottom: 3px; left: calc(50% - 7px); width: 14px; height: 2px; border-radius: 1px; background: var(--bb-amber); }
.bb-rules-body { padding: 18px 18px 24px; }
.bb-rule-pane:focus-visible { outline: none; }
.bb-timer-rule { margin-top: 20px; padding: 14px 0; border-block: 1px solid #8297a570; }
.bb-timer-rule > strong { color: #2e4555; font-size: 14px; }
.bb-timer-rule > span { display: block; margin: 10px 0; color: #725320; font-family: var(--bb-readout); font-size: 17px; }
.bb-timer-rule p { margin: 0; color: #465e6e; font-size: 12px; line-height: 1.6; }
.bb-how-to { margin: 0; padding-left: 21px; color: #405767; font-size: 13px; line-height: 1.6; }
.bb-how-to li { padding-left: 3px; margin-bottom: 10px; }
.bb-how-to li::marker { color: #4f6675; font-weight: 700; }
.bb-how-to strong { color: #243e50; font-weight: 600; }
.bb-rules-note { margin: 12px 0 0; color: #465e6e; font-size: 12px; line-height: 1.6; }
.bb-scoring-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 13px; line-height: 1.4; }
.bb-scoring-table caption, .bb-rule-section { padding: 0; margin: 0 0 10px; text-align: left; color: #2e4555; font-size: 18px; line-height: 1.3; font-weight: 650; letter-spacing: -.2px; }
.bb-scoring-table thead { color: #526b7a; font-size: 11px; }
.bb-scoring-table th, .bb-scoring-table td { padding: 9px 0; border-bottom: 1px solid #8297a560; }
.bb-scoring-table th { text-align: left; font-weight: 500; }
.bb-scoring-table thead th { padding-top: 0; padding-bottom: 8px; font-weight: 600; }
.bb-scoring-table th:last-child, .bb-scoring-table td { text-align: right; }
.bb-scoring-table td { padding-left: 16px; color: #725320; font-family: var(--bb-readout); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb-scoring-table th span { display: block; margin-top: 2px; color: #526b7a; font-size: 11px; }
.bb-scoring-table .bb-score-bonus th, .bb-scoring-table .bb-score-bonus td { border-top: 1px solid #8297a5; }
.bb-chain-example { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 12px; margin: 16px 0 0; font-family: var(--bb-readout); font-size: 15px; font-weight: 600; color: #465e6e; }
.bb-chain-example strong { color: #725320; }
.bb-rule-section { margin-top: 24px; }
.bb-token-guide { margin: 0; }
.bb-token-guide > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 0; }
.bb-token-guide dt { display: flex; align-items: center; gap: 10px; color: #2e4555; font-size: 12px; font-weight: 600; }
.bb-token-guide dd { margin: 0; color: #465e6e; font-size: 12px; line-height: 1.5; }
.bb-token.bb-rule-symbol { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 4px; }
.bb-rule-symbol .bb-symbol { width: 26px; height: 24px; }
.bb-history-close { position: relative; appearance: none; display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #344149; box-shadow: none; }
.bb-history-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 1px 0 #ffffffa0); }
.bb-history-close:focus-visible { outline: none; }
.bb-history-close:focus-visible::after { content: ''; position: absolute; bottom: 8px; left: calc(50% - 5px); width: 10px; height: 2px; background: #34617c; }
/* The results LCD is a .bb-screen with the main display's own rows; only the LED strip is replaced by its divider. */
/* No Final label and no Level here (the heading has it): the score rises to the top of the row and the verdict sits right under it, in the main display's target face. */
.bb-lcd-note { color: #bac8d1; font: 11px/1.4 var(--bb-readout); text-align: right; }
/* One engraved line under the readings, stamped into the metal like the key legends. */
.bb-finish-detail { margin: 14px 0 auto; text-align: center; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .3px; color: #4b5b66; text-shadow: 0 1px 0 #ffffffb8, 0 -.5px 0 #30343540; }
/* The closing screen mirrors the level screen's two readings, each led by a small check when its target was met or
   a cross when not, centred on the number's height. The marks carry the result alone; the readings keep their colour. */
.bb-finish-goals { margin-bottom: 0; }
.bb-intro-goal-reading { display: flex; align-items: center; gap: 6px; }
.bb-intro-score .bb-intro-goal-reading { justify-content: flex-end; }
.bb-intro-goals[data-pads="false"] .bb-intro-score .bb-intro-goal-reading { justify-content: center; }
.bb-goal-mark { font-size: 13px; font-weight: 800; line-height: 1; }
/* A clear says what comes next at a readable size, and its two keys flash in turn: Free Play, then Next. */
.bb-finish-secondary { display: flex; gap: 10px; margin-top: 12px; }
.bb-finish-secondary > button { flex: 1; }
.bb-finish-divider { margin: 4px 0 13px; padding-bottom: 14px; border-bottom: 1px solid #54677570; }
/* Share and the transport keys under the board are chrome, the same finish as the rear-face keys, at pad height. */
.bb-share, .bb-transport-key { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 0; padding: 10px 12px; font-size: 14px; }
/* The transport keys stand proud of the panel: taller, with a deep chrome edge and a drop shadow, and they sink on press. */
.bb-transport-key { flex-direction: column; gap: 3px; min-height: 54px; padding: 7px 3px 5px; border-bottom-color: #5c6f7b; background: linear-gradient(#e3eaee, #c2ced5 60%, #aebbc3); box-shadow: 0 5px 0 #7d8f9b, 0 6px 0 1px #3f4c54, 0 9px 8px #0007, inset 0 1px 0 #f7fafc, inset 0 -1px 0 #ffffff40; }
.bb-transport-key:not(:disabled):active { box-shadow: 0 1px 0 #7d8f9b, 0 2px 0 1px #3f4c54, 0 3px 4px #0006, inset 0 1px 0 #f7fafc; }
.bb-transport-icon { filter: drop-shadow(0 1px 0 #ffffffa0); }
/* Share: three dots joined by two hairlines, a node graph. */
.bb-share-icon { flex-shrink: 0; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bb-share-icon .bb-led { fill: currentColor; stroke: none; }
/* Share sits in the results heading as the same silver key as Back to game on the rear face. */
.bb-history-reset { width: 100%; margin-top: 12px; }
.bb-intro-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.bb-dialog-action:disabled { opacity: .5; }
/* The one pad that moves the game on (Play Dropbeat, Next level, Try again) is built like a backlit token pad
 * (.bb-token, amber): a faint amber rim, an amber line under the rubber base, and a lit strip beneath the bottom
 * edge whose light pools under the key. Nothing spills over the face or the sides. */
.bb-intro-start, .bb-finish-restart { --coin-rgb: 255, 209, 131; border-color: rgba(var(--coin-rgb), .5); border-top-color: rgba(var(--coin-rgb), .7); border-bottom-color: #111416; box-shadow: 0 3px 0 #0c0d0e, 0 4px 0 rgba(var(--coin-rgb), .7), 0 5px 0 1px #08090a, 0 6px 1px 1px #ffffff70, inset 0 1px 1px #ffffff2e, inset 0 -2px 1px #000b; }
.bb-intro-start::before, .bb-finish-restart::before { content: ''; position: absolute; left: 3px; right: 3px; bottom: -3px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(var(--coin-rgb), .12), rgba(var(--coin-rgb), .82) 30%, rgba(var(--coin-rgb), .82) 70%, rgba(var(--coin-rgb), .12)); box-shadow: 0 5px 6px rgba(var(--coin-rgb), .3), 0 10px 10px rgba(var(--coin-rgb), .12); pointer-events: none; }
/* The label is a backlit legend: orange letters with a soft amber halo, like the token symbols. */
.bb-intro-start, .bb-finish-restart { color: #ffc46a; text-shadow: 0 0 5px rgba(var(--coin-rgb), .35), 0 0 12px rgba(var(--coin-rgb), .18); }
.bb-intro-start:disabled, .bb-finish-restart:disabled { color: #e0e5e8; text-shadow: none; border-color: #5b6063; border-top-color: #8a8e90; box-shadow: 0 3px 0 #111416, 0 4px 0 #ffffff60, inset 0 1px 1px #ffffff26, inset 0 -2px 1px #0008; }
.bb-intro-start:disabled::before, .bb-finish-restart:disabled::before { display: none; }
/* History is one LCD (.bb-screen) holding the high-score table, highest score first. Each row borrows the main
 * display's faces: level and style in the instrument face, moves and drums in the readout face under it, the score in
 * the yellow score face on the right with Cleared (green, as Target reached) or Missed under it. Rows are split by the
 * same rule the LED strip sits on. */
.bb-history-best { padding-top: 4px; padding-bottom: 4px; text-align: left; }
.bb-history-empty { margin: 0; padding: 8px 0; color: #b8c9d3; font: 11px/1.5 var(--bb-readout); }
.bb-history-runs { display: grid; margin: 0; padding: 0; list-style: none; }
.bb-history-runs li { display: block; padding: 0; border-top: 1px solid #54677570; }
.bb-history-runs li:first-child { border-top: 0; }
/* A row is a key: the whole line is the tap target, laid out exactly as the row was, lit on hover and focus. */
.bb-history-run { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: end; gap: 4px 12px; width: 100%; margin: 0; padding: 11px 0 10px; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bb-history-run:hover, .bb-history-run:focus-visible { background: rgba(255, 196, 106, .08); outline: none; box-shadow: inset 0 0 0 1px rgba(255, 196, 106, .45); }
.bb-history-run-level { overflow: hidden; color: #e1eaf0; font-size: 18px; line-height: 1.2; font-weight: 600; letter-spacing: -.35px; white-space: nowrap; text-overflow: ellipsis; }
.bb-history-run-score { grid-column: 2; grid-row: 1; color: var(--bb-yellow); font-size: 22px; line-height: 1; font-weight: 500; letter-spacing: -.6px; font-variant-numeric: tabular-nums; text-align: right; }
.bb-history-run-detail, .bb-history-run-verdict { color: #b8c9d3; font: 10px/13px var(--bb-readout); white-space: nowrap; }
.bb-history-run-verdict { grid-column: 2; grid-row: 2; text-align: right; }
.bb-history-runs li[data-cleared="true"] .bb-history-run-verdict { color: #9ce7c9; }
@media (hover: hover) {
  .bb-column:not(:disabled):hover .bb-tap-indicator { background: #60849a; }
  .bb-column:not(:disabled):hover .bb-tap-indicator::after { background: #e1f2fa; box-shadow: 0 0 4px #d6eaff; }
  .bb-restart:not(:disabled):hover, .bb-rules-close:not(:disabled):hover, .bb-dialog-close:not(:disabled):hover, .bb-share:not(:disabled):hover, .bb-transport-key:not(:disabled):hover { filter: brightness(1.1); }
  .bb-dialog-action:not(:disabled):hover { filter: brightness(1.15); }
}
.bb-restart:not(:disabled):active, .bb-transport-key:not(:disabled):active, .bb-share:not(:disabled):active, .bb-rules-close:not(:disabled):active, .bb-dialog-action:not(:disabled):active { transform: translateY(2px); }
.bb-transport-key:not(:disabled):active { transform: translateY(4px); }
@keyframes bb-lock-light { 0%, 100% { outline-color: #b17a29; } 50% { outline-color: #e1a849; } }
/* Slot machine: a panel falls in from above the frame, overshoots its slot and settles; it leaves off the bottom (app.mjs closeDialog). */
@keyframes bb-dialog-enter { from { transform: translateY(calc(-50vh - 50%)); } 62% { transform: translateY(10px); } 82% { transform: translateY(-4px); } to { transform: none; } }
/* Retry of the same level: the results swipe out to the right and the intro swipes in from the left. */
@keyframes bb-dialog-enter-side { from { transform: translateX(calc(-50vw - 50%)); } 62% { transform: translateX(10px); } 82% { transform: translateX(-4px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .bb-machine, .bb-rules-panel { transition: none; }
  .bb-dialog[open], .bb-final { animation: none; }
  .bb-flow circle { animation: none; opacity: .7; }
  .bb-pad.bb-locked.bb-sounding { border-color: #9dbaca; background: linear-gradient(145deg, #3c5667, #2c4454); box-shadow: 0 3px 0 #10171d; }
  .bb-locked.bb-sounding .bb-lock-icon { filter: none; stroke: #c8e3f1; }
  .bb-restart:not(:disabled):active, .bb-transport-key:not(:disabled):active, .bb-queue .bb-lane-pause:not(:disabled):active, .bb-share:not(:disabled):active, .bb-rules-close:not(:disabled):active, .bb-dialog-action:not(:disabled):active { transform: none; }
}
/* 371-389px (iPhone SE, mini): the wide layout's lane is up to 13px short of three tokens, two flow marks, five 8px gaps and
   the key, so the lane's gaps and the key's width tighten while the tokens and marks keep their sizes. */
@media (max-width: 389px) {
  .bb-lane { gap: 6px; }
  .bb-queue .bb-lane-pause { min-width: 52px; }
}
@media (max-width: 370px) {
  body { padding: 18px 12px 58px; }
  .bb-machine { padding: 12px 10px 12px; }
  .bb-wordmark { font-size: 25px; }
  .bb-screen { padding: 13px 10px 13px; }
  .bb-genre { font-size: 22px; }
  .bb-score-value { font-size: 30px; }
  .bb-tempo { font-size: 16px; }
  .bb-instrument { font-size: 16px; }
  .bb-lock-progress { gap: 5px; }
  .bb-playfield { --bb-gap: 6px; --bb-bank-padding: 3px; }
  .bb-number { top: 4px; left: 4px; font-size: 7px; }
  .bb-symbol { width: 35px; height: 33px; }
  .bb-queue { padding: 10px 6px 11px; gap: 6px; }
  .bb-lane { gap: 6px; min-height: 54px; padding: 4px 4px 4px 6px; }
  .bb-queue .bb-lane-pause { min-width: 52px; border-radius: 4px 3px 3px 4px; }
  .bb-queue .bb-token { width: 41px; height: 41px; }
  .bb-queue .bb-symbol { width: 28px; height: 27px; }
  .bb-end { inset-inline: 6px; }
  .bb-layer { font-size: 9px; letter-spacing: .8px; }
  .bb-steps { gap: 3px; }
  .bb-dialog-heading, .bb-dialog-body { padding-inline: 16px; }
  .bb-rules-heading { padding: 14px 12px; }
  .bb-rules-top { gap: 7px; }
  .bb-rules-body { padding: 16px 12px; }
  .bb-token-guide > div { grid-template-columns: 122px minmax(0, 1fr); gap: 8px; }
  .bb-token-guide dt { gap: 8px; }
}
/* Under the LCD, two mirrored readings: Drums Filled over the pad count on the left, Target Score over the points on
   the right. A score-only level shows the score alone, centred. The Play key follows with no rule between. */
.bb-intro-goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 auto; }
.bb-intro-goals[data-pads="false"] { grid-template-columns: minmax(0, 1fr); }
.bb-intro-goal { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bb-intro-score { text-align: right; }
.bb-intro-goals[data-pads="false"] .bb-intro-score { text-align: center; }
.bb-intro-goal-label { color: #465e6e; font-size: 11px; font-weight: 650; letter-spacing: .6px; text-transform: uppercase; }
.bb-intro-goal-value { color: #23313a; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.4px; white-space: nowrap; }

/* The dropped swap tile blinks only after the player taps it. */
.bb-token[data-kind="swap"] { --coin-rgb: 255, 255, 255; }
.bb-pad.bb-swap-choice { z-index: 5; pointer-events: auto; cursor: pointer; }
.bb-pad.bb-swap-choice:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.bb-pad.bb-swap-target { outline: 1px solid #c6d9df; outline-offset: -3px; }
.bb-pad.bb-swap-source { outline: 2px solid #fff; outline-offset: -3px; animation: bb-swap-pulse 800ms ease-in-out infinite; }
.bb-finish-run { width: 100%; margin: 10px 0; }
@keyframes bb-swap-pulse { 50% { filter: brightness(1.5); } }
@media (prefers-reduced-motion: reduce) { .bb-pad.bb-swap-source { animation: none; box-shadow: inset 0 0 0 3px #fff; } }

/* A single top-contact opportunity per column; spending it removes its marker. */
.bb-playfield[data-top-once="true"] { padding-top: 22px; }
.bb-top-entry { position: absolute; top: 1px; left: 50%; transform: translateX(-50%); width: 30px; height: 16px; border: 1px solid #717575; border-radius: 3px; background: #a5aaaa; box-shadow: inset 0 1px #e9eded99; color: #344550; font: 600 11px/14px var(--bb-readout); text-align: center; }
.bb-top-entry[data-ready="true"] { border-color: #9a742f; background: #e4c384; color: #4a391c; box-shadow: 0 0 5px #ffd18380, inset 0 1px #fff6; }