/* ===================================
 * 四口牌 - 登录页样式(手机适配)
 * =================================== */

*,*::before,*::after{box-sizing:border-box;}

body{
    margin:0;padding:0;
    min-height:100vh;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
    color:#fff;
    -webkit-tap-highlight-color:transparent;
    display:flex;align-items:center;justify-content:center;
    /* 多层渐变背景 */
    background:
        radial-gradient(ellipse at 20% 20%, rgba(56,142,60,0.25) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 80%, rgba(255,149,0,0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 0%, rgba(139,195,74,0.15) 0%, transparent 50%),
        linear-gradient(160deg, #0a1f0a 0%, #112211 30%, #0d1b0d 60%, #0a150a 100%);
    overflow-x:hidden;
}

/* 背景装饰光斑 */
body::before{
    content:'';position:fixed;
    top:10%;left:5%;width:200px;height:200px;
    background:radial-gradient(circle, rgba(255,149,0,0.06) 0%, transparent 70%);
    border-radius:50%;pointer-events:none;z-index:0;
    animation:floatA 8s ease-in-out infinite;
}
body::after{
    content:'';position:fixed;
    bottom:15%;right:8%;width:180px;height:180px;
    background:radial-gradient(circle, rgba(56,142,60,0.08) 0%, transparent 70%);
    border-radius:50%;pointer-events:none;z-index:0;
    animation:floatB 10s ease-in-out infinite;
}
@keyframes floatA{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(20px,-20px) scale(1.1);}
}
@keyframes floatB{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-15px,15px) scale(1.08);}
}

/* 主容器 */
.login-wrap{
    position:relative;z-index:1;
    width:100%;max-width:400px;padding:30px 24px;
    text-align:center;
}

/* 标题 */
.login-wrap h1{
    display:block;width:100%;
    color:#ff9500;
    font-size:36px;font-weight:800;
    margin:0 auto 8px;
    text-align:center;
    letter-spacing:6px;
    text-shadow:0 2px 12px rgba(255,149,0,0.35);
}
.login-wrap .sub{
    color:rgba(255,255,255,0.45);
    font-size:13px;letter-spacing:3px;
    margin-bottom:28px;
    text-align:center;
}

/* 登录卡片 */
.login-box{
    background:rgba(255,255,255,0.04);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-radius:16px;
    padding:28px 22px;
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 8px 32px rgba(0,0,0,0.25);
}
.login-box input{
    width:100%;padding:13px 16px;border:none;border-radius:12px;
    background:rgba(255,255,255,0.08);color:#fff;font-size:16px;
    border:1px solid rgba(255,255,255,0.1);outline:none;
    text-align:center;margin-bottom:16px;
    transition:all 0.3s;
}
.login-box input:focus{
    border-color:#ff9500;
    background:rgba(255,255,255,0.12);
    box-shadow:0 0 0 4px rgba(255,149,0,0.1);
}
.login-box input::placeholder{color:rgba(255,255,255,0.3);}
.login-box button{
    width:100%;padding:14px;border:none;border-radius:12px;
    background:linear-gradient(135deg,#ff9500,#e65100);
    color:#fff;font-size:17px;font-weight:700;cursor:pointer;
    box-shadow:0 4px 16px rgba(255,149,0,0.35);
    transition:all 0.25s;
    letter-spacing:2px;
}
.login-box button:hover{
    background:linear-gradient(135deg,#ffa726,#f57c00);
    box-shadow:0 6px 24px rgba(255,149,0,0.45);
    transform:translateY(-1px);
}
.login-box button:active{transform:scale(0.97);}
.login-box button:disabled{opacity:0.5;transform:none;}

/* 规则说明 */
.rules-wrap{
    margin-top:24px;
}
.rules-toggle{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;padding:13px 20px;
    cursor:pointer;font-size:14px;color:rgba(255,255,255,0.6);
    transition:all 0.25s;
    display:flex;align-items:center;justify-content:center;
    gap:8px;
    user-select:none;
}
.rules-toggle:hover{
    background:rgba(255,255,255,0.08);
    color:rgba(255,255,255,0.85);
}
.rules-toggle .arrow{
    display:inline-block;transition:transform 0.3s ease;
    font-size:12px;color:rgba(255,255,255,0.4);
}
.rules-toggle.open .arrow{transform:rotate(180deg);}
.rules-toggle.open{
    border-radius:12px 12px 0 0;
    border-bottom-color:transparent;
}
.rules-toggle.open + .rules-content{
    border-radius:0 0 12px 12px;
}

.rules-content{
    display:none;text-align:left;padding:14px 18px 18px;
    background:rgba(0,0,0,0.25);
    border:1px solid rgba(255,255,255,0.06);
    border-top:none;
    border-radius:12px;
    font-size:12.5px;line-height:1.9;color:rgba(255,255,255,0.55);
    margin-top:-1px;
    max-height:55vh;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}
.rules-wrap:has(.rules-toggle.open) .rules-content{
    border-radius:0 0 12px 12px;
}

.rules-content h4{
    color:#ff9500;font-size:13px;
    margin:10px 0 4px;
    font-weight:600;
}
.rules-content p{
    margin:0 0 6px;
    padding-left:4px;
}

/* 规则内容滚动条 */
.rules-content::-webkit-scrollbar{width:4px;}
.rules-content::-webkit-scrollbar-track{background:transparent;}
.rules-content::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,0.1);border-radius:2px;
}