/* =========================================================
   THEME COLORS
   ========================================================= */

:root {
    color-scheme: light;

    --page-bg: #fef2f2;
    --card-bg: #fff8fa;
    --secondary-bg: #ffe4eb;
    --table-header-bg: #f7fafc;
    --hover-bg: #e2e8f0;

    --text-color: #374151;
    --muted-text: #6b7280;
    --warm-text: #5d4037;

    --border-color: #e2e8f0;
    --pink-border: #f4a2b8;
    --pink-separator: #fce4ec;

    --accent-color: #ec4899;
    --strong-accent: #d81b60;
    --accent-hover: #ad1457;

    --input-bg: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.1);

    --success-color: #16803c;
    --success-button: #4caf50;
    --report-button: #9c27b0;
    --logout-button: #8b572a;
    --admin-button: #333333;
    --danger-color: #c62828;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --page-bg: #121212;
    --card-bg: #1e1e1e;
    --secondary-bg: #292929;
    --table-header-bg: #292929;
    --hover-bg: #353535;

    --text-color: #eeeeee;
    --muted-text: #b5b5b5;
    --warm-text: #e0d5d1;

    --border-color: #444444;
    --pink-border: #553541;
    --pink-separator: #49313a;

    --accent-color: #ff70ad;
    --strong-accent: #ff4f98;
    --accent-hover: #ff75ad;

    --input-bg: #292929;
    --shadow-color: rgba(0, 0, 0, 0.45);

    --success-color: #69db8f;
    --success-button: #388e3c;
    --report-button: #7b1fa2;
    --logout-button: #6d4c41;
    --admin-button: #454545;
    --danger-color: #ff7b7b;
}


/* =========================================================
   GENERAL PAGE STYLES
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background-color: var(--page-bg);
}

body {
    min-height: 100vh;
    margin: 0;

    font-family: 'Inter', sans-serif;
    background-color: var(--page-bg);
    color: var(--text-color);

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
label,
span,
div {
    border-color: var(--border-color);
}

a {
    color: var(--accent-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
}


/* =========================================================
   TABLES
   ========================================================= */

table {
    color: var(--text-color);
    border-color: var(--border-color);
}

th,
td {
    padding: 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

th {
    font-weight: 600;
    background-color: var(--table-header-bg);
    color: var(--text-color);
}

tbody tr:hover {
    background-color: var(--hover-bg);
}

.sortable {
    cursor: pointer;
}

.sortable:hover {
    background-color: var(--hover-bg);
}


/* =========================================================
   FORM ELEMENTS
   ========================================================= */

input,
select,
textarea {
    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

input::placeholder,
textarea::placeholder {
    color: var(--muted-text);
}

button,
input,
select,
textarea {
    font: inherit;
}


/* =========================================================
   THEME TOGGLE
   ========================================================= */

.theme-toggle {
    padding: 0.6rem 0.9rem;

    background-color: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 5px var(--shadow-color);

    font-weight: 600;
    cursor: pointer;

    transition:
        background-color 0.15s ease,
        transform 0.1s ease;
}

.theme-toggle:hover {
    background-color: var(--hover-bg);
    transform: translateY(-1px);
}

.theme-toggle:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}


/* =========================================================
   MEMBER HOME LAYOUT
   ========================================================= */

.member-home-page {
    min-height: 100vh;
    background-color: var(--page-bg);
    color: var(--text-color);
}

.main-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 4rem 1rem 1rem;
}

.header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
    text-align: center;
}

.banner-image {
    display: block;
    width: 100%;
    max-width: 1200px;
    height: auto;
    border-radius: 8px;
}

.welcome-bar {
    width: 100%;
    margin-top: 10px;
    padding: 1rem;

    background-color: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--shadow-color);

    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
}

.layout-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sidebar {
    flex-shrink: 0;
    width: 100%;
}

.main-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.content-block {
    padding: 1.5rem;

    background-color: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 6px var(--shadow-color);
}

.content-block h1,
.content-block h2,
.content-block h3,
.content-block h4,
.content-block p,
.content-block label {
    color: inherit;
}

.section-heading {
    margin-top: 0;
    font-size: 1rem;
    font-weight: 600;
}

.api-label {
    display: inline-block;
    margin-bottom: 0.35rem;
    color: var(--muted-text);
    font-size: 0.75rem;
}

