/* ==========================================================================
   Nomadas — theme for Azuriom
   Clean, minimal, Minecraft/Mojang-inspired styling.
   ========================================================================== */

:root {
    /* The three-tier minecraft.net type system, self-hosted from Mojang's
       own web theme (github.com/Mojang/web-theme-bootstrap, MIT), see the
       @font-face block below:
         1. "Minecraft Ten"   — chunky ALL-CAPS display → main titles
         2. "Minecraft Seven" — the pixel in-game font, a.k.a. "Mojangles"
                                → sub-titles / small-box titles
         3. "Noto Sans"       — running body text (Google Fonts) */
    --nm-font-body: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

    /* The Minecraft display/heading faces are opt-in — only the home page
       (body.nm-home-page below) switches these to the pixel fonts. Every
       other page falls back to the regular body font. */
    --nm-font-display: var(--nm-font-body);
    --nm-font-heading: var(--nm-font-body);

    /* Legacy aliases kept for existing rules */
    --mc-vanilla-fontlist: var(--nm-font-display);
    --mc-default--fontlist: var(--nm-font-body);
    --mc-default-fontlist: var(--nm-font-body);

    /* Shared max content width for the home page: the hero panel and the
       feature row are both capped here so everything lines up on common
       desktop resolutions (1366 / 1920). */
    --nm-content-width: 1200px;
    --nm-home-gutter: clamp(16px, 4vw, 48px);
}

/* Minecraft.net type system — home page only, see note above.
     1. "Minecraft Ten"   — chunky ALL-CAPS display → hero title
     2. "Minecraft Seven" — the pixel in-game font ("Mojangles") → hero
                             sub-titles / small-box titles */
body.nm-home-page {
    --nm-font-display: "Minecraft Ten", "Noto Sans", "Helvetica Neue", "Arial", sans-serif;
    --nm-font-heading: "Minecraft Seven", "Noto Sans", "Helvetica Neue", "Arial", sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   Minecraft.net webfonts — self-hosted, from Mojang's official web theme
   (github.com/Mojang/web-theme-bootstrap, MIT-licensed package).
   "Minecraft Seven" is the in-game font also known as "Mojangles".
   ------------------------------------------------------------------------- */
@font-face {
    font-family: "Minecraft Ten";
    src: url("../fonts/Minecraft-Tenv2.woff2") format("woff2"),
         url("../fonts/Minecraft-Tenv2.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Minecraft Seven";
    src: url("../fonts/Minecraft-Seven_v2.woff") format("woff"),
         url("../fonts/Minecraft-Seven_v2.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html {
    height: 100%;
}

body.nm-body {
    min-height: 100dvh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--nm-bg);
    color: var(--nm-fg);
    font-family: var(--mc-default--fontlist);
    -webkit-font-smoothing: antialiased;
    transition: background-color .15s ease, color .15s ease;
}

/* Sticky footer: header/footer keep their natural size, main grows to
   fill any leftover space so the footer stays pinned to the viewport
   bottom on short pages, and flows below the fold on tall ones. */
body.nm-body > header,
body.nm-body > footer {
    flex: 0 0 auto;
    /* .nm-home (home page hero) isolates its own stacking context for its
       fixed background photo — that promotes it to a later paint step than
       plain in-flow siblings, which was rendering it over the footer.
       Giving the footer its own (positive) stacking context guarantees it
       always paints on top, regardless of that. */
    position: relative;
    z-index: 1;
}

body.nm-body > main#app {
    flex: 1 1 auto;
}

.nm-body a {
    text-decoration: none;
    color: inherit;
}

.nm-body img {
    max-width: 100%;
    height: auto;
}

/* Tier 1 — main titles: "Minecraft Ten" (caps-only display face). */
.nm-body h1 {
    font-family: var(--nm-font-display);
    font-weight: normal;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .01em;
    margin: 0;
}

/* Tier 2 — sub-titles / section headings: "Minecraft Seven" (Mojangles). */
.nm-body h2, .nm-body h3, .nm-body h4, .nm-body h5, .nm-body h6 {
    font-family: var(--nm-font-heading);
    font-weight: normal;
    line-height: 1.2;
    letter-spacing: .01em;
    margin: 0;
}

/* -------------------------------------------------------------------------
   Minecraft-style relief box
   Thin light border on top/left, thick dark border on bottom/right,
   giving the classic "raised panel" bevel look.
   ------------------------------------------------------------------------- */

.nm-box,
.nm-page .card,
.nm-feature-card {
    background: var(--nm-bg-alt);
    border-style: solid;
    border-width: 2px 4px 4px 2px;
    border-top-color: color-mix(in srgb, var(--nm-bg-alt) 55%, white);
    border-left-color: color-mix(in srgb, var(--nm-bg-alt) 55%, white);
    border-right-color: color-mix(in srgb, var(--nm-bg-alt) 45%, black);
    border-bottom-color: color-mix(in srgb, var(--nm-bg-alt) 45%, black);
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}

/* -------------------------------------------------------------------------
   Navbar
   ------------------------------------------------------------------------- */

.nm-navbar {
    border-bottom: 1px solid color-mix(in srgb, var(--nm-fg) 8%, transparent);
    background: color-mix(in srgb, var(--nm-bg) 92%, transparent);
    backdrop-filter: blur(10px);
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 20;
    transition: box-shadow .15s ease;
}

.nm-navbar.nm-navbar-scrolled {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.nm-navbar-inner {
    width: 100%;
    margin: 0;
    padding: 12px clamp(16px, 4vw, 48px);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-items: stretch;
    gap: 16px;
}

.nm-brand {
    display: inline-flex;
    align-items: center;
    justify-self: start;
}

.nm-brand img {
    height: 42px;
    width: auto;
    object-fit: contain;
}

.nm-brand-text {
    font-family: var(--nm-font-display);
    font-weight: normal;
    font-size: 1.3rem;
    letter-spacing: .02em;
    color: var(--nm-fg);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
}

.nm-links-wrap {
    display: contents;
}

.nm-links {
    display: flex;
    align-items: stretch;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nm-links > li {
    flex: 0 0 auto;
    display: flex;
}

/* Squared, sunken nav buttons — a Minecraft inventory-slot look (dark
   top/left, light bottom/right bevel, inset shadow), so they read as
   buttons "embedded" in the navbar itself and stay visually distinct from
   the rounded, flatter profile buttons (.nm-navbtn). Tight padding, no
   dead space, sharp corners. */
.nm-links .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 96px;
    white-space: nowrap;
    color: color-mix(in srgb, var(--nm-fg) 80%, transparent);
    background: color-mix(in srgb, var(--nm-bg) 80%, black 12%);
    border-style: solid;
    border-width: 2px 1px 1px 2px;
    border-top-color: color-mix(in srgb, var(--nm-bg-alt) 40%, black);
    border-left-color: color-mix(in srgb, var(--nm-bg-alt) 40%, black);
    border-right-color: color-mix(in srgb, var(--nm-bg-alt) 65%, white);
    border-bottom-color: color-mix(in srgb, var(--nm-bg-alt) 65%, white);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3);
    font-family: var(--nm-font-heading);
    font-weight: normal;
    font-size: .92rem;
    text-transform: none;
    letter-spacing: .02em;
    padding: 7px 12px;
    border-radius: 3px;
    transition: color .12s ease, background-color .12s ease, transform .08s ease;
}

.nm-links .nav-link i {
    font-size: 1.05em;
    line-height: 1;
}

/* Hover / keyboard focus: a clearly visible amber fill, bevel kept intact. */
.nm-links .nav-link:hover,
.nm-links .nav-link:focus-visible {
    color: var(--nm-fg);
    background: color-mix(in srgb, var(--nm-accent) 30%, color-mix(in srgb, var(--nm-bg) 80%, black 12%));
}

.nm-links .nav-link:active {
    transform: translateY(1px);
}

/* Never flag a nav button as "selected": the current-page item keeps the
   plain slot look, identical to the rest. */
.nm-links .nav-link.active {
    color: color-mix(in srgb, var(--nm-fg) 80%, transparent);
    background: color-mix(in srgb, var(--nm-bg) 80%, black 12%);
}

.nm-links .nav-link.active:hover,
.nm-links .nav-link.active:focus-visible {
    color: var(--nm-fg);
    background: color-mix(in srgb, var(--nm-accent) 30%, color-mix(in srgb, var(--nm-bg) 80%, black 12%));
}

.nm-account {
    justify-self: end;
    align-items: center;
    gap: 10px;
}

.nm-toggler {
    justify-self: end;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--nm-fg) 15%, transparent);
    color: var(--nm-fg);
    border-radius: 10px;
    font-size: 1.2rem;
    padding: 4px 10px;
    line-height: 1;
}

