/* ==========================================================================
   Everything Minecraft — cartoon theme
   Sky background, white cards with thick ink outlines and chunky offset shadows,
   rounded corners, Fredoka headings and Nunito text, bright game colours.
   Bootstrap 5 still provides the grid and components; this file restyles them.
   ========================================================================== */

:root {
    --ink: #1d1f2b;
    --ink-2: #474b5e;
    --muted: #6f7488;
    --paper: #ffffff;
    --paper-2: #f4f7fb;
    --sky: #8fd3ff;
    --sky-deep: #5ab8f5;
    --grass: #5ac43c;
    --grass-dark: #3f9a27;
    --dirt: #9a6a3c;
    --sun: #ffd23f;
    --coral: #ff6b6b;
    --berry: #ff5ea8;
    --grape: #9b6bff;
    --ocean: #3b8cff;
    --orange: #ff9f43;
    --line: 3px;
    --radius: 20px;
    --radius-sm: 12px;
    --pop: 5px 5px 0 var(--ink);
    --pop-sm: 3px 3px 0 var(--ink);
    --head: 'Fredoka', 'Nunito', system-ui, sans-serif;
    --body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', 'Consolas', Menlo, monospace;
}

html,
body {
    color: var(--ink);
    font-family: var(--body);
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.65;
}

/* Sky with soft clouds, fading to a lighter horizon */
body {
    background-color: var(--sky);
    background-image:
        radial-gradient(60px 34px at 12% 14%, rgba(255, 255, 255, .85) 98%, transparent 100%),
        radial-gradient(90px 44px at 17% 16%, rgba(255, 255, 255, .85) 98%, transparent 100%),
        radial-gradient(70px 36px at 82% 9%, rgba(255, 255, 255, .8) 98%, transparent 100%),
        radial-gradient(110px 48px at 88% 12%, rgba(255, 255, 255, .8) 98%, transparent 100%),
        linear-gradient(180deg, var(--sky-deep) 0%, var(--sky) 420px, #c9ecff 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

a {
    color: var(--ocean);
    font-weight: 800;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #1f6fe0;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--ink);
    font-family: var(--head);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
}

p,
li {
    color: var(--ink-2);
}

.text-muted,
small,
.small {
    color: var(--muted) !important;
}

/* Navigation */
.navbar {
    background: var(--paper) !important;
    border-bottom: var(--line) solid var(--ink);
    box-shadow: 0 4px 0 var(--ink);
}

.navbar-brand {
    color: var(--ink) !important;
    font-family: var(--head);
    font-size: 1.35rem;
    font-weight: 700;
}

.navbar .nav-link {
    color: var(--ink-2) !important;
    font-weight: 800;
    border-radius: 999px;
    padding-left: .9rem !important;
    padding-right: .9rem !important;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    background: var(--sun);
    color: var(--ink) !important;
}

.navbar-toggler {
    border: var(--line) solid var(--ink);
    border-radius: var(--radius-sm);
}

/* Cards */
.wiki-panel,
.card {
    background: var(--paper);
    border: var(--line) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--pop);
    color: var(--ink);
}

.card-header,
.card-footer {
    background: var(--paper-2);
    border-color: var(--ink);
}

/* Chunky buttons that press down */
.btn-wiki,
.btn-primary,
.btn-outline-wiki,
.btn-outline-secondary {
    border: var(--line) solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--pop-sm);
    font-family: var(--head);
    font-size: 1rem;
    font-weight: 600;
    padding: .5rem 1.15rem;
    transition: transform .08s ease, box-shadow .08s ease;
}

.btn-wiki,
.btn-primary {
    background: var(--grass);
    color: #fff;
    text-shadow: 0 2px 0 var(--grass-dark);
}

.btn-outline-wiki,
.btn-outline-secondary {
    background: var(--paper);
    color: var(--ink);
}

.btn-wiki:hover,
.btn-primary:hover,
.btn-outline-wiki:hover,
.btn-outline-secondary:hover {
    border-color: var(--ink);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink);
}

.btn-wiki:hover,
.btn-primary:hover {
    background: #6bd64c;
    color: #fff;
}

.btn-outline-wiki:hover,
.btn-outline-secondary:hover {
    background: var(--sun);
    color: var(--ink);
}

.btn-wiki:active,
.btn-primary:active,
.btn-outline-wiki:active,
.btn-outline-secondary:active {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--ink);
}

/* Forms */
.form-control,
.form-select {
    background: var(--paper);
    border: var(--line) solid var(--ink);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-weight: 700;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 4px var(--sun);
}

.form-label {
    color: var(--ink);
    font-weight: 800;
}

.dropdown-menu {
    border: var(--line) solid var(--ink);
    border-radius: var(--radius-sm);
    box-shadow: var(--pop-sm);
}

.dropdown-item {
    font-weight: 700;
}

.dropdown-item:hover {
    background: var(--sun);
}

.badge {
    border: 2px solid var(--ink);
    border-radius: 999px;
    font-weight: 800;
}

/* Breadcrumbs */
.breadcrumb-item,
.breadcrumb-item a {
    color: var(--ink-2);
    font-weight: 800;
}

.breadcrumb-item.active {
    color: var(--ink);
}

/* Tables */
.table {
    --bs-table-color: var(--ink);
    --bs-table-border-color: #d9dfe8;
    --bs-table-striped-bg: var(--paper-2);
}

/* Alerts */
.alert {
    border: var(--line) solid var(--ink);
    border-radius: var(--radius-sm);
    box-shadow: var(--pop-sm);
    color: var(--ink);
    font-weight: 700;
}

.alert-danger { background: #ffe1e1; }
.alert-success { background: #ddf7d2; }

/* Drawers */
.offcanvas {
    background: var(--paper);
    border-color: var(--ink) !important;
    border-width: var(--line) !important;
}

/* Server status / visitor drawers */
.server-drawer {
    max-width: 380px;
    background: var(--sky);
    background-image: linear-gradient(180deg, #d7f0ff 0%, var(--paper) 220px);
}

.server-drawer .offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.6rem 1rem 1.25rem;
    background: var(--sun);
    border-bottom: var(--line) solid var(--ink);
}

.server-drawer .offcanvas-title {
    font-family: var(--head);
    font-weight: 700;
    color: var(--ink);
    text-shadow: 2px 2px 0 #fff;
}

.server-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: #fff;
    border: var(--line) solid var(--ink);
    border-radius: 10px;
    box-shadow: var(--pop-sm);
    color: var(--ink);
}

.server-drawer-close:hover {
    background: var(--sun);
}

.server-drawer .offcanvas-body {
    padding: 1.1rem;
}

/* Status and address summary */
.server-drawer-summary {
    background: #fff;
    border: var(--line) solid var(--ink);
    border-radius: var(--radius-sm);
    box-shadow: var(--pop-sm);
    padding: .4rem .9rem;
}

.server-drawer-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem 0;
}

.server-drawer-summary-row + .server-drawer-summary-row {
    border-top: 2px dashed #d9dfe8;
}

.server-drawer-summary-label {
    font-family: var(--head);
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #5a6b7d;
}

.server-drawer-summary-value {
    font-family: var(--head);
    font-weight: 700;
    color: var(--ink);
    text-align: right;
    overflow-wrap: anywhere;
}

.server-drawer-status-pill {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 .8rem;
    background: var(--paper-2);
    border: 2px solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--pop-sm);
    white-space: nowrap;
}

.server-drawer-status-pill.is-online {
    background: var(--grass);
    color: #fff;
    text-shadow: 1px 1px 0 var(--ink);
}

.server-drawer-status-pill.is-offline {
    background: #ffd6c9;
}

/* Copy and report buttons */
.server-drawer-address-actions {
    display: flex;
    gap: .6rem;
    margin: .9rem 0 1.25rem;
}

.server-drawer-action-btn {
    flex: 1 1 0;
    height: 2.5rem;
    font-family: var(--head);
    font-weight: 700;
    font-size: .95rem;
    color: var(--ink);
    background: #fff;
    border: var(--line) solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--pop-sm);
}

.server-drawer-action-btn:hover {
    transform: translate(-1px, -1px);
}

.server-drawer-action-btn-copy {
    background: var(--ocean);
    color: #fff;
    text-shadow: 1px 1px 0 var(--ink);
}

.server-drawer-action-btn-report {
    background: #ffd6c9;
}

/* Section headings: sun-yellow pill, like the site's section headings */
.server-drawer-heading {
    display: inline-block;
    margin: 1.25rem 0 .7rem;
    padding: .25rem .9rem;
    font-family: var(--head);
    font-size: 1.05rem;
    font-weight: 700;
    background: var(--sun);
    border: var(--line) solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--pop-sm);
}

/* Player and leaderboard rows: cards with the avatar and name */
.server-drawer-players {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.server-drawer-player {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .45rem .7rem .45rem .45rem;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 14px;
    box-shadow: var(--pop-sm);
}

.server-drawer-player-avatar {
    width: 34px;
    height: 34px;
    border: 2px solid var(--ink);
    border-radius: 8px;
    image-rendering: pixelated;
    background: #eef3f8;
}

.server-drawer-player-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.server-drawer-player-name {
    font-family: var(--head);
    font-weight: 700;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.server-drawer-player-status {
    font-size: .8rem;
    color: #5a6b7d;
}

.server-drawer-player-dot {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    background: var(--grass);
    border: 2px solid var(--ink);
    border-radius: 50%;
}

.server-drawer-player-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    flex: 0 0 auto;
    font-family: var(--head);
    font-weight: 700;
    background: var(--paper-2);
    border: 2px solid var(--ink);
    border-radius: 999px;
}

.server-drawer-player-rank-1 { background: var(--sun); }
.server-drawer-player-rank-2 { background: #e5e9ef; }
.server-drawer-player-rank-3 { background: #f3c08a; }

.server-drawer-more {
    margin: .5rem 0 0;
    font-size: .9rem;
    color: #5a6b7d;
}

.server-drawer-view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    margin-top: 1.25rem;
    font-family: var(--head);
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 0 var(--ink);
    background: var(--grape);
    border: var(--line) solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--pop-sm);
    text-decoration: none;
}

.server-drawer-view-all:hover {
    color: #fff;
    background: var(--grape);
    transform: translate(-1px, -1px);
}

.visitor-stat {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.visitor-summary-pair {
    justify-content: space-around;
}

/* ==========================================================================
   Blocks / items index (body.catalog-list-page)
   ========================================================================== */

.catalog-list-page .hp-hero {
    position: relative;
    padding: 1.6rem 1.25rem 1.5rem;
    text-align: center;
    background: #fff;
    border: var(--line) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--pop);
    margin-bottom: 2rem;
}

.catalog-list-page .hp-logo {
    display: block;
    width: min(100%, 440px);
    height: auto;
    margin: 0 auto .6rem;
}

.catalog-list-page .hp-logo-link {
    display: block;
}

.catalog-list-page .hp-tagline {
    font-family: var(--head);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 auto .9rem;
}

.catalog-list-page .hp-kid-badge {
    position: absolute;
    top: -.85rem;
    right: -.6rem;
    padding: .3rem .9rem;
    font-family: var(--head);
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
    background: var(--sun);
    border: var(--line) solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--pop-sm);
    transform: rotate(6deg);
}

/* Search: one pill with the button joined to the input */
.catalog-list-page .hp-search {
    position: relative;
    max-width: 420px;
    margin: 0 auto;
}

.catalog-list-page .hp-search-form {
    display: flex;
    height: 2.75rem;
    background: #fff;
    border: var(--line) solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--pop-sm);
    overflow: hidden;
}

.catalog-list-page .hp-search-input-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.catalog-list-page .hp-search-input {
    width: 100%;
    height: 100%;
    padding: 0 2.25rem 0 1rem;
    font-family: var(--body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    background: transparent;
    border: 0;
    outline: none;
}

.catalog-list-page .hp-search-input::placeholder {
    color: #8a97a6;
    font-weight: 600;
}

.catalog-list-page .hp-search-clear {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: #8a97a6;
}

.catalog-list-page .hp-search-clear.show {
    display: inline-flex;
}

.catalog-list-page .hp-search-clear:hover {
    color: var(--ink);
}

.catalog-list-page .hp-search-btn {
    flex-shrink: 0;
    padding: 0 1.1rem;
    font-family: var(--head);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 0 var(--ink);
    background: var(--grass);
    border: 0;
    border-left: var(--line) solid var(--ink);
}

.catalog-list-page .hp-search-btn:hover {
    background: #4fb83a;
}

/* Suggestion dropdown under the search box */
.catalog-list-page .home-hero-suggest {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + .6rem);
    z-index: 1040;
    max-height: 320px;
    overflow-y: auto;
    padding: .4rem;
    text-align: left;
    background: #fff;
    border: var(--line) solid var(--ink);
    border-radius: var(--radius-sm);
    box-shadow: var(--pop);
}

.catalog-list-page .home-hero-suggest.show {
    display: block;
}

.catalog-list-page .home-hero-suggest-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .6rem;
    font-family: var(--head);
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    border-radius: 10px;
}

.catalog-list-page .home-hero-suggest-item:hover,
.catalog-list-page .home-hero-suggest-item.is-active {
    background: var(--sun);
    color: var(--ink);
}

.catalog-list-page .home-hero-suggest-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    background: #eef3f8;
    border: 2px solid var(--ink);
    border-radius: 8px;
}

.catalog-list-page .home-hero-suggest-icon img {
    width: 1.5rem;
    height: 1.5rem;
    image-rendering: pixelated;
}

.catalog-list-page .home-hero-suggest-type {
    margin-left: auto;
    font-size: .75rem;
    color: #5a6b7d;
}

.catalog-list-page .home-hero-suggest-empty {
    padding: .6rem;
    font-weight: 700;
    color: #5a6b7d;
}

/* Category dropdown: sun pill */
.catalog-list-page .dropdown .home-hero-search-select {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    min-width: 220px;
    height: 2.5rem;
    padding: 0 1rem;
    font-family: var(--head);
    font-weight: 700;
    color: var(--ink);
    background: var(--sun);
    border: var(--line) solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--pop-sm);
}

.catalog-list-page .dropdown .home-hero-search-select:hover {
    background: #ffe27a;
}

/* Grid panel and cards */
.catalog-list-page .catalog-list-panel {
    background: #fff;
    border: var(--line) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--pop);
}

.catalog-list-page .catalog-list {
    --bs-gutter-y: 1rem;
    --bs-gutter-x: 1rem;
}

.catalog-list-page .entry-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: .9rem .6rem .8rem;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 14px;
    box-shadow: var(--pop-sm);
    color: var(--ink);
    transition: transform .12s ease, background .12s ease;
}

.catalog-list-page a:hover .entry-card {
    transform: translate(-2px, -2px);
    background: #fffbe6;
}

.catalog-list-page .entry-icon-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    margin: 0 auto .6rem;
    background: #eef3f8;
    border: 2px solid var(--ink);
    border-radius: 12px;
}

.catalog-list-page .entry-icon-frame img {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    image-rendering: pixelated;
}

.catalog-list-page .entry-icon-frame .bi {
    font-size: 2rem;
    color: var(--wiki-stone, #7a7a7a);
}

.catalog-list-page .entry-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    font-family: var(--head);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Pagination: pill buttons with the ink outline */
.catalog-list-page .pagination {
    justify-content: center;
    flex-wrap: wrap;
    gap: .35rem;
}

.catalog-list-page .pagination .page-link {
    min-width: 2.4rem;
    text-align: center;
    font-family: var(--head);
    font-weight: 700;
    color: var(--ink);
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 999px !important;
    box-shadow: var(--pop-sm);
}

.catalog-list-page .pagination .page-item.active .page-link {
    color: #fff;
    text-shadow: 1px 1px 0 var(--ink);
    background: var(--grass);
    border-color: var(--ink);
}

.catalog-list-page .pagination .page-item.disabled .page-link {
    color: #8a97a6;
    background: var(--paper-2);
    box-shadow: none;
}

.catalog-list-page .pagination {
    margin-bottom: 0;
}

/* "Showing 1 to 48 of 1012 results" next to the page numbers */
.catalog-list-page nav .d-sm-flex {
    flex-wrap: wrap;
    gap: .75rem 1rem;
}

.catalog-list-page nav .small.text-muted {
    font-family: var(--head);
    font-size: .95rem !important;
    font-weight: 600;
    color: #4a5868 !important;
}

.catalog-list-page nav .small.text-muted .fw-semibold {
    font-weight: 700 !important;
    color: var(--ink);
}

/* Phone: the Previous / Next pair spreads across the row */
.catalog-list-page nav .d-sm-none .pagination {
    flex: 1 1 auto;
    justify-content: space-between;
}

@media (max-width: 575.98px) {
    .catalog-list-page .catalog-list-panel {
        padding: 1rem !important;
    }

    .catalog-list-page .catalog-list {
        --bs-gutter-x: .75rem;
        --bs-gutter-y: .75rem;
    }

    .catalog-list-page .entry-card {
        padding: .75rem .5rem .6rem !important;
    }

    .catalog-list-page .hp-hero {
        padding-top: 2rem;
    }

    .catalog-list-page .hp-tagline {
        font-size: .95rem;
    }
}

/* Empty state */
.catalog-list-page .catalog-empty-state {
    padding: 2rem 1.5rem;
    text-align: center;
    background: #fff;
    border: var(--line) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--pop);
}

.catalog-list-page .catalog-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: .75rem;
    font-size: 2rem;
    background: var(--sun);
    border: var(--line) solid var(--ink);
    border-radius: 50%;
    box-shadow: var(--pop-sm);
}

.catalog-list-page .catalog-empty-title {
    font-family: var(--head);
    font-weight: 700;
}

/* Auth drawers (log in, register, forgot password, contact): same header as the server drawer */
.auth-drawer {
    max-width: 400px;
    background: var(--sky);
    background-image: linear-gradient(180deg, #d7f0ff 0%, var(--paper) 220px);
}

.auth-drawer .offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.6rem 1rem 1.25rem;
    background: var(--sun);
    border-bottom: var(--line) solid var(--ink);
}

.auth-drawer .offcanvas-title {
    font-family: var(--head);
    font-weight: 700;
    color: var(--ink);
    text-shadow: 2px 2px 0 #fff;
}

.auth-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: #fff;
    border: var(--line) solid var(--ink);
    border-radius: 10px;
    box-shadow: var(--pop-sm);
    color: var(--ink);
}

.auth-drawer-close:hover {
    background: var(--sun);
}

.auth-drawer .offcanvas-body {
    padding: 1.25rem;
}

/* Form: white card with the pop shadow, like the other panels */
.auth-drawer form {
    background: #fff;
    border: var(--line) solid var(--ink);
    border-radius: var(--radius-sm);
    box-shadow: var(--pop-sm);
    padding: 1.1rem;
}

.auth-drawer .form-label {
    font-family: var(--head);
    font-weight: 700;
    margin-bottom: .3rem;
}

.auth-drawer .form-control {
    border: 2px solid var(--ink);
    border-radius: 10px;
}

.auth-drawer .form-check-label {
    font-weight: 700;
}

.auth-drawer .btn-wiki {
    height: 2.75rem;
    font-family: var(--head);
    font-weight: 700;
    border: var(--line) solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--pop-sm);
}

.auth-drawer .offcanvas-body > div > p,
.auth-drawer .offcanvas-body > div > div > p {
    font-weight: 700;
}

.auth-drawer a:not(.btn) {
    color: var(--ocean);
    font-weight: 700;
}

/* Become a Helper drawer: orange header (the helper colour), steps as white cards */
#helperDrawer {
    max-width: 440px;
    background: var(--sky);
    background-image: linear-gradient(180deg, #d7f0ff 0%, var(--paper) 220px);
}

#helperDrawer .offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.6rem 1rem 1.25rem;
    background: #ffb37a;
    border-bottom: var(--line) solid var(--ink);
}

#helperDrawer .offcanvas-title {
    font-family: var(--head);
    font-weight: 700;
    color: var(--ink);
    text-shadow: 2px 2px 0 #fff;
}

#helperDrawer .properties-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: #fff;
    border: var(--line) solid var(--ink);
    border-radius: 10px;
    box-shadow: var(--pop-sm);
    color: var(--ink);
}

#helperDrawer .properties-drawer-close:hover {
    background: var(--sun);
}

#helperDrawer .offcanvas-body {
    padding: 1.25rem;
}

#helperDrawer .report-drawer-intro {
    font-weight: 700;
    color: var(--ink);
}

#helperDrawer .helper-form {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

#helperDrawer .helper-step {
    margin: 0;
    padding: 1rem 1.1rem;
    background: #fff;
    border: var(--line) solid var(--ink);
    border-radius: var(--radius-sm);
    box-shadow: var(--pop-sm);
}

#helperDrawer .helper-step legend {
    float: none;
    width: auto;
    margin: 0 0 .6rem;
    padding: .15rem .7rem;
    font-family: var(--head);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    background: var(--sun);
    border: 2px solid var(--ink);
    border-radius: 999px;
}

#helperDrawer .form-label,
#helperDrawer .form-check-label {
    font-family: var(--head);
    font-weight: 700;
    color: var(--ink);
}

#helperDrawer .form-label {
    margin-bottom: .3rem;
}

#helperDrawer .form-control,
#helperDrawer .form-select {
    border: 2px solid var(--ink);
    border-radius: 10px;
}

#helperDrawer .form-check-input {
    border: 2px solid var(--ink);
}

#helperDrawer .form-check-input:checked {
    background-color: var(--grass);
    border-color: var(--ink);
}

#helperDrawer .helper-hint {
    margin-top: .35rem;
    font-size: .85rem;
    font-weight: 600;
    color: #5a6b7d;
}

#helperDrawer .helper-guidelines {
    padding: 1rem 1.1rem;
    background: #ddf7d2;
    border: var(--line) solid var(--ink);
    border-radius: var(--radius-sm);
    box-shadow: var(--pop-sm);
}

#helperDrawer .helper-guidelines-title {
    font-family: var(--head);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: .35rem;
}

#helperDrawer .helper-guidelines ul {
    margin: 0 0 0 1.1rem;
    padding: 0;
    font-size: .92rem;
    font-weight: 600;
}

#helperDrawer .btn-wiki {
    height: 2.75rem;
    font-family: var(--head);
    font-weight: 700;
    border: var(--line) solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--pop-sm);
}

#helperDrawer .report-thanks-icon {
    font-size: 3rem;
    color: var(--grass);
}

