/* === Minecraft Theme Variables === */
:root {
    --mc-stone: #7a7a7a;
    --mc-grid: #f8f8f8;
    --mc-stone-dark: #555555;
    --mc-stone-light: #a0a0a0;
    --mc-dirt: #8b6f47;
    --mc-grass: #6ba340;
    --mc-wood: #9c7f4f;
    --mc-green: #3c8527;
    --mc-green-dark: #2a641c;
    --mc-green-darker: #1d4d13;
    --mc-blue: #4a7bdc;
    --mc-blue-dark: #2f5ba8;
    --mc-red: #c73232;
    --mc-red-dark: #a02828;
    --mc-gold: #f9b21a;
    --mc-black: #1e1e1f;
    --mc-white: #ffffff;
    --mc-shadow: rgba(0, 0, 0, 0.4);
    --card: #7a7a7a;
    --glass: rgba(255, 255, 255, 0.1);
}

/* === Header Custom === */
body .site-main-header-inner-wrap {
    min-height: unset;
    padding: 5px 0;
}

/* === Layout === */
.center-wrap {
    margin: 0 auto 24px;
    display: flex;
    gap: 24px;
    color: white;
    justify-content: center;
    flex-wrap: wrap;
    font-family: 'Press Start 2P', cursive;
    padding: 0 0 20px;
    width: 100%;
    align-items: flex-start;
}

.left-side {
    flex: 0 0 60%;
    max-width: 60%;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.right-side {
    flex: 0 0 35%;
    max-width: 35%;
    min-height: 450px;
    justify-content: flex-start;
    background: #7a7a7a;
    padding: 24px 10px;
    border: 4px solid var(--mc-black);
    box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.15), inset -3px -3px 0 rgba(0, 0, 0, 0.6), 0 8px 0 rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: unset;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
}

/* === Header Styles === */
.site-header-wrap .site-container {
    background: #545454;
    padding: 6px 25px;
    border: 4px solid #000;
    box-shadow: inset -4px -4px 0px 0px rgba(0, 0, 0, 0.5), inset 4px 4px 0px 0px rgba(255, 255, 255, 0.2);
}

.site-container .entry-title {
    margin: 0 auto 20px;
    text-align: center;
}

/* === Navigation Menu === */
ul#primary-menu {
    gap: 10px;
}

body ul#primary-menu li.menu-item.menu-item-signup svg {
    display: none;
}

body ul#primary-menu li.menu-item.menu-item-signup a {
    background: #3c8527;
    color: #fff;
    font-size: 9px;
}

body ul#primary-menu li.menu-item-user-profile a {
    background: #3c8527;
    box-shadow: unset;
    padding: 0 10px !important;
}

ul#primary-menu li a {
    font-size: 10px;
    background: #5a5a5a;
    box-shadow: inset -3px -3px 0px 0px rgba(0, 0, 0, 0.4), inset 3px 3px 0px 0px rgba(255, 255, 255, 0.4), 0px 5px 0px 0px #c6c6c6;
    color: #fff;
    padding: 0.6em 0.8em;
}

ul#primary-menu li a:hover,
ul#primary-menu li.current-menu-item a {
    background: #d9d9d9;
    box-shadow: inset -3px -3px 0px 0px rgba(0, 0, 0, 0.4), inset 3px 3px 0px 0px rgba(255, 255, 255, 0.5), 0px 5px 0px 0px #6a6a6a;
    color: #000;
}

nav .footer-menu-container #footer-menu li a {
    font-size: 10px;
    background: #5a5a5a;
    box-shadow: inset -3px -3px 0px 0px rgba(0, 0, 0, 0.4), inset 3px 3px 0px 0px rgba(255, 255, 255, 0.4), 0px 5px 0px 0px #c6c6c6;
    color: #fff !important;
    padding: 0.6em !important;
}

.footer-html-inner {
    font-size: 10px;
}

.footer-html-inner a {
    color: #65f646;
}

ul#footer-menu {
    gap: 10px;
}

.footer-html.inner-link-style-plain {
    margin: 0;
}

.site-footer-row-container-inner .site-container .site-middle-footer-inner-wrap,
.footer-html.inner-link-style-plain {
    background: #7a7a7a;
    padding: 18px 25px;
    box-shadow: inset -4px -4px 0px 0px rgba(0, 0, 0, 0.5), inset 4px 4px 0px 0px rgba(255, 255, 255, 0.2);
    color: #fff;
}

.site-footer .site-container {
    padding: 0;
}

/* === Preview Box === */
#preview_bg_yard {
    width: 100%;
    max-width: 100%;
    background:
        linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        repeating-linear-gradient(0deg, #7a7a7a 0px, #7a7a7a 2px, #828282 2px, #828282 4px),
        repeating-linear-gradient(90deg, #6e6e6e 0px, #6e6e6e 2px, #7a7a7a 2px, #7a7a7a 4px);
    border: 4px solid var(--mc-black);
    border-radius: 0;
    overflow: hidden;
    box-shadow:
        inset 4px 4px 0 rgba(255, 255, 255, 0.2),
        inset -4px -4px 0 rgba(0, 0, 0, 0.5),
        0 8px 0 rgba(0, 0, 0, 0.3),
        0 12px 20px rgba(0, 0, 0, 0.6);
    position: relative;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    min-height: 347px;
/*     aspect-ratio: 540 / 347; */
    display: flex;
}

#model-preview {
    display: block;
    background: transparent;
    image-rendering: pixelated;
    margin: 0 auto;
    height: auto !important;
    width: 100% !important;
    flex: 1;
}

.model-preview-grabber {
    width: 100% !important;
    height: 100% !important;
}

/* === Thumbnail Buttons === */
.color_box {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.color_box a {
    display: block;
    border: 3px solid var(--mc-black);
    background: var(--mc-stone);
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, 0.3),
        inset -2px -2px 0 rgba(0, 0, 0, 0.5),
        0 4px 0 rgba(0, 0, 0, 0.4);
    transition: all 0.1s;
    position: relative;
}

.color_box a:hover {
    transform: translateY(2px);
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, 0.3),
        inset -2px -2px 0 rgba(0, 0, 0, 0.5),
        0 2px 0 rgba(0, 0, 0, 0.4);
}

.color_box a.selected {
    border-color: var(--mc-gold);
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, 0.4),
        inset -2px -2px 0 rgba(0, 0, 0, 0.5),
        0 4px 0 rgba(0, 0, 0, 0.4),
        0 0 0 2px var(--mc-gold);
}

.color_box a img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    display: block;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* === Form Inputs === */
#grab-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 0;
    width: -webkit-fill-available;
}

#mc-input {
    padding: 14px;
    border: 3px solid var(--mc-black);
    background: var(--mc-stone-light);
    color: var(--mc-black);
    font-size: 12px;
    font-family: 'Press Start 2P', cursive;
    text-align: center;
}

.site-container select {
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 12px;
    border: 3px solid var(--mc-black);
    background: #5a5a5a;
    box-shadow: inset -3px -3px 0px 0px rgba(0, 0, 0, 0.4), inset 3px 3px 0px 0px rgba(255, 255, 255, 0.4), 0px 5px 0px 0px #c6c6c6;
    color: #fff;
}

#uuid-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#download-skin {
    flex: 0 0 100%;
}

#change-skin,
#edit-skin,
#upload-minecraft {
    flex: 0 0 calc(50% - 5px);
}

.grab-skin-info {
    flex: 0 0 100%;
    margin-bottom: 20px;
    font-size: 12px;
    display: grid;
    gap: 10px;
    padding: 8px;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid var(--mc-black);
}

.grab-skin-info span {
    font-size: 10px;
}

/* === Minecraft 3D Buttons === */
.btn-action {
    padding: 0;
    width: 100%;
    color: white;
    border: none;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: block;
    position: relative;
    background: transparent;
    transition: all 0.1s ease;
    line-height: 1.6;
}

.btn-action .btn-inner {
    display: block;
    padding: 14px 12px;
    border: 3px solid var(--mc-black);
    position: relative;
}

/* Green Button (Download) */
.btn-green .btn-inner,
#download-skin .btn-inner {
    background: linear-gradient(180deg, #4f913c 0%, #3c8527 50%, #2a641c 100%);
    box-shadow:
        inset 0 -4px 0 var(--mc-green-darker),
        inset 3px 3px 0 rgba(255, 255, 255, 0.25),
        inset -3px -3px 0 rgba(0, 0, 0, 0.4),
        0 6px 0 rgba(0, 0, 0, 0.3);
}

.btn-green:hover .btn-inner,
#download-skin:hover .btn-inner {
    background: linear-gradient(180deg, #5aa047 0%, #4a9130 50%, #357024 100%);
    transform: translateY(2px);
}

.btn-green:active,
#download-skin:active {
    transform: translateY(4px);
}

