/* iOS 5.1.1 safe: -webkit- prefixes, no flexbox/vh/calc. All sizes in em; body font-size is set by JS to min(w,h)/40. */
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden}
body{
  background:#0a0624;
  background:-webkit-gradient(linear,left top,left bottom,from(#1d1058),to(#05031a));
  color:#fff;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:19px;
  -webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);
  -webkit-text-size-adjust:none;
}
button{-webkit-appearance:none;border:0;outline:0;font-family:inherit;color:#fff;margin:0;cursor:pointer}

#stars{position:absolute;top:0;left:0;right:0;bottom:0}
.star{position:absolute;background:#fff;border-radius:50%;opacity:.3;
  -webkit-animation:twinkle 3s ease-in-out infinite}
@-webkit-keyframes twinkle{0%{opacity:.15}50%{opacity:1}100%{opacity:.15}}

.screen{display:none;position:absolute;top:0;left:0;right:0;bottom:0;text-align:center}
.screen.active{display:block}

/* start */
.title{position:absolute;top:7%;left:0;right:0;font-size:3.6em;font-weight:bold;text-shadow:0 .08em .2em rgba(0,0,0,.6)}
.subtitle{position:absolute;top:19%;left:0;right:0;font-size:1.5em;color:#b9a8ff}
.big{position:absolute;left:10%;right:10%;height:20%;border-radius:1em;font-size:2.8em;font-weight:bold;
  text-shadow:0 .06em .12em rgba(0,0,0,.4);
  -webkit-box-shadow:0 .25em 0 rgba(0,0,0,.35);box-shadow:0 .25em 0 rgba(0,0,0,.35);
  -webkit-transition:-webkit-transform .1s;}
.big:active{-webkit-transform:translate3d(0,.2em,0)}
.b1{top:32%;background:#7b4dff;background:-webkit-gradient(linear,left top,left bottom,from(#a07bff),to(#6535f0))}
.b2{top:58%;background:#ff4d9d;background:-webkit-gradient(linear,left top,left bottom,from(#ff7ab8),to(#e6207f))}

/* brushing */
#brush{background:#7b4dff;-webkit-transition:background-color .4s}
.back{position:absolute;top:3%;left:3%;padding:.5em .9em;font-size:1.3em;border-radius:.7em;background:rgba(0,0,0,.3)}
.qlabel{position:absolute;top:6%;left:0;right:0;font-size:3em;font-weight:bold;text-shadow:0 .06em .15em rgba(0,0,0,.4)}
.mouth{position:absolute;top:17.5%;left:50%;width:12em;height:7em;margin-left:-6em}
.q{position:absolute;width:48%;height:46%;background:rgba(255,255,255,.22);border-radius:.8em;-webkit-transition:background-color .3s}
.q.ul{left:0;top:0}.q.ur{right:0;top:0}.q.ll{left:0;bottom:0}.q.lr{right:0;bottom:0}
.q.on{background:#fff}
.slabel{position:absolute;top:37.5%;left:0;right:0;font-size:3.2em;font-weight:bold;text-shadow:0 .06em .15em rgba(0,0,0,.4)}
.count{position:absolute;top:46%;left:0;right:0;font-size:13em;line-height:1;font-weight:bold;text-shadow:0 .04em .1em rgba(0,0,0,.35)}
.dots{position:absolute;bottom:4%;left:0;right:0;font-size:1em;line-height:0}
.dot{display:inline-block;width:1.5em;height:1.5em;margin:0 .3em;border-radius:50%;background:rgba(255,255,255,.3)}
.dot.g{margin-left:1.3em}
.dot.done{background:#fff}
.dot.on{background:#ffe14d;-webkit-box-shadow:0 0 .8em #ffe14d;box-shadow:0 0 .8em #ffe14d;-webkit-transform:scale(1.25)}
.pop{-webkit-animation:pop .45s ease-out}
@-webkit-keyframes pop{0%{-webkit-transform:scale(.6);opacity:.2}60%{-webkit-transform:scale(1.15);opacity:1}100%{-webkit-transform:scale(1)}}

.stall{display:none;position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(10,6,36,.94)}
.stall.show{display:block}
.stalltext{position:absolute;top:20%;left:0;right:0;font-size:4em;font-weight:bold}

/* celebrate */
#confetti{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}
.conf{position:absolute;top:-30px;-webkit-animation:fall 3.5s linear infinite}
@-webkit-keyframes fall{0%{-webkit-transform:translate3d(0,0,0) rotate(0deg)}100%{-webkit-transform:translate3d(0,1300px,0) rotate(720deg)}}
.ctitle{position:absolute;top:20%;left:0;right:0;font-size:4.6em;font-weight:bold;color:#ffe14d;text-shadow:0 .06em .2em rgba(0,0,0,.6);-webkit-animation:pop .6s ease-out}
.csub{position:absolute;top:38%;left:8%;right:8%;font-size:2em;color:#fff}
#celebrate .big{top:62%;height:16%}

/* hidden corner + parent panel */
#secret{position:absolute;top:0;right:0;width:80px;height:80px;z-index:50}
.overlay{display:none;position:absolute;top:0;left:0;right:0;bottom:0;z-index:100;background:#f4f1ff;color:#222}
.overlay.open{display:block}
.ptitle{position:absolute;top:2%;left:0;right:0;text-align:center;font-size:2em;font-weight:bold;color:#3a2a8a}
.plog{position:absolute;top:10%;left:4%;right:4%;bottom:18%;overflow:auto;-webkit-overflow-scrolling:touch;background:#fff;border-radius:.6em;padding:.4em .8em;font-size:1em}
.row{padding:.5em 0;border-bottom:1px solid #e3ddf7;font-size:1em}
.row b{color:#3a2a8a}
.pbtns{position:absolute;bottom:3%;left:4%;right:4%;text-align:center}
.pbtn{display:inline-block;margin:0 .4em;padding:.8em 1.2em;font-size:1.1em;border-radius:.6em;background:#7b4dff}
.pbtn.exit{background:#e6207f}