#board{position:absolute;border:solid black;border-width:1px;@media all and (min-width: 580px){left:159px;top:19px}@media not all and (min-width: 580px){left:19px;top:10px}width:280px;height:280px;background-color:#ccc;background-image:linear-gradient(#eee 1px,transparent 1px),linear-gradient(90deg,#eee 1px,transparent 1px);background-size:20px 20px;background-position:-1px -1px}.marker,.violet-marker,.orange-marker{position:absolute;width:17px;height:17px;border-radius:17px}.violet-marker{left:81px;top:81px;background-color:var(--bright-violet)}.orange-marker{left:181px;top:181px;background-color:var(--bright-orange)}.block0highlight{animation-duration:2s;animation-iteration-count:5;animation-name:animation0;background-color:var(--violet)}@keyframes animation0{0%{background-color:var(--violet)}50%{background-color:var(--bright-violet)}to{background-color:var(--violet)}}.block1highlight{animation-duration:2s;animation-iteration-count:5;animation-name:animation1;background-color:var(--orange)}@keyframes animation1{0%{background-color:var(--orange)}50%{background-color:var(--bright-orange)}to{background-color:var(--orange)}}.piece{transition-property:transform,left,top;transition-duration:.1s;transition-timing-function:linear;transform-origin:10px 10px}.dragging{transition-property:transform}.rotate-left{transition-property:none;transform:rotate(90deg)}.rotate-right{transition-property:none;transform:rotate(-90deg)}.rotate-flip{transition-property:none;transform:perspective(100px) rotateY(180deg)}@media all and (min-width: 580px){.active .block0,.active .block1{cursor:pointer}}@media not all and (min-width: 580px){.unselected{transform:scale(.5)}.selected{filter:drop-shadow(0 3px 3px rgba(0,0,0,.4))}}#piece-area{position:absolute;left:20px;@media all and (min-width: 580px){top:360px;width:520px;height:200px}@media not all and (min-width: 580px){top:340px;width:260px;height:100px}padding:10px;border-radius:5px}.active-area{background-color:#eee}.inactive-area{background-color:#ddd}#opponents-piece-area{position:absolute;left:20px;top:20px;width:100px;height:260px;padding:10px;border-radius:5px;@media not all and (min-width: 580px){display:none}}#opponents-pieces{position:relative}.right-pane{@media not all and (min-width: 580px){display:none}.logo{position:absolute;left:450px;top:20px;width:110px;text-align:right;font:28px Black Ops One,sans-serif;line-height:120%}.violet-scoreboard{position:absolute;left:460px;top:110px;width:100px;color:var(--violet);border-spacing:0px}.orange-scoreboard{position:absolute;left:460px;top:200px;width:100px;color:var(--orange);border-spacing:0px}.scoreboard-name{font-weight:700}.scoreboard-time,.scoreboard-score{font-weight:700;text-align:right}.usage{position:absolute;left:460px;top:285px;width:100px;text-align:right;font-size:small}}#handler{@media all and (min-width: 580px){display:none}position:absolute;left:270px;top:0;width:50px;height:10px;background-color:#ccc}#handlerDownIcon{width:5px;height:5px;margin-left:21px;border:solid #333;border-width:2px 2px 0 0;transform:rotate(135deg)}#toolbar{@media all and (min-width: 580px){display:none}position:absolute;top:0;left:0;width:320px;height:40px;z-index:100;background:#000000d9;transition:top .4s ease;&.closed{top:-40px}& ul{float:left;list-style:none;padding:0;margin:0}& ul:last-child{float:right}& li{float:left}& button{width:80px;height:40px;border:none;color:#fff;background:transparent;font-size:24px;font-weight:700;text-align:center;border-radius:0}& button:active{background-color:#008aaa}}#help{position:absolute;top:10px;left:5px;width:280px;padding:15px;background-color:#333;color:#fff;border-radius:10px;z-index:50;&.closed{display:none}& button{width:180px;height:40px;font-family:sans-serif;font-size:1.2rem}.buttons{bottom:1rem;text-align:center}}:root{--violet: #63d;--orange: #f72;--bright-violet: #a385eb;--bright-orange: #ffad7a}body{background-color:#ffe;font-family:sans-serif}.container{@media all and (min-width: 580px){width:580px}@media not all and (min-width: 580px){width:320px}position:relative;margin:0 auto}.block0{background-color:var(--violet)}.block1{background-color:var(--orange)}#message{position:absolute;@media all and (min-width: 580px){left:100px;top:315px;width:360px}@media not all and (min-width: 580px){left:20px;top:300px;width:270px}padding:5px;text-align:center;font-weight:700;background-color:#bdf;visibility:hidden}.start{position:absolute;@media all and (min-width: 580px){left:160px;top:330px}@media not all and (min-width: 580px){left:20px;top:340px}width:280px;text-align:center}.start-button{padding:5px 10px;margin:10px;@media not all and (min-width: 580px){font-size:large}}