body {
    position: relative;
    left: 0;
    width: 100%;
    padding: 0px;
    margin: 0px;
    
}

ul, li {
    list-style: none;
}

footer {
    margin: 50px 20px;
}


/* 1. 定义默认 CSS 变量（基础皮肤） */
:root {
    --board-bg: url(../image/bg3.jpg); /* 游戏背景色 */
    --game-main-color: #409eff; /* 主色调（按钮、边框等） */
    --text-color: #333; /* 文字颜色 */
    --btn-bg: var(--game-main-color);
    --btn-text: #fff;
}

/* 2. 定义深色皮肤的变量覆盖 */
.theme_dark {
    --board-bg: #363636;
}

/* 3. 定义粉色皮肤的变量覆盖 */
.theme_huamu {
    --board-bg: url(../image/bg3.jpg);
}


.theme_pinjiemu {
    --board-bg: url(../image/bg1.jpg);
}

.theme_hutaomu {
    --board-bg: url(../image/bg2.jpg);
}

.theme_liumu {
    --board-bg: url(../image/bg柳木.jpg);
}


.theme_heimu {
    --board-bg: url(../image/bg黑木.jpg);
}

.theme_hutao {
    --board-bg: url(../image/bg胡桃.jpg);
}

.board {
    margin: 30px auto;
    position: relative;
    font-size: 12px;
    text-align: center;
    background: var(--board-bg);
    /*background-color: #e8c58d;*/
    border-radius: 15px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2), inset 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.rotate180 {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Safari and Chrome */
}

.contentWidth {
    
}

/* 320 到 375之间*/
.vue {
    position: relative;
    
}

.mycontainer {
    border: 0px solid blue;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /*z-index: -400;*/
    position: relative;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    
}

.item {
    /*    width: 55px;
    height: 55px;*/
    border-left: 1px solid #dddddd;
    border-top: 1px solid #dddddd;
    /*z-index: -300;*/
    background-color: rgba(255, 255, 255, 0);
}

.itemWith{

}


.area, .content {
    position: absolute;
    top: 0px;
    left: 0px;
    /*相对定位*/
    /*z-index: -200;*/
    
}

.content {
    background-image: url(../image/bg1.jpg);
    
}


.areadiv {
    /*    width: 320px;*/
    border: 1px solid #ccc;
    border-radius: 10px;
    color: #111111;
    margin: 10px auto;
    line-height: 28px;
    font-size: 14px;
    position: relative;
    padding: 10px 10px 10px 10px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2), inset 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.head {
    margin: 10px auto;
    
}

.banner {
    margin:20px auto 10px auto;

}

.message {
    font-size: 14px;
    color: #f61010;
    text-shadow: 1px 1px 3px #ccc;
/*    vertical-align: middle;*/
}

.dot, .point {
    position: absolute;
    border-radius: 50%;
    z-index: 100;
    
}

.dot {
    
/*    margin-top: -12px;
    margin-left: -12px;
    width: 24px;
    height: 24px;*/
    border: 1px dashed #ccc;
}

.point {
    
/*    margin-top: -12px;
    margin-left: -12px;
    width: 24px;
    height: 24px;*/
    color: #fffff1;
    box-shadow: 2px 2px 5px #808080;
}

.foucs, .active {
    /*    margin-top: -12px;
    margin-left: -12px;*/
    /*    border: 3px solid #ffffff;*/
    /*    outline: 3px solid #8ab4f8;
    box-shadow: 2px 2px 7px #000000;*/
    outline: 2px solid #ffffff;
    /*    outline-offset: 2px;*/
    /*opacity: 1;*/

    animation: outlineOffsetCycle 1200ms linear infinite;
}

@keyframes outlineOffsetCycle {
    /* 起始状态：outline-offset 为 2px */
    0% {
        outline-offset: 2px;
    }
    /* 中间状态（50% 时刻）：outline-offset 达到 5px（峰值） */
    50% {
        outline-offset: 4px;
    }
    /* 结束状态：outline-offset 回到 2px，与起始状态一致，保证循环流畅无断层 */
    100% {
        outline-offset: 2px;
    }
}



.foucs::before, .active::before, .foucs::after,.active::after{
    content: "";
    position: absolute;
    border-radius: 1px;
    background-color: #ff6a00;
}

