* {
  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html, body {
  height: 100%;
  width: 100%;
  font-family: "IQOSW01-Bold";
  background: #FFF;
  overflow: hidden;
  position: fixed;
}

#app {
  height: 100%;
  display: flex;
  background-image: url("./img/bg.png");
  background-size: 100% auto;
  background-position: top;
  flex-direction: column;
  overflow: hidden;
  transition: all 1s ease;
  will-change: background-position, background-size;
  overflow: hidden;
}

#app.ready {
    background-position: bottom;
    background-size: 120% auto;
}
/*
.play-bg {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-image: url("./img/bg.jpg");
    background-size: cover;
    background-position: center;
}*/

.hw {
    position: fixed;
    height: 10%;
    background-color: #FFF;
    bottom: 0;
    width: 100%;
    font-weight: normal;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "IQOSW01-Regular";
    font-size: 14px;
}

.ring {
    width: 400px;
    height: 420px; /* Maintains square shape */
    position: absolute;
    left: calc(50% - 200px);
    top: calc(50% - 210px);
    mask-image: url('./img/ring-mask.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    transition: all .3s linear;
    animation: beating 3s ease-in-out infinite;
}

#app.ready .ring {
    animation: stoped-beating .4s ease-out ;
}


.ring-top, .ring-bottom, .ring-bg, .ring-hand, .ring-mask{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-image: url("./img/ring-top.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    z-index: 3;
}

.ring-top, .ring-bottom {
    opacity: 0.75;
}

.ring-mask{
    background-image: url("./img/ring-mask.svg");
}

.ring-bottom{
    background-image: url("./img/ring-bottom.svg");
}

.ring-bg{
    background-image: url("./img/ring-hand-bg.jpg");
    background-size: cover;
    animation: rotate-scaled 30s linear infinite;
    filter: blur(3px);
    z-index: 1;
    transition: opacity 1s ease;
}

#app.scratch-card-popping .ring-bg{
    
    opacity: 0;
}

.ring-hand{
    background-image: url("./img/ring-hand.png");
    background-size: contain;
    transform: translate(-24%, 16%);
    filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.3));
    transition: transform 1s ease;
}


#app.hand-out .ring-hand {
    transform: translate(-124%, 116%);
}

#app #open-history {
  height: 80px;
  width: 80px;
  position: fixed;
  top: 0;
  left: 0;
}
#app #history {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #FFF;
  z-index: 100;
  overflow-y: auto;
  display: none;
}
#app #history .close {
  height: 80px;
  width: 80px;
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
}
#app #history table {
  width: 80%;
  margin-left: 10%;
  text-align: left;
  margin-top: 80px;
}
#app #history table thead tr {
  background-color: rgba(0, 0, 0, 0.05);
}
#app #history table thead th {
  padding: 1em;
}
#app #history table tbody tr:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.02);
}
#app #history table tbody td {
  padding: 1em;
}
#app #history table tbody td:nth-child(1) {
  color: #666;
}
#app #history table tbody td:nth-child(2) {
  color: #d63031;
}

#app .top-text {
    color: #FFF;
    font-size: 3.2em;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 700px;
    margin: 0 auto;
    text-shadow: 2px 3px 7px rgba(0, 0, 0, 0.8);
    z-index: 1;
    padding-top: 32px;
    padding-bottom: 24px;
}

#app .under-text {
    color: #FFF;
    font-size: 1.5em;
    text-align: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
    z-index: 1;
}

#app.texts-out .under-text {
    transform: translate(0, -100%);
    opacity: 0
}

.bottom-text {
    position: fixed;
    height: 10%;
    bottom: 10%;
    left: 0;
    width: 100%;
    height: 21%;
    background-image: url("./img/bottom-text.svg");
    background-size: auto 80%;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease, opacity 0.3s ease;
}


#app.texts-out .bottom-text {
    transform: translate(0, 100%);
    opacity: 0
}


#app .bottom-options {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 140px;
    transition: all 0.3s ease;
    gap: 24px;
    z-index: 1;
    align-items: flex-start;
    margin: auto;
    max-width: 620px;
}

#app .bottom-options .option {
    flex-grow: 1;
    display: inline;
    color: #FFF;
    flex-grow: 0;
    font-size: 20px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), 0 0 5px rgba(0, 0, 0, 0.3);
    padding: 14px 32px;
    border-radius: 0 100px 100px 0;
    transition: all .3s ease;
    background: #FFF;
    color: #34303d;
    font-family: "IQOSW04-Regular";
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    padding-bottom: 18px;
    padding-left: 20px;
}

#app .bottom-options .option .letter{
    background: linear-gradient(0, #6cc3ca, #6cc3ca);
    position: absolute;
    left: -58px;
    height: calc(100% - 3px);
    z-index: -1;
    width: 50px;
    top: 0;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    border-radius: 100px 0 0 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "IQOSW01-Bold";
    color: #FFF;
    padding-left: 9px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    padding-bottom: 3px;
}

