/* Shared palette: style.css retains the original light colors as fallbacks. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --jd-text: #bbc5d1;
    --jd-muted: #9aa8ba;
    --jd-heading: #cbd3de;
    --jd-on-accent: #dce2e9;
    --jd-surface: #172231;
    --jd-raised: #223247;
    --jd-overlay: rgba(16, 25, 38, 0.97);
    --jd-link: #8ac7ff;
    --jd-pink: #ff83a6;
    --jd-success: #94d879;
}

#theme-toggle {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 120;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 10px 15px;
    border: 1px solid #7595ba;
    border-radius: 24px;
    background: var(--jd-surface, #fff);
    color: var(--jd-text, #272727);
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    cursor: pointer;
    bottom: max(18px, env(safe-area-inset-bottom));
}
#theme-toggle[hidden] { display: none; }
#theme-toggle:hover { border-color: #0080ff; }
#theme-toggle:focus-visible {
    outline: 3px solid #64b5ff;
    outline-offset: 3px;
}
.theme-toggle-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: inset 5px -3px 0 0 currentColor;
}
[data-theme="dark"] .theme-toggle-icon {
    background: #8ac7ff;
    box-shadow: 0 0 0 3px rgba(138, 199, 255, 0.2);
}

/* Keep the original artwork, with a night tint behind readable content. */
[data-theme="dark"] .header {
    background-color: #19283d;
    background-blend-mode: multiply;
}
[data-theme="dark"] .header:before,
[data-theme="dark"] .header .box-about .left-row ul:before {
    opacity: 0.08;
}
[data-theme="dark"] .header:after { opacity: 0.3; }
[data-theme="dark"] .content {
    background-color: #101926;
    background-blend-mode: multiply;
}
[data-theme="dark"] body,
[data-theme="dark"] .footer { background-color: #101926; }
[data-theme="dark"] a { color: #8ac7ff; }
[data-theme="dark"] a:hover { color: #a9cde9; }
[data-theme="dark"] .all-btn { color: var(--jd-on-accent); }
[data-theme="dark"] #main-menu .wrapper .menu-box ul.list li a:before {
    background: #285b89;
}
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: #172231;
    color: var(--jd-text);
    border-color: #577796;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--jd-muted); opacity: 1; }
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    outline: 2px solid #64b5ff;
    outline-offset: 2px;
}
[data-theme="dark"] .content .flex-container .left-container .game-info-box ul.listed li a,
[data-theme="dark"] .vote-block .vote-items .item .link:before,
[data-theme="dark"] .account-body .account-tabs ul li a:before,
[data-theme="dark"] .content .flex-container .left-container .faction-info-box .faction-list ul.tabs li a:before {
    background: #223247;
    border: 1px solid #577796;
    border-radius: 4px;
}
[data-theme="dark"] .account-body .account-tabs ul li a.active:before,
[data-theme="dark"] .account-body .account-tabs ul li a:hover:before,
[data-theme="dark"] .content .flex-container .left-container .faction-info-box .faction-list ul.tabs li a.active:before,
[data-theme="dark"] .content .flex-container .left-container .faction-info-box .faction-list ul.tabs li a:hover:before {
    background: #285b89;
}
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .well,
[data-theme="dark"] .panel {
    background: #172231;
    color: var(--jd-text);
    border-color: #577796;
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background: #223247; }
[data-theme="dark"] .table-hover > tbody > tr:hover { background: #2c4058; }
[data-theme="dark"] .table > tbody > tr > td,
[data-theme="dark"] .table > thead > tr > th { border-color: #40536b; }
[data-theme="dark"] .close { color: var(--jd-text); text-shadow: none; }

/* A gentle hierarchy keeps large titles distinct without near-white body copy. */
[data-theme="dark"] .content-title .text,
[data-theme="dark"] .side-box .title-block .text,
[data-theme="dark"] .news > .title,
[data-theme="dark"] .header .box-about .left-row .title {
    --jd-text: var(--jd-heading);
}
[data-theme="dark"] .header .box .status .desc,
[data-theme="dark"] .header .box .logo span {
    color: var(--jd-text);
}
[data-theme="dark"] .header .box-about .right-row .text-row p,
[data-theme="dark"] .header .box-about .left-row .title span {
    text-shadow: none;
}