body{
margin:0;

background-image:var(--bg);
background-position:center center;
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;

font-family:Arial,sans-serif;
color:#fff;
}

.select-wrap{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:100vh;
}

.select-box{
display:flex;
gap:30px;
}

.select-btn{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:515px;
height:773px;
font-size:22px;
font-weight:bold;
color:#fff;

background-image:var(--bg);

border-radius:10px;
text-decoration:none;
transition:.2s;
}

.select-btn::before{
content:"";
position:absolute;
top:40px;
left:50%;
transform:translateX(-50%);
width:400px;
height:340px;

background-image:var(--before);

background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
.select-btn::after{
content:"";
position:absolute;
bottom:380px;
left:50%;
transform:translateX(-50%);
width:420px;
height:60px;

background-image:var(--line);

background-size:contain;
background-repeat:no-repeat;
background-position:center;
pointer-events:none;
}


.btn-text{
position:absolute;
bottom:180px;
left:50%;
transform:translateX(-50%);
color:#fff;
font-weight:bold;
font-size:22px;
text-shadow:0 0 8px rgba(0,0,0,0.8);
}

.select-btn:hover{
filter:brightness(1.18);
}
.top-logo{
position:absolute;
top:80px;
left:50%;
transform:translateX(-50%);
}

.top-logo img{
width:420px;
max-width:90%;
}


.btn-label{
position:absolute;
bottom:320px;
left:50%;
transform:translateX(-50%);
width:260px;
height:80px;

display:flex;
align-items:center;
justify-content:center;

background-size:contain;
background-repeat:no-repeat;
background-position:center;
}

.btn-label img{
position:absolute;
width:100%;
}

.btn-label span{
position:relative;
font-size:32px;
font-weight:bold;
color:#fff;
white-space:nowrap;
position:relative;
top:-4px;   

text-shadow: 0 0 6px rgba(0,0,0,0.8), 0 0 12px rgba(0,0,0,0.6);
font-family: 'HeirofLightBold';
}
.btn-desc{
position:absolute;
top:460px;
left:50%;
transform:translateX(-50%);

width:320px;
min-height:120px;

text-align:center;
font-size:21px;
color:#000;
line-height:1.5;

white-space:normal;
text-shadow:1px 1px 0 rgba(255,255,255,0.5);
}
.top-area{
text-align:center;

}


.top-decor{
width:180px;
height:120px;
margin:0 auto 12px auto;
margin-bottom:0;

background-image:var(--logo);
background-position:center;
background-size:contain;
background-repeat:no-repeat;

opacity:0.95;
}
.top-text{


font-size:22px;
letter-spacing:2px;
color:#e2d8cc;

text-shadow:
1px 1px 0 #3a332c,
-1px -1px 0 #3a332c,
1px -1px 0 #3a332c,
-1px 1px 0 #3a332c,
0 0 6px rgba(255,220,180,0.3);
line-height:1;
}


.top-text .star{
position:relative;
top:3px;
}
.select-btn{
outline:none;
}

.select-btn:focus{
outline:none;
}


.select-btn:active{
outline:none;
}