/* Mob detail pages: /mobs/{slug}. Shared cards, properties and report drawer come from block-details.css. */

/* Description and heading */
.mob-desc-panel {
    font-family: 'Baloo 2', Arial, sans-serif;
}

.mob-what-heading {
    margin: 0 0 10px;
    font-family: 'Baloo 2', Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--cartoon-ink);
}

/* Variant switcher: solid buttons with a pale stage between them */
.mob-variant-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.mob-variant-stage {
    flex: 1;
    min-width: 0;
    padding: 8px 14px;
    border-radius: 12px;
    background: #f1f5ee;
    border: 2px solid #dde6d4;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
}

.mob-variant-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: var(--gx-blue);
    color: #fff;
    font-size: 16px;
    box-shadow: 0 3px 0 var(--gx-blue-dark);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
}

.mob-variant-arrow:hover {
    background: #58b92e;
    transform: translateY(-1px);
    box-shadow: 0 4px 0 var(--gx-blue-dark);
}

.mob-variant-arrow:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--gx-blue-dark);
}

/* Spawn button */
.mob-spawn-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 16px;
    font-weight: 700;
    border-radius: 12px;
}

/* Health and damage values as solid chips */
.value-health,
.value-damage,
.value-light {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
}

.value-health { background: #d93654; }
.value-damage { background: #e0822a; }
.value-light { background: #e0a526; color: var(--cartoon-ink); }

/* Dimension badges: solid */
.entry-dimension-badge {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef2f6;
    color: var(--gx-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Wide property rows span the full width of the panel */
.block-properties-row-wide {
    flex-wrap: wrap;
}

.block-properties-row-wide dd {
    display: block;
    flex: 1 1 100%;
    text-align: left;
}

/* The icon grid takes the full width, so its items sit side by side */
.block-properties-row-wide .mob-held-item-grid {
    width: 100%;
}

.mob-properties {
    margin: 0;
}

/* Held item picker: solid panel */
.mob-held-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--cartoon-ink);
    background: #fff;
    border: 2px solid var(--cartoon-line);
    border-radius: 10px;
    cursor: pointer;
}

.mob-held-toggle:hover {
    background: var(--cartoon-soft);
    border-color: var(--gx-blue);
}

/* Lifts the picker above the drops grid and other panels below it */
.mob-held-dropdown,
.mob-damage-dropdown {
    position: relative;
    z-index: 1050;
}

.mob-held-dropdown .dropdown-menu,
.mob-damage-dropdown .dropdown-menu {
    z-index: 1051;
}

/* The menu itself scrolls; the wrapper must not clip it */
.mob-held-dropdown .dropdown-menu,
.mob-damage-dropdown .dropdown-menu {
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: none;
    padding: 8px;
    border: 1px solid var(--nav-border);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(32, 33, 36, 0.15);
    background: #fff;
}

.mob-held-option,
.mob-damage-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--cartoon-ink);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.mob-held-option:hover,
.mob-damage-option:hover {
    background: var(--cartoon-soft);
    color: var(--gx-blue-dark);
}

.mob-held-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 8px;
}

.mob-held-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #bdbdbd;
    border: 0;
}

.mob-held-item-icon img {
    width: 34px;
    height: 34px;
    image-rendering: pixelated;
}

/* Scrolls with the mouse wheel and touch, with the scrollbar hidden */
.mob-held-dropdown .dropdown-menu::-webkit-scrollbar,
.mob-damage-dropdown .dropdown-menu::-webkit-scrollbar {
    display: none;
}

/* Held item icons are sized to match the other item icons */
.mob-held-toggle-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    object-fit: contain;
    image-rendering: pixelated;
}

.mob-held-dropdown .sidebar-dropdown-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #bdbdbd;
}

.mob-held-dropdown .sidebar-dropdown-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    image-rendering: pixelated;
}

.mob-held-name,
.mob-held-line {
    font-size: 15px;
    font-weight: 700;
}

.mob-held-toggle-icon {
    font-size: 12px;
    color: var(--gx-muted);
}

