body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    user-select: none;
    outline: none;
}

table {
    margin: 20px auto;
    margin-bottom: 20px auto;
    border-collapse: collapse;
    width: 90%;
    max-width: 500px;
    border: 2px solid #ddd; /* Outer border for the entire table */
}

/* Thicker border between the header and data */
thead {
    border-bottom: 2px solid #ddd; /* Thicker border under the header */
}

th, td {
    border: 1px solid #ddd;
    text-align: center;
}

th {
    background-color: #f4f4f4;
    border: none; /* No border for the header */
    padding: 10px;
}

/* Second row for scores */
thead tr:nth-child(2) th {
    background-color: #f4f4f4;
    font-size: 150%;
    font-weight: normal;
}

/* Table Data (td) Styling */
td {
    border: 1px solid #ddd;
    padding: 0;
    text-align: center;
    font-size: 1.2em;
    width: 80px; /* Fixed width */
    height: 80px; /* Fixed height */
    box-sizing: border-box;
}
  
/* Images inside td */
td img {
    max-width: 100%; 
    max-height: 100%;
    display: block;
    margin: auto;
    width: auto;
    height: auto;
}

th:first-child, th:last-child {
    width: 150px;        /* Set a fixed width for Player 1 and Player 2 columns */
    max-width: 150px;    /* Prevent the columns from expanding */
    overflow: hidden;    /* Hide any overflowed text */
    text-overflow: ellipsis; /* Show ellipsis when text is too long */
    white-space: nowrap; /* Prevent text from wrapping */
}

/* Disable hover and pointer for the middle column */
td:nth-child(2) {
    cursor: default; /* Normal arrow cursor */
    width: 25%; /* Adjust width to make it smaller */
    font-size: 1.3em; /
}

/* Apply flexbox only to the middle column header */
th#undo-btn-container {
    display: flex;              /* Enable flexbox */
    justify-content: center;    /* Center horizontally */
    align-items: flex-start;     /* Align items at the top of the header */
}

/* Ensure undo image itself looks correct */
#undo-btn {
    cursor: pointer;           /* Show pointer cursor when hovering */
    width: 40px;                /* Set the image size */
    height: auto;               /* Maintain aspect ratio */
    position: relative;          /* Position the image relatively */
    top: 20px;                   /* Move it down by 10px (adjust as needed) */
}

@media (max-width: 600px) {
    html, body {
        height: 100%;            /* Ensure the HTML and body take up full height */
        margin: 0;
        padding: 0;
    }
    
    body {
        font-family: Arial, sans-serif;
        text-align: center;
        margin: 0;
        padding: 0;
        user-select: none;
        outline: none;
    }
    
    table {
        margin: 5px auto;
        margin-bottom: 5px auto;
        border-collapse: collapse;
        width: 95%;
        height: 90vh;
        max-width: 95%;
        border: 2px solid #ddd; /* Outer border for the entire table */
        border-collapse: collapse;
    }
    
    /* Thicker border between the header and data */
    thead {
        border-bottom: 2px solid #ddd; /* Thicker border under the header */
    }
    
    th, td {
        border: 1px solid #ddd;
        text-align: center;
        padding: 4px;
        font-size: 1.2em;
    }
    
    th {
        background-color: #f4f4f4;
        border: none; /* No border for the header */
        padding: 10px;
    }
    
    img {
        max-width: 80%;
        max-height: 80%;
        display: block;
        margin: auto;
    } 
    
    /* Second row for scores */
    thead tr:nth-child(2) th {
        background-color: #f4f4f4;
        font-size: 150%;
        font-weight: normal;
    }
    
    /* Table Data (td) Styling */
    td {
        border: 1px solid #ddd;
        text-align: center;
        font-size: 1.2em;
        width: 80px; /* Fixed width */
        height: 80px; /* Fixed height */
        box-sizing: border-box;
    }
      
    /* Images inside td */
    td img {
        max-width: 100%; 
        max-height: 100%;
        display: block;
        margin: auto;
        width: auto;
        height: auto;
        pointer-events: none; /* Disable dragging of tally images */
    }

    th:first-child, th:last-child {
        width: 150px;        /* Set a fixed width for Player 1 and Player 2 columns */
        max-width: 150px;    /* Prevent the columns from expanding */
        overflow: hidden;    /* Hide any overflowed text */
        text-overflow: ellipsis; /* Show ellipsis when text is too long */
        white-space: nowrap; /* Prevent text from wrapping */
    }

    /* Disable hover and pointer for the middle column */
    td:nth-child(2) {
        cursor: default; /* Normal arrow cursor */
        width: 25%; /* Adjust width to make it smaller */
        font-size: 1.3em; /* Optional: Reduce font size to fit the smaller column */
    }
    
    /* Apply flexbox only to the middle column header */
    th#undo-btn-container {
        display: flex;              /* Enable flexbox */
        justify-content: center;    /* Center horizontally */
        align-items: flex-start;     /* Align items at the top of the header */
        height: 100%;               /* Ensure the cell takes full height */
    }
    
    /* Ensure undo image itself looks correct */
    #undo-btn {
        cursor: pointer;           /* Show pointer cursor when hovering */
        width: 40px;                /* Set the image size */
        height: auto;               /* Maintain aspect ratio */
        position: relative;          /* Position the image relatively */
        top: 20px;                   /* Move it down by 10px (adjust as needed) */
    }
}