/*
 *  Imagimania theme v4
 *  Deepslate panels, one emerald accent, Minecraft UI details.
 */

:root {
    --im-bg: #1a1b1e;
    --im-nav: #141518;
    --im-panel: #232529;
    --im-panel-2: #2b2e33;
    --im-line: #383b41;
    --im-stone: #4a4d53;
    --im-text: #ebe8e1;
    --im-muted: #a8a59e;
    --im-emerald: #3ccf6b;
    --im-emerald-hover: #52dc7f;
    --im-emerald-edge: #1e8a43;
    --im-ink: #0b2614;
    --im-font: "Rubik", "Helvetica Neue", Arial, sans-serif;
    /* one typeface across the whole site; --im-pixel is kept as an alias so older rules still resolve */
    --im-pixel: var(--im-font);
    --im-ease: cubic-bezier(.22, .8, .24, 1);
}

/* =========================================================
 *  BASE
 * ========================================================= */

html {
    background: var(--im-bg) !important;
}

/* transparent so the ambient light layer behind the page shows through */
body.dark.imagimania,
body.dark.imagimania > .pusher,
body.dark.imagimania.pushable > .pusher {
    background: transparent !important;
    color: var(--im-text);
}

body.dark.imagimania > .pusher,
body.dark.imagimania.pushable > .pusher {
    overflow: visible !important;
    overflow: clip !important;
}

body.dark.imagimania,
body.dark.imagimania .ui:not(.icon),
body.dark.imagimania h1,
body.dark.imagimania h2,
body.dark.imagimania h3,
body.dark.imagimania h4,
body.dark.imagimania h5,
body.dark.imagimania h6,
body.dark.imagimania input,
body.dark.imagimania textarea,
body.dark.imagimania select,
body.dark.imagimania button {
    font-family: var(--im-font) !important;
}

body.dark.imagimania {
    font-size: 15px;
    line-height: 1.55;
}

body.dark.imagimania ::selection {
    background: var(--im-emerald);
    color: var(--im-ink);
}

body.dark.imagimania a {
    color: var(--im-emerald);
}

body.dark.imagimania a:hover {
    color: var(--im-emerald-hover);
}

body.dark.imagimania a:focus-visible,
body.dark.imagimania button:focus-visible,
body.dark.imagimania .ui.button:focus-visible,
body.dark.imagimania input:focus-visible,
body.dark.imagimania textarea:focus-visible {
    outline: 2px solid var(--im-emerald) !important;
    outline-offset: 2px;
}

body.dark.imagimania ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body.dark.imagimania ::-webkit-scrollbar-track {
    background: var(--im-nav);
}

body.dark.imagimania ::-webkit-scrollbar-thumb {
    background: var(--im-stone);
    border: 3px solid var(--im-nav);
}

/* =========================================================
 *  NAVBAR
 * ========================================================= */

body.dark.imagimania #navbar.ui.secondary.menu {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 64px;
    margin: 0;
    padding: 10px;
    background: var(--im-nav) !important;
    border-bottom: 1px solid var(--im-line);
    box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}

body.dark.imagimania #navbar > .ui.container {
    position: relative;
    align-items: center;
}

body.dark.imagimania #navbar .item {
    color: var(--im-muted) !important;
    font-weight: 500;
    border-radius: 3px !important;
    transition: color .15s ease, background-color .15s ease;
}

body.dark.imagimania #navbar .item:hover {
    color: var(--im-text) !important;
    background: var(--im-panel) !important;
}

body.dark.imagimania #navbar a.item {
    position: relative;
}

body.dark.imagimania #navbar .item.active {
    color: var(--im-text) !important;
    background: transparent !important;
}

body.dark.imagimania #navbar a.item.active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -11px;
    height: 3px;
    background: var(--im-emerald);
}

body.dark.imagimania .ui.vertical.inverted.sidebar.menu {
    background: var(--im-panel) !important;
    border-right: 1px solid var(--im-line);
}

body.dark.imagimania .sidebar-logo img {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin: .25rem auto;
}

body.dark.imagimania .ui.vertical.inverted.sidebar.menu .item.active {
    background: var(--im-panel-2) !important;
    color: var(--im-text) !important;
    box-shadow: inset 3px 0 0 var(--im-emerald);
}

/* logo: fixed in the middle of the top bar */

body.dark.imagimania .nav-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    line-height: 0;
    z-index: 5;
}

body.dark.imagimania .nav-logo img {
    display: block;
    height: 56px;
    width: auto;
    max-width: 40vw;
    object-fit: contain;
    transition: transform .4s var(--im-ease);
}

body.dark.imagimania .nav-logo:hover img {
    transform: scale(1.04);
}

/* account button: same bottom edge as the other buttons so everything lines up */

body.dark.imagimania #navbar .right.menu {
    align-items: stretch;
}

body.dark.imagimania #navbar .right.menu > .ui.image.label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 14px 3px 0;
    overflow: hidden;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35) !important;
    cursor: pointer;
}

body.dark.imagimania #navbar .right.menu > .ui.image.label > img {
    align-self: flex-start;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 2px 0 0 0;
}

/* small laptops and tablets: the links don't fit beside the centred logo, so use the menu icon */
@media only screen and (min-width: 769px) and (max-width: 991px) {
    body.dark.imagimania #navbar > .ui.container > .item:not(.toc) {
        display: none !important;
    }

    body.dark.imagimania #navbar > .ui.container > .toc.item {
        display: block !important;
    }
}

/* phones: logo moves next to the menu icon and the account button shows only the face */
@media only screen and (max-width: 768px) {
    body.dark.imagimania .nav-logo {
        left: 54px;
        transform: translateY(-50%);
    }

    body.dark.imagimania .nav-logo img {
        height: 40px;
        max-width: 38vw;
    }

    body.dark.imagimania #navbar .right.menu > .ui.image.label {
        gap: 0;
        padding-right: 0;
        font-size: 0;
    }

    body.dark.imagimania #navbar .right.menu > .ui.image.label > img {
        border-radius: 2px 2px 0 0;
    }
}