.foucs::before, .active::before {
    width: 22px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.foucs::after, .active::after {
    width: 2px;
    height: 22px;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}





.foucsed {
    /*    margin-top: -12px;
    margin-left: -12px;*/
    /*    border: 3px solid #ffffff;*/
    /*    box-shadow: 1px 1px 3px #f5e213;*/

    outline: 2px solid #ffffff;
    outline-offset: 2px;
    /*opacity: 1;*/
    /*    position: relative;*/
}





/*    .foucsed::before, .foucsed::after {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        border: 2px solid #fe6b36;
    }

    .foucsed::before {
        top: 50%;
        left: 50%;
        border-right: none;
        border-bottom: none;
        transform: translate(-10%, -10%);
    }

    .foucsed::after {
        bottom: 50%;
        right: 50%;
        border-left: none;
        border-top: none;
        transform: translate(10%, 10%);
    }*/




    /*颜色描述 CSS 色值（推荐） 特点 & 适用场景
    柔和蓝（万能强调色） #2D62ED（rgb(45,98,237)）、#3B82F6（浅一点的蓝） 低饱和蓝色，视觉舒适，黑白背景对比度充足，适合链接、按钮、重点强调内容
    墨绿（沉稳护眼） #1E8883（rgb(30,136,131)）、#22C55E（柔和绿） 自然护眼色，不刺眼，适合成功提示、图标、次要强调色
    深紫（低调高级） #6366F1（rgb(99,102,241)）、#7C3AED（深紫） 低饱和紫色，视觉干扰小，适合特殊标记、分类标签，黑白背景均适配*/


    .foucsed::before, .foucsed::after {
        content: "";
        position: absolute;
        border-radius: 1px;
        background-color:#ff6a00;
    }

    .foucsed::before {
        width: 22px;
        height: 2px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);  
        
        
    }

    .foucsed::after {
        width: 2px;
        height: 22px;
        bottom: 50%;
        right: 50%; 
        transform: translate(50%, 50%);
        
    }



/* 全局默认样式（桌面端优先，也可采用移动端优先） */
.outline-animate {
    width: 120px;
    height: 120px;
    outline: 2px solid #ff4400;
    animation: outlineOffsetCycle 2s ease-in-out infinite;
}