.btn-green:active .btn-inner,
#download-skin:active .btn-inner {
    box-shadow:
        inset 0 -2px 0 var(--mc-green-darker),
        inset 3px 3px 0 rgba(255, 255, 255, 0.25),
        inset -3px -3px 0 rgba(0, 0, 0, 0.4),
        0 2px 0 rgba(0, 0, 0, 0.3);
}

/* Red Button (Edit) */
.btn-red .btn-inner,
#edit-skin .btn-inner {
    background: linear-gradient(180deg, #e64a3c 0%, #c73232 50%, #a02828 100%);
    box-shadow:
        inset 0 -4px 0 #7a1d1d,
        inset 3px 3px 0 rgba(255, 255, 255, 0.25),
        inset -3px -3px 0 rgba(0, 0, 0, 0.4),
        0 6px 0 rgba(0, 0, 0, 0.3);
}

.btn-red:hover .btn-inner,
#edit-skin:hover .btn-inner {
    background: linear-gradient(180deg, #f05545 0%, #d93d3d 50%, #b03030 100%);
    transform: translateY(2px);
}

.btn-red:active,
#edit-skin:active {
    transform: translateY(4px);
}

.btn-red:active .btn-inner,
#edit-skin:active .btn-inner {
    box-shadow:
        inset 0 -2px 0 #7a1d1d,
        inset 3px 3px 0 rgba(255, 255, 255, 0.25),
        inset -3px -3px 0 rgba(0, 0, 0, 0.4),
        0 2px 0 rgba(0, 0, 0, 0.3);
}

/* Blue Button (Upload/Change) */
.btn-blue .btn-inner,
#upload-minecraft .btn-inner,
#change-skin .btn-inner {
    background: linear-gradient(180deg, #5a8fe6 0%, #4a7bdc 50%, #2f5ba8 100%);
    box-shadow:
        inset 0 -4px 0 #1e3d7a,
        inset 3px 3px 0 rgba(255, 255, 255, 0.25),
        inset -3px -3px 0 rgba(0, 0, 0, 0.4),
        0 6px 0 rgba(0, 0, 0, 0.3);
}

.btn-blue:hover .btn-inner,
#upload-minecraft:hover .btn-inner,
#change-skin:hover .btn-inner {
    background: linear-gradient(180deg, #6a9ff0 0%, #5a8be8 50%, #3f6bb8 100%);
    transform: translateY(2px);
}

.btn-blue:active,
#upload-minecraft:active,
#change-skin:active {
    transform: translateY(4px);
}

.btn-blue:active .btn-inner,
#upload-minecraft:active .btn-inner,
#change-skin:active .btn-inner {
    box-shadow:
        inset 0 -2px 0 #1e3d7a,
        inset 3px 3px 0 rgba(255, 255, 255, 0.25),
        inset -3px -3px 0 rgba(0, 0, 0, 0.4),
        0 2px 0 rgba(0, 0, 0, 0.3);
}

/* === Animation Controls === */
.post_canvas {
    position: relative;
    width: 100%;
}

.animation-controls {
    position: absolute;
    z-index: 10;
    display: grid;
    gap: 8px;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
}

.animation-controls button {
    background: linear-gradient(180deg, #c6c6c6 0%, #a0a0a0 50%, #7a7a7a 100%);
    color: #2a2a2a;
    border: 3px solid var(--mc-black);
    padding: 8px 12px;
    cursor: pointer;
    font-size: 24px;
    transition: all 0.1s ease;
    box-shadow:
        inset 0 -4px 0 #555555,
        inset 2px 2px 0 rgba(255, 255, 255, 0.3),
        inset -2px -2px 0 rgba(0, 0, 0, 0.3),
        0 4px 0 rgba(0, 0, 0, 0.4);
    position: relative;
    line-height: 1;
}

.animation-controls button:hover {
    background: linear-gradient(180deg, #d6d6d6 0%, #b0b0b0 50%, #8a8a8a 100%);
    transform: translateY(2px);
    box-shadow:
        inset 0 -2px 0 #555555,
        inset 2px 2px 0 rgba(255, 255, 255, 0.3),
        inset -2px -2px 0 rgba(0, 0, 0, 0.3),
        0 2px 0 rgba(0, 0, 0, 0.4);
}

.animation-controls button.active {
    background: linear-gradient(180deg, #4f913c 0%, #3c8527 50%, #2a641c 100%);
    color: white;
    box-shadow:
        inset 0 -4px 0 var(--mc-green-darker),
        inset 2px 2px 0 rgba(255, 255, 255, 0.25),
        inset -2px -2px 0 rgba(0, 0, 0, 0.4),
        0 4px 0 rgba(0, 0, 0, 0.3);
    filter: brightness(1.1);
}

.animation-controls button:active {
    transform: translateY(3px);
}

/* === Title & Content === */
body .cust_title {
    text-align: center;
    font-weight: 800;
    letter-spacing: 2px;
    image-rendering: pixelated;
    margin: 30px auto 20px !important;
    flex: 0 0 100%;
    width: 100%;
}

.skin-title {
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    color: var(--mc-white);
    margin-bottom: 12px;
    letter-spacing: 1px;
    line-height: 1.6;
    flex: 0 0 100%;
}

.skin-content {
    font-size: 9px;
    line-height: 2;
    --lines: 3;
    --lh: 3;
    max-height: calc(var(--lines) * var(--lh) * 1em);
    overflow: hidden;
    padding: 8px 15px 4px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid var(--mc-black);
    color: var(--mc-white);
    transition: max-height 0.7s ease-in-out;
    will-change: max-height;
    position: relative;
    margin-top: 10px;
    width: 100%;
}

.skin-content.is-truncated:before {
    content: 'hover to read more';
    letter-spacing: 1px;
    font-size: 8px;
    position: absolute;
    top: 0;
    right: 0;
    color: #000;
    background: #fff;
    padding: 0 4px;
}

.skin-content::after {
    content: "";
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.6em;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.6) 100%);
}

.skin-content:hover {
    max-height: calc(var(--lh) * 100em);
}

.skin-featured-image {
    flex: 0 0 100%;
    margin-top: 20px;
    text-align: center;
}

.skin-featured-image img {
    max-width: 200px;
    height: auto;
    border: 3px solid var(--mc-black);
    background: var(--mc-stone);
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, 0.3),
        inset -2px -2px 0 rgba(0, 0, 0, 0.5),
        0 4px 0 rgba(0, 0, 0, 0.4);
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* === Error Message === */
#error-msg {
    display: none;
    text-align: center;
    font-size: 14px;
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    background: #2b2b2bab;
    padding: 20px;
    color: #fff;
}

/* === Related Posts Section === */
.related-posts-section {
    width: 100%;
    font-family: 'Press Start 2P', cursive;
    position: relative;
}

.related-posts-title {
    font-size: 16px;
    text-align: center;
    margin-bottom: 24px;
    letter-spacing: 1px;
}

.related-posts-wrapper {
    position: relative;
}

.related-posts-container {
    display: grid;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    grid-auto-flow: row !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    overflow-x: visible !important;
    grid-gap: 16px !important;
}

.related-posts-wrapper button {
    display: none;
}

/* === Navigation Buttons === */
.slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: linear-gradient(180deg, #c6c6c6 0%, #a0a0a0 50%, #7a7a7a 100%);
    color: #2a2a2a;
    border: 3px solid var(--mc-black);
    padding: 10px 8px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.1s ease;
    box-shadow: inset 0 -3px 0 #555555, inset 2px 2px 0 rgba(255, 255, 255, 0.3), inset -2px -2px 0 rgba(0, 0, 0, 0.3), 0 3px 0 rgba(0, 0, 0, 0.4);
    line-height: 1;
}

.slider-nav-btn:hover {
    background: linear-gradient(180deg, #d6d6d6 0%, #b0b0b0 50%, #8a8a8a 100%);
}

.slider-nav-btn:active {
    transform: translateY(-50%) translateY(2px);
    box-shadow: inset 0 -2px 0 #555555, inset 2px 2px 0 rgba(255, 255, 255, 0.3), inset -2px -2px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(0, 0, 0, 0.4);
}

.slider-nav-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.slider-nav-btn.prev {
    left: 0;
}

.slider-nav-btn.next {
    right: 0;
}

/* === Related Post Card === */
.related-post-card {
    background: #7a7a7a;
    border: 4px solid var(--mc-black);
    box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.15), inset -3px -3px 0 rgba(0, 0, 0, 0.6), 0 6px 0 rgba(0, 0, 0, 0.3), 0 8px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.related-post-card:hover {
    transform: translateY(-4px);
    box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.2), inset -3px -3px 0 rgba(0, 0, 0, 0.6), 0 8px 0 rgba(0, 0, 0, 0.3), 0 12px 20px rgba(0, 0, 0, 0.5);
}

