* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #0f0f12;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*图片容器&,character的父级*/
.character-frame {
    width: 90vmin;             /* 每边 90vmin，正方形区域(随视口缩放) */
    height: 90vmin;            /* 同上 */
    display: flex;             /* 开启 flex，子元素作为 flex item 参与居中 */
    justify-content: center;   /* 主轴(水平)居中角色图 */
    align-items: center;       /* 交叉轴(垂直)居中角色图 */
}

/*图片*/
.character {
    display: block;            /* 块级元素，独占一行，宽高可生效 */
    width: 100%;               /* 宽度撑满父容器 */
    height: 100%;              /* 高度撑满父容器 */
    object-fit: contain;       /* 等比缩放完整显示，不变形，多余部分留白 */
    user-select: none;         /* 禁止选中图片，避免拖动时被选中 */
    -webkit-user-drag: none;   /* (Safari/Chrome) 禁止拖拽图片 */
    cursor: pointer;           /* 悬停显示手型，提示可点击 */
    opacity: 1;                /* 初始完全不透明(0=透明 1=不透明)，配合过渡做淡入淡出 */
    transition: opacity 0.40s ease;   /* 透明度在0.4秒内平滑变化，产生淡入淡出效果 */
}

.character.fading {
    opacity: 0;                         /* 淡出状态(点击后隐藏) */
}

/*精二图太小,硬编码变大*/
.character[src*="https://bu.dusays.com/2026/08/07/6a7536b3138f6.png"] {  /* 匹配你想放大的那张图的 URL 片段 */
    transform: scale(1.50);
}