#helperDrawer .report-thanks-heading {
    font-family: var(--head);
    font-weight: 700;
    color: var(--ink);
}

/* Notes: success (green) and error (pink) callouts */
.auth-logout-note {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin-bottom: 1rem;
    padding: .75rem .9rem;
    background: #ddf7d2;
    border: var(--line) solid var(--ink);
    border-radius: var(--radius-sm);
    box-shadow: var(--pop-sm);
    font-weight: 700;
}

.auth-note-danger {
    background: #ffe1e1;
}

.auth-logout-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    background: var(--grass);
    color: #fff;
    border: 2px solid var(--ink);
    border-radius: 50%;
}

.auth-note-danger .auth-logout-icon {
    background: #e5484d;
}

.auth-logout-title {
    display: block;
    font-family: var(--head);
}

.auth-note-list {
    margin: 0;
    padding-left: 1rem;
}

/* Community heads card on the log in panel */
.auth-members {
    margin-top: 1.25rem;
}

.auth-members-card {
    background: #fff;
    border: var(--line) solid var(--ink);
    border-radius: var(--radius-sm);
    box-shadow: var(--pop-sm);
    padding: .8rem .9rem;
}

.auth-members-title {
    display: inline-block;
    margin: 0 0 .6rem;
    padding: .15rem .7rem;
    font-family: var(--head);
    font-weight: 700;
    background: var(--sun);
    border: 2px solid var(--ink);
    border-radius: 999px;
}

.auth-members-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.auth-member {
    display: inline-flex;
    border: 2px solid var(--ink);
    border-radius: 8px;
    overflow: hidden;
    background: #eef3f8;
}

.auth-member img {
    display: block;
    width: 40px;
    height: 40px;
    image-rendering: pixelated;
}

/* Tooltips: speech bubble */
.tooltip {
    --bs-tooltip-bg: var(--ink);
    --bs-tooltip-opacity: 1;
}

.tooltip .tooltip-inner {
    max-width: 260px;
    background: var(--paper);
    border: var(--line) solid var(--ink);
    border-radius: var(--radius-sm);
    box-shadow: var(--pop-sm);
    color: var(--ink);
    font-family: var(--body);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.45;
    padding: .6rem .8rem;
    text-align: left;
}

/* Layout regions */
.site-content {
    min-height: 60vh;
}

/* ==========================================================================
   Navbar (the .site-sidebar element): a top bar on desktop,
   a slide-in menu on mobile (the script toggles .is-open)
   ========================================================================== */

.site-sidebar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--paper);
    border-bottom: var(--line) solid var(--ink);
    box-shadow: 0 5px 0 var(--ink);
}

.site-sidebar-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: .7rem 1.25rem;
}

.sidebar-nav-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.sidebar-spacer {
    flex: 1 1 auto;
}

/* Nav links are chunky pills with a block icon */
.sidebar-link,
.sidebar-status {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    border: var(--line) solid transparent;
    border-radius: 999px;
    color: var(--ink);
    font-family: var(--head);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1;
    padding: .45rem .95rem .45rem .5rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .08s ease, background .12s ease;
}

.sidebar-link:hover,
.sidebar-link:focus-visible,
.sidebar-link.active,
.sidebar-link.show {
    border-color: var(--ink);
    box-shadow: var(--pop-sm);
    color: var(--ink);
    text-decoration: none;
    transform: translate(-1px, -1px);
}

.sidebar-link:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

/* Each section has its own colour */
.nav-tone-home:hover,
.nav-tone-home.active { background: #8fe07a; }
.nav-tone-blocks:hover,
.nav-tone-blocks.active,
.nav-tone-blocks.show { background: #ffd28a; }
.nav-tone-explore:hover,
.nav-tone-explore.active,
.nav-tone-explore.show { background: #a9d8ff; }
.nav-tone-community:hover,
.nav-tone-community.active,
.nav-tone-community.show { background: #ffb3d4; }
.nav-tone-account:hover,
.nav-tone-account.active,
.nav-tone-account.show { background: var(--sun); }

.sidebar-link.dropdown-toggle::after {
    border: 0;
    content: '\25BE';
    margin-left: .1rem;
    font-size: .8em;
    vertical-align: 0;
}

/* Icon tile on each link */
.sidebar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 10px;
}

.sidebar-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    image-rendering: pixelated;
}

.sidebar-icon .bi {
    font-size: 1rem;
}

/* Account button stands out */
.sidebar-account {
    background: var(--sun);
    border-color: var(--ink);
    box-shadow: var(--pop-sm);
}

/* Status pills (server status, visitor count) */
.sidebar-status {
    background: var(--paper-2);
    border-color: var(--ink);
    font-family: var(--body);
    font-size: .92rem;
    font-weight: 800;
    padding-right: .85rem;
}

.sidebar-status:hover {
    background: #fff;
    box-shadow: var(--pop-sm);
    transform: translate(-1px, -1px);
}

.sidebar-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    background: #b8bfcc;
    border: 2px solid var(--ink);
    border-radius: 50%;
}

.sidebar-dot.is-online,
.sidebar-status:not(.is-offline) .sidebar-dot#serverStatusDot.is-online {
    background: var(--grass);
}

.sidebar-dot.is-offline {
    background: var(--coral);
}

/* Dropdown menus */
.sidebar-dropdown-menu {
    min-width: 230px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--paper);
    border: var(--line) solid var(--ink);
    border-radius: 16px;
    box-shadow: var(--pop);
    padding: .45rem;
}

.sidebar-dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    border-radius: 10px;
    color: var(--ink);
    font-weight: 800;
    padding: .4rem .55rem;
    text-decoration: none;
}

.sidebar-dropdown-item:hover,
.sidebar-dropdown-item.active {
    background: var(--sun);
    color: var(--ink);
    text-decoration: none;
}

.sidebar-dropdown-item .sidebar-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.sidebar-dropdown-item .sidebar-icon:empty {
    background: var(--paper-2);
    border-style: dashed;
    border-color: #b8bfcc;
}

.sidebar-dropdown-item .sidebar-icon img {
    width: 20px;
    height: 20px;
}

.sidebar-link-disabled {
    color: #a3a9b8;
    cursor: not-allowed;
}

.sidebar-link-disabled:hover {
    background: transparent;
    color: #a3a9b8;
}

.sidebar-link-disabled::after {
    content: 'Soon';
    margin-left: auto;
    background: var(--paper-2);
    border: 2px solid #c9cfda;
    border-radius: 999px;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 900;
    padding: 0 .45rem;
}

.account-menu-placeholder {
    width: 0;
}

/* Discord: blurple button, tab version on desktop and link version in the mobile menu */
.sidebar-discord-tab,
.sidebar-discord-mobile {
    background: #5865f2 !important;
    border: var(--line) solid var(--ink) !important;
    color: #fff !important;
}

.sidebar-discord-tab {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1031;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border-radius: 999px;
    box-shadow: var(--pop-sm);
    font-family: var(--head);
    font-size: 1.05rem;
    font-weight: 600;
    padding: .55rem 1.1rem;
    text-decoration: none;
    transition: transform .08s ease, box-shadow .08s ease;
}

.sidebar-discord-tab:hover {
    color: #fff;
    text-decoration: none;
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink);
}

.sidebar-discord-mobile {
    display: none !important;
}

.sidebar-discord-mobile .sidebar-icon {
    color: #5865f2;
}

/* Mobile top bar and backdrop are hidden on desktop */
.mobile-topbar,
.sidebar-backdrop {
    display: none;
}

/* Medium screens: smaller labels so the row fits */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .sidebar-link,
    .sidebar-status {
        font-size: .95rem;
        padding-right: .7rem;
    }

    .sidebar-status span:not(.sidebar-icon):not(.sidebar-dot) {
        display: none;
    }
}

/* Mobile: top bar with a menu button, the nav slides in from the left */
@media (max-width: 991.98px) {
    .mobile-topbar {
        position: sticky;
        top: 0;
        z-index: 1030;
        display: flex;
        align-items: center;
        gap: .75rem;
        background: var(--paper);
        border-bottom: var(--line) solid var(--ink);
        box-shadow: 0 4px 0 var(--ink);
        padding: .6rem 16px;
    }

    .mobile-topbar-brand {
        color: var(--ink);
        font-family: var(--head);
        font-size: 1.25rem;
        font-weight: 700;
    }

    .sidebar-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: var(--sun);
        border: var(--line) solid var(--ink);
        border-radius: 14px;
        box-shadow: var(--pop-sm);
        color: var(--ink);
        font-size: 1.6rem;
    }

    .sidebar-toggler:active {
        transform: translate(2px, 2px);
        box-shadow: none;
    }

    .site-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1050;
        width: min(300px, 85vw);
        border-bottom: 0;
        border-right: var(--line) solid var(--ink);
        box-shadow: 6px 0 0 var(--ink);
        overflow-y: auto;
        transform: translateX(calc(-100% - 12px));
        transition: transform .22s ease;
    }

    .site-sidebar.is-open {
        transform: translateX(0);
    }

    .site-sidebar-inner {
        padding: 1rem;
    }

    .sidebar-nav-row {
        flex-direction: column;
        align-items: stretch;
        gap: .45rem;
    }

    .sidebar-nav-row > .dropdown {
        width: 100%;
    }

    .sidebar-link,
    .sidebar-status {
        width: 100%;
        justify-content: flex-start;
    }

    .sidebar-link.dropdown-toggle::after {
        margin-left: auto;
    }

    .sidebar-spacer {
        height: .5rem;
        border-top: 2px dashed #c9cfda;
        margin-top: .5rem;
    }

    .sidebar-dropdown-menu {
        position: static !important;
        transform: none !important;
        width: 100%;
        margin-top: .35rem !important;
        box-shadow: var(--pop-sm);
    }

    .sidebar-discord-tab {
        display: none;
    }

    .sidebar-discord-mobile {
        display: inline-flex !important;
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(29, 31, 43, .45);
    }

    .sidebar-backdrop.is-open {
        display: block;
    }
}

/* Footer: a strip of grass on a dirt base */
/* Full-width footer: breaks out of the page container to span the whole window */
.site-footer {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--dirt);
    border-top: var(--line) solid var(--ink);
    color: #fbe9d4;
    margin-top: 4rem;
    padding: 3rem 0 2.5rem;
}

.site-content {
    overflow-x: clip;
}

.site-footer .site-footer-box {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1rem;
}

.site-footer::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 16px;
    background: var(--grass);
    border-bottom: var(--line) solid var(--ink);
}

.site-footer a {
    color: #fff;
}

.site-footer a:hover {
    color: var(--sun);
}

.site-footer-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
}

.site-footer-brand {
    color: #fff;
    font-family: var(--head);
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 0 var(--ink);
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.site-footer-links a {
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    padding: 0 1rem;
    background: var(--paper);
    border: var(--line) solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--pop-sm);
    color: var(--ink);
    font-family: var(--head);
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
}

.site-footer-links a:hover {
    color: var(--ink);
    background: var(--sun);
}

.site-footer-legal {
    width: 100%;
    margin: 1.75rem 0 0;
    padding-top: 1rem;
    border-top: 2px dashed rgba(255, 255, 255, .45);
    color: #fbe9d4;
    font-size: .9rem;
}

::selection {
    background: var(--sun);
    color: var(--ink);
}

/* ==========================================================================
   Inline editing (experts): edit fields stay hidden until Edit is pressed
   ========================================================================== */

.entry-editing-only { display: none; }
#entry-form.is-editing .entry-editing-only { display: block; }
#entry-form.is-editing .entry-display { display: none; }
#entry-form.is-editing span.entry-editing-only,
#entry-form.is-editing button.entry-editing-only,
#entry-form.is-editing input[type="checkbox"].entry-editing-only {
    display: inline-block;
}
.category-checkbox-list.show { display: flex; flex-direction: column; }
.catalog-page .info-section ul.trading-list > li.trade-row-hidden { display: none; }
#entry-form.is-editing .info-section ul.trading-list > li.trade-row-hidden { display: list-item; }
.catalog-page .entry-header-actions .btn:not(.entry-editing-only) { display: inline-flex; }
.catalog-page #entry-form.is-editing .entry-header-actions .btn.entry-editing-only { display: inline-flex; }

/* ==========================================================================
   Block / item page
   ========================================================================== */

/* ---------- Breadcrumb pill ---------- */
.catalog-detail-page .breadcrumb-panel {
    min-height: 3rem;
    border-radius: 999px;
    box-shadow: var(--pop-sm);
    padding: .35rem .5rem .35rem 1.2rem;
    margin-bottom: 1.5rem !important;
}

/* One centred row: every item, separator and the Apply button share the same centre line */
.catalog-detail-page .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--head);
    font-size: 1rem;
}

.catalog-detail-page .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: 0;
    line-height: 1.2;
}

.catalog-detail-page .breadcrumb-item + .breadcrumb-item::before {
    content: '';
    display: block;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin: 0;
    border-radius: 50%;
    background: var(--sun);
    border: 2px solid var(--ink);
    box-sizing: border-box;
}

.catalog-detail-page .breadcrumb-item a {
    color: var(--ocean);
    font-weight: 700;
    text-decoration: none;
}

.catalog-detail-page .breadcrumb-item a:hover {
    text-decoration: underline;
}

.catalog-detail-page .breadcrumb-item.active {
    color: var(--ink);
    font-weight: 700;
}

/* ---------- Expert edit buttons: same height as the header pills ---------- */
.catalog-detail-page .entry-header-actions .btn {
    align-items: center;
    height: 2.25rem;
    padding: 0 .9rem;
    box-sizing: border-box;
    font-family: var(--head);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* ---------- Completeness badge (expert editing) ---------- */
.catalog-detail-page .entry-completeness-badge {
    align-items: center;
    gap: .4rem;
    height: 2.25rem;
    padding: 0 .85rem;
    box-sizing: border-box;
    background: var(--paper-2);
    border: 2px solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--pop-sm);
    color: var(--ink);
    font-family: var(--head);
    font-size: .95rem;
    font-weight: 700;
    white-space: nowrap;
}

.catalog-detail-page .entry-completeness-badge i {
    font-size: .95rem;
}

.catalog-detail-page .entry-completeness-low {
    background: #ffd6c9;
}

.catalog-detail-page .entry-completeness-mid {
    background: var(--sun);
}

.catalog-detail-page .entry-completeness-full {
    background: var(--grass);
    color: #fff;
}

.catalog-detail-page .entry-hero-kid-badge {
    order: 2;
    background: var(--sun);
    border: var(--line) solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--pop-sm);
    color: var(--ink);
    font-family: var(--head);
    font-size: .95rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    box-sizing: border-box;
    padding: 0 1rem;
    transition: transform .08s ease, box-shadow .08s ease;
}

.catalog-detail-page .entry-hero-kid-badge:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--ink);
}

.catalog-detail-page .entry-hero-kid-badge:active {
    transform: translate(3px, 3px);
    box-shadow: none;
}

/* ---------- Hero ---------- */
.catalog-detail-page .entry-hero-card {
    position: relative;
    overflow: hidden;
    padding: 2rem 2rem 2rem !important;
    padding-top: 2.6rem !important;
}

/* Grass block lid across the top of the hero */
.catalog-detail-page .entry-hero-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 18px;
    background:
        radial-gradient(10px 8px at 10px 18px, var(--grass) 98%, transparent) 0 0 / 22px 18px repeat-x,
        linear-gradient(var(--grass), var(--grass)) 0 0 / 100% 10px no-repeat;
    border-bottom: 0;
}

.catalog-detail-page .entry-hero-card > .d-flex:first-child {
    gap: 1.5rem !important;
}

.catalog-detail-page .entry-icon-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px !important;
    height: 112px !important;
    background: radial-gradient(circle at 50% 40%, #fff 0%, #e9f6ff 70%);
    border: var(--line) solid var(--ink);
    border-radius: 26px;
    box-shadow: var(--pop-sm);
    transform: rotate(-4deg);
    transition: transform .2s ease;
}

.catalog-detail-page .entry-icon-frame:hover {
    transform: rotate(3deg) scale(1.04);
}

.catalog-detail-page .entry-icon-frame img {
    width: 78px !important;
    height: 78px !important;
    image-rendering: pixelated;
}

.catalog-detail-page .entry-hero-card h1 {
    font-family: var(--head);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: .75rem !important;
}

.catalog-detail-page .entry-hero-card h1 + .d-flex {
    gap: .6rem !important;
}

.catalog-detail-page .entry-category-badge {
    display: inline-flex;
    align-items: center;
    background: var(--paper-2);
    border: var(--line) solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--pop-sm);
    color: var(--ink);
    font-family: var(--head);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
    padding: .4rem 1.1rem;
}

.catalog-detail-page .entry-type-badge {
    background: var(--grass);
    color: #fff;
    text-shadow: 0 1px 0 var(--grass-dark);
}

/* Category chips cycle through the game colours */
.catalog-detail-page .entry-category-badge:not(.entry-type-badge):nth-of-type(4n+2) { background: #dff0ff; }
.catalog-detail-page .entry-category-badge:not(.entry-type-badge):nth-of-type(4n+3) { background: #fff3c4; }
.catalog-detail-page .entry-category-badge:not(.entry-type-badge):nth-of-type(4n+4) { background: #ffe0ef; }
.catalog-detail-page .entry-category-badge:not(.entry-type-badge):nth-of-type(4n+5) { background: #ece3ff; }

/* Give command */
.catalog-detail-page .block-give-command {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    width: fit-content;
    max-width: 100%;
    margin-top: 1.5rem !important;
}

.catalog-detail-page .block-give-label {
    display: inline-flex;
    align-items: center;
    padding: .2rem .75rem;
    background: var(--sun);
    border: 2px solid var(--ink);
    border-radius: 999px;
    color: var(--ink);
    font-family: var(--head);
    font-size: .85rem;
    font-weight: 700;
    box-shadow: var(--pop-sm);
}

.catalog-detail-page .block-give-row {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    background: #fff;
    border: var(--line) solid var(--ink);
    border-radius: 14px;
    box-shadow: var(--pop-sm);
    overflow: hidden;
}

.catalog-detail-page .block-give-code {
    display: flex;
    align-items: center;
    padding: .55rem .9rem;
    background: transparent;
    color: var(--ink);
    font-family: var(--mono);
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
    overflow-x: auto;
}

.catalog-detail-page .block-give-copy {
    background: var(--grass);
    border: 0;
    border-left: var(--line) solid var(--ink);
    color: #fff;
    font-family: var(--head);
    font-size: .95rem;
    font-weight: 700;
    padding: 0 1rem;
    cursor: pointer;
}

.catalog-detail-page .block-give-copy:hover {
    background: #4fb02f;
}

.catalog-detail-page .block-give-copy.copied {
    background: var(--sun);
    color: var(--ink);
}

.catalog-detail-page .entry-give-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .45rem;
}

.catalog-detail-page .entry-give-box {
    background: var(--paper-2);
    border: 2px dashed var(--muted);
    border-radius: 999px;
    color: var(--muted);
    font-weight: 800;
    padding: .25rem .9rem;
}

/* ---------- Content cards ---------- */
.catalog-detail-page .detail-panel-desc,
.catalog-detail-page .detail-panel-get,
.catalog-detail-page .detail-panel-use,
.catalog-detail-page .detail-panel-props {
    padding: 1.75rem !important;
}

/* Section headings are bright sticker labels, one colour per section */
.catalog-detail-page .entry-markdown-title,
.catalog-detail-page .properties-drawer-heading {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1.25rem;
    padding: .4rem 1.1rem .45rem;
    background: var(--sun);
    border: var(--line) solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--pop-sm);
    color: var(--ink);
    font-family: var(--head);
    font-size: 1.3rem;
    font-weight: 700;
    transform: rotate(-1.5deg);
}

.catalog-detail-page .detail-panel-get .entry-markdown-title {
    background: #8fe07a;
    transform: rotate(1deg);
}

.catalog-detail-page .detail-panel-use .entry-markdown-title {
    background: #ffb3d4;
    transform: rotate(-1deg);
}

.catalog-detail-page .properties-drawer-heading {
    background: #a9d8ff;
    font-size: 1.15rem;
    transform: rotate(1.5deg);
}

.catalog-detail-page .entry-markdown {
    color: var(--ink-2);
    font-size: 1.05rem;
    line-height: 1.75;
}

.catalog-detail-page .entry-markdown p {
    color: var(--ink-2);
    margin-bottom: 1rem;
}

.catalog-detail-page .entry-markdown p:last-child {
    margin-bottom: 0;
}

.catalog-detail-page .entry-markdown strong {
    color: var(--ink);
    font-weight: 900;
}

.catalog-detail-page .entry-markdown ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1rem;
}

.catalog-detail-page .entry-markdown ul > li {
    position: relative;
    padding-left: 1.9rem;
    margin-bottom: .6rem;
}

/* Bullets use the site's bulletpoint.png icon */
.catalog-detail-page .entry-markdown ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc((1.75em - 1.35rem) / 2);
    width: 1.35rem;
    height: 1.35rem;
    background: url('../images/site/bulletpoint.png') no-repeat center / contain;
    image-rendering: pixelated;
}

.catalog-detail-page .entry-markdown ol {
    padding-left: 1.4rem;
}

.catalog-detail-page .entry-markdown ol > li::marker {
    color: var(--ink);
    font-family: var(--head);
    font-weight: 700;
}

/* Sub-sections are soft tinted boxes */
.catalog-detail-page .info-section {
    background: #f0f8ff;
    border: var(--line) solid var(--ink);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}

.catalog-detail-page .info-section:last-child {
    margin-bottom: 0;
}

.catalog-detail-page .info-section h3 {
    color: var(--ink);
    font-family: var(--head);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 .75rem;
}

.catalog-detail-page .info-section ul.trading-list {
    margin: 0;
}

.catalog-detail-page .info-section ul.trading-list > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .6rem;
    padding: .55rem 0 .55rem 1.9rem;
    margin: 0;
    border-bottom: 2px dashed #c8d4e2;
}

.catalog-detail-page .info-section ul.trading-list > li::before {
    top: .85rem;
}

.catalog-detail-page .info-section ul.trading-list > li:last-child {
    border-bottom: 0;
}

.catalog-detail-page .info-section ul.trading-list strong {
    color: var(--ink);
    font-weight: 900;
}

.catalog-detail-page .info-section ul.trading-list img {
    width: 30px !important;
    height: 30px !important;
    image-rendering: pixelated;
}

