/* Legacy — Lives: three lives side by side (js/lives.js) */
.lv-cards { display: grid; gap: 8px; }
.lv-card { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--sunk); border: 2px solid transparent; }
.lv-card.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--sunk)); }
.lv-card.empty { border-style: dashed; border-color: var(--line); opacity: .9; }
.lv-av { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--surface); display: grid; place-items: center; flex: none; }
.lv-av .av, .lv-av svg { width: 52px; height: 52px; }
.lv-plus { font: 800 26px var(--f-display); opacity: .5; }
.lv-txt { display: grid; min-width: 0; }
.lv-txt b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-txt small { font-size: 12px; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-btns { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
/* the Menu row */
.lv-mini { display: flex; gap: 6px; align-items: center; }
.lv-dot { width: 36px; height: 36px; border-radius: 50%; padding: 0; border: 2px solid var(--line); background: var(--surface); display: grid; place-items: center; overflow: hidden; cursor: pointer; font: 700 16px var(--f-display); color: inherit; }
.lv-dot .av, .lv-dot svg { width: 36px; height: 36px; }
.lv-dot.on { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 40%, transparent); }
.lv-dot.empty { border-style: dashed; opacity: .7; }
/* the header switcher: one dot per life, the one you're playing lit */
.lv-top { flex: none; align-self: center; display: flex; gap: 3px; align-items: center; padding: 6px 7px; margin-right: 4px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .14); cursor: pointer; }
.lv-top i { width: 7px; height: 7px; border-radius: 50%; background: rgb(255 255 255 / .45); display: block; }
.lv-top i.on { background: var(--gold, #ffd84a); box-shadow: 0 0 6px var(--gold, #ffd84a); }