﻿
/***** 玩家区域 *****/
.player_progress_bar
{
    position:absolute;
    width:300px;
    height:20px;
    left:350px;
    bottom:160px;
    display:none;
}
.player_progress_bg, .player_progress
{
    position:absolute;
    float:left;
}
.player_progress_bg
{
    width:300px;
}
.player_progress
{
    width:296px;
    height:12px;
    top:1px;
    left:2px;
}

#player
{
    position: absolute;
    width: 1000px;
    height: 146px;
    left: 0;
    bottom: 5px;
    text-align: center;
    background: url("../img/system/player_info.png") no-repeat;
    border: 1px solid #000;
    -moz-box-shadow:0 8px 2px #000;
    box-shadow:0 8px 2px #000;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
#player_cover
{
    position:absolute;
    background-color: #000;
    width: 1000px;
    height: 146px;
    left: 0;
    bottom: 5px;
    display:block;
    opacity: 0.3;
}
#player.player_dead #player_cover
{
    display: block !important;
    opacity: 0.55;
}

/*** 装备区域 ***/
.img_box
{
    width: 182px;
    height: 255px;
}
.equip_box, .equip_back
{
    position:absolute;
    width:142px;
    height:25px;
    cursor:pointer;
    left:0;
}
.equip_back
{
    background-color:#000;
    opacity:0.3;
    cursor:default;
    display:none;
}
#attack, #defend, #attack_horse, #defend_horse
{
    position: absolute;
    width: 142px;
    height: 25px;
    left: 8px;
}
#attack
{
    top: 12px;
}
#attack div
{
    float: left;
    font-weight: bold;
}
#attack.equipment_skill_available
{
    cursor:pointer;
    border-radius:2px;
    background:rgba(170, 102, 24, 0.16);
    box-shadow:
        0 0 5px 1px rgba(255, 201, 72, 0.72),
        inset 0 0 4px rgba(255, 224, 139, 0.28);
    transition:
        background 120ms ease,
        box-shadow 120ms ease,
        filter 120ms ease;
}
#attack.equipment_skill_available .equip_border
{
    filter:drop-shadow(0 0 3px rgba(255, 211, 91, 0.95));
}
#attack.equipment_skill_available .equip_img
{
    filter:brightness(1.08) saturate(1.08);
}
#attack.equipment_skill_active .equip_border
{
    filter:
        brightness(1.35)
        drop-shadow(0 0 6px #fff1a1)
        drop-shadow(0 0 4px #ffb52e);
}
#attack.equipment_skill_active
{
    background:rgba(255, 229, 145, 0.28);
    box-shadow:
        0 0 10px 3px rgba(255, 239, 165, 0.98),
        0 0 5px 1px rgba(255, 160, 25, 0.95),
        inset 0 0 6px rgba(255, 252, 220, 0.72);
}
#attack.equipment_skill_active .equip_img
{
    filter:brightness(1.42) saturate(1.24);
}
#attack.equipment_skill_available:focus
{
    outline:1px solid #ffe07a;
    outline-offset:1px;
}
   .equip_border
    {
        left:0;
        width:142px;
        height:25px;
    }
    .equip_img
    {
        position:absolute;
        left:0;
        width:137px;
        height:21px;
        margin:2px;
        object-fit:cover;
        object-position:center;
    }
    #attack[data-card-name="古锭刀"] .equip_img
    {
        object-position:center 38%;
    }
    #attack_horse[data-card-name="骅骝"] .equip_img
    {
        object-position:center 44%;
    }
    .equip_crop_name
    {
        position:absolute;
        z-index:1;
        top:3px;
        left:40px;
        right:40px;
        overflow:hidden;
        color:#28170d;
        font-size:12px;
        font-weight:bold;
        line-height:18px;
        text-align:center;
        text-overflow:ellipsis;
        text-shadow:0 1px rgba(255,255,255,0.72);
        white-space:nowrap;
    }
    .equip_pattern
    {
        position:absolute;
        right:23px;
        height:15px;
        top:5px;
    }
    .equip_num
    {
        position:absolute;
        right:3px;
        width:20px;
        font-weight:bold;
        top:3px;
    }

#defend
{
    top: 44px;
}
#attack_horse
{
    top: 75px;
}
#defend_horse
{
    top: 108px;
}
.equip_name
{
    width: 55%;
    height: 100%;
    overflow: hidden;
}

/** 玩家牌区* */
#cards
{
    position: absolute;
    width: 570px;
    height: 131px;
    left: 163px;
    top: 8px;
}
.player_card, .player_card img, 
.choose_card, .choose_card img
{
    position: absolute;
    top:0;
    width: 93px;
    height: 131px;
    cursor: pointer;
    display: block;
}
.player_card.action_skill_material_selectable
{
    filter:brightness(1.08);
}
.player_card.action_skill_material_selected
{
    outline:3px solid #e7c769;
    border-radius:3px;
    box-shadow:0 0 12px 3px rgba(245, 205, 91, 0.9);
}
#attack.action_skill_material_selectable,
#defend.action_skill_material_selectable,
#attack_horse.action_skill_material_selectable,
#defend_horse.action_skill_material_selectable
{
    cursor:pointer;
    border-radius:2px;
    background:rgba(170, 102, 24, 0.18);
    box-shadow:
        0 0 5px 1px rgba(255, 201, 72, 0.78),
        inset 0 0 4px rgba(255, 224, 139, 0.28);
}
#attack.action_skill_material_selected,
#defend.action_skill_material_selected,
#attack_horse.action_skill_material_selected,
#defend_horse.action_skill_material_selected
{
    background:rgba(255, 229, 145, 0.3);
    box-shadow:
        0 0 10px 3px rgba(255, 239, 165, 0.98),
        0 0 5px 1px rgba(255, 160, 25, 0.95),
        inset 0 0 6px rgba(255, 252, 220, 0.72);
}
.pat_num
{
    position: absolute;
    text-align: center;
    width: 20px;
    height: 40px;
    font-weight: bold;
    color: Red;
    display: block;
    margin: 6px 0 0 6px;
}
.pat_num span
{
    display: block;
    line-height: 20px;
}
.pattern
{
    width:14px;
    height:15px;
}
.pattern img
{
    width:14px;
    height:15px;
}
.num
{
    width: 14px;
    font-size:18px;
}
/* 遮盖层 */
.select_unable
{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
    display: none;
    z-index: 20;
    cursor: not-allowed;
    border-radius: 3px;
}
.player_card.card_unusable
{
    filter: grayscale(0.9) brightness(0.65);
    cursor: not-allowed;
}
.player_card.card_unusable:after
{
    content: "当前不可用";
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 8px;
    z-index: 21;
    padding: 2px 0;
    color: #eee4c9;
    background: rgba(20, 13, 8, 0.82);
    border: 1px solid rgba(238, 228, 201, 0.45);
    border-radius: 2px;
    font-size: 11px;
    text-align: center;
    pointer-events: none;
}
.card_drag
{
    position: absolute;
    width: 100%;
    height: 100%;
}

/*** 按钮 ***/
#ok_cancel_abandon
{
    position: absolute;
    right: 163px;
    width: 90px;
    height: 144px;
    top: 1px;
}
#ok_cancel_abandon img
{
    cursor: pointer;
    display: block;
}
#ok, #cancel, #abandon
{
    display:none;
}
#ok_cancel_abandon div, #ok_cancel_abandon img
{
    position: absolute;
}
#ok, #cancel, #ok img, #cancel img
{
    width: 56px;
    height: 68px;
}
/* 取消 */
#cancel
{
    left: 1px;
    bottom: 0;
}
/* 弃牌 */
#abandon
{
    width: 30px;
    height:70px;
    right: 2px;
    top:38px;
}
#abandon img
{
    width: 30px;
    height:70px;
}
/* 身份 */
#player_identity
{
    position:absolute;
    right:2px;
    top:2px;
    cursor:pointer;
}
#player_identity, #player_identity img
{
    width:25px;
    height:26px;
}

/*** 玩家信息 ***/

/* 玩家国家 */
#player_country
{
    display:none;
    position:absolute;
    top:2px;
    left:2px;
    width:22px;
    height:22px;
}
/* 玩家头像 */
#player_head
{
    display: none;
    position: absolute;
    z-index:45;
    top: 8px;
    right: 43px;
    width: 113px;
    height: 106px;
}
#main.game_scene_active #player_head
{
    display: block;
}
#player_head_img
{
    float: left;
    width: 113px;
    height: 106px;
    object-fit: cover;
    object-position: center 30%;
}
/* 名称 */
#player_name_back
{
    background-color: #000;
    opacity: 0.6;
}
#player_name_back, #player_name
{
    position: absolute;
    float: left;
    width: 100%;
    height: 15px;
    color: #fff;
    font-size: 13px;
}
#player_blods
{
    position: absolute;
    width:29px;
    height:139px;
    right:6px;
    top:2px;
}
#player_blod_0, #player_blod_1
{
    width:100%;
    height:100%;
    position:absolute;
    float:left;
}
#player_blods img
{
    width:21px;
    height:21px;
    margin:3px 0 4px 0;
}
