/* minecraft.css - Minecraft section (/minecraft, /minecraft/builds, /minecraft/rolls,
   /minecraft/mods). Everything structural is mc-*; the generic lol topbar/mini/roll
   control utilities are reused in markup and RESKINNED here inside .mc-shell so the
   pages read blocky without duplicating behavior classes (valorant.css reuse rule).
   Chrome is painted with gradients + Monocraft (OFL); page/hub backdrops use the
   block textures in /brand/mc. Animations are transform/opacity only. */

@font-face {
    font-family: 'Monocraft';
    src: url('../fonts/Monocraft.ttf') format('truetype');
    font-display: swap;
}

/* ===== tokens + page backdrop ===== */
.mc-shell {
    /* the "grass" accent rides the active theme so the pages match the rest of
       the site; only gold (locks) and enchant purple (cursed) stay fixed */
    --mc-grass: var(--accent);
    --mc-grass-dark: color-mix(in srgb, var(--accent) 65%, #000);
    --mc-dirt: #8a5f3d;
    --mc-dirt-dark: #66452b;
    --mc-stone: #9a9a9a;
    --mc-stone-dark: #6f6f6f;
    --mc-ink: #0e0f12;            /* deep cave neutral-black */
    --mc-panel: color-mix(in srgb, var(--accent) 6%, #16171a);
    --mc-xp: color-mix(in srgb, var(--accent) 70%, #fff);
    --mc-enchant: #b263e8;
    --mc-gold: #fdd835;
    --mc-font: 'Monocraft', ui-monospace, Consolas, monospace;
    --mc-notch: 6px;

    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* cave backdrop: green bloom up top, vignette below; the ::after layer carries
   either the default checker shimmer or a per-page block texture (theme map below) */
.mc-bg {
    position: absolute;
    inset: -36px;
    z-index: -1;
    overflow: hidden;
    background: var(--mc-ink);
}

.mc-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1100px 540px at 50% -80px, color-mix(in srgb, var(--mc-grass) 20%, transparent), transparent 70%),
        radial-gradient(700px 420px at 88% 100%, color-mix(in srgb, var(--mc-enchant) 10%, transparent), transparent 72%),
        linear-gradient(180deg, rgba(8, 9, 12, 0.35) 0%, transparent 40%, rgba(5, 6, 9, 0.75) 100%);
}

/* texture layer: defaults to a faint checker ("distant chunks"); themed pages
   swap in a real tiled block texture via the vars. Static paint, no animation. */
.mc-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--mc-tex, repeating-conic-gradient(rgba(255, 255, 255, 0.022) 0% 25%, transparent 0% 50%) 0 0 / 32px 32px);
    opacity: var(--mc-tex-opacity, 1);
    image-rendering: pixelated;
    mask-image: var(--mc-tex-mask, linear-gradient(180deg, #000 0%, transparent 85%));
    -webkit-mask-image: var(--mc-tex-mask, linear-gradient(180deg, #000 0%, transparent 85%));
}

/* which block tiles which page - theme by theme, league style (light theme is
   deliberately unmapped: it stays plain, no texture, no white). Opacity keeps
   the tiles reading as a dark wall, not wallpaper. */
html:not([data-theme="light"]) .mc-shell {
    --mc-tex-opacity: 0.24;
    --mc-tex-mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 100%);
}

html[data-theme="tropical"] .mc-page-bravery { --mc-tex: url('/brand/mc/terracotta.png') 0 0 / 96px 96px repeat; }
html[data-theme="tropical"] .mc-page-builds  { --mc-tex: url('/brand/mc/acacia.png') 0 0 / 96px 96px repeat; }
html[data-theme="tropical"] .mc-page-rolls   { --mc-tex: url('/brand/mc/honeycomb.png') 0 0 / 96px 96px repeat; }
html[data-theme="tropical"] .mc-page-mods    { --mc-tex: url('/brand/mc/blackstone.png') 0 0 / 96px 96px repeat; --mc-tex-opacity: 0.5; }

html[data-theme="crimson"] .mc-page-bravery { --mc-tex: url('/brand/mc/wart.png') 0 0 / 96px 96px repeat; }
html[data-theme="crimson"] .mc-page-builds  { --mc-tex: url('/brand/mc/crimson-planks.png') 0 0 / 96px 96px repeat; }
html[data-theme="crimson"] .mc-page-rolls   { --mc-tex: url('/brand/mc/red-nether.png') 0 0 / 96px 96px repeat; }
html[data-theme="crimson"] .mc-page-mods    { --mc-tex: url('/brand/mc/blackstone.png') 0 0 / 96px 96px repeat; --mc-tex-opacity: 0.5; }

html[data-theme="default"] .mc-page-bravery { --mc-tex: url('/brand/mc/deepslate.png') 0 0 / 96px 96px repeat; --mc-tex-opacity: 0.45; }
html[data-theme="default"] .mc-page-builds  { --mc-tex: url('/brand/mc/shulker.png') 0 0 / 96px 96px repeat; }
html[data-theme="default"] .mc-page-rolls   { --mc-tex: url('/brand/mc/lapis.png') 0 0 / 96px 96px repeat; }
html[data-theme="default"] .mc-page-mods    { --mc-tex: url('/brand/mc/sculk.png') 0 0 / 96px 96px repeat; --mc-tex-opacity: 0.5; }

html[data-theme="forest"] .mc-page-bravery { --mc-tex: url('/brand/mc/mossy.png') 0 0 / 96px 96px repeat; }
html[data-theme="forest"] .mc-page-builds  { --mc-tex: url('/brand/mc/dark-oak.png') 0 0 / 96px 96px repeat; --mc-tex-opacity: 0.4; }
html[data-theme="forest"] .mc-page-rolls   { --mc-tex: url('/brand/mc/pale-moss.png') 0 0 / 96px 96px repeat; }
html[data-theme="forest"] .mc-page-mods    { --mc-tex: url('/brand/mc/dark-prismarine.png') 0 0 / 96px 96px repeat; --mc-tex-opacity: 0.45; }

html[data-theme="modern"] .mc-page-bravery { --mc-tex: url('/brand/mc/obsidian.png') 0 0 / 96px 96px repeat; --mc-tex-opacity: 0.55; }
html[data-theme="modern"] .mc-page-builds  { --mc-tex: url('/brand/mc/amethyst.png') 0 0 / 96px 96px repeat; }
html[data-theme="modern"] .mc-page-rolls   { --mc-tex: url('/brand/mc/crying.png') 0 0 / 96px 96px repeat; --mc-tex-opacity: 0.35; }
html[data-theme="modern"] .mc-page-mods    { --mc-tex: url('/brand/mc/concrete.png') 0 0 / 96px 96px repeat; --mc-tex-opacity: 0.55; }

.mc-page {
    position: relative;
    width: 100%;
    max-width: 1180px;
    padding: 6px 4px 52px;
    box-sizing: border-box;
}

/* ===== typography ===== */
.mc-shell .page-title {
    margin: 6px 0 10px !important;
    font-family: var(--mc-font);
    font-weight: 400;
    letter-spacing: 0.5px;
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);   /* hard pixel drop, not a blur */
}

.mc-head { text-align: center; }

.mc-sub {
    margin: 0 auto 6px;
    max-width: 580px;
    color: var(--text-muted, #8b8794);
    font-size: 0.95rem;
    line-height: 1.5;
}

.mc-label {
    font-family: var(--mc-font);
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--mc-grass) 70%, #fff);
}

/* ===== pixel-notched corners (shared recipe) ===== */
.mc-notched {
    clip-path: polygon(
        0 var(--mc-notch), var(--mc-notch) var(--mc-notch), var(--mc-notch) 0,
        calc(100% - var(--mc-notch)) 0, calc(100% - var(--mc-notch)) var(--mc-notch), 100% var(--mc-notch),
        100% calc(100% - var(--mc-notch)), calc(100% - var(--mc-notch)) calc(100% - var(--mc-notch)),
        calc(100% - var(--mc-notch)) 100%, var(--mc-notch) 100%,
        var(--mc-notch) calc(100% - var(--mc-notch)), 0 calc(100% - var(--mc-notch)));
}

/* ===== panels & cards ===== */
/* dark "polished deepslate" card with a hard 2px bevel; grass cap optional */
.mc-card {
    position: relative;
    background:
        repeating-conic-gradient(rgba(255, 255, 255, 0.014) 0% 25%, transparent 0% 50%) 0 0 / 22px 22px,
        linear-gradient(180deg, color-mix(in srgb, var(--mc-panel) 92%, var(--mc-grass)) 0%, var(--mc-panel) 100%);
    border: 2px solid #000;
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.07),
        inset 0 -3px 0 rgba(0, 0, 0, 0.45),
        0 8px 22px rgba(0, 0, 0, 0.45);
    padding: 14px 16px 16px;
}

/* grass cap: solid turf band + checker fringe so the edge reads stepped */
.mc-card-grass::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 12px;
    background:
        repeating-conic-gradient(var(--mc-grass-dark) 0% 25%, transparent 0% 50%) 0 8px / 8px 8px,
        linear-gradient(180deg, var(--mc-grass) 0 8px, var(--mc-grass-dark) 8px 100%);
    pointer-events: none;
}

