Current Turn: Red
Roll the dice!
background: #fff;
border: 2px solid #333;
display: grid;
grid-template-columns: repeat(15, 1fr);
grid-template-rows: repeat(15, 1fr);
position: relative;
}
.cell {
border: 1px solid #ddd;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.home-area {
grid-row: span 6;
grid-column: span 6;
border: 2px solid #333;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.home-inner {
width: 60%;
height: 60%;
background: white;
border-radius: 15%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 10px;
}
.token-spot {
border-radius: 50%;
border: 1px solid #ccc;
}
.center-area {
grid-row: 7 / span 3;
grid-column: 7 / span 3;
background: conic-gradient(#e74c3c 0deg 90deg,
#27ae60 90deg 180deg,
#f39c12 180deg 270deg,
#3498db 270deg 360deg);
position: relative;
}
/* Colors */
.red-bg {
background: #e74c3c;
}
.green-bg {
background: #27ae60;
}
.yellow-bg {
background: #f39c12;
}
.blue-bg {
background: #3498db;
}
.token {
width: 70%;
height: 70%;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
position: absolute;
z-index: 10;
cursor: pointer;
transition: transform 0.2s;
}
.token:hover {
transform: scale(1.1);
}
.token.red {
background: #e74c3c;
}
.token.green {
background: #27ae60;
}
.token.yellow {
background: #f39c12;
}
.token.blue {
background: #3498db;
}
.dice-box {
background: var(--card);
padding: 15px;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.dice {
font-size: 40px;
width: 60px;
height: 60px;
background: white;
color: #333;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 0 #ccc;
user-select: none;
}
.dice:active {
transform: translateY(4px);
box-shadow: none;
}
.turn-indicator {
padding: 5px 10px;
border-radius: 20px;
font-size: 14px;
font-weight: bold;
color: white;
}
.star {
position: absolute;
font-size: 10px;
color: rgba(0, 0, 0, 0.3);
}
Current Turn: Red
Roll the dice!
PlayZone · Static JS game