/* Uniform account buttons: theme toggle / notifications / user, same height & style */
.nm-navbtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--nm-fg) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--nm-fg) 10%, transparent);
    color: color-mix(in srgb, var(--nm-fg) 90%, transparent);
    font-weight: 600;
    font-size: .85rem;
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.nm-navbtn:hover {
    background: color-mix(in srgb, var(--nm-fg) 12%, transparent);
    border-color: var(--nm-accent);
    color: var(--nm-fg);
}

.nm-navbtn.dropdown-toggle::after {
    display: none;
}

.nm-navbtn-icon {
    width: 42px;
    padding: 0;
    font-size: 1.05rem;
}

.nm-navbtn-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: .62rem;
    padding: 3px 5px;
    line-height: 1;
}

.nm-navbtn-user {
    padding: 0 14px 0 6px;
    max-width: 190px;
}

.nm-navbtn-avatar {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    object-fit: cover;
    image-rendering: pixelated;
    flex: 0 0 auto;
}

.nm-navbtn-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-menu {
    --bs-dropdown-color: color-mix(in srgb, var(--nm-fg) 85%, transparent);
    --bs-dropdown-link-color: color-mix(in srgb, var(--nm-fg) 85%, transparent);
    --bs-dropdown-link-hover-color: var(--nm-fg);
    --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--nm-fg) 8%, transparent);
    --bs-dropdown-link-active-color: var(--nm-fg);
    --bs-dropdown-link-active-bg: color-mix(in srgb, var(--nm-fg) 10%, transparent);
    --bs-dropdown-header-color: color-mix(in srgb, var(--nm-fg) 55%, transparent);
    --bs-dropdown-divider-bg: color-mix(in srgb, var(--nm-fg) 8%, transparent);
    --bs-dropdown-bg: var(--nm-bg-alt);
    background: var(--nm-bg-alt);
    border: 1px solid color-mix(in srgb, var(--nm-fg) 8%, transparent);
    border-radius: 14px;
    overflow: hidden;
}

.dropdown-header {
    color: color-mix(in srgb, var(--nm-fg) 55%, transparent);
}

.dropdown-item {
    color: color-mix(in srgb, var(--nm-fg) 85%, transparent);
    display: flex;
    align-items: center;
    gap: 10px;
}

.dropdown-item i {
    width: 1.1em;
    text-align: center;
    color: var(--nm-accent);
}

.dropdown-item:hover, .dropdown-item:focus {
    background: color-mix(in srgb, var(--nm-fg) 6%, transparent);
    color: var(--nm-fg);
}

@media (max-width: 991.98px) {
    .nm-navbar-inner {
        grid-template-columns: 1fr auto;
    }

    .nm-links-wrap {
        display: block;
        grid-column: 1 / -1;
    }

    .nm-links {
        flex-direction: column;
        align-items: stretch;
        max-width: none;
        padding-top: 12px;
    }

    .nm-links > li {
        flex: 0 0 auto;
    }

    .nm-links .nav-link {
        justify-content: flex-start;
        text-align: left;
        white-space: normal;
        min-width: 0;
    }

    .nm-account {
        display: none !important;
    }
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

.nm-footer {
    flex: 0 0 auto;
    border-top: 1px solid color-mix(in srgb, var(--nm-fg) 8%, transparent);
}

.nm-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    font-size: .8rem;
    color: color-mix(in srgb, var(--nm-fg) 55%, transparent);
}

.nm-footer-copy {
    margin: 0;
}

.nm-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nm-footer-links a:hover {
    color: var(--nm-fg);
}

@media (max-width: 767.98px) {
    .nm-footer-inner {
        flex-direction: column-reverse;
        justify-content: center;
        text-align: center;
        padding: 18px 24px;
        gap: 10px 24px;
    }

    .nm-footer-links {
        justify-content: center;
    }
}

/* -------------------------------------------------------------------------
   Generic inner pages (posts, shop, profile, login, register...)
   ------------------------------------------------------------------------- */

.nm-page {
    color: color-mix(in srgb, var(--nm-fg) 92%, transparent);
}

/* Page title: big, centered, with breathing room before the content box.
   Matches every generic page (title is a direct child of .nm-page) and the
   auth pages (login/register/2fa/password reset, whose title sits inside a
   centered row/col wrapper). */
.nm-page > h1,
.nm-page > .row.justify-content-center > [class*="col"] > h1:first-child {
    text-align: center;
    font-size: clamp(28px, 4vw, 42px);
    letter-spacing: -.01em;
    color: var(--nm-fg);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
    margin: 0 0 clamp(28px, 5vh, 48px);
}

.nm-page .card {
    --bs-card-bg: var(--nm-bg-alt);
    --bs-card-cap-bg: color-mix(in srgb, var(--nm-bg-alt) 85%, black);
    --bs-card-color: var(--nm-fg);
    --bs-card-border-radius: 4px;
    color: var(--nm-fg);
}

.nm-page .card-header,
.nm-page .card-footer {
    border-color: color-mix(in srgb, var(--nm-bg-alt) 45%, black);
}

.nm-page label,
.nm-page .form-label,
.nm-page .form-check-label {
    color: color-mix(in srgb, var(--nm-fg) 92%, transparent);
}

.nm-page .form-control,
.nm-page .form-select {
    background-color: var(--nm-bg);
    color: var(--nm-fg);
    border: 2px solid color-mix(in srgb, var(--nm-fg) 15%, transparent);
    border-radius: 4px;
}

.nm-page .form-control::placeholder {
    color: color-mix(in srgb, var(--nm-fg) 40%, transparent);
}

.nm-page .form-control:focus,
.nm-page .form-select:focus {
    background-color: var(--nm-bg);
    color: var(--nm-fg);
    border-color: var(--nm-accent);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--nm-accent) 30%, transparent);
}

.nm-page .form-check-input {
    background-color: var(--nm-bg);
    border-color: color-mix(in srgb, var(--nm-fg) 30%, transparent);
}

/* -------------------------------------------------------------------------
   Long-form content (CMS pages like /normas, /legal, and post bodies)
   Rendered inside a raised .nm-box; this styles the rich text within it.
   ------------------------------------------------------------------------- */

.nm-prose {
    padding: clamp(20px, 4vw, 42px);
    color: color-mix(in srgb, var(--nm-fg) 90%, transparent);
    line-height: 1.7;
    overflow-wrap: break-word;
}

.nm-prose > :first-child {
    margin-top: 0;
}

.nm-prose > :last-child {
    margin-bottom: 0;
}

.nm-prose h1,
.nm-prose h2,
.nm-prose h3,
.nm-prose h4,
.nm-prose h5 {
    font-family: var(--nm-font-heading);
    color: var(--nm-fg);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .25);
    line-height: 1.25;
    margin: 1.9em 0 .6em;
}

.nm-prose h2 {
    font-size: 1.5rem;
}

.nm-prose h3 {
    font-size: 1.2rem;
    padding-bottom: .35em;
    border-bottom: 2px solid color-mix(in srgb, var(--nm-accent) 45%, transparent);
}

.nm-prose h4 {
    font-size: 1rem;
    color: var(--nm-accent);
    text-transform: uppercase;
    letter-spacing: .03em;
    text-shadow: none;
}

.nm-prose p {
    margin: 0 0 1em;
}

.nm-prose a {
    color: var(--nm-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.nm-prose a:hover {
    color: var(--nm-accent-dark);
}

.nm-prose ul,
.nm-prose ol {
    margin: 0 0 1em;
    padding-left: 1.4em;
}

.nm-prose li {
    margin-bottom: .4em;
}

.nm-prose hr {
    border: 0;
    height: 3px;
    margin: 2em 0;
    opacity: .7;
    background: repeating-linear-gradient(
        90deg,
        color-mix(in srgb, var(--nm-fg) 22%, transparent) 0 8px,
        transparent 8px 16px
    );
}

.nm-prose blockquote {
    margin: 0 0 1em;
    padding: .6em 1em;
    border-left: 4px solid var(--nm-accent);
    background: color-mix(in srgb, var(--nm-fg) 5%, transparent);
    color: color-mix(in srgb, var(--nm-fg) 75%, transparent);
}

.nm-prose img {
    border-radius: 4px;
}

.nm-prose code {
    background: color-mix(in srgb, var(--nm-fg) 10%, transparent);
    padding: .1em .35em;
    border-radius: 3px;
    font-size: .9em;
}

.nm-prose pre {
    background: var(--nm-bg);
    border: 1px solid color-mix(in srgb, var(--nm-fg) 15%, transparent);
    border-radius: 4px;
    padding: 1em;
    overflow-x: auto;
}

.nm-prose pre code {
    background: none;
    padding: 0;
}

.nm-prose table {
    width: 100%;
    margin: 0 0 1em;
    border-collapse: collapse;
}

.nm-prose th,
.nm-prose td {
    padding: .5em .75em;
    border: 1px solid color-mix(in srgb, var(--nm-fg) 15%, transparent);
    text-align: left;
}

.nm-prose th {
    background: color-mix(in srgb, var(--nm-fg) 8%, transparent);
    color: var(--nm-fg);
}

/* -------------------------------------------------------------------------
   Theme-colored Bootstrap components (replaces Bootstrap's default blue)
   ------------------------------------------------------------------------- */

.nm-body {
    --bs-primary: var(--nm-accent);
    --bs-primary-rgb: var(--nm-accent-rgb);
    --bs-link-color: var(--nm-accent);
    --bs-link-color-rgb: var(--nm-accent-rgb);
    --bs-link-hover-color: var(--nm-accent-dark);
    --bs-focus-ring-color: color-mix(in srgb, var(--nm-accent) 25%, transparent);
    --bs-pagination-active-bg: var(--nm-accent);
    --bs-pagination-active-border-color: var(--nm-accent);
}

.nm-body .btn-primary {
    --bs-btn-color: #16130a;
    --bs-btn-bg: var(--nm-accent);
    --bs-btn-border-color: color-mix(in srgb, var(--nm-accent) 55%, black);
    --bs-btn-hover-color: #16130a;
    --bs-btn-hover-bg: color-mix(in srgb, var(--nm-accent) 88%, white);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--nm-accent) 55%, black);
    --bs-btn-focus-shadow-rgb: var(--nm-accent-rgb);
    --bs-btn-active-color: #16130a;
    --bs-btn-active-bg: var(--nm-accent-dark);
    --bs-btn-active-border-color: color-mix(in srgb, var(--nm-accent) 55%, black);
    --bs-btn-disabled-bg: var(--nm-accent);
    --bs-btn-disabled-border-color: color-mix(in srgb, var(--nm-accent) 55%, black);
    border-width: 2px 4px 4px 2px;
    border-radius: 6px;
    font-weight: 700;
}

.nm-body .btn-outline-primary {
    --bs-btn-color: var(--nm-accent);
    --bs-btn-border-color: var(--nm-accent);
    --bs-btn-hover-color: #16130a;
    --bs-btn-hover-bg: var(--nm-accent);
    --bs-btn-hover-border-color: var(--nm-accent);
    --bs-btn-focus-shadow-rgb: var(--nm-accent-rgb);
    --bs-btn-active-color: #16130a;
    --bs-btn-active-bg: var(--nm-accent);
    --bs-btn-active-border-color: var(--nm-accent);
    --bs-btn-disabled-color: var(--nm-accent);
    --bs-btn-disabled-border-color: var(--nm-accent);
}

.nm-body .form-check-input:checked {
    background-color: var(--nm-accent);
    border-color: var(--nm-accent);
}

.nm-body .form-check-input:focus {
    border-color: var(--nm-accent);
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--nm-accent) 25%, transparent);
}

/* -------------------------------------------------------------------------
   Home — single-screen hero
   One viewport tall, no page scroll: a two-column layout (glass hero panel
   + 2x2 feature grid) centred in the space between navbar and footer. The
   lock is released below the lg breakpoint, where it stacks and scrolls.
   ------------------------------------------------------------------------- */

/* Turn the body into a fixed-height flex column (navbar / main / footer);
   main is the only flexible track and never overflows. */
body.nm-home-page {
    height: 100dvh;
    overflow: hidden;
}

body.nm-home-page > main#app {
    min-height: 0;
}

.nm-home {
    position: relative;
    isolation: isolate;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 3vh, 36px) var(--nm-home-gutter);
    background-color: var(--nm-bg);
    overflow: hidden;
}

/* Full-screen background photo + shade. Both layers are position:fixed so
   the image covers the whole viewport (behind navbar and footer too) and
   never seams. The shade keeps the panel and headings legible on top, in
   both the light and dark palettes. */
.nm-home::before,
.nm-home::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.nm-home::before {
    z-index: -2;
    background-image: var(--nm-hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(.82) saturate(1.04);
}

.nm-home::after {
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 62% at 50% 48%,
            color-mix(in srgb, var(--nm-bg) 72%, transparent),
            color-mix(in srgb, var(--nm-bg) 40%, transparent) 55%,
            transparent 100%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--nm-bg) 78%, transparent),
            color-mix(in srgb, var(--nm-bg) 32%, transparent) 40%,
            color-mix(in srgb, var(--nm-bg) 94%, transparent));
}

/* Two-column grid: hero panel + feature grid, capped and centred so the
   side gutters never grow into big empty margins. */
.nm-home-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1240px;
    max-height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: clamp(14px, 2.4vw, 32px);
    align-items: stretch;
}

/* No features configured → the panel takes the whole (narrower) row. */
.nm-home-inner:not(:has(.nm-features)) {
    grid-template-columns: minmax(0, 720px);
    justify-content: center;
}

/* -------------------------------------------------------------------------
   Hero panel
   Translucent, blurred glass surface (the background photo shows through)
   with a soft light/dark bevel. Its contents are vertically centred so the
   panel never leaves a big empty band above or below the text.
   ------------------------------------------------------------------------- */

.nm-hero-panel {
    position: relative;
    display: flex;
    min-height: 0;
    background: color-mix(in srgb, var(--nm-bg-alt) 46%, transparent);
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    border: 1px solid color-mix(in srgb, white 20%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 30%, transparent),
        inset 0 -1px 0 rgba(0, 0, 0, .35),
        0 1px 0 rgba(0, 0, 0, .2),
        0 24px 60px rgba(0, 0, 0, .45);
}

.nm-hero-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: clamp(9px, 1.7vh, 18px);
    width: 100%;
    padding: clamp(18px, 3.4vh, 40px) clamp(20px, 3vw, 46px);
    text-align: left;
    overflow: hidden;
}

.nm-hero-logo {
    align-self: flex-start;
    max-height: clamp(60px, 12vh, 148px);
    width: auto;
    object-fit: contain;
    filter:
        drop-shadow(0 6px 18px rgba(0, 0, 0, .5))
        drop-shadow(0 0 16px color-mix(in srgb, var(--nm-accent) 40%, transparent));
}

.nm-hero-title {
    width: 100%;
    font-size: clamp(30px, 4.4vw, 50px);
    line-height: 1.05;
    letter-spacing: -.01em;
    background: linear-gradient(180deg, color-mix(in srgb, var(--nm-accent) 35%, var(--nm-fg)), var(--nm-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 3px 3px 0 rgba(0, 0, 0, .35);
    filter: drop-shadow(0 0 16px color-mix(in srgb, var(--nm-accent) 35%, transparent));
}

/* Short, punchy line under the logo — the "epic but humble" headline. */
.nm-hero-tagline {
    width: 100%;
    margin: 0;
    font-family: var(--nm-font-display);
    font-weight: normal;
    text-transform: uppercase;
    font-size: clamp(15px, 2vw, 24px);
    line-height: 1.15;
    letter-spacing: .01em;
    color: var(--nm-fg);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .45);
}

.nm-hero-subtitle {
    width: 100%;
    margin: 0;
    color: color-mix(in srgb, var(--nm-fg) 82%, transparent);
    font-family: var(--nm-font-body);
    font-size: clamp(12.5px, .78rem + .2vh, 15px);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

/* Online status — a lighter glass strip that matches the panel material. */
.nm-hero-online {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    margin-top: 2px;
    padding: 10px 18px;
    background: color-mix(in srgb, var(--nm-bg) 30%, transparent);
    border: 1px solid color-mix(in srgb, white 14%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 18%, transparent),
        0 6px 20px rgba(0, 0, 0, .3);
}

.nm-online-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--nm-font-heading);
    font-size: .95rem;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: color-mix(in srgb, var(--nm-fg) 92%, transparent);
    white-space: nowrap;
}

.nm-online-sep {
    color: color-mix(in srgb, var(--nm-fg) 30%, transparent);
    font-weight: 700;
}

.nm-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nm-accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--nm-accent) 60%, transparent);
    animation: nm-pulse 2s infinite;
}

@keyframes nm-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nm-accent) 55%, transparent); }
    70% { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.nm-players {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.nm-player-head {
    width: clamp(26px, 3.4vh, 36px);
    height: clamp(26px, 3.4vh, 36px);
    border-radius: 4px;
    border: 2px solid color-mix(in srgb, var(--nm-fg) 12%, transparent);
    image-rendering: pixelated;
    transition: transform .12s ease, border-color .12s ease;
}

.nm-player-head:hover {
    transform: translateY(-3px);
    border-color: var(--nm-accent);
}

.nm-player-head-link {
    display: inline-flex;
    line-height: 0;
    cursor: pointer;
}

.nm-hero-actions {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 12px;
    margin-top: 2px;
}

/* Buttons share the panel's glass/relief language and split its width. */
.nm-hero-box .nm-hero-actions .nm-btn {
    flex: 1 1 0;
    min-width: 150px;
    justify-content: center;
    border: 1px solid color-mix(in srgb, white 25%, transparent);
    border-radius: 0;
    padding: 13px 20px;
    font-family: var(--nm-font-heading);
    font-weight: normal;
    font-size: .92rem;
    letter-spacing: .02em;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 30%, transparent),
        inset 0 -2px 0 rgba(0, 0, 0, .25),
        0 8px 18px rgba(0, 0, 0, .35);
}

.nm-hero-box .nm-hero-actions .nm-btn:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 22%, transparent),
        inset 0 -1px 0 rgba(0, 0, 0, .25),
        0 4px 10px rgba(0, 0, 0, .3);
}

/* Social row, pinned under a hairline divider at the foot of the panel. */
.nm-hero-social {
    margin-top: 4px;
    padding-top: clamp(9px, 1.5vh, 16px);
    border-top: 1px solid color-mix(in srgb, white 12%, transparent);
}

.nm-social-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nm-social-links a {
    display: inline-flex;
    color: color-mix(in srgb, var(--nm-fg) 70%, transparent);
    font-size: 1.05rem;
    transition: color .15s ease;
}

.nm-social-links a:hover {
    color: var(--nm-accent);
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

.nm-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border-style: solid;
    border-width: 2px 4px 4px 2px;
    border-radius: 0;
    padding: 13px 26px;
    font-family: var(--nm-font-heading);
    font-weight: normal;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    cursor: pointer;
    transition: transform .1s ease, border-color .1s ease, background-color .15s ease;
}

.nm-btn-primary {
    color: #16130a;
    background: var(--nm-accent);
    border-top-color: color-mix(in srgb, var(--nm-accent) 55%, white);
    border-left-color: color-mix(in srgb, var(--nm-accent) 55%, white);
    border-right-color: color-mix(in srgb, var(--nm-accent) 55%, black);
    border-bottom-color: color-mix(in srgb, var(--nm-accent) 55%, black);
}

.nm-btn-primary:hover {
    background: color-mix(in srgb, var(--nm-accent) 90%, white);
}

.nm-btn-primary:active {
    transform: translateY(2px);
    border-width: 1px 2px 2px 1px;
}

