@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

/* ============================================
   全局样式
   ============================================ */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Orbitron', sans-serif;
    color: var(--th-text-primary, #00f3ff);
    outline: none;
}

body {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--th-bg, #000000);
}

/* ---- 日夜模式 Token ---- */
:root {
    --th-bg: #ffffff;
    --th-overlay-bg: #ffffff;
    --th-container-bg: rgba(255, 240, 220, 0.25);
    --th-container-border: rgba(250, 82, 15, 0.4);
    --th-container-shadow: inset 0 0 20px rgba(250, 82, 15, 0.12);
    --th-accent: #fa520f;
    --th-accent-80: rgba(250, 82, 15, 0.8);
    --th-accent-glow-sm: 0 0 15px rgba(250, 82, 15, 0.7);
    --th-accent-glow-lg: 0 0 30px #fa520f, 0 0 60px #fa520f;
    --th-text-primary: #1a0800;
    --th-btn-fill-bg: #fa520f;
    --th-btn-fill-text: #ffffff;
    --th-btn-fill-hover: #ff7a45;
    --th-scrollbar: rgba(250, 82, 15, 0.3);
    --th-breathe-lo: rgba(250, 82, 15, 0.2);
    --th-breathe-hi: rgba(250, 82, 15, 0.9);
}

#menu-overlay[data-theme="night"] {
    --th-bg: #000000;
    --th-overlay-bg: #000000;
    --th-container-bg: rgba(0, 30, 50, 0.2);
    --th-container-border: rgba(0, 243, 255, 0.3);
    --th-container-shadow: inset 0 0 20px rgba(0, 243, 255, 0.15);
    --th-accent: #00f3ff;
    --th-accent-80: rgba(0, 243, 255, 0.8);
    --th-accent-glow-sm: 0 0 15px rgba(0, 243, 255, 0.7);
    --th-accent-glow-lg: 0 0 30px #00f3ff, 0 0 60px #00f3ff;
    --th-text-primary: #00f3ff;
    --th-btn-fill-bg: #00f3ff;
    --th-btn-fill-text: #050a0f;
    --th-btn-fill-hover: #ffffff;
    --th-scrollbar: rgba(0, 243, 255, 0.3);
    --th-breathe-lo: rgba(0, 243, 255, 0.2);
    --th-breathe-hi: rgba(0, 243, 255, 0.9);
}

/* ============================================
   HTML 主菜单遮罩层
   ============================================ */
#menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--th-overlay-bg);
    transition: opacity 0.4s ease;
}

#menu-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.glass-container {
    background-color: var(--th-container-bg);
    height: 82.8vh;
    width: 82.8%;
    border: 1px solid transparent;
    box-shadow: var(--th-container-shadow);
    border-radius: 30px;
    backdrop-filter: blur(15px);
    padding: 50px;
    padding-top: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* 用 ::before 绘制边框，用 clip-path 精准裁切掉底部中间的线条（不会有颜色突兀） */
.glass-container::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px; bottom: -1px;
    border: 1px solid var(--th-container-border);
    border-radius: 30px;
    pointer-events: none;
    clip-path: polygon(
        0% 0%, 
        100% 0%, 
        100% 100%, 
        calc(50% + 105px) 100%, 
        calc(50% + 105px) calc(100% - 5px), 
        calc(50% - 105px) calc(100% - 5px), 
        calc(50% - 105px) 100%, 
        0% 100%
    );
}

.content-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* 级联入场动画 */
@keyframes slideDownFade {
    0% {
        opacity: 0;
        transform: translateY(-40px);
        text-shadow: 0 0 0 transparent;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        text-shadow: var(--th-accent-glow-sm);
    }
}

.main-text {
    font-size: 3.99rem;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 4px;
    margin-bottom: 20px;
    text-align: center;
    opacity: 0;
    animation: slideDownFade 0.8s ease forwards;
    animation-delay: 0.2s;
}

