.live-records {
    grid-column: 1 / -1;
    border-top: 1px solid #404345;
    border-left: 0 !important;
    background: rgba(27,30,33,.92);
}
.live-records > header {
    gap: 20px;
    padding: 20px 22px;
    background: linear-gradient(105deg,rgba(46,49,52,.92),rgba(35,38,41,.88));
}
.live-records > header p {
    margin: 0 0 5px;
    color: #d2b94c;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .14em;
}
.live-records > header h3 {
    color: #f2f3f3;
    font: 600 18px/1.1 "Barlow Condensed",sans-serif;
}
.live-records-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.live-records-actions small {
    max-width: 240px;
    overflow: hidden;
    color: #c8cdd1 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.live-records-actions a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 13px;
    border: 1px solid #5d5736;
    border-radius: 24px;
    color: #e3c94e;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: color .18s ease,border-color .18s ease,background .18s ease;
}
.live-records-actions a:hover {
    border-color: #ffcf00;
    color: #17191b;
    background: #ffcf00;
}
.live-records-head,
.live-record-row {
    display: grid;
    grid-template-columns: 54px minmax(170px,1fr) minmax(140px,.48fr) minmax(90px,.28fr);
    align-items: center;
    gap: 16px;
    padding-inline: 22px;
}
.live-records-head {
    min-height: 38px;
    border-bottom: 1px solid #373b3f;
    color: #899199;
    background: rgba(31,34,37,.9);
    font-size: 8px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.live-records-head span:nth-child(n+3) { text-align: right; }
.live-records-list {
    max-height: 386px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #5a5f61 transparent;
}
.live-record-row {
    min-height: 50px;
    border-bottom: 1px solid #34383c;
    color: #c9ced2;
    background: rgba(255,255,255,.008);
    font-size: 11px;
}
.live-record-row:nth-child(even) { background: rgba(255,255,255,.022); }
.live-record-row:hover { background: rgba(255,207,0,.035); }
.live-record-rank {
    display: inline-grid;
    width: 30px;
    min-height: 24px;
    place-items: center;
    border: 1px solid #484d50;
    border-radius: 4px;
    color: #9ca4aa;
    font: 700 10px/1 "Barlow",sans-serif;
}
.live-record-row:nth-child(1) .live-record-rank { color:#1c1c1b;background:#e7c84e;border-color:#e7c84e; }
.live-record-row:nth-child(2) .live-record-rank { color:#252728;background:#bfc5c9;border-color:#bfc5c9; }
.live-record-row:nth-child(3) .live-record-rank { color:#211a15;background:#b78058;border-color:#b78058; }
.live-record-player { min-width:0; }
.live-record-player a {
    display: block;
    overflow: hidden;
    color: #eef0f1;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.live-record-player a:hover { color:#ffcf00; }
.live-record-player small {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #7f888f;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.live-record-time,
.live-record-speed {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.live-record-time {
    color: #f0d35b;
    font: 600 15px/1 "Barlow Condensed",sans-serif;
}
.live-record-speed { color:#9da6ad; }
.live-records-empty {
    min-height: 96px;
    display: grid;
    place-items: center;
    padding: 24px;
    color: #90989e;
    font-size: 11px;
    text-align: center;
}
.live-records-empty.is-error { color:#a9aeb2; }

body[data-theme="halloween"] .live-record-time,
body[data-theme="halloween"] .live-records > header p,
body[data-theme="halloween"] .live-record-player a:hover { color:#ff8b38; }
body[data-theme="christmas"] .live-record-time,
body[data-theme="christmas"] .live-records > header p,
body[data-theme="christmas"] .live-record-player a:hover { color:#b6deed; }

@media(max-width:700px) {
    .live-records > header { align-items:flex-start;flex-direction:column;gap:13px;padding:18px; }
    .live-records-actions { width:100%;justify-content:space-between; }
    .live-records-actions small { max-width:145px; }
    .live-records-head { display:none; }
    .live-records-list { max-height:480px; }
    .live-record-row {
        grid-template-columns: 38px minmax(0,1fr) auto;
        gap:10px;
        padding:13px 18px;
    }
    .live-record-speed { display:none; }
    .live-record-time { font-size:14px; }
}

@media(prefers-reduced-motion:reduce) {
    .live-records-actions a { transition:none; }
}