:root {
    --bg: #15171c;
    --panel: #1f232b;
    --panel-alt: #252a33;
    --header: #2d3440;
    --border: #353c49;
    --text: #d6dae1;
    --muted: #8a93a3;
    --link: #6fa8ff;
    --accent: #f0a93b;
    --staff: #ff6b6b;
    --sitebar-h: 48px;
    --grad-1: #f04b19;
    --grad-2: #4d8f85;
    --grad-3: #8836e6;
    --grad-4: #23d5ab;
    --tgrad-1: #ffd166;
    --tgrad-2: #ef8fff;
    --tgrad-3: #7ee8fa;
}

* {
    box-sizing: border-box;
}
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.45 var(--font, "Segoe UI", Tahoma, sans-serif);
}
html[data-bg="gradient"] body {
    background: linear-gradient(-45deg, var(--grad-1), var(--grad-2), var(--grad-3), var(--grad-4)) fixed;
    background-size: 400% 400%;
    background-position: 0% 50%;
    animation: gradientShift 22s ease infinite;
}
html[data-bg="image"] body {
    background: var(--bg-image) center / cover no-repeat fixed, var(--bg);
}
@keyframes gradientShift {
    50% {
        background-position: 100% 50%;
    }
}

/* Animated gradient text. Skips anything with its own background, which the effect would erase. */
.text-gradient :is(h1, h2, h3, p, li, dt, dd, label, legend, small, strong, summary, span):not(
    .StatsHeader, .EmptyState, .AuthNotice, .FormError, .CategoryHeader, .RoleBadge, .AuraIcon, .PopArrow, .Pagination > span, [data-rank]
) {
    background: linear-gradient(90deg, var(--tgrad-1), var(--tgrad-2), var(--tgrad-3), var(--tgrad-1)) fixed 0 0 / 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: textGradient 12s linear infinite;
}
@keyframes textGradient {
    to {
        background-position: 200% 0;
    }
}

a {
    color: var(--link);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]),
select,
textarea {
    padding: 8px 10px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 3px;
    font: inherit;
    font-weight: 400;
}
input {
    accent-color: var(--accent);
}
button {
    font: inherit;
    cursor: pointer;
}

.Btn {
    padding: 6px 12px;
    background: var(--header);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 3px;
}
.Btn:hover {
    background: var(--border);
    text-decoration: none;
}
.Btn.primary,
.Btn[aria-pressed="true"],
.Btn[aria-selected="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: #1a1a1a;
    font-weight: 600;
}
.Btn.primary:hover {
    background: color-mix(in srgb, var(--accent), white 15%);
}

.User {
    font-weight: 600;
}
.Muted {
    color: var(--muted);
}
.FormError {
    margin: 0;
    color: var(--staff);
}

.ForumHead {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 16px;
}
.ForumHead h1 {
    margin: 0;
    font-size: 24px;
}
.ForumHead p {
    margin: 4px 0 0;
    color: var(--muted);
}

