.horse-list { display: grid; gap: 6px; }
.horse { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; border: 2px solid transparent; border-radius: 10px; background: var(--panel-2);
         color: #fff; padding: 7px 10px; cursor: pointer; font: 500 14px var(--body); text-align: left; }
.horse[aria-checked="true"] { border-color: var(--gold); background: #2b1d63; }
.horse b { color: var(--gold); }
.silk { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font: 700 13px var(--body); font-style: normal; color: #1b1240; }
.track-board { display: grid; gap: 12px; align-content: start; background: #2d7a3e; box-shadow: inset 0 0 0 5px #1f5a2c; }
.track { display: grid; gap: 4px; padding-right: 8px; border-right: 6px dashed #fff; }
.lane { position: relative; height: 48px; background: #a8743c; border-radius: 6px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
.lane-n { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); font: 700 12px var(--body); color: rgba(255, 255, 255, .6); }
.runner { position: absolute; left: 0; top: 4px; width: 44px; height: 40px; }
.runner img { width: 40px; height: 40px; }
.runner::after { content: ""; position: absolute; left: 12px; bottom: -1px; width: 18px; height: 5px; border-radius: 3px; background: var(--c); }
.finish { margin: 0; padding-left: 0; list-style: none; display: flex; gap: 10px; flex-wrap: wrap; color: #fff; font-weight: 700; }
.finish li { background: rgba(0, 0, 0, .3); border-radius: 8px; padding: 5px 10px; }
.finish li:first-child { background: var(--gold); color: #1b1240; }