/* characterTable.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    text-align: center;
}

.container {
    max-width: 1200px;
    margin: 20px auto;
    border-radius: 15px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

th, td {
    padding: 0px;
    text-align: center;
    font-size: 10px;
    max-height: 32px; /* Applies to all cells by default */
    height: 32px; /* Applies to all cells by default */
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid #ddd;
}
th {
    background-color: #f2f2f2;
    font-size: 10px;
}

/* Ensure the first row has a specific height */
table tr:first-child td {
    height: 20px;
    max-height: 20px;
}

/* Override height limits for sprite cells */
td.sprite-cell {
    max-height: 140px !important;
    height: 140px !important;
    padding: 0; /* Remove any padding */
}
td.subtable-cell1 {
    max-height: 17px !important;
    height: 17px !important;
    padding: 0; /* Remove any padding */
    font-size: 9px;
    font-weight: bold;
    background-color: #A0A0A0;
    color: #000;
}
td.subtable-cell2 {
    max-height: 17px !important;
    height: 17px !important;
    padding: 0; /* Remove any padding */
}

td.sprite-cell img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensures the image covers the entire cell */
    display: block;
    margin: 0;
}

.download-cell, .small-cell, .merged-cell {
    font-size: 9px;
    border: 1px solid #ddd;
}

.rating-cell {
    font-size: 9px;
    border: 1px solid #ddd;
}

.darker-cell, .darkest-cell {
    font-size: 10px;
    font-weight: bold;
    background-color: #A0A0A0;
    color: #000;
}

.darkest-cell {
    background-color: #404040;
    color: #fff;
}


.CellNo {
    color: #400000;
    background-color: #FFAAAA; /* For browsers that do not support gradients */
    font-weight: bold;
}


.CellYes, .CellYesPartially {
    color: #004000;
    background-color: #77FF77; /* For browsers that do not support gradients */
    font-weight: bold;
}


.CellYesOptional {
    color: #004000;
    background-color: #77FF77; /* For browsers that do not support gradients */
    font-weight: bold;
    text-shadow: -1px -1px 0 #FABEA4, 1px -1px 0 #FABE04, -1px 1px 0 #FABE04, 1px 1px 0 #FABE04;
}


.CellPotSClassic {
    color: #000;
    text-shadow: -1px -1px 0 #888, 1px -1px 0 #888, -1px 1px 0 #888, 1px 1px 0 #888;
    background-color: #FFA538; /* For browsers that do not support gradients */
    background-image: linear-gradient(
    to top right,
    #FFFFFF 0%,
    #FFEA79 30%,
    #DE7514 60%,
    #690000 90%
  );
}

.CellPotS2022 {
    color: #000;
    text-shadow: -1px -1px 0 #888, 1px -1px 0 #888, -1px 1px 0 #888, 1px 1px 0 #888;
    background-color: #FA8100; /* For browsers that do not support gradients */
    background-image: linear-gradient(
    to top right,
    #FFFFFF 0%,
    #FFC204 30%,
    #FA8100 60%,
    #CA3000 90%
  );
}

.CellInfinitePotSClassic {
    color: #000;
    text-shadow: -1px -1px 0 #FABE84, 1px -1px 0 #FABE84, -1px 1px 0 #FABE84, 1px 1px 0 #FABE84;
    font-weight: bold;
    background-color: #7847ea; /* For browsers that do not support gradients */
    background-image: linear-gradient(
    to top right,
    #FFFFFF 0%,
    #FFEA79 20%,
    #DE7514 30%,
    #59CAFF 40%,
    #FFFFFF 50%,
    #59CAFF 60%,
    #BE20E6 80%,
    #300069 100%
  );
}


.CellInfinite {
    color: #000;
    text-shadow: -1px -1px 0 #999, 1px -1px 0 #999, -1px 1px 0 #999, 1px 1px 0 #999;
    font-weight: bold;
    background-color: #7847ea; /* For browsers that do not support gradients */
    background-image: linear-gradient(
    to top right,
    #FFFFFF 0%,
    #FFEA79 20%,
    #DE7514 30%,
    #59CAFF 40%,
    #FFFFFF 50%,
    #59CAFF 60%,
    #BE20E6 80%,
    #300069 100%
  );
}


.CellPotSClassicInfinite2022 {
    color: #000;
    text-shadow: -1px -1px 0 #FABE84, 1px -1px 0 #FABE84, -1px 1px 0 #FABE84, 1px 1px 0 #FABE84;
    font-weight: bold;
    font-size: 8px;
    background-color: #7847ea; /* For browsers that do not support gradients */
    background-image: linear-gradient(
    to top right,
    #FFFFFF 0%,
    #FFEA79 20%,
    #DE7514 30%,
    #59CAFF 40%,
    #FFFFFF 50%,
    #59CAFF 60%,
    #BE20E6 75%,
    #FFB200 90%
  );
}

/* Ensure sprite image is properly sized */
img {
        max-width: 120px;
        max-height: 140px;
        object-fit: contain;
        display: block;
        margin: 0 auto;
        align: center;
    }

.character-container {
    max-height: 160px;
    overflow: hidden;
}

.small-text {
    font-size: 10px;
}   

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Add horizontal lines between rows */
tr {
    border-bottom: 1px solid #ddd;
}

.character-row {
    border-bottom: 6px solid #ddd;
}

/* Movelist button styles */
.movelist-button, .reviews-button {
    background-color: #ffd700; /* Shiny golden color */
    color: #000; /* Black text */
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 10px;
    font-weight: bold;
    outline: none;
}

.movelist-button:hover, .reviews-button:hover {
    text-decoration: underline;
    background-color: #ffe855;
}

/* Movelist and reviews containers */
.movelist-container, .reviews-container {
    display: none;
    margin-top: 10px;
}

.movelist-content, .reviews-content {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    font-size: 10px;
    line-height: 1.5;
    overflow-x: auto;
}

.movelist-table {
    width: 100%;
    border-collapse: collapse;
}

.movelist-table td {
    padding: 5px;
    border: 1px solid #ccc;
}

.dark-cell {
    background-color: #333;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
}

.gray-cell1 {
    background-color: #eee;
    color: #000;
    text-align: right;
    font-weight: bold;
    font-size: 20px;
}

.gray-cell2, .gray-cell3 {
    background-color: #eee;
    color: #000;
    text-align: left;
}

.gray-cell2 {
    font-weight: bold;
    font-size: 20px;
}

.gray-cell3 {
    font-size: 16px;
}

.white-cell {
    position: relative;
    background-color: #fff;
    color: #000;
    text-align: left;
    font-weight: bold;
    font-size: 20px;
    vertical-align: middle;
}

.white-cell img {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

#searchBar {
    margin: 20px 0;
}

#searchInput {
    padding: 10px;
    font-size: 16px;
}

#searchButton {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

/* Loading Indicator Styles */
#loadingIndicator {
    display: flex; /* Use flex to easily center content */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed; /* Full page overlay */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(245, 245, 245, 0.95); /* Semi-transparent background matching body bg */
    z-index: 9999; /* Ensure it's on top of everything */
    text-align: center;
}

.spinner {
    border: 8px solid #e0e0e0; /* Lighter grey for the track */
    border-top: 8px solid #007bff; /* Blue for the spinner - adjust color as you like */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1.2s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#loadingIndicator p {
    font-size: 18px;
    color: #333;
    font-weight: bold;
}