/* Курс битбокса: сетка бита, звуки, полосы «что слышу». Цвета и карточки — из style.css. */

/* Режимы и вид (какие карточки видны). */
body.beatbox:not(.mode-session) .session-only,
body.beatbox:not(.mode-sounds) .sounds-only,
body.beatbox:not(.mode-beats) .beats-only,
body.beatbox:not(.mode-free) .free-only,
body.beatbox:not(.view-ex) .ex-only { display: none; }
body.beatbox .modes { grid-template-columns: repeat(4, 1fr); }

/* Цвета классов звука: низ — оранжевый (как «дуть»), середина — бирюзовый, верх — фиолетовый. */
.beatbox .low { --cls: var(--blow); --cls-soft: var(--blow-soft); }
.beatbox .mid { --cls: var(--draw); --cls-soft: var(--draw-soft); }
.beatbox .high { --cls: var(--heard); --cls-soft: var(--scale); }

/* Карточка «что слышу». */
.b-heard { flex-wrap: wrap; align-items: center; }
.b-heard .hint { flex-basis: 100%; }
.b-live { flex: none; }

/* Полосы долей энергии: низ / середина / верх. */
.bx-shares { display: flex; gap: 10px; align-items: flex-end; height: 64px; margin: 10px 0 4px; }
.bx-share { position: relative; width: 44px; height: 100%; background: var(--bg); border-radius: 8px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.bx-share-fill { display: block; width: 100%; height: 0; background: var(--cls, var(--muted)); transition: height .06s linear; }
.bx-share small { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font-size: .62rem; color: var(--text); pointer-events: none; }
.bx-shares.live { height: 48px; margin: 0; }
.bx-shares.live .bx-share { width: 34px; }

/* Фишка звука: буква и название. */
.bx-sound { display: inline-flex; flex-direction: column; align-items: center; min-width: 56px; padding: 6px 8px; border-radius: 10px; background: var(--cls-soft, var(--bg)); border: 2px solid transparent; }
.bx-sound b { font: 800 1.4rem ui-monospace, Consolas, monospace; color: var(--cls, var(--text)); line-height: 1; }
.bx-sound small { font-size: .7rem; color: var(--text); white-space: nowrap; }
.bx-sound.target { border-color: var(--cls, var(--text)); }
.bx-sound-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.bx-sound-row .tv-big { margin: 0; }
.bx-legend { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }

/* Сетка бита: ячейка на каждую восьмую/шестнадцатую, доли выделены. */
.bx-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: 10px 0; }
.bx-grid span { text-align: center; font: 800 1.3rem ui-monospace, Consolas, monospace; padding: 8px 0; border-radius: 8px; background: var(--cls-soft, var(--bg)); color: var(--cls, var(--muted)); border: 2px solid transparent; }
.bx-grid span.rest { background: var(--bg); color: var(--muted); }
.bx-grid span.beat { box-shadow: inset 0 -3px 0 var(--line); }
.bx-grid span.now { border-color: var(--text); }
.bx-grid span.hit { background: var(--ok); color: #fff; }
.bx-grid span.wrong { background: var(--bad); color: #fff; }
.bx-grid.per4 span { gap: 2px; font-size: 1.05rem; padding: 6px 0; }

/* Счётчики фристайла. */
.bx-counts { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.bx-counts span { display: flex; flex-direction: column; align-items: center; min-width: 72px; padding: 6px 10px; border-radius: 10px; background: var(--cls-soft, var(--bg)); }
.bx-counts b { font: 800 1.5rem ui-monospace, Consolas, monospace; color: var(--cls, var(--text)); }
.bx-counts small { font-size: .7rem; }

/* Библиотеки звуков и битов. */
.b-lib-title { font-weight: 600; margin-bottom: 10px; }
.b-sound-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.b-sound-grid button { display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; padding: 10px 4px; border-radius: 12px; border: 2px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; }
.b-sound-grid button b { font: 800 1.5rem ui-monospace, Consolas, monospace; color: var(--cls, var(--text)); line-height: 1; }
.b-sound-grid button span { font-size: .85rem; font-weight: 600; }
.b-sound-grid button small { font-size: .72rem; color: var(--muted); }
.b-sound-grid button.active { border-color: var(--cls, var(--text)); background: var(--cls-soft, var(--bg)); }
.b-field { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted); margin-bottom: 10px; }
.b-field select { width: 100%; }
.b-tabrow { display: flex; gap: 8px; }
.b-tabrow input { flex: 1; min-width: 0; font: inherit; font-family: ui-monospace, Consolas, monospace; letter-spacing: .15em; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); }

@media (max-width: 600px) {
  .bx-grid span { font-size: 1rem; padding: 6px 0; }
  .bx-grid.per4 span { font-size: .85rem; padding: 5px 0; }
  .bx-share { width: 36px; }
  .b-live { order: 3; flex-basis: 100%; }
}

/* Лента бита (js/lane.js): цвет события — класс звука */
#bxLane { margin: 10px 0; }
.beatbox .lane-note.low, .beatbox .lane-note.mid, .beatbox .lane-note.high { background: var(--cls); padding-left: 6px; font-size: 1.05rem; }