/* ---------- Block Properties ---------- */
/* The whole sidebar sticks together, so the buttons below the properties panel never slide under it */
@media (min-width: 992px) {
    .catalog-detail-page .guide-sidebar {
        position: sticky;
        top: 1.5rem;
        align-self: flex-start;
    }
}

.catalog-detail-page .detail-panel-props .info-section {
    background: transparent;
    border: 0;
    padding: 0;
}

.catalog-detail-page .block-properties {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin: 0;
}

/* Each property is a rounded bubble */
.catalog-detail-page .block-properties-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    padding: .4rem .6rem .4rem .4rem;
    background: var(--paper-2);
    border: 2px solid var(--ink);
    border-radius: 16px;
    transition: transform .12s ease, background .12s ease;
}

.catalog-detail-page .block-properties-row:hover {
    background: #fff8d6;
    transform: translateX(3px);
}

.catalog-detail-page .block-properties-row dt {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: .6rem;
    margin: 0;
    color: var(--ink);
    font-size: .98rem;
    font-weight: 900;
}

.catalog-detail-page .block-properties-row .property-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    padding: 6px;
    margin: 0;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 12px;
    object-fit: contain;
    image-rendering: pixelated;
}

.catalog-detail-page .block-properties-row .property-info {
    color: var(--ocean);
    font-size: 17px;
    cursor: help;
    transition: transform .12s ease;
}

.catalog-detail-page .block-properties-row .property-info:hover {
    transform: scale(1.2) rotate(-8deg);
}

.catalog-detail-page .block-properties-row dd {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 1 auto;
    max-width: 55%;
    margin: 0;
    text-align: right;
}

/* Values are chunky coloured chips */
.catalog-detail-page .block-properties-row dd .entry-display {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 999px;
    box-shadow: 2px 2px 0 var(--ink);
    color: var(--ink);
    font-family: var(--head);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    padding: .2rem .7rem;
    word-break: break-word;
}

.catalog-detail-page .block-properties-row dd .value-yes { background: #8fe07a; }
.catalog-detail-page .block-properties-row dd .value-no { background: #ffb0b0; }
.catalog-detail-page .block-properties-row dd .value-unknown { background: #e6eaf0; color: var(--muted); box-shadow: none; }
.catalog-detail-page .block-properties-row dd .value-hardness { background: #ffd28a; }
.catalog-detail-page .block-properties-row dd .value-blast { background: #ffb8a1; }
.catalog-detail-page .block-properties-row dd .value-light { background: #fff08a; }
.catalog-detail-page .block-properties-row dd .value-stack { background: #a9d8ff; }

/* Tool icons sit in their own tiles, no chip */
.catalog-detail-page .block-properties-row dd .entry-display.value-tool {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    gap: .35rem;
}

.catalog-detail-page .value-tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 6px;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 12px;
    box-shadow: 2px 2px 0 var(--ink);
}

.catalog-detail-page .value-tool-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

/* Sidebar action buttons */
.catalog-detail-page .properties-drawer-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 1.05rem;
    padding: .7rem 1rem;
}

.catalog-detail-page .properties-drawer-toggle-purple {
    background: var(--grape);
    text-shadow: 0 2px 0 #6a3fd1;
}

.catalog-detail-page .properties-drawer-toggle-purple:hover {
    background: #ac85ff;
}

.catalog-detail-page .properties-drawer-toggle-teal {
    background: var(--ocean);
    text-shadow: 0 2px 0 #1f5fc4;
}

.catalog-detail-page .properties-drawer-toggle-teal:hover {
    background: #5aa0ff;
}

/* ---------- Crafting station (recipe cards) ---------- */
.catalog-detail-page .recipe-station {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .6rem;
}

.catalog-detail-page .recipe-station-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    padding: 6px;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 10px;
}

.catalog-detail-page .recipe-station-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

.catalog-detail-page .recipe-station-name {
    color: var(--ink);
    font-weight: 800;
}

/* Whole recipe block shares one left edge and one spacing rhythm */
/* Caption and station span the top; the recipe grid sits left and the ingredient list sits to its right */
.catalog-detail-page .recipe-container {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    column-gap: 1.25rem;
    row-gap: .6rem;
}

.catalog-detail-page .recipe-caption,
.catalog-detail-page .recipe-station {
    grid-column: 1 / -1;
}

.catalog-detail-page .recipe-panel {
    grid-column: 1;
    /* Same footprint as the 3x3 crafting panel (measured ~20.5rem wide, ~13.5rem tall), so every recipe type's panel matches */
    min-width: 20.5rem;
    min-height: 13.5rem;
    box-sizing: border-box;
}

.catalog-detail-page .recipe-ingredients {
    grid-column: 2;
    justify-self: start;
}

@media (max-width: 575.98px) {
    .catalog-detail-page .recipe-container {
        grid-template-columns: minmax(0, 1fr);
    }

    .catalog-detail-page .recipe-panel,
    .catalog-detail-page .recipe-ingredients {
        grid-column: 1;
    }
}

.catalog-detail-page .recipe-caption {
    margin: 0;
    color: var(--ink);
    font-family: var(--head);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

.catalog-detail-page .recipe-station {
    margin: 0;
}

.catalog-detail-page .recipe-panel {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    max-width: 100%;
    padding: .9rem 1rem;
    background: #fff;
    border: var(--line) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--pop-sm);
}

.catalog-detail-page .recipe-grid {
    display: grid;
    grid-template-columns: repeat(3, 56px);
    gap: 4px;
}

.catalog-detail-page .recipe-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: #eef3f8;
    border: 2px solid var(--ink);
    border-radius: 10px;
}

.catalog-detail-page .recipe-slot img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    image-rendering: pixelated;
}

.catalog-detail-page .recipe-output-slot {
    background: #fff3c4;
}

/* The 9 crafting cells each show one third of the station icon, so together they form the full picture */
/* Faded slice sits behind the item icon, so the picture stays visible without hiding the ingredients */
.catalog-detail-page .recipe-grid .recipe-slot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--station-icon);
    background-size: 300% 300%;
    background-repeat: no-repeat;
    opacity: .4;
    pointer-events: none;
}

.catalog-detail-page .recipe-grid .recipe-slot > * { position: relative; }

.catalog-detail-page .recipe-grid .recipe-slot:nth-child(3n+1)::before { background-position: 0% 0%; }
.catalog-detail-page .recipe-grid .recipe-slot:nth-child(3n+2)::before { background-position: 50% 0%; }
.catalog-detail-page .recipe-grid .recipe-slot:nth-child(3n)::before { background-position: 100% 0%; }
.catalog-detail-page .recipe-grid .recipe-slot:nth-child(n+4):nth-child(-n+6)::before { background-position-y: 50%; }
.catalog-detail-page .recipe-grid .recipe-slot:nth-child(n+7)::before { background-position-y: 100%; }

.catalog-detail-page .recipe-output-slot img {
    width: 44px !important;
    height: 44px !important;
}

.catalog-detail-page .recipe-arrow {
    display: block;
    flex: 0 0 auto;
    width: 30px;
    height: 24px;
    background: var(--ink);
    clip-path: polygon(0 30%, 60% 30%, 60% 0, 100% 50%, 60% 100%, 60% 70%, 0 70%);
}

.catalog-detail-page .recipe-furnace-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.catalog-detail-page .recipe-flame {
    display: flex;
    justify-content: center;
    height: 22px;
}

/* The furnace has no 3x3 grid to slice, so the station icon sits as one faint background
   image covering the whole panel instead (like the crafting table's picture, just not sliced). */
.catalog-detail-page .recipe-panel.recipe-furnace {
    position: relative;
    overflow: hidden;
}

.catalog-detail-page .recipe-panel.recipe-furnace::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Same box as the 3x3 crafting grid: 3 x 56px cells + 2 x 4px gaps = 176px square,
       at the panel's left padding and vertically centred, so the picture lines up with the crafting table's */
    background-image: var(--station-icon);
    background-size: 176px 176px;
    background-position: calc(var(--line) + 1rem) 50%;
    background-repeat: no-repeat;
    opacity: .4;
    pointer-events: none;
}

.catalog-detail-page .recipe-panel.recipe-furnace > * {
    position: relative;
}

/* Input and fuel cells are see-through so the furnace picture shows through them, like the crafting grid cells */
.catalog-detail-page .recipe-furnace-col .recipe-slot {
    background: rgba(238, 243, 248, .6);
}

.catalog-detail-page .recipe-panel.recipe-furnace .recipe-output-slot {
    background: rgba(255, 243, 196, .35);
}

/* Fuel slot: one fuel tile visible at a time, kept inside the slot */
.catalog-detail-page .recipe-fuel-slot {
    overflow: hidden;
}

.catalog-detail-page .recipe-tag-rotator {
    position: relative;
    width: 100%;
    height: 100%;
}

.catalog-detail-page .recipe-tag-frame {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
}

.catalog-detail-page .recipe-tag-frame.is-active {
    display: flex;
}

.catalog-detail-page .recipe-tag-frame img {
    width: 38px;
    height: 38px;
    image-rendering: pixelated;
}

.catalog-detail-page .recipe-flame svg {
    width: 22px;
    height: 22px;
}

/* Ingredient list: a grid of cards, one per ingredient (no bullet icon) */
.catalog-detail-page .entry-markdown .recipe-ingredients > li::before {
    content: none;
}

.catalog-detail-page .recipe-ingredients {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .6rem;
    list-style: none;
    margin: .9rem 0 0;
    padding: 0;
}

.catalog-detail-page .entry-markdown .recipe-ingredients > li {
    margin-bottom: 0;
}

.catalog-detail-page .recipe-ingredients {
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    margin-top: 0;
    grid-template-columns: max-content;
}

.catalog-detail-page .recipe-ingredients li {
    min-width: max-content;
    white-space: nowrap;
}

.catalog-detail-page .recipe-ingredients li {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 3rem;
    padding: .4rem .75rem .4rem .4rem;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 14px;
    box-shadow: var(--pop-sm);
    color: var(--ink);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
}

.catalog-detail-page .recipe-ingredient-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    background: #eef3f8;
    border: 2px solid var(--ink);
    border-radius: 10px;
}

.catalog-detail-page .recipe-ingredient-icon img {
    width: 26px;
    height: 26px;
    image-rendering: pixelated;
}

/* Related block/item chips inside the info sections (e.g. Budding Amethyst under Amethyst Cluster).
   Without these the icons render at their full image size. */
.catalog-detail-page .section-related-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.catalog-detail-page .section-related-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 4px 14px 4px 4px;
    font-family: var(--head);
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--pop-sm);
    text-decoration: none;
}

.catalog-detail-page a.section-related-chip:hover {
    background: var(--sun);
    color: var(--ink);
}

.catalog-detail-page .section-related-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 6px;
    flex: 0 0 auto;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 12px;
    overflow: hidden;
}

.catalog-detail-page .section-related-chip-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

.catalog-detail-page .section-related-chip-icon .bi {
    font-size: 1.4rem;
    color: var(--ink);
}

/* Output count on the result slot (e.g. ×4), styled like the ingredient counts */
.catalog-detail-page .recipe-output-slot .badge {
    right: -.45rem !important;
    bottom: -.45rem !important;
    height: 1.4rem;
    padding: 0 .4rem;
    display: inline-flex;
    align-items: center;
    background: var(--sun);
    border: 2px solid var(--ink);
    border-radius: 999px;
    box-shadow: var(--pop-sm);
    color: var(--ink);
    font-family: var(--head);
    font-size: .8rem !important;
    font-weight: 700;
    line-height: 1;
}

.catalog-detail-page .recipe-ingredient-count {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 1.6rem;
    padding: 0 .5rem;
    background: var(--sun);
    border: 2px solid var(--ink);
    border-radius: 999px;
    color: var(--ink);
    font-family: var(--head);
    font-weight: 700;
    white-space: nowrap;
}

/* ---------- Compact hero ---------- */
.catalog-detail-page .entry-hero-card {
    padding: 1.2rem 1.4rem !important;
}

/* No grass strip on the hero */
.catalog-detail-page .entry-hero-card::before {
    content: none;
}

.catalog-detail-page .entry-hero-card > .d-flex:first-child {
    gap: 1.1rem !important;
}

.catalog-detail-page .entry-hero-card .entry-icon-frame {
    width: 84px !important;
    height: 84px !important;
    border-radius: 20px;
}

.catalog-detail-page .entry-hero-card .entry-icon-frame img {
    width: 58px !important;
    height: 58px !important;
}

.catalog-detail-page .entry-hero-card h1 {
    font-size: 2rem;
    margin-bottom: .45rem !important;
}

.catalog-detail-page .entry-hero-card h1 + .d-flex {
    gap: .45rem !important;
}

.catalog-detail-page .entry-hero-card .entry-category-badge {
    height: 2.25rem;
    font-size: .95rem;
    padding: 0 .85rem;
}

.catalog-detail-page .entry-hero-card .block-give-label {
    height: 2.25rem;
    padding: 0 .85rem;
    font-size: .95rem;
    box-sizing: border-box;
}

.catalog-detail-page .entry-hero-card .block-give-row {
    height: 2.25rem;
    box-sizing: border-box;
    border-width: 2px;
    border-radius: 999px;
}

.catalog-detail-page .entry-hero-card .block-give-code,
.catalog-detail-page .entry-hero-card .block-give-copy {
    height: 100%;
    padding: 0 .9rem;
    align-items: center;
    line-height: 1;
}

.catalog-detail-page .entry-hero-card .block-give-command {
    gap: .3rem;
    margin-top: .9rem !important;
}

.catalog-detail-page .entry-hero-card .block-give-label {
    font-size: .85rem;
}

.catalog-detail-page .entry-hero-card .block-give-code {
    font-size: .9rem;
    padding: .35rem .9rem .35rem 1rem;
}

.catalog-detail-page .entry-hero-card .entry-give-commands {
    margin-top: .9rem !important;
}

/* ==========================================================================
   Mobile: 16px side gutter, no horizontal scroll
   ========================================================================== */
@media (max-width: 575.98px) {
    html,
    body {
        font-size: 15.5px;
    }

    .container,
    .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }

    .catalog-detail-page .breadcrumb-panel {
        border-radius: var(--radius);
    }

    .catalog-detail-page .entry-hero-card,
    .catalog-detail-page .detail-panel-desc,
    .catalog-detail-page .detail-panel-get,
    .catalog-detail-page .detail-panel-use,
    .catalog-detail-page .detail-panel-props {
        padding: 1.25rem !important;
    }

    .catalog-detail-page .entry-hero-card {
        padding: 1rem !important;
    }

    .catalog-detail-page .entry-hero-card h1 {
        font-size: 1.55rem;
    }

    .catalog-detail-page .entry-hero-card .entry-icon-frame {
        width: 68px !important;
        height: 68px !important;
        border-radius: 16px;
    }

    .catalog-detail-page .entry-hero-card .entry-icon-frame img {
        width: 46px !important;
        height: 46px !important;
    }

    .catalog-detail-page .entry-markdown-title {
        font-size: 1.1rem;
    }

    .catalog-detail-page .block-properties-row .property-icon,
    .catalog-detail-page .value-tool-icon {
        width: 40px;
        height: 40px;
    }
}

/* ══ Clean wiki style: pages with body.clean-page (home, blocks/items list) ══ */
/* ── Clean wiki: one white sheet, plain type, thin rules, blue links ── */
.hw {
    --hw-text: #1f2328; --hw-muted: #59636e; --hw-rule: #d8dee4; --hw-soft: #f6f8fa;
    --hw-link: #0b5cad; --hw-link-hover: #083f78; --hw-accent: #2f8a3a;
    max-width: 1080px; margin: 0 auto 2rem; padding: 2.5rem 2.75rem;
    font-family: var(--body, 'Nunito', system-ui, sans-serif); font-size: 15px; line-height: 1.6; color: var(--hw-text);
    background: #fff; border: 1px solid var(--hw-rule); border-radius: 8px;
}
.hw a { color: var(--hw-link); text-decoration: none; }
.hw a:hover { color: var(--hw-link-hover); text-decoration: underline; }
.hw h1, .hw h2, .hw h3 { font-family: inherit; color: var(--hw-text); text-shadow: none; letter-spacing: 0; text-transform: none; }

/* Masthead */
.hw-mast { text-align: center; padding-bottom: 1.75rem; border-bottom: 1px solid var(--hw-rule); }
.hw-title { margin: 0; font-size: 2.1rem; font-weight: 800; line-height: 1.2; }
.hw-sub { margin: .35rem 0 1.25rem; color: var(--hw-muted); font-size: 1rem; }
.hw-stats { margin: 1rem 0 0; color: var(--hw-muted); font-size: 14px; }
.hw-stats strong { color: var(--hw-text); font-weight: 700; }
.hw-stats .hw-dot { margin: 0 .5rem; color: var(--hw-rule); }

/* Search */
.hw-search { position: relative; max-width: 560px; margin: 0 auto; text-align: left; }
.hw-search-form { display: flex; gap: .5rem; }
.hw-search-input-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.hw-search-input {
    width: 100%; height: 2.75rem; padding: 0 2.25rem 0 .9rem;
    font: inherit; font-size: 15px; color: var(--hw-text);
    background: #fff; border: 1px solid #aeb7c0; border-radius: 6px; outline: none;
}
.hw-search-input:focus { border-color: var(--hw-link); box-shadow: 0 0 0 3px rgba(11, 92, 173, .15); }
.hw-search-input::placeholder { color: #8b949e; }
.hw-search-clear {
    position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    display: none; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; padding: 0;
    color: #8b949e; background: transparent; border: 0; cursor: pointer;
}
.hw-search-clear.show { display: inline-flex; }
.hw-search-clear:hover { color: var(--hw-text); }
.hw-search-btn {
    flex: 0 0 auto; height: 2.75rem; padding: 0 1.25rem;
    font: inherit; font-size: 15px; font-weight: 700; color: #fff;
    background: var(--hw-link); border: 1px solid var(--hw-link); border-radius: 6px; cursor: pointer;
}
.hw-search-btn:hover { background: var(--hw-link-hover); border-color: var(--hw-link-hover); }

/* Suggestions dropdown */
.hw .home-hero-suggest {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; display: none;
    max-height: 320px; overflow-y: auto; background: #fff;
    border: 1px solid var(--hw-rule); border-radius: 6px; box-shadow: 0 8px 24px rgba(31, 35, 40, .12);
}
.hw .home-hero-suggest.show { display: block; }
.hw .home-hero-suggest-item {
    display: flex; align-items: center; gap: .6rem; padding: .45rem .75rem;
    color: var(--hw-text); border-bottom: 1px solid var(--hw-soft);
}
.hw .home-hero-suggest-item:hover,
.hw .home-hero-suggest-item.is-active { background: var(--hw-soft); color: var(--hw-text); text-decoration: none; }
.hw .home-hero-suggest-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; }
.hw .home-hero-suggest-icon img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.hw .home-hero-suggest-type { margin-left: auto; font-size: 12px; color: var(--hw-muted); }
.hw .home-hero-suggest-empty { padding: .6rem .75rem; color: var(--hw-muted); }

/* Sections */
.hw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; }
.hw-section { padding: 1.75rem 0; border-bottom: 1px solid var(--hw-rule); }
.hw-grid .hw-section:nth-last-child(-n+2) { border-bottom: 0; }
.hw-h2 {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    margin: 0 0 .75rem; padding-bottom: .4rem; font-size: 1.2rem; font-weight: 800; border-bottom: 2px solid var(--hw-text);
}
.hw-h2 small { font-size: 13px; font-weight: 600; color: var(--hw-muted); }
.hw-p { margin: 0 0 .75rem; }
.hw-p:last-child { margin-bottom: 0; }

