@font-face {
    font-family: 'Radikal Bold';
    src: url('Assets/Font/radikal-bold.otf') format('opentype'),
         url('Assets/Font/NOOTYPE%20-%20RADIKAL%20BOLD.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Radikal Bold';
    src: url('Assets/Font/radikal-bold.otf') format('opentype'),
         url('Assets/Font/NOOTYPE%20-%20RADIKAL%20BOLD.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Radikal';
    src: url('Assets/Font/radikal-bold.otf') format('opentype'),
         url('Assets/Font/NOOTYPE%20-%20RADIKAL%20BOLD.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Radikal';
    src: url('Assets/Font/radikal-bold.otf') format('opentype'),
         url('Assets/Font/NOOTYPE%20-%20RADIKAL%20BOLD.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Radikal';
    src: url('Assets/Font/radikal-bold.otf') format('opentype'),
         url('Assets/Font/NOOTYPE%20-%20RADIKAL%20BOLD.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: transparent;
    font-family: 'Radikal Bold', 'Radikal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.overlay-container {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: transparent;
}

/* Background Template Image (1920x1080) */
.overlay-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    pointer-events: none;
    z-index: 1;
}

/* ================== BLUE SIDE (LEFT) ================== */

/* White Logo Badge Container (X: 494..556, Y: 54..141) */
.badge-blue {
    position: absolute;
    left: 494px;
    top: 54px;
    width: 62px;
    height: 87px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    z-index: 2;
    overflow: hidden;
}

.badge-blue img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* School Name (Blue Top Bar: X: 574..828, Y: 58..110) */
.text-school-blue {
    position: absolute;
    left: 574px;
    top: 58px;
    width: 254px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Radikal Bold', 'Radikal', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #FFFFFF;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
    z-index: 2;
    letter-spacing: -0.01em;
}

/* Team Name (Yellow Bottom Bar: X: 574..810, Y: 112..144) */
.text-team-blue {
    position: absolute;
    left: 574px;
    top: 112px;
    width: 236px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Radikal Bold', 'Radikal', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
    z-index: 2;
    letter-spacing: -0.01em;
}

/* ================== RED SIDE (RIGHT) ================== */

/* School Name (Blue Top Bar: X: 1092..1346, Y: 58..110) */
.text-school-red {
    position: absolute;
    left: 1092px;
    top: 58px;
    width: 254px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Radikal Bold', 'Radikal', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #FFFFFF;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
    z-index: 2;
    letter-spacing: -0.01em;
}

/* Team Name (Yellow Bottom Bar: X: 1110..1346, Y: 112..144) */
.text-team-red {
    position: absolute;
    left: 1110px;
    top: 112px;
    width: 236px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Radikal Bold', 'Radikal', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
    z-index: 2;
    letter-spacing: -0.01em;
}

/* White Logo Badge Container (X: 1364..1427, Y: 54..141) */
.badge-red {
    position: absolute;
    left: 1364px;
    top: 54px;
    width: 63px;
    height: 87px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    z-index: 2;
    overflow: hidden;
}

.badge-red img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}