.sub-text {
    font-size: 1.20rem;
    letter-spacing: 5px;
    font-weight: 400;
    color: var(--th-accent-80);
    margin-bottom: 60px;
    text-align: center;
    text-transform: uppercase;
    opacity: 0;
    animation: slideDownFade 0.8s ease forwards;
    animation-delay: 0.6s;
}

.hero-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    opacity: 0;
    animation: slideDownFade 0.8s ease forwards;
    animation-delay: 1.0s;
}

.hero-cta-btn {
    font-size: 0.96rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    padding: 12px 40px;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 4px;
    font-family: 'Orbitron', sans-serif;
}

.btn-left {
    background-color: var(--th-btn-fill-bg);
    color: var(--th-btn-fill-text);
}

.btn-right {
    background-color: transparent;
    border: 2px solid var(--th-accent);
    color: var(--th-accent);
}

.btn-left:hover {
    box-shadow: var(--th-accent-glow-lg);
    background-color: var(--th-btn-fill-hover);
}

.btn-right:hover {
    background-color: rgba(0, 243, 255, 0.1);
    color: var(--th-btn-fill-hover);
    box-shadow: 0 0 30px var(--th-accent);
}

/* 呼吸文字 */
@keyframes breathe {

    0%,
    100% {
        opacity: 0.2;
        text-shadow: 0 0 2px var(--th-breathe-lo);
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 15px var(--th-breathe-hi);
    }
}

.explore-container {
    position: absolute;
    bottom: 15%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    opacity: 0;
    animation: slideDownFade 0.8s ease forwards;
    animation-delay: 1.4s;
}

.explore-text {
    font-size: 0.85rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--th-accent);
    text-align: center;
    animation: breathe 3s ease-in-out infinite;
    animation-delay: 2.2s;
}

/* Home & Profile 按钮 — 嵌入玻璃底边线 */
.home-container {
    position: absolute;
    bottom: 8.6vh;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    transform: translateY(50%);
    z-index: 20;
}


.home-wrapper {
    opacity: 0;
    animation: slideDownFade 0.8s ease forwards;
    animation-delay: 1.8s;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    /* 按钮独立上移（修改这里调整高度，不影响线段） */
    margin-bottom: 24px;
}

/* 按钮上方悬浮标签 */
.btn-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: #e0e0e0;
    background: rgba(20, 20, 40, 0.85);
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 6px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.home-wrapper:hover .btn-label {
    opacity: 1;
    transform: translateY(0);
}

/* profile 图标跟随主题色 */
.profile-btn i, .project-btn i {
    color: var(--th-text-primary) !important;
}

.home-btn {
    --prox: 1;
    height: 27.8px;
    width: 27.8px;
    font-size: 0.79rem;
    border: 2px solid grey;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
    transform: scale(var(--prox));
    background: transparent;
    color: grey;
    text-decoration: none;
}

/* 初始界面 Home 放大 50%（仅菜单） */
.home-container .home-btn {
    height: 36px;
    width: 36px;
    font-size: 1.02rem;
}

.home-btn:hover {
    border-color: var(--th-accent);
    box-shadow: 0 0 25px var(--th-accent);
    text-shadow: 0 0 25px var(--th-accent);
    transform: scale(var(--prox)) rotate(360deg);
    color: var(--th-accent);
}

/* 橙色 Profile / Project 按钮 */
.profile-btn, .project-btn {
    --prox: 1;
    height: 36px;
    width: 36px;
    font-size: 1.02rem;
    border: 2px solid grey;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
    transform: scale(var(--prox));
    background: transparent;
    color: var(--th-text-primary);
    text-decoration: none;
}

.profile-btn:hover, .project-btn:hover {
    border-color: grey;
    transform: scale(var(--prox)) rotate(360deg);
    color: var(--th-accent);
}

/* 鼠标靠近按钮放大效果 */
.home-container .home-wrapper {
    transition: transform 0.3s ease;
}

