/* =============================================================
 *  PockDraw 自定义样式 / 布局
 *  配色：深中性灰底 + 电光蓝主色 + 暖金点缀
 *  这个文件在 index.html 里最后加载，优先级高于打包好的 app.css
 * ============================================================= */

:root{
    --pd-bg:        #1d2125;
    --pd-surface:   #22272b;
    --pd-elevated:  #272d33;
    --pd-border:    #2c3238;
    --pd-primary:   #50a2ff;
    --pd-accent:    #e5852c;
    --pd-gold:      #e2b24e;
    --pd-text:      #eef1f5;
    --pd-muted:     #8b95a3;
}

body,#app,.home{ background-color: var(--pd-bg) !important; }

/* ============ 内容区：限宽居中 ============ */
.index .center{
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 24px 70px;
}

/* ============ 顶部 Banner ============ */
.pd-hero{
    max-width: 1480px;
    margin: 22px auto 4px;
    padding: 0 24px;
    position: relative;
}
.pd-hero-img{
    display: block;
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.pd-hero-tip{
    position: absolute;
    left: 64px;
    bottom: 34px;
    font-size: 13px;
    letter-spacing: 2px;
    color: rgba(200,210,225,.55);
    pointer-events: none;
}
@media (max-width: 900px){
    .pd-hero-tip{ display: none; }
    .pd-hero-img{ border-radius: 12px; }
}

/* ============ 区块标题：左对齐 + 蓝色下划线 ============ */
.index .center .box .title{
    justify-content: flex-start !important;
    margin: 42px 0 18px 4px !important;
    padding: 0 !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
}
.index .center .box .title span{
    border-bottom: 3px solid var(--pd-primary) !important;
    padding-bottom: 8px !important;
    color: var(--pd-text);
    font-weight: 700;
    letter-spacing: 1px;
}

/* ============ 卡片网格：CSS Grid ============ */
.index .center .box ul{
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)) !important;
    gap: 22px !important;
    width: 100% !important;
}
.index .center .box ul > li{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
.index .center .box ul > li > div{
    width: 100%;
}
.index .center .box ul > li .bei1 img,
.index .center .box ul > li .bei2 img{
    width: 100% !important;
    display: block;
}
@media (max-width: 600px){
    .index .center .box ul{
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}
/* ============ 盲盒卡片：白卡 → 深色沉浸卡 ============ */
.index .center .box ul li[data-v-983e3cd2]{
    background: var(--pd-surface) !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: 16px !important;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.index .center .box ul li[data-v-983e3cd2]:hover{
    transform: translateY(-4px);
    border-color: rgba(80,162,255,.55) !important;
    box-shadow: 0 12px 28px rgba(80,162,255,.16), 0 0 0 1px rgba(80,162,255,.16);
}

/* 卡片里的名字：深底上改白字 */
.index .center .box ul li .name .name-warp[data-v-983e3cd2]{
    color: var(--pd-text) !important;
    font-size: 15px !important;
    padding: 12px 10px 4px !important;
}

/* 价格条：暖金胶囊 */
.money-warp[data-v-983e3cd2]{
    color: var(--pd-gold) !important;
    border: 1px solid rgba(226,178,78,.5) !important;
    background: rgba(226,178,78,.08) !important;
    border-radius: 999px !important;
    font-weight: 600;
    padding: 5px 14px !important;
}

/* 悬停时的「打开」按钮 */
.index .center .box .box-hover:hover .money-buy[data-v-983e3cd2]{
    background-color: var(--pd-primary) !important;
    border-radius: 0 !important;
}

/* ============ 开箱页顶部标题可见性 ============ */
.openbox .slide,
.openbox .slide .lately,
.openbox .slide .lately .title,
.openbox .slide .lately span{
    color: #ffffff !important;
}

/* ---------- 以下留空，按需追加 ---------- */

/* ============ 开箱页奖池（包含以下物品）============ */
/* 卡片图里已含名称与价格，这里改网格排列并隐藏重复的文字条 */
.openbox .boxlist-bot ul{
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 12px;
    margin: 0 !important;
}
.openbox .boxlist-bot ul li[data-v-711979f0]{
    width: auto !important;
    float: none !important;
}
.openbox .boxlist-bot ul li .boxlist-warp[data-v-711979f0]{
    margin: 0 !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: 12px !important;
    background: var(--pd-surface) !important;
    overflow: hidden;
}
.openbox .boxlist-bot ul li .boxlist-warp .boxlist1-top[data-v-711979f0]{
    height: auto !important;
    padding: 10px !important;
    aspect-ratio: 1 / 1;
    background-image: none !important;
    background-color: var(--pd-elevated) !important;
}
.openbox .boxlist-bot ul li .boxlist-warp .boxlist1-top img[data-v-711979f0]{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}
/* 隐藏重复的名称条与价格条（卡片图上已有） */
.openbox .boxlist-bot ul li .boxlist-warp .boxlist1-bot[data-v-711979f0],
.openbox .boxlist-bot ul li .boxlist-warp .con-btn1[data-v-711979f0]{
    display: none !important;
}
@media (max-width: 700px){
    .openbox .boxlist-bot ul{ grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* ============ 顶部登录/注册按钮 ============ */
.top-right .btn{
    border: 1px solid var(--pd-primary) !important;
    color: var(--pd-primary) !important;
    background: transparent !important;
}
.top-right .btn1{
    background: var(--pd-primary) !important;
    border: 1px solid var(--pd-primary) !important;
    color: #0b0f14 !important;
}
.top-right .btn:hover,
.top-right .btn1:hover{ opacity: .88; }

/* ============ 盲盒对战：横条布局 v2（按真实 DOM 层级） ============ */
.room-box .room-box-ul{ margin-top: 0 !important; }
.room-box .room-box-ul li{ float: none !important; width: 100% !important; margin-bottom: 14px; }

/* 外层行：覆盖 two1/two2/two3 的状态渐变底色 */
.room-box .room-box-ul li .roombox-warp,
.room-box .room-box-ul li .roombox-warp.two1,
.room-box .room-box-ul li .roombox-warp.two2,
.room-box .room-box-ul li .roombox-warp.two3{
    display: flex !important;
    align-items: center;
    gap: 18px;
    margin: 0 !important;
    padding: 14px 20px !important;
    min-height: 104px;
    background: var(--pd-surface) !important;
    background-image: none !important;
    border: 1px solid var(--pd-border) !important;
    border-radius: 14px !important;
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.room-box .room-box-ul li .roombox-warp:hover{
    border-color: rgba(80,162,255,.5) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

/* 状态块（.one） */
.room-box .room-box-ul li .roombox-warp .one,
.room-box .room-box-ul li .roombox-warp .one.two1,
.room-box .room-box-ul li .roombox-warp .one.two2,
.room-box .room-box-ul li .roombox-warp .one.two3{
    flex: 0 0 104px;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    padding: 4px 0 4px 14px !important;
    border-left: 3px solid var(--pd-primary) !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
}

/* 主内容块（.two）：让它的子元素横排 */
.room-box .room-box-ul li .roombox-warp .two,
.room-box .room-box-ul li .roombox-warp .two.two1,
.room-box .room-box-ul li .roombox-warp .two.two2,
.room-box .room-box-ul li .roombox-warp .two.two3{
    flex: 1 1 auto;
    min-width: 0;
    display: flex !important;
    align-items: center;
    gap: 18px;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
}

.room-box .room-box-ul li .roombox-warp .two-top{
    justify-content: flex-start !important;
    min-width: 88px;
}
.room-box .room-box-ul li .roombox-warp .two-bot{
    margin-top: 0 !important;
    display: flex;
    align-items: center;
}
.room-box .room-box-ul li .roombox-warp .room-peo{
    min-height: 0 !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
}
.room-box .room-box-ul li .roombox-warp .room-peo .pk-warp{ margin-top: 0 !important; }

/* 盒子缩略图 */
.pd-boxes{
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
}
.pd-box{
    width: 54px; height: 76px;
    border-radius: 6px; overflow: hidden;
    background: var(--pd-elevated);
    border: 1px solid var(--pd-border);
    flex: 0 0 auto;
}
.pd-box img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-box-count{
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,.7); color: #fff; font-size: 12px;
    padding: 2px 9px; border-radius: 10px;
}

/* 已开启金额 */
.pd-opened{
    flex: 0 0 auto;
    color: var(--pd-muted);
    font-size: 13px;
    white-space: nowrap;
}
.pd-opened b{ color: var(--pd-gold); font-size: 15px; margin-left: 4px; }

/* 右侧按钮 */
.room-box .room-box-ul li .roombox-warp .room-btn{
    margin: 0 0 0 auto !important;
    flex: 0 0 auto;
}
.room-box .room-box-ul li .roombox-warp .room-btn span{
    padding: 8px 30px !important;
    border-radius: 999px !important;
    white-space: nowrap;
    transition: background .16s ease, color .16s ease;
}
.room-box .room-box-ul li .roombox-warp .room-btn span:hover{
    background: var(--pd-primary);
    color: #0b0f14 !important;
}

@media (max-width: 1100px){
    .room-box .room-box-ul li .roombox-warp{ flex-wrap: wrap; }
    .room-box .room-box-ul li .roombox-warp .one{ flex-basis: 100%; }
    .room-box .room-box-ul li .roombox-warp .two{ flex-wrap: wrap; }
    .pd-boxes{ order: 3; width: 100%; }
}
/* 使用插入在 .two 内部的盒子条（位置正确），隐藏排在按钮后面的原始 .three */
.room-box .room-box-ul li .roombox-warp .pd-boxes{
    display: flex !important;
}
.room-box .room-box-ul li .roombox-warp .three{
    display: none !important;
}

/* 盒子条右侧留白 + 已开启区分隔，解决文字拥挤 */
.room-box .room-box-ul li .roombox-warp .pd-boxes{
    padding-right: 36px;
    margin-right: 10px;
}
.room-box .room-box-ul li .roombox-warp .pd-box-count{
    right: 0;
    min-width: 26px;
    text-align: center;
}
.pd-opened{
    padding-left: 18px;
    margin-left: 4px;
    border-left: 1px solid var(--pd-border);
    line-height: 1.4;
}
.room-box .room-box-ul li .roombox-warp .room-btn{
    margin-left: 16px !important;
}

/* 去掉重复的数量角标（左侧已有「N回合」），并拉开盒子与文字间距 */
.room-box .room-box-ul li .roombox-warp .pd-box-count{
    display: none !important;
}
.room-box .room-box-ul li .roombox-warp .pd-boxes{
    padding-right: 0 !important;
    margin-right: 28px !important;
    gap: 8px;
}
.room-box .room-box-ul li .roombox-warp .pd-box{
    width: 50px;
    height: 70px;
}
.pd-opened{
    padding-left: 22px !important;
    margin-left: 0 !important;
}

/* ============ 移除对战页左侧「对战之神」榜，房间列表占满 ============ */
.lucky .room .ranking{
    display: none !important;
}
.lucky .room{
    display: block !important;
}
.lucky .room .room-box{
    width: 100% !important;
    flex: none !important;
}

/* ============ 开箱转盘：放慢并与音效（19.3s）同步 ============ */
.openbox .kai-box-open2 .kai-warp ul,
.openbox .kai-box-open2[data-v-711979f0] .kai-warp ul[data-v-711979f0]{
    -webkit-animation-duration: 10s !important;
    animation-duration: 10s !important;
}
.openbox .kaibox-warp .kaibox-ul,
.openbox .kaibox-warp .kaibox-ul .kaibox-li{
    -webkit-animation-duration: 10s !important;
    animation-duration: 10s !important;
}

/* ============ 注册弹窗（FlameDraw 风格） ============ */
.reg-warp.pd-reg,
.reg .reg-warp{
    padding-bottom: 26px;
}
.pd-reg-head{
    text-align: center;
    margin: 6px 0 22px;
}
.pd-reg-head h2{
    color: #f2f5fa;
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    letter-spacing: .5px;
}
.pd-reg-head p{
    margin: 8px 0 0;
    color: #8b95a3;
    font-size: 14px;
}
.pd-field{
    margin-bottom: 18px;
    text-align: left;
}
.pd-field > label{
    display: block;
    color: #e8ecf3;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
}
.pd-field .pd-hint{
    margin: 0 0 8px;
    color: #6f7a88;
    font-size: 12px;
}
.pd-opt{
    color: #6f7a88;
    font-weight: 400;
    font-size: 13px;
}
.pd-input{
    width: 100%;
}
.pd-input .el-input__inner{
    background: #22272b !important;
    border: 1px solid #333a42 !important;
    border-radius: 8px !important;
    color: #eef1f5 !important;
    height: 46px !important;
    line-height: 46px !important;
    padding: 0 14px !important;
}
.pd-input .el-input__inner::placeholder{
    color: #66707c;
}
.pd-input .el-input__inner:focus{
    border-color: #50a2ff !important;
}
.pd-agree{
    margin: 4px 0 18px;
    text-align: left;
}
.pd-agree .el-checkbox__label{
    color: #c8d0da !important;
    font-size: 14px;
}
.pd-agree strong{
    color: #50a2ff;
    font-weight: 500;
}
.pd-submit{
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #50a2ff;
    color: #0b0f14;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: opacity .16s ease, background .16s ease;
}
.pd-submit:hover{
    background: #6cb3ff;
}
.pd-submit.pd-disabled{
    background: #2c3238;
    color: #66707c;
    cursor: not-allowed;
}
.pd-go-login{
    margin-top: 18px;
    color: #8b95a3;
    font-size: 14px;
}
.pd-go-login strong{
    color: #f2f5fa;
    font-weight: 600;
}

/* ============ 登录弹窗：保持登录 / 忘记密码 一行 ============ */
.pd-login-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 20px;
}
.pd-login-row .el-checkbox__label{
    color: #e8ecf3 !important;
    font-size: 14px;
}
.pd-forget{
    color: #50a2ff;
    font-size: 14px;
    cursor: pointer;
}
.pd-forget:hover{
    text-decoration: underline;
}

/* ============ 找回密码：人工流程面板 ============ */
.pd-forget-box{
    margin: 6px 0 22px;
}
.pd-forget-step{
    display: flex;
    gap: 14px;
    padding: 14px;
    margin-bottom: 10px;
    background: #22272b;
    border: 1px solid #2c3238;
    border-radius: 10px;
}
.pd-step-no{
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 50%;
    background: rgba(80,162,255,.15);
    color: #50a2ff;
    font-size: 13px;
    font-weight: 700;
}
.pd-forget-step b{
    display: block;
    color: #eef1f5;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}
.pd-forget-step p{
    margin: 0;
    color: #8b95a3;
    font-size: 13px;
    line-height: 1.5;
}

/* ============ 最近掉落滚动栏：浅底 → 深底白字 ============ */
.slide,
.slide .lately,
.slide .slide-ul,
.slide .slide-ul li,
.slide .slide-ul .div-li,
.slide .slide-warp{
    background-color: #1d2125 !important;
    background-image: none !important;
}
.slide .slide-warp{
    background-color: #22272b !important;
    border: 1px solid #2c3238;
    border-radius: 10px;
}
.slide .slide-warp .right h4,
.slide .slide-warp .right h5,
.slide .slide-warp .right h6,
.slide .slide-warp .right span,
.slide .slide-warp .right b{
    color: #eef1f5 !important;
}
.slide .slide-warp .right h4{
    font-weight: 600;
}
.slide .slide-warp .right h5 span{
    color: #50a2ff !important;
}
.slide .slide-warp .right h6 span{
    color: #e2b24e !important;
}

/* ============ 盲盒卡片悬停：隐藏第二层图，避免重影/穿模 ============ */
.index .center .box ul li .bei2,
.index .center .box ul li:hover .bei2,
.index .center .box .box-hover:hover .bei2{
    display: none !important;
    animation: none !important;
}
/* 卡片裁切，防止图片溢出圆角 */
.index .center .box ul li{
    overflow: hidden !important;
}
.index .center .box ul li .bei1{
    overflow: hidden;
}
.index .center .box ul li .bei1 img{
    border-radius: 15px 15px 0 0;
}

/* ============ 通知栏：浅黄底 → 深底 + 红色滚动字 ============ */
.bot-right-inform{
    background-color: #171b21 !important;
    border-bottom: 1px solid #2c3238;
}
.bot-right-inform .inform-left .span span,
.bot-right-inform #span,
.bot-right-inform .span span{
    color: #ff4d4f !important;
    font-weight: 500;
}
.bot-right-inform .inform-right i{
    color: #8b95a3 !important;
}
.bot-right-inform .inform-right:hover i{
    color: #ff4d4f !important;
}
/* 喇叭图标提亮，深底上才看得见 */
.bot-right-inform .inform-left img{
    filter: brightness(1.6) saturate(1.2);
}

/* ============ 顶部余额按钮（蓝色胶囊，点击进充值） ============ */
.top-right1 .mess-right .pd-money{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    line-height: 30px;
    padding: 0 16px;
    margin-top: 6px;
    background: #50a2ff;
    color: #0b0f14 !important;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .16s ease, transform .16s ease;
}
.top-right1 .mess-right .pd-money:hover{
    background: #6cb3ff;
    transform: translateY(-1px);
}

/* ============ 头像下拉菜单 ============ */
.top-right1{ position: relative; }
.pd-user-menu{
    position: absolute;
    top: 62px;
    right: 0;
    width: 268px;
    background: #22272b;
    border: 1px solid #333a42;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
    padding: 8px;
    z-index: 3000;
}
.pd-user-head{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #2c3238;
    margin-bottom: 6px;
}
.pd-user-head img{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}
.pd-user-head b{
    display: block;
    color: #f2f5fa;
    font-size: 15px;
    font-weight: 700;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pd-user-head span{
    display: inline-block;
    margin-top: 4px;
    color: #8b95a3;
    font-size: 13px;
    cursor: pointer;
}
.pd-user-head span:hover{ color: #50a2ff; }
.pd-user-item{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
    color: #c8d0da;
    font-size: 14px;
    cursor: pointer;
}
.pd-user-item:hover{
    background: #2c3238;
    color: #fff;
}
.pd-user-item i{ font-size: 16px; }

/* ============ 顶部购物车按钮（头像左侧） ============ */
.top-right1 .pd-cart{
    height: 38px;
    line-height: 38px;
    padding: 0 20px;
    margin-right: 18px;
    background: #2c3238;
    color: #eef1f5;
    font-size: 15px;
    font-weight: 700;
    border-radius: 9px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .16s ease;
}
.top-right1 .pd-cart:hover{
    background: #3a424b;
}