/* =========================================================
 *  BANNER + SERVER LIST ENTRY
 * ========================================================= */

body.dark.imagimania .ui.masthead {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 290px;
    margin-bottom: 28px;
    padding: 36px 0 !important;
    border-radius: 0;
    border-bottom: 1px solid var(--im-line);
    background-color: #202226;
    background-size: cover;
    background-position: center;
    color: var(--im-text);
}

.im-banner-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #202226;
    background-size: cover;
    background-position: center;
    transform: translate3d(0, 0, 0) scale(1.05);
    will-change: transform;
}

body.dark.imagimania .ui.masthead::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 45%),
        linear-gradient(180deg, rgba(26, 27, 30, 0) 50%, rgba(26, 27, 30, .9) 100%);
    pointer-events: none;
}

.im-hero {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    padding: 0 clamp(16px, 3vw, 56px);
}

.im-server {
    width: 350px;
    max-width: 100%;
    padding: 12px 14px 14px;
    background: rgba(0, 0, 0, .66);
    border: 2px solid rgba(255, 255, 255, .06);
    border-radius: 2px;
    transition: border-color .12s ease;
}

.im-server:hover {
    border-color: #a0a0a0;
}

.im-server-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.im-server-name {
    font-family: var(--im-pixel);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.im-server-ping {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.im-slots {
    font-family: var(--im-pixel);
    font-size: 1rem;
    font-weight: 500;
    color: #aaaaaa;
    font-variant-numeric: tabular-nums;
}

.im-slash {
    color: #6f6f6f;
    margin: 0 1px;
}

.im-server-ping[data-state="offline"] .im-slots {
    color: #ff5555;
}

.im-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 1px;
    height: 12px;
}

.im-bars span {
    display: block;
    width: 3px;
    background: #3c3f45;
}

.im-bars span:nth-child(1) { height: 4px; }
.im-bars span:nth-child(2) { height: 6px; }
.im-bars span:nth-child(3) { height: 8px; }
.im-bars span:nth-child(4) { height: 10px; }
.im-bars span:nth-child(5) { height: 12px; }

.im-server-ping[data-state="online"] .im-bars span {
    background: #4cd35c;
    box-shadow: 1px 1px 0 #17521f;
}

.im-server-ping[data-state="offline"] .im-bars span {
    background: #5a2a2a;
}

.im-server-ping[data-state="loading"] .im-bars span {
    animation: im-scan 1.25s steps(1) infinite;
}

.im-server-ping[data-state="loading"] .im-bars span:nth-child(2) { animation-delay: .15s; }
.im-server-ping[data-state="loading"] .im-bars span:nth-child(3) { animation-delay: .3s; }
.im-server-ping[data-state="loading"] .im-bars span:nth-child(4) { animation-delay: .45s; }
.im-server-ping[data-state="loading"] .im-bars span:nth-child(5) { animation-delay: .6s; }

@keyframes im-scan {
    0% { background: #8a8d93; }
    30%, 100% { background: #3c3f45; }
}

.im-motd {
    margin-top: 2px;
    font-family: var(--im-pixel);
    font-size: 1rem;
    font-weight: 500;
    color: #aaaaaa;
}

.im-version {
    margin-top: 2px;
    font-size: .85rem;
    color: #7d7d7d;
}

.im-heads {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    margin-top: 10px;
}

.im-head {
    position: relative;
    width: 28px;
    height: 28px;
    transition: transform .12s ease;
}

.im-head img {
    display: block;
    width: 28px;
    height: 28px;
    image-rendering: pixelated;
}

.im-head::after {
    content: attr(data-name);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    padding: 3px 6px 2px;
    background: rgba(16, 0, 16, .95);
    border: 1px solid #100010;
    box-shadow: inset 0 0 0 1px #3d1a8f;
    color: #fff;
    font-family: var(--im-pixel);
    font-size: .85rem;
    white-space: nowrap;
    visibility: hidden;
    pointer-events: none;
    z-index: 4;
}

.im-head:hover {
    transform: translateY(-2px);
}

.im-head:hover::after {
    visibility: visible;
}

.im-more {
    font-family: var(--im-pixel);
    font-size: .95rem;
    color: #aaaaaa;
    padding-left: 4px;
}

.im-heads-note {
    font-size: .85rem;
    color: #8f8f8f;
}

.im-copy {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 7px 0 8px;
    background: #6b6d72;
    border: 2px solid #0e0e0e;
    border-radius: 0;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), inset 0 -3px 0 rgba(0, 0, 0, .35);
    color: #f2f2f2 !important;
    font-family: var(--im-pixel) !important;
    font-size: 1.05rem;
    font-weight: 500;
    text-shadow: 2px 2px 0 #2c2c2c;
    cursor: pointer;
    transition: transform .06s ease;
}

.im-copy:hover {
    border-color: #ffffff;
}

.im-copy:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, .25);
}

.im-copy.im-copied {
    background: var(--im-emerald-edge);
}

@media only screen and (max-width: 768px) {
    body.dark.imagimania .ui.masthead {
        min-height: 0;
        padding: 22px 0 !important;
    }

    .im-hero {
        justify-content: center;
    }

    .im-server-name {
        font-size: 1.35rem;
    }
}

/* =========================================================
 *  PANELS
 * ========================================================= */

body.dark.imagimania .ui.segment,
body.dark.imagimania .ui.card,
body.dark.imagimania .ui.segment.attached:not(.basic),
body.dark.imagimania .ui.vertical.menu,
body.dark.imagimania .ui.table,
body.dark.imagimania .ui.pagination {
    background: rgba(35, 37, 41, .88) !important;
    border: 1px solid var(--im-line) !important;
    border-radius: 6px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 10px 28px -16px rgba(0, 0, 0, .7) !important;
}

body.dark.imagimania .ui.card .content.header,
body.dark.imagimania .ui.top.attached.header,
body.dark.imagimania .ui.table thead th,
body.dark.imagimania .ui.top.attached.menu:not(.inverted) {
    background: var(--im-panel-2) !important;
    border-color: var(--im-line) !important;
    color: var(--im-text) !important;
}