.Stats {
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.StatsHeader {
    margin: 0;
    padding: 10px 14px;
    background: linear-gradient(var(--header), var(--panel-alt));
    border-bottom: 2px solid var(--accent);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.StatsBody {
    padding: 12px 14px;
    background: var(--panel);
}
.StatsBody p {
    margin: 0 0 6px;
}
.EmptyState {
    margin: 0;
    padding: 40px 14px;
    background: var(--panel);
    color: var(--muted);
    text-align: center;
}

/* Hood outline (text color or text gradient) with a white palm tree inside, drawn as two SVG stencils. */
.Logo {
    --hood: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 6C62 22 82 44 84 70C85 82 90 90 94 94H6C10 90 15 82 16 70C18 44 38 22 50 6Z' fill='none' stroke='black' stroke-width='3.2' stroke-linejoin='round'/></svg>");
    --palm: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 47Q51.8 50 51.8 54Q51.8 80 56.5 88H43.5Q48.2 80 48.2 54Q48.2 50 50 47z'/><path d='M50 50Q36 40 26 52Q38 46 50 50zM50 50Q64 40 74 52Q62 46 50 50zM50 50Q46 38 52 30Q54 40 50 50zM50 50Q42 34 32 37Q42 42 50 50zM50 50Q58 34 68 37Q58 42 50 50zM50 50Q34 50 30 66Q38 55 50 50zM50 50Q66 50 70 66Q62 55 50 50z'/></svg>");
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
}
.Logo::before,
.Logo::after {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-mask: var(--hood) center / contain no-repeat;
    mask: var(--hood) center / contain no-repeat;
    background: var(--text);
}
.Logo::after {
    -webkit-mask-image: var(--palm);
    mask-image: var(--palm);
    background: #fff;
}
.text-gradient .Logo::before,
.logo-gradient .Logo::before {
    background: linear-gradient(90deg, var(--tgrad-1), var(--tgrad-2), var(--tgrad-3), var(--tgrad-1)) fixed 0 0 / 200% 100%;
    animation: textGradient 12s linear infinite;
}
/* The 24px corner logo needs a thicker outline. */
.LogoCorner .Logo {
    --hood: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 6C62 22 82 44 84 70C85 82 90 90 94 94H6C10 90 15 82 16 70C18 44 38 22 50 6Z' fill='none' stroke='black' stroke-width='9' stroke-linejoin='round'/></svg>");
}
.LogoCorner {
    display: block;
    width: 24px;
}
.Home {
    display: grid;
    place-items: center;
    min-height: calc(100vh - var(--sitebar-h));
}
.LogoMain {
    width: min(85vw, calc(85vh - var(--sitebar-h)));
}

.SiteBar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--sitebar-h);
    padding: 0 16px;
    background: var(--panel);
    border-bottom: 2px solid var(--accent);
}
.SiteNav,
.SiteRight {
    display: flex;
    align-items: center;
    gap: 4px;
}
.SiteRight {
    gap: 12px;
}
.SiteNav a,
.PopPanel a,
.PopLogout {
    padding: 6px 12px;
    border-radius: 3px;
    color: var(--text);
    font-weight: 600;
}
.PopLogout {
    background: none;
    border: 0;
    text-align: left;
}
.SiteUser {
    padding: 6px 8px;
    border-radius: 3px;
    color: var(--text);
    font-weight: 600;
}
.SiteNav a:hover,
.SiteNav a[aria-current="page"],
.PopPanel a:hover,
.PopPanel a[aria-current="page"],
.PopLogout:hover,
.SiteUser:hover {
    background: var(--header);
    color: var(--accent);
    text-decoration: none;
}
.SiteIcon {
    color: var(--text);
    font-size: 18px;
    line-height: 1;
}
.SiteIcon:hover,
.SiteIcon[aria-current="page"] {
    color: var(--accent);
    text-decoration: none;
}

.PopMenu {
    --tab-h: 22px;
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, calc(-100% + var(--tab-h)));
    transition: transform 0.3s ease;
}
.PopMenu.open {
    transform: translate(-50%, 0);
}
.PopPanel,
.PopTab {
    background: var(--panel);
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 8px 8px;
}
.PopPanel {
    display: grid;
    gap: 2px;
    width: min(90vw, 280px);
    padding: 10px;
}
.PopMenu.open .PopPanel {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.PopPanel hr {
    width: 100%;
    margin: 6px 0;
    border: 0;
    border-top: 1px solid var(--border);
}
.PopTab {
    display: grid;
    place-items: center;
    width: 56px;
    height: var(--tab-h);
    padding: 0;
}
.PopTab:hover {
    background: var(--header);
}
.PopArrow {
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(45deg);
    transition: transform 0.3s ease, margin 0.3s ease;
}
.PopMenu.open .PopArrow {
    margin-top: 4px;
    transform: rotate(-135deg);
}

.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
    animation: none !important;
    transition: none !important;
}

@media (max-width: 700px) {
    .SiteBar {
        padding: 0 10px;
    }
    .SiteNav a {
        padding: 6px 4px;
    }
    .SiteRight {
        gap: 4px;
        min-width: 0;
    }
    /* Long usernames shorten with … so the bar fits. */
    .SiteRight .Btn,
    .SiteUser {
        white-space: nowrap;
    }
    .SiteUser {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .LogoCorner {
        flex-shrink: 0;
    }
}