body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{--board-width:45vw;--board-min-width:370px;--padding:0rem;--p1-color:red;--p2-color:green;--p3-color:blue;--p4-color:#ff0;--profile-distance:10rem;--profile-width:6rem;--profile-connector-color:#80808087;--profile-box-shaodw:0 0 10px 2px #1414144d;--box-border-color:rgba(87,87,87,.473);box-sizing:border-box}.App{align-items:center;display:flex;height:100vh;justify-content:center;width:100vw}.board{aspect-ratio:1;background-color:#fff;box-shadow:0 0 25px 1px #1414144d;min-width:var(--board-min-width);padding:var(--padding);position:relative;width:var(--board-width)}.player-ground{align-items:center;aspect-ratio:1;display:flex;justify-content:center;position:absolute}.player-ground.p1{background-color:var(--p1-color);border:2px solid var(--p1-color);left:var(--padding)}.player-ground.p2{background-color:var(--p2-color);border:2px solid var(--p2-color);right:var(--padding)}.player-ground.p3{background-color:var(--p3-color);border:2px solid var(--p3-color);bottom:var(--padding);right:var(--padding)}.player-ground.p4{background-color:var(--p4-color);border:2px solid var(--p4-color);bottom:var(--padding);left:var(--padding)}.player-ground .p-avatar{grid-gap:10%;aspect-ratio:1;background-color:#fff;border-radius:20px;display:grid;gap:10%;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);max-width:65%;rotate:45deg;width:65%}.player-ground .p-avatar .dots{align-self:center;aspect-ratio:1;border-radius:50%;justify-self:center;width:50%}.player-ground.p1 .p-avatar .dots{background-color:var(--p1-color)}.player-ground.p2 .p-avatar .dots{background-color:var(--p2-color)}.player-ground.p3 .p-avatar .dots{background-color:var(--p3-color)}.player-ground.p4 .p-avatar .dots{background-color:var(--p4-color)}.player-ground .user-profile{align-items:center;border:3px solid var(--profile-connector-color);box-shadow:var(--profile-box-shaodw);color:gray;cursor:pointer;display:flex;flex-direction:column;font-weight:700;height:4rem;justify-content:space-between;letter-spacing:.5px;padding:.4rem;position:absolute;width:var(--profile-width)}.player-ground .user-profile>img{aspect-ratio:1;border-radius:50%;object-fit:cover;width:1.4rem}.player-ground .user-profile:after{background-color:var(--profile-connector-color);box-shadow:var(--profile-box-shaodw);content:"";height:2px;position:absolute;width:3.9rem}.player-ground.p1 .user-profile{border-radius:10px 0 10px 10px;left:calc(var(--profile-distance)*-1);top:0}.player-ground.p2 .user-profile{border-radius:0 10px 10px 10px;right:calc(var(--profile-distance)*-1);top:0}.player-ground.p3 .user-profile{border-radius:10px 10px 10px 0;bottom:0;right:calc(var(--profile-distance)*-1)}.player-ground.p4 .user-profile{border-radius:10px 10px 0 10px;bottom:0;left:calc(var(--profile-distance)*-1)}.player-ground.p1 .user-profile:after{right:-4.05rem;top:-2.3px}.player-ground.p2 .user-profile:after{left:-4.05rem;top:-2.3px}.player-ground.p3 .user-profile:after{bottom:-2.3px;left:-4.05rem}.player-ground.p4 .user-profile:after{bottom:-2.3px;right:-4.05rem}.winning-area{align-items:center;aspect-ratio:1;background-color:hsla(0,0%,84%,.304);color:#adff2f;font-size:3rem;justify-content:center;margin:calc(50% - var(--padding));transform:translate(-50%,-50%);-webkit-user-select:none;user-select:none}.area,.winning-area{display:flex;position:absolute}.area{z-index:1000}.area.a1{bottom:var(--padding);left:50%;transform:translateX(-50%)}.area.a2{flex-direction:column!important;top:50%;transform:translateY(-50%)}.area.a3{left:50%;transform:translateX(-50%)}.area.a4{flex-direction:column!important;right:var(--padding);top:50%;transform:translateY(-50%)}.box{align-items:center;aspect-ratio:1;border:1px solid var(--box-border-color);border-radius:5px;display:flex;font-size:.8rem;justify-content:center;overflow:hidden;width:73.4%}.box.star{position:relative}.box .ico{color:gray;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:10}.p-icon{font-size:1.3rem;transition:1s}.p-icon.p1{color:var(--p4-color)}.p-icon.p2{color:var(--p1-color)}.p-icon.p3{color:var(--p2-color)}.p-icon.p4{color:var(--p3-color)}.box.a1.start{background-color:var(--p4-color)}.box.a2.start{background-color:var(--p1-color)}.box.a3.start{background-color:var(--p2-color)}.box.a4.start{background-color:var(--p3-color)}.area.a1 .row,.area.a3 .row{flex-direction:column}.area .row{align-items:center;background-color:#fff;display:flex;flex:1 1}.area .row.r2.center .box{border-color:#fff}.area.a1 .row.r2.center>div{background-color:var(--p4-color)!important}.area.a2 .row.r2.center>div{background-color:var(--p1-color)!important}.area.a3 .row.r2.center>div{background-color:var(--p2-color)!important}.area.a4 .row.r2.center>div{background-color:var(--p3-color)!important}.area.a1 .row.r2.center div:last-child,.area.a2 .row.r2.center div:first-child,.area.a3 .row.r2.center div:first-child,.area.a4 .row.r2.center div:last-child{background-color:initial!important;border-color:var(--box-border-color)}@media screen and (max-width:750px){.player-ground.p1 .user-profile{border-radius:10px 10px 10px 0;left:0;top:-7rem}.player-ground.p2 .user-profile{border-radius:10px 10px 0 10px;right:0;top:-7rem}.player-ground.p3 .user-profile{border-radius:10px 0 10px 10px;bottom:-7rem;right:0}.player-ground.p4 .user-profile{border-radius:0 10px 10px 10px;bottom:-7rem;left:0}.player-ground .user-profile:after{height:2.9rem;width:2px}.player-ground.p1 .user-profile:after{left:-2px;top:103.7168%!important}.player-ground.p2 .user-profile:after{left:100%;top:103.7168%!important}.player-ground.p3 .user-profile:after{left:100%;top:-82.7168%!important}.player-ground.p4 .user-profile:after{left:-2px;top:-82.7168%!important}}