/* ==========================================================================
   Import Eurostile Unicase LT W04 Rg font
   ========================================================================== */
@font-face {
    font-family: "Eurostile Unicase LT W04 Rg";
    src: url("https://db.onlinewebfonts.com/t/e2aba67a61a20987775ae4a14c15dd81.eot");
    src: url("https://db.onlinewebfonts.com/t/e2aba67a61a20987775ae4a14c15dd81.eot?#iefix") format("embedded-opentype"),
         url("https://db.onlinewebfonts.com/t/e2aba67a61a20987775ae4a14c15dd81.woff2") format("woff2"),
         url("https://db.onlinewebfonts.com/t/e2aba67a61a20987775ae4a14c15dd81.woff") format("woff"),
         url("https://db.onlinewebfonts.com/t/e2aba67a61a20987775ae4a14c15dd81.ttf") format("truetype"),
         url("https://db.onlinewebfonts.com/t/e2aba67a61a20987775ae4a14c15dd81.svg#Eurostile Unicase LT W04 Rg") format("svg");
}

/* ==========================================================================
   General Body and HTML styles
   ========================================================================== */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Eurostile Unicase LT W04 Rg", monospace;
    background-color: #181818;
    color: #fff;
    text-transform: uppercase;
}

* {
    box-sizing: border-box;
}

/* ==========================================================================
   Main Container
   ========================================================================== */
#container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 20px;
    text-align: center;
}

/* ==========================================================================
   Logo and Headline
   ========================================================================== */
#logo-container {
    text-align: center;
    margin-top: 20px;
}

#logo {
    width: 180px; /* Increased logo size by 120% */
    height: auto;
    display: block;
    margin-bottom: 20px;
}

#latest-game-headline {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-top: 20px;
}

/* ==========================================================================
   Table Container
   ========================================================================== */
#table-container {
    width: 70%; /* Make the table 70% width of the screen */
    margin-top: 20px;
    padding-top: 20px; /* Add top padding to the table */
}

/* ==========================================================================
   Table Styling
   ========================================================================== */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 16px 10px;
    text-align: left;
    font-size: 16px;
    line-height: 200%; /* Increased line height by 200% */
}

th {
    background-color: #242424;
}

tr:nth-child(even) {
    background-color: #242424;
}

/* Column Alignment Adjustments */
th:nth-child(1), td:nth-child(1) {
    text-align: left;
    width: 55%; /* Name column takes up 60% */
}

th:nth-child(2), td:nth-child(2) {
    text-align: left;
    width: 25%; /* Date column takes up 20% */
}

th:nth-child(3), td:nth-child(3) {
    text-align: center;
    width: 20%; /* Time column takes up 20% */
}

td:nth-child(2) {
    text-align: center; /* Date column alignment */
}

/* ==========================================================================
   Game Table Specific Styling
   ========================================================================== */
#game-table {
    border: 2px solid #A657E7; 
    border-collapse: collapse;
}

#game-table thead {
    border: 2px solid #A657E7;
}

#game-table th {
    background-color: #242424;
    border-top: 2px solid #A657E7;
    border-bottom: 2px solid #A657E7;
}

#game-table th:nth-child(1),
#game-table td:nth-child(1) {
    width: 2%; /* Make the first column smaller */
    text-align: center;
    padding-right: 5px;
}

#game-table th:nth-child(2),
#game-table td:nth-child(2) {
    text-align: left;
    width: auto;
    font-size: 1rem; /* Default font size */
    max-width: 300px; /* Set a max width for the column */
    overflow: hidden; /* Hide overflow */
    white-space: nowrap; /* Prevent text wrapping */
    text-overflow: ellipsis; /* Show ellipsis for overflow text */
}

/* Center columns 3, 4, and 5 */
#game-table th:nth-child(3),
#game-table td:nth-child(3),
#game-table th:nth-child(4),
#game-table td:nth-child(4),
#game-table th:nth-child(5),
#game-table td:nth-child(5) {
    text-align: center;
    width: 15%;
}

/* Keep column 1 empty */
#game-table td:nth-child(1)::before {
    content: "";
}

/* Table Container Padding */
#game-table-container {
    padding-bottom: 50px;
    display: flex;
    justify-content: center; /* Center the table container */
    padding-top: 20px; /* Add top padding */
}

#game-table {
    width: 70vw; /* Set the table width to 70% of the viewport width */
    max-width: 100%; /* Ensure it does not exceed the full width */
    border: 2px solid #A657E7; 
    border-collapse: collapse;
}

.mvp-icon {
    width: 12px !important; /* Adjust size */
    height: 12px !important;
    margin-left: 5px;
    vertical-align: middle;
}

/* ==========================================================================
   Mobile Adjustments for Main Page
   ========================================================================== */