body.dark.imagimania .ui.card .content.header,
body.dark.imagimania .ui.top.attached.header {
    font-family: var(--im-pixel) !important;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: .2px;
}

body.dark.imagimania #wrapper > .ui.container > h2.ui.header,
body.dark.imagimania #wrapper > .ui.container > h1.ui.header {
    font-family: var(--im-pixel) !important;
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.15;
    color: var(--im-text) !important;
}

body.dark.imagimania .ui.header,
body.dark.imagimania .ui.card > .content > .header {
    color: var(--im-text) !important;
}

body.dark.imagimania .ui.table td {
    border-color: var(--im-line) !important;
}

body.dark.imagimania .ui.selectable.table tbody tr:hover {
    background: var(--im-panel-2) !important;
}

/* links are emerald, except names that carry their role colour */
body.dark.imagimania .ui.segment a:not([style*="color"]):not(.button),
body.dark.imagimania .ui.table a:not([style*="color"]):not(.button),
body.dark.imagimania .ui.list > .item a.header,
body.dark.imagimania .ui.card > .content > .header a:not([style*="color"]),
body.dark.imagimania .ui.segment .forum_post a,
body.dark.imagimania .ui.comments .comment .forum_post a {
    color: var(--im-emerald) !important;
}

body.dark.imagimania .ui.segment a:not([style*="color"]):not(.button):hover,
body.dark.imagimania .ui.table a:not([style*="color"]):not(.button):hover {
    color: var(--im-emerald-hover) !important;
}

body.dark.imagimania .ui.segment a.ui.red.button,
body.dark.imagimania .ui.segment a.ui.negative.button {
    color: #fff !important;
}

/* =========================================================
 *  BUTTONS (Minecraft-style, they press down)
 * ========================================================= */

body.dark.imagimania .ui.button {
    border-radius: 3px !important;
    font-weight: 600 !important;
    transition: transform .07s ease, box-shadow .07s ease, background-color .15s ease !important;
}

body.dark.imagimania .ui.primary.button,
body.dark.imagimania .ui.primary.buttons .button,
body.dark.imagimania .ui.positive.button,
body.dark.imagimania .ui.green.button {
    background: var(--im-emerald) !important;
    color: var(--im-ink) !important;
    box-shadow: inset 0 -3px 0 var(--im-emerald-edge), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}

body.dark.imagimania .ui.primary.button:hover,
body.dark.imagimania .ui.positive.button:hover,
body.dark.imagimania .ui.green.button:hover {
    background: var(--im-emerald-hover) !important;
}

body.dark.imagimania .ui.default.button,
body.dark.imagimania .ui.mini.icon.button,
body.dark.imagimania .ui.basic.button,
body.dark.imagimania .ui.button:not(.primary):not(.positive):not(.green):not(.red):not(.negative):not(.blue) {
    background: var(--im-stone) !important;
    color: var(--im-text) !important;
    border: none;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

body.dark.imagimania .ui.button:not(.primary):not(.positive):not(.green):not(.red):not(.negative):not(.blue):hover {
    background: #55585f !important;
}

body.dark.imagimania .ui.red.button,
body.dark.imagimania .ui.negative.button {
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}

body.dark.imagimania .ui.button:active {
    transform: translateY(2px);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .35) !important;
}

/* =========================================================
 *  LABELS, FORMS, MENUS, MESSAGES, MODALS
 * ========================================================= */

body.dark.imagimania .ui.image.label {
    background: var(--im-panel) !important;
    border: 1px solid var(--im-line);
    color: var(--im-text) !important;
    border-radius: 3px !important;
}

body.dark.imagimania .ui.image.label:hover {
    border-color: #555960;
}

body.dark.imagimania .badge-primary,
body.dark.imagimania .ui.primary.label,
body.dark.imagimania .ui.blue.label {
    background: var(--im-emerald) !important;
    color: var(--im-ink) !important;
}

body.dark.imagimania .ui.form input:not(.button),
body.dark.imagimania .ui.form textarea,
body.dark.imagimania .ui.selection.dropdown,
body.dark.imagimania .ui.input > input {
    background: var(--im-nav) !important;
    border: 1px solid var(--im-line) !important;
    border-radius: 3px !important;
    color: var(--im-text) !important;
}

body.dark.imagimania .ui.form input:not(.button):focus,
body.dark.imagimania .ui.form textarea:focus,
body.dark.imagimania .ui.input > input:focus {
    border-color: var(--im-emerald) !important;
    box-shadow: 0 0 0 1px var(--im-emerald) !important;
}

body.dark.imagimania .ui.form input:invalid:not(:placeholder-shown) {
    border-color: #e0573b !important;
}

body.dark.imagimania .ui.checkbox input:checked ~ .box:before,
body.dark.imagimania .ui.checkbox input:checked ~ label:before {
    background: var(--im-emerald) !important;
    border-color: var(--im-emerald) !important;
}

body.dark.imagimania .ui.popup,
body.dark.imagimania .ui.secondary.menu .ui.popup,
body.dark.imagimania .ui.menu .dropdown.item .menu,
body.dark.imagimania .ui.dropdown .menu {
    background: var(--im-panel) !important;
    border: 1px solid var(--im-line) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .35) !important;
}

body.dark.imagimania .ui.popup:before {
    background: var(--im-panel) !important;
}

body.dark.imagimania .ui.dropdown .menu > .item:hover,
body.dark.imagimania .ui.menu .ui.dropdown .menu > .item:hover {
    background: var(--im-panel-2) !important;
    color: var(--im-text) !important;
}

body.dark.imagimania .ui.vertical.menu .active.item,
body.dark.imagimania .ui.vertical.pointing.menu .active.item:after {
    background: var(--im-panel-2) !important;
    color: var(--im-text) !important;
    border-color: transparent !important;
}

body.dark.imagimania .ui.vertical.menu .active.item {
    box-shadow: inset 3px 0 0 var(--im-emerald);
}

