.cmp { position: relative; flex: none; transform-origin: 0 0; }
.cmp-el { position: absolute; box-sizing: border-box; }
.cmp-el.cmp-off { display: none; }
.cmp-txt { display: flex; white-space: pre; line-height: 1; overflow: visible; }
.cmp-txt > span { display: block; }
.cmp-pop > span { animation: cmp-pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
@keyframes cmp-pop { 0% { transform: translateY(18%) scale(0.92); opacity: 0.4; } 100% { transform: none; opacity: 1; } }
.cmp-box svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.cmp-img { background-repeat: no-repeat; background-position: center; overflow: hidden; }
.cmp-avatar { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cmp-res { display: flex; }
.cmp-res i { flex: 1 1 0; min-width: 0; min-height: 0; display: grid; place-items: center; font-style: normal; line-height: 1; overflow: hidden; }
.cmp-res i.rw { background: var(--win); color: #0f2406; }
.cmp-res i.rl { background: var(--loss); color: #2a0b09; }
.cmp-res i.ro { box-shadow: inset 0 3px 0 var(--ot); }
.cmp-res i.rn { background: rgba(255, 255, 255, 0.12); }
.cmp-bar { display: flex; overflow: hidden; }
.cmp-bar i { display: block; flex: 0 0 auto; transition: flex-basis 0.5s ease; }
.cmp-arc svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.cmp-arc path { fill: none; }
.cmp-gauge { position: absolute; pointer-events: none; }
.cmp-gauge svg { width: 100%; height: 100%; overflow: visible; display: block; }
.cmp-gauge .cmp-g-core { fill: rgba(0, 0, 0, 0.35); stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.5; }
.cmp-gauge .cmp-g-ring { fill: none; stroke: var(--team, #ff7f22); stroke-width: 3; opacity: 0.55; }
.cmp-gauge .cmp-g-seg { fill: none; stroke: var(--team, #ff7f22); stroke-width: 15; stroke-dasharray: 7 3; opacity: 0.9; }
.cmp-gauge text { fill: var(--team, #ff7f22); font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-style: italic; }
.cmp-show { animation: cmp-show 0.3s ease-out; }
.cmp-el.cmp-hide { opacity: 0 !important; transition: opacity 0.22s ease-in; }
@keyframes cmp-show { from { opacity: 0; } }
.cmp-players { display: flex; flex-direction: column; line-height: 1; }
.cmp-pl { position: relative; box-sizing: border-box; flex: none; display: flex; flex-direction: column; justify-content: center; padding: 0 12px; overflow: hidden; outline: 2px solid transparent; outline-offset: -2px; transition: opacity 0.25s, outline-color 0.25s; }
.cmp-pl.cmp-tgt { outline-color: rgba(255, 255, 255, 0.85); }
.cmp-pl.cmp-dead { opacity: 0.45; }
.cmp-pl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cmp-pl.cmp-r .cmp-pl-top { flex-direction: row-reverse; }
.cmp-pl-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cmp-pl-bv { font-size: 1.1em; font-weight: 900; font-variant-numeric: tabular-nums; }
.cmp-pl-bv.cmp-dm { font-size: 0.6em; letter-spacing: 0.12em; color: #ff5a6a; }
.cmp-pl-bar { margin-top: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.cmp-pl-bar i { display: block; height: 100%; width: 0; background: var(--tc); transition: width 0.2s linear; }
.cmp-pl.cmp-r .cmp-pl-bar i { margin-left: auto; }
.cmp-pl.cmp-fast .cmp-pl-bar i { background: color-mix(in srgb, var(--tc) 55%, white 45%); }
.cmp-pips { display: flex; }
.cmp-pips i { flex: 1 1 0; min-width: 0; background: rgba(255, 255, 255, 0.14); }
.cmp-pips.cmp-skew i { transform: skewX(-20deg); }
.cmp-board { display: flex; flex-direction: column; line-height: 1; font-variant-numeric: tabular-nums; }
.cmp-bd-hr, .cmp-bd-rw { box-sizing: border-box; flex: none; display: grid; grid-template-columns: minmax(0, 1fr) repeat(6, 11%); align-items: center; }
.cmp-bd-hr { font-size: 0.55em; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.5; }
.cmp-board span { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-bd-rw > span:first-child { display: flex; align-items: center; gap: 10px; text-align: left; padding-left: 24px; }
.cmp-bd-rw.cmp-best { background-image: linear-gradient(rgba(255, 211, 90, 0.08), rgba(255, 211, 90, 0.08)); }
.cmp-board img { flex: none; width: 1.25em; height: 1.25em; border-radius: 50%; object-fit: cover; }
.cmp-board b { flex: none; font-size: 0.55em; padding: 3px 8px; border-radius: 6px; background: #ffd35a; color: #1b1000; font-weight: 900; letter-spacing: 0.1em; }
.cmp.in-slide { animation: cmp-in-slide 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.cmp.in-rise { animation: cmp-in-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.cmp.in-pop { animation: cmp-in-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.35) both; }
.cmp.in-fade { animation: cmp-in-fade 0.45s ease-out both; }
.cmp.out { animation: cmp-out 0.35s ease-in forwards; }
@keyframes cmp-in-slide { from { transform: translateX(-70px); opacity: 0; } }
@keyframes cmp-in-rise { from { transform: translateY(50px); opacity: 0; } }
@keyframes cmp-in-pop { from { transform: scale(0.88); opacity: 0; } }
@keyframes cmp-in-fade { from { opacity: 0; } }
@keyframes cmp-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cmp-show { animation: none; } .cmp-pop > span { animation: none; } .cmp-bar i { transition: none; } .cmp.in-slide, .cmp.in-rise, .cmp.in-pop { animation-name: cmp-in-fade; } }