/* Damage picker */
.mob-damage-toggle {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--cartoon-ink);
    background: #fff;
    border: 2px solid var(--cartoon-line);
    border-radius: 10px;
    cursor: pointer;
}

.mob-damage-toggle:hover {
    background: var(--cartoon-soft);
    border-color: var(--gx-blue);
}

.mob-damage-line {
    font-size: 15px;
    font-weight: 700;
}

/* Damage picker and its value sit side by side */
.mob-damage-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mob-damage-dropdown {
    display: inline-block;
}

/* Ability buttons: solid, one per ability */
.mob-ability-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mob-ability-btn {
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: #8e5cd9;
    border: 1px solid #5f3aa6;
    border-radius: 10px;
    box-shadow: 0 2px 0 #5f3aa6;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
}

.mob-ability-btn:hover {
    color: #fff;
    background: #7c4bc9;
    transform: translateY(-1px);
    box-shadow: 0 3px 0 #5f3aa6;
}

.mob-ability-btn:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 #5f3aa6;
}

/* Variant tabs under the picture */
.mob-variant-current {
    color: var(--gx-blue-dark);
}

@media (max-width: 575.98px) {
    .mob-what-heading {
        font-size: 18px;
    }

    .mob-variant-stage {
        font-size: 14px;
    }
}

/* Category and dimension badges: solid colours, with space between them */
.entry-category-badge + .entry-category-badge {
    margin-left: 8px;
}

.entry-type-badge-passive {
    background: #4caf24;
    color: #fff;
}

.entry-type-badge-neutral {
    background: #e0a526;
    color: var(--cartoon-ink);
}

.entry-type-badge-hostile {
    background: #d93654;
    color: #fff;
}

.entry-type-badge-boss {
    background: #8e5cd9;
    color: #fff;
}

.entry-dimension-badge {
    background: #eef2f6;
    color: var(--cartoon-ink);
}

.entry-dimension-overworld {
    background: #4caf24;
    color: #fff;
}

.entry-dimension-nether {
    background: #b5462a;
    color: #fff;
}

.entry-dimension-the-end,
.entry-dimension-end {
    background: #3b3b58;
    color: #fff;
}

/* Badges use the same look as the Copy button: 30px tall, rounded, with a raised bottom edge */
.entry-category-badge.entry-type-badge,
.entry-category-badge.entry-dimension-badge {
    height: 30px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 9px;
    border: 1px solid var(--badge-dark, var(--gx-blue-dark));
    box-shadow: 0 2px 0 var(--badge-dark, var(--gx-blue-dark));
}