#app .bottom-options .option.begin {
    flex-grow: 1;
    display: inline;
    color: #FFF;
    flex-grow: 0;
    font-size: 32px;
    box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.3), 0 0 5px rgba(0, 0, 0, 0.3);
    padding: 24px 48px;
    border-radius: 100px;
    transition: all .3s ease;
    background: #ffffff12;
    color: #FFF;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    background-color: #FFF;
    color: #34303d;
    font-family: 'IQOSW01-Bold';
}
    

#app.hidden .top-text{
    opacity: 0;
    filter: blur(3px);
    transform: translateY(-50px)
}

#app.hidden .bottom-options{
    opacity: 0;
    filter: blur(3px);
    transform: translateY(50px)
}

#app .win-text {
    font-size: 34px;
    color: #FFF;
    text-align: center;
    border-radius: 00px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 60px;
    padding-top: 19px;
    display: none;
}

#app .win-text h3{
    font-size: 27px;
    margin: 20px 0;
    margin-bottom: 32px;
    
}

#app .win-text span{
    font-size: 19px;
    color: #DDD;
    font-family: 'IQOSW01-Regular';
}

#app .win-text h2{
    font-size: 24px;
    margin: 20px 0;
    margin-top: 8px;
}


@keyframes button-active-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.03);
    opacity: 0.98;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}


@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}
@font-face {
  font-family: "IQOSW01-Bold";
  src: url("fonts/IQOSW01-Bold.woff2") format("woff2"), url("fonts/IQOSW01-Bold.woff") format("woff");
}
@font-face {
  font-family: "IQOSW02-Bold";
  src: url("fonts/IQOSW02-Bold.woff2") format("woff2"), url("fonts/IQOSW02-Bold.woff") format("woff");
}
@font-face {
  font-family: "IQOSW05-Bold";
  src: url("fonts/IQOSW05-Bold.woff2") format("woff2"), url("fonts/IQOSW05-Bold.woff") format("woff");
}
@font-face {
  font-family: "IQOSW04-Bold";
  src: url("fonts/IQOSW04-Bold.woff2") format("woff2"), url("fonts/IQOSW04-Bold.woff") format("woff");
}
@font-face {
  font-family: "IQOSW10-Bold";
  src: url("fonts/IQOSW10-Bold.woff2") format("woff2"), url("fonts/IQOSW10-Bold.woff") format("woff");
}
@font-face {
  font-family: "IQOSW02-Light";
  src: url("fonts/IQOSW02-Light.woff2") format("woff2"), url("fonts/IQOSW02-Light.woff") format("woff");
}
@font-face {
  font-family: "IQOSW05-Light";
  src: url("fonts/IQOSW05-Light.woff2") format("woff2"), url("fonts/IQOSW05-Light.woff") format("woff");
}
@font-face {
  font-family: "IQOSW01-Regular";
  src: url("fonts/IQOSW01-Regular.woff2") format("woff2"), url("fonts/IQOSW01-Regular.woff") format("woff");
}
@font-face {
  font-family: "IQOSW04-Regular";
  src: url("fonts/IQOSW04-Regular.woff2") format("woff2"), url("fonts/IQOSW04-Regular.woff") format("woff");
}
@font-face {
  font-family: "IQOSW10-Regular";
  src: url("fonts/IQOSW10-Regular.woff2") format("woff2"), url("fonts/IQOSW10-Regular.woff") format("woff");
}
@font-face {
  font-family: "IQOSW05-Regular";
  src: url("fonts/IQOSW05-Regular.woff2") format("woff2"), url("fonts/IQOSW05-Regular.woff") format("woff");
}
@font-face {
  font-family: "IQOSW02-Regular";
  src: url("fonts/IQOSW02-Regular.woff2") format("woff2"), url("fonts/IQOSW02-Regular.woff") format("woff");
}
@font-face {
  font-family: "IQOSW10-Light";
  src: url("fonts/IQOSW10-Light.woff2") format("woff2"), url("fonts/IQOSW10-Light.woff") format("woff");
}
@font-face {
  font-family: "IQOSW04-Light";
  src: url("fonts/IQOSW04-Light.woff2") format("woff2"), url("fonts/IQOSW04-Light.woff") format("woff");
}
@font-face {
  font-family: "IQOSW01-Light";
  src: url("fonts/IQOSW01-Light.woff2") format("woff2"), url("fonts/IQOSW01-Light.woff") format("woff");
}

@keyframes flying{
  0%{
    bottom: -300px;
    transform: translateX(0) scale(0.4);
  }
  50%{
    transform: translateX(100px)  scale(1);
  }
  100%{
    bottom: 110vh;
    transform: translateX(-100px)  scale(1.25);
  }
}


.bokeh {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  filter: blur(30px);
  transform: translateZ(0);
  backface-visibility: hidden;
  mix-blend-mode: lighten;
}

