/* Beat Battles pagrindiniame ARTOFHOOD puslapyje: meniu punktas, blokas „Vyksta dabar", pranešimai. Naudoja style.css kintamuosius. */
:root { --gold: #f5c542; }

/* ---------- avatarai ---------- */
.bb-av { flex: none; display: grid; place-items: center; width: 46px; height: 46px; background: linear-gradient(145deg, var(--a1, #2a2a2a), #0a0a0a 75%); border: 2px solid var(--line3); font: 400 22px Anton, sans-serif; color: #fff; text-transform: uppercase; }
.bb-av.a { border-color: var(--hot); }
.bb-av.b { border-color: var(--gold); }
.bb-av.tuscias { border-style: dashed; color: var(--dim); background: repeating-linear-gradient(-45deg, #111 0 6px, #0a0a0a 6px 12px); }
.bb-av.pran-av { width: 44px; height: 44px; font-size: 20px; color: var(--hot); }

/* ---------- blokas „Beat Battles · vyksta dabar" ---------- */
.bb-blokas { margin-top: 6px; }
.bb-blokas .sec-h .bb-ic { width: 30px; height: 30px; display: grid; place-items: center; background: radial-gradient(circle, rgba(227, 36, 47, .28), transparent 70%); }
.bb-blokas .more { display: inline-flex; align-items: center; gap: 6px; }
.bb-juosta {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(76%, 290px); gap: 8px;
  padding: 0 12px 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 12px; scrollbar-width: none;
}
.bb-juosta::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .bb-juosta { grid-auto-columns: calc((100% - 16px) / 2.4); } }

.bb-k { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line2); background: var(--card); text-align: left; scroll-snap-align: start; overflow: hidden; }
.bb-k:hover { border-color: var(--line3); }
.bb-k::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--line3); }
.bb-k.karsta { border-color: var(--hot); background: linear-gradient(160deg, rgba(227, 36, 47, .16), transparent 55%), var(--card); }
.bb-k.karsta::before { background: var(--hot); }
.bb-k.auksas::before { background: var(--gold); }
.bb-k-v { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.bb-k-v .chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-k-laikas { display: inline-flex; align-items: center; gap: 3px; flex: none; color: var(--muted); font: 500 10px Roboto, sans-serif; white-space: nowrap; }
.bb-k-kova { display: flex; align-items: center; justify-content: center; gap: 10px; }
.bb-vs { font: 400 20px Anton, sans-serif; color: var(--hot); text-shadow: 0 0 12px rgba(227, 36, 47, .6); }
.bb-k-vardai { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; font: 700 12px Roboto, sans-serif; }
.bb-k-vardai .tusc { color: var(--dim); font: 600 10px Oswald, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.bb-k-vardai span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-k-vardai span:last-child { text-align: right; }
.bb-k-balsai { height: 4px; background: var(--gold); }
.bb-k-balsai i { display: block; height: 100%; background: var(--hot); }
.bb-k-st { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line2); font: 600 10px Oswald, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bb-k.karsta .bb-k-st > span:first-child { color: #fff; }
.bb-k.auksas .bb-k-st > span:first-child { color: var(--gold); }
.bb-k-busena { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-k-mygt { flex: none; padding: 6px 10px; background: var(--hot); color: #fff; white-space: nowrap; }
.bb-k-trukme { flex: none; color: var(--dim); white-space: nowrap; }
.bb-kurti { align-items: center; justify-content: center; gap: 6px; text-align: center; border: 1px dashed var(--hot); color: var(--hot); }
.bb-kurti::before { display: none; }
.bb-kurti b { color: #fff; font: 600 12px Oswald, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.bb-kurti small { color: var(--muted); font-size: 10.5px; line-height: 1.3; }
.bb-k-kova .bb-av { width: 48px; height: 48px; }

/* ---------- meniu punktas ---------- */
.sn-battles { position: relative; }
.sn-battles .ic { color: var(--hot); }
.bb-drawer { position: relative; }
.bb-drawer .bdg { position: static; margin-left: auto; }

/* Perėjimo animacija — perejimas.js (bendra su battle'ų puslapiu) */
.bb-kars .kars-btn { top: 42%; }

.bb-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pran .bb-av.pran-av { color: var(--hot); }
.bb-zyme { color: var(--hot); font: 600 9.5px Oswald, sans-serif; letter-spacing: .12em; text-transform: uppercase; }