body.dark.imagimania .ui.tabular.menu .active.item,
body.dark.imagimania .ui.attached.tabular.menu .item.active {
    background: var(--im-panel) !important;
    border-color: var(--im-line) !important;
    color: var(--im-text) !important;
}

body.dark.imagimania .ui.pagination.menu .item.active {
    background: var(--im-emerald) !important;
    color: var(--im-ink) !important;
}

body.dark.imagimania .ui.message:not(.announcement) {
    background: var(--im-panel-2) !important;
    color: var(--im-text) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 0 1px var(--im-line) inset !important;
}

body.dark.imagimania .ui.message .header {
    color: var(--im-text) !important;
}

body.dark.imagimania .ui.modal,
body.dark.imagimania .ui.modal > .content {
    background: var(--im-panel) !important;
    color: var(--im-text) !important;
}

body.dark.imagimania .ui.modal > .header,
body.dark.imagimania .ui.modal > .actions {
    background: var(--im-panel-2) !important;
    color: var(--im-text) !important;
    border-color: var(--im-line) !important;
}

/* forum */

body.dark.imagimania #topic-post #post-sidebar,
body.dark.imagimania #topic-reply #reply-sidebar {
    border-right-color: var(--im-line) !important;
}

body.dark.imagimania .forum_post,
body.dark.imagimania .ui.comments .forum_post.text {
    color: var(--im-text) !important;
}

body.dark.imagimania blockquote,
body.dark.imagimania .blockquote {
    border-left: 3px solid var(--im-stone);
    background: var(--im-panel-2);
}

body.dark.imagimania .spoiler {
    background: var(--im-panel-2);
    color: var(--im-text);
}

/* footer */

body.dark.imagimania .ui.inverted.footer.segment {
    background: var(--im-nav) !important;
    border: none !important;
    border-top: 1px solid var(--im-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.dark.imagimania .footer-logo {
    display: inline-block;
    line-height: 0;
    margin-bottom: 1rem;
}

body.dark.imagimania .footer-logo img {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
}

body.dark.imagimania .ui.inverted.footer .ui.inverted.header {
    font-family: var(--im-pixel) !important;
    font-weight: 600;
    color: var(--im-text) !important;
}

body.dark.imagimania .ui.inverted.footer .link.list .item,
body.dark.imagimania .ui.inverted.footer .link.list a.item {
    color: var(--im-muted) !important;
}

body.dark.imagimania .ui.inverted.footer .link.list a.item:hover {
    color: var(--im-text) !important;
}

/* cookie notice + editor */

body.dark.imagimania .cc-window.cc-floating {
    background: var(--im-panel) !important;
    border: 1px solid var(--im-line) !important;
}

body.dark.imagimania .cc-window.cc-floating .cc-highlight .cc-btn.cc-allow {
    background: var(--im-emerald) !important;
    color: var(--im-ink) !important;
}

body.dark.imagimania .tox .tox-toolbar,
body.dark.imagimania .tox .tox-toolbar__primary,
body.dark.imagimania .tox .tox-menubar,
body.dark.imagimania .tox .tox-statusbar {
    background: var(--im-panel-2) !important;
}

/* minecraft username hint */

.mc-hint {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    margin-top: .5rem;
    padding: .6rem .75rem;
    border-radius: 3px;
    background: var(--im-panel-2);
    border-left: 3px solid var(--im-emerald);
    color: var(--im-text);
    font-size: .9rem;
    line-height: 1.45;
}

.mc-hint .icon {
    color: var(--im-emerald);
    margin: .1rem 0 0 0 !important;
}

.mc-hint b {
    color: var(--im-text);
}

/* =========================================================
 *  ROLE GLYPHS
 *  A role's "username CSS" in StaffCP sets e.g. --im-g:var(--im-g-owner);--im-gw:72px;
 *  and the glyph is drawn before the name everywhere NamelessMC shows a username.
 * ========================================================= */

:root {
    --im-g-owner: url("/uploads/glyphs/01_owner.png");
    --im-g-manager: url("/uploads/glyphs/02_manager.png");
    --im-g-sradmin: url("/uploads/glyphs/03_sr_admin.png");
    --im-g-admin: url("/uploads/glyphs/04_admin.png");
    --im-g-srmod: url("/uploads/glyphs/05_sr_mod.png");
    --im-g-mod: url("/uploads/glyphs/06_mod.png");
    --im-g-helper: url("/uploads/glyphs/07_helper.png");
    --im-g-builder: url("/uploads/glyphs/08_builder.png");
    --im-g-modeler: url("/uploads/glyphs/09_modeler.png");
    --im-g-lore: url("/uploads/glyphs/10_lore.png");
    --im-g-event: url("/uploads/glyphs/11_event.png");
}

/* the glyph sits a little under the name's cap height so the name stays the focus */
[style*="--im-g:"] {
    --im-gs: .75;
    display: inline-block;
    white-space: nowrap;
    padding-left: calc(var(--im-gw, 0px) * var(--im-gs) + 5px) !important;
    background-image: var(--im-g) !important;
    background-repeat: no-repeat !important;
    background-position: 0 54% !important;
    background-size: calc(var(--im-gw, 0px) * var(--im-gs)) calc(14px * var(--im-gs)) !important;
    image-rendering: auto;
}

:is(h1, h2)[style*="--im-g:"],
:is(h1, h2) [style*="--im-g:"] {
    --im-gs: 1.5;
    padding-left: calc(var(--im-gw, 0px) * var(--im-gs) + 8px) !important;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

/* sidebar lists (Latest Member etc.): let a glyph name drop to its own line instead of being clipped */
body.dark.imagimania .ui.list > .item:has(> .right.floated [style*="--im-g:"]) {
    flex-wrap: wrap;
}

body.dark.imagimania .ui.list > .item > .right.floated:has([style*="--im-g:"]) {
    flex: 0 0 auto;
    width: auto !important;
    margin-left: auto;
    overflow: visible;
}

/* =========================================================
 *  VERIFIED BADGE
 *  Not a glyph: it always sits right after the shown name.
 *  [glyph] Name [badge]. The image is set in template.php
 *  (/uploads/badges/verified.png, or the .svg placeholder).
 * ========================================================= */

[style*="--im-v"]::after {
    content: "";
    display: inline-block;
    width: .9em;
    height: .9em;
    margin-left: .2em;
    vertical-align: -.1em;
    background: var(--im-verified-badge) center / contain no-repeat;
}

[style*="--im-v"]:has(img)::after {
    content: none;
}

/* "Started by" line under a topic title is small text, so it keeps the small glyph */
body.dark.imagimania :is(h1, h2) .sub.header [style*="--im-g:"] {
    --im-gs: .75;
    image-rendering: auto;
}

[style*="--im-g:"]:has(img) {
    padding-left: 0 !important;
    background-image: none !important;
}

/* profile header: the name is centred under the picture; the role glyph hangs off its
   left side and the verified badge off its right, so neither pushes the name off centre */

body.dark.imagimania #profile-header .im-profile-name {
    margin-top: 10px;
}

body.dark.imagimania #profile-header .im-profile-name .im-pname {
    position: relative;
    display: inline-block;
    padding-left: 0 !important;
    background-image: none !important;
    font-size: 1.75rem;
    line-height: 1.15;
}

body.dark.imagimania #profile-header .im-profile-name .im-pname[style*="--im-v"]::after {
    /* centred on the capital letters (not the line box), measured for Rubik at this size */
    position: absolute;
    left: 100%;
    top: .23em;
    margin-left: 3px;
    transform: none;
    width: .64em;
    height: .64em;
}

