/* The event recap window (officials-recap.js). */
.rc-dialog {
    width: min(980px, calc(100vw - 24px));
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 24px);
    padding: 0;
    background: var(--bg-2, var(--surface));
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-lg, 0 20px 60px rgba(0, 0, 0, 0.6));
    overflow: hidden;
}
.rc-dialog::backdrop { background: rgba(5, 7, 11, 0.72); }
.rc-dialog[open] { display: flex; flex-direction: column; }

.rc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.rc-title { font-family: var(--font-display); font-size: 22px; font-weight: 400; overflow-wrap: anywhere; }
.rc-body { padding: 18px; overflow-y: auto; display: grid; gap: 16px; align-content: start; scrollbar-width: thin; }

.rc-loading, .rc-empty { padding: 30px 12px; text-align: center; color: var(--text-dim); }

.rc-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
.rc-champ { display: flex; align-items: center; gap: 16px; padding: 18px; background: linear-gradient(135deg, rgba(255, 210, 63, 0.14), rgba(255, 210, 63, 0.03)); border: 1px solid rgba(255, 210, 63, 0.35); border-radius: var(--radius-md, 14px); }
.rc-champ--none { background: var(--surface); border-color: var(--border); }
.rc-champ .rc-logo { width: 64px; height: 64px; }
.rc-champ small { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #ffd23f; }
.rc-champ--none small { color: var(--primary); }
.rc-champ strong { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 400; line-height: 1.15; }
.rc-champ span { font-size: 13px; color: var(--text-dim); }

.rc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rc-facts div { display: grid; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.rc-facts b { font-family: var(--font-display); font-size: 24px; font-weight: 400; color: var(--primary); }
.rc-facts span { font-size: 12px; color: var(--text-muted); }

.rc-logo { width: 32px; height: 32px; flex: none; border-radius: 8px; object-fit: contain; background: var(--surface-3); }
.rc-logo--blank { display: inline-flex; align-items: center; justify-content: center; font: 400 15px var(--font-display); color: var(--text-muted); }

.rc-panel { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md, 14px); min-width: 0; }
.rc-panel h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 19px; font-weight: 400; }
.rc-note { margin: 0 0 10px; font-size: 12.5px; color: var(--text-muted); }
.rc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rc-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.rc-table { display: grid; gap: 4px; }
.rc-trow { display: grid; grid-template-columns: 24px 32px minmax(0, 1fr) 52px 84px; gap: 10px; align-items: center; padding: 6px 8px; border-radius: var(--radius-sm); }
.rc-trow:nth-child(odd) { background: rgba(255, 255, 255, 0.02); }
.rc-trow.is-champ { background: rgba(255, 210, 63, 0.08); }
.rc-rank { font-size: 12px; text-align: center; color: var(--text-muted); }
.rc-tname { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.rc-tname b { font-weight: 700; overflow-wrap: anywhere; }
.rc-rec { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.rc-sets { font-size: 12px; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }

.rc-chip { padding: 2px 9px; background: var(--surface-3); border-radius: 99px; font-size: 11px; font-weight: 800; color: var(--text-dim); white-space: nowrap; }
.rc-chip--gold { background: rgba(255, 210, 63, 0.16); color: #ffd23f; }
.rc-chip--silver { background: rgba(200, 208, 222, 0.15); color: #d3d9e6; }
.rc-chip--go { background: rgba(174, 232, 117, 0.14); color: var(--primary); }

.rc-lines { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rc-line { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.rc-line-main { overflow-wrap: anywhere; }
.rc-score { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--primary); }

.rc-bar { display: grid; grid-template-columns: minmax(0, 1fr) 70px auto; gap: 8px; align-items: center; margin-top: 7px; font-size: 13px; }
.rc-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-bar-track { height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.rc-bar-track i { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.rc-bar-n { font-size: 12px; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.rc-stars { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: rc; }
.rc-stars li { display: grid; gap: 1px; padding-left: 28px; position: relative; counter-increment: rc; }
.rc-stars li::before { content: counter(rc); position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-3); font-size: 11px; font-weight: 800; text-align: center; line-height: 20px; color: var(--text-dim); }
.rc-stars li:first-child::before { background: rgba(255, 210, 63, 0.18); color: #ffd23f; }
.rc-stars small { font-size: 12px; color: var(--text-muted); }
.rc-stars span { font-size: 13px; font-weight: 700; color: var(--primary); }

.rc-foot { font-size: 12px; color: var(--text-muted); }
.rc-foot a { color: var(--primary); font-weight: 700; }

@media (max-width: 760px) {
    .rc-hero, .rc-cols, .rc-cols--3 { grid-template-columns: minmax(0, 1fr); }
    .rc-trow { grid-template-columns: 22px 28px minmax(0, 1fr) 44px; }
    .rc-sets { display: none; }
}