@font-face {
    font-family: 'Moonbeam';
    src: url('assets/fonts/Moonbeam.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.hidden { display: none !important; }

/* Site Background */
body {
    background-color: #0a0e17 !important; 
}

/* --- Variables --- */
:root {
    --kf-width: 500px;
    --kf-height: 36px;
    
    /* Box Background */
    --kf-bg-color: rgba(0, 0, 0, 1);
    --kf-bg-image: none; /* Default no image */
    
    /* Gradient Border Settings */
    --kf-border-angle: 180deg;
    --kf-border-start: #8e00e7;
    --kf-border-end: #420067;
    --kf-border-width: 2px;
    
    /* Glow */
    --kf-shadow-color: rgba(139, 0, 255, 0.4);
    --kf-shadow-size: 10px;
    --kf-shadow: 0 0 var(--kf-shadow-size) var(--kf-shadow-color);

    /* Dash */
    --kf-dash-color: #8e00e7;
    
    /* Colors */
    --kf-attacker-color: #ffffff;
    --kf-victim-color: #ffffff;
    --kf-icon-color: #ffffff;
}

/* --- Capture Wrapper --- */
#capture-area-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end; 
    padding: 10px; 
    box-sizing: content-box;
    background-color: transparent;
}

#killfeed-container {
    display: flex;
    flex-direction: column;
    gap: 1px; 
    align-items: flex-end;
}

/* --- Row Wrapper --- */
.kill-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: move;
    transition: opacity 0.2s;
}

.kill-row.dragging { opacity: 0.5; }

/* --- Multikill Dashes --- */
.multikill-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding-right: 6px;
    min-width: 10px;
}

.multikill-dash {
    width: 4px;
    height: 4px;
    background-color: var(--kf-dash-color);
    border-radius: 1px;
    margin: 1px 0;
    box-shadow: 0 0 4px var(--kf-dash-color);
}

/* --- Kill Entry Bar (Full Gradient Border) --- */
.kill-entry {
    display: flex;
    align-items: center;
    
    width: var(--kf-width);
    height: var(--kf-height);
    
    /* Triple Layer Background: Image > Color > Gradient Border */
    background: 
        var(--kf-bg-image) center/cover no-repeat padding-box,
        linear-gradient(var(--kf-bg-color), var(--kf-bg-color)) padding-box,
        linear-gradient(var(--kf-border-angle), var(--kf-border-start), var(--kf-border-end)) border-box;
    
    border: var(--kf-border-width) solid transparent;
    box-shadow: var(--kf-shadow);
    
    padding: 0 6px; 
    box-sizing: border-box; 
    overflow: hidden; 
    flex-shrink: 0; 
}

.kill-row.selected .kill-entry {
    /* Override the border color to show selection */
    background: 
        var(--kf-bg-image) center/cover no-repeat padding-box,
        linear-gradient(var(--kf-bg-color), var(--kf-bg-color)) padding-box,
        linear-gradient(to right, #fff, #fff) border-box;
}

/* --- Separator --- */
.kill-row.separator .kill-entry {
    display: flex;
    justify-content: center; 
    background: rgba(0, 0, 0, 0.5);
    border: none;
    box-shadow: none;
}
.kill-row.separator .kill-entry > *:not(.separator-text) { display: none; }
.separator-text {
    display: none; 
    font-family: 'Moonbeam', sans-serif; 
    color: #ffffff; 
    font-size: 22px; 
    font-weight: normal; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1; 
    pointer-events: none;
}
.kill-row.separator .separator-text { display: block; }

/* --- Layout Groups --- */
.attacker-info {
    display: flex;
    align-items: center;
    flex: 0.5; /* 33% space */
    min-width: 0; 
    justify-content: flex-end; 
}

.victim-info {
    display: flex;
    align-items: center;
    flex: 1.5; /* 66% space */
    min-width: 0; 
    overflow: hidden;
    justify-content: flex-start; 
}

.kill-info {
    flex-shrink: 0;
    margin: 0 4px;
    display: flex;
    align-items: center;
}

/* --- Agent Icons --- */
.kill-entry .agent-icon {
    height: 28px; 
    width: 56px; 
    object-fit: fill; 
    flex-shrink: 0;
    image-rendering: crisp-edges;
    pointer-events: none; 
}
.attacker-info .agent-icon { margin-right: 6px; }
.victim-info .agent-icon { margin-left: auto; transform: scaleX(-1); } 

/* --- Text --- */
.kill-entry .name {
    font-family: 'Moonbeam', sans-serif; 
    font-size: 22px; 
    font-weight: normal; 
    white-space: nowrap;
    text-overflow: clip;
    line-height: 1; 
    pointer-events: none; 
    display: block;
}

.attacker-info .attacker-name {
    margin-right: 4px;
    text-align: center;
    flex-grow: 1;
    color: var(--kf-attacker-color); /* Custom Color */
}

.victim-info .victim-name {
    margin-left: 4px; 
    flex-grow: 1; 
    text-align: center; 
    width: 100%; 
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--kf-victim-color); /* Custom Color */
}

/* --- Icons --- */
/* Hack to colorize icons: 
   1. brightness(0) makes them black.
   2. drop-shadow creates a colored clone 100px below.
   3. transform moves the whole thing up so the colored shadow sits where the original was.
   4. The original black icon is hidden by the container's overflow:hidden.
*/

.kill-info .weapon-icon {
    height: 19px; 
    width: auto; 
    /* Base reset */
    filter: brightness(0) drop-shadow(0 100px 0 var(--kf-icon-color)); 
    image-rendering: pixelated; 
    /* Move up to show shadow, and flip horizontal */
    transform: translateY(-100px) scaleX(-1); 
    pointer-events: none; 
    margin-right: 2px;
}

.kill-type-icons { display: flex; align-items: center; }

.kill-type-icons .kill-type-icon {
    height: 15px; 
    width: auto;
    margin: 0 1px; 
    /* Base reset */
    filter: brightness(0) drop-shadow(0 100px 0 var(--kf-icon-color));
    flex-shrink: 0;
    image-rendering: pixelated;
    pointer-events: none; 
    /* Move up to show shadow */
    transform: translateY(-100px);
}