#killfeed-container { position: absolute; top: 20px; left: auto; right: 20px; width: 620px; height: 400px; display: flex; flex-direction: column; align-items: flex-end; overflow: hidden; z-index: 250; color: #f0f0f0; } #killfeed-container ul#killfeed-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 6px; width: 100%; height: 100%; overflow: hidden; } #killfeed-container .killfeed-item { display: flex; align-items: center; justify-content: flex-end; gap: 10px; opacity: 1; transition: opacity 0.5s ease-out, transform 0.4s ease; transform: translateY(0); } #killfeed-container .killfeed-item.appearing { transform: translateY(10px); opacity: 0; animation: kf-slidein 0.35s ease-out forwards; } #killfeed-container .killfeed-item .kf-left, #killfeed-container .killfeed-item .kf-center, #killfeed-container .killfeed-item .kf-right { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); padding: 0 8px; gap: 6px; height: 36px; } #killfeed-container .killfeed-item .kf-left { background: #66c4ff; color: #0b2a3a; } #killfeed-container .killfeed-item .kf-left .kf-name-left { font-size: 0.95rem; font-weight: 700; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; } #killfeed-container .killfeed-item .kf-left .kf-avatar-left { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; background: rgba(0, 0, 0, 0.2); border: 2px solid rgba(255, 255, 255, 0); box-sizing: border-box; display: block; } #killfeed-container .killfeed-item .kf-center { background: transparent; box-shadow: none; padding: 0 2px; } #killfeed-container .killfeed-item .kf-center .kf-event { display: block; height: 36px; max-width: 120px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); } #killfeed-container .killfeed-item .kf-right { background: #e44848; color: #2a0b0b; } #killfeed-container .killfeed-item .kf-right .kf-avatar-right { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; background: rgba(0, 0, 0, 0.2); border: 2px solid rgba(255, 255, 255, 0); box-sizing: border-box; display: block; } #killfeed-container .killfeed-item .kf-right .kf-name-right { font-size: 0.95rem; font-weight: 700; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; } #killfeed-container.outline-mode .killfeed-item .kf-left, #killfeed-container.outline-mode .killfeed-item .kf-right { background: transparent; box-shadow: none; padding: 0 4px; } #killfeed-container.outline-mode .killfeed-item .kf-left .kf-avatar-left { background: rgba(0, 0, 0, 0.2); border: 2px solid rgba(255, 255, 255, 0); } #killfeed-container.outline-mode .killfeed-item .kf-right .kf-avatar-right { background: rgba(0, 0, 0, 0.2); border: 2px solid rgba(255, 255, 255, 0); } #killfeed-container.outline-mode .killfeed-item .kf-left .kf-name-left, #killfeed-container.outline-mode .killfeed-item .kf-right .kf-name-right { color: #f0f0f0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } @keyframes kf-slidein { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }