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

:root {
    /* Same font-list variables used on minecraft.net */
    --mc-vanilla-fontlist: "MinecraftTenv2", "MinecraftTen", "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
    --mc-default--fontlist: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
    --mc-default-fontlist: var(--mc-default--fontlist);
}

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

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;
}

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;
}

.nm-body h1, .nm-body h2, .nm-body h3, .nm-body h4 {
    font-family: var(--mc-vanilla-fontlist);
    font-weight: 800;
    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: 1fr auto 1fr;
    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(--mc-vanilla-fontlist);
    font-weight: 800;
    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: center;
    justify-content: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nm-links .nav-link {
    color: color-mix(in srgb, var(--nm-fg) 72%, transparent);
    font-weight: 600;
    font-size: .88rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 8px 14px;
    border-radius: 8px;
    transition: color .15s ease, background-color .15s ease;
}

.nm-links .nav-link:hover,
.nm-links .nav-link.active {
    color: var(--nm-fg);
    background: color-mix(in srgb, var(--nm-fg) 6%, transparent);
}

.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;
        padding-top: 12px;
    }

    .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-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);
}

/* -------------------------------------------------------------------------
   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 layout
   ------------------------------------------------------------------------- */

body.nm-home-page {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.nm-home-page main#app {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
}

.nm-home {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--nm-bg);
    background-image: radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--nm-accent) 18%, transparent), transparent 60%);
}

.nm-home.nm-has-bg {
    background-image:
        linear-gradient(180deg, color-mix(in srgb, var(--nm-bg) 55%, transparent), color-mix(in srgb, var(--nm-bg) 88%, transparent)),
        var(--nm-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.nm-hero {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2vh, 22px);
    text-align: center;
    padding: clamp(10px, 2vh, 24px) 24px;
}

.nm-online-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 800;
    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;
}

/* -------------------------------------------------------------------------
   Hero panel & online box
   The outer panel gets an "epic" glass + glowing accent frame (breathing
   glow, corner rivets, a slow enchantment-glint sweep) that reads as
   unique versus the beveled Minecraft boxes used for feature cards and
   inner pages (.nm-box / .card). The online status sits inside it in a
   recessed "inventory slot" box, the same shading technique used for the
   feature icons below.
   ------------------------------------------------------------------------- */

.nm-hero-panel {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(5px 5px at 16px 16px, color-mix(in srgb, var(--nm-accent) 75%, transparent), transparent 70%),
        radial-gradient(5px 5px at calc(100% - 16px) 16px, color-mix(in srgb, var(--nm-accent) 75%, transparent), transparent 70%),
        radial-gradient(5px 5px at 16px calc(100% - 16px), color-mix(in srgb, var(--nm-accent) 75%, transparent), transparent 70%),
        radial-gradient(5px 5px at calc(100% - 16px) calc(100% - 16px), color-mix(in srgb, var(--nm-accent) 75%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--nm-bg-alt) 96%, white 4%), var(--nm-bg-alt));
    border: 1px solid color-mix(in srgb, var(--nm-accent) 45%, transparent);
    border-radius: 18px;
    animation: nm-hero-glow 4.5s ease-in-out infinite;
}

.nm-hero-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--nm-accent), transparent);
    opacity: .9;
}

/* Enchantment-glint style sheen sweeping slowly across the panel. */
.nm-hero-panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(75deg, transparent, color-mix(in srgb, var(--nm-accent) 40%, white 45%), transparent);
    opacity: .35;
    pointer-events: none;
    animation: nm-hero-glint 6s ease-in-out infinite;
}

@keyframes nm-hero-glow {
    0%, 100% {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--nm-fg) 6%, transparent) inset,
            0 16px 40px rgba(0, 0, 0, .32),
            0 0 28px color-mix(in srgb, var(--nm-accent) 22%, transparent);
    }
    50% {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--nm-fg) 6%, transparent) inset,
            0 16px 46px rgba(0, 0, 0, .38),
            0 0 46px color-mix(in srgb, var(--nm-accent) 36%, transparent);
    }
}

@keyframes nm-hero-glint {
    0%, 25% { left: -60%; }
    75%, 100% { left: 160%; }
}