.mc-card-grass { padding-top: 24px; }

.mc-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.mc-card-head > span:first-child {
    flex: 1;
    font-family: var(--mc-font);
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--mc-grass) 72%, #fff);
}

/* enchanted variant: cursed / rare rolls glint purple */
.mc-card-enchant {
    border-color: color-mix(in srgb, var(--mc-enchant) 55%, #000);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.07),
        inset 0 -3px 0 rgba(0, 0, 0, 0.45),
        0 0 22px color-mix(in srgb, var(--mc-enchant) 28%, transparent);
}

/* ===== inventory slot (result value frames, palette swatches) ===== */
.mc-slot {
    background: #191a17;
    border: 2px solid #000;
    box-shadow:
        inset 2px 2px 0 rgba(0, 0, 0, 0.65),
        inset -2px -2px 0 rgba(255, 255, 255, 0.10);
    padding: 8px 10px;
}

/* ===== control reskins: same markup classes as lol/val pages ===== */
/* big roll button -> classic stone button with hard gradient bands */
.mc-shell .lol-roll {
    font-family: var(--mc-font);
    font-weight: 400;
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    background: linear-gradient(180deg, #a9a9a9 0 2px, #8b8b8b 2px calc(100% - 4px), #636363 calc(100% - 4px) 100%);
    border: 2px solid #000;
    border-radius: 0;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 4px 0 rgba(0, 0, 0, 0.4);
    transition: transform 0.06s ease, box-shadow 0.06s ease, filter 0.12s ease;
}

.mc-shell .lol-roll:hover:not(:disabled) {
    filter: brightness(1.12);
    border-color: color-mix(in srgb, var(--mc-grass) 80%, #fff);
}

.mc-shell .lol-roll:active:not(:disabled) {
    transform: translateY(3px);
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.25), 0 1px 0 rgba(0, 0, 0, 0.4);
}

/* small lock / reroll buttons -> square inventory buttons */
.mc-shell .lol-mini {
    border-radius: 0;
    border: 2px solid #000;
    background: linear-gradient(180deg, #7c7c7c 0 2px, #5f5f5f 2px calc(100% - 3px), #474747 calc(100% - 3px) 100%);
    color: #e8e8e8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform 0.06s ease, filter 0.12s ease, border-color 0.12s ease;
}

.mc-shell .lol-mini:hover:not(:disabled) { filter: brightness(1.15); border-color: var(--mc-grass); }
.mc-shell .lol-mini:active:not(:disabled) { transform: translateY(2px); }

.mc-shell .lol-mini.active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--mc-gold) 80%, #fff) 0 2px, var(--mc-gold) 2px calc(100% - 3px), color-mix(in srgb, var(--mc-gold) 55%, #000) calc(100% - 3px) 100%);
    color: #2c2200;
    border-color: #000;
}

/* hub-back + icon buttons pick up the pixel font family only (keep their shape) */
.mc-shell .hub-back { font-family: var(--mc-font); font-size: 0.82rem; }

/* ===== XP bar (cursedness / progress meter) ===== */
.mc-xpbar {
    position: relative;
    height: 12px;
    background: #141414;
    border: 2px solid #000;
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.7), inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.mc-xpbar > span {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mc-xp) 78%, #fff) 0 3px, var(--mc-xp) 3px calc(100% - 3px), color-mix(in srgb, var(--mc-xp) 55%, #000) calc(100% - 3px) 100%);
    transition: width 0.25s ease;
}