.related-post-thumbnail {
    width: 100%;
    overflow: hidden;
    border-bottom: 3px solid var(--mc-stone);
    background: var(--mc-grid);
    position: relative;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.related-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.related-post-content {
    padding: 12px 4px;
    display: grid;
    gap: 4px;
    align-items: center;
    background: transparent;
    margin: auto;
    justify-items: center;
}

.related-post-title {
    font-size: 12px;
    line-height: 1.2;
    color: var(--mc-white);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    text-align: center;
}

.related-post-card:hover .related-post-title {
    color: var(--mc-gold);
}

.related-post-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(0deg, #7a7a7a 0px, #7a7a7a 2px, #828282 2px, #828282 4px), repeating-linear-gradient(90deg, #6e6e6e 0px, #6e6e6e 2px, #7a7a7a 2px, #7a7a7a 4px);
    font-size: 48px;
}

/* === Posts Page Grid === */
.all-posts-grid {
    grid-auto-flow: row !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    overflow-x: visible !important;
    grid-gap: 16px !important;
}

/* === Pagination === */
.mc-pagination-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 40px 0;
    padding: 20px;
    font-family: 'Press Start 2P', cursive;
}

.mc-pagination-wrapper a,
.mc-pagination-wrapper span {
    display: inline-block;
    padding: 12px 16px;
    min-width: 48px;
    text-align: center;
    background: linear-gradient(180deg, #c6c6c6 0%, #a0a0a0 50%, #7a7a7a 100%);
    color: #2a2a2a;
    border: 3px solid var(--mc-black);
    text-decoration: none;
    font-size: 12px;
    transition: all 0.1s ease;
    box-shadow: inset 0 -3px 0 #555555, inset 2px 2px 0 rgba(255, 255, 255, 0.3), inset -2px -2px 0 rgba(0, 0, 0, 0.3), 0 3px 0 rgba(0, 0, 0, 0.4);
}

.mc-pagination-wrapper a:hover {
    background: linear-gradient(180deg, #d6d6d6 0%, #b0b0b0 50%, #8a8a8a 100%);
    transform: translateY(-2px);
    box-shadow: inset 0 -3px 0 #555555, inset 2px 2px 0 rgba(255, 255, 255, 0.4), inset -2px -2px 0 rgba(0, 0, 0, 0.3), 0 5px 0 rgba(0, 0, 0, 0.4);
}

.mc-pagination-wrapper a:active {
    transform: translateY(2px);
    box-shadow: inset 0 -2px 0 #555555, inset 2px 2px 0 rgba(255, 255, 255, 0.3), inset -2px -2px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(0, 0, 0, 0.4);
}

.mc-pagination-wrapper .current {
    background: linear-gradient(180deg, #ffd700 0%, #ffb700 50%, #ff8c00 100%);
    color: #2a2a2a;
    font-weight: bold;
    box-shadow: inset 0 -3px 0 #cc6600, inset 2px 2px 0 rgba(255, 255, 255, 0.4), inset -2px -2px 0 rgba(0, 0, 0, 0.4), 0 3px 0 rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 215, 0, 0.3);
}

.mc-pagination-wrapper .dots {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #666;
}

.mc-pagination-wrapper .prev,
.mc-pagination-wrapper .next {
    font-size: 16px;
    padding: 12px 20px;
    font-weight: bold;
}

/* === Tool Links === */
.tool-links {
    display: flex;
    gap: 2%;
    flex-wrap: wrap;
    text-align: center;
    margin: 10px auto;
}

.tool-links h3 {
    flex: 0 0 100%;
    color: #fff;
}

.tool-links a {
    flex: 0 0 48%;
}

/* === Copy Button with Tooltip Styles === */
.copy-btn-wrapper {
    /*     position: relative; */
    display: inline-block;
}

.copy-btn {
    padding: 8px;
    background: linear-gradient(180deg, #5a8fe6 0%, #4a7bdc 50%, #2f5ba8 100%);
    color: white;
    border: 3px solid var(--mc-black);
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.1s ease;
    box-shadow: inset 0 -4px 0 #1e3d7a, inset 3px 3px 0 rgba(255, 255, 255, 0.25), inset -3px -3px 0 rgba(0, 0, 0, 0.4), 0 6px 0 rgba(0, 0, 0, 0.3);
}

.copy-btn:hover {
    background: linear-gradient(180deg, #6a9ff0 0%, #5a8be8 50%, #3f6bb8 100%);
}

.copy-btn:active {
    transform: translateY(4px);
    box-shadow: inset 0 -2px 0 #1e3d7a, inset 3px 3px 0 rgba(255, 255, 255, 0.25), inset -3px -3px 0 rgba(0, 0, 0, 0.4), 0 2px 0 rgba(0, 0, 0, 0.3);
}

/* Tooltip styling - appears below button */
.tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #545454;
    color: #fff;
    padding: 12px;
    border: 3px solid var(--mc-black);
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.2), inset -2px -2px 0 rgba(0, 0, 0, 0.5), 0 4px 0 rgba(0, 0, 0, 0.4);
    z-index: 1000;
    transition: opacity 0.3s, visibility 0.3s;
    width: 100%;
}

/* === Like/Dislike Buttons === */
.mc-like-dislike-container {
    display: flex;
    gap: 10px;
    margin: 10px 0;
    justify-content: center;
}

.mc-vote-container {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mc-vote-btn {
    background: linear-gradient(180deg, #c6c6c6 0%, #a0a0a0 50%, #7a7a7a 100%);
    border: 3px solid var(--mc-black);
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    color: #2a2a2a;
    box-shadow: inset 0 -3px 0 #555555, inset 2px 2px 0 rgba(255, 255, 255, 0.3), inset -2px -2px 0 rgba(0, 0, 0, 0.3), 0 3px 0 rgba(0, 0, 0, 0.4);
    transition: all 0.1s;
}

.mc-vote-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.mc-vote-btn:active {
    transform: translateY(2px);
    box-shadow: inset 0 -1px 0 #555555;
}

.mc-vote-btn.active.mc-like-btn {
    background: linear-gradient(180deg, #4f913c 0%, #3c8527 50%, #2a641c 100%);
    color: white;
    box-shadow: inset 0 -3px 0 #1d4d13;
}

.mc-vote-btn.active.mc-dislike-btn {
    background: linear-gradient(180deg, #e64a3c 0%, #c73232 50%, #a02828 100%);
    color: white;
    box-shadow: inset 0 -3px 0 #7a1d1d;
}

.mc-vote-btn:disabled {
    opacity: 0.7;
    cursor: default;
}

.mc-vote-message {
    font-size: 10px;
    color: #fff;
    margin-left: 10px;
    display: none;
}

/* === Auth Forms === */
.mc-auth-wrapper {
    max-width: 400px;
    margin: 40px auto;
    font-family: 'Press Start 2P', cursive;
}

.mc-auth-container {
    background: #c6c6c6;
    border: 4px solid var(--mc-black);
    padding: 20px;
    box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.4), inset -3px -3px 0 rgba(0, 0, 0, 0.4), 0 8px 0 rgba(0, 0, 0, 0.3);
}

.mc-auth-container h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.mc-form-group {
    margin-bottom: 15px;
}

.mc-form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 10px;
    color: #333;
}

.mc-form-group input[type="text"],
.mc-form-group input[type="email"],
.mc-form-group input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 3px solid var(--mc-black);
    background: #fff;
    font-family: inherit;
    font-size: 12px;
}

.mc-btn {
    font-size: 12px;
    padding: 12px;
    background: linear-gradient(180deg, #4f913c 0%, #3c8527 50%, #2a641c 100%);
    color: white;
    border: 3px solid var(--mc-black);
    font-family: inherit;
    cursor: pointer;
    box-shadow: inset 0 -4px 0 #1d4d13, inset 2px 2px 0 rgba(255, 255, 255, 0.3);
}

.mc-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
}

.mc-btn:active {
    transform: translateY(2px);
    box-shadow: inset 0 -2px 0 #1d4d13;
}

.mc-btn:disabled {
    background: #7a7a7a;
    cursor: not-allowed;
    box-shadow: none;
}

.mc-switch-link {
    display: block;
    text-align: center;
    margin-top: 15px;
    font-size: 10px;
    color: #333;
    cursor: pointer;
    text-decoration: underline;
}

.mc-message {
    margin-top: 10px;
    font-size: 10px;
    text-align: center;
}

.mc-error {
    color: #c73232;
}

.mc-success {
    color: #3c8527;
}

.mc-hidden {
    display: none;
}

/* === Profile Page === */
body .mc-profile-username {
    margin-top: 0;
}

.mc-profile-header-section {
    display: grid;
    gap: 10px;
    width: fit-content;
    align-items: end;
    margin-bottom: 20px;
}

.chaneg_user {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.chaneg_user img {
    max-width: 150px;
}

.mc-profile-container {
    background: #c6c6c6;
    border: 4px solid var(--mc-black);
    padding: 30px;
    box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.4), inset -3px -3px 0 rgba(0, 0, 0, 0.4);
    font-family: 'Press Start 2P', cursive;
    color: #333;
}

.mc-avatar img {
    border: 4px solid var(--mc-black);
    background: #fff;
}

.mc-profile-settings {
    background: rgba(0, 0, 0, 0.1);
    padding: 20px;
    border: 2px solid var(--mc-black);
    margin-top: 20px;
}

.mc-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    cursor: pointer;
}

/* === Comments Section === */
.mc-comments-section {
    margin: 30px auto 50px;
    max-width: 700px;
    padding: 20px 10px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 4px solid var(--mc-black);
}

.mc-comments-title {
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    margin-bottom: 20px;
}

.mc-chat-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
}

.mc-chat-bubble {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.mc-chat-avatar img {
    width: 30px;
    height: 30px;
    border: 2px solid var(--mc-black);
    image-rendering: pixelated;
}

.mc-chat-content {
    background: #e0e0e0;
    padding: 12px 15px;
    border: 2px solid var(--mc-black);
    position: relative;
    flex: 1;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
    font-family: 'Inter', sans-serif;
    /* Readable font for comments */
}

.mc-chat-content::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid var(--mc-black);
}

.mc-chat-content::after {
    content: '';
    position: absolute;
    left: -5px;
    top: 12px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #e0e0e0;
}

.mc-chat-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 12px;
    color: #555;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
}

.mc-chat-author {
    font-weight: bold;
    color: #333;
}

.mc-badge {
    background: #f9b21a;
    color: #000;
    padding: 2px 4px;
    font-size: 8px;
    border: 1px solid #000;
    margin-left: 5px;
}

.mc-chat-text {
    font-size: 14px;
    line-height: 1.5;
    color: #222;
}

.mc-chat-actions {
    text-align: right;
}

.mc-chat-actions a {
    font-size: 10px;
    color: #4a7bdc;
    text-decoration: none;
    font-weight: bold;
}

.like-count {
    color: #999;
}

/* Comment Form */
.comment-form-comment textarea {
    width: 100%;
    padding: 15px;
    border: 3px solid var(--mc-black);
    font-family: inherit;
    background: #fff;
    margin-bottom: 10px;
}

.mc-is-author .mc-chat-content {
    background: #fffbe6;
    /* Slight yellow tint for OP */
    border-color: #f9b21a;
}

.mc-is-author .mc-chat-content::before {
    border-right-color: #f9b21a;
}

.mc-is-author .mc-chat-content::after {
    border-right-color: #fffbe6;
}

/* .tooltip::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent var(--mc-black) transparent;
}

.tooltip::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -4px;
    border-width: 4px;
    border-style: solid;
    border-color: transparent transparent #545454 transparent;
}
 */
.copy-btn-wrapper:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

/* Input inside tooltip */
.tooltip-input {
    width: 100%;
    padding: 8px;
    margin-top: 6px;
    border: 2px solid var(--mc-black);
    background: var(--mc-stone-light);
    color: var(--mc-black);
    font-size: 9px;
    font-family: 'Press Start 2P', cursive;
    box-sizing: border-box;
    cursor: text;
    box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.tooltip-input:focus {
    outline: 2px solid var(--mc-blue);
    background: #b5b5b5;
}

.tooltip-label {
    font-size: 9px;
    display: block;
    margin-bottom: 4px;
}

/* Success message */
.success-message {
    position: absolute;
    top: -50px;
    left: 0;
    background: linear-gradient(180deg, #4f913c 0%, #3c8527 50%, #2a641c 100%);
    color: white;
    padding: 15px 25px;
    border: 3px solid var(--mc-black);
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.25), inset -2px -2px 0 rgba(0, 0, 0, 0.4), 0 6px 0 rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s, transform 0.3s;
    z-index: 2000;
    pointer-events: none;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
}

.success-message.show {
    opacity: 1;
    transform: translateY(0);
}

.embed-codes_container {
    display: flex;
    gap: 4px;
    position: relative;
}

.embed-codes {
    display: grid;
    gap: 10px;
    margin: 20px 0;
}

.skin-stand-views {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
    flex: 0 0 100%;
    justify-content: space-between;
    margin: 20px auto;
    justify-items: end;
    background: var(--mc-grid);
}

.howto_wrap {
    margin: 40px auto;
    width: 100%;
    padding: 20px;
}

.custom_card_header {
    display: flex;
    align-items: center;
    gap: 14px
}

p.howto_lead {
    margin: 6px 0 14px;
    color: #000;
    font-size: 14px
}

.howto_card {
    background: #7a7a7a70;
    padding: 16px;
    margin-top: 12px;
    border: 4px solid var(--mc-black);
    box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.15), inset -3px -3px 0 rgba(0, 0, 0, 0.6), 0 8px 0 rgba(0, 0, 0, 0.3);
}

.howto_steps {
    display: grid;
    gap: 12px
}

/* Share Container */
.mc-share-container {
    position: relative;
    margin: 20px 0;
    font-family: 'Press Start 2P', cursive;
}

/* Share Button */
.mc-share-btn {
    padding: 14px 12px;
    background: none;
    border: 3px solid var(--mc-black, #1e1e1f);
    cursor: pointer;
    font-family: 'Press Start 2P', cursive;
    transition: all 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(180deg, #5a8fe6 0%, #4a7bdc 50%, #2f5ba8 100%);
    box-shadow: inset 0 -4px 0 #1e3d7a, 0 6px 0 rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 10px;
}

.right-side .mc-share-btn,
.right-side .mc-share-container {
    width: 100%;
}

.mc-share-btn:hover {
    transform: translateY(2px);
    box-shadow: inset 0 -4px 0 #1e3d7a, 0 4px 0 rgba(0, 0, 0, 0.3);
}

.mc-share-btn:active {
    transform: translateY(4px);
    box-shadow: inset 0 -2px 0 #1e3d7a, 0 2px 0 rgba(0, 0, 0, 0.3);
}

.mc-share-icon {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-share-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.mc-share-text {
    font-size: 10px;
    letter-spacing: 1px;
}

/* Share Menu Dropdown (not overlay) */
.mc-share-menu {
    position: absolute;
    top: calc(100% + 10px);
    /* Below the button */
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.mc-share-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Share Menu Inner */
.mc-share-menu-inner {
    background: #7a7a7a;
    border: 4px solid var(--mc-black, #1e1e1f);
    box-shadow:
        inset 3px 3px 0 rgba(255, 255, 255, 0.15),
        inset -3px -3px 0 rgba(0, 0, 0, 0.6),
        0 8px 0 rgba(0, 0, 0, 0.3),
        0 12px 30px rgba(0, 0, 0, 0.8);
    padding: 15px;
    min-width: max-content;
    position: relative;
    transition: all 0.3s ease;
}

/* Close Button - Hidden for dropdown */
.mc-share-close {
    display: none;
    /* Not needed for dropdown */
}

/* Share Title */
.mc-share-title {
    color: white;
    font-size: 10px;
    text-align: center;
    margin: 0 0 12px 0;
    letter-spacing: 1px;
}

/* Share Options - Horizontal Row */
.mc-share-options {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: center;
}

/* Share Option Button */
.mc-share-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    /* Compact for horizontal */
    aspect-ratio: 1;
    /* Make buttons square */
    background: #5a5a5a;
    border: 3px solid var(--mc-black, #1e1e1f);
    box-shadow:
        inset -3px -3px 0px 0px rgba(0, 0, 0, 0.4),
        inset 3px 3px 0px 0px rgba(255, 255, 255, 0.4),
        0px 5px 0px 0px #c6c6c6;
    color: white;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.1s ease;
    text-align: center;
}

.mc-share-option:hover {
    background: #d9d9d9;
    box-shadow:
        inset -3px -3px 0px 0px rgba(0, 0, 0, 0.4),
        inset 3px 3px 0px 0px rgba(255, 255, 255, 0.5),
        0px 5px 0px 0px #6a6a6a;
    color: #000;
    transform: translateY(-2px);
}

.mc-share-option:active {
    transform: translateY(2px);
    box-shadow:
        inset -3px -3px 0px 0px rgba(0, 0, 0, 0.4),
        inset 3px 3px 0px 0px rgba(255, 255, 255, 0.5),
        0px 2px 0px 0px #6a6a6a;
}

.mc-share-option-icon {
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-share-option-icon svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.mc-share-option-text {
    font-size: 9px;
    letter-spacing: 0.5px;
    word-break: break-word;
    display: none;
    /* Hide text, show only icons */
}

/* Platform-specific colors on hover */
.mc-share-facebook:hover {
    background: #1877f2 !important;
    color: white !important;
}

.mc-share-twitter:hover {
    background: #000000 !important;
    color: white !important;
}

.mc-share-reddit:hover {
    background: #ff4500 !important;
    color: white !important;
}

.mc-share-whatsapp:hover {
    background: #25d366 !important;
    color: white !important;
}

.mc-share-telegram:hover {
    background: #0088cc !important;
    color: white !important;
}

.mc-share-linkedin:hover {
    background: #0077b5 !important;
    color: white !important;
}

.mc-share-pinterest:hover {
    background: #bd081c !important;
    color: white !important;
}

.mc-share-email:hover {
    background: #ea4335 !important;
    color: white !important;
}

.mc-share-copy:hover {
    background: #6c757d !important;
    color: white !important;
}

/* Copy Notification */
.mc-share-notification {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #4f913c 0%, #3c8527 50%, #2a641c 100%);
    color: white;
    padding: 15px 25px;
    border: 3px solid var(--mc-black, #1e1e1f);
    box-shadow:
        inset 0 -4px 0 #1d4d13,
        0 6px 0 rgba(0, 0, 0, 0.3),
        0 10px 30px rgba(0, 0, 0, 0.5);
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    z-index: 10000;
    transition: all 0.3s ease;
}

.mc-share-notification.show {
    bottom: 30px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .skin-content.is-truncated:before {
        content: 'click to read more';
    }

    .mc-share-menu {
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
    }

    .mc-share-menu-inner {
        padding: 12px;
        width: 100%;
    }

    .mc-share-title {
        font-size: 9px;
        margin-bottom: 10px;
    }

    .mc-share-options {
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mc-share-option {
        padding: 10px;
        flex-shrink: 0;
    }

    .mc-share-option-icon svg {
        width: 24px;
        height: 24px;
    }

    .mc-share-option-text {
        font-size: 8px;
    }
}

@media (max-width: 480px) {
    .mc-share-menu-inner {
        padding: 10px;
    }

    .mc-share-title {
        font-size: 8px;
        margin-bottom: 8px;
    }

    .mc-share-options {
        gap: 5px;
    }

    .mc-share-option {
        padding: 8px;
    }

    .mc-share-option-icon svg {
        width: 20px;
        height: 20px;
    }

    .mc-share-notification {
        font-size: 9px;
        padding: 12px 20px;
    }
}

/* Scrollbar styling for menu */
.mc-share-menu-inner::-webkit-scrollbar {
    width: 10px;
}

.mc-share-menu-inner::-webkit-scrollbar-track {
    background: #555555;
    border: 2px solid var(--mc-black, #1e1e1f);
}

.mc-share-menu-inner::-webkit-scrollbar-thumb {
    background: #a0a0a0;
    border: 2px solid var(--mc-black, #1e1e1f);
}

.mc-share-menu-inner::-webkit-scrollbar-thumb:hover {
    background: #c6c6c6;
}

.mc-like-dislike-container {
    display: flex;
    gap: 10px;
    font-family: 'Press Start 2P', cursive;
    align-items: center;
}

.mc-vote-btn {
    background: #5a5a5a;
    border: 3px solid #1e1e1f;
    color: white;
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: 10px;
    box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.4), inset 3px 3px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.1s;
}

.mc-vote-btn:hover:not(:disabled) {
    background: #6a6a6a;
    transform: translateY(-2px);
}

.mc-vote-btn:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.4);
}

.mc-vote-btn.active {
    background: #4f913c;
    /* Green for voted */
    box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.4);
    cursor: default;
}

.mc-vote-btn.mc-dislike-btn.active {
    background: #e64a3c;
    /* Red for dislike */
}

.mc-vote-btn:disabled {
    opacity: 0.8;
    cursor: not-allowed;
}

.mc-vote-message {
    font-size: 10px;
    color: #ff5555;
    display: none;
}

.center-wrap-profile .right-side {
    height: fit-content;
    position: sticky;
    top: 0;
}

/* === Responsive Design === */
@media (max-width: 968px) {
    .center-wrap-profile .right-side {
        position: unset;
    }

    .center-wrap {
        padding: 0 0 20px;
    }

    .center-wrap-profile {
        flex-direction: column-reverse;
    }

    .left-side,
    .right-side {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }


    .skin-title {
        font-size: 12px;
    }

    .btn-action {
        font-size: 9px;
    }

    .animation-controls {
        right: 8px;
    }

    .animation-controls button {
        padding: 6px 10px;
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    div#totem-canvas-container canvas {
        max-width: 60%;
    }

    body .color_box {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }

    .cust_title {
        font-size: 16px;
    }

    .related-posts-wrapper {
        padding: 0;
    }

    .slider-nav-btn {
        display: none;
    }

    .related-posts-container {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-columns: unset;
        overflow-x: visible;
        grid-gap: 10px;
    }

    .related-posts-title {
        font-size: 12px;
    }

    .related-post-card {
        aspect-ratio: 3 / 4;
    }

    .related-post-title {
        font-size: 10px;
    }

    .related-post-thumbnail {
        padding: 6px;
    }

    .mc-pagination-wrapper {
        gap: 6px;
        padding: 15px 10px;
    }

    .mc-pagination-wrapper a,
    .mc-pagination-wrapper span {
        padding: 10px 12px;
        min-width: 40px;
        font-size: 10px;
    }

    .mc-pagination-wrapper .prev,
    .mc-pagination-wrapper .next {
        font-size: 14px;
        padding: 10px 15px;
    }

    .tooltip {
        min-width: 180px;
        font-size: 8px;
    }

    .tooltip-input {
        font-size: 8px;
        padding: 6px;
    }

    .copy-btn {
        font-size: 9px;
        padding: 8px;
    }

    .success-message {
        font-size: 9px;
        padding: 12px 20px;
    }

    /* Column Reset for Tablet/Mobile */
    .left-side,
    .right-side {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .related-posts-title {
        font-size: 10px;
    }

    .related-post-title {
        font-size: 10px;
        -webkit-line-clamp: 2;
    }

    .related-post-content {
        padding: 8px;
    }

    .related-posts-container {
        grid-gap: 8px !important;
        grid-template-columns: 1fr 1fr !important;
    }

    .related-post-thumbnail {
        padding: 5px;
    }

    .mc-pagination-wrapper {
        gap: 4px;
        padding: 10px 5px;
        flex-wrap: wrap;
    }

    .mc-pagination-wrapper a,
    .mc-pagination-wrapper span {
        padding: 8px 10px;
        min-width: 36px;
        font-size: 9px;
    }

    .mc-pagination-wrapper .prev,
    .mc-pagination-wrapper .next {
        font-size: 12px;
        padding: 8px 12px;
    }

    .skin-title {
        font-size: 10px;
    }

    .btn-action {
        font-size: 8px;
    }

    .btn-action .btn-inner {
        padding: 12px 8px;
    }

    .color_box a img {
        width: 40px;
        height: 40px;
    }

    .tooltip {
        min-width: 150px;
        font-size: 7px;
    }

    .tooltip-input {
        font-size: 7px;
    }

    .copy-btn {
        font-size: 8px;
    }
}

/* === Share Button Shortcode === */
.mc-share-container {
    position: relative;
    display: inline-block;
    font-family: 'Press Start 2P', cursive;
}

.mc-share-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, #5a8fe6 0%, #4a7bdc 50%, #2f5ba8 100%);
    color: white;
    border: 3px solid var(--mc-black);
    padding: 10px 16px;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    box-shadow: inset 0 -4px 0 #1e3d7a, inset 2px 2px 0 rgba(255, 255, 255, 0.25), inset -2px -2px 0 rgba(0, 0, 0, 0.4), 0 6px 0 rgba(0, 0, 0, 0.3);
    transition: all 0.1s;
}

.mc-share-btn:hover {
    background: linear-gradient(180deg, #6a9ff0 0%, #5a8be8 50%, #3f6bb8 100%);
    transform: translateY(-2px);
}

.mc-share-btn:active {
    transform: translateY(2px);
    box-shadow: inset 0 -2px 0 #1e3d7a, inset 2px 2px 0 rgba(255, 255, 255, 0.25), inset -2px -2px 0 rgba(0, 0, 0, 0.4), 0 2px 0 rgba(0, 0, 0, 0.3);
}

.mc-share-icon {
    width: 16px;
    height: 16px;
    display: flex;
}

.mc-share-icon svg {
    width: 100%;
    height: 100%;
}

/* Share Menu */
.mc-share-menu {
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: #c6c6c6;
    border: 4px solid var(--mc-black);
    padding: 4px;
    z-index: 1000;
    min-width: 280px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.mc-share-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
    pointer-events: auto;
}

.mc-share-menu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid var(--mc-black);
}

.mc-share-menu::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #c6c6c6;
}

.mc-share-menu-inner {
    background: #c6c6c6;
    padding: 12px;
    position: relative;
    border: 2px solid #fff;
    box-shadow: inset -2px -2px 0 #7a7a7a;
}

.mc-share-close {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #e64a3c;
    border: 2px solid var(--mc-black);
    color: white;
    width: 24px;
    height: 24px;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.3), inset -2px -2px 0 rgba(0, 0, 0, 0.3);
}

.mc-share-close:hover {
    background: #f05545;
}

.mc-share-title {
    margin: 0 0 12px 0;
    font-size: 10px;
    text-align: center;
    color: #333;
}

.mc-share-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mc-share-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #fff;
    border: 2px solid var(--mc-black);
    text-decoration: none;
    color: #333;
    font-size: 10px;
    transition: all 0.1s;
    box-shadow: inset -2px -2px 0 #ddd;
}

.mc-share-option:hover {
    background: #f0f0f0;
    transform: translateY(-1px);
    box-shadow: inset -2px -2px 0 #ccc, 0 2px 0 rgba(0, 0, 0, 0.2);
}

.mc-share-option:active {
    transform: translateY(1px);
    box-shadow: inset 2px 2px 0 #ccc;
}

.mc-share-option-icon {
    width: 16px;
    height: 16px;
    display: flex;
}

.mc-share-option-icon svg {
    width: 100%;
    height: 100%;
}

/* Platform Colors */
.mc-share-facebook .mc-share-option-icon {
    color: #1877f2;
}

.mc-share-twitter .mc-share-option-icon {
    color: #1da1f2;
}

.mc-share-reddit .mc-share-option-icon {
    color: #ff4500;
}

.mc-share-whatsapp .mc-share-option-icon {
    color: #25d366;
}

.mc-share-telegram .mc-share-option-icon {
    color: #0088cc;
}

.mc-share-linkedin .mc-share-option-icon {
    color: #0a66c2;
}

.mc-share-pinterest .mc-share-option-icon {
    color: #bd081c;
}

.mc-share-email .mc-share-option-icon {
    color: #ea4335;
}

.mc-share-copy .mc-share-option-icon {
    color: #555;
}

/* Notification */
.mc-share-notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    z-index: 2000;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.mc-share-notification.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* === Comments Section Updates === */
.mc-comments-section {
    margin: 30px auto 50px;
    max-width: 700px;
    background: #7a7a7a;
    padding: 20px 10px;
    border: 4px solid var(--mc-black);
    box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.15), inset -3px -3px 0 rgba(0, 0, 0, 0.6), 0 8px 0 rgba(0, 0, 0, 0.3);
}

.mc-comments-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    color: #fff;
    margin-bottom: 20px;
    text-align: center;
}

.mc-chat-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mc-chat-item {
    display: flex;
    gap: 15px;
}

.mc-chat-bubble {
    background: #c6c6c6;
    border: 3px solid var(--mc-black);
    padding: 8px 15px;
    position: relative;
    width: 100%;
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.5), inset -2px -2px 0 rgba(0, 0, 0, 0.3), 4px 4px 0 rgba(0, 0, 0, 0.2);
    display: flex;
    gap: 10px;
}

.mc-chat-avatar img {
    width: 30px;
    height: 30px;
    border: 2px solid var(--mc-black);
    image-rendering: pixelated;
    background: #7a7a7a;
}

.mc-chat-content {
    flex: 1;
}

.mc-chat-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 10px;
    font-family: 'Press Start 2P', cursive;
    color: #333;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 5px;
}

