:root {
            --gold-main: #bf953f;
            --gold-bright: #fcf6ba;
            --silver-main: #b3b3b3;
        }

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

        html, body {
            width: 100%; height: 100%;
            background-color: #000;
            overflow: hidden;
            font-family: "PingFang SC", sans-serif;
            color: #fff;
        }

        /* --- 1. 背景系统：强制拉伸适配手机 --- */
        .bg-system {
            position: fixed; 
            top: 0; left: 0; 
            width: 100vw; height: 100dvh;
            z-index: 1; /* 放在底层 */
            overflow: hidden;
            pointer-events: none; /* 防止遮挡点击 */
        }
        .bg-system img {
            width: 100%; height: 100%;
            /* fill 保证完全填满手机屏幕（无黑边），cover 保证比例正常（会有裁剪） */
            object-fit: fill; 
            filter: brightness(0.5);
            -webkit-user-drag: none;
        }

        /* --- 2. 主舞台层：z-index 必须高于背景 --- */
        .main-stage {
            position: relative; 
            z-index: 10; /* 确保在背景之上 */
            height: 100dvh; width: 100%;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: 0 25px;
        }

        /* --- 3. 域名流光动画 --- */
        .header-brand { margin-bottom: 40px; text-align: center; }
        .header-brand h1 {
            font-size: clamp(30px, 10vw, 55px);
            font-weight: 900;
            background: linear-gradient(135deg, #fcf6ba 0%, #bf953f 25%, #fcf6ba 50%, #bf953f 75%, #fcf6ba 100%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: metalFlow 3s linear infinite;
            filter: drop-shadow(0 4px 6px rgba(0,0,0,0.8));
        }
        @keyframes metalFlow { to { background-position: 200% center; } }
        
        .header-brand p {
            font-size: 18px; letter-spacing: 10px; color: #fcf6ba;
            margin-top: 15px; font-weight: bold;
            text-shadow: 0 2px 8px rgba(0,0,0,0.9);
        }

        /* --- 4. 跑马灯边框按钮 --- */
        .portal-container { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 25px; }

        .btn-wrap {
            position: relative;
            padding: 2px; /* 边框厚度 */
            overflow: hidden;
            clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
        }
        
        /* 跑马灯旋转线条 */
        .btn-wrap::before {
            content: ""; position: absolute;
            width: 200%; height: 200%;
            top: -50%; left: -50%;
            animation: rotateLine 1.5s linear infinite; 
            z-index: 1;
        }
        @keyframes rotateLine { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

        .gold-wrap::before { background: conic-gradient(transparent, transparent, transparent, #fcf6ba, #bf953f, transparent); }
        .silver-wrap::before { background: conic-gradient(transparent, transparent, transparent, #ffffff, #b3b3b3, transparent); }

        .btn-inner {
            position: relative; z-index: 2;
            display: flex; align-items: center; justify-content: center;
            width: 100%; padding: 22px;
            background: rgba(15, 15, 15, 0.95);
            color: #fff !important; text-decoration: none;
            font-size: 20px; font-weight: bold; letter-spacing: 4px;
            clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
            backdrop-filter: blur(10px);
        }

        /* 底部 */
        .footer-note {
            position: absolute; bottom: 40px;
            font-size: 12px; color: #bf953f; 
            letter-spacing: 2px; font-weight: bold;
            text-shadow: 0 2px 4px rgba(0,0,0,1);
        }