@font-face {
  font-family: 'Geometria Narrow';
  src: url("GeometriaNarrow-Bold.84f47140.woff2") format('woff2'),
    url("GeometriaNarrow-Bold.487c7441.woff") format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geometria Narrow';
  src: url("GeometriaNarrow.3eba6978.woff2") format('woff2'),
    url("GeometriaNarrow.d49d803b.woff") format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  font-family: 'Geometria Narrow', sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  margin: 0;
}

button {
  font-family: 'Geometria Narrow', sans-serif;
  text-transform: uppercase;
  font-weight: bold;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: fit-content;
  justify-content: center;
  position: relative;
}

.wrapper-inner {
  max-width: 30rem;
  margin: 0 auto;
}

.spinner-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5rem;
  height: 5rem;
  z-index: 11;

  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner div {
  background: #ffffff;
  animation: spin 1000ms infinite ease-in-out;
  width: 1rem;
  height: 4rem;
  animation-delay: 150ms;
  transform-origin: center;
}

.spinner {
  position: relative;
}

.spinner div:nth-child(1),
.spinner div:nth-child(3) {
  position: absolute;
  top: 0;
  content: '';
}

.spinner div:nth-child(1) {
  left: -1.5rem;
  animation-delay: 0ms;
}

.spinner div:nth-child(3) {
  left: 1.5rem;
  animation-delay: 300ms;
}

@keyframes spin {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.25);
  }
}

/* -------------------------- */

/* --------BACKGROUND-------- */

/* -------------------------- */

html.blue .pink {
  opacity: 0;
}

html.pink .blue {
  opacity: 0;
}

.bg {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
  transition: background-color 500ms ease-out;
}

.bg img {
  transition: opacity 250ms ease-out;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

html.blue .bg {
  background-color: #911d23;
}

html.pink .bg {
  background-color: #911d23;
}

.bg img:nth-child(2n) {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.pinkGradient {
  background-image: linear-gradient(to right bottom, rgb(212, 72, 110) 0%, rgb(235, 140, 96) 100%);
}

.blueGradient {
  background-image: linear-gradient(
    to right bottom,
    rgb(33, 148, 164) 0%,
    rgb(25, 138, 165) 50%,
    rgb(54, 171, 162) 100%
  );
}

/* -------------------------- */

/* -----------GAME----------- */

/* -------------------------- */

#game-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 9vw;
  margin-top: -5%;
  /* Needs to be above the header for hint animation */
  z-index: 1;
}

#game-container canvas {
  width: 100%;
  height: auto;
  margin: -10px 0;
}

/* -------------------------- */

/* ----------HEADER---------- */

/* -------------------------- */

header {
  background-image: url("header_new.86879077.png");
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;

  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 39%;
  margin-top: -3%;
}

@keyframes floatingGiftsBlue {
  0% {
    transform: translateY(0%);
  }

  25% {
    transform: translateY(5%);
  }

  75% {
    transform: translateY(-5%);
  }
}

@keyframes floatingGiftsPink {
  0% {
    transform: translateY(0%);
  }

  25% {
    transform: translateY(-5%);
  }

  75% {
    transform: translateY(5%);
  }
}

/*.floating-gift-blue {*/

/*position: absolute;*/

/*z-index: 1;*/

/*left: 5%;*/

/*top: -1%;*/

/*height: 0;*/

/*width: 30%;*/

/*background-image: url('../static/images/header/floating-gift-blue.png');*/

/*background-position: center center;*/

/*background-size: contain;*/

/*background-repeat: no-repeat;*/

/*padding-bottom: 31%;*/

/*animation: floatingGiftsBlue 20s infinite;*/

/*}*/

/*.floating-gift-pink {*/

/*position: absolute;*/

/*z-index: 1;*/

/*left: -11.5%;*/

/*top: 8%;*/

/*height: 0;*/

/*width: 30%;*/

/*background-image: url('../static/images/header/floating-gift-pink.png');*/

/*background-position: center center;*/

/*background-size: contain;*/

/*background-repeat: no-repeat;*/

/*padding-bottom: 31%;*/

/*animation: floatingGiftsPink 20s infinite;*/

/*}*/

header .closeButton {
  top: 6vw;
  right: 4.4vw;
  width: 11vw;
  height: 11vw;
  box-shadow: 0px 10px 22px -5px rgba(0, 0, 0, 0.4);
}

header .closeButton img {
  display: none;
}