#app.play .bokeh circle {
    opacity: 0.3;
}


.bokeh circle {
  animation: rotate 12s linear infinite;
  fill: #fcd110;
  opacity: 0.7;
  transform-origin: 50%;
  transition: opacity 0.6s ease;
  
}
.bokeh circle:nth-child(2n) {
  fill: #fcd110;
  transform-origin: 20% 70%;
  animation-delay: -6s;
  animation-duration: 8.2632s;
  opacity: 0.3;
}
.bokeh circle:nth-child(3n) {
  opacity: 0.2;
  fill: #d87e31;
  transform-origin: 70% 30%;
  animation-delay: -3s;
  animation-duration: 15.9996s;
}
.bokeh circle:nth-child(4n) {
  fill: #fcd110;
  transform-origin: 90% 70%;
  animation-delay: -4s;
  animation-duration: 9.55992s;
}
.bokeh circle:nth-child(5n) {
  fill: #fcd110;
  transform-origin: 30% 40%;
}
.bokeh circle:nth-child(6n) {
  fill: #fcd110;
  transform-origin: -10% 80%;
  animation-delay: -15.6s;
}
.bokeh circle:nth-child(7n) {
  fill: #fcd110;
  transform-origin: 60% -10%;
}
.bokeh circle:nth-child(8n) {
  fill: #fcd110;
  transform-origin: -30% 50%;
  animation-delay: -4.8s;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-scaled {
  0% {
    transform: scale(1.3) rotate(0deg);
  }
  100% {
    transform: scale(1.2) rotate(360deg);
  }
}


.scratch-card {
  width: 400px;
  height: 420px;
  position: absolute;
  left: calc(50% - 200px);
  top: calc(50% - 210px);
  border-radius: 8px;
  z-index: 4;
  opacity: 0;
  transition: all 0.6s ease;
  transform-origin: bottom left;
  mask-image: url(./img/ring-mask.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  pointer-events: none;
  transform: rotate(-45deg);
}

#app.play .scratch-card {
    opacity: 1;
    transform: rotate(0deg);
    pointer-events: all;
}


.scratch-card-cover-container {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  filter: url("#remove-black");
  transition: opacity 0.4s;
}
.scratch-card-cover-container.clear {
  opacity: 0;
}
.scratch-card-cover-container.hidden {
  display: none;
}

.scratch-card-canvas {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.scratch-card-canvas.hidden {
  opacity: 0;
}
.scratch-card-canvas:active {
  cursor: grabbing;
}

.scratch-card-canvas-render {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  transition: background-color 0.2s;
}
.scratch-card-canvas-render.hidden {
  display: none;
}

.scratch-card-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #cfced6;
  background-image: linear-gradient(to right, #cfced6, #e0dfe6, #efeef3, #e0dfe6, #cfced6);
  overflow: hidden;
}

.scratch-card-reflection {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.6) 60%, transparent 70%);
  background-position: bottom right;
  background-size: 300% 300%;
  background-repeat: no-repeat;
  animation: reflection 4s infinite;
  z-index: 4;
  pointer-events: none;
  transition: all .2s ease;
}

.scratch-card-reflection.no-reflection {
    opacity: 0;
    animation-play-state: paused;
}

@keyframes reflection {
  80% {
    background-position: 0% 0%;
  }
  100% {
    background-position: -50% -50%;
  }
}


@keyframes beating {
  0% {
    transform: scale(0.6);
  }
  50% {
    transform: scale(0.65);
  }
  100% {
    transform: scale(0.6);
  }
}

@keyframes stoped-beating {
  0% {
    transform: scale(0.6);
  }
  100% {
    transform: scale(1);
  }
}


@keyframes accelerate-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


.scratch-card-cover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  filter: url("#noise");
}

.scratch-card-cover-background {
  width: 100%;
  height: 100%;
  fill: #555;
  opacity: 0.1;
}

.scratch-card-image {
  border-radius: 4px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.16));
  user-select: none;
  will-change: transform;
}
.scratch-card-image.animate {
  animation: pop-out-in cubic-bezier(0.65, 1.35, 0.5, 1) 1s;
}

@keyframes pop-out-in {
  36% {
    transform: scale(1.125);
  }
  100% {
    transform: scale(1);
  }
}


.push-label {
    width: 150px;
    height: 38px;
    position: absolute;
    background-image: url('./img/push.svg');
    background-size: contain;
    background-repeat: no-repeat;
    left: calc(50% - 278px);
    top: calc(50% - 81px);
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.7));
    transition: opacity .3s ease;
}

#app.texts-out .push-label {
    opacity: 0;
}


.terminate {
    position: absolute;
    bottom: calc(10% + 24px);
    text-align: center;
    color: #FFF;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 16px 32px;
    border-radius: 30px;
    font-family: 'IQOSW01-Regular';
    opacity: 0;
    transition: opacity .3s ease;
}

#app.can-terminate .terminate {
    opacity: 1;
}