.mc-chat-author {
    color: var(--mc-blue-dark);
}

.mc-chat-date {
    color: #666;
}

.mc-chat-text {
    font-size: 12px;
    line-height: 1.5;
    color: #1e1e1f;
    word-break: break-word;
}

/* Comment Form */
.mc-comment-form-wrapper {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    margin-bottom: 20px;
}

.mc-comment-form textarea {
    width: 100%;
    padding: 12px;
    border: 3px solid var(--mc-black);
    background: #e0e0e0;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: #333;
    margin-bottom: 10px;
    min-height: 80px;
    resize: vertical;
    box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.mc-comment-form textarea:focus {
    background: #fff;
    outline: none;
}

.mc-comment-form .mc-btn {
    width: auto;
    display: inline-block;
    padding: 10px 20px;
    font-size: 10px;
}

/* === Profile & Auth Pages === */
.mc-profile-container,
.mc-auth-container {
    background: #7a7a7a;
    padding: 30px;
    border: 4px solid var(--mc-black);
    box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.15), inset -3px -3px 0 rgba(0, 0, 0, 0.6), 0 8px 0 rgba(0, 0, 0, 0.3);
    max-width: 800px;
    margin: 0 auto;
    color: #fff;
}

.mc-profile-header {
    display: flex;
    gap: 20px;
    border-bottom: 4px solid var(--mc-black);
    padding-bottom: 20px;
    margin-bottom: 20px;
    align-items: center;
}