/* 日夜切换按钮 */
#theme-toggle {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid grey;
    background: transparent;
    color: var(--th-accent);
    font-size: 1.02rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease;
    z-index: 2;
}

#theme-toggle:hover {
    border-color: var(--th-accent);
    box-shadow: 0 0 25px var(--th-accent);
    color: var(--th-accent);
    transform: rotate(360deg);
}

#theme-toggle i {
    color: var(--th-accent);
    transition: color 0.4s ease;
}

/* 游戏内 Home 按钮（DOM 层） */
.game-home-container {
    position: fixed;
    bottom: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 400;
}

/* ============================================
   Phaser Canvas
   ============================================ */
#game-container canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* ============================================
   MemoryModal
   ============================================ */
#memory-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
}

.modal-box {
    background-color: #f4efe6;
    color: #333333;
    max-width: 660px;
    width: 90%;
    padding: 32px;
    border: 4px solid #000;
    box-shadow: 8px 8px 0px rgba(0, 0, 0, 1);
    position: relative;
    box-sizing: border-box;
    animation: popIn 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes popIn {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.modal-image {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
    transition: opacity 0.2s ease;
    border: 2px solid #000;
    margin-bottom: 16px;
    background: #e0d8c8;
    cursor: pointer;
}

.modal-text {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 16px;
    white-space: pre-wrap;
    color: #333333;
    font-family: 'Courier New', Courier, monospace;
}

.modal-nav {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    color: #888;
    user-select: none;
    transition: color 0.2s;
    margin-bottom: 16px;
    font-family: 'Courier New', Courier, monospace;
}

.modal-nav:hover {
    color: #e52521;
}

.modal-bottom {
    display: flex;
    justify-content: flex-start;
    padding-top: 8px;
}

.modal-close {
    background: none;
    border: none;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    color: #000;
    padding: 0;
    transition: color 0.2s;
}

.modal-close:hover {
    color: #e52521;
}

/* ============================================
   EndScreen (通关画面)
   ============================================ */
#end-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1100;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    animation: endFadeIn 0.6s ease;
}

@keyframes endFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#end-screen img {
    max-width: 70%;
    max-height: 70%;
    object-fit: contain;
    animation: popIn 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* ============================================
   滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #000000;
}

::-webkit-scrollbar-thumb {
    background: var(--th-scrollbar);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--th-accent-80);
}

/* ============================================
   Profile Panel — 暗金维度
   ============================================ */