.mc-xpbar-enchant > span {
    background: linear-gradient(180deg, color-mix(in srgb, var(--mc-enchant) 78%, #fff) 0 3px, var(--mc-enchant) 3px calc(100% - 3px), color-mix(in srgb, var(--mc-enchant) 55%, #000) calc(100% - 3px) 100%);
}

/* ===== chips (filters, difficulty) ===== */
.mc-chip {
    font-family: var(--mc-font);
    font-size: 0.78rem;
    letter-spacing: 0.4px;
    padding: 6px 12px;
    color: #cfd8c4;
    background: #20261a;
    border: 2px solid #000;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: filter 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.mc-chip:hover { filter: brightness(1.15); }

.mc-chip.active {
    color: #14200a;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mc-grass) 80%, #fff) 0 2px, var(--mc-grass) 2px calc(100% - 3px), var(--mc-grass-dark) calc(100% - 3px) 100%);
    border-color: #000;
}

.mc-chip-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* ===== cursedness slider (Survival Bravery) ===== */
.mc-curse {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
}

.mc-curse-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mc-curse-word {
    font-family: var(--mc-font);
    font-size: 0.82rem;
    min-width: 88px;
    text-align: left;
    color: var(--mc-xp);
}

.mc-curse-word.is-cursed { color: var(--mc-enchant); }

input[type="range"].mc-slider {
    -webkit-appearance: none;
    appearance: none;
    width: min(320px, 72vw);
    height: 22px;
    background: transparent;
    cursor: pointer;
}

input[type="range"].mc-slider::-webkit-slider-runnable-track {
    height: 12px;
    background: #141414;
    border: 2px solid #000;
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.7);
}

input[type="range"].mc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 22px;
    margin-top: -7px;
    background: linear-gradient(180deg, #cdcdcd 0 2px, #9a9a9a 2px calc(100% - 3px), #6f6f6f calc(100% - 3px) 100%);
    border: 2px solid #000;
}

input[type="range"].mc-slider::-moz-range-track {
    height: 12px;
    background: #141414;
    border: 2px solid #000;
}

input[type="range"].mc-slider::-moz-range-thumb {
    width: 12px;
    height: 18px;
    border-radius: 0;
    background: linear-gradient(180deg, #cdcdcd 0 2px, #9a9a9a 2px calc(100% - 3px), #6f6f6f calc(100% - 3px) 100%);
    border: 2px solid #000;
}

.mc-curse .mc-xpbar { width: min(320px, 72vw); height: 8px; }

/* ===== run sheet (Survival Bravery board pieces) ===== */
.mc-goal-label {
    font-family: var(--mc-font);
    font-size: 1.35rem;
    color: #fff;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    margin: 0 0 4px;
}

.mc-goal-text { margin: 0; color: #cfd8c4; }

.mc-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mc-list .mc-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e6ead9;
    font-size: 0.92rem;
    line-height: 1.35;
}

.mc-list .mc-slot > span:first-child { flex: 1; }

/* curse pips: 1 green, 2 gold, 3 purple */
.mc-pips { display: inline-flex; gap: 3px; flex: 0 0 auto; }

.mc-pip {
    width: 7px;
    height: 7px;
    background: var(--mc-grass);
    box-shadow: 0 0 6px color-mix(in srgb, var(--mc-grass) 60%, transparent);
}

.mc-pips-2 .mc-pip { background: var(--mc-gold); box-shadow: 0 0 6px color-mix(in srgb, var(--mc-gold) 60%, transparent); }
.mc-pips-3 .mc-pip { background: var(--mc-enchant); box-shadow: 0 0 6px color-mix(in srgb, var(--mc-enchant) 60%, transparent); }

/* ===== palette swatches (Build Ideas) - chips shaded like block faces ===== */
.mc-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.mc-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 88px;
    text-align: center;
}

.mc-swatch-chip {
    width: 46px;
    height: 46px;
    border: 2px solid #000;
    box-shadow:
        inset 3px 3px 0 rgba(255, 255, 255, 0.22),
        inset -3px -3px 0 rgba(0, 0, 0, 0.30);
}

.mc-swatch span {
    font-size: 0.76rem;
    color: #cfd8c4;
    line-height: 1.25;
}

.mc-prompt {
    margin: 0;
    color: #cfd8c4;
    font-size: 1rem;
    line-height: 1.5;
}

.mc-prompt strong { color: #fff; }

.mc-biome-name {
    font-family: var(--mc-font);
    font-size: 1.1rem;
    color: #fff;
    margin: 0 0 4px;
}

.mc-biome-note { margin: 0; color: #b9c2ac; font-size: 0.92rem; }

/* ===== hotbar dice tiles (Quick Rolls) ===== */
.mc-hotbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.mc-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 118px;
    background: #191a17;
    border: 2px solid #000;
    box-shadow:
        inset 2px 2px 0 rgba(0, 0, 0, 0.65),
        inset -2px -2px 0 rgba(255, 255, 255, 0.10);
    padding: 10px 12px;
}

.mc-tile-head {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mc-tile-head > span {
    flex: 1;
    font-family: var(--mc-font);
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--mc-grass) 65%, #fff);
}

.mc-tile-value {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.3;
    word-break: break-word;
}

/* seed tile: monospace, click to copy */
.mc-seed {
    font-family: var(--mc-font);
    font-size: 0.86rem;
    cursor: pointer;
    color: var(--mc-xp);
    background: none;
    border: 0;
    padding: 0;
}

.mc-seed:hover { text-decoration: underline; }

/* ===== SMP roulette ===== */
.mc-smp-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 4px 0 12px;
}

.mc-stepper {
    display: inline-flex;
    align-items: center;
    border: 2px solid #000;
    background: #191a17;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.mc-step-btn {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.mc-step-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); }
.mc-step-btn:disabled { opacity: 0.4; cursor: default; }

.mc-step-val {
    min-width: 40px;
    text-align: center;
    font-family: var(--mc-font);
    font-size: 0.95rem;
    color: #fff;
}

.mc-smp-list .mc-slot strong {
    font-family: var(--mc-font);
    font-weight: 400;
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--mc-grass) 75%, #fff);
    margin-right: 8px;
}

/* ===== mod roulette (Modrinth) ===== */
.mc-select {
    font: inherit;
    font-size: 0.86rem;
    padding: 7px 10px;
    color: #e6ead9;
    background: #20261a;
    border: 2px solid #000;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

.mc-mod {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.mc-mod-icon {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    object-fit: cover;
    background: #191a17;
    border: 2px solid #000;
    box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.35);
}

.mc-mod-body { flex: 1; min-width: 0; }

.mc-mod-title {
    margin: 0 0 4px;
    font-family: var(--mc-font);
    font-size: 1.15rem;
    color: #fff;
    word-break: break-word;
}

.mc-mod-desc { margin: 0 0 8px; color: #cfd8c4; font-size: 0.92rem; line-height: 1.45; }

.mc-mod-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #9aa38d;
}

.mc-mod-meta .mc-chip { padding: 3px 8px; cursor: default; }
.mc-mod-meta .mc-chip:hover { filter: none; }

.mc-mod-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-family: var(--mc-font);
    font-size: 0.8rem;
    color: var(--mc-xp);
    text-decoration: none;
}

.mc-mod-link:hover { text-decoration: underline; color: var(--mc-xp); }

/* modpack builder rows */
.mc-modlist { display: flex; flex-direction: column; gap: 8px; }

.mc-modlist .mc-slot { gap: 12px; }

.mc-modlist .mc-mod-icon { width: 40px; height: 40px; }

.mc-modlist a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    word-break: break-word;
}

.mc-modlist a:hover { color: var(--mc-xp); }

.mc-modlist .mc-mod-dl { flex: 0 0 auto; font-size: 0.78rem; color: #9aa38d; }

.mc-notice {
    text-align: center;
    padding: 10px;
    margin-top: 14px;
    font-size: 0.9rem;
    color: var(--mc-gold);
    background: color-mix(in srgb, var(--mc-gold) 10%, transparent);
    border: 2px solid color-mix(in srgb, var(--mc-gold) 40%, #000);
}

/* ===== board / grid layout ===== */
.mc-board {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
    animation: mc-rise 0.35s ease-out backwards;
}

.mc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.mc-card-wide { grid-column: 1 / -1; }

@keyframes mc-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.mc-controls { display: flex; justify-content: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }

.mc-empty,
.mc-error {
    text-align: center;
    color: var(--text-muted, #8b8794);
    padding: 60px 0;
    font-size: 1.05rem;
}

.mc-error { color: #e08a86; }

/* pixel-art images (e.g. Modrinth icons) should not get smoothed */
.mc-pix { image-rendering: pixelated; }

/* ===== small screens ===== */
@media (max-width: 640px) {
    .mc-page { padding: 6px 2px 40px; }
    .mc-cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .mc-board { animation: none; }
}