:root {
    /* Brand Colors */
    --brand-primary: #1846A0;         /* Example: Primary brand color */
    --brand-secondary: #004d40;      /* Example: Secondary brand color (if applicable - you had #004d40 commented out) */

    /* Text Colors */
    --text-primary: #1a237e;          /* Example: Primary text color (like for bowler label) */
    --text-primary-2: #1a237e;         /* Example: Primary text color (like for bowler label) */
    --text-secondary: #1a237e;        /* Example: Secondary text color (like for overs, batsman runs-balls) */
    --text-light: #ccc;              /* Example: Light text color (like for match labels) */
    --text-white: white;

    /* Background Colors */
    --bg-white: whitesmoke;          /* Example: Whitesmoke background */
    --bg-transparent: transparent;    /* Example: Transparent background */
    --bg-light-gray: #ddd;           /* Example: Light gray background (like ball indicator default) */
    --bg-green: green;       /* Example: Green for runs */
    --bg-red: #ED2939;            /* Example: Red for wickets */
    --bg-orange: orange;         /* Example: Orange for wides */
    --bg-yellow: yellow;        /* Example: Yellow for no-balls */
    --bg-plum: plum;          /* Example: Plum for leg-byes */
    --bg-pink: pink;             /* Example: Pink for byes */
    --bg-light-blue: lightblue;             /* Example: lightblue for 4 */

    /* Border Colors */
    --border-light-gray: #ccc;        /* Example: Light gray border */
    --border-medium-gray: #ddd;       /* Example: Medium gray border */
    --border-white: #fff;            /* Example: White border */
    --border-primary: #1846A0;            /* Example: Primary border */

    /* Other Colors */
    --shadow-color: rgba(0,0,0,0.1); /* Example: Shadow color */
    --number-color: #007bff;         /* Example: Color for numbers (if you want a default - you commented this out) */
}

body {
    margin: 0; /* Remove default body margins */
}

.overlay {
    text-transform: uppercase;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-transparent); /* Use variable for transparent background */
    z-index: 100; /* Ensure overlay is on top */
    display: flex;
    flex-direction: column; /* Align items vertically */
    align-items: center; /* Center horizontally */
    justify-content: flex-end; /* THIS IS KEY: Push content to the bottom */
}

.overlay-image {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 150px; /* Adjust image size as needed */
    height: auto;
    z-index: 101; /* Ensure image is above other elements */
}

.team-logo {
    height: 55px;
    width: 55px;
}

.batting-team-info,
.bowling-team-info {
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 8px 8px;
    border: 3px solid var(--border-primary);
    min-width: 150px;
    background: radial-gradient( gainsboro, white);
}

.batting-team-info {
    border-radius: 0 400px 400px 0;
}

.bowling-team-info {
    border-radius: 400px 0 0 400px;
}
.score-overlay {
    color: var(--brand-primary);         /* Use variable for primary brand color */
    font-family: monospace;
    font-size: 18px;
    font-weight: normal;
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 0 15px;
    border-radius: 400px;
    box-shadow: 0 4px 8px var(--shadow-color); /* Use variable for shadow color */
    overflow: visible;
    justify-content: center;
    white-space: nowrap; /*prevent the score overlay from wrapping*/
    background: linear-gradient(to top, gainsboro, whitesmoke);
}

.scorecard-pill {
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 8px 16px; /* Adjust padding as needed */
    background-color: var(--text-primary); /* Dark blue color */
    color: var(--text-white); /* White text for contrast */
    border-radius: 30px; /* Adjust radius for pill shape */
    font-size: 14px; /* Adjust font size as needed */
    min-width: 150px;
}

.team-name {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 2px;
}

.score-and-overs {
    display: flex;
    align-items: baseline;
}

.score {
    font-size: 20px;
}

.wickets {
    font-size: 20px;
    color: var(--text-white); /* White text for contrast */
}

.overs {
    font-size: 15px;
    color: var(--text-white); /* White text for contrast */
    margin-left: 5px;
}

.batsman-info,
.bowler-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    padding: 0 15px;
}

.batsman-row,
.bowler-row {
    margin-bottom: 2px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
}

.batsman-name,
.bowler-name {
    display: inline-flex;
    white-space: nowrap;
}

.batsman-runs-balls,
.bowler-figures {
    display: inline-flex;
    font-size: 15px;
    color: var(--text-secondary);
    padding-left: 10px;
}

/* Ball by ball styles */
.ball-by-ball-container {
    display: flex;
    align-items: center;
}

.ball-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--bg-light-gray);  /* Use variable for light gray background */
    color: black;
    margin-right: 5px;
    border: 2px solid var(--border-primary);    /* Use variable for white border */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
}

.ball-indicator.run-1, .ball-indicator.run-2, .ball-indicator.run-3, .ball-indicator.run-5 {
    background-color: var(--border-primary);
    color: var(--text-white);
}

.ball-indicator.run-4 {
    background-color: var(--bg-green);
    border-color: var(--bg-green);
    color: var(--text-white);
}

.ball-indicator.run-6 {
    background-color: var(--bg-green);
    border-color: var(--bg-green);
    color: var(--text-white);
}

.ball-indicator.wicket {
    background-color: var(--bg-red);
    border-color: var(--bg-red);
    color: var(--text-white);
}

.ball-indicator.wide {
    background-color: var(--bg-orange);
    border-color: var(--bg-orange);
    color: black;
    font-size: 11px;
}

.ball-indicator.no-ball {
    background-color: var(--bg-pink);
    border-color: var(--bg-pink);
    color: black;
    font-size: 11px;
}

.ball-indicator.leg-bye {
    background-color: var(--bg-plum);
    border-color: var(--bg-plum);
    color: black;
    font-size: 11px;
}

.ball-indicator.bye {
    background-color: var(--bg-yellow);
    border-color: var(--bg-yellow);
    color: black;
    font-size: 11px;
}

.ball-indicator.dot {
    width: 24px;
    height: 24px;
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0;
}

.ball-indicator.dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: var(--border-primary); /* Inner bullseye dot color */
    border-radius: 50%;
}

.ball-indicator.ball-default {
    background-color: var(--bg-white);
    color: black;
}

.numberColorClass {
    font-weight: normal;
}

.spacer {
    padding-left: 40px;
}

#firstInnings {
    width: 100%;
    justify-content: space-between;
}

#secondInnings {
    justify-content: space-evenly;
    font-size: 18px;
    color: var(--text-primary-2);
    padding: 5px 15px 5px 15px ;
}

#result {
    justify-content: space-evenly;
    font-size: 24px;
    color: var(--text-primary-2);
    padding: 5px 15px 5px 15px ;
}