/* 白天模式（默认） */
:root {
    --da-bg: #fffaeb;
    --da-border: rgba(250, 82, 15, 0.25);
    --da-border-hover: rgba(250, 161, 16, 0.55);
    --da-orange: #fa520f;
    --da-amber: #ffa110;
    --da-gold: #ffd900;
    --da-text: #1a0800;
    --da-text-muted: rgba(26, 8, 0, 0.45);
    --da-radius: 6px;
    --da-shadow:
        0 8px 40px rgba(127, 99, 21, 0.20),
        0 24px 80px rgba(127, 99, 21, 0.12),
        0 48px 120px rgba(127, 99, 21, 0.06);
    --da-gradient-bar: linear-gradient(90deg, #fa520f, #ffa110, #ffd900);
    --da-avatar-bg: linear-gradient(135deg, #fa520f, #ffa110);
    --da-avatar-shadow: 0 0 20px rgba(250, 82, 15, 0.3);
    --da-award-hover: rgba(250, 82, 15, 0.06);
}

/* 黑夜模式 */
.profile-overlay.night, #project-overlay.night {
    --da-bg: #0a0e14;
    --da-border: rgba(0, 243, 255, 0.2);
    --da-border-hover: rgba(0, 243, 255, 0.5);
    --da-orange: #00f3ff;
    --da-amber: #00c8d4;
    --da-gold: #00f3ff;
    --da-text: #e0f4f4;
    --da-text-muted: rgba(224, 244, 244, 0.45);
    --da-shadow:
        0 8px 40px rgba(0, 243, 255, 0.12),
        0 24px 80px rgba(0, 243, 255, 0.06),
        0 48px 120px rgba(0, 243, 255, 0.03);
    --da-gradient-bar: linear-gradient(90deg, #005f6b, #00a8b5, #00f3ff);
    --da-avatar-bg: linear-gradient(135deg, #005f6b, #00c8d4);
    --da-avatar-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
    --da-award-hover: rgba(0, 243, 255, 0.06);
}

/* 遮罩层 */
.profile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 800;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-overlay.hidden {
    display: none;
}

/* 面板容器 */
.profile-panel {
    width: 600px;
    max-width: 92vw;
    max-height: 85vh;
    background: var(--da-bg);
    border: 1px solid var(--da-border);
    border-radius: var(--da-radius);
    box-shadow: var(--da-shadow);
    position: relative;
    overflow: hidden;
    animation: profileSlideIn 0.35s ease both;
}

@keyframes profileSlideIn {
    from {
        opacity: 0;
        transform: translateX(40px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1.2);
    }
}

.profile-overlay.closing .profile-panel {
    animation: profileSlideOut 0.25s ease both;
}

@keyframes profileSlideOut {
    from {
        opacity: 1;
        transform: translateX(0) scale(1.2);
    }

    to {
        opacity: 0;
        transform: translateX(40px) scale(0.97);
    }
}

/* 顶部渐变装饰条 */
.profile-gradient-bar {
    height: 5px;
    background: var(--da-gradient-bar);
}

/* 关闭按钮 */
.profile-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-family: 'Orbitron', sans-serif;
    font-size: 18px;
    color: var(--da-text-muted);
    cursor: pointer;
    transition: color 0.2s;
    z-index: 2;
    line-height: 1;
}

.profile-close:hover {
    color: var(--da-orange);
}

/* 面板内容区 */
.profile-body {
    padding: 28px 32px 24px;
    overflow-y: auto;
    max-height: calc(85vh - 40px); /* 减去一定的 padding 和头部空间，确保可以在内部滚动 */
}

/* 头部：头像 + 信息 */
.profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

/* 字母/图片头像 */
.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 确保图片不超出圆角 */
    flex-shrink: 0;
    box-shadow: var(--da-avatar-shadow);
    background: var(--da-avatar-bg); /* 作为图片加载前的底色 */
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片等比填充不变形 */
}

/* 昵称区 */
.profile-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-name {
    font-family: 'Orbitron', sans-serif;
    font-weight: 400;
    font-size: 22px;
    color: var(--da-text);
    margin: 0;
}

.profile-tag {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 13px;
    color: var(--da-amber);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
}

.profile-contact {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 13px;
    color: var(--da-text-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-copy-btn {
    background: none;
    border: 1px solid var(--da-border);
    border-radius: 3px;
    color: var(--da-text-muted);
    font-size: 11px;
    padding: 1px 6px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    font-family: 'Noto Sans SC', sans-serif;
}

.profile-copy-btn:hover {
    color: var(--da-orange);
    border-color: var(--da-border-hover);
}

/* 分隔线 */
.profile-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.profile-divider span {
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: var(--da-amber);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    white-space: nowrap;
}

.profile-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--da-border);
}

/* 竞赛获奖列表 */
.profile-awards {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.profile-award-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-left: 3px solid var(--da-orange);
    transition: background 0.2s;
}

.profile-award-item:hover {
    background: var(--da-award-hover);
}

.profile-award-item i {
    color: var(--da-amber);
    font-size: 13px;
    margin-right: 10px;
    flex-shrink: 0;
}

.profile-award-name {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 14px;
    color: var(--da-text);
    flex: 1;
}

.profile-award-year {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 13px;
    color: var(--da-text-muted);
    margin-left: 12px;
    flex-shrink: 0;
}

/* 兴趣爱好标签容器 */
.profile-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 5px 0 15px;
}

