:root {
    /* Core theme colors */
    --bg: #111;
    --fg: #eee;
    --accent: #ff8c00;

    /* Additional UI variables */
    --card-bg: #111;
    --border: var(--accent);
    --button-bg: transparent;
    --button-text: var(--accent);
    --button-border: var(--accent);
    --button-hover-bg: var(--accent);
    --button-hover-text: #000;

    --input-bg: black;
    --input-text: var(--fg);
    --input-border: var(--accent);

    --status-on: #00b33c;
    --status-off: #b30000;

    --bar-bg: #111;
    --bar-border: var(--accent);
    --bar-gradient: linear-gradient(to right, #ac0707, #3c9f05);
}

.theme-dark {
    --bg: #111;
    --fg: #eee;
    --accent: #ff8c00;

    --card-bg: #181818;
    --border: #ff8c00;

    --button-text: #ff8c00;
    --button-border: #ff8c00;
    --button-hover-bg: #ff8c00;
    --button-hover-text: #000;

    --input-bg: #000;
    --input-text: #ff8c00;
    --input-border: #ff8c00;

    --status-on: #16d95f;
    --status-off: #d92b2b;

    --bar-bg: #111;
    --bar-border: #ff8c00;
    --bar-gradient: linear-gradient(to right, #8a0000, #4caf50);
}

.theme-light {
    --bg: #f4f4f4;
    --fg: #111;
    --accent: #0077ff;

    --card-bg: #fff;
    --border: #0077ff;

    --button-text: #0077ff;
    --button-border: #0077ff;
    --button-hover-bg: #0077ff;
    --button-hover-text: white;

    --input-bg: #fff;
    --input-text: #003366;
    --input-border: #0077ff;

    --status-on: #00b33c;
    --status-off: #cc0000;

    --bar-bg: #fff;
    --bar-border: #0077ff;
    --bar-gradient: linear-gradient(to right, #ff6666, #66cc66);
}

.theme-solar {
    --bg: #002b36;
    --fg: #eee8d5;
    --accent: #b58900;

    --card-bg: #073642;
    --border: #b58900;

    --button-text: #b58900;
    --button-border: #b58900;
    --button-hover-bg: #b58900;
    --button-hover-text: #002b36;

    --input-bg: #073642;
    --input-text: #eee8d5;
    --input-border: #b58900;

    --status-on: #859900;
    --status-off: #dc322f;

    --bar-bg: #073642;
    --bar-border: #b58900;
    --bar-gradient: linear-gradient(to right, #dc322f, #859900);
}

.theme-neon {
    --bg: #000000;
    --fg: #39ff14;
    --accent: #ff009d;

    --card-bg: #0d0d0d;
    --border: #ff009d;

    --button-text: #ff009d;
    --button-border: #ff009d;
    --button-hover-bg: #ff009d;
    --button-hover-text: black;

    --input-bg: #000000;
    --input-text: #39ff14;
    --input-border: #ff009d;

    --status-on: #39ff14;
    --status-off: #ff0048;

    --bar-bg: #000;
    --bar-border: #ff009d;
    --bar-gradient: linear-gradient(to right, #ff0048, #39ff14);
}

.theme-terminal {
    --bg: #001100;
    --fg: #00ff6a;
    --accent: #00ff6a;

    --card-bg: #002200;
    --border: #00ff6a;

    --button-text: #00ff6a;
    --button-border: #00ff6a;
    --button-hover-bg: #00ff6a;
    --button-hover-text: #001100;

    --input-bg: #000;
    --input-text: #00ff6a;
    --input-border: #00ff6a;

    --status-on: #00ff6a;
    --status-off: #993333;

    --bar-bg: #002200;
    --bar-border: #00ff6a;
    --bar-gradient: linear-gradient(to right, #993333, #00ff6a);
}

.theme-midnight {
    --bg: #0e001a;
    --fg: #d9b3ff;
    --accent: #9b4dff;

    --card-bg: #1a0033;
    --border: #9b4dff;

    --button-text: #d9b3ff;
    --button-border: #9b4dff;
    --button-hover-bg: #9b4dff;
    --button-hover-text: #0e001a;

    --input-bg: #150026;
    --input-text: #d9b3ff;
    --input-border: #9b4dff;

    --status-on: #5cffc1;
    --status-off: #ff4da6;

    --bar-bg: #1a0033;
    --bar-border: #9b4dff;
    --bar-gradient: linear-gradient(to right, #ff4da6, #5cffc1);
}

.theme-trans {
    --bg: #55CDFC;
    --fg: #FFFFFF;
    --accent: #D98CA0;

    /* Slightly darkened versions for usability */
    --bg-dark: #3AAED3;      /* darker blue for cards */
    --pink-dark: #D98CA0;    /* darker pink, better for borders */

    /* UI Variables */
    --card-bg: var(--accent);
    --border: var(--fg);

    /* Buttons */
    --button-bg: var(--pink-dark);
    --button-text: var(--fg);
    --button-border: var(--fg);
    --button-hover-bg: var(--fg);
    --button-hover-text: var(--bg);

    /* Inputs */
    --input-bg: #ffffff;
    --input-text: #333;
    --input-border: var(--pink-dark);

    /* Status Lights */
    --status-on: #2ecc71;     /* Balanced green */
    --status-off: #e74c3c;

    /* Loading bar */
    --bar-bg: var(--bg-dark);
    --bar-border: var(--pink-dark);
    --bar-gradient: linear-gradient(
            to right,
            #55CDFC, #F7A8B8, #ffffff, #F7A8B8, #55CDFC
    );
}

.theme-ace {
    /* Primary flag-inspired palette */
    --bg: #800080;        /* Purple background */
    --fg: #FFFFFF;        /* Main text */
    --accent: #A3A3A3;    /* Gray accent */

    /* Additional derived values */
    --bg-dark: #5A005A;   /* Darker purple for cards */
    --gray-dark: #7A7A7A; /* Stronger gray for borders */

    /* UI Variables */
    --card-bg: var(--bg-dark);
    --border: var(--gray-dark);

    /* Buttons */
    --button-bg: var(--accent);
    --button-text: #000000;     /* You requested black text */
    --button-border: #000000;
    --button-hover-bg: #000000;
    --button-hover-text: var(--accent);

    /* Inputs */
    --input-bg: #ffffff;
    --input-text: #000;
    --input-border: var(--accent);

    /* Status Lights */
    --status-on: #3bd95f;   /* soft green looks good on purple */
    --status-off: #c0392b;

    /* Loading bar — full ace flag sweep */
    --bar-bg: var(--bg-dark);
    --bar-border: var(--accent);
    --bar-gradient: linear-gradient(
            to right,
            #000000, #A3A3A3, #FFFFFF, #800080,
            #000000, #A3A3A3, #FFFFFF, #800080
    );
}

.theme-bi {
    /* Base flag-inspired palette */
    --bg: #D60270;        /* Pink overall background */
    --fg: #FFFFFF;        /* White text to contrast pink */
    --accent: #9B4F96;    /* Purple accent */

    /* Darker panel + accent variations */
    --blue-bg: #0038A8;      /* Bi blue for cards */
    --blue-dark: #002E86;    /* Slightly darker blue */
    --purple-dark: #7F3A7A;  /* Slightly muted purple */

    /* Core UI */
    --card-bg: var(--blue-bg);
    --border: var(--accent);      /* Purple borders */

    /* Buttons */
    --button-bg: var(--blue-dark);       /* Purple */
    --button-text: #FFFFFF;
    --button-border: var(--accent);
    --button-hover-bg: var(--accent);
    --button-hover-text: #FFFFFF;

    /* Inputs */
    --input-bg: #ffffff;
    --input-text: #000;
    --input-border: var(--accent);

    /* Status Lights */
    --status-on: #2ecc71;
    --status-off: #e74c3c;

    /* Bi flag gradient loading bar */
    --bar-bg: var(--blue-dark);
    --bar-border: var(--accent);
    --bar-gradient: linear-gradient(
            to right,
            #D60270,
            #9B4F96,
            #0038A8,
            #9B4F96,
            #D60270
    );
}

.theme-lesbian {
    /* Base flag-inspired palette */
    --bg: #D52D00;        /* Dark orange overall background */
    --fg: #FFFFFF;        /* White text for maximum contrast */
    --accent: #A30262;    /* Dark rose accent */

    /* Layered panel colors from the flag */
    --orange-panel: #EF7627;       /* Orange (panels) */
    --light-orange-panel: #FF9A56; /* Light orange (cards) */
    --pink-panel: #D162A4;         /* Pink (inputs/buttons) */

    /* Darker/muted variations for usability */
    --orange-dark: #B64000;        /* Darkened orange */
    --pink-dark: #B55690;          /* Dusty pink */
    --rose-dark: #7A014A;          /* Deepened dark rose */

    /* Core UI */
    --card-bg: var(--light-orange-panel);
    --border: var(--accent);       /* Dark rose borders */

    /* Buttons */
    --button-bg: var(--pink-dark);
    --button-text: #FFFFFF;
    --button-border: var(--accent);
    --button-hover-bg: var(--accent);
    --button-hover-text: #FFFFFF;

    /* Inputs */
    --input-bg: var(--pink-panel);
    --input-text: #FFFFFF;
    --input-border: var(--accent);

    /* Status Lights */
    --status-on: #2ecc71;
    --status-off: #e74c3c;

    /* Lesbian flag gradient loading bar */
    --bar-bg: var(--orange-dark);
    --bar-border: var(--accent);
    --bar-gradient: linear-gradient(
            to right,
            #D52D00,
            #EF7627,
            #FF9A56,
            #FFFFFF,
            #D162A4,
            #B55690,
            #A30262
    );
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: Consolas, monospace;
    text-align: center;
}

h1, h2, h3 {
    color: var(--button-text);
}

button {
    background: var(--button-bg);
    border: 4px solid var(--button-border);
    color: var(--button-text);
    padding: 10px 20px;
    margin: 8px;
    cursor: pointer;
    font-size: 25px;
    border-radius: 6px;
    font-weight: bold;
}
button:hover {
    background: var(--button-hover-bg);
    color: var(--button-hover-text);
}

.hidden {
    display: none;
}

.center-box {
    margin-top: 100px;
}

input {
    padding: 10px;
    width: 200px;
    margin: 10px;
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
}

:root {
  --stats-cols: 3; /* default */
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 20px;
    margin: 0 auto;
    max-width: 900px;
    width: 100%;
}

.stat-card {
    border: 4px solid var(--border);
    background: var(--card-bg);
    padding: 20px;
    border-radius: 6px;
    box-sizing: border-box;
    min-height: 60px;
    justify-content: center;
    font-weight: bold;
}

.button-row {
    margin-top: 20px;
    display: flex;
    justify-content: center;   /* center buttons horizontally */
    gap: 10px;                 /* space between buttons */
}

.status-light {
    font-size: 22px;
    margin-bottom: 10px;
    padding: 10px;
    width: 160px;
    text-align: center;
    border-radius: 10px;
    color: white;
}

.status-light.off {
    background: var(--status-off);
    box-shadow: 0 0 10px #6b0000 inset;
}

.status-light.on {
    background: var(--status-on);
    box-shadow: 0 0 12px #009933 inset;
}

/* Matches the grid width and aligns perfectly under it */
.players-card {
    grid-column: 1 / -1;
    text-align: left;
    justify-content: left;
    width: 100%;
}

@media (max-width: 800px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr; /* 2 columns on tablet */
    }
}

@media (max-width: 500px) {
    .stats-grid {
        grid-template-columns: 1fr; /* 1 column on phone */
    }
}


#players-text {
    white-space: normal;
    word-wrap: break-word;
    margin-left: 6px;
    display: inline;
}

#status-bar {
    width: 0%;
    height: 100%;
    background: var(--bar-gradient);
    transition: width 0.5s cubic-bezier(.08,.82,.17,1);
}

#loading-panel {
    display: flex;                /* make panel a flex container */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 40px;             /* ensure visible space */
}

#loading-panel.hidden {
    display: none !important;
    height: 0 !important;
}


#status-bar-container {
    width: 100%;
    max-width: 600px;
    height: 25px;             /* << THIS IS WHAT GIVES THE BAR HEIGHT */
    border-radius: 6px;
    overflow: hidden;
    margin: 10px auto;
}

#theme-selector {
    position: absolute;
    top: 10px;
    right: 10px;
}

#theme-dropdown {
    padding: 5px 10px;
    background: #222;
    color: #fff;
    border: 1px solid #555;
    border-radius: 6px;
}