/* =========================
   基础设置
========================= */

* {
    box-sizing: border-box;
    user-select: none;
}


html,
body {

    margin: 0;
    padding: 0;

    width:100%;
    height:100%;

    overflow:hidden;

    background:#f8f4dc;

    font-family:
    "Microsoft YaHei",
    sans-serif;
}



#game {

    width:100vw;
    height:100vh;

    position:relative;

    overflow:hidden;

}




/* =========================
   页面
========================= */


.page {

    position:absolute;

    width:100%;
    height:100%;

    display:none;

}


.page.active {

    display:block;

}





/* =========================
   背景
========================= */


.full-bg,
.home-bg {

    position:absolute;

    width:100%;
    height:100%;

    object-fit:cover;

    left:0;
    top:0;

}




/* =========================
   首页
========================= */


.home-ui {

    position:absolute;

    width:100%;

    height:auto;

    left:0;

    top:0;

}



.btn {

    position:absolute;

    cursor:pointer;

    transition:
    transform .15s ease;

}



.btn:active {

    transform:scale(.94);

}






/* 两个模式按钮 */

.mode1 {

    width:55%;

    left:22.5%;

    top:42%;

}


.mode2 {

    width:55%;

    left:22.5%;

    top:60%;

}






/* ======================
   规则页面
====================== */


#rulePage{
    position:absolute;
    width:100%;
    height:100%;
}



.rule-overlay{

    position:absolute;

    inset:0;

    background:
    rgba(0,0,0,0.31);

    z-index:5;

}




/* 规则卡片 */

.rule-card{
    z-index:10;
}

.rule-back,
.rule-start{
    z-index:11;
}


.rule-card-bg{

    position:absolute;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:1;

}



.rule-content{

    position:absolute;

    left:16px;

    right:16px;

    top:20px;

    z-index:2;

}





.rule-content{


    position:absolute;


    left:16px;

    right:16px;


    top:20px;


}




.rule-title{


    text-align:center;


    font-size:24px;


    font-weight:bold;


    color:#8cba3d;


    letter-spacing:-1px;


}









/* 返回按钮 */


#rulePage .rule-back{

    width:76px;

    left:calc(50% - 115px);

    top:72%;

}


#rulePage .rule-start{

    width:76px;

    left:calc(50% + 40px);

    top:72%;

}

#rulePage .full-bg{

    filter:brightness(0.7);

}

.rule-card{

    position:absolute;

    width:54%;

    aspect-ratio:230 / 336;

    left:50%;

    top:35%;

    transform:translate(-50%,-50%);

}


#rulePage .rule-back{

    width:76px;

    left:calc(50% - 110px);

    top:68%;

}


#rulePage .rule-start{

    width:76px;

    left:calc(50% + 35px);

    top:68%;

}





/* =========================
游戏页面
========================= */


.game-back {

    width:18%;

    left:5%;

    top:5%;

}




/* 倒计时 */

/* 倒计时整体 */

.timer-box {

    position:absolute;

    width:18%;

    right:5%;

    top:4%;

}


/* 圆形背景 */

.timer-bg {

    width:100%;

    height:auto;

    display:block;

}



/* 数字 */

#timer {

    position:absolute;

    left:0;

    top:50%;


    width:100%;


    transform:translateY(-35%);


    text-align:center;


    font-size:23px;


    font-weight:bold;


    color:#8abb3d;

}







/* 卡牌容器 */

#cardContainer {


    position:absolute;


    width:90%;


    height:65%;


    left:5%;


    top:20%;


    display:grid;


    justify-content:center;


    align-content:center;


   

}







/* 卡牌 */

.card {


    position:relative;


    background:white;


    border-radius:7px;


    overflow:hidden;


    cursor:pointer;


    transition:.2s;


}



.card img {


    width:100%;


    height:100%;


    object-fit:cover;


}




/* 第一关 */

.level-1 .card {

    width:150px;

    height:150px;

}



/* 第二关 */

.level-2 .card {

    width:87px;

    height:87px;

}




/* 第三关 */

.level-3 .card {

    width:81px;

    height:81px;

}

#cardContainer.level-1 {

    gap:10px;

}


#cardContainer.level-2 {

    gap:7px;

}


#cardContainer.level-3 {

    gap:12px;

}

.card.selected {


    border:

    5px solid #ADD5A2;


    transform:scale(.95);


}





.card.remove {


    opacity:0;


    transform:scale(.8);


    transition:.3s;


}







/* =========================
弹窗
========================= */


.overlay-page {

    background:rgba(0,0,0,.35);

}



.overlay {


    position:absolute;


    width:100%;


    height:100%;


}





.success-box,
.fail-box {


    position:absolute;


    width:65%;


    left:17.5%;


    top:30vh;


}



.result-panel {


    width:100%;


    display:block;


}




#successText {


    position:absolute;


    width:100%;

    left:0;


    top:33%;

 
    text-align:center;


    font-size:18px;


    font-weight:bold;


    color:#8abb3d;


}

.fail-box {


    position:absolute;


    width:65%;


    left:17.5%;


    top:32%;


}

#failText {


    position:absolute;


    width:100%;


    left:0;


    top:33%;


    text-align:center;


    font-size:18px;


    font-weight:bold;


    color:#8cba3d;


}



.result-back {


    width:20vw;


    max-width:120px;

    left:50%;

    transform:translateX(-140%);


    bottom:18%;


}



.result-next {


    width:20vw;


    max-width:120px;

    left:50%;

    transform:translateX(40%);


    bottom:18%;


}








/* =========================
动画
========================= */


.shake {


    animation:shake .7s;

}



@keyframes shake {


    0%{
        transform:translateX(0);
    }


    20%{
        transform:translateX(-10px);
    }


    40%{
        transform:translateX(10px);
    }


    60%{
        transform:translateX(-8px);
    }


    80%{
        transform:translateX(8px);
    }


    100%{
        transform:translateX(0);
    }


}




/* =========================
电脑预览限制
========================= */


@media(min-width:700px){


#game{

    width:430px;

    height:932px;

    margin:auto;

}


body{

    background:#ddd;

}


}

/* 第三关最终返回按钮 */

.last-level-back {

    left:50%;

    transform:translateX(-50%);

    bottom:18vh;

}