.ludo-container{display:flex;justify-content:center;align-items:center;padding:20px;width:100%;height:100%}.ludo-board-wrapper{position:relative;width:90vw;height:90vw;max-width:600px;max-height:600px}.ludo-board{width:100%;height:100%;background-color:#fff;border:3px solid #000;display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);position:relative}.board-cell{border:1px solid #eee;display:flex;justify-content:center;align-items:center;position:relative}.yard-red{grid-area:1/1/span 6/span 6;background-color:#ffdddd}.yard-green{grid-area:1/10/span 6/span 6;background-color:#ddffdd}.yard-blue{grid-area:10/1/span 6/span 6;background-color:#ddddff}.yard-yellow{grid-area:10/10/span 6/span 6;background-color:#ffffdd}.home-base{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:66.66%;height:66.66%;background-color:white;border-radius:10px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:10%;padding:10%;box-sizing:border-box}.home-base div{border-radius:50%;border:2px solid #ccc;background-color:rgba(0,0,0,.05)}.path-blue,.path-green,.path-red,.path-yellow{background-color:transparent}.home-path-red{background-color:#ff5c5c}.home-path-green{background-color:#48d448}.home-path-blue{background-color:#5d5dff}.home-path-yellow{background-color:#ffff60}.safe-spot:after{content:"★";font-size:1.8em;color:rgba(0,0,0,.2);position:absolute;z-index:0;text-align:center;line-height:1}.center-container{grid-area:7/7/span 3/span 3;position:relative;overflow:hidden}.triangle{position:absolute;width:0;height:0;border-style:solid}.triangle-red{border-width:5vh 5vh 0 0;border-color:#ff5c5c transparent transparent;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg)}.triangle-green{border-width:0 5vh 5vh 0;border-color:transparent #48d448 transparent transparent;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg)}.triangle-yellow{border-width:0 0 5vh 5vh;border-color:transparent transparent #ffff60;top:50%;left:50%;transform:translate(-50%,-50%) rotate(135deg)}.triangle-blue{border-width:5vh 0 0 5vh;border-color:transparent transparent transparent #5d5dff;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-135deg)}.token{position:absolute;width:5.5%;height:5.5%;border-radius:50%;border:2px solid rgba(0,0,0,.5);box-shadow:inset 2px 2px 3px rgba(255,255,255,.4),2px 2px 5px rgba(0,0,0,.4);display:flex;justify-content:center;align-items:center;font-weight:700;color:white;text-shadow:1px 1px 2px black;transition:top .3s ease-in-out,left .3s ease-in-out;z-index:10}.token:before{content:"";width:40%;height:40%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.7) 0,rgba(255,255,255,0) 60%)}.token.red{background-color:#d12a2a}.token.green{background-color:#27a827}.token.yellow{background-color:#e0e029}.token.blue{background-color:#3b3bff}.token.movable{cursor:pointer;animation:glow 1.5s infinite alternate}@keyframes glow{0%{box-shadow:inset 2px 2px 3px rgba(255,255,255,.4),2px 2px 5px rgba(0,0,0,.4),0 0 10px #fff,0 0 20px #fff}to{box-shadow:inset 2px 2px 3px rgba(255,255,255,.4),2px 2px 5px rgba(0,0,0,.4),0 0 20px #0ff,0 0 30px #0ff}}.dice-container{width:80px;height:80px;perspective:1000px}.dice{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 1s}.dice.rolling{animation:rolling 1s ease-out}@keyframes rolling{0%{transform:rotateX(0deg) rotateY(0deg)}to{transform:rotateX(3turn) rotateY(3turn)}}.dice-face{position:absolute;width:80px;height:80px;background:white;border:2px solid #ccc;border-radius:10px;display:flex;justify-content:center;align-items:center;font-size:40px;font-weight:700;padding:10px;box-sizing:border-box}.dice-face.one{transform:rotateY(0deg) translateZ(40px)}.dice-face.six{transform:rotateY(180deg) translateZ(40px)}.dice-face.two{transform:rotateY(-90deg) translateZ(40px)}.dice-face.five{transform:rotateY(90deg) translateZ(40px)}.dice-face.three{transform:rotateX(90deg) translateZ(40px)}.dice-face.four{transform:rotateX(-90deg) translateZ(40px)}.dice-dots{display:grid;width:100%;height:100%;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}.dot{width:12px;height:12px;background-color:black;border-radius:50%;align-self:center;justify-self:center}.one .dot:first-child{grid-area:2/2}.two .dot:first-child{grid-area:1/1}.two .dot:nth-child(2){grid-area:3/3}.three .dot:first-child{grid-area:1/1}.three .dot:nth-child(2){grid-area:2/2}.three .dot:nth-child(3){grid-area:3/3}.four .dot:first-child{grid-area:1/1}.four .dot:nth-child(2){grid-area:1/3}.four .dot:nth-child(3){grid-area:3/1}.four .dot:nth-child(4){grid-area:3/3}.five .dot:first-child{grid-area:1/1}.five .dot:nth-child(2){grid-area:1/3}.five .dot:nth-child(3){grid-area:2/2}.five .dot:nth-child(4){grid-area:3/1}.five .dot:nth-child(5){grid-area:3/3}.six .dot:first-child{grid-area:1/1}.six .dot:nth-child(2){grid-area:1/3}.six .dot:nth-child(3){grid-area:2/1}.six .dot:nth-child(4){grid-area:2/3}.six .dot:nth-child(5){grid-area:3/1}.six .dot:nth-child(6){grid-area:3/3}