.eventFeedContainer {
width: 100%;
height: 160px;
padding: 0 20px;
background: transparent;
border: 2px solid #fbbf24;
border-radius: 12px;
font-size: 15px;
display: flex;
flex-direction: row;
gap: 12px;
align-items: center;
justify-content: flex-end;
pointer-events: none;
position: relative;
}
.eventPill {
display: flex;
align-items: center;
gap: 8px;
background: #23244aee;
border-radius: 8px;
padding: 4px 14px;
transition: background 0.3s, opacity 0.7s;
max-width: 420px;
min-width: 120px;
opacity: 1;
pointer-events: auto;
color: #fff;
font-weight: 500;
box-shadow: 0 2px 8px #0002;
font-size: 15px;
white-space: pre-line;
word-break: break-word;
}
.eventFeedHighlight {
animation: eventFeedPop 0.7s cubic-bezier(0.22, 1, 0.36, 1);
opacity: 1;
background: #fbbf2433 !important;
}
.eventFeedFadeout {
opacity: 0;
transition: opacity 0.7s;
}
@keyframes eventFeedPop {
0% { background: #fbbf24cc; transform: scale(0.95); }
60% { background: #fbbf24cc; transform: scale(1.05); }
100% { background: #23244aee; transform: scale(1); }
}
.marqueeContainer {
width: 100%;
height: 48px;
background: transparent;
/* border: 2px solid #fbbf24; */
border-radius: 12px;
font-size: 15px;
display: flex;
align-items: center;
overflow: hidden;
position: relative;
pointer-events: none;
padding-right: 0;
}
.marquee {
display: flex;
align-items: center;
white-space: nowrap;
animation: marquee-scroll 48s linear infinite;
pointer-events: auto;
}
.marqueeEvent {
display: inline-flex;
align-items: center;
gap: 8px;
background: none;
color: #fff;
font-weight: 500;
font-size: 15px;
margin-right: 0;
white-space: nowrap;
}
.marqueeDivider {
color: #fbbf24;
font-size: 18px;
margin: 0 16px;
font-weight: bold;
}
@keyframes marquee-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