/* 断点1：平板（视口 ≤ 1444px） */
@media screen and (max-width: 1444px) {
    .foucs::before, .active::before {
        width: 20px;
        height: 2px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .foucs::after, .active::after {
        width: 2px;
        height: 20px;
        bottom: 50%;
        right: 50%;
        transform: translate(50%, 50%);
    }

    .foucsed::before {
        width: 20px;
        height: 2px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .foucsed::after {
        width: 2px;
        height: 20px;
        bottom: 50%;
        right: 50%;
        transform: translate(50%, 50%);
    }
}

/* 断点1：平板（视口 ≤ 992px） */
@media screen and (max-width: 1024px) {
    .foucs::before, .active::before {
        width: 16px;
        height: 2px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .foucs::after, .active::after {
        width: 2px;
        height: 16px;
        bottom: 50%;
        right: 50%;
        transform: translate(50%, 50%);
    }

    .foucsed::before {
        width: 16px;
        height: 2px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .foucsed::after {
        width: 2px;
        height: 16px;
        bottom: 50%;
        right: 50%;
        transform: translate(50%, 50%);
    }
}

/* 断点2：大屏手机（视口 ≤ 768px） */
@media screen and (max-width: 768px) {
    .foucs::before, .active::before {
        width: 14px;
        height: 2px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .foucs::after, .active::after {
        width: 2px;
        height: 14px;
        bottom: 50%;
        right: 50%;
        transform: translate(50%, 50%);
    }

    .foucsed::before {
        width: 14px;
        height: 2px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .foucsed::after {
        width: 2px;
        height: 14px;
        bottom: 50%;
        right: 50%;
        transform: translate(50%, 50%);
    }
}





.btn {
    line-height: 18px;
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 5px;
    border: 0px;
/*    background-color:#f61010;*/
    color: #ffffff;
    outline: 0px;
/*    box-shadow: 0px 0px 3px #fff;*/
}

.btnlg {
    padding: 6px 18px;
    font-size:14px;
}

/*    .btn:hover {
        background-color: #f61010;
        color: #ffffff;
    }*/
/** 小字一方 */
.blue {
    /*     background-image: radial-gradient(#1167FF 10%, #2E7AFF 65%);*/
    /*    background-image: radial-gradient(#ffffff 10%, #eeeeee 65%);
        

        background-image: url(../image/whitepan.jpg);
    */
    /*background-color: #808080;
    background-position: center center;
    background-size: cover;*/ /* 确保图片覆盖整个元素，同时保持图片比例 */
    /*background-repeat: no-repeat;*/ /* 防止图片重复 */
    /* 棋子基础尺寸和形状（圆形棋子） */
    /*    width: 120px;
    height: 120px;*/
    border-radius: 50%; /* 圆形棋子，如需方形棋子可改为小数值圆角 */
    /* 立体核心：多层阴影实现厚度和立体感 */
    box-shadow:
    /* 内层阴影：模拟棋子表面光影，增强圆润感 */
    inset 0 5px 15px rgba(255, 255, 255, 0.7), inset 0 -5px 15px rgba(0, 0, 0, 0.3)
    /*,*/
    /* 外层阴影：模拟棋子的立体厚度和投影，营造悬浮感 */
    /*0 8px 10px rgba(0, 0, 0, 0.2), 0 20px 30px rgba(0, 0, 0, 0.15), 0 35px 45px rgba(0, 0, 0, 0.1)*/
    ;
    /* 背景渐变：增强光影层次，更贴近真实棋子质感 */

    background: linear-gradient( 5deg, #f4f4f5 0%, #edeeef 50%, #c7c7c8 100% );
    background: linear-gradient( 45deg, #cccccc 0%, #ffffff 50%, #eeeeee 100% );
    /*    background: linear-gradient( 135deg, #2c3e50 0%, #f5f5f5 50%, #ffffff 100% );*/
    /* 可选：添加棋子标识（如文字/图标） */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 48px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}


/** 大字一方 */
.orange {
    /*background-image: radial-gradient(#000000 10%, #222222 65%); */
    /*background-image: radial-gradient(#FFCC22 2%, #ff8800 85%);*/
    /*    background-image: radial-gradient(#ff3422 2%, #fb2f2f 85%);*/
    /*    background-color: #000000;*/
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px;
    /*background-color: #2a2a2a;*/
    /*    background-image: url(../image/black.jpg);*/
    /*background-position: center center;
    background-size: cover;*/ /* 确保图片覆盖整个元素，同时保持图片比例 */
    /*background-repeat: no-repeat;*/ /* 防止图片重复 */
    /* 棋子基础尺寸和形状（圆形棋子） */

    border-radius: 50%; /* 圆形棋子，如需方形棋子可改为小数值圆角 */
    /* 立体核心：多层阴影实现厚度和立体感 */
    box-shadow:
    /* 内层阴影：模拟棋子表面光影，增强圆润感 */
    inset 0 5px 5px rgba(255, 255, 255, 0.7), inset 0 -5px 5px rgba(0, 0, 0, 0.3)
    /* 外层阴影：模拟棋子的立体厚度和投影，营造悬浮感 */
/*    ,0 8px 10px rgba(0, 0, 0, 0.2), 0 20px 30px rgba(0, 0, 0, 0.15), 0 35px 45px rgba(0, 0, 0, 0.1)*/
    ;
    /* 背景渐变：增强光影层次，更贴近真实棋子质感 */
    background: linear-gradient( 135deg, #2c3e50 0%, #1a2530 50%, #111820 100% );
    /* 可选：添加棋子标识（如文字/图标） */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 48px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.gray {
    /*background-color: #ffffff;*/
}



.element {
    background-image: url('path/to/your/image.jpg');
    background-position: center center;
    background-size: cover; /* 确保图片覆盖整个元素，同时保持图片比例 */
    background-repeat: no-repeat; /* 防止图片重复 */
}




.labforcheck {
    vertical-align: middle;
}

.checkbig {
    vertical-align: middle;
}

a {
    text-decoration: none;
    color: #999999;
}
    a:hover {
        text-decoration: none;
        color: #888888;
    }


@keyframes AnimateBG {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.selectmodeitem {
    width: 100%;
    height: auto;
    background-size: 300% 300%;
    background-image: linear-gradient(-45deg, rgba(59, 227, 118) 0%, rgba(87, 142, 230) 25%, rgb(184, 106, 213) 51%, rgb(237, 80, 80) 100%);
    animation: AnimateBG 20s ease infinite;
    border-radius: 10px;
    text-align: center;
    margin-top: 8px;
    padding: 80px 0px;
    color: #ffffff;
    font-size: 16px;
    font-family: sans-serif, "Microsoft YaHei", Cambria, Verdana, Georgia, Arial;
    text-decoration: none;
}

    .selectmodeitem:hover {
        background-color: #ff4e4e;
        text-decoration: none;
    }

.col-left{
        padding-right:4px;
        /*padding-left:15px;*/
    }

.col-right {
    padding-left: 4px;
    /*padding-right: 15px;*/
}

.container {
    padding-right: 8px;
    padding-left: 8px;
}
.daojishi {
    font-size: 12px;
    color: #f61010;
    text-shadow: 1px 1px 3px #ccc;
    vertical-align: middle;
}

blockquote {
    text-indent: 2em; /* 首行缩进2个字符的宽度 */
}

mark {
    color: palevioletred;
}

.container {
    margin-top: 10px;
}



.user-info{

}

.facearea {
    height: 120px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.leftarea,.centerarea,.rightarea {
/*    width: 80px;*/
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.face{
    width:60px;
    height:60px;
    border-radius:50%;
    border:1px solid #ccc;
}
.name {
    font-size: 12px;
    margin: 0px;
    padding: 0px;
}

.info {
    font-size: 12px;
    margin: 0px;
    padding: 0px;
}