:root{--unit: 1px;--main_padding: calc(10 * var(--unit));--border_radius: calc(5 * var(--unit));--box_size: calc(50 * var(--unit));--row_padding: calc(5 * var(--unit));--box_margin: calc(3 * var(--unit));--lock_distance: calc(5 * var(--unit));--lock_size: calc(35 * var(--unit));--box_font_size: calc(30 * var(--unit));--fail_font_size: calc(16 * var(--unit));--points_font_size: calc(25 * var(--unit));--cross_size: calc(35 * var(--unit));--dice_width: var(--box_size);--dice_border: calc(3 * var(--unit));--dice_offset: calc(5 * var(--unit));--dice_border_radius: calc(8 * var(--unit));--reset_font_size: calc(16 * var(--unit));--control_padding: calc(10 * var(--unit))}body{margin:0;padding:0;font-family:Arial,sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}#wrap{width:100vw;height:100vh;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background-color:#2c2c2c;position:relative}.main{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:calc(var(--main_padding) + env(safe-area-inset-top, var(--main_padding))) calc(var(--main_padding) + env(safe-area-inset-right, var(--main_padding))) calc(var(--main_padding) + env(safe-area-inset-bottom, var(--main_padding))) calc(var(--main_padding) + env(safe-area-inset-left, var(--main_padding)))}.red.row{background-color:#d63f4c}.red .bbg{background-color:#933037}.red .box{background-color:#f8dfe4;color:#d63f4c}.red .cbg{background-color:#933037}.red .con:after{background-color:#933037}.red .lock{background-color:#f8dfe4}.red .lock:before{background-color:#933037}.red.die>div{background-color:#f8dfe4;border-color:#d63f4c}.red.die>div>span{background-color:#d63f4c}.yellow.row{background-color:#fde34a}.yellow .bbg{background-color:#d7a352}.yellow .box{background-color:#fcf8f0;color:#dfbf02}.yellow .cbg{background-color:#d7a352}.yellow .con:after{background-color:#d7a352}.yellow .lock{background-color:#fcf8f0}.yellow .lock:before{background-color:#d7a352}.yellow.die>div{background-color:#fcf8f0;border-color:#d7a352}.yellow.die>div>span{background-color:#dfbf02}.green.row{background-color:#419f5b}.green .bbg{background-color:#407c52}.green .box{background-color:#eaf2f0;color:#419f5b}.green .cbg{background-color:#407c52}.green .con:after{background-color:#407c52}.green .lock{background-color:#eaf2f0}.green .lock:before{background-color:#407c52}.green.die>div{background-color:#eaf2f0;border-color:#419f5b}.green.die>div>span{background-color:#419f5b}.blue.row{background-color:#3a4a8b}.blue .bbg{background-color:#2e2f4b}.blue .box{background-color:#e3dff1;color:#3a4a8b}.blue .cbg{background-color:#2e2f4b}.blue .con:after{background-color:#2e2f4b}.blue .lock{background-color:#e3dff1}.blue .lock:before{background-color:#2e2f4b}.blue.die>div{background-color:#e3dff1;border-color:#3a4a8b}.blue.die>div>span{background-color:#3a4a8b}.white.row{background-color:#fff}.white .bbg{background-color:#000}.white .box{background-color:#fff;color:#000}.white .cbg{background-color:#000}.white .con:after{background-color:#000}.white .lock{background-color:#fff}.white .lock:before{background-color:#000}.white.die>div{background-color:#fff;border-color:#000}.white.die>div>span{background-color:#000}.row_container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.row{z-index:1;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding:var(--row_padding)}.row.locked{opacity:.5}.bbg{z-index:2;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-radius:var(--border_radius)}.box,.fail{z-index:3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:var(--box_size);height:var(--box_size);border-radius:var(--border_radius);margin:var(--box_margin) 0 var(--box_margin) var(--box_margin);font-size:var(--box_font_size);font-weight:bold;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.box:last-child,.fail:last-child{margin-right:var(--box_margin)}.cbg{z-index:2;width:var(--lock_size);height:var(--lock_size);border-radius:100%;margin-left:var(--lock_distance);padding:var(--box_margin)}.con{z-index:2;width:0;height:calc(2*var(--box_margin));overflow:visible}.con:after{content:"";display:block;margin-left:calc(-1*var(--box_margin));width:calc(var(--lock_distance) + 2*var(--box_margin));height:100%}.lock{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:var(--lock_size);height:var(--lock_size);border-radius:100%}.lock:before{content:"";width:75%;height:75%;-webkit-mask:url(623aacce1e259d055fa8.svg) no-repeat center center;mask:url(623aacce1e259d055fa8.svg) no-repeat center center;-webkit-mask-size:cover;mask-size:cover}.lock.checked:after,.box.checked:after,.fail.checked:after{width:var(--cross_size);height:var(--cross_size);content:"";position:absolute;-webkit-mask:url(c19d6bb69e69be219076.svg) no-repeat center center;mask:url(c19d6bb69e69be219076.svg) no-repeat center center;-webkit-mask-size:cover;mask-size:cover;background-color:#000}.sub{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:var(--row_padding)}.fail_container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.fail{background-color:#d5d5d5;color:#929292}.fail span{font-size:var(--fail_font_size);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.points{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:var(--points_font_size);font-weight:bold;margin:var(--box_margin)}.points span{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;color:#fff}@-webkit-keyframes shake{0%{-webkit-transform:translate(1px, 1px) rotate(0deg);transform:translate(1px, 1px) rotate(0deg)}10%{-webkit-transform:translate(-1px, -2px) rotate(-2deg);transform:translate(-1px, -2px) rotate(-2deg)}20%{-webkit-transform:translate(-3px, 0px) rotate(2deg);transform:translate(-3px, 0px) rotate(2deg)}30%{-webkit-transform:translate(3px, 2px) rotate(0deg);transform:translate(3px, 2px) rotate(0deg)}40%{-webkit-transform:translate(1px, -1px) rotate(2deg);transform:translate(1px, -1px) rotate(2deg)}50%{-webkit-transform:translate(-1px, 2px) rotate(-2deg);transform:translate(-1px, 2px) rotate(-2deg)}60%{-webkit-transform:translate(-3px, 1px) rotate(0deg);transform:translate(-3px, 1px) rotate(0deg)}70%{-webkit-transform:translate(3px, 1px) rotate(-2deg);transform:translate(3px, 1px) rotate(-2deg)}80%{-webkit-transform:translate(-1px, -1px) rotate(2deg);transform:translate(-1px, -1px) rotate(2deg)}90%{-webkit-transform:translate(1px, 2px) rotate(0deg);transform:translate(1px, 2px) rotate(0deg)}100%{-webkit-transform:translate(1px, -2px) rotate(-2deg);transform:translate(1px, -2px) rotate(-2deg)}}@keyframes shake{0%{-webkit-transform:translate(1px, 1px) rotate(0deg);transform:translate(1px, 1px) rotate(0deg)}10%{-webkit-transform:translate(-1px, -2px) rotate(-2deg);transform:translate(-1px, -2px) rotate(-2deg)}20%{-webkit-transform:translate(-3px, 0px) rotate(2deg);transform:translate(-3px, 0px) rotate(2deg)}30%{-webkit-transform:translate(3px, 2px) rotate(0deg);transform:translate(3px, 2px) rotate(0deg)}40%{-webkit-transform:translate(1px, -1px) rotate(2deg);transform:translate(1px, -1px) rotate(2deg)}50%{-webkit-transform:translate(-1px, 2px) rotate(-2deg);transform:translate(-1px, 2px) rotate(-2deg)}60%{-webkit-transform:translate(-3px, 1px) rotate(0deg);transform:translate(-3px, 1px) rotate(0deg)}70%{-webkit-transform:translate(3px, 1px) rotate(-2deg);transform:translate(3px, 1px) rotate(-2deg)}80%{-webkit-transform:translate(-1px, -1px) rotate(2deg);transform:translate(-1px, -1px) rotate(2deg)}90%{-webkit-transform:translate(1px, 2px) rotate(0deg);transform:translate(1px, 2px) rotate(0deg)}100%{-webkit-transform:translate(1px, -2px) rotate(-2deg);transform:translate(1px, -2px) rotate(-2deg)}}.dice_container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:var(--row_padding);-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0}.die{width:var(--dice_width);height:var(--dice_width);margin:var(--box_margin) 0 var(--box_margin) var(--box_margin)}.die.shaking{-webkit-animation:shake .5s;animation:shake .5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.die.hidden{display:none}.die>div{border-radius:var(--dice_border_radius);padding:var(--dice_offset);width:calc(100% - 2*(var(--dice_border) + var(--dice_offset)));height:calc(100% - 2*(var(--dice_border) + var(--dice_offset)));display:grid;border:var(--dice_border) solid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.die>div>span{width:70%;height:70%;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;justify-self:center;border-radius:200%;opacity:0}.die>div.d1>span:nth-child(5){opacity:1}.die>div.d2>span:nth-child(3),.die>div.d2>span:nth-child(7){opacity:1}.die>div.d3>span:nth-child(3),.die>div.d3>span:nth-child(5),.die>div.d3>span:nth-child(7){opacity:1}.die>div.d4>span:nth-child(1),.die>div.d4>span:nth-child(3),.die>div.d4>span:nth-child(7),.die>div.d4>span:nth-child(9){opacity:1}.die>div.d5>span:nth-child(1),.die>div.d5>span:nth-child(3),.die>div.d5>span:nth-child(5),.die>div.d5>span:nth-child(7),.die>div.d5>span:nth-child(9){opacity:1}.die>div.d6>span:nth-child(1),.die>div.d6>span:nth-child(3),.die>div.d6>span:nth-child(4),.die>div.d6>span:nth-child(6),.die>div.d6>span:nth-child(7),.die>div.d6>span:nth-child(9){opacity:1}.reset,.fullscreen{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:fixed;padding:var(--control_padding);width:calc(var(--box_size) - 2*var(--control_padding));height:calc(var(--box_size) - 2*var(--control_padding));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:pointer}.reset:before,.fullscreen:before{content:"";width:100%;height:100%;background-color:#fff}.reset{bottom:0;left:0}.reset:before{-webkit-mask:url(99309a54147c4ae24bd6.svg) no-repeat center center;mask:url(99309a54147c4ae24bd6.svg) no-repeat center center;-webkit-mask-size:cover;mask-size:cover}.fullscreen{bottom:0;left:var(--box_size)}.fullscreen:before{-webkit-mask:url(f539258af8d7e3729af3.svg) no-repeat center center;mask:url(f539258af8d7e3729af3.svg) no-repeat center center;-webkit-mask-size:80% 80%;mask-size:80% 80%}.fullscreen.active:before{-webkit-mask:url(c19d6bb69e69be219076.svg) no-repeat center center;mask:url(c19d6bb69e69be219076.svg) no-repeat center center;-webkit-mask-size:80% 80%;mask-size:80% 80%}