/* role glyph directly under the name, like the account button in the top right */
body.dark.imagimania #profile-header .im-profile-name .im-pglyph {
    display: none;
}

body.dark.imagimania #profile-header .im-profile-name .im-pglyph[style*="--im-g:"] {
    display: block;
    width: calc(var(--im-gw, 0px) * .85);
    height: calc(14px * .85);
    margin: 5px auto 0;
    padding: 0 !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    image-rendering: pixelated;
}

body.dark.imagimania #profile-header .im-profile-name .im-pglyph::after {
    content: none !important;
}

/* Accepted / Denied tag in topic lists */
body.dark.imagimania .im-decision {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4;
    vertical-align: 2px;
}

body.dark.imagimania .im-decision-accepted {
    background: rgba(46, 204, 113, .16);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, .45);
}

body.dark.imagimania .im-decision-denied {
    background: rgba(229, 72, 77, .16);
    color: #ff6b70;
    border: 1px solid rgba(229, 72, 77, .45);
}

/* staff tools (profile page, Admin and above) */
body.dark.imagimania #profile-header .actions .ui.button.im-staff-open {
    background: #b8860b !important;
    color: #fff !important;
}

body.dark.imagimania .im-staff-form .ui.toggle.checkbox label,
body.dark.imagimania .im-staff-form .ui.toggle.checkbox input:checked ~ label {
    color: var(--im-text) !important;
}

body.dark.imagimania .im-staff-form .im-staff-hint {
    display: block;
    margin-top: 4px;
    color: var(--im-muted);
    font-size: .78rem;
}

body.dark.imagimania .im-staff-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body.dark.imagimania .im-staff-role {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--im-line);
    border-radius: 4px;
    background: var(--im-panel-2);
    cursor: pointer;
    font-size: .9rem;
    color: var(--im-text);
}

body.dark.imagimania .im-staff-role:has(input:checked) {
    border-color: var(--im-emerald);
}

body.dark.imagimania .im-staff-role.locked {
    opacity: .5;
    cursor: not-allowed;
}

body.dark.imagimania .im-staff-role input {
    margin: 0;
    accent-color: var(--im-emerald);
}

/* staff tools: bans */
body.dark.imagimania .im-staff-bans {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--im-line);
}

body.dark.imagimania .im-staff-bans-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--im-text);
}

body.dark.imagimania .im-staff-state {
    padding: 1px 7px;
    border-radius: 3px;
    background: rgba(229, 72, 77, .18);
    color: #ff8a8d;
    font-size: .78rem;
    font-weight: 600;
}

body.dark.imagimania .im-staff-bans-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

body.dark.imagimania .im-staff-bans-row .ui.button {
    flex: 1;
    margin: 0 !important;
}

body.dark.imagimania #im-punish-modal .im-punish-text {
    color: var(--im-muted);
    line-height: 1.5;
}

body.dark.imagimania #im-punish-modal .ui.red.button:disabled {
    opacity: .45 !important;
}

body.dark.imagimania #profile-header .im-profile-name .sub.header.im-mcname {
    margin-top: 2px !important;
    font-size: .8rem !important;
    font-weight: 400;
    color: var(--im-muted) !important;
    opacity: .85;
}

/* top-right account button: picture, then the name with the role glyph under it */

/* Fomantic switches the label to display:block while its menu is open, which threw the
   name out of line on hover; keep it a flex row at all times */
body.dark.imagimania #navbar .right.menu > .ui.image.label.im-account,
body.dark.imagimania #navbar .right.menu > .ui.image.label.im-account:hover,
body.dark.imagimania #navbar .right.menu > .ui.image.label.im-account.visible,
body.dark.imagimania #navbar .right.menu > .ui.image.label.im-account.active {
    display: inline-flex !important;
    align-items: center !important;
    transform: none !important;
}

body.dark.imagimania #navbar .im-account > img {
    display: block !important;
}

body.dark.imagimania #navbar .im-account .im-acc-text {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    line-height: 1;
    margin-top: 1px;
}

body.dark.imagimania #navbar .im-account .im-acc-name {
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

body.dark.imagimania #navbar .im-account .im-acc-glyph {
    display: none;
}

body.dark.imagimania #navbar .im-account .im-acc-glyph[style*="--im-g:"] {
    display: block;
    width: calc(var(--im-gw, 0px) * .6);
    height: calc(14px * .6);
    padding: 0 !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    image-rendering: pixelated;
}

body.dark.imagimania #navbar .im-account .im-acc-glyph::after {
    content: none !important;
}

