/* ===== 基础重置 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ===== 蓝天背景 ===== */
.sky {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, #2e8fe8 0%, #4aa3ef 34%, #8cc7f5 68%, #d9edfb 100%);
}

.cloud {
    position: absolute;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* 参考图布局：左侧上下两朵 + 右侧两小团 */
.cloud-1 { width: clamp(280px, 30vw, 460px); left: -9%;  top: 34%; opacity: 0.92; }
.cloud-2 { width: clamp(330px, 36vw, 560px); left: -13%; top: 54%; opacity: 0.92; }
.cloud-3 { width: clamp(190px, 21vw, 330px); right: 3%;  top: 52%; opacity: 0.9; }
.cloud-4 { width: clamp(130px, 14vw, 220px); right: 15%; top: 63%; opacity: 0.8; }

@keyframes drift {
    from { transform: translateX(0); }
    to   { transform: translateX(26px); }
}

.cloud { animation: drift 9s ease-in-out infinite alternate; }
.cloud-2 { animation-duration: 12s; }
.cloud-3 { animation-duration: 10s; animation-direction: alternate-reverse; }

/* ===== 虚线曲线 ===== */
.dashed-curve {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* ===== 顶部 header ===== */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26px 40px;
}

.logo {
    position: relative;
    display: inline-block;
}

.logo img {
    width: 44px;
    height: 44px;
    display: block;
    object-fit: contain;
    image-rendering: pixelated;
    transition: transform 0.3s ease;
}

.logo:hover img { transform: rotate(-8deg) scale(1.05); }

.logo-r {
    position: absolute;
    right: -10px;
    bottom: 2px;
    font-size: 9px;
    color: #fff;
}

.nav {
    display: flex;
    align-items: center;
    gap: 14px;
}

.nav-item {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 1px;
    transition: opacity 0.2s ease;
}

.nav-item:hover { opacity: 0.65; }

.nav-divider {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

/* ===== 中央人物 ===== */
.character {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 5;
    height: 55vh;
    display: flex;
    align-items: flex-end;
}

.character img {
    height: 100%;
    width: auto;
    display: block;
    filter: drop-shadow(0 10px 24px rgba(20, 60, 120, 0.15));
}

/* ===== 贴纸通用 ===== */
.sticker { position: fixed; z-index: 6; }

.sticker svg,
.sticker img { display: block; width: 100%; height: auto; }

.float { animation: floaty 4.5s ease-in-out infinite; }

@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

/* 贴纸可点击反馈 */
.sticker-link {
    display: block;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.sticker-link:hover { transform: scale(1.06); }
.sticker-link:active { transform: scale(0.97); }
.sticker-link:focus-visible { outline: 2px dashed #fff; outline-offset: 4px; border-radius: 8px; }

/* 黑色椭圆标签 */
.tag {
    display: inline-block;
    background: #141414;
    color: #fff;
    font-size: 12px;
    letter-spacing: 2px;
    padding: 5px 16px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

/* SMILE DAY 笑脸贴纸 */
.sticker-smile {
    left: 11%;
    top: 20%;
    width: 168px;
    text-align: left;
}

.sticker-smile .tag { margin-bottom: 6px; }

/* OH 怪物贴纸 */
.sticker-oh {
    right: 13%;
    top: 10%;
    width: 230px;
    text-align: center;
}

.tag-tilt { transform: rotate(-6deg); }

/* 小怪物贴纸 */
.sticker-fools {
    right: 27%;
    bottom: 20%;
    width: 175px;
    text-align: left;
}

.sticker-fools .tag { margin-bottom: 6px; }

/* ===== 左下 WELCOME ===== */
.welcome-block {
    position: fixed;
    left: 40px;
    bottom: 11%;
    z-index: 10;
    color: #101010;
}

.video-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
    line-height: 1;
}

.video-badge .deg {
    font-weight: 800;
    font-size: 26px;
    color: #101010;
}

.video-badge .deg i { font-style: normal; font-size: 15px; }

.video-badge .v {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #101010;
    align-self: flex-end;
    padding-bottom: 2px;
}

.video-badge .play { width: 14px; }

.welcome-title {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(32px, 4.4vw, 58px);
    letter-spacing: 3px;
    line-height: 1.05;
    color: #0d0d0d;
    margin-bottom: 16px;
}

.welcome-sub {
    font-size: 15px;
    letter-spacing: 1px;
    color: #1a1a1a;
}

.welcome-sub span { font-weight: 600; }

/* ===== 右下二维码 ===== */
.qr-block {
    position: fixed;
    right: 44px;
    bottom: 9%;
    z-index: 10;
    text-align: center;
}

.qr-circle {
    position: relative;
    width: 138px;
    height: 138px;
    margin-bottom: 12px;
    transition: transform 0.3s ease;
}

.qr-circle:hover { transform: scale(1.05); }

.qr-circle > svg:first-child {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.22));
}

.wx-badge {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #52c41a;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.9);
}

.wx-badge svg { width: 18px; height: 18px; }

.qr-hint {
    font-size: 12px;
    color: #1c3d5e;
    letter-spacing: 1.5px;
}

/* ===== 底部版权 ===== */
.site-footer {
    position: fixed;
    left: 40px;
    bottom: 26px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    image-rendering: pixelated;
    opacity: 0.95;
}

.footer-brand {
    font-family: Arial, sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 1px;
    color: #fff;
}

.copyright {
    font-size: 11px;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.85);
    margin-left: 6px;
}

/* ===== 密码门 ===== */
.gate-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(31, 36, 48, 0.4);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.gate-overlay[hidden] { display: none; }
.gate-overlay.show { opacity: 1; }

.gate-card {
    position: relative;
    width: min(360px, 100%);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #fff;
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    padding: 34px 30px 28px;
    text-align: center;
    transform: translateY(14px) scale(0.97);
    transition: transform 0.25s ease;
}

.gate-overlay.show .gate-card { transform: none; }

.gate-close {
    position: absolute;
    top: 14px;
    right: 14px;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #141414;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.gate-close:hover { transform: rotate(90deg); opacity: 0.8; }

.gate-lock {
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    border-radius: 18px;
    background: linear-gradient(145deg, #4aa3ef, #2b5fd9);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(43, 95, 217, 0.35);
}

.gate-lock svg { width: 28px; height: 28px; color: #fff; }

.gate-title { font-size: 20px; color: #111; }

.gate-sub {
    font-size: 10px;
    letter-spacing: 3px;
    color: #aab7c4;
    margin-top: 6px;
}

.gate-input {
    width: 100%;
    margin-top: 20px;
    padding: 13px 16px;
    font-size: 15px;
    letter-spacing: 2px;
    border: 1.5px solid #e2e8ee;
    border-radius: 14px;
    outline: none;
    background: #f8fafc;
    text-align: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gate-input:focus {
    border-color: #2196f3;
    box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.14);
}

.gate-error {
    display: none;
    font-size: 12px;
    color: #e05252;
    margin-top: 10px;
}

.gate-submit {
    width: 100%;
    margin-top: 16px;
    padding: 13px;
    border: none;
    border-radius: 14px;
    background: #141414;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 4px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.gate-submit:hover {
    background: #2f6fe4;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
}

.gate-submit:active { transform: translateY(0); }

@keyframes gateShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-9px); }
    40% { transform: translateX(9px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

.gate-shake { animation: gateShake 0.4s ease; }

/* ===== 响应式 ===== */
@media (max-width: 1100px) {
    .sticker-fools { right: 8%; }
    .sticker-oh { right: 6%; width: 190px; }
    .sticker-smile { left: 5%; width: 140px; }
}

@media (max-width: 820px) {
    .site-header { padding: 18px 20px; }
    .logo img { width: 36px; height: 36px; }
    .nav-item { font-size: 12px; }

    .character { height: 50vh; transform: translateX(-50%); }

    .sticker-smile { left: 3%; top: 13%; width: 100px; }
    .sticker-oh { right: 3%; top: 9%; width: 130px; }
    .sticker-fools { right: 4%; bottom: 36%; width: 120px; }

    .welcome-block { left: 20px; bottom: 16%; }
    .welcome-title { font-size: 30px; letter-spacing: 2px; }
    .welcome-sub { font-size: 12px; }

    .qr-block { right: 20px; bottom: 15%; }
    .qr-circle { width: 100px; height: 100px; }

    .site-footer { left: 20px; bottom: 14px; flex-wrap: wrap; max-width: 70vw; }
    .copyright { font-size: 9px; }
}

@media (max-width: 480px) {
    .nav-divider { display: none; }
    .nav { gap: 10px; }
    .character { height: 42vh; }
    .sticker-smile { width: 78px; }
    .sticker-oh { width: 104px; }
    .sticker-fools { width: 96px; bottom: 38%; }
    .qr-circle { width: 84px; height: 84px; }
}