/* 单个爱好标签 */
.profile-tag-item {
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 13px;
    color: var(--da-text);
    background: rgba(250, 82, 15, 0.03);
    border: 1px solid var(--da-border);
    padding: 6px 14px;
    border-radius: var(--da-radius);
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
    cursor: default;
}

.profile-tag-item:hover {
    background: var(--da-award-hover);
    border-color: var(--da-orange);
    color: var(--da-amber);
    transform: translateY(-2px);
}

/* ============================================
   Project 面板 — 3D Intro 风格 (全屏)
   所有视觉变量由 --pj-* 驱动，跟随 #project-overlay.night 切换主题
   ============================================ */

/* 白天（默认） */
#project-overlay {
    --pj-bg: #fffaeb;
    --pj-bg-nav: rgba(255, 250, 235, 0.72);
    --pj-text-strong: #1a0800;
    --pj-text-mid: #4a2a10;
    --pj-text-mute: rgba(26, 8, 0, 0.5);
    --pj-text-faint: rgba(26, 8, 0, 0.18);
    --pj-accent: #fa520f;
    --pj-accent-soft: rgba(250, 82, 15, 0.08);
    --pj-card-bg: #ffffff;
    --pj-card-border: rgba(250, 82, 15, 0.15);
    --pj-card-shadow: 0 4px 24px rgba(127, 99, 21, 0.08);
    --pj-card-shadow-hover: 0 12px 48px rgba(250, 82, 15, 0.18);
    --pj-tag-bg: rgba(250, 82, 15, 0.06);
    --pj-tag-text: #7a3d10;
    --pj-tag-bg-hover: #1a0800;
    --pj-tag-text-hover: #ffffff;
    --pj-nav-bg: #fffaeb;
    --pj-mask-bg: #0a0800;
    --pj-mask-text: #ffffff;
    --pj-mask-text-body: #3a2a20;
    --pj-grid-dot: rgba(250, 82, 15, 0.28);
    --pj-hint: #a46030;
}

/* 夜晚 */
#project-overlay.night {
    --pj-bg: #0a0e14;
    --pj-bg-nav: rgba(10, 14, 20, 0.72);
    --pj-text-strong: #e0f4f4;
    --pj-text-mid: #9fd8df;
    --pj-text-mute: rgba(224, 244, 244, 0.5);
    --pj-text-faint: rgba(224, 244, 244, 0.12);
    --pj-accent: #00f3ff;
    --pj-accent-soft: rgba(0, 243, 255, 0.1);
    --pj-card-bg: #0f1620;
    --pj-card-border: rgba(0, 243, 255, 0.2);
    --pj-card-shadow: 0 4px 24px rgba(0, 243, 255, 0.06);
    --pj-card-shadow-hover: 0 12px 48px rgba(0, 243, 255, 0.2);
    --pj-tag-bg: rgba(0, 243, 255, 0.08);
    --pj-tag-text: #a0e8ee;
    --pj-tag-bg-hover: #00f3ff;
    --pj-tag-text-hover: #050a0f;
    --pj-nav-bg: #0a0e14;
    --pj-mask-bg: #002830;
    --pj-mask-text: #ffffff;
    --pj-mask-text-body: #6ad6de;
    --pj-grid-dot: rgba(0, 243, 255, 0.28);
    --pj-hint: #6ad6de;
}

#project-overlay {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: var(--pj-bg);
    overflow-y: auto;
    overflow-x: hidden;
    font-family: 'Outfit', 'Noto Sans SC', sans-serif;
    color: var(--pj-text-strong);
    animation: pjFadeIn 0.35s ease both;
    cursor: none;
}

#project-overlay.hidden {
    display: none;
    animation: none;
}

#project-overlay.closing {
    animation: pjFadeOut 0.28s ease both;
}

@keyframes pjFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pjFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

#project-overlay a,
#project-overlay button {
    cursor: none;
}

#project-overlay ::selection {
    background: var(--pj-accent-soft);
}