.mc-profile-avatar img {
    width: 80px;
    height: 80px;
    border: 4px solid var(--mc-black);
    background: #555;
    image-rendering: pixelated;
}

.mc-profile-info h2 {
    font-family: 'Press Start 2P', cursive;
    font-size: 20px;
    margin: 0 0 10px 0;
}

.mc-profile-stats {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: #ddd;
}

.mc-profile-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.mc-tab-btn {
    background: #555;
    border: 3px solid var(--mc-black);
    color: #fff;
    padding: 10px 15px;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    cursor: pointer;
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.1);
}

.mc-tab-btn.active {
    background: var(--mc-blue);
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.3);
}

.mc-form-group {
    margin-bottom: 15px;
}

.mc-form-group label {
    display: block;
    margin-bottom: 8px;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: #fff
}

.mc-form-group input[type="text"],
.mc-form-group input[type="email"],
.mc-form-group input[type="password"],
.mc-form-group textarea {
    width: 100%;
    padding: 12px;
    border: 3px solid var(--mc-black);
    background: #e0e0e0;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: #333;
    box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.mc-form-group input:focus,
.mc-form-group textarea:focus {
    background: #fff;
    outline: none;
}

/* Auth Links */
.mc-auth-links {
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
}

.mc-auth-links a {
    color: var(--mc-gold);
    text-decoration: none;
}

.mc-auth-links a:hover {
    text-decoration: underline;
    color: #fff;
}

/* Login/Register Toggle */
.mc-auth-toggle {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.mc-auth-toggle button {
    background: transparent;
    border: none;
    color: #aaa;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    cursor: pointer;
    padding-bottom: 5px;
    border-bottom: 3px solid transparent;
}

.mc-auth-toggle button.active {
    color: #fff;
    border-bottom-color: var(--mc-gold);
}

/* === Modal Styles === */
.mc-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.mc-modal-content {
    background: #7a7a7a;
    border: 4px solid var(--mc-black);
    box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.15), inset -3px -3px 0 rgba(0, 0, 0, 0.6), 0 8px 0 rgba(0, 0, 0, 0.3);
    padding: 30px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    color: #fff;
}

.mc-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #fff;
}