/* Link lists */
.hw-list { margin: 0; padding: 0; list-style: none; }
.hw-list li { display: flex; align-items: baseline; gap: .5rem; padding: .35rem 0; border-bottom: 1px dotted var(--hw-rule); }
.hw-list li:last-child { border-bottom: 0; }
.hw-list .hw-count { margin-left: auto; font-size: 13px; color: var(--hw-muted); white-space: nowrap; }
.hw-list .hw-desc { display: block; font-size: 13px; color: var(--hw-muted); }
.hw-linkbtn {
    padding: 0; font: inherit; font-weight: 700; color: var(--hw-link); text-align: left;
    background: none; border: 0; cursor: pointer;
}
.hw-linkbtn:hover { color: var(--hw-link-hover); text-decoration: underline; }
.hw-bullets { margin: 0 0 .75rem; padding-left: 1.2rem; }
.hw-bullets li { margin-bottom: .25rem; }
.hw-btn {
    display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .9rem;
    font: inherit; font-size: 14px; font-weight: 700; color: var(--hw-text);
    background: var(--hw-soft); border: 1px solid #c4ccd4; border-radius: 6px; cursor: pointer;
}
.hw-btn:hover { background: #eaeef2; }

/* Player shots */
.hw-shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.hw-shot { margin: 0; }
.hw-shot img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--hw-rule); border-radius: 4px; }
.hw-shot figcaption { margin-top: .3rem; font-size: 13px; color: var(--hw-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 767.98px) {
    .hw { padding: 1.5rem 1.1rem; border-radius: 6px; }
    .hw-title { font-size: 1.6rem; }
    .hw-grid { grid-template-columns: 1fr; }
    .hw-grid .hw-section:nth-last-child(2) { border-bottom: 1px solid var(--hw-rule); }
    .hw-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
    .hw-search-form { flex-direction: column; }
    .hw-search-btn { width: 100%; }
    .hw-stats .hw-dot { margin: 0 .3rem; }
}

/* Navbar (clean pages): white bar, thin bottom rule, flat text links */
.clean-page .site-sidebar,
.clean-page .mobile-topbar { background: #fff; border-bottom: 1px solid #d8dee4; box-shadow: 0 1px 3px rgba(31, 35, 40, .06); }
.clean-page .site-sidebar-inner { max-width: 1080px; padding: .5rem 1rem; }
.clean-page .sidebar-nav-row { gap: .15rem; }
.clean-page .sidebar-link,
.clean-page .sidebar-status {
    gap: .45rem; padding: .45rem .7rem; font-family: var(--body, inherit); font-size: 15px; font-weight: 700; color: #1f2328;
    background: transparent; border: 0; border-radius: 6px; box-shadow: none; transform: none; transition: background .12s ease;
}
.clean-page .sidebar-link:hover,
.clean-page .sidebar-link:focus-visible,
.clean-page .sidebar-link.show { background: #f6f8fa; color: #1f2328; box-shadow: none; transform: none; }
.clean-page .sidebar-link.active { background: transparent; color: #0b5cad; box-shadow: inset 0 -2px 0 #0b5cad; border-radius: 0; transform: none; }
.clean-page .sidebar-link:active { transform: none; }
.clean-page .sidebar-icon { width: 22px; height: 22px; background: none; border: 0; border-radius: 0; }
.clean-page .sidebar-icon img { width: 20px; height: 20px; }
.clean-page .sidebar-account,
.clean-page .sidebar-account:hover,
.clean-page .sidebar-account.show { color: #fff; background: #0b5cad; border-radius: 6px; }
.clean-page .sidebar-account:hover { background: #083f78; }
.clean-page .sidebar-status { font-size: 14px; font-weight: 600; color: #59636e; border: 1px solid #d8dee4; }
.clean-page .sidebar-status:hover { background: #f6f8fa; transform: none; box-shadow: none; }
.clean-page .sidebar-dot { width: 8px; height: 8px; border: 0; }
.clean-page .sidebar-dropdown-menu {
    padding: .3rem; background: #fff; border: 1px solid #d8dee4; border-radius: 8px; box-shadow: 0 8px 24px rgba(31, 35, 40, .12);
}
.clean-page .sidebar-dropdown-item { gap: .5rem; padding: .4rem .55rem; font-family: var(--body, inherit); font-size: 14px; font-weight: 600; border-radius: 4px; }
.clean-page .sidebar-dropdown-item:hover,
.clean-page .sidebar-dropdown-item.active { background: #f6f8fa; color: #0b5cad; }
.clean-page .sidebar-dropdown-item .sidebar-icon:empty { background: none; border: 0; }
.clean-page .sidebar-link-disabled,
.clean-page .sidebar-link-disabled:hover { color: #8b949e; background: transparent; }
.clean-page .sidebar-link-disabled::after { font-weight: 600; background: #f6f8fa; border: 1px solid #d8dee4; color: #59636e; }
.clean-page .sidebar-discord-tab {
    font-family: var(--body, inherit); font-size: 14px; font-weight: 700;
    border: 0 !important; border-radius: 6px; box-shadow: 0 4px 12px rgba(31, 35, 40, .2);
}
.clean-page .sidebar-discord-tab:hover { transform: none; box-shadow: 0 6px 16px rgba(31, 35, 40, .25); }
@media (max-width: 991.98px) {
    .clean-page .mobile-topbar-brand { font-family: var(--body, inherit); font-size: 1.05rem; font-weight: 800; color: #1f2328; }
    .clean-page .sidebar-toggler { width: 40px; height: 40px; font-size: 1.4rem; color: #1f2328; background: #fff; border: 1px solid #d8dee4; border-radius: 6px; box-shadow: none; }
    .clean-page .site-sidebar { border-right: 1px solid #d8dee4; box-shadow: 4px 0 24px rgba(31, 35, 40, .15); }
    .clean-page .sidebar-spacer { border-top: 1px solid #eaeef2; }
    .clean-page .sidebar-link.active { box-shadow: inset 3px 0 0 #0b5cad; background: #f6f8fa; }
    .clean-page .sidebar-dropdown-menu { box-shadow: none; }
    .clean-page .sidebar-discord-mobile { border: 0 !important; border-radius: 6px; }
}

/* Footer (clean pages): plain white strip with a thin top rule */
.clean-page .site-footer {
    margin-top: 2rem; padding: 2rem 0 1.75rem;
    color: #59636e; background: #fff; border-top: 1px solid #d8dee4;
    font-family: var(--body, inherit); font-size: 14px;
}
.clean-page .site-footer::before { display: none; }
.clean-page .site-footer .site-footer-box { max-width: 1080px; gap: .75rem 2rem; }
.clean-page .site-footer-brand {
    font-family: var(--body, inherit); font-size: 1rem; font-weight: 800; color: #1f2328; text-shadow: none;
}
.clean-page .site-footer-links { gap: 1.5rem; }
.clean-page .site-footer-links a {
    height: auto; padding: 0; font-family: inherit; font-size: 14px; font-weight: 600; color: #0b5cad;
    background: none; border: 0; border-radius: 0; box-shadow: none;
}
.clean-page .site-footer-links a:hover { color: #083f78; background: none; text-decoration: underline; }
.clean-page .site-footer-legal {
    margin-top: 1rem; padding-top: 1rem; font-size: 13px; color: #59636e; border-top: 1px solid #eaeef2;
}
@media (max-width: 767.98px) {
    .clean-page .site-footer { padding-bottom: 5rem; } /* room for the floating Discord button */
}


/* ══ Clean wiki style: block/item detail page (body.clean-page.catalog-detail-page) ══ */
.clean-page.catalog-detail-page { --cd-text: #1f2328; --cd-muted: #59636e; --cd-rule: #d8dee4; --cd-soft: #f6f8fa; --cd-link: #0b5cad; --cd-link-hover: #083f78; }
.clean-page.catalog-detail-page #entry-form { max-width: 1080px; margin: 0 auto; color: var(--cd-text); font-family: var(--body); }

/* Panels: white, thin border, no pop shadow */
.clean-page.catalog-detail-page .wiki-panel {
    background: #fff; border: 1px solid var(--cd-rule); border-radius: 8px; box-shadow: none;
}
.clean-page.catalog-detail-page .detail-panel-desc,
.clean-page.catalog-detail-page .detail-panel-get,
.clean-page.catalog-detail-page .detail-panel-use,
.clean-page.catalog-detail-page .detail-panel-props { padding: 1.75rem 2rem !important; }

/* Breadcrumb: plain line of small links */
.clean-page.catalog-detail-page .breadcrumb-panel { min-height: 0; border-radius: 8px; padding: .6rem 1rem; margin-bottom: 1rem !important; }
.clean-page.catalog-detail-page .breadcrumb { font-family: var(--body); font-size: 14px; gap: .4rem; }
.clean-page.catalog-detail-page .breadcrumb-item { font-family: var(--body); font-weight: 400; }
.clean-page.catalog-detail-page .breadcrumb-item + .breadcrumb-item::before {
    content: '/'; width: auto; height: auto; background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--cd-muted); margin: 0 .4rem 0 0; padding: 0; float: none;
}
.clean-page.catalog-detail-page .breadcrumb-item a { color: var(--cd-link); font-weight: 400; text-decoration: none; }
.clean-page.catalog-detail-page .breadcrumb-item a:hover { color: var(--cd-link-hover); text-decoration: underline; }
.clean-page.catalog-detail-page .breadcrumb-item.active { color: var(--cd-muted); font-weight: 400; }
.clean-page.catalog-detail-page .entry-hero-kid-badge {
    padding: .3rem .8rem; font-family: var(--body); font-size: 13px; font-weight: 700; color: var(--cd-link);
    background: #fff; border: 1px solid var(--cd-rule); border-radius: 6px; box-shadow: none; transform: none;
}
.clean-page.catalog-detail-page .entry-hero-kid-badge:hover { border-color: var(--cd-link); background: var(--cd-soft); transform: none; }

/* Title block */
.clean-page.catalog-detail-page .entry-hero-card { padding: 1.75rem 2rem !important; overflow: visible; }
.clean-page.catalog-detail-page .entry-hero-card::before { display: none; }
.clean-page.catalog-detail-page .entry-hero-card .entry-icon-frame,
.clean-page.catalog-detail-page .entry-icon-frame {
    width: 72px !important; height: 72px !important; padding: 8px; background: var(--cd-soft);
    border: 1px solid var(--cd-rule); border-radius: 6px; box-shadow: none; transform: none;
}
.clean-page.catalog-detail-page .entry-icon-frame:hover { transform: none; }
.clean-page.catalog-detail-page .entry-hero-card .entry-icon-frame img { width: 100% !important; height: 100% !important; object-fit: contain; image-rendering: pixelated; }
.clean-page.catalog-detail-page .entry-hero-card h1 {
    margin: 0 0 .4rem !important; font-family: var(--body); font-size: 2rem; font-weight: 800; letter-spacing: -.01em; color: var(--cd-text); text-shadow: none;
}
.clean-page.catalog-detail-page .entry-category-badge,
.clean-page.catalog-detail-page .entry-hero-card .entry-category-badge,
.clean-page.catalog-detail-page .entry-category-badge:not(.entry-type-badge):nth-of-type(n) {
    padding: .15rem .6rem; font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--cd-muted);
    background: var(--cd-soft); border: 1px solid var(--cd-rule); border-radius: 999px; box-shadow: none; transform: none;
}
.clean-page.catalog-detail-page .entry-type-badge { color: #fff !important; background: var(--cd-link) !important; border-color: var(--cd-link) !important; }

/* Give command: label above a code box with a copy button */
.clean-page.catalog-detail-page .entry-hero-card .block-give-command { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; margin-top: 1.25rem !important; padding-top: 1.25rem; border-top: 1px solid var(--cd-rule); }
.clean-page.catalog-detail-page .entry-hero-card .block-give-label {
    padding: 0; font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--cd-muted); background: none; border: 0; box-shadow: none; transform: none;
}
.clean-page.catalog-detail-page .entry-hero-card .block-give-row { display: inline-flex; align-items: stretch; padding: 0; background: none; border: 1px solid var(--cd-rule); border-radius: 6px; box-shadow: none; overflow: hidden; }
.clean-page.catalog-detail-page .entry-hero-card .block-give-code { padding: .45rem .8rem; font-size: 14px; color: var(--cd-text); background: var(--cd-soft); border: 0; border-radius: 0; }
.clean-page.catalog-detail-page .entry-hero-card .block-give-copy {
    padding: .45rem .9rem; font-family: var(--body); font-size: 13px; font-weight: 700; color: var(--cd-link);
    background: #fff; border: 0; border-left: 1px solid var(--cd-rule); border-radius: 0; box-shadow: none; transform: none;
}
.clean-page.catalog-detail-page .entry-hero-card .block-give-copy:hover { background: var(--cd-soft); color: var(--cd-link-hover); }
.clean-page.catalog-detail-page .entry-hero-card .block-give-copy.copied { color: #1a7f37; }

/* Section headings: plain h2 with a dark rule underneath */
.clean-page.catalog-detail-page .entry-markdown-title,
.clean-page.catalog-detail-page .detail-panel-get .entry-markdown-title,
.clean-page.catalog-detail-page .detail-panel-use .entry-markdown-title,
.clean-page.catalog-detail-page .properties-drawer-heading {
    display: block; margin: 0 0 1rem; padding: 0 0 .5rem; font-family: var(--body); font-size: 1.35rem; font-weight: 800;
    color: var(--cd-text); background: none; border: 0; border-bottom: 2px solid var(--cd-text); border-radius: 0; box-shadow: none; transform: none;
}
.clean-page.catalog-detail-page .properties-drawer-heading { font-size: 1.15rem; }

/* Sub-sections: no boxes, just h3 + text with a thin rule between */
.clean-page.catalog-detail-page .info-section {
    padding: 0 0 1.1rem; margin: 0 0 1.1rem; background: none; border: 0; border-bottom: 1px solid var(--cd-rule); border-radius: 0;
}
.clean-page.catalog-detail-page .info-section:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.clean-page.catalog-detail-page .info-section h3 { margin: 0 0 .4rem; font-family: var(--body); font-size: 1.05rem; font-weight: 700; color: var(--cd-text); }
.clean-page.catalog-detail-page .entry-markdown { font-size: 16px; line-height: 1.65; color: var(--cd-text); }
.clean-page.catalog-detail-page .entry-markdown a { color: var(--cd-link); }
.clean-page.catalog-detail-page .entry-markdown ul > li::before {
    top: .72em; left: .35rem; width: 6px; height: 6px; background: var(--cd-muted); border-radius: 50%;
}
.clean-page.catalog-detail-page .entry-markdown ul > li { padding-left: 1.3rem; }
.clean-page.catalog-detail-page .info-section ul.trading-list > li { padding: .35rem 0 .35rem 1.3rem; border-bottom: 0; }
.clean-page.catalog-detail-page .info-section ul.trading-list > li::before { top: .95rem; }
.clean-page.catalog-detail-page .info-section ul.trading-list strong { font-weight: 700; }

/* Recipes: thin-bordered panel, flat grey slots */
.clean-page.catalog-detail-page .recipe-caption { font-family: var(--body); font-size: 1rem; font-weight: 700; color: var(--cd-text); }
.clean-page.catalog-detail-page .recipe-station-icon { background: var(--cd-soft); border: 1px solid var(--cd-rule); border-radius: 4px; box-shadow: none; }
.clean-page.catalog-detail-page .recipe-station-name { font-family: var(--body); font-weight: 600; color: var(--cd-muted); }
.clean-page.catalog-detail-page .recipe-panel { background: #fff; border: 1px solid var(--cd-rule); border-radius: 8px; box-shadow: none; }
.clean-page.catalog-detail-page .recipe-slot { background: var(--cd-soft); border: 1px solid #c4ccd4; border-radius: 4px; }
.clean-page.catalog-detail-page .recipe-output-slot { background: #fff; border-color: var(--cd-link); }
.clean-page.catalog-detail-page .recipe-furnace-col .recipe-slot { background: rgba(246, 248, 250, .7); }
.clean-page.catalog-detail-page .recipe-panel.recipe-furnace .recipe-output-slot { background: rgba(255, 255, 255, .7); }
.clean-page.catalog-detail-page .recipe-grid .recipe-slot::before,
.clean-page.catalog-detail-page .recipe-panel.recipe-furnace::before { opacity: .22; }
.clean-page.catalog-detail-page .recipe-arrow { background: #8b949e; }
.clean-page.catalog-detail-page .recipe-output-slot .badge { color: #fff; background: var(--cd-text); border: 0; box-shadow: none; }
.clean-page.catalog-detail-page .recipe-ingredients li {
    font-family: var(--body); font-size: 14px; color: var(--cd-text); background: #fff; border: 1px solid var(--cd-rule); border-radius: 6px; box-shadow: none;
}
.clean-page.catalog-detail-page .recipe-ingredient-count { color: var(--cd-text); background: var(--cd-soft); border: 1px solid var(--cd-rule); box-shadow: none; }
.clean-page.catalog-detail-page .recipe-ingredient-icon { background: var(--cd-soft); border: 1px solid var(--cd-rule); border-radius: 4px; box-shadow: none; }

/* Related chips */
.clean-page.catalog-detail-page .section-related-chip {
    padding: 3px 12px 3px 3px; font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--cd-link);
    background: #fff; border: 1px solid var(--cd-rule); border-radius: 6px; box-shadow: none;
}
.clean-page.catalog-detail-page a.section-related-chip:hover { color: var(--cd-link-hover); background: var(--cd-soft); border-color: var(--cd-link); }
.clean-page.catalog-detail-page .section-related-chip-icon { width: 36px; height: 36px; padding: 4px; background: var(--cd-soft); border: 0; border-radius: 4px; }

/* Block properties: a plain two-column table */
.clean-page.catalog-detail-page .detail-panel-props .info-section { border-bottom: 0; }
.clean-page.catalog-detail-page .block-properties { gap: 0; }
.clean-page.catalog-detail-page .block-properties-row {
    padding: .5rem 0; background: none; border: 0; border-bottom: 1px solid var(--cd-rule); border-radius: 0; transform: none;
}
.clean-page.catalog-detail-page .block-properties-row:last-child { border-bottom: 0; }
.clean-page.catalog-detail-page .block-properties-row:hover { background: none; transform: none; }
.clean-page.catalog-detail-page .block-properties-row dt { gap: .5rem; font-size: 14px; font-weight: 600; color: var(--cd-text); }
.clean-page.catalog-detail-page .block-properties-row .property-icon { width: 28px; height: 28px; padding: 3px; background: var(--cd-soft); border: 0; border-radius: 4px; }
.clean-page.catalog-detail-page .block-properties-row .property-info { color: #8b949e; font-size: 13px; }
.clean-page.catalog-detail-page .block-properties-row .property-info:hover { color: var(--cd-link); transform: none; }
.clean-page.catalog-detail-page .block-properties-row dd .entry-display,
.clean-page.catalog-detail-page .block-properties-row dd .entry-display[class*="value-"] {
    padding: 0; font-family: var(--body); font-size: 14px; font-weight: 700; color: var(--cd-text); background: none; border: 0; box-shadow: none;
}
.clean-page.catalog-detail-page .block-properties-row dd .value-yes { color: #1a7f37; }
.clean-page.catalog-detail-page .block-properties-row dd .value-no { color: var(--cd-muted); font-weight: 600; }
.clean-page.catalog-detail-page .block-properties-row dd .value-unknown { color: #8b949e; }
.clean-page.catalog-detail-page .value-tool-icon { width: 30px; height: 30px; padding: 3px; background: var(--cd-soft); border: 1px solid var(--cd-rule); border-radius: 4px; box-shadow: none; }

/* Side buttons: plain bordered buttons, blue text */
.clean-page.catalog-detail-page .properties-drawer-toggle,
.clean-page.catalog-detail-page .properties-drawer-toggle[class*="properties-drawer-toggle-"] {
    padding: .6rem 1rem; font-family: var(--body); font-size: 15px; font-weight: 700; color: var(--cd-link);
    background: #fff; border: 1px solid var(--cd-rule); border-radius: 6px; box-shadow: none; transform: none; text-shadow: none;
}
.clean-page.catalog-detail-page .properties-drawer-toggle:hover { color: var(--cd-link-hover); background: var(--cd-soft); border-color: var(--cd-link); transform: none; }
.clean-page.catalog-detail-page .properties-drawer-toggle-red { color: #b42318 !important; }

@media (max-width: 575.98px) {
    .clean-page.catalog-detail-page .detail-panel-desc,
    .clean-page.catalog-detail-page .detail-panel-get,
    .clean-page.catalog-detail-page .detail-panel-use,
    .clean-page.catalog-detail-page .detail-panel-props,
    .clean-page.catalog-detail-page .entry-hero-card { padding: 1.25rem !important; }
    .clean-page.catalog-detail-page .entry-hero-card h1 { font-size: 1.6rem; }
}
.clean-page.catalog-detail-page .entry-hero-card .block-give-command { width: 100%; max-width: none; }
.clean-page.catalog-detail-page .detail-panel-get .mt-3 > .info-section { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--cd-rule); }
@media (max-width: 575.98px) {
    .clean-page.catalog-detail-page .recipe-panel { min-width: 0; min-height: 0; flex-wrap: nowrap; gap: .5rem; padding: .75rem; }
    .clean-page.catalog-detail-page .recipe-grid { grid-template-columns: repeat(3, 42px); gap: 3px; }
    .clean-page.catalog-detail-page .recipe-slot { width: 42px; height: 42px; }
    .clean-page.catalog-detail-page .recipe-slot img { width: 30px; height: 30px; }
    .clean-page.catalog-detail-page .recipe-output-slot img { width: 2.25rem !important; height: 2.25rem !important; }
    .clean-page.catalog-detail-page .recipe-arrow { width: 22px; height: 18px; }
    .clean-page.catalog-detail-page .recipe-panel.recipe-furnace::before { background-size: 132px 132px; background-position: .75rem 50%; }
}

/* ══ Clean wiki style: side drawers on clean pages (Become a Helper, Suggest, Report, What You Can Make) ══ */
.clean-page .offcanvas.properties-drawer {
    background: #fff; color: #1f2328; border-left: 1px solid #d8dee4; box-shadow: none; font-family: var(--body);
}
.clean-page .properties-drawer .offcanvas-header {
    padding: 1rem 1.25rem; background: #fff; border-bottom: 1px solid #d8dee4; box-shadow: none;
}
.clean-page .properties-drawer .offcanvas-title,
.clean-page .properties-drawer .offcanvas-title.h5 {
    font-family: var(--body); font-size: 1.1rem; font-weight: 800; color: #1f2328; text-shadow: none; margin: 0;
}
.clean-page .properties-drawer .properties-drawer-close {
    width: 2rem; height: 2rem; background: #fff; border: 1px solid #d8dee4; border-radius: 6px; box-shadow: none; color: #59636e;
}
.clean-page .properties-drawer .properties-drawer-close:hover { background: #f6f8fa; color: #1f2328; border-color: #aeb7c0; }
.clean-page .properties-drawer .offcanvas-body { padding: 1.25rem; font-family: var(--body); font-size: 15px; color: #1f2328; }
.clean-page .properties-drawer .report-drawer-intro { font-weight: 400; color: #59636e; line-height: 1.55; margin: 0 0 1rem; }

/* Form fields: thin bordered, blue focus ring */
.clean-page .properties-drawer .form-label,
.clean-page .properties-drawer .form-check-label { font-family: var(--body); font-size: 14px; font-weight: 600; color: #1f2328; }
.clean-page .properties-drawer .form-control,
.clean-page .properties-drawer .form-select {
    font-family: var(--body); font-size: 14px; color: #1f2328; background-color: #fff; border: 1px solid #aeb7c0; border-radius: 6px; box-shadow: none;
}
.clean-page .properties-drawer .form-control:focus,
.clean-page .properties-drawer .form-select:focus { border-color: #0b5cad; box-shadow: 0 0 0 3px rgba(11, 92, 173, .15); }
.clean-page .properties-drawer .form-check-input:checked { background-color: #0b5cad; border-color: #0b5cad; }

/* Steps: plain sections separated by thin rules */
.clean-page #helperDrawer .helper-form { gap: 0; }
.clean-page #helperDrawer .helper-step {
    padding: 1rem 0; margin: 0; background: none; border: 0; border-top: 1px solid #d8dee4; border-radius: 0; box-shadow: none;
}
.clean-page #helperDrawer .helper-step legend {
    float: none; width: auto; padding: 0; margin: 0 0 .6rem; font-family: var(--body); font-size: 15px; font-weight: 800; color: #1f2328; background: none; border: 0; box-shadow: none; transform: none;
}
.clean-page #helperDrawer .helper-hint { font-size: 13px; color: #59636e; margin-top: .3rem; }

/* Buttons: blue primary, plain secondary */
.clean-page .properties-drawer .btn-wiki,
.clean-page .properties-drawer .properties-drawer-toggle {
    padding: .55rem 1rem; font-family: var(--body); font-size: 15px; font-weight: 700; color: #fff; background: #0b5cad; border: 1px solid #0b5cad; border-radius: 6px; box-shadow: none; text-shadow: none; transform: none;
}
.clean-page .properties-drawer .btn-wiki:hover,
.clean-page .properties-drawer .properties-drawer-toggle:hover { background: #083f78; border-color: #083f78; color: #fff; transform: none; }
.clean-page .properties-drawer .btn-wiki:disabled,
.clean-page .properties-drawer .btn-wiki.disabled { background: #aeb7c0; border-color: #aeb7c0; }

/* Invalid feedback stays red and small */
.clean-page .properties-drawer .invalid-feedback { font-family: var(--body); font-size: 13px; color: #b42318; }

/* Report and usedIn list items */
.clean-page .properties-drawer .entry-card {
    background: #fff; border: 1px solid #d8dee4; border-radius: 6px; box-shadow: none; transform: none;
}
.clean-page .properties-drawer a.text-decoration-none:hover .entry-card { border-color: #0b5cad; }
.clean-page .properties-drawer .entry-name { font-family: var(--body); font-size: 14px; font-weight: 700; color: #1f2328; }
.clean-page .properties-drawer .entry-icon-frame { background: #f6f8fa; border: 0; border-radius: 4px; box-shadow: none; }

/* Drawer headers: the cartoon ID rules (#helperDrawer ...) and colour classes need !important to be replaced on clean pages */
.clean-page .offcanvas.properties-drawer .offcanvas-header {
    background: #fff !important; border-bottom: 1px solid #d8dee4 !important; box-shadow: none !important;
}
.clean-page .offcanvas.properties-drawer .offcanvas-title {
    font-family: var(--body) !important; font-size: 1.1rem !important; font-weight: 800 !important; color: #1f2328 !important; text-shadow: none !important;
}
.clean-page .offcanvas.properties-drawer .properties-drawer-close {
    background: #fff !important; border: 1px solid #d8dee4 !important; border-radius: 6px !important; box-shadow: none !important; color: #59636e !important;
}
.clean-page .offcanvas.properties-drawer .offcanvas-body { background: #fff !important; }
.clean-page .offcanvas.properties-drawer .btn-wiki,
.clean-page .offcanvas.properties-drawer .properties-drawer-toggle {
    border-radius: 6px !important; box-shadow: none !important; border: 1px solid #0b5cad !important; text-shadow: none !important;
}

/* Category tags on clean detail pages: one even row, each tag keeps its text on one line */
.clean-page.catalog-detail-page .entry-hero-card .entry-category-badge {
    height: auto !important; min-height: 0; padding: .3rem .75rem !important; line-height: 1.2; white-space: nowrap; max-width: 100%;
    font-size: 13px !important; font-weight: 600; letter-spacing: 0;
}
.clean-page.catalog-detail-page .entry-hero-card .entry-category-badge.entry-type-badge { font-weight: 700; }
.clean-page.catalog-detail-page .entry-hero-card h1 + .d-flex { gap: .4rem !important; row-gap: .4rem !important; }

/* Category tags: square corners */
.clean-page.catalog-detail-page .entry-hero-card .entry-category-badge,
.clean-page.catalog-detail-page .entry-category-badge {
    border-radius: 4px !important;
}

/* Category tags: soft colour tints, cycling through four, with a thin border in the same hue */
.clean-page.catalog-detail-page .entry-hero-card .entry-category-badge:not(.entry-type-badge) { color: #1f2328; }
.clean-page.catalog-detail-page .entry-hero-card .entry-category-badge:not(.entry-type-badge):nth-of-type(4n+2) { background: #ddeeff; border-color: #9cc7ef; }
.clean-page.catalog-detail-page .entry-hero-card .entry-category-badge:not(.entry-type-badge):nth-of-type(4n+3) { background: #fff1c2; border-color: #e6c64d; }
.clean-page.catalog-detail-page .entry-hero-card .entry-category-badge:not(.entry-type-badge):nth-of-type(4n+4) { background: #ffe0ec; border-color: #f0a6c4; }
.clean-page.catalog-detail-page .entry-hero-card .entry-category-badge:not(.entry-type-badge):nth-of-type(4n+5) { background: #ebe3ff; border-color: #b9a4ef; }

/* Report an Issue drawer on clean pages */
.clean-page .properties-drawer .report-field-label { display: block; margin: 0 0 .35rem; font-size: 14px; font-weight: 700; color: #1f2328; }
.clean-page .properties-drawer .report-field-optional { font-weight: 400; color: #59636e; }
.clean-page .properties-drawer .report-drawer-intro strong { color: #1f2328; }
.clean-page .properties-drawer .report-thanks-icon { font-size: 2.5rem; color: #1a7f37; }
.clean-page .properties-drawer .report-thanks-heading { font-family: var(--body); font-size: 1.15rem; font-weight: 800; color: #1f2328; margin: .75rem 0 .35rem; }
.clean-page .properties-drawer .report-thanks-text { color: #59636e; margin: 0; }
.clean-page .properties-drawer .properties-drawer-toggle-red,
.clean-page .properties-drawer .btn-wiki.properties-drawer-toggle-red { background: #b42318 !important; border-color: #b42318 !important; color: #fff !important; }
.clean-page .properties-drawer .properties-drawer-toggle-red:hover { background: #8a1a12 !important; border-color: #8a1a12 !important; }

/* Report drawer header: title left, close button far right */
.clean-page .offcanvas.properties-drawer .offcanvas-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 1rem; }
.clean-page .offcanvas.properties-drawer .properties-drawer-close { margin-left: auto !important; flex: 0 0 auto; }

/* Server Status drawer (site-wide, so clean pages get it too) */
.clean-page .server-drawer { background: #fff !important; background-image: none !important; color: #1f2328; border-left: 1px solid #d8dee4; box-shadow: none; font-family: var(--body); }
.clean-page .server-drawer .offcanvas-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: #fff; border-bottom: 1px solid #d8dee4; box-shadow: none; }
.clean-page .server-drawer .offcanvas-title { font-family: var(--body); font-size: 1.1rem; font-weight: 800; color: #1f2328; text-shadow: none; margin: 0; }
.clean-page .server-drawer .server-drawer-close { width: 2rem; height: 2rem; margin-left: auto; flex: 0 0 auto; background: #fff; border: 1px solid #d8dee4; border-radius: 6px; box-shadow: none; color: #59636e; }
.clean-page .server-drawer .server-drawer-close:hover { background: #f6f8fa; color: #1f2328; transform: none; }
.clean-page .server-drawer .offcanvas-body { padding: 1.25rem; }

.clean-page .server-drawer .server-drawer-summary { border: 1px solid #d8dee4; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: none; }
.clean-page .server-drawer .server-drawer-summary-row { display: flex; align-items: center; justify-content: space-between; padding: .6rem .85rem; border: 0; background: #fff; }
.clean-page .server-drawer .server-drawer-summary-row + .server-drawer-summary-row { border-top: 1px solid #d8dee4; }
.clean-page .server-drawer .server-drawer-summary-label { font-size: 13px; font-weight: 600; color: #59636e; }
.clean-page .server-drawer .server-drawer-summary-value { font-size: 14px; font-weight: 700; color: #1f2328; }
.clean-page .server-drawer .server-drawer-status-pill { padding: .15rem .6rem; border: 1px solid #d8dee4; border-radius: 4px; background: #f6f8fa; box-shadow: none; color: #59636e; }
.clean-page .server-drawer .server-drawer-status-pill.is-online { background: #dafbe1; border-color: #7fd49a; color: #1a7f37; }
.clean-page .server-drawer .server-drawer-status-pill.is-offline { background: #ffebe9; border-color: #f5a8a1; color: #b42318; }

.clean-page .server-drawer .server-drawer-address-actions { display: flex; gap: .5rem; margin: 1rem 0 1.25rem; }
.clean-page .server-drawer .server-drawer-action-btn { flex: 1 1 0; padding: .5rem .8rem; font-family: var(--body); font-size: 14px; font-weight: 700; color: #0b5cad; background: #fff; border: 1px solid #d8dee4; border-radius: 6px; box-shadow: none; transform: none; }
.clean-page .server-drawer .server-drawer-action-btn:hover { background: #f6f8fa; border-color: #0b5cad; color: #083f78; transform: none; }
.clean-page .server-drawer .server-drawer-action-btn-report { color: #b42318; }
.clean-page .server-drawer .server-drawer-action-btn-report:hover { color: #8a1a12; }

.clean-page .server-drawer .server-drawer-heading { margin: 1.25rem 0 .6rem; padding-bottom: .4rem; font-family: var(--body); font-size: 1rem; font-weight: 800; color: #1f2328; border-bottom: 1px solid #d8dee4; }
.clean-page .server-drawer .server-drawer-players { list-style: none; margin: 0; padding: 0; }
.clean-page .server-drawer .server-drawer-player { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid #eaeef2; background: none; box-shadow: none; transform: none; }
.clean-page .server-drawer .server-drawer-player-avatar { width: 28px; height: 28px; border: 0; border-radius: 4px; box-shadow: none; }
.clean-page .server-drawer .server-drawer-player-name { font-size: 14px; font-weight: 700; color: #1f2328; }
.clean-page .server-drawer .server-drawer-player-status { font-size: 13px; color: #59636e; }
.clean-page .server-drawer .server-drawer-player-rank { font-size: 12px; font-weight: 700; color: #1f2328; border: 1px solid #d8dee4; border-radius: 4px; box-shadow: none; }
.clean-page .server-drawer .server-drawer-more { font-size: 14px; color: #59636e; }
.clean-page .server-drawer .server-drawer-view-all { display: inline-block; margin-top: 1rem; font-size: 14px; font-weight: 700; color: #0b5cad; text-decoration: none; }
.clean-page .server-drawer .server-drawer-view-all:hover { color: #083f78; text-decoration: underline; }

/* Server Status: section headings, view-all link and action buttons (!important to beat the cartoon rules) */
.clean-page .server-drawer .server-drawer-heading {
    background: none !important; border: 0 !important; border-bottom: 1px solid #d8dee4 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important;
    display: block !important; color: #1f2328 !important; font-family: var(--body) !important; font-size: 1rem !important; font-weight: 800 !important; padding: 0 0 .4rem !important; margin: 1.25rem 0 .6rem !important;
}
.clean-page .server-drawer .server-drawer-view-all {
    background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; color: #0b5cad !important; font-family: var(--body) !important; font-size: 14px !important; font-weight: 700 !important; padding: 0 !important; text-shadow: none !important;
}
.clean-page .server-drawer .server-drawer-action-btn {
    font-family: var(--body) !important; text-shadow: none !important; border-radius: 6px !important; box-shadow: none !important; transform: none !important;
}

/* Login / register drawer on clean pages */
.clean-page .offcanvas.auth-drawer { background: #fff !important; color: #1f2328; border-left: 1px solid #d8dee4; box-shadow: none; font-family: var(--body); }
.clean-page .auth-drawer .offcanvas-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 1rem; padding: 1rem 1.25rem; background: #fff !important; border-bottom: 1px solid #d8dee4 !important; box-shadow: none !important; }
.clean-page .auth-drawer .offcanvas-title { font-family: var(--body) !important; font-size: 1.1rem !important; font-weight: 800 !important; color: #1f2328 !important; text-shadow: none !important; margin: 0; }
.clean-page .auth-drawer .auth-drawer-close { width: 2rem; height: 2rem; margin-left: auto; flex: 0 0 auto; background: #fff; border: 1px solid #d8dee4; border-radius: 6px; box-shadow: none; color: #59636e; transform: none; }
.clean-page .auth-drawer .auth-drawer-close:hover { background: #f6f8fa; color: #1f2328; }
.clean-page .auth-drawer .offcanvas-body { padding: 1.25rem; background: #fff; font-family: var(--body); font-size: 15px; }
.clean-page .auth-drawer .form-label, .clean-page .auth-drawer .form-check-label { font-family: var(--body); font-size: 14px; font-weight: 600; color: #1f2328; }
.clean-page .auth-drawer .form-control { font-family: var(--body); font-size: 14px; border: 1px solid #aeb7c0; border-radius: 6px; box-shadow: none; }
.clean-page .auth-drawer .form-control:focus { border-color: #0b5cad; box-shadow: 0 0 0 3px rgba(11, 92, 173, .15); }
.clean-page .auth-drawer .btn-wiki {
    font-family: var(--body) !important; font-size: 15px !important; font-weight: 700 !important; color: #fff !important; background: #0b5cad !important; border: 1px solid #0b5cad !important; border-radius: 6px !important; box-shadow: none !important; text-shadow: none !important; transform: none !important;
}
.clean-page .auth-drawer .btn-wiki:hover { background: #083f78 !important; border-color: #083f78 !important; }
.clean-page .auth-drawer a:not(.btn) { color: #0b5cad; }

/* Login drawer: plain form (no thick box), plain community card */
.clean-page .auth-drawer form { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }
.clean-page .auth-drawer .auth-members-card { background: #fff !important; border: 1px solid #d8dee4 !important; border-radius: 6px !important; box-shadow: none !important; padding: .9rem 1rem !important; }
.clean-page .auth-drawer .auth-members-title { display: block !important; background: none !important; border: 0 !important; box-shadow: none !important; transform: none !important; padding: 0 !important; margin: 0 0 .5rem !important; font-family: var(--body) !important; font-size: 14px !important; font-weight: 800 !important; color: #1f2328 !important; }
.clean-page .auth-drawer .auth-members-card img, .clean-page .auth-drawer .auth-members-card a { border-radius: 4px !important; box-shadow: none !important; border: 1px solid #d8dee4 !important; }

/* Apply now / Expert Chat buttons on clean detail pages: solid blue, square corners, same as the drawer buttons */
.clean-page.catalog-detail-page .entry-hero-kid-badge,
.clean-page.catalog-detail-page .entry-hero-kid-badge.kid-sign {
    padding: .4rem .9rem !important; font-family: var(--body) !important; font-size: 14px !important; font-weight: 700 !important;
    color: #fff !important; background: #0b5cad !important; border: 1px solid #0b5cad !important; border-radius: 6px !important;
    box-shadow: none !important; text-shadow: none !important; transform: none !important; white-space: nowrap;
}
.clean-page.catalog-detail-page .entry-hero-kid-badge:hover,
.clean-page.catalog-detail-page .entry-hero-kid-badge.kid-sign:hover { background: #083f78 !important; border-color: #083f78 !important; color: #fff !important; }

/* Server Status drawer: status pill and address use the body font, no bevel or letter-spacing from the cartoon rules */
.clean-page .server-drawer .server-drawer-summary-value,
.clean-page .server-drawer .server-drawer-status-pill {
    font-family: var(--body) !important; text-shadow: none !important; text-transform: none !important; letter-spacing: normal !important; font-style: normal;
}
.clean-page .server-drawer .server-drawer-status-pill { font-size: 13px !important; font-weight: 700 !important; height: auto; line-height: 1.4; }

/* Server Status drawer: Who's Online and Top Playtime rows in the clean wiki style */
.clean-page .server-drawer .server-drawer-player-name {
    font-family: var(--body) !important; font-size: 14px !important; font-weight: 700 !important; color: #1f2328 !important; text-shadow: none !important;
}
.clean-page .server-drawer .server-drawer-player-status { font-size: 13px !important; color: #59636e !important; }
.clean-page .server-drawer .server-drawer-player-dot {
    width: 8px !important; height: 8px !important; background: #1a7f37 !important; border: 0 !important; box-shadow: none !important;
}
.clean-page .server-drawer .server-drawer-player-rank,
.clean-page .server-drawer .server-drawer-player-rank-1,
.clean-page .server-drawer .server-drawer-player-rank-2,
.clean-page .server-drawer .server-drawer-player-rank-3 {
    width: 1.6rem !important; height: 1.6rem !important; font-family: var(--body) !important; font-size: 12px !important; font-weight: 700 !important;
    color: #59636e !important; background: #f6f8fa !important; border: 1px solid #d8dee4 !important; border-radius: 4px !important; box-shadow: none !important;
}
.clean-page .server-drawer .server-drawer-player-rank-1 { color: #1f2328 !important; border-color: #aeb7c0 !important; }
.clean-page .server-drawer .server-drawer-player-info { gap: 0; }

/* Server Status drawer: player rows are plain ruled lines, not cartoon cards */
.clean-page .server-drawer .server-drawer-player {
    background: #fff !important; border: 0 !important; border-bottom: 1px solid #eaeef2 !important; border-radius: 0 !important; box-shadow: none !important; padding: .5rem 0 !important;
}
.clean-page .server-drawer .server-drawer-player-avatar { width: 28px !important; height: 28px !important; }

/* ── Home: photo masthead, picture tiles, What's new thumbnails ── */
.hw-mast-photo {
    position: relative; margin: -2.5rem -2.75rem 0; padding: 3.5rem 2rem 2.25rem; border-bottom: 0;
    border-radius: 8px 8px 0 0; overflow: hidden; color: #fff;
    background: linear-gradient(180deg, rgba(10, 20, 35, .35) 0%, rgba(10, 20, 35, .7) 100%), var(--hw-mast-img) center 40% / cover no-repeat;
}
.hw-mast-photo .hw-title { color: #fff; font-size: 2.6rem; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.hw-mast-photo .hw-sub { max-width: 560px; margin: .5rem auto 1.5rem; color: rgba(255, 255, 255, .9); font-size: 1.05rem; }
.hw-mast-photo .hw-search-input { border-color: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); }
.hw-mast-photo .hw-search-btn { background: #2f8a3a; border-color: #2f8a3a; box-shadow: 0 4px 16px rgba(0, 0, 0, .2); }
.hw-mast-photo .hw-search-btn:hover { background: #246d2d; border-color: #246d2d; }
.hw-mast-photo .hw-stats { color: rgba(255, 255, 255, .8); }
.hw-mast-photo .hw-stats strong { color: #fff; }
.hw-mast-photo .hw-stats .hw-dot { color: rgba(255, 255, 255, .45); }

.hw-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
.hw .hw-tile {
    display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: 1rem .5rem .8rem;
    color: var(--hw-text); text-align: center; background: var(--hw-soft); border: 1px solid var(--hw-rule); border-radius: 6px;
    transition: border-color .15s, background-color .15s, transform .15s;
}
.hw .hw-tile:hover { color: var(--hw-text); text-decoration: none; background: #fff; border-color: var(--hw-accent); transform: translateY(-2px); }
.hw-tile-img { width: 64px; height: 64px; margin-bottom: .4rem; object-fit: contain; }
.hw-tile-name { font-weight: 800; }
.hw-tile-count { font-size: 13px; color: var(--hw-muted); }

.hw-news { margin: 0; padding: 0; list-style: none; }
.hw-news li + li { border-top: 1px solid var(--hw-rule); }
.hw-news-item {
    display: flex; align-items: center; gap: .9rem; width: 100%; padding: .65rem 0;
    font: inherit; color: var(--hw-text); text-align: left; background: none; border: 0; cursor: pointer;
}
.hw-news-thumb {
    flex: 0 0 auto; width: 88px; height: 56px; overflow: hidden; background: var(--hw-soft); border: 1px solid var(--hw-rule); border-radius: 4px;
}
.hw-news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hw-news-thumb.is-icon img { padding: 6px; object-fit: contain; image-rendering: pixelated; }
.hw-news-title { display: block; font-weight: 700; color: var(--hw-link); }
.hw-news-item:hover .hw-news-title { color: var(--hw-link-hover); text-decoration: underline; }
.hw-news-item:hover .hw-news-thumb { border-color: var(--hw-link); }

@media (max-width: 991.98px) { .hw-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
    .hw-mast-photo { margin: -1.5rem -1.1rem 0; padding: 2.5rem 1.1rem 1.75rem; border-radius: 6px 6px 0 0; }
    .hw-mast-photo .hw-title { font-size: 1.9rem; }
    .hw-tile-img { width: 48px; height: 48px; }
}
.hw-news .hw-desc { display: block; font-size: 13px; line-height: 1.45; color: var(--hw-muted); }

/* ══ Clean pages: plain light background instead of the cartoon sky and clouds ══ */
body.clean-page { background: #f6f8fa !important; background-image: none !important; }

/* ══ Home page (professional layout): no single sheet, a hero row then white panels ══ */
.hw.hp { max-width: 1120px; padding: 0; background: none; border: 0; border-radius: 0; }
.hp-hero {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 3rem;
    padding: 2.5rem 0 3rem;
}
.hp-eyebrow { margin: 0 0 .6rem; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #2f8a3a; }
.hw .hp-title { margin: 0; font-size: 2.6rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: #1f2328; }
.hp-lead { margin: .9rem 0 1.6rem; max-width: 520px; font-size: 1.1rem; line-height: 1.55; color: #59636e; }
.hp .hw-search { margin: 0; max-width: 520px; }
.hp .hw-search-input { height: 3rem; padding-left: 2.5rem; font-size: 16px; border-color: #c4ccd4; box-shadow: 0 1px 2px rgba(31, 35, 40, .06); }
.hp .hw-search-btn { height: 3rem; padding: 0 1.4rem; }
.hp-search-icon { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: #8b949e; pointer-events: none; }
.hp-stats { display: flex; gap: 2rem; margin: 1.75rem 0 0; padding: 0; }
.hp-stats div { display: flex; flex-direction: column-reverse; }
.hp-stats dt { font-size: 13px; font-weight: 600; color: #59636e; }
.hp-stats dd { margin: 0; font-size: 1.4rem; font-weight: 800; line-height: 1.2; color: #1f2328; }
.hp-hero-media { margin: 0; }
.hp-hero-media img {
    display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: 10px; box-shadow: 0 1px 2px rgba(31, 35, 40, .08), 0 12px 32px rgba(31, 35, 40, .14);
}

.hp-block { margin-bottom: 2.5rem; }
.hp-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.hw .hp-h2 { margin: 0; font-size: 1.3rem; font-weight: 800; color: #1f2328; }
.hp-block-links { display: flex; gap: 1.25rem; font-size: 14px; font-weight: 600; }
.hp-tag { font-size: 13px; font-weight: 600; color: #59636e; }

.hp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hw .hp-card {
    display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.1rem;
    color: #1f2328; background: #fff; border: 1px solid #d8dee4; border-radius: 8px;
    transition: border-color .15s, box-shadow .15s;
}
.hw .hp-card:hover { color: #1f2328; text-decoration: none; border-color: #aeb7c0; box-shadow: 0 6px 18px rgba(31, 35, 40, .08); }
.hp-card-icon { flex: 0 0 auto; width: 44px; height: 44px; object-fit: contain; }
.hp-card-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.hp-card-name { display: flex; align-items: baseline; gap: .5rem; font-weight: 800; }
.hp-card-count { font-size: 13px; font-weight: 600; color: #59636e; }
.hp-card-desc { font-size: 14px; line-height: 1.4; color: #59636e; }
.hp-card-arrow { flex: 0 0 auto; color: #aeb7c0; transition: color .15s, transform .15s; }
.hw .hp-card:hover .hp-card-arrow { color: #0b5cad; transform: translateX(2px); }

.hp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2.5rem; }
.hp-panel { padding: 1.4rem 1.5rem; background: #fff; border: 1px solid #d8dee4; border-radius: 8px; }
.hp-panel .hp-block-head { margin-bottom: .5rem; }
.hp-p { margin: 0 0 1rem; color: #59636e; }
.hp-features { display: grid; gap: .85rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.hp-features li { display: flex; gap: .8rem; align-items: flex-start; }
.hp-features .bi {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
    font-size: 15px; color: #2f8a3a; background: #e8f5ea; border-radius: 6px;
}
.hp-features span { font-size: 14px; line-height: 1.45; color: #59636e; }
.hp-features strong { display: block; font-size: 15px; color: #1f2328; }
.hp-server-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid #d8dee4; }
.hp-address { font-size: 14px; font-weight: 700; color: #1f2328; background: #f6f8fa; border: 1px solid #d8dee4; border-radius: 4px; padding: .3rem .55rem; }

.hp .hw-shots { gap: 1rem; }
.hp .hw-shot img { border-radius: 8px; }

@media (max-width: 991.98px) {
    .hp-hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 1.5rem; }
    .hp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-two { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .hw .hp-title { font-size: 1.9rem; }
    .hp-lead { font-size: 1rem; }
    .hp-stats { gap: 1.25rem; }
    .hp-stats dd { font-size: 1.15rem; }
    .hp-cards { grid-template-columns: 1fr; }
    .hp-panel { padding: 1.1rem; }
    .hp-block-head { flex-wrap: wrap; }
    .hp-server-foot { flex-wrap: wrap; }
}
.hw.hp { font-weight: 400; } .hp-card-desc, .hp .hw-desc { font-weight: 400; }

/* ══ Home page: modern landing layout (.sx) ══ */
body.home-main-page.clean-page {
    background: #fff !important;
    background-image:
        radial-gradient(900px 420px at 50% -80px, rgba(47, 138, 58, .13), transparent 70%),
        radial-gradient(700px 360px at 85% 0, rgba(11, 92, 173, .10), transparent 70%) !important;
    background-repeat: no-repeat !important;
}
.hw.sx { max-width: 1120px; padding: 0; font-weight: 400; background: none; border: 0; border-radius: 0; }

.sx-hero { padding: 4rem 0 3.5rem; text-align: center; }
.hw .sx-pill {
    display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem .3rem .3rem; margin-bottom: 1.5rem;
    font-size: 13px; font-weight: 600; color: #1f2328; background: #fff; border: 1px solid #d8dee4; border-radius: 999px;
    box-shadow: 0 1px 2px rgba(31, 35, 40, .05);
}
.hw .sx-pill:hover { color: #1f2328; text-decoration: none; border-color: #aeb7c0; }
.sx-pill-new { padding: .1rem .5rem; font-size: 12px; font-weight: 700; color: #fff; background: #2f8a3a; border-radius: 999px; }
.hw .sx-title { margin: 0 auto; max-width: 820px; font-size: 3.6rem; font-weight: 800; line-height: 1.08; letter-spacing: -.03em; color: #0d1117; }
.sx-grad { background: linear-gradient(90deg, #2f8a3a 0%, #0b5cad 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sx-lead { max-width: 600px; margin: 1.25rem auto 2rem; font-size: 1.15rem; line-height: 1.6; color: #59636e; }

.sx .sx-search { max-width: 620px; margin: 0 auto; }
.sx .hw-search-input {
    height: 3.5rem; padding: 0 3rem 0 3rem; font-size: 16px; border: 1px solid #d0d7de; border-radius: 12px;
    box-shadow: 0 1px 2px rgba(31, 35, 40, .04), 0 8px 24px rgba(31, 35, 40, .08);
}
.sx .hw-search-input:focus { border-color: #0b5cad; box-shadow: 0 0 0 4px rgba(11, 92, 173, .12), 0 8px 24px rgba(31, 35, 40, .08); }
.sx .hw-search-btn { height: 3.5rem; padding: 0 1.6rem; border-radius: 12px; background: #0d1117; border-color: #0d1117; }
.sx .hw-search-btn:hover { background: #2b3138; border-color: #2b3138; }
.sx-search-icon { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); font-size: 1.05rem; color: #8b949e; pointer-events: none; }
.sx-kbd {
    position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); padding: .1rem .45rem;
    font-family: var(--body); font-size: 12px; color: #59636e; background: #f6f8fa; border: 1px solid #d8dee4; border-radius: 4px; box-shadow: none;
}
.sx .hw-search-clear.show ~ .sx-kbd { display: none; }

.sx-stats { display: inline-flex; margin: 2.5rem auto 0; padding: 0; border: 1px solid #d8dee4; border-radius: 12px; background: rgba(255, 255, 255, .7); }
.sx-stats div { padding: .8rem 1.75rem; }
.sx-stats div + div { border-left: 1px solid #d8dee4; }
.sx-stats dd { margin: 0; font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: #0d1117; }
.sx-stats dt { font-size: 13px; font-weight: 600; color: #59636e; }

.sx-section { padding: 3rem 0; border-top: 1px solid #eaeef2; }
.sx-kicker { margin: 0 0 .4rem; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #2f8a3a; }
.hw .sx-h2 { margin: 0 0 1.75rem; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; color: #0d1117; }
.hw .sx-h3 { margin: 0 0 1rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; color: #0d1117; }

.sx-bento { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto; gap: 1rem; }
.hw .sx-tile {
    position: relative; display: flex; flex-direction: column; gap: .2rem; padding: 1.4rem;
    color: #1f2328; background: #f6f8fa; border: 1px solid #e1e6eb; border-radius: 16px;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.hw .sx-tile:hover { color: #1f2328; text-decoration: none; background: #fff; border-color: #c4ccd4; box-shadow: 0 12px 32px rgba(31, 35, 40, .1); transform: translateY(-2px); }
.sx-tile-icon { width: 48px; height: 48px; margin-bottom: .9rem; object-fit: contain; }
.sx-tile-name { display: flex; align-items: baseline; gap: .5rem; font-size: 1.1rem; font-weight: 800; }
.sx-tile-count { font-size: 13px; font-weight: 600; color: #59636e; }
.sx-tile-desc { font-size: 14px; line-height: 1.45; color: #59636e; }

.hw .sx-tile-hero {
    grid-row: span 2; justify-content: flex-end; min-height: 380px; padding: 0; overflow: hidden; border: 0;
    background: linear-gradient(180deg, rgba(13, 17, 23, 0) 30%, rgba(13, 17, 23, .85) 100%), var(--sx-img) center / cover no-repeat;
}
.hw .sx-tile-hero:hover { background: linear-gradient(180deg, rgba(13, 17, 23, 0) 30%, rgba(13, 17, 23, .85) 100%), var(--sx-img) center / cover no-repeat; }
.sx-tile-text { display: flex; flex-direction: column; gap: .3rem; padding: 1.75rem; color: #fff; }
.sx-tile-hero .sx-tile-name { font-size: 1.6rem; color: #fff; }
.sx-tile-hero .sx-tile-desc { max-width: 380px; font-size: 15px; color: rgba(255, 255, 255, .85); }
.sx-tile-hero .sx-tile-icon { width: 56px; height: 56px; margin-bottom: .5rem; }
.sx-tile-cta { margin-top: .6rem; font-size: 14px; font-weight: 700; color: #fff; }
.sx-tile-cta .bi { transition: transform .2s; display: inline-block; }
.sx-tile-hero:hover .sx-tile-cta .bi { transform: translateX(3px); }

.sx-more { margin: 1.25rem 0 0; font-size: 14px; color: #59636e; }
.sx-more span { margin: 0 .35rem; color: #c4ccd4; }
.hw .sx-more a { font-weight: 600; }

.sx-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sx-card { padding: 1.75rem; background: #fff; border: 1px solid #e1e6eb; border-radius: 16px; }
.sx-card .hw-news-thumb { border-radius: 8px; }
.sx-card-dark { color: #c9d1d9; background: #0d1117; border-color: #0d1117; }
.sx-card-dark .sx-kicker { color: #4ec95e; }
.hw .sx-card-dark .sx-h3 { color: #fff; }
.sx-p { margin: 0 0 1.25rem; line-height: 1.6; }
.sx-checks { display: grid; gap: .6rem; margin: 0 0 1.75rem; padding: 0; list-style: none; font-size: 15px; }
.sx-checks .bi { margin-right: .4rem; color: #4ec95e; font-size: 1.05rem; }
.sx-server-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.25rem; border-top: 1px solid #262c34; }
.sx-address { padding: .4rem .7rem; font-size: 14px; font-weight: 700; color: #fff; background: #161b22; border: 1px solid #30363d; border-radius: 8px; }
.sx-btn {
    display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.1rem;
    font: inherit; font-size: 14px; font-weight: 700; color: #0d1117; background: #fff; border: 0; border-radius: 8px; cursor: pointer;
}
.sx-btn:hover { background: #e6edf3; }

.sx .hw-shot img { border-radius: 12px; }

@media (max-width: 991.98px) {
    .hw .sx-title { font-size: 2.8rem; }
    .sx-bento { grid-template-columns: 1fr 1fr; }
    .hw .sx-tile-hero { grid-column: span 2; grid-row: auto; min-height: 300px; }
    .sx-split { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .sx-hero { padding: 2.5rem 0 2.5rem; }
    .hw .sx-title { font-size: 2.1rem; }
    .sx-lead { font-size: 1rem; }
    .sx .hw-search-form { flex-direction: column; }
    .sx-kbd { display: none; }
    .sx-stats { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .sx-stats div { padding: .7rem 1rem; }
    .sx-stats div:nth-child(3) { border-left: 0; }
    .sx-stats div:nth-child(n+3) { border-top: 1px solid #d8dee4; }
    .hw .sx-h2 { font-size: 1.6rem; }
    .sx-bento { grid-template-columns: 1fr; }
    .hw .sx-tile-hero { grid-column: auto; min-height: 280px; }
    .sx-card { padding: 1.25rem; }
}
.hw .sx-tile, .hw .sx-pill { font-weight: 400; }
.hw .sx-tile-hero .sx-tile-desc { font-weight: 400; }
.sx-card-dark .sx-p, .sx-card-dark .sx-checks li { color: #c9d1d9 !important; }
@media (max-width: 575.98px) { .sx-bento { grid-template-columns: 1fr 1fr; gap: .75rem; } .hw .sx-tile-hero { grid-column: span 2; } .hw .sx-tile { padding: 1rem; } .sx-tile-icon { width: 40px; height: 40px; margin-bottom: .6rem; } }

/* ══ Home page: cartoony-but-polished game-site skin (.cz on top of .sx layout) ══ */
body.home-main-page.clean-page {
    background: #eaf6ff !important;
    background-image:
        radial-gradient(70px 30px at 8% 90px, #fff 98%, transparent 100%),
        radial-gradient(100px 40px at 13% 100px, #fff 98%, transparent 100%),
        radial-gradient(80px 32px at 90% 140px, #fff 98%, transparent 100%),
        radial-gradient(120px 44px at 95% 150px, #fff 98%, transparent 100%),
        linear-gradient(180deg, #bfe6ff 0px, #eaf6ff 620px, #f7fbf2 100%) !important;
    background-repeat: no-repeat !important;
}
.cz { --cz-ink: #1d2a39; --cz-muted: #5b6b7c; --cz-line: #dbe3ea; --cz-green: #58b030; --cz-green-d: #3f8a1f; --cz-head: 'Fredoka', 'Nunito', system-ui, sans-serif; color: var(--cz-ink); }
.cz .sx-title, .cz .sx-h2, .cz .sx-h3, .cz .sx-tile-name, .cz .sx-stats dd, .cz .hw-news-title { font-family: var(--cz-head); letter-spacing: 0; }

/* Hero: text left, character art right */
.cz .cz-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 2rem; padding: 3rem 0 3.5rem; text-align: left; }
.cz .sx-pill { margin-bottom: 1.25rem; border: 2px solid var(--cz-line); box-shadow: 0 3px 0 var(--cz-line); font-weight: 700; }
.cz .sx-pill-new { background: var(--cz-green); }
.cz .sx-title { margin: 0; max-width: none; font-size: 3.3rem; font-weight: 700; line-height: 1.08; color: var(--cz-ink); }
.cz .sx-grad { background: none; color: var(--cz-green-d); -webkit-text-fill-color: currentColor; position: relative; white-space: nowrap; }
.cz .sx-grad::after { content: ''; position: absolute; left: 0; right: 0; bottom: .06em; height: .22em; z-index: -1; background: #c9f29b; border-radius: 6px; }
.cz .sx-lead { margin: 1rem 0 1.75rem; max-width: 540px; color: var(--cz-muted); font-weight: 600; }
.cz .sx-search { margin: 0; max-width: 560px; }
.cz .hw-search-input { border: 2px solid var(--cz-line); border-radius: 16px; box-shadow: 0 4px 0 var(--cz-line); font-weight: 600; }
.cz .hw-search-input:focus { border-color: #1cb0f6; box-shadow: 0 4px 0 #1899d6; }
.cz .hw-search-btn {
    border-radius: 16px; font-family: var(--cz-head); font-size: 17px; font-weight: 600; letter-spacing: .02em;
    background: var(--cz-green); border: 0; box-shadow: 0 4px 0 var(--cz-green-d); transition: transform .08s, box-shadow .08s;
}
.cz .hw-search-btn:hover { background: #61c235; }
.cz .hw-search-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--cz-green-d); }

.cz .sx-stats { display: flex; gap: .6rem; margin: 1.75rem 0 0; border: 0; background: none; }
.cz .sx-stats div { padding: .55rem 1rem; background: #fff; border: 2px solid var(--cz-line); border-radius: 14px; box-shadow: 0 3px 0 var(--cz-line); }
.cz .sx-stats div + div { border-left: 2px solid var(--cz-line); }
.cz .sx-stats div:nth-child(1) dd { color: #3f8a1f; }
.cz .sx-stats div:nth-child(2) dd { color: #1899d6; }
.cz .sx-stats div:nth-child(3) dd { color: #e0473b; }
.cz .sx-stats div:nth-child(4) dd { color: #c47f00; }
.cz .sx-stats dd { font-size: 1.35rem; font-weight: 600; }
.cz .sx-stats dt { font-weight: 700; color: var(--cz-muted); }

.cz-hero-art { position: relative; height: 380px; }
.cz-blob { position: absolute; inset: 8% 6% 4% 6%; background: radial-gradient(circle at 50% 45%, #fff 0%, #d6f1c4 55%, #b8e69c 100%); border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; box-shadow: 0 8px 0 #9fd67f; }
.cz-mascot { position: absolute; left: 50%; bottom: 6%; height: 300px; transform: translateX(-50%); image-rendering: pixelated; filter: drop-shadow(0 10px 8px rgba(29, 42, 57, .25)); }
.cz-float { position: absolute; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 6px 4px rgba(29, 42, 57, .2)); animation: cz-bob 4s ease-in-out infinite; }
.cz-float-1 { left: 4%; top: 18%; width: 76px; height: 76px; }
.cz-float-2 { right: 6%; top: 8%; animation-delay: -1.3s; }
.cz-float-3 { right: 2%; bottom: 22%; width: 54px; height: 54px; animation-delay: -2.6s; }
@keyframes cz-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .cz-float { animation: none; } }

/* Sections and tiles */
.cz .sx-section { border-top: 0; padding: 2.5rem 0; }
.cz .sx-kicker { color: var(--cz-green-d); font-weight: 800; }
.cz .sx-h2 { font-size: 2.1rem; font-weight: 700; color: var(--cz-ink); }
.cz .sx-h3 { font-weight: 700; color: var(--cz-ink); }
.hw.cz .sx-tile {
    background: #fff; border: 2px solid var(--cz-line); border-radius: 20px; box-shadow: 0 5px 0 var(--cz-line);
    transition: transform .12s, box-shadow .12s, border-color .12s;
}
.hw.cz .sx-tile:hover { transform: translateY(-3px); border-color: #c7d2dc; box-shadow: 0 8px 0 #c7d2dc; background: #fff; }
.hw.cz .sx-tile:active { transform: translateY(3px); box-shadow: 0 2px 0 #c7d2dc; }
.cz .sx-tile .sx-tile-icon { width: 64px; height: 64px; padding: 10px; border-radius: 18px; background: #e8f7dd; }
.cz .sx-bento > .sx-tile:nth-child(2) .sx-tile-icon { background: #ddf4ff; }
.cz .sx-bento > .sx-tile:nth-child(3) .sx-tile-icon { background: #ffe3e0; }
.cz .sx-bento > .sx-tile:nth-child(4) .sx-tile-icon { background: #fff4cc; }
.cz .sx-bento > .sx-tile:nth-child(5) .sx-tile-icon { background: #f1e6da; }
.cz .sx-tile-name { font-size: 1.25rem; font-weight: 600; }
.cz .sx-tile-desc { font-weight: 600; color: var(--cz-muted); }
.hw.cz .sx-tile-hero { border: 0; box-shadow: 0 5px 0 #2f6b18; }
.hw.cz .sx-tile-hero:hover { box-shadow: 0 8px 0 #2f6b18; }
.cz .sx-tile-hero .sx-tile-icon { padding: 0; background: none; }
.cz .sx-tile-hero .sx-tile-name { font-size: 1.9rem; }
.cz .sx-tile-cta {
    align-self: flex-start; margin-top: .8rem; padding: .5rem 1rem; font-family: var(--cz-head); font-weight: 600; letter-spacing: .02em;
    background: var(--cz-green); border-radius: 12px; box-shadow: 0 4px 0 var(--cz-green-d);
}

/* Cards */
.cz .sx-card { border: 2px solid var(--cz-line); border-radius: 22px; box-shadow: 0 5px 0 var(--cz-line); }
.cz .sx-card .hw-news-thumb { border: 2px solid var(--cz-line); border-radius: 12px; }
.cz .hw-news-title { font-size: 1.05rem; font-weight: 600; color: #1899d6; }
.cz .sx-card-dark { color: #fff; background: linear-gradient(160deg, #58b030 0%, #3f8a1f 100%); border-color: #357a19; box-shadow: 0 5px 0 #2f6b18; }
.cz .sx-card-dark .sx-kicker { color: #e6ffd4; }
.cz .sx-card-dark .sx-p, .cz .sx-card-dark .sx-checks li { color: #fff !important; font-weight: 600; }
.cz .sx-checks .bi { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; font-size: .9rem; color: #3f8a1f; background: #fff; border-radius: 50%; }
.cz .sx-server-foot { border-top: 2px solid rgba(255, 255, 255, .25); }
.cz .sx-address { color: #fff; background: rgba(0, 0, 0, .18); border: 2px solid rgba(255, 255, 255, .3); border-radius: 12px; }
.cz .sx-btn { font-family: var(--cz-head); font-size: 16px; font-weight: 600; color: #3f8a1f; border-radius: 12px; box-shadow: 0 4px 0 #2f6b18; }
.cz .sx-btn:active { transform: translateY(4px); box-shadow: none; }
.cz .hw-shot img { border: 2px solid var(--cz-line); border-radius: 16px; box-shadow: 0 4px 0 var(--cz-line); }
.cz .sx-more { font-weight: 600; }

@media (max-width: 991.98px) {
    .cz .cz-hero { grid-template-columns: 1fr; text-align: center; }
    .cz .sx-lead, .cz .sx-search { margin-left: auto; margin-right: auto; }
    .cz .sx-stats { justify-content: center; flex-wrap: wrap; }
    .cz-hero-art { height: 300px; max-width: 380px; width: 100%; margin: 0 auto; }
    .cz-mascot { height: 230px; }
}
@media (max-width: 575.98px) {
    .cz .sx-title { font-size: 2.3rem; }
    .cz .sx-grad { white-space: normal; }
    .cz .sx-stats { display: grid; grid-template-columns: 1fr 1fr; }
    .cz .sx-stats div:nth-child(n+3) { border-top: 2px solid var(--cz-line); }
    .cz .sx-stats div:nth-child(3) { border-left: 2px solid var(--cz-line); }
    .cz-hero-art { height: 250px; }
    .cz-mascot { height: 190px; }
    .cz-float { width: 48px; height: 48px; }
    .cz .sx-tile .sx-tile-icon { width: 52px; height: 52px; padding: 8px; }
}
.hw.cz .sx-tile-hero, .hw.cz .sx-tile-hero:hover { background: linear-gradient(180deg, rgba(13, 17, 23, 0) 30%, rgba(13, 17, 23, .85) 100%), var(--sx-img) center / cover no-repeat; }
.cz .sx-tile-hero .sx-tile-desc { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }

/* == Home page: dark product UI in the style of Modrinth (.mr on top of .sx layout) == */
body.home-main-page.clean-page { background: #16181c !important; background-image: radial-gradient(900px 420px at 50% -120px, rgba(27, 217, 106, .10), transparent 70%) !important; background-repeat: no-repeat !important; color: #b0bac5; }
body.home-main-page .site-sidebar { background: #1d1f23 !important; border-bottom: 1px solid #2c2e33 !important; box-shadow: none !important; }
body.home-main-page .site-sidebar a, body.home-main-page .site-sidebar button { color: #b0bac5 !important; }
body.home-main-page .site-sidebar a:hover, body.home-main-page .site-sidebar .active { color: #fff !important; }
body.home-main-page .mobile-topbar { background: #1d1f23 !important; border-bottom: 1px solid #2c2e33 !important; }
body.home-main-page .mobile-topbar, body.home-main-page .mobile-topbar * { color: #e6e8eb !important; }
body.home-main-page .site-footer { background: #1d1f23 !important; border-top: 1px solid #2c2e33 !important; }
body.home-main-page .site-footer-box, body.home-main-page .site-footer-legal { color: #8a939e !important; border-color: #2c2e33 !important; }
body.home-main-page .site-footer-brand { color: #e6e8eb !important; }

.mr { --mr-bg: #16181c; --mr-raised: #26292f; --mr-line: #33363d; --mr-text: #b0bac5; --mr-strong: #ecf0f3; --mr-green: #1bd96a; --mr-green-d: #17b85a;
    font-family: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--mr-text); }
.mr .cz-hero-art { display: none; }
.hw.mr .sx-title, .hw.mr .sx-h2, .hw.mr .sx-h3, .mr .sx-tile-name, .mr .sx-stats dd, .mr .hw-news-title { font-family: inherit; color: var(--mr-strong); }
.hw.mr .sx-title { font-size: 3.4rem; font-weight: 800; letter-spacing: -.035em; }
.mr .sx-grad { background: none; color: var(--mr-green); -webkit-text-fill-color: currentColor; }
.mr .sx-lead { color: var(--mr-text); font-weight: 500; }
.hw.mr .sx-pill { color: var(--mr-strong); background: var(--mr-raised); border: 1px solid var(--mr-line); box-shadow: none; font-weight: 600; }
.hw.mr .sx-pill:hover { color: #fff; border-color: #4a4e57; }
.mr .sx-pill-new { color: #0b1a10; background: var(--mr-green); }

.mr .hw-search-input { color: var(--mr-strong); background: var(--mr-raised); border: 1px solid var(--mr-line); border-radius: 12px; box-shadow: none; font-weight: 500; }
.mr .hw-search-input::placeholder { color: #7d8691; }
.mr .hw-search-input:focus { color: var(--mr-strong); background: #2b2e35; border-color: var(--mr-green); box-shadow: 0 0 0 3px rgba(27, 217, 106, .18); }
.mr .hw-search-btn { color: #0b1a10; font-weight: 700; background: var(--mr-green); border: 0; border-radius: 12px; box-shadow: none; }
.mr .hw-search-btn:hover { color: #0b1a10; background: #3ae283; }
.mr .sx-kbd { color: #8a939e; background: #1d1f23; border-color: var(--mr-line); }
.mr .sx-search-icon { color: #7d8691; }

.mr .sx-stats { background: var(--mr-raised); border: 1px solid var(--mr-line); border-radius: 14px; }
.mr .sx-stats div + div, .mr .sx-stats div:nth-child(n+3) { border-color: var(--mr-line); }
.mr .sx-stats dd { font-weight: 800; }
.mr .sx-stats dt { color: #8a939e; font-weight: 500; }

.mr .sx-section { border-top: 1px solid #24272c; }
.mr .sx-kicker { color: var(--mr-green); font-weight: 700; }
.hw.mr .sx-h2 { font-weight: 800; letter-spacing: -.025em; }

.hw.mr .sx-tile { color: var(--mr-text); background: var(--mr-raised); border: 1px solid var(--mr-line); border-radius: 16px; box-shadow: none; }
.hw.mr .sx-tile:hover { color: var(--mr-text); background: #2c2f36; border-color: #4a4e57; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); transform: translateY(-2px); }
.mr .sx-tile .sx-tile-icon { width: 52px; height: 52px; padding: 8px; background: #1d1f23; border: 1px solid var(--mr-line); border-radius: 12px; }
.mr .sx-tile-name { font-weight: 700; }
.mr .sx-tile-count { color: var(--mr-green); font-weight: 600; }
.mr .sx-tile-desc { color: #8a939e; font-weight: 500; }
.hw.mr .sx-tile-hero { border: 1px solid var(--mr-line); }
.hw.mr .sx-tile-hero, .hw.mr .sx-tile-hero:hover { background: linear-gradient(180deg, rgba(22, 24, 28, 0) 25%, rgba(22, 24, 28, .95) 100%), var(--sx-img) center / cover no-repeat; }
.mr .sx-tile-hero .sx-tile-icon { padding: 0; background: none; border: 0; }
.mr .sx-tile-hero .sx-tile-desc { color: #c8d0d8; }
.mr .sx-tile-cta { align-self: flex-start; margin-top: .9rem; padding: .5rem 1rem; color: #0b1a10; background: var(--mr-green); border-radius: 10px; font-weight: 700; }
.mr .sx-more { color: #8a939e; }
.mr .sx-more span { color: #4a4e57; }
.hw.mr a { color: var(--mr-green); }
.hw.mr a.sx-tile, .hw.mr a.sx-pill { color: inherit; }

.mr .sx-card { background: var(--mr-raised); border: 1px solid var(--mr-line); border-radius: 16px; box-shadow: none; }
.mr .hw-news-item { color: var(--mr-text); background: none; }
.mr .hw-news li + li, .mr .hw-news-item { border-color: var(--mr-line) !important; }
.mr .hw-news-item:hover .hw-news-title { color: var(--mr-green); }
.mr .hw-news-title { font-weight: 700; }
.mr .hw-news .hw-desc { color: #8a939e; }
.mr .sx-card .hw-news-thumb { background: #1d1f23; border: 1px solid var(--mr-line); border-radius: 10px; }
.mr .sx-card-dark { background: linear-gradient(160deg, rgba(27, 217, 106, .14), rgba(27, 217, 106, 0) 60%), var(--mr-raised); border-color: rgba(27, 217, 106, .35); }
.mr .sx-card-dark .sx-p, .mr .sx-checks li { color: var(--mr-text) !important; font-weight: 500; }
.mr .sx-checks .bi { color: var(--mr-green); }
.mr .sx-server-foot { border-top: 1px solid var(--mr-line); }
.mr .sx-address { color: var(--mr-strong); background: #1d1f23; border: 1px solid var(--mr-line); }
.mr .sx-btn { color: #0b1a10; background: var(--mr-green); border-radius: 10px; font-weight: 700; }
.mr .sx-btn:hover { background: #3ae283; }
.mr .hw-shot img { border: 1px solid var(--mr-line); border-radius: 12px; }
.mr .hw-shot figcaption { color: #8a939e; }
.mr .home-hero-suggest { background: var(--mr-raised); border-color: var(--mr-line); }
body.home-main-page .mobile-topbar button { background: #26292f !important; border-color: #33363d !important; }
@media (max-width: 575.98px) { .hw.mr .sx-title { font-size: 2.15rem; letter-spacing: -.03em; } }

/* == Home page: simple layout (.sm) - hero, six equal cards, server bar == */
.hw.sm { max-width: 880px; }
.sm-hero { padding: 5rem 0 3rem; text-align: center; }
.hw.sm .sx-title { font-size: 3rem; }
.sm .sx-lead { margin: .9rem auto 2rem; }
.sm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.hw.sm .sm-card {
    display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem;
    color: #ecf0f3; background: #26292f; border: 1px solid #33363d; border-radius: 12px; text-decoration: none;
    transition: background .15s, border-color .15s;
}
.hw.sm .sm-card:hover { color: #fff; background: #2c2f36; border-color: #4a4e57; }
.sm-card-icon { width: 36px; height: 36px; object-fit: contain; }
.sm-card-name { font-size: 16px; font-weight: 700; }
.sm-card-count { font-size: 13px; font-weight: 600; color: #8a939e; }
.sm-card-arrow { margin-left: auto; color: #5c636d; transition: color .15s, transform .15s; }
.hw.sm .sm-card:hover .sm-card-arrow { color: #1bd96a; transform: translateX(2px); }
.sm-server {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 2.5rem 0 4rem; padding: 1rem 1.25rem;
    background: #26292f; border: 1px solid #33363d; border-radius: 12px;
}
.sm-server-text { flex: 1 1 auto; font-size: 15px; color: #8a939e; }
.sm-server-text strong { color: #ecf0f3; }
@media (max-width: 767.98px) { .sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
    .sm-hero { padding: 3rem 0 2rem; }
    .hw.sm .sx-title { font-size: 2.1rem; }
    .sm-card-arrow { display: none; }
    .sm-server-text { flex-basis: 100%; }
}
body.home-main-page .site-footer-links a { color: #8a939e !important; } body.home-main-page .site-footer-links a:hover { color: #fff !important; }

/* == Footer sits at the bottom of the window on short pages == */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > .site-content { flex: 1 0 auto; display: flex; flex-direction: column; }
body > .site-content > main { flex: 1 0 auto; display: flex; flex-direction: column; }
body > .site-content > main > .site-footer { margin-top: auto; }
body > .site-content > main > :nth-last-child(2) { margin-bottom: 2rem; }


.hw.sm .sm-hero { padding-top: 4rem; }

/* == Compact footer: one row on desktop, legal line tucked beside the links == */
.clean-page .site-footer { padding: .9rem 0 .8rem; font-size: 13px; }
.clean-page .site-footer .site-footer-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem 1.5rem; }
.clean-page .site-footer-brand { font-size: 14px; }
.clean-page .site-footer-links { gap: 1rem; }
.clean-page .site-footer-links a { font-size: 13px; }
.clean-page .site-footer-legal { order: 3; flex-basis: 100%; margin: .35rem 0 0; padding: .45rem 0 0; font-size: 12px; }
.clean-page .site-footer .site-footer-box > .site-footer-brand + .site-footer-links { margin-left: auto; }
@media (max-width: 767.98px) {
    .clean-page .site-footer { padding-bottom: 4.5rem; }
    .clean-page .site-footer .site-footer-box > .site-footer-brand + .site-footer-links { margin-left: 0; }
}

/* == Server Status drawer: card layout (light everywhere, dark on the home page) == */
#serverStatusDrawer { --sd-bg: #fff; --sd-card: #f6f8fa; --sd-line: #e1e6eb; --sd-text: #1f2328; --sd-muted: #656d76; --sd-green: #1a7f37; --sd-hover: #f0f3f6;
    width: 400px; max-width: 100vw; background: var(--sd-bg) !important; border-left: 1px solid var(--sd-line) !important; box-shadow: -12px 0 40px rgba(0, 0, 0, .18) !important; font-family: var(--body) !important; color: var(--sd-text); }
#serverStatusDrawer .offcanvas-header { padding: 1rem 1.25rem !important; border-bottom: 1px solid var(--sd-line) !important; background: var(--sd-bg) !important; }
#serverStatusDrawer .offcanvas-title { font-family: var(--body) !important; font-size: 17px !important; font-weight: 800 !important; color: var(--sd-text) !important; text-shadow: none !important; }
#serverStatusDrawer .server-drawer-close { width: 32px !important; height: 32px !important; color: var(--sd-muted) !important; background: transparent !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; }
#serverStatusDrawer .server-drawer-close:hover { color: var(--sd-text) !important; background: var(--sd-hover) !important; }
#serverStatusDrawer .offcanvas-body { padding: 1.25rem !important; background: var(--sd-bg) !important; }

#serverStatusDrawer .server-drawer-summary { padding: 0 !important; margin: 0 0 .75rem !important; background: var(--sd-card) !important; border: 1px solid var(--sd-line) !important; border-radius: 12px !important; box-shadow: none !important; overflow: hidden; }
#serverStatusDrawer .server-drawer-summary-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 1rem; padding: .8rem 1rem !important; margin: 0 !important; border: 0 !important; background: none !important; }
#serverStatusDrawer .server-drawer-summary-row + .server-drawer-summary-row { border-top: 1px solid var(--sd-line) !important; }
#serverStatusDrawer .server-drawer-summary-label { font-family: var(--body) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--sd-muted) !important; }
#serverStatusDrawer .server-drawer-summary-value { font-size: 14px !important; font-weight: 700 !important; color: var(--sd-text) !important; }
#serverStatusDrawer .server-drawer-status-pill { display: inline-flex !important; align-items: center; gap: .4rem; padding: .2rem .65rem !important; font-size: 13px !important; font-weight: 700 !important; color: var(--sd-green) !important; background: rgba(26, 127, 55, .1) !important; border: 0 !important; border-radius: 999px !important; }
#serverStatusDrawer .server-drawer-status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

#serverStatusDrawer .server-drawer-address-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: .5rem !important; margin: 0 0 1.5rem !important; }
#serverStatusDrawer .server-drawer-action-btn { height: 38px !important; padding: 0 1rem !important; font-family: var(--body) !important; font-size: 14px !important; font-weight: 700 !important; border-radius: 8px !important; box-shadow: none !important; transform: none !important; text-shadow: none !important; }
#serverStatusDrawer .server-drawer-action-btn-copy { color: #fff !important; background: var(--sd-green) !important; border: 1px solid var(--sd-green) !important; }
#serverStatusDrawer .server-drawer-action-btn-copy:hover { filter: brightness(1.08); }
#serverStatusDrawer .server-drawer-action-btn-report { color: var(--sd-muted) !important; background: transparent !important; border: 1px solid var(--sd-line) !important; }
#serverStatusDrawer .server-drawer-action-btn-report:hover { color: #cf222e !important; border-color: #cf222e !important; }

#serverStatusDrawer .server-drawer-heading { margin: 0 0 .5rem !important; padding: 0 !important; font-family: var(--body) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--sd-muted) !important; border: 0 !important; text-shadow: none !important; }
#serverStatusDrawer .server-drawer-players { margin: 0 0 1.5rem !important; padding: 0 !important; background: var(--sd-bg) !important; border: 1px solid var(--sd-line) !important; border-radius: 12px !important; overflow: hidden; }
#serverStatusDrawer .server-drawer-players:empty { display: none; }
#serverStatusDrawer .server-drawer-player { display: flex !important; align-items: center !important; gap: .7rem !important; margin: 0 !important; padding: .6rem .85rem !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
#serverStatusDrawer .server-drawer-player + .server-drawer-player { border-top: 1px solid var(--sd-line) !important; }
#serverStatusDrawer .server-drawer-player:hover { background: var(--sd-hover) !important; }
#serverStatusDrawer .server-drawer-player-avatar { width: 30px !important; height: 30px !important; border-radius: 6px !important; border: 0 !important; image-rendering: pixelated; }
#serverStatusDrawer .server-drawer-player-info { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
#serverStatusDrawer .server-drawer-player-name { display: block; font-size: 14px !important; font-weight: 700 !important; color: var(--sd-text) !important; }
#serverStatusDrawer .server-drawer-player-status { display: block; font-size: 12px !important; font-weight: 500 !important; color: var(--sd-muted) !important; }
#serverStatusDrawer .server-drawer-player-dot { width: 8px !important; height: 8px !important; background: #2da44e !important; border: 0 !important; box-shadow: 0 0 0 3px rgba(45, 164, 78, .18) !important; }
#serverStatusDrawer .server-drawer-player-rank { flex: 0 0 auto; display: inline-flex !important; align-items: center; justify-content: center; width: 24px !important; height: 24px !important; font-size: 12px !important; font-weight: 800 !important; color: var(--sd-muted) !important; background: transparent !important; border: 0 !important; border-radius: 50% !important; box-shadow: none !important; }
#serverStatusDrawer .server-drawer-player-rank-1 { color: #6b4e00 !important; background: #f5c542 !important; }
#serverStatusDrawer .server-drawer-player-rank-2 { color: #3d444d !important; background: #d0d7de !important; }
#serverStatusDrawer .server-drawer-player-rank-3 { color: #5c2f0e !important; background: #e3a36f !important; }
#serverStatusDrawer .server-drawer-more { font-size: 13px !important; color: var(--sd-muted) !important; }
#serverStatusDrawer .server-drawer-view-all { display: flex !important; align-items: center; justify-content: center; height: 38px; font-size: 14px !important; font-weight: 700 !important; color: var(--sd-text) !important; background: var(--sd-card) !important; border: 1px solid var(--sd-line) !important; border-radius: 8px !important; text-decoration: none !important; box-shadow: none !important; }
#serverStatusDrawer .server-drawer-view-all:hover { background: var(--sd-hover) !important; }

body.home-main-page #serverStatusDrawer { --sd-bg: #1d1f23; --sd-card: #26292f; --sd-line: #33363d; --sd-text: #ecf0f3; --sd-muted: #8a939e; --sd-green: #1bd96a; --sd-hover: #2c2f36; box-shadow: -12px 0 40px rgba(0, 0, 0, .5) !important; }
body.home-main-page #serverStatusDrawer .server-drawer-action-btn-copy { color: #0b1a10 !important; }
body.home-main-page #serverStatusDrawer .server-drawer-status-pill { background: rgba(27, 217, 106, .12) !important; }

/* == Navbar on the dark home page: match the page (same sizes as other pages) == */
body.home-main-page .site-sidebar .sidebar-status { color: #b0bac5 !important; background: #26292f !important; border: 1px solid #33363d !important; }
body.home-main-page .site-sidebar .sidebar-status:hover { color: #fff !important; border-color: #4a4e57 !important; }
body.home-main-page .site-sidebar .sidebar-link:hover, body.home-main-page .site-sidebar .sidebar-link.show { color: #fff !important; background: #26292f !important; }
body.home-main-page .site-sidebar .sidebar-link.active { color: #fff !important; box-shadow: inset 0 -2px 0 #1bd96a !important; }
body.home-main-page .sidebar-dropdown-menu { background: #1d1f23 !important; border-color: #33363d !important; box-shadow: 0 12px 32px rgba(0, 0, 0, .45) !important; }
body.home-main-page .sidebar-dropdown-item { color: #b0bac5 !important; }
body.home-main-page .sidebar-dropdown-item:hover, body.home-main-page .sidebar-dropdown-item.active { color: #fff !important; background: #26292f !important; }
body.home-main-page .sidebar-link-disabled, body.home-main-page .sidebar-link-disabled:hover { color: #5c636d !important; background: transparent !important; }
body.home-main-page .sidebar-link-disabled::after { color: #8a939e !important; background: #26292f !important; border-color: #33363d !important; }
@media (max-width: 991.98px) {
    body.home-main-page .site-sidebar { background: #1d1f23 !important; border-right: 1px solid #2c2e33 !important; }
    body.home-main-page .sidebar-spacer { border-top-color: #2c2e33 !important; }
}

/* == Server Status drawer: plain status text (no pill) and a red Report button == */
#serverStatusDrawer .server-drawer-status-pill,
#serverStatusDrawer .server-drawer-status-pill.is-online,
body.home-main-page #serverStatusDrawer .server-drawer-status-pill,
body.home-main-page #serverStatusDrawer .server-drawer-status-pill.is-online { display: inline-flex !important; align-items: center; gap: .45rem; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: 14px !important; font-weight: 700 !important; color: #1a7f37 !important; }
body.home-main-page #serverStatusDrawer .server-drawer-status-pill.is-online { color: #1bd96a !important; }
#serverStatusDrawer .server-drawer-status-pill::before { width: 8px !important; height: 8px !important; box-shadow: none !important; }
#serverStatusDrawer .server-drawer-status-pill.is-offline { color: #cf222e !important; }
#serverStatusDrawer .server-drawer-status-pill.is-offline::before { background: #cf222e; }
#serverStatusDrawer .server-drawer-action-btn-report,
body.home-main-page #serverStatusDrawer .server-drawer-action-btn-report { color: #cf222e !important; background: #fff0ef !important; border: 1px solid #cf222e !important; }
#serverStatusDrawer .server-drawer-action-btn-report:hover,
body.home-main-page #serverStatusDrawer .server-drawer-action-btn-report:hover { color: #fff !important; background: #cf222e !important; border-color: #cf222e !important; }
body.home-main-page #serverStatusDrawer .server-drawer-action-btn-report { background: rgba(207, 34, 46, .14) !important; }

/* == Report button: solid red == */
#serverStatusDrawer .server-drawer-action-btn-report,
#serverStatusDrawer .server-drawer-action-btn-report:hover,
body.home-main-page #serverStatusDrawer .server-drawer-action-btn-report,
body.home-main-page #serverStatusDrawer .server-drawer-action-btn-report:hover { color: #fff !important; background: #cf222e !important; border: 1px solid #cf222e !important; }
#serverStatusDrawer .server-drawer-action-btn-report:hover,
body.home-main-page #serverStatusDrawer .server-drawer-action-btn-report:hover { background: #a40e26 !important; border-color: #a40e26 !important; }

/* == Search suggestions dropdown on the dark home page == */
.hw.mr .home-hero-suggest { background: #26292f !important; border: 1px solid #33363d !important; box-shadow: 0 12px 32px rgba(0, 0, 0, .45) !important; }
.hw.mr .home-hero-suggest-item { color: #ecf0f3 !important; border-bottom: 1px solid #2c2f36 !important; }
.hw.mr .home-hero-suggest-item:last-child { border-bottom: 0 !important; }
.hw.mr .home-hero-suggest-item:hover, .hw.mr .home-hero-suggest-item.is-active { background: #2c2f36 !important; color: #fff !important; }
.hw.mr .home-hero-suggest-type, .hw.mr .home-hero-suggest-empty { color: #8a939e !important; }

/* == Hide the scrollbar on the search suggestions dropdown (still scrollable) == */
.hw .home-hero-suggest { scrollbar-width: none; -ms-overflow-style: none; }
.hw .home-hero-suggest::-webkit-scrollbar { display: none; }


/* == Login / register drawer: match the Server Status drawer (light everywhere, dark on the home page) == */
.auth-drawer { --ad-bg: #fff; --ad-card: #f6f8fa; --ad-line: #e1e6eb; --ad-text: #1f2328; --ad-muted: #656d76; --ad-green: #1a7f37; --ad-blue: #0b5cad; --ad-hover: #f0f3f6; }
body.home-main-page .auth-drawer { --ad-bg: #1d1f23; --ad-card: #26292f; --ad-line: #33363d; --ad-text: #ecf0f3; --ad-muted: #8a939e; --ad-blue: #1bd96a; --ad-hover: #2c2f36; }
.clean-page .auth-drawer { background: var(--ad-bg) !important; border-left: 1px solid var(--ad-line) !important; box-shadow: -12px 0 40px rgba(0, 0, 0, .18) !important; color: var(--ad-text); }
body.home-main-page .clean-page .auth-drawer, body.home-main-page .auth-drawer { box-shadow: -12px 0 40px rgba(0, 0, 0, .5) !important; }
.clean-page .auth-drawer .offcanvas-header { background: var(--ad-bg) !important; border-bottom: 1px solid var(--ad-line) !important; padding: 1rem 1.25rem !important; }
.clean-page .auth-drawer .offcanvas-title { color: var(--ad-text) !important; font-size: 17px !important; font-weight: 800 !important; }
.clean-page .auth-drawer .auth-drawer-close { background: transparent !important; border: 0 !important; color: var(--ad-muted) !important; border-radius: 8px !important; width: 32px !important; height: 32px !important; }
.clean-page .auth-drawer .auth-drawer-close:hover { background: var(--ad-hover) !important; color: var(--ad-text) !important; }
.clean-page .auth-drawer .offcanvas-body { background: var(--ad-bg) !important; padding: 1.25rem !important; }
.clean-page .auth-drawer .form-label, .clean-page .auth-drawer .form-check-label { color: var(--ad-text) !important; }
.clean-page .auth-drawer .form-control { background: var(--ad-card) !important; color: var(--ad-text) !important; border: 1px solid var(--ad-line) !important; border-radius: 8px !important; height: 40px; }
.clean-page .auth-drawer .form-control:focus { border-color: var(--ad-blue) !important; box-shadow: 0 0 0 3px rgba(27, 217, 106, .15) !important; }
.clean-page .auth-drawer a:not(.btn) { color: var(--ad-blue) !important; }
.clean-page .auth-drawer .btn-wiki { border-radius: 8px !important; height: 40px; font-weight: 700; }
.clean-page .auth-drawer .auth-members-card { background: var(--ad-card) !important; border: 1px solid var(--ad-line) !important; border-radius: 12px !important; }
.clean-page .auth-drawer .auth-members-title { color: var(--ad-text) !important; }
.clean-page .auth-drawer .auth-members-card img, .clean-page .auth-drawer .auth-members-card a { border-color: var(--ad-line) !important; }
body.home-main-page .clean-page .auth-drawer .btn-wiki, body.home-main-page .auth-drawer .btn-wiki { background: #1bd96a !important; border-color: #1bd96a !important; color: #0b1a10 !important; }
body.home-main-page .auth-drawer .btn-wiki:hover { background: #3ae283 !important; border-color: #3ae283 !important; }

/* == Home server bar: edition text is readable and explained == */
body.home-main-page .sm-server-text { color: #c3cbd4; line-height: 1.5; }

/* == Login / register drawer: paragraphs such as "Already have an account?" stay readable == */
.clean-page .auth-drawer p { color: var(--ad-text) !important; }
.clean-page .auth-drawer p a { color: var(--ad-blue) !important; }

/* == Home: tighter spacing so the taller server card still fits without scrolling == */
body.home-main-page .hw.sm .sm-hero { padding-top: 3.5rem; padding-bottom: 2.5rem; }
body.home-main-page .hw.sm .sm-server { margin: 1.75rem 0 2rem; }

/* == Home: optically centre the block between the navbar and footer, still no scrollbar == */
body.home-main-page .hw.sm .sm-hero { padding-top: 5rem; }
body.home-main-page .hw.sm .sm-server { margin-bottom: .5rem; }

/* == Register drawer: form help text (edition note) is readable == */
.clean-page .auth-drawer .form-text { color: var(--ad-muted) !important; font-size: 13px; }
body.home-main-page .clean-page .auth-drawer .form-text { color: #b0bac5 !important; }

/* == Footer pinning made <main> a flex column, which shrank .hw to its content; fill up to max-width again == */
body > .site-content > main > .hw { width: 100%; }

/* == Blocks list and category pages: same dark style as the home page == */
.catalog-page .hw.mr { --hw-text: #ecf0f3; --hw-muted: #8a939e; --hw-rule: #33363d; --hw-soft: #2c2f36; --hw-link: #1bd96a; --hw-link-hover: #3ae283;
    background: transparent; border: 0; border-radius: 0; padding: 2.5rem 0; }
.catalog-page .hw.mr .hw-title { color: #ecf0f3; font-weight: 800; letter-spacing: -.02em; }
.catalog-page .hw.mr .hw-sub { color: #b0bac5; }
.catalog-page .hw.mr .hw-crumbs, .catalog-page .hw.mr .hw-crumbs a { color: #8a939e; }
.catalog-page .hw.mr .hw-crumbs a:hover { color: #1bd96a; }
.catalog-page .hw.mr .hw-select { color: #ecf0f3; background: #26292f; border: 1px solid #33363d; border-radius: 12px; }
.catalog-page .hw.mr .hw-select:hover, .catalog-page .hw.mr .hw-select.show { border-color: #4a4e57; }
.catalog-page .hw.mr a.hw-entry { color: #ecf0f3; background: #26292f; border: 1px solid #33363d; border-radius: 12px; transition: background .15s, border-color .15s; }
.catalog-page .hw.mr a.hw-entry:hover { color: #fff; background: #2c2f36; border-color: #4a4e57; box-shadow: none; }
.catalog-page .hw.mr .hw-entry-icon { background: transparent; }
.catalog-page .hw.mr .hw-pager .page-link { color: #ecf0f3; background: #26292f; border-color: #33363d; }
.catalog-page .hw.mr .hw-pager .page-link:hover { background: #2c2f36; color: #fff; }
.catalog-page .hw.mr .hw-pager .page-item.active .page-link { color: #0b1a10; background: #1bd96a; border-color: #1bd96a; }
.catalog-page .hw.mr .hw-pager .page-item.disabled .page-link { color: #5c636d; background: #1d1f23; }
.catalog-page .hw.mr .hw-pager .small.text-muted { color: #8a939e !important; }
.catalog-page .hw.mr .hw-empty, .catalog-page .hw.mr .hw-empty .bi { color: #8a939e; }
.catalog-page .hw.mr .hw-title, .catalog-page .hw.mr .hw-crumbs, .catalog-page .hw.mr .hw-crumbs a, .catalog-page .hw.mr .hw-entry-name, .catalog-page .hw.mr .hw-select, .catalog-page .hw.mr .hw-sub { font-family: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif !important; }
.catalog-page .hw.mr .hw-crumbs a { font-weight: 600; }
.catalog-page .hw.mr .hw-entry-name { font-weight: 600; }

/* == Blocks category pages: same 880px content width as the home page == */
.catalog-page .hw.mr { max-width: 880px; }

/* == Blocks pages: hide the page's right-hand scrollbar (scrolling with wheel/touch still works) == */
html:has(body.catalog-page) { scrollbar-width: none; -ms-overflow-style: none; }
html:has(body.catalog-page)::-webkit-scrollbar { display: none; }

/* == Blocks pages: icons sit on a lighter tile in the dark theme == */
.catalog-page .hw.mr .hw-entry-icon { background: #2c2f36; border-radius: 8px; width: 60px; height: 60px; }

/* == My Account drawer: same card layout as the Server Status drawer (light everywhere, dark on dark pages) == */
#accountDrawer { --ac-bg: #fff; --ac-card: #f6f8fa; --ac-line: #e1e6eb; --ac-text: #1f2328; --ac-muted: #656d76; --ac-green: #1a7f37; --ac-green-text: #fff; --ac-hover: #f0f3f6; --ac-red: #cf222e;
    width: 400px; max-width: 100vw; background: var(--ac-bg) !important; border-left: 1px solid var(--ac-line) !important; box-shadow: -12px 0 40px rgba(0, 0, 0, .18) !important; font-family: var(--body) !important; color: var(--ac-text); }
body.home-main-page #accountDrawer { --ac-bg: #1d1f23; --ac-card: #26292f; --ac-line: #33363d; --ac-text: #ecf0f3; --ac-muted: #8a939e; --ac-green: #1bd96a; --ac-green-text: #0b1a10; --ac-hover: #2c2f36; --ac-red: #ff6b6b; box-shadow: -12px 0 40px rgba(0, 0, 0, .5) !important; }
#accountDrawer .offcanvas-header { padding: 1rem 1.25rem !important; background: var(--ac-bg) !important; border-bottom: 1px solid var(--ac-line) !important; }
#accountDrawer .offcanvas-title { font-family: var(--body) !important; font-size: 17px !important; font-weight: 800 !important; color: var(--ac-text) !important; text-shadow: none !important; }
#accountDrawer .server-drawer-close { width: 32px !important; height: 32px !important; color: var(--ac-muted) !important; background: transparent !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; }
#accountDrawer .server-drawer-close:hover { color: var(--ac-text) !important; background: var(--ac-hover) !important; }
#accountDrawer .offcanvas-body { padding: 1.25rem !important; background: var(--ac-bg) !important; }

/* Profile card */
#accountDrawer .account-drawer-header { display: flex; align-items: center; gap: .85rem; margin: 0 0 1rem; padding: .9rem 1rem; background: var(--ac-card); border: 1px solid var(--ac-line); border-radius: 12px; }
#accountDrawer .account-drawer-photo-frame { display: flex; align-items: center; justify-content: center; width: 48px !important; height: 48px !important; padding: 6px; background: var(--ac-hover) !important; border: 0 !important; border-radius: 10px !important; box-shadow: none !important; }
#accountDrawer .account-drawer-photo-frame img { width: 100% !important; height: 100% !important; object-fit: contain; image-rendering: pixelated; }
#accountDrawer .account-menu-header-text { min-width: 0; line-height: 1.3; }
#accountDrawer .account-menu-name { font-size: 16px; font-weight: 800; color: var(--ac-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#accountDrawer .account-menu-badge { display: inline-block; margin-top: .25rem; padding: .1rem .5rem; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; }
#accountDrawer .account-menu-badge-expert { color: #fff; background: #f0791a; }
#accountDrawer .account-menu-badge-admin { color: #fff; background: #cf222e; }
#accountDrawer .account-menu-badge-member { color: var(--ac-green-text); background: var(--ac-green); }

/* Link list: one grouped card, rows like the player list */
#accountDrawer .account-drawer-link-panel { display: flex; flex-direction: column; background: var(--ac-bg); border: 1px solid var(--ac-line); border-radius: 12px; overflow: hidden; }
#accountDrawer .account-drawer-link-panel > form { margin: 0; }
#accountDrawer .account-drawer-link { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 46px; margin: 0; padding: .65rem 1rem;
    font-family: var(--body); font-size: 14px; font-weight: 700; text-align: left; color: var(--ac-text) !important; text-decoration: none;
    background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; }
#accountDrawer .account-drawer-link-panel > * + * > .account-drawer-link,
#accountDrawer .account-drawer-link-panel > * + .account-drawer-link { border-top: 1px solid var(--ac-line); }
#accountDrawer .account-drawer-link:not(:disabled):hover { background: var(--ac-hover); }
#accountDrawer .account-drawer-link::after { content: "\203A"; margin-left: auto; font-size: 20px; line-height: 1; color: var(--ac-muted); }
#accountDrawer .account-drawer-icon { display: none; }

/* Get link code: the one primary action */
#accountDrawer .account-drawer-link-sitemap { color: var(--ac-green-text) !important; background: var(--ac-green); }
#accountDrawer .account-drawer-link-sitemap:not(:disabled):hover { background: var(--ac-green); filter: brightness(1.08); }
#accountDrawer .account-drawer-link-sitemap::after { color: var(--ac-green-text); }
#accountDrawer .account-drawer-hint-badge { display: none; }
#accountDrawer.account-drawer-hinting .account-drawer-hint-badge { display: inline-block; margin-left: auto; padding: .1rem .5rem; font-size: 11px; font-weight: 800; color: var(--ac-green); background: var(--ac-green-text); border-radius: 999px; }
#accountDrawer.account-drawer-hinting .account-drawer-link-sitemap::after { margin-left: .5rem; }

/* Not built yet */
#accountDrawer .account-drawer-soon-btn { color: var(--ac-muted) !important; cursor: default; opacity: 1; }
#accountDrawer .account-drawer-soon-btn::after { content: "Soon"; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: .1rem .5rem; color: var(--ac-muted); background: var(--ac-card); border: 1px solid var(--ac-line); border-radius: 999px; }

/* Logout */
#accountDrawer .account-drawer-link-danger { color: var(--ac-red) !important; }
#accountDrawer .account-drawer-link-danger::after { content: none; }

/* Link code step */
#accountDrawer .account-drawer-arrow-step { display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem 0; }
#accountDrawer .account-drawer-arrow { color: var(--ac-green); }
#accountDrawer .account-drawer-link-text { margin: 0; padding: 0 1rem; font-size: 13px; color: var(--ac-muted); }
#accountDrawer .account-drawer-arrow-step .account-drawer-link-text { padding: 0; color: var(--ac-text); font-weight: 700; }
#accountDrawer .account-drawer-code-row { display: flex; gap: .5rem; padding: .6rem 1rem; }
#accountDrawer .account-drawer-link-code { flex: 1 1 auto; padding: .5rem .75rem; font-family: ui-monospace, Consolas, monospace; font-size: 14px; font-weight: 700; color: var(--ac-text); background: var(--ac-card); border: 1px solid var(--ac-line); border-radius: 8px; }
#accountDrawer .account-drawer-copy { padding: 0 1rem; font-size: 14px; font-weight: 700; color: var(--ac-green-text); background: var(--ac-green); border: 0; border-radius: 8px; }
#accountDrawer .account-drawer-code-row + .account-drawer-link-text { padding-bottom: .85rem; border-bottom: 1px solid var(--ac-line); }
#accountDrawer .account-drawer-header { justify-content: flex-start !important; text-align: left !important; }
#accountDrawer .account-drawer-photo-frame { margin: 0 !important; }
#accountDrawer .account-menu-header-text { margin: 0 !important; flex: 1 1 auto; text-align: left !important; }

/* == My Account drawer v2: bigger profile card, icon tiles, separate logout == */
#accountDrawer .account-drawer-header { position: relative; flex-direction: column; align-items: center !important; justify-content: center !important; gap: .6rem; padding: 1.5rem 1rem 1.1rem !important; margin-bottom: 1.25rem; text-align: center !important; overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ac-green) 16%, var(--ac-card)) 0, var(--ac-card) 70%) !important; }
#accountDrawer .account-drawer-photo-frame { width: 72px !important; height: 72px !important; padding: 8px; background: var(--ac-bg) !important; border: 1px solid var(--ac-line) !important; border-radius: 16px !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .12) !important; }
#accountDrawer .account-menu-header-text { text-align: center !important; flex: 0 0 auto; }
#accountDrawer .account-menu-name { font-size: 19px; letter-spacing: -.01em; }
#accountDrawer .account-menu-badge { margin-top: .35rem; }
#accountDrawer .account-menu-sub { margin-top: .4rem; font-size: 12.5px; font-weight: 600; color: var(--ac-muted); }

/* Rows: icon in a tile, label, chevron */
#accountDrawer .account-drawer-link { gap: .75rem; min-height: 52px; padding: .6rem .85rem; }
#accountDrawer .account-drawer-icon { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; font-size: 16px; color: var(--ac-text); background: var(--ac-card); border: 1px solid var(--ac-line); border-radius: 9px; }
#accountDrawer .account-drawer-soon-btn .account-drawer-icon { color: var(--ac-muted); }
#accountDrawer .account-drawer-link-expert .account-drawer-icon { color: #f0791a; }

/* Get link code: green row with a tinted icon tile */
#accountDrawer .account-drawer-link-sitemap .account-drawer-icon { color: var(--ac-green-text); background: rgba(255, 255, 255, .18); border-color: transparent; }
body.home-main-page #accountDrawer .account-drawer-link-sitemap .account-drawer-icon { background: rgba(0, 0, 0, .12); }

/* Logout: its own button under the list */
#accountDrawer .account-drawer-link-panel > form:last-child { margin-top: 0; }
#accountDrawer .account-drawer-link-panel { overflow: visible; border: 0; background: transparent; gap: 0; }
#accountDrawer .account-drawer-link-panel > :not(form:last-child) { background: var(--ac-bg); border-left: 1px solid var(--ac-line); border-right: 1px solid var(--ac-line); }
#accountDrawer .account-drawer-link-panel > :first-child { border-top: 1px solid var(--ac-line); border-radius: 12px 12px 0 0; overflow: hidden; }
#accountDrawer .account-drawer-link-panel > :nth-last-child(2) { border-bottom: 1px solid var(--ac-line); border-radius: 0 0 12px 12px; overflow: hidden; }
#accountDrawer .account-drawer-link-panel > form:last-child { margin-top: 1rem; }
#accountDrawer .account-drawer-link-panel > form:last-child .account-drawer-link { justify-content: center; min-height: 44px; border: 1px solid var(--ac-line) !important; border-radius: 10px; }
#accountDrawer .account-drawer-link-panel > form:last-child .account-drawer-link:hover { background: color-mix(in srgb, var(--ac-red) 10%, transparent); border-color: var(--ac-red) !important; }
#accountDrawer .account-drawer-link-danger .account-drawer-icon { width: auto; height: auto; color: inherit; background: none; border: 0; }

/* == My Account drawer v3: flat profile card, link callout, labelled sections, pinned logout == */
#accountDrawer .offcanvas-body { display: flex !important; flex-direction: column; }
#accountDrawer .ad-profile { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: .9rem !important; margin: 0 0 1.25rem !important; padding: 1rem !important; text-align: left !important;
    background: var(--ac-card) !important; border: 1px solid var(--ac-line) !important; border-radius: 14px !important; }
#accountDrawer .ad-avatar { flex: 0 0 auto; width: 56px; height: 56px; padding: 4px; background: var(--ac-bg); border: 2px solid var(--ac-line); border-radius: 12px; }
#accountDrawer .ad-avatar.is-linked { border-color: var(--ac-green); }
#accountDrawer .ad-avatar img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; border-radius: 6px; }
#accountDrawer .ad-profile-text { min-width: 0; }
#accountDrawer .ad-name-row { display: flex; align-items: center; gap: .5rem; min-width: 0; }
#accountDrawer .ad-name-row .account-menu-name { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
#accountDrawer .ad-name-row .account-menu-badge { margin: 0; flex: 0 0 auto; font-size: 10px; }
#accountDrawer .ad-status { display: flex; align-items: center; gap: .4rem; margin-top: .3rem; font-size: 12.5px; font-weight: 600; color: var(--ac-muted); }
#accountDrawer .ad-dot { width: 7px; height: 7px; border-radius: 50%; background: #d4a72c; box-shadow: 0 0 0 3px rgba(212, 167, 44, .18); }
#accountDrawer .ad-status.is-linked .ad-dot { background: var(--ac-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac-green) 22%, transparent); }

/* Body: reset the old grouped-panel rules */
#accountDrawer .ad-body { flex: 1 1 auto; display: flex; flex-direction: column; background: transparent !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; }
#accountDrawer .ad-body > * { background: transparent !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; }

/* Link callout */
#accountDrawer .ad-body > .ad-callout { margin-bottom: 1.25rem; padding: 1rem !important; background: color-mix(in srgb, var(--ac-green) 8%, var(--ac-bg)) !important; border: 1px solid color-mix(in srgb, var(--ac-green) 35%, var(--ac-line)) !important; border-radius: 14px !important; }
#accountDrawer .ad-callout-head { display: flex; gap: .75rem; align-items: flex-start; }
#accountDrawer .ad-callout-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-size: 18px; color: var(--ac-green-text); background: var(--ac-green); border-radius: 10px; }
#accountDrawer .ad-callout-title { font-size: 14.5px; font-weight: 800; color: var(--ac-text); }
#accountDrawer .ad-callout-text { margin-top: .15rem; font-size: 13px; line-height: 1.45; color: var(--ac-muted); }
#accountDrawer .ad-callout form { margin: .85rem 0 0; }
#accountDrawer .ad-callout-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; height: 40px; font-family: var(--body); font-size: 14px; font-weight: 800; color: var(--ac-green-text) !important; background: var(--ac-green) !important; border: 0; border-radius: 10px; }
#accountDrawer .ad-callout-btn:hover { filter: brightness(1.08); }
#accountDrawer .ad-callout-btn::after { content: none !important; }
#accountDrawer.account-drawer-hinting .ad-callout-btn .account-drawer-hint-badge { margin-left: 0; }
#accountDrawer .ad-callout .account-drawer-arrow-step { padding: .9rem 0 0; }
#accountDrawer .ad-callout .account-drawer-code-row { padding: .55rem 0; }
#accountDrawer .ad-callout .account-drawer-link-text { padding: 0; }
#accountDrawer .ad-callout .account-drawer-code-row + .account-drawer-link-text { padding: 0; border: 0; }
#accountDrawer .ad-callout .account-drawer-link-code { background: var(--ac-bg); }

/* Sections */
#accountDrawer .ad-section-label { margin: 0 0 .4rem .25rem; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ac-muted); }
#accountDrawer .ad-body > .ad-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 1.25rem; }
#accountDrawer .ad-group .account-drawer-link { gap: .8rem; min-height: 46px; padding: .45rem .6rem !important; border: 0 !important; border-radius: 10px !important; background: transparent; }
#accountDrawer .ad-group .account-drawer-link:not(:disabled):hover { background: var(--ac-hover); }
#accountDrawer .ad-group .account-drawer-link::after { opacity: 0; transition: opacity .15s, transform .15s; }
#accountDrawer .ad-group .account-drawer-link:not(:disabled):hover::after { opacity: 1; transform: translateX(2px); }
#accountDrawer .ad-group .account-drawer-soon-btn::after { opacity: 1 !important; transform: none !important; }
#accountDrawer .ad-group .account-drawer-icon { --tile: var(--ac-muted); width: 32px; height: 32px; font-size: 15px; color: var(--tile) !important; background: color-mix(in srgb, var(--tile) 14%, transparent) !important; border: 0 !important; border-radius: 9px; }
#accountDrawer .ad-c-orange .account-drawer-icon { --tile: #f0791a; }
#accountDrawer .ad-c-blue .account-drawer-icon { --tile: #3b82f6; }
#accountDrawer .ad-c-purple .account-drawer-icon { --tile: #8b5cf6; }
#accountDrawer .ad-c-teal .account-drawer-icon { --tile: #14b8a6; }
#accountDrawer .ad-group .account-drawer-soon-btn .account-drawer-icon { opacity: .6; }

/* Logout pinned to the bottom */
#accountDrawer .ad-body > .ad-logout { margin: auto 0 0 !important; padding-top: 1rem !important; border-top: 1px solid var(--ac-line) !important; }
#accountDrawer .ad-logout-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; height: 42px; font-family: var(--body); font-size: 14px; font-weight: 700; color: var(--ac-red); background: transparent; border: 1px solid var(--ac-line); border-radius: 10px; transition: background .15s, border-color .15s; }
#accountDrawer .ad-logout-btn:hover { background: color-mix(in srgb, var(--ac-red) 10%, transparent); border-color: color-mix(in srgb, var(--ac-red) 50%, transparent); }