@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap');

/* 
  OBS Canvas size is assumed to be 1920x1080.
  We use exact pixel math derived from the spec:
  - Strip height: 162px (15% of 1080)
  - Bottom offset: 80px
  - Font size: 89px (55% of 162px)
*/

body {
    margin: 0;
    padding: 0;
    width: 1920px;
    height: 1080px;
    background-color: transparent; /* Transparent for OBS */
    overflow: hidden; /* Hide anything outside canvas */
    font-family: 'Consolas', 'Courier New', 'Lucida Console', 'Roboto Mono', monospace;
}

.ticker-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1920px;
    height: 162px;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0; /* Starts hidden for fade-in */
}

/* 1-second fade-in animation */
.fade-in {
    animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.scroller {
    display: flex;
    height: 100%;
    align-items: center;
    /* We manage the translation in JS via requestAnimationFrame for smooth infinite scrolling */
    will-change: transform;
}

.content-block {
    display: inline-flex;
    align-items: center;
    height: 100%;
    font-size: 45px;
    color: #ffffff; /* Default white */
    line-height: 1;
}

/* Base styles for the rendered spans */
.ticker-item {
    display: inline-block;
    vertical-align: middle;
}

.color-white {
    color: #ffffff;
}

.color-green {
    color: #00dc64;
}

.color-red {
    color: #ff4141;
}

.color-gray {
    color: #a0a0a0;
}