.mc-modal-title {
    margin: 0 0 20px;
    font-size: 20px;
    text-align: center;
    font-family: 'Press Start 2P', cursive;
}

.mc-avatar-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 4px solid var(--mc-black);
    padding-bottom: 10px;
}

.mc-tab-content {
    display: none;
}

.mc-preview-box {
    text-align: center;
    margin: 20px 0;
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border: 2px dashed rgba(255, 255, 255, 0.2);
}

.mc-preview-canvas {
    border-radius: 0;
    border: 4px solid var(--mc-black);
    image-rendering: pixelated;
    background: #7a7a7a;
}

/* Account Details */
.mc-account-details {
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid var(--mc-black);
    box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.mc-account-title {
    margin-top: 0;
    font-size: 16px;
    border-bottom: 2px solid var(--mc-black);
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-family: 'Press Start 2P', cursive;
}

.mc-account-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.mc-account-label {
    display: block;
    color: #ddd;
    font-size: 10px;
    text-transform: uppercase;
    font-family: 'Press Start 2P', cursive;
    margin-bottom: 5px;
}

.mc-account-value {
    font-size: 14px;
    color: #fff;
}

/* Bio Section */
.mc-bio-section h3 {
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    margin-bottom: 15px;
}

.mc-bio-display {
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid var(--mc-black);
    min-height: 100px;
    line-height: 1.6;
    color: #fff;
    box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.mc-settings-section {
    padding-bottom: 20px;
    border-top: 2px dashed rgba(255, 255, 255, 0.2);
}

.mc-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 12px;
}

/* Auth Form Specifics */
.mc-auth-container h2 {
    font-family: 'Press Start 2P', cursive;
    font-size: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.mc-switch-link {
    display: block;
    margin-top: 20px;
    text-align: center;
    color: var(--mc-gold);
    text-decoration: none;
    font-size: 12px;
}

.mc-switch-link:hover {
    text-decoration: underline;
    color: #fff;
}

.mc-message {
    padding: 10px;
    margin-top: 10px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    font-size: 12px;
    text-align: center;
}

.mc-message.mc-error {
    background: rgba(199, 50, 50, 0.2);
    border-color: var(--mc-red);
    color: #ffcccc;
}

.mc-message.mc-success {
    background: rgba(60, 133, 39, 0.2);
    border-color: var(--mc-green);
    color: #ccffcc;
}

.mc-hidden {
    display: none;
}

/* Users Directory */
.mc-users-directory {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.mc-users-directory h2 {
    text-align: center;
    margin-bottom: 40px;
    font-family: 'Press Start 2P', cursive;
    font-size: 20px;
    color: #fff;
}

.mc-users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 25px;
}

.mc-user-card {
    display: block;
    background: #7a7a7a;
    border: 4px solid var(--mc-black);
    box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.15), inset -3px -3px 0 rgba(0, 0, 0, 0.6), 0 8px 0 rgba(0, 0, 0, 0.3);
    padding: 30px 20px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: all 0.1s ease;
    cursor: pointer;
}

.mc-user-card:hover {
    transform: translateY(-4px);
    box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.15), inset -3px -3px 0 rgba(0, 0, 0, 0.6), 0 12px 0 rgba(0, 0, 0, 0.3);
}