.info-icon {
    color: var(--strong-accent);
    cursor: help;
}

.api-input {
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 10px;

    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
}

.api-input::placeholder {
    color: var(--muted-text);
}

.section-divider {
    margin: 1rem 0;
    border: 0;
    border-top: 1px solid var(--border-color);
}


/* =========================================================
   NAVIGATION BUTTONS
   ========================================================= */

.nav-btn {
    display: block;
    width: 100%;
    margin-bottom: 0.75rem;
    padding: 0.75rem;

    background-color: var(--strong-accent);
    color: #ffffff;
    border: none;
    border-radius: 8px;

    font-weight: 700;
    text-align: center;
    text-decoration: none;

    cursor: pointer;

    transition:
        transform 0.1s ease,
        filter 0.15s ease;
}

.nav-btn:hover {
    color: #ffffff;
    text-decoration: none;
    filter: brightness(0.9);
    transform: translateY(-2px);
}

.nav-btn:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

.btn-set {
    background-color: var(--success-button);
}

.btn-report {
    background-color: var(--report-button);
}

.btn-admin {
    background-color: var(--admin-button);
}

.btn-logout {
    margin-top: 10px;
    padding: 0.4rem;
    background-color: var(--logout-button);
    font-size: 0.8rem;
}


/* =========================================================
   AUTHENTICATION STATUS
   ========================================================= */

#auth-status {
    min-height: 1.25rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
}

.status-success {
    color: var(--success-color);
}

.status-error {
    color: var(--danger-color);
}

.status-working {
    color: var(--text-color);
}


/* =========================================================
   DASHBOARD / MAIN.PHP
   ========================================================= */