.nm-hero-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 640px;
    padding: clamp(22px, 3.5vh, 36px) clamp(24px, 5vw, 40px);
}

.nm-hero-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--nm-fg) 6%, transparent);
    color: color-mix(in srgb, var(--nm-fg) 78%, transparent);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.nm-hero-meta-sep {
    color: color-mix(in srgb, var(--nm-fg) 35%, transparent);
}

.nm-hero-meta-version {
    color: var(--nm-accent);
}

/* Recessed "inventory slot" box for the online status, nested inside the
   hero panel — same bevel technique as .nm-feature-icon, scaled up. */
.nm-hero-online {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    margin-top: 2px;
    padding: 12px 20px;
    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: 6px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3), inset 0 2px 6px rgba(0, 0, 0, .25);
}

.nm-social-box {
    display: flex;
    align-items: center;
    padding: 10px 20px;
}

.nm-social-links {
    display: flex;
    align-items: center;
    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);
}

.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-hero-logo {
    max-height: clamp(48px, 11vh, 128px);
    width: auto;
    object-fit: contain;
    filter:
        drop-shadow(0 8px 24px rgba(0, 0, 0, .45))
        drop-shadow(0 0 22px color-mix(in srgb, var(--nm-accent) 45%, transparent));
}

.nm-hero-title {
    font-size: clamp(32px, 6vw, 60px);
    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 20px color-mix(in srgb, var(--nm-accent) 40%, transparent));
}

.nm-hero-subtitle {
    max-width: 560px;
    color: color-mix(in srgb, var(--nm-fg) 78%, transparent);
    font-size: clamp(13.5px, 1.6vh, 17px);
    line-height: 1.55;
    margin: 0;
}

.nm-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 4px;
}

.nm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-style: solid;
    border-width: 2px 4px 4px 2px;
    border-radius: 6px;
    padding: 13px 26px;
    font-family: var(--mc-default--fontlist);
    font-weight: 800;
    font-size: .92rem;
    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-players {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 640px;
}

.nm-player-head {
    width: clamp(28px, 4vh, 40px);
    height: clamp(28px, 4vh, 40px);
    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-features {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    padding: 0 clamp(16px, 4vw, 48px) clamp(14px, 2.2vh, 24px);
}

.nm-feature-card {
    padding: clamp(12px, 2vh, 22px) 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Minecraft inventory-slot look: recessed bevel (dark top/left, light
   bottom/right — the inverse of the raised .nm-box) around the icon. */
.nm-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(36px, 5vh, 46px);
    height: clamp(36px, 5vh, 46px);
    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);
}

.nm-feature-icon img {
    width: clamp(20px, 2.6vh, 26px);
    height: clamp(20px, 2.6vh, 26px);
    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(13px, 1.6vh, 16px);
    font-weight: 700;
}

.nm-feature-card p {
    margin: 0;
    font-size: clamp(11.5px, 1.4vh, 13.5px);
    color: color-mix(in srgb, var(--nm-fg) 60%, transparent);
    line-height: 1.4;
}

@media (max-height: 680px) {
    .nm-hero-subtitle { display: none; }
}

/* Below this width the single-screen (100dvh, overflow: hidden) home
   layout no longer has room for every hero box + the feature cards, and
   centered flex content starts overflowing its container and visually
   overlapping the section below it. Switch to a normal, scrollable
   flow instead so nothing overlaps. */
@media (max-width: 767.98px) {
    body.nm-home-page {
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }

    body.nm-home-page main#app {
        overflow: visible;
    }

    .nm-home {
        overflow: visible;
    }

    .nm-hero {
        flex: 0 0 auto;
        padding-top: clamp(28px, 8vh, 48px);
        padding-bottom: clamp(20px, 4vh, 32px);
    }

    .nm-features {
        flex: 0 0 auto;
    }
}

@media (max-width: 575.98px) {
    .nm-hero-actions { flex-direction: column; width: 100%; max-width: 280px; }
    .nm-btn { justify-content: center; width: 100%; }
    .nm-features { grid-template-columns: repeat(2, 1fr); }
    .nm-hero-online { flex-direction: column; gap: 10px; }
    .nm-online-sep { display: none; }
}

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