/* 字体定义 */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');

/* 自定义字体 - 使用系统字体作为fallback */
:root {
    --font-broadway: 'Broadway', serif;
    --font-arial: Arial, sans-serif;
    --font-chinese: '等线', 'Microsoft YaHei', 'SimSun', sans-serif;
    --font-playbill: 'Playfair Display', 'Playbill', serif;
    
    --color-black: #000000;
    --color-yellow: #fdec00;
    --color-maroon: #800020;
    --color-red: #FF0000;
}

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

body {
    background-color: var(--color-black);
    color: var(--color-yellow);
    font-family: var(--font-arial);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Section 1: Main Poster */
.poster-section {
    background-color: var(--color-black);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 20px;
}

.poster-section .container {
    text-align: center;
}

.main-title {
    font-family: var(--font-broadway);
    font-size: 4rem;
    color: var(--color-yellow);
    font-weight: bold;
}

.phonetic {
    font-family: var(--font-arial);
    font-size: 1.2rem;
    color: var(--color-red);
}

.mission-statement p {
    font-family: var(--font-arial);
    font-size: 1rem;
    color: var(--color-red);
    margin: 5px 0;
}

.presents-section {
    margin: 20px 0;
}

.presents-title {
    font-family: var(--font-broadway);
    font-size: 3rem;
    color: var(--color-yellow);
    font-weight: bold;
}

.presents-translations {
    font-family: var(--font-arial);
    font-size: 1rem;
    color: var(--color-red);
}

.presents-translations span {
    margin: 0 10px;
}

.main-subtitle {
    font-family: var(--font-broadway);
    font-size: 2.5rem;
    color: var(--color-yellow);
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(255, 215, 0, 0.3);
}

.subtitle-translations {
    margin-bottom: 20px;
}

.subtitle-translations p {
    font-family: var(--font-arial);
    font-size: 1rem;
    color: var(--color-red);
    margin-bottom: 10px;
}

/* Hexagon Grid */
.hexagon-grid {
    position: relative;
    width: 700px;
    height: 720px; /* 500px(第四行top) + 200px(六边形高度) + 20px(三角形向上偏移) = 720px，足够 */
    margin: 10px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: visible; /* 确保三角形可见 */
}

.hexagon-frame {
    position: absolute;
    width: 231px; /* √3 * height，确保正六边形 */
    height: 200px;
    background-color: var(--color-yellow);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hexagon-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none; /* 隐藏SVG边框，使用黄色背景 */
}

.hexagon-inner {
    width: 70%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2;
    position: relative;
}

.avatar {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 自适应展示全图，不裁剪 */
    object-position: center;
    display: block;
}

/* 六边形位置 - 蜂窝状布局（匹配截图）*/
/* 第一行：顶部中心1个 */
.hex-top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* 第二行：左右2个 */
/* 使用相对于中心的偏移，确保左右对称 */
/* PC端容器宽度700px，六边形宽度231px */
/* 如果left: 120px，六边形中心在120 + 115.5 = 235.5px */
/* 容器中心在350px，偏移 = 350 - 235.5 = 114.5px */
/* 所以：left: calc(50% - 115.5px - 114.5px) = calc(50% - 230px) */
.hex-left {
    top: 200px;
    left: calc(50% - 115.5px - 114.5px); /* 中心 - 半个六边形宽度 - 偏移 */
}

.hex-right {
    top: 200px;
    right: calc(50% - 115.5px - 114.5px); /* 中心 - 半个六边形宽度 - 偏移 */
}

/* 第三行：底部1个*/
.hex-bottom-center {
    top: 400px;
    left: 50%;
    transform: translateX(-50%);
}

/* 第四行：底部2个（靠近） */
/* 使用相对于中心的偏移，确保左右对称 */
/* 如果left: 60px，六边形中心在60 + 115.5 = 175.5px */
/* 容器中心在350px，偏移 = 350 - 175.5 = 174.5px */
.hex-bottom-left {
    top: 500px;
    left: calc(50% - 115.5px - 173.5px); /* 中心 - 半个六边形宽度 - 偏移 */
}

.hex-bottom-right {
    top: 500px;
    right: calc(50% - 115.5px - 173.5px); /* 中心 - 半个六边形宽度 - 偏移 */
}

/* 上方三角形：边长等于六边形边长 */
/* 六边形边长 = 200 / √3 ≈ 115.5px */
/* 等边三角形高度 = 115.5 * √3 / 2 ≈ 100px */
/* hex-top 底边位置：top: 0 + height: 200px = 200px */
.upper-triangle-svg {
    position: absolute;
    width: 115.5px;
    height: 100px;
    top: 200px; /* hex-top 底边位置 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 5; /* 在六边形之上 */
    pointer-events: none;
}

/* 中部三角形：边长等于六边形边长 */
/* 底边与 hex-bottom-center 上边重合 */
/* hex-bottom-center 顶部位置：top: 400px */
/* 三角形顶点朝上，底边在 SVG 的 y=100，所以 top = 400 - 100 = 300px */
.middle-triangle-svg {
    position: absolute;
    width: 115.5px;
    height: 100px;
    top: 300px; /* 让底边(y=100)对齐到 hex-bottom-center 顶部(y=400) */
    left: 50%;
    transform: translateX(-50%);
    z-index: 5; /* 在六边形之上 */
    pointer-events: none;
}

/* 等边三角形：底边为六边形底边边长的6倍 */
/* 六边形底边边长 = 高度 / √3 = 200 / √3 ≈ 115.5px */
/* 三角形边长 = 115.5 * 6 = 693px */
/* 三角形高度 = 693 * √3 / 2 ≈ 600px */
/* 最底部六边形底部位置 = 500px + 200px = 700px */
.triangle-svg {
    position: absolute;
    width: 693px;
    height: 600px;
    bottom: 20px; /* 向上移动20px */
    left: 50%;
    transform: translateX(-50%);
    z-index: 0; /* 在六边形下方 */
    pointer-events: none;
}

/* 倒立等边三角形：边长为六边形边长 */
/* PC端：六边形边长 = 200 / √3 ≈ 115.5px */
/* 倒立三角形高度 = 115.5 * √3 / 2 ≈ 100px */
/* hex-bottom-center：top: 400px, 高度200px, 底部在600px */
/* 倒立三角形底边应该在600px，顶点在600 + 100 = 700px */
.inverted-triangle-svg {
    position: absolute;
    width: 115.5px;
    height: 100px;
    top: 600px; /* hex-bottom-center底部位置 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 0; /* 在六边形下方 */
    pointer-events: none;
}

.bottom-statement {
    font-family: var(--font-broadway);
    font-size: 1.8rem;
    color: var(--color-yellow);
    font-weight: bold;
}

/* Section 2: Virtual Library */
.library-section {
    background-color: var(--color-black);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.traditions-section {
    margin-bottom: 10px;
}

.tradition-text {
    font-family: var(--font-arial);
    font-size: 1rem;
    color: var(--color-red);
    margin: 5px 0;
}

.join-title {
    font-family: var(--font-broadway);
    font-size: 1.5rem;
    color: var(--color-yellow);
    font-weight: bold;
}

.join-translations p {
    font-family: var(--font-arial);
    font-size: 1rem;
    color: var(--color-red);
    margin: 5px 0;
}

.coming-soon-title {
    font-family: var(--font-broadway);
    font-size: 2.5rem;
    color: var(--color-yellow);
    font-weight: bold;
    margin: 10px 0 10px;
}

.coming-soon-translations {
    font-family: var(--font-arial);
    font-size: 1rem;
    color: var(--color-red);
    margin-bottom: 10px;
}

.story-title {
    font-family: var(--font-broadway);
    font-size: 2rem;
    color: var(--color-yellow);
    font-weight: bold;
    margin: 10px 0 10px;
}

.story-translations {
    font-family: var(--font-arial);
    font-size: 1rem;
    color: var(--color-red);
    margin-bottom: 30px;
}

.works-title {
    font-family: var(--font-broadway);
    font-size: 2.5rem;
    color: var(--color-yellow);
    font-weight: bold;
    margin: 30px 0 10px;
}

.works-translations {
    font-family: var(--font-arial);
    font-size: 1rem;
    color: var(--color-red);
    margin-bottom: 10px;
}

.library-title {
    font-family: var(--font-broadway);
    font-size: 2.5rem;
    color: var(--color-yellow);
    font-weight: bold;
}

.library-translations p {
    font-family: var(--font-arial);
    font-size: 1rem;
    color: var(--color-red);
    margin: 5px 0;
}

.qr-section {
    margin: 10px 0;
    text-align: center;
}

.qr-code {
    display: inline-block;
}

.qr-image {
    width: 100px;
    height: 100px;
    background-color: white;
}

.scan-me {
    font-family: var(--font-arial);
    font-size: 1.2rem;
    color: white;
}

.email-section {
    margin-top: 10px;
}

.divider-line {
    height: 2px;
    background-color: var(--color-red);
    margin: 10px 0;
}

.email-text {
    font-family: var(--font-arial);
    font-size: 1rem;
    color: var(--color-red);
    text-align: center;
}

.email-text a {
    color: var(--color-red);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.email-text a:hover {
    color: var(--color-yellow);
    text-decoration: underline;
}

/* Section 3: Footer */
.footer-section {
    background-color: var(--color-black);
    padding: 0px 20px;
    text-align: center;
}

.company-info {
    font-family: var(--font-arial);
    font-size: 1rem;
    color: var(--color-red);
    margin: 10px 0;
}

.copyright {
    font-family: var(--font-arial);
    font-size: 1rem;
    color: var(--color-red);
    margin-top: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .main-title {
        font-size: 2.5rem;
    }

    .main-subtitle,
    .presents-title,
    .join-title,
    .coming-soon-title,
    .story-title,
    .works-title,
    .library-title {
        font-size: 1.8rem;
    }

    .hexagon-grid {
        /* 使用百分比宽度，适配不同手机屏幕 */
        width: 90%;
        max-width: 90vw; /* 最大不超过视口宽度的90% */
        /* 移动端容器高度：PC端720px * 0.65 = 468px */
        /* 但需要容纳倒立三角形：390px + 65px = 455px */
        height: 455px; /* 固定高度，确保布局一致 */
        min-height: 455px;
        overflow: visible; /* 确保三角形可见 */
    }

    /* 移动端六边形尺寸：使用固定像素值，与PC端保持相同比例，确保是等边六边形 */
    /* PC端：231px × 200px，边长 = 115.5px */
    /* 移动端：缩放到65%，150px × 130px，边长 = 75px */
    /* 宽高比保持一致：150/130 ≈ 1.154 = 2/√3，确保等边 */
    .hexagon-frame {
        width: 150px;
        height: 130px; /* 保持与PC端相同的宽高比 */
        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    }

    /* 移动端布局：使用与PC端相同的布局逻辑，按比例缩放 */
    /* PC端：容器700px × 720px，六边形231px × 200px */
    /* 移动端：容器90vw，六边形150px × 130px（PC端的65%） */
    /* 缩放比例：130/200 = 0.65 */
    
    /* 第一行：顶部中心 */
    .hex-top {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    /* 第二行：左右2个 */
    /* PC端：top: 200px, left: calc(50% - 115.5px - 114.5px) */
    /* 移动端：top: 130px (200 * 0.65), left: calc(50% - 75px - 74.4px) */
    .hex-left {
        top: 130px; /* 200px * 0.65 */
        left: calc(50% - 75px - 74.4px); /* 半个六边形宽度(75px) + 偏移(114.5px * 0.65) */
    }

    .hex-right {
        top: 130px;
        right: calc(50% - 75px - 74.4px);
    }

    /* 第三行：中间1个 */
    /* PC端：top: 400px */
    /* 移动端：top: 260px (400 * 0.65) */
    .hex-bottom-center {
        top: 260px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* 第四行：底部2个（靠近） */
    /* PC端：top: 500px, left: calc(50% - 115.5px - 174.5px) */
    /* 移动端：top: 325px (500 * 0.65), left: calc(50% - 75px - 113.4px) */
    .hex-bottom-left {
        top: 325px;
        left: calc(50% - 75px - 113.4px); /* 半个六边形宽度(75px) + 偏移(174.5px * 0.65) */
    }

    .hex-bottom-right {
        top: 325px;
        right: calc(50% - 75px - 113.4px);
    }

    /* 移动端上方三角形：使用与PC端相同的布局逻辑，按比例缩放 */
    /* PC端：115.5px × 100px，top: 200px */
    /* 移动端：75px × 65px (115.5 * 0.65 × 100 * 0.65)，top: 130px (200 * 0.65) */
    .upper-triangle-svg {
        width: 75px;
        height: 65px;
        top: 130px; /* hex-top 底边位置 */
    }

    /* 移动端中部三角形：使用与PC端相同的布局逻辑，按比例缩放 */
    /* PC端：115.5px × 100px，top: 300px */
    /* 移动端：75px × 65px，top: 195px (300 * 0.65) */
    .middle-triangle-svg {
        width: 75px;
        height: 65px;
        top: 195px; /* 让底边对齐到 hex-bottom-center 顶部(260px) */
    }

    /* 移动端三角形：使用与PC端相同的布局逻辑，按比例缩放 */
    /* PC端：693px × 600px，bottom: 20px */
    /* 移动端：450px × 390px (693 * 0.65 × 600 * 0.65) */
    /* 原 bottom: 13px (20px * 0.65)，现下移20px，改为 -7px (13 - 20) */
    .triangle-svg {
        width: 450px;
        height: 390px;
        bottom: 0px; /* 下移20px：13px - 20px = -7px */
        top: auto;
    }

    /* 移动端倒立三角形：使用与PC端相同的布局逻辑，按比例缩放 */
    /* PC端：115.5px × 100px，top: 600px */
    /* 移动端：75px × 65px，top: 390px (600 * 0.65) */
    .inverted-triangle-svg {
        width: 75px;
        height: 65px;
        top: 390px; /* hex-bottom-center底部位置 260 + 130 = 390px */
    }
}