/* 关闭按钮 */
#project-overlay .project-close {
    position: fixed;
    top: 18px;
    right: 28px;
    background: var(--pj-card-bg);
    border: 1px solid var(--pj-card-border);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 300;
    color: var(--pj-text-strong);
    transition: color 0.2s, border-color 0.2s, transform 0.3s;
    z-index: 120;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#project-overlay .project-close:hover {
    color: var(--pj-accent);
    border-color: var(--pj-accent);
    transform: rotate(90deg);
}

/* 点阵背景 Canvas */
#project-overlay .pj-bg-grid {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}

/* 遮罩层（反色 Hero） */
#project-overlay .pj-mask-container {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--pj-mask-bg);
    pointer-events: none;
    clip-path: circle(0px at 50% 50%);
    will-change: clip-path;
    transition: background 0.4s;
}

#project-overlay .pj-mask-scroll {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100vh;
}

/* Hero 区 */
/* 该 wrapper 起点位于视口中心 (50vw, 50vh)，宽高 100% 会延伸到视口外的右下方，
 * 其几何中心实际落在右下角 (100vw, 100vh)。若使用默认 perspective-origin: 50% 50%，
 * 透视消失点就会跑到视口右下角，导致 30 层深度堆叠的 3D 文字朝右下方收敛，
 * 看起来像字体本身被斜切。把 perspective-origin 锚到 wrapper 的 0% 0%（即视口正中心，
 * 与 scene 中心重合）即可让消失点回正，文字正视图恢复。*/
#project-overlay .pj-hero-wrap {
    position: absolute;
    top: 50vh;
    left: 50vw;
    width: 100%;
    height: 100%;
    perspective: 1200px;
    perspective-origin: 0% 0%;
    pointer-events: none;
}

#project-overlay .pj-scene {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    will-change: transform;
}

/* 30 层 3D 文字 */
#project-overlay .pj-3d-text {
    position: relative;
    display: grid;
    justify-items: center;
    font-family: 'Outfit', 'Noto Sans SC', sans-serif;
    font-weight: 900;
    font-size: clamp(2.5rem, 8vw, 6rem);
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
    transform-style: preserve-3d;
}

#project-overlay .pj-3d-text-layer {
    grid-column-start: 1;
    grid-row-start: 1;
    display: block;
    pointer-events: none;
    color: var(--pj-text-faint);
}

/* 正色版本 */
#project-overlay .pj-3d-text--base .pj-3d-text-layer { color: #cbd5e1; }
#project-overlay.night .pj-3d-text--base .pj-3d-text-layer { color: #2a3a4d; }
#project-overlay .pj-3d-text--base .pj-3d-text-front {
    color: var(--pj-text-strong);
}
#project-overlay.night .pj-3d-text--base .pj-3d-text-front {
    text-shadow: 0 0 24px rgba(0, 243, 255, 0.35);
}

/* 反色版本（mask 内） */
#project-overlay .pj-3d-text--mask .pj-3d-text-layer { color: var(--pj-mask-text-body); }
#project-overlay .pj-3d-text--mask .pj-3d-text-front {
    color: var(--pj-mask-text);
    text-shadow: 0 0 30px rgba(255,255,255,0.4);
}

#project-overlay .pj-hero-sub {
    margin-top: 16px;
    font-family: 'Outfit', 'Noto Sans SC', sans-serif;
    font-size: clamp(0.75rem, 1.6vw, 1.125rem);
    font-weight: 500;
    letter-spacing: 0.2em;
    white-space: nowrap;
    pointer-events: none;
}

#project-overlay .pj-section--hero {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    perspective: 1200px;
    scroll-snap-align: start;
}

#project-overlay .pj-hero-hover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85vw;
    max-width: 900px;
    height: 35vh;
    min-height: 300px;
    z-index: 40;
}

#project-overlay .pj-hero-guide {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: var(--pj-text-mute);
    pointer-events: none;
    animation: pjBreathe 3s ease-in-out infinite;
}

@keyframes pjBreathe {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}