.nm-btn-primary.nm-btn-copied {
    color: #0c1f08;
    background: color-mix(in srgb, var(--nm-accent) 55%, #6ee06e);
    border-top-color: color-mix(in srgb, var(--nm-accent) 30%, #a8f0a8);
    border-left-color: color-mix(in srgb, var(--nm-accent) 30%, #a8f0a8);
    border-right-color: color-mix(in srgb, var(--nm-accent) 30%, #1f7a1f);
    border-bottom-color: color-mix(in srgb, var(--nm-accent) 30%, #1f7a1f);
}

.nm-btn-sm {
    padding: 8px 18px;
    font-size: .78rem;
    border-width: 2px 3px 3px 2px;
}

.nm-btn-sm:active {
    transform: translateY(2px);
    border-width: 1px 2px 2px 1px;
}

.nm-btn-secondary {
    color: #fff;
    background: #4752c4;
    border-top-color: #6470e0;
    border-left-color: #6470e0;
    border-right-color: #363d99;
    border-bottom-color: #363d99;
}

.nm-btn-secondary:hover {
    background: #5865f2;
}

.nm-btn-secondary:active {
    transform: translateY(2px);
    border-width: 1px 2px 2px 1px;
}

.nm-btn-outline {
    color: var(--nm-fg);
    background: color-mix(in srgb, var(--nm-fg) 6%, transparent);
    border-color: color-mix(in srgb, var(--nm-fg) 22%, transparent);
}

.nm-btn-outline:hover {
    background: color-mix(in srgb, var(--nm-fg) 12%, transparent);
    border-color: var(--nm-accent);
}

.nm-btn-outline:active {
    transform: translateY(2px);
    border-width: 1px 2px 2px 1px;
}

/* -------------------------------------------------------------------------
   Feature grid — 2x2, filling the panel's height beside it
   ------------------------------------------------------------------------- */

.nm-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: clamp(12px, 1.6vw, 18px);
    min-height: 0;
}

.nm-feature-card {
    padding: clamp(16px, 2.6vh, 30px) clamp(18px, 1.9vw, 28px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(8px, 1.4vh, 14px);
    border-radius: 0;
    border-width: 3px 4px 4px 3px;
    min-height: 0;
    overflow: hidden;
}

/* Minecraft inventory-slot look: recessed bevel around the icon (dark
   top/left, light bottom/right — the inverse of the raised .nm-box). */
.nm-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(44px, 6.2vh, 62px);
    height: clamp(44px, 6.2vh, 62px);
    margin-bottom: 2px;
    background: color-mix(in srgb, var(--nm-bg) 80%, black 12%);
    border-style: solid;
    border-width: 3px 2px 2px 3px;
    border-top-color: color-mix(in srgb, var(--nm-bg-alt) 40%, black);
    border-left-color: color-mix(in srgb, var(--nm-bg-alt) 40%, black);
    border-right-color: color-mix(in srgb, var(--nm-bg-alt) 65%, white);
    border-bottom-color: color-mix(in srgb, var(--nm-bg-alt) 65%, white);
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3);
    flex: 0 0 auto;
}

.nm-feature-icon img {
    width: clamp(26px, 3.6vh, 36px);
    height: clamp(26px, 3.6vh, 36px);
    image-rendering: pixelated;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--nm-accent) 45%, transparent));
}

.nm-feature-card h3 {
    font-size: clamp(16px, 2.3vh, 23px);
    font-weight: normal;
    letter-spacing: .01em;
    line-height: 1.2;
}

.nm-feature-card p {
    margin: 0;
    font-size: clamp(12.5px, 1.7vh, 16px);
    color: color-mix(in srgb, var(--nm-fg) 66%, transparent);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

/* -------------------------------------------------------------------------
   Home — responsive
   ------------------------------------------------------------------------- */

/* Shorter desktop viewports: trim the parts that cost the most height so
   the single-screen lock still holds without clipping. */
@media (min-width: 992px) and (max-height: 760px) {
    .nm-hero-logo { max-height: clamp(52px, 10vh, 96px); }
    .nm-hero-subtitle { -webkit-line-clamp: 3; }
    .nm-feature-card p { -webkit-line-clamp: 3; }
    .nm-hero-box { gap: clamp(7px, 1.2vh, 12px); padding: clamp(14px, 2.6vh, 24px) clamp(18px, 3vw, 40px); }
}

@media (min-width: 992px) and (max-height: 620px) {
    .nm-hero-subtitle { display: none; }
    .nm-feature-icon { display: none; }
}

/* Below lg: release the lock, stack the two columns, scroll normally. */
@media (max-width: 991.98px) {
    body.nm-home-page {
        height: auto;
        overflow: visible;
    }

    .nm-home {
        height: auto;
        display: block;
        padding-block: clamp(24px, 6vh, 48px);
        overflow: visible;
    }

    .nm-home-inner {
        grid-template-columns: minmax(0, 640px);
        justify-content: center;
        max-height: none;
    }

    .nm-hero-subtitle,
    .nm-feature-card p {
        -webkit-line-clamp: none;
        display: block;
        overflow: visible;
    }

    .nm-hero-box {
        padding: clamp(22px, 4vh, 38px) clamp(22px, 6vw, 44px);
    }
}

@media (max-width: 575.98px) {
    .nm-hero-actions { flex-direction: column; width: 100%; }
    .nm-hero-box .nm-hero-actions .nm-btn,
    .nm-btn { justify-content: center; width: 100%; }
    .nm-hero-online { flex-direction: column; align-items: flex-start; gap: 8px; }
    .nm-online-sep { display: none; }
}

@media (max-width: 420px) {
    .nm-features { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Shop (Donaciones)
   ------------------------------------------------------------------------- */

.nm-shop-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.nm-shop-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--nm-fg) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--nm-fg) 10%, transparent);
    color: color-mix(in srgb, var(--nm-fg) 85%, transparent);
    font-size: .9rem;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.nm-shop-nav-link:hover {
    background: color-mix(in srgb, var(--nm-fg) 12%, transparent);
    border-color: var(--nm-accent);
    color: var(--nm-fg);
}

.nm-shop-nav-link.active {
    background: color-mix(in srgb, var(--nm-accent) 22%, transparent);
    border-color: var(--nm-accent);
    color: var(--nm-fg);
}

.nm-shop-intro {
    margin-bottom: 24px;
}