@media only screen and (max-width: 768px) {
    body.dark.imagimania #navbar .im-account .im-acc-text {
        display: none;
    }
}

/* profile: Minecraft name under the display name */

body.dark.imagimania #profile-header .sub.header.im-mcname {
    margin-top: 4px;
    font-family: var(--im-font) !important;
    font-size: .95rem;
    color: var(--im-muted) !important;
}

/* profile pictures: uploads can be any shape, so crop them square */

body.dark.imagimania img.ui.avatar.image,
body.dark.imagimania img.ui.circular.image,
body.dark.imagimania .ui.image.label > img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

body.dark.imagimania .im-avatar-edit {
    position: relative;
    display: inline-block;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    line-height: 0;
    cursor: pointer;
}

body.dark.imagimania .im-avatar-edit img {
    display: block;
}

body.dark.imagimania .im-avatar-edit-hint {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--im-emerald);
    color: var(--im-ink);
    box-shadow: 0 0 0 3px var(--im-panel);
    transition: transform .15s var(--im-ease), background-color .15s ease;
}

body.dark.imagimania .im-avatar-edit-hint .icon {
    margin: 0;
    height: auto;
    font-size: .85rem;
    line-height: 1;
}

body.dark.imagimania .im-avatar-edit:hover .im-avatar-edit-hint {
    transform: scale(1.12);
    background: var(--im-emerald-hover);
}

body.dark.imagimania .im-avatar-edit:focus-visible {
    outline: 2px solid var(--im-emerald);
    outline-offset: 3px;
}

body.dark.imagimania .im-avatar-pick {
    display: flex;
    align-items: center;
    gap: 18px;
}

body.dark.imagimania .im-avatar-preview {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 2px solid var(--im-line);
    background: var(--im-nav);
    object-fit: cover;
}

body.dark.imagimania .im-avatar-preview:not([src]) {
    visibility: hidden;
}

body.dark.imagimania .im-avatar-side {
    min-width: 0;
}

body.dark.imagimania .im-avatar-file {
    margin-top: 8px;
    font-size: .9rem;
    color: var(--im-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.dark.imagimania .im-avatar-file:empty,
body.dark.imagimania .im-avatar-error:empty {
    display: none;
}

body.dark.imagimania .im-avatar-note {
    margin-top: 6px;
    font-size: .88rem;
    color: var(--im-muted);
}

body.dark.imagimania .im-avatar-error {
    margin-top: 6px;
    font-size: .9rem;
    color: #ff7a6b;
}

body.dark.imagimania .im-avatar-actions {
    margin-top: 16px;
}

/* forum index */

body.dark.imagimania #forum-node > .ui.header a {
    font-family: var(--im-pixel) !important;
    font-weight: 600;
    font-size: 1.25rem;
}

body.dark.imagimania #forum-node .one.wide.column > .icon {
    margin: 0;
    font-size: 1.5em;
    color: var(--im-emerald);
}

body.dark.imagimania #forum-node .im-forum-desc {
    margin: 1px 0 3px;
    font-size: .92rem;
    line-height: 1.4;
    color: var(--im-muted);
}

/* home page: featured Information category + link to the full forum */

body.dark.imagimania .im-featured {
    margin-bottom: 12px !important;
}

body.dark.imagimania a.im-forum-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    padding: 14px 18px;
    background: var(--im-panel);
    border: 1px solid var(--im-line);
    border-radius: 4px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .3);
    color: var(--im-text) !important;
    font-family: var(--im-pixel);
    font-size: 1.1rem;
    font-weight: 600;
    transition: border-color .15s ease, background-color .15s ease;
}

body.dark.imagimania a.im-forum-cta .icon {
    margin: 0;
    color: var(--im-emerald);
    transition: transform .15s var(--im-ease);
}

body.dark.imagimania a.im-forum-cta:hover {
    border-color: var(--im-emerald);
    background: var(--im-panel-2);
}

body.dark.imagimania a.im-forum-cta:hover .icon {
    transform: translateX(3px);
}

/* topics: the opening post leads, replies are compact and sit under it */

body.dark.imagimania .ui.segments.im-op {
    margin-bottom: 26px;
}

body.dark.imagimania .ui.segments.im-op > .ui.attached.segment:first-child {
    border-top: 3px solid var(--im-emerald) !important;
}

body.dark.imagimania .im-op .forum_post {
    font-size: 1.12rem;
    line-height: 1.65;
}

/* replies: one compact card, name and time on top, message underneath */

body.dark.imagimania .ui.segment.im-reply {
    margin: 0 0 12px;
    padding: 14px 18px !important;
}

body.dark.imagimania .im-reply-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 6px;
}

body.dark.imagimania .im-reply-avatar {
    flex: 0 0 40px;
    line-height: 0;
}

body.dark.imagimania .im-reply-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

body.dark.imagimania .im-reply-who {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
}

body.dark.imagimania .im-reply-name {
    font-size: 1rem;
    font-weight: 600;
}

body.dark.imagimania .im-reply-meta {
    font-size: .84rem;
    color: var(--im-muted);
}

body.dark.imagimania .im-reply-actions {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

body.dark.imagimania .im-reply-actions .ui.mini.icon.button {
    margin: 0;
    padding: .6em !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--im-muted) !important;
}

body.dark.imagimania .im-reply-actions .ui.mini.icon.button:hover {
    background: var(--im-panel-2) !important;
    color: var(--im-text) !important;
}

body.dark.imagimania .im-reply .forum_post {
    padding-left: 52px;
    font-size: .95rem;
}

body.dark.imagimania .im-reply-signature {
    margin-top: 8px;
    padding-left: 52px;
    max-height: 200px;
    overflow: auto;
    font-size: .85rem;
    color: var(--im-muted);
}

body.dark.imagimania .im-reply #reactions {
    margin: 8px 0 0 52px;
}

@media only screen and (min-width: 992px) {
    body.dark.imagimania .ui.segment.im-reply {
        margin-left: 32px;
    }
}

