svg,svg path{fill:currentcolor}svg .icon-density--1{display:block}@media (-webkit-min-device-pixel-ratio:2){svg .icon-density--1{display:none}}svg .icon-density--2{display:none}@media (-webkit-min-device-pixel-ratio:2){svg .icon-density--2{display:block}}*{box-sizing:border-box}body{margin:0}.five-square-2-demo{--deviceHeight:480px;--deviceWidth:320px;--statusbarHeight:20px;--toolbarHeight:44px;--toolbarHeightNeg:calc(var(--toolbarHeight)*-1);--toolbarTopMargin:calc(var(--deviceHeight) - var(--toolbarHeight));background:transparent}.five-square-2-demo body{background-color:#000;background:transparent;display:grid;font-family:Helvetica Neue,Lucida Grande,sans-serif;font-size:0;height:100vh;place-content:center;width:100vw}.five-square-2-demo body *{font-size:small;user-select:none}.five-square-2-demo a{text-decoration:none}.five-square-2-demo a:hover{text-decoration:underline}.five-square-2-demo *{-webkit-tap-highlight-color:rgba(0,0,0,0)}.five-square-2-demo img{border:none}.five-square-2-demo .container{height:var(--deviceHeight);overflow:hidden;position:relative;width:var(--deviceWidth)}.five-square-2-demo #game{overflow:hidden}.five-square-2-demo #game,.five-square-2-demo .slidingView{height:var(--deviceHeight);position:absolute;width:var(--deviceWidth);z-index:30}.five-square-2-demo .slidingView{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/chrome.png);background-position:top calc(var(--toolbarHeightNeg)*2) left;background-size:var(--deviceWidth) 568px;cursor:default;opacity:0;padding-top:var(--toolbarHeight);pointer-events:none;transform:translateY(var(--toolbarTopMargin));transition:transform 0.2s ease-out,opacity 0.2s ease-out}@media only screen and (min-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2/1),only screen and (min-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx){.five-square-2-demo .slidingView{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/chrome@2x.png)}}@media only screen and (min-device-pixel-ratio:3),only screen and (min-device-pixel-ratio:3/1),only screen and (min-pixel-ratio:3),only screen and (min-resolution:288dpi),only screen and (min-resolution:3dppx){.five-square-2-demo .slidingView{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/chrome@3x.png)}}.five-square-2-demo #game.howToPlay .slidingView{opacity:1;pointer-events:auto;transform:translateY(var(--statusbarHeight));transition:transform 0.2s ease-out,opacity 0.2s ease-out}.five-square-2-demo #statusBar{background-color:rgba(0,0,0,.6);box-shadow:inset 0 -1px 0 rgba(0,0,0,.3);display:flex;height:var(--statusbarHeight);position:absolute;transition:background-color 0.2s ease-out;width:var(--deviceWidth);z-index:33}#game.howToPlay .five-square-2-demo #statusBar{background-color:#000;transition:background-color 0.2s ease-out}.five-square-2-demo #statusBar .battery,.five-square-2-demo #statusBar .signal{background-color:transparent;display:block;height:var(--statusbarHeight);position:relative;z-index:100000000}.five-square-2-demo #statusBar .battery:after,.five-square-2-demo #statusBar .battery:before,.five-square-2-demo #statusBar .signal:after,.five-square-2-demo #statusBar .signal:before{background-size:cover;bottom:0;content:"";left:0;position:absolute;right:0;top:0;transition:opacity 0.2s ease-out;z-index:10000}.five-square-2-demo #statusBar .battery:before,.five-square-2-demo #statusBar .signal:before{background-image:var(--image);opacity:1;z-index:10}.five-square-2-demo #statusBar .signal{margin:0 auto 0 0;width:26px}.five-square-2-demo #statusBar .signal:before{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/statusbarsignalfilled.png)}@media only screen and (min-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2/1),only screen and (min-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx){.five-square-2-demo #statusBar .signal:before{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/statusbarsignalfilled@2x.png)}}@media only screen and (min-device-pixel-ratio:3),only screen and (min-device-pixel-ratio:3/1),only screen and (min-pixel-ratio:3),only screen and (min-resolution:288dpi),only screen and (min-resolution:3dppx){.five-square-2-demo #statusBar .signal:before{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/statusbarsignalfilled@3x.png)}}.five-square-2-demo #statusBar .currentTime{color:hsla(0,0%,100%,.8);display:inline-block;font-weight:700;height:var(--statusbarHeight);left:0;line-height:var(--statusbarHeight);position:absolute;right:0;text-align:center;text-shadow:0 -1px 0 rgba(0,0,0,.75);text-transform:uppercase;transition:color 0.2s ease-out,text-shadow 0.2s ease-out;width:auto}.five-square-2-demo #statusBar .battery{margin:0 0 0 auto;width:29px}.five-square-2-demo #statusBar .battery:before{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/statusbarbatteryfilled.png)}@media only screen and (min-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2/1),only screen and (min-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx){.five-square-2-demo #statusBar .battery:before{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/statusbarbatteryfilled@2x.png)}}@media only screen and (min-device-pixel-ratio:3),only screen and (min-device-pixel-ratio:3/1),only screen and (min-pixel-ratio:3),only screen and (min-resolution:288dpi),only screen and (min-resolution:3dppx){.five-square-2-demo #statusBar .battery:before{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/statusbarbatteryfilled@3x.png)}}.five-square-2-demo #splash{background-color:#000;float:left;height:var(--deviceHeight);margin:0px;position:absolute;width:var(--deviceWidth);z-index:4}.five-square-2-demo #board{height:447px;padding:33px 18px 0px;position:absolute;width:var(--deviceWidth);z-index:1}.five-square-2-demo #boardBackground{background-color:transparent;background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/backgrounds.png);background-position:0 0;background-repeat:no-repeat;background-size:var(--deviceWidth) var(--deviceHeight);bottom:0;left:0;position:absolute;right:0;top:0;z-index:-1}@media only screen and (min-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2/1),only screen and (min-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx){.five-square-2-demo #boardBackground{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/backgrounds@2x.png)}}@media only screen and (min-device-pixel-ratio:3),only screen and (min-device-pixel-ratio:3/1),only screen and (min-pixel-ratio:3),only screen and (min-resolution:288dpi),only screen and (min-resolution:3dppx){.five-square-2-demo #boardBackground{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/backgrounds@3x.png)}}.five-square-2-demo #play{animation:FSPulseStart 1s ease-out;animation-iteration-count:infinite;animation-play-state:running;border-radius:var(--toolbarHeight);box-shadow:0 1.4px 2.6px rgba(0,0,0,.028),0 3.2px 6.4px rgba(0,0,0,.04),0 6px 12px rgba(0,0,0,.05),0 10.8px 21.4px rgba(0,0,0,.06),0 20px 40.2px rgba(0,0,0,.072),0 48px 96px rgba(0,0,0,.1);color:#fff;cursor:pointer;font-size:24px;font-weight:700;height:88px;left:50%;line-height:88px;padding:0 48px;position:relative;position:absolute;text-shadow:0px -2px 1pcpx rgba(0,0,0,.6);top:50%;transform:translate(-50%,-50%) scale(1);transition:box-shadow 0.2s ease-out,transform 0.2s ease-out;vertical-align:middle;white-space:nowrap}.five-square-2-demo #play:before{border-radius:var(--toolbarHeight);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transition:background-color 0.2s ease-out;z-index:-1}.five-square-2-demo #play:hover{animation-play-state:paused;box-shadow:0 1.4px 2.6px rgba(0,0,0,.084),0 3.2px 6.4px rgba(0,0,0,.122),0 6px 12px rgba(0,0,0,.15),0 10.8px 21.4px rgba(0,0,0,.178),0 20px 40.2px rgba(0,0,0,.216),0 48px 96px rgba(0,0,0,.3);transform:translate(-50%,-50%) scale(1.05)}.five-square-2-demo #play:hover:before{background-color:rgba(0,0,0,.2)}.five-square-2-demo #play:active{animation-play-state:paused;box-shadow:0 0.6px 1.4px rgba(0,0,0,.042),0 1.6px 3.2px rgba(0,0,0,.061),0 3px 6px rgba(0,0,0,.075),0 5.4px 10.8px rgba(0,0,0,.089),0 10px 20px rgba(0,0,0,.108),0 24px 448x rgba(0,0,0,.15);transform:translate(-50%,-50%) scale(0.975)}.five-square-2-demo #play:active:before{background-color:rgba(0,0,0,.4)}.five-square-2-demo #toolbar{height:var(--deviceHeight);--spacer:20px;background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/chrome.png);background-position:top calc(var(--toolbarHeightNeg)*2) left;background-size:var(--deviceWidth) 568px;display:flex;padding:0 var(--spacer);position:absolute;transform:translateY(var(--toolbarTopMargin));transition:transform 0.2s ease-out,opacity 0.2s ease-out;width:var(--deviceWidth);z-index:1}@media only screen and (min-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2/1),only screen and (min-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx){.five-square-2-demo #toolbar{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/chrome@2x.png)}}@media only screen and (min-device-pixel-ratio:3),only screen and (min-device-pixel-ratio:3/1),only screen and (min-pixel-ratio:3),only screen and (min-resolution:288dpi),only screen and (min-resolution:3dppx){.five-square-2-demo #toolbar{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/chrome@3x.png)}}#game.howToPlay .five-square-2-demo #toolbar{transform:translateY(var(--statusbarHeight));transition:transform 0.2s ease-out,opacity 0.2s ease-out}.five-square-2-demo .toolbarButton{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/chrome.png);background-repeat:no-repeat;background-size:var(--deviceWidth) 568px;cursor:pointer;float:left;height:var(--toolbarHeight);margin-left:0px;width:var(--toolbarHeight);--bgPosY:top var(--toolbarHeightNeg);transition:opacity 0.2s ease-out}@media only screen and (min-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2/1),only screen and (min-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx){.five-square-2-demo .toolbarButton{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/chrome@2x.png)}}@media only screen and (min-device-pixel-ratio:3),only screen and (min-device-pixel-ratio:3/1),only screen and (min-pixel-ratio:3),only screen and (min-resolution:288dpi),only screen and (min-resolution:3dppx){.five-square-2-demo .toolbarButton{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/chrome@3x.png)}}#game.howToPlay .five-square-2-demo .toolbarButton{opacity:0}.five-square-2-demo .toolbarButton:active{--toolbarHeightNeg:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}.five-square-2-demo .toolbarButton#newGameButton{background-position:var(--bgPosY) left -20px;margin:0 var(--spacer) 0 0}.five-square-2-demo .toolbarButton#undoButton{background-position:var(--bgPosY) left -84px;margin:0}.five-square-2-demo .toolbarButton#howToPlayButton{background-position:var(--bgPosY) right -20px;margin:0 0 0 auto}.five-square-2-demo .disabledButton{opacity:0.5;pointer-events:none}.five-square-2-demo #win{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/winner.png);background-repeat:no-repeat;display:none;float:left;height:428px;margin:8px 0 0;position:absolute;width:var(--deviceWidth);z-index:4}@media only screen and (min-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2/1),only screen and (min-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx){.five-square-2-demo #win{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/winner@2x.png)}}@media only screen and (min-device-pixel-ratio:3),only screen and (min-device-pixel-ratio:3/1),only screen and (min-pixel-ratio:3),only screen and (min-resolution:288dpi),only screen and (min-resolution:3dppx){.five-square-2-demo #win{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/winner@3x.png)}}.five-square-2-demo .navBar{align-items:center;background-position:top calc(var(--toolbarHeightNeg)*2) left;background-size:var(--deviceWidth) var(--toolbarHeight);display:flex;height:var(--toolbarHeight);margin-top:calc(var(--toolbarHeight)*-1);width:var(--deviceWidth);z-index:32}.five-square-2-demo .navBar .title{color:#fff;display:inline-block;font-size:20px;font-weight:700;margin:0 auto;place-self:center;position:relative;text-align:center}.five-square-2-demo #howToPlayDoneButton{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/navbarbutton.png);background-position:0 calc(var(--toolbarHeight)*-1);background-repeat:no-repeat;background-size:62px 88px;color:#fff;cursor:pointer;font-size:12px;font-weight:700;height:var(--toolbarHeight);line-height:var(--toolbarHeight);position:absolute;right:0px;text-align:center;vertical-align:middle;width:62px;z-index:0;-webkit-touch-callout:none;-webkit-user-select:none}@media only screen and (min-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2/1),only screen and (min-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx){.five-square-2-demo #howToPlayDoneButton{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/navbarbutton@2x.png)}}@media only screen and (min-device-pixel-ratio:3),only screen and (min-device-pixel-ratio:3/1),only screen and (min-pixel-ratio:3),only screen and (min-resolution:288dpi),only screen and (min-resolution:3dppx){.five-square-2-demo #howToPlayDoneButton{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/navbarbutton@3x.png)}}.five-square-2-demo #howToPlayDoneButton:active{background-position:0 0}.five-square-2-demo #howToPlayDoneButton span{bottom:0;display:contents;display:block;left:0;position:relative;right:0;top:0;z-index:10}.five-square-2-demo #howToPlayDoneButton span:after,.five-square-2-demo #howToPlayDoneButton span:before{bottom:0;color:#000;content:attr(data-text);filter:blur(1px);left:0;mix-blend-mode:var(--blendMode);opacity:var(--opacity);position:absolute;right:0;top:1px;z-index:-1}.five-square-2-demo #howToPlayDoneButton span:before{--blendMode:overlay;--opacity:.75}.five-square-2-demo #howToPlayDoneButton span:after{--blendMode:multiply;--opacity:.5}.five-square-2-demo .slidingView h2{display:block;font-size:17px;font-weight:700;line-height:2.5;text-align:center}.five-square-2-demo .slidingView p{font-size:14px}.five-square-2-demo .slidingView a{font-weight:700}.five-square-2-demo .slidingView h2,.five-square-2-demo .slidingView p{margin:10px 14px 0}.five-square-2-demo .slidingView h1,.five-square-2-demo .slidingView h2,.five-square-2-demo .slidingView p{color:#fff;position:relative}.five-square-2-demo .slidingView h1:after,.five-square-2-demo .slidingView h1:before,.five-square-2-demo .slidingView h2:after,.five-square-2-demo .slidingView h2:before,.five-square-2-demo .slidingView p:after,.five-square-2-demo .slidingView p:before{bottom:0;color:#000;content:attr(data-text);filter:blur(1px);left:0;mix-blend-mode:var(--blendMode);opacity:var(--opacity);position:absolute;right:0;top:1px;z-index:-1}.five-square-2-demo .slidingView h1:before,.five-square-2-demo .slidingView h2:before,.five-square-2-demo .slidingView p:before{--blendMode:overlay;--opacity:.75}.five-square-2-demo .slidingView h1:after,.five-square-2-demo .slidingView h2:after,.five-square-2-demo .slidingView p:after{--blendMode:multiply;--opacity:.5}.five-square-2-demo .slidingView h2+p{margin:0 14px}.five-square-2-demo #appStoreCell{background:#c2c2c2;background:-moz-linear-gradient(top,#c2c2c2 #c8c8c8);background:-webkit-gradient(linear,left top,left bottom,from(#c2c2c2),to(#c8c8c8));border:1px solid #999;border-radius:5px;filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr="#c2c2c2",EndColorStr="#c8c8c8",GradientType=0);height:77px;margin:20px 20px 15px;width:auto}.five-square-2-demo #appStoreCell:hover{background:#b5b5b5;background:-moz-linear-gradient(top,#b5b5b5 #bababa);background:-webkit-gradient(linear,left top,left bottom,from(#b5b5b5),to(#bababa));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr="#b5b5b5",EndColorStr="#bababa",GradientType=0);text-decoration:none}.five-square-2-demo #appStoreCell #appIcon{background-color:transparent;background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/appicon-57.png);background-repeat:no-repeat;background-size:57px;height:57px;margin:10px auto 10px 10px;mask-image:url(../../../ios-appicon-old-mask.svg);-webkit-mask-image:url(../../../ios-appicon-old-mask.svg);mask-position:center center;-webkit-mask-position:center center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-size:contain;-webkit-mask-size:contain;position:absolute;width:57px}@media only screen and (min-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2/1),only screen and (min-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx){.five-square-2-demo #appStoreCell #appIcon{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/appicon-57@2x.png)}}@media only screen and (min-device-pixel-ratio:3),only screen and (min-device-pixel-ratio:3/1),only screen and (min-pixel-ratio:3),only screen and (min-resolution:288dpi),only screen and (min-resolution:3dppx){.five-square-2-demo #appStoreCell #appIcon{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/appicon-57@3x.png)}}.five-square-2-demo #appStoreCell #labels{color:#393a39;font-size:8pt;height:20px;margin:14px auto auto 67px;position:absolute;text-decoration:none;width:300px}.five-square-2-demo #appStoreCell #labels #appName{color:#000;font-size:10pt;line-height:normal;margin-top:0px}.five-square-2-demo #appStoreCell #labels p{font-weight:700}.five-square-2-demo div.spot{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/cards.png);background-position:102px 280px;background-repeat:no-repeat;background-size:663px 350px;display:none;backbround-color:transparent;cursor:pointer;float:left;height:70px;margin:6px 0px 0px 5px;padding:0px;position:relative;width:51px}@media only screen and (min-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2/1),only screen and (min-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx){.five-square-2-demo div.spot{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/cards@2x.png)}}@media only screen and (min-device-pixel-ratio:3),only screen and (min-device-pixel-ratio:3/1),only screen and (min-pixel-ratio:3),only screen and (min-resolution:288dpi),only screen and (min-resolution:3dppx){.five-square-2-demo div.spot{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/cards@3x.png)}}@keyframes pulseCard{0%{opacity:1}50%{opacity:0.25}to{opacity:1}}.five-square-2-demo .pulsing{animation:pulseCard 1s ease-out;animation-iteration-count:infinite}.five-square-2-demo div.overlay{display:none;height:72px;width:57px;z-index:2}.five-square-2-demo div.highlight{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/rim.png);background-repeat:no-repeat;background-size:57px 72px;display:none;height:72px;margin-left:-3px;margin-top:-1px;width:57px;z-index:3}@media only screen and (min-device-pixel-ratio:2),only screen and (min-device-pixel-ratio:2/1),only screen and (min-pixel-ratio:2),only screen and (min-resolution:192dpi),only screen and (min-resolution:2dppx){.five-square-2-demo div.highlight{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/rim@2x.png)}}@media only screen and (min-device-pixel-ratio:3),only screen and (min-device-pixel-ratio:3/1),only screen and (min-pixel-ratio:3),only screen and (min-resolution:288dpi),only screen and (min-resolution:3dppx){.five-square-2-demo div.highlight{background-image:url(https://cdn.wilnichols.com/case-studies/five-square-2/img/rim@3x.png)}}.five-square-2-demo .audio{display:none}
/*# sourceMappingURL=five-square-2.css.map */