/* 顶部 Nav */
#project-overlay .pj-nav {
    position: fixed;
    top: 22px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 110;
    pointer-events: none;
}

#project-overlay .pj-nav-pill {
    display: flex;
    gap: 4px;
    background: var(--pj-bg-nav);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 4px;
    border-radius: 9999px;
    border: 1px solid var(--pj-card-border);
    pointer-events: auto;
}

#project-overlay .pj-nav-btn {
    padding: 6px 20px;
    border-radius: 9999px;
    background: transparent;
    border: none;
    color: var(--pj-text-strong);
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}

#project-overlay .pj-nav-btn:hover {
    background: var(--pj-accent-soft);
}

#project-overlay .pj-nav-btn.is-active {
    background: var(--pj-accent);
    color: #ffffff;
}
#project-overlay.night .pj-nav-btn.is-active {
    color: #050a0f;
}

/* 内容滚动区 */
#project-overlay .pj-content {
    position: relative;
    z-index: 10;
}

/* Section 公共 */
#project-overlay .pj-section {
    position: relative;
    z-index: 10;
    scroll-snap-align: start;
}

#project-overlay .pj-section--projects,
#project-overlay .pj-section--contact {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 96px 24px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

#project-overlay .pj-sec-header h2 {
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 3rem);
    letter-spacing: -0.02em;
    color: var(--pj-text-strong);
    margin: 0 0 24px 0;
}

#project-overlay .pj-sec-underline {
    width: 48px;
    height: 4px;
    background: var(--pj-text-strong);
}

/* 项目卡 */
#project-overlay .pj-card-stack {
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding-bottom: 64px;
}

#project-overlay .pj-card {
    position: relative;
    padding: 40px;
    border-radius: 24px;
    background: var(--pj-card-bg);
    box-shadow: var(--pj-card-shadow);
    border: 1px solid var(--pj-card-border);
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-height: 380px;
    will-change: transform;
    transform-style: preserve-3d;
    transition: transform 0.5s ease-out, box-shadow 0.4s;
}

#project-overlay .pj-card.is-hovered {
    box-shadow: var(--pj-card-shadow-hover);
}

@media (min-width: 768px) {
    #project-overlay .pj-card {
        flex-direction: row;
        gap: 48px;
    }
    #project-overlay .pj-card--odd {
        flex-direction: row-reverse;
    }
}

#project-overlay .pj-card-content {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    flex: 1;
}

#project-overlay .pj-card-title {
    position: relative;
    z-index: 1;
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    letter-spacing: -0.02em;
    color: var(--pj-text-strong);
    margin: 24px 0 16px 0;
}

#project-overlay .pj-card-tags {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

#project-overlay .pj-card-tag {
    padding: 4px 12px;
    border-radius: 9999px;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 600;
    background: var(--pj-tag-bg);
    color: var(--pj-tag-text);
    border: 1px solid var(--pj-card-border);
    white-space: nowrap;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}

#project-overlay .pj-card.is-hovered .pj-card-tag {
    background: var(--pj-tag-bg-hover);
    color: var(--pj-tag-text-hover);
    border-color: var(--pj-tag-bg-hover);
}

#project-overlay .pj-card-desc {
    position: relative;
    z-index: 1;
    font-family: 'Noto Sans SC', sans-serif;
    font-size: clamp(0.875rem, 1.4vw, 1rem);
    line-height: 1.6;
    color: var(--pj-text-mute);
    max-width: 60ch;
    padding-bottom: 32px;
    flex-grow: 1;
    margin: 0;
}

#project-overlay .pj-card-year {
    position: absolute;
    bottom: 0;
    left: 0;
    font-family: 'Outfit', monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--pj-text-mute);
}

#project-overlay .pj-card-img {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    min-height: 220px;
    pointer-events: none;
    background: var(--pj-accent-soft);
}

@media (min-width: 768px) {
    #project-overlay .pj-card-img {
        width: 50%;
        min-height: auto;
    }
    #project-overlay .pj-card-content {
        width: 50%;
    }
}

