body{background:#f0932b;padding:0;margin:0;font-family:'Happy Monkey', cursive;color:#fff;font-size:18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body[data-touches] .spin-bottle{opacity:0 !important;pointer-events:none !important}body[data-spin-bottle] .intro{-webkit-transition:all 200ms ease-in-out;-o-transition:all 200ms ease-in-out;-moz-transition:all 200ms ease-in-out;transition:all 200ms ease-in-out}body[data-spin-bottle] .spin-bottle{opacity:1;right:50%;top:50%;gap:0}body[data-spin-bottle] .spin-bottle svg{width:20em;height:20em;translate:50% -50%}body[data-spin-bottle] .spin-bottle:after{opacity:0;max-width:0}body[data-spin-bottle] .intro{opacity:0;pointer-events:none}body[data-spin-bottle] .touch{opacity:0;pointer-events:none}.spin-bottle{pointer-events:none;position:absolute;top:0;right:0;font-size:16px;opacity:0;padding:1em;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;gap:0.5em;-webkit-animation:appear-delayed 1s 1s forwards;-moz-animation:appear-delayed 1s 1s forwards;-o-animation:appear-delayed 1s 1s forwards;animation:appear-delayed 1s 1s forwards;cursor:pointer;-webkit-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;transition:all 1s ease-in-out;-webkit-transform:translate(0, 0);-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);-o-transform:translate(0, 0);transform:translate(0, 0)}.spin-bottle svg{width:1.5em;height:1.5em;display:inline-block;rotate:45deg;translate:0% 0%;-webkit-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;transition:all 1s ease-in-out}.spin-bottle path{fill:#fff}.spin-bottle:after{content:'Spin the Bottle instead';display:block;overflow:hidden;-webkit-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;transition:all 1s ease-in-out;white-space:nowrap;opacity:1;max-width:190px}@-webkit-keyframes appear-delayed{from{opacity:0}to{opacity:0.6;pointer-events:auto}}@-moz-keyframes appear-delayed{from{opacity:0}to{opacity:0.6;pointer-events:auto}}@-o-keyframes appear-delayed{from{opacity:0}to{opacity:0.6;pointer-events:auto}}@keyframes appear-delayed{from{opacity:0}to{opacity:0.6;pointer-events:auto}}.countdown{position:absolute;top:50%;left:0;right:0;-webkit-transform:translateY(-50%) scale(0.8, 0.8);-moz-transform:translateY(-50%) scale(0.8, 0.8);-ms-transform:translateY(-50%) scale(0.8, 0.8);-o-transform:translateY(-50%) scale(0.8, 0.8);transform:translateY(-50%) scale(0.8, 0.8);padding:5%;font-size:50px;text-align:center;opacity:0;-webkit-transition:all 100ms ease-in-out;-o-transition:all 100ms ease-in-out;-moz-transition:all 100ms ease-in-out;transition:all 100ms ease-in-out;pointer-events:none}.countdown.fade-in{-webkit-transform:translateY(-50%) scale(1, 1);-moz-transform:translateY(-50%) scale(1, 1);-ms-transform:translateY(-50%) scale(1, 1);-o-transform:translateY(-50%) scale(1, 1);transform:translateY(-50%) scale(1, 1);opacity:1;-webkit-transition:all 500ms ease-in-out;-o-transition:all 500ms ease-in-out;-moz-transition:all 500ms ease-in-out;transition:all 500ms ease-in-out}.intro{position:absolute;top:50%;left:0;right:0;-webkit-transform:translateY(-50%) scale(0.8, 0.8);-moz-transform:translateY(-50%) scale(0.8, 0.8);-ms-transform:translateY(-50%) scale(0.8, 0.8);-o-transform:translateY(-50%) scale(0.8, 0.8);transform:translateY(-50%) scale(0.8, 0.8);padding:5%;font-size:50px;text-align:center;opacity:0;-webkit-transition:all 500ms ease-in-out;-o-transition:all 500ms ease-in-out;-moz-transition:all 500ms ease-in-out;transition:all 500ms ease-in-out;pointer-events:none}.intro.fade-in{-webkit-transform:translateY(-50%) scale(1, 1);-moz-transform:translateY(-50%) scale(1, 1);-ms-transform:translateY(-50%) scale(1, 1);-o-transform:translateY(-50%) scale(1, 1);transform:translateY(-50%) scale(1, 1);opacity:1;-webkit-transition:all 2s ease-in-out;-o-transition:all 2s ease-in-out;-moz-transition:all 2s ease-in-out;transition:all 2s ease-in-out}.touch{position:absolute;display:inline-block;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;width:150px;height:150px;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%);-webkit-transition:width 1s ease-in-out, height 1s ease-in-out, background 1s ease-in-out;-o-transition:width 1s ease-in-out, height 1s ease-in-out, background 1s ease-in-out;-moz-transition:width 1s ease-in-out, height 1s ease-in-out, background 1s ease-in-out;transition:width 1s ease-in-out, height 1s ease-in-out, background 1s ease-in-out}.touch[data-index='0']{background:#4834d4}.touch[data-index='1']{background:#30336b}.touch[data-index='2']{background:#be2edd}.touch[data-index='3']{background:#686de0}.touch[data-index='4']{background:#130f40}.touch[data-index='5']{background:#e056fd}.touch[data-status='won']{width:200px;height:200px;background:#6ab04c}.touch[data-status='lost']{width:100px;height:100px;background:#eb4d4b}