.mc-user-card img {
    width: 100px;
    height: 100px;
    border-radius: 0;
    margin: 0 auto 15px;
    border: 4px solid var(--mc-black);
    display: block;
    image-rendering: pixelated;
    background: #555;
}

.mc-user-card h3 {
    margin: 0;
    font-size: 14px;
    font-family: 'Press Start 2P', cursive;
    color: #fff;
}

.mc-pagination {
    margin-top: 50px;
    text-align: center;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
}

.mc-pagination a,
.mc-pagination span {
    display: inline-block;
    padding: 10px 15px;
    margin: 0 5px;
    background: #555;
    border: 3px solid var(--mc-black);
    color: #fff;
    text-decoration: none;
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.1);
}

.mc-pagination a:hover,
.mc-pagination span.current {
    background: var(--mc-blue);
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.3);
}

.social_post_buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    bottom: 10px;
    width: 96%;
    left: 2%;
}

.social_post_buttons .mc-share-container {
    margin: 0;
}

.mc-vote-status {
    display: none;
}

.mc-vote-status {
    position: absolute;
    bottom: 100%;
    left: 0;
    font-size: 10px;
    background: #7a7a7a;
    color: #fff;
    padding: 6px;
    margin-top: 5px;
}


.mc-vote-container button:hover~.mc-vote-status {
    display: block !important;
}

@media (max-width:700px) {
    .social_post_buttons {
        display: grid;
        align-content: space-between;
        height: 94%;
        width: max-content;
    }

    .social_post_buttons .mc-vote-container {
        display: grid;
        gap: 8px;
        width: fit-content;
    }

    .social_post_buttons .mc-vote-container button,
    .social_post_buttons .mc-vote-container a {
        padding: 4px 8px;
    }

    .social_post_buttons .mc-share-btn {
        padding: 6px 10px 8px;
        display: flex;
        flex-direction: column;
    }

    .social_post_buttons .mc-share-btn span {
        font-size: 8px;
        writing-mode: vertical-rl;
        text-orientation: upright;
        letter-spacing: 1.2px;
    }
}

.mc-post-author-info {
    padding: 8px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid var(--mc-black);
}

.author_dp_title {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    width: 100%;
}

button#mc-post-follow-btn {
    max-width: fit-content;
    margin: 0 0 0 auto;
}

button#mc-post-follow-btn span {
    padding: 8px;
}

.mc-post-author-avatar {
    width: 50px;
    height: 50px;
    border: 2px solid var(--mc-black);
    transition: transform 0.2s;
}

.mc-post-author-avatar:hover {
    transform: scale(1.1);
}

.mc-post-author-name {
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: 12px;
    text-decoration: none;
    display: block;
    transition: color 0.2s;
}

.user_foll {
    display: grid;
    gap: 6px;
    margin-bottom: 4px;
}

.mc-post-author-name:hover {
    color: #4a90e2;
}

.mc-post-author-followers {
    color: #ffffff;
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    line-height: 1;
    display: flex;
    align-items: flex-end;
}

/* === Uploaded Skins Grid Styles === */
.mc-uploaded-skin-card {
    position: relative;
    display: inline-block;
}

.mc-skin-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    z-index: 5;
}

.mc-skin-actions .btn-action {
    width: auto;
    padding: 0;
    min-width: 35px;
}

.mc-skin-actions .btn-action .btn-inner {
    padding: 6px 8px;
    font-size: 14px;
}

.mc-skin-actions .mc-edit-skin-btn .btn-inner {
    background: linear-gradient(180deg, #5a8fe6 0%, #4a7bdc 50%, #2f5ba8 100%);
}

.mc-skin-actions .mc-delete-skin-btn .btn-inner {
    background: linear-gradient(180deg, #e64a3c 0%, #c73232 50%, #a02828 100%);
}

/* Edit Skin Popup */
.mc-edit-skin-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #7a7a7a;
    border: 4px solid #000;
    box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.15), inset -3px -3px 0 rgba(0, 0, 0, 0.6), 0 8px 0 rgba(0, 0, 0, 0.3);
    padding: 25px;
    z-index: 10001;
    min-width: 500px;
    max-width: 90%;
    font-family: 'Press Start 2P', cursive;
    max-height: 80vh;
    overflow-y: auto;
}

.mc-edit-skin-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
}

.mc-edit-popup-title {
    color: #fff;
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
}

.mc-edit-popup-form .form-group {
    margin-bottom: 20px;
}

.mc-edit-popup-form label {
    display: block;
    color: #fff;
    font-size: 10px;
    margin-bottom: 8px;
}

.mc-edit-popup-form .read-only {
    color: #999;
}

.mc-edit-popup-form input[type="text"],
.mc-edit-popup-form textarea {
    width: 100%;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #555;
    border-radius: 4px;
    color: #fff !important;
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    box-sizing: border-box;
}

.mc-edit-popup-form input[readonly] {
    background: rgba(0, 0, 0, 0.5);
    color: #888 !important;
    cursor: not-allowed;
}

.mc-edit-popup-form textarea {
    min-height: 100px;
    resize: vertical;
}

.mc-edit-popup-form .help-text {
    font-size: 8px;
    color: #aaa;
    margin-top: 5px;
}

.mc-edit-popup-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.mc-edit-popup-buttons .btn-action {
    flex: 1;
}

/* Delete Confirmation Popup */
.mc-delete-confirm-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to bottom, #3a4a5c, #2a3a4c);
    border: 3px solid #555;
    border-radius: 8px;
    padding: 25px;
    z-index: 10001;
    min-width: 400px;
    max-width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
    font-family: 'Press Start 2P', cursive;
}

.mc-delete-confirm-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
}

.mc-delete-confirm-content {
    color: #fff;
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: center;
}

.mc-delete-confirm-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

@media (max-width: 768px) {
    .mc-edit-skin-popup {
        min-width: 90%;
        padding: 20px;
    }

    .mc-delete-confirm-popup {
        min-width: 90%;
    }

    .mc-skin-actions {
        top: 4px;
        right: 4px;
        gap: 4px;
    }

    .mc-skin-actions .btn-action {
        min-width: 30px;
    }

    .mc-skin-actions .btn-action .btn-inner {
        padding: 4px 6px;
        font-size: 12px;
    }
}

.mc-upload-page {
    max-width: 800px;
    margin: 40px auto;
    font-family: 'Press Start 2P', cursive;
    background: #7a7a7a;
    padding: 20PX;
    border: 4px solid var(--mc-black);
    box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.15), inset -3px -3px 0 rgba(0, 0, 0, 0.6), 0 8px 0 rgba(0, 0, 0, 0.3);
}

.mc-upload-title {
    font-size: 20px;
    color: #4a90e2;
    margin-bottom: 30px;
    text-align: center;
}

.mc-upload-form .form-group {
    margin-bottom: 25px;
}

.mc-upload-form label {
    display: block;
    color: #fff;
    font-size: 10px;
    margin-bottom: 10px;
}

.mc-upload-form label .required {
    color: #e74c3c;
}

.mc-upload-form label .char-counter {
    float: right;
    color: #888;
    font-size: 8px;
}

.mc-upload-form input[type="text"],
.mc-upload-form textarea {
    width: 100%;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #555;
    border-radius: 4px;
    color: #fff !important;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    box-sizing: border-box;
}

.mc-upload-form textarea {
    resize: vertical;
    min-height: 120px;
}

.mc-upload-form input[type="text"]:focus,
.mc-upload-form textarea:focus {
    outline: none;
    border-color: #4a90e2;
}

.mc-upload-form .help-text {
    font-size: 8px;
    color: #fff;
    margin-top: 5px;
}

.mc-file-upload {
    position: relative;
    margin-top: 10px;
}

