#starterscreen{
    margin:0;
    padding:0;
    position:absolute;
    z-index: 2;
    width:100%;
    height:auto;
    display:block;
    top:-1rem;
    display:block;
    overflow:hidden;
}
body{
    background-image: url('/icons/ludobackground.png');
    background-size: cover;
    background-position-y: -100px;
    margin:0;
    padding:0;
    position:relative;
}
#starterscreen h1{
    margin:1rem auto;
    padding:0;
    text-align:center;
    font-family:'Poppins';
    font-weight:500;
    display:block;
}
#starterscreen p{
    margin:1rem auto;
    padding:0;
    text-align:center;
    font-family:'Poppins';
    font-weight:500;
    display:block;
}
#offline{
    background-color:white;
    margin:1rem auto;
    padding:1rem 2rem;
    text-align:center;
    font-family:'Poppins';
    font-weight:500;
    box-shadow:0.3rem 0.3rem 0px 1px #000;
    display:block;
    /* transform:rotate(-10deg); */
    /* z-index: -1; */
    animation: buttonmove 1s ease 0.2s;
}
@keyframes buttonmove{
    0%{
        transform:rotate(-10deg);
        z-index: -1;
    }
    90%{
        transform:rotate(-10deg);
        z-index: -1;
    }
    99%{
        transform:rotate(0deg);
        z-index: -1;
    }
    100%{
        transform:rotate(0deg);
        z-index: 0;
    }
}
#offline:hover{
    box-shadow:0.2rem 0.2rem 0px 1px #000;
    transition:ease 0.1s;
}
#computer{
    background-color:white;
    margin:1rem auto;
    padding:1rem 2rem;
    text-align:center;
    font-family:'Poppins';
    font-weight:500;
    box-shadow:0.3rem 0.3rem 0px 1px #000;
    display:block;
}
#computer:hover{
    box-shadow:0.2rem 0.2rem 0px 1px #000;
    transition:ease 0.1s;
}
#content{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    gap:1rem;
    margin:1rem 0rem 0rem 0rem;
}
#hand{
    width:0px;
    height:50px;
    background-color:blanchedalmond;
    margin:1rem auto;
    transform:rotate(-90deg);
    border-radius:50% / 10%;
    animation: handmove 2s ease-in-out 0.1s ;
    opacity:0;
}
@keyframes handmove{
    0%{
        width:0px;
        transform:rotate(-90deg);
        opacity:1;
    }
    50%{
        width:500px;
        transform:rotate(-90deg);
        opacity:1;
    }
    99%{
        width:0px;
        transform:rotate(-80deg);
        opacity:1;
    }
    100%{
        width:0px;
        transform:rotate(-80deg);
        opacity:0;
    }
}
#palm{
    width:50px;
    height:60px;
    background-color:blanchedalmond;
    transform:translateY(-5px);
    border-radius:50% / 20%;
    z-index: 10;
    animation: palmrotate 1s ease 0.1s;
}
@keyframes palmrotate{
    0%{
        transform:rotateY(0deg);
    }
    50%{
        transform:rotateY(5deg);
    }
    70%{
        transform:rotateY(15deg);
    }
    100%{
        transform:rotateY(0deg);
    }
}
.finger{
    width:45px;
    height:10px;
    background: linear-gradient(to left, rgb(255, 235, 205)0%,rgb(249, 198, 122)90%,rgb(253, 177, 144)100%);
    margin:0.35rem 0rem 0.35rem 0rem;
    transform:translate(-30px,1px);
    border-radius: 1rem 0rem 1rem 1rem;
    z-index: 2;
}
.thumb{
    width:30px;
    height:11px;
    background: linear-gradient(to left, rgb(255, 235, 205)0%,rgb(252, 210, 148)90%,rgb(253, 177, 144)100%);
    margin:0.1rem 0rem 0.1rem 0rem;
    transform-origin: left;
    transform:translate(10px,3px) rotate(-35deg);
    border-radius: 1rem 0rem 1rem 1rem;
    z-index: 2;
}
#finger1{
    width:30px;
    transform:translate(-25px,0px) rotate(9deg);
}
#finger4{
    width:40px;
    transform:translate(-25px,1px) rotate(-9deg);
}
.dice-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5rem 0;
    transform:rotate(45deg);
}

.dice-container {
    perspective: 1000px;
}

.dice {
    width: 50px;
    height: 50px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s ease-out;
}

.face {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #ff1500; /* Default color */
    border: 2px solid #c90000;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    color: #fff; /* Default text color */
    box-shadow: 0 0 15px #b3b02b;
}

/* Face positions for a true 3D cube */
.front  { transform: translateZ(20px); }
.back   { transform: translateZ(-20px) rotateY(180deg); }
.right  { transform: translateX(20px) rotateY(90deg); }
.left   { transform: translateX(-20px) rotateY(-90deg); }
.top    { transform: translateY(-20px) rotateX(90deg); }
.bottom { transform: translateY(20px) rotateX(-90deg); }

/* Stable states maintaining 3D structure */
.show-1 { transform: rotateX(0deg) rotateY(0deg); }
.show-2 { transform: rotateX(0deg) rotateY(180deg); }
.show-3 { transform: rotateX(0deg) rotateY(-90deg); }
.show-4 { transform: rotateX(0deg) rotateY(90deg); }
.show-5 { transform: rotateX(-90deg) rotateY(0deg); }
.show-6 { transform: rotateX(90deg) rotateY(0deg); }

/* Rolling animation */
@keyframes roll {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    100% { transform: rotateX(720deg) rotateY(720deg); }
}