@media only screen and (max-width: 767px) {
    body.dark.imagimania .im-reply .forum_post,
    body.dark.imagimania .im-reply-signature {
        padding-left: 0;
    }

    body.dark.imagimania .im-reply #reactions {
        margin-left: 0;
    }
}

/* text editor: dark writing area to match the site */

body.dark.imagimania .tox .tox-edit-area__iframe {
    background: var(--im-nav) !important;
}

body.dark.imagimania .tox.tox-tinymce {
    border-color: var(--im-line) !important;
    border-radius: 4px !important;
}

/* reactions: no box, the add-reaction icons stay quiet until hovered */

body.dark.imagimania #topic-post #reactions.ui.mini.message {
    display: flow-root;
    min-height: 0;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

body.dark.imagimania #topic-post #reactions .reaction-button {
    opacity: .5;
    transition: opacity .15s ease;
}

body.dark.imagimania #topic-post #reactions .reaction-button:hover {
    opacity: 1;
}

/* login: resend the verification link */

body.dark.imagimania .im-resend {
    margin: 22px 0 6px;
    border: 1px solid var(--im-line);
    border-radius: 4px;
    background: var(--im-panel-2);
}

body.dark.imagimania .im-resend > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    color: var(--im-text);
    font-weight: 500;
    list-style: none;
    cursor: pointer;
}

body.dark.imagimania .im-resend > summary::-webkit-details-marker {
    display: none;
}

body.dark.imagimania .im-resend > summary::before {
    content: "";
    border-left: 6px solid var(--im-emerald);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transition: transform .15s ease;
}

body.dark.imagimania .im-resend[open] > summary::before {
    transform: rotate(90deg);
}

body.dark.imagimania .im-resend > form {
    padding: 0 14px 14px;
}

body.dark.imagimania .im-resend > form p {
    margin-bottom: 10px;
    font-size: .92rem;
    color: var(--im-muted);
}

/* staff review toggle + reviewed banner */

body.dark.imagimania .im-review {
    margin: 4px 0 14px !important;
    padding: 10px 12px;
    background: var(--im-panel-2);
    border-left: 3px solid var(--im-emerald);
    border-radius: 3px;
}

body.dark.imagimania .im-review .ui.toggle.checkbox label {
    color: var(--im-text) !important;
}

body.dark.imagimania .im-review .ui.toggle.checkbox input:checked ~ label:before {
    background-color: var(--im-emerald) !important;
}

body.dark.imagimania .ui.message.im-reviewed {
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 3px solid var(--im-emerald) !important;
}

body.dark.imagimania .ui.message.im-reviewed .icon {
    color: var(--im-emerald);
    margin: 0 !important;
}

/* staff review: same width as the opening post, shorter, sits right under it */

body.dark.imagimania .ui.segments.im-op:has(+ .im-review-card) {
    margin-bottom: 10px;
}

body.dark.imagimania .ui.segment.im-review-card {
    display: flex;
    align-items: stretch;
    margin: 0 0 26px;
    padding: 0 !important;
    overflow: hidden;
    border-top: 3px solid var(--im-emerald) !important;
}

body.dark.imagimania .im-review-side {
    flex: 0 0 18.75%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 12px;
    border-right: 1px solid var(--im-line);
    text-align: center;
}

body.dark.imagimania .im-review-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

body.dark.imagimania .im-review-name {
    margin-top: 4px;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
}

body.dark.imagimania .im-review-date {
    font-size: .82rem;
    color: var(--im-muted);
}

body.dark.imagimania .im-review-body {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 16px 52px 16px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Accept / Deny result */
body.dark.imagimania .ui.segment.im-review-card.im-review-accepted {
    border-top-color: #2ecc71 !important;
}

body.dark.imagimania .ui.segment.im-review-card.im-review-denied {
    border-top-color: #e5484d !important;
}

body.dark.imagimania .im-review-verdict {
    margin: 0 0 8px;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: .01em;
}

body.dark.imagimania .im-review-accepted .im-review-verdict { color: #2ecc71; }
body.dark.imagimania .im-review-denied .im-review-verdict { color: #e5484d; }

/* reply form: Send normally, Deny + Accept while "Review" is on */
body.dark.imagimania .im-reply-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.dark.imagimania .im-reply-buttons .ui.button { margin: 0 !important; }

body.dark.imagimania .im-reply-form .im-deny,
body.dark.imagimania .im-reply-form .im-accept,
body.dark.imagimania .im-reply-form.im-reviewing .im-send {
    display: none !important;
}

body.dark.imagimania .im-reply-form.im-reviewing .im-deny,
body.dark.imagimania .im-reply-form.im-reviewing .im-accept {
    display: inline-block !important;
}

body.dark.imagimania #topic-reply .im-reply-form .ui.button.im-deny {
    background-color: #e5484d !important;
    color: #fff !important;
    box-shadow: 0 -3px 0 rgba(0, 0, 0, .25) inset !important;
}

body.dark.imagimania #topic-reply .im-reply-form .ui.button.im-deny:hover { background-color: #f05a5f !important; }

body.dark.imagimania #topic-reply .im-reply-form .ui.button.im-accept {
    background-color: #2ecc71 !important;
    color: #0d1a12 !important;
    box-shadow: 0 -3px 0 rgba(0, 0, 0, .25) inset !important;
}

body.dark.imagimania #topic-reply .im-reply-form .ui.button.im-accept:hover { background-color: #45d985 !important; }

body.dark.imagimania .im-review-body .forum_post {
    font-size: 1rem;
    line-height: 1.6;
    width: 100%;
}

body.dark.imagimania .im-review-body .forum_post > :first-child { margin-top: 0; }
body.dark.imagimania .im-review-body .forum_post > :last-child { margin-bottom: 0; }

body.dark.imagimania .im-review-edit {
    position: absolute !important;
    top: 12px;
    right: 12px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    body.dark.imagimania .im-review-side {
        flex-basis: 31.25%;
    }
}

@media only screen and (max-width: 767px) {
    body.dark.imagimania .ui.segment.im-review-card {
        flex-direction: column;
    }

    body.dark.imagimania .im-review-side {
        flex-direction: row;
        flex-basis: auto;
        justify-content: flex-start;
        gap: 10px;
        border-right: 0;
        border-bottom: 1px solid var(--im-line);
        text-align: left;
    }

    body.dark.imagimania .im-review-avatar {
        width: 40px;
        height: 40px;
    }

    body.dark.imagimania .im-review-name {
        margin-top: 0;
    }
}

/* text pasted in black from other editors stays readable on the dark theme */
body.dark.imagimania .forum_post [style*="color: rgb(0, 0, 0)"],
body.dark.imagimania .forum_post [style*="color: #000000"],
body.dark.imagimania .forum_post [style*="color:#000000"],
body.dark.imagimania .forum_post [style*="color: black"] {
    color: var(--im-text) !important;
}

/* =========================================================
 *  AMBIENCE
 *  Two slow pools of light behind the page, a faint light that
 *  follows the pointer (imagimania.js), drifting motes in the
 *  banner, and small hover details. Transforms and opacity
 *  only, so it stays cheap on low-end machines.
 * ========================================================= */

body.dark.imagimania::before {
    content: "";
    position: fixed;
    inset: -15vmax;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(38vmax 38vmax at 12% 55%, rgba(60, 207, 107, .10), transparent 70%),
        radial-gradient(44vmax 44vmax at 88% 80%, rgba(52, 150, 170, .08), transparent 70%),
        radial-gradient(30vmax 30vmax at 60% 30%, rgba(120, 90, 200, .045), transparent 70%);
    animation: im-ambient 70s ease-in-out infinite alternate;
}

@keyframes im-ambient {
    from { transform: translate3d(-2%, -1.5%, 0) rotate(0deg); }
    to { transform: translate3d(2%, 2%, 0) rotate(4deg); }
}

.im-glow {
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(60, 207, 107, .075), rgba(60, 207, 107, 0));
    opacity: 0;
    transition: opacity .5s ease;
    will-change: transform;
}