.dashboard-sections {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.block-heading {
    margin-top: 0;
}

.banker-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.banker-list a {
    display: block;
    line-height: 0;
}

.banker-signature {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.war-timers,
#timers-container {
    padding: 0.75rem;

    background-color: var(--secondary-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;

    font-family: monospace;
    font-size: 1.25rem;
}

.timer-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 8px;
    padding-bottom: 4px;

    color: var(--text-color);
    border-bottom: 1px solid var(--pink-separator);
}

.timer-row:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.timer-label,
.timer-name {
    color: var(--strong-accent);
}

.timer-countdown,
.timer-value {
    color: var(--text-color);
    text-align: right;
}

.timer-expired,
.timer-error {
    color: var(--danger-color);
}

.timer-message {
    margin: 0;
    color: var(--text-color);
}


/* =========================================================
   OLDER SHARED LAYOUT CLASSES
   ========================================================= */

.container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.text-lg {
    flex-grow: 1;
    margin: 0;
    text-align: center;
}

.logout-button {
    margin-left: auto;
}


/* =========================================================
   LOADER
   ========================================================= */

.loader {
    border-top-color: var(--accent-color);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   UTILITIES
   ========================================================= */

.muted-text {
    color: var(--muted-text);
}

[hidden] {
    display: none !important;
}


/* =========================================================
   RESPONSIVE LAYOUT
   ========================================================= */

@media (min-width: 768px) {
    .main-container {
        padding-top: 1rem;
    }

    .layout-grid {
        flex-direction: row;
        align-items: flex-start;
    }

    .sidebar {
        width: 260px;
    }
}

@media (max-width: 600px) {
    .timer-row {
        flex-direction: column;
        gap: 0.25rem;
    }

    .timer-value,
    .timer-countdown {
        text-align: left;
    }
}

/* =========================================================
   FACTION ACTIVITY STATS
   ========================================================= */

.activity-table-container {
    width: 100%;
    margin-top: 1rem;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 3px 6px var(--shadow-color);
}

.activity-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;

    background-color: var(--card-bg);
    color: var(--text-color);
}

.activity-table th {
    padding: 10px;

    background-color: var(--strong-accent);
    color: #ffffff;
    border-bottom: 1px solid var(--border-color);

    font-size: 0.75rem;
    text-align: center;
    white-space: nowrap;
}

.activity-table td {
    padding: 9px;

    background-color: var(--card-bg);
    color: var(--text-color);
    border-bottom: 1px solid var(--pink-separator);

    font-size: 0.85rem;
    text-align: center;
    white-space: nowrap;
}

.activity-table tbody tr:hover td {
    filter: brightness(0.97);
}

html[data-theme="dark"] .activity-table tbody tr:hover td {
    filter: brightness(1.15);
}

.activity-table .username-col {
    background-color: var(--secondary-bg);
    color: var(--text-color);
    font-weight: 700;
    text-align: left;
}

.activity-table .username-col a {
    color: inherit;
    text-decoration: none;
}

.activity-table .username-col a:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.activity-table .id-col {
    color: var(--muted-text);
    font-size: 0.75rem;
}

.activity-table .good {
    background-color: #dcfce7;
    color: #166534;
    font-weight: 700;
}

.activity-table .bad {
    background-color: #fee2e2;
    color: #991b1b;
    font-weight: 700;
}

.activity-table .great {
    background-color: #fcd34d;
    color: #78350f;
    font-weight: 700;
}

.activity-table .od-cell {
    background-color: #ffedd5;
    color: #c2410c;
    font-weight: 700;
}

html[data-theme="dark"] .activity-table .good {
    background-color: #163c26;
    color: #86efac;
}

html[data-theme="dark"] .activity-table .bad {
    background-color: #4c1d1d;
    color: #fca5a5;
}

html[data-theme="dark"] .activity-table .great {
    background-color: #553c0b;
    color: #fde68a;
}

html[data-theme="dark"] .activity-table .od-cell {
    background-color: #4a2612;
    color: #fdba74;
}

.activity-total-row td {
    background-color: var(--secondary-bg);
    color: var(--text-color);
    border-top: 2px solid var(--strong-accent);
    font-weight: 700;
}

.activity-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.activity-control-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.activity-control-label {
    color: var(--muted-text);
    font-size: 0.7rem;
    font-weight: 700;
}

.activity-select {
    min-width: 210px;
    padding: 0.65rem;

    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.activity-controls .nav-btn {
    width: auto;
    min-width: 120px;
    margin: 0;
}

.activity-summary {
    margin-top: 10px;
    color: var(--muted-text);
    font-size: 0.85rem;
    text-align: center;
}

.activity-empty-message {
    padding: 1rem;
    color: var(--muted-text);
    text-align: center;
}

@media (max-width: 600px) {
    .activity-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .activity-controls .nav-btn,
    .activity-select {
        width: 100%;
    }
}

/* =========================================================
   FACTION TRAINING GAINS
   ========================================================= */

.gains-quick-ranges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.gains-quick-ranges .nav-btn {
    width: auto;
    min-width: 145px;
    margin: 0;
}

.gains-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.gains-control-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gains-control-label {
    color: var(--muted-text);
    font-size: 0.7rem;
    font-weight: 700;
}

.gains-select {
    min-width: 210px;
    padding: 0.65rem;

    background-color: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.gains-controls .nav-btn {
    width: auto;
    min-width: 120px;
    margin: 0;
}

.gains-table-container {
    width: 100%;
    margin-top: 1rem;
    overflow-x: auto;

    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 3px 6px var(--shadow-color);
}

.gains-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;

    background-color: var(--card-bg);
    color: var(--text-color);
}

.gains-table th {
    padding: 12px;

    background-color: var(--strong-accent);
    color: #ffffff;
    border-bottom: 1px solid var(--border-color);

    font-size: 0.8rem;
    text-align: center;
    white-space: nowrap;
}

.gains-table td {
    padding: 10px;

    background-color: var(--card-bg);
    color: var(--text-color);
    border-bottom: 1px solid var(--pink-separator);

    font-size: 0.9rem;
    text-align: center;
    white-space: nowrap;
}

.gains-table tbody tr:hover td {
    filter: brightness(0.97);
}

html[data-theme="dark"] .gains-table tbody tr:hover td {
    filter: brightness(1.15);
}

.gains-table .username-col {
    background-color: var(--secondary-bg);
    color: var(--text-color);
    font-weight: 700;
    text-align: left;
}

.gains-table .energy-gain {
    color: var(--strong-accent);
    font-weight: 700;
}

.gains-table .train-gain {
    background-color: var(--secondary-bg);
    color: var(--text-color);
    font-weight: 700;
}

.gains-table .negative-gain {
    color: var(--danger-color);
}

.gains-table .positive-gain {
    color: var(--success-color);
}

.gains-period-summary {
    margin-top: 10px;
    color: var(--muted-text);
    font-size: 0.85rem;
    text-align: center;
}

.gains-empty-message {
    margin-top: 1rem;
    padding: 1rem;
    color: var(--muted-text);
    text-align: center;
}

@media (max-width: 600px) {
    .gains-quick-ranges,
    .gains-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .gains-quick-ranges .nav-btn,
    .gains-controls .nav-btn,
    .gains-select {
        width: 100%;
    }
}

/* =========================================================
   WAR ARCHIVE
   ========================================================= */

.war-archive-heading {
    margin-top: 0;
    padding-bottom: 0.5rem;

    color: var(--strong-accent);
    border-bottom: 2px solid var(--pink-border);
}

.war-archive-description {
    margin-bottom: 1.5rem;
    color: var(--muted-text);
    font-size: 0.9rem;
}

.war-archive-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.war-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    padding: 1rem;

    background-color: var(--secondary-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;

    transition:
        background-color 0.2s ease,
        transform 0.1s ease;
}

.war-list-item:hover {
    background-color: var(--hover-bg);
    transform: translateY(-1px);
}

.war-info {
    min-width: 0;
}

.war-info b {
    color: var(--text-color);
}

.war-info span {
    color: var(--muted-text);
    font-size: 0.85rem;
}

.war-info-archived {
    opacity: 0.75;
}

.view-link {
    flex-shrink: 0;
    padding: 0.5rem 1rem;

    background-color: var(--strong-accent);
    color: #ffffff;
    border-radius: 5px;

    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;

    transition:
        background-color 0.15s ease,
        transform 0.1s ease;
}

.view-link:hover {
    background-color: var(--accent-hover);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
}

.view-link:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .war-list-item {
        align-items: stretch;
        flex-direction: column;
    }

    .view-link {
        width: 100%;
        text-align: center;
    }
}

/* =========================================================
   FACTION MEMBERS REPORT
   ========================================================= */

.faction-report-heading {
    margin-top: 0;
    color: var(--strong-accent);
}

.faction-report-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1rem;
}

