:root {
    --mk-bg: #0d0a08;
    --mk-nav: #14100c;
    --mk-surface: #181310;
    --mk-surface-2: #1c1613;
    --mk-sunken: #0a0705;
    --mk-line: #2e2620;
    --mk-line-2: #251f1a;
    --mk-line-lit: #6b4a24;

    --mk-gold: #d3781f;
    --mk-gold-dim: #8a7860;
    --mk-gold-lit: #f39a2b;
    --mk-gold-soft: #e8a13c;
    --mk-gold-pale: #f6c878;

    --mk-jade: #7dc98a;
    --mk-blood: #c9301f;
    --mk-blood-deep: #7d1713;
    --mk-blood-line: #d8503f;

    --mk-text: #e6dcd0;
    --mk-heading: #f3e6d0;
    --mk-cream: #f0dcae;
    --mk-text-dim: #b7a58d;

    --mk-bg-rgb: 13, 10, 8;
    --mk-nav-rgb: 20, 16, 12;
    --mk-gold-rgb: 211, 120, 31;
    --mk-gold-lit-rgb: 243, 154, 43;
    --mk-jade-rgb: 125, 201, 138;
    --mk-blood-rgb: 201, 48, 31;
    --mk-text-rgb: 230, 220, 208;
    --mk-text-dim-rgb: 183, 165, 141;

    --mk-forge: linear-gradient(180deg, #f6d98a 10%, #e8a13c 45%, #d3781f 70%, #a85a12 95%);

    --mk-font: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mk-font-head: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
    --mk-font-display: 'Metal Mania', 'Barlow Condensed', cursive;
}

[data-bs-theme="dark"] {
    --bs-body-bg: var(--mk-bg);
    --bs-body-bg-rgb: var(--mk-bg-rgb);
    --bs-body-color: var(--mk-text);
    --bs-body-color-rgb: var(--mk-text-rgb);
    --bs-body-font-family: var(--mk-font);
    --bs-emphasis-color: var(--mk-heading);
    --bs-secondary-color: var(--mk-text-dim);
    --bs-secondary-color-rgb: var(--mk-text-dim-rgb);
    --bs-secondary-rgb: var(--mk-text-dim-rgb);
    --bs-secondary-bg: var(--mk-surface);
    --bs-tertiary-bg: var(--mk-nav);
    --bs-tertiary-bg-rgb: var(--mk-nav-rgb);
    --bs-border-color: var(--mk-line);
    --bs-border-color-translucent: var(--mk-line);
    --bs-heading-color: var(--mk-heading);

    --bs-primary: var(--mk-gold);
    --bs-primary-rgb: var(--mk-gold-rgb);
    --bs-warning: var(--mk-gold);
    --bs-warning-rgb: var(--mk-gold-rgb);
    --bs-success-rgb: var(--mk-jade-rgb);
    --bs-danger-rgb: var(--mk-blood-rgb);

    --bs-link-color: var(--mk-gold-soft);
    --bs-link-color-rgb: 232, 161, 60;
    --bs-link-hover-color: #ffb54d;
    --bs-link-hover-color-rgb: 255, 181, 77;
}

.card {
    --bs-card-bg: var(--mk-surface);
    --bs-card-border-color: var(--mk-line);
    --bs-card-cap-bg: transparent;
    --bs-card-border-radius: 12px;
}

.btn-warning {
    --bs-btn-bg: var(--mk-gold);
    --bs-btn-border-color: var(--mk-gold-pale);
    --bs-btn-color: #0d0a08;
    --bs-btn-hover-bg: var(--mk-gold-lit);
    --bs-btn-hover-border-color: var(--mk-gold-pale);
    --bs-btn-hover-color: #0d0a08;
    --bs-btn-active-bg: var(--mk-gold-dim);
    --bs-btn-active-border-color: var(--mk-gold-dim);
    --bs-btn-active-color: var(--mk-text);
    --bs-btn-disabled-bg: var(--mk-gold);
    --bs-btn-disabled-border-color: var(--mk-gold);
    --bs-btn-disabled-color: #0d0a08;
    --bs-btn-border-radius: 8px;
    --bs-btn-font-weight: 700;
}

.btn-outline-warning {
    --bs-btn-color: var(--mk-cream);
    --bs-btn-border-color: var(--mk-line-lit);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--mk-gold-soft);
    --bs-btn-hover-color: #ffb54d;
    --bs-btn-border-radius: 8px;
    --bs-btn-font-weight: 700;
}

.btn-outline-secondary,
.btn-outline-danger {
    --bs-btn-border-radius: 8px;
}

.list-group {
    --bs-list-group-bg: var(--mk-surface);
    --bs-list-group-color: #b7a58d;
    --bs-list-group-border-color: var(--mk-line);
    --bs-list-group-action-hover-bg: var(--mk-surface-2);
    --bs-list-group-action-hover-color: var(--mk-heading);
    --bs-list-group-active-bg: var(--mk-gold);
    --bs-list-group-active-border-color: var(--mk-gold-pale);
    --bs-list-group-active-color: #0d0a08;
    --bs-list-group-border-radius: 10px;
}

.pagination {
    --bs-pagination-bg: var(--mk-surface);
    --bs-pagination-color: var(--mk-text-dim);
    --bs-pagination-border-color: var(--mk-line);
    --bs-pagination-hover-bg: var(--mk-surface-2);
    --bs-pagination-hover-color: var(--mk-gold-lit);
    --bs-pagination-hover-border-color: var(--mk-line-lit);
    --bs-pagination-focus-bg: var(--mk-surface-2);
    --bs-pagination-focus-color: var(--mk-gold-lit);
    --bs-pagination-active-bg: var(--mk-gold);
    --bs-pagination-active-border-color: var(--mk-gold-pale);
    --bs-pagination-active-color: #0d0a08;
    --bs-pagination-disabled-bg: var(--mk-surface);
    --bs-pagination-disabled-border-color: var(--mk-line);
    --bs-pagination-border-radius: 8px;
}

