#board,#board.active{display:block}#board,#levsel{transition:transform 1s ease-in-out}#board.active,#levsel{transform:translateY(0)}#board,#logo,div.zone{box-sizing:border-box}#board,body,div.zone{overflow:hidden}body{padding:0;text-align:center;background:linear-gradient(to right,#000 10%,#ffa 40%,#ffa 60%,#000 90%);background-color:#400;height:100%;margin:0;background-repeat:no-repeat;background-attachment:fixed;font-family:sans-serif}#board{background-color:#000;position:absolute;border:2px solid #FFA;transform:translateY(-110%);z-index:190}#levsel.hide{transform:translateY(+110%)}div.zone{background-color:rgba(0,0,0,.8);width:10em;height:10em;position:relative;top:0;margin-left:auto;margin-right:auto;margin-top:1em;border-radius:2em;background-size:100% 100%;font-size:14pt;cursor:pointer;transition:all 1s ease-in-out;padding:4em .5em .5em}#credits,#logo,#timer,.boardobject{position:absolute}div.zone.sel{padding-top:1em;width:20em;height:22em;background-color:#000}div.zb{border:2px solid #FF0;background:#000;color:#FF0;cursor:pointer;padding:.5em;margin:1em;border-radius:.5em}div.breaker{height:5em}#z0{color:#AFA;border:3px solid #0F0}#z1{color:#88F;border:3px solid #88F}#z1.sel{top:-10em}#z2{color:#F44;border:3px solid #F44}#z2.sel{top:-20em}#logo{left:-4em;top:0;bottom:0;width:15em;background-size:100% auto;background-repeat:repeat-y}#credits{right:.25em;top:4em;color:#FFA;z-index:150;transform:rotate(-90deg);transform-origin:100% 100%}#credits a{color:#FFF;text-decoration:none}#timer{right:-.1em;top:-.1em;width:5em;padding:.2em .2em .2em 0;border-radius:0 0 0 1.5em;background:rgba(0,0,0,.6);border:3px solid #FF0;color:#FF8;font-size:20pt;font-family:monospace;display:none;text-align:right;z-index:200}#timer.active{display:block}#board div.glitchtext{color:#FFF;font-size:130%;display:block;text-align:left;font-family:monospace;font-weight:700;line-height:2em}@keyframes glitch{0%{transform:scale(1,1);background-color:#880}10%{transform:scale(1.6,1) rotate(3deg)}20%{transform:scale(1,1.6)}30%{transform:scale(1.2,1.2) rotate(3deg);background-color:#000}60%{background-color:#500;transform:scale(1.1,1) rotate(-3deg)}90%{background-color:#050;transform:scale(1,1)}100%{background-color:#000}}#board.glitch{background-color:#550;animation:glitch 2s 1 linear}.boardobject{width:2em;height:2em;top:-1em;left:-1em;pointer-events:none}#badsize,.boardobject div{position:absolute;top:0;bottom:0;left:0;right:0}.boardobject div{background-size:100% 100%;pointer-events:none}@keyframes roll{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes roll120{0%{transform:rotate(0)}100%{transform:rotate(120deg)}}@keyframes roll90{0%{transform:rotate(0)}100%{transform:rotate(90deg)}}@keyframes diefold{0%{transform:translateY(0) scale(1,1);opacity:.5}50%{transform:translateY(-50%) scale(.5,.5);opacity:1}100%{transform:translateY(0) scale(1,.1);opacity:0}}@keyframes throb{0%{transform:scale(1,1);opacity:.5}100%{transform:scale(.9,.9);opacity:1}}.boardobject div.roll{animation:roll 1.5s infinite linear}.boardobject div.roll120{animation:roll120 .7s infinite ease-in-out}.boardobject div.roll90{animation:roll90 .6s infinite ease-in}.boardobject div.rock{animation:roll120 .7s infinite ease-in-out alternate}.boardobject div.throb{animation:throb .5s infinite ease-in-out alternate}.boardobject.die div{animation:diefold .5s 1 linear}#badsize{background:#500;color:#fff;z-index:1000;font-size:300%}@media all and (min-height:25em){#badsize{display:none}}@media all and (max-width:25em){div.zone{font-size:10pt}}