.report-refresh-button {
    padding: 10px 16px;

    background-color: var(--strong-accent);
    color: #ffffff;
    border: none;
    border-radius: 6px;

    font-weight: 700;
    cursor: pointer;

    transition:
        background-color 0.15s ease,
        transform 0.1s ease;
}

.report-refresh-button:hover:not(:disabled) {
    background-color: var(--accent-hover);
    transform: translateY(-1px);
}

.report-refresh-button:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

.report-refresh-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.report-refresh-status {
    color: var(--muted-text);
    font-size: 0.85rem;
}

.report-refresh-status.status-error {
    color: var(--danger-color);
}

.report-refresh-status.status-success {
    color: var(--success-color);
}

.report-table-container {
    width: 100%;
    overflow-x: auto;

    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 3px 6px var(--shadow-color);
}

.report-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;

    background-color: var(--card-bg);
    color: var(--text-color);
}

.report-table th {
    position: relative;
    padding: 12px;

    background-color: var(--strong-accent);
    color: #ffffff;
    border-bottom: 1px solid var(--border-color);

    font-size: 0.8rem;
    text-align: left;
    white-space: nowrap;
}

.report-table td {
    padding: 10px;

    background-color: var(--card-bg);
    color: var(--text-color);
    border-bottom: 1px solid var(--pink-separator);

    font-size: 0.9rem;
    white-space: nowrap;
}

.report-table tbody tr:hover td {
    background-color: var(--hover-bg);
}

.report-table .sortable {
    cursor: pointer;
    user-select: none;
}

.report-table .sortable::after {
    content: ' ↕';
    font-size: 0.8em;
    opacity: 0.55;
}

.report-table .sortable.sort-asc::after {
    content: ' ↑';
    opacity: 1;
}

.report-table .sortable.sort-desc::after {
    content: ' ↓';
    opacity: 1;
}

.report-position {
    font-size: 0.85rem;
}

.profile-link {
    color: var(--strong-accent);
    font-weight: 700;
    text-decoration: none;
}

.profile-link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/*
 * Status badges keep their own contrasting foreground/background colors.
 */

.member-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 700;
    line-height: 1.3;
}

.status-okay {
    background-color: #d4edda;
    color: #155724;
}

.status-bad {
    background-color: #f8d7da;
    color: #721c24;
}

