/* ============================================
   游戏代练平台 - 样式表 v3
   黑金玫瑰深色主题 + 动态头像框
   ============================================ */

*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto}

html,body{min-height:100%;height:auto;background:#0a0a12;}

body{
    padding-bottom:80px;
    background:
        radial-gradient(circle at 20% 10%, rgba(180,140,60,0.15), transparent 50%),
        radial-gradient(circle at 80% 90%, rgba(120,80,160,0.15), transparent 50%),
        linear-gradient(135deg, #0a0a12 0%, #12101e 100%);
    background-attachment:fixed;
    color:#e8d5a8;
    min-height:100vh;
}

.page{
    display:none;
    padding:20px;
    min-height:100vh;
    overflow-y:auto;
    background:transparent;
}
.page.active{display:block;}

h2{
    margin-bottom:24px;
    text-align:center;
    color:#e8c878;
    font-size:24px;
    text-shadow:0 0 12px rgba(232,200,120,0.4);
}
h3{margin:16px 0 8px;color:#d4b878;}
h4{margin:12px 0 6px;color:#b8a070;font-size:15px;}

.item{margin:16px 0;}
label{display:block;margin-bottom:6px;font-weight:bold;color:#d4b878;font-size:16px;}

input,select,textarea{
    width:100%;
    padding:14px;
    border:1px solid rgba(200,170,100,0.3);
    border-radius:10px;
    font-size:16px;
    background:rgba(30,25,45,0.85);
    color:#e8d5a8;
    outline:none;
    transition:border-color 0.3s;
}
input:focus,select:focus,textarea:focus{
    border-color:#e8c878;
    box-shadow:0 0 8px rgba(232,200,120,0.3);
}
input::placeholder,textarea::placeholder{color:#7a7060;}
textarea{min-height:120px;}

button{
    width:100%;
    padding:14px;
    background:linear-gradient(135deg,#b8860b,#e8c878);
    color:#1a1226;
    border:none;
    border-radius:10px;
    font-size:17px;
    font-weight:bold;
    margin-top:10px;
    cursor:pointer;
    transition:all 0.3s;
    box-shadow:0 4px 12px rgba(184,134,11,0.3);
}
button:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(232,200,120,0.5);}
button:active{transform:translateY(0);}

.btn-small{width:auto;padding:6px 10px;font-size:14px;margin:3px;}
.btn-red{background:linear-gradient(135deg,#8b1a1a,#dd3333);color:white;}
.btn-green{background:linear-gradient(135deg,#1a5c2a,#28a745);color:white;}
.btn-orange{background:linear-gradient(135deg,#a05000,#ff8822);color:white;}
.btn-gray{background:linear-gradient(135deg,#444,#777);color:white;}

/* ===== 底部导航 ===== */
.bottom-nav{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:70px;
    background:rgba(15,12,25,0.95);
    backdrop-filter:blur(10px);
    display:flex;
    border-top:1px solid rgba(200,170,100,0.3);
    z-index:99;
}
.nav-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#a89878;
    font-size:14px;
    cursor:pointer;
    position:relative;
    transition:color 0.3s;
}
.nav-item.active{color:#e8c878;text-shadow:0 0 8px rgba(232,200,120,0.6);}

.badge{
    position:absolute;
    top:4px;
    right:12px;
    background:#f44336;
    color:#fff;
    border-radius:99px;
    min-width:18px;
    height:18px;
    font-size:12px;
    text-align:center;
    line-height:18px;
    display:none;
}

/* ===== 卡片 ===== */
.price-item,.info-card,.login-box,.upload-area,.section-block,.order-item,.friend-item{
    background:rgba(26,18,38,0.85);
    border:1px solid rgba(200,170,100,0.2);
    border-radius:12px;
    padding:16px;
    margin:12px 0;
    backdrop-filter:blur(6px);
    box-shadow:0 4px 16px rgba(0,0,0,0.4);
}
.info-card,.login-box{text-align:center;}
.login-box{padding:24px;margin-top:20px;}

.video-card{
    background:rgba(26,18,38,0.9);
    border:1px solid rgba(200,170,100,0.2);
    color:#e8d5a8;
    padding:12px;
    border-radius:12px;
    text-align:center;
    margin:12px 0;
    overflow:hidden;
    box-shadow:0 4px 16px rgba(0,0,0,0.4);
}
video{width:100%;border-radius:8px;}

/* ===== 头像 + 5个动态科幻头像框 ===== */
.avatar-wrap{width:140px;height:140px;margin:0 auto 16px;position:relative;}
.avatar-frame{
    width:100%;
    height:100%;
    border-radius:50%;
    padding:6px;
    position:relative;
    transition:transform 0.3s ease;
}
.avatar-img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    background:#2a2440;
}

/* ---------- 1. 紫焰魔君 ---------- */
.frame-normal{
    border:3px solid #a060ff;
    box-shadow:0 0 20px #a060ff, inset 0 0 15px rgba(160,96,255,0.5);
    animation:purpleFlame 3s ease-in-out infinite;
}
.frame-normal::before{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:50%;
    background:conic-gradient(from 0deg, #a060ff, #6020c0, #a060ff, #6020c0, #a060ff);
    filter:blur(12px);
    opacity:0.7;
    z-index:-1;
    animation:rotateRing 8s linear infinite;
}
@keyframes purpleFlame{
    0%,100%{box-shadow:0 0 18px #a060ff, inset 0 0 12px rgba(160,96,255,0.4);}
    50%{box-shadow:0 0 30px #a060ff, inset 0 0 20px rgba(160,96,255,0.7);}
}
@keyframes rotateRing{
    to{transform:rotate(360deg);}
}

/* ---------- 2. 神龙绽放（金色） ---------- */
.frame-gold{
    border:3px solid #ffd700;
    box-shadow:0 0 22px #ffd700, inset 0 0 15px rgba(255,215,0,0.5);
    animation:goldenPulse 2.5s ease-in-out infinite;
}
.frame-gold::before{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius:50%;
    background:
        radial-gradient(circle, transparent 60%, #ffd700 70%, transparent 75%),
        conic-gradient(from 0deg, #ffd700, #ff8c00, #ffd700, #ff8c00, #ffd700);
    filter:blur(8px);
    opacity:0.8;
    z-index:-1;
    animation:rotateRing 6s linear infinite;
}
@keyframes goldenPulse{
    0%,100%{box-shadow:0 0 20px #ffd700, inset 0 0 12px rgba(255,215,0,0.4);}
    50%{box-shadow:0 0 36px #ffd700, inset 0 0 22px rgba(255,215,0,0.8);}
}

/* ---------- 3. 黑白圣天使（银白） ---------- */
.frame-blue{
    border:3px solid #c0d8ff;
    box-shadow:0 0 20px #a0c8ff, inset 0 0 12px rgba(200,220,255,0.5);
    animation:angelGlow 4s ease-in-out infinite;
}
.frame-blue::before{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:50%;
    background:conic-gradient(from 0deg, transparent 0%, #ffffff 20%, transparent 40%, #a0c8ff 60%, transparent 80%, #ffffff 100%);
    filter:blur(6px);
    opacity:0.8;
    z-index:-1;
    animation:rotateRing 10s linear infinite;
}
.frame-blue::after{
    content:"";
    position:absolute;
    inset:-14px;
    border-radius:50%;
    background:conic-gradient(from 180deg, transparent 0%, #ffffff 15%, transparent 30%, #a0c8ff 50%, transparent 70%, #ffffff 85%, transparent 100%);
    filter:blur(10px);
    opacity:0.5;
    z-index:-2;
    animation:rotateRingReverse 14s linear infinite;
}
@keyframes angelGlow{
    0%,100%{box-shadow:0 0 16px #a0c8ff, inset 0 0 10px rgba(200,220,255,0.4);}
    50%{box-shadow:0 0 30px #ffffff, inset 0 0 18px rgba(255,255,255,0.6);}
}
@keyframes rotateRingReverse{
    to{transform:rotate(-360deg);}
}

/* ---------- 4. 所念皆星河（星空蓝） ---------- */
.frame-pink{
    border:3px solid #4080ff;
    box-shadow:0 0 20px #4080ff, inset 0 0 14px rgba(64,128,255,0.5);
    background:radial-gradient(circle, rgba(20,30,80,0.5), transparent 70%);
    animation:starTwinkle 3s ease-in-out infinite;
}
.frame-pink::before{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius:50%;
    background:radial-gradient(circle, transparent 40%, rgba(64,128,255,0.6) 60%, transparent 80%);
    filter:blur(10px);
    opacity:0.7;
    z-index:-1;
    animation:rotateRing 15s linear infinite;
}
.frame-pink::after{
    content:"✨";
    position:absolute;
    top:-6px;
    right:-6px;
    font-size:18px;
    animation:starFloat 2s ease-in-out infinite;
    filter:drop-shadow(0 0 6px #4080ff);
}
@keyframes starTwinkle{
    0%,100%{box-shadow:0 0 16px #4080ff, inset 0 0 10px rgba(64,128,255,0.4);}
    50%{box-shadow:0 0 30px #80b0ff, inset 0 0 20px rgba(128,176,255,0.7);}
}
@keyframes starFloat{
    0%,100%{transform:translateY(0) scale(1);opacity:1;}
    50%{transform:translateY(-6px) scale(1.3);opacity:0.7;}
}

/* ---------- 5. 紫电贵族翼（紫电脉冲） ---------- */
.frame-green{
    border:3px solid #e040ff;
    box-shadow:0 0 20px #e040ff, inset 0 0 14px rgba(224,64,255,0.5);
    animation:electricPulse 0.8s ease-in-out infinite;
}
.frame-green::before{
    content:"";
    position:absolute;
    inset:-12px;
    border-radius:50%;
    background:
        radial-gradient(circle, transparent 55%, #e040ff 65%, transparent 75%),
        radial-gradient(circle, transparent 45%, #a020c0 55%, transparent 65%);
    filter:blur(8px);
    opacity:0.9;
    z-index:-1;
    animation:rotateRing 4s linear infinite;
}
.frame-green::after{
    content:"⚡";
    position:absolute;
    bottom:-4px;
    left:-4px;
    font-size:16px;
    animation:zap 1.5s ease-in-out infinite;
    filter:drop-shadow(0 0 6px #e040ff);
}
@keyframes electricPulse{
    0%,100%{box-shadow:0 0 18px #e040ff, inset 0 0 12px rgba(224,64,255,0.4);}
    50%{box-shadow:0 0 32px #ff80ff, inset 0 0 20px rgba(255,128,255,0.8);}
}
@keyframes zap{
    0%,100%{transform:scale(1) rotate(-10deg);opacity:1;}
    50%{transform:scale(1.4) rotate(10deg);opacity:0.6;}
}

/* ===== 头像框选项（小圆圈） ===== */
.frame-select{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:12px 0;}
.frame-option{
    width:44px;
    height:44px;
    border-radius:50%;
    cursor:pointer;
    border:2px solid rgba(200,170,100,0.3);
    transition:all 0.3s;
    position:relative;
}
.frame-option:hover{transform:scale(1.2);}
.frame-option.active{border:3px solid #e8c878;box-shadow:0 0 12px rgba(232,200,120,0.7);}
.frame-option.frame-normal{background:radial-gradient(circle,#a060ff,#6020c0);}
.frame-option.frame-gold{background:radial-gradient(circle,#ffd700,#ff8c00);}
.frame-option.frame-blue{background:radial-gradient(circle,#ffffff,#a0c8ff);}
.frame-option.frame-pink{background:radial-gradient(circle,#4080ff,#1020a0);}
.frame-option.frame-green{background:radial-gradient(circle,#e040ff,#a020c0);}

/* ===== 评论/消息/其他 ===== */
.comment-item{text-align:left;background:rgba(40,30,60,0.8);padding:8px;border-radius:6px;margin:4px 0;font-size:14px;border-left:3px solid #e8c878;}
.author-name{color:#e8c878;cursor:pointer;transition:color 0.3s;}
.author-name:hover{color:#ffe8a0;}
.my-video-item{background:rgba(40,30,60,0.8);color:#e8d5a8;padding:10px;border-radius:8px;margin:8px 0;text-align:left;border-left:3px solid #b8860b;}
.record-item{background:rgba(40,30,60,0.8);color:#e8d5a8;padding:8px;border-radius:6px;margin:4px 0;text-align:left;cursor:pointer;}
.friend-item{background:rgba(26,18,38,0.85);padding:12px;border-radius:8px;margin:8px 0;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid rgba(200,170,100,0.2);}
.chat-box{background:rgba(26,18,38,0.85);border-radius:10px;padding:12px;height:350px;overflow-y:auto;margin:10px 0;border:1px solid rgba(200,170,100,0.2);}
.msg-self{background:linear-gradient(135deg,#b8860b,#e8c878);color:#1a1226;padding:6px 10px;border-radius:8px;text-align:right;margin:4px 0;}
.msg-other{background:rgba(60,50,80,0.9);color:#e8d5a8;padding:6px 10px;border-radius:8px;text-align:left;margin:4px 0;}
.msg-recall{color:#888;font-style:italic;}
.relation-tag{display:inline-block;padding:2px 8px;border-radius:12px;font-size:12px;color:#fff;background:#a060ff;}
.online-tag{display:inline-block;padding:2px 6px;border-radius:12px;font-size:12px;background:#28a745;color:#fff;margin-left:4px;}
.offline-tag{display:inline-block;padding:2px 6px;border-radius:12px;font-size:12px;background:#888;color:#fff;margin-left:4px;}

.order-item{background:rgba(26,18,38,0.85);padding:14px;border-radius:10px;margin:10px 0;text-align:left;border:1px solid rgba(200,170,100,0.2);}

.notify{
    position:fixed;
    top:10px;
    right:10px;
    background:linear-gradient(135deg,#b8860b,#e8c878);
    color:#1a1226;
    padding:12px 16px;
    border-radius:8px;
    z-index:999;
    box-shadow:0 4px 16px rgba(232,200,120,0.5);
    display:none;
    font-weight:bold;
}

p{color:#c8b890;}

/* ============================================
   快手样式视频广场
   ============================================ */

/* 视频页面全屏黑底 */
#page3{
    padding:0;
    background:#000;
    overflow:hidden;
}

/* 视频容器 */
#videoList{
    height:calc(100vh - 70px);
    overflow-y:auto;
    scroll-snap-type:y mandatory;
    background:#000;
}

/* 单个视频卡片 - 全屏 */
.video-card{
    position:relative;
    width:100%;
    height:calc(100vh - 70px);
    background:#000;
    scroll-snap-align:start;
    overflow:hidden;
    border-radius:0;
    margin:0;
    padding:0;
}

/* 视频本体 */
.video-card video{
    width:100%;
    height:100%;
    object-fit:contain;
    background:#000;
    border-radius:0;
}

/* 右侧悬浮栏（作者头像、点赞、评论、收藏） */
.video-sidebar{
    position:absolute;
    right:10px;
    bottom:100px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    z-index:10;
}

.sidebar-avatar-wrap{
    width:50px;
    height:50px;
    border-radius:50%;
    border:2px solid #fff;
    padding:2px;
    background:#222;
    overflow:hidden;
    box-shadow:0 0 12px rgba(232,200,120,0.6);
}
.sidebar-avatar-wrap img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
}

.sidebar-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    color:#fff;
    font-size:12px;
    cursor:pointer;
    background:transparent;
    border:none;
    padding:0;
    margin:0;
    transition:transform 0.2s;
}
.sidebar-btn:hover{
    transform:scale(1.15);
}
.sidebar-btn .icon{
    font-size:32px;
    line-height:1;
    margin-bottom:4px;
    filter:drop-shadow(0 0 6px rgba(255,255,255,0.5));
}
.sidebar-btn .count{
    font-size:12px;
    font-weight:bold;
    text-shadow:0 0 4px #000;
}

/* 底部信息（作者、标题） */
.video-info{
    position:absolute;
    left:12px;
    right:80px;
    bottom:20px;
    color:#fff;
    z-index:9;
    text-align:left;
}
.video-info .author{
    font-size:16px;
    font-weight:bold;
    color:#fff;
    margin-bottom:6px;
    text-shadow:0 0 4px #000;
    cursor:pointer;
}
.video-info .title{
    font-size:14px;
    color:#eee;
    line-height:1.4;
    text-shadow:0 0 4px #000;
    margin-bottom:4px;
}
.video-info .time{
    font-size:12px;
    color:#aaa;
}

/* 删除按钮（自己的视频） */
.delete-btn-float{
    position:absolute;
    top:10px;
    right:10px;
    background:rgba(220,53,69,0.85);
    color:#fff;
    border:none;
    border-radius:6px;
    padding:6px 12px;
    font-size:13px;
    cursor:pointer;
    z-index:10;
}

/* ============================================
   评论弹层
   ============================================ */
.comment-layer{
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    height:70vh;
    background:#1a1226;
    border-top-left-radius:16px;
    border-top-right-radius:16px;
    z-index:999;
    box-shadow:0 -4px 20px rgba(0,0,0,0.7);
    display:flex;
    flex-direction:column;
}

.comment-header{
    padding:14px 16px;
    color:#e8c878;
    font-weight:bold;
    font-size:16px;
    border-bottom:1px solid rgba(200,170,100,0.2);
}

.comment-list{
    flex:1;
    overflow-y:auto;
    padding:12px 16px;
}

.comment-item-row{
    display:flex;
    gap:10px;
    margin-bottom:14px;
    color:#e8d5a8;
}
.comment-item-row .c-avatar{
    width:36px;
    height:36px;
    border-radius:50%;
    background:#333;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#e8c878;
    font-weight:bold;
    font-size:14px;
}
.comment-item-row .c-body{
    flex:1;
    text-align:left;
}
.comment-item-row .c-user{
    font-size:13px;
    color:#e8c878;
    font-weight:bold;
    margin-bottom:2px;
}
.comment-item-row .c-content{
    font-size:14px;
    color:#e8d5a8;
    line-height:1.4;
}
.comment-item-row .c-time{
    font-size:11px;
    color:#888;
    margin-top:2px;
}

.comment-input-bar{
    display:flex;
    gap:8px;
    padding:10px 12px;
    border-top:1px solid rgba(200,170,100,0.2);
    background:#0f0a1a;
}
.comment-input-bar input{
    flex:1;
    padding:10px 14px;
    border-radius:20px;
    border:1px solid rgba(200,170,100,0.3);
    background:#1a1226;
    color:#e8d5a8;
    outline:none;
    font-size:14px;
}
.comment-input-bar button{
    width:auto;
    padding:10px 20px;
    margin:0;
    border-radius:20px;
    font-size:14px;
}