.tile,body{background-color:#000}body,h1{margin:0}h1,h2{font-weight:400}#container,.no-3d #hit,.no-3d .cube,.tile{display:none}.loaded #header,.loaded #messages li,h1,h2{-webkit-font-smoothing:subpixel-antialiased}@-webkit-keyframes cube-rotate{0%{transform:rotateX(1deg)rotateY(1deg);-o-transform:rotateX(1deg)rotateY(1deg);-ms-transform:rotateX(1deg)rotateY(1deg);-moz-transform:rotateX(1deg)rotateY(1deg);-webkit-transform:rotateX(1deg)rotateY(1deg)}100%{transform:rotateX(360deg)rotateY(360deg);-o-transform:rotateX(360deg)rotateY(360deg);-ms-transform:rotateX(360deg)rotateY(360deg);-moz-transform:rotateX(360deg)rotateY(360deg);-webkit-transform:rotateX(360deg)rotateY(360deg)}}@-moz-keyframes cube-rotate{0%{transform:rotateX(1deg)rotateY(1deg);-o-transform:rotateX(1deg)rotateY(1deg);-ms-transform:rotateX(1deg)rotateY(1deg);-moz-transform:rotateX(1deg)rotateY(1deg);-webkit-transform:rotateX(1deg)rotateY(1deg)}100%{transform:rotateX(360deg)rotateY(360deg);-o-transform:rotateX(360deg)rotateY(360deg);-ms-transform:rotateX(360deg)rotateY(360deg);-moz-transform:rotateX(360deg)rotateY(360deg);-webkit-transform:rotateX(360deg)rotateY(360deg)}}@-o-keyframes cube-rotate{0%{transform:rotateX(1deg)rotateY(1deg);-o-transform:rotateX(1deg)rotateY(1deg);-ms-transform:rotateX(1deg)rotateY(1deg);-moz-transform:rotateX(1deg)rotateY(1deg);-webkit-transform:rotateX(1deg)rotateY(1deg)}100%{transform:rotateX(360deg)rotateY(360deg);-o-transform:rotateX(360deg)rotateY(360deg);-ms-transform:rotateX(360deg)rotateY(360deg);-moz-transform:rotateX(360deg)rotateY(360deg);-webkit-transform:rotateX(360deg)rotateY(360deg)}}@keyframes cube-rotate{0%{transform:rotateX(1deg)rotateY(1deg);-o-transform:rotateX(1deg)rotateY(1deg);-ms-transform:rotateX(1deg)rotateY(1deg);-moz-transform:rotateX(1deg)rotateY(1deg);-webkit-transform:rotateX(1deg)rotateY(1deg)}100%{transform:rotateX(360deg)rotateY(360deg);-o-transform:rotateX(360deg)rotateY(360deg);-ms-transform:rotateX(360deg)rotateY(360deg);-moz-transform:rotateX(360deg)rotateY(360deg);-webkit-transform:rotateX(360deg)rotateY(360deg)}}@-webkit-keyframes cube-rotate-stop{100%{transform:rotateX(315deg)rotateY(315deg);-o-transform:rotateX(315deg)rotateY(315deg);-ms-transform:rotateX(315deg)rotateY(315deg);-moz-transform:rotateX(315deg)rotateY(315deg);-webkit-transform:rotateX(315deg)rotateY(315deg)}}@-moz-keyframes cube-rotate-stop{100%{transform:rotateX(315deg)rotateY(315deg);-o-transform:rotateX(315deg)rotateY(315deg);-ms-transform:rotateX(315deg)rotateY(315deg);-moz-transform:rotateX(315deg)rotateY(315deg);-webkit-transform:rotateX(315deg)rotateY(315deg)}}@-o-keyframes cube-rotate-stop{100%{transform:rotateX(315deg)rotateY(315deg);-o-transform:rotateX(315deg)rotateY(315deg);-ms-transform:rotateX(315deg)rotateY(315deg);-moz-transform:rotateX(315deg)rotateY(315deg);-webkit-transform:rotateX(315deg)rotateY(315deg)}}@keyframes cube-rotate-stop{100%{transform:rotateX(315deg)rotateY(315deg);-o-transform:rotateX(315deg)rotateY(315deg);-ms-transform:rotateX(315deg)rotateY(315deg);-moz-transform:rotateX(315deg)rotateY(315deg);-webkit-transform:rotateX(315deg)rotateY(315deg)}}@-webkit-keyframes cube-reset{0%{opacity:1}100%{opacity:0}}@-moz-keyframes cube-reset{0%{opacity:1}100%{opacity:0}}@-o-keyframes cube-reset{0%{opacity:1}100%{opacity:0}}@keyframes cube-reset{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes splash-cube{0%{opacity:0;margin-left:-4em}50%{opacity:1;margin-left:-4em}100%{margin-left:-33.5em}}@-moz-keyframes splash-cube{0%{opacity:0;margin-left:-4em}50%{opacity:1;margin-left:-4em}100%{margin-left:-33.5em}}@-o-keyframes splash-cube{0%{opacity:0;margin-left:-4em}50%{opacity:1;margin-left:-4em}100%{margin-left:-33.5em}}@keyframes splash-cube{0%{opacity:0;margin-left:-4em}50%{opacity:1;margin-left:-4em}100%{margin-left:-33.5em}}@-webkit-keyframes game-cube{100%{margin-left:-4em;margin-top:-4em}}@-moz-keyframes game-cube{100%{margin-left:-4em;margin-top:-4em}}@-o-keyframes game-cube{100%{margin-left:-4em;margin-top:-4em}}@keyframes game-cube{100%{margin-left:-4em;margin-top:-4em}}@-webkit-keyframes splash-header{0%,50%{width:0}100%{width:54em}}@-moz-keyframes splash-header{0%,50%{width:0}100%{width:54em}}@-o-keyframes splash-header{0%,50%{width:0}100%{width:54em}}@keyframes splash-header{0%,50%{width:0}100%{width:54em}}@-webkit-keyframes game-header{0%{width:54em;margin-left:13em}100%{width:0;margin-left:21em}}@-moz-keyframes game-header{0%{width:54em;margin-left:13em}100%{width:0;margin-left:21em}}@-o-keyframes game-header{0%{width:54em;margin-left:13em}100%{width:0;margin-left:21em}}@keyframes game-header{0%{width:54em;margin-left:13em}100%{width:0;margin-left:21em}}@-webkit-keyframes stage{100%{transform:scale(2);-o-transform:scale(2);-ms-transform:scale(2);-moz-transform:scale(2);-webkit-transform:scale(2)}}@-moz-keyframes stage{100%{transform:scale(2);-o-transform:scale(2);-ms-transform:scale(2);-moz-transform:scale(2);-webkit-transform:scale(2)}}@-o-keyframes stage{100%{transform:scale(2);-o-transform:scale(2);-ms-transform:scale(2);-moz-transform:scale(2);-webkit-transform:scale(2)}}@keyframes stage{100%{transform:scale(2);-o-transform:scale(2);-ms-transform:scale(2);-moz-transform:scale(2);-webkit-transform:scale(2)}}@-webkit-keyframes tile-start{0%{transform:translateZ(4em);-o-transform:translateZ(4em);-ms-transform:translateZ(4em);-moz-transform:translateZ(4em);-webkit-transform:translateZ(4em)}}@-moz-keyframes tile-start{0%{transform:translateZ(4em);-o-transform:translateZ(4em);-ms-transform:translateZ(4em);-moz-transform:translateZ(4em);-webkit-transform:translateZ(4em)}}@-o-keyframes tile-start{0%{transform:translateZ(4em);-o-transform:translateZ(4em);-ms-transform:translateZ(4em);-moz-transform:translateZ(4em);-webkit-transform:translateZ(4em)}}@keyframes tile-start{0%{transform:translateZ(4em);-o-transform:translateZ(4em);-ms-transform:translateZ(4em);-moz-transform:translateZ(4em);-webkit-transform:translateZ(4em)}}@-webkit-keyframes message-add{0%{margin-left:-20em;height:1.5em}10%{margin-left:0;height:1.5em}80%{height:1.5em}100%{height:0}}@-moz-keyframes message-add{0%{margin-left:-20em;height:1.5em}10%{margin-left:0;height:1.5em}80%{height:1.5em}100%{height:0}}@-o-keyframes message-add{0%{margin-left:-20em;height:1.5em}10%{margin-left:0;height:1.5em}80%{height:1.5em}100%{height:0}}@keyframes message-add{0%{margin-left:-20em;height:1.5em}10%{margin-left:0;height:1.5em}80%{height:1.5em}100%{height:0}}@-webkit-keyframes message-add-persist{0%{margin-left:-20em;height:1.5em}10%,100%{margin-left:0;height:1.5em}}@-moz-keyframes message-add-persist{0%{margin-left:-20em;height:1.5em}10%,100%{margin-left:0;height:1.5em}}@-o-keyframes message-add-persist{0%{margin-left:-20em;height:1.5em}10%,100%{margin-left:0;height:1.5em}}@keyframes message-add-persist{0%{margin-left:-20em;height:1.5em}10%,100%{margin-left:0;height:1.5em}}@-webkit-keyframes message-add-persist-hide{0%{margin-left:0;height:1.5em}100%{height:0}}@-moz-keyframes message-add-persist-hide{0%{margin-left:0;height:1.5em}100%{height:0}}@-o-keyframes message-add-persist-hide{0%{margin-left:0;height:1.5em}100%{height:0}}@keyframes message-add-persist-hide{0%{margin-left:0;height:1.5em}100%{height:0}}@-webkit-keyframes tile-claimed-player1{0%,40%,80%{background-color:#000}100%,20%,60%{background-color:red}}@-moz-keyframes tile-claimed-player1{0%,40%,80%{background-color:#000}100%,20%,60%{background-color:red}}@-o-keyframes tile-claimed-player1{0%,40%,80%{background-color:#000}100%,20%,60%{background-color:red}}@keyframes tile-claimed-player1{0%,40%,80%{background-color:#000}100%,20%,60%{background-color:red}}@-webkit-keyframes tile-claimed-player2{0%,40%,80%{background-color:#000}100%,20%,60%{background-color:#00f}}@-moz-keyframes tile-claimed-player2{0%,40%,80%{background-color:#000}100%,20%,60%{background-color:#00f}}@-o-keyframes tile-claimed-player2{0%,40%,80%{background-color:#000}100%,20%,60%{background-color:#00f}}@keyframes tile-claimed-player2{0%,40%,80%{background-color:#000}100%,20%,60%{background-color:#00f}}@-webkit-keyframes attack-player1{0%,100%{background-color:red}50%{background-color:gold}}@-moz-keyframes attack-player1{0%,100%{background-color:red}50%{background-color:gold}}@-o-keyframes attack-player1{0%,100%{background-color:red}50%{background-color:gold}}@keyframes attack-player1{0%,100%{background-color:red}50%{background-color:gold}}@-webkit-keyframes attack-player2{0%,100%{background-color:#00f}50%{background-color:gold}}@-moz-keyframes attack-player2{0%,100%{background-color:#00f}50%{background-color:gold}}@-o-keyframes attack-player2{0%,100%{background-color:#00f}50%{background-color:gold}}@keyframes attack-player2{0%,100%{background-color:#00f}50%{background-color:gold}}@-webkit-keyframes win-player1{0%{background-color:red}100%{background-color:gold}}@-moz-keyframes win-player1{0%{background-color:red}100%{background-color:gold}}@-o-keyframes win-player1{0%{background-color:red}100%{background-color:gold}}@keyframes win-player1{0%{background-color:red}100%{background-color:gold}}@-webkit-keyframes win-player2{0%{background-color:#00f}100%{background-color:gold}}@-moz-keyframes win-player2{0%{background-color:#00f}100%{background-color:gold}}@-o-keyframes win-player2{0%{background-color:#00f}100%{background-color:gold}}@keyframes win-player2{0%{background-color:#00f}100%{background-color:gold}}html{font-size:16px}body{font-size:62.5%;font-family:Verdana,sans-serif}h1{color:#6385a7;font-size:6em}h2{margin:0 0 0 .1em;color:#abcdef;font-size:3em;line-height:.4em}@media only screen and (min-device-width:320px)and (max-device-width:568px)and (-webkit-min-device-pixel-ratio:2){html{font-size:20px}}@media only screen and (min-device-width:375px)and (max-device-width:667px)and (-webkit-min-device-pixel-ratio:2){html{font-size:20px}}@media only screen and (min-device-width:414px)and (max-device-width:736px)and (-webkit-min-device-pixel-ratio:3){html{font-size:24px}}@media only screen and (min-device-width:768px)and (max-device-width:1024px){html{font-size:20px}}@media screen and (device-width:360px)and (device-height:640px)and (-webkit-device-pixel-ratio:3){html{font-size:22px}}.no-3d #stage::before{content:'\2665';color:#abcdef;font-size:16em;line-height:.6em}.no-3d h2::after{content:'\a\a\a (and wishes you didn\'t use IE) ;)';white-space:pre}.loaded #container{display:block;position:absolute;top:50%;left:50%;width:8em;height:8em;margin-top:-4em;margin-left:-33.5em;animation:splash-cube 2s forwards;-o-animation:splash-cube 2s forwards;-moz-animation:splash-cube 2s forwards;-webkit-animation:splash-cube 2s forwards}.loaded #container.game{animation:game-cube 1s forwards;-o-animation:game-cube 1s forwards;-moz-animation:game-cube 1s forwards;-webkit-animation:game-cube 1s forwards}.loaded #container.game #header{animation:game-header 1s forwards;-o-animation:game-header 1s forwards;-moz-animation:game-header 1s forwards;-webkit-animation:game-header 1s forwards}.loaded #container.game #stage{animation:stage 1s forwards;-o-animation:stage 1s forwards;-moz-animation:stage 1s forwards;-webkit-animation:stage 1s forwards}.loaded #hit{position:absolute;z-index:10;top:-2em;left:-2em;width:12em;height:12em;cursor:pointer}.face,.loaded .cube{height:8em;width:8em}.loaded #hit:hover+#wrap .face{background-color:#abcdef;border-color:#000}.loaded #wrap{position:relative}.face,.loaded #stage,.tile{position:absolute}.loaded #header{overflow:hidden;margin-top:-1.4em;margin-left:13em;padding-bottom:1.4em;white-space:nowrap;animation:splash-header 2s forwards;-o-animation:splash-header 2s forwards;-moz-animation:splash-header 2s forwards;-webkit-animation:splash-header 2s forwards}.loaded #stage{top:1em;left:0;-webkit-perspective:10000px}.loaded #messages{position:relative;margin:2em;padding:0;list-style-type:none}.loaded #messages li{height:1.5em;font-size:2em;color:#fff;overflow:hidden;cursor:default;pointer-events:none;animation:message-add 4s forwards;-o-animation:message-add 4s forwards;-moz-animation:message-add 4s forwards;-webkit-animation:message-add 4s forwards}.loaded #messages li.error{color:red}.loaded #messages li.alert{font-size:4em;color:#ff0}.loaded #messages li.persist{animation:message-add-persist 4s forwards;-o-animation:message-add-persist 4s forwards;-moz-animation:message-add-persist 4s forwards;-webkit-animation:message-add-persist 4s forwards}.loaded #messages li.hide{animation:message-add-persist-hide .8s forwards;-o-animation:message-add-persist-hide .8s forwards;-moz-animation:message-add-persist-hide .8s forwards;-webkit-animation:message-add-persist-hide .8s forwards}.loaded .cube{transform-style:preserve-3d;-o-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-transform-style:preserve-3d;animation:cube-rotate 4s linear infinite;-o-animation:cube-rotate 4s linear infinite;-moz-animation:cube-rotate 4s linear infinite;-webkit-animation:cube-rotate 4s linear infinite}.loaded .cube.transition{animation:cube-rotate-stop 2s ease-out forwards;-o-animation:cube-rotate-stop 2s ease-out forwards;-moz-animation:cube-rotate-stop 2s ease-out forwards;-webkit-animation:cube-rotate-stop 2s ease-out forwards}.loaded .cube.init{animation:none;-o-animation:none;-moz-animation:none;-webkit-animation:none;transform:rotateX(315deg)rotateY(315deg);-o-transform:rotateX(315deg)rotateY(315deg);-ms-transform:rotateX(315deg)rotateY(315deg);-moz-transform:rotateX(315deg)rotateY(315deg);-webkit-transform:rotateX(315deg)rotateY(315deg)}.loaded .cube.reset{animation:cube-reset 1s forwards;-o-animation:cube-reset 1s forwards;-moz-animation:cube-reset 1s forwards;-webkit-animation:cube-reset 1s forwards}.face{border:.4em solid #abcdef;border-radius:.8em;cursor:pointer;transform-style:preserve-3d;-o-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:background-color .4s,border-color .4s;-o-transition:background-color .4s,border-color .4s;-moz-transition:background-color .4s,border-color .4s;-webkit-transition:background-color .4s,border-color .4s}#front{transform:translateZ(4em);-o-transform:translateZ(4em);-ms-transform:translateZ(4em);-moz-transform:translateZ(4em);-webkit-transform:translateZ(4em)}#back{transform:rotateY(180deg)translateZ(4em);-o-transform:rotateY(180deg)translateZ(4em);-ms-transform:rotateY(180deg)translateZ(4em);-moz-transform:rotateY(180deg)translateZ(4em);-webkit-transform:rotateY(180deg)translateZ(4em)}#right{transform:rotateY(90deg)translateZ(4em);-o-transform:rotateY(90deg)translateZ(4em);-ms-transform:rotateY(90deg)translateZ(4em);-moz-transform:rotateY(90deg)translateZ(4em);-webkit-transform:rotateY(90deg)translateZ(4em)}#left{transform:rotateY(-90deg)translateZ(4em);-o-transform:rotateY(-90deg)translateZ(4em);-ms-transform:rotateY(-90deg)translateZ(4em);-moz-transform:rotateY(-90deg)translateZ(4em);-webkit-transform:rotateY(-90deg)translateZ(4em)}#top{transform:rotateX(90deg)translateZ(4em);-o-transform:rotateX(90deg)translateZ(4em);-ms-transform:rotateX(90deg)translateZ(4em);-moz-transform:rotateX(90deg)translateZ(4em);-webkit-transform:rotateX(90deg)translateZ(4em)}#bottom{transform:rotateX(-90deg)translateZ(4em);-o-transform:rotateX(-90deg)translateZ(4em);-ms-transform:rotateX(-90deg)translateZ(4em);-moz-transform:rotateX(-90deg)translateZ(4em);-webkit-transform:rotateX(-90deg)translateZ(4em)}.tile{width:2.4em;height:2.4em;border:.2em solid #abcdef;transform:translateZ(.01em);-o-transform:translateZ(.01em);-ms-transform:translateZ(.01em);-moz-transform:translateZ(.01em);-webkit-transform:translateZ(.01em);color:#fff}.tile.highlighted{background-color:#006400}.tile:hover{background-color:#abcdef}.tile.selected{background-color:gold}.tile.helper{background-color:#90ee90}.tile.init{display:block;animation:tile-start 1s forwards;-o-animation:tile-start 1s forwards;-moz-animation:tile-start 1s forwards;-webkit-animation:tile-start 1s forwards}.tile.preclaimed.player1{animation:tile-claimed-player1 .5s forwards;-o-animation:tile-claimed-player1 .5s forwards;-moz-animation:tile-claimed-player1 .5s forwards;-webkit-animation:tile-claimed-player1 .5s forwards}.tile.preclaimed.player2{animation:tile-claimed-player2 .5s forwards;-o-animation:tile-claimed-player2 .5s forwards;-moz-animation:tile-claimed-player2 .5s forwards;-webkit-animation:tile-claimed-player2 .5s forwards}.tile.claimed,.tile.unclaimed{animation:none;-o-animation:none;-moz-animation:none;-webkit-animation:none}.tile.claimed.player1{background-color:red}.player2-turn .tile.claimed.player1.helper{animation:attack-player1 .25s infinite;-o-animation:attack-player1 .25s infinite;-moz-animation:attack-player1 .25s infinite;-webkit-animation:attack-player1 .25s infinite}.tile.claimed.player2{background-color:#00f}.player1-turn .tile.claimed.player2.helper{animation:attack-player2 .25s infinite alternate;-o-animation:attack-player2 .25s infinite alternate;-moz-animation:attack-player2 .25s infinite alternate;-webkit-animation:attack-player2 .25s infinite alternate}.tile.claimed.player1.win,.tile.preclaimed.player1.win{animation:win-player1 1s infinite alternate;-o-animation:win-player1 1s infinite alternate;-moz-animation:win-player1 1s infinite alternate;-webkit-animation:win-player1 1s infinite alternate}.tile.claimed.player2.win,.tile.preclaimed.player2.win{animation:win-player2 1s infinite alternate;-o-animation:win-player2 1s infinite alternate;-moz-animation:win-player2 1s infinite alternate;-webkit-animation:win-player2 1s infinite alternate}.tile:nth-child(1){top:0;left:0}.tile:nth-child(2){top:0;left:2.6em}.tile:nth-child(3){top:0;left:5.2em}.tile:nth-child(4){top:2.6em;left:0}.tile:nth-child(5){top:2.6em;left:2.6em}.tile:nth-child(6){top:2.6em;left:5.2em}.tile:nth-child(7){top:5.2em;left:0}.tile:nth-child(8){top:5.2em;left:2.6em}.tile:nth-child(9){top:5.2em;left:5.2em}