.status-warning {
    background-color: #fff3cd;
    color: #856404;
}

html[data-theme="dark"] .status-okay {
    background-color: #163c26;
    color: #86efac;
}

html[data-theme="dark"] .status-bad {
    background-color: #4c1d1d;
    color: #fca5a5;
}

html[data-theme="dark"] .status-warning {
    background-color: #4d3b0c;
    color: #fde68a;
}

@media (max-width: 600px) {
    .faction-report-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .report-refresh-button {
        width: 100%;
    }
}

/* =========================================================
   ADMIN TOOLS
   ========================================================= */

.admin-tools-heading {
    margin-top: 0;
    color: var(--strong-accent);
}

.admin-tool-panel {
    padding: 1.5rem;

    background-color: var(--secondary-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.admin-tool-heading {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--text-color);
    font-size: 1.1rem;
}

.admin-tool-description {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--muted-text);
    font-size: 0.85rem;
}

.war-time-input {
    font-family: monospace;
}

.admin-tool-status {
    min-height: 1.4rem;
    margin-top: 10px;
    color: var(--text-color);
    font-weight: 700;
    text-align: center;
}

.admin-tool-status.status-success {
    color: var(--success-color);
}

.admin-tool-status.status-error {
    color: var(--danger-color);
}

/* =========================================================
   STANDALONE WAR REPORT
   ========================================================= */

.war-report-page {
    --war-gradient-1: #fce4ec;
    --war-gradient-2: #f8bbd0;
    --war-gradient-3: #e1f5fe;
    --war-gradient-4: #b3e5fc;
    --war-card-bg: rgba(255, 255, 255, 0.76);
    --war-card-border: rgba(255, 255, 255, 0.65);
    --war-row-bg: rgba(255, 255, 255, 0.24);
    --war-row-hover: rgba(255, 255, 255, 0.48);
    --war-divider: rgba(244, 162, 184, 0.7);

    min-height: 100vh;
    margin: 0;

    font-family: 'Poppins', sans-serif;
    color: var(--text-color);

    background:
        linear-gradient(
            -45deg,
            var(--war-gradient-1),
            var(--war-gradient-2),
            var(--war-gradient-3),
            var(--war-gradient-4)
        );

    background-size: 400% 400%;
    animation: war-gradient-background 15s ease infinite;
}

html[data-theme="dark"] .war-report-page {
    --war-gradient-1: #0f1014;
    --war-gradient-2: #21121a;
    --war-gradient-3: #101b25;
    --war-gradient-4: #152331;
    --war-card-bg: rgba(26, 27, 32, 0.9);
    --war-card-border: rgba(255, 255, 255, 0.1);
    --war-row-bg: rgba(255, 255, 255, 0.04);
    --war-row-hover: rgba(255, 255, 255, 0.09);
    --war-divider: rgba(255, 112, 173, 0.28);
}

@keyframes war-gradient-background {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.war-report-shell {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem;
}

@media (min-width: 768px) {
    .war-report-shell {
        padding: 2rem;
    }
}

.war-theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 100;

    padding: 0.6rem 0.9rem;

    background-color: var(--war-card-bg);
    color: var(--text-color);
    border: 1px solid var(--war-card-border);
    border-radius: 8px;
    box-shadow: 0 3px 10px var(--shadow-color);

    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(8px);
}

.war-theme-toggle:hover {
    background-color: var(--hover-bg);
}

.war-theme-toggle:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}

.war-report-card {
    background-color: var(--war-card-bg);
    color: var(--text-color);
    border: 1px solid var(--war-card-border);
    backdrop-filter: blur(8px);
}

.war-report-header {
    text-align: center;
}

.war-report-banner {
    display: block;
    max-height: 13rem;
    margin: 0 auto 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px var(--shadow-color);
}

.war-report-title {
    color: var(--strong-accent);
}

.war-report-subtitle,
.war-card-title,
.war-payout-title {
    color: var(--text-color);
}

.war-report-outcome {
    color: var(--danger-color);
}

.war-stat-value {
    color: var(--strong-accent);
}

.war-stat-label {
    color: var(--muted-text);
}

.war-report-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--text-color);
}

.war-report-table th,
.war-report-table td {
    border-color: var(--war-divider);
}

.war-table-head {
    color: var(--muted-text);
}

.war-table-head th {
    background: transparent;
    color: inherit;
}