/* Package card: the artwork overflows above the box. Each cell reserves
   space at the top (padding-top) for the part of the image that pokes out;
   the rest of the image overlaps down into the card via the card's own
   padding-top. */
.nm-shop-package {
    position: relative;
    height: 100%;
    padding-top: 88px;
}

.nm-shop-package-media {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    z-index: 2;
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .45));
}

.nm-shop-package-media img {
    display: block;
    width: 100%;
    height: auto;
}

.nm-shop-package-card {
    height: calc(100% - 88px);
    display: flex;
    flex-direction: column;
}

.nm-shop-package-card .card-body {
    padding-top: 48px;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.nm-shop-package-card.nm-shop-package-no-media .card-body {
    padding-top: 1rem;
}

.nm-shop-package-title {
    font-size: 1.05rem;
    margin-bottom: 6px;
}

.nm-shop-package-price {
    color: var(--nm-accent);
    font-weight: 600;
    margin-bottom: 16px;
}

.nm-shop-package-price del {
    color: color-mix(in srgb, var(--nm-fg) 50%, transparent);
    font-weight: 400;
    margin-right: 6px;
    text-decoration-color: currentColor;
}

.nm-shop-package-action {
    margin-top: auto;
    display: flex;
    justify-content: center;
}

.nm-btn-outline.nm-shop-owned {
    opacity: .7;
    cursor: default;
}

.nm-btn-outline.nm-shop-owned:hover {
    background: color-mix(in srgb, var(--nm-fg) 6%, transparent);
    border-color: color-mix(in srgb, var(--nm-fg) 22%, transparent);
}

.nm-shop-panels {
    margin-top: 40px;
}

.nm-shop-panel-title {
    font-size: 1rem;
    margin-bottom: 12px;
}

/* ==========================================================================
   Site-wide theme extension (2026-09-05)
   Background photo on every page, bevelled buttons for all colours, themed
   tables, wiki category images, vote ranking.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Full-page background photo on every non-home page
   Two position:fixed layers (photo + tinted shade) behind the content, the
   same technique as the home hero (.nm-home::before/::after), gated on the
   body.nm-has-bg class that base.blade.php adds when a background image is
   configured.
   ------------------------------------------------------------------------- */

body.nm-has-bg:not(.nm-home-page) {
    isolation: isolate;
}

body.nm-has-bg:not(.nm-home-page)::before,
body.nm-has-bg:not(.nm-home-page)::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body.nm-has-bg:not(.nm-home-page)::before {
    z-index: -2;
    background-image: var(--nm-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    filter: brightness(.5) saturate(1.03);
}

body.nm-has-bg:not(.nm-home-page)::after {
    z-index: -1;
    background:
        radial-gradient(ellipse 90% 70% at 50% 38%,
            color-mix(in srgb, var(--nm-bg) 68%, transparent),
            color-mix(in srgb, var(--nm-bg) 55%, transparent) 60%,
            color-mix(in srgb, var(--nm-bg) 80%, transparent) 100%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--nm-bg) 82%, transparent),
            color-mix(in srgb, var(--nm-bg) 55%, transparent) 35%,
            color-mix(in srgb, var(--nm-bg) 92%, transparent));
}

body.nm-has-bg:not(.nm-home-page) > main#app {
    position: relative;
    z-index: 0;
}

/* Cards get a touch of translucency + blur so the photo reads through
   without hurting text contrast. */
body.nm-has-bg .nm-page .card,
body.nm-has-bg .nm-box {
    background: color-mix(in srgb, var(--nm-bg-alt) 92%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* -------------------------------------------------------------------------
   2. Bevelled ("relief") styling for every solid button
   Generalises the look the yellow .btn-primary already had (asymmetric
   border width + darker border) to secondary / danger / success / info /
   default greys. Outline and link buttons keep their flat look, and the
   home's own .nm-btn family is left untouched.
   ------------------------------------------------------------------------- */

.nm-body .btn:not(.btn-link):not([class*="btn-outline"]):not(.nm-btn) {
    border-style: solid;
    border-width: 2px 4px 4px 2px;
    border-color: rgba(0, 0, 0, .32);
    border-radius: 6px;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
    transition: transform .1s ease, filter .12s ease, background-color .15s ease, border-color .12s ease;
}

.nm-body .btn:not(.btn-link):not([class*="btn-outline"]):not(.nm-btn):hover {
    filter: brightness(1.08);
}

.nm-body .btn:not(.btn-link):not([class*="btn-outline"]):not(.nm-btn):active {
    transform: translateY(2px);
    border-width: 1px 2px 2px 1px;
}

.nm-body .btn-sm:not(.btn-link):not([class*="btn-outline"]):not(.nm-btn) {
    border-width: 2px 3px 3px 2px;
}

.nm-body .btn-lg:not(.btn-link):not([class*="btn-outline"]):not(.nm-btn) {
    border-width: 3px 5px 5px 3px;
}

/* Keep the grey secondary button from Bootstrap's blue-ish hover. */
.nm-body .btn-secondary {
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-btn-bg, #6c757d) 88%, white);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-btn-bg, #6c757d) 80%, black);
}

/* -------------------------------------------------------------------------
   3. Themed tables (vote, shop cart, wiki, and any .table on inner pages)
   ------------------------------------------------------------------------- */

.nm-page .table,
.nm-box .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--nm-fg);
    --bs-table-border-color: color-mix(in srgb, var(--nm-fg) 14%, transparent);
    --bs-table-striped-color: var(--nm-fg);
    --bs-table-hover-color: var(--nm-fg);
    color: var(--nm-fg);
    border: 2px solid color-mix(in srgb, var(--nm-fg) 16%, transparent);
    border-radius: 4px;
    overflow: hidden;
}

.nm-page .table > :not(caption) > * > th,
.nm-page .table > :not(caption) > * > td,
.nm-box .table > :not(caption) > * > th,
.nm-box .table > :not(caption) > * > td {
    padding: .7rem .9rem;
    vertical-align: middle;
    border-color: color-mix(in srgb, var(--nm-fg) 12%, transparent);
}

