body {
    font-family: Arial, sans-serif;
    margin: 40px;
    background: #181a20;
    color: #e0e0e0;
}

h1 {
    text-align: center;
}

h2 {
    text-align: center;
}

#main-container {
    width: 80vw;
    max-width: 900px;
    margin: auto;
    display: flex;
    flex-direction: column;
    background: #23272f;
    padding: 32px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.info-box,
#chart-container,
#union-table-container {
    background: #1b1e25;
    border: 2px solid #353a45;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

#chart-container {
    margin-bottom: 0;
    padding: 18px;
    border-radius: 16px;
}

#progress-chart {
    width: 100% !important;
}

#union-table-container {
    margin-top: 0;
    border-radius: 16px;
    padding: 18px;
}

.union-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
    background: transparent;
    color: #e0e0e0;
    font-size: 0.92rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    border: none;
}

.union-table th,
.union-table td {
    padding: 7px 14px;
    text-align: left;
    font-weight: bold;
    background: transparent;
}

.union-table th {
    background: transparent;
    letter-spacing: 0.5px;
}

.union-table tbody tr:nth-child(even) {
    background: #22252c;
}


.union-table tbody tr:hover {
    background: #282c34;
}

.union-table th.right-align,
.union-table td.right-align {
    text-align: right;
}

.union-table th.center-align,
.union-table td.center-align {
    text-align: center;
}

.damage-badge {
    display: inline;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: #43ea7f;
    text-align: right;
    font-size: 1.08em;
    box-shadow: none;
    border: none;
}

.neutral-badge {
    display: inline-block;
    min-width: 60px;
    padding: 2px 10px;
    border-radius: 6px;
    background: #3a3a44;
    color: #e0e0e0;
    text-align: center;
}

.region-badge {
    display: inline-block;
    min-width: 60px;
    padding: 2px 10px;
    border-radius: 6px;
    color: #e0e0e0;
    text-align: center;
    font-size: 1em;
    border: none;
    background: #3a3a44;
}

.region-global {
    background: #3a3a44;
}

.region-na {
    background: #3a3a44;
}

.group-badge {
    display: inline;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: #fff;
    text-align: center;
    font-size: 1em;
    border: none;
}

.group-day-1,
.group-day-2,
.group-day-3 {
    background: none;
    color: #fff;
}

.info-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #1b1e25;
    border: 2px solid #353a45;
    border-radius: 8px;
    padding: 18px 0 10px 0;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

.info-box h2 {
    margin: 0 0 6px 0;
    font-size: 1.35rem;
    font-weight: bold;
    color: #e0e0e0;
}

.last-updated {
    font-size: 0.98rem;
    color: #b7c7d7;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.union-table input[type="checkbox"] {
    accent-color: #b7c7d7 !important;
}

.union-table input[type="checkbox"]:not(:checked) {
    opacity: 0.45;
}

.table-checkbox {
    width: 16px;
    height: 16px;
    accent-color: #b7c7d7 !important;
    cursor: pointer;
}

.boss-green {
    color: #43ea7f;
}

.boss-yellow {
    color: #f7b731;
}

.boss-red {
    color: #ff4f4f;
}

.hits-green {
    color: #43ea7f;
}