.war-report-table tbody tr {
    border-top: 1px solid var(--war-divider);
}

.war-report-table tbody tr:hover {
    filter: brightness(0.98);
}

html[data-theme="dark"] .war-report-table tbody tr:hover {
    filter: brightness(1.12);
}

.gold {
    background: linear-gradient(145deg, #ffd700, #ffec80);
    color: #4a2c00;
}

.silver {
    background: linear-gradient(145deg, #c0c0c0, #e0e0e0);
    color: #2c3e50;
}

.bronze {
    background: linear-gradient(145deg, #cd7f32, #e8a868);
    color: #4d2a00;
}

.default-rank {
    background-color: var(--war-row-bg);
    color: var(--text-color);
}

.gold td,
.silver td,
.bronze td,
.default-rank td {
    padding: 0.5rem 0.75rem;
}

#bleedscore-table {
    background:
        linear-gradient(
            135deg,
            #4d0000,
            #000000,
            #3d0000
        );

    background-size: 400% 400%;
    border: 1px solid #ff0000;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
    animation: bleed-animation 10s ease infinite;
}

@keyframes bleed-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.bleed-title {
    color: #f3f4f6;
}

.bleed-empty {
    color: #9ca3af;
}

.bleed-table-head {
    color: #d1d5db;
}

.bleed-rank {
    background: transparent;
    color: #ffcccc;
    text-shadow: 0 0 5px #ff0000;
    transition: all 0.3s ease;
}

.bleed-rank td {
    padding: 0.5rem 0.75rem;
}

#enemy-table {
    background:
        linear-gradient(
            135deg,
            #0f0f0f,
            #1a2e1a,
            #0f0f0f
        );

    color: #ccffcc;
    border: 1px solid #33ff33;
    box-shadow: 0 0 15px rgba(51, 255, 51, 0.4);
}

.enemy-header {
    color: #33ff33;
    text-shadow: 0 0 5px #33ff33;
}

.enemy-table-head th {
    background-color: rgba(0, 0, 0, 0.9);
    color: #4ade80;
    border-bottom: 1px solid #166534;
}

.enemy-rank {
    color: #ccffcc;
    border-bottom: 1px solid rgba(51, 255, 51, 0.2);
    transition: all 0.2s ease;
}

.fair-fight-scroll,
.enemy-scroll {
    max-height: 30rem;
    overflow-y: auto;
    padding-right: 1rem;
}

.fair-fight-head th {
    position: sticky;
    top: 0;
    z-index: 10;

    background-color: var(--card-bg);
    color: var(--muted-text);
    box-shadow: 0 2px 4px var(--shadow-color);
}

.war-payout-scroll {
    overflow-x: auto;
}

.war-payout-table {
    min-width: max-content;
}

.war-payout-table tbody {
    color: var(--text-color);
}

.war-payout-table tbody tr {
    transition: background-color 0.15s ease;
}

.war-payout-table tbody tr:hover {
    background-color: var(--war-row-hover);
}

.pay-rank {
    color: var(--strong-accent);
}

.pay-id {
    color: var(--muted-text);
}

.pay-respect {
    color: var(--success-color);
    font-weight: 600;
}

.pay-value {
    color: var(--success-color);
    font-weight: 700;
}

.gradient-text {
    background:
        linear-gradient(
            45deg,
            #ff00cc,
            #3333ff,
            #00ffcc,
            #ffcc00
        );

    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradient-animation 5s ease infinite;
}

@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.epic-gradient-text {
    background:
        linear-gradient(
            -45deg,
            #ee7752,
            #e73c7e,
            #23a6d5,
            #23d5ab,
            #ff0000,
            #ffc500
        );

    background-size: 400% 400%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: epic-gradient-animation 8s ease infinite;
}

@keyframes epic-gradient-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.fair-fight-scroll::-webkit-scrollbar,
.enemy-scroll::-webkit-scrollbar {
    width: 8px;
}

.fair-fight-scroll::-webkit-scrollbar-thumb,
.enemy-scroll::-webkit-scrollbar-thumb {
    background: rgba(236, 72, 153, 0.6);
    border-radius: 10px;
}

@media (max-width: 600px) {
    .war-theme-toggle {
        position: static;
        display: block;
        margin: 1rem 1rem 0 auto;
    }
}