.rolling {
    animation: roll 1s ease-out forwards;
}
#one{
    width:20%;
    height:20%;
    border-radius:50%;
    background-color: #000;
}
#two{
    width:15%;
    height:15%;
    border-radius:50%;
    background-color: transparent;
    box-shadow: 10px 10px #000,-10px -10px #000;
}
#three{
    width:15%;
    height:15%;
    border-radius:50%;
    background-color: transparent;
    box-shadow: 10px 10px #000,-10px 10px #000,0px -10px #000;
}
#four{
    width:15%;
    height:15%;
    border-radius:50%;
    background-color: transparent;
    box-shadow: 10px 10px #000,-10px 10px #000,10px -10px #000,-10px -10px #000;
}
#five{
    width:15%;
    height:15%;
    border-radius:50%;
    background-color: #000;
    box-shadow: 10px 10px #000,-10px 10px #000,10px -10px #000,-10px -10px #000;
}
#six{
    width:15%;
    height:15%;
    border-radius:50%;
    background-color: transparent;
    box-shadow: 10px 10px #000,-10px 10px #000,10px -10px #000,-10px -10px #000,-10px 0px #000,10px 0px #000;
}
.dice-wrapper2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5rem 1rem;
    transform:rotate(1deg);
}

.dice-container2 {
    perspective: 1000px;
}

.dice2 {
    width: 50px;
    height: 50px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s ease-out;
}

.face {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #ff1500; /* Default color */
    border: 2px solid #c90000;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    color: #fff; /* Default text color */
    box-shadow: 0 0 15px #b3b02b;
}

/* Face positions for a true 3D cube */
.front  { transform: translateZ(20px); }
.back   { transform: translateZ(-20px) rotateY(180deg); }
.right  { transform: translateX(20px) rotateY(90deg); }
.left   { transform: translateX(-20px) rotateY(-90deg); }
.top    { transform: translateY(-20px) rotateX(90deg); }
.bottom { transform: translateY(20px) rotateX(-90deg); }

/* Stable states maintaining 3D structure */
.show-1 { transform: rotateX(0deg) rotateY(0deg); }
.show-2 { transform: rotateX(0deg) rotateY(180deg); }
.show-3 { transform: rotateX(0deg) rotateY(-90deg); }
.show-4 { transform: rotateX(0deg) rotateY(90deg); }
.show-5 { transform: rotateX(-90deg) rotateY(0deg); }
.show-6 { transform: rotateX(90deg) rotateY(0deg); }

/* Rolling animation */
@keyframes roll {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    100% { transform: rotateX(720deg) rotateY(720deg); }
}

.rolling {
    animation: roll 1s ease-out forwards;
}
#one{
    width:20%;
    height:20%;
    border-radius:50%;
    background-color: #000;
}
#two{
    width:15%;
    height:15%;
    border-radius:50%;
    background-color: transparent;
    box-shadow: 10px 10px #000,-10px -10px #000;
}
#three{
    width:15%;
    height:15%;
    border-radius:50%;
    background-color: transparent;
    box-shadow: 10px 10px #000,-10px 10px #000,0px -10px #000;
}
#four{
    width:15%;
    height:15%;
    border-radius:50%;
    background-color: transparent;
    box-shadow: 10px 10px #000,-10px 10px #000,10px -10px #000,-10px -10px #000;
}
#five{
    width:15%;
    height:15%;
    border-radius:50%;
    background-color: #000;
    box-shadow: 10px 10px #000,-10px 10px #000,10px -10px #000,-10px -10px #000;
}
#six{
    width:15%;
    height:15%;
    border-radius:50%;
    background-color: transparent;
    box-shadow: 10px 10px #000,-10px 10px #000,10px -10px #000,-10px -10px #000,-10px 0px #000,10px 0px #000;
}
.dices{
    display:flex;
    justify-content: center;
    align-items: center;
}
#twoplayer{
    background-color:white;
    margin:1rem auto;
    padding:1rem 2rem;
    text-align:center;
    font-family:'Poppins';
    font-weight:500;
    box-shadow:0.3rem 0.3rem 0px 1px #000;
    display:block;
    flex:1;
    flex-basis:50%;
    max-width:150px;
}
#twoplayer:hover{
    box-shadow:0.2rem 0.2rem 0px 1px #000;
    transition:ease 0.1s;
}
#threeplayer{
    background-color:white;
    margin:1rem auto;
    padding:1rem 2rem;
    text-align:center;
    font-family:'Poppins';
    font-weight:500;
    box-shadow:0.3rem 0.3rem 0px 1px #000;
    display:block;
    flex:1;
    flex-basis:50%;
    max-width:150px;
}
#threeplayer:hover{
    box-shadow:0.2rem 0.2rem 0px 1px #000;
    transition:ease 0.1s;
}
#fourplayer{
    background-color:white;
    margin:1rem auto;
    padding:1rem 2rem;
    text-align:center;
    font-family:'Poppins';
    font-weight:500;
    box-shadow:0.3rem 0.3rem 0px 1px #000;
    display:block;
    flex:1;
    flex-basis:50%;
    max-width:150px;
}
#fourplayer:hover{
    box-shadow:0.2rem 0.2rem 0px 1px #000;
    transition:ease 0.1s;
}
#goback{
    background-color:white;
    margin:1rem auto;
    padding:1rem 2rem;
    text-align:center;
    font-family:'Poppins';
    font-weight:500;
    box-shadow:0.3rem 0.3rem 0px 1px #000;
    display:block;
    flex:1;
    flex-basis:50%;
    max-width:150px;
}
#goback:hover{
    box-shadow:0.2rem 0.2rem 0px 1px #000;
    transition:ease 0.1s;
}
#step2{
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    gap:1rem;
    padding:1rem;
}
#container{
    display:none;
}