@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&display=swap');

:root {
    --bg-body: #f4f7fc;
    --bg-container: white;
    --bg-input-section: #f8f9fa;
    --bg-input: white;
    --bg-stat-card: white;
    --bg-message-error: #fee;
    --bg-message-warning: #fff3cd;
    --bg-raw-json: #2c3e50;
    --bg-highlight: linear-gradient(135deg, #ffeaa7, #fdcb6e);
    --header-bg: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
    --btn-bg: linear-gradient(135deg, #3498db, #2980b9);
    --btn-copy-bg: linear-gradient(135deg, #28a745, #20c997);
    --text-primary: #2c3e50;
    --text-secondary: #495057;
    --text-input: #212529;
    --text-highlight: #2d3436;
    --text-message-error: #d63384;
    --text-message-warning: #856404;
    --text-raw-json: #ecf0f1;
    --border-color-light: #e9ecef;
    --border-color-medium: #dee2e6;
    --border-color-focus: #3498db;
    --box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    --toggle-bg: var(--border-color-medium);
    --toggle-thumb-color: white;
}

html.dark {
    --bg-body: #1a1a2e;
    --bg-container: #242933;
    --bg-input-section: #1e2229;
    --bg-input: #3a3f4b;
    --bg-stat-card: #1e2229;
    --bg-message-error: #4c1d2e;
    --bg-message-warning: #5c450c;
    --bg-raw-json: #161a20;
    --bg-highlight: linear-gradient(135deg, #4e54c8, #8f94fb);
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
    --text-input: #f3f4f6;
    --text-highlight: white;
    --text-message-error: #fecdd3;
    --text-message-warning: #fef08a;
    --text-raw-json: #d1d5db;
    --border-color-light: #2c303a;
    --border-color-medium: #4b5563;
    --box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    --toggle-bg: var(--border-color-medium);
    --toggle-thumb-color: #e2e2e2;
}

html.dark .time-ago { color: var(--text-secondary); }
html.dark .input-group input::placeholder { color: #9ca3af; }
html.dark .message.info {
    background-color: #1a3a4a;
    color: #9eeaf9;
    border-left-color: #0dcaf0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body {
    font-family: 'JetBrains Mono', monospace;
    background: var(--bg-body);
    color: var(--text-primary);
    min-height: 100vh;
    padding: 20px;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-image: var(--background-image-url);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    filter: blur(6px);
    transform: scale(1.05);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--bg-container);
    border-radius: 15px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.header {
    background: var(--header-bg);
    color: white;
    padding: 30px;
    text-align: center;
    position: relative;
}

.theme-switcher { position: absolute; top: 15px; left: 15px; }
.theme-switcher label { display: flex; align-items: center; justify-content: space-between; width: 50px; height: 26px; background-color: #4b5563; border-radius: 50px; position: relative; cursor: pointer; padding: 5px; }
.theme-switcher .ball { position: absolute; width: 18px; height: 18px; background-color: white; border-radius: 50%; top: 4px; left: 4px; transition: transform 0.2s ease-in-out; }
.theme-switcher input[type="checkbox"] { display: none; }
.theme-switcher input:checked + label .ball { transform: translateX(24px); }
.theme-switcher input:checked + label { background-color: var(--border-color-focus); }
.theme-switcher .icon { width: 14px; height: 14px; }
.theme-switcher .icon path { fill: #f6e05e; }
.theme-switcher input:checked + label .icon:first-of-type path { fill: #f0f0f0; }

.logo { max-width: 190px; height: auto; margin-bottom: 10px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.header h1 { font-size: 2.2em; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }

.rate-limit-info { position: absolute; top: 15px; right: 15px; background: rgba(255,255,255,0.1); padding: 8px 12px; border-radius: 20px; font-size: 0.9em; backdrop-filter: blur(10px); }

.input-section { 
    padding: 30px 20px; 
    background: var(--bg-input-section); 
    border-bottom: 1px solid var(--border-color-light);
    display: flex;
    justify-content: center;
}

.input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 800px;
}

.input-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.input-group label,
.time-option label {
    font-weight: 600; 
    color: var(--text-secondary);
    font-size: 1em;
    flex-shrink: 0;
}

.input-group input { 
    flex-grow: 1;
    min-width: 200px;
}

.time-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.time-option {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.time-option select {
    width: 100%;
}

.input-group input, 
.time-option select { 
    padding: 12px 16px; 
    border: 2px solid var(--border-color-medium); 
    border-radius: 8px; font-size: 1em; 
    background-color: var(--bg-input); 
    color: var(--text-input); 
    font-family: 'JetBrains Mono', monospace; 
}

.input-group input:focus, 
.time-option select:focus { 
    outline: none; 
    border-color: var(--border-color-focus); 
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); 
}

.btn { padding: 12px 24px; background: var(--btn-bg); color: white; border: none; border-radius: 8px; font-size: 1em; font-weight: 600; cursor: pointer; transition: all 0.3s ease; position: relative; font-family: 'JetBrains Mono', monospace; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-copy { background: var(--btn-copy-bg); font-size: 0.9em; padding: 8px 16px; margin-top: 10px; }
.btn-copy:hover { filter: brightness(1.1); }
.btn-copy.copied { background: linear-gradient(135deg, #6c757d, #5a6268); }
.btn-nav {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.2s ease;
}
.btn-nav:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.loading { text-align: center; padding: 40px; color: var(--text-secondary); }
.spinner { border: 4px solid #f3f3f3; border-top: 4px solid var(--border-color-focus); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto 20px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.message { padding: 15px 20px; margin: 20px; border-radius: 8px; border-left-width: 4px; border-left-style: solid; }
.message.error { background-color: var(--bg-message-error); color: var(--text-message-error); border-left-color: #d63384; }
.message.warning { background-color: var(--bg-message-warning); color: var(--text-message-warning); border-left-color: #ffc107; }
.message.info { background-color: #cff4fc; color: #055160; border-left-color: #0dcaf0; }

.search-results-list { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.search-result-item { background: none; border: 1px solid var(--border-color-light); color: inherit; font: inherit; cursor: pointer; text-align: left; outline: inherit; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 15px; border-radius: 8px; transition: background-color 0.2s ease, border-color 0.2s ease; }
.search-result-item:hover { background-color: var(--bg-input-section); border-color: var(--border-color-focus); }
.result-name { font-weight: 600; color: var(--text-primary); }
.result-uid { font-size: 0.9em; color: var(--text-secondary); }

.player-info { padding: 30px; }
.player-info > * + * {
    margin-top: 30px;
}

.player-header { background: linear-gradient(135deg, #0d3d18, #0d3d18); color: white; padding: 25px; border-radius: 10px; text-align: center; }
.player-name { font-size: 2.2em; font-weight: bold; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.player-uid { font-size: 1.1em; opacity: 0.9; }
.player-bio {
    font-size: 1rem;
    color: #e5e7eb;
    margin: 12px auto 0; 
    max-width: 850px;
    line-height: 1.6;
    font-style: italic;
    text-align: center; 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; }
.dual-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }

.stat-card {
    background: var(--bg-stat-card); border-radius: 10px; padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); border: 1px solid var(--border-color-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.stat-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
.stat-card h3 { color: var(--text-primary); margin-bottom: 15px; font-size: 1.3em; border-bottom: 2px solid var(--border-color-focus); padding-bottom: 8px; }
.stat-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-color-light); }
.stat-row:last-child { border-bottom: none; }
.stat-label { font-weight: 600; color: var(--text-secondary); }
.stat-value { font-weight: bold; color: var(--text-primary); }
.stat-value-container { display: flex; align-items: center; gap: 10px; }
.date-with-ago { display: flex; align-items: baseline; gap: 0.5em; flex-wrap: wrap; }
.time-ago { font-size: 0.85em; color: #6c757d; white-space: nowrap; }
.btn-copy-inline { background: #6c757d; color: white; border: none; border-radius: 5px; padding: 4px 8px; font-size: 0.8em; cursor: pointer; transition: background-color 0.2s ease; }
.btn-copy-inline:hover { background: #5a6268; }
.btn-copy-inline.copied { background: #28a745; }
.highlight, .danger, .success { padding: 3px 8px; border-radius: 4px; color: white; }
.highlight { background: var(--bg-highlight); color: var(--text-highlight); }
.danger { background: linear-gradient(135deg, #ff7675, #e17055); }
.success { background: linear-gradient(135deg, #00b894, #00cec9); }

.no-link-style {
  color: inherit;
}

.raw-json {
    background: var(--bg-raw-json); color: var(--text-raw-json);
    padding: 20px; border-radius: 10px;
    font-family: 'JetBrains Mono', monospace; font-size: 0.9em;
    line-height: 1.4; overflow-x: auto; white-space: pre-wrap;
}

.raw-json h3 { color: var(--border-color-focus); margin-bottom: 15px; font-family: 'JetBrains Mono', monospace; }
.json-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.countdown { font-size: 0.8em; color: #95a5a6; margin-left: 10px; }

.stats-data-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0px 25px; }
.stats-data-grid .stat-row { padding: 6px 0; }
.weapon-stats-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 10px; }
.weapon-stats-header h3 { margin: 0; }
.stat-row .stat-label-emoji {
    font-size: 1.6em;   /* Makes the emoji larger */
    line-height: 1;     /* Helps with vertical alignment */
}

.stat-row .stat-value-pill {
    padding: 5px 12px;  /* Vertical and horizontal padding inside the pill */
    border-radius: 7px; /* Rounded corners for the pill shape */
    font-size: 0.9em;   /* Text size inside the pill */
    font-weight: 600;   /* Bolder text */
    color: #1a1a1a;     /* White text color */
    text-align: center;
}

/* --- Pill Colors --- */

/* Color for the "kills needed" pill (matches the green in your image) */
.stat-value-pill.success {
    background-color: #1abc9c;
    color: #1a1a1a; /* Dark text for better contrast on this green */
}

/* Color for the "deaths to drop" pill (matches the red in your image) */
.stat-value-pill.danger {
    background-color: #e84c3d;
}

/* A neutral gray for milestones that have already been passed */
.stat-value-pill.subtle {
    background-color: #7f8c8d;
}

.sort-toggle { 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
    font-size: 0.9em; 
    color: var(--text-secondary); 
    margin-bottom: 1rem;
}
.sort-toggle .switch { position: relative; display: inline-block; width: 40px; height: 20px; }
.sort-toggle .switch input { opacity: 0; width: 0; height: 0; }
.sort-toggle .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--toggle-bg); transition: .4s; border-radius: 20px; }
.sort-toggle .slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: var(--toggle-thumb-color); transition: .4s; border-radius: 50%; }
.sort-toggle input:checked + .slider { background-color: var(--border-color-focus); }
.sort-toggle input:focus + .slider { box-shadow: 0 0 0 3px var(--border-color-focus); }
.sort-toggle input:checked + .slider:before { transform: translateX(20px); }

h1 { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.75rem; }
#page-logo { height: 40px; width: auto; }
.player-name-logo { height: 1.2em; width: auto; vertical-align: middle; margin-left: 8px; }

.footer {
    background: var(--bg-container);
    border-radius: 15px;
    box-shadow: var(--box-shadow);
    text-align: center;
    padding: 20px;
    margin-top: 20px;
    color: var(--text-secondary);
    font-size: 0.9em;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}
.footer p { margin-bottom: 10px; }
.footer strong { color: var(--text-primary); }

@media (max-width: 992px) { 
    .dual-stats-grid { 
        grid-template-columns: 1fr; 
    } 
}

@media (max-width: 768px) {
    body {
        padding: 10px;
    }

    .header,
    .input-section,
    .stat-card {
        padding: 15px;
    }
    
    .player-info {
        padding: 0;
    }

    .header {
        padding-top: 70px;
    }

    .header h1,
    .player-name {
        font-size: 1.8em;
        line-height: 1.2;
    }
    
    .header h3, .header h4 {
        font-size: 0.9em;
    }

    .stat-card h3 {
        font-size: 1.15em;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .player-uid {
        font-size: 1em;
        word-break: break-all;
    }

    /* Center the War Brokers logo on mobile */
    .logo,
    #page-logo {
        display: block;
        margin: 0 auto 10px;
    }

    /* Center the Requests pill on mobile */
    .rate-limit-info {
        position: static;
        display: block;
        width: max-content;
        margin: 10px auto 0; /* centers horizontally */
        text-align: center;
    }

    .input-group {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (min-width: 769px) {
    .time-options {
        flex-direction: row;
    }

    .time-option {
        flex-direction: row;
        align-items: center;
        flex: 1;
    }
}