
/* optional if you want smaller text */

.cff-results-item strong{
    margin-right:6px;
    font-size:12px;
    text-transform:uppercase;
}

/* === Results Name Colors (Added) === */

.cff-power-name{
    color:#ff5a5a;
}

.cff-mega-name{
    color:#ffd54a;
}

.cff-lucky-name{
    color:#65d66f;
}

.cff-pick-name{
    color:#7eb6ff;
}


/* === Shared Lottery Balls (Added) === */

.cff-result-balls,
.cff-ticker-balls{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}


/* bonus balls 

.cff-ball-power{
    background:radial-gradient(circle at 30% 25%, #f9b6b6, var(--powerRed) 65%, var(--powerRedDark));
    border-color:var(--powerRedDark);
    color:#000;
}

.cff-ball-mega{
    background:radial-gradient(circle at 30% 25%, #fff7c2, #f0b400 65%, #c98a00);
    border-color:#c98a00;
    color:#000;
}

.cff-ball-lucky{
    background:radial-gradient(circle at 30% 25%, #b8f7c5, #2e9f4d 65%, #166534);
    border-color:#166534;
    color:#000;
}
*/
.cff-power-name{
    color:#c62828;
    font-weight:900;
}

.cff-mega-red{
    color:#d32f2f;
    font-weight:900;
}


/* latest cards */

.cff-result-panel{
    border-radius:12px;
    padding:15px;
    margin-bottom:15px;
}

.cff-result-header{
    font-size:18px;
    font-weight:700;
    margin-bottom:10px;
}

.cff-results-date{

    display:block;

    font-size:11px;

    color:#888;

    margin-bottom:8px;

    font-family: Consolas,"Courier New", monospace;
}


/* === Results Ticker Working Layout === */

.cff-results-strip{
    width:100%;
    display:flex;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:12px;
    box-sizing:border-box;
    background:#f8f8f8;
    border:1px solid #d8d0be;
}


.cff-results-date{
    display:block;
    width:100%;
    font-family:Consolas,"Courier New",monospace;
    font-size:12px;
    color:#777;
    margin-bottom:8px;
}

.cff-results-line{
    display:grid;
    grid-template-columns:30px 1fr;
    gap:14px;
    align-items:center;
}

.cff-results-name{
    white-space:nowrap;
    font-weight:900;
}

.cff-results-item {
    flex: 0 0 auto;
    width: max-content;
    padding: 10px 12px;
	border: 1px double var(--cff-border);
	background:var(--panelBG);
}

.cff-results-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    margin-bottom: 8px;
    white-space: nowrap;
}

.cff-ticker-balls {
    display: flex;
    align-items: center;
    gap: 5px;
    width: max-content;
    flex: none;
}



.cff-power-name{
    color:#d62828;
}

.cff-mega-name .cff-mega-red{
    color:#d62828;
}

.cff-mega-name .cff-mega-blue{
    color:#1565c0;
}

.cff-lucky-name{
    color:#2e9f4d;
}

.cff-pick-name{
    color:#1565c0;
}

@media(max-width:600px){
    .cff-results-item{
        width:360px;
    }

    .cff-results-line{
        grid-template-columns:100px 1fr;
    }

    .cff-ball{
        width:28px;
        height:28px;
        font-size:12px;
    }
	
    .cff-results-grid{
        grid-template-columns:max-content;
        justify-content:center;
    }

    .cff-results-item{
        width:max-content;
        min-width:0;
        justify-self:center;
    }

    .cff-ticker-balls{
        width:max-content;
        justify-content:flex-start;
    }
	
}
/* === CFF Results Ticker Spacing Fix === */
/* Keeps lottery ticker items tight instead of spreading far apart. */

.cff-results-strip{
    justify-content:flex-start !important;
    align-items:center !important;
}

.cff-results-item{
    flex:0 0 auto !important;
    width:max-content !important;
    max-width:max-content !important;
}

.cff-results-line{
    display:grid !important;
    grid-template-columns:max-content max-content !important;
    gap:8px !important;
    align-items:center !important;
}

.cff-results-name{
    width:max-content !important;
    min-width:0 !important;
}

.cff-ticker-balls{
    width:max-content !important;
    flex:0 0 auto !important;
    justify-content:flex-start !important;
}