/* PIANO ARMY · the races, an experiment (web/army-races.css): the menu's Races panel, the key on the keyboard and in
   the combos panel. */
.races .rhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.races .rhead h2 { margin: 0; }
.races .exp { padding: 1px 6px; border-radius: 4px; background: #3a2f12; color: #ffd34a; font: 700 11px/1.4 "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.races .rrow { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.races .rrow .lbl { width: 60px; color: var(--dim); font: 700 12px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.races .race { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 12px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.races .race b { font: 700 15px/1.1 "Barlow Condensed", Barlow, sans-serif; }
.races .race span { color: var(--dim); font-size: 11.5px; }
.races .race.on { border-color: var(--gold); background: linear-gradient(#2e2a1c, #221f15); box-shadow: 0 0 0 1px var(--gold) inset; }
.races .rkey { margin-top: 4px; font-size: 12.5px; }
.races .rkey i { display: block; margin-top: 4px; color: var(--dim); }
/* the keyboard: keys outside your race's key tinted, the relative minor's raised seventh marked; the key named on it */
.keys i.off.w { background: linear-gradient(#d6d1c4, #bdb6a5 86%, #a49c88); }
.keys i.off.b { background: linear-gradient(#4a4b52, #34353b 80%, #26272c); }
.keys i.lead.b::after, .keys i.lead.w::after { content: ""; position: absolute; left: 50%; bottom: 10px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #c9a24a; }
#keys[data-key]:not([data-key=""])::before { content: attr(data-key); position: absolute; top: 2px; right: 6px; z-index: 3; font: 700 10.5px/1 "Barlow Condensed", sans-serif; letter-spacing: .03em; color: #6b5520; background: rgba(255, 240, 200, .85); padding: 2px 6px; border-radius: 4px; pointer-events: none; }
#strip .side .key { width: 100%; text-align: right; font-style: normal; color: var(--soft); margin-bottom: 4px; }
#strip .side .key b { color: var(--gold2, #f0cf85); width: auto; }