.mc-file-input {
    display: none;
}

.mc-file-name {
    display: inline-block;
    margin-left: 15px;
    color: #FFFFFF;
    font-size: 8px;
}

.mc-skin-preview {
    margin-top: 15px;
    text-align: center;
    display: none;
}

.mc-skin-preview img {
    max-width: 200px;
    image-rendering: pixelated;
    border: 2px solid #555;
}

.skin-dimensions {
    color: #2ecc71;
    font-size: 10px;
    margin-top: 10px;
}

.mc-upload-buttons {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.mc-upload-buttons>.btn-action {
    flex: 1;
}

/* Upload Rules Notice */
.mc-upload-rules {
    background: linear-gradient(to bottom, rgba(231, 76, 60, 0.2), rgba(192, 57, 43, 0.2));
    border: 3px solid #e74c3c;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.1), inset -2px -2px 0 rgba(0, 0, 0, 0.3), 0 4px 0 rgba(0, 0, 0, 0.4);
}

.mc-rules-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(231, 76, 60, 0.5);
}

.mc-rules-icon {
    font-size: 24px;
}

.mc-rules-header h3 {
    margin: 0;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
}

.mc-rules-list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}

.mc-rules-list li {
    padding: 8px 0 8px 20px;
    font-size: 9px;
    line-height: 1.6;
    color: #fff;
    position: relative;
}

.mc-rules-list li:before {
    content: "▸";
    position: absolute;
    left: 0;
    color: #e74c3c;
    font-size: 12px;
}

.mc-rules-list li strong {
    color: #ffcccc;
}

.mc-rules-warning {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid #c73232;
    padding: 12px;
    text-align: center;
    font-size: 10px;
    color: #fff;
    box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.mc-rules-warning strong {
    color: #ffcc00;
    font-size: 11px;
}

/* Message Popup Styles - matching existing standards */
.mc-message-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to bottom, #3a4a5c, #2a3a4c);
    border: 3px solid #555;
    border-radius: 8px;
    padding: 25px;
    z-index: 10001;
    min-width: 350px;
    max-width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
    font-family: 'Press Start 2P', cursive;
}

.mc-message-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
}

.mc-message-popup-content {
    color: #fff;
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: center;
}

.mc-message-popup-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.mc-upload-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 40px;
    background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
    border: 2px solid #444;
    border-radius: 8px;
    text-align: center;
}

.mc-login-required {
    color: #fff;
    font-family: 'Press Start 2P', cursive;
}

.mc-login-required h2 {
    font-size: 18px;
    margin-bottom: 20px;
    color: #4a90e2;
}

.mc-login-required p {
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 30px;
    color: #ccc;
}

.mc-login-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

/* === Uploaded Skins Grid Styles === */
.mc-uploaded-skin-card {
    position: relative;
    display: inline-block;
}

.mc-skin-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    z-index: 5;
}

.mc-skin-actions .btn-action {
    width: auto;
    padding: 0;
    min-width: 35px;
}

.mc-skin-actions .btn-action .btn-inner {
    padding: 6px 8px;
    font-size: 14px;
}

.mc-skin-actions .mc-edit-skin-btn .btn-inner {
    background: linear-gradient(180deg, #5a8fe6 0%, #4a7bdc 50%, #2f5ba8 100%);
}

.mc-skin-actions .mc-delete-skin-btn .btn-inner {
    background: linear-gradient(180deg, #e64a3c 0%, #c73232 50%, #a02828 100%);
}

/* Edit Skin Popup */
.mc-edit-skin-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #7a7a7a;
    border: 4px solid #000;
    box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.15), inset -3px -3px 0 rgba(0, 0, 0, 0.6), 0 8px 0 rgba(0, 0, 0, 0.3);
    padding: 25px;
    z-index: 10001;
    min-width: 500px;
    max-width: 90%;
    font-family: 'Press Start 2P', cursive;
    max-height: 80vh;
    overflow-y: auto;
}

.mc-edit-skin-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
}

.mc-edit-popup-title {
    color: #fff;
    font-size: 14px;
    margin-bottom: 20px;
    text-align: center;
}

.mc-edit-popup-form .form-group {
    margin-bottom: 20px;
}

.mc-edit-popup-form label {
    display: block;
    color: #fff;
    font-size: 10px;
    margin-bottom: 8px;
}

.mc-edit-popup-form .read-only {
    color: #999;
}

.mc-edit-popup-form input[type="text"],
.mc-edit-popup-form textarea {
    width: 100%;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #555;
    border-radius: 4px;
    color: #fff !important;
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    box-sizing: border-box;
}

.mc-edit-popup-form input[readonly] {
    background: rgba(0, 0, 0, 0.5);
    color: #888 !important;
    cursor: not-allowed;
}

.mc-edit-popup-form textarea {
    min-height: 100px;
    resize: vertical;
}

.mc-edit-popup-form .help-text {
    font-size: 8px;
    color: #aaa;
    margin-top: 5px;
}

.mc-edit-popup-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.mc-edit-popup-buttons .btn-action {
    flex: 1;
}

/* Delete Confirmation Popup */
.mc-delete-confirm-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to bottom, #3a4a5c, #2a3a4c);
    border: 3px solid #555;
    border-radius: 8px;
    padding: 25px;
    z-index: 10001;
    min-width: 400px;
    max-width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
    font-family: 'Press Start 2P', cursive;
}

.mc-delete-confirm-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
}

.mc-delete-confirm-content {
    color: #fff;
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: center;
}

.mc-delete-confirm-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

div#mc-profile-dynamic-content {
    text-align: center;
    width: 100%;
}

@media (max-width: 768px) {
    .mc-edit-skin-popup {
        min-width: 90%;
        padding: 20px;
    }

    .mc-delete-confirm-popup {
        min-width: 90%;
    }

    .mc-skin-actions {
        top: 4px;
        right: 4px;
        gap: 4px;
    }

    .mc-skin-actions .btn-action {
        min-width: 30px;
    }

    .mc-skin-actions .btn-action .btn-inner {
        padding: 4px 6px;
        font-size: 12px;
    }
}

/* ========================================
   UNIFIED POPUP/MODAL SYSTEM
   Use these classes for all popups across the plugin
   ======================================== */

/* Popup Overlay - Full screen dark background */
.mc-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
}

.mc-popup-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Popup Container - The main popup box */
.mc-popup {
    background: linear-gradient(135deg, #1e1e1e, #2a2a2a);
    border: 2px solid #4a90e2;
    border-radius: 8px;
    padding: 30px;
    max-width: 400px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    font-family: 'Press Start 2P', cursive;
    position: relative;
}

/* Popup Title */
.mc-popup-title {
    color: #fff;
    font-size: 16px;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Popup Message/Content */
.mc-popup-message {
    color: #fff;
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Popup Buttons Container */
.mc-popup-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.mc-popup-buttons .btn-action {
    flex: 1;
    min-width: 120px;
}

/* Toast/Notification Messages */
.mc-toast-message {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 25px;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    font-family: 'Press Start 2P', cursive;
    z-index: 10000;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    max-width: 350px;
}

.mc-toast-message.mc-toast-success {
    background: linear-gradient(135deg, #28a745, #20c997);
    border: 1px solid #28a745;
}

.mc-toast-message.mc-toast-error {
    background: linear-gradient(135deg, #dc3545, #c82333);
    border: 1px solid #dc3545;
}

.mc-toast-message.mc-toast-info {
    background: linear-gradient(135deg, #17a2b8, #138496);
    border: 1px solid #17a2b8;
}

/* Large Popup for forms/content */
.mc-popup-large {
    max-width: 600px;
}

/* Extra Large Popup */
.mc-popup-xlarge {
    max-width: 800px;
}

/* Popup Close Button */
.mc-popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #e64a3c;
    border: 2px solid var(--mc-black);
    color: white;
    width: 28px;
    height: 28px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.1s;
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.3), inset -2px -2px 0 rgba(0, 0, 0, 0.3);
}

.mc-popup-close:hover {
    background: #f05545;
    transform: scale(1.1);
}

.mc-popup-close:active {
    transform: scale(0.95);
}

/* Responsive Design for Popups */
@media (max-width: 768px) {
    .mc-popup {
        padding: 25px;
        max-width: 95%;
    }

    .mc-popup-title {
        font-size: 14px;
    }

    .mc-popup-message {
        font-size: 11px;
    }

    .mc-popup-buttons {
        flex-direction: column;
    }

    .mc-popup-buttons .btn-action {
        width: 100%;
    }

    .mc-toast-message {
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .mc-popup {
        padding: 20px;
    }

    .mc-popup-title {
        font-size: 12px;
        margin-bottom: 15px;
    }

    .mc-popup-message {
        font-size: 10px;
    }

    .mc-toast-message {
        font-size: 10px;
        padding: 12px 20px;
    }
}