#project-overlay .pj-card-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 联系卡 */
#project-overlay .pj-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 128px;
}

@media (min-width: 768px) {
    #project-overlay .pj-contact-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
}

#project-overlay .pj-contact-card {
    background: var(--pj-card-bg);
    border: 1px solid var(--pj-card-border);
    border-radius: 32px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: var(--pj-card-shadow);
    text-decoration: none;
    color: var(--pj-text-strong);
    transition: transform 0.5s, box-shadow 0.5s, border-color 0.3s;
    position: relative;
    overflow: hidden;
    font-family: 'Noto Sans SC', sans-serif;
}

#project-overlay .pj-contact-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--pj-card-shadow-hover);
    border-color: var(--pj-accent);
}

#project-overlay .pj-contact-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: var(--pj-text-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: var(--pj-bg);
    font-size: 28px;
    transition: transform 0.5s, background 0.4s;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* 对抗全局 * { color:... } 选择器，显式给图标字色 */
#project-overlay .pj-contact-icon i {
    color: var(--pj-bg);
}

#project-overlay .pj-contact-card:hover .pj-contact-icon,
#project-overlay .pj-contact-card:hover .pj-contact-icon i {
    color: #ffffff;
}

#project-overlay .pj-contact-card:hover .pj-contact-icon {
    transform: scale(1.1) rotate(-6deg);
    background: var(--pj-accent);
}

#project-overlay.night .pj-contact-card:hover .pj-contact-icon,
#project-overlay.night .pj-contact-card:hover .pj-contact-icon i {
    color: #050a0f;
}

#project-overlay .pj-contact-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--pj-text-strong);
    transition: color 0.3s;
}

#project-overlay .pj-contact-card:hover h3 {
    color: var(--pj-accent);
}

#project-overlay .pj-contact-val {
    font-family: 'Outfit', monospace;
    font-weight: 500;
    font-size: 14px;
    color: var(--pj-text-strong);
    margin: 0 0 16px 0;
}

#project-overlay .pj-contact-hint {
    font-size: 12px;
    font-weight: 500;
    color: var(--pj-text-mute);
    transition: color 0.3s;
    margin: 0;
}

#project-overlay .pj-contact-card:hover .pj-contact-hint {
    color: var(--pj-accent);
}

/* 微信卡：复制反馈 */
#project-overlay .pj-contact-card--wechat {
    border: 1px solid var(--pj-card-border);
    font-family: 'Noto Sans SC', sans-serif;
    width: 100%;
}

/* 联系方式结尾文字 */
#project-overlay .pj-contact-footer {
    margin: -16px auto 0;
    max-width: 720px;
    text-align: center;
    font-family: 'Noto Sans SC', sans-serif;
    font-size: clamp(0.875rem, 1.3vw, 1rem);
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0.04em;
    color: var(--pj-text-mute);
}

#project-overlay .pj-wechat-hint-wrap {
    position: relative;
    width: 100%;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#project-overlay .pj-wechat-hint {
    position: absolute;
    font-size: 12px;
    font-weight: 500;
    margin: 0;
    transition: transform 0.3s, opacity 0.3s, color 0.3s;
}

#project-overlay .pj-wechat-hint--idle {
    color: var(--pj-text-mute);
    transform: translateY(0);
    opacity: 1;
}

#project-overlay .pj-wechat-hint--done {
    color: #22c55e;
    font-weight: 700;
    transform: translateY(32px);
    opacity: 0;
}

#project-overlay .pj-contact-card--wechat:hover .pj-wechat-hint--idle {
    color: var(--pj-accent);
}

#project-overlay .pj-contact-card--wechat.is-copied .pj-wechat-hint--idle {
    transform: translateY(-32px);
    opacity: 0;
}

#project-overlay .pj-contact-card--wechat.is-copied .pj-wechat-hint--done {
    transform: translateY(0);
    opacity: 1;
}