/* 基础重置与全局设定 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #0B11A4;
    font-family: 'DotGothic16', sans-serif;
    color: #000000;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
}

/* ================= 语言切换按钮 ================= */
.lang-switch {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 14px;
    color: #D9D9D9;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s;
    z-index: 100;
}

.lang-switch:hover {
    opacity: 0.7;
}

.lang-switch.active-en span.en { text-decoration: underline; text-underline-offset: 4px; }
.lang-switch.active-jp span.jp { text-decoration: underline; text-underline-offset: 4px; }

/* ================= 包装容器与外部悬浮元素 ================= */
.wrapper {
    position: relative;
    width: 353px;
    margin-top: 200px; /* 为上方突出的标题和动图留出空间 */
    margin-bottom: 50px;
}

/* 大标题：火事 */
.main-title {
    position: absolute;
    top: -73px;
    left: 29px;
    font-size: 48px;
    color: #D9D9D9;
    font-weight: normal;
    line-height: 1;
    z-index: 5;
}

/* Ruby 注音调整 */
.main-title ruby { ruby-align: center; }
.main-title rt { font-size: 14px; color: #D9D9D9; transform: translateY(-5px); }
p ruby { ruby-align: center; }
p rt { font-size: 10px; transform: translateY(-2px); }


/* GIF 动图样式 */
.gif-image {
    position: absolute;
    top: -195px;
    left: 101px;
    width: 331px;
    height: 331px;
    z-index: 10;
    object-fit: contain; /* 保证图片完整显示不变形 */
    pointer-events: none; /* 如果不需要点击它，可以加上这个防止遮挡 */
}

/* 气泡外层容器 */
.speech-bubble {
    position: absolute;
    top: -150px;
    left: 142px;
    width: 69px;
    height: 65px;
    z-index: 15;
}

/* 气泡 SVG 底图 */
.bubble-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; 
    /* 强制 SVG 填满容器并保持比例 */
    display: block;
}

/* 气泡内的文字 */
.bubble-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 绝对居中魔法 */
    width: 100%;
    font-family: 'DotGothic16', sans-serif;
    font-size: 10px;
    line-height: 8px;
    color: #000000;
    text-align: center;
    margin-top: -4px; /* 稍微往上提一点，避开气泡右下角的小尾巴 */
}

/* ================= 中间的主卡片 (Frame 1) ================= */
.frame-1 {
    background-color: #E1E1E1;
    width: 353px;
    min-height: 500px;
    border-radius: 5px;
    box-shadow: 
        inset 0 0 0 1px #000000, 
        inset 3px 3px 0px rgba(255, 255, 255, 0.8), 
        3px 3px 2px rgba(0, 0, 0, 0.25);
    padding: 30px 31px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1; /* 置于动图下方 */
}

/* 二级标题 (ABOUT... / CONTACTS) */
h2 {
    font-size: 32px; 
    font-weight: normal;
    line-height: 1;
}

/* 分割线（紧贴标题下方） */
.divider {
    border: none;
    border-top: 1px solid #6E6E6E;
    width: 291px;
    margin: 4px 0 16px 0; /* 控制与标题和正文的间距 */
}

/* 正文小字 */
.about-text {
    font-size: 14px;
    line-height: 1.5;
    color: #000000;
    text-align: left;
}

/* ================= 社交链接网格区域 ================= */
.contacts-section {
    margin-top: 40px; /* About 和 Contacts 之间的间距 */
}

.contacts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列等宽网格 */
    gap: 20px 10px; /* 行间距20px，列间距10px */
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.contact-item:hover {
    opacity: 0.6;
}

.icon {
    width: 24px;
    height: 24px;
    fill: #000000;
    flex-shrink: 0;
    margin-top: 2px; /* 图标与右侧文字第一行对齐微调 */
}

/* 文本容器 */
.contact-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 平台名称小字 */
.platform {
    font-size: 10px;
    color: #000000;
    line-height: 1;
}

/* 用户名大字（加粗） */
.username {
    font-size: 12px;
    color: #000000;
    font-weight: bold;
    line-height: 1.1;
}

/* 特殊处理长邮箱换行 */
.email-wrap {
    word-break: break-all;
}