html.blue header .closeButton img:nth-child(1) {
  display: inline;
}

html.pink header .closeButton img:nth-child(2) {
  display: inline;
}

.header-content-container {
  padding: 7% 8%;
}

.score-board-container {
  background-image: url("Score-blue_new.d2bb61ff.png");
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;

  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  height: 0;
  padding-bottom: 21%;
  margin-bottom: -2%;
}

html.pink .score-board-container {
  background-image: url("Score-pink.a59bbb1e.png");
}

.score-board {
  font-size: 8vw;
  margin-top: 19%;
  will-change: contents;
  font-variant: tabular-nums;
}

/* -------------------------- */

/* ----------BUTTONS--------- */

/* -------------------------- */

.modalWrapper button {
  box-shadow: 0px 10px 22px -5px rgba(0, 0, 0, 0.4);
}

.modalWrapper button:not(.closeButton) {
  height: 3em;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
}

.primary {
  background-image: url("couponButtonBackgroundred.74c3aeb3.png");
  background-size: 100% 100%;
  border-radius: 8px;
  color: #ffffff;
}

.secondary {
  background-image: linear-gradient(to bottom, #ff006f, #dc0060);
  color: white;
}

.blue .secondary {
  background-image: linear-gradient(to bottom, #13b2dc, #0990b8);
}

.closeButton {
  top: -15px;
  right: -15px;
  position: absolute;
  border-radius: 50%;
  font-size: 2rem;
  color: #dc0060;
  border: none;
  width: 60px;
  height: 60px;
  box-shadow: inset 0 0 15.5px 6px rgba(206, 144, 37, 0.36);
  background-image: url("modalCloseButtonBackground.87097e1a.png");
  background-size: 100% 100%;
}

.closeButton img {
  height: 33%;
}

/* -------------------------- */

/* -------NOTIFICATION------- */

/* -------------------------- */

.notificationWrapper {
  position: absolute;
  top: 0;
  background: white;
  height: 90px;
  width: 94%;
  margin: 0 3%;
  display: flex;
  box-shadow: 0px 10px 22px -5px rgba(0, 0, 0, 0.8);
  border-radius: 12px;
  padding: 18px;
  transform: translate3d(0, -120%, 0);
  transition: transform 0.5s cubic-bezier(0.17, 0.67, 0, 1.42), opacity 0.5s ease-out;
  margin-top: 1rem;
  opacity: 0;
  z-index: 10;
}

.notificationWrapper .logoWrapper {
  height: 100%;
  width: 130px;
  position: relative;
  margin-right: 10px;
}

.notificationWrapper.postCard .logoWrapper {
  width: 50px;
}

.notificationWrapper .logoWrapper img {
  max-height: 100%;
  max-width: 100%;
  display: block;
  margin: auto 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.notificationWrapper .textContent p {
  text-transform: none;
  font-family: 'Geometria Narrow', sans-serif;
  font-weight: 600;
  letter-spacing: 0.4;
}

.notificationWrapper .textContent p:nth-child(2) {
  margin-top: 0.25rem;
  font-weight: 400;
  font-size: 12px;
}

.notificationWrapper button {
  background-color: white;
  border: none;
  padding: 0 0 10px 10px;
  display: flex;
}

.notificationWrapper button img {
  width: 15px;
}

.notificationWrapper.open {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* -------------------------- */

/* -----------MODAL---------- */

/* -------------------------- */

.darkBackground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: black;
  z-index: 2;
  opacity: 0.7;
}

.modalWrapper {
  width: 90%;
  max-width: 450px;
  padding: 10%;
  height: auto;
  min-height: 500px;
  max-height: 650px;
  background-color: white;
  border-radius: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

div.modalWrapper.postCard .discountLabel {
  display: none;
}

.discountLabel {
  position: absolute;
  top: 0;
  left: 0;
  /* magic number */
  width: 48%;
  border-radius: 12px 0 12px 0;
  text-align: center;
  padding: 0.5rem 0.75rem;
  font-size: calc(1.125 * 3vw);
  background-image: linear-gradient(to right, #df9a00, #fff38d, #e49e00);
}

.modalWrapper button {
  box-shadow: 0px 10px 22px -5px rgba(0, 0, 0, 0.4);
}

.modalWrapper button:not(.closeButton) {
  height: 3em;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
}

.closeButton {
  top: -15px;
  right: -15px;
  position: absolute;
  border-radius: 50%;
  font-size: 2rem;
  color: #dc0060;
  border: none;
  width: 60px;
  height: 60px;
  box-shadow: inset 0 0 15.5px 6px rgba(206, 144, 37, 0.36);
  background-image: url("modalCloseButtonBackground.87097e1a.png");
  background-size: 100% 100%;
}

.closeButton img {
  height: 33%;
}

.mainContent,
.modalWrapper footer {
  width: 100%;
  /* background: red; */
  display: flex;
  text-align: center;
  flex-direction: column;
  margin-top: 10%;
  height: 50%;
  justify-content: space-around;
}

div.modalWrapper.postCard .mainContent {
  margin-top: -30px;
  height: 65%;
}

.mainContent img {
  width: 80%;
  margin: 0 auto;
}

div.modalWrapper.postCard .mainContent img {
  width: 55%;
}

.mainContent h2 {
  font-size: 1rem;
}

div.modalWrapper.postCard .mainContent h2 {
  display: none;
}

.mainContent button {
  position: relative;
  background-image: url("couponButtonBackgroundred.74c3aeb3.png");
  background-size: 100% 100%;
}

.modalWrapper footer {
  position: absolute;
  height: 40%;
  bottom: 0;
  left: 0;
  padding: 8% 10vw;
  border-radius: 0 0 12px 12px;
}

.modalWrapper footer p {
  display: flex;
  flex-direction: column-reverse;
  color: white;
}

.modalWrapper footer p span {
  margin: 0 auto;
  width: 70px;
  height: 70px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  color: #dc0060;
  font-size: 2.5rem;
  box-shadow: 0px 10px 22px -5px rgba(0, 0, 0, 0.4);
}

.blue .modalWrapper footer p span {
  color: #048eb4;
}

/* -------------------------- */

/* --------ZERO-STATE-------- */

/* -------------------------- */

.blue .zeroState {
  /*background-image: linear-gradient(*/
  /*to right bottom,*/
  /*rgb(33, 148, 164) 0%,*/
  /*rgb(25, 138, 165) 50%,*/
  /*rgb(54, 171, 162) 100%*/
  /*);*/
  background: linear-gradient(180deg, #ba0e1c 0%, #a51621 46.51%, #ba0f1c 99.22%);
}

.zeroState {
  background-image: linear-gradient(to right bottom, rgb(212, 72, 110) 0%, rgb(235, 140, 96) 100%);
  padding: 2rem 0;
}

.zeroStateThemeImg {
  position: absolute;
  width: 50%;
  top: 0;
  left: 0;
  transform: translateY(-45%);
}

.zeroStateHeader {
  padding: 1rem 0 2rem;
}

.zeroStateHeader h1 {
  font-size: 1.5rem;
  color: white;
  text-align: center;
}

.zeroStateHeader h2 {
  text-align: center;
  font-size: 1.8rem;
  width: 100%;
  color: #ffffff;
  /*background: linear-gradient(to right, #df9a00, #fff38d, #e49e00);*/
  /*-webkit-background-clip: text;*/
  /*-webkit-text-fill-color: transparent;*/
}

.mainZSImages {
  position: relative;
  left: 0;
  width: 100%;
  margin-bottom: 40px;
}

.zeroStateImage {
  width: 100%;
}

.hand {
  position: absolute;
  width: 16.6%;
  left: calc(3.4 * 16.6%);
  bottom: 0;
}

.zeroState button {
  bottom: 1.5rem;
  width: 80%;
  margin: 0 10%;
}

.logo {
  width: 125px;
  margin: 0 auto;
}

/* -------------------------- */

/* -----------TIMER---------- */

/* -------------------------- */

.game-timer {
  display: flex;
  width: 100%;
  height: 5vw;
  padding: 5px;
  background-image: url("loader-bg.53ca244d.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.game-timer-overflow-container {
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.game-timer-bar {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background-image: url("loader-pattern-blue.b4bf4485.png");
  background-repeat-y: no-repeat;
  background-size: contain;
}

html.pink .game-timer-bar {
  background-image: url("loader-pattern-pink.5395120d.png");
}

.animate-bar {
  animation: timer 7s linear 1;
  animation-fill-mode: forwards;
}

.animate-bar-background {
  animation: timer 7s linear 1, timerBackground 7.5s linear 1;
  animation-fill-mode: forwards;
}

@keyframes timer {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(calc(-100% + 10px));
  }
}

@keyframes timerBackground {
  from {
    background-position-x: 0%;
  }

  to {
    background-position-x: 190%;
  }
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* -------------------------- */

/* -----------GIFT----------- */

/* -------------------------- */

.gift-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.3s ease;
  z-index: 11;
}

.gift-canvas.active {
  pointer-events: all;
  opacity: 1;
}

.blur {
  position: absolute;
  z-index: 10;
  backdrop-filter: blur(3px);
  color: white;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  opacity: 0;
  pointer-events: none;
}

.gift-modal {
  position: fixed;
  inset: 0;
  top: 50%;
  left: 50%;
  z-index: 10;

  transform: translate(-50%, -50%);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
}

.gift,
.gift-modal button {
  z-index: 1;
}

.gift {
  width: 60vw;
  max-width: 22rem;
  will-change: transform;
}

.gift.pink {
  display: none;
}

html.pink .gift.blue {
  display: none;
}

html.pink .gift.pink {
  display: inline;
}

.gift-modal button {
  -webkit-appearance: none;
  background: none;
  border: 0;
  transition: transform 150ms ease-out;
  outline: none;
}

.gift-modal button:hover,
.gift-modal button:focus {
  transform: scale(1.1);
}

.gift-modal button:active {
  transform: scale(0.9);
}

.gift-detail,
.burst {
  position: absolute;
}

.burst {
  width: 100%;
  max-width: 90rem;
  min-width: 60rem;
}

.no-click {
  pointer-events: none;
}

/* -------------------------- */

/* -------PANEL BOTTOM------- */

/* -------------------------- */

.bottom-panel {
  width: 100%;
  height: 0;
  padding-bottom: 36%;

  background-image: url("panel-bottom-small.fe03daa6.png");
  background-position: center top;
  background-size: contain;
  background-repeat: no-repeat;

  color: white;
}

/*.bottom-panel.showHighScore {*/

/*background-image: url('../static/images/panel-bottom.png');*/

/*}*/

.bottom-panel-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: -2.2%;

  padding: 4.2% 7% 7% 7%;
}

.top-bar {
  color: #5e0e0e;
  font-size: 4vw;
  margin-top: 3%;
  position: absolute;
  top: 33%;
  will-change: contents;
}

html.pink .top-bar {
  color: #5e0e0e;
}

.bottom-bar {
  margin-top: 0;
  font-size: 4vw;
  position: absolute;
  bottom: -106.5%;
  will-change: contents;
  transform: translateZ(0) !important;
}

/*.showHighScore .bottom-bar {*/

/*margin-top: 0;*/

/*font-size: 4vw;*/

/*position: absolute;*/

/*bottom: -142%;*/

/*display: flex;*/

/*flex-direction: column;*/

/*text-align: center;*/

/*}*/

.bottom-bar #highscoreText {
  font-size: 0.8rem;
}

.bottom-bar #highscoreScore {
  font-size: calc(4vw + 0.25rem);
  margin-top: -0.2rem;
}

/* -------------------------- */

/* ---------SPONSORS--------- */

/* -------------------------- */

@keyframes sponsorList {
  from {
    transform: translateX(-10%);
  }

  to {
    transform: translateX(-90%);
  }
}

.banner {
  width: 100%;
}

.sponsors {
  overflow: hidden;
  margin-top: -5%;
}

.banner {
  width: 100%;
}

/*.sponsors-title {*/

/*text-align: center;*/

/*color: white;*/

/*font-size: 0.8rem;*/

/*margin-bottom: 10px;*/

/*}*/

/*.sponsors-list {*/

/*display: inline-flex;*/

/*gap: 7px;*/

/*list-style: none;*/

/*}*/

/*.sponsors-list-item {*/

/*width: 106px;*/

/*height: 57px;*/

/*background: white;*/

/*border-radius: 8px;*/

/*}*/

/*.sponsors-list-item img {*/

/*width: 100%;*/

/*height: 100%;*/

/*object-fit: contain;*/

/*}*/

@media screen and (min-width: 30rem) {
  header .closeButton {
    top: calc(30rem * 0.052);
    right: calc(30rem * 0.044);
    width: calc(30rem * 0.11);
    height: calc(30rem * 0.11);
  }

  .score-board {
    font-size: calc(30rem * 0.08);
  }

  .game-timer {
    height: calc(30rem * 0.05);
  }
  .top-bar,
  .bottom-bar {
    font-size: calc(30rem * 0.04);
  }
}

/*# sourceMappingURL=index.2cdaf7bc.css.map */