.entry-type-badge-passive { --badge-dark: #2e7d12; }
.entry-type-badge-neutral { --badge-dark: #a87812; }
.entry-type-badge-hostile { --badge-dark: #9c2339; }
.entry-type-badge-boss { --badge-dark: #5f3aa6; }
.entry-type-badge-passive { --badge-color: #4caf24; }
.entry-type-badge-neutral { --badge-color: #e0a526; }
.entry-type-badge-hostile { --badge-color: #d93654; }
.entry-type-badge-boss { --badge-color: #8e5cd9; }
.entry-dimension-overworld { --badge-dark: #2e7d12; }
.entry-dimension-nether { --badge-dark: #7a2d19; }
.entry-dimension-the-end,
.entry-dimension-end { --badge-dark: #22223a; }

/* Variant switcher: round arrow buttons either side of a solid name pill */
.mob-variant-switch {
    gap: 12px;
}

.mob-variant-arrow {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 2px solid var(--gx-blue-dark);
    background: #fff;
    color: var(--gx-blue-dark);
    font-size: 18px;
    box-shadow: 0 3px 0 var(--gx-blue-dark);
}

.mob-variant-arrow:hover {
    color: #fff;
    background: var(--gx-blue);
    box-shadow: 0 4px 0 var(--gx-blue-dark);
}

.mob-variant-arrow:active {
    box-shadow: 0 1px 0 var(--gx-blue-dark);
}

.mob-variant-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--gx-blue);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 3px 0 var(--gx-blue-dark);
}

.mob-variant-stage .mob-variant-current {
    color: #fff;
}

/* Variant switcher, matched to the Copy and badge styles: square buttons, a pale panel for the name */
.mob-variant-switch {
    gap: 8px;
    max-width: 100%;
}

.mob-variant-arrow {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--gx-blue-dark);
    background: var(--gx-blue);
    color: #fff;
    font-size: 14px;
    box-shadow: 0 2px 0 var(--gx-blue-dark);
}

.mob-variant-arrow:hover {
    background: #58b92e;
    color: #fff;
    box-shadow: 0 3px 0 var(--gx-blue-dark);
}

.mob-variant-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 4px 14px;
    border: 1px solid #cfe8bb;
    border-radius: 9px;
    background: #f7faf3;
    color: var(--cartoon-ink);
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 2px 0 #cfe8bb;
}

.mob-variant-stage .mob-variant-current {
    color: var(--cartoon-ink);
}

/* Fixed sizes: the arrows stay put whatever the variant name's length */
.mob-variant-switch {
    justify-content: flex-start;
}

.mob-variant-arrow {
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
}

.mob-variant-stage {
    flex: 0 0 240px;
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* No hover lift or press movement on the arrows */
.mob-variant-arrow,
.mob-variant-arrow:hover,
.mob-variant-arrow:active,
.mob-variant-arrow:focus {
    transform: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

/* The variant name is the span between the arrows: give it the fixed width */
.mob-variant-switch .mob-variant-current {
    display: flex;
    flex: 0 0 240px;
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    min-height: 34px;
    padding: 4px 14px;
    border: 1px solid #cfe8bb;
    border-radius: 9px;
    background: #f7faf3;
    box-shadow: 0 2px 0 #cfe8bb;
    font-size: 14px;
    font-weight: 700;
}

/* Mob Properties heading: same solid green pill as the section titles */
.catalog-detail-page .properties-drawer-heading {
    display: inline-flex;
    align-items: center;
    margin: 0 0 14px;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--gx-blue);
    box-shadow: 0 3px 0 var(--gx-blue-dark);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

/* Section headings inside the mob description (the sections already on the page) use the same pill as "What Is" */
.catalog-page-mob .mob-desc-panel .entry-markdown h3 {
    display: inline-flex;
    align-items: center;
    margin: 0 0 12px;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--gx-blue);
    box-shadow: 0 3px 0 var(--gx-blue-dark);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.catalog-page-mob .mob-desc-panel .entry-markdown h3 + * {
    margin-top: 0;
}

/* Drops row for mobs that drop nothing */
.mob-no-drops {
    font-size: 15px;
    font-weight: 600;
    color: var(--gx-muted);
}

/* Drops: icons sit on the same line as the Drops label */
.block-properties-row-inline {
    flex-wrap: nowrap;
}

.block-properties-row-inline dd {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
}

.block-properties-row-inline .mob-held-item-grid {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Category and dimension badges are the same size and text style */
.entry-category-badge.entry-type-badge,
.entry-category-badge.entry-dimension-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
}

/* Neutral badge: background matches its border colour */
.entry-category-badge.entry-type-badge.entry-type-badge-neutral {
    background: #a87812;
    color: #fff;
}

/* Neutral badge matches the Neutral badge on the mobs list page: gold fill, white text, dark gold border */
.entry-category-badge.entry-type-badge.entry-type-badge-neutral {
    background: #e0a526;
    color: #fff;
    border-color: #a87812;
    box-shadow: 0 2px 0 #a87812;
}

/* Fixed size: the Neutral and dimension badges are identical boxes, whatever their text */
.entry-category-badge.entry-type-badge,
.entry-category-badge.entry-dimension-badge {
    box-sizing: border-box;
    width: 120px !important;
    height: 34px !important;
    padding: 0 !important;
    text-align: center;
}

/* Stats and Properties heading: purple, so it stands apart from the green section titles */
.catalog-detail-page .properties-drawer-heading {
    background: #8e5cd9;
    box-shadow: 0 3px 0 #5f3aa6;
}