.offcanvas {
    --bs-offcanvas-bg: var(--mk-bg);
    --bs-offcanvas-border-color: var(--mk-line);
    --bs-offcanvas-width: 27rem;
}

.form-control {
    --bs-border-color: var(--mk-line-2);
    --bs-body-bg: var(--mk-sunken);
    --bs-border-radius: 8px;
}

.alert-warning {
    --bs-alert-color: var(--mk-cream);
    --bs-alert-bg: #14100c;
    --bs-alert-border-color: #6b4a24;
    --bs-alert-border-radius: 10px;
}

.alert-danger {
    --bs-alert-color: #f3c3bb;
    --bs-alert-bg: #2c1310;
    --bs-alert-border-color: #6b2a22;
    --bs-alert-border-radius: 10px;
}

.alert-success {
    --bs-alert-color: #c3e6cb;
    --bs-alert-bg: #14251a;
    --bs-alert-border-color: #2f5c3c;
    --bs-alert-border-radius: 10px;
}

.navbar {
    --bs-navbar-color: #e6dcd0;
    --bs-navbar-hover-color: #ffb54d;
    --bs-navbar-active-color: var(--mk-gold);
}

.mk-root h1, .mk-root h2, .mk-root h3, .mk-root h4, .mk-root h5, .mk-root h6 {
    font-family: var(--mk-font-head);
    font-weight: 700;
}

.mk-root .navbar-brand {
    font-family: var(--mk-font-display);
    font-weight: 400;
    letter-spacing: 1px;
}

.mk-root .navbar-brand .fw-semibold {
    background: var(--mk-forge);
    -webkit-background-clip: text;
    background-clip: text;
    color: #f39a2b;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 0 rgba(10, 7, 5, 0.9));
    font-size: clamp(1.125rem, 3.4vw, 1.5rem);
}

.mk-root .navbar-nav .nav-link {
    border: 1px solid var(--mk-line);
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-right: 0.5rem;
    padding: 0.5rem 1rem;
}

.mk-root .navbar-nav .nav-link.active {
    background: linear-gradient(180deg, var(--mk-gold-lit), var(--mk-gold));
    border-color: var(--mk-gold-pale);
    color: #0d0a08;
}

.mk-root .navbar-nav .nav-link.link-secondary {
    border-color: transparent;
}

.mk-hero {
    background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(var(--mk-gold-rgb), 0.14) 0%, transparent 70%);
    border-bottom: 1px solid #2e2620;
}

.mk-hero h1 {
    background: var(--mk-forge);
    -webkit-background-clip: text;
    background-clip: text;
    color: #f39a2b;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 0 rgba(10, 7, 5, 0.9)) drop-shadow(0 6px 26px rgba(211, 120, 31, 0.45));
    font-family: var(--mk-font-display);
    font-size: clamp(2.3rem, 9.9vw, 4.5rem);
    font-weight: 400;
    letter-spacing: 3px;
    line-height: 1;
    margin: 0;
}

.mk-well {
    align-items: center;
    background: linear-gradient(180deg, #14100c, var(--mk-surface));
    display: flex;
    justify-content: center;
    min-height: 116px;
    padding: 0.75rem;
}

.mk-well__img {
    max-height: 92px;
    max-width: 100%;
}

.mk-well--lg {
    min-height: 132px;
}

.mk-cat {
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-right: 0.625rem;
    min-width: 7rem;
}

.mk-wallet {
    color: var(--mk-text-dim);
    font-size: 0.9rem;
    white-space: nowrap;
}

.mk-wallet strong {
    color: var(--mk-gold-lit);
    font-size: 1.05rem;
}

.mk-buy .btn-warning {
    --bs-btn-bg: var(--mk-blood);
    --bs-btn-border-color: var(--mk-blood-line);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #e0392a;
    --bs-btn-hover-border-color: var(--mk-blood-line);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--mk-blood-deep);
    --bs-btn-active-border-color: var(--mk-blood-line);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--mk-blood-deep);
    --bs-btn-disabled-border-color: var(--mk-line-2);
    --bs-btn-disabled-color: #e9c9c3;
    letter-spacing: 1.5px;
}

.mk-badge--stored {
    background-color: var(--mk-surface-2);
    color: var(--mk-text-dim);
}

.mk-badge--listed {
    background-color: rgba(var(--mk-gold-rgb), 0.18);
    color: var(--mk-gold-lit);
}

.mk-badge--sold {
    background-color: rgba(var(--mk-jade-rgb), 0.18);
    color: var(--mk-jade);
}

.mk-badge--taken {
    background-color: rgba(var(--mk-blood-rgb), 0.18);
    color: var(--mk-blood-line);
}

.mk-tooltip {
    --bs-tooltip-bg: var(--mk-surface);
    --bs-tooltip-color: var(--mk-text);
    --bs-tooltip-max-width: 20rem;
    --bs-tooltip-opacity: 1;
    --bs-tooltip-padding-x: 0.75rem;
    --bs-tooltip-padding-y: 0.625rem;
}

.mk-tt {
    font-size: 0.8125rem;
    line-height: 1.45;
    min-width: 13rem;
}

.mk-tt__name {
    color: var(--mk-gold-lit);
}

.mk-rarity--0 { color: #8e8e8e; }
.mk-rarity--1 { color: #d1d1d1; }
.mk-rarity--2 { color: #7ca1ff; }
.mk-rarity--3 { color: #ff3252; }
.mk-rarity--4 { color: #34ff30; }
.mk-rarity--5 { color: #fa30ff; }