.nm-page .table thead th,
.nm-page .table > thead.table-dark th,
.nm-box .table thead th,
.nm-box .table > thead.table-dark th {
    background: color-mix(in srgb, var(--nm-accent) 22%, var(--nm-bg-alt));
    color: var(--nm-fg);
    font-family: var(--nm-font-heading);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 2px solid var(--nm-accent);
}

.nm-page .table tbody th,
.nm-box .table tbody th {
    font-weight: 700;
}

.nm-page .table-hover > tbody > tr:hover > *,
.nm-box .table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: color-mix(in srgb, var(--nm-accent) 10%, transparent);
}

.nm-page .table img,
.nm-box .table img {
    image-rendering: pixelated;
}

/* -------------------------------------------------------------------------
   4. Wiki — category images + inner-page list groups
   ------------------------------------------------------------------------- */

.nm-wiki-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
    margin-top: 8px;
}

.nm-wiki-cat {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 26px 18px;
}

.nm-wiki-cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    background: color-mix(in srgb, var(--nm-bg) 80%, black 12%);
    border-style: solid;
    border-width: 3px 2px 2px 3px;
    border-top-color: color-mix(in srgb, var(--nm-bg-alt) 40%, black);
    border-left-color: color-mix(in srgb, var(--nm-bg-alt) 40%, black);
    border-right-color: color-mix(in srgb, var(--nm-bg-alt) 65%, white);
    border-bottom-color: color-mix(in srgb, var(--nm-bg-alt) 65%, white);
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3);
    transition: border-color .12s ease;
}

.nm-wiki-cat-icon i {
    font-size: 2.4rem;
    line-height: 1;
    color: var(--nm-accent);
}

.nm-wiki-cat-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    image-rendering: pixelated;
}

.nm-wiki-cat h2 {
    font-size: 1.15rem;
    color: var(--nm-fg);
}

.nm-wiki-cat:hover .nm-wiki-cat-icon {
    border-color: var(--nm-accent);
}

.nm-page .list-group {
    --bs-list-group-bg: var(--nm-bg-alt);
    --bs-list-group-color: color-mix(in srgb, var(--nm-fg) 88%, transparent);
    --bs-list-group-border-color: color-mix(in srgb, var(--nm-fg) 14%, transparent);
    --bs-list-group-action-hover-bg: color-mix(in srgb, var(--nm-accent) 12%, transparent);
    --bs-list-group-action-hover-color: var(--nm-fg);
    --bs-list-group-action-color: color-mix(in srgb, var(--nm-fg) 88%, transparent);
    --bs-list-group-active-bg: var(--nm-accent);
    --bs-list-group-active-border-color: var(--nm-accent);
    --bs-list-group-active-color: #16130a;
    border-radius: 4px;
    overflow: hidden;
}

.nm-page .list-group-item i {
    color: var(--nm-accent);
    margin-right: 4px;
}

.nm-page .list-group-item.active,
.nm-page .list-group-item.active i {
    color: #16130a;
    font-weight: 700;
}

.nm-wiki-sub-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    image-rendering: pixelated;
    vertical-align: -5px;
    margin-right: 4px;
}

/* -------------------------------------------------------------------------
   5. Vote — site buttons with a 3D block image + horizontal top-5 ranking
   ------------------------------------------------------------------------- */

.nm-vote-site-btn {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    vertical-align: top;
}

.nm-vote-site-img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    image-rendering: pixelated;
}

.nm-vote-ranking {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 8px;
}

.nm-vote-rank-item {
    position: relative;
    flex: 0 0 auto;
    width: 118px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 15px 10px 12px;
    background: var(--nm-bg-alt);
    border-style: solid;
    border-width: 2px 4px 4px 2px;
    border-top-color: color-mix(in srgb, var(--nm-bg-alt) 55%, white);
    border-left-color: color-mix(in srgb, var(--nm-bg-alt) 55%, white);
    border-right-color: color-mix(in srgb, var(--nm-bg-alt) 45%, black);
    border-bottom-color: color-mix(in srgb, var(--nm-bg-alt) 45%, black);
    border-radius: 4px;
}

.nm-vote-rank-head {
    width: 58px;
    height: 58px;
    image-rendering: pixelated;
    border: 2px solid color-mix(in srgb, var(--nm-fg) 15%, transparent);
    border-radius: 4px;
}

.nm-vote-rank-pos {
    font-family: var(--nm-font-heading);
    font-size: .95rem;
    color: var(--nm-accent);
}

.nm-vote-rank-name {
    font-weight: 700;
    font-size: .9rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nm-vote-rank-votes {
    font-size: .8rem;
    color: color-mix(in srgb, var(--nm-fg) 65%, transparent);
}

.nm-vote-rank-item[data-medal="1"] {
    border-color: #f9d75a;
    box-shadow: 0 0 16px rgba(249, 215, 90, .5);
}

.nm-vote-rank-item[data-medal="2"] {
    border-color: #cbd2d9;
    box-shadow: 0 0 16px rgba(203, 210, 217, .45);
}

.nm-vote-rank-item[data-medal="3"] {
    border-color: #cd7f32;
    box-shadow: 0 0 16px rgba(205, 127, 50, .45);
}

.nm-vote-rank-item--you {
    border-style: dashed;
    border-color: var(--nm-accent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--nm-accent) 40%, transparent);
}

.nm-vote-rank-badge {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--nm-accent);
    color: #16130a;
    font-family: var(--nm-font-heading);
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 3px;
    white-space: nowrap;
}

.nm-vote-rank-empty {
    opacity: .5;
}

.nm-vote-reward-img {
    image-rendering: pixelated;
    object-fit: contain;
    vertical-align: middle;
}

@media (max-width: 575.98px) {
    .nm-vote-ranking {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 8px;
    }
}