html, body {
    font-family: -apple-system, /* 苹果系统默认字体 */
    BlinkMacSystemFont, /* macOS Chrome/Safari 默认字体 */
    "Segoe UI", /* Windows 系统默认字体 */
    Roboto, /* Google 默认字体 */
    "Helvetica Neue", Arial, /* 通用英文字体 */
    "Noto Sans", /* Google 提供的免费字体，支持多种语言 */
    "Noto Sans CJK SC", /* 简体中文 */
    "Source Han Sans SC", /* 思源黑体，简体中文 */
    "PingFang SC", /* 苹方字体，简体中文 */
    "Microsoft YaHei", /* 微软雅黑，简体中文 */
    sans-serif; /* 通用无衬线字体 */
}

.white-text-outline {
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
    letter-spacing: 2px !important;
    font-family: 'Lucida Console' !important;
    font-weight: 1000 !important;
}

.black-text-outline {
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
    letter-spacing: 2px !important;
/*    font-family: 'Lucida Console' !important;*/
    font-weight: 1000 !important;
}

/* 核心比例容器 */
.aspect-ratio-box {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 计算值 (9/16=0.5625) */
    border-radius: 8px;
    overflow: hidden;
    background: var(--mud-palette-background-grey);
}

/* 内容绝对填充 */
.aspect-ratio-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* 帧交互优化 */
.embedded-frame {
    width: 100%;
    height: 100%;
    border: none;
    transition: transform 0.3s;
}

    .embedded-frame:hover {
        transform: scale(1.02);
    }

@@media (max-width: 600px) {
    .aspect-ratio-box {
        border-radius: 0;
    }
}

/* 禁用状态样式 */
.disabled-overlay {
    background: rgba(255, 255, 255, 0.7) !important;
    cursor: not-allowed !important;
}

/* 禁用图片效果 */
.responsive-image[style*="grayscale"] {
    pointer-events: none;
}

/* 容器样式 */
.image-container {
    position: relative;
    width: 100%;
    max-width: 220px;
    transition: all 0.3s ease;
}

/* 图片响应式设置 */
.responsive-image {
    width: 100%;
    height: auto;
    /*aspect-ratio: 1;*/
    object-fit: contain;
}

/* 选中状态 */
.selected-container {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 12px rgba(63, 81, 181, 0.2));
}

/* 调整选中状态优先级 */
.image-container.selected-container {
    z-index: 1;
}

/* 覆盖层效果 */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: rgba(0,0,0,0);
    transition: background 0.3s ease;
}

.active-overlay {
    background: rgba(63, 81, 181, 0.1);
}

/* 移动端适配 */
@media (max-width: 800px) {
    .image-container {
        max-width: 180px;
    }

    .responsive-image {
        border-radius: 8px;
    }
}