@media (max-width: 768px) {
    body, html {
        font-size: 12px; /* Reduce font size */
    }

    #container {
        padding: 10px; /* Remove padding from sides */
        display: block;
    }

    #logo-container {
        width: 100%;
        display: flex;
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
        flex-direction: column;
        text-align: center;
    }

    #logo {
        width: 140px; /* Adjusted for mobile */
        height: auto;
        display: block;
        margin: 0 auto; /* Ensures proper centering */
    }

    #latest-game-headline {
        font-size: 16px; /* Adjust font size */
        text-align: center;
        padding-top: 20px;
    }

    #table-container {
        width: 100%; /* Use full width */
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 20px; /* Add bottom padding */
    }

    table {
        width: 100%;
    }

    th, td {
        padding: 12px 5px; /* Reduce padding */
        font-size: 12px;
    }

    #game-table th:nth-child(2),
    #game-table td:nth-child(2) {
        text-align: left;
        width: auto;
        font-size: 1rem; /* Default font size */
        max-width: 0px; /* Set a max width for the column */
        overflow: hidden; /* Hide overflow */
        white-space: nowrap; /* Prevent text wrapping */
        text-overflow: ellipsis; /* Show ellipsis for overflow text */
    }
}

/* ==========================================================================
   Mobile Styles for Specific Game
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Ensure table uses full width and smaller font */
    #game-table {
        width: 100%;
        font-size: 12px;
        border-collapse: collapse;
    }

    #container {
        display: block;
    }

    /* Remove all borders except bottom stroke for headers */
    #game-table,
    #game-table th,
    #game-table thead {
        border: none !important;
    }

    /* Add bottom stroke to headers only */
    #game-table th {
        border-bottom: 2px solid #A657E7 !important; /* Purple bottom stroke */
        text-align: center;
        padding: 10px 10px; /* Apply 10px padding on sides */
    }

    /* Apply padding on sides for table data */
    #game-table td {
        padding: 10px 10px;
        text-align: center;
    }

    /* Center the game title under the logo */
    #game-title {
        font-size: 16px;
        text-align: center;
        margin-top: 20px;
        padding-top: 20px;
        width: 100%;
    }

    /* Replace "Kills" with "K" and "Deaths" with "D" */
    #game-table th:nth-child(3)::after,
    #game-table th:nth-child(4)::after,
	#game-table th:nth-child(5)::after {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        visibility: visible;
        text-indent: 0;
    }

    /* Hide original text and replace */
    #game-table th:nth-child(3) {
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-indent: -9999px;
    }

    #game-table th:nth-child(3)::after {
        content: "P";
    }

    #game-table th:nth-child(4) {
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-indent: -9999px;
    }

    #game-table th:nth-child(4)::after {
        content: "K";
    }

    #game-table th:nth-child(5) {
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-indent: -9999px;
    }

    #game-table th:nth-child(5)::after {
        content: "D";
    }	
}

/* ==========================================================================
   Team Score Container Styling (Repeated for Consistency)
   ========================================================================== */


/* Container */
#team-score-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: center;
    margin-top: 70px;
    margin-bottom: 50px;
    position: relative; /* to position bottom line */
}

/* ——— TOP SPLIT LINE ——— */

#team-score-container .top-line {
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #FFFFFF;
    opacity: 0.2;
}

/* ——— BOTTOM FULL-WIDTH LINE ——— */
#team-score-container::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;    /* same offset as top */
    height: 1px;
    background-color: #FFFFFF;
    opacity: 0.2;
}

/* ——— TEAM INFO PILLARS ——— */
.red-align {
    flex: 0 0 25%;
    text-align: left;
    padding-left: 10px;
    color: #FFFFFF;
    position: relative; /* for its own mini-line */
}
.red-align::before {
    content: '';
    position: absolute;
    top: 50%;
    height: 50%;
    width: 3px;
    background-color: #FF4949;
    transform: translateY(-50%);
}

.score-center {
    flex: 0 0 50%;
    text-align: center;
}

.blue-align {
    flex: 0 0 25%;
    text-align: right;
    padding-right: 10px;
    color: #FFFFFF;
    position: relative; /* for its own mini-line */
}
.blue-align::after {
    content: '';
    position: absolute;
    top: 50%;
    height: 50%;
    width: 3px;
    background-color: #34AFEB;
    transform: translateY(-50%);
}

/* ——— TEXT STYLES ——— */
.team-name-red {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    padding-left: 10px;
}
.team-name-blue {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    padding-right: 10px;
}
.score {
    font-size: 36px;
    font-weight: bold;
    margin: 0;
}




/* ==========================================================================
   Media Query for Desktop
   ========================================================================== */
@media (min-width: 768px) {
    #team-score-container {
        width: 70%; /* Normal width for desktop */
    }

    .team-name-red {
        font-size: 18px; /* 50% bigger text */
        padding-left: 30px;
    }

    .team-name-blue {
        font-size: 18px; /* 50% bigger text */
        padding-right: 30px;
    }

    .score {
        font-size: 43.2px; /* 20% bigger score (36px + 20% of 36px = 43.2px) */
    }
}

#game-date {
    font-size: 12px;
    background-color: #A657E7;
    padding: 5px 10px;
    display: inline-block;
    color: #fff;
}




    .team-circle {
      width: 6px;
      height: 6px;
      display: inline-block;
      border-radius: 50%;
      margin-right: 6px;
    }
    .red-team {
      background-color: #FF4949;
    }
    .blue-team {
      background-color: #34AFEB;
    }
    a {
      color: white;
      text-decoration: none;
    }