*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body{
    background-color: #e84028;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:16px;
}
.container{
    display:flex;
    gap:24px;
    align-items:flex-start;
}
.canvas-area{
    width:760px;
    height:840px;
    background:#ffffff;
    border:2px solid #aaa;
}
.sidebar{
    display:flex;
    flex-direction:column;
    gap:32px;
    align-items:center;
    padding-top:8px;
}
.point-wrap{
    width:100%;
}
.btn{
    width:160px;
    height:160px;
    border-radius:24px;
    border:2px solid #aaa;
    background:#fff;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
}
.btn:active{
    transform:scale(0.96);
}
.btn img{
    width:100px;
    height:100px;
}
.text-next{
    font-size:32px;
    font-weight:bold;
    color:#000;
}
.point-text{
    font-size:30px;
    font-weight:bold;
}
.point-num{
    font-size:48px;
    font-weight:bold;
    text-align:right;
}

/* ========== 移动端适配 ========== */
@media (max-width: 992px) {
    .container{
        flex-direction: column;
        align-items: center;
    }
    .canvas-area{
        width: min(90vw, 600px);
        height: min(110vw, 660px);
    }
    .sidebar{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        padding-top:0;
    }
    .btn{
        width: 110px;
        height:110px;
    }
    .btn img{
        width:70px;
        height:70px;
    }
    .text-next{
        font-size:24px;
    }
    .point-text{
        font-size:22px;
    }
    .point-num{
        font-size:36px;
    }
    .point-wrap{
        width: auto;
    }
}

@media (max-width: 480px) {
    .canvas-area{
        width: 92vw;
        height: 105vw;
    }
    .btn{
        width: 85px;
        height:85px;
        border-radius:16px;
    }
    .btn img{
        width:52px;
        height:52px;
    }
    .text-next{
        font-size:20px;
    }
    .point-text{
        font-size:18px;
    }
    .point-num{
        font-size:28px;
    }
}
