:root {
    /* Dimensions */
    --height: 60px;
    --width-names: 100px;
    --width-scores: 30px;
    --width-shots: 30px;
    --width-clock: 60px;

    /* Colors are now set via PHP injection in overlay.php */
}

body {
    margin: 0;
    padding: 10px;
    /* Reduced padding */
    font-family: 'Montserrat', sans-serif;
    background-color: transparent;
    /* Transparent for OBS */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Align to Left */
    gap: 20px;
    overflow: hidden;
    /* Hide scrollbars */
}

#overlay-container {
    display: flex;
    height: var(--height);
    transform: scale(1.5);
    transform-origin: top left;
    /* Scale from top-left */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Sections */
.section {
    display: flex;
    flex-direction: column;
}

/* Names */
.names-col {
    width: var(--width-names);
}

.score-col {
    width: var(--width-scores);
}

.shots-col {
    width: var(--width-shots);
}

/* Clock Column - Split Vertical - Enforced Black/White */
.clock-col {
    width: var(--width-clock);
    background-color: #000000;
    color: #ffffff;
    justify-content: center;
    align-items: center;
    font-family: 'Azeret Mono', monospace;
    font-size: 14px;
    font-weight: bold;
}

.clock-cell {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

#clock-timer {
    align-items: flex-end;
    padding-bottom: 2px;
    font-weight: bold;
}

#clock-period {
    align-items: flex-start;
    padding-top: 2px;
    font-weight: normal;
}

/* Cells */
.cell {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50%;
    font-weight: bold;
}

.name-cell.away {
    background-color: var(--bg-away-name);
    color: var(--text-away-name);
    font-size: 15px;
}

.name-cell.home {
    background-color: var(--bg-home-name);
    color: var(--text-home-name);
    font-size: 15px;
}

/* Ensure Logo and Name sit nicely */
.name-cell {
    display: flex;
    justify-content: flex-start;
    /* Align to left/logo */
    align-items: center;
    flex-direction: row;
    gap: 6px;
    /* Space between logo and text */
    padding-left: 8px;
    /* Gap before logo */
    padding-right: 10px;
    /* Gap AFTER name text */
}

.team-logo {
    height: 80%;
    /* Fixed height relative to cell */
    width: 35px;
    /* Fixed width to reserve space */
    object-fit: contain;
    object-position: center;
    /* Center the graphic in the reserved space */
}

.score-cell.away {
    background-color: var(--bg-away-score);
    color: var(--text-away-score);
    font-size: 18px;
}

.score-cell.home {
    background-color: var(--bg-home-score);
    color: var(--text-home-score);
    font-size: 18px;
}

/* Shots - 3 vertical blocks: Away (Top), Label (Mid), Home (Bot) */
.shots-col {
    width: var(--width-shots);
    display: flex;
    flex-direction: column;
}

.shots-cell {
    width: 100%;
    flex: 1;
    /* Grow to fill space */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    font-weight: bold;
}

.shots-cell.away {
    background-color: var(--bg-away-shots);
    color: var(--text-away-shots);
    align-items: flex-end;
    padding-bottom: 2px;
}

.shots-cell.home {
    background-color: var(--bg-home-shots);
    color: var(--text-home-shots);
    align-items: flex-start;
    padding-top: 2px;
}

.shots-label {
    height: 14px;
    /* Small strip */
    background-color: #000000;
    color: #ffffff;
    font-size: 9px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    z-index: 10;
}