.im-glow.im-on {
    opacity: 1;
}

.im-motes {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.im-motes span {
    position: absolute;
    bottom: -8px;
    left: var(--x);
    width: var(--s);
    height: var(--s);
    background: #9af5b9;
    box-shadow: 0 0 8px rgba(60, 207, 107, .7);
    opacity: 0;
    animation: im-mote var(--d) linear var(--delay) infinite;
}

@keyframes im-mote {
    0% { transform: translate3d(0, 0, 0); opacity: 0; }
    15% { opacity: .6; }
    80% { opacity: .35; }
    100% { transform: translate3d(var(--sway), -330px, 0); opacity: 0; }
}

/* navbar turns into frosted glass once you scroll */
body.dark.imagimania.im-scrolled #navbar.ui.secondary.menu {
    background: rgba(20, 21, 24, .82) !important;
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .8);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.dark.imagimania.im-scrolled #navbar.ui.secondary.menu {
        -webkit-backdrop-filter: saturate(140%) blur(12px);
        backdrop-filter: saturate(140%) blur(12px);
    }
}

/* nav links: a short emerald line grows in on hover */
body.dark.imagimania #navbar a.item:not(.active):not(.toc)::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -11px;
    height: 3px;
    background: var(--im-emerald);
    transform: scaleX(0);
    transition: transform .25s var(--im-ease);
}

body.dark.imagimania #navbar a.item:not(.active):not(.toc):hover::after {
    transform: scaleX(.5);
}

/* forum rows and the forum link bar respond to the pointer */
body.dark.imagimania #forum-node .centered.row {
    border-radius: 6px;
    transition: background-color .2s ease;
}

body.dark.imagimania #forum-node .centered.row:hover {
    background: rgba(255, 255, 255, .025);
}

/* primary buttons get a soft halo on hover */
body.dark.imagimania .ui.primary.button:hover,
body.dark.imagimania .ui.positive.button:hover {
    box-shadow: inset 0 -3px 0 var(--im-emerald-edge), inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 4px rgba(60, 207, 107, .14) !important;
}

/* still visible for people who turn off animations, just without movement */
@media (prefers-reduced-motion: reduce) {
    body.dark.imagimania::before {
        animation: none;
    }

    .im-motes,
    .im-glow {
        display: none;
    }
}

/* =========================================================
 *  MOTION
 *  html.im-intro: first visit in this tab or a refresh, one entrance sequence
 *  html.im-nav:   switching pages, content slides in, nothing fades
 * ========================================================= */

@keyframes im-drop {
    from { transform: translateY(-100%); }
    to { transform: none; }
}

@keyframes im-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes im-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes im-logo-in {
    from { opacity: 0; transform: translateY(-24px) scale(.8); }
    to { opacity: 1; transform: none; }
}

@keyframes im-server-in {
    from { opacity: 0; transform: translateX(-32px); }
    to { opacity: 1; transform: none; }
}

@keyframes im-slide {
    from { transform: translateY(16px); }
    to { transform: none; }
}

html.im-intro body.dark.imagimania #navbar {
    animation: im-drop .5s var(--im-ease) backwards;
}

html.im-intro body.dark.imagimania #navbar > .ui.container > .item,
html.im-intro body.dark.imagimania #navbar > .ui.container > .right.menu {
    animation: im-fade .4s ease .25s backwards;
}

html.im-intro body.dark.imagimania .nav-logo img {
    animation: im-logo-in .8s var(--im-ease) .15s backwards;
}

html.im-intro body.dark.imagimania .ui.masthead {
    animation: im-fade .7s ease .05s backwards;
}

html.im-intro .im-server {
    animation: im-server-in .6s var(--im-ease) .45s backwards;
}

html.im-intro body.dark.imagimania #wrapper > .ui.container {
    animation: im-fade-up .6s var(--im-ease) .55s backwards;
}

html.im-nav body.dark.imagimania #wrapper > .ui.container {
    animation: im-slide .45s var(--im-ease) backwards;
}

body.im-leaving #wrapper > .ui.container {
    transform: translateY(-10px);
    transition: transform .15s ease-in;
}